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