@jxsuite/studio 0.10.2 → 0.13.0

package/src/editor/content-inline-edit.js

@@ -5,16 +5,14 @@
 
 import {
   getState,
-  update,
   renderOnly,
-  selectNode,
-  insertNode,
-  updateProperty,
   getNodeAtPath,
   parentElementPath,
   childIndex,
   canvasPanels,
 } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
+import { transactDoc, mutateInsertNode, mutateUpdateProperty } from "../tabs/transact.js";
 import { view } from "../view.js";
 import { startEditing, isEditableBlock } from "./inline-edit.js";
 import { restoreTemplateExpressions } from "../utils/edit-display.js";
@@ -50,28 +48,21 @@ export function enterInlineEdit(el, path) {
       const node = getNodeAtPath(S.document, commitPath);
       if (children) {
         if (node && JSON.stringify(node.children) === JSON.stringify(children)) return;
-        let s = updateProperty(S, commitPath, "textContent", undefined);
-        s = updateProperty(s, commitPath, "children", children);
-        update(s);
+        transactDoc(activeTab.value, (t) => {
+          mutateUpdateProperty(t, commitPath, "textContent", undefined);
+          mutateUpdateProperty(t, commitPath, "children", children);
+        });
       } else if (textContent != null) {
         if (node && node.textContent === textContent && !node.children) return;
-        let s = updateProperty(S, commitPath, "children", undefined);
-        s = updateProperty(s, commitPath, "textContent", textContent);
-        update(s);
+        transactDoc(activeTab.value, (t) => {
+          mutateUpdateProperty(t, commitPath, "children", undefined);
+          mutateUpdateProperty(t, commitPath, "textContent", textContent);
+        });
       }
     },
 
     onSplit(/** @type {any} */ splitPath, /** @type {any} */ before, /** @type {any} */ after) {
       const tag = "p";
-      let s = getState();
-
-      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));
@@ -86,10 +77,19 @@ export function enterInlineEdit(el, path) {
         newNode.textContent = "";
       }
 
-      s = insertNode(s, parentPath, idx + 1, newNode);
       const newPath = [...parentPath, "children", idx + 1];
-      s = selectNode(s, newPath);
-      update(s);
+
+      transactDoc(activeTab.value, (t) => {
+        if (before.textContent != null) {
+          mutateUpdateProperty(t, splitPath, "children", undefined);
+          mutateUpdateProperty(t, splitPath, "textContent", before.textContent);
+        } else if (before.children) {
+          mutateUpdateProperty(t, splitPath, "textContent", undefined);
+          mutateUpdateProperty(t, splitPath, "children", before.children);
+        }
+        mutateInsertNode(t, parentPath, idx + 1, newNode);
+        t.session.selection = newPath;
+      });
 
       // Re-enter editing on the new element after render
       requestAnimationFrame(() => {
@@ -125,17 +125,17 @@ export function enterInlineEdit(el, path) {
 
       // If the element is empty, swap its tagName instead of inserting after
       if (isEmpty) {
-        let s = getState();
-        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);
+        transactDoc(activeTab.value, (t) => {
+          mutateUpdateProperty(t, afterPath, "tagName", cmd.tag);
+          mutateUpdateProperty(t, afterPath, "children", undefined);
+          const def = defaultDef(cmd.tag);
+          if (def.textContent && def.textContent !== "Paragraph text") {
+            mutateUpdateProperty(t, afterPath, "textContent", def.textContent);
+          } else {
+            mutateUpdateProperty(t, afterPath, "textContent", undefined);
+          }
+          t.session.selection = afterPath;
+        });
 
         requestAnimationFrame(() => {
           const activePanel = getActivePanel();
@@ -152,23 +152,22 @@ export function enterInlineEdit(el, path) {
       const elementDef = defaultDef(cmd.tag);
       const parentPath = /** @type {any} */ (parentElementPath(afterPath));
       const idx = /** @type {number} */ (childIndex(afterPath));
+      const newPath = [...parentPath, "children", idx + 1];
 
       // Apply pending commit from inline edit first (batched to avoid double render)
-      let s = getState();
-      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);
+      transactDoc(activeTab.value, (t) => {
+        if (commitData) {
+          if (commitData.children) {
+            mutateUpdateProperty(t, afterPath, "textContent", undefined);
+            mutateUpdateProperty(t, afterPath, "children", commitData.children);
+          } else if (commitData.textContent != null) {
+            mutateUpdateProperty(t, afterPath, "children", undefined);
+            mutateUpdateProperty(t, afterPath, "textContent", commitData.textContent);
+          }
         }
-      }
-
-      s = insertNode(s, parentPath, idx + 1, structuredClone(elementDef));
-      const newPath = [...parentPath, "children", idx + 1];
-      s = selectNode(s, newPath);
-      update(s);
+        mutateInsertNode(t, parentPath, idx + 1, structuredClone(elementDef));
+        t.session.selection = newPath;
+      });
 
       // If the inserted element is editable, enter editing
       requestAnimationFrame(() => {

package/src/editor/context-menu.js

@@ -1,26 +1,32 @@
 // ─── 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 */
+/** @param {StudioState} S */
 export function copyNode(S) {
   if (!S.selection) return;
   const node = getNodeAtPath(S.document, S.selection);
@@ -29,32 +35,32 @@ export function copyNode(S) {
   statusMessage("Copied");
 }
 
-/** @param {any} S */
+/** @param {StudioState} S */
 export function cutNode(S) {
   if (!S.selection || S.selection.length < 2) return;
-  const node = getNodeAtPath(S.document, S.selection);
+  const sel = S.selection;
+  const node = getNodeAtPath(S.document, sel);
   if (!node) return;
   clipboard = structuredClone(node);
-  update(removeNode(S, S.selection));
+  transactDoc(activeTab.value, (t) => mutateRemoveNode(t, sel));
   statusMessage("Cut");
 }
 
-/** @param {any} S */
+/** @param {StudioState} S */
 export function pasteNode(S) {
   if (!clipboard) return;
+  const clip = clipboard;
   const pPath = S.selection || [];
   const parent = getNodeAtPath(S.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 pp = /** @type {JxPath} */ (parentElementPath(S.selection));
     const idx = /** @type {number} */ (childIndex(S.selection));
-    update(insertNode(S, pp, idx + 1, structuredClone(clipboard)));
+    transactDoc(activeTab.value, (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(activeTab.value, (t) => mutateInsertNode(t, pPath, idx, structuredClone(clip)));
   }
   statusMessage("Pasted");
 }
@@ -77,9 +83,9 @@ export function dismissContextMenu() {
 }
 
 /**
- * @param {any} e
- * @param {any} path
- * @param {any} S
+ * @param {MouseEvent} e
+ * @param {JxPath} path
+ * @param {StudioState} S
  * @param {{ onEditComponent?: (path: string) => void }} [opts]
  */
 export function showContextMenu(e, path, S, opts = {}) {
@@ -90,7 +96,7 @@ export function showContextMenu(e, path, S, opts = {}) {
   if (!node) return;
 
   // Select the node
-  update(selectNode(S, path));
+  activeTab.value.session.selection = path;
 
   /** @type {{ label: string; action?: () => void; danger?: boolean }[]} */
   const items = [];
@@ -98,64 +104,82 @@ export function showContextMenu(e, path, S, opts = {}) {
   items.push({ label: "Copy", action: () => copyNode(S) });
   if (path.length >= 2) {
     items.push({ label: "Cut", action: () => cutNode(S) });
-    items.push({ label: "Duplicate", action: () => update(duplicateNode(S, S.selection)) });
+    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 ────────────────────────────────────────────────────────────────────
 
@@ -32,15 +34,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 +282,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();
 }