@corbits/react-ui 0.1.0 → 0.2.0

package/dist/ui/top-bar.js

@@ -9,45 +9,15 @@ import { cn } from "../lib/utils.js";
  * pair: pages need a search box, a filter row or a context strip in that space,
  * and a fixed prop list would push every one of them through a `ReactNode` prop
  * that does the same job as a child.
- */ export function TopBar({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("header", {
-        "data-slot": "top-bar",
-        className: cn("flex min-h-14 shrink-0 flex-wrap items-center gap-3 border-b border-border px-4 py-2", className),
-        ...props
-    });
+ */
+export function TopBar({ className, ...props }) {
+    return (_jsx("header", { "data-slot": "top-bar", className: cn("flex min-h-14 shrink-0 flex-wrap items-center gap-3 border-b border-border px-4 py-2", className), ...props }));
 }
 export function TopBarTitle({ count, subtitle, className, children, ...props }) {
-    return /*#__PURE__*/ _jsxs("div", {
-        "data-slot": "top-bar-title",
-        className: cn("flex min-w-0 shrink items-center gap-2", className),
-        ...props,
-        children: [
-            /*#__PURE__*/ _jsxs("div", {
-                className: "flex min-w-0 flex-col",
-                children: [
-                    /*#__PURE__*/ _jsx("h1", {
-                        className: "truncate text-base font-semibold tracking-tight",
-                        children: children
-                    }),
-                    subtitle === undefined ? null : /*#__PURE__*/ _jsx("p", {
-                        className: "truncate text-xs text-muted-foreground",
-                        children: subtitle
-                    })
-                ]
-            }),
-            count === undefined ? null : /*#__PURE__*/ _jsx("span", {
-                className: "shrink-0 rounded-sm bg-muted px-1.5 py-0.5 font-mono text-xs text-muted-foreground",
-                children: count
-            })
-        ]
-    });
+    return (_jsxs("div", { "data-slot": "top-bar-title", className: cn("flex min-w-0 shrink items-center gap-2", className), ...props, children: [_jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("h1", { className: "truncate text-base font-semibold tracking-tight", children: children }), subtitle === undefined ? null : (_jsx("p", { className: "truncate text-xs text-muted-foreground", children: subtitle }))] }), count === undefined ? null : (_jsx("span", { className: "shrink-0 rounded-sm bg-muted px-1.5 py-0.5 font-mono text-xs text-muted-foreground", children: count }))] }));
 }
-function DefaultBreadcrumbLink({ href, className, children }) {
-    return /*#__PURE__*/ _jsx("a", {
-        href: href,
-        className: className,
-        children: children
-    });
+function DefaultBreadcrumbLink({ href, className, children, }) {
+    return (_jsx("a", { href: href, className: className, children: children }));
 }
 /**
  * Breadcrumb trail. The last crumb is the current page: it is rendered as text
@@ -57,42 +27,14 @@ function DefaultBreadcrumbLink({ href, className, children }) {
  * Every other crumb renders through `linkComponent`, defaulting to a plain
  * `<a>`. A consumer routing through a SPA router passes its own `Link` so a
  * breadcrumb click does not force a full page reload.
- */ export function TopBarBreadcrumbs({ crumbs, linkComponent: LinkComponent = DefaultBreadcrumbLink, className, ...props }) {
-    return /*#__PURE__*/ _jsx("nav", {
-        "data-slot": "top-bar-breadcrumbs",
-        "aria-label": "Breadcrumb",
-        className: cn("min-w-0", className),
-        ...props,
-        children: /*#__PURE__*/ _jsx("ol", {
-            className: "flex min-w-0 items-center gap-1 text-sm",
-            children: crumbs.map((crumb, index)=>{
+ */
+export function TopBarBreadcrumbs({ crumbs, linkComponent: LinkComponent = DefaultBreadcrumbLink, className, ...props }) {
+    return (_jsx("nav", { "data-slot": "top-bar-breadcrumbs", "aria-label": "Breadcrumb", className: cn("min-w-0", className), ...props, children: _jsx("ol", { className: "flex min-w-0 items-center gap-1 text-sm", children: crumbs.map((crumb, index) => {
                 const isLast = index === crumbs.length - 1;
-                return /*#__PURE__*/ _jsxs("li", {
-                    className: "flex min-w-0 items-center gap-1",
-                    children: [
-                        index === 0 ? null : /*#__PURE__*/ _jsx(ChevronRight, {
-                            className: "size-3.5 shrink-0 text-muted-foreground",
-                            "aria-hidden": true
-                        }),
-                        isLast || crumb.href === undefined ? /*#__PURE__*/ _jsx("span", {
-                            "aria-current": isLast ? "page" : undefined,
-                            className: cn("truncate", isLast ? "font-medium" : "text-muted-foreground"),
-                            children: crumb.label
-                        }) : /*#__PURE__*/ _jsx(LinkComponent, {
-                            href: crumb.href,
-                            className: "truncate text-muted-foreground hover:text-foreground",
-                            children: crumb.label
-                        })
-                    ]
-                }, index);
-            })
-        })
-    });
+                return (_jsxs("li", { className: "flex min-w-0 items-center gap-1", children: [index === 0 ? null : (_jsx(ChevronRight, { className: "size-3.5 shrink-0 text-muted-foreground", "aria-hidden": true })), isLast || crumb.href === undefined ? (_jsx("span", { "aria-current": isLast ? "page" : undefined, className: cn("truncate", isLast ? "font-medium" : "text-muted-foreground"), children: crumb.label })) : (_jsx(LinkComponent, { href: crumb.href, className: "truncate text-muted-foreground hover:text-foreground", children: crumb.label }))] }, index));
+            }) }) }));
 }
-/** Trailing controls. Pushes itself to the right; put it last. */ export function TopBarActions({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("div", {
-        "data-slot": "top-bar-actions",
-        className: cn("ml-auto flex shrink-0 items-center gap-1", className),
-        ...props
-    });
+/** Trailing controls. Pushes itself to the right; put it last. */
+export function TopBarActions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "top-bar-actions", className: cn("ml-auto flex shrink-0 items-center gap-1", className), ...props }));
 }

package/dist/ui/trace-waterfall.d.ts

@@ -35,4 +35,4 @@ export type TraceWaterfallProps = {
  * doesn't have. Failed spans surface their error under the row. The
  * accessible table carries the same numbers for non-visual readers.
  */
-export declare function TraceWaterfall({ title, description, spans, className }: TraceWaterfallProps): import("react").JSX.Element;
+export declare function TraceWaterfall({ title, description, spans, className, }: TraceWaterfallProps): import("react").JSX.Element;

package/dist/ui/trace-waterfall.js

@@ -4,12 +4,12 @@ import { ChartFrame } from "./chart-frame.js";
 const PHASE_FILL = {
     ok: "bg-success-foreground",
     awaiting: "bg-warning-foreground",
-    failed: "bg-destructive"
+    failed: "bg-destructive",
 };
 const PHASE_LABEL = {
     ok: "ok",
     awaiting: "awaiting",
-    failed: "failed"
+    failed: "failed",
 };
 /**
  * Run-trace timeline: one row per span with a duration, and optional token
@@ -18,104 +18,32 @@ const PHASE_LABEL = {
  * point marker instead, so the chart never implies a duration the data
  * doesn't have. Failed spans surface their error under the row. The
  * accessible table carries the same numbers for non-visual readers.
- */ export function TraceWaterfall({ title, description, spans, className }) {
-    return /*#__PURE__*/ _jsx(ChartFrame, {
-        title: title,
-        ...description === undefined ? {} : {
-            description
-        },
-        table: {
-            columns: [
-                "Step",
-                "Kind",
-                "Duration",
-                "Tokens",
-                "Status"
-            ],
-            rows: spans.map((span)=>[
-                    span.label,
-                    span.kind,
-                    durationText(span.durationLabel),
-                    span.tokensLabel ?? "—",
-                    PHASE_LABEL[span.phase]
-                ])
-        },
-        className: className,
-        children: /*#__PURE__*/ _jsx("div", {
-            className: "flex flex-col gap-1.5",
-            role: "presentation",
-            children: spans.map((span)=>{
+ */
+export function TraceWaterfall({ title, description, spans, className, }) {
+    return (_jsx(ChartFrame, { title: title, ...(description === undefined ? {} : { description }), table: {
+            columns: ["Step", "Kind", "Duration", "Tokens", "Status"],
+            rows: spans.map((span) => [
+                span.label,
+                span.kind,
+                durationText(span.durationLabel),
+                span.tokensLabel ?? "—",
+                PHASE_LABEL[span.phase],
+            ]),
+        }, className: className, children: _jsx("div", { className: "flex flex-col gap-1.5", role: "presentation", children: spans.map((span) => {
                 const isOrdinal = span.timingSource === "ordinal";
                 const left = clamp01(span.start) * 100;
                 const width = Math.max(0.5, (clamp01(span.end) - clamp01(span.start)) * 100);
-                return /*#__PURE__*/ _jsxs("div", {
-                    className: "flex flex-col gap-0.5",
-                    children: [
-                        /*#__PURE__*/ _jsxs("div", {
-                            className: "grid grid-cols-[minmax(7rem,11rem)_1fr_minmax(4.5rem,6rem)] items-center gap-2",
-                            children: [
-                                /*#__PURE__*/ _jsxs("div", {
-                                    className: "min-w-0",
-                                    children: [
-                                        /*#__PURE__*/ _jsx("p", {
-                                            className: "truncate text-xs font-semibold",
-                                            children: span.label
-                                        }),
-                                        /*#__PURE__*/ _jsx("p", {
-                                            className: "truncate text-[10px] text-muted-foreground",
-                                            children: span.kind
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsx("div", {
-                                    className: "relative h-4 w-full bg-muted",
-                                    children: isOrdinal ? /*#__PURE__*/ _jsx("span", {
-                                        className: cn("absolute top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rotate-45", PHASE_FILL[span.phase]),
-                                        style: {
-                                            left: `${left}%`
-                                        },
-                                        children: /*#__PURE__*/ _jsx("span", {
-                                            className: "sr-only",
-                                            children: "Approximate position by event order, not a measured duration"
-                                        })
-                                    }) : /*#__PURE__*/ _jsx("div", {
-                                        className: cn("absolute inset-y-0", PHASE_FILL[span.phase], span.phase === "awaiting" && "[background-image:repeating-linear-gradient(135deg,transparent,transparent_3px,rgba(0,0,0,0.15)_3px,rgba(0,0,0,0.15)_6px)]"),
-                                        style: {
-                                            left: `${left}%`,
-                                            width: `${width}%`
-                                        }
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsxs("div", {
-                                    className: "text-right font-mono text-[11px] leading-tight",
-                                    children: [
-                                        /*#__PURE__*/ _jsx("p", {
-                                            className: "font-semibold",
-                                            children: durationText(span.durationLabel)
-                                        }),
-                                        span.tokensLabel === undefined ? null : /*#__PURE__*/ _jsx("p", {
-                                            className: "text-muted-foreground",
-                                            children: span.tokensLabel
-                                        })
-                                    ]
-                                })
-                            ]
-                        }),
-                        span.error === undefined ? null : /*#__PURE__*/ _jsx("p", {
-                            className: "ml-[11.5rem] border border-destructive/40 bg-destructive/10 px-2 py-1 text-[11px] text-destructive-foreground",
-                            children: span.error
-                        })
-                    ]
-                }, span.id);
-            })
-        })
-    });
+                return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsxs("div", { className: "grid grid-cols-[minmax(7rem,11rem)_1fr_minmax(4.5rem,6rem)] items-center gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-xs font-semibold", children: span.label }), _jsx("p", { className: "truncate text-[10px] text-muted-foreground", children: span.kind })] }), _jsx("div", { className: "relative h-4 w-full bg-muted", children: isOrdinal ? (_jsx("span", { className: cn("absolute top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rotate-45", PHASE_FILL[span.phase]), style: { left: `${left}%` }, children: _jsx("span", { className: "sr-only", children: "Approximate position by event order, not a measured duration" }) })) : (_jsx("div", { className: cn("absolute inset-y-0", PHASE_FILL[span.phase], span.phase === "awaiting" &&
+                                            "[background-image:repeating-linear-gradient(135deg,transparent,transparent_3px,rgba(0,0,0,0.15)_3px,rgba(0,0,0,0.15)_6px)]"), style: { left: `${left}%`, width: `${width}%` } })) }), _jsxs("div", { className: "text-right font-mono text-[11px] leading-tight", children: [_jsx("p", { className: "font-semibold", children: durationText(span.durationLabel) }), span.tokensLabel === undefined ? null : (_jsx("p", { className: "text-muted-foreground", children: span.tokensLabel }))] })] }), span.error === undefined ? null : (_jsx("p", { className: "ml-[11.5rem] border border-destructive/40 bg-destructive/10 px-2 py-1 text-[11px] text-destructive-foreground", children: span.error }))] }, span.id));
+            }) }) }));
 }
 function durationText(durationLabel) {
     return durationLabel ?? "—";
 }
 function clamp01(value) {
-    if (value < 0) return 0;
-    if (value > 1) return 1;
+    if (value < 0)
+        return 0;
+    if (value > 1)
+        return 1;
     return value;
 }

package/dist/ui/typing-indicator.d.ts

@@ -3,7 +3,7 @@
  * yet. `role="status"` with a text label, because the dots carry no words a
  * screen reader can read — the label is the only accessible content here.
  */
-export declare function TypingIndicator({ label, className }: {
+export declare function TypingIndicator({ label, className, }: {
     label?: string;
     className?: string;
 }): import("react").JSX.Element;

package/dist/ui/typing-indicator.js

@@ -1,25 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-const DOT_DELAY_MS = [
-    0,
-    160,
-    320
-];
+const DOT_DELAY_MS = [0, 160, 320];
 /**
  * Three pulsing dots: the agent is composing a reply, with nothing to report
  * yet. `role="status"` with a text label, because the dots carry no words a
  * screen reader can read — the label is the only accessible content here.
- */ export function TypingIndicator({ label = "Thinking", className }) {
-    return /*#__PURE__*/ _jsx("div", {
-        role: "status",
-        "aria-label": label,
-        className: cn("flex items-center gap-1 px-1 py-2", className),
-        children: DOT_DELAY_MS.map((delay)=>/*#__PURE__*/ _jsx("span", {
-                "aria-hidden": true,
-                style: {
-                    animationDelay: `${delay}ms`
-                },
-                className: "size-1.5 rounded-full bg-muted-foreground [animation:corbits-typing-bounce_1.2s_ease-in-out_infinite]"
-            }, delay))
-    });
+ */
+export function TypingIndicator({ label = "Thinking", className, }) {
+    return (_jsx("div", { role: "status", "aria-label": label, className: cn("flex items-center gap-1 px-1 py-2", className), children: DOT_DELAY_MS.map((delay) => (_jsx("span", { "aria-hidden": true, style: { animationDelay: `${delay}ms` }, className: "size-1.5 rounded-full bg-muted-foreground [animation:corbits-typing-bounce_1.2s_ease-in-out_infinite]" }, delay))) }));
 }

package/dist/ui/view-toggle.js

@@ -1,17 +1,10 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { LayoutGrid, Rows3 } from "lucide-react";
 import { cn } from "../lib/utils.js";
 const OPTIONS = [
-    {
-        mode: "grid",
-        label: "Grid view",
-        Icon: LayoutGrid
-    },
-    {
-        mode: "rows",
-        label: "Rows view",
-        Icon: Rows3
-    }
+    { mode: "grid", label: "Grid view", Icon: LayoutGrid },
+    { mode: "rows", label: "Rows view", Icon: Rows3 },
 ];
 /**
  * Grid or rows, as a segmented control.
@@ -23,24 +16,12 @@ const OPTIONS = [
  * Each button carries a text label for assistive tech; the icon alone is not a
  * name. Stateless — the page owns `mode`, because the choice usually outlives
  * the component and gets persisted.
- */ export function ViewToggle({ mode, onChange, className }) {
-    return /*#__PURE__*/ _jsx("div", {
-        role: "group",
-        "aria-label": "View",
-        className: cn("flex items-center gap-0.5 rounded-md border border-border p-0.5", className),
-        children: OPTIONS.map(({ mode: option, label, Icon })=>{
+ */
+export function ViewToggle({ mode, onChange, className, }) {
+    return (_jsx("div", { role: "group", "aria-label": "View", className: cn("flex items-center gap-0.5 rounded-md border border-border p-0.5", className), children: OPTIONS.map(({ mode: option, label, Icon }) => {
             const active = mode === option;
-            return /*#__PURE__*/ _jsx("button", {
-                type: "button",
-                "aria-label": label,
-                "aria-pressed": active,
-                onClick: ()=>onChange(option),
-                className: cn("grid size-7 place-items-center rounded-sm transition-colors", active ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"),
-                children: /*#__PURE__*/ _jsx(Icon, {
-                    className: "size-4",
-                    "aria-hidden": true
-                })
-            }, option);
-        })
-    });
+            return (_jsx("button", { type: "button", "aria-label": label, "aria-pressed": active, onClick: () => onChange(option), className: cn("grid size-7 place-items-center rounded-sm transition-colors", active
+                    ? "bg-muted text-foreground"
+                    : "text-muted-foreground hover:text-foreground"), children: _jsx(Icon, { className: "size-4", "aria-hidden": true }) }, option));
+        }) }));
 }

package/dist/ui/voice-waveform.js

@@ -9,15 +9,7 @@ import { cn } from "../lib/utils.js";
  * Bar height is an inline `scaleY` transform per frame; the `duration-75`
  * transition is plain CSS, so the theme's global reduced-motion rule already
  * collapses it — no JS-side handling needed here.
- */ export function VoiceWaveform({ levels, className }) {
-    return /*#__PURE__*/ _jsx("span", {
-        "aria-hidden": true,
-        className: cn("inline-flex h-4 items-center gap-px", className),
-        children: levels.map((level, index)=>/*#__PURE__*/ _jsx("i", {
-                className: "inline-block h-full w-0.5 origin-center rounded-full bg-current transition-transform duration-75",
-                style: {
-                    transform: `scaleY(${Math.max(0.08, Math.min(1, level))})`
-                }
-            }, index))
-    });
+ */
+export function VoiceWaveform({ levels, className }) {
+    return (_jsx("span", { "aria-hidden": true, className: cn("inline-flex h-4 items-center gap-px", className), children: levels.map((level, index) => (_jsx("i", { className: "inline-block h-full w-0.5 origin-center rounded-full bg-current transition-transform duration-75", style: { transform: `scaleY(${Math.max(0.08, Math.min(1, level))})` } }, index))) }));
 }