@jxsuite/studio 0.11.0 → 0.13.0

package/src/panels/block-action-bar.js

@@ -6,18 +6,9 @@
 import { html, render as litRender, nothing } from "lit-html";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 
-import {
-  getState,
-  update,
-  updateSession,
-  renderOnly,
-  selectNode,
-  moveNode,
-  getNodeAtPath,
-  nodeLabel,
-  parentElementPath,
-  childIndex,
-} from "../store.js";
+import { getNodeAtPath, nodeLabel, parentElementPath, childIndex } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
+import { transactDoc, mutateMoveNode } from "../tabs/transact.js";
 import { view } from "../view.js";
 import { isEditing, getActiveElement, getInlineActions } from "../editor/inline-edit.js";
 import { toggleInlineFormat, isTagActiveInSelection } from "../editor/inline-format.js";
@@ -25,7 +16,21 @@ import { componentRegistry } from "../files/components.js";
 import { convertToComponent } from "../editor/convert-to-component.js";
 import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers.js";
 
-/** @type {any} */
+/**
+ * @typedef {import("../state.js").StudioState} StudioState
+ *
+ * @typedef {import("../state.js").JxPath} JxPath
+ *
+ * @typedef {{ command: string; tag: string; label: string; icon: string; shortcut?: string }} InlineAction
+ */
+
+/**
+ * @type {{
+ *   getCanvasMode: () => string;
+ *   navigateToComponent: (path: string) => void;
+ *   createFloatingContainer: () => HTMLElement;
+ * } | null}
+ */
 let _ctx = null;
 
 /**
@@ -33,8 +38,8 @@ let _ctx = null;
  *
  * @param {{
  *   getCanvasMode: () => string;
- *   navigateToComponent: Function;
- *   createFloatingContainer: Function;
+ *   navigateToComponent: (path: string) => void;
+ *   createFloatingContainer: () => HTMLElement;
  * }} ctx
  */
 export function initBlockActionBar(ctx) {
@@ -45,7 +50,7 @@ export function initBlockActionBar(ctx) {
 }
 
 /** Pre-built icon templates for inline format buttons (avoids unsafeStatic) */
-const formatIconMap = /** @type {Record<string, any>} */ ({
+const formatIconMap = /** @type {Record<string, import("lit-html").TemplateResult>} */ ({
   "sp-icon-text-bold": html`<sp-icon-text-bold slot="icon"></sp-icon-text-bold>`,
   "sp-icon-text-italic": html`<sp-icon-text-italic slot="icon"></sp-icon-text-italic>`,
   "sp-icon-text-underline": html`<sp-icon-text-underline slot="icon"></sp-icon-text-underline>`,
@@ -63,11 +68,11 @@ const formatIconMap = /** @type {Record<string, any>} */ ({
 /**
  * Prevent the bar from stealing focus from contenteditable
  *
- * @param {any} e
+ * @param {MouseEvent} e
  */
 function onBarMousedown(e) {
-  if (e.target.closest("sp-textfield")) return;
-  if (e.target.closest(".bar-drag-handle")) return;
+  if (/** @type {HTMLElement} */ (e.target).closest("sp-textfield")) return;
+  if (/** @type {HTMLElement} */ (e.target).closest(".bar-drag-handle")) return;
   e.preventDefault();
 }
 
@@ -78,42 +83,48 @@ function captureSelectionRange() {
 }
 
 /**
- * @param {any} e
- * @param {any} action
+ * @param {MouseEvent} e
+ * @param {InlineAction} action
  */
 function onFormatClick(e, action) {
   e.stopPropagation();
   if (action.command === "link") {
-    showLinkPopover(e.target.closest("sp-action-button"));
+    showLinkPopover(
+      /** @type {HTMLElement} */ (
+        /** @type {HTMLElement} */ (e.target).closest("sp-action-button")
+      ),
+    );
   } else if (view.savedRange) {
-    const sel = /** @type {any} */ (window.getSelection());
+    const sel = window.getSelection();
     const anchor = view.savedRange.startContainer;
     const editableRoot = (
-      anchor?.nodeType === Node.ELEMENT_NODE ? anchor : anchor?.parentElement
+      anchor?.nodeType === Node.ELEMENT_NODE
+        ? /** @type {Element} */ (anchor)
+        : anchor?.parentElement
     )?.closest("[contenteditable]");
     if (editableRoot) {
-      editableRoot.focus();
-      sel.removeAllRanges();
-      sel.addRange(view.savedRange);
+      /** @type {HTMLElement} */ (editableRoot).focus();
+      sel?.removeAllRanges();
+      sel?.addRange(view.savedRange);
       applyInlineFormat(action);
     }
   }
 }
 
 function renderParentSelector() {
-  const S = getState();
-  const pPath = parentElementPath(S.selection);
+  const tab = activeTab.value;
+  if (!tab?.session.selection) return nothing;
+  const pPath = parentElementPath(tab.session.selection);
   if (!pPath) return nothing;
-  const parentNode = getNodeAtPath(S.document, pPath);
+  const parentNode = getNodeAtPath(tab.doc.document, pPath);
   return html`
     <sp-action-button
       size="xs"
       quiet
       title="Select parent: ${nodeLabel(parentNode)}"
-      @click=${(/** @type {any} */ e) => {
+      @click=${(/** @type {MouseEvent} */ e) => {
         e.stopPropagation();
-        const S = getState();
-        update(selectNode(S, pPath));
+        activeTab.value.session.selection = pPath;
       }}
     >
       <sp-icon-back slot="icon"></sp-icon-back>
@@ -122,10 +133,12 @@ function renderParentSelector() {
 }
 
 function renderMoveArrows() {
-  const S = getState();
-  const idx = /** @type {number} */ (childIndex(S.selection));
-  const pPath = parentElementPath(S.selection);
-  const parentNode = getNodeAtPath(S.document, /** @type {any} */ (pPath));
+  const tab = activeTab.value;
+  if (!tab?.session.selection) return nothing;
+  const sel = tab.session.selection;
+  const idx = /** @type {number} */ (childIndex(sel));
+  const pPath = parentElementPath(sel);
+  const parentNode = getNodeAtPath(tab.doc.document, /** @type {JxPath} */ (pPath));
   const siblings = parentNode?.children;
   return html`
     <sp-action-button
@@ -133,7 +146,7 @@ function renderMoveArrows() {
       quiet
       title="Move up"
       ?disabled=${idx <= 0}
-      @click=${(/** @type {any} */ e) => {
+      @click=${(/** @type {MouseEvent} */ e) => {
         e.stopPropagation();
         moveSelectionUp();
       }}
@@ -145,7 +158,7 @@ function renderMoveArrows() {
       quiet
       title="Move down"
       ?disabled=${!siblings || idx >= siblings.length - 1}
-      @click=${(/** @type {any} */ e) => {
+      @click=${(/** @type {MouseEvent} */ e) => {
         e.stopPropagation();
         moveSelectionDown();
       }}
@@ -158,10 +171,10 @@ function renderMoveArrows() {
 /**
  * Apply an inline format action.
  *
- * @param {any} action
+ * @param {InlineAction} action
  */
 function applyInlineFormat(action) {
-  /** @type {Record<string, any>} */
+  /** @type {Record<string, string>} */
   const cmdToTag = {
     bold: "strong",
     italic: "em",
@@ -190,19 +203,22 @@ export function dismissBlockActionBar() {
   if (view.blockActionBarEl) litRender(nothing, view.blockActionBarEl);
 }
 
-/** @param {any} anchorBtn */
+/** @param {HTMLElement} anchorBtn */
 function showLinkPopover(anchorBtn) {
   litRender(nothing, view.linkPopoverHost);
 
   const sel = window.getSelection();
-  /** @type {any} */
+  /** @type {HTMLAnchorElement | null} */
   let existingLink = null;
   if (sel?.rangeCount) {
-    /** @type {any} */
+    /** @type {Node | null} */
     let node = sel.anchorNode;
     while (node && node !== document.body) {
-      if (node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === "a") {
-        existingLink = node;
+      if (
+        node.nodeType === Node.ELEMENT_NODE &&
+        /** @type {Element} */ (node).tagName.toLowerCase() === "a"
+      ) {
+        existingLink = /** @type {HTMLAnchorElement} */ (node);
         break;
       }
       node = node.parentNode;
@@ -212,8 +228,10 @@ function showLinkPopover(anchorBtn) {
   const rect = anchorBtn.getBoundingClientRect();
 
   const onApply = () => {
-    const field = view.linkPopoverHost.querySelector("sp-textfield");
-    const url = /** @type {any} */ (field)?.value;
+    const field = /** @type {HTMLInputElement | null} */ (
+      view.linkPopoverHost.querySelector("sp-textfield")
+    );
+    const url = field?.value || "";
     if (existingLink) {
       existingLink.setAttribute("href", url);
     } else if (url) {
@@ -224,6 +242,7 @@ function showLinkPopover(anchorBtn) {
   };
 
   const onRemove = () => {
+    if (!existingLink?.parentNode) return;
     const frag = document.createDocumentFragment();
     while (existingLink.firstChild) frag.appendChild(existingLink.firstChild);
     existingLink.parentNode.replaceChild(frag, existingLink);
@@ -231,7 +250,7 @@ function showLinkPopover(anchorBtn) {
     renderBlockActionBar();
   };
 
-  const onKeydown = (/** @type {any} */ e) => {
+  const onKeydown = (/** @type {KeyboardEvent} */ e) => {
     if (e.key === "Enter") onApply();
     else if (e.key === "Escape") {
       litRender(nothing, view.linkPopoverHost);
@@ -273,32 +292,33 @@ function showLinkPopover(anchorBtn) {
 
 /** Move the selected node up (swap with previous sibling). */
 function moveSelectionUp() {
-  const S = getState();
-  if (!S.selection || S.selection.length < 2) return;
-  const idx = /** @type {number} */ (childIndex(S.selection));
+  const tab = activeTab.value;
+  if (!tab?.session.selection || tab.session.selection.length < 2) return;
+  const sel = tab.session.selection;
+  const idx = /** @type {number} */ (childIndex(sel));
   if (idx <= 0) return;
-  const pPath = /** @type {any} */ (parentElementPath(S.selection));
-  update(moveNode(S, S.selection, pPath, idx - 1));
-  updateSession({ selection: [...pPath, "children", idx - 1] });
-  renderOnly("overlays");
+  const pPath = /** @type {JxPath} */ (parentElementPath(sel));
+  transactDoc(tab, (t) => mutateMoveNode(t, sel, pPath, idx - 1));
+  tab.session.selection = [...pPath, "children", idx - 1];
 }
 
 /** Move the selected node down (swap with next sibling). */
 function moveSelectionDown() {
-  const S = getState();
-  if (!S.selection || S.selection.length < 2) return;
-  const idx = /** @type {number} */ (childIndex(S.selection));
-  const pPath = /** @type {any} */ (parentElementPath(S.selection));
-  const parentNode = getNodeAtPath(S.document, pPath);
+  const tab = activeTab.value;
+  if (!tab?.session.selection || tab.session.selection.length < 2) return;
+  const sel = tab.session.selection;
+  const idx = /** @type {number} */ (childIndex(sel));
+  const pPath = /** @type {JxPath} */ (parentElementPath(sel));
+  const parentNode = getNodeAtPath(tab.doc.document, pPath);
   const siblings = parentNode?.children;
   if (!siblings || idx >= siblings.length - 1) return;
-  update(moveNode(S, S.selection, pPath, idx + 2));
-  updateSession({ selection: [...pPath, "children", idx + 1] });
-  renderOnly("overlays");
+  transactDoc(tab, (t) => mutateMoveNode(t, sel, pPath, idx + 2));
+  tab.session.selection = [...pPath, "children", idx + 1];
 }
 
 /** Render the unified block action bar above the selected element. */
 export function renderBlockActionBar() {
+  if (!_ctx) return;
   if (!view.blockActionBarEl) {
     view.blockActionBarEl = _ctx.createFloatingContainer();
   }
@@ -308,21 +328,22 @@ export function renderBlockActionBar() {
     view.selDragCleanup = null;
   }
 
-  const S = getState();
+  const tab = activeTab.value;
   const canvasMode = _ctx.getCanvasMode();
 
-  if (!S.selection || (canvasMode !== "design" && canvasMode !== "edit")) {
+  if (!tab?.session.selection || (canvasMode !== "design" && canvasMode !== "edit")) {
     litRender(nothing, view.blockActionBarEl);
     return;
   }
 
+  const selection = tab.session.selection;
   const activePanel = getActivePanel();
   if (!activePanel) {
     litRender(nothing, view.blockActionBarEl);
     return;
   }
-  const el = findCanvasElement(S.selection, activePanel.canvas);
-  const node = el && getNodeAtPath(S.document, S.selection);
+  const el = findCanvasElement(selection, activePanel.canvas);
+  const node = el && getNodeAtPath(tab.doc.document, selection);
   if (!el || !node) {
     litRender(nothing, view.blockActionBarEl);
     return;
@@ -347,28 +368,31 @@ export function renderBlockActionBar() {
         style="left:${elRect.left}px; top:${topPos}px"
         @mousedown=${onBarMousedown}
       >
-        ${S.selection.length >= 2 ? renderParentSelector() : nothing}
+        ${selection.length >= 2 ? renderParentSelector() : nothing}
 
         <span class="bar-tag">${node.$id || (node.tagName ?? "div")}</span>
 
-        ${S.selection.length >= 2
+        ${selection.length >= 2
           ? html`<span class="bar-drag-handle" title="Drag to reorder">⡇</span>`
           : nothing}
-        ${S.selection.length >= 2 ? renderMoveArrows() : nothing}
-        ${S.selection.length >= 2 && node.tagName
+        ${selection.length >= 2 ? renderMoveArrows() : nothing}
+        ${selection.length >= 2 && node.tagName
           ? (() => {
               const isComp =
                 node.tagName.includes("-") &&
-                componentRegistry.some((/** @type {any} */ c) => c.tagName === node.tagName);
+                componentRegistry.some(
+                  (/** @type {{ tagName: string }} */ c) => c.tagName === node.tagName,
+                );
               if (isComp) {
                 const comp = componentRegistry.find(
-                  (/** @type {any} */ c) => c.tagName === node.tagName,
+                  (/** @type {{ tagName: string; path: string }} */ c) =>
+                    c.tagName === node.tagName,
                 );
                 return html`<sp-action-button
                   size="xs"
                   quiet
                   title="Edit Component"
-                  @click=${() => _ctx.navigateToComponent(comp.path)}
+                  @click=${() => _ctx?.navigateToComponent(/** @type {string} */ (comp?.path))}
                   ><sp-icon-edit slot="icon" size="xs"></sp-icon-edit
                 ></sp-action-button>`;
               }
@@ -376,7 +400,7 @@ export function renderBlockActionBar() {
                 size="xs"
                 quiet
                 title="Convert to Component"
-                @click=${() => convertToComponent(S)}
+                @click=${() => convertToComponent()}
                 ><sp-icon-box slot="icon" size="xs"></sp-icon-box
               ></sp-action-button>`;
             })()
@@ -398,7 +422,7 @@ export function renderBlockActionBar() {
                       value=${action.tag}
                       title="${action.label}${action.shortcut ? ` (${action.shortcut})` : ""}"
                       @mousedown=${captureSelectionRange}
-                      @click=${(/** @type {any} */ e) => onFormatClick(e, action)}
+                      @click=${(/** @type {MouseEvent} */ e) => onFormatClick(e, action)}
                     >
                       ${formatIconMap[action.icon] ?? nothing}
                     </sp-action-button>
@@ -422,8 +446,8 @@ export function renderBlockActionBar() {
       bar.style.left = `${Math.max(0, window.innerWidth - barRect.width)}px`;
     }
     // Attach drag handle
-    const currentS = getState();
-    if (currentS.selection?.length >= 2) {
+    const currentTab = activeTab.value;
+    if (currentTab?.session.selection && currentTab.session.selection.length >= 2) {
       const handle = bar.querySelector(".bar-drag-handle");
       if (handle) {
         if (view.selDragCleanup) {
@@ -432,7 +456,7 @@ export function renderBlockActionBar() {
         }
         view.selDragCleanup = draggable({
           element: handle,
-          getInitialData: () => ({ type: "tree-node", path: getState().selection }),
+          getInitialData: () => ({ type: "tree-node", path: activeTab.value?.session.selection }),
         });
       }
     }

package/src/panels/dnd.js

@@ -16,16 +16,14 @@ import {
 
 import {
   getState,
-  update,
   leftPanel,
-  moveNode,
-  insertNode,
-  applyMutation,
   getNodeAtPath,
   parentElementPath,
   childIndex,
   isAncestor,
 } from "../store.js";
+import { transact, transactDoc, mutateMoveNode, mutateInsertNode } from "../tabs/transact.js";
+import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
 import { componentRegistry, computeRelativePath } from "../files/components.js";
 import { renderComponentPreview } from "./stylebook-panel.js";
@@ -144,12 +142,14 @@ export function registerComponentsDnD() {
 
         const instanceDef = {
           tagName: comp.tagName,
-          $props: Object.fromEntries(
-            comp.props.map((/** @type {any} */ p) => [
-              p.name,
-              p.default !== undefined ? p.default : "",
-            ]),
-          ),
+          $props: comp.props
+            ? Object.fromEntries(
+                comp.props.map((/** @type {any} */ p) => [
+                  p.name,
+                  p.default !== undefined ? p.default : "",
+                ]),
+              )
+            : {},
         };
         const cleanup = draggable({
           element: row,
@@ -259,15 +259,17 @@ export function applyDropInstruction(instruction, srcData, targetPath) {
 
     switch (instruction.type) {
       case "reorder-above":
-        update(moveNode(S, fromPath, targetParent, targetIdx));
+        transactDoc(activeTab.value, (t) => mutateMoveNode(t, fromPath, targetParent, targetIdx));
         break;
       case "reorder-below":
-        update(moveNode(S, fromPath, targetParent, targetIdx + 1));
+        transactDoc(activeTab.value, (t) =>
+          mutateMoveNode(t, fromPath, targetParent, targetIdx + 1),
+        );
         break;
       case "make-child": {
         const target = getNodeAtPath(S.document, targetPath);
         const len = target?.children?.length || 0;
-        update(moveNode(S, fromPath, targetPath, len));
+        transactDoc(activeTab.value, (t) => mutateMoveNode(t, fromPath, targetPath, len));
         break;
       }
     }
@@ -277,15 +279,21 @@ export function applyDropInstruction(instruction, srcData, targetPath) {
 
     switch (instruction.type) {
       case "reorder-above":
-        update(insertNode(S, targetParent, targetIdx, structuredClone(srcData.fragment)));
+        transactDoc(activeTab.value, (t) =>
+          mutateInsertNode(t, targetParent, targetIdx, structuredClone(srcData.fragment)),
+        );
         break;
       case "reorder-below":
-        update(insertNode(S, targetParent, targetIdx + 1, structuredClone(srcData.fragment)));
+        transactDoc(activeTab.value, (t) =>
+          mutateInsertNode(t, targetParent, targetIdx + 1, structuredClone(srcData.fragment)),
+        );
         break;
       case "make-child": {
         const target = getNodeAtPath(S.document, targetPath);
         const len = target?.children?.length || 0;
-        update(insertNode(S, targetPath, len, structuredClone(srcData.fragment)));
+        transactDoc(activeTab.value, (t) =>
+          mutateInsertNode(t, targetPath, len, structuredClone(srcData.fragment)),
+        );
         break;
       }
     }
@@ -303,12 +311,10 @@ export function applyDropInstruction(instruction, srcData, targetPath) {
             (/** @type {any} */ e) => e === specifier || e === comp.package,
           );
           if (!alreadyImported) {
-            update(
-              applyMutation(currentS, (/** @type {any} */ doc) => {
-                if (!doc.$elements) doc.$elements = [];
-                doc.$elements.push(specifier);
-              }),
-            );
+            transact(activeTab.value, (/** @type {any} */ doc) => {
+              if (!doc.$elements) doc.$elements = [];
+              doc.$elements.push(specifier);
+            });
           }
         } else {
           const alreadyImported = elements.some(
@@ -318,12 +324,10 @@ export function applyDropInstruction(instruction, srcData, targetPath) {
           );
           if (!alreadyImported) {
             const relPath = computeRelativePath(currentS.documentPath, comp.path);
-            update(
-              applyMutation(currentS, (/** @type {any} */ doc) => {
-                if (!doc.$elements) doc.$elements = [];
-                doc.$elements.push({ $ref: relPath });
-              }),
-            );
+            transact(activeTab.value, (/** @type {any} */ doc) => {
+              if (!doc.$elements) doc.$elements = [];
+              doc.$elements.push({ $ref: relPath });
+            });
           }
         }
       }

package/src/panels/editors.js

@@ -7,16 +7,9 @@ import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 import { html, render as litRender, nothing } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
 
-import {
-  getState,
-  update,
-  renderOnly,
-  canvasWrap,
-  canvasPanels,
-  updateDef,
-  updateProperty,
-  getNodeAtPath,
-} from "../store.js";
+import { getState, renderOnly, canvasWrap, canvasPanels, getNodeAtPath } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
+import { transactDoc, mutateUpdateDef, mutateUpdateProperty } from "../tabs/transact.js";
 import { view } from "../view.js";
 import { codeService, setLintMarkers, getFunctionArgs } from "../services/code-services.js";
 
@@ -126,15 +119,15 @@ export function renderFunctionEditor() {
 
     clearTimeout(syncDebounce);
     syncDebounce = setTimeout(() => {
-      const S = getState();
       const newBody = view.functionEditor.getValue();
       if (editing.type === "def") {
-        update(updateDef(S, editing.defName, { body: newBody }));
+        transactDoc(activeTab.value, (t) => mutateUpdateDef(t, editing.defName, { body: newBody }));
       } else if (editing.type === "event") {
+        const S = getState();
         const node = getNodeAtPath(S.document, editing.path);
         const current = node?.[editing.eventKey] || {};
-        update(
-          updateProperty(S, editing.path, editing.eventKey, {
+        transactDoc(activeTab.value, (t) =>
+          mutateUpdateProperty(t, editing.path, editing.eventKey, {
             ...current,
             $prototype: "Function",
             body: newBody,

package/src/panels/elements-panel.js

@@ -1,7 +1,9 @@
 /** Elements panel — block/component palette with categorized accordion and search filter. */
 
 import { html, nothing } from "lit-html";
-import { getState, update, getNodeAtPath, insertNode } from "../store.js";
+import { getState, getNodeAtPath } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
+import { transactDoc, mutateInsertNode } from "../tabs/transact.js";
 import { view } from "../view.js";
 import { getEffectiveElements } from "../site-context.js";
 import { componentRegistry } from "../files/components.js";
@@ -40,7 +42,9 @@ export function renderElementsTemplate(ctx) {
                   const parentPath = s.selection || [];
                   const parent = getNodeAtPath(s.document, parentPath);
                   const idx = parent?.children ? parent.children.length : 0;
-                  update(insertNode(s, parentPath, idx, structuredClone(def)));
+                  transactDoc(activeTab.value, (t) =>
+                    mutateInsertNode(t, parentPath, idx, structuredClone(def)),
+                  );
                 }}
               >
                 <div class="element-card-preview"></div>
@@ -114,7 +118,9 @@ export function renderElementsTemplate(ctx) {
                           ]),
                         ),
                       };
-                      update(insertNode(s, parentPath, idx, structuredClone(instanceDef)));
+                      transactDoc(activeTab.value, (t) =>
+                        mutateInsertNode(t, parentPath, idx, structuredClone(instanceDef)),
+                      );
                     }}
                   >
                     <div class="element-card-preview">