@graview/primitives 0.1.57 → 0.1.59

package/dist/find.js

@@ -1,32 +1,50 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { counted, numberAsRead } from "@graview/core";
-import { actsOn, search, touchWeights } from "@graview/core/search";
+import { counted, nounOf, numberAsRead, pluralLabel, pluralOf } from "@graview/core";
+import { actsOn, fold, search, touchWeights } from "@graview/core/search";
 import { kindCardId, withFocus, withJackIn, withOverview, withPicture, withSelection } from "@graview/layout/view";
 import { withoutSearch, withQuery } from "@graview/layout/view-moves";
 import { useKit } from "@graview/react/drawing";
 import { matchWith, POPOVER_STYLE, useFound, useGraview, usePopover, useViolations } from "@graview/react/provider";
 import { hueFor } from "@graview/render";
-import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { VISUALLY_HIDDEN } from "./primitives/index.js";
 import { openQuickAsk, useQuickAskDrawn } from "./quick-ask-desk.js";
 // The Find box searches: it hands the provider the matcher as it is fetched (FR-179).
 matchWith({ search, touchWeights });
+const isAct = (row) => row !== undefined && "act" in row;
+const recordOf = (row) => (row !== undefined && "hit" in row && row.hit.about === "node" ? row : undefined);
 /** The kind a hit belongs with in the strip; rules have a group of their own. */
 const groupOf = (hit) => (hit.about === "rule" ? "rule:" : hit.about === "act" ? "act:" : hit.kind);
+/** Whether the viewport is a desk's: room for the panel beside the list. */
+function useWide(compact) {
+    const measure = () => typeof window === "undefined" || window.innerWidth >= WIDE_FROM;
+    const [wide, setWide] = useState(measure);
+    useEffect(() => {
+        const again = () => setWide(measure());
+        window.addEventListener("resize", again);
+        return () => window.removeEventListener("resize", again);
+    }, []);
+    return wide && !compact;
+}
 export function FindBox({ compact = false }) {
     const { store, view, setView, principal, setMenuAt, brand, aiDesk, selection } = useGraview();
     const asks = useQuickAskDrawn(aiDesk);
     const found = useFound();
     const violations = useViolations();
     const flag = useKit().marks.flag;
+    const wide = useWide(compact);
     const input = useRef(null);
+    const list = useRef(null);
     // Where the keyboard waits between Enter and the place standing (see `hold`).
     const holder = useRef(null);
     const strip = useId();
     const [open, setOpen] = useState(false);
+    // The row lit: the keys' or the pointer's.
     const [active, setActive] = useState(null);
-    // The record whose acts are shown: the one highlighted, kept while the keys move into its acts.
-    const [anchor, setAnchor] = useState(null);
+    // The row the desk's panel says: the lit one, a moment behind a pointer crossing rows on its way to the panel.
+    const [shown, setShown] = useState(null);
+    // The records whose acts were asked for under their rows (a narrow strip's "⋯", or →).
+    const [opened, setOpened] = useState([]);
     const q = view.q ?? "";
     /*
      * `/` OR ⌘K, FROM ANYWHERE. ⌘K is a chord nobody types into a field, so
@@ -74,10 +92,11 @@ export function FindBox({ compact = false }) {
         return () => window.removeEventListener("keydown", onKey);
     }, []);
     /*
-     * WHAT CAN BE DONE ABOUT IT: the acts on the highlighted record, from the
-     * same matcher asked with that record as the subject — never subjectless.
+     * THE GROUPS: a kind's rows under its heading, the kinds in the order of
+     * their best hit. Where several kinds share the strip each shows its best
+     * few and a row to all of them, so one kind of a hundred hits does not push
+     * every other kind out of sight; one kind alone shows its rows whole.
      */
-    const acts = useMemo(() => (anchor && q.trim() ? actsOn(store, anchor, found?.words ?? q, { principal, limit: 4 }) : []), [store, q, found, anchor, principal]);
     const groups = useMemo(() => {
         const held = new Map();
         for (const [index, hit] of (found?.hits ?? []).entries()) {
@@ -87,21 +106,53 @@ export function FindBox({ compact = false }) {
             const rows = held.get(key) ?? [];
             rows.push({ id: `${strip}-${index}`, hit });
             held.set(key, rows);
-            if (hit.about === "node" && hit.id === anchor) {
-                for (const [at, act] of acts.entries())
-                    rows.push({ id: `${strip}-${index}-act-${at}`, hit: act });
-            }
         }
-        return [...held.entries()];
-    }, [found, acts, anchor, strip]);
+        const several = [...held.values()].filter((rows) => rows.some((row) => row.hit.about === "node")).length > 1;
+        return [...held.entries()].map(([key, entries]) => {
+            let records = 0;
+            const rows = entries.filter((row) => row.hit.about !== "node" || !several || ++records <= GROUP_CAP);
+            const listed = rows.filter((row) => row.hit.about === "node").length;
+            const count = key.endsWith(":") ? entries.length : (found?.byKind[key] ?? listed);
+            const more = !key.endsWith(":") && listed > 0 && count > listed ? { id: `${strip}-all-${key}`, all: key, count } : null;
+            return { key, rows, count, more };
+        });
+    }, [found, strip]);
     const asking = asks && q.trim() ? { id: `${strip}-ask`, ask: q.trim() } : null;
-    const rows = useMemo(() => [...groups.flatMap(([, entries]) => entries), ...(asking ? [asking] : [])], [groups, asking?.ask]);
-    const current = rows.find((row) => row.id === active) ?? rows[0];
+    const rows = useMemo(() => [...groups.flatMap((group) => (group.more ? [...group.rows, group.more] : group.rows)), ...(asking ? [asking] : [])], [groups, asking?.ask]);
     const manyFound = (found?.hits ?? []).filter((hit) => hit.about === "node").length;
+    // The words as the matcher folded them, and what they mark in a row.
+    const words = found?.words ?? q;
+    const marking = useMemo(() => fold(words).split(" ").filter(Boolean), [words]);
+    /*
+     * WHAT CAN BE DONE ABOUT IT: the acts on a record, from the same matcher
+     * asked with that record as the subject — never subjectless, and only
+     * those this seat may run.
+     */
+    const actsOf = useCallback((row) => row.hit.about === "node" ? actsOn(store, row.hit.id, words, { principal, limit: ACTS_MOST }).map((act, at) => ({ id: `${row.id}-act-${at}`, act, of: row.id })) : [], [store, words, principal]);
+    const lit = rows.find((row) => row.id === active);
+    const subject = rows.find((row) => row.id === shown) ?? lit ?? rows[0];
+    const panelActs = useMemo(() => (wide && recordOf(subject) ? actsOf(subject) : []), [wide, subject?.id, actsOf]);
+    const openActs = useMemo(() => {
+        if (wide)
+            return new Map();
+        return new Map(opened.flatMap((id) => {
+            const row = recordOf(rows.find((one) => one.id === id));
+            return row ? [[id, actsOf(row)]] : [];
+        }));
+    }, [wide, opened, rows, actsOf]);
+    // In a narrow strip, which records have acts to ask for: a "⋯" that opened on nothing would be offered and refused.
+    const hasActs = useMemo(() => {
+        if (wide)
+            return new Set();
+        return new Set(rows.flatMap((row) => (recordOf(row) && actsOf(row).length > 0 ? [row.id] : [])));
+    }, [wide, rows, actsOf]);
+    const actRows = useMemo(() => (wide ? panelActs : [...openActs.values()].flat()), [wide, panelActs, openActs]);
+    const current = lit ?? actRows.find((row) => row.id === active) ?? rows[0];
     // A new answer starts at its first row, as a list does.
     useEffect(() => {
         setActive(null);
-        setAnchor(null);
+        setShown(null);
+        setOpened([]);
     }, [q]);
     /*
      * WHERE ENTER WENT, THE KEYS GO (the tenth walk). Into a kind or one of
@@ -164,22 +215,63 @@ export function FindBox({ compact = false }) {
         waiting.setAttribute("aria-label", going);
         waiting.focus({ preventScroll: true });
     };
+    /*
+     * THE POINTER LIGHTS, IT DOES NOT MOVE ANYTHING. A row is lit by the
+     * pointer only when the pointer itself moved: a list scrolled, or drawn
+     * again, under a still pointer sends a mouse event at the same place, and
+     * that lit whatever row slid under it. And the panel follows the pointer a
+     * moment behind (`AIM`), so a pointer crossing rows on its way to an act
+     * in the panel finds the record it left still there.
+     */
+    const pointer = useRef({ x: Number.NaN, y: Number.NaN, moved: false });
+    useEffect(() => {
+        const onMove = (event) => {
+            const at = pointer.current;
+            at.moved = event.clientX !== at.x || event.clientY !== at.y;
+            at.x = event.clientX;
+            at.y = event.clientY;
+        };
+        window.addEventListener("mousemove", onMove, { capture: true, passive: true });
+        return () => window.removeEventListener("mousemove", onMove, { capture: true });
+    }, []);
+    const aim = useRef(undefined);
+    useEffect(() => () => clearTimeout(aim.current), []);
+    /** Lights a row from the keyboard: the panel says it at once. */
     const highlight = (row) => {
         if (!row)
             return;
+        clearTimeout(aim.current);
         setActive(row.id);
-        if ("ask" in row) {
-            setAnchor(null);
+        if (!isAct(row))
+            setShown(row.id);
+    };
+    /** Lights the row under a pointer that moved. */
+    const point = (event) => {
+        if (!pointer.current.moved)
             return;
-        }
-        if (row.hit.about === "node")
-            setAnchor(row.hit.id);
-        else if (row.hit.about !== "act")
-            setAnchor(null);
+        const id = event.target.closest?.('[role="option"]')?.id;
+        if (!id || id === active)
+            return;
+        const row = rows.find((one) => one.id === id) ?? actRows.find((one) => one.id === id);
+        if (!row)
+            return;
+        setActive(row.id);
+        if (isAct(row))
+            return;
+        clearTimeout(aim.current);
+        aim.current = setTimeout(() => setShown(row.id), AIM);
+    };
+    /** Into the panel: whatever row the pointer crossed on its way, the record the panel says is the one lit. */
+    const settle = () => {
+        clearTimeout(aim.current);
+        if (subject && !isAct(current))
+            setActive(subject.id);
     };
+    /** A record's acts, asked for under its row; asked again, put away. */
+    const toggle = (row) => setOpened((now) => (now.includes(row.id) ? now.filter((id) => id !== row.id) : [...now, row.id]));
     /** How many rows a page of the strip is: what it shows at once, less one kept for context. */
     const pageOf = (count) => {
-        const pane = document.getElementById(strip);
+        const pane = list.current;
         const one = pane?.querySelector('[role="option"]')?.getBoundingClientRect().height ?? 0;
         const room = pane?.clientHeight ?? 0;
         return Math.min(count, one > 0 && room > 0 ? Math.max(1, Math.floor(room / one) - 1) : FIND_PAGE);
@@ -199,6 +291,23 @@ export function FindBox({ compact = false }) {
             setOpen(false);
             return;
         }
+        if ("all" in row) {
+            // Every one the words found of the kind: into it, narrowed by the words, as the district's "N match" goes in.
+            setView((stop) => withJackIn(withOverview(stop, false), kindCardId(row.all), { ownPicture: true, ...(stop.q ? { carry: stop.q } : {}) }));
+            landOn.current = row.all;
+            setOpen(false);
+            return hold(row.all, `Opening ${pluralLabel(store.schema, row.all)} matching “${q.trim()}”…`);
+        }
+        if (isAct(row)) {
+            // The act lives in the menu on its subject, with its form and its preview.
+            const subjectId = row.act.subject;
+            setView((stop) => withSelection(stop, [subjectId]));
+            const box = input.current?.getBoundingClientRect();
+            setMenuAt({ x: box?.left ?? 0, y: (box?.bottom ?? 0) + 6, on: subjectId });
+            setOpen(false);
+            input.current?.blur();
+            return;
+        }
         const hit = row.hit;
         switch (hit.about) {
             case "node":
@@ -226,13 +335,8 @@ export function FindBox({ compact = false }) {
                 setView((stop) => withSelection(stop, [...new Set(named)]));
                 break;
             }
-            case "act": {
-                // The act lives in the menu on its subject, with its form and its preview.
-                setView((stop) => withSelection(stop, [hit.subject]));
-                const box = input.current?.getBoundingClientRect();
-                setMenuAt({ x: box?.left ?? 0, y: (box?.bottom ?? 0) + 6, on: hit.subject });
+            case "act":
                 break;
-            }
         }
         setOpen(false);
         input.current?.blur();
@@ -266,76 +370,100 @@ export function FindBox({ compact = false }) {
         },
         ...(compact ? { at: underTheBar } : {}),
     });
+    const nothing = rows.every((row) => "ask" in row);
+    const actsOfRecord = (row) => (isAct(row) ? actRows.filter((one) => one.of === row.of) : []);
+    const onKeyDown = (event) => {
+        /*
+         * RECORD TO RECORD, ONE KEY EACH (the tenth walk). ↓ and ↑ walk the
+         * records; → goes into the acts of the one lit — the desk's panel, or
+         * opened under it in a narrow strip — and ← back to it. In the acts ↓
+         * and ↑ walk the acts.
+         */
+        const inActs = isAct(current) && active !== null;
+        const from = inActs ? rows.find((row) => row.id === current.of) : active !== null ? lit : undefined;
+        // Nothing lit yet: the first ↓ lands on the first row, not the second.
+        const at = from ? rows.indexOf(from) : -1;
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setOpen(true);
+            if (inActs) {
+                const acts = actsOfRecord(current);
+                const next = acts.indexOf(current) + 1;
+                if (next < acts.length)
+                    return highlight(acts[next]);
+                // Past the last act: under a row, the next record; in the panel, it stays.
+                if (wide)
+                    return;
+            }
+            highlight(rows[Math.min(rows.length - 1, at + 1)]);
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            if (inActs) {
+                const acts = actsOfRecord(current);
+                const back = acts.indexOf(current) - 1;
+                return highlight(back >= 0 ? acts[back] : from);
+            }
+            highlight(rows[Math.max(0, at - 1)]);
+        }
+        else if ((event.key === "PageDown" || event.key === "PageUp") && rows.length > 0) {
+            /*
+             * A PAGE OF RECORDS AT A TIME (the tenth walk): the strip's own
+             * height of them, so a hundred talks are ten keys and not a hundred.
+             * Home and End stay the words' own: the box is a field being written in.
+             */
+            event.preventDefault();
+            setOpen(true);
+            const step = event.key === "PageDown" ? pageOf(rows.length) : -pageOf(rows.length);
+            highlight(rows[Math.min(rows.length - 1, Math.max(0, (at < 0 ? -1 : at) + step))]);
+        }
+        else if (event.key === "ArrowRight" && !inActs && recordOf(current)) {
+            const row = current;
+            const acts = wide ? (row.id === subject?.id ? panelActs : actsOf(row)) : (openActs.get(row.id) ?? actsOf(row));
+            if (acts.length === 0)
+                return;
+            event.preventDefault();
+            if (!wide && !opened.includes(row.id))
+                setOpened((now) => [...now, row.id]);
+            setShown(row.id);
+            setActive(acts[0].id);
+        }
+        else if (event.key === "ArrowLeft" && inActs) {
+            event.preventDefault();
+            const of = current.of;
+            if (!wide)
+                setOpened((now) => now.filter((id) => id !== of));
+            highlight(rows.find((row) => row.id === of));
+        }
+        else if (event.key === "Enter") {
+            event.preventDefault();
+            travel(current);
+        }
+        else if (event.key === "Escape") {
+            event.preventDefault();
+            // The words first; an empty box lets go of the keys.
+            if (q)
+                setView((stop) => withoutSearch(stop));
+            else
+                input.current?.blur();
+        }
+    };
+    const option = (row, body, extra = {}, props = {}) => {
+        const on = row.id === current?.id;
+        return (_jsx("div", { id: row.id, role: "option", "aria-selected": on, onClick: () => travel(row), style: { ...OPTION, ...(on ? LIT : null), ...extra }, ...props, children: body }, row.id));
+    };
+    const actOption = (row, under) => {
+        const on = row.id === current?.id;
+        return (_jsx("div", { id: row.id, role: "option", "aria-selected": on, "data-testid": "find-act", "data-about": "act", onClick: () => travel(row), style: { ...(under ? ACT_UNDER : ACT), ...(on ? ACT_LIT : null), ...(row.act.destructive ? { color: "var(--graview-warn)" } : null) }, children: row.act.title }, row.id));
+    };
     return (_jsxs("div", { style: { position: "relative", minWidth: 0, flex: "1 1 auto" }, "data-testid": "find", children: [_jsx("input", { ref: (element) => {
                     input.current = element;
                     popover.trigger.ref(element);
                 }, "data-graview-popover-trigger": "find", type: "search", role: "combobox", "aria-label": "Find anything", "aria-expanded": expanded, "aria-controls": strip, "aria-autocomplete": "list", ...(expanded && current ? { "aria-activedescendant": current.id } : {}), "data-testid": "find-box", placeholder: "Find\u2026", "aria-keyshortcuts": "/ Meta+K Control+K", value: q, onChange: (event) => {
-                    const words = event.target.value;
+                    const typed = event.target.value;
                     setOpen(true);
-                    setView((stop) => withQuery(stop, words.length > 0 ? words : null));
-                }, onFocus: () => setOpen(true), onBlur: () => setOpen(false), onKeyDown: (event) => {
-                    // Nothing highlighted yet: the first ↓ lands on the first row, not the second.
-                    const at = active !== null && current ? rows.indexOf(current) : -1;
-                    /*
-                     * RECORD TO RECORD, ONE KEY EACH (the tenth walk). A record lit
-                     * unfolds its acts under it, and ↓ walked into them: five keys a
-                     * record, and the gauntlet's longest title past the keyboard's
-                     * reach. ↓ goes past the acts of the record lit; → goes into them,
-                     * ← back to their record.
-                     */
-                    const anAct = (row) => row !== undefined && !("ask" in row) && row.hit.about === "act";
-                    const onRecord = at >= 0 && current !== undefined && !("ask" in current) && current.hit.about === "node";
-                    if (event.key === "ArrowDown") {
-                        event.preventDefault();
-                        setOpen(true);
-                        let next = at + 1;
-                        if (onRecord)
-                            while (next < rows.length - 1 && anAct(rows[next]))
-                                next += 1;
-                        highlight(rows[Math.min(rows.length - 1, next)]);
-                    }
-                    else if (event.key === "ArrowUp") {
-                        event.preventDefault();
-                        highlight(rows[Math.max(0, at - 1)]);
-                    }
-                    else if ((event.key === "PageDown" || event.key === "PageUp") && rows.length > 0) {
-                        /*
-                         * A PAGE OF RECORDS AT A TIME (the tenth walk): the strip's own
-                         * height of them, past the acts unfolded under one, so a hundred
-                         * talks are ten keys and not a hundred. Home and End stay the
-                         * words' own: the box is a field being written in.
-                         */
-                        event.preventDefault();
-                        setOpen(true);
-                        const records = rows.flatMap((row, index) => (anAct(row) ? [] : [index]));
-                        const from = Math.max(0, records.findIndex((index) => index >= Math.max(at, 0)));
-                        const step = event.key === "PageDown" ? pageOf(rows.length) : -pageOf(rows.length);
-                        highlight(rows[records[Math.min(records.length - 1, Math.max(0, (at < 0 ? -1 : from) + step))]]);
-                    }
-                    else if (event.key === "ArrowRight" && onRecord && anAct(rows[at + 1])) {
-                        event.preventDefault();
-                        highlight(rows[at + 1]);
-                    }
-                    else if (event.key === "ArrowLeft" && anAct(current)) {
-                        event.preventDefault();
-                        let back = at - 1;
-                        while (back > 0 && anAct(rows[back]))
-                            back -= 1;
-                        highlight(rows[back]);
-                    }
-                    else if (event.key === "Enter") {
-                        event.preventDefault();
-                        travel(current);
-                    }
-                    else if (event.key === "Escape") {
-                        event.preventDefault();
-                        // The words first; an empty box lets go of the keys.
-                        if (q)
-                            setView((stop) => withoutSearch(stop));
-                        else
-                            input.current?.blur();
-                    }
-                }, style: {
+                    setView((stop) => withQuery(stop, typed.length > 0 ? typed : null));
+                }, onFocus: () => setOpen(true), onBlur: () => setOpen(false), onKeyDown: onKeyDown, style: {
                     width: "100%",
                     boxSizing: "border-box",
                     minWidth: 0,
@@ -348,35 +476,136 @@ export function FindBox({ compact = false }) {
                     background: "var(--graview-panel)",
                     border: `1px solid ${q ? "var(--graview-accent)" : "var(--graview-edge)"}`,
                     borderRadius: 8,
-                } }), _jsx("span", { role: "status", "aria-live": "polite", style: VISUALLY_HIDDEN, "data-testid": "find-count", children: q.trim() ? announce : "" }), _jsx("span", { ref: holder, tabIndex: -1, role: "status", style: VISUALLY_HIDDEN, "data-testid": "find-landing" }), _jsxs("div", { ...popover.pane, id: strip, role: "listbox", "aria-label": q ? `What “${q}” finds` : "What the words find", "data-testid": "find-strip", hidden: !expanded, 
+                } }), _jsx("span", { role: "status", "aria-live": "polite", style: VISUALLY_HIDDEN, "data-testid": "find-count", children: q.trim() ? announce : "" }), _jsx("span", { ref: holder, tabIndex: -1, role: "status", style: VISUALLY_HIDDEN, "data-testid": "find-landing" }), _jsxs("div", { ...popover.pane, id: strip, role: "listbox", "aria-label": q ? `What “${q}” finds` : "What the words find", "data-testid": "find-strip", "data-graview-find": wide ? "panel" : "narrow", hidden: !expanded, 
                 // Mousedown on a row must not blur the box before the click lands.
-                onMouseDown: (event) => event.preventDefault(), style: compact ? { ...STRIP, ...SHEET } : STRIP, children: [rows.every((row) => "ask" in row) ? (_jsxs("p", { role: "presentation", style: { margin: 0, padding: "10px 12px", color: "var(--graview-ink-muted)", fontSize: "0.875rem" }, "data-testid": "find-nothing", children: ["Nothing here is called \u201C", found?.words || q, "\u201D."] })) : (groups.map(([key, entries]) => (_jsxs("div", { role: "group", "aria-label": headingOf(key, store.schema), children: [_jsxs("div", { role: "presentation", style: HEADING, children: [key !== "rule:" ? _jsx(Mark, { kind: key, accents: brand?.accents }) : null, headingOf(key, store.schema)] }), entries.map((row) => (_jsx("div", { id: row.id, role: "option", "aria-selected": row === current, "data-testid": "find-hit", "data-about": row.hit.about, ...(row.hit.about === "node" && row.hit.near ? { "data-near": "" } : {}), onMouseEnter: () => highlight(row), onClick: () => travel(row), style: {
-                                    ...OPTION,
-                                    ...(row.hit.about === "act" ? { paddingLeft: 30 } : {}),
-                                    background: row === current ? "var(--graview-panel-muted)" : "transparent",
-                                }, children: _jsx(HitLine, { hit: row.hit, flag: flag }) }, row.id)))] }, key)))), asking ? (_jsx("div", { id: asking.id, role: "option", "aria-selected": asking === current || current?.id === asking.id, "data-testid": "find-ask", onMouseEnter: () => highlight(asking), onClick: () => travel(asking), style: {
-                            ...OPTION,
-                            borderTop: "1px solid var(--graview-edge)",
-                            marginTop: 4,
-                            background: current?.id === asking.id ? "var(--graview-panel-muted)" : "transparent",
-                        }, children: _jsxs("span", { children: ["Ask: ", _jsxs("span", { style: { fontWeight: 600 }, children: ["\u2018", asking.ask, "\u2019"] })] }) })) : null, manyFound > MANY_FOUND ? (_jsxs("p", { role: "presentation", style: { margin: 0, padding: "6px 12px 2px", color: "var(--graview-ink-faint)", fontSize: "0.75rem" }, "data-testid": "find-more-words", children: [numberAsRead(manyFound), " found: another word of the name narrows them."] })) : null, found && found.searched.past === false && found.searched.kinds.some((kind) => store.schema.tryDefinition(kind)?.lifecycle) ? (_jsx("p", { role: "presentation", style: { margin: 0, padding: "6px 12px 8px", color: "var(--graview-ink-faint)", fontSize: "0.75rem" }, children: "Current ones; add is:any for the past." })) : null] })] }));
+                onMouseDown: (event) => event.preventDefault(), 
+                // Shown, it is a column — the list, the panel beside it, the keys under them; put away, the popover's own rule hides it.
+                style: { ...STRIP, ...(compact ? SHEET : wide && !nothing ? WIDE : null), ...(expanded ? { display: "flex" } : null) }, children: [_jsxs("div", { style: { ...BODY, gridTemplateColumns: wide && !nothing ? `minmax(0, 1fr) ${PANEL_WIDTH}` : "minmax(0, 1fr)" }, children: [_jsxs("div", { ref: list, role: "presentation", "data-testid": "find-list", onMouseMove: point, style: LIST, children: [nothing ? (_jsxs("p", { role: "presentation", style: { margin: 0, padding: "10px 12px", color: "var(--graview-ink-muted)", fontSize: "0.875rem" }, "data-testid": "find-nothing", children: ["Nothing here is called \u201C", found?.words || q, "\u201D."] })) : (groups.map((group) => (_jsxs("div", { role: "group", "aria-label": headingOf(group.key, store.schema), children: [_jsxs("div", { role: "presentation", style: HEADING, children: [group.key !== "rule:" && group.key !== "act:" ? _jsx(Mark, { kind: group.key, accents: brand?.accents }) : null, _jsx("span", { style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: headingOf(group.key, store.schema) }), _jsx("span", { "aria-hidden": "true", style: COUNT, "data-testid": "find-group-count", children: numberAsRead(group.count) })] }), group.rows.map((row) => {
+                                                const hit = row.hit;
+                                                const record = hit.about === "node" ? hit : null;
+                                                const asks = !wide && record !== null && hasActs.has(row.id);
+                                                const under = openActs.get(row.id);
+                                                return (_jsxs(Fragment, { children: [option(row, _jsxs(_Fragment, { children: [_jsx(HitLine, { hit: hit, flag: flag, words: record?.near && record.why.matched ? [...marking, fold(record.why.matched)] : marking }), asks ? (_jsx("span", { "aria-hidden": "true", "data-testid": "find-acts-open", "data-open": under ? "" : undefined, title: under ? "Put its actions away" : "Actions", onClick: (event) => {
+                                                                        event.stopPropagation();
+                                                                        toggle(row);
+                                                                    }, style: { ...MORE, ...(under ? MORE_OPEN : null) }, children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: [_jsx("circle", { cx: "3.5", cy: "8", r: "1.4", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "8", r: "1.4", fill: "currentColor" }), _jsx("circle", { cx: "12.5", cy: "8", r: "1.4", fill: "currentColor" })] }) })) : null] }), asks ? { paddingRight: 48 } : {}, {
+                                                            "data-testid": "find-hit",
+                                                            "data-about": hit.about,
+                                                            ...(record?.near ? { "data-near": "" } : {}),
+                                                            title: titleOf(hit),
+                                                        }), under ? (_jsx("div", { role: "group", "aria-label": `What can be done about ${record?.label ?? "it"}`, style: UNDER, children: under.map((act) => actOption(act, true)) })) : null] }, row.id));
+                                            }), group.more
+                                                ? option(group.more, _jsxs("span", { style: ONE_LINE, children: ["All ", numberAsRead(group.more.count), " ", pluralOf(store.schema, group.more.all).toLowerCase(), " matching \u201C", q.trim(), "\u201D"] }), ALL, { "data-testid": "find-all", "data-about": "all" })
+                                                : null] }, group.key)))), asking ? option(asking, _jsxs("span", { style: ONE_LINE, children: ["Ask: ", _jsxs("span", { style: { fontWeight: 600 }, children: ["\u2018", asking.ask, "\u2019"] })] }), { borderTop: "1px solid var(--graview-edge)", marginTop: 4 }, { "data-testid": "find-ask" }) : null, manyFound > MANY_FOUND ? (_jsxs("p", { role: "presentation", style: NOTE, "data-testid": "find-more-words", children: [numberAsRead(manyFound), " found: another word of the name narrows them."] })) : null, found && found.searched.past === false && found.searched.kinds.some((kind) => store.schema.tryDefinition(kind)?.lifecycle) ? (_jsx("p", { role: "presentation", style: NOTE, children: "Current ones; add is:any for the past." })) : null] }), wide && !nothing && subject ? (_jsxs("div", { role: "group", "aria-label": "The one lit", "data-testid": "find-panel", onMouseEnter: settle, onMouseMove: point, style: PANEL, children: [_jsx(Said, { row: subject, schema: store.schema, accents: brand?.accents, marking: marking, q: q.trim(), flag: flag }), panelActs.length > 0 ? (_jsxs("div", { role: "group", "aria-label": "Actions", style: { display: "grid", gap: 4 }, children: [_jsx("div", { role: "presentation", style: { ...HEADING, padding: "10px 0 4px" }, children: "Actions" }), panelActs.map((act) => actOption(act, false))] })) : null] })) : null] }), compact ? null : (_jsxs("div", { "aria-hidden": "true", style: FOOT, "data-testid": "find-keys", children: [_jsxs("span", { children: [_jsx("kbd", { style: KBD, children: "\u2191" }), _jsx("kbd", { style: KBD, children: "\u2193" }), " move"] }), _jsxs("span", { children: [_jsx("kbd", { style: KBD, children: "\u21B5" }), " open"] }), _jsxs("span", { children: [_jsx("kbd", { style: KBD, children: "\u2192" }), " actions"] }), _jsxs("span", { children: [_jsx("kbd", { style: KBD, children: "esc" }), " close"] })] }))] })] }));
+}
+/** The row lit, said whole in the desk's panel: what it is, its name, and why the words found it. */
+function Said({ row, schema, accents, marking, q, flag }) {
+    let kind = null;
+    let over = "";
+    let name;
+    let lines = null;
+    if ("ask" in row) {
+        over = "Ask";
+        name = `‘${row.ask}’`;
+        lines = _jsx("p", { style: PANEL_LINE, children: "Asks it of what is selected; the answer comes on a card beside it." });
+    }
+    else if ("all" in row) {
+        kind = row.all;
+        over = pluralLabel(schema, row.all);
+        name = `All ${numberAsRead(row.count)} matching “${q}”`;
+        lines = _jsxs("p", { style: PANEL_LINE, children: ["Opens the ", pluralOf(schema, row.all).toLowerCase(), ", narrowed by these words."] });
+    }
+    else {
+        const hit = row.hit;
+        switch (hit.about) {
+            case "node": {
+                kind = hit.kind;
+                over = capitalized(nounOf(schema.tryDefinition(hit.kind), hit.kind));
+                name = (_jsxs(_Fragment, { children: [hit.flagged ? _jsxs("span", { style: { color: "var(--graview-warn)" }, children: [flag, " "] }) : null, _jsx(Marked, { text: hit.label, words: marking })] }));
+                const notes = [hit.apart, hit.current ? null : "past", hit.archived ? "set aside" : null].filter(Boolean).join(" · ");
+                lines = (_jsxs(_Fragment, { children: [notes ? _jsx("p", { style: PANEL_LINE, children: capitalized(notes) }) : null, hit.near ? (_jsxs("p", { style: PANEL_LINE, children: ["Near \u201C", hit.why.asked, "\u201D", hit.why.field !== "label" ? ` — ${hit.why.reading.toLowerCase()}: ${hit.why.fragment}` : ""] })) : hit.why.field !== "label" ? (_jsxs("p", { style: PANEL_LINE, children: [_jsx("span", { style: { color: "var(--graview-ink-faint)" }, children: hit.why.reading }), _jsx("br", {}), _jsx(Marked, { text: hit.why.fragment, words: marking })] })) : null] }));
+                break;
+            }
+            case "kind":
+                kind = hit.kind;
+                over = "Kind";
+                name = hit.label;
+                lines = _jsxs("p", { style: PANEL_LINE, children: ["Goes into the ", hit.label.toLowerCase(), ", all of them", hit.count > 0 ? `; ${numberAsRead(hit.count)} match these words` : "", "."] });
+                break;
+            case "place":
+                kind = hit.kind;
+                over = "Place";
+                name = hit.title;
+                lines = _jsxs("p", { style: PANEL_LINE, children: ["A picture of the ", pluralOf(schema, hit.kind).toLowerCase(), "."] });
+                break;
+            case "rule":
+                over = "Rule";
+                name = hit.label;
+                lines = _jsx("p", { style: PANEL_LINE, children: "Selects what it flags." });
+                break;
+            case "act":
+                over = "Act";
+                name = hit.title;
+                break;
+        }
+    }
+    return (_jsxs("div", { role: "presentation", "data-testid": "find-said", style: { display: "grid", gap: 6 }, children: [_jsxs("div", { style: { ...HEADING, padding: 0 }, children: [kind ? _jsx(Mark, { kind: kind, accents: accents }) : null, over] }), _jsx("div", { style: PANEL_NAME, children: name }), lines] }));
 }
-function HitLine({ hit, flag }) {
+function HitLine({ hit, flag, words }) {
     switch (hit.about) {
         case "node":
-            return (_jsxs(_Fragment, { children: [_jsxs("span", { style: { fontWeight: 600, overflowWrap: "anywhere" }, children: [hit.flagged ? _jsxs("span", { style: { color: "var(--graview-warn)" }, children: [flag, " "] }) : null, hit.label, hit.apart ? _jsxs("span", { style: MUTED, children: [" \u00B7 ", hit.apart] }) : null, hit.current ? null : _jsx("span", { style: MUTED, children: " \u00B7 past" })] }), hit.near ? (
+            return (_jsxs(_Fragment, { children: [_jsxs("span", { style: TITLE, children: [hit.flagged ? _jsxs("span", { style: { color: "var(--graview-warn)" }, children: [flag, " "] }) : null, _jsx(Marked, { text: hit.label, words: words }), hit.apart ? _jsxs("span", { style: MUTED, children: [" \u00B7 ", hit.apart] }) : null, hit.current ? null : _jsx("span", { style: MUTED, children: " \u00B7 past" })] }), hit.near ? (
                     // Found by a word near the one typed, and said so: "Near “florist” — tags: flowers".
-                    _jsxs("span", { style: MUTED, "data-testid": "find-near", children: ["Near \u201C", hit.why.asked, "\u201D", hit.why.field !== "label" ? ` — ${hit.why.reading.toLowerCase()}: ${hit.why.fragment}` : ""] })) : hit.why.field !== "label" ? (_jsxs("span", { style: MUTED, children: [hit.why.reading.toLowerCase(), ": ", hit.why.fragment] })) : null] }));
+                    _jsxs("span", { style: { ...ONE_LINE, ...MUTED }, "data-testid": "find-near", children: ["Near \u201C", hit.why.asked, "\u201D", hit.why.field !== "label" ? ` — ${hit.why.reading.toLowerCase()}: ` : "", hit.why.field !== "label" ? _jsx(Marked, { text: hit.why.fragment, words: words }) : null] })) : hit.why.field !== "label" ? (_jsxs("span", { style: { ...ONE_LINE, ...MUTED }, children: [hit.why.reading.toLowerCase(), ": ", _jsx(Marked, { text: hit.why.fragment, words: words })] })) : null] }));
         case "kind":
-            return (_jsxs("span", { children: [hit.label, _jsxs("span", { style: MUTED, children: [" \u00B7 ", hit.count, " match"] })] }));
+            return (_jsxs("span", { style: ONE_LINE, children: [_jsx(Marked, { text: hit.label, words: words }), _jsxs("span", { style: MUTED, children: [" \u00B7 ", hit.count, " match"] })] }));
         case "place":
-            return _jsxs("span", { children: ["Go to ", hit.title] });
+            return (_jsxs("span", { style: ONE_LINE, children: ["Go to ", _jsx(Marked, { text: hit.title, words: words })] }));
         case "rule":
-            return _jsxs("span", { children: ["The rule \u201C", hit.label, "\u201D"] });
+            return (_jsxs("span", { style: ONE_LINE, children: ["The rule \u201C", _jsx(Marked, { text: hit.label, words: words }), "\u201D"] }));
         case "act":
-            return (_jsxs("span", { style: hit.destructive ? { color: "var(--graview-warn)" } : undefined, children: [hit.title, _jsxs("span", { style: MUTED, children: [" \u00B7 ", hit.why.field === "title" ? "act" : `on ${hit.why.fragment}`] })] }));
+            return _jsx("span", { style: ONE_LINE, children: hit.title });
+    }
+}
+/**
+ * THE WORDS THAT MATCHED, MARKED: each word of the text that a word typed
+ * begins — "track" in "on-site tracking" — as the matcher reads them, case
+ * and accents aside, so the mark is where the match was.
+ */
+function markedParts(text, words) {
+    if (words.length === 0)
+        return [{ text }];
+    const parts = [];
+    let last = 0;
+    for (const match of text.matchAll(/[\p{L}\p{N}]+/gu)) {
+        const token = match[0];
+        const folded = fold(token).replace(/ /g, "");
+        const word = words.filter((one) => folded.startsWith(one)).sort((a, b) => b.length - a.length)[0];
+        if (!word)
+            continue;
+        // Where folding kept its length, the letters typed; where it did not (a ligature, a dotted I), the whole word.
+        const length = folded.length === token.length ? word.length : token.length;
+        const start = match.index ?? 0;
+        if (start > last)
+            parts.push({ text: text.slice(last, start) });
+        parts.push({ text: token.slice(0, length), marked: true });
+        last = start + length;
     }
+    if (last < text.length)
+        parts.push({ text: text.slice(last) });
+    return parts;
+}
+function Marked({ text, words }) {
+    return (_jsx(_Fragment, { children: markedParts(text, words).map((part, at) => part.marked ? (_jsx("mark", { style: MARK, children: part.text }, at)) : (_jsx(Fragment, { children: part.text }, at))) }));
+}
+/** A row's whole text, for the pointer that rests on one cut short. */
+function titleOf(hit) {
+    if (hit.about !== "node")
+        return "";
+    const why = hit.near ? `Near “${hit.why.asked}”` : hit.why.field !== "label" ? `${hit.why.reading}: ${hit.why.fragment}` : "";
+    return why ? `${hit.label}\n${why}` : hit.label;
 }
+const capitalized = (text) => (text ? text[0].toUpperCase() + text.slice(1) : text);
 function Mark({ kind, accents }) {
     const hue = Math.round(hueFor(kind, accents));
     return _jsx("span", { "aria-hidden": "true", style: { width: 8, height: 8, borderRadius: 2, flex: "0 0 auto", background: `hsl(${hue} 55% 52%)` } });
@@ -386,8 +615,7 @@ function headingOf(key, schema) {
         return "Rules";
     if (key === "act:")
         return "Acts";
-    const definition = schema.tryDefinition(key);
-    return definition?.plural ?? `${key}s`;
+    return pluralLabel(schema, key);
 }
 /** "3 tasks, 1 list" — what a screen reader hears as the count changes. */
 function spoken(byKind, hits, schema) {
@@ -404,21 +632,34 @@ function spoken(byKind, hits, schema) {
 const FIND_PAGE = 10;
 /** From how many records an answer asks for another word rather than being walked. */
 const MANY_FOUND = 12;
+/** Where several kinds share the strip, how many of each it shows before "All N …". */
+const GROUP_CAP = 5;
+/** How many acts a record offers in the strip; the rest are in its menu. */
+const ACTS_MOST = 6;
+/** How long the panel waits on a pointer crossing rows before it says the row lit (ms). */
+const AIM = 140;
+/** From what viewport width the strip has room for the panel beside the list. */
+const WIDE_FROM = 760;
+const PANEL_WIDTH = "15.5rem";
 const STRIP = {
     ...POPOVER_STYLE,
+    flexDirection: "column",
     width: "min(26rem, calc(100vw - 24px))",
-    maxHeight: "min(60vh, 28rem)",
-    overflowY: "auto",
+    maxHeight: "min(64vh, 30rem)",
+    overflow: "hidden",
     boxSizing: "border-box",
-    background: "var(--graview-panel)",
+    // The panel's color over the ground's: where the scheme's panel is a glass, the picture behind does not read through the words.
+    background: "linear-gradient(var(--graview-panel), var(--graview-panel)) var(--graview-ground, var(--graview-panel))",
     borderTop: "1px solid var(--graview-edge)",
     borderRight: "1px solid var(--graview-edge)",
     borderBottom: "1px solid var(--graview-edge)",
     borderLeft: "1px solid var(--graview-edge)",
     borderRadius: 10,
     boxShadow: "0 10px 28px rgb(0 0 0 / 0.18)",
-    padding: "4px 0",
+    padding: 0,
 };
+/** On a desk, room for the panel beside the list. */
+const WIDE = { width: "min(42rem, calc(100vw - 24px))" };
 /** The gap `useTopLayer` leaves under an anchor, taken back so the sheet meets the bar's edge. */
 const SHEET_GAP = 6;
 /** On a phone's bar the strip is a sheet under the bar, the bar's own width (`--graview-bar-width`, the screen's where no bar says it). */
@@ -429,26 +670,127 @@ const SHEET = {
     borderLeft: "none",
     borderRight: "none",
 };
+const BODY = { display: "grid", gridTemplateRows: "minmax(0, 1fr)", flex: "1 1 auto", minHeight: 0 };
+const LIST = { overflowY: "auto", overflowX: "hidden", minHeight: 0, padding: "4px 0", overscrollBehavior: "contain" };
+const PANEL = {
+    overflowY: "auto",
+    minHeight: 0,
+    padding: "12px 14px",
+    borderLeft: "1px solid var(--graview-edge)",
+    background: "var(--graview-panel-muted)",
+    display: "flex",
+    flexDirection: "column",
+    gap: 4,
+};
+const PANEL_NAME = { fontWeight: 600, fontSize: "0.9375rem", lineHeight: 1.35, color: "var(--graview-ink)", overflowWrap: "anywhere" };
+const PANEL_LINE = { margin: 0, fontSize: "0.8125rem", lineHeight: 1.45, color: "var(--graview-ink-muted)", overflowWrap: "anywhere" };
 const HEADING = {
     display: "flex",
     alignItems: "center",
     gap: 6,
-    padding: "8px 12px 2px",
+    padding: "10px 12px 4px",
     fontSize: "0.6875rem",
+    fontWeight: 600,
     letterSpacing: "0.06em",
     textTransform: "uppercase",
     color: "var(--graview-ink-muted)",
 };
+const COUNT = { marginLeft: "auto", fontWeight: 400, letterSpacing: 0, fontVariantNumeric: "tabular-nums", color: "var(--graview-ink-faint)" };
 const OPTION = {
+    position: "relative",
     display: "grid",
     gap: 1,
-    minHeight: 32,
+    minHeight: 34,
     padding: "5px 12px",
     alignContent: "center",
     cursor: "pointer",
     fontSize: "0.875rem",
     lineHeight: 1.35,
     color: "var(--graview-ink)",
+    minWidth: 0,
+};
+/** The row lit: a wash and a bar at its edge, in the app's accent. */
+const LIT = { background: "color-mix(in srgb, var(--graview-accent) 12%, var(--graview-panel))", boxShadow: "inset 3px 0 0 var(--graview-accent)" };
+const ALL = { color: "var(--graview-accent)", fontSize: "0.8125rem", minHeight: 30 };
+const ONE_LINE = { display: "block", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" };
+/** A record's name: two lines at most, so a long name still shows the word that found it, and never more, so no row is a paragraph. */
+const TITLE = {
+    display: "-webkit-box",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: 2,
+    minWidth: 0,
+    overflow: "hidden",
+    overflowWrap: "anywhere",
+    fontWeight: 600,
 };
 const MUTED = { color: "var(--graview-ink-muted)", fontSize: "0.8125rem", fontWeight: 400 };
+const MARK = {
+    background: "color-mix(in srgb, var(--graview-accent) 24%, transparent)",
+    color: "inherit",
+    borderRadius: 2,
+    padding: 0,
+    boxShadow: "0 1px 0 color-mix(in srgb, var(--graview-accent) 70%, transparent)",
+};
+const ACT = {
+    display: "flex",
+    alignItems: "center",
+    minHeight: 32,
+    padding: "4px 10px",
+    boxSizing: "border-box",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: "var(--graview-edge)",
+    borderRadius: 6,
+    background: "var(--graview-panel)",
+    color: "var(--graview-ink)",
+    fontSize: "0.8125rem",
+    lineHeight: 1.3,
+    cursor: "pointer",
+    overflowWrap: "anywhere",
+};
+const ACT_UNDER = { ...ACT, minHeight: 32, margin: "0 12px 4px 24px" };
+const ACT_LIT = { borderColor: "var(--graview-accent)", boxShadow: "inset 0 0 0 1px var(--graview-accent)", background: "color-mix(in srgb, var(--graview-accent) 12%, var(--graview-panel))" };
+const UNDER = { display: "grid", padding: "2px 0 6px" };
+/** A narrow strip's "⋯": its acts, asked for. Over the row's end, in room the row keeps for it, so the row's words never run under it. */
+const MORE = {
+    position: "absolute",
+    top: "50%",
+    right: 6,
+    transform: "translateY(-50%)",
+    width: 36,
+    height: 32,
+    display: "grid",
+    placeItems: "center",
+    borderRadius: 6,
+    color: "var(--graview-ink-muted)",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: "transparent",
+};
+const MORE_OPEN = { color: "var(--graview-accent)", borderColor: "var(--graview-edge)", background: "var(--graview-panel)" };
+const NOTE = { margin: 0, padding: "6px 12px 4px", color: "var(--graview-ink-faint)", fontSize: "0.75rem" };
+const FOOT = {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "4px 14px",
+    padding: "7px 12px",
+    borderTop: "1px solid var(--graview-edge)",
+    color: "var(--graview-ink-faint)",
+    fontSize: "0.75rem",
+    flex: "0 0 auto",
+};
+const KBD = {
+    display: "inline-block",
+    minWidth: 16,
+    padding: "0 4px",
+    marginRight: 3,
+    border: "1px solid var(--graview-edge)",
+    borderRadius: 4,
+    font: "inherit",
+    fontSize: "0.6875rem",
+    lineHeight: "16px",
+    textAlign: "center",
+    color: "var(--graview-ink-muted)",
+    background: "var(--graview-panel)",
+};
 //# sourceMappingURL=find.js.map