@graview/primitives 0.1.16 → 0.1.17

package/README.md

@@ -40,8 +40,10 @@ 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 app's places as tabs (`barPlaces`,
-the overview among them, FR-132), and three tools of one size: the Find a
+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),
+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
 face that owns the page.
@@ -54,3 +56,43 @@ a view spec is drawn with, which each face that draws a view draws beside it;
 and `sceneCss`, the rules only the scene draws (the districts from altitude,
 the plots, the village, the billboards), which an embed's scene face draws
 beside it so a page on the pages face carries none of them.
+
+## Design language
+
+Three layers, and a component reads only the middle one:
+
+| Layer | Where | What it holds |
+|---|---|---|
+| The identity | @graview/core (the design kit, revision 03) | En Dash navy #001769 and turquoise #00E5B9, paper #F7F7F2, ink #18213A, muted #586174; Montserrat at 550, 450 and 600; the shared-plane symbol |
+| The semantic tokens | `themeCss` writes them as custom properties | surfaces (`--graview-ground`, `-panel`, `-panel-muted`, `-panel-warning`, `-bar`, `-float`), text (`--graview-ink`, `-ink-muted`, `-ink-faint`), interaction (`--graview-accent`, `-accent-dim`, `-accent-ink`, `-edge`, `-edge-bright`), state (`--graview-warn`, `-good`, `-bad`), type (`--graview-font-body`, `-display`, `-mono`, `--graview-weight-display`, `-body`, `-label`), shape (`--graview-radius`, `-radius-sm`, `-pad`, `-pad-sm`, `-gap`), depth (`--graview-lift-low`, `-lift-high`, `--graview-layer-*`) and the kit (`--graview-kit-*`) |
+| The app's overrides | the app's brand | name, logo, page icon, both schemes' tokens, faces and weights, radius and density, a hue per kind, the kit |
+
+The shipped schemes are built on the identity: paper, reading ink and navy in
+the light, a deep navy ground with the navy's hue made light in the dark.
+Neither paints a wash or a glow; hover firms an edge rather than glowing.
+Turquoise is not a token at all: it is the symbol's point, a fill that is
+never text (1.5:1 on paper; navy reads on it at 9.7:1), so nothing the
+framework draws depends on it. An app that declares its own brand keeps its
+own colors, faces and logo, and the framework never puts Graview's mark in it.
+
+How the scene reads against any district's color: a kind's hue is the
+brand's (`accents`) or a stable hash, and only the hue: the lighting of a
+block's three faces and the plot under it is the scene's, so a block reads
+as a block on both grounds. Selection and the keyboard's place are drawn in
+the accent, as an outline set off from the block, never as a change of the
+block's own hue, so a selected block in a navy-ish district still reads as
+selected. A relation is told from another by its pattern, its end cap and its
+width as well as its color, and every district, block and relation carries
+its name in words, so nothing is said by color alone. Disabled is a dimmed
+control that cannot be pressed; empty, loading and refused are said in
+sentences.
+
+The words are set in Montserrat when the host has it, and in the reader's
+system sans otherwise: the framework names the face and never fetches it.
+A host that wants it imports the optional copy once —
+`import "@graview/primitives/montserrat.css"`, 32 KB of woff2, weights
+400–700, Latin, under the SIL Open Font License (beside it in the package).
+`GraviewMark` is the symbol for a host drawing Graview's own identity — a
+signature, a hosting service's chrome — inline in the ink it stands in, the
+point in `--graview-mark-point` when set, decorative unless given a `title`,
+and the optical micro cut under 28 px.

package/dist/app-bar.d.ts

@@ -1,20 +1,27 @@
 import { type AnySchema, type Brand, type PagesArrangement, type Place, type Principal, type Store } from "@graview/core";
 import { type CSSProperties, type ReactNode } from "react";
-/** One of the app's places on the bar: what it is called, and where it is on the routed face. */
+/** Which of the places a place is: the home, a kind's list, or a picture. */
+export type BarPlaceGroup = "home" | "lists" | "pictures";
+/** One of the app's places, as the bar's place control lists it: what it is called, and where it is on the routed face. */
 export interface BarPlace {
     readonly key: string;
     readonly label: string;
-    /** Its path on the routed face — `/places/overview` for the scene. */
+    /** Its path on the routed face. */
     readonly path: string;
+    readonly group: BarPlaceGroup;
+    /** The kind it is a list or a picture of, for its mark. */
+    readonly kind?: string;
 }
-/** The key the scene's place has on the bar. */
-export declare const OVERVIEW_KEY = "overview";
+/** The key the home's place has (FR-136): the app's front page, first in the list, at the app's own address. */
+export declare const HOME_KEY = "home";
+/** The home's address on the routed face: the app's own. */
+export declare const HOME_PATH = "/";
 /**
- * THE APP'S PLACES, IN THE BAR'S ORDER: the overview (when the face can draw
- * the scene), each named picture, each kind's list in the declaration's
- * order, and how the kinds connect, when they do. What a seat may not see
- * is not offered: a kind kept from it, a disabled module's kind, a picture
- * over either.
+ * 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
+ * connect, when they do. What a seat may not see is not offered: a kind
+ * kept from it, a disabled module's kind, a picture over either. The scene
+ * is not a place here: it is the switch's (FR-137).
  */
 export declare function barPlaces(input: {
     readonly store: Store<AnySchema>;
@@ -23,10 +30,8 @@ export declare function barPlaces(input: {
         places(): readonly Place[];
         arrangement?(): PagesArrangement | undefined;
     } | undefined;
-    /** Whether the scene is one of the places here. */
-    readonly overview: boolean;
 }): readonly BarPlace[];
-/** Which of the places a path on the routed face is: its own, a record's kind's, or none (the home, Find, the problems). */
+/** Which of the places a path on the routed face is: its own, a record's kind's, or none (Find, the problems). */
 export declare function barPlaceAt(places: readonly BarPlace[], path: string): string | null;
 /**
  * WHERE A FACE PUTS ITS FIND BOX (FR-131). The bar draws the place; the
@@ -35,7 +40,7 @@ export declare function barPlaceAt(places: readonly BarPlace[], path: string): s
  */
 export interface BarFind {
     readonly slot: HTMLElement;
-    /** A phone's bar: the box opens over the bar's first row when it is asked for. */
+    /** A phone's bar: the box opens over the bar's row when it is asked for. */
     readonly compact: boolean;
 }
 export declare const BarFindContext: import("react").Context<BarFind | null>;
@@ -43,22 +48,37 @@ export declare const BarFindContext: import("react").Context<BarFind | null>;
 export declare const useBarFind: () => BarFind | null;
 /** How a place is reached: a link when it has an address, a press when the bar decides. */
 export interface BarGo {
-    /** The address a place's link carries; none, and the tab is a button. */
+    /** The address a place's link carries; none, and the entry is a button. */
     readonly href?: (path: string) => string | undefined;
     /** Goes to a place; a link's ordinary press is handed here rather than followed. */
     readonly go?: (place: BarPlace) => void;
 }
+/** One of the switch's two faces: what it is called, whether it is drawn, and the way to it. */
+export interface BarFace {
+    readonly label: string;
+    readonly current: boolean;
+    readonly go: () => void;
+}
+/** THE SWITCH (FR-137): the scene and the pages, the app's two faces. */
+export interface BarFaces {
+    readonly scene: BarFace;
+    readonly pages: BarFace;
+}
 /** 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;
 /** A tool's own box: one size, square, its name in words for whoever cannot see the mark. */
 export declare const toolStyle: CSSProperties;
 /**
  * THE BAR. The app at the left — its mark, its name as the page's heading,
- * the way home — its places in the middle, and the tools at the right: the
- * Find a face puts in it, then `tools` (the standing and the person). One
- * row at a desk; on a phone the places take a second row of their own.
+ * 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
+ * place is the page's first line, under the bar.
  */
-export declare function AppBar({ brand, name, heading, home, 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, }: {
     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. */
@@ -69,8 +89,10 @@ export declare function AppBar({ brand, name, heading, home, places, current, re
         readonly go?: (() => void) | undefined;
         readonly current: boolean;
     };
+    /** The switch between the scene and the pages; none where the face cannot draw the scene. */
+    readonly faces?: BarFaces | undefined;
     readonly places: readonly BarPlace[];
-    /** The key of the place the reader is on; null at the home, at Find, at the problems. */
+    /** The key of the place the reader is on; null at Find, at the problems. */
     readonly current: string | null;
     readonly reach: BarGo;
     /** The standing and the person, after Find. */

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

@@ -1,17 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { OVERVIEW_PATH, OVERVIEW_SLUG, orderKinds, overviewTitle, placeSlug } from "@graview/core";
+import { hueFor, orderKinds, OVERVIEW_SLUG, placeSlug } from "@graview/core";
 import { POPOVER_STYLE, usePopover } from "@graview/react/provider";
 import { createContext, useCallback, useContext, useLayoutEffect, useRef, useState } from "react";
 import { AppMark } from "./app-title.js";
-/** The key the scene's place has on the bar. */
-export const OVERVIEW_KEY = OVERVIEW_SLUG;
+/** The key the home's place has (FR-136): the app's front page, first in the list, at the app's own address. */
+export const HOME_KEY = "home";
+/** The home's address on the routed face: the app's own. */
+export const HOME_PATH = "/";
 const upper = (word) => word.charAt(0).toUpperCase() + word.slice(1);
 /**
- * THE APP'S PLACES, IN THE BAR'S ORDER: the overview (when the face can draw
- * the scene), each named picture, each kind's list in the declaration's
- * order, and how the kinds connect, when they do. What a seat may not see
- * is not offered: a kind kept from it, a disabled module's kind, a picture
- * over either.
+ * 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
+ * connect, when they do. What a seat may not see is not offered: a kind
+ * kept from it, a disabled module's kind, a picture over either. The scene
+ * is not a place here: it is the switch's (FR-137).
  */
 export function barPlaces(input) {
     const { store, principal, views } = input;
@@ -19,27 +21,26 @@ export function barPlaces(input) {
     const live = store.schema.kinds.filter((kind) => !store.modules.disabledKinds.has(kind) && !kept.has(kind));
     const arrangement = views?.arrangement?.();
     const plural = (kind) => store.schema.tryDefinition(kind)?.plural ?? `${kind}s`;
-    const out = [];
-    if (input.overview)
-        out.push({ key: OVERVIEW_KEY, label: overviewTitle(arrangement), path: OVERVIEW_PATH });
+    const out = [{ key: HOME_KEY, label: "Home", path: HOME_PATH, group: "home" }];
+    for (const kind of orderKinds(live, arrangement?.order))
+        out.push({ key: `kind:${kind}`, label: upper(plural(kind)), path: `/${placeSlug(plural(kind))}`, group: "lists", kind });
     const all = views?.places() ?? [];
     for (const place of all) {
+        // A place at the scene's address is not offered: the address is the scene's (FR-132).
         if (!live.includes(place.kind) || place.as === OVERVIEW_SLUG)
             continue;
         // Two kinds' pictures of one name say whose with `?of=` (as the routed face addresses them).
         const shared = all.some((other) => other.as === place.as && other.kind !== place.kind);
         const path = `/places/${encodeURIComponent(place.as)}${shared ? `?of=${placeSlug(plural(place.kind))}` : ""}`;
         if (!out.some((held) => held.path === path))
-            out.push({ key: `place:${place.kind}:${place.as}`, label: place.title, path });
+            out.push({ key: `place:${place.kind}:${place.as}`, label: place.title, path, group: "pictures", kind: place.kind });
     }
-    for (const kind of orderKinds(live, arrangement?.order))
-        out.push({ key: `kind:${kind}`, label: upper(plural(kind)), path: `/${placeSlug(plural(kind))}` });
     const connects = live.some((kind) => Object.keys((store.schema.tryDefinition(kind)?.edges ?? {})).length > 0);
     if (connects)
-        out.push({ key: "connections", label: "Connections", path: "/map" });
+        out.push({ key: "connections", label: "Connections", path: "/map", group: "pictures" });
     return out;
 }
-/** Which of the places a path on the routed face is: its own, a record's kind's, or none (the home, Find, the problems). */
+/** Which of the places a path on the routed face is: its own, a record's kind's, or none (Find, the problems). */
 export function barPlaceAt(places, path) {
     const [pathname = "/", search = ""] = path.split("?");
     const exact = places.find((place) => place.path === (search ? `${pathname}?${search}` : pathname)) ?? places.find((place) => place.path === pathname);
@@ -47,43 +48,57 @@ export function barPlaceAt(places, path) {
         return exact.key;
     const first = `/${pathname.split("/").filter(Boolean)[0] ?? ""}`;
     // A record's page is under its kind's list.
-    return places.find((place) => place.key.startsWith("kind:") && place.path === first)?.key ?? null;
+    return places.find((place) => place.group === "lists" && place.path === first)?.key ?? null;
 }
 export const BarFindContext = createContext(null);
 /** The bar's place for a Find box, when a bar above this face has one. */
 export const useBarFind = () => useContext(BarFindContext);
 /** One size for every tool on the bar (FR-131). */
 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;
 const BAR_CSS = `
-.graview-bar{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-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"app places tools";align-items:stretch;column-gap:20px;padding:0 16px;min-height:48px}
-.graview-bar-app{grid-area:app;display:flex;align-items:center;min-width:0}
-.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.3;letter-spacing:-.005em}
-.graview-bar-home{display:inline-flex;align-items:center;gap:8px;min-width:0;min-height:30px;color:var(--graview-ink);text-decoration:none;font:inherit;letter-spacing:inherit;overflow-wrap:anywhere;margin:0;padding:0;border:0;background:none;box-shadow:none;cursor:pointer;text-align:left}
-.graview-bar-more{display:grid;min-width:200px;max-width:calc(100vw - 32px);margin:0;padding:4px;list-style:none;border-radius:10px;border:1px solid var(--graview-edge);background:var(--graview-float);box-shadow:var(--graview-lift-high)}
-.graview-bar-more[hidden]{display:none}
-.graview-bar-item{display:flex;align-items:center;width:100%;min-height:32px;padding:0 10px;border:0;border-left:2px solid transparent;border-radius:7px;background:none;box-shadow:none;font:inherit;font-size:.875rem;text-align:left;text-decoration:none;color:var(--graview-ink);cursor:pointer}
-.graview-bar-item[aria-current="page"]{font-weight:600;border-left-color:var(--graview-accent)}
-.graview-bar-places{grid-area:places;display:flex;align-items:stretch;min-width:0}
-.graview-bar-tools{grid-area:tools;display:flex;align-items:center;gap:8px;min-width:0}
-.graview-bar-find{display:flex;align-items:center;width:15rem;min-width:0}
-.graview-bar-find-open{display:none;align-items:center;justify-content:center}
-.graview-bar-tab{display:inline-flex;align-items:center;gap:4px;padding:0 10px;margin:0;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;box-shadow:none;font:inherit;font-size:.875rem;line-height:1.2;white-space:nowrap;color:var(--graview-ink-muted);text-decoration:none;cursor:pointer;flex:0 0 auto}
-.graview-bar-tab:hover{color:var(--graview-ink)}
-.graview-bar-tab[aria-current="page"]{color:var(--graview-ink);border-bottom-color:var(--graview-accent);font-weight:600}
-.graview-bar-tab:focus-visible{outline:2px solid var(--graview-accent);outline-offset:-4px}
-.graview-bar-measure{position:absolute;visibility:hidden;pointer-events:none;display:flex;white-space:nowrap;height:0;overflow:hidden}
+.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-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-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}
+.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-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}
+.graview-bar-item{align-items:flex-start;gap:10px;width:100%;padding:7px 8px;border-radius:7px;font-size:.875rem;line-height:1.3;overflow-wrap:anywhere}
+.graview-bar-item:hover{background:color-mix(in srgb,var(--graview-ink) 7%,transparent)}
+.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-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){
-.graview-bar-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"app tools" "places places";padding:0 12px;min-height:0;column-gap:12px}
-.graview-bar-app,.graview-bar-tools{min-height:48px}
-.graview-bar-places{border-top:1px solid var(--graview-edge);margin:0 -12px;padding:0 2px;min-height:40px}
-.graview-bar-find{display:none;width:auto;flex:1 1 auto}
+.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] .graview-bar-app{display:none}
-.graview-bar[data-finding] .graview-bar-row{grid-template-areas:"tools tools" "places places"}
+.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}
-.graview-bar[data-finding] .graview-bar-find-open{display:none}
+.graview-bar[data-finding] .graview-bar-find{display:flex;flex:1 1 auto;width: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 = {
@@ -106,11 +121,13 @@ export const toolStyle = {
 };
 /**
  * THE BAR. The app at the left — its mark, its name as the page's heading,
- * the way home — its places in the middle, and the tools at the right: the
- * Find a face puts in it, then `tools` (the standing and the person). One
- * row at a desk; on a phone the places take a second row of their own.
+ * 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
+ * place is the page's first line, under the bar.
  */
-export function AppBar({ brand, name, heading = 1, home, 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, }) {
     const bar = useRef(null);
     const [slot, setSlot] = useState(null);
     const [compact, setCompact] = useState(false);
@@ -151,31 +168,59 @@ export function AppBar({ brand, name, heading = 1, home, places, current, reach,
         requestAnimationFrame(() => opener.current?.focus());
     }, []);
     const Heading = heading === false ? "span" : `h${heading}`;
+    const Home = (home.href !== undefined ? "a" : "button");
     const press = (go) => (event) => {
         if (!go || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
             return;
         event.preventDefault();
         go();
     };
-    return (_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: home.href !== undefined ? (_jsxs("a", { href: home.href, onClick: press(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", { "data-testid": "app-name", children: name })] })) : (_jsxs("button", { 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", { "data-testid": "app-name", children: name })] })) }) }), _jsx(BarPlaces, { places: places, current: current, reach: reach }), _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) => {
-                                            // 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: findBox })] })) : null, tools] })] })] }));
+    // 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) => {
+                                                    // 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: findBox })] })) : 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
+ * 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.
+ */
+function FaceSwitch({ faces }) {
+    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: () => {
+                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", children: [face("scene"), face("pages")] }));
+}
+/** The scene's mark: a plot of the city, seen from above at an angle. */
+function SceneMark() {
+    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", focusable: "false", style: { flex: "0 0 auto" }, 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("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", focusable: "false", style: { flex: "0 0 auto" }, 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() {
@@ -185,67 +230,43 @@ function Chevron() {
 function FindMark() {
     return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false", children: [_jsx("circle", { cx: "7", cy: "7", r: "4.75", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M10.5 10.5 L14 14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
 }
+/** A place's mark in the list: the home's house, a kind's plot in its own hue. */
+function PlaceMark({ place }) {
+    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" }) }));
+    }
+    // A kind's plot, as the scene draws it from altitude (the mark FR-117 gave a kind with no drawing); a picture of it wears its outline; how the kinds connect, the ink's.
+    const hue = place.kind ? `hsl(${Math.round(hueFor(place.kind))} 55% 52%` : "rgb(128 128 128";
+    return (_jsx("span", { "aria-hidden": "true", style: {
+            display: "inline-block",
+            width: 12,
+            height: 8,
+            clipPath: "polygon(50% 0, 100% 50%, 50% 100%, 0 50%)",
+            background: place.group === "lists" ? `${hue})` : `linear-gradient(${hue}), ${hue})) center / 6px 4px no-repeat, ${hue} / 0.35)`,
+        } }));
+}
+const GROUPS = [{ group: "home" }, { group: "lists", heading: "Lists" }, { group: "pictures", heading: "Pictures" }];
 /**
- * THE PLACES AS PLAIN TABS. As many as the row holds, in order; the rest
- * under "More". The tab you are on is marked, and always on the row — in
- * the last tab's room when the row could not otherwise hold it, and alone
- * beside "More" when the row holds none — so where you are is never hidden.
+ * 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.
  */
-function BarPlaces({ places, current, reach }) {
-    const row = useRef(null);
-    const measure = useRef(null);
-    const [fits, setFits] = useState(places.length);
+function PlaceControl({ places, current, reach }) {
     const popover = usePopover("places");
-    const signature = places.map((place) => place.label).join("|");
-    const currentAt = places.findIndex((place) => place.key === current);
-    useLayoutEffect(() => {
-        const element = row.current;
-        const ruler = measure.current;
-        if (!element || !ruler)
-            return;
-        const fit = () => {
-            const room = element.getBoundingClientRect().width + 0.5;
-            const widths = [...ruler.children].map((child) => child.getBoundingClientRect().width);
-            const more = widths.pop() ?? 0;
-            const sum = (list) => list.reduce((total, width) => total + width, 0);
-            let count = widths.length;
-            if (sum(widths) > room) {
-                // As many as fit beside "More" — the place you are on among them, in the last one's room when it is further along.
-                count = widths.length - 1;
-                while (count > 0) {
-                    const seen = currentAt >= count ? [...widths.slice(0, count - 1), widths[currentAt]] : widths.slice(0, count);
-                    if (sum(seen) + more <= room)
-                        break;
-                    count -= 1;
-                }
-            }
-            setFits((was) => (was === count ? was : count));
-        };
-        fit();
-        if (typeof ResizeObserver === "undefined")
-            return;
-        const watch = new ResizeObserver(fit);
-        watch.observe(element);
-        // The ruler too: a brand's web font arriving after the first measure widens every tab.
-        watch.observe(ruler);
-        return () => watch.disconnect();
-    }, [signature, currentAt]);
-    if (places.length === 0)
-        return _jsx("div", { className: "graview-bar-places", "data-testid": "app-places", ref: row });
-    // The place you are on is on the row: in the last tab's room when it is one the row could not otherwise hold, alone when it holds none.
-    const shown = currentAt >= fits ? [...places.slice(0, Math.max(0, fits - 1)), places[currentAt]] : places.slice(0, fits);
-    const rest = places.filter((place) => !shown.includes(place));
-    const tab = (place, inMenu) => {
-        const here = place.key === current;
+    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: inMenu ? "graview-bar-item" : "graview-bar-tab",
+            className: "graview-bar-item",
             "data-testid": `app-place-${place.key}`,
             "data-place-path": place.path,
-            ...(here ? { "aria-current": "page" } : {}),
+            ...(at ? { "aria-current": "page" } : {}),
             onClick: (event) => {
-                if (inMenu)
-                    popover.setOpen(false);
+                popover.setOpen(false);
                 if (!reach.go)
                     return;
                 if (href !== undefined && (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey))
@@ -254,8 +275,15 @@ function BarPlaces({ places, current, reach }) {
                 reach.go(place);
             },
         };
-        return href !== undefined ? (_jsx("a", { ...common, href: href, children: place.label }, place.key)) : (_jsx("button", { ...common, type: "button", children: place.label }, place.key));
+        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("nav", { ref: row, className: "graview-bar-places", "aria-label": "The app\u2019s places", "data-testid": "app-places", style: { position: "relative" }, children: [_jsxs("div", { ref: measure, className: "graview-bar-measure", "aria-hidden": "true", children: [places.map((place) => (_jsx("span", { className: "graview-bar-tab", style: { fontWeight: 600 }, children: place.label }, place.key))), _jsxs("span", { className: "graview-bar-tab", children: ["More", _jsx(Chevron, {})] })] }), shown.map((place) => tab(place, false)), rest.length > 0 ? (_jsxs("span", { style: { position: "relative", display: "inline-flex" }, children: [_jsxs("button", { type: "button", className: "graview-bar-tab", "data-testid": "app-places-more", ...popover.trigger, onClick: popover.toggle, "aria-label": "More places", children: ["More", _jsx(Chevron, {})] }), _jsx("ul", { ...popover.pane, "data-testid": "app-places-more-list", "aria-label": "More places", hidden: !popover.open, className: "graview-bar-more", style: POPOVER_STYLE, children: rest.map((place) => (_jsx("li", { children: tab(place, true) }, place.key))) })] })) : null] }));
+    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));
+                }) })] }));
 }
 //# sourceMappingURL=app-bar.js.map