@graview/primitives 0.1.65 → 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";
@@ -11,9 +11,10 @@ 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, useFastRank } from "../menu-rank.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
@@ -80,6 +81,30 @@ function ChosenActs() {
             setMenuAt({ x: Math.round(at.right), y: Math.round(at.bottom + 4), on: one.id });
         }, 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 }) {
@@ -236,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, ...(menuAt.section ? { section: menuAt.section } : {}), 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
@@ -305,6 +330,46 @@ function Pane({ placement }) {
     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.
      *
@@ -497,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
@@ -538,11 +603,18 @@ function Pane({ placement }) {
             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 }] : [];
         });
-    const startSections = narrowed(beside.start);
-    const endSections = narrowed(beside.end);
+    /* 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 !== "" && asks;
+    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) : [];
     /*
@@ -564,17 +636,32 @@ function Pane({ placement }) {
             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 ? "ask" : null));
-    const ask = () => {
+            (askRow && modeLit ? "mode" : null));
+    const ask = (asked = words) => {
         if (!menuAt)
             return;
-        const asked = words;
         const back = menuAt.returnTo ?? null;
         // The card opens where the menu stood, read before the menu goes.
         const from = whereMenuStands(asideRef.current);
-        setMenuAt(null);
         // The quick ask's card, where the menu stood, answering the words at once: its thinking marked on the thing itself.
-        openQuickAsk(aiDesk, { pointed: { on: menuAt.on, about: selection, field: menuAt.field, place: menuAt.place }, asked, returnTo: back, ...(from ? { from } : {}) });
+        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) => {
@@ -587,7 +674,8 @@ function Pane({ placement }) {
         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. */
-    const walkable = () => [...(asideRef.current?.querySelectorAll("[data-affordance]:not([disabled]), [data-menu-item]") ?? [])].filter((row) => row.closest("[data-graview-asking], [hidden]") === null);
+    /* 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
@@ -813,15 +901,7 @@ 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: [
-                            ["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: {
-                        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 ? (_jsx("input", { ref: typeField, type: "text", "data-testid": "menu-type", "data-graview-not-first": "", value: typed, onChange: (event) => {
+                }, 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);
@@ -838,13 +918,22 @@ function Pane({ placement }) {
                         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: asks ? "Type to filter, or tell Graview…" : "Type to filter…", "aria-label": asks ? `Filter what can be done here, or tell Graview what to do about ${askedAbout}` : "Filter what can be done here", autoComplete: "off", autoCorrect: "off", spellCheck: false, enterKeyHint: "go", style: {
+                }, 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",
@@ -855,7 +944,28 @@ function Pane({ placement }) {
                     border: "1px solid var(--graview-edge)",
                     background: "var(--graview-panel)",
                     color: "var(--graview-ink)",
-                } })) : 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) => {
+                } })) : 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"), 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 ? 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.
@@ -907,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",
@@ -935,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;
@@ -1021,18 +1131,18 @@ 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, withheldShown.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,
@@ -1049,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 ? endSections.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, askRow ? (_jsx("div", { "data-menu-section": "ask", style: { display: "grid", gap: 2, borderTop: "1px solid var(--graview-edge)", paddingTop: 5 }, children: _jsxs("button", { type: "button", "data-menu-item": "ask-typed", "data-menu-lit": lit === "ask" || undefined, onClick: ask, style: { ...ROW_STYLE, ...(lit === "ask" ? LIT_STYLE : {}) }, children: ["Tell Graview ", _jsxs("span", { style: { fontWeight: 600 }, children: ["\u201C", words, "\u201D"] }), lit === "ask" ? ENTER_MARK : null] }) })) : 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, 
+                                }, 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) => {
@@ -1068,6 +1190,23 @@ function typingIn(element) {
 /** 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 = [];