@jxsuite/studio 0.11.0 → 0.14.0

package/src/panels/editors.js

@@ -7,33 +7,25 @@ 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 { 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";
 
 function getFunctionBody(/** @type {any} */ editing) {
-  const S = getState();
+  const document = activeTab.value?.doc.document;
   if (editing.type === "def") {
-    return S.document.state?.[editing.defName]?.body || "";
+    return document?.state?.[editing.defName]?.body || "";
   } else if (editing.type === "event") {
-    const node = getNodeAtPath(S.document, editing.path);
+    const node = getNodeAtPath(document, editing.path);
     return node?.[editing.eventKey]?.body || "";
   }
   return "";
 }
 
 export function renderFunctionEditor() {
-  const S = getState();
-  const editing = S.ui.editingFunction;
+  const editing = activeTab.value?.session.ui.editingFunction;
 
   // If editor already exists and matches current target, just sync value
   if (view.functionEditor && view.functionEditor._editingTarget === JSON.stringify(editing)) {
@@ -83,7 +75,7 @@ export function renderFunctionEditor() {
   );
 
   const body = getFunctionBody(editing);
-  const args = getFunctionArgs(editing, S);
+  const args = getFunctionArgs(editing, activeTab.value?.doc.document);
 
   view.functionEditor = monaco.editor.create(/** @type {any} */ (editorContainer), {
     value: body,
@@ -126,15 +118,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 }));
-      } else if (editing.type === "event") {
-        const node = getNodeAtPath(S.document, editing.path);
-        const current = node?.[editing.eventKey] || {};
-        update(
-          updateProperty(S, editing.path, editing.eventKey, {
+      const ed = /** @type {any} */ (editing);
+      if (ed.type === "def") {
+        transactDoc(activeTab.value, (t) => mutateUpdateDef(t, ed.defName, { body: newBody }));
+      } else if (ed.type === "event") {
+        const node = getNodeAtPath(activeTab.value?.doc.document, ed.path);
+        const current = node?.[ed.eventKey] || {};
+        transactDoc(activeTab.value, (t) =>
+          mutateUpdateProperty(t, ed.path, ed.eventKey, {
             ...current,
             $prototype: "Function",
             body: newBody,
@@ -164,8 +156,7 @@ export function registerFunctionCompletions() {
   monaco.languages.registerCompletionItemProvider("javascript", {
     triggerCharacters: ["."],
     provideCompletionItems(model, position) {
-      const S = getState();
-      const defs = S?.document?.state || {};
+      const defs = activeTab.value?.doc.document?.state || {};
       const word = model.getWordUntilPosition(position);
       const range = {
         startLineNumber: position.lineNumber,

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 { 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";
@@ -11,7 +13,7 @@ import { componentRegistry } from "../files/components.js";
  * @returns {import("lit-html").TemplateResult}
  */
 export function renderElementsTemplate(ctx) {
-  const S = getState();
+  const tab = activeTab.value;
 
   const categories = Object.entries(ctx.webdata.elements).map(
     (/** @type {any} */ [category, elements]) => {
@@ -36,11 +38,13 @@ export function renderElementsTemplate(ctx) {
                 class="element-card"
                 data-block-tag=${tag}
                 @click=${() => {
-                  const s = getState();
-                  const parentPath = s.selection || [];
-                  const parent = getNodeAtPath(s.document, parentPath);
+                  const t = activeTab.value;
+                  const parentPath = t?.session.selection || [];
+                  const parent = getNodeAtPath(t?.doc.document, parentPath);
                   const idx = parent?.children ? parent.children.length : 0;
-                  update(insertNode(s, parentPath, idx, structuredClone(def)));
+                  transactDoc(t, (tr) =>
+                    mutateInsertNode(tr, parentPath, idx, structuredClone(def)),
+                  );
                 }}
               >
                 <div class="element-card-preview"></div>
@@ -53,7 +57,7 @@ export function renderElementsTemplate(ctx) {
     },
   );
 
-  const effectiveEls = getEffectiveElements(S.document?.$elements);
+  const effectiveEls = getEffectiveElements(tab?.doc.document?.$elements);
   /** @type {Set<string>} */
   const enabledTags = new Set();
   for (const entry of effectiveEls) {
@@ -101,9 +105,9 @@ export function renderElementsTemplate(ctx) {
                       ? `${comp.package}: <${comp.tagName}>`
                       : comp.path}
                     @click=${() => {
-                      const s = getState();
-                      const parentPath = s.selection || [];
-                      const parent = getNodeAtPath(s.document, parentPath);
+                      const t = activeTab.value;
+                      const parentPath = t?.session.selection || [];
+                      const parent = getNodeAtPath(t?.doc.document, parentPath);
                       const idx = parent?.children ? parent.children.length : 0;
                       const instanceDef = {
                         tagName: comp.tagName,
@@ -114,7 +118,9 @@ export function renderElementsTemplate(ctx) {
                           ]),
                         ),
                       };
-                      update(insertNode(s, parentPath, idx, structuredClone(instanceDef)));
+                      transactDoc(t, (tr) =>
+                        mutateInsertNode(tr, 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

@@ -7,6 +7,7 @@ import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
 import { getPlatform } from "../platform.js";
 import { updateUi, renderOnly } from "../store.js";
+import { view } from "../view.js";
 
 async function refreshGitStatus() {
   const plat = getPlatform();
@@ -44,8 +45,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;
@@ -57,7 +61,7 @@ export function renderGitPanel(S) {
 
   if (!_pollTimer) {
     _pollTimer = setInterval(() => {
-      if (S.ui.leftTab === "git" && !S.ui.gitLoading) refreshGitStatus();
+      if (view.leftTab === "git" && !S.ui.gitLoading) refreshGitStatus();
     }, 30000);
   }
 
@@ -156,9 +160,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

@@ -5,8 +5,6 @@
 
 import { html, nothing } from "lit-html";
 import {
-  getState,
-  update,
   flattenTree,
   getNodeAtPath,
   pathKey,
@@ -14,11 +12,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";
@@ -28,13 +25,13 @@ import { showContextMenu } from "../editor/context-menu.js";
  * @returns {import("lit-html").TemplateResult}
  */
 export function renderLayersTemplate(ctx) {
-  const S = getState();
+  const tab = activeTab.value;
 
   for (const fn of view.dndCleanups) fn();
   view.dndCleanups = [];
 
-  const rows = flattenTree(S.document);
-  const collapsed = S._collapsed || (S._collapsed = new Set());
+  const rows = flattenTree(tab?.doc.document);
+  const collapsed = view._layersCollapsed || (view._layersCollapsed = new Set());
 
   /** @type {any[]} */
   const layerRows = [];
@@ -49,7 +46,7 @@ export function renderLayersTemplate(ctx) {
     }
     if (hidden) continue;
 
-    if (S.mode === "content" && path.length === 0) continue;
+    if (tab?.doc.mode === "content" && path.length === 0) continue;
 
     if (nodeType === "text") {
       const textPreview = String(node).length > 40 ? String(node).slice(0, 40) + "…" : String(node);
@@ -67,12 +64,12 @@ export function renderLayersTemplate(ctx) {
 
     if (path.length >= 2 && nodeType === "element") {
       const pPath = parentElementPath(path);
-      const parentNode = pPath ? getNodeAtPath(S.document, pPath) : null;
+      const parentNode = pPath ? getNodeAtPath(tab?.doc.document, pPath) : null;
       if (parentNode && isInlineElement(node, parentNode)) continue;
     }
 
     const key = pathKey(path);
-    const isSelected = pathsEqual(path, S.selection);
+    const isSelected = pathsEqual(path, tab?.session.selection);
     const hasChildren = Array.isArray(node.children) && node.children.length > 0;
     const hasMapChildren =
       node.children && typeof node.children === "object" && node.children.$prototype === "Array";
@@ -116,10 +113,10 @@ export function renderLayersTemplate(ctx) {
     }
 
     const isElement = nodeType === "element";
-    const isRoot = S.mode === "content" ? path.length === 0 : path.length < 2;
+    const isRoot = tab?.doc.mode === "content" ? path.length === 0 : path.length < 2;
     const idx = isElement ? /** @type {number} */ (childIndex(path)) : 0;
     const parentPath = isElement && !isRoot ? /** @type {any} */ (parentElementPath(path)) : null;
-    const parentNode = parentPath ? getNodeAtPath(S.document, parentPath) : null;
+    const parentNode = parentPath ? getNodeAtPath(tab?.doc.document, parentPath) : null;
     const siblingCount = parentNode?.children?.length || 0;
     const canMoveUp = isElement && !isRoot && idx > 0;
     const canMoveDown = isElement && !isRoot && idx < siblingCount - 1;
@@ -142,10 +139,11 @@ 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))}
+        data-dnd-expanded=${isElement && isExpandable && !collapsed.has(key) ? "" : nothing}
+        @click=${() => (activeTab.value.session.selection = path)}
         @contextmenu=${isElement
           ? (/** @type {any} */ e) =>
-              showContextMenu(e, path, getState(), {
+              showContextMenu(e, path, {
                 onEditComponent: ctx.navigateToComponent,
               })
           : nothing}
@@ -175,7 +173,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 +189,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>
@@ -204,9 +206,9 @@ export function renderLayersTemplate(ctx) {
                         e.stopPropagation();
                         /** @type {HTMLElement} */ (e.currentTarget).blur();
                         const prevPath = [...parentPath, idx - 1];
-                        const prev = getNodeAtPath(getState().document, prevPath);
+                        const prev = getNodeAtPath(activeTab.value?.doc.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 +223,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 +238,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>