@nanisoft/prism-ui 0.13.0 → 0.15.0

package/dist/live/tool-ledger-01/tool-ledger.js

@@ -0,0 +1,245 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../../components/ui/button.js';
+import { LiveRegion } from '../../components/ui/live-region.js';
+import { ScrollArea } from '../../components/ui/scroll-area.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The one source of truth for order, so a late call with an earlier `at` sorts
+ * there and two runs of the same suite render the same ledger. Ties break on
+ * `id`, which is the same rule `RunStream01` states for its own events.
+ */
+const byOpened = (a, b) => a.openedAt - b.openedAt || a.call.id.localeCompare(b.call.id);
+/**
+ * The seed a run opens with, already trimmed to the window.
+ *
+ * The trim is here rather than only on the arrival path because a caller who
+ * passes four hundred `callbacks` to a ledger that keeps two hundred has to be
+ * told so on the first paint, and a surface that only counted what it dropped
+ * after it dropped it would print a count of zero over a ledger missing half its
+ * history.
+ */
+function seedOf(calls, limit) {
+    const rows = [...calls].map((call) => ({ call, openedAt: call.at })).sort(byOpened);
+    if (rows.length <= limit)
+        return { rows, dropped: 0 };
+    const dropped = rows.length - limit;
+    return { rows: rows.slice(dropped), dropped };
+}
+/**
+ * The ink each state is stated in, and the tick beside it.
+ *
+ * The tick is the state's own first letter rather than a glyph this file invented,
+ * so there is nothing to translate and nothing to learn twice: `f` is the failed
+ * call in every locale, and it is a letter rather than a shape, so it survives a
+ * monochrome render and a screen at 200 per cent the way a hairline does not.
+ *
+ * `queued` and `cancelled` share the muted ink, and the letters are what tell them
+ * apart. That is the same trade `Status` makes and states: a wider palette on a
+ * surface a reader scans is a wider set of colours they have to learn, and the
+ * cost of a shared ink is one letter.
+ */
+const STATE_INK = {
+    queued: 'text-muted-foreground',
+    running: 'text-foreground',
+    succeeded: 'text-success',
+    failed: 'text-destructive',
+    cancelled: 'text-muted-foreground',
+};
+/** The tick each state draws, so the five are told apart without relying on colour. */
+const STATE_MARK = {
+    queued: 'q',
+    running: 'r',
+    succeeded: 's',
+    failed: 'f',
+    cancelled: 'c',
+};
+/** The clock a row reads, in UTC, because the surface holds no locale to format in. */
+const clockOf = (at) => new Date(at).toISOString().slice(11, 19);
+/** One call merged into the ledger, and what fell off the top doing it. */
+function merge(rows, call, limit) {
+    const at = rows.findIndex((row) => row.call.id === call.id);
+    const next = at === -1
+        ? [...rows, { call, openedAt: call.at }].sort(byOpened)
+        : rows.map((row, index) => (index === at ? { call, openedAt: row.openedAt } : row));
+    if (next.length <= limit)
+        return { rows: next, dropped: 0 };
+    const dropped = next.length - limit;
+    return { rows: next.slice(dropped), dropped };
+}
+/**
+ * The tool-call ledger of a run in flight: what was called, what it returned, and
+ * what it cost, as it arrives.
+ *
+ * **The surface opens no connection, and that is the whole boundary.** There is no
+ * socket in this file, no endpoint, no retry policy, no backoff, no heartbeat and
+ * no persistence, and there is no provider to mount. `subscribe` is a function the
+ * consumer supplies and a function it tears down, which is what makes a WebSocket,
+ * an `EventSource`, a polling timer, a server-sent stream and a test's own array
+ * all the same shape to this surface: nothing here knows which one it got. A
+ * consumer that already has a connection passes it in, and a consumer that does
+ * not has not acquired a client runtime by importing this.
+ *
+ * **It is the second of the two surfaces Prism owns for a run, and the two are
+ * separate because a reader debugging a run wants them at different times and in
+ * different shapes.** `RunStream01` says what happened in words: an ordered log of
+ * events, each one a sentence the caller wrote, which is what a reader reads to
+ * follow what an agent is doing. This one says what was called and what it cost in
+ * structure: a name, a state, an elapsed figure, the arguments, the return value
+ * or the error, keyed and ordered so two calls can be compared. Those are not two
+ * renderings of one thing, because the word log answers "what did it say" and the
+ * word ledger answers "what did it spend". A reader watching a run wants the
+ * first; a reader with a bill, a latency regression or a bill from a provider
+ * wants the second. Folding them into one surface would give a reader a table and
+ * a narrative fighting over one scroll, each of them half as good at the job the
+ * other was for, and a single surface is a single surface a consumer can only
+ * take or leave.
+ *
+ * **It times nothing, measures nothing, and does not decide that a call
+ * succeeded.** `at` is the consumer's timestamp and `durationLabel` is the
+ * consumer's sentence, and the surface never starts a clock, never reads
+ * `Date.now()` and never infers a duration from the gap between one call and the
+ * next. That gap is a real number and it is not a duration: it is how long the
+ * consumer's transport took to deliver two consecutive events, which is a fact
+ * about the transport, and a ledger that printed it in a column headed "took"
+ * would be reporting a figure nobody produced. The only subtraction here is
+ * between two sightings of the *same* `id`, both of which are the consumer's own
+ * `at` values, and even that is drawn only when the second sighting is later than
+ * the first: a call seen once has no second timestamp, and a zero would be a
+ * claim that a call took no time. For the same reason the surface does not decide
+ * a call succeeded. It draws the state it was sent, in the ink that state is drawn
+ * in, and a consumer whose transport reports `succeeded` for a call that raised is
+ * a consumer with a bug in their transport that this surface cannot see and should
+ * not paper over. The cost of all of that is named: a caller who wants a duration
+ * they did not measure passes `durationLabel` and gets one, and a caller who
+ * wants the surface to measure has the wrong surface.
+ *
+ * **A row is keyed on `id` and never on its index, and the reason is a screen
+ * reader told something twice.** A ledger that grows at the top re-keys every row
+ * below it when the index of each one moves, and React's reconciliation then
+ * replaces those rows rather than moving them. A replaced node is a new node to
+ * assistive technology, so a call the reader had already reached is announced
+ * again as though it had just happened, once per arrival, in a surface whose whole
+ * job is to report arrivals. Keying on `id` means an existing row is the same row
+ * however far it has moved, which is also why a re-reported call updates its own
+ * row in place instead of adding a second one: the same id is the same call.
+ *
+ * **`limit` drops the oldest and says how many, because a run with four hundred
+ * tool calls is a log and not a table.** A ledger is a bounded set of rows a
+ * reader scans and compares; a log is a sequence a reader searches. A run that
+ * calls a tool four hundred times is normal rather than exceptional, and a ledger
+ * that kept every call would put four hundred rows in front of a reader who wants
+ * the last ten, in a `<ol>` inside a scroll region, at a moment when the run is
+ * still going and the rows at the bottom are the ones that explain it. So the
+ * oldest fall off the top, the direction a reader wants, and the count of what
+ * fell is drawn rather than inferred: a bounded list that does not say it is
+ * bounded reads as the whole thing, and a reader who believes a ledger is
+ * complete and is not will draw the wrong conclusion from it. The dropped calls
+ * are not lost to the consumer, who has the transport and the run; they are lost
+ * to this surface's window, and the count is how big that window's blind spot is.
+ *
+ * **A paused ledger stops recording, and it does not stop the run.** While paused,
+ * a call that arrives is dropped rather than queued, and the announcement is not
+ * made. Queuing is the alternative and it is worse in both directions: a queue
+ * that grows is a list whose contents the surface cannot show, and a queue that
+ * flushes on resume dumps a hundred rows at once, which is a worse thing to happen
+ * to a reader who pressed pause in order to read. The calls that happened are the
+ * consumer's, and the way to get them back into this surface is a new
+ * `resubscribeKey` with `callbacks` reseeded from the consumer's own record. What
+ * a pause does not do is close the subscription, because the connection is the
+ * consumer's and they may be sharing it with a `RunStream01` beside it.
+ *
+ * **It draws no heading.** This surface takes `label` and no `title`, because it is
+ * the thing a consumer reaches for inside a region they have already named, and a
+ * surface that named itself would either duplicate the caller's heading or push
+ * them to omit theirs. `label` names the region for assistive technology, which is
+ * a different job from a visible heading, and it is the same split `ScrollArea`
+ * already makes.
+ *
+ * It draws a heading nowhere and it animates nowhere. There is no entrance, no
+ * attention loop and no motion on an arriving row, because the reader was not
+ * waiting for a row to arrive and the motion law refuses decoration outright; the
+ * fact that something changed is reported by the polite region in it, which is the
+ * one channel in this package built for exactly that.
+ */
+export function ToolLedger01({ subscribe, callbacks, resubscribeKey, label, empty, limit = 200, droppedLabel, pauseControl, pauseLabel, resumeLabel, paused, className, }) {
+    const [newest, setNewest] = useState(undefined);
+    const [run, setRun] = useState(() => ({
+        key: resubscribeKey,
+        ...seedOf(callbacks ?? [], limit),
+    }));
+    /*
+     * Adjusting state during render when the key changes is React's documented
+     * pattern for "a prop changed, start over", and it is the right one here for the
+     * reason `RunStream01` gives: an effect that clears the ledger runs *after* a
+     * render, so the surface would paint one frame holding the previous run's calls
+     * under the new run's subscription.
+     */
+    if (run.key !== resubscribeKey) {
+        setRun({ key: resubscribeKey, ...seedOf(callbacks ?? [], limit) });
+        // The announcement is cleared with the ledger it announced, so a run switch does
+        // not leave the previous run's last call in the live region saying so.
+        setNewest(undefined);
+    }
+    const rows = run.rows;
+    /**
+     * Whether this surface is holding still, kept in a ref as well as in state.
+     *
+     * The ref is what the arrival path reads, and it is why the subscription effect
+     * does not list the pause among its dependencies: an effect that depended on the
+     * pause would tear the consumer's connection down and open a new one every time
+     * a reader pressed the control, and a consumer who shares one socket between this
+     * surface and a `RunStream01` would see it reconnect under them. The button
+     * writes both, so the value the effect reads is the value the reader set.
+     */
+    const [held, setHeldState] = useState(paused === true);
+    const heldRef = useRef(held);
+    const setHeld = (next) => {
+        heldRef.current = next;
+        setHeldState(next);
+    };
+    /*
+     * A ref rather than state, so the effect does not re-subscribe because a call
+     * arrived. An effect that depended on the value it writes re-runs itself, and the
+     * surface would open a new subscription per call.
+     */
+    const emit = useRef(() => { });
+    useEffect(() => {
+        emit.current = (call) => {
+            // Read through the ref, so a paused surface decides without re-subscribing.
+            if (heldRef.current)
+                return;
+            setRun((current) => {
+                const added = merge(current.rows, call, limit);
+                return {
+                    ...current,
+                    rows: added.rows,
+                    dropped: current.dropped + added.dropped,
+                };
+            });
+            setNewest(call.name);
+        };
+        const stop = subscribe(emit.current);
+        return () => {
+            // Calling an unsubscribe the consumer did not return would throw during
+            // unmount, so a missing one is stepped over and the leak is the consumer's to
+            // fix rather than a crash in someone else's teardown.
+            if (typeof stop === 'function')
+                stop();
+        };
+    }, [subscribe, resubscribeKey, limit]);
+    return (_jsxs("section", { "data-slot": "tool-ledger", className: cn('border-border flex flex-col gap-4 rounded-lg border p-4', className), children: [LiveRegion({ politeness: 'polite', children: newest }), droppedLabel === undefined && pauseControl !== true ? null : (_jsxs("div", { "data-slot": "tool-ledger-bar", className: "flex flex-wrap items-center gap-3", children: [run.dropped > 0 && droppedLabel !== undefined ? (_jsx("p", { "data-slot": "tool-ledger-dropped", className: "text-muted-foreground text-xs", children: droppedLabel(run.dropped) })) : null, pauseControl !== true ? null : (_jsx(Button, { "data-slot": "tool-ledger-pause", type: "button", variant: "outline", size: "sm", "aria-pressed": held, className: "ml-auto", onClick: () => setHeld(!heldRef.current), children: held ? resumeLabel : pauseLabel }))] })), rows.length === 0 ? (_jsx("p", { "data-slot": "tool-ledger-empty", className: "text-muted-foreground text-sm", children: empty })) : (_jsx(ScrollArea, { label: label, className: "max-h-96", children: _jsx("ol", { "data-slot": "tool-ledger-calls", className: "flex flex-col", children: rows.map((row) => {
+                        const { call } = row;
+                        // The difference between two sightings of the same call, and only when
+                        // there are two. The sentence is the consumer's, the arithmetic is one
+                        // subtraction of the consumer's own timestamps, and there is no clock
+                        // in this file.
+                        const elapsed = call.at - row.openedAt;
+                        const duration = elapsed > 0 && call.durationLabel !== undefined
+                            ? call.durationLabel(elapsed, { id: call.id, name: call.name })
+                            : null;
+                        return (_jsxs("li", { "data-slot": "tool-ledger-call", "data-state": call.state, className: "border-border flex flex-col gap-1 border-b py-3 last:border-b-0", children: [_jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [_jsx("span", { "aria-hidden": "true", className: cn('font-mono text-xs', STATE_INK[call.state]), children: STATE_MARK[call.state] }), _jsx("time", { dateTime: new Date(row.openedAt).toISOString(), className: "text-muted-foreground font-mono text-xs tabular-nums", children: clockOf(row.openedAt) }), _jsx("span", { className: "text-foreground text-sm font-medium", children: call.name }), call.spanLabel ? (_jsx("span", { "data-slot": "tool-ledger-span", className: "border-border text-muted-foreground rounded border px-1 font-mono text-xs", children: call.spanLabel })) : null, duration === null ? null : (_jsx("span", { "data-slot": "tool-ledger-duration", className: "text-muted-foreground ml-auto font-mono text-xs tabular-nums", children: duration }))] }), call.argumentsText === undefined ? null : (_jsx("span", { "data-slot": "tool-ledger-arguments", className: "text-muted-foreground font-mono text-xs break-words", children: call.argumentsText })), call.resultText === undefined ? null : (_jsx("span", { "data-slot": "tool-ledger-result", className: "text-muted-foreground text-pretty text-xs", children: call.resultText })), call.errorText === undefined ? null : (_jsx("span", { "data-slot": "tool-ledger-error", className: "text-destructive text-pretty text-xs", children: call.errorText })), call.link === undefined ? null : (_jsx("a", { "data-slot": "tool-ledger-link", href: call.link.href, className: "text-foreground self-start rounded-sm text-xs underline-offset-4 hover:underline", children: call.link.label }))] }, call.id));
+                    }) }) }))] }));
+}
+export default ToolLedger01;

package/dist/pages/about-page/index.d.ts

@@ -0,0 +1,306 @@
+import type { ReactNode } from 'react';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * One principle the company holds itself to: a short name and a sentence saying
+ * what holding to it means in practice.
+ *
+ * Declared here rather than taken from `about-01`, following the note
+ * `About01` makes about `hero-01`: a page's principle and a band's principle are
+ * two surfaces a consumer composes separately, and a consumer that reaches for
+ * one while building the other should not have to import the other's type. The
+ * shapes are identical and the duplication is the cost, and the cost is small
+ * because both are three fields and a key.
+ */
+export type AboutPagePrinciple = {
+    /** A stable key, and not the name: a rename in the copy is not a rename in a key. */
+    id: string;
+    /**
+     * The principle's own name.
+     *
+     * A string because a principles grid is scanned down its left edge, and a name
+     * that wraps to two lines costs every other tile its alignment. The sentence
+     * under it is the part a consumer wants to mark up, and that is a node.
+     */
+    title: string;
+    /** What holding to this one means, in practice. */
+    body: ReactNode;
+};
+/**
+ * One moment in the company's history: when it happened, what it was called, what
+ * changed, and optionally a figure of the time.
+ *
+ * `at` is a string rather than a `Date` and Prism formats no date: `2024`,
+ * `Q3 2024` and `Winter 2024` are all honest readings, and the reading a reader
+ * in a particular locale and script should see is the caller's to compose with
+ * `RelativeTime` or with the platform's own `Intl`.
+ *
+ * `body` is optional here and required on the rail, which is a boundary and not an
+ * oversight: a milestone that is a date and a name is a legitimate row, and the
+ * Page hands the rail an empty node for the paragraph rather than dropping the
+ * milestone, because a history with a hole in it is worse than a milestone with
+ * one sentence fewer.
+ */
+export type AboutPageMilestone = {
+    /** A stable key for the milestone. */
+    id: string;
+    /** When it happened, already written the way a reader should see it. */
+    at: string;
+    /** What the milestone was called at the time. */
+    title: string;
+    /** What changed, in the reader's terms rather than the company's. */
+    body?: ReactNode;
+    /** A figure of the time, composed by the caller. */
+    media?: ReactNode;
+    /** The caption for `media`. Separate from `media` because a figure that needs none is real. */
+    mediaLabel?: string;
+};
+/**
+ * One person, as a team grid shows them: a name, a role, and whatever else the
+ * consumer publishes about them.
+ *
+ * All four of the optional fields are optional because each absence is a fact
+ * about what the consumer publishes rather than a state this Page has to render
+ * around: a portrait may be absent, a biography may be absent, a destination may
+ * be absent.
+ */
+export type AboutPagePerson = {
+    /** A stable key for the cell, carried on the markup so a test can name one person. */
+    id: string;
+    /** The person's own name, as they publish it, and the source of the portrait's initials. */
+    name: string;
+    /**
+     * What they do, in the words the consumer uses.
+     *
+     * Required because a portrait and a name with no role says who someone is and
+     * not what they are for, which on a team page is the only reason the person is
+     * in it.
+     */
+    role: string;
+    /** A sentence or two about the person, set at the reading measure and never cut short. */
+    bio?: ReactNode;
+    /**
+     * The portrait, with the name the initials come from.
+     *
+     * A name rather than a string, because a portrait with no fallback is an empty
+     * circle for as long as the image takes to arrive and for ever if it never does.
+     */
+    avatar?: {
+        /** The photograph. Omit it, or pass a URL that fails, for the initials. */
+        src?: string;
+        /** The person's name, which is the initials' source. */
+        name: string;
+    };
+    /** Where the person goes. A native anchor, and it makes the whole cell the destination. */
+    href?: string;
+    /** The words naming the destination. Required whenever `href` is, and enforced below. */
+    hrefLabel?: string;
+};
+/**
+ * One engagement or capability: what it is called, what the work is, what the
+ * reader gets, and what it is for.
+ *
+ * `deliverables` is a `readonly string[]` rather than a node because a
+ * deliverables list is a set of short noun phrases a reader checks off against
+ * their own situation, and one paragraph in a five item list is a list the reader
+ * stops scanning.
+ */
+export type AboutPageService = {
+    /** A stable key for the engagement. */
+    id: string;
+    /** What the engagement is called. */
+    title: string;
+    /** What the work is, in a few sentences. */
+    body: ReactNode;
+    /** What the reader gets, as short noun phrases, in the order it arrives. */
+    deliverables?: readonly string[];
+    /** What it is for, stated as an effect rather than as a feature. */
+    outcome?: ReactNode;
+    /** Where the engagement's own page is. Its presence makes the card carry a link. */
+    href?: string;
+    /** The words on the link. Required whenever `href` is, and enforced below. */
+    hrefLabel?: string;
+};
+/**
+ * The closing band: a heading, a supporting line, and at most one way on.
+ *
+ * `cta` is optional because a closing band that asks for nothing is a real
+ * arrangement, and `Cta01`'s own JSDoc gives the same reason for the same prop. A
+ * band that wants two destinations is a page a consumer composes.
+ */
+export type AboutPageContact = {
+    /** The band's heading. */
+    title: ReactNode;
+    /** One or two sentences under the heading. */
+    description?: ReactNode;
+    /** The one way on, as a native anchor with a destination. */
+    cta?: {
+        /** The words on the link. */
+        label: string;
+        /** Where it goes. */
+        href: string;
+    };
+};
+/**
+ * The props an AboutPage takes.
+ *
+ * Every string, every date and every destination is a prop and the Page ships
+ * none of them. An about page is the page a consumer is most tempted to fill with
+ * somebody else's sentences, because it is the page where a company talks about
+ * itself, and a Page that held any of it would put one company's history, one
+ * company's staff and one company's promises into every product that installs it.
+ */
+export type AboutPageProps = {
+    /** Optional label above the page's own heading. See the No-Default-Eyebrow Rule. */
+    eyebrow?: string;
+    /**
+     * The page's heading.
+     *
+     * Required, and it is the page's `h1`, which is why it is the first thing the
+     * Page hands to the first band rather than a title it draws above it. See the
+     * Page's JSDoc for the whole of that argument.
+     */
+    title: ReactNode;
+    /**
+     * One or two sentences under the heading, for the part the heading cannot carry.
+     *
+     * A node rather than a string, because the supporting paragraph of an about
+     * band is the one place on a marketing page a consumer wants authored prose
+     * with a link in it, and a string would force them to drop the markup.
+     */
+    description?: ReactNode;
+    /**
+     * The one big sentence: what this is, in the present tense, for the reader.
+     *
+     * Required, and it is the band. A page with a heading, a paragraph and a set of
+     * principles but no statement is a hero without its actions, and a hero is a
+     * claim about a product a reader has not decided anything about yet.
+     */
+    statement: ReactNode;
+    /**
+     * The principles, in the order a reader should meet them.
+     *
+     * Required, and `readonly` because the normal way a consumer writes one of these
+     * is an `as const` fixture, and a prop typed as a mutable array rejects that
+     * fixture at the one moment a consumer is copying it out of a file.
+     */
+    principles: readonly AboutPagePrinciple[];
+    /**
+     * The milestones, in the order they happened. Omit them for a company with no
+     * history worth publishing, and the order of the rest of the page is unchanged.
+     */
+    milestones?: readonly AboutPageMilestone[];
+    /** The people, in the order a reader should meet them. Omit them and the band is not there. */
+    people?: readonly AboutPagePerson[];
+    /** The engagements, in the order a reader should meet them. Omit them and the band is not there. */
+    services?: readonly AboutPageService[];
+    /** The closing band. Omit it and the page ends on the last band that was given. */
+    contact?: AboutPageContact;
+    /**
+     * The heading level for the page's own heading, and one step below it for every
+     * band.
+     *
+     * Defaults to `h1`, because a page owns the top of the document outline. A
+     * consumer embedding the page under a heading it already owns passes one level
+     * deeper and the whole outline follows.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Layout only, exactly as on every Component. Changing a Prism-owned visual
+     * property from here is prohibited.
+     */
+    className?: string;
+};
+/**
+ * A complete about screen, in the order a reader arrives with its questions.
+ *
+ * **The decision this Page makes is the order, and the order is the whole of what
+ * it is.** Five bands, in this sequence: what this is, how it got here, who is
+ * here, what it does, and how to reach it. Each is a question a reader actually
+ * arrives with rather than a section a template happens to contain, and the
+ * sequence is the one those questions are asked in. A reader who opens an about
+ * page does not want the history first, because the history is only legible once
+ * they know what the thing is; they do not want the team before the story, because
+ * a name with no history behind it is a logo; and they do not want the services
+ * before the people, because a list of capabilities with nobody attached to it is
+ * a brochure. So: the statement, then the rail, then the faces, then the
+ * engagements, then the way on.
+ *
+ * **The order costs something, and the cost is the point of stating it.** A
+ * consumer whose story belongs after the team, which is a real and defensible
+ * arrangement for a company whose people are the argument, cannot reorder this
+ * page; the honest answer is that it composes two Pages, one holding the people
+ * and one holding the story, and the seam between them is two page vertical
+ * rhythms where the author wanted one. That is the correct price of an opinionated
+ * order. The alternative was a `order` prop, or a slots array, and either would
+ * have moved the decision from this file to the call site, which is to say it would
+ * have stopped being a Page and become a container for five Blocks with a layout
+ * the consumer has to get right themselves. An order the Page does not own is an
+ * order every consumer gets wrong differently.
+ *
+ * **What the Page refuses is which bands appear.** It decides the sequence and
+ * nothing else. `milestones`, `people`, `services` and `contact` are all optional
+ * and their absence removes a band without moving any other, so a product with no
+ * story to tell omits `milestones` and reads the same four questions in the same
+ * order. The Page holds no opinion about how many of the five a reader needs, and
+ * that is the same refusal `PageHeader01` and `Changelog01` state: the structure
+ * is read from the data rather than imposed on it.
+ *
+ * **The `h1` is the about band's own section heading, and that is a decision worth
+ * a paragraph.** The alternative is a title the Page draws above the first band,
+ * and it was rejected for two reasons. The first is duplication: the about band
+ * opens with a title, and a title the Page drew above it would be the same words
+ * twice within one screen. The second is that a Page that draws its own heading
+ * band has to decide where the bands start below it, and the answer is always a
+ * second `Section` of vertical rhythm between the heading and the first thing the
+ * heading is about, which on a page that already opens with a statement reads as
+ * an empty band. Handing the caller's title to the first band puts the page
+ * heading where the page's argument is, gives the page exactly one `h1` without
+ * the Page having to police that, and lets `About01` hold the heading left, which
+ * is the alignment `SectionHeading` requires of anything with content under it.
+ *
+ * **The bands after the first are untitled, and the outline that follows is
+ * deliberate.** Every Block below the about band is composed at the page's own
+ * heading level, so the principles, the milestones, the people and the engagements
+ * are all one step below the page heading and each band's items sit at that same
+ * level. The alternative was a section title per band, and that is a set of props
+ * whose every value is a section heading this Page would then own, which is a Page
+ * whose interface is a form rather than a screen. What the reader gets instead is
+ * a document they can navigate by heading: the page name, then every titled thing
+ * on the page, which is what a reader jumping to "the person who does X" or "the
+ * milestone where we shipped Y" is actually looking for. The cost is that no band
+ * announces itself, and a consumer who wants titled sections composes
+ * `SectionHeading` above the bands itself, where the words are the consumer's.
+ *
+ * **The closing band is a heading and a link, and it is not `Contact01`.** That
+ * Block is a form, its `onSubmit` is a function, and a function cannot cross from a
+ * server Component to a client Component, so a Page that composed it would have to
+ * be a client Component itself and every datum on this screen would then have to
+ * be serialised across that boundary to reach a band four sections down. The
+ * rejected alternative was a `form` slot, and it was refused for the same reason
+ * every other slot on this Page is a node rather than a callback: a Page is a
+ * screen model and a screen model describes a screen, it does not act on one.
+ * A consumer that wants a contact form on its about page composes `Contact01`
+ * beside this Page, which is where the form and the handler that owns it live.
+ *
+ * **The link arms are checked before anything is drawn.** A person or an
+ * engagement with an `href` and no `hrefLabel` would render a link announced by
+ * its address, which is punctuation rather than a name, and the cost of finding
+ * that out from a screen reader is a reader who cannot follow it. The Page throws
+ * rather than degrade, for the reason `Team01`, `ContentGrid01` and `Changelog01`
+ * each state for their own link: a defect that is invisible in a screenshot is not
+ * a defect a design system can afford to ship quietly.
+ *
+ * **The collections are copied rather than forwarded, and that is a boundary with
+ * `About01`, `Story01` and `Services01`.** Those Blocks declare mutable lists and
+ * this Page declares `readonly` ones, so each list is handed over as a fresh
+ * array. The cost is one allocation per band and the reason is a fixture: an
+ * `as const` array is how a consumer writes data they did not type by hand, and a
+ * mutable prop rejects it at the moment it is most useful.
+ *
+ * It is a server Component. It fetches nothing, it holds no state, it takes no
+ * function prop and it imports no router, so a consumer renders it from whichever
+ * route their framework names for the about page.
+ */
+export declare function AboutPage({ eyebrow, title, description, statement, principles, milestones, people, services, contact, headingLevel, className, }: AboutPageProps): import("react").JSX.Element;
+export default AboutPage;
+//# sourceMappingURL=index.d.ts.map

package/dist/pages/about-page/index.d.ts.map

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