@graview/primitives 0.1.0

package/dist/default-views.d.ts

@@ -0,0 +1,35 @@
+import { type AnySchema } from "@graview/core";
+import { type ReactViewRegistry } from "@graview/react";
+/**
+ * A generic view for every cell of the matrix, derived from the declaration.
+ *
+ * This is what makes "a new node kind renders acceptably at all three
+ * fidelities with zero custom view code" true rather than aspirational: the
+ * declaration already carries the label, the plural and the fields, so a
+ * sensible rendering exists the moment the kind does. An author overrides
+ * only the cells they actually care about.
+ */
+import { hueFor } from "@graview/render";
+export { hueFor };
+/** The declared accent when the installation named one, else the hash. */
+export declare function useHue(kind: string): number;
+/**
+ * WHAT AN OPENED DISTRICT LISTS: the rows the layout kept room for
+ * (`openedRows`), in as many columns as its names can be READ in. Two
+ * columns of ninety-five pixels turned every vehicle into "2026 Ma…"; a
+ * name needs about seven and a half pixels a character in a 212-pixel
+ * roster, and a district of long names keeps one column.
+ */
+export declare function rosterOf(names: readonly string[], rows: number): {
+    readonly columns: number;
+    readonly shown: number;
+};
+/**
+ * How many members a drive-in's thumbnail hands its lens: enough for its
+ * shape, never the population. A thumbnail is 58 pixels wide: twelve rows
+ * is already more than it can show, and a matrix of 12 × 12 is 144 cells
+ * where 24 × 24 was 576.
+ */
+export declare const THUMBNAIL_BUDGET = 12;
+export declare function registerDefaultViews<S extends AnySchema>(schema: S, registry?: ReactViewRegistry<S>): ReactViewRegistry<S>;
+//# sourceMappingURL=default-views.d.ts.map

package/dist/default-views.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-views.d.ts","sourceRoot":"","sources":["../src/default-views.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EAIf,MAAM,eAAe,CAAC;AAEvB,OAAO,EAUL,KAAK,iBAAiB,EAEN,MAAM,gBAAgB,CAAC;AAOzC;;;;;;;;GAQG;AAIH,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,OAAO,EAAE,MAAM,EAAE,CAAC;AAElB,0EAA0E;AAC1E,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAG3C;AAyBD;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAMrH;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAuJnC,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,SAAS,EACtD,MAAM,EAAE,CAAC,EACT,QAAQ,GAAE,iBAAiB,CAAC,CAAC,CAAuB,GACnD,iBAAiB,CAAC,CAAC,CAAC,CA+zBtB"}

package/dist/default-views.js

@@ -0,0 +1,605 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { arrange, describeNode, labelOf, readableFields, violationsTouching, } from "@graview/core";
+import { aggregateId, kindCardId, marqueeHeightFor, rosterRows, withFocus, withJackIn, withOverview, withPast, withWithin } from "@graview/layout";
+import { createViews, useFound, useGraview, useKit, useNavigation, useReached, useSceneStill, useSelection, useViolations, markDefaultView } from "@graview/react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { ArrangeBar, arrangementOf, withArrangement } from "./arrange-bar.js";
+import { Connections } from "./connections.js";
+import { EditableTitle, Fields } from "./editable.js";
+import { Aggregate, Chip, Panel, Roster } from "./primitives/index.js";
+/**
+ * A generic view for every cell of the matrix, derived from the declaration.
+ *
+ * This is what makes "a new node kind renders acceptably at all three
+ * fidelities with zero custom view code" true rather than aspirational: the
+ * declaration already carries the label, the plural and the fields, so a
+ * sensible rendering exists the moment the kind does. An author overrides
+ * only the cells they actually care about.
+ */
+// The canonical hue lives beside the other colour logic in @graview/render;
+// re-exported here because every view author already imports it from views.
+import { hueFor } from "@graview/render";
+import { hasFigure, KindFigure } from "./figure.js";
+export { hueFor };
+/** The declared accent when the installation named one, else the hash. */
+export function useHue(kind) {
+    const { brand } = useGraview();
+    return hueFor(kind, brand?.accents);
+}
+/**
+ * The field a shortened label was shortened FROM, when there is one.
+ *
+ * Matched by stem rather than by name, because which field a label came from
+ * is the app's business — `label: (node) => summarise(node.text)` names no
+ * field the framework can see, and asking every app to declare it would be
+ * asking them to repeat themselves.
+ */
+function longFormOf(node, short) {
+    if (!short.endsWith("…") && !short.endsWith("..."))
+        return undefined;
+    const stem = short.replace(/[…]|\.\.\.$/g, "").trim();
+    if (stem.length < 12)
+        return undefined;
+    for (const value of Object.values(node)) {
+        if (typeof value !== "string")
+            continue;
+        if (value.length > stem.length && value.startsWith(stem))
+            return value;
+    }
+    return undefined;
+}
+/**
+ * WHAT AN OPENED DISTRICT LISTS: the rows the layout kept room for
+ * (`openedRows`), in as many columns as its names can be READ in. Two
+ * columns of ninety-five pixels turned every vehicle into "2026 Ma…"; a
+ * name needs about seven and a half pixels a character in a 212-pixel
+ * roster, and a district of long names keeps one column.
+ */
+export function rosterOf(names, rows) {
+    const widest = Math.max(0, ...names.slice(0, rows * 2).map((name) => name.length));
+    const columns = widest * 7.5 + 28 <= 212 / 2 ? 2 : 1;
+    const room = rows * columns;
+    // The count line needs no row of its own: it is part of the room reserved.
+    return { columns, shown: Math.min(names.length, room) };
+}
+/**
+ * How many members a drive-in's thumbnail hands its lens: enough for its
+ * shape, never the population. A thumbnail is 58 pixels wide: twelve rows
+ * is already more than it can show, and a matrix of 12 × 12 is 144 cells
+ * where 24 × 24 was 576.
+ */
+export const THUMBNAIL_BUDGET = 12;
+/*
+ * ONE THUMBNAIL A FRAME. A city of districts with named pictures would build
+ * them all in the frame the scene came to rest in — four lenses in one long
+ * task. Each waits its turn, one per animation frame.
+ */
+const turns = [];
+let turning = false;
+function takeTurn(mount) {
+    turns.push(mount);
+    const next = () => {
+        const run = turns.shift();
+        if (!run) {
+            turning = false;
+            return;
+        }
+        run();
+        requestAnimationFrame(next);
+    };
+    if (!turning && typeof requestAnimationFrame !== "undefined") {
+        turning = true;
+        requestAnimationFrame(next);
+    }
+    else if (typeof requestAnimationFrame === "undefined")
+        next();
+    return () => {
+        const at = turns.indexOf(mount);
+        if (at >= 0)
+            turns.splice(at, 1);
+    };
+}
+/**
+ * The members worth drawing when not all can be: the flagged first, then
+ * the most connected, in their own order otherwise — the same reading the
+ * relation band's relevance gives (docs/scale.md).
+ */
+function mostRelevant(members, budget, flagged, graph) {
+    if (members.length <= budget)
+        return members;
+    const trouble = new Set(flagged ?? []);
+    return members
+        .map((node, index) => ({ node, index, trouble: trouble.has(node.id) ? 0 : 1, ties: -graph.neighbors(node.id).length }))
+        .sort((a, b) => a.trouble - b.trouble || a.ties - b.ties || a.index - b.index)
+        .slice(0, budget)
+        .sort((a, b) => a.index - b.index)
+        .map((entry) => entry.node);
+}
+/**
+ * DRAWN WHEN SEEN, AND WHEN STILL. A thumbnail off the screen, or built
+ * while the camera flies, spends a frame on a picture nobody can read. It
+ * mounts the first time it is on screen with the scene at rest, and then
+ * stays — unmounting on every flight would rebuild it on every landing.
+ */
+function WhenSeen({ children }) {
+    const still = useSceneStill();
+    const box = useRef(null);
+    const [seen, setSeen] = useState(false);
+    const [shown, setShown] = useState(false);
+    useEffect(() => {
+        const element = box.current;
+        if (!element || seen)
+            return;
+        if (typeof IntersectionObserver === "undefined") {
+            setSeen(true);
+            return;
+        }
+        const watch = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting))
+                setSeen(true);
+        }, { rootMargin: "120px" });
+        watch.observe(element);
+        return () => watch.disconnect();
+    }, [seen]);
+    useEffect(() => {
+        if (!seen || !still || shown)
+            return;
+        return takeTurn(() => setShown(true));
+    }, [seen, still, shown]);
+    return (
+    /*
+     * A real box, not `display: contents`: an element with no box never
+     * intersects anything. And a box as tall as a picture, not one pixel:
+     * drawn at a twentieth of its size a pixel is a twentieth of one, which
+     * the browser counts as no area at all — the Albums district's two
+     * pictures waited forever while the Artists one, drawn twice as large,
+     * was seen.
+     */
+    _jsx("span", { ref: box, style: { display: "block", minHeight: shown ? undefined : 360 }, "data-graview-thumbnail": shown ? "drawn" : "waiting", children: shown ? children : null }));
+}
+/**
+ * A LENS DRAWN SMALL, AND ONLY WHEN WHAT IT DRAWS CHANGES.
+ *
+ * The board renders the real component for every showing a kind has, and
+ * the card around it re-renders on every frame of a flight — so choosing
+ * a picture re-drew three matrices and a calendar sixty times a second
+ * while the camera moved, which is where "slow and glitchy" came from.
+ * Nothing about a thumbnail depends on the size of the card it sits in:
+ * memoised on what it actually draws, the flight costs one render each.
+ */
+const Picture = memo(function Picture({ lens: Lens, nodes, label, flagged, budget, total, }) {
+    return (_jsx(Lens, { nodes: nodes, label: label, ...(budget !== undefined ? { budget } : {}), ...(total !== undefined ? { total } : {}), fidelity: "full", cardinality: "many", mode: "scene", selected: false, ...(flagged ? { flagged } : {}) }));
+}, (was, now) => was.lens === now.lens &&
+    was.label === now.label &&
+    was.total === now.total &&
+    was.nodes.length === now.nodes.length &&
+    was.nodes.every((node, at) => node === now.nodes[at]) &&
+    (was.flagged ?? []).length === (now.flagged ?? []).length &&
+    (was.flagged ?? []).every((id, at) => id === (now.flagged ?? [])[at]));
+export function registerDefaultViews(schema, registry = createViews(schema)) {
+    for (const kind of schema.kinds) {
+        const definition = schema.tryDefinition(kind);
+        const plural = definition?.plural ?? `${String(kind)}s`;
+        const Full = (props) => {
+            const node = props.node;
+            /*
+             * WHAT IS WRONG WITH IT, ON IT.
+             *
+             * A flagged record wore the warning TONE and said nothing: a
+             * background tint, no words, no mark, nothing in the accessibility
+             * tree. The chips in a district get a "⚠" in their own label and the
+             * routed record page carries the rule's sentence — the biggest drawing
+             * of the same record, the one you travelled to, was the only place the
+             * problem existed purely as a shade. That is W-014's shape, one view
+             * along: emphasis painted and not said.
+             */
+            const violations = useViolations();
+            if (!node)
+                return null;
+            /*
+             * On a page, the heading is the WHOLE thing.
+             *
+             * A kind whose label is its own prose shortened — a rationale, a note, a
+             * reason — gets a heading cut at sixty characters, which is right on a
+             * card in the scene and wrong on a page that has room for all of it.
+             * Shortening then ALSO listing the full text below is worse again: the
+             * same sentence twice, one of them mutilated.
+             *
+             * So the page looks for the long form of its own heading and uses that,
+             * and `Fields` then drops it as already said. The abbreviation was for
+             * the card.
+             */
+            const short = labelOf(definition, node);
+            const heading = props.mode === "fullscreen" ? (longFormOf(node, short) ?? short) : short;
+            const touching = violationsTouching(violations, [node.id]);
+            return (_jsxs(Panel
+            // The name is the rename control. Nothing else on the page repeats
+            // it, so the thing you click to change it is the thing itself.
+            , { 
+                // The name is the rename control. Nothing else on the page repeats
+                // it, so the thing you click to change it is the thing itself.
+                title: _jsx(EditableTitle, { nodeId: node.id, children: heading }), 
+                /*
+                 * What THIS node is, when the declaration can say — and only the
+                 * kind's own description as a fallback.
+                 *
+                 * A subtitle that is the kind's description is identical on every
+                 * node of that kind, which makes it furniture rather than
+                 * information: it tells you what a rationale is, on a page you
+                 * reached by choosing one particular rationale.
+                 */
+                subtitle: 
+                // `describeNode` falls back to "<kind> <label>", which would put
+                // the heading back under the heading — so only take it when the
+                // declaration actually supplied one.
+                definition?.describe
+                    ? describeNode(definition, node)
+                    : (definition?.description ?? String(kind)), selected: props.selected, ...(props.flagged?.includes(node.id) ? { tone: "warning" } : {}), 
+                // A card in the scene; a document on a page. Same component, and the
+                // only difference is which of those two things it is sitting on.
+                fit: true, children: [_jsxs("div", { style: {
+                            display: "grid",
+                            gridTemplateColumns: "minmax(200px, 1fr) minmax(220px, 1.4fr)",
+                            gap: "22px 34px",
+                            alignItems: "start",
+                        }, children: [_jsx(Fields, { id: node.id, 
+                                // What the panel already said: its title and its subtitle. A
+                                // record repeating its own heading is what made this read as a
+                                // debug dump rather than as a page about something.
+                                shown: [heading, short, definition?.description] }), _jsx(Connections, { id: node.id, empty: `Nothing is connected to this ${String(kind)} yet.` })] }), touching.length > 0 ? (_jsx("p", { "data-graview-broken": "", style: {
+                            margin: "14px 0 0",
+                            paddingTop: 12,
+                            borderTop: "1px solid var(--graview-edge)",
+                            fontSize: "0.875rem",
+                            color: "var(--graview-warn)",
+                        }, children: touching.map((violation) => violation.message).join(" · ") })) : null] }));
+        };
+        /**
+         * Summary is not "full, but smaller". Receded text must stay LEGIBLE, so
+         * this drops to a denser arrangement rather than scaling the same content
+         * down into mush — that is the whole reason fidelity is an axis.
+         */
+        const Summary = (props) => {
+            const node = props.node;
+            if (!node)
+                return null;
+            // The same question the record on a page asks, answered by the same
+            // function — they used to answer it separately and diverge.
+            const fields = readableFields(node, definition, {
+                limit: 3,
+                said: [labelOf(definition, node)],
+                glance: true,
+            });
+            const hue = useHue(kind);
+            return (_jsx(Panel, { title: labelOf(definition, node), selected: props.selected, tone: props.flagged?.includes(node.id) ? "warning" : "muted", fit: true, children: _jsx(Roster, { items: fields.map((field) => ({
+                        id: field.key,
+                        // Alone on a chip a number or a yes/no is no fact at all.
+                        label: field.alone,
+                        hue,
+                    })), max: 3 }) }));
+        };
+        const Glyph = (props) => {
+            const node = props.node;
+            const hue = useHue(kind);
+            // The mark a broken rule leaves is the kit's, not a literal here.
+            const flag = useKit().marks.flag;
+            if (!node)
+                return null;
+            const broken = props.flagged?.includes(node.id) ?? false;
+            return (_jsx(Chip, { label: broken ? `${labelOf(definition, node)} ${flag}` : labelOf(definition, node), hue: hue, selected: props.selected, title: broken ? `${String(kind)} — implicated in a problem` : String(kind) }));
+        };
+        const Group = (props) => {
+            const { brand, store } = useGraview();
+            const { view, go } = useNavigation();
+            const members = props.nodes ?? [];
+            /*
+             * THE DEFAULT PICTURE ARRANGES TOO. What a kind can be sorted, filtered
+             * and grouped by is in its declaration, and the choice travels in the
+             * stop (`in.sort`, `in.filter`, `in.group`, `in.q`) like the calendar's
+             * month does — so an arranged district is a link, and Back restores it.
+             * The row is drawn at full fidelity, where there is room to read it;
+             * the arrangement holds at every fidelity, because the stop does.
+             */
+            const arrangement = arrangementOf(view);
+            const arranged = arrange(members, arrangement, { schema, graph: store.graph, flagged: new Set(props.flagged ?? []) });
+            const item = (member) => ({
+                id: member.id,
+                label: labelOf(schema.tryDefinition(member.kind), member),
+                hue: hueFor(member.kind, brand?.accents),
+            });
+            const bar = props.fidelity === "full" && members.length > 1 ? (_jsx(ArrangeBar, { schema: schema, graph: store.graph, kind: String(kind), arrangement: arrangement, onChange: (next) => go(withArrangement(view, next)), kept: { shown: arranged.nodes.length, of: members.length }, style: { marginBottom: 8 } })) : null;
+            // A receded group still has to report trouble inside it, or the only
+            // way to find a problem is to open every group in turn.
+            const flagged = (nodes) => nodes.some((member) => props.flagged?.includes(member.id));
+            if (!arranged.grouped) {
+                return (_jsxs("div", { style: { display: "grid", gap: 4 }, children: [bar, _jsx(Aggregate, { label: props.label ?? plural, count: arranged.nodes.length, flagged: flagged(arranged.nodes), items: arranged.nodes.map(item) })] }));
+            }
+            return (_jsxs("div", { style: { display: "grid", gap: 8 }, "data-graview-grouped": arrangement.group?.by, children: [bar, arranged.groups.map((group) => (_jsx(Aggregate, { label: `${props.label ?? plural} · ${group.label}`, count: group.nodes.length, flagged: flagged(group.nodes), items: group.nodes.map(item) }, group.key || "-")))] }));
+        };
+        /**
+         * A group at glyph fidelity.
+         *
+         * It names its MEMBERS, not just how many there are. "4 AGREEMENTS" tells
+         * you a number and nothing you wanted to know; the whole point of a
+         * context plane is to be glanceable, and a count is not a glance at
+         * anything. What fits, fits; the rest is "+n".
+         */
+        /**
+         * A group at glyph fidelity — the card the kinds plane is made of.
+         *
+         * Its name, how many there are, and what it is FOR on hover. The members
+         * used to be listed and it was the wrong answer: ten cards each showing
+         * three truncated names is ten unreadable things, and "which kinds exist
+         * and how big are they" is the question a map of kinds is asked. The
+         * description has been on every declaration since the first commit and
+         * nothing has ever shown it.
+         */
+        const GroupGlyph = (props) => {
+            const members = props.nodes ?? [];
+            const roster = rosterOf(members.map((member) => labelOf(definition, member)), props.openedRows ?? rosterRows(members.length));
+            const hue = useHue(kind);
+            /*
+             * THE KIND'S OWN DRAWING, where it has one.
+             *
+             * The isometric city gives every kind the same block; a figure is
+             * what makes one of them a person and another a plot of ground. The
+             * brand's say comes first, so an installation with its own drawing
+             * keeps the domain's declaration as the domain's.
+             */
+            const { brand } = useGraview();
+            const figure = hasFigure(String(kind), schema, brand);
+            const flag = useKit().marks.flag;
+            const { selection } = useSelection();
+            const { toggle, view, go } = useNavigation();
+            const { views, hiddenKinds, store } = useGraview();
+            /*
+             * THE DRIVE-IN'S MARQUEE. A kind with a named picture has a drive-in
+             * from altitude: a dark screen on its plot and, under it, the showings
+             * as real buttons. Pressing one focuses the kind with that showing and
+             * descends in one gesture — the lens is already drawn at the plot, so
+             * the descent reads as walking up to the screen. On the drive-in that
+             * is focused, pressing another showing switches the picture without
+             * descending; pressing the one already showing walks up to it.
+             */
+            const showings = view.overview && !hiddenKinds.has(String(kind)) ? views.places().filter((place) => place.kind === String(kind)) : [];
+            const showingNow = props.focused ? (view.within?.["view"] ?? showings[0]?.as) : undefined;
+            // A thumbnail is a picture of the lens, not the lens: its most relevant members, never the population.
+            const thumbnailMembers = useMemo(() => (showings.length > 0 ? mostRelevant(members, THUMBNAIL_BUDGET, props.flagged, store.graph) : []), 
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            [showings.length, members, props.flagged, store]);
+            const broken = members.filter((member) => props.flagged?.includes(member.id)).length;
+            const trouble = broken > 0;
+            const accent = props.focused || props.raised;
+            /*
+             * A kind the focus does not touch is QUIETER, not hidden.
+             *
+             * The layout already draws it smaller and further back; this is the
+             * other half of the same reading, so the card does not look like a
+             * full-size one that merely shrank. It stays a real card with a real
+             * name — a secondary relation is still somewhere you can go.
+             */
+            const secondary = props.rank === "secondary" && !accent;
+            const nested = props.nestedUnder !== undefined;
+            /*
+             * How many of this kind's members the SELECTION reaches, one edge away.
+             *
+             * "What is this thing actually tied to" was unanswerable from the
+             * shelf: you selected a span in the calendar and every kind card sat
+             * unchanged. The implicated set has always known; the card just never
+             * read it. Selected members themselves do not count — a card does not
+             * announce a tie to the thing that IS the selection.
+             */
+            const chosen = new Set(selection);
+            // What the selection reaches — never what a search lit, which is counted apart below.
+            const reached = useReached();
+            const tied = accent
+                ? 0
+                : members.filter((member) => reached.includes(member.id) && !chosen.has(member.id)).length;
+            /*
+             * WHAT THE WORDS FOUND HERE. With a search open, a district with hits
+             * is lit and says how many; one with none recedes. Pressing the count
+             * descends into the district already narrowed by the same words — the
+             * arrangement's `in.q` — so search hands off to the arrangement rather
+             * than competing with it.
+             */
+            const found = useFound();
+            const hits = found && !nested ? (found.byKind[String(kind)] ?? 0) : 0;
+            /*
+             * The block's height from altitude, in viewBox units: population under
+             * a square root, so one giant kind is a tall building rather than a
+             * tower the scene scrolls for.
+             */
+            const rise = nested ? 8 : Math.min(46, 10 + Math.round(Math.sqrt(members.length) * 8));
+            /*
+             * The district's NAME, lifted out of the markup because a figure stands
+             * beside it and a name written twice is a name that drifts.
+             */
+            const name = (_jsx("span", { style: {
+                    /*
+                     * A DISTRICT'S NAME IS READ, not glanced at. Thirteen pixels
+                     * before the kinds plane's own recession put it on the screen at
+                     * ten, and the kind above it at under eight — small enough that
+                     * the bottom of the picture was a row of grey marks rather than
+                     * a map of the domain.
+                     */
+                    fontSize: nested ? "0.75rem" : "0.9375rem",
+                    lineHeight: 1.25,
+                    letterSpacing: "0.05em",
+                    textTransform: "uppercase",
+                    color: accent ? "var(--graview-accent)" : "var(--graview-ink-muted)",
+                    /*
+                     * A tucked card is a corner peeking out from behind its parent,
+                     * so its name gets one line. "Unavailability" wrapped to two and
+                     * pushed the count out of a card that has no spare rows — and
+                     * the alternative, growing the tuck until it fits, makes it the
+                     * same size as the thing it is meant to be behind.
+                     */
+                    ...(nested
+                        ? { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }
+                        : { overflowWrap: "anywhere" }),
+                }, children: props.label ?? plural }));
+            return (_jsxs("div", { className: "graview-kind-card", "data-graview-rank": props.rank, "data-graview-landmark": figure || undefined, "data-graview-nested": nested || undefined, "data-graview-tied": tied || undefined, "data-graview-hits": found && !nested ? hits : undefined, "data-graview-emphasis": found && !nested ? (hits > 0 ? "lit" : "dimmed") : undefined, ...(definition?.description || nested
+                    ? {
+                        title: nested
+                            ? [props.label ?? plural, definition?.description].filter(Boolean).join(" — ")
+                            : definition.description,
+                    }
+                    : {}), style: {
+                    position: "relative",
+                    height: "100%",
+                    ["--graview-hue"]: Math.round(hue),
+                    /*
+                     * THE ROOM THE MARQUEE TAKES, told to the drawing under it. The
+                     * building is sized from the card's height, and the layout grew
+                     * the card by the marquee's band — so the building grew into the
+                     * band and the showings stood on its roof. The band's height is
+                     * the layout's own estimate, and the building sizes from what is
+                     * left.
+                     */
+                    ["--graview-marquee-room"]: showings.length > 0 ? `${marqueeHeightFor(showings.map((place) => place.title), 132) + (figure ? 4 : 42)}px` : "0px",
+                }, children: [figure ? (_jsx("span", { className: "graview-kind-block graview-kind-landmark", "data-graview-opened": props.opened || undefined, "aria-hidden": "true", style: { ["--graview-rise"]: rise }, children: _jsx(KindFigure, { kind: String(kind), schema: schema, ...(brand ? { brand } : {}), size: 96 }) })) : /*
+                     * A KIND WITH NO DRAWING STANDS AS ITS VILLAGE. The anonymous iso
+                     * block — one box for every kind, its population a height nobody
+                     * read — is retired at altitude: the members stand as buildings
+                     * on the plot the scene draws under this card, and the population
+                     * is the size of the cluster.
+                     */
+                        null, _jsxs("div", { className: "graview-kind-face", "data-graview-opened": props.opened || undefined, style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: nested ? 1 : 3,
+                            padding: nested ? "5px 7px" : "7px 10px",
+                            borderRadius: "var(--graview-radius-sm, 9px)",
+                            /*
+                             * PLANE 2 IS A GLYPH. Its own fidelity says so.
+                             *
+                             * These were 190 by 107 holding a name, a number and a mark, and
+                             * the band they sit in took a fifth of the window. A card sized
+                             * for content it does not have is not a map, it is a margin.
+                             */
+                            justifyContent: "center",
+                            position: "relative",
+                            height: "100%",
+                            overflow: "hidden",
+                            boxSizing: "border-box",
+                            border: accent
+                                ? "1px solid var(--graview-accent)"
+                                : tied > 0
+                                    ? "1px solid var(--graview-accent-dim)"
+                                    : `1px solid hsl(${Math.round(hue)} 55% var(--graview-tint-lightness) / 0.34)`,
+                            // The kind you are looking at is brighter and lit, not labelled:
+                            // a ninety-pixel card has no room for a word that says so.
+                            /*
+                             * An OPAQUE face under the tint. A card that was only a wash of
+                             * colour let every connector show through it — a road running
+                             * through a building rather than behind it — and in daylight the
+                             * wash alone read as a pastel sticky note.
+                             */
+                            backgroundColor: "var(--graview-panel)",
+                            backgroundImage: `linear-gradient(hsl(${Math.round(hue)} 55% var(--graview-tint-lightness) / calc(var(--graview-tint-alpha) * ${accent ? 1.1 : secondary ? 0.28 : 0.5})), hsl(${Math.round(hue)} 55% var(--graview-tint-lightness) / calc(var(--graview-tint-alpha) * ${accent ? 1.1 : secondary ? 0.28 : 0.5})))`,
+                            boxShadow: accent ? "0 0 0 1px var(--graview-accent-dim)" : undefined,
+                        }, children: [!nested && members.length > 0 ? (_jsx("div", { "data-graview-tally": members.length, "data-graview-broken": broken || undefined, "aria-hidden": "true", style: {
+                                    // On the card's own edge, out of the flow: a glyph this size
+                                    // has no spare rows, and taking one made the content overflow.
+                                    position: "absolute",
+                                    left: 0,
+                                    right: 0,
+                                    top: 0,
+                                    display: "flex",
+                                    height: 3,
+                                    background: `hsl(${Math.round(hue)} 55% var(--graview-tint-lightness) / 0.4)`,
+                                }, children: broken > 0 ? (_jsx("span", { style: {
+                                        width: `${Math.max(6, Math.round((broken / members.length) * 100))}%`,
+                                        background: "var(--graview-warn)",
+                                    } })) : null })) : null, figure ? (_jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: nested ? 4 : 6 }, children: [_jsx(KindFigure, { kind: String(kind), schema: schema, ...(brand ? { brand } : {}), 
+                                        /*
+                                         * The size the LINE can carry, not the size the card looks
+                                         * like it could: the name beside it sets the row's height, and
+                                         * a drawing taller than that grows the row and puts the card's
+                                         * content over its own edge again — which is what twenty-six
+                                         * did on the shortest card in the strip.
+                                         */
+                                        size: nested ? 14 : 18 }), name] })) : (name), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5, fontSize: "0.875rem" }, children: [_jsx("span", { style: {
+                                            fontVariantNumeric: "tabular-nums",
+                                            color: trouble ? "var(--graview-warn)" : "var(--graview-ink-faint)",
+                                        }, children: members.length === 0 ? "none yet" : `${trouble ? `${flag} ` : ""}${members.length}` }), (props.retired ?? 0) > 0 ? (_jsxs("button", { type: "button", className: "graview-kind-past", "data-graview-retired": props.retired, title: `${props.retired} retired ${plural.toLowerCase()} — press to widen the view to the past`, onClick: (event) => {
+                                            event.stopPropagation();
+                                            go(withPast(view, true));
+                                        }, onDoubleClick: (event) => event.stopPropagation(), onPointerDown: (event) => event.stopPropagation(), children: ["+", props.retired, " past"] })) : null, hits > 0 ? (_jsxs("button", { type: "button", className: "graview-kind-hits", "data-testid": `hits-${String(kind)}`, title: `${hits} ${hits === 1 ? "match" : "matches"} for “${view.q ?? ""}” — press to go in, narrowed`, onClick: (event) => {
+                                            event.stopPropagation();
+                                            // The same descent a double-click on the lit district makes: one transition, not three.
+                                            go(withJackIn(view, kindCardId(String(kind)), { ownPicture: true, ...(view.q ? { carry: view.q } : {}) }));
+                                        }, onDoubleClick: (event) => event.stopPropagation(), onPointerDown: (event) => event.stopPropagation(), children: [hits, " match"] })) : null, tied > 0 ? (_jsxs("span", { style: { fontSize: "0.8125rem", color: "var(--graview-accent)" }, children: [tied, " tied"] })) : null, props.hasOwnView ? (_jsx("span", { title: `${plural} has a view of its own`, "aria-label": "has its own view", style: { fontSize: "0.6875rem", color: "var(--graview-accent)" }, children: "\u25C6" })) : null, !nested && members.length > 0 && !props.focused ? (_jsxs("button", { type: "button", className: "graview-kind-open", "data-testid": `open-${String(kind)}`, "aria-expanded": props.opened ?? false, title: props.opened ? "Close it up" : `See the ${plural} in here`, onClick: (event) => {
+                                            event.stopPropagation();
+                                            toggle(kindCardId(String(kind)));
+                                        }, onDoubleClick: (event) => event.stopPropagation(), onPointerDown: (event) => event.stopPropagation(), children: [_jsx("span", { className: "graview-kind-open-word", children: props.opened ? "close" : "open" }), " ", props.opened ? "▴" : "▾"] })) : null] }), props.opened ? (
+                            /*
+                             * BUILDINGS. An opened neighbourhood lays its members out inside
+                             * its plot as a small grid on the lattice — `side` to a row, the
+                             * plot's own width in cells — rather than a column of chips. Each
+                             * is still a Chip with a pick id, so measuring, ties and the
+                             * keyboard work for free; past `side × side` the rest are counted.
+                             */
+                            _jsxs("div", { className: "graview-kind-members", "data-graview-buildings": props.plot?.side ?? 1, style: {
+                                    display: "grid",
+                                    /*
+                                     * A NAME YOU CAN READ BEATS A GRID THAT MATCHES THE PLOT.
+                                     *
+                                     * The members were laid out `side` to a row so the chips
+                                     * echoed the buildings on the lattice — which at a district's
+                                     * own width meant sixty pixels a chip, and "Enough bodies for
+                                     * the drill" arrived as "Eno…". Opening a district is the
+                                     * gesture that asks WHICH ONE; a row of initials cannot
+                                     * answer it. So the columns are set by what the widest name
+                                     * needs, and a district only wide enough for one keeps one.
+                                     */
+                                    gridTemplateColumns: `repeat(${roster.columns}, minmax(0, 1fr))`,
+                                    gap: 3,
+                                }, children: [members.slice(0, roster.shown).map((member) => {
+                                        /*
+                                         * WHICH ONE. The card's own count already says "⚠ 1" —
+                                         * opening the district to find out which member that is was
+                                         * the whole point of opening it, and every chip came out
+                                         * unmarked. The glyph view marks a flagged node exactly this
+                                         * way; the members inside a district simply never asked.
+                                         */
+                                        const broken = props.flagged?.includes(member.id) ?? false;
+                                        const name = labelOf(definition, member);
+                                        return (_jsx(Chip, { pickId: member.id, label: broken ? `${name} ${flag}` : name, title: broken ? `${name} — implicated in a problem` : undefined, hue: hue, selected: chosen.has(member.id) }, member.id));
+                                    }), members.length > roster.shown ? (_jsxs("span", { style: { fontSize: "0.75rem", color: "var(--graview-ink-faint)", padding: "2px 4px", gridColumn: "1 / -1" }, children: ["+", members.length - roster.shown, " more \u2014 double-click to go in"] })) : null] })) : null] }), !nested && showings.length > 0 ? (_jsx("div", { className: "graview-drive-in", "data-testid": `drive-in-${String(kind)}`, "data-graview-showing": showingNow, onPointerDown: (event) => event.stopPropagation(), onDoubleClick: (event) => event.stopPropagation(), children: _jsx("div", { className: "graview-drive-in-marquee", role: "group", "aria-label": `${plural}: pictures`, "data-graview-thumbs": showings.length === 1 ? "one" : "two", children: showings.map((place) => {
+                                const showing = showingNow === place.as;
+                                const registration = views.resolve(String(kind), { cardinality: "many", fidelity: "full" }, place.as);
+                                const Lens = registration?.view;
+                                return (
+                                /*
+                                 * A FRAME HOLDING A PICTURE AND A BUTTON, not a button
+                                 * holding a picture. The lens drawn small keeps its own
+                                 * controls — a calendar's Previous and Next — and a
+                                 * button inside a button is invalid HTML however inert
+                                 * the inner one is: React said so on every chapter
+                                 * with a calendar. The press lies over the picture, so
+                                 * the whole thumbnail is still one target.
+                                 */
+                                _jsxs("div", { className: "graview-drive-in-thumb", "data-graview-pressed": showing || undefined, children: [_jsx("span", { className: "graview-drive-in-thumb-picture", "aria-hidden": "true", inert: true, children: Lens ? (_jsx("span", { className: "graview-drive-in-thumb-natural", children: _jsx(WhenSeen, { children: _jsx(Picture, { lens: Lens, nodes: thumbnailMembers, label: place.title, budget: THUMBNAIL_BUDGET, total: members.length, ...(props.flagged ? { flagged: props.flagged } : {}) }) }) })) : null }), _jsx("span", { className: "graview-drive-in-thumb-title", "aria-hidden": "true", children: place.title }), _jsx("button", { type: "button", className: "graview-drive-in-thumb-press", "data-testid": `showing-${place.as}`, "aria-label": `${plural}: ${place.title}`, "aria-pressed": showing, title: showing ? `${place.title} is showing` : `Show ${place.title} on the billboard`, onClick: (event) => {
+                                                event.stopPropagation();
+                                                if (showing && props.focused)
+                                                    return;
+                                                go(withWithin(withFocus(withOverview(view, true), aggregateId(String(kind))), "view", place.as));
+                                            } })] }, place.as));
+                            }) }) })) : null] }));
+        };
+        // Marked so the interface can tell a view the app chose from one the
+        // framework fell back to.
+        Group.generic = true;
+        GroupGlyph.generic = true;
+        registry
+            .register(kind, { cardinality: "one", fidelity: "full" }, Full)
+            .register(kind, { cardinality: "one", fidelity: "summary" }, Summary)
+            .register(kind, { cardinality: "one", fidelity: "glyph" }, Glyph)
+            .register(kind, { cardinality: "many", fidelity: "full" }, markDefaultView(Group))
+            .register(kind, { cardinality: "many", fidelity: "summary" }, markDefaultView(Group))
+            .register(kind, { cardinality: "many", fidelity: "glyph" }, markDefaultView(GroupGlyph));
+    }
+    return registry;
+}
+//# sourceMappingURL=default-views.js.map