npm - @jbpark/live-editor - Versions diffs - 0.1.0 - Mend

@jbpark/live-editor 0.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 (22) hide show

package/README.ko.md +127 -0
package/README.md +127 -0
package/dist/ast-6PhUZ232.mjs +39664 -0
package/dist/ast-6PhUZ232.mjs.map +1 -0
package/dist/enums-3yleLgqV.mjs +1237 -0
package/dist/enums-3yleLgqV.mjs.map +1 -0
package/dist/index-DdSjzvA3.d.mts +15 -0
package/dist/index.css +77 -0
package/dist/index.css.map +1 -0
package/dist/index.d.mts +248 -0
package/dist/index.mjs +19273 -0
package/dist/index.mjs.map +1 -0
package/dist/utils/ast/index.d.mts +1621 -0
package/dist/utils/ast/index.mjs +3 -0
package/dist/utils/index.d.mts +27 -0
package/dist/utils/index.mjs +3 -0
package/dist/utils/tailwind/index.d.mts +5 -0
package/dist/utils/tailwind/index.mjs +37 -0
package/dist/utils/tailwind/index.mjs.map +1 -0
package/dist/utils-INSWI9h0.mjs +2072 -0
package/dist/utils-INSWI9h0.mjs.map +1 -0
package/package.json +143 -0

package/dist/enums-3yleLgqV.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"enums-3yleLgqV.mjs","names":[],"sources":["../src/enums/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} as const;\n\nexport const DATA_ATTR = {\n ID: 'data-id',\n BINDING: 'data-binding',\n ITEM: 'data-item',\n} as const;\n\nexport const REGEX = {\n NUMBER: /^\\d+(\\.\\d+)?$/,\n BOOLEAN_OR_NULL: /^(true|false|null|undefined)$/,\n CONTAINER: /(<main[^>]*id=[\"']app-container[\"'][^>]*>)([\\s\\S]*?)(<\\/main>)/m,\n COMMENT: /\\{\\s*\\/\\*[\\s\\S]*?\\*\\/\\s*\\}/g,\n SECTION: /<section[\\s\\S]*?<\\/section>/g,\n DATA_NAME: /data-name=[\"']([^\"']+)[\"']/,\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\nexport const DEFAULT_TEMPLATE = `\nimport * as ui from 'ui-kit';\nimport { cn } from 'ui-kit/utils';\n\nconst App = () => {\n return (\n <main id=\"app-container\"></main>\n )\n}\n\nexport default App;\n`;\n\nexport const DRAGGABLE_ITEMS: 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 },\n ]}\n style={{\n backgroundColor: '#6366f1',\n }}\n orientation=\"vertical\"\n size=\"large\"\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 },\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 property: 'innerText',\n },\n ]}\n className={cn(\n 'text-xl',\n //\n )}\n >\n Build dynamic components 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 Size',\n property: 'size',\n options: [\n {\n label: 'small',\n value: 'small',\n },\n {\n label: 'middle',\n value: 'middle',\n },\n {\n label: 'large',\n value: 'large',\n },\n ],\n },\n {\n label: 'Button Variant',\n property: 'variant',\n options: [\n {\n label: 'default',\n value: 'default',\n },\n {\n label: 'outlined',\n value: 'outlined',\n },\n ],\n },\n ]}\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 property: 'innerText',\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 property: 'innerText',\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 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={[{ label: 'Stats Items', property: 'items' }]}\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: '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 property: 'innerText',\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 property: 'innerText',\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 property: 'innerText',\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 property: 'innerText',\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,EACpB,aAAa,IACd;AAED,MAAa,YAAY;CACvB,IAAI;CACJ,SAAS;CACT,MAAM;CACP;AAED,MAAa,QAAQ;CACnB,QAAQ;CACR,iBAAiB;CACjB,WAAW;CACX,SAAS;CACT,SAAS;CACT,WAAW;CACZ;AAED,MAAa,cAAc;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,eAAe;CAC1B,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO;CACR;AAED,MAAa,mBAAmB;;;;;;;;;;;;AAahC,MAAa,kBAA6B;CACxC;EACE,IAAI;EACJ,MAAM;EACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8GP;CACD;EACE,IAAI;EACJ,MAAM;EACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4LP;CACD;EACE,IAAI;EACJ,MAAM;EACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDP;CACD;EACE,IAAI;EACJ,MAAM;EACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuFP;CACD;EACE,IAAI;EACJ,MAAM;EACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyQP;CACD;EACE,IAAI;EACJ,MAAM;EACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkGP;CACD;EACE,IAAI;EACJ,MAAM;EACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwLP;CACD;EACE,IAAI;EACJ,MAAM;EACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsKP;CACF"}

package/dist/index-DdSjzvA3.d.mts ADDED Viewed

@@ -0,0 +1,15 @@
+//#region src/types/index.d.ts
+interface Module {
+  exports: {
+    default?: React.ComponentType<Record<string, unknown>>;
+  };
+  error?: string;
+}
+interface Section {
+  id: string;
+  name: string;
+  code: string;
+}
+//#endregion
+export { Section as n, Module as t };
+//# sourceMappingURL=index-DdSjzvA3.d.mts.map

package/dist/index.css ADDED Viewed

@@ -0,0 +1,77 @@
+@layer utilities {
+  /* 편집 모드 기본 설정 */
+  [data-editor-mode] {
+    --editor-fixed-to-static: relative;
+  }
+  /* Fixed 요소를 흐름에 포함 */
+  [data-editor-mode] *[style*='position: fixed'],
+  [data-editor-mode] .fixed {
+    position: var(--editor-fixed-to-static) !important;
+    inset: auto !important;
+    margin: 8px 0 !important;
+    border: 2px solid #8b5cf6 !important;
+    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1) !important;
+  }
+  /* 기본 숨김 요소 */
+  [data-editor-mode] .hidden {
+    opacity: 0.6 !important;
+    border: 2px dashed #f59e0b !important;
+    background: rgba(245, 158, 11, 0.05) !important;
+    position: relative !important;
+    /* display는 건드리지 않음 - hidden 클래스만 시각적으로 표시 */
+  }
+  /* 인라인 스타일로 숨긴 요소 */
+  [data-editor-mode] *[style*='display: none'] {
+    display: block !important;
+    opacity: 0.6 !important;
+    border: 2px dashed #f59e0b !important;
+    background: rgba(245, 158, 11, 0.05) !important;
+  }
+  /* 반응형 숨김 - flex 유지 */
+  [data-editor-mode] .flex.sm\:hidden,
+  [data-editor-mode] .flex.md\:hidden,
+  [data-editor-mode] .flex.lg\:hidden,
+  [data-editor-mode] .flex.xl\:hidden {
+    display: flex !important;
+    opacity: 0.5 !important;
+    border: 2px dashed #3b82f6 !important;
+  }
+  /* 반응형 숨김 - grid 유지 */
+  [data-editor-mode] .grid.sm\:hidden,
+  [data-editor-mode] .grid.md\:hidden,
+  [data-editor-mode] .grid.lg\:hidden,
+  [data-editor-mode] .grid.xl\:hidden {
+    display: grid !important;
+    opacity: 0.5 !important;
+    border: 2px dashed #3b82f6 !important;
+  }
+  /* 반응형 숨김 - inline-flex 유지 */
+  [data-editor-mode] .inline-flex.sm\:hidden,
+  [data-editor-mode] .inline-flex.md\:hidden,
+  [data-editor-mode] .inline-flex.lg\:hidden,
+  [data-editor-mode] .inline-flex.xl\:hidden {
+    display: inline-flex !important;
+    opacity: 0.5 !important;
+    border: 2px dashed #3b82f6 !important;
+  }
+  /* 반응형 숨김 - 기본 (flex/grid 아닌 경우) */
+  [data-editor-mode] .sm\:hidden:not(.flex):not(.grid):not(.inline-flex),
+  [data-editor-mode] .md\:hidden:not(.flex):not(.grid):not(.inline-flex),
+  [data-editor-mode] .lg\:hidden:not(.flex):not(.grid):not(.inline-flex),
+  [data-editor-mode] .xl\:hidden:not(.flex):not(.grid):not(.inline-flex) {
+    display: block !important;
+    opacity: 0.5 !important;
+    border: 2px dashed #3b82f6 !important;
+  }
+}
+/*# sourceMappingURL=index.css.map*/

package/dist/index.css.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.css","names":[],"sources":["../src/index.css"],"sourcesContent":["@import 'tailwindcss';\n\n@layer utilities {\n /* 편집 모드 기본 설정 */\n [data-editor-mode] {\n --editor-fixed-to-static: relative;\n }\n\n /* Fixed 요소를 흐름에 포함 */\n [data-editor-mode] *[style*='position: fixed'],\n [data-editor-mode] .fixed {\n position: var(--editor-fixed-to-static) !important;\n inset: auto !important;\n margin: 8px 0 !important;\n border: 2px solid #8b5cf6 !important;\n box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1) !important;\n }\n\n /* 기본 숨김 요소 */\n [data-editor-mode] .hidden {\n opacity: 0.6 !important;\n border: 2px dashed #f59e0b !important;\n background: rgba(245, 158, 11, 0.05) !important;\n position: relative !important;\n /* display는 건드리지 않음 - hidden 클래스만 시각적으로 표시 */\n }\n\n /* 인라인 스타일로 숨긴 요소 */\n [data-editor-mode] *[style*='display: none'] {\n display: block !important;\n opacity: 0.6 !important;\n border: 2px dashed #f59e0b !important;\n background: rgba(245, 158, 11, 0.05) !important;\n }\n\n /* 반응형 숨김 - flex 유지 */\n [data-editor-mode] .flex.sm\\:hidden,\n [data-editor-mode] .flex.md\\:hidden,\n [data-editor-mode] .flex.lg\\:hidden,\n [data-editor-mode] .flex.xl\\:hidden {\n display: flex !important;\n opacity: 0.5 !important;\n border: 2px dashed #3b82f6 !important;\n }\n\n /* 반응형 숨김 - grid 유지 */\n [data-editor-mode] .grid.sm\\:hidden,\n [data-editor-mode] .grid.md\\:hidden,\n [data-editor-mode] .grid.lg\\:hidden,\n [data-editor-mode] .grid.xl\\:hidden {\n display: grid !important;\n opacity: 0.5 !important;\n border: 2px dashed #3b82f6 !important;\n }\n\n /* 반응형 숨김 - inline-flex 유지 */\n [data-editor-mode] .inline-flex.sm\\:hidden,\n [data-editor-mode] .inline-flex.md\\:hidden,\n [data-editor-mode] .inline-flex.lg\\:hidden,\n [data-editor-mode] .inline-flex.xl\\:hidden {\n display: inline-flex !important;\n opacity: 0.5 !important;\n border: 2px dashed #3b82f6 !important;\n }\n\n /* 반응형 숨김 - 기본 (flex/grid 아닌 경우) */\n [data-editor-mode] .sm\\:hidden:not(.flex):not(.grid):not(.inline-flex),\n [data-editor-mode] .md\\:hidden:not(.flex):not(.grid):not(.inline-flex),\n [data-editor-mode] .lg\\:hidden:not(.flex):not(.grid):not(.inline-flex),\n [data-editor-mode] .xl\\:hidden:not(.flex):not(.grid):not(.inline-flex) {\n display: block !important;\n opacity: 0.5 !important;\n border: 2px dashed #3b82f6 !important;\n }\n}\n"],"mappings":";AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/index.d.mts ADDED Viewed

@@ -0,0 +1,248 @@
+import { n as Section } from "./index-DdSjzvA3.mjs";
+import "@jbpark/ui-kit/style.css";
+import React$1, { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Extension } from "@uiw/react-codemirror";
+//#region src/components/Frame/IFrame/index.d.ts
+interface Props$8 {
+  title?: string;
+  /** Forwarded to the iframe's `sandbox` attribute for DOM/CSS isolation only — not a security boundary, since preview code executes in the host window's realm (see `compileModule` in `~/utils`). */
+  sandbox?: string;
+  style?: React.CSSProperties;
+  scripts?: string[];
+  styles?: string[];
+  stylesheets?: string[];
+  autoHeight?: boolean;
+  syncStyle?: boolean;
+  children: (container: HTMLElement) => ReactNode;
+  onLoaded?: () => void;
+}
+//#endregion
+//#region src/components/Frame/index.d.ts
+interface FrameProps extends Omit<Props$8, 'children'> {
+  mode?: 'iframe' | 'shadow';
+}
+//#endregion
+//#region src/components/Preview/index.d.ts
+interface Props$7 extends React$1.ComponentPropsWithRef<'div'> {
+  code?: string;
+  showError?: boolean;
+  props?: Record<string, unknown>;
+  container?: HTMLElement | null;
+  frame?: boolean | FrameProps;
+  modules?: Record<string, unknown>;
+  dynamicTailwind?: boolean;
+  provider?: (children: React$1.ReactNode) => React$1.ReactNode;
+}
+declare const Preview: ({
+  code,
+  props,
+  modules,
+  dynamicTailwind,
+  provider,
+  ...restProps
+}: Props$7) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/Error/Runtime/index.d.ts
+interface Props$6 extends React.ComponentPropsWithRef<'div'> {
+  open?: boolean;
+  reset?: () => void;
+}
+//#endregion
+//#region src/components/Error/Guard/index.d.ts
+interface Props$5 {
+  children: React.ReactNode;
+  onError?: (error: Error) => void;
+}
+//#endregion
+//#region src/components/Error/Boundary/index.d.ts
+interface Props$4 {
+  children: React$1.ReactNode;
+  fallback?: (message?: string) => React$1.ReactNode;
+  onError?: (e: Error, info: React$1.ErrorInfo) => void;
+}
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+declare class ErrorBoundary extends React$1.Component<Props$4, State> {
+  constructor(props: Props$4);
+  static getDerivedStateFromError(error: Error): State;
+  componentDidCatch(error: Error, errorInfo: React$1.ErrorInfo): void;
+  render(): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
+}
+//#endregion
+//#region src/components/Error/index.d.ts
+interface Props$3 extends React.ComponentPropsWithRef<'div'> {
+  message?: string | null;
+  title?: string;
+  onReset?: () => void;
+}
+declare const Error$1: {
+  ({
+    message,
+    title,
+    className,
+    onReset
+  }: Props$3): react_jsx_runtime0.JSX.Element | null;
+  Boundary: typeof ErrorBoundary;
+  Runtime: ({
+    open,
+    reset
+  }: Props$6) => react_jsx_runtime0.JSX.Element | null;
+  Guard: ({
+    children,
+    onError
+  }: Props$5) => react_jsx_runtime0.JSX.Element;
+};
+//#endregion
+//#region src/components/Editor/Core/index.d.ts
+interface Props$2 {
+  value: string;
+  height?: string;
+  theme?: Extension | 'light' | 'dark' | 'none';
+  prettierOptions?: Record<string, unknown>;
+  fragment?: boolean;
+  raw?: boolean;
+  className?: string;
+  onChange?: (value: string) => void;
+  onSave?: (value: string) => void;
+  onError?: (error: string | null) => void;
+}
+//#endregion
+//#region src/components/Editor/index.d.ts
+interface Props$1 extends Omit<Props$2, 'onSave' | 'onError'> {
+  defaultValue?: string;
+  debounce?: number;
+}
+declare const Editor: {
+  ({
+    defaultValue,
+    value: _value,
+    debounce,
+    onChange: _onChange,
+    ...props
+  }: Props$1): react_jsx_runtime0.JSX.Element;
+  Core: ({
+    value,
+    theme,
+    height,
+    className,
+    prettierOptions,
+    fragment,
+    raw,
+    onChange,
+    onSave: _onSave,
+    onError,
+    ...props
+  }: Props$2) => react_jsx_runtime0.JSX.Element;
+};
+//#endregion
+//#region src/components/Dnd/index.d.ts
+interface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'onChange'> {
+  value?: string;
+  props?: Record<string, unknown>;
+  modules?: Record<string, unknown>;
+  items?: Section[];
+  frame?: FrameProps;
+  provider?: (children: React.ReactNode) => React.ReactNode;
+  onChange?: (value: string) => void;
+}
+declare const Dnd: ({
+  value: _value,
+  props,
+  modules,
+  onChange: _onChange,
+  className,
+  items,
+  frame,
+  provider,
+  ...restProps
+}: Props) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/index.d.ts
+declare const App: {
+  ({
+    children
+  }: {
+    children?: React.ReactNode;
+  }): react_jsx_runtime0.JSX.Element;
+  Preview: ({
+    code,
+    props,
+    modules,
+    dynamicTailwind,
+    provider,
+    ...restProps
+  }: Props$7) => react_jsx_runtime0.JSX.Element;
+  Renderer: ({
+    code,
+    props,
+    modules,
+    dynamicTailwind,
+    provider,
+    ...restProps
+  }: Props$7) => react_jsx_runtime0.JSX.Element;
+  Error: {
+    ({
+      message,
+      title,
+      className,
+      onReset
+    }: Props$3): react_jsx_runtime0.JSX.Element | null;
+    Boundary: typeof ErrorBoundary;
+    Runtime: ({
+      open,
+      reset
+    }: Props$6) => react_jsx_runtime0.JSX.Element | null;
+    Guard: ({
+      children,
+      onError
+    }: Props$5) => react_jsx_runtime0.JSX.Element;
+  };
+  Editor: {
+    ({
+      defaultValue,
+      value: _value,
+      debounce,
+      onChange: _onChange,
+      ...props
+    }: Props$1): react_jsx_runtime0.JSX.Element;
+    Core: ({
+      value,
+      theme,
+      height,
+      className,
+      prettierOptions,
+      fragment,
+      raw,
+      onChange,
+      onSave: _onSave,
+      onError,
+      ...props
+    }: Props$2) => react_jsx_runtime0.JSX.Element;
+  };
+  Dnd: ({
+    value: _value,
+    props,
+    modules,
+    onChange: _onChange,
+    className,
+    items,
+    frame,
+    provider,
+    ...restProps
+  }: Props) => react_jsx_runtime0.JSX.Element;
+};
+declare const LiveRenderer: ({
+  code,
+  props,
+  modules,
+  dynamicTailwind,
+  provider,
+  ...restProps
+}: Props$7) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Dnd as LiveDnd, Editor as LiveEditor, Error$1 as LiveError, Preview as LivePreview, App as LiveProvider, App as default, LiveRenderer };
+//# sourceMappingURL=index.d.mts.map