@jxsuite/studio 0.10.2 → 0.13.0

package/src/studio.js

@@ -7,36 +7,32 @@
 
 import {
   createState,
-  selectNode,
-  updateProperty,
-  updateDef,
   pushDocument,
   popDocument,
   getNodeAtPath,
-  pathsEqual,
   canvasWrap,
   toolbarEl,
   canvasPanels,
   registerRenderer,
   render,
-  update,
   setUpdateFn,
   setGetStateFn,
   addUpdateMiddleware,
   runUpdateMiddleware,
   addPostRenderHook,
   runPostRenderHooks,
-  notify,
   projectState,
   setProjectState,
   updateUi,
   setUpdateSessionFn,
-  setGetDocFn,
-  setGetSessionFn,
   toFlat,
   fromFlat,
 } from "./store.js";
 
+import { activeTab, openTab } from "./workspace/workspace.js";
+import { transactDoc, mutateUpdateDef, mutateUpdateProperty } from "./tabs/transact.js";
+import { effect } from "./reactivity.js";
+
 import { view } from "./view.js";
 
 import { isEditing, isEditableBlock } from "./editor/inline-edit.js";
@@ -71,9 +67,9 @@ import {
   openProject as _openProject,
   renderFilesTemplate as _renderFilesTemplate,
   openFileFromTree as _openFileFromTree,
+  openFileInTab,
   setupTreeKeyboard,
 } from "./files/files.js";
-import { eventsSidebarTemplate as _eventsSidebarTemplate } from "./panels/events-panel.js";
 import { renderImportsTemplate } from "./panels/imports-panel.js";
 import { renderHeadTemplate } from "./panels/head-panel.js";
 import { exportCemManifest as _exportCemManifest } from "./services/cem-export.js";
@@ -97,11 +93,12 @@ import { renderGitPanel } from "./panels/git-panel.js";
 import { components as _swc } from "./ui/spectrum.js"; // eslint-disable-line no-unused-vars
 import "./ui/panel-resize.js";
 import { initShortcuts } from "./editor/shortcuts.js";
-import { renderActivityBar } from "./panels/activity-bar.js";
+import { renderActivityBar, mount as mountActivityBar } from "./panels/activity-bar.js";
 import * as toolbarPanel from "./panels/toolbar.js";
 import * as overlaysPanel from "./panels/overlays.js";
 import * as rightPanelMod from "./panels/right-panel.js";
 import * as leftPanelMod from "./panels/left-panel.js";
+import * as tabStrip from "./panels/tab-strip.js";
 import { renderStylebookOverlays } from "./panels/stylebook-panel.js";
 import { registerLayersDnD, registerComponentsDnD, registerElementsDnD } from "./panels/dnd.js";
 import { defaultDef } from "./panels/shared.js";
@@ -132,6 +129,9 @@ function createFloatingContainer() {
 
 let canvasMode = "design";
 
+/** @type {any} */
+let gitDiffState = null;
+
 // ─── Component registry ───────────────────────────────────────────────────────
 
 /** @param {any} componentPath */
@@ -177,12 +177,14 @@ async function closeFunctionEditor() {
     const minResult = await codeService("minify", { code: currentCode });
     const bodyToStore = minResult?.code ?? currentCode;
     if (editing.type === "def") {
-      update(updateDef(S, editing.defName, { body: bodyToStore }));
+      transactDoc(activeTab.value, (t) =>
+        mutateUpdateDef(t, editing.defName, { body: bodyToStore }),
+      );
     } else if (editing.type === "event") {
       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: bodyToStore,
@@ -234,6 +236,12 @@ const EMPTY_DOC = {
 
 S = createState(structuredClone(EMPTY_DOC));
 ({ doc, session } = fromFlat(S));
+setGetStateFn(() => S);
+
+// Create the initial reactive tab — this is the canonical state container.
+// The flat `S` object and `_update`/`_updateSession` are kept as a compatibility layer
+// while call sites are progressively migrated to direct reactive mutations.
+openTab({ id: "initial", document: structuredClone(EMPTY_DOC) });
 
 // ─── Render loop ──────────────────────────────────────────────────────────────
 
@@ -246,13 +254,19 @@ toolbarPanel.mount(toolbarEl, {
   saveFile: () => saveFile(),
   parseMediaEntries,
   getCanvasMode: () => canvasMode,
-  setCanvasMode: (/** @type {any} */ m) => {
+  setCanvasMode: (/** @type {string} */ m) => {
+    // Clear gitDiffState when exiting diff mode via toolbar
+    if (canvasMode === "git-diff" && m !== "git-diff") {
+      gitDiffState = null;
+    }
     canvasMode = m;
   },
   renderCanvas: () => renderCanvas(),
   safeRenderRightPanel: () => safeRenderRightPanel(),
 });
 
+tabStrip.mount(/** @type {HTMLElement} */ (document.querySelector("#tab-strip")));
+
 overlaysPanel.mount({
   getCanvasMode: () => canvasMode,
   isEditing,
@@ -266,13 +280,14 @@ initBlockActionBar({
 });
 
 initComponentInlineEdit({ findCanvasElement });
-initCanvasHelpers({ getCanvasMode: () => canvasMode });
+initCanvasHelpers({ getCanvasMode: () => canvasMode, getZoom: () => S.ui.zoom });
 initCanvasUtils({
   getCanvasMode: () => canvasMode,
   getZoom: () => S.ui.zoom,
   setZoomDirect: (zoom) => {
     session = { ...session, ui: { ...session.ui, zoom } };
     S = toFlat(doc, session);
+    if (activeTab.value) activeTab.value.session.ui.zoom = zoom;
   },
   renderStylebookOverlays,
 });
@@ -287,18 +302,49 @@ initPanelEvents({
   navigateToComponent,
 });
 initCanvasLiveRender({
-  getState: () => S,
   getCanvasMode: () => canvasMode,
 });
 initCanvasRender({
   getCanvasMode: () => canvasMode,
-  setCanvasMode: (mode) => {
+  setCanvasMode: (/** @type {string} */ mode) => {
+    // Clear gitDiffState when exiting diff mode
+    if (canvasMode === "git-diff" && mode !== "git-diff") {
+      gitDiffState = null;
+    }
     canvasMode = mode;
   },
-  getState: () => S,
-  update,
   openFileFromTree,
   exportFile,
+  gitDiffState,
+  setGitDiffState: (/** @type {any} */ state) => {
+    gitDiffState = state;
+  },
+});
+
+// Effect-driven canvas rendering: auto-triggers renderCanvas when reactive deps change
+let _canvasRenderScheduled = false;
+effect(() => {
+  const tab = activeTab.value;
+  if (!tab) return;
+  void tab.doc.document;
+  void tab.doc.mode;
+  void tab.session.ui.editingFunction;
+  void tab.session.ui.featureToggles;
+  void tab.session.ui.settingsTab;
+  void tab.session.ui.stylebookTab;
+  void tab.session.ui.stylebookFilter;
+  void tab.session.ui.stylebookCustomizedOnly;
+  if (!_canvasRenderScheduled) {
+    _canvasRenderScheduled = true;
+    queueMicrotask(() => {
+      _canvasRenderScheduled = false;
+      try {
+        renderCanvas();
+      } catch (e) {
+        console.error("renderCanvas error:", e);
+      }
+    });
+  }
 });
 
 rightPanelMod.mount({
@@ -310,6 +356,9 @@ rightPanelMod.mount({
 
 leftPanelMod.mount({
   getCanvasMode: () => canvasMode,
+  setCanvasMode: (/** @type {string} */ mode) => {
+    canvasMode = mode;
+  },
   renderImportsTemplate,
   renderFilesTemplate,
   renderSignalsTemplate,
@@ -329,27 +378,22 @@ leftPanelMod.mount({
 });
 
 // Register all renderers with the store so render()/renderOnly() work
-registerRenderer("toolbar", () => toolbarPanel.render());
-registerRenderer("activityBar", () => renderActivityBar(S));
+// Register remaining renderers for render()/renderOnly() compat during migration
 registerRenderer("leftPanel", () => leftPanelMod.render());
 registerRenderer("canvas", () => renderCanvas());
 registerRenderer("rightPanel", () => rightPanelMod.render());
 registerRenderer("overlays", () => overlaysPanel.render());
-registerRenderer("statusbar", () => renderStatusbar(S));
 setStatusbarRenderer(() => renderStatusbar(S));
 mountStatusbar();
+mountActivityBar();
 
 // Clicking on the canvas-wrap background (outside any canvas panel) deselects the current element
 canvasWrap.addEventListener("click", (/** @type {any} */ e) => {
   if (e.target !== canvasWrap && e.target !== view.panzoomWrap) return;
   if (!S.selection) return;
-  update(selectNode(S, null));
+  activeTab.value.session.selection = null;
 });
 
-function safeRenderLeftPanel() {
-  leftPanelMod.render();
-}
-
 function safeRenderRightPanel() {
   rightPanelMod.render();
 }
@@ -357,60 +401,42 @@ function safeRenderRightPanel() {
 // Register the update implementation with the store
 setGetStateFn(() => S);
 setUpdateFn(function _update(/** @type {any} */ newState) {
-  const prev = S;
   const prevDoc = S.document;
   const prevSel = S.selection;
+  const prevUi = S.ui;
   S = newState;
 
   // Keep doc/session slices in sync with flat S
   ({ doc, session } = fromFlat(S));
 
-  const docChanged = prevDoc !== S.document;
-  const selChanged = !pathsEqual(prevSel, S.selection);
-  const modeChanged = prev.mode !== S.mode;
-  const uiChanged = prev.ui !== S.ui;
-
-  const canvasUiChanged =
-    uiChanged &&
-    (prev.ui?.editingFunction !== S.ui?.editingFunction ||
-      prev.ui?.settingsTab !== S.ui?.settingsTab ||
-      prev.ui?.stylebookTab !== S.ui?.stylebookTab ||
-      prev.ui?.stylebookFilter !== S.ui?.stylebookFilter ||
-      prev.ui?.stylebookCustomizedOnly !== S.ui?.stylebookCustomizedOnly ||
-      prev.ui?.featureToggles !== S.ui?.featureToggles);
-  const leftUiChanged =
-    uiChanged && (prev.ui?.leftTab !== S.ui?.leftTab || prev.ui?.settingsTab !== S.ui?.settingsTab);
-
-  if (docChanged || modeChanged || canvasUiChanged) {
-    try {
-      renderCanvas();
-    } catch (e) {
-      console.error("renderCanvas error:", e);
+  // Sync into reactive tab so effects fire
+  const tab = activeTab.value;
+  if (tab) {
+    tab.doc.document = S.document;
+    tab.doc.dirty = S.dirty;
+    tab.doc.mode = S.mode;
+    tab.doc.handlersSource = S.handlersSource;
+    tab.doc.content.frontmatter = S.content?.frontmatter ?? {};
+    tab.session.selection = S.selection;
+    tab.session.hover = S.hover;
+    tab.session.clipboard = S.clipboard ?? null;
+    for (const [k, v] of Object.entries(S.ui || {})) {
+      /** @type {any} */ (tab.session.ui)[k] = v;
     }
-    safeRenderLeftPanel();
-  } else if (selChanged || leftUiChanged) {
-    safeRenderLeftPanel();
+    tab.session.canvas.status = S.canvas?.status ?? "idle";
+    tab.session.canvas.scope = S.canvas?.scope ?? null;
+    tab.session.canvas.error = S.canvas?.error ?? null;
   }
 
-  if (uiChanged && prev.ui?.activeMedia !== S.ui?.activeMedia) {
+  if (prevUi?.activeMedia !== S.ui?.activeMedia) {
     updateActivePanelHeaders();
   }
 
   runPostRenderHooks(prevDoc, prevSel);
   runUpdateMiddleware(S);
-
-  notify({
-    doc: docChanged,
-    selection: selChanged,
-    hover: false,
-    ui: uiChanged,
-    mode: modeChanged,
-  });
 });
 
 // Register session dispatch — lightweight path for selection/hover/ui changes
-setGetDocFn(() => doc);
-setGetSessionFn(() => session);
 setUpdateSessionFn(function _updateSession(/** @type {any} */ patch) {
   const prev = session;
   session = { ...session, ...patch };
@@ -422,38 +448,12 @@ setUpdateSessionFn(function _updateSession(/** @type {any} */ patch) {
   }
   S = toFlat(doc, session);
 
-  const selChanged = !pathsEqual(prev.selection, session.selection);
-  const uiChanged = prev.ui !== session.ui;
-  const canvasChanged = prev.canvas !== session.canvas;
-
-  const canvasUiChanged =
-    uiChanged &&
-    (prev.ui?.editingFunction !== session.ui?.editingFunction ||
-      prev.ui?.settingsTab !== session.ui?.settingsTab ||
-      prev.ui?.stylebookTab !== session.ui?.stylebookTab ||
-      prev.ui?.stylebookFilter !== session.ui?.stylebookFilter ||
-      prev.ui?.stylebookCustomizedOnly !== session.ui?.stylebookCustomizedOnly ||
-      prev.ui?.featureToggles !== session.ui?.featureToggles);
-  const leftUiChanged =
-    uiChanged &&
-    (prev.ui?.leftTab !== session.ui?.leftTab || prev.ui?.settingsTab !== session.ui?.settingsTab);
-
-  if (canvasUiChanged) {
-    try {
-      renderCanvas();
-    } catch (e) {
-      console.error("renderCanvas error:", e);
-    }
-    safeRenderLeftPanel();
-  } else if (selChanged || leftUiChanged || canvasChanged) {
-    safeRenderLeftPanel();
-  }
-
-  if (uiChanged && prev.ui?.activeMedia !== session.ui?.activeMedia) {
+  if (prev.ui?.activeMedia !== session.ui?.activeMedia) {
     updateActivePanelHeaders();
   }
 
   // Process pending inline edit when canvas becomes ready
+  const canvasChanged = prev.canvas !== session.canvas;
   if (canvasChanged && session.canvas.status === "ready" && session.ui?.pendingInlineEdit) {
     const { path, mediaName: mn } = session.ui.pendingInlineEdit;
     updateUi("pendingInlineEdit", null);
@@ -466,9 +466,6 @@ setUpdateSessionFn(function _updateSession(/** @type {any} */ patch) {
   }
 
   runPostRenderHooks(doc.document, prev.selection);
-
-  const hoverChanged = prev.hover !== session.hover;
-  notify({ doc: false, selection: selChanged, hover: hoverChanged, ui: uiChanged, mode: false });
 });
 
 // Register post-render hook for pseudo-state preview
@@ -547,17 +544,32 @@ if (_openParam) {
         const fileRelPath = _fileParam || siteCtx.fileRelPath || _openParam;
         const content = await platform.readFile(fileRelPath);
         if (content) {
+          let parsedDoc;
           if (fileRelPath.endsWith(".md")) {
-            await loadMarkdown(content, null);
+            const ns = await _loadMarkdown(content, null);
+            S = ns;
             S.documentPath = fileRelPath;
+            parsedDoc = S.document;
           } else {
-            const parsed = JSON.parse(content);
-            S = createState(parsed);
+            parsedDoc = JSON.parse(content);
+            S = createState(parsedDoc);
             S.documentPath = fileRelPath;
           }
           S.dirty = false;
           S.ui = { ...S.ui, leftTab: "files" };
           ({ doc, session } = fromFlat(S));
+
+          // Sync into reactive tab
+          const tab = activeTab.value;
+          if (tab) {
+            tab.doc.document = S.document;
+            tab.doc.mode = S.mode;
+            tab.doc.dirty = false;
+            tab.doc.content = S.content || { frontmatter: {} };
+            /** @type {any} */ (tab).documentPath = fileRelPath;
+            tab.session.ui.leftTab = "files";
+          }
+
           render();
           statusMessage(`Opened ${_openParam}`);
         }
@@ -619,11 +631,6 @@ function fileOpsCtx() {
 function openFile() {
   return _openFile(fileOpsCtx());
 }
-async function loadMarkdown(/** @type {any} */ source, /** @type {any} */ fileHandle) {
-  const ns = await _loadMarkdown(source, fileHandle);
-  S = ns;
-  ({ doc, session } = fromFlat(S));
-}
 function saveFile() {
   return _saveFile(fileOpsCtx());
 }
@@ -643,7 +650,7 @@ function openProject() {
       S = ns;
       ({ doc, session } = fromFlat(S));
     },
-    renderActivityBar: () => renderActivityBar(S),
+    renderActivityBar: () => renderActivityBar(),
     renderLeftPanel,
   });
 }
@@ -651,23 +658,7 @@ function renderFilesTemplate() {
   return _renderFilesTemplate({ openProject, openFileFromTree, renderLeftPanel });
 }
 function openFileFromTree(/** @type {any} */ path) {
-  return _openFileFromTree(
-    {
-      get S() {
-        return S;
-      },
-      set S(v) {
-        S = v;
-      },
-      commit: (/** @type {any} */ ns) => {
-        S = ns;
-        ({ doc, session } = fromFlat(S));
-      },
-      render,
-      loadMarkdown,
-    },
-    path,
-  );
+  return openFileInTab(path);
 }
 
 // ─── Keyboard shortcuts ───────────────────────────────────────────────────────
@@ -717,7 +708,7 @@ function scheduleAutosave() {
         const writable = await S.fileHandle.createWritable();
         await writable.write(JSON.stringify(S.document, null, 2));
         await writable.close();
-        update({ ...S, dirty: false });
+        activeTab.value.doc.dirty = false;
         statusMessage("Auto-saved");
       } catch {}
     }

package/src/tabs/tab.js

@@ -0,0 +1,153 @@
+import { reactive, effectScope } from "../reactivity.js";
+
+/**
+ * @typedef {{
+ *   leftTab: string;
+ *   rightTab: string;
+ *   zoom: number;
+ *   activeMedia: string | null;
+ *   activeSelector: string | null;
+ *   editingFunction: object | null;
+ *   featureToggles: Record<string, boolean>;
+ *   styleSections: Record<string, boolean>;
+ *   inspectorSections: Record<string, boolean>;
+ *   styleShorthands: Record<string, boolean>;
+ *   styleFilter: string;
+ *   styleFilterActive: boolean;
+ *   stylebookSelection: string | null;
+ *   stylebookTab: string;
+ *   stylebookFilter: string;
+ *   stylebookCustomizedOnly: boolean;
+ *   settingsTab: string;
+ *   gitStatus: object | null;
+ *   gitBranches: object | null;
+ *   gitCommitMessage: string;
+ *   gitLoading: boolean;
+ *   gitError: string | null;
+ *   pendingInlineEdit: object | null;
+ * }} TabUi
+ */
+
+/**
+ * @typedef {{
+ *   document: Record<string, any>;
+ *   selection: (string | number)[] | null;
+ * }} HistorySnapshot
+ */
+
+/**
+ * @typedef {{
+ *   id: string;
+ *   documentPath: string | null;
+ *   fileHandle: FileSystemFileHandle | null;
+ *   scope: { stop(): void; run<T>(fn: () => T): T | undefined; [k: string]: any };
+ *   doc: {
+ *     document: Record<string, any>;
+ *     content: { frontmatter: Record<string, unknown> };
+ *     mode: string;
+ *     handlersSource: string | null;
+ *     dirty: boolean;
+ *   };
+ *   session: {
+ *     selection: (string | number)[] | null;
+ *     hover: (string | number)[] | null;
+ *     clipboard: object | null;
+ *     documentStack: object[];
+ *     ui: TabUi;
+ *     canvas: {
+ *       status: string;
+ *       scope: { stop(): void; [k: string]: any } | null;
+ *       error: string | null;
+ *       pendingInlineEdit: object | null;
+ *     };
+ *   };
+ *   history: {
+ *     snapshots: HistorySnapshot[];
+ *     index: number;
+ *   };
+ * }} Tab
+ */
+
+/** @returns {TabUi} */
+function createDefaultUi() {
+  return {
+    leftTab: "layers",
+    rightTab: "properties",
+    zoom: 1,
+    activeMedia: null,
+    activeSelector: null,
+    editingFunction: null,
+    featureToggles: {},
+    styleSections: {},
+    inspectorSections: {},
+    styleShorthands: {},
+    styleFilter: "",
+    styleFilterActive: false,
+    stylebookSelection: null,
+    stylebookTab: "elements",
+    stylebookFilter: "",
+    stylebookCustomizedOnly: false,
+    settingsTab: "stylebook",
+    gitStatus: null,
+    gitBranches: null,
+    gitCommitMessage: "",
+    gitLoading: false,
+    gitError: null,
+    pendingInlineEdit: null,
+  };
+}
+
+/**
+ * Create a new tab with reactive doc/session/history trees, owned by an effectScope.
+ *
+ * @param {{
+ *   id: string;
+ *   documentPath?: string | null;
+ *   fileHandle?: FileSystemFileHandle | null;
+ *   document: Record<string, any>;
+ *   frontmatter?: Record<string, unknown>;
+ * }} opts
+ * @returns {Tab}
+ */
+export function createTab({ id, documentPath = null, fileHandle = null, document, frontmatter }) {
+  const scope = effectScope();
+
+  const tab = /** @type {Tab} */ (
+    scope.run(() => ({
+      id,
+      documentPath,
+      fileHandle,
+      scope,
+      doc: reactive({
+        document,
+        content: { frontmatter: frontmatter || {} },
+        mode: documentPath?.endsWith(".md") ? "content" : "component",
+        handlersSource: null,
+        dirty: false,
+      }),
+      session: reactive({
+        selection: null,
+        hover: null,
+        clipboard: null,
+        documentStack: [],
+        ui: createDefaultUi(),
+        canvas: { status: "idle", scope: null, error: null, pendingInlineEdit: null },
+      }),
+      history: reactive({
+        snapshots: [{ document: structuredClone(document), selection: null }],
+        index: 0,
+      }),
+    }))
+  );
+
+  return tab;
+}
+
+/**
+ * Dispose a tab — stops its effectScope, killing all effects created within it.
+ *
+ * @param {Tab} tab
+ */
+export function disposeTab(tab) {
+  tab.scope.stop();
+}