@jxsuite/studio 0.11.0 → 0.14.0

package/src/studio.js

@@ -6,51 +6,26 @@
  */
 
 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";
-import {
-  enterComponentInlineEdit,
-  initComponentInlineEdit,
-} from "./editor/component-inline-edit.js";
+import { initComponentInlineEdit } from "./editor/component-inline-edit.js";
 import { enterInlineEdit } from "./editor/content-inline-edit.js";
-import {
-  initCanvasUtils,
-  applyTransform,
-  positionZoomIndicator,
-  updateActivePanelHeaders,
-} from "./canvas/canvas-utils.js";
+import { initCanvasUtils, applyTransform, positionZoomIndicator } from "./canvas/canvas-utils.js";
 import { initCanvasHelpers, getActivePanel, findCanvasElement } from "./canvas/canvas-helpers.js";
 import { initCanvasRender, renderCanvas } from "./canvas/canvas-render.js";
 import { initCanvasLiveRender } from "./canvas/canvas-live-render.js";
@@ -60,20 +35,14 @@ import {
   setStatusbarRenderer,
   mountStatusbar,
 } from "./panels/statusbar.js";
-import {
-  openFile as _openFile,
-  loadMarkdown as _loadMarkdown,
-  saveFile as _saveFile,
-  exportFile as _exportFile,
-} from "./files/file-ops.js";
+import { openFile, loadMarkdown, saveFile, exportFile } from "./files/file-ops.js";
 import {
   loadProject as _loadProject,
   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 +66,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";
@@ -115,13 +85,6 @@ import { initPanelEvents } from "./panels/panel-events.js";
 // These mutable variables are local to studio.js for now. As sections are extracted
 // into their own modules, they will migrate to ctx in store.js.
 
-/** @type {any} */
-let S; // current state (flat compatibility view)
-/** @type {any} */
-let doc = null; // doc slice (persisted, history, autosave)
-/** @type {any} */
-let session = null; // session slice (selection, hover, ui)
-
 /** Creates a display:contents container appended to sp-theme or body, for floating popovers/menus. */
 function createFloatingContainer() {
   const el = document.createElement("div");
@@ -130,7 +93,21 @@ function createFloatingContainer() {
   return el;
 }
 
-let canvasMode = "design";
+function getCanvasMode() {
+  return activeTab.value?.session.ui.canvasMode ?? "design";
+}
+
+/** @param {string} mode */
+function setCanvasMode(mode) {
+  if (getCanvasMode() === "git-diff" && mode !== "git-diff") {
+    gitDiffState = null;
+  }
+  const tab = activeTab.value;
+  if (tab) tab.session.ui.canvasMode = mode;
+}
+
+/** @type {any} */
+let gitDiffState = null;
 
 // ─── Component registry ───────────────────────────────────────────────────────
 
@@ -141,9 +118,30 @@ async function navigateToComponent(componentPath) {
     const content = await platform.readFile(componentPath);
     if (!content) return;
     const parsed = JSON.parse(content);
-    S = pushDocument(S, parsed, componentPath);
-    S.dirty = false;
-    ({ doc, session } = fromFlat(S));
+    const tab = activeTab.value;
+    if (!tab) return;
+
+    // Push current state onto the document stack
+    const frame = {
+      document: tab.doc.document,
+      selection: tab.session.selection,
+      documentPath: tab.documentPath,
+      dirty: tab.doc.dirty,
+      mode: tab.doc.mode,
+    };
+    if (!tab.session.documentStack) tab.session.documentStack = [];
+    tab.session.documentStack.push(frame);
+
+    // Load the component
+    tab.doc.document = parsed;
+    tab.doc.dirty = false;
+    tab.doc.mode = /** @type {any} */ (null);
+    tab.documentPath = componentPath;
+    tab.session.selection = null;
+    view.leftTab = "layers";
+    tab.session.ui.activeMedia = null;
+    tab.session.ui.activeSelector = null;
+
     render();
     statusMessage(`Editing component: ${parsed.tagName || componentPath}`);
   } catch (/** @type {any} */ e) {
@@ -153,36 +151,47 @@ async function navigateToComponent(componentPath) {
 }
 
 async function navigateBack() {
-  if (!S.documentStack || S.documentStack.length === 0) return;
-  if (S.dirty && S.documentPath) {
+  const tab = activeTab.value;
+  if (!tab?.session.documentStack || tab.session.documentStack.length === 0) return;
+  if (tab.doc.dirty && tab.documentPath) {
     try {
       const platform = getPlatform();
-      await platform.writeFile(S.documentPath, JSON.stringify(S.document, null, 2));
+      await platform.writeFile(tab.documentPath, JSON.stringify(tab.doc.document, null, 2));
     } catch (/** @type {any} */ e) {
       const err = /** @type {any} */ (e);
       statusMessage(`Save error: ${err.message}`);
     }
   }
-  S = popDocument(S);
-  ({ doc, session } = fromFlat(S));
+
+  // Pop the stack
+  const frame = /** @type {any} */ (tab.session.documentStack.pop());
+  if (!frame) return;
+  tab.doc.document = frame.document;
+  tab.doc.dirty = frame.dirty;
+  tab.doc.mode = frame.mode;
+  tab.documentPath = frame.documentPath;
+  tab.session.selection = frame.selection;
+  view.leftTab = "layers";
+
   render();
   statusMessage("Returned to parent document");
 }
 
 async function closeFunctionEditor() {
-  const editing = S.ui.editingFunction;
+  const tab = activeTab.value;
+  const editing = /** @type {any} */ (tab?.session.ui.editingFunction);
   if (!editing) return;
   if (view.functionEditor) {
     const currentCode = view.functionEditor.getValue();
     const minResult = await codeService("minify", { code: currentCode });
     const bodyToStore = minResult?.code ?? currentCode;
     if (editing.type === "def") {
-      update(updateDef(S, editing.defName, { body: bodyToStore }));
+      transactDoc(tab, (t) => mutateUpdateDef(t, editing.defName, { body: bodyToStore }));
     } else if (editing.type === "event") {
-      const node = getNodeAtPath(S.document, editing.path);
+      const node = getNodeAtPath(tab.doc.document, editing.path);
       const current = node?.[editing.eventKey] || {};
-      update(
-        updateProperty(S, editing.path, editing.eventKey, {
+      transactDoc(tab, (t) =>
+        mutateUpdateProperty(t, editing.path, editing.eventKey, {
           ...current,
           $prototype: "Function",
           body: bodyToStore,
@@ -232,8 +241,8 @@ const EMPTY_DOC = {
   ],
 };
 
-S = createState(structuredClone(EMPTY_DOC));
-({ doc, session } = fromFlat(S));
+// Create the initial reactive tab — the canonical state container.
+openTab({ id: "initial", document: structuredClone(EMPTY_DOC) });
 
 // ─── Render loop ──────────────────────────────────────────────────────────────
 
@@ -245,71 +254,95 @@ toolbarPanel.mount(toolbarEl, {
   openFile: () => openFile(),
   saveFile: () => saveFile(),
   parseMediaEntries,
-  getCanvasMode: () => canvasMode,
-  setCanvasMode: (/** @type {any} */ m) => {
-    canvasMode = m;
-  },
+  getCanvasMode,
+  setCanvasMode,
   renderCanvas: () => renderCanvas(),
   safeRenderRightPanel: () => safeRenderRightPanel(),
 });
 
+tabStrip.mount(/** @type {HTMLElement} */ (document.querySelector("#tab-strip")));
+
 overlaysPanel.mount({
-  getCanvasMode: () => canvasMode,
+  getCanvasMode,
   isEditing,
   renderBlockActionBar,
 });
 
 initBlockActionBar({
-  getCanvasMode: () => canvasMode,
+  getCanvasMode,
   navigateToComponent,
   createFloatingContainer,
 });
 
 initComponentInlineEdit({ findCanvasElement });
-initCanvasHelpers({ getCanvasMode: () => canvasMode });
+initCanvasHelpers({
+  getCanvasMode,
+  getZoom: () => activeTab.value?.session.ui.zoom ?? 1,
+});
 initCanvasUtils({
-  getCanvasMode: () => canvasMode,
-  getZoom: () => S.ui.zoom,
+  getCanvasMode,
+  getZoom: () => activeTab.value?.session.ui.zoom ?? 1,
   setZoomDirect: (zoom) => {
-    session = { ...session, ui: { ...session.ui, zoom } };
-    S = toFlat(doc, session);
+    if (activeTab.value) activeTab.value.session.ui.zoom = zoom;
   },
   renderStylebookOverlays,
 });
 initPanelEvents({
-  getState: () => S,
-  setState: (s) => {
-    S = s;
-    ({ doc, session } = fromFlat(S));
-  },
-  getCanvasMode: () => canvasMode,
+  getCanvasMode,
   enterInlineEdit,
   navigateToComponent,
 });
 initCanvasLiveRender({
-  getState: () => S,
-  getCanvasMode: () => canvasMode,
+  getCanvasMode,
 });
 initCanvasRender({
-  getCanvasMode: () => canvasMode,
-  setCanvasMode: (mode) => {
-    canvasMode = mode;
-  },
-  getState: () => S,
-  update,
+  getCanvasMode,
+  setCanvasMode,
   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.canvasMode;
+  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({
   navigateToComponent,
-  getCanvasMode: () => canvasMode,
+  getCanvasMode,
   renderCanvas: () => renderCanvas(),
   updateForcedPseudoPreview,
 });
 
 leftPanelMod.mount({
-  getCanvasMode: () => canvasMode,
+  getCanvasMode,
+  setCanvasMode,
   renderImportsTemplate,
   renderFilesTemplate,
   renderSignalsTemplate,
@@ -329,152 +362,27 @@ 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));
+setStatusbarRenderer(() => renderStatusbar());
 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));
+  if (!activeTab.value?.session.selection) return;
+  activeTab.value.session.selection = null;
 });
 
-function safeRenderLeftPanel() {
-  leftPanelMod.render();
-}
-
 function safeRenderRightPanel() {
   rightPanelMod.render();
 }
 
-// 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;
-  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);
-    }
-    safeRenderLeftPanel();
-  } else if (selChanged || leftUiChanged) {
-    safeRenderLeftPanel();
-  }
-
-  if (uiChanged && prev.ui?.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 };
-  if (patch.ui) {
-    session.ui = { ...prev.ui, ...patch.ui };
-  }
-  if (patch.canvas) {
-    session.canvas = { ...prev.canvas, ...patch.canvas };
-  }
-  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) {
-    updateActivePanelHeaders();
-  }
-
-  // Process pending inline edit when canvas becomes ready
-  if (canvasChanged && session.canvas.status === "ready" && session.ui?.pendingInlineEdit) {
-    const { path, mediaName: mn } = session.ui.pendingInlineEdit;
-    updateUi("pendingInlineEdit", null);
-    const targetPanel =
-      canvasPanels.find((/** @type {any} */ p) => p.mediaName === mn) || canvasPanels[0];
-    if (targetPanel) {
-      const el = findCanvasElement(path, targetPanel.canvas);
-      if (el) enterComponentInlineEdit(el, path);
-    }
-  }
-
-  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
-addPostRenderHook(() => updateForcedPseudoPreview());
-
-// Now that renderers and update are registered, bootstrap
+// Now that renderers are registered, bootstrap
 registerFunctionCompletions();
 
 const _openParam = new URLSearchParams(location.search).get("open");
@@ -547,17 +455,30 @@ if (_openParam) {
         const fileRelPath = _fileParam || siteCtx.fileRelPath || _openParam;
         const content = await platform.readFile(fileRelPath);
         if (content) {
-          if (fileRelPath.endsWith(".md")) {
-            await loadMarkdown(content, null);
-            S.documentPath = fileRelPath;
+          let parsedDoc, frontmatter;
+          const isMd = fileRelPath.endsWith(".md");
+          if (isMd) {
+            const result = await loadMarkdown(content);
+            parsedDoc = result.document;
+            frontmatter = result.frontmatter;
           } else {
-            const parsed = JSON.parse(content);
-            S = createState(parsed);
-            S.documentPath = fileRelPath;
+            parsedDoc = JSON.parse(content);
           }
-          S.dirty = false;
-          S.ui = { ...S.ui, leftTab: "files" };
-          ({ doc, session } = fromFlat(S));
+
+          // Open in a tab (replaces initial tab)
+          const { closeTab } = await import("./workspace/workspace.js");
+          closeTab("initial");
+          openTab({
+            id: fileRelPath,
+            documentPath: fileRelPath,
+            document: parsedDoc,
+            frontmatter,
+            sourceFormat: isMd ? "md" : null,
+          });
+
+          if (isMd && activeTab.value) activeTab.value.doc.mode = "content";
+          view.leftTab = "files";
+
           render();
           statusMessage(`Opened ${_openParam}`);
         }
@@ -597,40 +518,6 @@ function renderLeftPanel() {
 
 // ─── Source/Function editors: delegated to panels/editors.js ─────────────────
 
-// ─── Toolbar (delegated to panels/toolbar.js) ────────────────────────────────
-
-function renderToolbar() {
-  toolbarPanel.render();
-}
-
-// ─── File Operations (delegated to file-ops.js) ─────────────────────────────
-
-function fileOpsCtx() {
-  return {
-    S,
-    commit: (/** @type {any} */ ns) => {
-      S = ns;
-      ({ doc, session } = fromFlat(S));
-      render();
-    },
-    renderToolbar,
-  };
-}
-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());
-}
-function exportFile() {
-  return _exportFile(fileOpsCtx());
-}
-
 // ─── File tree (delegated to files.js) ───────────────────────────────────────
 
 function loadProject() {
@@ -638,12 +525,7 @@ function loadProject() {
 }
 function openProject() {
   return _openProject({
-    S,
-    commit: (/** @type {any} */ ns) => {
-      S = ns;
-      ({ doc, session } = fromFlat(S));
-    },
-    renderActivityBar: () => renderActivityBar(S),
+    renderActivityBar: () => renderActivityBar(),
     renderLeftPanel,
   });
 }
@@ -651,33 +533,12 @@ 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 ───────────────────────────────────────────────────────
 initShortcuts(() => ({
-  S,
-  setS: (ns) => {
-    S = ns;
-    ({ doc, session } = fromFlat(S));
-  },
-  canvasMode,
+  canvasMode: getCanvasMode(),
   panX: view.panX,
   panY: view.panY,
   setPan: (x, y) => {
@@ -709,21 +570,23 @@ initShortcuts(() => ({
 const AUTO_SAVE_DELAY = 2000;
 
 function scheduleAutosave() {
-  if (!S.fileHandle || !S.dirty) return;
+  const tab = activeTab.value;
+  if (!tab?.fileHandle || !tab.doc.dirty) return;
   clearTimeout(view.autosaveTimer);
   view.autosaveTimer = setTimeout(async () => {
-    if (S.fileHandle && S.dirty && "createWritable" in S.fileHandle) {
+    const t = activeTab.value;
+    if (t?.fileHandle && t.doc.dirty && "createWritable" in t.fileHandle) {
       try {
-        const writable = await S.fileHandle.createWritable();
-        await writable.write(JSON.stringify(S.document, null, 2));
+        const writable = await t.fileHandle.createWritable();
+        await writable.write(JSON.stringify(t.doc.document, null, 2));
         await writable.close();
-        update({ ...S, dirty: false });
+        t.doc.dirty = false;
         statusMessage("Auto-saved");
       } catch {}
     }
   }, AUTO_SAVE_DELAY);
 }
 
-addUpdateMiddleware((/** @type {any} */ state) => {
-  if (state.dirty) scheduleAutosave();
+effect(() => {
+  if (activeTab.value?.doc.dirty) scheduleAutosave();
 });