@jbpark/live-editor 5.0.0 → 6.0.0

package/dist/{dnd-BlC1gqUy.js → dnd-BvjEDo-x.js}

@@ -1,22 +1,21 @@
-import { C as isJSXElement, D as isJSXIdentifier, E as isJSXFragment, I as isSpreadElement, L as isStringLiteral, N as isObjectExpression, O as isJSXOpeningElement, P as isObjectProperty, S as isJSXAttribute, a as inspectDocument, at as stringLiteral, b as isExpression, ct as traverseFast, d as applyEdits, dt as parseExpression, k as isJSXSpreadAttribute, l as fillIdsFrom, n as fillSectionIds, ot as templateElement, p as nanoid, st as templateLiteral, t as createSectionPreviewCache, u as replaceIds, x as isIdentifier } from "./document-DcwIEHRV.js";
-import { r as DATA_ATTR, s as RESERVED_BINDING_PROPERTIES, t as BINDING_PROP } from "./constants-D-XKuEY2.js";
-import { n as validateBindingValue } from "./validate-CZz30Pnb.js";
-import { i as useLiveMessages } from "./messages-Bt5WXKTE.js";
+import { C as isJSXElement, D as isJSXIdentifier, E as isJSXFragment, I as isSpreadElement, L as isStringLiteral, N as isObjectExpression, O as isJSXOpeningElement, P as isObjectProperty, S as isJSXAttribute, a as inspectDocument, at as stringLiteral, b as isExpression, ct as traverseFast, d as applyEdits, dt as parseExpression, k as isJSXSpreadAttribute, l as fillIdsFrom, n as fillSectionIds, ot as templateElement, p as nanoid, st as templateLiteral, t as createSectionPreviewCache, u as replaceIds, x as isIdentifier } from "./document-uHqw0mvr.js";
+import { r as DATA_ATTR, s as RESERVED_BINDING_PROPERTIES, t as BINDING_PROP } from "./constants-st9gnJ5g.js";
+import { i as useLiveMessages } from "./messages-DrINcRdG.js";
 import { i as usePreview } from "./states-Ci1AvoQ9.js";
-import { _ as parseArrayExpression, a as getChildrenSignatures, b as generateCode, c as removeIndices, d as getStructuredValue, f as readNodeBindings, g as isLosslesslyEvaluable, h as extractObjectProperties, i as valueToExpression, l as findEditableChildren, m as extractNodeValue, n as updateAll, o as extract, p as canLosslesslyEvaluateSource, r as createNodeFromValue, s as moveSelectedIndices, u as getCurrentValue, v as parseValue } from "./update-DNInQSM7.js";
+import { _ as parseArrayExpression, a as getChildrenSignatures, b as generateCode, c as removeIndices, d as getStructuredValue, f as readNodeBindings, g as isLosslesslyEvaluable, h as extractObjectProperties, i as valueToExpression, l as findEditableChildren, m as extractNodeValue, n as updateAll, o as extract, p as canLosslesslyEvaluateSource, r as createNodeFromValue, s as moveSelectedIndices, u as getCurrentValue, v as parseValue } from "./update-BuYQJqjq.js";
 import { t as cn } from "./cn-CAnad2vL.js";
-import { r as preloadScripts } from "./compile-DwOyWrmI.js";
-import { a as replaceSections, i as generateSection, r as extractSections } from "./sections-4uirsXRU.js";
-import { n as Error$1, t as ErrorBoundary } from "./boundary-6_nTsWxP.js";
-import { i as Frame, n as useCompiledModule, t as useDynamicTailwind } from "./use-dynamic-tailwind-CSYKXDmX.js";
-import { t as Core } from "./core-CKazr4tT.js";
+import { r as preloadScripts } from "./compile-my0AjsCw.js";
+import { a as replaceSections, i as generateSection, r as extractSections } from "./sections-DhH_aVf5.js";
+import { n as Error$1, t as ErrorBoundary } from "./boundary-CySnDUs2.js";
+import { a as renderStableComponent, n as useCompiledModule, o as Frame, t as useDynamicTailwind } from "./use-dynamic-tailwind-B3l1qZRW.js";
+import { i as getFieldKind, n as FieldIdsContext, o as FieldError, r as LABELABLE_KINDS, s as fields_module_default, t as useFieldState } from "./use-field-state-iQGW0vc6.js";
+import { t as Core } from "./core-BNVuH8-l.js";
 import { Children, createContext, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, PointerSensor, TouchSensor, closestCenter, useDndContext, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
 import { restrictToParentElement, restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { useDebounce, useElementPosition, useKeyPress, useLatest, useMultiSelect, usePendingCommit, useResponsiveSize, useSet, useStableValue } from "@jbpark/use-hooks";
-import { Button, Card, Checkbox, ColorPicker, DatePicker, Drawer, Input, RichTextEditor, Select, Space, Splitter, TimePicker, Toast, Typography } from "@jbpark/ui-kit";
 import { CSS as CSS$1 } from "@dnd-kit/utilities";
 import { ArrowDown, ArrowUp, ChevronDown, ChevronRight, ChevronUp, Copy, Crosshair, GripVertical, LayoutGrid, Plus, Trash, X } from "lucide-react";
 //#region src/constants/palette-sections.ts
@@ -25,14 +24,8 @@ const PALETTE_SECTIONS = [
 		id: "hero",
 		name: "Hero",
 		code: `
-      <section
-        data-name="Hero"
-        className={cn(
-          'text-center text-white',
-          //
-        )}
-      >
-        <ui.Space
+      <section data-name="Hero" className="text-center text-white">
+        <div
           data-id=""
           data-binding={[
             {
@@ -43,33 +36,25 @@ const PALETTE_SECTIONS = [
               // fields as a top-level binding.
               render: {
                 backgroundColor: { type: 'color', label: 'Background Color' },
+                gap: {
+                  type: 'number',
+                  label: 'Content Spacing',
+                  // 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' },
+                },
               },
               // 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',
-            //
-          )}
+          style={{ backgroundColor: '#6366f1', gap: 16 }}
+          className="flex flex-col items-center px-5 py-15"
         >
           <h1
             data-id=""
@@ -81,71 +66,29 @@ const PALETTE_SECTIONS = [
                 required: true,
               },
             ]}
-            className={cn(
-              'text-5xl font-bold',
-              //
-            )}
+            className="text-5xl font-bold"
           >
             Welcome to Live Editor
           </h1>
           <p
             data-id=""
-            data-binding={[
-              {
-                label: 'Description',
-                type: 'richtext',
-              },
-            ]}
-            className={cn(
-              'text-xl',
-              //
-            )}
+            data-binding={[{ label: 'Description', type: 'richtext' }]}
+            className="text-xl"
           >
             Build <strong>dynamic components</strong> with drag & drop
           </p>
-          <ui.Button
+          <a
             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' },
-                ],
-              },
+              { label: 'Button Text', property: 'innerText' },
+              { label: 'Button Link', property: 'href', type: 'url' },
             ]}
-            icon={<span>🚀</span>}
-            size="large"
-            variant="solid"
-            className={cn(
-              'bg-white text-indigo-500',
-              'hover:bg-gray-50',
-              //
-            )}
+            href="https://github.com/pjb0811/live-editor"
+            className="rounded-md bg-white px-6 py-3 text-lg font-medium text-indigo-500 hover:bg-gray-50"
           >
-            Get Started
-          </ui.Button>
-        </ui.Space>
+            🚀 Get Started
+          </a>
+        </div>
       </section>
     `
 	},
@@ -153,191 +96,82 @@ const PALETTE_SECTIONS = [
 		id: "features",
 		name: "Features",
 		code: `
-      <section
-        data-name="Features"
-        className={cn(
-          'px-5 py-10',
-          //
-        )}
-      >
-        <ui.Space
+      <section data-name="Features" className="px-5 py-10">
+        <div
           data-id=""
-          data-binding={[
-            {
-              label: 'Feature Cards',
-              property: 'children',
-            },
-          ]}
-          className={cn(
-            'mx-auto max-w-7xl',
-            //
-          )}
-          size="large"
-          wrap
+          data-binding={[{ label: 'Feature Cards', property: 'children' }]}
+          className="mx-auto flex max-w-7xl flex-wrap gap-6"
         >
-          <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>
+          <div className="min-w-70 flex-1 rounded-lg border border-gray-200 bg-white p-6 text-center">
+            <div
+              data-id=""
+              data-binding={[{ label: 'Icon', property: 'innerText' }]}
+              className="mb-3 text-5xl"
+            >
+              🚀
+            </div>
+            <h3
+              data-id=""
+              data-binding={[{ label: 'Title', property: 'innerText' }]}
+              className="mb-2 text-2xl text-gray-800"
+            >
+              Feature 1
+            </h3>
+            <p
+              data-id=""
+              data-binding={[{ label: 'Description', property: 'innerText' }]}
+              className="text-gray-600"
+            >
+              Amazing feature description
+            </p>
+          </div>
+          <div className="min-w-70 flex-1 rounded-lg border border-gray-200 bg-white p-6 text-center">
+            <div
+              data-id=""
+              data-binding={[{ label: 'Icon', property: 'innerText' }]}
+              className="mb-3 text-5xl"
+            >
+              ⚡
+            </div>
+            <h3
+              data-id=""
+              data-binding={[{ label: 'Title', property: 'innerText' }]}
+              className="mb-2 text-2xl text-gray-800"
+            >
+              Feature 2
+            </h3>
+            <p
+              data-id=""
+              data-binding={[{ label: 'Description', property: 'innerText' }]}
+              className="text-gray-600"
+            >
+              Another great feature
+            </p>
+          </div>
+          <div className="min-w-70 flex-1 rounded-lg border border-gray-200 bg-white p-6 text-center">
+            <div
+              data-id=""
+              data-binding={[{ label: 'Icon', property: 'innerText' }]}
+              className="mb-3 text-5xl"
+            >
+              ✨
+            </div>
+            <h3
+              data-id=""
+              data-binding={[{ label: 'Title', property: 'innerText' }]}
+              className="mb-2 text-2xl text-gray-800"
+            >
+              Feature 3
+            </h3>
+            <p
+              data-id=""
+              data-binding={[{ label: 'Description', property: 'innerText' }]}
+              className="text-gray-600"
+            >
+              One more awesome thing
+            </p>
+          </div>
+        </div>
       </section>
     `
 	},
@@ -345,60 +179,34 @@ const PALETTE_SECTIONS = [
 		id: "about",
 		name: "About",
 		code: `
-      <section
-        data-name="About"
-        className={cn(
-          'mx-auto max-w-3xl px-5 py-10',
-          //
-        )}
-      >
-        <ui.Typography.Title
+      <section data-name="About" className="mx-auto max-w-3xl px-5 py-10">
+        <h2
           data-id=""
           data-binding={[{ label: 'Title', property: 'innerText' }]}
-          level={2}
-          className={cn(
-            'mb-5 text-4xl text-gray-800',
-            //
-          )}
+          className="mb-5 text-4xl font-semibold text-gray-800"
         >
           About Live Editor
-        </ui.Typography.Title>
-        <ui.Typography.Paragraph
+        </h2>
+        <p
           data-id=""
-          data-binding={[
-            {
-              label: 'Description 1',
-              type: 'richtext',
-            },
-          ]}
-          className={cn(
-            'mb-4 text-lg leading-relaxed text-gray-600',
-            //
-          )}
+          data-binding={[{ label: 'Description 1', type: 'richtext' }]}
+          className="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
+        </p>
+        <p
           data-id=""
-          data-binding={[
-            {
-              label: 'Description 2',
-              type: 'richtext',
-            },
-          ]}
-          className={cn(
-            'text-lg leading-relaxed text-gray-600',
-            //
-          )}
+          data-binding={[{ label: 'Description 2', type: 'richtext' }]}
+          className="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>
+        </p>
       </section>
     `
 	},
@@ -406,89 +214,44 @@ const PALETTE_SECTIONS = [
 		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
+      <section data-name="CTA" className="bg-gray-50 px-5 py-12 text-center">
+        <div className="mx-auto max-w-xl">
+          <h2
             data-id=""
             data-binding={[{ label: 'Title', property: 'innerText' }]}
-            level={2}
-            className={cn(
-              'mb-4 text-3xl text-gray-800',
-              //
-            )}
+            className="mb-4 text-3xl font-semibold text-gray-800"
           >
             Ready to get started?
-          </ui.Typography.Title>
-          <ui.Typography.Paragraph
+          </h2>
+          <p
             data-id=""
-            data-binding={[
-              {
-                label: 'Description',
-                property: 'innerText',
-              },
-            ]}
-            className={cn(
-              'mb-6 text-lg text-gray-600',
-              //
-            )}
+            data-binding={[{ label: 'Description', property: 'innerText' }]}
+            className="mb-6 text-lg text-gray-600"
           >
             Start exploring what Live Editor can do for your projects
-          </ui.Typography.Paragraph>
-          <ui.Space
+          </p>
+          <div
             data-id=""
             data-binding={[{ label: 'Buttons', property: 'children' }]}
-            className={cn(
-              'flex flex-wrap justify-center gap-4',
-              //
-            )}
+            className="flex flex-wrap justify-center gap-4"
           >
-            <ui.Button
+            <a
               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',
-                //
-              )}
+              data-binding={[{ label: 'Button 1 Text', property: 'innerText' }]}
+              href="#"
+              className="rounded-md bg-indigo-500 px-8 py-3 text-base text-white hover:bg-indigo-600"
             >
               View Documentation
-            </ui.Button>
-            <ui.Button
+            </a>
+            <a
               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',
-                //
-              )}
+              data-binding={[{ label: 'Button 2 Text', property: 'innerText' }]}
+              href="#"
+              className="rounded-md border-2 border-indigo-500 px-8 py-3 text-base text-indigo-500 hover:bg-indigo-50"
             >
               View Examples
-            </ui.Button>
-          </ui.Space>
+            </a>
+          </div>
         </div>
       </section>
     `
@@ -497,266 +260,118 @@ const PALETTE_SECTIONS = [
 		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
+      <section data-name="Getting Started" className="px-5 py-16">
+        <div className="mx-auto max-w-5xl">
+          <h2
             data-id=""
             data-binding={[{ label: 'Title', property: 'innerText' }]}
-            level={2}
-            className={cn(
-              'mb-12 text-center text-4xl font-bold text-gray-800',
-              //
-            )}
+            className="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
+          </h2>
+          <div className="grid gap-8 md:grid-cols-3">
+            <div
               data-id=""
-              data-binding={[
-                {
-                  label: 'Card 1 Content',
-                  property: 'children',
-                },
-              ]}
-              className={cn(
-                'rounded-lg border-2 border-gray-200 bg-white p-8',
-                //
-              )}
+              data-binding={[{ label: 'Card 1 Content', property: 'children' }]}
+              className="rounded-lg border-2 border-gray-200 bg-white p-8"
             >
-              <ui.Typography.Title
+              <h3
                 data-id=""
-                data-binding={[
-                  {
-                    label: 'Card 1 Title',
-                    property: 'innerText',
-                  },
-                ]}
-                level={3}
-                className={cn(
-                  'mb-2 text-2xl font-bold text-gray-800',
-                  //
-                )}
+                data-binding={[{ label: 'Card 1 Title', property: 'innerText' }]}
+                className="mb-2 text-2xl font-bold text-gray-800"
               >
                 Explore
-              </ui.Typography.Title>
-              <ui.Typography.Paragraph
+              </h3>
+              <p
                 data-id=""
-                data-binding={[
-                  {
-                    label: 'Card 1 Icon',
-                    property: 'innerText',
-                  },
-                ]}
-                className={cn(
-                  'mb-6 text-4xl font-bold text-indigo-600',
-                  //
-                )}
+                data-binding={[{ label: 'Card 1 Icon', property: 'innerText' }]}
+                className="mb-6 text-4xl font-bold text-indigo-600"
               >
                 📚
-              </ui.Typography.Paragraph>
-              <ul
-                className={cn(
-                  'mb-8 space-y-3 text-gray-600',
-                  //
-                )}
-              >
+              </p>
+              <ul className="mb-8 space-y-3 text-gray-600">
                 <li>✓ Read documentation</li>
                 <li>✓ Browse examples</li>
                 <li>✓ Try the demo</li>
               </ul>
-              <ui.Button
+              <a
                 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',
-                  //
-                )}
+                data-binding={[{ label: 'Card 1 Button', property: 'innerText' }]}
+                href="#"
+                className="block rounded-md border-2 border-indigo-500 px-4 py-2 text-center text-indigo-500 hover:bg-indigo-50"
               >
                 View Docs
-              </ui.Button>
-            </ui.Card>
-            <ui.Card
+              </a>
+            </div>
+            <div
               data-id=""
-              data-binding={[
-                {
-                  label: 'Card 2 Content',
-                  property: 'children',
-                },
-              ]}
-              className={cn(
-                'relative rounded-lg border-2 border-indigo-500 bg-white p-8',
-                //
-              )}
+              data-binding={[{ label: 'Card 2 Content', property: 'children' }]}
+              className="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',
-                  //
-                )}
-              >
+              <div className="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
+              <h3
                 data-id=""
-                data-binding={[
-                  {
-                    label: 'Card 2 Title',
-                    property: 'innerText',
-                  },
-                ]}
-                level={3}
-                className={cn(
-                  'mb-2 text-2xl font-bold text-gray-800',
-                  //
-                )}
+                data-binding={[{ label: 'Card 2 Title', property: 'innerText' }]}
+                className="mb-2 text-2xl font-bold text-gray-800"
               >
                 Practice
-              </ui.Typography.Title>
-              <ui.Typography.Paragraph
+              </h3>
+              <p
                 data-id=""
-                data-binding={[
-                  {
-                    label: 'Card 2 Icon',
-                    property: 'innerText',
-                  },
-                ]}
-                className={cn(
-                  'mb-6 text-4xl font-bold text-indigo-600',
-                  //
-                )}
+                data-binding={[{ label: 'Card 2 Icon', property: 'innerText' }]}
+                className="mb-6 text-4xl font-bold text-indigo-600"
               >
                 💻
-              </ui.Typography.Paragraph>
-              <ul
-                className={cn(
-                  'mb-8 space-y-3 text-gray-600',
-                  //
-                )}
-              >
+              </p>
+              <ul className="mb-8 space-y-3 text-gray-600">
                 <li>✓ Interactive playground</li>
                 <li>✓ Experiment freely</li>
                 <li>✓ Build your own</li>
               </ul>
-              <ui.Button
+              <a
                 data-id=""
-                data-binding={[
-                  {
-                    label: 'Card 2 Button',
-                    property: 'innerText',
-                  },
-                ]}
-                size="large"
-                block
-                className={cn(
-                  'bg-indigo-500 text-white',
-                  'hover:bg-indigo-600',
-                  //
-                )}
+                data-binding={[{ label: 'Card 2 Button', property: 'innerText' }]}
+                href="#"
+                className="block rounded-md bg-indigo-500 px-4 py-2 text-center text-white hover:bg-indigo-600"
               >
                 Start Building
-              </ui.Button>
-            </ui.Card>
-            <ui.Card
+              </a>
+            </div>
+            <div
               data-id=""
-              data-binding={[
-                {
-                  label: 'Card 3 Content',
-                  property: 'children',
-                },
-              ]}
-              className={cn(
-                'rounded-lg border-2 border-gray-200 bg-white p-8',
-                //
-              )}
+              data-binding={[{ label: 'Card 3 Content', property: 'children' }]}
+              className="rounded-lg border-2 border-gray-200 bg-white p-8"
             >
-              <ui.Typography.Title
+              <h3
                 data-id=""
-                data-binding={[
-                  {
-                    label: 'Card 3 Title',
-                    property: 'innerText',
-                  },
-                ]}
-                level={3}
-                className={cn(
-                  'mb-2 text-2xl font-bold text-gray-800',
-                  //
-                )}
+                data-binding={[{ label: 'Card 3 Title', property: 'innerText' }]}
+                className="mb-2 text-2xl font-bold text-gray-800"
               >
                 Contribute
-              </ui.Typography.Title>
-              <ui.Typography.Paragraph
+              </h3>
+              <p
                 data-id=""
-                data-binding={[
-                  {
-                    label: 'Card 3 Icon',
-                    property: 'innerText',
-                  },
-                ]}
-                className={cn(
-                  'mb-6 text-4xl font-bold text-indigo-600',
-                  //
-                )}
+                data-binding={[{ label: 'Card 3 Icon', property: 'innerText' }]}
+                className="mb-6 text-4xl font-bold text-indigo-600"
               >
                 🤝
-              </ui.Typography.Paragraph>
-              <ul
-                className={cn(
-                  'mb-8 space-y-3 text-gray-600',
-                  //
-                )}
-              >
+              </p>
+              <ul className="mb-8 space-y-3 text-gray-600">
                 <li>✓ Report issues</li>
                 <li>✓ Suggest features</li>
                 <li>✓ Submit pull requests</li>
               </ul>
-              <ui.Button
+              <a
                 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',
-                  //
-                )}
+                data-binding={[{ label: 'Card 3 Button', property: 'innerText' }]}
+                href="#"
+                className="block rounded-md border-2 border-indigo-500 px-4 py-2 text-center text-indigo-500 hover:bg-indigo-50"
               >
                 View on GitHub
-              </ui.Button>
-            </ui.Card>
+              </a>
+            </div>
           </div>
         </div>
       </section>
@@ -766,96 +381,33 @@ const PALETTE_SECTIONS = [
 		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',
-            //
-          )}
-        >
+      <section data-name="Key Features" className="bg-indigo-50 px-5 py-16">
+        <div className="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',
-              //
-            )}
+            className="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',
-                  //
-                )}
-              >
+          <div className="grid gap-8 md:grid-cols-2">
+            <div className="rounded-lg bg-white p-8 shadow-md">
+              <div className="mb-4 text-4xl">🎨</div>
+              <h3 className="mb-4 text-2xl font-bold text-gray-800">
                 Visual Editing
               </h3>
-              <p
-                className={cn(
-                  'text-gray-600',
-                  //
-                )}
-              >
+              <p className="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',
-                  //
-                )}
-              >
+            <div className="rounded-lg bg-white p-8 shadow-md">
+              <div className="mb-4 text-4xl">🧩</div>
+              <h3 className="mb-4 text-2xl font-bold text-gray-800">
                 Component-Based
               </h3>
-              <p
-                className={cn(
-                  'text-gray-600',
-                  //
-                )}
-              >
+              <p className="text-gray-600">
                 Build with reusable components that you can drag, drop, and
                 customize. Learn modern development patterns while creating your
                 interface.
@@ -870,199 +422,77 @@ const PALETTE_SECTIONS = [
 		id: "stats",
 		name: "Stats",
 		code: `
-      <section
-        data-name="Stats"
-        className={cn(
-          'bg-indigo-600 text-white',
-          //
-        )}
-      >
-        <ui.Marquees
+      <section data-name="Stats" className="bg-indigo-600 px-5 py-16 text-white">
+        <div
           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>
-              ),
-            },
-          ]}
-        />
+          data-binding={[{ label: 'Stats Cards', property: 'children' }]}
+          className="mx-auto flex max-w-6xl flex-wrap justify-center gap-10"
+        >
+          <div className="min-w-50 flex-1 text-center">
+            <p
+              data-id=""
+              data-binding={[{ label: 'Title', property: 'innerText' }]}
+              className="mb-2 text-5xl font-bold"
+            >
+              Open
+            </p>
+            <p
+              data-id=""
+              data-binding={[{ label: 'Description', property: 'innerText' }]}
+              className="text-indigo-200"
+            >
+              Source Project
+            </p>
+          </div>
+          <div className="min-w-50 flex-1 text-center">
+            <p
+              data-id=""
+              data-binding={[{ label: 'Title', property: 'innerText' }]}
+              className="mb-2 text-5xl font-bold"
+            >
+              Free
+            </p>
+            <p
+              data-id=""
+              data-binding={[{ label: 'Description', property: 'innerText' }]}
+              className="text-indigo-200"
+            >
+              For Everyone
+            </p>
+          </div>
+          <div className="min-w-50 flex-1 text-center">
+            <p
+              data-id=""
+              data-binding={[{ label: 'Title', property: 'innerText' }]}
+              className="mb-2 text-5xl font-bold"
+            >
+              Active
+            </p>
+            <p
+              data-id=""
+              data-binding={[{ label: 'Description', property: 'innerText' }]}
+              className="text-indigo-200"
+            >
+              Community
+            </p>
+          </div>
+          <div className="min-w-50 flex-1 text-center">
+            <p
+              data-id=""
+              data-binding={[{ label: 'Title', property: 'innerText' }]}
+              className="mb-2 text-5xl font-bold"
+            >
+              Learn
+            </p>
+            <p
+              data-id=""
+              data-binding={[{ label: 'Description', property: 'innerText' }]}
+              className="text-indigo-200"
+            >
+              By Doing
+            </p>
+          </div>
+        </div>
       </section>
     `
 	},
@@ -1070,147 +500,311 @@ const PALETTE_SECTIONS = [
 		id: "roadmap",
 		name: "Roadmap",
 		code: `
-      <section
-        data-name="Roadmap"
-        className={cn(
-          'px-5 py-16',
-          //
-        )}
-      >
-        <div
-          className={cn(
-            'mx-auto max-w-3xl',
-            //
-          )}
-        >
+      <section data-name="Roadmap" className="px-5 py-16">
+        <div className="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',
-              //
-            )}
+            className="mb-8 text-center text-4xl font-bold text-gray-800"
           >
             Roadmap
           </h2>
-          <ui.List
+          <ol
             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,
+            data-binding={[{ label: 'Milestones', property: 'children' }]}
+          >
+            <li className="flex items-center gap-4 border-b border-gray-100 py-4">
+              <span
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Accent',
+                    property: 'style',
+                    type: 'object',
+                    render: {
+                      backgroundColor: { type: 'color', label: 'Accent Color' },
+                    },
+                  },
+                ]}
+                style={{ backgroundColor: '#22c55e' }}
+                className="size-3 shrink-0 rounded-full"
+              />
+              <div className="min-w-0 flex-1">
+                <p
+                  data-id=""
+                  data-binding={[
+                    { label: 'Title', property: 'innerText', required: true },
+                  ]}
+                  className="font-semibold text-gray-800"
+                >
+                  Visual editing
+                </p>
+                <p className="text-sm text-gray-500">
+                  <time
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Release Date',
+                        property: 'dateTime',
+                        type: 'date',
+                        required: true,
+                      },
+                      { label: 'Date Text', property: 'innerText' },
+                    ]}
+                    dateTime="2026-03-02"
+                  >
+                    March 2, 2026
+                  </time>
+                  {' · '}
+                  <span
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Status',
+                        property: 'innerText',
+                        options: [
+                          { label: 'Planned', value: 'Planned' },
+                          { label: 'In Progress', value: 'In Progress' },
+                          { label: 'Shipped', value: 'Shipped' },
+                        ],
+                      },
+                    ]}
+                  >
+                    Shipped
+                  </span>
+                </p>
+                <progress
+                  data-id=""
+                  data-binding={[
+                    {
+                      label: 'Progress',
+                      property: 'value',
+                      type: 'number',
+                      min: 0,
+                      max: 100,
+                      widget: { type: 'slider', step: 10, unit: '%' },
+                    },
+                  ]}
+                  value={100}
+                  max={100}
+                  className="mt-2 h-2 w-full"
+                />
+              </div>
+              <a
+                data-id=""
+                data-binding={[
+                  { label: 'Link Text', property: 'innerText' },
+                  {
+                    label: 'Link URL',
+                    property: 'href',
+                    type: 'url',
+                    pattern: '^https://',
+                    // Not a library field, so it arrives as meta.hint.
+                    hint: 'Must use https',
                   },
-                  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' },
-                    ],
+                ]}
+                href="https://github.com"
+                className="text-sm text-indigo-500 hover:underline"
+              >
+                Release notes
+              </a>
+            </li>
+            <li className="flex items-center gap-4 border-b border-gray-100 py-4">
+              <span
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Accent',
+                    property: 'style',
+                    type: 'object',
+                    render: {
+                      backgroundColor: { type: 'color', label: 'Accent Color' },
+                    },
                   },
-                  progress: {
-                    type: 'number',
-                    label: 'Progress',
-                    min: 0,
-                    max: 100,
-                    widget: { type: 'slider', step: 10, unit: '%' },
+                ]}
+                style={{ backgroundColor: '#6366f1' }}
+                className="size-3 shrink-0 rounded-full"
+              />
+              <div className="min-w-0 flex-1">
+                <p
+                  data-id=""
+                  data-binding={[
+                    { label: 'Title', property: 'innerText', required: true },
+                  ]}
+                  className="font-semibold text-gray-800"
+                >
+                  Custom panels
+                </p>
+                <p className="text-sm text-gray-500">
+                  <time
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Release Date',
+                        property: 'dateTime',
+                        type: 'date',
+                        required: true,
+                      },
+                      { label: 'Date Text', property: 'innerText' },
+                    ]}
+                    dateTime="2026-09-26"
+                  >
+                    September 26, 2026
+                  </time>
+                  {' · '}
+                  <span
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Status',
+                        property: 'innerText',
+                        options: [
+                          { label: 'Planned', value: 'Planned' },
+                          { label: 'In Progress', value: 'In Progress' },
+                          { label: 'Shipped', value: 'Shipped' },
+                        ],
+                      },
+                    ]}
+                  >
+                    In Progress
+                  </span>
+                </p>
+                <progress
+                  data-id=""
+                  data-binding={[
+                    {
+                      label: 'Progress',
+                      property: 'value',
+                      type: 'number',
+                      min: 0,
+                      max: 100,
+                      widget: { type: 'slider', step: 10, unit: '%' },
+                    },
+                  ]}
+                  value={60}
+                  max={100}
+                  className="mt-2 h-2 w-full"
+                />
+              </div>
+              <a
+                data-id=""
+                data-binding={[
+                  { label: 'Link Text', property: 'innerText' },
+                  {
+                    label: 'Link URL',
+                    property: 'href',
+                    type: 'url',
+                    pattern: '^https://',
+                    // Not a library field, so it arrives as meta.hint.
+                    hint: 'Must use https',
                   },
-                  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: {
+                ]}
+                href="https://github.com"
+                className="text-sm text-indigo-500 hover:underline"
+              >
+                Guide
+              </a>
+            </li>
+            <li className="flex items-center gap-4 border-b border-gray-100 py-4">
+              <span
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Accent',
+                    property: 'style',
                     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',
+                      backgroundColor: { type: 'color', label: 'Accent Color' },
+                    },
+                  },
+                ]}
+                style={{ backgroundColor: '#f59e0b' }}
+                className="size-3 shrink-0 rounded-full"
+              />
+              <div className="min-w-0 flex-1">
+                <p
+                  data-id=""
+                  data-binding={[
+                    { label: 'Title', property: 'innerText', required: true },
+                  ]}
+                  className="font-semibold text-gray-800"
+                >
+                  Collaboration
+                </p>
+                <p className="text-sm text-gray-500">
+                  <time
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Release Date',
+                        property: 'dateTime',
+                        type: 'date',
+                        required: true,
+                      },
+                      { label: 'Date Text', property: 'innerText' },
+                    ]}
+                    dateTime="2027-01-15"
+                  >
+                    January 15, 2027
+                  </time>
+                  {' · '}
+                  <span
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Status',
+                        property: 'innerText',
+                        options: [
+                          { label: 'Planned', value: 'Planned' },
+                          { label: 'In Progress', value: 'In Progress' },
+                          { label: 'Shipped', value: 'Shipped' },
+                        ],
                       },
+                    ]}
+                  >
+                    Planned
+                  </span>
+                </p>
+                <progress
+                  data-id=""
+                  data-binding={[
+                    {
+                      label: 'Progress',
+                      property: 'value',
+                      type: 'number',
+                      min: 0,
+                      max: 100,
+                      widget: { type: 'slider', step: 10, unit: '%' },
                     },
-                  },
-                },
-              },
-            ]}
-            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 }}
+                  ]}
+                  value={0}
+                  max={100}
+                  className="mt-2 h-2 w-full"
                 />
-                <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',
-              //
-            )}
-          >
+              <a
+                data-id=""
+                data-binding={[
+                  { label: 'Link Text', property: 'innerText' },
+                  {
+                    label: 'Link URL',
+                    property: 'href',
+                    type: 'url',
+                    pattern: '^https://',
+                    // Not a library field, so it arrives as meta.hint.
+                    hint: 'Must use https',
+                  },
+                ]}
+                href="https://github.com"
+                className="text-sm text-indigo-500 hover:underline"
+              >
+                Discussion
+              </a>
+            </li>
+          </ol>
+          <p className="mt-6 text-center text-sm text-gray-500">
             Last updated{' '}
             <time
               data-id=""
@@ -1254,179 +848,133 @@ const PALETTE_SECTIONS = [
 		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
+      <section data-name="FAQ" className="px-5 py-16">
+        <div className="mx-auto max-w-3xl">
+          <h2
             data-id=""
             data-binding={[{ label: 'Title', property: 'innerText' }]}
-            level={2}
-            className={cn(
-              'mb-12 text-center text-4xl font-bold text-gray-800',
-              //
-            )}
+            className="mb-12 text-center text-4xl font-bold text-gray-800"
           >
             Frequently Asked Questions
-          </ui.Typography.Title>
-          <ui.Collapse
+          </h2>
+          <div
             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>
-                ),
-              },
-            ]}
-          />
+            data-binding={[{ label: 'FAQ Items', property: 'children' }]}
+            className="divide-y divide-gray-200"
+          >
+            <details className="py-4">
+              <summary
+                data-id=""
+                data-binding={[{ label: 'Question 1', property: 'innerText' }]}
+                className="cursor-pointer text-lg font-semibold text-gray-800"
+              >
+                What is Live Editor?
+              </summary>
+              <p
+                data-id=""
+                data-binding={[{ label: 'Answer 1', type: 'richtext' }]}
+                className="mt-3 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.
+              </p>
+            </details>
+            <details className="py-4">
+              <summary
+                data-id=""
+                data-binding={[{ label: 'Question 2', property: 'innerText' }]}
+                className="cursor-pointer text-lg font-semibold text-gray-800"
+              >
+                Do I need coding experience?
+              </summary>
+              <p
+                data-id=""
+                data-binding={[{ label: 'Answer 2', type: 'richtext' }]}
+                className="mt-3 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.
+              </p>
+            </details>
+            <details className="py-4">
+              <summary
+                data-id=""
+                data-binding={[{ label: 'Question 3', property: 'innerText' }]}
+                className="cursor-pointer text-lg font-semibold text-gray-800"
+              >
+                Is it really free?
+              </summary>
+              <p
+                data-id=""
+                data-binding={[{ label: 'Answer 3', type: 'richtext' }]}
+                className="mt-3 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.
+              </p>
+            </details>
+            <details className="py-4">
+              <summary
+                data-id=""
+                data-binding={[{ label: 'Question 4', property: 'innerText' }]}
+                className="cursor-pointer text-lg font-semibold text-gray-800"
+              >
+                How can I contribute?
+              </summary>
+              <p
+                data-id=""
+                data-binding={[{ label: 'Answer 4', type: 'richtext' }]}
+                className="mt-3 text-gray-600"
+              >
+                You can contribute by reporting bugs, suggesting features,
+                sharing your projects, or contributing code. Check our
+                GitHub repository for more details.
+              </p>
+            </details>
+          </div>
         </div>
       </section>
     `
 	}
 ];
 //#endregion
+//#region src/components/dnd/canvas/canvas.module.css
+var canvas_module_default = {
+	"dropArea": "vaEhUG_dropArea",
+	"dropAreaOver": "vaEhUG_dropAreaOver",
+	"dropBottom": "vaEhUG_dropBottom",
+	"dropBottomOver": "vaEhUG_dropBottomOver",
+	"empty": "vaEhUG_empty",
+	"fill": "vaEhUG_fill",
+	"notice": "vaEhUG_notice",
+	"section": "vaEhUG_section",
+	"sectionDropTarget": "vaEhUG_sectionDropTarget",
+	"sectionSelected": "vaEhUG_sectionSelected",
+	"sectionShield": "vaEhUG_sectionShield",
+	"sectionToolbar": "vaEhUG_sectionToolbar",
+	"stale": "vaEhUG_stale"
+};
+//#endregion
+//#region src/components/dnd/layout.module.css
+var layout_module_default = {
+	"canvas": "_4QZ3lW_canvas",
+	"card": "_4QZ3lW_card",
+	"palette": "_4QZ3lW_palette",
+	"paletteButton": "_4QZ3lW_paletteButton",
+	"paletteItems": "_4QZ3lW_paletteItems",
+	"panel": "_4QZ3lW_panel",
+	"picker": "_4QZ3lW_picker",
+	"pickerDock": "_4QZ3lW_pickerDock",
+	"root": "_4QZ3lW_root"
+};
+//#endregion
 //#region src/components/dnd/canvas/canvas-notice.tsx
-const CanvasNotice = ({ title, detail }) => /* @__PURE__ */ jsxs(Space, {
-	orientation: "vertical",
-	align: "center",
-	children: [/* @__PURE__ */ jsx(Typography.Paragraph, { children: title }), /* @__PURE__ */ jsx(Typography.Text, { children: detail })]
+const CanvasNotice = ({ title, detail }) => /* @__PURE__ */ jsxs("div", {
+	className: canvas_module_default.notice,
+	children: [/* @__PURE__ */ jsx("p", { children: title }), /* @__PURE__ */ jsx("span", { children: detail })]
 });
 //#endregion
 //#region src/components/dnd/palette/palette-drag.ts
@@ -1450,14 +998,11 @@ const Droppable = ({ children, className }) => {
 	const messages = useLiveMessages();
 	return /* @__PURE__ */ jsxs("div", {
 		ref: setNodeRef,
-		className: cn("min-h-full", "border-2 border-dashed p-1", shouldHighlight ? "border-blue-300 bg-blue-50" : "border-gray-200", className),
+		className: cn(canvas_module_default.dropArea, shouldHighlight && canvas_module_default.dropAreaOver, className),
 		children: [children, isPaletteSectionDragging && /* @__PURE__ */ jsx("div", {
 			ref: setBottomRef,
-			className: cn("mt-2 min-h-24", "rounded-lg border-2 border-dashed", "transition-all duration-200", "flex items-center justify-center", shouldHighlightBottom ? "border-blue-400 bg-blue-100" : "border-gray-300 bg-gray-50"),
-			children: /* @__PURE__ */ jsx(Typography.Text, {
-				className: "text-sm text-gray-500",
-				children: shouldHighlightBottom ? messages.canvas.dropHere : messages.canvas.dropAtBottom
-			})
+			className: cn(canvas_module_default.dropBottom, shouldHighlightBottom && canvas_module_default.dropBottomOver),
+			children: shouldHighlightBottom ? messages.canvas.dropHere : messages.canvas.dropAtBottom
 		})]
 	});
 };
@@ -1507,11 +1052,11 @@ const DraggableItem = ({ item, children }) => {
 };
 const DefaultDraggableItem = ({ item, onAdd, tapToAdd = false }) => /* @__PURE__ */ jsx(DraggableItem, {
 	item,
-	children: ({ ref, dragProps, isDragging }) => /* @__PURE__ */ jsx(Card, {
+	children: ({ ref, dragProps, isDragging }) => /* @__PURE__ */ jsx("div", {
 		ref,
 		style: { opacity: isDragging ? .5 : 1 },
 		...dragProps,
-		className: cn("cursor-grab", "outline-none focus-visible:ring-2 focus-visible:ring-blue-500", "hover:border-blue-300 hover:shadow-md", isDragging && "opacity-50"),
+		className: layout_module_default.card,
 		onClick: tapToAdd && onAdd ? () => onAdd(item) : void 0,
 		onDoubleClick: onAdd ? () => onAdd(item) : void 0,
 		onKeyDown: (event) => {
@@ -1587,7 +1132,10 @@ const Renderer = ({ preview, sectionId = "", sectionName = "", sectionCode = pre
 		autoHeight: true,
 		children: (container) => /* @__PURE__ */ jsx("div", {
 			ref: wrapperRef,
-			className: "w-full overflow-x-hidden",
+			style: {
+				width: "100%",
+				overflowX: "hidden"
+			},
 			"data-editor-mode": true,
 			children: /* @__PURE__ */ jsx(ErrorBoundary, {
 				resetKeys: [preview],
@@ -1603,7 +1151,7 @@ const Renderer = ({ preview, sectionId = "", sectionName = "", sectionCode = pre
 						title: messages.errors.rendering
 					})
 				}),
-				children: renderProvider(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Component, {
+				children: renderProvider(/* @__PURE__ */ jsxs(Fragment, { children: [renderStableComponent(Component, preview, {
 					headers,
 					container
 				}), dynamicTailwind && dynamicCSS && /* @__PURE__ */ jsx("style", { children: dynamicCSS })] }))
@@ -1630,6 +1178,28 @@ const arePropsEqual = (prev, next) => {
 };
 var renderer_default = memo(Renderer, arePropsEqual);
 //#endregion
+//#region src/components/dnd/button.module.css
+var button_module_default = {
+	"button": "_49iObG_button",
+	"circle": "_49iObG_circle",
+	"danger": "_49iObG_danger",
+	"iconOnly": "_49iObG_iconOnly",
+	"outlined": "_49iObG_outlined",
+	"primary": "_49iObG_primary",
+	"small": "_49iObG_small",
+	"solid": "_49iObG_solid",
+	"success": "_49iObG_success",
+	"text": "_49iObG_text"
+};
+//#endregion
+//#region src/components/dnd/button.tsx
+const Button = ({ variant = "outlined", tone = "neutral", size = "middle", shape = "default", icon, className, children, ...restProps }) => /* @__PURE__ */ jsxs("button", {
+	type: "button",
+	className: cn(button_module_default.button, button_module_default[variant], tone !== "neutral" && button_module_default[tone], size === "small" && button_module_default.small, shape === "circle" && button_module_default.circle, icon && !children && button_module_default.iconOnly, className),
+	...restProps,
+	children: [icon, children]
+});
+//#endregion
 //#region src/components/dnd/canvas/section-handlers.ts
 const SectionHandlersContext = createContext(null);
 const useSectionHandlers = () => useContext(SectionHandlersContext);
@@ -1691,10 +1261,10 @@ const Sortable = ({ id, children, selected, onClick, onDelete, onCopy, onMoveUp,
 		...listeners,
 		onKeyDown,
 		onClick,
-		className: cn("relative", selected && "z-10 outline-2 outline-offset-2 outline-blue-500", isPaletteSectionOver && "border-t-4 border-t-green-500"),
+		className: cn(canvas_module_default.section, selected && canvas_module_default.sectionSelected, isPaletteSectionOver && canvas_module_default.sectionDropTarget),
 		children: [
 			/* @__PURE__ */ jsx("div", {
-				className: cn("absolute inset-0 z-50"),
+				className: canvas_module_default.sectionShield,
 				onPointerMove: inspecting ? (e) => handlers?.onInspectMove(e.currentTarget.parentElement, e.currentTarget, e.clientX, e.clientY) : void 0,
 				onPointerLeave: inspecting ? handlers?.onInspectLeave : void 0,
 				onClick: inspecting ? (e) => {
@@ -1703,8 +1273,8 @@ const Sortable = ({ id, children, selected, onClick, onDelete, onCopy, onMoveUp,
 				} : void 0
 			}),
 			children,
-			selected && /* @__PURE__ */ jsxs(Space, {
-				className: cn("absolute top-1 right-1 z-60"),
+			selected && /* @__PURE__ */ jsxs("div", {
+				className: canvas_module_default.sectionToolbar,
 				children: [
 					onMoveUp && /* @__PURE__ */ jsx(Button, {
 						icon: /* @__PURE__ */ jsx(ChevronUp, {}),
@@ -1724,7 +1294,7 @@ const Sortable = ({ id, children, selected, onClick, onDelete, onCopy, onMoveUp,
 						"aria-label": messages.section.duplicate
 					}),
 					/* @__PURE__ */ jsx(Button, {
-						danger: true,
+						tone: "danger",
 						icon: /* @__PURE__ */ jsx(Trash, {}),
 						onClick: press(() => onDelete?.(id)),
 						"aria-label": messages.section.delete
@@ -1762,9 +1332,51 @@ const Overlay = ({ sections, isForced, renderProps }) => {
 	return null;
 };
 //#endregion
+//#region src/components/dnd/toast.module.css
+var toast_module_default = {
+	"description": "YlF_3q_description",
+	"region": "YlF_3q_region",
+	"title": "YlF_3q_title",
+	"toast": "YlF_3q_toast"
+};
+//#endregion
+//#region src/components/dnd/toast.ts
+const TOAST_DURATION = 6e3;
+let region = null;
+const getRegion = () => {
+	if (region?.isConnected) return region;
+	region = document.createElement("div");
+	region.className = toast_module_default.region;
+	document.body.append(region);
+	return region;
+};
+const showErrorToast = (title, description) => {
+	if (typeof document === "undefined") return;
+	const toast = document.createElement("div");
+	toast.className = toast_module_default.toast;
+	toast.setAttribute("role", "alert");
+	const heading = document.createElement("div");
+	heading.className = toast_module_default.title;
+	heading.textContent = title;
+	toast.append(heading);
+	if (description) {
+		const detail = document.createElement("div");
+		detail.className = toast_module_default.description;
+		detail.textContent = description;
+		toast.append(detail);
+	}
+	const remove = () => {
+		window.clearTimeout(timer);
+		toast.remove();
+	};
+	const timer = window.setTimeout(remove, TOAST_DURATION);
+	toast.addEventListener("click", remove);
+	getRegion().append(toast);
+};
+//#endregion
 //#region src/components/dnd/edit-options.ts
 const toastEditError = (error) => {
-	Toast.error(error.title, error.description ? { description: error.description } : void 0);
+	showErrorToast(error.title, error.description);
 };
 const DndEditOptionsContext = createContext({ reportError: toastEditError });
 const useDndEditOptions = () => useContext(DndEditOptionsContext);
@@ -1824,6 +1436,65 @@ const viewportRect = (element) => {
 	return new DOMRect(x, y, rect.width, rect.height);
 };
 //#endregion
+//#region src/components/dnd/drawer.module.css
+var drawer_module_default = {
+	"body": "_ty1rG_body",
+	"content": "_ty1rG_content",
+	"drawer": "_ty1rG_drawer",
+	"header": "_ty1rG_header",
+	"slide-up": "_ty1rG_slide-up",
+	"title": "_ty1rG_title"
+};
+//#endregion
+//#region src/components/dnd/drawer.tsx
+const Drawer = ({ open, title, closeLabel, onClose, children }) => {
+	const titleId = useId();
+	const dialogRef = useRef(null);
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		if (!dialog || !open) return;
+		if (typeof dialog.showModal === "function") dialog.showModal();
+		else dialog.setAttribute("open", "");
+		return () => {
+			if (typeof dialog.close === "function") dialog.close();
+			else dialog.removeAttribute("open");
+		};
+	}, [open]);
+	if (!open) return null;
+	return /* @__PURE__ */ jsx("dialog", {
+		ref: dialogRef,
+		className: drawer_module_default.drawer,
+		"aria-labelledby": titleId,
+		onCancel: (e) => {
+			e.preventDefault();
+			onClose();
+		},
+		onClick: (e) => {
+			if (e.target === e.currentTarget) onClose();
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: drawer_module_default.content,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: drawer_module_default.header,
+				children: [/* @__PURE__ */ jsx("h2", {
+					id: titleId,
+					className: drawer_module_default.title,
+					children: title
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "text",
+					size: "small",
+					icon: /* @__PURE__ */ jsx(X, {}),
+					"aria-label": closeLabel,
+					onClick: onClose
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: drawer_module_default.body,
+				children
+			})]
+		})
+	});
+};
+//#endregion
 //#region src/components/dnd/layout-context.ts
 const DndRegionContext = createContext(null);
 const useDndRegions = (subject) => {
@@ -1835,6 +1506,25 @@ const useDndPalette = () => useDndRegions("useDndPalette()").palette;
 const useDndPanel = () => useDndRegions("useDndPanel()").panel;
 const useDndLayout = () => useDndRegions("useDndLayout()");
 //#endregion
+//#region src/components/dnd/panel/panel.module.css
+var panel_module_default = {
+	"actions": "gbKovW_actions",
+	"binding": "gbKovW_binding",
+	"bindingLabel": "gbKovW_bindingLabel",
+	"bindingProperty": "gbKovW_bindingProperty",
+	"bindings": "gbKovW_bindings",
+	"element": "gbKovW_element",
+	"elementHeader": "gbKovW_elementHeader",
+	"elementTag": "gbKovW_elementTag",
+	"elementText": "gbKovW_elementText",
+	"empty": "gbKovW_empty",
+	"header": "gbKovW_header",
+	"note": "gbKovW_note",
+	"panel": "gbKovW_panel",
+	"readOnly": "gbKovW_readOnly",
+	"title": "gbKovW_title"
+};
+//#endregion
 //#region src/components/dnd/panel/element-selection.ts
 const ElementSelectionContext = createContext({ ids: /* @__PURE__ */ new Set() });
 //#endregion
@@ -1924,9 +1614,40 @@ const withPanelCommit = (bindings, commit) => bindings.map((binding) => ({
 	})
 }));
 //#endregion
+//#region src/components/dnd/panel/structure.module.css
+var structure_module_default = {
+	"card": "lH7pXW_card",
+	"cardCompact": "lH7pXW_cardCompact",
+	"children": "lH7pXW_children",
+	"dragging": "lH7pXW_dragging",
+	"element": "lH7pXW_element",
+	"elementTag": "lH7pXW_elementTag",
+	"handle": "lH7pXW_handle",
+	"heading": "lH7pXW_heading",
+	"indented": "lH7pXW_indented",
+	"items": "lH7pXW_items",
+	"label": "lH7pXW_label",
+	"muted": "lH7pXW_muted",
+	"nested": "lH7pXW_nested",
+	"notice": "lH7pXW_notice",
+	"noticeDanger": "lH7pXW_noticeDanger",
+	"noticeWarning": "lH7pXW_noticeWarning",
+	"propertyLabel": "lH7pXW_propertyLabel",
+	"row": "lH7pXW_row",
+	"rowStart": "lH7pXW_rowStart",
+	"stack": "lH7pXW_stack",
+	"stackLoose": "lH7pXW_stackLoose",
+	"stackTight": "lH7pXW_stackTight",
+	"toggle": "lH7pXW_toggle",
+	"valueType": "lH7pXW_valueType"
+};
+//#endregion
+//#region src/components/dnd/panel/row-controls.module.css
+var row_controls_module_default = { "controls": "q9alSq_controls" };
+//#endregion
 //#region src/components/dnd/panel/row-controls.tsx
 const RowControls = ({ index, count, labels, disabled = false, deleteDisabled = false, onMove, onDelete }) => /* @__PURE__ */ jsxs("div", {
-	className: "flex space-x-1",
+	className: row_controls_module_default.controls,
 	children: [
 		/* @__PURE__ */ jsx(Button, {
 			size: "small",
@@ -1943,7 +1664,7 @@ const RowControls = ({ index, count, labels, disabled = false, deleteDisabled =
 			onClick: () => onMove(index + 1)
 		}),
 		/* @__PURE__ */ jsx(Button, {
-			danger: true,
+			tone: "danger",
 			size: "small",
 			icon: /* @__PURE__ */ jsx(X, {}),
 			"aria-label": labels.delete,
@@ -1954,17 +1675,26 @@ const RowControls = ({ index, count, labels, disabled = false, deleteDisabled =
 	]
 });
 //#endregion
+//#region src/components/dnd/panel/selection/selection.module.css
+var selection_module_default = {
+	"actions": "ZTKonW_actions",
+	"bar": "ZTKonW_bar",
+	"checkbox": "ZTKonW_checkbox",
+	"count": "ZTKonW_count",
+	"selectAll": "ZTKonW_selectAll"
+};
+//#endregion
 //#region src/components/dnd/panel/selection/bulk-actions-bar.tsx
 const BulkActionsBar = ({ count, disabled = false, duplicateDisabled = false, deleteDisabled = false, onDuplicate, onMoveUp, onMoveDown, onDelete, onClear }) => {
 	const messages = useLiveMessages();
 	if (count === 0) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center justify-between rounded border\n        border-blue-200 bg-blue-50 p-2",
+		className: selection_module_default.bar,
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "text-xs font-medium text-blue-700",
+			className: selection_module_default.count,
 			children: messages.selection.count(count)
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center space-x-1",
+			className: selection_module_default.actions,
 			children: [
 				/* @__PURE__ */ jsx(Button, {
 					size: "small",
@@ -1988,7 +1718,7 @@ const BulkActionsBar = ({ count, disabled = false, duplicateDisabled = false, de
 					onClick: onMoveDown
 				}),
 				/* @__PURE__ */ jsx(Button, {
-					danger: true,
+					tone: "danger",
 					size: "small",
 					icon: /* @__PURE__ */ jsx(X, {}),
 					title: messages.selection.delete,
@@ -2008,27 +1738,33 @@ const BulkActionsBar = ({ count, disabled = false, duplicateDisabled = false, de
 //#region src/components/dnd/panel/selection/select-all-checkbox.tsx
 const SelectAllCheckbox = ({ total, selected, disabled = false, onSelectAll, onClear }) => {
 	const messages = useLiveMessages();
+	const inputRef = useRef(null);
 	const isAllSelected = total > 0 && selected >= total;
-	return /* @__PURE__ */ jsx(Checkbox, {
-		className: "text-xs",
-		checked: isAllSelected,
-		indeterminate: selected > 0 && !isAllSelected,
-		disabled,
-		onChange: () => isAllSelected ? onClear() : onSelectAll(),
-		children: messages.selection.selectAll
+	const isIndeterminate = selected > 0 && !isAllSelected;
+	useEffect(() => {
+		if (inputRef.current) inputRef.current.indeterminate = isIndeterminate;
+	}, [isIndeterminate]);
+	return /* @__PURE__ */ jsxs("label", {
+		className: selection_module_default.selectAll,
+		children: [/* @__PURE__ */ jsx("input", {
+			ref: inputRef,
+			type: "checkbox",
+			className: selection_module_default.checkbox,
+			checked: isAllSelected,
+			disabled,
+			onChange: () => isAllSelected ? onClear() : onSelectAll()
+		}), messages.selection.selectAll]
 	});
 };
 //#endregion
 //#region src/components/dnd/panel/selection/selection-checkbox.tsx
-const SelectionCheckbox = ({ checked, disabled = false, onToggle }) => /* @__PURE__ */ jsx("div", {
-	onClick: (e) => {
-		if (!disabled) onToggle(e.shiftKey);
-	},
-	className: "inline-flex",
-	children: /* @__PURE__ */ jsx(Checkbox, {
-		checked,
-		disabled
-	})
+const SelectionCheckbox = ({ checked, disabled = false, onToggle }) => /* @__PURE__ */ jsx("input", {
+	type: "checkbox",
+	className: selection_module_default.checkbox,
+	checked,
+	disabled,
+	readOnly: true,
+	onClick: (e) => onToggle(e.shiftKey)
 });
 //#endregion
 //#region src/components/dnd/panel/selection/use-structural-selection.ts
@@ -2140,16 +1876,16 @@ const Children$1 = ({ value, onChange, onNodeChange }) => {
 		return map;
 	}, [items]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-3",
+		className: cn(structure_module_default.children, structure_module_default.stackLoose),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between",
+				className: structure_module_default.row,
 				children: [/* @__PURE__ */ jsx("div", {
-					className: "text-sm font-semibold text-green-700",
+					className: structure_module_default.heading,
 					children: messages.children.heading(items.length)
 				}), /* @__PURE__ */ jsx(Button, {
 					size: "small",
-					color: "green",
+					tone: "success",
 					icon: /* @__PURE__ */ jsx(Plus, {}),
 					onClick: actions.add,
 					children: messages.children.add
@@ -2170,17 +1906,17 @@ const Children$1 = ({ value, onChange, onNodeChange }) => {
 				onClear: selection.clear
 			}),
 			items.map((item, itemIndex) => /* @__PURE__ */ jsxs("div", {
-				className: "space-y-2 rounded border border-green-200 bg-green-50 p-3",
+				className: structure_module_default.card,
 				children: [
 					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center justify-between",
+						className: structure_module_default.row,
 						children: [/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center space-x-2",
+							className: structure_module_default.rowStart,
 							children: [/* @__PURE__ */ jsx(SelectionCheckbox, {
 								checked: selection.isSelected(itemIndex),
 								onToggle: (shiftKey) => selection.toggle(itemIndex, shiftKey)
 							}), /* @__PURE__ */ jsx("div", {
-								className: "text-xs font-medium text-green-800",
+								className: structure_module_default.label,
 								children: messages.children.child(itemIndex + 1, item.tagName || "fragment")
 							})]
 						}), /* @__PURE__ */ jsx(RowControls, {
@@ -2192,17 +1928,17 @@ const Children$1 = ({ value, onChange, onNodeChange }) => {
 						})]
 					}),
 					editableChildrenMap.has(itemIndex) && /* @__PURE__ */ jsxs("div", {
-						className: "space-y-2",
+						className: structure_module_default.stack,
 						children: [/* @__PURE__ */ jsx("div", {
-							className: "text-xs font-medium text-green-700",
+							className: structure_module_default.label,
 							children: messages.children.editableBindings
 						}), editableChildrenMap.get(itemIndex).map((editableNode, idx) => {
 							const nodeId = editableNode.dataAttributes.find((a) => a.name === "data-id")?.value;
 							return /* @__PURE__ */ jsx(ElementFields, {
 								id: nodeId ?? void 0,
-								className: "rounded border border-green-100 bg-white p-2\n                      data-[picked]:ring-2 data-[picked]:ring-blue-400",
+								className: structure_module_default.element,
 								header: /* @__PURE__ */ jsx("div", {
-									className: "mb-1 text-xs text-green-600",
+									className: structure_module_default.elementTag,
 									children: editableNode.tagName
 								}),
 								bindings: bindingsOf(editableNode, onNodeChange),
@@ -2211,12 +1947,12 @@ const Children$1 = ({ value, onChange, onNodeChange }) => {
 						})]
 					}),
 					!!item.children && !editableChildrenMap.has(itemIndex) && /* @__PURE__ */ jsxs("div", {
-						className: "space-y-1",
+						className: structure_module_default.stackTight,
 						children: [/* @__PURE__ */ jsx("div", {
-							className: "text-xs font-medium text-green-700",
+							className: structure_module_default.label,
 							children: messages.children.childNodes
 						}), item.children.map((node, nodeIndex) => /* @__PURE__ */ jsx(ElementFields, {
-							className: "ml-2 rounded border border-green-100 bg-white p-2",
+							className: cn(structure_module_default.element, structure_module_default.indented),
 							bindings: bindingsOf(node, onNodeChange),
 							onNodeChange
 						}, `node-${itemIndex}-${nodeIndex}`))]
@@ -2227,14 +1963,18 @@ const Children$1 = ({ value, onChange, onNodeChange }) => {
 	});
 };
 //#endregion
-//#region src/components/dnd/panel/fields/color-picker-field.tsx
+//#region src/components/dnd/panel/fields/color-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;
+	if (/^#[0-9A-Fa-f]{6}$/.test(trimmed)) return trimmed;
+	if (/^#[0-9A-Fa-f]{3}$/.test(trimmed)) {
+		const [, r, g, b] = trimmed;
+		return `#${r}${r}${g}${g}${b}${b}`;
+	}
 	return "#000000";
 };
-const ColorPickerField = ({ value: source, onChange, label }) => {
+const ColorField = ({ value: source, onChange, ...controlProps }) => {
 	const value = normalizeToHex(source);
 	const [liveValue, setLiveValue] = useState(value);
 	const [prevValue, setPrevValue] = useState(value);
@@ -2255,66 +1995,25 @@ const ColorPickerField = ({ value: source, onChange, label }) => {
 		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);
-		}
+	return /* @__PURE__ */ jsxs("div", {
+		className: fields_module_default.color,
+		children: [/* @__PURE__ */ jsx("input", {
+			...controlProps,
+			type: "color",
+			value: liveValue,
+			className: cn(fields_module_default.control, fields_module_default.colorSwatch),
+			onChange: (e) => {
+				setLiveValue(e.target.value);
+				debouncedCommit();
+			},
+			onBlur: () => commit(liveValue)
+		}), /* @__PURE__ */ jsx("code", {
+			className: fields_module_default.colorSource,
+			children: source
+		})]
 	});
 };
 //#endregion
-//#region src/components/dnd/panel/fields/field-ids.ts
-const FieldIdsContext = createContext(null);
-const useFieldIds = () => {
-	const labelledId = useContext(FieldIdsContext);
-	const fallbackId = useId();
-	const controlId = labelledId ?? fallbackId;
-	return {
-		controlId,
-		errorId: `${controlId}-error`,
-		isLabelled: labelledId !== null
-	};
-};
-const LABELABLE_KINDS = /* @__PURE__ */ new Set([
-	"text",
-	"number",
-	"url",
-	"email",
-	"tel",
-	"time"
-]);
-//#endregion
-//#region src/components/dnd/panel/fields/field-kind.ts
-const isColorProperty = (property) => property.toLowerCase().includes("color");
-const getFieldKind = (binding) => {
-	const { property, type, value } = binding;
-	if (binding.canEditValue === false) return "readonly";
-	if (property === "items" || property === "data" || type === "array") return "items";
-	if (type === "richtext") return "richtext";
-	if (property === BINDING_PROP.INNER_HTML) return "html";
-	if (type === "jsx") return "jsx";
-	if (property === "children" && Array.isArray(value)) return "children";
-	if (typeof value === "object" && value !== null && !Array.isArray(value)) return "object";
-	if (type === "boolean" || typeof value === "boolean") return "boolean";
-	if (binding.options && Array.isArray(binding.options)) return "select";
-	if (type === "color" || isColorProperty(property)) return "color";
-	if (type === "date") return "date";
-	if (type === "time") return "time";
-	if (type === "datetime") return "datetime";
-	if (type === "url") return "url";
-	if (type === "email") return "email";
-	if (type === "tel") return "tel";
-	if (type === "number" || typeof value === "number") return "number";
-	return "text";
-};
-const isStructuralFieldKind = (kind) => kind === "items" || kind === "children";
-//#endregion
 //#region src/components/dnd/panel/fields/jsx-editor-field.tsx
 const JSXEditorField = ({ value, isHTML, onSave }) => {
 	const selectionRef = useRef(null);
@@ -2350,10 +2049,15 @@ const JSXEditorField = ({ value, isHTML, onSave }) => {
 //#region src/components/dnd/panel/fields/labeled-field.tsx
 const LabeledField = ({ binding, label, labelClassName, children }) => {
 	const controlId = useId();
+	const labelId = `${controlId}-label`;
 	const isLabelable = LABELABLE_KINDS.has(getFieldKind(binding));
 	return /* @__PURE__ */ jsxs(FieldIdsContext.Provider, {
-		value: isLabelable ? controlId : null,
+		value: {
+			controlId,
+			labelId
+		},
 		children: [/* @__PURE__ */ jsx("label", {
+			id: labelId,
 			htmlFor: isLabelable ? controlId : void 0,
 			className: labelClassName,
 			children: label
@@ -2395,7 +2099,7 @@ const SortableItems = ({ items, disabled, onMove, children }) => {
 			strategy: verticalListSortingStrategy,
 			disabled,
 			children: /* @__PURE__ */ jsx("div", {
-				className: "space-y-4",
+				className: structure_module_default.stackLoose,
 				children: items.map(children)
 			})
 		})
@@ -2413,11 +2117,11 @@ const ItemCard = ({ id, title, disabled, expanded, onToggle, checkbox, controls,
 			transform: CSS$1.Translate.toString(transform),
 			transition
 		},
-		className: cn(className, isDragging && "relative z-10 shadow-md"),
+		className: cn(className, isDragging && structure_module_default.dragging),
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-between",
+			className: structure_module_default.row,
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center space-x-1",
+				className: structure_module_default.rowStart,
 				children: [
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
@@ -2426,7 +2130,7 @@ const ItemCard = ({ id, title, disabled, expanded, onToggle, checkbox, controls,
 						...listeners,
 						"aria-label": messages.items.reorder(title),
 						disabled,
-						className: "cursor-grab rounded p-0.5 text-gray-400\n              hover:text-gray-700 disabled:cursor-not-allowed\n              disabled:opacity-40",
+						className: structure_module_default.handle,
 						children: /* @__PURE__ */ jsx(GripVertical, { size: 14 })
 					}),
 					checkbox,
@@ -2434,7 +2138,7 @@ const ItemCard = ({ id, title, disabled, expanded, onToggle, checkbox, controls,
 						type: "button",
 						"aria-expanded": expanded,
 						onClick: onToggle,
-						className: "inline-flex items-center space-x-1 rounded px-1 text-xs\n              font-medium",
+						className: structure_module_default.toggle,
 						children: [expanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14 }), /* @__PURE__ */ jsx("span", { children: title })]
 					})
 				]
@@ -3024,9 +2728,9 @@ const useDndItems = (value, { render, onChange, onNodeChange, minItems, maxItems
 //#region src/components/dnd/panel/items/items.tsx
 const NestedGroup = ({ group, onNodeChange }) => {
 	if (group.fallback) return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-2",
+		className: structure_module_default.stack,
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "text-xs font-medium text-blue-700",
+			className: structure_module_default.label,
 			children: group.property
 		}), /* @__PURE__ */ jsx(Field, {
 			binding: group.fallback,
@@ -3034,9 +2738,9 @@ const NestedGroup = ({ group, onNodeChange }) => {
 		})]
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-2",
+		className: structure_module_default.stack,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "text-xs font-medium text-blue-700",
+			className: structure_module_default.label,
 			children: [
 				group.property,
 				" Bindings (",
@@ -3045,9 +2749,9 @@ const NestedGroup = ({ group, onNodeChange }) => {
 			]
 		}), group.elements.map((element) => /* @__PURE__ */ jsx(ElementFields, {
 			id: element.id,
-			className: "rounded border border-blue-100 bg-blue-50 p-2\n            data-[picked]:ring-2 data-[picked]:ring-blue-400",
+			className: structure_module_default.element,
 			header: /* @__PURE__ */ jsxs("div", {
-				className: "mb-1 text-xs text-blue-600",
+				className: structure_module_default.elementTag,
 				children: [
 					"<",
 					element.tagName,
@@ -3069,31 +2773,31 @@ const Items = ({ value, render, minItems, maxItems, onChange, onChildChange }) =
 		maxItems
 	});
 	const header = /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center justify-between",
+		className: structure_module_default.row,
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "text-sm font-semibold",
+			className: structure_module_default.heading,
 			children: messages.items.heading(items.length)
 		}), items.length > 0 && canEditStructure && /* @__PURE__ */ jsx(Button, {
 			size: "small",
 			icon: /* @__PURE__ */ jsx(Plus, {}),
 			variant: "solid",
-			color: "green",
+			tone: "success",
 			disabled: !canAddItems(),
 			onClick: actions.add,
 			children: messages.items.add
 		})]
 	});
 	if (parseError) return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-4",
+		className: cn(structure_module_default.items, structure_module_default.stackLoose),
 		children: [header, /* @__PURE__ */ jsx("div", {
-			className: "rounded border border-dashed border-red-200 p-3 text-xs\n            text-red-600",
+			className: structure_module_default.noticeDanger,
 			children: messages.items.unreadable
 		})]
 	});
 	if (items.length === 0) return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-4",
+		className: cn(structure_module_default.items, structure_module_default.stackLoose),
 		children: [header, /* @__PURE__ */ jsx("div", {
-			className: "rounded border border-dashed border-gray-200 p-3 text-xs\n            text-gray-500",
+			className: structure_module_default.notice,
 			children: messages.items.empty
 		})]
 	});
@@ -3109,12 +2813,12 @@ const Items = ({ value, render, minItems, maxItems, onChange, onChildChange }) =
 		onClear: selection.clear
 	});
 	const objectBody = (item) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: "space-y-2",
+		className: structure_module_default.stack,
 		children: item.properties.map((binding) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-			className: "flex flex-col space-y-2",
+			className: structure_module_default.stack,
 			children: /* @__PURE__ */ jsx(LabeledField, {
 				binding,
-				labelClassName: "w-20 shrink-0 text-xs font-medium",
+				labelClassName: structure_module_default.propertyLabel,
 				label: binding.label,
 				children: /* @__PURE__ */ jsx(Field, {
 					binding,
@@ -3122,7 +2826,7 @@ const Items = ({ value, render, minItems, maxItems, onChange, onChildChange }) =
 				})
 			})
 		}), /* @__PURE__ */ jsxs("span", {
-			className: "text-right text-xs text-gray-500",
+			className: structure_module_default.valueType,
 			children: [
 				"(",
 				String(binding.meta?.valueType),
@@ -3130,12 +2834,12 @@ const Items = ({ value, render, minItems, maxItems, onChange, onChildChange }) =
 			]
 		})] }, `${item.id}-${binding.property}-${binding.label}`))
 	}), /* @__PURE__ */ jsx("div", {
-		className: "space-y-3 border-t pt-2",
+		className: structure_module_default.nested,
 		children: item.nested.length ? item.nested.map((group) => /* @__PURE__ */ jsx(NestedGroup, {
 			group,
 			onNodeChange: onChildChange
 		}, group.property)) : /* @__PURE__ */ jsxs("div", {
-			className: "text-xs text-gray-500",
+			className: structure_module_default.muted,
 			children: [
 				/* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
@@ -3148,11 +2852,11 @@ const Items = ({ value, render, minItems, maxItems, onChange, onChildChange }) =
 	})] });
 	const allExpanded = expansion.expandedIds.length === items.length;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-4",
+		className: cn(structure_module_default.items, structure_module_default.stackLoose),
 		children: [
 			header,
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between",
+				className: structure_module_default.row,
 				children: [/* @__PURE__ */ jsx(SelectAllCheckbox, {
 					total: items.length,
 					selected: selection.selected.size,
@@ -3168,7 +2872,7 @@ const Items = ({ value, render, minItems, maxItems, onChange, onChildChange }) =
 			}),
 			bulkBar,
 			!canEditStructure && /* @__PURE__ */ jsx("div", {
-				className: "rounded border border-dashed border-amber-200 p-3 text-xs\n            text-amber-700",
+				className: structure_module_default.noticeWarning,
 				children: messages.items.structureLocked
 			}),
 			/* @__PURE__ */ jsx(SortableItems, {
@@ -3195,7 +2899,7 @@ const Items = ({ value, render, minItems, maxItems, onChange, onChildChange }) =
 						onMove: (toIndex) => actions.move(item.elementIndex, toIndex),
 						onDelete: () => actions.remove(item.elementIndex)
 					}),
-					className: kind === "primitive" ? "space-y-2 rounded border border-gray-100 bg-gray-50 p-2" : "space-y-3 rounded border bg-gray-50 p-3",
+					className: cn(structure_module_default.card, kind === "primitive" && structure_module_default.cardCompact),
 					children: kind === "primitive" ? /* @__PURE__ */ jsx(Field, {
 						binding: item.value,
 						onNodeChange: onChildChange
@@ -3207,74 +2911,22 @@ const Items = ({ value, render, minItems, maxItems, onChange, onChildChange }) =
 };
 //#endregion
 //#region src/components/dnd/panel/field.tsx
-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;
-};
-const RICHTEXT_TOOLBAR = [
-	"bold",
-	"italic",
-	"underline",
-	"bulletList",
-	"orderedList",
-	"link"
-];
-const FieldError = ({ id, message }) => message ? /* @__PURE__ */ jsx("p", {
-	id,
-	role: "alert",
-	className: "mt-1 mb-0 text-xs text-red-500",
-	children: message
-}) : null;
 const BuiltinField = ({ binding, onNodeChange }) => {
 	const messages = useLiveMessages();
-	const validationOptions = { messages: messages.validation };
 	const { id, value, rawValue, onChange } = binding;
-	const [validationError, setValidationError] = useState(null);
-	const { controlId, errorId, isLabelled } = useFieldIds();
-	const controlProps = {
-		id: controlId,
-		"aria-label": isLabelled ? void 0 : binding.label,
-		"aria-invalid": validationError ? true : void 0,
-		"aria-describedby": validationError ? errorId : void 0
-	};
-	const [text, setText] = useState(rawValue);
-	const [prevRawValue, setPrevRawValue] = useState(rawValue);
-	if (rawValue !== prevRawValue) {
-		setPrevRawValue(rawValue);
-		setText(rawValue);
-	}
+	const { text, setText, validationError, errorId, controlProps, commitIfChanged, validateAndCommit } = useFieldState(binding);
 	const kind = getFieldKind(binding);
 	if (kind === "readonly") return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-1 rounded border border-dashed border-amber-200 p-3\n          text-xs text-amber-700",
+		className: fields_module_default.readonly,
 		children: [
 			/* @__PURE__ */ jsx("div", { children: messages.panel.expressionPreserved }),
 			/* @__PURE__ */ jsx("code", {
-				className: "block overflow-x-auto text-amber-800",
+				className: fields_module_default.readonlyCode,
 				children: rawValue
 			}),
 			/* @__PURE__ */ jsx("div", { children: messages.panel.useCodeEditor })
 		]
 	});
-	const commitIfChanged = (next) => {
-		if (next !== (typeof next === "string" ? rawValue : value)) onChange(next);
-	};
-	const validateAndCommit = (next) => {
-		const result = validateBindingValue(binding, next, validationOptions);
-		if (!result.valid) {
-			setValidationError(result.message ?? messages.panel.invalidValue);
-			return;
-		}
-		setValidationError(null);
-		commitIfChanged(next);
-	};
 	if (kind === "items") return /* @__PURE__ */ jsx(Items, {
 		value: rawValue,
 		render: binding.render,
@@ -3283,10 +2935,13 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 		onChange,
 		onChildChange: onNodeChange
 	});
-	if (kind === "richtext") return /* @__PURE__ */ jsx(RichTextEditor, {
-		value: rawValue,
-		toolbar: RICHTEXT_TOOLBAR,
-		onChange: commitIfChanged
+	if (kind === "richtext") return /* @__PURE__ */ jsx("textarea", {
+		...controlProps,
+		rows: 4,
+		value: text,
+		className: cn(fields_module_default.control, fields_module_default.mono),
+		onChange: (e) => setText(e.target.value),
+		onBlur: (e) => commitIfChanged(e.target.value)
 	});
 	if (kind === "html" || kind === "jsx") return /* @__PURE__ */ jsx(JSXEditorField, {
 		value: rawValue,
@@ -3301,17 +2956,17 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 	if (kind === "object") {
 		const objectValue = value;
 		return /* @__PURE__ */ jsx("div", {
-			className: "space-y-2 rounded border border-gray-200 bg-gray-50 p-2",
+			className: fields_module_default.object,
 			children: Object.entries(objectValue).map(([key, val]) => {
 				const nested = resolveRenderEntry(binding.render, key);
 				return /* @__PURE__ */ jsx("div", {
-					className: "space-y-1",
+					className: fields_module_default.stack,
 					children: /* @__PURE__ */ jsx(LabeledField, {
 						binding: {
 							...nested,
 							value: val
 						},
-						labelClassName: "block text-xs font-medium text-gray-600",
+						labelClassName: fields_module_default.label,
 						label: nested.label,
 						children: /* @__PURE__ */ jsx(Field, {
 							binding: {
@@ -3333,47 +2988,45 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 			})
 		});
 	}
-	if (kind === "boolean") return /* @__PURE__ */ jsx(Checkbox, {
+	if (kind === "boolean") return /* @__PURE__ */ jsx("input", {
+		...controlProps,
+		type: "checkbox",
 		checked: value === true || value === "true",
-		onChange: (checked) => {
-			onChange(checked);
+		className: fields_module_default.checkbox,
+		onChange: (e) => {
+			onChange(e.target.checked);
 		}
 	});
-	const stringValue = rawValue;
-	if (kind === "select") return /* @__PURE__ */ jsx(Select, {
-		"aria-label": binding.label,
-		value: stringValue,
-		options: binding.options ?? [],
-		onChange: commitIfChanged
+	if (kind === "select") return /* @__PURE__ */ jsx("select", {
+		...controlProps,
+		value: rawValue,
+		className: fields_module_default.control,
+		onChange: (e) => commitIfChanged(e.target.value),
+		children: (binding.options ?? []).map((option) => /* @__PURE__ */ jsx("option", {
+			value: option.value,
+			children: option.label
+		}, option.value))
 	});
-	if (kind === "color") return /* @__PURE__ */ jsx(ColorPickerField, {
-		value: stringValue,
-		label: binding.label,
+	if (kind === "color") return /* @__PURE__ */ jsx(ColorField, {
+		...controlProps,
+		value: rawValue,
 		onChange: commitIfChanged
 	});
-	if (kind === "date" || kind === "datetime") {
-		const withTime = kind === "datetime";
-		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DatePicker, {
-			value: parseDateValue(stringValue),
-			showTime: withTime,
-			onChange: (date) => validateAndCommit(date ? formatDateValue(date, withTime) : "")
-		}), /* @__PURE__ */ jsx(FieldError, {
-			id: errorId,
-			message: validationError
-		})] });
-	}
-	if (kind === "time") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(TimePicker, {
+	if (kind === "date" || kind === "datetime" || kind === "time") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("input", {
 		...controlProps,
-		value: stringValue || null,
-		onChange: (time) => validateAndCommit(time ?? "")
+		type: kind === "datetime" ? "datetime-local" : kind,
+		value: rawValue,
+		className: fields_module_default.control,
+		onChange: (e) => validateAndCommit(e.target.value)
 	}), /* @__PURE__ */ jsx(FieldError, {
 		id: errorId,
 		message: validationError
 	})] });
-	if (kind === "url" || kind === "email" || kind === "tel") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input, {
+	if (kind === "url" || kind === "email" || kind === "tel") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("input", {
 		...controlProps,
 		type: kind,
 		value: text,
+		className: fields_module_default.control,
 		onChange: (e) => setText(e.target.value),
 		placeholder: kind === "url" ? messages.panel.urlPlaceholder : kind === "email" ? messages.panel.emailPlaceholder : messages.panel.telPlaceholder,
 		onBlur: (e) => validateAndCommit(e.target.value.trim())
@@ -3381,11 +3034,12 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 		id: errorId,
 		message: validationError
 	})] });
-	if (kind === "number") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input, {
+	if (kind === "number") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("input", {
 		...controlProps,
 		type: "number",
 		step: binding.step,
 		value: text,
+		className: fields_module_default.control,
 		onChange: (e) => setText(e.target.value),
 		placeholder: messages.panel.numberPlaceholder,
 		onBlur: (e) => {
@@ -3397,9 +3051,11 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 		id: errorId,
 		message: validationError
 	})] });
-	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input.TextArea, {
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("textarea", {
 		...controlProps,
+		rows: 2,
 		value: text,
+		className: fields_module_default.control,
 		onChange: (e) => setText(e.target.value),
 		placeholder: messages.panel.textPlaceholder,
 		onBlur: (e) => {
@@ -3449,29 +3105,26 @@ const ElementFields = ({ id, header, bindings, onNodeChange, children, ...props
 		children: [
 			header,
 			bindings.length > 0 && /* @__PURE__ */ jsx("div", {
-				className: "space-y-2 rounded",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "space-y-1",
-					children: bindings.map((binding) => /* @__PURE__ */ jsx("div", {
-						className: "space-y-1",
-						children: /* @__PURE__ */ jsx(LabeledField, {
+				className: panel_module_default.bindings,
+				children: bindings.map((binding) => /* @__PURE__ */ jsx("div", {
+					className: panel_module_default.binding,
+					children: /* @__PURE__ */ jsx(LabeledField, {
+						binding,
+						labelClassName: panel_module_default.bindingLabel,
+						label: /* @__PURE__ */ jsxs(Fragment, { children: [binding.label, /* @__PURE__ */ jsxs("span", {
+							className: panel_module_default.bindingProperty,
+							children: [
+								"(",
+								binding.property,
+								")"
+							]
+						})] }),
+						children: /* @__PURE__ */ jsx(Field, {
 							binding,
-							labelClassName: "block text-xs font-semibold text-gray-700",
-							label: /* @__PURE__ */ jsxs(Fragment, { children: [binding.label, /* @__PURE__ */ jsxs("span", {
-								className: "ml-1 text-gray-400",
-								children: [
-									"(",
-									binding.property,
-									")"
-								]
-							})] }),
-							children: /* @__PURE__ */ jsx(Field, {
-								binding,
-								onNodeChange
-							})
+							onNodeChange
 						})
-					}, `${binding.property}-${binding.label}`))
-				})
+					})
+				}, `${binding.property}-${binding.label}`))
 			}),
 			children
 		]
@@ -3516,8 +3169,8 @@ const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canM
 		ids: new Set(pickedId ? [pickedId] : []),
 		scrollRootRef: rootRef
 	}), [pickedId]);
-	if (!item) return /* @__PURE__ */ jsx(Typography.Paragraph, {
-		className: cn("p-4 text-sm text-gray-500"),
+	if (!item) return /* @__PURE__ */ jsx("p", {
+		className: panel_module_default.empty,
 		children: messages.panel.selectSection
 	});
 	return /* @__PURE__ */ jsxs("div", {
@@ -3528,15 +3181,15 @@ const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canM
 		onBlur: (e) => {
 			if (!e.currentTarget.contains(e.relatedTarget)) setFocusedId(null);
 		},
-		className: cn("h-full space-y-4 p-4", "overflow-x-hidden overflow-y-auto"),
+		className: panel_module_default.panel,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ jsx(Typography.Title, {
-					className: "text-lg font-semibold",
+				className: panel_module_default.header,
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: panel_module_default.title,
 					children: item.name
 				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-1",
+					className: panel_module_default.actions,
 					children: [
 						onMoveUp && /* @__PURE__ */ jsx(Button, {
 							icon: /* @__PURE__ */ jsx(ChevronUp, {}),
@@ -3551,7 +3204,7 @@ const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canM
 							"aria-label": messages.section.moveDown
 						}),
 						onDelete && /* @__PURE__ */ jsx(Button, {
-							danger: true,
+							tone: "danger",
 							icon: /* @__PURE__ */ jsx(Trash, {}),
 							onClick: () => onDelete(item.id),
 							"aria-label": messages.section.delete
@@ -3559,13 +3212,13 @@ const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canM
 					]
 				})]
 			}),
-			readOnly && /* @__PURE__ */ jsx(Typography.Text, {
+			readOnly && /* @__PURE__ */ jsx("span", {
 				role: "status",
-				className: "block text-xs text-amber-700",
+				className: panel_module_default.readOnly,
 				children: messages.panel.readOnly
 			}),
-			!groups.length && /* @__PURE__ */ jsx(Typography.Text, {
-				className: "text-xs text-gray-400",
+			!groups.length && /* @__PURE__ */ jsx("span", {
+				className: panel_module_default.note,
 				children: messages.panel.noEditableElements
 			}),
 			/* @__PURE__ */ jsx(ElementSelectionContext.Provider, {
@@ -3576,14 +3229,14 @@ const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canM
 						id: group[0].id,
 						role: "group",
 						"aria-label": element.label,
-						className: "rounded data-[picked]:ring-2\n                data-[picked]:ring-blue-400 data-[picked]:ring-offset-2",
+						className: panel_module_default.element,
 						header: groups.length > 1 && /* @__PURE__ */ jsxs("div", {
-							className: "mb-2 flex min-w-0 items-baseline gap-1.5 border-b\n                      border-gray-100 pb-1 text-xs",
+							className: panel_module_default.elementHeader,
 							children: [/* @__PURE__ */ jsx("code", {
-								className: "shrink-0 text-gray-500",
+								className: panel_module_default.elementTag,
 								children: element.tagName
 							}), element.text && /* @__PURE__ */ jsx("span", {
-								className: "truncate text-gray-400",
+								className: panel_module_default.elementText,
 								children: element.text
 							})]
 						}),
@@ -3596,12 +3249,126 @@ const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canM
 	});
 };
 //#endregion
+//#region src/components/dnd/split-panes.module.css
+var split_panes_module_default = {
+	"center": "s-4F9W_center",
+	"container": "s-4F9W_container",
+	"handle": "s-4F9W_handle",
+	"pane": "s-4F9W_pane"
+};
+//#endregion
+//#region src/components/dnd/split-panes.tsx
+const DEFAULT_SIZE = 20;
+const MIN_SIZE = 15;
+const MAX_SIZE = 35;
+const KEYBOARD_STEP = 2;
+const clampSize = (size) => {
+	if (size < MIN_SIZE / 2) return 0;
+	return Math.min(MAX_SIZE, Math.max(MIN_SIZE, size));
+};
+const SplitPanes = ({ start, center, end, labels }) => {
+	const containerRef = useRef(null);
+	const [sizes, setSizes] = useState({
+		start: DEFAULT_SIZE,
+		end: DEFAULT_SIZE
+	});
+	const restoreRef = useRef({
+		start: DEFAULT_SIZE,
+		end: DEFAULT_SIZE
+	});
+	const resize = (side, size) => {
+		if (size > 0) restoreRef.current[side] = size;
+		setSizes((prev) => ({
+			...prev,
+			[side]: size
+		}));
+	};
+	const onPointerDown = (side) => (e) => {
+		const container = containerRef.current;
+		if (!container || e.button !== 0) return;
+		e.preventDefault();
+		const handle = e.currentTarget;
+		const width = container.getBoundingClientRect().width;
+		const startX = e.clientX;
+		const startSize = sizes[side];
+		handle.setPointerCapture(e.pointerId);
+		const onMove = (move) => {
+			const delta = (move.clientX - startX) / width * 100;
+			resize(side, clampSize(startSize + (side === "start" ? delta : -delta)));
+		};
+		const onUp = () => {
+			handle.removeEventListener("pointermove", onMove);
+			handle.removeEventListener("pointerup", onUp);
+			handle.removeEventListener("pointercancel", onUp);
+		};
+		handle.addEventListener("pointermove", onMove);
+		handle.addEventListener("pointerup", onUp);
+		handle.addEventListener("pointercancel", onUp);
+	};
+	const onKeyDown = (side) => (e) => {
+		const grow = side === "start" ? "ArrowRight" : "ArrowLeft";
+		const shrink = side === "start" ? "ArrowLeft" : "ArrowRight";
+		const size = sizes[side];
+		if (e.key === grow || e.key === shrink) {
+			e.preventDefault();
+			const step = e.key === grow ? KEYBOARD_STEP : -2;
+			resize(side, Math.min(MAX_SIZE, Math.max(MIN_SIZE, size + step)));
+			return;
+		}
+		if (e.key === "Home" || e.key === "End") {
+			e.preventDefault();
+			resize(side, e.key === "Home" ? MIN_SIZE : MAX_SIZE);
+			return;
+		}
+		if (e.key === "Enter") {
+			e.preventDefault();
+			resize(side, size > 0 ? 0 : restoreRef.current[side]);
+		}
+	};
+	const handle = (side) => /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		tabIndex: 0,
+		"aria-orientation": "vertical",
+		"aria-label": labels[side],
+		"aria-valuenow": Math.round(sizes[side]),
+		"aria-valuemin": 0,
+		"aria-valuemax": MAX_SIZE,
+		className: split_panes_module_default.handle,
+		onPointerDown: onPointerDown(side),
+		onKeyDown: onKeyDown(side),
+		onDoubleClick: () => resize(side, sizes[side] > 0 ? 0 : restoreRef.current[side])
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: split_panes_module_default.container,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: split_panes_module_default.pane,
+				style: { flexBasis: `${sizes.start}%` },
+				hidden: sizes.start === 0,
+				children: start
+			}),
+			handle("start"),
+			/* @__PURE__ */ jsx("div", {
+				className: split_panes_module_default.center,
+				children: center
+			}),
+			handle("end"),
+			/* @__PURE__ */ jsx("div", {
+				className: split_panes_module_default.pane,
+				style: { flexBasis: `${sizes.end}%` },
+				hidden: sizes.end === 0,
+				children: end
+			})
+		]
+	});
+};
+//#endregion
 //#region src/components/dnd/layout.tsx
 const PaletteItems = ({ subject }) => {
 	const { palette: { items, onAdd }, isMobile } = useDndRegions(subject);
-	return /* @__PURE__ */ jsx(Space, {
-		orientation: "vertical",
-		align: "start",
+	return /* @__PURE__ */ jsx("div", {
+		className: layout_module_default.paletteItems,
 		children: items.map((item) => /* @__PURE__ */ jsx(DefaultDraggableItem, {
 			item,
 			onAdd,
@@ -3624,7 +3391,7 @@ const PanelFields = ({ subject }) => {
 	});
 };
 const Palette = ({ className, ...restProps }) => /* @__PURE__ */ jsx("div", {
-	className: cn("h-full overflow-y-auto bg-gray-50 p-4", className),
+	className: cn(layout_module_default.palette, className),
 	...restProps,
 	children: /* @__PURE__ */ jsx(PaletteItems, { subject: "<Live.Dnd.Palette>" })
 });
@@ -3633,7 +3400,7 @@ const Canvas = ({ className, style, ...restProps }) => {
 	const inspector = useDndInspector();
 	const messages = useLiveMessages();
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative h-full w-full overflow-y-auto", className),
+		className: cn(layout_module_default.canvas, className),
 		"data-frame-container": true,
 		style: {
 			isolation: "isolate",
@@ -3643,12 +3410,12 @@ const Canvas = ({ className, style, ...restProps }) => {
 		},
 		...restProps,
 		children: [canvas, !documentError && /* @__PURE__ */ jsx("div", {
-			className: "pointer-events-none sticky bottom-0 z-70 h-0",
+			className: layout_module_default.pickerDock,
 			children: /* @__PURE__ */ jsx("div", {
-				className: "pointer-events-auto absolute bottom-3 left-3",
+				className: layout_module_default.picker,
 				children: /* @__PURE__ */ jsx(Button, {
 					icon: /* @__PURE__ */ jsx(Crosshair, {}),
-					color: "primary",
+					tone: "primary",
 					variant: inspector.active ? "solid" : "outlined",
 					"aria-pressed": inspector.active,
 					"aria-label": messages.canvas.pickElement,
@@ -3660,7 +3427,7 @@ const Canvas = ({ className, style, ...restProps }) => {
 	});
 };
 const Panel = ({ className, ...restProps }) => /* @__PURE__ */ jsx("div", {
-	className: cn("h-full", className),
+	className: cn(layout_module_default.panel, className),
 	...restProps,
 	children: /* @__PURE__ */ jsx(PanelFields, { subject: "<Live.Dnd.Panel>" })
 });
@@ -3668,52 +3435,36 @@ const Layout = ({ palette, panel }) => {
 	const { isMobile, selectedId, clearSelection, paletteOpen, setPaletteOpen } = useDndRegions("<Live.Dnd.Layout>");
 	const messages = useLiveMessages();
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		isMobile ? /* @__PURE__ */ jsx(Canvas, {}) : /* @__PURE__ */ jsxs(Splitter, {
-			withHandle: true,
-			orientation: "horizontal",
-			children: [
-				/* @__PURE__ */ jsx(Splitter.Panel, {
-					defaultSize: "20%",
-					minSize: "15%",
-					maxSize: "35%",
-					collapsible: true,
-					children: palette ?? /* @__PURE__ */ jsx(Palette, {})
-				}),
-				/* @__PURE__ */ jsx(Splitter.Panel, {
-					defaultSize: "60%",
-					children: /* @__PURE__ */ jsx(Canvas, {})
-				}),
-				/* @__PURE__ */ jsx(Splitter.Panel, {
-					defaultSize: "20%",
-					minSize: "15%",
-					maxSize: "35%",
-					collapsible: true,
-					children: panel ?? /* @__PURE__ */ jsx(Panel, {})
-				})
-			]
+		isMobile ? /* @__PURE__ */ jsx(Canvas, {}) : /* @__PURE__ */ jsx(SplitPanes, {
+			start: palette ?? /* @__PURE__ */ jsx(Palette, {}),
+			center: /* @__PURE__ */ jsx(Canvas, {}),
+			end: panel ?? /* @__PURE__ */ jsx(Panel, {}),
+			labels: {
+				start: messages.canvas.resizePalette,
+				end: messages.canvas.resizePanel
+			}
 		}),
 		/* @__PURE__ */ jsx(Button, {
-			type: "primary",
+			variant: "solid",
+			tone: "primary",
 			shape: "circle",
 			icon: /* @__PURE__ */ jsx(LayoutGrid, {}),
 			"aria-label": messages.canvas.palette,
-			className: "fixed right-4 bottom-4 z-20 md:hidden",
+			className: layout_module_default.paletteButton,
 			onClick: () => setPaletteOpen(true)
 		}),
 		/* @__PURE__ */ jsx(Drawer, {
 			open: isMobile && paletteOpen,
 			onClose: () => setPaletteOpen(false),
-			direction: "bottom",
-			size: "large",
 			title: messages.canvas.palette,
+			closeLabel: messages.canvas.close,
 			children: palette ?? /* @__PURE__ */ jsx(PaletteItems, { subject: "<Live.Dnd.Layout>" })
 		}),
 		/* @__PURE__ */ jsx(Drawer, {
 			open: isMobile && Boolean(selectedId),
 			onClose: clearSelection,
-			direction: "bottom",
-			size: "large",
 			title: messages.canvas.properties,
+			closeLabel: messages.canvas.close,
 			children: panel ?? /* @__PURE__ */ jsx(PanelFields, { subject: "<Live.Dnd.Layout>" })
 		})
 	] });
@@ -4338,13 +4089,13 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		children: [
 			stale && /* @__PURE__ */ jsx("div", {
 				role: "status",
-				className: cn("sticky top-0 z-70", "border-b border-amber-200 bg-amber-50 px-3 py-2", "text-sm text-amber-900"),
+				className: canvas_module_default.stale,
 				children: messages.canvas.stale
 			}),
 			/* @__PURE__ */ jsx(Droppable, {
-				className: cn(!sections.length && "h-full"),
+				className: cn(!sections.length && canvas_module_default.fill),
 				children: !sections.length ? /* @__PURE__ */ jsx("div", {
-					className: cn("flex items-center justify-center", "h-full", "text-gray-500"),
+					className: canvas_module_default.empty,
 					children: /* @__PURE__ */ jsx(CanvasNotice, { ...emptyCanvasNotice(messages, problem, isMobile) })
 				}) : /* @__PURE__ */ jsx(SortableContext, {
 					items: sections.map((s) => s.id),
@@ -4390,7 +4141,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 			modifiers: [conditionalModifiers],
 			onDragEnd,
 			children: [/* @__PURE__ */ jsx("div", {
-				className: cn("relative flex h-full w-full", className),
+				className: cn(layout_module_default.root, className),
 				...restProps,
 				children: /* @__PURE__ */ jsx(DndEditOptionsContext.Provider, {
 					value: {
@@ -4441,6 +4192,6 @@ Dnd.Canvas = Canvas;
 Dnd.Panel = Panel;
 Dnd.Layout = Layout;
 //#endregion
-export { DraggableItem as _, Panel as a, getFieldKind as c, resolvePanelBindings as d, withPanelCommit as f, useDndInspector as g, useDndPanel as h, Palette as i, isStructuralFieldKind as l, useDndPalette as m, Canvas as n, Field as o, useDndLayout as p, Layout as r, useDndItems as s, Dnd as t, useDndChildren as u };
+export { Panel as a, useDndChildren as c, useDndLayout as d, useDndPalette as f, DraggableItem as h, Palette as i, resolvePanelBindings as l, useDndInspector as m, Canvas as n, Field as o, useDndPanel as p, Layout as r, useDndItems as s, Dnd as t, withPanelCommit as u };
 
-//# sourceMappingURL=dnd-BlC1gqUy.js.map
+//# sourceMappingURL=dnd-BvjEDo-x.js.map