@corbits/react-ui 0.1.0 → 0.3.0

package/dist/ui/intake-form.js

@@ -1,12 +1,16 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useId } from "react";
 import { cn } from "../lib/utils.js";
 import { Input } from "./input.js";
-/** True when every required field has a value — for enabling a submit control. */ export function intakeFieldsComplete(fields, values) {
-    return fields.every((field)=>{
-        if (field.required !== true) return true;
+/** True when every required field has a value — for enabling a submit control. */
+export function intakeFieldsComplete(fields, values) {
+    return fields.every((field) => {
+        if (field.required !== true)
+            return true;
         const value = values[field.name];
-        if (typeof value === "string") return value.trim().length > 0;
+        if (typeof value === "string")
+            return value.trim().length > 0;
         return value !== undefined && value !== null;
     });
 }
@@ -14,106 +18,26 @@ import { Input } from "./input.js";
  * The inputs a run needs, rendered from a field list. Fully controlled: the
  * host owns the values, so the same form backs a one-off run and a saved
  * schedule without this file knowing which.
- */ export function IntakeForm({ fields, values, onChange, idPrefix, disabled = false, className }) {
+ */
+export function IntakeForm({ fields, values, onChange, idPrefix, disabled = false, className, }) {
     const generatedPrefix = useId();
     const prefix = idPrefix ?? generatedPrefix;
-    if (fields.length === 0) return null;
-    const set = (name, value)=>onChange({
-            ...values,
-            [name]: value
-        });
-    return /*#__PURE__*/ _jsx("div", {
-        className: cn("flex flex-col gap-4", className),
-        children: fields.map((field)=>{
+    if (fields.length === 0)
+        return null;
+    const set = (name, value) => onChange({ ...values, [name]: value });
+    return (_jsx("div", { className: cn("flex flex-col gap-4", className), children: fields.map((field) => {
             const id = `${prefix}-${field.name}`;
             const helpId = field.help === undefined ? undefined : `${id}-help`;
             const value = values[field.name];
-            return /*#__PURE__*/ _jsxs("div", {
-                className: "flex flex-col gap-1.5",
-                children: [
-                    field.type === "boolean" ? /*#__PURE__*/ _jsxs("label", {
-                        htmlFor: id,
-                        className: "flex items-center gap-2 text-sm",
-                        children: [
-                            /*#__PURE__*/ _jsx("input", {
-                                id: id,
-                                type: "checkbox",
-                                checked: value === true,
-                                required: field.required,
-                                disabled: disabled,
-                                "aria-describedby": helpId,
-                                onChange: (event)=>set(field.name, event.target.checked),
-                                className: "size-4 rounded-sm border border-input accent-[var(--primary)]"
-                            }),
-                            field.label,
-                            field.required === true ? /*#__PURE__*/ _jsx(RequiredMark, {}) : null
-                        ]
-                    }) : /*#__PURE__*/ _jsxs(_Fragment, {
-                        children: [
-                            /*#__PURE__*/ _jsxs("label", {
-                                htmlFor: id,
-                                className: "text-sm font-medium",
-                                children: [
-                                    field.label,
-                                    field.required === true ? /*#__PURE__*/ _jsx(RequiredMark, {}) : null
-                                ]
-                            }),
-                            field.type === "textarea" ? /*#__PURE__*/ _jsx("textarea", {
-                                id: id,
-                                value: typeof value === "string" ? value : "",
-                                placeholder: field.placeholder,
-                                required: field.required,
-                                disabled: disabled,
-                                "aria-describedby": helpId,
-                                rows: 4,
-                                onChange: (event)=>set(field.name, event.target.value),
-                                className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm disabled:opacity-50"
-                            }) : field.type === "select" ? /*#__PURE__*/ _jsxs("select", {
-                                id: id,
-                                value: typeof value === "string" ? value : "",
-                                required: field.required,
-                                disabled: disabled,
-                                "aria-describedby": helpId,
-                                onChange: (event)=>set(field.name, event.target.value),
-                                className: "h-9 w-full rounded-md border border-input bg-background px-3 text-sm disabled:opacity-50",
-                                children: [
-                                    /*#__PURE__*/ _jsx("option", {
-                                        value: "",
-                                        children: "Choose…"
-                                    }),
-                                    (field.options ?? []).map((option)=>/*#__PURE__*/ _jsx("option", {
-                                            value: option.value,
-                                            children: option.label
-                                        }, option.value))
-                                ]
-                            }) : /*#__PURE__*/ _jsx(Input, {
-                                id: id,
-                                type: field.type === "number" ? "number" : "text",
-                                value: typeof value === "string" || typeof value === "number" ? String(value) : "",
-                                placeholder: field.placeholder,
-                                required: field.required,
-                                disabled: disabled,
-                                "aria-describedby": helpId,
-                                onChange: (event)=>set(field.name, field.type === "number" ? event.target.valueAsNumber : event.target.value)
-                            })
-                        ]
-                    }),
-                    field.help === undefined ? null : /*#__PURE__*/ _jsx("p", {
-                        id: helpId,
-                        className: "text-xs text-muted-foreground",
-                        children: field.help
-                    })
-                ]
-            }, field.name);
-        })
-    });
+            return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [field.type === "boolean" ? (_jsxs("label", { htmlFor: id, className: "flex items-center gap-2 text-sm", children: [_jsx("input", { id: id, type: "checkbox", checked: value === true, required: field.required, disabled: disabled, "aria-describedby": helpId, onChange: (event) => set(field.name, event.target.checked), className: "size-4 rounded-sm border border-input accent-[var(--primary)]" }), field.label, field.required === true ? _jsx(RequiredMark, {}) : null] })) : (_jsxs(_Fragment, { children: [_jsxs("label", { htmlFor: id, className: "text-sm font-medium", children: [field.label, field.required === true ? _jsx(RequiredMark, {}) : null] }), field.type === "textarea" ? (_jsx("textarea", { id: id, value: typeof value === "string" ? value : "", placeholder: field.placeholder, required: field.required, disabled: disabled, "aria-describedby": helpId, rows: 4, onChange: (event) => set(field.name, event.target.value), className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm disabled:opacity-50" })) : field.type === "select" ? (_jsxs("select", { id: id, value: typeof value === "string" ? value : "", required: field.required, disabled: disabled, "aria-describedby": helpId, onChange: (event) => set(field.name, event.target.value), className: "h-9 w-full rounded-md border border-input bg-background px-3 text-sm disabled:opacity-50", children: [_jsx("option", { value: "", children: "Choose\u2026" }), (field.options ?? []).map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] })) : (_jsx(Input, { id: id, type: field.type === "number" ? "number" : "text", value: typeof value === "string" || typeof value === "number"
+                                    ? String(value)
+                                    : "", placeholder: field.placeholder, required: field.required, disabled: disabled, "aria-describedby": helpId, onChange: (event) => set(field.name, field.type === "number"
+                                    ? event.target.valueAsNumber
+                                    : event.target.value) }))] })), field.help === undefined ? null : (_jsx("p", { id: helpId, className: "text-xs text-muted-foreground", children: field.help }))] }, field.name));
+        }) }));
 }
 // The asterisk is decorative: `required` on the control is what actually tells
 // assistive tech, and a screen reader announcing "asterisk" helps nobody.
 function RequiredMark() {
-    return /*#__PURE__*/ _jsx("span", {
-        "aria-hidden": true,
-        className: "ml-0.5 text-primary-emphasis",
-        children: "*"
-    });
+    return (_jsx("span", { "aria-hidden": true, className: "ml-0.5 text-primary-emphasis", children: "*" }));
 }

package/dist/ui/kind-card-grid.js

@@ -1,43 +1,21 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 const COLUMNS = {
     2: "grid-cols-2",
     3: "grid-cols-3",
-    4: "grid-cols-4"
+    4: "grid-cols-4",
 };
 /**
  * Selectable card grid for channel-kind, grant-effect, provider, and
  * workbench-type pickers. Each card is a real button with `aria-pressed`;
  * the group is labelled for assistive tech.
- */ export function KindCardGrid({ options, value, onChange, label, columns = 2, className }) {
-    return /*#__PURE__*/ _jsx("div", {
-        role: "group",
-        "aria-label": label,
-        className: cn("grid gap-2", COLUMNS[columns], className),
-        children: options.map((option)=>{
+ */
+export function KindCardGrid({ options, value, onChange, label, columns = 2, className, }) {
+    return (_jsx("div", { role: "group", "aria-label": label, className: cn("grid gap-2", COLUMNS[columns], className), children: options.map((option) => {
             const selected = value === option.id;
-            return /*#__PURE__*/ _jsxs("button", {
-                type: "button",
-                "aria-pressed": selected,
-                disabled: option.disabled === true,
-                onClick: ()=>onChange?.(option.id),
-                className: cn("flex flex-col gap-1 border px-3.5 py-3 text-left transition-colors ease-out", "hover:bg-muted active:brightness-95 disabled:pointer-events-none disabled:opacity-50", selected ? "border-primary-emphasis bg-primary/10" : "border-border bg-card"),
-                children: [
-                    option.icon === undefined ? null : /*#__PURE__*/ _jsx("span", {
-                        className: "mb-0.5 text-muted-foreground",
-                        "aria-hidden": true,
-                        children: option.icon
-                    }),
-                    /*#__PURE__*/ _jsx("span", {
-                        className: "text-sm font-semibold",
-                        children: option.title
-                    }),
-                    option.description === undefined ? null : /*#__PURE__*/ _jsx("span", {
-                        className: "text-xs leading-snug text-muted-foreground",
-                        children: option.description
-                    })
-                ]
-            }, option.id);
-        })
-    });
+            return (_jsxs("button", { type: "button", "aria-pressed": selected, disabled: option.disabled === true, onClick: () => onChange?.(option.id), className: cn("flex flex-col gap-1 border px-3.5 py-3 text-left transition-colors ease-out", "hover:bg-muted active:brightness-95 disabled:pointer-events-none disabled:opacity-50", selected
+                    ? "border-primary-emphasis bg-primary/10"
+                    : "border-border bg-card"), children: [option.icon === undefined ? null : (_jsx("span", { className: "mb-0.5 text-muted-foreground", "aria-hidden": true, children: option.icon })), _jsx("span", { className: "text-sm font-semibold", children: option.title }), option.description === undefined ? null : (_jsx("span", { className: "text-xs leading-snug text-muted-foreground", children: option.description }))] }, option.id));
+        }) }));
 }

package/dist/ui/library-page-header.js

@@ -2,42 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 const TITLE_CLASS = {
     lg: "text-[21px] font-semibold tracking-[-0.02em]",
-    sm: "text-[17px] font-semibold tracking-[-0.01em]"
+    sm: "text-[17px] font-semibold tracking-[-0.01em]",
 };
 /**
  * The header row every library page shares: title, item count, then trailing
  * controls after a flexible spacer. The spacer is a real element rather than
  * `justify-between` so a `LibrarySearchInput` can expand leftward over it
  * without shifting its neighbours.
- */ export function LibraryPageHeader({ title, titleSize = "lg", count, subtitle, children, className }) {
-    return /*#__PURE__*/ _jsxs("div", {
-        "data-slot": "library-page-header",
-        className: cn("flex min-w-0 flex-wrap items-center gap-[14px] px-4 pt-5 pb-[14px] sm:px-7", className),
-        children: [
-            /*#__PURE__*/ _jsxs("div", {
-                className: "flex min-w-0 shrink-0 flex-col gap-0.5",
-                children: [
-                    /*#__PURE__*/ _jsx("h1", {
-                        className: TITLE_CLASS[titleSize],
-                        children: title
-                    }),
-                    subtitle === undefined || subtitle === "" ? null : /*#__PURE__*/ _jsx("p", {
-                        className: "truncate text-[12px] text-muted-foreground",
-                        children: subtitle
-                    })
-                ]
-            }),
-            count === undefined ? null : /*#__PURE__*/ _jsxs("span", {
-                className: "shrink-0 rounded-md bg-muted px-[9px] py-[3px] font-mono text-[12px] text-muted-foreground",
-                children: [
-                    count,
-                    " items"
-                ]
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                className: "min-w-2 flex-1"
-            }),
-            children
-        ]
-    });
+ */
+export function LibraryPageHeader({ title, titleSize = "lg", count, subtitle, children, className, }) {
+    return (_jsxs("div", { "data-slot": "library-page-header", className: cn("flex min-w-0 flex-wrap items-center gap-[14px] px-4 pt-5 pb-[14px] sm:px-7", className), children: [_jsxs("div", { className: "flex min-w-0 shrink-0 flex-col gap-0.5", children: [_jsx("h1", { className: TITLE_CLASS[titleSize], children: title }), subtitle === undefined || subtitle === "" ? null : (_jsx("p", { className: "truncate text-[12px] text-muted-foreground", children: subtitle }))] }), count === undefined ? null : (_jsxs("span", { className: "shrink-0 rounded-md bg-muted px-[9px] py-[3px] font-mono text-[12px] text-muted-foreground", children: [count, " items"] })), _jsx("div", { className: "min-w-2 flex-1" }), children] }));
 }

package/dist/ui/list-detail.js

@@ -15,41 +15,11 @@ import { EmptyState } from "./empty-state.js";
  *
  * Both panes scroll independently, so reading a long detail does not scroll the
  * list out from under the selection.
- */ export function ListDetail({ list, detail, onCloseDetail, placeholder, detailLabel = "Details", className }) {
+ */
+export function ListDetail({ list, detail, onCloseDetail, placeholder, detailLabel = "Details", className, }) {
     const open = detail !== null;
-    return /*#__PURE__*/ _jsxs("div", {
-        className: cn("flex min-h-0 flex-1 gap-6", className),
-        children: [
-            /*#__PURE__*/ _jsx("div", {
-                className: cn("min-h-0 flex-1 overflow-y-auto lg:max-w-md lg:shrink-0 lg:border-r lg:border-border lg:pr-6", // Hidden, not merely visually stacked: leaving it in the tree on
+    return (_jsxs("div", { className: cn("flex min-h-0 flex-1 gap-6", className), children: [_jsx("div", { className: cn("min-h-0 flex-1 overflow-y-auto lg:max-w-md lg:shrink-0 lg:border-r lg:border-border lg:pr-6", 
+                // Hidden, not merely visually stacked: leaving it in the tree on
                 // mobile would keep every row in the tab order behind the detail.
-                open && "hidden lg:block"),
-                children: list
-            }),
-            /*#__PURE__*/ _jsx("section", {
-                "aria-label": detailLabel,
-                className: cn("min-h-0 min-w-0 flex-1 overflow-y-auto", !open && "hidden lg:block"),
-                children: open ? /*#__PURE__*/ _jsxs(_Fragment, {
-                    children: [
-                        /*#__PURE__*/ _jsxs("button", {
-                            type: "button",
-                            onClick: onCloseDetail,
-                            className: "mb-3 inline-flex items-center gap-1.5 rounded-md text-sm text-muted-foreground transition-colors hover:text-foreground lg:hidden",
-                            children: [
-                                /*#__PURE__*/ _jsx(ArrowLeft, {
-                                    className: "size-4",
-                                    "aria-hidden": true
-                                }),
-                                "Back to list"
-                            ]
-                        }),
-                        detail
-                    ]
-                }) : placeholder ?? /*#__PURE__*/ _jsx(EmptyState, {
-                    title: "Nothing selected",
-                    description: "Pick something from the list."
-                })
-            })
-        ]
-    });
+                open && "hidden lg:block"), children: list }), _jsx("section", { "aria-label": detailLabel, className: cn("min-h-0 min-w-0 flex-1 overflow-y-auto", !open && "hidden lg:block"), children: open ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: onCloseDetail, className: "mb-3 inline-flex items-center gap-1.5 rounded-md text-sm text-muted-foreground transition-colors hover:text-foreground lg:hidden", children: [_jsx(ArrowLeft, { className: "size-4", "aria-hidden": true }), "Back to list"] }), detail] })) : ((placeholder ?? (_jsx(EmptyState, { title: "Nothing selected", description: "Pick something from the list." })))) })] }));
 }

package/dist/ui/live-run-banner.d.ts

@@ -10,4 +10,4 @@ export type LiveRunBannerProps = {
  * running gets the info tone. Standalone so a consumer building its own run
  * surface can reuse just this strip.
  */
-export declare function LiveRunBanner({ awaiting, message, elapsed, className }: LiveRunBannerProps): import("react").JSX.Element;
+export declare function LiveRunBanner({ awaiting, message, elapsed, className, }: LiveRunBannerProps): import("react").JSX.Element;

package/dist/ui/live-run-banner.js

@@ -5,19 +5,9 @@ import { cn } from "../lib/utils.js";
  * accent tone that marks "this needs you" everywhere else in the registry,
  * running gets the info tone. Standalone so a consumer building its own run
  * surface can reuse just this strip.
- */ export function LiveRunBanner({ awaiting = false, message, elapsed, className }) {
-    return /*#__PURE__*/ _jsxs("div", {
-        role: "status",
-        className: cn("mb-3 flex flex-wrap items-center justify-between gap-2 rounded-lg border px-3 py-2 text-xs", awaiting ? "border-primary-emphasis/35 bg-primary/10 text-primary-emphasis" : "border-accent bg-accent text-accent-foreground", className),
-        children: [
-            /*#__PURE__*/ _jsx("span", {
-                className: "font-semibold",
-                children: message ?? (awaiting ? "Paused for your input" : "Running")
-            }),
-            elapsed === undefined ? null : /*#__PURE__*/ _jsx("span", {
-                className: "font-mono text-[11.5px] tabular-nums opacity-90",
-                children: elapsed
-            })
-        ]
-    });
+ */
+export function LiveRunBanner({ awaiting = false, message, elapsed, className, }) {
+    return (_jsxs("div", { role: "status", className: cn("mb-3 flex flex-wrap items-center justify-between gap-2 rounded-lg border px-3 py-2 text-xs", awaiting
+            ? "border-primary-emphasis/35 bg-primary/10 text-primary-emphasis"
+            : "border-accent bg-accent text-accent-foreground", className), children: [_jsx("span", { className: "font-semibold", children: message ?? (awaiting ? "Paused for your input" : "Running") }), elapsed === undefined ? null : (_jsx("span", { className: "font-mono text-[11.5px] tabular-nums opacity-90", children: elapsed }))] }));
 }

package/dist/ui/live-status-line.js

@@ -3,20 +3,9 @@ import { cn } from "../lib/utils.js";
 /** The single "what's happening now" line under a stepper. A spinning ring
  * plus text, not colour alone — `motion-reduce:animate-none` stills the
  * spinner without hiding the line, since the words already carry the
- * meaning. */ export function LiveStatusLine({ label, className }) {
-    return /*#__PURE__*/ _jsxs("div", {
-        role: "status",
-        "aria-live": "polite",
-        className: cn("flex items-center gap-2 border-b border-border bg-card px-6 py-2.5 text-sm text-muted-foreground", className),
-        children: [
-            /*#__PURE__*/ _jsx("span", {
-                "aria-hidden": true,
-                className: "size-3 animate-spin rounded-full border-2 border-border border-t-primary-emphasis motion-reduce:animate-none"
-            }),
-            label,
-            "…"
-        ]
-    });
+ * meaning. */
+export function LiveStatusLine({ label, className }) {
+    return (_jsxs("div", { role: "status", "aria-live": "polite", className: cn("flex items-center gap-2 border-b border-border bg-card px-6 py-2.5 text-sm text-muted-foreground", className), children: [_jsx("span", { "aria-hidden": true, className: "size-3 animate-spin rounded-full border-2 border-border border-t-primary-emphasis motion-reduce:animate-none" }), label, "\u2026"] }));
 }
 /**
  * Layout-stable wrapper for `LiveStatusLine`: a `null` label collapses the
@@ -24,14 +13,7 @@ import { cn } from "../lib/utils.js";
  * below it doesn't jump at every gate-to-processing boundary. The transition
  * is a plain CSS grid-rows trick — no animation library — and
  * `prefers-reduced-motion` disables it globally via the theme's base layer.
- */ export function LiveStatusSlot({ label, className }) {
-    return /*#__PURE__*/ _jsx("div", {
-        className: cn("grid transition-[grid-template-rows] duration-200 ease-out", label === null ? "grid-rows-[0fr]" : "grid-rows-[1fr]", className),
-        children: /*#__PURE__*/ _jsx("div", {
-            className: "overflow-hidden",
-            children: label === null ? null : /*#__PURE__*/ _jsx(LiveStatusLine, {
-                label: label
-            })
-        })
-    });
+ */
+export function LiveStatusSlot({ label, className }) {
+    return (_jsx("div", { className: cn("grid transition-[grid-template-rows] duration-200 ease-out", label === null ? "grid-rows-[0fr]" : "grid-rows-[1fr]", className), children: _jsx("div", { className: "overflow-hidden", children: label === null ? null : _jsx(LiveStatusLine, { label: label }) }) }));
 }

package/dist/ui/menu.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { cn } from "../lib/utils.js";
@@ -9,37 +10,19 @@ import { cn } from "../lib/utils.js";
  * popover surface — a see-through menu over a busy page is the bug this
  * primitive exists to prevent — and the same item hover, so a menu opened from
  * a toolbar and one opened from a table row read as the same control.
- */ export const Menu = DropdownMenuPrimitive.Root;
+ */
+export const Menu = DropdownMenuPrimitive.Root;
 export const MenuTrigger = DropdownMenuPrimitive.Trigger;
 export const MenuGroup = DropdownMenuPrimitive.Group;
 export function MenuContent({ className, sideOffset = 4, ...props }) {
-    return /*#__PURE__*/ _jsx(DropdownMenuPrimitive.Portal, {
-        children: /*#__PURE__*/ _jsx(DropdownMenuPrimitive.Content, {
-            "data-slot": "menu-content",
-            sideOffset: sideOffset,
-            className: cn("z-50 min-w-32 overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-lg", className),
-            ...props
-        })
-    });
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "menu-content", sideOffset: sideOffset, className: cn("z-50 min-w-32 overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-lg", className), ...props }) }));
 }
 export function MenuItem({ className, ...props }) {
-    return /*#__PURE__*/ _jsx(DropdownMenuPrimitive.Item, {
-        "data-slot": "menu-item",
-        className: cn("flex w-full cursor-pointer items-center gap-2 rounded-md px-2.5 py-2 text-left text-sm outline-none select-none transition-colors data-[highlighted]:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
-        ...props
-    });
+    return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "menu-item", className: cn("flex w-full cursor-pointer items-center gap-2 rounded-md px-2.5 py-2 text-left text-sm outline-none select-none transition-colors data-[highlighted]:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props }));
 }
 export function MenuLabel({ className, ...props }) {
-    return /*#__PURE__*/ _jsx(DropdownMenuPrimitive.Label, {
-        "data-slot": "menu-label",
-        className: cn("px-2.5 py-1.5 text-xs font-semibold text-muted-foreground", className),
-        ...props
-    });
+    return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "menu-label", className: cn("px-2.5 py-1.5 text-xs font-semibold text-muted-foreground", className), ...props }));
 }
 export function MenuSeparator({ className, ...props }) {
-    return /*#__PURE__*/ _jsx(DropdownMenuPrimitive.Separator, {
-        "data-slot": "menu-separator",
-        className: cn("my-1 h-px bg-border", className),
-        ...props
-    });
+    return (_jsx(DropdownMenuPrimitive.Separator, { "data-slot": "menu-separator", className: cn("my-1 h-px bg-border", className), ...props }));
 }

package/dist/ui/message-bubble.d.ts

@@ -3,8 +3,8 @@ import type { ChatMessage } from "../lib/chat-message.js";
 export type MessageBubbleProps = {
     readonly message: ChatMessage;
     /** Retry affordance for a failed send. Omit and a failure is only reported. */
-    readonly onRetry?: () => void;
-    readonly now?: number;
+    readonly onRetry?: (() => void) | undefined;
+    readonly now?: number | undefined;
     /** Rich body — a markdown renderer. Defaults to the message's plain text. */
     readonly children?: ReactNode;
     readonly className?: string;
@@ -21,4 +21,4 @@ export type MessageBubbleProps = {
  * renderer is the host's decision to make, with the host's sanitiser — pass one
  * as `children`.
  */
-export declare function MessageBubble({ message, onRetry, now, children, className }: MessageBubbleProps): import("react").JSX.Element;
+export declare function MessageBubble({ message, onRetry, now, children, className, }: MessageBubbleProps): import("react").JSX.Element;

package/dist/ui/message-bubble.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { messageText } from "../lib/chat-message.js";
 import { formatRelativeTime } from "../lib/relative-time.js";
 import { cn } from "../lib/utils.js";
@@ -13,52 +13,13 @@ import { cn } from "../lib/utils.js";
  * Text is rendered as text. Passing agent output through a markdown or HTML
  * renderer is the host's decision to make, with the host's sanitiser — pass one
  * as `children`.
- */ export function MessageBubble({ message, onRetry, now, children, className }) {
+ */
+export function MessageBubble({ message, onRetry, now, children, className, }) {
     const isUser = message.role === "user";
     const isSystem = message.role === "system";
     const failed = message.status === "failed";
     if (isSystem) {
-        return /*#__PURE__*/ _jsx("p", {
-            "data-slot": "message-bubble",
-            className: cn("px-2 py-1 text-center text-xs text-muted-foreground", className),
-            children: children ?? messageText(message)
-        });
+        return (_jsx("p", { "data-slot": "message-bubble", className: cn("px-2 py-1 text-center text-xs text-muted-foreground", className), children: children ?? messageText(message) }));
     }
-    return /*#__PURE__*/ _jsxs("div", {
-        "data-slot": "message-bubble",
-        className: cn("flex flex-col gap-1", isUser ? "items-end" : "items-start", className),
-        children: [
-            /*#__PURE__*/ _jsx("div", {
-                className: cn("max-w-[46rem] text-sm leading-relaxed break-words whitespace-pre-wrap", isUser && "rounded-lg bg-muted px-3 py-2", failed && "opacity-60"),
-                children: children ?? messageText(message)
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: "flex items-center gap-2 text-[11px] text-muted-foreground",
-                children: [
-                    /*#__PURE__*/ _jsx("time", {
-                        dateTime: message.createdAt,
-                        children: formatRelativeTime(message.createdAt, now)
-                    }),
-                    message.status === "sending" ? /*#__PURE__*/ _jsx("span", {
-                        children: "Sending…"
-                    }) : null,
-                    failed ? /*#__PURE__*/ _jsxs(_Fragment, {
-                        children: [
-                            /*#__PURE__*/ _jsx("span", {
-                                role: "alert",
-                                className: "text-destructive",
-                                children: "Not sent"
-                            }),
-                            onRetry === undefined ? null : /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                onClick: onRetry,
-                                className: "text-primary-emphasis hover:underline",
-                                children: "Retry"
-                            })
-                        ]
-                    }) : null
-                ]
-            })
-        ]
-    });
+    return (_jsxs("div", { "data-slot": "message-bubble", className: cn("flex flex-col gap-1", isUser ? "items-end" : "items-start", className), children: [_jsx("div", { className: cn("max-w-[46rem] text-sm leading-relaxed break-words whitespace-pre-wrap", isUser && "rounded-lg bg-muted px-3 py-2", failed && "opacity-60"), children: children ?? messageText(message) }), _jsxs("div", { className: "flex items-center gap-2 text-[11px] text-muted-foreground", children: [_jsx("time", { dateTime: message.createdAt, children: formatRelativeTime(message.createdAt, now) }), message.status === "sending" ? _jsx("span", { children: "Sending\u2026" }) : null, failed ? (_jsxs(_Fragment, { children: [_jsx("span", { role: "alert", className: "text-destructive", children: "Not sent" }), onRetry === undefined ? null : (_jsx("button", { type: "button", onClick: onRetry, className: "text-primary-emphasis hover:underline", children: "Retry" }))] })) : null] })] }));
 }

package/dist/ui/mic-button.d.ts

@@ -32,4 +32,4 @@ export type MicButtonProps = {
  * `unsupported` is disabled. `denied` stays clickable so the host can open
  * `MicPermissionDialog` from `onToggle`.
  */
-export declare function MicButton({ state, onToggle, disabled, className }: MicButtonProps): import("react").JSX.Element;
+export declare function MicButton({ state, onToggle, disabled, className, }: MicButtonProps): import("react").JSX.Element;

package/dist/ui/mic-button.js

@@ -1,11 +1,16 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Mic, MicOff, Square } from "lucide-react";
 import { cn } from "../lib/utils.js";
 function labelFor(state) {
-    if (state === "denied") return "Microphone blocked";
-    if (state === "unsupported") return "Dictation unavailable";
-    if (state === "listening") return "Stop dictating";
-    if (state === "starting") return "Starting microphone";
+    if (state === "denied")
+        return "Microphone blocked";
+    if (state === "unsupported")
+        return "Dictation unavailable";
+    if (state === "listening")
+        return "Stop dictating";
+    if (state === "starting")
+        return "Starting microphone";
     return "Dictate instead of typing";
 }
 /**
@@ -34,28 +39,17 @@ function labelFor(state) {
  * stays the idle mic so it cannot be mistaken for a live capture.
  * `unsupported` is disabled. `denied` stays clickable so the host can open
  * `MicPermissionDialog` from `onToggle`.
- */ export function MicButton({ state, onToggle, disabled = false, className }) {
+ */
+export function MicButton({ state, onToggle, disabled = false, className, }) {
     const listening = state === "listening";
     const denied = state === "denied";
     const unusable = disabled || state === "unsupported";
     const label = labelFor(state);
     const Glyph = listening ? Square : denied ? MicOff : Mic;
-    return /*#__PURE__*/ _jsx("button", {
-        type: "button",
-        // Denied opens the permission dialog rather than toggling — declare the
-        // popup and drop the toggle semantic.
-        "aria-pressed": denied ? undefined : listening,
-        "aria-haspopup": denied ? "dialog" : undefined,
-        "aria-label": label,
-        disabled: unusable,
+    return (_jsx("button", { type: "button", "aria-pressed": denied ? undefined : listening, "aria-haspopup": denied ? "dialog" : undefined, "aria-label": label, disabled: unusable, 
         // Tapping the mic must not blur the field being dictated into — a field
         // that commits on blur would lose the edit to its own microphone tap.
-        onMouseDown: (event)=>event.preventDefault(),
-        onClick: onToggle,
-        className: cn("grid size-9 shrink-0 place-items-center rounded-md transition-colors disabled:opacity-50", !unusable && "active:brightness-95 motion-safe:active:scale-[0.97]", listening ? "bg-success text-success-foreground hover:bg-success/90" : "text-muted-foreground hover:bg-muted hover:text-foreground", className),
-        children: /*#__PURE__*/ _jsx(Glyph, {
-            className: listening ? "size-3.5 fill-current" : "size-4",
-            "aria-hidden": true
-        })
-    });
+        onMouseDown: (event) => event.preventDefault(), onClick: onToggle, className: cn("grid size-9 shrink-0 place-items-center rounded-md transition-colors disabled:opacity-50", !unusable && "active:brightness-95 motion-safe:active:scale-[0.97]", listening
+            ? "bg-success text-success-foreground hover:bg-success/90"
+            : "text-muted-foreground hover:bg-muted hover:text-foreground", className), children: _jsx(Glyph, { className: listening ? "size-3.5 fill-current" : "size-4", "aria-hidden": true }) }));
 }

package/dist/ui/mic-permission-dialog.js

@@ -1,50 +1,14 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "./button.js";
-import { Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "./dialog.js";
+import { Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "./dialog.js";
 /**
  * A refusal that is a setting, put in front of the person with the button
  * that opens the pane. Presentational: it does not know what "open settings"
  * means for a given host (a native shell invoking an OS pane, a browser
  * opening a help link) — the consumer's dictation hook supplies `onAction`
  * and, if that action can itself fail, `failure`.
- */ export function MicPermissionDialog({ open, onOpenChange, title, detail, actionLabel, onAction, failure = null, dismissLabel = "Not now" }) {
-    return /*#__PURE__*/ _jsx(Dialog, {
-        open: open,
-        onOpenChange: onOpenChange,
-        children: /*#__PURE__*/ _jsxs(DialogContent, {
-            children: [
-                /*#__PURE__*/ _jsxs(DialogHeader, {
-                    children: [
-                        /*#__PURE__*/ _jsx(DialogTitle, {
-                            children: title
-                        }),
-                        /*#__PURE__*/ _jsx(DialogDescription, {
-                            children: detail
-                        })
-                    ]
-                }),
-                failure ? /*#__PURE__*/ _jsx(DialogBody, {
-                    children: /*#__PURE__*/ _jsx("p", {
-                        role: "alert",
-                        className: "text-sm text-destructive",
-                        children: failure
-                    })
-                }) : null,
-                /*#__PURE__*/ _jsxs(DialogFooter, {
-                    children: [
-                        /*#__PURE__*/ _jsx(Button, {
-                            variant: "ghost",
-                            onClick: ()=>onOpenChange(false),
-                            children: dismissLabel
-                        }),
-                        /*#__PURE__*/ _jsx(Button, {
-                            variant: "primary",
-                            onClick: onAction,
-                            children: actionLabel
-                        })
-                    ]
-                })
-            ]
-        })
-    });
+ */
+export function MicPermissionDialog({ open, onOpenChange, title, detail, actionLabel, onAction, failure = null, dismissLabel = "Not now", }) {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: detail })] }), failure ? (_jsx(DialogBody, { children: _jsx("p", { role: "alert", className: "text-sm text-destructive", children: failure }) })) : null, _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => onOpenChange(false), children: dismissLabel }), _jsx(Button, { variant: "primary", onClick: onAction, children: actionLabel })] })] }) }));
 }