@jxsuite/studio 0.10.2 → 0.13.0

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">

package/src/panels/events-panel.js

@@ -1,6 +1,8 @@
-import { getNodeAtPath, updateProperty, update } from "../store.js";
+import { getNodeAtPath } from "../store.js";
 import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
+import { activeTab } from "../workspace/workspace.js";
+import { transactDoc, mutateUpdateProperty } from "../tabs/transact.js";
 
 export const EVENT_NAMES = [
   "onclick",
@@ -15,17 +17,17 @@ export const EVENT_NAMES = [
   "onmouseleave",
 ];
 
-/**
- * @param {any} S - Studio state
- * @param {{ isCustomElementDoc: () => boolean; renderCanvas: () => void }} helpers
- */
-export function eventsSidebarTemplate(S, helpers) {
-  const { isCustomElementDoc, renderCanvas } = helpers;
-  if (!S.selection) return html`<div class="empty-state">Select an element to edit events</div>`;
-  const node = getNodeAtPath(S.document, S.selection);
+/** @param {{ isCustomElementDoc: () => boolean }} helpers */
+export function eventsSidebarTemplate(helpers) {
+  const { isCustomElementDoc } = helpers;
+  const tab = activeTab.value;
+  const selection = tab?.session.selection;
+  const document = tab?.doc.document;
+  if (!selection) return html`<div class="empty-state">Select an element to edit events</div>`;
+  const node = getNodeAtPath(document, selection);
   if (!node) return html`<div class="empty-state">Node not found</div>`;
 
-  const defs = S.document.state || {};
+  const defs = document.state || {};
   const functionDefs = Object.entries(defs).filter(
     ([, d]) => d.$prototype === "Function" || d.$handler,
   );
@@ -87,9 +89,10 @@ export function eventsSidebarTemplate(S, helpers) {
                   @change=${(/** @type {any} */ e) => {
                     const newKey = e.target.value;
                     if (newKey && newKey !== evKey) {
-                      let s = updateProperty(S, S.selection, evKey, undefined);
-                      s = updateProperty(s, S.selection, newKey, node[evKey]);
-                      update(s);
+                      transactDoc(activeTab.value, (t) => {
+                        mutateUpdateProperty(t, selection, evKey, undefined);
+                        mutateUpdateProperty(t, selection, newKey, node[evKey]);
+                      });
                     }
                   }}
                 >
@@ -103,8 +106,8 @@ export function eventsSidebarTemplate(S, helpers) {
                   .value=${live(isInline ? "inline" : "ref")}
                   @change=${(/** @type {any} */ e) => {
                     if (e.target.value === "inline") {
-                      update(
-                        updateProperty(S, S.selection, evKey, {
+                      transactDoc(activeTab.value, (t) =>
+                        mutateUpdateProperty(t, selection, evKey, {
                           $prototype: "Function",
                           body: "",
                           parameters: [],
@@ -112,10 +115,10 @@ export function eventsSidebarTemplate(S, helpers) {
                       );
                     } else {
                       const firstFn = functionDefs[0];
-                      update(
-                        updateProperty(
-                          S,
-                          S.selection,
+                      transactDoc(activeTab.value, (t) =>
+                        mutateUpdateProperty(
+                          t,
+                          selection,
                           evKey,
                           firstFn ? { $ref: `#/state/${firstFn[0]}` } : { $ref: "" },
                         ),
@@ -129,7 +132,10 @@ export function eventsSidebarTemplate(S, helpers) {
                 <sp-action-button
                   size="xs"
                   quiet
-                  @click=${() => update(updateProperty(S, S.selection, evKey, undefined))}
+                  @click=${() =>
+                    transactDoc(activeTab.value, (t) =>
+                      mutateUpdateProperty(t, selection, evKey, undefined),
+                    )}
                 >
                   <sp-icon-delete slot="icon"></sp-icon-delete>
                 </sp-action-button>
@@ -144,8 +150,8 @@ export function eventsSidebarTemplate(S, helpers) {
                         placeholder="// handler body"
                         .value=${live(evVal.body || "")}
                         @input=${(/** @type {any} */ e) => {
-                          update(
-                            updateProperty(S, S.selection, evKey, {
+                          transactDoc(activeTab.value, (t) =>
+                            mutateUpdateProperty(t, selection, evKey, {
                               $prototype: "Function",
                               body: e.target.value,
                               parameters: evVal.parameters || [],
@@ -159,18 +165,11 @@ export function eventsSidebarTemplate(S, helpers) {
                         quiet
                         title="Open in editor"
                         @click=${() => {
-                          S = {
-                            ...S,
-                            ui: {
-                              ...S.ui,
-                              editingFunction: {
-                                type: "event",
-                                path: S.selection,
-                                eventKey: evKey,
-                              },
-                            },
+                          tab.session.ui.editingFunction = {
+                            type: "event",
+                            path: selection,
+                            eventKey: evKey,
                           };
-                          renderCanvas();
                         }}
                       >
                         <sp-icon-code slot="icon"></sp-icon-code>
@@ -184,9 +183,13 @@ export function eventsSidebarTemplate(S, helpers) {
                       .value=${live(evVal.$ref || "__none__")}
                       @change=${(/** @type {any} */ e) => {
                         if (e.target.value && e.target.value !== "__none__") {
-                          update(updateProperty(S, S.selection, evKey, { $ref: e.target.value }));
+                          transactDoc(activeTab.value, (t) =>
+                            mutateUpdateProperty(t, selection, evKey, { $ref: e.target.value }),
+                          );
                         } else {
-                          update(updateProperty(S, S.selection, evKey, undefined));
+                          transactDoc(activeTab.value, (t) =>
+                            mutateUpdateProperty(t, selection, evKey, undefined),
+                          );
                         }
                       }}
                     >
@@ -212,12 +215,14 @@ export function eventsSidebarTemplate(S, helpers) {
               }
             }
             if (functionDefs.length > 0) {
-              update(
-                updateProperty(S, S.selection, evName, { $ref: `#/state/${functionDefs[0][0]}` }),
+              transactDoc(activeTab.value, (t) =>
+                mutateUpdateProperty(t, selection, evName, {
+                  $ref: `#/state/${functionDefs[0][0]}`,
+                }),
               );
             } else {
-              update(
-                updateProperty(S, S.selection, evName, {
+              transactDoc(activeTab.value, (t) =>
+                mutateUpdateProperty(t, selection, evName, {
                   $prototype: "Function",
                   body: "",
                   parameters: [],

package/src/panels/git-panel.js

@@ -44,8 +44,11 @@ async function gitAction(action, body) {
 
 let _pollTimer = /** @type {any} */ (null);
 
-/** @param {any} S */
-export function renderGitPanel(S) {
+/**
+ * @param {any} S
+ * @param {any} ctx
+ */
+export function renderGitPanel(S, ctx) {
   const status = S.ui.gitStatus;
   const branches = S.ui.gitBranches;
   const loading = S.ui.gitLoading;
@@ -156,9 +159,48 @@ export function renderGitPanel(S) {
     const parts = file.path.split("/");
     const name = parts.pop();
     const dir = parts.join("/");
+
+    const onFileClick = async () => {
+      // Only support diff for modified/added files
+      if (file.status !== "M" && file.status !== "A") return;
+      if (!file.path.endsWith(".md") && !file.path.endsWith(".json")) return;
+
+      try {
+        const plat = getPlatform();
+        updateUi("gitLoading", true);
+        const originalContent = await plat.gitShow({ path: file.path, ref: "HEAD" });
+
+        // Determine if it's markdown or JSON
+        const isMarkdown = file.path.endsWith(".md");
+
+        // For now, we'll need to pass the original content to the canvas
+        // This requires state management which we'll add to studio.js
+        updateUi("gitDiffState", {
+          filePath: file.path,
+          originalContent,
+          isMarkdown,
+          fileStatus: file.status,
+        });
+
+        // Trigger diff mode via context
+        if (ctx?.setCanvasMode) {
+          ctx.setCanvasMode("git-diff");
+        }
+      } catch (/** @type {any} */ e) {
+        updateUi("gitError", `Failed to load diff: ${e.message}`);
+      } finally {
+        updateUi("gitLoading", false);
+      }
+    };
+
     return html`
       <div class="git-file-row">
-        <span class="git-file-info">
+        <span
+          class="git-file-info"
+          style="cursor: pointer; flex: 1;"
+          title="Click to view diff"
+          @click=${onFileClick}
+        >
           <span class="git-file-name" title=${file.path}>${name}</span>
           ${dir ? html`<span class="git-file-dir">${dir}</span>` : nothing}
         </span>

package/src/panels/layers-panel.js

@@ -6,7 +6,6 @@
 import { html, nothing } from "lit-html";
 import {
   getState,
-  update,
   flattenTree,
   getNodeAtPath,
   pathKey,
@@ -14,11 +13,10 @@ import {
   parentElementPath,
   childIndex,
   nodeLabel,
-  selectNode,
-  moveNode,
-  removeNode,
   VOID_ELEMENTS,
 } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
+import { transactDoc, mutateMoveNode, mutateRemoveNode } from "../tabs/transact.js";
 import { view } from "../view.js";
 import { isInlineElement } from "../editor/inline-edit.js";
 import { showContextMenu } from "../editor/context-menu.js";
@@ -34,7 +32,8 @@ export function renderLayersTemplate(ctx) {
   view.dndCleanups = [];
 
   const rows = flattenTree(S.document);
-  const collapsed = S._collapsed || (S._collapsed = new Set());
+  const _S = /** @type {any} */ (S);
+  const collapsed = _S._collapsed || (_S._collapsed = new Set());
 
   /** @type {any[]} */
   const layerRows = [];
@@ -142,7 +141,7 @@ export function renderLayersTemplate(ctx) {
         data-dnd-row=${isElement ? key : nothing}
         data-dnd-depth=${isElement ? depth : nothing}
         data-dnd-void=${isElement && isVoidEl ? "" : nothing}
-        @click=${() => update(selectNode(getState(), path))}
+        @click=${() => (activeTab.value.session.selection = path)}
         @contextmenu=${isElement
           ? (/** @type {any} */ e) =>
               showContextMenu(e, path, getState(), {
@@ -175,7 +174,9 @@ export function renderLayersTemplate(ctx) {
                       @click=${(/** @type {any} */ e) => {
                         e.stopPropagation();
                         /** @type {HTMLElement} */ (e.currentTarget).blur();
-                        update(moveNode(getState(), path, parentPath, idx - 1));
+                        transactDoc(activeTab.value, (t) =>
+                          mutateMoveNode(t, path, parentPath, idx - 1),
+                        );
                       }}
                     >
                       <sp-icon-arrow-up slot="icon"></sp-icon-arrow-up>
@@ -189,7 +190,9 @@ export function renderLayersTemplate(ctx) {
                       @click=${(/** @type {any} */ e) => {
                         e.stopPropagation();
                         /** @type {HTMLElement} */ (e.currentTarget).blur();
-                        update(moveNode(getState(), path, parentPath, idx + 2));
+                        transactDoc(activeTab.value, (t) =>
+                          mutateMoveNode(t, path, parentPath, idx + 2),
+                        );
                       }}
                     >
                       <sp-icon-arrow-down slot="icon"></sp-icon-arrow-down>
@@ -206,7 +209,7 @@ export function renderLayersTemplate(ctx) {
                         const prevPath = [...parentPath, idx - 1];
                         const prev = getNodeAtPath(getState().document, prevPath);
                         const len = prev?.children?.length || 0;
-                        update(moveNode(getState(), path, prevPath, len));
+                        transactDoc(activeTab.value, (t) => mutateMoveNode(t, path, prevPath, len));
                       }}
                     >
                       <sp-icon-arrow-right slot="icon"></sp-icon-arrow-right>
@@ -221,7 +224,9 @@ export function renderLayersTemplate(ctx) {
                         e.stopPropagation();
                         /** @type {HTMLElement} */ (e.currentTarget).blur();
                         const parentIdx = /** @type {number} */ (childIndex(parentPath));
-                        update(moveNode(getState(), path, grandparentPath, parentIdx + 1));
+                        transactDoc(activeTab.value, (t) =>
+                          mutateMoveNode(t, path, grandparentPath, parentIdx + 1),
+                        );
                       }}
                     >
                       <sp-icon-arrow-left slot="icon"></sp-icon-arrow-left>
@@ -234,7 +239,7 @@ export function renderLayersTemplate(ctx) {
                   title="Delete"
                   @click=${(/** @type {any} */ e) => {
                     e.stopPropagation();
-                    update(removeNode(getState(), path));
+                    transactDoc(activeTab.value, (t) => mutateRemoveNode(t, path));
                   }}
                 >
                   <sp-icon-close slot="icon"></sp-icon-close>