@jbpark/live-editor 5.0.0 → 6.1.0

package/dist/{dnd-BlC1gqUy.js → dnd-COjjjuD7.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-BkGWDZGc.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-DyFnX8yE.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-rD8NuRI8.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-0nuRN57N.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,
-                  },
-                  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' },
-                    ],
+            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' },
+                    },
                   },
-                  progress: {
-                    type: 'number',
-                    label: 'Progress',
-                    min: 0,
-                    max: 100,
-                    widget: { type: 'slider', step: 10, unit: '%' },
+                ]}
+                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',
                   },
-                  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"
+              >
+                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',
-                    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: '#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',
                   },
-                },
-              },
-            ]}
-            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',
-                )}
+                ]}
+                href="https://github.com"
+                className="text-sm text-indigo-500 hover:underline"
               >
-                <span
-                  className="size-3 shrink-0 rounded-full"
-                  style={{ backgroundColor: item.color }}
+                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',
+                    render: {
+                      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: '%' },
+                    },
+                  ]}
+                  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);
@@ -1664,6 +1234,16 @@ const Sortable = ({ id, children, selected, onClick, onDelete, onCopy, onMoveUp,
 			onClick?.();
 			return;
 		}
+		if (e.altKey && (e.key === "ArrowUp" || e.key === "ArrowDown") && handlers) {
+			e.preventDefault();
+			handlers.onMoveKey(id, e.key === "ArrowUp" ? "up" : "down");
+			return;
+		}
+		if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "d" && handlers) {
+			e.preventDefault();
+			handlers.onCopyKey(id);
+			return;
+		}
 		const to = NAVIGATION_KEYS[e.key];
 		if (to && handlers) {
 			e.preventDefault();
@@ -1691,10 +1271,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 +1283,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 +1304,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 +1342,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 +1446,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 +1516,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 +1624,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 +1674,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 +1685,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 +1728,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 +1748,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 +1886,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 +1916,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 +1938,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 +1957,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 +1973,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 +2005,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 +2059,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 +2109,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 +2127,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 +2140,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 +2148,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 +2738,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 +2748,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 +2759,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 +2783,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 +2823,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 +2836,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 +2844,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 +2862,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 +2882,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 +2909,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 +2921,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 +2945,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 +2966,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 +2998,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 +3044,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 +3061,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 +3115,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 +3179,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 +3191,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 +3214,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 +3222,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 +3239,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 +3259,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 +3401,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 +3410,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 +3420,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 +3437,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 +3445,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>" })
 		})
 	] });
@@ -3854,7 +3615,7 @@ const createNodeRegistry = () => {
 		}
 	};
 };
-const useDndKeyboard = ({ sections, selectedId, selectedIndex, selectOnly, move, requestDelete }) => {
+const useDndKeyboard = ({ sections, selectedId, selectedIndex, selectOnly, move, copy, requestDelete }) => {
 	const { announcements: say } = useLiveMessages();
 	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }), useSensor(KeyboardSensor, {
 		coordinateGetter: sortableKeyboardCoordinates,
@@ -3892,6 +3653,23 @@ const useDndKeyboard = ({ sections, selectedId, selectedIndex, selectOnly, move,
 		move(id, direction);
 		if (to === 0 || to === sections.length - 1) focusSection(id);
 	};
+	const focusSelectedRef = useRef(false);
+	const onMoveKey = (id, direction) => {
+		const to = sections.findIndex((section) => section.id === id) + (direction === "up" ? -1 : 1);
+		if (to < 0 || to >= sections.length) return;
+		selectOnly(id);
+		move(id, direction);
+		focusSelectedRef.current = true;
+	};
+	const onCopyKey = (id) => {
+		copy(id);
+		focusSelectedRef.current = true;
+	};
+	useEffect(() => {
+		if (!focusSelectedRef.current || selectedId === null) return;
+		focusSelectedRef.current = false;
+		focusSection(selectedId);
+	});
 	useEffect(() => {
 		if (selectedId === null) return;
 		const frame = requestAnimationFrame(() => {
@@ -3910,6 +3688,8 @@ const useDndKeyboard = ({ sections, selectedId, selectedIndex, selectOnly, move,
 		sectionNodes,
 		onNavigate,
 		onDeleteKey,
+		onMoveKey,
+		onCopyKey,
 		onMoveButton
 	};
 };
@@ -4266,12 +4046,13 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		onBeforeDelete
 	});
 	const onDelete = (id) => requestDelete(id);
-	const { sensors, announcements, screenReaderInstructions, sectionNodes, onNavigate, onDeleteKey, onMoveButton } = useDndKeyboard({
+	const { sensors, announcements, screenReaderInstructions, sectionNodes, onNavigate, onDeleteKey, onMoveKey, onCopyKey, onMoveButton } = useDndKeyboard({
 		sections,
 		selectedId,
 		selectedIndex,
 		selectOnly,
 		move: moveSection,
+		copy: onCopy,
 		requestDelete
 	});
 	const { inspector, inspecting, onInspectMove, onInspectPick, onInspectLeave, highlightRect } = useInspectorState({
@@ -4331,20 +4112,22 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		onInspectLeave,
 		nodeRef: sectionNodes.register,
 		onNavigate,
-		onDeleteKey
+		onDeleteKey,
+		onMoveKey,
+		onCopyKey
 	};
 	const canvas = /* @__PURE__ */ jsxs(SectionHandlersContext.Provider, {
 		value: sectionHandlers,
 		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 +4173,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 +4224,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-COjjjuD7.js.map