@myissue/vue-website-page-builder 3.0.24 → 3.0.28

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 (18) hide show
  1. package/dist/vue-website-page-builder.js +5227 -5088
  2. package/dist/vue-website-page-builder.umd.cjs +307 -166
  3. package/package.json +1 -1
  4. package/src/Components/PageBuilder/EditorMenu/Editables/ElementEditor.vue +1 -1
  5. package/src/PageBuilder/PageBuilder.vue +40 -27
  6. package/src/utils/componentPreviews.ts +264 -98
  7. package/src/utils/html-elements/component.ts +23 -34
  8. package/dist/page-builder/2-images-text-top.png +0 -0
  9. package/dist/page-builder/2-images-text.png +0 -0
  10. package/dist/page-builder/2-images.png +0 -0
  11. package/dist/page-builder/3-images-text.png +0 -0
  12. package/dist/page-builder/3-images.png +0 -0
  13. package/dist/page-builder/3-vertical-images.png +0 -0
  14. package/dist/page-builder/4-images-text.png +0 -0
  15. package/dist/page-builder/6-images.png +0 -0
  16. package/dist/page-builder/image.png +0 -0
  17. package/dist/page-builder/placeholder.jpg +0 -0
  18. package/dist/page-builder/two-vertical-images.png +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@myissue/vue-website-page-builder",
3
- "version": "v3.0.24",
3
+ "version": "v3.0.28",
4
4
  "description": "🚧 DEVELOPMENT VERSION - Vue.js page builder component with drag & drop functionality. Not ready for production use.",
5
5
  "type": "module",
6
6
  "main": "./dist/vue-website-page-builder.umd.cjs",
package/src/Components/PageBuilder/EditorMenu/Editables/ElementEditor.vue CHANGED
@@ -20,7 +20,7 @@ const getRestoredElement = computed(() => {
20
20
 
21
21
  <template>
22
22
  <EditorAccordion>
23
- <template #title>Element Editor</template>
23
+ <template #title>Selected HTML Element</template>
24
24
  <template #content>
25
25
  <div class="flex flex-row flex-wrap gap-2 mt-2"></div>
26
26
  <div>
package/src/PageBuilder/PageBuilder.vue CHANGED
@@ -225,7 +225,7 @@ onMounted(async () => {
225
225
  </script>
226
226
 
227
227
  <template>
228
- <div>
228
+ <div id="builder-container">
229
229
  <SearchComponents
230
230
  v-if="showModalAddComponent"
231
231
  :show="showModalAddComponent"
@@ -241,10 +241,7 @@ onMounted(async () => {
241
241
  <Preview></Preview>
242
242
  </PageBuilderPreviewModal>
243
243
 
244
- <div
245
- id="builder-container"
246
- class="w-full inset-x-0 h-[90vh] z-10 bg-white overflow-x-scroll lg:pt-2 pt-2"
247
- >
244
+ <div class="w-full inset-x-0 h-[90vh] z-10 bg-white overflow-x-scroll lg:pt-2 pt-2">
248
245
  <!-- Save laylout # start -->
249
246
  <div class="p-4 m-8 bg-stone-200 rounded-lg">
250
247
  <div
@@ -417,29 +414,45 @@ onMounted(async () => {
417
414
  </span>
418
415
  </div>
419
416
  </button>
420
- <button
421
- type="button"
422
- @click="
423
- () => {
424
- pageBuilderStateStore.setMenuRight(false)
425
- pageBuilderStateStore.setElement(null)
426
- pageBuilderStateStore.setComponent(null)
427
- handlePageBuilderPreview()
428
- }
429
- "
430
- class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
431
- >
432
- <span class="material-symbols-outlined"> visibility </span>
433
- </button>
417
+ <div class="flex items-center justify-center gap-4">
418
+ <button
419
+ type="button"
420
+ @click="
421
+ () => {
422
+ pageBuilderStateStore.setMenuRight(false)
423
+ pageBuilderStateStore.setElement(null)
424
+ pageBuilderStateStore.setComponent(null)
425
+ handlePageBuilderPreview()
426
+ }
427
+ "
428
+ >
429
+ <div class="flex items-center justify-center gap-2">
430
+ <span class="lg:block hidden"> Preview </span>
431
+
432
+ <span
433
+ class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
434
+ >
435
+ <span class="myMediumIcon material-symbols-outlined"> visibility </span>
436
+ </span>
437
+ </div>
438
+ </button>
434
439
 
435
- <button
436
- type="button"
437
- v-if="getMenuRight === false"
438
- @click="pageBuilderStateStore.setMenuRight(true)"
439
- class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
440
- >
441
- <span class="material-symbols-outlined"> palette </span>
442
- </button>
440
+ <button
441
+ type="button"
442
+ v-if="getMenuRight === false"
443
+ @click="pageBuilderStateStore.setMenuRight(true)"
444
+ >
445
+ <div class="flex items-center justify-center gap-2">
446
+ <span class="lg:block hidden"> Design </span>
447
+
448
+ <span
449
+ class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
450
+ >
451
+ <span class="myMediumIcon material-symbols-outlined"> palette </span>
452
+ </span>
453
+ </div>
454
+ </button>
455
+ </div>
443
456
  </div>
444
457
  </div>
445
458
  </div>
package/src/utils/componentPreviews.ts CHANGED
@@ -7,144 +7,310 @@ export interface ComponentPreviewConfig {
7
7
  description?: string
8
8
  }
9
9
 
10
+ // Generate placeholder image data URL from Single Image SVG
11
+ export const getPlaceholderImageDataUrl = (): string => {
12
+ const singleImageSvg = `
13
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150">
14
+ <defs>
15
+ <style>
16
+ .bg { fill: #384152; }
17
+ .fg { fill: #718096; }
18
+ </style>
19
+ </defs>
20
+ <rect class="bg" width="200" height="150"/>
21
+ <polygon class="fg" points="65 90.01 90 60.01 115 90.01"/>
22
+ <polygon class="fg" points="110 90.01 122.5 75.01 135 90.01"/>
23
+ <circle class="fg" cx="122.5" cy="64.15" r="4.16"/>
24
+ </svg>
25
+ `
26
+
27
+ // Convert SVG to data URL
28
+ const encodedSvg = encodeURIComponent(singleImageSvg.trim())
29
+ return `data:image/svg+xml,${encodedSvg}`
30
+ }
31
+
10
32
  export const generateComponentPreview = (title: string): string => {
11
33
  const previewConfigs: Record<string, ComponentPreviewConfig> = {
12
34
  'Single Image': {
13
35
  title: 'Single Image',
14
36
  svg: `
15
- <svg viewBox="0 0 200 150" class="w-full h-full">
16
- <rect x="20" y="20" width="160" height="110" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="8"/>
17
- <rect x="40" y="40" width="120" height="70" fill="#e5e7eb" rx="4"/>
18
- <circle cx="70" cy="60" r="8" fill="#9ca3af"/>
19
- <path d="M85 75 L95 65 L110 80 L125 70 L135 85" stroke="#9ca3af" stroke-width="2" fill="none"/>
20
- <text x="100" y="125" text-anchor="middle" fill="#6b7280" font-size="12">Single Image</text>
37
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150">
38
+ <defs>
39
+ <style>
40
+ .bg { fill: #384152; }
41
+ .fg { fill: #718096; }
42
+ </style>
43
+ </defs>
44
+ <rect class="bg" width="200" height="150"/>
45
+ <polygon class="fg" points="65 90.01 90 60.01 115 90.01"/>
46
+ <polygon class="fg" points="110 90.01 122.5 75.01 135 90.01"/>
47
+ <circle class="fg" cx="122.5" cy="64.15" r="4.16"/>
21
48
  </svg>
22
49
  `,
23
50
  },
24
- '2 vertical images': {
51
+
52
+ '2 Vertical Images': {
25
53
  title: '2 Vertical Images',
26
54
  svg: `
27
- <svg viewBox="0 0 200 150" class="w-full h-full">
28
- <rect x="10" y="20" width="70" height="110" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="8"/>
29
- <rect x="120" y="20" width="70" height="110" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="8"/>
30
- <rect x="20" y="30" width="50" height="90" fill="#e5e7eb" rx="4"/>
31
- <rect x="130" y="30" width="50" height="90" fill="#e5e7eb" rx="4"/>
32
- <text x="100" y="145" text-anchor="middle" fill="#6b7280" font-size="10">2 Vertical Images</text>
55
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 137.88 122.11">
56
+ <defs>
57
+ <style>
58
+ .bg { fill: #384152; }
59
+ .fg { fill: #718096; }
60
+ </style>
61
+ </defs>
62
+ <rect class="bg" width="63.93" height="122.11"/>
63
+ <rect class="bg" x="73.95" width="63.93" height="122.11"/>
64
+ <polygon class="fg" points="8.68 71.04 25.31 51.08 41.94 71.04"/>
65
+ <polygon class="fg" points="38.62 71.04 46.93 61.06 55.24 71.04"/>
66
+ <circle class="fg" cx="46.93" cy="53.84" r="2.77"/>
67
+ <polygon class="fg" points="82.64 71.04 99.27 51.08 115.89 71.04"/>
68
+ <polygon class="fg" points="112.57 71.04 120.88 61.06 129.2 71.04"/>
69
+ <circle class="fg" cx="120.88" cy="53.84" r="2.77"/>
33
70
  </svg>
34
71
  `,
35
72
  },
36
- '2 images': {
37
- title: '2 Images',
73
+
74
+ '2 Square Images': {
75
+ title: '2 Square Images',
38
76
  svg: `
39
- <svg viewBox="0 0 200 150" class="w-full h-full">
40
- <rect x="20" y="30" width="70" height="70" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="8"/>
41
- <rect x="110" y="30" width="70" height="70" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="8"/>
42
- <rect x="30" y="40" width="50" height="50" fill="#e5e7eb" rx="4"/>
43
- <rect x="120" y="40" width="50" height="50" fill="#e5e7eb" rx="4"/>
44
- <text x="100" y="125" text-anchor="middle" fill="#6b7280" font-size="12">2 Images</text>
77
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 159.09 73.9">
78
+ <defs>
79
+ <style>
80
+ .bg { fill: #384152; }
81
+ .fg { fill: #718096; }
82
+ </style>
83
+ </defs>
84
+ <rect class="bg" width="73.9" height="73.9"/>
85
+ <rect class="bg" x="85.19" width="73.9" height="73.9"/>
86
+ <polygon class="fg" points="11.24 47.97 29.6 25.94 47.97 47.97"/>
87
+ <polygon class="fg" points="44.29 47.97 53.48 36.96 62.66 47.97"/>
88
+ <circle class="fg" cx="53.48" cy="28.98" r="3.06"/>
89
+ <polygon class="fg" points="96.43 47.97 114.8 25.94 133.16 47.97"/>
90
+ <polygon class="fg" points="129.49 47.97 138.67 36.96 147.85 47.97"/>
91
+ <circle class="fg" cx="138.67" cy="28.98" r="3.06"/>
45
92
  </svg>
46
93
  `,
47
94
  },
48
- '3 images': {
49
- title: '3 Images',
95
+
96
+ '3 Square Images': {
97
+ title: '3 Square Images',
50
98
  svg: `
51
- <svg viewBox="0 0 200 150" class="w-full h-full">
52
- <rect x="10" y="30" width="50" height="50" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="6"/>
53
- <rect x="75" y="30" width="50" height="50" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="6"/>
54
- <rect x="140" y="30" width="50" height="50" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="6"/>
55
- <text x="100" y="110" text-anchor="middle" fill="#6b7280" font-size="12">3 Images</text>
99
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.28 53.92">
100
+ <defs>
101
+ <style>
102
+ .bg { fill: #384152; }
103
+ .fg { fill: #718096; }
104
+ </style>
105
+ </defs>
106
+ <rect class="bg" width="53.92" height="53.92"/>
107
+ <rect class="bg" x="62.15" width="53.92" height="53.92"/>
108
+ <rect class="bg" x="123.37" width="53.92" height="53.92"/>
109
+ <polygon class="fg" points="8.2 35 21.6 18.92 35 35"/>
110
+ <polygon class="fg" points="32.32 35 39.02 26.96 45.71 35"/>
111
+ <circle class="fg" cx="39.02" cy="21.15" r="2.23"/>
112
+ <polygon class="fg" points="70.36 35 83.75 18.92 97.15 35"/>
113
+ <polygon class="fg" points="94.47 35 101.17 26.96 107.87 35"/>
114
+ <circle class="fg" cx="101.17" cy="21.15" r="2.23"/>
115
+ <polygon class="fg" points="131.57 35 144.96 18.92 158.36 35"/>
116
+ <polygon class="fg" points="155.68 35 162.38 26.96 169.08 35"/>
117
+ <circle class="fg" cx="162.38" cy="21.15" r="2.23"/>
56
118
  </svg>
57
119
  `,
58
120
  },
59
- '6 Images Grid': {
60
- title: '6 Images Grid',
121
+
122
+ '6 Square Images Grid': {
123
+ title: '6 Square Images Grid',
61
124
  svg: `
62
- <svg viewBox="0 0 200 150" class="w-full h-full">
63
- <rect x="20" y="20" width="45" height="35" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="4"/>
64
- <rect x="77" y="20" width="45" height="35" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="4"/>
65
- <rect x="135" y="20" width="45" height="35" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="4"/>
66
- <rect x="20" y="67" width="45" height="35" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="4"/>
67
- <rect x="77" y="67" width="45" height="35" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="4"/>
68
- <rect x="135" y="67" width="45" height="35" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="4"/>
69
- <text x="100" y="125" text-anchor="middle" fill="#6b7280" font-size="10">6 Images Grid</text>
125
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.28 120.27">
126
+ <defs>
127
+ <style>
128
+ .bg { fill: #384152; }
129
+ .fg { fill: #718096; }
130
+ </style>
131
+ </defs>
132
+ <rect class="bg" width="53.92" height="53.92"/>
133
+ <rect class="bg" x="62.15" width="53.92" height="53.92"/>
134
+ <rect class="bg" x="123.37" width="53.92" height="53.92"/>
135
+ <rect class="bg" y="66.35" width="53.92" height="53.92"/>
136
+ <rect class="bg" x="62.15" y="66.35" width="53.92" height="53.92"/>
137
+ <rect class="bg" x="123.37" y="66.35" width="53.92" height="53.92"/>
138
+ <polygon class="fg" points="8.2 35 21.6 18.92 35 35"/>
139
+ <polygon class="fg" points="32.32 35 39.02 26.96 45.71 35"/>
140
+ <circle class="fg" cx="39.02" cy="21.15" r="2.23"/>
141
+ <polygon class="fg" points="70.36 35 83.75 18.92 97.15 35"/>
142
+ <polygon class="fg" points="94.47 35 101.17 26.96 107.87 35"/>
143
+ <circle class="fg" cx="101.17" cy="21.15" r="2.23"/>
144
+ <polygon class="fg" points="131.57 35 144.96 18.92 158.36 35"/>
145
+ <polygon class="fg" points="155.68 35 162.38 26.96 169.08 35"/>
146
+ <circle class="fg" cx="162.38" cy="21.15" r="2.23"/>
147
+ <polygon class="fg" points="8.2 101.35 21.6 85.28 35 101.35"/>
148
+ <polygon class="fg" points="32.32 101.35 39.02 93.32 45.71 101.35"/>
149
+ <circle class="fg" cx="39.02" cy="87.5" r="2.23"/>
150
+ <polygon class="fg" points="70.36 101.35 83.75 85.28 97.15 101.35"/>
151
+ <polygon class="fg" points="94.47 101.35 101.17 93.32 107.87 101.35"/>
152
+ <circle class="fg" cx="101.17" cy="87.5" r="2.23"/>
153
+ <polygon class="fg" points="131.57 101.35 144.96 85.28 158.36 101.35"/>
154
+ <polygon class="fg" points="155.68 101.35 162.38 93.32 169.08 101.35"/>
155
+ <circle class="fg" cx="162.38" cy="87.5" r="2.23"/>
70
156
  </svg>
71
157
  `,
72
158
  },
73
- 'Two Images With Right Text Top': {
74
- title: 'Images + Text',
159
+
160
+ 'Two Square Images With Text': {
161
+ title: 'Two Square Images With Text',
75
162
  svg: `
76
- <svg viewBox="0 0 200 150" class="w-full h-full">
77
- <rect x="20" y="20" width="35" height="35" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="4"/>
78
- <rect x="20" y="65" width="35" height="35" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="4"/>
79
- <rect x="70" y="25" width="110" height="8" fill="#e5e7eb" rx="4"/>
80
- <rect x="70" y="40" width="90" height="6" fill="#f3f4f6" rx="3"/>
81
- <rect x="70" y="50" width="100" height="6" fill="#f3f4f6" rx="3"/>
82
- <rect x="70" y="60" width="80" height="6" fill="#f3f4f6" rx="3"/>
83
- <text x="100" y="130" text-anchor="middle" fill="#6b7280" font-size="10">Images + Text</text>
163
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.99 53.92">
164
+ <defs>
165
+ <style>
166
+ .bg { fill: #384152; }
167
+ .fg { fill: #718096; }
168
+ </style>
169
+ </defs>
170
+ <rect class="bg" width="53.92" height="53.92"/>
171
+ <rect class="bg" x="62.15" width="53.92" height="53.92"/>
172
+ <polygon class="fg" points="8.2 35 21.6 18.92 35 35"/>
173
+ <polygon class="fg" points="32.32 35 39.02 26.96 45.71 35"/>
174
+ <circle class="fg" cx="39.02" cy="21.15" r="2.23"/>
175
+ <polygon class="fg" points="70.36 35 83.75 18.92 97.15 35"/>
176
+ <polygon class="fg" points="94.47 35 101.17 26.96 107.87 35"/>
177
+ <circle class="fg" cx="101.17" cy="21.15" r="2.23"/>
178
+ <rect class="bg" x="126.07" width="53.92" height="2.93"/>
179
+ <rect class="bg" x="126.07" y="4" width="53.92" height="2.93"/>
180
+ <rect class="bg" x="126.07" y="7.99" width="53.92" height="2.93"/>
181
+ <rect class="bg" x="126.07" y="11.99" width="53.92" height="2.93"/>
182
+ <rect class="bg" x="126.07" y="15.99" width="53.92" height="2.93"/>
84
183
  </svg>
85
184
  `,
86
185
  },
186
+
87
187
  '3 Vertical Images': {
88
188
  title: '3 Vertical Images',
89
189
  svg: `
90
- <svg viewBox="0 0 200 150" class="w-full h-full">
91
- <rect x="15" y="20" width="45" height="80" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="6"/>
92
- <rect x="77" y="20" width="45" height="80" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="6"/>
93
- <rect x="140" y="20" width="45" height="80" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="6"/>
94
- <text x="100" y="125" text-anchor="middle" fill="#6b7280" font-size="10">3 Vertical Images</text>
190
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.84 110.72">
191
+ <defs>
192
+ <style>
193
+ .bg { fill: #384152; }
194
+ .fg { fill: #718096; }
195
+ </style>
196
+ </defs>
197
+ <rect class="bg" width="54.28" height="110.72"/>
198
+ <rect class="bg" x="62.79" width="54.28" height="110.72"/>
199
+ <rect class="bg" x="125.56" width="54.28" height="110.72"/>
200
+ <polygon class="fg" points="7.37 63.83 21.49 46.89 35.61 63.83"/>
201
+ <polygon class="fg" points="32.79 63.83 39.85 55.36 46.91 63.83"/>
202
+ <circle class="fg" cx="39.85" cy="49.23" r="2.35"/>
203
+ <polygon class="fg" points="70.17 63.83 84.29 46.89 98.4 63.83"/>
204
+ <polygon class="fg" points="95.58 63.83 102.64 55.36 109.7 63.83"/>
205
+ <circle class="fg" cx="102.64" cy="49.23" r="2.35"/>
206
+ <polygon class="fg" points="132.94 63.83 147.06 46.89 161.18 63.83"/>
207
+ <polygon class="fg" points="158.35 63.83 165.41 55.36 172.47 63.83"/>
208
+ <circle class="fg" cx="165.41" cy="49.23" r="2.35"/>
95
209
  </svg>
96
210
  `,
97
211
  },
98
- 'Link Button': {
99
- title: 'Link Button',
100
- svg: `
101
- <svg viewBox="0 0 200 150" class="w-full h-full">
102
- <rect x="50" y="60" width="100" height="30" fill="#3b82f6" stroke="#2563eb" stroke-width="2" rx="15"/>
103
- <text x="100" y="78" text-anchor="middle" fill="white" font-size="12" font-weight="500">Link Button</text>
104
- <path d="M75 75 L80 70 M80 70 L80 80 M80 70 L70 70" stroke="white" stroke-width="2" fill="none"/>
105
- <text x="100" y="110" text-anchor="middle" fill="#6b7280" font-size="10">Link Button</text>
106
- </svg>
107
- `,
108
- },
109
- '4 Images With Text': {
110
- title: '4 Images + Text',
212
+
213
+ '4 Square Images With Text': {
214
+ title: '4 Square Images With Text',
111
215
  svg: `
112
- <svg viewBox="0 0 200 150" class="w-full h-full">
113
- <rect x="15" y="15" width="35" height="25" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="3"/>
114
- <rect x="60" y="15" width="35" height="25" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="3"/>
115
- <rect x="105" y="15" width="35" height="25" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="3"/>
116
- <rect x="150" y="15" width="35" height="25" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="3"/>
117
- <rect x="15" y="45" width="35" height="4" fill="#e5e7eb" rx="2"/>
118
- <rect x="60" y="45" width="35" height="4" fill="#e5e7eb" rx="2"/>
119
- <rect x="105" y="45" width="35" height="4" fill="#e5e7eb" rx="2"/>
120
- <rect x="150" y="45" width="35" height="4" fill="#e5e7eb" rx="2"/>
121
- <text x="100" y="70" text-anchor="middle" fill="#6b7280" font-size="9">4 Images + Text</text>
216
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190.33 55.9">
217
+ <defs>
218
+ <style>
219
+ .bg { fill: #384152; }
220
+ .fg { fill: #718096; }
221
+ </style>
222
+ </defs>
223
+ <rect class="bg" width="42.55" height="42.55"/>
224
+ <rect class="bg" x="49.05" width="42.55" height="42.55"/>
225
+ <rect class="bg" x="97.35" width="42.55" height="42.55"/>
226
+ <rect class="bg" x="147.79" width="42.55" height="42.55"/>
227
+ <polygon class="fg" points="6.47 27.62 17.04 14.93 27.62 27.62"/>
228
+ <polygon class="fg" points="25.5 27.62 30.79 21.28 36.07 27.62"/>
229
+ <circle class="fg" cx="30.79" cy="16.69" r="1.76"/>
230
+ <polygon class="fg" points="55.52 27.62 66.09 14.93 76.66 27.62"/>
231
+ <polygon class="fg" points="74.55 27.62 79.83 21.28 85.12 27.62"/>
232
+ <circle class="fg" cx="79.83" cy="16.69" r="1.76"/>
233
+ <polygon class="fg" points="103.82 27.62 114.39 14.93 124.97 27.62"/>
234
+ <polygon class="fg" points="122.85 27.62 128.14 21.28 133.42 27.62"/>
235
+ <circle class="fg" cx="128.14" cy="16.69" r="1.76"/>
236
+ <polygon class="fg" points="154.26 27.62 164.83 14.93 175.4 27.62"/>
237
+ <polygon class="fg" points="173.29 27.62 178.57 21.28 183.86 27.62"/>
238
+ <circle class="fg" cx="178.57" cy="16.69" r="1.76"/>
239
+ <rect class="bg" y="47.28" width="42.55" height="2.31"/>
240
+ <rect class="bg" y="50.43" width="42.55" height="2.31"/>
241
+ <rect class="bg" y="53.59" width="42.55" height="2.31"/>
242
+ <rect class="bg" x="49.05" y="47.28" width="42.55" height="2.31"/>
243
+ <rect class="bg" x="49.05" y="50.43" width="42.55" height="2.31"/>
244
+ <rect class="bg" x="49.05" y="53.59" width="42.55" height="2.31"/>
245
+ <rect class="bg" x="97.35" y="47.28" width="42.55" height="2.31"/>
246
+ <rect class="bg" x="97.35" y="50.43" width="42.55" height="2.31"/>
247
+ <rect class="bg" x="97.35" y="53.59" width="42.55" height="2.31"/>
248
+ <rect class="bg" x="147.79" y="47.28" width="42.55" height="2.31"/>
249
+ <rect class="bg" x="147.79" y="50.43" width="42.55" height="2.31"/>
250
+ <rect class="bg" x="147.79" y="53.59" width="42.55" height="2.31"/>
122
251
  </svg>
123
252
  `,
124
253
  },
125
- '3 Images With Text': {
126
- title: '3 Images + Text',
254
+
255
+ '3 Square Images With Text': {
256
+ title: '3 Square Images With Text',
127
257
  svg: `
128
- <svg viewBox="0 0 200 150" class="w-full h-full">
129
- <rect x="25" y="20" width="40" height="30" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="4"/>
130
- <rect x="80" y="20" width="40" height="30" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="4"/>
131
- <rect x="135" y="20" width="40" height="30" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="4"/>
132
- <rect x="25" y="55" width="40" height="5" fill="#e5e7eb" rx="2"/>
133
- <rect x="80" y="55" width="40" height="5" fill="#e5e7eb" rx="2"/>
134
- <rect x="135" y="55" width="40" height="5" fill="#e5e7eb" rx="2"/>
135
- <text x="100" y="85" text-anchor="middle" fill="#6b7280" font-size="10">3 Images + Text</text>
258
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.28 70.84">
259
+ <defs>
260
+ <style>
261
+ .bg { fill: #384152; }
262
+ .fg { fill: #718096; }
263
+ </style>
264
+ </defs>
265
+ <rect class="bg" width="53.92" height="53.92"/>
266
+ <rect class="bg" x="62.15" width="53.92" height="53.92"/>
267
+ <rect class="bg" x="123.37" width="53.92" height="53.92"/>
268
+ <polygon class="fg" points="8.2 35 21.6 18.92 35 35"/>
269
+ <polygon class="fg" points="32.32 35 39.02 26.96 45.71 35"/>
270
+ <circle class="fg" cx="39.02" cy="21.15" r="2.23"/>
271
+ <polygon class="fg" points="70.36 35 83.75 18.92 97.15 35"/>
272
+ <polygon class="fg" points="94.47 35 101.17 26.96 107.87 35"/>
273
+ <circle class="fg" cx="101.17" cy="21.15" r="2.23"/>
274
+ <polygon class="fg" points="131.57 35 144.96 18.92 158.36 35"/>
275
+ <polygon class="fg" points="155.68 35 162.38 26.96 169.08 35"/>
276
+ <circle class="fg" cx="162.38" cy="21.15" r="2.23"/>
277
+ <rect class="bg" y="59.92" width="53.92" height="2.93"/>
278
+ <rect class="bg" y="63.91" width="53.92" height="2.93"/>
279
+ <rect class="bg" y="67.91" width="53.92" height="2.93"/>
280
+ <rect class="bg" x="62.15" y="59.92" width="53.92" height="2.93"/>
281
+ <rect class="bg" x="62.15" y="63.91" width="53.92" height="2.93"/>
282
+ <rect class="bg" x="62.15" y="67.91" width="53.92" height="2.93"/>
283
+ <rect class="bg" x="123.37" y="59.92" width="53.92" height="2.93"/>
284
+ <rect class="bg" x="123.37" y="63.91" width="53.92" height="2.93"/>
285
+ <rect class="bg" x="123.37" y="67.91" width="53.92" height="2.93"/>
136
286
  </svg>
137
287
  `,
138
288
  },
139
- '2 Images With Text': {
140
- title: '2 Images + Text',
289
+
290
+ '2 Square Images With Text': {
291
+ title: '2 Square Images With Text',
141
292
  svg: `
142
- <svg viewBox="0 0 200 150" class="w-full h-full">
143
- <rect x="40" y="25" width="50" height="40" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="6"/>
144
- <rect x="110" y="25" width="50" height="40" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="6"/>
145
- <rect x="40" y="75" width="50" height="6" fill="#e5e7eb" rx="3"/>
146
- <rect x="110" y="75" width="50" height="6" fill="#e5e7eb" rx="3"/>
147
- <text x="100" y="105" text-anchor="middle" fill="#6b7280" font-size="10">2 Images + Text</text>
293
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124.18 75.79">
294
+ <defs>
295
+ <style>
296
+ .bg { fill: #384152; }
297
+ .fg { fill: #718096; }
298
+ </style>
299
+ </defs>
300
+ <rect class="bg" width="57.68" height="57.68"/>
301
+ <rect class="bg" x="66.5" width="57.68" height="57.68"/>
302
+ <polygon class="fg" points="8.77 37.45 23.11 20.25 37.44 37.45"/>
303
+ <polygon class="fg" points="34.58 37.45 41.74 28.85 48.91 37.45"/>
304
+ <circle class="fg" cx="41.74" cy="22.62" r="2.39"/>
305
+ <polygon class="fg" points="75.27 37.45 89.61 20.25 103.94 37.45"/>
306
+ <polygon class="fg" points="101.07 37.45 108.24 28.85 115.41 37.45"/>
307
+ <circle class="fg" cx="108.24" cy="22.62" r="2.39"/>
308
+ <rect class="bg" y="64.1" width="57.68" height="3.13"/>
309
+ <rect class="bg" y="68.38" width="57.68" height="3.13"/>
310
+ <rect class="bg" y="72.65" width="57.68" height="3.13"/>
311
+ <rect class="bg" x="66.5" y="64.1" width="57.68" height="3.13"/>
312
+ <rect class="bg" x="66.5" y="68.38" width="57.68" height="3.13"/>
313
+ <rect class="bg" x="66.5" y="72.65" width="57.68" height="3.13"/>
148
314
  </svg>
149
315
  `,
150
316
  },
@@ -157,14 +323,14 @@ export const generateComponentPreview = (title: string): string => {
157
323
 
158
324
  // Default fallback preview
159
325
  return `
160
- <svg viewBox="0 0 200 150" class="w-full h-full">
161
- <rect x="20" y="20" width="160" height="110" fill="#f9fafb" stroke="#e5e7eb" stroke-width="2" rx="8" stroke-dasharray="5,5"/>
162
- <text x="100" y="70" text-anchor="middle" fill="#6b7280" font-size="14" font-weight="500">${title}</text>
163
- <text x="100" y="90" text-anchor="middle" fill="#9ca3af" font-size="10">Component Preview</text>
326
+ <svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
327
+ <rect fill="#384152" width="200" height="150"/>
328
+ <text x="100" y="75" text-anchor="middle" fill="#718096" font-family="Arial, sans-serif" font-size="14">Preview</text>
164
329
  </svg>
165
330
  `
166
331
  }
167
332
 
168
333
  export default {
169
334
  generateComponentPreview,
335
+ getPlaceholderImageDataUrl,
170
336
  }