@jxsuite/studio 0.8.0 → 0.9.0

package/src/studio.js

@@ -8,9 +8,6 @@
 import {
   createState,
   selectNode,
-  hoverNode,
-  insertNode,
-  removeNode,
   updateProperty,
   updateDef,
   pushDocument,
@@ -18,13 +15,10 @@ import {
   getNodeAtPath,
   pathsEqual,
   parentElementPath,
-  childIndex,
-  isAncestor,
   canvasWrap,
   toolbarEl,
   elToPath,
   canvasPanels,
-  VOID_ELEMENTS,
   stripEventHandlers,
   registerRenderer,
   render,
@@ -51,18 +45,27 @@ import { view } from "./view.js";
 import { renderNode as runtimeRenderNode, buildScope, defineElement } from "@jxsuite/runtime";
 
 import {
-  startEditing,
-  stopEditing,
   isEditing,
   getActiveElement,
   isEditableBlock,
   isInlineInContext,
 } from "./editor/inline-edit.js";
 import {
-  showSlashMenu as sharedShowSlashMenu,
-  dismissSlashMenu as sharedDismissSlashMenu,
-  isSlashMenuOpen,
-} from "./editor/slash-menu.js";
+  enterComponentInlineEdit,
+  initComponentInlineEdit,
+} from "./editor/component-inline-edit.js";
+import { enterInlineEdit, initContentInlineEdit } from "./editor/content-inline-edit.js";
+import {
+  initCanvasUtils,
+  canvasPanelTemplate,
+  observeCenterUntilStable,
+  applyTransform,
+  renderZoomIndicator,
+  resetZoomIndicator,
+  positionZoomIndicator,
+  updateActivePanelHeaders,
+} from "./canvas/canvas-utils.js";
+import { dismissSlashMenu as sharedDismissSlashMenu } from "./editor/slash-menu.js";
 import {
   renderStatusbar,
   statusMessage,
@@ -91,7 +94,6 @@ import { registerPlatform, getPlatform, hasPlatform } from "./platform.js";
 import {
   parseMediaEntries,
   activeBreakpointsForWidth,
-  applyCanvasStyle,
   collectMediaOverrides,
   applyOverridesToCanvas,
 } from "./utils/canvas-media.js";
@@ -103,27 +105,15 @@ import {
   getEffectiveElements,
   getEffectiveHead,
 } from "./site-context.js";
-import {
-  defCategory,
-  defBadgeLabel,
-  resolveDefaultForCanvas,
-  renderSignalsTemplate,
-} from "./panels/signals-panel.js";
+import { defCategory, defBadgeLabel, renderSignalsTemplate } from "./panels/signals-panel.js";
 import {
   componentRegistry,
   loadComponentRegistry,
   computeRelativePath,
 } from "./files/components.js";
 
-import {
-  dropTargetForElements,
-  monitorForElements,
-} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-
 import { html, render as litRender, nothing } from "lit-html";
 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 { renderDataExplorerTemplate } from "./panels/data-explorer.js";
@@ -134,9 +124,8 @@ import { renderGitPanel } from "./panels/git-panel.js";
 // 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 "./ui/panel-resize.js";
-import { showContextMenu, dismissContextMenu } from "./editor/context-menu.js";
+import { dismissContextMenu } from "./editor/context-menu.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 * as toolbarPanel from "./panels/toolbar.js";
@@ -144,12 +133,7 @@ import * as overlaysPanel from "./panels/overlays.js";
 import * as rightPanelMod from "./panels/right-panel.js";
 import * as leftPanelMod from "./panels/left-panel.js";
 import { renderStylebookMode, renderStylebookOverlays } from "./panels/stylebook-panel.js";
-import {
-  registerLayersDnD,
-  registerComponentsDnD,
-  registerElementsDnD,
-  applyDropInstruction,
-} from "./panels/dnd.js";
+import { registerLayersDnD, registerComponentsDnD, registerElementsDnD } from "./panels/dnd.js";
 import { mediaDisplayName, defaultDef } from "./panels/shared.js";
 import { renderFunctionEditor, registerFunctionCompletions } from "./panels/editors.js";
 import {
@@ -158,6 +142,10 @@ import {
   initBlockActionBar,
 } from "./panels/block-action-bar.js";
 import { initCssData } from "./panels/style-utils.js";
+import { renderCanvasNode } from "./panels/preview-render.js";
+import { initPseudoPreview, updateForcedPseudoPreview } from "./panels/pseudo-preview.js";
+import { initCanvasDnD, registerPanelDnD } from "./panels/canvas-dnd.js";
+import { initPanelEvents, registerPanelEvents } from "./panels/panel-events.js";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 
 // ─── Globals ──────────────────────────────────────────────────────────────────
@@ -242,197 +230,7 @@ async function closeFunctionEditor() {
   updateUi("editingFunction", null);
 }
 
-/**
- * Convert a template string to a displayable expression for edit mode. Replaces ${expr} with ❮ expr
- * ❯ so the runtime renders it as literal text.
- *
- * @param {any} str
- */
-function templateToEditDisplay(str) {
-  return str.replace(/\$\{([^}]+)\}/g, "\u276A $1 \u276B");
-}
-
-/**
- * Reverse templateToEditDisplay: walk all text nodes in `el` and replace ❪ expr ❫ back to ${expr}
- * so the user edits raw template syntax.
- *
- * @param {any} el
- */
-function restoreTemplateExpressions(el) {
-  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
-  while (walker.nextNode()) {
-    const node = /** @type {any} */ (walker.currentNode);
-    if (node.textContent.includes("\u276A")) {
-      node.textContent = node.textContent.replace(/\u276A\s*(.*?)\s*\u276B/g, "${$1}");
-    }
-  }
-}
-
-/**
- * Prepare a document for edit-mode rendering. Replaces template strings with readable literal text,
- * $prototype:Array with placeholders, and $ref bindings with display labels. Preserves state so the
- * runtime can still initialise scope.
- *
- * @param {any} node
- * @returns {any}
- */
-function prepareForEditMode(node) {
-  if (!node || typeof node !== "object") return node;
-  if (Array.isArray(node)) return node.map(prepareForEditMode);
-
-  /** @type {Record<string, any>} */
-  const out = {};
-  for (const [k, v] of Object.entries(node)) {
-    if (k === "state" || k === "$media" || k === "$props" || k === "$elements") {
-      out[k] = v; // preserve as-is for runtime resolution
-    } else if (k === "children") {
-      if (Array.isArray(v)) {
-        out.children = v.map(prepareForEditMode);
-      } else if (v && typeof v === "object" && v.$prototype === "Array") {
-        // Wrap the map template in a visual repeater perimeter
-        const template = v.map;
-        if (template && typeof template === "object") {
-          out.children = [
-            {
-              tagName: "div",
-              className: "repeater-perimeter",
-              state: {
-                $map: { item: {}, index: 0 },
-                "$map/item": {},
-                "$map/index": 0,
-              },
-              children: [prepareForEditMode(template)],
-            },
-          ];
-        } else {
-          out.children = [];
-        }
-      } else {
-        out.children = prepareForEditMode(v);
-      }
-    } else if (k === "cases" && node.$switch && v && typeof v === "object") {
-      // Replace $switch cases with a placeholder showing the first case or a label
-      const caseKeys = Object.keys(v);
-      if (caseKeys.length > 0) {
-        const firstCase = v[caseKeys[0]];
-        if (firstCase && typeof firstCase === "object" && !firstCase.$ref) {
-          out.children = [prepareForEditMode(firstCase)];
-        } else {
-          out.children = [
-            {
-              tagName: "div",
-              textContent: `[$switch: ${caseKeys.join(" | ")}]`,
-              style: {
-                fontFamily: "'SF Mono', 'Fira Code', monospace",
-                fontSize: "11px",
-                padding: "6px 10px",
-                background: "color-mix(in srgb, var(--danger) 8%, transparent)",
-                border: "1px dashed color-mix(in srgb, var(--danger) 40%, transparent)",
-                borderRadius: "4px",
-                color: "var(--danger)",
-                fontStyle: "italic",
-              },
-            },
-          ];
-        }
-      }
-    } else if (k === "style") {
-      // Replace template strings in style values with empty strings
-      if (v && typeof v === "object") {
-        /** @type {Record<string, any>} */
-        const s = {};
-        for (const [sk, sv] of Object.entries(v)) {
-          s[sk] = typeof sv === "string" && sv.includes("${") ? "" : sv;
-        }
-        out.style = s;
-      } else {
-        out.style = v;
-      }
-    } else if (typeof v === "string" && v.includes("${")) {
-      // Template string in a display property → show raw expression
-      out[k] = templateToEditDisplay(v);
-    } else if (v && typeof v === "object" && v.$ref) {
-      // $ref binding → show ref path as literal text
-      const ref = v.$ref;
-      const label = ref.startsWith("#/state/") ? ref.slice(8) : ref;
-      out[k] = `{${label}}`;
-    } else {
-      out[k] = prepareForEditMode(v);
-    }
-  }
-
-  // Mark empty elements with placeholder classes for design-mode visibility
-  if (out.tagName && !out.textContent && !out.innerHTML) {
-    const hasChildren = Array.isArray(out.children) && out.children.length > 0;
-    if (!hasChildren) {
-      const tag = out.tagName;
-      const textTags = new Set([
-        "p",
-        "h1",
-        "h2",
-        "h3",
-        "h4",
-        "h5",
-        "h6",
-        "blockquote",
-        "li",
-        "dt",
-        "dd",
-        "th",
-        "td",
-        "span",
-        "strong",
-        "em",
-        "small",
-        "mark",
-        "code",
-        "abbr",
-        "q",
-        "sub",
-        "sup",
-        "time",
-        "a",
-        "button",
-        "label",
-        "legend",
-        "caption",
-        "summary",
-        "pre",
-        "option",
-      ]);
-      const containerTags = new Set([
-        "div",
-        "section",
-        "article",
-        "aside",
-        "header",
-        "footer",
-        "main",
-        "nav",
-        "figure",
-        "figcaption",
-        "details",
-        "fieldset",
-        "form",
-        "ul",
-        "ol",
-        "dl",
-        "table",
-      ]);
-      if (textTags.has(tag)) {
-        out.className = out.className
-          ? out.className + " empty-text-placeholder"
-          : "empty-text-placeholder";
-      } else if (containerTags.has(tag)) {
-        out.className = out.className
-          ? out.className + " empty-container-placeholder"
-          : "empty-container-placeholder";
-      }
-    }
-  }
-
-  return out;
-}
+import { prepareForEditMode } from "./utils/edit-display.js";
 
 /**
  * Render a Jx document into a canvas element using the real runtime. Populates elToPath for each
@@ -704,11 +502,6 @@ litRender(
 
 initCssData(webdata);
 
-// Persistent render hosts for lit-html (must be before bootstrap/render)
-let zoomIndicatorHost = document.createElement("div");
-zoomIndicatorHost.style.display = "contents";
-document.body.appendChild(zoomIndicatorHost);
-
 // ─── Module-level UI state (must be before render() call) ─────────────────────
 
 // ─── Bootstrap ────────────────────────────────────────────────────────────────
@@ -765,6 +558,32 @@ initBlockActionBar({
   createFloatingContainer,
 });
 
+initComponentInlineEdit({ findCanvasElement });
+initContentInlineEdit({ findCanvasElement, getActivePanel });
+initCanvasUtils({
+  getCanvasMode: () => canvasMode,
+  getZoom: () => S.ui.zoom,
+  setZoomDirect: (zoom) => {
+    session = { ...session, ui: { ...session.ui, zoom } };
+    S = toFlat(doc, session);
+  },
+  renderStylebookOverlays,
+});
+initPseudoPreview({ getActivePanel, findCanvasElement });
+initCanvasDnD({ effectiveZoom });
+initPanelEvents({
+  getState: () => S,
+  setState: (s) => {
+    S = s;
+  },
+  getCanvasMode: () => canvasMode,
+  bubbleInlinePath,
+  findCanvasElement,
+  enterInlineEdit,
+  navigateToComponent,
+  effectiveZoom,
+});
+
 rightPanelMod.mount({
   navigateToComponent,
   getCanvasMode: () => canvasMode,
@@ -803,6 +622,13 @@ registerRenderer("statusbar", () => renderStatusbar(S));
 setStatusbarRenderer(() => renderStatusbar(S));
 mountStatusbar();
 
+// Clicking on the canvas-wrap background (outside any canvas panel) deselects the current element
+canvasWrap.addEventListener("click", (/** @type {any} */ e) => {
+  if (e.target !== canvasWrap && e.target !== view.panzoomWrap) return;
+  if (!S.selection) return;
+  update(selectNode(S, null));
+});
+
 function safeRenderLeftPanel() {
   leftPanelMod.render();
 }
@@ -1124,14 +950,7 @@ function renderCanvas() {
     canvasWrap.style.overflow = "";
 
     // Clear zoom indicator (only re-rendered by design/preview/stylebook)
-    try {
-      litRender(nothing, zoomIndicatorHost);
-    } catch {
-      const newHost = document.createElement("div");
-      newHost.style.display = "contents";
-      zoomIndicatorHost.replaceWith(newHost);
-      zoomIndicatorHost = newHost;
-    }
+    resetZoomIndicator();
 
     // Dismiss open popovers/toolbars that are no longer relevant
     if (view.blockActionBarEl) litRender(nothing, view.blockActionBarEl);
@@ -1234,14 +1053,7 @@ function renderCanvas() {
       canvasWrap.style.overflow = "hidden";
 
       // Remove zoom indicator left over from design/preview mode
-      try {
-        litRender(nothing, zoomIndicatorHost);
-      } catch {
-        const newHost = document.createElement("div");
-        newHost.style.display = "contents";
-        zoomIndicatorHost.replaceWith(newHost);
-        zoomIndicatorHost = newHost;
-      }
+      resetZoomIndicator();
     }
 
     const { tpl: panelTpl, panel } = canvasPanelTemplate(null, null, true);
@@ -1389,6 +1201,7 @@ function renderCanvasIntoPanel(panel, activeBreakpoints, featureToggles) {
     registerPanelDnD(panel);
     registerPanelEvents(panel);
     renderOverlays();
+    updateForcedPseudoPreview();
 
     // Process pending inline edit now that the canvas is populated
     if (view.pendingInlineEdit) {
@@ -1403,518 +1216,6 @@ function renderCanvasIntoPanel(panel, activeBreakpoints, featureToggles) {
   });
 }
 
-/**
- * Create a canvas panel DOM structure. Returns { mediaName, element, canvas, overlay, overlayClk,
- * viewport, dropLine }
- *
- * @param {any} mediaName
- * @param {any} label
- * @param {any} fullWidth
- * @param {any} [width]
- */
-function canvasPanelTemplate(mediaName, label, fullWidth, width) {
-  /**
-   * @type {{
-   *   mediaName: any;
-   *   element: Element | null;
-   *   canvas: Element | null;
-   *   overlay: Element | null;
-   *   overlayClk: Element | null;
-   *   viewport: Element | null;
-   *   dropLine: Element | null;
-   *   _width: any;
-   * }}
-   */
-  const panel = {
-    mediaName,
-    element: null,
-    canvas: null,
-    overlay: null,
-    overlayClk: null,
-    viewport: null,
-    dropLine: null,
-    _width: width || null,
-  };
-  const tpl = html`
-    <div
-      class=${`canvas-panel${fullWidth ? " full-width" : ""}`}
-      data-media=${ifDefined(mediaName !== null ? mediaName : undefined)}
-      ${ref((el) => {
-        if (el) panel.element = el;
-      })}
-    >
-      ${label
-        ? html`
-            <div
-              class="canvas-panel-header"
-              @click=${() => {
-                updateUi("activeMedia", mediaName === "base" ? null : mediaName);
-              }}
-            >
-              ${label}
-            </div>
-          `
-        : nothing}
-      <div
-        class="canvas-panel-viewport"
-        style=${styleMap({ width: width && !fullWidth ? `${width}px` : "" })}
-        ${ref((el) => {
-          if (el) panel.viewport = el;
-        })}
-      >
-        <div
-          class="canvas-panel-canvas"
-          style=${styleMap({ width: width ? `${width}px` : "" })}
-          ${ref((el) => {
-            if (el) panel.canvas = el;
-          })}
-        ></div>
-        <div
-          class="canvas-panel-overlay"
-          ${ref((el) => {
-            if (el) panel.overlay = el;
-          })}
-        >
-          <div
-            class="canvas-drop-indicator"
-            style="display:none"
-            ${ref((el) => {
-              if (el) panel.dropLine = el;
-            })}
-          ></div>
-        </div>
-        <div
-          class="canvas-panel-click"
-          ${ref((el) => {
-            if (el) panel.overlayClk = el;
-          })}
-        ></div>
-      </div>
-    </div>
-  `;
-  return { tpl, panel };
-}
-
-/** Center canvas in viewport. */
-function centerCanvas() {
-  if (!view.panzoomWrap) return;
-  const wrapWidth = canvasWrap.clientWidth;
-  const wrapHeight = canvasWrap.clientHeight;
-  const contentWidth = view.panzoomWrap.scrollWidth;
-  const contentHeight = view.panzoomWrap.scrollHeight;
-  const scaledWidth = contentWidth * S.ui.zoom;
-  const scaledHeight = contentHeight * S.ui.zoom;
-  view.panX = Math.max(16, (wrapWidth - scaledWidth) / 2);
-  // Center vertically only when content fits; top-align with margin when taller
-  const verticalCenter = (wrapHeight - scaledHeight) / 2;
-  view.panY = verticalCenter > 16 ? verticalCenter : 16;
-}
-
-/**
- * Attach a ResizeObserver to view.panzoomWrap that re-centers until the user pans. Handles async
- * content (runtime rendering, data fetching) that changes layout after initial paint.
- */
-function observeCenterUntilStable() {
-  if (view.centerObserver) {
-    view.centerObserver.disconnect();
-    view.centerObserver = null;
-  }
-  if (!view.panzoomWrap) return;
-  view.needsCenter = true;
-  view.centerObserver = new ResizeObserver(() => {
-    if (!view.needsCenter) {
-      view.centerObserver?.disconnect();
-      view.centerObserver = null;
-      return;
-    }
-    centerCanvas();
-    applyTransform();
-  });
-  view.centerObserver.observe(view.panzoomWrap);
-  // Also center immediately for synchronous content
-  centerCanvas();
-}
-
-/** Apply the current zoom + pan transform to the panzoom wrapper. */
-function applyTransform() {
-  if (!view.panzoomWrap) return;
-  view.panzoomWrap.style.transform = `translate(${view.panX}px, ${view.panY}px) scale(${S.ui.zoom})`;
-  const label = document.querySelector(".zoom-indicator-label");
-  if (label) label.textContent = `${Math.round(S.ui.zoom * 100)}%`;
-  renderOverlays();
-  if (canvasMode === "settings") renderStylebookOverlays();
-}
-
-/** Lightweight in-place zoom update — no full re-render. */
-function _applyZoom() {
-  applyTransform();
-}
-
-/** Calculate zoom + pan to fit all panels within the viewport. */
-function fitToScreen() {
-  if (!view.panzoomWrap) return;
-  const wrapWidth = canvasWrap.clientWidth;
-  const wrapHeight = canvasWrap.clientHeight;
-  const gap = 24;
-  const padding = 32;
-  let totalPanelWidth = 0;
-  let maxPanelHeight = 0;
-  for (const p of canvasPanels) {
-    totalPanelWidth += p._width || 800;
-  }
-  totalPanelWidth += gap * Math.max(0, canvasPanels.length - 1) + padding;
-
-  // Get actual content height from rendered panels
-  const wrapRect = view.panzoomWrap.getBoundingClientRect();
-  const unscaledHeight = wrapRect.height / S.ui.zoom;
-  maxPanelHeight = unscaledHeight + padding;
-
-  const fitZoomW = wrapWidth / totalPanelWidth;
-  const fitZoomH = wrapHeight / maxPanelHeight;
-  const fitZoom = Math.min(5.0, Math.max(0.05, Math.min(fitZoomW, fitZoomH)));
-
-  session = { ...session, ui: { ...session.ui, zoom: fitZoom } };
-  S = toFlat(doc, session);
-  // Center the content
-  const scaledWidth = totalPanelWidth * fitZoom;
-  const scaledHeight = maxPanelHeight * fitZoom;
-  view.panX = Math.max(0, (wrapWidth - scaledWidth) / 2);
-  view.panY = Math.max(0, (wrapHeight - scaledHeight) / 2);
-  applyTransform();
-}
-
-/**
- * Render the floating zoom indicator at the bottom center of canvas-wrap. Uses position: fixed,
- * computed from canvas-wrap bounds.
- */
-function renderZoomIndicator() {
-  // Reset lit-html state if the host was disconnected or markers were ejected
-  if (!zoomIndicatorHost.isConnected) document.body.appendChild(zoomIndicatorHost);
-  try {
-    litRender(
-      html`
-        <div class="zoom-indicator">
-          <span class="zoom-indicator-label">${Math.round(S.ui.zoom * 100)}%</span>
-          <sp-action-button
-            quiet
-            size="s"
-            class="zoom-fit-btn"
-            title="Fit to screen"
-            @click=${fitToScreen}
-          >
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 16 16"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
-            >
-              <rect x="2" y="2" width="12" height="12" rx="1" />
-              <path d="M2 6h12M6 2v12" />
-            </svg>
-          </sp-action-button>
-        </div>
-      `,
-      zoomIndicatorHost,
-    );
-  } catch {
-    // Lit markers were corrupted — replace the host element to fully reset Lit state
-    const newHost = document.createElement("div");
-    newHost.style.display = "contents";
-    zoomIndicatorHost.replaceWith(newHost);
-    zoomIndicatorHost = newHost;
-    litRender(
-      html`
-        <div class="zoom-indicator">
-          <span class="zoom-indicator-label">${Math.round(S.ui.zoom * 100)}%</span>
-          <sp-action-button
-            quiet
-            size="s"
-            class="zoom-fit-btn"
-            title="Fit to screen"
-            @click=${fitToScreen}
-          >
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 16 16"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
-            >
-              <rect x="2" y="2" width="12" height="12" rx="1" />
-              <path d="M2 6h12M6 2v12" />
-            </svg>
-          </sp-action-button>
-        </div>
-      `,
-      zoomIndicatorHost,
-    );
-  }
-  positionZoomIndicator();
-}
-
-function positionZoomIndicator() {
-  const indicator = /** @type {HTMLElement | null} */ (document.querySelector(".zoom-indicator"));
-  if (!indicator) return;
-  const rect = canvasWrap.getBoundingClientRect();
-  indicator.style.left = `${rect.left + rect.width / 2}px`;
-  indicator.style.top = `${rect.bottom - 32}px`;
-  indicator.style.transform = "translateX(-50%)";
-}
-
-function updateActivePanelHeaders() {
-  for (const p of canvasPanels) {
-    const header = p.element.querySelector(".canvas-panel-header");
-    if (header) {
-      const isActive =
-        (S.ui.activeMedia === null && p.mediaName === "base") ||
-        (S.ui.activeMedia === null && p.mediaName === null) ||
-        S.ui.activeMedia === p.mediaName;
-      header.classList.toggle("active", isActive);
-    }
-  }
-}
-
-/**
- * Recursively render a Jx node to the canvas DOM. Media-aware: applies base styles + active
- * breakpoint/feature overrides.
- *
- * @param {any} node
- * @param {any} path
- * @param {any} parent
- * @param {any} activeBreakpoints
- * @param {any} featureToggles
- */
-function renderCanvasNode(node, path, parent, activeBreakpoints, featureToggles) {
-  // Text node children: bare strings/numbers/booleans → DOM Text nodes
-  if (typeof node === "string" || typeof node === "number" || typeof node === "boolean") {
-    parent.appendChild(document.createTextNode(String(node)));
-    return;
-  }
-  if (!node || typeof node !== "object") return;
-
-  const tag = node.tagName || "div";
-  const el = document.createElement(tag);
-
-  elToPath.set(el, path);
-
-  if (typeof node.textContent === "string") {
-    el.textContent = node.textContent;
-  } else if (typeof node.textContent === "object" && node.textContent?.$ref) {
-    const resolved = resolveDefaultForCanvas(node.textContent, S.document.state);
-    el.textContent = resolved;
-    el.style.opacity = "0.7";
-    el.style.fontStyle = "italic";
-    el.title = `Bound: ${node.textContent.$ref}`;
-  }
-
-  if (node.id) el.id = node.id;
-  if (node.className) el.className = node.className;
-
-  applyCanvasStyle(el, node.style, activeBreakpoints, featureToggles);
-
-  if (node.attributes && typeof node.attributes === "object") {
-    for (const [attr, val] of Object.entries(node.attributes)) {
-      try {
-        if (typeof val === "object" && val?.$ref) {
-          const resolved = resolveDefaultForCanvas(val, S.document.state);
-          el.setAttribute(attr, resolved);
-        } else {
-          el.setAttribute(attr, val);
-        }
-      } catch {}
-    }
-  }
-
-  if (Array.isArray(node.children)) {
-    for (let i = 0; i < node.children.length; i++) {
-      renderCanvasNode(
-        node.children[i],
-        [...path, "children", i],
-        el,
-        activeBreakpoints,
-        featureToggles,
-      );
-    }
-  } else if (
-    node.children &&
-    typeof node.children === "object" &&
-    node.children.$prototype === "Array"
-  ) {
-    // Wrap the map template in a visual repeater perimeter
-    const template = node.children.map;
-    if (template && typeof template === "object") {
-      const wrapper = document.createElement("div");
-      wrapper.className = "repeater-perimeter";
-      elToPath.set(wrapper, [...path, "children"]);
-      renderCanvasNode(
-        template,
-        [...path, "children", "map"],
-        wrapper,
-        activeBreakpoints,
-        featureToggles,
-      );
-      el.appendChild(wrapper);
-    }
-  }
-
-  if (node.$switch && node.cases && typeof node.cases === "object") {
-    // $switch placeholder in structural preview
-    const keys = Object.keys(node.cases);
-    const placeholder = document.createElement("div");
-    placeholder.textContent = `[$switch: ${keys.join(" | ")}]`;
-    placeholder.style.cssText =
-      "font-family:monospace;font-size:11px;padding:6px 10px;background:color-mix(in srgb, var(--danger) 8%, transparent);border:1px dashed color-mix(in srgb, var(--danger) 40%, transparent);border-radius:4px;color:var(--danger);font-style:italic";
-    el.appendChild(placeholder);
-  }
-
-  el.style.pointerEvents = "none";
-  parent.appendChild(el);
-  return el;
-}
-
-/**
- * Track the last drag pointer position for canvas drop calculations
- *
- * @type {any}
- */
-
-/**
- * Register all canvas elements in a panel as DnD drop targets.
- *
- * @param {any} panel
- */
-function registerPanelDnD(panel) {
-  const { canvas, overlayClk: _overlayClk, dropLine } = panel;
-  const allEls = canvas.querySelectorAll("*");
-
-  const monitorCleanup = monitorForElements({
-    onDragStart() {
-      for (const el of canvas.querySelectorAll("*")) {
-        /** @type {any} */ (el).style.pointerEvents = "auto";
-      }
-      // Disable click layers on ALL panels during drag
-      for (const p of canvasPanels) p.overlayClk.style.pointerEvents = "none";
-    },
-    onDrag({ location }) {
-      view.lastDragInput = location.current.input;
-    },
-    onDrop() {
-      // Hide all drop lines
-      for (const p of canvasPanels) p.dropLine.style.display = "none";
-      view.lastDragInput = null;
-      for (const el of canvas.querySelectorAll("*")) {
-        /** @type {any} */ (el).style.pointerEvents = "none";
-      }
-      for (const p of canvasPanels) p.overlayClk.style.pointerEvents = "";
-    },
-  });
-  view.canvasDndCleanups.push(monitorCleanup);
-
-  for (const el of allEls) {
-    const elPath = elToPath.get(el);
-    if (!elPath) continue;
-
-    const node = getNodeAtPath(S.document, elPath);
-    const isVoid = VOID_ELEMENTS.has((node?.tagName || "div").toLowerCase());
-
-    const cleanup = dropTargetForElements({
-      element: el,
-      canDrop({ source }) {
-        const srcPath = source.data.path;
-        if (srcPath && isAncestor(/** @type {any} */ (srcPath), elPath)) return false;
-        return true;
-      },
-      getData() {
-        return { path: elPath, _isVoid: isVoid };
-      },
-      onDragEnter() {
-        showCanvasDropIndicator(el, elPath, isVoid, panel);
-      },
-      onDrag() {
-        showCanvasDropIndicator(el, elPath, isVoid, panel);
-      },
-      onDragLeave() {
-        dropLine.style.display = "none";
-        el.classList.remove("canvas-drop-target");
-      },
-      onDrop({ source }) {
-        dropLine.style.display = "none";
-        el.classList.remove("canvas-drop-target");
-        const instruction = getCanvasDropInstruction(el, elPath, isVoid);
-        if (!instruction) return;
-        applyDropInstruction(instruction, source.data, elPath);
-      },
-    });
-    view.canvasDndCleanups.push(cleanup);
-  }
-}
-
-/**
- * @param {any} el
- * @param {any} elPath
- * @param {any} isVoid
- */
-function getCanvasDropInstruction(el, elPath, isVoid) {
-  const rect = el.getBoundingClientRect();
-  if (!view.lastDragInput) return null;
-  const y = view.lastDragInput.clientY;
-  const relY = (y - rect.top) / rect.height;
-
-  if (elPath.length === 0) return { type: "make-child" };
-  if (isVoid) return relY < 0.5 ? { type: "reorder-above" } : { type: "reorder-below" };
-  if (relY < 0.25) return { type: "reorder-above" };
-  if (relY > 0.75) return { type: "reorder-below" };
-  return { type: "make-child" };
-}
-
-/**
- * @param {any} el
- * @param {any} elPath
- * @param {any} isVoid
- * @param {any} panel
- */
-function showCanvasDropIndicator(el, elPath, isVoid, panel) {
-  const instruction = getCanvasDropInstruction(el, elPath, isVoid);
-  const { dropLine, viewport } = panel;
-  if (!instruction) {
-    dropLine.style.display = "none";
-    return;
-  }
-
-  const scale = effectiveZoom();
-  const wrapRect = viewport.getBoundingClientRect();
-  const elRect = el.getBoundingClientRect();
-  const left = (elRect.left - wrapRect.left + viewport.scrollLeft) / scale;
-  const width = elRect.width / scale;
-
-  if (instruction.type === "make-child") {
-    dropLine.style.display = "block";
-    dropLine.style.top = `${(elRect.top - wrapRect.top + viewport.scrollTop) / scale}px`;
-    dropLine.style.left = `${left}px`;
-    dropLine.style.width = `${width}px`;
-    dropLine.style.height = `${elRect.height / scale}px`;
-    dropLine.className = "canvas-drop-indicator inside";
-    el.classList.add("canvas-drop-target");
-    return;
-  }
-
-  el.classList.remove("canvas-drop-target");
-  const top =
-    instruction.type === "reorder-above"
-      ? (elRect.top - wrapRect.top + viewport.scrollTop) / scale
-      : (elRect.bottom - wrapRect.top + viewport.scrollTop) / scale;
-
-  dropLine.style.display = "block";
-  dropLine.style.top = `${top}px`;
-  dropLine.style.left = `${left}px`;
-  dropLine.style.width = `${width}px`;
-  dropLine.style.height = "2px";
-  dropLine.className = "canvas-drop-indicator line";
-}
-
 // ─── Overlay system ───────────────────────────────────────────────────────────
 
 function renderOverlays() {
@@ -1951,57 +1252,6 @@ function getActivePanel() {
   return canvasPanels[0];
 }
 
-// ── 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.
-
-function updateForcedPseudoPreview() {
-  // Clean up previous
-  if (view.forcedStyleTag) {
-    view.forcedStyleTag.remove();
-    view.forcedStyleTag = null;
-  }
-  if (view.forcedAttrEl) {
-    view.forcedAttrEl.removeAttribute("data-studio-forced");
-    view.forcedAttrEl = null;
-  }
-
-  const sel = S.ui?.activeSelector;
-  if (!sel || !sel.startsWith(":") || !S.selection) return;
-
-  const panel = getActivePanel();
-  if (!panel) return;
-  const el = findCanvasElement(S.selection, panel.canvas);
-  if (!el) return;
-
-  // Read the nested style object for this selector
-  const node = getNodeAtPath(S.document, S.selection);
-  if (!node?.style) return;
-  const activeTab = S.ui.activeMedia;
-  /** @type {any} */
-  const ctx = activeTab ? node.style[`@${activeTab}`] || {} : node.style;
-  const rules = ctx[sel];
-  if (!rules || typeof rules !== "object") return;
-
-  // Build CSS text from the rules
-  const cssProps = Object.entries(rules)
-    .filter(([k]) => typeof rules[k] === "string" || typeof rules[k] === "number")
-    .map(
-      ([k, v]) =>
-        `${k.replace(/[A-Z]/g, (/** @type {any} */ c) => `-${c.toLowerCase()}`)}: ${v} !important`,
-    )
-    .join("; ");
-  if (!cssProps) return;
-
-  el.setAttribute("data-studio-forced", "1");
-  view.forcedAttrEl = el;
-
-  const tag = document.createElement("style");
-  tag.textContent = `[data-studio-forced] { ${cssProps} }`;
-  document.head.appendChild(tag);
-  view.forcedStyleTag = tag;
-}
-
 /**
  * Walk up the tree from a path, bubbling past inline elements until we find the nearest non-inline
  * ancestor. Returns the original path if already non-inline.
@@ -2071,733 +1321,6 @@ function findCanvasElement(path, canvasEl) {
   return null;
 }
 
-// ─── Per-panel click-to-select ────────────────────────────────────────────────
-
-/** @param {any} panel */
-function registerPanelEvents(panel) {
-  const { canvas, overlayClk, mediaName } = panel;
-  const ac = new AbortController();
-  const opts = { signal: ac.signal };
-  view.canvasEventCleanups.push(() => ac.abort());
-
-  /** @param {any} fn */
-  function withPanelPointerEvents(fn) {
-    const els = canvas.querySelectorAll("*");
-    for (const el of els) el.style.pointerEvents = "auto";
-    overlayClk.style.display = "none";
-    const result = fn();
-    overlayClk.style.display = "";
-    for (const el of els) el.style.pointerEvents = "none";
-    return result;
-  }
-
-  // During component inline edit, the overlayClk is disabled (see enterComponentInlineEdit).
-  // No mousedown passthrough needed — native events reach the contenteditable directly.
-
-  overlayClk.addEventListener(
-    "click",
-    (/** @type {any} */ e) => {
-      // Don't intercept clicks meant for the block action bar
-      const barInner = view.blockActionBarEl?.firstElementChild;
-      if (barInner) {
-        const r = barInner.getBoundingClientRect();
-        if (
-          e.clientX >= r.left &&
-          e.clientX <= r.right &&
-          e.clientY >= r.top &&
-          e.clientY <= r.bottom
-        )
-          return;
-      }
-      // If content-mode inline editing is active, treat click outside as blur
-      if (isEditing()) {
-        stopEditing();
-      }
-
-      // Component-mode inline editing is handled by its own document-level listener
-      // (see enterComponentInlineEdit), so nothing to do here — just fall through.
-
-      const elements = withPanelPointerEvents(() =>
-        document.elementsFromPoint(e.clientX, e.clientY),
-      );
-
-      for (const el of elements) {
-        if (canvas.contains(el) && el !== canvas) {
-          const originalPath = elToPath.get(el);
-          if (originalPath) {
-            let path = bubbleInlinePath(S.document, originalPath);
-            const newMedia = mediaName === "base" ? null : (mediaName ?? null);
-            const withMedia = { ...S, ui: { ...S.ui, activeMedia: newMedia } };
-
-            // Find the DOM element for the bubbled path (may differ from hit element)
-            // When path didn't change (no inline bubbling), prefer the hit element directly
-            // since findCanvasElement can't navigate into custom element template DOM.
-            const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
-
-            // Re-click on selected editable block: enter inline editing
-            // Edit mode / content mode → rich text editing (enterInlineEdit)
-            // Design mode → plaintext component editing (enterComponentInlineEdit via view.pendingInlineEdit)
-            if (
-              pathsEqual(path, S.selection) &&
-              isEditableBlock(resolvedEl) &&
-              (canvasMode === "edit" || S.mode === "content")
-            ) {
-              S = withMedia;
-              enterInlineEdit(resolvedEl, path);
-              return;
-            }
-
-            // Design mode or first click: select and schedule component inline editing
-            if (canvasMode === "design" && S.mode !== "content") {
-              view.pendingInlineEdit = { path, mediaName };
-              update(selectNode(withMedia, path));
-              return;
-            }
-
-            update(selectNode(withMedia, path));
-            return;
-          }
-        }
-      }
-      update(selectNode(S, null));
-    },
-    opts,
-  );
-
-  // Double-click shortcut for immediate inline editing
-  overlayClk.addEventListener(
-    "dblclick",
-    (/** @type {any} */ e) => {
-      const barInner = view.blockActionBarEl?.firstElementChild;
-      if (barInner) {
-        const r = barInner.getBoundingClientRect();
-        if (
-          e.clientX >= r.left &&
-          e.clientX <= r.right &&
-          e.clientY >= r.top &&
-          e.clientY <= r.bottom
-        )
-          return;
-      }
-      if (canvasMode !== "edit" && canvasMode !== "design") return;
-
-      const elements = withPanelPointerEvents(() =>
-        document.elementsFromPoint(e.clientX, e.clientY),
-      );
-
-      for (const el of elements) {
-        if (canvas.contains(el) && el !== canvas) {
-          const originalPath = elToPath.get(el);
-          if (originalPath) {
-            const path = bubbleInlinePath(S.document, originalPath);
-            const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
-            if (isEditableBlock(resolvedEl)) {
-              const newMedia = mediaName === "base" ? null : (mediaName ?? null);
-              const withMedia = { ...S, ui: { ...S.ui, activeMedia: newMedia } };
-              update(selectNode(withMedia, path));
-              enterInlineEdit(resolvedEl, path);
-              return;
-            }
-          }
-        }
-      }
-    },
-    opts,
-  );
-
-  overlayClk.addEventListener(
-    "contextmenu",
-    (/** @type {any} */ e) => {
-      const barInner = view.blockActionBarEl?.firstElementChild;
-      if (barInner) {
-        const r = barInner.getBoundingClientRect();
-        if (
-          e.clientX >= r.left &&
-          e.clientX <= r.right &&
-          e.clientY >= r.top &&
-          e.clientY <= r.bottom
-        )
-          return;
-      }
-      const elements = withPanelPointerEvents(() =>
-        document.elementsFromPoint(e.clientX, e.clientY),
-      );
-      for (const el of elements) {
-        if (canvas.contains(el) && el !== canvas) {
-          let path = elToPath.get(el);
-          if (path) {
-            path = bubbleInlinePath(S.document, path);
-            showContextMenu(e, path, S, { onEditComponent: navigateToComponent });
-            return;
-          }
-        }
-      }
-      e.preventDefault();
-    },
-    opts,
-  );
-
-  overlayClk.addEventListener(
-    "mousemove",
-    (/** @type {any} */ e) => {
-      const barInner = view.blockActionBarEl?.firstElementChild;
-      if (barInner) {
-        const r = barInner.getBoundingClientRect();
-        if (
-          e.clientX >= r.left &&
-          e.clientX <= r.right &&
-          e.clientY >= r.top &&
-          e.clientY <= r.bottom
-        )
-          return;
-      }
-      const el = withPanelPointerEvents(() => document.elementFromPoint(e.clientX, e.clientY));
-      if (el && canvas.contains(el) && el !== canvas) {
-        let path = elToPath.get(el);
-        if (path) {
-          path = bubbleInlinePath(S.document, path);
-          if (!pathsEqual(path, S.hover)) {
-            S = hoverNode(S, path);
-            renderOverlays();
-          }
-        }
-      } else if (S.hover) {
-        S = hoverNode(S, null);
-        renderOverlays();
-      }
-    },
-    opts,
-  );
-
-  overlayClk.addEventListener(
-    "mouseleave",
-    () => {
-      if (S.hover) {
-        S = hoverNode(S, null);
-        renderOverlays();
-      }
-    },
-    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 ────────────────────────────────────────────────────
-
-/**
- * Enter inline editing mode on a canvas element. Hides the overlay for the element and makes it
- * contenteditable.
- *
- * @param {any} el
- * @param {any} path
- */
-function enterInlineEdit(el, path) {
-  // Restore raw template expressions before editing.
-  // prepareForEditMode renders ${expr} as ❪ expr ❫ for display;
-  // revert so the user edits the real syntax and commits it back intact.
-  restoreTemplateExpressions(el);
-
-  // Hide overlays while editing
-  for (const p of canvasPanels) {
-    p.overlay.style.display = "none";
-    p.overlayClk.style.pointerEvents = "none";
-  }
-
-  startEditing(el, path, {
-    onCommit(
-      /** @type {any} */ commitPath,
-      /** @type {any} */ children,
-      /** @type {any} */ textContent,
-    ) {
-      // Update the Jx node with the edited content
-      if (children) {
-        let s = updateProperty(S, commitPath, "textContent", undefined);
-        s = updateProperty(s, commitPath, "children", children);
-        update(s);
-      } else if (textContent != null) {
-        let s = updateProperty(S, commitPath, "children", undefined);
-        s = updateProperty(s, commitPath, "textContent", textContent);
-        update(s);
-      }
-    },
-
-    onSplit(/** @type {any} */ splitPath, /** @type {any} */ before, /** @type {any} */ after) {
-      // Update current element with "before" content
-      const tag = "p";
-      let s = S;
-
-      if (before.textContent != null) {
-        s = updateProperty(s, splitPath, "children", undefined);
-        s = updateProperty(s, splitPath, "textContent", before.textContent);
-      } else if (before.children) {
-        s = updateProperty(s, splitPath, "textContent", undefined);
-        s = updateProperty(s, splitPath, "children", before.children);
-      }
-
-      // Insert new element after with "after" content
-      const parentPath = /** @type {any} */ (parentElementPath(splitPath));
-      const idx = /** @type {number} */ (childIndex(splitPath));
-      /** @type {any} */
-      const newNode = { tagName: tag };
-      if (after.textContent != null) {
-        newNode.textContent = after.textContent;
-      } else if (after.children) {
-        newNode.children = after.children;
-      } else {
-        newNode.textContent = "";
-      }
-
-      s = insertNode(s, parentPath, idx + 1, newNode);
-      // Select the new element
-      const newPath = [...parentPath, "children", idx + 1];
-      s = selectNode(s, newPath);
-      update(s);
-
-      // Re-enter editing on the new element after render
-      requestAnimationFrame(() => {
-        const activePanel = getActivePanel();
-        if (activePanel) {
-          const newEl = findCanvasElement(newPath, activePanel.canvas);
-          if (newEl && isEditableBlock(newEl)) {
-            enterInlineEdit(newEl, newPath);
-            // Place cursor at start of new element
-            const sel = window.getSelection();
-            const range = document.createRange();
-            range.selectNodeContents(newEl);
-            range.collapse(true); // collapse to start
-            sel?.removeAllRanges();
-            sel?.addRange(range);
-          }
-        }
-      });
-    },
-
-    onInsert(/** @type {any} */ afterPath, /** @type {any} */ cmd, /** @type {any} */ commitData) {
-      // cmd comes from the shared slash menu: { label, tag, description }
-      const isEmpty =
-        !commitData ||
-        (commitData.textContent != null && commitData.textContent.trim() === "") ||
-        (commitData.children &&
-          (commitData.children.length === 0 ||
-            (commitData.children.length === 1 &&
-              typeof commitData.children[0] === "string" &&
-              commitData.children[0].trim() === "") ||
-            (commitData.children.length === 1 &&
-              typeof commitData.children[0] === "object" &&
-              commitData.children[0]?.tagName === "br")));
-
-      // If the element is empty, swap its tagName instead of inserting after
-      if (isEmpty) {
-        let s = S;
-        s = updateProperty(s, afterPath, "tagName", cmd.tag);
-        s = updateProperty(s, afterPath, "children", undefined);
-        const def = defaultDef(cmd.tag);
-        if (def.textContent && def.textContent !== "Paragraph text") {
-          s = updateProperty(s, afterPath, "textContent", def.textContent);
-        } else {
-          s = updateProperty(s, afterPath, "textContent", undefined);
-        }
-        s = selectNode(s, afterPath);
-        update(s);
-
-        requestAnimationFrame(() => {
-          const activePanel = getActivePanel();
-          if (activePanel) {
-            const el = findCanvasElement(afterPath, activePanel.canvas);
-            if (el && isEditableBlock(el)) {
-              enterInlineEdit(el, afterPath);
-            }
-          }
-        });
-        return;
-      }
-
-      const elementDef = defaultDef(cmd.tag);
-      const parentPath = /** @type {any} */ (parentElementPath(afterPath));
-      const idx = /** @type {number} */ (childIndex(afterPath));
-
-      // Apply pending commit from inline edit first (batched to avoid double render)
-      let s = S;
-      if (commitData) {
-        if (commitData.children) {
-          s = updateProperty(s, afterPath, "textContent", undefined);
-          s = updateProperty(s, afterPath, "children", commitData.children);
-        } else if (commitData.textContent != null) {
-          s = updateProperty(s, afterPath, "children", undefined);
-          s = updateProperty(s, afterPath, "textContent", commitData.textContent);
-        }
-      }
-
-      s = insertNode(s, parentPath, idx + 1, structuredClone(elementDef));
-      const newPath = [...parentPath, "children", idx + 1];
-      s = selectNode(s, newPath);
-      update(s);
-
-      // If the inserted element is editable, enter editing
-      requestAnimationFrame(() => {
-        const activePanel = getActivePanel();
-        if (activePanel) {
-          const newEl = findCanvasElement(newPath, activePanel.canvas);
-          if (newEl && isEditableBlock(newEl)) {
-            enterInlineEdit(newEl, newPath);
-          }
-        }
-      });
-    },
-
-    onEnd() {
-      // Cleanup inline edit listeners
-      if (view.inlineEditCleanup) {
-        view.inlineEditCleanup();
-        view.inlineEditCleanup = null;
-      }
-      // Restore overlays after inline editing ends
-      for (const p of canvasPanels) {
-        p.overlay.style.display = "";
-        p.overlayClk.style.pointerEvents = "";
-      }
-      renderOverlays();
-    },
-  });
-
-  // Show the block action bar (with inline formatting buttons) on the viewport
-  // Defer to ensure this runs after any synchronous renderOverlays() from update()
-  requestAnimationFrame(() => renderBlockActionBar());
-
-  // Re-render action bar when selection changes inside contenteditable
-  const selectionHandler = () => renderBlockActionBar();
-  document.addEventListener("selectionchange", selectionHandler);
-  el.addEventListener("mouseup", selectionHandler);
-  el.addEventListener("keyup", selectionHandler);
-
-  // Store listeners for cleanup
-  const inlineEditCleanup = () => {
-    document.removeEventListener("selectionchange", selectionHandler);
-    el.removeEventListener("mouseup", selectionHandler);
-    el.removeEventListener("keyup", selectionHandler);
-  };
-  view.inlineEditCleanup = inlineEditCleanup;
-}
-
-// ─── Component-mode inline text editing ──────────────────────────────────────
-
-/**
- * @param {any} el
- * @param {any} path
- */
-function enterComponentInlineEdit(el, path) {
-  // Already editing this element
-  if (view.componentInlineEdit && view.componentInlineEdit.el === el) {
-    return;
-  }
-
-  const node = getNodeAtPath(S.document, path);
-  if (!node) return;
-
-  // Skip nodes that shouldn't be inline-edited
-  const tc = node.textContent;
-  if (node.$props && (node.tagName || "").includes("-")) return;
-  if (Array.isArray(node.children) && node.children.length > 0) return;
-  if (node.children && typeof node.children === "object") return;
-  if (tc && typeof tc === "object") return;
-  const voids = new Set(["img", "input", "br", "hr", "video", "audio", "source", "embed", "slot"]);
-  if (voids.has(node.tagName)) return;
-
-  // Keep overlay visible for the label, but hide selection border to not obscure editing outline.
-  // Disable click interceptor so native contenteditable handles all mouse interaction.
-  for (const p of canvasPanels) {
-    const boxes = p.overlay.querySelectorAll(".overlay-box");
-    for (const box of boxes) {
-      box.style.border = "none";
-    }
-    p.overlayClk.style.pointerEvents = "none";
-  }
-
-  el.contentEditable = "plaintext-only";
-  el.style.pointerEvents = "auto"; // required for caretRangeFromPoint hit-testing
-  el.style.cursor = "text";
-  el.style.outline = "1px solid var(--accent, #4f8bc7)";
-  el.style.outlineOffset = "-1px";
-  el.style.minHeight = "1em";
-
-  // Show raw textContent (not the ❮...❯ display transform)
-  const rawText = typeof tc === "string" ? tc : "";
-  el.textContent = rawText;
-
-  view.componentInlineEdit = {
-    el,
-    path,
-    originalText: rawText,
-    mediaName: canvasPanels.find((p) => p.canvas.contains(el))?.mediaName || null,
-  };
-
-  // Focus and place cursor at end
-  el.focus();
-  const sel = window.getSelection();
-  const range = document.createRange();
-  range.selectNodeContents(el);
-  range.collapse(false);
-  sel?.removeAllRanges();
-  sel?.addRange(range);
-
-  el.addEventListener("keydown", componentInlineKeydown);
-  el.addEventListener("input", componentInlineInput);
-
-  // Document-level mousedown: clicking outside the editing element commits
-  // the edit and selects the new target element for inline editing.
-  const outsideHandler = (/** @type {any} */ evt) => {
-    if (!view.componentInlineEdit) {
-      document.removeEventListener("mousedown", outsideHandler, true);
-      return;
-    }
-    if (view.componentInlineEdit.el.contains(evt.target)) return; // click within editing el — let it through
-    // Let clicks through when the slash command menu is open
-    if (isSlashMenuOpen()) return;
-    // Let clicks inside the block action bar through
-    if (view.blockActionBarEl && view.blockActionBarEl.contains(evt.target)) return;
-    document.removeEventListener("mousedown", outsideHandler, true);
-
-    // Hit-test BEFORE commit (while the current canvas DOM + elToPath are still valid)
-    let hitPath = null,
-      hitMedia = null;
-    for (const p of canvasPanels) {
-      const els = p.canvas.querySelectorAll("*");
-      for (const el of els) el.style.pointerEvents = "auto";
-      p.overlayClk.style.display = "none";
-      const found = document.elementsFromPoint(evt.clientX, evt.clientY);
-      p.overlayClk.style.display = "";
-      for (const el of els) el.style.pointerEvents = "none";
-      for (const hit of found) {
-        if (p.canvas.contains(hit) && hit !== p.canvas) {
-          const path = elToPath.get(hit);
-          if (path) {
-            hitPath = path;
-            hitMedia = p.mediaName;
-            break;
-          }
-        }
-      }
-      if (hitPath) break;
-    }
-
-    // Commit + select new element in a single state update if possible
-    const { el: editEl, path: editPath, originalText } = view.componentInlineEdit;
-    const newText = (editEl.textContent ?? "").trim();
-    cleanupComponentInlineEdit(editEl);
-
-    // If empty, remove the node entirely
-    const isEmpty = !newText;
-    const pPath = parentElementPath(editPath);
-
-    if (hitPath) {
-      const media = hitMedia === "base" ? null : (hitMedia ?? null);
-      view.pendingInlineEdit = { path: hitPath, mediaName: hitMedia };
-      const withMedia = { ...S, ui: { ...S.ui, activeMedia: media } };
-      if (isEmpty && pPath) {
-        // Remove empty node; adjust hitPath if it shifts after removal
-        let s = removeNode(withMedia, editPath);
-        // If hit path is a later sibling in the same parent, adjust index
-        const removedIdx = /** @type {number} */ (childIndex(editPath));
-        const hitIdx = /** @type {number} */ (childIndex(hitPath));
-        const hitParent = parentElementPath(hitPath);
-        if (hitParent && pPath && hitParent.join("/") === pPath.join("/") && hitIdx > removedIdx) {
-          hitPath = [...pPath, "children", hitIdx - 1];
-          view.pendingInlineEdit = { path: hitPath, mediaName: hitMedia };
-        }
-        update(selectNode(s, hitPath));
-      } else if (newText !== originalText) {
-        update(
-          selectNode(
-            updateProperty(withMedia, editPath, "textContent", newText || undefined),
-            hitPath,
-          ),
-        );
-      } else {
-        update(selectNode(withMedia, hitPath));
-      }
-    } else {
-      // Clicked on empty space — just commit
-      if (isEmpty && pPath) {
-        update(removeNode(S, editPath));
-      } else if (newText !== originalText) {
-        update(updateProperty(S, editPath, "textContent", newText || undefined));
-      } else {
-        renderCanvas();
-        renderOverlays();
-      }
-    }
-  };
-  document.addEventListener("mousedown", outsideHandler, true);
-  view.componentInlineEdit._outsideHandler = outsideHandler;
-
-  // Re-render block action bar to show inline formatting buttons
-  renderBlockActionBar();
-}
-
-/** @param {any} e */
-function componentInlineKeydown(e) {
-  // When slash menu is open, let the shared module's capturing handler deal with it
-  if (isSlashMenuOpen()) {
-    if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.key)) return;
-  }
-
-  if (e.key === "Enter" && !e.shiftKey) {
-    e.preventDefault();
-    splitParagraph();
-  } else if (e.key === "Escape") {
-    e.preventDefault();
-    cancelComponentInlineEdit();
-  }
-  e.stopPropagation(); // prevent studio keyboard shortcuts
-}
-
-function splitParagraph() {
-  if (!view.componentInlineEdit) return;
-  const { el, path, mediaName } = view.componentInlineEdit;
-
-  // Determine cursor offset within text
-  const sel = /** @type {any} */ (el.ownerDocument.defaultView?.getSelection());
-  const fullText = el.textContent || "";
-  let offset = fullText.length;
-  if (sel.rangeCount) {
-    const range = sel.getRangeAt(0);
-    const preRange = document.createRange();
-    preRange.selectNodeContents(el);
-    preRange.setEnd(range.startContainer, range.startOffset);
-    offset = preRange.toString().length;
-  }
-
-  const textBefore = fullText.slice(0, offset);
-  const textAfter = fullText.slice(offset);
-
-  const tag = "p";
-  const pPath = /** @type {any} */ (parentElementPath(path));
-  const idx = /** @type {number} */ (childIndex(path));
-  if (!pPath) return; // can't split root
-
-  const newDef = { tagName: tag, textContent: textAfter };
-  const newPath = [...pPath, "children", idx + 1];
-
-  cleanupComponentInlineEdit(el);
-
-  // Compound mutation: update current text + insert sibling + select new
-  let s = updateProperty(S, path, "textContent", textBefore || undefined);
-  s = insertNode(s, pPath, idx + 1, newDef);
-  s = selectNode(s, newPath);
-
-  view.pendingInlineEdit = { path: newPath, mediaName };
-  update(s);
-}
-
-function _commitComponentInlineEdit() {
-  if (!view.componentInlineEdit) return;
-  const { el, path, originalText } = view.componentInlineEdit;
-  const newText = (el.textContent ?? "").trim();
-
-  cleanupComponentInlineEdit(el);
-
-  // If empty, remove the node entirely
-  const pPath = parentElementPath(path);
-  if (!newText && pPath) {
-    update(removeNode(S, path));
-  } else if (newText !== originalText) {
-    update(updateProperty(S, path, "textContent", newText || undefined));
-  } else {
-    renderCanvas();
-    renderOverlays();
-  }
-}
-
-function cancelComponentInlineEdit() {
-  if (!view.componentInlineEdit) return;
-  const { el } = view.componentInlineEdit;
-  cleanupComponentInlineEdit(el);
-  renderCanvas();
-  renderOverlays();
-}
-
-/** @param {any} el */
-function cleanupComponentInlineEdit(el) {
-  el.removeEventListener("keydown", componentInlineKeydown);
-  el.removeEventListener("input", componentInlineInput);
-  sharedDismissSlashMenu();
-  el.removeAttribute("contenteditable");
-  el.style.cursor = "";
-  el.style.outline = "";
-  el.style.outlineOffset = "";
-  el.style.minHeight = "";
-  el.style.pointerEvents = "";
-
-  // Remove the document-level outside-click handler
-  if (view.componentInlineEdit?._outsideHandler) {
-    document.removeEventListener("mousedown", view.componentInlineEdit._outsideHandler, true);
-  }
-  view.componentInlineEdit = null;
-
-  // Restore overlay and click interceptor
-  for (const p of canvasPanels) {
-    p.overlay.style.display = "";
-    p.overlayClk.style.pointerEvents = "";
-  }
-}
-
-// ─── Component-mode slash commands (delegates to shared slash-menu.js) ────────
-
-function componentInlineInput() {
-  if (!view.componentInlineEdit) return;
-  const { el, originalText } = view.componentInlineEdit;
-  const text = el.textContent || "";
-
-  // Only trigger slash menu when the paragraph was originally empty and starts with /
-  if (originalText === "" && text.startsWith("/")) {
-    const filter = text.slice(1).toLowerCase();
-    sharedShowSlashMenu(el, filter, { onSelect: handleComponentSlashSelect });
-  } else {
-    sharedDismissSlashMenu();
-  }
-}
-
-/** @param {any} cmd */
-function handleComponentSlashSelect(cmd) {
-  if (!view.componentInlineEdit) return;
-  const { el, path, mediaName } = view.componentInlineEdit;
-  const pPath = parentElementPath(path);
-  const idx = /** @type {number} */ (childIndex(path));
-  if (!pPath) return;
-
-  cleanupComponentInlineEdit(el);
-
-  const newDef = defaultDef(cmd.tag);
-  const newPath = [...pPath, "children", idx];
-
-  // Replace current empty paragraph with the chosen element
-  let s = removeNode(S, path);
-  s = insertNode(s, pPath, idx, newDef);
-  s = selectNode(s, newPath);
-
-  // If the new element has textContent, enter inline edit on it
-  const hasText = newDef.textContent != null;
-  if (hasText) view.pendingInlineEdit = { path: newPath, mediaName };
-  update(s);
-}
-
 // ─── Left panel: delegated to panels/left-panel.js ───────────────────────────
 
 function renderLeftPanel() {