@nanisoft/prism-ui 0.5.0 → 0.6.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;;GAMG;AACH,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAW3D;AAED;;;;;;GAMG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAWjE;AAED;;;;;;;;GAQG;AACH,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAQhE;AAED;;;GAGG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAQtE;AAED,wEAAwE;AACxE,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAElE;AAED;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAQjE;AAED,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/ui/card.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+/**
+ * A bordered surface for a small group of related content.
+ *
+ * Compose it from `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`
+ * and `CardFooter`. Those parts ship from this module rather than as separate
+ * subpaths.
+ */
+function Card({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card", className: cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', className), ...props }));
+}
+/**
+ * The head of a card: the row above the card's content.
+ *
+ * A part rather than an Item, and it stays inside this module: `CardHeader` is not
+ * a second catalogue entry, and DESIGN.md's authoring contract says compound parts
+ * ship from their parent module and do not form a second vocabulary.
+ */
+function CardHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-header", className: cn('@container/card-header grid auto-rows-min items-start gap-1.5 px-6', className), ...props }));
+}
+/**
+ * The card's title: the one line that names the group of related content.
+ *
+ * Renders a `div` rather than a heading, because a card's title is not always the
+ * heading of the region it sits in: four cards in a grid are four titles under one
+ * section heading, and four `h3`s under one `h2` is right while four `h2`s is
+ * four sections. Pass Prism's `Heading` inside it when the card is the only thing
+ * in its region and the outline should say so.
+ */
+function CardTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-title", className: cn('font-semibold leading-none', className), ...props }));
+}
+/**
+ * The supporting line under a card's title: one sentence about what the card
+ * holds.
+ */
+function CardDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-description", className: cn('text-muted-foreground text-sm', className), ...props }));
+}
+/** The card's body: the content the title and description introduce. */
+function CardContent({ className, ...props }) {
+    return _jsx("div", { "data-slot": "card-content", className: cn('px-6', className), ...props });
+}
+/**
+ * The foot of a card: the actions that belong to the card rather than to the
+ * page.
+ */
+function CardFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-footer", className: cn('flex items-center px-6', className), ...props }));
+}
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

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

@@ -0,0 +1,43 @@
+import type { ComponentProps } from 'react';
+/**
+ * The props the Checkbox forwards to its Base UI root.
+ *
+ * Declared here rather than re-exported from Base UI so no upstream type
+ * crosses the package seam (ticket 07 section 6).
+ */
+export interface CheckboxProps extends Omit<ComponentProps<'span'>, 'onChange'> {
+    /** The control's accessible name when no visible label is used. */
+    'aria-label'?: string;
+    /** The controlled ticked state. */
+    checked?: boolean;
+    /** The initially ticked state, for an uncontrolled checkbox. */
+    defaultChecked?: boolean;
+    /** Whether the checkbox shows a mixed state: neither ticked nor unticked. */
+    indeterminate?: boolean;
+    /** Whether the control ignores user interaction. */
+    disabled?: boolean;
+    /** Whether the value must be ticked before the form submits. */
+    readOnly?: boolean;
+    /** Whether the value must be ticked before the form submits. */
+    required?: boolean;
+    /** The form field name submitted with the form. */
+    name?: string;
+    /** The value submitted when the checkbox is ticked. */
+    value?: string;
+    /** Identifies the form that owns the hidden input. */
+    form?: string;
+    /** Called when the ticked state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+}
+/**
+ * A ticked or unticked choice, with an optional mixed state.
+ *
+ * The Checkbox renders as a span with a hidden native input beside it, so it
+ * submits and validates like a checkbox while accepting Prism's styling. Space
+ * toggles the focused control, and the indeterminate state is announced as
+ * `mixed` to assistive technology. Pair it with a `FieldLabel` in a `Field`,
+ * and mark it invalid with `aria-invalid` when the value is rejected.
+ */
+declare function Checkbox({ className, indeterminate, ...props }: CheckboxProps): import("react").JSX.Element;
+export { Checkbox };
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;GAKG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAC7E,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gEAAgE;IAChE,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,6EAA6E;IAC7E,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4CAA4C;IAC5C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC7C;AAED;;;;;;;;GAQG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BA4BtE;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/ui/checkbox.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+import { CheckIcon, MinusIcon } from 'lucide-react';
+import { cn } from '../../lib/utils';
+/**
+ * A ticked or unticked choice, with an optional mixed state.
+ *
+ * The Checkbox renders as a span with a hidden native input beside it, so it
+ * submits and validates like a checkbox while accepting Prism's styling. Space
+ * toggles the focused control, and the indeterminate state is announced as
+ * `mixed` to assistive technology. Pair it with a `FieldLabel` in a `Field`,
+ * and mark it invalid with `aria-invalid` when the value is rejected.
+ */
+function Checkbox({ className, indeterminate, ...props }) {
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", indeterminate: indeterminate, className: cn('border-input bg-background text-primary-foreground shadow-xs peer size-4 shrink-0 rounded-sm border outline-none', 'transition-[color,box-shadow,background-color] duration-fast ease-out', 'data-[checked]:border-primary data-[checked]:bg-primary data-[indeterminate]:border-primary data-[indeterminate]:bg-primary', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'aria-invalid:border-destructive aria-invalid:ring-destructive/20', 'disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-current", children: indeterminate ? (_jsx(MinusIcon, { className: "size-3.5" })) : (_jsx(CheckIcon, { className: "size-3.5" })) }) }));
+}
+export { Checkbox };

package/dist/components/ui/cta-link.d.ts

@@ -0,0 +1,45 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+declare const ctaLinkVariants: (props?: ({
+    variant?: "default" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CtaLinkProps = Omit<ComponentProps<'a'>, 'href' | 'target'> & VariantProps<typeof ctaLinkVariants> & {
+    /**
+     * The destination. Required, because an anchor without one is not a link: a
+     * screen reader announces no destination, the middle-click and open-in-new-tab
+     * affordances go quiet, and the control is a button that cannot act.
+     */
+    href: string;
+    /**
+     * Opens the destination in a new browsing context. This is the only way to
+     * ask for one: `target` is not accepted, so the safe relationship below
+     * cannot be opted out of by accident.
+     *
+     * Prism does not decide what counts as external. A destination on another
+     * origin is not automatically a new tab, and a destination on this origin is
+     * not automatically the same tab, so the caller declares it.
+     */
+    newTab?: boolean;
+};
+/**
+ * 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.
+ */
+declare function CtaLink({ className, variant, size, href, newTab, rel, ...props }: CtaLinkProps): import("react").JSX.Element;
+export { CtaLink };
+//# sourceMappingURL=cta-link.d.ts.map

package/dist/components/ui/cta-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cta-link.d.ts","sourceRoot":"","sources":["../../../src/components/ui/cta-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AA0B3C,QAAA,MAAM,eAAe;;;8EAsCpB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,GACrE,YAAY,CAAC,OAAO,eAAe,CAAC,GAAG;IACrC;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,OAAO,CAAC,EACf,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,MAAc,EACd,GAAG,EACH,GAAG,KAAK,EACT,EAAE,YAAY,+BAWd;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}

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/dialog.d.ts

@@ -0,0 +1,81 @@
+import type { ComponentProps } from 'react';
+/**
+ * The props the Dialog root forwards to Base UI.
+ *
+ * Declared here rather than re-exported from Base UI so no upstream type
+ * crosses the package seam (ticket 07 section 6).
+ */
+export interface DialogProps {
+    /** The controlled open state. */
+    open?: boolean;
+    /** The initially open state, for an uncontrolled dialog. */
+    defaultOpen?: boolean;
+    /** Called when the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether the dialog is modal. @defaultValue true */
+    modal?: boolean | 'trap-focus';
+    /** The trigger and content. */
+    children?: React.ReactNode;
+}
+/** The props DialogTrigger forwards to Base UI. */
+export interface DialogTriggerProps extends ComponentProps<'button'> {
+}
+/**
+ * The props DialogContent forwards to Base UI.
+ *
+ * Declared here rather than re-exported from Base UI so no upstream type
+ * crosses the package seam (ticket 07 section 6).
+ */
+export interface DialogContentProps extends ComponentProps<'div'> {
+    /**
+     * Where the dialog is anchored.
+     *
+     * `center` is a modal card; `top`, `bottom`, `left` and `right` anchor the
+     * panel to an edge as a sheet, which is the old drawer re-expressed.
+     * @defaultValue center
+     */
+    side?: 'center' | 'top' | 'bottom' | 'left' | 'right';
+    /** Whether the built-in close control is rendered. @defaultValue true */
+    showCloseButton?: boolean;
+}
+/** The props DialogHeader forwards to a plain container. */
+export interface DialogHeaderProps extends ComponentProps<'div'> {
+}
+/** The props DialogFooter forwards to a plain container. */
+export interface DialogFooterProps extends ComponentProps<'div'> {
+}
+/** The props DialogTitle forwards to Base UI. */
+export interface DialogTitleProps extends ComponentProps<'h2'> {
+}
+/** The props DialogDescription forwards to Base UI. */
+export interface DialogDescriptionProps extends ComponentProps<'p'> {
+}
+/** The props DialogClose forwards to Base UI. */
+export interface DialogCloseProps extends ComponentProps<'button'> {
+}
+/**
+ * A modal surface that interrupts the page.
+ *
+ * The dialog traps focus while it is open, locks page scroll, closes on
+ * Escape and on an outside press, and returns focus to its trigger when it
+ * closes. Always give it a `DialogTitle`, which names the dialog for every
+ * reader. Use a Dialog for a decision or a short task; for content that is
+ * not a task, use a Popover or navigate to a page.
+ */
+declare function Dialog({ ...props }: DialogProps): import("react").JSX.Element;
+/** The element that opens the dialog. */
+declare function DialogTrigger({ className, ...props }: DialogTriggerProps): import("react").JSX.Element;
+/** The dialog panel, its backdrop and its portal. */
+declare function DialogContent({ className, side, showCloseButton, children, ...props }: DialogContentProps): import("react").JSX.Element;
+/** The dialog's heading area, above the body. */
+declare function DialogHeader({ className, ...props }: DialogHeaderProps): import("react").JSX.Element;
+/** The dialog's action area, below the body. */
+declare function DialogFooter({ className, ...props }: DialogFooterProps): import("react").JSX.Element;
+/** The dialog's heading. It names the dialog for assistive technology. */
+declare function DialogTitle({ className, ...props }: DialogTitleProps): import("react").JSX.Element;
+/** A supporting line under the title. */
+declare function DialogDescription({ className, ...props }: DialogDescriptionProps): import("react").JSX.Element;
+/** A control that closes the dialog from inside its content. */
+declare function DialogClose({ className, ...props }: DialogCloseProps): import("react").JSX.Element;
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, };
+//# sourceMappingURL=dialog.d.ts.map