@nanisoft/prism-ui 0.13.0 → 0.15.0

package/dist/pages/contact-page/index.js

@@ -0,0 +1,136 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Contact01, } from '../../blocks/contact-01/index.js';
+import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card.js';
+import { CtaLink } from '../../components/ui/cta-link.js';
+import { Section, SectionHeading, childLevel } from '../../components/ui/section.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * One declared field as `Contact01` draws it, with the two shapes kept apart.
+ *
+ * `Contact01` declares a union whose select arm requires `options`, and this Page's
+ * prop is flat on purpose, so the union is built here once and the flat pair is
+ * checked above before this runs. The alternative was forwarding the flat record
+ * and letting the Block's own diagnostic fire three frames down, which names the
+ * Block rather than the prop the caller passed.
+ */
+function asContactField(field) {
+    const shared = {
+        id: field.id,
+        label: field.label,
+        required: field.required,
+        description: field.description,
+        placeholder: field.placeholder,
+        autoComplete: field.autoComplete,
+    };
+    if (field.type !== 'select')
+        return { ...shared, type: field.type };
+    const options = field.options ?? [];
+    if (options.length === 0) {
+        throw new Error(`ContactPage: the field "${field.id}" is a select and passes no options, so the control would render with ` +
+            'nothing in it, which is a question no reader can answer and looks answered only because the control is ' +
+            'there and focusable. Pass the choices, or declare the field as a text field and check the answer in ' +
+            'your own handler.');
+    }
+    return { ...shared, type: 'select', options: options.map((option) => ({ ...option })) };
+}
+/**
+ * The two checks the office union makes for a TypeScript caller, run here for the
+ * JavaScript one and for the value that came out of a build step with the type's
+ * guarantee already gone.
+ *
+ * Both are about a card that would say less than it appears to. An office with no
+ * postal lines is a card that asserts a place exists and does not say where, and a
+ * map link with no words is a control announced as a coordinate.
+ */
+function assertOffices(offices) {
+    for (const office of offices ?? []) {
+        if (office.lines.length === 0) {
+            throw new Error(`ContactPage: the office "${office.id}" declares no postal lines, so the card would name a place and say ` +
+                'nothing about where it is. Pass the lines a reader would write on an envelope, or drop the office and ' +
+                'let the form carry the enquiry.');
+        }
+        if (office.mapHref !== undefined && (!office.mapLabel || office.mapLabel.trim() === '')) {
+            throw new Error(`ContactPage: the office "${office.id}" carries a map link with no mapLabel, so the control would be ` +
+                'announced by its destination, which is punctuation rather than a name. Pass the words that say what ' +
+                'the link does, or drop it.');
+        }
+    }
+}
+/**
+ * A complete contact screen: the page heading, the form the caller declares, the
+ * places a reader can reach a person, and the questions they should not have to ask
+ * to find this screen.
+ *
+ * **The offices are the part that makes this a Page rather than a `Contact01`, and
+ * it is worth saying what that Block cannot do.** A contact Block is a band: one
+ * form, in one column, with the caller's fields. A contact screen is the band, the
+ * places, and the questions, and the two extras are what a reader actually arrives
+ * with, because a reader who wants to write has a fallback and a reader who has run
+ * out of patience has a map. `Contact01` has an `address` arm and this Page does not
+ * use it, for three reasons that all point the same way: that arm holds exactly one
+ * postal address where a business has as many as it has regions; it has no field for
+ * a name for the place, so three cities are three unlabelled blocks of lines; and
+ * its link arm is a `mailto`, which is the wrong link for a place that is not
+ * reachable by post. A consumer whose only address is one postal address beside one
+ * form should compose `Contact01` with that arm, which is the better arrangement
+ * for one address, and the cost here is the other thing: the offices are a band
+ * under the form rather than a column beside it, because a Block that draws its own
+ * `Section` cannot be dropped into a grid column without the page's vertical rhythm
+ * doubling, which is the same reason `dashboard-page` stacks its bands rather than
+ * setting two of them side by side.
+ *
+ * **The offices are facts and not controls, and the type is what holds that.** A
+ * postal line is a string a reader copies. `detail` is a node, because the honest
+ * thing under a place is sometimes a sentence and sometimes a small table of
+ * opening hours, and a string would force one of those to be flattened. The only
+ * link a card may carry is the caller's own map link, and it carries words, and the
+ * union is what makes those words required. A screen that turned its regions into
+ * navigation would be telling a reader that a place is a topic they can read about,
+ * and the only topic any of them has is how to get there.
+ *
+ * **The page heading and the form band are two headings and not one sentence twice.**
+ * The rejected alternative was handing `title` to the form and letting the Block's
+ * section heading be the page's `h1`, which is what `onboarding-page` does and what
+ * it can do because its first band is the whole screen. Here the first band is a
+ * form with a name of its own, and a screen whose page heading was "Talk to us" and
+ * whose form heading was also "Talk to us" would be a page with one heading drawn
+ * twice and a reader navigating by heading who met the form rather than the page.
+ *
+ * **The status is `Contact01`'s, and the refusal to invent one is the whole of this
+ * Page's copy law.** There is no success sentence anywhere in this file, no `sent`
+ * flag written by this package, and no "we will reply within a day". A contact
+ * request can be delivered, held by a filter, filed by a bot, refused as a duplicate
+ * and answered, and one sentence cannot be true of all five, so the caller owns the
+ * promise and writes the words. The cost is that a consumer who installs this screen
+ * has to write a sentence they will get wrong once.
+ *
+ * **It is a client Component, and the reason is `onSubmit`.** A handler is a
+ * function, a function is a piece of state, and a function cannot cross from a
+ * server Component to a client Component, so a server Page that took one would hand
+ * a caller a form that gathers a person's name, an address and a message and then
+ * calls nothing. `Contact01` is a client module for the same reason and the Page
+ * cannot be a server module in front of it. The cost is stated rather than hidden:
+ * every datum on this screen is serialised across the boundary to reach a band three
+ * elements down, and the rejected alternative was a form slot, which would have
+ * been a Page that owns a heading, a row of addresses and nothing a reader could
+ * submit.
+ */
+export function ContactPage({ eyebrow, title, description, form, fields, onSubmit, submitLabel, consent, status, offices, officesLabel, footer, headingLevel = 'h1', className, }) {
+    assertOffices(offices);
+    /*
+      The band heading is one step below the page heading and an office's name is one
+      step below that, which is what `childLevel` is for: a hardcoded level in each
+      would be right exactly once.
+    */
+    const BandHeading = childLevel(headingLevel);
+    const OfficeHeading = childLevel(BandHeading);
+    return (_jsxs("div", { "data-slot": "contact-page", className: cn(className), children: [_jsx(Section, { "data-slot": "contact-page-heading", children: _jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description }) }), _jsx(Contact01, { title: form.title, description: form.description, fields: fields.map(asContactField), onSubmit: onSubmit, submitLabel: submitLabel, consent: consent, status: status, variant: "stacked", headingLevel: BandHeading }), offices === undefined ? null : (_jsxs(Section, { "data-slot": "contact-page-offices", children: [_jsx(SectionHeading, { as: BandHeading, align: "left", title: officesLabel, className: "mb-10" }), _jsx("div", { "data-slot": "contact-page-office-row", className: "grid items-start gap-6 md:grid-cols-2 lg:grid-cols-3", children: offices.map((office) => (_jsxs(Card, { "data-slot": "contact-page-office", "data-office": office.id, className: "h-full", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { as: OfficeHeading, children: office.name }) }), _jsxs(CardContent, { className: "flex flex-col items-start gap-4", children: [_jsx("address", { "data-slot": "contact-page-office-address", className: "text-muted-foreground flex flex-col gap-1 not-italic text-sm", children: office.lines.map((line, index) => (
+                                            /*
+                                              Positional, because a postal line is display content and a
+                                              business with two branches on one street can legitimately
+                                              print the same line twice.
+                                            */
+                                            _jsx("span", { children: line }, `${office.id}-${index}`))) }), office.detail === undefined ? null : (_jsx("div", { "data-slot": "contact-page-office-detail", className: "text-pretty text-sm", children: office.detail })), office.mapHref === undefined ? null : (_jsx(CtaLink, { "data-slot": "contact-page-office-map", href: office.mapHref, variant: "ghost", size: "sm", children: office.mapLabel }))] })] }, office.id))) })] })), footer === undefined ? null : (_jsx("div", { "data-slot": "contact-page-footer", children: footer }))] }));
+}
+export default ContactPage;

package/dist/pages/docs-shell/docs-shell.d.ts

@@ -267,6 +267,14 @@ export type DocsShellProps = {
  * twenty-seven-page tree are both a full screen and neither is a page-long
  * sidebar.
  *
+ * **The frame is three columns from `lg`, and the third is the consumer's to
+ * fill.** The rail is 15rem, the document takes the rest, and the contents rail
+ * is 13rem. The third track exists only when `toc` is passed, because the
+ * document takes the second track by auto-placement and a template that named a
+ * track no child occupies would leave the document in the 15rem one. Below `lg`
+ * the frame is a single column with both rails hidden, which is the arrangement
+ * a phone gets.
+ *
  * It is a Page rather than a Block because it is a whole screen and it is the
  * screen a content pipeline targets: a route that reads one document and hands
  * it the page tree, the outline and the current address. A Block would be the

package/dist/pages/docs-shell/docs-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"docs-shell.d.ts","sourceRoot":"","sources":["../../../src/pages/docs-shell/docs-shell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,kFAAkF;IAClF,KAAK,EAAE,MAAM,CAAA;IACb,4EAA4E;IAC5E,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,OAAO,CAAA;IACb,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,0EAA0E;IAC1E,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;CAC/B,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,SAAS,CAAA;IACf,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,YAAY,GAAG,cAAc,CAAA;AAEtE;;;;;;;GAOG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,gDAAgD;IAChD,QAAQ,EAAE,MAAM,CAAA;IAChB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;OAIG;IACH,GAAG,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;IAC7B;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;IAC7B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,WAAW,EAAE,eAAe,CAAA;IAC5B;;;;;OAKG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,GAAG,EACH,GAAG,EACH,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,WAAW,EACX,MAAM,EACN,MAAM,EACN,SAAS,EACT,QAAQ,GACT,EAAE,cAAc,+BAsFhB;AAwWD,eAAe,SAAS,CAAA"}
+{"version":3,"file":"docs-shell.d.ts","sourceRoot":"","sources":["../../../src/pages/docs-shell/docs-shell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,kFAAkF;IAClF,KAAK,EAAE,MAAM,CAAA;IACb,4EAA4E;IAC5E,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,OAAO,CAAA;IACb,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,0EAA0E;IAC1E,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;CAC/B,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,SAAS,CAAA;IACf,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,YAAY,GAAG,cAAc,CAAA;AAEtE;;;;;;;GAOG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,gDAAgD;IAChD,QAAQ,EAAE,MAAM,CAAA;IAChB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;OAIG;IACH,GAAG,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;IAC7B;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;IAC7B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,WAAW,EAAE,eAAe,CAAA;IAC5B;;;;;OAKG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,GAAG,EACH,GAAG,EACH,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,WAAW,EACX,MAAM,EACN,MAAM,EACN,SAAS,EACT,QAAQ,GACT,EAAE,cAAc,+BA+FhB;AAwWD,eAAe,SAAS,CAAA"}

package/dist/pages/docs-shell/docs-shell.js

@@ -67,6 +67,14 @@ import { cn } from '../../lib/utils.js';
  * twenty-seven-page tree are both a full screen and neither is a page-long
  * sidebar.
  *
+ * **The frame is three columns from `lg`, and the third is the consumer's to
+ * fill.** The rail is 15rem, the document takes the rest, and the contents rail
+ * is 13rem. The third track exists only when `toc` is passed, because the
+ * document takes the second track by auto-placement and a template that named a
+ * track no child occupies would leave the document in the 15rem one. Below `lg`
+ * the frame is a single column with both rails hidden, which is the arrangement
+ * a phone gets.
+ *
  * It is a Page rather than a Block because it is a whole screen and it is the
  * screen a content pipeline targets: a route that reads one document and hands
  * it the page tree, the outline and the current address. A Block would be the
@@ -84,13 +92,22 @@ export function DocsShell({ title, description, nav, toc, currentHref, navLabel,
     const rail = nav && nav.length > 0 ? nav : undefined;
     const contents = toc && toc.length > 0 ? toc : undefined;
     const neighbours = currentHref === undefined ? undefined : deriveNeighbours(nav ?? [], currentHref);
-    return (_jsxs("div", { "data-slot": "docs-shell", className: cn('mx-auto w-full max-w-6xl px-6 py-10 lg:px-8', className), children: [header, _jsxs("div", { "data-slot": "docs-shell-frame", className: cn('flex flex-col gap-8 lg:flex-row lg:gap-10', 
-                // One column for the document, and a third for whichever rails are
-                // present. The frame is sized by what the consumer passed rather than
-                // by a fixed three-column grid, so a tree with no contents rail leaves
-                // the document the width the two remaining columns divide between
-                // them.
-                contents ? 'lg:grid lg:grid-cols-[15rem_minmax(0,1fr)] xl:grid-cols-[15rem_minmax(0,1fr)_13rem]' : 'lg:grid lg:grid-cols-[15rem_minmax(0,1fr)]'), children: [rail ? (_jsx("aside", { "data-slot": "docs-rail", className: "hidden lg:col-start-1 lg:row-start-1 lg:block", children: _jsx("nav", { "aria-label": navLabel, className: "lg:sticky lg:top-20 lg:max-h-[calc(100svh-7rem)] lg:overflow-y-auto lg:pe-4", children: _jsx(NavList, { entries: rail, currentHref: currentHref, depth: 0 }) }) })) : null, _jsxs("article", { "data-slot": "docs-article", className: "flex min-w-0 flex-col gap-8", children: [title ? (_jsxs("header", { className: "flex flex-col gap-3", children: [_jsx(Heading, { as: "h1", size: "3xl", children: title }), description ? (_jsx(Text, { size: "lg", tone: "muted", className: "max-w-measure", children: description })) : null] })) : description ? (_jsx(Text, { size: "lg", tone: "muted", className: "max-w-measure", children: description })) : null, _jsx(Prose, { fullWidth: true, children: children }), neighbours ? (_jsx(Pager, { previous: neighbours.previous, next: neighbours.next, label: pagerLabel, labels: pagerLabels })) : null] }), contents ? (_jsx("aside", { "data-slot": "docs-contents", className: "hidden lg:col-start-3 lg:row-start-1 lg:block", children: _jsx("nav", { "aria-label": tocLabel, className: "lg:sticky lg:top-20 lg:max-h-[calc(100svh-7rem)] lg:overflow-y-auto", children: _jsx(NavList, { entries: contents, currentHref: currentHref, depth: 0 }) }) })) : null] }), footer] }));
+    return (_jsxs("div", { "data-slot": "docs-shell", className: cn('mx-auto w-full max-w-page px-6 py-10 lg:px-8', className), children: [header, _jsxs("div", { "data-slot": "docs-shell-frame", className: cn('flex flex-col gap-8 lg:flex-row lg:gap-10', 
+                // One track for the rail, one for the document, and a third for the
+                // contents rail when there is one. The template names exactly the
+                // tracks the children occupy rather than a fixed three-column grid,
+                // because the document takes the second track by auto-placement: a
+                // tree with no contents rail has two children, so a three-track
+                // template would leave the document in the 15rem first track.
+                //
+                // The third track is at the same width as the two-column frame, and
+                // that is a fact about the token package rather than a preference: the
+                // emitted theme closes `xl` with `initial`, so a third track written
+                // against a wider screen compiled to no media query at all, and the
+                // contents rail landed in an implicit `auto` track rather than the
+                // 13rem one. `check-breakpoint-variants.mjs` is the gate that says so
+                // to the next class written against a screen the theme does not emit.
+                contents ? 'lg:grid lg:grid-cols-[15rem_minmax(0,1fr)_13rem]' : 'lg:grid lg:grid-cols-[15rem_minmax(0,1fr)]'), children: [rail ? (_jsx("aside", { "data-slot": "docs-rail", className: "hidden lg:col-start-1 lg:row-start-1 lg:block", children: _jsx("nav", { "aria-label": navLabel, className: "lg:sticky lg:top-20 lg:max-h-[calc(100svh-7rem)] lg:overflow-y-auto lg:pe-4", children: _jsx(NavList, { entries: rail, currentHref: currentHref, depth: 0 }) }) })) : null, _jsxs("article", { "data-slot": "docs-article", className: "flex min-w-0 flex-col gap-8", children: [title ? (_jsxs("header", { className: "flex flex-col gap-3", children: [_jsx(Heading, { as: "h1", size: "3xl", children: title }), description ? (_jsx(Text, { size: "lg", tone: "muted", className: "max-w-measure", children: description })) : null] })) : description ? (_jsx(Text, { size: "lg", tone: "muted", className: "max-w-measure", children: description })) : null, _jsx(Prose, { fullWidth: true, children: children }), neighbours ? (_jsx(Pager, { previous: neighbours.previous, next: neighbours.next, label: pagerLabel, labels: pagerLabels })) : null] }), contents ? (_jsx("aside", { "data-slot": "docs-contents", className: "hidden lg:col-start-3 lg:row-start-1 lg:block", children: _jsx("nav", { "aria-label": tocLabel, className: "lg:sticky lg:top-20 lg:max-h-[calc(100svh-7rem)] lg:overflow-y-auto", children: _jsx(NavList, { entries: contents, currentHref: currentHref, depth: 0 }) }) })) : null] }), footer] }));
 }
 /* ------------------------------------------------------------------ *
  * The tree

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

@@ -0,0 +1,188 @@
+import type { ReactNode } from 'react';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * One way out of a failed screen, and the words for it.
+ *
+ * Identical to `NotFoundLink`, and it is a second declaration rather than an import
+ * because a Page's props are the surface a consumer reads and this Page is shipped
+ * from its own subpath: a consumer reading the corpus for a retry screen should not
+ * have to know that a not-found screen also exists. The duplication is four fields
+ * and a key, and the alternative is a shared type in one Page's module that the
+ * other Page's documentation would then be about.
+ */
+export type ErrorPageLink = {
+    /** The words of the link. */
+    label: string;
+    /** Where it goes. */
+    href: string;
+    /**
+     * Opens the destination in a new browsing context, which defaults the link
+     * relationship to `noopener noreferrer`. Almost never right on a failed screen: a
+     * reader who has just been shown a failure and is sent to a new tab has to find
+     * their way back and cannot tell whether the thing they were doing is still there.
+     */
+    newTab?: boolean;
+};
+/**
+ * Every field of an ErrorPage except whether it shows a support reference.
+ *
+ * Not exported, because the two arms below are what a caller writes and this is
+ * only the half they share. The union is what makes `referenceLabel` required
+ * wherever `reference` is set, and a flat pair of optional props could not: a
+ * reference with no label is a value on the page that nothing names, and a label
+ * with no reference is a word heading nothing.
+ */
+type ErrorPageFields = {
+    /**
+     * The status code, drawn as the page's own `h1`.
+     *
+     * Required, and a string rather than a number because it is displayed, not
+     * computed: a Page never decides what code it is answering, and a code a product
+     * derives from its own exception class is a code this Page would then be
+     * asserting about the consumer's deployment.
+     */
+    code: string;
+    /**
+     * The headline under the code: the sentence that says what happened.
+     *
+     * A `string` because it is one sentence and it is the part a reader actually
+     * reads, and it is the caller's because every product says it differently.
+     */
+    title: string;
+    /** One or two sentences, for anything a reader should know before they press anything. */
+    description?: string;
+    /**
+     * The control that tries the failed request again.
+     *
+     * A node and not a label and a handler, and that is the decision this Page is
+     * shaped around. See the JSDoc on the Page: a slot is what keeps this screen a
+     * server Component while the retry is still the first thing on it.
+     */
+    retry?: ReactNode;
+    /**
+     * The ways out, in the order a reader should see them. Put the destination most
+     * likely to help first.
+     */
+    links: readonly ErrorPageLink[];
+    /**
+     * The accessible name of the row of ways out.
+     *
+     * Required, because it is a word a reader hears and a Page that ships no copy
+     * ships no reader-facing copy either. The Page's own phrasing is "where to next";
+     * a site that files its destinations differently names the same landmark
+     * differently.
+     */
+    linksLabel: string;
+    /** A slot for anything else the site wants to say here: a status page, a chat route. */
+    children?: ReactNode;
+    /**
+     * The level of the code, and one step below it for the headline.
+     *
+     * Defaults to `h1`, because a Page owns the top of the document outline and the
+     * code is this screen's one string that is the same for every failure of its kind.
+     */
+    headingLevel?: HeadingLevel;
+    /** Layout only, exactly as on every Item. Changing a Prism-owned visual property from here is prohibited. */
+    className?: string;
+};
+/**
+ * The props an ErrorPage takes.
+ *
+ * Every string and every destination is a prop and the Page ships none. There is no
+ * "something went wrong", no "please try again" and no product name, for the same
+ * reason `NotFoundPage` gives: the failure screens are the ones every reader and no
+ * crawler sees, so a sentence written here would be a claim about a product this
+ * package knows nothing about, in the exact place where being wrong is worst.
+ */
+export type ErrorPageProps = ErrorPageFields & ({
+    /**
+     * The support reference a reader quotes to a person: the request id, the
+     * incident, the case number.
+     *
+     * A `string` because it is a machine value a reader copies rather than
+     * reads, which is why it is drawn in the mono face and why the label beside
+     * it is the caller's word.
+     */
+    reference: string;
+    /**
+     * The word naming that value.
+     *
+     * Required here and forbidden on the other arm. "Reference", "Incident"
+     * and "Case" are three words for three products, and a reference a reader
+     * has to guess the name of is a reference they cannot quote.
+     */
+    referenceLabel: string;
+} | {
+    /** No reference on this screen. */
+    reference?: never;
+    /** No word is needed, because there is no value to name. */
+    referenceLabel?: never;
+});
+/**
+ * A complete failure screen: the code, what happened, the retry, and the ways out.
+ *
+ * **This is the third of the three Pages that `DESIGN.md` records under Known Open
+ * Items as deferred to v1.1**, so it discharges that row rather than adding to the
+ * tail. The other two are `PricingPage` and `OnboardingPage`.
+ *
+ * **It is the sibling of `NotFoundPage` and the two fail for opposite reasons, which
+ * is the reason they are two items rather than one with a prop.** A not-found is a
+ * request that will never succeed: the address is wrong, the page was never there,
+ * and no amount of asking again produces it, so a retry on a 404 is a lie told by a
+ * button, and a reader who believes it waits, and then believes the next one too. A
+ * server error is a request that may well succeed on a second try: the database was
+ * briefly unreachable, a deploy was halfway, a queue was full. So on this screen the
+ * retry is not one control among several, it is the most important thing on the page,
+ * and it goes first, above the links and above the sentence that names the failure.
+ * A design system that treated the two as one item, with a `retry` prop on the shared
+ * screen and a flag deciding whether to draw it, would be wrong twice: it would teach
+ * a 404 reader to press a button that cannot work, and it would teach an error
+ * reader that the product agrees with them. Two screens with one shape between them
+ * is the honest arrangement, and the cost is that a consumer with an error boundary
+ * renders two components and holds two sets of words, which is a sentence in their
+ * own copy rather than a fork.
+ *
+ * **Everything else is deliberately identical to its sibling**, and the shape of
+ * that sameness is the argument. The code is the `h1` and the headline is one step
+ * below it, for the reason `NotFoundPage` gives: the code is the one string on the
+ * screen that is the same for every failure of its kind, so it is what anything
+ * reading the outline indexes. The code is set in the mono face because it is a
+ * machine value and that is the face this package annotates machine values with. The
+ * links are native anchors with real destinations, for the reason its sibling gives
+ * and for the same doubled reason: a reader who has just followed one link to a
+ * failure is the reader on this site who most wants to see where the next one goes.
+ *
+ * **`retry` is a slot and that is what keeps this screen a server Component, and the
+ * argument is about the boundary rather than about the control.** The rejected shape
+ * was `retry: { label, onRetry }`: a handler is a function, a function is a piece of
+ * state, and state is a client module, so that shape would have put the entire
+ * failure screen, including every link and the code, on the client because one button
+ * wanted an `onClick`. Passing the control in as a node inverts it: the caller writes
+ * their own button in their own client component, this Page renders the node, and a
+ * consumer whose retry is a router refresh, a mutation retry or a plain reload all
+ * pass their own thing and get it drawn first. The cost is that Prism cannot check
+ * that the slot is a control at all, and can neither label it nor disable it while a
+ * retry is in flight, so a caller whose retry needs a busy state holds that state in
+ * the component they wrote. That is the right home for it: the in-flight state is a
+ * fact about the consumer's request and not about a screen.
+ *
+ * **The reference is a `dl`, and the label is a prop, because the word is the
+ * consumer's.** "Reference", "Incident" and "Case" are three words for three
+ * products and a reader has to be able to quote the word their support process asks
+ * for. The value itself is a machine string a reader copies rather than reads, so it
+ * is drawn in the mono face, and the pair is a definition list so a screen reader
+ * announces the label with the value rather than reading a bare string.
+ *
+ * The Page carries no `noindex` and no `robots` directive, for the reason its
+ * sibling gives: what a failure response is indexed as is the consumer's server's
+ * decision, and a component that declared it would be making a claim about a
+ * deployment it cannot see.
+ *
+ * It is a server Component. It fetches nothing, it holds no state and it imports no
+ * router, so a consumer renders it from whichever route their framework names for
+ * the status, and nothing on the screen costs client JavaScript until the caller's
+ * own retry control does.
+ */
+export declare function ErrorPage({ code, title, description, retry, links, linksLabel, reference, referenceLabel, children, headingLevel, className, }: ErrorPageProps): import("react").JSX.Element;
+export default ErrorPage;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pages/error-page/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAIpF;;;;;;;;;GASG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;;;;;GAQG;AACH,KAAK,eAAe,GAAG;IACrB;;;;;;;OAOG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,0FAA0F;IAC1F,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;OAGG;IACH,KAAK,EAAE,SAAS,aAAa,EAAE,CAAA;IAC/B;;;;;;;OAOG;IACH,UAAU,EAAE,MAAM,CAAA;IAClB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,6GAA6G;IAC7G,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,cAAc,GAAG,eAAe,GAC1C,CACI;IACE;;;;;;;OAOG;IACH,SAAS,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,cAAc,EAAE,MAAM,CAAA;CACvB,GACD;IACE,mCAAmC;IACnC,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,KAAK,CAAA;CACvB,CACJ,CAAA;AAqBH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,KAAK,EACL,KAAK,EACL,UAAU,EACV,SAAS,EACT,cAAc,EACd,QAAQ,EACR,YAAmB,EACnB,SAAS,GACV,EAAE,cAAc,+BAkEhB;AAED,eAAe,SAAS,CAAA"}

package/dist/pages/error-page/index.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CtaLink } from '../../components/ui/cta-link.js';
+import { Prose } from '../../components/ui/prose.js';
+import { Section, childLevel } from '../../components/ui/section.js';
+import { Heading, Text } from '../../components/ui/typography.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The one check the union cannot make, run before anything is drawn.
+ *
+ * It is here for the JavaScript caller and for a value that came out of a database
+ * with the type's guarantee already gone, for the reason `Help01`, `Team01` and
+ * `Onboarding01` each keep their own: a defect that is invisible in a screenshot is
+ * not a defect a design system can afford to ship quietly.
+ */
+function assertReference(reference, referenceLabel) {
+    if (reference === undefined)
+        return;
+    if (referenceLabel === undefined || referenceLabel.trim() === '') {
+        throw new Error('ErrorPage: a reference is shown with no referenceLabel, so the value would sit on the page with nothing ' +
+            'naming it and a reader would have no way to know what it is for. Pass the word your support process ' +
+            'asks readers to quote, or drop the reference.');
+    }
+}
+/**
+ * A complete failure screen: the code, what happened, the retry, and the ways out.
+ *
+ * **This is the third of the three Pages that `DESIGN.md` records under Known Open
+ * Items as deferred to v1.1**, so it discharges that row rather than adding to the
+ * tail. The other two are `PricingPage` and `OnboardingPage`.
+ *
+ * **It is the sibling of `NotFoundPage` and the two fail for opposite reasons, which
+ * is the reason they are two items rather than one with a prop.** A not-found is a
+ * request that will never succeed: the address is wrong, the page was never there,
+ * and no amount of asking again produces it, so a retry on a 404 is a lie told by a
+ * button, and a reader who believes it waits, and then believes the next one too. A
+ * server error is a request that may well succeed on a second try: the database was
+ * briefly unreachable, a deploy was halfway, a queue was full. So on this screen the
+ * retry is not one control among several, it is the most important thing on the page,
+ * and it goes first, above the links and above the sentence that names the failure.
+ * A design system that treated the two as one item, with a `retry` prop on the shared
+ * screen and a flag deciding whether to draw it, would be wrong twice: it would teach
+ * a 404 reader to press a button that cannot work, and it would teach an error
+ * reader that the product agrees with them. Two screens with one shape between them
+ * is the honest arrangement, and the cost is that a consumer with an error boundary
+ * renders two components and holds two sets of words, which is a sentence in their
+ * own copy rather than a fork.
+ *
+ * **Everything else is deliberately identical to its sibling**, and the shape of
+ * that sameness is the argument. The code is the `h1` and the headline is one step
+ * below it, for the reason `NotFoundPage` gives: the code is the one string on the
+ * screen that is the same for every failure of its kind, so it is what anything
+ * reading the outline indexes. The code is set in the mono face because it is a
+ * machine value and that is the face this package annotates machine values with. The
+ * links are native anchors with real destinations, for the reason its sibling gives
+ * and for the same doubled reason: a reader who has just followed one link to a
+ * failure is the reader on this site who most wants to see where the next one goes.
+ *
+ * **`retry` is a slot and that is what keeps this screen a server Component, and the
+ * argument is about the boundary rather than about the control.** The rejected shape
+ * was `retry: { label, onRetry }`: a handler is a function, a function is a piece of
+ * state, and state is a client module, so that shape would have put the entire
+ * failure screen, including every link and the code, on the client because one button
+ * wanted an `onClick`. Passing the control in as a node inverts it: the caller writes
+ * their own button in their own client component, this Page renders the node, and a
+ * consumer whose retry is a router refresh, a mutation retry or a plain reload all
+ * pass their own thing and get it drawn first. The cost is that Prism cannot check
+ * that the slot is a control at all, and can neither label it nor disable it while a
+ * retry is in flight, so a caller whose retry needs a busy state holds that state in
+ * the component they wrote. That is the right home for it: the in-flight state is a
+ * fact about the consumer's request and not about a screen.
+ *
+ * **The reference is a `dl`, and the label is a prop, because the word is the
+ * consumer's.** "Reference", "Incident" and "Case" are three words for three
+ * products and a reader has to be able to quote the word their support process asks
+ * for. The value itself is a machine string a reader copies rather than reads, so it
+ * is drawn in the mono face, and the pair is a definition list so a screen reader
+ * announces the label with the value rather than reading a bare string.
+ *
+ * The Page carries no `noindex` and no `robots` directive, for the reason its
+ * sibling gives: what a failure response is indexed as is the consumer's server's
+ * decision, and a component that declared it would be making a claim about a
+ * deployment it cannot see.
+ *
+ * It is a server Component. It fetches nothing, it holds no state and it imports no
+ * router, so a consumer renders it from whichever route their framework names for
+ * the status, and nothing on the screen costs client JavaScript until the caller's
+ * own retry control does.
+ */
+export function ErrorPage({ code, title, description, retry, links, linksLabel, reference, referenceLabel, children, headingLevel = 'h1', className, }) {
+    assertReference(reference, referenceLabel);
+    /*
+      The headline sits one step below the code, which is the same derivation every
+      Block uses and the reason a hardcoded `h2` would be right exactly once.
+    */
+    const TitleHeading = childLevel(headingLevel);
+    return (_jsx(Section, { "data-slot": "error-page", className: cn(className), children: _jsxs("div", { "data-slot": "error-page-body", className: "flex flex-col items-start gap-6", children: [_jsx(Heading, { as: headingLevel, size: "4xl", className: "text-muted-foreground font-mono", children: code }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Heading, { as: TitleHeading, size: "2xl", children: title }), description ? _jsx(Text, { size: "lg", children: description }) : null] }), retry === undefined ? null : (_jsx("div", { "data-slot": "error-page-retry", children: retry })), links.length > 0 ? (_jsx("nav", { "aria-label": linksLabel, className: "flex flex-wrap items-center gap-3", children: links.map((link, index) => (_jsx(CtaLink, { href: link.href, newTab: link.newTab, variant: index === 0 ? 'default' : 'outline', children: link.label }, link.href))) })) : null, reference === undefined ? null : (_jsxs("dl", { "data-slot": "error-page-reference", className: "flex flex-col items-start gap-1", children: [_jsx("dt", { className: "text-muted-foreground text-xs", children: referenceLabel }), _jsx("dd", { className: "font-mono text-sm", children: reference })] })), children ? _jsx(Prose, { className: "mt-2", children: children }) : null] }) }));
+}
+export default ErrorPage;

package/dist/pages/index.d.ts

@@ -25,4 +25,14 @@ export { BlogPostPage } from './blog-post-page/index.js';
 export type { BlogPostPageProps, BlogPostTag, BlogPostNeighbour, BlogPostTrailLabels } from './blog-post-page/index.js';
 export { DocsShell } from './docs-shell/index.js';
 export type { DocsShellProps, DocsNavEntry, DocsNavPage, DocsNavGroup, DocsNavDivider, DocsPagerLabels, } from './docs-shell/index.js';
+export { AboutPage } from './about-page/index.js';
+export { CareersPage } from './careers-page/index.js';
+export { ChangelogPage } from './changelog-page/index.js';
+export { ContactPage } from './contact-page/index.js';
+export { ErrorPage } from './error-page/index.js';
+export { LegalPage } from './legal-page/index.js';
+export { OnboardingPage } from './onboarding-page/index.js';
+export { PricingPage } from './pricing-page/index.js';
+export { SearchPage } from './search-page/index.js';
+export { StatusPage } from './status-page/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/pages/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pages/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAC9G,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,YAAY,EACV,cAAc,EACd,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,cAAc,EACd,eAAe,GAChB,MAAM,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pages/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAC9G,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,YAAY,EACV,cAAc,EACd,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,cAAc,EACd,eAAe,GAChB,MAAM,cAAc,CAAA;AAOrB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA"}

package/dist/pages/index.js

@@ -18,3 +18,17 @@ export { AuthPage } from './auth-page/index.js';
 export { NotFoundPage } from './not-found-page/index.js';
 export { BlogPostPage } from './blog-post-page/index.js';
 export { DocsShell } from './docs-shell/index.js';
+/*
+ * the ten screens the 2026-09 expansion added.
+ * Derived by the maintainer rather than authored: each entry is read out of the Item own
+ * index module, so an Item and its barrel line cannot come apart. */
+export { AboutPage } from './about-page/index.js';
+export { CareersPage } from './careers-page/index.js';
+export { ChangelogPage } from './changelog-page/index.js';
+export { ContactPage } from './contact-page/index.js';
+export { ErrorPage } from './error-page/index.js';
+export { LegalPage } from './legal-page/index.js';
+export { OnboardingPage } from './onboarding-page/index.js';
+export { PricingPage } from './pricing-page/index.js';
+export { SearchPage } from './search-page/index.js';
+export { StatusPage } from './status-page/index.js';