@jxsuite/studio 0.7.0 → 0.8.0

package/src/studio.js

@@ -11,32 +11,20 @@ import {
   hoverNode,
   insertNode,
   removeNode,
-  moveNode,
   updateProperty,
-  updateStyle,
-  updateAttribute,
   updateDef,
-  updateMedia,
   pushDocument,
   popDocument,
-  updateProp,
-  addSwitchCase,
-  removeSwitchCase,
-  renameSwitchCase,
-  applyMutation,
   getNodeAtPath,
-  nodeLabel,
   pathsEqual,
   parentElementPath,
   childIndex,
   isAncestor,
   canvasWrap,
-  leftPanel,
   toolbarEl,
   elToPath,
   canvasPanels,
   VOID_ELEMENTS,
-  debouncedStyleCommit,
   stripEventHandlers,
   registerRenderer,
   render,
@@ -50,9 +38,7 @@ import {
   notify,
   projectState,
   setProjectState,
-  updateFrontmatter,
   updateUi,
-  updateSession,
   setUpdateSessionFn,
   setGetDocFn,
   setGetSessionFn,
@@ -71,23 +57,12 @@ import {
   getActiveElement,
   isEditableBlock,
   isInlineInContext,
-  getInlineActions,
 } from "./editor/inline-edit.js";
 import {
   showSlashMenu as sharedShowSlashMenu,
   dismissSlashMenu as sharedDismissSlashMenu,
   isSlashMenuOpen,
 } from "./editor/slash-menu.js";
-import { toggleInlineFormat, isTagActiveInSelection } from "./editor/inline-format.js";
-import {
-  camelToLabel,
-  attrLabel,
-  inferInputType,
-  findCollectionSchema,
-  friendlyNameToVar,
-  varDisplayName,
-  parseCemType,
-} from "./utils/studio-utils.js";
 import {
   renderStatusbar,
   statusMessage,
@@ -121,10 +96,9 @@ import {
   applyOverridesToCanvas,
 } from "./utils/canvas-media.js";
 import { createDevServerPlatform } from "./platforms/devserver.js";
-import { codeService, setLintMarkers, getFunctionArgs } from "./services/code-services.js";
+import { codeService } from "./services/code-services.js";
 import {
   getEffectiveMedia,
-  getEffectiveStyle,
   getEffectiveImports,
   getEffectiveElements,
   getEffectiveHead,
@@ -132,8 +106,6 @@ import {
 import {
   defCategory,
   defBadgeLabel,
-  isCustomElementDoc,
-  collectCssParts,
   resolveDefaultForCanvas,
   renderSignalsTemplate,
 } from "./panels/signals-panel.js";
@@ -144,25 +116,16 @@ import {
 } from "./files/components.js";
 
 import {
-  draggable,
   dropTargetForElements,
   monitorForElements,
 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import {
-  attachInstruction,
-  extractInstruction,
-} from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 
 import { html, render as litRender, nothing } from "lit-html";
-import { live } from "lit-html/directives/live.js";
 import { ref } from "lit-html/directives/ref.js";
 import { styleMap } from "lit-html/directives/style-map.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
 
 import webdata from "../data/webdata.json";
-import htmlMeta from "../data/html-meta.json";
-import stylebookMeta from "../data/stylebook-meta.json";
 import { renderDataExplorerTemplate } from "./panels/data-explorer.js";
 import { renderGitPanel } from "./panels/git-panel.js";
 
@@ -170,22 +133,31 @@ import { renderGitPanel } from "./panels/git-panel.js";
 // Explicit class imports + registration — bare side-effect imports are tree-shaken
 // by Bun's bundler despite sideEffects declarations in Spectrum's package.json.
 import { components as _swc } from "./ui/spectrum.js"; // eslint-disable-line no-unused-vars
-import { renderFieldRow } from "./ui/field-row.js";
 import "./ui/panel-resize.js";
 import { showContextMenu, dismissContextMenu } from "./editor/context-menu.js";
-import { convertToComponent } from "./editor/convert-to-component.js";
 import { initShortcuts } from "./editor/shortcuts.js";
+import * as insertionHelper from "./editor/insertion-helper.js";
 import { renderActivityBar } from "./panels/activity-bar.js";
 import { renderBrowse } from "./browse/browse.js";
-import { renderCollectionsEditor } from "./settings/collections-editor.js";
-import { renderDefsEditor } from "./settings/defs-editor.js";
 import * as toolbarPanel from "./panels/toolbar.js";
 import * as overlaysPanel from "./panels/overlays.js";
 import * as rightPanelMod from "./panels/right-panel.js";
 import * as leftPanelMod from "./panels/left-panel.js";
-import { mediaDisplayName } from "./panels/shared.js";
-import { initCssData, getCssInitialMap } from "./panels/style-utils.js";
-import { widgetForType } from "./panels/style-inputs.js";
+import { renderStylebookMode, renderStylebookOverlays } from "./panels/stylebook-panel.js";
+import {
+  registerLayersDnD,
+  registerComponentsDnD,
+  registerElementsDnD,
+  applyDropInstruction,
+} from "./panels/dnd.js";
+import { mediaDisplayName, defaultDef } from "./panels/shared.js";
+import { renderFunctionEditor, registerFunctionCompletions } from "./panels/editors.js";
+import {
+  renderBlockActionBar,
+  dismissLinkPopover,
+  initBlockActionBar,
+} from "./panels/block-action-bar.js";
+import { initCssData } from "./panels/style-utils.js";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 
 // ─── Globals ──────────────────────────────────────────────────────────────────
@@ -785,8 +757,16 @@ overlaysPanel.mount({
   getActivePanel,
 });
 
+initBlockActionBar({
+  getCanvasMode: () => canvasMode,
+  findCanvasElement,
+  getActivePanel,
+  navigateToComponent,
+  createFloatingContainer,
+});
+
 rightPanelMod.mount({
-  propertiesSidebarTemplate,
+  navigateToComponent,
   getCanvasMode: () => canvasMode,
   renderCanvas: () => renderCanvas(),
   updateForcedPseudoPreview,
@@ -804,8 +784,6 @@ leftPanelMod.mount({
   defCategory,
   defBadgeLabel,
   navigateToComponent,
-  selectStylebookTag,
-  stylebookMeta,
   webdata,
   defaultDef,
   registerLayersDnD,
@@ -1177,7 +1155,15 @@ function renderCanvas() {
 
   // Settings mode: render element catalog with panzoom surface
   if (canvasMode === "settings") {
-    renderSettings();
+    renderStylebookMode({
+      canvasPanelTemplate,
+      applyTransform,
+      observeCenterUntilStable,
+      renderZoomIndicator,
+      updateActivePanelHeaders,
+      overlayBoxDescriptor,
+      effectiveZoom,
+    });
     return;
   }
 
@@ -1965,403 +1951,6 @@ function getActivePanel() {
   return canvasPanels[0];
 }
 
-// ── Floating inline toolbar ────────────────────────────────────────────────
-
-/** Pre-built icon templates for inline format buttons (avoids unsafeStatic) */
-const formatIconMap = /** @type {Record<string, any>} */ ({
-  "sp-icon-text-bold": html`<sp-icon-text-bold slot="icon"></sp-icon-text-bold>`,
-  "sp-icon-text-italic": html`<sp-icon-text-italic slot="icon"></sp-icon-text-italic>`,
-  "sp-icon-text-underline": html`<sp-icon-text-underline slot="icon"></sp-icon-text-underline>`,
-  "sp-icon-text-strikethrough": html`<sp-icon-text-strikethrough
-    slot="icon"
-  ></sp-icon-text-strikethrough>`,
-  "sp-icon-text-superscript": html`<sp-icon-text-superscript
-    slot="icon"
-  ></sp-icon-text-superscript>`,
-  "sp-icon-text-subscript": html`<sp-icon-text-subscript slot="icon"></sp-icon-text-subscript>`,
-  "sp-icon-code": html`<sp-icon-code slot="icon"></sp-icon-code>`,
-  "sp-icon-link": html`<sp-icon-link slot="icon"></sp-icon-link>`,
-});
-
-/**
- * Prevent the bar from stealing focus from contenteditable
- *
- * @param {any} e
- */
-function onBarMousedown(e) {
-  if (e.target.closest("sp-textfield")) return;
-  if (e.target.closest(".bar-drag-handle")) return;
-  e.preventDefault();
-}
-
-/** Saved selection range for format button mousedown→click flow */
-function captureSelectionRange() {
-  const sel = window.getSelection();
-  if (sel && sel.rangeCount) view.savedRange = sel.getRangeAt(0).cloneRange();
-}
-
-/**
- * @param {any} e
- * @param {any} action
- */
-function onFormatClick(e, action) {
-  e.stopPropagation();
-  if (action.command === "link") {
-    showLinkPopover(e.target.closest("sp-action-button"));
-  } else if (view.savedRange) {
-    const sel = /** @type {any} */ (window.getSelection());
-    const anchor = view.savedRange.startContainer;
-    const editableRoot = (
-      anchor?.nodeType === Node.ELEMENT_NODE ? anchor : anchor?.parentElement
-    )?.closest("[contenteditable]");
-    if (editableRoot) {
-      editableRoot.focus();
-      sel.removeAllRanges();
-      sel.addRange(view.savedRange);
-      applyInlineFormat(action);
-    }
-  }
-}
-
-function renderParentSelector() {
-  const pPath = parentElementPath(S.selection);
-  if (!pPath) return nothing;
-  const parentNode = getNodeAtPath(S.document, pPath);
-  return html`
-    <sp-action-button
-      size="xs"
-      quiet
-      title="Select parent: ${nodeLabel(parentNode)}"
-      @click=${(/** @type {any} */ e) => {
-        e.stopPropagation();
-        update(selectNode(S, pPath));
-      }}
-    >
-      <sp-icon-back slot="icon"></sp-icon-back>
-    </sp-action-button>
-  `;
-}
-
-function renderMoveArrows() {
-  const idx = /** @type {number} */ (childIndex(S.selection));
-  const pPath = parentElementPath(S.selection);
-  const parentNode = getNodeAtPath(S.document, /** @type {any} */ (pPath));
-  const siblings = parentNode?.children;
-  return html`
-    <sp-action-button
-      size="xs"
-      quiet
-      title="Move up"
-      ?disabled=${idx <= 0}
-      @click=${(/** @type {any} */ e) => {
-        e.stopPropagation();
-        moveSelectionUp();
-      }}
-    >
-      <sp-icon-arrow-up slot="icon"></sp-icon-arrow-up>
-    </sp-action-button>
-    <sp-action-button
-      size="xs"
-      quiet
-      title="Move down"
-      ?disabled=${!siblings || idx >= siblings.length - 1}
-      @click=${(/** @type {any} */ e) => {
-        e.stopPropagation();
-        moveSelectionDown();
-      }}
-    >
-      <sp-icon-arrow-down slot="icon"></sp-icon-arrow-down>
-    </sp-action-button>
-  `;
-}
-
-/**
- * Apply an inline format action.
- *
- * @param {any} action
- */
-function applyInlineFormat(action) {
-  // Map commands to semantic tags
-  /** @type {Record<string, any>} */
-  const cmdToTag = {
-    bold: "strong",
-    italic: "em",
-    underline: "u",
-    strikethrough: "del",
-    superscript: "sup",
-    subscript: "sub",
-    code: "code",
-  };
-
-  const tag = cmdToTag[action.command];
-  if (tag) {
-    const editableRoot = getActiveElement();
-    toggleInlineFormat(tag, editableRoot);
-  }
-  requestAnimationFrame(() => renderBlockActionBar());
-}
-
-/** Show a link URL popover anchored to a toolbar button. */
-view.linkPopoverHost = document.createElement("div");
-view.linkPopoverHost.style.display = "contents";
-(document.querySelector("sp-theme") || document.body).appendChild(view.linkPopoverHost);
-
-/** Dismiss the link popover if open. */
-function dismissLinkPopover() {
-  if (view.linkPopoverHost) litRender(nothing, view.linkPopoverHost);
-}
-
-/** @param {any} anchorBtn */
-function showLinkPopover(anchorBtn) {
-  // Dismiss existing
-  litRender(nothing, view.linkPopoverHost);
-
-  const sel = window.getSelection();
-  /** @type {any} */
-  let existingLink = null;
-  if (sel?.rangeCount) {
-    /** @type {any} */
-    let node = sel.anchorNode;
-    while (node && node !== document.body) {
-      if (node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === "a") {
-        existingLink = node;
-        break;
-      }
-      node = node.parentNode;
-    }
-  }
-
-  const rect = anchorBtn.getBoundingClientRect();
-
-  const onApply = () => {
-    const field = view.linkPopoverHost.querySelector("sp-textfield");
-    const url = /** @type {any} */ (field)?.value;
-    if (existingLink) {
-      existingLink.setAttribute("href", url);
-    } else if (url) {
-      document.execCommand("createLink", false, url);
-    }
-    litRender(nothing, view.linkPopoverHost);
-    renderBlockActionBar();
-  };
-
-  const onRemove = () => {
-    const frag = document.createDocumentFragment();
-    while (existingLink.firstChild) frag.appendChild(existingLink.firstChild);
-    existingLink.parentNode.replaceChild(frag, existingLink);
-    litRender(nothing, view.linkPopoverHost);
-    renderBlockActionBar();
-  };
-
-  const onKeydown = (/** @type {any} */ e) => {
-    if (e.key === "Enter") onApply();
-    else if (e.key === "Escape") {
-      litRender(nothing, view.linkPopoverHost);
-    }
-  };
-
-  litRender(
-    html`
-      <sp-popover
-        class="link-popover"
-        open
-        style="position:fixed; left:${rect.left}px; top:${rect.bottom + 4}px; z-index:30"
-      >
-        <sp-textfield
-          placeholder="https://..."
-          size="s"
-          style="width:200px"
-          value=${existingLink?.getAttribute("href") || ""}
-          @keydown=${onKeydown}
-        ></sp-textfield>
-        <sp-action-button size="xs" @click=${onApply}>
-          ${existingLink ? "Update" : "Apply"}
-        </sp-action-button>
-        ${existingLink
-          ? html` <sp-action-button size="xs" @click=${onRemove}>Remove</sp-action-button> `
-          : nothing}
-      </sp-popover>
-    `,
-    view.linkPopoverHost,
-  );
-
-  requestAnimationFrame(
-    () =>
-      /** @type {HTMLElement | null} */ (
-        view.linkPopoverHost?.querySelector("sp-textfield")
-      )?.focus(),
-  );
-}
-
-/** Move the selected node up (swap with previous sibling). */
-function moveSelectionUp() {
-  if (!S.selection || S.selection.length < 2) return;
-  const idx = /** @type {number} */ (childIndex(S.selection));
-  if (idx <= 0) return;
-  const pPath = /** @type {any} */ (parentElementPath(S.selection));
-  update(moveNode(S, S.selection, pPath, idx - 1));
-  session = { ...session, selection: [...pPath, "children", idx - 1] };
-  S = toFlat(doc, session);
-  renderOverlays();
-}
-
-/** Move the selected node down (swap with next sibling). */
-function moveSelectionDown() {
-  if (!S.selection || S.selection.length < 2) return;
-  const idx = /** @type {number} */ (childIndex(S.selection));
-  const pPath = /** @type {any} */ (parentElementPath(S.selection));
-  const parentNode = getNodeAtPath(S.document, pPath);
-  const siblings = parentNode?.children;
-  if (!siblings || idx >= siblings.length - 1) return;
-  update(moveNode(S, S.selection, pPath, idx + 2));
-  session = { ...session, selection: [...pPath, "children", idx + 1] };
-  S = toFlat(doc, session);
-  renderOverlays();
-}
-
-/**
- * Render the unified block action bar above the selected element. Combines tag indicator, drag
- * handle, move arrows, and inline formatting.
- */
-function renderBlockActionBar() {
-  // Ensure persistent render container exists
-  if (!view.blockActionBarEl) {
-    view.blockActionBarEl = createFloatingContainer();
-  }
-
-  // Tear down drag if it was active
-  if (view.selDragCleanup) {
-    view.selDragCleanup();
-    view.selDragCleanup = null;
-  }
-
-  if (!S.selection || (canvasMode !== "design" && canvasMode !== "edit")) {
-    litRender(nothing, view.blockActionBarEl);
-    return;
-  }
-
-  const activePanel = getActivePanel();
-  if (!activePanel) {
-    litRender(nothing, view.blockActionBarEl);
-    return;
-  }
-  const el = findCanvasElement(S.selection, activePanel.canvas);
-  const node = el && getNodeAtPath(S.document, S.selection);
-  if (!el || !node) {
-    litRender(nothing, view.blockActionBarEl);
-    return;
-  }
-
-  const tag = (node.tagName ?? "div").toLowerCase();
-  const elRect = el.getBoundingClientRect();
-  const topPos = elRect.top < 80 ? elRect.bottom + 4 : elRect.top - 38;
-
-  // Inline format state
-  const inlineEditing = isEditing() || el.contentEditable === "true";
-  const actions = getInlineActions(tag) || [];
-  const showFormat = inlineEditing && actions.length > 0;
-  const activeValues = showFormat
-    ? actions.filter((a) => isTagActiveInSelection(a.tag, el)).map((a) => a.tag)
-    : [];
-
-  litRender(
-    html`
-      <div
-        class="block-action-bar"
-        style="left:${elRect.left}px; top:${topPos}px"
-        @mousedown=${onBarMousedown}
-      >
-        ${S.selection.length >= 2 ? renderParentSelector() : nothing}
-
-        <span class="bar-tag">${node.$id || (node.tagName ?? "div")}</span>
-
-        ${S.selection.length >= 2
-          ? html`<span class="bar-drag-handle" title="Drag to reorder">⡇</span>`
-          : nothing}
-        ${S.selection.length >= 2 ? renderMoveArrows() : nothing}
-        ${S.selection.length >= 2 && node.tagName
-          ? (() => {
-              const isComp =
-                node.tagName.includes("-") &&
-                componentRegistry.some((/** @type {any} */ c) => c.tagName === node.tagName);
-              if (isComp) {
-                const comp = componentRegistry.find(
-                  (/** @type {any} */ c) => c.tagName === node.tagName,
-                );
-                return html`<sp-action-button
-                  size="xs"
-                  quiet
-                  title="Edit Component"
-                  @click=${() => navigateToComponent(comp.path)}
-                  ><sp-icon-edit slot="icon" size="xs"></sp-icon-edit
-                ></sp-action-button>`;
-              }
-              return html`<sp-action-button
-                size="xs"
-                quiet
-                title="Convert to Component"
-                @click=${() => convertToComponent(S)}
-                ><sp-icon-box slot="icon" size="xs"></sp-icon-box
-              ></sp-action-button>`;
-            })()
-          : nothing}
-        ${showFormat
-          ? html`
-              <sp-divider size="s" vertical></sp-divider>
-              <sp-action-group
-                size="xs"
-                compact
-                emphasized
-                selects="multiple"
-                selected=${activeValues.length ? JSON.stringify(activeValues) : nothing}
-              >
-                ${actions.map(
-                  (action) => html`
-                    <sp-action-button
-                      size="xs"
-                      value=${action.tag}
-                      title="${action.label}${action.shortcut ? ` (${action.shortcut})` : ""}"
-                      @mousedown=${captureSelectionRange}
-                      @click=${(/** @type {any} */ e) => onFormatClick(e, action)}
-                    >
-                      ${formatIconMap[action.icon] ?? nothing}
-                    </sp-action-button>
-                  `,
-                )}
-              </sp-action-group>
-            `
-          : nothing}
-      </div>
-    `,
-    view.blockActionBarEl,
-  );
-
-  // Post-render side effects
-  requestAnimationFrame(() => {
-    const bar = view.blockActionBarEl?.firstElementChild;
-    if (!bar) return;
-    // Clamp to window
-    const barRect = bar.getBoundingClientRect();
-    if (barRect.right > window.innerWidth) {
-      bar.style.left = `${Math.max(0, window.innerWidth - barRect.width)}px`;
-    }
-    // Attach drag handle
-    if (S.selection.length >= 2) {
-      const handle = bar.querySelector(".bar-drag-handle");
-      if (handle) {
-        if (view.selDragCleanup) {
-          view.selDragCleanup();
-          view.selDragCleanup = null;
-        }
-        view.selDragCleanup = draggable({
-          element: handle,
-          getInitialData: () => ({ type: "tree-node", path: S.selection }),
-        });
-      }
-    }
-  });
-}
-
 // ── Pseudo-state preview ──────────────────────────────────────────────────────
 // When a pseudo-selector (:hover, :focus, etc.) is active in the style sidebar,
 // force those styles onto the selected element so the user can see the result.
@@ -2690,6 +2279,24 @@ function registerPanelEvents(panel) {
     },
     opts,
   );
+
+  // Mount insertion helper — positioned via CSS Anchor Positioning
+  insertionHelper.mount({
+    getState: () => S,
+    update,
+    getCanvasMode: () => canvasMode,
+    withPanelPointerEvents,
+    effectiveZoom,
+    defaultDef,
+    insertNode,
+    selectNode,
+    parentElementPath,
+    childIndex,
+    getNodeAtPath,
+    elToPath,
+    panel,
+  });
+  view.canvasEventCleanups.push(() => insertionHelper.unmount());
 }
 
 // ─── Inline editing bridge ────────────────────────────────────────────────────
@@ -3197,2907 +2804,24 @@ function renderLeftPanel() {
   leftPanelMod.render();
 }
 
-/** Register DnD on layer rows after litRender — called from left-panel.js */
-function registerLayersDnD() {
-  requestAnimationFrame(() => {
-    const container = /** @type {any} */ (leftPanel)?.querySelector(".layers-container");
-    if (!container) return;
-
-    container.querySelectorAll("[data-dnd-row]").forEach(
-      /** @param {any} row */ (row) => {
-        const rowPath = /** @type {string} */ (row.dataset.path)
-          .split("/")
-          .map((/** @type {any} */ s) => (/^\d+$/.test(s) ? parseInt(s) : s));
-        const rowDepth = parseInt(/** @type {string} */ (row.dataset.dndDepth)) || 0;
-        const isVoid = row.hasAttribute("data-dnd-void");
-
-        const cleanup = combine(
-          draggable({
-            element: row,
-            canDrag(/** @type {any} */ { element: _el, input }) {
-              // Prevent drag when clicking action buttons
-              const target = /** @type {HTMLElement} */ (
-                document.elementFromPoint(input.clientX, input.clientY)
-              );
-              if (target?.closest(".layer-actions")) return false;
-              return true;
-            },
-            getInitialData() {
-              return { type: "tree-node", path: rowPath };
-            },
-            onDragStart() {
-              row.classList.add("dragging");
-              view.layerDragSourceHeight = row.offsetHeight;
-            },
-            onDrop() {
-              row.classList.remove("dragging");
-            },
-          }),
-          dropTargetForElements({
-            element: row,
-            canDrop(/** @type {any} */ { source }) {
-              const srcPath = source.data.path;
-              if (srcPath && isAncestor(srcPath, rowPath)) return false;
-              return true;
-            },
-            getData(/** @type {any} */ { input, element }) {
-              return attachInstruction(
-                { path: rowPath },
-                /** @type {any} */ ({
-                  input,
-                  element,
-                  currentLevel: rowDepth,
-                  indentPerLevel: 16,
-                  block: isVoid ? ["make-child"] : [],
-                }),
-              );
-            },
-            onDragEnter(/** @type {any} */ { self }) {
-              showLayerDropGap(row, self.data, container);
-            },
-            onDrag(/** @type {any} */ { self }) {
-              showLayerDropGap(row, self.data, container);
-            },
-            onDragLeave() {
-              clearLayerDropGap(container);
-            },
-            onDrop() {
-              clearLayerDropGap(container);
-            },
-          }),
-        );
-        view.dndCleanups.push(cleanup);
-      },
-    );
-
-    // Global monitor
-    const monitorCleanup = monitorForElements({
-      onDrop(/** @type {any} */ { source, location }) {
-        clearLayerDropGap(container);
-        const target = location.current.dropTargets[0];
-        if (!target) return;
-        const instruction = extractInstruction(target.data);
-        if (!instruction || instruction.type === "instruction-blocked") return;
-        const srcData = source.data;
-        const targetPath = target.data.path;
-        applyDropInstruction(instruction, srcData, targetPath);
-      },
-    });
-    view.dndCleanups.push(monitorCleanup);
-  });
-}
-
-/** Register DnD on component rows — called from renderLeftPanel when tab=components */
-function registerComponentsDnD() {
-  requestAnimationFrame(() => {
-    const container = /** @type {any} */ (leftPanel)?.querySelector(".components-section");
-    if (!container) return;
-
-    container.querySelectorAll("[data-component-tag]").forEach(
-      /** @param {any} row */ (row) => {
-        const tagName = row.dataset.componentTag;
-        if (!tagName) return;
-        const comp = componentRegistry.find(/** @param {any} c */ (c) => c.tagName === tagName);
-        if (!comp) return;
-
-        // Fill preview with live rendered component
-        const preview = row.querySelector(".element-card-preview");
-        if (preview && !preview.querySelector(tagName)) {
-          renderComponentPreview(comp).then((el) => {
-            preview.textContent = "";
-            preview.appendChild(el);
-          });
-        }
-
-        const instanceDef = {
-          tagName: comp.tagName,
-          $props: Object.fromEntries(
-            comp.props.map((/** @type {any} */ p) => [
-              p.name,
-              p.default !== undefined ? p.default : "",
-            ]),
-          ),
-        };
-        const cleanup = draggable({
-          element: row,
-          getInitialData() {
-            return { type: "block", fragment: structuredClone(instanceDef) };
-          },
-        });
-        view.dndCleanups.push(cleanup);
-      },
-    );
-  });
-}
-
-/** @type {any} */
-
-/**
- * @param {any} rowEl
- * @param {any} data
- * @param {any} container
- */
-function showLayerDropGap(rowEl, data, container) {
-  const instruction = extractInstruction(data);
-
-  // Clear previous drop-target highlight
-  if (view._currentDropTargetRow && view._currentDropTargetRow !== rowEl) {
-    view._currentDropTargetRow.classList.remove("drop-target");
-  }
-
-  if (!instruction || instruction.type === "instruction-blocked") {
-    clearLayerDropGap(container);
-    return;
-  }
-
-  if (instruction.type === "make-child") {
-    clearLayerDropGap(container);
-    rowEl.classList.add("drop-target");
-    view._currentDropTargetRow = rowEl;
-    return;
-  }
-
-  rowEl.classList.remove("drop-target");
-  view._currentDropTargetRow = rowEl;
-
-  // Shift rows to create gap
-  const rows = Array.from(container.querySelectorAll(".layers-tree .layer-row"));
-  const targetIdx = rows.indexOf(rowEl);
-  const gap = view.layerDragSourceHeight;
-
-  for (let i = 0; i < rows.length; i++) {
-    if (rows[i].classList.contains("dragging")) continue;
-    if (instruction.type === "reorder-above") {
-      rows[i].style.transform = i >= targetIdx ? `translateY(${gap}px)` : "";
-    } else {
-      rows[i].style.transform = i > targetIdx ? `translateY(${gap}px)` : "";
-    }
-  }
-}
-
-/** @param {any} container */
-function clearLayerDropGap(container) {
-  if (view._currentDropTargetRow) {
-    view._currentDropTargetRow.classList.remove("drop-target");
-    view._currentDropTargetRow = null;
-  }
-  const rows = container.querySelectorAll(".layers-tree .layer-row");
-  for (const r of rows) r.style.transform = "";
-}
-
-/**
- * Select a tag in the stylebook — shared by layers panel click and canvas click.
- *
- * @param {string} tag
- * @param {string | null} [media]
- */
-function selectStylebookTag(tag, media) {
-  updateSession({
-    selection: [],
-    ui: {
-      stylebookSelection: tag,
-      rightTab: "style",
-      activeSelector: `& ${tag}`,
-      ...(media !== undefined ? { activeMedia: media } : {}),
-    },
-  });
-  renderStylebookOverlays();
-  requestAnimationFrame(() => {
-    if (canvasPanels.length > 0) {
-      const el = findStylebookEl(canvasPanels[0].canvas, tag);
-      if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
-    }
-  });
-}
-
-/**
- * Apply a DnD instruction to the state
- *
- * @param {any} instruction
- * @param {any} srcData
- * @param {any} targetPath
- */
-function applyDropInstruction(instruction, srcData, targetPath) {
-  if (srcData.type === "tree-node") {
-    const fromPath = srcData.path;
-    const targetParent = /** @type {any} */ (parentElementPath(targetPath));
-    const targetIdx = /** @type {number} */ (childIndex(targetPath));
-
-    switch (instruction.type) {
-      case "reorder-above":
-        update(moveNode(S, fromPath, targetParent, targetIdx));
-        break;
-      case "reorder-below":
-        update(moveNode(S, fromPath, targetParent, targetIdx + 1));
-        break;
-      case "make-child": {
-        const target = getNodeAtPath(S.document, targetPath);
-        const len = target?.children?.length || 0;
-        update(moveNode(S, fromPath, targetPath, len));
-        break;
-      }
-    }
-  } else if (srcData.type === "block") {
-    const targetParent = /** @type {any} */ (parentElementPath(targetPath));
-    const targetIdx = /** @type {number} */ (childIndex(targetPath));
-
-    switch (instruction.type) {
-      case "reorder-above":
-        update(insertNode(S, targetParent, targetIdx, structuredClone(srcData.fragment)));
-        break;
-      case "reorder-below":
-        update(insertNode(S, targetParent, targetIdx + 1, structuredClone(srcData.fragment)));
-        break;
-      case "make-child": {
-        const target = getNodeAtPath(S.document, targetPath);
-        const len = target?.children?.length || 0;
-        update(insertNode(S, targetPath, len, structuredClone(srcData.fragment)));
-        break;
-      }
-    }
-
-    // Auto-import to $elements if the dropped block is a custom component
-    const tag = srcData.fragment?.tagName;
-    if (tag && tag.includes("-")) {
-      const comp = componentRegistry.find((/** @type {any} */ c) => c.tagName === tag);
-      if (comp) {
-        const elements = S.document.$elements || [];
-        if (comp.source === "npm") {
-          // npm web component: add cherry-picked subpath specifier
-          const specifier = comp.modulePath ? `${comp.package}/${comp.modulePath}` : comp.package;
-          const alreadyImported = elements.some(
-            (/** @type {any} */ e) => e === specifier || e === comp.package,
-          );
-          if (!alreadyImported) {
-            S = applyMutation(S, (/** @type {any} */ doc) => {
-              if (!doc.$elements) doc.$elements = [];
-              doc.$elements.push(specifier);
-            });
-          }
-        } else {
-          // JX component: add $ref object
-          const alreadyImported = elements.some(
-            (/** @type {any} */ e) =>
-              e.$ref &&
-              (e.$ref === `./${comp.path}` || e.$ref.endsWith(comp.path.split("/").pop())),
-          );
-          if (!alreadyImported) {
-            const relPath = computeRelativePath(S.documentPath, comp.path);
-            S = applyMutation(S, (/** @type {any} */ doc) => {
-              if (!doc.$elements) doc.$elements = [];
-              doc.$elements.push({ $ref: relPath });
-            });
-          }
-        }
-      }
-    }
-  }
-}
+// ─── DnD registration: delegated to panels/dnd.js ───────────────────────────
 
-/**
- * Generate a sensible default Jx node for a given tag name
- *
- * @param {any} tag
- */
-function defaultDef(tag) {
-  /** @type {any} */
-  const def = { tagName: tag };
-  if (/^h[1-6]$/.test(tag)) def.textContent = "Heading";
-  else if (tag === "p") def.textContent = "Paragraph text";
-  else if (
-    tag === "span" ||
-    tag === "strong" ||
-    tag === "em" ||
-    tag === "small" ||
-    tag === "mark" ||
-    tag === "code" ||
-    tag === "abbr" ||
-    tag === "q" ||
-    tag === "sub" ||
-    tag === "sup" ||
-    tag === "time"
-  )
-    def.textContent = "Text";
-  else if (tag === "a") {
-    def.textContent = "Link";
-    def.attributes = { href: "#" };
-  } else if (tag === "button") def.textContent = "Button";
-  else if (tag === "label") def.textContent = "Label";
-  else if (tag === "legend") def.textContent = "Legend";
-  else if (tag === "caption") def.textContent = "Caption";
-  else if (tag === "summary") def.textContent = "Summary";
-  else if (
-    tag === "li" ||
-    tag === "dt" ||
-    tag === "dd" ||
-    tag === "th" ||
-    tag === "td" ||
-    tag === "option"
-  )
-    def.textContent = "Item";
-  else if (tag === "blockquote") def.textContent = "Quote";
-  else if (tag === "pre") def.textContent = "Preformatted text";
-  else if (tag === "input") def.attributes = { type: "text", placeholder: "Enter text..." };
-  else if (tag === "img") def.attributes = { src: "", alt: "Image" };
-  else if (tag === "iframe") def.attributes = { src: "" };
-  else if (tag === "select") def.children = [{ tagName: "option", textContent: "Option 1" }];
-  else if (tag === "ul" || tag === "ol") def.children = [{ tagName: "li", textContent: "Item" }];
-  else if (tag === "dl")
-    def.children = [
-      { tagName: "dt", textContent: "Term" },
-      { tagName: "dd", textContent: "Definition" },
-    ];
-  else if (tag === "table")
-    def.children = [
-      {
-        tagName: "thead",
-        children: [{ tagName: "tr", children: [{ tagName: "th", textContent: "Header" }] }],
-      },
-      {
-        tagName: "tbody",
-        children: [{ tagName: "tr", children: [{ tagName: "td", textContent: "Cell" }] }],
-      },
-    ];
-  else if (tag === "details")
-    def.children = [
-      { tagName: "summary", textContent: "Summary" },
-      { tagName: "p", textContent: "Detail content" },
-    ];
-  return def;
-}
+// ─── Stylebook ───────────────────────────────────────────────────────────────
+// Extracted to panels/stylebook-panel.js
 
-const unsafeTags = new Set(["script", "style", "link", "iframe", "object", "embed"]);
-
-function registerElementsDnD() {
-  requestAnimationFrame(() => {
-    const container = /** @type {any} */ (leftPanel)?.querySelector(".panel-body");
-    if (!container) return;
-    container.querySelectorAll("[data-block-tag]").forEach(
-      /** @param {any} row */ (row) => {
-        const tag = row.dataset.blockTag;
-        const preview = row.querySelector(".element-card-preview");
-        if (preview && !preview.firstChild) {
-          const el = document.createElement(unsafeTags.has(tag) ? "span" : tag);
-          el.textContent = tag;
-          preview.appendChild(el);
-        }
-        const def = defaultDef(tag);
-        const cleanup = draggable({
-          element: row,
-          getInitialData() {
-            return { type: "block", fragment: structuredClone(def) };
-          },
-        });
-        view.dndCleanups.push(cleanup);
-      },
-    );
-  });
-}
+// ─── Inspector ────────────────────────────────────────────────────────────────
+// Extracted to panels/properties-panel.js
 
-// ─── Stylebook ───────────────────────────────────────────────────────────────
+// ─── Style Sidebar (metadata-driven) ───────────────────────────────────────────
 
-/** Map from rendered stylebook DOM elements to their tag names */
+// UNIT_RE — imported from ui/unit-selector.js
 
-/**
- * Build a DOM element tree from a stylebook-meta.json entry. Applies any existing tag-scoped styles
- * from rootStyle["& tag"].
- *
- * @param {any} entry
- * @param {any} rootStyle
- * @param {any} activeBreakpoints
- */
-function buildStylebookElement(entry, rootStyle, activeBreakpoints) {
-  const el = document.createElement(entry.tag);
-  if (entry.text) el.textContent = entry.text;
-  if (entry.attributes) {
-    for (const [k, v] of Object.entries(entry.attributes)) {
-      try {
-        el.setAttribute(k, /** @type {string} */ (v));
-      } catch {}
-    }
-  }
-  if (entry.style) el.style.cssText = entry.style;
-  // Apply custom styles from document root
-  const tagStyle = rootStyle[`& ${entry.tag}`];
-  if (tagStyle) {
-    for (const [prop, val] of Object.entries(tagStyle)) {
-      if (typeof val === "string" || typeof val === "number") {
-        try {
-          /** @type {any} */ (el.style)[prop] = val;
-        } catch {}
-      }
-    }
-    // Apply media overrides for active breakpoints
-    if (activeBreakpoints) {
-      for (const [key, val] of Object.entries(tagStyle)) {
-        if (!key.startsWith("@") || typeof val !== "object") continue;
-        const mediaName = key.slice(1);
-        if (mediaName === "--") continue;
-        if (activeBreakpoints.has(mediaName)) {
-          for (const [prop, v] of Object.entries(/** @type {any} */ (val))) {
-            if (typeof v === "string" || typeof v === "number") {
-              try {
-                /** @type {any} */ (el.style)[prop] = v;
-              } catch {}
-            }
-          }
-        }
-      }
-    }
-  }
-  if (entry.children) {
-    for (const child of entry.children) {
-      el.appendChild(buildStylebookElement(child, rootStyle, activeBreakpoints));
-    }
-  }
-  return el;
-}
+// inferInputType — imported from studio-utils.js
 
-/**
- * Render a live component preview by registering its custom element and instantiating it. Falls
- * back to a placeholder if registration fails.
- *
- * @param {any} comp - Entry from componentRegistry ({ tagName, path, props })
- * @returns {Promise<HTMLElement>}
- */
-async function renderComponentPreview(comp) {
-  try {
-    if (comp.source === "npm") {
-      // npm components are already imported via $elements — check if registered
-      if (!customElements.get(comp.tagName)) {
-        throw new Error("not registered");
-      }
-    } else {
-      const root = projectState?.projectRoot;
-      const url = `${location.origin}/${root ? root + "/" : ""}${comp.path}`;
-      await defineElement(url);
-    }
-    const el = document.createElement(comp.tagName);
-    for (const p of comp.props || []) {
-      if (p.default !== undefined && p.default !== "false" && p.default !== "''") {
-        const val = String(p.default).replace(/^'|'$/g, "");
-        el.setAttribute(p.name, val);
-      }
-    }
-    return el;
-  } catch (/** @type {any} */ e) {
-    console.warn("Component preview failed:", comp.tagName, e);
-    const fallback = document.createElement("div");
-    fallback.style.cssText =
-      "padding:12px;border:1px dashed var(--border);border-radius:4px;color:var(--fg-dim)";
-    fallback.textContent = `<${comp.tagName}>`;
-    return fallback;
-  }
-}
+// ─── Style panel ────────────────────────────────────────────────────────────
+// Extracted to panels/style-utils.js, panels/style-inputs.js, panels/style-panel.js
 
-/**
- * @param {any} rootStyle
- * @param {any} tag
- */
-function hasTagStyle(rootStyle, tag) {
-  const s = rootStyle[`& ${tag}`];
-  return s && typeof s === "object" && Object.keys(s).length > 0;
-}
-
-function renderSettings() {
-  const settingsTab = S.ui.settingsTab || "stylebook";
-
-  // Top-level settings tabs chrome bar
-  const settingsChromeBarTpl = html`
-    <div
-      class="sb-chrome settings-top-chrome"
-      style="position:absolute;top:0;left:0;right:0;z-index:16;background:var(--bg-panel);border-bottom:1px solid var(--border)"
-    >
-      <sp-tabs
-        size="s"
-        selected=${settingsTab}
-        @change=${(/** @type {any} */ e) => {
-          updateUi("settingsTab", e.target.selected);
-        }}
-      >
-        <sp-tab label="Stylebook" value="stylebook"></sp-tab>
-        <sp-tab label="Definitions" value="definitions"></sp-tab>
-        <sp-tab label="Collections" value="collections"></sp-tab>
-      </sp-tabs>
-    </div>
-  `;
-
-  // Non-stylebook tabs: render editor into canvasWrap with offset for chrome bar
-  if (settingsTab === "definitions" || settingsTab === "collections") {
-    /** @type {any} */ (canvasWrap).style.overflow = "hidden";
-
-    litRender(
-      html`${settingsChromeBarTpl}
-        <div
-          class="settings-editor-container"
-          style="position:absolute;inset:40px 0 0 0;overflow:auto"
-        ></div>`,
-      /** @type {any} */ (canvasWrap),
-    );
-
-    const container = /** @type {HTMLElement} */ (
-      canvasWrap.querySelector(".settings-editor-container")
-    );
-    if (settingsTab === "definitions") renderDefsEditor(container);
-    else renderCollectionsEditor(container);
-    return;
-  }
-
-  // Stylebook tab — existing behavior
-  view.stylebookElToTag = new WeakMap();
-  const rootStyle = getEffectiveStyle(S.document.style);
-  const filter = (S.ui.stylebookFilter || "").toLowerCase();
-  const customizedOnly = S.ui.stylebookCustomizedOnly;
-
-  const { sizeBreakpoints, baseWidth } = parseMediaEntries(getEffectiveMedia(S.document.$media));
-  const hasMedia = sizeBreakpoints.length > 0;
-
-  // Chrome bar (tabs + filter) — positioned absolutely above the panzoom surface
-  const onTabClick = (/** @type {string} */ t) => {
-    updateUi("stylebookTab", t);
-  };
-
-  const onFilterInput = (/** @type {any} */ e) => {
-    updateUi("stylebookFilter", e.target.value);
-  };
-
-  const onCustomizedToggle = () => {
-    updateUi("stylebookCustomizedOnly", !S.ui.stylebookCustomizedOnly);
-  };
-
-  const chromeBarTpl = html`
-    ${settingsChromeBarTpl}
-    <div
-      class="sb-chrome"
-      style="position:absolute;top:36px;left:0;right:0;z-index:15;background:var(--bg-panel);border-bottom:1px solid var(--border)"
-    >
-      <sp-tabs
-        size="s"
-        selected=${S.ui.stylebookTab || "elements"}
-        @change=${(/** @type {any} */ e) => {
-          onTabClick(e.target.selected);
-        }}
-      >
-        ${["elements", "variables"].map(
-          (t) => html`
-            <sp-tab label=${t.charAt(0).toUpperCase() + t.slice(1)} value=${t}></sp-tab>
-          `,
-        )}
-      </sp-tabs>
-      ${S.ui.stylebookTab === "elements"
-        ? html`
-            <input
-              class="field-input"
-              style="flex:1;max-width:200px;margin-left:8px"
-              placeholder="Filter…"
-              .value=${S.ui.stylebookFilter}
-              @input=${onFilterInput}
-            />
-            <button
-              class="tb-toggle${S.ui.stylebookCustomizedOnly ? " active" : ""}"
-              style="margin-left:4px"
-              @click=${onCustomizedToggle}
-            >
-              Customized
-            </button>
-          `
-        : nothing}
-    </div>
-  `;
-
-  // Set up panzoom surface — same as normal canvas mode
-  /** @type {any} */ (canvasWrap).style.overflow = "hidden";
-
-  // Build panel definitions
-  /** @type {any[]} */
-  const allPanelDefs = [];
-  if (hasMedia) {
-    allPanelDefs.push({
-      name: "base",
-      displayName: mediaDisplayName("--"),
-      width: baseWidth,
-      activeSet: activeBreakpointsForWidth(sizeBreakpoints, baseWidth),
-    });
-    for (const bp of sizeBreakpoints) {
-      allPanelDefs.push({
-        name: bp.name,
-        displayName: mediaDisplayName(bp.name),
-        width: bp.width,
-        activeSet: activeBreakpointsForWidth(sizeBreakpoints, bp.width),
-      });
-    }
-  }
-
-  // Render content into panels
-  const renderIntoPanel = (/** @type {any} */ panel, /** @type {any} */ activeBreakpoints) => {
-    panel.canvas.classList.add("sb-canvas");
-    if (S.ui.stylebookTab === "elements") {
-      renderStylebookElementsIntoCanvas(
-        panel.canvas,
-        rootStyle,
-        filter,
-        customizedOnly,
-        activeBreakpoints,
-      );
-      for (const child of panel.canvas.querySelectorAll("*")) {
-        child.style.pointerEvents = "none";
-      }
-      registerStylebookPanelEvents(panel);
-    } else {
-      renderStylebookVarsIntoCanvas(panel.canvas, rootStyle);
-      panel.overlayClk.style.pointerEvents = "none";
-    }
-  };
-
-  /** @type {{ tpl: any; panel: any; activeSet: any }[]} */
-  let panelEntries;
-  if (!hasMedia) {
-    // Single panel
-    const effectiveMedia = getEffectiveMedia(S.document.$media);
-    const hasBaseWidth = effectiveMedia && effectiveMedia["--"];
-    const label = hasBaseWidth ? `${mediaDisplayName("--")} (${baseWidth}px)` : null;
-    const entry = canvasPanelTemplate(
-      hasBaseWidth ? "base" : null,
-      label,
-      !hasBaseWidth,
-      hasBaseWidth ? baseWidth : undefined,
-    );
-    panelEntries = [{ tpl: entry.tpl, panel: entry.panel, activeSet: new Set() }];
-  } else {
-    // Multi-panel: one per breakpoint, sorted widest first
-    panelEntries = allPanelDefs.map((def) => {
-      const label = `${def.displayName} (${def.width}px)`;
-      const { tpl, panel } = canvasPanelTemplate(def.name, label, false, def.width);
-      return { tpl, panel, activeSet: def.activeSet };
-    });
-  }
-
-  litRender(
-    html`
-      ${chromeBarTpl}
-      <div
-        class="panzoom-wrap"
-        style="transform-origin:0 0;padding-top:72px"
-        ${ref((el) => {
-          if (el) view.panzoomWrap = /** @type {HTMLDivElement} */ (el);
-        })}
-      >
-        ${panelEntries.map((e) => e.tpl)}
-      </div>
-    `,
-    /** @type {any} */ (canvasWrap),
-  );
-
-  for (const { panel, activeSet } of panelEntries) {
-    canvasPanels.push(panel);
-    renderIntoPanel(panel, activeSet);
-  }
-  if (hasMedia) {
-    updateActivePanelHeaders();
-  }
-
-  applyTransform();
-  observeCenterUntilStable();
-  renderZoomIndicator();
-}
-
-/**
- * @param {any} canvasEl
- * @param {any} rootStyle
- * @param {any} filter
- * @param {any} customizedOnly
- * @param {any} activeBreakpoints
- */
-function renderStylebookElementsIntoCanvas(
-  canvasEl,
-  rootStyle,
-  filter,
-  customizedOnly,
-  activeBreakpoints,
-) {
-  /** @type {import("lit-html").TemplateResult[]} */
-  const sectionTemplates = [];
-
-  for (const section of stylebookMeta.$sections) {
-    // Filter elements
-    let entries = /** @type {any} */ (section.elements);
-    if (filter) {
-      entries = entries.filter(
-        (/** @type {any} */ e) =>
-          e.tag.includes(filter) || section.label.toLowerCase().includes(filter),
-      );
-    }
-    if (customizedOnly) {
-      entries = entries.filter((/** @type {any} */ e) => hasTagStyle(rootStyle, e.tag));
-    }
-    if (entries.length === 0) continue;
-
-    const cardTemplates = entries.map((/** @type {any} */ entry) => {
-      const el = buildStylebookElement(entry, rootStyle, activeBreakpoints);
-      return html`
-        <div
-          class="element-card"
-          ${ref((card) => {
-            if (!card) return;
-            view.stylebookElToTag.set(card, entry.tag);
-            elToPath.set(card, ["__sb", entry.tag]);
-            for (const child of el.querySelectorAll("*")) {
-              const tag = child.tagName.toLowerCase();
-              if (!view.stylebookElToTag.has(child)) {
-                view.stylebookElToTag.set(child, tag);
-                elToPath.set(child, ["__sb", tag]);
-              }
-            }
-          })}
-        >
-          <div
-            class="element-card-preview"
-            ${ref((c) => {
-              if (c && !c.firstChild) c.appendChild(el);
-            })}
-          ></div>
-          <div class="element-card-label">&lt;${entry.tag}&gt;</div>
-        </div>
-      `;
-    });
-
-    sectionTemplates.push(html`
-      <div class="sb-section">
-        <div class="sb-label">${section.label}</div>
-        <div class="sb-body">${cardTemplates}</div>
-      </div>
-    `);
-  }
-
-  // Custom components from registry
-  if (componentRegistry.length > 0) {
-    let comps = componentRegistry;
-    if (filter)
-      comps = comps.filter((/** @type {any} */ c) => c.tagName.toLowerCase().includes(filter));
-    if (customizedOnly)
-      comps = comps.filter((/** @type {any} */ c) => hasTagStyle(rootStyle, c.tagName));
-    if (comps.length > 0) {
-      const compCards = comps.map((/** @type {any} */ comp) => {
-        /** @type {HTMLDivElement | null} */
-        let previewEl = null;
-        const cardTpl = html`
-          <div
-            class="element-card"
-            style="display:inline-flex;width:auto"
-            ${ref((card) => {
-              if (!card) return;
-              view.stylebookElToTag.set(card, comp.tagName);
-              elToPath.set(card, ["__sb", comp.tagName]);
-            })}
-          >
-            <div
-              class="element-card-preview"
-              ${ref((c) => {
-                if (c) previewEl = /** @type {HTMLDivElement} */ (c);
-              })}
-            ></div>
-            <div class="element-card-label">&lt;${comp.tagName}&gt;</div>
-          </div>
-        `;
-        // Fill preview asynchronously with live rendered component
-        renderComponentPreview(comp).then((el) => {
-          if (previewEl) previewEl.appendChild(el);
-        });
-        return cardTpl;
-      });
-
-      sectionTemplates.push(html`
-        <div class="sb-section">
-          <div class="sb-label">Components</div>
-          <div class="sb-body">${compCards}</div>
-        </div>
-      `);
-    }
-  }
-
-  if (sectionTemplates.length === 0) {
-    litRender(
-      html`
-        <div style="padding:48px;text-align:center;color:var(--fg-dim);font-size:13px">
-          ${customizedOnly ? "No customized elements" : "No matching elements"}
-        </div>
-      `,
-      canvasEl,
-    );
-  } else {
-    litRender(html`${sectionTemplates}`, canvasEl);
-  }
-}
-
-/**
- * Render variables into the canvas (card-based layout matching Elements tab)
- *
- * @param {any} canvasEl
- * @param {any} rootStyle
- */
-function renderStylebookVarsIntoCanvas(canvasEl, rootStyle) {
-  const varCats = stylebookMeta.$variables;
-
-  /** @type {Record<string, any>} */
-  const groups = {};
-  for (const key of Object.keys(varCats)) groups[key] = [];
-  for (const [k, v] of Object.entries(rootStyle)) {
-    if (!k.startsWith("--")) continue;
-    if (typeof v !== "string" && typeof v !== "number") continue;
-    if (k.startsWith("--color")) groups.color.push([k, v]);
-    else if (k.startsWith("--font")) groups.font.push([k, v]);
-    else if (k.startsWith("--size") || k.startsWith("--spacing") || k.startsWith("--radius"))
-      groups.size.push([k, v]);
-    else groups.other.push([k, v]);
-  }
-
-  /** @type {Map<string, HTMLElement | null>} */
-  const bodyRefs = new Map();
-
-  const sectionTemplates = Object.entries(varCats).map(([catKey, catMeta]) => {
-    const vars = groups[catKey];
-
-    const onAdd = () => {
-      const bodyEl = bodyRefs.get(catKey);
-      if (!bodyEl) return;
-      const addBtn = bodyEl.querySelector(".sb-var-add-btn");
-      const row = renderVarRow(catKey, /** @type {any} */ (catMeta), null, "", true);
-      bodyEl.insertBefore(row, addBtn);
-      if (addBtn) /** @type {any} */ (addBtn).style.display = "none";
-      const nameField = /** @type {any} */ (row.querySelector("sp-textfield"));
-      if (nameField) requestAnimationFrame(() => nameField.focus());
-    };
-
-    return html`
-      <div class="sb-section">
-        <div class="sb-label">${/** @type {any} */ (catMeta).label}</div>
-        <div
-          class="sb-body"
-          ${ref((el) => {
-            if (el) bodyRefs.set(catKey, /** @type {HTMLElement} */ (el));
-          })}
-        >
-          ${vars.length > 0
-            ? vars.map((/** @type {[string, any]} */ [varName, varVal]) =>
-                renderVarRow(catKey, /** @type {any} */ (catMeta), varName, String(varVal), false),
-              )
-            : html`<div class="sb-var-empty">
-                No ${/** @type {any} */ (catMeta).label.toLowerCase()} variables yet.
-              </div>`}
-          <button class="sb-var-add-btn" @click=${onAdd}>
-            <span class="sb-var-add-icon">+</span> Add ${/** @type {any} */ (catMeta).label}
-          </button>
-        </div>
-      </div>
-    `;
-  });
-
-  litRender(html`${sectionTemplates}`, canvasEl);
-}
-
-/**
- * Render a single variable row — used for both existing and add-new.
- *
- * @param {string} catKey - "color"|"font"|"size"|"other"
- * @param {any} catMeta - { label, prefix, placeholder }
- * @param {string | null} varName - Existing var name, or null for add-new
- * @param {string} varVal - Current value, or "" for add-new
- * @param {boolean} isNew - True if this is an add-new row
- */
-function renderVarRow(catKey, catMeta, varName, varVal, isNew) {
-  const row = document.createElement("div");
-  row.className = isNew ? "sb-var-row is-new" : "sb-var-row";
-
-  /** @type {any} */
-  let colorPicker = null;
-  /** @type {any} */
-  let nameField = null;
-  /** @type {any} */
-  let getValueFn;
-  /** @type {any} */
-  let hexField = null;
-
-  // ─── Color swatch setup ───
-  const swatchTpl =
-    catKey === "color"
-      ? html`
-          <div
-            class="sb-var-swatch"
-            style=${styleMap({ backgroundColor: varVal || "var(--accent)" })}
-          >
-            <input
-              type="color"
-              .value=${varVal && varVal.startsWith("#") ? varVal : "#007acc"}
-              ${ref((el) => {
-                if (el) colorPicker = el;
-              })}
-              @input=${() => {
-                if (!colorPicker || !hexField) return;
-                hexField.value = colorPicker.value;
-                const swatch = /** @type {any} */ (row.querySelector(".sb-var-swatch"));
-                if (swatch) swatch.style.backgroundColor = colorPicker.value;
-                if (!isNew && varName) update(updateStyle(S, [], varName, colorPicker.value));
-              }}
-            />
-          </div>
-        `
-      : nothing;
-
-  // ─── Name column (add-new only) ───
-  const namePlaceholder =
-    catKey === "color"
-      ? "Primary Blue"
-      : catKey === "font"
-        ? "Body Serif"
-        : catKey === "size"
-          ? "Spacing Large"
-          : "Border Radius";
-
-  const nameColTpl = isNew
-    ? html`
-        <div class="sb-var-col-name">
-          <div class="sb-var-col-label">Name</div>
-          <sp-textfield
-            size="s"
-            placeholder=${namePlaceholder}
-            style="pointer-events:auto"
-            ${ref((el) => {
-              if (el) nameField = el;
-            })}
-          ></sp-textfield>
-        </div>
-      `
-    : nothing;
-
-  // ─── Value column ───
-  /** @type {any} */
-  let valueContent;
-
-  if (catKey === "color") {
-    /** @type {any} */
-    let debounce;
-    valueContent = html`
-      <sp-textfield
-        size="s"
-        .value=${varVal || "#007acc"}
-        placeholder="#007acc"
-        style="pointer-events:auto"
-        ${ref((el) => {
-          if (el) hexField = el;
-        })}
-        @input=${() => {
-          clearTimeout(debounce);
-          debounce = setTimeout(() => {
-            if (!hexField) return;
-            const v = hexField.value;
-            try {
-              if (colorPicker) colorPicker.value = v.startsWith("#") ? v : colorPicker.value;
-            } catch {}
-            const swatch = /** @type {any} */ (row.querySelector(".sb-var-swatch"));
-            if (swatch) swatch.style.backgroundColor = v;
-            if (!isNew && varName) update(updateStyle(S, [], varName, v));
-          }, 400);
-        }}
-      ></sp-textfield>
-    `;
-    getValueFn = () => hexField?.value?.trim() || "";
-  } else if (catKey === "size") {
-    const ui = createUnitInput(varVal || "16px", {
-      onChange: (/** @type {any} */ newVal) => {
-        const bar = /** @type {any} */ (row.querySelector(".sb-var-size-bar"));
-        if (bar) bar.style.width = newVal;
-        if (!isNew && varName) update(updateStyle(S, [], varName, newVal));
-      },
-    });
-    if (isNew) ui.textfield.value = "";
-    valueContent = html`<div
-      ${ref((el) => {
-        if (el && !el.firstChild) el.appendChild(ui.wrap);
-      })}
-    ></div>`;
-    getValueFn = () => ui.getValue();
-  } else {
-    /** @type {any} */
-    let textFieldEl = null;
-    /** @type {any} */
-    let debounce;
-    valueContent = html`
-      <sp-textfield
-        size="s"
-        .value=${varVal}
-        placeholder=${catMeta.placeholder}
-        style="pointer-events:auto"
-        ${ref((el) => {
-          if (el) textFieldEl = el;
-        })}
-        @input=${() => {
-          if (!textFieldEl || isNew || !varName) return;
-          clearTimeout(debounce);
-          debounce = setTimeout(() => {
-            const v = textFieldEl.value;
-            const fontPrev = /** @type {any} */ (row.querySelector(".sb-var-font-preview"));
-            if (fontPrev) fontPrev.style.fontFamily = v;
-            update(updateStyle(S, [], varName, v));
-          }, 400);
-        }}
-      ></sp-textfield>
-    `;
-    getValueFn = () => textFieldEl?.value?.trim() || "";
-  }
-
-  const valColTpl = html`
-    <div class="sb-var-col-value">
-      ${isNew ? html`<div class="sb-var-col-label">Value</div>` : nothing} ${valueContent}
-    </div>
-  `;
-
-  // ─── Action buttons (add-new only) ───
-  const actionsTpl = isNew
-    ? html`
-        <div class="sb-var-add-actions">
-          <sp-action-button
-            size="s"
-            style="pointer-events:auto"
-            @click=${() => {
-              const name = (nameField?.value || "").trim();
-              const val = getValueFn();
-              const generatedVar = friendlyNameToVar(name, catMeta.prefix);
-              if (!generatedVar || !val) return;
-              update(updateStyle(S, [], generatedVar, val));
-            }}
-            >Add</sp-action-button
-          >
-          <sp-action-button
-            size="s"
-            quiet
-            style="pointer-events:auto"
-            @click=${() => {
-              const body = row.parentElement;
-              row.remove();
-              const addBtn = /** @type {any} */ (body?.querySelector(".sb-var-add-btn"));
-              if (addBtn) addBtn.style.display = "";
-            }}
-          >
-            <sp-icon-close slot="icon"></sp-icon-close>
-          </sp-action-button>
-        </div>
-      `
-    : nothing;
-
-  // ─── Header ───
-  const headerTpl =
-    !isNew && varName
-      ? html`
-          <div class="sb-var-row-header">
-            <span class="sb-var-row-title">${varDisplayName(varName, catMeta.prefix)}</span>
-            <span class="sb-var-row-ref">${varName}</span>
-            <sp-action-button
-              size="s"
-              quiet
-              class="sb-var-del"
-              style="pointer-events:auto"
-              @click=${() => update(updateStyle(S, [], varName, undefined))}
-            >
-              <sp-icon-delete slot="icon"></sp-icon-delete>
-            </sp-action-button>
-          </div>
-        `
-      : nothing;
-
-  // ─── Live preview of generated var name (add-new) ───
-  const addPreviewTpl = isNew
-    ? html`
-        <div
-          class="sb-var-add-preview"
-          ${ref((el) => {
-            if (!el || !nameField) return;
-            nameField.addEventListener("input", () => {
-              el.textContent = friendlyNameToVar(nameField.value || "", catMeta.prefix);
-            });
-          })}
-        ></div>
-      `
-    : nothing;
-
-  // ─── Type-specific preview ───
-  const typePrevTpl =
-    catKey === "font" && varVal
-      ? html`
-          <div class="sb-var-preview">
-            <div class="sb-var-font-preview" style=${styleMap({ fontFamily: varVal })}>
-              The quick brown fox jumps over the lazy dog
-            </div>
-          </div>
-        `
-      : catKey === "size" && varVal
-        ? html`
-            <div class="sb-var-preview">
-              <div class="sb-var-size-track">
-                <div class="sb-var-size-bar" style=${styleMap({ width: varVal })}></div>
-              </div>
-            </div>
-          `
-        : nothing;
-
-  litRender(
-    html`
-      ${headerTpl}
-      <div class="sb-var-input-row">${swatchTpl} ${nameColTpl} ${valColTpl} ${actionsTpl}</div>
-      ${addPreviewTpl} ${typePrevTpl}
-    `,
-    row,
-  );
-
-  return row;
-}
-
-// varDisplayName, friendlyNameToVar — imported from studio-utils.js
-
-/**
- * Convert a human-friendly name like "Tablet" to a $media key "--tablet"
- *
- * @param {any} name
- */
-function friendlyNameToMedia(name) {
-  return friendlyNameToVar(name, "--");
-}
-
-/**
- * Creates a combined textfield + quiet sp-picker for CSS values with units. Returns { wrap,
- * textfield, picker, getValue, setValue }. The picker hides automatically when the textfield value
- * is non-numeric (e.g. "auto", "inherit").
- *
- * @param {any} initialValue
- * @param {any} [options]
- */
-function createUnitInput(initialValue, { onChange, size = "s" } = {}) {
-  const match = String(initialValue).match(
-    /^(-?[\d.]+)\s*(px|em|rem|vw|vh|%|ch|ex|vmin|vmax|pt|cm|mm|in)?$/,
-  );
-  let numVal = match ? match[1] : initialValue;
-  let unitVal = match ? match[2] || "px" : "";
-  const isNumeric = !!match;
-
-  const wrap = document.createElement("div");
-  wrap.className = "sb-unit-input";
-  wrap.style.pointerEvents = "auto";
-
-  /** @type {any} */
-  let textfield = null;
-  /** @type {any} */
-  let picker = null;
-
-  const units = [
-    { value: "px", label: "px" },
-    { value: "rem", label: "rem" },
-    { value: "em", label: "em" },
-    { value: "%", label: "%" },
-    { value: "vw", label: "vw" },
-    { value: "vh", label: "vh" },
-    { value: "ch", label: "ch" },
-    { value: "pt", label: "pt" },
-    { divider: true },
-    { value: "auto", label: "auto" },
-    { value: "fit-content", label: "fit-content" },
-  ];
-
-  /** @type {any} */
-  let debounce;
-
-  function getValue() {
-    const num = textfield?.value;
-    const unit = picker?.value;
-    if (unit === "auto" || unit === "fit-content") return unit;
-    return num ? `${num}${unit}` : "";
-  }
-
-  litRender(
-    html`
-      <sp-textfield
-        .value=${numVal}
-        size=${size}
-        ${ref((el) => {
-          if (el) textfield = el;
-        })}
-        @input=${() => {
-          clearTimeout(debounce);
-          const raw = textfield?.value?.trim();
-          const looksNumeric = /^-?[\d.]+$/.test(raw || "");
-          if (picker) picker.style.display = looksNumeric ? "" : "none";
-          debounce = setTimeout(() => {
-            if (onChange) onChange(looksNumeric ? `${raw}${picker?.value}` : raw);
-          }, 400);
-        }}
-      ></sp-textfield>
-      <sp-picker
-        quiet
-        size=${size}
-        style=${styleMap({ display: isNumeric ? "" : "none" })}
-        ${ref((el) => {
-          if (el) {
-            picker = el;
-            requestAnimationFrame(() => {
-              /** @type {any} */ (el).value = unitVal || "px";
-            });
-          }
-        })}
-        @change=${() => {
-          const unit = picker?.value;
-          if (unit === "auto" || unit === "fit-content") {
-            if (textfield) textfield.value = unit;
-            if (picker) picker.style.display = "none";
-            if (onChange) onChange(unit);
-          } else {
-            unitVal = unit;
-            if (onChange) onChange(getValue());
-          }
-        }}
-      >
-        ${units.map((u) =>
-          u.divider
-            ? html`<sp-menu-divider></sp-menu-divider>`
-            : html`<sp-menu-item value=${u.value}>${u.label}</sp-menu-item>`,
-        )}
-      </sp-picker>
-    `,
-    wrap,
-  );
-
-  return { wrap, textfield, picker, getValue };
-}
-
-/**
- * Click handler for stylebook canvas — selects elements via the elToPath/view.stylebookElToTag
- * mapping
- *
- * @param {any} panel
- */
-function registerStylebookPanelEvents(panel) {
-  const { canvas, overlayClk } = panel;
-
-  overlayClk.addEventListener("click", (/** @type {any} */ e) => {
-    // Temporarily enable pointer events to hit-test
-    const els = canvas.querySelectorAll("*");
-    for (const el of els) el.style.pointerEvents = "auto";
-    overlayClk.style.display = "none";
-    const elements = document.elementsFromPoint(e.clientX, e.clientY);
-    overlayClk.style.display = "";
-    for (const el of els) el.style.pointerEvents = "none";
-
-    // Find the closest element with a stylebook tag mapping (walk up parents for nested elements)
-    for (const el of elements) {
-      if (!canvas.contains(el) || el === canvas) continue;
-      let cur = /** @type {any} */ (el);
-      while (cur && cur !== canvas) {
-        const tag = view.stylebookElToTag.get(cur);
-        if (tag) {
-          const newMedia = panel.mediaName === "base" ? null : (panel.mediaName ?? null);
-          selectStylebookTag(tag, newMedia);
-          updateActivePanelHeaders();
-          return;
-        }
-        cur = cur.parentElement;
-      }
-    }
-    // Clicked empty area — deselect
-    updateSession({ ui: { stylebookSelection: null, activeSelector: null } });
-    renderStylebookOverlays();
-  });
-
-  overlayClk.addEventListener("mousemove", (/** @type {any} */ e) => {
-    const els = canvas.querySelectorAll("*");
-    for (const el of els) el.style.pointerEvents = "auto";
-    overlayClk.style.display = "none";
-    const elements = document.elementsFromPoint(e.clientX, e.clientY);
-    overlayClk.style.display = "";
-    for (const el of els) el.style.pointerEvents = "none";
-
-    let hoverTag = null;
-    for (const el of elements) {
-      if (!canvas.contains(el) || el === canvas) continue;
-      let cur = /** @type {any} */ (el);
-      while (cur && cur !== canvas) {
-        const tag = view.stylebookElToTag.get(cur);
-        if (tag) {
-          hoverTag = tag;
-          break;
-        }
-        cur = cur.parentElement;
-      }
-      if (hoverTag) break;
-    }
-
-    if (hoverTag !== panel._lastHoverTag) {
-      panel._lastHoverTag = hoverTag;
-      renderStylebookOverlays();
-    }
-  });
-}
-
-/** Draw selection + hover overlays for stylebook elements */
-function renderStylebookOverlays() {
-  if (canvasPanels.length === 0) return;
-
-  const selectedTag = S.ui.stylebookSelection;
-
-  for (const panel of canvasPanels) {
-    const hoverTag = panel._lastHoverTag;
-    /**
-     * @type {{
-     *   cls: string;
-     *   top: string;
-     *   left: string;
-     *   width: string;
-     *   height: string;
-     *   label?: string;
-     * }[]}
-     */
-    const boxes = [];
-
-    if (hoverTag && hoverTag !== selectedTag) {
-      const el = findStylebookEl(panel.canvas, hoverTag);
-      if (el) boxes.push({ ...overlayBoxDescriptor(el, "hover", panel), label: undefined });
-    }
-
-    if (selectedTag) {
-      const el = findStylebookEl(panel.canvas, selectedTag);
-      if (el)
-        boxes.push({ ...overlayBoxDescriptor(el, "selection", panel), label: `<${selectedTag}>` });
-    }
-
-    litRender(
-      html`
-        ${panel.dropLine}
-        ${boxes.map(
-          (b) => html`
-            <div
-              class=${b.cls}
-              style="top:${b.top};left:${b.left};width:${b.width};height:${b.height}"
-            >
-              ${b.label ? html`<div class="overlay-label">${b.label}</div>` : nothing}
-            </div>
-          `,
-        )}
-      `,
-      panel.overlay,
-    );
-  }
-}
-
-/** Find a stylebook element by tag in the canvas */
-function findStylebookEl(/** @type {any} */ canvasEl, /** @type {any} */ tag) {
-  for (const child of canvasEl.querySelectorAll("*")) {
-    if (view.stylebookElToTag.get(child) === tag) return child;
-  }
-  return null;
-}
-
-// ─── Right panel: Inspector ───────────────────────────────────────────────────
-
-function renderRightPanel() {
-  rightPanelMod.render();
-}
-
-// ─── Inspector ────────────────────────────────────────────────────────────────
-
-/** Frontmatter-only panel shown in content mode when no element is selected */
-function renderFrontmatterOnlyPanel() {
-  const fm = S.content?.frontmatter || {};
-  const col = findCollectionSchema(S.documentPath, projectState?.projectConfig);
-  const schemaProps = col?.schema?.properties;
-  const requiredFields = new Set(col?.schema?.required || []);
-
-  /** @type {{ field: string; entry: any; value: any }[]} */
-  const fields = [];
-  if (schemaProps) {
-    for (const [field, fieldSchema] of Object.entries(
-      /** @type {Record<string, any>} */ (schemaProps),
-    )) {
-      fields.push({ field, entry: fieldSchema, value: fm[field] });
-    }
-    for (const [field, value] of Object.entries(fm)) {
-      if (!schemaProps[field]) {
-        fields.push({
-          field,
-          entry: { type: typeof value === "boolean" ? "boolean" : "string" },
-          value,
-        });
-      }
-    }
-  } else {
-    for (const [field, value] of Object.entries(fm)) {
-      fields.push({
-        field,
-        entry: { type: typeof value === "boolean" ? "boolean" : "string" },
-        value,
-      });
-    }
-  }
-
-  if (fields.length === 0 && !schemaProps) {
-    return html`<div class="empty-state">No frontmatter. Select an element to inspect.</div>`;
-  }
-
-  return html`
-    <div class="style-sidebar">
-      <sp-accordion allow-multiple size="s">
-        <sp-accordion-item label=${col ? `Frontmatter (${col.name})` : "Frontmatter"} open>
-          <div class="style-section-body">
-            ${fields.map((f) => renderFmFieldRow(f.field, f.entry, f.value, requiredFields))}
-          </div>
-        </sp-accordion-item>
-      </sp-accordion>
-    </div>
-  `;
-}
-
-/** Render a single frontmatter field row (shared between both panels) */
-function renderFmFieldRow(
-  /** @type {string} */ field,
-  /** @type {any} */ entry,
-  /** @type {any} */ value,
-  /** @type {Set<string>} */ requiredFields,
-) {
-  const isRequired = requiredFields.has(field);
-  const label = field.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase());
-  const displayLabel = label + (isRequired ? " *" : "");
-  const hasVal = value !== undefined && value !== "" && value !== false;
-  const onClear = () => update(updateFrontmatter(S, field, undefined));
-
-  // Boolean → checkbox
-  if (entry.type === "boolean") {
-    return renderFieldRow({
-      prop: field,
-      label: displayLabel,
-      hasValue: hasVal,
-      onClear,
-      widget: html`
-        <sp-checkbox
-          size="s"
-          .checked=${live(!!value)}
-          @change=${(/** @type {any} */ e) =>
-            update(updateFrontmatter(S, field, e.target.checked || undefined))}
-        ></sp-checkbox>
-      `,
-    });
-  }
-
-  // Array of strings → comma-separated text
-  if (entry.type === "array") {
-    const display = Array.isArray(value) ? value.join(", ") : value || "";
-    return renderFieldRow({
-      prop: field,
-      label: displayLabel,
-      hasValue: hasVal,
-      onClear,
-      widget: html`
-        <sp-textfield
-          size="s"
-          placeholder="comma, separated"
-          .value=${live(display)}
-          @input=${debouncedStyleCommit(`fm:${field}`, 400, (/** @type {any} */ e) => {
-            const arr = e.target.value
-              ? e.target.value
-                  .split(",")
-                  .map((/** @type {string} */ s) => s.trim())
-                  .filter(Boolean)
-              : undefined;
-            update(updateFrontmatter(S, field, arr));
-          })}
-        ></sp-textfield>
-      `,
-    });
-  }
-
-  // Enum → select
-  if (Array.isArray(entry.enum)) {
-    return renderFieldRow({
-      prop: field,
-      label: displayLabel,
-      hasValue: hasVal,
-      onClear,
-      widget: html`
-        <sp-picker
-          size="s"
-          .value=${live(value || "")}
-          @change=${(/** @type {any} */ e) =>
-            update(updateFrontmatter(S, field, e.target.value || undefined))}
-        >
-          ${entry.enum.map(
-            (/** @type {string} */ opt) => html`<sp-menu-item value=${opt}>${opt}</sp-menu-item>`,
-          )}
-        </sp-picker>
-      `,
-    });
-  }
-
-  // Number
-  if (entry.type === "number") {
-    return renderFieldRow({
-      prop: field,
-      label: displayLabel,
-      hasValue: hasVal,
-      onClear,
-      widget: html`
-        <sp-number-field
-          size="s"
-          hide-stepper
-          .value=${live(value !== undefined ? Number(value) : undefined)}
-          @change=${debouncedStyleCommit(`fm:${field}`, 400, (/** @type {any} */ e) => {
-            const v = e.target.value;
-            update(updateFrontmatter(S, field, isNaN(v) ? undefined : Number(v)));
-          })}
-        ></sp-number-field>
-      `,
-    });
-  }
-
-  // Default: text (handles string, date, etc.)
-  return renderFieldRow({
-    prop: field,
-    label: displayLabel,
-    hasValue: hasVal,
-    onClear,
-    widget: html`
-      <sp-textfield
-        size="s"
-        placeholder=${entry.format === "date" ? "YYYY-MM-DD" : ""}
-        .value=${live(value || "")}
-        @input=${debouncedStyleCommit(`fm:${field}`, 400, (/** @type {any} */ e) => {
-          update(updateFrontmatter(S, field, e.target.value || undefined));
-        })}
-      ></sp-textfield>
-    `,
-  });
-}
-
-/** Properties panel — lit-html template with accordion sections */
-function propertiesSidebarTemplate() {
-  // In content mode with no selection, still show frontmatter fields
-  if (!S.selection) {
-    if (S.mode === "content") {
-      return renderFrontmatterOnlyPanel();
-    }
-    return html`<div class="empty-state">Select an element to inspect</div>`;
-  }
-  const node = getNodeAtPath(S.document, S.selection);
-  if (!node) return html`<div class="empty-state">Node not found</div>`;
-
-  const path = S.selection;
-  const isMapNode = node.$prototype === "Array";
-  const isMapParent =
-    node.children && typeof node.children === "object" && node.children.$prototype === "Array";
-  const isSwitchNode = !!node.$switch;
-  const isCustomInstance = (node.tagName || "").includes("-");
-  const isRoot = path.length === 0;
-  const tagName = node.tagName || "div";
-  const attrs = node.attributes || {};
-
-  const mapSignals = isInsideMapTemplate(path)
-    ? [
-        { value: "$map/item", label: "$map/item" },
-        { value: "$map/index", label: "$map/index" },
-      ]
-    : null;
-
-  // Helper: render an attribute row using the style-row pattern
-  function renderAttrRow(
-    /** @type {any} */ attr,
-    /** @type {any} */ entry,
-    /** @type {any} */ value,
-  ) {
-    const type = inferInputType(entry);
-    const hasVal = value !== undefined && value !== "";
-
-    // Boolean attributes render as checkboxes
-    if (entry.type === "boolean") {
-      return renderFieldRow({
-        prop: attr,
-        label: attrLabel(entry, attr),
-        hasValue: hasVal,
-        onClear: () => update(updateAttribute(S, path, attr, undefined)),
-        widget: html`
-          <sp-checkbox
-            size="s"
-            .checked=${live(!!value)}
-            @change=${(/** @type {any} */ e) =>
-              update(updateAttribute(S, path, attr, e.target.checked || undefined))}
-          >
-          </sp-checkbox>
-        `,
-      });
-    }
-
-    return renderFieldRow({
-      prop: attr,
-      label: attrLabel(entry, attr),
-      hasValue: hasVal,
-      onClear: () => update(updateAttribute(S, path, attr, undefined)),
-      widget: widgetForType(type, entry, attr, value || "", (/** @type {any} */ v) =>
-        update(updateAttribute(S, path, attr, v || undefined)),
-      ),
-    });
-  }
-
-  // ── Collect applicable attributes from html-meta ──
-  const applicableAttrs = /** @type {Record<string, any>} */ ({});
-  for (const [attr, entry] of /** @type {[string, any][]} */ (Object.entries(htmlMeta.$defs))) {
-    if (!entry.$elements || entry.$elements.includes(tagName)) {
-      applicableAttrs[attr] = entry;
-    }
-  }
-
-  // Partition into sections
-  const attrSections = /** @type {Record<string, any[]>} */ ({});
-  for (const sec of htmlMeta.$sections) attrSections[sec.key] = [];
-  for (const [attr, entry] of Object.entries(applicableAttrs)) {
-    const secKey = entry.$section;
-    if (attrSections[secKey]) attrSections[secKey].push({ name: attr, entry });
-  }
-  for (const sec of htmlMeta.$sections) {
-    attrSections[sec.key].sort(
-      (/** @type {any} */ a, /** @type {any} */ b) => a.entry.$order - b.entry.$order,
-    );
-  }
-
-  // Collect "custom" attributes (not in html-meta and not CEM-defined props)
-  const knownAttrNames = new Set(Object.keys(applicableAttrs));
-  // For npm web components, CEM-defined props are rendered in "Component Props"
-  if (isCustomInstance) {
-    const comp = componentRegistry.find((c) => c.tagName === node.tagName);
-    if (comp) for (const p of comp.props) knownAttrNames.add(p.name);
-  }
-  const customAttrs = Object.entries(attrs).filter(([k]) => !knownAttrNames.has(k));
-
-  // Auto-open sections that have set values
-  const autoOpen = new Set();
-  for (const [attr] of Object.entries(attrs)) {
-    const entry = applicableAttrs[attr];
-    if (entry) autoOpen.add(entry.$section);
-  }
-  // Also auto-open if there are custom attrs
-  if (customAttrs.length > 0) autoOpen.add("__custom");
-
-  function isSectionOpen(/** @type {any} */ key) {
-    if (S.ui.inspectorSections[key] !== undefined) return S.ui.inspectorSections[key];
-    return autoOpen.has(key);
-  }
-
-  function toggleSection(/** @type {any} */ key) {
-    const current = isSectionOpen(key);
-    updateUi("inspectorSections", { ...S.ui.inspectorSections, [key]: !current });
-  }
-
-  // ── Build section templates ─────────────────────────────────────────
-
-  // "Element" section — tagName, textContent, hidden
-  const elemT = html`
-    <sp-accordion-item
-      label="Element"
-      ?open=${isSectionOpen("__element") !== false}
-      @sp-accordion-item-toggle=${() => toggleSection("__element")}
-    >
-      <div class="style-section-body">
-        <div class="style-row" data-prop="tagName">
-          <div class="style-row-label">
-            <sp-field-label size="s">Tag</sp-field-label>
-          </div>
-          <sp-textfield
-            size="s"
-            .value=${live(tagName)}
-            autocomplete="off"
-            list="tag-names"
-            @input=${debouncedStyleCommit("prop:tagName", 400, (/** @type {any} */ e) => {
-              update(updateProperty(S, path, "tagName", e.target.value || undefined));
-            })}
-          ></sp-textfield>
-        </div>
-        <div class="style-row" data-prop="$id">
-          <div class="style-row-label">
-            ${node.$id
-              ? html`<span
-                  class="set-dot"
-                  title="Clear $id"
-                  @click=${(/** @type {any} */ e) => {
-                    e.stopPropagation();
-                    update(updateProperty(S, path, "$id", undefined));
-                  }}
-                ></span>`
-              : nothing}
-            <sp-field-label size="s">ID</sp-field-label>
-          </div>
-          <sp-textfield
-            size="s"
-            .value=${live(node.$id || "")}
-            @input=${debouncedStyleCommit("prop:$id", 400, (/** @type {any} */ e) => {
-              update(updateProperty(S, path, "$id", e.target.value || undefined));
-            })}
-          ></sp-textfield>
-        </div>
-        <div class="style-row" data-prop="className">
-          <div class="style-row-label">
-            ${node.className
-              ? html`<span
-                  class="set-dot"
-                  title="Clear class"
-                  @click=${(/** @type {any} */ e) => {
-                    e.stopPropagation();
-                    update(updateProperty(S, path, "className", undefined));
-                  }}
-                ></span>`
-              : nothing}
-            <sp-field-label size="s">Class</sp-field-label>
-          </div>
-          <sp-textfield
-            size="s"
-            .value=${live(node.className || "")}
-            @input=${debouncedStyleCommit("prop:className", 400, (/** @type {any} */ e) => {
-              update(updateProperty(S, path, "className", e.target.value || undefined));
-            })}
-          ></sp-textfield>
-        </div>
-        ${!Array.isArray(node.children) || node.children.length === 0
-          ? html`
-              <div class="style-row" data-prop="textContent">
-                <div class="style-row-label">
-                  ${node.textContent !== undefined
-                    ? html`<span
-                        class="set-dot"
-                        title="Clear text"
-                        @click=${(/** @type {any} */ e) => {
-                          e.stopPropagation();
-                          update(updateProperty(S, path, "textContent", undefined));
-                        }}
-                      ></span>`
-                    : nothing}
-                  <sp-field-label size="s">Text Content</sp-field-label>
-                </div>
-                <sp-textfield
-                  size="s"
-                  multiline
-                  .value=${live(
-                    typeof node.textContent === "string"
-                      ? node.textContent
-                      : (node.textContent ?? ""),
-                  )}
-                  @input=${debouncedStyleCommit("prop:textContent", 400, (/** @type {any} */ e) => {
-                    update(updateProperty(S, path, "textContent", e.target.value || undefined));
-                  })}
-                ></sp-textfield>
-              </div>
-            `
-          : nothing}
-        <div class="style-row" data-prop="hidden">
-          <div class="style-row-label">
-            ${node.hidden
-              ? html`<span
-                  class="set-dot"
-                  title="Clear hidden"
-                  @click=${(/** @type {any} */ e) => {
-                    e.stopPropagation();
-                    update(updateProperty(S, path, "hidden", undefined));
-                  }}
-                ></span>`
-              : nothing}
-            <sp-field-label size="s">Hidden</sp-field-label>
-          </div>
-          <sp-checkbox
-            size="s"
-            .checked=${live(!!node.hidden)}
-            @change=${(/** @type {any} */ e) =>
-              update(updateProperty(S, path, "hidden", e.target.checked || undefined))}
-          >
-          </sp-checkbox>
-        </div>
-        ${isMapParent
-          ? html`
-              <div style="font-size:10px;color:var(--fg-dim);padding:4px 0;font-style:italic">
-                Children: Repeater (select in layers to configure)
-              </div>
-            `
-          : nothing}
-      </div>
-    </sp-accordion-item>
-  `;
-
-  // "Repeater" section (if $map node)
-  const repeaterT = isMapNode
-    ? html`
-        <sp-accordion-item label="Repeater" open>
-          <div class="style-section-body">
-            ${renderRepeaterFieldsTemplate(node, path, mapSignals)}
-          </div>
-        </sp-accordion-item>
-      `
-    : nothing;
-
-  // "$switch" section
-  const switchT = isSwitchNode
-    ? html`
-        <sp-accordion-item label="Switch" open>
-          <div class="style-section-body">
-            ${renderSwitchFieldsTemplate(node, path, mapSignals)}
-          </div>
-        </sp-accordion-item>
-      `
-    : nothing;
-
-  // "Observed Attributes" section (custom element doc root)
-  const observedAttrsT =
-    isCustomElementDoc(S) && isRoot
-      ? (() => {
-          const state = S.document.state || {};
-          const entries = Object.entries(state).filter(([, d]) => d.attribute);
-          return html`
-            <sp-accordion-item label="Observed Attributes" ?open=${isSectionOpen("__observed")}>
-              <div class="style-section-body">
-                ${entries.length === 0
-                  ? html`<div class="empty-state">
-                      No attributes declared. Set "attribute" on a state entry.
-                    </div>`
-                  : entries.map(
-                      ([key, d]) => html`
-                        <div
-                          style="display:flex;gap:6px;align-items:center;padding:2px 0;font-size:11px"
-                        >
-                          <code style="font-family:monospace;color:var(--accent)"
-                            >${d.attribute}</code
-                          >
-                          <span style="color:var(--fg-dim)"> → </span>
-                          <span>${key}</span>
-                          ${d.type
-                            ? html`<span style="margin-left:auto;color:var(--fg-dim);font-size:10px"
-                                >${d.type}</span
-                              >`
-                            : nothing}
-                          ${d.reflects
-                            ? html`<span
-                                style="font-size:9px;background:var(--bg-hover);padding:1px 4px;border-radius:3px"
-                                >reflects</span
-                              >`
-                            : nothing}
-                        </div>
-                      `,
-                    )}
-              </div>
-            </sp-accordion-item>
-          `;
-        })()
-      : nothing;
-
-  // "Component Props" section
-  const compPropsT = isCustomInstance
-    ? html`
-        <sp-accordion-item label="Component Props" open>
-          <div class="style-section-body">
-            ${renderComponentPropsFieldsTemplate(node, path, mapSignals)}
-          </div>
-        </sp-accordion-item>
-      `
-    : nothing;
-
-  // HTML-meta attribute sections
-  const attrSectionTemplates = htmlMeta.$sections
-    .filter((sec) => attrSections[sec.key].length > 0)
-    .map((sec) => {
-      const sectionAttrs = attrSections[sec.key];
-      const hasAnySet = sectionAttrs.some((/** @type {any} */ a) => attrs[a.name] !== undefined);
-      return html`
-        <sp-accordion-item
-          label=${sec.label}
-          ?open=${isSectionOpen(sec.key)}
-          @sp-accordion-item-toggle=${() => toggleSection(sec.key)}
-        >
-          ${hasAnySet
-            ? html`<span slot="heading" class="set-dot set-dot--section"></span>`
-            : nothing}
-          <div class="style-section-body">
-            ${sectionAttrs.map((/** @type {any} */ a) =>
-              renderAttrRow(a.name, a.entry, attrs[a.name]),
-            )}
-          </div>
-        </sp-accordion-item>
-      `;
-    });
-
-  // "Custom" attributes section (not in html-meta)
-  const customSectionT =
-    customAttrs.length > 0 || Object.keys(attrs).length > 0
-      ? html`
-          <sp-accordion-item
-            label="Custom"
-            ?open=${isSectionOpen("__custom")}
-            @sp-accordion-item-toggle=${() => toggleSection("__custom")}
-          >
-            ${customAttrs.length > 0
-              ? html`<span slot="heading" class="set-dot set-dot--section"></span>`
-              : nothing}
-            <div class="style-section-body">
-              ${renderCustomAttrsFieldsTemplate(node, path, attrs, knownAttrNames)}
-            </div>
-          </sp-accordion-item>
-        `
-      : nothing;
-
-  // Media section (root only)
-  const mediaT = isRoot
-    ? html`
-        <sp-accordion-item
-          label="Media"
-          ?open=${isSectionOpen("__media")}
-          @sp-accordion-item-toggle=${() => toggleSection("__media")}
-        >
-          <div class="style-section-body">${renderMediaFieldsTemplate(node)}</div>
-        </sp-accordion-item>
-      `
-    : nothing;
-
-  // CSS Properties + CSS Parts (custom element doc root)
-  const cssPropsT =
-    isCustomElementDoc(S) && isRoot
-      ? (() => {
-          const style = node.style || {};
-          const cssProps = Object.entries(style).filter(([k]) => k.startsWith("--"));
-          if (cssProps.length === 0) return nothing;
-          return html`
-            <sp-accordion-item
-              label="CSS Properties"
-              ?open=${isSectionOpen("__cssprops")}
-              @sp-accordion-item-toggle=${() => toggleSection("__cssprops")}
-            >
-              <div class="style-section-body">
-                ${cssProps.map(
-                  ([prop, val]) => html`
-                    <div
-                      style="display:flex;gap:6px;align-items:center;padding:2px 0;font-size:11px"
-                    >
-                      <code style="font-family:monospace;color:var(--accent)">${prop}</code>
-                      <span style="margin-left:auto;color:var(--fg-dim)">${String(val)}</span>
-                    </div>
-                  `,
-                )}
-              </div>
-            </sp-accordion-item>
-          `;
-        })()
-      : nothing;
-
-  const cssPartsT =
-    isCustomElementDoc(S) && isRoot
-      ? (() => {
-          const parts = collectCssParts(S.document);
-          if (parts.length === 0) return nothing;
-          return html`
-            <sp-accordion-item
-              label="CSS Parts"
-              ?open=${isSectionOpen("__cssparts")}
-              @sp-accordion-item-toggle=${() => toggleSection("__cssparts")}
-            >
-              <div class="style-section-body">
-                ${parts.map(
-                  (p) => html`
-                    <div
-                      style="display:flex;gap:6px;align-items:center;padding:2px 0;font-size:11px"
-                    >
-                      <code style="font-family:monospace;color:var(--accent)">${p.name}</code>
-                      <span style="color:var(--fg-dim)">&lt;${p.tag}&gt;</span>
-                    </div>
-                  `,
-                )}
-              </div>
-            </sp-accordion-item>
-          `;
-        })()
-      : nothing;
-
-  // ── Frontmatter section (content mode only) ──
-  const frontmatterT =
-    S.mode === "content"
-      ? (() => {
-          const fm = S.content?.frontmatter || {};
-          const col = findCollectionSchema(S.documentPath, projectState?.projectConfig);
-          const schemaProps = col?.schema?.properties;
-          const requiredFields = new Set(col?.schema?.required || []);
-
-          /** @type {{ field: string; entry: any; value: any }[]} */
-          const fields = [];
-          if (schemaProps) {
-            for (const [field, fieldSchema] of Object.entries(
-              /** @type {Record<string, any>} */ (schemaProps),
-            )) {
-              fields.push({ field, entry: fieldSchema, value: fm[field] });
-            }
-            for (const [field, value] of Object.entries(fm)) {
-              if (!schemaProps[field]) {
-                fields.push({
-                  field,
-                  entry: { type: typeof value === "boolean" ? "boolean" : "string" },
-                  value,
-                });
-              }
-            }
-          } else {
-            for (const [field, value] of Object.entries(fm)) {
-              fields.push({
-                field,
-                entry: { type: typeof value === "boolean" ? "boolean" : "string" },
-                value,
-              });
-            }
-          }
-
-          if (fields.length === 0 && !schemaProps) return nothing;
-
-          return html`
-            <sp-accordion-item
-              label=${col ? `Frontmatter (${col.name})` : "Frontmatter"}
-              ?open=${isSectionOpen("__frontmatter") !== false}
-              @sp-accordion-item-toggle=${() => toggleSection("__frontmatter")}
-            >
-              <div class="style-section-body">
-                ${fields.map((f) => renderFmFieldRow(f.field, f.entry, f.value, requiredFields))}
-              </div>
-            </sp-accordion-item>
-          `;
-        })()
-      : nothing;
-
-  // ── Assemble ──
-  const tpl = html`
-    <div class="style-sidebar">
-      <sp-accordion allow-multiple size="s">
-        ${frontmatterT} ${isMapNode ? repeaterT : elemT} ${isMapNode ? nothing : observedAttrsT}
-        ${isMapNode ? nothing : switchT} ${isMapNode ? nothing : compPropsT}
-        ${isMapNode ? nothing : attrSectionTemplates} ${isMapNode ? nothing : customSectionT}
-        ${isMapNode ? nothing : mediaT} ${isMapNode ? nothing : cssPropsT}
-        ${isMapNode ? nothing : cssPartsT}
-      </sp-accordion>
-    </div>
-  `;
-
-  return tpl;
-}
-
-/** Repeater fields template */
-function renderRepeaterFieldsTemplate(
-  /** @type {any} */ node,
-  /** @type {any} */ path,
-  /** @type {any} */ _mapSignals,
-) {
-  return html`
-    ${bindableFieldRow("Items", "text", node.items, (/** @type {any} */ v) =>
-      update(updateProperty(S, path, "items", v)),
-    )}
-    ${node.filter
-      ? bindableFieldRow("Filter", "text", node.filter, (/** @type {any} */ v) =>
-          update(updateProperty(S, path, "filter", v || undefined)),
-        )
-      : nothing}
-    ${node.sort
-      ? bindableFieldRow("Sort", "text", node.sort, (/** @type {any} */ v) =>
-          update(updateProperty(S, path, "sort", v || undefined)),
-        )
-      : nothing}
-    <div style="display:flex;gap:8px;margin-top:4px">
-      ${!node.filter
-        ? html`<span
-            class="kv-add"
-            @click=${() => update(updateProperty(S, path, "filter", { $ref: "#/state/" }))}
-            >+ Add filter</span
-          >`
-        : nothing}
-      ${!node.sort
-        ? html`<span
-            class="kv-add"
-            @click=${() => update(updateProperty(S, path, "sort", { $ref: "#/state/" }))}
-            >+ Add sort</span
-          >`
-        : nothing}
-    </div>
-    ${node.map
-      ? html`
-          <sp-action-button
-            size="s"
-            style="margin-top:8px;width:100%"
-            @click=${() => update(selectNode(S, [...path, "map"]))}
-            >Edit template →</sp-action-button
-          >
-        `
-      : nothing}
-  `;
-}
-
-/** Switch fields template */
-function renderSwitchFieldsTemplate(
-  /** @type {any} */ node,
-  /** @type {any} */ path,
-  /** @type {any} */ mapSignals,
-) {
-  const caseNames = Object.keys(node.cases || {});
-  return html`
-    ${bindableFieldRow(
-      "Expression",
-      "text",
-      node.$switch,
-      (/** @type {any} */ v) => update(updateProperty(S, path, "$switch", v)),
-      null,
-      mapSignals,
-    )}
-    <div
-      style="font-size:11px;font-weight:600;color:var(--fg-dim);margin:8px 0 4px;text-transform:uppercase;letter-spacing:0.05em"
-    >
-      Cases
-    </div>
-    ${caseNames.map((caseName) => {
-      /** @type {any} */
-      let debounce;
-      return html`
-        <div class="field-row" style="display:flex;align-items:center;gap:4px;margin-bottom:3px">
-          <input
-            class="field-input"
-            value=${caseName}
-            style="flex:1"
-            @input=${(/** @type {any} */ e) => {
-              clearTimeout(debounce);
-              debounce = setTimeout(() => {
-                if (e.target.value && e.target.value !== caseName)
-                  update(renameSwitchCase(S, path, caseName, e.target.value));
-              }, 500);
-            }}
-          />
-          <span
-            class="bind-toggle"
-            title="Edit case"
-            style="cursor:pointer"
-            @click=${(/** @type {any} */ e) => {
-              e.stopPropagation();
-              update(selectNode(S, [...path, "cases", caseName]));
-            }}
-            >→</span
-          >
-          <span
-            style="cursor:pointer;color:var(--danger);font-size:11px"
-            @click=${(/** @type {any} */ e) => {
-              e.stopPropagation();
-              update(removeSwitchCase(S, path, caseName));
-            }}
-            >✕</span
-          >
-        </div>
-      `;
-    })}
-    <span
-      class="kv-add"
-      @click=${() => {
-        update(addSwitchCase(S, path, `case${caseNames.length + 1}`));
-      }}
-      >+ Add case</span
-    >
-  `;
-}
-
-/** Component props fields template */
-function renderComponentPropsFieldsTemplate(
-  /** @type {any} */ node,
-  /** @type {any} */ path,
-  /** @type {any} */ mapSignals,
-) {
-  const comp = componentRegistry.find((c) => c.tagName === node.tagName);
-  if (!comp) return html`<div class="empty-state">Component not found</div>`;
-  // For npm web components, props map to attributes; for JX components, use $props
-  const isNpm = comp.source === "npm";
-  const currentVals = isNpm ? node.attributes || {} : node.$props || {};
-  const updateFn = isNpm
-    ? (/** @type {string} */ name, /** @type {any} */ v) =>
-        update(updateAttribute(S, path, name, v === "" ? undefined : v))
-    : (/** @type {string} */ name, /** @type {any} */ v) => update(updateProp(S, path, name, v));
-
-  const defs = S.document.state || {};
-  const signalDefs = Object.entries(defs).filter(
-    ([, d]) => !d.$handler && d.$prototype !== "Function",
-  );
-  const extraSignals = mapSignals;
-
-  return html`
-    ${comp.props.map((/** @type {any} */ prop) => {
-      const rawValue = currentVals[prop.name];
-      const isBound = typeof rawValue === "object" && rawValue !== null && rawValue.$ref;
-      const hasVal = rawValue !== undefined && rawValue !== null;
-      const parsed = parseCemType(prop.type);
-      const onChange = (/** @type {any} */ v) => updateFn(prop.name, v);
-
-      const clearProp = (/** @type {any} */ e) => {
-        e.stopPropagation();
-        updateFn(prop.name, undefined);
-      };
-
-      const onToggleBind = () => {
-        if (isBound) {
-          const ref = rawValue.$ref;
-          const defName = ref.startsWith("#/state/") ? ref.slice(8) : ref;
-          const def = defs[defName];
-          let staticVal = "";
-          if (def && def.default !== undefined)
-            staticVal =
-              typeof def.default === "object" ? JSON.stringify(def.default) : String(def.default);
-          onChange(staticVal || undefined);
-        } else {
-          if (signalDefs.length > 0) {
-            onChange({ $ref: `#/state/${signalDefs[0][0]}` });
-          } else if (extraSignals?.length > 0) {
-            onChange({ $ref: extraSignals[0].value });
-          }
-        }
-      };
-
-      // Signal picker for bound mode
-      const boundTpl = html`
-        <sp-picker
-          size="s"
-          quiet
-          placeholder="— select signal —"
-          value=${isBound && rawValue.$ref ? rawValue.$ref : nothing}
-          @change=${(/** @type {any} */ e) => {
-            if (e.target.value) onChange({ $ref: e.target.value });
-            else onChange(undefined);
-          }}
-        >
-          ${signalDefs.map(
-            ([defName]) =>
-              html`<sp-menu-item value=${`#/state/${defName}`}>${defName}</sp-menu-item>`,
-          )}
-          ${extraSignals
-            ? html`
-                <sp-menu-divider></sp-menu-divider>
-                ${extraSignals.map(
-                  (/** @type {any} */ sig) =>
-                    html`<sp-menu-item value=${sig.value}>${sig.label}</sp-menu-item>`,
-                )}
-              `
-            : nothing}
-        </sp-picker>
-      `;
-
-      // Widget based on CEM type
-      /** @type {any} */
-      let debounce;
-      const staticVal = isBound ? "" : (rawValue ?? "");
-      /** @type {any} */
-      let widgetTpl;
-      if (parsed.kind === "boolean") {
-        widgetTpl = html`<sp-checkbox
-          size="s"
-          .checked=${live(!!staticVal)}
-          @change=${(/** @type {any} */ e) => onChange(e.target.checked || undefined)}
-        ></sp-checkbox>`;
-      } else if (parsed.kind === "number") {
-        widgetTpl = html`<sp-number-field
-          size="s"
-          value=${staticVal}
-          @input=${(/** @type {any} */ e) => {
-            clearTimeout(debounce);
-            debounce = setTimeout(() => onChange(e.target.value), 400);
-          }}
-        ></sp-number-field>`;
-      } else if (parsed.kind === "combobox") {
-        const options = /** @type {string[]} */ (/** @type {any} */ (parsed).options);
-        widgetTpl = html`<jx-value-selector
-          .value=${String(staticVal)}
-          size="s"
-          placeholder="—"
-          .options=${options.map((o) => ({ value: o, label: camelToLabel(o) }))}
-          @change=${(/** @type {any} */ e) => onChange(e.detail?.value ?? e.target.value)}
-        ></jx-value-selector>`;
-      } else {
-        widgetTpl = html`<sp-textfield
-          size="s"
-          value=${staticVal}
-          @input=${(/** @type {any} */ e) => {
-            clearTimeout(debounce);
-            debounce = setTimeout(() => onChange(e.target.value), 400);
-          }}
-        ></sp-textfield>`;
-      }
-
-      return html`
-        <div class="style-row" data-prop=${prop.name}>
-          <div class="style-row-label">
-            ${hasVal
-              ? html`<span class="set-dot" title="Clear ${prop.name}" @click=${clearProp}></span>`
-              : nothing}
-            <sp-field-label size="s" title=${prop.description || prop.name}
-              >${camelToLabel(prop.name)}</sp-field-label
-            >
-            <sp-action-button
-              size="xs"
-              quiet
-              title=${isBound ? "Unbind (switch to static)" : "Bind to signal"}
-              @click=${onToggleBind}
-              >${isBound ? "\u26A1" : "\u2194"}</sp-action-button
-            >
-          </div>
-          ${isBound ? boundTpl : widgetTpl}
-        </div>
-      `;
-    })}
-    ${comp.props.length === 0 ? html`<div class="empty-state">No props defined</div>` : nothing}
-    ${comp.path
-      ? html`<span class="kv-add" @click=${() => navigateToComponent(comp.path)}
-          >→ Edit definition</span
-        >`
-      : nothing}
-  `;
-}
-
-/** Custom attrs fields template */
-function renderCustomAttrsFieldsTemplate(
-  /** @type {any} */ node,
-  /** @type {any} */ path,
-  /** @type {any} */ attrs,
-  /** @type {any} */ knownAttrNames,
-) {
-  const customAttrs = Object.entries(attrs).filter(([k]) => !knownAttrNames.has(k));
-  return html`
-    ${customAttrs.map(([attr, val]) =>
-      kvRow(
-        attr,
-        String(val),
-        (/** @type {any} */ newAttr, /** @type {any} */ newVal) => {
-          if (newAttr !== attr) {
-            let s = updateAttribute(S, path, attr, undefined);
-            s = updateAttribute(s, path, newAttr, newVal);
-            update(s);
-          } else {
-            update(updateAttribute(S, path, attr, newVal));
-          }
-        },
-        () => update(updateAttribute(S, path, attr, undefined)),
-      ),
-    )}
-    <span class="kv-add" @click=${() => update(updateAttribute(S, path, "data-", ""))}
-      >+ Add attribute</span
-    >
-  `;
-}
-
-/** Media breakpoint fields template */
-
-function renderMediaFieldsTemplate(/** @type {any} */ node) {
-  const media = node.$media || {};
-  /** @type {any} */
-  let baseDebounce;
-  const breakpoints = Object.entries(media).filter(([k]) => k !== "--");
-
-  return html`
-    <div class="kv-row" style="align-items:center">
-      <span class="field-label" style="width:auto;margin-right:4px">Base width</span>
-      <input
-        class="field-input"
-        style="width:70px;flex:none"
-        placeholder="320px"
-        value=${media["--"] || ""}
-        @input=${(/** @type {any} */ e) => {
-          clearTimeout(baseDebounce);
-          baseDebounce = setTimeout(() => {
-            const val = e.target.value.trim();
-            update(updateMedia(S, "--", val || undefined));
-          }, 400);
-        }}
-      />
-      ${media["--"]
-        ? html`<span class="kv-del" @click=${() => update(updateMedia(S, "--", undefined))}
-            >✕</span
-          >`
-        : nothing}
-    </div>
-
-    ${breakpoints.map(([name, query]) => mediaBreakpointRowTemplate(name, query))}
-
-    <div>
-      <span
-        class="kv-add"
-        style=${view.showAddBreakpointForm ? "display:none" : ""}
-        @click=${(/** @type {any} */ _e) => {
-          view.showAddBreakpointForm = true;
-          renderRightPanel();
-        }}
-        >+ Add breakpoint</span
-      >
-      ${view.showAddBreakpointForm
-        ? html`
-            <div style="margin-top:4px">
-              <div style="display:flex;gap:4px;margin-bottom:3px;align-items:center">
-                <input
-                  class="field-input"
-                  placeholder="Name (e.g. Tablet)"
-                  style="flex:1"
-                  @input=${(/** @type {any} */ e) => {
-                    view.addBreakpointPreview = friendlyNameToMedia(e.target.value) || "";
-                    renderRightPanel();
-                  }}
-                />
-                <span
-                  style="font-size:10px;color:var(--fg-dim);font-family:'SF Mono','Fira Code',monospace;white-space:nowrap"
-                  >${view.addBreakpointPreview}</span
-                >
-              </div>
-              <div style="display:flex;gap:4px;margin-bottom:3px;align-items:center">
-                <input class="field-input add-bp-query" value="(min-width: 768px)" style="flex:1" />
-              </div>
-              <div style="display:flex;gap:4px">
-                <button
-                  class="kv-add"
-                  style="padding:2px 10px;cursor:pointer"
-                  @click=${(/** @type {any} */ e) => {
-                    const wrap = e.target.closest("div").parentElement;
-                    const nameVal = wrap.querySelector("input")?.value;
-                    const queryVal = wrap.querySelector(".add-bp-query")?.value?.trim();
-                    const key = friendlyNameToMedia(nameVal);
-                    if (key && queryVal) {
-                      view.showAddBreakpointForm = false;
-                      view.addBreakpointPreview = "";
-                      update(updateMedia(S, key, queryVal));
-                    }
-                  }}
-                >
-                  Add
-                </button>
-                <button
-                  class="kv-add"
-                  style="padding:2px 10px;cursor:pointer;color:var(--fg-dim)"
-                  @click=${() => {
-                    view.showAddBreakpointForm = false;
-                    view.addBreakpointPreview = "";
-                    renderRightPanel();
-                  }}
-                >
-                  Cancel
-                </button>
-              </div>
-            </div>
-          `
-        : nothing}
-    </div>
-  `;
-}
-
-/** Single media breakpoint row template */
-function mediaBreakpointRowTemplate(/** @type {any} */ name, /** @type {any} */ query) {
-  /** @type {any} */
-  let debounceTimer;
-  let currentRawLabel = name;
-  return html`
-    <div style="margin-bottom:6px;padding:4px 0;border-bottom:1px solid var(--border)">
-      <div style="display:flex;align-items:center;gap:4px;margin-bottom:2px">
-        <input
-          class="field-input"
-          value=${mediaDisplayName(name)}
-          style="flex:1;font-weight:600;font-size:12px"
-          @input=${(/** @type {any} */ e) => {
-            const newKey = friendlyNameToMedia(e.target.value);
-            currentRawLabel = newKey || "";
-            const rawEl = e.target.parentElement?.querySelector(".bp-raw-label");
-            if (rawEl) rawEl.textContent = currentRawLabel;
-            clearTimeout(debounceTimer);
-            debounceTimer = setTimeout(() => {
-              if (newKey && newKey !== name) {
-                const queryEl = e.target
-                  .closest("div[style]")
-                  ?.parentElement?.querySelector(".bp-query-input");
-                let s = updateMedia(S, name, undefined);
-                s = updateMedia(s, newKey, queryEl?.value || query);
-                update(s);
-              }
-            }, 600);
-          }}
-        />
-        <span
-          class="bp-raw-label"
-          style="font-size:10px;color:var(--fg-dim);font-family:'SF Mono','Fira Code',monospace;white-space:nowrap"
-          >${name}</span
-        >
-        <span class="kv-del" @click=${() => update(updateMedia(S, name, undefined))}>✕</span>
-      </div>
-      <div style="display:flex;gap:4px;align-items:center">
-        <input
-          class="field-input bp-query-input"
-          value=${query}
-          style="flex:1"
-          @input=${(/** @type {any} */ e) => {
-            clearTimeout(debounceTimer);
-            debounceTimer = setTimeout(() => update(updateMedia(S, name, e.target.value)), 400);
-          }}
-        />
-      </div>
-    </div>
-  `;
-}
-
-// ─── Style Sidebar (metadata-driven) ───────────────────────────────────────────
-
-// UNIT_RE — imported from ui/unit-selector.js
-
-// inferInputType — imported from studio-utils.js
-
-// ─── Style panel ────────────────────────────────────────────────────────────
-// Extracted to panels/style-utils.js, panels/style-inputs.js, panels/style-panel.js
-
-/** Check if a selection path is inside a $map template (contains [..., "children", "map", ...]). */
-function isInsideMapTemplate(/** @type {any} */ path) {
-  if (!path) return false;
-  for (let i = 0; i < path.length - 1; i++) {
-    if (path[i] === "children" && path[i + 1] === "map") return true;
-  }
-  return false;
-}
-
-/**
- * Field row with binding toggle — allows switching between static value and signal binding.
- * rawValue can be a string/bool (static) or { $ref: "..." } (bound).
- */
-function bindableFieldRow(
-  /** @type {any} */ label,
-  /** @type {any} */ type,
-  /** @type {any} */ rawValue,
-  /** @type {any} */ onChange,
-  /** @type {any} */ filterFn = null,
-  /** @type {any} */ extraSignals = null,
-) {
-  const defs = S.document.state || {};
-  const isBound = typeof rawValue === "object" && rawValue !== null && rawValue.$ref;
-
-  const signalDefs = Object.entries(defs).filter(([, d]) =>
-    filterFn ? filterFn(d) : !d.$handler && d.$prototype !== "Function",
-  );
-
-  /** @type {any} */
-  let debounce;
-  const onInput = (/** @type {any} */ e) => {
-    clearTimeout(debounce);
-    debounce = setTimeout(() => onChange(e.target.value), 400);
-  };
-
-  const staticVal = isBound ? "" : (rawValue ?? "");
-  const staticTpl =
-    type === "textarea"
-      ? html`<sp-textfield multiline size="s" value=${staticVal} @input=${onInput}></sp-textfield>`
-      : type === "checkbox"
-        ? html`<sp-checkbox
-            ?checked=${!!staticVal}
-            @change=${(/** @type {any} */ e) => onChange(e.target.checked)}
-          ></sp-checkbox>`
-        : html`<sp-textfield size="s" value=${staticVal} @input=${onInput}></sp-textfield>`;
-
-  const boundTpl = html`
-    <sp-picker
-      size="s"
-      quiet
-      placeholder="— select signal —"
-      value=${isBound && rawValue.$ref ? rawValue.$ref : nothing}
-      @change=${(/** @type {any} */ e) => {
-        if (e.target.value) onChange({ $ref: e.target.value });
-        else onChange(undefined);
-      }}
-    >
-      ${signalDefs.map(
-        ([defName]) => html`<sp-menu-item value=${`#/state/${defName}`}>${defName}</sp-menu-item>`,
-      )}
-      ${extraSignals
-        ? html`
-            <sp-menu-divider></sp-menu-divider>
-            ${extraSignals.map(
-              (/** @type {any} */ sig) =>
-                html`<sp-menu-item value=${sig.value}>${sig.label}</sp-menu-item>`,
-            )}
-          `
-        : nothing}
-    </sp-picker>
-  `;
-
-  const onToggle = () => {
-    if (isBound) {
-      const ref = rawValue.$ref;
-      const defName = ref.startsWith("#/state/") ? ref.slice(8) : ref;
-      const def = defs[defName];
-      let staticVal = "";
-      if (def && def.default !== undefined)
-        staticVal =
-          typeof def.default === "object" ? JSON.stringify(def.default) : String(def.default);
-      onChange(staticVal || undefined);
-    } else {
-      if (signalDefs.length > 0) {
-        onChange({ $ref: `#/state/${signalDefs[0][0]}` });
-      } else if (extraSignals?.length > 0) {
-        onChange({ $ref: extraSignals[0].value });
-      }
-    }
-  };
-
-  return html`
-    <div class="field-row">
-      <sp-field-label size="s">${label}</sp-field-label>
-      ${isBound ? boundTpl : staticTpl}
-      <sp-action-button
-        size="xs"
-        quiet
-        title=${isBound ? "Unbind (switch to static)" : "Bind to signal"}
-        @click=${onToggle}
-        >${isBound ? "\u26A1" : "\u2194"}</sp-action-button
-      >
-    </div>
-  `;
-}
-
-/** Key-value pair row for styles / attributes */
-function kvRow(
-  /** @type {any} */ key,
-  /** @type {any} */ value,
-  /** @type {any} */ onChange,
-  /** @type {any} */ onDelete,
-  /** @type {any} */ datalistId = null,
-) {
-  /** @type {any} */
-  let debounceTimer;
-  let currentKey = key;
-  let currentVal = value;
-  const commit = () => {
-    clearTimeout(debounceTimer);
-    debounceTimer = setTimeout(() => onChange(currentKey, currentVal), 400);
-  };
-  const placeholder = datalistId === "css-props" ? getCssInitialMap().get(key) || "" : "";
-  return html`
-    <div class="kv-row">
-      <sp-textfield
-        size="s"
-        class="kv-key"
-        value=${key}
-        @input=${(/** @type {any} */ e) => {
-          currentKey = e.target.value;
-          commit();
-        }}
-        @change=${datalistId === "css-props"
-          ? (/** @type {any} */ e) => {
-              const el = e.target.closest(".kv-row")?.querySelector(".kv-val");
-              if (el) el.setAttribute("placeholder", getCssInitialMap().get(e.target.value) || "");
-            }
-          : nothing}
-      ></sp-textfield>
-      <sp-textfield
-        size="s"
-        class="kv-val"
-        value=${value}
-        placeholder=${placeholder}
-        @input=${(/** @type {any} */ e) => {
-          currentVal = e.target.value;
-          commit();
-        }}
-      ></sp-textfield>
-      <sp-action-button size="xs" quiet @click=${onDelete}>
-        <sp-icon-close slot="icon"></sp-icon-close>
-      </sp-action-button>
-    </div>
-  `;
-}
-
-// ─── Source view ──────────────────────────────────────────────────────────────
-
-function _renderSourceView(/** @type {any} */ container) {
-  if (!S.selection) {
-    litRender(
-      html`
-        <textarea
-          id="source-view"
-          .value=${live(JSON.stringify(S.document, null, 2))}
-          @blur=${(/** @type {any} */ e) => {
-            try {
-              const parsed = JSON.parse(e.target.value);
-              update({ ...S, document: parsed, dirty: true });
-            } catch {}
-          }}
-        ></textarea>
-      `,
-      container,
-    );
-    return;
-  }
-
-  const node = getNodeAtPath(S.document, S.selection);
-  litRender(
-    html`
-      <textarea id="source-view" readonly .value=${live(JSON.stringify(node, null, 2))}></textarea>
-    `,
-    container,
-  );
-}
-
-// ─── Function editor (Monaco JS mode) ─────────────────────────────────────────
-
-function renderFunctionEditor() {
-  const editing = S.ui.editingFunction;
-
-  // If editor already exists and matches current target, just sync value
-  if (view.functionEditor && view.functionEditor._editingTarget === JSON.stringify(editing)) {
-    const body = getFunctionBody(editing);
-    const currentVal = view.functionEditor.getValue();
-    if (currentVal !== body) {
-      view.functionEditor._ignoreNextChange = true;
-      view.functionEditor.setValue(body);
-    }
-    return;
-  }
-
-  // Dispose previous editors
-  if (view.functionEditor) {
-    view.functionEditor.dispose();
-    view.functionEditor = null;
-  }
-  if (view.monacoEditor) {
-    view.monacoEditor.dispose();
-    view.monacoEditor = null;
-  }
-
-  // Clean up canvas DnD and event handlers
-  for (const fn of view.canvasDndCleanups) fn();
-  view.canvasDndCleanups = [];
-  for (const fn of view.canvasEventCleanups) fn();
-  view.canvasEventCleanups = [];
-  canvasPanels.length = 0;
-
-  litRender(nothing, canvasWrap);
-  canvasWrap.style.padding = "0";
-
-  // Toolbar breadcrumb handles context display — re-render it
-  renderToolbar();
-
-  // Editor container
-  /** @type {HTMLDivElement | null} */
-  let editorContainer = null;
-  litRender(
-    html`<div
-      class="source-editor"
-      ${ref((el) => {
-        if (el) editorContainer = /** @type {HTMLDivElement} */ (el);
-      })}
-    ></div>`,
-    canvasWrap,
-  );
-
-  const body = getFunctionBody(editing);
-  const args = getFunctionArgs(editing, S);
-
-  view.functionEditor = monaco.editor.create(/** @type {any} */ (editorContainer), {
-    value: body,
-    language: "javascript",
-    theme: "vs-dark",
-    automaticLayout: true,
-    minimap: { enabled: false },
-    fontSize: 12,
-    fontFamily: "'SF Mono', 'Fira Code', 'Consolas', monospace",
-    lineNumbers: "on",
-    scrollBeyondLastLine: false,
-    wordWrap: "on",
-    tabSize: 2,
-  });
-  view.functionEditor._editingTarget = JSON.stringify(editing);
-
-  // Format on open — show pretty-printed code, then run initial lint
-  codeService("format", { code: body, args }).then((result) => {
-    if (result?.code != null && view.functionEditor) {
-      view.functionEditor._ignoreNextChange = true;
-      view.functionEditor.setValue(result.code);
-    }
-  });
-  codeService("lint", { code: body, args }).then((result) => {
-    if (result?.diagnostics && view.functionEditor)
-      setLintMarkers(view.functionEditor, result.diagnostics);
-  });
-
-  // Debounced sync back to state + lint on edit
-  /** @type {any} */
-  let syncDebounce;
-  /** @type {any} */
-  let lintDebounce;
-  let lintGen = 0;
-  view.functionEditor.onDidChangeModelContent(() => {
-    if (view.functionEditor._ignoreNextChange) {
-      view.functionEditor._ignoreNextChange = false;
-      return;
-    }
-
-    clearTimeout(syncDebounce);
-    syncDebounce = setTimeout(() => {
-      const newBody = view.functionEditor.getValue();
-      if (editing.type === "def") {
-        update(updateDef(S, editing.defName, { body: newBody }));
-      } else if (editing.type === "event") {
-        const node = getNodeAtPath(S.document, editing.path);
-        const current = node?.[editing.eventKey] || {};
-        update(
-          updateProperty(S, editing.path, editing.eventKey, {
-            ...current,
-            $prototype: "Function",
-            body: newBody,
-          }),
-        );
-      }
-      renderLeftPanel();
-    }, 500);
-
-    clearTimeout(lintDebounce);
-    lintDebounce = setTimeout(() => {
-      const gen = ++lintGen;
-      const currentCode = view.functionEditor.getValue();
-      codeService("lint", { code: currentCode, args }).then((result) => {
-        if (gen !== lintGen) return;
-        if (result?.diagnostics && view.functionEditor)
-          setLintMarkers(view.functionEditor, result.diagnostics);
-      });
-    }, 750);
-  });
-}
-
-function getFunctionBody(/** @type {any} */ editing) {
-  if (editing.type === "def") {
-    return S.document.state?.[editing.defName]?.body || "";
-  } else if (editing.type === "event") {
-    const node = getNodeAtPath(S.document, editing.path);
-    return node?.[editing.eventKey]?.body || "";
-  }
-  return "";
-}
-
-// Register Monaco JS completion provider for state scope variables (once)
-function registerFunctionCompletions() {
-  if (view._completionRegistered) return;
-  view._completionRegistered = true;
-  monaco.languages.registerCompletionItemProvider("javascript", {
-    triggerCharacters: ["."],
-    provideCompletionItems(model, position) {
-      const defs = S?.document?.state || {};
-      const word = model.getWordUntilPosition(position);
-      const range = {
-        startLineNumber: position.lineNumber,
-        endLineNumber: position.lineNumber,
-        startColumn: word.startColumn,
-        endColumn: word.endColumn,
-      };
-
-      const suggestions = Object.entries(defs).map(([key, def]) => {
-        let kind = monaco.languages.CompletionItemKind.Variable;
-        if (def?.$prototype === "Function" || def?.$handler)
-          kind = monaco.languages.CompletionItemKind.Function;
-        else if (def?.$prototype) kind = monaco.languages.CompletionItemKind.Property;
-        return {
-          label: `state.${key}`,
-          kind,
-          insertText: `state.${key}`,
-          range,
-        };
-      });
-      return { suggestions };
-    },
-  });
-}
+// ─── Source/Function editors: delegated to panels/editors.js ─────────────────
 
 // ─── Toolbar (delegated to panels/toolbar.js) ────────────────────────────────