@corbits/react-ui 0.1.0

package/dist/ui/compare-body.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { ArtifactNotice } from "./artifact-notice.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
+/**
+ * Reads a `Comparison` out of a JSON string, or returns `null`.
+ *
+ * Structural, not schema-driven: the registry ships no validation dependency,
+ * and this only has to be strict enough that a malformed payload falls back to
+ * showing the raw text rather than rendering half a comparison. It checks the
+ * fields it will actually index and nothing else — over-validating a viewer's
+ * input rejects payloads it could have drawn perfectly well.
+ */ export function parseComparison(json) {
+    let raw;
+    try {
+        raw = JSON.parse(json);
+    } catch  {
+        return null;
+    }
+    if (typeof raw !== "object" || raw === null) return null;
+    const variants = raw.variants;
+    if (!Array.isArray(variants) || variants.length === 0) return null;
+    const ok = variants.every((variant)=>typeof variant === "object" && variant !== null && typeof variant.id === "string" && typeof variant.label === "string" && typeof variant.content === "string");
+    return ok ? raw : null;
+}
+/**
+ * Two or more variants of the same thing, side by side, with the verdict said
+ * out loud.
+ *
+ * The winner is announced three ways — a text badge, a `<mark>`-free bold
+ * label, and an `aria-label` on the column — and only incidentally by a tinted
+ * border. Colour cannot be the encoding here: "which one won" is the single
+ * fact the surface exists to communicate, and a reader who cannot see the tint
+ * would otherwise get a page of undifferentiated columns.
+ *
+ * Columns collapse to a stack below `md`. Side-by-side is the whole idea, but a
+ * 320px viewport showing two 140px columns compares nothing; stacked variants
+ * with their labels intact at least remain readable.
+ */ export function CompareBody({ comparison, className }) {
+    const { variants, winnerId, rationale, criteria } = comparison;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn("flex flex-col gap-6", className),
+        children: [
+            rationale === undefined ? null : /*#__PURE__*/ _jsx("p", {
+                className: "max-w-prose text-sm leading-relaxed text-muted-foreground",
+                children: rationale
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "grid gap-4 md:grid-cols-2",
+                children: variants.map((variant)=>{
+                    const won = variant.id === winnerId;
+                    return /*#__PURE__*/ _jsxs("section", {
+                        "aria-label": won ? `${variant.label} — selected` : variant.label,
+                        className: cn("flex flex-col gap-3 rounded-lg border p-4", won ? "border-primary-emphasis bg-card" : "border-border"),
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center gap-2",
+                                children: [
+                                    /*#__PURE__*/ _jsx("h3", {
+                                        className: "text-sm font-semibold",
+                                        children: variant.label
+                                    }),
+                                    won ? /*#__PURE__*/ _jsxs("span", {
+                                        className: "inline-flex items-center gap-1 rounded-sm bg-muted px-1.5 py-0.5 text-xs font-medium text-primary-emphasis",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Check, {
+                                                className: "size-3",
+                                                "aria-hidden": true
+                                            }),
+                                            "Selected"
+                                        ]
+                                    }) : null
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: "text-sm leading-relaxed whitespace-pre-wrap",
+                                children: variant.content
+                            })
+                        ]
+                    }, variant.id);
+                })
+            }),
+            criteria === undefined || criteria.length === 0 ? null : /*#__PURE__*/ _jsxs(Table, {
+                "aria-label": "Scores by criterion",
+                children: [
+                    /*#__PURE__*/ _jsx(TableHeader, {
+                        children: /*#__PURE__*/ _jsxs(TableRow, {
+                            children: [
+                                /*#__PURE__*/ _jsx(TableHead, {
+                                    scope: "col",
+                                    children: "Criterion"
+                                }),
+                                variants.map((variant)=>/*#__PURE__*/ _jsx(TableHead, {
+                                        scope: "col",
+                                        className: "text-right",
+                                        children: variant.label
+                                    }, variant.id))
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(TableBody, {
+                        children: criteria.map((criterion)=>/*#__PURE__*/ _jsxs(TableRow, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        className: "font-medium",
+                                        children: criterion.label
+                                    }),
+                                    variants.map((variant)=>{
+                                        const score = criterion.scores[variant.id];
+                                        return /*#__PURE__*/ _jsx(TableCell, {
+                                            className: "text-right font-mono tabular-nums",
+                                            children: score === undefined ? "—" : score.toLocaleString()
+                                        }, variant.id);
+                                    })
+                                ]
+                            }, criterion.label))
+                    })
+                ]
+            })
+        ]
+    });
+}
+/** The JSON-string entry point, for when the payload arrives as artifact content. */ export function CompareBodyFromJson({ content, pending }) {
+    if (content.trim() === "") return /*#__PURE__*/ _jsx(ArtifactNotice, {
+        pending: pending
+    });
+    const comparison = parseComparison(content);
+    if (comparison === null) {
+        // The payload is not a comparison. Showing it verbatim beats an error: the
+        // content is still the artifact, and the user can read it.
+        return /*#__PURE__*/ _jsx("pre", {
+            className: "overflow-auto rounded-md border border-border bg-muted p-3 font-mono text-xs",
+            children: content
+        });
+    }
+    return /*#__PURE__*/ _jsx(CompareBody, {
+        comparison: comparison
+    });
+}

package/dist/ui/confirm-button.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+import { type ButtonProps } from "./button.js";
+export type ConfirmButtonProps = Omit<ButtonProps, "onClick" | "children"> & {
+    /** Fires on the second, confirming click only. */
+    readonly onConfirm: () => void;
+    readonly children: ReactNode;
+    readonly confirmLabel?: ReactNode;
+    /** How long the armed state lasts before disarming, in ms. */
+    readonly resetMs?: number;
+    /**
+     * Start already armed. Uncontrolled — it only seeds the initial `useState`,
+     * so it has no effect after mount. For stories and tests that need to show
+     * or exercise the armed state without simulating a first click.
+     */
+    readonly defaultArmed?: boolean;
+};
+/**
+ * A destructive action behind a second click.
+ *
+ * For actions that are irreversible but small — remove a row, revoke a key —
+ * where a modal is more ceremony than the action deserves. Anything with
+ * consequences worth reading a sentence about should use a `Dialog` instead;
+ * this deliberately gives the user nothing to read.
+ *
+ * It disarms on blur as well as on a timer. Leaving a primed destructive button
+ * behind when the user's attention has moved elsewhere is how the second click
+ * lands by accident, which is the exact thing this exists to prevent.
+ */
+export declare function ConfirmButton({ onConfirm, children, confirmLabel, resetMs, defaultArmed, variant, ...props }: ConfirmButtonProps): import("react").JSX.Element;

package/dist/ui/confirm-button.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "./button.js";
+/**
+ * A destructive action behind a second click.
+ *
+ * For actions that are irreversible but small — remove a row, revoke a key —
+ * where a modal is more ceremony than the action deserves. Anything with
+ * consequences worth reading a sentence about should use a `Dialog` instead;
+ * this deliberately gives the user nothing to read.
+ *
+ * It disarms on blur as well as on a timer. Leaving a primed destructive button
+ * behind when the user's attention has moved elsewhere is how the second click
+ * lands by accident, which is the exact thing this exists to prevent.
+ */ export function ConfirmButton({ onConfirm, children, confirmLabel = "Click again to confirm", resetMs = 3000, defaultArmed = false, variant = "outline", ...props }) {
+    const [armed, setArmed] = useState(defaultArmed);
+    const timerRef = useRef(undefined);
+    const disarm = ()=>{
+        window.clearTimeout(timerRef.current);
+        setArmed(false);
+    };
+    useEffect(()=>()=>window.clearTimeout(timerRef.current), []);
+    return /*#__PURE__*/ _jsx(Button, {
+        ...props,
+        variant: armed ? "destructive" : variant,
+        onBlur: disarm,
+        onClick: ()=>{
+            if (!armed) {
+                setArmed(true);
+                timerRef.current = window.setTimeout(()=>setArmed(false), resetMs);
+                return;
+            }
+            disarm();
+            onConfirm();
+        },
+        children: /*#__PURE__*/ _jsx("span", {
+            "aria-live": "polite",
+            children: armed ? confirmLabel : children
+        })
+    });
+}

package/dist/ui/corbits-mark.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The Corbits mountain mark.
+ *
+ * The path and viewBox are exported separately from the component so a non-SVG
+ * consumer — a canvas splash, an OG-image generator — can build the same
+ * geometry from the same source instead of tracing its own copy.
+ *
+ * It fills with `currentColor`, so it takes the colour of whatever it sits in
+ * and needs no dark-mode variant. Size it with a class; there is no `size` prop
+ * because `className` already does that job in a Tailwind codebase.
+ */
+export declare const CORBITS_MARK_PATH = "M392.899 189.107L397.586 197.031C397.586 197.031 399.539 202.891 399.539 204.844L403.094 222.422C407 222.813 407.39 226.328 409.734 227.109C412.078 228.281 415.203 231.797 416.765 235.313C417.156 236.875 418.718 240.781 420.671 244.688C422.234 247.422 422.625 250.156 424.578 251.719L426.921 254.062C432.39 258.359 432.781 261.484 433.171 272.422C432.781 280.625 434.734 295.078 435.906 301.328C436.296 302.891 436.296 302.891 437.468 303.281C438.25 304.063 437.078 302.891 437.859 303.281C439.031 304.063 443.328 304.844 449.187 307.188C451.921 307.969 454.265 309.141 455.046 313.828C456.609 320.469 464.421 350.938 467.156 369.688L468.328 385.313L447.977 371.026C443.68 353.057 435.867 327.667 433.914 323.76C431.57 321.026 423.758 320.245 419.461 319.463C416.336 319.073 413.992 317.12 412.43 312.042C412.43 308.135 411.649 301.495 410.086 292.51C408.914 285.088 408.914 281.182 408.914 277.276C408.914 272.198 406.57 270.245 400.32 263.995L397.977 259.307C391.336 246.807 390.945 244.854 387.039 244.073C385.376 244.024 384.994 238.473 383.562 235.313C383.562 234.141 384.734 231.016 383.562 225.156L368.288 212.656C361.648 212.266 357.352 225.825 353.445 232.466L348.367 244.966L342.899 261.372L341.727 263.326L340.555 266.06L330.008 281.294L326.102 287.544L324.93 289.107L317.117 299.263L308.524 309.029L291.727 327.779L287.039 334.029L284.305 335.982L270.242 352.779L267.508 355.513L265.555 358.638L264.383 359.81L256.18 368.404L248.367 375.044L246.805 376.607L241.336 380.904C238.602 384.029 231.57 384.531 228.055 384.531C225.71 382.578 216.248 381.938 217.508 379.62L226.883 372.588L228.836 371.026L234.695 364.776L237.039 362.432L242.508 357.354C247.195 352.667 251.102 349.151 253.055 340.948C254.227 336.651 264.383 326.104 268.289 321.807L269.07 321.417L295.242 293.682L315.273 261.372L318.397 253.56C320.35 249.654 320.741 247.086 321.522 244.464C322.013 242.815 326.6 216.563 324.93 212.656C323.26 208.75 332.088 195.551 326.209 189.721C323.866 187.768 320.35 185.815 318.397 183.862C313.507 178.972 300.038 175.659 301.6 169.409L300.711 159.81C303.445 148.482 306.57 135.982 303.445 135.982C301.492 135.982 290.945 149.654 286.258 155.513L285.086 156.685C276.883 168.013 266.336 177.779 258.133 191.841L242.899 218.404L237.039 226.997C235.476 228.281 229.617 232.188 227.663 232.188C221.804 228.281 222.586 225.825 217.508 234.419L203.055 260.201L201.492 264.107L200.711 265.279L197.977 270.357L196.414 273.872L182.742 296.919L173.758 314.107L170.242 319.185L168.68 321.919L167.117 323.984L163.992 327.779C163.958 327.968 156.476 332.069 155.399 331.797C154.321 331.525 148.835 329.953 147.586 327.779C146.337 325.605 148.281 323.835 149.149 322.7C154.227 316.06 153.445 310.313 153.445 308.359C153.445 306.406 151.492 298.594 151.492 296.641C151.492 294.688 151.102 294.688 151.492 284.922C152.274 273.594 143.289 274.654 144.852 265.279C145.633 259.029 146.414 251.216 143.289 253.56C141.727 253.56 129.617 266.841 124.149 273.482L114.774 285.982L99.5392 305.122L96.0236 308.247L90.5548 313.716L87.4298 315.669C84.6954 319.966 77.2736 323.091 73.3673 329.732L67.1173 340.279L64.7736 344.966L61.6486 349.654L60.4767 350.826L57.7423 355.513L55.3986 358.247L42.1173 375.826L35.0861 383.247C33.7739 384.117 33.1434 384.48 32.3517 384.531C31.5599 384.582 32.3525 374.383 32.3525 374.383L33.1329 370.859L33.9142 369.185C36.6486 363.325 41.3361 357.076 46.0236 350.826C51.1017 343.404 57.3517 329.732 63.6017 320.747L68.6798 316.06L75.3204 308.247C78.0548 306.294 81.9611 301.997 86.2579 296.529L87.8204 295.357L94.8517 286.763C100.711 278.56 116.727 261.372 126.492 251.997L128.055 249.766L130.789 247.31C137.43 241.451 143.68 233.247 148.758 233.247C156.961 233.638 162.43 240.279 167.117 244.966L184.305 261.372C185.867 262.935 187.43 262.154 188.211 260.591C200.32 237.935 210.867 216.841 219.461 216.06H226.492L229.617 213.716C236.258 202.779 244.07 187.935 250.711 178.169C258.524 167.622 283.914 134.81 298.758 121.138C302.274 117.232 305.008 115.781 307.742 115C311.649 115 315.555 116.841 319.07 119.575C333.524 131.685 356.961 157.857 366.336 168.404L372.195 173.091L387.039 181.294L390.556 185.313L392.899 189.107Z";
+/** The mark's viewBox, exported so non-SVG consumers can map path space to pixels. */
+export declare const CORBITS_MARK_VIEWBOX: {
+    readonly x: 32;
+    readonly y: 115;
+    readonly width: 437;
+    readonly height: 270;
+};
+export declare function CorbitsMark({ title, decorative, className, }: {
+    /** Accessible name. Ignored when `decorative`. */
+    title?: string;
+    /**
+     * The mark is beside text that already says the name. Hides it from assistive
+     * tech rather than reading the brand twice in a row.
+     */
+    decorative?: boolean;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/ui/corbits-mark.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+/**
+ * The Corbits mountain mark.
+ *
+ * The path and viewBox are exported separately from the component so a non-SVG
+ * consumer — a canvas splash, an OG-image generator — can build the same
+ * geometry from the same source instead of tracing its own copy.
+ *
+ * It fills with `currentColor`, so it takes the colour of whatever it sits in
+ * and needs no dark-mode variant. Size it with a class; there is no `size` prop
+ * because `className` already does that job in a Tailwind codebase.
+ */ export const CORBITS_MARK_PATH = "M392.899 189.107L397.586 197.031C397.586 197.031 399.539 202.891 399.539 204.844L403.094 222.422C407 222.813 407.39 226.328 409.734 227.109C412.078 228.281 415.203 231.797 416.765 235.313C417.156 236.875 418.718 240.781 420.671 244.688C422.234 247.422 422.625 250.156 424.578 251.719L426.921 254.062C432.39 258.359 432.781 261.484 433.171 272.422C432.781 280.625 434.734 295.078 435.906 301.328C436.296 302.891 436.296 302.891 437.468 303.281C438.25 304.063 437.078 302.891 437.859 303.281C439.031 304.063 443.328 304.844 449.187 307.188C451.921 307.969 454.265 309.141 455.046 313.828C456.609 320.469 464.421 350.938 467.156 369.688L468.328 385.313L447.977 371.026C443.68 353.057 435.867 327.667 433.914 323.76C431.57 321.026 423.758 320.245 419.461 319.463C416.336 319.073 413.992 317.12 412.43 312.042C412.43 308.135 411.649 301.495 410.086 292.51C408.914 285.088 408.914 281.182 408.914 277.276C408.914 272.198 406.57 270.245 400.32 263.995L397.977 259.307C391.336 246.807 390.945 244.854 387.039 244.073C385.376 244.024 384.994 238.473 383.562 235.313C383.562 234.141 384.734 231.016 383.562 225.156L368.288 212.656C361.648 212.266 357.352 225.825 353.445 232.466L348.367 244.966L342.899 261.372L341.727 263.326L340.555 266.06L330.008 281.294L326.102 287.544L324.93 289.107L317.117 299.263L308.524 309.029L291.727 327.779L287.039 334.029L284.305 335.982L270.242 352.779L267.508 355.513L265.555 358.638L264.383 359.81L256.18 368.404L248.367 375.044L246.805 376.607L241.336 380.904C238.602 384.029 231.57 384.531 228.055 384.531C225.71 382.578 216.248 381.938 217.508 379.62L226.883 372.588L228.836 371.026L234.695 364.776L237.039 362.432L242.508 357.354C247.195 352.667 251.102 349.151 253.055 340.948C254.227 336.651 264.383 326.104 268.289 321.807L269.07 321.417L295.242 293.682L315.273 261.372L318.397 253.56C320.35 249.654 320.741 247.086 321.522 244.464C322.013 242.815 326.6 216.563 324.93 212.656C323.26 208.75 332.088 195.551 326.209 189.721C323.866 187.768 320.35 185.815 318.397 183.862C313.507 178.972 300.038 175.659 301.6 169.409L300.711 159.81C303.445 148.482 306.57 135.982 303.445 135.982C301.492 135.982 290.945 149.654 286.258 155.513L285.086 156.685C276.883 168.013 266.336 177.779 258.133 191.841L242.899 218.404L237.039 226.997C235.476 228.281 229.617 232.188 227.663 232.188C221.804 228.281 222.586 225.825 217.508 234.419L203.055 260.201L201.492 264.107L200.711 265.279L197.977 270.357L196.414 273.872L182.742 296.919L173.758 314.107L170.242 319.185L168.68 321.919L167.117 323.984L163.992 327.779C163.958 327.968 156.476 332.069 155.399 331.797C154.321 331.525 148.835 329.953 147.586 327.779C146.337 325.605 148.281 323.835 149.149 322.7C154.227 316.06 153.445 310.313 153.445 308.359C153.445 306.406 151.492 298.594 151.492 296.641C151.492 294.688 151.102 294.688 151.492 284.922C152.274 273.594 143.289 274.654 144.852 265.279C145.633 259.029 146.414 251.216 143.289 253.56C141.727 253.56 129.617 266.841 124.149 273.482L114.774 285.982L99.5392 305.122L96.0236 308.247L90.5548 313.716L87.4298 315.669C84.6954 319.966 77.2736 323.091 73.3673 329.732L67.1173 340.279L64.7736 344.966L61.6486 349.654L60.4767 350.826L57.7423 355.513L55.3986 358.247L42.1173 375.826L35.0861 383.247C33.7739 384.117 33.1434 384.48 32.3517 384.531C31.5599 384.582 32.3525 374.383 32.3525 374.383L33.1329 370.859L33.9142 369.185C36.6486 363.325 41.3361 357.076 46.0236 350.826C51.1017 343.404 57.3517 329.732 63.6017 320.747L68.6798 316.06L75.3204 308.247C78.0548 306.294 81.9611 301.997 86.2579 296.529L87.8204 295.357L94.8517 286.763C100.711 278.56 116.727 261.372 126.492 251.997L128.055 249.766L130.789 247.31C137.43 241.451 143.68 233.247 148.758 233.247C156.961 233.638 162.43 240.279 167.117 244.966L184.305 261.372C185.867 262.935 187.43 262.154 188.211 260.591C200.32 237.935 210.867 216.841 219.461 216.06H226.492L229.617 213.716C236.258 202.779 244.07 187.935 250.711 178.169C258.524 167.622 283.914 134.81 298.758 121.138C302.274 117.232 305.008 115.781 307.742 115C311.649 115 315.555 116.841 319.07 119.575C333.524 131.685 356.961 157.857 366.336 168.404L372.195 173.091L387.039 181.294L390.556 185.313L392.899 189.107Z";
+/** The mark's viewBox, exported so non-SVG consumers can map path space to pixels. */ export const CORBITS_MARK_VIEWBOX = {
+    x: 32,
+    y: 115,
+    width: 437,
+    height: 270
+};
+export function CorbitsMark({ title = "Corbits", decorative = false, className }) {
+    return /*#__PURE__*/ _jsx("svg", {
+        viewBox: "32 115 437 270",
+        fill: "none",
+        role: decorative ? undefined : "img",
+        "aria-hidden": decorative ? true : undefined,
+        "aria-label": decorative ? undefined : title,
+        className: cn("size-6", className),
+        children: /*#__PURE__*/ _jsx("path", {
+            d: CORBITS_MARK_PATH,
+            fill: "currentColor"
+        })
+    });
+}

package/dist/ui/csv-table.d.ts

@@ -0,0 +1,22 @@
+/**
+ * CSV text, rendered as a table when that is honest and as raw text when it is
+ * not.
+ *
+ * Three outcomes, in order of preference: a grid, the source text, or a refusal.
+ * The order is not about effort — it is about truthfulness. A grid is the most
+ * useful and the most capable of lying, so it is only used once the parse is
+ * provably rectangular; otherwise the source text is shown verbatim, where a
+ * ragged row is visibly ragged instead of silently shifting cells under the
+ * wrong headers.
+ *
+ * The parse is memoised on the text. Without it, any parent re-render — a hover,
+ * a filter's own state — re-walks every row of the file.
+ *
+ * Columns and rows are keyed by index, never by content. CSV rows duplicate
+ * freely and headers are routinely empty or repeated ("", two "Name" columns);
+ * a content key would collide and drop data.
+ */
+export declare function CsvTable({ text, caption }: {
+    readonly text: string;
+    readonly caption?: string;
+}): import("react").JSX.Element;

package/dist/ui/csv-table.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { capCsv, isTabular, parseCsv } from "../lib/csv.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
+/**
+ * CSV text, rendered as a table when that is honest and as raw text when it is
+ * not.
+ *
+ * Three outcomes, in order of preference: a grid, the source text, or a refusal.
+ * The order is not about effort — it is about truthfulness. A grid is the most
+ * useful and the most capable of lying, so it is only used once the parse is
+ * provably rectangular; otherwise the source text is shown verbatim, where a
+ * ragged row is visibly ragged instead of silently shifting cells under the
+ * wrong headers.
+ *
+ * The parse is memoised on the text. Without it, any parent re-render — a hover,
+ * a filter's own state — re-walks every row of the file.
+ *
+ * Columns and rows are keyed by index, never by content. CSV rows duplicate
+ * freely and headers are routinely empty or repeated ("", two "Name" columns);
+ * a content key would collide and drop data.
+ */ export function CsvTable({ text, caption = "CSV contents" }) {
+    const parsed = useMemo(()=>parseCsv(text), [
+        text
+    ]);
+    if (parsed === null) {
+        return /*#__PURE__*/ _jsx("p", {
+            className: "rounded-md border border-border bg-muted px-4 py-6 text-center text-sm text-muted-foreground",
+            children: "This file is too large to preview — download it to see the whole thing."
+        });
+    }
+    if (!isTabular(parsed)) {
+        // Height-capped with its own scroll: a multi-thousand-line file as one
+        // <pre> is the same DOM freeze the size guard exists to prevent.
+        return /*#__PURE__*/ _jsx("pre", {
+            className: "max-h-96 overflow-auto rounded-md border border-border bg-muted p-3 font-mono text-xs",
+            children: text
+        });
+    }
+    const capped = capCsv(parsed);
+    const notes = [];
+    if (capped.rowsTruncated) {
+        notes.push(`${capped.rows.length.toLocaleString()} of ${capped.totalRows.toLocaleString()} rows`);
+    }
+    if (capped.columnsTruncated) {
+        notes.push(`${capped.headers.length.toLocaleString()} of ${capped.totalColumns.toLocaleString()} columns`);
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col gap-2",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "max-h-[32rem] overflow-auto rounded-md border border-border",
+                children: /*#__PURE__*/ _jsxs(Table, {
+                    "aria-label": caption,
+                    children: [
+                        /*#__PURE__*/ _jsx(TableHeader, {
+                            children: /*#__PURE__*/ _jsx(TableRow, {
+                                children: capped.headers.map((header, index)=>/*#__PURE__*/ _jsx(TableHead, {
+                                        scope: "col",
+                                        children: header
+                                    }, index))
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(TableBody, {
+                            children: capped.rows.map((row, rowIndex)=>/*#__PURE__*/ _jsx(TableRow, {
+                                    children: capped.headers.map((_, cellIndex)=>/*#__PURE__*/ _jsx(TableCell, {
+                                            className: "font-mono text-xs",
+                                            children: row[cellIndex] ?? ""
+                                        }, cellIndex))
+                                }, rowIndex))
+                        })
+                    ]
+                })
+            }),
+            notes.length === 0 ? null : /*#__PURE__*/ _jsxs("p", {
+                className: "text-xs text-muted-foreground",
+                children: [
+                    "Showing ",
+                    notes.join(" and "),
+                    " — download for the full file."
+                ]
+            })
+        ]
+    });
+}

package/dist/ui/dialog.d.ts

@@ -0,0 +1,37 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import type * as React from "react";
+/**
+ * The modal surface, in the three places a modal arrives from: the centre of
+ * the page, the right edge, the left edge.
+ *
+ * One file rather than a dialog and a separate drawer. A side sheet *is* a
+ * dialog — same Radix root, same focus trap, Escape, scroll lock and focus
+ * restoration, same header/title/description/footer — and the only real
+ * differences are which edge it is pinned to and which keyframes carry it in.
+ * That is a `side` prop, not a second component: two files meant every fix to
+ * the close button, the labelling or the animation had to be made twice, and
+ * anyone adopting both surfaces copied the same eighty lines into their repo
+ * under two names.
+ *
+ * `side="center"` is the default because the unqualified word "dialog" means a
+ * centred one. Centre dialogs own max-height and overflow so tall forms scroll
+ * inside `DialogBody` rather than growing past the viewport. `left` and
+ * `right` are full-height sheets; they also use `DialogBody` so the header and
+ * footer stay put while the middle scrolls.
+ */
+export declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+export declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export type DialogSide = "center" | "left" | "right";
+export declare function DialogContent({ className, children, side, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    side?: DialogSide;
+}): React.JSX.Element;
+/** `pr-8` keeps the title clear of the close control in the corner. */
+export declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** Scrolls; the header and footer stay put. Needed by tall centre dialogs and side sheets. */
+export declare function DialogBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
+export declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+/** Uppercase field label used inside dialog forms. */
+export declare function DialogFieldLabel({ className, ...props }: React.ComponentProps<"label">): React.JSX.Element;

package/dist/ui/dialog.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { cn } from "../lib/utils.js";
+/**
+ * The modal surface, in the three places a modal arrives from: the centre of
+ * the page, the right edge, the left edge.
+ *
+ * One file rather than a dialog and a separate drawer. A side sheet *is* a
+ * dialog — same Radix root, same focus trap, Escape, scroll lock and focus
+ * restoration, same header/title/description/footer — and the only real
+ * differences are which edge it is pinned to and which keyframes carry it in.
+ * That is a `side` prop, not a second component: two files meant every fix to
+ * the close button, the labelling or the animation had to be made twice, and
+ * anyone adopting both surfaces copied the same eighty lines into their repo
+ * under two names.
+ *
+ * `side="center"` is the default because the unqualified word "dialog" means a
+ * centred one. Centre dialogs own max-height and overflow so tall forms scroll
+ * inside `DialogBody` rather than growing past the viewport. `left` and
+ * `right` are full-height sheets; they also use `DialogBody` so the header and
+ * footer stay put while the middle scrolls.
+ */ export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogClose = DialogPrimitive.Close;
+const SIDE_CLASS = {
+    // Guttered width + capped height so the surface never kisses the viewport
+    // edge or spills past ~one form-screen of content. Overflow is clipped here;
+    // scroll lives on DialogBody.
+    center: "top-1/2 left-1/2 w-[min(calc(100vw-2rem),32rem)] max-h-[min(90dvh,42rem)] " + "overflow-hidden -translate-x-1/2 -translate-y-1/2 rounded-lg border " + "max-sm:w-[min(calc(100vw-1.25rem),32rem)] max-sm:max-h-[min(92dvh,42rem)] " + "data-[state=open]:animate-[corbits-dialog-in_150ms_ease-out] data-[state=closed]:animate-[corbits-dialog-out_120ms_ease-in]",
+    right: "inset-y-0 right-0 w-full max-w-lg border-l " + "data-[state=open]:animate-[corbits-drawer-in-right_200ms_ease-out] data-[state=closed]:animate-[corbits-drawer-out-right_160ms_ease-in]",
+    left: "inset-y-0 left-0 w-full max-w-lg border-r " + "data-[state=open]:animate-[corbits-drawer-in-left_200ms_ease-out] data-[state=closed]:animate-[corbits-drawer-out-left_160ms_ease-in]"
+};
+export function DialogContent({ className, children, side = "center", ...props }) {
+    return /*#__PURE__*/ _jsxs(DialogPrimitive.Portal, {
+        children: [
+            /*#__PURE__*/ _jsx(DialogPrimitive.Overlay, {
+                className: "fixed inset-0 z-50 bg-black/50 backdrop-blur-[2px] data-[state=open]:animate-[corbits-fade-in_150ms_ease-out] data-[state=closed]:animate-[corbits-fade-out_120ms_ease-in]"
+            }),
+            /*#__PURE__*/ _jsxs(DialogPrimitive.Content, {
+                "data-slot": "dialog-content",
+                "data-side": side,
+                className: cn("fixed z-50 flex flex-col gap-4 border-border bg-popover p-6 text-popover-foreground shadow-lg", // Keyframes are installed into your globals.css by this registry item.
+                SIDE_CLASS[side], className),
+                ...props,
+                children: [
+                    children,
+                    /*#__PURE__*/ _jsx(DialogPrimitive.Close, {
+                        "aria-label": "Close",
+                        className: cn("absolute top-[0.85rem] right-[0.85rem] inline-flex size-[1.8rem] items-center justify-center", "rounded-[0.45rem] p-0 text-muted-foreground transition-colors", "hover:bg-foreground/5 hover:text-foreground", // Soft primary-tint focus instead of the theme outline — the close
+                        // control sits on the popover surface and a hard ring reads heavy.
+                        "focus-visible:text-foreground focus-visible:outline-none", "focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--primary)_22%,transparent)]"),
+                        children: /*#__PURE__*/ _jsx(XIcon, {
+                            className: "size-4"
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+/** `pr-8` keeps the title clear of the close control in the corner. */ export function DialogHeader({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "dialog-header",
+        className: cn("flex shrink-0 flex-col gap-1 pr-8", className),
+        ...props
+    });
+}
+/** Scrolls; the header and footer stay put. Needed by tall centre dialogs and side sheets. */ export function DialogBody({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "dialog-body",
+        className: cn("min-h-0 flex-auto overflow-y-auto overscroll-contain [scrollbar-width:thin]", className),
+        ...props
+    });
+}
+export function DialogFooter({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "dialog-footer",
+        className: cn(// Stable bar: pinned to the bottom of the flex column, subtle top rule
+        // and wash so actions read as chrome rather than more body content.
+        "mt-auto flex shrink-0 flex-wrap items-center justify-end gap-2", "border-t border-foreground/10 bg-foreground/[0.025] pt-[0.85rem]", // Narrow viewports: stack full-width so primary/secondary hit areas
+        // don't compete for a single row of thumb space.
+        "max-sm:flex-col max-sm:flex-nowrap max-sm:items-stretch max-sm:[&>*]:w-full", className),
+        ...props
+    });
+}
+export function DialogTitle({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(DialogPrimitive.Title, {
+        className: cn("m-0 text-[0.95rem] font-[650] leading-[1.3] tracking-[-0.01em] text-foreground", className),
+        ...props
+    });
+}
+export function DialogDescription({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(DialogPrimitive.Description, {
+        className: cn("m-0 text-[0.8125rem] leading-[1.4] text-muted-foreground", className),
+        ...props
+    });
+}
+/** Uppercase field label used inside dialog forms. */ export function DialogFieldLabel({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("label", {
+        "data-slot": "dialog-field-label",
+        className: cn("text-[10.5px] font-bold uppercase tracking-[0.06em] text-muted-foreground", className),
+        ...props
+    });
+}

package/dist/ui/dictation-status-line.d.ts

@@ -0,0 +1,20 @@
+import type { DictationState } from "./mic-button.js";
+export type DictationStatusLineProps = {
+    readonly state: DictationState;
+    /** Recent input levels, forwarded to `VoiceWaveform` while listening. */
+    readonly levels?: readonly number[];
+    /** Shown while `state` is `"starting"`. */
+    readonly startingLabel?: string;
+    /** Shown while `state` is `"listening"`, before the waveform. */
+    readonly listeningLabel?: string;
+    /** Shown while `state` is `"denied"`, in place of the waveform row. */
+    readonly errorMessage?: string;
+    readonly className?: string;
+};
+/**
+ * The line under a composer that a microphone toggle turns on: "Listening:"
+ * with a waveform, a starting message, or a refusal — never more than one of
+ * these, and absent entirely once `state` is `"idle"` or `"unsupported"`, so
+ * the row does not otherwise change the composer's shape.
+ */
+export declare function DictationStatusLine({ state, levels, startingLabel, listeningLabel, errorMessage, className, }: DictationStatusLineProps): import("react").JSX.Element | null;

package/dist/ui/dictation-status-line.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { VoiceWaveform } from "./voice-waveform.js";
+import { cn } from "../lib/utils.js";
+/**
+ * The line under a composer that a microphone toggle turns on: "Listening:"
+ * with a waveform, a starting message, or a refusal — never more than one of
+ * these, and absent entirely once `state` is `"idle"` or `"unsupported"`, so
+ * the row does not otherwise change the composer's shape.
+ */ export function DictationStatusLine({ state, levels = [], startingLabel = "Starting microphone…", listeningLabel = "Listening:", errorMessage, className }) {
+    if (state === "idle" || state === "unsupported") return null;
+    if (state === "denied") {
+        return /*#__PURE__*/ _jsx("p", {
+            role: "alert",
+            className: cn("text-xs text-destructive", className),
+            children: errorMessage ?? "Microphone access was blocked."
+        });
+    }
+    if (state === "starting") {
+        return /*#__PURE__*/ _jsx("p", {
+            "aria-live": "polite",
+            className: cn("text-xs text-muted-foreground", className),
+            children: startingLabel
+        });
+    }
+    return /*#__PURE__*/ _jsxs("p", {
+        "aria-live": "polite",
+        className: cn("flex items-center gap-2 text-xs text-muted-foreground", className),
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                children: listeningLabel
+            }),
+            /*#__PURE__*/ _jsx(VoiceWaveform, {
+                levels: levels,
+                className: "text-ok"
+            })
+        ]
+    });
+}

package/dist/ui/dither-canvas.d.ts

@@ -0,0 +1,31 @@
+export type DitherCanvasProps = {
+    /** Edge of one dither cell, in CSS pixels. Larger reads as coarser grain. */
+    readonly cell?: number;
+    /** Ink colour for lit cells. Defaults to the theme's primary. */
+    readonly color?: string;
+    /** How far the pointer's influence reaches, in CSS pixels. `0` disables it. */
+    readonly warpRadius?: number;
+    readonly className?: string;
+};
+/**
+ * A dithered field that reacts to the pointer — decoration for a full-bleed
+ * panel, and nothing else.
+ *
+ * Drawn on a canvas rather than as a repeating background image because the
+ * point is that it *moves*: a radial field drifts slowly, the pointer pushes a
+ * bright spot through it, and both need per-frame recomputation. A CSS pattern
+ * can be one of those things but not the other.
+ *
+ * `aria-hidden` and unfocusable, unconditionally. It carries no information;
+ * anything a reader needs is in the content laid over it.
+ *
+ * Reduced motion is honoured by drawing exactly one frame and stopping — not by
+ * slowing down and not by hiding it. The texture is the design; the animation is
+ * the part that makes some people ill. The theme's global CSS override cannot
+ * reach a `requestAnimationFrame` loop, so the check lives here.
+ *
+ * The canvas is sized in device pixels and scaled by `devicePixelRatio`. Without
+ * that the grid is resampled by the compositor on a retina display and the
+ * crisp dot pattern — the entire effect — turns to mush.
+ */
+export declare function DitherCanvas({ cell, color, warpRadius, className }: DitherCanvasProps): import("react").JSX.Element;