@graview/primitives 0.1.64 → 0.1.66

package/dist/workbench/inspector.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { InvalidArguments, isLeftAlone, layer, nounOf, signInInstead, withArticle } from "@graview/core";
+import { choiceWords, InvalidArguments, isLeftAlone, layer, nounOf, pluralLabel, signInInstead, withArticle } from "@graview/core";
 import { edgeWords } from "@graview/core/words";
 import { failureWords } from "@graview/core/words";
 import { linkProvenance, provenanceWords } from "@graview/core/provenance";
@@ -10,6 +10,11 @@ import { Fragment, useEffect, useLayoutEffect, useMemo, useRef, useState } from
 import { AnswerArgs, nameOf } from "./answer-args.js";
 import { VISUALLY_HIDDEN } from "../primitives/index.js";
 import { ROVING_ITEM, useRoving } from "../roving.js";
+import { menuMatches } from "../menu-words.js";
+import { MENU_RANK_FLOOR, MENU_RANK_REST_MS, useFastRank } from "../menu-rank.js";
+import { TOLD_SUGGESTED_MOST, useToldSuggestions } from "../menu-told-door.js";
+import { openQuickAsk, preloadQuickAsk, useQuickAskDrawn, whereMenuStands } from "../quick-ask-desk.js";
+import { filledActs, notARow, useSuggested } from "../menu-suggested.js";
 import "../frame.js"; // A door: tied to what the page drew first (TIED DOORS, packages/primitives/src/frame.ts).
 /**
  * The pane itself (`Inspector` in `./inspector-door.tsx` draws it): what is
@@ -44,19 +49,29 @@ export function InspectorPane({ placement = "float", chosen = true } = {}) {
  * "Acts…", which opens the same menu. Measured from the scene's box, so it
  * stands in the box it is drawn in; under Up and the key, in the picture's
  * column of controls, because at the picture's foot a notice stood over it.
+ * On a phone's ground Up and the Key share a row above the picture, and a
+ * card under it takes the width: "Acts…" stands in that row too, to the
+ * left of them, where it covers no card's "Open".
  */
 function ChosenActs() {
     const { store, setMenuAt, view } = useGraview();
     const { selection } = useSelection();
     const mark = useRef(null);
     const [width, setWidth] = useState(null);
+    // How far from the right the row's leftmost control (the Key, else Up) stands: "Acts…" goes to its left.
+    const [rowRight, setRowRight] = useState(null);
     useLayoutEffect(() => {
         const parent = mark.current?.offsetParent ?? mark.current?.parentElement;
         if (!parent)
             return;
-        const measured = Math.round(parent.getBoundingClientRect().width);
+        const box = parent.getBoundingClientRect();
+        const measured = Math.round(box.width);
         if (measured !== width)
             setWidth(measured);
+        const row = [...parent.querySelectorAll('[data-testid="lines-key"][data-graview-up-row], [data-testid="overview"]')].map((one) => one.getBoundingClientRect()).filter((one) => one.width > 0 && one.top - box.top < 40);
+        const right = row.length > 0 ? Math.round(box.right - Math.min(...row.map((one) => one.left)) + 8) : null;
+        if (right !== rowRight)
+            setRowRight(right);
     });
     const one = selection.length === 1 && !view.overview ? store.graph.getNode(selection[0]) : undefined;
     if (!one || width === null || width >= RAIL_NEEDS)
@@ -64,12 +79,36 @@ function ChosenActs() {
     return (_jsx("button", { type: "button", ref: mark, "data-testid": "chosen-acts", "aria-label": `What can be done with ${nameOf(store, one.id)}`, "aria-haspopup": "menu", onClick: (event) => {
             const at = event.currentTarget.getBoundingClientRect();
             setMenuAt({ x: Math.round(at.right), y: Math.round(at.bottom + 4), on: one.id });
-        }, style: { position: "absolute", right: "calc(14px + var(--graview-dock, 0px))", top: 98, zIndex: "var(--graview-layer-overview, 10)", minHeight: 30, padding: "0 12px", borderRadius: 8, fontSize: "0.8125rem", background: "var(--graview-float)", boxShadow: "var(--graview-lift-low)" }, children: "Acts\u2026" }));
+        }, style: { position: "absolute", ...(rowRight !== null ? { right: rowRight, top: 14, minHeight: 38 } : { right: "calc(14px + var(--graview-dock, 0px))", top: 98 }), zIndex: "var(--graview-layer-overview, 10)", ...(rowRight === null ? { minHeight: 30 } : {}), padding: "0 12px", borderRadius: 8, fontSize: "0.8125rem", background: "var(--graview-float)", boxShadow: "var(--graview-lift-low)" }, children: "Acts\u2026" }));
+}
+/**
+ * WHY NOTHING IS OFFERED, IN TRUE WORDS (Roadmap f-make-any-page-better).
+ * "Nothing this app declares acts on it" was said of the lists in the
+ * scene — whose app renames a list, notes why it is there and adds a task
+ * to it — because the menu was on all the lists at once, and every act is
+ * done to one. So: what is done to one is said as such ("Right-click one
+ * list to see what you can do with it"); only where nothing in the app is
+ * done to the kind at all is that said, and never in the declaration's
+ * words.
+ */
+function emptyWords(store, kinds, selection) {
+    const noun = (kind) => nounOf(store.schema.tryDefinition(kind), kind);
+    const plural = (kind) => pluralLabel(store.schema, kind).toLowerCase();
+    const doneTo = kinds.filter((kind) => store.allMutations().some((mutation) => {
+        const subject = mutation.subject;
+        return subject?.kinds === "*" || (subject?.kinds ?? []).includes(kind);
+    }));
+    const many = selection.length !== 1 || selection.some((id) => id.startsWith("aggregate:"));
+    if (doneTo.length > 0 && many)
+        return kinds.length === 1 ? `Nothing here is done to all the ${plural(kinds[0])} at once. Right-click one ${noun(kinds[0])} to see what you can do with it.` : "Nothing here is done to all of these at once. Right-click one of them to see what you can do with it.";
+    if (doneTo.length > 0)
+        return `There is nothing you can do with ${kinds.length === 1 ? withArticle(noun(kinds[0])) : "these"} here right now.`;
+    return kinds.length === 1 ? `There is nothing to do with ${withArticle(noun(kinds[0]))} in this app yet.` : "There is nothing to do with these in this app yet.";
 }
 /** Whether the picture has room for a rail beside it: the scene's own box, not the window's. */
 const RAIL_NEEDS = 14 + 236 + 14 + 300;
 function Pane({ placement }) {
-    const { store, menuAt, setMenuAt, view, signIn } = useGraview();
+    const { store, menuAt, setMenuAt, view, signIn, aiDesk, ai, principal } = useGraview();
     /*
      * The pane is positioned within the SCENE'S BOX, not the window. It was
      * fixed to the viewport, which put it at the page's edge when the scene
@@ -222,7 +261,7 @@ function Pane({ placement }) {
      */
     const target = menuAt === null
         ? null
-        : { face: menuAt.face ?? "scene", on: menuAt.on, about: selection, field: menuAt.field, place: menuAt.place, href: menuAt.href, act: menuAt.act, column: menuAt.column, element: menuAt.returnTo };
+        : { face: menuAt.face ?? "scene", on: menuAt.on, about: selection, field: menuAt.field, place: menuAt.place, href: menuAt.href, act: menuAt.act, column: menuAt.column, ...(menuAt.section ? { section: menuAt.section } : {}), ...(menuAt.page ? { page: menuAt.page } : {}), element: menuAt.returnTo };
     const beside = useMenuSections(target);
     /*
      * Whether the derivation is withholding a creating act for want of the
@@ -249,7 +288,88 @@ function Pane({ placement }) {
      * and the eleventh act of a menu was twenty-one Tabs from the key that
      * opened it (walks XI and XII).
      */
-    const roving = useRoving({ letters: true });
+    /*
+     * In the menu a letter is typed into the menu's own field instead (Roadmap
+     * f-menu-type-anything), so the menu's list takes no letters: only the
+     * strip keeps the type-ahead.
+     */
+    const roving = useRoving({ letters: menuAt === null });
+    /*
+     * WHAT IS TYPED IN THE MENU (Roadmap f-menu-type-anything): every row —
+     * the acts, the withheld, Open, Copy link, Show, Inspect — narrowed to
+     * those whose words begin with it (`menuMatches`), Enter running the one
+     * lit; and, where the host lent the app a model, the words asked of it
+     * about what the menu was opened on, as the last row. A new menu starts
+     * with nothing typed.
+     */
+    const [typed, setTyped] = useState("");
+    const typeField = useRef(null);
+    useEffect(() => setTyped(""), [menuAt]);
+    /* Asked where the quick ask is drawn at all: a host's model, AI not off, the app's setting on. */
+    const asks = useQuickAskDrawn(aiDesk);
+    /* What worked before, like the words typed here (Roadmap f-menu-learns): kept tellings re-aimed at what the menu is on, ranked with the rows. */
+    const toldLike = useToldSuggestions(asks ? ai : undefined, store, principal, menuAt === null ? "" : typed, menuAt?.on, menuAt);
+    /* The Fast slot's ranking of every row the menu could show, for the words typed, once the typing rests (`useFastRank`). */
+    const rankRows = useMemo(() => menuAt === null
+        ? []
+        : [
+            ...beside.start.flatMap((section) => (section.items ?? []).map((item) => ({ key: `item:${item.id}`, label: item.label }))),
+            ...affordances.map((affordance) => ({ key: `act:${affordance.id}`, label: affordance.label })),
+            ...beside.end.flatMap((section) => (section.items ?? []).map((item) => ({ key: `item:${item.id}`, label: item.label }))),
+            ...toldLike.map((one) => ({ key: one.key, label: one.label })),
+        ], [menuAt, beside, affordances, toldLike]);
+    const fastRanked = useFastRank(ai, menuAt === null ? "" : typed, rankRows);
+    /*
+     * NOTHING MOVES UNDER A POINTER ON A ROW: while it rests on one, a ranking
+     * that arrives is held, and the rows stay as they were drawn; it applies
+     * once the pointer is off the rows. What the person types still narrows
+     * at once — that is theirs.
+     */
+    const [onRow, setOnRow] = useState(false);
+    const heldRank = useRef({ words: "", rank: null });
+    if (!onRow)
+        heldRank.current = { words: typed.trim(), rank: fastRanked };
+    const fastRank = onRow ? (heldRank.current.words === typed.trim() ? heldRank.current.rank : null) : fastRanked;
+    /*
+     * TWO WAYS TO ASK, UNDER THE FIELD (Roadmap f-make-any-page-better): 💬
+     * Chat — the records, the app's structure, anything broader, the quick
+     * ask's card — and ✨ Better UI where the part under the cursor lends it
+     * (a section's `mode`). As words are typed the Fast slot says which they
+     * are and lights it; a click, or the arrows, choose the other; with
+     * nothing typed each opens its card.
+     */
+    const better = useMemo(() => [...beside.start, ...beside.end].find((section) => section.mode)?.mode, [beside]);
+    const modes = menuAt === null ? [] : [...(asks ? ["chat"] : []), ...(better ? ["better"] : [])];
+    const [modeChosen, setModeChosen] = useState(null);
+    const [modeHeard, setModeHeard] = useState(null);
+    useEffect(() => setModeChosen(null), [menuAt, typed]);
+    useEffect(() => {
+        const asked = typed.trim();
+        if (!better || !asks || asked === "")
+            return;
+        let live = true;
+        const timer = setTimeout(() => void better.claims(asked).then((look) => live && setModeHeard({ words: asked, mode: look ? "better" : "chat" }), () => undefined), MENU_RANK_REST_MS);
+        return () => {
+            live = false;
+            clearTimeout(timer);
+        };
+    }, [typed, better, asks]);
+    const modeLit = modes.length === 0 ? null : (modeChosen ?? (modes.length === 1 ? modes[0] : modeHeard && modeHeard.words === typed.trim() ? modeHeard.mode : "chat"));
+    /* SUGGESTED: two or three things worth doing here, each tagged by its way, picked by the Fast slot once it answers. */
+    const suggestCandidates = useMemo(() => {
+        if (menuAt === null || modes.length === 0)
+            return [];
+        const nudges = (better?.nudges?.() ?? []).map((label, at) => ({ key: `nudge:${at}`, label, mode: "better", source: "nudge" }));
+        const told = toldLike.slice(0, 2).map((one) => ({ key: one.key, label: one.label, mode: "chat", source: "told" }));
+        // An act with its answer filled in, never the bare act a row below already offers.
+        const on = menuAt.on ?? (selection.length === 1 ? selection[0] : undefined);
+        const record = on !== undefined ? store.graph.getNode(on) : undefined;
+        const acts = filledActs(affordances, record, record ? choiceWords(store.schema, [record.kind])[record.kind] : undefined, record ? nameOf(store, record.id) : undefined).slice(0, 2);
+        return notARow(asks ? [...nudges, ...told, ...acts] : nudges, [...affordances, ...struck].map((one) => one.label));
+    }, [menuAt, modes.length, better, toldLike, affordances, struck, asks, store, selection]);
+    /* What the answer depends on: the record the menu is on (a new object whenever it changes), else the graph as it stands. */
+    const dependsOn = useMemo(() => (menuAt?.on !== undefined ? store.graph.getNode(menuAt.on) : undefined) ?? graphStamp(store), [menuAt, store, affordances]);
+    const suggested = useSuggested(ai, suggestCandidates, { name: menuAt?.title ?? (selection.length === 1 ? nameOf(store, selection[0]) : "this"), opened: menuAt, better: better !== undefined, depends: dependsOn }, onRow);
     /*
      * A REFUSAL IS A RESULT, said where the button was pressed.
      *
@@ -442,7 +562,7 @@ function Pane({ placement }) {
      * tail honest. Everything past nine scrolls inside the pane's own box
      * once shown.
      */
-    const fits = Math.max(1, Math.min(9, affordances.length));
+    const fits = atPointer ? 4 : Math.max(1, Math.min(9, affordances.length));
     /*
      * ORDERED FOR READING, not only for ranking: what a broken rule demands,
      * then the acts somebody PINNED (the person's own before the app's — a
@@ -469,8 +589,125 @@ function Pane({ placement }) {
     const matched = searchable && trimmedQuery.length > 0
         ? arranged.filter((entry) => `${entry.label} ${entry.why}`.toLowerCase().includes(trimmedQuery))
         : null;
-    const shown = matched ?? (expanded || atPointer ? arranged : arranged.slice(0, fits));
-    const hidden = matched ? 0 : arranged.length - shown.length;
+    /* Typed in the menu: its words, and whether a row's label begins with them. */
+    const words = atPointer ? typed.trim() : "";
+    /* A row fits what is typed when its words begin with it, or when the Fast slot finds it likely enough. */
+    const fitsTyped = (key, label) => words === "" || menuMatches(label, words) || (fastRank?.get(key) ?? 0) >= MENU_RANK_FLOOR;
+    const shown = (matched ?? (expanded || atPointer ? arranged : arranged.slice(0, fits))).filter((entry) => fitsTyped(`act:${entry.id}`, entry.label));
+    const hidden = matched || words ? 0 : arranged.length - shown.length;
+    const withheldShown = words ? withheld.filter((action) => fitsTyped(`act:${action.id}`, action.label)) : withheld;
+    /* A section's rows narrowed to what is typed; one drawn in place of rows (the AI's) stands down while words are typed, the Ask row below standing for it. */
+    const narrowed = (list) => words === ""
+        ? list
+        : list.flatMap((section) => {
+            const items = (section.items ?? []).filter((item) => fitsTyped(`item:${item.id}`, item.label));
+            return items.length > 0 ? [{ id: section.id, ...(section.heading ? { heading: section.heading } : {}), items }] : [];
+        });
+    /* A way to ask draws no rows: its button is under the field. Past the first acts, the rest wait behind More… until it is pressed or words are typed. */
+    const folded = atPointer && !expanded && words === "";
+    const startSections = narrowed(beside.start).filter((section) => (section.items?.length ?? 0) > 0 || section.render);
+    const endSections = narrowed(beside.end).filter((section) => (section.items?.length ?? 0) > 0 || section.render);
+    /* Which acts wait behind More…: past the first few, while folded. Drawn, and hidden — no stop for the keyboard, nothing a screen reader is told — until More… is pressed. */
+    const behindMore = new Set(folded ? shown.slice(fits).map((entry) => entry.id) : []);
+    /* What this seat may not do waits behind More… only where the first acts fill the room; a seat offered little is told at once what is not theirs. */
+    const withheldFolded = folded && arranged.length >= fits;
+    const moreWaits = folded && (arranged.length > fits || (withheldFolded && withheld.length > 0) || observations.length > 0 || beside.end.some((section) => (section.items?.length ?? 0) > 0 || section.render));
+    /* What the words are asked about, said in the Ask row: the menu's title, the one record, else "this". */
+    const askedAbout = menuAt?.title ?? (selection.length === 1 ? nameOf(store, selection[0]) : selection.length > 1 ? `${selection.length} selected` : "this");
+    const askRow = atPointer && words !== "" && modes.length > 0;
+    /* Up to two that worked before, the Fast slot's likeliest first once it has answered. */
+    const toldShown = atPointer && words !== "" ? (fastRank === null ? toldLike : [...toldLike].sort((a, b) => (fastRank.get(b.key) ?? 0) - (fastRank.get(a.key) ?? 0))).slice(0, TOLD_SUGGESTED_MOST) : [];
+    /*
+     * THE ROW ENTER RUNS FROM THE FIELD, lit: the first that fits the words
+     * — never one that cannot be taken back, which keeps its aimed press —
+     * else the Ask row. Nothing is lit with nothing typed.
+     */
+    /* The Fast slot's best among the rows shown, when it has answered for these words. */
+    const shownKeys = [
+        ...startSections.flatMap((section) => (section.items ?? []).map((item) => `item:${item.id}`)),
+        ...shown.filter((entry) => !entry.destructive).map((entry) => `act:${entry.id}`),
+        ...endSections.flatMap((section) => (section.items ?? []).map((item) => `item:${item.id}`)),
+        ...toldShown.map((one) => one.key),
+    ];
+    const ranked = fastRank === null ? undefined : [...shownKeys].sort((a, b) => (fastRank.get(b) ?? 0) - (fastRank.get(a) ?? 0)).find((key) => (fastRank.get(key) ?? 0) >= MENU_RANK_FLOOR);
+    const lit = words === ""
+        ? null
+        : (ranked ??
+            startSections.flatMap((section) => (section.items ?? []).map((item) => `item:${item.id}`))[0] ??
+            shown.filter((entry) => !entry.destructive).map((entry) => `act:${entry.id}`)[0] ??
+            endSections.flatMap((section) => (section.items ?? []).map((item) => `item:${item.id}`))[0] ??
+            (askRow && modeLit ? "mode" : null));
+    const ask = (asked = words) => {
+        if (!menuAt)
+            return;
+        const back = menuAt.returnTo ?? null;
+        // The card opens where the menu stood, read before the menu goes.
+        const from = whereMenuStands(asideRef.current);
+        // The quick ask's card, where the menu stood, answering the words at once: its thinking marked on the thing itself.
+        setMenuAt(null);
+        openQuickAsk(aiDesk, { pointed: { on: menuAt.on, about: selection, field: menuAt.field, place: menuAt.place }, ...(asked ? { asked } : {}), returnTo: back, ...(from ? { from } : {}) });
+    };
+    /** A way to ask, pressed: Chat asks the quick ask (the words, or nothing yet); Better UI opens its card (the words asked at once, or to choose). */
+    const runMode = (mode, said = words) => {
+        if (!menuAt)
+            return;
+        if (mode === "chat")
+            return ask(said);
+        setMenuAt(null);
+        better?.open(said || undefined);
+    };
+    /** A suggestion taken: through its way's card, previewed there before anything lands. */
+    const takeSuggested = (one) => {
+        const told = one.source === "told" ? toldLike.find((each) => each.key === one.key) : undefined;
+        if (told && one.mode === "chat")
+            return takeTold(told);
+        runMode(one.mode === "better" && better ? "better" : "chat", one.label);
+    };
+    /* A suggestion taken: its words asked on the card, about what the menu is on, previewed like any plan — never applied from the menu. */
+    const takeTold = (one) => {
+        if (!menuAt)
+            return;
+        const back = menuAt.returnTo ?? null;
+        const from = whereMenuStands(asideRef.current);
+        setMenuAt(null);
+        // Asked as the plain act the row says, where the menu stood: where it came from is the Studio's to say, never the card's.
+        openQuickAsk(aiDesk, { pointed: { on: menuAt.on, about: selection, field: menuAt.field, place: menuAt.place }, asked: one.label, suggested: one.telling.id, returnTo: back, ...(from ? { from } : {}) });
+    };
+    /* The menu's rows the keyboard walks, in the order they are drawn: not a disabled one, nor a field of a form an act opened. */
+    /* The ways to ask are walked with the left and right arrows; the rows, up and down from the field. */
+    const walkable = () => [...(asideRef.current?.querySelectorAll("[data-affordance]:not([disabled]), [data-menu-item]:not([data-menu-mode])") ?? [])].filter((row) => row.closest("[data-graview-asking], [hidden]") === null);
+    const litRow = () => asideRef.current?.querySelector("[data-menu-lit]") ?? null;
+    /*
+     * A LETTER TYPED ANYWHERE IN THE MENU GOES INTO ITS FIELD, the keyboard
+     * with it: the menu opens with the keyboard on its first row, so the
+     * arrows walk the rows as they always did, and on a phone no keyboard
+     * rises until the field is tapped. Space still presses the row it is on;
+     * a form an act opened in the menu types its own answers; the arrow up
+     * from the first row goes back to the field.
+     */
+    const typeInto = (event) => {
+        const target = event.target;
+        const field = typeField.current;
+        if (!field || target === field || event.metaKey || event.ctrlKey || event.altKey)
+            return;
+        if (target.closest("[data-graview-asking]") || typingIn(target))
+            return;
+        const typing = event.key.length === 1 && event.key !== " ";
+        if (typing || (event.key === "Backspace" && typed !== "")) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (typing && typed === "" && aiDesk)
+                preloadQuickAsk(aiDesk);
+            setTyped((was) => (typing ? was + event.key : was.slice(0, -1)));
+            field.focus({ preventScroll: true });
+            return;
+        }
+        if (event.key === "ArrowUp" && walkable()[0] === target) {
+            event.preventDefault();
+            event.stopPropagation();
+            field.focus({ preventScroll: true });
+        }
+    };
     /*
      * GROUPED BY WHAT THEY ANSWER. A repair arrives carrying the violation
      * that produced it, and without that sentence over it, "Cut X from
@@ -547,7 +784,13 @@ function Pane({ placement }) {
             // Somewhere else to go means they went there on purpose.
             if (event.relatedTarget !== null)
                 keptFocus.current = null;
-        }, onMouseDown: (event) => event.stopPropagation(), style: {
+        }, onMouseDown: (event) => event.stopPropagation(), onKeyDownCapture: atPointer ? (event) => typeInto(event) : undefined, onPointerMove: atPointer
+            ? (event) => {
+                const row = event.target.closest?.("[data-menu-item], [data-affordance]") != null;
+                if (row !== onRow)
+                    setOnRow(row);
+            }
+            : undefined, onPointerLeave: atPointer && onRow ? () => setOnRow(false) : undefined, style: {
             /*
              * Above the jacked-in page, not only above the scene.
              *
@@ -658,15 +901,71 @@ function Pane({ placement }) {
                     fontSize: "0.875rem",
                     lineHeight: 1,
                     borderRadius: 7,
-                }, children: "\u00D7" })), edge && edgeEnds ? (_jsxs("div", { style: { display: "grid", gap: 6 }, children: [edgeSaid ? (_jsx("p", { "data-testid": "edge-said", style: { margin: 0, fontSize: "0.8125rem", lineHeight: 1.45, color: "var(--graview-ink-muted)" }, children: edgeSaid })) : null, unsure ? (_jsx("p", { "data-testid": "edge-provisional", style: { margin: 0, fontSize: "0.8125rem", lineHeight: 1.45, color: "var(--graview-ink-muted)" }, children: provenanceWords(unsure) })) : null, _jsx("div", { style: { display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" }, children: [
+                }, children: "\u00D7" })), atPointer ? (_jsx("input", { ref: typeField, type: "text", "data-testid": "menu-type", ...(FINE_POINTER() ? {} : { "data-graview-not-first": "" }), value: typed, onChange: (event) => {
+                    // The first letter fetches what Enter will need; the filter itself never waits on it.
+                    if (typed === "" && event.target.value !== "" && aiDesk)
+                        preloadQuickAsk(aiDesk);
+                    setTyped(event.target.value);
+                }, onKeyDown: (event) => {
+                    if (event.key === "Enter") {
+                        event.preventDefault();
+                        // As Enter on the row itself: the keyboard on it first, so a form the act opens takes the keyboard from it.
+                        const row = litRow();
+                        row?.focus({ preventScroll: true });
+                        row?.click();
+                    }
+                    else if (event.key === "ArrowDown") {
+                        event.preventDefault();
+                        (litRow() ?? walkable()[0])?.focus();
+                    }
+                    else if (event.key === "ArrowUp") {
+                        // Round to the last row, as a menu's arrows go: More… where the rest wait behind it.
+                        event.preventDefault();
+                        walkable().at(-1)?.focus();
+                    }
+                    else if (event.key === "Enter" && !litRow() && modeLit) {
+                        event.preventDefault();
+                        runMode(modeLit);
+                    }
+                    else if (event.key === "Escape" && typed !== "") {
+                        // The words go first; the next Escape puts the menu away.
+                        event.preventDefault();
+                        event.stopPropagation();
+                        setTyped("");
+                    }
+                }, placeholder: modes.length > 0 ? "Tell Graview what you want…" : "Type to filter…", "aria-label": modes.length > 0 ? `Tell Graview what you want with ${askedAbout}, or filter what can be done here` : "Filter what can be done here", autoComplete: "off", autoCorrect: "off", spellCheck: false, enterKeyHint: "go", style: {
+                    boxSizing: "border-box",
+                    width: "100%",
+                    font: "inherit",
+                    // A phone zooms into a field set under 16px.
+                    fontSize: "max(1rem, 16px)",
+                    padding: "5px 9px",
+                    borderRadius: 8,
+                    border: "1px solid var(--graview-edge)",
+                    background: "var(--graview-panel)",
+                    color: "var(--graview-ink)",
+                } })) : null, atPointer && modes.length > 0 ? (_jsx("div", { role: "group", "aria-label": modes.length > 1 ? "Chat or Better UI" : "Chat", "data-testid": "menu-modes", style: { display: "flex", gap: 6 }, children: modes.map((mode) => {
+                    const on = modeLit === mode;
+                    const label = mode === "chat" ? "Chat" : (better?.label ?? "Better UI");
+                    const mark = mode === "chat" ? "💬" : (better?.mark ?? "✨");
+                    return (_jsxs("button", { type: "button", "data-menu-mode": mode, ...(mode === "chat" ? { "data-menu-item": "ask-typed" } : {}), "data-menu-lit": (lit === "mode" && on) || undefined, "aria-pressed": on, "aria-label": words ? `${label}: ${words}` : label, onClick: () => runMode(mode), onKeyDown: (event) => {
+                            if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+                                return;
+                            event.preventDefault();
+                            event.stopPropagation();
+                            const next = modes[(modes.indexOf(mode) + (event.key === "ArrowRight" ? 1 : modes.length - 1)) % modes.length];
+                            setModeChosen(next);
+                            asideRef.current?.querySelector(`[data-menu-mode="${next}"]`)?.focus();
+                        }, style: on ? MODE_ON : MODE_OFF, children: [_jsx("span", { "aria-hidden": "true", children: mark }), " ", label, lit === "mode" && on ? ENTER_MARK : null] }, mode));
+                }) })) : null, atPointer && words === "" && suggested.length > 0 ? (_jsxs("div", { "data-menu-section": "suggested", role: "group", "aria-label": "Suggested", style: { display: "grid", gap: 2, borderTop: "1px solid var(--graview-edge)", paddingTop: 5, minHeight: suggested.length * 31 + 22 }, children: [_jsx("span", { "aria-hidden": "true", style: GROUP_HEAD, children: "Suggested" }), suggested.map((one, at) => (_jsxs("button", { type: "button", "data-menu-item": `suggested-${at}`, "data-suggested-mode": one.mode, onClick: () => takeSuggested(one), style: { ...ROW_STYLE, display: "flex", gap: 8, alignItems: "baseline", minWidth: 0 }, children: [_jsx("span", { "aria-hidden": "true", style: { color: "var(--graview-accent)" }, children: "\u2726" }), _jsx("span", { title: one.label, style: { flex: "1 1 auto", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: one.label }), _jsxs("span", { title: one.mode === "better" ? "Better UI" : "Chat", style: { fontSize: "0.8125rem" }, children: [_jsx("span", { "aria-hidden": "true", children: one.mode === "better" ? "✨" : "💬" }), _jsx("span", { style: VISUALLY_HIDDEN, children: one.mode === "better" ? " (Better UI)" : " (Chat)" })] })] }, one.key)))] })) : null, edge && edgeEnds ? (_jsxs("div", { style: { display: "grid", gap: 6 }, children: [edgeSaid ? (_jsx("p", { "data-testid": "edge-said", style: { margin: 0, fontSize: "0.8125rem", lineHeight: 1.45, color: "var(--graview-ink-muted)" }, children: edgeSaid })) : null, unsure ? (_jsx("p", { "data-testid": "edge-provisional", style: { margin: 0, fontSize: "0.8125rem", lineHeight: 1.45, color: "var(--graview-ink-muted)" }, children: provenanceWords(unsure) })) : null, _jsx("div", { style: { display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" }, children: [
                             ["from", edgeEnds.from],
                             ["to", edgeEnds.to],
-                        ].map(([which, end], index) => (_jsxs(Fragment, { children: [index === 1 ? (_jsx("span", { "aria-hidden": "true", style: { color: "var(--graview-ink-faint)" }, children: "\u2192" })) : null, end ? (_jsx("button", { type: "button", "data-testid": `edge-${which}`, onClick: () => set([end.id]), title: `Select ${nameOf(store, end.id)}`, style: { fontSize: "0.8125rem", padding: "3px 9px", borderRadius: 6 }, children: nameOf(store, end.id) })) : (_jsx("span", { style: { fontSize: "0.8125rem", color: "var(--graview-ink-faint)" }, children: "gone" }))] }, which))) })] })) : null, !edge && selection.length === 1 && isLeftAlone(store, selection[0]) ? (_jsx("p", { "data-testid": "left-alone", style: { margin: 0, fontSize: "0.8125rem", lineHeight: 1.45, color: "var(--graview-ink-muted)" }, children: "Left alone: nothing automated changes it." })) : null, said.length > 0 ? (_jsx("div", { "data-testid": "observations", title: said.map((observation) => observation.text).join("\n"), style: { display: "grid", gap: 3 }, children: said.slice(0, 2).map((observation) => (_jsxs("p", { style: {
+                        ].map(([which, end], index) => (_jsxs(Fragment, { children: [index === 1 ? (_jsx("span", { "aria-hidden": "true", style: { color: "var(--graview-ink-faint)" }, children: "\u2192" })) : null, end ? (_jsx("button", { type: "button", "data-testid": `edge-${which}`, onClick: () => set([end.id]), title: `Select ${nameOf(store, end.id)}`, style: { fontSize: "0.8125rem", padding: "3px 9px", borderRadius: 6 }, children: nameOf(store, end.id) })) : (_jsx("span", { style: { fontSize: "0.8125rem", color: "var(--graview-ink-faint)" }, children: "gone" }))] }, which))) })] })) : null, !edge && selection.length === 1 && isLeftAlone(store, selection[0]) ? (_jsx("p", { "data-testid": "left-alone", style: { margin: 0, fontSize: "0.8125rem", lineHeight: 1.45, color: "var(--graview-ink-muted)" }, children: "Left alone: nothing automated changes it." })) : null, said.length > 0 ? (_jsx("div", { "data-testid": "observations", title: said.map((observation) => observation.text).join("\n"), hidden: folded, style: { display: folded ? "none" : "grid", gap: 3 }, children: said.slice(0, 2).map((observation) => (_jsxs("p", { style: {
                         margin: 0,
                         fontSize: "0.8125rem",
                         lineHeight: 1.45,
                         color: "var(--graview-ink-muted)",
-                    }, children: [observation.text, observation === said[1] && said.length > 2 ? (_jsxs("span", { style: { color: "var(--graview-ink-faint)" }, children: [" +", said.length - 2] })) : null] }, observation.id))) })) : null, atPointer ? beside.start.map((section) => _jsx(SectionDrawn, { section: section, close: () => setMenuAt(null) }, section.id)) : null, failed ? (_jsx("p", { "data-testid": "refused", style: { margin: 0, fontSize: "0.8125rem", lineHeight: 1.45, color: "var(--graview-warn)" }, children: failed })) : null, searchable ? (_jsx("input", { "data-testid": "action-filter", value: query, onChange: (event) => setQuery(event.target.value), placeholder: `Filter ${arranged.length} actions…`, "aria-label": "Filter actions", onKeyDown: (event) => {
+                    }, children: [observation.text, observation === said[1] && said.length > 2 ? (_jsxs("span", { style: { color: "var(--graview-ink-faint)" }, children: [" +", said.length - 2] })) : null] }, observation.id))) })) : null, atPointer ? startSections.map((section) => _jsx(SectionDrawn, { section: section, lit: lit, close: () => setMenuAt(null) }, section.id)) : null, failed ? (_jsx("p", { "data-testid": "refused", style: { margin: 0, fontSize: "0.8125rem", lineHeight: 1.45, color: "var(--graview-warn)" }, children: failed })) : null, searchable ? (_jsx("input", { "data-testid": "action-filter", value: query, onChange: (event) => setQuery(event.target.value), placeholder: `Filter ${arranged.length} actions…`, "aria-label": "Filter actions", onKeyDown: (event) => {
                     if (event.key === "Escape") {
                         // Clearing the filter must not also clear the selection —
                         // the document-level Escape stays out of it either way.
@@ -698,7 +997,7 @@ function Pane({ placement }) {
                     border: "1px solid var(--graview-edge)",
                     background: "var(--graview-panel)",
                     color: "var(--graview-ink)",
-                } })) : null, matched !== null && matched.length === 0 ? (_jsxs("p", { "data-testid": "no-matches", style: { margin: 0, fontSize: "0.8125rem", lineHeight: 1.45, color: "var(--graview-ink-muted)" }, children: ["Nothing offered here matches \u201C", query.trim(), "\u201D."] })) : null, gain && affordances.length === 0 ? null : affordances.length === 0 && !waiting && selection.length === 0 ? null : affordances.length === 0 && !waiting ? (
+                } })) : null, matched !== null && matched.length === 0 ? (_jsxs("p", { "data-testid": "no-matches", style: { margin: 0, fontSize: "0.8125rem", lineHeight: 1.45, color: "var(--graview-ink-muted)" }, children: ["Nothing offered here matches \u201C", query.trim(), "\u201D."] })) : null, (words !== "" && shown.length === 0) || (gain && affordances.length === 0) ? null : affordances.length === 0 && !waiting && selection.length === 0 ? null : affordances.length === 0 && !waiting ? (
             /*
              * An empty action list is a RESULT, not a blank space. Saying which
              * kind has no mutations declaring it as a subject is the same honesty
@@ -718,8 +1017,8 @@ function Pane({ placement }) {
                                 ? withArticle(nounOf(store.schema.tryDefinition(subjectKinds[0]), subjectKinds[0]))
                                 : "this mix of kinds"} — ${withheld.length} action${withheld.length === 1 ? "" : "s"} withheld.`
                     : edge
-                        ? `Nothing can be done with this line yet — nothing this app declares makes or breaks “${edgeWords(store.schema, store.graph.getNode(edge.from)?.kind ?? "", edge.kind, "out")}”.`
-                        : `Nothing can be done with ${subjectKinds.length === 1 ? withArticle(nounOf(store.schema.tryDefinition(subjectKinds[0]), subjectKinds[0])) : "this mix of kinds"} yet — nothing this app declares acts on ${subjectKinds.length === 1 ? "it" : "them"}.` })) : (_jsxs("ol", { ...roving, "data-testid": "affordances", style: {
+                        ? `There is nothing to do with this line here: nothing in this app makes or breaks “${edgeWords(store.schema, store.graph.getNode(edge.from)?.kind ?? "", edge.kind, "out")}”.`
+                        : emptyWords(store, subjectKinds, selection) })) : (_jsxs("ol", { ...roving, "data-testid": "affordances", style: {
                     margin: 0,
                     padding: 0,
                     listStyle: "none",
@@ -746,7 +1045,7 @@ function Pane({ placement }) {
                                         : {}),
                                     padding: "2px 2px 1px",
                                     marginTop: index > 0 ? 6 : 0,
-                                }, children: [section.tone === "violation" ? "⚠ " : "", section.tone === "violation" ? trim(section.heading) : section.heading] })) : index > 0 ? (_jsx("li", { "aria-hidden": "true", style: { borderTop: "1px solid var(--graview-edge)", margin: "6px 0 3px" } })) : null, section.items.map((affordance) => (_jsxs("li", { style: { display: "flex", gap: 2, alignItems: "stretch" }, onKeyDown: (event) => {
+                                }, children: [section.tone === "violation" ? "⚠ " : "", section.tone === "violation" ? trim(section.heading) : section.heading] })) : index > 0 ? (_jsx("li", { "aria-hidden": "true", style: { borderTop: "1px solid var(--graview-edge)", margin: "6px 0 3px" } })) : null, section.items.map((affordance) => (_jsxs("li", { hidden: behindMore.has(affordance.id), style: { display: behindMore.has(affordance.id) ? "none" : "flex", gap: 2, alignItems: "stretch" }, onKeyDown: (event) => {
                                     // Its pin is beside it: the arrow to the right, and back.
                                     if (event.metaKey || event.ctrlKey || event.altKey)
                                         return;
@@ -759,7 +1058,7 @@ function Pane({ placement }) {
                                     event.preventDefault();
                                     event.stopPropagation();
                                     to.focus();
-                                }, children: [_jsxs("button", { type: "button", [ROVING_ITEM]: "", "data-affordance": affordance.id, "data-rank": affordance.rank, "data-graview-destructive": affordance.destructive || undefined, "aria-pressed": pending === affordance.id, title: affordance.why, style: {
+                                }, children: [_jsxs("button", { type: "button", [ROVING_ITEM]: "", "data-affordance": affordance.id, "data-rank": affordance.rank, "data-graview-destructive": affordance.destructive || undefined, "data-menu-lit": lit === `act:${affordance.id}` || undefined, "aria-pressed": pending === affordance.id, title: affordance.why, style: {
                                             padding: "5px 10px",
                                             fontSize: "0.875rem",
                                             borderRadius: 8,
@@ -789,13 +1088,14 @@ function Pane({ placement }) {
                                             // pressed — and the ranking has already put it last.
                                             ...(affordance.destructive ? { color: "var(--graview-warn)" } : {}),
                                             ...(pending === affordance.id ? { color: "var(--graview-accent)" } : {}),
+                                            ...(lit === `act:${affordance.id}` ? LIT_STYLE : {}),
                                         }, onClick: () => {
                                             if (affordance.open.length > 0) {
                                                 setPending(pending === affordance.id ? null : affordance.id);
                                                 return;
                                             }
                                             act(affordance);
-                                        }, children: [affordance.label, affordance.open.length > 0 ? (_jsx("span", { style: { color: "var(--graview-ink-faint)" }, children: " \u2026" })) : null, matched?.length === 1 &&
+                                        }, children: [affordance.label, affordance.open.length > 0 ? (_jsx("span", { style: { color: "var(--graview-ink-faint)" }, children: " \u2026" })) : null, lit === `act:${affordance.id}` ? ENTER_MARK : null, matched?.length === 1 &&
                                                 matched[0]?.id === affordance.id &&
                                                 !affordance.destructive ? (
                                             // The searcher's promise, made visible exactly when
@@ -831,22 +1131,22 @@ function Pane({ placement }) {
                                                 : affordance.pinned === "declared"
                                                     ? "var(--graview-ink-muted)"
                                                     : "var(--graview-ink-faint)",
-                                        }, children: affordance.pinned !== undefined ? "★" : "☆" })] }, affordance.id)))] }, `${section.heading ?? "plain"}-${index}`))), hidden > 0 ? (_jsx("li", { children: _jsxs("button", { type: "button", [ROVING_ITEM]: "", onClick: () => setExpanded(true), 
+                                        }, children: affordance.pinned !== undefined ? "★" : "☆" })] }, affordance.id)))] }, `${section.heading ?? "plain"}-${index}`))), hidden > 0 && !atPointer ? (_jsx("li", { children: _jsxs("button", { type: "button", [ROVING_ITEM]: "", onClick: () => setExpanded(true), 
                             // What it DOES, not what is behind it. "+9 more" is a label
                             // on a quantity; this is a control, and a control says what
                             // pressing it will do.
                             title: `Show all ${affordances.length} actions`, style: { padding: "4px 10px", fontSize: "0.875rem", borderRadius: 8 }, children: ["Show ", hidden, " more"] }) })) : null] })), gain ? (_jsx("button", { type: "button", "data-testid": "sign-in", onClick: () => {
                     setMenuAt(null);
                     gain.run();
-                }, style: { padding: "5px 10px", fontSize: "0.875rem", borderRadius: 8, width: "100%", textAlign: "left" }, children: gain.label })) : null, withheld.length > 0 ? (_jsxs("ul", { "data-testid": "withheld", style: {
+                }, style: { padding: "5px 10px", fontSize: "0.875rem", borderRadius: 8, width: "100%", textAlign: "left" }, children: gain.label })) : null, withheldShown.length > 0 ? (_jsxs("ul", { hidden: withheldFolded, "data-testid": "withheld", style: {
                     margin: 0,
                     padding: 0,
                     listStyle: "none",
-                    display: "flex",
+                    display: withheldFolded ? "none" : "flex",
                     flexDirection: "column",
                     flexWrap: "nowrap",
                     gap: 2,
-                }, children: [withheld.slice(0, atPointer || allWithheld ? withheld.length : 3).map((action) => (_jsxs("li", { style: { display: "grid", gap: 2 }, children: [_jsx("button", { type: "button", disabled: true, "data-affordance": action.id, "data-rank": action.rank, "data-withheld": action.refusal.wouldNeed.join(",") || "nobody", style: {
+                }, children: [withheldShown.slice(0, atPointer || allWithheld ? withheldShown.length : 3).map((action) => (_jsxs("li", { style: { display: "grid", gap: 2 }, children: [_jsx("button", { type: "button", disabled: true, "data-affordance": action.id, "data-rank": action.rank, "data-withheld": action.refusal.wouldNeed.join(",") || "nobody", style: {
                                     padding: "4px 10px",
                                     fontSize: "0.875rem",
                                     borderRadius: 8,
@@ -859,7 +1159,19 @@ function Pane({ placement }) {
                                     lineHeight: 1.4,
                                     color: "var(--graview-ink-muted)",
                                     padding: "0 10px",
-                                }, children: action.refusal.message })] }, action.id))), !atPointer && !allWithheld && withheld.length > 3 ? (_jsx("li", { children: _jsxs("button", { type: "button", "data-testid": "withheld-more", onClick: () => setAllWithheld(true), title: `Show all ${withheld.length} actions this seat may not take`, style: { padding: "4px 10px", fontSize: "0.875rem", borderRadius: 8 }, children: ["Show ", withheld.length - 3, " more withheld"] }) })) : null] })) : null, atPointer ? beside.end.map((section) => _jsx(SectionDrawn, { section: section, close: () => setMenuAt(null) }, section.id)) : null, open ? (_jsx(AnswerArgs, { affordance: open, 
+                                }, children: action.refusal.message })] }, action.id))), !atPointer && !allWithheld && withheld.length > 3 ? (_jsx("li", { children: _jsxs("button", { type: "button", "data-testid": "withheld-more", onClick: () => setAllWithheld(true), title: `Show all ${withheld.length} actions this seat may not take`, style: { padding: "4px 10px", fontSize: "0.875rem", borderRadius: 8 }, children: ["Show ", withheld.length - 3, " more withheld"] }) })) : null] })) : null, moreWaits ? (_jsx("button", { type: "button", "data-menu-item": "more", onClick: (event) => {
+                    /* The keyboard goes on to the first of what was waiting, where a person reading down would be next. */
+                    const menu = event.currentTarget.parentElement;
+                    const waiting = [...(menu?.querySelectorAll("li[hidden], [data-menu-more][hidden]") ?? [])];
+                    setExpanded(true);
+                    requestAnimationFrame(() => {
+                        for (const one of waiting) {
+                            const to = one.querySelector("button:not([disabled]), a[href], input");
+                            if (to && to.getClientRects().length > 0)
+                                return to.focus();
+                        }
+                    });
+                }, style: { ...ROW_STYLE, color: "var(--graview-ink-muted)" }, children: "More\u2026" })) : null, atPointer && endSections.length > 0 ? (_jsx("div", { "data-menu-more": "", hidden: folded, style: { display: folded ? "none" : "contents" }, children: endSections.filter((section) => !folded || !section.render).map((section) => _jsx(SectionDrawn, { section: section, lit: lit, close: () => setMenuAt(null) }, section.id)) })) : null, toldShown.length > 0 ? (_jsx("div", { "data-menu-section": "told", role: "group", "aria-label": "Suggested", style: { display: "grid", gap: 2, borderTop: "1px solid var(--graview-edge)", paddingTop: 5 }, children: toldShown.map((one) => (_jsxs("button", { type: "button", "data-menu-item": one.key, "data-told-suggestion": one.telling.id, "data-menu-lit": lit === one.key || undefined, onClick: () => takeTold(one), style: { ...ROW_STYLE, ...(lit === one.key ? LIT_STYLE : {}) }, children: [one.label, lit === one.key ? ENTER_MARK : null] }, one.key))) })) : null, atPointer && words !== "" && !askRow && lit === null && shown.length === 0 && withheldShown.length === 0 ? (_jsxs("p", { "data-testid": "menu-no-match", style: { margin: 0, fontSize: "0.8125rem", lineHeight: 1.45, color: "var(--graview-ink-muted)" }, children: ["Nothing here matches \u201C", words, "\u201D."] })) : null, open ? (_jsx(AnswerArgs, { affordance: open, 
                 // On a refusal the prompt stays put with the reason beside it, so
                 // a rejected answer can be corrected rather than retyped blind.
                 onApply: (args) => {
@@ -869,6 +1181,33 @@ function Pane({ placement }) {
                         return refusedArgs.current;
                 }, onCancel: () => setPending(null) })) : null] }));
 }
+/** Whether this is somewhere a person types: a field, a box of text. */
+function typingIn(element) {
+    if (element.isContentEditable || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement)
+        return true;
+    return element instanceof HTMLInputElement && !["button", "submit", "reset", "checkbox", "radio", "image", "file", "color", "range"].includes(element.type);
+}
+/** A menu's row, and the one Enter runs from the field, lit, with the key that runs it said. */
+const ROW_STYLE = { padding: "5px 10px", fontSize: "0.875rem", borderRadius: 8, width: "100%", textAlign: "left", borderWidth: 1, borderStyle: "solid", borderColor: "transparent", background: "none", boxShadow: "none" };
+const LIT_STYLE = { background: "var(--graview-panel-muted)" };
+/** One object for the graph as it stands, a new one once anything is applied: what a list's Suggested is asked again by. */
+const STAMPS = /* @__PURE__ */ new WeakMap();
+function graphStamp(store) {
+    const length = store.log.all().length;
+    const held = STAMPS.get(store);
+    if (held && held.length === length)
+        return held.stamp;
+    const stamp = { length };
+    STAMPS.set(store, { length, stamp });
+    return stamp;
+}
+/** Whether the pointer is a fine one (a mouse, a trackpad): there the menu's field takes the keyboard as it opens. */
+const FINE_POINTER = () => typeof matchMedia === "function" && matchMedia("(pointer: fine)").matches;
+const MODE_BASE = { display: "inline-flex", alignItems: "center", gap: 5, minHeight: 30, padding: "0 11px", fontSize: "0.8125rem", borderRadius: 999, cursor: "pointer", borderWidth: 1, borderStyle: "solid", boxShadow: "none" };
+const MODE_ON = { ...MODE_BASE, borderColor: "var(--graview-accent)", background: "color-mix(in srgb, var(--graview-accent) 14%, transparent)", color: "var(--graview-ink)", fontWeight: 600 };
+const MODE_OFF = { ...MODE_BASE, borderColor: "var(--graview-edge)", background: "none", color: "var(--graview-ink-muted)" };
+const GROUP_HEAD = { fontSize: "0.6875rem", letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--graview-ink-faint)", padding: "0 10px" };
+const ENTER_MARK = (_jsx("span", { "aria-hidden": "true", title: "Enter runs it", style: { float: "right", color: "var(--graview-ink-faint)", fontSize: "0.75rem" }, children: "\u21B5" }));
 /** One shared empty, for a visitor told the way in instead. */
 const NOTHING_WITHHELD = [];
 /**
@@ -876,10 +1215,10 @@ const NOTHING_WITHHELD = [];
  * each pressed to close the menu and run, or what it draws itself. Rows of
  * the acts' own look, so the menu reads as one list.
  */
-function SectionDrawn({ section, close }) {
-    return (_jsxs("div", { "data-menu-section": section.id, ...(section.heading ? { role: "group", "aria-label": section.heading } : {}), style: { display: "grid", gap: 2, borderTop: "1px solid var(--graview-edge)", paddingTop: 5 }, children: [section.heading ? (_jsx("p", { "aria-hidden": "true", style: { margin: 0, padding: "2px 2px 1px", fontSize: "0.75rem", lineHeight: 1.4, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--graview-ink-faint)" }, children: section.heading })) : null, section.items && section.items.length > 0 ? (_jsx("ul", { style: { margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 2 }, children: section.items.map((item) => (_jsx("li", { children: _jsxs("button", { type: "button", "data-menu-item": item.id, onClick: () => {
+function SectionDrawn({ section, lit = null, close }) {
+    return (_jsxs("div", { "data-menu-section": section.id, ...(section.heading ? { role: "group", "aria-label": section.heading } : {}), style: { display: "grid", gap: 2, borderTop: "1px solid var(--graview-edge)", paddingTop: 5 }, children: [section.heading ? (_jsx("p", { "aria-hidden": "true", style: { margin: 0, padding: "2px 2px 1px", fontSize: "0.75rem", lineHeight: 1.4, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--graview-ink-faint)" }, children: section.heading })) : null, section.items && section.items.length > 0 ? (_jsx("ul", { style: { margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 2 }, children: section.items.map((item) => (_jsx("li", { children: _jsxs("button", { type: "button", "data-menu-item": item.id, "data-menu-lit": lit === `item:${item.id}` || undefined, onClick: () => {
                             close();
                             item.run();
-                        }, style: { padding: "5px 10px", fontSize: "0.875rem", borderRadius: 8, width: "100%", textAlign: "left", borderWidth: 1, borderStyle: "solid", borderColor: "transparent", background: "none", boxShadow: "none" }, children: [item.label, item.hint ? _jsxs("span", { style: { color: "var(--graview-ink-faint)" }, children: [" \u00B7 ", item.hint] }) : null] }) }, item.id))) })) : null, section.render?.(close)] }));
+                        }, style: { ...ROW_STYLE, ...(lit === `item:${item.id}` ? LIT_STYLE : {}) }, children: [item.label, item.hint ? _jsxs("span", { style: { color: "var(--graview-ink-faint)" }, children: [" \u00B7 ", item.hint] }) : null, lit === `item:${item.id}` ? ENTER_MARK : null] }) }, item.id))) })) : null, section.render?.(close)] }));
 }
 //# sourceMappingURL=inspector.js.map