@jbpark/live-editor 4.6.0 → 5.0.0

package/dist/dnd-BlC1gqUy.js

@@ -0,0 +1,4446 @@
+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 { _ 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 { 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 { 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) => ({
+	type: PALETTE_SECTION,
+	section
+});
+const paletteSectionOf = (data) => {
+	const current = data?.current;
+	return current?.type === PALETTE_SECTION ? current.section : void 0;
+};
+//#endregion
+//#region src/components/dnd/canvas/droppable.tsx
+const Droppable = ({ children, className }) => {
+	const { setNodeRef, isOver, active } = useDroppable({ id: "sortable-area" });
+	const { setNodeRef: setBottomRef, isOver: isBottomOver } = useDroppable({ id: "sortable-area-bottom" });
+	const isPaletteSectionDragging = !!paletteSectionOf(active?.data);
+	const shouldHighlight = isOver && isPaletteSectionDragging;
+	const shouldHighlightBottom = isBottomOver && isPaletteSectionDragging;
+	const messages = useLiveMessages();
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setNodeRef,
+		className: cn("min-h-full", "border-2 border-dashed p-1", shouldHighlight ? "border-blue-300 bg-blue-50" : "border-gray-200", className),
+		children: [children, isPaletteSectionDragging && /* @__PURE__ */ jsx("div", {
+			ref: setBottomRef,
+			className: cn("mt-2 min-h-24", "rounded-lg border-2 border-dashed", "transition-all duration-200", "flex items-center justify-center", shouldHighlightBottom ? "border-blue-400 bg-blue-100" : "border-gray-300 bg-gray-50"),
+			children: /* @__PURE__ */ jsx(Typography.Text, {
+				className: "text-sm text-gray-500",
+				children: shouldHighlightBottom ? messages.canvas.dropHere : messages.canvas.dropAtBottom
+			})
+		})]
+	});
+};
+//#endregion
+//#region src/components/dnd/canvas/inspector-highlight.tsx
+const InspectorHighlight = ({ rect }) => {
+	const ref = useRef(null);
+	useLayoutEffect(() => {
+		const box = ref.current;
+		const container = box?.closest("[data-frame-container]");
+		if (!box || !rect || !container) return;
+		const outer = container.getBoundingClientRect();
+		box.style.left = `${rect.left - outer.left - container.clientLeft + container.scrollLeft}px`;
+		box.style.top = `${rect.top - outer.top - container.clientTop + container.scrollTop}px`;
+		box.style.width = `${rect.width}px`;
+		box.style.height = `${rect.height}px`;
+	}, [rect]);
+	return rect ? /* @__PURE__ */ jsx("div", {
+		ref,
+		"aria-hidden": true,
+		"data-dnd-inspector-highlight": true,
+		style: {
+			position: "absolute",
+			pointerEvents: "none",
+			outline: "2px solid #3b82f6",
+			outlineOffset: -1,
+			background: "rgba(59, 130, 246, 0.12)",
+			zIndex: 65
+		}
+	}) : null;
+};
+//#endregion
+//#region src/components/dnd/palette/draggable.tsx
+const DraggableItem = ({ item, children }) => {
+	const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+		id: item.id,
+		data: paletteDragData(item)
+	});
+	return children({
+		ref: setNodeRef,
+		dragProps: {
+			...listeners,
+			...attributes
+		},
+		isDragging
+	});
+};
+const DefaultDraggableItem = ({ item, onAdd, tapToAdd = false }) => /* @__PURE__ */ jsx(DraggableItem, {
+	item,
+	children: ({ ref, dragProps, isDragging }) => /* @__PURE__ */ jsx(Card, {
+		ref,
+		style: { opacity: isDragging ? .5 : 1 },
+		...dragProps,
+		className: cn("cursor-grab", "outline-none focus-visible:ring-2 focus-visible:ring-blue-500", "hover:border-blue-300 hover:shadow-md", isDragging && "opacity-50"),
+		onClick: tapToAdd && onAdd ? () => onAdd(item) : void 0,
+		onDoubleClick: onAdd ? () => onAdd(item) : void 0,
+		onKeyDown: (event) => {
+			dragProps.onKeyDown?.(event);
+			if (onAdd && event.key === "Enter" && event.target === event.currentTarget && !event.defaultPrevented) {
+				event.preventDefault();
+				onAdd(item);
+			}
+		},
+		children: item.name
+	})
+});
+//#endregion
+//#region src/components/dnd/canvas/section-fallback-context.ts
+const SectionFallbackContext = createContext(void 0);
+//#endregion
+//#region src/components/dnd/canvas/section-fallback.tsx
+const ConsumerFallback = ({ render, args, builtin }) => {
+	const node = render(args);
+	return node === void 0 ? builtin : /* @__PURE__ */ jsx(Fragment, { children: node });
+};
+const SectionFallback = ({ args, builtin }) => {
+	const render = useContext(SectionFallbackContext);
+	if (!render) return builtin;
+	return /* @__PURE__ */ jsx(ErrorBoundary, {
+		fallback: () => builtin,
+		children: /* @__PURE__ */ jsx(ConsumerFallback, {
+			render,
+			args,
+			builtin
+		})
+	});
+};
+//#endregion
+//#region src/components/dnd/canvas/renderer.tsx
+const Renderer = ({ preview, sectionId = "", sectionName = "", sectionCode = preview, forceFallback = false, headers, modules, frame, dynamicTailwind = false, provider }) => {
+	const module = useCompiledModule(forceFallback ? "" : preview, modules);
+	const section = {
+		id: sectionId,
+		name: sectionName,
+		code: sectionCode
+	};
+	const messages = useLiveMessages();
+	const { ref: wrapperRef, css: dynamicCSS } = useDynamicTailwind(preview, dynamicTailwind && !forceFallback);
+	const renderProvider = (component) => {
+		return provider ? provider(component) : component;
+	};
+	if (forceFallback) return /* @__PURE__ */ jsx(SectionFallback, {
+		args: {
+			section,
+			reason: "forced"
+		},
+		builtin: /* @__PURE__ */ jsx(Error$1, {
+			message: messages.errors.sectionNotRendered,
+			title: messages.errors.sectionUnavailable
+		})
+	});
+	if (module?.error) return /* @__PURE__ */ jsx(SectionFallback, {
+		args: {
+			section,
+			reason: "compile",
+			message: module.error
+		},
+		builtin: /* @__PURE__ */ jsx(Error$1, {
+			message: module.error,
+			title: messages.errors.compile
+		})
+	});
+	const Component = module?.exports?.default;
+	if (!Component) return null;
+	return /* @__PURE__ */ jsx(Frame, {
+		...frame,
+		autoHeight: true,
+		children: (container) => /* @__PURE__ */ jsx("div", {
+			ref: wrapperRef,
+			className: "w-full overflow-x-hidden",
+			"data-editor-mode": true,
+			children: /* @__PURE__ */ jsx(ErrorBoundary, {
+				resetKeys: [preview],
+				fallback: (message, reset) => /* @__PURE__ */ jsx(SectionFallback, {
+					args: {
+						section,
+						reason: "runtime",
+						message
+					},
+					builtin: /* @__PURE__ */ jsx(Error$1, {
+						message,
+						onReset: reset,
+						title: messages.errors.rendering
+					})
+				}),
+				children: renderProvider(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Component, {
+					headers,
+					container
+				}), dynamicTailwind && dynamicCSS && /* @__PURE__ */ jsx("style", { children: dynamicCSS })] }))
+			})
+		})
+	});
+};
+const sameValue = (a, b) => {
+	if (Object.is(a, b)) return true;
+	if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((item, i) => Object.is(item, b[i]));
+	if (a && b && typeof a === "object" && typeof b === "object" && Object.getPrototypeOf(a) === Object.prototype && Object.getPrototypeOf(b) === Object.prototype) {
+		const aKeys = Object.keys(a);
+		return aKeys.length === Object.keys(b).length && aKeys.every((key) => Object.is(a[key], b[key]));
+	}
+	return false;
+};
+const sameFrame = (a, b) => {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	return [.../* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)])].every((key) => sameValue(a[key], b[key]));
+};
+const arePropsEqual = (prev, next) => {
+	return [.../* @__PURE__ */ new Set([...Object.keys(prev), ...Object.keys(next)])].every((key) => key === "frame" ? sameFrame(prev.frame, next.frame) : Object.is(prev[key], next[key]));
+};
+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",
+	ArrowDown: "next",
+	Home: "first",
+	End: "last"
+};
+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
+	});
+	const messages = useLiveMessages();
+	const style = {
+		transform: CSS$1.Transform.toString(transform),
+		transition,
+		opacity: isDragging ? .5 : 1,
+		cursor: inspecting ? "crosshair" : "grab"
+	};
+	const isPaletteSectionOver = isOver && !!paletteSectionOf(active?.data);
+	const onKeyDown = (e) => {
+		listeners?.onKeyDown?.(e);
+		if (e.target !== e.currentTarget || active || e.defaultPrevented) return;
+		if (e.key === "Enter") {
+			e.preventDefault();
+			onClick?.();
+			return;
+		}
+		const to = NAVIGATION_KEYS[e.key];
+		if (to && handlers) {
+			e.preventDefault();
+			handlers.onNavigate(id, to);
+			return;
+		}
+		if ((e.key === "Delete" || e.key === "Backspace") && handlers) {
+			e.preventDefault();
+			handlers.onDeleteKey(id);
+		}
+	};
+	const setRefs = (node) => {
+		setNodeRef(node);
+		setActivatorNodeRef(node);
+		handlers?.nodeRef(id)(node);
+	};
+	const press = (action) => (e) => {
+		e.stopPropagation();
+		action?.();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setRefs,
+		style,
+		...attributes,
+		...listeners,
+		onKeyDown,
+		onClick,
+		className: cn("relative", selected && "z-10 outline-2 outline-offset-2 outline-blue-500", isPaletteSectionOver && "border-t-4 border-t-green-500"),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: cn("absolute inset-0 z-50"),
+				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();
+					handlers?.onInspectPick(id, e.currentTarget.parentElement, e.currentTarget, e.clientX, e.clientY);
+				} : void 0
+			}),
+			children,
+			selected && /* @__PURE__ */ jsxs(Space, {
+				className: cn("absolute top-1 right-1 z-60"),
+				children: [
+					onMoveUp && /* @__PURE__ */ jsx(Button, {
+						icon: /* @__PURE__ */ jsx(ChevronUp, {}),
+						disabled: !canMoveUp,
+						onClick: press(onMoveUp),
+						"aria-label": messages.section.moveUp
+					}),
+					onMoveDown && /* @__PURE__ */ jsx(Button, {
+						icon: /* @__PURE__ */ jsx(ChevronDown, {}),
+						disabled: !canMoveDown,
+						onClick: press(onMoveDown),
+						"aria-label": messages.section.moveDown
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						icon: /* @__PURE__ */ jsx(Copy, {}),
+						onClick: press(() => onCopy?.(id)),
+						"aria-label": messages.section.duplicate
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						danger: true,
+						icon: /* @__PURE__ */ jsx(Trash, {}),
+						onClick: press(() => onDelete?.(id)),
+						"aria-label": messages.section.delete
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/dnd/canvas/overlay.tsx
+const Overlay = ({ sections, isForced, renderProps }) => {
+	const { active } = useDndContext();
+	if (!active) return null;
+	const paletteSection = paletteSectionOf(active.data);
+	if (paletteSection) return /* @__PURE__ */ jsx(DefaultDraggableItem, { item: paletteSection });
+	const section = sections.find((s) => s.id === active.id);
+	if (section) {
+		const preview = generateSection(section.code, renderProps.fullCode, { containerId: renderProps.containerId });
+		return /* @__PURE__ */ jsx(Sortable, {
+			id: section.id,
+			name: section.name,
+			children: /* @__PURE__ */ jsx(renderer_default, {
+				preview,
+				sectionId: section.id,
+				sectionName: section.name,
+				sectionCode: section.code,
+				forceFallback: isForced?.(section) ?? false,
+				modules: renderProps.modules,
+				frame: renderProps.frame,
+				dynamicTailwind: renderProps.dynamicTailwind
+			})
+		});
+	}
+	return null;
+};
+//#endregion
+//#region src/components/dnd/edit-options.ts
+const toastEditError = (error) => {
+	Toast.error(error.title, error.description ? { description: error.description } : void 0);
+};
+const DndEditOptionsContext = createContext({ reportError: toastEditError });
+const useDndEditOptions = () => useContext(DndEditOptionsContext);
+//#endregion
+//#region src/components/dnd/inspector.ts
+const DndInspectorContext = createContext(null);
+const useDndInspector = () => {
+	const inspector = useContext(DndInspectorContext);
+	if (!inspector) throw new Error("useDndInspector() must be used inside <Live.Dnd>.");
+	return inspector;
+};
+const outside = (root) => (element) => element.getRootNode() !== root;
+const deepestAt = (root, x, y, skip) => {
+	const element = root.elementsFromPoint(x, y).find((candidate) => !skip(candidate));
+	if (!element) return null;
+	if (element instanceof HTMLIFrameElement) {
+		const document = element.contentDocument;
+		if (!document) return element;
+		const rect = element.getBoundingClientRect();
+		return deepestAt(document, x - rect.left, y - rect.top, outside(document)) ?? element;
+	}
+	if (element.shadowRoot && element.shadowRoot !== root) return deepestAt(element.shadowRoot, x, y, outside(element.shadowRoot)) ?? element;
+	return element;
+};
+const hasId = (element) => Boolean(element.getAttribute(DATA_ATTR.ID));
+const pickElement = (section, overlay, x, y) => {
+	let element = deepestAt(section.ownerDocument, x, y, (candidate) => candidate === overlay || candidate === section || !section.contains(candidate));
+	while (element && element !== section && !hasId(element)) element = element.parentElement ?? element.parentNode?.host ?? null;
+	return element === section ? null : element;
+};
+const findElementById = (section, id) => {
+	const selector = `[${DATA_ATTR.ID}="${CSS.escape(id)}"]`;
+	const roots = [section];
+	for (const root of roots) {
+		const found = root.querySelector(selector);
+		if (found) return found;
+		root.querySelectorAll("iframe").forEach((frame) => {
+			if (frame.contentDocument) roots.push(frame.contentDocument);
+		});
+		root.querySelectorAll("*").forEach((element) => {
+			if (element.shadowRoot) roots.push(element.shadowRoot);
+		});
+	}
+	return null;
+};
+const viewportRect = (element) => {
+	const rect = element.getBoundingClientRect();
+	let x = rect.left;
+	let y = rect.top;
+	let frame = element.ownerDocument.defaultView?.frameElement ?? null;
+	while (frame) {
+		const frameRect = frame.getBoundingClientRect();
+		x += frameRect.left;
+		y += frameRect.top;
+		frame = frame.ownerDocument.defaultView?.frameElement ?? null;
+	}
+	return new DOMRect(x, y, rect.width, rect.height);
+};
+//#endregion
+//#region src/components/dnd/layout-context.ts
+const DndRegionContext = createContext(null);
+const useDndRegions = (subject) => {
+	const regions = useContext(DndRegionContext);
+	if (!regions) throw new Error(`${subject} must be used inside <Live.Dnd>.`);
+	return regions;
+};
+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) => {
+	if (RESERVED_BINDING_PROPERTIES.includes(binding.property)) return false;
+	if (binding.property === "children" || binding.property === "innerText" || binding.property === "innerHTML" || binding.property === "items" || binding.property === "data" || binding.type === "array" || binding.type === "jsx" || binding.type === "richtext") return true;
+	const attribute = node.attributes.find((candidate) => candidate.name === binding.property);
+	if (!attribute) return true;
+	return attribute.isStringLiteral === true || canLosslesslyEvaluateSource(attribute?.value ?? "");
+};
+const toBindingFields = (binding) => ({
+	label: binding.label,
+	property: binding.property,
+	type: binding.type,
+	widget: binding.widget,
+	options: binding.options,
+	render: binding.render,
+	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) => {
+	const entry = render?.[key];
+	if (entry && "type" in entry) {
+		const leaf = entry;
+		return {
+			...leaf,
+			label: leaf.label ?? key,
+			property: leaf.property ?? key
+		};
+	}
+	return {
+		label: key,
+		property: key,
+		render: entry
+	};
+};
+const CONTENT_PROPERTIES = /* @__PURE__ */ new Set([
+	"innerText",
+	"innerHTML",
+	"children"
+]);
+const isAttributeAbsent = (node, binding) => !CONTENT_PROPERTIES.has(binding.property) && !node.attributes.some((candidate) => candidate.name === binding.property);
+const toPanelBindingData = (node, id, binding) => ({
+	...toBindingFields(binding),
+	id,
+	value: getStructuredValue(node, binding.property, binding.type),
+	rawValue: getCurrentValue(node, binding.property),
+	...!canEditBindingValue(node, binding) && { canEditValue: false },
+	...isAttributeAbsent(node, binding) && { present: false },
+	element: {
+		tagName: node.tagName || "element",
+		text: node.textContent.replace(/\s+/g, " ").trim()
+	}
+});
+const resolvePanelBindings = (node) => {
+	const id = readAttribute(node, "data-id");
+	if (!id) return null;
+	const parsed = readNodeBindings(node);
+	if (!parsed.length) return null;
+	return {
+		id,
+		tagName: node.tagName || "element",
+		bindings: parsed.map((binding) => toPanelBindingData(node, id, binding))
+	};
+};
+const withPanelCommit = (bindings, commit) => bindings.map((binding) => ({
+	...binding,
+	onChange: (value) => commit?.({
+		id: binding.id,
+		label: binding.label,
+		property: binding.property,
+		value
+	})
+}));
+//#endregion
+//#region src/components/dnd/panel/row-controls.tsx
+const RowControls = ({ index, count, labels, disabled = false, deleteDisabled = false, onMove, onDelete }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex space-x-1",
+	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", {
+		className: "flex items-center justify-between rounded border\n        border-blue-200 bg-blue-50 p-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-xs font-medium text-blue-700",
+			children: messages.selection.count(count)
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center space-x-1",
+			children: [
+				/* @__PURE__ */ jsx(Button, {
+					size: "small",
+					icon: /* @__PURE__ */ jsx(Copy, {}),
+					title: messages.selection.duplicate,
+					disabled: disabled || duplicateDisabled,
+					onClick: onDuplicate
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "small",
+					icon: /* @__PURE__ */ jsx(ArrowUp, {}),
+					title: messages.selection.moveUp,
+					disabled,
+					onClick: onMoveUp
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "small",
+					icon: /* @__PURE__ */ jsx(ArrowDown, {}),
+					title: messages.selection.moveDown,
+					disabled,
+					onClick: onMoveDown
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					danger: true,
+					size: "small",
+					icon: /* @__PURE__ */ jsx(X, {}),
+					title: messages.selection.delete,
+					disabled: disabled || deleteDisabled,
+					onClick: onDelete
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "small",
+					onClick: onClear,
+					children: messages.selection.clear
+				})
+			]
+		})]
+	});
+};
+//#endregion
+//#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/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":
+		case "duplicate": return new Set(selected);
+		case "move-selected": return moveSelectedIndices(Array.from({ length: count }, (_, index) => index), new Set(command.indices), command.direction).indices;
+		default: return /* @__PURE__ */ new Set();
+	}
+};
+const useStructuralSelection = (count, revision) => {
+	const selection = useMultiSelect(count);
+	const [seen, setSeen] = useState(revision);
+	const [pending, setPending] = useState(null);
+	if (revision !== seen) {
+		setSeen(revision);
+		setPending(null);
+		if (pending?.matches(revision) && pending.selection.size > 0) selection.replace(pending.selection);
+		else selection.clear();
+	}
+	const record = (next, matches, { now = false } = {}) => {
+		setPending({
+			matches,
+			selection: next
+		});
+		if (!now) return;
+		if (next.size > 0) selection.replace(next);
+		else selection.clear();
+	};
+	return {
+		selection,
+		record
+	};
+};
+//#endregion
+//#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);
+		return (revision) => revision === moved;
+	}
+	const added = action.type === "append" ? 1 : action.type === "duplicate" ? action.indices.length : 0;
+	return (revision) => {
+		const next = JSON.parse(revision);
+		return next.length === expected.length + added && expected.every((signature, index) => next[index] === signature);
+	};
+};
+const useDndChildren = (items, { onChange } = {}) => {
+	const expected = useMemo(() => getChildrenSignatures(items), [items]);
+	const revision = JSON.stringify(expected);
+	const { selection, record } = useStructuralSelection(items.length, revision);
+	const commit = (action) => {
+		const edit = {
+			kind: "children-edit",
+			expected,
+			action
+		};
+		const next = selectionAfter(action, selection.selected, items.length);
+		if (next.size > 0) record(next, producedBy(expected, action));
+		onChange?.(JSON.stringify(edit));
+	};
+	return {
+		items,
+		selection,
+		actions: {
+			move: (from, to) => commit({
+				type: "move",
+				from,
+				to
+			}),
+			remove: (index) => commit({
+				type: "remove",
+				indices: [index]
+			}),
+			add: () => commit({ type: "append" }),
+			duplicateSelected: () => commit({
+				type: "duplicate",
+				indices: [...selection.selected]
+			}),
+			moveSelected: (direction) => commit({
+				type: "move-selected",
+				indices: [...selection.selected],
+				direction
+			}),
+			removeSelected: () => commit({
+				type: "remove",
+				indices: [...selection.selected]
+			})
+		}
+	};
+};
+//#endregion
+//#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 });
+	const messages = useLiveMessages();
+	const editableChildrenMap = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		items.forEach((item, index) => {
+			const editableNodes = findEditableChildren(item);
+			if (editableNodes.length > 0) map.set(index, editableNodes);
+		});
+		return map;
+	}, [items]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "text-sm font-semibold text-green-700",
+					children: messages.children.heading(items.length)
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "small",
+					color: "green",
+					icon: /* @__PURE__ */ jsx(Plus, {}),
+					onClick: actions.add,
+					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,
+				onMoveUp: () => actions.moveSelected("up"),
+				onMoveDown: () => actions.moveSelected("down"),
+				onDelete: actions.removeSelected,
+				onClear: selection.clear
+			}),
+			items.map((item, itemIndex) => /* @__PURE__ */ jsxs("div", {
+				className: "space-y-2 rounded border border-green-200 bg-green-50 p-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center space-x-2",
+							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__ */ 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", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "text-xs font-medium text-green-700",
+							children: messages.children.editableBindings
+						}), editableChildrenMap.get(itemIndex).map((editableNode, idx) => {
+							const nodeId = editableNode.dataAttributes.find((a) => a.name === "data-id")?.value;
+							return /* @__PURE__ */ jsx(ElementFields, {
+								id: nodeId ?? void 0,
+								className: "rounded border border-green-100 bg-white p-2\n                      data-[picked]:ring-2 data-[picked]:ring-blue-400",
+								header: /* @__PURE__ */ jsx("div", {
+									className: "mb-1 text-xs text-green-600",
+									children: editableNode.tagName
+								}),
+								bindings: bindingsOf(editableNode, onNodeChange),
+								onNodeChange
+							}, `editable-${nodeId || idx}`);
+						})]
+					}),
+					!!item.children && !editableChildrenMap.has(itemIndex) && /* @__PURE__ */ jsxs("div", {
+						className: "space-y-1",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "text-xs font-medium text-green-700",
+							children: messages.children.childNodes
+						}), item.children.map((node, nodeIndex) => /* @__PURE__ */ jsx(ElementFields, {
+							className: "ml-2 rounded border border-green-100 bg-white p-2",
+							bindings: bindingsOf(node, onNodeChange),
+							onNodeChange
+						}, `node-${itemIndex}-${nodeIndex}`))]
+					})
+				]
+			}, item.id || itemIndex))
+		]
+	});
+};
+//#endregion
+//#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;
+	if (binding.canEditValue === false) return "readonly";
+	if (property === "items" || property === "data" || type === "array") return "items";
+	if (type === "richtext") return "richtext";
+	if (property === BINDING_PROP.INNER_HTML) return "html";
+	if (type === "jsx") return "jsx";
+	if (property === "children" && Array.isArray(value)) return "children";
+	if (typeof value === "object" && value !== null && !Array.isArray(value)) return "object";
+	if (type === "boolean" || typeof value === "boolean") return "boolean";
+	if (binding.options && Array.isArray(binding.options)) return "select";
+	if (type === "color" || isColorProperty(property)) return "color";
+	if (type === "date") return "date";
+	if (type === "time") return "time";
+	if (type === "datetime") return "datetime";
+	if (type === "url") return "url";
+	if (type === "email") return "email";
+	if (type === "tel") return "tel";
+	if (type === "number" || typeof value === "number") return "number";
+	return "text";
+};
+const isStructuralFieldKind = (kind) => kind === "items" || kind === "children";
+//#endregion
+//#region src/components/dnd/panel/fields/jsx-editor-field.tsx
+const JSXEditorField = ({ value, isHTML, onSave }) => {
+	const selectionRef = useRef(null);
+	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);
+};
+const SortableItems = ({ items, disabled, onMove, children }) => {
+	const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 4 } }), useSensor(TouchSensor, { activationConstraint: {
+		delay: 250,
+		tolerance: 5
+	} }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const onDragEnd = ({ active, over }) => {
+		const from = items.find((item) => item.id === active.id);
+		const to = items.find((item) => item.id === over?.id);
+		if (from && to && from !== to) onMove(from, to.index);
+	};
+	const messages = useLiveMessages();
+	const { announcements: say } = messages;
+	const name = (id) => label(messages, items, id);
+	return /* @__PURE__ */ jsx(DndContext, {
+		sensors,
+		collisionDetection: closestCenter,
+		modifiers: [restrictToVerticalAxis, restrictToParentElement],
+		accessibility: { announcements: {
+			onDragStart: ({ active }) => say.pickedUp(name(active.id)),
+			onDragOver: ({ active, over }) => over ? say.itemOver(name(active.id), name(over.id)) : void 0,
+			onDragEnd: ({ active, over }) => over ? say.itemMoved(name(active.id), name(over.id)) : say.dropped(name(active.id)),
+			onDragCancel: ({ active }) => say.cancelled(name(active.id))
+		} },
+		onDragEnd,
+		children: /* @__PURE__ */ jsx(SortableContext, {
+			items: items.map((item) => item.id),
+			strategy: verticalListSortingStrategy,
+			disabled,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "space-y-4",
+				children: items.map(children)
+			})
+		})
+	});
+};
+const ItemCard = ({ id, title, disabled, expanded, onToggle, checkbox, controls, className, children }) => {
+	const messages = useLiveMessages();
+	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
+		id,
+		disabled
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setNodeRef,
+		style: {
+			transform: CSS$1.Translate.toString(transform),
+			transition
+		},
+		className: cn(className, isDragging && "relative z-10 shadow-md"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center space-x-1",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						ref: setActivatorNodeRef,
+						...attributes,
+						...listeners,
+						"aria-label": messages.items.reorder(title),
+						disabled,
+						className: "cursor-grab rounded p-0.5 text-gray-400\n              hover:text-gray-700 disabled:cursor-not-allowed\n              disabled:opacity-40",
+						children: /* @__PURE__ */ jsx(GripVertical, { size: 14 })
+					}),
+					checkbox,
+					/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"aria-expanded": expanded,
+						onClick: onToggle,
+						className: "inline-flex items-center space-x-1 rounded px-1 text-xs\n              font-medium",
+						children: [expanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14 }), /* @__PURE__ */ jsx("span", { children: title })]
+					})
+				]
+			}), controls]
+		}), expanded && children]
+	});
+};
+//#endregion
+//#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 {
+		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"));
+	if (container) return [container];
+	const bindings = [];
+	nodes.forEach((n) => {
+		if (n.bindings && n.bindings.length > 0 && n.dataAttributes.some((a) => a.name === "data-id")) bindings.push(n);
+		bindings.push(...findEditableChildren(n));
+	});
+	return bindings;
+};
+const parseSource = (value, bindingOptions) => {
+	const ast = parseArrayExpression(value);
+	if (!ast) return {
+		objectItems: [],
+		primitiveItems: [],
+		parseError: true
+	};
+	const objectItems = [];
+	const primitiveItems = [];
+	ast.elements.forEach((element, elementIndex) => {
+		if (!isExpression(element)) return;
+		if (!isObjectExpression(element)) {
+			const extracted = extractNodeValue(element);
+			primitiveItems.push({
+				id: nanoid(6),
+				index: primitiveItems.length,
+				elementIndex,
+				source: value.slice(element.start, element.end),
+				value: extracted.value,
+				type: extracted.type
+			});
+			return;
+		}
+		const jsxBindings = {};
+		const jsxFallbacks = {};
+		element.properties.forEach((prop) => {
+			if (!isObjectProperty(prop) || !isIdentifier(prop.key) || !(isJSXElement(prop.value) || isJSXFragment(prop.value))) return;
+			const propertyName = prop.key.name;
+			try {
+				const found = bindingsInJSX(value.slice(prop.value.start, prop.value.end), bindingOptions);
+				if (found.length > 0) jsxBindings[propertyName] = found;
+				else jsxFallbacks[propertyName] = value.slice(prop.value.start, prop.value.end);
+			} catch (error) {
+				console.error(`Failed to parse JSX in property '${propertyName}':`, error);
+			}
+		});
+		const editableProperties = extractObjectProperties(element);
+		for (const property of Object.values(editableProperties)) if (property.type === "array" || property.type === "object") property.value = value.slice(property.astNode.start, property.astNode.end);
+		objectItems.push({
+			id: nanoid(6),
+			index: objectItems.length,
+			elementIndex,
+			source: value.slice(element.start, element.end),
+			editableProperties,
+			jsxBindings,
+			jsxFallbacks
+		});
+	});
+	return {
+		objectItems,
+		primitiveItems,
+		parseError: false
+	};
+};
+//#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)));
+		}
+	};
+};
+//#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 = useLatest(reportError);
+	const messagesRef = useLatest(messages);
+	useEffect(() => {
+		if (parseError) reportErrorRef.current({
+			type: "parse",
+			target: "items",
+			title: messagesRef.current.editErrors.itemsParseFailed,
+			description: messagesRef.current.editErrors.checkConsole
+		});
+	}, [
+		parseError,
+		reportErrorRef,
+		messagesRef
+	]);
+	const kind = primitiveItems.length > 0 && objectItems.length === 0 ? "primitive" : "object";
+	const isPrimitive = kind === "primitive";
+	const rawItems = isPrimitive ? primitiveItems : objectItems;
+	const [identityState, setIdentityState] = useState(() => createIdentityState(value, kind, rawItems));
+	const identity = useMemo(() => reconcileIdentityState(identityState, value, kind, rawItems), [
+		identityState,
+		kind,
+		rawItems,
+		value
+	]);
+	const { selection, record } = useStructuralSelection(isPrimitive ? primitiveItems.length : objectItems.length, value);
+	const pending = usePendingCommit(value);
+	const latest = () => {
+		const last = pending.read();
+		if (!last) return {
+			value,
+			items: rawItems,
+			ids: identity.ids,
+			selected: selection.selected
+		};
+		const parsed = parseSource(last.value);
+		return {
+			value: last.value,
+			items: isPrimitive ? parsed.primitiveItems : parsed.objectItems,
+			ids: last.ids,
+			selected: last.selected
+		};
+	};
+	const locate = (snapshot, elementIndex) => {
+		const shown = rawItems.find((item) => item.elementIndex === elementIndex);
+		if (!shown) return;
+		const index = snapshot.ids.indexOf(identity.ids[shown.index]);
+		return index >= 0 ? snapshot.items[index] : null;
+	};
+	const commit = (snapshot, next, nextIds, nextSelection) => {
+		if (next === null) {
+			reportError({
+				type: "items",
+				title: messages.editErrors.itemUpdateFailed,
+				description: messages.editErrors.itemUpdateFailedDetail
+			});
+			return false;
+		}
+		const parsed = parseSource(next);
+		const nextItems = kind === "primitive" ? parsed.primitiveItems : parsed.objectItems;
+		const ids = nextIds ?? snapshot.ids;
+		pending.write({
+			value: next,
+			ids,
+			selected: nextSelection
+		});
+		setIdentityState(createIdentityState(next, kind, nextItems, ids));
+		record(nextSelection, (revision) => revision === next, { now: true });
+		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();
+		const item = locate(snapshot, elementIndex);
+		if (item === null) return;
+		commit(snapshot, updateArrayItemProperty(snapshot.value, item?.elementIndex ?? elementIndex, propertyKey, next, render), void 0, new Set(snapshot.selected));
+	};
+	const updateValue = (elementIndex, next) => {
+		const snapshot = latest();
+		const item = locate(snapshot, elementIndex);
+		if (item === null) return;
+		commit(snapshot, updateArrayItemValue(snapshot.value, item?.elementIndex ?? elementIndex, next), void 0, new Set(snapshot.selected));
+	};
+	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));
+		},
+		move: (elementIndex, toIndex) => {
+			const snapshot = latest();
+			const from = locate(snapshot, elementIndex);
+			const target = snapshot.items.find((item) => item.index === toIndex);
+			if (!from || !target) return;
+			commit(snapshot, moveArrayItem(snapshot.value, from.elementIndex, target.elementIndex), moveId(snapshot.ids, from.index, target.index), /* @__PURE__ */ new Set());
+		},
+		remove: (elementIndex) => {
+			const snapshot = latest();
+			const removed = locate(snapshot, elementIndex);
+			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({
+				type: "duplicate",
+				indices: [...snapshot.selected]
+			}, snapshot.selected, snapshot.items.length));
+		},
+		moveSelected: (direction) => {
+			const snapshot = latest();
+			const nextIdentity = moveSelectedIndices(snapshot.ids, snapshot.selected, direction);
+			const result = moveArrayItems(snapshot.value, elementIndicesOf(snapshot, snapshot.selected), direction);
+			if (!result) {
+				commit(snapshot, null, void 0, snapshot.selected);
+				return;
+			}
+			const visible = parseArrayExpression(result.code)?.elements.flatMap((node, index) => isExpression(node) && isObjectExpression(node) === !isPrimitive ? [index] : []) ?? [];
+			commit(snapshot, result.code, nextIdentity.items, new Set(visible.flatMap((position, index) => result.indices.has(position) ? [index] : [])));
+		},
+		removeSelected: () => {
+			const snapshot = latest();
+			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 = rawItems.map((item) => toItemBindings(item, {
+		id: identity.ids[item.index] ?? item.id,
+		value,
+		render,
+		onNodeChange,
+		onValueChange: (next) => updateValue(item.elementIndex, next),
+		onPropertyChange: (key, next) => updateProperty(item.elementIndex, key, next)
+	}));
+	return {
+		kind,
+		items,
+		selection,
+		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/items.tsx
+const NestedGroup = ({ group, onNodeChange }) => {
+	if (group.fallback) return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-xs font-medium text-blue-700",
+			children: group.property
+		}), /* @__PURE__ */ jsx(Field, {
+			binding: group.fallback,
+			onNodeChange
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "text-xs font-medium text-blue-700",
+			children: [
+				group.property,
+				" Bindings (",
+				group.elements.length,
+				"):"
+			]
+		}), 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",
+			header: /* @__PURE__ */ jsxs("div", {
+				className: "mb-1 text-xs text-blue-600",
+				children: [
+					"<",
+					element.tagName,
+					">"
+				]
+			}),
+			bindings: element.bindings,
+			onNodeChange
+		}, `${group.property}-${element.id}`))]
+	});
+};
+const Items = ({ value, render, minItems, maxItems, onChange, onChildChange }) => {
+	const messages = useLiveMessages();
+	const { kind, items, selection, expansion, actions, canEditStructure, canAddItems, canRemoveItems, parseError } = useDndItems(value, {
+		render,
+		onChange,
+		onNodeChange: onChildChange,
+		minItems,
+		maxItems
+	});
+	const header = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-sm font-semibold",
+			children: messages.items.heading(items.length)
+		}), items.length > 0 && canEditStructure && /* @__PURE__ */ jsx(Button, {
+			size: "small",
+			icon: /* @__PURE__ */ jsx(Plus, {}),
+			variant: "solid",
+			color: "green",
+			disabled: !canAddItems(),
+			onClick: actions.add,
+			children: messages.items.add
+		})]
+	});
+	if (parseError) return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [header, /* @__PURE__ */ jsx("div", {
+			className: "rounded border border-dashed border-red-200 p-3 text-xs\n            text-red-600",
+			children: messages.items.unreadable
+		})]
+	});
+	if (items.length === 0) return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [header, /* @__PURE__ */ jsx("div", {
+			className: "rounded border border-dashed border-gray-200 p-3 text-xs\n            text-gray-500",
+			children: messages.items.empty
+		})]
+	});
+	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 objectBody = (item) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "space-y-2",
+		children: item.properties.map((binding) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+			className: "flex flex-col space-y-2",
+			children: /* @__PURE__ */ jsx(LabeledField, {
+				binding,
+				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: [
+				"(",
+				String(binding.meta?.valueType),
+				")"
+			]
+		})] }, `${item.id}-${binding.property}-${binding.label}`))
+	}), /* @__PURE__ */ jsx("div", {
+		className: "space-y-3 border-t pt-2",
+		children: item.nested.length ? item.nested.map((group) => /* @__PURE__ */ jsx(NestedGroup, {
+			group,
+			onNodeChange: onChildChange
+		}, group.property)) : /* @__PURE__ */ jsxs("div", {
+			className: "text-xs text-gray-500",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: "✓"
+				}),
+				" ",
+				messages.items.noNestedBindings
+			]
+		})
+	})] });
+	const allExpanded = expansion.expandedIds.length === items.length;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [
+			header,
+			/* @__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", {
+				className: "rounded border border-dashed border-amber-200 p-3 text-xs\n            text-amber-700",
+				children: messages.items.structureLocked
+			}),
+			/* @__PURE__ */ jsx(SortableItems, {
+				items,
+				disabled: !canEditStructure,
+				onMove: (item, toIndex) => actions.move(item.elementIndex, toIndex),
+				children: (item) => /* @__PURE__ */ jsx(ItemCard, {
+					id: item.id,
+					title: messages.items.item(item.index + 1),
+					disabled: !canEditStructure,
+					expanded: expansion.isExpanded(item.id),
+					onToggle: () => expansion.toggle(item.id),
+					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,
+						onNodeChange: onChildChange
+					}) : objectBody(item)
+				}, item.id)
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/dnd/panel/field.tsx
+const parseDateValue = (value) => {
+	const match = /^(\d{4})-(\d{2})-(\d{2})(?:T(\d{2}):(\d{2}))?$/.exec(value.trim());
+	if (!match) return;
+	const [, year, month, day, hours = "0", minutes = "0"] = match;
+	const date = new Date(Number(year), Number(month) - 1, Number(day), Number(hours), Number(minutes));
+	return Number.isNaN(date.getTime()) ? void 0 : date;
+};
+const pad = (value) => String(value).padStart(2, "0");
+const formatDateValue = (date, withTime = false) => {
+	const day = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+	return withTime ? `${day}T${pad(date.getHours())}:${pad(date.getMinutes())}` : day;
+};
+const RICHTEXT_TOOLBAR = [
+	"bold",
+	"italic",
+	"underline",
+	"bulletList",
+	"orderedList",
+	"link"
+];
+const FieldError = ({ id, message }) => message ? /* @__PURE__ */ jsx("p", {
+	id,
+	role: "alert",
+	className: "mt-1 mb-0 text-xs text-red-500",
+	children: message
+}) : null;
+const BuiltinField = ({ binding, onNodeChange }) => {
+	const messages = useLiveMessages();
+	const validationOptions = { messages: messages.validation };
+	const { id, value, rawValue, onChange } = binding;
+	const [validationError, setValidationError] = useState(null);
+	const { controlId, errorId, isLabelled } = useFieldIds();
+	const controlProps = {
+		id: controlId,
+		"aria-label": isLabelled ? void 0 : binding.label,
+		"aria-invalid": validationError ? true : void 0,
+		"aria-describedby": validationError ? errorId : void 0
+	};
+	const [text, setText] = useState(rawValue);
+	const [prevRawValue, setPrevRawValue] = useState(rawValue);
+	if (rawValue !== prevRawValue) {
+		setPrevRawValue(rawValue);
+		setText(rawValue);
+	}
+	const kind = getFieldKind(binding);
+	if (kind === "readonly") return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-1 rounded border border-dashed border-amber-200 p-3\n          text-xs text-amber-700",
+		children: [
+			/* @__PURE__ */ jsx("div", { children: messages.panel.expressionPreserved }),
+			/* @__PURE__ */ jsx("code", {
+				className: "block overflow-x-auto text-amber-800",
+				children: rawValue
+			}),
+			/* @__PURE__ */ jsx("div", { children: messages.panel.useCodeEditor })
+		]
+	});
+	const commitIfChanged = (next) => {
+		if (next !== (typeof next === "string" ? rawValue : value)) onChange(next);
+	};
+	const validateAndCommit = (next) => {
+		const result = validateBindingValue(binding, next, validationOptions);
+		if (!result.valid) {
+			setValidationError(result.message ?? messages.panel.invalidValue);
+			return;
+		}
+		setValidationError(null);
+		commitIfChanged(next);
+	};
+	if (kind === "items") return /* @__PURE__ */ jsx(Items, {
+		value: rawValue,
+		render: binding.render,
+		minItems: binding.minItems,
+		maxItems: binding.maxItems,
+		onChange,
+		onChildChange: onNodeChange
+	});
+	if (kind === "richtext") return /* @__PURE__ */ jsx(RichTextEditor, {
+		value: rawValue,
+		toolbar: RICHTEXT_TOOLBAR,
+		onChange: commitIfChanged
+	});
+	if (kind === "html" || kind === "jsx") return /* @__PURE__ */ jsx(JSXEditorField, {
+		value: rawValue,
+		isHTML: kind === "html",
+		onSave: commitIfChanged
+	});
+	if (kind === "children") return /* @__PURE__ */ jsx(Children$1, {
+		value,
+		onChange,
+		onNodeChange
+	});
+	if (kind === "object") {
+		const objectValue = value;
+		return /* @__PURE__ */ jsx("div", {
+			className: "space-y-2 rounded border border-gray-200 bg-gray-50 p-2",
+			children: Object.entries(objectValue).map(([key, val]) => {
+				const nested = resolveRenderEntry(binding.render, key);
+				return /* @__PURE__ */ jsx("div", {
+					className: "space-y-1",
+					children: /* @__PURE__ */ jsx(LabeledField, {
+						binding: {
+							...nested,
+							value: val
+						},
+						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);
+			})
+		});
+	}
+	if (kind === "boolean") return /* @__PURE__ */ jsx(Checkbox, {
+		checked: value === true || value === "true",
+		onChange: (checked) => {
+			onChange(checked);
+		}
+	});
+	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: stringValue,
+		label: binding.label,
+		onChange: commitIfChanged
+	});
+	if (kind === "date" || kind === "datetime") {
+		const withTime = kind === "datetime";
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DatePicker, {
+			value: parseDateValue(stringValue),
+			showTime: withTime,
+			onChange: (date) => validateAndCommit(date ? formatDateValue(date, withTime) : "")
+		}), /* @__PURE__ */ jsx(FieldError, {
+			id: errorId,
+			message: validationError
+		})] });
+	}
+	if (kind === "time") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(TimePicker, {
+		...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: 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;
+			validateAndCommit(next);
+		}
+	}), /* @__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);
+			validateAndCommit(next);
+		}
+	}), /* @__PURE__ */ jsx(FieldError, {
+		id: errorId,
+		message: validationError
+	})] });
+};
+const Field = (props) => {
+	const { renderField } = useDndEditOptions();
+	const builtin = /* @__PURE__ */ jsx(BuiltinField, { ...props });
+	if (!renderField) return builtin;
+	const custom = renderField(props, builtin);
+	return custom === void 0 ? builtin : /* @__PURE__ */ jsx(Fragment, { children: custom });
+};
+//#endregion
+//#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) => {
+	const groups = /* @__PURE__ */ new Map();
+	for (const binding of bindings) {
+		const group = groups.get(binding.id);
+		if (group) group.push(binding);
+		else groups.set(binding.id, [binding]);
+	}
+	return [...groups.values()];
+};
+const describeElement = (binding) => {
+	const { tagName = "element", text = "" } = binding.element ?? {};
+	return {
+		tagName,
+		text,
+		label: text ? `${tagName} "${text}"` : tagName
+	};
+};
+const nodeIdOf = (target) => target instanceof Element && target.closest("[data-node-id]")?.getAttribute("data-node-id") || null;
+const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canMoveDown = false, bindings, onNodeChange, readOnly = false }) => {
+	const messages = useLiveMessages();
+	const groups = groupBindingsById(bindings);
+	const rootRef = useRef(null);
+	const inspector = useContext(DndInspectorContext);
+	const pickedId = (inspector?.picked ?? null)?.id;
+	const highlight = inspector?.highlight;
+	const [hoveredId, setHoveredId] = useState(null);
+	const [focusedId, setFocusedId] = useState(null);
+	const targetId = hoveredId ?? focusedId;
+	useEffect(() => {
+		if (!highlight) return;
+		highlight(targetId);
+		return () => highlight(null);
+	}, [highlight, targetId]);
+	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
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		onPointerOver: (e) => setHoveredId(nodeIdOf(e.target)),
+		onPointerLeave: () => setHoveredId(null),
+		onFocus: (e) => setFocusedId(nodeIdOf(e.target)),
+		onBlur: (e) => {
+			if (!e.currentTarget.contains(e.relatedTarget)) setFocusedId(null);
+		},
+		className: cn("h-full space-y-4 p-4", "overflow-x-hidden overflow-y-auto"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx(Typography.Title, {
+					className: "text-lg font-semibold",
+					children: item.name
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [
+						onMoveUp && /* @__PURE__ */ jsx(Button, {
+							icon: /* @__PURE__ */ jsx(ChevronUp, {}),
+							disabled: !canMoveUp,
+							onClick: onMoveUp,
+							"aria-label": messages.section.moveUp
+						}),
+						onMoveDown && /* @__PURE__ */ jsx(Button, {
+							icon: /* @__PURE__ */ jsx(ChevronDown, {}),
+							disabled: !canMoveDown,
+							onClick: onMoveDown,
+							"aria-label": messages.section.moveDown
+						}),
+						onDelete && /* @__PURE__ */ jsx(Button, {
+							danger: true,
+							icon: /* @__PURE__ */ jsx(Trash, {}),
+							onClick: () => onDelete(item.id),
+							"aria-label": messages.section.delete
+						})
+					]
+				})]
+			}),
+			readOnly && /* @__PURE__ */ jsx(Typography.Text, {
+				role: "status",
+				className: "block text-xs text-amber-700",
+				children: messages.panel.readOnly
+			}),
+			!groups.length && /* @__PURE__ */ jsx(Typography.Text, {
+				className: "text-xs text-gray-400",
+				children: messages.panel.noEditableElements
+			}),
+			/* @__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);
+				})
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/dnd/layout.tsx
+const PaletteItems = ({ subject }) => {
+	const { palette: { items, onAdd }, isMobile } = useDndRegions(subject);
+	return /* @__PURE__ */ jsx(Space, {
+		orientation: "vertical",
+		align: "start",
+		children: items.map((item) => /* @__PURE__ */ jsx(DefaultDraggableItem, {
+			item,
+			onAdd,
+			tapToAdd: isMobile
+		}, item.id))
+	});
+};
+const PanelFields = ({ subject }) => {
+	const { panel: { item, onDelete, onMoveUp, onMoveDown, canMoveUp, canMoveDown, bindings, onNodeChange, readOnly } } = useDndRegions(subject);
+	return /* @__PURE__ */ jsx(Panel$1, {
+		item,
+		onDelete,
+		onMoveUp,
+		onMoveDown,
+		canMoveUp,
+		canMoveDown,
+		bindings,
+		onNodeChange,
+		readOnly
+	});
+};
+const Palette = ({ className, ...restProps }) => /* @__PURE__ */ jsx("div", {
+	className: cn("h-full overflow-y-auto bg-gray-50 p-4", className),
+	...restProps,
+	children: /* @__PURE__ */ jsx(PaletteItems, { subject: "<Live.Dnd.Palette>" })
+});
+const Canvas = ({ className, style, ...restProps }) => {
+	const { canvas, documentError } = useDndRegions("<Live.Dnd.Canvas>");
+	const inspector = useDndInspector();
+	const messages = useLiveMessages();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative h-full w-full overflow-y-auto", className),
+		"data-frame-container": true,
+		style: {
+			isolation: "isolate",
+			contain: "layout style",
+			transform: "translateZ(0)",
+			...style
+		},
+		...restProps,
+		children: [canvas, !documentError && /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none sticky bottom-0 z-70 h-0",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "pointer-events-auto absolute bottom-3 left-3",
+				children: /* @__PURE__ */ jsx(Button, {
+					icon: /* @__PURE__ */ jsx(Crosshair, {}),
+					color: "primary",
+					variant: inspector.active ? "solid" : "outlined",
+					"aria-pressed": inspector.active,
+					"aria-label": messages.canvas.pickElement,
+					title: inspector.active ? messages.canvas.pickElementActive : messages.canvas.pickElement,
+					onClick: inspector.toggle
+				})
+			})
+		})]
+	});
+};
+const Panel = ({ className, ...restProps }) => /* @__PURE__ */ jsx("div", {
+	className: cn("h-full", className),
+	...restProps,
+	children: /* @__PURE__ */ jsx(PanelFields, { subject: "<Live.Dnd.Panel>" })
+});
+const Layout = ({ palette, panel }) => {
+	const { isMobile, selectedId, clearSelection, paletteOpen, setPaletteOpen } = useDndRegions("<Live.Dnd.Layout>");
+	const messages = useLiveMessages();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		isMobile ? /* @__PURE__ */ jsx(Canvas, {}) : /* @__PURE__ */ jsxs(Splitter, {
+			withHandle: true,
+			orientation: "horizontal",
+			children: [
+				/* @__PURE__ */ jsx(Splitter.Panel, {
+					defaultSize: "20%",
+					minSize: "15%",
+					maxSize: "35%",
+					collapsible: true,
+					children: palette ?? /* @__PURE__ */ jsx(Palette, {})
+				}),
+				/* @__PURE__ */ jsx(Splitter.Panel, {
+					defaultSize: "60%",
+					children: /* @__PURE__ */ jsx(Canvas, {})
+				}),
+				/* @__PURE__ */ jsx(Splitter.Panel, {
+					defaultSize: "20%",
+					minSize: "15%",
+					maxSize: "35%",
+					collapsible: true,
+					children: panel ?? /* @__PURE__ */ jsx(Panel, {})
+				})
+			]
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			type: "primary",
+			shape: "circle",
+			icon: /* @__PURE__ */ jsx(LayoutGrid, {}),
+			"aria-label": messages.canvas.palette,
+			className: "fixed right-4 bottom-4 z-20 md:hidden",
+			onClick: () => setPaletteOpen(true)
+		}),
+		/* @__PURE__ */ jsx(Drawer, {
+			open: isMobile && paletteOpen,
+			onClose: () => setPaletteOpen(false),
+			direction: "bottom",
+			size: "large",
+			title: messages.canvas.palette,
+			children: palette ?? /* @__PURE__ */ jsx(PaletteItems, { subject: "<Live.Dnd.Layout>" })
+		}),
+		/* @__PURE__ */ jsx(Drawer, {
+			open: isMobile && Boolean(selectedId),
+			onClose: clearSelection,
+			direction: "bottom",
+			size: "large",
+			title: messages.canvas.properties,
+			children: panel ?? /* @__PURE__ */ jsx(PanelFields, { subject: "<Live.Dnd.Layout>" })
+		})
+	] });
+};
+//#endregion
+//#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)
+		};
+		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
+const KEYBOARD_CODES = {
+	start: ["Space"],
+	cancel: ["Escape"],
+	end: ["Space", "Enter"]
+};
+const createNodeRegistry = () => {
+	const nodes = /* @__PURE__ */ new Map();
+	const callbacks = /* @__PURE__ */ new Map();
+	return {
+		get: (id) => nodes.get(id),
+		register: (id) => {
+			let callback = callbacks.get(id);
+			if (!callback) {
+				callback = (node) => {
+					if (node) nodes.set(id, node);
+					else {
+						nodes.delete(id);
+						callbacks.delete(id);
+					}
+				};
+				callbacks.set(id, callback);
+			}
+			return callback;
+		}
+	};
+};
+const useDndKeyboard = ({ sections, selectedId, selectedIndex, selectOnly, move, requestDelete }) => {
+	const { announcements: say } = useLiveMessages();
+	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }), useSensor(KeyboardSensor, {
+		coordinateGetter: sortableKeyboardCoordinates,
+		keyboardCodes: KEYBOARD_CODES
+	}));
+	const nameOf = (id, data) => {
+		return paletteSectionOf(data)?.name ?? sections.find((section) => section.id === id)?.name ?? say.section;
+	};
+	const positionOf = (id) => sections.findIndex((section) => section.id === id) + 1;
+	const announcements = {
+		onDragStart: ({ active }) => say.pickedUp(nameOf(active.id, active.data)),
+		onDragOver: ({ active, over }) => over && positionOf(over.id) > 0 ? say.movedTo(nameOf(active.id, active.data), positionOf(over.id), sections.length) : say.notOver(nameOf(active.id, active.data)),
+		onDragEnd: ({ active, over }) => over && positionOf(over.id) > 0 ? say.droppedAt(nameOf(active.id, active.data), positionOf(over.id), sections.length) : say.dropped(nameOf(active.id, active.data)),
+		onDragCancel: ({ active }) => say.cancelled(nameOf(active.id, active.data))
+	};
+	const screenReaderInstructions = { draggable: say.instructions };
+	const [sectionNodes] = useState(createNodeRegistry);
+	const focusSection = (id) => sectionNodes.get(id)?.focus();
+	const onNavigate = (fromId, to) => {
+		const from = sections.findIndex((section) => section.id === fromId);
+		const target = sections[to === "first" ? 0 : to === "last" ? sections.length - 1 : from + (to === "next" ? 1 : -1)];
+		if (from < 0 || !target || target.id === fromId) return;
+		selectOnly(target.id);
+		focusSection(target.id);
+	};
+	const onDeleteKey = (id) => {
+		const index = sections.findIndex((section) => section.id === id);
+		const neighbor = sections[index + 1] ?? sections[index - 1];
+		requestDelete(id, () => {
+			if (neighbor) focusSection(neighbor.id);
+		});
+	};
+	const onMoveButton = (id, direction) => {
+		const to = sections.findIndex((section) => section.id === id) + (direction === "up" ? -1 : 1);
+		move(id, direction);
+		if (to === 0 || to === sections.length - 1) focusSection(id);
+	};
+	useEffect(() => {
+		if (selectedId === null) return;
+		const frame = requestAnimationFrame(() => {
+			sectionNodes.get(selectedId)?.scrollIntoView?.({ block: "nearest" });
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [
+		sectionNodes,
+		selectedId,
+		selectedIndex
+	]);
+	return {
+		sensors,
+		announcements,
+		screenReaderInstructions,
+		sectionNodes,
+		onNavigate,
+		onDeleteKey,
+		onMoveButton
+	};
+};
+//#endregion
+//#region src/components/dnd/state/use-inspector-state.ts
+const useInspectorState = ({ selectedId, selectOnly, sectionNodes, onNodePick }) => {
+	const [inspecting, setInspecting] = useState(false);
+	const [picked, setPicked] = useState(null);
+	const [hoverRect, setHoverRect] = useState(null);
+	const [fieldTarget, setFieldTarget] = useState(null);
+	if (picked && picked.sectionId !== selectedId) setPicked(null);
+	const stopInspecting = useCallback(() => {
+		setInspecting(false);
+		setHoverRect(null);
+	}, []);
+	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),
+		deactivate: stopInspecting,
+		toggle: () => inspecting ? stopInspecting() : setInspecting(true),
+		picked,
+		highlight: setFieldTarget
+	};
+	const onInspectMove = (section, overlay, x, y) => {
+		const element = pickElement(section, overlay, x, y);
+		setHoverRect(element ? viewportRect(element) : null);
+	};
+	const onInspectPick = (sectionId, section, overlay, x, y) => {
+		const id = pickElement(section, overlay, x, y)?.getAttribute(DATA_ATTR.ID);
+		if (!id) return;
+		const pick = {
+			id,
+			sectionId
+		};
+		selectOnly(sectionId);
+		setPicked(pick);
+		stopInspecting();
+		onNodePick?.(pick);
+	};
+	return {
+		inspector,
+		inspecting,
+		onInspectMove,
+		onInspectPick,
+		onInspectLeave: () => setHoverRect(null),
+		highlightRect: inspecting ? hoverRect : fieldTarget ? fieldRect : null
+	};
+};
+//#endregion
+//#region src/components/dnd/state/use-section-document.ts
+const createLastParsed = () => {
+	let last = null;
+	return {
+		read: (containerId) => last && last.containerId === containerId ? last.document : void 0,
+		write: (containerId, document) => {
+			last = {
+				containerId,
+				document
+			};
+		}
+	};
+};
+const useSectionDocument = (value, onChange, { containerId, sectionNameFallback, onBlockedEdit } = {}) => {
+	const { setCode } = usePreview();
+	const [selectedId, setSelectedId] = useState(null);
+	const readSections = useCallback((code) => extractSections(code, {
+		containerId,
+		sectionNameFallback
+	}), [containerId, sectionNameFallback]);
+	const document = useMemo(() => fillSectionIds(value, void 0, { containerId }), [containerId, value]);
+	const [lastParsed] = useState(createLastParsed);
+	const view = useMemo(() => {
+		const inspection = inspectDocument(document, { containerId });
+		if (inspection.ok) {
+			lastParsed.write(containerId, document);
+			return {
+				document,
+				problem: null,
+				stale: false
+			};
+		}
+		const { ok: _ok, ...problem } = inspection;
+		const last = problem.reason === "parse-error" ? lastParsed.read(containerId) : void 0;
+		return {
+			document: last ?? document,
+			problem,
+			stale: last !== void 0
+		};
+	}, [
+		containerId,
+		document,
+		lastParsed
+	]);
+	const sections = useMemo(() => readSections(view.document), [readSections, view.document]);
+	const [previewCache] = useState(() => createSectionPreviewCache());
+	const previews = useMemo(() => previewCache.compute(view.document, sections, { containerId }), [
+		containerId,
+		previewCache,
+		sections,
+		view.document
+	]);
+	const selectedIndex = sections.findIndex((s) => s.id === selectedId);
+	const selectedSection = selectedIndex >= 0 ? sections[selectedIndex] : void 0;
+	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 });
+		pending.write(nextCode);
+		onChange?.(nextCode);
+		setCode(nextCode);
+		return readSections(nextCode);
+	}, [
+		containerId,
+		latestDocument,
+		onChange,
+		pending,
+		readSections,
+		setCode
+	]);
+	const getCommittedSection = useCallback((id) => {
+		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;
+		onBlockedEdit?.(problem);
+		return true;
+	}, [
+		onBlockedEdit,
+		problem,
+		stale
+	]);
+	const mutate = useCallback((fn) => {
+		if (refuse()) return;
+		fn(latestSections());
+	}, [latestSections, refuse]);
+	return {
+		sections,
+		previews,
+		selectedId,
+		selectedSection,
+		selectedIndex,
+		select: useCallback((id) => {
+			setSelectedId((prev) => prev === id ? null : id);
+		}, []),
+		selectOnly: useCallback((id) => setSelectedId(id), []),
+		clearSelection: useCallback(() => setSelectedId(null), []),
+		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, 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,
+			mutate,
+			selectedId
+		]),
+		copy: useCallback((id) => mutate((current) => {
+			const index = current.findIndex((s) => s.id === id);
+			const source = current[index];
+			if (!source) return;
+			const committed = commit([
+				...current.slice(0, index + 1),
+				{ code: replaceIds(source.code) },
+				...current.slice(index + 1)
+			]);
+			setSelectedId(committed[index + 1]?.id ?? null);
+		}), [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, 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, mutate]),
+		patch: useCallback((next) => mutate((current) => {
+			commit(current.map((s) => s.id === next.id ? {
+				...s,
+				...next
+			} : s));
+		}), [commit, mutate]),
+		getCommittedSection,
+		problem,
+		stale
+	};
+};
+//#endregion
+//#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(() => {
+		if (!selectedCode) return {
+			fields: [],
+			updatedCode: "",
+			parseError: null
+		};
+		try {
+			const updated = fillIdsFrom(selectedCode, selectedSectionId ?? "");
+			return {
+				fields: extract(updated, bindingOptions),
+				updatedCode: updated !== selectedCode ? updated : selectedCode,
+				parseError: null
+			};
+		} catch (e) {
+			console.warn("⚠️ Parsing error", e);
+			return {
+				fields: [],
+				updatedCode: "",
+				parseError: { error: e }
+			};
+		}
+	}, [
+		selectedCode,
+		selectedSectionId,
+		bindingOptions
+	]);
+	useEffect(() => {
+		if (missingContainer !== null) reportLatest((m) => ({
+			type: "parse",
+			target: "document",
+			reason: "container-not-found",
+			containerId: missingContainer,
+			title: m.editErrors.missingContainer(missingContainer),
+			description: m.editErrors.missingContainerDetail(missingContainer)
+		}));
+	}, [missingContainer, reportLatest]);
+	useEffect(() => {
+		if (parseError) reportLatest((m) => ({
+			type: "parse",
+			target: "section",
+			error: parseError.error,
+			title: m.editErrors.sectionParseFailed,
+			description: m.editErrors.checkConsole
+		}));
+	}, [parseError, reportLatest]);
+	const commitChanges = (changes) => {
+		if (changes.length === 0) return;
+		if (stale && problem?.reason === "parse-error") {
+			reportError(blockedEditError(problem.error, messages));
+			return;
+		}
+		const committed = selectedSection && getCommittedSection(selectedSection.id)?.code;
+		const result = updateAll(committed && committed !== selectedCode ? committed : updatedCode, changes.map(({ id, label, property, value: changeValue }) => ({
+			dataId: id,
+			label,
+			property,
+			value: changeValue
+		})), bindingOptions);
+		if (!result.success) {
+			const { id, label, property } = changes[result.index];
+			reportError({
+				type: "update",
+				id,
+				label,
+				property,
+				failure: result.failure,
+				...describeUpdateFailure(result.failure, label, messages)
+			});
+			return;
+		}
+		if (selectedSection) onChange({
+			...selectedSection,
+			code: result.code
+		});
+	};
+	const onFieldChange = (change) => commitChanges([change]);
+	const bindingFields = useMemo(() => fields.flatMap((node) => resolvePanelBindings(node)?.bindings ?? []), [fields]);
+	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]);
+	const palette = {
+		items: items?.length ? items : PALETTE_SECTIONS,
+		onAdd: (section) => {
+			addSection(section);
+			setMobilePaletteOpen(false);
+		}
+	};
+	const panel = {
+		item: selectedSection,
+		onChange,
+		onDelete,
+		onMoveUp: () => moveSection(selectedId, "up"),
+		onMoveDown: () => moveSection(selectedId, "down"),
+		canMoveUp: selectedIndex > 0,
+		canMoveDown: selectedIndex >= 0 && selectedIndex < sections.length - 1,
+		bindings,
+		onNodeChange: onFieldChange,
+		onNodesChange: commitChanges,
+		readOnly: stale,
+		bindingOptions
+	};
+	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(InspectorHighlight, { rect: highlightRect })
+		]
+	});
+	return /* @__PURE__ */ jsx(SectionFallbackContext.Provider, {
+		value: renderSectionFallback,
+		children: /* @__PURE__ */ jsxs(DndContext, {
+			sensors,
+			collisionDetection: closestCenter,
+			accessibility: {
+				announcements,
+				screenReaderInstructions
+			},
+			modifiers: [conditionalModifiers],
+			onDragEnd,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cn("relative flex h-full w-full", className),
+				...restProps,
+				children: /* @__PURE__ */ jsx(DndEditOptionsContext.Provider, {
+					value: {
+						renderField,
+						reportError,
+						bindingOptions
+					},
+					children: /* @__PURE__ */ jsx(DndRegionContext.Provider, {
+						value: {
+							palette,
+							panel,
+							canvas,
+							isMobile,
+							selectedId,
+							clearSelection,
+							paletteOpen: mobilePaletteOpen,
+							setPaletteOpen: setMobilePaletteOpen,
+							documentError: problem?.reason ?? null
+						},
+						children: /* @__PURE__ */ jsx(DndInspectorContext.Provider, {
+							value: inspector,
+							children: Children.toArray(children).length ? children : /* @__PURE__ */ jsx(Layout, {})
+						})
+					})
+				})
+			}), /* @__PURE__ */ jsx(DragOverlay, { children: /* @__PURE__ */ jsx(Overlay, {
+				sections,
+				isForced,
+				renderProps: {
+					fullCode: value,
+					modules,
+					frame,
+					dynamicTailwind,
+					...props,
+					containerId
+				}
+			}) })]
+		})
+	});
+};
+//#endregion
+//#region src/components/dnd/index.ts
+const Dnd = Dnd$1;
+Dnd.DraggableItem = DraggableItem;
+Dnd.Field = Field;
+Dnd.Palette = Palette;
+Dnd.Canvas = Canvas;
+Dnd.Panel = Panel;
+Dnd.Layout = Layout;
+//#endregion
+export { DraggableItem as _, Panel as a, getFieldKind as c, resolvePanelBindings as d, withPanelCommit as f, useDndInspector as g, useDndPanel as h, Palette as i, isStructuralFieldKind as l, useDndPalette as m, Canvas as n, Field as o, useDndLayout as p, Layout as r, useDndItems as s, Dnd as t, useDndChildren as u };
+
+//# sourceMappingURL=dnd-BlC1gqUy.js.map