@jxsuite/studio 0.33.0 → 0.35.0

package/src/studio.ts

@@ -19,6 +19,7 @@ import {
   requireProjectState,
   setProjectState,
   toolbarEl,
+  updateSession,
   updateUi,
 } from "./store";
 
@@ -28,20 +29,28 @@ import { effect } from "./reactivity";
 
 import { view } from "./view";
 
-import { isEditableBlock, isEditing } from "./editor/inline-edit";
-import { enterComponentInlineEdit, initComponentInlineEdit } from "./editor/component-inline-edit";
-import { enterInlineEdit } from "./editor/content-inline-edit";
+import { isEditing } from "./editor/inline-edit";
 import { applyTransform, initCanvasUtils, positionZoomIndicator } from "./canvas/canvas-utils";
-import { findCanvasElement, getActivePanel, initCanvasHelpers } from "./canvas/canvas-helpers";
 import {
-  applyCanvasMediaOverrides,
   initCanvasRender,
   renderCanvas,
   renderOverlays,
   scheduleCanvasRender,
 } from "./canvas/canvas-render";
 import { consumePatchedDocument, initCanvasPatcher } from "./canvas/canvas-patcher";
-import { registerSubtreeDnD } from "./panels/canvas-dnd";
+import {
+  commitActiveEditSession,
+  getEditSnapshot,
+  setCanvasContextMenuHandler,
+  setCanvasSlashHandler,
+  setIframePatchEscalation,
+  setInsertZoneClickHandler,
+  setStylebookHitHandler,
+  setToolbarRefresh,
+} from "./canvas/iframe-host";
+import { runInsertZoneAction } from "./editor/insert-zone-action";
+import { canvasSlashHandler } from "./editor/canvas-slash-bridge";
+import { makeCanvasContextMenuHandler } from "./editor/canvas-context-menu";
 import { initCanvasLiveRender } from "./canvas/canvas-live-render";
 import {
   mountStatusbar,
@@ -50,7 +59,12 @@ import {
   statusMessage,
 } from "./panels/statusbar";
 import { exportFile, parseSourceForPath, saveFile, serializeDocument } from "./files/file-ops";
-import { documentExtensions, formatForPath, loadFormats } from "./format/format-host";
+import {
+  documentExtensions,
+  formatForPath,
+  loadFormats,
+  refreshFormats,
+} from "./format/format-host";
 import {
   loadProject as _loadProject,
   openProject as _openProject,
@@ -66,6 +80,8 @@ import { startFsSync } from "./files/fs-events";
 import { renderImportsTemplate } from "./panels/imports-panel";
 import { renderHeadTemplate } from "./panels/head-panel";
 import { exportCemManifest as _exportCemManifest } from "./services/cem-export";
+import { installAutomationHook } from "./services/automation";
+import { openBrowseModal } from "./browse/browse-modal";
 
 import { getPlatform, hasPlatform, registerPlatform } from "./platform";
 import { parseMediaEntries } from "./utils/canvas-media";
@@ -76,6 +92,7 @@ import { defBadgeLabel, defCategory, renderSignalsTemplate } from "./panels/sign
 import { loadComponentRegistry } from "./files/components";
 import { ensureDependenciesInstalled } from "./packages/ensure-deps";
 import { maybePromptJxsuiteUpdate } from "./packages/jxsuite-update";
+import { autoSyncProjectOnOpen } from "./packages/pull-package-sync";
 
 import { html, render as litRender } from "lit-html";
 
@@ -97,16 +114,20 @@ import * as rightPanelMod from "./panels/right-panel";
 import * as leftPanelMod from "./panels/left-panel";
 import * as tabStrip from "./panels/tab-strip";
 import * as tabBar from "./panels/tab-bar";
-import { renderStylebookOverlays } from "./panels/stylebook-panel";
+import { selectStylebookTag } from "./panels/stylebook-panel";
 import { registerLayersDnD, registerComponentsDnD, registerElementsDnD } from "./panels/dnd";
+import { registerCanvasDndBridge } from "./panels/canvas-dnd-bridge";
 import { defaultDef } from "./panels/shared";
 import { registerFunctionCompletions } from "./panels/editors";
-import { renderBlockActionBar, initBlockActionBar } from "./panels/block-action-bar";
+import {
+  initBlockActionBar,
+  isEditChromeTarget,
+  renderBlockActionBar,
+} from "./panels/block-action-bar";
 import { initCssData } from "./panels/style-utils";
-import { updateForcedPseudoPreview } from "./panels/pseudo-preview";
-import { initPanelEvents } from "./panels/panel-events";
 import { initQuickSearch } from "./panels/quick-search";
 import { addRecentProject, hydrateRecentProjects, removeRecentProject } from "./recent-projects";
+import { hydrateSettings } from "./services/settings-store";
 import { initWelcome } from "./panels/welcome-screen";
 import { openNewProjectModal } from "./new-project/new-project-modal";
 import type { DocumentStackEntry, GitDiffState } from "./types";
@@ -119,8 +140,14 @@ void _swc;
 // These mutable variables are local to studio.js for now. As sections are extracted
 // Into their own modules, they will migrate to ctx in store.js.
 
+// Effective canvas mode: the per-tab preview toggle composes with an edit/design base mode and
+// Presents as "preview" to every downstream gate (doc resolution, iframe flags, interaction
+// Surfaces). Consumers needing the base mode (toolbar switcher selection, canvas host layout)
+// Read tab.session.ui.canvasMode directly.
 function getCanvasMode() {
-  return activeTab.value?.session.ui.canvasMode ?? "design";
+  const ui = activeTab.value?.session.ui;
+  const base = ui?.canvasMode ?? "design";
+  return ui?.preview && (base === "edit" || base === "design") ? "preview" : base;
 }
 
 /** @param {string} mode */
@@ -319,6 +346,18 @@ if (!hasPlatform()) {
   registerPlatform(createDevServerPlatform());
 }
 
+// Screenshot/automation runners (scripts/screenshots/) await window.__jxAutomation right after
+// Navigation, so the gated hook must install before the async deep-link project load below.
+installAutomationHook({
+  getCanvasMode,
+  openBrowseModal,
+  openNewProjectModal,
+  render,
+  renderActivityBar,
+  setCanvasMode,
+  statusMessage,
+});
+
 mountResizeEdges();
 
 // ─── Render loop ──────────────────────────────────────────────────────────────
@@ -361,39 +400,58 @@ initBlockActionBar({
   getCanvasMode,
   navigateToComponent,
 });
-
-initComponentInlineEdit({ findCanvasElement });
-initCanvasHelpers({
-  getCanvasMode,
-  getZoom: () => activeTab.value?.session.ui.zoom ?? 1,
+// The iframe's re-emitted selection snapshot drives the parent format toolbar refresh (4b-2).
+setToolbarRefresh(renderBlockActionBar);
+// The cross-origin insertion "+" click runs the parent-realm slash-menu → mutateInsertNode flow.
+setInsertZoneClickHandler(runInsertZoneAction);
+// The in-iframe "/" trigger drives the parent-realm Spectrum slash menu across the bridge.
+setCanvasSlashHandler(canvasSlashHandler);
+// Canvas right-clicks show the parent-realm Jx element context menu across the bridge.
+setCanvasContextMenuHandler(makeCanvasContextMenuHandler({ navigateToComponent }));
+// Stylebook hits decode to a TAG in the host and route here (null = clicked chrome/empty space).
+setStylebookHitHandler((tag, media) => {
+  if (tag) {
+    selectStylebookTag(tag, media);
+  } else {
+    updateSession({ ui: { activeSelector: null, stylebookSelection: null } });
+  }
 });
+// Commit-on-parent-click: a pointerdown in PARENT chrome outside the edit-session chrome (format
+// Toolbar / link popover / slash menu) ends the live inline-edit session — the iframe can't observe
+// Parent-realm pointer events (layers panel, tab strip, right panel…). Pointerdowns over the canvas
+// Land inside the cross-origin iframe and never reach this listener, so it can't double-fire with
+// The iframe's own click-away commit.
+document.addEventListener(
+  "pointerdown",
+  (e) => {
+    if (getEditSnapshot().editing && !isEditChromeTarget(e.target)) {
+      commitActiveEditSession();
+    }
+  },
+  true,
+);
+
 initCanvasUtils({
   getCanvasMode,
   getZoom: () => activeTab.value?.session.ui.zoom ?? 1,
-  renderStylebookOverlays,
   setZoomDirect: (zoom) => {
     if (activeTab.value) {
       activeTab.value.session.ui.zoom = zoom;
     }
   },
 });
-initPanelEvents({
-  enterInlineEdit,
-  getCanvasMode,
-  navigateToComponent,
-});
 initCanvasLiveRender({
   getCanvasMode,
 });
 initCanvasPatcher({
-  applyCanvasMediaOverrides,
-  enterComponentInlineEdit,
   getCanvasMode,
-  registerSubtreeDnD,
   renderOverlays,
   scheduleCanvasRender,
-  updateForcedPseudoPreview,
 });
+// When the iframe canvas can't apply a posted patch surgically, fall back to a full render.
+setIframePatchEscalation(scheduleCanvasRender);
+// One global coordinator monitor drives cross-frame palette→canvas drops (Phase 4c).
+registerCanvasDndBridge();
 initCanvasRender({
   getCanvasMode,
   get gitDiffState() {
@@ -441,7 +499,10 @@ effect(() => {
     void tab.session.ui.canvasMode;
     void tab.session.ui.editingFunction;
     void tab.session.ui.featureToggles;
+    void tab.session.ui.preview;
+    void tab.session.ui.previewParams;
     void tab.session.ui.settingsTab;
+    void tab.session.ui.showLayout;
     void tab.session.ui.stylebookTab;
     void tab.session.ui.stylebookFilter;
     void tab.session.ui.stylebookCustomizedOnly;
@@ -453,7 +514,6 @@ rightPanelMod.mount({
   getCanvasMode,
   navigateToComponent,
   renderCanvas: () => renderCanvas(),
-  updateForcedPseudoPreview,
 });
 
 leftPanelMod.mount({
@@ -520,6 +580,19 @@ function ensureFsSync() {
 const _urlParams = new URLSearchParams(location.search);
 const _projectParam = _urlParams.get("project") || _urlParams.get("open");
 
+if (!_projectParam) {
+  // Electrobun (and other non-?project= hosts) load their project over RPC, so the ?project= branch
+  // Below — which is the only place that calls platform.activate() — is skipped. Kick off activate()
+  // Here UNCONDITIONALLY so this window's loopback canvasUrl is fetched on boot (the canvas iframe
+  // Needs it); a render() once it resolves lets ensureHost swap an early default iframe for the
+  // Loopback one (see iframe-host ensureHost's canvasUrl-changed rebuild).
+  const _bootPlatform = getPlatform();
+  // oxlint-disable-next-line unicorn/prefer-top-level-await -- fire-and-forget: must not block the initial render
+  void _bootPlatform.activate?.()?.then(() => {
+    render();
+  });
+}
+
 if (_projectParam) {
   // ?project= mode: skip normal loadProject, set up site context from the path
   const isAbsPath =
@@ -562,6 +635,7 @@ if (_projectParam) {
             selectedPath: siteCtx.fileRelPath || null,
           });
 
+          await autoSyncProjectOnOpen();
           await ensureDependenciesInstalled();
           await loadComponentRegistry();
 
@@ -670,6 +744,13 @@ void hydrateRecentProjects().then(() => {
   render();
 });
 
+// Hydrate user settings (AI connection parameters) from the backend store, then re-render so
+// Key-gated surfaces (assistant gate, New Project Import/Agent tabs) see the stored key.
+// oxlint-disable-next-line unicorn/prefer-top-level-await -- deliberate fire-and-forget: hydration must not block initial render
+void hydrateSettings().then(() => {
+  render();
+});
+
 // ─── Left panel: delegated to panels/left-panel.js ───────────────────────────
 
 function renderLeftPanel() {
@@ -708,6 +789,11 @@ async function openRecentProject(root: string) {
     }
 
     platform.projectRoot = root;
+    // The format registry is cached per project — the previous root's registry (often empty on a
+    // Fresh desktop launch) must not answer for this project, or non-JSON documents fail with
+    // "No format class imported" until a reload. Mirrors openProject in files.ts.
+    refreshFormats();
+    void loadFormats();
     const content = await platform.readFile("project.json");
     const config = JSON.parse(content) as ProjectConfig;
 
@@ -725,6 +811,7 @@ async function openRecentProject(root: string) {
       selectedPath: null,
     });
 
+    await autoSyncProjectOnOpen();
     await ensureDependenciesInstalled();
     await loadDirectory(".");
     await loadComponentRegistry();
@@ -779,18 +866,6 @@ function openFileFromTree(path: string) {
 initShortcuts(() => ({
   applyTransform,
   canvasMode: getCanvasMode(),
-  componentInlineEdit: view.componentInlineEdit,
-  enterEditOnPath(path) {
-    requestAnimationFrame(() => {
-      const activePanel = getActivePanel();
-      if (activePanel) {
-        const el = findCanvasElement(path, activePanel.canvas);
-        if (el && isEditableBlock(el)) {
-          enterInlineEdit(el, path);
-        }
-      }
-    });
-  },
   openProject,
   panX: view.panX,
   panY: view.panY,

package/src/tabs/doc-op-apply.ts

@@ -0,0 +1,89 @@
+/**
+ * Pure document-op applier — folds a value-carrying {@link JxDocOp} into a bare (non-reactive)
+ * document tree. Shared by two consumers that MUST stay byte-identical or undo/redo would drift
+ * from live editing: history replay in the parent ({@link file://./transact.ts}) and the iframe
+ * canvas's non-reactive shadow doc (the patch source-of-truth across the cross-origin bridge).
+ *
+ * Dependency-light on purpose: it pulls only the pure path helper from `../state` and clones values
+ * with a local JSON round-trip, so the slim canvas-iframe bundle can import it without dragging in
+ * the editor's reactive store / format host.
+ */
+
+import { getNodeAtPath } from "../state";
+import type { JxDocOp } from "./patch-ops";
+import type { JxMutableNode } from "@jxsuite/schema/types";
+
+/** JSON round-trip clone — also normalizes away reactive proxies / functions / undefined. */
+function jsonClone<T>(value: T): T {
+  // oxlint-disable-next-line unicorn/prefer-structured-clone -- structuredClone throws on reactive proxies; JSON normalization is the point
+  return JSON.parse(JSON.stringify(value)) as T;
+}
+
+/** Deep-clone a recorded value (undefined/null pass through; reactive proxies are read through). */
+export function cloneValue<T>(v: T): T {
+  return v === undefined || v === null ? v : (jsonClone(v as object) as T);
+}
+
+/** The node's children array, lazily created; throws if `node` is itself a children array or mapped. */
+export function childArray(node: JxMutableNode): (JxMutableNode | string)[] {
+  // Defense-in-depth: a path that resolves to a children array (rather than a node) would
+  // Otherwise get a bogus `.children` property tacked on here, silently storing the insert where
+  // Nothing renders. Callers must pass a node; fail loudly if they don't.
+  if (Array.isArray(node)) {
+    throw new TypeError("Cannot insert into a children array; parentPath must point at a node");
+  }
+  if (!node.children) {
+    node.children = [];
+  }
+  if (!Array.isArray(node.children)) {
+    throw new TypeError("Cannot insert into mapped-array children; edit the map template instead");
+  }
+  return node.children;
+}
+
+/**
+ * Apply a replayable doc op to a bare document tree. Values/nodes are cloned in, so the tree never
+ * aliases the op object. Throws (with a machine-readable reason) when a target path is missing.
+ */
+export function applyDocOpToDoc(doc: JxMutableNode, op: JxDocOp): void {
+  switch (op.op) {
+    case "set-key": {
+      const node = getNodeAtPath(doc, op.path);
+      if (!node) {
+        throw new Error(`doc-op-node-not-found:${op.path.join("/")}`);
+      }
+      const target = node as Record<string, unknown>;
+      if (op.value === undefined) {
+        delete target[op.key];
+      } else {
+        target[op.key] = cloneValue(op.value);
+      }
+      return;
+    }
+    case "insert-child": {
+      const parent = getNodeAtPath(doc, op.parentPath);
+      childArray(parent).splice(op.index, 0, cloneValue(op.node) as JxMutableNode);
+      return;
+    }
+    case "remove-child": {
+      const parent = getNodeAtPath(doc, op.parentPath);
+      childArray(parent).splice(op.index, 1);
+      return;
+    }
+    case "set-child": {
+      const parent = getNodeAtPath(doc, op.parentPath);
+      childArray(parent).splice(op.index, 1, cloneValue(op.node) as JxMutableNode);
+      return;
+    }
+    case "move-child": {
+      const fromParent = getNodeAtPath(doc, op.fromParentPath);
+      const toParent = getNodeAtPath(doc, op.toParentPath);
+      const [node] = childArray(fromParent).splice(op.fromIndex, 1);
+      childArray(toParent).splice(op.toIndex, 0, node!);
+      return;
+    }
+    default: {
+      throw new Error(`unknown-doc-op:${(op as JxDocOp).op}`);
+    }
+  }
+}

package/src/tabs/patch-ops.ts

@@ -78,8 +78,12 @@ export interface PatchConsumer {
   classify: (tab: Tab, ops: JxPatchOp[]) => { patchable: boolean; reason: string };
   /** Mark a document root reference as surgically consumed (checked by the canvas doc-effect). */
   markConsumed: (docRef: object) => void;
-  /** Apply the batch to all ready canvas panels. Throws on any failure (caller escalates). */
-  apply: (tab: Tab, ops: JxPatchOp[]) => void;
+  /**
+   * Apply the batch to all ready canvas panels. Throws on any failure (caller escalates). `record`
+   * carries the value-carrying `docOps` the iframe consumer posts across the frame boundary; the
+   * legacy (parent-DOM) consumer ignores it and reads the post-mutation reactive doc instead.
+   */
+  apply: (tab: Tab, ops: JxPatchOp[], record?: TransactionRecord) => void;
   /** Schedule a full canvas render as the fallback path, recording the reason. */
   escalate: (reason: string) => void;
 }

package/src/tabs/tab.ts

@@ -16,6 +16,12 @@ import type { JxDocOp } from "./patch-ops";
 export interface TabUi {
   rightTab: string;
   canvasMode: string;
+  /** Preview toggle — composes with an edit/design canvasMode; the effective mode becomes "preview". */
+  preview: boolean;
+  /** Show elements inherited from the page's layout (pages with an effective layout only). */
+  showLayout: boolean;
+  /** Chosen literal values for dynamic route params (e.g. { sku: "mini-trencher" }). */
+  previewParams: Record<string, string>;
   zoom: number;
   activeMedia: string | null;
   activeSelector: string | null;
@@ -79,7 +85,10 @@ export interface Tab {
     ui: TabUi;
     canvas: {
       status: string;
-      scope: { stop: () => void; [k: string]: unknown } | null;
+      // A serializable snapshot of the iframe's resolved `$defs` (data-source values), posted over
+      // The bridge as a `dataScope` message and read by the data-explorer panel. Plain data now —
+      // The old live `EffectScope` (with `.stop()`) moved into the iframe realm with buildScope.
+      scope: Record<string, unknown> | null;
       error: string | null;
       pendingInlineEdit: InlineEditDef | null;
     };
@@ -92,9 +101,10 @@ export interface Tab {
 
 /**
  * @param {string} canvasMode — initial canvas mode (the tab's first allowed mode)
+ * @param {boolean} preview — initial preview-toggle state
  * @returns {TabUi}
  */
-function createDefaultUi(canvasMode: string) {
+function createDefaultUi(canvasMode: string, preview = false) {
   return {
     activeMedia: null,
     activeSelector: null,
@@ -109,8 +119,11 @@ function createDefaultUi(canvasMode: string) {
     gitStatus: null,
     inspectorSections: {},
     pendingInlineEdit: null,
+    preview,
+    previewParams: {},
     rightTab: "properties",
     settingsTab: "stylebook",
+    showLayout: true,
     styleFilter: "",
     styleFilterActive: false,
     styleSections: {},
@@ -165,7 +178,10 @@ export function createTab({
   const resolvedModes = capabilities?.modes ?? inferModes(documentPath, sourceFormat);
   // A tab opens in its first allowed mode — never one the toolbar would disable.
   // Formats author mode order so the default comes first (edit, stylebook, etc.).
-  const initialCanvasMode = resolvedModes[0] ?? "edit";
+  // "preview" is a per-tab toggle rather than a base mode: a preview-first format opens
+  // In its first non-preview mode with the toggle already on.
+  const initialCanvasMode = resolvedModes.find((m) => m !== "preview") ?? "edit";
+  const initialPreview = resolvedModes[0] === "preview";
 
   const tab = scope.run(() => ({
     capabilities: { modes: resolvedModes },
@@ -196,7 +212,7 @@ export function createTab({
       documentStack: [],
       hover: null,
       selection: null,
-      ui: createDefaultUi(initialCanvasMode),
+      ui: createDefaultUi(initialCanvasMode, initialPreview),
     }),
   })) as unknown as Tab;
 
@@ -204,6 +220,9 @@ export function createTab({
 }
 
 /**
+ * Allowed modes for a document. "preview" in a format's mode list means the preview toggle is
+ * Available for the tab (it is not a base canvas mode the toolbar switches to).
+ *
  * @param {string | null | undefined} documentPath
  * @param {string | null} sourceFormat
  * @returns {string[]}

package/src/tabs/transact.ts

@@ -2,6 +2,7 @@
 import { toRaw } from "../reactivity";
 import { jsonClone } from "../utils/studio-utils";
 import { childIndex, getNodeAtPath, isAncestor, parentElementPath, pathsEqual } from "../state";
+import { applyDocOpToDoc, childArray, cloneValue } from "./doc-op-apply";
 import {
   beginRecording,
   endRecording,
@@ -33,11 +34,6 @@ function patchHistoryEnabled() {
   }
 }
 
-/** Deep-clone a recorded value (undefined passes through; reactive proxies are read through). */
-function cloneValue<T>(v: T): T {
-  return v === undefined || v === null ? v : (jsonClone(v as object) as T);
-}
-
 /** Forward/inverse pair for a single-key change on the node at path. */
 function setKeyPair(path: JxPath, key: string, before: unknown, after: unknown): JxDocOpPair {
   return {
@@ -81,26 +77,6 @@ export type JxNodeValue =
   | JxEventBinding
   | undefined;
 
-/**
- * The editable children array of a node, created when absent. Mapped-array children (`$prototype:
- * "Array"`) cannot be index-mutated — fail loudly instead of corrupting.
- */
-function childArray(node: JxMutableNode): (JxMutableNode | string)[] {
-  // Defense-in-depth: a path that resolves to a children array (rather than a node) would
-  // Otherwise get a bogus `.children` property tacked on here, silently storing the insert where
-  // Nothing renders. Callers must pass a node; fail loudly if they don't.
-  if (Array.isArray(node)) {
-    throw new TypeError("Cannot insert into a children array; parentPath must point at a node");
-  }
-  if (!node.children) {
-    node.children = [];
-  }
-  if (!Array.isArray(node.children)) {
-    throw new TypeError("Cannot insert into mapped-array children; edit the map template instead");
-  }
-  return node.children;
-}
-
 // ─── Transactional layer ─────────────────────────────────────────────────────
 
 /**
@@ -152,7 +128,7 @@ export function transactDoc(
 
   if (verdict.patchable) {
     try {
-      consumer!.apply(tab, record.ops);
+      consumer!.apply(tab, record.ops, record);
     } catch (error) {
       consumer!.escalate(
         `patch-apply-failed: ${error instanceof Error ? error.message : String(error)}`,
@@ -254,54 +230,6 @@ export function transact(
 /** Document-level keys whose changes require a full scope/panel rebuild on the canvas. */
 const DOC_META_KEYS = new Set(["state", "$media", "$head", "$elements", "imports", "$layout"]);
 
-/**
- * Apply a replayable doc op to a bare document tree (history replay — no canvas recording).
- *
- * @param {JxMutableNode} doc
- * @param {JxDocOp} op
- */
-function applyDocOpToDoc(doc: JxMutableNode, op: JxDocOp) {
-  switch (op.op) {
-    case "set-key": {
-      const node = getNodeAtPath(doc, op.path);
-      if (!node) {
-        throw new Error(`doc-op-node-not-found:${op.path.join("/")}`);
-      }
-      if (op.value === undefined) {
-        delete node[op.key];
-      } else {
-        node[op.key] = cloneValue(op.value) as JxNodeValue;
-      }
-      return;
-    }
-    case "insert-child": {
-      const parent = getNodeAtPath(doc, op.parentPath);
-      childArray(parent).splice(op.index, 0, cloneValue(op.node) as JxMutableNode);
-      return;
-    }
-    case "remove-child": {
-      const parent = getNodeAtPath(doc, op.parentPath);
-      childArray(parent).splice(op.index, 1);
-      return;
-    }
-    case "set-child": {
-      const parent = getNodeAtPath(doc, op.parentPath);
-      childArray(parent).splice(op.index, 1, cloneValue(op.node) as JxMutableNode);
-      return;
-    }
-    case "move-child": {
-      const fromParent = getNodeAtPath(doc, op.fromParentPath);
-      const toParent = getNodeAtPath(doc, op.toParentPath);
-      const [node] = childArray(fromParent).splice(op.fromIndex, 1);
-      childArray(toParent).splice(op.toIndex, 0, node!);
-      return;
-    }
-    default: {
-      throw new Error(`unknown-doc-op:${(op as JxDocOp).op}`);
-    }
-  }
-}
-
 /**
  * Apply a doc op to the live document AND record the matching canvas patch op, so undo/redo
  * transactions patch the canvas surgically like any other edit.