@corbits/react-ui 0.1.0

package/dist/ui/thinking-mark.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../lib/utils.js";
+import { CORBITS_MARK_PATH } from "./corbits-mark.js";
+/** Decorative animated Corbits mark. Pair with visible text or ThinkingIndicator. */ export function ThinkingMark({ variant = "silk", paused = false, className, style }) {
+    const id = useId();
+    const gradient = `${id}-gradient`;
+    const mask = `${id}-mask`;
+    return /*#__PURE__*/ _jsxs("svg", {
+        viewBox: "0 0 100 70",
+        width: "30",
+        height: "21",
+        "aria-hidden": "true",
+        focusable: "false",
+        className: cn("inline-block h-auto w-[30px] flex-none overflow-visible", paused && "[&_*]:[animation-play-state:paused]", className),
+        style: style,
+        children: [
+            /*#__PURE__*/ _jsxs("defs", {
+                children: [
+                    variant === "echo" ? /*#__PURE__*/ _jsxs("radialGradient", {
+                        id: gradient,
+                        children: [
+                            /*#__PURE__*/ _jsx("stop", {
+                                offset: ".38",
+                                stopColor: "white",
+                                stopOpacity: "0"
+                            }),
+                            /*#__PURE__*/ _jsx("stop", {
+                                offset: ".65",
+                                stopColor: "white",
+                                stopOpacity: ".65"
+                            }),
+                            /*#__PURE__*/ _jsx("stop", {
+                                offset: ".9",
+                                stopColor: "white"
+                            }),
+                            /*#__PURE__*/ _jsx("stop", {
+                                offset: "1",
+                                stopColor: "white",
+                                stopOpacity: "0"
+                            })
+                        ]
+                    }) : /*#__PURE__*/ _jsxs("linearGradient", {
+                        id: gradient,
+                        x1: "0",
+                        y1: "0",
+                        x2: variant === "silk" ? "1" : "0",
+                        y2: variant === "silk" ? "0" : "1",
+                        children: [
+                            /*#__PURE__*/ _jsx("stop", {
+                                stopColor: "white",
+                                stopOpacity: "0"
+                            }),
+                            variant === "silk" ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx("stop", {
+                                        offset: ".45",
+                                        stopColor: "white",
+                                        stopOpacity: ".65"
+                                    }),
+                                    /*#__PURE__*/ _jsx("stop", {
+                                        offset: ".78",
+                                        stopColor: "white"
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx("stop", {
+                                        offset: ".25",
+                                        stopColor: "white"
+                                    }),
+                                    /*#__PURE__*/ _jsx("stop", {
+                                        offset: ".42",
+                                        stopColor: "white",
+                                        stopOpacity: ".7"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("stop", {
+                                offset: "1",
+                                stopColor: "white",
+                                stopOpacity: "0"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("mask", {
+                        id: mask,
+                        maskUnits: "userSpaceOnUse",
+                        x: "-10",
+                        y: "-10",
+                        width: "120",
+                        height: "90",
+                        style: {
+                            maskType: "luminance"
+                        },
+                        children: [
+                            variant === "silk" && /*#__PURE__*/ _jsx("rect", {
+                                className: "corbits-thinking-silk [animation:corbits-thinking-sweep_1.45s_cubic-bezier(.22,.05,.38,1)_infinite]",
+                                x: "-35",
+                                y: "0",
+                                width: "48",
+                                height: "75",
+                                fill: `url(#${gradient})`
+                            }),
+                            variant === "strata" && /*#__PURE__*/ _jsx("rect", {
+                                className: "corbits-thinking-strata [animation:corbits-thinking-rise_3.2s_cubic-bezier(.3,0,.3,1)_infinite]",
+                                x: "0",
+                                y: "-12",
+                                width: "100",
+                                height: "33",
+                                fill: `url(#${gradient})`
+                            }),
+                            variant === "echo" && /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx("circle", {
+                                        className: "corbits-thinking-echo origin-[62px_9px] [animation:corbits-thinking-wave_3.6s_cubic-bezier(.15,.3,.3,1)_infinite]",
+                                        cx: "62",
+                                        cy: "9",
+                                        r: "80",
+                                        fill: `url(#${gradient})`
+                                    }),
+                                    /*#__PURE__*/ _jsx("circle", {
+                                        className: "corbits-thinking-echo origin-[62px_9px] motion-reduce:hidden [animation:corbits-thinking-wave_3.6s_cubic-bezier(.15,.3,.3,1)_-1.8s_infinite]",
+                                        cx: "62",
+                                        cy: "9",
+                                        r: "80",
+                                        fill: `url(#${gradient})`
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("g", {
+                className: "fill-thinking-base",
+                opacity: ".7",
+                children: /*#__PURE__*/ _jsx("path", {
+                    d: CORBITS_MARK_PATH,
+                    transform: "translate(-2.3 -15) scale(.213)"
+                })
+            }),
+            /*#__PURE__*/ _jsx("g", {
+                className: "fill-primary",
+                mask: `url(#${mask})`,
+                children: /*#__PURE__*/ _jsx("path", {
+                    d: CORBITS_MARK_PATH,
+                    transform: "translate(-2.3 -15) scale(.213)"
+                })
+            })
+        ]
+    });
+}

package/dist/ui/time-series-chart.d.ts

@@ -0,0 +1,55 @@
+export type TimeSeries = {
+    readonly label: string;
+    /** One value per entry in `labels`, same order. */
+    readonly values: readonly number[];
+};
+export type TimeSeriesChartProps = {
+    readonly title: string;
+    readonly description?: string;
+    /** The shared x axis — pre-formatted period labels. */
+    readonly labels: readonly string[];
+    /** At most five. Past that, sum the tail into an "Other" series first. */
+    readonly series: readonly TimeSeries[];
+    /**
+     * `area` fills under each line at low opacity — the treatment for volume
+     * ("how much accumulated") where a bare line reads as a rate. The dash and
+     * the stroke stay exactly as in `line`, so the two variants read as one chart
+     * family. Identity still comes from the stroke, never the wash.
+     */
+    readonly variant?: "line" | "area";
+    readonly format?: (value: number) => string;
+    readonly className?: string;
+};
+/**
+ * Several series over one shared x axis.
+ *
+ * The x axis is a list of labels shared by every series rather than a date per
+ * point, so the series are aligned by construction. Per-series timestamps mean
+ * every consumer gets to invent their own alignment rule, and the ones that get
+ * it wrong draw two lines that silently disagree about what "March" means.
+ *
+ * **One y axis, always.** Two series of different magnitude go in two charts or
+ * get indexed to a common base — never a second axis. A dual-axis chart lets
+ * whoever chose the two scales decide where the lines cross, which means the
+ * crossing carries no information while looking like it carries the most.
+ *
+ * Series are told apart by two channels, not one. Colour is the fast one, but
+ * the five palette steps are only guaranteed to separate under simulated
+ * protanopia and deuteranopia by a margin that assumes a second channel exists,
+ * so each slot also gets its own `seriesDash` stroke pattern — carried on the
+ * line, in the legend swatch and in the tooltip swatch, so the cross-reference
+ * works wherever the reader is looking. The data table underneath is the
+ * fallback; the dash is the encoding.
+ *
+ * The hover layer is not optional polish; without it there is no way to read an
+ * exact value off a line. It reads the nearest index from the pointer's x and
+ * shows every series at once, so the tooltip answers "what happened in March"
+ * rather than "what was this one line in March".
+ *
+ * The same read is available from the keyboard. The plot is a `tabbable`
+ * `role="application"`-free group with arrow-key stepping — the focus ring comes
+ * from the theme, the arrow keys move the same index the pointer moves, and the
+ * readout is echoed into a `role="status"` so it is announced rather than merely
+ * drawn. Anything less makes precise values mouse-only.
+ */
+export declare function TimeSeriesChart({ title, description, labels, series, variant, format, className, }: TimeSeriesChartProps): import("react").JSX.Element;

package/dist/ui/time-series-chart.js

@@ -0,0 +1,249 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { areaPath, formatCompact, linePath, niceTicks, scaleLinear } from "../lib/chart-geometry.js";
+import { CHART_SERIES_SLOTS, seriesColor, seriesDash } from "../lib/chart-palette.js";
+import { cn } from "../lib/utils.js";
+import { ChartFrame } from "./chart-frame.js";
+const WIDTH = 480;
+const HEIGHT = 180;
+const PAD_LEFT = 44;
+const PAD_RIGHT = 12;
+const PAD_TOP = 8;
+const PAD_BOTTOM = 22;
+/**
+ * Several series over one shared x axis.
+ *
+ * The x axis is a list of labels shared by every series rather than a date per
+ * point, so the series are aligned by construction. Per-series timestamps mean
+ * every consumer gets to invent their own alignment rule, and the ones that get
+ * it wrong draw two lines that silently disagree about what "March" means.
+ *
+ * **One y axis, always.** Two series of different magnitude go in two charts or
+ * get indexed to a common base — never a second axis. A dual-axis chart lets
+ * whoever chose the two scales decide where the lines cross, which means the
+ * crossing carries no information while looking like it carries the most.
+ *
+ * Series are told apart by two channels, not one. Colour is the fast one, but
+ * the five palette steps are only guaranteed to separate under simulated
+ * protanopia and deuteranopia by a margin that assumes a second channel exists,
+ * so each slot also gets its own `seriesDash` stroke pattern — carried on the
+ * line, in the legend swatch and in the tooltip swatch, so the cross-reference
+ * works wherever the reader is looking. The data table underneath is the
+ * fallback; the dash is the encoding.
+ *
+ * The hover layer is not optional polish; without it there is no way to read an
+ * exact value off a line. It reads the nearest index from the pointer's x and
+ * shows every series at once, so the tooltip answers "what happened in March"
+ * rather than "what was this one line in March".
+ *
+ * The same read is available from the keyboard. The plot is a `tabbable`
+ * `role="application"`-free group with arrow-key stepping — the focus ring comes
+ * from the theme, the arrow keys move the same index the pointer moves, and the
+ * readout is echoed into a `role="status"` so it is announced rather than merely
+ * drawn. Anything less makes precise values mouse-only.
+ */ export function TimeSeriesChart({ title, description, labels, series, variant = "line", format = formatCompact, className }) {
+    const [active, setActive] = useState(null);
+    const svgRef = useRef(null);
+    const drawn = series.slice(0, CHART_SERIES_SLOTS);
+    const max = Math.max(0, ...drawn.flatMap((entry)=>entry.values));
+    const ticks = niceTicks(max);
+    const axisMax = ticks[ticks.length - 1] ?? 1;
+    const plotWidth = WIDTH - PAD_LEFT - PAD_RIGHT;
+    const plotHeight = HEIGHT - PAD_TOP - PAD_BOTTOM;
+    // A single point has nowhere to travel; dividing by zero would put every mark
+    // at NaN and blank the chart.
+    const stepX = labels.length > 1 ? plotWidth / (labels.length - 1) : 0;
+    const xAt = (index)=>PAD_LEFT + index * stepX;
+    const yAt = (value)=>PAD_TOP + plotHeight - scaleLinear(value, axisMax, plotHeight);
+    function indexFromClientX(clientX) {
+        const box = svgRef.current?.getBoundingClientRect();
+        if (box === undefined || labels.length === 0) return 0;
+        // The SVG scales to its container, so client pixels must be converted back
+        // into viewBox units before they mean anything.
+        const viewX = (clientX - box.left) / box.width * WIDTH;
+        const raw = stepX === 0 ? 0 : Math.round((viewX - PAD_LEFT) / stepX);
+        return Math.min(labels.length - 1, Math.max(0, raw));
+    }
+    function step(delta) {
+        setActive((current)=>{
+            const next = (current ?? 0) + delta;
+            return Math.min(labels.length - 1, Math.max(0, next));
+        });
+    }
+    const readout = active === null ? "" : `${labels[active]}: ${drawn.map((entry)=>`${entry.label} ${format(entry.values[active] ?? 0)}`).join(", ")}`;
+    return /*#__PURE__*/ _jsxs(ChartFrame, {
+        title: title,
+        ...description === undefined ? {} : {
+            description
+        },
+        // `dash` as well as `color`: the lines carry two channels, so the legend
+        // has to cross-reference both or it only explains half the plot.
+        legend: drawn.map((entry, index)=>({
+                label: entry.label,
+                color: seriesColor(index),
+                dash: seriesDash(index) ?? "none"
+            })),
+        table: {
+            columns: [
+                "Period",
+                ...drawn.map((entry)=>entry.label)
+            ],
+            rows: labels.map((label, index)=>[
+                    label,
+                    ...drawn.map((entry)=>format(entry.values[index] ?? 0))
+                ])
+        },
+        className: className,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "relative",
+                children: [
+                    /*#__PURE__*/ _jsxs("svg", {
+                        ref: svgRef,
+                        viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
+                        className: "h-auto w-full touch-none",
+                        role: "img",
+                        "aria-label": `${title}. Use the arrow keys to read each period.`,
+                        tabIndex: 0,
+                        onPointerMove: (event)=>setActive(indexFromClientX(event.clientX)),
+                        onPointerLeave: ()=>setActive(null),
+                        onFocus: ()=>setActive((current)=>current ?? 0),
+                        onBlur: ()=>setActive(null),
+                        onKeyDown: (event)=>{
+                            if (event.key === "ArrowRight") {
+                                event.preventDefault();
+                                step(1);
+                            } else if (event.key === "ArrowLeft") {
+                                event.preventDefault();
+                                step(-1);
+                            } else if (event.key === "Escape") {
+                                setActive(null);
+                            }
+                        },
+                        children: [
+                            ticks.map((tick)=>/*#__PURE__*/ _jsxs("g", {
+                                    children: [
+                                        /*#__PURE__*/ _jsx("line", {
+                                            x1: PAD_LEFT,
+                                            y1: yAt(tick),
+                                            x2: WIDTH - PAD_RIGHT,
+                                            y2: yAt(tick),
+                                            stroke: "var(--border)",
+                                            strokeWidth: 1
+                                        }),
+                                        /*#__PURE__*/ _jsx("text", {
+                                            x: PAD_LEFT - 8,
+                                            y: yAt(tick),
+                                            textAnchor: "end",
+                                            dominantBaseline: "middle",
+                                            className: "fill-muted-foreground text-[10px] tabular-nums",
+                                            children: format(tick)
+                                        })
+                                    ]
+                                }, tick)),
+                            labels.length === 0 ? null : /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx("text", {
+                                        x: PAD_LEFT,
+                                        y: HEIGHT - 6,
+                                        className: "fill-muted-foreground text-[10px]",
+                                        children: labels[0]
+                                    }),
+                                    /*#__PURE__*/ _jsx("text", {
+                                        x: WIDTH - PAD_RIGHT,
+                                        y: HEIGHT - 6,
+                                        textAnchor: "end",
+                                        className: "fill-muted-foreground text-[10px]",
+                                        children: labels[labels.length - 1]
+                                    })
+                                ]
+                            }),
+                            active === null ? null : /*#__PURE__*/ _jsx("line", {
+                                x1: xAt(active),
+                                y1: PAD_TOP,
+                                x2: xAt(active),
+                                y2: PAD_TOP + plotHeight,
+                                stroke: "var(--muted-foreground)",
+                                strokeWidth: 1
+                            }),
+                            variant === "area" ? drawn.map((entry, index)=>/*#__PURE__*/ _jsx("path", {
+                                    d: areaPath(entry.values.map((value, pointIndex)=>({
+                                            x: xAt(pointIndex),
+                                            y: yAt(value)
+                                        })), yAt(0)),
+                                    fill: seriesColor(index),
+                                    opacity: 0.14
+                                }, entry.label)) : null,
+                            drawn.map((entry, index)=>/*#__PURE__*/ _jsx("path", {
+                                    d: linePath(entry.values.map((value, pointIndex)=>({
+                                            x: xAt(pointIndex),
+                                            y: yAt(value)
+                                        }))),
+                                    fill: "none",
+                                    stroke: seriesColor(index),
+                                    strokeDasharray: seriesDash(index),
+                                    strokeWidth: 2,
+                                    strokeLinecap: "butt",
+                                    strokeLinejoin: "round"
+                                }, entry.label)),
+                            active === null ? null : drawn.map((entry, index)=>/*#__PURE__*/ _jsx("circle", {
+                                    cx: xAt(active),
+                                    cy: yAt(entry.values[active] ?? 0),
+                                    r: 4,
+                                    fill: seriesColor(index),
+                                    // A 2px ring in the surface colour, so a marker stays legible
+                                    // where it crosses a line or another marker.
+                                    stroke: "var(--card)",
+                                    strokeWidth: 2
+                                }, entry.label))
+                        ]
+                    }),
+                    active === null ? null : /*#__PURE__*/ _jsxs("div", {
+                        className: "pointer-events-none absolute top-0 left-0 rounded-md border border-border bg-popover px-2 py-1.5 text-xs text-popover-foreground shadow-lg",
+                        children: [
+                            /*#__PURE__*/ _jsx("p", {
+                                className: "font-medium",
+                                children: labels[active]
+                            }),
+                            /*#__PURE__*/ _jsx("ul", {
+                                className: "mt-1 flex flex-col gap-0.5",
+                                children: drawn.map((entry, index)=>/*#__PURE__*/ _jsxs("li", {
+                                        className: "flex items-center gap-1.5",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("svg", {
+                                                "aria-hidden": true,
+                                                viewBox: "0 0 20 4",
+                                                className: "h-1 w-5 shrink-0 overflow-visible",
+                                                children: /*#__PURE__*/ _jsx("line", {
+                                                    x1: 0,
+                                                    y1: 2,
+                                                    x2: 20,
+                                                    y2: 2,
+                                                    stroke: seriesColor(index),
+                                                    strokeDasharray: seriesDash(index),
+                                                    strokeWidth: 2.5
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "text-muted-foreground",
+                                                children: entry.label
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "ml-auto pl-3 font-mono tabular-nums",
+                                                children: format(entry.values[active] ?? 0)
+                                            })
+                                        ]
+                                    }, entry.label))
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                role: "status",
+                className: cn("sr-only"),
+                children: readout
+            })
+        ]
+    });
+}

package/dist/ui/toast.d.ts

@@ -0,0 +1,16 @@
+import { Toaster as Sonner } from "sonner";
+/**
+ * Show a short plain-text confirmation. One toast at a time: a new call
+ * dismisses the current one and restarts the timer, so rapid mutations read
+ * as a single status line rather than a growing stack. Each call takes a
+ * fresh id — reusing one id would inherit the unmount sonner schedules while
+ * a dismissed toast is still animating out, swallowing the new message.
+ */
+export declare function toast(message: string): void;
+/**
+ * Mount once at the app root. Sonner renders in a portal, so the toast is
+ * styled here (unstyled + utility classes) instead of inheriting from a
+ * surrounding component; its motion overrides live in theme.css under
+ * `.corbits-toast`.
+ */
+export declare function Toaster(props: React.ComponentProps<typeof Sonner>): import("react").JSX.Element;

package/dist/ui/toast.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Toaster as Sonner, toast as sonnerToast } from "sonner";
+const TOAST_DURATION_MS = 1800;
+let activeId = null;
+let sequence = 0;
+/**
+ * Show a short plain-text confirmation. One toast at a time: a new call
+ * dismisses the current one and restarts the timer, so rapid mutations read
+ * as a single status line rather than a growing stack. Each call takes a
+ * fresh id — reusing one id would inherit the unmount sonner schedules while
+ * a dismissed toast is still animating out, swallowing the new message.
+ */ export function toast(message) {
+    if (activeId !== null) sonnerToast.dismiss(activeId);
+    sequence += 1;
+    activeId = `corbits-toast-${sequence}`;
+    sonnerToast(message, {
+        id: activeId,
+        duration: TOAST_DURATION_MS
+    });
+}
+/**
+ * Mount once at the app root. Sonner renders in a portal, so the toast is
+ * styled here (unstyled + utility classes) instead of inheriting from a
+ * surrounding component; its motion overrides live in theme.css under
+ * `.corbits-toast`.
+ */ export function Toaster(props) {
+    return /*#__PURE__*/ _jsx(Sonner, {
+        position: "bottom-center",
+        offset: {
+            bottom: "1.25rem"
+        },
+        mobileOffset: {
+            bottom: "1.25rem"
+        },
+        toastOptions: {
+            unstyled: true,
+            className: "corbits-toast border border-border-strong bg-card shadow-surface " + "px-[0.9rem] py-[0.55rem] font-sans text-[0.8rem] font-[550] text-foreground"
+        },
+        ...props
+    });
+}

package/dist/ui/token-mosaic.d.ts

@@ -0,0 +1,22 @@
+export type TokenMosaicProps = {
+    /** Shares of one whole, in a stable order — colour is assigned by position. */
+    readonly parts: readonly {
+        readonly label: string;
+        readonly value: number;
+    }[];
+    /** What the whole is — "Token usage by class". */
+    readonly label: string;
+    readonly className?: string;
+};
+/**
+ * Shares of a whole as one stacked strip, with a legend that names and
+ * quantifies every segment.
+ *
+ * Segments are painted from the fixed series ramp by position, never cycled:
+ * past the last slot a segment goes muted, which honestly says "lumped
+ * together" — fold small parts into an "Other" entry before rendering rather
+ * than asking a reader to track more hues. The legend is the accessible half:
+ * the strip itself is one `role="img"` and each legend entry carries the
+ * segment's label and compact value.
+ */
+export declare function TokenMosaic({ parts, label, className }: TokenMosaicProps): import("react").JSX.Element;

package/dist/ui/token-mosaic.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { buildMosaic, formatCompact } from "../lib/metrics.js";
+import { seriesColor } from "../lib/chart-palette.js";
+import { cn } from "../lib/utils.js";
+/**
+ * Shares of a whole as one stacked strip, with a legend that names and
+ * quantifies every segment.
+ *
+ * Segments are painted from the fixed series ramp by position, never cycled:
+ * past the last slot a segment goes muted, which honestly says "lumped
+ * together" — fold small parts into an "Other" entry before rendering rather
+ * than asking a reader to track more hues. The legend is the accessible half:
+ * the strip itself is one `role="img"` and each legend entry carries the
+ * segment's label and compact value.
+ */ export function TokenMosaic({ parts, label, className }) {
+    const segments = buildMosaic(parts);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn("flex flex-col gap-2", className),
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "flex h-2.5 w-full overflow-hidden rounded-[3px] bg-muted",
+                role: "img",
+                "aria-label": label,
+                children: /*#__PURE__*/ _jsx("svg", {
+                    className: "h-full w-full",
+                    viewBox: "0 0 100 10",
+                    preserveAspectRatio: "none",
+                    children: renderSegmentRects(segments)
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "flex flex-wrap gap-x-4 gap-y-1",
+                children: segments.map((segment, index)=>/*#__PURE__*/ _jsxs("span", {
+                        className: "flex items-center gap-1.5 font-mono text-[11px] tracking-[0.08em] uppercase text-muted-foreground",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                "aria-hidden": true,
+                                className: "size-2 rounded-[1px]",
+                                style: {
+                                    backgroundColor: seriesColor(index)
+                                }
+                            }),
+                            segment.label,
+                            " ",
+                            formatCompact(segment.value)
+                        ]
+                    }, segment.label))
+            })
+        ]
+    });
+}
+function renderSegmentRects(segments) {
+    let x = 0;
+    return segments.map((segment, index)=>{
+        const rect = /*#__PURE__*/ _jsx("rect", {
+            x: x,
+            y: 0,
+            width: segment.pct,
+            height: 10,
+            fill: seriesColor(index)
+        }, segment.label);
+        x += segment.pct;
+        return rect;
+    });
+}

package/dist/ui/tool-block.d.ts

@@ -0,0 +1,54 @@
+/**
+ * A tool call's lifecycle, as a discriminated union rather than a status
+ * string plus optional fields — each state carries exactly the data that
+ * exists at that point and nothing a caller could set inconsistently (an
+ * `error` with an `output`, a `pending` with a `deniedReason`).
+ *
+ * `approval-requested` and `output-denied` are distinct from `error`: a
+ * refused approval is an outcome the human chose, not a failure the tool
+ * suffered, and the two read very differently in a transcript.
+ */
+export type ToolBlockState = {
+    readonly status: "pending";
+} | {
+    readonly status: "running";
+} | {
+    readonly status: "output-available";
+    readonly output: string;
+} | {
+    readonly status: "error";
+    readonly message: string;
+} | {
+    readonly status: "approval-requested";
+    readonly reason?: string;
+} | {
+    readonly status: "output-denied";
+    readonly reason?: string;
+};
+export type ToolBlockProps = {
+    /** Raw tool identifier, e.g. `slack__post_message`. */
+    readonly name: string;
+    /** Human phrasing for what the tool did. Falls back to `name` when absent. */
+    readonly label?: string;
+    readonly state: ToolBlockState;
+    /** Call arguments, shown in the expanded detail when present. */
+    readonly input?: unknown;
+    readonly defaultOpen?: boolean;
+    /** Controlled open state. Pair with `onOpenChange` to lift it to a parent. */
+    readonly open?: boolean;
+    readonly onOpenChange?: (open: boolean) => void;
+    readonly className?: string;
+};
+/**
+ * What a tool call did, as one line the transcript can open.
+ *
+ * Collapsed by default and collapsed even while running: a transcript where
+ * every tool call expands itself pushes the answer off screen, and the
+ * answer is what the user is waiting for. A failed call, a denied approval
+ * and a pending approval request all open by default — those are the three
+ * states where the detail is the point, not an afterthought.
+ *
+ * Uncontrolled by default, seeded from `defaultOpen` (or the state's own
+ * default). Pass `open`/`onOpenChange` to drive it from a parent.
+ */
+export declare function ToolBlock({ name, label, state, input, defaultOpen, open: openProp, onOpenChange, className, }: ToolBlockProps): import("react").JSX.Element;