@jbpark/live-editor 5.0.0 → 6.1.0

package/dist/ui-kit/index.js

@@ -0,0 +1,1552 @@
+import { n as createDocument } from "../sections-rD8NuRI8.js";
+import { i as getFieldKind, o as FieldError, t as useFieldState } from "../use-field-state-iQGW0vc6.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDebounce } from "@jbpark/use-hooks";
+import * as ui from "@jbpark/ui-kit";
+import { Checkbox, ColorPicker, DatePicker, RichTextEditor, Select, TimePicker } from "@jbpark/ui-kit";
+import * as utils from "@jbpark/ui-kit/utils";
+//#region src/components/ui-kit/document.ts
+const UI_KIT_IMPORTS = `
+import * as ui from 'ui-kit';
+import { cn } from 'ui-kit/utils';
+`;
+const createUiKitDocument = (options) => UI_KIT_IMPORTS + createDocument(options);
+//#endregion
+//#region src/components/ui-kit/modules.ts
+const uiKitModules = {
+	"ui-kit": ui,
+	"ui-kit/utils": utils
+};
+//#endregion
+//#region src/components/ui-kit/palette-sections.ts
+const uiKitPaletteSections = [
+	{
+		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
+//#region src/components/ui-kit/color-picker-field.tsx
+const COLOR_COMMIT_DELAY = 75;
+const normalizeToHex = (value) => {
+	const trimmed = value.trim();
+	if (/^#([0-9A-Fa-f]{3}){1,2}$/.test(trimmed)) return trimmed;
+	return "#000000";
+};
+const ColorPickerField = ({ value: source, onChange, label }) => {
+	const value = normalizeToHex(source);
+	const [liveValue, setLiveValue] = useState(value);
+	const [prevValue, setPrevValue] = useState(value);
+	const lastCommittedRef = useRef(value);
+	if (value !== prevValue) {
+		setPrevValue(value);
+		setLiveValue(value);
+	}
+	useEffect(() => {
+		lastCommittedRef.current = value;
+	}, [value]);
+	const commit = (next) => {
+		if (next === lastCommittedRef.current) return;
+		lastCommittedRef.current = next;
+		onChange(next);
+	};
+	const debouncedCommit = useDebounce(() => commit(liveValue), {
+		delay: COLOR_COMMIT_DELAY,
+		autoInvoke: false
+	});
+	return /* @__PURE__ */ jsx(ColorPicker, {
+		"aria-label": label,
+		showText: true,
+		value: liveValue,
+		onChange: (next) => {
+			setLiveValue(next);
+			debouncedCommit();
+		},
+		onOpenChange: (open) => {
+			if (!open) commit(liveValue);
+		}
+	});
+};
+//#endregion
+//#region src/components/ui-kit/date-value.ts
+const parseDateValue = (value) => {
+	const match = /^(\d{4})-(\d{2})-(\d{2})(?:T(\d{2}):(\d{2}))?$/.exec(value.trim());
+	if (!match) return;
+	const [, year, month, day, hours = "0", minutes = "0"] = match;
+	const date = new Date(Number(year), Number(month) - 1, Number(day), Number(hours), Number(minutes));
+	return Number.isNaN(date.getTime()) ? void 0 : date;
+};
+const pad = (value) => String(value).padStart(2, "0");
+const formatDateValue = (date, withTime = false) => {
+	const day = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+	return withTime ? `${day}T${pad(date.getHours())}:${pad(date.getMinutes())}` : day;
+};
+//#endregion
+//#region src/components/ui-kit/ui-kit-field.tsx
+const RICHTEXT_TOOLBAR = [
+	"bold",
+	"italic",
+	"underline",
+	"bulletList",
+	"orderedList",
+	"link"
+];
+const UiKitField = ({ binding }) => {
+	const { value, rawValue, onChange } = binding;
+	const { validationError, errorId, controlProps, labelledByProps, commitIfChanged, validateAndCommit } = useFieldState(binding);
+	const kind = getFieldKind(binding);
+	if (kind === "richtext") return /* @__PURE__ */ jsx(RichTextEditor, {
+		...labelledByProps,
+		value: rawValue,
+		toolbar: RICHTEXT_TOOLBAR,
+		onChange: commitIfChanged
+	});
+	if (kind === "boolean") return /* @__PURE__ */ jsx(Checkbox, {
+		...controlProps,
+		checked: value === true || value === "true",
+		onChange: (checked) => {
+			onChange(checked);
+		}
+	});
+	if (kind === "select") return /* @__PURE__ */ jsx(Select, {
+		...labelledByProps,
+		value: rawValue,
+		options: binding.options ?? [],
+		onChange: commitIfChanged
+	});
+	if (kind === "color") return /* @__PURE__ */ jsx(ColorPickerField, {
+		value: rawValue,
+		label: binding.label,
+		onChange: commitIfChanged
+	});
+	if (kind === "time") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(TimePicker, {
+		...controlProps,
+		value: rawValue || null,
+		onChange: (time) => validateAndCommit(time ?? "")
+	}), /* @__PURE__ */ jsx(FieldError, {
+		id: errorId,
+		message: validationError
+	})] });
+	const withTime = kind === "datetime";
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DatePicker, {
+		...controlProps,
+		value: parseDateValue(rawValue),
+		showTime: withTime,
+		onChange: (date) => validateAndCommit(date ? formatDateValue(date, withTime) : "")
+	}), /* @__PURE__ */ jsx(FieldError, {
+		id: errorId,
+		message: validationError
+	})] });
+};
+//#endregion
+//#region src/components/ui-kit/ui-kit-fields.tsx
+const UI_KIT_KINDS = /* @__PURE__ */ new Set([
+	"richtext",
+	"boolean",
+	"select",
+	"color",
+	"date",
+	"datetime",
+	"time"
+]);
+const uiKitFields = (props) => UI_KIT_KINDS.has(getFieldKind(props.binding)) ? /* @__PURE__ */ jsx(UiKitField, { ...props }) : void 0;
+//#endregion
+export { createUiKitDocument, uiKitFields, uiKitModules, uiKitPaletteSections };
+
+//# sourceMappingURL=index.js.map