@jxsuite/studio 0.11.0 → 0.14.0

package/src/editor/context-menu.js

@@ -1,60 +1,67 @@
 // ─── Clipboard & Context Menu ─────────────────────────────────────────────────
 import { html, render as litRender } from "lit-html";
+import { getNodeAtPath, parentElementPath, childIndex } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
 import {
-  update,
-  selectNode,
-  insertNode,
-  removeNode,
-  duplicateNode,
-  wrapNode,
-  getNodeAtPath,
-  parentElementPath,
-  childIndex,
-} from "../store.js";
+  transactDoc,
+  mutateInsertNode,
+  mutateRemoveNode,
+  mutateDuplicateNode,
+  mutateWrapNode,
+} from "../tabs/transact.js";
 import { statusMessage } from "../panels/statusbar.js";
 import { convertToComponent } from "./convert-to-component.js";
 import { componentRegistry } from "../files/components.js";
 
-/** @type {any} */
+/**
+ * @typedef {import("../state.js").StudioState} StudioState
+ *
+ * @typedef {import("../state.js").JxPath} JxPath
+ *
+ * @typedef {import("../state.js").JxNode} JxNode
+ */
+
+/** @type {JxNode | null} */
 let clipboard = null;
 
 // ─── Clipboard ────────────────────────────────────────────────────────────────
 
-/** @param {any} S */
-export function copyNode(S) {
-  if (!S.selection) return;
-  const node = getNodeAtPath(S.document, S.selection);
+export function copyNode() {
+  const tab = activeTab.value;
+  if (!tab?.session.selection) return;
+  const node = getNodeAtPath(tab.doc.document, tab.session.selection);
   if (!node) return;
   clipboard = structuredClone(node);
   statusMessage("Copied");
 }
 
-/** @param {any} S */
-export function cutNode(S) {
-  if (!S.selection || S.selection.length < 2) return;
-  const node = getNodeAtPath(S.document, S.selection);
+export function cutNode() {
+  const tab = activeTab.value;
+  if (!tab?.session.selection || tab.session.selection.length < 2) return;
+  const sel = tab.session.selection;
+  const node = getNodeAtPath(tab.doc.document, sel);
   if (!node) return;
   clipboard = structuredClone(node);
-  update(removeNode(S, S.selection));
+  transactDoc(tab, (t) => mutateRemoveNode(t, sel));
   statusMessage("Cut");
 }
 
-/** @param {any} S */
-export function pasteNode(S) {
+export function pasteNode() {
   if (!clipboard) return;
-  const pPath = S.selection || [];
-  const parent = getNodeAtPath(S.document, pPath);
+  const tab = activeTab.value;
+  if (!tab) return;
+  const clip = clipboard;
+  const pPath = tab.session.selection || [];
+  const parent = getNodeAtPath(tab.doc.document, pPath);
   if (!parent) return;
 
-  if (S.selection && S.selection.length >= 2) {
-    // Paste as sibling after selection
-    const pp = /** @type {any} */ (parentElementPath(S.selection));
-    const idx = /** @type {number} */ (childIndex(S.selection));
-    update(insertNode(S, pp, idx + 1, structuredClone(clipboard)));
+  if (tab.session.selection && tab.session.selection.length >= 2) {
+    const pp = /** @type {JxPath} */ (parentElementPath(tab.session.selection));
+    const idx = /** @type {number} */ (childIndex(tab.session.selection));
+    transactDoc(tab, (t) => mutateInsertNode(t, pp, idx + 1, structuredClone(clip)));
   } else {
-    // Paste as last child of root/selected
     const idx = parent.children ? parent.children.length : 0;
-    update(insertNode(S, pPath, idx, structuredClone(clipboard)));
+    transactDoc(tab, (t) => mutateInsertNode(t, pPath, idx, structuredClone(clip)));
   }
   statusMessage("Pasted");
 }
@@ -77,85 +84,103 @@ export function dismissContextMenu() {
 }
 
 /**
- * @param {any} e
- * @param {any} path
- * @param {any} S
+ * @param {MouseEvent} e
+ * @param {JxPath} path
  * @param {{ onEditComponent?: (path: string) => void }} [opts]
  */
-export function showContextMenu(e, path, S, opts = {}) {
+export function showContextMenu(e, path, opts = {}) {
   e.preventDefault();
   ctxMenu.removeAttribute("open");
 
-  const node = getNodeAtPath(S.document, path);
+  const tab = activeTab.value;
+  const node = getNodeAtPath(tab?.doc.document, path);
   if (!node) return;
 
   // Select the node
-  update(selectNode(S, path));
+  tab.session.selection = path;
 
   /** @type {{ label: string; action?: () => void; danger?: boolean }[]} */
   const items = [];
 
-  items.push({ label: "Copy", action: () => copyNode(S) });
+  items.push({ label: "Copy", action: () => copyNode() });
   if (path.length >= 2) {
-    items.push({ label: "Cut", action: () => cutNode(S) });
-    items.push({ label: "Duplicate", action: () => update(duplicateNode(S, S.selection)) });
+    items.push({ label: "Cut", action: () => cutNode() });
+    items.push({
+      label: "Duplicate",
+      action: () => transactDoc(activeTab.value, (t) => mutateDuplicateNode(t, path)),
+    });
     items.push({ label: "—" }); // separator
     items.push({
       label: "Insert before",
       action: () => {
-        const pp = /** @type {any} */ (parentElementPath(path));
+        const pp = /** @type {JxPath} */ (parentElementPath(path));
         const idx = /** @type {number} */ (childIndex(path));
-        update(insertNode(S, pp, idx, { tagName: "p", children: [] }));
+        transactDoc(activeTab.value, (t) =>
+          mutateInsertNode(t, pp, idx, { tagName: "p", children: [] }),
+        );
       },
     });
     items.push({
       label: "Insert after",
       action: () => {
-        const pp = /** @type {any} */ (parentElementPath(path));
+        const pp = /** @type {JxPath} */ (parentElementPath(path));
         const idx = /** @type {number} */ (childIndex(path));
-        update(insertNode(S, pp, idx + 1, { tagName: "p", children: [] }));
+        transactDoc(activeTab.value, (t) =>
+          mutateInsertNode(t, pp, idx + 1, { tagName: "p", children: [] }),
+        );
       },
     });
     items.push({
       label: "Wrap in Div",
-      action: () => update(wrapNode(S, S.selection)),
+      action: () => transactDoc(activeTab.value, (t) => mutateWrapNode(t, path)),
     });
     if (node.tagName) {
       const isComponent =
         node.tagName.includes("-") &&
-        componentRegistry.some((/** @type {any} */ c) => c.tagName === node.tagName);
+        componentRegistry.some(
+          (/** @type {{ tagName: string }} */ c) => c.tagName === node.tagName,
+        );
       if (isComponent && opts.onEditComponent) {
-        const comp = componentRegistry.find((/** @type {any} */ c) => c.tagName === node.tagName);
+        const comp = componentRegistry.find(
+          (/** @type {{ tagName: string; path: string }} */ c) => c.tagName === node.tagName,
+        );
         items.push({
           label: "Edit Component",
-          action: () => opts.onEditComponent?.(comp.path),
+          action: () => opts.onEditComponent?.(/** @type {string} */ (comp?.path)),
         });
       } else if (!isComponent) {
         items.push({
           label: "Convert to Component",
-          action: () => convertToComponent(S),
+          action: () => convertToComponent(),
         });
       }
     }
     items.push({ label: "—" }); // separator
-    items.push({ label: "Delete", action: () => update(removeNode(S, S.selection)), danger: true });
+    items.push({
+      label: "Delete",
+      action: () => transactDoc(activeTab.value, (t) => mutateRemoveNode(t, path)),
+      danger: true,
+    });
   }
   if (clipboard) {
+    const clip = clipboard;
     items.push({ label: "—" });
     items.push({
       label: "Paste inside",
       action: () => {
         const idx = node.children ? node.children.length : 0;
-        update(insertNode(S, path, idx, structuredClone(clipboard)));
+        transactDoc(activeTab.value, (t) => mutateInsertNode(t, path, idx, structuredClone(clip)));
       },
     });
     if (path.length >= 2) {
       items.push({
         label: "Paste after",
         action: () => {
-          const pp = /** @type {any} */ (parentElementPath(path));
+          const pp = /** @type {JxPath} */ (parentElementPath(path));
           const idx = /** @type {number} */ (childIndex(path));
-          update(insertNode(S, pp, idx + 1, structuredClone(clipboard)));
+          transactDoc(activeTab.value, (t) =>
+            mutateInsertNode(t, pp, idx + 1, structuredClone(clip)),
+          );
         },
       });
     }

package/src/editor/convert-to-component.js

@@ -1,6 +1,8 @@
 // ─── Convert to Component ─────────────────────────────────────────────────────
 import { html, render as litRender } from "lit-html";
-import { update, getNodeAtPath, applyMutation, parentElementPath, childIndex } from "../store.js";
+import { getNodeAtPath, parentElementPath, childIndex } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
+import { transact } from "../tabs/transact.js";
 import {
   computeRelativePath,
   loadComponentRegistry,
@@ -11,15 +13,12 @@ import { statusMessage } from "../panels/statusbar.js";
 
 const VALID_NAME = /^[a-z][a-z0-9]*(-[a-z0-9]+)+$/;
 
-/**
- * Convert the currently selected element into a reusable component.
- *
- * @param {any} S - Current studio state
- */
-export async function convertToComponent(S) {
-  if (!S.selection || S.selection.length < 2) return;
+/** Convert the currently selected element into a reusable component. */
+export async function convertToComponent() {
+  const tab = activeTab.value;
+  if (!tab?.session.selection || tab.session.selection.length < 2) return;
 
-  const node = getNodeAtPath(S.document, S.selection);
+  const node = getNodeAtPath(tab.doc.document, tab.session.selection);
   if (!node || !node.tagName) return;
 
   const defaultName = deriveDefaultName(node);
@@ -32,11 +31,11 @@ export async function convertToComponent(S) {
 
   // Compute paths
   const componentFile = "components/" + name + ".json";
-  const refPath = computeRelativePath(S.documentPath, componentFile);
+  const refPath = computeRelativePath(tab.documentPath, componentFile);
 
   // Single atomic mutation: replace node + add $elements ref
-  const selectionPath = S.selection;
-  const newState = applyMutation(S, (doc) => {
+  const selectionPath = tab.session.selection;
+  transact(tab, (doc) => {
     // Navigate to parent's children array and replace the node
     const pp = parentElementPath(selectionPath) ?? [];
     const idx = childIndex(selectionPath);
@@ -54,8 +53,6 @@ export async function convertToComponent(S) {
     }
   });
 
-  update(newState);
-
   // Write component file and refresh registry
   try {
     const platform = getPlatform();

package/src/editor/insertion-helper.js

@@ -6,6 +6,8 @@
  */
 
 import { showSlashMenu } from "./slash-menu.js";
+import { activeTab } from "../workspace/workspace.js";
+import { transactDoc, mutateInsertNode } from "../tabs/transact.js";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -31,16 +33,11 @@ import { showSlashMenu } from "./slash-menu.js";
 
 /**
  * @typedef {Object} InsertionHelperContext
- * @property {() => any} getState - Returns the current editor state.
- * @property {(state: any) => void} update - Commits a new state.
  * @property {() => string} getCanvasMode - Returns the active canvas mode.
  * @property {(fn: Function) => any} withPanelPointerEvents - Executes fn with pointer-events
  *   temporarily enabled on the canvas.
  * @property {() => number} effectiveZoom - Returns the current zoom scale factor.
  * @property {(tag: string) => Object} defaultDef - Creates a default element definition for a tag.
- * @property {(s: any, path: any[], idx: number, def: Object) => any} insertNode - Inserts a node
- *   into the document tree.
- * @property {(s: any, path: any[]) => any} selectNode - Sets the selection to the given path.
  * @property {(path: any[]) => any[] | null} parentElementPath - Returns the parent element path, or
  *   null for root.
  * @property {(path: any[]) => string | number} childIndex - Returns the child index within the
@@ -284,18 +281,18 @@ function onHelperClick(/** @type {MouseEvent} */ e) {
 function onSlashSelect(cmd, point) {
   if (!_ctx) return;
 
-  const { getState, update, defaultDef, insertNode, selectNode } = _ctx;
-  const S = getState();
+  const { defaultDef } = _ctx;
   const { parentPath, idx, edge } = point;
 
   const newDef = defaultDef(cmd.tag);
   const insertPath = edge === "center" ? point.path : parentPath;
   const insertIdx = edge === "center" ? 0 : idx;
-
-  let s = insertNode(S, insertPath, insertIdx, newDef);
   const newPath = [...insertPath, "children", insertIdx];
-  s = selectNode(s, newPath);
-  update(s);
+
+  transactDoc(activeTab.value, (t) => {
+    mutateInsertNode(t, insertPath, insertIdx, newDef);
+    t.session.selection = newPath;
+  });
 
   hide();
 }

package/src/editor/shortcuts.js

@@ -5,46 +5,43 @@
  * shortcuts on the canvas / document.
  */
 
+import { getNodeAtPath, parentElementPath, childIndex, canvasWrap } from "../store.js";
+import { activeTab, workspace, closeTab } from "../workspace/workspace.js";
 import {
-  selectNode,
-  undo,
-  redo,
-  removeNode,
-  insertNode,
-  duplicateNode,
-  getNodeAtPath,
-  parentElementPath,
-  childIndex,
-  canvasWrap,
-  update,
-} from "../store.js";
+  transactDoc,
+  mutateInsertNode,
+  mutateRemoveNode,
+  mutateDuplicateNode,
+  undo as tabUndo,
+  redo as tabRedo,
+} from "../tabs/transact.js";
 import { isEditing } from "./inline-edit.js";
 import { copyNode, cutNode, pasteNode } from "./context-menu.js";
 
+/** @typedef {import("../state.js").JxPath} JxPath */
+
 /**
  * Initialise all keyboard (and wheel/pointer) shortcuts.
  *
  * @param {() => {
- *   S: any;
- *   setS: (s: any) => void;
  *   canvasMode: string;
  *   panX: number;
  *   panY: number;
  *   setPan: (x: number, y: number) => void;
  *   applyTransform: () => void;
  *   positionZoomIndicator: () => void;
- *   componentInlineEdit: any;
+ *   componentInlineEdit: object | null;
  *   saveFile: () => void;
  *   openProject: () => void;
- *   enterEditOnPath: (path: any) => void;
+ *   enterEditOnPath: (path: JxPath) => void;
  * }} getContext
  */
 export function initShortcuts(getContext) {
   // Wheel handler: Ctrl+Scroll = zoom (cursor-centered), plain scroll = pan
   canvasWrap.addEventListener(
     "wheel",
-    (/** @type {any} */ e) => {
-      const { S, setS, canvasMode, panX, panY, setPan, applyTransform } = getContext();
+    (/** @type {WheelEvent} */ e) => {
+      const { canvasMode, panX, panY, setPan, applyTransform } = getContext();
       // Edit (content) mode: let the scroll container handle scrolling natively
       if (canvasMode === "edit") return;
       e.preventDefault();
@@ -53,13 +50,13 @@ export function initShortcuts(getContext) {
         const rect = canvasWrap.getBoundingClientRect();
         const cursorX = e.clientX - rect.left;
         const cursorY = e.clientY - rect.top;
-        const oldZoom = S.ui.zoom;
+        const oldZoom = activeTab.value?.session.ui.zoom ?? 1;
         const delta = -e.deltaY * 0.005;
         const newZoom = Math.min(5.0, Math.max(0.05, oldZoom * (1 + delta)));
         const ratio = newZoom / oldZoom;
         // Adjust pan so the point under cursor stays stationary
         setPan(cursorX - (cursorX - panX) * ratio, cursorY - (cursorY - panY) * ratio);
-        setS({ ...S, ui: { ...S.ui, zoom: newZoom } });
+        activeTab.value.session.ui.zoom = newZoom;
       } else if (e.shiftKey) {
         // Shift+scroll = horizontal pan
         setPan(panX - e.deltaY, panY);
@@ -73,7 +70,7 @@ export function initShortcuts(getContext) {
   );
 
   // Middle-mouse drag panning
-  canvasWrap.addEventListener("pointerdown", (/** @type {any} */ e) => {
+  canvasWrap.addEventListener("pointerdown", (/** @type {PointerEvent} */ e) => {
     const ctx = getContext();
     if (ctx.canvasMode === "edit") return; // no panning in edit mode
     if (e.button !== 1) return; // middle button only
@@ -81,7 +78,7 @@ export function initShortcuts(getContext) {
     canvasWrap.setPointerCapture(e.pointerId);
     let lastX = e.clientX,
       lastY = e.clientY;
-    const onMove = (/** @type {any} */ ev) => {
+    const onMove = (/** @type {PointerEvent} */ ev) => {
       const { panX, panY, setPan, applyTransform } = getContext();
       setPan(panX + (ev.clientX - lastX), panY + (ev.clientY - lastY));
       lastX = ev.clientX;
@@ -102,8 +99,6 @@ export function initShortcuts(getContext) {
 
   document.addEventListener("keydown", (e) => {
     const {
-      S,
-      setS,
       canvasMode,
       setPan,
       applyTransform,
@@ -112,6 +107,7 @@ export function initShortcuts(getContext) {
       openProject,
       enterEditOnPath,
     } = getContext();
+    const tab = activeTab.value;
     const mod = e.ctrlKey || e.metaKey;
 
     // Don't intercept when typing in inputs or contenteditable
@@ -125,14 +121,19 @@ export function initShortcuts(getContext) {
         e.preventDefault();
         saveFile();
       }
+      if (mod && e.key === "w") {
+        e.preventDefault();
+      }
       return;
     }
     if (isEditing()) {
-      // Let inline editor handle its own keyboard events; only intercept Save
       if (mod && e.key === "s") {
         e.preventDefault();
         saveFile();
       }
+      if (mod && e.key === "w") {
+        e.preventDefault();
+      }
       return;
     }
     if (componentInlineEdit) {
@@ -140,11 +141,25 @@ export function initShortcuts(getContext) {
         e.preventDefault();
         saveFile();
       }
+      if (mod && e.key === "w") {
+        e.preventDefault();
+      }
       return;
     }
 
     if (mod) {
       switch (e.key) {
+        case "w":
+          e.preventDefault();
+          if (workspace.activeTabId && workspace.tabOrder.length > 1) {
+            const tab = workspace.tabs.get(workspace.activeTabId);
+            if (tab?.doc.dirty) {
+              const name = tab.documentPath?.split("/").pop() || "Untitled";
+              if (!window.confirm(`"${name}" has unsaved changes. Close without saving?`)) break;
+            }
+            closeTab(workspace.activeTabId);
+          }
+          break;
         case "o":
           e.preventDefault();
           openProject();
@@ -155,28 +170,32 @@ export function initShortcuts(getContext) {
           break;
         case "z":
           e.preventDefault();
-          update(e.shiftKey ? redo(S) : undo(S));
+          if (e.shiftKey) tabRedo(activeTab.value);
+          else tabUndo(activeTab.value);
           break;
         case "d":
           e.preventDefault();
-          if (S.selection) update(duplicateNode(S, S.selection));
+          if (tab?.session.selection) {
+            const sel = tab.session.selection;
+            transactDoc(tab, (t) => mutateDuplicateNode(t, sel));
+          }
           break;
         case "c":
           e.preventDefault();
-          copyNode(S);
+          copyNode();
           break;
         case "x":
           e.preventDefault();
-          cutNode(S);
+          cutNode();
           break;
         case "v":
           e.preventDefault();
-          pasteNode(S);
+          pasteNode();
           break;
         case "0":
           if (canvasMode === "edit") break;
           e.preventDefault();
-          setS({ ...S, ui: { ...S.ui, zoom: 1 } });
+          activeTab.value.session.ui.zoom = 1;
           setPan(16, 16);
           applyTransform();
           break;
@@ -184,13 +203,13 @@ export function initShortcuts(getContext) {
         case "+":
           if (canvasMode === "edit") break;
           e.preventDefault();
-          setS({ ...S, ui: { ...S.ui, zoom: Math.min(5.0, S.ui.zoom * 1.2) } });
+          activeTab.value.session.ui.zoom = Math.min(5.0, (tab?.session.ui.zoom ?? 1) * 1.2);
           applyTransform();
           break;
         case "-":
           if (canvasMode === "edit") break;
           e.preventDefault();
-          setS({ ...S, ui: { ...S.ui, zoom: Math.max(0.05, S.ui.zoom / 1.2) } });
+          activeTab.value.session.ui.zoom = Math.max(0.05, (tab?.session.ui.zoom ?? 1) / 1.2);
           applyTransform();
           break;
       }
@@ -200,46 +219,48 @@ export function initShortcuts(getContext) {
     switch (e.key) {
       case "Delete":
       case "Backspace":
-        if (S.selection && S.selection.length >= 2) {
+        if (tab?.session.selection && tab.session.selection.length >= 2) {
           e.preventDefault();
-          update(removeNode(S, S.selection));
+          const sel = tab.session.selection;
+          transactDoc(tab, (t) => mutateRemoveNode(t, sel));
         }
         break;
       case "Escape":
-        update(selectNode(S, null));
+        activeTab.value.session.selection = null;
         break;
       case "Enter":
-        if (S.selection && S.selection.length >= 2) {
+        if (tab?.session.selection && tab.session.selection.length >= 2) {
           e.preventDefault();
-          const pp = /** @type {any} */ (parentElementPath(S.selection));
-          const idx = /** @type {number} */ (childIndex(S.selection));
-          let s = insertNode(S, pp, idx + 1, { tagName: "p", textContent: "" });
+          const pp = /** @type {JxPath} */ (parentElementPath(tab.session.selection));
+          const idx = /** @type {number} */ (childIndex(tab.session.selection));
           const newPath = [...pp, "children", idx + 1];
-          s = selectNode(s, newPath);
-          update(s);
+          transactDoc(tab, (t) => {
+            mutateInsertNode(t, pp, idx + 1, { tagName: "p", textContent: "" });
+            t.session.selection = newPath;
+          });
           enterEditOnPath(newPath);
         }
         break;
       case "ArrowUp":
         e.preventDefault();
-        navigateSelection(S);
+        navigateSelection(-1);
         break;
       case "ArrowDown":
         e.preventDefault();
-        navigateSelection(S, 1);
+        navigateSelection(1);
         break;
       case "ArrowLeft":
         e.preventDefault();
-        if (S.selection && S.selection.length >= 2) {
-          update(selectNode(S, parentElementPath(S.selection)));
+        if (tab?.session.selection && tab.session.selection.length >= 2) {
+          activeTab.value.session.selection = parentElementPath(tab.session.selection);
         }
         break;
       case "ArrowRight":
         e.preventDefault();
-        if (S.selection) {
-          const node = getNodeAtPath(S.document, S.selection);
+        if (tab?.session.selection) {
+          const node = getNodeAtPath(tab.doc.document, tab.session.selection);
           if (node?.children?.length > 0) {
-            update(selectNode(S, [...S.selection, "children", 0]));
+            activeTab.value.session.selection = [...tab.session.selection, "children", 0];
           }
         }
         break;
@@ -249,8 +270,8 @@ export function initShortcuts(getContext) {
   // Block ctrl+scroll (browser zoom) on all non-canvas areas
   document.addEventListener(
     "wheel",
-    (/** @type {any} */ e) => {
-      if ((e.ctrlKey || e.metaKey) && !canvasWrap.contains(e.target)) {
+    (/** @type {WheelEvent} */ e) => {
+      if ((e.ctrlKey || e.metaKey) && !canvasWrap.contains(/** @type {Node} */ (e.target))) {
         e.preventDefault();
       }
     },
@@ -258,23 +279,26 @@ export function initShortcuts(getContext) {
   );
 }
 
-/**
- * @param {any} S
- * @param {number} [direction]
- */
-function navigateSelection(S, direction = -1) {
-  if (!S.selection) {
-    update(selectNode(S, []));
+/** @param {number} [direction] */
+function navigateSelection(direction = -1) {
+  const tab = activeTab.value;
+  if (!tab?.session.selection) {
+    activeTab.value.session.selection = [];
     return;
   }
-  if (S.selection.length < 2) return; // can't navigate from root
+  if (tab.session.selection.length < 2) return;
 
-  const parent = getNodeAtPath(S.document, /** @type {any} */ (parentElementPath(S.selection)));
-  const idx = /** @type {number} */ (childIndex(S.selection));
+  const parent = getNodeAtPath(
+    tab.doc.document,
+    /** @type {JxPath} */ (parentElementPath(tab.session.selection)),
+  );
+  const idx = /** @type {number} */ (childIndex(tab.session.selection));
   const newIdx = idx + direction;
   if (parent?.children && newIdx >= 0 && newIdx < parent.children.length) {
-    update(
-      selectNode(S, [.../** @type {any[]} */ (parentElementPath(S.selection)), "children", newIdx]),
-    );
+    activeTab.value.session.selection = [
+      .../** @type {JxPath} */ (parentElementPath(tab.session.selection)),
+      "children",
+      newIdx,
+    ];
   }
 }