@corbits/react-ui 0.1.0

package/dist/ui/list-detail.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowLeft } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { EmptyState } from "./empty-state.js";
+/**
+ * Index on the left, the open item on the right.
+ *
+ * Two panes above `lg`, one below it. On a narrow screen the detail *replaces*
+ * the list rather than sitting under it: a phone-width column showing both
+ * means the user opens something and sees no change without scrolling.
+ *
+ * That swap is why `onCloseDetail` is required rather than optional. Once the
+ * list is hidden, the back control is the only way out — a caller who omitted
+ * it would ship a dead end on mobile, so the type does not let them.
+ *
+ * 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 }) {
+    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
+                // 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."
+                })
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,13 @@
+export type LiveRunBannerProps = {
+    readonly awaiting?: boolean;
+    readonly message?: string;
+    readonly elapsed?: string;
+    readonly className?: string;
+};
+/**
+ * The one-line status strip above a live run's steps: awaiting gets the
+ * 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 declare function LiveRunBanner({ awaiting, message, elapsed, className }: LiveRunBannerProps): import("react").JSX.Element;

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+/**
+ * The one-line status strip above a live run's steps: awaiting gets the
+ * 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
+            })
+        ]
+    });
+}

package/dist/ui/live-status-line.d.ts

@@ -0,0 +1,22 @@
+export type LiveStatusLineProps = {
+    readonly label: string;
+    readonly className?: string;
+};
+/** 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 declare function LiveStatusLine({ label, className }: LiveStatusLineProps): import("react").JSX.Element;
+export type LiveStatusSlotProps = {
+    /** `null` animates the line out and renders nothing. */
+    readonly label: string | null;
+    readonly className?: string;
+};
+/**
+ * Layout-stable wrapper for `LiveStatusLine`: a `null` label collapses the
+ * slot's height instead of the line disappearing instantly, so the body
+ * 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 declare function LiveStatusSlot({ label, className }: LiveStatusSlotProps): import("react").JSX.Element;

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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,
+            "…"
+        ]
+    });
+}
+/**
+ * Layout-stable wrapper for `LiveStatusLine`: a `null` label collapses the
+ * slot's height instead of the line disappearing instantly, so the body
+ * 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
+            })
+        })
+    });
+}

package/dist/ui/menu.d.ts

@@ -0,0 +1,18 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import type * as React from "react";
+/**
+ * The popover menu used by toolbars and selectors.
+ *
+ * Radix owns anchored positioning, focus management, keyboard navigation and
+ * dismissal; this layer only paints. Every menu gets the same fully opaque
+ * 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 declare const Menu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+export declare const MenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const MenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare function MenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element;
+export declare function MenuItem({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item>): React.JSX.Element;
+export declare function MenuLabel({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label>): React.JSX.Element;
+export declare function MenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React.JSX.Element;

package/dist/ui/menu.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "../lib/utils.js";
+/**
+ * The popover menu used by toolbars and selectors.
+ *
+ * Radix owns anchored positioning, focus management, keyboard navigation and
+ * dismissal; this layer only paints. Every menu gets the same fully opaque
+ * 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 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
+        })
+    });
+}
+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
+    });
+}
+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
+    });
+}
+export function MenuSeparator({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(DropdownMenuPrimitive.Separator, {
+        "data-slot": "menu-separator",
+        className: cn("my-1 h-px bg-border", className),
+        ...props
+    });
+}

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

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+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;
+    /** Rich body — a markdown renderer. Defaults to the message's plain text. */
+    readonly children?: ReactNode;
+    readonly className?: string;
+};
+/**
+ * One message, as said by whoever said it.
+ *
+ * Only the user's messages get a filled bubble. An agent reply is set on the
+ * page ground with no container: agent turns are long, and a 600-word tinted
+ * block is harder to read than plain text, while the alternating alignment that
+ * makes chat apps legible comes from the user side alone.
+ *
+ * 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 declare function MessageBubble({ message, onRetry, now, children, className }: MessageBubbleProps): import("react").JSX.Element;

package/dist/ui/message-bubble.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { messageText } from "../lib/chat-message.js";
+import { formatRelativeTime } from "../lib/relative-time.js";
+import { cn } from "../lib/utils.js";
+/**
+ * One message, as said by whoever said it.
+ *
+ * Only the user's messages get a filled bubble. An agent reply is set on the
+ * page ground with no container: agent turns are long, and a 600-word tinted
+ * block is harder to read than plain text, while the alternating alignment that
+ * makes chat apps legible comes from the user side alone.
+ *
+ * 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 }) {
+    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 /*#__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
+                ]
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,35 @@
+export type DictationState = "idle" | "starting" | "listening" | "denied" | "unsupported";
+export type MicButtonProps = {
+    readonly state: DictationState;
+    readonly onToggle: () => void;
+    readonly disabled?: boolean;
+    readonly className?: string;
+};
+/**
+ * A microphone toggle for dictation, presentational only.
+ *
+ * This component and its siblings (`VoiceWaveform`, `DictationStatusLine`,
+ * `MicPermissionDialog`) carry no `SpeechRecognition`, Tauri, or media-device
+ * code — react-ui never imports a browser or native capture API. A consumer
+ * wires them to a backend through a hook shaped roughly like:
+ *
+ * ```ts
+ * type UseDictation = (value: string, onValueChange: (value: string) => void) => {
+ *   supported: boolean;
+ *   state: DictationState;
+ *   levels: number[]; // recent RMS samples, 0..1, oldest first
+ *   errorMessage: string | null; // set when state is "denied"
+ *   permissionHelp: { title: string; detail: string; action: string } | null;
+ *   start: () => void;
+ *   stop: () => void;
+ *   dismiss: () => void;
+ * };
+ * ```
+ *
+ * `state` drives the pressed look, the glyph, and the label. Listening is
+ * green with a stop square so colour is never the only channel; starting
+ * 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 declare function MicButton({ state, onToggle, disabled, className }: MicButtonProps): import("react").JSX.Element;

package/dist/ui/mic-button.js

@@ -0,0 +1,61 @@
+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";
+    return "Dictate instead of typing";
+}
+/**
+ * A microphone toggle for dictation, presentational only.
+ *
+ * This component and its siblings (`VoiceWaveform`, `DictationStatusLine`,
+ * `MicPermissionDialog`) carry no `SpeechRecognition`, Tauri, or media-device
+ * code — react-ui never imports a browser or native capture API. A consumer
+ * wires them to a backend through a hook shaped roughly like:
+ *
+ * ```ts
+ * type UseDictation = (value: string, onValueChange: (value: string) => void) => {
+ *   supported: boolean;
+ *   state: DictationState;
+ *   levels: number[]; // recent RMS samples, 0..1, oldest first
+ *   errorMessage: string | null; // set when state is "denied"
+ *   permissionHelp: { title: string; detail: string; action: string } | null;
+ *   start: () => void;
+ *   stop: () => void;
+ *   dismiss: () => void;
+ * };
+ * ```
+ *
+ * `state` drives the pressed look, the glyph, and the label. Listening is
+ * green with a stop square so colour is never the only channel; starting
+ * 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 }) {
+    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,
+        // 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
+        })
+    });
+}

package/dist/ui/mic-permission-dialog.d.ts

@@ -0,0 +1,20 @@
+export type MicPermissionDialogProps = {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly title: string;
+    readonly detail: string;
+    /** Label for the action button, e.g. "Open Sound settings". */
+    readonly actionLabel: string;
+    readonly onAction: () => void;
+    /** Shown when opening the settings pane itself failed. */
+    readonly failure?: string | null;
+    readonly dismissLabel?: string;
+};
+/**
+ * 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 declare function MicPermissionDialog({ open, onOpenChange, title, detail, actionLabel, onAction, failure, dismissLabel, }: MicPermissionDialogProps): import("react").JSX.Element;

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

@@ -0,0 +1,50 @@
+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";
+/**
+ * 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
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}

package/dist/ui/notifications-bell.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+export type NotificationsBellProps = {
+    /** Unread count. `0` renders the bell with no marker. */
+    readonly count: number;
+    /** Panel contents — a notification list, an empty state, whatever the host has. */
+    readonly children: ReactNode;
+    /** Counts above this render as "N+" so the marker cannot grow unbounded. */
+    readonly maxCount?: number;
+    /** Controlled open state. Pair with `onOpenChange` to lift it to a parent. */
+    readonly open?: boolean;
+    readonly onOpenChange?: (open: boolean) => void;
+    readonly className?: string;
+};
+/**
+ * Bell + count, with the panel body as a slot. It renders a count and opens a
+ * panel; it does not know what a notification is, does not fetch, and does not
+ * mark anything read — the host puts a list in `children` and handles the rest.
+ *
+ * The panel is a `dialog`-role popup rather than a menu: its contents are
+ * arbitrary (links, buttons, an empty state), and a menu role would promise
+ * arrow-key semantics that a free-form list does not have. Escape closes and
+ * returns focus to the bell; a pointer-down outside closes without stealing
+ * focus back, so clicking straight into another control still works.
+ *
+ * Uncontrolled by default. Pass `open`/`onOpenChange` to drive it from a
+ * parent — closing every other panel when this one opens, say.
+ */
+export declare function NotificationsBell({ count, children, maxCount, open: openProp, onOpenChange, className, }: NotificationsBellProps): import("react").JSX.Element;

package/dist/ui/notifications-bell.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bell } from "lucide-react";
+import { useEffect, useId, useRef } from "react";
+import { useDismissablePopover } from "../hooks/use-dismissable-popover.js";
+import { cn } from "../lib/utils.js";
+/**
+ * Bell + count, with the panel body as a slot. It renders a count and opens a
+ * panel; it does not know what a notification is, does not fetch, and does not
+ * mark anything read — the host puts a list in `children` and handles the rest.
+ *
+ * The panel is a `dialog`-role popup rather than a menu: its contents are
+ * arbitrary (links, buttons, an empty state), and a menu role would promise
+ * arrow-key semantics that a free-form list does not have. Escape closes and
+ * returns focus to the bell; a pointer-down outside closes without stealing
+ * focus back, so clicking straight into another control still works.
+ *
+ * Uncontrolled by default. Pass `open`/`onOpenChange` to drive it from a
+ * parent — closing every other panel when this one opens, say.
+ */ export function NotificationsBell({ count, children, maxCount = 99, open: openProp, onOpenChange, className }) {
+    const { open, setOpen, rootRef, triggerRef } = useDismissablePopover({
+        open: openProp,
+        onOpenChange
+    });
+    const panelRef = useRef(null);
+    const panelId = useId();
+    useEffect(()=>{
+        if (!open) return;
+        panelRef.current?.focus();
+    }, [
+        open
+    ]);
+    const label = count === 0 ? "Notifications" : `Notifications, ${count} unread`;
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: rootRef,
+        className: cn("relative", className),
+        children: [
+            /*#__PURE__*/ _jsxs("button", {
+                ref: triggerRef,
+                type: "button",
+                "aria-haspopup": "dialog",
+                "aria-expanded": open,
+                "aria-controls": open ? panelId : undefined,
+                "aria-label": label,
+                onClick: ()=>setOpen((value)=>!value),
+                className: "relative grid size-9 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                children: [
+                    /*#__PURE__*/ _jsx(Bell, {
+                        className: "size-4",
+                        "aria-hidden": true
+                    }),
+                    count > 0 ? /*#__PURE__*/ _jsx("span", {
+                        "aria-hidden": true,
+                        className: "absolute top-1 right-1 min-w-4 rounded-full bg-primary px-1 text-center font-mono text-[10px] leading-4 text-primary-foreground",
+                        children: count > maxCount ? `${maxCount}+` : count
+                    }) : null
+                ]
+            }),
+            open ? /*#__PURE__*/ _jsx("div", {
+                ref: panelRef,
+                id: panelId,
+                role: "dialog",
+                "aria-label": label,
+                tabIndex: -1,
+                className: "absolute top-full right-0 z-50 mt-1 max-h-96 w-80 overflow-y-auto rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-lg",
+                children: children
+            }) : null
+        ]
+    });
+}

package/dist/ui/now-cards.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+import { type NowItem } from "../lib/now-item.js";
+export type NowSectionProps = {
+    /** How many things are asking for attention — drives the count sentence. */
+    readonly count: number;
+    /**
+     * Tucks the body away and leaves a one-line summary. For when a detail pane
+     * is open and the vertical space is worth more to it than to the strip.
+     */
+    readonly collapsed?: boolean;
+    readonly children: ReactNode;
+    readonly className?: string;
+};
+/**
+ * The attention band at the top of the inbox. Its own container rather than the
+ * generic `Section` because it says something `Section` cannot: an eyebrow that
+ * marks urgency, a count in words, and a collapsed mode.
+ *
+ * Collapsing keeps the body mounted (so it can animate, and so anchors into it
+ * still resolve) but marks it `inert` — `aria-hidden` alone would hide it from
+ * a screen reader while leaving every card in the tab order.
+ */
+export declare function NowSection({ count, collapsed, children, className }: NowSectionProps): import("react").JSX.Element;
+export type NowCardsProps = {
+    readonly items: readonly NowItem[];
+    /** Cap on cards shown. The rest belong in the queue below, not here. */
+    readonly limit?: number;
+    readonly selectedId?: string | null;
+    readonly now?: number;
+    readonly className?: string;
+};
+/**
+ * The highest-attention items as cards. Ordering is not the caller's problem —
+ * the list is sorted here by priority then recency, so two surfaces fed the
+ * same items always agree on what is most urgent.
+ */
+export declare function NowCards({ items, limit, selectedId, now, className }: NowCardsProps): import("react").JSX.Element | null;