@easybits.cloud/html-tailwind-generator 0.1.6 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/dist/chunk-24P7DHB7.js +41 -0
  2. package/dist/chunk-24P7DHB7.js.map +1 -0
  3. package/dist/chunk-464CGCFJ.js +912 -0
  4. package/dist/chunk-464CGCFJ.js.map +1 -0
  5. package/{src/refine.ts → dist/chunk-CB2LECVT.js} +30 -60
  6. package/dist/chunk-CB2LECVT.js.map +1 -0
  7. package/{src/images/dalleImages.ts → dist/chunk-LPI2QUCL.js} +10 -12
  8. package/dist/chunk-LPI2QUCL.js.map +1 -0
  9. package/{src/generate.ts → dist/chunk-S7YLW6ZU.js} +68 -115
  10. package/dist/chunk-S7YLW6ZU.js.map +1 -0
  11. package/{src/iframeScript.ts → dist/chunk-UGIQBLG5.js} +260 -10
  12. package/dist/chunk-UGIQBLG5.js.map +1 -0
  13. package/{src/images/enrichImages.ts → dist/chunk-YPK3DAFK.js} +44 -61
  14. package/dist/chunk-YPK3DAFK.js.map +1 -0
  15. package/dist/components.d.ts +65 -0
  16. package/dist/components.js +16 -0
  17. package/dist/components.js.map +1 -0
  18. package/dist/deploy.d.ts +39 -0
  19. package/dist/deploy.js +10 -0
  20. package/dist/deploy.js.map +1 -0
  21. package/dist/generate.d.ts +41 -0
  22. package/dist/generate.js +14 -0
  23. package/dist/generate.js.map +1 -0
  24. package/dist/images.d.ts +30 -0
  25. package/dist/images.js +15 -0
  26. package/dist/images.js.map +1 -0
  27. package/dist/index.d.ts +30 -0
  28. package/dist/index.js +67 -0
  29. package/dist/index.js.map +1 -0
  30. package/dist/refine.d.ts +32 -0
  31. package/dist/refine.js +10 -0
  32. package/dist/refine.js.map +1 -0
  33. package/dist/themes-CWFZ6GB-.d.ts +35 -0
  34. package/dist/types-Flpl4wDs.d.ts +31 -0
  35. package/package.json +53 -50
  36. package/src/buildHtml.ts +0 -78
  37. package/src/components/Canvas.tsx +0 -162
  38. package/src/components/CodeEditor.tsx +0 -239
  39. package/src/components/FloatingToolbar.tsx +0 -350
  40. package/src/components/SectionList.tsx +0 -217
  41. package/src/components/index.ts +0 -4
  42. package/src/deploy.ts +0 -73
  43. package/src/images/index.ts +0 -3
  44. package/src/images/pexels.ts +0 -27
  45. package/src/index.ts +0 -58
  46. package/src/themes.ts +0 -204
  47. package/src/types.ts +0 -30
package/src/index.ts DELETED
@@ -1,58 +0,0 @@
1
- // Types
2
- export type { Section3, IframeMessage } from "./types";
3
- export type { LandingTheme, CustomColors } from "./themes";
4
-
5
- // Themes
6
- export {
7
- LANDING_THEMES,
8
- buildCustomTheme,
9
- buildCustomThemeCss,
10
- buildThemeCss,
11
- buildSingleThemeCss,
12
- } from "./themes";
13
-
14
- // HTML builders
15
- export { buildPreviewHtml, buildDeployHtml } from "./buildHtml";
16
- export { getIframeScript } from "./iframeScript";
17
-
18
- // Generation
19
- export {
20
- generateLanding,
21
- extractJsonObjects,
22
- SYSTEM_PROMPT,
23
- PROMPT_SUFFIX,
24
- type GenerateOptions,
25
- } from "./generate";
26
-
27
- // Refinement
28
- export {
29
- refineLanding,
30
- REFINE_SYSTEM,
31
- type RefineOptions,
32
- } from "./refine";
33
-
34
- // Deploy
35
- export {
36
- deployToS3,
37
- deployToEasyBits,
38
- type DeployToS3Options,
39
- type DeployToEasyBitsOptions,
40
- } from "./deploy";
41
-
42
- // Images
43
- export {
44
- searchImage,
45
- enrichImages,
46
- findImageSlots,
47
- generateImage,
48
- type PexelsResult,
49
- } from "./images/index";
50
-
51
- // Components (re-exported for convenience)
52
- export {
53
- Canvas,
54
- type CanvasHandle,
55
- SectionList,
56
- FloatingToolbar,
57
- CodeEditor,
58
- } from "./components/index";
package/src/themes.ts DELETED
@@ -1,204 +0,0 @@
1
- export interface LandingTheme {
2
- id: string;
3
- label: string;
4
- colors: {
5
- primary: string;
6
- "primary-light": string;
7
- "primary-dark": string;
8
- secondary: string;
9
- accent: string;
10
- surface: string;
11
- "surface-alt": string;
12
- "on-surface": string;
13
- "on-surface-muted": string;
14
- "on-primary": string;
15
- };
16
- }
17
-
18
- export const LANDING_THEMES: LandingTheme[] = [
19
- {
20
- id: "default",
21
- label: "Neutral",
22
- colors: {
23
- primary: "#18181b",
24
- "primary-light": "#3f3f46",
25
- "primary-dark": "#09090b",
26
- secondary: "#a1a1aa",
27
- accent: "#18181b",
28
- surface: "#ffffff",
29
- "surface-alt": "#fafafa",
30
- "on-surface": "#18181b",
31
- "on-surface-muted": "#71717a",
32
- "on-primary": "#ffffff",
33
- },
34
- },
35
- {
36
- id: "dark",
37
- label: "Dark",
38
- colors: {
39
- primary: "#e4e4e7",
40
- "primary-light": "#f4f4f5",
41
- "primary-dark": "#a1a1aa",
42
- secondary: "#71717a",
43
- accent: "#a78bfa",
44
- surface: "#09090b",
45
- "surface-alt": "#18181b",
46
- "on-surface": "#fafafa",
47
- "on-surface-muted": "#a1a1aa",
48
- "on-primary": "#09090b",
49
- },
50
- },
51
- {
52
- id: "slate",
53
- label: "Slate",
54
- colors: {
55
- primary: "#3b82f6",
56
- "primary-light": "#60a5fa",
57
- "primary-dark": "#2563eb",
58
- secondary: "#64748b",
59
- accent: "#3b82f6",
60
- surface: "#ffffff",
61
- "surface-alt": "#f8fafc",
62
- "on-surface": "#0f172a",
63
- "on-surface-muted": "#64748b",
64
- "on-primary": "#ffffff",
65
- },
66
- },
67
- {
68
- id: "midnight",
69
- label: "Midnight",
70
- colors: {
71
- primary: "#6366f1",
72
- "primary-light": "#818cf8",
73
- "primary-dark": "#4f46e5",
74
- secondary: "#94a3b8",
75
- accent: "#a78bfa",
76
- surface: "#0f172a",
77
- "surface-alt": "#1e293b",
78
- "on-surface": "#e2e8f0",
79
- "on-surface-muted": "#94a3b8",
80
- "on-primary": "#ffffff",
81
- },
82
- },
83
- {
84
- id: "warm",
85
- label: "Warm",
86
- colors: {
87
- primary: "#b45309",
88
- "primary-light": "#d97706",
89
- "primary-dark": "#92400e",
90
- secondary: "#78716c",
91
- accent: "#b45309",
92
- surface: "#fafaf9",
93
- "surface-alt": "#f5f5f4",
94
- "on-surface": "#1c1917",
95
- "on-surface-muted": "#78716c",
96
- "on-primary": "#ffffff",
97
- },
98
- },
99
- ];
100
-
101
- export interface CustomColors {
102
- primary: string;
103
- secondary?: string;
104
- accent?: string;
105
- surface?: string;
106
- }
107
-
108
- function parseHex(hex: string) {
109
- return {
110
- r: parseInt(hex.slice(1, 3), 16),
111
- g: parseInt(hex.slice(3, 5), 16),
112
- b: parseInt(hex.slice(5, 7), 16),
113
- };
114
- }
115
-
116
- function toHex(r: number, g: number, b: number) {
117
- return `#${[r, g, b].map((c) => Math.max(0, Math.min(255, c)).toString(16).padStart(2, "0")).join("")}`;
118
- }
119
-
120
- function luminance(hex: string) {
121
- const { r, g, b } = parseHex(hex);
122
- return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
123
- }
124
-
125
- function lighten(hex: string, amount = 40) {
126
- const { r, g, b } = parseHex(hex);
127
- return toHex(r + amount, g + amount, b + amount);
128
- }
129
-
130
- function darken(hex: string, amount = 40) {
131
- const { r, g, b } = parseHex(hex);
132
- return toHex(r - amount, g - amount, b - amount);
133
- }
134
-
135
- export function buildCustomTheme(colors: CustomColors): LandingTheme {
136
- const { primary, secondary = "#f59e0b", accent = "#06b6d4", surface = "#ffffff" } = colors;
137
-
138
- const onPrimary = luminance(primary) > 0.5 ? "#111827" : "#ffffff";
139
- const surfaceLum = luminance(surface);
140
- const isDarkSurface = surfaceLum < 0.5;
141
-
142
- return {
143
- id: "custom",
144
- label: "Custom",
145
- colors: {
146
- primary,
147
- "primary-light": lighten(primary),
148
- "primary-dark": darken(primary),
149
- secondary,
150
- accent,
151
- surface,
152
- "surface-alt": isDarkSurface ? lighten(surface, 20) : darken(surface, 5),
153
- "on-surface": isDarkSurface ? "#f1f5f9" : "#111827",
154
- "on-surface-muted": isDarkSurface ? "#94a3b8" : "#6b7280",
155
- "on-primary": onPrimary,
156
- },
157
- };
158
- }
159
-
160
- export function buildCustomThemeCss(colors: CustomColors): string {
161
- const theme = buildCustomTheme(colors);
162
- return `[data-theme="custom"] {\n${buildCssVars(theme.colors)}\n}`;
163
- }
164
-
165
- /** CSS custom properties for a theme */
166
- function buildCssVars(colors: LandingTheme["colors"]): string {
167
- return Object.entries(colors)
168
- .map(([k, v]) => ` --color-${k}: ${v};`)
169
- .join("\n");
170
- }
171
-
172
- /** Build the tailwind.config JS object string for TW v3 CDN */
173
- function buildTailwindConfig(): string {
174
- const colorEntries = Object.keys(LANDING_THEMES[0].colors)
175
- .map((k) => ` '${k}': 'var(--color-${k})'`)
176
- .join(",\n");
177
-
178
- return `{
179
- theme: {
180
- extend: {
181
- colors: {
182
- ${colorEntries}
183
- }
184
- }
185
- }
186
- }`;
187
- }
188
-
189
- export function buildThemeCss(): { css: string; tailwindConfig: string } {
190
- const defaultTheme = LANDING_THEMES[0];
191
-
192
- const overrides = LANDING_THEMES.slice(1)
193
- .map((t) => `[data-theme="${t.id}"] {\n${buildCssVars(t.colors)}\n}`)
194
- .join("\n\n");
195
-
196
- const css = `:root {\n${buildCssVars(defaultTheme.colors)}\n}\n\n${overrides}`;
197
- return { css, tailwindConfig: buildTailwindConfig() };
198
- }
199
-
200
- export function buildSingleThemeCss(themeId: string): { css: string; tailwindConfig: string } {
201
- const theme = LANDING_THEMES.find((t) => t.id === themeId) || LANDING_THEMES[0];
202
- const css = `:root {\n${buildCssVars(theme.colors)}\n}`;
203
- return { css, tailwindConfig: buildTailwindConfig() };
204
- }
package/src/types.ts DELETED
@@ -1,30 +0,0 @@
1
- export interface Section3 {
2
- id: string;
3
- order: number;
4
- html: string;
5
- label: string;
6
- metadata?: {
7
- type?: string;
8
- dataBindings?: unknown[];
9
- scripts?: string[];
10
- };
11
- }
12
-
13
- export interface IframeMessage {
14
- type:
15
- | "element-selected"
16
- | "text-edited"
17
- | "element-deselected"
18
- | "ready"
19
- | "section-html-updated";
20
- sectionId?: string;
21
- tagName?: string;
22
- rect?: { top: number; left: number; width: number; height: number };
23
- text?: string;
24
- elementPath?: string;
25
- openTag?: string;
26
- newText?: string;
27
- isSectionRoot?: boolean;
28
- attrs?: Record<string, string>;
29
- sectionHtml?: string;
30
- }