@corbits/react-ui 0.1.0 → 0.3.0

package/dist/ui/profile-card.js

@@ -8,117 +8,13 @@ import { Button } from "./button.js";
  * Canvas profile card: hero identity, status, action chips, shared
  * channels, and pinned skills. Deep-links are plain hrefs so the host
  * router owns navigation.
- */ export function ProfileCard({ name, initials, subtitle, statusLabel, statusTone = "neutral", avatarTone = "neutral", tenantMonogram, actions = [], sharedChannels = [], pinnedSkills = [], footer, className }) {
-    return /*#__PURE__*/ _jsxs("article", {
-        "data-slot": "profile-card",
-        className: cn("flex flex-col gap-4 border border-border bg-card p-4", className),
-        children: [
-            /*#__PURE__*/ _jsxs("header", {
-                className: "flex items-start gap-3",
-                children: [
-                    /*#__PURE__*/ _jsx(Avatar, {
-                        initials: initials,
-                        label: name,
-                        tone: avatarTone,
-                        size: "lg",
-                        ...tenantMonogram === undefined ? {} : {
-                            tenantMonogram
-                        }
-                    }),
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: "min-w-0 flex-1",
-                        children: [
-                            /*#__PURE__*/ _jsxs("div", {
-                                className: "flex flex-wrap items-center gap-2",
-                                children: [
-                                    /*#__PURE__*/ _jsx("h2", {
-                                        className: "truncate text-base font-semibold",
-                                        children: name
-                                    }),
-                                    statusLabel === undefined ? null : /*#__PURE__*/ _jsx(Badge, {
-                                        tone: statusTone,
-                                        children: statusLabel
-                                    })
-                                ]
-                            }),
-                            subtitle === undefined ? null : /*#__PURE__*/ _jsx("p", {
-                                className: "truncate text-xs text-muted-foreground",
-                                children: subtitle
-                            })
-                        ]
-                    })
-                ]
-            }),
-            actions.length === 0 ? null : /*#__PURE__*/ _jsx("div", {
-                className: "flex flex-wrap gap-1.5",
-                children: actions.map((action)=>/*#__PURE__*/ _jsx(Button, {
-                        type: "button",
-                        size: "sm",
-                        variant: action.tone === "primary" ? "primary" : "outline",
-                        onClick: action.onClick,
-                        children: action.label
-                    }, action.id))
-            }),
-            sharedChannels.length === 0 ? null : /*#__PURE__*/ _jsxs("section", {
-                className: "flex flex-col gap-1.5",
-                children: [
-                    /*#__PURE__*/ _jsx("h3", {
-                        className: "text-[10.5px] font-bold uppercase tracking-[0.06em] text-muted-foreground",
-                        children: "Shared channels"
-                    }),
-                    /*#__PURE__*/ _jsx("ul", {
-                        className: "flex flex-col gap-1",
-                        children: sharedChannels.map((channel)=>{
+ */
+export function ProfileCard({ name, initials, subtitle, statusLabel, statusTone = "neutral", avatarTone = "neutral", tenantMonogram, actions = [], sharedChannels = [], pinnedSkills = [], footer, className, }) {
+    return (_jsxs("article", { "data-slot": "profile-card", className: cn("flex flex-col gap-4 border border-border bg-card p-4", className), children: [_jsxs("header", { className: "flex items-start gap-3", children: [_jsx(Avatar, { initials: initials, label: name, tone: avatarTone, size: "lg", ...(tenantMonogram === undefined ? {} : { tenantMonogram }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("h2", { className: "truncate text-base font-semibold", children: name }), statusLabel === undefined ? null : (_jsx(Badge, { tone: statusTone, children: statusLabel }))] }), subtitle === undefined ? null : (_jsx("p", { className: "truncate text-xs text-muted-foreground", children: subtitle }))] })] }), actions.length === 0 ? null : (_jsx("div", { className: "flex flex-wrap gap-1.5", children: actions.map((action) => (_jsx(Button, { type: "button", size: "sm", variant: action.tone === "primary" ? "primary" : "outline", onClick: action.onClick, children: action.label }, action.id))) })), sharedChannels.length === 0 ? null : (_jsxs("section", { className: "flex flex-col gap-1.5", children: [_jsx("h3", { className: "text-[10.5px] font-bold uppercase tracking-[0.06em] text-muted-foreground", children: "Shared channels" }), _jsx("ul", { className: "flex flex-col gap-1", children: sharedChannels.map((channel) => {
                             const href = toSafeHref(channel.href);
-                            return /*#__PURE__*/ _jsx("li", {
-                                children: href === undefined ? /*#__PURE__*/ _jsxs("span", {
-                                    className: "text-sm",
-                                    children: [
-                                        "#",
-                                        channel.name
-                                    ]
-                                }) : /*#__PURE__*/ _jsxs("a", {
-                                    href: href,
-                                    className: "text-sm text-foreground hover:underline",
-                                    children: [
-                                        "#",
-                                        channel.name
-                                    ]
-                                })
-                            }, channel.id);
-                        })
-                    })
-                ]
-            }),
-            pinnedSkills.length === 0 ? null : /*#__PURE__*/ _jsxs("section", {
-                className: "flex flex-col gap-1.5",
-                children: [
-                    /*#__PURE__*/ _jsx("h3", {
-                        className: "text-[10.5px] font-bold uppercase tracking-[0.06em] text-muted-foreground",
-                        children: "Pinned skills"
-                    }),
-                    /*#__PURE__*/ _jsx("ul", {
-                        className: "flex flex-wrap gap-1.5",
-                        children: pinnedSkills.map((skill)=>{
+                            return (_jsx("li", { children: href === undefined ? (_jsxs("span", { className: "text-sm", children: ["#", channel.name] })) : (_jsxs("a", { href: href, className: "text-sm text-foreground hover:underline", children: ["#", channel.name] })) }, channel.id));
+                        }) })] })), pinnedSkills.length === 0 ? null : (_jsxs("section", { className: "flex flex-col gap-1.5", children: [_jsx("h3", { className: "text-[10.5px] font-bold uppercase tracking-[0.06em] text-muted-foreground", children: "Pinned skills" }), _jsx("ul", { className: "flex flex-wrap gap-1.5", children: pinnedSkills.map((skill) => {
                             const href = toSafeHref(skill.href);
-                            return href === undefined ? /*#__PURE__*/ _jsx(Badge, {
-                                tone: "neutral",
-                                children: skill.name
-                            }, skill.id) : /*#__PURE__*/ _jsx("a", {
-                                href: href,
-                                children: /*#__PURE__*/ _jsx(Badge, {
-                                    tone: "neutral",
-                                    children: skill.name
-                                })
-                            }, skill.id);
-                        })
-                    })
-                ]
-            }),
-            footer === undefined ? null : /*#__PURE__*/ _jsx("footer", {
-                className: "border-t border-border pt-3",
-                children: footer
-            })
-        ]
-    });
+                            return href === undefined ? (_jsx(Badge, { tone: "neutral", children: skill.name }, skill.id)) : (_jsx("a", { href: href, children: _jsx(Badge, { tone: "neutral", children: skill.name }) }, skill.id));
+                        }) })] })), footer === undefined ? null : (_jsx("footer", { className: "border-t border-border pt-3", children: footer }))] }));
 }

package/dist/ui/progress-checklist.js

@@ -6,7 +6,7 @@ const STATUS_LABEL = {
     pending: "Not started",
     running: "In progress",
     done: "Done",
-    failed: "Failed"
+    failed: "Failed",
 };
 /**
  * A list of steps and how far along they are — a long operation reporting
@@ -19,52 +19,14 @@ const STATUS_LABEL = {
  *
  * The whole list is `aria-live="polite"`, so steps completing are announced as
  * they happen without stealing focus from wherever the user actually is.
- */ export function ProgressChecklist({ steps, label = "Progress", className }) {
-    if (steps.length === 0) return null;
-    return /*#__PURE__*/ _jsx("ol", {
-        "aria-label": label,
-        "aria-live": "polite",
-        className: cn("flex flex-col gap-2.5", className),
-        children: steps.map((step, index)=>/*#__PURE__*/ _jsxs("li", {
-                className: "flex items-start gap-3",
-                children: [
-                    /*#__PURE__*/ _jsx("span", {
-                        "aria-hidden": true,
-                        className: cn("mt-0.5 grid size-5 shrink-0 place-items-center rounded-full border text-[10px] font-semibold", step.status === "done" && "border-transparent bg-success text-success-foreground", step.status === "failed" && "border-transparent bg-destructive text-destructive-foreground", step.status === "running" && "border-primary-emphasis text-primary-emphasis", step.status === "pending" && "border-input text-muted-foreground"),
-                        children: step.status === "done" ? /*#__PURE__*/ _jsx(Check, {
-                            className: "size-3"
-                        }) : step.status === "failed" ? /*#__PURE__*/ _jsx(X, {
-                            className: "size-3"
-                        }) : step.status === "running" ? /*#__PURE__*/ _jsx(StatusDot, {
-                            label: "",
-                            live: true,
-                            tone: "emphasis"
-                        }) : index + 1
-                    }),
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: "flex min-w-0 flex-col gap-0.5",
-                        children: [
-                            /*#__PURE__*/ _jsxs("p", {
-                                className: cn("text-sm leading-snug", step.status === "pending" ? "text-muted-foreground" : "text-foreground"),
-                                children: [
-                                    step.label,
-                                    " ",
-                                    /*#__PURE__*/ _jsxs("span", {
-                                        className: "text-xs text-muted-foreground",
-                                        children: [
-                                            "· ",
-                                            STATUS_LABEL[step.status]
-                                        ]
-                                    })
-                                ]
-                            }),
-                            step.detail === undefined ? null : /*#__PURE__*/ _jsx("p", {
-                                className: "text-xs leading-relaxed text-muted-foreground",
-                                children: step.detail
-                            })
-                        ]
-                    })
-                ]
-            }, step.id))
-    });
+ */
+export function ProgressChecklist({ steps, label = "Progress", className, }) {
+    if (steps.length === 0)
+        return null;
+    return (_jsx("ol", { "aria-label": label, "aria-live": "polite", className: cn("flex flex-col gap-2.5", className), children: steps.map((step, index) => (_jsxs("li", { className: "flex items-start gap-3", children: [_jsx("span", { "aria-hidden": true, className: cn("mt-0.5 grid size-5 shrink-0 place-items-center rounded-full border text-[10px] font-semibold", step.status === "done" &&
+                        "border-transparent bg-success text-success-foreground", step.status === "failed" &&
+                        "border-transparent bg-destructive text-destructive-foreground", step.status === "running" &&
+                        "border-primary-emphasis text-primary-emphasis", step.status === "pending" && "border-input text-muted-foreground"), children: step.status === "done" ? (_jsx(Check, { className: "size-3" })) : step.status === "failed" ? (_jsx(X, { className: "size-3" })) : step.status === "running" ? (_jsx(StatusDot, { label: "", live: true, tone: "emphasis" })) : (index + 1) }), _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsxs("p", { className: cn("text-sm leading-snug", step.status === "pending"
+                                ? "text-muted-foreground"
+                                : "text-foreground"), children: [step.label, " ", _jsxs("span", { className: "text-xs text-muted-foreground", children: ["\u00B7 ", STATUS_LABEL[step.status]] })] }), step.detail === undefined ? null : (_jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: step.detail }))] })] }, step.id))) }));
 }

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

@@ -14,10 +14,10 @@ export type ProviderMarkProps = {
      */
     readonly logo?: ReactNode;
     readonly size?: "sm" | "md";
-    readonly className?: string;
+    readonly className?: string | undefined;
 };
 /** Which service an action goes through. */
-export declare function ProviderMark({ provider, logo, size, className }: ProviderMarkProps): import("react").JSX.Element;
+export declare function ProviderMark({ provider, logo, size, className, }: ProviderMarkProps): import("react").JSX.Element;
 /**
  * The provider marker for a tool call in a transcript.
  *

package/dist/ui/provider-mark.js

@@ -2,17 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 const SIZE_CLASS = {
     sm: "size-4 text-[8px]",
-    md: "size-6 text-[10px]"
+    md: "size-6 text-[10px]",
 };
-/** Which service an action goes through. */ export function ProviderMark({ provider, logo, size = "sm", className }) {
+/** Which service an action goes through. */
+export function ProviderMark({ provider, logo, size = "sm", className, }) {
     const label = provider.charAt(0).toUpperCase() + provider.slice(1);
-    return /*#__PURE__*/ _jsx("span", {
-        role: "img",
-        "aria-label": label,
-        title: label,
-        className: cn("inline-grid shrink-0 place-items-center overflow-hidden rounded-sm bg-muted font-semibold text-muted-foreground", SIZE_CLASS[size], className),
-        children: logo ?? provider.slice(0, 2).toUpperCase()
-    });
+    return (_jsx("span", { role: "img", "aria-label": label, title: label, className: cn("inline-grid shrink-0 place-items-center overflow-hidden rounded-sm bg-muted font-semibold text-muted-foreground", SIZE_CLASS[size], className), children: logo ?? provider.slice(0, 2).toUpperCase() }));
 }
 /**
  * The provider marker for a tool call in a transcript.
@@ -20,12 +15,10 @@ const SIZE_CLASS = {
  * The provider is read off the tool id's `provider__operation` prefix — the
  * same convention `toolLabel` uses — so a tool with no prefix is local and gets
  * no marker rather than a guessed one.
- */ export function ToolProviderMark({ part, logo, className }) {
+ */
+export function ToolProviderMark({ part, logo, className, }) {
     const [provider, ...rest] = part.toolName.split("__");
-    if (rest.length === 0 || provider === undefined || provider === "") return null;
-    return /*#__PURE__*/ _jsx(ProviderMark, {
-        provider: provider,
-        logo: logo,
-        className: className
-    });
+    if (rest.length === 0 || provider === undefined || provider === "")
+        return null;
+    return _jsx(ProviderMark, { provider: provider, logo: logo, className: className });
 }

package/dist/ui/quick-reply-chips.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 /**
@@ -7,18 +8,9 @@ import { cn } from "../lib/utils.js";
  *
  * Sending is the host's job: this reports which chip was chosen and lets the
  * host decide whether that fills the composer or sends immediately.
- */ export function QuickReplyChips({ replies, onSelect, className }) {
-    if (replies.length === 0) return null;
-    return /*#__PURE__*/ _jsx("ul", {
-        "aria-label": "Suggested replies",
-        className: cn("flex flex-wrap gap-2", className),
-        children: replies.map((reply)=>/*#__PURE__*/ _jsx("li", {
-                children: /*#__PURE__*/ _jsx("button", {
-                    type: "button",
-                    onClick: ()=>onSelect(reply),
-                    className: "rounded-full border border-border bg-muted px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-background hover:text-foreground",
-                    children: reply.label
-                })
-            }, reply.id))
-    });
+ */
+export function QuickReplyChips({ replies, onSelect, className, }) {
+    if (replies.length === 0)
+        return null;
+    return (_jsx("ul", { "aria-label": "Suggested replies", className: cn("flex flex-wrap gap-2", className), children: replies.map((reply) => (_jsx("li", { children: _jsx("button", { type: "button", onClick: () => onSelect(reply), className: "rounded-full border border-border bg-muted px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-background hover:text-foreground", children: reply.label }) }, reply.id))) }));
 }

package/dist/ui/quote-card.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../lib/utils.js";
 /**
@@ -21,9 +22,11 @@ import { cn } from "../lib/utils.js";
  * `<blockquote>` and `<cite>`, because that is what this is. The quotation and
  * its attribution are related in the markup rather than being two adjacent
  * strings that happen to sit near each other.
- */ export function QuoteCard({ quotes, storageKey, className }) {
-    const [index] = useState(()=>{
-        if (storageKey === undefined || quotes.length === 0) return 0;
+ */
+export function QuoteCard({ quotes, storageKey, className }) {
+    const [index] = useState(() => {
+        if (storageKey === undefined || quotes.length === 0)
+            return 0;
         try {
             const raw = window.localStorage.getItem(storageKey);
             const parsed = raw === null ? -1 : Number.parseInt(raw, 10);
@@ -31,36 +34,13 @@ import { cn } from "../lib/utils.js";
             const next = (last + 1) % quotes.length;
             window.localStorage.setItem(storageKey, String(next));
             return next;
-        } catch  {
+        }
+        catch {
             return 0;
         }
     });
     const quote = quotes[index % Math.max(quotes.length, 1)];
-    if (quote === undefined) return null;
-    return /*#__PURE__*/ _jsxs("figure", {
-        className: cn("w-full max-w-xs rounded-xl border border-border bg-card/90 p-6 backdrop-blur-sm", className),
-        children: [
-            /*#__PURE__*/ _jsxs("blockquote", {
-                className: "text-base leading-relaxed whitespace-pre-line text-card-foreground",
-                children: [
-                    "“",
-                    quote.text,
-                    "”"
-                ]
-            }),
-            quote.author === undefined ? null : /*#__PURE__*/ _jsxs("figcaption", {
-                className: "mt-4 flex items-center gap-3",
-                children: [
-                    /*#__PURE__*/ _jsx("span", {
-                        "aria-hidden": true,
-                        className: "h-px flex-1 bg-border"
-                    }),
-                    /*#__PURE__*/ _jsx("cite", {
-                        className: "text-xs text-muted-foreground not-italic",
-                        children: quote.author
-                    })
-                ]
-            })
-        ]
-    });
+    if (quote === undefined)
+        return null;
+    return (_jsxs("figure", { className: cn("w-full max-w-xs rounded-xl border border-border bg-card/90 p-6 backdrop-blur-sm", className), children: [_jsxs("blockquote", { className: "text-base leading-relaxed whitespace-pre-line text-card-foreground", children: ["\u201C", quote.text, "\u201D"] }), quote.author === undefined ? null : (_jsxs("figcaption", { className: "mt-4 flex items-center gap-3", children: [_jsx("span", { "aria-hidden": true, className: "h-px flex-1 bg-border" }), _jsx("cite", { className: "text-xs text-muted-foreground not-italic", children: quote.author })] }))] }));
 }

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

@@ -8,7 +8,7 @@ export type ReasoningBlockProps = {
     /** Summary once idle when no `durationLabel` is supplied. Defaults to "Thinking". */
     readonly idleLabel?: string;
     /** e.g. "Thought for 4s". Becomes the summary once reasoning has stopped streaming. */
-    readonly durationLabel?: string;
+    readonly durationLabel?: string | undefined;
     readonly defaultOpen?: boolean;
     /**
      * Controlled open state. Pair with `onOpenChange` to lift it to a parent —

package/dist/ui/reasoning-block.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react";
 import { useControllableState } from "../hooks/use-controllable-state.js";
@@ -12,49 +13,29 @@ import { cn } from "../lib/utils.js";
  * A native `<details>`, not a div with state: it gets the disclosure
  * semantics, keyboard behaviour and find-in-page expansion from the browser,
  * and those are three things a hand-rolled version gets wrong.
- */ export function ReasoningBlock({ text, streaming = false, streamingLabel = "Thinking…", idleLabel = "Thinking", durationLabel, defaultOpen = false, open: openProp, onOpenChange, className }) {
+ */
+export function ReasoningBlock({ text, streaming = false, streamingLabel = "Thinking…", idleLabel = "Thinking", durationLabel, defaultOpen = false, open: openProp, onOpenChange, className, }) {
     const [open, setOpen] = useControllableState({
         value: openProp,
         defaultValue: defaultOpen,
         onChange: onOpenChange,
-        name: "ReasoningBlock"
+        name: "ReasoningBlock",
     });
-    if (text.trim().length === 0) return null;
-    const summary = streaming ? streamingLabel : durationLabel ?? idleLabel;
-    return /*#__PURE__*/ _jsxs("details", {
-        "data-slot": "reasoning-block",
-        open: open,
+    if (text.trim().length === 0)
+        return null;
+    const summary = streaming ? streamingLabel : (durationLabel ?? idleLabel);
+    return (_jsxs("details", { "data-slot": "reasoning-block", open: open, 
         // The browser fires `toggle` for any `open` attribute change — prop-driven
         // ones included — so a bare setOpen would echo the parent's own commands
         // back through onOpenChange. Reporting only divergence means exactly one
         // callback per user activation, and none when a parent drives `open`.
-        onToggle: (event)=>{
+        onToggle: (event) => {
             const domOpen = event.currentTarget.open;
-            if (domOpen !== open) setOpen(domOpen);
-        },
-        className: cn("text-xs", className),
-        children: [
-            /*#__PURE__*/ _jsxs("summary", {
-                className: cn(// `relative` plus the `::after` pseudo-element extends the
+            if (domOpen !== open)
+                setOpen(domOpen);
+        }, className: cn("text-xs", className), children: [_jsxs("summary", { className: cn(
+                // `relative` plus the `::after` pseudo-element extends the
                 // effective hit area to 40px tall without changing the row's own
                 // padding/density — see design-engineering.md's hit-area pattern.
-                "relative flex cursor-pointer list-none items-center gap-1.5 rounded-md px-2 py-1.5 text-muted-foreground transition-colors after:absolute after:inset-x-0 after:top-1/2 after:h-10 after:-translate-y-1/2 hover:bg-muted hover:text-foreground", "[&::-webkit-details-marker]:hidden"),
-                children: [
-                    /*#__PURE__*/ _jsx(ChevronRight, {
-                        className: cn("size-3.5 shrink-0 transition-transform duration-200 ease-out", open && "rotate-90"),
-                        "aria-hidden": true
-                    }),
-                    /*#__PURE__*/ _jsx("span", {
-                        "aria-live": "polite",
-                        children: summary
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsx("p", {
-                "aria-busy": streaming,
-                className: "mt-1 ml-4 border-l border-border pl-3 leading-relaxed whitespace-pre-wrap text-muted-foreground [animation:corbits-rail-block-in_200ms_var(--ease-out)_both]",
-                children: text
-            }, open ? "open" : "closed")
-        ]
-    });
+                "relative flex cursor-pointer list-none items-center gap-1.5 rounded-md px-2 py-1.5 text-muted-foreground transition-colors after:absolute after:inset-x-0 after:top-1/2 after:h-10 after:-translate-y-1/2 hover:bg-muted hover:text-foreground", "[&::-webkit-details-marker]:hidden"), children: [_jsx(ChevronRight, { className: cn("size-3.5 shrink-0 transition-transform duration-200 ease-out", open && "rotate-90"), "aria-hidden": true }), _jsx("span", { "aria-live": "polite", children: summary })] }), _jsx("p", { "aria-busy": streaming, className: "mt-1 ml-4 border-l border-border pl-3 leading-relaxed whitespace-pre-wrap text-muted-foreground [animation:corbits-rail-block-in_200ms_var(--ease-out)_both]", children: text }, open ? "open" : "closed")] }));
 }