@jxsuite/studio 0.19.0 → 0.20.0

package/src/store.js

@@ -22,6 +22,7 @@ export {
   isAncestor,
   projectState,
   setProjectState,
+  requireProjectState,
   updateFrontmatter,
 } from "./state.js";
 
@@ -39,25 +40,10 @@ export const statusbarEl = /** @type {HTMLElement} */ (document.querySelector("#
 
 // ─── Shared containers (mutated in place by owner modules) ───────────────────
 
-/** WeakMap<HTMLElement, Array> — maps rendered DOM elements to their JSON paths */
+/** @type {WeakMap<Element, JxPath>} */
 export const elToPath = new WeakMap();
 
-/**
- * Canvas panels: Array<{ mediaName, canvas, overlay, overlayClk, viewport, dropLine, element,
- * _width }>
- *
- * @type {{
- *   mediaName: string;
- *   canvas: HTMLElement;
- *   overlay: HTMLElement;
- *   overlayClk: HTMLElement;
- *   viewport: HTMLElement;
- *   scrollContainer?: HTMLElement | null;
- *   dropLine: HTMLElement;
- *   element?: HTMLElement | null;
- *   _width?: number | null;
- * }[]}
- */
+/** @type {import("./panels/canvas-dnd.js").CanvasPanel[]} */
 export const canvasPanels = [];
 
 // ─── Shared constants ────────────────────────────────────────────────────────
@@ -130,8 +116,8 @@ export function cancelStyleDebounce(/** @type {string} */ prop) {
 /**
  * Strip all on* event handler properties from a Jx document tree (deep clone).
  *
- * @param {import("./state.js").JxNode | unknown} node
- * @returns {import("./state.js").JxNode | unknown}
+ * @param {JxMutableNode} node
+ * @returns {JxMutableNode}
  */
 export function stripEventHandlers(node) {
   if (!node || typeof node !== "object") return node;
@@ -218,18 +204,27 @@ export function renderOnly(...names) {
 export function updateSession(patch) {
   const tab = activeTab.value;
   if (tab) {
-    const p = /** @type {any} */ (patch);
-    if (p.selection !== undefined) tab.session.selection = p.selection;
-    if (p.hover !== undefined) tab.session.hover = p.hover;
+    const p = /**
+     * @type {{
+     *   selection?: unknown;
+     *   hover?: unknown;
+     *   clipboard?: unknown;
+     *   ui?: Record<string, unknown>;
+     *   canvas?: Record<string, unknown>;
+     * }}
+     */ (patch);
+    if (p.selection !== undefined)
+      tab.session.selection = /** @type {JxPath | null} */ (p.selection);
+    if (p.hover !== undefined) tab.session.hover = /** @type {JxPath | null} */ (p.hover);
     if (p.clipboard !== undefined) tab.session.clipboard = p.clipboard;
     if (p.ui) {
       for (const [k, v] of Object.entries(p.ui)) {
-        /** @type {any} */ (tab.session.ui)[k] = v;
+        /** @type {Record<string, unknown>} */ (tab.session.ui)[k] = v;
       }
     }
     if (p.canvas) {
       for (const [k, v] of Object.entries(p.canvas)) {
-        /** @type {any} */ (tab.session.canvas)[k] = v;
+        /** @type {Record<string, unknown>} */ (tab.session.canvas)[k] = v;
       }
     }
   }
@@ -244,7 +239,7 @@ export function updateSession(patch) {
 export function updateUi(field, value) {
   const tab = activeTab.value;
   if (tab) {
-    /** @type {any} */ (tab.session.ui)[field] = value;
+    /** @type {Record<string, unknown>} */ (tab.session.ui)[field] = value;
   }
 }
 
@@ -257,7 +252,7 @@ export function updateCanvas(patch) {
   const tab = activeTab.value;
   if (tab) {
     for (const [k, v] of Object.entries(patch)) {
-      /** @type {any} */ (tab.session.canvas)[k] = v;
+      /** @type {Record<string, unknown>} */ (tab.session.canvas)[k] = v;
     }
   }
 }

package/src/studio.js

@@ -15,10 +15,11 @@ import {
   render,
   projectState,
   setProjectState,
+  requireProjectState,
   updateUi,
 } from "./store.js";
 
-import { activeTab, openTab, replaceAllTabs } from "./workspace/workspace.js";
+import { activeTab, openTab, closeAllTabs } from "./workspace/workspace.js";
 import { transactDoc, mutateUpdateDef, mutateUpdateProperty } from "./tabs/transact.js";
 import { effect } from "./reactivity.js";
 
@@ -54,6 +55,7 @@ import { exportCemManifest as _exportCemManifest } from "./services/cem-export.j
 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";
@@ -87,6 +89,9 @@ 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";
 
 // ─── Globals ──────────────────────────────────────────────────────────────────
 // These mutable variables are local to studio.js for now. As sections are extracted
@@ -105,12 +110,12 @@ function setCanvasMode(mode) {
   if (tab) tab.session.ui.canvasMode = mode;
 }
 
-/** @type {any} */
+/** @type {import("./canvas/canvas-render.js").GitDiffState | null} */
 let gitDiffState = null;
 
 // ─── Component registry ───────────────────────────────────────────────────────
 
-/** @param {any} componentPath */
+/** @param {string} componentPath */
 async function navigateToComponent(componentPath) {
   try {
     const platform = getPlatform();
@@ -135,7 +140,7 @@ async function navigateToComponent(componentPath) {
     // Load the component
     tab.doc.document = parsed;
     tab.doc.dirty = false;
-    tab.doc.mode = /** @type {any} */ (null);
+    tab.doc.mode = /** @type {string} */ (/** @type {unknown} */ (null));
     tab.doc.sourceFormat = null;
     tab.documentPath = componentPath;
     tab.session.selection = null;
@@ -145,8 +150,8 @@ async function navigateToComponent(componentPath) {
 
     render();
     statusMessage(`Editing component: ${parsed.tagName || componentPath}`);
-  } catch (/** @type {any} */ e) {
-    const err = /** @type {any} */ (e);
+  } catch (/** @type {unknown} */ e) {
+    const err = /** @type {Error} */ (e);
     statusMessage(`Error: ${err.message}`);
   }
 }
@@ -158,21 +163,23 @@ async function navigateBack() {
     try {
       const platform = getPlatform();
       await platform.writeFile(tab.documentPath, serializeDocument(tab));
-    } catch (/** @type {any} */ e) {
-      const err = /** @type {any} */ (e);
+    } catch (/** @type {unknown} */ e) {
+      const err = /** @type {Error} */ (e);
       statusMessage(`Save error: ${err.message}`);
     }
   }
 
   // Pop the stack
-  const frame = /** @type {any} */ (tab.session.documentStack.pop());
+  const frame = /** @type {Record<string, unknown> | undefined} */ (
+    tab.session.documentStack.pop()
+  );
   if (!frame) return;
-  tab.doc.document = frame.document;
-  tab.doc.dirty = frame.dirty;
-  tab.doc.mode = frame.mode;
-  tab.doc.sourceFormat = frame.sourceFormat;
-  tab.documentPath = frame.documentPath;
-  tab.session.selection = frame.selection;
+  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);
   view.leftTab = "layers";
 
   render();
@@ -188,20 +195,20 @@ async function navigateToLevel(targetIndex) {
     try {
       const platform = getPlatform();
       await platform.writeFile(tab.documentPath, serializeDocument(tab));
-    } catch (/** @type {any} */ e) {
-      const err = /** @type {any} */ (e);
+    } catch (/** @type {unknown} */ e) {
+      const err = /** @type {Error} */ (e);
       statusMessage(`Save error: ${err.message}`);
     }
   }
 
-  const frame = /** @type {any} */ (stack[targetIndex]);
+  const frame = /** @type {DocumentStackEntry} */ (stack[targetIndex]);
   tab.session.documentStack = stack.slice(0, targetIndex);
-  tab.doc.document = frame.document;
-  tab.doc.dirty = frame.dirty;
-  tab.doc.mode = frame.mode;
-  tab.doc.sourceFormat = frame.sourceFormat;
-  tab.documentPath = frame.documentPath;
-  tab.session.selection = frame.selection;
+  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);
   view.leftTab = "layers";
 
   render();
@@ -210,23 +217,33 @@ async function navigateToLevel(targetIndex) {
 
 async function closeFunctionEditor() {
   const tab = activeTab.value;
-  const editing = /** @type {any} */ (tab?.session.ui.editingFunction);
-  if (!editing) return;
+  const editing =
+    /** @type {{ type: string; defName?: string; path?: JxPath; eventKey?: string } | null} */ (
+      tab?.session.ui.editingFunction
+    );
+  if (!editing || !tab) 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") {
-      transactDoc(tab, (t) => mutateUpdateDef(t, editing.defName, { body: bodyToStore }));
+      transactDoc(tab, (t) =>
+        mutateUpdateDef(t, /** @type {string} */ (editing.defName), { body: bodyToStore }),
+      );
     } else if (editing.type === "event") {
-      const node = getNodeAtPath(tab.doc.document, editing.path);
-      const current = node?.[editing.eventKey] || {};
+      const node = getNodeAtPath(tab.doc.document, /** @type {JxPath} */ (editing.path));
+      const current = node?.[/** @type {string} */ (editing.eventKey)] || {};
       transactDoc(tab, (t) =>
-        mutateUpdateProperty(t, editing.path, editing.eventKey, {
-          ...current,
-          $prototype: "Function",
-          body: bodyToStore,
-        }),
+        mutateUpdateProperty(
+          t,
+          /** @type {JxPath} */ (editing.path),
+          /** @type {string} */ (editing.eventKey),
+          {
+            .../** @type {object} */ (current),
+            $prototype: "Function",
+            body: bodyToStore,
+          },
+        ),
       );
     }
     view.functionEditor.dispose();
@@ -243,10 +260,12 @@ document.body.appendChild(datalistHost);
 litRender(
   html`
     <datalist id="tag-names">
-      ${webdata.allTags.map((/** @type {any} */ tag) => html`<option value=${tag}></option>`)}
+      ${webdata.allTags.map((/** @type {string} */ tag) => html`<option value=${tag}></option>`)}
     </datalist>
     <datalist id="css-props">
-      ${webdata.cssProps.map((/** @type {any} */ [name]) => html`<option value=${name}></option>`)}
+      ${webdata.cssProps.map(
+        (/** @type {string[]} */ [name]) => html`<option value=${name}></option>`,
+      )}
     </datalist>
   `,
   datalistHost,
@@ -263,17 +282,7 @@ if (!hasPlatform()) {
   registerPlatform(createDevServerPlatform());
 }
 
-const EMPTY_DOC = {
-  tagName: "div",
-  style: { padding: "2rem", fontFamily: "system-ui, sans-serif" },
-  children: [
-    { tagName: "h1", textContent: "New Component" },
-    { tagName: "p", textContent: "Open a Jx file or start editing." },
-  ],
-};
-
-// Create the initial reactive tab — the canonical state container.
-openTab({ id: "initial", document: structuredClone(EMPTY_DOC) });
+mountResizeEdges();
 
 // ─── Render loop ──────────────────────────────────────────────────────────────
 
@@ -338,25 +347,38 @@ initCanvasRender({
   get gitDiffState() {
     return gitDiffState;
   },
-  setGitDiffState: (/** @type {any} */ state) => {
+  setGitDiffState: (
+    /** @type {import("./canvas/canvas-render.js").GitDiffState | null} */ state,
+  ) => {
     gitDiffState = state;
   },
 });
 
+initWelcome({
+  openProject: () => openProject(),
+  openRecentProject: (/** @type {string} */ root) => openRecentProject(root),
+  openNewProject: async () => {
+    const result = await openNewProjectModal();
+    if (result) openRecentProject(result.root);
+  },
+  cloneRepository: () => cloneRepository({ openRecentProject }),
+});
+
 // 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 (tab) {
+    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(() => {
@@ -396,7 +418,10 @@ leftPanelMod.mount({
   registerElementsDnD,
   registerComponentsDnD,
   setupTreeKeyboard,
-  setGitDiffState: (/** @type {any} */ state) => {
+  cloneRepository: () => cloneRepository({ openRecentProject }),
+  setGitDiffState: (
+    /** @type {import("./canvas/canvas-render.js").GitDiffState | null} */ state,
+  ) => {
     gitDiffState = state;
   },
 });
@@ -412,7 +437,7 @@ mountStatusbar();
 mountActivityBar();
 
 // Clicking on the canvas-wrap background (outside any canvas panel) deselects the current element
-canvasWrap.addEventListener("click", (/** @type {any} */ e) => {
+canvasWrap.addEventListener("click", (/** @type {MouseEvent} */ e) => {
   if (e.target !== canvasWrap && e.target !== view.panzoomWrap) return;
   if (!activeTab.value?.session.selection) return;
   activeTab.value.session.selection = null;
@@ -456,7 +481,7 @@ if (_openParam) {
             name: siteCtx.projectConfig?.name || "Project",
             projectRoot: siteCtx.sitePath,
             isSiteProject: true,
-            projectConfig: siteCtx.projectConfig,
+            projectConfig: siteCtx.projectConfig || null,
             projectDirs: [],
             dirs: new Map(),
             expanded: new Set(),
@@ -477,17 +502,17 @@ if (_openParam) {
             "styles",
           ];
           const dirEntries = await platform.listDirectory(".");
-          projectState.dirs.set(".", dirEntries);
+          requireProjectState().dirs.set(".", dirEntries);
           const foundDirs = [];
           for (const e of dirEntries) {
             if (e.type === "directory" && conventionalDirs.includes(e.name)) {
               foundDirs.push(e.name);
-              projectState.expanded.add(e.path || e.name);
+              requireProjectState().expanded.add(e.path || e.name);
               const sub = await platform.listDirectory(e.path || e.name);
-              projectState.dirs.set(e.path || e.name, sub);
+              requireProjectState().dirs.set(e.path || e.name, sub);
             }
           }
-          projectState.projectDirs = foundDirs;
+          requireProjectState().projectDirs = foundDirs;
         }
 
         // Read and open the file
@@ -520,9 +545,7 @@ if (_openParam) {
             parsedDoc = JSON.parse(content);
           }
 
-          // Open in a tab (replaces initial tab)
-          const { closeTab } = await import("./workspace/workspace.js");
-          closeTab("initial");
+          // Open in a tab
           openTab({
             id: fileRelPath,
             documentPath: fileRelPath,
@@ -535,13 +558,12 @@ if (_openParam) {
           if (fileRelPath === "project.json" && activeTab.value) {
             activeTab.value.session.ui.canvasMode = "stylebook";
           }
-          view.leftTab = "layers";
 
           render();
           statusMessage(`Opened ${_openParam}`);
         }
-      } catch (/** @type {any} */ e) {
-        statusMessage(`Error: ${e.message}`);
+      } catch (/** @type {unknown} */ e) {
+        statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
       }
     })();
   }
@@ -594,7 +616,7 @@ async function openRecentProject(/** @type {string} */ root) {
     const content = await platform.readFile("project.json");
     const config = JSON.parse(content);
 
-    replaceAllTabs({ id: "initial", document: { tagName: "div", children: [] } });
+    closeAllTabs();
 
     setProjectState({
       ...projectState,
@@ -620,29 +642,29 @@ async function openRecentProject(/** @type {string} */ root) {
       "public",
       "styles",
     ];
-    const entries = projectState.dirs.get(".") || [];
+    const entries = requireProjectState().dirs.get(".") || [];
     for (const e of entries) {
       if (e.type === "directory" && conventionalDirs.includes(e.name)) {
-        projectState.expanded.add(e.path || e.name);
+        requireProjectState().expanded.add(e.path || e.name);
         await loadDirectory(e.path || e.name);
       }
     }
 
-    addRecentProject(projectState.name, root);
+    addRecentProject(requireProjectState().name, root);
     view.leftTab = "files";
     renderActivityBar();
     renderLeftPanel();
-    statusMessage(`Opened project: ${projectState.name}`);
+    statusMessage(`Opened project: ${requireProjectState().name}`);
 
     await openHomePage();
-  } catch (/** @type {any} */ e) {
-    statusMessage(`Error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
   }
 }
 function renderFilesTemplate() {
   return _renderFilesTemplate({ openProject, openFileFromTree, renderLeftPanel });
 }
-function openFileFromTree(/** @type {any} */ path) {
+function openFileFromTree(/** @type {string} */ path) {
   return openFileInTab(path);
 }
 
@@ -676,13 +698,13 @@ initShortcuts(() => ({
 
 // ─── Autosave (registered as update middleware) ──────────────────────────────
 
-/** @type {any} */
+/** @type {number} */
 const AUTO_SAVE_DELAY = 2000;
 
 function scheduleAutosave() {
   const tab = activeTab.value;
   if (!tab?.fileHandle || !tab.doc.dirty) return;
-  clearTimeout(view.autosaveTimer);
+  if (view.autosaveTimer) clearTimeout(view.autosaveTimer);
   view.autosaveTimer = setTimeout(async () => {
     const t = activeTab.value;
     if (t?.fileHandle && t.doc.dirty && "createWritable" in t.fileHandle) {

package/src/tabs/tab.js

@@ -7,7 +7,7 @@ import { reactive, effectScope } from "../reactivity.js";
  *   zoom: number;
  *   activeMedia: string | null;
  *   activeSelector: string | null;
- *   editingFunction: object | null;
+ *   editingFunction: FunctionEditDef | null;
  *   featureToggles: Record<string, boolean>;
  *   styleSections: Record<string, boolean>;
  *   inspectorSections: Record<string, boolean>;
@@ -19,18 +19,19 @@ import { reactive, effectScope } from "../reactivity.js";
  *   stylebookFilter: string;
  *   stylebookCustomizedOnly: boolean;
  *   settingsTab: string;
- *   gitStatus: object | null;
- *   gitBranches: object | null;
+ *   gitStatus: GitStatusResult | null;
+ *   gitBranches: GitBranchesResult | null;
  *   gitCommitMessage: string;
  *   gitLoading: boolean;
  *   gitError: string | null;
- *   pendingInlineEdit: object | null;
+ *   gitDiffState: GitDiffState | null;
+ *   pendingInlineEdit: InlineEditDef | null;
  * }} TabUi
  */
 
 /**
  * @typedef {{
- *   document: Record<string, any>;
+ *   document: Record<string, unknown>;
  *   selection: (string | number)[] | null;
  * }} HistorySnapshot
  */
@@ -40,9 +41,10 @@ import { reactive, effectScope } from "../reactivity.js";
  *   id: string;
  *   documentPath: string | null;
  *   fileHandle: FileSystemFileHandle | null;
- *   scope: { stop(): void; run<T>(fn: () => T): T | undefined; [k: string]: any };
+ *   capabilities: { modes: string[] };
+ *   scope: { stop(): void; run<T>(fn: () => T): T | undefined; [k: string]: unknown };
  *   doc: {
- *     document: Record<string, any>;
+ *     document: JxMutableNode;
  *     content: { frontmatter: Record<string, unknown> };
  *     mode: string;
  *     sourceFormat: string | null;
@@ -52,14 +54,14 @@ import { reactive, effectScope } from "../reactivity.js";
  *   session: {
  *     selection: (string | number)[] | null;
  *     hover: (string | number)[] | null;
- *     clipboard: object | null;
- *     documentStack: object[];
+ *     clipboard: JxMutableNode | null;
+ *     documentStack: DocumentStackEntry[];
  *     ui: TabUi;
  *     canvas: {
  *       status: string;
- *       scope: { stop(): void; [k: string]: any } | null;
+ *       scope: { stop(): void; [k: string]: unknown } | null;
  *       error: string | null;
- *       pendingInlineEdit: object | null;
+ *       pendingInlineEdit: InlineEditDef | null;
  *     };
  *   };
  *   history: {
@@ -73,7 +75,7 @@ import { reactive, effectScope } from "../reactivity.js";
 function createDefaultUi() {
   return {
     rightTab: "properties",
-    canvasMode: "design",
+    canvasMode: "edit",
     zoom: 1,
     activeMedia: null,
     activeSelector: null,
@@ -94,10 +96,13 @@ function createDefaultUi() {
     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.
  *
@@ -105,9 +110,10 @@ function createDefaultUi() {
  *   id: string;
  *   documentPath?: string | null;
  *   fileHandle?: FileSystemFileHandle | null;
- *   document: Record<string, any>;
+ *   document: Record<string, unknown>;
  *   frontmatter?: Record<string, unknown>;
  *   sourceFormat?: string | null;
+ *   capabilities?: { modes?: string[] };
  * }} opts
  * @returns {Tab}
  */
@@ -118,46 +124,64 @@ export function createTab({
   document,
   frontmatter,
   sourceFormat = null,
+  capabilities,
 }) {
   const scope = effectScope();
 
+  const resolvedModes = capabilities?.modes ?? inferModes(documentPath, sourceFormat);
+
   const tab = /** @type {Tab} */ (
-    scope.run(() => ({
-      id,
-      documentPath,
-      fileHandle,
-      scope,
-      doc: reactive({
-        document,
-        sourceFormat,
-        content: { frontmatter: frontmatter || {} },
-        mode:
-          sourceFormat === "md"
-            ? "content"
-            : documentPath?.endsWith(".md")
+    /** @type {unknown} */ (
+      scope.run(() => ({
+        id,
+        documentPath,
+        fileHandle,
+        capabilities: { modes: resolvedModes },
+        scope,
+        doc: reactive({
+          document,
+          sourceFormat,
+          content: { frontmatter: frontmatter || {} },
+          mode:
+            sourceFormat === "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,
-      }),
-    }))
+              : 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;
 }
 
+/**
+ * @param {string | null | undefined} documentPath
+ * @param {string | null} sourceFormat
+ * @returns {string[]}
+ */
+function inferModes(documentPath, sourceFormat) {
+  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.
  *