@firebuzz/design-mode 0.1.5 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +10 -17
- package/dist/index.d.ts +10 -17
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -1
- package/dist/index.mjs.map +1 -1
- package/dist/overlay.js +3 -3
- package/dist/overlay.js.map +1 -1
- package/dist/overlay.mjs +3 -3
- package/dist/overlay.mjs.map +1 -1
- package/package.json +59 -61
- package/LICENSE +0 -77
package/dist/index.d.mts
CHANGED
|
@@ -1,22 +1,5 @@
|
|
|
1
1
|
import { Plugin } from 'vite';
|
|
2
2
|
|
|
3
|
-
/**
|
|
4
|
-
* Vite plugin that enables design mode features for Firebuzz templates
|
|
5
|
-
* - Generates Tailwind config JSON for client-side use
|
|
6
|
-
* - Injects overlay script for element selection
|
|
7
|
-
*
|
|
8
|
-
* NOTE: This plugin does NOT modify JSX/TSX files.
|
|
9
|
-
* Element tracking is done at runtime using React Fiber's _debugSource.
|
|
10
|
-
*
|
|
11
|
-
* @param options - Plugin configuration options
|
|
12
|
-
* @param options.tailwindConfigPath - Path to tailwind.config.js (default: "./tailwind.config.js")
|
|
13
|
-
* @param options.outputPath - Path to output tailwind.config.json (default: "./src/design-mode/tailwind.config.json")
|
|
14
|
-
*/
|
|
15
|
-
declare function firebuzzDesignMode(options?: {
|
|
16
|
-
tailwindConfigPath?: string;
|
|
17
|
-
outputPath?: string;
|
|
18
|
-
}): Plugin;
|
|
19
|
-
|
|
20
3
|
/**
|
|
21
4
|
* TypeScript type definitions for Firebuzz Design Mode
|
|
22
5
|
*/
|
|
@@ -82,4 +65,14 @@ interface AllElementsStateMessage {
|
|
|
82
65
|
}
|
|
83
66
|
type DesignModeMessageType = DesignModeMessage | ElementSelectedMessage | AllElementsStateMessage;
|
|
84
67
|
|
|
68
|
+
/**
|
|
69
|
+
* Vite plugin that enables design mode features for Firebuzz templates
|
|
70
|
+
* - Injects Tailwind Play CDN for runtime CSS generation
|
|
71
|
+
* - Injects overlay script for element selection
|
|
72
|
+
*
|
|
73
|
+
* NOTE: This plugin does NOT modify JSX/TSX files.
|
|
74
|
+
* Element tracking is done at runtime using React Fiber's _debugSource.
|
|
75
|
+
*/
|
|
76
|
+
declare function firebuzzDesignMode(): Plugin;
|
|
77
|
+
|
|
85
78
|
export { type AllElementsStateMessage, type DesignModeMessage, type DesignModeMessageType, type ElementData, type ElementSelectedMessage, type ElementUpdates, type SourceLocation, type ThemeVariables, firebuzzDesignMode };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,22 +1,5 @@
|
|
|
1
1
|
import { Plugin } from 'vite';
|
|
2
2
|
|
|
3
|
-
/**
|
|
4
|
-
* Vite plugin that enables design mode features for Firebuzz templates
|
|
5
|
-
* - Generates Tailwind config JSON for client-side use
|
|
6
|
-
* - Injects overlay script for element selection
|
|
7
|
-
*
|
|
8
|
-
* NOTE: This plugin does NOT modify JSX/TSX files.
|
|
9
|
-
* Element tracking is done at runtime using React Fiber's _debugSource.
|
|
10
|
-
*
|
|
11
|
-
* @param options - Plugin configuration options
|
|
12
|
-
* @param options.tailwindConfigPath - Path to tailwind.config.js (default: "./tailwind.config.js")
|
|
13
|
-
* @param options.outputPath - Path to output tailwind.config.json (default: "./src/design-mode/tailwind.config.json")
|
|
14
|
-
*/
|
|
15
|
-
declare function firebuzzDesignMode(options?: {
|
|
16
|
-
tailwindConfigPath?: string;
|
|
17
|
-
outputPath?: string;
|
|
18
|
-
}): Plugin;
|
|
19
|
-
|
|
20
3
|
/**
|
|
21
4
|
* TypeScript type definitions for Firebuzz Design Mode
|
|
22
5
|
*/
|
|
@@ -82,4 +65,14 @@ interface AllElementsStateMessage {
|
|
|
82
65
|
}
|
|
83
66
|
type DesignModeMessageType = DesignModeMessage | ElementSelectedMessage | AllElementsStateMessage;
|
|
84
67
|
|
|
68
|
+
/**
|
|
69
|
+
* Vite plugin that enables design mode features for Firebuzz templates
|
|
70
|
+
* - Injects Tailwind Play CDN for runtime CSS generation
|
|
71
|
+
* - Injects overlay script for element selection
|
|
72
|
+
*
|
|
73
|
+
* NOTE: This plugin does NOT modify JSX/TSX files.
|
|
74
|
+
* Element tracking is done at runtime using React Fiber's _debugSource.
|
|
75
|
+
*/
|
|
76
|
+
declare function firebuzzDesignMode(): Plugin;
|
|
77
|
+
|
|
85
78
|
export { type AllElementsStateMessage, type DesignModeMessage, type DesignModeMessageType, type ElementData, type ElementSelectedMessage, type ElementUpdates, type SourceLocation, type ThemeVariables, firebuzzDesignMode };
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';var n=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 n__default=/*#__PURE__*/_interopDefault(n);var t__default=/*#__PURE__*/_interopDefault(t);function d(){let c=process.env.NODE_ENV==="development"&&process.env.VITE_DESIGN_MODE!=="false",l=process.cwd(),r=t__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=t__default.default.resolve(t__default.default.dirname(s),".."),a=t__default.default.join(i,"dist","overlay.mjs"),o=t__default.default.join(i,"dist","overlay.mjs.map");await n__default.default.mkdir(t__default.default.dirname(r),{recursive:!0}),await n__default.default.copyFile(a,r);try{await n__default.default.copyFile(o,`${r}.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.tailwindcss.com"></script>',a=`<script type="module" src="${r.replace(l,"")}"></script>`,o=e.replace("</head>",`${s}</head>`);return o=o.replace("</body>",`${a}</body>`),o}}}
|
|
2
|
+
exports.firebuzzDesignMode=d;//# sourceMappingURL=index.js.map
|
|
2
3
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/vite-plugin.ts"],"names":["firebuzzDesignMode","
|
|
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,CACRD,EACA,CAAA,EAAGP,CAAiB,CAAA,IAAA,CACrB,EACD,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,CACL,qDAAA,CAIKC,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(\n\t\t\t\t\t\toverlaySourceMap,\n\t\t\t\t\t\t`${overlayOutputPath}.map`,\n\t\t\t\t\t);\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 Play CDN for runtime CSS generation\n\t\t\tconst tailwindCDN =\n\t\t\t\t'<script src=\"https://cdn.tailwindcss.com\"></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
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
import
|
|
1
|
+
import n from'fs/promises';import t from'path';import {fileURLToPath}from'url';function d(){let c=process.env.NODE_ENV==="development"&&process.env.VITE_DESIGN_MODE!=="false",l=process.cwd(),r=t.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=t.resolve(t.dirname(s),".."),a=t.join(i,"dist","overlay.mjs"),o=t.join(i,"dist","overlay.mjs.map");await n.mkdir(t.dirname(r),{recursive:!0}),await n.copyFile(a,r);try{await n.copyFile(o,`${r}.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.tailwindcss.com"></script>',a=`<script type="module" src="${r.replace(l,"")}"></script>`,o=e.replace("</head>",`${s}</head>`);return o=o.replace("</body>",`${a}</body>`),o}}}
|
|
2
|
+
export{d as firebuzzDesignMode};//# sourceMappingURL=index.mjs.map
|
|
2
3
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/vite-plugin.ts"],"names":["firebuzzDesignMode","
|
|
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,CACRD,EACA,CAAA,EAAGP,CAAiB,CAAA,IAAA,CACrB,EACD,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,CACL,qDAAA,CAIKC,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(\n\t\t\t\t\t\toverlaySourceMap,\n\t\t\t\t\t\t`${overlayOutputPath}.map`,\n\t\t\t\t\t);\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 Play CDN for runtime CSS generation\n\t\t\tconst tailwindCDN =\n\t\t\t\t'<script src=\"https://cdn.tailwindcss.com\"></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
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
'use strict';var h=class{config;generatedStyles=new Set;styleElement=null;constructor(e){e?this.config=e:this.config=window.__FIREBUZZ_TAILWIND_CONFIG__||{},this.initStyleElement(),console.log("[Tailwind Generator] Initialized with config:",{colors:Object.keys(this.config.theme?.colors||{}).length,spacing:Object.keys(this.config.theme?.spacing||{}).length});}initStyleElement(){let e=document.getElementById("fb-runtime-tailwind");if(e){console.warn("[Tailwind Generator] Style element already exists, reusing it"),this.styleElement=e;return}this.styleElement=document.createElement("style"),this.styleElement.id="fb-runtime-tailwind",this.styleElement.setAttribute("data-source","firebuzz-design-mode"),document.head.appendChild(this.styleElement),console.log("[Tailwind Generator] Created <style> element in <head>");}classExistsInStylesheet(e){try{let n=document.createElement("div");n.className=e,n.style.cssText="position:absolute;top:-9999px;left:-9999px;visibility:hidden;",document.body.appendChild(n);let t=window.getComputedStyle(n),i=!1;if(e.startsWith("bg-")&&t.backgroundColor!=="rgba(0, 0, 0, 0)")i=!0;else if(e.startsWith("text-")&&!e.match(/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/)){let r=window.getComputedStyle(document.body).color;t.color!==r&&t.color!=="rgb(0, 0, 0)"&&(i=!0);}else if(e.match(/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/)){let r=window.getComputedStyle(document.body).fontSize;t.fontSize!==r&&(i=!0);}else if(e.match(/^[pm][trblxy]?-/)){let r=e[0]==="p"?"padding":"margin",s=e[1]==="-"?"Top":e[1].toUpperCase(),o=`${r}${s==="-"?"Top":s}`;t[o]&&t[o]!=="0px"&&(i=!0);}else if(e.startsWith("gap-"))(t.gap!=="normal"&&t.gap!=="0px"||t.columnGap!=="normal"&&t.columnGap!=="0px"||t.rowGap!=="normal"&&t.rowGap!=="0px")&&(i=!0);else if(e.startsWith("space-"))i=!1;else if(e.match(/^[wh]-/)){let r=e[0]==="w"?"width":"height";t[r]!=="auto"&&t[r]!=="0px"&&(i=!0);}else if(["flex","inline-flex","grid","inline-grid","block","inline-block","hidden"].includes(e)){let r=e==="hidden"?"none":e.replace("inline-","inline-").replace("-","");(t.display===r||e==="flex"&&t.display==="flex"||e==="grid"&&t.display==="grid"||e==="block"&&t.display==="block")&&(i=!0);}else ["items-center","items-start","items-end","justify-center","justify-between","justify-around","flex-col","flex-row"].includes(e)&&(e.startsWith("items-")&&t.alignItems!=="normal"||e.startsWith("justify-")&&t.justifyContent!=="normal"||e.startsWith("flex-")&&t.flexDirection!=="row")&&(i=!0);return document.body.removeChild(n),i}catch{return false}}generateClasses(e){let n=e.split(/\s+/).filter(Boolean);for(let t of n){if(this.generatedStyles.has(t))continue;if(this.classExistsInStylesheet(t)){console.log(`[Tailwind Generator] Skipping ${t} - already in stylesheet`);continue}let i=this.generateCSSForClass(t);i&&(this.appendCSS(i),this.generatedStyles.add(t),console.log(`[Tailwind Generator] Generated CSS for new class: ${t}`));}}generateCSSForClass(e){let n=e.match(/^(sm|md|lg|xl|2xl):(.+)$/);if(n){let[,r,s]=n,o=this.generateBaseCSS(s);if(!o)return null;let l=(this.config.theme?.screens||{})[r];return l?`@media (min-width: ${l}) { ${o} }`:null}let t=e.match(/^(hover|focus|active|disabled|focus-visible|focus-within|visited):(.+)$/);if(t){let[,r,s]=t,o=this.generateBaseCSS(s);return o?o.replace(/\.([^\s{]+)/,`.${e.replace(/:/g,"\\:")}:${r}`):null}let i=e.match(/^dark:(.+)$/);if(i){let[,r]=i,s=this.generateBaseCSS(r);return s?`.dark ${s}`:null}return this.generateBaseCSS(e)}generateBaseCSS(e){if(e.startsWith("bg-"))return this.generateColorCSS(e,"background-color");if(e.startsWith("text-"))return e.match(/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/)?this.generateFontSizeCSS(e):this.generateColorCSS(e,"color");if(e.startsWith("border-")){if(e.match(/^border-(\d+|t|r|b|l|x|y)$/))return this.generateBorderWidthCSS(e);if(["border-solid","border-dashed","border-dotted","border-double","border-none"].includes(e)){let n=e.replace("border-","");return `.${e} { border-style: ${n} }`}return this.generateColorCSS(e,"border-color")}return e.match(/^p[trblxy]?-/)?this.generateSpacingCSS(e,"padding"):e.match(/^m[trblxy]?-/)?this.generateSpacingCSS(e,"margin"):e.startsWith("w-")?this.generateSizeCSS(e,"width"):e.startsWith("h-")?this.generateSizeCSS(e,"height"):e.startsWith("font-")?this.generateFontWeightCSS(e):e.startsWith("rounded")?this.generateBorderRadiusCSS(e):["flex","inline-flex","grid","inline-grid","block","inline-block","hidden"].includes(e)?`.${e} { display: ${e.replace("inline-","inline ").replace("-"," ")} }`:e.startsWith("gap-")?this.generateGapCSS(e):e.startsWith("space-")?this.generateSpaceBetweenCSS(e):e==="flex-row"?".flex-row { flex-direction: row }":e==="flex-row-reverse"?".flex-row-reverse { flex-direction: row-reverse }":e==="flex-col"?".flex-col { flex-direction: column }":e==="flex-col-reverse"?".flex-col-reverse { flex-direction: column-reverse }":e==="justify-start"?".justify-start { justify-content: flex-start }":e==="justify-center"?".justify-center { justify-content: center }":e==="justify-end"?".justify-end { justify-content: flex-end }":e==="justify-between"?".justify-between { justify-content: space-between }":e==="justify-around"?".justify-around { justify-content: space-around }":e==="justify-evenly"?".justify-evenly { justify-content: space-evenly }":e==="items-start"?".items-start { align-items: flex-start }":e==="items-center"?".items-center { align-items: center }":e==="items-end"?".items-end { align-items: flex-end }":e==="items-baseline"?".items-baseline { align-items: baseline }":e==="items-stretch"?".items-stretch { align-items: stretch }":e==="text-left"?".text-left { text-align: left }":e==="text-center"?".text-center { text-align: center }":e==="text-right"?".text-right { text-align: right }":e==="text-justify"?".text-justify { text-align: justify }":e==="underline"?".underline { text-decoration-line: underline }":e==="overline"?".overline { text-decoration-line: overline }":e==="line-through"?".line-through { text-decoration-line: line-through }":e==="no-underline"?".no-underline { text-decoration-line: none }":e==="italic"?".italic { font-style: italic }":e==="not-italic"?".not-italic { font-style: normal }":e.startsWith("leading-")?this.generateLineHeightCSS(e):e.startsWith("tracking-")?this.generateLetterSpacingCSS(e):e.startsWith("grid-cols-")?this.generateGridColumnsCSS(e):e.startsWith("grid-rows-")?this.generateGridRowsCSS(e):e.startsWith("opacity-")?this.generateOpacityCSS(e):e.startsWith("shadow")?this.generateShadowCSS(e):(console.warn(`[Tailwind Generator] Cannot generate CSS for class: ${e}`),null)}generateColorCSS(e,n){let t=this.config.theme?.colors||{},i=n==="background-color"?"bg-":n==="color"?"text-":"border-",s=e.slice(i.length).split("-");if(s.length===1){let o=t[s[0]];if(typeof o=="string")return `.${e} { ${n}: ${o} }`}else if(s.length===2){let[o,a]=s,l=t[o]?.[a];if(l)return `.${e} { ${n}: ${l} }`}return null}generateSpacingCSS(e,n){let t=this.config.theme?.spacing||{},i=n==="padding"?"p":"m",r=e.match(new RegExp(`^${i}([trblxy])?-(.+)$`));if(!r)return null;let[,s,o]=r,a=t[o];if(!a)return null;let l=[];if(!s)l.push(`${n}: ${a}`);else if(s==="x")l.push(`${n}-left: ${a}`,`${n}-right: ${a}`);else if(s==="y")l.push(`${n}-top: ${a}`,`${n}-bottom: ${a}`);else {let d={t:"top",r:"right",b:"bottom",l:"left"};l.push(`${n}-${d[s]}: ${a}`);}return `.${e} { ${l.join("; ")} }`}generateSizeCSS(e,n){let t=this.config.theme?.spacing||{},i=n==="width"?"w-":"h-",r=e.slice(i.length);if(r==="full")return `.${e} { ${n}: 100% }`;if(r==="screen")return `.${e} { ${n}: 100v${n[0]} }`;if(r==="auto")return `.${e} { ${n}: auto }`;if(r==="min")return `.${e} { ${n}: min-content }`;if(r==="max")return `.${e} { ${n}: max-content }`;if(r==="fit")return `.${e} { ${n}: fit-content }`;let s=t[r];return s?`.${e} { ${n}: ${s} }`:null}generateFontSizeCSS(e){let n=this.config.theme?.fontSize||{},t=e.slice(5),i=n[t];if(Array.isArray(i)){let[r,{lineHeight:s}]=i;return `.${e} { font-size: ${r}; line-height: ${s} }`}return typeof i=="string"?`.${e} { font-size: ${i} }`:null}generateFontWeightCSS(e){let n=this.config.theme?.fontWeight||{},t=e.slice(5),i=n[t];return i?`.${e} { font-weight: ${i} }`:null}generateBorderRadiusCSS(e){let n=this.config.theme?.borderRadius||{};if(e==="rounded"){let r=n.DEFAULT||n[""];if(r)return `.rounded { border-radius: ${r} }`}let t=e.slice(8),i=n[t];return i?`.${e} { border-radius: ${i} }`:null}generateBorderWidthCSS(e){let n=this.config.theme?.borderWidth||{};if(e==="border")return `.border { border-width: ${n.DEFAULT||"1px"} }`;let t=e.match(/^border-([trbl])$/);if(t){let r={t:"top",r:"right",b:"bottom",l:"left"},s=n.DEFAULT||"1px";return `.${e} { border-${r[t[1]]}-width: ${s} }`}let i=e.match(/^border-(\d+)$/);if(i){let r=n[i[1]];if(r)return `.${e} { border-width: ${r} }`}return null}generateGapCSS(e){let n=this.config.theme?.spacing||{};if(e.startsWith("gap-x-")){let r=e.slice(6),s=n[r];if(s)return `.${e} { column-gap: ${s} }`}if(e.startsWith("gap-y-")){let r=e.slice(6),s=n[r];if(s)return `.${e} { row-gap: ${s} }`}let t=e.slice(4),i=n[t];return i?`.${e} { gap: ${i} }`:null}generateSpaceBetweenCSS(e){let n=this.config.theme?.spacing||{};if(e.startsWith("space-x-")){let t=e.slice(8),i=n[t];if(i)return `.${e} > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(${i} * var(--tw-space-x-reverse)); margin-left: calc(${i} * calc(1 - var(--tw-space-x-reverse))) }`}if(e.startsWith("space-y-")){let t=e.slice(8),i=n[t];if(i)return `.${e} > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(${i} * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(${i} * var(--tw-space-y-reverse)) }`}return e==="space-x-reverse"?`.${e} > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1 }`:e==="space-y-reverse"?`.${e} > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 1 }`:null}generateLineHeightCSS(e){let n=this.config.theme?.lineHeight||{},t=e.slice(8),i=n[t];return i?`.${e} { line-height: ${i} }`:null}generateLetterSpacingCSS(e){let n=this.config.theme?.letterSpacing||{},t=e.slice(9),i=n[t];return i?`.${e} { letter-spacing: ${i} }`:null}generateGridColumnsCSS(e){let n=e.slice(10);if(n==="none")return `.${e} { grid-template-columns: none }`;if(n==="subgrid")return `.${e} { grid-template-columns: subgrid }`;let t=Number.parseInt(n,10);return !Number.isNaN(t)&&t>=1&&t<=12?`.${e} { grid-template-columns: repeat(${t}, minmax(0, 1fr)) }`:null}generateGridRowsCSS(e){let n=e.slice(10);if(n==="none")return `.${e} { grid-template-rows: none }`;if(n==="subgrid")return `.${e} { grid-template-rows: subgrid }`;let t=Number.parseInt(n,10);return !Number.isNaN(t)&&t>=1&&t<=6?`.${e} { grid-template-rows: repeat(${t}, minmax(0, 1fr)) }`:null}generateOpacityCSS(e){let n=e.slice(8),t=Number.parseInt(n,10);return !Number.isNaN(t)&&t>=0&&t<=100?`.${e} { opacity: ${t/100} }`:null}generateShadowCSS(e){let n=this.config.theme?.boxShadow||{};if(e==="shadow"){let r=n.DEFAULT||n[""];if(r)return `.shadow { box-shadow: ${r} }`}let t=e.slice(7),i=n[t];return i?`.${e} { box-shadow: ${i} }`:null}appendCSS(e){this.styleElement&&(this.styleElement.textContent+=`
|
|
2
|
-
${e}`);}clear(){this.generatedStyles.clear(),this.styleElement&&(this.styleElement.textContent="");}},u=null;function f(){return u||(u=new h),u}var g=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,n){let t=document.createElement("div");return t.className="fb-design-mode-overlay",Object.assign(t.style,{position:"absolute",border:e,pointerEvents:"none",zIndex:String(n),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 n=Array.from(this.hoveredElement.children).filter(r=>this.getReactFiberSource(r)!==null),t=this.childrenOverlays.indexOf(e),i=n[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 n=document.querySelectorAll("*");for(let t of n){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 r=t;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,i);return}}}getReactFiberSource(e){let n=e,t=Object.keys(n).find(s=>s.startsWith("__reactFiber$")||s.startsWith("__reactInternalInstance$"));if(!t)return null;let i=n[t],r=null;for(;i;){if(i._debugSource){let s={fileName:i._debugSource.fileName,lineNumber:i._debugSource.lineNumber,columnNumber:i._debugSource.columnNumber??0};if(r||(r=s),s.fileName.includes("/components/ui/")||s.fileName.includes("/components/common/")){i=i.return;continue}return s}i=i.return;}return r}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(n=>n.nodeType===Node.TEXT_NODE&&n.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(r=>r.classList.contains("fb-design-mode-overlay")||r.classList.contains("fb-design-mode-tag")?false:this.getReactFiberSource(r)!==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 n=Array.from(e.children).filter(t=>this.getReactFiberSource(t)!==null);for(;this.childrenOverlays.length<n.length;)this.childrenOverlays.push(this.createChildOverlay());n.forEach((t,i)=>{let r=this.childrenOverlays[i];r&&(this.updateOverlayPosition(r,t),r.style.display="block");});for(let t=n.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 n=Date.now(),t=n-this.lastClickTime,i=Math.hypot(e.clientX-this.lastClickPosition.x,e.clientY-this.lastClickPosition.y),s=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&&s.length>1?this.currentSelectionIndex=(this.currentSelectionIndex+1)%s.length:this.currentSelectionIndex=0;let o=s[this.currentSelectionIndex];if(!o)return;let a=this.getReactFiberSource(o);a&&(this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=o,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,o),this.selectionOverlay.style.display="block",this.updateTagLabel(o),this.selectionTagLabel.style.display="block",this.sendElementData(o,a),this.lastClickTime=n,this.lastClickPosition={x:e.clientX,y:e.clientY});};updateOverlayPosition(e,n){let t=n.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 n=e.getBoundingClientRect(),t=e.tagName.toLowerCase();this.selectionTagLabel.textContent=t,Object.assign(this.selectionTagLabel.style,{top:`${n.top+window.scrollY}px`,left:`${n.left+window.scrollX}px`});}getRelevantStyles(e){let n=window.getComputedStyle(e),t=["display","position","width","height","padding","margin","backgroundColor","color","fontSize","fontFamily"],i={};for(let r of t)i[r]=n.getPropertyValue(r);return i}getDirectTextContent(e){let n=Array.from(e.childNodes).filter(t=>t.nodeType===Node.TEXT_NODE).map(t=>t.textContent?.trim()).filter(Boolean);return n.length>0?n.join(" "):null}sendElementData(e,n){let t=this.getDirectTextContent(e),i={type:"FB_ELEMENT_SELECTED",data:{sourceFile:n.fileName,sourceLine:n.lineNumber,sourceColumn:n.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("*"),n=[];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 r=t,s=r;if(r.tagName!=="IMG"){let l=r.querySelector("img");l&&(s=l);}let o=this.getDirectTextContent(r),a="";r.className&&(typeof r.className=="string"?a=r.className:"baseVal"in r.className&&(a=r.className.baseVal)),n.push({sourceFile:i.fileName,sourceLine:i.lineNumber,sourceColumn:i.columnNumber,className:a,textContent:o,src:s.getAttribute("src")||void 0,alt:s.getAttribute("alt")||void 0,href:r.getAttribute("href")||void 0,target:r.getAttribute("target")||void 0,rel:r.getAttribute("rel")||void 0});}window.parent.postMessage({type:"FB_ALL_ELEMENTS_STATE",data:n},"*");}handleUpdateElement(e){let{sourceFile:n,sourceLine:t,sourceColumn:i,updates:r}=e;if(!n||!t||!r)return;let s=document.querySelectorAll("*");for(let o of s){let a=this.getReactFiberSource(o);if(a?.fileName===n&&a?.lineNumber===t&&a?.columnNumber===i){let l=o;if((r.src!==void 0||r.alt!==void 0)&&l.tagName!=="IMG"){let d=l.querySelector("img");d&&(l=d);}if(r.className!==void 0&&(f().generateClasses(r.className),l.className=r.className),r.textContent!==void 0){let d=Array.from(l.childNodes).find(p=>p.nodeType===Node.TEXT_NODE);d?d.textContent=r.textContent:l.textContent=r.textContent;}r.src!==void 0&&"src"in l&&(l.setAttribute("src",r.src),l.hasAttribute("srcset")&&l.removeAttribute("srcset")),r.alt!==void 0&&"alt"in l&&(l.alt=r.alt),r.href!==void 0&&"href"in l&&l.setAttribute("href",r.href),r.target!==void 0&&"target"in l&&l.setAttribute("target",r.target),r.rel!==void 0&&"rel"in l&&l.setAttribute("rel",r.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 n=document.getElementById("fb-design-mode-theme");n||(n=document.createElement("style"),n.id="fb-design-mode-theme",document.head.appendChild(n));let t="";if(e.lightVariables&&Object.keys(e.lightVariables).length>0){t+=`:root {
|
|
1
|
+
'use strict';var c=class{config;generatedStyles=new Set;styleElement=null;constructor(e){e?this.config=e:this.config=window.__FIREBUZZ_TAILWIND_CONFIG__||{},this.initStyleElement(),console.log("[Tailwind Generator] Initialized with config:",{colors:Object.keys(this.config.theme?.colors||{}).length,spacing:Object.keys(this.config.theme?.spacing||{}).length});}initStyleElement(){let e=document.getElementById("fb-runtime-tailwind");if(e){console.warn("[Tailwind Generator] Style element already exists, reusing it"),this.styleElement=e;return}this.styleElement=document.createElement("style"),this.styleElement.id="fb-runtime-tailwind",this.styleElement.setAttribute("data-source","firebuzz-design-mode"),document.head.appendChild(this.styleElement),console.log("[Tailwind Generator] Created <style> element in <head>");}classExistsInStylesheet(e){try{let n=document.createElement("div");n.className=e,n.style.cssText="position:absolute;top:-9999px;left:-9999px;visibility:hidden;",document.body.appendChild(n);let t=window.getComputedStyle(n),i=!1;if(e.startsWith("bg-")&&t.backgroundColor!=="rgba(0, 0, 0, 0)")i=!0;else if(e.startsWith("text-")&&!e.match(/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/)){let r=window.getComputedStyle(document.body).color;t.color!==r&&t.color!=="rgb(0, 0, 0)"&&(i=!0);}else if(e.match(/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/)){let r=window.getComputedStyle(document.body).fontSize;t.fontSize!==r&&(i=!0);}else if(e.match(/^[pm][trblxy]?-/)){let r=e[0]==="p"?"padding":"margin",s=e[1]==="-"?"Top":e[1].toUpperCase(),o=`${r}${s==="-"?"Top":s}`;t[o]&&t[o]!=="0px"&&(i=!0);}else if(e.startsWith("gap-"))(t.gap!=="normal"&&t.gap!=="0px"||t.columnGap!=="normal"&&t.columnGap!=="0px"||t.rowGap!=="normal"&&t.rowGap!=="0px")&&(i=!0);else if(e.startsWith("space-"))i=!1;else if(e.match(/^[wh]-/)){let r=e[0]==="w"?"width":"height";t[r]!=="auto"&&t[r]!=="0px"&&(i=!0);}else if(["flex","inline-flex","grid","inline-grid","block","inline-block","hidden"].includes(e)){let r=e==="hidden"?"none":e.replace("inline-","inline-").replace("-","");(t.display===r||e==="flex"&&t.display==="flex"||e==="grid"&&t.display==="grid"||e==="block"&&t.display==="block")&&(i=!0);}else ["items-center","items-start","items-end","justify-center","justify-between","justify-around","flex-col","flex-row"].includes(e)&&(e.startsWith("items-")&&t.alignItems!=="normal"||e.startsWith("justify-")&&t.justifyContent!=="normal"||e.startsWith("flex-")&&t.flexDirection!=="row")&&(i=!0);return document.body.removeChild(n),i}catch{return false}}generateClasses(e){let n=e.split(/\s+/).filter(Boolean);for(let t of n){if(this.generatedStyles.has(t))continue;if(this.classExistsInStylesheet(t)){console.log(`[Tailwind Generator] Skipping ${t} - already in stylesheet`);continue}let i=this.generateCSSForClass(t);i&&(this.appendCSS(i),this.generatedStyles.add(t),console.log(`[Tailwind Generator] Generated CSS for new class: ${t}`));}}generateCSSForClass(e){let n=e.match(/^(sm|md|lg|xl|2xl):(.+)$/);if(n){let[,r,s]=n,o=this.generateBaseCSS(s);if(!o)return null;let l=(this.config.theme?.screens||{})[r];return l?`@media (min-width: ${l}) { ${o} }`:null}let t=e.match(/^(hover|focus|active|disabled|focus-visible|focus-within|visited):(.+)$/);if(t){let[,r,s]=t,o=this.generateBaseCSS(s);return o?o.replace(/\.([^\s{]+)/,`.${e.replace(/:/g,"\\:")}:${r}`):null}let i=e.match(/^dark:(.+)$/);if(i){let[,r]=i,s=this.generateBaseCSS(r);return s?`.dark ${s}`:null}return this.generateBaseCSS(e)}generateBaseCSS(e){if(e.startsWith("bg-"))return this.generateColorCSS(e,"background-color");if(e.startsWith("text-"))return e.match(/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/)?this.generateFontSizeCSS(e):this.generateColorCSS(e,"color");if(e.startsWith("border-")){if(e.match(/^border-(\d+|t|r|b|l|x|y)$/))return this.generateBorderWidthCSS(e);if(["border-solid","border-dashed","border-dotted","border-double","border-none"].includes(e)){let n=e.replace("border-","");return `.${e} { border-style: ${n} }`}return this.generateColorCSS(e,"border-color")}return e.match(/^p[trblxy]?-/)?this.generateSpacingCSS(e,"padding"):e.match(/^m[trblxy]?-/)?this.generateSpacingCSS(e,"margin"):e.startsWith("w-")?this.generateSizeCSS(e,"width"):e.startsWith("h-")?this.generateSizeCSS(e,"height"):e.startsWith("font-")?this.generateFontWeightCSS(e):e.startsWith("rounded")?this.generateBorderRadiusCSS(e):["flex","inline-flex","grid","inline-grid","block","inline-block","hidden"].includes(e)?`.${e} { display: ${e.replace("inline-","inline ").replace("-"," ")} }`:e.startsWith("gap-")?this.generateGapCSS(e):e.startsWith("space-")?this.generateSpaceBetweenCSS(e):e==="flex-row"?".flex-row { flex-direction: row }":e==="flex-row-reverse"?".flex-row-reverse { flex-direction: row-reverse }":e==="flex-col"?".flex-col { flex-direction: column }":e==="flex-col-reverse"?".flex-col-reverse { flex-direction: column-reverse }":e==="justify-start"?".justify-start { justify-content: flex-start }":e==="justify-center"?".justify-center { justify-content: center }":e==="justify-end"?".justify-end { justify-content: flex-end }":e==="justify-between"?".justify-between { justify-content: space-between }":e==="justify-around"?".justify-around { justify-content: space-around }":e==="justify-evenly"?".justify-evenly { justify-content: space-evenly }":e==="items-start"?".items-start { align-items: flex-start }":e==="items-center"?".items-center { align-items: center }":e==="items-end"?".items-end { align-items: flex-end }":e==="items-baseline"?".items-baseline { align-items: baseline }":e==="items-stretch"?".items-stretch { align-items: stretch }":e==="text-left"?".text-left { text-align: left }":e==="text-center"?".text-center { text-align: center }":e==="text-right"?".text-right { text-align: right }":e==="text-justify"?".text-justify { text-align: justify }":e==="underline"?".underline { text-decoration-line: underline }":e==="overline"?".overline { text-decoration-line: overline }":e==="line-through"?".line-through { text-decoration-line: line-through }":e==="no-underline"?".no-underline { text-decoration-line: none }":e==="italic"?".italic { font-style: italic }":e==="not-italic"?".not-italic { font-style: normal }":e.startsWith("leading-")?this.generateLineHeightCSS(e):e.startsWith("tracking-")?this.generateLetterSpacingCSS(e):e.startsWith("grid-cols-")?this.generateGridColumnsCSS(e):e.startsWith("grid-rows-")?this.generateGridRowsCSS(e):e.startsWith("opacity-")?this.generateOpacityCSS(e):e.startsWith("shadow")?this.generateShadowCSS(e):(console.warn(`[Tailwind Generator] Cannot generate CSS for class: ${e}`),null)}generateColorCSS(e,n){let t=this.config.theme?.colors||{},i=n==="background-color"?"bg-":n==="color"?"text-":"border-",s=e.slice(i.length).split("-");if(s.length===1){let o=t[s[0]];if(typeof o=="string")return `.${e} { ${n}: ${o} }`}else if(s.length===2){let[o,a]=s,l=t[o]?.[a];if(l)return `.${e} { ${n}: ${l} }`}return null}generateSpacingCSS(e,n){let t=this.config.theme?.spacing||{},i=n==="padding"?"p":"m",r=e.match(new RegExp(`^${i}([trblxy])?-(.+)$`));if(!r)return null;let[,s,o]=r,a=t[o];if(!a)return null;let l=[];if(!s)l.push(`${n}: ${a}`);else if(s==="x")l.push(`${n}-left: ${a}`,`${n}-right: ${a}`);else if(s==="y")l.push(`${n}-top: ${a}`,`${n}-bottom: ${a}`);else {let d={t:"top",r:"right",b:"bottom",l:"left"};l.push(`${n}-${d[s]}: ${a}`);}return `.${e} { ${l.join("; ")} }`}generateSizeCSS(e,n){let t=this.config.theme?.spacing||{},i=n==="width"?"w-":"h-",r=e.slice(i.length);if(r==="full")return `.${e} { ${n}: 100% }`;if(r==="screen")return `.${e} { ${n}: 100v${n[0]} }`;if(r==="auto")return `.${e} { ${n}: auto }`;if(r==="min")return `.${e} { ${n}: min-content }`;if(r==="max")return `.${e} { ${n}: max-content }`;if(r==="fit")return `.${e} { ${n}: fit-content }`;let s=t[r];return s?`.${e} { ${n}: ${s} }`:null}generateFontSizeCSS(e){let n=this.config.theme?.fontSize||{},t=e.slice(5),i=n[t];if(Array.isArray(i)){let[r,{lineHeight:s}]=i;return `.${e} { font-size: ${r}; line-height: ${s} }`}return typeof i=="string"?`.${e} { font-size: ${i} }`:null}generateFontWeightCSS(e){let n=this.config.theme?.fontWeight||{},t=e.slice(5),i=n[t];return i?`.${e} { font-weight: ${i} }`:null}generateBorderRadiusCSS(e){let n=this.config.theme?.borderRadius||{};if(e==="rounded"){let r=n.DEFAULT||n[""];if(r)return `.rounded { border-radius: ${r} }`}let t=e.slice(8),i=n[t];return i?`.${e} { border-radius: ${i} }`:null}generateBorderWidthCSS(e){let n=this.config.theme?.borderWidth||{};if(e==="border")return `.border { border-width: ${n.DEFAULT||"1px"} }`;let t=e.match(/^border-([trbl])$/);if(t){let r={t:"top",r:"right",b:"bottom",l:"left"},s=n.DEFAULT||"1px";return `.${e} { border-${r[t[1]]}-width: ${s} }`}let i=e.match(/^border-(\d+)$/);if(i){let r=n[i[1]];if(r)return `.${e} { border-width: ${r} }`}return null}generateGapCSS(e){let n=this.config.theme?.spacing||{};if(e.startsWith("gap-x-")){let r=e.slice(6),s=n[r];if(s)return `.${e} { column-gap: ${s} }`}if(e.startsWith("gap-y-")){let r=e.slice(6),s=n[r];if(s)return `.${e} { row-gap: ${s} }`}let t=e.slice(4),i=n[t];return i?`.${e} { gap: ${i} }`:null}generateSpaceBetweenCSS(e){let n=this.config.theme?.spacing||{};if(e.startsWith("space-x-")){let t=e.slice(8),i=n[t];if(i)return `.${e} > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(${i} * var(--tw-space-x-reverse)); margin-left: calc(${i} * calc(1 - var(--tw-space-x-reverse))) }`}if(e.startsWith("space-y-")){let t=e.slice(8),i=n[t];if(i)return `.${e} > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(${i} * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(${i} * var(--tw-space-y-reverse)) }`}return e==="space-x-reverse"?`.${e} > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1 }`:e==="space-y-reverse"?`.${e} > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 1 }`:null}generateLineHeightCSS(e){let n=this.config.theme?.lineHeight||{},t=e.slice(8),i=n[t];return i?`.${e} { line-height: ${i} }`:null}generateLetterSpacingCSS(e){let n=this.config.theme?.letterSpacing||{},t=e.slice(9),i=n[t];return i?`.${e} { letter-spacing: ${i} }`:null}generateGridColumnsCSS(e){let n=e.slice(10);if(n==="none")return `.${e} { grid-template-columns: none }`;if(n==="subgrid")return `.${e} { grid-template-columns: subgrid }`;let t=Number.parseInt(n,10);return !Number.isNaN(t)&&t>=1&&t<=12?`.${e} { grid-template-columns: repeat(${t}, minmax(0, 1fr)) }`:null}generateGridRowsCSS(e){let n=e.slice(10);if(n==="none")return `.${e} { grid-template-rows: none }`;if(n==="subgrid")return `.${e} { grid-template-rows: subgrid }`;let t=Number.parseInt(n,10);return !Number.isNaN(t)&&t>=1&&t<=6?`.${e} { grid-template-rows: repeat(${t}, minmax(0, 1fr)) }`:null}generateOpacityCSS(e){let n=e.slice(8),t=Number.parseInt(n,10);return !Number.isNaN(t)&&t>=0&&t<=100?`.${e} { opacity: ${t/100} }`:null}generateShadowCSS(e){let n=this.config.theme?.boxShadow||{};if(e==="shadow"){let r=n.DEFAULT||n[""];if(r)return `.shadow { box-shadow: ${r} }`}let t=e.slice(7),i=n[t];return i?`.${e} { box-shadow: ${i} }`:null}appendCSS(e){this.styleElement&&(this.styleElement.textContent+=`
|
|
2
|
+
${e}`);}clear(){this.generatedStyles.clear(),this.styleElement&&(this.styleElement.textContent="");}},u=null;function g(){return u||(u=new c),u}var h=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,n){let t=document.createElement("div");return t.className="fb-design-mode-overlay",Object.assign(t.style,{position:"absolute",border:e,pointerEvents:"none",zIndex:String(n),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 n=Array.from(this.hoveredElement.children).filter(r=>this.getReactFiberSource(r)!==null),t=this.childrenOverlays.indexOf(e),i=n[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 n=document.querySelectorAll("*");for(let t of n){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 r=t;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,i);return}}}getReactFiberSource(e){let n=e,t=Object.keys(n).find(s=>s.startsWith("__reactFiber$")||s.startsWith("__reactInternalInstance$"));if(!t)return null;let i=n[t],r=null;for(;i;){if(i._debugSource){let s={fileName:i._debugSource.fileName,lineNumber:i._debugSource.lineNumber,columnNumber:i._debugSource.columnNumber??0};if(r||(r=s),s.fileName.includes("/components/ui/")||s.fileName.includes("/components/common/")){i=i.return;continue}return s}i=i.return;}return r}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(n=>n.nodeType===Node.TEXT_NODE&&n.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(r=>r.classList.contains("fb-design-mode-overlay")||r.classList.contains("fb-design-mode-tag")?false:this.getReactFiberSource(r)!==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 n=Array.from(e.children).filter(t=>this.getReactFiberSource(t)!==null);for(;this.childrenOverlays.length<n.length;)this.childrenOverlays.push(this.createChildOverlay());n.forEach((t,i)=>{let r=this.childrenOverlays[i];r&&(this.updateOverlayPosition(r,t),r.style.display="block");});for(let t=n.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 n=Date.now(),t=n-this.lastClickTime,i=Math.hypot(e.clientX-this.lastClickPosition.x,e.clientY-this.lastClickPosition.y),s=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&&s.length>1?this.currentSelectionIndex=(this.currentSelectionIndex+1)%s.length:this.currentSelectionIndex=0;let o=s[this.currentSelectionIndex];if(!o)return;let a=this.getReactFiberSource(o);a&&(this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=o,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,o),this.selectionOverlay.style.display="block",this.updateTagLabel(o),this.selectionTagLabel.style.display="block",this.sendElementData(o,a),this.lastClickTime=n,this.lastClickPosition={x:e.clientX,y:e.clientY});};updateOverlayPosition(e,n){let t=n.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 n=e.getBoundingClientRect(),t=e.tagName.toLowerCase();this.selectionTagLabel.textContent=t,Object.assign(this.selectionTagLabel.style,{top:`${n.top+window.scrollY}px`,left:`${n.left+window.scrollX}px`});}getRelevantStyles(e){let n=window.getComputedStyle(e),t=["display","position","width","height","padding","margin","backgroundColor","color","fontSize","fontFamily"],i={};for(let r of t)i[r]=n.getPropertyValue(r);return i}getDirectTextContent(e){let n=Array.from(e.childNodes).filter(t=>t.nodeType===Node.TEXT_NODE).map(t=>t.textContent?.trim()).filter(Boolean);return n.length>0?n.join(" "):null}sendElementData(e,n){let t=this.getDirectTextContent(e),i={type:"FB_ELEMENT_SELECTED",data:{sourceFile:n.fileName,sourceLine:n.lineNumber,sourceColumn:n.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("*"),n=[];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 r=t,s=r;if(r.tagName!=="IMG"){let l=r.querySelector("img");l&&(s=l);}let o=this.getDirectTextContent(r),a="";r.className&&(typeof r.className=="string"?a=r.className:"baseVal"in r.className&&(a=r.className.baseVal)),n.push({sourceFile:i.fileName,sourceLine:i.lineNumber,sourceColumn:i.columnNumber,className:a,textContent:o,src:s.getAttribute("src")||void 0,alt:s.getAttribute("alt")||void 0,href:r.getAttribute("href")||void 0,target:r.getAttribute("target")||void 0,rel:r.getAttribute("rel")||void 0});}window.parent.postMessage({type:"FB_ALL_ELEMENTS_STATE",data:n},"*");}handleUpdateElement(e){let{sourceFile:n,sourceLine:t,sourceColumn:i,updates:r}=e;if(!n||!t||!r)return;let s=document.querySelectorAll("*");for(let o of s){let a=this.getReactFiberSource(o);if(a?.fileName===n&&a?.lineNumber===t&&a?.columnNumber===i){let l=o;if((r.src!==void 0||r.alt!==void 0)&&l.tagName!=="IMG"){let d=l.querySelector("img");d&&(l=d);}if(r.className!==void 0&&(g().generateClasses(r.className),l.className=r.className),r.textContent!==void 0){let d=Array.from(l.childNodes).find(p=>p.nodeType===Node.TEXT_NODE);d?d.textContent=r.textContent:l.textContent=r.textContent;}r.src!==void 0&&"src"in l&&(l.setAttribute("src",r.src),l.hasAttribute("srcset")&&l.removeAttribute("srcset")),r.alt!==void 0&&"alt"in l&&(l.alt=r.alt),r.href!==void 0&&"href"in l&&l.setAttribute("href",r.href),r.target!==void 0&&"target"in l&&l.setAttribute("target",r.target),r.rel!==void 0&&"rel"in l&&l.setAttribute("rel",r.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 n=document.getElementById("fb-design-mode-theme");n||(n=document.createElement("style"),n.id="fb-design-mode-theme",document.head.appendChild(n));let t="";if(e.lightVariables&&Object.keys(e.lightVariables).length>0){t+=`:root {
|
|
3
3
|
`;for(let[i,r]of Object.entries(e.lightVariables))t+=` ${i}: ${r};
|
|
4
4
|
`;t+=`}
|
|
5
5
|
|
|
6
6
|
`;}if(e.darkVariables&&Object.keys(e.darkVariables).length>0){t+=`.dark {
|
|
7
7
|
`;for(let[i,r]of Object.entries(e.darkVariables))t+=` ${i}: ${r};
|
|
8
8
|
`;t+=`}
|
|
9
|
-
`;}n.textContent=t;}};typeof window<"u"&&typeof document<"u"&&
|
|
9
|
+
`;}n.textContent=t;}};typeof window<"u"&&typeof document<"u"&&new h;//# sourceMappingURL=overlay.js.map
|
|
10
10
|
//# sourceMappingURL=overlay.js.map
|