@jxsuite/studio 0.19.0 → 0.21.0

package/src/studio.js

@@ -15,10 +15,12 @@ import {
   render,
   projectState,
   setProjectState,
+  requireProjectState,
   updateUi,
+  initShellRefs,
 } 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";
 
@@ -45,6 +47,7 @@ import {
   openFileInTab,
   openHomePage,
   setupTreeKeyboard,
+  registerFileTreeDnD,
   loadDirectory,
 } from "./files/files.js";
 import { renderImportsTemplate } from "./panels/imports-panel.js";
@@ -54,6 +57,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 +91,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 +112,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 +142,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 +152,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 +165,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 +197,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 +219,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 +262,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,20 +284,12 @@ 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 ──────────────────────────────────────────────────────────────
 
+initShellRefs();
+
 // Mount extracted panel modules
 toolbarPanel.mount(toolbarEl, {
   navigateBack: () => navigateBack(),
@@ -338,25 +351,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 +422,11 @@ leftPanelMod.mount({
   registerElementsDnD,
   registerComponentsDnD,
   setupTreeKeyboard,
-  setGitDiffState: (/** @type {any} */ state) => {
+  registerFileTreeDnD,
+  cloneRepository: () => cloneRepository({ openRecentProject }),
+  setGitDiffState: (
+    /** @type {import("./canvas/canvas-render.js").GitDiffState | null} */ state,
+  ) => {
     gitDiffState = state;
   },
 });
@@ -412,7 +442,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;
@@ -425,14 +455,17 @@ function safeRenderRightPanel() {
 // Now that renderers are registered, bootstrap
 registerFunctionCompletions();
 
-const _openParam = new URLSearchParams(location.search).get("open");
+const _urlParams = new URLSearchParams(location.search);
+const _projectParam = _urlParams.get("project") || _urlParams.get("open");
 
-if (_openParam) {
-  // ?open= mode: skip normal loadProject, set up site context from the path
+if (_projectParam) {
+  // ?project= mode: skip normal loadProject, set up site context from the path
   const isAbsPath =
-    _openParam.startsWith("/") || _openParam.startsWith("~") || /^[A-Za-z]:[/\\]/.test(_openParam);
+    _projectParam.startsWith("/") ||
+    _projectParam.startsWith("~") ||
+    /^[A-Za-z]:[/\\]/.test(_projectParam);
   if (!isAbsPath) {
-    statusMessage(`Error: ?open= requires an absolute path (got "${_openParam}")`);
+    statusMessage(`Error: ?project= requires an absolute path (got "${_projectParam}")`);
     render();
   } else {
     render();
@@ -440,7 +473,7 @@ if (_openParam) {
     (async () => {
       try {
         const siteCtx = platform.resolveSiteContext
-          ? await platform.resolveSiteContext(_openParam)
+          ? await platform.resolveSiteContext(_projectParam)
           : { sitePath: null };
 
         if (siteCtx.sitePath) {
@@ -456,7 +489,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,22 +510,22 @@ 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
-        const _fileParam = new URLSearchParams(location.search).get("file");
-        let fileRelPath = _fileParam || siteCtx.fileRelPath || _openParam;
+        const _fileParam = _urlParams.get("file");
+        let fileRelPath = _fileParam || siteCtx.fileRelPath || _projectParam;
 
         // When opening project.json, default to home page instead
         if (fileRelPath === "project.json" || fileRelPath.endsWith("/project.json")) {
@@ -520,9 +553,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 +566,12 @@ if (_openParam) {
           if (fileRelPath === "project.json" && activeTab.value) {
             activeTab.value.session.ui.canvasMode = "stylebook";
           }
-          view.leftTab = "layers";
 
           render();
-          statusMessage(`Opened ${_openParam}`);
+          statusMessage(`Opened ${fileRelPath}`);
         }
-      } catch (/** @type {any} */ e) {
-        statusMessage(`Error: ${e.message}`);
+      } catch (/** @type {unknown} */ e) {
+        statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
       }
     })();
   }
@@ -594,7 +624,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 +650,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 +706,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.
  *