@jxsuite/studio 6.1.2 → 8.0.1

package/src/surfaces/pane-context.json

@@ -7,7 +7,7 @@
     "part": "chrome"
   },
   "style": {
-    "$description": "The `.pc-*` rules of `styles/canvas.css`, keyed on `part` and carried here, plus `.jx-collab-banner` from `styles/shell.css` — the banner rides in this band and the rule rides with it. Three token repairs travel with them, the shape `surfaces/git-panel.json` describes: `--spectrum-font-size-75` and `--spectrum-font-size-50` resolved only inside `<sp-theme>` and a document mounts outside it, so every rule reading one would silently have taken its px fallback; they are `--jx-text-md` (12px) and `--jx-text-sm` (11px) here, at the same values. Four rules are DELETED rather than moved because the kit already draws them: `.pc-derive-trigger`'s hand-built 22×20 box and its hover are `jx-action-button` quiet, `.pc-preview-toggle[selected]`'s four Spectrum custom-property overrides are the `emphasized` prop, and `.pc-ctx-manage:hover`'s underline is the only half of that rule worth keeping. The one rule ADDED is `pointer-events: auto` on the band, the pod and the popovers: `.pane-chrome` is `pointer-events: none` and gave it to its direct children through `.pane-chrome > *`, which a document root with `display: contents` is not — so the three surfaces that take the pointer say so themselves, which is also the honest place for it.",
+    "$description": "The `.pc-*` rules of `styles/canvas.css`, keyed on `part` and carried here, plus `.jx-collab-banner` from `styles/shell.css` — the banner rides in this band and the rule rides with it. Three token repairs travel with them, all of one shape: `--spectrum-font-size-75` and `--spectrum-font-size-50` resolved only inside `<sp-theme>` and a document mounts outside it, so every rule reading one would silently have taken its px fallback; they are `--jx-text-md` (12px) and `--jx-text-sm` (11px) here, at the same values. Four rules are DELETED rather than moved because the kit already draws them: `.pc-derive-trigger`'s hand-built 22×20 box and its hover are `jx-action-button` quiet, `.pc-preview-toggle[selected]`'s four Spectrum custom-property overrides are the `emphasized` prop, and `.pc-ctx-manage:hover`'s underline is the only half of that rule worth keeping. The one rule ADDED is `pointer-events: auto` on the band, the pod and the popovers: `.pane-chrome` is `pointer-events: none` and gave it to its direct children through `.pane-chrome > *`, which a document root with `display: contents` is not — so the three surfaces that take the pointer say so themselves, which is also the honest place for it.",
     "display": "contents",
     "& [part=\"band\"]": {
       "$description": "The pane's top band: the bar plus the standing statements that must be readable before the first keystroke. One element so the adapter can MEASURE what the stage has to clear — a banner's height is its wrapped text, which only layout knows.",
@@ -32,6 +32,10 @@
       "alignItems": "center",
       "minWidth": "0"
     },
+    "& [part=\"back\"]": {
+      "flexShrink": "0",
+      "marginInlineEnd": "var(--jx-space-2)"
+    },
     "& [part=\"axis\"]": {
       "display": "flex",
       "alignItems": "center",
@@ -214,6 +218,54 @@
                 "part": "spacer"
               },
               "children": [
+                {
+                  "$description": "Back to the workspace home, in a workspace that draws no tab strip (Media, Styles, Publish): the way out of a view opened beside the home — a media file, a comparison, `project.json` as Code — with the destination named, because there is no chip to click and no close button to press. It leads the bar so it sits where the strip's chips would have been. Escape runs the same command (`pane.backToHome`) wherever no text field or code editor owns the key.",
+                  "tagName": "div",
+                  "attributes": {
+                    "part": "back-slot",
+                    "role": "none"
+                  },
+                  "style": {
+                    "display": "contents"
+                  },
+                  "$switch": {
+                    "$ref": "#/state/backState"
+                  },
+                  "cases": {
+                    "shown": {
+                      "tagName": "jx-action-button",
+                      "attributes": {
+                        "part": "back"
+                      },
+                      "$props": {
+                        "size": "sm",
+                        "quiet": true,
+                        "icon": "arrow-left",
+                        "hint": {
+                          "$ref": "#/state/backHint"
+                        }
+                      },
+                      "onclick": {
+                        "$prototype": "Function",
+                        "body": [
+                          {
+                            "operator": "call",
+                            "target": {
+                              "$ref": "#/state/goBack"
+                            },
+                            "value": []
+                          }
+                        ]
+                      },
+                      "children": [
+                        {
+                          "tagName": "span",
+                          "textContent": "${state.backLabel}"
+                        }
+                      ]
+                    }
+                  }
+                },
                 {
                   "tagName": "div",
                   "attributes": {
@@ -236,8 +288,8 @@
                         "size": "sm",
                         "quiet": true,
                         "icon": "arrows-clockwise",
-                        "label": "Show something beside this pane",
-                        "hint": "Show something beside this pane",
+                        "label": "Show code, diff or layout beside",
+                        "hint": "Show this document's code, diff, layout or another breakpoint beside it",
                         "haspopup": "menu"
                       },
                       "onclick": {
@@ -525,43 +577,104 @@
                     {
                       "tagName": "div",
                       "attributes": {
-                        "part": "axis",
-                        "data-axis": "context"
+                        "part": "context-slot",
+                        "role": "none"
                       },
-                      "children": [
-                        {
-                          "tagName": "span",
-                          "attributes": {
-                            "part": "axis-label"
-                          },
-                          "textContent": "Context"
-                        },
-                        {
+                      "style": {
+                        "display": "contents"
+                      },
+                      "$switch": {
+                        "$ref": "#/state/contextState"
+                      },
+                      "cases": {
+                        "shown": {
                           "tagName": "div",
                           "attributes": {
-                            "part": "resolving-slot",
-                            "role": "none"
-                          },
-                          "style": {
-                            "display": "contents"
-                          },
-                          "$switch": {
-                            "$ref": "#/state/resolvingState"
+                            "part": "axis",
+                            "data-axis": "context"
                           },
-                          "cases": {
-                            "shown": {
+                          "children": [
+                            {
+                              "tagName": "span",
+                              "attributes": {
+                                "part": "axis-label"
+                              },
+                              "textContent": "Context"
+                            },
+                            {
+                              "tagName": "div",
+                              "attributes": {
+                                "part": "resolving-slot",
+                                "role": "none"
+                              },
+                              "style": {
+                                "display": "contents"
+                              },
+                              "$switch": {
+                                "$ref": "#/state/resolvingState"
+                              },
+                              "cases": {
+                                "shown": {
+                                  "tagName": "jx-action-button",
+                                  "attributes": {
+                                    "part": "resolving-trigger"
+                                  },
+                                  "$props": {
+                                    "size": "sm",
+                                    "quiet": true,
+                                    "haspopup": "dialog",
+                                    "expanded": {
+                                      "$ref": "#/state/resolvingOpen"
+                                    },
+                                    "hint": "The values this document is being rendered with"
+                                  },
+                                  "onclick": {
+                                    "$prototype": "Function",
+                                    "body": [
+                                      {
+                                        "operator": "call",
+                                        "target": {
+                                          "$ref": "#/state/openResolving"
+                                        },
+                                        "value": [
+                                          {
+                                            "$ref": "event#/currentTarget"
+                                          }
+                                        ]
+                                      }
+                                    ]
+                                  },
+                                  "children": [
+                                    {
+                                      "tagName": "span",
+                                      "textContent": "${state.resolvingLabel}"
+                                    },
+                                    {
+                                      "tagName": "jx-icon",
+                                      "attributes": {
+                                        "part": "resolving-trigger-caret"
+                                      },
+                                      "$props": {
+                                        "name": "caret-down"
+                                      }
+                                    }
+                                  ]
+                                }
+                              }
+                            },
+                            {
                               "tagName": "jx-action-button",
                               "attributes": {
-                                "part": "resolving-trigger"
+                                "part": "context-trigger"
                               },
                               "$props": {
                                 "size": "sm",
                                 "quiet": true,
                                 "haspopup": "dialog",
                                 "expanded": {
-                                  "$ref": "#/state/resolvingOpen"
+                                  "$ref": "#/state/contextOpen"
                                 },
-                                "hint": "The values this document is being rendered with"
+                                "hint": "What this document is being rendered with"
                               },
                               "onclick": {
                                 "$prototype": "Function",
@@ -569,7 +682,7 @@
                                   {
                                     "operator": "call",
                                     "target": {
-                                      "$ref": "#/state/openResolving"
+                                      "$ref": "#/state/openContext"
                                     },
                                     "value": [
                                       {
@@ -582,12 +695,12 @@
                               "children": [
                                 {
                                   "tagName": "span",
-                                  "textContent": "${state.resolvingLabel}"
+                                  "textContent": "${state.contextSummary}"
                                 },
                                 {
                                   "tagName": "jx-icon",
                                   "attributes": {
-                                    "part": "resolving-trigger-caret"
+                                    "part": "context-trigger-caret"
                                   },
                                   "$props": {
                                     "name": "caret-down"
@@ -595,55 +708,9 @@
                                 }
                               ]
                             }
-                          }
-                        },
-                        {
-                          "tagName": "jx-action-button",
-                          "attributes": {
-                            "part": "context-trigger"
-                          },
-                          "$props": {
-                            "size": "sm",
-                            "quiet": true,
-                            "haspopup": "dialog",
-                            "expanded": {
-                              "$ref": "#/state/contextOpen"
-                            },
-                            "hint": "What this document is being rendered with"
-                          },
-                          "onclick": {
-                            "$prototype": "Function",
-                            "body": [
-                              {
-                                "operator": "call",
-                                "target": {
-                                  "$ref": "#/state/openContext"
-                                },
-                                "value": [
-                                  {
-                                    "$ref": "event#/currentTarget"
-                                  }
-                                ]
-                              }
-                            ]
-                          },
-                          "children": [
-                            {
-                              "tagName": "span",
-                              "textContent": "${state.contextSummary}"
-                            },
-                            {
-                              "tagName": "jx-icon",
-                              "attributes": {
-                                "part": "context-trigger-caret"
-                              },
-                              "$props": {
-                                "name": "caret-down"
-                              }
-                            }
                           ]
                         }
-                      ]
+                      }
                     },
                     {
                       "tagName": "div",

package/src/surfaces/pane-context.ts

@@ -97,6 +97,15 @@ export interface PaneContextView {
   /** `full` draws the three axes; `lens` draws the rendering context as a read-only summary. */
   barMode: "full" | "lens";
   presetState: "shown" | "hidden";
+  /**
+   * The Back control, in a workspace that draws no tab strip (Media, Styles, Publish): shown over a
+   * view opened beside the workspace's home, naming where it leads
+   * (`workspace/workspace-back.ts`).
+   */
+  backState: "shown" | "hidden";
+  /** "Back to Media", "Back to Variables". */
+  backLabel: string;
+  backHint: string;
   bannerState: "shown" | "hidden";
   /** The lens's stated rendering context — "Tablet · français". */
   summary: string;
@@ -108,6 +117,11 @@ export interface PaneContextView {
 
   viewState: "shown" | "hidden";
   views: PaneContextChoice[];
+  /**
+   * Whether the Context axis (size, scheme, language, layout) is drawn. Hidden for a tab nothing is
+   * rendered under: a workspace home draws its own surface, not the document at a breakpoint.
+   */
+  contextState: "shown" | "hidden";
   previewState: "shown" | "hidden";
   previewOn: boolean;
   previewHint: string;
@@ -145,6 +159,8 @@ export interface PaneContextView {
 /** What a control can ask the pane to do. Every one of them is a decision the flow owns. */
 export interface PaneContextActions {
   openPresetMenu: (anchor: HTMLElement) => void;
+  /** Leave the view for the workspace home (`pane.backToHome`). */
+  goBack: () => void;
   chooseEditor: (kind: string) => void;
   chooseView: (view: string) => void;
   togglePreview: () => void;
@@ -216,6 +232,9 @@ function project(scope: PaneContextScope, view: PaneContextView): void {
   scope.zoomRegion = view.zoomRegion;
   scope.barMode = view.barMode;
   scope.presetState = view.presetState;
+  scope.backState = view.backState;
+  scope.backLabel = view.backLabel;
+  scope.backHint = view.backHint;
   scope.bannerState = view.bannerState;
   scope.summary = view.summary;
   scope.editorMode = view.editorMode;
@@ -223,6 +242,7 @@ function project(scope: PaneContextScope, view: PaneContextView): void {
   scope.editorValue = view.editorValue;
   scope.editorOptions = view.editorOptions;
   scope.viewState = view.viewState;
+  scope.contextState = view.contextState;
   scope.views = view.views;
   scope.previewState = view.previewState;
   scope.previewOn = view.previewOn;
@@ -254,9 +274,13 @@ function project(scope: PaneContextScope, view: PaneContextView): void {
 /** The projection a pane's chrome starts from — a bar with nothing in it yet. */
 export function emptyPaneContextView(): PaneContextView {
   return {
+    backHint: "",
+    backLabel: "",
+    backState: "hidden",
     bannerState: "hidden",
     barMode: "full",
     contextRegion: "",
+    contextState: "shown",
     contextSummary: "Base",
     editorLabel: "",
     editorMode: "static",

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

@@ -41,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;
 }

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
@@ -37,10 +37,10 @@ registerSurface("panel-page", pagePanelDoc);
  * `$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 {
   /** The row's identity: the repeater's key, and the argument every action is given. */
@@ -49,8 +49,15 @@ export interface PageRow {
   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.
@@ -139,6 +146,8 @@ export interface PagePanelActions {
   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. */
@@ -231,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 = "";
+}

package/src/surfaces/panel-signals.json

@@ -8,7 +8,7 @@
     "data-refreshing": "${state.refreshing ? '' : null}"
   },
   "style": {
-    "$description": "The `.signal-*`, `.signals-*` and `.data-*` rules of `styles/inspector.css`, carried here and keyed on `part`. A signal row is `part=\"entry\"` rather than `part=\"row\"` because the value tree mounted INSIDE an open one is `surfaces/panel-data.json`, whose lines are `part=\"row\"`; two documents sharing a container may not share a part name. Three token repairs travel with them, all of the shape `surfaces/git-panel.json` describes: `--spectrum-font-size-50` and the bare `10px` literals resolved only inside `<sp-theme>` and a document is mounted outside it, so every rule that read one would silently have taken its px fallback \u2014 they are `--jx-text-sm` (11px) and `--jx-text-xs` (10px) here, at the same values \u2014 and `--spectrum-corner-radius-75` is `--jx-radius-xs`, also at its own value. ONE rule is repaired rather than moved: `.signal-badge.handler` never matched anything, because `defCategory` has returned `\"function\"` since the handler category was renamed, so a function entry's badge was the only one of five drawn untinted. The tint is keyed on the category the projection actually emits now, and `--handler` is the token it was always written against. And one is DELETED, because the kit already draws it: `.signal-del`'s hand-rolled visibility hiding is `[part=\"delete\"]`'s reveal on `:hover` and on `:focus-within` \u2014 the old rule was `:hover` alone, so tabbing to Delete moved the keyboard onto an invisible control.",
+    "$description": "The `.signal-*`, `.signals-*` and `.data-*` rules of `styles/inspector.css`, carried here and keyed on `part`. A signal row is `part=\"entry\"` rather than `part=\"row\"` because the value tree mounted INSIDE an open one is `surfaces/panel-data.json`, whose lines are `part=\"row\"`; two documents sharing a container may not share a part name. Three token repairs travel with them, all of one shape: `--spectrum-font-size-50` and the bare `10px` literals resolved only inside `<sp-theme>` and a document is mounted outside it, so every rule that read one would silently have taken its px fallback \u2014 they are `--jx-text-sm` (11px) and `--jx-text-xs` (10px) here, at the same values \u2014 and `--spectrum-corner-radius-75` is `--jx-radius-xs`, also at its own value. ONE rule is repaired rather than moved: `.signal-badge.handler` never matched anything, because `defCategory` has returned `\"function\"` since the handler category was renamed, so a function entry's badge was the only one of five drawn untinted. The tint is keyed on the category the projection actually emits now, and `--handler` is the token it was always written against. And one is DELETED, because the kit already draws it: `.signal-del`'s hand-rolled visibility hiding is `[part=\"delete\"]`'s reveal on `:hover` and on `:focus-within` \u2014 the old rule was `:hover` alone, so tabbing to Delete moved the keyboard onto an invisible control.",
     "display": "flex",
     "flexDirection": "column",
     "minHeight": "0",

package/src/surfaces/panel-signals.ts

@@ -16,7 +16,7 @@
  * field, and a table field's rows and cells — and inside the innermost one `$map/item` is the cell,
  * so a control genuinely cannot see the entry it belongs to. Each record therefore carries the
  * entry name, the field key and (for a cell) its row and column, which the flow looks straight back
- * up. That is the same answer `surfaces/git-panel.json` gives for its nested file rows.
+ * up. That is the same answer `surfaces/publish-workspace.json` gives for its nested file rows.
  *
  * **Five islands, all through `onNodeCreated`** (specs/studio-ui-guidelines.md §9.4). The
  * expression editor, the statement-card editor and the media picker are lit surfaces of their own
@@ -24,10 +24,10 @@
  * resolved-value tree is a document of its own (`surfaces/panel-data.ts`). The document renders an
  * empty host for each and the flow fills it.
  *
- * **The container is not cleared**, for the reason `surfaces/git-panel.ts` states: a panel body is
- * a node lit renders into and its comment markers are how lit finds its own content again. So the
- * document is APPENDED, and {@link SignalsSurfaceHandle.attached} is how the panel finds out that
- * the Navigator has since painted another panel over the top of it.
+ * **The container is not cleared**, because a panel body is a node lit renders into and its comment
+ * markers are how lit finds its own content again. So the document is APPENDED, and
+ * {@link SignalsSurfaceHandle.attached} is how the panel finds out that the Navigator has since
+ * painted another panel over the top of it.
  *
  * @docs studio/logic/data
  */