@jxsuite/studio 2.0.0 → 2.1.0

package/src/panels/statement-editor.ts

@@ -9,6 +9,13 @@
  * editor's `border-left` nesting idiom) with their own add-statement pickers. Cards drag-reorder
  * within their lane via the pragmatic-drag-and-drop tree-item pattern (see panels/dnd.ts). All
  * edits flow through `onChange(next)` immutably — no statement object is mutated in place.
+ *
+ * **The layout is CSS, in `styles/inspector.css` (§ "The statement editor").** Every frame, indent
+ * and connector here used to be an inline `style=` attribute, so nothing in the chain could set
+ * `min-width: 0` and the operand controls refused to shrink: in a 280px Inspector an If/Else card
+ * pushed Operator, Target and Value past the right edge of the window. This editor has two hosts of
+ * very different widths — the Navigator's State panel and the Inspector's Events tab — plus the
+ * Bottom dock, so a fixed pixel layout is wrong by construction and only a stylesheet can say so.
  */
 
 import { html, nothing } from "lit-html";
@@ -42,6 +49,24 @@ export interface StatementEditorOpts {
   allowEventRef: boolean;
   /** The entry's declared CEM events — offered as dispatchEvent name completions. */
   emits?: CemEvent[];
+  /**
+   * The region id of THIS editor, supplied by the surface that is drawing it.
+   *
+   * Required, and required of every host, which is the point. The editor used to hard-stamp
+   * `navigator/statements` on itself, and it has two hosts that can be open at the same time — the
+   * Navigator's State panel (`signals-panel.ts`) and the INSPECTOR's Events tab
+   * (`events-panel.ts`). `resolveRegion` takes the last match in document order and `#right-panel`
+   * follows `#left-panel`, so the id resolved to the Inspector's editor while saying Navigator, and
+   * the shot that crops it cropped the wrong control.
+   *
+   * A shared control cannot know where it is, so it may not claim to. This is the same verdict
+   * `ui/regions.ts`'s `DERIVED_RESOLVERS` records for the media picker's Browse button — _an
+   * `inspector/…` id on an element outside the Inspector is not a pane-scoping problem, it is a
+   * wrong id_ — reached the other way round: the picker's id is derived from the Inspector because
+   * nothing addresses the card's copies, whereas both statement editors are real surfaces that
+   * deserve names, so the HOST names them.
+   */
+  region: string;
 }
 
 /**
@@ -120,7 +145,13 @@ export function laneListAt(list: JxStatement[], path: LanePath): JxStatement[] |
     return list;
   }
   const [idx, key] = path;
-  const stmt = typeof idx === "number" ? (list[idx] as Record<string, unknown> | undefined) : null;
+  /*
+   * `unknown`, not a cast to `Record<string, unknown>`. A `JxStatement` is a union of interfaces
+   * with no index signature, so asserting one into an open bag is a lie TypeScript rightly refuses
+   * — and it was buying nothing, because `isJsonObject` takes `unknown` and narrows to exactly the
+   * open bag this wants. The guard on the next line is the real check either way.
+   */
+  const stmt: unknown = typeof idx === "number" ? list[idx] : null;
   if (!isJsonObject(stmt) || typeof key !== "string") {
     return null;
   }
@@ -292,9 +323,6 @@ function registerStatementsDnD(
 
 // ─── Small shared widgets ────────────────────────────────────────────────────
 
-const laneLabelStyle =
-  "font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--spectrum-gray-600, #808080)";
-
 function operandOpts(opts: StatementEditorOpts) {
   return {
     allowEventRef: opts.allowEventRef,
@@ -346,9 +374,9 @@ function renderLane(
   extras: { onRemove?: () => void } = {},
 ): TemplateResult {
   return html`
-    <div class="statement-lane" style="margin:4px 0 4px 6px">
-      <div class="statement-lane-header" style="display:flex;align-items:center;gap:4px">
-        <span style=${laneLabelStyle}>${label}</span>
+    <div class="statement-lane">
+      <div class="statement-lane-header">
+        <span class="statement-lane-label">${label}</span>
         ${
           extras.onRemove
             ? html`
@@ -453,7 +481,6 @@ function renderSwitchBody(
           <sp-textfield
             size="s"
             class="statement-case-key"
-            style="width:96px"
             placeholder="value"
             .value=${live(key)}
             @change=${(e: Event) => {
@@ -543,7 +570,6 @@ function renderDispatchBody(
                 size="s"
                 allows-custom-value
                 class="statement-dispatch-name"
-                style="flex:1"
                 .value=${live(stmt.dispatchEvent ?? "")}
                 @change=${commitName}
               >
@@ -554,7 +580,6 @@ function renderDispatchBody(
               <sp-textfield
                 size="s"
                 class="statement-dispatch-name"
-                style="flex:1"
                 placeholder="event-name"
                 .value=${live(stmt.dispatchEvent ?? "")}
                 @input=${commitName}
@@ -576,7 +601,7 @@ function renderDispatchBody(
       label: "Options",
       prop: "eventInit",
       widget: html`
-        <div style="display:flex;gap:12px;align-items:center">
+        <div class="statement-dispatch-options">
           <sp-checkbox
             size="s"
             class="statement-dispatch-bubbles"
@@ -641,17 +666,10 @@ function renderStatementCard(
       data-stmt-kind=${kind}
       data-stmt-lane=${JSON.stringify(lanePath)}
       data-stmt-index=${index}
-      style="border:1px solid var(--spectrum-gray-300, #3c3c3c);border-radius:4px;padding:4px 6px;margin:0 0 6px;background:var(--spectrum-gray-75, #1e1e1e)"
     >
-      <div class="statement-card-header" style="display:flex;align-items:center;gap:6px">
-        <span
-          class="statement-drag-handle"
-          title="Drag to reorder"
-          style="cursor:grab;color:var(--spectrum-gray-500, #6e6e6e);font-size:11px;line-height:1;user-select:none"
-          >⠿</span
-        >
-        <span class="statement-kind-label" style=${laneLabelStyle}>${kindLabel(stmt)}</span>
-        <span style="flex:1"></span>
+      <div class="statement-card-header">
+        <span class="statement-drag-handle" title="Drag to reorder">⠿</span>
+        <span class="statement-kind-label">${kindLabel(stmt)}</span>
         <sp-action-button
           quiet
           size="xs"
@@ -675,10 +693,7 @@ function renderStatementList(
   lanePath: LanePath,
 ): TemplateResult {
   return html`
-    <div
-      class="statement-list"
-      style="margin-left:4px;border-left:2px solid var(--spectrum-gray-300, #3c3c3c);padding:2px 0 0 8px"
-    >
+    <div class="statement-list">
       ${list.map((stmt, index) =>
         renderStatementCard(stmt, index, list, commitList, opts, lanePath),
       )}
@@ -702,6 +717,7 @@ export function renderStatementEditor(
   return html`
     <div
       class="statement-editor"
+      data-jx-region=${opts.region}
       ${ref((el) => {
         if (el) {
           registerStatementsDnD(el as HTMLElement, safe, onChange);

package/src/panels/statusbar.ts

@@ -1,140 +1,376 @@
 /// <reference lib="dom" />
-/** Statusbar — status message display for Jx Studio */
+/**
+ * ⑫ The status bar — ambient state, in scope order, and nothing else.
+ *
+ * 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** (plan §3.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
+ * ```
+ *
+ * The SELECTION field held an ancestor breadcrumb until region ⑥ 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.
+ *
+ * `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 lets an item that has no command yet — the peers count, whose `Collaborate:`
+ * family lands with P4.8 — sit in the template today and start rendering the day it is registered,
+ * 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 §2
+ * principle 9 exists to prevent), the save wording once a document IS saved, and the stylebook
+ * selector.
+ */
 
-import { getNodeAtPath, nodeLabel, renderOnly, statusbarEl, updateSession } from "../store";
+import { html, render as litRender, nothing } from "lit-html";
+import { projectState, statusbarEl } from "../store";
+import { documentLabel } from "./jump-bar";
+import { shell } from "../shell";
 import { effect, effectScope } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
-import type { JxPath } from "../state";
+import { EDITOR_KIND_LABELS } from "../commands/context";
+import { activeRegistry } from "../commands/active-registry";
+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 "./ai-chat/sessions-view";
+import type { CommandRegistry } from "../commands/registry";
+import type { EditorKind } from "../commands/context";
 import type { EffectScope } from "@vue/reactivity";
+import type { TemplateResult } from "lit-html";
 
-// ─── Module state ────────────────────────────────────────────────────────────
-
-let statusMsg = "";
-/** @type {ReturnType<typeof setTimeout> | undefined} */
-let statusTimeout: ReturnType<typeof setTimeout> | undefined;
-let _rerender: (() => void) | null = null;
 let _scope: EffectScope | null = null;
 
 /**
- * Register the callback used to re-render the statusbar. Called once from studio.js during init.
+ * Document path → when it was last written, from the {@link now} seam.
  *
- * @param {() => void} fn
+ * 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.
  */
-export function setStatusbarRenderer(fn: () => void) {
-  _rerender = fn;
+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());
+  }
 }
 
-/** Subscribe the statusbar to state changes via reactive effect. */
-export function mountStatusbar() {
-  _scope = effectScope();
-  _scope.run(() => {
-    effect(() => {
-      const tab = activeTab.value;
-      if (!tab) {
-        return;
-      }
-      // Track relevant reactive properties
-      void tab.doc.document;
-      void tab.doc.mode;
-      void tab.session.selection;
-      void tab.session.ui.stylebookSelection;
-      renderStatusbar();
-    });
-  });
+/** Forget every recorded save. Project close and the tests both want a clean slate. */
+export function forgetSavedTimes(): void {
+  _savedAt.clear();
+}
 
-  statusbarEl?.addEventListener("click", _onStatusbarClick);
+// ─── Items ───────────────────────────────────────────────────────────────────
+
+/** One thing the bar can show. A `command` makes it a button; without one it is a readout. */
+interface StatusItem {
+  /** Command id, or `null` for a pure readout. */
+  command: string | null;
+  label: string;
+  /** Extra context for the tooltip. The command's own title and chord are added to it. */
+  title?: string;
+  args?: Record<string, unknown>;
 }
 
-export function unmountStatusbar() {
-  _scope?.stop();
-  _scope = null;
-  statusbarEl?.removeEventListener("click", _onStatusbarClick);
+/**
+ * Render one item.
+ *
+ * A named command that the registry does not have, or whose `when` is false, renders NOTHING — the
+ * item disappears rather than becoming a dead label. That is the whole mechanism by which the bar
+ * stays a rendering of the registry instead of a second place capabilities are decided.
+ */
+function itemTpl(registry: CommandRegistry | null, item: StatusItem) {
+  if (item.command === null) {
+    return html`<span class="sb-item sb-state" title=${item.title ?? item.label}
+      >${item.label}</span
+    >`;
+  }
+  const id = item.command;
+  if (!registry?.get(id) || !registry.isVisible(id)) {
+    return nothing;
+  }
+  const command = registry.get(id)!;
+  const reason = registry.disabledReason(id);
+  const chord = registry.keymap.formatBinding(id);
+  const suffix = reason
+    ? `${command.title} — requires ${reason}`
+    : chord
+      ? `${command.title} (${chord})`
+      : command.title;
+  return html`<button
+    class="sb-item"
+    ?disabled=${reason !== undefined}
+    title=${item.title ? `${item.title} · ${suffix}` : suffix}
+    @click=${() => {
+      void registry.run(id, item.args);
+    }}
+  >
+    ${item.label}
+  </button>`;
 }
 
-// ─── Statusbar ───────────────────────────────────────────────────────────────
+/** What {@link itemTpl} returns: a rendered item, or the absence of one. */
+type ItemResult = TemplateResult | typeof nothing;
 
-/** @param {string} text */
-function esc(text: string) {
-  return String(text).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+/** A field, with its region stamp. Renders nothing at all when it has no items. */
+function fieldTpl(region: string, items: readonly ItemResult[]) {
+  const live = items.filter((item): item is TemplateResult => item !== nothing);
+  if (live.length === 0) {
+    return nothing;
+  }
+  return html`<div class="sb-field" data-jx-region=${region}>${live}</div>`;
 }
 
-/** Render the statusbar content. */
-export function renderStatusbar() {
-  const tab = activeTab.value;
-  const parts = [];
-  if (tab?.doc.mode === "content") {
-    parts.push("Content Mode");
-  }
-  if (tab?.session.selection?.length) {
-    const sel = tab.session.selection as JxPath;
-    const node = getNodeAtPath(tab.doc.document, sel);
-    parts.push(`Selected: ${esc(nodeLabel(node))}`);
-
-    // Walk the path one structural step at a time. Most steps are `["children", index]` or
-    // `["cases", name]` pairs, but a repeater template is reached by a lone `"map"` segment — so the
-    // Step width varies. Emitting a crumb per node keeps the array pseudo-element ("Repeater") and
-    // Its template both visible instead of collapsing the array into a bare `[index]`.
-    const pathSegments = [];
-    for (let i = 0; i < sel.length;) {
-      const seg = sel[i];
-      const step = seg === "map" ? 1 : 2;
-      const subPath = sel.slice(0, i + step);
-      const childNode = getNodeAtPath(tab.doc.document, subPath);
-      const fallbackTag = childNode?.tag;
-      const label =
-        childNode?.$prototype === "Array"
-          ? "Repeater"
-          : childNode?.tagName ||
-            (typeof fallbackTag === "string" ? fallbackTag : "") ||
-            (seg === "cases" ? String(sel[i + 1]) : `[${sel[i + 1]}]`);
-      const dataPath = JSON.stringify(subPath);
-      pathSegments.push(
-        `<span class="sb-path-seg" data-path='${esc(dataPath)}'>${esc(label)}</span>`,
-      );
-      i += step;
-    }
-    parts.push(`Path: ${pathSegments.join(' <span class="sb-path-sep">&gt;</span> ')}`);
-  } else if (tab?.session.ui.stylebookSelection) {
-    const sel = tab.session.ui.stylebookSelection;
-    parts.push(`Style: ${esc(sel.replaceAll(" ", " > "))}`);
+// ─── ⑫a PROJECT ──────────────────────────────────────────────────────────────
+
+/** `↑2↓1`, or "" when the branch is level with its upstream. */
+export function aheadBehindLabel(ahead: number, behind: number): string {
+  return `${ahead > 0 ? ` ↑${ahead}` : ""}${behind > 0 ? ` ↓${behind}` : ""}`;
+}
+
+function projectFieldTpl(registry: CommandRegistry | null) {
+  const project = projectState;
+  const { status } = shell.git;
+  const count = problemCount();
+  const deploy = deployStatusItem();
+  const peers = activeTab.value ? collabState(activeTab.value).peers.length : 0;
+  return fieldTpl("statusbar/project", [
+    project
+      ? itemTpl(registry, { command: "project.openRecent", label: project.name })
+      : itemTpl(registry, { command: "project.open", label: "No project" }),
+    /* WHICH branch, when there is one — and deliberately no "not tracked" twin, though plan §12 P1
+       workstream 9's "repo state becomes a persistent status-bar field" reads like a request for
+       one. An untracked project already states itself in this field, one item along:
+       `deployStatusItem()`'s first link is `repo`, whose label is "Track this project with git" and
+       whose command is `git.init`. A second item beside it would carry no fact the first does not
+       — "Not tracked" and "Track this project with git" answer the same question with the same verb
+       — and adjacent duplicate chrome is what §2 principle 9 forbids. `tests/statusbar.test.ts`
+       pins the pairing from both ends, so deleting the checklist's repo step fails there rather
+       than quietly taking the state off the bar. */
+    status?.isRepo === true && status.branch
+      ? itemTpl(registry, {
+          command: "panel.focus.git",
+          label: `⑂ ${status.branch}${aheadBehindLabel(status.ahead, status.behind)}`,
+          title: `${status.files.length} changed file(s)`,
+        })
+      : nothing,
+    // Where the project stands with shipping — ambient state, so it belongs beside the branch and
+    // The problem count rather than in a toast. `deployStatusItem` names the NEXT missing step
+    // While anything is missing, and the deployment itself once nothing is.
+    deploy
+      ? itemTpl(registry, {
+          command: deploy.command,
+          label: deploy.label,
+          title: deploy.title,
+        })
+      : nothing,
+    // `view.setBottomTab`, not `panel.focus.problems`: the latter is generated from the rail
+    // Roster, and Problems left the rail. That is the same verb Diff, Logic and Activity are
+    // Addressed by — one door per bottom tab — and it is what keeps this readout the ONLY standing
+    // Mention of problems in the chrome, which is the point of taking the rail button away.
+    count > 0
+      ? itemTpl(registry, {
+          args: { tab: "problems" },
+          command: "view.setBottomTab",
+          label: `⚠ ${count}`,
+          title: `${count} problem(s)`,
+        })
+      : nothing,
+    /* `collab.showStatus` — "what is happening in this document?" — because that is the question a
+       peer count raises.
+
+       This said `collab.share` and carried a comment promising the item would "appear the day the
+       `Collaborate:` family lands, with no edit to this file". The family landed, under five ids,
+       and `share` was renamed `collab.setEnabled` on the way (the set*-not-toggle* rule). `itemTpl`
+       renders `nothing` for an id the registry does not have, so the readout was permanently blank
+       and the comment said it was fine. An id is not a stable interface between two files unless
+       something checks it, which is what `tests/statusbar.test.ts` now does. */
+    peers > 0
+      ? itemTpl(registry, {
+          command: "collab.showStatus",
+          label: `${peers} peer${peers === 1 ? "" : "s"}`,
+          title: `${peers} peer${peers === 1 ? "" : "s"} in this document`,
+        })
+      : nothing,
+  ]);
+}
+
+// ─── ⑫b 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 (statusMsg) {
-    parts.push(esc(statusMsg));
+  if (kind !== "canvas") {
+    return EDITOR_KIND_LABELS[kind];
   }
-  statusbarEl.innerHTML = parts.join("  |  ") || "Jx Studio";
+  return view.charAt(0).toUpperCase() + view.slice(1);
 }
 
-/** @param {Event} e */
-function _onStatusbarClick(e: Event) {
-  const target = e.target as HTMLElement;
-  if (!target.classList.contains("sb-path-seg")) {
-    return;
+/**
+ * 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" };
   }
-  const pathStr = target.dataset.path;
-  if (!pathStr) {
-    return;
+  if (dirty) {
+    return { command: "file.save", label: "Unsaved changes" };
   }
-  try {
-    const path = JSON.parse(pathStr) as JxPath;
-    updateSession({ selection: path });
-    renderOnly("leftPanel", "rightPanel", "canvas");
-  } catch {
-    // Ignore
+  return savedAt === undefined
+    ? { command: null, label: "Saved" }
+    : { command: null, label: `Saved ${relativeTime(savedAt)}` };
+}
+
+function documentFieldTpl(registry: CommandRegistry | null) {
+  const tab = activeTab.value;
+  if (!tab) {
+    return nothing;
   }
+  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 fieldTpl("statusbar/document", [
+    itemTpl(registry, {
+      command: "palette.openFiles",
+      label: documentLabel(tab.documentPath),
+      title: tab.documentPath ?? "Not saved to disk yet",
+    }),
+    view
+      ? itemTpl(registry, {
+          command: null,
+          label: view,
+          title: "The pane's view — change it on the pane context bar",
+        })
+      : nothing,
+    itemTpl(registry, saveItem(tab.doc.dirty, collab.readOnly, savedAt)),
+  ]);
 }
 
+// ─── ⑫c SELECTION ────────────────────────────────────────────────────────────
+
 /**
- * Show a temporary status message.
+ * 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 region ⑥'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.
  *
- * @param {string} msg
- * @param {number} [duration]
+ * 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).
+ *
+ * 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.
  */
-export function statusMessage(msg: string, duration = 3000) {
-  statusMsg = msg;
-  _rerender?.();
-  clearTimeout(statusTimeout);
-  statusTimeout = setTimeout(() => {
-    statusMsg = "";
-    _rerender?.();
-  }, duration);
+function selectionFieldTpl(registry: CommandRegistry | null) {
+  const paths = activeTab.value?.session.selection ?? [];
+  if (paths.length > 0) {
+    // A document selection owns the field even when it prints nothing: the Stylebook's selector
+    // Below would otherwise appear while an element is picked, which is two answers to one question.
+    return paths.length > 1
+      ? fieldTpl("statusbar/selection", [
+          itemTpl(registry, {
+            command: null,
+            label: `${paths.length} selected`,
+            title: `${paths.length} elements are selected; the jump bar names the primary`,
+          }),
+        ])
+      : nothing;
+  }
+  // The stylebook's own selection is a selection: it is what the Style panel is editing, and it is
+  // The only thing in this field when no document node is picked.
+  return shell.stylebook.selection
+    ? fieldTpl("statusbar/selection", [
+        itemTpl(registry, {
+          command: null,
+          label: shell.stylebook.selection.replaceAll(" ", " › "),
+          title: "The style rule being edited",
+        }),
+      ])
+    : nothing;
+}
+
+// ─── The bar ─────────────────────────────────────────────────────────────────
+
+/** The whole bar, as one template. There is no second variant for the empty states. */
+export function statusbarTemplate() {
+  const registry = activeRegistry();
+  return html`${projectFieldTpl(registry)}${documentFieldTpl(registry)}${selectionFieldTpl(
+    registry,
+  )}`;
+}
+
+/** Paint the bar. Exported because the bootstrap paints once before mounting the effect. */
+export function renderStatusbar(): void {
+  if (statusbarEl) {
+    litRender(statusbarTemplate(), statusbarEl);
+  }
+}
+
+/** Subscribe the bar to the state it renders. Idempotent. */
+export function mountStatusbar(): void {
+  unmountStatusbar();
+  _scope = effectScope();
+  _scope.run(() => {
+    effect(() => {
+      // The registry is composed AFTER the bootstrap mounts this, and it is a reactive holder —
+      // Reading it here is what repaints the bar from a skeleton into the real thing.
+      void activeRegistry();
+      void shell.stylebook.selection;
+      void shell.git.status;
+      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 collabState(tab).peers.length;
+        void collabState(tab).readOnly;
+      }
+      renderStatusbar();
+    });
+  });
+}
+
+export function unmountStatusbar(): void {
+  _scope?.stop();
+  _scope = null;
 }