fix: enable Lucide icon rendering in component palette dialog

GhostTypes · GhostTypes · commit b08e7cd86b4e · 2025-11-01T22:28:26.000-04:00
Fixed two critical issues preventing Lucide icons from rendering in the
palette dialog:

1. Added CommonJS exports shim to allow lucide.js to load in browser
   context (matching pattern used in component-dialog.html)

2. Updated Content Security Policy to allow inline scripts by adding
   'unsafe-inline' to script-src directive

Changes:
- palette.html: Added lucide.min.js, exports shim, and lucide.js scripts
- palette.html: Updated CSP from "script-src 'self'" to include 'unsafe-inline'
- palette.ts: Removed direct import of initializeLucideIconsFromGlobal
- palette.ts: Added LucideHelperWindow type to access window.lucideHelpers
- palette.ts: Updated all icon hydration calls to use window.lucideHelpers
- palette.ts: Added global icon initialization on DOMContentLoaded

This resolves the issue where component icons and status badge icons
(pin, check) were displaying as empty blue squares instead of SVG icons.
diff --git a/src/ui/palette/palette.html b/src/ui/palette/palette.html
@@ -2,9 +2,16 @@
 <html>
 <head>
   <meta charset="UTF-8" />
-  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:">
   <title>Component Palette</title>
   <link rel="stylesheet" href="palette.css" />
+  <script src="../../../dist/webui/static/lucide.min.js"></script>
+  <script>
+    if (typeof exports === 'undefined') {
+      var exports = {};
+    }
+  </script>
+  <script src="../../../lib/ui/shared/lucide.js"></script>
 </head>
 <body>
   <div class="palette-window">
diff --git a/src/ui/palette/palette.ts b/src/ui/palette/palette.ts
@@ -7,7 +7,14 @@
  * availability and dispatching add requests.
  */
 
-import { initializeLucideIconsFromGlobal } from '../shared/lucide';
+type LucideHelperWindow = Window & {
+  lucideHelpers?: {
+    initializeLucideIconsFromGlobal?(
+      iconNames: string[],
+      root?: Document | Element | DocumentFragment
+    ): void;
+  };
+};
 
 interface PaletteAPI {
   close: () => void;
@@ -31,7 +38,7 @@ type PaletteWindow = Window & {
   debugPaletteManager?: unknown;
 };
 
-const paletteWindow = window as unknown as PaletteWindow;
+const paletteWindow = window as unknown as PaletteWindow & LucideHelperWindow;
 
 interface PaletteState {
   componentsInUse: Set<string>;
@@ -182,7 +189,7 @@ class PaletteManager {
     item.appendChild(actionButton);
 
     if (iconsToHydrate.length > 0) {
-      initializeLucideIconsFromGlobal(iconsToHydrate, item);
+      paletteWindow.lucideHelpers?.initializeLucideIconsFromGlobal?.(iconsToHydrate, item);
     }
 
     return item;
@@ -247,6 +254,7 @@ paletteWindow.debugPaletteManager = paletteManager;
 
 document.addEventListener('DOMContentLoaded', async () => {
   await paletteManager.initialize();
+  paletteWindow.lucideHelpers?.initializeLucideIconsFromGlobal?.(['x', 'pin', 'check']);
 });
 
 window.addEventListener('beforeunload', () => {
