@firebuzz/design-mode 0.2.0 → 0.2.2
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 +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/dist/overlay.js +1 -1
- package/dist/overlay.js.map +1 -1
- package/dist/overlay.mjs +1 -1
- package/dist/overlay.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,3 +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
2
|
exports.firebuzzDesignMode=d;//# sourceMappingURL=index.js.map
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/vite-plugin.ts"],"names":["firebuzzDesignMode","isDesignModeEnabled","projectRoot","overlayOutputPath","path","currentFileUrl","currentFilePath","fileURLToPath","packageRoot","overlaySource","fs","error","html","tailwindCDN","overlayScript","modifiedHtml"],"mappings":"mUAaO,SAASA,CAAAA,EAA6B,CAE5C,IAAMC,CAAAA,CACL,
|
|
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,qDAAA,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 Play CDN for runtime CSS generation\n\t\t\tconst tailwindCDN = '<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,3 +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
2
|
export{d as firebuzzDesignMode};//# sourceMappingURL=index.mjs.map
|
|
3
3
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/vite-plugin.ts"],"names":["firebuzzDesignMode","isDesignModeEnabled","projectRoot","overlayOutputPath","path","currentFileUrl","currentFilePath","fileURLToPath","packageRoot","overlaySource","fs","error","html","tailwindCDN","overlayScript","modifiedHtml"],"mappings":"+EAaO,SAASA,CAAAA,EAA6B,CAE5C,IAAMC,CAAAA,CACL,
|
|
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,qDAAA,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 Play CDN for runtime CSS generation\n\t\t\tconst tailwindCDN = '<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,5 +1,5 @@
|
|
|
1
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 {
|
|
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,tagName:r.tagName,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
|
|