@jxsuite/studio 4.1.0 → 5.0.0

package/src/content/entry-editor.ts

@@ -9,10 +9,17 @@
  * editor at all — it opened as a component tree, so `bio` was a node's property and `links` was a
  * child array.
  *
- * This is one editor over `renderForm`, so every improvement to the engine reaches content entries,
- * settings and the inspector at once — and the `reference` control in particular arrives here for
- * free, which is what makes `author: { "$ref": "#/content/authors" }` a picker instead of a text
- * field you have to type an id into.
+ * This is one editor over the schema form, so every improvement to the engine reaches content
+ * entries, settings and the inspector at once — and the `reference` control in particular arrives
+ * here for free, which is what makes `author: { "$ref": "#/content/authors" }` a picker instead of
+ * a text field you have to type an id into.
+ *
+ * **This module is the FLOW; `surfaces/entry-editor.json` is the markup.** Everything below decides
+ * something — which pane holds which tab, which collection a path belongs to, which record the
+ * fields live in, which required keys are absent, what a draft flag commits into — and hands the
+ * surface a projection with no decisions left in it. The form itself is an island the surface
+ * renders empty: `ui/schema-form.ts` hands back a host ELEMENT, and {@link renderEntryMode} places
+ * it in the node the document announces.
  *
  * **It is an editor of the same tab, not a second document.** Like `settings/settings-document.ts`,
  * it unshifts its mode onto the tab the file already has, so ⌘S, the dirty flag, the transaction
@@ -33,20 +40,20 @@
  * @docs studio/projects/content-types
  */
 
-import { html, nothing, render as litRender } from "lit-html";
-import { live } from "lit-html/directives/live.js";
 import { activeRegistry } from "../commands/active-registry";
 import { effect, effectScope } from "../reactivity";
 import { projectState } from "../store";
 import { resolveContextPointer } from "../services/context-resolver";
 import { transactDoc } from "../tabs/transact";
-import { renderForm } from "../ui/schema-form";
+import { mountSchemaForm } from "../ui/schema-form";
+import { mountEntryEditorSurface } from "../surfaces/entry-editor";
 import { paneRegion } from "../ui/regions";
 import { activateTab, workspace } from "../workspace/workspace";
 import { commitEntryFields, entryFields, mutateEntryField } from "./entry-fields";
 import { DRAFT_FIELD, DRAFT_MEANING, hasDraftAxis, isDraftEntry } from "./draft-state";
 import { collectionOfPath, missingRequired } from "./entry-model";
 import type { EntryCollection } from "./entry-model";
+import type { EntryEditorSurfaceHandle, EntryEditorView } from "../surfaces/entry-editor";
 import type { JsonSchema, SchemaFormContext } from "../ui/schema-form";
 import type { Tab } from "../tabs/tab";
 import type { CanvasSurface } from "../canvas/canvas-surface";
@@ -65,6 +72,7 @@ interface ActiveEntryPane {
   paneId: string;
   tabId: string;
   wrap: HTMLElement;
+  surface: EntryEditorSurfaceHandle;
   scope: { stop: () => void; run: <T>(fn: () => T) => T | undefined };
 }
 
@@ -85,7 +93,9 @@ function activeIn(paneId: string): ActiveEntryPane | null {
 /** Whether this tab's entry form is already mounted in this pane and still in the document. */
 export function entryPaneMounted(paneId: string, tab: Tab): boolean {
   const panel = activeIn(paneId);
-  return panel !== null && panel.tabId === tab.id && panel.wrap.isConnected;
+  return (
+    panel !== null && panel.tabId === tab.id && panel.wrap.isConnected && panel.surface.attached()
+  );
 }
 
 /** Tear one pane's entry form down (mode change, tab switch, project close). Idempotent. */
@@ -95,6 +105,7 @@ export function detachEntryPane(paneId: string): void {
     return;
   }
   panel.scope.stop();
+  panel.surface.dispose();
   _active.delete(paneId);
 }
 
@@ -112,27 +123,42 @@ export function setEntryDraft(tab: Tab, draft: boolean): void {
   transactDoc(tab, (t) => mutateEntryField(t, DRAFT_FIELD, draft as JsonValue));
 }
 
+/** What the tab chip's draft pill says. A value, drawn by `surfaces/tab-strip.json`. */
+export interface DraftPill {
+  /** The word on the pill: "Draft" or "Published". */
+  text: string;
+  /** Its tooltip: what being a draft actually excludes, or that it is not one. */
+  title: string;
+  draft: boolean;
+}
+
 /**
- * The draft pill for a tab, or `nothing`.
+ * The draft pill for a tab, or `null` when its document has no draft axis at all.
  *
  * Drawn on the pane's tab chip (`panels/tab-strip.ts`) rather than only inside the editor, because
  * the failure this exists to prevent is publishing something you thought was private — and that
- * mistake is made while looking at a tab, not while looking at a form. It renders for any entry
- * whose collection declares the field, so "Published" is as visible as "Draft"; a collection with
- * no draft workflow shows neither.
+ * mistake is made while looking at a tab, not while looking at a form. It states its two words for
+ * any entry whose collection declares the field, so "Published" is as visible as "Draft"; a
+ * collection with no draft workflow states neither, which is what `null` means.
+ *
+ * **It was the ONE piece of markup left in this file, and it was not this surface's.** It was a
+ * fragment of the tab CHIP — a `<span>` lit interpolated into a `repeat()` that rebuilt on every
+ * strip repaint — and it said so, and that it would convert when `panels/tab-strip.ts` converted.
+ * The strip is a Jx document now, so this is a projection: two strings and a flag, drawn by the
+ * chip's `status` slot, and `.entry-pill`'s rules in `styles/overlays.css` are dead with it.
  */
-export function entryDraftPill(tab: Tab) {
+export function entryDraftPill(tab: Tab): DraftPill | null {
   const collection = collectionOfPath(tab.documentPath);
   const fields = entryFields(tab);
   if (!collection || !hasDraftAxis(collection.schema, fields)) {
-    return nothing;
+    return null;
   }
   const draft = isDraftEntry(fields);
-  return html`<span
-    class=${draft ? "entry-pill entry-pill--draft" : "entry-pill"}
-    title=${draft ? DRAFT_MEANING : "Not marked a draft."}
-    >${draft ? "Draft" : "Published"}</span
-  >`;
+  return {
+    draft,
+    text: draft ? "Draft" : "Published",
+    title: draft ? DRAFT_MEANING : "Not marked a draft.",
+  };
 }
 
 // ─── The form ────────────────────────────────────────────────────────────────
@@ -168,61 +194,45 @@ function absentRequiredErrors(
   return errors;
 }
 
-/** The header: what this is, and whether it is a draft. */
-function headerTpl(tab: Tab, collection: EntryCollection) {
-  const fields = entryFields(tab);
-  const draftAxis = hasDraftAxis(collection.schema, fields);
-  const draft = isDraftEntry(fields);
-  return html`
-    <div class="entry-editor-header">
-      <h3>${tab.documentPath?.split("/").pop() ?? "Untitled"}</h3>
-      <span class="entry-editor-collection">${collection.name}</span>
-      ${
-        draftAxis
-          ? html`
-              <sp-switch
-                size="s"
-                class="entry-draft-switch"
-                .checked=${live(draft)}
-                title=${DRAFT_MEANING}
-                @change=${(e: Event) => setEntryDraft(tab, (e.target as HTMLInputElement).checked)}
-                >Draft</sp-switch
-              >
-            `
-          : nothing
-      }
-    </div>
-    ${draft ? html`<p class="entry-editor-note">${DRAFT_MEANING}</p>` : nothing}
-  `;
+/** What the document says when the file belongs to no collection: the reason, then the fix. */
+function emptyLine(tab: Tab): string {
+  return `${tab.documentPath ?? "This document"} is not an entry of any content collection, so there is no schema to draw a form from.`;
 }
 
-/**
- * What the editor says when the document is not an entry.
- *
- * The mode is reachable from the palette and from `__jxAutomation` on any tab, so this state is
- * real and must name the reason and the fix rather than drawing an empty form — "no fields" and
- * "this file belongs to no collection" are different sentences, and only one of them is true here.
- */
-function notAnEntryTpl(tab: Tab) {
-  return html`
-    <div class="entry-editor-empty">
-      <p>
-        ${tab.documentPath ?? "This document"} is not an entry of any content collection, so there
-        is no schema to draw a form from.
-      </p>
-      <p class="entry-editor-note">
-        A collection is a <code>content</code> entry in <code>project.json</code> whose
-        <code>source</code> directory contains this file and which declares a <code>schema</code>.
-      </p>
-      <sp-action-button
-        size="s"
-        @click=${() => {
-          void activeRegistry()?.run("settings.open", { section: "content" });
-        }}
-        >Content types…</sp-action-button
-      >
-    </div>
-  `;
+/** Everything the document draws, computed from the tab and the project's content map. */
+function entryView(paneId: string, tab: Tab, collection: EntryCollection | null): EntryEditorView {
+  const region = paneRegion(paneId, "entry");
+  const fieldsRegion = paneRegion(paneId, "entry/fields");
+  if (!collection) {
+    return {
+      collection: "",
+      draft: false,
+      draftAxis: "hidden",
+      draftHint: DRAFT_MEANING,
+      emptyLine: emptyLine(tab),
+      fieldsRegion,
+      name: "",
+      note: "",
+      noteState: "hidden",
+      region,
+      stage: "empty",
+    };
+  }
+  const fields = entryFields(tab);
+  const draft = isDraftEntry(fields);
+  return {
+    collection: collection.name,
+    draft,
+    draftAxis: hasDraftAxis(collection.schema, fields) ? "shown" : "hidden",
+    draftHint: DRAFT_MEANING,
+    emptyLine: "",
+    fieldsRegion,
+    name: tab.documentPath?.split("/").pop() ?? "Untitled",
+    note: DRAFT_MEANING,
+    noteState: draft ? "shown" : "hidden",
+    region,
+    stage: "entry",
+  };
 }
 
 /**
@@ -231,6 +241,9 @@ function notAnEntryTpl(tab: Tab) {
  * The same non-iframe-editor pattern as the grid, the Library and Project Settings: this owns its
  * own effect scope from here, so a field commit repaints the form and nothing else — repainting
  * through the canvas pipeline would remount the document's iframe on every keystroke.
+ *
+ * @param {CanvasSurface} surface
+ * @param {Tab} tab
  */
 export function renderEntryMode(surface: CanvasSurface, tab: Tab): void {
   const { paneId, wrap: canvasWrap } = surface;
@@ -239,46 +252,76 @@ export function renderEntryMode(surface: CanvasSurface, tab: Tab): void {
   }
   detachEntryPane(paneId);
 
-  const scope = effectScope();
-  const panel: ActiveEntryPane = { paneId, scope, tabId: tab.id, wrap: canvasWrap };
-  _active.set(paneId, panel);
+  let panel: ActiveEntryPane | null = null;
+  /**
+   * The node the document renders for the schema form, as the document announced it.
+   *
+   * Held rather than queried: it lives inside a `$switch` case, so the reconciler builds a NEW one
+   * whenever the file stops or starts belonging to a collection, and a handle found once by
+   * selector would be detached DOM from that moment on.
+   */
+  let formHost: HTMLElement | null = null;
 
-  const rerender = () => {
-    if (activeIn(paneId) === panel) {
+  const redraw = () => {
+    if (panel !== null && activeIn(paneId) === panel) {
       draw();
     }
   };
 
+  /**
+   * Put the schema form into the node the document made for it.
+   *
+   * `ui/schema-form.ts` hands back a host ELEMENT rather than a template, so this places it.
+   * Calling `mountSchemaForm` again with the same key updates the standing form in place, which is
+   * what keeps the caret in a field across the repaint a commit provokes.
+   */
+  const paintForm = (collection: EntryCollection | null) => {
+    if (!formHost || !collection) {
+      return;
+    }
+    const fields = entryFields(tab);
+    const form = mountSchemaForm(`entry:${paneId}`, collection.schema as JsonSchema, fields, {
+      context: formContext(tab),
+      errors: absentRequiredErrors(collection, fields),
+      onChange: (patch) => commitEntryFields(tab, patch),
+      rerender: redraw,
+    });
+    if (form.parentNode !== formHost) {
+      formHost.replaceChildren(form);
+    }
+  };
+
   const draw = () => {
     const collection = collectionOfPath(tab.documentPath);
     if (!collection) {
-      litRender(
-        html`<div class="entry-editor" data-jx-region=${paneRegion(paneId, "entry")}>
-          ${notAnEntryTpl(tab)}
-        </div>`,
-        canvasWrap,
-      );
-      return;
+      /* The `fields` node goes with the case that held it, so the handle is dropped here rather
+         than left pointing at a node the reconciler is about to remove. */
+      formHost = null;
     }
-    const fields = entryFields(tab);
-    litRender(
-      html`
-        <div class="entry-editor" data-jx-region=${paneRegion(paneId, "entry")}>
-          ${headerTpl(tab, collection)}
-          <div class="entry-editor-fields" data-jx-region=${paneRegion(paneId, "entry/fields")}>
-            ${renderForm(collection.schema as JsonSchema, fields, {
-              context: formContext(tab),
-              errors: absentRequiredErrors(collection, fields),
-              onChange: (patch) => commitEntryFields(tab, patch),
-              rerender,
-            })}
-          </div>
-        </div>
-      `,
-      canvasWrap,
-    );
+    panel?.surface.update(entryView(paneId, tab, collection));
+    paintForm(collection);
   };
 
+  const scope = effectScope();
+  const mounted = mountEntryEditorSurface(
+    canvasWrap,
+    entryView(paneId, tab, collectionOfPath(tab.documentPath)),
+    {
+      openContentTypes: () => {
+        void activeRegistry()?.run("settings.open", { section: "content" });
+      },
+      setDraft: (draft) => setEntryDraft(tab, draft),
+    },
+    {
+      fieldsSlot: (host) => {
+        formHost = host;
+        paintForm(collectionOfPath(tab.documentPath));
+      },
+    },
+  );
+  panel = { paneId, scope, surface: mounted, tabId: tab.id, wrap: canvasWrap };
+  _active.set(paneId, panel);
+
   scope.run(() => {
     effect(() => {
       if (activeIn(paneId) !== panel) {

package/src/editor/canvas-slash-bridge.ts

@@ -1,7 +1,7 @@
 /// <reference lib="dom" />
 /**
- * Parent-realm adapter between the canvas iframe's slash-menu bridge and the real lit/Spectrum
- * menu. The iframe engine detects "/", its {@link file://../canvas/iframe-slash.ts} controller posts
+ * Parent-realm adapter between the canvas iframe's slash-menu bridge and the real host-realm menu.
+ * The iframe engine detects "/", its {@link file://../canvas/iframe-slash.ts} controller posts
  * `slashShow`/`slashNav`/`slashDismiss`, the host converts coordinates and calls this handler;
  * select/dismiss flow back over the same channel as `slashSelect`/`slashDismissed`. Registered via
  * {@link setCanvasSlashHandler} in studio.ts (DI keeps the host module free of the menu's lit

package/src/editor/context-menu.ts

@@ -18,12 +18,11 @@
  *   vanishing and leaving the author to guess the menu is state-dependent at all.
  *
  * Group ordering and `when` filtering are the registry's; dividers fall where `group` changes. What
- * is left here is positioning, popover rendering, and the menu keyboard contract.
+ * is left here is the projection: the menu itself is the `menu` surface (`surfaces/menu.json`), a
+ * `jx-menu` the kit gives its keyboard contract, its popover and its dismissal.
  */
-import { html, nothing } from "lit-html";
 import { displayTagName } from "@jxsuite/schema/guards";
 import { jsonClone } from "../utils/studio-utils";
-import { ref } from "lit-html/directives/ref.js";
 import { htmlToJx } from "@jxsuite/markup/html-to-jx";
 import { childIndex, getNodeAtPath, parentElementPath } from "../store";
 import { activeTab, workspace } from "../workspace/workspace";
@@ -39,12 +38,12 @@ import {
 } from "../tabs/transact";
 import { notify } from "../services/notify";
 import { componentRegistry } from "../files/components";
-import { renderPopover } from "../ui/layers";
-import { rectOf } from "../utils/geometry";
 import { createCommandRegistry } from "../commands/registry";
 import { registerSelectionCommands } from "../panels/block-action-bar";
 import { convertToComponent } from "./convert-to-component";
 import { activeRegistry } from "../commands/active-registry";
+import { openMenu } from "../surfaces/menu";
+import type { MenuHandle, MenuRowProjection } from "../surfaces/menu";
 import { defaultCommands, noopCommandDeps } from "../commands/defaults";
 import { inspectorCommands } from "../panels/properties-panel";
 import { usagesSupported } from "../services/references";
@@ -825,143 +824,32 @@ export function contextMenuRegistry(): CommandRegistry {
 
 // ─── Context menu ─────────────────────────────────────────────────────────────
 
-/** One rendered row: a record plus everything the registry says about it right now. */
-interface MenuRow {
-  command: AnyCommand;
-  enabled: boolean;
-  /** The `requires` sentence, printed as a greyed subtitle when the row is disabled. */
-  reason: string | undefined;
-  chord: string | undefined;
-  /** Whether a divider opens this row's group. */
-  dividerAbove: boolean;
-}
-
-let _ctxHandle: ReturnType<typeof renderPopover> | null = null;
-let _rows: MenuRow[] = [];
-let _activeIdx = 0;
-/** Whatever owned the keyboard before the menu took it, so it can be handed back. */
-let _opener: HTMLElement | null = null;
-
-/** The rendered `sp-menu-item` elements, in row order. */
-function itemElements(): HTMLElement[] {
-  return _ctxHandle
-    ? [..._ctxHandle.host.querySelectorAll<HTMLElement>("sp-menu-item[data-command-id]")]
-    : [];
-}
+let _menu: MenuHandle | null = null;
+let _rows: MenuRowProjection[] = [];
 
 /**
- * Move the roving tabindex (and the caret) to `index`, wrapping at both ends.
- *
- * Still imperative, deliberately and not happily. The menu's template is inline in the
- * `renderPopover` call and its `ref` closure MUTATES the `x`/`y` it was rendered with to clamp the
- * popover into the viewport, so re-rendering to move focus would also re-run the placement from
- * stale coordinates. The template's own `tabindex`/`?focused` now read `_activeIdx` rather than
- * hard-coding row 0, so first paint and this function at least agree on where focus starts; making
- * the binding the only writer needs the template hoisted out and the placement state with it.
- * Carried in check-lit-conventions' allow-list with that reason.
+ * Run the row's command, then close. A disabled row never reaches here — the row refuses its own
+ * activation — but the registry's own gate is what would throw if one did.
  */
-function focusItem(index: number): void {
-  const items = itemElements();
-  if (items.length === 0) {
-    return;
-  }
-  const next = ((index % items.length) + items.length) % items.length;
-  for (const [at, item] of items.entries()) {
-    item.tabIndex = at === next ? 0 : -1;
-    item.toggleAttribute("focused", at === next);
-  }
-  _activeIdx = next;
-  items[next]?.focus();
-}
-
-/** Run the row's command, then close. Disabled rows explain themselves and do nothing. */
-function activateRow(index: number): void {
-  const row = _rows[index];
-  if (!row?.enabled) {
+function activateRow(id: string): void {
+  const row = _rows.find((r) => r.id === id);
+  if (!row || row.disabled) {
     return;
   }
   // Run BEFORE dismissing: every `run` reads `deps.target()` synchronously on entry, and dismissal
   // Clears the target.
-  const result = contextMenuRegistry().run(row.command.id);
+  const result = contextMenuRegistry().run(id);
   dismissContextMenu();
   void result;
 }
 
-/**
- * The menu keyboard contract: Up/Down/Home/End move, Enter/Space activate, Escape and Tab dismiss.
- *
- * Bound on `document` in the CAPTURE phase, the same shape `editor/slash-menu.ts` uses: the app's
- * own Escape (which walks the selection ladder) and the canvas arrow-key nudges must not also fire,
- * and a bubble-phase handler on the popover would race Spectrum's own menu key handling.
- */
-function onMenuKeydown(e: KeyboardEvent): void {
-  if (!_ctxHandle) {
-    return;
-  }
-  switch (e.key) {
-    case "ArrowDown": {
-      focusItem(_activeIdx + 1);
-      break;
-    }
-    case "ArrowUp": {
-      focusItem(_activeIdx - 1);
-      break;
-    }
-    case "Home": {
-      focusItem(0);
-      break;
-    }
-    case "End": {
-      focusItem(_rows.length - 1);
-      break;
-    }
-    case "Enter":
-    case " ": {
-      activateRow(_activeIdx);
-      break;
-    }
-    case "Escape":
-    case "Tab": {
-      dismissContextMenu();
-      break;
-    }
-    default: {
-      return;
-    }
-  }
-  e.preventDefault();
-  e.stopPropagation();
-}
-
-/** Drop the menu's global state and hand the keyboard back to whatever opened it. */
-function teardownMenu(): void {
-  document.removeEventListener("keydown", onMenuKeydown, true);
-  const opener = _opener;
-  _target = null;
-  _rows = [];
-  _activeIdx = 0;
-  _opener = null;
-  // Only when the menu still held the keyboard: an outside CLICK has already moved focus somewhere
-  // The author chose, and yanking it back to the opener would fight them.
-  const active = document.activeElement;
-  if (opener?.isConnected && (!active || active === document.body)) {
-    opener.focus();
-  }
-}
-
 /** Dismiss the context menu if open. */
 export function dismissContextMenu() {
-  if (!_ctxHandle) {
-    return;
-  }
-  const handle = _ctxHandle;
-  _ctxHandle = null;
-  handle.dismiss();
-  teardownMenu();
+  _menu?.close();
 }
 
-/** Ask the registry what belongs in `placement` right now and decorate each record for rendering. */
-function buildRows(placement: Placement): MenuRow[] {
+/** Ask the registry what belongs in `placement` right now and project each record for the surface. */
+function buildRows(placement: Placement): MenuRowProjection[] {
   const registry = contextMenuRegistry();
   let group: string | undefined;
   return registry.forPlacement(placement).map((command, index) => {
@@ -969,42 +857,31 @@ function buildRows(placement: Placement): MenuRow[] {
     ({ group } = command);
     const enabled = registry.isEnabled(command.id);
     const chord = registry.keymap.formatBinding(command.id);
-    return {
-      // A chord that just restates the row's own name ("Delete" bound to Delete) teaches nothing
-      // And reads as a stutter, so it is not printed.
-      chord: chord?.toLowerCase() === command.title.toLowerCase() ? undefined : chord,
-      command,
+    // A chord that just restates the row's own name ("Delete" bound to Delete) teaches nothing
+    // And reads as a stutter, so it is not printed.
+    const taught = chord && chord.toLowerCase() !== command.title.toLowerCase() ? chord : undefined;
+    const reason = enabled ? undefined : registry.disabledReason(command.id);
+    const row: MenuRowProjection = {
+      destructive: command.destructive === true,
+      disabled: !enabled,
       dividerAbove,
-      enabled,
-      reason: enabled ? undefined : registry.disabledReason(command.id),
+      id: command.id,
+      title: command.title,
     };
+    if (taught) {
+      row.chord = taught;
+    }
+    if (reason) {
+      row.requires = reason;
+    }
+    return row;
   });
 }
 
-/** One row. Everything it prints comes off the record — nothing is passed in per call site. */
-function rowTemplate(row: MenuRow, index: number) {
-  return html`${
-      row.dividerAbove ? html`<sp-menu-divider role="separator"></sp-menu-divider>` : nothing
-    }<sp-menu-item
-      role="menuitem"
-      data-command-id=${row.command.id}
-      tabindex=${index === _activeIdx ? 0 : -1}
-      ?focused=${index === _activeIdx}
-      ?disabled=${!row.enabled}
-      aria-disabled=${row.enabled ? "false" : "true"}
-      style=${row.command.destructive && row.enabled ? "color: var(--danger)" : ""}
-      @click=${() => activateRow(index)}
-      >${row.command.title}${
-        row.chord
-          ? html`<kbd slot="value" style="color: var(--fg-dim)">${row.chord}</kbd>`
-          : nothing
-      }${
-        row.reason ? html`<span slot="description">Needs ${row.reason}</span>` : nothing
-      }</sp-menu-item
-    >`;
-}
-
 /**
+ * Open the element menu at the pointer. The menu itself is the `menu` surface — a `jx-menu` of the
+ * rows built here — so what this function owns is the target, the selection and the projection.
+ *
  * @param {MouseEvent} e
  * @param {JxPath} path
  * @param {{
@@ -1046,49 +923,21 @@ export function showContextMenu(
     _target = null;
     return;
   }
-  _activeIdx = 0;
-  _opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
 
-  let x = e.clientX;
-  let y = e.clientY;
-
-  _ctxHandle = renderPopover(
-    html`<sp-popover
-      open
-      style="position:fixed;z-index:10000;left:${x}px;top:${y}px"
-      ${ref((el) => {
-        if (!el) {
-          return;
-        }
-        requestAnimationFrame(() => {
-          const popover = el as HTMLElement;
-          const menuRect = rectOf(popover);
-          if (x + menuRect.width > window.innerWidth) {
-            x = window.innerWidth - menuRect.width - 4;
-          }
-          if (y + menuRect.height > window.innerHeight) {
-            y = window.innerHeight - menuRect.height - 4;
-          }
-          popover.style.left = `${x}px`;
-          popover.style.top = `${y}px`;
-        });
-      })}
-    >
-      <sp-menu role="menu" aria-label="Element actions">
-        ${_rows.map((row, index) => rowTemplate(row, index))}
-      </sp-menu>
-    </sp-popover>`,
-    {
-      dismissOnOutsideClick: true,
-      onDismiss: () => {
-        _ctxHandle = null;
-        teardownMenu();
-      },
+  const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  _menu = openMenu({
+    label: "Element actions",
+    onClosed: (handle) => {
+      if (_menu === handle) {
+        _menu = null;
+        _target = null;
+        _rows = [];
+      }
     },
-  );
-
-  document.addEventListener("keydown", onMenuKeydown, true);
-  // A frame later: lit has committed the items, and focusing the first row is what makes the whole
-  // Keyboard contract reachable at all (the menu used to open with focus left behind it).
-  requestAnimationFrame(() => focusItem(0));
+    opener,
+    origin: { x: e.clientX, y: e.clientY },
+    region: "context",
+    rows: _rows,
+    run: activateRow,
+  });
 }