@jxsuite/studio 6.1.1 → 8.0.0

package/src/panels/quick-search.ts

@@ -31,6 +31,7 @@
  * find-replace in those two call sites.
  */
 
+import { isJsonPrimitive, isString } from "@jxsuite/schema/guards";
 import { getPlatform } from "../platform";
 import { flattenTree, nodeLabel, projectState } from "../store";
 import { documentExtensions, formatByExtension, loadFormats } from "../format/format-host";
@@ -45,7 +46,7 @@ import { activeRegistry } from "../commands/active-registry";
 import { runActiveReported, runReported } from "../commands/run-reported";
 import type { PaletteMode } from "../commands/defaults";
 import type { AnyCommand, CommandRegistry } from "../commands/registry";
-import type { JxDocument, JxMutableNode } from "@jxsuite/schema/types";
+import type { CommandArgValues } from "../commands/command-args";
 import type { SurfaceHandle } from "../ui/surface";
 import type { JxPath } from "../state";
 
@@ -123,6 +124,12 @@ export function modeSpec(mode: PaletteMode): PaletteModeSpec {
   return MODE_SPEC.get(mode) ?? PALETTE_MODES[0]!;
 }
 
+/** The mode an input resolves to, and the query left once a prefix has moved into the chip. */
+export interface ResolvedPaletteMode {
+  mode: PaletteMode;
+  query: string;
+}
+
 /**
  * The mode a raw input actually addresses.
  *
@@ -139,7 +146,7 @@ export function resolvePaletteMode(
   requested: PaletteMode,
   raw: string,
   projectOpen: boolean,
-): { mode: PaletteMode; query: string } {
+): ResolvedPaletteMode {
   const prefixed = PREFIXED_MODES.find((spec) => raw.startsWith(spec.prefix));
   if (prefixed) {
     return resolvePaletteMode(prefixed.mode, raw.slice(1), projectOpen);
@@ -220,7 +227,7 @@ export function rankBy<T>(items: readonly T[], query: string, key: (item: T) =>
 
 /** One offered value for a command's single argument. */
 export interface PaletteArgChoice {
-  value: unknown;
+  value: string | boolean;
   label: string;
 }
 
@@ -230,11 +237,6 @@ export type PaletteArgs =
   | { kind: "choice"; name: string; choices: PaletteArgChoice[] }
   | { kind: "unsupported" };
 
-interface ArgsSchemaShape {
-  properties?: Record<string, { type?: string; enum?: readonly unknown[]; description?: string }>;
-  required?: readonly string[];
-}
-
 /**
  * How a command's arguments are asked for.
  *
@@ -246,7 +248,7 @@ interface ArgsSchemaShape {
  * a command that gains an enum argument becomes promptable without anyone editing this file.
  */
 export function paletteArgs(command: AnyCommand): PaletteArgs {
-  const schema = command.args as ArgsSchemaShape | undefined;
+  const schema = command.args;
   const properties = schema?.properties;
   if (!schema || !properties) {
     return { kind: "none" };
@@ -308,7 +310,7 @@ const RECENT_COMMANDS_MAX = 6;
 export function getRecentCommands(): string[] {
   try {
     const raw: unknown = JSON.parse(localStorage.getItem(RECENT_COMMANDS_KEY) || "[]");
-    return Array.isArray(raw) ? raw.filter((id) => typeof id === "string") : [];
+    return Array.isArray(raw) ? raw.filter((id) => isString(id)) : [];
   } catch {
     return [];
   }
@@ -370,7 +372,7 @@ interface ArgRow {
   kind: "arg";
   commandId: string;
   argName: string;
-  value: unknown;
+  value: string | boolean;
   name: string;
   detail: string;
 }
@@ -437,7 +439,7 @@ export function isQuickSearchOpen(): boolean {
 
 /** The project root scoping the palette, or null when no project is open. */
 function scopeRoot(): string | null {
-  return projectState ? (projectState.projectRoot ?? null) : null;
+  return projectState ? projectState.projectRoot : null;
 }
 
 function hasProject(): boolean {
@@ -445,7 +447,7 @@ function hasProject(): boolean {
 }
 
 /** The mode and query the current input resolves to. */
-function current(): { mode: PaletteMode; query: string } {
+function current(): ResolvedPaletteMode {
   return resolvePaletteMode(_requested, _query, hasProject());
 }
 
@@ -465,6 +467,15 @@ function shortenPath(path: string) {
   return path;
 }
 
+/**
+ * What a file row reads from a search hit. `name` is optional because the cloud adapter hands back
+ * its response body unvalidated, so a hit without one falls back to the path's last segment.
+ */
+interface SearchHit {
+  path: string;
+  name?: string;
+}
+
 /**
  * Fetch the project's document set once per open.
  *
@@ -480,7 +491,7 @@ async function ensureFiles(): Promise<void> {
   renderOverlay();
   try {
     await loadFormats();
-    const hits = await getPlatform().searchFiles("", documentExtensions());
+    const hits: readonly SearchHit[] = await getPlatform().searchFiles("", documentExtensions());
     _files = hits.map((hit) => ({
       kind: "file" as const,
       path: hit.path,
@@ -566,23 +577,27 @@ function nodeRows(query: string): NodeRow[] {
   const rows: NodeRow[] = flattenTree(tab.doc.document).map((row) => ({
     kind: "node" as const,
     path: row.path,
-    name:
-      row.nodeType === "text"
-        ? String(row.node).slice(0, 60)
-        : nodeLabel(row.node as JxMutableNode),
+    // A primitive is exactly what `flattenTree` emits as a "text" row; every other row is a node.
+    name: isJsonPrimitive(row.node) ? String(row.node).slice(0, 60) : nodeLabel(row.node),
     detail: row.nodeType,
   }));
   return rankBy(rows, query.trim(), (row) => row.name);
 }
 
 function modeRows(): ModeRow[] {
-  return PALETTE_MODES.filter((spec) => spec.mode !== "picker").map((spec) => ({
-    kind: "mode" as const,
-    mode: spec.mode,
-    name: spec.chip,
-    detail: spec.description,
-    chord: spec.prefix,
-  }));
+  return PALETTE_MODES.flatMap((spec) =>
+    spec.mode === "picker"
+      ? []
+      : [
+          {
+            kind: "mode" as const,
+            mode: spec.mode,
+            name: spec.chip,
+            detail: spec.description,
+            chord: spec.prefix,
+          },
+        ],
+  );
 }
 
 function argRows(query: string): ArgRow[] {
@@ -598,8 +613,14 @@ function argRows(query: string): ArgRow[] {
   return rankBy(rows, query.trim(), (row) => row.name);
 }
 
+/** What the list draws: its rows, and whether they are a "recent" listing rather than a search. */
+interface CurrentRows {
+  rows: PaletteRow[];
+  showingRecent: boolean;
+}
+
 /** The rows for the current input, and whether they are a "recent" listing rather than a search. */
-function currentRows(): { rows: PaletteRow[]; showingRecent: boolean } {
+function currentRows(): CurrentRows {
   const { mode, query } = current();
   if (_pending) {
     return { rows: argRows(query), showingRecent: false };
@@ -669,7 +690,7 @@ function enterMode(mode: PaletteMode) {
   void ensureFiles();
 }
 
-function runCommand(command: AnyCommand, args?: Record<string, unknown>) {
+function runCommand(command: AnyCommand, args?: CommandArgValues) {
   const registry = activeRegistry();
   if (!registry) {
     return;
@@ -838,7 +859,7 @@ export interface PaletteRowProjection {
   chord: string;
 }
 
-interface PaletteScope extends Record<string, unknown> {
+interface PaletteScope {
   open: boolean;
   hasChip: boolean;
   chipLabel: string;
@@ -863,10 +884,11 @@ interface PaletteScope extends Record<string, unknown> {
   activate: () => void;
   clearMode: () => void;
   hover: (index: number) => void;
-  activateRow: (value: unknown) => void;
+  /** The `select` detail of the picked `jx-option`: its `value` attribute, a string. */
+  activateRow: (value: string) => void;
 }
 
-registerSurface("palette", paletteDoc as unknown as JxDocument);
+registerSurface("palette", paletteDoc);
 
 let _scope: PaletteScope | null = null;
 let _mount: Promise<SurfaceHandle> | null = null;
@@ -924,7 +946,7 @@ function scope(): PaletteScope {
     rows: [],
     sectionLabel: "",
     showSection: false,
-  }) as PaletteScope;
+  });
   return _scope;
 }
 

package/src/panels/right-panel.ts

@@ -1,17 +1,27 @@
 /// <reference lib="dom" />
 /**
- * Right panel — the Inspector dock: four tabs, one dock, one column.
+ * Right panel — the Inspector dock: three tabs, five views, one column (§6).
  *
- * **Content · Style · Logic · Assistant**, text-labelled. Three of those are renames of what was
- * here (Properties→Content, Events→Logic) and the fourth is the assistant, folded in from the fifth
- * grid column it used to own — which is the point of §3.1's "no assistant column": an inspector tab
- * costs zero additional width, so the canvas gets the ~300px back and the assistant is still one
- * key away.
+ * **Page · Element · Assistant**, text-labelled. Page is the open document's own settings (the
+ * former Navigator Page panel, re-hosted), titled for what the document is: Page, Template,
+ * Component, Entry or Document. Element is the selected node, and keeps the three views the strip
+ * used to spend three tabs on — Content, Style, Logic — behind a sub-switch in its body. The
+ * Assistant is folded in from the grid column it used to own, which is the point of §3.1's "no
+ * assistant column": an inspector tab costs zero additional width.
+ *
+ * The five LEAVES stay addressable (`shell.ts`'s `INSPECTOR_TAB_IDS`): `view.setRightTab { tab:
+ * "style" }` shows Element with Style chosen, and ⌘⇧1–5 follow the leaves left to right.
+ *
+ * **The strip follows the selection, and yields to the author.** When the selection goes from empty
+ * to non-empty while Page is showing, the strip switches to Element on the leaf last used there;
+ * when it becomes empty while Element is showing, it switches to Page. Only the TRANSITION
+ * switches: a tab the author clicks is kept until the selection next crosses empty, and the
+ * Assistant is never switched away from.
  *
  * **This file no longer draws anything.** The dock's markup, its ARIA and its style are
  * `surfaces/inspector-dock.json`, mounted through `surfaces/inspector-dock.ts`; what is left here
- * is the flow — which tab is selected, what the tab is pointed at, and which of the four seams each
- * body host is handed to. Two things came out of the move:
+ * is the flow — which leaf is selected, what the tab is pointed at, and which of the five seams
+ * each body host is handed to. Two things came out of the move:
  *
  * - **The strip is a real `tablist`.** It was `sp-tabs` with no `tabpanel` on the other end, so the
  *   four bodies were anonymous scrolling divs: a screen reader was told a tab was selected and
@@ -27,21 +37,31 @@
  * already holds, so there is nothing to withhold.
  */
 
-import { getNodeAtPath, nodeLabel, rightPanel } from "../store";
+import { getNodeAtPath, nodeLabel, requireShellRef, rightPanel } from "../store";
 import { effect, effectScope, reactive } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
 import { primarySelection } from "../tabs/selection";
+import { stylebookTarget } from "../style/stylebook-target";
 import { bindLogicPanelHost } from "./events-panel";
 import { bindContentHost } from "./properties-panel";
 
-import { DEFAULT_INSPECTOR_TAB, isInspectorTabId, shell } from "../shell";
-import { INSPECTOR_TABS } from "../commands/defaults";
+import {
+  DEFAULT_ELEMENT_TAB,
+  DEFAULT_INSPECTOR_TAB,
+  isElementTabId,
+  isInspectorTabId,
+  shell,
+} from "../shell";
+import { INSPECTOR_STRIP, INSPECTOR_TABS } from "../commands/defaults";
+import { bindPageHost, PAGE_TAB_EMPTY, pageTabTitle, renderPageTab } from "./head-panel";
 import { inspectorTabRegion } from "../ui/regions";
 import { bindStyleHost } from "./style-panel";
 import { mountInspectorDock } from "../surfaces/inspector-dock";
 
 import type { InspectorDockHandle, InspectorTabView } from "../surfaces/inspector-dock";
-import type { InspectorTabId } from "../shell";
+import type { ElementTabId, InspectorTabId } from "../shell";
+import type { InspectorStripId } from "../commands/defaults";
+import type { Tab } from "../tabs/tab";
 import type { EffectScope } from "@vue/reactivity";
 
 interface RightPanelCtx {
@@ -74,7 +94,17 @@ let _dock: InspectorDockHandle | null = null;
  * reports whether the assistant is showing, and a plain field would leave that button lying on the
  * welcome screen — which is the whole class of bug `shell.ts` was split out to end.
  */
-const _detached = reactive({ tab: DEFAULT_INSPECTOR_TAB as InspectorTabId });
+const _detached = reactive<{ tab: InspectorTabId; element: ElementTabId }>({
+  element: DEFAULT_ELEMENT_TAB,
+  tab: DEFAULT_INSPECTOR_TAB,
+});
+
+/**
+ * Whether each document had a selection the last time the dock looked, so the strip switches on a
+ * TRANSITION through empty rather than on every repaint (§6). Keyed on the tab, so focusing another
+ * document is not mistaken for its selection appearing.
+ */
+const _hadSelection = new WeakMap<Tab, boolean>();
 
 /**
  * Hand one tab's body host to its owner, once, and never let that stop the dock.
@@ -95,15 +125,21 @@ function bindBody(ctx: RightPanelCtx, tabId: string, host: HTMLElement): void {
 }
 
 /**
- * The four seams, keyed by the tab whose body feeds them.
+ * The five seams, keyed by the leaf whose body feeds them.
  *
  * A table rather than a chain of `if`s so that the ONE thing this module still does with a body
- * host is stated in one place. Every entry is a binder another module published: three of them
- * mount a document of their own into the host, and the assistant's arrives from `studio.ts` because
- * a matching import here would be a cycle.
+ * host is stated in one place. Every entry is a binder another module published: four of them mount
+ * a document of their own into the host, and the assistant's arrives from `studio.ts` because a
+ * matching import here would be a cycle.
  */
 function bindBodyUnguarded(ctx: RightPanelCtx, tabId: string, host: HTMLElement): void {
   switch (tabId) {
+    case "page": {
+      /* The former Navigator Page panel, re-hosted unchanged: `head-panel.ts` draws it against the
+         focused document and empties it when nothing is open. */
+      bindPageHost(host);
+      break;
+    }
     case "assistant": {
       /* The assistant owns its container for the life of the window: it is the mount point for the
          Assistant's own Jx document, and rebuilding it would drop the transcript and the composer
@@ -127,7 +163,10 @@ function bindBodyUnguarded(ctx: RightPanelCtx, tabId: string, host: HTMLElement)
       /* The canvas mode is what the tab cannot read for itself — Stylebook edits a tag catalogue
          entry and Edit edits the selection — so it comes in from `studio.ts` the same way the
          Content tab's navigation door does. */
-      bindStyleHost(host, { getCanvasMode: ctx.getCanvasMode });
+      bindStyleHost(host, {
+        getCanvasMode: ctx.getCanvasMode,
+        isShowing: () => inspectorTab() === "style",
+      });
       break;
     }
     default: {
@@ -139,16 +178,49 @@ function bindBodyUnguarded(ctx: RightPanelCtx, tabId: string, host: HTMLElement)
   }
 }
 
-/** The tab rows the document draws, with the selection resolved onto them. */
+/** Which strip tab hosts a leaf. */
+export function stripOf(leaf: InspectorTabId): InspectorStripId {
+  return INSPECTOR_TABS.find((tab) => tab.id === leaf)?.strip ?? "page";
+}
+
+/** The Page tab's title for the focused document (§6), or "Page" with nothing open. */
+function pageTitle(): string {
+  const tab = activeTab.value;
+  return tab ? pageTabTitle(tab.documentPath) : "Page";
+}
+
+/** What a strip tab is called on screen: Page's title is the document's kind. */
+function stripTitle(id: InspectorStripId): string {
+  return id === "page" ? pageTitle() : (INSPECTOR_STRIP.find((tab) => tab.id === id)?.title ?? id);
+}
+
+/** The tab rows the document draws, with the selected leaf resolved onto them. */
 function tabViews(selected: InspectorTabId): InspectorTabView[] {
-  return INSPECTOR_TABS.map((tab) => ({
-    active: tab.id === selected,
-    key: tab.id,
-    panelId: `inspector-panel-${tab.id}`,
-    region: inspectorTabRegion(tab.id),
-    tabId: `inspector-tab-${tab.id}`,
-    title: tab.title,
-  }));
+  const strip = stripOf(selected);
+  const noDocument = activeTab.value === null;
+  return INSPECTOR_STRIP.map((tab) => {
+    const leaves = INSPECTOR_TABS.filter((leaf) => leaf.strip === tab.id).map((leaf) => {
+      const empty = leaf.id === "page" && noDocument ? PAGE_TAB_EMPTY : "";
+      return {
+        active: leaf.id === selected,
+        empty,
+        hasEmpty: empty !== "",
+        key: leaf.id,
+        region: inspectorTabRegion(leaf.id),
+        shown: leaf.id === selected ? ("true" as const) : ("false" as const),
+        title: leaf.title,
+      };
+    });
+    return {
+      active: tab.id === strip,
+      hasLeaves: leaves.length > 1,
+      key: tab.id,
+      leaves,
+      panelId: `inspector-panel-${tab.id}`,
+      tabId: `inspector-tab-${tab.id}`,
+      title: stripTitle(tab.id),
+    };
+  });
 }
 
 /**
@@ -158,7 +230,7 @@ function tabViews(selected: InspectorTabId): InspectorTabView[] {
  */
 export function mount(ctx: RightPanelCtx) {
   _dock = mountInspectorDock(
-    rightPanel,
+    requireShellRef(rightPanel, "right-panel"),
     values(),
     { selectTab: (id) => selectFromStrip(id) },
     { onBody: (tabId, host) => bindBody(ctx, tabId, host) },
@@ -176,10 +248,15 @@ export function mount(ctx: RightPanelCtx) {
       if (tab) {
         // Track properties the right panel reads
         void tab.doc.document;
+        // The Page tab reads the realm a content page keeps its head in, and its kind.
+        void tab.doc.mode;
+        void tab.doc.content;
+        void tab.documentPath;
         // The whole SET, joined — a bare property read would not re-trigger when the selection
         // Changes WITHIN the array, and §6.7's helpers always replace it but nothing enforces that.
         void tab.session.selection.map((path) => path.join("/")).join("|");
         void tab.session.ui.rightTab;
+        followSelection(tab);
       }
       void _detached.tab;
       render();
@@ -197,33 +274,89 @@ export function unmount() {
   bindLogicPanelHost(null);
   bindContentHost(null);
   bindStyleHost(null);
+  bindPageHost(null);
   _detached.tab = DEFAULT_INSPECTOR_TAB;
+  _detached.element = DEFAULT_ELEMENT_TAB;
+}
+
+/**
+ * Switch the strip on a selection transition through empty (§6), and only then.
+ *
+ * Empty → non-empty while Page shows: Element, on the leaf last used there. Non-empty → empty while
+ * an Element leaf shows: Page. The first look at a document records its state and switches nothing,
+ * so focusing another tab is not a transition, and the Assistant is never left by this. Layout
+ * chrome counts as a selection: the Content view is what explains it. So does a Styles specimen's
+ * tag, which is a selection of the catalogue rather than of the document.
+ */
+function followSelection(tab: Tab): void {
+  // A tag picked in the Styles workspace's Elements view is a selection too: it is what the Style
+  // Leaf is editing, and it leaves the document selection empty (`selectStylebookTag`).
+  const has =
+    tab.session.selection.length > 0 ||
+    shell.layoutSelection !== null ||
+    stylebookTarget(tab) !== null;
+  const had = _hadSelection.get(tab);
+  _hadSelection.set(tab, has);
+  if (had === undefined || had === has) {
+    return;
+  }
+  const current = inspectorTab();
+  if (has && current === "page") {
+    setInspectorTab(lastElementTab());
+  } else if (!has && isElementTabId(current)) {
+    setInspectorTab("page");
+  }
+}
+
+/**
+ * The tab the strip rests on when nothing chose one (§6): Page with nothing selected, otherwise the
+ * Element leaf last used. What closing the Assistant steps onto.
+ */
+export function restingInspectorTab(): InspectorTabId {
+  const tab = activeTab.value;
+  const has = tab !== null && (tab.session.selection.length > 0 || shell.layoutSelection !== null);
+  return has ? lastElementTab() : "page";
+}
+
+/** The Element leaf last shown for the focused document, or with nothing open. */
+function lastElementTab(): ElementTabId {
+  const tab = activeTab.value;
+  const stored: unknown = tab ? tab.session.ui.elementTab : _detached.element;
+  return isElementTabId(stored) ? stored : DEFAULT_ELEMENT_TAB;
 }
 
 /** The whole projection the document reads, built fresh from the state it names. */
 function values() {
   const tab = inspectorTab();
+  const strip = stripOf(tab);
   return {
-    tab,
+    tab: strip,
     tabs: tabViews(tab),
-    target: inspectorTarget(),
-    title: INSPECTOR_TABS.find((t) => t.id === tab)?.title ?? tab,
+    target: inspectorTarget(tab),
+    title: stripTitle(strip),
   };
 }
 
 /**
  * Bring the dock up to date. Synchronous, and idempotent: the runtime skips a binding whose value
  * did not move, so an explicit caller can never take a control mid-interaction.
+ *
+ * The Page body is redrawn only while it is the leaf showing: it builds a merged-head preview per
+ * paint, and a hidden one would pay for that on every selection change. Showing it draws it.
  */
 export function render() {
-  _dock?.update(values());
+  const view = values();
+  _dock?.update(view);
+  if (inspectorTab() === "page") {
+    renderPageTab();
+  }
 }
 
 /**
- * The tab showing right now — the stored value, coerced to a declared one.
+ * The leaf showing right now — the stored value, coerced to a declared one.
  *
  * Coercion rather than trust because the value is persisted session state: a build that spelled a
- * tab differently, or an automation step that guessed, must land on Content rather than on a blank
+ * tab differently, or an automation step that guessed, must land on Page rather than on a blank
  * dock with no tab selected.
  */
 export function inspectorTab(): InspectorTabId {
@@ -243,38 +376,51 @@ export function setInspectorTab(tab: InspectorTabId): void {
   const aTab = activeTab.value;
   if (aTab) {
     aTab.session.ui.rightTab = tab;
+    if (isElementTabId(tab)) {
+      aTab.session.ui.elementTab = tab;
+    }
   } else {
     _detached.tab = tab;
+    if (isElementTabId(tab)) {
+      _detached.element = tab;
+    }
   }
   render();
 }
 
 /**
- * A pick from the strip.
+ * A pick from the strip, or from Element's sub-switch.
  *
  * The strip states a value and this decides what it means, which is why the document dispatches an
- * id rather than writing one: an id the enum does not declare is refused here rather than becoming
- * a dock with no tab selected.
+ * id rather than writing one. `element` is a strip id with no leaf of its own: it means "the
+ * Element view I last used". Any other id must be a declared leaf, so an id the enum does not
+ * declare is refused here rather than becoming a dock with no tab selected.
  */
 function selectFromStrip(id: string): void {
-  if (id !== "" && id !== inspectorTab() && isInspectorTabId(id)) {
-    setInspectorTab(id);
+  const leaf = id === "element" ? lastElementTab() : id;
+  if (leaf !== "" && leaf !== inspectorTab() && isInspectorTabId(leaf)) {
+    setInspectorTab(leaf);
   }
 }
 
 /**
  * What the selected tab is pointed AT, in the fewest words that are true.
  *
- * A tag name when a node is selected, the document's own name when nothing is, and "no document"
- * when there is nothing open. The dock spent its whole life unable to answer this — three icon tabs
- * and no statement of target anywhere — which is how "why is this field disabled" became a question
- * with no on-screen answer.
+ * A tag name when a node is selected, the document's own name when nothing is or when the Page tab
+ * is showing (it edits the document, whatever is selected), and "no document" when there is nothing
+ * open. The dock spent its whole life unable to answer this — three icon tabs and no statement of
+ * target anywhere — which is how "why is this field disabled" became a question with no on-screen
+ * answer.
  */
-function inspectorTarget(): string {
+function inspectorTarget(showing: InspectorTabId): string {
   const tab = activeTab.value;
   if (!tab) {
     return "no document";
   }
+  // The Page tab edits the document whatever is selected, so it is pointed at the document.
+  if (showing === "page") {
+    return documentName(tab.documentPath);
+  }
   // Layout chrome first: it is mutually exclusive with a document selection, and it is the one
   // Target whose name has to say where it came FROM — "<header> in layouts/base.json" is the whole
   // Answer to "why can I not edit this".
@@ -282,6 +428,12 @@ function inspectorTarget(): string {
   if (layout) {
     return `<${layout.tagName || "element"}> in ${layout.layoutFile || "the layout"}`;
   }
+  // The Styles workspace's Elements view styles a TAG: name it, as the Style body's `h1 · Base`
+  // Does, rather than whatever node the document selection happens to hold.
+  const tag = stylebookTarget(tab);
+  if (tag) {
+    return tag;
+  }
   const paths = tab.session.selection;
   const selection = primarySelection(paths);
   if (selection) {
@@ -291,6 +443,10 @@ function inspectorTarget(): string {
       ? `${paths.length} elements`
       : nodeLabel(getNodeAtPath(tab.doc.document, selection));
   }
-  const path = tab.documentPath;
+  return documentName(tab.documentPath);
+}
+
+/** A document's own name in the header: its file name, or "document" for an unsaved one. */
+function documentName(path: string | null | undefined): string {
   return path ? (path.split("/").at(-1) ?? "document") : "document";
 }