@jxsuite/studio 10.1.0 → 10.2.0

package/src/shell.ts

@@ -45,8 +45,8 @@ import type { AnyCommand, CommandRegistry } from "./commands/registry";
 import {
   DEFAULT_WORKSPACE,
   isWorkspaceId,
+  SWITCHER_WORKSPACES,
   WORKSPACE_IDS,
-  WORKSPACES,
 } from "./workspace/workspace-ids";
 import type { WorkspaceId } from "./workspace/workspace-ids";
 import { DEFAULT_PUBLISH_DESTINATION, DEFAULT_PUBLISH_TAB } from "./publish/publish-ids";
@@ -416,7 +416,7 @@ export interface WorkspacePreset {
 }
 
 /**
- * The five presets.
+ * The six presets.
  *
  * - **Design** draws the rail and both side docks: the canvas, its outline and its inspector.
  * - **Content** opens the Navigator on the Collections panel and collapses the Inspector, drawing it
@@ -427,8 +427,10 @@ export interface WorkspacePreset {
  *   schemes), and the Inspector on its Style tab only while the Elements view is on screen: that
  *   view selects an element default on a canvas, and the Inspector is where it is styled. Variables
  *   is edited in the view itself, and Code has no canvas, so both leave the pane its width.
+ * - **Settings** collapses both side docks, as Media and Publish do: its home is the settings editor,
+ *   whose section list is its own navigator.
  *
- * Only Design and Content draw a tab strip; the other three draw their home surface alone.
+ * Only Design and Content draw a tab strip; the other four draw their home surface alone.
  */
 export const WORKSPACE_PRESETS: Readonly<Record<WorkspaceId, WorkspacePreset>> = {
   content: {
@@ -459,6 +461,13 @@ export const WORKSPACE_PRESETS: Readonly<Record<WorkspaceId, WorkspacePreset>> =
     rail: false,
     tabStrip: false,
   },
+  settings: {
+    id: "settings",
+    inspector: { open: false },
+    navigator: { open: false },
+    rail: false,
+    tabStrip: false,
+  },
   styles: {
     id: "styles",
     inspector: { open: false, tab: "style", whileWriting: true },
@@ -833,6 +842,19 @@ let _workspaceRoot: string | null | undefined;
  */
 let _panels: Partial<Record<WorkspaceId, string>> = {};
 
+/**
+ * The workspace on screen before the one that is, in this window, or `null` before the first
+ * switch. Not persisted, for the reason {@link _panels} is not. Project Settings' **Close** returns
+ * here (`settings/settings-workspace.ts`), because Settings is visited from somewhere rather than
+ * worked in, and the top bar has no tab to say where that was.
+ */
+let _previous: WorkspaceId | null = null;
+
+/** The workspace entered before the one on screen, or `null` when there was none this session. */
+export function previousWorkspace(): WorkspaceId | null {
+  return _previous;
+}
+
 /** The raw record for `root`, or `{}` for absent, corrupt or hand-edited storage. */
 function rawPersistedProject(root: string | null): JsonObject {
   if (!root) {
@@ -949,6 +971,7 @@ export function syncProjectWorkspace(root: string | null): void {
   }
   _workspaceRoot = root;
   _panels = {};
+  _previous = null;
   shell.workspace = persistedWorkspace(root);
   if (root === null) {
     /* No frame to apply, but the Navigator is still on screen beside the rail: a panel only the
@@ -1020,6 +1043,7 @@ export function enterWorkspace(id: WorkspaceId, deps?: WorkspaceDeps): boolean {
   if (!WORKSPACE_PRESETS[shell.workspace].navigator.panel) {
     _panels[shell.workspace] = shell.leftTab;
   }
+  _previous = shell.workspace;
   shell.workspace = id;
   applyFrame(id, deps);
   persistDocks();
@@ -1580,8 +1604,9 @@ export function shellViewCommands(deps: ShellCommandDeps): AnyCommand[] {
       title: "Show Assistant",
     },
     // ── Workspaces ───────────────────────────────────────────────────────────
-    // One SETTER, and one chord record per workspace. A chord cannot carry an argument, so ⌘1–5
-    // Are five records that each run the setter's own path rather than five implementations of it.
+    /* One SETTER, and one chord record per switcher workspace. A chord cannot carry an argument, so
+       ⌘1–5 are five records that each run the setter's own path rather than five implementations
+       of it. Settings has none: `settings.open` is its record, with its own chord (⌘⇧,). */
     {
       args: argsSchema({
         workspace: enumProperty(WORKSPACE_IDS, "Which workspace to show."),
@@ -1603,7 +1628,7 @@ export function shellViewCommands(deps: ShellCommandDeps): AnyCommand[] {
       },
       title: "Switch Workspace",
     },
-    ...WORKSPACES.map((entry, index): AnyCommand => ({
+    ...SWITCHER_WORKSPACES.map((entry, index): AnyCommand => ({
       category: "View",
       id: `workspace.focus.${entry.id}`,
       keybinding: `mod+${index + 1}`,

package/src/surfaces/ai-credentials-form.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://jxsuite.com/schema/v1",
   "$id": "StudioAiCredentialsForm",
-  "$description": "The AI provider credentials form every gate embeds below the keyless offer: a key, a model, an endpoint, and the two buttons that keep or abandon them. Everything here is a projection — `ui/ai-credentials-form.ts` keeps the drafts, decides what a fetch is sent with, what Save actually persists and whether there is anything to Save or Cancel at all. This document never reads a setting and never calls the proxy.",
+  "$description": "The AI provider credentials form every gate embeds below the keyless offer: a provider family (only where the backend reaches more than one), a key, a model, an endpoint, and the two buttons that keep or abandon them. Everything here is a projection — `ui/ai-credentials-form.ts` keeps the drafts, decides what a fetch is sent with, what Save actually persists and whether there is anything to Save or Cancel at all. This document never reads a setting and never calls the proxy.",
   "tagName": "div",
   "attributes": {
     "part": "ai-creds-form",
@@ -32,7 +32,7 @@
       "fontWeight": "500",
       "fontSize": "var(--jx-text-sm)"
     },
-    "& [part=\"key\"], & [part=\"model\"], & [part=\"endpoint\"]": {
+    "& [part=\"provider\"], & [part=\"key\"], & [part=\"model\"], & [part=\"endpoint\"]": {
       "$description": "Every control takes the column's width; the kit's fields are inline-flex by default.",
       "width": "100%"
     },
@@ -73,6 +73,54 @@
       },
       "textContent": "${state.intro}"
     },
+    {
+      "$description": "The family the key belongs to (specs/ai.md §2.6), drawn only where it is a choice: the backend's models route lists more than the OpenAI-compatible family, or the stored or drafted family is already another one, so a reader can always switch back. A backend that lists nothing reaches the OpenAI-compatible family alone and forwards every key there, so offering Claude to it would send a Claude key to OpenAI. Above the key because it decides what the key is.",
+      "tagName": "div",
+      "attributes": {
+        "part": "provider-slot",
+        "role": "none"
+      },
+      "style": {
+        "display": "contents"
+      },
+      "$switch": {
+        "$ref": "#/state/showProvider"
+      },
+      "cases": {
+        "true": {
+          "tagName": "jx-select",
+          "attributes": {
+            "part": "provider"
+          },
+          "$props": {
+            "label": "Provider",
+            "size": "sm",
+            "options": {
+              "$ref": "#/state/providerOptions"
+            },
+            "value": {
+              "$ref": "#/state/providerDraft"
+            }
+          },
+          "onchange": {
+            "$prototype": "Function",
+            "body": [
+              {
+                "operator": "call",
+                "target": {
+                  "$ref": "#/state/setProvider"
+                },
+                "value": [
+                  {
+                    "$ref": "event#/target/value"
+                  }
+                ]
+              }
+            ]
+          }
+        }
+      }
+    },
     {
       "tagName": "jx-textfield",
       "attributes": {
@@ -82,7 +130,9 @@
         "label": "AI provider key",
         "type": "password",
         "size": "sm",
-        "placeholder": "sk-… or any compatible key",
+        "placeholder": {
+          "$ref": "#/state/keyPlaceholder"
+        },
         "value": {
           "$ref": "#/state/keyDraft"
         }
@@ -120,7 +170,9 @@
       "$props": {
         "label": "Model ID",
         "size": "sm",
-        "placeholder": "Model ID (e.g. gpt-4o, claude-sonnet-4-20250514, etc.)",
+        "placeholder": {
+          "$ref": "#/state/modelPlaceholder"
+        },
         "allowsCustomValue": true,
         "value": {
           "$ref": "#/state/modelDraft"
@@ -231,7 +283,9 @@
       "$props": {
         "label": "Endpoint",
         "size": "sm",
-        "placeholder": "Endpoint (optional, e.g. http://localhost:11434/v1)",
+        "placeholder": {
+          "$ref": "#/state/endpointPlaceholder"
+        },
         "value": {
           "$ref": "#/state/baseUrlDraft"
         }

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

@@ -2,7 +2,7 @@
 /**
  * The AI provider credentials form as a mounted document.
  *
- * `ui/ai-credentials-form.ts` is the flow — it holds the three drafts, decides which credentials a
+ * `ui/ai-credentials-form.ts` is the flow — it holds the drafts, decides which credentials a
  * listing is made with, what Save persists and re-reads, and whether there is anything to commit —
  * and this is the surface it draws into.
  *
@@ -37,10 +37,22 @@ registerSurface("ai-credentials-form", credentialsDoc);
 export interface AiCredentialsView {
   /** The line under the title: where the key goes, and where it does not. */
   intro: string;
-  /** The three drafts, exactly as the flow holds them. */
+  /** The drafts, exactly as the flow holds them. */
+  providerDraft: string;
   keyDraft: string;
   modelDraft: string;
   baseUrlDraft: string;
+  /**
+   * Whether the provider picker is drawn: the backend reaches another family, or the drafted or
+   * stored family already is one (specs/ai.md §2.6).
+   */
+  showProvider: boolean;
+  /** The families the picker offers. */
+  providerOptions: SurfaceOption[];
+  /** What each field says while it is empty; they follow the drafted family. */
+  keyPlaceholder: string;
+  modelPlaceholder: string;
+  endpointPlaceholder: string;
   /** The catalogue the last successful listing returned; empty draws no chevron on the field. */
   models: SurfaceOption[];
   /** A listing is in flight: the button says so and refuses a second one. */
@@ -59,6 +71,7 @@ export interface AiCredentialsView {
 
 /** Everything the reader can do here. */
 export interface AiCredentialsActions {
+  setProvider: (value: string) => void;
   setKey: (value: string) => void;
   setModel: (value: string) => void;
   setBaseUrl: (value: string) => void;

package/src/surfaces/commandbar.ts

@@ -57,7 +57,7 @@ import {
   openSettingsMenu,
   SETTINGS_MENU_PLACEMENT,
 } from "../panels/settings-menu";
-import { WORKSPACES } from "../workspace/workspace-ids";
+import { SWITCHER_WORKSPACES } from "../workspace/workspace-ids";
 import type { WorkspaceId } from "../workspace/workspace-ids";
 import commandbarDoc from "./commandbar.json";
 import type { PresenceProjection } from "../collab/presence-chips";
@@ -584,7 +584,11 @@ function projectSegments(tab: Tab | null): SegmentProjection[] {
 }
 
 /**
- * `Design · Content · Media · Styles · Publish`: the five workspaces, as a tablist.
+ * `Design · Content · Media · Styles · Publish`: the five switcher workspaces, as a tablist.
+ *
+ * Project Settings is a workspace too, and is not here: it is reached from its links (the gear
+ * menu's row, ⌘⇧, and every `settings.open` deep link), so while it is on screen no tab is selected
+ * and any of these five leaves it (studio.md §22.2).
  *
  * Each tab RUNS `view.setWorkspace`, so the click, ⌘1–5, the palette row and a script all take the
  * same path, and the selected tab is `shell.workspace` rather than a second record of it. Publish
@@ -598,7 +602,7 @@ function projectWorkspaces(registry: CommandRegistry | null): WorkspaceTabProjec
     return [];
   }
   const dirty = shell.git.status?.files.length ?? 0;
-  return WORKSPACES.map((entry) => {
+  return SWITCHER_WORKSPACES.map((entry) => {
     const badge = entry.id === "publish" && dirty > 0 ? String(dirty) : "";
     const chord = registry.keymap.formatBinding(`workspace.focus.${entry.id}`);
     const named = chord ? `${entry.title} (${chord})` : entry.title;

package/src/surfaces/settings-contributed.json

@@ -24,7 +24,7 @@
       "marginBottom": "12px"
     },
     "& [part=\"columns\"]": {
-      "$description": "The 1px gap over the border colour is the divider between the two columns: two panels on `--bg-panel` with `--border` showing through the gap, so nothing draws a rule of its own.",
+      "$description": "The 1px gap over the border colour is the divider between the two columns: two panels on the page's own `--bg` with `--border` showing through the gap, so nothing draws a rule of its own. The panels are `--bg`, not `--bg-panel`, because the section is drawn on the Settings home, whose background is `--bg`: a second shade under one section of the form reads as a box nobody asked for.",
       "display": "flex",
       "height": "100%",
       "gap": "1px",
@@ -37,7 +37,7 @@
       "padding": "12px",
       "width": "200px",
       "minWidth": "200px",
-      "background": "var(--bg-panel)",
+      "background": "var(--bg)",
       "overflowY": "auto"
     },
     "& [part=\"entry\"], & [part=\"new-open\"]": {
@@ -62,7 +62,7 @@
       "display": "flex",
       "alignItems": "center",
       "justifyContent": "center",
-      "background": "var(--bg-panel)",
+      "background": "var(--bg)",
       "color": "var(--fg-dim)",
       "fontSize": "13px"
     },
@@ -70,7 +70,7 @@
       "$description": "`min-width: 0` is the one line `.settings-editor-panel` did not have and needed: a flex child's floor is its content, and the schema form inside this one is a whole form rather than the short cards Data Shapes puts here — so a long pointer or a wide row pushed the column past the right edge of the pane instead of scrolling inside it.",
       "flex": "1",
       "padding": "16px",
-      "background": "var(--bg-panel)",
+      "background": "var(--bg)",
       "overflowY": "auto",
       "minWidth": "0"
     },

package/src/surfaces/settings-contributed.ts

@@ -41,7 +41,7 @@ export interface ContributedEntryView {
   /** The key in the section's map on disk — the row's identity and its `data-entry`. */
   key: string;
   selected: boolean;
-  /** `overlay.dialog:settings/entry:<key>`, so a shot can name the row without a selector. */
+  /** `pane.<id>/settings/entry:<key>`, so a shot can name the row without a selector. */
   region: string;
 }
 
@@ -61,7 +61,7 @@ export interface ContributedView {
   editorState: "empty" | "editing";
   /** What the rename field holds — the key on disk, or what the reader has just typed. */
   entryName: string;
-  /** `overlay.dialog:settings/editor`. */
+  /** `pane.<id>/settings/editor`. */
   editorRegion: string;
   /** The new-entry button: "New content type", or "New entry" when the section names none. */
   newLabel: string;