@jbpark/live-editor 4.6.1 → 5.0.0

package/dist/constants-DU17Tdwo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants-DU17Tdwo.js","names":[],"sources":["../src/constants/index.ts"],"sourcesContent":["import { type Section } from '../types';\n\nexport const STORAGE_KEY = 'live-editor-code';\n\nexport const CONFIG = {\n  CACHE_LIMIT: 50,\n  // The document parse cache. Its entries are whole Babel ASTs (about\n  // 0.66 MB per document), and only the current and previous version get hits,\n  // so it keeps few (#106).\n  DOCUMENT_CACHE_LIMIT: 4,\n  // The script cache (`utils/scripts.ts`). Its entries are live blob URLs,\n  // revoked on eviction, and a preview loads only a few scripts (#104).\n  SCRIPT_CACHE_LIMIT: 10,\n} as const;\n\nexport const DATA_ATTR = {\n  ID: 'data-id',\n  BINDING: 'data-binding',\n  // Names an entry of `Live.Dnd`'s `bindingKeys` instead of declaring the\n  // bindings inline (#513).\n  BINDING_KEY: 'data-binding-key',\n  ITEM: 'data-item',\n} as const;\n\n// Attributes the editor owns. `data-id` links the canvas to the source,\n// `data-name` is a section's name, and `data-binding` and `data-binding-key`\n// declare what each edit is checked against. A binding can't target them,\n// since rewriting one would break that link (#429).\nexport const RESERVED_BINDING_PROPERTIES: readonly string[] = [\n  DATA_ATTR.ID,\n  'data-name',\n  DATA_ATTR.BINDING,\n  DATA_ATTR.BINDING_KEY,\n];\n\nexport const REGEX = {\n  NUMBER: /^\\d+(\\.\\d+)?$/,\n  BOOLEAN_OR_NULL: /^(true|false|null|undefined)$/,\n  MODULE_IMPORT_EXPORT_LINE:\n    /^\\s*(?:import|export)\\b[^\\n]*\\bfrom\\s+['\"][^'\"]*['\"];?\\s*$/gm,\n} as const;\n\nexport const TS_PATTERNS = [\n  /interface\\s+\\w+/,\n  /type\\s+\\w+\\s*=/,\n  /:\\s*\\w+(\\[\\])?(\\s*\\||\\s*&|\\s*=|\\s*;|\\s*,|\\s*\\))/,\n  /as\\s+\\w+/,\n  /<[A-Z]\\w*>/,\n  /enum\\s+\\w+/,\n  /public\\s+|private\\s+|protected\\s+/,\n  /readonly\\s+/,\n  /\\?\\s*:/,\n] as const;\n\nexport const BINDING_PROP = {\n  CHILDREN: 'children',\n  INNER_TEXT: 'innerText',\n  INNER_HTML: 'innerHTML',\n  ITEMS: 'items',\n} as const;\n\n// The element whose `<section>` children are a document's sections, unless\n// `Live.Dnd`'s `containerId` says otherwise (#449).\nexport const DEFAULT_CONTAINER_ID = 'app-container';\n\n// A new, empty document built around `containerId`. `createDocument()` in\n// `@jbpark/live-editor/utils` is the public way in; this is the template\n// behind it and behind `DEFAULT_TEMPLATE`.\nexport const documentTemplate = (containerId: string) => `\nimport * as ui from 'ui-kit';\nimport { cn } from 'ui-kit/utils';\n\nconst App = () => {\n  return (\n    <main id=\"${containerId}\"></main>\n  )\n}\n\nexport default App;\n`;\n\nexport const DEFAULT_TEMPLATE = documentTemplate(DEFAULT_CONTAINER_ID);\n\nexport const PALETTE_SECTIONS: 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&apos;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"],"mappings":";AAIA,MAAa,SAAS;CACpB,aAAa;CAIb,sBAAsB;CAGtB,oBAAoB;AACtB;AAEA,MAAa,YAAY;CACvB,IAAI;CACJ,SAAS;CAGT,aAAa;CACb,MAAM;AACR;AAMA,MAAa,8BAAiD;CAC5D,UAAU;CACV;CACA,UAAU;CACV,UAAU;AACZ;AAEA,MAAa,QAAQ;CACnB,QAAQ;CACR,iBAAiB;CACjB,2BACE;AACJ;AAEA,MAAa,cAAc;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAa,eAAe;CAC1B,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO;AACT;AAIA,MAAa,uBAAuB;AAKpC,MAAa,oBAAoB,gBAAwB;;;;;;gBAMzC,YAAY;;;;;;AAO5B,MAAa,mBAAmB,iBAAiB,oBAAoB;AAErE,MAAa,mBAA8B;CACzC;EACE,IAAI;EACJ,MAAM;EACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HR;CACA;EACE,IAAI;EACJ,MAAM;EACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4LR;CACA;EACE,IAAI;EACJ,MAAM;EACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDR;CACA;EACE,IAAI;EACJ,MAAM;EACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFR;CACA;EACE,IAAI;EACJ,MAAM;EACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyQR;CACA;EACE,IAAI;EACJ,MAAM;EACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoGR;CACA;EACE,IAAI;EACJ,MAAM;EACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoMR;CACA;EACE,IAAI;EACJ,MAAM;EACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoLR;CACA;EACE,IAAI;EACJ,MAAM;EACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsKR;AACF"}

package/dist/core-Bgfek364.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"core-Bgfek364.js","names":[],"sources":["../src/components/editor/use-format-code.ts","../src/components/editor/core.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { detectTypeScript } from '~/utils/detect-typescript';\n\n// Prettier is an optional peer dependency (#282), loaded on first use.\n// Without it, code comes back unformatted.\nconst loadPrettier = async () => {\n  const [prettier, babel, estree, typescript] = await Promise.all([\n    import('prettier'),\n    import('prettier/plugins/babel'),\n    import('prettier/plugins/estree'),\n    import('prettier/plugins/typescript'),\n  ]);\n\n  return {\n    format: prettier.format,\n    plugins: [babel.default, estree.default, typescript.default],\n  };\n};\n\nconst DEFAULT_PRETTIER_OPTIONS: Record<string, unknown> = {\n  tabWidth: 2,\n  singleQuote: true,\n  trailingComma: 'all',\n  htmlWhitespaceSensitivity: 'ignore',\n  arrowParens: 'avoid',\n  printWidth: 60,\n};\n\nexport interface UseFormatCodeOptions {\n  fragment?: boolean;\n  prettierOptions?: Record<string, unknown>;\n}\n\n// The formatter the built-in editor uses, shared with a custom\n// `renderEditor`.\nexport const useFormatCode = ({\n  fragment,\n  prettierOptions,\n}: UseFormatCodeOptions = {}) => {\n  const prettierConfig = useMemo(\n    () => ({\n      ...DEFAULT_PRETTIER_OPTIONS,\n      ...prettierOptions,\n    }),\n    [prettierOptions],\n  );\n\n  return useCallback(\n    async (code: string) => {\n      const isTypeScript = detectTypeScript(code);\n      const source = fragment ? `<>${code}</>` : code;\n\n      // Only a missing prettier is swallowed here; a genuine format error\n      // (prettier present, but the code is unparseable) still propagates so\n      // the editor's Cmd+S path can surface it via onError.\n      let prettier: Awaited<ReturnType<typeof loadPrettier>>;\n      try {\n        prettier = await loadPrettier();\n      } catch {\n        return code;\n      }\n\n      const formatted = await prettier.format(source, {\n        parser: isTypeScript ? 'typescript' : 'babel',\n        plugins: prettier.plugins,\n        ...prettierConfig,\n      });\n\n      if (fragment) {\n        return formatted\n          .replace(/^<>\\n?/, '')\n          .replace(/\\n?<\\/>;?\\s*$/, '')\n          .replace(/^ {2}/gm, '')\n          .trim();\n      }\n\n      return formatted;\n    },\n    [prettierConfig, fragment],\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport CodeEditor from '@jbpark/ui-kit/CodeEditor';\nimport { vscodeLight } from '@uiw/codemirror-theme-vscode';\nimport { type Extension } from '@uiw/react-codemirror';\n\nimport { cn } from '~/utils/cn';\n\nimport { useFormatCode } from './use-format-code';\n\nexport interface Props {\n  value: string;\n  height?: string;\n  theme?: Extension | 'light' | 'dark' | 'none';\n  prettierOptions?: Record<string, unknown>;\n  fragment?: boolean;\n  raw?: boolean;\n  className?: string;\n  onChange?: (value: string) => void;\n  onSave?: (value: string) => void;\n  onError?: (error: string | null) => void;\n  onCreateEditor?: ComponentProps<typeof CodeEditor>['onCreateEditor'];\n  onUpdate?: ComponentProps<typeof CodeEditor>['onUpdate'];\n}\n\n// `@jbpark/ui-kit`'s CodeEditor with this library's options (#346, #309):\n// `raw`, `fragment` and `prettierOptions` shape the Prettier formatter, and\n// `onError` is its `onFormatError`.\nconst Core = ({\n  value,\n  theme,\n  height,\n  className,\n  prettierOptions,\n  fragment,\n  raw,\n  onChange,\n  onSave,\n  onError,\n  ...props\n}: Props) => {\n  const formatCode = useFormatCode({ fragment, prettierOptions });\n\n  return (\n    <CodeEditor\n      value={value}\n      theme={theme ?? vscodeLight}\n      height={height || '100%'}\n      className={cn(className)}\n      // `raw` (e.g. innerHTML) skips prettier; otherwise reuse the shared\n      // prettier wiring as the Cmd+S formatter rather than reimplementing it.\n      formatCode={raw ? undefined : formatCode}\n      onChange={onChange}\n      onSave={onSave}\n      onFormatError={onError}\n      {...props}\n    />\n  );\n};\n\nexport default Core;\n"],"mappings":";;;;;;;;AAMA,MAAM,eAAe,YAAY;CAC/B,MAAM,CAAC,UAAU,OAAO,QAAQ,cAAc,MAAM,QAAQ,IAAI;EAC9D,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;CACT,CAAC;CAED,OAAO;EACL,QAAQ,SAAS;EACjB,SAAS;GAAC,MAAM;GAAS,OAAO;GAAS,WAAW;EAAO;CAC7D;AACF;AAEA,MAAM,2BAAoD;CACxD,UAAU;CACV,aAAa;CACb,eAAe;CACf,2BAA2B;CAC3B,aAAa;CACb,YAAY;AACd;AASA,MAAa,iBAAiB,EAC5B,UACA,oBACwB,CAAC,MAAM;CAC/B,MAAM,iBAAiB,eACd;EACL,GAAG;EACH,GAAG;CACL,IACA,CAAC,eAAe,CAClB;CAEA,OAAO,YACL,OAAO,SAAiB;EACtB,MAAM,eAAe,iBAAiB,IAAI;EAC1C,MAAM,SAAS,WAAW,KAAK,KAAK,OAAO;EAK3C,IAAI;EACJ,IAAI;GACF,WAAW,MAAM,aAAa;EAChC,QAAQ;GACN,OAAO;EACT;EAEA,MAAM,YAAY,MAAM,SAAS,OAAO,QAAQ;GAC9C,QAAQ,eAAe,eAAe;GACtC,SAAS,SAAS;GAClB,GAAG;EACL,CAAC;EAED,IAAI,UACF,OAAO,UACJ,QAAQ,UAAU,EAAE,CAAC,CACrB,QAAQ,iBAAiB,EAAE,CAAC,CAC5B,QAAQ,WAAW,EAAE,CAAC,CACtB,KAAK;EAGV,OAAO;CACT,GACA,CAAC,gBAAgB,QAAQ,CAC3B;AACF;;;ACrDA,MAAM,QAAQ,EACZ,OACA,OACA,QACA,WACA,iBACA,UACA,KACA,UACA,QACA,SACA,GAAG,YACQ;CACX,MAAM,aAAa,cAAc;EAAE;EAAU;CAAgB,CAAC;CAE9D,OACE,oBAAC,YAAD;EACS;EACP,OAAO,SAAS;EAChB,QAAQ,UAAU;EAClB,WAAW,GAAG,SAAS;EAGvB,YAAY,MAAM,KAAA,IAAY;EACpB;EACF;EACR,eAAe;EACf,GAAI;CACL,CAAA;AAEL"}