@nanisoft/prism-ui 0.5.1 → 0.6.0

package/dist/components/ui/cta-link.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+/*
+ * Why this is a second Component rather than an `as` or `href` prop on `Button`.
+ * The design system has already answered this twice, in the two places a trail
+ * of links and a list of page links each needed both a non-link slot and a link
+ * slot: `BreadcrumbItem` renders an `<li>` and `BreadcrumbLink` renders an
+ * `<a>` (`src/components/ui/breadcrumb.tsx`), and `PaginationItem` renders an
+ * `<li>` and `PaginationLink` renders an `<a>`
+ * (`src/components/ui/pagination.tsx`). Both wrote a second export rather than
+ * widening one element into a prop, and both are the shape this Component takes.
+ * A polymorphic `as` would make the rendered element a runtime value that only
+ * the reader of the call site knows, which is exactly the disagreement between a
+ * type and a screen this ticket closes. It also costs nothing: both halves of
+ * that pair are server components, so the swap adds no client JavaScript.
+ *
+ * The recipe is written here rather than imported from `button.tsx`, because
+ * `buttonVariants` is module-internal and DESIGN.md keeps a raw variant map off
+ * the export surface: "There is no variant recipe on the surface." The base
+ * string and every shared variant below are therefore kept deliberately
+ * identical to `buttonVariants`, so swapping `Button` for `CtaLink` changes the
+ * element and the destination and nothing else on screen. If one recipe moves,
+ * the other moves with it.
+ */
+const ctaLinkVariants = cva(
+// The focus ring is `ring-ring` at full strength, for the reason
+// `button.tsx` states at length: half alpha composites to between 1.14:1 and
+// 2.74:1 against every surface in all six themes and clears 3:1 in none of
+// them, which fails WCAG 1.4.11 on the one indicator a keyboard user has.
+//
+// Two utilities are dropped from the button base, and each is dropped for a
+// reason rather than by omission. `aria-invalid:*` is a form-control state and
+// an anchor has no invalid state. `disabled:*` is likewise a button state: an
+// anchor with a destination always navigates, and a control that should not
+// navigate is not a call to action.
+"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium outline-none transition-[color,box-shadow,background-color] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]", {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+            outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
+            secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+            ghost: 'hover:bg-accent hover:text-accent-foreground',
+        },
+        // The desktop metrics and the coarse-pointer 44px step are `Button`'s, for
+        // the reason `button.tsx` states: the target grows with the input method
+        // and not with the viewport, so a phone-sized metric never ships to a
+        // mouse. An `icon` size is absent because a call to action carries a label.
+        size: {
+            default: 'h-9 px-4 py-2 has-[>svg]:px-3 pointer-coarse:h-11 pointer-coarse:min-w-11 pointer-coarse:px-5 pointer-coarse:has-[>svg]:px-4',
+            sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5 pointer-coarse:h-11 pointer-coarse:min-w-11',
+            lg: 'h-10 rounded-md px-6 has-[>svg]:px-4 pointer-coarse:h-11',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+/**
+ * The call to action that goes somewhere.
+ *
+ * Renders a native `<a>`, so assistive technology announces a link and the
+ * browser's own link affordances all work: a status bar showing the destination,
+ * a context menu to copy it, middle-click to open a new tab. `Button` cannot
+ * offer any of that, and a call to action that is a button is announced as a
+ * command that does nothing.
+ *
+ * It is a Component in its own right rather than a mode of `Button`, which is the
+ * answer `BreadcrumbLink` and `PaginationLink` already give twice in this
+ * package. The two carry the same visual weight as the button they replace, so
+ * the only difference on screen is that this one has a destination.
+ *
+ * When `newTab` is set, `rel` defaults to `noopener noreferrer`, so the opened
+ * document cannot reach back through `window.opener` or read the referrer. A
+ * consumer that needs a different relationship passes `rel` and it wins.
+ */
+function CtaLink({ className, variant, size, href, newTab = false, rel, ...props }) {
+    return (_jsx("a", { "data-slot": "cta-link", href: href, rel: rel ?? (newTab ? 'noopener noreferrer' : undefined), target: newTab ? '_blank' : undefined, className: cn(ctaLinkVariants({ variant, size, className })), ...props }));
+}
+export { CtaLink };

package/dist/components/ui/diagram.d.ts

@@ -0,0 +1,154 @@
+/**
+ * One named thing in a Diagram, at a position the caller chooses.
+ *
+ * `x` and `y` are in the caller's own coordinate space and are normalised into
+ * the Diagram's canvas, so fractions, pixels or any other monotonic scale all
+ * draw the same shape. Two nodes given the same position collapse onto one
+ * another, so a caller that means a column spreads it rather than repeating a
+ * number.
+ *
+ * `emphasis` marks the one node the drawing is about, and it is the only
+ * difference a node may carry: the emphasised node takes the brand ink, which
+ * DESIGN.md's Brand Ink Rule names as the colour for something that must read
+ * as the brand rather than as body text. Two emphasised nodes are a caller's
+ * mistake, not a second emphasis level.
+ */
+export type DiagramNode = {
+    /**
+     * A key unique within the diagram. Relations name a node by this, and it is
+     * carried on the markup as `data-node` so a test can address one node rather
+     * than the first one.
+     */
+    id: string;
+    /**
+     * The name printed under the node. It is a label on a picture, so a screen
+     * reader does not read it: see `DiagramProps` for what carries the meaning.
+     */
+    name: string;
+    /** The node's position along the horizontal axis, in the caller's space. */
+    x: number;
+    /** The node's position along the vertical axis, in the caller's space. */
+    y: number;
+    /** Marks the node the diagram is about. See the Brand Ink Rule. */
+    emphasis?: boolean;
+};
+/**
+ * One relation between two nodes, with the word that says what it is.
+ *
+ * A relation is drawn as a straight line between the two node marks, so the
+ * geometry a caller lays out is the geometry a reader sees. The label is placed
+ * beside the line rather than on it, because a label drawn over a line has to
+ * be knocked out with a halo, and a halo has to be filled with the colour of
+ * the surface the diagram happens to sit on, which the component is not told.
+ *
+ * `indirect` draws the line dashed. That is the standing convention for "this
+ * holds, but not by this route", and it is chosen over fading the line because
+ * a dashed line keeps its contrast while a faded one does not.
+ */
+export type DiagramRelation = {
+    /** The `id` of the node the relation leaves. */
+    from: string;
+    /** The `id` of the node the relation arrives at. */
+    to: string;
+    /** The word printed beside the line. */
+    label: string;
+    /** Draws the line dashed, for a relation that holds but not by this route. */
+    indirect?: boolean;
+};
+/** What both arms of `DiagramProps` carry. */
+type DiagramFigure = {
+    /** The things drawn. At least one, or the Diagram renders an empty canvas. */
+    nodes: DiagramNode[];
+    /** The relations drawn between them. A relation naming a node that is not in `nodes` is dropped. */
+    relations: DiagramRelation[];
+    /**
+     * Layout only, exactly as on every Component: grid placement and width.
+     * Changing a Prism-owned visual property from here is prohibited, and this
+     * Component spreads no other prop, so there is no second way to do it.
+     */
+    className?: string;
+};
+/**
+ * The props a Diagram takes.
+ *
+ * The name is required unless the drawing is decorative, and it is forbidden
+ * when it is. That is a union rather than `label?: string` because only a union
+ * lets the type system see the exception: an optional label on one type can
+ * only be optional everywhere or required everywhere, and both halves of that
+ * are wrong. `Separator` takes the same shape as `decorative`.
+ */
+export type DiagramProps = DiagramFigure & ({
+    /**
+     * Hides the drawing from assistive technology and drops the name. Use it
+     * when the surrounding sentence already says what the diagram shows, and
+     * nothing inside the hidden tree is named either: there is no `<title>`
+     * here, so there is no name stranded inside an `aria-hidden` subtree.
+     */
+    decorative: true;
+    label?: never;
+} | {
+    /** The name of the drawing, and the only thing a screen reader reads from it. */
+    label: string;
+    decorative?: false;
+});
+/**
+ * A diagram of named things and the relations between them.
+ *
+ * Data in, vector markup out. Every stroke and every fill is a semantic token
+ * named as a utility, never a value read from anywhere, so a scoped `data-pack`
+ * boundary above the drawing restyles it through the cascade exactly as it
+ * restyles a heading. That is the whole reason this is a Component and the
+ * reason a canvas was not: a canvas paints pixels it has already resolved, and
+ * a resolved value does not move when the pack beneath it does.
+ *
+ * It is a server Component. It ships no client code, takes no hook, has no mode
+ * of its own and reads no context, so a consumer renders it from a server file
+ * with no provider mounted. `check-client-budget.mjs` keeps it off the client
+ * roster, and a `'use client'` line added here would put it back on that roster.
+ *
+ * **Accessibility.** A diagram carries meaning, so by default it is one image
+ * with a name: `role="img"` and the `label` the caller passes. Everything inside
+ * a `role="img"` is presentational, so the node names and relation words are
+ * drawn for sighted readers and the surrounding sentence is what a screen reader
+ * gets. Pass `decorative` when the sentence already says what the drawing
+ * shows, and the whole tree leaves the accessibility tree with nothing named
+ * inside it.
+ *
+ * **Shape.** Nodes are circles and relations are paths. Both are shapes with no
+ * radius concept, so no corner radius here is a function of `--radius` and a
+ * pack boundary above the drawing moves nothing about its shape. A `<rect>` was
+ * rejected for the opposite reason: its corner attribute is a CSS property and
+ * does follow a boundary, and no utility pins it.
+ *
+ * **The node mark's base edges must draw.** Two things go wrong when a shape is
+ * left to its defaults, and this file answers both explicitly on every mark.
+ *
+ *   1. A shape with no `fill` and no `fill: none` paints opaque black, which
+ *      hides every label behind it. A relation path therefore names `fill-none`
+ *      and a node circle names a fill, and neither relies on an initial value.
+ *   2. A stroke only exists if something draws it. `stroke-width`'s initial
+ *      value is 1 rather than 0, so the width is not what fails here; what fails
+ *      is a mark whose stroke colour is `currentColor` on a surface whose text
+ *      colour is that same surface, which is an invisible edge, or a width
+ *      utility dropped in an edit. So every mark names an explicit width, an
+ *      explicit stroke from a token, and never `current` or `currentColor`.
+ *
+ * A Component whose nodes render as invisible rectangles is worse than no
+ * Component, so this is stated here and covered by `test/diagram.test.tsx`.
+ *
+ * It spreads no other prop. `Separator` and `Kbd` spread a native element's
+ * props because there is no other route to them; a Diagram whose entire claim
+ * is that every ink is a token would be undermined by a spread that hands a
+ * caller `stroke`, so the surface is `nodes`, `relations`, `label`,
+ * `decorative` and `className` and nothing else.
+ *
+ * Positions are the caller's: the Component fits and draws, and it does not lay
+ * out a graph, so it cannot know that two labels will not collide. A relation
+ * naming a node that is not in `nodes` is dropped, and the count of dropped
+ * relations is on the element as `data-unresolved-relations` rather than
+ * swallowed, because a line that silently did not draw is the failure this
+ * Component exists to make impossible.
+ */
+declare function Diagram({ nodes, relations, label, decorative, className, }: DiagramProps): import("react").JSX.Element;
+export { Diagram };
+//# sourceMappingURL=diagram.d.ts.map

package/dist/components/ui/diagram.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diagram.d.ts","sourceRoot":"","sources":["../../../src/components/ui/diagram.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,4EAA4E;IAC5E,CAAC,EAAE,MAAM,CAAA;IACT,0EAA0E;IAC1E,CAAC,EAAE,MAAM,CAAA;IACT,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAA;IACV,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,8CAA8C;AAC9C,KAAK,aAAa,GAAG;IACnB,8EAA8E;IAC9E,KAAK,EAAE,WAAW,EAAE,CAAA;IACpB,oGAAoG;IACpG,SAAS,EAAE,eAAe,EAAE,CAAA;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,YAAY,GAAG,aAAa,GACtC,CACI;IACE;;;;;OAKG;IACH,UAAU,EAAE,IAAI,CAAA;IAChB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,GACD;IACE,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,KAAK,CAAA;CACnB,CACJ,CAAA;AAoFH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,SAAS,EACT,KAAK,EACL,UAAkB,EAClB,SAAS,GACV,EAAE,YAAY,+BAsFd;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/components/ui/diagram.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+/**
+ * The canvas the Diagram draws into, in its own user units.
+ *
+ * A fixed canvas rather than a viewBox derived from the caller's numbers, for
+ * one reason: type inside a scaled SVG is sized in the SVG's own user units, so
+ * a viewBox derived from a caller's coordinates would make the label size a
+ * function of how large a number the caller happened to use, and the same
+ * drawing would come out with 3px labels in one call and 40px labels in another.
+ * Fitting the caller's points into a fixed canvas makes the label a constant
+ * and makes the drawing a function of the shape rather than of the scale.
+ */
+const CANVAS_WIDTH = 640;
+const CANVAS_HEIGHT = 400;
+/**
+ * The band left empty around the fitted points, in user units.
+ *
+ * It reserves room for what is drawn beside a node rather than for the node: a
+ * node mark is 5 units in radius and its name is set about 20 units below it,
+ * and a name is wider than the mark. The band is the honest cost of a server
+ * component not being able to measure text, and it is why a name that runs long
+ * still lands inside the canvas rather than off its edge.
+ */
+const PADDING = 56;
+/** The node mark's radius. A circle, so there is no corner radius for the pack to move. */
+const NODE_RADIUS = 5;
+/**
+ * Type sizes, in user units rather than in `rem`.
+ *
+ * The authored type scale is in `rem` and cannot be used inside a viewBox, where
+ * a font size is a coordinate and not a length on the page. These are geometry,
+ * the one thing Tailwind stays authoritative for, and they are the only numbers
+ * in this file that are not a token.
+ */
+const NODE_NAME_SIZE = 13;
+const NODE_NAME_OFFSET = 20;
+const RELATION_NAME_SIZE = 11;
+/**
+ * How far a relation's label sits off its line, in user units. Perpendicular to
+ * the line, so the label never sits on the stroke it belongs to.
+ */
+const RELATION_NAME_LIFT = 7;
+/**
+ * The caller's points, fitted into the canvas with their aspect ratio kept and
+ * the leftover shared out evenly.
+ *
+ * A caller whose points span one axis only, or who passes a single node, gets
+ * the other axis centred rather than a division by zero: the scale is taken
+ * over the axes that have an extent, and a diagram with no extent at all keeps
+ * the caller's own numbers.
+ */
+function fit(nodes) {
+    if (nodes.length === 0)
+        return () => ({ x: CANVAS_WIDTH / 2, y: CANVAS_HEIGHT / 2 });
+    const xs = nodes.map((node) => node.x);
+    const ys = nodes.map((node) => node.y);
+    const minX = Math.min(...xs);
+    const minY = Math.min(...ys);
+    const spanX = Math.max(...xs) - minX;
+    const spanY = Math.max(...ys) - minY;
+    const roomX = CANVAS_WIDTH - PADDING * 2;
+    const roomY = CANVAS_HEIGHT - PADDING * 2;
+    const scale = Math.min(spanX === 0 ? Number.POSITIVE_INFINITY : roomX / spanX, spanY === 0 ? Number.POSITIVE_INFINITY : roomY / spanY);
+    const unit = Number.isFinite(scale) && scale > 0 ? scale : 1;
+    const offsetX = PADDING + (roomX - spanX * unit) / 2 - minX * unit;
+    const offsetY = PADDING + (roomY - spanY * unit) / 2 - minY * unit;
+    return (node) => ({ x: node.x * unit + offsetX, y: node.y * unit + offsetY });
+}
+/**
+ * A diagram of named things and the relations between them.
+ *
+ * Data in, vector markup out. Every stroke and every fill is a semantic token
+ * named as a utility, never a value read from anywhere, so a scoped `data-pack`
+ * boundary above the drawing restyles it through the cascade exactly as it
+ * restyles a heading. That is the whole reason this is a Component and the
+ * reason a canvas was not: a canvas paints pixels it has already resolved, and
+ * a resolved value does not move when the pack beneath it does.
+ *
+ * It is a server Component. It ships no client code, takes no hook, has no mode
+ * of its own and reads no context, so a consumer renders it from a server file
+ * with no provider mounted. `check-client-budget.mjs` keeps it off the client
+ * roster, and a `'use client'` line added here would put it back on that roster.
+ *
+ * **Accessibility.** A diagram carries meaning, so by default it is one image
+ * with a name: `role="img"` and the `label` the caller passes. Everything inside
+ * a `role="img"` is presentational, so the node names and relation words are
+ * drawn for sighted readers and the surrounding sentence is what a screen reader
+ * gets. Pass `decorative` when the sentence already says what the drawing
+ * shows, and the whole tree leaves the accessibility tree with nothing named
+ * inside it.
+ *
+ * **Shape.** Nodes are circles and relations are paths. Both are shapes with no
+ * radius concept, so no corner radius here is a function of `--radius` and a
+ * pack boundary above the drawing moves nothing about its shape. A `<rect>` was
+ * rejected for the opposite reason: its corner attribute is a CSS property and
+ * does follow a boundary, and no utility pins it.
+ *
+ * **The node mark's base edges must draw.** Two things go wrong when a shape is
+ * left to its defaults, and this file answers both explicitly on every mark.
+ *
+ *   1. A shape with no `fill` and no `fill: none` paints opaque black, which
+ *      hides every label behind it. A relation path therefore names `fill-none`
+ *      and a node circle names a fill, and neither relies on an initial value.
+ *   2. A stroke only exists if something draws it. `stroke-width`'s initial
+ *      value is 1 rather than 0, so the width is not what fails here; what fails
+ *      is a mark whose stroke colour is `currentColor` on a surface whose text
+ *      colour is that same surface, which is an invisible edge, or a width
+ *      utility dropped in an edit. So every mark names an explicit width, an
+ *      explicit stroke from a token, and never `current` or `currentColor`.
+ *
+ * A Component whose nodes render as invisible rectangles is worse than no
+ * Component, so this is stated here and covered by `test/diagram.test.tsx`.
+ *
+ * It spreads no other prop. `Separator` and `Kbd` spread a native element's
+ * props because there is no other route to them; a Diagram whose entire claim
+ * is that every ink is a token would be undermined by a spread that hands a
+ * caller `stroke`, so the surface is `nodes`, `relations`, `label`,
+ * `decorative` and `className` and nothing else.
+ *
+ * Positions are the caller's: the Component fits and draws, and it does not lay
+ * out a graph, so it cannot know that two labels will not collide. A relation
+ * naming a node that is not in `nodes` is dropped, and the count of dropped
+ * relations is on the element as `data-unresolved-relations` rather than
+ * swallowed, because a line that silently did not draw is the failure this
+ * Component exists to make impossible.
+ */
+function Diagram({ nodes, relations, label, decorative = false, className, }) {
+    const place = fit(nodes);
+    const byId = new Map(nodes.map((node) => [node.id, node]));
+    const drawn = relations.flatMap((relation) => {
+        const from = byId.get(relation.from);
+        const to = byId.get(relation.to);
+        return from && to ? [{ relation, from: place(from), to: place(to) }] : [];
+    });
+    return (_jsxs("svg", { "data-slot": "diagram", "data-unresolved-relations": relations.length - drawn.length, viewBox: `0 0 ${CANVAS_WIDTH} ${CANVAS_HEIGHT}`, xmlns: "http://www.w3.org/2000/svg", role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : label, "aria-hidden": decorative || undefined, className: cn('h-auto w-full', className), children: [drawn.map(({ relation, from, to }) => {
+                // A label placed beside its line rather than on it. The offset is the
+                // line's normal, so a vertical relation's label sits beside it and a
+                // horizontal one's sits above it, and neither ever sits on the stroke.
+                const dx = to.x - from.x;
+                const dy = to.y - from.y;
+                const length = Math.hypot(dx, dy);
+                const lift = length === 0 ? 0 : RELATION_NAME_LIFT / length;
+                return (_jsxs("g", { "data-slot": "diagram-relation", "data-relation": `${relation.from}-${relation.to}`, children: [_jsx("path", { d: `M ${from.x} ${from.y} L ${to.x} ${to.y}`, strokeWidth: 1, strokeDasharray: relation.indirect ? '4 4' : undefined, className: "stroke-muted-foreground fill-none" }), _jsx("text", { x: (from.x + to.x) / 2 - dy * lift, y: (from.y + to.y) / 2 + dx * lift, fontSize: RELATION_NAME_SIZE, textAnchor: "middle", className: "fill-muted-foreground font-mono", children: relation.label })] }, `${relation.from}-${relation.to}`));
+            }), nodes.map((node) => {
+                const at = place(node);
+                return (_jsxs("g", { "data-slot": "diagram-node", "data-node": node.id, "data-emphasis": node.emphasis || undefined, children: [_jsx("circle", { cx: at.x, cy: at.y, r: NODE_RADIUS, strokeWidth: node.emphasis ? 2 : 1, className: cn(node.emphasis ? 'fill-accent stroke-brand-ink' : 'fill-card stroke-border') }), _jsx("text", { x: at.x, y: at.y + NODE_NAME_OFFSET, fontSize: NODE_NAME_SIZE, textAnchor: "middle", className: "fill-foreground font-mono", children: node.name })] }, node.id));
+            })] }));
+}
+export { Diagram };

package/dist/components/ui/fact-list.d.ts

@@ -0,0 +1,90 @@
+import type { ComponentProps, ReactNode } from 'react';
+/**
+ * One fact: the term that names it and the value that answers it.
+ *
+ * `label` is required and `value` is required, because a fact with no value is a
+ * heading and a fact with no term is a value with nothing to answer. A fact whose
+ * value is a destination passes `href` and gets an anchor, so a reader can
+ * follow it rather than read it.
+ */
+export type Fact = {
+    /**
+     * The name of the fact, the term side of the pair. It is a label rather than
+     * prose: a column of these is read by scanning the left edge, so a term that
+     * wraps to two lines costs the whole column its alignment.
+     */
+    label: ReactNode;
+    /** The answer. A string, or any node a consumer composes. */
+    value: ReactNode;
+    /**
+     * Makes the value a link to where the fact is kept. Omit it for a fact whose
+     * value is the whole answer, such as a count or a version.
+     */
+    href?: string;
+    /**
+     * Opens the destination in a new browsing context, which defaults the link
+     * relationship to `noopener noreferrer`. Prism does not decide what counts as
+     * external: a cross-origin destination is not by itself a reason to open a tab.
+     */
+    newTab?: boolean;
+};
+/**
+ * The props a FactList takes.
+ *
+ * The facts are the content and the content is a prop: the list ships no fact,
+ * no sample row and no placeholder. An empty list renders nothing rather than an
+ * empty frame, so a caller that has nothing to say does not get a bordered box
+ * with a title above it.
+ */
+export type FactListProps = ComponentProps<'dl'> & {
+    /**
+     * The facts, in the order a reader should meet them. Order is the caller's
+     * because it is a claim about importance, and a list that sorted itself would
+     * be making that claim on the caller's behalf.
+     */
+    facts: readonly Fact[];
+    /**
+     * A heading above the list, for a set of facts that needs to say what it is.
+     * Rendered as a `dt`-level caption rather than as a heading, so it does not
+     * compete with the document's own outline.
+     */
+    label?: ReactNode;
+    /**
+     * Layout only, exactly as on every Component. Changing a Prism-owned visual
+     * property from here is prohibited.
+     */
+    className?: string;
+};
+/**
+ * A short list of named facts, as a definition list.
+ *
+ * One job: put a term beside its value in a column a reader can scan, and make
+ * the pair a real description list so a screen reader announces the term before
+ * the value. Every NaniSoft site states facts beside prose: what a plan costs,
+ * what a feed carries, which version a document describes, when a collector went
+ * live. Each one re-derived a `<dl>` and each one got the alignment and the
+ * term-before-value wiring subtly wrong.
+ *
+ * It is a Component rather than a Block because it has no content of its own to
+ * be passed, and because the fact set is data rather than a section: a Block
+ * models a region of a page and this models a shape that appears inside one.
+ *
+ * The term column is a fixed fraction rather than a content width, so a column
+ * of facts lines up down its whole length and a long term pushes the value rather
+ * than resizing every other row. Values align to the top, because a value that
+ * wraps and a value that does not are both common and centring one of them reads
+ * as an error.
+ *
+ * The hairline between rows is `border-border`, so a list of facts reads as a
+ * table without becoming one: no header row, because a fact has no column
+ * header, and no `Table` semantics, because these are terms and their answers
+ * rather than records.
+ *
+ * A fact with no value renders the term and nothing else, so a caller that is
+ * missing an answer shows a gap rather than a blank that reads as a value.
+ *
+ * It is a server Component: no hook, no context and no client code.
+ */
+declare function FactList({ facts, label, className, ...props }: FactListProps): import("react").JSX.Element | null;
+export { FactList };
+//# sourceMappingURL=fact-list.d.ts.map

package/dist/components/ui/fact-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fact-list.d.ts","sourceRoot":"","sources":["../../../src/components/ui/fact-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD;;;;;;;GAOG;AACH,MAAM,MAAM,IAAI,GAAG;IACjB;;;;OAIG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB,6DAA6D;IAC7D,KAAK,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG;IACjD;;;;OAIG;IACH,KAAK,EAAE,SAAS,IAAI,EAAE,CAAA;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,iBAAS,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,sCAuCrE;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/ui/fact-list.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+/**
+ * A short list of named facts, as a definition list.
+ *
+ * One job: put a term beside its value in a column a reader can scan, and make
+ * the pair a real description list so a screen reader announces the term before
+ * the value. Every NaniSoft site states facts beside prose: what a plan costs,
+ * what a feed carries, which version a document describes, when a collector went
+ * live. Each one re-derived a `<dl>` and each one got the alignment and the
+ * term-before-value wiring subtly wrong.
+ *
+ * It is a Component rather than a Block because it has no content of its own to
+ * be passed, and because the fact set is data rather than a section: a Block
+ * models a region of a page and this models a shape that appears inside one.
+ *
+ * The term column is a fixed fraction rather than a content width, so a column
+ * of facts lines up down its whole length and a long term pushes the value rather
+ * than resizing every other row. Values align to the top, because a value that
+ * wraps and a value that does not are both common and centring one of them reads
+ * as an error.
+ *
+ * The hairline between rows is `border-border`, so a list of facts reads as a
+ * table without becoming one: no header row, because a fact has no column
+ * header, and no `Table` semantics, because these are terms and their answers
+ * rather than records.
+ *
+ * A fact with no value renders the term and nothing else, so a caller that is
+ * missing an answer shows a gap rather than a blank that reads as a value.
+ *
+ * It is a server Component: no hook, no context and no client code.
+ */
+function FactList({ facts, label, className, ...props }) {
+    if (facts.length === 0)
+        return null;
+    return (_jsxs("dl", { "data-slot": "fact-list", className: cn('flex w-full flex-col text-sm', className), ...props, children: [label ? (_jsx("dt", { className: "text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase", children: label })) : null, facts.map((fact, index) => (_jsxs("div", { "data-slot": "fact-list-row", className: "border-border flex items-start justify-between gap-6 border-b py-2 last:border-b-0", children: [_jsx("dt", { className: "text-muted-foreground shrink-0 font-medium", children: fact.label }), _jsx("dd", { className: "text-right text-balance", children: fact.href ? (_jsx("a", { href: fact.href, rel: fact.newTab ? 'noopener noreferrer' : undefined, target: fact.newTab ? '_blank' : undefined, className: "underline underline-offset-4 hover:underline", children: fact.value })) : (fact.value) })] }, index)))] }));
+}
+export { FactList };

package/dist/components/ui/product-mark.d.ts

@@ -0,0 +1,115 @@
+import type { PackId } from '../../theming';
+/**
+ * The three sizes a product mark is drawn at: the mark's diameter and the name
+ * beside it, taken together so the two parts of the mark stay in proportion.
+ *
+ * The mark is one of a fixed set rather than something a caller sizes through
+ * `className`, because `className` is layout only and a mark sized by a layout
+ * class is a mark the layout owns. A product set shows its marks in a switcher,
+ * in a row and on a page header, and those three are the sizes a set needs.
+ */
+declare const SIZES: {
+    readonly sm: {
+        readonly mark: "size-4";
+        readonly name: "text-xs";
+    };
+    readonly md: {
+        readonly mark: "size-5";
+        readonly name: "text-sm";
+    };
+    readonly lg: {
+        readonly mark: "size-6";
+        readonly name: "text-base";
+    };
+};
+/**
+ * The three sizes a product mark is drawn at.
+ *
+ * @defaultValue 'md'
+ */
+export type ProductMarkSize = keyof typeof SIZES;
+/**
+ * The props a ProductMark takes.
+ *
+ * There is no product directory in this package. A product's identity is the
+ * consumer's data, so the Component takes the three facts the mark is drawn
+ * from and owns none of them: `id` for the markup, `name` for the second part,
+ * and `pack` for the hue. Where the set of products is published is the
+ * consumer's decision, and Prism ships the mark rather than a list of products.
+ */
+export type ProductMarkProps = {
+    /**
+     * The product's key within the set it is distinguished in. It is carried on
+     * the markup as `data-product` so a test can name one mark rather than the
+     * first one, and so two marks in one document are individually addressable.
+     */
+    id: string;
+    /**
+     * The product's name, which is the mark's second part and the word that
+     * carries the identity. The mark sets it in `brand-ink` rather than in
+     * `foreground`, which is DESIGN.md's Brand Ink Rule: a name that has to read
+     * as the brand reads `brand-ink`, and `foreground` is a tinted neutral with
+     * almost no chroma by design.
+     */
+    name: string;
+    /**
+     * The product's pack, which is the mark's hue. Omit it, or pass `null`, for
+     * the one entry in a set that has no pack of its own: that entry is drawn as
+     * the full spectrum rather than as a colourless mark. See `SPECTRUM` above.
+     *
+     * `default` is a real answer and not the same as the empty one. The base pack
+     * is a pack a product can wear, and it is the absence of a `data-pack`
+     * attribute, so a product whose pack is `default` carries no attribute and its
+     * core resolves the base pack's `primary` from the page.
+     */
+    pack?: PackId | null;
+    /**
+     * Which of the three drawn sizes to use. @defaultValue 'md'
+     */
+    size?: ProductMarkSize;
+    /**
+     * Layout only, exactly as on every Component. Changing a Prism-owned visual
+     * property from here is prohibited, and this Component spreads no other prop,
+     * so there is no second route to its ink.
+     */
+    className?: string;
+};
+/**
+ * A product's two-part colour mark: a hairline ring in the brand ink around a
+ * core in the pack's own fill, beside the product's name in the brand ink.
+ *
+ * Two parts, and both colours come from tokens, which is the whole reason this
+ * is promoted out of the two hand-written copies it replaces. The ring is
+ * `brand-ink`, the pack's brand hue as a stroke; the core is `primary`, the
+ * pack's brand value as a fill. That split is not a preference. DESIGN.md's Fill,
+ * Not the Ink Rule says a pastel brand value is a fill and never text, so the
+ * core may be `primary` and the name may not, and the Brand Ink Rule says the
+ * name reads `brand-ink` rather than `foreground` or `primary-foreground`. A
+ * hand-written copy gets one of those two wrong and nothing in the rendered
+ * result says which.
+ *
+ * Uniqueness across the set comes from the pack: each product wears its own
+ * pack's hue, and the one entry with no pack wears the spectrum, so no two marks
+ * in a set resolve to the same pair of colours. The set is the consumer's data.
+ * This Component draws one member of it, and it is the same member wherever it is
+ * drawn from.
+ *
+ * The mark carries its own `data-pack` boundary on its root, so a product's hue
+ * follows from the pack the caller passed rather than from whichever pack the
+ * page happens to be wearing, and a boundary lands on the mark rather than on
+ * whatever encloses it. The boundary is on a span carrying no radius utility,
+ * which is one of the two placements DESIGN.md's pack-boundary law allows, and
+ * the disc itself is fully rounded. Nothing about the mark's shape moves when a
+ * pack boundary lands above it, which is the half of that law a consumer
+ * implementing only the colour half gets wrong.
+ *
+ * It is a server Component: no hook, no mode, no context, no client code and no
+ * `'use client'` line. A consumer renders it from a server file and needs
+ * nothing from the provider mounted.
+ *
+ * The disc is `aria-hidden` and the name is not, so the mark adds a shape beside
+ * the word rather than a second reading of it.
+ */
+declare function ProductMark({ id, name, pack, size, className }: ProductMarkProps): import("react").JSX.Element;
+export { ProductMark };
+//# sourceMappingURL=product-mark.d.ts.map

package/dist/components/ui/product-mark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-mark.d.ts","sourceRoot":"","sources":["../../../src/components/ui/product-mark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AA2B3C;;;;;;;;GAQG;AACH,QAAA,MAAM,KAAK;;;;;;;;;;;;;CAID,CAAA;AAEV;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,KAAK,CAAA;AAEhD;;;;;;;;GAQG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;;;;OAMG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,iBAAS,WAAW,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BA2BhF;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}