@jbpark/live-editor 4.6.1 → 6.0.0

package/dist/dnd-BvjEDo-x.js

@@ -0,0 +1,4197 @@
+import { C as isJSXElement, D as isJSXIdentifier, E as isJSXFragment, I as isSpreadElement, L as isStringLiteral, N as isObjectExpression, O as isJSXOpeningElement, P as isObjectProperty, S as isJSXAttribute, a as inspectDocument, at as stringLiteral, b as isExpression, ct as traverseFast, d as applyEdits, dt as parseExpression, k as isJSXSpreadAttribute, l as fillIdsFrom, n as fillSectionIds, ot as templateElement, p as nanoid, st as templateLiteral, t as createSectionPreviewCache, u as replaceIds, x as isIdentifier } from "./document-uHqw0mvr.js";
+import { r as DATA_ATTR, s as RESERVED_BINDING_PROPERTIES, t as BINDING_PROP } from "./constants-st9gnJ5g.js";
+import { i as useLiveMessages } from "./messages-DrINcRdG.js";
+import { i as usePreview } from "./states-Ci1AvoQ9.js";
+import { _ as parseArrayExpression, a as getChildrenSignatures, b as generateCode, c as removeIndices, d as getStructuredValue, f as readNodeBindings, g as isLosslesslyEvaluable, h as extractObjectProperties, i as valueToExpression, l as findEditableChildren, m as extractNodeValue, n as updateAll, o as extract, p as canLosslesslyEvaluateSource, r as createNodeFromValue, s as moveSelectedIndices, u as getCurrentValue, v as parseValue } from "./update-BuYQJqjq.js";
+import { t as cn } from "./cn-CAnad2vL.js";
+import { r as preloadScripts } from "./compile-my0AjsCw.js";
+import { a as replaceSections, i as generateSection, r as extractSections } from "./sections-DhH_aVf5.js";
+import { n as Error$1, t as ErrorBoundary } from "./boundary-CySnDUs2.js";
+import { a as renderStableComponent, n as useCompiledModule, o as Frame, t as useDynamicTailwind } from "./use-dynamic-tailwind-B3l1qZRW.js";
+import { i as getFieldKind, n as FieldIdsContext, o as FieldError, r as LABELABLE_KINDS, s as fields_module_default, t as useFieldState } from "./use-field-state-iQGW0vc6.js";
+import { t as Core } from "./core-BNVuH8-l.js";
+import { Children, createContext, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, PointerSensor, TouchSensor, closestCenter, useDndContext, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
+import { restrictToParentElement, restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { useDebounce, useElementPosition, useKeyPress, useLatest, useMultiSelect, usePendingCommit, useResponsiveSize, useSet, useStableValue } from "@jbpark/use-hooks";
+import { 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="text-center text-white">
+        <div
+          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' },
+                gap: {
+                  type: 'number',
+                  label: 'Content Spacing',
+                  // Constraints the library validates with or without a
+                  // widget.
+                  min: 0,
+                  max: 40,
+                  // Presentation only: the built-in panel ignores it and
+                  // shows a number input; a custom panel can switch on
+                  // widget.type.
+                  widget: { type: 'slider', step: 4, unit: 'px' },
+                },
+              },
+              // Not a library field, so it arrives as meta.group.
+              group: 'layout',
+            },
+          ]}
+          style={{ backgroundColor: '#6366f1', gap: 16 }}
+          className="flex flex-col items-center px-5 py-15"
+        >
+          <h1
+            data-id=""
+            data-binding={[
+              {
+                label: 'Title',
+                property: 'innerText',
+                type: 'string',
+                required: true,
+              },
+            ]}
+            className="text-5xl font-bold"
+          >
+            Welcome to Live Editor
+          </h1>
+          <p
+            data-id=""
+            data-binding={[{ label: 'Description', type: 'richtext' }]}
+            className="text-xl"
+          >
+            Build <strong>dynamic components</strong> with drag & drop
+          </p>
+          <a
+            data-id=""
+            data-binding={[
+              { label: 'Button Text', property: 'innerText' },
+              { label: 'Button Link', property: 'href', type: 'url' },
+            ]}
+            href="https://github.com/pjb0811/live-editor"
+            className="rounded-md bg-white px-6 py-3 text-lg font-medium text-indigo-500 hover:bg-gray-50"
+          >
+            🚀 Get Started
+          </a>
+        </div>
+      </section>
+    `
+	},
+	{
+		id: "features",
+		name: "Features",
+		code: `
+      <section data-name="Features" className="px-5 py-10">
+        <div
+          data-id=""
+          data-binding={[{ label: 'Feature Cards', property: 'children' }]}
+          className="mx-auto flex max-w-7xl flex-wrap gap-6"
+        >
+          <div className="min-w-70 flex-1 rounded-lg border border-gray-200 bg-white p-6 text-center">
+            <div
+              data-id=""
+              data-binding={[{ label: 'Icon', property: 'innerText' }]}
+              className="mb-3 text-5xl"
+            >
+              🚀
+            </div>
+            <h3
+              data-id=""
+              data-binding={[{ label: 'Title', property: 'innerText' }]}
+              className="mb-2 text-2xl text-gray-800"
+            >
+              Feature 1
+            </h3>
+            <p
+              data-id=""
+              data-binding={[{ label: 'Description', property: 'innerText' }]}
+              className="text-gray-600"
+            >
+              Amazing feature description
+            </p>
+          </div>
+          <div className="min-w-70 flex-1 rounded-lg border border-gray-200 bg-white p-6 text-center">
+            <div
+              data-id=""
+              data-binding={[{ label: 'Icon', property: 'innerText' }]}
+              className="mb-3 text-5xl"
+            >
+              ⚡
+            </div>
+            <h3
+              data-id=""
+              data-binding={[{ label: 'Title', property: 'innerText' }]}
+              className="mb-2 text-2xl text-gray-800"
+            >
+              Feature 2
+            </h3>
+            <p
+              data-id=""
+              data-binding={[{ label: 'Description', property: 'innerText' }]}
+              className="text-gray-600"
+            >
+              Another great feature
+            </p>
+          </div>
+          <div className="min-w-70 flex-1 rounded-lg border border-gray-200 bg-white p-6 text-center">
+            <div
+              data-id=""
+              data-binding={[{ label: 'Icon', property: 'innerText' }]}
+              className="mb-3 text-5xl"
+            >
+              ✨
+            </div>
+            <h3
+              data-id=""
+              data-binding={[{ label: 'Title', property: 'innerText' }]}
+              className="mb-2 text-2xl text-gray-800"
+            >
+              Feature 3
+            </h3>
+            <p
+              data-id=""
+              data-binding={[{ label: 'Description', property: 'innerText' }]}
+              className="text-gray-600"
+            >
+              One more awesome thing
+            </p>
+          </div>
+        </div>
+      </section>
+    `
+	},
+	{
+		id: "about",
+		name: "About",
+		code: `
+      <section data-name="About" className="mx-auto max-w-3xl px-5 py-10">
+        <h2
+          data-id=""
+          data-binding={[{ label: 'Title', property: 'innerText' }]}
+          className="mb-5 text-4xl font-semibold text-gray-800"
+        >
+          About Live Editor
+        </h2>
+        <p
+          data-id=""
+          data-binding={[{ label: 'Description 1', type: 'richtext' }]}
+          className="mb-4 text-lg leading-relaxed text-gray-600"
+        >
+          Live Editor is a powerful visual development tool that enables you to
+          create stunning web interfaces through an intuitive drag-and-drop
+          experience. Built with modern web technologies, it streamlines your
+          workflow and accelerates development cycles.
+        </p>
+        <p
+          data-id=""
+          data-binding={[{ label: 'Description 2', type: 'richtext' }]}
+          className="text-lg leading-relaxed text-gray-600"
+        >
+          Whether you&apos;re a seasoned developer or just starting out, Live
+          Editor provides the flexibility and control you need to bring your
+          creative vision to life. Focus on what matters most - building great
+          products.
+        </p>
+      </section>
+    `
+	},
+	{
+		id: "cta",
+		name: "CTA",
+		code: `
+      <section data-name="CTA" className="bg-gray-50 px-5 py-12 text-center">
+        <div className="mx-auto max-w-xl">
+          <h2
+            data-id=""
+            data-binding={[{ label: 'Title', property: 'innerText' }]}
+            className="mb-4 text-3xl font-semibold text-gray-800"
+          >
+            Ready to get started?
+          </h2>
+          <p
+            data-id=""
+            data-binding={[{ label: 'Description', property: 'innerText' }]}
+            className="mb-6 text-lg text-gray-600"
+          >
+            Start exploring what Live Editor can do for your projects
+          </p>
+          <div
+            data-id=""
+            data-binding={[{ label: 'Buttons', property: 'children' }]}
+            className="flex flex-wrap justify-center gap-4"
+          >
+            <a
+              data-id=""
+              data-binding={[{ label: 'Button 1 Text', property: 'innerText' }]}
+              href="#"
+              className="rounded-md bg-indigo-500 px-8 py-3 text-base text-white hover:bg-indigo-600"
+            >
+              View Documentation
+            </a>
+            <a
+              data-id=""
+              data-binding={[{ label: 'Button 2 Text', property: 'innerText' }]}
+              href="#"
+              className="rounded-md border-2 border-indigo-500 px-8 py-3 text-base text-indigo-500 hover:bg-indigo-50"
+            >
+              View Examples
+            </a>
+          </div>
+        </div>
+      </section>
+    `
+	},
+	{
+		id: "getting-started",
+		name: "Getting Started",
+		code: `
+      <section data-name="Getting Started" className="px-5 py-16">
+        <div className="mx-auto max-w-5xl">
+          <h2
+            data-id=""
+            data-binding={[{ label: 'Title', property: 'innerText' }]}
+            className="mb-12 text-center text-4xl font-bold text-gray-800"
+          >
+            How to Get Started
+          </h2>
+          <div className="grid gap-8 md:grid-cols-3">
+            <div
+              data-id=""
+              data-binding={[{ label: 'Card 1 Content', property: 'children' }]}
+              className="rounded-lg border-2 border-gray-200 bg-white p-8"
+            >
+              <h3
+                data-id=""
+                data-binding={[{ label: 'Card 1 Title', property: 'innerText' }]}
+                className="mb-2 text-2xl font-bold text-gray-800"
+              >
+                Explore
+              </h3>
+              <p
+                data-id=""
+                data-binding={[{ label: 'Card 1 Icon', property: 'innerText' }]}
+                className="mb-6 text-4xl font-bold text-indigo-600"
+              >
+                📚
+              </p>
+              <ul className="mb-8 space-y-3 text-gray-600">
+                <li>✓ Read documentation</li>
+                <li>✓ Browse examples</li>
+                <li>✓ Try the demo</li>
+              </ul>
+              <a
+                data-id=""
+                data-binding={[{ label: 'Card 1 Button', property: 'innerText' }]}
+                href="#"
+                className="block rounded-md border-2 border-indigo-500 px-4 py-2 text-center text-indigo-500 hover:bg-indigo-50"
+              >
+                View Docs
+              </a>
+            </div>
+            <div
+              data-id=""
+              data-binding={[{ label: 'Card 2 Content', property: 'children' }]}
+              className="relative rounded-lg border-2 border-indigo-500 bg-white p-8"
+            >
+              <div className="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full bg-indigo-500 px-4 py-1 text-sm text-white">
+                Recommended
+              </div>
+              <h3
+                data-id=""
+                data-binding={[{ label: 'Card 2 Title', property: 'innerText' }]}
+                className="mb-2 text-2xl font-bold text-gray-800"
+              >
+                Practice
+              </h3>
+              <p
+                data-id=""
+                data-binding={[{ label: 'Card 2 Icon', property: 'innerText' }]}
+                className="mb-6 text-4xl font-bold text-indigo-600"
+              >
+                💻
+              </p>
+              <ul className="mb-8 space-y-3 text-gray-600">
+                <li>✓ Interactive playground</li>
+                <li>✓ Experiment freely</li>
+                <li>✓ Build your own</li>
+              </ul>
+              <a
+                data-id=""
+                data-binding={[{ label: 'Card 2 Button', property: 'innerText' }]}
+                href="#"
+                className="block rounded-md bg-indigo-500 px-4 py-2 text-center text-white hover:bg-indigo-600"
+              >
+                Start Building
+              </a>
+            </div>
+            <div
+              data-id=""
+              data-binding={[{ label: 'Card 3 Content', property: 'children' }]}
+              className="rounded-lg border-2 border-gray-200 bg-white p-8"
+            >
+              <h3
+                data-id=""
+                data-binding={[{ label: 'Card 3 Title', property: 'innerText' }]}
+                className="mb-2 text-2xl font-bold text-gray-800"
+              >
+                Contribute
+              </h3>
+              <p
+                data-id=""
+                data-binding={[{ label: 'Card 3 Icon', property: 'innerText' }]}
+                className="mb-6 text-4xl font-bold text-indigo-600"
+              >
+                🤝
+              </p>
+              <ul className="mb-8 space-y-3 text-gray-600">
+                <li>✓ Report issues</li>
+                <li>✓ Suggest features</li>
+                <li>✓ Submit pull requests</li>
+              </ul>
+              <a
+                data-id=""
+                data-binding={[{ label: 'Card 3 Button', property: 'innerText' }]}
+                href="#"
+                className="block rounded-md border-2 border-indigo-500 px-4 py-2 text-center text-indigo-500 hover:bg-indigo-50"
+              >
+                View on GitHub
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+    `
+	},
+	{
+		id: "key-features",
+		name: "Key Features",
+		code: `
+      <section data-name="Key Features" className="bg-indigo-50 px-5 py-16">
+        <div className="mx-auto max-w-6xl">
+          <h2
+            data-id=""
+            data-binding={[{ label: 'Title', property: 'innerText' }]}
+            className="mb-12 text-center text-4xl font-bold text-gray-800"
+          >
+            Key Features
+          </h2>
+          <div className="grid gap-8 md:grid-cols-2">
+            <div className="rounded-lg bg-white p-8 shadow-md">
+              <div className="mb-4 text-4xl">🎨</div>
+              <h3 className="mb-4 text-2xl font-bold text-gray-800">
+                Visual Editing
+              </h3>
+              <p className="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="rounded-lg bg-white p-8 shadow-md">
+              <div className="mb-4 text-4xl">🧩</div>
+              <h3 className="mb-4 text-2xl font-bold text-gray-800">
+                Component-Based
+              </h3>
+              <p className="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="bg-indigo-600 px-5 py-16 text-white">
+        <div
+          data-id=""
+          data-binding={[{ label: 'Stats Cards', property: 'children' }]}
+          className="mx-auto flex max-w-6xl flex-wrap justify-center gap-10"
+        >
+          <div className="min-w-50 flex-1 text-center">
+            <p
+              data-id=""
+              data-binding={[{ label: 'Title', property: 'innerText' }]}
+              className="mb-2 text-5xl font-bold"
+            >
+              Open
+            </p>
+            <p
+              data-id=""
+              data-binding={[{ label: 'Description', property: 'innerText' }]}
+              className="text-indigo-200"
+            >
+              Source Project
+            </p>
+          </div>
+          <div className="min-w-50 flex-1 text-center">
+            <p
+              data-id=""
+              data-binding={[{ label: 'Title', property: 'innerText' }]}
+              className="mb-2 text-5xl font-bold"
+            >
+              Free
+            </p>
+            <p
+              data-id=""
+              data-binding={[{ label: 'Description', property: 'innerText' }]}
+              className="text-indigo-200"
+            >
+              For Everyone
+            </p>
+          </div>
+          <div className="min-w-50 flex-1 text-center">
+            <p
+              data-id=""
+              data-binding={[{ label: 'Title', property: 'innerText' }]}
+              className="mb-2 text-5xl font-bold"
+            >
+              Active
+            </p>
+            <p
+              data-id=""
+              data-binding={[{ label: 'Description', property: 'innerText' }]}
+              className="text-indigo-200"
+            >
+              Community
+            </p>
+          </div>
+          <div className="min-w-50 flex-1 text-center">
+            <p
+              data-id=""
+              data-binding={[{ label: 'Title', property: 'innerText' }]}
+              className="mb-2 text-5xl font-bold"
+            >
+              Learn
+            </p>
+            <p
+              data-id=""
+              data-binding={[{ label: 'Description', property: 'innerText' }]}
+              className="text-indigo-200"
+            >
+              By Doing
+            </p>
+          </div>
+        </div>
+      </section>
+    `
+	},
+	{
+		id: "roadmap",
+		name: "Roadmap",
+		code: `
+      <section data-name="Roadmap" className="px-5 py-16">
+        <div className="mx-auto max-w-3xl">
+          <h2
+            data-id=""
+            data-binding={[
+              { label: 'Title', property: 'innerText', required: true },
+            ]}
+            className="mb-8 text-center text-4xl font-bold text-gray-800"
+          >
+            Roadmap
+          </h2>
+          <ol
+            data-id=""
+            data-binding={[{ label: 'Milestones', property: 'children' }]}
+          >
+            <li className="flex items-center gap-4 border-b border-gray-100 py-4">
+              <span
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Accent',
+                    property: 'style',
+                    type: 'object',
+                    render: {
+                      backgroundColor: { type: 'color', label: 'Accent Color' },
+                    },
+                  },
+                ]}
+                style={{ backgroundColor: '#22c55e' }}
+                className="size-3 shrink-0 rounded-full"
+              />
+              <div className="min-w-0 flex-1">
+                <p
+                  data-id=""
+                  data-binding={[
+                    { label: 'Title', property: 'innerText', required: true },
+                  ]}
+                  className="font-semibold text-gray-800"
+                >
+                  Visual editing
+                </p>
+                <p className="text-sm text-gray-500">
+                  <time
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Release Date',
+                        property: 'dateTime',
+                        type: 'date',
+                        required: true,
+                      },
+                      { label: 'Date Text', property: 'innerText' },
+                    ]}
+                    dateTime="2026-03-02"
+                  >
+                    March 2, 2026
+                  </time>
+                  {' · '}
+                  <span
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Status',
+                        property: 'innerText',
+                        options: [
+                          { label: 'Planned', value: 'Planned' },
+                          { label: 'In Progress', value: 'In Progress' },
+                          { label: 'Shipped', value: 'Shipped' },
+                        ],
+                      },
+                    ]}
+                  >
+                    Shipped
+                  </span>
+                </p>
+                <progress
+                  data-id=""
+                  data-binding={[
+                    {
+                      label: 'Progress',
+                      property: 'value',
+                      type: 'number',
+                      min: 0,
+                      max: 100,
+                      widget: { type: 'slider', step: 10, unit: '%' },
+                    },
+                  ]}
+                  value={100}
+                  max={100}
+                  className="mt-2 h-2 w-full"
+                />
+              </div>
+              <a
+                data-id=""
+                data-binding={[
+                  { label: 'Link Text', property: 'innerText' },
+                  {
+                    label: 'Link URL',
+                    property: 'href',
+                    type: 'url',
+                    pattern: '^https://',
+                    // Not a library field, so it arrives as meta.hint.
+                    hint: 'Must use https',
+                  },
+                ]}
+                href="https://github.com"
+                className="text-sm text-indigo-500 hover:underline"
+              >
+                Release notes
+              </a>
+            </li>
+            <li className="flex items-center gap-4 border-b border-gray-100 py-4">
+              <span
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Accent',
+                    property: 'style',
+                    type: 'object',
+                    render: {
+                      backgroundColor: { type: 'color', label: 'Accent Color' },
+                    },
+                  },
+                ]}
+                style={{ backgroundColor: '#6366f1' }}
+                className="size-3 shrink-0 rounded-full"
+              />
+              <div className="min-w-0 flex-1">
+                <p
+                  data-id=""
+                  data-binding={[
+                    { label: 'Title', property: 'innerText', required: true },
+                  ]}
+                  className="font-semibold text-gray-800"
+                >
+                  Custom panels
+                </p>
+                <p className="text-sm text-gray-500">
+                  <time
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Release Date',
+                        property: 'dateTime',
+                        type: 'date',
+                        required: true,
+                      },
+                      { label: 'Date Text', property: 'innerText' },
+                    ]}
+                    dateTime="2026-09-26"
+                  >
+                    September 26, 2026
+                  </time>
+                  {' · '}
+                  <span
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Status',
+                        property: 'innerText',
+                        options: [
+                          { label: 'Planned', value: 'Planned' },
+                          { label: 'In Progress', value: 'In Progress' },
+                          { label: 'Shipped', value: 'Shipped' },
+                        ],
+                      },
+                    ]}
+                  >
+                    In Progress
+                  </span>
+                </p>
+                <progress
+                  data-id=""
+                  data-binding={[
+                    {
+                      label: 'Progress',
+                      property: 'value',
+                      type: 'number',
+                      min: 0,
+                      max: 100,
+                      widget: { type: 'slider', step: 10, unit: '%' },
+                    },
+                  ]}
+                  value={60}
+                  max={100}
+                  className="mt-2 h-2 w-full"
+                />
+              </div>
+              <a
+                data-id=""
+                data-binding={[
+                  { label: 'Link Text', property: 'innerText' },
+                  {
+                    label: 'Link URL',
+                    property: 'href',
+                    type: 'url',
+                    pattern: '^https://',
+                    // Not a library field, so it arrives as meta.hint.
+                    hint: 'Must use https',
+                  },
+                ]}
+                href="https://github.com"
+                className="text-sm text-indigo-500 hover:underline"
+              >
+                Guide
+              </a>
+            </li>
+            <li className="flex items-center gap-4 border-b border-gray-100 py-4">
+              <span
+                data-id=""
+                data-binding={[
+                  {
+                    label: 'Accent',
+                    property: 'style',
+                    type: 'object',
+                    render: {
+                      backgroundColor: { type: 'color', label: 'Accent Color' },
+                    },
+                  },
+                ]}
+                style={{ backgroundColor: '#f59e0b' }}
+                className="size-3 shrink-0 rounded-full"
+              />
+              <div className="min-w-0 flex-1">
+                <p
+                  data-id=""
+                  data-binding={[
+                    { label: 'Title', property: 'innerText', required: true },
+                  ]}
+                  className="font-semibold text-gray-800"
+                >
+                  Collaboration
+                </p>
+                <p className="text-sm text-gray-500">
+                  <time
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Release Date',
+                        property: 'dateTime',
+                        type: 'date',
+                        required: true,
+                      },
+                      { label: 'Date Text', property: 'innerText' },
+                    ]}
+                    dateTime="2027-01-15"
+                  >
+                    January 15, 2027
+                  </time>
+                  {' · '}
+                  <span
+                    data-id=""
+                    data-binding={[
+                      {
+                        label: 'Status',
+                        property: 'innerText',
+                        options: [
+                          { label: 'Planned', value: 'Planned' },
+                          { label: 'In Progress', value: 'In Progress' },
+                          { label: 'Shipped', value: 'Shipped' },
+                        ],
+                      },
+                    ]}
+                  >
+                    Planned
+                  </span>
+                </p>
+                <progress
+                  data-id=""
+                  data-binding={[
+                    {
+                      label: 'Progress',
+                      property: 'value',
+                      type: 'number',
+                      min: 0,
+                      max: 100,
+                      widget: { type: 'slider', step: 10, unit: '%' },
+                    },
+                  ]}
+                  value={0}
+                  max={100}
+                  className="mt-2 h-2 w-full"
+                />
+              </div>
+              <a
+                data-id=""
+                data-binding={[
+                  { label: 'Link Text', property: 'innerText' },
+                  {
+                    label: 'Link URL',
+                    property: 'href',
+                    type: 'url',
+                    pattern: '^https://',
+                    // Not a library field, so it arrives as meta.hint.
+                    hint: 'Must use https',
+                  },
+                ]}
+                href="https://github.com"
+                className="text-sm text-indigo-500 hover:underline"
+              >
+                Discussion
+              </a>
+            </li>
+          </ol>
+          <p className="mt-6 text-center text-sm text-gray-500">
+            Last updated{' '}
+            <time
+              data-id=""
+              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="px-5 py-16">
+        <div className="mx-auto max-w-3xl">
+          <h2
+            data-id=""
+            data-binding={[{ label: 'Title', property: 'innerText' }]}
+            className="mb-12 text-center text-4xl font-bold text-gray-800"
+          >
+            Frequently Asked Questions
+          </h2>
+          <div
+            data-id=""
+            data-binding={[{ label: 'FAQ Items', property: 'children' }]}
+            className="divide-y divide-gray-200"
+          >
+            <details className="py-4">
+              <summary
+                data-id=""
+                data-binding={[{ label: 'Question 1', property: 'innerText' }]}
+                className="cursor-pointer text-lg font-semibold text-gray-800"
+              >
+                What is Live Editor?
+              </summary>
+              <p
+                data-id=""
+                data-binding={[{ label: 'Answer 1', type: 'richtext' }]}
+                className="mt-3 text-gray-600"
+              >
+                Live Editor is an open-source tool for building web
+                interfaces visually. It helps you learn web development by
+                providing instant feedback as you build components.
+              </p>
+            </details>
+            <details className="py-4">
+              <summary
+                data-id=""
+                data-binding={[{ label: 'Question 2', property: 'innerText' }]}
+                className="cursor-pointer text-lg font-semibold text-gray-800"
+              >
+                Do I need coding experience?
+              </summary>
+              <p
+                data-id=""
+                data-binding={[{ label: 'Answer 2', type: 'richtext' }]}
+                className="mt-3 text-gray-600"
+              >
+                No! Live Editor is designed for all skill levels. Beginners
+                can learn through visual editing, while experienced
+                developers can work directly with code.
+              </p>
+            </details>
+            <details className="py-4">
+              <summary
+                data-id=""
+                data-binding={[{ label: 'Question 3', property: 'innerText' }]}
+                className="cursor-pointer text-lg font-semibold text-gray-800"
+              >
+                Is it really free?
+              </summary>
+              <p
+                data-id=""
+                data-binding={[{ label: 'Answer 3', type: 'richtext' }]}
+                className="mt-3 text-gray-600"
+              >
+                Yes, completely free! Live Editor is an open-source project
+                with no hidden costs or premium tiers. All features are
+                available to everyone.
+              </p>
+            </details>
+            <details className="py-4">
+              <summary
+                data-id=""
+                data-binding={[{ label: 'Question 4', property: 'innerText' }]}
+                className="cursor-pointer text-lg font-semibold text-gray-800"
+              >
+                How can I contribute?
+              </summary>
+              <p
+                data-id=""
+                data-binding={[{ label: 'Answer 4', type: 'richtext' }]}
+                className="mt-3 text-gray-600"
+              >
+                You can contribute by reporting bugs, suggesting features,
+                sharing your projects, or contributing code. Check our
+                GitHub repository for more details.
+              </p>
+            </details>
+          </div>
+        </div>
+      </section>
+    `
+	}
+];
+//#endregion
+//#region src/components/dnd/canvas/canvas.module.css
+var canvas_module_default = {
+	"dropArea": "vaEhUG_dropArea",
+	"dropAreaOver": "vaEhUG_dropAreaOver",
+	"dropBottom": "vaEhUG_dropBottom",
+	"dropBottomOver": "vaEhUG_dropBottomOver",
+	"empty": "vaEhUG_empty",
+	"fill": "vaEhUG_fill",
+	"notice": "vaEhUG_notice",
+	"section": "vaEhUG_section",
+	"sectionDropTarget": "vaEhUG_sectionDropTarget",
+	"sectionSelected": "vaEhUG_sectionSelected",
+	"sectionShield": "vaEhUG_sectionShield",
+	"sectionToolbar": "vaEhUG_sectionToolbar",
+	"stale": "vaEhUG_stale"
+};
+//#endregion
+//#region src/components/dnd/layout.module.css
+var layout_module_default = {
+	"canvas": "_4QZ3lW_canvas",
+	"card": "_4QZ3lW_card",
+	"palette": "_4QZ3lW_palette",
+	"paletteButton": "_4QZ3lW_paletteButton",
+	"paletteItems": "_4QZ3lW_paletteItems",
+	"panel": "_4QZ3lW_panel",
+	"picker": "_4QZ3lW_picker",
+	"pickerDock": "_4QZ3lW_pickerDock",
+	"root": "_4QZ3lW_root"
+};
+//#endregion
+//#region src/components/dnd/canvas/canvas-notice.tsx
+const CanvasNotice = ({ title, detail }) => /* @__PURE__ */ jsxs("div", {
+	className: canvas_module_default.notice,
+	children: [/* @__PURE__ */ jsx("p", { children: title }), /* @__PURE__ */ jsx("span", { children: detail })]
+});
+//#endregion
+//#region src/components/dnd/palette/palette-drag.ts
+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(canvas_module_default.dropArea, shouldHighlight && canvas_module_default.dropAreaOver, className),
+		children: [children, isPaletteSectionDragging && /* @__PURE__ */ jsx("div", {
+			ref: setBottomRef,
+			className: cn(canvas_module_default.dropBottom, shouldHighlightBottom && canvas_module_default.dropBottomOver),
+			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("div", {
+		ref,
+		style: { opacity: isDragging ? .5 : 1 },
+		...dragProps,
+		className: layout_module_default.card,
+		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,
+			style: {
+				width: "100%",
+				overflowX: "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: [renderStableComponent(Component, preview, {
+					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/button.module.css
+var button_module_default = {
+	"button": "_49iObG_button",
+	"circle": "_49iObG_circle",
+	"danger": "_49iObG_danger",
+	"iconOnly": "_49iObG_iconOnly",
+	"outlined": "_49iObG_outlined",
+	"primary": "_49iObG_primary",
+	"small": "_49iObG_small",
+	"solid": "_49iObG_solid",
+	"success": "_49iObG_success",
+	"text": "_49iObG_text"
+};
+//#endregion
+//#region src/components/dnd/button.tsx
+const Button = ({ variant = "outlined", tone = "neutral", size = "middle", shape = "default", icon, className, children, ...restProps }) => /* @__PURE__ */ jsxs("button", {
+	type: "button",
+	className: cn(button_module_default.button, button_module_default[variant], tone !== "neutral" && button_module_default[tone], size === "small" && button_module_default.small, shape === "circle" && button_module_default.circle, icon && !children && button_module_default.iconOnly, className),
+	...restProps,
+	children: [icon, children]
+});
+//#endregion
+//#region src/components/dnd/canvas/section-handlers.ts
+const SectionHandlersContext = createContext(null);
+const useSectionHandlers = () => useContext(SectionHandlersContext);
+//#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(canvas_module_default.section, selected && canvas_module_default.sectionSelected, isPaletteSectionOver && canvas_module_default.sectionDropTarget),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: canvas_module_default.sectionShield,
+				onPointerMove: inspecting ? (e) => handlers?.onInspectMove(e.currentTarget.parentElement, e.currentTarget, e.clientX, e.clientY) : void 0,
+				onPointerLeave: inspecting ? handlers?.onInspectLeave : void 0,
+				onClick: inspecting ? (e) => {
+					e.stopPropagation();
+					handlers?.onInspectPick(id, e.currentTarget.parentElement, e.currentTarget, e.clientX, e.clientY);
+				} : void 0
+			}),
+			children,
+			selected && /* @__PURE__ */ jsxs("div", {
+				className: canvas_module_default.sectionToolbar,
+				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, {
+						tone: "danger",
+						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/toast.module.css
+var toast_module_default = {
+	"description": "YlF_3q_description",
+	"region": "YlF_3q_region",
+	"title": "YlF_3q_title",
+	"toast": "YlF_3q_toast"
+};
+//#endregion
+//#region src/components/dnd/toast.ts
+const TOAST_DURATION = 6e3;
+let region = null;
+const getRegion = () => {
+	if (region?.isConnected) return region;
+	region = document.createElement("div");
+	region.className = toast_module_default.region;
+	document.body.append(region);
+	return region;
+};
+const showErrorToast = (title, description) => {
+	if (typeof document === "undefined") return;
+	const toast = document.createElement("div");
+	toast.className = toast_module_default.toast;
+	toast.setAttribute("role", "alert");
+	const heading = document.createElement("div");
+	heading.className = toast_module_default.title;
+	heading.textContent = title;
+	toast.append(heading);
+	if (description) {
+		const detail = document.createElement("div");
+		detail.className = toast_module_default.description;
+		detail.textContent = description;
+		toast.append(detail);
+	}
+	const remove = () => {
+		window.clearTimeout(timer);
+		toast.remove();
+	};
+	const timer = window.setTimeout(remove, TOAST_DURATION);
+	toast.addEventListener("click", remove);
+	getRegion().append(toast);
+};
+//#endregion
+//#region src/components/dnd/edit-options.ts
+const toastEditError = (error) => {
+	showErrorToast(error.title, error.description);
+};
+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/drawer.module.css
+var drawer_module_default = {
+	"body": "_ty1rG_body",
+	"content": "_ty1rG_content",
+	"drawer": "_ty1rG_drawer",
+	"header": "_ty1rG_header",
+	"slide-up": "_ty1rG_slide-up",
+	"title": "_ty1rG_title"
+};
+//#endregion
+//#region src/components/dnd/drawer.tsx
+const Drawer = ({ open, title, closeLabel, onClose, children }) => {
+	const titleId = useId();
+	const dialogRef = useRef(null);
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		if (!dialog || !open) return;
+		if (typeof dialog.showModal === "function") dialog.showModal();
+		else dialog.setAttribute("open", "");
+		return () => {
+			if (typeof dialog.close === "function") dialog.close();
+			else dialog.removeAttribute("open");
+		};
+	}, [open]);
+	if (!open) return null;
+	return /* @__PURE__ */ jsx("dialog", {
+		ref: dialogRef,
+		className: drawer_module_default.drawer,
+		"aria-labelledby": titleId,
+		onCancel: (e) => {
+			e.preventDefault();
+			onClose();
+		},
+		onClick: (e) => {
+			if (e.target === e.currentTarget) onClose();
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: drawer_module_default.content,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: drawer_module_default.header,
+				children: [/* @__PURE__ */ jsx("h2", {
+					id: titleId,
+					className: drawer_module_default.title,
+					children: title
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "text",
+					size: "small",
+					icon: /* @__PURE__ */ jsx(X, {}),
+					"aria-label": closeLabel,
+					onClick: onClose
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: drawer_module_default.body,
+				children
+			})]
+		})
+	});
+};
+//#endregion
+//#region src/components/dnd/layout-context.ts
+const DndRegionContext = createContext(null);
+const useDndRegions = (subject) => {
+	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/panel.module.css
+var panel_module_default = {
+	"actions": "gbKovW_actions",
+	"binding": "gbKovW_binding",
+	"bindingLabel": "gbKovW_bindingLabel",
+	"bindingProperty": "gbKovW_bindingProperty",
+	"bindings": "gbKovW_bindings",
+	"element": "gbKovW_element",
+	"elementHeader": "gbKovW_elementHeader",
+	"elementTag": "gbKovW_elementTag",
+	"elementText": "gbKovW_elementText",
+	"empty": "gbKovW_empty",
+	"header": "gbKovW_header",
+	"note": "gbKovW_note",
+	"panel": "gbKovW_panel",
+	"readOnly": "gbKovW_readOnly",
+	"title": "gbKovW_title"
+};
+//#endregion
+//#region src/components/dnd/panel/element-selection.ts
+const ElementSelectionContext = createContext({ ids: /* @__PURE__ */ new Set() });
+//#endregion
+//#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/structure.module.css
+var structure_module_default = {
+	"card": "lH7pXW_card",
+	"cardCompact": "lH7pXW_cardCompact",
+	"children": "lH7pXW_children",
+	"dragging": "lH7pXW_dragging",
+	"element": "lH7pXW_element",
+	"elementTag": "lH7pXW_elementTag",
+	"handle": "lH7pXW_handle",
+	"heading": "lH7pXW_heading",
+	"indented": "lH7pXW_indented",
+	"items": "lH7pXW_items",
+	"label": "lH7pXW_label",
+	"muted": "lH7pXW_muted",
+	"nested": "lH7pXW_nested",
+	"notice": "lH7pXW_notice",
+	"noticeDanger": "lH7pXW_noticeDanger",
+	"noticeWarning": "lH7pXW_noticeWarning",
+	"propertyLabel": "lH7pXW_propertyLabel",
+	"row": "lH7pXW_row",
+	"rowStart": "lH7pXW_rowStart",
+	"stack": "lH7pXW_stack",
+	"stackLoose": "lH7pXW_stackLoose",
+	"stackTight": "lH7pXW_stackTight",
+	"toggle": "lH7pXW_toggle",
+	"valueType": "lH7pXW_valueType"
+};
+//#endregion
+//#region src/components/dnd/panel/row-controls.module.css
+var row_controls_module_default = { "controls": "q9alSq_controls" };
+//#endregion
+//#region src/components/dnd/panel/row-controls.tsx
+const RowControls = ({ index, count, labels, disabled = false, deleteDisabled = false, onMove, onDelete }) => /* @__PURE__ */ jsxs("div", {
+	className: row_controls_module_default.controls,
+	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, {
+			tone: "danger",
+			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/selection.module.css
+var selection_module_default = {
+	"actions": "ZTKonW_actions",
+	"bar": "ZTKonW_bar",
+	"checkbox": "ZTKonW_checkbox",
+	"count": "ZTKonW_count",
+	"selectAll": "ZTKonW_selectAll"
+};
+//#endregion
+//#region src/components/dnd/panel/selection/bulk-actions-bar.tsx
+const BulkActionsBar = ({ count, disabled = false, duplicateDisabled = false, deleteDisabled = false, onDuplicate, onMoveUp, onMoveDown, onDelete, onClear }) => {
+	const messages = useLiveMessages();
+	if (count === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: selection_module_default.bar,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: selection_module_default.count,
+			children: messages.selection.count(count)
+		}), /* @__PURE__ */ jsxs("div", {
+			className: selection_module_default.actions,
+			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, {
+					tone: "danger",
+					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 inputRef = useRef(null);
+	const isAllSelected = total > 0 && selected >= total;
+	const isIndeterminate = selected > 0 && !isAllSelected;
+	useEffect(() => {
+		if (inputRef.current) inputRef.current.indeterminate = isIndeterminate;
+	}, [isIndeterminate]);
+	return /* @__PURE__ */ jsxs("label", {
+		className: selection_module_default.selectAll,
+		children: [/* @__PURE__ */ jsx("input", {
+			ref: inputRef,
+			type: "checkbox",
+			className: selection_module_default.checkbox,
+			checked: isAllSelected,
+			disabled,
+			onChange: () => isAllSelected ? onClear() : onSelectAll()
+		}), messages.selection.selectAll]
+	});
+};
+//#endregion
+//#region src/components/dnd/panel/selection/selection-checkbox.tsx
+const SelectionCheckbox = ({ checked, disabled = false, onToggle }) => /* @__PURE__ */ jsx("input", {
+	type: "checkbox",
+	className: selection_module_default.checkbox,
+	checked,
+	disabled,
+	readOnly: true,
+	onClick: (e) => onToggle(e.shiftKey)
+});
+//#endregion
+//#region src/components/dnd/panel/selection/use-structural-selection.ts
+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: cn(structure_module_default.children, structure_module_default.stackLoose),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: structure_module_default.row,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: structure_module_default.heading,
+					children: messages.children.heading(items.length)
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "small",
+					tone: "success",
+					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: structure_module_default.card,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: structure_module_default.row,
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: structure_module_default.rowStart,
+							children: [/* @__PURE__ */ jsx(SelectionCheckbox, {
+								checked: selection.isSelected(itemIndex),
+								onToggle: (shiftKey) => selection.toggle(itemIndex, shiftKey)
+							}), /* @__PURE__ */ jsx("div", {
+								className: structure_module_default.label,
+								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: structure_module_default.stack,
+						children: [/* @__PURE__ */ jsx("div", {
+							className: structure_module_default.label,
+							children: messages.children.editableBindings
+						}), editableChildrenMap.get(itemIndex).map((editableNode, idx) => {
+							const nodeId = editableNode.dataAttributes.find((a) => a.name === "data-id")?.value;
+							return /* @__PURE__ */ jsx(ElementFields, {
+								id: nodeId ?? void 0,
+								className: structure_module_default.element,
+								header: /* @__PURE__ */ jsx("div", {
+									className: structure_module_default.elementTag,
+									children: editableNode.tagName
+								}),
+								bindings: bindingsOf(editableNode, onNodeChange),
+								onNodeChange
+							}, `editable-${nodeId || idx}`);
+						})]
+					}),
+					!!item.children && !editableChildrenMap.has(itemIndex) && /* @__PURE__ */ jsxs("div", {
+						className: structure_module_default.stackTight,
+						children: [/* @__PURE__ */ jsx("div", {
+							className: structure_module_default.label,
+							children: messages.children.childNodes
+						}), item.children.map((node, nodeIndex) => /* @__PURE__ */ jsx(ElementFields, {
+							className: cn(structure_module_default.element, structure_module_default.indented),
+							bindings: bindingsOf(node, onNodeChange),
+							onNodeChange
+						}, `node-${itemIndex}-${nodeIndex}`))]
+					})
+				]
+			}, item.id || itemIndex))
+		]
+	});
+};
+//#endregion
+//#region src/components/dnd/panel/fields/color-field.tsx
+const COLOR_COMMIT_DELAY = 75;
+const normalizeToHex = (value) => {
+	const trimmed = value.trim();
+	if (/^#[0-9A-Fa-f]{6}$/.test(trimmed)) return trimmed;
+	if (/^#[0-9A-Fa-f]{3}$/.test(trimmed)) {
+		const [, r, g, b] = trimmed;
+		return `#${r}${r}${g}${g}${b}${b}`;
+	}
+	return "#000000";
+};
+const ColorField = ({ value: source, onChange, ...controlProps }) => {
+	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__ */ jsxs("div", {
+		className: fields_module_default.color,
+		children: [/* @__PURE__ */ jsx("input", {
+			...controlProps,
+			type: "color",
+			value: liveValue,
+			className: cn(fields_module_default.control, fields_module_default.colorSwatch),
+			onChange: (e) => {
+				setLiveValue(e.target.value);
+				debouncedCommit();
+			},
+			onBlur: () => commit(liveValue)
+		}), /* @__PURE__ */ jsx("code", {
+			className: fields_module_default.colorSource,
+			children: source
+		})]
+	});
+};
+//#endregion
+//#region src/components/dnd/panel/fields/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 labelId = `${controlId}-label`;
+	const isLabelable = LABELABLE_KINDS.has(getFieldKind(binding));
+	return /* @__PURE__ */ jsxs(FieldIdsContext.Provider, {
+		value: {
+			controlId,
+			labelId
+		},
+		children: [/* @__PURE__ */ jsx("label", {
+			id: labelId,
+			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: structure_module_default.stackLoose,
+				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 && structure_module_default.dragging),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: structure_module_default.row,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: structure_module_default.rowStart,
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						ref: setActivatorNodeRef,
+						...attributes,
+						...listeners,
+						"aria-label": messages.items.reorder(title),
+						disabled,
+						className: structure_module_default.handle,
+						children: /* @__PURE__ */ jsx(GripVertical, { size: 14 })
+					}),
+					checkbox,
+					/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"aria-expanded": expanded,
+						onClick: onToggle,
+						className: structure_module_default.toggle,
+						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: structure_module_default.stack,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: structure_module_default.label,
+			children: group.property
+		}), /* @__PURE__ */ jsx(Field, {
+			binding: group.fallback,
+			onNodeChange
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: structure_module_default.stack,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: structure_module_default.label,
+			children: [
+				group.property,
+				" Bindings (",
+				group.elements.length,
+				"):"
+			]
+		}), group.elements.map((element) => /* @__PURE__ */ jsx(ElementFields, {
+			id: element.id,
+			className: structure_module_default.element,
+			header: /* @__PURE__ */ jsxs("div", {
+				className: structure_module_default.elementTag,
+				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: structure_module_default.row,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: structure_module_default.heading,
+			children: messages.items.heading(items.length)
+		}), items.length > 0 && canEditStructure && /* @__PURE__ */ jsx(Button, {
+			size: "small",
+			icon: /* @__PURE__ */ jsx(Plus, {}),
+			variant: "solid",
+			tone: "success",
+			disabled: !canAddItems(),
+			onClick: actions.add,
+			children: messages.items.add
+		})]
+	});
+	if (parseError) return /* @__PURE__ */ jsxs("div", {
+		className: cn(structure_module_default.items, structure_module_default.stackLoose),
+		children: [header, /* @__PURE__ */ jsx("div", {
+			className: structure_module_default.noticeDanger,
+			children: messages.items.unreadable
+		})]
+	});
+	if (items.length === 0) return /* @__PURE__ */ jsxs("div", {
+		className: cn(structure_module_default.items, structure_module_default.stackLoose),
+		children: [header, /* @__PURE__ */ jsx("div", {
+			className: structure_module_default.notice,
+			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: structure_module_default.stack,
+		children: item.properties.map((binding) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+			className: structure_module_default.stack,
+			children: /* @__PURE__ */ jsx(LabeledField, {
+				binding,
+				labelClassName: structure_module_default.propertyLabel,
+				label: binding.label,
+				children: /* @__PURE__ */ jsx(Field, {
+					binding,
+					onNodeChange: onChildChange
+				})
+			})
+		}), /* @__PURE__ */ jsxs("span", {
+			className: structure_module_default.valueType,
+			children: [
+				"(",
+				String(binding.meta?.valueType),
+				")"
+			]
+		})] }, `${item.id}-${binding.property}-${binding.label}`))
+	}), /* @__PURE__ */ jsx("div", {
+		className: structure_module_default.nested,
+		children: item.nested.length ? item.nested.map((group) => /* @__PURE__ */ jsx(NestedGroup, {
+			group,
+			onNodeChange: onChildChange
+		}, group.property)) : /* @__PURE__ */ jsxs("div", {
+			className: structure_module_default.muted,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: "✓"
+				}),
+				" ",
+				messages.items.noNestedBindings
+			]
+		})
+	})] });
+	const allExpanded = expansion.expandedIds.length === items.length;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(structure_module_default.items, structure_module_default.stackLoose),
+		children: [
+			header,
+			/* @__PURE__ */ jsxs("div", {
+				className: structure_module_default.row,
+				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: structure_module_default.noticeWarning,
+				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: cn(structure_module_default.card, kind === "primitive" && structure_module_default.cardCompact),
+					children: kind === "primitive" ? /* @__PURE__ */ jsx(Field, {
+						binding: item.value,
+						onNodeChange: onChildChange
+					}) : objectBody(item)
+				}, item.id)
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/dnd/panel/field.tsx
+const BuiltinField = ({ binding, onNodeChange }) => {
+	const messages = useLiveMessages();
+	const { id, value, rawValue, onChange } = binding;
+	const { text, setText, validationError, errorId, controlProps, commitIfChanged, validateAndCommit } = useFieldState(binding);
+	const kind = getFieldKind(binding);
+	if (kind === "readonly") return /* @__PURE__ */ jsxs("div", {
+		className: fields_module_default.readonly,
+		children: [
+			/* @__PURE__ */ jsx("div", { children: messages.panel.expressionPreserved }),
+			/* @__PURE__ */ jsx("code", {
+				className: fields_module_default.readonlyCode,
+				children: rawValue
+			}),
+			/* @__PURE__ */ jsx("div", { children: messages.panel.useCodeEditor })
+		]
+	});
+	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("textarea", {
+		...controlProps,
+		rows: 4,
+		value: text,
+		className: cn(fields_module_default.control, fields_module_default.mono),
+		onChange: (e) => setText(e.target.value),
+		onBlur: (e) => commitIfChanged(e.target.value)
+	});
+	if (kind === "html" || kind === "jsx") return /* @__PURE__ */ jsx(JSXEditorField, {
+		value: rawValue,
+		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: fields_module_default.object,
+			children: Object.entries(objectValue).map(([key, val]) => {
+				const nested = resolveRenderEntry(binding.render, key);
+				return /* @__PURE__ */ jsx("div", {
+					className: fields_module_default.stack,
+					children: /* @__PURE__ */ jsx(LabeledField, {
+						binding: {
+							...nested,
+							value: val
+						},
+						labelClassName: fields_module_default.label,
+						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("input", {
+		...controlProps,
+		type: "checkbox",
+		checked: value === true || value === "true",
+		className: fields_module_default.checkbox,
+		onChange: (e) => {
+			onChange(e.target.checked);
+		}
+	});
+	if (kind === "select") return /* @__PURE__ */ jsx("select", {
+		...controlProps,
+		value: rawValue,
+		className: fields_module_default.control,
+		onChange: (e) => commitIfChanged(e.target.value),
+		children: (binding.options ?? []).map((option) => /* @__PURE__ */ jsx("option", {
+			value: option.value,
+			children: option.label
+		}, option.value))
+	});
+	if (kind === "color") return /* @__PURE__ */ jsx(ColorField, {
+		...controlProps,
+		value: rawValue,
+		onChange: commitIfChanged
+	});
+	if (kind === "date" || kind === "datetime" || kind === "time") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("input", {
+		...controlProps,
+		type: kind === "datetime" ? "datetime-local" : kind,
+		value: rawValue,
+		className: fields_module_default.control,
+		onChange: (e) => validateAndCommit(e.target.value)
+	}), /* @__PURE__ */ jsx(FieldError, {
+		id: errorId,
+		message: validationError
+	})] });
+	if (kind === "url" || kind === "email" || kind === "tel") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("input", {
+		...controlProps,
+		type: kind,
+		value: text,
+		className: fields_module_default.control,
+		onChange: (e) => setText(e.target.value),
+		placeholder: kind === "url" ? messages.panel.urlPlaceholder : kind === "email" ? messages.panel.emailPlaceholder : messages.panel.telPlaceholder,
+		onBlur: (e) => validateAndCommit(e.target.value.trim())
+	}), /* @__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,
+		className: fields_module_default.control,
+		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("textarea", {
+		...controlProps,
+		rows: 2,
+		value: text,
+		className: fields_module_default.control,
+		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: panel_module_default.bindings,
+				children: bindings.map((binding) => /* @__PURE__ */ jsx("div", {
+					className: panel_module_default.binding,
+					children: /* @__PURE__ */ jsx(LabeledField, {
+						binding,
+						labelClassName: panel_module_default.bindingLabel,
+						label: /* @__PURE__ */ jsxs(Fragment, { children: [binding.label, /* @__PURE__ */ jsxs("span", {
+							className: panel_module_default.bindingProperty,
+							children: [
+								"(",
+								binding.property,
+								")"
+							]
+						})] }),
+						children: /* @__PURE__ */ jsx(Field, {
+							binding,
+							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("p", {
+		className: panel_module_default.empty,
+		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: panel_module_default.panel,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: panel_module_default.header,
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: panel_module_default.title,
+					children: item.name
+				}), /* @__PURE__ */ jsxs("div", {
+					className: panel_module_default.actions,
+					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, {
+							tone: "danger",
+							icon: /* @__PURE__ */ jsx(Trash, {}),
+							onClick: () => onDelete(item.id),
+							"aria-label": messages.section.delete
+						})
+					]
+				})]
+			}),
+			readOnly && /* @__PURE__ */ jsx("span", {
+				role: "status",
+				className: panel_module_default.readOnly,
+				children: messages.panel.readOnly
+			}),
+			!groups.length && /* @__PURE__ */ jsx("span", {
+				className: panel_module_default.note,
+				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: panel_module_default.element,
+						header: groups.length > 1 && /* @__PURE__ */ jsxs("div", {
+							className: panel_module_default.elementHeader,
+							children: [/* @__PURE__ */ jsx("code", {
+								className: panel_module_default.elementTag,
+								children: element.tagName
+							}), element.text && /* @__PURE__ */ jsx("span", {
+								className: panel_module_default.elementText,
+								children: element.text
+							})]
+						}),
+						bindings: group,
+						onNodeChange
+					}, group[0].id);
+				})
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/dnd/split-panes.module.css
+var split_panes_module_default = {
+	"center": "s-4F9W_center",
+	"container": "s-4F9W_container",
+	"handle": "s-4F9W_handle",
+	"pane": "s-4F9W_pane"
+};
+//#endregion
+//#region src/components/dnd/split-panes.tsx
+const DEFAULT_SIZE = 20;
+const MIN_SIZE = 15;
+const MAX_SIZE = 35;
+const KEYBOARD_STEP = 2;
+const clampSize = (size) => {
+	if (size < MIN_SIZE / 2) return 0;
+	return Math.min(MAX_SIZE, Math.max(MIN_SIZE, size));
+};
+const SplitPanes = ({ start, center, end, labels }) => {
+	const containerRef = useRef(null);
+	const [sizes, setSizes] = useState({
+		start: DEFAULT_SIZE,
+		end: DEFAULT_SIZE
+	});
+	const restoreRef = useRef({
+		start: DEFAULT_SIZE,
+		end: DEFAULT_SIZE
+	});
+	const resize = (side, size) => {
+		if (size > 0) restoreRef.current[side] = size;
+		setSizes((prev) => ({
+			...prev,
+			[side]: size
+		}));
+	};
+	const onPointerDown = (side) => (e) => {
+		const container = containerRef.current;
+		if (!container || e.button !== 0) return;
+		e.preventDefault();
+		const handle = e.currentTarget;
+		const width = container.getBoundingClientRect().width;
+		const startX = e.clientX;
+		const startSize = sizes[side];
+		handle.setPointerCapture(e.pointerId);
+		const onMove = (move) => {
+			const delta = (move.clientX - startX) / width * 100;
+			resize(side, clampSize(startSize + (side === "start" ? delta : -delta)));
+		};
+		const onUp = () => {
+			handle.removeEventListener("pointermove", onMove);
+			handle.removeEventListener("pointerup", onUp);
+			handle.removeEventListener("pointercancel", onUp);
+		};
+		handle.addEventListener("pointermove", onMove);
+		handle.addEventListener("pointerup", onUp);
+		handle.addEventListener("pointercancel", onUp);
+	};
+	const onKeyDown = (side) => (e) => {
+		const grow = side === "start" ? "ArrowRight" : "ArrowLeft";
+		const shrink = side === "start" ? "ArrowLeft" : "ArrowRight";
+		const size = sizes[side];
+		if (e.key === grow || e.key === shrink) {
+			e.preventDefault();
+			const step = e.key === grow ? KEYBOARD_STEP : -2;
+			resize(side, Math.min(MAX_SIZE, Math.max(MIN_SIZE, size + step)));
+			return;
+		}
+		if (e.key === "Home" || e.key === "End") {
+			e.preventDefault();
+			resize(side, e.key === "Home" ? MIN_SIZE : MAX_SIZE);
+			return;
+		}
+		if (e.key === "Enter") {
+			e.preventDefault();
+			resize(side, size > 0 ? 0 : restoreRef.current[side]);
+		}
+	};
+	const handle = (side) => /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		tabIndex: 0,
+		"aria-orientation": "vertical",
+		"aria-label": labels[side],
+		"aria-valuenow": Math.round(sizes[side]),
+		"aria-valuemin": 0,
+		"aria-valuemax": MAX_SIZE,
+		className: split_panes_module_default.handle,
+		onPointerDown: onPointerDown(side),
+		onKeyDown: onKeyDown(side),
+		onDoubleClick: () => resize(side, sizes[side] > 0 ? 0 : restoreRef.current[side])
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: split_panes_module_default.container,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: split_panes_module_default.pane,
+				style: { flexBasis: `${sizes.start}%` },
+				hidden: sizes.start === 0,
+				children: start
+			}),
+			handle("start"),
+			/* @__PURE__ */ jsx("div", {
+				className: split_panes_module_default.center,
+				children: center
+			}),
+			handle("end"),
+			/* @__PURE__ */ jsx("div", {
+				className: split_panes_module_default.pane,
+				style: { flexBasis: `${sizes.end}%` },
+				hidden: sizes.end === 0,
+				children: end
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/dnd/layout.tsx
+const PaletteItems = ({ subject }) => {
+	const { palette: { items, onAdd }, isMobile } = useDndRegions(subject);
+	return /* @__PURE__ */ jsx("div", {
+		className: layout_module_default.paletteItems,
+		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(layout_module_default.palette, 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(layout_module_default.canvas, className),
+		"data-frame-container": true,
+		style: {
+			isolation: "isolate",
+			contain: "layout style",
+			transform: "translateZ(0)",
+			...style
+		},
+		...restProps,
+		children: [canvas, !documentError && /* @__PURE__ */ jsx("div", {
+			className: layout_module_default.pickerDock,
+			children: /* @__PURE__ */ jsx("div", {
+				className: layout_module_default.picker,
+				children: /* @__PURE__ */ jsx(Button, {
+					icon: /* @__PURE__ */ jsx(Crosshair, {}),
+					tone: "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(layout_module_default.panel, 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__ */ jsx(SplitPanes, {
+			start: palette ?? /* @__PURE__ */ jsx(Palette, {}),
+			center: /* @__PURE__ */ jsx(Canvas, {}),
+			end: panel ?? /* @__PURE__ */ jsx(Panel, {}),
+			labels: {
+				start: messages.canvas.resizePalette,
+				end: messages.canvas.resizePanel
+			}
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			variant: "solid",
+			tone: "primary",
+			shape: "circle",
+			icon: /* @__PURE__ */ jsx(LayoutGrid, {}),
+			"aria-label": messages.canvas.palette,
+			className: layout_module_default.paletteButton,
+			onClick: () => setPaletteOpen(true)
+		}),
+		/* @__PURE__ */ jsx(Drawer, {
+			open: isMobile && paletteOpen,
+			onClose: () => setPaletteOpen(false),
+			title: messages.canvas.palette,
+			closeLabel: messages.canvas.close,
+			children: palette ?? /* @__PURE__ */ jsx(PaletteItems, { subject: "<Live.Dnd.Layout>" })
+		}),
+		/* @__PURE__ */ jsx(Drawer, {
+			open: isMobile && Boolean(selectedId),
+			onClose: clearSelection,
+			title: messages.canvas.properties,
+			closeLabel: messages.canvas.close,
+			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: canvas_module_default.stale,
+				children: messages.canvas.stale
+			}),
+			/* @__PURE__ */ jsx(Droppable, {
+				className: cn(!sections.length && canvas_module_default.fill),
+				children: !sections.length ? /* @__PURE__ */ jsx("div", {
+					className: canvas_module_default.empty,
+					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(layout_module_default.root, 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 { Panel as a, useDndChildren as c, useDndLayout as d, useDndPalette as f, DraggableItem as h, Palette as i, resolvePanelBindings as l, useDndInspector as m, Canvas as n, Field as o, useDndPanel as p, Layout as r, useDndItems as s, Dnd as t, withPanelCommit as u };
+
+//# sourceMappingURL=dnd-BvjEDo-x.js.map