@firebuzz/design-mode 0.4.3 → 0.4.4
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 -105
- package/dist/index.d.ts +1 -105
- package/dist/index.js +2 -60
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -60
- package/dist/index.mjs.map +1 -1
- package/dist/overlay.js +7 -7
- package/dist/overlay.js.map +1 -1
- package/dist/overlay.mjs +7 -7
- package/dist/overlay.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -66,70 +66,6 @@ interface AllElementsStateMessage {
|
|
|
66
66
|
}
|
|
67
67
|
type DesignModeMessageType = DesignModeMessage | ElementSelectedMessage | AllElementsStateMessage;
|
|
68
68
|
|
|
69
|
-
/**
|
|
70
|
-
* Email theme utilities for parsing and generating email theme configuration files.
|
|
71
|
-
* Email templates use a simpler theme format than landing pages:
|
|
72
|
-
* - Hex color values (email clients don't support oklch)
|
|
73
|
-
* - Single font (primary) instead of sans/serif/mono
|
|
74
|
-
* - Border radius object for lg/md/sm
|
|
75
|
-
* - No dark mode support
|
|
76
|
-
*/
|
|
77
|
-
/**
|
|
78
|
-
* Email theme interface matching the structure in email templates' theme.ts
|
|
79
|
-
*/
|
|
80
|
-
interface EmailTheme {
|
|
81
|
-
colors: {
|
|
82
|
-
background: string;
|
|
83
|
-
foreground: string;
|
|
84
|
-
card: string;
|
|
85
|
-
cardForeground: string;
|
|
86
|
-
popover: string;
|
|
87
|
-
popoverForeground: string;
|
|
88
|
-
primary: string;
|
|
89
|
-
primaryForeground: string;
|
|
90
|
-
secondary: string;
|
|
91
|
-
secondaryForeground: string;
|
|
92
|
-
muted: string;
|
|
93
|
-
mutedForeground: string;
|
|
94
|
-
accent: string;
|
|
95
|
-
accentForeground: string;
|
|
96
|
-
destructive: string;
|
|
97
|
-
destructiveForeground: string;
|
|
98
|
-
border: string;
|
|
99
|
-
input: string;
|
|
100
|
-
ring: string;
|
|
101
|
-
chart1: string;
|
|
102
|
-
chart2: string;
|
|
103
|
-
chart3: string;
|
|
104
|
-
chart4: string;
|
|
105
|
-
chart5: string;
|
|
106
|
-
};
|
|
107
|
-
fonts: {
|
|
108
|
-
primary: string;
|
|
109
|
-
};
|
|
110
|
-
borderRadius: {
|
|
111
|
-
lg: string;
|
|
112
|
-
md: string;
|
|
113
|
-
sm: string;
|
|
114
|
-
};
|
|
115
|
-
}
|
|
116
|
-
/**
|
|
117
|
-
* Parse an email theme from a theme.ts file content.
|
|
118
|
-
* Extracts color values, fonts, and border radius from the TypeScript source.
|
|
119
|
-
*
|
|
120
|
-
* @param content - The content of the theme.ts file
|
|
121
|
-
* @returns Parsed EmailTheme object
|
|
122
|
-
*/
|
|
123
|
-
declare function parseEmailThemeFromFile(content: string): EmailTheme;
|
|
124
|
-
/**
|
|
125
|
-
* Generate a theme.ts file content from an EmailTheme object.
|
|
126
|
-
* Produces a properly formatted TypeScript file that can be written to the email template.
|
|
127
|
-
*
|
|
128
|
-
* @param theme - The EmailTheme object to generate
|
|
129
|
-
* @returns TypeScript file content as a string
|
|
130
|
-
*/
|
|
131
|
-
declare function generateEmailThemeFile(theme: EmailTheme): string;
|
|
132
|
-
|
|
133
69
|
/**
|
|
134
70
|
* React plugin configuration that should be applied to enable design mode.
|
|
135
71
|
* Works with both @vitejs/plugin-react and @vitejs/plugin-react-swc.
|
|
@@ -164,44 +100,4 @@ declare function getReactPluginConfig(): {
|
|
|
164
100
|
*/
|
|
165
101
|
declare function firebuzzDesignMode(): Plugin;
|
|
166
102
|
|
|
167
|
-
|
|
168
|
-
* React plugin configuration for email design mode.
|
|
169
|
-
* Works with both @vitejs/plugin-react and @vitejs/plugin-react-swc.
|
|
170
|
-
*
|
|
171
|
-
* Usage:
|
|
172
|
-
* ```ts
|
|
173
|
-
* import react from '@vitejs/plugin-react'
|
|
174
|
-
* import { firebuzzEmailDesignMode, getEmailReactPluginConfig } from '@firebuzz/design-mode'
|
|
175
|
-
*
|
|
176
|
-
* export default defineConfig({
|
|
177
|
-
* plugins: [
|
|
178
|
-
* react(getEmailReactPluginConfig()),
|
|
179
|
-
* firebuzzEmailDesignMode(),
|
|
180
|
-
* ],
|
|
181
|
-
* })
|
|
182
|
-
* ```
|
|
183
|
-
*/
|
|
184
|
-
declare function getEmailReactPluginConfig(): {
|
|
185
|
-
babel?: undefined;
|
|
186
|
-
} | {
|
|
187
|
-
babel: {
|
|
188
|
-
plugins: {}[][];
|
|
189
|
-
};
|
|
190
|
-
};
|
|
191
|
-
/**
|
|
192
|
-
* Vite plugin that enables design mode features for Firebuzz email templates.
|
|
193
|
-
*
|
|
194
|
-
* - Injects Tailwind v4 Browser CDN for runtime class editing
|
|
195
|
-
* - Injects overlay script for element selection
|
|
196
|
-
* - Works with React Email components
|
|
197
|
-
*
|
|
198
|
-
* NOTE: React Email's <Tailwind> component converts className to inline styles,
|
|
199
|
-
* leaving the class attribute empty. By injecting Tailwind CDN, we enable
|
|
200
|
-
* real-time className updates during design mode.
|
|
201
|
-
*
|
|
202
|
-
* NOTE: You must also configure the React plugin with getEmailReactPluginConfig()
|
|
203
|
-
* to enable element source tracking.
|
|
204
|
-
*/
|
|
205
|
-
declare function firebuzzEmailDesignMode(): Plugin;
|
|
206
|
-
|
|
207
|
-
export { type AllElementsStateMessage, type DesignModeMessage, type DesignModeMessageType, type ElementData, type ElementSelectedMessage, type ElementUpdates, type EmailTheme, type SourceLocation, type ThemeVariables, firebuzzDesignMode, firebuzzEmailDesignMode, generateEmailThemeFile, getEmailReactPluginConfig, getReactPluginConfig, parseEmailThemeFromFile };
|
|
103
|
+
export { type AllElementsStateMessage, type DesignModeMessage, type DesignModeMessageType, type ElementData, type ElementSelectedMessage, type ElementUpdates, type SourceLocation, type ThemeVariables, firebuzzDesignMode, getReactPluginConfig };
|
package/dist/index.d.ts
CHANGED
|
@@ -66,70 +66,6 @@ interface AllElementsStateMessage {
|
|
|
66
66
|
}
|
|
67
67
|
type DesignModeMessageType = DesignModeMessage | ElementSelectedMessage | AllElementsStateMessage;
|
|
68
68
|
|
|
69
|
-
/**
|
|
70
|
-
* Email theme utilities for parsing and generating email theme configuration files.
|
|
71
|
-
* Email templates use a simpler theme format than landing pages:
|
|
72
|
-
* - Hex color values (email clients don't support oklch)
|
|
73
|
-
* - Single font (primary) instead of sans/serif/mono
|
|
74
|
-
* - Border radius object for lg/md/sm
|
|
75
|
-
* - No dark mode support
|
|
76
|
-
*/
|
|
77
|
-
/**
|
|
78
|
-
* Email theme interface matching the structure in email templates' theme.ts
|
|
79
|
-
*/
|
|
80
|
-
interface EmailTheme {
|
|
81
|
-
colors: {
|
|
82
|
-
background: string;
|
|
83
|
-
foreground: string;
|
|
84
|
-
card: string;
|
|
85
|
-
cardForeground: string;
|
|
86
|
-
popover: string;
|
|
87
|
-
popoverForeground: string;
|
|
88
|
-
primary: string;
|
|
89
|
-
primaryForeground: string;
|
|
90
|
-
secondary: string;
|
|
91
|
-
secondaryForeground: string;
|
|
92
|
-
muted: string;
|
|
93
|
-
mutedForeground: string;
|
|
94
|
-
accent: string;
|
|
95
|
-
accentForeground: string;
|
|
96
|
-
destructive: string;
|
|
97
|
-
destructiveForeground: string;
|
|
98
|
-
border: string;
|
|
99
|
-
input: string;
|
|
100
|
-
ring: string;
|
|
101
|
-
chart1: string;
|
|
102
|
-
chart2: string;
|
|
103
|
-
chart3: string;
|
|
104
|
-
chart4: string;
|
|
105
|
-
chart5: string;
|
|
106
|
-
};
|
|
107
|
-
fonts: {
|
|
108
|
-
primary: string;
|
|
109
|
-
};
|
|
110
|
-
borderRadius: {
|
|
111
|
-
lg: string;
|
|
112
|
-
md: string;
|
|
113
|
-
sm: string;
|
|
114
|
-
};
|
|
115
|
-
}
|
|
116
|
-
/**
|
|
117
|
-
* Parse an email theme from a theme.ts file content.
|
|
118
|
-
* Extracts color values, fonts, and border radius from the TypeScript source.
|
|
119
|
-
*
|
|
120
|
-
* @param content - The content of the theme.ts file
|
|
121
|
-
* @returns Parsed EmailTheme object
|
|
122
|
-
*/
|
|
123
|
-
declare function parseEmailThemeFromFile(content: string): EmailTheme;
|
|
124
|
-
/**
|
|
125
|
-
* Generate a theme.ts file content from an EmailTheme object.
|
|
126
|
-
* Produces a properly formatted TypeScript file that can be written to the email template.
|
|
127
|
-
*
|
|
128
|
-
* @param theme - The EmailTheme object to generate
|
|
129
|
-
* @returns TypeScript file content as a string
|
|
130
|
-
*/
|
|
131
|
-
declare function generateEmailThemeFile(theme: EmailTheme): string;
|
|
132
|
-
|
|
133
69
|
/**
|
|
134
70
|
* React plugin configuration that should be applied to enable design mode.
|
|
135
71
|
* Works with both @vitejs/plugin-react and @vitejs/plugin-react-swc.
|
|
@@ -164,44 +100,4 @@ declare function getReactPluginConfig(): {
|
|
|
164
100
|
*/
|
|
165
101
|
declare function firebuzzDesignMode(): Plugin;
|
|
166
102
|
|
|
167
|
-
|
|
168
|
-
* React plugin configuration for email design mode.
|
|
169
|
-
* Works with both @vitejs/plugin-react and @vitejs/plugin-react-swc.
|
|
170
|
-
*
|
|
171
|
-
* Usage:
|
|
172
|
-
* ```ts
|
|
173
|
-
* import react from '@vitejs/plugin-react'
|
|
174
|
-
* import { firebuzzEmailDesignMode, getEmailReactPluginConfig } from '@firebuzz/design-mode'
|
|
175
|
-
*
|
|
176
|
-
* export default defineConfig({
|
|
177
|
-
* plugins: [
|
|
178
|
-
* react(getEmailReactPluginConfig()),
|
|
179
|
-
* firebuzzEmailDesignMode(),
|
|
180
|
-
* ],
|
|
181
|
-
* })
|
|
182
|
-
* ```
|
|
183
|
-
*/
|
|
184
|
-
declare function getEmailReactPluginConfig(): {
|
|
185
|
-
babel?: undefined;
|
|
186
|
-
} | {
|
|
187
|
-
babel: {
|
|
188
|
-
plugins: {}[][];
|
|
189
|
-
};
|
|
190
|
-
};
|
|
191
|
-
/**
|
|
192
|
-
* Vite plugin that enables design mode features for Firebuzz email templates.
|
|
193
|
-
*
|
|
194
|
-
* - Injects Tailwind v4 Browser CDN for runtime class editing
|
|
195
|
-
* - Injects overlay script for element selection
|
|
196
|
-
* - Works with React Email components
|
|
197
|
-
*
|
|
198
|
-
* NOTE: React Email's <Tailwind> component converts className to inline styles,
|
|
199
|
-
* leaving the class attribute empty. By injecting Tailwind CDN, we enable
|
|
200
|
-
* real-time className updates during design mode.
|
|
201
|
-
*
|
|
202
|
-
* NOTE: You must also configure the React plugin with getEmailReactPluginConfig()
|
|
203
|
-
* to enable element source tracking.
|
|
204
|
-
*/
|
|
205
|
-
declare function firebuzzEmailDesignMode(): Plugin;
|
|
206
|
-
|
|
207
|
-
export { type AllElementsStateMessage, type DesignModeMessage, type DesignModeMessageType, type ElementData, type ElementSelectedMessage, type ElementUpdates, type EmailTheme, type SourceLocation, type ThemeVariables, firebuzzDesignMode, firebuzzEmailDesignMode, generateEmailThemeFile, getEmailReactPluginConfig, getReactPluginConfig, parseEmailThemeFromFile };
|
|
103
|
+
export { type AllElementsStateMessage, type DesignModeMessage, type DesignModeMessageType, type ElementData, type ElementSelectedMessage, type ElementUpdates, type SourceLocation, type ThemeVariables, firebuzzDesignMode, getReactPluginConfig };
|
package/dist/index.js
CHANGED
|
@@ -1,61 +1,3 @@
|
|
|
1
|
-
'use strict';var
|
|
2
|
-
|
|
3
|
-
// - All colors must use hex format (email clients don't support oklch)
|
|
4
|
-
|
|
5
|
-
export const themeConfiguration = {
|
|
6
|
-
colors: {
|
|
7
|
-
// Base colors
|
|
8
|
-
background: "${r.colors.background}",
|
|
9
|
-
foreground: "${r.colors.foreground}",
|
|
10
|
-
|
|
11
|
-
// Card
|
|
12
|
-
card: "${r.colors.card}",
|
|
13
|
-
cardForeground: "${r.colors.cardForeground}",
|
|
14
|
-
|
|
15
|
-
// Popover
|
|
16
|
-
popover: "${r.colors.popover}",
|
|
17
|
-
popoverForeground: "${r.colors.popoverForeground}",
|
|
18
|
-
|
|
19
|
-
// Primary
|
|
20
|
-
primary: "${r.colors.primary}",
|
|
21
|
-
primaryForeground: "${r.colors.primaryForeground}",
|
|
22
|
-
|
|
23
|
-
// Secondary
|
|
24
|
-
secondary: "${r.colors.secondary}",
|
|
25
|
-
secondaryForeground: "${r.colors.secondaryForeground}",
|
|
26
|
-
|
|
27
|
-
// Muted
|
|
28
|
-
muted: "${r.colors.muted}",
|
|
29
|
-
mutedForeground: "${r.colors.mutedForeground}",
|
|
30
|
-
|
|
31
|
-
// Accent
|
|
32
|
-
accent: "${r.colors.accent}",
|
|
33
|
-
accentForeground: "${r.colors.accentForeground}",
|
|
34
|
-
|
|
35
|
-
// Destructive
|
|
36
|
-
destructive: "${r.colors.destructive}",
|
|
37
|
-
destructiveForeground: "${r.colors.destructiveForeground}",
|
|
38
|
-
|
|
39
|
-
// Border & Input
|
|
40
|
-
border: "${r.colors.border}",
|
|
41
|
-
input: "${r.colors.input}",
|
|
42
|
-
ring: "${r.colors.ring}",
|
|
43
|
-
|
|
44
|
-
// Chart colors
|
|
45
|
-
chart1: "${r.colors.chart1}",
|
|
46
|
-
chart2: "${r.colors.chart2}",
|
|
47
|
-
chart3: "${r.colors.chart3}",
|
|
48
|
-
chart4: "${r.colors.chart4}",
|
|
49
|
-
chart5: "${r.colors.chart5}",
|
|
50
|
-
},
|
|
51
|
-
fonts: {
|
|
52
|
-
primary: "${r.fonts.primary}",
|
|
53
|
-
},
|
|
54
|
-
borderRadius: {
|
|
55
|
-
lg: "${r.borderRadius.lg}",
|
|
56
|
-
md: "${r.borderRadius.md}",
|
|
57
|
-
sm: "${r.borderRadius.sm}",
|
|
58
|
-
},
|
|
59
|
-
};
|
|
60
|
-
`}exports.firebuzzDesignMode=b;exports.firebuzzEmailDesignMode=D;exports.generateEmailThemeFile=T;exports.getEmailReactPluginConfig=$;exports.getReactPluginConfig=h;exports.parseEmailThemeFromFile=R;//# sourceMappingURL=index.js.map
|
|
1
|
+
'use strict';var l=require('fs/promises'),t=require('path'),url=require('url');var _documentCurrentScript=typeof document!=='undefined'?document.currentScript:null;function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var l__default=/*#__PURE__*/_interopDefault(l);var t__default=/*#__PURE__*/_interopDefault(t);function d(){return process.env.NODE_ENV==="development"&&process.env.VITE_DESIGN_MODE!=="false"?{babel:{plugins:[["@react-dev-inspector/babel-plugin",{}]]}}:{}}function m(){let n=process.env.NODE_ENV==="development"&&process.env.VITE_DESIGN_MODE!=="false",c=process.cwd(),o=t__default.default.resolve(c,"./node_modules/.vite-plugin-firebuzz-design-mode/overlay.mjs");return {name:"vite-plugin-firebuzz-design-mode",enforce:"pre",async buildStart(){if(n)try{let e=(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.js', document.baseURI).href)),s=url.fileURLToPath(e),i=t__default.default.resolve(t__default.default.dirname(s),".."),a=t__default.default.join(i,"dist","overlay.mjs"),r=t__default.default.join(i,"dist","overlay.mjs.map");await l__default.default.mkdir(t__default.default.dirname(o),{recursive:!0}),await l__default.default.copyFile(a,o);try{await l__default.default.copyFile(r,`${o}.map`);}catch{}}catch(e){console.warn("[Firebuzz Design Mode] Could not copy overlay file:",e);}},transformIndexHtml(e){if(!n)return e;let s='<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>',a=`<script type="module" src="${o.replace(c,"")}"></script>`,r=e.replace("</head>",`${s}</head>`);return r=r.replace("</body>",`${a}</body>`),r}}}
|
|
2
|
+
exports.firebuzzDesignMode=m;exports.getReactPluginConfig=d;//# sourceMappingURL=index.js.map
|
|
61
3
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/vite-plugin.ts","../src/vite-plugin-email.ts","../src/email-theme.ts"],"names":["getReactPluginConfig","firebuzzDesignMode","isDesignModeEnabled","projectRoot","overlayOutputPath","path","currentFileUrl","currentFilePath","fileURLToPath","packageRoot","overlaySource","overlaySourceMap","fs","error","html","tailwindCDN","overlayScript","modifiedHtml","getEmailReactPluginConfig","firebuzzEmailDesignMode","DEFAULT_EMAIL_THEME","parseEmailThemeFromFile","content","theme","colorsBlock","colorKeys","key","regex","matchedValue","fontsBlock","primaryValue","borderRadiusBlock","lgValue","mdValue","smValue","generateEmailThemeFile"],"mappings":"mUAsBO,SAASA,CAAAA,EAAuB,CAKtC,OAHC,QAAQ,GAAA,CAAI,QAAA,GAAa,aAAA,EACzB,OAAA,CAAQ,GAAA,CAAI,gBAAA,GAAqB,OAAA,CAM3B,CACN,MAAO,CACN,OAAA,CAAS,CAAC,CAAC,oCAAqC,EAAE,CAAC,CACpD,CACD,CAAA,CAPQ,EAQT,CAUO,SAASC,CAAAA,EAA6B,CAE5C,IAAMC,EACL,OAAA,CAAQ,GAAA,CAAI,QAAA,GAAa,aAAA,EACzB,QAAQ,GAAA,CAAI,gBAAA,GAAqB,OAAA,CAE5BC,CAAAA,CAAc,QAAQ,GAAA,EAAI,CAE1BC,CAAAA,CAAoBC,kBAAAA,CAAK,OAAA,CAC9BF,CAAAA,CACA,8DACD,CAAA,CAEA,OAAO,CACN,IAAA,CAAM,kCAAA,CACN,OAAA,CAAS,MAET,MAAM,UAAA,EAAa,CAClB,GAAKD,EAGL,GAAI,CAEH,IAAMI,CAAAA,CAAiB,0PAAY,CAC7BC,CAAAA,CAAkBC,iBAAAA,CAAcF,CAAc,CAAA,CAC9CG,CAAAA,CAAcJ,kBAAAA,CAAK,OAAA,CAAQA,kBAAAA,CAAK,OAAA,CAAQE,CAAe,CAAA,CAAG,IAAI,CAAA,CAC9DG,CAAAA,CAAgBL,kBAAAA,CAAK,IAAA,CAAKI,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,SAAA,CAAW,CAAA,CAAK,CAAC,CAAA,CAGnE,MAAMQ,kBAAAA,CAAG,QAAA,CAASF,CAAAA,CAAeN,CAAiB,EAGlD,GAAI,CACH,MAAMQ,kBAAAA,CAAG,SAASD,CAAAA,CAAkB,CAAA,EAAGP,CAAiB,CAAA,IAAA,CAAM,EAC/D,CAAA,KAAQ,CAER,CACD,OAASS,CAAAA,CAAO,CACf,OAAA,CAAQ,IAAA,CACP,sDACAA,CACD,EACD,CACD,CAAA,CAEA,mBAAmBC,CAAAA,CAAM,CACxB,GAAI,CAACZ,CAAAA,CAAqB,OAAOY,CAAAA,CAGjC,IAAMC,EACL,6EAAA,CAIKC,CAAAA,CAAgB,CAAA,2BAAA,EADFZ,CAAAA,CAAkB,OAAA,CAAQD,CAAAA,CAAa,EAAE,CACE,cAG3Dc,CAAAA,CAAeH,CAAAA,CAAK,OAAA,CAAQ,SAAA,CAAW,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,CC/FO,SAASC,GAA4B,CAK3C,OAHC,OAAA,CAAQ,GAAA,CAAI,WAAa,aAAA,EACzB,OAAA,CAAQ,GAAA,CAAI,gBAAA,GAAqB,OAAA,CAM3B,CACN,KAAA,CAAO,CACN,QAAS,CAAC,CAAC,mCAAA,CAAqC,EAAE,CAAC,CACpD,CACD,CAAA,CAPQ,EAQT,CAgBO,SAASC,CAAAA,EAAkC,CAEjD,IAAMjB,CAAAA,CACL,OAAA,CAAQ,IAAI,QAAA,GAAa,aAAA,EACzB,OAAA,CAAQ,GAAA,CAAI,mBAAqB,OAAA,CAE5BC,CAAAA,CAAc,OAAA,CAAQ,GAAA,GAEtBC,CAAAA,CAAoBC,kBAAAA,CAAK,OAAA,CAC9BF,CAAAA,CACA,8DACD,CAAA,CAEA,OAAO,CACN,KAAM,wCAAA,CACN,OAAA,CAAS,KAAA,CAET,MAAM,YAAa,CAClB,GAAKD,CAAAA,CAGL,GAAI,CAEH,IAAMI,CAAAA,CAAiB,0PAAY,CAC7BC,CAAAA,CAAkBC,iBAAAA,CAAcF,CAAc,CAAA,CAC9CG,EAAcJ,kBAAAA,CAAK,OAAA,CAAQA,kBAAAA,CAAK,OAAA,CAAQE,CAAe,CAAA,CAAG,IAAI,CAAA,CAC9DG,CAAAA,CAAgBL,mBAAK,IAAA,CAAKI,CAAAA,CAAa,MAAA,CAAQ,aAAa,CAAA,CAC5DE,CAAAA,CAAmBN,kBAAAA,CAAK,IAAA,CAC7BI,EACA,MAAA,CACA,iBACD,CAAA,CAGA,MAAMG,mBAAG,KAAA,CAAMP,kBAAAA,CAAK,OAAA,CAAQD,CAAiB,EAAG,CAAE,SAAA,CAAW,CAAA,CAAK,CAAC,CAAA,CAGnE,MAAMQ,kBAAAA,CAAG,QAAA,CAASF,EAAeN,CAAiB,CAAA,CAGlD,GAAI,CACH,MAAMQ,kBAAAA,CAAG,QAAA,CAASD,CAAAA,CAAkB,GAAGP,CAAiB,CAAA,IAAA,CAAM,EAC/D,CAAA,KAAQ,CAER,CACD,CAAA,MAASS,CAAAA,CAAO,CACf,OAAA,CAAQ,IAAA,CACP,2DAAA,CACAA,CACD,EACD,CACD,CAAA,CAEA,kBAAA,CAAmBC,CAAAA,CAAM,CACxB,GAAI,CAACZ,CAAAA,CAAqB,OAAOY,CAAAA,CAKjC,IAAMC,CAAAA,CACL,6EAAA,CAIKC,EAAgB,CAAA,2BAAA,EADFZ,CAAAA,CAAkB,OAAA,CAAQD,CAAAA,CAAa,EAAE,CACE,CAAA,WAAA,CAAA,CAG3Dc,CAAAA,CAAeH,CAAAA,CAAK,QAAQ,SAAA,CAAW,CAAA,EAAGC,CAAW,CAAA,OAAA,CAAS,CAAA,CAClE,OAAAE,CAAAA,CAAeA,CAAAA,CAAa,QAAQ,SAAA,CAAW,CAAA,EAAGD,CAAa,CAAA,OAAA,CAAS,EAEjEC,CACR,CACD,CACD,CCzEA,IAAMG,CAAAA,CAAkC,CACvC,MAAA,CAAQ,CACP,UAAA,CAAY,SAAA,CACZ,UAAA,CAAY,SAAA,CACZ,KAAM,SAAA,CACN,cAAA,CAAgB,SAAA,CAChB,OAAA,CAAS,UACT,iBAAA,CAAmB,SAAA,CACnB,OAAA,CAAS,SAAA,CACT,kBAAmB,SAAA,CACnB,SAAA,CAAW,SAAA,CACX,mBAAA,CAAqB,SAAA,CACrB,KAAA,CAAO,SAAA,CACP,eAAA,CAAiB,UACjB,MAAA,CAAQ,SAAA,CACR,gBAAA,CAAkB,SAAA,CAClB,YAAa,SAAA,CACb,qBAAA,CAAuB,SAAA,CACvB,MAAA,CAAQ,UACR,KAAA,CAAO,SAAA,CACP,IAAA,CAAM,SAAA,CACN,MAAA,CAAQ,SAAA,CACR,MAAA,CAAQ,SAAA,CACR,OAAQ,SAAA,CACR,MAAA,CAAQ,SAAA,CACR,MAAA,CAAQ,SACT,CAAA,CACA,KAAA,CAAO,CACN,OAAA,CAAS,OACV,CAAA,CACA,YAAA,CAAc,CACb,EAAA,CAAI,SAAA,CACJ,EAAA,CAAI,QAAA,CACJ,EAAA,CAAI,SACL,CACD,CAAA,CASO,SAASC,CAAAA,CAAwBC,EAA6B,CACpE,IAAMC,CAAAA,CAAoB,IAAA,CAAK,MAAM,IAAA,CAAK,SAAA,CAAUH,CAAmB,CAAC,CAAA,CAExE,GAAI,CAGH,IAAMI,EADcF,CAAAA,CAAQ,KAAA,CAAM,2CAA2C,CAAA,GAC3C,CAAC,CAAA,CACnC,GAAIE,CAAAA,CAAa,CAEhB,IAAMC,CAAAA,CAAY,MAAA,CAAO,IAAA,CAAKL,CAAAA,CAAoB,MAAM,CAAA,CAGxD,IAAA,IAAWM,KAAOD,CAAAA,CAAW,CAC5B,IAAME,CAAAA,CAAQ,IAAI,MAAA,CAAO,CAAA,EAAGD,CAAG,CAAA,qBAAA,CAAuB,EAEhDE,CAAAA,CADQJ,CAAAA,CAAY,KAAA,CAAMG,CAAK,CAAA,GACR,CAAC,CAAA,CAC1BC,CAAAA,GACHL,EAAM,MAAA,CAAOG,CAAG,CAAA,CAAIE,CAAAA,EAEtB,CACD,CAIA,IAAMC,CAAAA,CADaP,CAAAA,CAAQ,MAAM,uBAAuB,CAAA,GACxB,CAAC,CAAA,CACjC,GAAIO,CAAAA,CAAY,CAEf,IAAMC,EADeD,CAAAA,CAAW,KAAA,CAAM,6BAA6B,CAAA,GAC/B,CAAC,CAAA,CACjCC,CAAAA,GACHP,CAAAA,CAAM,KAAA,CAAM,QAAUO,CAAAA,EAExB,CAIA,IAAMC,CAAAA,CADoBT,CAAAA,CAAQ,KAAA,CAAM,8BAA8B,CAAA,GACxB,CAAC,CAAA,CAC/C,GAAIS,CAAAA,CAAmB,CAEtB,IAAMC,CAAAA,CADUD,CAAAA,CAAkB,KAAA,CAAM,wBAAwB,IACtC,CAAC,CAAA,CACvBC,CAAAA,GACHT,CAAAA,CAAM,YAAA,CAAa,EAAA,CAAKS,CAAAA,CAAAA,CAIzB,IAAMC,EADUF,CAAAA,CAAkB,KAAA,CAAM,wBAAwB,CAAA,GACtC,CAAC,CAAA,CACvBE,CAAAA,GACHV,CAAAA,CAAM,YAAA,CAAa,GAAKU,CAAAA,CAAAA,CAIzB,IAAMC,CAAAA,CADUH,CAAAA,CAAkB,KAAA,CAAM,wBAAwB,CAAA,GACtC,CAAC,EACvBG,CAAAA,GACHX,CAAAA,CAAM,YAAA,CAAa,EAAA,CAAKW,GAE1B,CACD,CAAA,MAASrB,CAAAA,CAAO,CACf,eAAQ,IAAA,CAAK,kDAAA,CAAoDA,CAAK,CAAA,CAE/D,IAAA,CAAK,KAAA,CAAM,IAAA,CAAK,SAAA,CAAUO,CAAmB,CAAC,CACtD,CAEA,OAAOG,CACR,CASO,SAASY,CAAAA,CAAuBZ,CAAAA,CAA2B,CACjE,OAAO,CAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA,eAAA,EAOSA,CAAAA,CAAM,OAAO,UAAU,CAAA;AAAA,eAAA,EACvBA,CAAAA,CAAM,OAAO,UAAU,CAAA;;AAAA;AAAA,SAAA,EAG7BA,CAAAA,CAAM,OAAO,IAAI,CAAA;AAAA,mBAAA,EACPA,CAAAA,CAAM,OAAO,cAAc,CAAA;;AAAA;AAAA,YAAA,EAGlCA,CAAAA,CAAM,OAAO,OAAO,CAAA;AAAA,sBAAA,EACVA,CAAAA,CAAM,OAAO,iBAAiB,CAAA;;AAAA;AAAA,YAAA,EAGxCA,CAAAA,CAAM,OAAO,OAAO,CAAA;AAAA,sBAAA,EACVA,CAAAA,CAAM,OAAO,iBAAiB,CAAA;;AAAA;AAAA,cAAA,EAGtCA,CAAAA,CAAM,OAAO,SAAS,CAAA;AAAA,wBAAA,EACZA,CAAAA,CAAM,OAAO,mBAAmB,CAAA;;AAAA;AAAA,UAAA,EAG9CA,CAAAA,CAAM,OAAO,KAAK,CAAA;AAAA,oBAAA,EACRA,CAAAA,CAAM,OAAO,eAAe,CAAA;;AAAA;AAAA,WAAA,EAGrCA,CAAAA,CAAM,OAAO,MAAM,CAAA;AAAA,qBAAA,EACTA,CAAAA,CAAM,OAAO,gBAAgB,CAAA;;AAAA;AAAA,gBAAA,EAGlCA,CAAAA,CAAM,OAAO,WAAW,CAAA;AAAA,0BAAA,EACdA,CAAAA,CAAM,OAAO,qBAAqB,CAAA;;AAAA;AAAA,WAAA,EAGjDA,CAAAA,CAAM,OAAO,MAAM,CAAA;AAAA,UAAA,EACpBA,CAAAA,CAAM,OAAO,KAAK,CAAA;AAAA,SAAA,EACnBA,CAAAA,CAAM,OAAO,IAAI,CAAA;;AAAA;AAAA,WAAA,EAGfA,CAAAA,CAAM,OAAO,MAAM,CAAA;AAAA,WAAA,EACnBA,CAAAA,CAAM,OAAO,MAAM,CAAA;AAAA,WAAA,EACnBA,CAAAA,CAAM,OAAO,MAAM,CAAA;AAAA,WAAA,EACnBA,CAAAA,CAAM,OAAO,MAAM,CAAA;AAAA,WAAA,EACnBA,CAAAA,CAAM,OAAO,MAAM,CAAA;AAAA;AAAA;AAAA,YAAA,EAGlBA,CAAAA,CAAM,MAAM,OAAO,CAAA;AAAA;AAAA;AAAA,OAAA,EAGxBA,CAAAA,CAAM,aAAa,EAAE,CAAA;AAAA,OAAA,EACrBA,CAAAA,CAAM,aAAa,EAAE,CAAA;AAAA,OAAA,EACrBA,CAAAA,CAAM,aAAa,EAAE,CAAA;AAAA;AAAA;AAAA,CAI9B","file":"index.js","sourcesContent":["import fs from \"node:fs/promises\";\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport type { Plugin } from \"vite\";\n\n/**\n * React plugin configuration that should be applied to enable design mode.\n * Works with both @vitejs/plugin-react and @vitejs/plugin-react-swc.\n *\n * Usage:\n * ```ts\n * import react from '@vitejs/plugin-react'\n * import { firebuzzDesignMode, getReactPluginConfig } from '@firebuzz/design-mode'\n *\n * export default defineConfig({\n * plugins: [\n * react(getReactPluginConfig()),\n * firebuzzDesignMode(),\n * ],\n * })\n * ```\n */\nexport function getReactPluginConfig() {\n\tconst isDesignModeEnabled =\n\t\tprocess.env.NODE_ENV === \"development\" &&\n\t\tprocess.env.VITE_DESIGN_MODE !== \"false\";\n\n\tif (!isDesignModeEnabled) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\tbabel: {\n\t\t\tplugins: [[\"@react-dev-inspector/babel-plugin\", {}]],\n\t\t},\n\t};\n}\n\n/**\n * Vite plugin that enables design mode features for Firebuzz templates\n * - Injects Tailwind Play CDN for runtime CSS generation\n * - Injects overlay script for element selection\n *\n * NOTE: You must also configure the React plugin with getReactPluginConfig()\n * to enable element source tracking (works with both React 18 and 19).\n */\nexport function firebuzzDesignMode(): Plugin {\n\t// Only enable in development, never in production builds\n\tconst isDesignModeEnabled =\n\t\tprocess.env.NODE_ENV === \"development\" &&\n\t\tprocess.env.VITE_DESIGN_MODE !== \"false\";\n\n\tconst projectRoot = process.cwd();\n\n\tconst overlayOutputPath = path.resolve(\n\t\tprojectRoot,\n\t\t\"./node_modules/.vite-plugin-firebuzz-design-mode/overlay.mjs\",\n\t);\n\n\treturn {\n\t\tname: \"vite-plugin-firebuzz-design-mode\",\n\t\tenforce: \"pre\",\n\n\t\tasync buildStart() {\n\t\t\tif (!isDesignModeEnabled) return;\n\n\t\t\t// Copy overlay file to a location Vite can serve\n\t\t\ttry {\n\t\t\t\t// Find the overlay source file from the package using import.meta.url\n\t\t\t\tconst currentFileUrl = import.meta.url;\n\t\t\t\tconst currentFilePath = fileURLToPath(currentFileUrl);\n\t\t\t\tconst packageRoot = path.resolve(path.dirname(currentFilePath), \"..\");\n\t\t\t\tconst overlaySource = path.join(packageRoot, \"dist\", \"overlay.mjs\");\n\t\t\t\tconst overlaySourceMap = path.join(\n\t\t\t\t\tpackageRoot,\n\t\t\t\t\t\"dist\",\n\t\t\t\t\t\"overlay.mjs.map\",\n\t\t\t\t);\n\n\t\t\t\t// Ensure output directory exists\n\t\t\t\tawait fs.mkdir(path.dirname(overlayOutputPath), { recursive: true });\n\n\t\t\t\t// Copy the overlay file\n\t\t\t\tawait fs.copyFile(overlaySource, overlayOutputPath);\n\n\t\t\t\t// Copy the source map file if it exists\n\t\t\t\ttry {\n\t\t\t\t\tawait fs.copyFile(overlaySourceMap, `${overlayOutputPath}.map`);\n\t\t\t\t} catch {\n\t\t\t\t\t// Source map is optional, ignore if not found\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t\"[Firebuzz Design Mode] Could not copy overlay file:\",\n\t\t\t\t\terror,\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\n\t\ttransformIndexHtml(html) {\n\t\t\tif (!isDesignModeEnabled) return html;\n\n\t\t\t// Inject Tailwind v4 Browser CDN for runtime CSS generation\n\t\t\tconst tailwindCDN =\n\t\t\t\t'<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>';\n\n\t\t\t// Inject the overlay script\n\t\t\tconst overlayPath = overlayOutputPath.replace(projectRoot, \"\");\n\t\t\tconst overlayScript = `<script type=\"module\" src=\"${overlayPath}\"></script>`;\n\n\t\t\t// Inject both in the head (Tailwind CDN) and before </body> (overlay)\n\t\t\tlet modifiedHtml = html.replace(\"</head>\", `${tailwindCDN}</head>`);\n\t\t\tmodifiedHtml = modifiedHtml.replace(\"</body>\", `${overlayScript}</body>`);\n\n\t\t\treturn modifiedHtml;\n\t\t},\n\t};\n}\n","import fs from \"node:fs/promises\";\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport type { Plugin } from \"vite\";\n\n/**\n * React plugin configuration for email design mode.\n * Works with both @vitejs/plugin-react and @vitejs/plugin-react-swc.\n *\n * Usage:\n * ```ts\n * import react from '@vitejs/plugin-react'\n * import { firebuzzEmailDesignMode, getEmailReactPluginConfig } from '@firebuzz/design-mode'\n *\n * export default defineConfig({\n * plugins: [\n * react(getEmailReactPluginConfig()),\n * firebuzzEmailDesignMode(),\n * ],\n * })\n * ```\n */\nexport function getEmailReactPluginConfig() {\n\tconst isDesignModeEnabled =\n\t\tprocess.env.NODE_ENV === \"development\" &&\n\t\tprocess.env.VITE_DESIGN_MODE !== \"false\";\n\n\tif (!isDesignModeEnabled) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\tbabel: {\n\t\t\tplugins: [[\"@react-dev-inspector/babel-plugin\", {}]],\n\t\t},\n\t};\n}\n\n/**\n * Vite plugin that enables design mode features for Firebuzz email templates.\n *\n * - Injects Tailwind v4 Browser CDN for runtime class editing\n * - Injects overlay script for element selection\n * - Works with React Email components\n *\n * NOTE: React Email's <Tailwind> component converts className to inline styles,\n * leaving the class attribute empty. By injecting Tailwind CDN, we enable\n * real-time className updates during design mode.\n *\n * NOTE: You must also configure the React plugin with getEmailReactPluginConfig()\n * to enable element source tracking.\n */\nexport function firebuzzEmailDesignMode(): 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-email-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 Email Design Mode] Could not copy overlay file:\",\n\t\t\t\t\terror,\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\n\t\ttransformIndexHtml(html) {\n\t\t\tif (!isDesignModeEnabled) return html;\n\n\t\t\t// Inject Tailwind v4 Browser CDN for runtime CSS generation\n\t\t\t// React Email's <Tailwind> converts className to inline styles at render,\n\t\t\t// but we need Tailwind CDN so className edits work in real-time during design mode\n\t\t\tconst tailwindCDN =\n\t\t\t\t'<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>';\n\n\t\t\t// Inject the overlay script for element selection\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","/**\n * Email theme utilities for parsing and generating email theme configuration files.\n * Email templates use a simpler theme format than landing pages:\n * - Hex color values (email clients don't support oklch)\n * - Single font (primary) instead of sans/serif/mono\n * - Border radius object for lg/md/sm\n * - No dark mode support\n */\n\n/**\n * Email theme interface matching the structure in email templates' theme.ts\n */\nexport interface EmailTheme {\n\tcolors: {\n\t\tbackground: string;\n\t\tforeground: string;\n\t\tcard: string;\n\t\tcardForeground: string;\n\t\tpopover: string;\n\t\tpopoverForeground: string;\n\t\tprimary: string;\n\t\tprimaryForeground: string;\n\t\tsecondary: string;\n\t\tsecondaryForeground: string;\n\t\tmuted: string;\n\t\tmutedForeground: string;\n\t\taccent: string;\n\t\taccentForeground: string;\n\t\tdestructive: string;\n\t\tdestructiveForeground: string;\n\t\tborder: string;\n\t\tinput: string;\n\t\tring: string;\n\t\tchart1: string;\n\t\tchart2: string;\n\t\tchart3: string;\n\t\tchart4: string;\n\t\tchart5: string;\n\t};\n\tfonts: {\n\t\tprimary: string;\n\t};\n\tborderRadius: {\n\t\tlg: string;\n\t\tmd: string;\n\t\tsm: string;\n\t};\n}\n\n/**\n * Default email theme values used when parsing fails or values are missing\n */\nconst DEFAULT_EMAIL_THEME: EmailTheme = {\n\tcolors: {\n\t\tbackground: \"#FFFFFF\",\n\t\tforeground: \"#18181B\",\n\t\tcard: \"#FFFFFF\",\n\t\tcardForeground: \"#18181B\",\n\t\tpopover: \"#FFFFFF\",\n\t\tpopoverForeground: \"#18181B\",\n\t\tprimary: \"#18181B\",\n\t\tprimaryForeground: \"#FFFFFF\",\n\t\tsecondary: \"#F4F4F5\",\n\t\tsecondaryForeground: \"#18181B\",\n\t\tmuted: \"#F4F4F5\",\n\t\tmutedForeground: \"#71717A\",\n\t\taccent: \"#F4F4F5\",\n\t\taccentForeground: \"#18181B\",\n\t\tdestructive: \"#EF4444\",\n\t\tdestructiveForeground: \"#FFFFFF\",\n\t\tborder: \"#E4E4E7\",\n\t\tinput: \"#E4E4E7\",\n\t\tring: \"#18181B\",\n\t\tchart1: \"#E76E50\",\n\t\tchart2: \"#2A9D90\",\n\t\tchart3: \"#274754\",\n\t\tchart4: \"#E8C468\",\n\t\tchart5: \"#F4A462\",\n\t},\n\tfonts: {\n\t\tprimary: \"Geist\",\n\t},\n\tborderRadius: {\n\t\tlg: \"0.75rem\",\n\t\tmd: \"0.5rem\",\n\t\tsm: \"0.25rem\",\n\t},\n};\n\n/**\n * Parse an email theme from a theme.ts file content.\n * Extracts color values, fonts, and border radius from the TypeScript source.\n *\n * @param content - The content of the theme.ts file\n * @returns Parsed EmailTheme object\n */\nexport function parseEmailThemeFromFile(content: string): EmailTheme {\n\tconst theme: EmailTheme = JSON.parse(JSON.stringify(DEFAULT_EMAIL_THEME));\n\n\ttry {\n\t\t// Extract colors object\n\t\tconst colorsMatch = content.match(/colors:\\s*\\{([^}]+(?:\\{[^}]*\\}[^}]*)*)\\}/s);\n\t\tconst colorsBlock = colorsMatch?.[1];\n\t\tif (colorsBlock) {\n\t\t\t// Parse each color property\n\t\t\tconst colorKeys = Object.keys(DEFAULT_EMAIL_THEME.colors) as Array<\n\t\t\t\tkeyof EmailTheme[\"colors\"]\n\t\t\t>;\n\t\t\tfor (const key of colorKeys) {\n\t\t\t\tconst regex = new RegExp(`${key}:\\\\s*[\"']([^\"']+)[\"']`);\n\t\t\t\tconst match = colorsBlock.match(regex);\n\t\t\t\tconst matchedValue = match?.[1];\n\t\t\t\tif (matchedValue) {\n\t\t\t\t\ttheme.colors[key] = matchedValue;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// Extract fonts object\n\t\tconst fontsMatch = content.match(/fonts:\\s*\\{([^}]+)\\}/s);\n\t\tconst fontsBlock = fontsMatch?.[1];\n\t\tif (fontsBlock) {\n\t\t\tconst primaryMatch = fontsBlock.match(/primary:\\s*[\"']([^\"']+)[\"']/);\n\t\t\tconst primaryValue = primaryMatch?.[1];\n\t\t\tif (primaryValue) {\n\t\t\t\ttheme.fonts.primary = primaryValue;\n\t\t\t}\n\t\t}\n\n\t\t// Extract borderRadius object\n\t\tconst borderRadiusMatch = content.match(/borderRadius:\\s*\\{([^}]+)\\}/s);\n\t\tconst borderRadiusBlock = borderRadiusMatch?.[1];\n\t\tif (borderRadiusBlock) {\n\t\t\tconst lgMatch = borderRadiusBlock.match(/lg:\\s*[\"']([^\"']+)[\"']/);\n\t\t\tconst lgValue = lgMatch?.[1];\n\t\t\tif (lgValue) {\n\t\t\t\ttheme.borderRadius.lg = lgValue;\n\t\t\t}\n\n\t\t\tconst mdMatch = borderRadiusBlock.match(/md:\\s*[\"']([^\"']+)[\"']/);\n\t\t\tconst mdValue = mdMatch?.[1];\n\t\t\tif (mdValue) {\n\t\t\t\ttheme.borderRadius.md = mdValue;\n\t\t\t}\n\n\t\t\tconst smMatch = borderRadiusBlock.match(/sm:\\s*[\"']([^\"']+)[\"']/);\n\t\t\tconst smValue = smMatch?.[1];\n\t\t\tif (smValue) {\n\t\t\t\ttheme.borderRadius.sm = smValue;\n\t\t\t}\n\t\t}\n\t} catch (error) {\n\t\tconsole.warn(\"[parseEmailThemeFromFile] Failed to parse theme:\", error);\n\t\t// Return default theme on parse failure\n\t\treturn JSON.parse(JSON.stringify(DEFAULT_EMAIL_THEME));\n\t}\n\n\treturn theme;\n}\n\n/**\n * Generate a theme.ts file content from an EmailTheme object.\n * Produces a properly formatted TypeScript file that can be written to the email template.\n *\n * @param theme - The EmailTheme object to generate\n * @returns TypeScript file content as a string\n */\nexport function generateEmailThemeFile(theme: EmailTheme): string {\n\treturn `// LLM Directives:\n// - You can modify color values based on user requests\n// - All colors must use hex format (email clients don't support oklch)\n\nexport const themeConfiguration = {\n\tcolors: {\n\t\t// Base colors\n\t\tbackground: \"${theme.colors.background}\",\n\t\tforeground: \"${theme.colors.foreground}\",\n\n\t\t// Card\n\t\tcard: \"${theme.colors.card}\",\n\t\tcardForeground: \"${theme.colors.cardForeground}\",\n\n\t\t// Popover\n\t\tpopover: \"${theme.colors.popover}\",\n\t\tpopoverForeground: \"${theme.colors.popoverForeground}\",\n\n\t\t// Primary\n\t\tprimary: \"${theme.colors.primary}\",\n\t\tprimaryForeground: \"${theme.colors.primaryForeground}\",\n\n\t\t// Secondary\n\t\tsecondary: \"${theme.colors.secondary}\",\n\t\tsecondaryForeground: \"${theme.colors.secondaryForeground}\",\n\n\t\t// Muted\n\t\tmuted: \"${theme.colors.muted}\",\n\t\tmutedForeground: \"${theme.colors.mutedForeground}\",\n\n\t\t// Accent\n\t\taccent: \"${theme.colors.accent}\",\n\t\taccentForeground: \"${theme.colors.accentForeground}\",\n\n\t\t// Destructive\n\t\tdestructive: \"${theme.colors.destructive}\",\n\t\tdestructiveForeground: \"${theme.colors.destructiveForeground}\",\n\n\t\t// Border & Input\n\t\tborder: \"${theme.colors.border}\",\n\t\tinput: \"${theme.colors.input}\",\n\t\tring: \"${theme.colors.ring}\",\n\n\t\t// Chart colors\n\t\tchart1: \"${theme.colors.chart1}\",\n\t\tchart2: \"${theme.colors.chart2}\",\n\t\tchart3: \"${theme.colors.chart3}\",\n\t\tchart4: \"${theme.colors.chart4}\",\n\t\tchart5: \"${theme.colors.chart5}\",\n\t},\n\tfonts: {\n\t\tprimary: \"${theme.fonts.primary}\",\n\t},\n\tborderRadius: {\n\t\tlg: \"${theme.borderRadius.lg}\",\n\t\tmd: \"${theme.borderRadius.md}\",\n\t\tsm: \"${theme.borderRadius.sm}\",\n\t},\n};\n`;\n}\n\n/**\n * Validate that a string is a valid hex color\n */\nexport function isValidHexColor(color: string): boolean {\n\treturn /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(color);\n}\n\n/**\n * Get the default email theme\n */\nexport function getDefaultEmailTheme(): EmailTheme {\n\treturn JSON.parse(JSON.stringify(DEFAULT_EMAIL_THEME));\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/vite-plugin.ts"],"names":["getReactPluginConfig","firebuzzDesignMode","isDesignModeEnabled","projectRoot","overlayOutputPath","path","currentFileUrl","currentFilePath","fileURLToPath","packageRoot","overlaySource","overlaySourceMap","fs","error","html","tailwindCDN","overlayScript","modifiedHtml"],"mappings":"mUAsBO,SAASA,CAAAA,EAAuB,CAKtC,OAHC,OAAA,CAAQ,GAAA,CAAI,WAAa,aAAA,EACzB,OAAA,CAAQ,IAAI,gBAAA,GAAqB,OAAA,CAM3B,CACN,KAAA,CAAO,CACN,OAAA,CAAS,CAAC,CAAC,mCAAA,CAAqC,EAAE,CAAC,CACpD,CACD,CAAA,CAPQ,EAQT,CAUO,SAASC,GAA6B,CAE5C,IAAMC,EACL,OAAA,CAAQ,GAAA,CAAI,QAAA,GAAa,aAAA,EACzB,QAAQ,GAAA,CAAI,gBAAA,GAAqB,QAE5BC,CAAAA,CAAc,OAAA,CAAQ,KAAI,CAE1BC,CAAAA,CAAoBC,mBAAK,OAAA,CAC9BF,CAAAA,CACA,8DACD,CAAA,CAEA,OAAO,CACN,IAAA,CAAM,kCAAA,CACN,QAAS,KAAA,CAET,MAAM,YAAa,CAClB,GAAKD,EAGL,GAAI,CAEH,IAAMI,CAAAA,CAAiB,2PACjBC,CAAAA,CAAkBC,iBAAAA,CAAcF,CAAc,CAAA,CAC9CG,CAAAA,CAAcJ,mBAAK,OAAA,CAAQA,kBAAAA,CAAK,QAAQE,CAAe,CAAA,CAAG,IAAI,CAAA,CAC9DG,CAAAA,CAAgBL,kBAAAA,CAAK,IAAA,CAAKI,EAAa,MAAA,CAAQ,aAAa,EAC5DE,CAAAA,CAAmBN,kBAAAA,CAAK,KAC7BI,CAAAA,CACA,MAAA,CACA,iBACD,CAAA,CAGA,MAAMG,mBAAG,KAAA,CAAMP,kBAAAA,CAAK,QAAQD,CAAiB,CAAA,CAAG,CAAE,SAAA,CAAW,CAAA,CAAK,CAAC,CAAA,CAGnE,MAAMQ,mBAAG,QAAA,CAASF,CAAAA,CAAeN,CAAiB,CAAA,CAGlD,GAAI,CACH,MAAMQ,kBAAAA,CAAG,SAASD,CAAAA,CAAkB,CAAA,EAAGP,CAAiB,CAAA,IAAA,CAAM,EAC/D,MAAQ,CAER,CACD,OAASS,CAAAA,CAAO,CACf,OAAA,CAAQ,IAAA,CACP,sDACAA,CACD,EACD,CACD,CAAA,CAEA,kBAAA,CAAmBC,EAAM,CACxB,GAAI,CAACZ,CAAAA,CAAqB,OAAOY,EAGjC,IAAMC,CAAAA,CACL,8EAIKC,CAAAA,CAAgB,CAAA,2BAAA,EADFZ,EAAkB,OAAA,CAAQD,CAAAA,CAAa,EAAE,CACE,CAAA,WAAA,CAAA,CAG3Dc,EAAeH,CAAAA,CAAK,OAAA,CAAQ,UAAW,CAAA,EAAGC,CAAW,SAAS,CAAA,CAClE,OAAAE,EAAeA,CAAAA,CAAa,OAAA,CAAQ,UAAW,CAAA,EAAGD,CAAa,SAAS,CAAA,CAEjEC,CACR,CACD,CACD","file":"index.js","sourcesContent":["import fs from \"node:fs/promises\";\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport type { Plugin } from \"vite\";\n\n/**\n * React plugin configuration that should be applied to enable design mode.\n * Works with both @vitejs/plugin-react and @vitejs/plugin-react-swc.\n *\n * Usage:\n * ```ts\n * import react from '@vitejs/plugin-react'\n * import { firebuzzDesignMode, getReactPluginConfig } from '@firebuzz/design-mode'\n *\n * export default defineConfig({\n * plugins: [\n * react(getReactPluginConfig()),\n * firebuzzDesignMode(),\n * ],\n * })\n * ```\n */\nexport function getReactPluginConfig() {\n\tconst isDesignModeEnabled =\n\t\tprocess.env.NODE_ENV === \"development\" &&\n\t\tprocess.env.VITE_DESIGN_MODE !== \"false\";\n\n\tif (!isDesignModeEnabled) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\tbabel: {\n\t\t\tplugins: [[\"@react-dev-inspector/babel-plugin\", {}]],\n\t\t},\n\t};\n}\n\n/**\n * Vite plugin that enables design mode features for Firebuzz templates\n * - Injects Tailwind Play CDN for runtime CSS generation\n * - Injects overlay script for element selection\n *\n * NOTE: You must also configure the React plugin with getReactPluginConfig()\n * to enable element source tracking (works with both React 18 and 19).\n */\nexport function firebuzzDesignMode(): Plugin {\n\t// Only enable in development, never in production builds\n\tconst isDesignModeEnabled =\n\t\tprocess.env.NODE_ENV === \"development\" &&\n\t\tprocess.env.VITE_DESIGN_MODE !== \"false\";\n\n\tconst projectRoot = process.cwd();\n\n\tconst overlayOutputPath = path.resolve(\n\t\tprojectRoot,\n\t\t\"./node_modules/.vite-plugin-firebuzz-design-mode/overlay.mjs\",\n\t);\n\n\treturn {\n\t\tname: \"vite-plugin-firebuzz-design-mode\",\n\t\tenforce: \"pre\",\n\n\t\tasync buildStart() {\n\t\t\tif (!isDesignModeEnabled) return;\n\n\t\t\t// Copy overlay file to a location Vite can serve\n\t\t\ttry {\n\t\t\t\t// Find the overlay source file from the package using import.meta.url\n\t\t\t\tconst currentFileUrl = import.meta.url;\n\t\t\t\tconst currentFilePath = fileURLToPath(currentFileUrl);\n\t\t\t\tconst packageRoot = path.resolve(path.dirname(currentFilePath), \"..\");\n\t\t\t\tconst overlaySource = path.join(packageRoot, \"dist\", \"overlay.mjs\");\n\t\t\t\tconst overlaySourceMap = path.join(\n\t\t\t\t\tpackageRoot,\n\t\t\t\t\t\"dist\",\n\t\t\t\t\t\"overlay.mjs.map\",\n\t\t\t\t);\n\n\t\t\t\t// Ensure output directory exists\n\t\t\t\tawait fs.mkdir(path.dirname(overlayOutputPath), { recursive: true });\n\n\t\t\t\t// Copy the overlay file\n\t\t\t\tawait fs.copyFile(overlaySource, overlayOutputPath);\n\n\t\t\t\t// Copy the source map file if it exists\n\t\t\t\ttry {\n\t\t\t\t\tawait fs.copyFile(overlaySourceMap, `${overlayOutputPath}.map`);\n\t\t\t\t} catch {\n\t\t\t\t\t// Source map is optional, ignore if not found\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t\"[Firebuzz Design Mode] Could not copy overlay file:\",\n\t\t\t\t\terror,\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\n\t\ttransformIndexHtml(html) {\n\t\t\tif (!isDesignModeEnabled) return html;\n\n\t\t\t// Inject Tailwind v4 Browser CDN for runtime CSS generation\n\t\t\tconst tailwindCDN =\n\t\t\t\t'<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>';\n\n\t\t\t// Inject the overlay script\n\t\t\tconst overlayPath = overlayOutputPath.replace(projectRoot, \"\");\n\t\t\tconst overlayScript = `<script type=\"module\" src=\"${overlayPath}\"></script>`;\n\n\t\t\t// Inject both in the head (Tailwind CDN) and before </body> (overlay)\n\t\t\tlet modifiedHtml = html.replace(\"</head>\", `${tailwindCDN}</head>`);\n\t\t\tmodifiedHtml = modifiedHtml.replace(\"</body>\", `${overlayScript}</body>`);\n\n\t\t\treturn modifiedHtml;\n\t\t},\n\t};\n}\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,61 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
// - All colors must use hex format (email clients don't support oklch)
|
|
4
|
-
|
|
5
|
-
export const themeConfiguration = {
|
|
6
|
-
colors: {
|
|
7
|
-
// Base colors
|
|
8
|
-
background: "${r.colors.background}",
|
|
9
|
-
foreground: "${r.colors.foreground}",
|
|
10
|
-
|
|
11
|
-
// Card
|
|
12
|
-
card: "${r.colors.card}",
|
|
13
|
-
cardForeground: "${r.colors.cardForeground}",
|
|
14
|
-
|
|
15
|
-
// Popover
|
|
16
|
-
popover: "${r.colors.popover}",
|
|
17
|
-
popoverForeground: "${r.colors.popoverForeground}",
|
|
18
|
-
|
|
19
|
-
// Primary
|
|
20
|
-
primary: "${r.colors.primary}",
|
|
21
|
-
primaryForeground: "${r.colors.primaryForeground}",
|
|
22
|
-
|
|
23
|
-
// Secondary
|
|
24
|
-
secondary: "${r.colors.secondary}",
|
|
25
|
-
secondaryForeground: "${r.colors.secondaryForeground}",
|
|
26
|
-
|
|
27
|
-
// Muted
|
|
28
|
-
muted: "${r.colors.muted}",
|
|
29
|
-
mutedForeground: "${r.colors.mutedForeground}",
|
|
30
|
-
|
|
31
|
-
// Accent
|
|
32
|
-
accent: "${r.colors.accent}",
|
|
33
|
-
accentForeground: "${r.colors.accentForeground}",
|
|
34
|
-
|
|
35
|
-
// Destructive
|
|
36
|
-
destructive: "${r.colors.destructive}",
|
|
37
|
-
destructiveForeground: "${r.colors.destructiveForeground}",
|
|
38
|
-
|
|
39
|
-
// Border & Input
|
|
40
|
-
border: "${r.colors.border}",
|
|
41
|
-
input: "${r.colors.input}",
|
|
42
|
-
ring: "${r.colors.ring}",
|
|
43
|
-
|
|
44
|
-
// Chart colors
|
|
45
|
-
chart1: "${r.colors.chart1}",
|
|
46
|
-
chart2: "${r.colors.chart2}",
|
|
47
|
-
chart3: "${r.colors.chart3}",
|
|
48
|
-
chart4: "${r.colors.chart4}",
|
|
49
|
-
chart5: "${r.colors.chart5}",
|
|
50
|
-
},
|
|
51
|
-
fonts: {
|
|
52
|
-
primary: "${r.fonts.primary}",
|
|
53
|
-
},
|
|
54
|
-
borderRadius: {
|
|
55
|
-
lg: "${r.borderRadius.lg}",
|
|
56
|
-
md: "${r.borderRadius.md}",
|
|
57
|
-
sm: "${r.borderRadius.sm}",
|
|
58
|
-
},
|
|
59
|
-
};
|
|
60
|
-
`}export{b as firebuzzDesignMode,D as firebuzzEmailDesignMode,T as generateEmailThemeFile,$ as getEmailReactPluginConfig,h as getReactPluginConfig,R as parseEmailThemeFromFile};//# sourceMappingURL=index.mjs.map
|
|
1
|
+
import l from'fs/promises';import t from'path';import {fileURLToPath}from'url';function d(){return process.env.NODE_ENV==="development"&&process.env.VITE_DESIGN_MODE!=="false"?{babel:{plugins:[["@react-dev-inspector/babel-plugin",{}]]}}:{}}function m(){let n=process.env.NODE_ENV==="development"&&process.env.VITE_DESIGN_MODE!=="false",c=process.cwd(),o=t.resolve(c,"./node_modules/.vite-plugin-firebuzz-design-mode/overlay.mjs");return {name:"vite-plugin-firebuzz-design-mode",enforce:"pre",async buildStart(){if(n)try{let e=import.meta.url,s=fileURLToPath(e),i=t.resolve(t.dirname(s),".."),a=t.join(i,"dist","overlay.mjs"),r=t.join(i,"dist","overlay.mjs.map");await l.mkdir(t.dirname(o),{recursive:!0}),await l.copyFile(a,o);try{await l.copyFile(r,`${o}.map`);}catch{}}catch(e){console.warn("[Firebuzz Design Mode] Could not copy overlay file:",e);}},transformIndexHtml(e){if(!n)return e;let s='<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>',a=`<script type="module" src="${o.replace(c,"")}"></script>`,r=e.replace("</head>",`${s}</head>`);return r=r.replace("</body>",`${a}</body>`),r}}}
|
|
2
|
+
export{m as firebuzzDesignMode,d as getReactPluginConfig};//# sourceMappingURL=index.mjs.map
|
|
61
3
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/vite-plugin.ts","../src/vite-plugin-email.ts","../src/email-theme.ts"],"names":["getReactPluginConfig","firebuzzDesignMode","isDesignModeEnabled","projectRoot","overlayOutputPath","path","currentFileUrl","currentFilePath","fileURLToPath","packageRoot","overlaySource","overlaySourceMap","fs","error","html","tailwindCDN","overlayScript","modifiedHtml","getEmailReactPluginConfig","firebuzzEmailDesignMode","DEFAULT_EMAIL_THEME","parseEmailThemeFromFile","content","theme","colorsBlock","colorKeys","key","regex","matchedValue","fontsBlock","primaryValue","borderRadiusBlock","lgValue","mdValue","smValue","generateEmailThemeFile"],"mappings":"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","file":"index.mjs","sourcesContent":["import fs from \"node:fs/promises\";\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport type { Plugin } from \"vite\";\n\n/**\n * React plugin configuration that should be applied to enable design mode.\n * Works with both @vitejs/plugin-react and @vitejs/plugin-react-swc.\n *\n * Usage:\n * ```ts\n * import react from '@vitejs/plugin-react'\n * import { firebuzzDesignMode, getReactPluginConfig } from '@firebuzz/design-mode'\n *\n * export default defineConfig({\n * plugins: [\n * react(getReactPluginConfig()),\n * firebuzzDesignMode(),\n * ],\n * })\n * ```\n */\nexport function getReactPluginConfig() {\n\tconst isDesignModeEnabled =\n\t\tprocess.env.NODE_ENV === \"development\" &&\n\t\tprocess.env.VITE_DESIGN_MODE !== \"false\";\n\n\tif (!isDesignModeEnabled) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\tbabel: {\n\t\t\tplugins: [[\"@react-dev-inspector/babel-plugin\", {}]],\n\t\t},\n\t};\n}\n\n/**\n * Vite plugin that enables design mode features for Firebuzz templates\n * - Injects Tailwind Play CDN for runtime CSS generation\n * - Injects overlay script for element selection\n *\n * NOTE: You must also configure the React plugin with getReactPluginConfig()\n * to enable element source tracking (works with both React 18 and 19).\n */\nexport function firebuzzDesignMode(): Plugin {\n\t// Only enable in development, never in production builds\n\tconst isDesignModeEnabled =\n\t\tprocess.env.NODE_ENV === \"development\" &&\n\t\tprocess.env.VITE_DESIGN_MODE !== \"false\";\n\n\tconst projectRoot = process.cwd();\n\n\tconst overlayOutputPath = path.resolve(\n\t\tprojectRoot,\n\t\t\"./node_modules/.vite-plugin-firebuzz-design-mode/overlay.mjs\",\n\t);\n\n\treturn {\n\t\tname: \"vite-plugin-firebuzz-design-mode\",\n\t\tenforce: \"pre\",\n\n\t\tasync buildStart() {\n\t\t\tif (!isDesignModeEnabled) return;\n\n\t\t\t// Copy overlay file to a location Vite can serve\n\t\t\ttry {\n\t\t\t\t// Find the overlay source file from the package using import.meta.url\n\t\t\t\tconst currentFileUrl = import.meta.url;\n\t\t\t\tconst currentFilePath = fileURLToPath(currentFileUrl);\n\t\t\t\tconst packageRoot = path.resolve(path.dirname(currentFilePath), \"..\");\n\t\t\t\tconst overlaySource = path.join(packageRoot, \"dist\", \"overlay.mjs\");\n\t\t\t\tconst overlaySourceMap = path.join(\n\t\t\t\t\tpackageRoot,\n\t\t\t\t\t\"dist\",\n\t\t\t\t\t\"overlay.mjs.map\",\n\t\t\t\t);\n\n\t\t\t\t// Ensure output directory exists\n\t\t\t\tawait fs.mkdir(path.dirname(overlayOutputPath), { recursive: true });\n\n\t\t\t\t// Copy the overlay file\n\t\t\t\tawait fs.copyFile(overlaySource, overlayOutputPath);\n\n\t\t\t\t// Copy the source map file if it exists\n\t\t\t\ttry {\n\t\t\t\t\tawait fs.copyFile(overlaySourceMap, `${overlayOutputPath}.map`);\n\t\t\t\t} catch {\n\t\t\t\t\t// Source map is optional, ignore if not found\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t\"[Firebuzz Design Mode] Could not copy overlay file:\",\n\t\t\t\t\terror,\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\n\t\ttransformIndexHtml(html) {\n\t\t\tif (!isDesignModeEnabled) return html;\n\n\t\t\t// Inject Tailwind v4 Browser CDN for runtime CSS generation\n\t\t\tconst tailwindCDN =\n\t\t\t\t'<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>';\n\n\t\t\t// Inject the overlay script\n\t\t\tconst overlayPath = overlayOutputPath.replace(projectRoot, \"\");\n\t\t\tconst overlayScript = `<script type=\"module\" src=\"${overlayPath}\"></script>`;\n\n\t\t\t// Inject both in the head (Tailwind CDN) and before </body> (overlay)\n\t\t\tlet modifiedHtml = html.replace(\"</head>\", `${tailwindCDN}</head>`);\n\t\t\tmodifiedHtml = modifiedHtml.replace(\"</body>\", `${overlayScript}</body>`);\n\n\t\t\treturn modifiedHtml;\n\t\t},\n\t};\n}\n","import fs from \"node:fs/promises\";\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport type { Plugin } from \"vite\";\n\n/**\n * React plugin configuration for email design mode.\n * Works with both @vitejs/plugin-react and @vitejs/plugin-react-swc.\n *\n * Usage:\n * ```ts\n * import react from '@vitejs/plugin-react'\n * import { firebuzzEmailDesignMode, getEmailReactPluginConfig } from '@firebuzz/design-mode'\n *\n * export default defineConfig({\n * plugins: [\n * react(getEmailReactPluginConfig()),\n * firebuzzEmailDesignMode(),\n * ],\n * })\n * ```\n */\nexport function getEmailReactPluginConfig() {\n\tconst isDesignModeEnabled =\n\t\tprocess.env.NODE_ENV === \"development\" &&\n\t\tprocess.env.VITE_DESIGN_MODE !== \"false\";\n\n\tif (!isDesignModeEnabled) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\tbabel: {\n\t\t\tplugins: [[\"@react-dev-inspector/babel-plugin\", {}]],\n\t\t},\n\t};\n}\n\n/**\n * Vite plugin that enables design mode features for Firebuzz email templates.\n *\n * - Injects Tailwind v4 Browser CDN for runtime class editing\n * - Injects overlay script for element selection\n * - Works with React Email components\n *\n * NOTE: React Email's <Tailwind> component converts className to inline styles,\n * leaving the class attribute empty. By injecting Tailwind CDN, we enable\n * real-time className updates during design mode.\n *\n * NOTE: You must also configure the React plugin with getEmailReactPluginConfig()\n * to enable element source tracking.\n */\nexport function firebuzzEmailDesignMode(): 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-email-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 Email Design Mode] Could not copy overlay file:\",\n\t\t\t\t\terror,\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\n\t\ttransformIndexHtml(html) {\n\t\t\tif (!isDesignModeEnabled) return html;\n\n\t\t\t// Inject Tailwind v4 Browser CDN for runtime CSS generation\n\t\t\t// React Email's <Tailwind> converts className to inline styles at render,\n\t\t\t// but we need Tailwind CDN so className edits work in real-time during design mode\n\t\t\tconst tailwindCDN =\n\t\t\t\t'<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>';\n\n\t\t\t// Inject the overlay script for element selection\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","/**\n * Email theme utilities for parsing and generating email theme configuration files.\n * Email templates use a simpler theme format than landing pages:\n * - Hex color values (email clients don't support oklch)\n * - Single font (primary) instead of sans/serif/mono\n * - Border radius object for lg/md/sm\n * - No dark mode support\n */\n\n/**\n * Email theme interface matching the structure in email templates' theme.ts\n */\nexport interface EmailTheme {\n\tcolors: {\n\t\tbackground: string;\n\t\tforeground: string;\n\t\tcard: string;\n\t\tcardForeground: string;\n\t\tpopover: string;\n\t\tpopoverForeground: string;\n\t\tprimary: string;\n\t\tprimaryForeground: string;\n\t\tsecondary: string;\n\t\tsecondaryForeground: string;\n\t\tmuted: string;\n\t\tmutedForeground: string;\n\t\taccent: string;\n\t\taccentForeground: string;\n\t\tdestructive: string;\n\t\tdestructiveForeground: string;\n\t\tborder: string;\n\t\tinput: string;\n\t\tring: string;\n\t\tchart1: string;\n\t\tchart2: string;\n\t\tchart3: string;\n\t\tchart4: string;\n\t\tchart5: string;\n\t};\n\tfonts: {\n\t\tprimary: string;\n\t};\n\tborderRadius: {\n\t\tlg: string;\n\t\tmd: string;\n\t\tsm: string;\n\t};\n}\n\n/**\n * Default email theme values used when parsing fails or values are missing\n */\nconst DEFAULT_EMAIL_THEME: EmailTheme = {\n\tcolors: {\n\t\tbackground: \"#FFFFFF\",\n\t\tforeground: \"#18181B\",\n\t\tcard: \"#FFFFFF\",\n\t\tcardForeground: \"#18181B\",\n\t\tpopover: \"#FFFFFF\",\n\t\tpopoverForeground: \"#18181B\",\n\t\tprimary: \"#18181B\",\n\t\tprimaryForeground: \"#FFFFFF\",\n\t\tsecondary: \"#F4F4F5\",\n\t\tsecondaryForeground: \"#18181B\",\n\t\tmuted: \"#F4F4F5\",\n\t\tmutedForeground: \"#71717A\",\n\t\taccent: \"#F4F4F5\",\n\t\taccentForeground: \"#18181B\",\n\t\tdestructive: \"#EF4444\",\n\t\tdestructiveForeground: \"#FFFFFF\",\n\t\tborder: \"#E4E4E7\",\n\t\tinput: \"#E4E4E7\",\n\t\tring: \"#18181B\",\n\t\tchart1: \"#E76E50\",\n\t\tchart2: \"#2A9D90\",\n\t\tchart3: \"#274754\",\n\t\tchart4: \"#E8C468\",\n\t\tchart5: \"#F4A462\",\n\t},\n\tfonts: {\n\t\tprimary: \"Geist\",\n\t},\n\tborderRadius: {\n\t\tlg: \"0.75rem\",\n\t\tmd: \"0.5rem\",\n\t\tsm: \"0.25rem\",\n\t},\n};\n\n/**\n * Parse an email theme from a theme.ts file content.\n * Extracts color values, fonts, and border radius from the TypeScript source.\n *\n * @param content - The content of the theme.ts file\n * @returns Parsed EmailTheme object\n */\nexport function parseEmailThemeFromFile(content: string): EmailTheme {\n\tconst theme: EmailTheme = JSON.parse(JSON.stringify(DEFAULT_EMAIL_THEME));\n\n\ttry {\n\t\t// Extract colors object\n\t\tconst colorsMatch = content.match(/colors:\\s*\\{([^}]+(?:\\{[^}]*\\}[^}]*)*)\\}/s);\n\t\tconst colorsBlock = colorsMatch?.[1];\n\t\tif (colorsBlock) {\n\t\t\t// Parse each color property\n\t\t\tconst colorKeys = Object.keys(DEFAULT_EMAIL_THEME.colors) as Array<\n\t\t\t\tkeyof EmailTheme[\"colors\"]\n\t\t\t>;\n\t\t\tfor (const key of colorKeys) {\n\t\t\t\tconst regex = new RegExp(`${key}:\\\\s*[\"']([^\"']+)[\"']`);\n\t\t\t\tconst match = colorsBlock.match(regex);\n\t\t\t\tconst matchedValue = match?.[1];\n\t\t\t\tif (matchedValue) {\n\t\t\t\t\ttheme.colors[key] = matchedValue;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// Extract fonts object\n\t\tconst fontsMatch = content.match(/fonts:\\s*\\{([^}]+)\\}/s);\n\t\tconst fontsBlock = fontsMatch?.[1];\n\t\tif (fontsBlock) {\n\t\t\tconst primaryMatch = fontsBlock.match(/primary:\\s*[\"']([^\"']+)[\"']/);\n\t\t\tconst primaryValue = primaryMatch?.[1];\n\t\t\tif (primaryValue) {\n\t\t\t\ttheme.fonts.primary = primaryValue;\n\t\t\t}\n\t\t}\n\n\t\t// Extract borderRadius object\n\t\tconst borderRadiusMatch = content.match(/borderRadius:\\s*\\{([^}]+)\\}/s);\n\t\tconst borderRadiusBlock = borderRadiusMatch?.[1];\n\t\tif (borderRadiusBlock) {\n\t\t\tconst lgMatch = borderRadiusBlock.match(/lg:\\s*[\"']([^\"']+)[\"']/);\n\t\t\tconst lgValue = lgMatch?.[1];\n\t\t\tif (lgValue) {\n\t\t\t\ttheme.borderRadius.lg = lgValue;\n\t\t\t}\n\n\t\t\tconst mdMatch = borderRadiusBlock.match(/md:\\s*[\"']([^\"']+)[\"']/);\n\t\t\tconst mdValue = mdMatch?.[1];\n\t\t\tif (mdValue) {\n\t\t\t\ttheme.borderRadius.md = mdValue;\n\t\t\t}\n\n\t\t\tconst smMatch = borderRadiusBlock.match(/sm:\\s*[\"']([^\"']+)[\"']/);\n\t\t\tconst smValue = smMatch?.[1];\n\t\t\tif (smValue) {\n\t\t\t\ttheme.borderRadius.sm = smValue;\n\t\t\t}\n\t\t}\n\t} catch (error) {\n\t\tconsole.warn(\"[parseEmailThemeFromFile] Failed to parse theme:\", error);\n\t\t// Return default theme on parse failure\n\t\treturn JSON.parse(JSON.stringify(DEFAULT_EMAIL_THEME));\n\t}\n\n\treturn theme;\n}\n\n/**\n * Generate a theme.ts file content from an EmailTheme object.\n * Produces a properly formatted TypeScript file that can be written to the email template.\n *\n * @param theme - The EmailTheme object to generate\n * @returns TypeScript file content as a string\n */\nexport function generateEmailThemeFile(theme: EmailTheme): string {\n\treturn `// LLM Directives:\n// - You can modify color values based on user requests\n// - All colors must use hex format (email clients don't support oklch)\n\nexport const themeConfiguration = {\n\tcolors: {\n\t\t// Base colors\n\t\tbackground: \"${theme.colors.background}\",\n\t\tforeground: \"${theme.colors.foreground}\",\n\n\t\t// Card\n\t\tcard: \"${theme.colors.card}\",\n\t\tcardForeground: \"${theme.colors.cardForeground}\",\n\n\t\t// Popover\n\t\tpopover: \"${theme.colors.popover}\",\n\t\tpopoverForeground: \"${theme.colors.popoverForeground}\",\n\n\t\t// Primary\n\t\tprimary: \"${theme.colors.primary}\",\n\t\tprimaryForeground: \"${theme.colors.primaryForeground}\",\n\n\t\t// Secondary\n\t\tsecondary: \"${theme.colors.secondary}\",\n\t\tsecondaryForeground: \"${theme.colors.secondaryForeground}\",\n\n\t\t// Muted\n\t\tmuted: \"${theme.colors.muted}\",\n\t\tmutedForeground: \"${theme.colors.mutedForeground}\",\n\n\t\t// Accent\n\t\taccent: \"${theme.colors.accent}\",\n\t\taccentForeground: \"${theme.colors.accentForeground}\",\n\n\t\t// Destructive\n\t\tdestructive: \"${theme.colors.destructive}\",\n\t\tdestructiveForeground: \"${theme.colors.destructiveForeground}\",\n\n\t\t// Border & Input\n\t\tborder: \"${theme.colors.border}\",\n\t\tinput: \"${theme.colors.input}\",\n\t\tring: \"${theme.colors.ring}\",\n\n\t\t// Chart colors\n\t\tchart1: \"${theme.colors.chart1}\",\n\t\tchart2: \"${theme.colors.chart2}\",\n\t\tchart3: \"${theme.colors.chart3}\",\n\t\tchart4: \"${theme.colors.chart4}\",\n\t\tchart5: \"${theme.colors.chart5}\",\n\t},\n\tfonts: {\n\t\tprimary: \"${theme.fonts.primary}\",\n\t},\n\tborderRadius: {\n\t\tlg: \"${theme.borderRadius.lg}\",\n\t\tmd: \"${theme.borderRadius.md}\",\n\t\tsm: \"${theme.borderRadius.sm}\",\n\t},\n};\n`;\n}\n\n/**\n * Validate that a string is a valid hex color\n */\nexport function isValidHexColor(color: string): boolean {\n\treturn /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(color);\n}\n\n/**\n * Get the default email theme\n */\nexport function getDefaultEmailTheme(): EmailTheme {\n\treturn JSON.parse(JSON.stringify(DEFAULT_EMAIL_THEME));\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/vite-plugin.ts"],"names":["getReactPluginConfig","firebuzzDesignMode","isDesignModeEnabled","projectRoot","overlayOutputPath","path","currentFileUrl","currentFilePath","fileURLToPath","packageRoot","overlaySource","overlaySourceMap","fs","error","html","tailwindCDN","overlayScript","modifiedHtml"],"mappings":"+EAsBO,SAASA,CAAAA,EAAuB,CAKtC,OAHC,OAAA,CAAQ,GAAA,CAAI,WAAa,aAAA,EACzB,OAAA,CAAQ,IAAI,gBAAA,GAAqB,OAAA,CAM3B,CACN,KAAA,CAAO,CACN,OAAA,CAAS,CAAC,CAAC,mCAAA,CAAqC,EAAE,CAAC,CACpD,CACD,CAAA,CAPQ,EAQT,CAUO,SAASC,GAA6B,CAE5C,IAAMC,EACL,OAAA,CAAQ,GAAA,CAAI,QAAA,GAAa,aAAA,EACzB,QAAQ,GAAA,CAAI,gBAAA,GAAqB,QAE5BC,CAAAA,CAAc,OAAA,CAAQ,KAAI,CAE1BC,CAAAA,CAAoBC,EAAK,OAAA,CAC9BF,CAAAA,CACA,8DACD,CAAA,CAEA,OAAO,CACN,IAAA,CAAM,kCAAA,CACN,QAAS,KAAA,CAET,MAAM,YAAa,CAClB,GAAKD,EAGL,GAAI,CAEH,IAAMI,CAAAA,CAAiB,MAAA,CAAA,IAAA,CAAY,IAC7BC,CAAAA,CAAkBC,aAAAA,CAAcF,CAAc,CAAA,CAC9CG,CAAAA,CAAcJ,EAAK,OAAA,CAAQA,CAAAA,CAAK,QAAQE,CAAe,CAAA,CAAG,IAAI,CAAA,CAC9DG,CAAAA,CAAgBL,CAAAA,CAAK,IAAA,CAAKI,EAAa,MAAA,CAAQ,aAAa,EAC5DE,CAAAA,CAAmBN,CAAAA,CAAK,KAC7BI,CAAAA,CACA,MAAA,CACA,iBACD,CAAA,CAGA,MAAMG,EAAG,KAAA,CAAMP,CAAAA,CAAK,QAAQD,CAAiB,CAAA,CAAG,CAAE,SAAA,CAAW,CAAA,CAAK,CAAC,CAAA,CAGnE,MAAMQ,EAAG,QAAA,CAASF,CAAAA,CAAeN,CAAiB,CAAA,CAGlD,GAAI,CACH,MAAMQ,CAAAA,CAAG,SAASD,CAAAA,CAAkB,CAAA,EAAGP,CAAiB,CAAA,IAAA,CAAM,EAC/D,MAAQ,CAER,CACD,OAASS,CAAAA,CAAO,CACf,OAAA,CAAQ,IAAA,CACP,sDACAA,CACD,EACD,CACD,CAAA,CAEA,kBAAA,CAAmBC,EAAM,CACxB,GAAI,CAACZ,CAAAA,CAAqB,OAAOY,EAGjC,IAAMC,CAAAA,CACL,8EAIKC,CAAAA,CAAgB,CAAA,2BAAA,EADFZ,EAAkB,OAAA,CAAQD,CAAAA,CAAa,EAAE,CACE,CAAA,WAAA,CAAA,CAG3Dc,EAAeH,CAAAA,CAAK,OAAA,CAAQ,UAAW,CAAA,EAAGC,CAAW,SAAS,CAAA,CAClE,OAAAE,EAAeA,CAAAA,CAAa,OAAA,CAAQ,UAAW,CAAA,EAAGD,CAAa,SAAS,CAAA,CAEjEC,CACR,CACD,CACD","file":"index.mjs","sourcesContent":["import fs from \"node:fs/promises\";\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport type { Plugin } from \"vite\";\n\n/**\n * React plugin configuration that should be applied to enable design mode.\n * Works with both @vitejs/plugin-react and @vitejs/plugin-react-swc.\n *\n * Usage:\n * ```ts\n * import react from '@vitejs/plugin-react'\n * import { firebuzzDesignMode, getReactPluginConfig } from '@firebuzz/design-mode'\n *\n * export default defineConfig({\n * plugins: [\n * react(getReactPluginConfig()),\n * firebuzzDesignMode(),\n * ],\n * })\n * ```\n */\nexport function getReactPluginConfig() {\n\tconst isDesignModeEnabled =\n\t\tprocess.env.NODE_ENV === \"development\" &&\n\t\tprocess.env.VITE_DESIGN_MODE !== \"false\";\n\n\tif (!isDesignModeEnabled) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\tbabel: {\n\t\t\tplugins: [[\"@react-dev-inspector/babel-plugin\", {}]],\n\t\t},\n\t};\n}\n\n/**\n * Vite plugin that enables design mode features for Firebuzz templates\n * - Injects Tailwind Play CDN for runtime CSS generation\n * - Injects overlay script for element selection\n *\n * NOTE: You must also configure the React plugin with getReactPluginConfig()\n * to enable element source tracking (works with both React 18 and 19).\n */\nexport function firebuzzDesignMode(): Plugin {\n\t// Only enable in development, never in production builds\n\tconst isDesignModeEnabled =\n\t\tprocess.env.NODE_ENV === \"development\" &&\n\t\tprocess.env.VITE_DESIGN_MODE !== \"false\";\n\n\tconst projectRoot = process.cwd();\n\n\tconst overlayOutputPath = path.resolve(\n\t\tprojectRoot,\n\t\t\"./node_modules/.vite-plugin-firebuzz-design-mode/overlay.mjs\",\n\t);\n\n\treturn {\n\t\tname: \"vite-plugin-firebuzz-design-mode\",\n\t\tenforce: \"pre\",\n\n\t\tasync buildStart() {\n\t\t\tif (!isDesignModeEnabled) return;\n\n\t\t\t// Copy overlay file to a location Vite can serve\n\t\t\ttry {\n\t\t\t\t// Find the overlay source file from the package using import.meta.url\n\t\t\t\tconst currentFileUrl = import.meta.url;\n\t\t\t\tconst currentFilePath = fileURLToPath(currentFileUrl);\n\t\t\t\tconst packageRoot = path.resolve(path.dirname(currentFilePath), \"..\");\n\t\t\t\tconst overlaySource = path.join(packageRoot, \"dist\", \"overlay.mjs\");\n\t\t\t\tconst overlaySourceMap = path.join(\n\t\t\t\t\tpackageRoot,\n\t\t\t\t\t\"dist\",\n\t\t\t\t\t\"overlay.mjs.map\",\n\t\t\t\t);\n\n\t\t\t\t// Ensure output directory exists\n\t\t\t\tawait fs.mkdir(path.dirname(overlayOutputPath), { recursive: true });\n\n\t\t\t\t// Copy the overlay file\n\t\t\t\tawait fs.copyFile(overlaySource, overlayOutputPath);\n\n\t\t\t\t// Copy the source map file if it exists\n\t\t\t\ttry {\n\t\t\t\t\tawait fs.copyFile(overlaySourceMap, `${overlayOutputPath}.map`);\n\t\t\t\t} catch {\n\t\t\t\t\t// Source map is optional, ignore if not found\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t\"[Firebuzz Design Mode] Could not copy overlay file:\",\n\t\t\t\t\terror,\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\n\t\ttransformIndexHtml(html) {\n\t\t\tif (!isDesignModeEnabled) return html;\n\n\t\t\t// Inject Tailwind v4 Browser CDN for runtime CSS generation\n\t\t\tconst tailwindCDN =\n\t\t\t\t'<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>';\n\n\t\t\t// Inject the overlay script\n\t\t\tconst overlayPath = overlayOutputPath.replace(projectRoot, \"\");\n\t\t\tconst overlayScript = `<script type=\"module\" src=\"${overlayPath}\"></script>`;\n\n\t\t\t// Inject both in the head (Tailwind CDN) and before </body> (overlay)\n\t\t\tlet modifiedHtml = html.replace(\"</head>\", `${tailwindCDN}</head>`);\n\t\t\tmodifiedHtml = modifiedHtml.replace(\"</body>\", `${overlayScript}</body>`);\n\n\t\t\treturn modifiedHtml;\n\t\t},\n\t};\n}\n"]}
|
package/dist/overlay.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
'use strict';var h=new Set;function d(m){let e=m.replace(/['"]/g,"").split(",")[0]?.trim();if(!e||h.has(e)||["Arial","Helvetica","Helvetica Neue","Segoe UI","San Francisco","system-ui","sans-serif","Times New Roman","Georgia","Times","serif","Monaco","Consolas","SF Mono","Menlo","Courier New","Courier","monospace"].some(r=>e.includes(r)))return;let s=`https://fonts.googleapis.com/css2?family=${e.replace(/\s+/g,"+")}:wght@400;500;600&display=swap`;if(document.querySelector(`link[href="${s}"]`)){h.add(e);return}let t=document.createElement("link");t.rel="stylesheet",t.href=s,t.onload=()=>{h.add(e);},t.onerror=()=>{},document.head.appendChild(t);}var u=class{isEnabled=false;selectedElement=null;hoveredElement=null;hoverOverlay;selectionOverlay;selectionTagLabel;childrenOverlays=[];resizeObserver=null;constructor(){this.loadInitialFonts(),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 s=document.createElement("div");return s.className="fb-design-mode-overlay",Object.assign(s.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(s),s}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_DELETE_ELEMENT"?this.handleDeleteElement(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(t=>this.getReactFiberSource(t)!==null),s=this.childrenOverlays.indexOf(e),i=n[s];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 s of n){if(s.classList?.contains("fb-design-mode-overlay")||s.classList?.contains("fb-design-mode-tag"))continue;let i=this.getReactFiberSource(s);if(i&&i.fileName===e.sourceFile&&i.lineNumber===e.sourceLine&&i.columnNumber===e.sourceColumn){let t=s;this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=t,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,t),this.selectionOverlay.style.display="block",this.updateTagLabel(t),this.selectionTagLabel.style.display="block",this.sendElementData(t,i);return}}}getReactFiberSource(e){let n=e,s=0;for(;n&&s<5;){let i=n.getAttribute("data-inspector-relative-path"),t=n.getAttribute("data-inspector-line"),r=n.getAttribute("data-inspector-column");if(i&&t&&r)return {fileName:i,lineNumber:Number.parseInt(t,10),columnNumber:Number.parseInt(r,10)};n=n.parentElement,s++;}return null}isContainer(e){return ["div","section","header","footer","main","aside","nav","article","ul","ol","li"].includes(e.tagName.toLowerCase())}hasDirectTextContent(e){return Array.from(e.childNodes).some(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 s=document.elementsFromPoint(e.clientX,e.clientY).filter(t=>{if(t.classList.contains("fb-design-mode-overlay")||t.classList.contains("fb-design-mode-tag"))return false;let r=this.getReactFiberSource(t);return r!==null});if(s.length===0){this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=null,this.hoverOverlay.style.display="none",this.hideChildrenOverlays();return}let i=s[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(s=>this.getReactFiberSource(s)!==null);for(;this.childrenOverlays.length<n.length;)this.childrenOverlays.push(this.createChildOverlay());n.forEach((s,i)=>{let t=this.childrenOverlays[i];t&&(this.updateOverlayPosition(t,s),t.style.display="block");});for(let s=n.length;s<this.childrenOverlays.length;s++){let i=this.childrenOverlays[s];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(),s=n-this.lastClickTime,i=Math.hypot(e.clientX-this.lastClickPosition.x,e.clientY-this.lastClickPosition.y),r=document.elementsFromPoint(e.clientX,e.clientY).filter(l=>l.classList.contains("fb-design-mode-overlay")||l.classList.contains("fb-design-mode-tag")?false:this.getReactFiberSource(l)!==null);s<1e3&&i<10&&r.length>1?this.currentSelectionIndex=(this.currentSelectionIndex+1)%r.length:this.currentSelectionIndex=0;let a=r[this.currentSelectionIndex];if(!a)return;let o=this.getReactFiberSource(a);o&&(this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=a,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,a),this.selectionOverlay.style.display="block",this.updateTagLabel(a),this.selectionTagLabel.style.display="block",this.sendElementData(a,o),this.lastClickTime=n,this.lastClickPosition={x:e.clientX,y:e.clientY});};updateOverlayPosition(e,n){let s=n.getBoundingClientRect();Object.assign(e.style,{top:`${s.top+window.scrollY}px`,left:`${s.left+window.scrollX}px`,width:`${s.width}px`,height:`${s.height}px`});}updateTagLabel(e){let n=e.getBoundingClientRect(),s=e.tagName.toLowerCase();this.selectionTagLabel.textContent=s,Object.assign(this.selectionTagLabel.style,{top:`${n.top+window.scrollY}px`,left:`${n.left+window.scrollX}px`});}getRelevantStyles(e){let n=window.getComputedStyle(e),s=["display","position","width","height","padding","margin","backgroundColor","color","fontSize","fontFamily"],i={};for(let t of s)i[t]=n.getPropertyValue(t);return i}getDirectTextContent(e){let n=Array.from(e.childNodes).filter(s=>s.nodeType===Node.TEXT_NODE).map(s=>s.textContent?.trim()).filter(Boolean);return n.length>0?n.join(" "):null}sendElementData(e,n){let s=this.getDirectTextContent(e),i=document.documentElement.classList.contains("dark"),t="";e.className&&(typeof e.className=="string"?t=e.className:"baseVal"in e.className&&(t=e.className.baseVal));let r={type:"FB_ELEMENT_SELECTED",data:{sourceFile:n.fileName,sourceLine:n.lineNumber,sourceColumn:n.columnNumber,tagName:e.tagName,className:t,textContent:s,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),isDarkMode:i}};window.parent.postMessage(r,"*");}handleGetAllElementsState(){let e=document.querySelectorAll("*"),n=[];for(let s of e){if(s.classList?.contains("fb-design-mode-overlay")||s.classList?.contains("fb-design-mode-tag"))continue;let i=this.getReactFiberSource(s);if(!i)continue;let t=s,r=t;if(t.tagName!=="IMG"){let l=t.querySelector("img");l&&(r=l);}let a=this.getDirectTextContent(t),o="";t.className&&(typeof t.className=="string"?o=t.className:"baseVal"in t.className&&(o=t.className.baseVal)),n.push({sourceFile:i.fileName,sourceLine:i.lineNumber,sourceColumn:i.columnNumber,className:o,textContent:a,src:r.getAttribute("src")||void 0,alt:r.getAttribute("alt")||void 0,href:t.getAttribute("href")||void 0,target:t.getAttribute("target")||void 0,rel:t.getAttribute("rel")||void 0});}window.parent.postMessage({type:"FB_ALL_ELEMENTS_STATE",data:n},"*");}handleUpdateElement(e){let{sourceFile:n,sourceLine:s,sourceColumn:i,updates:t}=e;if(!n||!s||!t)return;let r=document.querySelectorAll("*");for(let a of r){let o=this.getReactFiberSource(a);if(o?.fileName===n&&o?.lineNumber===s&&o?.columnNumber===i){let l=a;if((t.src!==void 0||t.alt!==void 0)&&l.tagName!=="IMG"){let c=l.querySelector("img");c&&(l=c);}if(t.className!==void 0&&(typeof l.className=="string"?l.className=t.className:"baseVal"in l.className?l.className.baseVal=t.className:l.setAttribute("class",t.className),l.hasAttribute("style")&&l.removeAttribute("style")),t.textContent!==void 0){let c=Array.from(l.childNodes).find(f=>f.nodeType===Node.TEXT_NODE);c?c.textContent=t.textContent:l.textContent=t.textContent;}t.src!==void 0&&"src"in l&&(l.setAttribute("src",t.src),l.hasAttribute("srcset")&&l.removeAttribute("srcset")),t.alt!==void 0&&"alt"in l&&(l.alt=t.alt),t.href!==void 0&&"href"in l&&l.setAttribute("href",t.href),t.target!==void 0&&"target"in l&&l.setAttribute("target",t.target),t.rel!==void 0&&"rel"in l&&l.setAttribute("rel",t.rel),l===this.hoveredElement&&this.updateOverlayPosition(this.hoverOverlay,l),l===this.selectedElement&&(this.updateOverlayPosition(this.selectionOverlay,l),this.updateTagLabel(l));return}}}handleDeleteElement(e){let{sourceFile:n,sourceLine:s,sourceColumn:i}=e;if(!n||!s||!i)return;let t=document.querySelectorAll("*");for(let r of t){let a=this.getReactFiberSource(r);if(a?.fileName===n&&a?.lineNumber===s&&a?.columnNumber===i){let o=r;o===this.selectedElement&&this.deselectElement(),o===this.hoveredElement&&(this.hoveredElement=null,this.hoverOverlay.style.display="none"),o.remove();return}}}loadInitialFonts(){try{let e=getComputedStyle(document.documentElement),n=e.getPropertyValue("--font-sans").trim(),s=e.getPropertyValue("--font-serif").trim(),i=e.getPropertyValue("--font-mono").trim();n&&d(n),s&&d(s),i&&d(i);}catch(e){console.error("Error loading initial fonts:",e);}}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 s="";if(e.lightVariables&&Object.keys(e.lightVariables).length>0){s+=`:root {
|
|
2
|
-
`;for(let[i,t]of Object.entries(e.lightVariables))if(
|
|
3
|
-
`,i==="--font-sans"||i==="--font-serif"||i==="--font-mono"){let
|
|
1
|
+
'use strict';var h=new Set;function c(m){let e=m.replace(/['"]/g,"").split(",")[0]?.trim();if(!e||h.has(e)||["Arial","Helvetica","Helvetica Neue","Segoe UI","San Francisco","system-ui","sans-serif","Times New Roman","Georgia","Times","serif","Monaco","Consolas","SF Mono","Menlo","Courier New","Courier","monospace"].some(r=>e.includes(r)))return;let n=`https://fonts.googleapis.com/css2?family=${e.replace(/\s+/g,"+")}:wght@400;500;600&display=swap`;if(document.querySelector(`link[href="${n}"]`)){h.add(e);return}let t=document.createElement("link");t.rel="stylesheet",t.href=n,t.onload=()=>{h.add(e);},t.onerror=()=>{},document.head.appendChild(t);}var u=class{isEnabled=false;selectedElement=null;hoveredElement=null;hoverOverlay;selectionOverlay;selectionTagLabel;childrenOverlays=[];resizeObserver=null;constructor(){this.loadInitialFonts(),this.hoverOverlay=this.createOverlay("2px solid #3b82f6",999991),this.selectionOverlay=this.createOverlay("1px solid #3b82f6",999990),this.selectionTagLabel=this.createTagLabel(),this.listen(),this.setupResizeObserver();}createOverlay(e,s){let n=document.createElement("div");return n.className="fb-design-mode-overlay",Object.assign(n.style,{position:"absolute",border:e,pointerEvents:"none",zIndex:String(s),display:"none",boxShadow:"0 0 0 1px rgba(59, 130, 246, 0.2)",transition:"all 0.1s ease-out"}),document.body.appendChild(n),n}createChildOverlay(){let e=document.createElement("div");return e.className="fb-design-mode-overlay fb-child-overlay",Object.assign(e.style,{position:"absolute",border:"1px dashed rgba(59, 130, 246, 0.4)",pointerEvents:"none",zIndex:"999989",display:"none",boxShadow:"0 0 0 1px rgba(59, 130, 246, 0.1)",transition:"all 0.1s ease-out"}),document.body.appendChild(e),e}createTagLabel(){let e=document.createElement("div");return e.className="fb-design-mode-tag",Object.assign(e.style,{position:"absolute",background:"#3b82f6",color:"white",padding:"2px 6px",fontSize:"11px",fontFamily:"monospace",fontWeight:"500",borderRadius:"0 0 4px 0",pointerEvents:"none",zIndex:"999999",display:"none"}),document.body.appendChild(e),e}listen(){window.addEventListener("message",e=>{e.data.type==="ENABLE_DESIGN_MODE"?this.enable():e.data.type==="DISABLE_DESIGN_MODE"?this.disable():e.data.type==="FB_UPDATE_ELEMENT"?this.handleUpdateElement(e.data):e.data.type==="FB_DELETE_ELEMENT"?this.handleDeleteElement(e.data):e.data.type==="FB_GET_ALL_ELEMENTS_STATE"?this.handleGetAllElementsState():e.data.type==="FB_UPDATE_THEME"?this.handleUpdateTheme(e.data.theme):e.data.type==="FB_DESELECT_ELEMENT"?this.deselectElement():e.data.type==="FB_SELECT_ELEMENT"&&this.handleSelectElement(e.data);});}setupResizeObserver(){window.addEventListener("resize",this.updateOverlayPositions),window.addEventListener("scroll",this.updateOverlayPositions,true),this.resizeObserver=new ResizeObserver(()=>{this.updateOverlayPositions();}),this.resizeObserver.observe(document.body);}updateOverlayPositions=()=>{this.selectedElement&&this.selectionOverlay.style.display!=="none"&&(this.updateOverlayPosition(this.selectionOverlay,this.selectedElement),this.updateTagLabel(this.selectedElement)),this.hoveredElement&&this.hoverOverlay.style.display!=="none"&&this.updateOverlayPosition(this.hoverOverlay,this.hoveredElement);for(let e of this.childrenOverlays)if(e.style.display!=="none"&&this.hoveredElement){let s=Array.from(this.hoveredElement.children).filter(t=>this.getReactFiberSource(t)!==null),n=this.childrenOverlays.indexOf(e),i=s[n];i&&this.updateOverlayPosition(e,i);}};enable(){this.isEnabled||(this.isEnabled=true,document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("click",this.handleClick,true),document.addEventListener("mouseleave",this.handleMouseLeave),document.body.style.cursor="crosshair");}disable(){this.isEnabled&&(this.isEnabled=false,document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("click",this.handleClick,true),document.removeEventListener("mouseleave",this.handleMouseLeave),this.hoverOverlay.style.display="none",this.selectionOverlay.style.display="none",this.selectionTagLabel.style.display="none",this.hideChildrenOverlays(),this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),document.body.style.cursor="",this.selectedElement=null,this.hoveredElement=null);}deselectElement(){this.selectedElement&&(this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=null,this.selectionOverlay.style.display="none",this.selectionTagLabel.style.display="none");}handleSelectElement(e){if(!e.sourceFile||!e.sourceLine||e.sourceColumn===void 0)return;let s=document.querySelectorAll("*");for(let n of s){if(n.classList?.contains("fb-design-mode-overlay")||n.classList?.contains("fb-design-mode-tag"))continue;let i=this.getReactFiberSource(n);if(i&&i.fileName===e.sourceFile&&i.lineNumber===e.sourceLine&&i.columnNumber===e.sourceColumn){let t=n;this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=t,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,t),this.selectionOverlay.style.display="block",this.updateTagLabel(t),this.selectionTagLabel.style.display="block",this.sendElementData(t,i);return}}}getReactFiberSource(e){let s=e,n=0;for(;s&&n<5;){let i=s.getAttribute("data-inspector-relative-path"),t=s.getAttribute("data-inspector-line"),r=s.getAttribute("data-inspector-column");if(i&&t&&r)return {fileName:i,lineNumber:Number.parseInt(t,10),columnNumber:Number.parseInt(r,10)};s=s.parentElement,n++;}return null}isContainer(e){return ["div","section","header","footer","main","aside","nav","article","ul","ol","li"].includes(e.tagName.toLowerCase())}hasDirectTextContent(e){return Array.from(e.childNodes).some(s=>s.nodeType===Node.TEXT_NODE&&s.textContent?.trim())}handleMouseLeave=()=>{this.isEnabled&&(this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=null,this.hoverOverlay.style.display="none",this.hideChildrenOverlays());};handleMouseMove=e=>{if(!this.isEnabled)return;let n=document.elementsFromPoint(e.clientX,e.clientY).filter(t=>{if(t.classList.contains("fb-design-mode-overlay")||t.classList.contains("fb-design-mode-tag"))return false;let r=this.getReactFiberSource(t);return r!==null});if(n.length===0){this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=null,this.hoverOverlay.style.display="none",this.hideChildrenOverlays();return}let i=n[0];if(i){if(i===this.selectedElement){this.hoverOverlay.style.display="none",this.hideChildrenOverlays();return}this.hoveredElement&&this.hoveredElement!==i&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=i,this.hoveredElement.setAttribute("data-fb-hovered","true"),this.updateOverlayPosition(this.hoverOverlay,i),this.hoverOverlay.style.display="block",this.isContainer(i)&&!this.hasDirectTextContent(i)?this.showChildrenOverlays(i):this.hideChildrenOverlays();}};showChildrenOverlays(e){let s=Array.from(e.children).filter(n=>this.getReactFiberSource(n)!==null);for(;this.childrenOverlays.length<s.length;)this.childrenOverlays.push(this.createChildOverlay());s.forEach((n,i)=>{let t=this.childrenOverlays[i];t&&(this.updateOverlayPosition(t,n),t.style.display="block");});for(let n=s.length;n<this.childrenOverlays.length;n++){let i=this.childrenOverlays[n];i&&(i.style.display="none");}}hideChildrenOverlays(){for(let e of this.childrenOverlays)e.style.display="none";}currentSelectionIndex=0;lastClickTime=0;lastClickPosition={x:0,y:0};handleClick=e=>{if(!this.isEnabled||(e.preventDefault(),e.stopPropagation(),!this.hoveredElement))return;let s=Date.now(),n=s-this.lastClickTime,i=Math.hypot(e.clientX-this.lastClickPosition.x,e.clientY-this.lastClickPosition.y),r=document.elementsFromPoint(e.clientX,e.clientY).filter(l=>l.classList.contains("fb-design-mode-overlay")||l.classList.contains("fb-design-mode-tag")?false:this.getReactFiberSource(l)!==null);n<1e3&&i<10&&r.length>1?this.currentSelectionIndex=(this.currentSelectionIndex+1)%r.length:this.currentSelectionIndex=0;let o=r[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=s,this.lastClickPosition={x:e.clientX,y:e.clientY});};updateOverlayPosition(e,s){let n=s.getBoundingClientRect();Object.assign(e.style,{top:`${n.top+window.scrollY}px`,left:`${n.left+window.scrollX}px`,width:`${n.width}px`,height:`${n.height}px`});}updateTagLabel(e){let s=e.getBoundingClientRect(),n=e.tagName.toLowerCase();this.selectionTagLabel.textContent=n,Object.assign(this.selectionTagLabel.style,{top:`${s.top+window.scrollY}px`,left:`${s.left+window.scrollX}px`});}getRelevantStyles(e){let s=window.getComputedStyle(e),n=["display","position","width","height","padding","margin","backgroundColor","color","fontSize","fontFamily"],i={};for(let t of n)i[t]=s.getPropertyValue(t);return i}getDirectTextContent(e){let s=Array.from(e.childNodes).filter(n=>n.nodeType===Node.TEXT_NODE).map(n=>n.textContent?.trim()).filter(Boolean);return s.length>0?s.join(" "):null}sendElementData(e,s){let n=this.getDirectTextContent(e),i=document.documentElement.classList.contains("dark"),t={type:"FB_ELEMENT_SELECTED",data:{sourceFile:s.fileName,sourceLine:s.lineNumber,sourceColumn:s.columnNumber,tagName:e.tagName,className:e.className,textContent:n,src:e.getAttribute("src")||void 0,alt:e.getAttribute("alt")||void 0,href:e.getAttribute("href")||void 0,target:e.getAttribute("target")||void 0,rel:e.getAttribute("rel")||void 0,computedStyles:this.getRelevantStyles(e),isDarkMode:i}};window.parent.postMessage(t,"*");}handleGetAllElementsState(){let e=document.querySelectorAll("*"),s=[];for(let n of e){if(n.classList?.contains("fb-design-mode-overlay")||n.classList?.contains("fb-design-mode-tag"))continue;let i=this.getReactFiberSource(n);if(!i)continue;let t=n,r=t;if(t.tagName!=="IMG"){let l=t.querySelector("img");l&&(r=l);}let o=this.getDirectTextContent(t),a="";t.className&&(typeof t.className=="string"?a=t.className:"baseVal"in t.className&&(a=t.className.baseVal)),s.push({sourceFile:i.fileName,sourceLine:i.lineNumber,sourceColumn:i.columnNumber,className:a,textContent:o,src:r.getAttribute("src")||void 0,alt:r.getAttribute("alt")||void 0,href:t.getAttribute("href")||void 0,target:t.getAttribute("target")||void 0,rel:t.getAttribute("rel")||void 0});}window.parent.postMessage({type:"FB_ALL_ELEMENTS_STATE",data:s},"*");}handleUpdateElement(e){let{sourceFile:s,sourceLine:n,sourceColumn:i,updates:t}=e;if(!s||!n||!t)return;let r=document.querySelectorAll("*");for(let o of r){let a=this.getReactFiberSource(o);if(a?.fileName===s&&a?.lineNumber===n&&a?.columnNumber===i){let l=o;if((t.src!==void 0||t.alt!==void 0)&&l.tagName!=="IMG"){let d=l.querySelector("img");d&&(l=d);}if(t.className!==void 0&&(l.className=t.className),t.textContent!==void 0){let d=Array.from(l.childNodes).find(f=>f.nodeType===Node.TEXT_NODE);d?d.textContent=t.textContent:l.textContent=t.textContent;}t.src!==void 0&&"src"in l&&(l.setAttribute("src",t.src),l.hasAttribute("srcset")&&l.removeAttribute("srcset")),t.alt!==void 0&&"alt"in l&&(l.alt=t.alt),t.href!==void 0&&"href"in l&&l.setAttribute("href",t.href),t.target!==void 0&&"target"in l&&l.setAttribute("target",t.target),t.rel!==void 0&&"rel"in l&&l.setAttribute("rel",t.rel),l===this.hoveredElement&&this.updateOverlayPosition(this.hoverOverlay,l),l===this.selectedElement&&(this.updateOverlayPosition(this.selectionOverlay,l),this.updateTagLabel(l));return}}}handleDeleteElement(e){let{sourceFile:s,sourceLine:n,sourceColumn:i}=e;if(!s||!n||!i)return;let t=document.querySelectorAll("*");for(let r of t){let o=this.getReactFiberSource(r);if(o?.fileName===s&&o?.lineNumber===n&&o?.columnNumber===i){let a=r;a===this.selectedElement&&this.deselectElement(),a===this.hoveredElement&&(this.hoveredElement=null,this.hoverOverlay.style.display="none"),a.remove();return}}}loadInitialFonts(){try{let e=getComputedStyle(document.documentElement),s=e.getPropertyValue("--font-sans").trim(),n=e.getPropertyValue("--font-serif").trim(),i=e.getPropertyValue("--font-mono").trim();s&&c(s),n&&c(n),i&&c(i);}catch(e){console.error("Error loading initial fonts:",e);}}handleUpdateTheme(e){if(!e)return;let s=document.getElementById("fb-design-mode-theme");s||(s=document.createElement("style"),s.id="fb-design-mode-theme",document.head.appendChild(s));let n="";if(e.lightVariables&&Object.keys(e.lightVariables).length>0){n+=`:root {
|
|
2
|
+
`;for(let[i,t]of Object.entries(e.lightVariables))if(n+=` ${i}: ${t};
|
|
3
|
+
`,i==="--font-sans"||i==="--font-serif"||i==="--font-mono"){let o=t.match(/"([^"]+)"/)?.[1]||t.split(",")[0]?.trim()||t;c(o);}n+=`}
|
|
4
4
|
|
|
5
|
-
`;}if(e.darkVariables&&Object.keys(e.darkVariables).length>0){
|
|
6
|
-
`;for(let[i,t]of Object.entries(e.darkVariables))
|
|
7
|
-
`;
|
|
8
|
-
`;}
|
|
5
|
+
`;}if(e.darkVariables&&Object.keys(e.darkVariables).length>0){n+=`.dark {
|
|
6
|
+
`;for(let[i,t]of Object.entries(e.darkVariables))n+=` ${i}: ${t};
|
|
7
|
+
`;n+=`}
|
|
8
|
+
`;}s.textContent=n;}};typeof window<"u"&&typeof document<"u"&&new u;//# sourceMappingURL=overlay.js.map
|
|
9
9
|
//# sourceMappingURL=overlay.js.map
|