@jxsuite/studio 6.1.1 → 8.0.0

package/src/surfaces/panel-deploy-checklist.json

@@ -105,8 +105,8 @@
     },
     "& [part=\"step-icon\"]": {
       "flex": "none",
-      "width": "10px",
-      "textAlign": "center"
+      "--jx-icon-size": "1em",
+      "marginBlockEnd": "-0.15em"
     },
     "& [part=\"action\"]": {
       "marginTop": "var(--jx-space-1)"
@@ -205,12 +205,18 @@
                             },
                             "children": [
                               {
-                                "tagName": "span",
+                                "tagName": "jx-icon",
                                 "attributes": {
-                                  "part": "step-icon",
-                                  "aria-hidden": "true"
+                                  "part": "step-icon"
                                 },
-                                "textContent": "${$map.item.icon}"
+                                "$props": {
+                                  "name": {
+                                    "$ref": "$map/item/icon"
+                                  },
+                                  "label": {
+                                    "$ref": "$map/item/iconLabel"
+                                  }
+                                }
                               },
                               {
                                 "tagName": "span",

package/src/surfaces/panel-deploy-checklist.ts

@@ -31,10 +31,9 @@ import { effect, effectScope, reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import checklistDoc from "./panel-deploy-checklist.json";
 import type { EffectScope } from "@vue/reactivity";
-import type { JxDocument } from "@jxsuite/schema/types";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("panel-deploy-checklist", checklistDoc as unknown as JxDocument);
+registerSurface("panel-deploy-checklist", checklistDoc);
 
 /** One prerequisite, as the document draws it. Every field is a value: no records, no closures. */
 export interface DeployStepRowView {
@@ -42,8 +41,10 @@ export interface DeployStepRowView {
   id: string;
   /** `done` | `todo` | `unknown`, as `data-state`. `unknown` is not a third kind of "no". */
   state: string;
-  /** The one-character glyph the checklist chose for that state. */
+  /** The kit icon the checklist chose for that state (`check`, `warning-circle`, `question`). */
   icon: string;
+  /** The state in words, the icon's accessible name: "Done", "To do", "Not checked yet". */
+  iconLabel: string;
   /** The label, and — unless the link is forged — the sentence that says what is missing. */
   text: string;
 }
@@ -81,7 +82,7 @@ export interface DeployChecklistDeps {
 }
 
 /** The scope the document reads: the projection, flattened, beside the one callback. */
-interface DeployChecklistScope extends Record<string, unknown>, DeployChecklistView {
+interface DeployChecklistScope extends DeployChecklistView {
   runAction: () => void;
 }
 
@@ -109,7 +110,7 @@ function standingIn(container: HTMLElement): boolean {
     return false;
   }
   // Still mounting into this very container: a second call must not start a second mount.
-  return _handle === null ? _mount !== null : (_handle.root as Node).parentNode === container;
+  return _handle === null ? _mount !== null : _handle.root.parentNode === container;
 }
 
 /**
@@ -127,7 +128,7 @@ export function mountDeployChecklistSurface(
   }
   disposeDeployChecklistSurface();
   _container = container;
-  const scope = reactive<DeployChecklistScope>({
+  const scope: DeployChecklistScope = reactive<DeployChecklistScope>({
     actionDisabled: false,
     actionLabel: "",
     actionTitle: "",
@@ -138,7 +139,7 @@ export function mountDeployChecklistSurface(
     runAction: deps.runAction,
     steps: [],
     summary: "",
-  }) as DeployChecklistScope;
+  });
   _scope = effectScope();
   _scope.run(() => {
     effect(() => {

package/src/surfaces/panel-elements.ts

@@ -32,10 +32,9 @@
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import elementsDoc from "./panel-elements.json";
-import type { JxDocument } from "@jxsuite/schema/types";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("panel-elements", elementsDoc as unknown as JxDocument);
+registerSurface("panel-elements", elementsDoc);
 
 /** One insertable HTML element: the tag is its identity, its caption and what a click inserts. */
 export interface ElementCardView {
@@ -103,7 +102,7 @@ export interface ElementsSurfaceHandle {
 }
 
 /** The scope the document reads: {@link ElementsValues} plus the actions its controls call. */
-interface ElementsScope extends Record<string, unknown>, ElementsValues, ElementsActions {}
+interface ElementsScope extends ElementsValues, ElementsActions {}
 
 /** Write a projection into the scope. */
 function project(scope: ElementsScope, values: ElementsValues): void {
@@ -128,7 +127,7 @@ export function mountElementsSurface(
   values: ElementsValues,
   actions: ElementsActions,
 ): ElementsSurfaceHandle {
-  const scope = reactive<ElementsScope>({
+  const scope: ElementsScope = reactive<ElementsScope>({
     categories: [],
     clearFilter: actions.clearFilter,
     components: [],
@@ -141,7 +140,7 @@ export function mountElementsSurface(
     setComponentsOpen: actions.setComponentsOpen,
     setFilter: actions.setFilter,
     setSectionOpen: actions.setSectionOpen,
-  }) as ElementsScope;
+  });
   project(scope, values);
 
   let mounted: SurfaceHandle | null = null;
@@ -163,8 +162,7 @@ export function mountElementsSurface(
        taken away, and answering no would start a second mount racing the first. Once mounted the
        question is whether the root is still in the container — a panel that was switched away from
        had its document cleared out from under it by lit. */
-    connected: () =>
-      !disposed && (mounted === null || (mounted.root as Node).parentNode === container),
+    connected: () => !disposed && (mounted === null || mounted.root.parentNode === container),
     dispose() {
       disposed = true;
       mounted?.dispose();

package/src/surfaces/panel-i18n.ts

@@ -24,10 +24,9 @@
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import i18nDoc from "./panel-i18n.json";
-import type { JxDocument } from "@jxsuite/schema/types";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("panel-i18n", i18nDoc as unknown as JxDocument);
+registerSurface("panel-i18n", i18nDoc);
 
 /** Which of the three bodies the panel is showing. */
 export type I18nMode =
@@ -105,7 +104,7 @@ export interface I18nSurfaceHandle {
  * Each `has*` is the flattening of a presence test: a document switches on a VALUE, so "is there a
  * failure to report" has to arrive as a boolean rather than as a string the markup could measure.
  */
-interface I18nScope extends Record<string, unknown> {
+interface I18nScope {
   mode: I18nMode;
   settingsDisabled: boolean;
   summary: string;
@@ -166,7 +165,7 @@ export function mountI18nSurface(
   values: I18nValues,
   actions: I18nActions,
 ): I18nSurfaceHandle {
-  const scope = reactive<I18nScope>({
+  const scope: I18nScope = reactive<I18nScope>({
     hasIncomplete: false,
     hasRows: false,
     hasTruncated: false,
@@ -180,7 +179,7 @@ export function mountI18nSurface(
     settingsDisabled: false,
     summary: "",
     truncated: "",
-  }) as I18nScope;
+  });
   project(scope, values);
 
   let mounted: SurfaceHandle | null = null;
@@ -201,8 +200,7 @@ export function mountI18nSurface(
     /* In flight the answer is yes: nothing has landed yet, so there is nothing that could have been
        taken away. Once mounted the question is simply whether the root is still in the container —
        a panel that was switched away from had its document cleared out from under it by lit. */
-    connected: () =>
-      !disposed && (mounted === null || (mounted.root as Node).parentNode === container),
+    connected: () => !disposed && (mounted === null || mounted.root.parentNode === container),
     dispose() {
       disposed = true;
       mounted?.dispose();

package/src/surfaces/panel-imports.ts

@@ -33,10 +33,9 @@
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import importsDoc from "./panel-imports.json";
-import type { SurfaceHandle } from "../ui/surface";
-import type { JxDocument } from "@jxsuite/schema/types";
+import type { SurfaceHandle, SurfaceOption } from "../ui/surface";
 
-registerSurface("panel-imports", importsDoc as unknown as JxDocument);
+registerSurface("panel-imports", importsDoc);
 
 /** One imported module: the name a document refers to it by, and the path it is loaded from. */
 export interface ModuleRow {
@@ -70,12 +69,6 @@ export interface PackageRow {
   components: ComponentRow[];
 }
 
-/** One row of the component picker: a project component this document has not imported yet. */
-export interface PickerOption {
-  value: string;
-  label: string;
-}
-
 /** What the panel shows — the flow's projection of the project and the open document. */
 export interface ImportsView {
   /**
@@ -94,7 +87,7 @@ export interface ImportsView {
   /** What the component picker currently shows. `""` is its own empty row, never a component. */
   pickerValue: string;
   /** The components this document could still import. Empty when there are none to offer. */
-  pickerOptions: PickerOption[];
+  pickerOptions: SurfaceOption[];
   /**
    * The sentence drawn where the `$ref` list would be. The flow chooses it: "pick one below" and
    * "this project has none yet" are two different absences, and only the flow knows which it is
@@ -135,7 +128,7 @@ interface ImportsFlags {
   hasOptions: boolean;
 }
 
-interface ImportsScope extends Record<string, unknown>, ImportsView, ImportsActions, ImportsFlags {}
+interface ImportsScope extends ImportsView, ImportsActions, ImportsFlags {}
 
 interface Mounted {
   scope: ImportsScope;
@@ -152,7 +145,7 @@ const mounts = new WeakMap<HTMLElement, Mounted>();
  * control lies about what it holds — and the row is what the closed control reads as, which is why
  * it is worded as the invitation rather than as a blank.
  */
-const PICK_NOTHING: PickerOption = { label: "Add component…", value: "" };
+const PICK_NOTHING: SurfaceOption = { label: "Add component…", value: "" };
 
 /** The view plus the flags the document switches on. */
 function derive(view: ImportsView): ImportsView & ImportsFlags {
@@ -191,7 +184,7 @@ export function renderImportsSurface(
   }
   existing?.handle?.dispose();
   host.textContent = "";
-  const scope = reactive({ ...derive(view), ...actions }) as ImportsScope;
+  const scope: ImportsScope = reactive<ImportsScope>({ ...derive(view), ...actions });
   const record: Mounted = { handle: null, scope };
   mounts.set(host, record);
   /* No race to arbitrate: a redraw arriving while this is in flight takes the branch above — a

package/src/surfaces/panel-outline.ts

@@ -40,14 +40,15 @@
  * @docs studio/design/layers
  */
 
+import { isString } from "@jxsuite/schema/guards";
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import outlineDoc from "./panel-outline.json";
-import type { JxDocument, JxElement } from "@jxsuite/schema/types";
+import type { JxElement } from "@jxsuite/schema/types";
 import type { JxScope } from "@jxsuite/runtime/types";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("panel-outline", outlineDoc as unknown as JxDocument);
+registerSurface("panel-outline", outlineDoc);
 
 /**
  * One verb on a row, already resolved against THAT ROW'S node.
@@ -193,10 +194,13 @@ export interface OutlineActions {
    * `data-jx-path` is for.
    */
   contextMenu: (scope: JxScope, event: Event) => void;
-  /** Run one of the row's verbs, against the row rather than against the selection. */
-  runRow: (id: string, row: string, control: unknown) => void;
-  /** Open the `⋮` menu under its own button. */
-  overflowRow: (key: string, opener: unknown) => void;
+  /**
+   * Run one of the row's verbs, against the row rather than against the selection. `control` is the
+   * pressed button's `event.currentTarget`.
+   */
+  runRow: (id: string, row: string, control: EventTarget | null) => void;
+  /** Open the `⋮` menu under its own button, which arrives as the press's `event.currentTarget`. */
+  overflowRow: (key: string, opener: EventTarget | null) => void;
   /** The rename input's three moments. */
   editInput: (value: string) => void;
   editCommit: () => void;
@@ -221,7 +225,7 @@ export interface OutlineSurfaceHandle {
 }
 
 /** The scope the document reads: the projection, plus everything its controls can call. */
-interface OutlineScope extends Record<string, unknown>, OutlineValues, OutlineActions {}
+interface OutlineScope extends OutlineValues, OutlineActions {}
 
 /** Write a projection into the scope. */
 function project(scope: OutlineScope, values: OutlineValues): void {
@@ -236,8 +240,8 @@ function project(scope: OutlineScope, values: OutlineValues): void {
 
 /** The `part` a node's definition carries, or "" for a text node or an unmarked element. */
 function partOf(def: JxElement | string): string {
-  const part = typeof def === "string" ? undefined : def.attributes?.["part"];
-  return typeof part === "string" ? part : "";
+  const part = isString(def) ? undefined : def.attributes?.["part"];
+  return isString(part) ? part : "";
 }
 
 /**
@@ -253,7 +257,7 @@ export function mountOutlineSurface(
   values: OutlineValues,
   actions: OutlineActions,
 ): OutlineSurfaceHandle {
-  const scope = reactive<OutlineScope>({
+  const scope: OutlineScope = reactive<OutlineScope>({
     contextMenu: actions.contextMenu,
     current: "",
     editCancel: actions.editCancel,
@@ -278,7 +282,7 @@ export function mountOutlineSurface(
     treeReady: actions.treeReady,
     typeahead: actions.typeahead,
     view: "empty",
-  }) as OutlineScope;
+  });
   project(scope, values);
 
   let mounted: SurfaceHandle | null = null;
@@ -290,12 +294,15 @@ export function mountOutlineSurface(
   const ready = mountSurface("panel-outline", scope, container, {
     onNodeCreated: (element, _path, def) => {
       /* A text node carries no `part`, so narrowing and asking are the same question — asked once,
-         rather than as a guard clause whose only reachable answer is the one below. */
-      const part = element instanceof HTMLElement ? partOf(def) : "";
-      if (part === "tree") {
-        actions.treeReady(element as HTMLElement);
-      } else if (part === "title-input") {
-        actions.editReady(element as HTMLElement);
+         as the condition around the lookup rather than as a guard clause whose only reachable
+         answer is the one below. */
+      if (element instanceof HTMLElement) {
+        const part = partOf(def);
+        if (part === "tree") {
+          actions.treeReady(element);
+        } else if (part === "title-input") {
+          actions.editReady(element);
+        }
       }
     },
   }).then((surface) => {
@@ -312,8 +319,7 @@ export function mountOutlineSurface(
        mount racing the first. Once mounted, the question is whether the root is still where it was
        put: a Navigator that painted another panel, or the stylebook's own catalogue, cleared this
        document out from under it. */
-    connected: () =>
-      !disposed && (mounted === null || (mounted.root as Node).parentNode === container),
+    connected: () => !disposed && (mounted === null || mounted.root.parentNode === container),
     dispose() {
       disposed = true;
       mounted?.dispose();

package/src/surfaces/panel-page.json

@@ -1,13 +1,13 @@
 {
   "$schema": "https://jxsuite.com/schema/v1",
   "$id": "StudioPanelPage",
-  "$description": "The Navigator's Page panel: everything the open document says about itself before anybody reads its body — its frontmatter, the layout it is poured into, its title, description, viewport and icon, its OpenGraph card, and the raw `$head` tags no structured control owns. ONE row vocabulary across the first four sections, told apart by `kind`, because a Title, a Layout picker and a schema-driven frontmatter field differ in what they COMMIT rather than in what they look like — and what they commit is `panels/head-panel.ts`'s decision, reached by the row's `key`. Nothing here knows what a `$head` entry is, which of them are managed, what a content collection is or that a page has a layout: the flow hands over sections whose every field is already a string and this draws them. The Custom Tags section is the one different shape — a read-only list plus the form that adds to it — because those rows are markup a reader is being SHOWN rather than a value they are editing.",
+  "$description": "The Inspector's Page tab (specs/studio.md §6), the former Navigator Page panel: everything the open document says about itself before anybody reads its body — its frontmatter, the layout it is poured into, its title, description, viewport and icon, its OpenGraph card, and the raw `$head` tags no structured control owns. ONE row vocabulary across the first four sections, told apart by `kind`, because a Title, a Layout picker and a schema-driven frontmatter field differ in what they COMMIT rather than in what they look like — and what they commit is `panels/head-panel.ts`'s decision, reached by the row's `key`. Nothing here knows what a `$head` entry is, which of them are managed, what a content collection is or that a page has a layout: the flow hands over sections whose every field is already a string and this draws them. The Custom Tags section is the one different shape — a read-only list plus the form that adds to it — because those rows are markup a reader is being SHOWN rather than a value they are editing.",
   "tagName": "div",
   "attributes": {
     "part": "page"
   },
   "style": {
-    "$description": "The eleven `.imports-*` and four `.head-*` rules in `styles/panels.css` plus the row vocabulary the panel used to borrow from `styles/inspector.css` (`.style-row`, `.style-row-label`, `.set-dot`) and `styles/overlays.css` (`.media-picker`, `.media-picker-thumb`). The borrowed ones are TRANSCRIBED rather than shared, for the reason `doc-header.json` gives: a document emits no class, so a class cannot style it, and the lit panels that still draw a `.style-row` go on owning those rules until they convert. Four token repairs travel with them. `--spectrum-font-size-50` resolved only inside `<sp-theme>` and a document is mounted outside it, so every rule that read it would silently have taken its 11px fallback and stopped following the theme; each is `--jx-text-sm` here, and the two bare `10px` literals are `--jx-text-xs`. `.imports-count` read `--text-hint`, a name NO stylesheet in this package defines — an unresolvable custom property makes the whole declaration invalid at computed-value time, so the count has been inheriting its colour rather than taking the one written for it, and it says `--fg-dim`, which is what it was drawing anyway. And `.head-section-body .style-row > sp-textfield` reached INSIDE another component to widen it, which a part cannot do and no longer has to: `[part=\"widget\"]` is the field itself. Two things changed on purpose. THE CLEAR DOT IS A BUTTON — it was a `<span>` with a click handler and no role, so a row's only route to clearing its value could not be reached from the keyboard at all. AND THE ADD FORM IS STATE, not three `ref()` handles read at submit time: a document binding writes only when the scope moves, so the flow states what each field holds and clearing one after a successful add is a real change the runtime carries back.",
+    "$description": "The eleven `.imports-*` and four `.head-*` rules in `styles/panels.css` plus the row vocabulary the panel used to borrow from `styles/inspector.css` (`.style-row`, `.style-row-label`, `.set-dot`) and `styles/overlays.css` (`.media-picker`, `.media-picker-thumb`). The borrowed ones are TRANSCRIBED rather than shared, because a document emits no class, so a class cannot style it, and the lit panels that still draw a `.style-row` go on owning those rules until they convert. Four token repairs travel with them. `--spectrum-font-size-50` resolved only inside `<sp-theme>` and a document is mounted outside it, so every rule that read it would silently have taken its 11px fallback and stopped following the theme; each is `--jx-text-sm` here, and the two bare `10px` literals are `--jx-text-xs`. `.imports-count` read `--text-hint`, a name NO stylesheet in this package defines — an unresolvable custom property makes the whole declaration invalid at computed-value time, so the count has been inheriting its colour rather than taking the one written for it, and it says `--fg-dim`, which is what it was drawing anyway. And `.head-section-body .style-row > sp-textfield` reached INSIDE another component to widen it, which a part cannot do and no longer has to: `[part=\"widget\"]` is the field itself. Two things changed on purpose. THE CLEAR DOT IS A BUTTON — it was a `<span>` with a click handler and no role, so a row's only route to clearing its value could not be reached from the keyboard at all. AND THE ADD FORM IS STATE, not three `ref()` handles read at submit time: a document binding writes only when the scope moves, so the flow states what each field holds and clearing one after a successful add is a real change the runtime carries back.",
     "display": "block",
     "overflowY": "auto",
     "padding": "var(--jx-space-2)",
@@ -85,6 +85,19 @@
       "width": "100%",
       "minWidth": "0"
     },
+    "& [part=\"readout\"]": {
+      "$description": "A derived value set as text in the field's place, monospaced because a URL is read character by character.",
+      "display": "block",
+      "padding": "2px 0",
+      "overflow": "hidden",
+      "textOverflow": "ellipsis",
+      "whiteSpace": "nowrap",
+      "fontFamily": "var(--font-mono, monospace)",
+      "fontSize": "var(--jx-text-sm)"
+    },
+    "& [part=\"row-action\"]": {
+      "alignSelf": "flex-start"
+    },
     "& [part=\"note\"]": {
       "$description": "What the row could not find out — the entries of a referenced collection that is empty, or the reason listing it failed. A sentence under the control, in the row's own label size, so it reads as part of the field rather than as an error banner.",
       "margin": "0",
@@ -501,6 +514,15 @@
                             ]
                           }
                         },
+                        "readout": {
+                          "$description": "A value the document derives rather than stores, such as a page's URL, which is its file's place under `pages/`. Shown, never edited here: an editable URL would be a rename, and a rename is the file tree's.",
+                          "tagName": "output",
+                          "attributes": {
+                            "part": "readout",
+                            "aria-label": "${$map.item.label}"
+                          },
+                          "textContent": "${$map.item.value}"
+                        },
                         "select": {
                           "tagName": "jx-select",
                           "attributes": {
@@ -682,6 +704,54 @@
                         }
                       }
                     },
+                    {
+                      "tagName": "div",
+                      "attributes": {
+                        "part": "action-slot",
+                        "role": "none"
+                      },
+                      "style": {
+                        "display": "contents"
+                      },
+                      "$switch": {
+                        "$ref": "$map/item/hasAction"
+                      },
+                      "cases": {
+                        "true": {
+                          "$description": "The row's one door elsewhere, named for what it opens: the Layout row's Edit template opens the layout in Design.",
+                          "tagName": "jx-button",
+                          "attributes": {
+                            "part": "row-action"
+                          },
+                          "$props": {
+                            "size": "sm",
+                            "variant": "secondary"
+                          },
+                          "onclick": {
+                            "$prototype": "Function",
+                            "body": [
+                              {
+                                "operator": "call",
+                                "target": {
+                                  "$ref": "#/state/runRowAction"
+                                },
+                                "value": [
+                                  {
+                                    "$ref": "$map/item/key"
+                                  }
+                                ]
+                              }
+                            ]
+                          },
+                          "children": [
+                            {
+                              "tagName": "span",
+                              "textContent": "${$map.item.action}"
+                            }
+                          ]
+                        }
+                      }
+                    },
                     {
                       "tagName": "div",
                       "attributes": {

package/src/surfaces/panel-page.ts

@@ -1,6 +1,6 @@
 /// <reference lib="dom" />
 /**
- * The Navigator's Page panel, as a mounted document.
+ * The Page panel — the Inspector's Page tab (§6) — as a mounted document.
  *
  * `panels/head-panel.ts` is the flow — what a `$head` entry means, which of them a structured
  * control already owns, what the layout cascade resolves to, which realm a title lives in and what
@@ -26,16 +26,9 @@
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import pagePanelDoc from "./panel-page.json";
-import type { JxDocument } from "@jxsuite/schema/types";
-import type { SurfaceHandle } from "../ui/surface";
+import type { SurfaceHandle, SurfaceOption } from "../ui/surface";
 
-registerSurface("panel-page", pagePanelDoc as unknown as JxDocument);
-
-/** One choice in a row's picker, or in the add form's tag picker. */
-export interface PageChoice {
-  value: string;
-  label: string;
-}
+registerSurface("panel-page", pagePanelDoc);
 
 /**
  * One row of one section, as the document reads it.
@@ -44,20 +37,27 @@ export interface PageChoice {
  * `$switch` chooses on one: a row that omitted `options` would leave the picker case reading an
  * absent path.
  *
- * {@link PageRow.key} and {@link PageRow.prop} are two fields for the reason the Document Header
- * card gives: `key` is the identity the repeater and every action use, `prop` is the name a reader,
- * a screenshot region and `ui/regions.ts`'s `field:<prop>` grammar see. A collection whose schema
- * declares a `layout` property would otherwise share an identity with the Layout picker.
+ * {@link PageRow.key} and {@link PageRow.prop} are two fields: `key` is the identity the repeater
+ * and every action use, `prop` is the name a reader, a screenshot region and `ui/regions.ts`'s
+ * `field:<prop>` grammar see. A collection whose schema declares a `layout` property would
+ * otherwise share an identity with the Layout picker.
  */
-export interface PageRow extends Record<string, unknown> {
+export interface PageRow {
   /** The row's identity: the repeater's key, and the argument every action is given. */
   key: string;
   /** The name on `data-prop`. */
   prop: string;
   /** The visible label, already carrying the required marker where a schema asks for one. */
   label: string;
-  /** Which control the row draws. `textarea` is a multiline text field, not a second element. */
-  kind: "text" | "textarea" | "number" | "boolean" | "select" | "media";
+  /**
+   * Which control the row draws. `textarea` is a multiline text field, not a second element;
+   * `readout` is no control at all, a value the document derives (a page's URL) shown as text.
+   */
+  kind: "text" | "textarea" | "number" | "boolean" | "select" | "media" | "readout";
+  /** The row's one button, named for what it opens. Empty draws none. */
+  action: string;
+  /** Whether {@link PageRow.action} has anything in it; `$switch` is the document's conditional. */
+  hasAction: boolean;
   /**
    * Whether the value is set on this document — studio-ui-guidelines.md §4.2's dot, and the row's
    * only clear affordance.
@@ -72,7 +72,7 @@ export interface PageRow extends Record<string, unknown> {
   /** A text row's placeholder. Empty draws none. */
   placeholder: string;
   /** A picker's rows, in the order they are offered. Empty on every other kind. */
-  options: PageChoice[];
+  options: SurfaceOption[];
   /** A sentence under the control — an empty collection, or a listing that failed. */
   note: string;
   /** Whether {@link PageRow.note} has anything in it; `$switch` is the document's conditional. */
@@ -84,7 +84,7 @@ export interface PageRow extends Record<string, unknown> {
 }
 
 /** One band of the panel: a heading, and the rows under it. */
-export interface PageSection extends Record<string, unknown> {
+export interface PageSection {
   /** The repeater's key, and the `data-section` a test or a shot addresses the band by. */
   key: string;
   /** The heading, already carrying the collection's name where there is one. */
@@ -95,7 +95,7 @@ export interface PageSection extends Record<string, unknown> {
 }
 
 /** One `$head` entry no structured control owns, as the list draws it. */
-export interface PageTagRow extends Record<string, unknown> {
+export interface PageTagRow {
   /** Unique within one projection — the repeater's key, and what Remove hands back. */
   key: string;
   /** The entry as markup, e.g. `<meta name="author">`. */
@@ -120,7 +120,7 @@ export interface PagePanelView {
   addAttr: string;
   addValue: string;
   /** The element names the add form offers. */
-  tagOptions: PageChoice[];
+  tagOptions: SurfaceOption[];
 }
 
 /**
@@ -142,10 +142,12 @@ export interface PagePanelActions {
   setChoice: (key: string, value: string) => void;
   /** Open the OS file picker for a media row and assign what comes back. */
   upload: (key: string) => void;
-  /** Open the media browser under the button that was pressed. */
-  browse: (key: string, anchor: unknown) => void;
+  /** Open the media browser under the button that was pressed — the press's `event.currentTarget`. */
+  browse: (key: string, anchor: EventTarget | null) => void;
   /** Run the `document.openSeo` command — the door to Search appearance. */
   openSeo: () => void;
+  /** Press the row's own button ({@link PageRow.action}). */
+  runRowAction: (key: string) => void;
   /** Take one custom `$head` entry away. */
   removeEntry: (key: string) => void;
   /** State what the add form's tag picker now holds, before anything is decided about it. */
@@ -159,7 +161,7 @@ export interface PagePanelActions {
 }
 
 /** The scope the document reads: the projection, plus everything a control can ask for. */
-interface PagePanelScope extends Record<string, unknown>, PagePanelView, PagePanelActions {}
+interface PagePanelScope extends PagePanelView, PagePanelActions {}
 
 /** Write a projection into the scope. Assignment by assignment, so an unchanged field is inert. */
 function project(scope: PagePanelScope, view: PagePanelView): void {
@@ -223,7 +225,7 @@ export function renderPagePanelSurface(
   }
   existing?.handle?.dispose();
   host.textContent = "";
-  const scope = reactive({ ...emptyView(), ...actions }) as PagePanelScope;
+  const scope: PagePanelScope = reactive<PagePanelScope>({ ...emptyView(), ...actions });
   project(scope, view);
   const record: Mounted = { handle: null, scope };
   mounts.set(host, record);
@@ -238,6 +240,28 @@ export function renderPagePanelSurface(
      the next `afterRender` sees a disconnected handle and remakes the surface through the branch
      above. */
   void mountSurface("panel-page", scope, host).then((handle) => {
+    /* Unmounted while in flight (the Inspector's Page tab lost its document in the same turn): the
+       record is no longer the host's, so the surface that just landed is taken straight back out. */
+    if (mounts.get(host) !== record) {
+      handle.dispose();
+      return;
+    }
     record.handle = handle;
   });
 }
+
+/**
+ * Take the panel out of `host`, if it is there — the Inspector's Page tab with no document open.
+ * Idempotent: a host with no mount is left as it is.
+ *
+ * @param {HTMLElement} host The panel's content area.
+ */
+export function unmountPagePanelSurface(host: HTMLElement): void {
+  const existing = mounts.get(host);
+  if (!existing) {
+    return;
+  }
+  mounts.delete(host);
+  existing.handle?.dispose();
+  host.textContent = "";
+}