@corbits/react-ui 0.1.0

package/dist/ui/top-bar.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils.js";
+/**
+ * The row above the page. It owns no content of its own — a title or a
+ * breadcrumb trail on the left, whatever the page contributes on the right.
+ *
+ * Deliberately a `<header>` with parts rather than a `title`/`actions` prop
+ * 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 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
+            })
+        ]
+    });
+}
+function DefaultBreadcrumbLink({ href, className, children }) {
+    return /*#__PURE__*/ _jsx("a", {
+        href: href,
+        className: className,
+        children: children
+    });
+}
+/**
+ * Breadcrumb trail. The last crumb is the current page: it is rendered as text
+ * with `aria-current="page"` even if a caller passes an href, because linking
+ * to where you already are is a known screen-reader annoyance.
+ *
+ * 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)=>{
+                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);
+            })
+        })
+    });
+}
+/** 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
+    });
+}

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

@@ -0,0 +1,38 @@
+export type TracePhase = "ok" | "awaiting" | "failed";
+export type TraceSpan = {
+    readonly id: string;
+    readonly label: string;
+    readonly kind: string;
+    /** Inclusive start as a fraction of the total timeline (0–1). */
+    readonly start: number;
+    /** Inclusive end as a fraction of the total timeline (0–1). */
+    readonly end: number;
+    readonly durationLabel: string | null;
+    readonly tokensLabel?: string;
+    readonly phase: TracePhase;
+    readonly error?: string;
+    /**
+     * How `start`/`end` were derived. "measured" (the default when omitted)
+     * means real wall-clock timing, rendered as a proportional duration bar.
+     * "ordinal" means the span was positioned only by event order within its
+     * parent, with no real duration — it renders as a point marker at `start`
+     * instead of a bar spanning start→end, so the chart never implies a
+     * duration the data doesn't have.
+     */
+    readonly timingSource?: "measured" | "ordinal";
+};
+export type TraceWaterfallProps = {
+    readonly title: string;
+    readonly description?: string;
+    readonly spans: readonly TraceSpan[];
+    readonly className?: string;
+};
+/**
+ * Run-trace timeline: one row per span with a duration, and optional token
+ * count. A span with real wall-clock timing renders a proportional bar; a
+ * span positioned only by event order (`timingSource: "ordinal"`) renders a
+ * 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 declare function TraceWaterfall({ title, description, spans, className }: TraceWaterfallProps): import("react").JSX.Element;

package/dist/ui/trace-waterfall.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { ChartFrame } from "./chart-frame.js";
+const PHASE_FILL = {
+    ok: "bg-success-foreground",
+    awaiting: "bg-warning-foreground",
+    failed: "bg-destructive"
+};
+const PHASE_LABEL = {
+    ok: "ok",
+    awaiting: "awaiting",
+    failed: "failed"
+};
+/**
+ * Run-trace timeline: one row per span with a duration, and optional token
+ * count. A span with real wall-clock timing renders a proportional bar; a
+ * span positioned only by event order (`timingSource: "ordinal"`) renders a
+ * 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)=>{
+                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);
+            })
+        })
+    });
+}
+function durationText(durationLabel) {
+    return durationLabel ?? "—";
+}
+function clamp01(value) {
+    if (value < 0) return 0;
+    if (value > 1) return 1;
+    return value;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * 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 declare function TypingIndicator({ label, className }: {
+    label?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/ui/typing-indicator.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+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))
+    });
+}

package/dist/ui/view-toggle.d.ts

@@ -0,0 +1,17 @@
+export type ViewMode = "grid" | "rows";
+/**
+ * Grid or rows, as a segmented control.
+ *
+ * `role="group"` with `aria-pressed` toggles rather than a radiogroup: these
+ * are two buttons that change a view, and radios promise arrow-key navigation
+ * between options plus form-submission semantics that do not apply.
+ *
+ * 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 declare function ViewToggle({ mode, onChange, className, }: {
+    mode: ViewMode;
+    onChange: (mode: ViewMode) => void;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/ui/view-toggle.js

@@ -0,0 +1,46 @@
+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
+    }
+];
+/**
+ * Grid or rows, as a segmented control.
+ *
+ * `role="group"` with `aria-pressed` toggles rather than a radiogroup: these
+ * are two buttons that change a view, and radios promise arrow-key navigation
+ * between options plus form-submission semantics that do not apply.
+ *
+ * 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 })=>{
+            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);
+        })
+    });
+}

package/dist/ui/voice-waveform.d.ts

@@ -0,0 +1,16 @@
+export type VoiceWaveformProps = {
+    /** Recent input levels, 0..1, oldest first. One bar per entry. */
+    readonly levels: readonly number[];
+    readonly className?: string;
+};
+/**
+ * A bar waveform driven entirely by `levels` — no microphone or audio API
+ * here, the consumer's dictation hook owns sampling and passes the numbers
+ * in. `aria-hidden`: the state it shows is spoken separately by
+ * `DictationStatusLine`.
+ *
+ * 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 declare function VoiceWaveform({ levels, className }: VoiceWaveformProps): import("react").JSX.Element;

package/dist/ui/voice-waveform.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+/**
+ * A bar waveform driven entirely by `levels` — no microphone or audio API
+ * here, the consumer's dictation hook owns sampling and passes the numbers
+ * in. `aria-hidden`: the state it shows is spoken separately by
+ * `DictationStatusLine`.
+ *
+ * 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))
+    });
+}