@jbpark/live-editor 4.6.1 → 5.0.0

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 (81) hide show
  1. package/README.ko.md +2 -2
  2. package/README.md +2 -2
  3. package/dist/{boundary-BLB80tyw.js → boundary-6_nTsWxP.js} +2 -2
  4. package/dist/{boundary-BLB80tyw.js.map → boundary-6_nTsWxP.js.map} +1 -1
  5. package/dist/{compile-Dxas-D05.js → compile-DwOyWrmI.js} +8 -7
  6. package/dist/compile-DwOyWrmI.js.map +1 -0
  7. package/dist/constants-D-XKuEY2.js +58 -0
  8. package/dist/constants-D-XKuEY2.js.map +1 -0
  9. package/dist/{context-B8MzP7_p.js → context-DDR1xVKo.js} +3 -3
  10. package/dist/{context-B8MzP7_p.js.map → context-DDR1xVKo.js.map} +1 -1
  11. package/dist/{core-Bgfek364.js → core-CKazr4tT.js} +2 -2
  12. package/dist/core-CKazr4tT.js.map +1 -0
  13. package/dist/{detect-typescript-Dr_oLniM.js → detect-typescript-CoAO-QUJ.js} +2 -2
  14. package/dist/{detect-typescript-Dr_oLniM.js.map → detect-typescript-CoAO-QUJ.js.map} +1 -1
  15. package/dist/dnd/index.d.ts +2 -2
  16. package/dist/dnd/index.js +2 -2
  17. package/dist/{dnd-V8NAxd_R.js → dnd-BlC1gqUy.js} +2558 -867
  18. package/dist/dnd-BlC1gqUy.js.map +1 -0
  19. package/dist/document-BQhb7YR8.d.ts +17 -0
  20. package/dist/{document-CHO215iP.js → document-DcwIEHRV.js} +189 -104
  21. package/dist/document-DcwIEHRV.js.map +1 -0
  22. package/dist/editor/index.js +2 -2
  23. package/dist/{editor-CMElfHer.js → editor-Bty5XzpV.js} +2 -2
  24. package/dist/{editor-CMElfHer.js.map → editor-Bty5XzpV.js.map} +1 -1
  25. package/dist/error/index.d.ts +1 -1
  26. package/dist/error/index.js +2 -2
  27. package/dist/{error-CN_GCnXB.js → error-DyYx2NQ2.js} +17 -31
  28. package/dist/error-DyYx2NQ2.js.map +1 -0
  29. package/dist/{index-CiWB0zFb.d.ts → index-0VB5C3Jk.d.ts} +28 -50
  30. package/dist/{index-DpDU1IAw.d.ts → index-92L7F440.d.ts} +2 -2
  31. package/dist/index-C8h8TcIl.d.ts +15 -0
  32. package/dist/{index-DQkL37eL.d.ts → index-Cl79M7ZJ.d.ts} +6 -4
  33. package/dist/{index-CRwEhJ7w.d.ts → index-kKUjo9lr.d.ts} +2 -2
  34. package/dist/{index-DrWtSKXu.d.ts → index-tAiuHZsC.d.ts} +2 -2
  35. package/dist/index.d.ts +9 -9
  36. package/dist/index.js +6 -6
  37. package/dist/index.js.map +1 -1
  38. package/dist/{messages-CSrMI4Rm.js → messages-Bt5WXKTE.js} +5 -2
  39. package/dist/messages-Bt5WXKTE.js.map +1 -0
  40. package/dist/{messages-IBPs4TkZ.d.ts → messages-Yb3b7YJt.d.ts} +5 -2
  41. package/dist/preview/index.d.ts +1 -1
  42. package/dist/preview/index.js +2 -2
  43. package/dist/{preview-CtyG5UbH.js → preview-DC0pyOdu.js} +4 -4
  44. package/dist/preview-DC0pyOdu.js.map +1 -0
  45. package/dist/provider/index.d.ts +2 -2
  46. package/dist/provider/index.js +2 -2
  47. package/dist/{sections-jYuqS4KB.js → sections-4uirsXRU.js} +4 -7
  48. package/dist/sections-4uirsXRU.js.map +1 -0
  49. package/dist/style.css +776 -346
  50. package/dist/{validate-DB59Z_Nx.d.ts → types-Czps1Txy.d.ts} +12 -28
  51. package/dist/update-2PJbwoS8.d.ts +68 -0
  52. package/dist/{items-BXXtMUNI.js → update-DNInQSM7.js} +143 -392
  53. package/dist/update-DNInQSM7.js.map +1 -0
  54. package/dist/{use-dynamic-tailwind-BP1toJkW.js → use-dynamic-tailwind-CSYKXDmX.js} +301 -273
  55. package/dist/use-dynamic-tailwind-CSYKXDmX.js.map +1 -0
  56. package/dist/utils/ast/index.d.ts +47 -4
  57. package/dist/utils/ast/index.js +4 -64
  58. package/dist/utils/ast/index.js.map +1 -1
  59. package/dist/utils/index.d.ts +13 -32
  60. package/dist/utils/index.js +4 -26
  61. package/dist/validate-CZz30Pnb.js +122 -0
  62. package/dist/validate-CZz30Pnb.js.map +1 -0
  63. package/dist/validate-CiA1LF6S.d.ts +33 -0
  64. package/package.json +9 -9
  65. package/dist/compile-Dxas-D05.js.map +0 -1
  66. package/dist/constants-DU17Tdwo.js +0 -1459
  67. package/dist/constants-DU17Tdwo.js.map +0 -1
  68. package/dist/core-Bgfek364.js.map +0 -1
  69. package/dist/dnd-V8NAxd_R.js.map +0 -1
  70. package/dist/document-CHO215iP.js.map +0 -1
  71. package/dist/document-DqRSCtsx.d.ts +0 -1614
  72. package/dist/error-CN_GCnXB.js.map +0 -1
  73. package/dist/index-C_PfR4X9.d.ts +0 -734
  74. package/dist/items-BXXtMUNI.js.map +0 -1
  75. package/dist/messages-CSrMI4Rm.js.map +0 -1
  76. package/dist/preview-CtyG5UbH.js.map +0 -1
  77. package/dist/sections-jYuqS4KB.js.map +0 -1
  78. package/dist/use-dynamic-tailwind-BP1toJkW.js.map +0 -1
  79. package/dist/utils/index.js.map +0 -1
  80. package/dist/validate-iLo8IONY.js +0 -64
  81. package/dist/validate-iLo8IONY.js.map +0 -1
package/dist/constants-DU17Tdwo.js DELETED
@@ -1,1459 +0,0 @@
1
- //#region src/constants/index.ts
2
- const CONFIG = {
3
- CACHE_LIMIT: 50,
4
- DOCUMENT_CACHE_LIMIT: 4,
5
- SCRIPT_CACHE_LIMIT: 10
6
- };
7
- const DATA_ATTR = {
8
- ID: "data-id",
9
- BINDING: "data-binding",
10
- BINDING_KEY: "data-binding-key",
11
- ITEM: "data-item"
12
- };
13
- const RESERVED_BINDING_PROPERTIES = [
14
- DATA_ATTR.ID,
15
- "data-name",
16
- DATA_ATTR.BINDING,
17
- DATA_ATTR.BINDING_KEY
18
- ];
19
- const REGEX = {
20
- NUMBER: /^\d+(\.\d+)?$/,
21
- BOOLEAN_OR_NULL: /^(true|false|null|undefined)$/,
22
- MODULE_IMPORT_EXPORT_LINE: /^\s*(?:import|export)\b[^\n]*\bfrom\s+['"][^'"]*['"];?\s*$/gm
23
- };
24
- const TS_PATTERNS = [
25
- /interface\s+\w+/,
26
- /type\s+\w+\s*=/,
27
- /:\s*\w+(\[\])?(\s*\||\s*&|\s*=|\s*;|\s*,|\s*\))/,
28
- /as\s+\w+/,
29
- /<[A-Z]\w*>/,
30
- /enum\s+\w+/,
31
- /public\s+|private\s+|protected\s+/,
32
- /readonly\s+/,
33
- /\?\s*:/
34
- ];
35
- const BINDING_PROP = {
36
- CHILDREN: "children",
37
- INNER_TEXT: "innerText",
38
- INNER_HTML: "innerHTML",
39
- ITEMS: "items"
40
- };
41
- const DEFAULT_CONTAINER_ID = "app-container";
42
- const documentTemplate = (containerId) => `
43
- import * as ui from 'ui-kit';
44
- import { cn } from 'ui-kit/utils';
45
-
46
- const App = () => {
47
- return (
48
- <main id="${containerId}"></main>
49
- )
50
- }
51
-
52
- export default App;
53
- `;
54
- const DEFAULT_TEMPLATE = documentTemplate(DEFAULT_CONTAINER_ID);
55
- const PALETTE_SECTIONS = [
56
- {
57
- id: "hero",
58
- name: "Hero",
59
- code: `
60
- <section
61
- data-name="Hero"
62
- className={cn(
63
- 'text-center text-white',
64
- //
65
- )}
66
- >
67
- <ui.Space
68
- data-id=""
69
- data-binding={[
70
- {
71
- label: 'Background Style',
72
- property: 'style',
73
- type: 'object',
74
- // Types the keys inside the object value; a leaf takes the same
75
- // fields as a top-level binding.
76
- render: {
77
- backgroundColor: { type: 'color', label: 'Background Color' },
78
- },
79
- // Not a library field, so it arrives as meta.group.
80
- group: 'layout',
81
- },
82
- {
83
- label: 'Content Spacing',
84
- property: 'size',
85
- type: 'number',
86
- // Constraints the library validates with or without a widget.
87
- min: 0,
88
- max: 40,
89
- // Presentation only: the built-in panel ignores it and shows a
90
- // number input; a custom panel can switch on widget.type.
91
- widget: { type: 'slider', step: 4, unit: 'px' },
92
- group: 'layout',
93
- },
94
- ]}
95
- style={{
96
- backgroundColor: '#6366f1',
97
- }}
98
- orientation="vertical"
99
- size={16}
100
- align="center"
101
- className={cn(
102
- 'px-5 py-15',
103
- //
104
- )}
105
- >
106
- <h1
107
- data-id=""
108
- data-binding={[
109
- {
110
- label: 'Title',
111
- property: 'innerText',
112
- type: 'string',
113
- required: true,
114
- },
115
- ]}
116
- className={cn(
117
- 'text-5xl font-bold',
118
- //
119
- )}
120
- >
121
- Welcome to Live Editor
122
- </h1>
123
- <p
124
- data-id=""
125
- data-binding={[
126
- {
127
- label: 'Description',
128
- type: 'richtext',
129
- },
130
- ]}
131
- className={cn(
132
- 'text-xl',
133
- //
134
- )}
135
- >
136
- Build <strong>dynamic components</strong> with drag & drop
137
- </p>
138
- <ui.Button
139
- data-id=""
140
- data-binding={[
141
- {
142
- label: 'Button Text',
143
- property: 'innerText',
144
- },
145
- {
146
- label: 'Button Icon',
147
- property: 'icon',
148
- type: 'jsx',
149
- },
150
- {
151
- label: 'Button Size',
152
- property: 'size',
153
- options: [
154
- { label: 'Small', value: 'small' },
155
- { label: 'Middle', value: 'middle' },
156
- { label: 'Large', value: 'large' },
157
- ],
158
- },
159
- {
160
- label: 'Button Variant',
161
- property: 'variant',
162
- options: [
163
- { label: 'Solid', value: 'solid' },
164
- { label: 'Outlined', value: 'outlined' },
165
- { label: 'Filled', value: 'filled' },
166
- ],
167
- },
168
- ]}
169
- icon={<span>🚀</span>}
170
- size="large"
171
- variant="solid"
172
- className={cn(
173
- 'bg-white text-indigo-500',
174
- 'hover:bg-gray-50',
175
- //
176
- )}
177
- >
178
- Get Started
179
- </ui.Button>
180
- </ui.Space>
181
- </section>
182
- `
183
- },
184
- {
185
- id: "features",
186
- name: "Features",
187
- code: `
188
- <section
189
- data-name="Features"
190
- className={cn(
191
- 'px-5 py-10',
192
- //
193
- )}
194
- >
195
- <ui.Space
196
- data-id=""
197
- data-binding={[
198
- {
199
- label: 'Feature Cards',
200
- property: 'children',
201
- },
202
- ]}
203
- className={cn(
204
- 'mx-auto max-w-7xl',
205
- //
206
- )}
207
- size="large"
208
- wrap
209
- >
210
- <ui.Card
211
- className={cn(
212
- 'min-w-70 flex-1 text-center',
213
- //
214
- )}
215
- >
216
- <ui.Space orientation="vertical" size="middle" align="center">
217
- <div
218
- data-id=""
219
- data-binding={[
220
- {
221
- label: 'Icon',
222
- property: 'innerText',
223
- },
224
- ]}
225
- className={cn(
226
- 'text-5xl',
227
- //
228
- )}
229
- >
230
- 🚀
231
- </div>
232
- <h3
233
- data-id=""
234
- data-binding={[
235
- {
236
- label: 'Title',
237
- property: 'innerText',
238
- },
239
- ]}
240
- className={cn(
241
- 'text-2xl text-gray-800',
242
- //
243
- )}
244
- >
245
- Feature 1
246
- </h3>
247
- <p
248
- data-id=""
249
- data-binding={[
250
- {
251
- label: 'Description',
252
- property: 'innerText',
253
- },
254
- ]}
255
- className={cn(
256
- 'text-gray-600',
257
- //
258
- )}
259
- >
260
- Amazing feature description
261
- </p>
262
- </ui.Space>
263
- </ui.Card>
264
- <ui.Card
265
- className={cn(
266
- 'min-w-70 flex-1 text-center',
267
- //
268
- )}
269
- >
270
- <ui.Space orientation="vertical" size="middle" align="center">
271
- <div
272
- data-id=""
273
- data-binding={[
274
- {
275
- label: 'Icon',
276
- property: 'innerText',
277
- },
278
- ]}
279
- className={cn(
280
- 'text-5xl',
281
- //
282
- )}
283
- >
284
- ⚡
285
- </div>
286
- <h3
287
- data-id=""
288
- data-binding={[
289
- {
290
- label: 'Title',
291
- property: 'innerText',
292
- },
293
- ]}
294
- className={cn(
295
- 'text-2xl text-gray-800',
296
- //
297
- )}
298
- >
299
- Feature 2
300
- </h3>
301
- <p
302
- data-id=""
303
- data-binding={[
304
- {
305
- label: 'Description',
306
- property: 'innerText',
307
- },
308
- ]}
309
- className={cn(
310
- 'text-gray-600',
311
- //
312
- )}
313
- >
314
- Another great feature
315
- </p>
316
- </ui.Space>
317
- </ui.Card>
318
- <ui.Card
319
- className={cn(
320
- 'min-w-70 flex-1 text-center',
321
- //
322
- )}
323
- >
324
- <ui.Space orientation="vertical" size="middle" align="center">
325
- <div
326
- data-id=""
327
- data-binding={[
328
- {
329
- label: 'Icon',
330
- property: 'innerText',
331
- },
332
- ]}
333
- className={cn(
334
- 'text-5xl',
335
- //
336
- )}
337
- >
338
- ✨
339
- </div>
340
- <h3
341
- data-id=""
342
- data-binding={[
343
- {
344
- label: 'Title',
345
- property: 'innerText',
346
- },
347
- ]}
348
- className={cn(
349
- 'text-2xl text-gray-800',
350
- //
351
- )}
352
- >
353
- Feature 3
354
- </h3>
355
- <p
356
- data-id=""
357
- data-binding={[
358
- {
359
- label: 'Description',
360
- property: 'innerText',
361
- },
362
- ]}
363
- className={cn(
364
- 'text-gray-600',
365
- //
366
- )}
367
- >
368
- One more awesome thing
369
- </p>
370
- </ui.Space>
371
- </ui.Card>
372
- </ui.Space>
373
- </section>
374
- `
375
- },
376
- {
377
- id: "about",
378
- name: "About",
379
- code: `
380
- <section
381
- data-name="About"
382
- className={cn(
383
- 'mx-auto max-w-3xl px-5 py-10',
384
- //
385
- )}
386
- >
387
- <ui.Typography.Title
388
- data-id=""
389
- data-binding={[{ label: 'Title', property: 'innerText' }]}
390
- level={2}
391
- className={cn(
392
- 'mb-5 text-4xl text-gray-800',
393
- //
394
- )}
395
- >
396
- About Live Editor
397
- </ui.Typography.Title>
398
- <ui.Typography.Paragraph
399
- data-id=""
400
- data-binding={[
401
- {
402
- label: 'Description 1',
403
- type: 'richtext',
404
- },
405
- ]}
406
- className={cn(
407
- 'mb-4 text-lg leading-relaxed text-gray-600',
408
- //
409
- )}
410
- >
411
- Live Editor is a powerful visual development tool that enables you to
412
- create stunning web interfaces through an intuitive drag-and-drop
413
- experience. Built with modern web technologies, it streamlines your
414
- workflow and accelerates development cycles.
415
- </ui.Typography.Paragraph>
416
- <ui.Typography.Paragraph
417
- data-id=""
418
- data-binding={[
419
- {
420
- label: 'Description 2',
421
- type: 'richtext',
422
- },
423
- ]}
424
- className={cn(
425
- 'text-lg leading-relaxed text-gray-600',
426
- //
427
- )}
428
- >
429
- Whether you&apos;re a seasoned developer or just starting out, Live
430
- Editor provides the flexibility and control you need to bring your
431
- creative vision to life. Focus on what matters most - building great
432
- products.
433
- </ui.Typography.Paragraph>
434
- </section>
435
- `
436
- },
437
- {
438
- id: "cta",
439
- name: "CTA",
440
- code: `
441
- <section
442
- data-name="CTA"
443
- className={cn(
444
- 'bg-gray-50 px-5 py-12 text-center',
445
- //
446
- )}
447
- >
448
- <div
449
- className={cn(
450
- 'mx-auto max-w-xl',
451
- //
452
- )}
453
- >
454
- <ui.Typography.Title
455
- data-id=""
456
- data-binding={[{ label: 'Title', property: 'innerText' }]}
457
- level={2}
458
- className={cn(
459
- 'mb-4 text-3xl text-gray-800',
460
- //
461
- )}
462
- >
463
- Ready to get started?
464
- </ui.Typography.Title>
465
- <ui.Typography.Paragraph
466
- data-id=""
467
- data-binding={[
468
- {
469
- label: 'Description',
470
- property: 'innerText',
471
- },
472
- ]}
473
- className={cn(
474
- 'mb-6 text-lg text-gray-600',
475
- //
476
- )}
477
- >
478
- Start exploring what Live Editor can do for your projects
479
- </ui.Typography.Paragraph>
480
- <ui.Space
481
- data-id=""
482
- data-binding={[{ label: 'Buttons', property: 'children' }]}
483
- className={cn(
484
- 'flex flex-wrap justify-center gap-4',
485
- //
486
- )}
487
- >
488
- <ui.Button
489
- data-id=""
490
- data-binding={[
491
- {
492
- label: 'Button 1 Text',
493
- property: 'innerText',
494
- },
495
- ]}
496
- size="large"
497
- className={cn(
498
- 'bg-indigo-500 px-8 text-base text-white',
499
- 'hover:bg-indigo-600',
500
- //
501
- )}
502
- >
503
- View Documentation
504
- </ui.Button>
505
- <ui.Button
506
- data-id=""
507
- data-binding={[
508
- {
509
- label: 'Button 2 Text',
510
- property: 'innerText',
511
- },
512
- ]}
513
- variant="outlined"
514
- size="large"
515
- className={cn(
516
- 'border-2 border-indigo-500 px-8 text-base text-indigo-500',
517
- 'hover:bg-indigo-50',
518
- //
519
- )}
520
- >
521
- View Examples
522
- </ui.Button>
523
- </ui.Space>
524
- </div>
525
- </section>
526
- `
527
- },
528
- {
529
- id: "getting-started",
530
- name: "Getting Started",
531
- code: `
532
- <section
533
- data-name="Getting Started"
534
- className={cn(
535
- 'px-5 py-16',
536
- //
537
- )}
538
- >
539
- <div
540
- className={cn(
541
- 'mx-auto max-w-5xl',
542
- //
543
- )}
544
- >
545
- <ui.Typography.Title
546
- data-id=""
547
- data-binding={[{ label: 'Title', property: 'innerText' }]}
548
- level={2}
549
- className={cn(
550
- 'mb-12 text-center text-4xl font-bold text-gray-800',
551
- //
552
- )}
553
- >
554
- How to Get Started
555
- </ui.Typography.Title>
556
- <div
557
- className={cn(
558
- 'grid gap-8 md:grid-cols-3',
559
- //
560
- )}
561
- >
562
- <ui.Card
563
- data-id=""
564
- data-binding={[
565
- {
566
- label: 'Card 1 Content',
567
- property: 'children',
568
- },
569
- ]}
570
- className={cn(
571
- 'rounded-lg border-2 border-gray-200 bg-white p-8',
572
- //
573
- )}
574
- >
575
- <ui.Typography.Title
576
- data-id=""
577
- data-binding={[
578
- {
579
- label: 'Card 1 Title',
580
- property: 'innerText',
581
- },
582
- ]}
583
- level={3}
584
- className={cn(
585
- 'mb-2 text-2xl font-bold text-gray-800',
586
- //
587
- )}
588
- >
589
- Explore
590
- </ui.Typography.Title>
591
- <ui.Typography.Paragraph
592
- data-id=""
593
- data-binding={[
594
- {
595
- label: 'Card 1 Icon',
596
- property: 'innerText',
597
- },
598
- ]}
599
- className={cn(
600
- 'mb-6 text-4xl font-bold text-indigo-600',
601
- //
602
- )}
603
- >
604
- 📚
605
- </ui.Typography.Paragraph>
606
- <ul
607
- className={cn(
608
- 'mb-8 space-y-3 text-gray-600',
609
- //
610
- )}
611
- >
612
- <li>✓ Read documentation</li>
613
- <li>✓ Browse examples</li>
614
- <li>✓ Try the demo</li>
615
- </ul>
616
- <ui.Button
617
- data-id=""
618
- data-binding={[
619
- {
620
- label: 'Card 1 Button',
621
- property: 'innerText',
622
- },
623
- ]}
624
- variant="outlined"
625
- size="large"
626
- block
627
- className={cn(
628
- 'border-2 border-indigo-500 text-indigo-500',
629
- 'hover:bg-indigo-50',
630
- //
631
- )}
632
- >
633
- View Docs
634
- </ui.Button>
635
- </ui.Card>
636
- <ui.Card
637
- data-id=""
638
- data-binding={[
639
- {
640
- label: 'Card 2 Content',
641
- property: 'children',
642
- },
643
- ]}
644
- className={cn(
645
- 'relative rounded-lg border-2 border-indigo-500 bg-white p-8',
646
- //
647
- )}
648
- >
649
- <div
650
- className={cn(
651
- 'absolute -top-4 left-1/2 -translate-x-1/2',
652
- 'rounded-full bg-indigo-500 px-4 py-1 text-sm text-white',
653
- //
654
- )}
655
- >
656
- Recommended
657
- </div>
658
- <ui.Typography.Title
659
- data-id=""
660
- data-binding={[
661
- {
662
- label: 'Card 2 Title',
663
- property: 'innerText',
664
- },
665
- ]}
666
- level={3}
667
- className={cn(
668
- 'mb-2 text-2xl font-bold text-gray-800',
669
- //
670
- )}
671
- >
672
- Practice
673
- </ui.Typography.Title>
674
- <ui.Typography.Paragraph
675
- data-id=""
676
- data-binding={[
677
- {
678
- label: 'Card 2 Icon',
679
- property: 'innerText',
680
- },
681
- ]}
682
- className={cn(
683
- 'mb-6 text-4xl font-bold text-indigo-600',
684
- //
685
- )}
686
- >
687
- 💻
688
- </ui.Typography.Paragraph>
689
- <ul
690
- className={cn(
691
- 'mb-8 space-y-3 text-gray-600',
692
- //
693
- )}
694
- >
695
- <li>✓ Interactive playground</li>
696
- <li>✓ Experiment freely</li>
697
- <li>✓ Build your own</li>
698
- </ul>
699
- <ui.Button
700
- data-id=""
701
- data-binding={[
702
- {
703
- label: 'Card 2 Button',
704
- property: 'innerText',
705
- },
706
- ]}
707
- size="large"
708
- block
709
- className={cn(
710
- 'bg-indigo-500 text-white',
711
- 'hover:bg-indigo-600',
712
- //
713
- )}
714
- >
715
- Start Building
716
- </ui.Button>
717
- </ui.Card>
718
- <ui.Card
719
- data-id=""
720
- data-binding={[
721
- {
722
- label: 'Card 3 Content',
723
- property: 'children',
724
- },
725
- ]}
726
- className={cn(
727
- 'rounded-lg border-2 border-gray-200 bg-white p-8',
728
- //
729
- )}
730
- >
731
- <ui.Typography.Title
732
- data-id=""
733
- data-binding={[
734
- {
735
- label: 'Card 3 Title',
736
- property: 'innerText',
737
- },
738
- ]}
739
- level={3}
740
- className={cn(
741
- 'mb-2 text-2xl font-bold text-gray-800',
742
- //
743
- )}
744
- >
745
- Contribute
746
- </ui.Typography.Title>
747
- <ui.Typography.Paragraph
748
- data-id=""
749
- data-binding={[
750
- {
751
- label: 'Card 3 Icon',
752
- property: 'innerText',
753
- },
754
- ]}
755
- className={cn(
756
- 'mb-6 text-4xl font-bold text-indigo-600',
757
- //
758
- )}
759
- >
760
- 🤝
761
- </ui.Typography.Paragraph>
762
- <ul
763
- className={cn(
764
- 'mb-8 space-y-3 text-gray-600',
765
- //
766
- )}
767
- >
768
- <li>✓ Report issues</li>
769
- <li>✓ Suggest features</li>
770
- <li>✓ Submit pull requests</li>
771
- </ul>
772
- <ui.Button
773
- data-id=""
774
- data-binding={[
775
- {
776
- label: 'Card 3 Button',
777
- property: 'innerText',
778
- },
779
- ]}
780
- variant="outlined"
781
- size="large"
782
- block
783
- className={cn(
784
- 'border-2 border-indigo-500 text-indigo-500',
785
- 'hover:bg-indigo-50',
786
- //
787
- )}
788
- >
789
- View on GitHub
790
- </ui.Button>
791
- </ui.Card>
792
- </div>
793
- </div>
794
- </section>
795
- `
796
- },
797
- {
798
- id: "key-features",
799
- name: "Key Features",
800
- code: `
801
- <section
802
- data-name="Key Features"
803
- className={cn(
804
- 'bg-indigo-50 px-5 py-16',
805
- //
806
- )}
807
- >
808
- <div
809
- className={cn(
810
- 'mx-auto max-w-6xl',
811
- //
812
- )}
813
- >
814
- <h2
815
- data-id=""
816
- data-binding={[{ label: 'Title', property: 'innerText' }]}
817
- className={cn(
818
- 'mb-12 text-center text-4xl font-bold text-gray-800',
819
- //
820
- )}
821
- >
822
- Key Features
823
- </h2>
824
- <div
825
- className={cn(
826
- 'grid gap-8 md:grid-cols-2',
827
- //
828
- )}
829
- >
830
- <div
831
- className={cn(
832
- 'rounded-lg bg-white p-8 shadow-md',
833
- //
834
- )}
835
- >
836
- <div
837
- className={cn(
838
- 'mb-4 text-4xl',
839
- //
840
- )}
841
- >
842
- 🎨
843
- </div>
844
- <h3
845
- className={cn(
846
- 'mb-4 text-2xl font-bold text-gray-800',
847
- //
848
- )}
849
- >
850
- Visual Editing
851
- </h3>
852
- <p
853
- className={cn(
854
- 'text-gray-600',
855
- //
856
- )}
857
- >
858
- See your changes in real-time as you build. Live Editor provides
859
- instant visual feedback, making it easier to understand how code
860
- affects your interface.
861
- </p>
862
- </div>
863
- <div
864
- className={cn(
865
- 'rounded-lg bg-white p-8 shadow-md',
866
- //
867
- )}
868
- >
869
- <div
870
- className={cn(
871
- 'mb-4 text-4xl',
872
- //
873
- )}
874
- >
875
- 🧩
876
- </div>
877
- <h3
878
- className={cn(
879
- 'mb-4 text-2xl font-bold text-gray-800',
880
- //
881
- )}
882
- >
883
- Component-Based
884
- </h3>
885
- <p
886
- className={cn(
887
- 'text-gray-600',
888
- //
889
- )}
890
- >
891
- Build with reusable components that you can drag, drop, and
892
- customize. Learn modern development patterns while creating your
893
- interface.
894
- </p>
895
- </div>
896
- </div>
897
- </div>
898
- </section>
899
- `
900
- },
901
- {
902
- id: "stats",
903
- name: "Stats",
904
- code: `
905
- <section
906
- data-name="Stats"
907
- className={cn(
908
- 'bg-indigo-600 text-white',
909
- //
910
- )}
911
- >
912
- <ui.Marquees
913
- data-id=""
914
- data-binding={[
915
- { label: 'Stats Items', property: 'items' },
916
- {
917
- label: 'Scroll Speed',
918
- property: 'speed',
919
- type: 'number',
920
- min: 20,
921
- max: 300,
922
- // The bare-string form; it arrives as { type: 'slider' }.
923
- widget: 'slider',
924
- },
925
- { label: 'Pause On Hover', property: 'pauseOnHover', type: 'boolean' },
926
- ]}
927
- speed={100}
928
- pauseOnHover={true}
929
- autoFill={true}
930
- className="px-5 py-16"
931
- items={[
932
- {
933
- key: 'stats-row',
934
- children: (
935
- <div
936
- data-id=""
937
- data-binding={[
938
- {
939
- label: 'Stats Cards',
940
- property: 'children',
941
- },
942
- ]}
943
- className={cn('flex gap-20')}
944
- >
945
- <div
946
- className={cn(
947
- 'min-w-60 text-center',
948
- //
949
- )}
950
- >
951
- <p
952
- data-id=""
953
- data-binding={[
954
- {
955
- label: 'Title',
956
- property: 'innerText',
957
- },
958
- ]}
959
- className={cn(
960
- 'mb-2 text-5xl font-bold',
961
- //
962
- )}
963
- >
964
- Open
965
- </p>
966
- <p
967
- data-id=""
968
- data-binding={[
969
- {
970
- label: 'Description',
971
- property: 'innerText',
972
- },
973
- ]}
974
- className={cn(
975
- 'text-indigo-200',
976
- //
977
- )}
978
- >
979
- Source Project
980
- </p>
981
- </div>
982
- <div
983
- className={cn(
984
- 'min-w-60 text-center',
985
- //
986
- )}
987
- >
988
- <p
989
- data-id=""
990
- data-binding={[
991
- {
992
- label: 'Title',
993
- property: 'innerText',
994
- },
995
- ]}
996
- className={cn(
997
- 'mb-2 text-5xl font-bold',
998
- //
999
- )}
1000
- >
1001
- Free
1002
- </p>
1003
- <p
1004
- data-id=""
1005
- data-binding={[
1006
- {
1007
- label: 'Description',
1008
- property: 'innerText',
1009
- },
1010
- ]}
1011
- className={cn(
1012
- 'text-indigo-200',
1013
- //
1014
- )}
1015
- >
1016
- For Everyone
1017
- </p>
1018
- </div>
1019
- <div
1020
- className={cn(
1021
- 'min-w-60 text-center',
1022
- //
1023
- )}
1024
- >
1025
- <p
1026
- data-id=""
1027
- data-binding={[
1028
- {
1029
- label: 'Title',
1030
- property: 'innerText',
1031
- },
1032
- ]}
1033
- className={cn(
1034
- 'mb-2 text-5xl font-bold',
1035
- //
1036
- )}
1037
- >
1038
- Active
1039
- </p>
1040
- <p
1041
- data-id=""
1042
- data-binding={[
1043
- {
1044
- label: 'Description',
1045
- property: 'innerText',
1046
- },
1047
- ]}
1048
- className={cn(
1049
- 'text-indigo-200',
1050
- //
1051
- )}
1052
- >
1053
- Community
1054
- </p>
1055
- </div>
1056
- <div
1057
- className={cn(
1058
- 'min-w-60 text-center',
1059
- //
1060
- )}
1061
- >
1062
- <p
1063
- data-id=""
1064
- data-binding={[
1065
- {
1066
- label: 'Title',
1067
- property: 'innerText',
1068
- },
1069
- ]}
1070
- className={cn(
1071
- 'mb-2 text-5xl font-bold',
1072
- //
1073
- )}
1074
- >
1075
- Learn
1076
- </p>
1077
- <p
1078
- data-id=""
1079
- data-binding={[
1080
- {
1081
- label: 'Description',
1082
- property: 'innerText',
1083
- },
1084
- ]}
1085
- className={cn(
1086
- 'text-indigo-200',
1087
- //
1088
- )}
1089
- >
1090
- By Doing
1091
- </p>
1092
- </div>
1093
- </div>
1094
- ),
1095
- },
1096
- ]}
1097
- />
1098
- </section>
1099
- `
1100
- },
1101
- {
1102
- id: "roadmap",
1103
- name: "Roadmap",
1104
- code: `
1105
- <section
1106
- data-name="Roadmap"
1107
- className={cn(
1108
- 'px-5 py-16',
1109
- //
1110
- )}
1111
- >
1112
- <div
1113
- className={cn(
1114
- 'mx-auto max-w-3xl',
1115
- //
1116
- )}
1117
- >
1118
- <h2
1119
- data-id=""
1120
- data-binding={[
1121
- { label: 'Title', property: 'innerText', required: true },
1122
- ]}
1123
- className={cn(
1124
- 'mb-8 text-center text-4xl font-bold text-gray-800',
1125
- //
1126
- )}
1127
- >
1128
- Roadmap
1129
- </h2>
1130
- <ui.List
1131
- data-id=""
1132
- data-binding={[
1133
- {
1134
- label: 'Milestones',
1135
- property: 'data',
1136
- type: 'array',
1137
- // One leaf per item key. Each leaf takes the same fields as a
1138
- // top-level binding, and label falls back to the key.
1139
- render: {
1140
- title: {
1141
- type: 'string',
1142
- label: 'Title',
1143
- required: true,
1144
- },
1145
- date: { type: 'date', label: 'Release Date', required: true },
1146
- status: {
1147
- type: 'string',
1148
- label: 'Status',
1149
- options: [
1150
- { label: 'Planned', value: 'planned' },
1151
- { label: 'In Progress', value: 'in-progress' },
1152
- { label: 'Shipped', value: 'shipped' },
1153
- ],
1154
- },
1155
- progress: {
1156
- type: 'number',
1157
- label: 'Progress',
1158
- min: 0,
1159
- max: 100,
1160
- widget: { type: 'slider', step: 10, unit: '%' },
1161
- },
1162
- color: { type: 'color', label: 'Accent Color' },
1163
- highlight: { type: 'boolean', label: 'Highlight' },
1164
- // An object-valued key: its own render map types the keys
1165
- // inside it, one level further down.
1166
- link: {
1167
- type: 'object',
1168
- label: 'Link',
1169
- render: {
1170
- text: { type: 'string', label: 'Link Text' },
1171
- href: {
1172
- type: 'url',
1173
- label: 'Link URL',
1174
- pattern: '^https://',
1175
- // Not a library field, so it arrives as meta.hint.
1176
- hint: 'Must use https',
1177
- },
1178
- },
1179
- },
1180
- },
1181
- },
1182
- ]}
1183
- data={[
1184
- {
1185
- title: 'Visual editing',
1186
- date: '2026-03-02',
1187
- status: 'shipped',
1188
- progress: 100,
1189
- color: '#22c55e',
1190
- highlight: false,
1191
- link: { text: 'Release notes', href: 'https://github.com' },
1192
- },
1193
- {
1194
- title: 'Custom panels',
1195
- date: '2026-09-26',
1196
- status: 'in-progress',
1197
- progress: 60,
1198
- color: '#6366f1',
1199
- highlight: true,
1200
- link: { text: 'Guide', href: 'https://github.com' },
1201
- },
1202
- {
1203
- title: 'Collaboration',
1204
- date: '2027-01-15',
1205
- status: 'planned',
1206
- progress: 0,
1207
- color: '#f59e0b',
1208
- highlight: false,
1209
- link: { text: 'Discussion', href: 'https://github.com' },
1210
- },
1211
- ]}
1212
- itemKey={item => item.title}
1213
- renderItem={item => (
1214
- <div
1215
- className={cn(
1216
- 'flex items-center gap-4 border-b border-gray-100 py-4',
1217
- item.highlight && 'rounded-lg bg-indigo-50 px-4',
1218
- )}
1219
- >
1220
- <span
1221
- className="size-3 shrink-0 rounded-full"
1222
- style={{ backgroundColor: item.color }}
1223
- />
1224
- <div className="min-w-0 flex-1">
1225
- <p className="font-semibold text-gray-800">{item.title}</p>
1226
- <p className="text-sm text-gray-500">
1227
- {item.date} · {item.status}
1228
- </p>
1229
- <ui.Progress value={item.progress} className="mt-2" />
1230
- </div>
1231
- <a
1232
- href={item.link.href}
1233
- className="text-sm text-indigo-500 hover:underline"
1234
- >
1235
- {item.link.text}
1236
- </a>
1237
- </div>
1238
- )}
1239
- />
1240
- <p
1241
- className={cn(
1242
- 'mt-6 text-center text-sm text-gray-500',
1243
- //
1244
- )}
1245
- >
1246
- Last updated{' '}
1247
- <time
1248
- data-id=""
1249
- data-binding={[
1250
- {
1251
- label: 'Updated On',
1252
- property: 'dateTime',
1253
- type: 'date',
1254
- required: true,
1255
- },
1256
- { label: 'Updated Text', property: 'innerText' },
1257
- ]}
1258
- dateTime="2026-09-26"
1259
- >
1260
- September 26, 2026
1261
- </time>
1262
- {' · '}
1263
- <a
1264
- data-id=""
1265
- data-binding={[
1266
- { label: 'Link Text', property: 'innerText' },
1267
- {
1268
- label: 'Link URL',
1269
- property: 'href',
1270
- type: 'url',
1271
- required: true,
1272
- pattern: '^https://',
1273
- },
1274
- ]}
1275
- href="https://github.com/pjb0811/live-editor/releases"
1276
- className="text-indigo-500 hover:underline"
1277
- >
1278
- All releases
1279
- </a>
1280
- </p>
1281
- </div>
1282
- </section>
1283
- `
1284
- },
1285
- {
1286
- id: "faq",
1287
- name: "FAQ",
1288
- code: `
1289
- <section
1290
- data-name="FAQ"
1291
- className={cn(
1292
- 'px-5 py-16',
1293
- //
1294
- )}
1295
- >
1296
- <div
1297
- className={cn(
1298
- 'mx-auto max-w-3xl',
1299
- //
1300
- )}
1301
- >
1302
- <ui.Typography.Title
1303
- data-id=""
1304
- data-binding={[{ label: 'Title', property: 'innerText' }]}
1305
- level={2}
1306
- className={cn(
1307
- 'mb-12 text-center text-4xl font-bold text-gray-800',
1308
- //
1309
- )}
1310
- >
1311
- Frequently Asked Questions
1312
- </ui.Typography.Title>
1313
- <ui.Collapse
1314
- data-id=""
1315
- data-binding={[{ label: 'FAQ Items', property: 'items' }]}
1316
- items={[
1317
- {
1318
- key: '1',
1319
- label: (
1320
- <ui.Typography.Text
1321
- data-id=""
1322
- data-binding={[
1323
- {
1324
- label: 'Question 1',
1325
- property: 'innerText',
1326
- },
1327
- ]}
1328
- className={cn('text-lg font-semibold text-gray-800')}
1329
- >
1330
- What is Live Editor?
1331
- </ui.Typography.Text>
1332
- ),
1333
- children: (
1334
- <ui.Typography.Paragraph
1335
- data-id=""
1336
- data-binding={[
1337
- {
1338
- label: 'Answer 1',
1339
- type: 'richtext',
1340
- },
1341
- ]}
1342
- className={cn('text-gray-600')}
1343
- >
1344
- Live Editor is an open-source tool for building web
1345
- interfaces visually. It helps you learn web development by
1346
- providing instant feedback as you build components.
1347
- </ui.Typography.Paragraph>
1348
- ),
1349
- },
1350
- {
1351
- key: '2',
1352
- label: (
1353
- <ui.Typography.Text
1354
- data-id=""
1355
- data-binding={[
1356
- {
1357
- label: 'Question 2',
1358
- property: 'innerText',
1359
- },
1360
- ]}
1361
- className={cn('text-lg font-semibold text-gray-800')}
1362
- >
1363
- Do I need coding experience?
1364
- </ui.Typography.Text>
1365
- ),
1366
- children: (
1367
- <ui.Typography.Paragraph
1368
- data-id=""
1369
- data-binding={[
1370
- {
1371
- label: 'Answer 2',
1372
- type: 'richtext',
1373
- },
1374
- ]}
1375
- className={cn('text-gray-600')}
1376
- >
1377
- No! Live Editor is designed for all skill levels. Beginners
1378
- can learn through visual editing, while experienced
1379
- developers can work directly with code.
1380
- </ui.Typography.Paragraph>
1381
- ),
1382
- },
1383
- {
1384
- key: '3',
1385
- label: (
1386
- <ui.Typography.Text
1387
- data-id=""
1388
- data-binding={[
1389
- {
1390
- label: 'Question 3',
1391
- property: 'innerText',
1392
- },
1393
- ]}
1394
- className={cn('text-lg font-semibold text-gray-800')}
1395
- >
1396
- Is it really free?
1397
- </ui.Typography.Text>
1398
- ),
1399
- children: (
1400
- <ui.Typography.Paragraph
1401
- data-id=""
1402
- data-binding={[
1403
- {
1404
- label: 'Answer 3',
1405
- type: 'richtext',
1406
- },
1407
- ]}
1408
- className={cn('text-gray-600')}
1409
- >
1410
- Yes, completely free! Live Editor is an open-source project
1411
- with no hidden costs or premium tiers. All features are
1412
- available to everyone.
1413
- </ui.Typography.Paragraph>
1414
- ),
1415
- },
1416
- {
1417
- key: '4',
1418
- label: (
1419
- <ui.Typography.Text
1420
- data-id=""
1421
- data-binding={[
1422
- {
1423
- label: 'Question 4',
1424
- property: 'innerText',
1425
- },
1426
- ]}
1427
- className={cn('text-lg font-semibold text-gray-800')}
1428
- >
1429
- How can I contribute?
1430
- </ui.Typography.Text>
1431
- ),
1432
- children: (
1433
- <ui.Typography.Paragraph
1434
- data-id=""
1435
- data-binding={[
1436
- {
1437
- label: 'Answer 4',
1438
- type: 'richtext',
1439
- },
1440
- ]}
1441
- className={cn('text-gray-600')}
1442
- >
1443
- You can contribute by reporting bugs, suggesting features,
1444
- sharing your projects, or contributing code. Check our
1445
- GitHub repository for more details.
1446
- </ui.Typography.Paragraph>
1447
- ),
1448
- },
1449
- ]}
1450
- />
1451
- </div>
1452
- </section>
1453
- `
1454
- }
1455
- ];
1456
- //#endregion
1457
- export { DEFAULT_TEMPLATE as a, RESERVED_BINDING_PROPERTIES as c, DEFAULT_CONTAINER_ID as i, TS_PATTERNS as l, CONFIG as n, PALETTE_SECTIONS as o, DATA_ATTR as r, REGEX as s, BINDING_PROP as t, documentTemplate as u };
1458
-
1459
- //# sourceMappingURL=constants-DU17Tdwo.js.map