@firebuzz/design-mode 0.3.0-beta.0 → 0.3.0-beta.2

package/dist/index.d.mts

@@ -65,14 +65,38 @@ interface AllElementsStateMessage {
 }
 type DesignModeMessageType = DesignModeMessage | ElementSelectedMessage | AllElementsStateMessage;
 
+/**
+ * React plugin configuration that should be applied to enable design mode.
+ * Works with both @vitejs/plugin-react and @vitejs/plugin-react-swc.
+ *
+ * Usage:
+ * ```ts
+ * import react from '@vitejs/plugin-react'
+ * import { firebuzzDesignMode, getReactPluginConfig } from '@firebuzz/design-mode'
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     react(getReactPluginConfig()),
+ *     firebuzzDesignMode(),
+ *   ],
+ * })
+ * ```
+ */
+declare function getReactPluginConfig(): {
+    babel?: undefined;
+} | {
+    babel: {
+        plugins: {}[][];
+    };
+};
 /**
  * Vite plugin that enables design mode features for Firebuzz templates
  * - Injects Tailwind Play CDN for runtime CSS generation
  * - Injects overlay script for element selection
  *
- * NOTE: This plugin does NOT modify JSX/TSX files.
- * Element tracking is done at runtime using React Fiber's _debugSource.
+ * NOTE: You must also configure the React plugin with getReactPluginConfig()
+ * to enable element source tracking (works with both React 18 and 19).
  */
 declare function firebuzzDesignMode(): Plugin;
 
-export { type AllElementsStateMessage, type DesignModeMessage, type DesignModeMessageType, type ElementData, type ElementSelectedMessage, type ElementUpdates, type SourceLocation, type ThemeVariables, firebuzzDesignMode };
+export { type AllElementsStateMessage, type DesignModeMessage, type DesignModeMessageType, type ElementData, type ElementSelectedMessage, type ElementUpdates, type SourceLocation, type ThemeVariables, firebuzzDesignMode, getReactPluginConfig };

package/dist/index.d.ts

@@ -65,14 +65,38 @@ interface AllElementsStateMessage {
 }
 type DesignModeMessageType = DesignModeMessage | ElementSelectedMessage | AllElementsStateMessage;
 
+/**
+ * React plugin configuration that should be applied to enable design mode.
+ * Works with both @vitejs/plugin-react and @vitejs/plugin-react-swc.
+ *
+ * Usage:
+ * ```ts
+ * import react from '@vitejs/plugin-react'
+ * import { firebuzzDesignMode, getReactPluginConfig } from '@firebuzz/design-mode'
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     react(getReactPluginConfig()),
+ *     firebuzzDesignMode(),
+ *   ],
+ * })
+ * ```
+ */
+declare function getReactPluginConfig(): {
+    babel?: undefined;
+} | {
+    babel: {
+        plugins: {}[][];
+    };
+};
 /**
  * Vite plugin that enables design mode features for Firebuzz templates
  * - Injects Tailwind Play CDN for runtime CSS generation
  * - Injects overlay script for element selection
  *
- * NOTE: This plugin does NOT modify JSX/TSX files.
- * Element tracking is done at runtime using React Fiber's _debugSource.
+ * NOTE: You must also configure the React plugin with getReactPluginConfig()
+ * to enable element source tracking (works with both React 18 and 19).
  */
 declare function firebuzzDesignMode(): Plugin;
 
-export { type AllElementsStateMessage, type DesignModeMessage, type DesignModeMessageType, type ElementData, type ElementSelectedMessage, type ElementUpdates, type SourceLocation, type ThemeVariables, firebuzzDesignMode };
+export { type AllElementsStateMessage, type DesignModeMessage, type DesignModeMessageType, type ElementData, type ElementSelectedMessage, type ElementUpdates, type SourceLocation, type ThemeVariables, firebuzzDesignMode, getReactPluginConfig };

package/dist/index.js

@@ -1,3 +1,3 @@
-'use strict';var a=require('fs/promises'),r=require('path'),url=require('url');var _documentCurrentScript=typeof document!=='undefined'?document.currentScript:null;function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var a__default=/*#__PURE__*/_interopDefault(a);var r__default=/*#__PURE__*/_interopDefault(r);function d(){let c=process.env.NODE_ENV==="development"&&process.env.VITE_DESIGN_MODE!=="false",l=process.cwd(),o=r__default.default.resolve(l,"./node_modules/.vite-plugin-firebuzz-design-mode/overlay.mjs");return {name:"vite-plugin-firebuzz-design-mode",enforce:"pre",async buildStart(){if(c)try{let e=(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.js', document.baseURI).href)),s=url.fileURLToPath(e),i=r__default.default.resolve(r__default.default.dirname(s),".."),n=r__default.default.join(i,"dist","overlay.mjs"),t=r__default.default.join(i,"dist","overlay.mjs.map");await a__default.default.mkdir(r__default.default.dirname(o),{recursive:!0}),await a__default.default.copyFile(n,o);try{await a__default.default.copyFile(t,`${o}.map`);}catch{}}catch(e){console.warn("[Firebuzz Design Mode] Could not copy overlay file:",e);}},transformIndexHtml(e){if(!c)return e;let s='<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>',n=`<script type="module" src="${o.replace(l,"")}"></script>`,t=e.replace("</head>",`${s}</head>`);return t=t.replace("</body>",`${n}</body>`),t}}}
-exports.firebuzzDesignMode=d;//# sourceMappingURL=index.js.map
+'use strict';var l=require('fs/promises'),t=require('path'),url=require('url');var _documentCurrentScript=typeof document!=='undefined'?document.currentScript:null;function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var l__default=/*#__PURE__*/_interopDefault(l);var t__default=/*#__PURE__*/_interopDefault(t);function d(){return process.env.NODE_ENV==="development"&&process.env.VITE_DESIGN_MODE!=="false"?{babel:{plugins:[["@react-dev-inspector/babel-plugin",{}]]}}:{}}function m(){let n=process.env.NODE_ENV==="development"&&process.env.VITE_DESIGN_MODE!=="false",c=process.cwd(),o=t__default.default.resolve(c,"./node_modules/.vite-plugin-firebuzz-design-mode/overlay.mjs");return {name:"vite-plugin-firebuzz-design-mode",enforce:"pre",async buildStart(){if(n)try{let e=(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.js', document.baseURI).href)),s=url.fileURLToPath(e),i=t__default.default.resolve(t__default.default.dirname(s),".."),a=t__default.default.join(i,"dist","overlay.mjs"),r=t__default.default.join(i,"dist","overlay.mjs.map");await l__default.default.mkdir(t__default.default.dirname(o),{recursive:!0}),await l__default.default.copyFile(a,o);try{await l__default.default.copyFile(r,`${o}.map`);}catch{}}catch(e){console.warn("[Firebuzz Design Mode] Could not copy overlay file:",e);}},transformIndexHtml(e){if(!n)return e;let s='<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>',a=`<script type="module" src="${o.replace(c,"")}"></script>`,r=e.replace("</head>",`${s}</head>`);return r=r.replace("</body>",`${a}</body>`),r}}}
+exports.firebuzzDesignMode=m;exports.getReactPluginConfig=d;//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/vite-plugin.ts"],"names":["firebuzzDesignMode","isDesignModeEnabled","projectRoot","overlayOutputPath","path","currentFileUrl","currentFilePath","fileURLToPath","packageRoot","overlaySource","overlaySourceMap","fs","error","html","tailwindCDN","overlayScript","modifiedHtml"],"mappings":"mUAaO,SAASA,CAAAA,EAA6B,CAE5C,IAAMC,CAAAA,CACL,QAAQ,GAAA,CAAI,QAAA,GAAa,aAAA,EACzB,OAAA,CAAQ,IAAI,gBAAA,GAAqB,OAAA,CAE5BC,CAAAA,CAAc,OAAA,CAAQ,KAAI,CAE1BC,CAAAA,CAAoBC,kBAAAA,CAAK,OAAA,CAC9BF,EACA,8DACD,CAAA,CAEA,OAAO,CACN,KAAM,kCAAA,CACN,OAAA,CAAS,KAAA,CAET,MAAM,YAAa,CAClB,GAAKD,CAAAA,CAGL,GAAI,CAEH,IAAMI,CAAAA,CAAiB,0PAAY,CAC7BC,EAAkBC,iBAAAA,CAAcF,CAAc,CAAA,CAC9CG,CAAAA,CAAcJ,mBAAK,OAAA,CAAQA,kBAAAA,CAAK,OAAA,CAAQE,CAAe,EAAG,IAAI,CAAA,CAC9DG,CAAAA,CAAgBL,kBAAAA,CAAK,KAAKI,CAAAA,CAAa,MAAA,CAAQ,aAAa,CAAA,CAC5DE,EAAmBN,kBAAAA,CAAK,IAAA,CAC7BI,CAAAA,CACA,MAAA,CACA,iBACD,CAAA,CAGA,MAAMG,kBAAAA,CAAG,KAAA,CAAMP,mBAAK,OAAA,CAAQD,CAAiB,CAAA,CAAG,CAAE,UAAW,CAAA,CAAK,CAAC,CAAA,CAGnE,MAAMQ,mBAAG,QAAA,CAASF,CAAAA,CAAeN,CAAiB,CAAA,CAGlD,GAAI,CACH,MAAMQ,kBAAAA,CAAG,QAAA,CAASD,EAAkB,CAAA,EAAGP,CAAiB,CAAA,IAAA,CAAM,EAC/D,MAAQ,CAER,CACD,CAAA,MAASS,CAAAA,CAAO,CACf,OAAA,CAAQ,IAAA,CACP,qDAAA,CACAA,CACD,EACD,CACD,CAAA,CAEA,kBAAA,CAAmBC,CAAAA,CAAM,CACxB,GAAI,CAACZ,CAAAA,CAAqB,OAAOY,EAGjC,IAAMC,CAAAA,CAAc,6EAAA,CAIdC,CAAAA,CAAgB,8BADFZ,CAAAA,CAAkB,OAAA,CAAQD,CAAAA,CAAa,EAAE,CACE,CAAA,WAAA,CAAA,CAG3Dc,CAAAA,CAAeH,CAAAA,CAAK,OAAA,CAAQ,UAAW,CAAA,EAAGC,CAAW,CAAA,OAAA,CAAS,CAAA,CAClE,OAAAE,CAAAA,CAAeA,CAAAA,CAAa,OAAA,CAAQ,SAAA,CAAW,GAAGD,CAAa,CAAA,OAAA,CAAS,CAAA,CAEjEC,CACR,CACD,CACD","file":"index.js","sourcesContent":["import fs from \"node:fs/promises\";\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport type { Plugin } from \"vite\";\n\n/**\n * Vite plugin that enables design mode features for Firebuzz templates\n * - Injects Tailwind Play CDN for runtime CSS generation\n * - Injects overlay script for element selection\n *\n * NOTE: This plugin does NOT modify JSX/TSX files.\n * Element tracking is done at runtime using React Fiber's _debugSource.\n */\nexport function firebuzzDesignMode(): Plugin {\n\t// Only enable in development, never in production builds\n\tconst isDesignModeEnabled =\n\t\tprocess.env.NODE_ENV === \"development\" &&\n\t\tprocess.env.VITE_DESIGN_MODE !== \"false\";\n\n\tconst projectRoot = process.cwd();\n\n\tconst overlayOutputPath = path.resolve(\n\t\tprojectRoot,\n\t\t\"./node_modules/.vite-plugin-firebuzz-design-mode/overlay.mjs\",\n\t);\n\n\treturn {\n\t\tname: \"vite-plugin-firebuzz-design-mode\",\n\t\tenforce: \"pre\",\n\n\t\tasync buildStart() {\n\t\t\tif (!isDesignModeEnabled) return;\n\n\t\t\t// Copy overlay file to a location Vite can serve\n\t\t\ttry {\n\t\t\t\t// Find the overlay source file from the package using import.meta.url\n\t\t\t\tconst currentFileUrl = import.meta.url;\n\t\t\t\tconst currentFilePath = fileURLToPath(currentFileUrl);\n\t\t\t\tconst packageRoot = path.resolve(path.dirname(currentFilePath), \"..\");\n\t\t\t\tconst overlaySource = path.join(packageRoot, \"dist\", \"overlay.mjs\");\n\t\t\t\tconst overlaySourceMap = path.join(\n\t\t\t\t\tpackageRoot,\n\t\t\t\t\t\"dist\",\n\t\t\t\t\t\"overlay.mjs.map\",\n\t\t\t\t);\n\n\t\t\t\t// Ensure output directory exists\n\t\t\t\tawait fs.mkdir(path.dirname(overlayOutputPath), { recursive: true });\n\n\t\t\t\t// Copy the overlay file\n\t\t\t\tawait fs.copyFile(overlaySource, overlayOutputPath);\n\n\t\t\t\t// Copy the source map file if it exists\n\t\t\t\ttry {\n\t\t\t\t\tawait fs.copyFile(overlaySourceMap, `${overlayOutputPath}.map`);\n\t\t\t\t} catch {\n\t\t\t\t\t// Source map is optional, ignore if not found\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t\"[Firebuzz Design Mode] Could not copy overlay file:\",\n\t\t\t\t\terror,\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\n\t\ttransformIndexHtml(html) {\n\t\t\tif (!isDesignModeEnabled) return html;\n\n\t\t\t// Inject Tailwind v4 Browser CDN for runtime CSS generation\n\t\t\tconst tailwindCDN = '<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>';\n\n\t\t\t// Inject the overlay script\n\t\t\tconst overlayPath = overlayOutputPath.replace(projectRoot, \"\");\n\t\t\tconst overlayScript = `<script type=\"module\" src=\"${overlayPath}\"></script>`;\n\n\t\t\t// Inject both in the head (Tailwind CDN) and before </body> (overlay)\n\t\t\tlet modifiedHtml = html.replace(\"</head>\", `${tailwindCDN}</head>`);\n\t\t\tmodifiedHtml = modifiedHtml.replace(\"</body>\", `${overlayScript}</body>`);\n\n\t\t\treturn modifiedHtml;\n\t\t},\n\t};\n}\n"]}
+{"version":3,"sources":["../src/vite-plugin.ts"],"names":["getReactPluginConfig","firebuzzDesignMode","isDesignModeEnabled","projectRoot","overlayOutputPath","path","currentFileUrl","currentFilePath","fileURLToPath","packageRoot","overlaySource","overlaySourceMap","fs","error","html","tailwindCDN","overlayScript","modifiedHtml"],"mappings":"mUAsBO,SAASA,CAAAA,EAAuB,CAKtC,OAHC,OAAA,CAAQ,GAAA,CAAI,WAAa,aAAA,EACzB,OAAA,CAAQ,IAAI,gBAAA,GAAqB,OAAA,CAM3B,CACN,KAAA,CAAO,CACN,OAAA,CAAS,CAAC,CAAC,mCAAA,CAAqC,EAAE,CAAC,CACpD,CACD,CAAA,CAPQ,EAQT,CAUO,SAASC,GAA6B,CAE5C,IAAMC,EACL,OAAA,CAAQ,GAAA,CAAI,QAAA,GAAa,aAAA,EACzB,QAAQ,GAAA,CAAI,gBAAA,GAAqB,QAE5BC,CAAAA,CAAc,OAAA,CAAQ,KAAI,CAE1BC,CAAAA,CAAoBC,mBAAK,OAAA,CAC9BF,CAAAA,CACA,8DACD,CAAA,CAEA,OAAO,CACN,IAAA,CAAM,kCAAA,CACN,QAAS,KAAA,CAET,MAAM,YAAa,CAClB,GAAKD,EAGL,GAAI,CAEH,IAAMI,CAAAA,CAAiB,2PACjBC,CAAAA,CAAkBC,iBAAAA,CAAcF,CAAc,CAAA,CAC9CG,CAAAA,CAAcJ,mBAAK,OAAA,CAAQA,kBAAAA,CAAK,QAAQE,CAAe,CAAA,CAAG,IAAI,CAAA,CAC9DG,CAAAA,CAAgBL,kBAAAA,CAAK,IAAA,CAAKI,EAAa,MAAA,CAAQ,aAAa,EAC5DE,CAAAA,CAAmBN,kBAAAA,CAAK,KAC7BI,CAAAA,CACA,MAAA,CACA,iBACD,CAAA,CAGA,MAAMG,mBAAG,KAAA,CAAMP,kBAAAA,CAAK,QAAQD,CAAiB,CAAA,CAAG,CAAE,SAAA,CAAW,CAAA,CAAK,CAAC,CAAA,CAGnE,MAAMQ,mBAAG,QAAA,CAASF,CAAAA,CAAeN,CAAiB,CAAA,CAGlD,GAAI,CACH,MAAMQ,kBAAAA,CAAG,SAASD,CAAAA,CAAkB,CAAA,EAAGP,CAAiB,CAAA,IAAA,CAAM,EAC/D,MAAQ,CAER,CACD,OAASS,CAAAA,CAAO,CACf,OAAA,CAAQ,IAAA,CACP,sDACAA,CACD,EACD,CACD,CAAA,CAEA,kBAAA,CAAmBC,EAAM,CACxB,GAAI,CAACZ,CAAAA,CAAqB,OAAOY,EAGjC,IAAMC,CAAAA,CAAc,8EAIdC,CAAAA,CAAgB,CAAA,2BAAA,EADFZ,EAAkB,OAAA,CAAQD,CAAAA,CAAa,EAAE,CACE,CAAA,WAAA,CAAA,CAG3Dc,EAAeH,CAAAA,CAAK,OAAA,CAAQ,UAAW,CAAA,EAAGC,CAAW,SAAS,CAAA,CAClE,OAAAE,EAAeA,CAAAA,CAAa,OAAA,CAAQ,UAAW,CAAA,EAAGD,CAAa,SAAS,CAAA,CAEjEC,CACR,CACD,CACD","file":"index.js","sourcesContent":["import fs from \"node:fs/promises\";\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport type { Plugin } from \"vite\";\n\n/**\n * React plugin configuration that should be applied to enable design mode.\n * Works with both @vitejs/plugin-react and @vitejs/plugin-react-swc.\n *\n * Usage:\n * ```ts\n * import react from '@vitejs/plugin-react'\n * import { firebuzzDesignMode, getReactPluginConfig } from '@firebuzz/design-mode'\n *\n * export default defineConfig({\n *   plugins: [\n *     react(getReactPluginConfig()),\n *     firebuzzDesignMode(),\n *   ],\n * })\n * ```\n */\nexport function getReactPluginConfig() {\n\tconst isDesignModeEnabled =\n\t\tprocess.env.NODE_ENV === \"development\" &&\n\t\tprocess.env.VITE_DESIGN_MODE !== \"false\";\n\n\tif (!isDesignModeEnabled) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\tbabel: {\n\t\t\tplugins: [[\"@react-dev-inspector/babel-plugin\", {}]],\n\t\t},\n\t};\n}\n\n/**\n * Vite plugin that enables design mode features for Firebuzz templates\n * - Injects Tailwind Play CDN for runtime CSS generation\n * - Injects overlay script for element selection\n *\n * NOTE: You must also configure the React plugin with getReactPluginConfig()\n * to enable element source tracking (works with both React 18 and 19).\n */\nexport function firebuzzDesignMode(): Plugin {\n\t// Only enable in development, never in production builds\n\tconst isDesignModeEnabled =\n\t\tprocess.env.NODE_ENV === \"development\" &&\n\t\tprocess.env.VITE_DESIGN_MODE !== \"false\";\n\n\tconst projectRoot = process.cwd();\n\n\tconst overlayOutputPath = path.resolve(\n\t\tprojectRoot,\n\t\t\"./node_modules/.vite-plugin-firebuzz-design-mode/overlay.mjs\",\n\t);\n\n\treturn {\n\t\tname: \"vite-plugin-firebuzz-design-mode\",\n\t\tenforce: \"pre\",\n\n\t\tasync buildStart() {\n\t\t\tif (!isDesignModeEnabled) return;\n\n\t\t\t// Copy overlay file to a location Vite can serve\n\t\t\ttry {\n\t\t\t\t// Find the overlay source file from the package using import.meta.url\n\t\t\t\tconst currentFileUrl = import.meta.url;\n\t\t\t\tconst currentFilePath = fileURLToPath(currentFileUrl);\n\t\t\t\tconst packageRoot = path.resolve(path.dirname(currentFilePath), \"..\");\n\t\t\t\tconst overlaySource = path.join(packageRoot, \"dist\", \"overlay.mjs\");\n\t\t\t\tconst overlaySourceMap = path.join(\n\t\t\t\t\tpackageRoot,\n\t\t\t\t\t\"dist\",\n\t\t\t\t\t\"overlay.mjs.map\",\n\t\t\t\t);\n\n\t\t\t\t// Ensure output directory exists\n\t\t\t\tawait fs.mkdir(path.dirname(overlayOutputPath), { recursive: true });\n\n\t\t\t\t// Copy the overlay file\n\t\t\t\tawait fs.copyFile(overlaySource, overlayOutputPath);\n\n\t\t\t\t// Copy the source map file if it exists\n\t\t\t\ttry {\n\t\t\t\t\tawait fs.copyFile(overlaySourceMap, `${overlayOutputPath}.map`);\n\t\t\t\t} catch {\n\t\t\t\t\t// Source map is optional, ignore if not found\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t\"[Firebuzz Design Mode] Could not copy overlay file:\",\n\t\t\t\t\terror,\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\n\t\ttransformIndexHtml(html) {\n\t\t\tif (!isDesignModeEnabled) return html;\n\n\t\t\t// Inject Tailwind v4 Browser CDN for runtime CSS generation\n\t\t\tconst tailwindCDN = '<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>';\n\n\t\t\t// Inject the overlay script\n\t\t\tconst overlayPath = overlayOutputPath.replace(projectRoot, \"\");\n\t\t\tconst overlayScript = `<script type=\"module\" src=\"${overlayPath}\"></script>`;\n\n\t\t\t// Inject both in the head (Tailwind CDN) and before </body> (overlay)\n\t\t\tlet modifiedHtml = html.replace(\"</head>\", `${tailwindCDN}</head>`);\n\t\t\tmodifiedHtml = modifiedHtml.replace(\"</body>\", `${overlayScript}</body>`);\n\n\t\t\treturn modifiedHtml;\n\t\t},\n\t};\n}\n"]}

package/dist/index.mjs

@@ -1,3 +1,3 @@
-import a from'fs/promises';import r from'path';import {fileURLToPath}from'url';function d(){let c=process.env.NODE_ENV==="development"&&process.env.VITE_DESIGN_MODE!=="false",l=process.cwd(),o=r.resolve(l,"./node_modules/.vite-plugin-firebuzz-design-mode/overlay.mjs");return {name:"vite-plugin-firebuzz-design-mode",enforce:"pre",async buildStart(){if(c)try{let e=import.meta.url,s=fileURLToPath(e),i=r.resolve(r.dirname(s),".."),n=r.join(i,"dist","overlay.mjs"),t=r.join(i,"dist","overlay.mjs.map");await a.mkdir(r.dirname(o),{recursive:!0}),await a.copyFile(n,o);try{await a.copyFile(t,`${o}.map`);}catch{}}catch(e){console.warn("[Firebuzz Design Mode] Could not copy overlay file:",e);}},transformIndexHtml(e){if(!c)return e;let s='<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>',n=`<script type="module" src="${o.replace(l,"")}"></script>`,t=e.replace("</head>",`${s}</head>`);return t=t.replace("</body>",`${n}</body>`),t}}}
-export{d as firebuzzDesignMode};//# sourceMappingURL=index.mjs.map
+import l from'fs/promises';import t from'path';import {fileURLToPath}from'url';function d(){return process.env.NODE_ENV==="development"&&process.env.VITE_DESIGN_MODE!=="false"?{babel:{plugins:[["@react-dev-inspector/babel-plugin",{}]]}}:{}}function m(){let n=process.env.NODE_ENV==="development"&&process.env.VITE_DESIGN_MODE!=="false",c=process.cwd(),o=t.resolve(c,"./node_modules/.vite-plugin-firebuzz-design-mode/overlay.mjs");return {name:"vite-plugin-firebuzz-design-mode",enforce:"pre",async buildStart(){if(n)try{let e=import.meta.url,s=fileURLToPath(e),i=t.resolve(t.dirname(s),".."),a=t.join(i,"dist","overlay.mjs"),r=t.join(i,"dist","overlay.mjs.map");await l.mkdir(t.dirname(o),{recursive:!0}),await l.copyFile(a,o);try{await l.copyFile(r,`${o}.map`);}catch{}}catch(e){console.warn("[Firebuzz Design Mode] Could not copy overlay file:",e);}},transformIndexHtml(e){if(!n)return e;let s='<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>',a=`<script type="module" src="${o.replace(c,"")}"></script>`,r=e.replace("</head>",`${s}</head>`);return r=r.replace("</body>",`${a}</body>`),r}}}
+export{m as firebuzzDesignMode,d as getReactPluginConfig};//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/vite-plugin.ts"],"names":["firebuzzDesignMode","isDesignModeEnabled","projectRoot","overlayOutputPath","path","currentFileUrl","currentFilePath","fileURLToPath","packageRoot","overlaySource","overlaySourceMap","fs","error","html","tailwindCDN","overlayScript","modifiedHtml"],"mappings":"+EAaO,SAASA,CAAAA,EAA6B,CAE5C,IAAMC,CAAAA,CACL,QAAQ,GAAA,CAAI,QAAA,GAAa,aAAA,EACzB,OAAA,CAAQ,IAAI,gBAAA,GAAqB,OAAA,CAE5BC,CAAAA,CAAc,OAAA,CAAQ,KAAI,CAE1BC,CAAAA,CAAoBC,CAAAA,CAAK,OAAA,CAC9BF,EACA,8DACD,CAAA,CAEA,OAAO,CACN,KAAM,kCAAA,CACN,OAAA,CAAS,KAAA,CAET,MAAM,YAAa,CAClB,GAAKD,CAAAA,CAGL,GAAI,CAEH,IAAMI,CAAAA,CAAiB,MAAA,CAAA,IAAA,CAAY,GAAA,CAC7BC,EAAkBC,aAAAA,CAAcF,CAAc,CAAA,CAC9CG,CAAAA,CAAcJ,EAAK,OAAA,CAAQA,CAAAA,CAAK,OAAA,CAAQE,CAAe,EAAG,IAAI,CAAA,CAC9DG,CAAAA,CAAgBL,CAAAA,CAAK,KAAKI,CAAAA,CAAa,MAAA,CAAQ,aAAa,CAAA,CAC5DE,EAAmBN,CAAAA,CAAK,IAAA,CAC7BI,CAAAA,CACA,MAAA,CACA,iBACD,CAAA,CAGA,MAAMG,CAAAA,CAAG,KAAA,CAAMP,EAAK,OAAA,CAAQD,CAAiB,CAAA,CAAG,CAAE,UAAW,CAAA,CAAK,CAAC,CAAA,CAGnE,MAAMQ,EAAG,QAAA,CAASF,CAAAA,CAAeN,CAAiB,CAAA,CAGlD,GAAI,CACH,MAAMQ,CAAAA,CAAG,QAAA,CAASD,EAAkB,CAAA,EAAGP,CAAiB,CAAA,IAAA,CAAM,EAC/D,MAAQ,CAER,CACD,CAAA,MAASS,CAAAA,CAAO,CACf,OAAA,CAAQ,IAAA,CACP,qDAAA,CACAA,CACD,EACD,CACD,CAAA,CAEA,kBAAA,CAAmBC,CAAAA,CAAM,CACxB,GAAI,CAACZ,CAAAA,CAAqB,OAAOY,EAGjC,IAAMC,CAAAA,CAAc,6EAAA,CAIdC,CAAAA,CAAgB,8BADFZ,CAAAA,CAAkB,OAAA,CAAQD,CAAAA,CAAa,EAAE,CACE,CAAA,WAAA,CAAA,CAG3Dc,CAAAA,CAAeH,CAAAA,CAAK,OAAA,CAAQ,UAAW,CAAA,EAAGC,CAAW,CAAA,OAAA,CAAS,CAAA,CAClE,OAAAE,CAAAA,CAAeA,CAAAA,CAAa,OAAA,CAAQ,SAAA,CAAW,GAAGD,CAAa,CAAA,OAAA,CAAS,CAAA,CAEjEC,CACR,CACD,CACD","file":"index.mjs","sourcesContent":["import fs from \"node:fs/promises\";\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport type { Plugin } from \"vite\";\n\n/**\n * Vite plugin that enables design mode features for Firebuzz templates\n * - Injects Tailwind Play CDN for runtime CSS generation\n * - Injects overlay script for element selection\n *\n * NOTE: This plugin does NOT modify JSX/TSX files.\n * Element tracking is done at runtime using React Fiber's _debugSource.\n */\nexport function firebuzzDesignMode(): Plugin {\n\t// Only enable in development, never in production builds\n\tconst isDesignModeEnabled =\n\t\tprocess.env.NODE_ENV === \"development\" &&\n\t\tprocess.env.VITE_DESIGN_MODE !== \"false\";\n\n\tconst projectRoot = process.cwd();\n\n\tconst overlayOutputPath = path.resolve(\n\t\tprojectRoot,\n\t\t\"./node_modules/.vite-plugin-firebuzz-design-mode/overlay.mjs\",\n\t);\n\n\treturn {\n\t\tname: \"vite-plugin-firebuzz-design-mode\",\n\t\tenforce: \"pre\",\n\n\t\tasync buildStart() {\n\t\t\tif (!isDesignModeEnabled) return;\n\n\t\t\t// Copy overlay file to a location Vite can serve\n\t\t\ttry {\n\t\t\t\t// Find the overlay source file from the package using import.meta.url\n\t\t\t\tconst currentFileUrl = import.meta.url;\n\t\t\t\tconst currentFilePath = fileURLToPath(currentFileUrl);\n\t\t\t\tconst packageRoot = path.resolve(path.dirname(currentFilePath), \"..\");\n\t\t\t\tconst overlaySource = path.join(packageRoot, \"dist\", \"overlay.mjs\");\n\t\t\t\tconst overlaySourceMap = path.join(\n\t\t\t\t\tpackageRoot,\n\t\t\t\t\t\"dist\",\n\t\t\t\t\t\"overlay.mjs.map\",\n\t\t\t\t);\n\n\t\t\t\t// Ensure output directory exists\n\t\t\t\tawait fs.mkdir(path.dirname(overlayOutputPath), { recursive: true });\n\n\t\t\t\t// Copy the overlay file\n\t\t\t\tawait fs.copyFile(overlaySource, overlayOutputPath);\n\n\t\t\t\t// Copy the source map file if it exists\n\t\t\t\ttry {\n\t\t\t\t\tawait fs.copyFile(overlaySourceMap, `${overlayOutputPath}.map`);\n\t\t\t\t} catch {\n\t\t\t\t\t// Source map is optional, ignore if not found\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t\"[Firebuzz Design Mode] Could not copy overlay file:\",\n\t\t\t\t\terror,\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\n\t\ttransformIndexHtml(html) {\n\t\t\tif (!isDesignModeEnabled) return html;\n\n\t\t\t// Inject Tailwind v4 Browser CDN for runtime CSS generation\n\t\t\tconst tailwindCDN = '<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>';\n\n\t\t\t// Inject the overlay script\n\t\t\tconst overlayPath = overlayOutputPath.replace(projectRoot, \"\");\n\t\t\tconst overlayScript = `<script type=\"module\" src=\"${overlayPath}\"></script>`;\n\n\t\t\t// Inject both in the head (Tailwind CDN) and before </body> (overlay)\n\t\t\tlet modifiedHtml = html.replace(\"</head>\", `${tailwindCDN}</head>`);\n\t\t\tmodifiedHtml = modifiedHtml.replace(\"</body>\", `${overlayScript}</body>`);\n\n\t\t\treturn modifiedHtml;\n\t\t},\n\t};\n}\n"]}
+{"version":3,"sources":["../src/vite-plugin.ts"],"names":["getReactPluginConfig","firebuzzDesignMode","isDesignModeEnabled","projectRoot","overlayOutputPath","path","currentFileUrl","currentFilePath","fileURLToPath","packageRoot","overlaySource","overlaySourceMap","fs","error","html","tailwindCDN","overlayScript","modifiedHtml"],"mappings":"+EAsBO,SAASA,CAAAA,EAAuB,CAKtC,OAHC,OAAA,CAAQ,GAAA,CAAI,WAAa,aAAA,EACzB,OAAA,CAAQ,IAAI,gBAAA,GAAqB,OAAA,CAM3B,CACN,KAAA,CAAO,CACN,OAAA,CAAS,CAAC,CAAC,mCAAA,CAAqC,EAAE,CAAC,CACpD,CACD,CAAA,CAPQ,EAQT,CAUO,SAASC,GAA6B,CAE5C,IAAMC,EACL,OAAA,CAAQ,GAAA,CAAI,QAAA,GAAa,aAAA,EACzB,QAAQ,GAAA,CAAI,gBAAA,GAAqB,QAE5BC,CAAAA,CAAc,OAAA,CAAQ,KAAI,CAE1BC,CAAAA,CAAoBC,EAAK,OAAA,CAC9BF,CAAAA,CACA,8DACD,CAAA,CAEA,OAAO,CACN,IAAA,CAAM,kCAAA,CACN,QAAS,KAAA,CAET,MAAM,YAAa,CAClB,GAAKD,EAGL,GAAI,CAEH,IAAMI,CAAAA,CAAiB,MAAA,CAAA,IAAA,CAAY,IAC7BC,CAAAA,CAAkBC,aAAAA,CAAcF,CAAc,CAAA,CAC9CG,CAAAA,CAAcJ,EAAK,OAAA,CAAQA,CAAAA,CAAK,QAAQE,CAAe,CAAA,CAAG,IAAI,CAAA,CAC9DG,CAAAA,CAAgBL,CAAAA,CAAK,IAAA,CAAKI,EAAa,MAAA,CAAQ,aAAa,EAC5DE,CAAAA,CAAmBN,CAAAA,CAAK,KAC7BI,CAAAA,CACA,MAAA,CACA,iBACD,CAAA,CAGA,MAAMG,EAAG,KAAA,CAAMP,CAAAA,CAAK,QAAQD,CAAiB,CAAA,CAAG,CAAE,SAAA,CAAW,CAAA,CAAK,CAAC,CAAA,CAGnE,MAAMQ,EAAG,QAAA,CAASF,CAAAA,CAAeN,CAAiB,CAAA,CAGlD,GAAI,CACH,MAAMQ,CAAAA,CAAG,SAASD,CAAAA,CAAkB,CAAA,EAAGP,CAAiB,CAAA,IAAA,CAAM,EAC/D,MAAQ,CAER,CACD,OAASS,CAAAA,CAAO,CACf,OAAA,CAAQ,IAAA,CACP,sDACAA,CACD,EACD,CACD,CAAA,CAEA,kBAAA,CAAmBC,EAAM,CACxB,GAAI,CAACZ,CAAAA,CAAqB,OAAOY,EAGjC,IAAMC,CAAAA,CAAc,8EAIdC,CAAAA,CAAgB,CAAA,2BAAA,EADFZ,EAAkB,OAAA,CAAQD,CAAAA,CAAa,EAAE,CACE,CAAA,WAAA,CAAA,CAG3Dc,EAAeH,CAAAA,CAAK,OAAA,CAAQ,UAAW,CAAA,EAAGC,CAAW,SAAS,CAAA,CAClE,OAAAE,EAAeA,CAAAA,CAAa,OAAA,CAAQ,UAAW,CAAA,EAAGD,CAAa,SAAS,CAAA,CAEjEC,CACR,CACD,CACD","file":"index.mjs","sourcesContent":["import fs from \"node:fs/promises\";\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport type { Plugin } from \"vite\";\n\n/**\n * React plugin configuration that should be applied to enable design mode.\n * Works with both @vitejs/plugin-react and @vitejs/plugin-react-swc.\n *\n * Usage:\n * ```ts\n * import react from '@vitejs/plugin-react'\n * import { firebuzzDesignMode, getReactPluginConfig } from '@firebuzz/design-mode'\n *\n * export default defineConfig({\n *   plugins: [\n *     react(getReactPluginConfig()),\n *     firebuzzDesignMode(),\n *   ],\n * })\n * ```\n */\nexport function getReactPluginConfig() {\n\tconst isDesignModeEnabled =\n\t\tprocess.env.NODE_ENV === \"development\" &&\n\t\tprocess.env.VITE_DESIGN_MODE !== \"false\";\n\n\tif (!isDesignModeEnabled) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\tbabel: {\n\t\t\tplugins: [[\"@react-dev-inspector/babel-plugin\", {}]],\n\t\t},\n\t};\n}\n\n/**\n * Vite plugin that enables design mode features for Firebuzz templates\n * - Injects Tailwind Play CDN for runtime CSS generation\n * - Injects overlay script for element selection\n *\n * NOTE: You must also configure the React plugin with getReactPluginConfig()\n * to enable element source tracking (works with both React 18 and 19).\n */\nexport function firebuzzDesignMode(): Plugin {\n\t// Only enable in development, never in production builds\n\tconst isDesignModeEnabled =\n\t\tprocess.env.NODE_ENV === \"development\" &&\n\t\tprocess.env.VITE_DESIGN_MODE !== \"false\";\n\n\tconst projectRoot = process.cwd();\n\n\tconst overlayOutputPath = path.resolve(\n\t\tprojectRoot,\n\t\t\"./node_modules/.vite-plugin-firebuzz-design-mode/overlay.mjs\",\n\t);\n\n\treturn {\n\t\tname: \"vite-plugin-firebuzz-design-mode\",\n\t\tenforce: \"pre\",\n\n\t\tasync buildStart() {\n\t\t\tif (!isDesignModeEnabled) return;\n\n\t\t\t// Copy overlay file to a location Vite can serve\n\t\t\ttry {\n\t\t\t\t// Find the overlay source file from the package using import.meta.url\n\t\t\t\tconst currentFileUrl = import.meta.url;\n\t\t\t\tconst currentFilePath = fileURLToPath(currentFileUrl);\n\t\t\t\tconst packageRoot = path.resolve(path.dirname(currentFilePath), \"..\");\n\t\t\t\tconst overlaySource = path.join(packageRoot, \"dist\", \"overlay.mjs\");\n\t\t\t\tconst overlaySourceMap = path.join(\n\t\t\t\t\tpackageRoot,\n\t\t\t\t\t\"dist\",\n\t\t\t\t\t\"overlay.mjs.map\",\n\t\t\t\t);\n\n\t\t\t\t// Ensure output directory exists\n\t\t\t\tawait fs.mkdir(path.dirname(overlayOutputPath), { recursive: true });\n\n\t\t\t\t// Copy the overlay file\n\t\t\t\tawait fs.copyFile(overlaySource, overlayOutputPath);\n\n\t\t\t\t// Copy the source map file if it exists\n\t\t\t\ttry {\n\t\t\t\t\tawait fs.copyFile(overlaySourceMap, `${overlayOutputPath}.map`);\n\t\t\t\t} catch {\n\t\t\t\t\t// Source map is optional, ignore if not found\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t\"[Firebuzz Design Mode] Could not copy overlay file:\",\n\t\t\t\t\terror,\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\n\t\ttransformIndexHtml(html) {\n\t\t\tif (!isDesignModeEnabled) return html;\n\n\t\t\t// Inject Tailwind v4 Browser CDN for runtime CSS generation\n\t\t\tconst tailwindCDN = '<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>';\n\n\t\t\t// Inject the overlay script\n\t\t\tconst overlayPath = overlayOutputPath.replace(projectRoot, \"\");\n\t\t\tconst overlayScript = `<script type=\"module\" src=\"${overlayPath}\"></script>`;\n\n\t\t\t// Inject both in the head (Tailwind CDN) and before </body> (overlay)\n\t\t\tlet modifiedHtml = html.replace(\"</head>\", `${tailwindCDN}</head>`);\n\t\t\tmodifiedHtml = modifiedHtml.replace(\"</body>\", `${overlayScript}</body>`);\n\n\t\t\treturn modifiedHtml;\n\t\t},\n\t};\n}\n"]}

package/dist/overlay.js

@@ -1,9 +1,9 @@
-'use strict';var c=class{isEnabled=false;selectedElement=null;hoveredElement=null;hoverOverlay;selectionOverlay;selectionTagLabel;childrenOverlays=[];resizeObserver=null;constructor(){this.hoverOverlay=this.createOverlay("2px solid #3b82f6",999991),this.selectionOverlay=this.createOverlay("1px solid #3b82f6",999990),this.selectionTagLabel=this.createTagLabel(),this.listen(),this.setupResizeObserver();}createOverlay(e,s){let t=document.createElement("div");return t.className="fb-design-mode-overlay",Object.assign(t.style,{position:"absolute",border:e,pointerEvents:"none",zIndex:String(s),display:"none",boxShadow:"0 0 0 1px rgba(59, 130, 246, 0.2)",transition:"all 0.1s ease-out"}),document.body.appendChild(t),t}createChildOverlay(){let e=document.createElement("div");return e.className="fb-design-mode-overlay fb-child-overlay",Object.assign(e.style,{position:"absolute",border:"1px dashed rgba(59, 130, 246, 0.4)",pointerEvents:"none",zIndex:"999989",display:"none",boxShadow:"0 0 0 1px rgba(59, 130, 246, 0.1)",transition:"all 0.1s ease-out"}),document.body.appendChild(e),e}createTagLabel(){let e=document.createElement("div");return e.className="fb-design-mode-tag",Object.assign(e.style,{position:"absolute",background:"#3b82f6",color:"white",padding:"2px 6px",fontSize:"11px",fontFamily:"monospace",fontWeight:"500",borderRadius:"0 0 4px 0",pointerEvents:"none",zIndex:"999999",display:"none"}),document.body.appendChild(e),e}listen(){window.addEventListener("message",e=>{e.data.type==="ENABLE_DESIGN_MODE"?this.enable():e.data.type==="DISABLE_DESIGN_MODE"?this.disable():e.data.type==="FB_UPDATE_ELEMENT"?this.handleUpdateElement(e.data):e.data.type==="FB_GET_ALL_ELEMENTS_STATE"?this.handleGetAllElementsState():e.data.type==="FB_UPDATE_THEME"?this.handleUpdateTheme(e.data.theme):e.data.type==="FB_DESELECT_ELEMENT"?this.deselectElement():e.data.type==="FB_SELECT_ELEMENT"&&this.handleSelectElement(e.data);});}setupResizeObserver(){window.addEventListener("resize",this.updateOverlayPositions),window.addEventListener("scroll",this.updateOverlayPositions,true),this.resizeObserver=new ResizeObserver(()=>{this.updateOverlayPositions();}),this.resizeObserver.observe(document.body);}updateOverlayPositions=()=>{this.selectedElement&&this.selectionOverlay.style.display!=="none"&&(this.updateOverlayPosition(this.selectionOverlay,this.selectedElement),this.updateTagLabel(this.selectedElement)),this.hoveredElement&&this.hoverOverlay.style.display!=="none"&&this.updateOverlayPosition(this.hoverOverlay,this.hoveredElement);for(let e of this.childrenOverlays)if(e.style.display!=="none"&&this.hoveredElement){let s=Array.from(this.hoveredElement.children).filter(n=>this.getReactFiberSource(n)!==null),t=this.childrenOverlays.indexOf(e),i=s[t];i&&this.updateOverlayPosition(e,i);}};enable(){this.isEnabled||(this.isEnabled=true,document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("click",this.handleClick,true),document.addEventListener("mouseleave",this.handleMouseLeave),document.body.style.cursor="crosshair");}disable(){this.isEnabled&&(this.isEnabled=false,document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("click",this.handleClick,true),document.removeEventListener("mouseleave",this.handleMouseLeave),this.hoverOverlay.style.display="none",this.selectionOverlay.style.display="none",this.selectionTagLabel.style.display="none",this.hideChildrenOverlays(),this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),document.body.style.cursor="",this.selectedElement=null,this.hoveredElement=null);}deselectElement(){this.selectedElement&&(this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=null,this.selectionOverlay.style.display="none",this.selectionTagLabel.style.display="none");}handleSelectElement(e){if(!e.sourceFile||!e.sourceLine||e.sourceColumn===void 0)return;let s=document.querySelectorAll("*");for(let t of s){if(t.classList?.contains("fb-design-mode-overlay")||t.classList?.contains("fb-design-mode-tag"))continue;let i=this.getReactFiberSource(t);if(i&&i.fileName===e.sourceFile&&i.lineNumber===e.sourceLine&&i.columnNumber===e.sourceColumn){let n=t;this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=n,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,n),this.selectionOverlay.style.display="block",this.updateTagLabel(n),this.selectionTagLabel.style.display="block",this.sendElementData(n,i);return}}}getReactFiberSource(e){let s=e,t=Object.keys(s).find(r=>r.startsWith("__reactFiber$")||r.startsWith("__reactInternalInstance$"));if(!t)return null;let i=s[t],n=null;for(;i;){if(i._debugSource){let r={fileName:i._debugSource.fileName,lineNumber:i._debugSource.lineNumber,columnNumber:i._debugSource.columnNumber??0};if(n||(n=r),r.fileName.includes("/components/ui/")||r.fileName.includes("/components/common/")){i=i.return;continue}return r}i=i.return;}return n}isContainer(e){return ["div","section","header","footer","main","aside","nav","article","ul","ol","li"].includes(e.tagName.toLowerCase())}hasDirectTextContent(e){return Array.from(e.childNodes).some(s=>s.nodeType===Node.TEXT_NODE&&s.textContent?.trim())}handleMouseLeave=()=>{this.isEnabled&&(this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=null,this.hoverOverlay.style.display="none",this.hideChildrenOverlays());};handleMouseMove=e=>{if(!this.isEnabled)return;let t=document.elementsFromPoint(e.clientX,e.clientY).filter(n=>n.classList.contains("fb-design-mode-overlay")||n.classList.contains("fb-design-mode-tag")?false:this.getReactFiberSource(n)!==null);if(t.length===0){this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=null,this.hoverOverlay.style.display="none",this.hideChildrenOverlays();return}let i=t[0];if(i){if(i===this.selectedElement){this.hoverOverlay.style.display="none",this.hideChildrenOverlays();return}this.hoveredElement&&this.hoveredElement!==i&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=i,this.hoveredElement.setAttribute("data-fb-hovered","true"),this.updateOverlayPosition(this.hoverOverlay,i),this.hoverOverlay.style.display="block",this.isContainer(i)&&!this.hasDirectTextContent(i)?this.showChildrenOverlays(i):this.hideChildrenOverlays();}};showChildrenOverlays(e){let s=Array.from(e.children).filter(t=>this.getReactFiberSource(t)!==null);for(;this.childrenOverlays.length<s.length;)this.childrenOverlays.push(this.createChildOverlay());s.forEach((t,i)=>{let n=this.childrenOverlays[i];n&&(this.updateOverlayPosition(n,t),n.style.display="block");});for(let t=s.length;t<this.childrenOverlays.length;t++){let i=this.childrenOverlays[t];i&&(i.style.display="none");}}hideChildrenOverlays(){for(let e of this.childrenOverlays)e.style.display="none";}currentSelectionIndex=0;lastClickTime=0;lastClickPosition={x:0,y:0};handleClick=e=>{if(!this.isEnabled||(e.preventDefault(),e.stopPropagation(),!this.hoveredElement))return;let s=Date.now(),t=s-this.lastClickTime,i=Math.hypot(e.clientX-this.lastClickPosition.x,e.clientY-this.lastClickPosition.y),r=document.elementsFromPoint(e.clientX,e.clientY).filter(l=>l.classList.contains("fb-design-mode-overlay")||l.classList.contains("fb-design-mode-tag")?false:this.getReactFiberSource(l)!==null);t<1e3&&i<10&&r.length>1?this.currentSelectionIndex=(this.currentSelectionIndex+1)%r.length:this.currentSelectionIndex=0;let a=r[this.currentSelectionIndex];if(!a)return;let o=this.getReactFiberSource(a);o&&(this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=a,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,a),this.selectionOverlay.style.display="block",this.updateTagLabel(a),this.selectionTagLabel.style.display="block",this.sendElementData(a,o),this.lastClickTime=s,this.lastClickPosition={x:e.clientX,y:e.clientY});};updateOverlayPosition(e,s){let t=s.getBoundingClientRect();Object.assign(e.style,{top:`${t.top+window.scrollY}px`,left:`${t.left+window.scrollX}px`,width:`${t.width}px`,height:`${t.height}px`});}updateTagLabel(e){let s=e.getBoundingClientRect(),t=e.tagName.toLowerCase();this.selectionTagLabel.textContent=t,Object.assign(this.selectionTagLabel.style,{top:`${s.top+window.scrollY}px`,left:`${s.left+window.scrollX}px`});}getRelevantStyles(e){let s=window.getComputedStyle(e),t=["display","position","width","height","padding","margin","backgroundColor","color","fontSize","fontFamily"],i={};for(let n of t)i[n]=s.getPropertyValue(n);return i}getDirectTextContent(e){let s=Array.from(e.childNodes).filter(t=>t.nodeType===Node.TEXT_NODE).map(t=>t.textContent?.trim()).filter(Boolean);return s.length>0?s.join(" "):null}sendElementData(e,s){let t=this.getDirectTextContent(e),i={type:"FB_ELEMENT_SELECTED",data:{sourceFile:s.fileName,sourceLine:s.lineNumber,sourceColumn:s.columnNumber,tagName:e.tagName,className:e.className,textContent:t,src:e.getAttribute("src")||void 0,alt:e.getAttribute("alt")||void 0,href:e.getAttribute("href")||void 0,target:e.getAttribute("target")||void 0,rel:e.getAttribute("rel")||void 0,computedStyles:this.getRelevantStyles(e)}};window.parent.postMessage(i,"*");}handleGetAllElementsState(){let e=document.querySelectorAll("*"),s=[];for(let t of e){if(t.classList?.contains("fb-design-mode-overlay")||t.classList?.contains("fb-design-mode-tag"))continue;let i=this.getReactFiberSource(t);if(!i)continue;let n=t,r=n;if(n.tagName!=="IMG"){let l=n.querySelector("img");l&&(r=l);}let a=this.getDirectTextContent(n),o="";n.className&&(typeof n.className=="string"?o=n.className:"baseVal"in n.className&&(o=n.className.baseVal)),s.push({sourceFile:i.fileName,sourceLine:i.lineNumber,sourceColumn:i.columnNumber,className:o,textContent:a,src:r.getAttribute("src")||void 0,alt:r.getAttribute("alt")||void 0,href:n.getAttribute("href")||void 0,target:n.getAttribute("target")||void 0,rel:n.getAttribute("rel")||void 0});}window.parent.postMessage({type:"FB_ALL_ELEMENTS_STATE",data:s},"*");}handleUpdateElement(e){let{sourceFile:s,sourceLine:t,sourceColumn:i,updates:n}=e;if(!s||!t||!n)return;let r=document.querySelectorAll("*");for(let a of r){let o=this.getReactFiberSource(a);if(o?.fileName===s&&o?.lineNumber===t&&o?.columnNumber===i){let l=a;if((n.src!==void 0||n.alt!==void 0)&&l.tagName!=="IMG"){let d=l.querySelector("img");d&&(l=d);}if(n.className!==void 0&&(l.className=n.className),n.textContent!==void 0){let d=Array.from(l.childNodes).find(u=>u.nodeType===Node.TEXT_NODE);d?d.textContent=n.textContent:l.textContent=n.textContent;}n.src!==void 0&&"src"in l&&(l.setAttribute("src",n.src),l.hasAttribute("srcset")&&l.removeAttribute("srcset")),n.alt!==void 0&&"alt"in l&&(l.alt=n.alt),n.href!==void 0&&"href"in l&&l.setAttribute("href",n.href),n.target!==void 0&&"target"in l&&l.setAttribute("target",n.target),n.rel!==void 0&&"rel"in l&&l.setAttribute("rel",n.rel),l===this.hoveredElement&&this.updateOverlayPosition(this.hoverOverlay,l),l===this.selectedElement&&(this.updateOverlayPosition(this.selectionOverlay,l),this.updateTagLabel(l));return}}}handleUpdateTheme(e){if(!e)return;let s=document.getElementById("fb-design-mode-theme");s||(s=document.createElement("style"),s.id="fb-design-mode-theme",document.head.appendChild(s));let t="";if(e.lightVariables&&Object.keys(e.lightVariables).length>0){t+=`:root {
-`;for(let[i,n]of Object.entries(e.lightVariables))t+=`  ${i}: ${n};
-`;t+=`}
+'use strict';var h=new Set;function v(c){console.log("[DesignMode Font] Attempting to load font:",c);let e=c.replace(/['"]/g,"").split(",")[0]?.trim();if(!e){console.log("[DesignMode Font] No font name found in value:",c);return}if(console.log("[DesignMode Font] Clean font name:",e),h.has(e)){console.log("[DesignMode Font] Font already loaded:",e);return}if(["Arial","Helvetica","Helvetica Neue","Segoe UI","San Francisco","system-ui","sans-serif","Times New Roman","Georgia","Times","serif","Monaco","Consolas","SF Mono","Menlo","Courier New","Courier","monospace"].some(o=>e.includes(o))){console.log("[DesignMode Font] Skipping system font:",e);return}let n=`https://fonts.googleapis.com/css2?family=${encodeURIComponent(e.replace(/\s+/g,"+"))}:wght@400;500;600&display=swap`;if(console.log("[DesignMode Font] Google Fonts URL:",n),document.querySelector(`link[href="${n}"]`)){console.log("[DesignMode Font] Font link already in DOM:",e),h.add(e);return}let t=document.createElement("link");t.rel="stylesheet",t.href=n,t.onload=()=>{console.log("[DesignMode Font] \u2705 Font loaded successfully:",e),h.add(e);},t.onerror=()=>{console.error("[DesignMode Font] \u274C Failed to load font:",e,n);},document.head.appendChild(t),console.log("[DesignMode Font] Font link injected into DOM:",e);}var u=class{isEnabled=false;selectedElement=null;hoveredElement=null;hoverOverlay;selectionOverlay;selectionTagLabel;childrenOverlays=[];resizeObserver=null;constructor(){console.log("[DesignMode] Constructor called - initializing overlay"),this.hoverOverlay=this.createOverlay("2px solid #3b82f6",999991),this.selectionOverlay=this.createOverlay("1px solid #3b82f6",999990),this.selectionTagLabel=this.createTagLabel(),console.log("[DesignMode] Overlays created"),console.log("[DesignMode] Hover overlay:",this.hoverOverlay),this.listen(),this.setupResizeObserver(),console.log("[DesignMode] Initialization complete");}createOverlay(e,s){let n=document.createElement("div");return n.className="fb-design-mode-overlay",Object.assign(n.style,{position:"absolute",border:e,pointerEvents:"none",zIndex:String(s),display:"none",boxShadow:"0 0 0 1px rgba(59, 130, 246, 0.2)",transition:"all 0.1s ease-out"}),document.body.appendChild(n),n}createChildOverlay(){let e=document.createElement("div");return e.className="fb-design-mode-overlay fb-child-overlay",Object.assign(e.style,{position:"absolute",border:"1px dashed rgba(59, 130, 246, 0.4)",pointerEvents:"none",zIndex:"999989",display:"none",boxShadow:"0 0 0 1px rgba(59, 130, 246, 0.1)",transition:"all 0.1s ease-out"}),document.body.appendChild(e),e}createTagLabel(){let e=document.createElement("div");return e.className="fb-design-mode-tag",Object.assign(e.style,{position:"absolute",background:"#3b82f6",color:"white",padding:"2px 6px",fontSize:"11px",fontFamily:"monospace",fontWeight:"500",borderRadius:"0 0 4px 0",pointerEvents:"none",zIndex:"999999",display:"none"}),document.body.appendChild(e),e}listen(){window.addEventListener("message",e=>{e.data.type==="ENABLE_DESIGN_MODE"?this.enable():e.data.type==="DISABLE_DESIGN_MODE"?this.disable():e.data.type==="FB_UPDATE_ELEMENT"?this.handleUpdateElement(e.data):e.data.type==="FB_GET_ALL_ELEMENTS_STATE"?this.handleGetAllElementsState():e.data.type==="FB_UPDATE_THEME"?this.handleUpdateTheme(e.data.theme):e.data.type==="FB_DESELECT_ELEMENT"?this.deselectElement():e.data.type==="FB_SELECT_ELEMENT"&&this.handleSelectElement(e.data);});}setupResizeObserver(){window.addEventListener("resize",this.updateOverlayPositions),window.addEventListener("scroll",this.updateOverlayPositions,true),this.resizeObserver=new ResizeObserver(()=>{this.updateOverlayPositions();}),this.resizeObserver.observe(document.body);}updateOverlayPositions=()=>{this.selectedElement&&this.selectionOverlay.style.display!=="none"&&(this.updateOverlayPosition(this.selectionOverlay,this.selectedElement),this.updateTagLabel(this.selectedElement)),this.hoveredElement&&this.hoverOverlay.style.display!=="none"&&this.updateOverlayPosition(this.hoverOverlay,this.hoveredElement);for(let e of this.childrenOverlays)if(e.style.display!=="none"&&this.hoveredElement){let s=Array.from(this.hoveredElement.children).filter(t=>this.getReactFiberSource(t)!==null),n=this.childrenOverlays.indexOf(e),i=s[n];i&&this.updateOverlayPosition(e,i);}};enable(){this.isEnabled||(this.isEnabled=true,console.log("[DesignMode] Overlay enabled"),console.log("[DesignMode] Hover overlay:",this.hoverOverlay),console.log("[DesignMode] Hover overlay styles:",{display:this.hoverOverlay.style.display,position:this.hoverOverlay.style.position,border:this.hoverOverlay.style.border,zIndex:this.hoverOverlay.style.zIndex}),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("click",this.handleClick,true),document.addEventListener("mouseleave",this.handleMouseLeave),document.body.style.cursor="crosshair");}disable(){this.isEnabled&&(this.isEnabled=false,document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("click",this.handleClick,true),document.removeEventListener("mouseleave",this.handleMouseLeave),this.hoverOverlay.style.display="none",this.selectionOverlay.style.display="none",this.selectionTagLabel.style.display="none",this.hideChildrenOverlays(),this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),document.body.style.cursor="",this.selectedElement=null,this.hoveredElement=null);}deselectElement(){this.selectedElement&&(this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=null,this.selectionOverlay.style.display="none",this.selectionTagLabel.style.display="none");}handleSelectElement(e){if(!e.sourceFile||!e.sourceLine||e.sourceColumn===void 0)return;let s=document.querySelectorAll("*");for(let n of s){if(n.classList?.contains("fb-design-mode-overlay")||n.classList?.contains("fb-design-mode-tag"))continue;let i=this.getReactFiberSource(n);if(i&&i.fileName===e.sourceFile&&i.lineNumber===e.sourceLine&&i.columnNumber===e.sourceColumn){let t=n;this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=t,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,t),this.selectionOverlay.style.display="block",this.updateTagLabel(t),this.selectionTagLabel.style.display="block",this.sendElementData(t,i);return}}}getReactFiberSource(e){let s=e,n=0;for(;s&&n<5;){let i=s.getAttribute("data-inspector-relative-path"),t=s.getAttribute("data-inspector-line"),o=s.getAttribute("data-inspector-column");if(i&&t&&o)return {fileName:i,lineNumber:Number.parseInt(t,10),columnNumber:Number.parseInt(o,10)};s=s.parentElement,n++;}return null}isContainer(e){return ["div","section","header","footer","main","aside","nav","article","ul","ol","li"].includes(e.tagName.toLowerCase())}hasDirectTextContent(e){return Array.from(e.childNodes).some(s=>s.nodeType===Node.TEXT_NODE&&s.textContent?.trim())}handleMouseLeave=()=>{this.isEnabled&&(this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=null,this.hoverOverlay.style.display="none",this.hideChildrenOverlays());};handleMouseMove=e=>{if(!this.isEnabled)return;let n=document.elementsFromPoint(e.clientX,e.clientY).filter(t=>{if(t.classList.contains("fb-design-mode-overlay")||t.classList.contains("fb-design-mode-tag"))return  false;let o=this.getReactFiberSource(t);return o===null&&console.log("[DesignMode] Element without React Fiber:",t.tagName,t.className),o!==null});if(console.log("[DesignMode] Mouse move - selectable elements:",n.length),n.length===0){this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=null,this.hoverOverlay.style.display="none",this.hideChildrenOverlays();return}let i=n[0];if(i){if(i===this.selectedElement){this.hoverOverlay.style.display="none",this.hideChildrenOverlays();return}this.hoveredElement&&this.hoveredElement!==i&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=i,this.hoveredElement.setAttribute("data-fb-hovered","true"),this.updateOverlayPosition(this.hoverOverlay,i),this.hoverOverlay.style.display="block",this.isContainer(i)&&!this.hasDirectTextContent(i)?this.showChildrenOverlays(i):this.hideChildrenOverlays();}};showChildrenOverlays(e){let s=Array.from(e.children).filter(n=>this.getReactFiberSource(n)!==null);for(;this.childrenOverlays.length<s.length;)this.childrenOverlays.push(this.createChildOverlay());s.forEach((n,i)=>{let t=this.childrenOverlays[i];t&&(this.updateOverlayPosition(t,n),t.style.display="block");});for(let n=s.length;n<this.childrenOverlays.length;n++){let i=this.childrenOverlays[n];i&&(i.style.display="none");}}hideChildrenOverlays(){for(let e of this.childrenOverlays)e.style.display="none";}currentSelectionIndex=0;lastClickTime=0;lastClickPosition={x:0,y:0};handleClick=e=>{if(!this.isEnabled||(e.preventDefault(),e.stopPropagation(),!this.hoveredElement))return;let s=Date.now(),n=s-this.lastClickTime,i=Math.hypot(e.clientX-this.lastClickPosition.x,e.clientY-this.lastClickPosition.y),o=document.elementsFromPoint(e.clientX,e.clientY).filter(l=>l.classList.contains("fb-design-mode-overlay")||l.classList.contains("fb-design-mode-tag")?false:this.getReactFiberSource(l)!==null);n<1e3&&i<10&&o.length>1?this.currentSelectionIndex=(this.currentSelectionIndex+1)%o.length:this.currentSelectionIndex=0;let r=o[this.currentSelectionIndex];if(!r)return;let a=this.getReactFiberSource(r);a&&(this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=r,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,r),this.selectionOverlay.style.display="block",this.updateTagLabel(r),this.selectionTagLabel.style.display="block",this.sendElementData(r,a),this.lastClickTime=s,this.lastClickPosition={x:e.clientX,y:e.clientY});};updateOverlayPosition(e,s){let n=s.getBoundingClientRect();Object.assign(e.style,{top:`${n.top+window.scrollY}px`,left:`${n.left+window.scrollX}px`,width:`${n.width}px`,height:`${n.height}px`});}updateTagLabel(e){let s=e.getBoundingClientRect(),n=e.tagName.toLowerCase();this.selectionTagLabel.textContent=n,Object.assign(this.selectionTagLabel.style,{top:`${s.top+window.scrollY}px`,left:`${s.left+window.scrollX}px`});}getRelevantStyles(e){let s=window.getComputedStyle(e),n=["display","position","width","height","padding","margin","backgroundColor","color","fontSize","fontFamily"],i={};for(let t of n)i[t]=s.getPropertyValue(t);return i}getDirectTextContent(e){let s=Array.from(e.childNodes).filter(n=>n.nodeType===Node.TEXT_NODE).map(n=>n.textContent?.trim()).filter(Boolean);return s.length>0?s.join(" "):null}sendElementData(e,s){let n=this.getDirectTextContent(e),i={type:"FB_ELEMENT_SELECTED",data:{sourceFile:s.fileName,sourceLine:s.lineNumber,sourceColumn:s.columnNumber,tagName:e.tagName,className:e.className,textContent:n,src:e.getAttribute("src")||void 0,alt:e.getAttribute("alt")||void 0,href:e.getAttribute("href")||void 0,target:e.getAttribute("target")||void 0,rel:e.getAttribute("rel")||void 0,computedStyles:this.getRelevantStyles(e)}};window.parent.postMessage(i,"*");}handleGetAllElementsState(){let e=document.querySelectorAll("*"),s=[];for(let n of e){if(n.classList?.contains("fb-design-mode-overlay")||n.classList?.contains("fb-design-mode-tag"))continue;let i=this.getReactFiberSource(n);if(!i)continue;let t=n,o=t;if(t.tagName!=="IMG"){let l=t.querySelector("img");l&&(o=l);}let r=this.getDirectTextContent(t),a="";t.className&&(typeof t.className=="string"?a=t.className:"baseVal"in t.className&&(a=t.className.baseVal)),s.push({sourceFile:i.fileName,sourceLine:i.lineNumber,sourceColumn:i.columnNumber,className:a,textContent:r,src:o.getAttribute("src")||void 0,alt:o.getAttribute("alt")||void 0,href:t.getAttribute("href")||void 0,target:t.getAttribute("target")||void 0,rel:t.getAttribute("rel")||void 0});}window.parent.postMessage({type:"FB_ALL_ELEMENTS_STATE",data:s},"*");}handleUpdateElement(e){let{sourceFile:s,sourceLine:n,sourceColumn:i,updates:t}=e;if(!s||!n||!t)return;let o=document.querySelectorAll("*");for(let r of o){let a=this.getReactFiberSource(r);if(a?.fileName===s&&a?.lineNumber===n&&a?.columnNumber===i){let l=r;if((t.src!==void 0||t.alt!==void 0)&&l.tagName!=="IMG"){let d=l.querySelector("img");d&&(l=d);}if(t.className!==void 0&&(l.className=t.className),t.textContent!==void 0){let d=Array.from(l.childNodes).find(m=>m.nodeType===Node.TEXT_NODE);d?d.textContent=t.textContent:l.textContent=t.textContent;}t.src!==void 0&&"src"in l&&(l.setAttribute("src",t.src),l.hasAttribute("srcset")&&l.removeAttribute("srcset")),t.alt!==void 0&&"alt"in l&&(l.alt=t.alt),t.href!==void 0&&"href"in l&&l.setAttribute("href",t.href),t.target!==void 0&&"target"in l&&l.setAttribute("target",t.target),t.rel!==void 0&&"rel"in l&&l.setAttribute("rel",t.rel),l===this.hoveredElement&&this.updateOverlayPosition(this.hoverOverlay,l),l===this.selectedElement&&(this.updateOverlayPosition(this.selectionOverlay,l),this.updateTagLabel(l));return}}}handleUpdateTheme(e){if(!e)return;let s=document.getElementById("fb-design-mode-theme");s||(s=document.createElement("style"),s.id="fb-design-mode-theme",document.head.appendChild(s));let n="";if(e.lightVariables&&Object.keys(e.lightVariables).length>0){n+=`:root {
+`;for(let[i,t]of Object.entries(e.lightVariables))n+=`  ${i}: ${t};
+`,(i==="--font-sans"||i==="--font-serif"||i==="--font-mono")&&v(t);n+=`}
 
-`;}if(e.darkVariables&&Object.keys(e.darkVariables).length>0){t+=`.dark {
-`;for(let[i,n]of Object.entries(e.darkVariables))t+=`  ${i}: ${n};
-`;t+=`}
-`;}s.textContent=t;}};typeof window<"u"&&typeof document<"u"&&new c;//# sourceMappingURL=overlay.js.map
+`;}if(e.darkVariables&&Object.keys(e.darkVariables).length>0){n+=`.dark {
+`;for(let[i,t]of Object.entries(e.darkVariables))n+=`  ${i}: ${t};
+`;n+=`}
+`;}s.textContent=n;}};typeof window<"u"&&typeof document<"u"&&new u;//# sourceMappingURL=overlay.js.map
 //# sourceMappingURL=overlay.js.map

package/dist/overlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/overlay.ts"],"names":["DesignModeOverlay","border","zIndex","overlay","label","children","child","index","data","allElements","el","source","element","elementWithFiber","fiberKey","key","fiber","firstSource","node","selectableElements","topElement","parent","i","now","timeSinceLastClick","distanceMoved","target","rect","tagName","computed","relevantProps","styles","prop","directTextNodes","directText","elementsState","actualElement","imgChild","textContent","className","message","sourceFile","sourceLine","sourceColumn","updates","textNode","theme","styleEl","css","value"],"mappings":"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","file":"overlay.js","sourcesContent":["/**\n * Design Mode Overlay Script\n * Injected into the preview iframe to enable element selection\n *\n * Uses React Fiber's _debugSource to track element source locations at runtime.\n * No build-time tagging required - everything is resolved from React's internal data.\n *\n * Runtime CSS generation is handled by Tailwind v4 Browser CDN.\n */\n\nimport type {\n\tDesignModeMessage,\n\tElementSelectedMessage,\n\tSourceLocation,\n} from \"./types\";\n\n// Type for React Fiber internal structure\ninterface ReactFiber {\n\t_debugSource?: {\n\t\tfileName: string;\n\t\tlineNumber: number;\n\t\tcolumnNumber?: number;\n\t};\n\ttype?: string | { displayName?: string; name?: string };\n\treturn?: ReactFiber;\n}\n\n// Type for HTMLElement with React Fiber attached\ninterface HTMLElementWithFiber extends HTMLElement {\n\t[key: string]: unknown;\n}\n\nclass DesignModeOverlay {\n\tprivate isEnabled = false;\n\tprivate selectedElement: HTMLElement | null = null;\n\tprivate hoveredElement: HTMLElement | null = null;\n\n\t// Separate overlays for different states\n\tprivate hoverOverlay: HTMLDivElement;\n\tprivate selectionOverlay: HTMLDivElement;\n\tprivate selectionTagLabel: HTMLDivElement;\n\tprivate childrenOverlays: HTMLDivElement[] = [];\n\tprivate resizeObserver: ResizeObserver | null = null;\n\n\tconstructor() {\n\t\t// Create persistent overlay elements\n\t\tthis.hoverOverlay = this.createOverlay(\"2px solid #3b82f6\", 999991);\n\t\tthis.selectionOverlay = this.createOverlay(\"1px solid #3b82f6\", 999990);\n\t\tthis.selectionTagLabel = this.createTagLabel();\n\n\t\tthis.listen();\n\t\tthis.setupResizeObserver();\n\t}\n\n\tprivate createOverlay(border: string, zIndex: number): HTMLDivElement {\n\t\tconst overlay = document.createElement(\"div\");\n\t\toverlay.className = \"fb-design-mode-overlay\";\n\t\tObject.assign(overlay.style, {\n\t\t\tposition: \"absolute\",\n\t\t\tborder,\n\t\t\tpointerEvents: \"none\",\n\t\t\tzIndex: String(zIndex),\n\t\t\tdisplay: \"none\",\n\t\t\tboxShadow: \"0 0 0 1px rgba(59, 130, 246, 0.2)\",\n\t\t\ttransition: \"all 0.1s ease-out\",\n\t\t});\n\t\tdocument.body.appendChild(overlay);\n\t\treturn overlay;\n\t}\n\n\tprivate createChildOverlay(): HTMLDivElement {\n\t\tconst overlay = document.createElement(\"div\");\n\t\toverlay.className = \"fb-design-mode-overlay fb-child-overlay\";\n\t\tObject.assign(overlay.style, {\n\t\t\tposition: \"absolute\",\n\t\t\tborder: \"1px dashed rgba(59, 130, 246, 0.4)\",\n\t\t\tpointerEvents: \"none\",\n\t\t\tzIndex: \"999989\",\n\t\t\tdisplay: \"none\",\n\t\t\tboxShadow: \"0 0 0 1px rgba(59, 130, 246, 0.1)\",\n\t\t\ttransition: \"all 0.1s ease-out\",\n\t\t});\n\t\tdocument.body.appendChild(overlay);\n\t\treturn overlay;\n\t}\n\n\tprivate createTagLabel(): HTMLDivElement {\n\t\tconst label = document.createElement(\"div\");\n\t\tlabel.className = \"fb-design-mode-tag\";\n\t\tObject.assign(label.style, {\n\t\t\tposition: \"absolute\",\n\t\t\tbackground: \"#3b82f6\",\n\t\t\tcolor: \"white\",\n\t\t\tpadding: \"2px 6px\",\n\t\t\tfontSize: \"11px\",\n\t\t\tfontFamily: \"monospace\",\n\t\t\tfontWeight: \"500\",\n\t\t\tborderRadius: \"0 0 4px 0\",\n\t\t\tpointerEvents: \"none\",\n\t\t\tzIndex: \"999999\",\n\t\t\tdisplay: \"none\",\n\t\t});\n\t\tdocument.body.appendChild(label);\n\t\treturn label;\n\t}\n\n\tprivate listen() {\n\t\twindow.addEventListener(\"message\", (e: MessageEvent<DesignModeMessage>) => {\n\t\t\tif (e.data.type === \"ENABLE_DESIGN_MODE\") {\n\t\t\t\tthis.enable();\n\t\t\t} else if (e.data.type === \"DISABLE_DESIGN_MODE\") {\n\t\t\t\tthis.disable();\n\t\t\t} else if (e.data.type === \"FB_UPDATE_ELEMENT\") {\n\t\t\t\tthis.handleUpdateElement(e.data);\n\t\t\t} else if (e.data.type === \"FB_GET_ALL_ELEMENTS_STATE\") {\n\t\t\t\tthis.handleGetAllElementsState();\n\t\t\t} else if (e.data.type === \"FB_UPDATE_THEME\") {\n\t\t\t\tthis.handleUpdateTheme(e.data.theme);\n\t\t\t} else if (e.data.type === \"FB_DESELECT_ELEMENT\") {\n\t\t\t\tthis.deselectElement();\n\t\t\t} else if (e.data.type === \"FB_SELECT_ELEMENT\") {\n\t\t\t\tthis.handleSelectElement(e.data);\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate setupResizeObserver() {\n\t\t// Listen for window resize and scroll events\n\t\twindow.addEventListener(\"resize\", this.updateOverlayPositions);\n\t\twindow.addEventListener(\"scroll\", this.updateOverlayPositions, true);\n\n\t\t// Use ResizeObserver to detect when elements change size\n\t\tthis.resizeObserver = new ResizeObserver(() => {\n\t\t\tthis.updateOverlayPositions();\n\t\t});\n\n\t\t// Observe the document body for any size changes\n\t\tthis.resizeObserver.observe(document.body);\n\t}\n\n\tprivate updateOverlayPositions = () => {\n\t\t// Update selected element overlay\n\t\tif (\n\t\t\tthis.selectedElement &&\n\t\t\tthis.selectionOverlay.style.display !== \"none\"\n\t\t) {\n\t\t\tthis.updateOverlayPosition(this.selectionOverlay, this.selectedElement);\n\t\t\tthis.updateTagLabel(this.selectedElement);\n\t\t}\n\n\t\t// Update hovered element overlay\n\t\tif (this.hoveredElement && this.hoverOverlay.style.display !== \"none\") {\n\t\t\tthis.updateOverlayPosition(this.hoverOverlay, this.hoveredElement);\n\t\t}\n\n\t\t// Update children overlays\n\t\tfor (const overlay of this.childrenOverlays) {\n\t\t\tif (overlay.style.display !== \"none\" && this.hoveredElement) {\n\t\t\t\t// Find the corresponding child element\n\t\t\t\tconst children = Array.from(this.hoveredElement.children).filter(\n\t\t\t\t\t(child) => {\n\t\t\t\t\t\tconst source = this.getReactFiberSource(child as HTMLElement);\n\t\t\t\t\t\treturn source !== null;\n\t\t\t\t\t},\n\t\t\t\t) as HTMLElement[];\n\n\t\t\t\tconst index = this.childrenOverlays.indexOf(overlay);\n\t\t\t\tconst child = children[index];\n\t\t\t\tif (child) {\n\t\t\t\t\tthis.updateOverlayPosition(overlay, child);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tenable() {\n\t\tif (this.isEnabled) return;\n\t\tthis.isEnabled = true;\n\n\t\tdocument.addEventListener(\"mousemove\", this.handleMouseMove);\n\t\tdocument.addEventListener(\"click\", this.handleClick, true);\n\t\tdocument.addEventListener(\"mouseleave\", this.handleMouseLeave);\n\n\t\t// Add cursor style\n\t\tdocument.body.style.cursor = \"crosshair\";\n\t}\n\n\tdisable() {\n\t\tif (!this.isEnabled) return;\n\t\tthis.isEnabled = false;\n\n\t\tdocument.removeEventListener(\"mousemove\", this.handleMouseMove);\n\t\tdocument.removeEventListener(\"click\", this.handleClick, true);\n\t\tdocument.removeEventListener(\"mouseleave\", this.handleMouseLeave);\n\n\t\t// Hide all overlays\n\t\tthis.hoverOverlay.style.display = \"none\";\n\t\tthis.selectionOverlay.style.display = \"none\";\n\t\tthis.selectionTagLabel.style.display = \"none\";\n\t\tthis.hideChildrenOverlays();\n\n\t\t// Remove runtime markers\n\t\tif (this.selectedElement) {\n\t\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\t}\n\t\tif (this.hoveredElement) {\n\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t}\n\n\t\tdocument.body.style.cursor = \"\";\n\t\tthis.selectedElement = null;\n\t\tthis.hoveredElement = null;\n\t}\n\n\t/**\n\t * Deselect the currently selected element\n\t * Keeps design mode active but clears the selection\n\t */\n\tdeselectElement() {\n\t\tif (!this.selectedElement) return;\n\n\t\t// Remove selection marker\n\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\tthis.selectedElement = null;\n\n\t\t// Hide selection overlay and tag\n\t\tthis.selectionOverlay.style.display = \"none\";\n\t\tthis.selectionTagLabel.style.display = \"none\";\n\t}\n\n\t/**\n\t * Programmatically select an element by its source location\n\t * Used when restoring selection after page reload\n\t */\n\tprivate handleSelectElement(data: DesignModeMessage) {\n\t\tif (\n\t\t\t!data.sourceFile ||\n\t\t\t!data.sourceLine ||\n\t\t\tdata.sourceColumn === undefined\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Find element by source location\n\t\tconst allElements = document.querySelectorAll(\"*\");\n\t\tfor (const el of allElements) {\n\t\t\t// Skip our own overlays\n\t\t\tif (\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (\n\t\t\t\tsource &&\n\t\t\t\tsource.fileName === data.sourceFile &&\n\t\t\t\tsource.lineNumber === data.sourceLine &&\n\t\t\t\tsource.columnNumber === data.sourceColumn\n\t\t\t) {\n\t\t\t\tconst element = el as HTMLElement;\n\n\t\t\t\t// Update selected element marker\n\t\t\t\tif (this.selectedElement) {\n\t\t\t\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\t\t\t}\n\n\t\t\t\tthis.selectedElement = element;\n\t\t\t\tthis.selectedElement.setAttribute(\"data-fb-selected\", \"true\");\n\n\t\t\t\t// Update selection overlay and tag\n\t\t\t\tthis.updateOverlayPosition(this.selectionOverlay, element);\n\t\t\t\tthis.selectionOverlay.style.display = \"block\";\n\n\t\t\t\tthis.updateTagLabel(element);\n\t\t\t\tthis.selectionTagLabel.style.display = \"block\";\n\n\t\t\t\t// Send selection data to parent\n\t\t\t\tthis.sendElementData(element, source);\n\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Extract source location from React Fiber's _debugSource\n\t * This is added automatically by React in development mode\n\t *\n\t * Strategy: Find the JSX usage site, not the component definition.\n\t * - For DOM elements (div, p, button): Use first _debugSource\n\t * - For custom components (Button, Input): Skip to parent's _debugSource (the usage site)\n\t */\n\tprivate getReactFiberSource(element: HTMLElement): SourceLocation | null {\n\t\t// Find React fiber key (varies by React version)\n\t\tconst elementWithFiber = element as HTMLElementWithFiber;\n\t\tconst fiberKey = Object.keys(elementWithFiber).find(\n\t\t\t(key) =>\n\t\t\t\tkey.startsWith(\"__reactFiber$\") ||\n\t\t\t\tkey.startsWith(\"__reactInternalInstance$\"),\n\t\t);\n\n\t\tif (!fiberKey) {\n\t\t\treturn null;\n\t\t}\n\n\t\tlet fiber = elementWithFiber[fiberKey] as ReactFiber | undefined;\n\t\tlet firstSource: SourceLocation | null = null;\n\n\t\t// Walk up fiber tree to find _debugSource\n\t\twhile (fiber) {\n\t\t\tif (fiber._debugSource) {\n\t\t\t\tconst source: SourceLocation = {\n\t\t\t\t\tfileName: fiber._debugSource.fileName,\n\t\t\t\t\tlineNumber: fiber._debugSource.lineNumber,\n\t\t\t\t\tcolumnNumber: fiber._debugSource.columnNumber ?? 0,\n\t\t\t\t};\n\n\t\t\t\t// Store first source we find\n\t\t\t\tif (!firstSource) {\n\t\t\t\t\tfirstSource = source;\n\t\t\t\t}\n\n\t\t\t\t// Check if this is a component file (in src/components/ui/)\n\t\t\t\t// If it is, skip it and use the parent's source (the usage site)\n\t\t\t\tconst isComponentFile =\n\t\t\t\t\tsource.fileName.includes(\"/components/ui/\") ||\n\t\t\t\t\tsource.fileName.includes(\"/components/common/\");\n\n\t\t\t\tif (isComponentFile) {\n\t\t\t\t\t// This is the component definition - keep looking up for usage site\n\t\t\t\t\tfiber = fiber.return;\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\t// This is a usage site - return it\n\t\t\t\treturn source;\n\t\t\t}\n\t\t\tfiber = fiber.return; // Walk up to parent fiber\n\t\t}\n\n\t\t// Fallback to first source if we didn't find a non-component source\n\t\treturn firstSource;\n\t}\n\n\tprivate isContainer(element: HTMLElement): boolean {\n\t\tconst containerTags = [\n\t\t\t\"div\",\n\t\t\t\"section\",\n\t\t\t\"header\",\n\t\t\t\"footer\",\n\t\t\t\"main\",\n\t\t\t\"aside\",\n\t\t\t\"nav\",\n\t\t\t\"article\",\n\t\t\t\"ul\",\n\t\t\t\"ol\",\n\t\t\t\"li\",\n\t\t];\n\t\treturn containerTags.includes(element.tagName.toLowerCase());\n\t}\n\n\tprivate hasDirectTextContent(element: HTMLElement): boolean {\n\t\treturn Array.from(element.childNodes).some(\n\t\t\t(node) => node.nodeType === Node.TEXT_NODE && node.textContent?.trim(),\n\t\t);\n\t}\n\n\tprivate handleMouseLeave = () => {\n\t\tif (!this.isEnabled) return;\n\n\t\t// Hide hover overlay when mouse leaves the document\n\t\tif (this.hoveredElement) {\n\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t}\n\t\tthis.hoveredElement = null;\n\t\tthis.hoverOverlay.style.display = \"none\";\n\t\tthis.hideChildrenOverlays();\n\t};\n\n\tprivate handleMouseMove = (e: MouseEvent) => {\n\t\tif (!this.isEnabled) return;\n\n\t\t// Get all elements at this point\n\t\tconst elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);\n\n\t\t// Filter to only elements with React Fiber source, excluding overlays\n\t\tconst selectableElements = elementsAtPoint.filter((el) => {\n\t\t\tif (\n\t\t\t\tel.classList.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\tel.classList.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// Must have React Fiber source location\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\treturn source !== null;\n\t\t}) as HTMLElement[];\n\n\t\tif (selectableElements.length === 0) {\n\t\t\tif (this.hoveredElement) {\n\t\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t\t}\n\t\t\tthis.hoveredElement = null;\n\t\t\tthis.hoverOverlay.style.display = \"none\";\n\t\t\tthis.hideChildrenOverlays();\n\t\t\treturn;\n\t\t}\n\n\t\t// Get topmost element (first in array)\n\t\tconst topElement = selectableElements[0];\n\t\tif (!topElement) return; // Type guard for noUncheckedIndexedAccess\n\n\t\t// Don't show hover overlay if this is the selected element\n\t\tif (topElement === this.selectedElement) {\n\t\t\tthis.hoverOverlay.style.display = \"none\";\n\t\t\tthis.hideChildrenOverlays();\n\t\t\treturn;\n\t\t}\n\n\t\t// Update hovered element\n\t\tif (this.hoveredElement && this.hoveredElement !== topElement) {\n\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t}\n\n\t\tthis.hoveredElement = topElement;\n\t\tthis.hoveredElement.setAttribute(\"data-fb-hovered\", \"true\");\n\n\t\t// Show hover overlay\n\t\tthis.updateOverlayPosition(this.hoverOverlay, topElement);\n\t\tthis.hoverOverlay.style.display = \"block\";\n\n\t\t// Show children overlays if this is a container without direct text\n\t\tif (\n\t\t\tthis.isContainer(topElement) &&\n\t\t\t!this.hasDirectTextContent(topElement)\n\t\t) {\n\t\t\tthis.showChildrenOverlays(topElement);\n\t\t} else {\n\t\t\tthis.hideChildrenOverlays();\n\t\t}\n\t};\n\n\tprivate showChildrenOverlays(parent: HTMLElement) {\n\t\t// Get direct children with React Fiber source\n\t\tconst children = Array.from(parent.children).filter((child) => {\n\t\t\tconst source = this.getReactFiberSource(child as HTMLElement);\n\t\t\treturn source !== null;\n\t\t}) as HTMLElement[];\n\n\t\t// Ensure we have enough child overlays\n\t\twhile (this.childrenOverlays.length < children.length) {\n\t\t\tthis.childrenOverlays.push(this.createChildOverlay());\n\t\t}\n\n\t\t// Show overlay for each child\n\t\tchildren.forEach((child, index) => {\n\t\t\tconst overlay = this.childrenOverlays[index];\n\t\t\tif (overlay) {\n\t\t\t\tthis.updateOverlayPosition(overlay, child);\n\t\t\t\toverlay.style.display = \"block\";\n\t\t\t}\n\t\t});\n\n\t\t// Hide unused child overlays\n\t\tfor (let i = children.length; i < this.childrenOverlays.length; i++) {\n\t\t\tconst overlay = this.childrenOverlays[i];\n\t\t\tif (overlay) {\n\t\t\t\toverlay.style.display = \"none\";\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate hideChildrenOverlays() {\n\t\tfor (const overlay of this.childrenOverlays) {\n\t\t\toverlay.style.display = \"none\";\n\t\t}\n\t}\n\n\tprivate currentSelectionIndex = 0;\n\tprivate lastClickTime = 0;\n\tprivate lastClickPosition = { x: 0, y: 0 };\n\n\tprivate handleClick = (e: MouseEvent) => {\n\t\tif (!this.isEnabled) return;\n\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\n\t\tif (!this.hoveredElement) return;\n\n\t\tconst now = Date.now();\n\t\tconst timeSinceLastClick = now - this.lastClickTime;\n\t\tconst distanceMoved = Math.hypot(\n\t\t\te.clientX - this.lastClickPosition.x,\n\t\t\te.clientY - this.lastClickPosition.y,\n\t\t);\n\n\t\t// Get all elements at click point for cycling\n\t\tconst elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);\n\t\tconst selectableElements = elementsAtPoint.filter((el) => {\n\t\t\tif (\n\t\t\t\tel.classList.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\tel.classList.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// Must have React Fiber source location\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\treturn source !== null;\n\t\t}) as HTMLElement[];\n\n\t\t// Cycle through nested elements on repeated clicks\n\t\tif (\n\t\t\ttimeSinceLastClick < 1000 &&\n\t\t\tdistanceMoved < 10 &&\n\t\t\tselectableElements.length > 1\n\t\t) {\n\t\t\tthis.currentSelectionIndex =\n\t\t\t\t(this.currentSelectionIndex + 1) % selectableElements.length;\n\t\t} else {\n\t\t\tthis.currentSelectionIndex = 0;\n\t\t}\n\n\t\tconst target = selectableElements[this.currentSelectionIndex];\n\t\tif (!target) return; // Type guard for noUncheckedIndexedAccess\n\n\t\t// Get source location\n\t\tconst source = this.getReactFiberSource(target);\n\t\tif (!source) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Update selected element marker\n\t\tif (this.selectedElement) {\n\t\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\t}\n\n\t\tthis.selectedElement = target;\n\t\tthis.selectedElement.setAttribute(\"data-fb-selected\", \"true\");\n\n\t\t// Update selection overlay and tag\n\t\tthis.updateOverlayPosition(this.selectionOverlay, target);\n\t\tthis.selectionOverlay.style.display = \"block\";\n\n\t\tthis.updateTagLabel(target);\n\t\tthis.selectionTagLabel.style.display = \"block\";\n\n\t\t// Send selection data to parent\n\t\tthis.sendElementData(target, source);\n\n\t\t// Update last click info\n\t\tthis.lastClickTime = now;\n\t\tthis.lastClickPosition = { x: e.clientX, y: e.clientY };\n\t};\n\n\tprivate updateOverlayPosition(overlay: HTMLDivElement, element: HTMLElement) {\n\t\tconst rect = element.getBoundingClientRect();\n\t\tObject.assign(overlay.style, {\n\t\t\ttop: `${rect.top + window.scrollY}px`,\n\t\t\tleft: `${rect.left + window.scrollX}px`,\n\t\t\twidth: `${rect.width}px`,\n\t\t\theight: `${rect.height}px`,\n\t\t});\n\t}\n\n\tprivate updateTagLabel(element: HTMLElement) {\n\t\tconst rect = element.getBoundingClientRect();\n\t\tconst tagName = element.tagName.toLowerCase();\n\n\t\tthis.selectionTagLabel.textContent = tagName;\n\t\tObject.assign(this.selectionTagLabel.style, {\n\t\t\ttop: `${rect.top + window.scrollY}px`,\n\t\t\tleft: `${rect.left + window.scrollX}px`,\n\t\t});\n\t}\n\n\tprivate getRelevantStyles(element: HTMLElement): Record<string, string> {\n\t\tconst computed = window.getComputedStyle(element);\n\t\tconst relevantProps = [\n\t\t\t\"display\",\n\t\t\t\"position\",\n\t\t\t\"width\",\n\t\t\t\"height\",\n\t\t\t\"padding\",\n\t\t\t\"margin\",\n\t\t\t\"backgroundColor\",\n\t\t\t\"color\",\n\t\t\t\"fontSize\",\n\t\t\t\"fontFamily\",\n\t\t];\n\n\t\tconst styles: Record<string, string> = {};\n\t\tfor (const prop of relevantProps) {\n\t\t\tstyles[prop] = computed.getPropertyValue(prop);\n\t\t}\n\t\treturn styles;\n\t}\n\n\t/**\n\t * Extract direct text content from DOM (not from nested children)\n\t */\n\tprivate getDirectTextContent(element: HTMLElement): string | null {\n\t\tconst directTextNodes = Array.from(element.childNodes)\n\t\t\t.filter((node) => node.nodeType === Node.TEXT_NODE)\n\t\t\t.map((node) => node.textContent?.trim())\n\t\t\t.filter(Boolean);\n\n\t\treturn directTextNodes.length > 0 ? directTextNodes.join(\" \") : null;\n\t}\n\n\tprivate sendElementData(element: HTMLElement, source: SourceLocation) {\n\t\tconst directText = this.getDirectTextContent(element);\n\n\t\tconst data: ElementSelectedMessage = {\n\t\t\ttype: \"FB_ELEMENT_SELECTED\",\n\t\t\tdata: {\n\t\t\t\t// Source location from React Fiber\n\t\t\t\tsourceFile: source.fileName,\n\t\t\t\tsourceLine: source.lineNumber,\n\t\t\t\tsourceColumn: source.columnNumber,\n\n\t\t\t\t// DOM properties\n\t\t\t\ttagName: element.tagName,\n\t\t\t\tclassName: element.className,\n\t\t\t\ttextContent: directText,\n\t\t\t\tsrc: element.getAttribute(\"src\") || undefined,\n\t\t\t\talt: element.getAttribute(\"alt\") || undefined,\n\t\t\t\thref: element.getAttribute(\"href\") || undefined,\n\t\t\t\ttarget: element.getAttribute(\"target\") || undefined,\n\t\t\t\trel: element.getAttribute(\"rel\") || undefined,\n\t\t\t\tcomputedStyles: this.getRelevantStyles(element),\n\t\t\t},\n\t\t};\n\n\t\t// Send to parent window\n\t\twindow.parent.postMessage(data, \"*\");\n\t}\n\n\t/**\n\t * Handle request to get all elements' current state\n\t * Used for computing diffs on save (Lovable's approach)\n\t */\n\tprivate handleGetAllElementsState() {\n\t\tconst allElements = document.querySelectorAll(\"*\");\n\t\tconst elementsState: Array<{\n\t\t\tsourceFile: string;\n\t\t\tsourceLine: number;\n\t\t\tsourceColumn: number;\n\t\t\tclassName: string;\n\t\t\ttextContent: string | null;\n\t\t\tsrc?: string;\n\t\t\talt?: string;\n\t\t\thref?: string;\n\t\t\ttarget?: string;\n\t\t\trel?: string;\n\t\t}> = [];\n\n\t\tfor (const el of allElements) {\n\t\t\t// Skip our own overlays\n\t\t\tif (\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (!source) continue;\n\n\t\t\tconst element = el as HTMLElement;\n\n\t\t\t// Check if this is an Image component wrapper with an <img> child\n\t\t\tlet actualElement = element;\n\t\t\tif (element.tagName !== \"IMG\") {\n\t\t\t\tconst imgChild = element.querySelector(\"img\");\n\t\t\t\tif (imgChild) {\n\t\t\t\t\tactualElement = imgChild as HTMLElement;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst textContent = this.getDirectTextContent(element);\n\n\t\t\t// Get className as string - handle SVG elements which have className as SVGAnimatedString\n\t\t\tlet className = \"\";\n\t\t\tif (element.className) {\n\t\t\t\t// For SVG elements, className is SVGAnimatedString with .baseVal property\n\t\t\t\tif (typeof element.className === \"string\") {\n\t\t\t\t\tclassName = element.className;\n\t\t\t\t} else if (\"baseVal\" in element.className) {\n\t\t\t\t\tclassName = (element.className as { baseVal: string }).baseVal;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\telementsState.push({\n\t\t\t\tsourceFile: source.fileName,\n\t\t\t\tsourceLine: source.lineNumber,\n\t\t\t\tsourceColumn: source.columnNumber,\n\t\t\t\tclassName,\n\t\t\t\ttextContent,\n\t\t\t\tsrc: actualElement.getAttribute(\"src\") || undefined,\n\t\t\t\talt: actualElement.getAttribute(\"alt\") || undefined,\n\t\t\t\thref: element.getAttribute(\"href\") || undefined,\n\t\t\t\ttarget: element.getAttribute(\"target\") || undefined,\n\t\t\t\trel: element.getAttribute(\"rel\") || undefined,\n\t\t\t});\n\t\t}\n\n\t\t// Send back to parent\n\t\twindow.parent.postMessage(\n\t\t\t{\n\t\t\t\ttype: \"FB_ALL_ELEMENTS_STATE\",\n\t\t\t\tdata: elementsState,\n\t\t\t},\n\t\t\t\"*\",\n\t\t);\n\t}\n\n\t/**\n\t * Handle optimistic element updates from parent window\n\t * Uses React Fiber source to find the correct element\n\t */\n\tprivate handleUpdateElement(message: DesignModeMessage) {\n\t\tconst { sourceFile, sourceLine, sourceColumn, updates } = message;\n\n\t\tif (!sourceFile || !sourceLine || !updates) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Find element by matching React Fiber source\n\t\tconst allElements = document.querySelectorAll(\"*\");\n\n\t\tfor (const el of allElements) {\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (\n\t\t\t\tsource?.fileName === sourceFile &&\n\t\t\t\tsource?.lineNumber === sourceLine &&\n\t\t\t\tsource?.columnNumber === sourceColumn\n\t\t\t) {\n\t\t\t\tlet element = el as HTMLElement;\n\n\t\t\t\t// Special case: if we're updating image properties (src/alt) but found a container,\n\t\t\t\t// look for an <img> child element\n\t\t\t\tif (\n\t\t\t\t\t(updates.src !== undefined || updates.alt !== undefined) &&\n\t\t\t\t\telement.tagName !== \"IMG\"\n\t\t\t\t) {\n\t\t\t\t\tconst imgChild = element.querySelector(\"img\");\n\t\t\t\t\tif (imgChild) {\n\t\t\t\t\t\telement = imgChild as HTMLElement;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Apply optimistic updates\n\t\t\t\tif (updates.className !== undefined) {\n\t\t\t\t\t// Apply the className - Tailwind v4 Browser CDN will auto-generate CSS\n\t\t\t\t\telement.className = updates.className;\n\t\t\t\t}\n\n\t\t\t\tif (updates.textContent !== undefined) {\n\t\t\t\t\t// Only update first text node to preserve child elements\n\t\t\t\t\tconst textNode = Array.from(element.childNodes).find(\n\t\t\t\t\t\t(node) => node.nodeType === Node.TEXT_NODE,\n\t\t\t\t\t);\n\t\t\t\t\tif (textNode) {\n\t\t\t\t\t\ttextNode.textContent = updates.textContent;\n\t\t\t\t\t} else {\n\t\t\t\t\t\telement.textContent = updates.textContent;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (updates.src !== undefined && \"src\" in element) {\n\t\t\t\t\t// Use setAttribute to force browser reload, bypassing React's state management\n\t\t\t\t\telement.setAttribute(\"src\", updates.src);\n\t\t\t\t\t// Also update srcset to prevent fallback\n\t\t\t\t\tif (element.hasAttribute(\"srcset\")) {\n\t\t\t\t\t\telement.removeAttribute(\"srcset\");\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (updates.alt !== undefined && \"alt\" in element) {\n\t\t\t\t\t(element as HTMLImageElement).alt = updates.alt;\n\t\t\t\t}\n\n\t\t\t\tif (updates.href !== undefined && \"href\" in element) {\n\t\t\t\t\telement.setAttribute(\"href\", updates.href);\n\t\t\t\t}\n\n\t\t\t\tif (updates.target !== undefined && \"target\" in element) {\n\t\t\t\t\telement.setAttribute(\"target\", updates.target);\n\t\t\t\t}\n\n\t\t\t\tif (updates.rel !== undefined && \"rel\" in element) {\n\t\t\t\t\telement.setAttribute(\"rel\", updates.rel);\n\t\t\t\t}\n\n\t\t\t\t// Update overlays if this is the hovered or selected element\n\t\t\t\tif (element === this.hoveredElement) {\n\t\t\t\t\tthis.updateOverlayPosition(this.hoverOverlay, element);\n\t\t\t\t}\n\t\t\t\tif (element === this.selectedElement) {\n\t\t\t\t\tthis.updateOverlayPosition(this.selectionOverlay, element);\n\t\t\t\t\tthis.updateTagLabel(element);\n\t\t\t\t}\n\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Handle theme update from parent window\n\t * Apply CSS variables using a style tag (NOT inline styles) to maintain proper CSS cascade\n\t * Note: We don't change the dark class - that's controlled by the native theme switcher\n\t */\n\tprivate handleUpdateTheme(theme?: {\n\t\tlightVariables?: Record<string, string>;\n\t\tdarkVariables?: Record<string, string>;\n\t}) {\n\t\tif (!theme) return;\n\n\t\t// Find or create the style element for design mode theme overrides\n\t\tlet styleEl = document.getElementById(\n\t\t\t\"fb-design-mode-theme\",\n\t\t) as HTMLStyleElement;\n\t\tif (!styleEl) {\n\t\t\tstyleEl = document.createElement(\"style\");\n\t\t\tstyleEl.id = \"fb-design-mode-theme\";\n\t\t\tdocument.head.appendChild(styleEl);\n\t\t}\n\n\t\t// Build CSS with both light and dark theme variables\n\t\tlet css = \"\";\n\n\t\t// Light theme variables in :root (includes colors, fonts, radius)\n\t\tif (theme.lightVariables && Object.keys(theme.lightVariables).length > 0) {\n\t\t\tcss += \":root {\\n\";\n\t\t\tfor (const [key, value] of Object.entries(theme.lightVariables)) {\n\t\t\t\tcss += `  ${key}: ${value};\\n`;\n\t\t\t}\n\t\t\tcss += \"}\\n\\n\";\n\t\t}\n\n\t\t// Dark theme variables in .dark (only colors, not fonts/radius)\n\t\tif (theme.darkVariables && Object.keys(theme.darkVariables).length > 0) {\n\t\t\tcss += \".dark {\\n\";\n\t\t\tfor (const [key, value] of Object.entries(theme.darkVariables)) {\n\t\t\t\tcss += `  ${key}: ${value};\\n`;\n\t\t\t}\n\t\t\tcss += \"}\\n\";\n\t\t}\n\n\t\t// Apply the CSS\n\t\tstyleEl.textContent = css;\n\t}\n}\n\n// Initialize when script loads - only in browser environment\n// Tailwind Play CDN handles all CSS generation automatically\nif (typeof window !== \"undefined\" && typeof document !== \"undefined\") {\n\tnew DesignModeOverlay();\n}\n"]}
+{"version":3,"sources":["../src/overlay.ts"],"names":["loadedFonts","loadGoogleFontInIframe","fontValue","cleanFont","sf","fontUrl","link","DesignModeOverlay","border","zIndex","overlay","label","children","child","index","data","allElements","el","source","element","currentElement","depth","relativePath","line","column","node","selectableElements","topElement","parent","i","now","timeSinceLastClick","distanceMoved","target","rect","tagName","computed","relevantProps","styles","prop","directTextNodes","directText","elementsState","actualElement","imgChild","textContent","className","message","sourceFile","sourceLine","sourceColumn","updates","textNode","theme","styleEl","css","key","value"],"mappings":"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","file":"overlay.js","sourcesContent":["/**\n * Design Mode Overlay Script\n * Injected into the preview iframe to enable element selection\n *\n * Uses React Fiber's _debugSource to track element source locations at runtime.\n * No build-time tagging required - everything is resolved from React's internal data.\n *\n * Runtime CSS generation is handled by Tailwind v4 Browser CDN.\n */\n\nimport type {\n\tDesignModeMessage,\n\tElementSelectedMessage,\n\tSourceLocation,\n} from \"./types\";\n\n// Type for React Fiber internal structure\ninterface ReactFiber {\n\t_debugSource?: {\n\t\tfileName: string;\n\t\tlineNumber: number;\n\t\tcolumnNumber?: number;\n\t};\n\ttype?: string | { displayName?: string; name?: string };\n\treturn?: ReactFiber;\n}\n\n// Type for HTMLElement with React Fiber attached\ninterface HTMLElementWithFiber extends HTMLElement {\n\t[key: string]: unknown;\n}\n\n// Track loaded fonts to avoid duplicate loads\nconst loadedFonts = new Set<string>();\n\n/**\n * Load Google Font in the iframe\n * Dynamically injects font <link> tag into iframe head\n */\nfunction loadGoogleFontInIframe(fontValue: string): void {\n\tconsole.log(\"[DesignMode Font] Attempting to load font:\", fontValue);\n\n\t// Extract clean font name from CSS value (remove quotes and fallbacks)\n\tconst cleanFont = fontValue.replace(/['\"]/g, \"\").split(\",\")[0]?.trim();\n\tif (!cleanFont) {\n\t\tconsole.log(\"[DesignMode Font] No font name found in value:\", fontValue);\n\t\treturn;\n\t}\n\n\tconsole.log(\"[DesignMode Font] Clean font name:\", cleanFont);\n\n\t// Skip if already loaded\n\tif (loadedFonts.has(cleanFont)) {\n\t\tconsole.log(\"[DesignMode Font] Font already loaded:\", cleanFont);\n\t\treturn;\n\t}\n\n\t// System fonts don't need to be loaded\n\tconst systemFonts = [\n\t\t\"Arial\",\n\t\t\"Helvetica\",\n\t\t\"Helvetica Neue\",\n\t\t\"Segoe UI\",\n\t\t\"San Francisco\",\n\t\t\"system-ui\",\n\t\t\"sans-serif\",\n\t\t\"Times New Roman\",\n\t\t\"Georgia\",\n\t\t\"Times\",\n\t\t\"serif\",\n\t\t\"Monaco\",\n\t\t\"Consolas\",\n\t\t\"SF Mono\",\n\t\t\"Menlo\",\n\t\t\"Courier New\",\n\t\t\"Courier\",\n\t\t\"monospace\",\n\t];\n\tif (systemFonts.some((sf) => cleanFont.includes(sf))) {\n\t\tconsole.log(\"[DesignMode Font] Skipping system font:\", cleanFont);\n\t\treturn;\n\t}\n\n\t// Build Google Fonts URL\n\tconst fontUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(cleanFont.replace(/\\s+/g, \"+\"))}:wght@400;500;600&display=swap`;\n\tconsole.log(\"[DesignMode Font] Google Fonts URL:\", fontUrl);\n\n\t// Check if already in DOM\n\tconst existingLink = document.querySelector(`link[href=\"${fontUrl}\"]`);\n\tif (existingLink) {\n\t\tconsole.log(\"[DesignMode Font] Font link already in DOM:\", cleanFont);\n\t\tloadedFonts.add(cleanFont);\n\t\treturn;\n\t}\n\n\t// Create and inject <link> tag\n\tconst link = document.createElement(\"link\");\n\tlink.rel = \"stylesheet\";\n\tlink.href = fontUrl;\n\tlink.onload = () => {\n\t\tconsole.log(\"[DesignMode Font] ✅ Font loaded successfully:\", cleanFont);\n\t\tloadedFonts.add(cleanFont);\n\t};\n\tlink.onerror = () => {\n\t\tconsole.error(\"[DesignMode Font] ❌ Failed to load font:\", cleanFont, fontUrl);\n\t};\n\tdocument.head.appendChild(link);\n\tconsole.log(\"[DesignMode Font] Font link injected into DOM:\", cleanFont);\n}\n\nclass DesignModeOverlay {\n\tprivate isEnabled = false;\n\tprivate selectedElement: HTMLElement | null = null;\n\tprivate hoveredElement: HTMLElement | null = null;\n\n\t// Separate overlays for different states\n\tprivate hoverOverlay: HTMLDivElement;\n\tprivate selectionOverlay: HTMLDivElement;\n\tprivate selectionTagLabel: HTMLDivElement;\n\tprivate childrenOverlays: HTMLDivElement[] = [];\n\tprivate resizeObserver: ResizeObserver | null = null;\n\n\tconstructor() {\n\t\tconsole.log('[DesignMode] Constructor called - initializing overlay');\n\n\t\t// Create persistent overlay elements\n\t\tthis.hoverOverlay = this.createOverlay(\"2px solid #3b82f6\", 999991);\n\t\tthis.selectionOverlay = this.createOverlay(\"1px solid #3b82f6\", 999990);\n\t\tthis.selectionTagLabel = this.createTagLabel();\n\n\t\tconsole.log('[DesignMode] Overlays created');\n\t\tconsole.log('[DesignMode] Hover overlay:', this.hoverOverlay);\n\n\t\tthis.listen();\n\t\tthis.setupResizeObserver();\n\n\t\tconsole.log('[DesignMode] Initialization complete');\n\t}\n\n\tprivate createOverlay(border: string, zIndex: number): HTMLDivElement {\n\t\tconst overlay = document.createElement(\"div\");\n\t\toverlay.className = \"fb-design-mode-overlay\";\n\t\tObject.assign(overlay.style, {\n\t\t\tposition: \"absolute\",\n\t\t\tborder,\n\t\t\tpointerEvents: \"none\",\n\t\t\tzIndex: String(zIndex),\n\t\t\tdisplay: \"none\",\n\t\t\tboxShadow: \"0 0 0 1px rgba(59, 130, 246, 0.2)\",\n\t\t\ttransition: \"all 0.1s ease-out\",\n\t\t});\n\t\tdocument.body.appendChild(overlay);\n\t\treturn overlay;\n\t}\n\n\tprivate createChildOverlay(): HTMLDivElement {\n\t\tconst overlay = document.createElement(\"div\");\n\t\toverlay.className = \"fb-design-mode-overlay fb-child-overlay\";\n\t\tObject.assign(overlay.style, {\n\t\t\tposition: \"absolute\",\n\t\t\tborder: \"1px dashed rgba(59, 130, 246, 0.4)\",\n\t\t\tpointerEvents: \"none\",\n\t\t\tzIndex: \"999989\",\n\t\t\tdisplay: \"none\",\n\t\t\tboxShadow: \"0 0 0 1px rgba(59, 130, 246, 0.1)\",\n\t\t\ttransition: \"all 0.1s ease-out\",\n\t\t});\n\t\tdocument.body.appendChild(overlay);\n\t\treturn overlay;\n\t}\n\n\tprivate createTagLabel(): HTMLDivElement {\n\t\tconst label = document.createElement(\"div\");\n\t\tlabel.className = \"fb-design-mode-tag\";\n\t\tObject.assign(label.style, {\n\t\t\tposition: \"absolute\",\n\t\t\tbackground: \"#3b82f6\",\n\t\t\tcolor: \"white\",\n\t\t\tpadding: \"2px 6px\",\n\t\t\tfontSize: \"11px\",\n\t\t\tfontFamily: \"monospace\",\n\t\t\tfontWeight: \"500\",\n\t\t\tborderRadius: \"0 0 4px 0\",\n\t\t\tpointerEvents: \"none\",\n\t\t\tzIndex: \"999999\",\n\t\t\tdisplay: \"none\",\n\t\t});\n\t\tdocument.body.appendChild(label);\n\t\treturn label;\n\t}\n\n\tprivate listen() {\n\t\twindow.addEventListener(\"message\", (e: MessageEvent<DesignModeMessage>) => {\n\t\t\tif (e.data.type === \"ENABLE_DESIGN_MODE\") {\n\t\t\t\tthis.enable();\n\t\t\t} else if (e.data.type === \"DISABLE_DESIGN_MODE\") {\n\t\t\t\tthis.disable();\n\t\t\t} else if (e.data.type === \"FB_UPDATE_ELEMENT\") {\n\t\t\t\tthis.handleUpdateElement(e.data);\n\t\t\t} else if (e.data.type === \"FB_GET_ALL_ELEMENTS_STATE\") {\n\t\t\t\tthis.handleGetAllElementsState();\n\t\t\t} else if (e.data.type === \"FB_UPDATE_THEME\") {\n\t\t\t\tthis.handleUpdateTheme(e.data.theme);\n\t\t\t} else if (e.data.type === \"FB_DESELECT_ELEMENT\") {\n\t\t\t\tthis.deselectElement();\n\t\t\t} else if (e.data.type === \"FB_SELECT_ELEMENT\") {\n\t\t\t\tthis.handleSelectElement(e.data);\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate setupResizeObserver() {\n\t\t// Listen for window resize and scroll events\n\t\twindow.addEventListener(\"resize\", this.updateOverlayPositions);\n\t\twindow.addEventListener(\"scroll\", this.updateOverlayPositions, true);\n\n\t\t// Use ResizeObserver to detect when elements change size\n\t\tthis.resizeObserver = new ResizeObserver(() => {\n\t\t\tthis.updateOverlayPositions();\n\t\t});\n\n\t\t// Observe the document body for any size changes\n\t\tthis.resizeObserver.observe(document.body);\n\t}\n\n\tprivate updateOverlayPositions = () => {\n\t\t// Update selected element overlay\n\t\tif (\n\t\t\tthis.selectedElement &&\n\t\t\tthis.selectionOverlay.style.display !== \"none\"\n\t\t) {\n\t\t\tthis.updateOverlayPosition(this.selectionOverlay, this.selectedElement);\n\t\t\tthis.updateTagLabel(this.selectedElement);\n\t\t}\n\n\t\t// Update hovered element overlay\n\t\tif (this.hoveredElement && this.hoverOverlay.style.display !== \"none\") {\n\t\t\tthis.updateOverlayPosition(this.hoverOverlay, this.hoveredElement);\n\t\t}\n\n\t\t// Update children overlays\n\t\tfor (const overlay of this.childrenOverlays) {\n\t\t\tif (overlay.style.display !== \"none\" && this.hoveredElement) {\n\t\t\t\t// Find the corresponding child element\n\t\t\t\tconst children = Array.from(this.hoveredElement.children).filter(\n\t\t\t\t\t(child) => {\n\t\t\t\t\t\tconst source = this.getReactFiberSource(child as HTMLElement);\n\t\t\t\t\t\treturn source !== null;\n\t\t\t\t\t},\n\t\t\t\t) as HTMLElement[];\n\n\t\t\t\tconst index = this.childrenOverlays.indexOf(overlay);\n\t\t\t\tconst child = children[index];\n\t\t\t\tif (child) {\n\t\t\t\t\tthis.updateOverlayPosition(overlay, child);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tenable() {\n\t\tif (this.isEnabled) return;\n\t\tthis.isEnabled = true;\n\n\t\tconsole.log('[DesignMode] Overlay enabled');\n\t\tconsole.log('[DesignMode] Hover overlay:', this.hoverOverlay);\n\t\tconsole.log('[DesignMode] Hover overlay styles:', {\n\t\t\tdisplay: this.hoverOverlay.style.display,\n\t\t\tposition: this.hoverOverlay.style.position,\n\t\t\tborder: this.hoverOverlay.style.border,\n\t\t\tzIndex: this.hoverOverlay.style.zIndex\n\t\t});\n\n\t\tdocument.addEventListener(\"mousemove\", this.handleMouseMove);\n\t\tdocument.addEventListener(\"click\", this.handleClick, true);\n\t\tdocument.addEventListener(\"mouseleave\", this.handleMouseLeave);\n\n\t\t// Add cursor style\n\t\tdocument.body.style.cursor = \"crosshair\";\n\t}\n\n\tdisable() {\n\t\tif (!this.isEnabled) return;\n\t\tthis.isEnabled = false;\n\n\t\tdocument.removeEventListener(\"mousemove\", this.handleMouseMove);\n\t\tdocument.removeEventListener(\"click\", this.handleClick, true);\n\t\tdocument.removeEventListener(\"mouseleave\", this.handleMouseLeave);\n\n\t\t// Hide all overlays\n\t\tthis.hoverOverlay.style.display = \"none\";\n\t\tthis.selectionOverlay.style.display = \"none\";\n\t\tthis.selectionTagLabel.style.display = \"none\";\n\t\tthis.hideChildrenOverlays();\n\n\t\t// Remove runtime markers\n\t\tif (this.selectedElement) {\n\t\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\t}\n\t\tif (this.hoveredElement) {\n\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t}\n\n\t\tdocument.body.style.cursor = \"\";\n\t\tthis.selectedElement = null;\n\t\tthis.hoveredElement = null;\n\t}\n\n\t/**\n\t * Deselect the currently selected element\n\t * Keeps design mode active but clears the selection\n\t */\n\tdeselectElement() {\n\t\tif (!this.selectedElement) return;\n\n\t\t// Remove selection marker\n\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\tthis.selectedElement = null;\n\n\t\t// Hide selection overlay and tag\n\t\tthis.selectionOverlay.style.display = \"none\";\n\t\tthis.selectionTagLabel.style.display = \"none\";\n\t}\n\n\t/**\n\t * Programmatically select an element by its source location\n\t * Used when restoring selection after page reload\n\t */\n\tprivate handleSelectElement(data: DesignModeMessage) {\n\t\tif (\n\t\t\t!data.sourceFile ||\n\t\t\t!data.sourceLine ||\n\t\t\tdata.sourceColumn === undefined\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Find element by source location\n\t\tconst allElements = document.querySelectorAll(\"*\");\n\t\tfor (const el of allElements) {\n\t\t\t// Skip our own overlays\n\t\t\tif (\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (\n\t\t\t\tsource &&\n\t\t\t\tsource.fileName === data.sourceFile &&\n\t\t\t\tsource.lineNumber === data.sourceLine &&\n\t\t\t\tsource.columnNumber === data.sourceColumn\n\t\t\t) {\n\t\t\t\tconst element = el as HTMLElement;\n\n\t\t\t\t// Update selected element marker\n\t\t\t\tif (this.selectedElement) {\n\t\t\t\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\t\t\t}\n\n\t\t\t\tthis.selectedElement = element;\n\t\t\t\tthis.selectedElement.setAttribute(\"data-fb-selected\", \"true\");\n\n\t\t\t\t// Update selection overlay and tag\n\t\t\t\tthis.updateOverlayPosition(this.selectionOverlay, element);\n\t\t\t\tthis.selectionOverlay.style.display = \"block\";\n\n\t\t\t\tthis.updateTagLabel(element);\n\t\t\t\tthis.selectionTagLabel.style.display = \"block\";\n\n\t\t\t\t// Send selection data to parent\n\t\t\t\tthis.sendElementData(element, source);\n\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Extract source location from babel plugin attributes\n\t * Attributes: data-inspector-relative-path, data-inspector-line, data-inspector-column\n\t */\n\tprivate getReactFiberSource(element: HTMLElement): SourceLocation | null {\n\t\t// Check current element and up to 5 parent elements\n\t\tlet currentElement: HTMLElement | null = element;\n\t\tlet depth = 0;\n\n\t\twhile (currentElement && depth < 5) {\n\t\t\tconst relativePath = currentElement.getAttribute(\"data-inspector-relative-path\");\n\t\t\tconst line = currentElement.getAttribute(\"data-inspector-line\");\n\t\t\tconst column = currentElement.getAttribute(\"data-inspector-column\");\n\n\t\t\tif (relativePath && line && column) {\n\t\t\t\treturn {\n\t\t\t\t\tfileName: relativePath,\n\t\t\t\t\tlineNumber: Number.parseInt(line, 10),\n\t\t\t\t\tcolumnNumber: Number.parseInt(column, 10),\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tcurrentElement = currentElement.parentElement;\n\t\t\tdepth++;\n\t\t}\n\n\t\treturn null;\n\t}\n\n\tprivate isContainer(element: HTMLElement): boolean {\n\t\tconst containerTags = [\n\t\t\t\"div\",\n\t\t\t\"section\",\n\t\t\t\"header\",\n\t\t\t\"footer\",\n\t\t\t\"main\",\n\t\t\t\"aside\",\n\t\t\t\"nav\",\n\t\t\t\"article\",\n\t\t\t\"ul\",\n\t\t\t\"ol\",\n\t\t\t\"li\",\n\t\t];\n\t\treturn containerTags.includes(element.tagName.toLowerCase());\n\t}\n\n\tprivate hasDirectTextContent(element: HTMLElement): boolean {\n\t\treturn Array.from(element.childNodes).some(\n\t\t\t(node) => node.nodeType === Node.TEXT_NODE && node.textContent?.trim(),\n\t\t);\n\t}\n\n\tprivate handleMouseLeave = () => {\n\t\tif (!this.isEnabled) return;\n\n\t\t// Hide hover overlay when mouse leaves the document\n\t\tif (this.hoveredElement) {\n\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t}\n\t\tthis.hoveredElement = null;\n\t\tthis.hoverOverlay.style.display = \"none\";\n\t\tthis.hideChildrenOverlays();\n\t};\n\n\tprivate handleMouseMove = (e: MouseEvent) => {\n\t\tif (!this.isEnabled) return;\n\n\t\t// Get all elements at this point\n\t\tconst elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);\n\n\t\t// Filter to only elements with React Fiber source, excluding overlays\n\t\tconst selectableElements = elementsAtPoint.filter((el) => {\n\t\t\tif (\n\t\t\t\tel.classList.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\tel.classList.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// Must have React Fiber source location\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (source === null) {\n\t\t\t\t// Debug: log elements without fiber\n\t\t\t\tconsole.log('[DesignMode] Element without React Fiber:', el.tagName, el.className);\n\t\t\t}\n\t\t\treturn source !== null;\n\t\t}) as HTMLElement[];\n\n\t\tconsole.log('[DesignMode] Mouse move - selectable elements:', selectableElements.length);\n\n\t\tif (selectableElements.length === 0) {\n\t\t\tif (this.hoveredElement) {\n\t\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t\t}\n\t\t\tthis.hoveredElement = null;\n\t\t\tthis.hoverOverlay.style.display = \"none\";\n\t\t\tthis.hideChildrenOverlays();\n\t\t\treturn;\n\t\t}\n\n\t\t// Get topmost element (first in array)\n\t\tconst topElement = selectableElements[0];\n\t\tif (!topElement) return; // Type guard for noUncheckedIndexedAccess\n\n\t\t// Don't show hover overlay if this is the selected element\n\t\tif (topElement === this.selectedElement) {\n\t\t\tthis.hoverOverlay.style.display = \"none\";\n\t\t\tthis.hideChildrenOverlays();\n\t\t\treturn;\n\t\t}\n\n\t\t// Update hovered element\n\t\tif (this.hoveredElement && this.hoveredElement !== topElement) {\n\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t}\n\n\t\tthis.hoveredElement = topElement;\n\t\tthis.hoveredElement.setAttribute(\"data-fb-hovered\", \"true\");\n\n\t\t// Show hover overlay\n\t\tthis.updateOverlayPosition(this.hoverOverlay, topElement);\n\t\tthis.hoverOverlay.style.display = \"block\";\n\n\t\t// Show children overlays if this is a container without direct text\n\t\tif (\n\t\t\tthis.isContainer(topElement) &&\n\t\t\t!this.hasDirectTextContent(topElement)\n\t\t) {\n\t\t\tthis.showChildrenOverlays(topElement);\n\t\t} else {\n\t\t\tthis.hideChildrenOverlays();\n\t\t}\n\t};\n\n\tprivate showChildrenOverlays(parent: HTMLElement) {\n\t\t// Get direct children with React Fiber source\n\t\tconst children = Array.from(parent.children).filter((child) => {\n\t\t\tconst source = this.getReactFiberSource(child as HTMLElement);\n\t\t\treturn source !== null;\n\t\t}) as HTMLElement[];\n\n\t\t// Ensure we have enough child overlays\n\t\twhile (this.childrenOverlays.length < children.length) {\n\t\t\tthis.childrenOverlays.push(this.createChildOverlay());\n\t\t}\n\n\t\t// Show overlay for each child\n\t\tchildren.forEach((child, index) => {\n\t\t\tconst overlay = this.childrenOverlays[index];\n\t\t\tif (overlay) {\n\t\t\t\tthis.updateOverlayPosition(overlay, child);\n\t\t\t\toverlay.style.display = \"block\";\n\t\t\t}\n\t\t});\n\n\t\t// Hide unused child overlays\n\t\tfor (let i = children.length; i < this.childrenOverlays.length; i++) {\n\t\t\tconst overlay = this.childrenOverlays[i];\n\t\t\tif (overlay) {\n\t\t\t\toverlay.style.display = \"none\";\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate hideChildrenOverlays() {\n\t\tfor (const overlay of this.childrenOverlays) {\n\t\t\toverlay.style.display = \"none\";\n\t\t}\n\t}\n\n\tprivate currentSelectionIndex = 0;\n\tprivate lastClickTime = 0;\n\tprivate lastClickPosition = { x: 0, y: 0 };\n\n\tprivate handleClick = (e: MouseEvent) => {\n\t\tif (!this.isEnabled) return;\n\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\n\t\tif (!this.hoveredElement) return;\n\n\t\tconst now = Date.now();\n\t\tconst timeSinceLastClick = now - this.lastClickTime;\n\t\tconst distanceMoved = Math.hypot(\n\t\t\te.clientX - this.lastClickPosition.x,\n\t\t\te.clientY - this.lastClickPosition.y,\n\t\t);\n\n\t\t// Get all elements at click point for cycling\n\t\tconst elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);\n\t\tconst selectableElements = elementsAtPoint.filter((el) => {\n\t\t\tif (\n\t\t\t\tel.classList.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\tel.classList.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// Must have React Fiber source location\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\treturn source !== null;\n\t\t}) as HTMLElement[];\n\n\t\t// Cycle through nested elements on repeated clicks\n\t\tif (\n\t\t\ttimeSinceLastClick < 1000 &&\n\t\t\tdistanceMoved < 10 &&\n\t\t\tselectableElements.length > 1\n\t\t) {\n\t\t\tthis.currentSelectionIndex =\n\t\t\t\t(this.currentSelectionIndex + 1) % selectableElements.length;\n\t\t} else {\n\t\t\tthis.currentSelectionIndex = 0;\n\t\t}\n\n\t\tconst target = selectableElements[this.currentSelectionIndex];\n\t\tif (!target) return; // Type guard for noUncheckedIndexedAccess\n\n\t\t// Get source location\n\t\tconst source = this.getReactFiberSource(target);\n\t\tif (!source) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Update selected element marker\n\t\tif (this.selectedElement) {\n\t\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\t}\n\n\t\tthis.selectedElement = target;\n\t\tthis.selectedElement.setAttribute(\"data-fb-selected\", \"true\");\n\n\t\t// Update selection overlay and tag\n\t\tthis.updateOverlayPosition(this.selectionOverlay, target);\n\t\tthis.selectionOverlay.style.display = \"block\";\n\n\t\tthis.updateTagLabel(target);\n\t\tthis.selectionTagLabel.style.display = \"block\";\n\n\t\t// Send selection data to parent\n\t\tthis.sendElementData(target, source);\n\n\t\t// Update last click info\n\t\tthis.lastClickTime = now;\n\t\tthis.lastClickPosition = { x: e.clientX, y: e.clientY };\n\t};\n\n\tprivate updateOverlayPosition(overlay: HTMLDivElement, element: HTMLElement) {\n\t\tconst rect = element.getBoundingClientRect();\n\t\tObject.assign(overlay.style, {\n\t\t\ttop: `${rect.top + window.scrollY}px`,\n\t\t\tleft: `${rect.left + window.scrollX}px`,\n\t\t\twidth: `${rect.width}px`,\n\t\t\theight: `${rect.height}px`,\n\t\t});\n\t}\n\n\tprivate updateTagLabel(element: HTMLElement) {\n\t\tconst rect = element.getBoundingClientRect();\n\t\tconst tagName = element.tagName.toLowerCase();\n\n\t\tthis.selectionTagLabel.textContent = tagName;\n\t\tObject.assign(this.selectionTagLabel.style, {\n\t\t\ttop: `${rect.top + window.scrollY}px`,\n\t\t\tleft: `${rect.left + window.scrollX}px`,\n\t\t});\n\t}\n\n\tprivate getRelevantStyles(element: HTMLElement): Record<string, string> {\n\t\tconst computed = window.getComputedStyle(element);\n\t\tconst relevantProps = [\n\t\t\t\"display\",\n\t\t\t\"position\",\n\t\t\t\"width\",\n\t\t\t\"height\",\n\t\t\t\"padding\",\n\t\t\t\"margin\",\n\t\t\t\"backgroundColor\",\n\t\t\t\"color\",\n\t\t\t\"fontSize\",\n\t\t\t\"fontFamily\",\n\t\t];\n\n\t\tconst styles: Record<string, string> = {};\n\t\tfor (const prop of relevantProps) {\n\t\t\tstyles[prop] = computed.getPropertyValue(prop);\n\t\t}\n\t\treturn styles;\n\t}\n\n\t/**\n\t * Extract direct text content from DOM (not from nested children)\n\t */\n\tprivate getDirectTextContent(element: HTMLElement): string | null {\n\t\tconst directTextNodes = Array.from(element.childNodes)\n\t\t\t.filter((node) => node.nodeType === Node.TEXT_NODE)\n\t\t\t.map((node) => node.textContent?.trim())\n\t\t\t.filter(Boolean);\n\n\t\treturn directTextNodes.length > 0 ? directTextNodes.join(\" \") : null;\n\t}\n\n\tprivate sendElementData(element: HTMLElement, source: SourceLocation) {\n\t\tconst directText = this.getDirectTextContent(element);\n\n\t\tconst data: ElementSelectedMessage = {\n\t\t\ttype: \"FB_ELEMENT_SELECTED\",\n\t\t\tdata: {\n\t\t\t\t// Source location from React Fiber\n\t\t\t\tsourceFile: source.fileName,\n\t\t\t\tsourceLine: source.lineNumber,\n\t\t\t\tsourceColumn: source.columnNumber,\n\n\t\t\t\t// DOM properties\n\t\t\t\ttagName: element.tagName,\n\t\t\t\tclassName: element.className,\n\t\t\t\ttextContent: directText,\n\t\t\t\tsrc: element.getAttribute(\"src\") || undefined,\n\t\t\t\talt: element.getAttribute(\"alt\") || undefined,\n\t\t\t\thref: element.getAttribute(\"href\") || undefined,\n\t\t\t\ttarget: element.getAttribute(\"target\") || undefined,\n\t\t\t\trel: element.getAttribute(\"rel\") || undefined,\n\t\t\t\tcomputedStyles: this.getRelevantStyles(element),\n\t\t\t},\n\t\t};\n\n\t\t// Send to parent window\n\t\twindow.parent.postMessage(data, \"*\");\n\t}\n\n\t/**\n\t * Handle request to get all elements' current state\n\t * Used for computing diffs on save (Lovable's approach)\n\t */\n\tprivate handleGetAllElementsState() {\n\t\tconst allElements = document.querySelectorAll(\"*\");\n\t\tconst elementsState: Array<{\n\t\t\tsourceFile: string;\n\t\t\tsourceLine: number;\n\t\t\tsourceColumn: number;\n\t\t\tclassName: string;\n\t\t\ttextContent: string | null;\n\t\t\tsrc?: string;\n\t\t\talt?: string;\n\t\t\thref?: string;\n\t\t\ttarget?: string;\n\t\t\trel?: string;\n\t\t}> = [];\n\n\t\tfor (const el of allElements) {\n\t\t\t// Skip our own overlays\n\t\t\tif (\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (!source) continue;\n\n\t\t\tconst element = el as HTMLElement;\n\n\t\t\t// Check if this is an Image component wrapper with an <img> child\n\t\t\tlet actualElement = element;\n\t\t\tif (element.tagName !== \"IMG\") {\n\t\t\t\tconst imgChild = element.querySelector(\"img\");\n\t\t\t\tif (imgChild) {\n\t\t\t\t\tactualElement = imgChild as HTMLElement;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst textContent = this.getDirectTextContent(element);\n\n\t\t\t// Get className as string - handle SVG elements which have className as SVGAnimatedString\n\t\t\tlet className = \"\";\n\t\t\tif (element.className) {\n\t\t\t\t// For SVG elements, className is SVGAnimatedString with .baseVal property\n\t\t\t\tif (typeof element.className === \"string\") {\n\t\t\t\t\tclassName = element.className;\n\t\t\t\t} else if (\"baseVal\" in element.className) {\n\t\t\t\t\tclassName = (element.className as { baseVal: string }).baseVal;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\telementsState.push({\n\t\t\t\tsourceFile: source.fileName,\n\t\t\t\tsourceLine: source.lineNumber,\n\t\t\t\tsourceColumn: source.columnNumber,\n\t\t\t\tclassName,\n\t\t\t\ttextContent,\n\t\t\t\tsrc: actualElement.getAttribute(\"src\") || undefined,\n\t\t\t\talt: actualElement.getAttribute(\"alt\") || undefined,\n\t\t\t\thref: element.getAttribute(\"href\") || undefined,\n\t\t\t\ttarget: element.getAttribute(\"target\") || undefined,\n\t\t\t\trel: element.getAttribute(\"rel\") || undefined,\n\t\t\t});\n\t\t}\n\n\t\t// Send back to parent\n\t\twindow.parent.postMessage(\n\t\t\t{\n\t\t\t\ttype: \"FB_ALL_ELEMENTS_STATE\",\n\t\t\t\tdata: elementsState,\n\t\t\t},\n\t\t\t\"*\",\n\t\t);\n\t}\n\n\t/**\n\t * Handle optimistic element updates from parent window\n\t * Uses React Fiber source to find the correct element\n\t */\n\tprivate handleUpdateElement(message: DesignModeMessage) {\n\t\tconst { sourceFile, sourceLine, sourceColumn, updates } = message;\n\n\t\tif (!sourceFile || !sourceLine || !updates) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Find element by matching React Fiber source\n\t\tconst allElements = document.querySelectorAll(\"*\");\n\n\t\tfor (const el of allElements) {\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (\n\t\t\t\tsource?.fileName === sourceFile &&\n\t\t\t\tsource?.lineNumber === sourceLine &&\n\t\t\t\tsource?.columnNumber === sourceColumn\n\t\t\t) {\n\t\t\t\tlet element = el as HTMLElement;\n\n\t\t\t\t// Special case: if we're updating image properties (src/alt) but found a container,\n\t\t\t\t// look for an <img> child element\n\t\t\t\tif (\n\t\t\t\t\t(updates.src !== undefined || updates.alt !== undefined) &&\n\t\t\t\t\telement.tagName !== \"IMG\"\n\t\t\t\t) {\n\t\t\t\t\tconst imgChild = element.querySelector(\"img\");\n\t\t\t\t\tif (imgChild) {\n\t\t\t\t\t\telement = imgChild as HTMLElement;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Apply optimistic updates\n\t\t\t\tif (updates.className !== undefined) {\n\t\t\t\t\t// Apply the className - Tailwind v4 Browser CDN will auto-generate CSS\n\t\t\t\t\telement.className = updates.className;\n\t\t\t\t}\n\n\t\t\t\tif (updates.textContent !== undefined) {\n\t\t\t\t\t// Only update first text node to preserve child elements\n\t\t\t\t\tconst textNode = Array.from(element.childNodes).find(\n\t\t\t\t\t\t(node) => node.nodeType === Node.TEXT_NODE,\n\t\t\t\t\t);\n\t\t\t\t\tif (textNode) {\n\t\t\t\t\t\ttextNode.textContent = updates.textContent;\n\t\t\t\t\t} else {\n\t\t\t\t\t\telement.textContent = updates.textContent;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (updates.src !== undefined && \"src\" in element) {\n\t\t\t\t\t// Use setAttribute to force browser reload, bypassing React's state management\n\t\t\t\t\telement.setAttribute(\"src\", updates.src);\n\t\t\t\t\t// Also update srcset to prevent fallback\n\t\t\t\t\tif (element.hasAttribute(\"srcset\")) {\n\t\t\t\t\t\telement.removeAttribute(\"srcset\");\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (updates.alt !== undefined && \"alt\" in element) {\n\t\t\t\t\t(element as HTMLImageElement).alt = updates.alt;\n\t\t\t\t}\n\n\t\t\t\tif (updates.href !== undefined && \"href\" in element) {\n\t\t\t\t\telement.setAttribute(\"href\", updates.href);\n\t\t\t\t}\n\n\t\t\t\tif (updates.target !== undefined && \"target\" in element) {\n\t\t\t\t\telement.setAttribute(\"target\", updates.target);\n\t\t\t\t}\n\n\t\t\t\tif (updates.rel !== undefined && \"rel\" in element) {\n\t\t\t\t\telement.setAttribute(\"rel\", updates.rel);\n\t\t\t\t}\n\n\t\t\t\t// Update overlays if this is the hovered or selected element\n\t\t\t\tif (element === this.hoveredElement) {\n\t\t\t\t\tthis.updateOverlayPosition(this.hoverOverlay, element);\n\t\t\t\t}\n\t\t\t\tif (element === this.selectedElement) {\n\t\t\t\t\tthis.updateOverlayPosition(this.selectionOverlay, element);\n\t\t\t\t\tthis.updateTagLabel(element);\n\t\t\t\t}\n\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Handle theme update from parent window\n\t * Apply CSS variables using a style tag (NOT inline styles) to maintain proper CSS cascade\n\t * Note: We don't change the dark class - that's controlled by the native theme switcher\n\t */\n\tprivate handleUpdateTheme(theme?: {\n\t\tlightVariables?: Record<string, string>;\n\t\tdarkVariables?: Record<string, string>;\n\t}) {\n\t\tif (!theme) return;\n\n\t\t// Find or create the style element for design mode theme overrides\n\t\tlet styleEl = document.getElementById(\n\t\t\t\"fb-design-mode-theme\",\n\t\t) as HTMLStyleElement;\n\t\tif (!styleEl) {\n\t\t\tstyleEl = document.createElement(\"style\");\n\t\t\tstyleEl.id = \"fb-design-mode-theme\";\n\t\t\tdocument.head.appendChild(styleEl);\n\t\t}\n\n\t\t// Build CSS with both light and dark theme variables\n\t\tlet css = \"\";\n\n\t\t// Light theme variables in :root (includes colors, fonts, radius)\n\t\tif (theme.lightVariables && Object.keys(theme.lightVariables).length > 0) {\n\t\t\tcss += \":root {\\n\";\n\t\t\tfor (const [key, value] of Object.entries(theme.lightVariables)) {\n\t\t\t\tcss += `  ${key}: ${value};\\n`;\n\n\t\t\t\t// Load Google Fonts when font variables are updated\n\t\t\t\tif (\n\t\t\t\t\tkey === \"--font-sans\" ||\n\t\t\t\t\tkey === \"--font-serif\" ||\n\t\t\t\t\tkey === \"--font-mono\"\n\t\t\t\t) {\n\t\t\t\t\tloadGoogleFontInIframe(value);\n\t\t\t\t}\n\t\t\t}\n\t\t\tcss += \"}\\n\\n\";\n\t\t}\n\n\t\t// Dark theme variables in .dark (only colors, not fonts/radius)\n\t\tif (theme.darkVariables && Object.keys(theme.darkVariables).length > 0) {\n\t\t\tcss += \".dark {\\n\";\n\t\t\tfor (const [key, value] of Object.entries(theme.darkVariables)) {\n\t\t\t\tcss += `  ${key}: ${value};\\n`;\n\t\t\t}\n\t\t\tcss += \"}\\n\";\n\t\t}\n\n\t\t// Apply the CSS\n\t\tstyleEl.textContent = css;\n\t}\n}\n\n// Initialize when script loads - only in browser environment\n// Tailwind Play CDN handles all CSS generation automatically\nif (typeof window !== \"undefined\" && typeof document !== \"undefined\") {\n\tnew DesignModeOverlay();\n}\n"]}

package/dist/overlay.mjs

@@ -1,9 +1,9 @@
-var c=class{isEnabled=false;selectedElement=null;hoveredElement=null;hoverOverlay;selectionOverlay;selectionTagLabel;childrenOverlays=[];resizeObserver=null;constructor(){this.hoverOverlay=this.createOverlay("2px solid #3b82f6",999991),this.selectionOverlay=this.createOverlay("1px solid #3b82f6",999990),this.selectionTagLabel=this.createTagLabel(),this.listen(),this.setupResizeObserver();}createOverlay(e,s){let t=document.createElement("div");return t.className="fb-design-mode-overlay",Object.assign(t.style,{position:"absolute",border:e,pointerEvents:"none",zIndex:String(s),display:"none",boxShadow:"0 0 0 1px rgba(59, 130, 246, 0.2)",transition:"all 0.1s ease-out"}),document.body.appendChild(t),t}createChildOverlay(){let e=document.createElement("div");return e.className="fb-design-mode-overlay fb-child-overlay",Object.assign(e.style,{position:"absolute",border:"1px dashed rgba(59, 130, 246, 0.4)",pointerEvents:"none",zIndex:"999989",display:"none",boxShadow:"0 0 0 1px rgba(59, 130, 246, 0.1)",transition:"all 0.1s ease-out"}),document.body.appendChild(e),e}createTagLabel(){let e=document.createElement("div");return e.className="fb-design-mode-tag",Object.assign(e.style,{position:"absolute",background:"#3b82f6",color:"white",padding:"2px 6px",fontSize:"11px",fontFamily:"monospace",fontWeight:"500",borderRadius:"0 0 4px 0",pointerEvents:"none",zIndex:"999999",display:"none"}),document.body.appendChild(e),e}listen(){window.addEventListener("message",e=>{e.data.type==="ENABLE_DESIGN_MODE"?this.enable():e.data.type==="DISABLE_DESIGN_MODE"?this.disable():e.data.type==="FB_UPDATE_ELEMENT"?this.handleUpdateElement(e.data):e.data.type==="FB_GET_ALL_ELEMENTS_STATE"?this.handleGetAllElementsState():e.data.type==="FB_UPDATE_THEME"?this.handleUpdateTheme(e.data.theme):e.data.type==="FB_DESELECT_ELEMENT"?this.deselectElement():e.data.type==="FB_SELECT_ELEMENT"&&this.handleSelectElement(e.data);});}setupResizeObserver(){window.addEventListener("resize",this.updateOverlayPositions),window.addEventListener("scroll",this.updateOverlayPositions,true),this.resizeObserver=new ResizeObserver(()=>{this.updateOverlayPositions();}),this.resizeObserver.observe(document.body);}updateOverlayPositions=()=>{this.selectedElement&&this.selectionOverlay.style.display!=="none"&&(this.updateOverlayPosition(this.selectionOverlay,this.selectedElement),this.updateTagLabel(this.selectedElement)),this.hoveredElement&&this.hoverOverlay.style.display!=="none"&&this.updateOverlayPosition(this.hoverOverlay,this.hoveredElement);for(let e of this.childrenOverlays)if(e.style.display!=="none"&&this.hoveredElement){let s=Array.from(this.hoveredElement.children).filter(n=>this.getReactFiberSource(n)!==null),t=this.childrenOverlays.indexOf(e),i=s[t];i&&this.updateOverlayPosition(e,i);}};enable(){this.isEnabled||(this.isEnabled=true,document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("click",this.handleClick,true),document.addEventListener("mouseleave",this.handleMouseLeave),document.body.style.cursor="crosshair");}disable(){this.isEnabled&&(this.isEnabled=false,document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("click",this.handleClick,true),document.removeEventListener("mouseleave",this.handleMouseLeave),this.hoverOverlay.style.display="none",this.selectionOverlay.style.display="none",this.selectionTagLabel.style.display="none",this.hideChildrenOverlays(),this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),document.body.style.cursor="",this.selectedElement=null,this.hoveredElement=null);}deselectElement(){this.selectedElement&&(this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=null,this.selectionOverlay.style.display="none",this.selectionTagLabel.style.display="none");}handleSelectElement(e){if(!e.sourceFile||!e.sourceLine||e.sourceColumn===void 0)return;let s=document.querySelectorAll("*");for(let t of s){if(t.classList?.contains("fb-design-mode-overlay")||t.classList?.contains("fb-design-mode-tag"))continue;let i=this.getReactFiberSource(t);if(i&&i.fileName===e.sourceFile&&i.lineNumber===e.sourceLine&&i.columnNumber===e.sourceColumn){let n=t;this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=n,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,n),this.selectionOverlay.style.display="block",this.updateTagLabel(n),this.selectionTagLabel.style.display="block",this.sendElementData(n,i);return}}}getReactFiberSource(e){let s=e,t=Object.keys(s).find(r=>r.startsWith("__reactFiber$")||r.startsWith("__reactInternalInstance$"));if(!t)return null;let i=s[t],n=null;for(;i;){if(i._debugSource){let r={fileName:i._debugSource.fileName,lineNumber:i._debugSource.lineNumber,columnNumber:i._debugSource.columnNumber??0};if(n||(n=r),r.fileName.includes("/components/ui/")||r.fileName.includes("/components/common/")){i=i.return;continue}return r}i=i.return;}return n}isContainer(e){return ["div","section","header","footer","main","aside","nav","article","ul","ol","li"].includes(e.tagName.toLowerCase())}hasDirectTextContent(e){return Array.from(e.childNodes).some(s=>s.nodeType===Node.TEXT_NODE&&s.textContent?.trim())}handleMouseLeave=()=>{this.isEnabled&&(this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=null,this.hoverOverlay.style.display="none",this.hideChildrenOverlays());};handleMouseMove=e=>{if(!this.isEnabled)return;let t=document.elementsFromPoint(e.clientX,e.clientY).filter(n=>n.classList.contains("fb-design-mode-overlay")||n.classList.contains("fb-design-mode-tag")?false:this.getReactFiberSource(n)!==null);if(t.length===0){this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=null,this.hoverOverlay.style.display="none",this.hideChildrenOverlays();return}let i=t[0];if(i){if(i===this.selectedElement){this.hoverOverlay.style.display="none",this.hideChildrenOverlays();return}this.hoveredElement&&this.hoveredElement!==i&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=i,this.hoveredElement.setAttribute("data-fb-hovered","true"),this.updateOverlayPosition(this.hoverOverlay,i),this.hoverOverlay.style.display="block",this.isContainer(i)&&!this.hasDirectTextContent(i)?this.showChildrenOverlays(i):this.hideChildrenOverlays();}};showChildrenOverlays(e){let s=Array.from(e.children).filter(t=>this.getReactFiberSource(t)!==null);for(;this.childrenOverlays.length<s.length;)this.childrenOverlays.push(this.createChildOverlay());s.forEach((t,i)=>{let n=this.childrenOverlays[i];n&&(this.updateOverlayPosition(n,t),n.style.display="block");});for(let t=s.length;t<this.childrenOverlays.length;t++){let i=this.childrenOverlays[t];i&&(i.style.display="none");}}hideChildrenOverlays(){for(let e of this.childrenOverlays)e.style.display="none";}currentSelectionIndex=0;lastClickTime=0;lastClickPosition={x:0,y:0};handleClick=e=>{if(!this.isEnabled||(e.preventDefault(),e.stopPropagation(),!this.hoveredElement))return;let s=Date.now(),t=s-this.lastClickTime,i=Math.hypot(e.clientX-this.lastClickPosition.x,e.clientY-this.lastClickPosition.y),r=document.elementsFromPoint(e.clientX,e.clientY).filter(l=>l.classList.contains("fb-design-mode-overlay")||l.classList.contains("fb-design-mode-tag")?false:this.getReactFiberSource(l)!==null);t<1e3&&i<10&&r.length>1?this.currentSelectionIndex=(this.currentSelectionIndex+1)%r.length:this.currentSelectionIndex=0;let a=r[this.currentSelectionIndex];if(!a)return;let o=this.getReactFiberSource(a);o&&(this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=a,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,a),this.selectionOverlay.style.display="block",this.updateTagLabel(a),this.selectionTagLabel.style.display="block",this.sendElementData(a,o),this.lastClickTime=s,this.lastClickPosition={x:e.clientX,y:e.clientY});};updateOverlayPosition(e,s){let t=s.getBoundingClientRect();Object.assign(e.style,{top:`${t.top+window.scrollY}px`,left:`${t.left+window.scrollX}px`,width:`${t.width}px`,height:`${t.height}px`});}updateTagLabel(e){let s=e.getBoundingClientRect(),t=e.tagName.toLowerCase();this.selectionTagLabel.textContent=t,Object.assign(this.selectionTagLabel.style,{top:`${s.top+window.scrollY}px`,left:`${s.left+window.scrollX}px`});}getRelevantStyles(e){let s=window.getComputedStyle(e),t=["display","position","width","height","padding","margin","backgroundColor","color","fontSize","fontFamily"],i={};for(let n of t)i[n]=s.getPropertyValue(n);return i}getDirectTextContent(e){let s=Array.from(e.childNodes).filter(t=>t.nodeType===Node.TEXT_NODE).map(t=>t.textContent?.trim()).filter(Boolean);return s.length>0?s.join(" "):null}sendElementData(e,s){let t=this.getDirectTextContent(e),i={type:"FB_ELEMENT_SELECTED",data:{sourceFile:s.fileName,sourceLine:s.lineNumber,sourceColumn:s.columnNumber,tagName:e.tagName,className:e.className,textContent:t,src:e.getAttribute("src")||void 0,alt:e.getAttribute("alt")||void 0,href:e.getAttribute("href")||void 0,target:e.getAttribute("target")||void 0,rel:e.getAttribute("rel")||void 0,computedStyles:this.getRelevantStyles(e)}};window.parent.postMessage(i,"*");}handleGetAllElementsState(){let e=document.querySelectorAll("*"),s=[];for(let t of e){if(t.classList?.contains("fb-design-mode-overlay")||t.classList?.contains("fb-design-mode-tag"))continue;let i=this.getReactFiberSource(t);if(!i)continue;let n=t,r=n;if(n.tagName!=="IMG"){let l=n.querySelector("img");l&&(r=l);}let a=this.getDirectTextContent(n),o="";n.className&&(typeof n.className=="string"?o=n.className:"baseVal"in n.className&&(o=n.className.baseVal)),s.push({sourceFile:i.fileName,sourceLine:i.lineNumber,sourceColumn:i.columnNumber,className:o,textContent:a,src:r.getAttribute("src")||void 0,alt:r.getAttribute("alt")||void 0,href:n.getAttribute("href")||void 0,target:n.getAttribute("target")||void 0,rel:n.getAttribute("rel")||void 0});}window.parent.postMessage({type:"FB_ALL_ELEMENTS_STATE",data:s},"*");}handleUpdateElement(e){let{sourceFile:s,sourceLine:t,sourceColumn:i,updates:n}=e;if(!s||!t||!n)return;let r=document.querySelectorAll("*");for(let a of r){let o=this.getReactFiberSource(a);if(o?.fileName===s&&o?.lineNumber===t&&o?.columnNumber===i){let l=a;if((n.src!==void 0||n.alt!==void 0)&&l.tagName!=="IMG"){let d=l.querySelector("img");d&&(l=d);}if(n.className!==void 0&&(l.className=n.className),n.textContent!==void 0){let d=Array.from(l.childNodes).find(u=>u.nodeType===Node.TEXT_NODE);d?d.textContent=n.textContent:l.textContent=n.textContent;}n.src!==void 0&&"src"in l&&(l.setAttribute("src",n.src),l.hasAttribute("srcset")&&l.removeAttribute("srcset")),n.alt!==void 0&&"alt"in l&&(l.alt=n.alt),n.href!==void 0&&"href"in l&&l.setAttribute("href",n.href),n.target!==void 0&&"target"in l&&l.setAttribute("target",n.target),n.rel!==void 0&&"rel"in l&&l.setAttribute("rel",n.rel),l===this.hoveredElement&&this.updateOverlayPosition(this.hoverOverlay,l),l===this.selectedElement&&(this.updateOverlayPosition(this.selectionOverlay,l),this.updateTagLabel(l));return}}}handleUpdateTheme(e){if(!e)return;let s=document.getElementById("fb-design-mode-theme");s||(s=document.createElement("style"),s.id="fb-design-mode-theme",document.head.appendChild(s));let t="";if(e.lightVariables&&Object.keys(e.lightVariables).length>0){t+=`:root {
-`;for(let[i,n]of Object.entries(e.lightVariables))t+=`  ${i}: ${n};
-`;t+=`}
+var h=new Set;function v(c){console.log("[DesignMode Font] Attempting to load font:",c);let e=c.replace(/['"]/g,"").split(",")[0]?.trim();if(!e){console.log("[DesignMode Font] No font name found in value:",c);return}if(console.log("[DesignMode Font] Clean font name:",e),h.has(e)){console.log("[DesignMode Font] Font already loaded:",e);return}if(["Arial","Helvetica","Helvetica Neue","Segoe UI","San Francisco","system-ui","sans-serif","Times New Roman","Georgia","Times","serif","Monaco","Consolas","SF Mono","Menlo","Courier New","Courier","monospace"].some(o=>e.includes(o))){console.log("[DesignMode Font] Skipping system font:",e);return}let n=`https://fonts.googleapis.com/css2?family=${encodeURIComponent(e.replace(/\s+/g,"+"))}:wght@400;500;600&display=swap`;if(console.log("[DesignMode Font] Google Fonts URL:",n),document.querySelector(`link[href="${n}"]`)){console.log("[DesignMode Font] Font link already in DOM:",e),h.add(e);return}let t=document.createElement("link");t.rel="stylesheet",t.href=n,t.onload=()=>{console.log("[DesignMode Font] \u2705 Font loaded successfully:",e),h.add(e);},t.onerror=()=>{console.error("[DesignMode Font] \u274C Failed to load font:",e,n);},document.head.appendChild(t),console.log("[DesignMode Font] Font link injected into DOM:",e);}var u=class{isEnabled=false;selectedElement=null;hoveredElement=null;hoverOverlay;selectionOverlay;selectionTagLabel;childrenOverlays=[];resizeObserver=null;constructor(){console.log("[DesignMode] Constructor called - initializing overlay"),this.hoverOverlay=this.createOverlay("2px solid #3b82f6",999991),this.selectionOverlay=this.createOverlay("1px solid #3b82f6",999990),this.selectionTagLabel=this.createTagLabel(),console.log("[DesignMode] Overlays created"),console.log("[DesignMode] Hover overlay:",this.hoverOverlay),this.listen(),this.setupResizeObserver(),console.log("[DesignMode] Initialization complete");}createOverlay(e,s){let n=document.createElement("div");return n.className="fb-design-mode-overlay",Object.assign(n.style,{position:"absolute",border:e,pointerEvents:"none",zIndex:String(s),display:"none",boxShadow:"0 0 0 1px rgba(59, 130, 246, 0.2)",transition:"all 0.1s ease-out"}),document.body.appendChild(n),n}createChildOverlay(){let e=document.createElement("div");return e.className="fb-design-mode-overlay fb-child-overlay",Object.assign(e.style,{position:"absolute",border:"1px dashed rgba(59, 130, 246, 0.4)",pointerEvents:"none",zIndex:"999989",display:"none",boxShadow:"0 0 0 1px rgba(59, 130, 246, 0.1)",transition:"all 0.1s ease-out"}),document.body.appendChild(e),e}createTagLabel(){let e=document.createElement("div");return e.className="fb-design-mode-tag",Object.assign(e.style,{position:"absolute",background:"#3b82f6",color:"white",padding:"2px 6px",fontSize:"11px",fontFamily:"monospace",fontWeight:"500",borderRadius:"0 0 4px 0",pointerEvents:"none",zIndex:"999999",display:"none"}),document.body.appendChild(e),e}listen(){window.addEventListener("message",e=>{e.data.type==="ENABLE_DESIGN_MODE"?this.enable():e.data.type==="DISABLE_DESIGN_MODE"?this.disable():e.data.type==="FB_UPDATE_ELEMENT"?this.handleUpdateElement(e.data):e.data.type==="FB_GET_ALL_ELEMENTS_STATE"?this.handleGetAllElementsState():e.data.type==="FB_UPDATE_THEME"?this.handleUpdateTheme(e.data.theme):e.data.type==="FB_DESELECT_ELEMENT"?this.deselectElement():e.data.type==="FB_SELECT_ELEMENT"&&this.handleSelectElement(e.data);});}setupResizeObserver(){window.addEventListener("resize",this.updateOverlayPositions),window.addEventListener("scroll",this.updateOverlayPositions,true),this.resizeObserver=new ResizeObserver(()=>{this.updateOverlayPositions();}),this.resizeObserver.observe(document.body);}updateOverlayPositions=()=>{this.selectedElement&&this.selectionOverlay.style.display!=="none"&&(this.updateOverlayPosition(this.selectionOverlay,this.selectedElement),this.updateTagLabel(this.selectedElement)),this.hoveredElement&&this.hoverOverlay.style.display!=="none"&&this.updateOverlayPosition(this.hoverOverlay,this.hoveredElement);for(let e of this.childrenOverlays)if(e.style.display!=="none"&&this.hoveredElement){let s=Array.from(this.hoveredElement.children).filter(t=>this.getReactFiberSource(t)!==null),n=this.childrenOverlays.indexOf(e),i=s[n];i&&this.updateOverlayPosition(e,i);}};enable(){this.isEnabled||(this.isEnabled=true,console.log("[DesignMode] Overlay enabled"),console.log("[DesignMode] Hover overlay:",this.hoverOverlay),console.log("[DesignMode] Hover overlay styles:",{display:this.hoverOverlay.style.display,position:this.hoverOverlay.style.position,border:this.hoverOverlay.style.border,zIndex:this.hoverOverlay.style.zIndex}),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("click",this.handleClick,true),document.addEventListener("mouseleave",this.handleMouseLeave),document.body.style.cursor="crosshair");}disable(){this.isEnabled&&(this.isEnabled=false,document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("click",this.handleClick,true),document.removeEventListener("mouseleave",this.handleMouseLeave),this.hoverOverlay.style.display="none",this.selectionOverlay.style.display="none",this.selectionTagLabel.style.display="none",this.hideChildrenOverlays(),this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),document.body.style.cursor="",this.selectedElement=null,this.hoveredElement=null);}deselectElement(){this.selectedElement&&(this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=null,this.selectionOverlay.style.display="none",this.selectionTagLabel.style.display="none");}handleSelectElement(e){if(!e.sourceFile||!e.sourceLine||e.sourceColumn===void 0)return;let s=document.querySelectorAll("*");for(let n of s){if(n.classList?.contains("fb-design-mode-overlay")||n.classList?.contains("fb-design-mode-tag"))continue;let i=this.getReactFiberSource(n);if(i&&i.fileName===e.sourceFile&&i.lineNumber===e.sourceLine&&i.columnNumber===e.sourceColumn){let t=n;this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=t,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,t),this.selectionOverlay.style.display="block",this.updateTagLabel(t),this.selectionTagLabel.style.display="block",this.sendElementData(t,i);return}}}getReactFiberSource(e){let s=e,n=0;for(;s&&n<5;){let i=s.getAttribute("data-inspector-relative-path"),t=s.getAttribute("data-inspector-line"),o=s.getAttribute("data-inspector-column");if(i&&t&&o)return {fileName:i,lineNumber:Number.parseInt(t,10),columnNumber:Number.parseInt(o,10)};s=s.parentElement,n++;}return null}isContainer(e){return ["div","section","header","footer","main","aside","nav","article","ul","ol","li"].includes(e.tagName.toLowerCase())}hasDirectTextContent(e){return Array.from(e.childNodes).some(s=>s.nodeType===Node.TEXT_NODE&&s.textContent?.trim())}handleMouseLeave=()=>{this.isEnabled&&(this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=null,this.hoverOverlay.style.display="none",this.hideChildrenOverlays());};handleMouseMove=e=>{if(!this.isEnabled)return;let n=document.elementsFromPoint(e.clientX,e.clientY).filter(t=>{if(t.classList.contains("fb-design-mode-overlay")||t.classList.contains("fb-design-mode-tag"))return  false;let o=this.getReactFiberSource(t);return o===null&&console.log("[DesignMode] Element without React Fiber:",t.tagName,t.className),o!==null});if(console.log("[DesignMode] Mouse move - selectable elements:",n.length),n.length===0){this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=null,this.hoverOverlay.style.display="none",this.hideChildrenOverlays();return}let i=n[0];if(i){if(i===this.selectedElement){this.hoverOverlay.style.display="none",this.hideChildrenOverlays();return}this.hoveredElement&&this.hoveredElement!==i&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=i,this.hoveredElement.setAttribute("data-fb-hovered","true"),this.updateOverlayPosition(this.hoverOverlay,i),this.hoverOverlay.style.display="block",this.isContainer(i)&&!this.hasDirectTextContent(i)?this.showChildrenOverlays(i):this.hideChildrenOverlays();}};showChildrenOverlays(e){let s=Array.from(e.children).filter(n=>this.getReactFiberSource(n)!==null);for(;this.childrenOverlays.length<s.length;)this.childrenOverlays.push(this.createChildOverlay());s.forEach((n,i)=>{let t=this.childrenOverlays[i];t&&(this.updateOverlayPosition(t,n),t.style.display="block");});for(let n=s.length;n<this.childrenOverlays.length;n++){let i=this.childrenOverlays[n];i&&(i.style.display="none");}}hideChildrenOverlays(){for(let e of this.childrenOverlays)e.style.display="none";}currentSelectionIndex=0;lastClickTime=0;lastClickPosition={x:0,y:0};handleClick=e=>{if(!this.isEnabled||(e.preventDefault(),e.stopPropagation(),!this.hoveredElement))return;let s=Date.now(),n=s-this.lastClickTime,i=Math.hypot(e.clientX-this.lastClickPosition.x,e.clientY-this.lastClickPosition.y),o=document.elementsFromPoint(e.clientX,e.clientY).filter(l=>l.classList.contains("fb-design-mode-overlay")||l.classList.contains("fb-design-mode-tag")?false:this.getReactFiberSource(l)!==null);n<1e3&&i<10&&o.length>1?this.currentSelectionIndex=(this.currentSelectionIndex+1)%o.length:this.currentSelectionIndex=0;let r=o[this.currentSelectionIndex];if(!r)return;let a=this.getReactFiberSource(r);a&&(this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=r,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,r),this.selectionOverlay.style.display="block",this.updateTagLabel(r),this.selectionTagLabel.style.display="block",this.sendElementData(r,a),this.lastClickTime=s,this.lastClickPosition={x:e.clientX,y:e.clientY});};updateOverlayPosition(e,s){let n=s.getBoundingClientRect();Object.assign(e.style,{top:`${n.top+window.scrollY}px`,left:`${n.left+window.scrollX}px`,width:`${n.width}px`,height:`${n.height}px`});}updateTagLabel(e){let s=e.getBoundingClientRect(),n=e.tagName.toLowerCase();this.selectionTagLabel.textContent=n,Object.assign(this.selectionTagLabel.style,{top:`${s.top+window.scrollY}px`,left:`${s.left+window.scrollX}px`});}getRelevantStyles(e){let s=window.getComputedStyle(e),n=["display","position","width","height","padding","margin","backgroundColor","color","fontSize","fontFamily"],i={};for(let t of n)i[t]=s.getPropertyValue(t);return i}getDirectTextContent(e){let s=Array.from(e.childNodes).filter(n=>n.nodeType===Node.TEXT_NODE).map(n=>n.textContent?.trim()).filter(Boolean);return s.length>0?s.join(" "):null}sendElementData(e,s){let n=this.getDirectTextContent(e),i={type:"FB_ELEMENT_SELECTED",data:{sourceFile:s.fileName,sourceLine:s.lineNumber,sourceColumn:s.columnNumber,tagName:e.tagName,className:e.className,textContent:n,src:e.getAttribute("src")||void 0,alt:e.getAttribute("alt")||void 0,href:e.getAttribute("href")||void 0,target:e.getAttribute("target")||void 0,rel:e.getAttribute("rel")||void 0,computedStyles:this.getRelevantStyles(e)}};window.parent.postMessage(i,"*");}handleGetAllElementsState(){let e=document.querySelectorAll("*"),s=[];for(let n of e){if(n.classList?.contains("fb-design-mode-overlay")||n.classList?.contains("fb-design-mode-tag"))continue;let i=this.getReactFiberSource(n);if(!i)continue;let t=n,o=t;if(t.tagName!=="IMG"){let l=t.querySelector("img");l&&(o=l);}let r=this.getDirectTextContent(t),a="";t.className&&(typeof t.className=="string"?a=t.className:"baseVal"in t.className&&(a=t.className.baseVal)),s.push({sourceFile:i.fileName,sourceLine:i.lineNumber,sourceColumn:i.columnNumber,className:a,textContent:r,src:o.getAttribute("src")||void 0,alt:o.getAttribute("alt")||void 0,href:t.getAttribute("href")||void 0,target:t.getAttribute("target")||void 0,rel:t.getAttribute("rel")||void 0});}window.parent.postMessage({type:"FB_ALL_ELEMENTS_STATE",data:s},"*");}handleUpdateElement(e){let{sourceFile:s,sourceLine:n,sourceColumn:i,updates:t}=e;if(!s||!n||!t)return;let o=document.querySelectorAll("*");for(let r of o){let a=this.getReactFiberSource(r);if(a?.fileName===s&&a?.lineNumber===n&&a?.columnNumber===i){let l=r;if((t.src!==void 0||t.alt!==void 0)&&l.tagName!=="IMG"){let d=l.querySelector("img");d&&(l=d);}if(t.className!==void 0&&(l.className=t.className),t.textContent!==void 0){let d=Array.from(l.childNodes).find(m=>m.nodeType===Node.TEXT_NODE);d?d.textContent=t.textContent:l.textContent=t.textContent;}t.src!==void 0&&"src"in l&&(l.setAttribute("src",t.src),l.hasAttribute("srcset")&&l.removeAttribute("srcset")),t.alt!==void 0&&"alt"in l&&(l.alt=t.alt),t.href!==void 0&&"href"in l&&l.setAttribute("href",t.href),t.target!==void 0&&"target"in l&&l.setAttribute("target",t.target),t.rel!==void 0&&"rel"in l&&l.setAttribute("rel",t.rel),l===this.hoveredElement&&this.updateOverlayPosition(this.hoverOverlay,l),l===this.selectedElement&&(this.updateOverlayPosition(this.selectionOverlay,l),this.updateTagLabel(l));return}}}handleUpdateTheme(e){if(!e)return;let s=document.getElementById("fb-design-mode-theme");s||(s=document.createElement("style"),s.id="fb-design-mode-theme",document.head.appendChild(s));let n="";if(e.lightVariables&&Object.keys(e.lightVariables).length>0){n+=`:root {
+`;for(let[i,t]of Object.entries(e.lightVariables))n+=`  ${i}: ${t};
+`,(i==="--font-sans"||i==="--font-serif"||i==="--font-mono")&&v(t);n+=`}
 
-`;}if(e.darkVariables&&Object.keys(e.darkVariables).length>0){t+=`.dark {
-`;for(let[i,n]of Object.entries(e.darkVariables))t+=`  ${i}: ${n};
-`;t+=`}
-`;}s.textContent=t;}};typeof window<"u"&&typeof document<"u"&&new c;//# sourceMappingURL=overlay.mjs.map
+`;}if(e.darkVariables&&Object.keys(e.darkVariables).length>0){n+=`.dark {
+`;for(let[i,t]of Object.entries(e.darkVariables))n+=`  ${i}: ${t};
+`;n+=`}
+`;}s.textContent=n;}};typeof window<"u"&&typeof document<"u"&&new u;//# sourceMappingURL=overlay.mjs.map
 //# sourceMappingURL=overlay.mjs.map

package/dist/overlay.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/overlay.ts"],"names":["DesignModeOverlay","border","zIndex","overlay","label","children","child","index","data","allElements","el","source","element","elementWithFiber","fiberKey","key","fiber","firstSource","node","selectableElements","topElement","parent","i","now","timeSinceLastClick","distanceMoved","target","rect","tagName","computed","relevantProps","styles","prop","directTextNodes","directText","elementsState","actualElement","imgChild","textContent","className","message","sourceFile","sourceLine","sourceColumn","updates","textNode","theme","styleEl","css","value"],"mappings":"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","file":"overlay.mjs","sourcesContent":["/**\n * Design Mode Overlay Script\n * Injected into the preview iframe to enable element selection\n *\n * Uses React Fiber's _debugSource to track element source locations at runtime.\n * No build-time tagging required - everything is resolved from React's internal data.\n *\n * Runtime CSS generation is handled by Tailwind v4 Browser CDN.\n */\n\nimport type {\n\tDesignModeMessage,\n\tElementSelectedMessage,\n\tSourceLocation,\n} from \"./types\";\n\n// Type for React Fiber internal structure\ninterface ReactFiber {\n\t_debugSource?: {\n\t\tfileName: string;\n\t\tlineNumber: number;\n\t\tcolumnNumber?: number;\n\t};\n\ttype?: string | { displayName?: string; name?: string };\n\treturn?: ReactFiber;\n}\n\n// Type for HTMLElement with React Fiber attached\ninterface HTMLElementWithFiber extends HTMLElement {\n\t[key: string]: unknown;\n}\n\nclass DesignModeOverlay {\n\tprivate isEnabled = false;\n\tprivate selectedElement: HTMLElement | null = null;\n\tprivate hoveredElement: HTMLElement | null = null;\n\n\t// Separate overlays for different states\n\tprivate hoverOverlay: HTMLDivElement;\n\tprivate selectionOverlay: HTMLDivElement;\n\tprivate selectionTagLabel: HTMLDivElement;\n\tprivate childrenOverlays: HTMLDivElement[] = [];\n\tprivate resizeObserver: ResizeObserver | null = null;\n\n\tconstructor() {\n\t\t// Create persistent overlay elements\n\t\tthis.hoverOverlay = this.createOverlay(\"2px solid #3b82f6\", 999991);\n\t\tthis.selectionOverlay = this.createOverlay(\"1px solid #3b82f6\", 999990);\n\t\tthis.selectionTagLabel = this.createTagLabel();\n\n\t\tthis.listen();\n\t\tthis.setupResizeObserver();\n\t}\n\n\tprivate createOverlay(border: string, zIndex: number): HTMLDivElement {\n\t\tconst overlay = document.createElement(\"div\");\n\t\toverlay.className = \"fb-design-mode-overlay\";\n\t\tObject.assign(overlay.style, {\n\t\t\tposition: \"absolute\",\n\t\t\tborder,\n\t\t\tpointerEvents: \"none\",\n\t\t\tzIndex: String(zIndex),\n\t\t\tdisplay: \"none\",\n\t\t\tboxShadow: \"0 0 0 1px rgba(59, 130, 246, 0.2)\",\n\t\t\ttransition: \"all 0.1s ease-out\",\n\t\t});\n\t\tdocument.body.appendChild(overlay);\n\t\treturn overlay;\n\t}\n\n\tprivate createChildOverlay(): HTMLDivElement {\n\t\tconst overlay = document.createElement(\"div\");\n\t\toverlay.className = \"fb-design-mode-overlay fb-child-overlay\";\n\t\tObject.assign(overlay.style, {\n\t\t\tposition: \"absolute\",\n\t\t\tborder: \"1px dashed rgba(59, 130, 246, 0.4)\",\n\t\t\tpointerEvents: \"none\",\n\t\t\tzIndex: \"999989\",\n\t\t\tdisplay: \"none\",\n\t\t\tboxShadow: \"0 0 0 1px rgba(59, 130, 246, 0.1)\",\n\t\t\ttransition: \"all 0.1s ease-out\",\n\t\t});\n\t\tdocument.body.appendChild(overlay);\n\t\treturn overlay;\n\t}\n\n\tprivate createTagLabel(): HTMLDivElement {\n\t\tconst label = document.createElement(\"div\");\n\t\tlabel.className = \"fb-design-mode-tag\";\n\t\tObject.assign(label.style, {\n\t\t\tposition: \"absolute\",\n\t\t\tbackground: \"#3b82f6\",\n\t\t\tcolor: \"white\",\n\t\t\tpadding: \"2px 6px\",\n\t\t\tfontSize: \"11px\",\n\t\t\tfontFamily: \"monospace\",\n\t\t\tfontWeight: \"500\",\n\t\t\tborderRadius: \"0 0 4px 0\",\n\t\t\tpointerEvents: \"none\",\n\t\t\tzIndex: \"999999\",\n\t\t\tdisplay: \"none\",\n\t\t});\n\t\tdocument.body.appendChild(label);\n\t\treturn label;\n\t}\n\n\tprivate listen() {\n\t\twindow.addEventListener(\"message\", (e: MessageEvent<DesignModeMessage>) => {\n\t\t\tif (e.data.type === \"ENABLE_DESIGN_MODE\") {\n\t\t\t\tthis.enable();\n\t\t\t} else if (e.data.type === \"DISABLE_DESIGN_MODE\") {\n\t\t\t\tthis.disable();\n\t\t\t} else if (e.data.type === \"FB_UPDATE_ELEMENT\") {\n\t\t\t\tthis.handleUpdateElement(e.data);\n\t\t\t} else if (e.data.type === \"FB_GET_ALL_ELEMENTS_STATE\") {\n\t\t\t\tthis.handleGetAllElementsState();\n\t\t\t} else if (e.data.type === \"FB_UPDATE_THEME\") {\n\t\t\t\tthis.handleUpdateTheme(e.data.theme);\n\t\t\t} else if (e.data.type === \"FB_DESELECT_ELEMENT\") {\n\t\t\t\tthis.deselectElement();\n\t\t\t} else if (e.data.type === \"FB_SELECT_ELEMENT\") {\n\t\t\t\tthis.handleSelectElement(e.data);\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate setupResizeObserver() {\n\t\t// Listen for window resize and scroll events\n\t\twindow.addEventListener(\"resize\", this.updateOverlayPositions);\n\t\twindow.addEventListener(\"scroll\", this.updateOverlayPositions, true);\n\n\t\t// Use ResizeObserver to detect when elements change size\n\t\tthis.resizeObserver = new ResizeObserver(() => {\n\t\t\tthis.updateOverlayPositions();\n\t\t});\n\n\t\t// Observe the document body for any size changes\n\t\tthis.resizeObserver.observe(document.body);\n\t}\n\n\tprivate updateOverlayPositions = () => {\n\t\t// Update selected element overlay\n\t\tif (\n\t\t\tthis.selectedElement &&\n\t\t\tthis.selectionOverlay.style.display !== \"none\"\n\t\t) {\n\t\t\tthis.updateOverlayPosition(this.selectionOverlay, this.selectedElement);\n\t\t\tthis.updateTagLabel(this.selectedElement);\n\t\t}\n\n\t\t// Update hovered element overlay\n\t\tif (this.hoveredElement && this.hoverOverlay.style.display !== \"none\") {\n\t\t\tthis.updateOverlayPosition(this.hoverOverlay, this.hoveredElement);\n\t\t}\n\n\t\t// Update children overlays\n\t\tfor (const overlay of this.childrenOverlays) {\n\t\t\tif (overlay.style.display !== \"none\" && this.hoveredElement) {\n\t\t\t\t// Find the corresponding child element\n\t\t\t\tconst children = Array.from(this.hoveredElement.children).filter(\n\t\t\t\t\t(child) => {\n\t\t\t\t\t\tconst source = this.getReactFiberSource(child as HTMLElement);\n\t\t\t\t\t\treturn source !== null;\n\t\t\t\t\t},\n\t\t\t\t) as HTMLElement[];\n\n\t\t\t\tconst index = this.childrenOverlays.indexOf(overlay);\n\t\t\t\tconst child = children[index];\n\t\t\t\tif (child) {\n\t\t\t\t\tthis.updateOverlayPosition(overlay, child);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tenable() {\n\t\tif (this.isEnabled) return;\n\t\tthis.isEnabled = true;\n\n\t\tdocument.addEventListener(\"mousemove\", this.handleMouseMove);\n\t\tdocument.addEventListener(\"click\", this.handleClick, true);\n\t\tdocument.addEventListener(\"mouseleave\", this.handleMouseLeave);\n\n\t\t// Add cursor style\n\t\tdocument.body.style.cursor = \"crosshair\";\n\t}\n\n\tdisable() {\n\t\tif (!this.isEnabled) return;\n\t\tthis.isEnabled = false;\n\n\t\tdocument.removeEventListener(\"mousemove\", this.handleMouseMove);\n\t\tdocument.removeEventListener(\"click\", this.handleClick, true);\n\t\tdocument.removeEventListener(\"mouseleave\", this.handleMouseLeave);\n\n\t\t// Hide all overlays\n\t\tthis.hoverOverlay.style.display = \"none\";\n\t\tthis.selectionOverlay.style.display = \"none\";\n\t\tthis.selectionTagLabel.style.display = \"none\";\n\t\tthis.hideChildrenOverlays();\n\n\t\t// Remove runtime markers\n\t\tif (this.selectedElement) {\n\t\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\t}\n\t\tif (this.hoveredElement) {\n\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t}\n\n\t\tdocument.body.style.cursor = \"\";\n\t\tthis.selectedElement = null;\n\t\tthis.hoveredElement = null;\n\t}\n\n\t/**\n\t * Deselect the currently selected element\n\t * Keeps design mode active but clears the selection\n\t */\n\tdeselectElement() {\n\t\tif (!this.selectedElement) return;\n\n\t\t// Remove selection marker\n\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\tthis.selectedElement = null;\n\n\t\t// Hide selection overlay and tag\n\t\tthis.selectionOverlay.style.display = \"none\";\n\t\tthis.selectionTagLabel.style.display = \"none\";\n\t}\n\n\t/**\n\t * Programmatically select an element by its source location\n\t * Used when restoring selection after page reload\n\t */\n\tprivate handleSelectElement(data: DesignModeMessage) {\n\t\tif (\n\t\t\t!data.sourceFile ||\n\t\t\t!data.sourceLine ||\n\t\t\tdata.sourceColumn === undefined\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Find element by source location\n\t\tconst allElements = document.querySelectorAll(\"*\");\n\t\tfor (const el of allElements) {\n\t\t\t// Skip our own overlays\n\t\t\tif (\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (\n\t\t\t\tsource &&\n\t\t\t\tsource.fileName === data.sourceFile &&\n\t\t\t\tsource.lineNumber === data.sourceLine &&\n\t\t\t\tsource.columnNumber === data.sourceColumn\n\t\t\t) {\n\t\t\t\tconst element = el as HTMLElement;\n\n\t\t\t\t// Update selected element marker\n\t\t\t\tif (this.selectedElement) {\n\t\t\t\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\t\t\t}\n\n\t\t\t\tthis.selectedElement = element;\n\t\t\t\tthis.selectedElement.setAttribute(\"data-fb-selected\", \"true\");\n\n\t\t\t\t// Update selection overlay and tag\n\t\t\t\tthis.updateOverlayPosition(this.selectionOverlay, element);\n\t\t\t\tthis.selectionOverlay.style.display = \"block\";\n\n\t\t\t\tthis.updateTagLabel(element);\n\t\t\t\tthis.selectionTagLabel.style.display = \"block\";\n\n\t\t\t\t// Send selection data to parent\n\t\t\t\tthis.sendElementData(element, source);\n\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Extract source location from React Fiber's _debugSource\n\t * This is added automatically by React in development mode\n\t *\n\t * Strategy: Find the JSX usage site, not the component definition.\n\t * - For DOM elements (div, p, button): Use first _debugSource\n\t * - For custom components (Button, Input): Skip to parent's _debugSource (the usage site)\n\t */\n\tprivate getReactFiberSource(element: HTMLElement): SourceLocation | null {\n\t\t// Find React fiber key (varies by React version)\n\t\tconst elementWithFiber = element as HTMLElementWithFiber;\n\t\tconst fiberKey = Object.keys(elementWithFiber).find(\n\t\t\t(key) =>\n\t\t\t\tkey.startsWith(\"__reactFiber$\") ||\n\t\t\t\tkey.startsWith(\"__reactInternalInstance$\"),\n\t\t);\n\n\t\tif (!fiberKey) {\n\t\t\treturn null;\n\t\t}\n\n\t\tlet fiber = elementWithFiber[fiberKey] as ReactFiber | undefined;\n\t\tlet firstSource: SourceLocation | null = null;\n\n\t\t// Walk up fiber tree to find _debugSource\n\t\twhile (fiber) {\n\t\t\tif (fiber._debugSource) {\n\t\t\t\tconst source: SourceLocation = {\n\t\t\t\t\tfileName: fiber._debugSource.fileName,\n\t\t\t\t\tlineNumber: fiber._debugSource.lineNumber,\n\t\t\t\t\tcolumnNumber: fiber._debugSource.columnNumber ?? 0,\n\t\t\t\t};\n\n\t\t\t\t// Store first source we find\n\t\t\t\tif (!firstSource) {\n\t\t\t\t\tfirstSource = source;\n\t\t\t\t}\n\n\t\t\t\t// Check if this is a component file (in src/components/ui/)\n\t\t\t\t// If it is, skip it and use the parent's source (the usage site)\n\t\t\t\tconst isComponentFile =\n\t\t\t\t\tsource.fileName.includes(\"/components/ui/\") ||\n\t\t\t\t\tsource.fileName.includes(\"/components/common/\");\n\n\t\t\t\tif (isComponentFile) {\n\t\t\t\t\t// This is the component definition - keep looking up for usage site\n\t\t\t\t\tfiber = fiber.return;\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\t// This is a usage site - return it\n\t\t\t\treturn source;\n\t\t\t}\n\t\t\tfiber = fiber.return; // Walk up to parent fiber\n\t\t}\n\n\t\t// Fallback to first source if we didn't find a non-component source\n\t\treturn firstSource;\n\t}\n\n\tprivate isContainer(element: HTMLElement): boolean {\n\t\tconst containerTags = [\n\t\t\t\"div\",\n\t\t\t\"section\",\n\t\t\t\"header\",\n\t\t\t\"footer\",\n\t\t\t\"main\",\n\t\t\t\"aside\",\n\t\t\t\"nav\",\n\t\t\t\"article\",\n\t\t\t\"ul\",\n\t\t\t\"ol\",\n\t\t\t\"li\",\n\t\t];\n\t\treturn containerTags.includes(element.tagName.toLowerCase());\n\t}\n\n\tprivate hasDirectTextContent(element: HTMLElement): boolean {\n\t\treturn Array.from(element.childNodes).some(\n\t\t\t(node) => node.nodeType === Node.TEXT_NODE && node.textContent?.trim(),\n\t\t);\n\t}\n\n\tprivate handleMouseLeave = () => {\n\t\tif (!this.isEnabled) return;\n\n\t\t// Hide hover overlay when mouse leaves the document\n\t\tif (this.hoveredElement) {\n\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t}\n\t\tthis.hoveredElement = null;\n\t\tthis.hoverOverlay.style.display = \"none\";\n\t\tthis.hideChildrenOverlays();\n\t};\n\n\tprivate handleMouseMove = (e: MouseEvent) => {\n\t\tif (!this.isEnabled) return;\n\n\t\t// Get all elements at this point\n\t\tconst elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);\n\n\t\t// Filter to only elements with React Fiber source, excluding overlays\n\t\tconst selectableElements = elementsAtPoint.filter((el) => {\n\t\t\tif (\n\t\t\t\tel.classList.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\tel.classList.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// Must have React Fiber source location\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\treturn source !== null;\n\t\t}) as HTMLElement[];\n\n\t\tif (selectableElements.length === 0) {\n\t\t\tif (this.hoveredElement) {\n\t\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t\t}\n\t\t\tthis.hoveredElement = null;\n\t\t\tthis.hoverOverlay.style.display = \"none\";\n\t\t\tthis.hideChildrenOverlays();\n\t\t\treturn;\n\t\t}\n\n\t\t// Get topmost element (first in array)\n\t\tconst topElement = selectableElements[0];\n\t\tif (!topElement) return; // Type guard for noUncheckedIndexedAccess\n\n\t\t// Don't show hover overlay if this is the selected element\n\t\tif (topElement === this.selectedElement) {\n\t\t\tthis.hoverOverlay.style.display = \"none\";\n\t\t\tthis.hideChildrenOverlays();\n\t\t\treturn;\n\t\t}\n\n\t\t// Update hovered element\n\t\tif (this.hoveredElement && this.hoveredElement !== topElement) {\n\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t}\n\n\t\tthis.hoveredElement = topElement;\n\t\tthis.hoveredElement.setAttribute(\"data-fb-hovered\", \"true\");\n\n\t\t// Show hover overlay\n\t\tthis.updateOverlayPosition(this.hoverOverlay, topElement);\n\t\tthis.hoverOverlay.style.display = \"block\";\n\n\t\t// Show children overlays if this is a container without direct text\n\t\tif (\n\t\t\tthis.isContainer(topElement) &&\n\t\t\t!this.hasDirectTextContent(topElement)\n\t\t) {\n\t\t\tthis.showChildrenOverlays(topElement);\n\t\t} else {\n\t\t\tthis.hideChildrenOverlays();\n\t\t}\n\t};\n\n\tprivate showChildrenOverlays(parent: HTMLElement) {\n\t\t// Get direct children with React Fiber source\n\t\tconst children = Array.from(parent.children).filter((child) => {\n\t\t\tconst source = this.getReactFiberSource(child as HTMLElement);\n\t\t\treturn source !== null;\n\t\t}) as HTMLElement[];\n\n\t\t// Ensure we have enough child overlays\n\t\twhile (this.childrenOverlays.length < children.length) {\n\t\t\tthis.childrenOverlays.push(this.createChildOverlay());\n\t\t}\n\n\t\t// Show overlay for each child\n\t\tchildren.forEach((child, index) => {\n\t\t\tconst overlay = this.childrenOverlays[index];\n\t\t\tif (overlay) {\n\t\t\t\tthis.updateOverlayPosition(overlay, child);\n\t\t\t\toverlay.style.display = \"block\";\n\t\t\t}\n\t\t});\n\n\t\t// Hide unused child overlays\n\t\tfor (let i = children.length; i < this.childrenOverlays.length; i++) {\n\t\t\tconst overlay = this.childrenOverlays[i];\n\t\t\tif (overlay) {\n\t\t\t\toverlay.style.display = \"none\";\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate hideChildrenOverlays() {\n\t\tfor (const overlay of this.childrenOverlays) {\n\t\t\toverlay.style.display = \"none\";\n\t\t}\n\t}\n\n\tprivate currentSelectionIndex = 0;\n\tprivate lastClickTime = 0;\n\tprivate lastClickPosition = { x: 0, y: 0 };\n\n\tprivate handleClick = (e: MouseEvent) => {\n\t\tif (!this.isEnabled) return;\n\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\n\t\tif (!this.hoveredElement) return;\n\n\t\tconst now = Date.now();\n\t\tconst timeSinceLastClick = now - this.lastClickTime;\n\t\tconst distanceMoved = Math.hypot(\n\t\t\te.clientX - this.lastClickPosition.x,\n\t\t\te.clientY - this.lastClickPosition.y,\n\t\t);\n\n\t\t// Get all elements at click point for cycling\n\t\tconst elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);\n\t\tconst selectableElements = elementsAtPoint.filter((el) => {\n\t\t\tif (\n\t\t\t\tel.classList.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\tel.classList.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// Must have React Fiber source location\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\treturn source !== null;\n\t\t}) as HTMLElement[];\n\n\t\t// Cycle through nested elements on repeated clicks\n\t\tif (\n\t\t\ttimeSinceLastClick < 1000 &&\n\t\t\tdistanceMoved < 10 &&\n\t\t\tselectableElements.length > 1\n\t\t) {\n\t\t\tthis.currentSelectionIndex =\n\t\t\t\t(this.currentSelectionIndex + 1) % selectableElements.length;\n\t\t} else {\n\t\t\tthis.currentSelectionIndex = 0;\n\t\t}\n\n\t\tconst target = selectableElements[this.currentSelectionIndex];\n\t\tif (!target) return; // Type guard for noUncheckedIndexedAccess\n\n\t\t// Get source location\n\t\tconst source = this.getReactFiberSource(target);\n\t\tif (!source) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Update selected element marker\n\t\tif (this.selectedElement) {\n\t\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\t}\n\n\t\tthis.selectedElement = target;\n\t\tthis.selectedElement.setAttribute(\"data-fb-selected\", \"true\");\n\n\t\t// Update selection overlay and tag\n\t\tthis.updateOverlayPosition(this.selectionOverlay, target);\n\t\tthis.selectionOverlay.style.display = \"block\";\n\n\t\tthis.updateTagLabel(target);\n\t\tthis.selectionTagLabel.style.display = \"block\";\n\n\t\t// Send selection data to parent\n\t\tthis.sendElementData(target, source);\n\n\t\t// Update last click info\n\t\tthis.lastClickTime = now;\n\t\tthis.lastClickPosition = { x: e.clientX, y: e.clientY };\n\t};\n\n\tprivate updateOverlayPosition(overlay: HTMLDivElement, element: HTMLElement) {\n\t\tconst rect = element.getBoundingClientRect();\n\t\tObject.assign(overlay.style, {\n\t\t\ttop: `${rect.top + window.scrollY}px`,\n\t\t\tleft: `${rect.left + window.scrollX}px`,\n\t\t\twidth: `${rect.width}px`,\n\t\t\theight: `${rect.height}px`,\n\t\t});\n\t}\n\n\tprivate updateTagLabel(element: HTMLElement) {\n\t\tconst rect = element.getBoundingClientRect();\n\t\tconst tagName = element.tagName.toLowerCase();\n\n\t\tthis.selectionTagLabel.textContent = tagName;\n\t\tObject.assign(this.selectionTagLabel.style, {\n\t\t\ttop: `${rect.top + window.scrollY}px`,\n\t\t\tleft: `${rect.left + window.scrollX}px`,\n\t\t});\n\t}\n\n\tprivate getRelevantStyles(element: HTMLElement): Record<string, string> {\n\t\tconst computed = window.getComputedStyle(element);\n\t\tconst relevantProps = [\n\t\t\t\"display\",\n\t\t\t\"position\",\n\t\t\t\"width\",\n\t\t\t\"height\",\n\t\t\t\"padding\",\n\t\t\t\"margin\",\n\t\t\t\"backgroundColor\",\n\t\t\t\"color\",\n\t\t\t\"fontSize\",\n\t\t\t\"fontFamily\",\n\t\t];\n\n\t\tconst styles: Record<string, string> = {};\n\t\tfor (const prop of relevantProps) {\n\t\t\tstyles[prop] = computed.getPropertyValue(prop);\n\t\t}\n\t\treturn styles;\n\t}\n\n\t/**\n\t * Extract direct text content from DOM (not from nested children)\n\t */\n\tprivate getDirectTextContent(element: HTMLElement): string | null {\n\t\tconst directTextNodes = Array.from(element.childNodes)\n\t\t\t.filter((node) => node.nodeType === Node.TEXT_NODE)\n\t\t\t.map((node) => node.textContent?.trim())\n\t\t\t.filter(Boolean);\n\n\t\treturn directTextNodes.length > 0 ? directTextNodes.join(\" \") : null;\n\t}\n\n\tprivate sendElementData(element: HTMLElement, source: SourceLocation) {\n\t\tconst directText = this.getDirectTextContent(element);\n\n\t\tconst data: ElementSelectedMessage = {\n\t\t\ttype: \"FB_ELEMENT_SELECTED\",\n\t\t\tdata: {\n\t\t\t\t// Source location from React Fiber\n\t\t\t\tsourceFile: source.fileName,\n\t\t\t\tsourceLine: source.lineNumber,\n\t\t\t\tsourceColumn: source.columnNumber,\n\n\t\t\t\t// DOM properties\n\t\t\t\ttagName: element.tagName,\n\t\t\t\tclassName: element.className,\n\t\t\t\ttextContent: directText,\n\t\t\t\tsrc: element.getAttribute(\"src\") || undefined,\n\t\t\t\talt: element.getAttribute(\"alt\") || undefined,\n\t\t\t\thref: element.getAttribute(\"href\") || undefined,\n\t\t\t\ttarget: element.getAttribute(\"target\") || undefined,\n\t\t\t\trel: element.getAttribute(\"rel\") || undefined,\n\t\t\t\tcomputedStyles: this.getRelevantStyles(element),\n\t\t\t},\n\t\t};\n\n\t\t// Send to parent window\n\t\twindow.parent.postMessage(data, \"*\");\n\t}\n\n\t/**\n\t * Handle request to get all elements' current state\n\t * Used for computing diffs on save (Lovable's approach)\n\t */\n\tprivate handleGetAllElementsState() {\n\t\tconst allElements = document.querySelectorAll(\"*\");\n\t\tconst elementsState: Array<{\n\t\t\tsourceFile: string;\n\t\t\tsourceLine: number;\n\t\t\tsourceColumn: number;\n\t\t\tclassName: string;\n\t\t\ttextContent: string | null;\n\t\t\tsrc?: string;\n\t\t\talt?: string;\n\t\t\thref?: string;\n\t\t\ttarget?: string;\n\t\t\trel?: string;\n\t\t}> = [];\n\n\t\tfor (const el of allElements) {\n\t\t\t// Skip our own overlays\n\t\t\tif (\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (!source) continue;\n\n\t\t\tconst element = el as HTMLElement;\n\n\t\t\t// Check if this is an Image component wrapper with an <img> child\n\t\t\tlet actualElement = element;\n\t\t\tif (element.tagName !== \"IMG\") {\n\t\t\t\tconst imgChild = element.querySelector(\"img\");\n\t\t\t\tif (imgChild) {\n\t\t\t\t\tactualElement = imgChild as HTMLElement;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst textContent = this.getDirectTextContent(element);\n\n\t\t\t// Get className as string - handle SVG elements which have className as SVGAnimatedString\n\t\t\tlet className = \"\";\n\t\t\tif (element.className) {\n\t\t\t\t// For SVG elements, className is SVGAnimatedString with .baseVal property\n\t\t\t\tif (typeof element.className === \"string\") {\n\t\t\t\t\tclassName = element.className;\n\t\t\t\t} else if (\"baseVal\" in element.className) {\n\t\t\t\t\tclassName = (element.className as { baseVal: string }).baseVal;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\telementsState.push({\n\t\t\t\tsourceFile: source.fileName,\n\t\t\t\tsourceLine: source.lineNumber,\n\t\t\t\tsourceColumn: source.columnNumber,\n\t\t\t\tclassName,\n\t\t\t\ttextContent,\n\t\t\t\tsrc: actualElement.getAttribute(\"src\") || undefined,\n\t\t\t\talt: actualElement.getAttribute(\"alt\") || undefined,\n\t\t\t\thref: element.getAttribute(\"href\") || undefined,\n\t\t\t\ttarget: element.getAttribute(\"target\") || undefined,\n\t\t\t\trel: element.getAttribute(\"rel\") || undefined,\n\t\t\t});\n\t\t}\n\n\t\t// Send back to parent\n\t\twindow.parent.postMessage(\n\t\t\t{\n\t\t\t\ttype: \"FB_ALL_ELEMENTS_STATE\",\n\t\t\t\tdata: elementsState,\n\t\t\t},\n\t\t\t\"*\",\n\t\t);\n\t}\n\n\t/**\n\t * Handle optimistic element updates from parent window\n\t * Uses React Fiber source to find the correct element\n\t */\n\tprivate handleUpdateElement(message: DesignModeMessage) {\n\t\tconst { sourceFile, sourceLine, sourceColumn, updates } = message;\n\n\t\tif (!sourceFile || !sourceLine || !updates) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Find element by matching React Fiber source\n\t\tconst allElements = document.querySelectorAll(\"*\");\n\n\t\tfor (const el of allElements) {\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (\n\t\t\t\tsource?.fileName === sourceFile &&\n\t\t\t\tsource?.lineNumber === sourceLine &&\n\t\t\t\tsource?.columnNumber === sourceColumn\n\t\t\t) {\n\t\t\t\tlet element = el as HTMLElement;\n\n\t\t\t\t// Special case: if we're updating image properties (src/alt) but found a container,\n\t\t\t\t// look for an <img> child element\n\t\t\t\tif (\n\t\t\t\t\t(updates.src !== undefined || updates.alt !== undefined) &&\n\t\t\t\t\telement.tagName !== \"IMG\"\n\t\t\t\t) {\n\t\t\t\t\tconst imgChild = element.querySelector(\"img\");\n\t\t\t\t\tif (imgChild) {\n\t\t\t\t\t\telement = imgChild as HTMLElement;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Apply optimistic updates\n\t\t\t\tif (updates.className !== undefined) {\n\t\t\t\t\t// Apply the className - Tailwind v4 Browser CDN will auto-generate CSS\n\t\t\t\t\telement.className = updates.className;\n\t\t\t\t}\n\n\t\t\t\tif (updates.textContent !== undefined) {\n\t\t\t\t\t// Only update first text node to preserve child elements\n\t\t\t\t\tconst textNode = Array.from(element.childNodes).find(\n\t\t\t\t\t\t(node) => node.nodeType === Node.TEXT_NODE,\n\t\t\t\t\t);\n\t\t\t\t\tif (textNode) {\n\t\t\t\t\t\ttextNode.textContent = updates.textContent;\n\t\t\t\t\t} else {\n\t\t\t\t\t\telement.textContent = updates.textContent;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (updates.src !== undefined && \"src\" in element) {\n\t\t\t\t\t// Use setAttribute to force browser reload, bypassing React's state management\n\t\t\t\t\telement.setAttribute(\"src\", updates.src);\n\t\t\t\t\t// Also update srcset to prevent fallback\n\t\t\t\t\tif (element.hasAttribute(\"srcset\")) {\n\t\t\t\t\t\telement.removeAttribute(\"srcset\");\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (updates.alt !== undefined && \"alt\" in element) {\n\t\t\t\t\t(element as HTMLImageElement).alt = updates.alt;\n\t\t\t\t}\n\n\t\t\t\tif (updates.href !== undefined && \"href\" in element) {\n\t\t\t\t\telement.setAttribute(\"href\", updates.href);\n\t\t\t\t}\n\n\t\t\t\tif (updates.target !== undefined && \"target\" in element) {\n\t\t\t\t\telement.setAttribute(\"target\", updates.target);\n\t\t\t\t}\n\n\t\t\t\tif (updates.rel !== undefined && \"rel\" in element) {\n\t\t\t\t\telement.setAttribute(\"rel\", updates.rel);\n\t\t\t\t}\n\n\t\t\t\t// Update overlays if this is the hovered or selected element\n\t\t\t\tif (element === this.hoveredElement) {\n\t\t\t\t\tthis.updateOverlayPosition(this.hoverOverlay, element);\n\t\t\t\t}\n\t\t\t\tif (element === this.selectedElement) {\n\t\t\t\t\tthis.updateOverlayPosition(this.selectionOverlay, element);\n\t\t\t\t\tthis.updateTagLabel(element);\n\t\t\t\t}\n\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Handle theme update from parent window\n\t * Apply CSS variables using a style tag (NOT inline styles) to maintain proper CSS cascade\n\t * Note: We don't change the dark class - that's controlled by the native theme switcher\n\t */\n\tprivate handleUpdateTheme(theme?: {\n\t\tlightVariables?: Record<string, string>;\n\t\tdarkVariables?: Record<string, string>;\n\t}) {\n\t\tif (!theme) return;\n\n\t\t// Find or create the style element for design mode theme overrides\n\t\tlet styleEl = document.getElementById(\n\t\t\t\"fb-design-mode-theme\",\n\t\t) as HTMLStyleElement;\n\t\tif (!styleEl) {\n\t\t\tstyleEl = document.createElement(\"style\");\n\t\t\tstyleEl.id = \"fb-design-mode-theme\";\n\t\t\tdocument.head.appendChild(styleEl);\n\t\t}\n\n\t\t// Build CSS with both light and dark theme variables\n\t\tlet css = \"\";\n\n\t\t// Light theme variables in :root (includes colors, fonts, radius)\n\t\tif (theme.lightVariables && Object.keys(theme.lightVariables).length > 0) {\n\t\t\tcss += \":root {\\n\";\n\t\t\tfor (const [key, value] of Object.entries(theme.lightVariables)) {\n\t\t\t\tcss += `  ${key}: ${value};\\n`;\n\t\t\t}\n\t\t\tcss += \"}\\n\\n\";\n\t\t}\n\n\t\t// Dark theme variables in .dark (only colors, not fonts/radius)\n\t\tif (theme.darkVariables && Object.keys(theme.darkVariables).length > 0) {\n\t\t\tcss += \".dark {\\n\";\n\t\t\tfor (const [key, value] of Object.entries(theme.darkVariables)) {\n\t\t\t\tcss += `  ${key}: ${value};\\n`;\n\t\t\t}\n\t\t\tcss += \"}\\n\";\n\t\t}\n\n\t\t// Apply the CSS\n\t\tstyleEl.textContent = css;\n\t}\n}\n\n// Initialize when script loads - only in browser environment\n// Tailwind Play CDN handles all CSS generation automatically\nif (typeof window !== \"undefined\" && typeof document !== \"undefined\") {\n\tnew DesignModeOverlay();\n}\n"]}
+{"version":3,"sources":["../src/overlay.ts"],"names":["loadedFonts","loadGoogleFontInIframe","fontValue","cleanFont","sf","fontUrl","link","DesignModeOverlay","border","zIndex","overlay","label","children","child","index","data","allElements","el","source","element","currentElement","depth","relativePath","line","column","node","selectableElements","topElement","parent","i","now","timeSinceLastClick","distanceMoved","target","rect","tagName","computed","relevantProps","styles","prop","directTextNodes","directText","elementsState","actualElement","imgChild","textContent","className","message","sourceFile","sourceLine","sourceColumn","updates","textNode","theme","styleEl","css","key","value"],"mappings":"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","file":"overlay.mjs","sourcesContent":["/**\n * Design Mode Overlay Script\n * Injected into the preview iframe to enable element selection\n *\n * Uses React Fiber's _debugSource to track element source locations at runtime.\n * No build-time tagging required - everything is resolved from React's internal data.\n *\n * Runtime CSS generation is handled by Tailwind v4 Browser CDN.\n */\n\nimport type {\n\tDesignModeMessage,\n\tElementSelectedMessage,\n\tSourceLocation,\n} from \"./types\";\n\n// Type for React Fiber internal structure\ninterface ReactFiber {\n\t_debugSource?: {\n\t\tfileName: string;\n\t\tlineNumber: number;\n\t\tcolumnNumber?: number;\n\t};\n\ttype?: string | { displayName?: string; name?: string };\n\treturn?: ReactFiber;\n}\n\n// Type for HTMLElement with React Fiber attached\ninterface HTMLElementWithFiber extends HTMLElement {\n\t[key: string]: unknown;\n}\n\n// Track loaded fonts to avoid duplicate loads\nconst loadedFonts = new Set<string>();\n\n/**\n * Load Google Font in the iframe\n * Dynamically injects font <link> tag into iframe head\n */\nfunction loadGoogleFontInIframe(fontValue: string): void {\n\tconsole.log(\"[DesignMode Font] Attempting to load font:\", fontValue);\n\n\t// Extract clean font name from CSS value (remove quotes and fallbacks)\n\tconst cleanFont = fontValue.replace(/['\"]/g, \"\").split(\",\")[0]?.trim();\n\tif (!cleanFont) {\n\t\tconsole.log(\"[DesignMode Font] No font name found in value:\", fontValue);\n\t\treturn;\n\t}\n\n\tconsole.log(\"[DesignMode Font] Clean font name:\", cleanFont);\n\n\t// Skip if already loaded\n\tif (loadedFonts.has(cleanFont)) {\n\t\tconsole.log(\"[DesignMode Font] Font already loaded:\", cleanFont);\n\t\treturn;\n\t}\n\n\t// System fonts don't need to be loaded\n\tconst systemFonts = [\n\t\t\"Arial\",\n\t\t\"Helvetica\",\n\t\t\"Helvetica Neue\",\n\t\t\"Segoe UI\",\n\t\t\"San Francisco\",\n\t\t\"system-ui\",\n\t\t\"sans-serif\",\n\t\t\"Times New Roman\",\n\t\t\"Georgia\",\n\t\t\"Times\",\n\t\t\"serif\",\n\t\t\"Monaco\",\n\t\t\"Consolas\",\n\t\t\"SF Mono\",\n\t\t\"Menlo\",\n\t\t\"Courier New\",\n\t\t\"Courier\",\n\t\t\"monospace\",\n\t];\n\tif (systemFonts.some((sf) => cleanFont.includes(sf))) {\n\t\tconsole.log(\"[DesignMode Font] Skipping system font:\", cleanFont);\n\t\treturn;\n\t}\n\n\t// Build Google Fonts URL\n\tconst fontUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(cleanFont.replace(/\\s+/g, \"+\"))}:wght@400;500;600&display=swap`;\n\tconsole.log(\"[DesignMode Font] Google Fonts URL:\", fontUrl);\n\n\t// Check if already in DOM\n\tconst existingLink = document.querySelector(`link[href=\"${fontUrl}\"]`);\n\tif (existingLink) {\n\t\tconsole.log(\"[DesignMode Font] Font link already in DOM:\", cleanFont);\n\t\tloadedFonts.add(cleanFont);\n\t\treturn;\n\t}\n\n\t// Create and inject <link> tag\n\tconst link = document.createElement(\"link\");\n\tlink.rel = \"stylesheet\";\n\tlink.href = fontUrl;\n\tlink.onload = () => {\n\t\tconsole.log(\"[DesignMode Font] ✅ Font loaded successfully:\", cleanFont);\n\t\tloadedFonts.add(cleanFont);\n\t};\n\tlink.onerror = () => {\n\t\tconsole.error(\"[DesignMode Font] ❌ Failed to load font:\", cleanFont, fontUrl);\n\t};\n\tdocument.head.appendChild(link);\n\tconsole.log(\"[DesignMode Font] Font link injected into DOM:\", cleanFont);\n}\n\nclass DesignModeOverlay {\n\tprivate isEnabled = false;\n\tprivate selectedElement: HTMLElement | null = null;\n\tprivate hoveredElement: HTMLElement | null = null;\n\n\t// Separate overlays for different states\n\tprivate hoverOverlay: HTMLDivElement;\n\tprivate selectionOverlay: HTMLDivElement;\n\tprivate selectionTagLabel: HTMLDivElement;\n\tprivate childrenOverlays: HTMLDivElement[] = [];\n\tprivate resizeObserver: ResizeObserver | null = null;\n\n\tconstructor() {\n\t\tconsole.log('[DesignMode] Constructor called - initializing overlay');\n\n\t\t// Create persistent overlay elements\n\t\tthis.hoverOverlay = this.createOverlay(\"2px solid #3b82f6\", 999991);\n\t\tthis.selectionOverlay = this.createOverlay(\"1px solid #3b82f6\", 999990);\n\t\tthis.selectionTagLabel = this.createTagLabel();\n\n\t\tconsole.log('[DesignMode] Overlays created');\n\t\tconsole.log('[DesignMode] Hover overlay:', this.hoverOverlay);\n\n\t\tthis.listen();\n\t\tthis.setupResizeObserver();\n\n\t\tconsole.log('[DesignMode] Initialization complete');\n\t}\n\n\tprivate createOverlay(border: string, zIndex: number): HTMLDivElement {\n\t\tconst overlay = document.createElement(\"div\");\n\t\toverlay.className = \"fb-design-mode-overlay\";\n\t\tObject.assign(overlay.style, {\n\t\t\tposition: \"absolute\",\n\t\t\tborder,\n\t\t\tpointerEvents: \"none\",\n\t\t\tzIndex: String(zIndex),\n\t\t\tdisplay: \"none\",\n\t\t\tboxShadow: \"0 0 0 1px rgba(59, 130, 246, 0.2)\",\n\t\t\ttransition: \"all 0.1s ease-out\",\n\t\t});\n\t\tdocument.body.appendChild(overlay);\n\t\treturn overlay;\n\t}\n\n\tprivate createChildOverlay(): HTMLDivElement {\n\t\tconst overlay = document.createElement(\"div\");\n\t\toverlay.className = \"fb-design-mode-overlay fb-child-overlay\";\n\t\tObject.assign(overlay.style, {\n\t\t\tposition: \"absolute\",\n\t\t\tborder: \"1px dashed rgba(59, 130, 246, 0.4)\",\n\t\t\tpointerEvents: \"none\",\n\t\t\tzIndex: \"999989\",\n\t\t\tdisplay: \"none\",\n\t\t\tboxShadow: \"0 0 0 1px rgba(59, 130, 246, 0.1)\",\n\t\t\ttransition: \"all 0.1s ease-out\",\n\t\t});\n\t\tdocument.body.appendChild(overlay);\n\t\treturn overlay;\n\t}\n\n\tprivate createTagLabel(): HTMLDivElement {\n\t\tconst label = document.createElement(\"div\");\n\t\tlabel.className = \"fb-design-mode-tag\";\n\t\tObject.assign(label.style, {\n\t\t\tposition: \"absolute\",\n\t\t\tbackground: \"#3b82f6\",\n\t\t\tcolor: \"white\",\n\t\t\tpadding: \"2px 6px\",\n\t\t\tfontSize: \"11px\",\n\t\t\tfontFamily: \"monospace\",\n\t\t\tfontWeight: \"500\",\n\t\t\tborderRadius: \"0 0 4px 0\",\n\t\t\tpointerEvents: \"none\",\n\t\t\tzIndex: \"999999\",\n\t\t\tdisplay: \"none\",\n\t\t});\n\t\tdocument.body.appendChild(label);\n\t\treturn label;\n\t}\n\n\tprivate listen() {\n\t\twindow.addEventListener(\"message\", (e: MessageEvent<DesignModeMessage>) => {\n\t\t\tif (e.data.type === \"ENABLE_DESIGN_MODE\") {\n\t\t\t\tthis.enable();\n\t\t\t} else if (e.data.type === \"DISABLE_DESIGN_MODE\") {\n\t\t\t\tthis.disable();\n\t\t\t} else if (e.data.type === \"FB_UPDATE_ELEMENT\") {\n\t\t\t\tthis.handleUpdateElement(e.data);\n\t\t\t} else if (e.data.type === \"FB_GET_ALL_ELEMENTS_STATE\") {\n\t\t\t\tthis.handleGetAllElementsState();\n\t\t\t} else if (e.data.type === \"FB_UPDATE_THEME\") {\n\t\t\t\tthis.handleUpdateTheme(e.data.theme);\n\t\t\t} else if (e.data.type === \"FB_DESELECT_ELEMENT\") {\n\t\t\t\tthis.deselectElement();\n\t\t\t} else if (e.data.type === \"FB_SELECT_ELEMENT\") {\n\t\t\t\tthis.handleSelectElement(e.data);\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate setupResizeObserver() {\n\t\t// Listen for window resize and scroll events\n\t\twindow.addEventListener(\"resize\", this.updateOverlayPositions);\n\t\twindow.addEventListener(\"scroll\", this.updateOverlayPositions, true);\n\n\t\t// Use ResizeObserver to detect when elements change size\n\t\tthis.resizeObserver = new ResizeObserver(() => {\n\t\t\tthis.updateOverlayPositions();\n\t\t});\n\n\t\t// Observe the document body for any size changes\n\t\tthis.resizeObserver.observe(document.body);\n\t}\n\n\tprivate updateOverlayPositions = () => {\n\t\t// Update selected element overlay\n\t\tif (\n\t\t\tthis.selectedElement &&\n\t\t\tthis.selectionOverlay.style.display !== \"none\"\n\t\t) {\n\t\t\tthis.updateOverlayPosition(this.selectionOverlay, this.selectedElement);\n\t\t\tthis.updateTagLabel(this.selectedElement);\n\t\t}\n\n\t\t// Update hovered element overlay\n\t\tif (this.hoveredElement && this.hoverOverlay.style.display !== \"none\") {\n\t\t\tthis.updateOverlayPosition(this.hoverOverlay, this.hoveredElement);\n\t\t}\n\n\t\t// Update children overlays\n\t\tfor (const overlay of this.childrenOverlays) {\n\t\t\tif (overlay.style.display !== \"none\" && this.hoveredElement) {\n\t\t\t\t// Find the corresponding child element\n\t\t\t\tconst children = Array.from(this.hoveredElement.children).filter(\n\t\t\t\t\t(child) => {\n\t\t\t\t\t\tconst source = this.getReactFiberSource(child as HTMLElement);\n\t\t\t\t\t\treturn source !== null;\n\t\t\t\t\t},\n\t\t\t\t) as HTMLElement[];\n\n\t\t\t\tconst index = this.childrenOverlays.indexOf(overlay);\n\t\t\t\tconst child = children[index];\n\t\t\t\tif (child) {\n\t\t\t\t\tthis.updateOverlayPosition(overlay, child);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tenable() {\n\t\tif (this.isEnabled) return;\n\t\tthis.isEnabled = true;\n\n\t\tconsole.log('[DesignMode] Overlay enabled');\n\t\tconsole.log('[DesignMode] Hover overlay:', this.hoverOverlay);\n\t\tconsole.log('[DesignMode] Hover overlay styles:', {\n\t\t\tdisplay: this.hoverOverlay.style.display,\n\t\t\tposition: this.hoverOverlay.style.position,\n\t\t\tborder: this.hoverOverlay.style.border,\n\t\t\tzIndex: this.hoverOverlay.style.zIndex\n\t\t});\n\n\t\tdocument.addEventListener(\"mousemove\", this.handleMouseMove);\n\t\tdocument.addEventListener(\"click\", this.handleClick, true);\n\t\tdocument.addEventListener(\"mouseleave\", this.handleMouseLeave);\n\n\t\t// Add cursor style\n\t\tdocument.body.style.cursor = \"crosshair\";\n\t}\n\n\tdisable() {\n\t\tif (!this.isEnabled) return;\n\t\tthis.isEnabled = false;\n\n\t\tdocument.removeEventListener(\"mousemove\", this.handleMouseMove);\n\t\tdocument.removeEventListener(\"click\", this.handleClick, true);\n\t\tdocument.removeEventListener(\"mouseleave\", this.handleMouseLeave);\n\n\t\t// Hide all overlays\n\t\tthis.hoverOverlay.style.display = \"none\";\n\t\tthis.selectionOverlay.style.display = \"none\";\n\t\tthis.selectionTagLabel.style.display = \"none\";\n\t\tthis.hideChildrenOverlays();\n\n\t\t// Remove runtime markers\n\t\tif (this.selectedElement) {\n\t\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\t}\n\t\tif (this.hoveredElement) {\n\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t}\n\n\t\tdocument.body.style.cursor = \"\";\n\t\tthis.selectedElement = null;\n\t\tthis.hoveredElement = null;\n\t}\n\n\t/**\n\t * Deselect the currently selected element\n\t * Keeps design mode active but clears the selection\n\t */\n\tdeselectElement() {\n\t\tif (!this.selectedElement) return;\n\n\t\t// Remove selection marker\n\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\tthis.selectedElement = null;\n\n\t\t// Hide selection overlay and tag\n\t\tthis.selectionOverlay.style.display = \"none\";\n\t\tthis.selectionTagLabel.style.display = \"none\";\n\t}\n\n\t/**\n\t * Programmatically select an element by its source location\n\t * Used when restoring selection after page reload\n\t */\n\tprivate handleSelectElement(data: DesignModeMessage) {\n\t\tif (\n\t\t\t!data.sourceFile ||\n\t\t\t!data.sourceLine ||\n\t\t\tdata.sourceColumn === undefined\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Find element by source location\n\t\tconst allElements = document.querySelectorAll(\"*\");\n\t\tfor (const el of allElements) {\n\t\t\t// Skip our own overlays\n\t\t\tif (\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (\n\t\t\t\tsource &&\n\t\t\t\tsource.fileName === data.sourceFile &&\n\t\t\t\tsource.lineNumber === data.sourceLine &&\n\t\t\t\tsource.columnNumber === data.sourceColumn\n\t\t\t) {\n\t\t\t\tconst element = el as HTMLElement;\n\n\t\t\t\t// Update selected element marker\n\t\t\t\tif (this.selectedElement) {\n\t\t\t\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\t\t\t}\n\n\t\t\t\tthis.selectedElement = element;\n\t\t\t\tthis.selectedElement.setAttribute(\"data-fb-selected\", \"true\");\n\n\t\t\t\t// Update selection overlay and tag\n\t\t\t\tthis.updateOverlayPosition(this.selectionOverlay, element);\n\t\t\t\tthis.selectionOverlay.style.display = \"block\";\n\n\t\t\t\tthis.updateTagLabel(element);\n\t\t\t\tthis.selectionTagLabel.style.display = \"block\";\n\n\t\t\t\t// Send selection data to parent\n\t\t\t\tthis.sendElementData(element, source);\n\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Extract source location from babel plugin attributes\n\t * Attributes: data-inspector-relative-path, data-inspector-line, data-inspector-column\n\t */\n\tprivate getReactFiberSource(element: HTMLElement): SourceLocation | null {\n\t\t// Check current element and up to 5 parent elements\n\t\tlet currentElement: HTMLElement | null = element;\n\t\tlet depth = 0;\n\n\t\twhile (currentElement && depth < 5) {\n\t\t\tconst relativePath = currentElement.getAttribute(\"data-inspector-relative-path\");\n\t\t\tconst line = currentElement.getAttribute(\"data-inspector-line\");\n\t\t\tconst column = currentElement.getAttribute(\"data-inspector-column\");\n\n\t\t\tif (relativePath && line && column) {\n\t\t\t\treturn {\n\t\t\t\t\tfileName: relativePath,\n\t\t\t\t\tlineNumber: Number.parseInt(line, 10),\n\t\t\t\t\tcolumnNumber: Number.parseInt(column, 10),\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tcurrentElement = currentElement.parentElement;\n\t\t\tdepth++;\n\t\t}\n\n\t\treturn null;\n\t}\n\n\tprivate isContainer(element: HTMLElement): boolean {\n\t\tconst containerTags = [\n\t\t\t\"div\",\n\t\t\t\"section\",\n\t\t\t\"header\",\n\t\t\t\"footer\",\n\t\t\t\"main\",\n\t\t\t\"aside\",\n\t\t\t\"nav\",\n\t\t\t\"article\",\n\t\t\t\"ul\",\n\t\t\t\"ol\",\n\t\t\t\"li\",\n\t\t];\n\t\treturn containerTags.includes(element.tagName.toLowerCase());\n\t}\n\n\tprivate hasDirectTextContent(element: HTMLElement): boolean {\n\t\treturn Array.from(element.childNodes).some(\n\t\t\t(node) => node.nodeType === Node.TEXT_NODE && node.textContent?.trim(),\n\t\t);\n\t}\n\n\tprivate handleMouseLeave = () => {\n\t\tif (!this.isEnabled) return;\n\n\t\t// Hide hover overlay when mouse leaves the document\n\t\tif (this.hoveredElement) {\n\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t}\n\t\tthis.hoveredElement = null;\n\t\tthis.hoverOverlay.style.display = \"none\";\n\t\tthis.hideChildrenOverlays();\n\t};\n\n\tprivate handleMouseMove = (e: MouseEvent) => {\n\t\tif (!this.isEnabled) return;\n\n\t\t// Get all elements at this point\n\t\tconst elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);\n\n\t\t// Filter to only elements with React Fiber source, excluding overlays\n\t\tconst selectableElements = elementsAtPoint.filter((el) => {\n\t\t\tif (\n\t\t\t\tel.classList.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\tel.classList.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// Must have React Fiber source location\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (source === null) {\n\t\t\t\t// Debug: log elements without fiber\n\t\t\t\tconsole.log('[DesignMode] Element without React Fiber:', el.tagName, el.className);\n\t\t\t}\n\t\t\treturn source !== null;\n\t\t}) as HTMLElement[];\n\n\t\tconsole.log('[DesignMode] Mouse move - selectable elements:', selectableElements.length);\n\n\t\tif (selectableElements.length === 0) {\n\t\t\tif (this.hoveredElement) {\n\t\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t\t}\n\t\t\tthis.hoveredElement = null;\n\t\t\tthis.hoverOverlay.style.display = \"none\";\n\t\t\tthis.hideChildrenOverlays();\n\t\t\treturn;\n\t\t}\n\n\t\t// Get topmost element (first in array)\n\t\tconst topElement = selectableElements[0];\n\t\tif (!topElement) return; // Type guard for noUncheckedIndexedAccess\n\n\t\t// Don't show hover overlay if this is the selected element\n\t\tif (topElement === this.selectedElement) {\n\t\t\tthis.hoverOverlay.style.display = \"none\";\n\t\t\tthis.hideChildrenOverlays();\n\t\t\treturn;\n\t\t}\n\n\t\t// Update hovered element\n\t\tif (this.hoveredElement && this.hoveredElement !== topElement) {\n\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t}\n\n\t\tthis.hoveredElement = topElement;\n\t\tthis.hoveredElement.setAttribute(\"data-fb-hovered\", \"true\");\n\n\t\t// Show hover overlay\n\t\tthis.updateOverlayPosition(this.hoverOverlay, topElement);\n\t\tthis.hoverOverlay.style.display = \"block\";\n\n\t\t// Show children overlays if this is a container without direct text\n\t\tif (\n\t\t\tthis.isContainer(topElement) &&\n\t\t\t!this.hasDirectTextContent(topElement)\n\t\t) {\n\t\t\tthis.showChildrenOverlays(topElement);\n\t\t} else {\n\t\t\tthis.hideChildrenOverlays();\n\t\t}\n\t};\n\n\tprivate showChildrenOverlays(parent: HTMLElement) {\n\t\t// Get direct children with React Fiber source\n\t\tconst children = Array.from(parent.children).filter((child) => {\n\t\t\tconst source = this.getReactFiberSource(child as HTMLElement);\n\t\t\treturn source !== null;\n\t\t}) as HTMLElement[];\n\n\t\t// Ensure we have enough child overlays\n\t\twhile (this.childrenOverlays.length < children.length) {\n\t\t\tthis.childrenOverlays.push(this.createChildOverlay());\n\t\t}\n\n\t\t// Show overlay for each child\n\t\tchildren.forEach((child, index) => {\n\t\t\tconst overlay = this.childrenOverlays[index];\n\t\t\tif (overlay) {\n\t\t\t\tthis.updateOverlayPosition(overlay, child);\n\t\t\t\toverlay.style.display = \"block\";\n\t\t\t}\n\t\t});\n\n\t\t// Hide unused child overlays\n\t\tfor (let i = children.length; i < this.childrenOverlays.length; i++) {\n\t\t\tconst overlay = this.childrenOverlays[i];\n\t\t\tif (overlay) {\n\t\t\t\toverlay.style.display = \"none\";\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate hideChildrenOverlays() {\n\t\tfor (const overlay of this.childrenOverlays) {\n\t\t\toverlay.style.display = \"none\";\n\t\t}\n\t}\n\n\tprivate currentSelectionIndex = 0;\n\tprivate lastClickTime = 0;\n\tprivate lastClickPosition = { x: 0, y: 0 };\n\n\tprivate handleClick = (e: MouseEvent) => {\n\t\tif (!this.isEnabled) return;\n\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\n\t\tif (!this.hoveredElement) return;\n\n\t\tconst now = Date.now();\n\t\tconst timeSinceLastClick = now - this.lastClickTime;\n\t\tconst distanceMoved = Math.hypot(\n\t\t\te.clientX - this.lastClickPosition.x,\n\t\t\te.clientY - this.lastClickPosition.y,\n\t\t);\n\n\t\t// Get all elements at click point for cycling\n\t\tconst elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);\n\t\tconst selectableElements = elementsAtPoint.filter((el) => {\n\t\t\tif (\n\t\t\t\tel.classList.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\tel.classList.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// Must have React Fiber source location\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\treturn source !== null;\n\t\t}) as HTMLElement[];\n\n\t\t// Cycle through nested elements on repeated clicks\n\t\tif (\n\t\t\ttimeSinceLastClick < 1000 &&\n\t\t\tdistanceMoved < 10 &&\n\t\t\tselectableElements.length > 1\n\t\t) {\n\t\t\tthis.currentSelectionIndex =\n\t\t\t\t(this.currentSelectionIndex + 1) % selectableElements.length;\n\t\t} else {\n\t\t\tthis.currentSelectionIndex = 0;\n\t\t}\n\n\t\tconst target = selectableElements[this.currentSelectionIndex];\n\t\tif (!target) return; // Type guard for noUncheckedIndexedAccess\n\n\t\t// Get source location\n\t\tconst source = this.getReactFiberSource(target);\n\t\tif (!source) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Update selected element marker\n\t\tif (this.selectedElement) {\n\t\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\t}\n\n\t\tthis.selectedElement = target;\n\t\tthis.selectedElement.setAttribute(\"data-fb-selected\", \"true\");\n\n\t\t// Update selection overlay and tag\n\t\tthis.updateOverlayPosition(this.selectionOverlay, target);\n\t\tthis.selectionOverlay.style.display = \"block\";\n\n\t\tthis.updateTagLabel(target);\n\t\tthis.selectionTagLabel.style.display = \"block\";\n\n\t\t// Send selection data to parent\n\t\tthis.sendElementData(target, source);\n\n\t\t// Update last click info\n\t\tthis.lastClickTime = now;\n\t\tthis.lastClickPosition = { x: e.clientX, y: e.clientY };\n\t};\n\n\tprivate updateOverlayPosition(overlay: HTMLDivElement, element: HTMLElement) {\n\t\tconst rect = element.getBoundingClientRect();\n\t\tObject.assign(overlay.style, {\n\t\t\ttop: `${rect.top + window.scrollY}px`,\n\t\t\tleft: `${rect.left + window.scrollX}px`,\n\t\t\twidth: `${rect.width}px`,\n\t\t\theight: `${rect.height}px`,\n\t\t});\n\t}\n\n\tprivate updateTagLabel(element: HTMLElement) {\n\t\tconst rect = element.getBoundingClientRect();\n\t\tconst tagName = element.tagName.toLowerCase();\n\n\t\tthis.selectionTagLabel.textContent = tagName;\n\t\tObject.assign(this.selectionTagLabel.style, {\n\t\t\ttop: `${rect.top + window.scrollY}px`,\n\t\t\tleft: `${rect.left + window.scrollX}px`,\n\t\t});\n\t}\n\n\tprivate getRelevantStyles(element: HTMLElement): Record<string, string> {\n\t\tconst computed = window.getComputedStyle(element);\n\t\tconst relevantProps = [\n\t\t\t\"display\",\n\t\t\t\"position\",\n\t\t\t\"width\",\n\t\t\t\"height\",\n\t\t\t\"padding\",\n\t\t\t\"margin\",\n\t\t\t\"backgroundColor\",\n\t\t\t\"color\",\n\t\t\t\"fontSize\",\n\t\t\t\"fontFamily\",\n\t\t];\n\n\t\tconst styles: Record<string, string> = {};\n\t\tfor (const prop of relevantProps) {\n\t\t\tstyles[prop] = computed.getPropertyValue(prop);\n\t\t}\n\t\treturn styles;\n\t}\n\n\t/**\n\t * Extract direct text content from DOM (not from nested children)\n\t */\n\tprivate getDirectTextContent(element: HTMLElement): string | null {\n\t\tconst directTextNodes = Array.from(element.childNodes)\n\t\t\t.filter((node) => node.nodeType === Node.TEXT_NODE)\n\t\t\t.map((node) => node.textContent?.trim())\n\t\t\t.filter(Boolean);\n\n\t\treturn directTextNodes.length > 0 ? directTextNodes.join(\" \") : null;\n\t}\n\n\tprivate sendElementData(element: HTMLElement, source: SourceLocation) {\n\t\tconst directText = this.getDirectTextContent(element);\n\n\t\tconst data: ElementSelectedMessage = {\n\t\t\ttype: \"FB_ELEMENT_SELECTED\",\n\t\t\tdata: {\n\t\t\t\t// Source location from React Fiber\n\t\t\t\tsourceFile: source.fileName,\n\t\t\t\tsourceLine: source.lineNumber,\n\t\t\t\tsourceColumn: source.columnNumber,\n\n\t\t\t\t// DOM properties\n\t\t\t\ttagName: element.tagName,\n\t\t\t\tclassName: element.className,\n\t\t\t\ttextContent: directText,\n\t\t\t\tsrc: element.getAttribute(\"src\") || undefined,\n\t\t\t\talt: element.getAttribute(\"alt\") || undefined,\n\t\t\t\thref: element.getAttribute(\"href\") || undefined,\n\t\t\t\ttarget: element.getAttribute(\"target\") || undefined,\n\t\t\t\trel: element.getAttribute(\"rel\") || undefined,\n\t\t\t\tcomputedStyles: this.getRelevantStyles(element),\n\t\t\t},\n\t\t};\n\n\t\t// Send to parent window\n\t\twindow.parent.postMessage(data, \"*\");\n\t}\n\n\t/**\n\t * Handle request to get all elements' current state\n\t * Used for computing diffs on save (Lovable's approach)\n\t */\n\tprivate handleGetAllElementsState() {\n\t\tconst allElements = document.querySelectorAll(\"*\");\n\t\tconst elementsState: Array<{\n\t\t\tsourceFile: string;\n\t\t\tsourceLine: number;\n\t\t\tsourceColumn: number;\n\t\t\tclassName: string;\n\t\t\ttextContent: string | null;\n\t\t\tsrc?: string;\n\t\t\talt?: string;\n\t\t\thref?: string;\n\t\t\ttarget?: string;\n\t\t\trel?: string;\n\t\t}> = [];\n\n\t\tfor (const el of allElements) {\n\t\t\t// Skip our own overlays\n\t\t\tif (\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (!source) continue;\n\n\t\t\tconst element = el as HTMLElement;\n\n\t\t\t// Check if this is an Image component wrapper with an <img> child\n\t\t\tlet actualElement = element;\n\t\t\tif (element.tagName !== \"IMG\") {\n\t\t\t\tconst imgChild = element.querySelector(\"img\");\n\t\t\t\tif (imgChild) {\n\t\t\t\t\tactualElement = imgChild as HTMLElement;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst textContent = this.getDirectTextContent(element);\n\n\t\t\t// Get className as string - handle SVG elements which have className as SVGAnimatedString\n\t\t\tlet className = \"\";\n\t\t\tif (element.className) {\n\t\t\t\t// For SVG elements, className is SVGAnimatedString with .baseVal property\n\t\t\t\tif (typeof element.className === \"string\") {\n\t\t\t\t\tclassName = element.className;\n\t\t\t\t} else if (\"baseVal\" in element.className) {\n\t\t\t\t\tclassName = (element.className as { baseVal: string }).baseVal;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\telementsState.push({\n\t\t\t\tsourceFile: source.fileName,\n\t\t\t\tsourceLine: source.lineNumber,\n\t\t\t\tsourceColumn: source.columnNumber,\n\t\t\t\tclassName,\n\t\t\t\ttextContent,\n\t\t\t\tsrc: actualElement.getAttribute(\"src\") || undefined,\n\t\t\t\talt: actualElement.getAttribute(\"alt\") || undefined,\n\t\t\t\thref: element.getAttribute(\"href\") || undefined,\n\t\t\t\ttarget: element.getAttribute(\"target\") || undefined,\n\t\t\t\trel: element.getAttribute(\"rel\") || undefined,\n\t\t\t});\n\t\t}\n\n\t\t// Send back to parent\n\t\twindow.parent.postMessage(\n\t\t\t{\n\t\t\t\ttype: \"FB_ALL_ELEMENTS_STATE\",\n\t\t\t\tdata: elementsState,\n\t\t\t},\n\t\t\t\"*\",\n\t\t);\n\t}\n\n\t/**\n\t * Handle optimistic element updates from parent window\n\t * Uses React Fiber source to find the correct element\n\t */\n\tprivate handleUpdateElement(message: DesignModeMessage) {\n\t\tconst { sourceFile, sourceLine, sourceColumn, updates } = message;\n\n\t\tif (!sourceFile || !sourceLine || !updates) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Find element by matching React Fiber source\n\t\tconst allElements = document.querySelectorAll(\"*\");\n\n\t\tfor (const el of allElements) {\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (\n\t\t\t\tsource?.fileName === sourceFile &&\n\t\t\t\tsource?.lineNumber === sourceLine &&\n\t\t\t\tsource?.columnNumber === sourceColumn\n\t\t\t) {\n\t\t\t\tlet element = el as HTMLElement;\n\n\t\t\t\t// Special case: if we're updating image properties (src/alt) but found a container,\n\t\t\t\t// look for an <img> child element\n\t\t\t\tif (\n\t\t\t\t\t(updates.src !== undefined || updates.alt !== undefined) &&\n\t\t\t\t\telement.tagName !== \"IMG\"\n\t\t\t\t) {\n\t\t\t\t\tconst imgChild = element.querySelector(\"img\");\n\t\t\t\t\tif (imgChild) {\n\t\t\t\t\t\telement = imgChild as HTMLElement;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Apply optimistic updates\n\t\t\t\tif (updates.className !== undefined) {\n\t\t\t\t\t// Apply the className - Tailwind v4 Browser CDN will auto-generate CSS\n\t\t\t\t\telement.className = updates.className;\n\t\t\t\t}\n\n\t\t\t\tif (updates.textContent !== undefined) {\n\t\t\t\t\t// Only update first text node to preserve child elements\n\t\t\t\t\tconst textNode = Array.from(element.childNodes).find(\n\t\t\t\t\t\t(node) => node.nodeType === Node.TEXT_NODE,\n\t\t\t\t\t);\n\t\t\t\t\tif (textNode) {\n\t\t\t\t\t\ttextNode.textContent = updates.textContent;\n\t\t\t\t\t} else {\n\t\t\t\t\t\telement.textContent = updates.textContent;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (updates.src !== undefined && \"src\" in element) {\n\t\t\t\t\t// Use setAttribute to force browser reload, bypassing React's state management\n\t\t\t\t\telement.setAttribute(\"src\", updates.src);\n\t\t\t\t\t// Also update srcset to prevent fallback\n\t\t\t\t\tif (element.hasAttribute(\"srcset\")) {\n\t\t\t\t\t\telement.removeAttribute(\"srcset\");\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (updates.alt !== undefined && \"alt\" in element) {\n\t\t\t\t\t(element as HTMLImageElement).alt = updates.alt;\n\t\t\t\t}\n\n\t\t\t\tif (updates.href !== undefined && \"href\" in element) {\n\t\t\t\t\telement.setAttribute(\"href\", updates.href);\n\t\t\t\t}\n\n\t\t\t\tif (updates.target !== undefined && \"target\" in element) {\n\t\t\t\t\telement.setAttribute(\"target\", updates.target);\n\t\t\t\t}\n\n\t\t\t\tif (updates.rel !== undefined && \"rel\" in element) {\n\t\t\t\t\telement.setAttribute(\"rel\", updates.rel);\n\t\t\t\t}\n\n\t\t\t\t// Update overlays if this is the hovered or selected element\n\t\t\t\tif (element === this.hoveredElement) {\n\t\t\t\t\tthis.updateOverlayPosition(this.hoverOverlay, element);\n\t\t\t\t}\n\t\t\t\tif (element === this.selectedElement) {\n\t\t\t\t\tthis.updateOverlayPosition(this.selectionOverlay, element);\n\t\t\t\t\tthis.updateTagLabel(element);\n\t\t\t\t}\n\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Handle theme update from parent window\n\t * Apply CSS variables using a style tag (NOT inline styles) to maintain proper CSS cascade\n\t * Note: We don't change the dark class - that's controlled by the native theme switcher\n\t */\n\tprivate handleUpdateTheme(theme?: {\n\t\tlightVariables?: Record<string, string>;\n\t\tdarkVariables?: Record<string, string>;\n\t}) {\n\t\tif (!theme) return;\n\n\t\t// Find or create the style element for design mode theme overrides\n\t\tlet styleEl = document.getElementById(\n\t\t\t\"fb-design-mode-theme\",\n\t\t) as HTMLStyleElement;\n\t\tif (!styleEl) {\n\t\t\tstyleEl = document.createElement(\"style\");\n\t\t\tstyleEl.id = \"fb-design-mode-theme\";\n\t\t\tdocument.head.appendChild(styleEl);\n\t\t}\n\n\t\t// Build CSS with both light and dark theme variables\n\t\tlet css = \"\";\n\n\t\t// Light theme variables in :root (includes colors, fonts, radius)\n\t\tif (theme.lightVariables && Object.keys(theme.lightVariables).length > 0) {\n\t\t\tcss += \":root {\\n\";\n\t\t\tfor (const [key, value] of Object.entries(theme.lightVariables)) {\n\t\t\t\tcss += `  ${key}: ${value};\\n`;\n\n\t\t\t\t// Load Google Fonts when font variables are updated\n\t\t\t\tif (\n\t\t\t\t\tkey === \"--font-sans\" ||\n\t\t\t\t\tkey === \"--font-serif\" ||\n\t\t\t\t\tkey === \"--font-mono\"\n\t\t\t\t) {\n\t\t\t\t\tloadGoogleFontInIframe(value);\n\t\t\t\t}\n\t\t\t}\n\t\t\tcss += \"}\\n\\n\";\n\t\t}\n\n\t\t// Dark theme variables in .dark (only colors, not fonts/radius)\n\t\tif (theme.darkVariables && Object.keys(theme.darkVariables).length > 0) {\n\t\t\tcss += \".dark {\\n\";\n\t\t\tfor (const [key, value] of Object.entries(theme.darkVariables)) {\n\t\t\t\tcss += `  ${key}: ${value};\\n`;\n\t\t\t}\n\t\t\tcss += \"}\\n\";\n\t\t}\n\n\t\t// Apply the CSS\n\t\tstyleEl.textContent = css;\n\t}\n}\n\n// Initialize when script loads - only in browser environment\n// Tailwind Play CDN handles all CSS generation automatically\nif (typeof window !== \"undefined\" && typeof document !== \"undefined\") {\n\tnew DesignModeOverlay();\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firebuzz/design-mode",
-  "version": "0.3.0-beta.0",
+  "version": "0.3.0-beta.2",
   "description": "Design mode overlay and utilities for Firebuzz landing page templates",
   "author": "Firebuzz Team",
   "license": "MIT",
@@ -50,6 +50,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "@react-dev-inspector/babel-plugin": "^2.0.1"
+  },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",