npm - @jbpark/live-editor - Versions diffs - 5.0.0 → 6.1.0 - Mend

@jbpark/live-editor 5.0.0 → 6.1.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 (69) hide show

package/README.ko.md +34 -32
package/README.md +34 -32
package/dist/{boundary-6_nTsWxP.js → boundary-CySnDUs2.js} +5 -4
package/dist/boundary-CySnDUs2.js.map +1 -0
package/dist/{compile-DwOyWrmI.js → compile-my0AjsCw.js} +3 -3
package/dist/{compile-DwOyWrmI.js.map → compile-my0AjsCw.js.map} +1 -1
package/dist/{constants-D-XKuEY2.js → constants-st9gnJ5g.js} +1 -4
package/dist/{constants-D-XKuEY2.js.map → constants-st9gnJ5g.js.map} +1 -1
package/dist/{context-DDR1xVKo.js → context-Bjq0CvBE.js} +3 -3
package/dist/{context-DDR1xVKo.js.map → context-Bjq0CvBE.js.map} +1 -1
package/dist/{core-CKazr4tT.js → core-BNVuH8-l.js} +51 -14
package/dist/core-BNVuH8-l.js.map +1 -0
package/dist/{detect-typescript-CoAO-QUJ.js → detect-typescript-CMF0FVKD.js} +2 -2
package/dist/{detect-typescript-CoAO-QUJ.js.map → detect-typescript-CMF0FVKD.js.map} +1 -1
package/dist/dnd/index.d.ts +2 -1
package/dist/dnd/index.js +2 -1
package/dist/{dnd-BlC1gqUy.js → dnd-COjjjuD7.js} +1242 -1459
package/dist/dnd-COjjjuD7.js.map +1 -0
package/dist/{document-DcwIEHRV.js → document-BkGWDZGc.js} +685 -531
package/dist/document-BkGWDZGc.js.map +1 -0
package/dist/edit-options-C_r9aCz4.d.ts +100 -0
package/dist/editor/index.d.ts +1 -1
package/dist/editor/index.js +2 -2
package/dist/{editor-Bty5XzpV.js → editor-CvnzrM9J.js} +2 -2
package/dist/{editor-Bty5XzpV.js.map → editor-CvnzrM9J.js.map} +1 -1
package/dist/error/index.d.ts +1 -1
package/dist/error/index.js +2 -2
package/dist/{error-DyYx2NQ2.js → error-CFzvnLCf.js} +4 -4
package/dist/error-CFzvnLCf.js.map +1 -0
package/dist/{index-tAiuHZsC.d.ts → index-BZpZwrxT.d.ts} +2 -2
package/dist/{index-13BDSrQc.d.ts → index-C93npmTU.d.ts} +4 -6
package/dist/{index-Cl79M7ZJ.d.ts → index-CqsS207F.d.ts} +2 -10
package/dist/{index-0VB5C3Jk.d.ts → index-DQcdHg_V.d.ts} +4 -100
package/dist/{index-kKUjo9lr.d.ts → index-DfIvkht8.d.ts} +3 -3
package/dist/index.d.ts +8 -7
package/dist/index.js +6 -6
package/dist/{messages-Yb3b7YJt.d.ts → messages-BpN3QIhj.d.ts} +4 -1
package/dist/{messages-Bt5WXKTE.js → messages-DrINcRdG.js} +4 -1
package/dist/messages-DrINcRdG.js.map +1 -0
package/dist/preview/index.d.ts +2 -2
package/dist/preview/index.js +2 -3
package/dist/{preview-DC0pyOdu.js → preview-8ejC5VP2.js} +16 -13
package/dist/preview-8ejC5VP2.js.map +1 -0
package/dist/provider/index.d.ts +2 -2
package/dist/provider/index.js +2 -2
package/dist/{sections-4uirsXRU.js → sections-rD8NuRI8.js} +3 -3
package/dist/{sections-4uirsXRU.js.map → sections-rD8NuRI8.js.map} +1 -1
package/dist/style.css +801 -5372
package/dist/ui-kit/index.d.ts +22 -0
package/dist/ui-kit/index.js +1552 -0
package/dist/ui-kit/index.js.map +1 -0
package/dist/ui-kit/style.css +5039 -0
package/dist/{update-DNInQSM7.js → update-DyFnX8yE.js} +3 -3
package/dist/{update-DNInQSM7.js.map → update-DyFnX8yE.js.map} +1 -1
package/dist/{use-dynamic-tailwind-CSYKXDmX.js → use-dynamic-tailwind-0nuRN57N.js} +30 -34
package/dist/use-dynamic-tailwind-0nuRN57N.js.map +1 -0
package/dist/use-field-state-iQGW0vc6.js +131 -0
package/dist/use-field-state-iQGW0vc6.js.map +1 -0
package/dist/utils/ast/index.js +2 -2
package/dist/utils/index.js +2 -2
package/package.json +14 -4
package/dist/boundary-6_nTsWxP.js.map +0 -1
package/dist/core-CKazr4tT.js.map +0 -1
package/dist/dnd-BlC1gqUy.js.map +0 -1
package/dist/document-DcwIEHRV.js.map +0 -1
package/dist/error-DyYx2NQ2.js.map +0 -1
package/dist/messages-Bt5WXKTE.js.map +0 -1
package/dist/preview-DC0pyOdu.js.map +0 -1
package/dist/use-dynamic-tailwind-CSYKXDmX.js.map +0 -1

package/dist/ui-kit/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","names":[],"sources":["../../src/components/ui-kit/document.ts","../../src/components/ui-kit/modules.ts","../../src/components/ui-kit/palette-sections.ts","../../src/components/ui-kit/color-picker-field.tsx","../../src/components/ui-kit/date-value.ts","../../src/components/ui-kit/ui-kit-field.tsx","../../src/components/ui-kit/ui-kit-fields.tsx"],"sourcesContent":["import type { DocumentOptions } from '~/utils/ast/document';\nimport { createDocument } from '~/utils/sections';\n\n// The imports `uiKitPaletteSections` expect in the document.\nconst UI_KIT_IMPORTS = `\nimport * as ui from 'ui-kit';\nimport { cn } from 'ui-kit/utils';\n`;\n\n// `createDocument()` with `ui` and `cn` imported from the `ui-kit` modules,\n// for a document built from `uiKitPaletteSections`.\nexport const createUiKitDocument = (options?: DocumentOptions): string =>\n UI_KIT_IMPORTS + createDocument(options);\n","import * as ui from '@jbpark/ui-kit';\nimport * as utils from '@jbpark/ui-kit/utils';\n\n// The modules preview code imports as `ui-kit` and `ui-kit/utils`\n// (`import * as ui from 'ui-kit'`). Pass them as `modules` to `Live.Dnd`,\n// `Live.Preview` or `compile()`, merged with any of your own.\nexport const uiKitModules = {\n 'ui-kit': ui,\n 'ui-kit/utils': utils,\n};\n","import type { Section } from '~/types';\n\n// The default palette's sections built with `@jbpark/ui-kit`. They use `ui`\n// and `cn` from the `ui-kit` and `ui-kit/utils` modules, so the document\n// needs those imports (`createUiKitDocument`) and the editor needs\n// `uiKitModules`.\nexport const uiKitPaletteSections: Section[] = [\n {\n id: 'hero',\n name: 'Hero',\n code: `\n <section\n data-name=\"Hero\"\n className={cn(\n 'text-center text-white',\n //\n )}\n >\n <ui.Space\n data-id=\"\"\n data-binding={[\n {\n label: 'Background Style',\n property: 'style',\n type: 'object',\n // Types the keys inside the object value; a leaf takes the same\n // fields as a top-level binding.\n render: {\n backgroundColor: { type: 'color', label: 'Background Color' },\n },\n // Not a library field, so it arrives as meta.group.\n group: 'layout',\n },\n {\n label: 'Content Spacing',\n property: 'size',\n type: 'number',\n // Constraints the library validates with or without a widget.\n min: 0,\n max: 40,\n // Presentation only: the built-in panel ignores it and shows a\n // number input; a custom panel can switch on widget.type.\n widget: { type: 'slider', step: 4, unit: 'px' },\n group: 'layout',\n },\n ]}\n style={{\n backgroundColor: '#6366f1',\n }}\n orientation=\"vertical\"\n size={16}\n align=\"center\"\n className={cn(\n 'px-5 py-15',\n //\n )}\n >\n <h1\n data-id=\"\"\n data-binding={[\n {\n label: 'Title',\n property: 'innerText',\n type: 'string',\n required: true,\n },\n ]}\n className={cn(\n 'text-5xl font-bold',\n //\n )}\n >\n Welcome to Live Editor\n </h1>\n <p\n data-id=\"\"\n data-binding={[\n {\n label: 'Description',\n type: 'richtext',\n },\n ]}\n className={cn(\n 'text-xl',\n //\n )}\n >\n Build <strong>dynamic components</strong> with drag & drop\n </p>\n <ui.Button\n data-id=\"\"\n data-binding={[\n {\n label: 'Button Text',\n property: 'innerText',\n },\n {\n label: 'Button Icon',\n property: 'icon',\n type: 'jsx',\n },\n {\n label: 'Button Size',\n property: 'size',\n options: [\n { label: 'Small', value: 'small' },\n { label: 'Middle', value: 'middle' },\n { label: 'Large', value: 'large' },\n ],\n },\n {\n label: 'Button Variant',\n property: 'variant',\n options: [\n { label: 'Solid', value: 'solid' },\n { label: 'Outlined', value: 'outlined' },\n { label: 'Filled', value: 'filled' },\n ],\n },\n ]}\n icon={<span>🚀</span>}\n size=\"large\"\n variant=\"solid\"\n className={cn(\n 'bg-white text-indigo-500',\n 'hover:bg-gray-50',\n //\n )}\n >\n Get Started\n </ui.Button>\n </ui.Space>\n </section>\n `,\n },\n {\n id: 'features',\n name: 'Features',\n code: `\n <section\n data-name=\"Features\"\n className={cn(\n 'px-5 py-10',\n //\n )}\n >\n <ui.Space\n data-id=\"\"\n data-binding={[\n {\n label: 'Feature Cards',\n property: 'children',\n },\n ]}\n className={cn(\n 'mx-auto max-w-7xl',\n //\n )}\n size=\"large\"\n wrap\n >\n <ui.Card\n className={cn(\n 'min-w-70 flex-1 text-center',\n //\n )}\n >\n <ui.Space orientation=\"vertical\" size=\"middle\" align=\"center\">\n <div\n data-id=\"\"\n data-binding={[\n {\n label: 'Icon',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'text-5xl',\n //\n )}\n >\n 🚀\n </div>\n <h3\n data-id=\"\"\n data-binding={[\n {\n label: 'Title',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'text-2xl text-gray-800',\n //\n )}\n >\n Feature 1\n </h3>\n <p\n data-id=\"\"\n data-binding={[\n {\n label: 'Description',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'text-gray-600',\n //\n )}\n >\n Amazing feature description\n </p>\n </ui.Space>\n </ui.Card>\n <ui.Card\n className={cn(\n 'min-w-70 flex-1 text-center',\n //\n )}\n >\n <ui.Space orientation=\"vertical\" size=\"middle\" align=\"center\">\n <div\n data-id=\"\"\n data-binding={[\n {\n label: 'Icon',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'text-5xl',\n //\n )}\n >\n ⚡\n </div>\n <h3\n data-id=\"\"\n data-binding={[\n {\n label: 'Title',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'text-2xl text-gray-800',\n //\n )}\n >\n Feature 2\n </h3>\n <p\n data-id=\"\"\n data-binding={[\n {\n label: 'Description',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'text-gray-600',\n //\n )}\n >\n Another great feature\n </p>\n </ui.Space>\n </ui.Card>\n <ui.Card\n className={cn(\n 'min-w-70 flex-1 text-center',\n //\n )}\n >\n <ui.Space orientation=\"vertical\" size=\"middle\" align=\"center\">\n <div\n data-id=\"\"\n data-binding={[\n {\n label: 'Icon',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'text-5xl',\n //\n )}\n >\n ✨\n </div>\n <h3\n data-id=\"\"\n data-binding={[\n {\n label: 'Title',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'text-2xl text-gray-800',\n //\n )}\n >\n Feature 3\n </h3>\n <p\n data-id=\"\"\n data-binding={[\n {\n label: 'Description',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'text-gray-600',\n //\n )}\n >\n One more awesome thing\n </p>\n </ui.Space>\n </ui.Card>\n </ui.Space>\n </section>\n `,\n },\n {\n id: 'about',\n name: 'About',\n code: `\n <section\n data-name=\"About\"\n className={cn(\n 'mx-auto max-w-3xl px-5 py-10',\n //\n )}\n >\n <ui.Typography.Title\n data-id=\"\"\n data-binding={[{ label: 'Title', property: 'innerText' }]}\n level={2}\n className={cn(\n 'mb-5 text-4xl text-gray-800',\n //\n )}\n >\n About Live Editor\n </ui.Typography.Title>\n <ui.Typography.Paragraph\n data-id=\"\"\n data-binding={[\n {\n label: 'Description 1',\n type: 'richtext',\n },\n ]}\n className={cn(\n 'mb-4 text-lg leading-relaxed text-gray-600',\n //\n )}\n >\n Live Editor is a powerful visual development tool that enables you to\n create stunning web interfaces through an intuitive drag-and-drop\n experience. Built with modern web technologies, it streamlines your\n workflow and accelerates development cycles.\n </ui.Typography.Paragraph>\n <ui.Typography.Paragraph\n data-id=\"\"\n data-binding={[\n {\n label: 'Description 2',\n type: 'richtext',\n },\n ]}\n className={cn(\n 'text-lg leading-relaxed text-gray-600',\n //\n )}\n >\n Whether you're a seasoned developer or just starting out, Live\n Editor provides the flexibility and control you need to bring your\n creative vision to life. Focus on what matters most - building great\n products.\n </ui.Typography.Paragraph>\n </section>\n `,\n },\n {\n id: 'cta',\n name: 'CTA',\n code: `\n <section\n data-name=\"CTA\"\n className={cn(\n 'bg-gray-50 px-5 py-12 text-center',\n //\n )}\n >\n <div\n className={cn(\n 'mx-auto max-w-xl',\n //\n )}\n >\n <ui.Typography.Title\n data-id=\"\"\n data-binding={[{ label: 'Title', property: 'innerText' }]}\n level={2}\n className={cn(\n 'mb-4 text-3xl text-gray-800',\n //\n )}\n >\n Ready to get started?\n </ui.Typography.Title>\n <ui.Typography.Paragraph\n data-id=\"\"\n data-binding={[\n {\n label: 'Description',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'mb-6 text-lg text-gray-600',\n //\n )}\n >\n Start exploring what Live Editor can do for your projects\n </ui.Typography.Paragraph>\n <ui.Space\n data-id=\"\"\n data-binding={[{ label: 'Buttons', property: 'children' }]}\n className={cn(\n 'flex flex-wrap justify-center gap-4',\n //\n )}\n >\n <ui.Button\n data-id=\"\"\n data-binding={[\n {\n label: 'Button 1 Text',\n property: 'innerText',\n },\n ]}\n size=\"large\"\n className={cn(\n 'bg-indigo-500 px-8 text-base text-white',\n 'hover:bg-indigo-600',\n //\n )}\n >\n View Documentation\n </ui.Button>\n <ui.Button\n data-id=\"\"\n data-binding={[\n {\n label: 'Button 2 Text',\n property: 'innerText',\n },\n ]}\n variant=\"outlined\"\n size=\"large\"\n className={cn(\n 'border-2 border-indigo-500 px-8 text-base text-indigo-500',\n 'hover:bg-indigo-50',\n //\n )}\n >\n View Examples\n </ui.Button>\n </ui.Space>\n </div>\n </section>\n `,\n },\n {\n id: 'getting-started',\n name: 'Getting Started',\n code: `\n <section\n data-name=\"Getting Started\"\n className={cn(\n 'px-5 py-16',\n //\n )}\n >\n <div\n className={cn(\n 'mx-auto max-w-5xl',\n //\n )}\n >\n <ui.Typography.Title\n data-id=\"\"\n data-binding={[{ label: 'Title', property: 'innerText' }]}\n level={2}\n className={cn(\n 'mb-12 text-center text-4xl font-bold text-gray-800',\n //\n )}\n >\n How to Get Started\n </ui.Typography.Title>\n <div\n className={cn(\n 'grid gap-8 md:grid-cols-3',\n //\n )}\n >\n <ui.Card\n data-id=\"\"\n data-binding={[\n {\n label: 'Card 1 Content',\n property: 'children',\n },\n ]}\n className={cn(\n 'rounded-lg border-2 border-gray-200 bg-white p-8',\n //\n )}\n >\n <ui.Typography.Title\n data-id=\"\"\n data-binding={[\n {\n label: 'Card 1 Title',\n property: 'innerText',\n },\n ]}\n level={3}\n className={cn(\n 'mb-2 text-2xl font-bold text-gray-800',\n //\n )}\n >\n Explore\n </ui.Typography.Title>\n <ui.Typography.Paragraph\n data-id=\"\"\n data-binding={[\n {\n label: 'Card 1 Icon',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'mb-6 text-4xl font-bold text-indigo-600',\n //\n )}\n >\n 📚\n </ui.Typography.Paragraph>\n <ul\n className={cn(\n 'mb-8 space-y-3 text-gray-600',\n //\n )}\n >\n <li>✓ Read documentation</li>\n <li>✓ Browse examples</li>\n <li>✓ Try the demo</li>\n </ul>\n <ui.Button\n data-id=\"\"\n data-binding={[\n {\n label: 'Card 1 Button',\n property: 'innerText',\n },\n ]}\n variant=\"outlined\"\n size=\"large\"\n block\n className={cn(\n 'border-2 border-indigo-500 text-indigo-500',\n 'hover:bg-indigo-50',\n //\n )}\n >\n View Docs\n </ui.Button>\n </ui.Card>\n <ui.Card\n data-id=\"\"\n data-binding={[\n {\n label: 'Card 2 Content',\n property: 'children',\n },\n ]}\n className={cn(\n 'relative rounded-lg border-2 border-indigo-500 bg-white p-8',\n //\n )}\n >\n <div\n className={cn(\n 'absolute -top-4 left-1/2 -translate-x-1/2',\n 'rounded-full bg-indigo-500 px-4 py-1 text-sm text-white',\n //\n )}\n >\n Recommended\n </div>\n <ui.Typography.Title\n data-id=\"\"\n data-binding={[\n {\n label: 'Card 2 Title',\n property: 'innerText',\n },\n ]}\n level={3}\n className={cn(\n 'mb-2 text-2xl font-bold text-gray-800',\n //\n )}\n >\n Practice\n </ui.Typography.Title>\n <ui.Typography.Paragraph\n data-id=\"\"\n data-binding={[\n {\n label: 'Card 2 Icon',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'mb-6 text-4xl font-bold text-indigo-600',\n //\n )}\n >\n 💻\n </ui.Typography.Paragraph>\n <ul\n className={cn(\n 'mb-8 space-y-3 text-gray-600',\n //\n )}\n >\n <li>✓ Interactive playground</li>\n <li>✓ Experiment freely</li>\n <li>✓ Build your own</li>\n </ul>\n <ui.Button\n data-id=\"\"\n data-binding={[\n {\n label: 'Card 2 Button',\n property: 'innerText',\n },\n ]}\n size=\"large\"\n block\n className={cn(\n 'bg-indigo-500 text-white',\n 'hover:bg-indigo-600',\n //\n )}\n >\n Start Building\n </ui.Button>\n </ui.Card>\n <ui.Card\n data-id=\"\"\n data-binding={[\n {\n label: 'Card 3 Content',\n property: 'children',\n },\n ]}\n className={cn(\n 'rounded-lg border-2 border-gray-200 bg-white p-8',\n //\n )}\n >\n <ui.Typography.Title\n data-id=\"\"\n data-binding={[\n {\n label: 'Card 3 Title',\n property: 'innerText',\n },\n ]}\n level={3}\n className={cn(\n 'mb-2 text-2xl font-bold text-gray-800',\n //\n )}\n >\n Contribute\n </ui.Typography.Title>\n <ui.Typography.Paragraph\n data-id=\"\"\n data-binding={[\n {\n label: 'Card 3 Icon',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'mb-6 text-4xl font-bold text-indigo-600',\n //\n )}\n >\n 🤝\n </ui.Typography.Paragraph>\n <ul\n className={cn(\n 'mb-8 space-y-3 text-gray-600',\n //\n )}\n >\n <li>✓ Report issues</li>\n <li>✓ Suggest features</li>\n <li>✓ Submit pull requests</li>\n </ul>\n <ui.Button\n data-id=\"\"\n data-binding={[\n {\n label: 'Card 3 Button',\n property: 'innerText',\n },\n ]}\n variant=\"outlined\"\n size=\"large\"\n block\n className={cn(\n 'border-2 border-indigo-500 text-indigo-500',\n 'hover:bg-indigo-50',\n //\n )}\n >\n View on GitHub\n </ui.Button>\n </ui.Card>\n </div>\n </div>\n </section>\n `,\n },\n {\n id: 'key-features',\n name: 'Key Features',\n code: `\n <section\n data-name=\"Key Features\"\n className={cn(\n 'bg-indigo-50 px-5 py-16',\n //\n )}\n >\n <div\n className={cn(\n 'mx-auto max-w-6xl',\n //\n )}\n >\n <h2\n data-id=\"\"\n data-binding={[{ label: 'Title', property: 'innerText' }]}\n className={cn(\n 'mb-12 text-center text-4xl font-bold text-gray-800',\n //\n )}\n >\n Key Features\n </h2>\n <div\n className={cn(\n 'grid gap-8 md:grid-cols-2',\n //\n )}\n >\n <div\n className={cn(\n 'rounded-lg bg-white p-8 shadow-md',\n //\n )}\n >\n <div\n className={cn(\n 'mb-4 text-4xl',\n //\n )}\n >\n 🎨\n </div>\n <h3\n className={cn(\n 'mb-4 text-2xl font-bold text-gray-800',\n //\n )}\n >\n Visual Editing\n </h3>\n <p\n className={cn(\n 'text-gray-600',\n //\n )}\n >\n See your changes in real-time as you build. Live Editor provides\n instant visual feedback, making it easier to understand how code\n affects your interface.\n </p>\n </div>\n <div\n className={cn(\n 'rounded-lg bg-white p-8 shadow-md',\n //\n )}\n >\n <div\n className={cn(\n 'mb-4 text-4xl',\n //\n )}\n >\n 🧩\n </div>\n <h3\n className={cn(\n 'mb-4 text-2xl font-bold text-gray-800',\n //\n )}\n >\n Component-Based\n </h3>\n <p\n className={cn(\n 'text-gray-600',\n //\n )}\n >\n Build with reusable components that you can drag, drop, and\n customize. Learn modern development patterns while creating your\n interface.\n </p>\n </div>\n </div>\n </div>\n </section>\n `,\n },\n {\n id: 'stats',\n name: 'Stats',\n code: `\n <section\n data-name=\"Stats\"\n className={cn(\n 'bg-indigo-600 text-white',\n //\n )}\n >\n <ui.Marquees\n data-id=\"\"\n data-binding={[\n { label: 'Stats Items', property: 'items' },\n {\n label: 'Scroll Speed',\n property: 'speed',\n type: 'number',\n min: 20,\n max: 300,\n // The bare-string form; it arrives as { type: 'slider' }.\n widget: 'slider',\n },\n { label: 'Pause On Hover', property: 'pauseOnHover', type: 'boolean' },\n ]}\n speed={100}\n pauseOnHover={true}\n autoFill={true}\n className=\"px-5 py-16\"\n items={[\n {\n key: 'stats-row',\n children: (\n <div\n data-id=\"\"\n data-binding={[\n {\n label: 'Stats Cards',\n property: 'children',\n },\n ]}\n className={cn('flex gap-20')}\n >\n <div\n className={cn(\n 'min-w-60 text-center',\n //\n )}\n >\n <p\n data-id=\"\"\n data-binding={[\n {\n label: 'Title',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'mb-2 text-5xl font-bold',\n //\n )}\n >\n Open\n </p>\n <p\n data-id=\"\"\n data-binding={[\n {\n label: 'Description',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'text-indigo-200',\n //\n )}\n >\n Source Project\n </p>\n </div>\n <div\n className={cn(\n 'min-w-60 text-center',\n //\n )}\n >\n <p\n data-id=\"\"\n data-binding={[\n {\n label: 'Title',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'mb-2 text-5xl font-bold',\n //\n )}\n >\n Free\n </p>\n <p\n data-id=\"\"\n data-binding={[\n {\n label: 'Description',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'text-indigo-200',\n //\n )}\n >\n For Everyone\n </p>\n </div>\n <div\n className={cn(\n 'min-w-60 text-center',\n //\n )}\n >\n <p\n data-id=\"\"\n data-binding={[\n {\n label: 'Title',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'mb-2 text-5xl font-bold',\n //\n )}\n >\n Active\n </p>\n <p\n data-id=\"\"\n data-binding={[\n {\n label: 'Description',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'text-indigo-200',\n //\n )}\n >\n Community\n </p>\n </div>\n <div\n className={cn(\n 'min-w-60 text-center',\n //\n )}\n >\n <p\n data-id=\"\"\n data-binding={[\n {\n label: 'Title',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'mb-2 text-5xl font-bold',\n //\n )}\n >\n Learn\n </p>\n <p\n data-id=\"\"\n data-binding={[\n {\n label: 'Description',\n property: 'innerText',\n },\n ]}\n className={cn(\n 'text-indigo-200',\n //\n )}\n >\n By Doing\n </p>\n </div>\n </div>\n ),\n },\n ]}\n />\n </section>\n `,\n },\n {\n id: 'roadmap',\n name: 'Roadmap',\n code: `\n <section\n data-name=\"Roadmap\"\n className={cn(\n 'px-5 py-16',\n //\n )}\n >\n <div\n className={cn(\n 'mx-auto max-w-3xl',\n //\n )}\n >\n <h2\n data-id=\"\"\n data-binding={[\n { label: 'Title', property: 'innerText', required: true },\n ]}\n className={cn(\n 'mb-8 text-center text-4xl font-bold text-gray-800',\n //\n )}\n >\n Roadmap\n </h2>\n <ui.List\n data-id=\"\"\n data-binding={[\n {\n label: 'Milestones',\n property: 'data',\n type: 'array',\n // One leaf per item key. Each leaf takes the same fields as a\n // top-level binding, and label falls back to the key.\n render: {\n title: {\n type: 'string',\n label: 'Title',\n required: true,\n },\n date: { type: 'date', label: 'Release Date', required: true },\n status: {\n type: 'string',\n label: 'Status',\n options: [\n { label: 'Planned', value: 'planned' },\n { label: 'In Progress', value: 'in-progress' },\n { label: 'Shipped', value: 'shipped' },\n ],\n },\n progress: {\n type: 'number',\n label: 'Progress',\n min: 0,\n max: 100,\n widget: { type: 'slider', step: 10, unit: '%' },\n },\n color: { type: 'color', label: 'Accent Color' },\n highlight: { type: 'boolean', label: 'Highlight' },\n // An object-valued key: its own render map types the keys\n // inside it, one level further down.\n link: {\n type: 'object',\n label: 'Link',\n render: {\n text: { type: 'string', label: 'Link Text' },\n href: {\n type: 'url',\n label: 'Link URL',\n pattern: '^https://',\n // Not a library field, so it arrives as meta.hint.\n hint: 'Must use https',\n },\n },\n },\n },\n },\n ]}\n data={[\n {\n title: 'Visual editing',\n date: '2026-03-02',\n status: 'shipped',\n progress: 100,\n color: '#22c55e',\n highlight: false,\n link: { text: 'Release notes', href: 'https://github.com' },\n },\n {\n title: 'Custom panels',\n date: '2026-09-26',\n status: 'in-progress',\n progress: 60,\n color: '#6366f1',\n highlight: true,\n link: { text: 'Guide', href: 'https://github.com' },\n },\n {\n title: 'Collaboration',\n date: '2027-01-15',\n status: 'planned',\n progress: 0,\n color: '#f59e0b',\n highlight: false,\n link: { text: 'Discussion', href: 'https://github.com' },\n },\n ]}\n itemKey={item => item.title}\n renderItem={item => (\n <div\n className={cn(\n 'flex items-center gap-4 border-b border-gray-100 py-4',\n item.highlight && 'rounded-lg bg-indigo-50 px-4',\n )}\n >\n <span\n className=\"size-3 shrink-0 rounded-full\"\n style={{ backgroundColor: item.color }}\n />\n <div className=\"min-w-0 flex-1\">\n <p className=\"font-semibold text-gray-800\">{item.title}</p>\n <p className=\"text-sm text-gray-500\">\n {item.date} · {item.status}\n </p>\n <ui.Progress value={item.progress} className=\"mt-2\" />\n </div>\n <a\n href={item.link.href}\n className=\"text-sm text-indigo-500 hover:underline\"\n >\n {item.link.text}\n </a>\n </div>\n )}\n />\n <p\n className={cn(\n 'mt-6 text-center text-sm text-gray-500',\n //\n )}\n >\n Last updated{' '}\n <time\n data-id=\"\"\n data-binding={[\n {\n label: 'Updated On',\n property: 'dateTime',\n type: 'date',\n required: true,\n },\n { label: 'Updated Text', property: 'innerText' },\n ]}\n dateTime=\"2026-09-26\"\n >\n September 26, 2026\n </time>\n {' · '}\n <a\n data-id=\"\"\n data-binding={[\n { label: 'Link Text', property: 'innerText' },\n {\n label: 'Link URL',\n property: 'href',\n type: 'url',\n required: true,\n pattern: '^https://',\n },\n ]}\n href=\"https://github.com/pjb0811/live-editor/releases\"\n className=\"text-indigo-500 hover:underline\"\n >\n All releases\n </a>\n </p>\n </div>\n </section>\n `,\n },\n {\n id: 'faq',\n name: 'FAQ',\n code: `\n <section\n data-name=\"FAQ\"\n className={cn(\n 'px-5 py-16',\n //\n )}\n >\n <div\n className={cn(\n 'mx-auto max-w-3xl',\n //\n )}\n >\n <ui.Typography.Title\n data-id=\"\"\n data-binding={[{ label: 'Title', property: 'innerText' }]}\n level={2}\n className={cn(\n 'mb-12 text-center text-4xl font-bold text-gray-800',\n //\n )}\n >\n Frequently Asked Questions\n </ui.Typography.Title>\n <ui.Collapse\n data-id=\"\"\n data-binding={[{ label: 'FAQ Items', property: 'items' }]}\n items={[\n {\n key: '1',\n label: (\n <ui.Typography.Text\n data-id=\"\"\n data-binding={[\n {\n label: 'Question 1',\n property: 'innerText',\n },\n ]}\n className={cn('text-lg font-semibold text-gray-800')}\n >\n What is Live Editor?\n </ui.Typography.Text>\n ),\n children: (\n <ui.Typography.Paragraph\n data-id=\"\"\n data-binding={[\n {\n label: 'Answer 1',\n type: 'richtext',\n },\n ]}\n className={cn('text-gray-600')}\n >\n Live Editor is an open-source tool for building web\n interfaces visually. It helps you learn web development by\n providing instant feedback as you build components.\n </ui.Typography.Paragraph>\n ),\n },\n {\n key: '2',\n label: (\n <ui.Typography.Text\n data-id=\"\"\n data-binding={[\n {\n label: 'Question 2',\n property: 'innerText',\n },\n ]}\n className={cn('text-lg font-semibold text-gray-800')}\n >\n Do I need coding experience?\n </ui.Typography.Text>\n ),\n children: (\n <ui.Typography.Paragraph\n data-id=\"\"\n data-binding={[\n {\n label: 'Answer 2',\n type: 'richtext',\n },\n ]}\n className={cn('text-gray-600')}\n >\n No! Live Editor is designed for all skill levels. Beginners\n can learn through visual editing, while experienced\n developers can work directly with code.\n </ui.Typography.Paragraph>\n ),\n },\n {\n key: '3',\n label: (\n <ui.Typography.Text\n data-id=\"\"\n data-binding={[\n {\n label: 'Question 3',\n property: 'innerText',\n },\n ]}\n className={cn('text-lg font-semibold text-gray-800')}\n >\n Is it really free?\n </ui.Typography.Text>\n ),\n children: (\n <ui.Typography.Paragraph\n data-id=\"\"\n data-binding={[\n {\n label: 'Answer 3',\n type: 'richtext',\n },\n ]}\n className={cn('text-gray-600')}\n >\n Yes, completely free! Live Editor is an open-source project\n with no hidden costs or premium tiers. All features are\n available to everyone.\n </ui.Typography.Paragraph>\n ),\n },\n {\n key: '4',\n label: (\n <ui.Typography.Text\n data-id=\"\"\n data-binding={[\n {\n label: 'Question 4',\n property: 'innerText',\n },\n ]}\n className={cn('text-lg font-semibold text-gray-800')}\n >\n How can I contribute?\n </ui.Typography.Text>\n ),\n children: (\n <ui.Typography.Paragraph\n data-id=\"\"\n data-binding={[\n {\n label: 'Answer 4',\n type: 'richtext',\n },\n ]}\n className={cn('text-gray-600')}\n >\n You can contribute by reporting bugs, suggesting features,\n sharing your projects, or contributing code. Check our\n GitHub repository for more details.\n </ui.Typography.Paragraph>\n ),\n },\n ]}\n />\n </div>\n </section>\n `,\n },\n];\n","import { useEffect, useRef, useState } from 'react';\n\nimport { ColorPicker } from '@jbpark/ui-kit';\nimport { useDebounce } from '@jbpark/use-hooks';\n\n// The color picker reports every drag frame, and each commit re-parses and\n// recompiles (#130). So the commit waits this long after the last change,\n// while `liveValue` updates the swatch every frame.\nconst COLOR_COMMIT_DELAY = 75;\n\n// Returns `value` when it is a 3- or 6-digit hex color, else black.\nconst normalizeToHex = (value: string): string => {\n const trimmed = value.trim();\n\n if (/^#([0-9A-Fa-f]{3}){1,2}$/.test(trimmed)) {\n return trimmed;\n }\n\n return '#000000';\n};\n\ninterface Props {\n // Any source text; anything but a hex color shows as black.\n value: string;\n onChange: (value: string) => void;\n // The picker's trigger is a `role=\"button\"` element, which a `<label>`\n // can't point at, so it carries the field's name itself (#637).\n label: string;\n}\n\nconst ColorPickerField = ({ value: source, onChange, label }: Props) => {\n const value = normalizeToHex(source);\n const [liveValue, setLiveValue] = useState(value);\n // The last `value` seen, to notice a change from outside during render.\n const [prevValue, setPrevValue] = useState(value);\n const lastCommittedRef = useRef(value);\n\n // Follow a change from outside, such as undo or another field. Done\n // during render, so the old color never paints.\n if (value !== prevValue) {\n setPrevValue(value);\n setLiveValue(value);\n }\n\n // `commit` reads this from handlers and timers only, so an effect is\n // enough.\n useEffect(() => {\n lastCommittedRef.current = value;\n }, [value]);\n\n const commit = (next: string) => {\n if (next === lastCommittedRef.current) {\n return;\n }\n\n lastCommittedRef.current = next;\n onChange(next);\n };\n\n const debouncedCommit = useDebounce(() => commit(liveValue), {\n delay: COLOR_COMMIT_DELAY,\n autoInvoke: false,\n });\n\n return (\n <ColorPicker\n aria-label={label}\n showText\n value={liveValue}\n onChange={next => {\n setLiveValue(next);\n debouncedCommit();\n }}\n onOpenChange={open => {\n // Commit at once when the picker closes, so an unmount can't drop\n // the last color.\n if (!open) {\n commit(liveValue);\n }\n }}\n />\n );\n};\n\nexport default ColorPickerField;\n","// A `YYYY-MM-DD` or `YYYY-MM-DDTHH:mm` value as a local `Date`, or\n// `undefined` for anything else.\nexport const parseDateValue = (value: string): Date | undefined => {\n const match = /^(\\d{4})-(\\d{2})-(\\d{2})(?:T(\\d{2}):(\\d{2}))?$/.exec(\n value.trim(),\n );\n\n if (!match) {\n return undefined;\n }\n\n const [, year, month, day, hours = '0', minutes = '0'] = match;\n const date = new Date(\n Number(year),\n Number(month) - 1,\n Number(day),\n Number(hours),\n Number(minutes),\n );\n\n return Number.isNaN(date.getTime()) ? undefined : date;\n};\n\nconst pad = (value: number) => String(value).padStart(2, '0');\n\n// `YYYY-MM-DD`, or `YYYY-MM-DDTHH:mm` with `withTime`, in local time.\nexport const formatDateValue = (date: Date, withTime = false): string => {\n const day = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;\n\n return withTime\n ? `${day}T${pad(date.getHours())}:${pad(date.getMinutes())}`\n : day;\n};\n","import type { ComponentProps } from 'react';\n\nimport {\n Checkbox,\n DatePicker,\n RichTextEditor,\n Select,\n TimePicker,\n} from '@jbpark/ui-kit';\n\nimport FieldError from '~/components/dnd/panel/fields/field-error';\nimport { getFieldKind } from '~/components/dnd/panel/fields/field-kind';\nimport { useFieldState } from '~/components/dnd/panel/fields/use-field-state';\nimport type { FieldProps } from '~/components/dnd/panel/types';\n\nimport ColorPickerField from './color-picker-field';\nimport { formatDateValue, parseDateValue } from './date-value';\n\n// The formatting controls for a small sidebar field, not every preset.\nconst RICHTEXT_TOOLBAR: ComponentProps<typeof RichTextEditor>['toolbar'] = [\n 'bold',\n 'italic',\n 'underline',\n 'bulletList',\n 'orderedList',\n 'link',\n];\n\nconst UiKitField = ({ binding }: FieldProps) => {\n const { value, rawValue, onChange } = binding;\n const {\n validationError,\n errorId,\n controlProps,\n labelledByProps,\n commitIfChanged,\n validateAndCommit,\n } = useFieldState(binding);\n\n const kind = getFieldKind(binding);\n\n if (kind === 'richtext') {\n // Takes no `id`, so it points at the label instead.\n return (\n <RichTextEditor\n {...labelledByProps}\n value={rawValue}\n toolbar={RICHTEXT_TOOLBAR}\n onChange={commitIfChanged}\n />\n );\n }\n\n if (kind === 'boolean') {\n return (\n <Checkbox\n {...controlProps}\n checked={value === true || value === 'true'}\n onChange={checked => {\n onChange(checked);\n }}\n />\n );\n }\n\n if (kind === 'select') {\n // Takes no `id`, so it points at the label instead.\n return (\n <Select\n {...labelledByProps}\n value={rawValue}\n options={binding.options ?? []}\n onChange={commitIfChanged}\n />\n );\n }\n\n if (kind === 'color') {\n return (\n <ColorPickerField\n value={rawValue}\n label={binding.label}\n onChange={commitIfChanged}\n />\n );\n }\n\n if (kind === 'time') {\n return (\n <div>\n <TimePicker\n {...controlProps}\n value={rawValue || null}\n onChange={time => validateAndCommit(time ?? '')}\n />\n <FieldError id={errorId} message={validationError} />\n </div>\n );\n }\n\n const withTime = kind === 'datetime';\n\n return (\n <div>\n <DatePicker\n {...controlProps}\n value={parseDateValue(rawValue)}\n showTime={withTime}\n onChange={date =>\n validateAndCommit(date ? formatDateValue(date, withTime) : '')\n }\n />\n <FieldError id={errorId} message={validationError} />\n </div>\n );\n};\n\nexport default UiKitField;\n","import type { DndRenderField } from '~/components/dnd/edit-options';\nimport {\n type FieldKind,\n getFieldKind,\n} from '~/components/dnd/panel/fields/field-kind';\n\nimport UiKitField from './ui-kit-field';\n\n// The field kinds `uiKitFields` draws with ui-kit. The rest keep the\n// built-in control.\nconst UI_KIT_KINDS: ReadonlySet<FieldKind> = new Set([\n 'richtext',\n 'boolean',\n 'select',\n 'color',\n 'date',\n 'datetime',\n 'time',\n]);\n\n// A `renderField` that draws the rich text, checkbox, select, color, date,\n// datetime and time fields with `@jbpark/ui-kit` and keeps the built-in\n// control for the rest. To combine it with your own, call it last:\n// `(props, builtin) => mine(props) ?? uiKitFields(props, builtin)`.\nexport const uiKitFields: DndRenderField = props =>\n UI_KIT_KINDS.has(getFieldKind(props.binding)) ? (\n <UiKitField {...props} />\n ) : undefined;\n"],"mappings":"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"}