@jxsuite/studio 0.11.0 → 0.14.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/canvas-dnd.js

@@ -8,14 +8,8 @@ import {
   monitorForElements,
 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 
-import {
-  getState,
-  elToPath,
-  canvasPanels,
-  getNodeAtPath,
-  VOID_ELEMENTS,
-  isAncestor,
-} from "../store.js";
+import { elToPath, canvasPanels, getNodeAtPath, VOID_ELEMENTS, isAncestor } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
 import { applyDropInstruction } from "../panels/dnd.js";
 import { effectiveZoom } from "../canvas/canvas-helpers.js";
@@ -72,12 +66,12 @@ export function registerPanelDnD(panel) {
   });
   view.canvasDndCleanups.push(monitorCleanup);
 
-  const S = getState();
+  const document = activeTab.value?.doc.document;
   for (const el of allEls) {
     const elPath = elToPath.get(el);
     if (!elPath) continue;
 
-    const node = getNodeAtPath(S.document, elPath);
+    const node = getNodeAtPath(document, elPath);
     const tag = (node?.tagName || "div").toLowerCase();
     const hasElementChildren = node?.children?.some(
       (/** @type {unknown} */ c) => c != null && typeof c === "object",

package/src/panels/dnd.js

@@ -15,17 +15,15 @@ import {
 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 
 import {
-  getState,
-  update,
   leftPanel,
-  moveNode,
-  insertNode,
-  applyMutation,
   getNodeAtPath,
   parentElementPath,
   childIndex,
   isAncestor,
+  renderOnly,
 } 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";
@@ -44,6 +42,7 @@ export function registerLayersDnD() {
           .map((/** @type {any} */ s) => (/^\d+$/.test(s) ? parseInt(s) : s));
         const rowDepth = parseInt(/** @type {string} */ (row.dataset.dndDepth)) || 0;
         const isVoid = row.hasAttribute("data-dnd-void");
+        const isExpanded = row.hasAttribute("data-dnd-expanded");
 
         const cleanup = combine(
           draggable({
@@ -61,9 +60,15 @@ export function registerLayersDnD() {
             onDragStart() {
               row.classList.add("dragging");
               view.layerDragSourceHeight = row.offsetHeight;
+              if (isExpanded) {
+                hideDescendantRows(row, container);
+              }
             },
             onDrop() {
               row.classList.remove("dragging");
+              if (isExpanded) {
+                renderOnly("leftPanel");
+              }
             },
           }),
           dropTargetForElements({
@@ -81,6 +86,7 @@ export function registerLayersDnD() {
                   element,
                   currentLevel: rowDepth,
                   indentPerLevel: 16,
+                  mode: isExpanded ? "expanded" : "standard",
                   block: isVoid ? ["make-child"] : [],
                 }),
               );
@@ -113,7 +119,21 @@ export function registerLayersDnD() {
         if (!instruction || instruction.type === "instruction-blocked") return;
         const srcData = source.data;
         const targetPath = target.data.path;
+
+        // If the source had children, persist collapse at the new location
+        const srcRow = srcData.type === "tree-node" && source.element;
+        const wasExpanded = srcRow && srcRow.hasAttribute("data-dnd-expanded");
+
         applyDropInstruction(instruction, srcData, targetPath);
+
+        if (wasExpanded) {
+          const tab = activeTab.value;
+          const newPath = tab?.session.selection;
+          if (newPath) {
+            const collapsed = view._layersCollapsed || (view._layersCollapsed = new Set());
+            collapsed.add(newPath.join("/"));
+          }
+        }
       },
     });
     view.dndCleanups.push(monitorCleanup);
@@ -144,12 +164,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,
@@ -190,6 +212,22 @@ export function registerElementsDnD() {
   });
 }
 
+/**
+ * Hide descendant rows of the dragged item so it appears collapsed during drag.
+ *
+ * @param {any} parentRow
+ * @param {any} container
+ */
+function hideDescendantRows(parentRow, container) {
+  const prefix = parentRow.dataset.path + "/";
+  const rows = container.querySelectorAll(".layers-tree .layer-row");
+  for (const r of rows) {
+    if (/** @type {any} */ (r).dataset.path?.startsWith(prefix)) {
+      /** @type {any} */ (r).style.display = "none";
+    }
+  }
+}
+
 /**
  * @param {any} rowEl
  * @param {any} data
@@ -251,7 +289,7 @@ export function clearLayerDropGap(container) {
  * @param {any} targetPath
  */
 export function applyDropInstruction(instruction, srcData, targetPath) {
-  const S = getState();
+  const document = activeTab.value?.doc.document;
   if (srcData.type === "tree-node") {
     const fromPath = srcData.path;
     const targetParent = /** @type {any} */ (parentElementPath(targetPath));
@@ -259,15 +297,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 target = getNodeAtPath(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 +317,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 target = getNodeAtPath(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;
       }
     }
@@ -295,20 +341,18 @@ export function applyDropInstruction(instruction, srcData, targetPath) {
     if (tag && tag.includes("-")) {
       const comp = componentRegistry.find((/** @type {any} */ c) => c.tagName === tag);
       if (comp) {
-        const currentS = getState();
-        const elements = currentS.document.$elements || [];
+        const tab = activeTab.value;
+        const elements = tab?.doc.document?.$elements || [];
         if (comp.source === "npm") {
           const specifier = comp.modulePath ? `${comp.package}/${comp.modulePath}` : comp.package;
           const alreadyImported = elements.some(
             (/** @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(
@@ -317,13 +361,11 @@ export function applyDropInstruction(instruction, srcData, targetPath) {
               (e.$ref === `./${comp.path}` || e.$ref.endsWith(comp.path.split("/").pop())),
           );
           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 });
-              }),
-            );
+            const relPath = computeRelativePath(tab?.documentPath, comp.path);
+            transact(activeTab.value, (/** @type {any} */ doc) => {
+              if (!doc.$elements) doc.$elements = [];
+              doc.$elements.push({ $ref: relPath });
+            });
           }
         }
       }