@firebuzz/design-mode 0.1.0

package/README.md

@@ -0,0 +1,111 @@
+# @firebuzz/design-mode
+
+Design mode overlay and utilities for Firebuzz landing page templates. Enables visual editing of React components in development mode using React Fiber's `_debugSource`.
+
+## Features
+
+- **Visual Element Selection**: Click to select any element in your template
+- **Runtime Element Tracking**: Uses React Fiber internals (no build-time modifications needed)
+- **Client-side Tailwind Generation**: Generates CSS for Tailwind classes at runtime
+- **Theme Customization**: Live preview of theme changes (colors, fonts, etc.)
+- **Element Editing**: Edit className, text content, images, and links
+
+## Installation
+
+```bash
+pnpm add @firebuzz/design-mode
+```
+
+## Usage
+
+### 1. Add the Vite Plugin
+
+In your `vite.config.ts`:
+
+```typescript
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { firebuzzDesignMode } from "@firebuzz/design-mode";
+
+export default defineConfig({
+  plugins: [
+    react(),
+    firebuzzDesignMode(),
+  ],
+});
+```
+
+### 2. Create Design Mode Directory
+
+The plugin expects a Tailwind config JSON to be generated at `./src/design-mode/tailwind.config.json`. The directory will be created automatically.
+
+### 3. Enable Design Mode
+
+Design mode is automatically enabled in development (`NODE_ENV=development`). To disable it, set:
+
+```bash
+VITE_DESIGN_MODE=false
+```
+
+## Configuration
+
+The plugin accepts optional configuration:
+
+```typescript
+firebuzzDesignMode({
+  // Path to your tailwind.config.js (default: "./tailwind.config.js")
+  tailwindConfigPath: "./tailwind.config.js",
+
+  // Output path for generated JSON (default: "./src/design-mode/tailwind.config.json")
+  outputPath: "./src/design-mode/tailwind.config.json",
+
+  // Custom overlay script path (default: uses package's overlay)
+  overlayPath: "@firebuzz/design-mode/overlay",
+})
+```
+
+## How It Works
+
+1. **Vite Plugin**: Generates Tailwind config JSON at build time and injects the overlay script
+2. **Overlay Script**: Listens for postMessage events from parent window and enables element selection
+3. **Tailwind Generator**: Generates CSS for Tailwind classes at runtime as they're applied
+4. **React Fiber Integration**: Tracks element source locations using React's internal `_debugSource` property
+
+## Message Protocol
+
+The overlay communicates with the parent window using postMessage:
+
+### Messages to Overlay (from parent)
+
+- `ENABLE_DESIGN_MODE`: Enable design mode overlay
+- `DISABLE_DESIGN_MODE`: Disable design mode overlay
+- `FB_SELECT_ELEMENT`: Programmatically select an element
+- `FB_DESELECT_ELEMENT`: Deselect the current element
+- `FB_UPDATE_ELEMENT`: Update element properties (className, textContent, etc.)
+- `FB_UPDATE_THEME`: Update theme CSS variables
+- `FB_GET_ALL_ELEMENTS_STATE`: Request current state of all elements
+
+### Messages from Overlay (to parent)
+
+- `FB_ELEMENT_SELECTED`: User selected an element (includes source location and properties)
+- `FB_ALL_ELEMENTS_STATE`: Response with all elements' current state
+
+## TypeScript
+
+The package includes full TypeScript definitions:
+
+```typescript
+import type {
+  DesignModeMessage,
+  ElementSelectedMessage,
+  ElementData,
+} from "@firebuzz/design-mode";
+```
+
+## Development
+
+This package is part of the Firebuzz monorepo and is designed to work with Vite-based React templates.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,87 @@
+import { Plugin } from 'vite';
+
+/**
+ * Vite plugin that enables design mode features for Firebuzz templates
+ * - Generates Tailwind config JSON for client-side use
+ * - Injects overlay script for element selection
+ *
+ * NOTE: This plugin does NOT modify JSX/TSX files.
+ * Element tracking is done at runtime using React Fiber's _debugSource.
+ *
+ * @param options - Plugin configuration options
+ * @param options.tailwindConfigPath - Path to tailwind.config.js (default: "./tailwind.config.js")
+ * @param options.outputPath - Path to output tailwind.config.json (default: "./src/design-mode/tailwind.config.json")
+ * @param options.overlayPath - Path to overlay script (default: uses package's overlay.ts)
+ */
+declare function firebuzzDesignMode(options?: {
+    tailwindConfigPath?: string;
+    outputPath?: string;
+    overlayPath?: string;
+}): Plugin;
+
+/**
+ * TypeScript type definitions for Firebuzz Design Mode
+ */
+interface SourceLocation {
+    fileName: string;
+    lineNumber: number;
+    columnNumber: number;
+}
+interface ElementUpdates {
+    className?: string;
+    textContent?: string;
+    src?: string;
+    alt?: string;
+    href?: string;
+    target?: string;
+    rel?: string;
+}
+interface ThemeVariables {
+    lightVariables?: Record<string, string>;
+    darkVariables?: Record<string, string>;
+}
+interface DesignModeMessage {
+    type: "ENABLE_DESIGN_MODE" | "DISABLE_DESIGN_MODE" | "FB_UPDATE_ELEMENT" | "FB_GET_ALL_ELEMENTS_STATE" | "FB_UPDATE_THEME" | "FB_DESELECT_ELEMENT" | "FB_SELECT_ELEMENT";
+    enabled?: boolean;
+    sourceFile?: string;
+    sourceLine?: number;
+    sourceColumn?: number;
+    updates?: ElementUpdates;
+    theme?: ThemeVariables;
+}
+interface ElementData {
+    sourceFile: string;
+    sourceLine: number;
+    sourceColumn: number;
+    tagName: string;
+    className: string;
+    textContent: string | null;
+    src?: string;
+    alt?: string;
+    href?: string;
+    target?: string;
+    rel?: string;
+    computedStyles: Record<string, string>;
+}
+interface ElementSelectedMessage {
+    type: "FB_ELEMENT_SELECTED";
+    data: ElementData;
+}
+interface AllElementsStateMessage {
+    type: "FB_ALL_ELEMENTS_STATE";
+    data: Array<{
+        sourceFile: string;
+        sourceLine: number;
+        sourceColumn: number;
+        className: string;
+        textContent: string | null;
+        src?: string;
+        alt?: string;
+        href?: string;
+        target?: string;
+        rel?: string;
+    }>;
+}
+type DesignModeMessageType = DesignModeMessage | ElementSelectedMessage | AllElementsStateMessage;
+
+export { type AllElementsStateMessage, type DesignModeMessage, type DesignModeMessageType, type ElementData, type ElementSelectedMessage, type ElementUpdates, type SourceLocation, type ThemeVariables, firebuzzDesignMode };

package/dist/index.d.ts

@@ -0,0 +1,87 @@
+import { Plugin } from 'vite';
+
+/**
+ * Vite plugin that enables design mode features for Firebuzz templates
+ * - Generates Tailwind config JSON for client-side use
+ * - Injects overlay script for element selection
+ *
+ * NOTE: This plugin does NOT modify JSX/TSX files.
+ * Element tracking is done at runtime using React Fiber's _debugSource.
+ *
+ * @param options - Plugin configuration options
+ * @param options.tailwindConfigPath - Path to tailwind.config.js (default: "./tailwind.config.js")
+ * @param options.outputPath - Path to output tailwind.config.json (default: "./src/design-mode/tailwind.config.json")
+ * @param options.overlayPath - Path to overlay script (default: uses package's overlay.ts)
+ */
+declare function firebuzzDesignMode(options?: {
+    tailwindConfigPath?: string;
+    outputPath?: string;
+    overlayPath?: string;
+}): Plugin;
+
+/**
+ * TypeScript type definitions for Firebuzz Design Mode
+ */
+interface SourceLocation {
+    fileName: string;
+    lineNumber: number;
+    columnNumber: number;
+}
+interface ElementUpdates {
+    className?: string;
+    textContent?: string;
+    src?: string;
+    alt?: string;
+    href?: string;
+    target?: string;
+    rel?: string;
+}
+interface ThemeVariables {
+    lightVariables?: Record<string, string>;
+    darkVariables?: Record<string, string>;
+}
+interface DesignModeMessage {
+    type: "ENABLE_DESIGN_MODE" | "DISABLE_DESIGN_MODE" | "FB_UPDATE_ELEMENT" | "FB_GET_ALL_ELEMENTS_STATE" | "FB_UPDATE_THEME" | "FB_DESELECT_ELEMENT" | "FB_SELECT_ELEMENT";
+    enabled?: boolean;
+    sourceFile?: string;
+    sourceLine?: number;
+    sourceColumn?: number;
+    updates?: ElementUpdates;
+    theme?: ThemeVariables;
+}
+interface ElementData {
+    sourceFile: string;
+    sourceLine: number;
+    sourceColumn: number;
+    tagName: string;
+    className: string;
+    textContent: string | null;
+    src?: string;
+    alt?: string;
+    href?: string;
+    target?: string;
+    rel?: string;
+    computedStyles: Record<string, string>;
+}
+interface ElementSelectedMessage {
+    type: "FB_ELEMENT_SELECTED";
+    data: ElementData;
+}
+interface AllElementsStateMessage {
+    type: "FB_ALL_ELEMENTS_STATE";
+    data: Array<{
+        sourceFile: string;
+        sourceLine: number;
+        sourceColumn: number;
+        className: string;
+        textContent: string | null;
+        src?: string;
+        alt?: string;
+        href?: string;
+        target?: string;
+        rel?: string;
+    }>;
+}
+type DesignModeMessageType = DesignModeMessage | ElementSelectedMessage | AllElementsStateMessage;
+
+export { type AllElementsStateMessage, type DesignModeMessage, type DesignModeMessageType, type ElementData, type ElementSelectedMessage, type ElementUpdates, type SourceLocation, type ThemeVariables, firebuzzDesignMode };

package/dist/index.js

@@ -0,0 +1,11 @@
+'use strict';var d=require('fs/promises'),i=require('path'),f=require('esbuild');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var d__default=/*#__PURE__*/_interopDefault(d);var i__default=/*#__PURE__*/_interopDefault(i);var f__namespace=/*#__PURE__*/_interopNamespace(f);function m(n){let r=process.env.NODE_ENV==="development"&&process.env.VITE_DESIGN_MODE!=="false",o=process.cwd(),a=i__default.default.resolve(o,n?.tailwindConfigPath||"./tailwind.config.js"),s=i__default.default.resolve(o,n?.outputPath||"./src/design-mode/tailwind.config.json"),l=i__default.default.resolve(o,"./.fb-tailwind.config.js");n?.overlayPath||"@firebuzz/design-mode/overlay";return {name:"vite-plugin-firebuzz-design-mode",enforce:"pre",async buildStart(){if(r)try{await u();}catch(e){console.warn("[Firebuzz Design Mode] Could not generate Tailwind config:",e);}},configureServer(e){if(r)try{e.watcher.add(a),e.watcher.on("change",async t=>{i__default.default.normalize(t)===i__default.default.normalize(a)&&await u();});}catch(t){console.warn("[Firebuzz Design Mode] Could not watch Tailwind config:",t);}},transformIndexHtml(e){if(!r)return e;let c=`
+<script type="module">
+	// Load Tailwind config and make it available globally
+	const response = await fetch('${s.replace(o,"")}');
+	const config = await response.json();
+	window.__FIREBUZZ_TAILWIND_CONFIG__ = config;
+
+	// Then load the overlay
+	await import('/@fs${i__default.default.resolve(__dirname,"overlay.js").replace(/\\/g,"/")}');
+</script>`;return e.replace("</body>",`${c}</body>`)}};async function u(){try{await f__namespace.build({entryPoints:[a],outfile:l,bundle:!0,format:"esm",banner:{js:'import { createRequire } from "module"; const require = createRequire(import.meta.url);'}});let e=await import(`${l}?update=${Date.now()}`);if(!e?.default)throw new Error("Invalid Tailwind config structure");let{default:t}=await import('tailwindcss/resolveConfig.js'),c=t(e.default),g=i__default.default.dirname(s);await d__default.default.mkdir(g,{recursive:!0}),await d__default.default.writeFile(s,JSON.stringify(c,null,2)),await d__default.default.unlink(l).catch(()=>{}),console.log("[Firebuzz Design Mode] Generated Tailwind config JSON successfully");}catch(e){throw console.error("[Firebuzz Design Mode] Error generating config:",e),e}}}exports.firebuzzDesignMode=m;//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/vite-plugin.ts"],"names":["firebuzzDesignMode","options","isDesignModeEnabled","projectRoot","tailwindConfigFile","path","tailwindJsonOutfile","tailwindIntermediateFile","generateTailwindConfig","error","server","changedPath","html","scripts","f","userConfig","resolveConfig","resolvedConfig","outputDir","fs"],"mappings":"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","file":"index.js","sourcesContent":["import fs from \"node:fs/promises\";\nimport path from \"node:path\";\nimport * as esbuild from \"esbuild\";\nimport type { Plugin } from \"vite\";\n\n/**\n * Vite plugin that enables design mode features for Firebuzz templates\n * - Generates Tailwind config JSON for client-side use\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 *\n * @param options - Plugin configuration options\n * @param options.tailwindConfigPath - Path to tailwind.config.js (default: \"./tailwind.config.js\")\n * @param options.outputPath - Path to output tailwind.config.json (default: \"./src/design-mode/tailwind.config.json\")\n * @param options.overlayPath - Path to overlay script (default: uses package's overlay.ts)\n */\nexport function firebuzzDesignMode(options?: {\n\ttailwindConfigPath?: string;\n\toutputPath?: string;\n\toverlayPath?: string;\n}): 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\tconst tailwindConfigFile = path.resolve(\n\t\tprojectRoot,\n\t\toptions?.tailwindConfigPath || \"./tailwind.config.js\",\n\t);\n\tconst tailwindJsonOutfile = path.resolve(\n\t\tprojectRoot,\n\t\toptions?.outputPath || \"./src/design-mode/tailwind.config.json\",\n\t);\n\tconst tailwindIntermediateFile = path.resolve(\n\t\tprojectRoot,\n\t\t\"./.fb-tailwind.config.js\",\n\t);\n\n\t// Use package's overlay script if not specified\n\tconst overlayScriptPath = options?.overlayPath || \"@firebuzz/design-mode/overlay\";\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// Generate Tailwind config JSON for client-side use\n\t\t\ttry {\n\t\t\t\tawait generateTailwindConfig();\n\t\t\t} catch (error) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t\"[Firebuzz Design Mode] Could not generate Tailwind config:\",\n\t\t\t\t\terror,\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\n\t\tconfigureServer(server) {\n\t\t\tif (!isDesignModeEnabled) return;\n\n\t\t\t// Watch Tailwind config for changes\n\t\t\ttry {\n\t\t\t\tserver.watcher.add(tailwindConfigFile);\n\t\t\t\tserver.watcher.on(\"change\", async (changedPath) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tpath.normalize(changedPath) === path.normalize(tailwindConfigFile)\n\t\t\t\t\t) {\n\t\t\t\t\t\tawait generateTailwindConfig();\n\t\t\t\t\t}\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 watch Tailwind config:\",\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 config as a global variable first\n\t\t\tconst configJsonPath = tailwindJsonOutfile.replace(projectRoot, \"\");\n\n\t\t\t// Inject the overlay script before </body>\n\t\t\tconst scripts = `\n<script type=\"module\">\n\t// Load Tailwind config and make it available globally\n\tconst response = await fetch('${configJsonPath}');\n\tconst config = await response.json();\n\twindow.__FIREBUZZ_TAILWIND_CONFIG__ = config;\n\n\t// Then load the overlay\n\tawait import('/@fs${path.resolve(__dirname, 'overlay.js').replace(/\\\\/g, '/')}');\n</script>`;\n\n\t\t\treturn html.replace(\"</body>\", `${scripts}</body>`);\n\t\t},\n\t};\n\n\tasync function generateTailwindConfig() {\n\t\ttry {\n\t\t\t// Bundle Tailwind config using esbuild\n\t\t\tawait esbuild.build({\n\t\t\t\tentryPoints: [tailwindConfigFile],\n\t\t\t\toutfile: tailwindIntermediateFile,\n\t\t\t\tbundle: true,\n\t\t\t\tformat: \"esm\",\n\t\t\t\tbanner: {\n\t\t\t\t\tjs: 'import { createRequire } from \"module\"; const require = createRequire(import.meta.url);',\n\t\t\t\t},\n\t\t\t});\n\n\t\t\t// Import and resolve the config\n\t\t\tconst userConfig = await import(\n\t\t\t\t`${tailwindIntermediateFile}?update=${Date.now()}`\n\t\t\t);\n\n\t\t\tif (!userConfig?.default) {\n\t\t\t\tthrow new Error(\"Invalid Tailwind config structure\");\n\t\t\t}\n\n\t\t\t// Dynamically import tailwindcss/resolveConfig\n\t\t\tconst { default: resolveConfig } = await import(\n\t\t\t\t\"tailwindcss/resolveConfig.js\"\n\t\t\t);\n\t\t\tconst resolvedConfig = resolveConfig(userConfig.default);\n\n\t\t\t// Ensure output directory exists\n\t\t\tconst outputDir = path.dirname(tailwindJsonOutfile);\n\t\t\tawait fs.mkdir(outputDir, { recursive: true });\n\n\t\t\t// Write resolved config to JSON\n\t\t\tawait fs.writeFile(\n\t\t\t\ttailwindJsonOutfile,\n\t\t\t\tJSON.stringify(resolvedConfig, null, 2),\n\t\t\t);\n\n\t\t\t// Clean up intermediate file\n\t\t\tawait fs.unlink(tailwindIntermediateFile).catch(() => {});\n\n\t\t\tconsole.log(\n\t\t\t\t\"[Firebuzz Design Mode] Generated Tailwind config JSON successfully\",\n\t\t\t);\n\t\t} catch (error) {\n\t\t\tconsole.error(\"[Firebuzz Design Mode] Error generating config:\", error);\n\t\t\tthrow error;\n\t\t}\n\t}\n}\n"]}

package/dist/index.mjs

@@ -0,0 +1,11 @@
+import d from'fs/promises';import i from'path';import*as f from'esbuild';function m(n){let r=process.env.NODE_ENV==="development"&&process.env.VITE_DESIGN_MODE!=="false",o=process.cwd(),a=i.resolve(o,n?.tailwindConfigPath||"./tailwind.config.js"),s=i.resolve(o,n?.outputPath||"./src/design-mode/tailwind.config.json"),l=i.resolve(o,"./.fb-tailwind.config.js");n?.overlayPath||"@firebuzz/design-mode/overlay";return {name:"vite-plugin-firebuzz-design-mode",enforce:"pre",async buildStart(){if(r)try{await u();}catch(e){console.warn("[Firebuzz Design Mode] Could not generate Tailwind config:",e);}},configureServer(e){if(r)try{e.watcher.add(a),e.watcher.on("change",async t=>{i.normalize(t)===i.normalize(a)&&await u();});}catch(t){console.warn("[Firebuzz Design Mode] Could not watch Tailwind config:",t);}},transformIndexHtml(e){if(!r)return e;let c=`
+<script type="module">
+	// Load Tailwind config and make it available globally
+	const response = await fetch('${s.replace(o,"")}');
+	const config = await response.json();
+	window.__FIREBUZZ_TAILWIND_CONFIG__ = config;
+
+	// Then load the overlay
+	await import('/@fs${i.resolve(__dirname,"overlay.js").replace(/\\/g,"/")}');
+</script>`;return e.replace("</body>",`${c}</body>`)}};async function u(){try{await f.build({entryPoints:[a],outfile:l,bundle:!0,format:"esm",banner:{js:'import { createRequire } from "module"; const require = createRequire(import.meta.url);'}});let e=await import(`${l}?update=${Date.now()}`);if(!e?.default)throw new Error("Invalid Tailwind config structure");let{default:t}=await import('tailwindcss/resolveConfig.js'),c=t(e.default),g=i.dirname(s);await d.mkdir(g,{recursive:!0}),await d.writeFile(s,JSON.stringify(c,null,2)),await d.unlink(l).catch(()=>{}),console.log("[Firebuzz Design Mode] Generated Tailwind config JSON successfully");}catch(e){throw console.error("[Firebuzz Design Mode] Error generating config:",e),e}}}export{m as firebuzzDesignMode};//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/vite-plugin.ts"],"names":["firebuzzDesignMode","options","isDesignModeEnabled","projectRoot","tailwindConfigFile","path","tailwindJsonOutfile","tailwindIntermediateFile","generateTailwindConfig","error","server","changedPath","html","scripts","userConfig","resolveConfig","resolvedConfig","outputDir","fs"],"mappings":"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","file":"index.mjs","sourcesContent":["import fs from \"node:fs/promises\";\nimport path from \"node:path\";\nimport * as esbuild from \"esbuild\";\nimport type { Plugin } from \"vite\";\n\n/**\n * Vite plugin that enables design mode features for Firebuzz templates\n * - Generates Tailwind config JSON for client-side use\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 *\n * @param options - Plugin configuration options\n * @param options.tailwindConfigPath - Path to tailwind.config.js (default: \"./tailwind.config.js\")\n * @param options.outputPath - Path to output tailwind.config.json (default: \"./src/design-mode/tailwind.config.json\")\n * @param options.overlayPath - Path to overlay script (default: uses package's overlay.ts)\n */\nexport function firebuzzDesignMode(options?: {\n\ttailwindConfigPath?: string;\n\toutputPath?: string;\n\toverlayPath?: string;\n}): 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\tconst tailwindConfigFile = path.resolve(\n\t\tprojectRoot,\n\t\toptions?.tailwindConfigPath || \"./tailwind.config.js\",\n\t);\n\tconst tailwindJsonOutfile = path.resolve(\n\t\tprojectRoot,\n\t\toptions?.outputPath || \"./src/design-mode/tailwind.config.json\",\n\t);\n\tconst tailwindIntermediateFile = path.resolve(\n\t\tprojectRoot,\n\t\t\"./.fb-tailwind.config.js\",\n\t);\n\n\t// Use package's overlay script if not specified\n\tconst overlayScriptPath = options?.overlayPath || \"@firebuzz/design-mode/overlay\";\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// Generate Tailwind config JSON for client-side use\n\t\t\ttry {\n\t\t\t\tawait generateTailwindConfig();\n\t\t\t} catch (error) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t\"[Firebuzz Design Mode] Could not generate Tailwind config:\",\n\t\t\t\t\terror,\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\n\t\tconfigureServer(server) {\n\t\t\tif (!isDesignModeEnabled) return;\n\n\t\t\t// Watch Tailwind config for changes\n\t\t\ttry {\n\t\t\t\tserver.watcher.add(tailwindConfigFile);\n\t\t\t\tserver.watcher.on(\"change\", async (changedPath) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tpath.normalize(changedPath) === path.normalize(tailwindConfigFile)\n\t\t\t\t\t) {\n\t\t\t\t\t\tawait generateTailwindConfig();\n\t\t\t\t\t}\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 watch Tailwind config:\",\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 config as a global variable first\n\t\t\tconst configJsonPath = tailwindJsonOutfile.replace(projectRoot, \"\");\n\n\t\t\t// Inject the overlay script before </body>\n\t\t\tconst scripts = `\n<script type=\"module\">\n\t// Load Tailwind config and make it available globally\n\tconst response = await fetch('${configJsonPath}');\n\tconst config = await response.json();\n\twindow.__FIREBUZZ_TAILWIND_CONFIG__ = config;\n\n\t// Then load the overlay\n\tawait import('/@fs${path.resolve(__dirname, 'overlay.js').replace(/\\\\/g, '/')}');\n</script>`;\n\n\t\t\treturn html.replace(\"</body>\", `${scripts}</body>`);\n\t\t},\n\t};\n\n\tasync function generateTailwindConfig() {\n\t\ttry {\n\t\t\t// Bundle Tailwind config using esbuild\n\t\t\tawait esbuild.build({\n\t\t\t\tentryPoints: [tailwindConfigFile],\n\t\t\t\toutfile: tailwindIntermediateFile,\n\t\t\t\tbundle: true,\n\t\t\t\tformat: \"esm\",\n\t\t\t\tbanner: {\n\t\t\t\t\tjs: 'import { createRequire } from \"module\"; const require = createRequire(import.meta.url);',\n\t\t\t\t},\n\t\t\t});\n\n\t\t\t// Import and resolve the config\n\t\t\tconst userConfig = await import(\n\t\t\t\t`${tailwindIntermediateFile}?update=${Date.now()}`\n\t\t\t);\n\n\t\t\tif (!userConfig?.default) {\n\t\t\t\tthrow new Error(\"Invalid Tailwind config structure\");\n\t\t\t}\n\n\t\t\t// Dynamically import tailwindcss/resolveConfig\n\t\t\tconst { default: resolveConfig } = await import(\n\t\t\t\t\"tailwindcss/resolveConfig.js\"\n\t\t\t);\n\t\t\tconst resolvedConfig = resolveConfig(userConfig.default);\n\n\t\t\t// Ensure output directory exists\n\t\t\tconst outputDir = path.dirname(tailwindJsonOutfile);\n\t\t\tawait fs.mkdir(outputDir, { recursive: true });\n\n\t\t\t// Write resolved config to JSON\n\t\t\tawait fs.writeFile(\n\t\t\t\ttailwindJsonOutfile,\n\t\t\t\tJSON.stringify(resolvedConfig, null, 2),\n\t\t\t);\n\n\t\t\t// Clean up intermediate file\n\t\t\tawait fs.unlink(tailwindIntermediateFile).catch(() => {});\n\n\t\t\tconsole.log(\n\t\t\t\t\"[Firebuzz Design Mode] Generated Tailwind config JSON successfully\",\n\t\t\t);\n\t\t} catch (error) {\n\t\t\tconsole.error(\"[Firebuzz Design Mode] Error generating config:\", error);\n\t\t\tthrow error;\n\t\t}\n\t}\n}\n"]}

package/package.json

@@ -0,0 +1,58 @@
+{
+	"name": "@firebuzz/design-mode",
+	"version": "0.1.0",
+	"description": "Design mode overlay and utilities for Firebuzz landing page templates",
+	"author": "Firebuzz Team",
+	"license": "MIT",
+	"main": "./dist/index.js",
+	"module": "./dist/index.mjs",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.mjs",
+			"require": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"README.md"
+	],
+	"scripts": {
+		"build": "tsup",
+		"dev": "tsup --watch",
+		"typecheck": "tsc --noEmit",
+		"clean": "rm -rf dist",
+		"prepublishOnly": "pnpm build"
+	},
+	"peerDependencies": {
+		"react": ">=18.0.0",
+		"tailwindcss": "^3.0.0",
+		"vite": "^6.0.0"
+	},
+	"devDependencies": {
+		"@types/babel__generator": "^7.27.0",
+		"@types/node": "^22.0.0",
+		"tsup": "^8.0.0",
+		"typescript": "^5.7.2"
+	},
+	"dependencies": {
+		"esbuild": "^0.25.11"
+	},
+	"keywords": [
+		"design-mode",
+		"visual-editor",
+		"firebuzz",
+		"landing-pages",
+		"vite",
+		"tailwind"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/firebuzz/firebuzz.git",
+		"directory": "packages/design-mode"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}