@jbpark/live-editor 4.1.0 → 4.2.0

package/dist/constants-CKvdqZtO.js

@@ -0,0 +1,1457 @@
+//#region src/constants/index.ts
+const CONFIG = {
+	CACHE_LIMIT: 50,
+	DOCUMENT_CACHE_LIMIT: 4,
+	SCRIPT_CACHE_LIMIT: 10
+};
+const DATA_ATTR = {
+	ID: "data-id",
+	BINDING: "data-binding",
+	ITEM: "data-item"
+};
+const RESERVED_BINDING_PROPERTIES = [
+	DATA_ATTR.ID,
+	"data-name",
+	DATA_ATTR.BINDING
+];
+const REGEX = {
+	NUMBER: /^\d+(\.\d+)?$/,
+	BOOLEAN_OR_NULL: /^(true|false|null|undefined)$/,
+	MODULE_IMPORT_EXPORT_LINE: /^\s*(?:import|export)\b[^\n]*\bfrom\s+['"][^'"]*['"];?\s*$/gm
+};
+const TS_PATTERNS = [
+	/interface\s+\w+/,
+	/type\s+\w+\s*=/,
+	/:\s*\w+(\[\])?(\s*\||\s*&|\s*=|\s*;|\s*,|\s*\))/,
+	/as\s+\w+/,
+	/<[A-Z]\w*>/,
+	/enum\s+\w+/,
+	/public\s+|private\s+|protected\s+/,
+	/readonly\s+/,
+	/\?\s*:/
+];
+const BINDING_PROP = {
+	CHILDREN: "children",
+	INNER_TEXT: "innerText",
+	INNER_HTML: "innerHTML",
+	ITEMS: "items"
+};
+const DEFAULT_CONTAINER_ID = "app-container";
+const documentTemplate = (containerId) => `
+import * as ui from 'ui-kit';
+import { cn } from 'ui-kit/utils';
+
+const App = () => {
+  return (
+    <main id="${containerId}"></main>
+  )
+}
+
+export default App;
+`;
+const DEFAULT_TEMPLATE = documentTemplate(DEFAULT_CONTAINER_ID);
+const DRAGGABLE_ITEMS = [
+	{
+		id: "hero",
+		name: "Hero",
+		code: `
+      <section
+        data-name="Hero"
+        className={cn(
+          'text-center text-white',
+          //
+        )}
+      >
+        <ui.Space
+          data-id=""
+          data-binding={[
+            {
+              label: 'Background Style',
+              property: 'style',
+              type: 'object',
+              // Types the keys inside the object value; a leaf takes the same
+              // fields as a top-level binding.
+              render: {
+                backgroundColor: { type: 'color', label: 'Background Color' },
+              },
+              // Not a library field, so it arrives as meta.group.
+              group: 'layout',
+            },
+            {
+              label: 'Content Spacing',
+              property: 'size',
+              type: 'number',
+              // Constraints the library validates with or without a widget.
+              min: 0,
+              max: 40,
+              // Presentation only: the built-in panel ignores it and shows a
+              // number input; a custom panel can switch on widget.type.
+              widget: { type: 'slider', step: 4, unit: 'px' },
+              group: 'layout',
+            },
+          ]}
+          style={{
+            backgroundColor: '#6366f1',
+          }}
+          orientation="vertical"
+          size={16}
+          align="center"
+          className={cn(
+            'px-5 py-15',
+            //
+          )}
+        >
+          <h1
+            data-id=""
+            data-binding={[
+              {
+                label: 'Title',
+                property: 'innerText',
+                type: 'string',
+                required: true,
+              },
+            ]}
+            className={cn(
+              'text-5xl font-bold',
+              //
+            )}
+          >
+            Welcome to Live Editor
+          </h1>
+          <p
+            data-id=""
+            data-binding={[
+              {
+                label: 'Description',
+                type: 'richtext',
+              },
+            ]}
+            className={cn(
+              'text-xl',
+              //
+            )}
+          >
+            Build <strong>dynamic components</strong> with drag & drop
+          </p>
+          <ui.Button
+            data-id=""
+            data-binding={[
+              {
+                label: 'Button Text',
+                property: 'innerText',
+              },
+              {
+                label: 'Button Icon',
+                property: 'icon',
+                type: 'jsx',
+              },
+              {
+                label: 'Button Size',
+                property: 'size',
+                options: [
+                  { label: 'Small', value: 'small' },
+                  { label: 'Middle', value: 'middle' },
+                  { label: 'Large', value: 'large' },
+                ],
+              },
+              {
+                label: 'Button Variant',
+                property: 'variant',
+                options: [
+                  { label: 'Solid', value: 'solid' },
+                  { label: 'Outlined', value: 'outlined' },
+                  { label: 'Filled', value: 'filled' },
+                ],
+              },
+            ]}
+            icon={<span>🚀</span>}
+            size="large"
+            variant="solid"
+            className={cn(
+              'bg-white text-indigo-500',
+              'hover:bg-gray-50',
+              //
+            )}
+          >
+            Get Started
+          </ui.Button>
+        </ui.Space>
+      </section>
+    `
+	},
+	{
+		id: "features",
+		name: "Features",
+		code: `
+      <section
+        data-name="Features"
+        className={cn(
+          'px-5 py-10',
+          //
+        )}
+      >
+        <ui.Space
+          data-id=""
+          data-binding={[
+            {
+              label: 'Feature Cards',
+              property: 'children',
+            },
+          ]}
+          className={cn(
+            'mx-auto max-w-7xl',
+            //
+          )}
+          size="large"
+          wrap
+        >
+          <ui.Card
+            className={cn(
+              'min-w-70 flex-1 text-center',
+              //
+            )}
+          >
+            <ui.Space orientation="vertical" size="middle" align="center">
+              <div
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Icon',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'text-5xl',
+                  //
+                )}
+              >
+                🚀
+              </div>
+              <h3
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Title',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'text-2xl text-gray-800',
+                  //
+                )}
+              >
+                Feature 1
+              </h3>
+              <p
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Description',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'text-gray-600',
+                  //
+                )}
+              >
+                Amazing feature description
+              </p>
+            </ui.Space>
+          </ui.Card>
+          <ui.Card
+            className={cn(
+              'min-w-70 flex-1 text-center',
+              //
+            )}
+          >
+            <ui.Space orientation="vertical" size="middle" align="center">
+              <div
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Icon',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'text-5xl',
+                  //
+                )}
+              >
+                ⚡
+              </div>
+              <h3
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Title',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'text-2xl text-gray-800',
+                  //
+                )}
+              >
+                Feature 2
+              </h3>
+              <p
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Description',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'text-gray-600',
+                  //
+                )}
+              >
+                Another great feature
+              </p>
+            </ui.Space>
+          </ui.Card>
+          <ui.Card
+            className={cn(
+              'min-w-70 flex-1 text-center',
+              //
+            )}
+          >
+            <ui.Space orientation="vertical" size="middle" align="center">
+              <div
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Icon',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'text-5xl',
+                  //
+                )}
+              >
+                ✨
+              </div>
+              <h3
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Title',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'text-2xl text-gray-800',
+                  //
+                )}
+              >
+                Feature 3
+              </h3>
+              <p
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Description',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'text-gray-600',
+                  //
+                )}
+              >
+                One more awesome thing
+              </p>
+            </ui.Space>
+          </ui.Card>
+        </ui.Space>
+      </section>
+    `
+	},
+	{
+		id: "about",
+		name: "About",
+		code: `
+      <section
+        data-name="About"
+        className={cn(
+          'mx-auto max-w-3xl px-5 py-10',
+          //
+        )}
+      >
+        <ui.Typography.Title
+          data-id=""
+          data-binding={[{ label: 'Title', property: 'innerText' }]}
+          level={2}
+          className={cn(
+            'mb-5 text-4xl text-gray-800',
+            //
+          )}
+        >
+          About Live Editor
+        </ui.Typography.Title>
+        <ui.Typography.Paragraph
+          data-id=""
+          data-binding={[
+            {
+              label: 'Description 1',
+              type: 'richtext',
+            },
+          ]}
+          className={cn(
+            'mb-4 text-lg leading-relaxed text-gray-600',
+            //
+          )}
+        >
+          Live Editor is a powerful visual development tool that enables you to
+          create stunning web interfaces through an intuitive drag-and-drop
+          experience. Built with modern web technologies, it streamlines your
+          workflow and accelerates development cycles.
+        </ui.Typography.Paragraph>
+        <ui.Typography.Paragraph
+          data-id=""
+          data-binding={[
+            {
+              label: 'Description 2',
+              type: 'richtext',
+            },
+          ]}
+          className={cn(
+            'text-lg leading-relaxed text-gray-600',
+            //
+          )}
+        >
+          Whether you&apos;re a seasoned developer or just starting out, Live
+          Editor provides the flexibility and control you need to bring your
+          creative vision to life. Focus on what matters most - building great
+          products.
+        </ui.Typography.Paragraph>
+      </section>
+    `
+	},
+	{
+		id: "cta",
+		name: "CTA",
+		code: `
+      <section
+        data-name="CTA"
+        className={cn(
+          'bg-gray-50 px-5 py-12 text-center',
+          //
+        )}
+      >
+        <div
+          className={cn(
+            'mx-auto max-w-xl',
+            //
+          )}
+        >
+          <ui.Typography.Title
+            data-id=""
+            data-binding={[{ label: 'Title', property: 'innerText' }]}
+            level={2}
+            className={cn(
+              'mb-4 text-3xl text-gray-800',
+              //
+            )}
+          >
+            Ready to get started?
+          </ui.Typography.Title>
+          <ui.Typography.Paragraph
+            data-id=""
+            data-binding={[
+              {
+                label: 'Description',
+                property: 'innerText',
+              },
+            ]}
+            className={cn(
+              'mb-6 text-lg text-gray-600',
+              //
+            )}
+          >
+            Start exploring what Live Editor can do for your projects
+          </ui.Typography.Paragraph>
+          <ui.Space
+            data-id=""
+            data-binding={[{ label: 'Buttons', property: 'children' }]}
+            className={cn(
+              'flex flex-wrap justify-center gap-4',
+              //
+            )}
+          >
+            <ui.Button
+              data-id=""
+              data-binding={[
+                {
+                  label: 'Button 1 Text',
+                  property: 'innerText',
+                },
+              ]}
+              size="large"
+              className={cn(
+                'bg-indigo-500 px-8 text-base text-white',
+                'hover:bg-indigo-600',
+                //
+              )}
+            >
+              View Documentation
+            </ui.Button>
+            <ui.Button
+              data-id=""
+              data-binding={[
+                {
+                  label: 'Button 2 Text',
+                  property: 'innerText',
+                },
+              ]}
+              variant="outlined"
+              size="large"
+              className={cn(
+                'border-2 border-indigo-500 px-8 text-base text-indigo-500',
+                'hover:bg-indigo-50',
+                //
+              )}
+            >
+              View Examples
+            </ui.Button>
+          </ui.Space>
+        </div>
+      </section>
+    `
+	},
+	{
+		id: "getting-started",
+		name: "Getting Started",
+		code: `
+      <section
+        data-name="Getting Started"
+        className={cn(
+          'px-5 py-16',
+          //
+        )}
+      >
+        <div
+          className={cn(
+            'mx-auto max-w-5xl',
+            //
+          )}
+        >
+          <ui.Typography.Title
+            data-id=""
+            data-binding={[{ label: 'Title', property: 'innerText' }]}
+            level={2}
+            className={cn(
+              'mb-12 text-center text-4xl font-bold text-gray-800',
+              //
+            )}
+          >
+            How to Get Started
+          </ui.Typography.Title>
+          <div
+            className={cn(
+              'grid gap-8 md:grid-cols-3',
+              //
+            )}
+          >
+            <ui.Card
+              data-id=""
+              data-binding={[
+                {
+                  label: 'Card 1 Content',
+                  property: 'children',
+                },
+              ]}
+              className={cn(
+                'rounded-lg border-2 border-gray-200 bg-white p-8',
+                //
+              )}
+            >
+              <ui.Typography.Title
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Card 1 Title',
+                    property: 'innerText',
+                  },
+                ]}
+                level={3}
+                className={cn(
+                  'mb-2 text-2xl font-bold text-gray-800',
+                  //
+                )}
+              >
+                Explore
+              </ui.Typography.Title>
+              <ui.Typography.Paragraph
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Card 1 Icon',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'mb-6 text-4xl font-bold text-indigo-600',
+                  //
+                )}
+              >
+                📚
+              </ui.Typography.Paragraph>
+              <ul
+                className={cn(
+                  'mb-8 space-y-3 text-gray-600',
+                  //
+                )}
+              >
+                <li>✓ Read documentation</li>
+                <li>✓ Browse examples</li>
+                <li>✓ Try the demo</li>
+              </ul>
+              <ui.Button
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Card 1 Button',
+                    property: 'innerText',
+                  },
+                ]}
+                variant="outlined"
+                size="large"
+                block
+                className={cn(
+                  'border-2 border-indigo-500 text-indigo-500',
+                  'hover:bg-indigo-50',
+                  //
+                )}
+              >
+                View Docs
+              </ui.Button>
+            </ui.Card>
+            <ui.Card
+              data-id=""
+              data-binding={[
+                {
+                  label: 'Card 2 Content',
+                  property: 'children',
+                },
+              ]}
+              className={cn(
+                'relative rounded-lg border-2 border-indigo-500 bg-white p-8',
+                //
+              )}
+            >
+              <div
+                className={cn(
+                  'absolute -top-4 left-1/2 -translate-x-1/2',
+                  'rounded-full bg-indigo-500 px-4 py-1 text-sm text-white',
+                  //
+                )}
+              >
+                Recommended
+              </div>
+              <ui.Typography.Title
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Card 2 Title',
+                    property: 'innerText',
+                  },
+                ]}
+                level={3}
+                className={cn(
+                  'mb-2 text-2xl font-bold text-gray-800',
+                  //
+                )}
+              >
+                Practice
+              </ui.Typography.Title>
+              <ui.Typography.Paragraph
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Card 2 Icon',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'mb-6 text-4xl font-bold text-indigo-600',
+                  //
+                )}
+              >
+                💻
+              </ui.Typography.Paragraph>
+              <ul
+                className={cn(
+                  'mb-8 space-y-3 text-gray-600',
+                  //
+                )}
+              >
+                <li>✓ Interactive playground</li>
+                <li>✓ Experiment freely</li>
+                <li>✓ Build your own</li>
+              </ul>
+              <ui.Button
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Card 2 Button',
+                    property: 'innerText',
+                  },
+                ]}
+                size="large"
+                block
+                className={cn(
+                  'bg-indigo-500 text-white',
+                  'hover:bg-indigo-600',
+                  //
+                )}
+              >
+                Start Building
+              </ui.Button>
+            </ui.Card>
+            <ui.Card
+              data-id=""
+              data-binding={[
+                {
+                  label: 'Card 3 Content',
+                  property: 'children',
+                },
+              ]}
+              className={cn(
+                'rounded-lg border-2 border-gray-200 bg-white p-8',
+                //
+              )}
+            >
+              <ui.Typography.Title
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Card 3 Title',
+                    property: 'innerText',
+                  },
+                ]}
+                level={3}
+                className={cn(
+                  'mb-2 text-2xl font-bold text-gray-800',
+                  //
+                )}
+              >
+                Contribute
+              </ui.Typography.Title>
+              <ui.Typography.Paragraph
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Card 3 Icon',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'mb-6 text-4xl font-bold text-indigo-600',
+                  //
+                )}
+              >
+                🤝
+              </ui.Typography.Paragraph>
+              <ul
+                className={cn(
+                  'mb-8 space-y-3 text-gray-600',
+                  //
+                )}
+              >
+                <li>✓ Report issues</li>
+                <li>✓ Suggest features</li>
+                <li>✓ Submit pull requests</li>
+              </ul>
+              <ui.Button
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Card 3 Button',
+                    property: 'innerText',
+                  },
+                ]}
+                variant="outlined"
+                size="large"
+                block
+                className={cn(
+                  'border-2 border-indigo-500 text-indigo-500',
+                  'hover:bg-indigo-50',
+                  //
+                )}
+              >
+                View on GitHub
+              </ui.Button>
+            </ui.Card>
+          </div>
+        </div>
+      </section>
+    `
+	},
+	{
+		id: "key-features",
+		name: "Key Features",
+		code: `
+      <section
+        data-name="Key Features"
+        className={cn(
+          'bg-indigo-50 px-5 py-16',
+          //
+        )}
+      >
+        <div
+          className={cn(
+            'mx-auto max-w-6xl',
+            //
+          )}
+        >
+          <h2
+            data-id=""
+            data-binding={[{ label: 'Title', property: 'innerText' }]}
+            className={cn(
+              'mb-12 text-center text-4xl font-bold text-gray-800',
+              //
+            )}
+          >
+            Key Features
+          </h2>
+          <div
+            className={cn(
+              'grid gap-8 md:grid-cols-2',
+              //
+            )}
+          >
+            <div
+              className={cn(
+                'rounded-lg bg-white p-8 shadow-md',
+                //
+              )}
+            >
+              <div
+                className={cn(
+                  'mb-4 text-4xl',
+                  //
+                )}
+              >
+                🎨
+              </div>
+              <h3
+                className={cn(
+                  'mb-4 text-2xl font-bold text-gray-800',
+                  //
+                )}
+              >
+                Visual Editing
+              </h3>
+              <p
+                className={cn(
+                  'text-gray-600',
+                  //
+                )}
+              >
+                See your changes in real-time as you build. Live Editor provides
+                instant visual feedback, making it easier to understand how code
+                affects your interface.
+              </p>
+            </div>
+            <div
+              className={cn(
+                'rounded-lg bg-white p-8 shadow-md',
+                //
+              )}
+            >
+              <div
+                className={cn(
+                  'mb-4 text-4xl',
+                  //
+                )}
+              >
+                🧩
+              </div>
+              <h3
+                className={cn(
+                  'mb-4 text-2xl font-bold text-gray-800',
+                  //
+                )}
+              >
+                Component-Based
+              </h3>
+              <p
+                className={cn(
+                  'text-gray-600',
+                  //
+                )}
+              >
+                Build with reusable components that you can drag, drop, and
+                customize. Learn modern development patterns while creating your
+                interface.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    `
+	},
+	{
+		id: "stats",
+		name: "Stats",
+		code: `
+      <section
+        data-name="Stats"
+        className={cn(
+          'bg-indigo-600 text-white',
+          //
+        )}
+      >
+        <ui.Marquees
+          data-id=""
+          data-binding={[
+            { label: 'Stats Items', property: 'items' },
+            {
+              label: 'Scroll Speed',
+              property: 'speed',
+              type: 'number',
+              min: 20,
+              max: 300,
+              // The bare-string form; it arrives as { type: 'slider' }.
+              widget: 'slider',
+            },
+            { label: 'Pause On Hover', property: 'pauseOnHover', type: 'boolean' },
+          ]}
+          speed={100}
+          pauseOnHover={true}
+          autoFill={true}
+          className="px-5 py-16"
+          items={[
+            {
+              key: 'stats-row',
+              children: (
+                <div
+                  data-id=""
+                  data-binding={[
+                    {
+                      label: 'Stats Cards',
+                      property: 'children',
+                    },
+                  ]}
+                  className={cn('flex gap-20')}
+                >
+                  <div
+                    className={cn(
+                      'min-w-60 text-center',
+                      //
+                    )}
+                  >
+                    <p
+                      data-id=""
+                      data-binding={[
+                        {
+                          label: 'Title',
+                          property: 'innerText',
+                        },
+                      ]}
+                      className={cn(
+                        'mb-2 text-5xl font-bold',
+                        //
+                      )}
+                    >
+                      Open
+                    </p>
+                    <p
+                      data-id=""
+                      data-binding={[
+                        {
+                          label: 'Description',
+                          property: 'innerText',
+                        },
+                      ]}
+                      className={cn(
+                        'text-indigo-200',
+                        //
+                      )}
+                    >
+                      Source Project
+                    </p>
+                  </div>
+                  <div
+                    className={cn(
+                      'min-w-60 text-center',
+                      //
+                    )}
+                  >
+                    <p
+                      data-id=""
+                      data-binding={[
+                        {
+                          label: 'Title',
+                          property: 'innerText',
+                        },
+                      ]}
+                      className={cn(
+                        'mb-2 text-5xl font-bold',
+                        //
+                      )}
+                    >
+                      Free
+                    </p>
+                    <p
+                      data-id=""
+                      data-binding={[
+                        {
+                          label: 'Description',
+                          property: 'innerText',
+                        },
+                      ]}
+                      className={cn(
+                        'text-indigo-200',
+                        //
+                      )}
+                    >
+                      For Everyone
+                    </p>
+                  </div>
+                  <div
+                    className={cn(
+                      'min-w-60 text-center',
+                      //
+                    )}
+                  >
+                    <p
+                      data-id=""
+                      data-binding={[
+                        {
+                          label: 'Title',
+                          property: 'innerText',
+                        },
+                      ]}
+                      className={cn(
+                        'mb-2 text-5xl font-bold',
+                        //
+                      )}
+                    >
+                      Active
+                    </p>
+                    <p
+                      data-id=""
+                      data-binding={[
+                        {
+                          label: 'Description',
+                          property: 'innerText',
+                        },
+                      ]}
+                      className={cn(
+                        'text-indigo-200',
+                        //
+                      )}
+                    >
+                      Community
+                    </p>
+                  </div>
+                  <div
+                    className={cn(
+                      'min-w-60 text-center',
+                      //
+                    )}
+                  >
+                    <p
+                      data-id=""
+                      data-binding={[
+                        {
+                          label: 'Title',
+                          property: 'innerText',
+                        },
+                      ]}
+                      className={cn(
+                        'mb-2 text-5xl font-bold',
+                        //
+                      )}
+                    >
+                      Learn
+                    </p>
+                    <p
+                      data-id=""
+                      data-binding={[
+                        {
+                          label: 'Description',
+                          property: 'innerText',
+                        },
+                      ]}
+                      className={cn(
+                        'text-indigo-200',
+                        //
+                      )}
+                    >
+                      By Doing
+                    </p>
+                  </div>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </section>
+    `
+	},
+	{
+		id: "roadmap",
+		name: "Roadmap",
+		code: `
+      <section
+        data-name="Roadmap"
+        className={cn(
+          'px-5 py-16',
+          //
+        )}
+      >
+        <div
+          className={cn(
+            'mx-auto max-w-3xl',
+            //
+          )}
+        >
+          <h2
+            data-id=""
+            data-binding={[
+              { label: 'Title', property: 'innerText', required: true },
+            ]}
+            className={cn(
+              'mb-8 text-center text-4xl font-bold text-gray-800',
+              //
+            )}
+          >
+            Roadmap
+          </h2>
+          <ui.List
+            data-id=""
+            data-binding={[
+              {
+                label: 'Milestones',
+                property: 'data',
+                type: 'array',
+                // One leaf per item key. Each leaf takes the same fields as a
+                // top-level binding, and label falls back to the key.
+                render: {
+                  title: {
+                    type: 'string',
+                    label: 'Title',
+                    required: true,
+                  },
+                  date: { type: 'date', label: 'Release Date', required: true },
+                  status: {
+                    type: 'string',
+                    label: 'Status',
+                    options: [
+                      { label: 'Planned', value: 'planned' },
+                      { label: 'In Progress', value: 'in-progress' },
+                      { label: 'Shipped', value: 'shipped' },
+                    ],
+                  },
+                  progress: {
+                    type: 'number',
+                    label: 'Progress',
+                    min: 0,
+                    max: 100,
+                    widget: { type: 'slider', step: 10, unit: '%' },
+                  },
+                  color: { type: 'color', label: 'Accent Color' },
+                  highlight: { type: 'boolean', label: 'Highlight' },
+                  // An object-valued key: its own render map types the keys
+                  // inside it, one level further down.
+                  link: {
+                    type: 'object',
+                    label: 'Link',
+                    render: {
+                      text: { type: 'string', label: 'Link Text' },
+                      href: {
+                        type: 'url',
+                        label: 'Link URL',
+                        pattern: '^https://',
+                        // Not a library field, so it arrives as meta.hint.
+                        hint: 'Must use https',
+                      },
+                    },
+                  },
+                },
+              },
+            ]}
+            data={[
+              {
+                title: 'Visual editing',
+                date: '2026-03-02',
+                status: 'shipped',
+                progress: 100,
+                color: '#22c55e',
+                highlight: false,
+                link: { text: 'Release notes', href: 'https://github.com' },
+              },
+              {
+                title: 'Custom panels',
+                date: '2026-09-26',
+                status: 'in-progress',
+                progress: 60,
+                color: '#6366f1',
+                highlight: true,
+                link: { text: 'Guide', href: 'https://github.com' },
+              },
+              {
+                title: 'Collaboration',
+                date: '2027-01-15',
+                status: 'planned',
+                progress: 0,
+                color: '#f59e0b',
+                highlight: false,
+                link: { text: 'Discussion', href: 'https://github.com' },
+              },
+            ]}
+            itemKey={item => item.title}
+            renderItem={item => (
+              <div
+                className={cn(
+                  'flex items-center gap-4 border-b border-gray-100 py-4',
+                  item.highlight && 'rounded-lg bg-indigo-50 px-4',
+                )}
+              >
+                <span
+                  className="size-3 shrink-0 rounded-full"
+                  style={{ backgroundColor: item.color }}
+                />
+                <div className="min-w-0 flex-1">
+                  <p className="font-semibold text-gray-800">{item.title}</p>
+                  <p className="text-sm text-gray-500">
+                    {item.date} · {item.status}
+                  </p>
+                  <ui.Progress value={item.progress} className="mt-2" />
+                </div>
+                <a
+                  href={item.link.href}
+                  className="text-sm text-indigo-500 hover:underline"
+                >
+                  {item.link.text}
+                </a>
+              </div>
+            )}
+          />
+          <p
+            className={cn(
+              'mt-6 text-center text-sm text-gray-500',
+              //
+            )}
+          >
+            Last updated{' '}
+            <time
+              data-id=""
+              data-binding={[
+                {
+                  label: 'Updated On',
+                  property: 'dateTime',
+                  type: 'date',
+                  required: true,
+                },
+                { label: 'Updated Text', property: 'innerText' },
+              ]}
+              dateTime="2026-09-26"
+            >
+              September 26, 2026
+            </time>
+            {' · '}
+            <a
+              data-id=""
+              data-binding={[
+                { label: 'Link Text', property: 'innerText' },
+                {
+                  label: 'Link URL',
+                  property: 'href',
+                  type: 'url',
+                  required: true,
+                  pattern: '^https://',
+                },
+              ]}
+              href="https://github.com/pjb0811/live-editor/releases"
+              className="text-indigo-500 hover:underline"
+            >
+              All releases
+            </a>
+          </p>
+        </div>
+      </section>
+    `
+	},
+	{
+		id: "faq",
+		name: "FAQ",
+		code: `
+      <section
+        data-name="FAQ"
+        className={cn(
+          'px-5 py-16',
+          //
+        )}
+      >
+        <div
+          className={cn(
+            'mx-auto max-w-3xl',
+            //
+          )}
+        >
+          <ui.Typography.Title
+            data-id=""
+            data-binding={[{ label: 'Title', property: 'innerText' }]}
+            level={2}
+            className={cn(
+              'mb-12 text-center text-4xl font-bold text-gray-800',
+              //
+            )}
+          >
+            Frequently Asked Questions
+          </ui.Typography.Title>
+          <ui.Collapse
+            data-id=""
+            data-binding={[{ label: 'FAQ Items', property: 'items' }]}
+            items={[
+              {
+                key: '1',
+                label: (
+                  <ui.Typography.Text
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Question 1',
+                        property: 'innerText',
+                      },
+                    ]}
+                    className={cn('text-lg font-semibold text-gray-800')}
+                  >
+                    What is Live Editor?
+                  </ui.Typography.Text>
+                ),
+                children: (
+                  <ui.Typography.Paragraph
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Answer 1',
+                        type: 'richtext',
+                      },
+                    ]}
+                    className={cn('text-gray-600')}
+                  >
+                    Live Editor is an open-source tool for building web
+                    interfaces visually. It helps you learn web development by
+                    providing instant feedback as you build components.
+                  </ui.Typography.Paragraph>
+                ),
+              },
+              {
+                key: '2',
+                label: (
+                  <ui.Typography.Text
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Question 2',
+                        property: 'innerText',
+                      },
+                    ]}
+                    className={cn('text-lg font-semibold text-gray-800')}
+                  >
+                    Do I need coding experience?
+                  </ui.Typography.Text>
+                ),
+                children: (
+                  <ui.Typography.Paragraph
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Answer 2',
+                        type: 'richtext',
+                      },
+                    ]}
+                    className={cn('text-gray-600')}
+                  >
+                    No! Live Editor is designed for all skill levels. Beginners
+                    can learn through visual editing, while experienced
+                    developers can work directly with code.
+                  </ui.Typography.Paragraph>
+                ),
+              },
+              {
+                key: '3',
+                label: (
+                  <ui.Typography.Text
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Question 3',
+                        property: 'innerText',
+                      },
+                    ]}
+                    className={cn('text-lg font-semibold text-gray-800')}
+                  >
+                    Is it really free?
+                  </ui.Typography.Text>
+                ),
+                children: (
+                  <ui.Typography.Paragraph
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Answer 3',
+                        type: 'richtext',
+                      },
+                    ]}
+                    className={cn('text-gray-600')}
+                  >
+                    Yes, completely free! Live Editor is an open-source project
+                    with no hidden costs or premium tiers. All features are
+                    available to everyone.
+                  </ui.Typography.Paragraph>
+                ),
+              },
+              {
+                key: '4',
+                label: (
+                  <ui.Typography.Text
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Question 4',
+                        property: 'innerText',
+                      },
+                    ]}
+                    className={cn('text-lg font-semibold text-gray-800')}
+                  >
+                    How can I contribute?
+                  </ui.Typography.Text>
+                ),
+                children: (
+                  <ui.Typography.Paragraph
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Answer 4',
+                        type: 'richtext',
+                      },
+                    ]}
+                    className={cn('text-gray-600')}
+                  >
+                    You can contribute by reporting bugs, suggesting features,
+                    sharing your projects, or contributing code. Check our
+                    GitHub repository for more details.
+                  </ui.Typography.Paragraph>
+                ),
+              },
+            ]}
+          />
+        </div>
+      </section>
+    `
+	}
+];
+//#endregion
+export { DEFAULT_TEMPLATE as a, RESERVED_BINDING_PROPERTIES as c, DEFAULT_CONTAINER_ID as i, TS_PATTERNS as l, CONFIG as n, DRAGGABLE_ITEMS as o, DATA_ATTR as r, REGEX as s, BINDING_PROP as t, documentTemplate as u };
+
+//# sourceMappingURL=constants-CKvdqZtO.js.map