@jxsuite/studio 0.23.1 → 0.24.0

package/src/{studio.js → studio.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Studio.js — Jx Studio main application
  *
@@ -18,28 +19,28 @@ import {
   requireProjectState,
   updateUi,
   initShellRefs,
-} from "./store.js";
+} from "./store";
 
-import { activeTab, openTab, closeAllTabs } from "./workspace/workspace.js";
-import { transactDoc, mutateUpdateDef, mutateUpdateProperty } from "./tabs/transact.js";
-import { effect } from "./reactivity.js";
+import { activeTab, openTab, closeAllTabs } from "./workspace/workspace";
+import { transactDoc, mutateUpdateDef, mutateUpdateProperty } from "./tabs/transact";
+import { effect } from "./reactivity";
 
-import { view } from "./view.js";
+import { view } from "./view";
 
-import { isEditing, isEditableBlock } from "./editor/inline-edit.js";
-import { initComponentInlineEdit } from "./editor/component-inline-edit.js";
-import { enterInlineEdit } from "./editor/content-inline-edit.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";
+import { isEditing, isEditableBlock } from "./editor/inline-edit";
+import { initComponentInlineEdit } from "./editor/component-inline-edit";
+import { enterInlineEdit } from "./editor/content-inline-edit";
+import { initCanvasUtils, applyTransform, positionZoomIndicator } from "./canvas/canvas-utils";
+import { initCanvasHelpers, getActivePanel, findCanvasElement } from "./canvas/canvas-helpers";
+import { initCanvasRender, renderCanvas } from "./canvas/canvas-render";
+import { initCanvasLiveRender } from "./canvas/canvas-live-render";
 import {
   renderStatusbar,
   statusMessage,
   setStatusbarRenderer,
   mountStatusbar,
-} from "./panels/statusbar.js";
-import { loadMarkdown, saveFile, exportFile, serializeDocument } from "./files/file-ops.js";
+} from "./panels/statusbar";
+import { loadMarkdown, saveFile, exportFile, serializeDocument } from "./files/file-ops";
 import {
   loadProject as _loadProject,
   openProject as _openProject,
@@ -49,51 +50,55 @@ import {
   setupTreeKeyboard,
   registerFileTreeDnD,
   loadDirectory,
-} from "./files/files.js";
-import { renderImportsTemplate } from "./panels/imports-panel.js";
-import { renderHeadTemplate } from "./panels/head-panel.js";
-import { exportCemManifest as _exportCemManifest } from "./services/cem-export.js";
-
-import { registerPlatform, getPlatform, hasPlatform } from "./platform.js";
-import { parseMediaEntries } from "./utils/canvas-media.js";
-import { createDevServerPlatform } from "./platforms/devserver.js";
-import { mountResizeEdges } from "./resize-edges.js";
-import { codeService } from "./services/code-services.js";
-import { defCategory, defBadgeLabel, renderSignalsTemplate } from "./panels/signals-panel.js";
-import { loadComponentRegistry } from "./files/components.js";
+} from "./files/files";
+import { renderImportsTemplate } from "./panels/imports-panel";
+import { renderHeadTemplate } from "./panels/head-panel";
+import { exportCemManifest as _exportCemManifest } from "./services/cem-export";
+
+import { registerPlatform, getPlatform, hasPlatform } from "./platform";
+import { parseMediaEntries } from "./utils/canvas-media";
+import { createDevServerPlatform } from "./platforms/devserver";
+import { mountResizeEdges } from "./resize-edges";
+import { codeService } from "./services/code-services";
+import { defCategory, defBadgeLabel, renderSignalsTemplate } from "./panels/signals-panel";
+import { loadComponentRegistry } from "./files/components";
 
 import { html, render as litRender } from "lit-html";
 
 import webdata from "../data/webdata.json";
-import { renderDataExplorerTemplate } from "./panels/data-explorer.js";
-import { renderGitPanel } from "./panels/git-panel.js";
+import { renderDataExplorerTemplate } from "./panels/data-explorer";
+import { renderGitPanel } from "./panels/git-panel";
 
 // ─── Spectrum Web Components ──────────────────────────────────────────────────
 // Explicit class imports + registration — bare side-effect imports are tree-shaken
 // by Bun's bundler despite sideEffects declarations in Spectrum's package.json.
-import { components as _swc } from "./ui/spectrum.js"; // eslint-disable-line no-unused-vars
+import { components as _swc } from "./ui/spectrum";
+void _swc;
 import "./ui/panel-resize.js";
-import { initLayers } from "./ui/layers.js";
-import { initShortcuts } from "./editor/shortcuts.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";
-import { registerFunctionCompletions } from "./panels/editors.js";
-import { renderBlockActionBar, initBlockActionBar } from "./panels/block-action-bar.js";
-import { initCssData } from "./panels/style-utils.js";
-import { updateForcedPseudoPreview } from "./panels/pseudo-preview.js";
-import { initPanelEvents } from "./panels/panel-events.js";
-import { initQuickSearch } from "./panels/quick-search.js";
-import { addRecentProject } from "./recent-projects.js";
-import { initWelcome } from "./panels/welcome-screen.js";
-import { openNewProjectModal } from "./new-project/new-project-modal.js";
-import { cloneRepository } from "./panels/git-panel.js";
+import { initLayers } from "./ui/layers";
+import { initShortcuts } from "./editor/shortcuts";
+import { renderActivityBar, mount as mountActivityBar } from "./panels/activity-bar";
+import * as toolbarPanel from "./panels/toolbar";
+import * as overlaysPanel from "./panels/overlays";
+import * as rightPanelMod from "./panels/right-panel";
+import * as leftPanelMod from "./panels/left-panel";
+import * as tabStrip from "./panels/tab-strip";
+import { renderStylebookOverlays } from "./panels/stylebook-panel";
+import { registerLayersDnD, registerComponentsDnD, registerElementsDnD } from "./panels/dnd";
+import { defaultDef } from "./panels/shared";
+import { registerFunctionCompletions } from "./panels/editors";
+import { renderBlockActionBar, initBlockActionBar } from "./panels/block-action-bar";
+import { initCssData } from "./panels/style-utils";
+import { updateForcedPseudoPreview } from "./panels/pseudo-preview";
+import { initPanelEvents } from "./panels/panel-events";
+import { initQuickSearch } from "./panels/quick-search";
+import { addRecentProject } from "./recent-projects";
+import { initWelcome } from "./panels/welcome-screen";
+import { openNewProjectModal } from "./new-project/new-project-modal";
+import { cloneRepository } from "./panels/git-panel";
+import type { DocumentStackEntry, GitDiffState } from "./types";
+import type { JxPath } from "./state";
+import type { JxMutableNode } from "@jxsuite/schema/types";
 
 // ─── Globals ──────────────────────────────────────────────────────────────────
 // These mutable variables are local to studio.js for now. As sections are extracted
@@ -104,7 +109,7 @@ function getCanvasMode() {
 }
 
 /** @param {string} mode */
-function setCanvasMode(mode) {
+function setCanvasMode(mode: string) {
   if (getCanvasMode() === "git-diff" && mode !== "git-diff") {
     gitDiffState = null;
   }
@@ -112,13 +117,12 @@ function setCanvasMode(mode) {
   if (tab) tab.session.ui.canvasMode = mode;
 }
 
-/** @type {import("./canvas/canvas-render.js").GitDiffState | null} */
-let gitDiffState = null;
+let gitDiffState: GitDiffState | null = null;
 
 // ─── Component registry ───────────────────────────────────────────────────────
 
 /** @param {string} componentPath */
-async function navigateToComponent(componentPath) {
+async function navigateToComponent(componentPath: string) {
   try {
     const platform = getPlatform();
     const content = await platform.readFile(componentPath);
@@ -142,7 +146,7 @@ async function navigateToComponent(componentPath) {
     // Load the component
     tab.doc.document = parsed;
     tab.doc.dirty = false;
-    tab.doc.mode = /** @type {string} */ (/** @type {unknown} */ (null));
+    tab.doc.mode = null as unknown as string;
     tab.doc.sourceFormat = null;
     tab.documentPath = componentPath;
     tab.session.selection = null;
@@ -152,8 +156,8 @@ async function navigateToComponent(componentPath) {
 
     render();
     statusMessage(`Editing component: ${parsed.tagName || componentPath}`);
-  } catch (/** @type {unknown} */ e) {
-    const err = /** @type {Error} */ (e);
+  } catch (e) {
+    const err = e as Error;
     statusMessage(`Error: ${err.message}`);
   }
 }
@@ -165,23 +169,21 @@ async function navigateBack() {
     try {
       const platform = getPlatform();
       await platform.writeFile(tab.documentPath, serializeDocument(tab));
-    } catch (/** @type {unknown} */ e) {
-      const err = /** @type {Error} */ (e);
+    } catch (e) {
+      const err = e as Error;
       statusMessage(`Save error: ${err.message}`);
     }
   }
 
   // Pop the stack
-  const frame = /** @type {Record<string, unknown> | undefined} */ (
-    tab.session.documentStack.pop()
-  );
+  const frame = tab.session.documentStack.pop() as Record<string, unknown> | undefined;
   if (!frame) return;
-  tab.doc.document = /** @type {JxMutableNode} */ (frame.document);
-  tab.doc.dirty = /** @type {boolean} */ (frame.dirty);
-  tab.doc.mode = /** @type {string} */ (frame.mode);
-  tab.doc.sourceFormat = /** @type {string | null} */ (frame.sourceFormat);
-  tab.documentPath = /** @type {string | null} */ (frame.documentPath);
-  tab.session.selection = /** @type {JxPath | null} */ (frame.selection);
+  tab.doc.document = frame.document as JxMutableNode;
+  tab.doc.dirty = frame.dirty as boolean;
+  tab.doc.mode = frame.mode as string;
+  tab.doc.sourceFormat = frame.sourceFormat as string | null;
+  tab.documentPath = frame.documentPath as string | null;
+  tab.session.selection = frame.selection as JxPath | null;
   view.leftTab = "layers";
 
   render();
@@ -189,7 +191,7 @@ async function navigateBack() {
 }
 
 /** @param {number} targetIndex */
-async function navigateToLevel(targetIndex) {
+async function navigateToLevel(targetIndex: number) {
   const tab = activeTab.value;
   const stack = tab?.session.documentStack;
   if (!stack || targetIndex < 0 || targetIndex >= stack.length) return;
@@ -197,20 +199,20 @@ async function navigateToLevel(targetIndex) {
     try {
       const platform = getPlatform();
       await platform.writeFile(tab.documentPath, serializeDocument(tab));
-    } catch (/** @type {unknown} */ e) {
-      const err = /** @type {Error} */ (e);
+    } catch (e) {
+      const err = e as Error;
       statusMessage(`Save error: ${err.message}`);
     }
   }
 
-  const frame = /** @type {DocumentStackEntry} */ (stack[targetIndex]);
+  const frame = stack[targetIndex] as DocumentStackEntry;
   tab.session.documentStack = stack.slice(0, targetIndex);
-  tab.doc.document = /** @type {JxMutableNode} */ (frame.document);
-  tab.doc.dirty = /** @type {boolean} */ (frame.dirty);
-  tab.doc.mode = /** @type {string} */ (frame.mode);
-  tab.doc.sourceFormat = /** @type {string | null} */ (frame.sourceFormat);
-  tab.documentPath = /** @type {string | null} */ (frame.documentPath);
-  tab.session.selection = /** @type {JxPath | null} */ (frame.selection);
+  tab.doc.document = frame.document as JxMutableNode;
+  tab.doc.dirty = frame.dirty as boolean;
+  tab.doc.mode = frame.mode as string;
+  tab.doc.sourceFormat = frame.sourceFormat as string | null;
+  tab.documentPath = frame.documentPath as string | null;
+  tab.session.selection = frame.selection as JxPath | null;
   view.leftTab = "layers";
 
   render();
@@ -229,23 +231,16 @@ async function closeFunctionEditor() {
     const minResult = await codeService("minify", { code: currentCode });
     const bodyToStore = minResult?.code ?? currentCode;
     if (editing.type === "def") {
-      transactDoc(tab, (t) =>
-        mutateUpdateDef(t, /** @type {string} */ (editing.defName), { body: bodyToStore }),
-      );
+      transactDoc(tab, (t) => mutateUpdateDef(t, editing.defName as string, { body: bodyToStore }));
     } else if (editing.type === "event") {
-      const node = getNodeAtPath(tab.doc.document, /** @type {JxPath} */ (editing.path));
-      const current = node?.[/** @type {string} */ (editing.eventKey)] || {};
+      const node = getNodeAtPath(tab.doc.document, editing.path as JxPath);
+      const current = node?.[editing.eventKey as string] || {};
       transactDoc(tab, (t) =>
-        mutateUpdateProperty(
-          t,
-          /** @type {JxPath} */ (editing.path),
-          /** @type {string} */ (editing.eventKey),
-          {
-            .../** @type {object} */ (current),
-            $prototype: "Function",
-            body: bodyToStore,
-          },
-        ),
+        mutateUpdateProperty(t, editing.path as JxPath, editing.eventKey as string, {
+          .../** @type {object} */ (current),
+          $prototype: "Function",
+          body: bodyToStore,
+        }),
       );
     }
     view.functionEditor.dispose();
@@ -262,17 +257,25 @@ document.body.appendChild(datalistHost);
 litRender(
   html`
     <datalist id="tag-names">
-      ${webdata.allTags.map((/** @type {string} */ tag) => html`<option value=${tag}></option>`)}
-    </datalist>
-    <datalist id="css-props">
-      ${webdata.cssProps.map(
-        (/** @type {string[]} */ [name]) => html`<option value=${name}></option>`,
-      )}
+      ${webdata.allTags.map((tag: string) => html`<option value=${tag}></option>`)}
     </datalist>
+    <datalist id="css-props"></datalist>
   `,
   datalistHost,
 );
 
+requestIdleCallback(() => {
+  const dl = document.getElementById("css-props");
+  if (!dl) return;
+  const frag = document.createDocumentFragment();
+  for (const [name] of webdata.cssProps) {
+    const opt = document.createElement("option");
+    opt.value = name;
+    frag.appendChild(opt);
+  }
+  dl.appendChild(frag);
+});
+
 initCssData(webdata);
 
 // ─── Module-level UI state (must be before render() call) ─────────────────────
@@ -293,10 +296,10 @@ initShellRefs();
 // Mount extracted panel modules
 toolbarPanel.mount(toolbarEl, {
   navigateBack: () => navigateBack(),
-  navigateToLevel: (/** @type {number} */ i) => navigateToLevel(i),
+  navigateToLevel: (i: number) => navigateToLevel(i),
   closeFunctionEditor: () => closeFunctionEditor(),
   openProject: () => openProject(),
-  openRecentProject: (/** @type {string} */ root) => openRecentProject(root),
+  openRecentProject: (root: string) => openRecentProject(root),
   saveFile: () => saveFile(),
   parseMediaEntries,
   getCanvasMode,
@@ -308,7 +311,7 @@ toolbarPanel.mount(toolbarEl, {
 initLayers();
 initQuickSearch();
 
-tabStrip.mount(/** @type {HTMLElement} */ (document.querySelector("#tab-strip")));
+tabStrip.mount(document.querySelector("#tab-strip") as HTMLElement);
 
 overlaysPanel.mount({
   getCanvasMode,
@@ -351,16 +354,14 @@ initCanvasRender({
   get gitDiffState() {
     return gitDiffState;
   },
-  setGitDiffState: (
-    /** @type {import("./canvas/canvas-render.js").GitDiffState | null} */ state,
-  ) => {
+  setGitDiffState: (state: GitDiffState | null) => {
     gitDiffState = state;
   },
 });
 
 initWelcome({
   openProject: () => openProject(),
-  openRecentProject: (/** @type {string} */ root) => openRecentProject(root),
+  openRecentProject: (root: string) => openRecentProject(root),
   openNewProject: async () => {
     const result = await openNewProjectModal();
     if (result) openRecentProject(result.root);
@@ -426,9 +427,7 @@ leftPanelMod.mount({
   setupTreeKeyboard,
   registerFileTreeDnD,
   cloneRepository: () => cloneRepository({ openRecentProject }),
-  setGitDiffState: (
-    /** @type {import("./canvas/canvas-render.js").GitDiffState | null} */ state,
-  ) => {
+  setGitDiffState: (state: GitDiffState | null) => {
     gitDiffState = state;
   },
 });
@@ -444,7 +443,7 @@ mountStatusbar();
 mountActivityBar();
 
 // Clicking on the canvas-wrap background (outside any canvas panel) deselects the current element
-canvasWrap.addEventListener("click", (/** @type {MouseEvent} */ e) => {
+canvasWrap.addEventListener("click", (e: MouseEvent) => {
   if (e.target !== canvasWrap && e.target !== view.panzoomWrap) return;
   if (!activeTab.value?.session.selection) return;
   activeTab.value.session.selection = null;
@@ -560,7 +559,7 @@ if (_projectParam) {
             id: fileRelPath,
             documentPath: fileRelPath,
             document: parsedDoc,
-            frontmatter,
+            ...(frontmatter != null && { frontmatter }),
             sourceFormat: isMd ? "md" : null,
           });
 
@@ -572,8 +571,8 @@ if (_projectParam) {
           render();
           statusMessage(`Opened ${fileRelPath}`);
         }
-      } catch (/** @type {unknown} */ e) {
-        statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
+      } catch (e) {
+        statusMessage(`Error: ${(e as Error).message}`);
       }
     })();
   }
@@ -619,7 +618,7 @@ function openProject() {
     renderLeftPanel,
   });
 }
-async function openRecentProject(/** @type {string} */ root) {
+async function openRecentProject(root: string) {
   try {
     const platform = getPlatform();
     platform.projectRoot = root;
@@ -667,14 +666,14 @@ async function openRecentProject(/** @type {string} */ root) {
     statusMessage(`Opened project: ${requireProjectState().name}`);
 
     await openHomePage();
-  } catch (/** @type {unknown} */ e) {
-    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
+  } catch (e) {
+    statusMessage(`Error: ${(e as Error).message}`);
   }
 }
 function renderFilesTemplate() {
   return _renderFilesTemplate({ openProject, openFileFromTree, renderLeftPanel });
 }
-function openFileFromTree(/** @type {string} */ path) {
+function openFileFromTree(path: string) {
   return openFileInTab(path);
 }
 
@@ -708,8 +707,7 @@ initShortcuts(() => ({
 
 // ─── Autosave (registered as update middleware) ──────────────────────────────
 
-/** @type {number} */
-const AUTO_SAVE_DELAY = 2000;
+const AUTO_SAVE_DELAY: number = 2000;
 
 function scheduleAutosave() {
   const tab = activeTab.value;

package/src/tabs/tab.ts

@@ -0,0 +1,196 @@
+/// <reference lib="dom" />
+import { reactive, effectScope } from "../reactivity";
+import type {
+  GitDiffState,
+  InlineEditDef,
+  FunctionEditDef,
+  DocumentStackEntry,
+  GitStatusResult,
+  GitBranchesResult,
+} from "../types";
+import type { JxMutableNode } from "@jxsuite/schema/types";
+
+export interface TabUi {
+  rightTab: string;
+  canvasMode: string;
+  zoom: number;
+  activeMedia: string | null;
+  activeSelector: string | null;
+  editingFunction: FunctionEditDef | 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: GitStatusResult | null;
+  gitBranches: GitBranchesResult | null;
+  gitCommitMessage: string;
+  gitLoading: boolean;
+  gitError: string | null;
+  gitDiffState: GitDiffState | null;
+  pendingInlineEdit: InlineEditDef | null;
+}
+
+interface HistorySnapshot {
+  document: Record<string, unknown>;
+  selection: (string | number)[] | null;
+}
+
+export interface Tab {
+  id: string;
+  documentPath: string | null;
+  fileHandle: FileSystemFileHandle | null;
+  capabilities: { modes: string[] };
+  scope: { stop(): void; run<T>(fn: () => T): T | undefined; [k: string]: unknown };
+  doc: {
+    document: JxMutableNode;
+    content: { frontmatter: Record<string, unknown> };
+    mode: string;
+    sourceFormat: string | null;
+    handlersSource: string | null;
+    dirty: boolean;
+  };
+  session: {
+    selection: (string | number)[] | null;
+    hover: (string | number)[] | null;
+    clipboard: JxMutableNode | null;
+    documentStack: DocumentStackEntry[];
+    ui: TabUi;
+    canvas: {
+      status: string;
+      scope: { stop(): void; [k: string]: unknown } | null;
+      error: string | null;
+      pendingInlineEdit: InlineEditDef | null;
+    };
+  };
+  history: {
+    snapshots: HistorySnapshot[];
+    index: number;
+  };
+}
+
+/** @returns {TabUi} */
+function createDefaultUi() {
+  return {
+    rightTab: "properties",
+    canvasMode: "edit",
+    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,
+    gitDiffState: null,
+    pendingInlineEdit: null,
+  };
+}
+
+const ALL_MODES = ["edit", "design", "preview", "source", "stylebook"];
+
+/**
+ * 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, unknown>;
+ *   frontmatter?: Record<string, unknown>;
+ *   sourceFormat?: string | null;
+ *   capabilities?: { modes?: string[] };
+ * }} opts
+ * @returns {Tab}
+ */
+export function createTab({
+  id,
+  documentPath = null,
+  fileHandle = null,
+  document,
+  frontmatter,
+  sourceFormat = null,
+  capabilities,
+}: {
+  id: string;
+  documentPath?: string | null;
+  fileHandle?: FileSystemFileHandle | null;
+  document: Record<string, unknown>;
+  frontmatter?: Record<string, unknown>;
+  sourceFormat?: string | null;
+  capabilities?: { modes?: string[] };
+}) {
+  const scope = effectScope();
+
+  const resolvedModes = capabilities?.modes ?? inferModes(documentPath, sourceFormat);
+
+  const tab = scope.run(() => ({
+    id,
+    documentPath,
+    fileHandle,
+    capabilities: { modes: resolvedModes },
+    scope,
+    doc: reactive({
+      document,
+      sourceFormat,
+      content: { frontmatter: frontmatter || {} },
+      mode:
+        sourceFormat === "md" ? "content" : 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,
+    }),
+  })) as unknown as Tab;
+
+  return tab;
+}
+
+/**
+ * @param {string | null | undefined} documentPath
+ * @param {string | null} sourceFormat
+ * @returns {string[]}
+ */
+function inferModes(documentPath: string | null | undefined, sourceFormat: string | null) {
+  if (documentPath === "project.json") return ["stylebook", "source"];
+  if (sourceFormat === "md" || documentPath?.endsWith(".md"))
+    return ["edit", "design", "preview", "source"];
+  return ALL_MODES;
+}
+
+/**
+ * Dispose a tab — stops its effectScope, killing all effects created within it.
+ *
+ * @param {Tab} tab
+ */
+export function disposeTab(tab: Tab) {
+  tab.scope.stop();
+}