@jxsuite/studio 0.11.0 → 0.13.0

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>

package/src/panels/left-panel.js

@@ -7,40 +7,94 @@
  */
 
 import { html, render as litRender, nothing } from "lit-html";
-import {
-  getState,
-  leftPanel,
-  updateSession,
-  update,
-  applyMutation,
-  updateFrontmatter,
-} from "../store.js";
-import { ensureLitState } from "./shared.js";
+import { leftPanel, updateSession } from "../store.js";
+import { effect, effectScope } from "../reactivity.js";
+import { activeTab } from "../workspace/workspace.js";
+import { transact, mutateUpdateFrontmatter } from "../tabs/transact.js";
+
 import { renderLayersTemplate } from "./layers-panel.js";
 import { renderStylebookLayersTemplate } from "./stylebook-layers-panel.js";
 import { renderElementsTemplate } from "./elements-panel.js";
 import { selectStylebookTag, stylebookMeta } from "./stylebook-panel.js";
 
-/** @type {any} */
+/** @typedef {import("lit-html").TemplateResult} TemplateResult */
+
+/**
+ * @typedef {{
+ *   getCanvasMode: () => string;
+ *   setCanvasMode: (mode: string) => void;
+ *   renderImportsTemplate: (...args: any[]) => TemplateResult;
+ *   renderFilesTemplate: () => TemplateResult;
+ *   renderSignalsTemplate: (...args: any[]) => TemplateResult;
+ *   renderDataExplorerTemplate: (...args: any[]) => TemplateResult;
+ *   renderHeadTemplate: (...args: any[]) => TemplateResult;
+ *   renderGitPanel: (...args: any[]) => TemplateResult;
+ *   renderCanvas: () => void;
+ *   defCategory: (tag: string) => string;
+ *   defBadgeLabel: (tag: string) => string;
+ *   navigateToComponent: (path: string) => void;
+ *   webdata: object;
+ *   defaultDef: (tag: string) => object;
+ *   registerLayersDnD: () => void;
+ *   registerElementsDnD: () => void;
+ *   registerComponentsDnD: () => void;
+ *   setupTreeKeyboard: (tree: HTMLElement) => void;
+ * }} LeftPanelCtx
+ */
+
+/** @type {LeftPanelCtx | null} */
 let _ctx = null;
 
+/** @type {import("@vue/reactivity").EffectScope | null} */
+let _scope = null;
+
+let _rendering = false;
+let _scheduled = false;
+
 /**
  * Mount the left panel orchestrator.
  *
- * @param {any} ctx — callbacks and references that avoid circular dependencies
+ * @param {LeftPanelCtx} ctx
  */
 export function mount(ctx) {
   _ctx = ctx;
+  _scope = effectScope();
+  _scope.run(() => {
+    effect(() => {
+      const tab = activeTab.value;
+      if (!tab) return;
+      // Track properties the left panel reads
+      void tab.doc.document;
+      void tab.doc.mode;
+      void tab.session.selection;
+      void tab.session.ui.leftTab;
+      void tab.session.ui.settingsTab;
+      render();
+    });
+  });
 }
 
 export function unmount() {
+  _scope?.stop();
+  _scope = null;
   _ctx = null;
 }
 
 export function render() {
   if (!_ctx) return;
+  if (_rendering) return;
+  if (!_scheduled) {
+    _scheduled = true;
+    queueMicrotask(_flush);
+  }
+}
+
+function _flush() {
+  _scheduled = false;
+  if (!_ctx) return;
+  if (_rendering) return;
+  _rendering = true;
   try {
-    ensureLitState(leftPanel);
     _render();
   } catch (e) {
     console.error("left-panel render error:", e);
@@ -52,90 +106,101 @@ export function render() {
     } catch (e2) {
       console.error("left-panel retry failed:", e2);
     }
+  } finally {
+    _rendering = false;
   }
 }
 
 function _render() {
-  const S = getState();
+  const ctx = /** @type {LeftPanelCtx} */ (_ctx);
+  const aTab = activeTab.value;
+  if (!aTab) return;
+  const S = /** @type {any} */ ({
+    ui: aTab.session.ui,
+    document: aTab.doc.document,
+    mode: aTab.doc.mode,
+    selection: aTab.session.selection,
+  });
   const tab = S.ui.leftTab;
 
-  /** @type {any} */
+  /** @type {TemplateResult | typeof nothing} */
   let content;
   if (tab === "layers")
     content =
-      _ctx.getCanvasMode() === "settings"
+      ctx.getCanvasMode() === "settings"
         ? renderStylebookLayersTemplate({
             selectStylebookTag,
             stylebookMeta,
           })
         : renderLayersTemplate({
-            navigateToComponent: _ctx.navigateToComponent,
+            navigateToComponent: ctx.navigateToComponent,
             rerender: render,
           });
   else if (tab === "imports")
-    content = _ctx.renderImportsTemplate({
+    content = ctx.renderImportsTemplate({
       renderLeftPanel: render,
       documentPath: S.documentPath,
       documentElements: S.document.$elements || [],
-      applyMutation: (/** @type {any} */ fn) => {
-        update(applyMutation(getState(), fn));
+      applyMutation: (/** @type {(doc: object) => void} */ fn) => {
+        transact(activeTab.value, fn);
       },
     });
-  else if (tab === "files") content = _ctx.renderFilesTemplate();
+  else if (tab === "files") content = ctx.renderFilesTemplate();
   else if (tab === "blocks")
     content = renderElementsTemplate({
-      webdata: _ctx.webdata,
-      defaultDef: _ctx.defaultDef,
+      webdata: ctx.webdata,
+      defaultDef: ctx.defaultDef,
       rerender: render,
     });
   else if (tab === "state")
-    content = _ctx.renderSignalsTemplate(S, {
+    content = ctx.renderSignalsTemplate(S, {
       renderLeftPanel: render,
-      renderCanvas: _ctx.renderCanvas,
+      renderCanvas: ctx.renderCanvas,
       updateSession,
     });
   else if (tab === "data")
-    content = _ctx.renderDataExplorerTemplate(S.document.state, S.canvas?.scope ?? null, {
-      renderCanvas: _ctx.renderCanvas,
+    content = ctx.renderDataExplorerTemplate(S.document.state, S.canvas?.scope ?? null, {
+      renderCanvas: ctx.renderCanvas,
       renderLeftPanel: render,
-      defCategory: _ctx.defCategory,
-      defBadgeLabel: _ctx.defBadgeLabel,
+      defCategory: ctx.defCategory,
+      defBadgeLabel: ctx.defBadgeLabel,
     });
   else if (tab === "head") {
     const isContent = S.mode === "content";
     const fm = S.content?.frontmatter ?? {};
     const headDoc = isContent ? { ...S.document, title: fm.title, $head: fm.$head } : S.document;
-    content = _ctx.renderHeadTemplate({
+    content = ctx.renderHeadTemplate({
       document: headDoc,
       applyMutation: isContent
-        ? (/** @type {any} */ fn) => {
+        ? (/** @type {(doc: object) => void} */ fn) => {
+            const tab = activeTab.value;
+            const fm = /** @type {Record<string, any>} */ (tab.doc.content?.frontmatter ?? {});
             const tmp = { title: fm.title, $head: fm.$head ? [...fm.$head] : undefined };
             fn(tmp);
-            let s = getState();
-            if (tmp.title !== fm.title) s = updateFrontmatter(s, "title", tmp.title);
+            if (tmp.title !== fm.title)
+              mutateUpdateFrontmatter(tab, "title", /** @type {any} */ (tmp.title));
             const newHead = tmp.$head && tmp.$head.length > 0 ? tmp.$head : undefined;
-            s = updateFrontmatter(s, "$head", newHead);
-            update(s);
+            mutateUpdateFrontmatter(tab, "$head", newHead);
           }
-        : (/** @type {any} */ fn) => {
-            update(applyMutation(getState(), fn));
+        : (/** @type {(doc: object) => void} */ fn) => {
+            transact(activeTab.value, fn);
           },
       renderLeftPanel: render,
     });
-  } else if (tab === "git") content = _ctx.renderGitPanel(S);
+  } else if (tab === "git") content = ctx.renderGitPanel(S, ctx);
   else content = nothing;
 
-  litRender(html`<div class="panel-body">${content}</div>`, /** @type {any} */ (leftPanel));
+  litRender(html`<div class="panel-body">${content}</div>`, leftPanel);
 
   // Post-render side effects
-  if (tab === "layers" && _ctx.getCanvasMode() !== "settings") _ctx.registerLayersDnD();
+  if (tab === "layers" && ctx.getCanvasMode() !== "settings") ctx.registerLayersDnD();
   else if (tab === "imports") {
     /* no post-render DnD needed */
   } else if (tab === "blocks") {
-    _ctx.registerElementsDnD();
-    _ctx.registerComponentsDnD();
+    ctx.registerElementsDnD();
+    ctx.registerComponentsDnD();
   } else if (tab === "files") {
-    const tree = /** @type {any} */ (leftPanel)?.querySelector(".file-tree");
-    if (tree) _ctx.setupTreeKeyboard(tree);
+    const tree = /** @type {HTMLElement | null} */ (leftPanel.querySelector(".file-tree"));
+    if (tree) ctx.setupTreeKeyboard(tree);
   }
 }