@graview/primitives 0.1.17 → 0.1.18

package/README.md

@@ -41,8 +41,11 @@ the schema, the invariants and the op log.
 **The app, said once** — `AppBar`: one bar over every face (FR-131) — the
 brand's mark (`AppMark`, drawn as given, never an SVG that could act) and
 the app's name as the page's heading, the switch between the scene and the
-pages (`faces`, FR-137), on Pages the place you are on as one control that
-opens every place (`barPlaces`: the home, the Lists, the Pictures, FR-138),
+pages (`faces`, FR-137), the place you are on as one control that
+opens every place (`barPlaces`: the home, the Lists, the Pictures, FR-138;
+on the scene `useScenePlaces`: the whole thing and each picture, FR-144),
+the places standing on the row where they fit, the rest under "More"
+(`placesThatStand`, FR-145),
 and three tools of one size: the Find a
 face puts in it (`useBarFind`), `Standing` and `Profile`. `AppTitle` draws
 the mark, the name and the line under it elsewhere; `useFavicon` is for a

package/dist/app-bar.d.ts

@@ -16,6 +16,8 @@ export interface BarPlace {
 export declare const HOME_KEY = "home";
 /** The home's address on the routed face: the app's own. */
 export declare const HOME_PATH = "/";
+/** The key of the scene's first place (FR-144): the whole thing, no picture in view. */
+export declare const WHOLE_KEY = "scene:whole";
 /**
  * THE APP'S PLACES, IN THE LIST'S ORDER (FR-138): the home; each kind's list
  * in the declaration's order; each named picture, then how the kinds
@@ -64,10 +66,37 @@ export interface BarFaces {
     readonly scene: BarFace;
     readonly pages: BarFace;
 }
+/** How the switch is drawn: its words beside its marks where there is room, or its marks alone (the words its names). */
+export type BarSwitch = "words" | "icons";
 /** One size for every tool on the bar (FR-131). */
 export declare const TOOL = 30;
 /** The bar's one row, its rule under it included, on a desk and a phone alike (FR-138). */
 export declare 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. */
+export declare const BAR_PHONE = 640;
+/** The room between two places standing on the row (FR-145). */
+export declare const PLACE_GAP = 4;
+/** The fewest places that stand on the row: fewer, and the one control says the same in less room. */
+export declare const FEWEST_STANDING = 2;
+/**
+ * WHICH PLACES STAND ON THE ROW (FR-145), from their widths and the room:
+ * every one when all fit; else the first ones in their order, the current
+ * one always among them (in its own place in the order, the last of the
+ * first ones giving way to it), with "More" after them; else none — null,
+ * the one control. Fewer than `FEWEST_STANDING` is none. A width that is
+ * not measured (nothing laid out) is none too.
+ */
+export declare function placesThatStand(input: {
+    /** Each place's width as it would stand, in the order of the list. */
+    readonly widths: readonly number[];
+    /** Where the current place is in the list; -1 for none. */
+    readonly current: number;
+    /** The room the row has for them. */
+    readonly room: number;
+    /** "More"'s width. */
+    readonly more: number;
+    readonly gap?: number;
+}): readonly number[] | null;
 /** A tool's own box: one size, square, its name in words for whoever cannot see the mark. */
 export declare const toolStyle: CSSProperties;
 /**
@@ -78,7 +107,7 @@ export declare const toolStyle: CSSProperties;
  * 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 declare function AppBar({ brand, name, heading, home, faces, places, current, reach, tools, find, description, findBox, onFind, }: {
+export declare function AppBar({ brand, name, heading, home, faces, places, current, reach, tools, find, description, findBox, onFind, switch: switchForm, scenePlaces, }: {
     readonly brand: Brand | undefined;
     readonly name: string;
     /** The level the app's name is said at: 1 when the page is the app's, `false` when the host's own heading already says it. */
@@ -105,5 +134,22 @@ export declare function AppBar({ brand, name, heading, home, faces, places, curr
     readonly findBox?: ReactNode;
     /** Told where the bar keeps the Find box, for the face under it (`BarFindContext`). */
     readonly onFind?: (find: BarFind | null) => void;
+    /**
+     * How the switch is drawn: `"words"` (the default) says "Scene" and
+     * "Pages" beside their marks where the bar has room and draws the marks
+     * alone where it is narrow; `"icons"` draws the marks alone at every
+     * width. Either way the words are the buttons' names and their titles.
+     */
+    readonly switch?: BarSwitch;
+    /**
+     * On the scene, what it can show (FR-144): the whole thing and each
+     * picture, the one in view, and the way to each (`useScenePlaces`). None,
+     * and the scene's bar names no place.
+     */
+    readonly scenePlaces?: {
+        readonly places: readonly BarPlace[];
+        readonly current: string | null;
+        readonly reach: BarGo;
+    } | undefined;
 }): import("react").JSX.Element;
 //# sourceMappingURL=app-bar.d.ts.map

package/dist/app-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-bar.d.ts","sourceRoot":"","sources":["../src/app-bar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"app-bar.d.ts","sourceRoot":"","sources":["../src/app-bar.tsx"],"names":[],"mappings":"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"}

package/dist/app-bar.js

@@ -7,6 +7,8 @@ import { AppMark } from "./app-title.js";
 export const HOME_KEY = "home";
 /** The home's address on the routed face: the app's own. */
 export const HOME_PATH = "/";
+/** The key of the scene's first place (FR-144): the whole thing, no picture in view. */
+export const WHOLE_KEY = "scene:whole";
 const upper = (word) => word.charAt(0).toUpperCase() + word.slice(1);
 /**
  * THE APP'S PLACES, IN THE LIST'S ORDER (FR-138): the home; each kind's list
@@ -57,23 +59,88 @@ 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. */
+export const BAR_PHONE = 640;
+/** 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. */
+export const FEWEST_STANDING = 2;
+/**
+ * WHICH PLACES STAND ON THE ROW (FR-145), from their widths and the room:
+ * every one when all fit; else the first ones in their order, the current
+ * one always among them (in its own place in the order, the last of the
+ * first ones giving way to it), with "More" after them; else none — null,
+ * the one control. Fewer than `FEWEST_STANDING` is none. A width that is
+ * not measured (nothing laid out) is none too.
+ */
+export function placesThatStand(input) {
+    const { widths, current, room, more, gap = PLACE_GAP } = input;
+    if (widths.length === 0 || !(room > 0) || !(more > 0) || widths.some((width) => !(width > 0)))
+        return null;
+    const span = (set, folded) => set.reduce((sum, at) => sum + widths[at], 0) + gap * Math.max(0, set.length - 1) + (folded ? gap + more : 0);
+    const all = widths.map((_, at) => at);
+    if (span(all, false) <= room)
+        return all;
+    for (let count = widths.length - 1; count >= FEWEST_STANDING; count--) {
+        const set = current < count ? all.slice(0, count) : [...all.slice(0, count - 1), current];
+        if (span(set, true) <= room)
+            return set;
+    }
+    return null;
+}
+/*
+ * THE BAR FITS ITS BOX. Every rule here reads the bar's own width (it is
+ * its own container), never the screen's: an embed in a 650 px box on a
+ * 1440 desk is a narrow bar, not a desk's bar squeezed. When the row is
+ * 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`).
+ *
+ * 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.
+ *
+ * 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
+ * left when the others have reached their least, so an app at 0.001 would
+ * give 0.1% of what is still needed and the row would run out of its box.
+ * At 1 the app gives a fraction of a pixel while the others still can,
+ * which would wrap its last word; its 2 px spacer (`::after`) takes that.
+ * The tools (`display:contents`) stand on the row themselves, so Find's
+ * box is what gives, not a column around it.
+ */
 const BAR_CSS = `
-.graview-bar{display:block;margin:0;padding:0;container-type: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{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{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;min-width:0;max-width:34%}
-.graview-bar-name{margin:0;min-width: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-height:30px;padding:0;letter-spacing:-.005em;overflow-wrap:anywhere}
+.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-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)}
-.graview-bar-mid{display:flex;flex:1 1 auto;min-width:0}
+[data-switch-drawn=icons] .graview-bar-face{padding:0 8px}
+[data-switch-drawn=icons] .graview-bar-face span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
+.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-words{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.graview-bar-list{display:grid;width:min(320px,calc(100vw - 24px));max-height:min(70vh,560px);overflow:auto;margin:0;padding:6px;border-radius:10px;border:1px solid var(--graview-edge);background:var(--graview-float);box-shadow:var(--graview-lift-high);color:var(--graview-ink)}
+.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}
+.graview-bar-at{gap:6px;flex:0 0 auto;height:30px;padding:0 8px;border-block:2px solid transparent;border-radius:0;font-size:.875rem;font-weight:500;white-space:nowrap;color:var(--graview-ink-muted)}
+.graview-bar-at:is(:hover,[aria-current],[aria-expanded=true]){color:var(--graview-ink)}
+.graview-bar-at[aria-current]{font-weight:600;border-bottom-color:var(--graview-accent)}
+.graview-bar-ruler{position:absolute;left:0;top:0;display:flex;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none}
+.graview-bar-ruler .graview-bar-at{font-weight:600}
+.graview-bar-list{display:grid;align-content:start;width:min(320px,calc(100vw - 24px));height:auto;max-height:min(70vh,560px);overflow:auto;margin:0;padding:6px;border-radius:10px;border:1px solid var(--graview-edge);background:var(--graview-float);box-shadow:var(--graview-lift-high);color:var(--graview-ink)}
 .graview-bar-list[hidden]{display:none}
 .graview-bar-list p{margin:8px 8px 2px;font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--graview-ink-muted)}
 .graview-bar-list ul,.graview-bar-list li{display:grid;margin:0;padding:0;list-style:none}
@@ -82,23 +149,25 @@ const BAR_CSS = `
 .graview-bar-item[aria-current]{font-weight:600;background:color-mix(in srgb,var(--graview-accent) 14%,transparent)}
 .graview-bar-mark{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:14px;height:1.3em;color:var(--graview-ink-muted)}
 .graview-bar :focus-visible{outline:2px solid var(--graview-accent);outline-offset:1px}
-.graview-bar-tools{display:flex;align-items:center;flex:0 0 auto;gap:8px;margin-left:auto}
-.graview-bar-find{display:flex;width:15rem;min-width:7rem;flex:0 1 auto}
-.graview-bar-find-open{display:none}
+.graview-bar-tools{display:contents}
+.graview-bar-tools>*{margin-left:-8px}
+.graview-bar-tools>:is(.graview-bar-find,.graview-bar-find-open){margin-left:auto}
+.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)}
+.graview-bar-find:is(:focus-within,:has(input:not(:placeholder-shown))){flex-basis:16rem;--graview-bar-find-end:10px}
+:is(:focus-within,:has(input:not(:placeholder-shown)))>.graview-bar-find-keys,.graview-bar-find-open{display:none}
 .graview-bar-line{display:flex;flex:0 0 auto;padding:6px 8px;background:var(--graview-ground);border-bottom:1px solid var(--graview-edge);font-family:var(--graview-font-body,system-ui)}
 .graview-bar-line .graview-bar-place{height:auto;min-height:32px}
 .graview-bar-line .graview-bar-place-words{white-space:normal}
-@container (max-width: 639px){
+@media (pointer:coarse){.graview-bar-find-keys{display:none}}
+@container graview-bar (max-width: ${BAR_PHONE - 1}px){
 .graview-bar-row{gap:10px;padding:0 12px}
 .graview-bar-app{max-width:none;flex:1 1 auto}
-.graview-bar-app-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
-.graview-bar-face{padding:0 8px}
-.graview-bar-face span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .graview-bar-mid,.graview-bar-find{display:none}
 .graview-bar-find-open{display:inline-flex}
 .graview-bar[data-finding] :is(.graview-bar-app,.graview-bar-faces,.graview-bar-find-open){display:none}
-.graview-bar[data-finding] .graview-bar-tools{flex:1 1 auto}
-.graview-bar[data-finding] .graview-bar-find{display:flex;flex:1 1 auto;width:auto;min-width:0}
+.graview-bar[data-finding] .graview-bar-find{display:flex;flex:1 1 auto;min-width:0}
 }`;
 /** A tool's own box: one size, square, its name in words for whoever cannot see the mark. */
 export const toolStyle = {
@@ -127,23 +196,61 @@ export const toolStyle = {
  * 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, }) {
+export function AppBar({ brand, name, heading = 1, home, faces, places, current, reach, tools, find = true, description, findBox, onFind, switch: switchForm = "words", scenePlaces, }) {
     const bar = useRef(null);
     const [slot, setSlot] = useState(null);
     const [compact, setCompact] = 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);
+    // The places on the face drawn: the routed face's, or the scene's (FR-144).
+    const onPages = !faces || faces.pages.current;
+    const shown = onPages ? { places, current, reach } : scenePlaces;
+    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";
+    const weigh = useCallback(() => {
+        const element = bar.current;
+        if (!element)
+            return;
+        const stand = standsIn(element, currentAt, wordsAsked);
+        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]);
     useLayoutEffect(() => {
         const element = bar.current;
         if (!element)
             return;
-        const read = () => setCompact(element.getBoundingClientRect().width < 640);
+        const read = () => {
+            const width = element.getBoundingClientRect().width;
+            setCompact(width < BAR_PHONE);
+            // 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`);
+            weigh();
+        };
         read();
+        // The brand's face, once it has come, is wider or narrower than the one the row was first weighed in.
+        const fonts = typeof document === "undefined" ? undefined : document.fonts;
+        void fonts?.ready.then(weigh);
+        fonts?.addEventListener?.("loadingdone", weigh);
         if (typeof ResizeObserver === "undefined")
-            return;
+            return () => fonts?.removeEventListener?.("loadingdone", weigh);
         const watch = new ResizeObserver(read);
         watch.observe(element);
-        return () => watch.disconnect();
-    }, []);
+        // What stands beside the places — the tools, a count on the standing — changes their room without changing the bar's width.
+        for (const tool of element.querySelectorAll(".graview-bar-tools > *"))
+            watch.observe(tool);
+        return () => {
+            watch.disconnect();
+            fonts?.removeEventListener?.("loadingdone", weigh);
+        };
+    }, [weigh]);
     const told = useRef(onFind);
     told.current = onFind;
     useLayoutEffect(() => {
@@ -175,10 +282,16 @@ export function AppBar({ brand, name, heading = 1, home, faces, places, current,
         event.preventDefault();
         go();
     };
-    // The place control stands on Pages: in the bar on a desk, as the page's first line on a phone.
-    const onPages = !faces || faces.pages.current;
-    const placeControl = onPages && places.length > 0 ? _jsx(PlaceControl, { places: places, current: current, reach: reach }) : null;
-    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 }), _jsxs("div", { className: "graview-bar-row", children: [_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 })] }) }) }), faces ? _jsx(FaceSwitch, { faces: faces }) : null, _jsx("div", { className: "graview-bar-mid", children: compact ? null : placeControl }), _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, {}) }), _jsx("div", { ref: setSlot, className: "graview-bar-find", "data-testid": "app-find", onBlur: (event) => {
+    // The place control: in the bar on a desk, as the page's first line on a phone; the places themselves on the row when they fit (FR-145).
+    const scene = !onPages;
+    const stands = list && !compact && standing !== null ? standing.split(",").map(Number).filter((at) => at < list.places.length) : null;
+    const placeControl = list ? _jsx(Places, { places: list.places, current: list.current, 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 }), _jsxs("div", { className: "graview-bar-row", children: [_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 })] }) }) }), 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, _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))
@@ -196,7 +309,7 @@ export function AppBar({ brand, name, heading = 1, home, faces, places, current,
                                                         putAway();
                                                     else
                                                         escaping.current = false;
-                                                }, children: findBox })] })) : null, tools] })] })] }), compact && placeControl ? (_jsx("div", { className: "graview-bar-line", "data-graview-place-line": "", "data-testid": "app-place-line", children: placeControl })) : null] }));
+                                                }, children: [_jsx("div", { ref: setSlot, className: "graview-bar-find-slot", children: findBox }), _jsx("span", { className: "graview-bar-find-keys", "data-testid": "app-find-keys", "aria-hidden": "true", children: findKeys() })] })] })) : null, tools] })] })] }), compact && placeControl ? (_jsx("div", { className: "graview-bar-line", "data-graview-place-line": "", "data-testid": "app-place-line", children: placeControl })) : null] }));
 }
 /**
  * THE SWITCH (FR-137): the scene and the pages, side by side, an icon and a
@@ -204,7 +317,7 @@ export function AppBar({ brand, name, heading = 1, home, faces, places, current,
  * drawn pressed. Choosing the scene draws it under the bar; choosing the
  * pages goes back to the page you were on.
  */
-function FaceSwitch({ faces }) {
+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, onClick: () => {
@@ -212,7 +325,50 @@ function FaceSwitch({ faces }) {
                     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", children: [face("scene"), face("pages")] }));
+    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")] }));
+}
+/**
+ * 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; none when the app's name has
+ * wrapped. 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).
+ */
+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 ? Number.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;
+    let spare = mid.getBoundingClientRect().width - wanted;
+    if (find && find.getBoundingClientRect().width > 0) {
+        const basis = Number.parseFloat(getComputedStyle(find).flexBasis);
+        if (Number.isFinite(basis))
+            spare -= Math.max(0, basis - find.getBoundingClientRect().width);
+    }
+    // The app's name on two lines has given its room already: no room for the words.
+    const name = header.querySelector(".graview-bar-app-name");
+    if (name && name.getBoundingClientRect().height > Number.parseFloat(getComputedStyle(name).lineHeight) * 1.5)
+        return false;
+    return faces.getAttribute("data-switch-drawn") === "icons" ? spare >= words + 2 : spare >= -1;
+}
+/** Find's shortcut as the keyboard says it: ⌘K on a Mac (and an iPad's keyboard), Ctrl K elsewhere. */
+function findKeys() {
+    const platform = typeof navigator === "undefined" ? "" : (navigator.platform ?? "");
+    return /Mac|iPhone|iPad|iPod/.test(platform) ? "⌘K" : "Ctrl K";
 }
 /** The scene's mark: a plot of the city, seen from above at an angle. */
 function SceneMark() {
@@ -232,6 +388,9 @@ function FindMark() {
 }
 /** A place's mark in the list: the home's house, a kind's plot in its own hue. */
 function PlaceMark({ place }) {
+    // The scene's whole thing: the scene's own mark, as on the switch (FR-144).
+    if (place.key === WHOLE_KEY)
+        return _jsx(SceneMark, {});
     if (place.group === "home") {
         return (_jsx("svg", { width: "13", height: "13", viewBox: "0 0 14 14", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M2 6.5 L7 2 L12 6.5 V12 H2 Z", fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinejoin: "round" }) }));
     }
@@ -246,44 +405,95 @@ function PlaceMark({ place }) {
         } }));
 }
 const GROUPS = [{ group: "home" }, { group: "lists", heading: "Lists" }, { group: "pictures", heading: "Pictures" }];
+/** The word the places that do not stand on the row fold under (FR-145). */
+const MORE = "More";
+/**
+ * ONE PLACE, AS THE BAR OFFERS IT — in the list, or standing on the row: a
+ * link where it has an address, a press where the bar decides; marked
+ * `aria-current` where the reader is. Whichever way it is drawn it is
+ * `app-place-<key>` and says its path (`data-place-path`), once in the bar.
+ */
+function PlaceEntry({ place, current, reach, standing, done }) {
+    const at = place.key === current;
+    const href = reach.href?.(place.path);
+    const Entry = (href !== undefined ? "a" : "button");
+    return (_jsxs(Entry, { className: standing ? "graview-bar-at" : "graview-bar-item", "data-testid": `app-place-${place.key}`, "data-place-path": place.path, ...(at ? { "aria-current": "page" } : {}), ...(href !== undefined ? { href } : { type: "button" }), onClick: (event) => {
+            done();
+            if (!reach.go)
+                return;
+            if (href !== undefined && (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey))
+                return;
+            event.preventDefault();
+            reach.go(place);
+        }, children: [standing ? null : (_jsx("span", { className: "graview-bar-mark", children: _jsx(PlaceMark, { place: place }) })), standing && at ? _jsx("span", { "data-testid": "app-place-current", children: place.label }) : _jsx("span", { children: place.label })] }));
+}
+/** The places of a list, grouped — the home (or the whole thing), the Lists, the Pictures — each group with its heading. */
+function PlaceGroups({ places, current, reach, id, done }) {
+    return (_jsx(_Fragment, { children: GROUPS.map(({ group, heading }) => {
+            const listed = places.filter((place) => place.group === group);
+            if (listed.length === 0)
+                return null;
+            const named = `${id}-${group}`;
+            return (_jsxs("div", { role: "group", ...(heading ? { "aria-labelledby": named } : { "aria-label": listed[0].label }), "data-place-group": group, children: [heading ? _jsx("p", { id: named, children: heading }) : null, _jsx("ul", { children: listed.map((place) => (_jsx("li", { children: _jsx(PlaceEntry, { place: place, current: current, reach: reach, standing: false, done: done }) }, place.key))) })] }, group));
+        }) }));
+}
 /**
  * THE PLACE YOU ARE ON, AND EVERY OTHER (FR-138): one control, the place's
  * name and a chevron, that opens the app's places — the home first, then
  * the Lists and the Pictures, each with its mark, a long name wrapped
  * rather than cut. Every place is two presses away, and the bar is one row
- * of one height however many there are.
+ * of one height however many there are. On the scene, what is in view and
+ * every picture it can show (FR-144).
+ *
+ * WHERE THEY FIT, THE PLACES THEMSELVES (FR-145): the ones that stand, as
+ * words in their order, the one you are on underlined; then "More", which
+ * opens the rest, grouped as the one control's list is — no "More" when
+ * every place stands. "More" is `app-places-open` and its list
+ * `app-places`, as the one control and its list are, so a place that does
+ * not stand is reached by the same two presses either way.
  */
-function PlaceControl({ places, current, reach }) {
+function Places({ places, current, reach, scene, stands }) {
     const popover = usePopover("places");
-    const here = places.find((place) => place.key === current);
-    const said = here?.label ?? "Places";
-    const entry = (place) => {
-        const at = place.key === current;
-        const href = reach.href?.(place.path);
-        const common = {
-            className: "graview-bar-item",
-            "data-testid": `app-place-${place.key}`,
-            "data-place-path": place.path,
-            ...(at ? { "aria-current": "page" } : {}),
-            onClick: (event) => {
-                popover.setOpen(false);
-                if (!reach.go)
-                    return;
-                if (href !== undefined && (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey))
-                    return;
-                event.preventDefault();
-                reach.go(place);
-            },
-        };
-        const Entry = (href !== undefined ? "a" : "button");
-        return (_jsxs(Entry, { ...common, ...(href !== undefined ? { href } : { type: "button" }), children: [_jsx("span", { className: "graview-bar-mark", children: _jsx(PlaceMark, { place: place }) }), _jsx("span", { children: place.label })] }, place.key));
-    };
-    return (_jsxs("span", { className: "graview-bar-place-at", children: [_jsxs("button", { type: "button", className: "graview-bar-place", "data-testid": "app-places-open", ...popover.trigger, onClick: popover.toggle, "aria-label": `${said} — every place`, title: said, children: [_jsx("span", { className: "graview-bar-place-words", "data-testid": "app-place-current", children: said }), _jsx(Chevron, {})] }), _jsx("nav", { ...popover.pane, "data-testid": "app-places", "aria-label": "The app\u2019s places", hidden: !popover.open, className: "graview-bar-list", style: POPOVER_STYLE, children: GROUPS.map(({ group, heading }) => {
-                    const listed = places.filter((place) => place.group === group);
-                    if (listed.length === 0)
-                        return null;
-                    const id = `${popover.pane.id}-${group}`;
-                    return (_jsxs("div", { role: "group", ...(heading ? { "aria-labelledby": id } : { "aria-label": "Home" }), "data-place-group": group, children: [heading ? (_jsx("p", { id: id, children: heading })) : null, _jsx("ul", { children: listed.map((place) => (_jsx("li", { children: entry(place) }, place.key))) })] }, group));
-                }) })] }));
+    const said = places.find((place) => place.key === current)?.label ?? "Places";
+    const rest = stands ? places.filter((_, at) => !stands.includes(at)) : places;
+    return (_jsxs("nav", { className: stands ? "graview-bar-places" : "graview-bar-place-at", "aria-label": scene ? "What the scene shows" : "The app’s places", ...(stands ? { "data-testid": "app-places-standing" } : {}), children: [stands?.map((at) => _jsx(PlaceEntry, { place: places[at], current: current, reach: reach, standing: true, done: () => undefined }, places[at].key)), rest.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", className: stands ? "graview-bar-at" : "graview-bar-place", "data-testid": "app-places-open", ...popover.trigger, onClick: popover.toggle, "aria-label": stands ? `${MORE} — ${rest.length} more ${scene ? "pictures" : "places"}` : `${said} — ${scene ? "everything the scene shows" : "every place"}`, title: stands ? rest.map((place) => place.label).join(", ") : said, children: [stands ? (MORE) : (_jsx("span", { className: "graview-bar-place-words", "data-testid": "app-place-current", children: said })), _jsx(Chevron, {})] }), _jsx("div", { ...popover.pane, "data-testid": "app-places", hidden: !popover.open, className: "graview-bar-list", style: POPOVER_STYLE, children: _jsx(PlaceGroups, { places: rest, current: current, reach: reach, id: popover.pane.id, done: () => popover.setOpen(false) }) })] })) : null] }));
+}
+/**
+ * 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
+ * the places are drawn, so the row never flips between the two at one
+ * width. Not weighed while Find is in use (`undefined`); none on a phone's
+ * bar, when the app's name has wrapped, or where nothing is laid out (null).
+ */
+function standsIn(header, current, wordsAsked) {
+    const ruler = header.querySelector(".graview-bar-ruler");
+    const mid = header.querySelector(".graview-bar-mid");
+    if (!ruler || !mid)
+        return null;
+    const find = header.querySelector(".graview-bar-find");
+    if (find?.matches(":focus-within"))
+        return undefined;
+    if (header.getBoundingClientRect().width < BAR_PHONE)
+        return null;
+    const name = header.querySelector(".graview-bar-app-name");
+    if (name && name.getBoundingClientRect().height > Number.parseFloat(getComputedStyle(name).lineHeight) * 1.5)
+        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;
+    const end = find?.getBoundingClientRect();
+    // To Find's end, less Find at its least and the room between them (the row's gap, less the tools' pull); with no Find, the middle's own room.
+    const room = end && end.width > 0 ? end.right - from - (Number.parseFloat(getComputedStyle(find).minWidth) || 0) - 8 : mid.getBoundingClientRect().width;
+    return placesThatStand({ widths, current, room: Math.floor(room + drawnWords - words), more })?.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);
 }
 //# sourceMappingURL=app-bar.js.map