@corbits/react-ui 0.1.0 → 0.2.0

package/dist/ui/thinking-label.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
@@ -12,43 +13,23 @@ const DEFAULT_INTERVAL_MS = 3_000;
  * announces "Working" once, so a screen reader is not re-interrupted every
  * few seconds. Reduced motion is live via `usePrefersReducedMotion` and
  * stops the rotation rather than just stilling the shimmer.
- */ export function ThinkingLabel({ verbs, intervalMs = DEFAULT_INTERVAL_MS, statusLabel = "Working", className }) {
+ */
+export function ThinkingLabel({ verbs, intervalMs = DEFAULT_INTERVAL_MS, statusLabel = "Working", className, }) {
     const [at, setAt] = useState(0);
     const reduceMotion = usePrefersReducedMotion();
-    useEffect(()=>{
-        if (verbs.length < 2 || !reduceMotion) return;
+    useEffect(() => {
+        if (verbs.length < 2 || !reduceMotion)
+            return;
         setAt(0);
-    }, [
-        verbs.length,
-        reduceMotion
-    ]);
-    useEffect(()=>{
-        if (verbs.length < 2 || reduceMotion) return;
-        const timer = setInterval(()=>setAt((current)=>(current + 1) % verbs.length), intervalMs);
-        return ()=>clearInterval(timer);
-    }, [
-        verbs.length,
-        intervalMs,
-        reduceMotion
-    ]);
-    if (verbs.length === 0) return null;
+    }, [verbs.length, reduceMotion]);
+    useEffect(() => {
+        if (verbs.length < 2 || reduceMotion)
+            return;
+        const timer = setInterval(() => setAt((current) => (current + 1) % verbs.length), intervalMs);
+        return () => clearInterval(timer);
+    }, [verbs.length, intervalMs, reduceMotion]);
+    if (verbs.length === 0)
+        return null;
     const active = at % verbs.length;
-    return /*#__PURE__*/ _jsxs("span", {
-        className: cn("text-sm", className),
-        children: [
-            /*#__PURE__*/ _jsx("span", {
-                role: "status",
-                className: "sr-only",
-                children: statusLabel
-            }),
-            /*#__PURE__*/ _jsx("span", {
-                "aria-hidden": true,
-                className: "inline-grid",
-                children: verbs.map((verb, index)=>/*#__PURE__*/ _jsx(ShimmerText, {
-                        className: cn("col-start-1 row-start-1 transition-opacity duration-200", index === active ? "opacity-100" : "opacity-0"),
-                        children: verb
-                    }, index))
-            })
-        ]
-    });
+    return (_jsxs("span", { className: cn("text-sm", className), children: [_jsx("span", { role: "status", className: "sr-only", children: statusLabel }), _jsx("span", { "aria-hidden": true, className: "inline-grid", children: verbs.map((verb, index) => (_jsx(ShimmerText, { className: cn("col-start-1 row-start-1 transition-opacity duration-200", index === active ? "opacity-100" : "opacity-0"), children: verb }, index))) })] }));
 }

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

@@ -7,4 +7,4 @@ export interface ThinkingMarkProps {
     style?: CSSProperties;
 }
 /** Decorative animated Corbits mark. Pair with visible text or ThinkingIndicator. */
-export declare function ThinkingMark({ variant, paused, className, style }: ThinkingMarkProps): import("react").JSX.Element;
+export declare function ThinkingMark({ variant, paused, className, style, }: ThinkingMarkProps): import("react").JSX.Element;

package/dist/ui/thinking-mark.js

@@ -1,153 +1,12 @@
+"use client";
 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 }) {
+/** 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)"
-                })
-            })
-        ]
-    });
+    return (_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: [_jsxs("defs", { children: [variant === "echo" ? (_jsxs("radialGradient", { id: gradient, children: [_jsx("stop", { offset: ".38", stopColor: "white", stopOpacity: "0" }), _jsx("stop", { offset: ".65", stopColor: "white", stopOpacity: ".65" }), _jsx("stop", { offset: ".9", stopColor: "white" }), _jsx("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })] })) : (_jsxs("linearGradient", { id: gradient, x1: "0", y1: "0", x2: variant === "silk" ? "1" : "0", y2: variant === "silk" ? "0" : "1", children: [_jsx("stop", { stopColor: "white", stopOpacity: "0" }), variant === "silk" ? (_jsxs(_Fragment, { children: [_jsx("stop", { offset: ".45", stopColor: "white", stopOpacity: ".65" }), _jsx("stop", { offset: ".78", stopColor: "white" })] })) : (_jsxs(_Fragment, { children: [_jsx("stop", { offset: ".25", stopColor: "white" }), _jsx("stop", { offset: ".42", stopColor: "white", stopOpacity: ".7" })] })), _jsx("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })] })), _jsxs("mask", { id: mask, maskUnits: "userSpaceOnUse", x: "-10", y: "-10", width: "120", height: "90", style: { maskType: "luminance" }, children: [variant === "silk" && (_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" && (_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" && (_jsxs(_Fragment, { children: [_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})` }), _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})` })] }))] })] }), _jsx("g", { className: "fill-thinking-base", opacity: ".7", children: _jsx("path", { d: CORBITS_MARK_PATH, transform: "translate(-2.3 -15) scale(.213)" }) }), _jsx("g", { className: "fill-primary", mask: `url(#${mask})`, children: _jsx("path", { d: CORBITS_MARK_PATH, transform: "translate(-2.3 -15) scale(.213)" }) })] }));
 }

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

@@ -1,7 +1,8 @@
+"use client";
 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 { 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;
@@ -41,11 +42,12 @@ const PAD_BOTTOM = 22;
  * 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 }) {
+ */
+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 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;
@@ -53,197 +55,64 @@ const PAD_BOTTOM = 22;
     // 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);
+    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;
+        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 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)=>{
+        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
-        },
+    const readout = active === null
+        ? ""
+        : `${labels[active]}: ${drawn.map((entry) => `${entry.label} ${format(entry.values[active] ?? 0)}`).join(", ")}`;
+    return (_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)=>{
+        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: [_jsxs("div", { className: "relative", children: [_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") {
+                            }
+                            else if (event.key === "ArrowLeft") {
                                 event.preventDefault();
                                 step(-1);
-                            } else if (event.key === "Escape") {
+                            }
+                            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),
+                        }, children: [ticks.map((tick) => (_jsxs("g", { children: [_jsx("line", { x1: PAD_LEFT, y1: yAt(tick), x2: WIDTH - PAD_RIGHT, y2: yAt(tick), stroke: "var(--border)", strokeWidth: 1 }), _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 : (_jsxs(_Fragment, { children: [_jsx("text", { x: PAD_LEFT, y: HEIGHT - 6, className: "fill-muted-foreground text-[10px]", children: labels[0] }), _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 : (_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) => (_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) => (_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) => (_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
-            })
-        ]
-    });
+                                    stroke: "var(--card)", strokeWidth: 2 }, entry.label)))] }), active === null ? null : (_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: [_jsx("p", { className: "font-medium", children: labels[active] }), _jsx("ul", { className: "mt-1 flex flex-col gap-0.5", children: drawn.map((entry, index) => (_jsxs("li", { className: "flex items-center gap-1.5", children: [_jsx("svg", { "aria-hidden": true, viewBox: "0 0 20 4", className: "h-1 w-5 shrink-0 overflow-visible", children: _jsx("line", { x1: 0, y1: 2, x2: 20, y2: 2, stroke: seriesColor(index), strokeDasharray: seriesDash(index), strokeWidth: 2.5 }) }), _jsx("span", { className: "text-muted-foreground", children: entry.label }), _jsx("span", { className: "ml-auto pl-3 font-mono tabular-nums", children: format(entry.values[active] ?? 0) })] }, entry.label))) })] }))] }), _jsx("p", { role: "status", className: cn("sr-only"), children: readout })] }));
 }

package/dist/ui/toast.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Toaster as Sonner, toast as sonnerToast } from "sonner";
 const TOAST_DURATION_MS = 1800;
@@ -9,33 +10,24 @@ let sequence = 0;
  * 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);
+ */
+export function toast(message) {
+    if (activeId !== null)
+        sonnerToast.dismiss(activeId);
     sequence += 1;
     activeId = `corbits-toast-${sequence}`;
-    sonnerToast(message, {
-        id: activeId,
-        duration: TOAST_DURATION_MS
-    });
+    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: {
+ */
+export function Toaster(props) {
+    return (_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
-    });
+            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.js

@@ -12,53 +12,15 @@ import { cn } from "../lib/utils.js";
  * 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 }) {
+ */
+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))
-            })
-        ]
-    });
+    return (_jsxs("div", { className: cn("flex flex-col gap-2", className), children: [_jsx("div", { className: "flex h-2.5 w-full overflow-hidden rounded-[3px] bg-muted", role: "img", "aria-label": label, children: _jsx("svg", { className: "h-full w-full", viewBox: "0 0 100 10", preserveAspectRatio: "none", children: renderSegmentRects(segments) }) }), _jsx("div", { className: "flex flex-wrap gap-x-4 gap-y-1", children: segments.map((segment, index) => (_jsxs("span", { className: "flex items-center gap-1.5 font-mono text-[11px] tracking-[0.08em] uppercase text-muted-foreground", children: [_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);
+    return segments.map((segment, index) => {
+        const rect = (_jsx("rect", { x: x, y: 0, width: segment.pct, height: 10, fill: seriesColor(index) }, segment.label));
         x += segment.pct;
         return rect;
     });