@corbits/react-ui 0.1.0

package/dist/ui/tool-block.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { useControllableState } from "../hooks/use-controllable-state.js";
+import { cn } from "../lib/utils.js";
+import { StatusDot } from "./status-dot.js";
+const STATE_TEXT = {
+    pending: "Queued",
+    running: "Working",
+    "output-available": "Done",
+    error: "Failed",
+    "approval-requested": "Needs approval",
+    "output-denied": "Denied"
+};
+/**
+ * Orange (`emphasis`) is reserved for `approval-requested` alone: it is the
+ * one state that needs a human to act, so it is the one state that earns the
+ * brand's single emphasis color. `running` already signals "in progress"
+ * through the dot's own pulse animation (`StatusDot`'s `live` prop) — giving
+ * it orange too would stack two "look here" signals on a state that isn't
+ * actually asking for anything.
+ */ const STATE_TONE = {
+    pending: "neutral",
+    running: "neutral",
+    "output-available": "neutral",
+    error: "danger",
+    "approval-requested": "emphasis",
+    "output-denied": "danger"
+};
+/** True when the state carries no `error`/`running` weight in a warning sense but still opens by default. */ const OPENS_BY_DEFAULT = {
+    pending: false,
+    running: false,
+    "output-available": false,
+    error: true,
+    "approval-requested": true,
+    "output-denied": true
+};
+function humaniseToolName(name) {
+    const [provider, ...rest] = name.split("__");
+    const humanise = (value)=>{
+        const words = value.replace(/[_-]+/g, " ").trim();
+        return words.charAt(0).toUpperCase() + words.slice(1);
+    };
+    if (rest.length > 0 && provider !== undefined) {
+        return `${humanise(rest.join("__"))} (${humanise(provider)})`;
+    }
+    return humanise(name);
+}
+function stateDetailText(state) {
+    switch(state.status){
+        case "output-available":
+            return state.output;
+        case "error":
+            return state.message;
+        case "approval-requested":
+        case "output-denied":
+            return state.reason;
+        case "pending":
+        case "running":
+            return undefined;
+    }
+}
+function stateDetailTitle(state) {
+    switch(state.status){
+        case "error":
+            return "Error";
+        case "approval-requested":
+            return "Reason";
+        case "output-denied":
+            return "Denied because";
+        case "output-available":
+        case "pending":
+        case "running":
+            return "Output";
+    }
+}
+/**
+ * What a tool call did, as one line the transcript can open.
+ *
+ * Collapsed by default and collapsed even while running: a transcript where
+ * every tool call expands itself pushes the answer off screen, and the
+ * answer is what the user is waiting for. A failed call, a denied approval
+ * and a pending approval request all open by default — those are the three
+ * states where the detail is the point, not an afterthought.
+ *
+ * Uncontrolled by default, seeded from `defaultOpen` (or the state's own
+ * default). Pass `open`/`onOpenChange` to drive it from a parent.
+ */ export function ToolBlock({ name, label, state, input, defaultOpen, open: openProp, onOpenChange, className }) {
+    const [open, setOpen] = useControllableState({
+        value: openProp,
+        defaultValue: defaultOpen ?? OPENS_BY_DEFAULT[state.status],
+        onChange: onOpenChange,
+        name: "ToolBlock"
+    });
+    const detailText = stateDetailText(state);
+    const hasDetail = input !== undefined || detailText !== undefined;
+    const displayLabel = label !== undefined && label.length > 0 ? label : humaniseToolName(name);
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-slot": "tool-block",
+        "data-status": state.status,
+        className: cn("text-xs", className),
+        children: [
+            /*#__PURE__*/ _jsxs("button", {
+                type: "button",
+                onClick: ()=>setOpen((value)=>!value),
+                "aria-expanded": open,
+                disabled: !hasDetail,
+                // `relative` plus the `::after` pseudo-element below extends the
+                // button's effective (vertical) hit area to 40px without inflating
+                // its own padding/density — see design-engineering.md's hit-area
+                // pattern. The row is already full-width, so only height needs
+                // extending.
+                className: "relative flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left 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 disabled:hover:bg-transparent",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        "data-slot": "tool-block-status",
+                        // A pending approval is human-blocking: it needs to reach assistive
+                        // tech the instant it appears, not only when a reader happens to
+                        // tab onto this button. Scoped to this span alone (not the whole
+                        // block) so every other state change in a busy transcript stays
+                        // silent — announcing every "Working" -> "Done" tick here would be
+                        // spam.
+                        role: state.status === "approval-requested" ? "status" : undefined,
+                        "aria-live": state.status === "approval-requested" ? "polite" : undefined,
+                        children: /*#__PURE__*/ _jsx(StatusDot, {
+                            label: STATE_TEXT[state.status],
+                            live: state.status === "running",
+                            tone: STATE_TONE[state.status]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "min-w-0 flex-1 truncate",
+                        children: displayLabel
+                    }),
+                    hasDetail ? /*#__PURE__*/ _jsx(ChevronRight, {
+                        className: cn("size-3.5 shrink-0 transition-transform duration-200 ease-out", open && "rotate-90"),
+                        "aria-hidden": true
+                    }) : null
+                ]
+            }),
+            open && hasDetail ? /*#__PURE__*/ _jsxs("div", {
+                className: "mt-1 ml-4 flex flex-col gap-2 border-l border-border pl-3 [animation:corbits-rail-block-in_200ms_var(--ease-out)_both]",
+                children: [
+                    input === undefined ? null : /*#__PURE__*/ _jsx(Detail, {
+                        title: "Input",
+                        children: JSON.stringify(input, null, 2)
+                    }),
+                    detailText === undefined ? null : /*#__PURE__*/ _jsx(Detail, {
+                        title: stateDetailTitle(state),
+                        children: detailText
+                    })
+                ]
+            }) : null
+        ]
+    });
+}
+function Detail({ title, children }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col gap-1",
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                className: "text-[10px] font-semibold tracking-[0.1em] text-muted-foreground uppercase",
+                children: title
+            }),
+            /*#__PURE__*/ _jsx("pre", {
+                className: "max-h-48 overflow-auto rounded-md bg-muted p-2 font-mono text-[11px] whitespace-pre-wrap",
+                children: children
+            })
+        ]
+    });
+}

package/dist/ui/tool-narrative.d.ts

@@ -0,0 +1,22 @@
+import { type ToolPart } from "../lib/chat-message.js";
+/**
+ * What the agent did, as one line the user can open.
+ *
+ * Collapsed by default and collapsed even while running: a transcript where
+ * every tool call expands itself pushes the answer off screen, and the answer
+ * is what the user is waiting for. The line still says which tool and how it
+ * ended, so nothing is hidden — only folded.
+ *
+ * A failed call opens by default. That is the one case where the detail is the
+ * point.
+ *
+ * Uncontrolled by default. Pass `open`/`onOpenChange` to drive it from a parent.
+ */
+export type ToolNarrativeProps = {
+    readonly part: ToolPart;
+    /** Controlled open state. Pair with `onOpenChange` to lift it to a parent. */
+    readonly open?: boolean;
+    readonly onOpenChange?: (open: boolean) => void;
+    readonly className?: string;
+};
+export declare function ToolNarrative({ part, open: openProp, onOpenChange, className }: ToolNarrativeProps): import("react").JSX.Element;

package/dist/ui/tool-narrative.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { useControllableState } from "../hooks/use-controllable-state.js";
+import { toolLabel } from "../lib/chat-message.js";
+import { cn } from "../lib/utils.js";
+import { StatusDot } from "./status-dot.js";
+const STATE_TEXT = {
+    running: "Working",
+    done: "Done",
+    error: "Failed"
+};
+export function ToolNarrative({ part, open: openProp, onOpenChange, className }) {
+    const [open, setOpen] = useControllableState({
+        value: openProp,
+        defaultValue: part.state === "error",
+        onChange: onOpenChange,
+        name: "ToolNarrative"
+    });
+    const label = toolLabel(part);
+    const hasDetail = part.output !== undefined || part.input !== undefined;
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-slot": "tool-narrative",
+        className: cn("text-xs", className),
+        children: [
+            /*#__PURE__*/ _jsxs("button", {
+                type: "button",
+                onClick: ()=>setOpen((value)=>!value),
+                "aria-expanded": open,
+                disabled: !hasDetail,
+                className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:hover:bg-transparent",
+                children: [
+                    /*#__PURE__*/ _jsx(StatusDot, {
+                        label: STATE_TEXT[part.state],
+                        live: part.state === "running",
+                        tone: part.state === "error" ? "danger" : part.state === "running" ? "emphasis" : "neutral"
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "min-w-0 flex-1 truncate",
+                        children: label
+                    }),
+                    hasDetail ? /*#__PURE__*/ _jsx(ChevronRight, {
+                        className: cn("size-3.5 shrink-0 transition-transform", open && "rotate-90"),
+                        "aria-hidden": true
+                    }) : null
+                ]
+            }),
+            open && hasDetail ? /*#__PURE__*/ _jsxs("div", {
+                className: "mt-1 ml-4 flex flex-col gap-2 border-l border-border pl-3",
+                children: [
+                    part.input === undefined ? null : /*#__PURE__*/ _jsx(Detail, {
+                        title: "Input",
+                        children: JSON.stringify(part.input, null, 2)
+                    }),
+                    part.output === undefined ? null : /*#__PURE__*/ _jsx(Detail, {
+                        title: part.state === "error" ? "Error" : "Output",
+                        children: part.output
+                    })
+                ]
+            }) : null
+        ]
+    });
+}
+function Detail({ title, children }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col gap-1",
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                className: "text-[10px] font-semibold tracking-[0.1em] text-muted-foreground uppercase",
+                children: title
+            }),
+            /*#__PURE__*/ _jsx("pre", {
+                className: "max-h-48 overflow-auto rounded-md bg-muted p-2 font-mono text-[11px] whitespace-pre-wrap",
+                children: children
+            })
+        ]
+    });
+}

package/dist/ui/tool-picker.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+export type ToolPickerStatus = "pending" | "disabled";
+/**
+ * One entry in the caller-supplied catalog — a tool the picker can list,
+ * search and select. Shaped like a `DataTable` row: plain data in, no
+ * behaviour, so the same catalog can back a table elsewhere without a
+ * reshape.
+ */
+export type ToolPickerItem = {
+    readonly id: string;
+    readonly name: string;
+    /** Groups the list — the picker's one piece of structure over the flat catalog. */
+    readonly package: string;
+    readonly description?: string;
+    /** Absent means available. `disabled` blocks selection; `pending` allows it. */
+    readonly status?: ToolPickerStatus;
+};
+export type ToolPickerProps = {
+    readonly items: readonly ToolPickerItem[];
+    /** Selected ids. A single-select picker still carries at most one entry here. */
+    readonly value: readonly string[];
+    readonly onChange: (value: readonly string[]) => void;
+    /** Defaults to single-select: a new pick replaces the current one. */
+    readonly multiple?: boolean;
+    /** First load — the catalog has not arrived yet, distinct from an empty catalog. */
+    readonly loading?: boolean;
+    /** Shown when the catalog itself is empty. Failed searches use a separate default. */
+    readonly empty?: ReactNode;
+    readonly searchPlaceholder?: string;
+    /** Accessible name for the search input — set it if this isn't picking tools. */
+    readonly searchLabel?: string;
+    readonly className?: string;
+};
+/**
+ * Browse, search and select tools from a caller-supplied catalog, grouped by
+ * package. Controlled like a form field (`value`/`onChange`) rather than
+ * owning selection itself — a caller wiring this into a bigger form needs
+ * the same value it would get from any other control.
+ *
+ * Disabled items stay in the list rather than disappearing — a tool a
+ * caller cannot pick right now is still information ("already attached
+ * elsewhere", "needs a credential") that vanishing would hide.
+ */
+export declare function ToolPicker({ items, value, onChange, multiple, loading, empty, searchPlaceholder, searchLabel, className, }: ToolPickerProps): import("react").JSX.Element;

package/dist/ui/tool-picker.js

@@ -0,0 +1,200 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { useCommandPaletteNavigation } from "../hooks/use-command-palette-navigation.js";
+import { cn } from "../lib/utils.js";
+import { Badge } from "./badge.js";
+import { EmptyState } from "./empty-state.js";
+import { Input } from "./input.js";
+const STATUS_LABEL = {
+    pending: "Pending",
+    disabled: "Disabled"
+};
+function matches(item, query) {
+    if (query.length === 0) return true;
+    const haystack = `${item.name} ${item.package} ${item.description ?? ""}`.toLowerCase();
+    return haystack.includes(query.toLowerCase());
+}
+function groupByPackage(items) {
+    const groups = new Map();
+    for (const item of items){
+        const group = groups.get(item.package);
+        if (group === undefined) groups.set(item.package, [
+            item
+        ]);
+        else group.push(item);
+    }
+    return [
+        ...groups.entries()
+    ].map(([id, groupItems])=>({
+            id,
+            items: groupItems
+        }));
+}
+/** Visible group title: a display name if the catalog already sent one, else a humanized slug. */ function groupHeading(id) {
+    if (/[A-Z]/.test(id) || /\s/.test(id)) return id;
+    return id.split(/[-_./]+/).filter(Boolean).map((part)=>part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+}
+/**
+ * Browse, search and select tools from a caller-supplied catalog, grouped by
+ * package. Controlled like a form field (`value`/`onChange`) rather than
+ * owning selection itself — a caller wiring this into a bigger form needs
+ * the same value it would get from any other control.
+ *
+ * Disabled items stay in the list rather than disappearing — a tool a
+ * caller cannot pick right now is still information ("already attached
+ * elsewhere", "needs a credential") that vanishing would hide.
+ */ export function ToolPicker({ items, value, onChange, multiple = false, loading = false, empty, searchPlaceholder = "Search tools…", searchLabel = "Search tools", className }) {
+    const baseId = useId();
+    const [query, setQuery] = useState("");
+    const listRef = useRef(null);
+    const filtered = useMemo(()=>items.filter((item)=>matches(item, query)), [
+        items,
+        query
+    ]);
+    const groups = useMemo(()=>groupByPackage(filtered), [
+        filtered
+    ]);
+    const selectedIds = useMemo(()=>new Set(value), [
+        value
+    ]);
+    const toggle = (item)=>{
+        if (item.status === "disabled") return;
+        const isSelected = selectedIds.has(item.id);
+        if (!multiple) {
+            onChange(isSelected ? [] : [
+                item.id
+            ]);
+            return;
+        }
+        onChange(isSelected ? value.filter((id)=>id !== item.id) : [
+            ...value,
+            item.id
+        ]);
+    };
+    const navigation = useCommandPaletteNavigation({
+        items: filtered,
+        onSelect: (id)=>{
+            const item = filtered.find((candidate)=>candidate.id === id);
+            if (item !== undefined) toggle(item);
+        },
+        onClose: ()=>{
+        /* Escape is handled below so an empty query does not swallow the key. */ }
+    });
+    useEffect(()=>{
+        listRef.current?.querySelector('[data-active="true"]')?.scrollIntoView({
+            block: "nearest"
+        });
+    }, [
+        navigation.activeId
+    ]);
+    const optionId = (id)=>`${baseId}-option-${id}`;
+    const onKeyDown = (event)=>{
+        if (event.key === "Escape") {
+            if (query.length > 0) {
+                event.preventDefault();
+                setQuery("");
+            }
+            return;
+        }
+        navigation.onKeyDown(event);
+    };
+    const emptyCatalog = items.length === 0;
+    const noMatches = !emptyCatalog && filtered.length === 0;
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-slot": "tool-picker",
+        className: cn("flex min-h-0 flex-col gap-2", className),
+        children: [
+            /*#__PURE__*/ _jsx(Input, {
+                value: query,
+                onChange: (event)=>setQuery(event.target.value),
+                onKeyDown: onKeyDown,
+                placeholder: searchPlaceholder,
+                "aria-label": searchLabel,
+                role: "combobox",
+                "aria-expanded": true,
+                "aria-autocomplete": "list",
+                "aria-controls": `${baseId}-list`,
+                "aria-activedescendant": navigation.activeId === undefined ? undefined : optionId(navigation.activeId),
+                "aria-busy": loading,
+                autoComplete: "off",
+                spellCheck: false
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                ref: listRef,
+                id: `${baseId}-list`,
+                role: "listbox",
+                "aria-label": "Tools",
+                "aria-multiselectable": multiple,
+                className: "flex min-h-0 flex-1 flex-col gap-3 overflow-auto",
+                children: loading ? /*#__PURE__*/ _jsx("p", {
+                    role: "presentation",
+                    className: "px-2 py-8 text-center text-sm text-muted-foreground",
+                    children: "Loading…"
+                }) : emptyCatalog ? /*#__PURE__*/ _jsx("div", {
+                    role: "presentation",
+                    children: empty ?? /*#__PURE__*/ _jsx(EmptyState, {
+                        title: "No tools",
+                        description: "Nothing in the catalog yet."
+                    })
+                }) : noMatches ? /*#__PURE__*/ _jsx("p", {
+                    role: "presentation",
+                    className: "px-2 py-8 text-center text-sm text-muted-foreground",
+                    children: "No tools match — try a different search."
+                }) : groups.map((group)=>/*#__PURE__*/ _jsxs("div", {
+                        role: "presentation",
+                        className: "flex flex-col gap-1",
+                        children: [
+                            /*#__PURE__*/ _jsx("p", {
+                                className: "px-3.5 py-1.5 text-[11px] font-semibold uppercase tracking-[0.1em] text-muted-foreground",
+                                children: groupHeading(group.id)
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "flex flex-col gap-1",
+                                children: group.items.map((item)=>/*#__PURE__*/ _jsx(ToolPickerOption, {
+                                        id: optionId(item.id),
+                                        item: item,
+                                        selected: selectedIds.has(item.id),
+                                        active: navigation.activeId === item.id,
+                                        onSelect: ()=>toggle(item),
+                                        onPointerMove: ()=>navigation.setActiveId(item.id)
+                                    }, item.id))
+                            })
+                        ]
+                    }, group.id))
+            })
+        ]
+    });
+}
+function ToolPickerOption({ id, item, selected, active, onSelect, onPointerMove }) {
+    const disabled = item.status === "disabled";
+    return /*#__PURE__*/ _jsxs("div", {
+        id: id,
+        role: "option",
+        "aria-selected": selected,
+        "aria-disabled": disabled,
+        "data-active": active,
+        onPointerMove: disabled ? undefined : onPointerMove,
+        onClick: disabled ? undefined : onSelect,
+        className: cn("flex w-full flex-col gap-1 rounded-lg border px-3.5 py-3 text-left transition-colors ease-out", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-muted active:brightness-95", selected ? "border-primary-emphasis bg-primary/10" : "border-border bg-card", // The keyboard cursor must stay visible on disabled rows — aria-activedescendant can land there.
+        active && "bg-muted"),
+        children: [
+            /*#__PURE__*/ _jsxs("span", {
+                className: "flex items-center gap-2",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "text-sm font-semibold",
+                        children: item.name
+                    }),
+                    item.status === undefined ? null : /*#__PURE__*/ _jsx(Badge, {
+                        tone: "neutral",
+                        children: STATUS_LABEL[item.status]
+                    })
+                ]
+            }),
+            item.description === undefined ? null : /*#__PURE__*/ _jsx("span", {
+                className: "text-xs leading-snug text-muted-foreground",
+                children: item.description
+            })
+        ]
+    });
+}

package/dist/ui/tooltip.d.ts

@@ -0,0 +1,21 @@
+export type InfoTooltipProps = {
+    /** The note shown in the tooltip and bound to the trigger via `aria-describedby`. */
+    readonly label: string;
+    /** Accessible name for the trigger button. Defaults to `label`. */
+    readonly triggerLabel?: string;
+    /** Render already open — uncontrolled, for stories and screenshots. */
+    readonly defaultOpen?: boolean;
+    readonly className?: string;
+};
+/**
+ * A focusable info glyph that discloses a short note on hover or focus.
+ *
+ * Radix owns the `aria-describedby` wiring, the open-on-focus/hover
+ * behaviour, and Escape-to-dismiss; this layer only paints. Built for notes
+ * that today get bolted onto a non-interactive element via a `title`
+ * attribute — that reaches a mouse only, is never announced by a screen
+ * reader, and never fires on touch. A `<button>` trigger fixes all three:
+ * it is in the tab order, Radix associates the note by id, and tapping it
+ * opens the tooltip on touch devices.
+ */
+export declare function InfoTooltip({ label, triggerLabel, defaultOpen, className }: InfoTooltipProps): import("react").JSX.Element;

package/dist/ui/tooltip.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { InfoIcon } from "lucide-react";
+import { cn } from "../lib/utils.js";
+/**
+ * A focusable info glyph that discloses a short note on hover or focus.
+ *
+ * Radix owns the `aria-describedby` wiring, the open-on-focus/hover
+ * behaviour, and Escape-to-dismiss; this layer only paints. Built for notes
+ * that today get bolted onto a non-interactive element via a `title`
+ * attribute — that reaches a mouse only, is never announced by a screen
+ * reader, and never fires on touch. A `<button>` trigger fixes all three:
+ * it is in the tab order, Radix associates the note by id, and tapping it
+ * opens the tooltip on touch devices.
+ */ export function InfoTooltip({ label, triggerLabel, defaultOpen, className }) {
+    return /*#__PURE__*/ _jsx(TooltipPrimitive.Provider, {
+        delayDuration: 200,
+        children: /*#__PURE__*/ _jsxs(TooltipPrimitive.Root, {
+            defaultOpen: defaultOpen,
+            children: [
+                /*#__PURE__*/ _jsx(TooltipPrimitive.Trigger, {
+                    asChild: true,
+                    children: /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        "aria-label": triggerLabel ?? label,
+                        className: cn("inline-flex size-4 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors", "hover:text-foreground focus-visible:text-foreground focus-visible:outline-none", "focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--primary)_22%,transparent)]", className),
+                        children: /*#__PURE__*/ _jsx(InfoIcon, {
+                            className: "size-full"
+                        })
+                    })
+                }),
+                /*#__PURE__*/ _jsx(TooltipPrimitive.Portal, {
+                    children: /*#__PURE__*/ _jsxs(TooltipPrimitive.Content, {
+                        "data-slot": "tooltip-content",
+                        sideOffset: 6,
+                        className: cn("z-50 max-w-64 rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-lg", "data-[state=delayed-open]:animate-[corbits-fade-in_150ms_ease-out] data-[state=closed]:animate-[corbits-fade-out_120ms_ease-in]"),
+                        children: [
+                            label,
+                            /*#__PURE__*/ _jsx(TooltipPrimitive.Arrow, {
+                                className: "fill-popover"
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+}

package/dist/ui/top-bar.d.ts

@@ -0,0 +1,53 @@
+import type * as React from "react";
+/**
+ * The row above the page. It owns no content of its own — a title or a
+ * breadcrumb trail on the left, whatever the page contributes on the right.
+ *
+ * Deliberately a `<header>` with parts rather than a `title`/`actions` prop
+ * pair: pages need a search box, a filter row or a context strip in that space,
+ * and a fixed prop list would push every one of them through a `ReactNode` prop
+ * that does the same job as a child.
+ */
+export declare function TopBar({ className, ...props }: React.ComponentProps<"header">): React.JSX.Element;
+export declare function TopBarTitle({ count, subtitle, className, children, ...props }: React.ComponentProps<"div"> & {
+    count?: number;
+    subtitle?: string;
+}): React.JSX.Element;
+export type Crumb = {
+    readonly label: string;
+    /** Omit on the last crumb — the current page is not a link. */
+    readonly href?: string;
+};
+/**
+ * Props a breadcrumb link receives, whether it renders as a plain `<a>` or a
+ * caller-supplied component. Only non-last crumbs render through this — see
+ * `TopBarBreadcrumbs` for why the last crumb is never a link.
+ */
+export type BreadcrumbLinkProps = {
+    readonly href: string;
+    readonly className: string;
+    readonly children: React.ReactNode;
+};
+export type TopBarBreadcrumbsProps = Omit<React.ComponentProps<"nav">, "children"> & {
+    crumbs: readonly Crumb[];
+    /**
+     * Renders every non-last crumb; defaults to a plain `<a>`. Must be a
+     * stable, module-scope reference — an inline arrow here creates a new
+     * component type on every render, which remounts every crumb. A router
+     * `Link` (e.g. React Router) that takes `to` instead of `href` needs a
+     * one-line wrapper: `({ href, ...rest }) => <Link to={href} {...rest} />`.
+     */
+    linkComponent?: React.ComponentType<BreadcrumbLinkProps>;
+};
+/**
+ * Breadcrumb trail. The last crumb is the current page: it is rendered as text
+ * with `aria-current="page"` even if a caller passes an href, because linking
+ * to where you already are is a known screen-reader annoyance.
+ *
+ * Every other crumb renders through `linkComponent`, defaulting to a plain
+ * `<a>`. A consumer routing through a SPA router passes its own `Link` so a
+ * breadcrumb click does not force a full page reload.
+ */
+export declare function TopBarBreadcrumbs({ crumbs, linkComponent: LinkComponent, className, ...props }: TopBarBreadcrumbsProps): React.JSX.Element;
+/** Trailing controls. Pushes itself to the right; put it last. */
+export declare function TopBarActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;