@jxsuite/studio 6.1.2 → 8.0.0

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
@@ -31,17 +41,27 @@ 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 });
+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),
+    };
+  });
 }
 
 /**
@@ -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";
 }

package/src/panels/seo-modal.ts

@@ -8,14 +8,14 @@
  * writing. A previewed SERP result is not a field; it is a picture you study, and studying it in a
  * strip above the canvas meant the card grew taller than the thing it describes.
  *
- * So it opens as a modal, from two places — the Document Header card and the Navigator's Page
- * panel. Two doors because the two are different moments: one while writing the page, one while
- * working on its head material. Both run `document.openSeo`, so there is a third door in the
- * palette and no surface owns the capability (one definition site per action, §13).
+ * So it opens as a modal, from the Inspector's Page tab (and, once, from the Document Header card
+ * Edit used to dock above the page, studio.md §4.2). The tab's button runs `document.openSeo`, so
+ * there is a second door in the palette and no surface owns the capability (one definition site per
+ * action, §13).
  *
- * **The card keeps the fields; the modal keeps the picture.** Title still lives on the card,
- * because it is the one head value you type while writing. Everything the modal holds is either a
- * rendering of what the build will emit or a field you set once and leave.
+ * **The Page tab keeps the fields; the modal keeps the picture.** Title lives on the tab, because
+ * it is the one head value you type while writing. Everything the modal holds is either a rendering
+ * of what the build will emit or a field you set once and leave.
  *
  * **This module is the flow; `surfaces/seo.json` is the markup.** What lives here is every
  * judgement the picture rests on: which realm a commit is written into, what each previewed line
@@ -24,9 +24,9 @@
  * decision — it holds the parts, the ARIA and the styling, and it branches on flags this module
  * hands it.
  *
- * The mutation path is the card's, unchanged: a markdown page commits through
- * `applyContentMutation` and a JSON one through `transact`, both taking the tab so the modal edits
- * the document it was opened over rather than whichever pane has focus.
+ * The mutation path is the Page tab's: a markdown page commits through `applyContentMutation` and a
+ * JSON one through `transact`, both taking the tab so the modal edits the document it was opened
+ * over rather than whichever pane has focus.
  *
  * @docs studio/editing/frontmatter
  */
@@ -34,21 +34,18 @@
 import { activeRegistry } from "../commands/active-registry";
 import { HEAD_EDIT_DEBOUNCE } from "../ui/timing";
 import { previewAssetSrc } from "../canvas/asset-refs";
-import { getPlatform } from "../platform";
 import { layerHost } from "../ui/layers";
-import { mediaSiteUrl } from "../files/media-paths";
-import { openMenu } from "../surfaces/menu";
 import { openSeoSurface } from "../surfaces/seo";
 import { provenanceTitle } from "./provenance";
-import { PUBLIC_DIR } from "@jxsuite/schema/asset-paths";
-import { scanLibrary } from "../browse/library-model";
 import { tabLabel } from "./tab-strip";
 import { transact } from "../tabs/transact";
 import { activeTab } from "../workspace/workspace";
-import { MEDIA_EXTENSIONS, uploadAccept, uploadAssets } from "../files/media-upload";
+import { pickAndUpload, showMediaPickerPopover } from "../ui/media-picker";
 import {
   OG_FIELDS,
   PAGE_FIELDS,
+  pageDescription,
+  setPageDescription,
   applyContentMutation,
   buildHeadDoc,
   findLinkEntry,
@@ -226,6 +223,11 @@ function writeField(
     applyMutation((doc: JxMutableNode) => upsertLink(doc, "icon", trimmed));
     return;
   }
+  if (key === "description") {
+    // The page's one description, written where the build reads it.
+    applyMutation((doc: JxMutableNode) => setPageDescription(doc, trimmed));
+    return;
+  }
   const field = META_BY_KEY.get(key);
   if (!field) {
     return;
@@ -252,35 +254,6 @@ function cancelPending(key?: string): void {
   }
 }
 
-// ─── The project's media ──────────────────────────────────────────────────────
-
-/** The listing, once. Invalidated by an upload, which is the only thing that changes it here. */
-let _media: string[] | null = null;
-
-/**
- * Every media file under `public/`, as the site URLs a pick would write.
- *
- * `browse/library-model.ts`'s walker rather than a second one: it is the scanner the Library pane
- * already runs over the same tree, it records what it could not read instead of swallowing it, and
- * it skips the directories nobody wants walked. The site URL is the authored form — what production
- * serves — and `files/media-paths.ts` holds the one definition of that mapping.
- */
-async function mediaChoices(): Promise<string[]> {
-  if (_media) {
-    return _media;
-  }
-  const { files } = await scanLibrary([PUBLIC_DIR], getPlatform());
-  _media = files
-    .filter((file) => MEDIA_EXTENSIONS.has(file.ext))
-    .map((file) => mediaSiteUrl(file.path));
-  return _media;
-}
-
-/** Forget the listing: it was derived from a tree an upload has just changed. */
-function invalidateMediaChoices(): void {
-  _media = null;
-}
-
 // ─── The modal ───────────────────────────────────────────────────────────────
 
 /** The open surface, or `null`. One at a time: it is about the focused document. */
@@ -359,9 +332,12 @@ function buildView(tab: Tab, headDoc: JxMutableNode, head: JxHeadEntry[]): SeoVi
         note: "",
         rows: [
           ...PAGE_FIELDS.map((field) =>
-            editRow(field.key, field.label, metaValue(head, field.key), {
-              multiline: field.multiline,
-            }),
+            editRow(
+              field.key,
+              field.label,
+              field.key === "description" ? pageDescription(headDoc) : metaValue(head, field.key),
+              { multiline: field.multiline },
+            ),
           ),
           editRow(ICON_KEY, "Icon", iconHref, { media: true }),
         ],
@@ -409,69 +385,26 @@ function commitField(key: string, value: string): void {
   renderSeoModal();
 }
 
-/** Open the OS file picker for a media row, and assign the first file it returns. */
+/**
+ * Upload into a media row: the image field's own Upload (`ui/media-picker.ts`), which opens the
+ * picker, uploads through the one core, and hands the first file's ref back. A commit that lands
+ * after the modal closed writes nothing, because {@link commitField} is about the open modal.
+ */
 function uploadInto(key: string): void {
-  /* The input is created per click and discarded after: a hidden one kept in the document would be
-     a node the surface owns outside its own document, which is exactly what a surface may not
-     have. */
-  const input = document.createElement("input");
-  input.type = "file";
-  input.multiple = true;
-  input.accept = uploadAccept();
-  input.addEventListener("change", () => {
-    if (!input.files?.length) {
-      return;
-    }
-    void uploadAssets([...input.files]).then((uploaded) => {
-      invalidateMediaChoices();
-      const [first] = uploaded;
-      if (first) {
-        commitField(key, first.ref);
-      }
-    });
-  });
-  input.click();
+  pickAndUpload((ref: string) => commitField(key, ref));
 }
 
 /**
- * Offer the project's media for one row.
+ * Offer the project's images for one row: the media picker's own compact browser, with its **Browse
+ * all images…** row opening the Media workspace's surface in pick mode.
  *
- * A kit menu rather than the Spectrum popover `ui/media-picker.ts` draws, and it has to be: a modal
- * `<dialog>` is in the top layer, so an overlay painted into a layer div renders UNDERNEATH the
- * dialog that opened it and is inert besides (`specs/ui.md` §7). The menu is shown with the Browse
- * button as its `source`, which is what puts it in the dialog's own top-layer hierarchy.
+ * Not a list of this module's own. It kept one (a walk of `public/` alone, and a kit menu of site
+ * URLs) because the old picker painted into a layer div UNDER the modal; the browser is a top-layer
+ * `jx-popover` now, so it paints over the modal that opened it, and the field and this dialog
+ * answer "what media does this project have" from the same listing (studio.md §9.3).
  */
 function browseFor(key: string, anchor: HTMLElement): void {
-  void mediaChoices().then((choices) => {
-    openMenu({
-      label: "Project media",
-      opener: anchor,
-      region: "seo-media",
-      rows:
-        choices.length > 0
-          ? choices.map((path) => ({
-              destructive: false,
-              disabled: false,
-              dividerAbove: false,
-              id: path,
-              run: () => commitField(key, path),
-              /* The site URL rather than the file name, because it is the string the pick writes
-                 AND the only one of the two that is unique: two `hero.jpg`s in two directories are
-                 one row twice over in a list that shows names. */
-              title: path,
-            }))
-          : [
-              {
-                destructive: false,
-                disabled: true,
-                dividerAbove: false,
-                id: "seo.media.empty",
-                requires: "a file under public/",
-                title: "No media in this project",
-              },
-            ],
-    });
-  });
+  showMediaPickerPopover(anchor, (ref: string) => commitField(key, ref), { images: true });
 }
 
 /** Open it over `tab`. Idempotent — opening it again re-points it at the current document. */
@@ -529,10 +462,10 @@ export function closeSeoModal(): void {
 /**
  * `document.openSeo` — the one capability behind both buttons.
  *
- * The Document Header card and the Page panel each render a control that runs this, so neither owns
- * it and the palette has it by name. A record rather than two click handlers, for the reason the
- * rendering-context axes became records: a surface that IS the capability is a capability the
- * palette, the assistant and `__jxAutomation` cannot reach.
+ * The Page tab renders a control that runs this, so it does not own it and the palette has it by
+ * name. A record rather than two click handlers, for the reason the rendering-context axes became
+ * records: a surface that IS the capability is a capability the palette, the assistant and
+ * `__jxAutomation` cannot reach.
  *
  * @returns {AnyCommand[]}
  */