@jxsuite/studio 0.33.0 → 0.35.0

package/src/canvas/canvas-origin.ts

@@ -0,0 +1,66 @@
+/// <reference lib="dom" />
+/**
+ * Canvas origin derivation. The canvas iframe may load same-origin (dev server / chromium /
+ * electrobun gate-off, where the platform canvasUrl is a relative path) or cross-origin (electrobun
+ * loopback, where canvasUrl is an absolute http://127.0.0.1:<port> URL).
+ *
+ * CanvasBaseOrigin() returns the origin the canvas document lives on, so callers that build
+ * absolute asset/doc URLs target the right server. For a relative canvasUrl this resolves to
+ * location.origin — IDENTITY for the same-origin paths, so dev/chromium/electrobun-gate-off are
+ * byte-identical to before.
+ */
+
+import { getPlatform, hasPlatform } from "../platform";
+
+/**
+ * The origin serving the canvas document. When the platform registers an absolute canvasUrl
+ * (electrobun loopback), this is that URL's origin; otherwise it falls back to the parent's own
+ * origin (a relative canvasUrl resolves against location.href to location.origin).
+ */
+export function canvasBaseOrigin(): string {
+  const canvasUrl = hasPlatform() ? getPlatform().canvasUrl : undefined;
+  if (canvasUrl) {
+    return new URL(canvasUrl, location.href).origin;
+  }
+  return location.origin;
+}
+
+/**
+ * Build an absolute loopback-origin src for a PROJECT asset path referenced by a PARENT-realm
+ * (shell) preview <img>. On the views:// shell a relative "/images/foo.png" resolves to
+ * views://studio/images/foo.png, which the browser fetches immediately on paint — a stray request
+ * the desktop MutationObserver only rewrites asynchronously. Rendering the src loopback-absolute up
+ * front eliminates that race for direct-parent <img> sites.
+ *
+ * Guarded: this ONLY rewrites when a real cross-origin http(s) loopback is registered (electrobun
+ * loopback, canvasUrl set to an absolute http URL) whose origin differs from location.origin.
+ * Otherwise — dev server, chromium, electrobun gate-off, and the pre-activate window — it returns
+ * the ORIGINAL relative path unchanged, keeping those cases byte-identical (an absolute
+ * ${location.origin}/... on the shell would just reintroduce views://... — the exact bug).
+ *
+ * Only for PROJECT asset srcs; NEVER call it for shell-packaged views:// assets (sp-icons, bundled
+ * chrome). Already-absolute inputs (data:/blob:/http/views://) are returned untouched, so it is
+ * safe for user-typed media values too.
+ *
+ * @param {string} path — a project asset path (relative, e.g. "/public/logo.png" or "logo.png") or
+ *   an already-absolute URL.
+ * @returns {string} The loopback-absolute src when a cross-origin loopback is active, else `path`.
+ */
+export function loopbackAssetSrc(path: string): string {
+  if (
+    path.startsWith("data:") ||
+    path.startsWith("blob:") ||
+    path.startsWith("http") ||
+    path.startsWith("views://")
+  ) {
+    return path;
+  }
+  const origin = canvasBaseOrigin();
+  // Only rewrite when a real cross-origin http(s) loopback is registered. When canvasBaseOrigin()
+  // Yields location.origin (the views:// shell / dev / chromium / gate-off) an absolute rewrite
+  // Would produce views://... on the shell, so fall back to the relative path unchanged.
+  if ((origin.startsWith("http:") || origin.startsWith("https:")) && origin !== location.origin) {
+    return `${origin}/${path.replace(/^\.?\//, "")}`;
+  }
+  return path;
+}

package/src/canvas/canvas-patcher.ts

@@ -13,45 +13,23 @@
  * to the patched DOM.
  */
 
-import {
-  canvasPanels,
-  childIndex,
-  elToPath,
-  elToRenderScope,
-  getNodeAtPath,
-  parentElementPath,
-} from "../store";
-import { activeTab } from "../workspace/workspace";
+import { canvasPanels, getNodeAtPath, parentElementPath } from "../store";
+import { isTabActive } from "../workspace/workspace";
 import { view } from "../view";
 import { toRaw } from "../reactivity";
-import { elementStyleTags, reapplyStyle } from "@jxsuite/runtime";
-import { getEffectiveMedia } from "../site-context";
-import { findCanvasElement } from "./canvas-helpers";
-import { domChildReference, renderSubtree } from "./canvas-subtree-render";
-import { canvasPerf, perfLog, recordEscalation } from "./canvas-perf";
-import {
-  computeEmptyPlaceholderClass,
-  EMPTY_PLACEHOLDER_CLASSES,
-  templateToEditDisplay,
-} from "../utils/edit-display";
-import { getActiveElement } from "../editor/inline-edit";
+import { postPatchToHosts } from "./iframe-host";
+import { canvasPerf, recordEscalation } from "./canvas-perf";
 import { setPatchConsumer } from "../tabs/patch-ops";
 
-import type { JxPatchOp } from "../tabs/patch-ops";
+import type { JxPatchOp, TransactionRecord } from "../tabs/patch-ops";
 import type { Tab } from "../tabs/tab.js";
 import type { JxPath } from "../state";
-import type { JxMutableNode, JxStyle } from "@jxsuite/schema/types";
-import type { CanvasPanel, InlineEditDef } from "../types";
 
 /** Render-side callbacks injected at init so this module stays free of heavy canvas imports. */
 interface CanvasPatcherCtx {
   getCanvasMode: () => string;
   scheduleCanvasRender: () => void;
-  applyCanvasMediaOverrides: (canvasEl: Element, activeBreakpoints: Set<string>) => void;
   renderOverlays: () => void;
-  updateForcedPseudoPreview: () => void;
-  enterComponentInlineEdit: (el: HTMLElement, path: JxPath) => void;
-  registerSubtreeDnD: (rootEl: HTMLElement) => void;
 }
 
 let _ctx: CanvasPatcherCtx | null = null;
@@ -101,12 +79,6 @@ export function escalateToFullRender(reason: string) {
 
 // ─── Classification ──────────────────────────────────────────────────────────
 
-/** Identity check that survives reactive proxy wrapping (activeTab.value is a proxy). */
-function isActiveTab(tab: Tab) {
-  const active = activeTab.value;
-  return active !== null && toRaw(active as object) === toRaw(tab as unknown as object);
-}
-
 /**
  * $switch cases render as a substituted first-case placeholder in edit mode, so their element paths
  * don't correspond to document paths — edits through "cases" escalate to a full render. (Non-
@@ -157,7 +129,17 @@ function containerVerdict(tab: Tab, parentPath: JxPath, requireArray = true): st
   return null;
 }
 
-/** Verdict for ops applied as a subtree replace at `path`. */
+/**
+ * Verdict for ops applied as a subtree replace at `path`. Unlike the structural splices
+ * (insert/remove/move), a replace locates its target DIRECTLY by its stamped `data-jx-path`
+ * (iframe-patch `requireElement`) and swaps it in place — doc↔DOM child-index correspondence is
+ * never consulted, so a custom-element ancestor (slot redistribution) cannot break it and is NOT a
+ * reason to escalate. That matters for real content: markdown class-directive pages put every
+ * editable block inside a component, and rejecting those forced a full render (reloading embedded
+ * iframes) on every text commit. Should the element be un-queryable after all (e.g. a component
+ * rendered its children into shadow DOM), the iframe throws element-not-found and the parent
+ * escalates — the same outcome as rejecting here, without the false positives.
+ */
 function replaceVerdict(tab: Tab, path: JxPath): string | null {
   if (path.length === 0) {
     return "replace-root";
@@ -169,20 +151,22 @@ function replaceVerdict(tab: Tab, path: JxPath): string | null {
   if (!parentPath) {
     return "replace-no-parent";
   }
-  const container = containerVerdict(tab, parentPath, false);
-  if (container) {
-    return container;
+  // A subtree re-render inside a repeater template can't be re-rendered 1:1 in the edit-mode
+  // Perimeter (mirrors containerVerdict's map rule).
+  if (parentPath.includes("map")) {
+    return "structure-on-map-path";
+  }
+  const parent = getNodeAtPath(tab.doc.document, parentPath);
+  if (!parent) {
+    return "node-not-found";
+  }
+  // An innerHTML parent renders opaque children — the target has no stamped element to swap.
+  if (parent.innerHTML) {
+    return "structure-with-innerhtml";
   }
   return getNodeAtPath(tab.doc.document, path) === undefined ? "node-not-found" : null;
 }
 
-const STRUCTURAL_OPS = new Set(["insert", "move", "remove", "replace", "set-attr", "set-prop"]);
-
-/** Whether an op changes DOM structure (vs in-place style/text writes). */
-function isStructuralOp(op: JxPatchOp) {
-  return STRUCTURAL_OPS.has(op.op) && !(op.op === "set-prop" && op.isEvent);
-}
-
 /**
  * Per-op patchability in the current document. Returns null when patchable, else the reason.
  *
@@ -263,7 +247,7 @@ export function classifyOps(tab: Tab, ops: JxPatchOp[]): { patchable: boolean; r
     return { patchable: false, reason };
   };
 
-  if (!isActiveTab(tab)) {
+  if (!isTabActive(tab)) {
     return reject("inactive-tab");
   }
   const canvasMode = _ctx ? _ctx.getCanvasMode() : "";
@@ -273,20 +257,39 @@ export function classifyOps(tab: Tab, ops: JxPatchOp[]): { patchable: boolean; r
   if (canvasPanels.length === 0) {
     return reject("no-panels");
   }
-  if (!canvasPanels.every((p) => p.ready && p.liveCtx)) {
+  // The iframe canvas keeps its render context inside the iframe, so a panel is patchable as soon as
+  // It has rendered (`ready`) — there is no parent-side `liveCtx`.
+  if (!canvasPanels.every((p) => p.ready)) {
     return reject("panels-not-ready");
   }
-  // Structural changes while an inline edit session is live would pull the DOM out from under
-  // The editor — rare (commit flows tear down first), so escalate conservatively.
-  if (view.componentInlineEdit && ops.some((op) => isStructuralOp(op))) {
-    return reject("inline-edit-active");
+  // A `set-text` on a node whose CHILDREN are replaced in the same batch is subsumed by that
+  // Subtree re-render (the iframe folds every forward op into the shadow doc first, then the
+  // Trailing children re-render draws the node from the final state — see iframe-patch.ts). This is
+  // The rich-text inline-commit shape (clear text + set children), which opVerdict alone would
+  // Reject as "text-with-children" because classification runs POST-mutation — the node already has
+  // Its new children by the time we look.
+  const subtreeReplacedPaths = new Set<string>();
+  for (const op of ops) {
+    if ((op.op === "set-prop" && op.key === "children") || op.op === "replace") {
+      subtreeReplacedPaths.add(JSON.stringify(op.path));
+    }
   }
+  // Inline editing now lives inside the iframe canvas, which the parent patcher can't observe; the
+  // Iframe escalates to a full render itself if a posted patch can't apply mid-edit. So there is no
+  // Parent-side inline-edit guard here anymore.
   for (const op of ops) {
+    if (op.op === "set-text" && subtreeReplacedPaths.has(JSON.stringify(op.path))) {
+      continue;
+    }
     const reason = opVerdict(tab, op);
     if (reason) {
       return reject(reason);
     }
   }
+  // Classification is host-agnostic: the iframe canvas applies the SAME op set surgically as the
+  // Legacy DOM patcher (in-place style/text, structural relocation, and subtree re-renders for
+  // Insert/replace/attr/prop — see iframe-patch.ts). An op the iframe somehow can't apply throws and
+  // The parent escalates to a full render — so a stricter gate here would only forgo optimization.
   return { patchable: true, reason: "" };
 }
 
@@ -298,359 +301,16 @@ export function classifyOps(tab: Tab, ops: JxPatchOp[]): { patchable: boolean; r
  *
  * @param {Tab} tab
  * @param {JxPatchOp[]} ops
+ * @param {TransactionRecord} [record] Value-carrying ops, used by the iframe host.
  */
-export function applyPatchBatch(tab: Tab, ops: JxPatchOp[]) {
-  const doc = toRaw(tab.doc.document) as JxMutableNode;
-  const mediaQueries = getEffectiveMedia(doc.$media || {});
-
-  for (const op of ops) {
-    for (const panel of canvasPanels) {
-      applyOpToPanel(panel, doc, op, mediaQueries);
-    }
-    canvasPerf.patchedOps += 1;
-    perfLog("patched", op);
-  }
-
-  // Hover targets may have moved or vanished after structural changes; the next mousemove
-  // Recomputes it. (Selection is path-adjusted by the mutators themselves.)
-  if (tab.session.hover && ops.some((op) => isStructuralOp(op))) {
-    tab.session.hover = null;
-  }
-
-  _ctx?.renderOverlays();
-  _ctx?.updateForcedPseudoPreview();
-  schedulePendingInlineEditConsumption(tab);
-}
-
-/**
- * @param {CanvasPanel} panel
- * @param {JxMutableNode} doc
- * @param {JxPatchOp} op
- * @param {Record<string, string>} mediaQueries
- */
-function applyOpToPanel(
-  panel: CanvasPanel,
-  doc: JxMutableNode,
-  op: JxPatchOp,
-  mediaQueries: Record<string, string>,
-) {
-  switch (op.op) {
-    case "set-style": {
-      const el = requireElement(op.path, panel);
-      const node = getNodeAtPath(doc, op.path);
-      reapplyStyle(el, editModeStyle(node?.style), mediaQueries, {});
-      restoreEditModePointerEvents(el);
-      if (panel.activeBreakpoints && panel.activeBreakpoints.size > 0) {
-        _ctx?.applyCanvasMediaOverrides(panel.canvas as HTMLElement, panel.activeBreakpoints);
-      }
-      return;
-    }
-    case "set-text": {
-      const el = requireElement(op.path, panel);
-      // The element being inline-edited already shows the committed text — don't clobber the
-      // User's live DOM (this replaces the old destroy-and-restore full-render cycle).
-      if (isBeingInlineEdited(el)) {
-        return;
-      }
-      const node = getNodeAtPath(doc, op.path);
-      el.textContent = textDisplayValue(node);
-      for (const cls of EMPTY_PLACEHOLDER_CLASSES) {
-        el.classList.remove(cls);
-      }
-      const placeholder = node ? computeEmptyPlaceholderClass(node) : null;
-      if (placeholder) {
-        el.classList.add(placeholder);
-      }
-      restoreEditModePointerEvents(el);
-      return;
-    }
-    case "set-prop": {
-      if (op.isEvent) {
-        // Event bindings are stripped from design/edit renders — nothing to do.
-        return;
-      }
-      replaceSubtree(panel, doc, op.path);
-      return;
-    }
-    case "set-attr":
-    case "replace": {
-      replaceSubtree(panel, doc, op.path);
-      return;
-    }
-    case "insert": {
-      insertChild(panel, doc, op.parentPath, op.index);
-      return;
-    }
-    case "remove": {
-      removeChild(panel, doc, op.path);
-      return;
-    }
-    case "move": {
-      moveChild(panel, doc, op.fromPath, op.toParentPath, op.toIndex);
-      return;
-    }
-    default: {
-      throw new Error(`unsupported-op:${(op as JxPatchOp).op}`);
-    }
-  }
-}
-
-// ─── Structural patching ─────────────────────────────────────────────────────
-
-/** Re-render the node at path and swap it into the DOM in place. */
-function replaceSubtree(panel: CanvasPanel, doc: JxMutableNode, path: JxPath) {
-  const oldEl = requireElement(path, panel);
-  const parentEl = oldEl.parentElement;
-  if (!parentEl) {
-    throw new Error("replace-missing-parent-element");
-  }
-  const newEl = renderSubtree(panel, doc, path, parentEl);
-  disposeSubtree(oldEl);
-  oldEl.replaceWith(newEl);
-  afterSubtreeInserted(panel, newEl);
-}
-
-/** Render the inserted node and splice it into the parent's DOM, shifting sibling paths up. */
-function insertChild(panel: CanvasPanel, doc: JxMutableNode, parentPath: JxPath, index: number) {
-  const parentEl = requireElement(parentPath, panel);
-  const parentNode = getNodeAtPath(doc, parentPath);
-  const newEl = renderSubtree(panel, doc, [...parentPath, "children", index], parentEl);
-  // Remap existing siblings before attaching the new subtree so it isn't itself remapped.
-  remapChildPaths(parentEl, parentPath, index, 1);
-  insertAt(parentEl, newEl, domChildReference(parentEl, parentNode, index));
-  syncContainerPlaceholder(parentEl, parentNode);
-  afterSubtreeInserted(panel, newEl);
-}
-
-/** Remove the node's DOM and shift following sibling paths down. */
-function removeChild(panel: CanvasPanel, doc: JxMutableNode, path: JxPath) {
-  const parentPath = parentElementPath(path) as JxPath;
-  const idx = childIndex(path) as number;
-  const el = requireElement(path, panel);
-  const parentEl = el.parentElement;
-  if (!parentEl) {
-    throw new Error("remove-missing-parent-element");
-  }
-  disposeSubtree(el);
-  el.remove();
-  remapChildPaths(parentEl, parentPath, idx + 1, -1);
-  syncContainerPlaceholder(parentEl, getNodeAtPath(doc, parentPath));
-}
-
-/**
- * Move = detach + path-shift both parents + rewrite the moved subtree's path prefix + reinsert.
- * fromPath is in pre-mutation coordinates (matching the DOM); toIndex is the post-mutation index
- * recorded by the mutator.
- */
-function moveChild(
-  panel: CanvasPanel,
-  doc: JxMutableNode,
-  fromPath: JxPath,
-  toParentPath: JxPath,
-  toIndex: number,
-) {
-  const fromParentPath = parentElementPath(fromPath) as JxPath;
-  const fromIdx = childIndex(fromPath) as number;
-  // Resolve both elements against the pre-mutation DOM mappings before touching anything.
-  const el = requireElement(fromPath, panel);
-  const toParentEl = requireElement(toParentPath, panel);
-  const fromParentEl = el.parentElement;
-  if (!fromParentEl) {
-    throw new Error("move-missing-parent-element");
-  }
-
-  el.remove();
-  remapChildPaths(fromParentEl, fromParentPath, fromIdx + 1, -1);
-  // The to-parent's own path may have shifted by the detach remap — read it fresh.
-  const toPrefix = (elToPath.get(toParentEl) as JxPath | undefined) ?? toParentPath;
-  remapChildPaths(toParentEl, toPrefix, toIndex, 1);
-  rewriteSubtreePathPrefix(el, fromPath, [...toPrefix, "children", toIndex]);
-
-  const toParentNode = getNodeAtPath(doc, toPrefix);
-  insertAt(toParentEl, el, domChildReference(toParentEl, toParentNode, toIndex));
-  syncContainerPlaceholder(
-    fromParentEl,
-    getNodeAtPath(doc, elToPath.get(fromParentEl) ?? fromParentPath),
-  );
-  syncContainerPlaceholder(toParentEl, toParentNode);
-}
-
-/** Insert before the reference node, or append when inserting at the end. */
-function insertAt(parentEl: Element, node: Node, ref: ChildNode | null) {
-  if (ref) {
-    ref.before(node);
-  } else {
-    parentEl.append(node);
-  }
-}
-
-/**
- * Shift the child-index segment of elToPath entries for every element under parentEl whose path is
- * `[...parentPath, "children", i, ...]` with `i >= fromIndex`. Descendants of shifted siblings
- * carry the same segment and are rewritten too.
- */
-function remapChildPaths(parentEl: Element, parentPath: JxPath, fromIndex: number, delta: number) {
-  const depth = parentPath.length;
-  for (const el of parentEl.querySelectorAll("*")) {
-    const p = elToPath.get(el);
-    if (!p || p.length < depth + 2 || p[depth] !== "children") {
-      continue;
-    }
-    const idx = p[depth + 1];
-    if (typeof idx !== "number" || idx < fromIndex) {
-      continue;
-    }
-    if (!parentPath.every((seg, i) => p[i] === seg)) {
-      continue;
-    }
-    const np = [...p];
-    np[depth + 1] = idx + delta;
-    elToPath.set(el, np);
-  }
-}
-
-/** Rewrite elToPath entries of el and its descendants, replacing oldPrefix with newPrefix. */
-function rewriteSubtreePathPrefix(el: Element, oldPrefix: JxPath, newPrefix: JxPath) {
-  const targets = [el, ...el.querySelectorAll("*")];
-  for (const t of targets) {
-    const p = elToPath.get(t);
-    if (!p || p.length < oldPrefix.length) {
-      continue;
-    }
-    if (!oldPrefix.every((seg, i) => p[i] === seg)) {
-      continue;
-    }
-    elToPath.set(t, [...newPrefix, ...p.slice(oldPrefix.length)]);
-  }
-}
-
-/**
- * Release resources owned by a removed/replaced subtree: the scoped <style> tags the runtime
- * emitted for its elements, and the effect scopes of any surgical renders rooted inside it.
- */
-function disposeSubtree(el: Element) {
-  const targets = [el, ...el.querySelectorAll("*")];
-  for (const t of targets) {
-    if (t instanceof HTMLElement) {
-      const tag = elementStyleTags.get(t);
-      if (tag) {
-        tag.remove();
-        elementStyleTags.delete(t);
-      }
-    }
-    const scope = elToRenderScope.get(t);
-    if (scope) {
-      scope.stop();
-      elToRenderScope.delete(t);
-    }
-  }
-}
-
-/** Keep the parent's empty-placeholder class in sync after its children changed. */
-function syncContainerPlaceholder(parentEl: Element, parentNode: JxMutableNode | undefined) {
-  for (const cls of EMPTY_PLACEHOLDER_CLASSES) {
-    parentEl.classList.remove(cls);
-  }
-  const placeholder = parentNode ? computeEmptyPlaceholderClass(parentNode) : null;
-  if (placeholder) {
-    parentEl.classList.add(placeholder);
-  }
-}
-
-/** Post-insertion bookkeeping for a freshly rendered subtree: DnD targets + media overrides. */
-function afterSubtreeInserted(panel: CanvasPanel, newEl: HTMLElement | Text) {
-  if (newEl instanceof HTMLElement) {
-    _ctx?.registerSubtreeDnD(newEl);
-  }
-  if (panel.activeBreakpoints && panel.activeBreakpoints.size > 0) {
-    _ctx?.applyCanvasMediaOverrides(panel.canvas as HTMLElement, panel.activeBreakpoints);
-  }
-}
-
-/**
- * @param {JxPath} path
- * @param {CanvasPanel} panel
- */
-function requireElement(path: JxPath, panel: CanvasPanel): HTMLElement {
-  const el = findCanvasElement(path, panel.canvas as HTMLElement);
-  if (!el) {
-    throw new Error(`element-not-found:${path.join("/")}`);
-  }
-  return el;
-}
-
-/** Whether this element is the live target of an inline editing session. */
-function isBeingInlineEdited(el: HTMLElement) {
-  return view.componentInlineEdit?.el === el || getActiveElement() === el;
-}
-
-/** Re-disable pointer events after a patch (full renders set this on every canvas element). */
-function restoreEditModePointerEvents(el: HTMLElement) {
-  if (!isBeingInlineEdited(el)) {
-    el.style.pointerEvents = "none";
-  }
-}
-
-/**
- * Edit-mode style transform — mirrors prepareForEditMode's style rule: top-level template-string
- * values are blanked so no reactive bindings are created for them.
- *
- * @param {JxStyle | undefined} style
- */
-function editModeStyle(style: JxStyle | undefined): JxStyle | undefined {
-  if (!style || typeof style !== "object") {
-    return undefined;
+export function applyPatchBatch(tab: Tab, _ops: JxPatchOp[], record?: TransactionRecord) {
+  // The canvas renders inside the iframe — the parent has no DOM to mutate. Post the value-carrying
+  // Forward ops over the bridge for the iframe to apply against its shadow doc — only to hosts
+  // Rendering THIS tab's document (a background tab's iframe must never fold a foreign edit into
+  // Its shadow doc). Throwing when no host received it escalates to a full render (the suppressed
+  // Render then runs), so an edit is never dropped.
+  const forwardOps = (record?.docOps ?? []).map((pair) => pair.forward);
+  if (postPatchToHosts(forwardOps, view.renderGeneration, tab.id) === 0) {
+    throw new Error("no-ready-iframe-host");
   }
-  const out: Record<string, unknown> = {};
-  for (const [k, v] of Object.entries(style)) {
-    out[k] = typeof v === "string" && v.includes("${") ? "" : v;
-  }
-  return out as JxStyle;
-}
-
-/**
- * Display text for a node's textContent in design/edit mode — mirrors prepareForEditMode's
- * template-string and $ref display rules.
- *
- * @param {JxMutableNode | undefined} node
- */
-function textDisplayValue(node: JxMutableNode | undefined): string {
-  const v = node?.textContent as unknown;
-  if (v == null) {
-    return "";
-  }
-  if (typeof v === "string") {
-    return v.includes("${") ? templateToEditDisplay(v) : v;
-  }
-  if (typeof v === "object" && (v as Record<string, unknown>).$ref) {
-    const ref = String((v as Record<string, unknown>).$ref);
-    const label = ref.startsWith("#/state/") ? ref.slice(8) : ref;
-    return `{${label}}`;
-  }
-  return String(v);
-}
-
-/**
- * Consume a pendingInlineEdit after patches apply. The full render that used to consume it was
- * skipped, and some flows (splitParagraph) set it right after transactDoc returns — so consume in a
- * microtask, after the calling handler finished.
- *
- * @param {Tab} tab
- */
-function schedulePendingInlineEditConsumption(tab: Tab) {
-  queueMicrotask(() => {
-    if (!isActiveTab(tab) || !tab.session.ui?.pendingInlineEdit) {
-      return;
-    }
-    const { path, mediaName } = tab.session.ui.pendingInlineEdit as InlineEditDef;
-    tab.session.ui.pendingInlineEdit = null;
-    const targetPanel = canvasPanels.find((p) => p.mediaName === mediaName) || canvasPanels[0];
-    if (!targetPanel) {
-      return;
-    }
-    const el = findCanvasElement(path, targetPanel.canvas as HTMLElement);
-    if (el) {
-      _ctx?.enterComponentInlineEdit(el, path);
-    }
-  });
 }