@graview/primitives 0.1.65 → 0.1.67

package/dist/app-bar.js

@@ -2,12 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { allLabel, arrangedEntries, hueFor, isInlineSvg, kindPath, MOST_STANDING, offeredPlaces, onePerPicture, OVERVIEW_SLUG, placeLabel, placePath, pluralLabel, primaryOf, samePicture, sharesItsName, supportingKinds } from "@graview/core";
 import { POPOVER_STYLE, useGraviewIfAny, usePopover } from "@graview/react/provider";
 import { useQuickAskDrawn } from "./quick-ask-desk.js";
-import { createContext, Suspense, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createContext, Suspense, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { AppMark } from "./app-title.js";
 import { useMarkup } from "./markup.js";
 import { barPanes } from "./bar-panes-door.js";
 /* The places' foot, Hidden and Recently deleted (Roadmap f-place-menu-views): fetched with the panes, and the tidying with it, once there is something to list and the list is open. */
 const TidyFoot = barPanes.part((panes, props) => _jsx(panes.TidyFoot, { ...props }), { quiet: true });
+/* The app menu's rows (Roadmap f-app-bar-calm): fetched with the panes when it is first reached for. */
+const AppMenuRows = barPanes.part((panes, props) => _jsx(panes.AppMenuPane, { ...props }), { what: "The app menu" });
 /* Who else is here (FR-155): drawn once somebody is, so a reader alone never fetches it. */
 const Here = barPanes.part((panes, props) => _jsx(panes.Here, { ...props }), { quiet: true });
 /**
@@ -134,8 +136,10 @@ export const useBarFind = () => useContext(BarFindContext);
 export const TOOL = 30;
 /** The bar's one row, its rule under it included, on a desk and a phone alike (FR-138). */
 export const BAR_HEIGHT = 48;
-/** Below this width of its own the bar is a phone's: the place is the page's first line, and Find a magnifier that opens the box over the row. */
+/** Below this width of its own the bar is a phone's: the place is the page's first line. */
 export const BAR_PHONE = 640;
+/** Below this width of its own Find is the magnifier, which opens the box over the row (Roadmap f-app-bar-calm): sooner than a phone's. */
+export const BAR_FIND_FOLDS = 900;
 /** The room between two places standing on the row (FR-145). */
 export const PLACE_GAP = 4;
 /** The fewest places that stand on the row: fewer, and the one control says the same in less room. */
@@ -180,17 +184,15 @@ export function placesThatStand(input) {
  * short, Find gives first (a small box that says its shortcut, drawn wide
  * while it is used), then the place down to 9em of its name (whole in its
  * title), then the app's name, which wraps between its words onto a second
- * line and never inside one; the switch keeps its size, and draws its marks
- * alone when its words do not fit (`roomForWords`). Whether the places stand
- * and the words fit is weighed with the name as it would stand on one line
+ * line and never inside one; the app menu's chevron keeps its size. Whether
+ * the places stand is weighed with the name as it would stand on one line
  * (`nameGiven`), never as it is drawn now: the name drawn on two lines because
  * the places stood would fold them, and the name back on one would stand
  * them again, frame after frame.
  *
  * Where the places stand on the row (FR-145), Find gives first — down to
  * its least — then the places fold into "More", then into the one control,
- * which gives as above. The places are weighed with the switch's words
- * kept: the words are worth more than a third place on the row.
+ * which gives as above.
  *
  * The order is the shrink factors: Find 600, the place 100, the app 1. A
  * factor under 1 would not do — the free space is scaled by the factors
@@ -204,23 +206,34 @@ export function placesThatStand(input) {
 const BAR_CSS = `
 .graview-bar{display:block;margin:0;padding:0;container:graview-bar/inline-size;flex:0 0 auto;position:relative;background:var(--graview-bar);border-bottom:1px solid var(--graview-edge);color:var(--graview-ink);font-family:var(--graview-font-body,system-ui)}
 .graview-bar-row{display:flex;flex-wrap:nowrap;align-items:center;gap:16px;height:${BAR_HEIGHT - 1}px;margin:0;padding:0 16px}
-.graview-bar-home,.graview-bar-face,.graview-bar-place,.graview-bar-item,.graview-bar-at{display:inline-flex;align-items:center;box-sizing:border-box;min-width:0;margin:0;border:0;background:none;box-shadow:none;font:inherit;letter-spacing:normal;text-transform:none;text-decoration:none;color:var(--graview-ink);cursor:pointer;text-align:left}
-.graview-bar-app{display:flex;flex:0 1 auto;max-width:50%}
+.graview-bar-home,.graview-bar-place,.graview-bar-item,.graview-bar-at{display:inline-flex;align-items:center;box-sizing:border-box;min-width:0;margin:0;border:0;background:none;box-shadow:none;font:inherit;letter-spacing:normal;text-transform:none;text-decoration:none;color:var(--graview-ink);cursor:pointer;text-align:left}
+.graview-bar-app{display:flex;align-items:center;gap:2px;flex:0 1 auto;max-width:50%}
 .graview-bar-app::after{content:"";flex:0 100000 auto;width:2px;min-width:0}
 .graview-bar-name{margin:0;display:flex;font-family:var(--graview-font-display,var(--graview-font-body,system-ui));font-size:.9375rem;font-weight:600;line-height:1.25}
 .graview-bar-home{gap:8px;min-width:auto;min-height:30px;padding:0;letter-spacing:-.005em}
 .graview-bar-app-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;word-break:normal}
-.graview-bar-faces{display:inline-flex;flex:0 0 auto;box-sizing:border-box;height:30px;margin:0;padding:2px;gap:2px;border:1px solid var(--graview-edge);border-radius:8px}
-.graview-bar-face{gap:6px;padding:0 10px;border-radius:6px;font-size:.8125rem;white-space:nowrap;color:var(--graview-ink-muted)}
-.graview-bar-face span{min-width:0;max-width:11em;overflow:hidden;text-overflow:ellipsis}
-.graview-bar-face[aria-pressed=true]{color:var(--graview-ink);font-weight:600;background:color-mix(in srgb,var(--graview-accent) 16%,transparent)}
-[data-switch-drawn=icons] .graview-bar-face{padding:0 8px}
-.graview-bar-said,[data-switch-drawn=icons] .graview-bar-face span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
+.graview-bar-said{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
+.graview-bar-menu-open{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;width:24px;height:30px;margin:0;padding:0;border:1px solid transparent;border-radius:6px;background:none;box-shadow:none;color:var(--graview-ink-muted);cursor:pointer}
+.graview-bar-menu-open:is(:hover,[aria-expanded=true]){border-color:var(--graview-edge);color:var(--graview-ink)}
+.graview-bar-tool{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;box-sizing:border-box;min-width:${TOOL}px;height:${TOOL}px;margin:0;padding:0;border-radius:8px;border:1px solid transparent;background:none;box-shadow:none;font:inherit;font-size:.875rem;font-weight:500;letter-spacing:normal;text-transform:none;white-space:nowrap;color:var(--graview-ink-muted);cursor:pointer;text-decoration:none}
+.graview-bar-tool:is(:hover,[aria-expanded=true]){border-color:var(--graview-edge);color:var(--graview-ink)}
+.graview-bar-tool[data-running]{color:var(--graview-accent)}
+.graview-bar-badge{position:absolute;top:-3px;right:-5px;box-sizing:border-box;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--graview-accent);color:var(--graview-accent-ink);font-size:.625rem;font-weight:700;line-height:16px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--graview-bar);pointer-events:none}
+.graview-bar-badge[data-dot]{min-width:8px;width:8px;height:8px;padding:0;top:2px;right:2px}
+.graview-bar-badge[data-tone=warn]{background:var(--graview-warn)}
+.graview-bar-share{gap:6px;padding:0 10px}
+.graview-bar-share-pane{display:grid;gap:10px;width:min(300px,calc(100vw - 24px));padding:14px;border-radius:10px;border:1px solid var(--graview-edge);background:var(--graview-float);box-shadow:var(--graview-lift-high);color:var(--graview-ink);font-size:.875rem;line-height:1.45}
+.graview-bar-share-pane[hidden]{display:none}
+.graview-bar-share-pane p{margin:0}
+.graview-bar-share-links{display:flex;flex-wrap:wrap;gap:4px 16px}
+.graview-bar-share-pane a,.graview-bar-share-pane button{justify-self:start;display:inline-flex;align-items:center;min-height:28px;padding:0;border:0;background:none;box-shadow:none;font:inherit;font-weight:600;color:var(--graview-accent);text-decoration:none;cursor:pointer}
+.graview-bar-status{gap:6px;padding:0 8px;cursor:default;font-weight:400}
+a.graview-bar-status{cursor:pointer}
 .graview-bar-mid{display:flex;flex:1 100 0;min-width:0}
 .graview-bar-mid[data-place]{min-width:9em;flex-basis:auto}
 .graview-bar-place-at{position:relative;display:inline-flex;min-width:0;max-width:100%}
 .graview-bar-place{gap:6px;height:30px;max-width:100%;padding:0 8px;border:1px solid transparent;border-radius:8px;font-size:.875rem;font-weight:600}
-.graview-bar-face:hover,.graview-bar-place:hover{border-color:var(--graview-edge);color:var(--graview-ink)}
+.graview-bar-place:hover{border-color:var(--graview-edge);color:var(--graview-ink)}
 .graview-bar-place-words{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .graview-bar-mid[data-places=standing]{flex:0 0 auto}
 .graview-bar-places{display:flex;align-items:center;gap:${PLACE_GAP}px;min-width:0;margin:0;padding:0}
@@ -247,10 +260,11 @@ const BAR_CSS = `
 .graview-bar-host{display:flex;align-items:center;gap:2px;flex:0 0 auto}
 .graview-bar-host-action{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;min-width:${TOOL}px;height:${TOOL}px;margin:0;padding:0 10px;border-radius:8px;border:1px solid transparent;background:none;box-shadow:none;font:inherit;font-size:.875rem;font-weight:500;letter-spacing:normal;text-transform:none;white-space:nowrap;color:var(--graview-ink-muted);cursor:pointer}
 .graview-bar-host-action:is(:hover,[aria-expanded=true]){border-color:var(--graview-edge);color:var(--graview-ink)}
-.graview-bar-host-action[data-folded]{padding:0}
+.graview-bar-host-action:is([data-folded],[data-icon-only]){padding:0;justify-content:center}
 .graview-bar-host-mark{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;font-size:.9375rem;line-height:1}
 .graview-bar-host-mark svg{width:16px;height:16px}
 .graview-bar-list .graview-bar-host-action{width:100%;justify-content:flex-start;white-space:normal;overflow-wrap:anywhere}
+.graview-bar-host-action[data-icon-only]>.graview-bar-host-words{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .graview-bar-find{position:relative;display:flex;min-width:7.5rem;flex:0 600 9rem;--graview-bar-find-end:3.25em}
 .graview-bar-find-slot{display:flex;flex:1;min-width:0}
 .graview-bar-find-keys{position:absolute;right:10px;line-height:30px;pointer-events:none;font-size:.75rem;color:var(--graview-ink-faint)}
@@ -260,16 +274,23 @@ const BAR_CSS = `
 .graview-bar-line .graview-bar-place{height:auto;min-height:32px}
 .graview-bar-line .graview-bar-place-words{white-space:normal}
 @media (pointer:coarse){.graview-bar-find-keys{display:none}}
+@container graview-bar (max-width: ${BAR_FIND_FOLDS - 1}px){
+.graview-bar-find{display:none}
+.graview-bar-find-open{display:inline-flex}
+.graview-bar-tools>.graview-bar-find-open{margin-left:auto}
+.graview-bar[data-finding] :is(.graview-bar-app,.graview-bar-mid,.graview-bar-find-open){display:none}
+.graview-bar[data-finding] .graview-bar-find{display:flex;flex:1 1 auto;min-width:0;margin-left:0}
+}
 @container graview-bar (max-width: ${BAR_PHONE - 1}px){
 .graview-bar-row{gap:10px;padding:0 12px}
-.graview-bar-app,.graview-bar-home{max-width:none;flex:1 1 auto;min-width:28px}
+.graview-bar-app{max-width:none;flex:1 1 auto;min-width:28px}
+.graview-bar-home{min-width:28px}
 .graview-bar-name,.graview-bar-app-name{min-width:0}
-.graview-bar-mid,.graview-bar-find{display:none}
-.graview-bar-find-open{display:inline-flex}
-.graview-bar-own{--graview-activity-mark:inline}
-.graview-bar-own .graview-activity-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
-.graview-bar[data-finding] :is(.graview-bar-app,.graview-bar-faces,.graview-bar-find-open){display:none}
-.graview-bar[data-finding] .graview-bar-find{display:flex;flex:1 1 auto;min-width:0}
+.graview-bar-mid{display:none}
+.graview-bar-share{padding:0}
+.graview-bar-share>.graview-bar-share-words{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+.graview-bar-status[data-icon]{padding:0}
+.graview-bar-status[data-icon]>.graview-bar-status-words{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 }
 @container graview-bar (max-width: 300px){
 .graview-bar-row{gap:4px;padding:0 10px}
@@ -295,22 +316,23 @@ export const toolStyle = {
 };
 /**
  * THE BAR. The app at the left — its mark, its name as the page's heading,
- * the way home — then the switch between the scene and the pages (FR-137),
- * then, on Pages, the place you are on (FR-138), and the tools at the
- * right: the Find a face puts in it, then `tools` (the standing and the
- * person). One row of one height on a desk and a phone; on a phone the
+ * the way home — and the app menu beside it, which holds the scene and the
+ * pages (FR-137, Roadmap f-app-bar-calm), then, on Pages, the place you are
+ * on (FR-138), and the tools at the right: the Find a face puts in it, the
+ * inbox, a host's buttons, the people and a host's Share, then `tools` (the
+ * standing and the person). One row of one height on a desk and a phone; on a phone the
  * place is the page's first line, under the bar.
  */
-export function AppBar({ brand, name, heading = 1, home, faces, places, current, reach, tools, find = true, description, findBox, onFind, switch: switchForm = "words", scenePlaces, skips, named = true, actions, }) {
+export function AppBar({ brand, name, heading = 1, home, faces, places, current, reach, tools, find = true, description, findBox, onFind, scenePlaces, skips, named = true, actions, appMenu = NO_ROWS, scheme, share, status, }) {
     const bar = useRef(null);
     // Anybody else here, by the provider's presence (FR-155); none where no provider is.
     const company = useGraviewIfAny()?.who.size;
     const [slot, setSlot] = useState(null);
     const [own, setOwn] = useState(null);
     const [compact, setCompact] = useState(false);
+    // Whether Find is the magnifier (below `BAR_FIND_FOLDS`), which opens the box over the row.
+    const [folded, setFolded] = useState(false);
     const [finding, setFinding] = useState(false);
-    // Whether the switch's words fit beside everything else the row holds (`roomForWords`).
-    const [roomy, setRoomy] = useState(true);
     // Which places stand on the row, by their place in the list ("0,1,2"); null, the one control (FR-145).
     const [standing, setStanding] = useState(null);
     // Whether the host's buttons stand on the row (FR-227): where the bar has their width over a phone's; folded where it does not.
@@ -327,21 +349,16 @@ export function AppBar({ brand, name, heading = 1, home, faces, places, current,
     const shown = from && { ...from, places: offeredPlaces(from.places), here: from.places.find((place) => place.key === from.current)?.label };
     const list = shown && shown.places.length > 0 ? shown : null;
     const currentAt = list ? list.places.findIndex((place) => place.key === list.current) : -1;
-    const wordsAsked = Boolean(faces) && switchForm === "words";
     // Which places may stand, as one word for the weighing to depend on ("110010…").
     const ranks = list ? list.places.map((place) => (place.primary === false ? "0" : "1")).join("") : "";
     const weigh = useCallback(() => {
         const element = bar.current;
         if (!element)
             return;
-        const stand = standsIn(element, currentAt, wordsAsked, ranks);
+        const stand = standsIn(element, currentAt, ranks);
         if (stand !== undefined)
             setStanding(stand);
-        // Standing places were weighed with the switch's words kept.
-        const room = stand ? true : roomForWords(element);
-        if (room !== null)
-            setRoomy(room);
-    }, [currentAt, wordsAsked, ranks]);
+    }, [currentAt, ranks]);
     useLayoutEffect(() => {
         const element = bar.current;
         if (!element)
@@ -349,8 +366,10 @@ export function AppBar({ brand, name, heading = 1, home, faces, places, current,
         const read = () => {
             const width = element.getBoundingClientRect().width;
             setCompact(width < BAR_PHONE);
+            setFolded(width < BAR_FIND_FOLDS);
             // The host's buttons as they would stand, off their ruler: they stand where the bar has their width over a phone's.
             const host = element.querySelector("[data-graview-bar-host-ruler]");
+            // Two of the bar's tools drawn as marks alone stand at every width, as the bar's own do.
             setHostStands(width >= BAR_PHONE + (host?.getBoundingClientRect().width ?? 0));
             // What hangs from the bar as wide as it (a phone's Find sheet) is told the bar's width, not the screen's.
             element.style.setProperty("--graview-bar-width", `${Math.round(width)}px`);
@@ -384,8 +403,8 @@ export function AppBar({ brand, name, heading = 1, home, faces, places, current,
     const told = useRef(onFind);
     told.current = onFind;
     useLayoutEffect(() => {
-        told.current?.(find && slot ? { slot, compact, own } : null);
-    }, [find, slot, compact, own]);
+        told.current?.(find && slot ? { slot, compact: folded, own } : null);
+    }, [find, slot, folded, own]);
     useLayoutEffect(() => () => told.current?.(null), []);
     const openFind = useCallback(() => {
         setFinding(true);
@@ -404,6 +423,50 @@ export function AppBar({ brand, name, heading = 1, home, faces, places, current,
         escaping.current = false;
         requestAnimationFrame(() => opener.current?.focus());
     }, []);
+    /*
+     * HEARD ON THE ELEMENT ITSELF, not through React: the face's box is a
+     * portal from the face drawn under the bar, so its keys and its blur
+     * bubble through the face's tree and never reach a handler written here.
+     * Put away when folded (`BAR_FIND_FOLDS`) as the keyboard leaves it with
+     * nothing typed, or by Escape once its words are gone.
+     */
+    const findAt = useRef(null);
+    useEffect(() => {
+        const at = findAt.current;
+        if (!at || !folded)
+            return;
+        const typed = () => Boolean(at.querySelector("input")?.value);
+        const left = (event) => {
+            const next = event.relatedTarget;
+            if (next instanceof Node && at.contains(next))
+                return;
+            if (!typed())
+                putAway();
+        };
+        const marked = (event) => {
+            if (event.key === "Escape")
+                escaping.current = true;
+        };
+        const escaped = (event) => {
+            if (event.key !== "Escape")
+                return;
+            // The scene's Find takes Escape for its words first; an empty box is put away. Weighed once the face's own handler (React's, at its root, after this one) has had the key.
+            queueMicrotask(() => {
+                if (!event.defaultPrevented || !typed())
+                    putAway();
+                else
+                    escaping.current = false;
+            });
+        };
+        at.addEventListener("focusout", left);
+        at.addEventListener("keydown", marked, true);
+        at.addEventListener("keydown", escaped);
+        return () => {
+            at.removeEventListener("focusout", left);
+            at.removeEventListener("keydown", marked, true);
+            at.removeEventListener("keydown", escaped);
+        };
+    }, [folded, putAway]);
     const Heading = heading === false ? "span" : `h${heading}`;
     const Home = (home.href !== undefined ? "a" : "button");
     const press = (go) => (event) => {
@@ -423,83 +486,94 @@ export function AppBar({ brand, name, heading = 1, home, faces, places, current,
     const placeControl = list ? _jsx(Places, { places: list.places, current: list.current, here: list.here, reach: list.reach, scene: scene, stands: stands }) : null;
     const said = list ? list.places.map((place) => place.label).join("\n") : "";
     // What the row holds changed — the name, the places, the face, the brand — so the places and the words may fit now, or no longer.
-    useLayoutEffect(weigh, [weigh, name, brand, said, list?.current, onPages, compact, switchForm, find]);
-    // The marks alone on a phone's bar, when asked, or when the words do not fit.
-    const drawn = switchForm === "icons" || !roomy || compact ? "icons" : "words";
-    return (_jsxs(_Fragment, { children: [_jsxs("header", { ref: bar, className: "graview-bar", "data-testid": "app-bar", "data-graview-app-bar": "", ...(finding && compact ? { "data-finding": "" } : {}), children: [_jsx("style", { children: BAR_CSS }), skips, _jsxs("div", { className: "graview-bar-row", children: [named ? _jsx("div", { className: "graview-bar-app", children: _jsx(Heading, { className: "graview-bar-name", children: _jsxs(Home, { ...(home.href !== undefined ? { href: home.href, onClick: press(home.go) } : { type: "button", onClick: home.go }), "data-testid": "app-home", ...(home.current ? { "aria-current": "page" } : {}), title: description ? `${name} — ${description}` : `${name} — home`, className: "graview-bar-home", children: [_jsx(AppMark, { brand: brand, size: 20 }), _jsx("span", { className: "graview-bar-app-name", "data-testid": "app-name", children: name })] }) }) }) : null, faces ? _jsx(FaceSwitch, { faces: faces, form: switchForm, drawn: drawn }) : null, _jsx("div", { className: "graview-bar-mid", ...(stands ? { "data-places": "standing" } : !compact && placeControl ? { "data-place": "" } : {}), children: compact ? null : placeControl }), !compact && list && list.places.length > 1 ? (_jsxs("span", { className: "graview-bar-ruler", "aria-hidden": "true", "data-graview-bar-ruler": "", children: [list.places.map((place) => (_jsx("span", { className: "graview-bar-at", children: place.label }, place.key))), _jsxs("span", { className: "graview-bar-at", children: [MORE, _jsx(Chevron, {})] })] })) : null, actions && actions.length > 0 ? (_jsx("span", { className: "graview-bar-ruler", "aria-hidden": "true", "data-graview-bar-host-ruler": "", children: _jsx("span", { className: "graview-bar-host", children: actions.map((action) => (_jsxs("span", { className: "graview-bar-host-action", children: [action.icon ? _jsx(HostMark, { icon: action.icon }) : null, _jsx("span", { children: action.label })] }, action.label))) }) })) : null, named ? (_jsx("span", { className: "graview-bar-ruler", "aria-hidden": "true", children: _jsx("span", { className: "graview-bar-name", children: name }) })) : null, _jsxs("div", { className: "graview-bar-tools", children: [find ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "graview-bar-find-open", ref: opener, "data-testid": "app-find-open", "aria-label": "Find", title: "Find", onClick: openFind, style: { ...toolStyle, display: undefined }, children: _jsx(FindMark, {}) }), _jsxs("div", { className: "graview-bar-find", "data-testid": "app-find", onBlur: (event) => {
-                                                    // Put away on a phone when the keyboard leaves it with nothing typed.
-                                                    const next = event.relatedTarget;
-                                                    if (next instanceof Node && event.currentTarget.contains(next))
-                                                        return;
-                                                    if (!event.currentTarget.querySelector("input")?.value)
-                                                        putAway();
-                                                }, onKeyDownCapture: (event) => {
-                                                    if (event.key === "Escape" && compact)
-                                                        escaping.current = true;
-                                                }, onKeyDown: (event) => {
-                                                    if (event.key !== "Escape" || !compact)
-                                                        return;
-                                                    // The scene's Find takes Escape for its words first; an empty box is put away.
-                                                    if (!event.defaultPrevented || !event.currentTarget.querySelector("input")?.value)
-                                                        putAway();
-                                                    else
-                                                        escaping.current = false;
-                                                }, children: [_jsx("div", { ref: setSlot, className: "graview-bar-find-slot", children: findBox }), _jsx(FindKeys, {})] })] })) : null, _jsx("div", { ref: setOwn, className: "graview-bar-own", "data-graview-bar-own": "" }), company ? (_jsx(Suspense, { fallback: null, children: _jsx(Here, { scene: !onPages, compact: compact }) })) : null, _jsx(TheirChanges, {}), actions && actions.length > 0 ? _jsx(HostButtons, { actions: actions, folded: compact || !hostStands }) : null, tools] })] })] }), compact && placeControl ? (_jsx("div", { className: "graview-bar-line", "data-graview-place-line": "", "data-testid": "app-place-line", children: placeControl })) : null] }));
+    useLayoutEffect(weigh, [weigh, name, brand, said, list?.current, onPages, compact, folded, find]);
+    // The app menu: the scene and the pages, the host's rows, the scheme — drawn where it holds anything.
+    const menuHolds = Boolean(faces) || appMenu.length > 0 || Boolean(scheme);
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { ref: bar, className: "graview-bar", "data-testid": "app-bar", "data-graview-app-bar": "", ...(finding && folded ? { "data-finding": "" } : {}), children: [_jsx("style", { children: BAR_CSS }), skips, _jsxs("div", { className: "graview-bar-row", children: [named ? _jsxs("div", { className: "graview-bar-app", children: [_jsx(Heading, { className: "graview-bar-name", children: _jsxs(Home, { ...(home.href !== undefined ? { href: home.href, onClick: press(home.go) } : { type: "button", onClick: home.go }), "data-testid": "app-home", ...(home.current ? { "aria-current": "page" } : {}), title: description ? `${name} — ${description}` : `${name} — home`, className: "graview-bar-home", children: [_jsx(AppMark, { brand: brand, size: 20 }), _jsx("span", { className: "graview-bar-app-name", "data-testid": "app-name", children: name })] }) }), menuHolds ? _jsx(AppMenu, { name: name, faces: faces, rows: appMenu, scheme: scheme }) : null] }) : menuHolds ? _jsx(AppMenu, { name: name, faces: faces, rows: appMenu, scheme: scheme }) : null, _jsx("div", { className: "graview-bar-mid", ...(stands ? { "data-places": "standing" } : !compact && placeControl ? { "data-place": "" } : {}), children: compact ? null : placeControl }), !compact && list && list.places.length > 1 ? (_jsxs("span", { className: "graview-bar-ruler", "aria-hidden": "true", "data-graview-bar-ruler": "", children: [list.places.map((place) => (_jsx("span", { className: "graview-bar-at", children: place.label }, place.key))), _jsxs("span", { className: "graview-bar-at", children: [MORE, _jsx(Chevron, {})] })] })) : null, actions && actions.length > 0 ? (_jsx("span", { className: "graview-bar-ruler", "aria-hidden": "true", "data-graview-bar-host-ruler": "", children: _jsx("span", { className: "graview-bar-host", children: actions.map((action) => (_jsxs("span", { className: "graview-bar-host-action", ...(action.iconOnly && action.icon ? { "data-icon-only": "" } : {}), children: [action.icon ? _jsx(HostMark, { icon: action.icon }) : null, _jsx("span", { className: "graview-bar-host-words", children: action.label })] }, action.label))) }) })) : null, named ? (_jsx("span", { className: "graview-bar-ruler", "aria-hidden": "true", children: _jsx("span", { className: "graview-bar-name", children: name }) })) : null, _jsxs("div", { className: "graview-bar-tools", children: [find ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "graview-bar-find-open", ref: opener, "data-testid": "app-find-open", "aria-label": "Find", title: "Find", onClick: openFind, style: { ...toolStyle, display: undefined }, children: _jsx(FindMark, {}) }), _jsxs("div", { ref: findAt, className: "graview-bar-find", "data-testid": "app-find", children: [_jsx("div", { ref: setSlot, className: "graview-bar-find-slot", children: findBox }), _jsx(FindKeys, {})] })] })) : null, _jsx("div", { ref: setOwn, className: "graview-bar-own", "data-graview-bar-own": "" }), actions && actions.length > 0 ? _jsx(HostButtons, { actions: actions, folded: !(actions.length <= 2 && actions.every((action) => action.iconOnly && action.icon)) && (compact || !hostStands) }) : null, status ? _jsx(StatusItem, { status: status }) : null, company ? (_jsx(Suspense, { fallback: null, children: _jsx(Here, { scene: !onPages, compact: compact }) })) : null, share ? _jsx(ShareSlot, { share: share }) : null, _jsx(TheirChanges, {}), tools] })] })] }), compact && placeControl ? (_jsx("div", { className: "graview-bar-line", "data-graview-place-line": "", "data-testid": "app-place-line", children: placeControl })) : null] }));
 }
+const NO_ROWS = [];
 /**
- * THE SWITCH (FR-137): the scene and the pages, side by side, an icon and a
- * word each — the words the accessible names alone on a phone — the one
- * drawn pressed. Choosing the scene draws it under the bar; choosing the
- * pages goes back to the page you were on.
+ * THE APP MENU'S CONTROL (Roadmap f-app-bar-calm): a chevron beside the
+ * app's name — the name stays the way home, the page's heading — that opens
+ * the menu: the scene and the pages, a host's rows, the scheme. Its rows
+ * are fetched with the bar's panes when a hand first reaches for it.
  */
-function FaceSwitch({ faces, form, drawn }) {
-    const face = (which) => {
-        const one = faces[which];
-        return (_jsxs("button", { type: "button", className: "graview-bar-face", "data-testid": `app-face-${which}`, "aria-pressed": one.current, title: one.label, ...(one.reach && !one.current ? { onPointerEnter: one.reach, onPointerDown: one.reach, onFocus: one.reach } : {}), onClick: () => {
-                if (!one.current)
-                    one.go();
-            }, children: [which === "scene" ? _jsx(SceneMark, {}) : _jsx(PagesMark, {}), _jsx("span", { children: one.label })] }));
-    };
-    return (_jsxs("div", { className: "graview-bar-faces", role: "group", "aria-label": `${faces.scene.label} or ${faces.pages.label}`, "data-testid": "app-faces", "data-switch": form, "data-switch-drawn": drawn, children: [face("scene"), face("pages")] }));
+/**
+ * GOING TO THE OTHER FACE WITHOUT A BUTTON ON THE ROW (Roadmap
+ * f-app-bar-calm, f-make-any-page-better). The scene and the pages are rows
+ * of the app menu, drawn only while it is open, so a part that must switch
+ * faces — Better UI asked in the scene, opened on its page — cannot press
+ * them. It dispatches this on the app menu's control
+ * (`[data-testid="app-menu-open"]`, which says `data-pages` where the bar
+ * holds both faces), with the face as its detail, and the bar goes there as
+ * the menu's row would.
+ */
+export const FACE_EVENT = "graview:go-to-face";
+function AppMenu({ name, faces, rows, scheme }) {
+    const popover = usePopover("app-menu", { align: "start" });
+    const reach = () => barPanes.prefetch();
+    /* A part asked to go to the other face (`FACE_EVENT`): gone to as the menu's row would, without opening the menu. */
+    const opener = useRef(null);
+    const held = useRef(faces);
+    held.current = faces;
+    useEffect(() => {
+        const element = opener.current;
+        if (!element)
+            return;
+        const go = (event) => {
+            const one = held.current?.[event.detail];
+            if (!one || one.current)
+                return;
+            one.reach?.();
+            one.go();
+        };
+        element.addEventListener(FACE_EVENT, go);
+        return () => element.removeEventListener(FACE_EVENT, go);
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "graview-bar-menu-open", "data-testid": "app-menu-open", ...popover.trigger, ref: (element) => {
+                    popover.trigger.ref(element);
+                    opener.current = element;
+                }, onClick: popover.toggle, onPointerEnter: reach, onFocus: reach, "aria-label": `${name} — app menu`, title: "App menu", ...(faces ? { "data-scene": faces.scene.label, "data-pages": faces.pages.label } : {}), children: _jsx(Chevron, {}) }), _jsx("div", { ...popover.pane, "data-testid": "app-menu", hidden: !popover.open, className: "graview-bar-list graview-app-menu", style: POPOVER_STYLE, "aria-label": `${name} — app menu`, role: "group", children: popover.open ? (_jsx(Suspense, { fallback: null, children: _jsx(AppMenuRows, { faces: faces, rows: rows, scheme: scheme, close: () => popover.setOpen(false) }) })) : null })] }));
+}
+/** Share's marks: a lock, a globe, two people. */
+function ShareMark({ mark = "lock" }) {
+    if (mark === "lock")
+        return (_jsxs(Mark, { size: 14, children: [_jsx("rect", { x: "2.75", y: "6.25", width: "8.5", height: "6", rx: "1.25", fill: "none", stroke: "currentColor", strokeWidth: "1.3" }), _jsx("path", { d: "M4.75 6.25 V4.5 a2.25 2.25 0 0 1 4.5 0 V6.25", fill: "none", stroke: "currentColor", strokeWidth: "1.3" })] }));
+    if (mark === "globe")
+        return (_jsxs(Mark, { size: 14, children: [_jsx("circle", { cx: "7", cy: "7", r: "5.25", fill: "none", stroke: "currentColor", strokeWidth: "1.3" }), _jsx("path", { d: "M1.75 7 H12.25 M7 1.75 C4.75 4.5 4.75 9.5 7 12.25 M7 1.75 C9.25 4.5 9.25 9.5 7 12.25", fill: "none", stroke: "currentColor", strokeWidth: "1.1" })] }));
+    if (mark === "people")
+        return (_jsxs(Mark, { size: 14, children: [_jsx("circle", { cx: "5", cy: "5", r: "2", fill: "none", stroke: "currentColor", strokeWidth: "1.3" }), _jsx("path", { d: "M1.5 12 a3.5 3.5 0 0 1 7 0", fill: "none", stroke: "currentColor", strokeWidth: "1.3" }), _jsx("circle", { cx: "10", cy: "5.5", r: "1.6", fill: "none", stroke: "currentColor", strokeWidth: "1.2" }), _jsx("path", { d: "M9.5 9 a3 3 0 0 1 3.5 3", fill: "none", stroke: "currentColor", strokeWidth: "1.2" })] }));
+    return _jsx(HostMark, { icon: mark });
 }
 /**
- * WHETHER THE SWITCH'S WORDS FIT (the switch left to say its words where
- * there is room). The row is weighed as it is drawn: the room the middle
- * has past what the place wants (its words, up to 14em; none on the
- * scene), less what Find has given up and what the app's name has given
- * (`nameGiven`); none when the name is wider on one line than its room. The
- * words fit when that room holds them — the words
- * drawn already, or their width to come when the marks are drawn alone —
- * so the switch never flips back and forth at one width. Not weighed while
- * Find is in use (it is drawn wide then), on a phone's bar (the marks
- * alone), or where nothing is laid out (null).
+ * A HOST'S SHARE (Roadmap f-app-bar-calm, f-bar-status-item): its mark and
+ * its word, the sentence its description — on hover and to a screen reader —
+ * and, pressed, the sentence again with the link to where it changes. One
+ * of the bar's family of popovers.
  */
-function roomForWords(header) {
-    const faces = header.querySelector(".graview-bar-faces");
-    const mid = header.querySelector(".graview-bar-mid");
-    const find = header.querySelector(".graview-bar-find");
-    if (!faces || !mid || find?.matches(":focus-within"))
-        return null;
-    const row = header.getBoundingClientRect().width;
-    if (row < BAR_PHONE)
-        return null;
-    // The words to come, beside each mark: the word, the gap before it, and the button's wider padding.
-    const words = wordsOf(faces);
-    const place = mid.querySelector(".graview-bar-place-words");
-    const em = place ? parseFloat(getComputedStyle(place).fontSize) || 14 : 0;
-    // The place's words, its chevron, its gap, padding and frame: up to 14em of them.
-    const wanted = place ? Math.min(place.scrollWidth + 34, 14 * em) : 0;
-    const given = nameGiven(header);
-    // The app's name on two lines whatever stands beside it has given its room already: no room for the words.
-    if (given === null)
-        return false;
-    let spare = mid.getBoundingClientRect().width - wanted - given - overrun(header);
-    if (find && find.getBoundingClientRect().width > 0) {
-        const basis = parseFloat(getComputedStyle(find).flexBasis);
-        if (isFinite(basis))
-            spare -= Math.max(0, basis - find.getBoundingClientRect().width);
-    }
-    return faces.getAttribute("data-switch-drawn") === "icons" ? spare >= words + 2 : spare >= -1;
+function ShareSlot({ share }) {
+    const popover = usePopover("share");
+    const said = `graview-share-said-${useId().replace(/:/g, "")}`;
+    const label = share.label ?? "Share";
+    const link = share.link;
+    return (_jsxs("div", { className: "graview-bar-share-at", children: [_jsxs("button", { type: "button", className: "graview-bar-tool graview-bar-share", "data-testid": "app-share-open", ...popover.trigger, onClick: popover.toggle, "aria-describedby": said, title: share.description, children: [_jsx(ShareMark, { mark: share.mark }), _jsx("span", { className: "graview-bar-share-words", children: label })] }), _jsx("span", { id: said, className: "graview-bar-said", children: share.description }), _jsxs("div", { ...popover.pane, "data-testid": "app-share", hidden: !popover.open, className: "graview-bar-share-pane", style: POPOVER_STYLE, role: "group", "aria-label": label, children: [_jsx("p", { "data-testid": "app-share-said", children: share.description }), link || share.secondLink ? (_jsxs("div", { className: "graview-bar-share-links", children: [link ? _jsx(ShareLink, { link: link, testId: "app-share-link", close: () => popover.setOpen(false) }) : null, share.secondLink ? _jsx(ShareLink, { link: share.secondLink, testId: "app-share-second-link", close: () => popover.setOpen(false) }) : null] })) : null] })] }));
+}
+/** A host's status: its mark and its word, the sentence on hover and as its description; a link where it has an `href`. */
+function StatusItem({ status }) {
+    const said = `graview-status-said-${useId().replace(/:/g, "")}`;
+    const inner = (_jsxs(_Fragment, { children: [status.icon ? _jsx(ShareMark, { mark: status.icon }) : null, _jsx("span", { className: "graview-bar-status-words", children: status.label })] }));
+    const common = { className: "graview-bar-tool graview-bar-status", "data-testid": "app-status", title: status.description, "aria-describedby": said, ...(status.icon ? { "data-icon": "" } : {}) };
+    return (_jsxs(_Fragment, { children: [status.href !== undefined ? (_jsx("a", { ...common, href: status.href, ...(status.target ? { target: status.target, rel: "noopener" } : {}), children: inner })) : (_jsx("span", { ...common, tabIndex: 0, children: inner })), _jsx("span", { id: said, className: "graview-bar-said", children: status.description })] }));
+}
+/** One of Share's links: an anchor where it has an `href`, else a button; either closes the popover. */
+function ShareLink({ link, testId, close }) {
+    return link.href !== undefined ? (_jsx("a", { href: link.href, "data-testid": testId, ...(link.target ? { target: link.target, rel: "noopener" } : {}), onClick: () => {
+            link.onSelect?.();
+            close();
+        }, children: link.label })) : (_jsx("button", { type: "button", "data-testid": testId, onClick: () => {
+            close();
+            link.onSelect?.();
+        }, children: link.label }));
 }
 /**
  * HOW FAR THE ROW RUNS PAST ITS END, in pixels: what stands last on it — a
@@ -509,7 +583,7 @@ function roomForWords(header) {
  * Activity arriving after the places were weighed, an iPad's 1024 px with
  * five places standing), Find's end went past the row with them, the room
  * read as enough, and the person stood off the screen. What runs over is
- * room the places and the switch's words do not have.
+ * room the places do not have.
  */
 function overrun(header) {
     const row = header.querySelector(".graview-bar-row");
@@ -569,10 +643,6 @@ function Mark({ size, box = size, children }) {
 function SceneMark() {
     return (_jsxs(Mark, { size: 14, children: [_jsx("path", { d: "M7 1.5 L12.5 4.5 L7 7.5 L1.5 4.5 Z", fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinejoin: "round" }), _jsx("path", { d: "M1.5 7.5 L7 10.5 L12.5 7.5", fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinejoin: "round", strokeLinecap: "round" })] }));
 }
-/** The pages' mark: a page of lines. */
-function PagesMark() {
-    return (_jsxs(Mark, { size: 14, children: [_jsx("rect", { x: "2.25", y: "1.75", width: "9.5", height: "10.5", rx: "1.5", fill: "none", stroke: "currentColor", strokeWidth: "1.3" }), _jsx("path", { d: "M4.5 5 H9.5 M4.5 7.25 H9.5 M4.5 9.5 H7.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" })] }));
-}
 /** The way a menu opens: a chevron drawn, not a glyph a face may draw as a dot. */
 function Chevron() {
     return (_jsx(Mark, { size: 10, children: _jsx("path", { d: "M2 3.5 L5 6.5 L8 3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" }) }));
@@ -612,10 +682,10 @@ const MORE = "More";
 function HostButtons({ actions, folded }) {
     const popover = usePopover("host-actions", { popover: folded });
     const names = actions.map((action) => action.label).join(", ");
-    const buttons = (done) => actions.map((action) => (_jsxs("button", { type: "button", className: folded ? "graview-bar-host-action graview-bar-item" : "graview-bar-host-action", "data-testid": "host-bar-action", onClick: () => {
+    const buttons = (done) => actions.map((action) => (_jsxs("button", { type: "button", className: folded ? "graview-bar-host-action graview-bar-item" : "graview-bar-host-action", "data-testid": "host-bar-action", ...(!folded && action.iconOnly && action.icon ? { "data-icon-only": "", title: action.label } : {}), onClick: () => {
             done();
             action.onSelect();
-        }, children: [action.icon ? _jsx(HostMark, { icon: action.icon }) : null, _jsx("span", { children: action.label })] }, action.label)));
+        }, children: [action.icon ? _jsx(HostMark, { icon: action.icon }) : null, _jsx("span", { className: "graview-bar-host-words", children: action.label })] }, action.label)));
     if (!folded) {
         return (_jsx("div", { className: "graview-bar-host", "data-testid": "host-bar-actions-standing", role: "group", "aria-label": "From the host", children: buttons(() => undefined) }));
     }
@@ -737,8 +807,7 @@ function usePlaceGestures(places, current, scene) {
  * WHICH PLACES STAND ON THE ROW, WEIGHED FROM THE ROW AS DRAWN (FR-145):
  * the places' widths read off the ruler (each at its weight as the place
  * you are on, so marking one never moves the others), and the room from
- * where the places begin to where Find ends, less Find at its least, less
- * the switch's words when they are asked for. The same answer whichever way
+ * where the places begin to where Find ends, less Find at its least. The same answer whichever way
  * the places are drawn, so the row never flips between the two at one
  * width. The places begin where they would with the app's name on one
  * line (`nameGiven`), so they stand only where they leave it there, and the
@@ -747,7 +816,7 @@ function usePlaceGestures(places, current, scene) {
  * name is wider on one line than its room, or where nothing is laid out
  * (null).
  */
-function standsIn(header, current, wordsAsked, ranks) {
+function standsIn(header, current, ranks) {
     const ruler = header.querySelector("[data-graview-bar-ruler]");
     const mid = header.querySelector(".graview-bar-mid");
     if (!ruler || !mid)
@@ -762,11 +831,8 @@ function standsIn(header, current, wordsAsked, ranks) {
         return null;
     const widths = [...ruler.children].map((one) => one.getBoundingClientRect().width);
     const more = widths.pop() ?? 0;
-    const faces = header.querySelector(".graview-bar-faces");
-    const words = faces && wordsAsked ? wordsOf(faces) : 0;
-    const drawnWords = faces?.getAttribute("data-switch-drawn") === "words" ? words : 0;
     const from = mid.getBoundingClientRect().left + given;
-    const end = find?.getBoundingClientRect();
+    const end = find && getComputedStyle(find).display !== "none" ? find.getBoundingClientRect() : undefined;
     /*
      * To Find's end, less Find at its least and the room between them — the
      * row's whole gap: Find stands at `margin-left:auto`, which is nothing
@@ -776,10 +842,6 @@ function standsIn(header, current, wordsAsked, ranks) {
      */
     const room = (end && end.width > 0 ? end.right - from - (parseFloat(getComputedStyle(find).minWidth) || 0) - 16 : mid.getBoundingClientRect().width - given) - overrun(header);
     const primary = [...ranks].map((rank) => rank !== "0");
-    return placesThatStand({ widths, current, room: Math.floor(room + drawnWords - words), more, primary })?.join(",") ?? null;
-}
-/** The switch's words, beside each mark: the word, the gap before it, and the button's wider padding. */
-function wordsOf(faces) {
-    return [...faces.querySelectorAll(".graview-bar-face span")].reduce((sum, span) => sum + span.scrollWidth + 10, 0);
+    return placesThatStand({ widths, current, room: Math.floor(room), more, primary })?.join(",") ?? null;
 }
 //# sourceMappingURL=app-bar.js.map