@jbpark/live-editor 4.6.1 → 5.0.0

package/dist/{dnd-V8NAxd_R.js → dnd-BlC1gqUy.js}

@@ -1,24 +1,1434 @@
-import { A as isJSXElement, B as isObjectExpression, D as isExpression, N as isJSXFragment, O as isIdentifier, V as isObjectProperty, c as inspectDocument, h as replaceIds, m as fillIdsFrom, n as createSectionPreviewCache, r as fillSectionIds, x as nanoid } from "./document-CHO215iP.js";
-import { c as RESERVED_BINDING_PROPERTIES, o as PALETTE_SECTIONS, r as DATA_ATTR, t as BINDING_PROP } from "./constants-DU17Tdwo.js";
-import { n as validateBindingValue } from "./validate-iLo8IONY.js";
-import { i as useLiveMessages } from "./messages-CSrMI4Rm.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-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 { i as usePreview } from "./states-Ci1AvoQ9.js";
-import { A as extractNodeValue, C as getStructuredValue, D as readNodeBindings, M as parseArrayExpression, N as parseValue, b as getCurrentValue, c as updateArrayItemValue, f as updateAll, g as moveSelectedIndices, h as getChildrenSignatures, i as moveArrayItems, j as extractObjectProperties, k as canLosslesslyEvaluateSource, l as canStructurallyEditArray, n as duplicateArrayItems, o as removeArrayItems, r as moveArrayItem, s as updateArrayItemProperty, t as appendArrayItem, v as extract, y as findEditableChildren } from "./items-BXXtMUNI.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 { t as cn } from "./cn-CAnad2vL.js";
-import { o as preloadScripts } from "./compile-Dxas-D05.js";
-import { a as useStableModules, i as Frame, n as useCompiledModule, t as useDynamicTailwind } from "./use-dynamic-tailwind-BP1toJkW.js";
-import { i as generateSection, o as replaceSections, r as extractSections } from "./sections-jYuqS4KB.js";
-import { n as Error$1, t as ErrorBoundary } from "./boundary-BLB80tyw.js";
-import { t as Core } from "./core-Bgfek364.js";
-import { Children, createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+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 { 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 { Button, Card, Checkbox, ColorPicker, DatePicker, Drawer, Input, RichTextEditor, Select, Space, Splitter, Toast, Typography } from "@jbpark/ui-kit";
-import { useDebounce, useMultiSelect, useResponsiveSize } from "@jbpark/use-hooks";
+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
+const PALETTE_SECTIONS = [
+	{
+		id: "hero",
+		name: "Hero",
+		code: `
+      <section
+        data-name="Hero"
+        className={cn(
+          'text-center text-white',
+          //
+        )}
+      >
+        <ui.Space
+          data-id=""
+          data-binding={[
+            {
+              label: 'Background Style',
+              property: 'style',
+              type: 'object',
+              // Types the keys inside the object value; a leaf takes the same
+              // fields as a top-level binding.
+              render: {
+                backgroundColor: { type: 'color', label: 'Background Color' },
+              },
+              // Not a library field, so it arrives as meta.group.
+              group: 'layout',
+            },
+            {
+              label: 'Content Spacing',
+              property: 'size',
+              type: 'number',
+              // Constraints the library validates with or without a widget.
+              min: 0,
+              max: 40,
+              // Presentation only: the built-in panel ignores it and shows a
+              // number input; a custom panel can switch on widget.type.
+              widget: { type: 'slider', step: 4, unit: 'px' },
+              group: 'layout',
+            },
+          ]}
+          style={{
+            backgroundColor: '#6366f1',
+          }}
+          orientation="vertical"
+          size={16}
+          align="center"
+          className={cn(
+            'px-5 py-15',
+            //
+          )}
+        >
+          <h1
+            data-id=""
+            data-binding={[
+              {
+                label: 'Title',
+                property: 'innerText',
+                type: 'string',
+                required: true,
+              },
+            ]}
+            className={cn(
+              'text-5xl font-bold',
+              //
+            )}
+          >
+            Welcome to Live Editor
+          </h1>
+          <p
+            data-id=""
+            data-binding={[
+              {
+                label: 'Description',
+                type: 'richtext',
+              },
+            ]}
+            className={cn(
+              'text-xl',
+              //
+            )}
+          >
+            Build <strong>dynamic components</strong> with drag & drop
+          </p>
+          <ui.Button
+            data-id=""
+            data-binding={[
+              {
+                label: 'Button Text',
+                property: 'innerText',
+              },
+              {
+                label: 'Button Icon',
+                property: 'icon',
+                type: 'jsx',
+              },
+              {
+                label: 'Button Size',
+                property: 'size',
+                options: [
+                  { label: 'Small', value: 'small' },
+                  { label: 'Middle', value: 'middle' },
+                  { label: 'Large', value: 'large' },
+                ],
+              },
+              {
+                label: 'Button Variant',
+                property: 'variant',
+                options: [
+                  { label: 'Solid', value: 'solid' },
+                  { label: 'Outlined', value: 'outlined' },
+                  { label: 'Filled', value: 'filled' },
+                ],
+              },
+            ]}
+            icon={<span>🚀</span>}
+            size="large"
+            variant="solid"
+            className={cn(
+              'bg-white text-indigo-500',
+              'hover:bg-gray-50',
+              //
+            )}
+          >
+            Get Started
+          </ui.Button>
+        </ui.Space>
+      </section>
+    `
+	},
+	{
+		id: "features",
+		name: "Features",
+		code: `
+      <section
+        data-name="Features"
+        className={cn(
+          'px-5 py-10',
+          //
+        )}
+      >
+        <ui.Space
+          data-id=""
+          data-binding={[
+            {
+              label: 'Feature Cards',
+              property: 'children',
+            },
+          ]}
+          className={cn(
+            'mx-auto max-w-7xl',
+            //
+          )}
+          size="large"
+          wrap
+        >
+          <ui.Card
+            className={cn(
+              'min-w-70 flex-1 text-center',
+              //
+            )}
+          >
+            <ui.Space orientation="vertical" size="middle" align="center">
+              <div
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Icon',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'text-5xl',
+                  //
+                )}
+              >
+                🚀
+              </div>
+              <h3
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Title',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'text-2xl text-gray-800',
+                  //
+                )}
+              >
+                Feature 1
+              </h3>
+              <p
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Description',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'text-gray-600',
+                  //
+                )}
+              >
+                Amazing feature description
+              </p>
+            </ui.Space>
+          </ui.Card>
+          <ui.Card
+            className={cn(
+              'min-w-70 flex-1 text-center',
+              //
+            )}
+          >
+            <ui.Space orientation="vertical" size="middle" align="center">
+              <div
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Icon',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'text-5xl',
+                  //
+                )}
+              >
+                ⚡
+              </div>
+              <h3
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Title',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'text-2xl text-gray-800',
+                  //
+                )}
+              >
+                Feature 2
+              </h3>
+              <p
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Description',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'text-gray-600',
+                  //
+                )}
+              >
+                Another great feature
+              </p>
+            </ui.Space>
+          </ui.Card>
+          <ui.Card
+            className={cn(
+              'min-w-70 flex-1 text-center',
+              //
+            )}
+          >
+            <ui.Space orientation="vertical" size="middle" align="center">
+              <div
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Icon',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'text-5xl',
+                  //
+                )}
+              >
+                ✨
+              </div>
+              <h3
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Title',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'text-2xl text-gray-800',
+                  //
+                )}
+              >
+                Feature 3
+              </h3>
+              <p
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Description',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'text-gray-600',
+                  //
+                )}
+              >
+                One more awesome thing
+              </p>
+            </ui.Space>
+          </ui.Card>
+        </ui.Space>
+      </section>
+    `
+	},
+	{
+		id: "about",
+		name: "About",
+		code: `
+      <section
+        data-name="About"
+        className={cn(
+          'mx-auto max-w-3xl px-5 py-10',
+          //
+        )}
+      >
+        <ui.Typography.Title
+          data-id=""
+          data-binding={[{ label: 'Title', property: 'innerText' }]}
+          level={2}
+          className={cn(
+            'mb-5 text-4xl text-gray-800',
+            //
+          )}
+        >
+          About Live Editor
+        </ui.Typography.Title>
+        <ui.Typography.Paragraph
+          data-id=""
+          data-binding={[
+            {
+              label: 'Description 1',
+              type: 'richtext',
+            },
+          ]}
+          className={cn(
+            'mb-4 text-lg leading-relaxed text-gray-600',
+            //
+          )}
+        >
+          Live Editor is a powerful visual development tool that enables you to
+          create stunning web interfaces through an intuitive drag-and-drop
+          experience. Built with modern web technologies, it streamlines your
+          workflow and accelerates development cycles.
+        </ui.Typography.Paragraph>
+        <ui.Typography.Paragraph
+          data-id=""
+          data-binding={[
+            {
+              label: 'Description 2',
+              type: 'richtext',
+            },
+          ]}
+          className={cn(
+            'text-lg leading-relaxed text-gray-600',
+            //
+          )}
+        >
+          Whether you&apos;re a seasoned developer or just starting out, Live
+          Editor provides the flexibility and control you need to bring your
+          creative vision to life. Focus on what matters most - building great
+          products.
+        </ui.Typography.Paragraph>
+      </section>
+    `
+	},
+	{
+		id: "cta",
+		name: "CTA",
+		code: `
+      <section
+        data-name="CTA"
+        className={cn(
+          'bg-gray-50 px-5 py-12 text-center',
+          //
+        )}
+      >
+        <div
+          className={cn(
+            'mx-auto max-w-xl',
+            //
+          )}
+        >
+          <ui.Typography.Title
+            data-id=""
+            data-binding={[{ label: 'Title', property: 'innerText' }]}
+            level={2}
+            className={cn(
+              'mb-4 text-3xl text-gray-800',
+              //
+            )}
+          >
+            Ready to get started?
+          </ui.Typography.Title>
+          <ui.Typography.Paragraph
+            data-id=""
+            data-binding={[
+              {
+                label: 'Description',
+                property: 'innerText',
+              },
+            ]}
+            className={cn(
+              'mb-6 text-lg text-gray-600',
+              //
+            )}
+          >
+            Start exploring what Live Editor can do for your projects
+          </ui.Typography.Paragraph>
+          <ui.Space
+            data-id=""
+            data-binding={[{ label: 'Buttons', property: 'children' }]}
+            className={cn(
+              'flex flex-wrap justify-center gap-4',
+              //
+            )}
+          >
+            <ui.Button
+              data-id=""
+              data-binding={[
+                {
+                  label: 'Button 1 Text',
+                  property: 'innerText',
+                },
+              ]}
+              size="large"
+              className={cn(
+                'bg-indigo-500 px-8 text-base text-white',
+                'hover:bg-indigo-600',
+                //
+              )}
+            >
+              View Documentation
+            </ui.Button>
+            <ui.Button
+              data-id=""
+              data-binding={[
+                {
+                  label: 'Button 2 Text',
+                  property: 'innerText',
+                },
+              ]}
+              variant="outlined"
+              size="large"
+              className={cn(
+                'border-2 border-indigo-500 px-8 text-base text-indigo-500',
+                'hover:bg-indigo-50',
+                //
+              )}
+            >
+              View Examples
+            </ui.Button>
+          </ui.Space>
+        </div>
+      </section>
+    `
+	},
+	{
+		id: "getting-started",
+		name: "Getting Started",
+		code: `
+      <section
+        data-name="Getting Started"
+        className={cn(
+          'px-5 py-16',
+          //
+        )}
+      >
+        <div
+          className={cn(
+            'mx-auto max-w-5xl',
+            //
+          )}
+        >
+          <ui.Typography.Title
+            data-id=""
+            data-binding={[{ label: 'Title', property: 'innerText' }]}
+            level={2}
+            className={cn(
+              'mb-12 text-center text-4xl font-bold text-gray-800',
+              //
+            )}
+          >
+            How to Get Started
+          </ui.Typography.Title>
+          <div
+            className={cn(
+              'grid gap-8 md:grid-cols-3',
+              //
+            )}
+          >
+            <ui.Card
+              data-id=""
+              data-binding={[
+                {
+                  label: 'Card 1 Content',
+                  property: 'children',
+                },
+              ]}
+              className={cn(
+                'rounded-lg border-2 border-gray-200 bg-white p-8',
+                //
+              )}
+            >
+              <ui.Typography.Title
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Card 1 Title',
+                    property: 'innerText',
+                  },
+                ]}
+                level={3}
+                className={cn(
+                  'mb-2 text-2xl font-bold text-gray-800',
+                  //
+                )}
+              >
+                Explore
+              </ui.Typography.Title>
+              <ui.Typography.Paragraph
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Card 1 Icon',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'mb-6 text-4xl font-bold text-indigo-600',
+                  //
+                )}
+              >
+                📚
+              </ui.Typography.Paragraph>
+              <ul
+                className={cn(
+                  'mb-8 space-y-3 text-gray-600',
+                  //
+                )}
+              >
+                <li>✓ Read documentation</li>
+                <li>✓ Browse examples</li>
+                <li>✓ Try the demo</li>
+              </ul>
+              <ui.Button
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Card 1 Button',
+                    property: 'innerText',
+                  },
+                ]}
+                variant="outlined"
+                size="large"
+                block
+                className={cn(
+                  'border-2 border-indigo-500 text-indigo-500',
+                  'hover:bg-indigo-50',
+                  //
+                )}
+              >
+                View Docs
+              </ui.Button>
+            </ui.Card>
+            <ui.Card
+              data-id=""
+              data-binding={[
+                {
+                  label: 'Card 2 Content',
+                  property: 'children',
+                },
+              ]}
+              className={cn(
+                'relative rounded-lg border-2 border-indigo-500 bg-white p-8',
+                //
+              )}
+            >
+              <div
+                className={cn(
+                  'absolute -top-4 left-1/2 -translate-x-1/2',
+                  'rounded-full bg-indigo-500 px-4 py-1 text-sm text-white',
+                  //
+                )}
+              >
+                Recommended
+              </div>
+              <ui.Typography.Title
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Card 2 Title',
+                    property: 'innerText',
+                  },
+                ]}
+                level={3}
+                className={cn(
+                  'mb-2 text-2xl font-bold text-gray-800',
+                  //
+                )}
+              >
+                Practice
+              </ui.Typography.Title>
+              <ui.Typography.Paragraph
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Card 2 Icon',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'mb-6 text-4xl font-bold text-indigo-600',
+                  //
+                )}
+              >
+                💻
+              </ui.Typography.Paragraph>
+              <ul
+                className={cn(
+                  'mb-8 space-y-3 text-gray-600',
+                  //
+                )}
+              >
+                <li>✓ Interactive playground</li>
+                <li>✓ Experiment freely</li>
+                <li>✓ Build your own</li>
+              </ul>
+              <ui.Button
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Card 2 Button',
+                    property: 'innerText',
+                  },
+                ]}
+                size="large"
+                block
+                className={cn(
+                  'bg-indigo-500 text-white',
+                  'hover:bg-indigo-600',
+                  //
+                )}
+              >
+                Start Building
+              </ui.Button>
+            </ui.Card>
+            <ui.Card
+              data-id=""
+              data-binding={[
+                {
+                  label: 'Card 3 Content',
+                  property: 'children',
+                },
+              ]}
+              className={cn(
+                'rounded-lg border-2 border-gray-200 bg-white p-8',
+                //
+              )}
+            >
+              <ui.Typography.Title
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Card 3 Title',
+                    property: 'innerText',
+                  },
+                ]}
+                level={3}
+                className={cn(
+                  'mb-2 text-2xl font-bold text-gray-800',
+                  //
+                )}
+              >
+                Contribute
+              </ui.Typography.Title>
+              <ui.Typography.Paragraph
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Card 3 Icon',
+                    property: 'innerText',
+                  },
+                ]}
+                className={cn(
+                  'mb-6 text-4xl font-bold text-indigo-600',
+                  //
+                )}
+              >
+                🤝
+              </ui.Typography.Paragraph>
+              <ul
+                className={cn(
+                  'mb-8 space-y-3 text-gray-600',
+                  //
+                )}
+              >
+                <li>✓ Report issues</li>
+                <li>✓ Suggest features</li>
+                <li>✓ Submit pull requests</li>
+              </ul>
+              <ui.Button
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Card 3 Button',
+                    property: 'innerText',
+                  },
+                ]}
+                variant="outlined"
+                size="large"
+                block
+                className={cn(
+                  'border-2 border-indigo-500 text-indigo-500',
+                  'hover:bg-indigo-50',
+                  //
+                )}
+              >
+                View on GitHub
+              </ui.Button>
+            </ui.Card>
+          </div>
+        </div>
+      </section>
+    `
+	},
+	{
+		id: "key-features",
+		name: "Key Features",
+		code: `
+      <section
+        data-name="Key Features"
+        className={cn(
+          'bg-indigo-50 px-5 py-16',
+          //
+        )}
+      >
+        <div
+          className={cn(
+            'mx-auto max-w-6xl',
+            //
+          )}
+        >
+          <h2
+            data-id=""
+            data-binding={[{ label: 'Title', property: 'innerText' }]}
+            className={cn(
+              'mb-12 text-center text-4xl font-bold text-gray-800',
+              //
+            )}
+          >
+            Key Features
+          </h2>
+          <div
+            className={cn(
+              'grid gap-8 md:grid-cols-2',
+              //
+            )}
+          >
+            <div
+              className={cn(
+                'rounded-lg bg-white p-8 shadow-md',
+                //
+              )}
+            >
+              <div
+                className={cn(
+                  'mb-4 text-4xl',
+                  //
+                )}
+              >
+                🎨
+              </div>
+              <h3
+                className={cn(
+                  'mb-4 text-2xl font-bold text-gray-800',
+                  //
+                )}
+              >
+                Visual Editing
+              </h3>
+              <p
+                className={cn(
+                  'text-gray-600',
+                  //
+                )}
+              >
+                See your changes in real-time as you build. Live Editor provides
+                instant visual feedback, making it easier to understand how code
+                affects your interface.
+              </p>
+            </div>
+            <div
+              className={cn(
+                'rounded-lg bg-white p-8 shadow-md',
+                //
+              )}
+            >
+              <div
+                className={cn(
+                  'mb-4 text-4xl',
+                  //
+                )}
+              >
+                🧩
+              </div>
+              <h3
+                className={cn(
+                  'mb-4 text-2xl font-bold text-gray-800',
+                  //
+                )}
+              >
+                Component-Based
+              </h3>
+              <p
+                className={cn(
+                  'text-gray-600',
+                  //
+                )}
+              >
+                Build with reusable components that you can drag, drop, and
+                customize. Learn modern development patterns while creating your
+                interface.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    `
+	},
+	{
+		id: "stats",
+		name: "Stats",
+		code: `
+      <section
+        data-name="Stats"
+        className={cn(
+          'bg-indigo-600 text-white',
+          //
+        )}
+      >
+        <ui.Marquees
+          data-id=""
+          data-binding={[
+            { label: 'Stats Items', property: 'items' },
+            {
+              label: 'Scroll Speed',
+              property: 'speed',
+              type: 'number',
+              min: 20,
+              max: 300,
+              // The bare-string form; it arrives as { type: 'slider' }.
+              widget: 'slider',
+            },
+            { label: 'Pause On Hover', property: 'pauseOnHover', type: 'boolean' },
+          ]}
+          speed={100}
+          pauseOnHover={true}
+          autoFill={true}
+          className="px-5 py-16"
+          items={[
+            {
+              key: 'stats-row',
+              children: (
+                <div
+                  data-id=""
+                  data-binding={[
+                    {
+                      label: 'Stats Cards',
+                      property: 'children',
+                    },
+                  ]}
+                  className={cn('flex gap-20')}
+                >
+                  <div
+                    className={cn(
+                      'min-w-60 text-center',
+                      //
+                    )}
+                  >
+                    <p
+                      data-id=""
+                      data-binding={[
+                        {
+                          label: 'Title',
+                          property: 'innerText',
+                        },
+                      ]}
+                      className={cn(
+                        'mb-2 text-5xl font-bold',
+                        //
+                      )}
+                    >
+                      Open
+                    </p>
+                    <p
+                      data-id=""
+                      data-binding={[
+                        {
+                          label: 'Description',
+                          property: 'innerText',
+                        },
+                      ]}
+                      className={cn(
+                        'text-indigo-200',
+                        //
+                      )}
+                    >
+                      Source Project
+                    </p>
+                  </div>
+                  <div
+                    className={cn(
+                      'min-w-60 text-center',
+                      //
+                    )}
+                  >
+                    <p
+                      data-id=""
+                      data-binding={[
+                        {
+                          label: 'Title',
+                          property: 'innerText',
+                        },
+                      ]}
+                      className={cn(
+                        'mb-2 text-5xl font-bold',
+                        //
+                      )}
+                    >
+                      Free
+                    </p>
+                    <p
+                      data-id=""
+                      data-binding={[
+                        {
+                          label: 'Description',
+                          property: 'innerText',
+                        },
+                      ]}
+                      className={cn(
+                        'text-indigo-200',
+                        //
+                      )}
+                    >
+                      For Everyone
+                    </p>
+                  </div>
+                  <div
+                    className={cn(
+                      'min-w-60 text-center',
+                      //
+                    )}
+                  >
+                    <p
+                      data-id=""
+                      data-binding={[
+                        {
+                          label: 'Title',
+                          property: 'innerText',
+                        },
+                      ]}
+                      className={cn(
+                        'mb-2 text-5xl font-bold',
+                        //
+                      )}
+                    >
+                      Active
+                    </p>
+                    <p
+                      data-id=""
+                      data-binding={[
+                        {
+                          label: 'Description',
+                          property: 'innerText',
+                        },
+                      ]}
+                      className={cn(
+                        'text-indigo-200',
+                        //
+                      )}
+                    >
+                      Community
+                    </p>
+                  </div>
+                  <div
+                    className={cn(
+                      'min-w-60 text-center',
+                      //
+                    )}
+                  >
+                    <p
+                      data-id=""
+                      data-binding={[
+                        {
+                          label: 'Title',
+                          property: 'innerText',
+                        },
+                      ]}
+                      className={cn(
+                        'mb-2 text-5xl font-bold',
+                        //
+                      )}
+                    >
+                      Learn
+                    </p>
+                    <p
+                      data-id=""
+                      data-binding={[
+                        {
+                          label: 'Description',
+                          property: 'innerText',
+                        },
+                      ]}
+                      className={cn(
+                        'text-indigo-200',
+                        //
+                      )}
+                    >
+                      By Doing
+                    </p>
+                  </div>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </section>
+    `
+	},
+	{
+		id: "roadmap",
+		name: "Roadmap",
+		code: `
+      <section
+        data-name="Roadmap"
+        className={cn(
+          'px-5 py-16',
+          //
+        )}
+      >
+        <div
+          className={cn(
+            'mx-auto max-w-3xl',
+            //
+          )}
+        >
+          <h2
+            data-id=""
+            data-binding={[
+              { label: 'Title', property: 'innerText', required: true },
+            ]}
+            className={cn(
+              'mb-8 text-center text-4xl font-bold text-gray-800',
+              //
+            )}
+          >
+            Roadmap
+          </h2>
+          <ui.List
+            data-id=""
+            data-binding={[
+              {
+                label: 'Milestones',
+                property: 'data',
+                type: 'array',
+                // One leaf per item key. Each leaf takes the same fields as a
+                // top-level binding, and label falls back to the key.
+                render: {
+                  title: {
+                    type: 'string',
+                    label: 'Title',
+                    required: true,
+                  },
+                  date: { type: 'date', label: 'Release Date', required: true },
+                  status: {
+                    type: 'string',
+                    label: 'Status',
+                    options: [
+                      { label: 'Planned', value: 'planned' },
+                      { label: 'In Progress', value: 'in-progress' },
+                      { label: 'Shipped', value: 'shipped' },
+                    ],
+                  },
+                  progress: {
+                    type: 'number',
+                    label: 'Progress',
+                    min: 0,
+                    max: 100,
+                    widget: { type: 'slider', step: 10, unit: '%' },
+                  },
+                  color: { type: 'color', label: 'Accent Color' },
+                  highlight: { type: 'boolean', label: 'Highlight' },
+                  // An object-valued key: its own render map types the keys
+                  // inside it, one level further down.
+                  link: {
+                    type: 'object',
+                    label: 'Link',
+                    render: {
+                      text: { type: 'string', label: 'Link Text' },
+                      href: {
+                        type: 'url',
+                        label: 'Link URL',
+                        pattern: '^https://',
+                        // Not a library field, so it arrives as meta.hint.
+                        hint: 'Must use https',
+                      },
+                    },
+                  },
+                },
+              },
+            ]}
+            data={[
+              {
+                title: 'Visual editing',
+                date: '2026-03-02',
+                status: 'shipped',
+                progress: 100,
+                color: '#22c55e',
+                highlight: false,
+                link: { text: 'Release notes', href: 'https://github.com' },
+              },
+              {
+                title: 'Custom panels',
+                date: '2026-09-26',
+                status: 'in-progress',
+                progress: 60,
+                color: '#6366f1',
+                highlight: true,
+                link: { text: 'Guide', href: 'https://github.com' },
+              },
+              {
+                title: 'Collaboration',
+                date: '2027-01-15',
+                status: 'planned',
+                progress: 0,
+                color: '#f59e0b',
+                highlight: false,
+                link: { text: 'Discussion', href: 'https://github.com' },
+              },
+            ]}
+            itemKey={item => item.title}
+            renderItem={item => (
+              <div
+                className={cn(
+                  'flex items-center gap-4 border-b border-gray-100 py-4',
+                  item.highlight && 'rounded-lg bg-indigo-50 px-4',
+                )}
+              >
+                <span
+                  className="size-3 shrink-0 rounded-full"
+                  style={{ backgroundColor: item.color }}
+                />
+                <div className="min-w-0 flex-1">
+                  <p className="font-semibold text-gray-800">{item.title}</p>
+                  <p className="text-sm text-gray-500">
+                    {item.date} · {item.status}
+                  </p>
+                  <ui.Progress value={item.progress} className="mt-2" />
+                </div>
+                <a
+                  href={item.link.href}
+                  className="text-sm text-indigo-500 hover:underline"
+                >
+                  {item.link.text}
+                </a>
+              </div>
+            )}
+          />
+          <p
+            className={cn(
+              'mt-6 text-center text-sm text-gray-500',
+              //
+            )}
+          >
+            Last updated{' '}
+            <time
+              data-id=""
+              data-binding={[
+                {
+                  label: 'Updated On',
+                  property: 'dateTime',
+                  type: 'date',
+                  required: true,
+                },
+                { label: 'Updated Text', property: 'innerText' },
+              ]}
+              dateTime="2026-09-26"
+            >
+              September 26, 2026
+            </time>
+            {' · '}
+            <a
+              data-id=""
+              data-binding={[
+                { label: 'Link Text', property: 'innerText' },
+                {
+                  label: 'Link URL',
+                  property: 'href',
+                  type: 'url',
+                  required: true,
+                  pattern: '^https://',
+                },
+              ]}
+              href="https://github.com/pjb0811/live-editor/releases"
+              className="text-indigo-500 hover:underline"
+            >
+              All releases
+            </a>
+          </p>
+        </div>
+      </section>
+    `
+	},
+	{
+		id: "faq",
+		name: "FAQ",
+		code: `
+      <section
+        data-name="FAQ"
+        className={cn(
+          'px-5 py-16',
+          //
+        )}
+      >
+        <div
+          className={cn(
+            'mx-auto max-w-3xl',
+            //
+          )}
+        >
+          <ui.Typography.Title
+            data-id=""
+            data-binding={[{ label: 'Title', property: 'innerText' }]}
+            level={2}
+            className={cn(
+              'mb-12 text-center text-4xl font-bold text-gray-800',
+              //
+            )}
+          >
+            Frequently Asked Questions
+          </ui.Typography.Title>
+          <ui.Collapse
+            data-id=""
+            data-binding={[{ label: 'FAQ Items', property: 'items' }]}
+            items={[
+              {
+                key: '1',
+                label: (
+                  <ui.Typography.Text
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Question 1',
+                        property: 'innerText',
+                      },
+                    ]}
+                    className={cn('text-lg font-semibold text-gray-800')}
+                  >
+                    What is Live Editor?
+                  </ui.Typography.Text>
+                ),
+                children: (
+                  <ui.Typography.Paragraph
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Answer 1',
+                        type: 'richtext',
+                      },
+                    ]}
+                    className={cn('text-gray-600')}
+                  >
+                    Live Editor is an open-source tool for building web
+                    interfaces visually. It helps you learn web development by
+                    providing instant feedback as you build components.
+                  </ui.Typography.Paragraph>
+                ),
+              },
+              {
+                key: '2',
+                label: (
+                  <ui.Typography.Text
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Question 2',
+                        property: 'innerText',
+                      },
+                    ]}
+                    className={cn('text-lg font-semibold text-gray-800')}
+                  >
+                    Do I need coding experience?
+                  </ui.Typography.Text>
+                ),
+                children: (
+                  <ui.Typography.Paragraph
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Answer 2',
+                        type: 'richtext',
+                      },
+                    ]}
+                    className={cn('text-gray-600')}
+                  >
+                    No! Live Editor is designed for all skill levels. Beginners
+                    can learn through visual editing, while experienced
+                    developers can work directly with code.
+                  </ui.Typography.Paragraph>
+                ),
+              },
+              {
+                key: '3',
+                label: (
+                  <ui.Typography.Text
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Question 3',
+                        property: 'innerText',
+                      },
+                    ]}
+                    className={cn('text-lg font-semibold text-gray-800')}
+                  >
+                    Is it really free?
+                  </ui.Typography.Text>
+                ),
+                children: (
+                  <ui.Typography.Paragraph
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Answer 3',
+                        type: 'richtext',
+                      },
+                    ]}
+                    className={cn('text-gray-600')}
+                  >
+                    Yes, completely free! Live Editor is an open-source project
+                    with no hidden costs or premium tiers. All features are
+                    available to everyone.
+                  </ui.Typography.Paragraph>
+                ),
+              },
+              {
+                key: '4',
+                label: (
+                  <ui.Typography.Text
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Question 4',
+                        property: 'innerText',
+                      },
+                    ]}
+                    className={cn('text-lg font-semibold text-gray-800')}
+                  >
+                    How can I contribute?
+                  </ui.Typography.Text>
+                ),
+                children: (
+                  <ui.Typography.Paragraph
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Answer 4',
+                        type: 'richtext',
+                      },
+                    ]}
+                    className={cn('text-gray-600')}
+                  >
+                    You can contribute by reporting bugs, suggesting features,
+                    sharing your projects, or contributing code. Check our
+                    GitHub repository for more details.
+                  </ui.Typography.Paragraph>
+                ),
+              },
+            ]}
+          />
+        </div>
+      </section>
+    `
+	}
+];
+//#endregion
+//#region src/components/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 })]
+});
+//#endregion
 //#region src/components/dnd/palette/palette-drag.ts
 const PALETTE_SECTION = "palette-section";
 const paletteDragData = (section) => ({
@@ -220,6 +1630,10 @@ const arePropsEqual = (prev, next) => {
 };
 var renderer_default = memo(Renderer, arePropsEqual);
 //#endregion
+//#region src/components/dnd/canvas/section-handlers.ts
+const SectionHandlersContext = createContext(null);
+const useSectionHandlers = () => useContext(SectionHandlersContext);
+//#endregion
 //#region src/components/dnd/canvas/sortable.tsx
 const NAVIGATION_KEYS = {
 	ArrowUp: "previous",
@@ -227,7 +1641,9 @@ const NAVIGATION_KEYS = {
 	Home: "first",
 	End: "last"
 };
-const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy: _onCopy, onMoveUp, onMoveDown, canMoveUp = false, canMoveDown = false, nodeRef, onNavigate, onDeleteKey, inspecting = false, onInspectMove, onInspectPick, onInspectLeave }) => {
+const Sortable = ({ id, children, selected, onClick, onDelete, onCopy, onMoveUp, onMoveDown, canMoveUp = false, canMoveDown = false }) => {
+	const handlers = useSectionHandlers();
+	const inspecting = handlers?.inspecting ?? false;
 	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, isOver, active } = useSortable({
 		id,
 		disabled: inspecting
@@ -249,28 +1665,20 @@ const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy
 			return;
 		}
 		const to = NAVIGATION_KEYS[e.key];
-		if (to && onNavigate) {
+		if (to && handlers) {
 			e.preventDefault();
-			onNavigate(to);
+			handlers.onNavigate(id, to);
 			return;
 		}
-		if ((e.key === "Delete" || e.key === "Backspace") && onDeleteKey) {
+		if ((e.key === "Delete" || e.key === "Backspace") && handlers) {
 			e.preventDefault();
-			onDeleteKey();
+			handlers.onDeleteKey(id);
 		}
 	};
 	const setRefs = (node) => {
 		setNodeRef(node);
 		setActivatorNodeRef(node);
-		nodeRef?.(node);
-	};
-	const onDelete = (e) => {
-		e.stopPropagation();
-		_onDelete?.(id);
-	};
-	const onCopy = (e) => {
-		e.stopPropagation();
-		_onCopy?.(id);
+		handlers?.nodeRef(id)(node);
 	};
 	const press = (action) => (e) => {
 		e.stopPropagation();
@@ -287,11 +1695,11 @@ const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: cn("absolute inset-0 z-50"),
-				onPointerMove: inspecting ? (e) => onInspectMove?.(e.currentTarget.parentElement, e.currentTarget, e.clientX, e.clientY) : void 0,
-				onPointerLeave: inspecting ? onInspectLeave : void 0,
+				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) => {
 					e.stopPropagation();
-					onInspectPick?.(e.currentTarget.parentElement, e.currentTarget, e.clientX, e.clientY);
+					handlers?.onInspectPick(id, e.currentTarget.parentElement, e.currentTarget, e.clientX, e.clientY);
 				} : void 0
 			}),
 			children,
@@ -312,13 +1720,13 @@ const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy
 					}),
 					/* @__PURE__ */ jsx(Button, {
 						icon: /* @__PURE__ */ jsx(Copy, {}),
-						onClick: onCopy,
+						onClick: press(() => onCopy?.(id)),
 						"aria-label": messages.section.duplicate
 					}),
 					/* @__PURE__ */ jsx(Button, {
 						danger: true,
 						icon: /* @__PURE__ */ jsx(Trash, {}),
-						onClick: onDelete,
+						onClick: press(() => onDelete?.(id)),
 						"aria-label": messages.section.delete
 					})
 				]
@@ -427,6 +1835,9 @@ const useDndPalette = () => useDndRegions("useDndPalette()").palette;
 const useDndPanel = () => useDndRegions("useDndPanel()").panel;
 const useDndLayout = () => useDndRegions("useDndLayout()");
 //#endregion
+//#region src/components/dnd/panel/element-selection.ts
+const ElementSelectionContext = createContext({ ids: /* @__PURE__ */ new Set() });
+//#endregion
 //#region src/components/dnd/panel-binding.ts
 const readAttribute = (node, name) => node.dataAttributes.find((attribute) => attribute.name === name)?.value;
 const canEditBindingValue = (node, binding) => {
@@ -446,7 +1857,16 @@ const toBindingFields = (binding) => ({
 	min: binding.min,
 	max: binding.max,
 	pattern: binding.pattern,
+	patternMessage: binding.patternMessage,
 	required: binding.required,
+	minLength: binding.minLength,
+	maxLength: binding.maxLength,
+	step: binding.step,
+	minItems: binding.minItems,
+	maxItems: binding.maxItems,
+	minDate: binding.minDate,
+	maxDate: binding.maxDate,
+	protocols: binding.protocols,
 	meta: binding.meta
 });
 const resolveRenderEntry = (render, key) => {
@@ -504,8 +1924,38 @@ const withPanelCommit = (bindings, commit) => bindings.map((binding) => ({
 	})
 }));
 //#endregion
-//#region src/components/dnd/panel/bulk-actions-bar.tsx
-const BulkActionsBar = ({ count, disabled = false, onDuplicate, onMoveUp, onMoveDown, onDelete, onClear }) => {
+//#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",
+	children: [
+		/* @__PURE__ */ jsx(Button, {
+			size: "small",
+			icon: /* @__PURE__ */ jsx(ArrowUp, {}),
+			"aria-label": labels.moveUp,
+			disabled: disabled || index === 0,
+			onClick: () => onMove(index - 1)
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			size: "small",
+			icon: /* @__PURE__ */ jsx(ArrowDown, {}),
+			"aria-label": labels.moveDown,
+			disabled: disabled || index === count - 1,
+			onClick: () => onMove(index + 1)
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			danger: true,
+			size: "small",
+			icon: /* @__PURE__ */ jsx(X, {}),
+			"aria-label": labels.delete,
+			title: labels.delete,
+			disabled: disabled || deleteDisabled,
+			onClick: onDelete
+		})
+	]
+});
+//#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", {
@@ -520,7 +1970,7 @@ const BulkActionsBar = ({ count, disabled = false, onDuplicate, onMoveUp, onMove
 					size: "small",
 					icon: /* @__PURE__ */ jsx(Copy, {}),
 					title: messages.selection.duplicate,
-					disabled,
+					disabled: disabled || duplicateDisabled,
 					onClick: onDuplicate
 				}),
 				/* @__PURE__ */ jsx(Button, {
@@ -542,7 +1992,7 @@ const BulkActionsBar = ({ count, disabled = false, onDuplicate, onMoveUp, onMove
 					size: "small",
 					icon: /* @__PURE__ */ jsx(X, {}),
 					title: messages.selection.delete,
-					disabled,
+					disabled: disabled || deleteDisabled,
 					onClick: onDelete
 				}),
 				/* @__PURE__ */ jsx(Button, {
@@ -555,36 +2005,33 @@ const BulkActionsBar = ({ count, disabled = false, onDuplicate, onMoveUp, onMove
 	});
 };
 //#endregion
-//#region src/components/dnd/panel/node.tsx
-const Node = ({ data, onChange }) => {
-	const source = resolvePanelBindings(data);
-	if (!source) return null;
-	return /* @__PURE__ */ jsx("div", {
-		className: "space-y-2 rounded",
-		children: /* @__PURE__ */ jsx("div", {
-			className: "space-y-1",
-			children: withPanelCommit(source.bindings, onChange).map((binding) => /* @__PURE__ */ jsxs("div", {
-				className: "space-y-1",
-				children: [/* @__PURE__ */ jsxs("label", {
-					className: "block text-xs font-semibold text-gray-700",
-					children: [binding.label, /* @__PURE__ */ jsxs("span", {
-						className: "ml-1 text-gray-400",
-						children: [
-							"(",
-							binding.property,
-							")"
-						]
-					})]
-				}), /* @__PURE__ */ jsx(Field, {
-					binding,
-					onNodeChange: onChange
-				})]
-			}, `${binding.id}-${binding.property}`))
-		})
+//#region src/components/dnd/panel/selection/select-all-checkbox.tsx
+const SelectAllCheckbox = ({ total, selected, disabled = false, onSelectAll, onClear }) => {
+	const messages = useLiveMessages();
+	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
 	});
 };
 //#endregion
-//#region src/components/dnd/panel/use-structural-selection.ts
+//#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
+	})
+});
+//#endregion
+//#region src/components/dnd/panel/selection/use-structural-selection.ts
 const selectionAfter = (command, selected, count) => {
 	switch (command.type) {
 		case "append":
@@ -618,7 +2065,7 @@ const useStructuralSelection = (count, revision) => {
 	};
 };
 //#endregion
-//#region src/components/dnd/panel/use-dnd-children.ts
+//#region src/components/dnd/panel/children/use-dnd-children.ts
 const producedBy = (expected, action) => {
 	if (action.type === "move-selected") {
 		const moved = JSON.stringify(moveSelectedIndices(expected, new Set(action.indices), action.direction).items);
@@ -675,7 +2122,11 @@ const useDndChildren = (items, { onChange } = {}) => {
 	};
 };
 //#endregion
-//#region src/components/dnd/panel/children.tsx
+//#region src/components/dnd/panel/children/children.tsx
+const bindingsOf = (node, onChange) => {
+	const source = resolvePanelBindings(node);
+	return source ? withPanelCommit(source.bindings, onChange) : [];
+};
 const Children$1 = ({ value, onChange, onNodeChange }) => {
 	const items = useMemo(() => Array.isArray(value) ? value : [], [value]);
 	const { selection, actions } = useDndChildren(items, { onChange });
@@ -704,6 +2155,12 @@ const Children$1 = ({ value, onChange, onNodeChange }) => {
 					children: messages.children.add
 				})]
 			}),
+			items.length > 0 && /* @__PURE__ */ jsx(SelectAllCheckbox, {
+				total: items.length,
+				selected: selection.selected.size,
+				onSelectAll: () => selection.replace(new Set(items.map((_, index) => index))),
+				onClear: selection.clear
+			}),
 			/* @__PURE__ */ jsx(BulkActionsBar, {
 				count: selection.selected.size,
 				onDuplicate: actions.duplicateSelected,
@@ -719,43 +2176,19 @@ const Children$1 = ({ value, onChange, onNodeChange }) => {
 						className: "flex items-center justify-between",
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "flex items-center space-x-2",
-							children: [/* @__PURE__ */ jsx("div", {
-								onClick: (e) => selection.toggle(itemIndex, e.shiftKey),
-								className: "inline-flex",
-								children: /* @__PURE__ */ jsx(Checkbox, {
-									checked: selection.isSelected(itemIndex),
-									onChange: () => {}
-								})
+							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",
 								children: messages.children.child(itemIndex + 1, item.tagName || "fragment")
 							})]
-						}), /* @__PURE__ */ jsxs("div", {
-							className: "flex space-x-1",
-							children: [
-								/* @__PURE__ */ jsx(Button, {
-									size: "small",
-									icon: /* @__PURE__ */ jsx(ArrowUp, {}),
-									"aria-label": messages.children.moveUp,
-									disabled: itemIndex === 0,
-									onClick: () => actions.move(itemIndex, itemIndex - 1)
-								}),
-								/* @__PURE__ */ jsx(Button, {
-									size: "small",
-									icon: /* @__PURE__ */ jsx(ArrowDown, {}),
-									"aria-label": messages.children.moveDown,
-									disabled: itemIndex === items.length - 1,
-									onClick: () => actions.move(itemIndex, itemIndex + 1)
-								}),
-								/* @__PURE__ */ jsx(Button, {
-									"aria-label": messages.children.delete,
-									title: messages.children.delete,
-									danger: true,
-									size: "small",
-									icon: /* @__PURE__ */ jsx(X, {}),
-									onClick: () => actions.remove(itemIndex)
-								})
-							]
+						}), /* @__PURE__ */ jsx(RowControls, {
+							index: itemIndex,
+							count: items.length,
+							labels: messages.children,
+							onMove: (toIndex) => actions.move(itemIndex, toIndex),
+							onDelete: () => actions.remove(itemIndex)
 						})]
 					}),
 					editableChildrenMap.has(itemIndex) && /* @__PURE__ */ jsxs("div", {
@@ -765,16 +2198,15 @@ const Children$1 = ({ value, onChange, onNodeChange }) => {
 							children: messages.children.editableBindings
 						}), editableChildrenMap.get(itemIndex).map((editableNode, idx) => {
 							const nodeId = editableNode.dataAttributes.find((a) => a.name === "data-id")?.value;
-							return /* @__PURE__ */ jsxs("div", {
-								"data-node-id": nodeId,
+							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",
-								children: [/* @__PURE__ */ jsx("div", {
+								header: /* @__PURE__ */ jsx("div", {
 									className: "mb-1 text-xs text-green-600",
 									children: editableNode.tagName
-								}), /* @__PURE__ */ jsx(Node, {
-									data: editableNode,
-									onChange: onNodeChange
-								})]
+								}),
+								bindings: bindingsOf(editableNode, onNodeChange),
+								onNodeChange
 							}, `editable-${nodeId || idx}`);
 						})]
 					}),
@@ -783,12 +2215,10 @@ const Children$1 = ({ value, onChange, onNodeChange }) => {
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "text-xs font-medium text-green-700",
 							children: messages.children.childNodes
-						}), item.children.map((node, nodeIndex) => /* @__PURE__ */ jsx("div", {
+						}), item.children.map((node, nodeIndex) => /* @__PURE__ */ jsx(ElementFields, {
 							className: "ml-2 rounded border border-green-100 bg-white p-2",
-							children: /* @__PURE__ */ jsx(Node, {
-								data: node,
-								onChange: onNodeChange
-							})
+							bindings: bindingsOf(node, onNodeChange),
+							onNodeChange
 						}, `node-${itemIndex}-${nodeIndex}`))]
 					})
 				]
@@ -797,7 +2227,70 @@ const Children$1 = ({ value, onChange, onNodeChange }) => {
 	});
 };
 //#endregion
-//#region src/components/dnd/panel/field-kind.ts
+//#region src/components/dnd/panel/fields/color-picker-field.tsx
+const COLOR_COMMIT_DELAY = 75;
+const normalizeToHex = (value) => {
+	const trimmed = value.trim();
+	if (/^#([0-9A-Fa-f]{3}){1,2}$/.test(trimmed)) return trimmed;
+	return "#000000";
+};
+const ColorPickerField = ({ value: source, onChange, label }) => {
+	const value = normalizeToHex(source);
+	const [liveValue, setLiveValue] = useState(value);
+	const [prevValue, setPrevValue] = useState(value);
+	const lastCommittedRef = useRef(value);
+	if (value !== prevValue) {
+		setPrevValue(value);
+		setLiveValue(value);
+	}
+	useEffect(() => {
+		lastCommittedRef.current = value;
+	}, [value]);
+	const commit = (next) => {
+		if (next === lastCommittedRef.current) return;
+		lastCommittedRef.current = next;
+		onChange(next);
+	};
+	const debouncedCommit = useDebounce(() => commit(liveValue), {
+		delay: COLOR_COMMIT_DELAY,
+		autoInvoke: false
+	});
+	return /* @__PURE__ */ jsx(ColorPicker, {
+		"aria-label": label,
+		showText: true,
+		value: liveValue,
+		onChange: (next) => {
+			setLiveValue(next);
+			debouncedCommit();
+		},
+		onOpenChange: (open) => {
+			if (!open) commit(liveValue);
+		}
+	});
+};
+//#endregion
+//#region src/components/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;
@@ -812,13 +2305,63 @@ const getFieldKind = (binding) => {
 	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/sortable-items.tsx
+//#region src/components/dnd/panel/fields/jsx-editor-field.tsx
+const JSXEditorField = ({ value, isHTML, onSave }) => {
+	const selectionRef = useRef(null);
+	const focusedRef = useRef(false);
+	const handleUpdate = useCallback((update) => {
+		selectionRef.current = update.state.selection;
+	}, []);
+	const handleCreateEditor = useCallback((view) => {
+		if (selectionRef.current) view.dispatch({ selection: selectionRef.current });
+		if (focusedRef.current) view.focus();
+	}, []);
+	const handleFocus = useCallback(() => {
+		focusedRef.current = true;
+	}, []);
+	const handleBlur = useCallback((event) => {
+		if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) focusedRef.current = false;
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		onFocusCapture: handleFocus,
+		onBlurCapture: handleBlur,
+		children: /* @__PURE__ */ jsx(Core, {
+			value,
+			height: "150px",
+			fragment: !isHTML,
+			raw: isHTML,
+			onSave,
+			onUpdate: handleUpdate,
+			onCreateEditor: handleCreateEditor
+		})
+	});
+};
+//#endregion
+//#region src/components/dnd/panel/fields/labeled-field.tsx
+const LabeledField = ({ binding, label, labelClassName, children }) => {
+	const controlId = useId();
+	const isLabelable = LABELABLE_KINDS.has(getFieldKind(binding));
+	return /* @__PURE__ */ jsxs(FieldIdsContext.Provider, {
+		value: isLabelable ? controlId : null,
+		children: [/* @__PURE__ */ jsx("label", {
+			htmlFor: isLabelable ? controlId : void 0,
+			className: labelClassName,
+			children: label
+		}), children]
+	});
+};
+//#endregion
+//#region src/components/dnd/panel/items/sortable-items.tsx
 const label = (messages, items, id) => {
 	const index = items.findIndex((item) => item.id === id);
 	return index >= 0 ? messages.items.item(index + 1) : String(id);
@@ -900,19 +2443,334 @@ const ItemCard = ({ id, title, disabled, expanded, onToggle, checkbox, controls,
 	});
 };
 //#endregion
-//#region src/components/dnd/panel/use-dnd-items.ts
-const createPendingCommit = () => {
-	let current = null;
+//#region src/utils/ast/array-source.ts
+const commaIn = (source, start, end) => {
+	let comma = null;
+	for (let at = start; at < end; at++) {
+		if (/\s/.test(source[at])) continue;
+		if (source.startsWith("/*", at)) {
+			const close = source.indexOf("*/", at + 2);
+			if (close < 0 || close + 2 > end) return null;
+			at = close + 1;
+		} else if (source.startsWith("//", at)) {
+			const newline = source.indexOf("\n", at + 2);
+			at = newline < 0 ? end : newline;
+		} else if (source[at] === "," && comma === null) comma = at;
+		else return null;
+	}
+	return comma;
+};
+const denseArraySource = (source) => {
+	const array = parseArrayExpression(source);
+	if (!array || array.elements.some((node) => !isExpression(node) || node.extra?.parenthesized)) return null;
+	const elements = array.elements;
+	const commas = elements.slice(0, -1).map((node, index) => commaIn(source, node.end, elements[index + 1].start));
+	if (commas.some((comma) => comma === null)) return null;
+	const last = elements.at(-1);
 	return {
-		read: () => current,
-		write: (next) => {
-			current = next;
-		},
-		clear: () => {
-			current = null;
+		array,
+		elements,
+		commas,
+		trailing: last ? commaIn(source, last.end, array.end - 1) : null
+	};
+};
+const canStructurallyEditArray = (source) => denseArraySource(source) !== null;
+const validArrayIndices = (indices, length) => [...indices].every((index) => Number.isInteger(index) && index >= 0 && index < length);
+const reorderArraySource = (source, elements, next) => applyEdits(source, elements.map((node, index) => ({
+	start: node.start,
+	end: node.end,
+	content: source.slice(next[index].start, next[index].end)
+})));
+const removeArraySource = (source, data, indices) => {
+	const edits = [];
+	const removedCommas = /* @__PURE__ */ new Set();
+	const { elements, commas, trailing } = data;
+	for (let index = 0; index < elements.length; index++) {
+		if (!indices.has(index)) continue;
+		const start = index;
+		while (index + 1 < elements.length && indices.has(index + 1)) index++;
+		for (let current = start; current <= index; current++) {
+			const node = elements[current];
+			edits.push({
+				start: node.start,
+				end: node.end,
+				content: ""
+			});
+			if (current < elements.length - 1) removedCommas.add(commas[current]);
+		}
+		if (index === elements.length - 1) {
+			if (trailing !== null) removedCommas.add(trailing);
+			else if (start > 0) removedCommas.add(commas[start - 1]);
+		}
+	}
+	for (const comma of removedCommas) edits.push({
+		start: comma,
+		end: comma + 1,
+		content: ""
+	});
+	return applyEdits(source, edits);
+};
+const appendArraySource = (source, data, copies) => {
+	const last = data.elements.at(-1);
+	if (!last || copies.length === 0) return source;
+	return applyEdits(source, [{
+		start: last.end,
+		end: last.end,
+		content: `, ${copies.join(", ")}`
+	}]);
+};
+//#endregion
+//#region src/utils/ast/items.ts
+const elementsOf = (code) => parseArrayExpression(code)?.elements ?? null;
+const kindOf = (element) => isObjectExpression(element) ? "object" : "primitive";
+const resolveRenderLeaf = (render, key) => {
+	const leaf = render?.[key];
+	return leaf && "type" in leaf ? leaf : null;
+};
+const toTemplateRaw = (value) => {
+	return value.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${").replace(/\r/g, "\\r");
+};
+const buildPropertyValue = (value, declaredType, renderLeaf, current) => {
+	if (renderLeaf?.property === BINDING_PROP.INNER_HTML) {
+		const raw = String(value);
+		return templateLiteral([templateElement({
+			raw: toTemplateRaw(raw),
+			cooked: raw
+		}, true)], []);
+	}
+	if (renderLeaf?.type === "jsx" || isJSXElement(current) || isJSXFragment(current)) {
+		const trimmed = String(value).trim();
+		if (!trimmed.startsWith("<")) return stringLiteral(trimmed);
+		try {
+			return parseExpression(trimmed, { plugins: ["jsx", "typescript"] });
+		} catch {
+			return;
+		}
+	}
+	if (declaredType === "array" || declaredType === "object") {
+		if (typeof value === "string") try {
+			return parseExpression(value, { plugins: ["jsx", "typescript"] });
+		} catch {
+			return;
+		}
+		if (!isLosslesslyEvaluable(current)) return;
+		return valueToExpression(value) ?? void 0;
+	}
+	return createNodeFromValue(declaredType, parseValue(value)) ?? void 0;
+};
+const updateArrayItemProperty = (code, index, key, value, render) => {
+	const elements = elementsOf(code);
+	const element = elements?.[index];
+	if (!elements || !isObjectExpression(element)) return null;
+	const target = element.properties.find((property) => isObjectProperty(property) && isIdentifier(property.key) && property.key.name === key);
+	if (!target) return null;
+	const declaredType = extractObjectProperties(element)[key]?.type ?? "string";
+	const nextValue = buildPropertyValue(value, declaredType, resolveRenderLeaf(render, key), target.value);
+	if (!nextValue) return null;
+	let serialized = typeof value === "string" && (declaredType === "array" || declaredType === "object" || isJSXElement(nextValue) || isJSXFragment(nextValue)) ? value.trim() : generateCode(nextValue);
+	if (nextValue.trailingComments?.some((comment) => comment.type === "CommentLine")) serialized += "\n";
+	const content = target.shorthand ? `${key}: ${serialized}` : serialized;
+	return applyEdits(code, [{
+		start: target.value.start,
+		end: target.value.end,
+		content
+	}]);
+};
+const updateArrayItemValue = (code, index, value) => {
+	const elements = elementsOf(code);
+	const element = elements?.[index];
+	if (!elements || !isExpression(element)) return null;
+	const nextValue = createNodeFromValue(extractNodeValue(element).type, parseValue(value));
+	if (!nextValue) return null;
+	return applyEdits(code, [{
+		start: element.start,
+		end: element.end,
+		content: generateCode(nextValue)
+	}]);
+};
+const moveArrayItem = (code, from, to) => {
+	const data = denseArraySource(code);
+	if (!data || !validArrayIndices([from], data.elements.length) || !Number.isInteger(to)) return null;
+	const next = [...data.elements];
+	const [moved] = next.splice(from, 1);
+	next.splice(to, 0, moved);
+	return reorderArraySource(code, data.elements, next);
+};
+const moveArrayItems = (code, indices, direction) => {
+	const data = denseArraySource(code);
+	if (!data || !validArrayIndices(indices, data.elements.length) || !["up", "down"].includes(direction)) return null;
+	const next = moveSelectedIndices(data.elements, indices, direction);
+	return {
+		code: reorderArraySource(code, data.elements, next.items),
+		indices: next.indices
+	};
+};
+const removeArrayItems = (code, indices, kind) => {
+	const data = denseArraySource(code);
+	if (!data || !validArrayIndices(indices, data.elements.length)) return null;
+	const remaining = removeIndices(data.elements, indices);
+	if (!(kind === void 0 ? remaining : remaining.filter((node) => kindOf(node) === kind)).length) return null;
+	return removeArraySource(code, data, indices);
+};
+const copyItem = (code, element, generateId, usedIds) => {
+	const edits = [];
+	let unsupported = false;
+	const reserveId = (id) => {
+		if (usedIds.has(id)) unsupported = true;
+		usedIds.add(id);
+		return JSON.stringify(id);
+	};
+	traverseFast(element, (node) => {
+		if (!isJSXOpeningElement(node)) return;
+		const ids = node.attributes.filter((attr) => isJSXAttribute(attr) && isJSXIdentifier(attr.name, { name: "data-id" }));
+		const attr = ids[0];
+		if (ids.length > 1 || attr && (!isStringLiteral(attr.value) || node.attributes.slice(node.attributes.indexOf(attr) + 1).some((a) => isJSXSpreadAttribute(a)))) {
+			unsupported = true;
+			return;
+		}
+		if (attr && isStringLiteral(attr.value)) edits.push({
+			start: attr.value.start,
+			end: attr.value.end,
+			content: reserveId(generateId())
+		});
+	});
+	if (isObjectExpression(element)) {
+		const keys = element.properties.filter((prop) => isObjectProperty(prop) && !prop.computed && (isIdentifier(prop.key, { name: "key" }) || isStringLiteral(prop.key, { value: "key" })));
+		const key = keys[0];
+		if (keys.length > 1 || key && (!isStringLiteral(key.value) || element.properties.slice(element.properties.indexOf(key) + 1).some((prop) => isSpreadElement(prop) || "computed" in prop && prop.computed))) return null;
+		if (key && isStringLiteral(key.value)) edits.push({
+			start: key.value.start,
+			end: key.value.end,
+			content: reserveId(`${key.value.value}-${generateId()}`)
+		});
+	}
+	if (unsupported) return null;
+	return applyEdits(code.slice(element.start, element.end), edits.map((edit) => ({
+		...edit,
+		start: edit.start - element.start,
+		end: edit.end - element.start
+	})));
+};
+const duplicateArrayItems = (code, indices, generateId = () => nanoid(6)) => {
+	const data = denseArraySource(code);
+	if (!data || !indices.size || !validArrayIndices(indices, data.elements.length)) return null;
+	const usedIds = /* @__PURE__ */ new Set();
+	traverseFast(data.array, (node) => {
+		if (isJSXAttribute(node) && isJSXIdentifier(node.name, { name: "data-id" }) && isStringLiteral(node.value)) usedIds.add(node.value.value);
+		else if (isObjectProperty(node) && !node.computed && (isIdentifier(node.key, { name: "key" }) || isStringLiteral(node.key, { value: "key" })) && isStringLiteral(node.value)) usedIds.add(node.value.value);
+	});
+	const copies = [...indices].sort((a, b) => a - b).map((index) => copyItem(code, data.elements[index], generateId, usedIds));
+	return copies.every((copy) => copy !== null) ? appendArraySource(code, data, copies) : null;
+};
+const appendArrayItem = (code, kind, generateId = () => nanoid(6)) => {
+	const index = denseArraySource(code)?.elements.findIndex((node) => kindOf(node) === kind) ?? -1;
+	return index < 0 ? null : duplicateArrayItems(code, /* @__PURE__ */ new Set([index]), generateId);
+};
+//#endregion
+//#region src/components/dnd/panel/items/item-bindings.ts
+const isPrimitiveItem = (item) => !("editableProperties" in item);
+const toItemBindings = (item, { id, value, render, onNodeChange, onValueChange, onPropertyChange }) => {
+	if (isPrimitiveItem(item)) return {
+		id,
+		index: item.index,
+		elementIndex: item.elementIndex,
+		properties: [],
+		nested: [],
+		value: {
+			id: `primitive-${item.id}`,
+			label: `item-${item.index}`,
+			property: item.type,
+			value: item.value ?? "",
+			rawValue: item.type === "unknown" ? item.source : String(item.value ?? ""),
+			canEditValue: canLosslesslyEvaluateSource(item.source),
+			onChange: onValueChange
+		}
+	};
+	const properties = Object.entries(item.editableProperties).map(([key, prop]) => {
+		const binding = resolveRenderEntry(render, key);
+		const propertySource = value.slice(prop.astNode.start, prop.astNode.end);
+		return {
+			...toBindingFields(binding),
+			id: `item-${id}-${key}`,
+			meta: {
+				...binding.meta,
+				valueType: prop.type
+			},
+			value: parseValue(String(prop.value)),
+			rawValue: prop.type === "unknown" ? propertySource : String(prop.value),
+			canEditValue: canLosslesslyEvaluateSource(propertySource),
+			onChange: (next) => onPropertyChange(key, next)
+		};
+	});
+	const nested = [...Object.entries(item.jsxBindings).map(([property, nodes]) => ({
+		property,
+		elements: nodes.flatMap((node) => {
+			const source = resolvePanelBindings(node);
+			if (!source) return [];
+			return [{
+				id: source.id,
+				tagName: source.tagName,
+				bindings: withPanelCommit(source.bindings, onNodeChange)
+			}];
+		})
+	})), ...Object.entries(item.jsxFallbacks).map(([property, code]) => ({
+		property,
+		elements: [],
+		fallback: {
+			id: `item-${id}-${property}-jsx`,
+			label: property,
+			property,
+			type: "jsx",
+			value: code,
+			rawValue: code,
+			canEditValue: true,
+			onChange: (next) => onPropertyChange(property, next)
 		}
+	}))];
+	return {
+		id,
+		index: item.index,
+		elementIndex: item.elementIndex,
+		properties,
+		nested
 	};
 };
+//#endregion
+//#region src/components/dnd/panel/items/item-identity.ts
+const createIdentityState = (value, kind, items, ids = items.map((item) => item.id)) => ({
+	value,
+	kind,
+	ids,
+	signatures: items.map((item) => item.source)
+});
+const reconcileIdentityState = (current, value, kind, items) => {
+	if (current && current.value === value && current.kind === kind && current.ids.length === items.length) return current;
+	if (!current || current.kind !== kind) return createIdentityState(value, kind, items);
+	const previousCounts = /* @__PURE__ */ new Map();
+	const nextCounts = /* @__PURE__ */ new Map();
+	current.signatures.forEach((signature) => {
+		previousCounts.set(signature, (previousCounts.get(signature) ?? 0) + 1);
+	});
+	items.forEach((item) => {
+		nextCounts.set(item.source, (nextCounts.get(item.source) ?? 0) + 1);
+	});
+	const ids = items.map((item) => {
+		const previousIndex = current.signatures.indexOf(item.source);
+		return previousIndex >= 0 && previousCounts.get(item.source) === 1 && nextCounts.get(item.source) === 1 ? current.ids[previousIndex] : item.id;
+	});
+	return createIdentityState(value, kind, items, ids);
+};
+const moveId = (ids, from, to) => {
+	const next = [...ids];
+	const [moved] = next.splice(from, 1);
+	next.splice(to, 0, moved);
+	return next;
+};
+const removeIds = (ids, indices) => {
+	return ids.filter((_, index) => !indices.has(index));
+};
+//#endregion
+//#region src/components/dnd/panel/items/items-source.ts
 const bindingsInJSX = (source, bindingOptions) => {
 	const nodes = extract(source, bindingOptions);
 	const container = nodes.find((n) => n.bindings?.some((b) => b.property === "children"));
@@ -978,49 +2836,29 @@ const parseSource = (value, bindingOptions) => {
 		parseError: false
 	};
 };
-const createIdentityState = (value, kind, items, ids = items.map((item) => item.id)) => ({
-	value,
-	kind,
-	ids,
-	signatures: items.map((item) => item.source)
-});
-const reconcileIdentityState = (current, value, kind, items) => {
-	if (current && current.value === value && current.kind === kind && current.ids.length === items.length) return current;
-	if (!current || current.kind !== kind) return createIdentityState(value, kind, items);
-	const previousCounts = /* @__PURE__ */ new Map();
-	const nextCounts = /* @__PURE__ */ new Map();
-	current.signatures.forEach((signature) => {
-		previousCounts.set(signature, (previousCounts.get(signature) ?? 0) + 1);
-	});
-	items.forEach((item) => {
-		nextCounts.set(item.source, (nextCounts.get(item.source) ?? 0) + 1);
-	});
-	const ids = items.map((item) => {
-		const previousIndex = current.signatures.indexOf(item.source);
-		return previousIndex >= 0 && previousCounts.get(item.source) === 1 && nextCounts.get(item.source) === 1 ? current.ids[previousIndex] : item.id;
-	});
-	return createIdentityState(value, kind, items, ids);
-};
-const moveId = (ids, from, to) => {
-	const next = [...ids];
-	const [moved] = next.splice(from, 1);
-	next.splice(to, 0, moved);
-	return next;
-};
-const removeIds = (ids, indices) => {
-	return ids.filter((_, index) => !indices.has(index));
+//#endregion
+//#region src/components/dnd/panel/items/use-item-expansion.ts
+const useItemExpansion = (ids) => {
+	const [collapsed, { toggle, set }] = useSet();
+	return {
+		expandedIds: ids.filter((id) => !collapsed.has(id)),
+		isExpanded: (id) => !collapsed.has(id),
+		toggle: (id) => toggle(id),
+		setExpanded: (expandedIds) => {
+			const expanded = new Set(expandedIds);
+			set(ids.filter((id) => !expanded.has(id)));
+		}
+	};
 };
-const useDndItems = (value, { render, onChange, onNodeChange } = {}) => {
+//#endregion
+//#region src/components/dnd/panel/items/use-dnd-items.ts
+const useDndItems = (value, { render, onChange, onNodeChange, minItems, maxItems } = {}) => {
 	const { reportError, bindingOptions } = useDndEditOptions();
 	const messages = useLiveMessages();
 	const { objectItems, primitiveItems, parseError } = useMemo(() => parseSource(value, bindingOptions), [value, bindingOptions]);
 	const canEditStructure = useMemo(() => canStructurallyEditArray(value), [value]);
-	const reportErrorRef = useRef(reportError);
-	const messagesRef = useRef(messages);
-	useEffect(() => {
-		reportErrorRef.current = reportError;
-		messagesRef.current = messages;
-	});
+	const reportErrorRef = useLatest(reportError);
+	const messagesRef = useLatest(messages);
 	useEffect(() => {
 		if (parseError) reportErrorRef.current({
 			type: "parse",
@@ -1028,7 +2866,11 @@ const useDndItems = (value, { render, onChange, onNodeChange } = {}) => {
 			title: messagesRef.current.editErrors.itemsParseFailed,
 			description: messagesRef.current.editErrors.checkConsole
 		});
-	}, [parseError]);
+	}, [
+		parseError,
+		reportErrorRef,
+		messagesRef
+	]);
 	const kind = primitiveItems.length > 0 && objectItems.length === 0 ? "primitive" : "object";
 	const isPrimitive = kind === "primitive";
 	const rawItems = isPrimitive ? primitiveItems : objectItems;
@@ -1039,15 +2881,11 @@ const useDndItems = (value, { render, onChange, onNodeChange } = {}) => {
 		rawItems,
 		value
 	]);
-	const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
 	const { selection, record } = useStructuralSelection(isPrimitive ? primitiveItems.length : objectItems.length, value);
-	const [pending] = useState(createPendingCommit);
-	useEffect(() => {
-		pending.clear();
-	});
+	const pending = usePendingCommit(value);
 	const latest = () => {
 		const last = pending.read();
-		if (last?.from !== value) return {
+		if (!last) return {
 			value,
 			items: rawItems,
 			ids: identity.ids,
@@ -1080,7 +2918,6 @@ const useDndItems = (value, { render, onChange, onNodeChange } = {}) => {
 		const nextItems = kind === "primitive" ? parsed.primitiveItems : parsed.objectItems;
 		const ids = nextIds ?? snapshot.ids;
 		pending.write({
-			from: value,
 			value: next,
 			ids,
 			selected: nextSelection
@@ -1090,6 +2927,17 @@ const useDndItems = (value, { render, onChange, onNodeChange } = {}) => {
 		onChange?.(next);
 		return true;
 	};
+	const fewestItems = Math.max(minItems ?? 1, 1);
+	const refuseCount = (length) => {
+		const description = maxItems !== void 0 && length > maxItems ? messages.validation.maxItems(maxItems) : minItems !== void 0 && length < fewestItems ? messages.validation.minItems(fewestItems) : null;
+		if (description === null) return false;
+		reportError({
+			type: "items",
+			title: messages.editErrors.itemUpdateFailed,
+			description
+		});
+		return true;
+	};
 	const elementIndicesOf = (snapshot, indices) => new Set(snapshot.items.filter((item) => indices.has(item.index)).map((item) => item.elementIndex));
 	const updateProperty = (elementIndex, propertyKey, next) => {
 		const snapshot = latest();
@@ -1106,6 +2954,7 @@ const useDndItems = (value, { render, onChange, onNodeChange } = {}) => {
 	const actions = {
 		add: () => {
 			const snapshot = latest();
+			if (refuseCount(snapshot.items.length + 1)) return;
 			const next = appendArrayItem(snapshot.value, kind);
 			commit(snapshot, next, next ? [...snapshot.ids, nanoid(6)] : void 0, selectionAfter({ type: "append" }, snapshot.selected, snapshot.items.length));
 		},
@@ -1119,12 +2968,13 @@ const useDndItems = (value, { render, onChange, onNodeChange } = {}) => {
 		remove: (elementIndex) => {
 			const snapshot = latest();
 			const removed = locate(snapshot, elementIndex);
-			if (removed === null) return;
+			if (removed === null || refuseCount(snapshot.items.length - 1)) return;
 			commit(snapshot, removeArrayItems(snapshot.value, /* @__PURE__ */ new Set([removed?.elementIndex ?? elementIndex]), kind), removed ? removeIds(snapshot.ids, /* @__PURE__ */ new Set([removed.index])) : void 0, /* @__PURE__ */ new Set());
 		},
 		duplicateSelected: () => {
 			const snapshot = latest();
 			const selected = elementIndicesOf(snapshot, snapshot.selected);
+			if (refuseCount(snapshot.items.length + selected.size)) return;
 			const next = duplicateArrayItems(snapshot.value, selected);
 			const copied = snapshot.items.filter((item) => selected.has(item.elementIndex)).sort((a, b) => a.elementIndex - b.elementIndex).map(() => nanoid(6));
 			commit(snapshot, next, next ? [...snapshot.ids, ...copied] : void 0, selectionAfter({
@@ -1145,99 +2995,33 @@ const useDndItems = (value, { render, onChange, onNodeChange } = {}) => {
 		},
 		removeSelected: () => {
 			const snapshot = latest();
-			commit(snapshot, removeArrayItems(snapshot.value, elementIndicesOf(snapshot, snapshot.selected), kind), removeIds(snapshot.ids, snapshot.selected), /* @__PURE__ */ new Set());
+			const selected = elementIndicesOf(snapshot, snapshot.selected);
+			if (refuseCount(snapshot.items.length - selected.size)) return;
+			commit(snapshot, removeArrayItems(snapshot.value, selected, kind), removeIds(snapshot.ids, snapshot.selected), /* @__PURE__ */ new Set());
 		}
 	};
-	const items = isPrimitive ? primitiveItems.map((item) => ({
+	const items = rawItems.map((item) => toItemBindings(item, {
 		id: identity.ids[item.index] ?? item.id,
-		index: item.index,
-		elementIndex: item.elementIndex,
-		properties: [],
-		nested: [],
-		value: {
-			id: `primitive-${item.id}`,
-			label: `item-${item.index}`,
-			property: item.type,
-			value: item.value ?? "",
-			rawValue: item.type === "unknown" ? item.source : String(item.value ?? ""),
-			canEditValue: canLosslesslyEvaluateSource(item.source),
-			onChange: (next) => updateValue(item.elementIndex, next)
-		}
-	})) : objectItems.map((item) => {
-		const id = identity.ids[item.index] ?? item.id;
-		const properties = Object.entries(item.editableProperties).map(([key, prop]) => {
-			const binding = resolveRenderEntry(render, key);
-			const propertySource = value.slice(prop.astNode.start, prop.astNode.end);
-			return {
-				...toBindingFields(binding),
-				id: `item-${id}-${key}`,
-				meta: {
-					...binding.meta,
-					valueType: prop.type
-				},
-				value: parseValue(String(prop.value)),
-				rawValue: prop.type === "unknown" ? propertySource : String(prop.value),
-				canEditValue: canLosslesslyEvaluateSource(propertySource),
-				onChange: (next) => updateProperty(item.elementIndex, key, next)
-			};
-		});
-		const nested = [...Object.entries(item.jsxBindings).map(([property, nodes]) => ({
-			property,
-			elements: nodes.flatMap((node) => {
-				const source = resolvePanelBindings(node);
-				if (!source) return [];
-				return [{
-					id: source.id,
-					tagName: source.tagName,
-					bindings: withPanelCommit(source.bindings, onNodeChange)
-				}];
-			})
-		})), ...Object.entries(item.jsxFallbacks).map(([property, code]) => ({
-			property,
-			elements: [],
-			fallback: {
-				id: `item-${id}-${property}-jsx`,
-				label: property,
-				property,
-				type: "jsx",
-				value: code,
-				rawValue: code,
-				canEditValue: true,
-				onChange: (next) => updateProperty(item.elementIndex, property, next)
-			}
-		}))];
-		return {
-			id,
-			index: item.index,
-			elementIndex: item.elementIndex,
-			properties,
-			nested
-		};
-	});
+		value,
+		render,
+		onNodeChange,
+		onValueChange: (next) => updateValue(item.elementIndex, next),
+		onPropertyChange: (key, next) => updateProperty(item.elementIndex, key, next)
+	}));
 	return {
 		kind,
 		items,
 		selection,
-		expansion: {
-			expandedIds: items.flatMap((item) => collapsed.has(item.id) ? [] : [item.id]),
-			isExpanded: (id) => !collapsed.has(id),
-			toggle: (id) => setCollapsed((previous) => {
-				const next = new Set(previous);
-				if (!next.delete(id)) next.add(id);
-				return next;
-			}),
-			setExpanded: (ids) => {
-				const expanded = new Set(ids);
-				setCollapsed(new Set(items.flatMap((item) => expanded.has(item.id) ? [] : [item.id])));
-			}
-		},
+		expansion: useItemExpansion(items.map((item) => item.id)),
 		actions,
 		canEditStructure,
+		canAddItems: (count = 1) => maxItems === void 0 || items.length + count <= maxItems,
+		canRemoveItems: (count = 1) => items.length - count >= fewestItems,
 		parseError
 	};
 };
 //#endregion
-//#region src/components/dnd/panel/items.tsx
+//#region src/components/dnd/panel/items/items.tsx
 const NestedGroup = ({ group, onNodeChange }) => {
 	if (group.fallback) return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-2",
@@ -1259,48 +3043,30 @@ const NestedGroup = ({ group, onNodeChange }) => {
 				group.elements.length,
 				"):"
 			]
-		}), group.elements.map((element) => /* @__PURE__ */ jsxs("div", {
-			"data-node-id": element.id,
+		}), 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",
-			children: [/* @__PURE__ */ jsxs("div", {
+			header: /* @__PURE__ */ jsxs("div", {
 				className: "mb-1 text-xs text-blue-600",
 				children: [
 					"<",
 					element.tagName,
 					">"
 				]
-			}), /* @__PURE__ */ jsx("div", {
-				className: "space-y-2 rounded",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "space-y-1",
-					children: element.bindings.map((binding) => /* @__PURE__ */ jsxs("div", {
-						className: "space-y-1",
-						children: [/* @__PURE__ */ jsxs("label", {
-							className: "block text-xs font-semibold text-gray-700",
-							children: [binding.label, /* @__PURE__ */ jsxs("span", {
-								className: "ml-1 text-gray-400",
-								children: [
-									"(",
-									binding.property,
-									")"
-								]
-							})]
-						}), /* @__PURE__ */ jsx(Field, {
-							binding,
-							onNodeChange
-						})]
-					}, `${binding.property}-${binding.label}`))
-				})
-			})]
+			}),
+			bindings: element.bindings,
+			onNodeChange
 		}, `${group.property}-${element.id}`))]
 	});
 };
-const Items = ({ value, render, onChange, onChildChange }) => {
+const Items = ({ value, render, minItems, maxItems, onChange, onChildChange }) => {
 	const messages = useLiveMessages();
-	const { kind, items, selection, expansion, actions, canEditStructure, parseError } = useDndItems(value, {
+	const { kind, items, selection, expansion, actions, canEditStructure, canAddItems, canRemoveItems, parseError } = useDndItems(value, {
 		render,
 		onChange,
-		onNodeChange: onChildChange
+		onNodeChange: onChildChange,
+		minItems,
+		maxItems
 	});
 	const header = /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center justify-between",
@@ -1312,6 +3078,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 			icon: /* @__PURE__ */ jsx(Plus, {}),
 			variant: "solid",
 			color: "green",
+			disabled: !canAddItems(),
 			onClick: actions.add,
 			children: messages.items.add
 		})]
@@ -1333,59 +3100,27 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 	const bulkBar = /* @__PURE__ */ jsx(BulkActionsBar, {
 		count: selection.selected.size,
 		disabled: !canEditStructure,
+		duplicateDisabled: !canAddItems(selection.selected.size),
+		deleteDisabled: !canRemoveItems(selection.selected.size),
 		onDuplicate: actions.duplicateSelected,
 		onMoveUp: () => actions.moveSelected("up"),
 		onMoveDown: () => actions.moveSelected("down"),
 		onDelete: actions.removeSelected,
 		onClear: selection.clear
 	});
-	const itemControls = (item) => /* @__PURE__ */ jsxs("div", {
-		className: "flex space-x-1",
-		children: [
-			/* @__PURE__ */ jsx(Button, {
-				size: "small",
-				icon: /* @__PURE__ */ jsx(ArrowUp, {}),
-				"aria-label": messages.items.moveUp,
-				disabled: !canEditStructure || item.index === 0,
-				onClick: () => actions.move(item.elementIndex, item.index - 1)
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				size: "small",
-				icon: /* @__PURE__ */ jsx(ArrowDown, {}),
-				"aria-label": messages.items.moveDown,
-				disabled: !canEditStructure || item.index === items.length - 1,
-				onClick: () => actions.move(item.elementIndex, item.index + 1)
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				danger: true,
-				size: "small",
-				icon: /* @__PURE__ */ jsx(X, {}),
-				"aria-label": messages.items.delete,
-				disabled: !canEditStructure || items.length <= 1,
-				onClick: () => actions.remove(item.elementIndex)
-			})
-		]
-	});
-	const itemCheckbox = (item) => /* @__PURE__ */ jsx("div", {
-		onClick: (e) => canEditStructure && selection.toggle(item.index, e.shiftKey),
-		className: "inline-flex",
-		children: /* @__PURE__ */ jsx(Checkbox, {
-			checked: selection.isSelected(item.index),
-			disabled: !canEditStructure,
-			onChange: () => {}
-		})
-	});
 	const objectBody = (item) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 		className: "space-y-2",
-		children: item.properties.map((binding) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+		children: item.properties.map((binding) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
 			className: "flex flex-col space-y-2",
-			children: [/* @__PURE__ */ jsx("label", {
-				className: "w-20 shrink-0 text-xs font-medium",
-				children: binding.label
-			}), /* @__PURE__ */ jsx(Field, {
+			children: /* @__PURE__ */ jsx(LabeledField, {
 				binding,
-				onNodeChange: onChildChange
-			})]
+				labelClassName: "w-20 shrink-0 text-xs font-medium",
+				label: binding.label,
+				children: /* @__PURE__ */ jsx(Field, {
+					binding,
+					onNodeChange: onChildChange
+				})
+			})
 		}), /* @__PURE__ */ jsxs("span", {
 			className: "text-right text-xs text-gray-500",
 			children: [
@@ -1416,14 +3151,20 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 		className: "space-y-4",
 		children: [
 			header,
-			items.length > 1 && /* @__PURE__ */ jsx("div", {
-				className: "flex justify-end",
-				children: /* @__PURE__ */ jsx(Button, {
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx(SelectAllCheckbox, {
+					total: items.length,
+					selected: selection.selected.size,
+					disabled: !canEditStructure,
+					onSelectAll: () => selection.replace(new Set(items.map((item) => item.index))),
+					onClear: selection.clear
+				}), items.length > 1 && /* @__PURE__ */ jsx(Button, {
 					size: "small",
 					variant: "text",
 					onClick: () => expansion.setExpanded(allExpanded ? [] : items.map((item) => item.id)),
 					children: allExpanded ? messages.items.collapseAll : messages.items.expandAll
-				})
+				})]
 			}),
 			bulkBar,
 			!canEditStructure && /* @__PURE__ */ jsx("div", {
@@ -1440,8 +3181,20 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 					disabled: !canEditStructure,
 					expanded: expansion.isExpanded(item.id),
 					onToggle: () => expansion.toggle(item.id),
-					checkbox: itemCheckbox(item),
-					controls: itemControls(item),
+					checkbox: /* @__PURE__ */ jsx(SelectionCheckbox, {
+						checked: selection.isSelected(item.index),
+						disabled: !canEditStructure,
+						onToggle: (shiftKey) => selection.toggle(item.index, shiftKey)
+					}),
+					controls: /* @__PURE__ */ jsx(RowControls, {
+						index: item.index,
+						count: items.length,
+						labels: messages.items,
+						disabled: !canEditStructure,
+						deleteDisabled: !canRemoveItems(),
+						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",
 					children: kind === "primitive" ? /* @__PURE__ */ jsx(Field, {
 						binding: item.value,
@@ -1454,22 +3207,18 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 };
 //#endregion
 //#region src/components/dnd/panel/field.tsx
-const normalizeToHex = (value) => {
-	const trimmed = value.trim();
-	if (/^#([0-9A-Fa-f]{3}){1,2}$/.test(trimmed)) return trimmed;
-	return "#000000";
-};
 const parseDateValue = (value) => {
-	const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value.trim());
+	const match = /^(\d{4})-(\d{2})-(\d{2})(?:T(\d{2}):(\d{2}))?$/.exec(value.trim());
 	if (!match) return;
-	const [, year, month, day] = match;
-	const date = new Date(Number(year), Number(month) - 1, Number(day));
+	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 formatDateValue = (date) => {
-	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+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 COLOR_COMMIT_DELAY = 75;
 const RICHTEXT_TOOLBAR = [
 	"bold",
 	"italic",
@@ -1478,69 +3227,9 @@ const RICHTEXT_TOOLBAR = [
 	"orderedList",
 	"link"
 ];
-const JSXEditorField = ({ value, isHTML, onSave }) => {
-	const selectionRef = useRef(null);
-	const focusedRef = useRef(false);
-	const handleUpdate = useCallback((update) => {
-		selectionRef.current = update.state.selection;
-	}, []);
-	const handleCreateEditor = useCallback((view) => {
-		if (selectionRef.current) view.dispatch({ selection: selectionRef.current });
-		if (focusedRef.current) view.focus();
-	}, []);
-	const handleFocus = useCallback(() => {
-		focusedRef.current = true;
-	}, []);
-	const handleBlur = useCallback((event) => {
-		if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) focusedRef.current = false;
-	}, []);
-	return /* @__PURE__ */ jsx("div", {
-		onFocusCapture: handleFocus,
-		onBlurCapture: handleBlur,
-		children: /* @__PURE__ */ jsx(Core, {
-			value,
-			height: "150px",
-			fragment: !isHTML,
-			raw: isHTML,
-			onSave,
-			onUpdate: handleUpdate,
-			onCreateEditor: handleCreateEditor
-		})
-	});
-};
-const ColorPickerField = ({ value, onChange }) => {
-	const [liveValue, setLiveValue] = useState(value);
-	const [prevValue, setPrevValue] = useState(value);
-	const lastCommittedRef = useRef(value);
-	if (value !== prevValue) {
-		setPrevValue(value);
-		setLiveValue(value);
-	}
-	useEffect(() => {
-		lastCommittedRef.current = value;
-	}, [value]);
-	const commit = (next) => {
-		if (next === lastCommittedRef.current) return;
-		lastCommittedRef.current = next;
-		onChange(next);
-	};
-	const debouncedCommit = useDebounce(() => commit(liveValue), {
-		delay: COLOR_COMMIT_DELAY,
-		autoInvoke: false
-	});
-	return /* @__PURE__ */ jsx(ColorPicker, {
-		showText: true,
-		value: liveValue,
-		onChange: (next) => {
-			setLiveValue(next);
-			debouncedCommit();
-		},
-		onOpenChange: (open) => {
-			if (!open) commit(liveValue);
-		}
-	});
-};
-const FieldError = ({ message }) => message ? /* @__PURE__ */ jsx("p", {
+const FieldError = ({ id, message }) => message ? /* @__PURE__ */ jsx("p", {
+	id,
+	role: "alert",
 	className: "mt-1 mb-0 text-xs text-red-500",
 	children: message
 }) : null;
@@ -1549,6 +3238,13 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 	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) {
@@ -1570,9 +3266,20 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 	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,
+		minItems: binding.minItems,
+		maxItems: binding.maxItems,
 		onChange,
 		onChildChange: onNodeChange
 	});
@@ -1597,26 +3304,31 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 			className: "space-y-2 rounded border border-gray-200 bg-gray-50 p-2",
 			children: Object.entries(objectValue).map(([key, val]) => {
 				const nested = resolveRenderEntry(binding.render, key);
-				return /* @__PURE__ */ jsxs("div", {
+				return /* @__PURE__ */ jsx("div", {
 					className: "space-y-1",
-					children: [/* @__PURE__ */ jsx("label", {
-						className: "block text-xs font-medium text-gray-600",
-						children: nested.label
-					}), /* @__PURE__ */ jsx(Field, {
+					children: /* @__PURE__ */ jsx(LabeledField, {
 						binding: {
-							...toBindingFields(nested),
-							id,
-							value: val,
-							rawValue: typeof val === "object" && val !== null ? JSON.stringify(val) : String(val),
-							onChange: (next) => {
-								onChange({
-									...objectValue,
-									[key]: next
-								});
-							}
+							...nested,
+							value: val
 						},
-						onNodeChange
-					})]
+						labelClassName: "block text-xs font-medium text-gray-600",
+						label: nested.label,
+						children: /* @__PURE__ */ jsx(Field, {
+							binding: {
+								...toBindingFields(nested),
+								id,
+								value: val,
+								rawValue: typeof val === "object" && val !== null ? JSON.stringify(val) : String(val),
+								onChange: (next) => {
+									onChange({
+										...objectValue,
+										[key]: next
+									});
+								}
+							},
+							onNodeChange
+						})
+					})
 				}, key);
 			})
 		});
@@ -1629,76 +3341,76 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 	});
 	const stringValue = rawValue;
 	if (kind === "select") return /* @__PURE__ */ jsx(Select, {
+		"aria-label": binding.label,
 		value: stringValue,
 		options: binding.options ?? [],
 		onChange: commitIfChanged
 	});
 	if (kind === "color") return /* @__PURE__ */ jsx(ColorPickerField, {
-		value: normalizeToHex(stringValue),
+		value: stringValue,
+		label: binding.label,
 		onChange: commitIfChanged
 	});
-	if (kind === "date") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DatePicker, {
-		value: parseDateValue(stringValue),
-		onChange: (date) => {
-			const next = date ? formatDateValue(date) : "";
-			const result = validateBindingValue(binding, next, validationOptions);
-			if (!result.valid) {
-				setValidationError(result.message ?? messages.panel.invalidValue);
-				return;
-			}
-			setValidationError(null);
-			commitIfChanged(next);
-		}
-	}), /* @__PURE__ */ jsx(FieldError, { message: validationError })] });
-	if (kind === "url") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input, {
-		type: "url",
+	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, {
+		...controlProps,
+		value: stringValue || null,
+		onChange: (time) => validateAndCommit(time ?? "")
+	}), /* @__PURE__ */ jsx(FieldError, {
+		id: errorId,
+		message: validationError
+	})] });
+	if (kind === "url" || kind === "email" || kind === "tel") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input, {
+		...controlProps,
+		type: kind,
 		value: text,
 		onChange: (e) => setText(e.target.value),
-		placeholder: messages.panel.urlPlaceholder,
-		onBlur: (e) => {
-			const next = e.target.value.trim();
-			const result = validateBindingValue(binding, next, validationOptions);
-			if (!result.valid) {
-				setValidationError(result.message ?? messages.panel.invalidValue);
-				return;
-			}
-			setValidationError(null);
-			commitIfChanged(next);
-		}
-	}), /* @__PURE__ */ jsx(FieldError, { message: validationError })] });
+		placeholder: kind === "url" ? messages.panel.urlPlaceholder : kind === "email" ? messages.panel.emailPlaceholder : messages.panel.telPlaceholder,
+		onBlur: (e) => validateAndCommit(e.target.value.trim())
+	}), /* @__PURE__ */ jsx(FieldError, {
+		id: errorId,
+		message: validationError
+	})] });
 	if (kind === "number") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input, {
+		...controlProps,
 		type: "number",
+		step: binding.step,
 		value: text,
 		onChange: (e) => setText(e.target.value),
 		placeholder: messages.panel.numberPlaceholder,
 		onBlur: (e) => {
 			const raw = e.target.value.trim();
 			const next = raw !== "" && !Number.isNaN(Number(raw)) ? Number(raw) : raw;
-			const result = validateBindingValue(binding, next, validationOptions);
-			if (!result.valid) {
-				setValidationError(result.message ?? messages.panel.invalidValue);
-				return;
-			}
-			setValidationError(null);
-			commitIfChanged(next);
+			validateAndCommit(next);
 		}
-	}), /* @__PURE__ */ jsx(FieldError, { message: validationError })] });
+	}), /* @__PURE__ */ jsx(FieldError, {
+		id: errorId,
+		message: validationError
+	})] });
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input.TextArea, {
+		...controlProps,
 		value: text,
 		onChange: (e) => setText(e.target.value),
 		placeholder: messages.panel.textPlaceholder,
 		onBlur: (e) => {
 			const raw = e.target.value.trim();
 			const next = binding.type ? raw : parseValue(raw);
-			const result = validateBindingValue(binding, next, validationOptions);
-			if (!result.valid) {
-				setValidationError(result.message ?? messages.panel.invalidValue);
-				return;
-			}
-			setValidationError(null);
-			commitIfChanged(next);
+			validateAndCommit(next);
 		}
-	}), /* @__PURE__ */ jsx(FieldError, { message: validationError })] });
+	}), /* @__PURE__ */ jsx(FieldError, {
+		id: errorId,
+		message: validationError
+	})] });
 };
 const Field = (props) => {
 	const { renderField } = useDndEditOptions();
@@ -1708,30 +3420,63 @@ const Field = (props) => {
 	return custom === void 0 ? builtin : /* @__PURE__ */ jsx(Fragment, { children: custom });
 };
 //#endregion
-//#region src/components/dnd/panel/field-group.tsx
-const FieldGroup = ({ bindings, onNodeChange }) => /* @__PURE__ */ jsx("div", {
-	className: "space-y-2 rounded",
-	children: /* @__PURE__ */ jsx("div", {
-		className: "space-y-1",
-		children: bindings.map((binding) => /* @__PURE__ */ jsxs("div", {
-			className: "space-y-1",
-			children: [/* @__PURE__ */ jsxs("label", {
-				className: "block text-xs font-semibold text-gray-700",
-				children: [binding.label, /* @__PURE__ */ jsxs("span", {
-					className: "ml-1 text-gray-400",
-					children: [
-						"(",
-						binding.property,
-						")"
-					]
-				})]
-			}), /* @__PURE__ */ jsx(Field, {
-				binding,
-				onNodeChange
-			})]
-		}, `${binding.property}-${binding.label}`))
-	})
-});
+//#region src/components/dnd/panel/element-fields.tsx
+const KEEP_IN_VIEW_MS = 600;
+const ElementFields = ({ id, header, bindings, onNodeChange, children, ...props }) => {
+	const { ids, scrollRootRef } = useContext(ElementSelectionContext);
+	const ref = useRef(null);
+	const isPicked = id !== void 0 && ids.has(id);
+	useEffect(() => {
+		const card = ref.current;
+		if (!isPicked || !card) return;
+		const until = performance.now() + KEEP_IN_VIEW_MS;
+		let frame = 0;
+		const keepInView = () => {
+			const root = scrollRootRef?.current;
+			const box = card.getBoundingClientRect();
+			const view = root?.getBoundingClientRect();
+			if (!view || box.top < view.top || box.bottom > view.bottom) card.scrollIntoView?.({ block: "nearest" });
+			if (performance.now() < until) frame = requestAnimationFrame(keepInView);
+		};
+		keepInView();
+		return () => cancelAnimationFrame(frame);
+	}, [isPicked, scrollRootRef]);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		ref,
+		"data-node-id": id,
+		"data-picked": isPicked ? "" : void 0,
+		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, {
+							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
+							})
+						})
+					}, `${binding.property}-${binding.label}`))
+				})
+			}),
+			children
+		]
+	});
+};
 //#endregion
 //#region src/components/dnd/panel/panel.tsx
 const groupBindingsById = (bindings) => {
@@ -1767,26 +3512,10 @@ const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canM
 		highlight(targetId);
 		return () => highlight(null);
 	}, [highlight, targetId]);
-	useEffect(() => {
-		const root = rootRef.current;
-		if (!root || !pickedId) return;
-		const target = root.querySelector(`[data-node-id="${CSS.escape(pickedId)}"]`);
-		if (!target) return;
-		target.setAttribute("data-picked", "");
-		const until = performance.now() + 600;
-		let frame = 0;
-		const keepInView = () => {
-			const box = target.getBoundingClientRect();
-			const view = root.getBoundingClientRect();
-			if (box.top < view.top || box.bottom > view.bottom) target.scrollIntoView?.({ block: "nearest" });
-			if (performance.now() < until) frame = requestAnimationFrame(keepInView);
-		};
-		keepInView();
-		return () => {
-			cancelAnimationFrame(frame);
-			target.removeAttribute("data-picked");
-		};
-	}, [pickedId, groups.length]);
+	const selection = useMemo(() => ({
+		ids: new Set(pickedId ? [pickedId] : []),
+		scrollRootRef: rootRef
+	}), [pickedId]);
 	if (!item) return /* @__PURE__ */ jsx(Typography.Paragraph, {
 		className: cn("p-4 text-sm text-gray-500"),
 		children: messages.panel.selectSection
@@ -1839,27 +3568,29 @@ const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canM
 				className: "text-xs text-gray-400",
 				children: messages.panel.noEditableElements
 			}),
-			groups.map((group) => {
-				const element = describeElement(group[0]);
-				return /* @__PURE__ */ jsxs("div", {
-					"data-node-id": group[0].id,
-					role: "group",
-					"aria-label": element.label,
-					className: "rounded data-[picked]:ring-2 data-[picked]:ring-blue-400\n              data-[picked]:ring-offset-2",
-					children: [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",
-						children: [/* @__PURE__ */ jsx("code", {
-							className: "shrink-0 text-gray-500",
-							children: element.tagName
-						}), element.text && /* @__PURE__ */ jsx("span", {
-							className: "truncate text-gray-400",
-							children: element.text
-						})]
-					}), /* @__PURE__ */ jsx(FieldGroup, {
+			/* @__PURE__ */ jsx(ElementSelectionContext.Provider, {
+				value: selection,
+				children: groups.map((group) => {
+					const element = describeElement(group[0]);
+					return /* @__PURE__ */ jsx(ElementFields, {
+						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",
+						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",
+							children: [/* @__PURE__ */ jsx("code", {
+								className: "shrink-0 text-gray-500",
+								children: element.tagName
+							}), element.text && /* @__PURE__ */ jsx("span", {
+								className: "truncate text-gray-400",
+								children: element.text
+							})]
+						}),
 						bindings: group,
 						onNodeChange
-					})]
-				}, group[0].id);
+					}, group[0].id);
+				})
 			})
 		]
 	});
@@ -1988,38 +3719,112 @@ const Layout = ({ palette, panel }) => {
 	] });
 };
 //#endregion
-//#region src/components/dnd/state/use-delete-flow.ts
-const useDeleteFlow = ({ sections, remove, onBeforeDelete }) => {
-	const removeRef = useRef(remove);
-	useEffect(() => {
-		removeRef.current = remove;
-	});
-	return (id, onDeleted) => {
-		const section = sections.find((candidate) => candidate.id === id);
-		if (!onBeforeDelete || !section) {
-			remove(id);
-			onDeleted?.();
-			return;
-		}
-		const decide = (allowed) => {
-			if (allowed) {
-				removeRef.current(id);
-				onDeleted?.();
-			}
+//#region src/components/dnd/state/edit-errors.ts
+const describeUpdateFailure = (failure, label, { editErrors: m }) => {
+	switch (failure?.reason) {
+		case "attribute-not-found": return {
+			title: m.updateFailed(label),
+			description: m.attributeNotFound(failure.property)
 		};
-		try {
-			const answer = onBeforeDelete(section);
-			if (typeof answer === "boolean") {
-				decide(answer);
-				return;
-			}
-			answer.then(decide, (error) => {
-				console.error("onBeforeDelete rejected; the section was kept", error);
-			});
-		} catch (error) {
-			console.error("onBeforeDelete threw; the section was kept", error);
-		}
-	};
+		case "binding-not-declared": return {
+			title: m.updateFailed(label),
+			description: m.bindingNotDeclared({
+				label,
+				property: failure.property
+			})
+		};
+		case "duplicate-binding": return {
+			title: m.updateFailed(label),
+			description: m.duplicateBinding({
+				count: failure.count,
+				label,
+				property: failure.property
+			})
+		};
+		case "reserved-property": return {
+			title: m.cannotEdit(label),
+			description: m.reservedProperty(failure.property)
+		};
+		case "required-property": return {
+			title: m.cannotRemove(label),
+			description: m.requiredProperty(failure.property)
+		};
+		case "no-binding": return {
+			title: m.updateFailed(label),
+			description: m.noBinding
+		};
+		case "element-not-found": return {
+			title: m.updateFailed(label),
+			description: m.elementNotFound
+		};
+		case "self-closing": return {
+			title: m.cannotEdit(label),
+			description: m.selfClosing(failure.property)
+		};
+		case "unsupported-syntax": return {
+			title: m.cannotEdit(label),
+			description: m.unsupportedSyntax(failure.property)
+		};
+		case "parse-error": return {
+			title: m.updateFailed(label),
+			description: failure.error instanceof Error ? failure.error.message : m.checkConsole
+		};
+		default: return { title: m.updateFailed(label) };
+	}
+};
+const blockedEditError = (error, { editErrors: m }) => ({
+	type: "parse",
+	target: "document",
+	reason: "parse-error",
+	error,
+	title: m.syntaxError,
+	description: m.syntaxErrorDetail
+});
+const useEditErrors = (onEditError) => {
+	const messages = useLiveMessages();
+	const reportError = onEditError ?? toastEditError;
+	const reportErrorRef = useLatest(reportError);
+	const messagesRef = useLatest(messages);
+	const reportLatest = useCallback((build) => reportErrorRef.current(build(messagesRef.current)), [reportErrorRef, messagesRef]);
+	return {
+		reportError,
+		messages,
+		reportLatest,
+		onBlockedEdit: useCallback((problem) => {
+			if (problem.reason === "parse-error") reportLatest((m) => blockedEditError(problem.error, m));
+		}, [reportLatest])
+	};
+};
+//#endregion
+//#region src/components/dnd/state/use-delete-flow.ts
+const useDeleteFlow = ({ sections, remove, onBeforeDelete }) => {
+	const removeRef = useLatest(remove);
+	return (id, onDeleted) => {
+		const section = sections.find((candidate) => candidate.id === id);
+		if (!onBeforeDelete || !section) {
+			remove(id);
+			onDeleted?.();
+			return;
+		}
+		const decide = (allowed) => {
+			if (allowed) {
+				removeRef.current(id);
+				onDeleted?.();
+			}
+		};
+		try {
+			const answer = onBeforeDelete(section);
+			if (typeof answer === "boolean") {
+				decide(answer);
+				return;
+			}
+			answer.then(decide, (error) => {
+				console.error("onBeforeDelete rejected; the section was kept", error);
+			});
+		} catch (error) {
+			console.error("onBeforeDelete threw; the section was kept", error);
+		}
+	};
 };
 //#endregion
 //#region src/components/dnd/state/use-dnd-keyboard.ts
@@ -2115,44 +3920,16 @@ const useInspectorState = ({ selectedId, selectOnly, sectionNodes, onNodePick })
 	const [picked, setPicked] = useState(null);
 	const [hoverRect, setHoverRect] = useState(null);
 	const [fieldTarget, setFieldTarget] = useState(null);
-	const [fieldRect, setFieldRect] = useState(null);
 	if (picked && picked.sectionId !== selectedId) setPicked(null);
 	const stopInspecting = useCallback(() => {
 		setInspecting(false);
 		setHoverRect(null);
 	}, []);
-	useEffect(() => {
-		if (!inspecting) return;
-		const onKeyDown = (e) => {
-			if (e.key === "Escape") stopInspecting();
-		};
-		window.addEventListener("keydown", onKeyDown);
-		return () => window.removeEventListener("keydown", onKeyDown);
-	}, [inspecting, stopInspecting]);
-	useEffect(() => {
-		const section = selectedId === null ? null : sectionNodes.get(selectedId);
-		if (!fieldTarget || !section) return;
-		let frame = 0;
-		const measure = () => {
-			cancelAnimationFrame(frame);
-			frame = requestAnimationFrame(() => {
-				const element = findElementById(section, fieldTarget);
-				setFieldRect(element ? viewportRect(element) : null);
-			});
-		};
-		measure();
-		window.addEventListener("scroll", measure, true);
-		window.addEventListener("resize", measure);
-		return () => {
-			cancelAnimationFrame(frame);
-			window.removeEventListener("scroll", measure, true);
-			window.removeEventListener("resize", measure);
-		};
-	}, [
-		fieldTarget,
-		selectedId,
-		sectionNodes
-	]);
+	useKeyPress("esc", stopInspecting, { enabled: inspecting });
+	const fieldRect = useElementPosition(() => {
+		const section = selectedId === null ? void 0 : sectionNodes.get(selectedId);
+		return fieldTarget && section ? findElementById(section, fieldTarget) : null;
+	}, { measure: viewportRect });
 	const inspector = {
 		active: inspecting,
 		activate: () => setInspecting(true),
@@ -2241,37 +4018,27 @@ const useSectionDocument = (value, onChange, { containerId, sectionNameFallback,
 	]);
 	const selectedIndex = sections.findIndex((s) => s.id === selectedId);
 	const selectedSection = selectedIndex >= 0 ? sections[selectedIndex] : void 0;
-	const pendingRef = useRef(null);
-	useEffect(() => {
-		pendingRef.current = null;
-	});
-	const latestDocument = useCallback(() => {
-		const pending = pendingRef.current;
-		return pending?.from === document ? pending.code : document;
-	}, [document]);
+	const pending = usePendingCommit(document);
+	const latestDocument = useCallback(() => pending.read() ?? document, [document, pending]);
 	const latestSections = useCallback(() => readSections(latestDocument()), [latestDocument, readSections]);
 	const commit = useCallback((nextSections) => {
 		const nextCode = fillSectionIds(replaceSections(latestDocument(), nextSections.map((s) => s.code), { containerId }), void 0, { containerId });
-		pendingRef.current = {
-			from: document,
-			code: nextCode
-		};
+		pending.write(nextCode);
 		onChange?.(nextCode);
 		setCode(nextCode);
 		return readSections(nextCode);
 	}, [
 		containerId,
-		document,
 		latestDocument,
 		onChange,
+		pending,
 		readSections,
 		setCode
 	]);
 	const getCommittedSection = useCallback((id) => {
-		const pending = pendingRef.current;
-		if (pending?.from !== document) return;
-		return readSections(pending.code).find((s) => s.id === id);
-	}, [document, readSections]);
+		const code = pending.read();
+		return code === void 0 ? void 0 : readSections(code).find((s) => s.id === id);
+	}, [pending, readSections]);
 	const { problem, stale } = view;
 	const refuse = useCallback(() => {
 		if (!stale || !problem) return false;
@@ -2282,6 +4049,10 @@ const useSectionDocument = (value, onChange, { containerId, sectionNameFallback,
 		problem,
 		stale
 	]);
+	const mutate = useCallback((fn) => {
+		if (refuse()) return;
+		fn(latestSections());
+	}, [latestSections, refuse]);
 	return {
 		sections,
 		previews,
@@ -2293,36 +4064,25 @@ const useSectionDocument = (value, onChange, { containerId, sectionNameFallback,
 		}, []),
 		selectOnly: useCallback((id) => setSelectedId(id), []),
 		clearSelection: useCallback(() => setSelectedId(null), []),
-		add: useCallback((section, atIndex) => {
-			if (refuse()) return;
-			const current = latestSections();
+		add: useCallback((section, atIndex) => mutate((current) => {
 			const next = { code: section.code };
 			commit(atIndex === void 0 || atIndex < 0 ? [...current, next] : [
 				...current.slice(0, atIndex),
 				next,
 				...current.slice(atIndex)
 			]);
-		}, [
-			commit,
-			refuse,
-			latestSections
-		]),
-		remove: useCallback((id) => {
-			if (refuse()) return;
-			const current = latestSections();
+		}), [commit, mutate]),
+		remove: useCallback((id) => mutate((current) => {
 			const index = current.findIndex((s) => s.id === id);
 			if (index < 0) return;
 			if (id === selectedId) setSelectedId(null);
 			commit(current.filter((_, i) => i !== index));
-		}, [
+		}), [
 			commit,
-			refuse,
-			latestSections,
+			mutate,
 			selectedId
 		]),
-		copy: useCallback((id) => {
-			if (refuse()) return;
-			const current = latestSections();
+		copy: useCallback((id) => mutate((current) => {
 			const index = current.findIndex((s) => s.id === id);
 			const source = current[index];
 			if (!source) return;
@@ -2332,192 +4092,33 @@ const useSectionDocument = (value, onChange, { containerId, sectionNameFallback,
 				...current.slice(index + 1)
 			]);
 			setSelectedId(committed[index + 1]?.id ?? null);
-		}, [
-			commit,
-			refuse,
-			latestSections
-		]),
-		move: useCallback((id, direction) => {
-			if (refuse()) return;
-			const current = latestSections();
+		}), [commit, mutate]),
+		move: useCallback((id, direction) => mutate((current) => {
 			const index = current.findIndex((s) => s.id === id);
 			const targetIndex = direction === "up" ? index - 1 : index + 1;
 			if (index < 0 || targetIndex < 0 || targetIndex >= current.length) return;
 			commit(arrayMove(current, index, targetIndex));
-		}, [
-			commit,
-			refuse,
-			latestSections
-		]),
-		reorder: useCallback((activeId, overId) => {
-			if (refuse()) return;
-			const current = latestSections();
+		}), [commit, mutate]),
+		reorder: useCallback((activeId, overId) => mutate((current) => {
 			const prevIndex = current.findIndex((s) => s.id === activeId);
 			const nextIndex = current.findIndex((s) => s.id === overId);
 			if (prevIndex < 0 || nextIndex < 0 || prevIndex === nextIndex) return;
 			commit(arrayMove(current, prevIndex, nextIndex));
-		}, [
-			commit,
-			refuse,
-			latestSections
-		]),
-		patch: useCallback((next) => {
-			if (refuse()) return;
-			const current = latestSections();
+		}), [commit, mutate]),
+		patch: useCallback((next) => mutate((current) => {
 			commit(current.map((s) => s.id === next.id ? {
 				...s,
 				...next
 			} : s));
-		}, [
-			commit,
-			refuse,
-			latestSections
-		]),
+		}), [commit, mutate]),
 		getCommittedSection,
 		problem,
 		stale
 	};
 };
 //#endregion
-//#region src/components/dnd/dnd.tsx
-const describeUpdateFailure = (failure, label, { editErrors: m }) => {
-	switch (failure?.reason) {
-		case "attribute-not-found": return {
-			title: m.updateFailed(label),
-			description: m.attributeNotFound(failure.property)
-		};
-		case "binding-not-declared": return {
-			title: m.updateFailed(label),
-			description: m.bindingNotDeclared({
-				label,
-				property: failure.property
-			})
-		};
-		case "duplicate-binding": return {
-			title: m.updateFailed(label),
-			description: m.duplicateBinding({
-				count: failure.count,
-				label,
-				property: failure.property
-			})
-		};
-		case "reserved-property": return {
-			title: m.cannotEdit(label),
-			description: m.reservedProperty(failure.property)
-		};
-		case "required-property": return {
-			title: m.cannotRemove(label),
-			description: m.requiredProperty(failure.property)
-		};
-		case "no-binding": return {
-			title: m.updateFailed(label),
-			description: m.noBinding
-		};
-		case "element-not-found": return {
-			title: m.updateFailed(label),
-			description: m.elementNotFound
-		};
-		case "self-closing": return {
-			title: m.cannotEdit(label),
-			description: m.selfClosing(failure.property)
-		};
-		case "unsupported-syntax": return {
-			title: m.cannotEdit(label),
-			description: m.unsupportedSyntax(failure.property)
-		};
-		case "parse-error": return {
-			title: m.updateFailed(label),
-			description: failure.error instanceof Error ? failure.error.message : m.checkConsole
-		};
-		default: return { title: m.updateFailed(label) };
-	}
-};
-const blockedEditError = (error, { editErrors: m }) => ({
-	type: "parse",
-	target: "document",
-	reason: "parse-error",
-	error,
-	title: m.syntaxError,
-	description: m.syntaxErrorDetail
-});
-const conditionalModifiers = (args) => {
-	const { active } = args;
-	if (paletteSectionOf(active?.data)) return args.transform;
-	return restrictToVerticalAxis(args);
-};
-const NO_MODULES = {};
-const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange: _onChange, className, items = [], frame, dynamicTailwind = false, provider, renderField, onEditError, renderSectionFallback, shouldForceSectionFallback, onBeforeDelete, sectionNameFallback, containerId, bindings: bindingRegistry, bindingKeys, onNodePick, children, ...restProps }) => {
-	const modules = useStableModules(_modules);
-	const [mobilePaletteOpen, setMobilePaletteOpen] = useState(false);
-	const { breakpoint } = useResponsiveSize();
-	const isMobile = breakpoint.current === "xs" || breakpoint.current === "sm";
-	const { code } = usePreview();
-	const isForced = (section) => {
-		try {
-			return shouldForceSectionFallback?.(section) === true;
-		} catch (error) {
-			console.error("shouldForceSectionFallback threw", error);
-			return false;
-		}
-	};
-	const value = _value === void 0 ? code : _value;
-	const messages = useLiveMessages();
-	const reportError = onEditError ?? toastEditError;
-	const reportErrorRef = useRef(reportError);
-	const messagesRef = useRef(messages);
-	useEffect(() => {
-		reportErrorRef.current = reportError;
-		messagesRef.current = messages;
-	});
-	const onBlockedEdit = useCallback((problem) => {
-		if (problem.reason === "parse-error") reportErrorRef.current(blockedEditError(problem.error, messagesRef.current));
-	}, []);
-	const { sections, previews, selectedId, selectedSection, selectedIndex, select, selectOnly, clearSelection, add: addSection, remove, copy: onCopy, move: moveSection, reorder, patch, getCommittedSection, problem, stale } = useSectionDocument(value, _onChange, {
-		containerId,
-		sectionNameFallback,
-		onBlockedEdit
-	});
-	const missingContainer = problem?.reason === "container-not-found" ? problem.containerId : null;
-	const onDragEnd = (event) => {
-		const { active, over } = event;
-		if (!over) return;
-		const section = paletteSectionOf(active.data);
-		if (section) {
-			const atBottom = over.id === "sortable-area" || over.id === "sortable-area-bottom";
-			addSection(section, atBottom ? void 0 : sections.findIndex((s) => s.id === over.id));
-			return;
-		}
-		if (active.id !== over.id && sections.some((s) => s.id === active.id)) reorder(String(active.id), String(over.id));
-	};
-	const onSelect = (id) => select(id);
-	const requestDelete = useDeleteFlow({
-		sections,
-		remove,
-		onBeforeDelete
-	});
-	const onDelete = (id) => requestDelete(id);
-	const { sensors, announcements, screenReaderInstructions, sectionNodes, onNavigate, onDeleteKey, onMoveButton } = useDndKeyboard({
-		sections,
-		selectedId,
-		selectedIndex,
-		selectOnly,
-		move: moveSection,
-		requestDelete
-	});
-	const { inspector, inspecting, onInspectMove, onInspectPick, onInspectLeave, highlightRect } = useInspectorState({
-		selectedId,
-		selectOnly,
-		sectionNodes,
-		onNodePick
-	});
-	const onChange = (next) => {
-		if (!next.id) return;
-		patch(next);
-	};
-	const bindingOptions = useMemo(() => ({
-		bindings: bindingRegistry,
-		bindingKeys
-	}), [bindingRegistry, bindingKeys]);
+//#region src/components/dnd/state/use-section-editing.ts
+const useSectionEditing = ({ selectedSection, stale, problem, missingContainer, getCommittedSection, onChange, bindingOptions, reportError, messages, reportLatest }) => {
 	const selectedCode = selectedSection?.code;
 	const selectedSectionId = selectedSection?.id;
 	const { fields, updatedCode, parseError } = useMemo(() => {
@@ -2547,24 +4148,24 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		bindingOptions
 	]);
 	useEffect(() => {
-		if (missingContainer !== null) reportErrorRef.current({
+		if (missingContainer !== null) reportLatest((m) => ({
 			type: "parse",
 			target: "document",
 			reason: "container-not-found",
 			containerId: missingContainer,
-			title: messagesRef.current.editErrors.missingContainer(missingContainer),
-			description: messagesRef.current.editErrors.missingContainerDetail(missingContainer)
-		});
-	}, [missingContainer]);
+			title: m.editErrors.missingContainer(missingContainer),
+			description: m.editErrors.missingContainerDetail(missingContainer)
+		}));
+	}, [missingContainer, reportLatest]);
 	useEffect(() => {
-		if (parseError) reportErrorRef.current({
+		if (parseError) reportLatest((m) => ({
 			type: "parse",
 			target: "section",
 			error: parseError.error,
-			title: messagesRef.current.editErrors.sectionParseFailed,
-			description: messagesRef.current.editErrors.checkConsole
-		});
-	}, [parseError]);
+			title: m.editErrors.sectionParseFailed,
+			description: m.editErrors.checkConsole
+		}));
+	}, [parseError, reportLatest]);
 	const commitChanges = (changes) => {
 		if (changes.length === 0) return;
 		if (stale && problem?.reason === "parse-error") {
@@ -2597,7 +4198,108 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 	};
 	const onFieldChange = (change) => commitChanges([change]);
 	const bindingFields = useMemo(() => fields.flatMap((node) => resolvePanelBindings(node)?.bindings ?? []), [fields]);
-	const bindings = withPanelCommit(bindingFields, onFieldChange);
+	return {
+		bindings: withPanelCommit(bindingFields, onFieldChange),
+		onFieldChange,
+		commitChanges
+	};
+};
+//#endregion
+//#region src/components/dnd/dnd.tsx
+const conditionalModifiers = (args) => {
+	const { active } = args;
+	if (paletteSectionOf(active?.data)) return args.transform;
+	return restrictToVerticalAxis(args);
+};
+const NO_MODULES = {};
+const emptyCanvasNotice = (messages, problem, isMobile) => {
+	if (problem?.reason === "parse-error") return {
+		title: messages.canvas.syntaxError,
+		detail: messages.canvas.syntaxErrorDetail
+	};
+	if (problem?.reason === "container-not-found") return {
+		title: messages.canvas.missingContainer(problem.containerId),
+		detail: messages.canvas.missingContainerDetail(problem.containerId)
+	};
+	return {
+		title: messages.canvas.empty,
+		detail: isMobile ? messages.canvas.emptyHintTouch : messages.canvas.emptyHintDrag
+	};
+};
+const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange: _onChange, className, items = [], frame, dynamicTailwind = false, provider, renderField, onEditError, renderSectionFallback, shouldForceSectionFallback, onBeforeDelete, sectionNameFallback, containerId, bindings: bindingRegistry, bindingKeys, onNodePick, children, ...restProps }) => {
+	const modules = useStableValue(_modules);
+	const [mobilePaletteOpen, setMobilePaletteOpen] = useState(false);
+	const { breakpoint } = useResponsiveSize();
+	const isMobile = breakpoint.current === "xs" || breakpoint.current === "sm";
+	const { code } = usePreview();
+	const isForced = (section) => {
+		try {
+			return shouldForceSectionFallback?.(section) === true;
+		} catch (error) {
+			console.error("shouldForceSectionFallback threw", error);
+			return false;
+		}
+	};
+	const value = _value === void 0 ? code : _value;
+	const { reportError, messages, onBlockedEdit, reportLatest } = useEditErrors(onEditError);
+	const { sections, previews, selectedId, selectedSection, selectedIndex, select, selectOnly, clearSelection, add: addSection, remove, copy: onCopy, move: moveSection, reorder, patch, getCommittedSection, problem, stale } = useSectionDocument(value, _onChange, {
+		containerId,
+		sectionNameFallback,
+		onBlockedEdit
+	});
+	const missingContainer = problem?.reason === "container-not-found" ? problem.containerId : null;
+	const onDragEnd = (event) => {
+		const { active, over } = event;
+		if (!over) return;
+		const section = paletteSectionOf(active.data);
+		if (section) {
+			const atBottom = over.id === "sortable-area" || over.id === "sortable-area-bottom";
+			addSection(section, atBottom ? void 0 : sections.findIndex((s) => s.id === over.id));
+			return;
+		}
+		if (active.id !== over.id && sections.some((s) => s.id === active.id)) reorder(String(active.id), String(over.id));
+	};
+	const onSelect = (id) => select(id);
+	const requestDelete = useDeleteFlow({
+		sections,
+		remove,
+		onBeforeDelete
+	});
+	const onDelete = (id) => requestDelete(id);
+	const { sensors, announcements, screenReaderInstructions, sectionNodes, onNavigate, onDeleteKey, onMoveButton } = useDndKeyboard({
+		sections,
+		selectedId,
+		selectedIndex,
+		selectOnly,
+		move: moveSection,
+		requestDelete
+	});
+	const { inspector, inspecting, onInspectMove, onInspectPick, onInspectLeave, highlightRect } = useInspectorState({
+		selectedId,
+		selectOnly,
+		sectionNodes,
+		onNodePick
+	});
+	const onChange = (next) => {
+		if (!next.id) return;
+		patch(next);
+	};
+	const bindingOptions = useMemo(() => ({
+		bindings: bindingRegistry,
+		bindingKeys
+	}), [bindingRegistry, bindingKeys]);
+	const { bindings, onFieldChange, commitChanges } = useSectionEditing({
+		selectedSection,
+		stale,
+		problem,
+		missingContainer,
+		getCommittedSection,
+		onChange,
+		bindingOptions,
+		reportError,
+		messages,
+		reportLatest
+	});
 	useEffect(() => {
 		if (frame?.scripts?.length) preloadScripts(frame.scripts);
 	}, [frame?.scripts]);
@@ -2622,67 +4324,60 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		readOnly: stale,
 		bindingOptions
 	};
-	const canvas = /* @__PURE__ */ jsxs(Fragment, { 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"),
-			children: messages.canvas.stale
-		}),
-		/* @__PURE__ */ jsx(Droppable, {
-			className: cn(!sections.length && "h-full"),
-			children: !sections.length ? /* @__PURE__ */ jsx("div", {
-				className: cn("flex items-center justify-center", "h-full", "text-gray-500"),
-				children: problem?.reason === "parse-error" ? /* @__PURE__ */ jsxs(Space, {
-					orientation: "vertical",
-					align: "center",
-					children: [/* @__PURE__ */ jsx(Typography.Paragraph, { children: messages.canvas.syntaxError }), /* @__PURE__ */ jsx(Typography.Text, { children: messages.canvas.syntaxErrorDetail })]
-				}) : missingContainer !== null ? /* @__PURE__ */ jsxs(Space, {
-					orientation: "vertical",
-					align: "center",
-					children: [/* @__PURE__ */ jsx(Typography.Paragraph, { children: messages.canvas.missingContainer(missingContainer) }), /* @__PURE__ */ jsx(Typography.Text, { children: messages.canvas.missingContainerDetail(missingContainer) })]
-				}) : /* @__PURE__ */ jsxs(Space, {
-					orientation: "vertical",
-					align: "center",
-					children: [/* @__PURE__ */ jsx(Typography.Paragraph, { children: messages.canvas.empty }), /* @__PURE__ */ jsx(Typography.Text, { children: isMobile ? messages.canvas.emptyHintTouch : messages.canvas.emptyHintDrag })]
+	const sectionHandlers = {
+		inspecting,
+		onInspectMove,
+		onInspectPick,
+		onInspectLeave,
+		nodeRef: sectionNodes.register,
+		onNavigate,
+		onDeleteKey
+	};
+	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"),
+				children: messages.canvas.stale
+			}),
+			/* @__PURE__ */ jsx(Droppable, {
+				className: cn(!sections.length && "h-full"),
+				children: !sections.length ? /* @__PURE__ */ jsx("div", {
+					className: cn("flex items-center justify-center", "h-full", "text-gray-500"),
+					children: /* @__PURE__ */ jsx(CanvasNotice, { ...emptyCanvasNotice(messages, problem, isMobile) })
+				}) : /* @__PURE__ */ jsx(SortableContext, {
+					items: sections.map((s) => s.id),
+					strategy: verticalListSortingStrategy,
+					children: sections.map((section, index) => /* @__PURE__ */ jsx(Sortable, {
+						id: section.id,
+						name: section.name,
+						selected: selectedId === section.id,
+						onClick: () => onSelect(section.id),
+						onDelete,
+						onCopy,
+						onMoveUp: () => onMoveButton(section.id, "up"),
+						onMoveDown: () => onMoveButton(section.id, "down"),
+						canMoveUp: index > 0,
+						canMoveDown: index < sections.length - 1,
+						children: /* @__PURE__ */ jsx(renderer_default, {
+							preview: previews[index],
+							sectionId: section.id,
+							sectionName: section.name,
+							sectionCode: section.code,
+							forceFallback: isForced(section),
+							modules,
+							frame,
+							dynamicTailwind,
+							provider,
+							...props
+						})
+					}, section.id))
 				})
-			}) : /* @__PURE__ */ jsx(SortableContext, {
-				items: sections.map((s) => s.id),
-				strategy: verticalListSortingStrategy,
-				children: sections.map((section, index) => /* @__PURE__ */ jsx(Sortable, {
-					id: section.id,
-					name: section.name,
-					selected: selectedId === section.id,
-					onClick: () => onSelect(section.id),
-					onDelete,
-					onCopy,
-					onMoveUp: () => onMoveButton(section.id, "up"),
-					onMoveDown: () => onMoveButton(section.id, "down"),
-					canMoveUp: index > 0,
-					canMoveDown: index < sections.length - 1,
-					nodeRef: sectionNodes.register(section.id),
-					onNavigate: (to) => onNavigate(section.id, to),
-					onDeleteKey: () => onDeleteKey(section.id),
-					inspecting,
-					onInspectMove,
-					onInspectPick: (...args) => onInspectPick(section.id, ...args),
-					onInspectLeave,
-					children: /* @__PURE__ */ jsx(renderer_default, {
-						preview: previews[index],
-						sectionId: section.id,
-						sectionName: section.name,
-						sectionCode: section.code,
-						forceFallback: isForced(section),
-						modules,
-						frame,
-						dynamicTailwind,
-						provider,
-						...props
-					})
-				}, section.id))
-			})
-		}),
-		/* @__PURE__ */ jsx(InspectorHighlight, { rect: highlightRect })
-	] });
+			}),
+			/* @__PURE__ */ jsx(InspectorHighlight, { rect: highlightRect })
+		]
+	});
 	return /* @__PURE__ */ jsx(SectionFallbackContext.Provider, {
 		value: renderSectionFallback,
 		children: /* @__PURE__ */ jsxs(DndContext, {
@@ -2745,11 +4440,7 @@ Dnd.Palette = Palette;
 Dnd.Canvas = Canvas;
 Dnd.Panel = Panel;
 Dnd.Layout = Layout;
-/** @deprecated Renamed to `useDndItems`. */
-const useItemsEditor = useDndItems;
-/** @deprecated Renamed to `useDndChildren`. */
-const useChildrenEditor = useDndChildren;
 //#endregion
-export { useDndPanel as _, Layout as a, Field as c, isStructuralFieldKind as d, useDndChildren as f, useDndPalette as g, useDndLayout as h, Canvas as i, useDndItems as l, withPanelCommit as m, useChildrenEditor as n, Palette as o, resolvePanelBindings as p, useItemsEditor as r, Panel as s, Dnd as t, getFieldKind as u, useDndInspector as v, DraggableItem as y };
+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 };
 
-//# sourceMappingURL=dnd-V8NAxd_R.js.map
+//# sourceMappingURL=dnd-BlC1gqUy.js.map