@jxsuite/studio 10.0.0 → 10.2.0

package/src/surfaces/settings-pane.ts

@@ -1,11 +1,11 @@
 /// <reference lib="dom" />
 /**
- * The Project Settings dialog's two columns as a mounted document: the mount seam, and nothing
- * else.
+ * The Project Settings workspace's home as a mounted document: its heading and Back control over
+ * the two columns. The mount seam, and nothing else.
  *
  * `panels/settings-pane.ts` is the flow: which sections are registered, which group lists each,
  * which one is current, what a nav click does, and which renderer draws the body. This is the
- * surface it draws into, and `surfaces/settings-dialog.ts` is the dialog it sits in.
+ * surface it draws into, and `settings/settings-workspace.ts` mounts it into a pane's stage.
  *
  * **One island, and the sections are why.** A settings section is handed a container and renders
  * into it (some of them still with lit, some by mounting a document of their own) so the body
@@ -51,8 +51,14 @@ export interface SettingsPaneMovedRow {
   linkLabel: string;
 }
 
-/** What the dialog's columns say right now. */
+/** What the home says right now. */
 export interface SettingsPaneValues {
+  /** `pane.<id>/settings`: the pane this home stands in names it, as Publish's does. */
+  region: string;
+  /** The heading, which is also the region's name: the workspace's title. */
+  heading: string;
+  /** The Back control's text, naming where it goes ("Back to Design"). */
+  backLabel: string;
   /** The current section's key. */
   active: string;
   /** The current section's row id, so the body is named by the row that chose it. */
@@ -80,6 +86,8 @@ export interface SettingsPaneActions {
   selectSection: (key: string) => void;
   /** A Moved footnote's button was activated, naming the workspace it goes to. */
   openMoved: (workspace: string) => void;
+  /** The Back control was activated: leave Settings for the workspace it was opened from. */
+  back: () => void;
 }
 
 export interface SettingsPaneHandle {
@@ -95,15 +103,24 @@ export interface SettingsPaneHandle {
   body: () => HTMLElement | null;
   /** Settles once the document is mounted, or the surface was disposed first. */
   ready: Promise<void>;
+  /**
+   * Whether the document still stands in the container it was mounted into: true while the mount is
+   * in flight, false once disposed or once something else replaced the container's children.
+   */
+  attached: () => boolean;
   /**
    * Put the keyboard on the current section's row.
    *
-   * `showModal()` focuses the dialog's first focusable descendant, which is always the first
-   * group's tab stop, so a dialog opened on Advanced › Raw JSON would put the ring on Overview
-   * while the selection was three rows down a different list. Read off `aria-selected`, which the
-   * strip writes, because that attribute is the one record of which row is current.
+   * Opening Settings on Advanced › Raw JSON has to put the ring on Raw JSON, not on the first
+   * group's tab stop, or the selection is three rows down a different list from the keyboard. The
+   * row is found by the section key the document was handed (`active`), not by `aria-selected`: the
+   * strip writes that a turn after the row is created, and a home opened by a command asks for the
+   * keyboard as soon as it has drawn. A row is focusable once its strip has given it a tab stop, so
+   * a row whose strip has not synced yet is focused when the strip says it is ready.
+   *
+   * @returns {Promise<void>} Settles once the keyboard has moved, or at once when there is no row
    */
-  focusActive: () => void;
+  focusActive: () => Promise<void>;
   /** Take the document down. Idempotent. */
   dispose: () => void;
 }
@@ -125,12 +142,12 @@ function failureStateOf(failure: string): string {
 }
 
 /**
- * Mount the columns into `container`, which is the settings dialog's island.
+ * Mount the home into `container`, a pane's stage.
  *
  * The container is cleared first, lit's render marker included, so a host handed back after some
  * other renderer used it cannot make the next lit render throw on a part whose nodes have gone.
  *
- * @param {HTMLElement} container The dialog's pane slot
+ * @param {HTMLElement} container The pane's stage
  * @param {SettingsPaneValues} values What to say on the first paint
  * @param {SettingsPaneActions} actions What a row and a Moved button do. Read once.
  * @returns {SettingsPaneHandle}
@@ -171,6 +188,13 @@ export function mountSettingsPaneSurface(
   });
 
   return {
+    attached: () => {
+      if (disposed) {
+        return false;
+      }
+      const root = mounted?.root;
+      return root === undefined ? true : root instanceof HTMLElement && container.contains(root);
+    },
     body: () => body,
     dispose() {
       disposed = true;
@@ -178,10 +202,32 @@ export function mountSettingsPaneSurface(
       mounted = null;
       body = null;
     },
-    focusActive() {
+    async focusActive() {
       const root = mounted?.root;
-      if (root instanceof HTMLElement) {
-        root.querySelector<HTMLElement>('[part="nav-item"][aria-selected="true"]')?.focus();
+      const row =
+        root instanceof HTMLElement
+          ? [...root.querySelectorAll<HTMLElement>('[part="nav-item"]')].find(
+              (candidate) => candidate.dataset["section"] === scope.active,
+            )
+          : undefined;
+      if (!row) {
+        return;
+      }
+      const strip = row.closest("jx-tabs");
+      // `aria-selected` is what the strip writes when it syncs, and the sync is what gives a tab stop.
+      if (strip && row.getAttribute("aria-selected") !== "true") {
+        await new Promise<void>((resolve) => {
+          strip.addEventListener(
+            "jx-ready",
+            () => {
+              resolve();
+            },
+            { once: true },
+          );
+        });
+      }
+      if (!disposed) {
+        row.focus();
       }
     },
     ready,
@@ -189,6 +235,9 @@ export function mountSettingsPaneSurface(
       /* Field by field, so an unchanged one is inert, and `active` LAST, because it is what each
          strip's selection is compared against: writing it before the rows it names have arrived
          would make `jx-tabs` sync a selection onto a column that does not hold that tab yet. */
+      scope.region = next.region;
+      scope.heading = next.heading;
+      scope.backLabel = next.backLabel;
       scope.groups = next.groups;
       scope.moved = next.moved;
       scope.activeTabId = next.activeTabId;

package/src/types.ts

@@ -34,6 +34,7 @@ import type {
   ExtensionsInfo,
   FsEvent,
   GitBranchesResult,
+  GitCommitBranchResult,
   GitLogEntry,
   GitStatusResult,
   ImportProgressEvent,
@@ -88,6 +89,7 @@ export type {
   ExtensionsInfo,
   FsEvent,
   GitBranchesResult,
+  GitCommitBranchResult,
   GitFileStatus,
   GitLogEntry,
   GitStatusResult,
@@ -580,6 +582,18 @@ export interface StudioPlatform {
   gitFetch: () => Promise<void>;
   gitCheckout: (branch: string) => Promise<void>;
   gitCreateBranch: (name: string) => Promise<void>;
+  /**
+   * Commit the change set as a NEW branch, parented on the commit this session's edits were made
+   * against, and take the committed files out of this session. Rejects with code `branch_exists`
+   * when the name is taken (the ref is created, never moved).
+   *
+   * The way out on a host where a branch is a session (`gitHosted`): a commit to the session's own
+   * branch that the remote conflicts with can still be published, as a branch of its own the pull
+   * request then reconciles, and a change set on a branch whose every commit is live can be sent
+   * for review without landing there first. An ordinary working tree has no need of it: there a
+   * branch is created and checked out with the changes still in it (studio.md §22.8).
+   */
+  gitCommitBranch?: (opts: { branch: string; message: string }) => Promise<GitCommitBranchResult>;
   gitDiff: (path?: string) => Promise<string>;
   gitShow: (opts: { path: string; ref?: string }) => Promise<string>;
   gitDiscard: (files: string[]) => Promise<void>;

package/src/ui/ai-credentials-form.ts

@@ -1,6 +1,7 @@
 /// <reference lib="dom" />
 /**
- * Ai-credentials-form.ts — reusable AI provider credentials form (key / model / endpoint).
+ * Ai-credentials-form.ts — reusable AI provider credentials form (provider / key / model /
+ * endpoint).
  *
  * Embedded by every host that needs a provider configured — **Preferences › Assistant** (⌘,) and
  * the New Project modal's Import/Agent gates. All draft/model-list state lives inside the closure,
@@ -23,9 +24,16 @@
  * @docs studio/ai
  */
 
-import { fetchAvailableModels, proxyModelsErrorMessage } from "../services/ai-models";
+import type { AiProviderFamily } from "@jxsuite/ai/streaming-client";
+import { isString } from "@jxsuite/schema/guards";
+import {
+  backendProviders,
+  fetchAvailableModels,
+  proxyModelsErrorMessage,
+} from "../services/ai-models";
 import {
   aiProviderDiffers,
+  getAiProvider,
   getBaseUrl,
   getOpenAiKey,
   saveAiProvider,
@@ -38,10 +46,49 @@ import { createAiCredentialsSurface } from "../surfaces/ai-credentials-form";
 import type { AiCredentialsSurface, AiCredentialsView } from "../surfaces/ai-credentials-form";
 import type { SurfaceOption } from "./surface";
 
-/** The blurb a host that says nothing gets. */
+/**
+ * The blurb a host that says nothing gets, where the backend reaches the OpenAI-compatible family
+ * alone.
+ */
 const DEFAULT_INTRO =
   "Any OpenAI-compatible key works. Stored locally in this browser; sent only to the Studio proxy (never to a third party except your chosen endpoint).";
 
+/** The same blurb where the backend also reaches Anthropic, so the picker is drawn. */
+const PROVIDER_INTRO =
+  "An Anthropic key for Claude, or any OpenAI-compatible key. Stored locally in this browser; sent only to the Studio proxy (never to a third party except your chosen provider).";
+
+/** The families the picker offers, in the order it lists them. */
+const PROVIDER_OPTIONS: SurfaceOption[] = [
+  { label: "OpenAI-compatible", value: "openai-compat" },
+  { label: "Anthropic (Claude)", value: "anthropic" },
+];
+
+/** What each field says while it is empty, per family. */
+const PLACEHOLDERS: Readonly<
+  Record<AiProviderFamily, { key: string; model: string; endpoint: string }>
+> = {
+  anthropic: {
+    endpoint: "Endpoint (optional, defaults to https://api.anthropic.com)",
+    key: "sk-ant-…",
+    model: "Model ID (e.g. claude-opus-5-5)",
+  },
+  "openai-compat": {
+    endpoint: "Endpoint (optional, e.g. http://localhost:11434/v1)",
+    key: "sk-… or any compatible key",
+    model: "Model ID (e.g. gpt-4o, claude-sonnet-4-20250514, etc.)",
+  },
+};
+
+/**
+ * A picker value as a family: the one other family, else the default.
+ *
+ * @param {string} value - What the picker reported
+ * @returns {AiProviderFamily}
+ */
+function familyOf(value: string): AiProviderFamily {
+  return value === "anthropic" ? "anthropic" : "openai-compat";
+}
+
 export interface AiCredentialsFormOptions {
   /** Host re-render scheduler — called whenever the form's internal state changes. */
   requestRender: () => void;
@@ -56,9 +103,11 @@ export interface AiCredentialsFormOptions {
    * Optional context line replacing the default blurb.
    *
    * A string, not a template: the line is drawn by a document, and a document renders text rather
-   * than somebody else's markup. Nothing that passed one ever passed more than a sentence.
+   * than somebody else's markup. Nothing that passed one ever passed more than a sentence. A
+   * function is asked whether the provider picker is drawn, so a host's own sentence can name
+   * Claude exactly when Claude is a choice.
    */
-  intro?: string;
+  intro?: string | ((offersProviders: boolean) => string);
 }
 
 export interface AiCredentialsForm {
@@ -79,6 +128,7 @@ export interface AiCredentialsForm {
  * @returns {AiCredentialsForm}
  */
 export function createAiCredentialsForm(opts: AiCredentialsFormOptions): AiCredentialsForm {
+  let providerDraft: AiProviderFamily = "openai-compat";
   let keyDraft = "";
   let baseUrlDraft = "";
   let modelDraft = "";
@@ -95,7 +145,12 @@ export function createAiCredentialsForm(opts: AiCredentialsFormOptions): AiCrede
    * Cancel replaces it. Starts blank because the drafts do, which is what lets a host that never
    * calls `startEdit` still open on what is stored.
    */
-  let basis: AiProvider = { apiKey: "", baseUrl: "", model: "" };
+  let basis: Required<AiProvider> = {
+    apiKey: "",
+    baseUrl: "",
+    model: "",
+    provider: "openai-compat",
+  };
 
   /** Made on the first render, and kept for the life of the controller. */
   let surface: AiCredentialsSurface | null = null;
@@ -108,13 +163,19 @@ export function createAiCredentialsForm(opts: AiCredentialsFormOptions): AiCrede
    * writes a choice nobody made, and `jx.ai.model: "gpt-4o"` is exactly what a broken install was
    * left holding.
    */
-  function stored(): AiProvider {
-    return { apiKey: getOpenAiKey(), baseUrl: getBaseUrl(), model: storedModel() };
+  function stored(): Required<AiProvider> {
+    return {
+      apiKey: getOpenAiKey(),
+      baseUrl: getBaseUrl(),
+      model: storedModel(),
+      provider: getAiProvider(),
+    };
   }
 
   /** Load the drafts from what is stored, discarding any edit, and take that as the new basis. */
   function loadDrafts() {
     basis = stored();
+    providerDraft = basis.provider;
     keyDraft = basis.apiKey;
     baseUrlDraft = basis.baseUrl;
     modelDraft = basis.model;
@@ -141,6 +202,7 @@ export function createAiCredentialsForm(opts: AiCredentialsFormOptions): AiCrede
    */
   function followStore() {
     const now = stored();
+    providerDraft = providerDraft === basis.provider ? now.provider : providerDraft;
     keyDraft = storedEquals(SETTINGS.aiOpenAiKey, keyDraft, basis.apiKey) ? now.apiKey : keyDraft;
     baseUrlDraft = storedEquals(SETTINGS.aiBaseUrl, baseUrlDraft, basis.baseUrl)
       ? now.baseUrl
@@ -173,7 +235,12 @@ export function createAiCredentialsForm(opts: AiCredentialsFormOptions): AiCrede
    * no longer `dirty`: Save and Cancel go away, so a second press has nothing to land on.
    */
   function save() {
-    saveAiProvider({ apiKey: keyDraft, baseUrl: baseUrlDraft, model: modelDraft });
+    saveAiProvider({
+      apiKey: keyDraft,
+      baseUrl: baseUrlDraft,
+      model: modelDraft,
+      provider: providerDraft,
+    });
     loadDrafts();
     modelsError = "";
     /* The fetched list stays: it was listed under exactly these credentials, and dropping it
@@ -213,6 +280,7 @@ export function createAiCredentialsForm(opts: AiCredentialsFormOptions): AiCrede
         credentials: {
           apiKey: keyDraft || getOpenAiKey(),
           baseUrl: baseUrlDraft || getBaseUrl(),
+          provider: providerDraft,
         },
         force: true,
       });
@@ -243,24 +311,58 @@ export function createAiCredentialsForm(opts: AiCredentialsFormOptions): AiCrede
     return availableModels.map((model) => ({ label: model.name, value: model.id }));
   }
 
+  /**
+   * The line under the title: the host's, asked about the picker when it is a function, else the
+   * default for whether the picker is drawn.
+   *
+   * @param {boolean} showProvider - Whether the provider picker is drawn
+   * @returns {string}
+   */
+  function introFor(showProvider: boolean): string {
+    const { intro } = opts;
+    if (intro === undefined) {
+      return showProvider ? PROVIDER_INTRO : DEFAULT_INTRO;
+    }
+    return isString(intro) ? intro : intro(showProvider);
+  }
+
   /** What the form says right now — the whole of what the surface is told. */
   function view(): AiCredentialsView {
+    /* Drawn where it is a choice, and never offered to a backend that cannot honour it: one that
+       lists no other family forwards every key to an OpenAI-compatible endpoint. A family already
+       drafted or stored keeps the picker, so a reader can always switch back. */
+    const showProvider =
+      backendProviders().includes("anthropic") ||
+      providerDraft !== "openai-compat" ||
+      basis.provider !== "openai-compat";
+    const placeholders = PLACEHOLDERS[providerDraft];
     return {
       baseUrlDraft,
       /* Compared as the store would hold each value, so what Save would erase — whitespace, an
          endpoint's trailing slash — is not an edit. See `aiProviderDiffers`. */
-      dirty: aiProviderDiffers({ apiKey: keyDraft, baseUrl: baseUrlDraft, model: modelDraft }),
+      dirty: aiProviderDiffers({
+        apiKey: keyDraft,
+        baseUrl: baseUrlDraft,
+        model: modelDraft,
+        provider: providerDraft,
+      }),
+      endpointPlaceholder: placeholders.endpoint,
       fetchLabel: modelsLoading
         ? "Fetching…"
         : availableModels.length > 0
           ? "Refresh models"
           : "Fetch models",
-      intro: opts.intro ?? DEFAULT_INTRO,
+      intro: introFor(showProvider),
       keyDraft,
+      keyPlaceholder: placeholders.key,
       modelDraft,
+      modelPlaceholder: placeholders.model,
       models: rows(),
       modelsError,
       modelsLoading,
+      providerDraft,
+      providerOptions: PROVIDER_OPTIONS,
+      showProvider,
     };
   }
 
@@ -272,6 +374,20 @@ export function createAiCredentialsForm(opts: AiCredentialsFormOptions): AiCrede
    * would leave the field holding something the flow does not have. Nothing rewrites a draft today;
    * the echo is what makes a rewrite possible.
    */
+  /**
+   * The family the key belongs to. A change drops the listed catalogue, because it was another
+   * family's, and the reason the last listing failed with it: Fetch lists the new family's.
+   */
+  function setProvider(value: string) {
+    const next = familyOf(value);
+    if (next !== providerDraft) {
+      providerDraft = next;
+      availableModels = [];
+      modelsError = "";
+    }
+    surface?.update(view());
+  }
+
   function setKey(value: string) {
     keyDraft = value;
     surface?.update(view());
@@ -305,6 +421,7 @@ export function createAiCredentialsForm(opts: AiCredentialsFormOptions): AiCrede
         setBaseUrl,
         setKey,
         setModel,
+        setProvider,
       });
     }
     return surface.host;

package/src/ui/regions.ts

@@ -20,7 +20,7 @@
  * inspector/tab:style           the Style tab's body
  * inspector/field:href          a field row (the Inspector's documents already emit `data-prop`)
  * pane.primary/tabs             the primary pane's own tab strip
- * overlay.dialog:settings       a named overlay slot
+ * overlay.dialog:about          a named overlay slot
  * ```
  *
  * **Ids are DERIVED, not authored**, which is the property that makes them survive a rename. The
@@ -60,7 +60,7 @@ export type RegionSurface = (typeof REGION_SURFACES)[number];
 /** A parsed region id. `instance` and `part` are absent for a bare surface. */
 export interface ParsedRegionId {
   surface: RegionSurface;
-  /** `primary` in `pane.primary`, `dialog` in `overlay.dialog:settings`. */
+  /** `primary` in `pane.primary`, `dialog` in `overlay.dialog:about`. */
   instance?: string;
   /** Everything after the first `/` — `publish/commit` in `pane.primary/publish/commit`. */
   part?: string;
@@ -412,9 +412,9 @@ export const OVERLAY_INSTANCE: Readonly<Record<"popover" | "modal" | "dialog" |
 /**
  * Region id for an overlay slot.
  *
- * With an `id` this is `overlay.dialog:settings` — derived from the key `getLayerSlot` already
- * builds, so naming a slot names its region. Without one it is the bare instance, which resolves to
- * the topmost open overlay of that kind.
+ * With an `id` this is `overlay.dialog:about` — derived from the key `getLayerSlot` already builds,
+ * so naming a slot names its region. Without one it is the bare instance, which resolves to the
+ * topmost open overlay of that kind.
  */
 export function overlayRegion(
   layer: "popover" | "modal" | "dialog" | "toast",

package/src/workspace/tab-workspace.ts

@@ -11,9 +11,10 @@
  *   written in Content even when it is opened from somewhere else.
  * - **Media**: the media home and every media file's viewer.
  * - **Styles**: `project.json`, in any of its three views: Elements (`stylebook`), Variables
- *   (`tokens`) and Code (`source`). Project Settings is a dialog over every workspace (§17.1), not
- *   a tab, so it belongs to none.
+ *   (`tokens`) and Code (`source`).
  * - **Publish**: the publish home and every comparison (`git-diff`).
+ * - **Settings**: its home alone, which hosts the settings editor (§17.1, §22.9). It edits
+ *   `project.json` through the chokepoint without being a tab over it.
  * - **Design**: everything else: pages, templates, components and every other file.
  *
  * The rules read the tab's CURRENT editor, so switching an entry from its form to the canvas keeps

package/src/workspace/workspace-home.ts

@@ -3,16 +3,17 @@
  * Workspace homes — the virtual tab a workspace opens on when none of its own tabs is open.
  *
  * A home is a tab like a grid is a tab: it sits in a pane's strip, it can be closed, and it has a
- * canvas mode of its own (`content-home`, `media-home`, `publish-home`) that
+ * canvas mode of its own (`content-home`, `media-home`, `publish-home`, `settings-home`) that
  * `canvas/canvas-render.ts` routes here. It has no document — the tab carries a stub, exactly as
  * the grid tabs do — and its id is in the `workspace://` space `workspace/workspace-ids.ts`
  * declares, so it can never collide with a file.
  *
  * What a home DRAWS is its workspace's own surface: the Content home is the collection it shows
  * (`browse/library-pane.ts`, studio.md §22.5), the Media home is the media library
- * (`media/media-library.ts`, §22.6) and the Publish home is the Publish workspace
- * (`publish/publish-workspace.ts`, §22.8). The mechanism (the tab, the mode, the routing and the
- * per-pane mount) is the same for all three, and this module only routes.
+ * (`media/media-library.ts`, §22.6), the Publish home is the Publish workspace
+ * (`publish/publish-workspace.ts`, §22.8) and the Settings home is the settings editor
+ * (`settings/settings-workspace.ts`, §22.9). The mechanism (the tab, the mode, the routing and the
+ * per-pane mount) is the same for all four, and this module only routes.
  *
  * @docs studio/interface
  */
@@ -30,6 +31,11 @@ import {
   publishWorkspaceMounted,
   renderPublishWorkspace,
 } from "../publish/publish-workspace";
+import {
+  detachSettingsWorkspace,
+  renderSettingsWorkspace,
+  settingsWorkspaceMounted,
+} from "../settings/settings-workspace";
 import type { HomeWorkspaceId } from "./workspace-ids";
 import type { Tab } from "../tabs/tab";
 import type { CanvasSurface } from "../canvas/canvas-surface";
@@ -98,6 +104,9 @@ export function workspaceHomeMounted(paneId: string, tab: Tab): boolean {
   if (id === "content") {
     return libraryPaneMounted(paneId, tab);
   }
+  if (id === "settings") {
+    return settingsWorkspaceMounted(paneId, tab);
+  }
   return publishWorkspaceMounted(paneId, tab);
 }
 
@@ -106,6 +115,7 @@ export function detachWorkspaceHome(paneId: string): void {
   detachMediaLibrary(paneId);
   detachLibraryPane(paneId);
   detachPublishWorkspace(paneId);
+  detachSettingsWorkspace(paneId);
 }
 
 /**
@@ -129,5 +139,9 @@ export function renderWorkspaceHome(surface: CanvasSurface, tab: Tab): void {
     renderLibraryMode(surface, tab);
     return;
   }
+  if (id === "settings") {
+    renderSettingsWorkspace(surface, tab);
+    return;
+  }
   renderPublishWorkspace(surface, tab);
 }

package/src/workspace/workspace-ids.ts

@@ -1,9 +1,13 @@
 /**
- * The five workspaces, declared where a bare Bun process can read them.
+ * The six workspaces, declared where a bare Bun process can read them.
  *
  * A workspace is the answer to "what am I doing right now": designing pages, writing content,
- * managing media, editing the project's styles, or publishing. Studio's top bar switches between
- * them, and every open tab belongs to exactly one (`workspace/tab-workspace.ts` derives which).
+ * managing media, editing the project's styles, publishing, or configuring the project. Studio's
+ * top bar switches between the first five, and every open tab belongs to exactly one
+ * (`workspace/tab-workspace.ts` derives which). Project Settings is the sixth: a workspace like the
+ * others (a frame, a home tab, a place `view.setWorkspace` can name) that the top bar does not draw
+ * a tab for, because it is visited for a minute from a "Project Settings" link (the gear menu, ⌘⇧,
+ * and every deep link `settings.open` serves) rather than worked in (studio.md §17.1, §22.9).
  *
  * The ids live in a module with no DOM and no state for the reason `NAVIGATOR_PANEL_IDS` does:
  * `view.setWorkspace`'s `args` enum is built from {@link WORKSPACE_IDS}, and
@@ -19,8 +23,15 @@
  * @docs studio/interface
  */
 
-/** The workspaces, in top-bar order. ⌘1 to ⌘5 follow this order. */
-export const WORKSPACE_IDS = ["design", "content", "media", "styles", "publish"] as const;
+/** The workspaces, in top-bar order, Settings last. ⌘1 to ⌘5 follow the switcher's five. */
+export const WORKSPACE_IDS = [
+  "design",
+  "content",
+  "media",
+  "styles",
+  "publish",
+  "settings",
+] as const;
 
 export type WorkspaceId = (typeof WORKSPACE_IDS)[number];
 
@@ -34,6 +45,11 @@ export interface WorkspaceInfo {
   title: string;
   /** A key into the kit's glyph manifest (`@jxsuite/ui/icons`), checked by this module's test. */
   icon: string;
+  /**
+   * Whether the top bar draws a tab for it, and so whether it has a ⌘-digit chord and a "Go to"
+   * palette row. False for Settings alone, which its own links and `settings.open` reach.
+   */
+  switcher: boolean;
 }
 
 /** Every workspace, in {@link WORKSPACE_IDS} order. */
@@ -41,30 +57,46 @@ export const WORKSPACES: readonly WorkspaceInfo[] = [
   {
     icon: "frame-corners",
     id: "design",
+    switcher: true,
     title: "Design",
   },
   {
     icon: "file-text",
     id: "content",
+    switcher: true,
     title: "Content",
   },
   {
     icon: "image",
     id: "media",
+    switcher: true,
     title: "Media",
   },
   {
     icon: "paint-brush",
     id: "styles",
+    switcher: true,
     title: "Styles",
   },
   {
     icon: "paper-plane-tilt",
     id: "publish",
+    switcher: true,
     title: "Publish",
   },
+  {
+    icon: "gear-six",
+    id: "settings",
+    switcher: false,
+    title: "Project settings",
+  },
 ];
 
+/** The workspaces the top bar draws a tab for, in order: every one but Settings. */
+export const SWITCHER_WORKSPACES: readonly WorkspaceInfo[] = WORKSPACES.filter(
+  (entry) => entry.switcher,
+);
+
 /** Whether a value is a declared workspace id. A stored value is untrusted input. */
 export function isWorkspaceId(value: unknown): value is WorkspaceId {
   return typeof value === "string" && WORKSPACE_IDS.some((id) => id === value);
@@ -90,14 +122,15 @@ const HOME_SCHEME = "workspace://";
  * that tab draws under.
  *
  * Design has no home (an empty stage is its home), and Styles' is `project.json` in its stylebook
- * editor, opened by the module that owns that document. These three are the generic mechanism's:
+ * editor, opened by the module that owns that document. These four are the generic mechanism's:
  * Content's home is the collection it shows (`browse/library-pane.ts`), Media's the media library,
- * and Publish's its own surface.
+ * Publish's its own surface, and Settings' the settings editor (`settings/settings-workspace.ts`).
  */
 export const WORKSPACE_HOME_MODES = {
   content: "content-home",
   media: "media-home",
   publish: "publish-home",
+  settings: "settings-home",
 } as const satisfies Partial<Record<WorkspaceId, string>>;
 
 /** A workspace whose home is a generic home tab. */

package/dist/chunks/adapter-wc5zvg9a.js

@@ -1,4 +0,0 @@
-import{qs,Gs,Wr}from"./studio-ewarnzm4.js";export{Wr as draggable,qs as dropTargetForElements,Gs as monitorForElements};
-
-//# debugId=6706B48D5462E95E64756E2164756E21
-//# sourceMappingURL=adapter-wc5zvg9a.js.map