dialog fixes

Author: hubsmoke

astro.config.mjs

@@ -1,8 +1,31 @@
 import { defineConfig } from "astro/config";
 
+// Prevent duplicate customElements.define() errors in dev mode.
+// The myst-awesome library imports Web Awesome components from many
+// separate <script> entry points, which Astro/Vite can execute more
+// than once. This patches define() to silently skip duplicates.
+function safeCustomElements() {
+  return {
+    name: "safe-custom-elements",
+    hooks: {
+      "astro:config:setup"({ injectScript }) {
+        injectScript(
+          "head-inline",
+          `{
+            const orig = customElements.define.bind(customElements);
+            customElements.define = function (name, ctor, opts) {
+              if (!customElements.get(name)) orig(name, ctor, opts);
+            };
+          }`
+        );
+      },
+    },
+  };
+}
+
 export default defineConfig({
   // Use the myst-awesome theme configuration
-  integrations: [],
+  integrations: [safeCustomElements()],
 
   server: {
     port: 4321, // Use port 4321 for the main project

src/components/Authors.astro

@@ -179,9 +179,7 @@ if (authors) {
 )}
 
 <script>
-  // Web Awesome icons are loaded globally
-  // Import Web Awesome components
-  import '@awesome.me/webawesome/dist/components/icon/icon.js';
+  // Web Awesome icon component is loaded by BasePage layout
   import { registerScienceIconsLibrary } from '@awesome-myst/myst-awesome/lib/wa-scienceicons.ts';
 
   // Register scienceicons library

src/components/SearchDialog.astro

@@ -38,9 +38,9 @@
 
 <script>
   // @ts-nocheck
+  // Web Awesome icon/button components are loaded by BasePage layout
   import '@awesome.me/webawesome/dist/components/dialog/dialog.js';
   import '@awesome.me/webawesome/dist/components/input/input.js';
-  import '@awesome.me/webawesome/dist/components/icon/icon.js';
   import '@awesome.me/webawesome/dist/components/zoomable-frame/zoomable-frame.js';
   import Fuse from 'fuse.js'