@corbits/react-ui 0.1.0 → 0.3.0

package/dist/ui/sidebar-item-row.d.ts

@@ -14,7 +14,7 @@ export type SidebarItemRowProps = {
      * one more frame (~150ms) so the leave transition gets to play. List
      * membership is the consumer's data — nothing here manages it for you.
      */
-    readonly leaving?: boolean;
+    readonly leaving?: boolean | undefined;
     readonly onSelect?: () => void;
     readonly className?: string;
 };

package/dist/ui/sidebar-item-row.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { cn } from "../lib/utils.js";
@@ -19,46 +20,15 @@ import { cn } from "../lib/utils.js";
  * component to supply one.
  *
  * Not `ui/sidebar`'s `SidebarItem` — that's the single-column family's row.
- */ export function SidebarItemRow({ name, leading, meta, action, unread = false, selected = false, leaving = false, onSelect, className }) {
+ */
+export function SidebarItemRow({ name, leading, meta, action, unread = false, selected = false, leaving = false, onSelect, className, }) {
     const [mounted, setMounted] = useState(false);
-    useEffect(()=>{
-        const raf = requestAnimationFrame(()=>setMounted(true));
-        return ()=>cancelAnimationFrame(raf);
+    useEffect(() => {
+        const raf = requestAnimationFrame(() => setMounted(true));
+        return () => cancelAnimationFrame(raf);
     }, []);
     const state = !mounted ? "entering" : leaving ? "leaving" : "visible";
-    return /*#__PURE__*/ _jsx("li", {
-        "data-slot": "sidebar-item-row",
-        "data-state": state,
-        className: cn("group/row transition-[transform,opacity] duration-150 ease-out", state === "entering" && "-translate-y-1 opacity-0", state === "leaving" && "pointer-events-none translate-y-1 opacity-0", state === "visible" && "translate-y-0 opacity-100", className),
-        children: /*#__PURE__*/ _jsxs("div", {
-            className: cn("flex w-full items-center gap-2 rounded-[var(--sidebar-row-radius)] pr-1.5 text-sm transition-colors", selected ? "bg-[var(--sidebar-row-selected-bg)] text-primary-emphasis" : "text-foreground hover:bg-muted"),
-            children: [
-                /*#__PURE__*/ _jsxs("button", {
-                    type: "button",
-                    "aria-current": selected ? "true" : undefined,
-                    onClick: onSelect,
-                    className: "flex min-w-0 flex-1 items-center gap-2 rounded-[var(--sidebar-row-radius)] py-1.5 pl-2 text-left active:brightness-95",
-                    children: [
-                        leading === undefined ? null : /*#__PURE__*/ _jsx("span", {
-                            className: "grid size-5 shrink-0 place-items-center [&_svg]:size-4",
-                            "aria-hidden": true,
-                            children: leading
-                        }),
-                        /*#__PURE__*/ _jsx("span", {
-                            className: cn("min-w-0 flex-1 truncate", unread && "font-semibold"),
-                            children: name
-                        }),
-                        meta === undefined ? null : /*#__PURE__*/ _jsx("span", {
-                            className: "flex shrink-0 items-center gap-1.5",
-                            children: meta
-                        })
-                    ]
-                }),
-                action === undefined ? null : /*#__PURE__*/ _jsx("span", {
-                    className: "shrink-0 opacity-0 transition-opacity group-hover/row:opacity-100 group-focus-within/row:opacity-100",
-                    children: action
-                })
-            ]
-        })
-    });
+    return (_jsx("li", { "data-slot": "sidebar-item-row", "data-state": state, className: cn("group/row transition-[transform,opacity] duration-150 ease-out", state === "entering" && "-translate-y-1 opacity-0", state === "leaving" && "pointer-events-none translate-y-1 opacity-0", state === "visible" && "translate-y-0 opacity-100", className), children: _jsxs("div", { className: cn("flex w-full items-center gap-2 rounded-[var(--sidebar-row-radius)] pr-1.5 text-sm transition-colors", selected
+                ? "bg-[var(--sidebar-row-selected-bg)] text-primary-emphasis"
+                : "text-foreground hover:bg-muted"), children: [_jsxs("button", { type: "button", "aria-current": selected ? "true" : undefined, onClick: onSelect, className: "flex min-w-0 flex-1 items-center gap-2 rounded-[var(--sidebar-row-radius)] py-1.5 pl-2 text-left active:brightness-95", children: [leading === undefined ? null : (_jsx("span", { className: "grid size-5 shrink-0 place-items-center [&_svg]:size-4", "aria-hidden": true, children: leading })), _jsx("span", { className: cn("min-w-0 flex-1 truncate", unread && "font-semibold"), children: name }), meta === undefined ? null : (_jsx("span", { className: "flex shrink-0 items-center gap-1.5", children: meta }))] }), action === undefined ? null : (_jsx("span", { className: "shrink-0 opacity-0 transition-opacity group-hover/row:opacity-100 group-focus-within/row:opacity-100", children: action }))] }) }));
 }

package/dist/ui/sidebar-panel.js

@@ -5,52 +5,27 @@ import { cn } from "../lib/utils.js";
  * assembles `SidebarPanelHeader`, `SidebarPanelPins`, `SidebarPanelBody` and
  * `SidebarPanelFooter` in whatever combination the active page calls for, and
  * the root only supplies the width, the border and the flex column.
- */ export function SidebarPanel({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("div", {
-        "data-slot": "sidebar-panel",
-        className: cn("flex h-full w-72 shrink-0 flex-col border-r border-border bg-card text-card-foreground", className),
-        ...props
-    });
+ */
+export function SidebarPanel({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-panel", className: cn("flex h-full w-72 shrink-0 flex-col border-r border-border bg-card text-card-foreground", className), ...props }));
 }
-/** Not `ui/sidebar`'s `SidebarHeader` — that's the single-column family's header slot. */ export function SidebarPanelHeader({ title, action, className, ...props }) {
-    return /*#__PURE__*/ _jsxs("div", {
-        "data-slot": "sidebar-panel-header",
-        className: cn("flex min-h-14 shrink-0 items-center justify-between gap-2 border-b border-border px-3", className),
-        ...props,
-        children: [
-            /*#__PURE__*/ _jsx("h2", {
-                className: "min-w-0 truncate text-sm font-semibold",
-                children: title
-            }),
-            action === undefined ? null : /*#__PURE__*/ _jsx("div", {
-                className: "shrink-0",
-                children: action
-            })
-        ]
-    });
+/** Not `ui/sidebar`'s `SidebarHeader` — that's the single-column family's header slot. */
+export function SidebarPanelHeader({ title, action, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "sidebar-panel-header", className: cn("flex min-h-14 shrink-0 items-center justify-between gap-2 border-b border-border px-3", className), ...props, children: [_jsx("h2", { className: "min-w-0 truncate text-sm font-semibold", children: title }), action === undefined ? null : _jsx("div", { className: "shrink-0", children: action })] }));
 }
 /**
  * Global pins live above the per-page sections and never scroll away with
  * them — that is the entire reason this is a separate slot rather than just
  * the first `SidebarPanelSection` inside the body.
- */ export function SidebarPanelPins({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("div", {
-        "data-slot": "sidebar-panel-pins",
-        className: cn("shrink-0 border-b border-border px-2 py-2", className),
-        ...props
-    });
+ */
+export function SidebarPanelPins({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-panel-pins", className: cn("shrink-0 border-b border-border px-2 py-2", className), ...props }));
 }
-/** The scrollable region: sections go here. Everything above and below it is pinned. */ export function SidebarPanelBody({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("div", {
-        "data-slot": "sidebar-panel-body",
-        className: cn("min-h-0 flex-1 overflow-y-auto py-1", className),
-        ...props
-    });
+/** The scrollable region: sections go here. Everything above and below it is pinned. */
+export function SidebarPanelBody({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-panel-body", className: cn("min-h-0 flex-1 overflow-y-auto py-1", className), ...props }));
 }
-/** Not `ui/sidebar`'s `SidebarFooter` — that's the single-column family's footer slot. */ export function SidebarPanelFooter({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("div", {
-        "data-slot": "sidebar-panel-footer",
-        className: cn("shrink-0 border-t border-border p-2", className),
-        ...props
-    });
+/** Not `ui/sidebar`'s `SidebarFooter` — that's the single-column family's footer slot. */
+export function SidebarPanelFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-panel-footer", className: cn("shrink-0 border-t border-border p-2", className), ...props }));
 }

package/dist/ui/sidebar.js

@@ -17,95 +17,34 @@ import { cn } from "../lib/utils.js";
  *
  * Collapsing hides labels with `sr-only`, never `hidden`: the icon-only rail
  * must keep its accessible names or it is unusable with a screen reader.
- */ export function Sidebar({ collapsed = false, className, ...props }) {
-    return /*#__PURE__*/ _jsx("aside", {
-        "data-slot": "sidebar",
-        "data-collapsed": collapsed,
-        className: cn("group/sidebar flex h-full shrink-0 flex-col border-r border-border bg-card text-card-foreground", "w-60 transition-[width] duration-200 data-[collapsed=true]:w-14", className),
-        ...props
-    });
+ */
+export function Sidebar({ collapsed = false, className, ...props }) {
+    return (_jsx("aside", { "data-slot": "sidebar", "data-collapsed": collapsed, className: cn("group/sidebar flex h-full shrink-0 flex-col border-r border-border bg-card text-card-foreground", "w-60 transition-[width] duration-200 data-[collapsed=true]:w-14", className), ...props }));
 }
 export function SidebarHeader({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("div", {
-        "data-slot": "sidebar-header",
-        className: cn("flex min-h-14 items-center gap-2 border-b border-border px-3", className),
-        ...props
-    });
+    return (_jsx("div", { "data-slot": "sidebar-header", className: cn("flex min-h-14 items-center gap-2 border-b border-border px-3", className), ...props }));
 }
 export function SidebarContent({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("div", {
-        "data-slot": "sidebar-content",
-        className: cn("min-h-0 flex-1 overflow-y-auto py-2", className),
-        ...props
-    });
+    return (_jsx("div", { "data-slot": "sidebar-content", className: cn("min-h-0 flex-1 overflow-y-auto py-2", className), ...props }));
 }
 export function SidebarFooter({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("div", {
-        "data-slot": "sidebar-footer",
-        className: cn("border-t border-border p-2", className),
-        ...props
-    });
+    return (_jsx("div", { "data-slot": "sidebar-footer", className: cn("border-t border-border p-2", className), ...props }));
 }
-/** One nav section. `label` is required — an unlabelled group is invisible to AT. */ export function SidebarSection({ label, className, children, ...props }) {
-    return /*#__PURE__*/ _jsxs("nav", {
-        "data-slot": "sidebar-section",
-        "aria-label": label,
-        className: cn("px-2 py-1", className),
-        ...props,
-        children: [
-            /*#__PURE__*/ _jsx("p", {
-                className: "px-2 py-1 text-[11px] font-semibold tracking-[0.12em] text-muted-foreground uppercase group-data-[collapsed=true]/sidebar:sr-only",
-                children: label
-            }),
-            /*#__PURE__*/ _jsx("ul", {
-                className: "flex flex-col gap-0.5",
-                children: children
-            })
-        ]
-    });
+/** One nav section. `label` is required — an unlabelled group is invisible to AT. */
+export function SidebarSection({ label, className, children, ...props }) {
+    return (_jsxs("nav", { "data-slot": "sidebar-section", "aria-label": label, className: cn("px-2 py-1", className), ...props, children: [_jsx("p", { className: "px-2 py-1 text-[11px] font-semibold tracking-[0.12em] text-muted-foreground uppercase group-data-[collapsed=true]/sidebar:sr-only", children: label }), _jsx("ul", { className: "flex flex-col gap-0.5", children: children })] }));
 }
 export function SidebarItem({ active = false, icon, count, asChild = false, className, children, ...props }) {
     const Comp = asChild ? Slot : "a";
-    return /*#__PURE__*/ _jsx("li", {
-        children: /*#__PURE__*/ _jsxs(Comp, {
-            "data-slot": "sidebar-item",
-            "aria-current": active ? "page" : undefined,
-            className: cn("flex items-center gap-2.5 rounded-md px-2 py-2 text-sm transition-colors", "group-data-[collapsed=true]/sidebar:justify-center", active ? "bg-primary/10 font-medium text-primary-emphasis" : "text-muted-foreground hover:bg-muted hover:text-foreground", className),
-            ...props,
-            children: [
-                icon === undefined ? null : /*#__PURE__*/ _jsx("span", {
-                    className: "grid size-4 shrink-0 place-items-center [&_svg]:size-4",
-                    "aria-hidden": true,
-                    children: icon
-                }),
-                /*#__PURE__*/ _jsx("span", {
-                    className: "min-w-0 flex-1 truncate group-data-[collapsed=true]/sidebar:sr-only",
-                    children: children
-                }),
-                count === undefined ? null : /*#__PURE__*/ _jsx("span", {
-                    className: "shrink-0 rounded-full bg-muted px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground group-data-[collapsed=true]/sidebar:sr-only",
-                    children: count
-                })
-            ]
-        })
-    });
+    return (_jsx("li", { children: _jsxs(Comp, { "data-slot": "sidebar-item", "aria-current": active ? "page" : undefined, className: cn("flex items-center gap-2.5 rounded-md px-2 py-2 text-sm transition-colors", "group-data-[collapsed=true]/sidebar:justify-center", active
+                ? "bg-primary/10 font-medium text-primary-emphasis"
+                : "text-muted-foreground hover:bg-muted hover:text-foreground", className), ...props, children: [icon === undefined ? null : (_jsx("span", { className: "grid size-4 shrink-0 place-items-center [&_svg]:size-4", "aria-hidden": true, children: icon })), _jsx("span", { className: "min-w-0 flex-1 truncate group-data-[collapsed=true]/sidebar:sr-only", children: children }), count === undefined ? null : (_jsx("span", { className: "shrink-0 rounded-full bg-muted px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground group-data-[collapsed=true]/sidebar:sr-only", children: count }))] }) }));
 }
 /**
  * Collapse control. `aria-expanded` describes the rail it controls, so pass the
  * rail's id in `aria-controls` when the button lives outside the `<aside>`.
- */ export function SidebarCollapseToggle({ collapsed, onToggle, className, ...props }) {
+ */
+export function SidebarCollapseToggle({ collapsed, onToggle, className, ...props }) {
     const Icon = collapsed ? PanelLeftOpen : PanelLeftClose;
-    return /*#__PURE__*/ _jsx("button", {
-        type: "button",
-        "data-slot": "sidebar-collapse-toggle",
-        "aria-expanded": !collapsed,
-        "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
-        onClick: onToggle,
-        className: cn("grid size-8 shrink-0 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", className),
-        ...props,
-        children: /*#__PURE__*/ _jsx(Icon, {
-            className: "size-4",
-            "aria-hidden": true
-        })
-    });
+    return (_jsx("button", { type: "button", "data-slot": "sidebar-collapse-toggle", "aria-expanded": !collapsed, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", onClick: onToggle, className: cn("grid size-8 shrink-0 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", className), ...props, children: _jsx(Icon, { className: "size-4", "aria-hidden": true }) }));
 }

package/dist/ui/skeleton.js

@@ -10,11 +10,7 @@ import { cn } from "../lib/utils.js";
  * `aria-hidden`, always. A screen reader should hear "Loading…" once from a
  * sibling `role="status"`, not the geometry of six grey boxes. If you render
  * these, render a status line with them.
- */ export function Skeleton({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("div", {
-        "data-slot": "skeleton",
-        "aria-hidden": true,
-        className: cn("animate-pulse rounded-md bg-muted", className),
-        ...props
-    });
+ */
+export function Skeleton({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "skeleton", "aria-hidden": true, className: cn("animate-pulse rounded-md bg-muted", className), ...props }));
 }

package/dist/ui/sortable-table.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react";
 import { useMemo, useState } from "react";
 import { cn } from "../lib/utils.js";
 import { EmptyState } from "./empty-state.js";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "./table.js";
 /**
  * A table you can sort by clicking a header.
  *
@@ -18,86 +19,42 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from ".
  * invisible to a screen reader, and sort order is exactly the sort of state
  * that goes unnoticed without it. Inactive sortable headers show a neutral
  * affordance so it is discoverable which columns can be sorted at all.
- */ export function SortableTable({ caption, rows, columns, rowKey, initialSort, empty, className }) {
+ */
+export function SortableTable({ caption, rows, columns, rowKey, initialSort, empty, className, }) {
     const [sort, setSort] = useState(initialSort ?? null);
-    const sorted = useMemo(()=>{
-        if (sort === null) return rows;
-        const column = columns.find((candidate)=>candidate.key === sort.key);
-        if (column?.sortValue === undefined) return rows;
+    const sorted = useMemo(() => {
+        if (sort === null)
+            return rows;
+        const column = columns.find((candidate) => candidate.key === sort.key);
+        if (column?.sortValue === undefined)
+            return rows;
         const { sortValue } = column;
         // Sorts a copy: `rows` belongs to the caller and may be frozen.
-        return [
-            ...rows
-        ].sort((a, b)=>{
+        return [...rows].sort((a, b) => {
             const left = sortValue(a);
             const right = sortValue(b);
-            const comparison = typeof left === "number" && typeof right === "number" ? left - right : String(left).localeCompare(String(right));
+            const comparison = typeof left === "number" && typeof right === "number"
+                ? left - right
+                : // localeCompare so "Ä" sorts next to "A" rather than after "Z".
+                    String(left).localeCompare(String(right));
             return sort.direction === "asc" ? comparison : -comparison;
         });
-    }, [
-        rows,
-        columns,
-        sort
-    ]);
-    const toggle = (key)=>{
-        setSort((current)=>current?.key === key ? {
-                key,
-                direction: current.direction === "asc" ? "desc" : "asc"
-            } : {
-                key,
-                direction: "asc"
-            });
+    }, [rows, columns, sort]);
+    const toggle = (key) => {
+        setSort((current) => current?.key === key
+            ? { key, direction: current.direction === "asc" ? "desc" : "asc" }
+            : { key, direction: "asc" });
     };
     if (rows.length === 0) {
-        return /*#__PURE__*/ _jsx(_Fragment, {
-            children: empty ?? /*#__PURE__*/ _jsx(EmptyState, {
-                title: "Nothing to show"
-            })
-        });
+        return _jsx(_Fragment, { children: empty ?? _jsx(EmptyState, { title: "Nothing to show" }) });
     }
-    return /*#__PURE__*/ _jsxs(Table, {
-        "aria-label": caption,
-        className: className,
-        children: [
-            /*#__PURE__*/ _jsx(TableHeader, {
-                children: /*#__PURE__*/ _jsx(TableRow, {
-                    children: columns.map((column)=>{
+    return (_jsxs(Table, { "aria-label": caption, className: className, children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map((column) => {
                         const active = sort?.key === column.key;
                         const sortable = column.sortValue !== undefined;
-                        return /*#__PURE__*/ _jsx(TableHead, {
-                            scope: "col",
-                            "aria-sort": active ? sort.direction === "asc" ? "ascending" : "descending" : undefined,
-                            className: cn(column.align === "right" && "text-right", column.className),
-                            children: sortable ? /*#__PURE__*/ _jsxs("button", {
-                                type: "button",
-                                onClick: ()=>toggle(column.key),
-                                className: cn("inline-flex items-center gap-1 rounded-sm transition-colors hover:text-foreground", !active && "text-muted-foreground"),
-                                children: [
-                                    column.header,
-                                    active ? sort.direction === "asc" ? /*#__PURE__*/ _jsx(ChevronUp, {
-                                        className: "size-3.5",
-                                        "aria-hidden": true
-                                    }) : /*#__PURE__*/ _jsx(ChevronDown, {
-                                        className: "size-3.5",
-                                        "aria-hidden": true
-                                    }) : /*#__PURE__*/ _jsx(ChevronsUpDown, {
-                                        className: "size-3.5 opacity-50",
-                                        "aria-hidden": true
-                                    })
-                                ]
-                            }) : column.header
-                        }, column.key);
-                    })
-                })
-            }),
-            /*#__PURE__*/ _jsx(TableBody, {
-                children: sorted.map((row)=>/*#__PURE__*/ _jsx(TableRow, {
-                        children: columns.map((column)=>/*#__PURE__*/ _jsx(TableCell, {
-                                className: cn(column.align === "right" && "text-right", column.className),
-                                children: column.cell(row)
-                            }, column.key))
-                    }, rowKey(row)))
-            })
-        ]
-    });
+                        return (_jsx(TableHead, { scope: "col", "aria-sort": active
+                                ? sort.direction === "asc"
+                                    ? "ascending"
+                                    : "descending"
+                                : undefined, className: cn(column.align === "right" && "text-right", column.className), children: sortable ? (_jsxs("button", { type: "button", onClick: () => toggle(column.key), className: cn("inline-flex items-center gap-1 rounded-sm transition-colors hover:text-foreground", !active && "text-muted-foreground"), children: [column.header, active ? (sort.direction === "asc" ? (_jsx(ChevronUp, { className: "size-3.5", "aria-hidden": true })) : (_jsx(ChevronDown, { className: "size-3.5", "aria-hidden": true }))) : (_jsx(ChevronsUpDown, { className: "size-3.5 opacity-50", "aria-hidden": true }))] })) : (column.header) }, column.key));
+                    }) }) }), _jsx(TableBody, { children: sorted.map((row) => (_jsx(TableRow, { children: columns.map((column) => (_jsx(TableCell, { className: cn(column.align === "right" && "text-right", column.className), children: column.cell(row) }, column.key))) }, rowKey(row)))) })] }));
 }

package/dist/ui/sparkline.js

@@ -19,50 +19,26 @@ const HEIGHT = 24;
  * `role="img"` with the caller's summary as its name. The summary is required
  * for the same reason `alt` is: a picture with no text alternative is simply
  * missing for some readers, and this one has no fallback content to fall back to.
- */ export function Sparkline({ values, summary, className }) {
+ */
+export function Sparkline({ values, summary, className }) {
     if (values.length < 2) {
-        return /*#__PURE__*/ _jsx("span", {
-            className: cn("inline-block", className),
-            role: "img",
-            "aria-label": summary
-        });
+        return (_jsx("span", { className: cn("inline-block", className), role: "img", "aria-label": summary }));
     }
     const min = Math.min(...values);
     const max = Math.max(...values);
     const span = max - min;
     const stepX = WIDTH / (values.length - 1);
-    const points = values.map((value, index)=>({
-            x: index * stepX,
-            // A flat series has no span to scale against; centre it rather than
-            // dividing by zero.
-            y: span === 0 ? HEIGHT / 2 : HEIGHT - scaleLinear(value - min, span, HEIGHT - 4) - 2
-        }));
+    const points = values.map((value, index) => ({
+        x: index * stepX,
+        // A flat series has no span to scale against; centre it rather than
+        // dividing by zero.
+        y: span === 0
+            ? HEIGHT / 2
+            : HEIGHT - scaleLinear(value - min, span, HEIGHT - 4) - 2,
+    }));
     const last = points[points.length - 1];
-    return /*#__PURE__*/ _jsxs("svg", {
-        viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
-        className: cn("h-6 w-24", className),
-        role: "img",
-        "aria-label": summary,
-        focusable: "false",
-        children: [
-            /*#__PURE__*/ _jsx("path", {
-                d: linePath(points),
-                fill: "none",
-                stroke: seriesColor(0),
-                strokeWidth: 2,
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
-            }),
-            last === undefined ? null : // The end dot marks "now" — which end is the current period is
+    return (_jsxs("svg", { viewBox: `0 0 ${WIDTH} ${HEIGHT}`, className: cn("h-6 w-24", className), role: "img", "aria-label": summary, focusable: "false", children: [_jsx("path", { d: linePath(points), fill: "none", stroke: seriesColor(0), strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), last === undefined ? null : (
+            // The end dot marks "now" — which end is the current period is
             // otherwise ambiguous on a shape with no axis.
-            /*#__PURE__*/ _jsx("circle", {
-                cx: last.x,
-                cy: last.y,
-                r: 2.5,
-                fill: seriesColor(0),
-                stroke: "var(--card)",
-                strokeWidth: 2
-            })
-        ]
-    });
+            _jsx("circle", { cx: last.x, cy: last.y, r: 2.5, fill: seriesColor(0), stroke: "var(--card)", strokeWidth: 2 }))] }));
 }

package/dist/ui/stat-grid.js

@@ -7,7 +7,7 @@ const COLUMN_CLASS = {
     2: "grid-cols-2",
     3: "grid-cols-2 sm:grid-cols-3",
     4: "grid-cols-2 sm:grid-cols-4",
-    5: "grid-cols-2 sm:grid-cols-5"
+    5: "grid-cols-2 sm:grid-cols-5",
 };
 /**
  * The KPI band: a fixed responsive grid of `StatGridItem`s.
@@ -15,15 +15,15 @@ const COLUMN_CLASS = {
  * Fixed columns rather than auto-fit, because a KPI row is designed as a set —
  * four headline numbers are four columns, and a row that reflows to five-up on
  * a wider screen silently reorders what the reader compares side by side.
- */ export function StatGrid({ children, columns = 4, className }) {
-    return /*#__PURE__*/ _jsx("div", {
-        className: cn("grid gap-3", COLUMN_CLASS[columns], className),
-        children: children
-    });
+ */
+export function StatGrid({ children, columns = 4, className }) {
+    return (_jsx("div", { className: cn("grid gap-3", COLUMN_CLASS[columns], className), children: children }));
 }
 function statValueClass(accent, danger) {
-    if (danger === true) return "text-destructive";
-    if (accent === true) return "text-primary-emphasis";
+    if (danger === true)
+        return "text-destructive";
+    if (accent === true)
+        return "text-primary-emphasis";
     return "text-foreground";
 }
 /**
@@ -36,52 +36,17 @@ function statValueClass(accent, danger) {
  * wearing `role="button"`) so keyboard activation is native. Shared layout
  * classes stay identical; only the interactive shell adds hover/press
  * affordance and the `text-left`/`w-full` button reset.
- */ export function StatGridItem({ label, value, sub, accent, danger, emphasis, delta, sparkline, sparklineValues, sparklineLabel, onClick, className }) {
-    const sparklineNode = sparkline ?? (sparklineValues !== undefined && sparklineValues.length > 0 ? /*#__PURE__*/ _jsx(Sparkline, {
-        values: sparklineValues,
-        summary: sparklineLabel ?? `${label} trend`
-    }) : null);
+ */
+export function StatGridItem({ label, value, sub, accent, danger, emphasis, delta, sparkline, sparklineValues, sparklineLabel, onClick, className, }) {
+    const sparklineNode = sparkline ??
+        (sparklineValues !== undefined && sparklineValues.length > 0 ? (_jsx(Sparkline, { values: sparklineValues, summary: sparklineLabel ?? `${label} trend` })) : null);
     const shell = cn("flex flex-col gap-1.5 rounded-lg border border-border bg-card", emphasis === true ? "p-5 shadow-sm" : "p-4", className);
-    const body = /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            /*#__PURE__*/ _jsx("span", {
-                className: "text-[10px] font-semibold tracking-[0.12em] uppercase text-muted-foreground",
-                children: label
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: "flex items-baseline gap-2",
-                children: [
-                    /*#__PURE__*/ _jsx("span", {
-                        className: cn("font-black leading-none tabular-nums", emphasis === true ? "text-[34px]" : "text-[26px]", statValueClass(accent, danger)),
-                        children: value
-                    }),
-                    delta
-                ]
-            }),
-            sparklineNode === null ? null : /*#__PURE__*/ _jsx("div", {
-                className: "mt-0.5",
-                children: sparklineNode
-            }),
-            sub === undefined ? null : /*#__PURE__*/ _jsx("span", {
-                className: "text-[10px] tracking-[0.08em] uppercase text-muted-foreground",
-                children: sub
-            })
-        ]
-    });
+    const body = (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[10px] font-semibold tracking-[0.12em] uppercase text-muted-foreground", children: label }), _jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: cn("font-black leading-none tabular-nums", emphasis === true ? "text-[34px]" : "text-[26px]", statValueClass(accent, danger)), children: value }), delta] }), sparklineNode === null ? null : (_jsx("div", { className: "mt-0.5", children: sparklineNode })), sub === undefined ? null : (_jsx("span", { className: "text-[10px] tracking-[0.08em] uppercase text-muted-foreground", children: sub }))] }));
     if (onClick === undefined) {
-        return /*#__PURE__*/ _jsx("div", {
-            "data-slot": "stat-grid-item",
-            className: shell,
-            children: body
-        });
+        return (_jsx("div", { "data-slot": "stat-grid-item", className: shell, children: body }));
     }
-    return /*#__PURE__*/ _jsx("button", {
-        type: "button",
-        "data-slot": "stat-grid-item",
-        onClick: onClick,
-        className: cn(shell, // text-left/w-full: button UA styles centre content and shrink-wrap.
+    return (_jsx("button", { type: "button", "data-slot": "stat-grid-item", onClick: onClick, className: cn(shell, 
+        // text-left/w-full: button UA styles centre content and shrink-wrap.
         // Hover/press only on the interactive shell so static tiles stay quiet.
-        "w-full cursor-pointer text-left transition-colors hover:border-primary-emphasis active:brightness-95"),
-        children: body
-    });
+        "w-full cursor-pointer text-left transition-colors hover:border-primary-emphasis active:brightness-95"), children: body }));
 }

package/dist/ui/status-dot.d.ts

@@ -10,4 +10,4 @@ export type StatusDotProps = {
     readonly className?: string;
 };
 export type StatusDotSize = "xs" | "sm";
-export declare function StatusDot({ label, live, tone, size, className }: StatusDotProps): import("react").JSX.Element;
+export declare function StatusDot({ label, live, tone, size, className, }: StatusDotProps): import("react").JSX.Element;

package/dist/ui/status-dot.js

@@ -11,14 +11,15 @@ import { cn } from "../lib/utils.js";
  *
  * Classes are spelled out rather than composed at runtime — Tailwind's scanner
  * only emits utilities it can see literally in the source.
- */ const TONE_CLASS = {
+ */
+const TONE_CLASS = {
     neutral: "bg-muted-foreground",
     emphasis: "bg-primary-emphasis",
     // success/warning use emphasis orange until dedicated high-contrast
     // fills clear 3:1 at 8px; Badge remains the full-status carrier.
     success: "bg-primary-emphasis",
     warning: "bg-primary-emphasis",
-    danger: "bg-destructive"
+    danger: "bg-destructive",
 };
 /**
  * A state marker carrying its own accessible name — a coloured dot with no
@@ -28,24 +29,11 @@ import { cn } from "../lib/utils.js";
  * The `live` ring is a separate `aria-hidden` element: motion says "still
  * changing" to people who can see it, and the label already says so to those
  * who cannot. It stills under the theme's reduced-motion rule.
- */ const SIZE_CLASS = {
+ */
+const SIZE_CLASS = {
     xs: "size-1.5",
-    sm: "size-2"
+    sm: "size-2",
 };
-export function StatusDot({ label, live = false, tone = "neutral", size = "sm", className }) {
-    return /*#__PURE__*/ _jsxs("span", {
-        role: "img",
-        "aria-label": label,
-        className: cn("relative inline-flex shrink-0", SIZE_CLASS[size], className),
-        children: [
-            live ? /*#__PURE__*/ _jsx("span", {
-                "aria-hidden": true,
-                className: cn("absolute inset-0 rounded-full [animation:corbits-status-pulse_1.8s_ease-out_infinite]", TONE_CLASS[tone])
-            }) : null,
-            /*#__PURE__*/ _jsx("span", {
-                "aria-hidden": true,
-                className: cn("relative size-full rounded-full", TONE_CLASS[tone])
-            })
-        ]
-    });
+export function StatusDot({ label, live = false, tone = "neutral", size = "sm", className, }) {
+    return (_jsxs("span", { role: "img", "aria-label": label, className: cn("relative inline-flex shrink-0", SIZE_CLASS[size], className), children: [live ? (_jsx("span", { "aria-hidden": true, className: cn("absolute inset-0 rounded-full [animation:corbits-status-pulse_1.8s_ease-out_infinite]", TONE_CLASS[tone]) })) : null, _jsx("span", { "aria-hidden": true, className: cn("relative size-full rounded-full", TONE_CLASS[tone]) })] }));
 }

package/dist/ui/step-list.d.ts

@@ -1,4 +1,5 @@
 import type { StepListItem } from "../lib/workflow-registry.js";
+export type { StepDisplayStatus, StepListItem, } from "../lib/workflow-registry.js";
 export type StepListRowProps = {
     readonly step: StepListItem;
     readonly className?: string;