@jxsuite/studio 5.6.0 → 5.7.0

package/src/surfaces/pane-grid.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://jxsuite.com/schema/v1",
   "$id": "StudioPaneGrid",
-  "$description": "The pane grid (studio.md §18.1): one cell per pane, with a splitter before every cell but the first. Every box here is EMPTY by design — the FIVE inside a cell are hosts other modules fill (`panels/tab-strip.ts` the strip, `panels/jump-bar.ts` the jump bar, `panels/pane-context.ts` the chrome layer, `canvas/canvas-render.ts` the stage, `panels/pane-grid.ts` itself the right-edge drop zone), and the stage is an ISLAND in the studio-ui-guidelines.md §9.4 sense: the canvas host mounts a cross-origin `<iframe>` into it, so nothing this document draws may ever go inside it. What the document owns is the STRUCTURE and the STYLE — the cell's own two-row grid, the three row-2 children that share its lower cell, and the splitter — which is `styles/shell.css`'s `.pane*` block and `styles/canvas.css`'s `.pane-stage` rule, carried here and keyed on `part`. Two things are load-bearing and easy to undo. (1) **A row that moves reloads an iframe**, so the keyed `$map` is not an optimisation: `workspace.panes[0]` is always the primary and `MAX_PANES` is 2, the key is the pane id, and the runtime's forward-cursor pass therefore never moves a kept row — gaining or losing the side pane leaves the primary's node, and the frame inside it, untouched. (2) **The splitter must sit BETWEEN two cells and inside neither**, so each row is a `display: contents` wrapper holding its own leading splitter and its cell: the wrapper generates no box, so the splitter and the two cells are the grid items of `#pane-grid` in DOM order, and a pointer landing on the splitter is in no cell at all. Every selector below is a `>` chain from the root, because a pane's stage hosts other surface documents and a bare `[part=\"row\"]` descendant rule would reach into them.",
+  "$description": "The pane grid (studio.md §18.1): one cell per pane, with a splitter before every cell but the first. Every box here is EMPTY by design — the FOUR inside a cell are hosts other modules fill (`panels/tab-strip.ts` the strip, `panels/pane-context.ts` the chrome layer, `canvas/canvas-render.ts` the stage, `panels/pane-grid.ts` itself the right-edge drop zone), and the stage is an ISLAND in the studio-ui-guidelines.md §9.4 sense: the canvas host mounts a cross-origin `<iframe>` into it, so nothing this document draws may ever go inside it. What the document owns is the STRUCTURE and the STYLE — the cell's own two-row grid, the three row-2 children that share its lower cell, and the splitter — which is `styles/shell.css`'s `.pane*` block and `styles/canvas.css`'s `.pane-stage` rule, carried here and keyed on `part`. Two things are load-bearing and easy to undo. (1) **A row that moves reloads an iframe**, so the keyed `$map` is not an optimisation: `workspace.panes[0]` is always the primary and `MAX_PANES` is 2, the key is the pane id, and the runtime's forward-cursor pass therefore never moves a kept row — gaining or losing the side pane leaves the primary's node, and the frame inside it, untouched. (2) **The splitter must sit BETWEEN two cells and inside neither**, so each row is a `display: contents` wrapper holding its own leading splitter and its cell: the wrapper generates no box, so the splitter and the two cells are the grid items of `#pane-grid` in DOM order, and a pointer landing on the splitter is in no cell at all. Every selector below is a `>` chain from the root, because a pane's stage hosts other surface documents and a bare `[part=\"row\"]` descendant rule would reach into them.",
   "tagName": "div",
   "attributes": {
     "part": "grid",
@@ -27,7 +27,7 @@
       "zIndex": "10"
     },
     "& > [part=\"row\"] > [part=\"pane\"]": {
-      "$description": "ONE PANE, and one COLUMN, declared. Four children name `grid-row: 2` in order to share the lower cell, and auto-placement answers that by inventing an implicit column each: the jump bar, the chrome layer, the stage and the drop zone lined up side by side, the stage taking a third of the pane and pinning the document to the right edge. `grid-template-columns` is what makes \"share the cell\" mean it, and every row-2 child restates `grid-column: 1` so a future fifth one cannot re-open the same hole. No unit test can see this — happy-dom does no layout, so every rect is zero — which is why the screenshot lane is what caught it.",
+      "$description": "ONE PANE, and one COLUMN, declared. Three children name `grid-row: 2` in order to share the lower cell, and auto-placement answers that by inventing an implicit column each: the chrome layer, the stage and the drop zone lined up side by side (with a fourth, the jump bar, that has since moved to the status bar), the stage taking a fraction of the pane and pinning the document to the right edge. `grid-template-columns` is what makes \"share the cell\" mean it, and every row-2 child restates `grid-column: 1` so a future fourth one cannot re-open the same hole. No unit test can see this — happy-dom does no layout, so every rect is zero — which is why the screenshot lane is what caught it.",
       "display": "grid",
       "gridTemplateColumns": "minmax(0, 1fr)",
       "gridTemplateRows": "auto minmax(0, 1fr)",
@@ -44,21 +44,10 @@
       "$description": "A pane with nothing to say costs no band. The strip host is empty until `panels/tab-strip.ts` mounts a document into it, and empty again the moment it disposes.",
       "display": "none"
     },
-    "& > [part=\"row\"] > [part=\"pane\"] > [part=\"jump\"]": {
-      "$description": "The jump bar. Like the chrome layer below it this shares the pane's lower cell rather than owning a row, so the two bars stack OVER the stage instead of pushing it down. `align-self: start` is what keeps it the height of its own content instead of the height of the cell, so the bar never covers the stage it sits above.",
-      "gridRow": "2",
-      "gridColumn": "1",
-      "alignSelf": "start",
-      "position": "relative",
-      "zIndex": "3",
-      "minWidth": "0",
-      "maxWidth": "100%"
-    },
     "& > [part=\"row\"] > [part=\"pane\"] > [part=\"chrome\"]": {
-      "$description": "The pane context bar and the floating zoom pod. The layer itself is inert and only its children take the pointer; `surfaces/pane-context.json` owns what they look like. Offset by `--jump-bar-h` for the same reason the stage is: the jump bar is stacked over this same cell, and one projection per bar is what keeps \"no tab open\" costing no dead band.",
+      "$description": "The pane context bar and the floating zoom pod. The layer itself is inert and only its children take the pointer; `surfaces/pane-context.json` owns what they look like.",
       "gridRow": "2",
       "gridColumn": "1",
-      "marginTop": "var(--jump-bar-h, 0px)",
       "position": "relative",
       "zIndex": "2",
       "minWidth": "0",
@@ -71,10 +60,10 @@
       "pointerEvents": "auto"
     },
     "& > [part=\"row\"] > [part=\"pane\"] > [part=\"pane-stage\"]": {
-      "$description": "The stage: the pane's own axis (`styles/canvas.css`) over its placement in the cell (`styles/shell.css`). Offset by the SUM of the two bars stacked over this cell — `--jump-bar-h` (written by `panels/jump-bar.ts`) and `--pane-context-h` (by `panels/pane-context.ts`), both onto the CELL, which is why this reads them by cascade — so neither ever covers the document, and by zero when no tab is open, so the welcome screen does not sit under a band nothing explains. Two variables rather than one total: each bar owns its own answer, and a bar that renders nothing writes 0 without knowing the other exists.",
+      "$description": "The stage: the pane's own axis (`styles/canvas.css`) over its placement in the cell (`styles/shell.css`). Offset by the context bar stacked over this cell — `--pane-context-h`, written by `panels/pane-context.ts` onto the CELL, which is why this reads it by cascade — so the bar never covers the document, and by zero when no tab is open, so the welcome screen does not sit under a band nothing explains. A pane's address used to be a second bar stacked here (`--jump-bar-h`); it is the status bar's breadcrumb trail now, and costs the stage nothing.",
       "gridRow": "2",
       "gridColumn": "1",
-      "marginTop": "calc(var(--jump-bar-h, 0px) + var(--pane-context-h, 0px))",
+      "marginTop": "var(--pane-context-h, 0px)",
       "position": "relative",
       "overflow": "auto",
       "background": "var(--bg-panel)",
@@ -84,7 +73,7 @@
       "alignItems": "flex-start"
     },
     "& > [part=\"row\"] > [part=\"pane\"] > [part=\"drop-zone\"]": {
-      "$description": "The right-edge target that creates a second pane (§18.1). Sits ABOVE the stage (`z-index: 4` against the stage's own stacking, jump's 3, chrome's 2) so a drag reaches it before it reaches the cross-origin iframe underneath, which would otherwise swallow every drag event with no affordance to say so. `pointer-events: none` when unarmed — a mouse doing anything other than dragging a tab or a file must pass straight through to the stage — and `auto` only while `data-armed` is set, which `panels/pane-grid.ts`'s own arming monitor writes for the DURATION of a drag it recognises, never for a click.",
+      "$description": "The right-edge target that creates a second pane (§18.1). Sits ABOVE the stage (`z-index: 4` against the stage's own stacking, chrome's 2) so a drag reaches it before it reaches the cross-origin iframe underneath, which would otherwise swallow every drag event with no affordance to say so. `pointer-events: none` when unarmed — a mouse doing anything other than dragging a tab or a file must pass straight through to the stage — and `auto` only while `data-armed` is set, which `panels/pane-grid.ts`'s own arming monitor writes for the DURATION of a drag it recognises, never for a click.",
       "gridRow": "2",
       "gridColumn": "1",
       "position": "relative",
@@ -108,7 +97,7 @@
   },
   "children": [
     {
-      "$description": "Keyed on the PANE ID, and that is the whole of §18.1 rule 1's structural half: the key is what makes the runtime MOVE a kept row rather than rebuild it, and re-parenting is not a move for an `<iframe>` — it reloads, dropping its `iframe-channel` connection, its shadow document and every `ready` panel with it. A row renders complete (its cell, its five hosts and its splitter) inside the row's own effect scope before it is inserted, so there is no frame in which a cell exists with no stage inside it.",
+      "$description": "Keyed on the PANE ID, and that is the whole of §18.1 rule 1's structural half: the key is what makes the runtime MOVE a kept row rather than rebuild it, and re-parenting is not a move for an `<iframe>` — it reloads, dropping its `iframe-channel` connection, its shadow document and every `ready` panel with it. A row renders complete (its cell, its four hosts and its splitter) inside the row's own effect scope before it is inserted, so there is no frame in which a cell exists with no stage inside it.",
       "$prototype": "Array",
       "items": { "$ref": "#/state/rows" },
       "key": { "$ref": "$map/item/id" },
@@ -181,13 +170,7 @@
                 }
               },
               {
-                "$description": "The jump bar and the context bar are HANDED this box rather than resolving a region into it. They cannot resolve one the way the strip does: nothing inside the strip re-stamps `pane.<id>/tabs`, while both bars stamp `pane.<id>/jump` and `pane.<id>/context` on markup they render INSIDE these two divs — so a region on the wrapper as well would put the same id on two nested elements, and `resolveRegion` takes the LAST match. Sixty shots crop `pane.primary/context`; a second, larger element carrying it is a silently widened crop.",
-                "tagName": "div",
-                "attributes": {
-                  "part": "jump"
-                }
-              },
-              {
+                "$description": "The context bar is HANDED this box rather than resolving a region into it. It cannot resolve one the way the strip does: nothing inside the strip re-stamps `pane.<id>/tabs`, while the context bar stamps `pane.<id>/context` on markup it renders INSIDE this div — so a region on the wrapper as well would put the same id on two nested elements, and `resolveRegion` takes the LAST match. Sixty shots crop `pane.primary/context`; a second, larger element carrying it is a silently widened crop.",
                 "tagName": "div",
                 "attributes": {
                   "part": "chrome"

package/src/surfaces/pane-grid.ts

@@ -35,10 +35,10 @@ registerSurface("pane-grid", paneGridDoc as unknown as JxDocument);
 /**
  * The `part` a pane's CELL carries.
  *
- * `panels/jump-bar.ts` and `panels/pane-context.ts` both write a `--*-h` custom property onto the
- * cell so the stage can read it back by cascade, and each is handed a box inside the cell rather
- * than the cell itself — so both resolve it with {@link PANE_SELECTOR}. It replaces a `.pane`
- * class: a converted surface emits none, and a `part` is the hook a document offers instead.
+ * `panels/pane-context.ts` writes a `--*-h` custom property onto the cell so the stage can read it
+ * back by cascade, and it is handed a box inside the cell rather than the cell itself — so it
+ * resolves the cell with {@link PANE_SELECTOR}. It replaces a `.pane` class: a converted surface
+ * emits none, and a `part` is the hook a document offers instead.
  */
 export const PANE_PART = "pane";
 
@@ -63,13 +63,12 @@ export const PANE_SELECTOR = `[part="${PANE_PART}"]`;
  */
 export const STAGE_SELECTOR = `[part="${STAGE_PART}"]`;
 
-/** The six boxes a cell is made of, in the order the document draws them. */
-export type PaneCellPart = "pane" | "strip" | "jump" | "chrome" | "stage" | "dropZone";
+/** The five boxes a cell is made of, in the order the document draws them. */
+export type PaneCellPart = "pane" | "strip" | "chrome" | "stage" | "dropZone";
 
 const CELL_PARTS: ReadonlyMap<string, PaneCellPart> = new Map([
   ["pane", "pane"],
   ["strip", "strip"],
-  ["jump", "jump"],
   ["chrome", "chrome"],
   ["pane-stage", "stage"],
   ["drop-zone", "dropZone"],
@@ -234,7 +233,7 @@ export function mountPaneGridSurface(
   const ready = mountSurface("pane-grid", scope, host, {
     /* No `instanceof` narrowing and no "is there a pane" guard, and both absences are structural.
        `pane-grid.json` draws no text and no `textContent`, so every node the runtime reports here
-       is an element; and the six cell parts exist only inside the repeater's rows, so a `$map`
+       is an element; and the five cell parts exist only inside the repeater's rows, so a `$map`
        scope is always there to name the pane. A guard on either would be a branch the document
        cannot reach — which is a line no test could ever cover, which is a claim nothing checks. */
     onNodeCreated: (element, _path, def, state) => {

package/src/surfaces/statusbar.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://jxsuite.com/schema/v1",
   "$id": "StudioStatusbar",
-  "$description": "The status bar: ambient state in the shell's level order, PROJECT then DOCUMENT then SELECTION. The adapter hands in `fields`, each with its region and its items; an item with a command is a button that runs it through `run`, and an item without one is a readout. Nothing here decides what the bar says.",
+  "$description": "The status bar: ambient state in the shell's level order, PROJECT then DOCUMENT then SELECTION. The adapter hands in the fields either side of the DOCUMENT field (`leading` and `trailing`), each with its region and its items; an item with a command is a button that runs it through `run`, and an item without one is a readout. The DOCUMENT field between them is the `trail` slot, an empty box `panels/jump-bar.ts` mounts the breadcrumb trail into. Nothing here decides what the bar says.",
   "tagName": "div",
   "attributes": { "part": "bar" },
   "style": {
@@ -17,7 +17,17 @@
       "padding": "0 var(--jx-space-3)"
     },
     "& > [part=\"field\"]:last-child": { "overflow": "hidden" },
-    "& > [part=\"field\"] + [part=\"field\"]": { "borderLeft": "1px solid var(--jx-border)" },
+    "& > :not([hidden]) ~ :not([hidden])": {
+      "$description": "A rule between fields rather than a run of \"|\" characters: the boundary between PROJECT, DOCUMENT and SELECTION is structural. Every visible field after a visible field draws one, so a hidden DOCUMENT slot leaves no doubled rule behind.",
+      "borderLeft": "1px solid var(--jx-border)"
+    },
+    "& > [part=\"trail\"]": {
+      "$description": "The DOCUMENT field, filled by `panels/jump-bar.ts`. It takes the width the other two fields leave, so a deep trail scrolls inside it instead of pushing the SELECTION field off the bar.",
+      "display": "flex",
+      "flex": "1",
+      "minWidth": "0"
+    },
+    "& > [part=\"trail\"][hidden]": { "display": "none" },
     "& [part=\"item\"], & [part=\"state\"]": {
       "maxWidth": "32ch",
       "overflow": "hidden",
@@ -43,7 +53,65 @@
   "children": [
     {
       "$prototype": "Array",
-      "items": { "$ref": "#/state/fields" },
+      "items": { "$ref": "#/state/leading" },
+      "key": { "$ref": "$map/item/id" },
+      "map": {
+        "tagName": "div",
+        "attributes": { "part": "field", "data-jx-region": "${$map.item.region}" },
+        "children": [
+          {
+            "$prototype": "Array",
+            "items": { "$ref": "$map/item/items" },
+            "key": { "$ref": "$map/item/key" },
+            "map": {
+              "tagName": "span",
+              "attributes": { "part": "slot" },
+              "style": { "display": "contents" },
+              "$switch": { "$ref": "$map/item/kind" },
+              "cases": {
+                "button": {
+                  "tagName": "button",
+                  "attributes": {
+                    "part": "item",
+                    "type": "button",
+                    "title": "${$map.item.title}",
+                    "disabled": { "$ref": "$map/item/disabled" }
+                  },
+                  "textContent": "${$map.item.label}",
+                  "onclick": {
+                    "$prototype": "Function",
+                    "body": [
+                      {
+                        "operator": "call",
+                        "target": { "$ref": "#/state/run" },
+                        "value": [{ "$ref": "$map/item/key" }]
+                      }
+                    ]
+                  }
+                },
+                "state": {
+                  "tagName": "span",
+                  "attributes": { "part": "state", "title": "${$map.item.title}" },
+                  "textContent": "${$map.item.label}"
+                }
+              }
+            }
+          }
+        ]
+      }
+    },
+    {
+      "$description": "The DOCUMENT field's slot. Empty by design: the jump bar is handed this box and mounts its own document into it, so nothing here may ever render a child. `aria-live=\"off\"` because the bar's host is the app's polite status region, and a trail that changes on every click in the canvas would be read aloud on every click; the trail is a `nav` a reader visits, not news.",
+      "tagName": "div",
+      "attributes": {
+        "part": "trail",
+        "aria-live": "off",
+        "hidden": "${state.hasDocument ? null : ''}"
+      }
+    },
+    {
+      "$prototype": "Array",
+      "items": { "$ref": "#/state/trailing" },
       "key": { "$ref": "$map/item/id" },
       "map": {
         "tagName": "div",

package/src/surfaces/statusbar.ts

@@ -1,68 +1,60 @@
 /// <reference lib="dom" />
 /**
- * The status bar — ambient state, in scope order, and nothing else.
+ * The status bar — ambient state, in scope order, and the breadcrumb trail between it.
  *
  * What this replaces: a bar built by `innerHTML` string concatenation with a three-character
  * escaper, carrying whatever the last of 78 `statusMessage()` calls had said, for three seconds.
  * Transient messages have left entirely for the toast host (`ui/layers.ts`) and the Problems list
  * (`services/notify.ts`); what remains here is state that is TRUE for as long as it is shown.
  *
- * **Three fixed fields, in the shell's own left-to-right level order** (§16.2), so the bar restates
- * the containment model on every glance:
+ * **Three fields, in the shell's own left-to-right level order** (§16.2), so the bar restates the
+ * containment model on every glance:
  *
  * ```text
- * PROJECT                        ‖ DOCUMENT                       ‖ SELECTION
- * name · branch ↑n↓n · problems  ‖ path · view · save state       ‖ count · style rule
+ * PROJECT                        ‖ DOCUMENT                           ‖ SELECTION
+ * name · branch ↑n↓n · problems  ‖ file › ancestor › … › element ⌃     ‖ count · style rule
  * ```
  *
- * The SELECTION field held an ancestor breadcrumb until the jump bar landed. The trail is an
- * ADDRESS, not ambient state, and it now lives once — in the jump bar (`panels/jump-bar.ts`), which
- * merged it with the pane context bar's document-stack chain. What is left here is the count and
- * the Stylebook's rule, neither of which is a path.
+ * **The DOCUMENT field is the jump bar** (`panels/jump-bar.ts`): the focused pane's address, every
+ * step a button that selects it. This module renders the fields either side of it and leaves the
+ * middle as an empty `trail` slot, which the jump bar is handed once this document has mounted. The
+ * field used to hold the file path, the view name and a save word; the trail's first step is the
+ * same file path with the same `palette.openFiles` command, the view is the pane context bar's (a
+ * second copy at 11px is the chrome duplication studio-ui-guidelines.md §12.2's budget exists to
+ * prevent), and unsaved changes are stated by the tab strip's dirty marker and the Command Bar's
+ * Save. A trail of ancestors is worth more on this row than any of the three.
  *
  * `statusbar/project`, `statusbar/document` and `statusbar/selection` are three placements the
  * level × placement matrix already declares, each admitting exactly one level — so the bar's
  * mixedness is structural rather than an exemption.
  *
- * **The effective view, not a mode string.** The bar used to print "Content Mode" from
- * `tab.doc.mode` while the Command Bar printed "Design" from `canvasMode` — two surfaces reading
- * two fields to answer one question. Both now read `registry.context()`, which is the same record
- * every `when` predicate reads, so they cannot disagree again.
- *
  * **Every interactive item is a command.** There are no click handlers in this file: an item names
  * a command id, and renders as a button only when the registry has that command and its `when`
  * holds. That is what let an item with no command yet — the peers count, before the `Collaborate:`
  * family was registered — sit in the template and start rendering the day its command arrived, with
- * no edit here. The three readouts that are NOT buttons are marked: the view name (its control is
- * the pane context bar; a second mode picker in 24px would be the chrome duplication
- * studio-ui-guidelines.md §12.2's budget exists to prevent), the save wording once a document IS
- * saved, and the stylebook selector.
+ * no edit here. The one readout that is NOT a button is the stylebook selector.
  *
  * The bar is the `statusbar` surface (`surfaces/statusbar.json`): this module is the projection —
- * three fields of items, each item a button with a command or a readout without — and the surface
- * draws it. The scope is reactive, so one effect recomputes the projection from the state the bar
+ * fields of items, each item a button with a command or a readout without — and the surface draws
+ * it. The scope is reactive, so one effect recomputes the projection from the state the bar
  * renders; nothing repaints.
  *
  * @docs studio/interface
  */
 
 import { projectState, statusbarEl } from "../store";
-import { documentLabel } from "../panels/jump-bar";
+import { attachJumpBarHost, mountJumpBar, unmountJumpBar } from "../panels/jump-bar";
 import { shell } from "../shell";
 import { effect, effectScope, reactive } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
-import { EDITOR_KIND_LABELS } from "../commands/context";
 import { activeRegistry } from "../commands/active-registry";
 import { runReported } from "../commands/run-reported";
 import { deployStatusItem } from "../publish/deploy-checklist";
 import { collabState } from "../collab/collab-state";
 import { problemCount, problems } from "../services/notify";
-import { now } from "../services/clock";
-import { relativeTime } from "../panels/ai-chat/sessions-view";
 import { mountSurface, registerSurface } from "../ui/surface";
 import statusbarDoc from "./statusbar.json";
 import type { CommandRegistry } from "../commands/registry";
-import type { EditorKind } from "../commands/context";
 import type { EffectScope } from "@vue/reactivity";
 import type { JxDocument } from "@jxsuite/schema/types";
 import type { SurfaceHandle } from "../ui/surface";
@@ -71,28 +63,6 @@ registerSurface("statusbar", statusbarDoc as unknown as JxDocument);
 
 let _scope: EffectScope | null = null;
 
-/**
- * Document path → when it was last written, from the {@link now} seam.
- *
- * Kept here rather than on the `Tab` record for one reason: a save time is something the STATUS BAR
- * observes, not something a document is. `files/file-ops.ts` reports it after a successful write —
- * the same place the old `statusMessage("Saved …")` was raised from, so the fact has not moved, it
- * has only stopped being a message that erases itself.
- */
-const _savedAt = new Map<string, number>();
-
-/** Record a successful write. Called by the save path; keyed by document path. */
-export function noteDocumentSaved(path: string | null | undefined): void {
-  if (path) {
-    _savedAt.set(path, now());
-  }
-}
-
-/** Forget every recorded save. Project close and the tests both want a clean slate. */
-export function forgetSavedTimes(): void {
-  _savedAt.clear();
-}
-
 // ─── Items ───────────────────────────────────────────────────────────────────
 
 /** One thing the bar can show. A `command` makes it a button; without one it is a readout. */
@@ -248,81 +218,18 @@ function projectField_(registry: CommandRegistry | null): ProjectedField | null
   ]);
 }
 
-// ─── DOCUMENT ────────────────────────────────────────────────────────────────
-
-/**
- * What the pane is showing, in the words the pane context bar uses.
- *
- * Derived from the command context — `editor.kind` and `canvas.view` — so it is the SAME two facts
- * the Command Bar, the keyboard scope stack and every `when` predicate read.
- */
-export function viewLabel(kind: EditorKind, view: string): string {
-  if (kind === "none") {
-    return "";
-  }
-  if (kind !== "canvas") {
-    return EDITOR_KIND_LABELS[kind];
-  }
-  return view.charAt(0).toUpperCase() + view.slice(1);
-}
-
-/**
- * The save state, in words.
- *
- * A dot glyph said one bit and required a legend nobody has. These four sentences say which of the
- * four states the document is in, and the one that needs an action IS the action: "Unsaved changes"
- * renders as the `file.save` button.
- */
-function saveItem(dirty: boolean, readOnly: boolean, savedAt: number | undefined): StatusItem {
-  if (readOnly) {
-    return { command: null, label: "Read-only", title: "A collaborator owns this session's file" };
-  }
-  if (dirty) {
-    return { command: "file.save", label: "Unsaved changes" };
-  }
-  return savedAt === undefined
-    ? { command: null, label: "Saved" }
-    : { command: null, label: `Saved ${relativeTime(savedAt)}` };
-}
-
-function documentField(registry: CommandRegistry | null): ProjectedField | null {
-  const tab = activeTab.value;
-  if (!tab) {
-    return null;
-  }
-  const ctx = registry?.context() ?? null;
-  const view = ctx ? viewLabel(ctx.editor.kind, ctx.canvas.view) : "";
-  const collab = collabState(tab);
-  const savedAt = tab.documentPath === null ? undefined : _savedAt.get(tab.documentPath);
-  return projectField(registry, "document", [
-    {
-      command: "palette.openFiles",
-      label: documentLabel(tab.documentPath),
-      title: tab.documentPath ?? "Not saved to disk yet",
-    },
-    view
-      ? { command: null, label: view, title: "The pane's view — change it on the pane context bar" }
-      : null,
-    saveItem(tab.doc.dirty, collab.readOnly, savedAt),
-  ]);
-}
-
 // ─── SELECTION ───────────────────────────────────────────────────────────────
 
 /**
  * What is selected — the COUNT, and nothing that is an address.
  *
- * This field used to carry a clickable ancestor trail, one `selection.set` per crumb. That trail
- * has moved whole to the jump bar (`panels/jump-bar.ts`), which is the jump bar's entire reason to
- * exist: Studio had two half-breadcrumbs — that one, and the pane context bar's document-stack
- * chain — and neither ever rendered the whole address. Leaving a copy here would have made three.
- *
- * What is left is what the jump bar CANNOT say, and both are ambient state in the §16.2 sense: how
- * many things are selected (a count is not a path, and the jump bar names only the primary), and
- * which style rule the Stylebook is editing (a CSS selector is not a node in this document).
+ * The ancestor trail is the DOCUMENT field to its left (`panels/jump-bar.ts`). What is left here is
+ * what a trail CANNOT say, and both are ambient state in the §16.2 sense: how many things are
+ * selected (a count is not a path, and the jump bar names only the primary), and which style rule
+ * the Stylebook is editing (a CSS selector is not a node in this document).
  *
- * A single selection therefore leaves this field empty. That is deliberate — the jump bar's leaf
- * segment states it permanently, with its ancestors, and a second copy at 11px says nothing new.
+ * A single selection therefore leaves this field empty. That is deliberate — the trail's leaf
+ * states it permanently, with its ancestors, one field to the left.
  */
 function selectionField(registry: CommandRegistry | null): ProjectedField | null {
   const paths = activeTab.value?.session.selection ?? [];
@@ -334,7 +241,7 @@ function selectionField(registry: CommandRegistry | null): ProjectedField | null
           {
             command: null,
             label: `${paths.length} selected`,
-            title: `${paths.length} elements are selected; the jump bar names the primary`,
+            title: `${paths.length} elements are selected; the trail names the primary`,
           },
         ])
       : null;
@@ -354,16 +261,18 @@ function selectionField(registry: CommandRegistry | null): ProjectedField | null
 
 // ─── The bar ─────────────────────────────────────────────────────────────────
 
-/** The whole bar, as data. There is no second variant for the empty states. */
-function projectBar(): ProjectedField[] {
-  const registry = activeRegistry();
-  return [projectField_(registry), documentField(registry), selectionField(registry)].filter(
-    (field): field is ProjectedField => field !== null,
-  );
+/** Drop the absent fields. */
+function present(fields: readonly (ProjectedField | null)[]): ProjectedField[] {
+  return fields.filter((field): field is ProjectedField => field !== null);
 }
 
 interface StatusbarScope extends Record<string, unknown> {
-  fields: ProjectedField[];
+  /** The fields before the DOCUMENT slot: PROJECT. */
+  leading: ProjectedField[];
+  /** Whether the DOCUMENT slot has a trail to show. */
+  hasDocument: boolean;
+  /** The fields after it: SELECTION. */
+  trailing: ProjectedField[];
   run: (key: string) => void;
 }
 
@@ -374,26 +283,40 @@ let _handle: SurfaceHandle | null = null;
 /** The reactive scope the surface reads, made once. */
 function state(): StatusbarScope {
   _state ??= reactive({
-    fields: [],
+    hasDocument: false,
+    leading: [],
     run: (key: string) => {
-      const item = _state?.fields.flatMap((field) => field.items).find((i) => i.key === key);
+      const item = [...(_state?.leading ?? []), ...(_state?.trailing ?? [])]
+        .flatMap((field) => field.items)
+        .find((i) => i.key === key);
       const registry = activeRegistry();
       if (item?.command && registry) {
         void runReported(registry, item.command, item.args as never, "Status Bar");
       }
     },
+    trailing: [],
   }) as StatusbarScope;
   return _state;
 }
 
-/** Mount the surface into the bar's host, once. */
+/**
+ * Mount the surface into the bar's host, once, and hand its DOCUMENT slot to the jump bar.
+ *
+ * The slot is a box this document draws empty; the jump bar mounts its own document into it, which
+ * is the same hand-over the pane grid gives the tab strip and the context bar.
+ */
 function ensureMounted(): void {
   if (_mount || !statusbarEl) {
     return;
   }
-  _mount = mountSurface("statusbar", state(), statusbarEl);
-  void _mount.then((handle) => {
+  const mount = mountSurface("statusbar", state(), statusbarEl);
+  _mount = mount;
+  void mount.then((handle) => {
+    if (_mount !== mount) {
+      return;
+    }
     _handle = handle;
+    attachJumpBarHost(statusbarEl.querySelector<HTMLElement>('[part="trail"]'));
   });
 }
 
@@ -402,13 +325,23 @@ function ensureMounted(): void {
  * mounting the effect.
  */
 export function renderStatusbar(): void {
-  state().fields = projectBar();
+  const registry = activeRegistry();
+  const scope = state();
+  scope.leading = present([projectField_(registry)]);
+  scope.hasDocument = activeTab.value !== null;
+  scope.trailing = present([selectionField(registry)]);
   ensureMounted();
 }
 
-/** Subscribe the bar to the state it renders. Idempotent. */
+/**
+ * Subscribe the bar to the state it renders, and its DOCUMENT field's trail with it. Idempotent.
+ *
+ * The trail is this bar's field, so this bar owns its lifecycle: the jump bar's effect starts here
+ * and stops in {@link unmountStatusbar}, and its host arrives from {@link ensureMounted}.
+ */
 export function mountStatusbar(): void {
   unmountStatusbar();
+  mountJumpBar();
   _scope = effectScope();
   _scope.run(() => {
     effect(() => {
@@ -420,15 +353,8 @@ export function mountStatusbar(): void {
       void problems.length;
       const tab = activeTab.value;
       if (tab) {
-        void tab.doc.document;
-        void tab.doc.dirty;
-        void tab.doc.mode;
-        void tab.documentPath;
-        void tab.session.selection.map((path) => path.join("/")).join("|");
-        void tab.session.ui.canvasMode;
-        void tab.session.ui.preview;
+        void tab.session.selection.length;
         void collabState(tab).peers.length;
-        void collabState(tab).readOnly;
       }
       renderStatusbar();
     });
@@ -440,6 +366,7 @@ export function unmountStatusbar(): void {
   _scope = null;
   const pending = _mount;
   _mount = null;
+  unmountJumpBar();
   if (_handle) {
     _handle.dispose();
     _handle = null;

package/src/surfaces/style-panel.json

@@ -1013,6 +1013,7 @@
                                         {
                                           "tagName": "jx-action-group",
                                           "$props": {
+                                            "selects": "single",
                                             "compact": true,
                                             "label": {
                                               "$ref": "$map/item/label"
@@ -1044,9 +1045,8 @@
                                                   "hint": {
                                                     "$ref": "$map/item/title"
                                                   },
-                                                  "toggles": true,
-                                                  "selected": {
-                                                    "$ref": "$map/item/selected"
+                                                  "checked": {
+                                                    "$ref": "$map/item/checked"
                                                   }
                                                 },
                                                 "onclick": {

package/src/surfaces/style-panel.ts

@@ -108,7 +108,17 @@ export interface StyleButtonView extends Record<string, unknown> {
   icon: string;
   /** The abbreviation drawn when there is no glyph. Empty when there is one, and its span hidden. */
   text: string;
-  selected: boolean;
+  /**
+   * `"true"` / `"false"` — a row's buttons are RADIOS, one choice of several, and never toggles.
+   *
+   * The value is a fact about the document, so the button may draw it and must not decide it. With
+   * the kit's `toggles` on, the button flipped its own `selected` in a click listener that ran
+   * AFTER the row's: a real click flushes microtasks between listeners, so the projection had
+   * already drawn the committed value when the flip inverted it, and Display read unset after
+   * pressing Flex and set after pressing it again. `checked` draws the state without the button
+   * ever writing it.
+   */
+  checked: "true" | "false";
 }
 
 /**

package/dist/chunks/adapter-6zhjbpmd.js

@@ -1,4 +0,0 @@
-import{zs,Ws,gs}from"./studio-7w04zw8h.js";export{gs as draggable,zs as dropTargetForElements,Ws as monitorForElements};
-
-//# debugId=EB4AE5E5C16F5E1A64756E2164756E21
-//# sourceMappingURL=adapter-6zhjbpmd.js.map

package/dist/chunks/cf-settings-fpa485q3.js

@@ -1,4 +0,0 @@
-import{Df,D_,A_,v$,N_}from"./studio-vz7b43ng.js";import"./studio-tj28pxa1.js";import"./studio-6k1eswp9.js";import"./studio-0nm2skex.js";export{N_ as clearCfConnection,A_ as getCfAccountId,Df as getCfToken,v$ as setCfAccountId,D_ as setCfToken};
-
-//# debugId=88A9B73C42F1EA0C64756E2164756E21
-//# sourceMappingURL=cf-settings-fpa485q3.js.map

package/dist/chunks/components-b0vh4sq8.js

@@ -1,4 +0,0 @@
-import{at,Dl,FC,fm,xc}from"./studio-y164brht.js";import"./studio-6k1eswp9.js";export{fm as buildComponentInstance,at as componentRegistry,xc as computeRelativePath,Dl as loadComponentRegistry,FC as noteComponentSaved};
-
-//# debugId=1441451654480D2F64756E2164756E21
-//# sourceMappingURL=components-b0vh4sq8.js.map

package/dist/chunks/content-source-z5t0d0h9.js

@@ -1,4 +0,0 @@
-import{vb,Pw,I1,R1,$1,D1}from"./studio-4yztve2t.js";import"./studio-eb5sty2k.js";import"./studio-b5rxwkj2.js";import"./studio-02y9cb4h.js";import"./studio-sgzss898.js";import"./studio-sadckcpp.js";import"./studio-28pz4s1k.js";import"./studio-njmg0e73.js";import"./studio-81twpmzj.js";import"./studio-pvj970st.js";import"./studio-w8w9frjy.js";import"./studio-y164brht.js";import"./studio-tj28pxa1.js";import"./studio-ant1zbp3.js";import"./studio-011em5cf.js";import"./studio-k9pwvmz8.js";import"./studio-27tc8q0h.js";import"./studio-654fxcr0.js";import"./studio-7w04zw8h.js";import"./studio-ft8pfpp0.js";import"./studio-6k1eswp9.js";import"./studio-ks0ecgjx.js";import"./studio-z1vdxq0e.js";import"./studio-dmymvk2j.js";import"./studio-dknr8m7b.js";import"./studio-b29h7g7s.js";import"./studio-ery42sqr.js";import"./studio-0nm2skex.js";export{Pw as collectionDirs,vb as collectionInfo,$1 as createCollectionSource,D1 as createPagesSource,I1 as listCollectionEntryIds,R1 as reloadDraftAwareGrids};
-
-//# debugId=43775DBD531D604D64756E2164756E21
-//# sourceMappingURL=content-source-z5t0d0h9.js.map