@ciridae/ui 0.9.0 → 0.11.0

package/dist/components/blocks/comment-composer.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { getCommentAuthorInitials } from "./comment-types";
+import { cn } from "../../lib/utils";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { InputGroupButton, InputGroupTextarea } from "../ui/input-group";
 const COMMENT_TEXTAREA_MAX_HEIGHT = 128;
@@ -17,9 +18,17 @@ function CommentComposer({ actionsSlot, author, defaultExpanded = false, default
     });
     React.useEffect(() => {
         resizeCommentTextarea(textareaRef.current);
-    }, [state.value]);
+        // showActions is a dep because each min-height bakes into the inline
+        // height this writes; a collapse without a value change must recompute.
+    }, [state.showActions, state.value]);
     const isDisabled = disabled || isSubmitting;
-    return (_jsx("form", { onSubmit: state.onSubmit, children: _jsxs("div", { className: "grid w-full gap-1.5 rounded-md border border-input bg-background px-2.5 py-2 shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[var(--focus-ring-width)] focus-within:ring-ring/50 dark:bg-input/30", "data-disabled": isDisabled ? "true" : undefined, children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx(CommentComposerAvatar, { author: author }), _jsx(InputGroupTextarea, { "aria-label": "Comment", className: "max-h-32 min-h-7 overflow-y-hidden px-0 py-1 text-sm leading-5", disabled: isDisabled, onBlur: state.onBlur, onChange: state.onValueChange, onFocus: state.onFocus, placeholder: placeholder, ref: textareaRef, rows: 1, value: state.value })] }), _jsx(CommentComposerActions, { actionsSlot: actionsSlot, canSubmit: state.canSubmit, isSubmitting: isSubmitting, loadingLabel: loadingLabel, showActions: state.showActions, submitLabel: submitLabel })] }) }));
+    return (_jsx("form", { onSubmit: state.onSubmit, children: _jsxs("div", { className: "grid w-full gap-1.5 rounded-md border border-input bg-background px-2.5 py-2 shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[var(--focus-ring-width)] focus-within:ring-ring/50 dark:bg-input/30", "data-disabled": isDisabled ? "true" : undefined, children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx(CommentComposerAvatar, { author: author }), _jsx(InputGroupTextarea, { "aria-label": "Comment", 
+                            // An active composer opens a few lines of room; min-height beats
+                            // the resize logic's inline height, so growth still works. The
+                            // two min-heights are exclusive because cn resolves no conflicts,
+                            // and important because the base Textarea's own min-h-16 is
+                            // emitted after both and would otherwise win in every state.
+                            className: cn("max-h-32 overflow-y-hidden px-0 py-1 text-sm leading-5", state.showActions ? "min-h-14!" : "min-h-7!"), disabled: isDisabled, onBlur: state.onBlur, onChange: state.onValueChange, onFocus: state.onFocus, onKeyDown: onComposerKeyDown, placeholder: placeholder, ref: textareaRef, rows: 1, value: state.value })] }), _jsx(CommentComposerActions, { actionsSlot: actionsSlot, canSubmit: state.canSubmit, isSubmitting: isSubmitting, loadingLabel: loadingLabel, showActions: state.showActions, submitLabel: submitLabel })] }) }));
 }
 function useCommentComposerState({ defaultExpanded, defaultValue, disabled, isSubmitting, onSubmit, onValueChange, value, }) {
     const [localValue, setLocalValue] = React.useState(defaultValue);
@@ -108,6 +117,15 @@ function CommentComposerAvatar({ author }) {
 function CommentSubmitButton({ canSubmit, isSubmitting, loadingLabel, submitLabel, }) {
     return (_jsx(InputGroupButton, { disabled: !canSubmit, loading: isSubmitting, loadingLabel: loadingLabel, size: "sm", type: "submit", children: submitLabel }));
 }
+/** Cmd/Ctrl+Enter posts; plain Enter keeps writing, as in every comment box. */
+function onComposerKeyDown(event) {
+    if (event.key !== "Enter" || !(event.metaKey || event.ctrlKey))
+        return;
+    if (event.nativeEvent.isComposing)
+        return; // mid-IME Enter confirms the composition
+    event.preventDefault();
+    event.currentTarget.form?.requestSubmit();
+}
 function resizeCommentTextarea(textarea) {
     if (!textarea)
         return;

package/dist/components/blocks/comment-thread.d.ts

@@ -1,4 +1,4 @@
-import type * as React from "react";
+import * as React from "react";
 import type { CommentAuthor, CommentItemData } from "./comment-types";
 type CommentThreadProps = {
     comments: CommentItemData[];

package/dist/components/blocks/comment-thread.js

@@ -1,11 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { MessageSquareTextIcon } from "lucide-react";
 import { CommentComposer } from "./comment-composer";
 import { CommentItem } from "./comment-item";
 import { Skeleton } from "../ui/skeleton";
 function CommentThread({ comments, composerAuthor, composerPlaceholder, composerSubmitLabel, emptyDescription = "Start the conversation with a short update or question.", emptyTitle = "No comments yet", isLoading = false, isSubmitting = false, onSubmit, readOnly = false, renderCommentActions, showHeader = true, title = "Comments", }) {
-    const showComposer = !readOnly && Boolean(onSubmit);
-    return (_jsxs("section", { className: "grid w-full gap-(--panel-gap)", "aria-label": title, children: [showHeader ? _jsx(CommentThreadHeader, { count: comments.length, title: title }) : null, _jsx(CommentThreadBody, { comments: comments, emptyDescription: emptyDescription, emptyTitle: emptyTitle, isLoading: isLoading, renderCommentActions: renderCommentActions }), showComposer && onSubmit ? (_jsx(CommentComposer, { author: composerAuthor, isSubmitting: isSubmitting, onSubmit: onSubmit, placeholder: composerPlaceholder, submitLabel: composerSubmitLabel })) : null] }));
+    const { armReveal, endRef } = useRevealThreadEnd(comments.length);
+    const submitAndReveal = !readOnly && onSubmit
+        ? async (body) => {
+            await onSubmit(body);
+            armReveal();
+        }
+        : undefined;
+    return (_jsxs("section", { className: "relative grid w-full gap-(--panel-gap)", "aria-label": title, children: [showHeader ? _jsx(CommentThreadHeader, { count: comments.length, title: title }) : null, _jsx(CommentThreadBody, { comments: comments, emptyDescription: emptyDescription, emptyTitle: emptyTitle, isLoading: isLoading, renderCommentActions: renderCommentActions }), submitAndReveal ? (_jsx(CommentComposer, { author: composerAuthor, isSubmitting: isSubmitting, onSubmit: submitAndReveal, placeholder: composerPlaceholder, submitLabel: composerSubmitLabel })) : null, _jsx("div", { "aria-hidden": true, className: "absolute bottom-0", ref: endRef })] }));
+}
+/**
+ * After a send, the thread follows its own tail: scroll once when the submit
+ * resolves, and again when the posted comment actually lands in `comments` —
+ * the app may only append it after a refetch.
+ */
+function useRevealThreadEnd(commentCount) {
+    const endRef = React.useRef(null);
+    // A deadline, not a flag: the follow-up scroll only chases the send it
+    // belongs to, so a comment arriving minutes later cannot yank a reader
+    // who has scrolled away.
+    const armedUntil = React.useRef(0);
+    React.useEffect(() => {
+        if (armedUntil.current === 0 || Date.now() > armedUntil.current)
+            return;
+        armedUntil.current = 0;
+        endRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }, [commentCount]);
+    const armReveal = React.useCallback(() => {
+        armedUntil.current = Date.now() + 5000;
+        endRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }, []);
+    return { armReveal, endRef };
 }
 function CommentThreadHeader({ count, title }) {
     return (_jsxs("header", { className: "flex items-center justify-between gap-3", children: [_jsx("h3", { className: "text-sm font-medium text-foreground", children: title }), _jsx("span", { className: "font-mono text-xs text-muted-foreground tabular-nums", children: count })] }));

package/dist/components/blocks/feedback-date-format.d.ts

@@ -1,5 +1,5 @@
-import { type TimestampFormatOptions } from "./timestamp-format";
+import { toUtcTimestamp, type TimestampFormatOptions } from "./timestamp-format";
 declare function formatFeedbackTimestamp(value: string | undefined, options?: TimestampFormatOptions): string;
 declare function formatFeedbackTimestampFull(value: string | undefined, options?: TimestampFormatOptions): string;
 declare function getFeedbackTimestampDateTime(value: string | undefined): string | undefined;
-export { formatFeedbackTimestamp, formatFeedbackTimestampFull, getFeedbackTimestampDateTime };
+export { formatFeedbackTimestamp, formatFeedbackTimestampFull, getFeedbackTimestampDateTime, toUtcTimestamp, };

package/dist/components/blocks/feedback-date-format.js

@@ -1,4 +1,4 @@
-import { formatTimestamp, formatTimestampFull, getTimestampDateTime, } from "./timestamp-format";
+import { formatTimestamp, formatTimestampFull, getTimestampDateTime, toUtcTimestamp, } from "./timestamp-format";
 function formatFeedbackTimestamp(value, options = {}) {
     return formatTimestamp(value, options);
 }
@@ -8,4 +8,4 @@ function formatFeedbackTimestampFull(value, options = {}) {
 function getFeedbackTimestampDateTime(value) {
     return getTimestampDateTime(value);
 }
-export { formatFeedbackTimestamp, formatFeedbackTimestampFull, getFeedbackTimestampDateTime };
+export { formatFeedbackTimestamp, formatFeedbackTimestampFull, getFeedbackTimestampDateTime, toUtcTimestamp, };

package/dist/components/blocks/feedback-detail-sheet.js

@@ -9,7 +9,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { Button } from "../ui/button";
 import { Card } from "../ui/card";
 import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemGroupItem, ItemMedia, ItemTitle, } from "../ui/item";
-import { NativeSelect, NativeSelectOption } from "../ui/native-select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { PropertyList, PropertyListItem, PropertyListLabel, PropertyListValue, } from "../ui/property-list";
 import { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "../ui/sheet";
 function FeedbackDetailSheet({ conversation, feedback, onOpenChange, onStatusChange, open, pendingStatus, }) {
@@ -27,11 +27,11 @@ function FeedbackDetailContent({ feedback, onStatusChange, pendingStatus, }) {
  */
 function FeedbackDetailStatusSection({ onStatusChange, pendingStatus, status, }) {
     const selectId = React.useId();
-    return (_jsxs("div", { className: "grid gap-2", children: [_jsx("label", { className: "text-meta text-muted-foreground", htmlFor: selectId, children: "Status" }), _jsx(NativeSelect, { disabled: pendingStatus !== undefined, id: selectId, onChange: (event) => {
-                    const next = feedbackStatusValues.find((value) => value === event.target.value);
+    return (_jsxs("div", { className: "grid gap-2", children: [_jsx("label", { className: "text-meta text-muted-foreground", htmlFor: selectId, children: "Status" }), _jsxs(Select, { disabled: pendingStatus !== undefined, onValueChange: (value) => {
+                    const next = feedbackStatusValues.find((candidate) => candidate === value);
                     if (next && next !== status)
                         onStatusChange(next);
-                }, value: pendingStatus ?? status, children: feedbackStatusValues.map((value) => (_jsx(NativeSelectOption, { value: value, children: feedbackStatusLabels[value] }, value))) })] }));
+                }, value: pendingStatus ?? status, children: [_jsx(SelectTrigger, { className: "w-full", id: selectId, children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: feedbackStatusValues.map((value) => (_jsx(SelectItem, { value: value, children: feedbackStatusLabels[value] }, value))) })] })] }));
 }
 function FeedbackDetailSummary({ feedback }) {
     const submitter = feedback.submittedBy;

package/dist/components/blocks/feedback-tracking-types.d.ts

@@ -49,6 +49,12 @@ type FeedbackMetrics = {
     received: number;
     total: number;
 };
+type FeedbackTimelineEvent = {
+    actorEmail: string;
+    actorRole: "reporter" | "support";
+    at: string;
+    toStatus: FeedbackStatus;
+};
 declare const feedbackStatusLabels: Record<FeedbackStatus, string>;
 declare const feedbackTypeLabels: Record<StakeholderFeedbackType, string>;
 declare const feedbackStatusOptions: readonly [{
@@ -84,4 +90,4 @@ declare const feedbackTypeOptions: readonly [{
     readonly value: "general";
 }];
 declare function getFeedbackInitials(name: string, email: string | undefined): string;
-export { feedbackStatusLabels, feedbackStatusOptions, feedbackStatusValues, feedbackTypeLabels, feedbackTypeOptions, getFeedbackInitials, type FeedbackAffectedScope, type FeedbackAttachment, type FeedbackMetrics, type FeedbackStatus, type FeedbackSubmittedBy, type FeedbackUrgency, type StakeholderFeedbackItem, type StakeholderFeedbackType, type UserFeedbackItem, };
+export { feedbackStatusLabels, feedbackStatusOptions, feedbackStatusValues, feedbackTypeLabels, feedbackTypeOptions, getFeedbackInitials, type FeedbackAffectedScope, type FeedbackAttachment, type FeedbackMetrics, type FeedbackStatus, type FeedbackSubmittedBy, type FeedbackTimelineEvent, type FeedbackUrgency, type StakeholderFeedbackItem, type StakeholderFeedbackType, type UserFeedbackItem, };

package/dist/components/blocks/feedback-triage-timeline.d.ts

@@ -0,0 +1,11 @@
+import { type FeedbackTimelineEvent } from "./feedback-tracking-types";
+type FeedbackTriageTimelineProps = {
+    events: FeedbackTimelineEvent[];
+};
+/**
+ * The item's triage history, oldest first: where it has been, who moved it,
+ * and when. Support identities read as "Support" -- one team voice, the same
+ * rule the conversation applies.
+ */
+declare function FeedbackTriageTimeline({ events }: FeedbackTriageTimelineProps): import("@types/react").JSX.Element | null;
+export { FeedbackTriageTimeline, type FeedbackTriageTimelineProps };

package/dist/components/blocks/feedback-triage-timeline.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatFeedbackTimestamp } from "./feedback-date-format";
+import { feedbackStatusLabels } from "./feedback-tracking-types";
+/**
+ * The item's triage history, oldest first: where it has been, who moved it,
+ * and when. Support identities read as "Support" -- one team voice, the same
+ * rule the conversation applies.
+ */
+function FeedbackTriageTimeline({ events }) {
+    if (events.length === 0)
+        return null;
+    return (_jsxs("section", { "aria-label": "Triage history", className: "grid gap-1.5", children: [_jsx("h3", { className: "text-sm font-medium", children: "Timeline" }), _jsx("ol", { className: "grid gap-1 border-l pl-3", children: events.map((event, index) => (_jsxs("li", { className: "text-xs text-muted-foreground", children: [_jsx("span", { className: "font-medium text-foreground", children: feedbackStatusLabels[event.toStatus] }), " · ", event.actorRole === "support" ? "Support" : event.actorEmail, " · ", formatFeedbackTimestamp(event.at)] }, getTimelineEventKey(event, index)))) })] }));
+}
+function getTimelineEventKey(event, index) {
+    return `${event.toStatus}-${event.at}-${index}`; // two transitions can share a status and timestamp
+}
+export { FeedbackTriageTimeline };

package/dist/components/blocks/feedback-type-badge.d.ts

@@ -1,6 +1,11 @@
+import type * as React from "react";
 import { type StakeholderFeedbackType } from "./feedback-tracking-types";
 type FeedbackTypeBadgeProps = {
     type: StakeholderFeedbackType;
 };
-declare function FeedbackTypeBadge({ type }: FeedbackTypeBadgeProps): import("@types/react").JSX.Element;
+/**
+ * Quiet on purpose: status owns hue wherever the two badges share a row, so
+ * the type reads by its icon's silhouette instead of competing for color.
+ */
+declare function FeedbackTypeBadge({ type }: FeedbackTypeBadgeProps): React.JSX.Element;
 export { FeedbackTypeBadge, type FeedbackTypeBadgeProps };

package/dist/components/blocks/feedback-type-badge.js

@@ -1,12 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BugIcon, LightbulbIcon, MessageSquareIcon } from "lucide-react";
 import { Badge } from "../ui/badge";
 import { feedbackTypeLabels } from "./feedback-tracking-types";
+/**
+ * Quiet on purpose: status owns hue wherever the two badges share a row, so
+ * the type reads by its icon's silhouette instead of competing for color.
+ */
 function FeedbackTypeBadge({ type }) {
-    return _jsx(Badge, { variant: feedbackTypeVariants[type], children: feedbackTypeLabels[type] });
+    const Icon = feedbackTypeIcons[type];
+    return (_jsxs(Badge, { variant: "outline", children: [_jsx(Icon, {}), feedbackTypeLabels[type]] }));
 }
-const feedbackTypeVariants = {
-    bug: "warning",
-    feature: "info",
-    general: "outline",
+const feedbackTypeIcons = {
+    bug: BugIcon,
+    feature: LightbulbIcon,
+    general: MessageSquareIcon,
 };
 export { FeedbackTypeBadge };

package/dist/components/blocks/feedback-unread-badge.d.ts

@@ -0,0 +1,6 @@
+type FeedbackUnreadBadgeProps = {
+    count: number;
+};
+/** "N new reply/replies" pill for list rows; renders nothing at zero. */
+declare function FeedbackUnreadBadge({ count }: FeedbackUnreadBadgeProps): import("@types/react").JSX.Element | null;
+export { FeedbackUnreadBadge, type FeedbackUnreadBadgeProps };

package/dist/components/blocks/feedback-unread-badge.js

@@ -0,0 +1,9 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "../ui/badge";
+/** "N new reply/replies" pill for list rows; renders nothing at zero. */
+function FeedbackUnreadBadge({ count }) {
+    if (count <= 0)
+        return null;
+    return (_jsxs(Badge, { variant: "secondary", children: [count, " new ", count === 1 ? "reply" : "replies"] }));
+}
+export { FeedbackUnreadBadge };

package/dist/components/blocks/feedback-user-detail.js

@@ -18,7 +18,7 @@ function FeedbackUserDetailHeader({ feedback, onBack, }) {
     return (_jsx("header", { className: "grid gap-3", children: _jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [onBack ? _jsx(FeedbackUserDetailBackButton, { onBack: onBack }) : null, _jsx("div", { className: "min-w-0 flex-1", children: _jsxs("div", { className: "flex min-w-0 items-center justify-between gap-3", children: [_jsx("h3", { className: "truncate text-sm font-medium text-foreground", children: feedback.subject }), _jsx(FeedbackUserDetailBadges, { feedback: feedback })] }) })] }) }));
 }
 function FeedbackUserDetailBadges({ feedback }) {
-    return (_jsxs("div", { className: "flex shrink-0 flex-wrap justify-end gap-2", children: [feedback.hasUnreadReply ? _jsx(Badge, { variant: "secondary", children: "New reply" }) : null, feedback.urgency === "emergency" ? (_jsxs(Badge, { variant: "destructive", children: [_jsx(AlertTriangleIcon, {}), "Emergency"] })) : null, _jsx(FeedbackTypeBadge, { type: feedback.type }), _jsx(FeedbackStatusBadge, { status: feedback.status })] }));
+    return (_jsxs("div", { className: "flex shrink-0 flex-wrap justify-end gap-2", children: [feedback.hasUnreadReply ? _jsx(Badge, { variant: "secondary", children: "New activity" }) : null, feedback.urgency === "emergency" ? (_jsxs(Badge, { variant: "destructive", children: [_jsx(AlertTriangleIcon, {}), "Emergency"] })) : null, _jsx(FeedbackTypeBadge, { type: feedback.type }), _jsx(FeedbackStatusBadge, { status: feedback.status })] }));
 }
 function FeedbackUserDetailBackButton({ onBack }) {
     return (_jsx(Button, { "aria-label": "Back to my feedback", className: "-ml-2 shrink-0", onClick: onBack, size: "icon", type: "button", variant: "ghost", children: _jsx(ArrowLeftIcon, {}) }));

package/dist/components/blocks/feedback-user-list.js

@@ -26,7 +26,7 @@ function FeedbackUserListItem({ item, onSelectFeedback, selected, }) {
     return (_jsx(ItemGroupItem, { children: _jsx(Item, { "aria-current": selected ? "true" : undefined, asChild: true, className: cn("w-full cursor-pointer text-left", selected && "border-foreground/30 bg-muted/50"), size: "sm", variant: "outline", children: _jsx("button", { onClick: () => onSelectFeedback?.(item), type: "button", children: _jsx(FeedbackUserListItemContent, { item: item }) }) }) }));
 }
 function FeedbackUserListItemContent({ item }) {
-    return (_jsxs(_Fragment, { children: [_jsxs(ItemContent, { className: "min-w-0", children: [_jsx(ItemTitle, { className: "max-w-full truncate", children: item.subject }), _jsx(ItemDescription, { className: "line-clamp-1", children: item.description })] }), _jsxs(ItemActions, { className: "shrink-0", children: [item.hasUnreadReply ? _jsx(Badge, { variant: "secondary", children: "New reply" }) : null, item.urgency === "emergency" ? (_jsxs(Badge, { variant: "destructive", children: [_jsx(AlertTriangleIcon, {}), "Emergency"] })) : null, _jsx(FeedbackTypeBadge, { type: item.type }), _jsx(FeedbackStatusBadge, { status: item.status })] }), _jsxs(ItemFooter, { children: [_jsx(FeedbackListDate, { label: "Submitted", value: item.submittedAt }), item.updatedAt ? _jsx(FeedbackListDate, { label: "Updated", value: item.updatedAt }) : null] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(ItemContent, { className: "min-w-0", children: [_jsx(ItemTitle, { className: "max-w-full truncate", children: item.subject }), _jsx(ItemDescription, { className: "line-clamp-1", children: item.description })] }), _jsxs(ItemActions, { className: "shrink-0", children: [item.hasUnreadReply ? _jsx(Badge, { variant: "secondary", children: "New activity" }) : null, item.urgency === "emergency" ? (_jsxs(Badge, { variant: "destructive", children: [_jsx(AlertTriangleIcon, {}), "Emergency"] })) : null, _jsx(FeedbackTypeBadge, { type: item.type }), _jsx(FeedbackStatusBadge, { status: item.status })] }), _jsxs(ItemFooter, { children: [_jsx(FeedbackListDate, { label: "Submitted", value: item.submittedAt }), item.updatedAt ? _jsx(FeedbackListDate, { label: "Updated", value: item.updatedAt }) : null] })] }));
 }
 function FeedbackListDate({ label, value }) {
     return (_jsxs("span", { className: "font-mono text-xs text-muted-foreground tabular-nums", children: [label, " ", formatFeedbackTimestamp(value)] }));

package/dist/components/blocks/mcp-access-grouped-tool-picker.d.ts

@@ -0,0 +1,19 @@
+import type { McpToolInventoryState } from "./mcp-access-tool-picker-internals";
+import type { McpAccessToolSelector } from "./mcp-access-types";
+/**
+ * The tool picker for inventories big enough to need navigation: one scroll
+ * region grouped by each tool's first OpenAPI tag, each group split into Read
+ * and Actions with a select-all per split, and a filter box on top. An
+ * inventory with no tags renders as a single unlabeled group, so the split,
+ * the select-alls, and the filter still apply.
+ *
+ * Every change is rebuilt from the full inventory against the one shared
+ * selection, so a tool selected but hidden by the filter is never dropped —
+ * only the rows on screen, and the select-alls over them, can change it.
+ */
+export declare function McpAccessGroupedToolPicker({ busy, inventory, selected, onChange, }: {
+    busy: boolean;
+    inventory: McpToolInventoryState;
+    selected: McpAccessToolSelector[];
+    onChange: (tools: McpAccessToolSelector[]) => void;
+}): import("@types/react").JSX.Element;

package/dist/components/blocks/mcp-access-grouped-tool-picker.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Checkbox } from "../ui/checkbox";
+import { Input } from "../ui/input";
+import { Spinner } from "../ui/spinner";
+import { EmptySelectionWarning, InventoryUnavailableNote, keyOf, PickerRow, } from "./mcp-access-tool-picker-internals";
+const UNTAGGED_LABEL = "Other";
+/**
+ * The tool picker for inventories big enough to need navigation: one scroll
+ * region grouped by each tool's first OpenAPI tag, each group split into Read
+ * and Actions with a select-all per split, and a filter box on top. An
+ * inventory with no tags renders as a single unlabeled group, so the split,
+ * the select-alls, and the filter still apply.
+ *
+ * Every change is rebuilt from the full inventory against the one shared
+ * selection, so a tool selected but hidden by the filter is never dropped —
+ * only the rows on screen, and the select-alls over them, can change it.
+ */
+export function McpAccessGroupedToolPicker({ busy, inventory, selected, onChange, }) {
+    const [query, setQuery] = useState("");
+    if (inventory.data === undefined) {
+        return _jsx(InventoryUnavailableNote, { isPending: inventory.isPending });
+    }
+    const tools = inventory.data.tools;
+    const selectedKeys = new Set(selected.map((tool) => keyOf(tool)));
+    const applyKeys = (keys, checked) => {
+        const next = new Set(selectedKeys);
+        for (const key of keys) {
+            if (checked)
+                next.add(key);
+            else
+                next.delete(key);
+        }
+        onChange(tools
+            .filter((tool) => next.has(keyOf(tool)))
+            .map((tool) => ({ method: tool.method, pathTemplate: tool.pathTemplate })));
+    };
+    const needle = query.trim().toLowerCase();
+    const groups = groupByFirstTag(tools);
+    const visibleGroups = groups
+        .map((group) => ({ ...group, visible: group.tools.filter((tool) => matches(tool, needle)) }))
+        .filter((group) => group.visible.length > 0);
+    const visibleCount = visibleGroups.reduce((count, group) => count + group.visible.length, 0);
+    const chosen = tools.filter((tool) => selectedKeys.has(keyOf(tool)));
+    return (_jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)] gap-2", children: [_jsx(Input, { "aria-label": "Filter tools", className: "h-8 text-xs", onChange: (event) => {
+                    setQuery(event.target.value);
+                }, placeholder: `Filter ${tools.length} tools…`, type: "search", value: query }), _jsx("div", { className: "max-h-96 overflow-y-auto rounded-md border border-border/60", children: visibleGroups.length === 0 ? (_jsx("p", { className: "text-muted-foreground px-3 py-2 text-xs", children: tools.length === 0 ? "This API exposes no tools." : "No tools match the filter." })) : (visibleGroups.map((group) => (_jsx(GroupSection, { busy: busy, group: group, onApply: applyKeys, selectedKeys: selectedKeys }, group.label ?? "")))) }), _jsx(PickerFooter, { busy: busy, chosen: chosen.length, matching: needle === "" ? null : visibleCount, total: tools.length })] }));
+}
+function PickerFooter({ busy, chosen, matching, total, }) {
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [busy ? _jsx(Spinner, { "aria-label": "Saving selection", className: "text-muted-foreground" }) : null, _jsxs("p", { "aria-live": "polite", className: "text-muted-foreground text-xs", children: [chosen, " of ", total, " tools selected"] }), matching === null ? null : (_jsxs("p", { className: "text-muted-foreground text-xs", children: [matching, " match", matching === 1 ? "es" : "", " the filter"] })), chosen === 0 ? _jsx(EmptySelectionWarning, {}) : null] }));
+}
+function matches(tool, needle) {
+    if (needle === "")
+        return true;
+    return [tool.name, tool.description, `${tool.method} ${tool.pathTemplate}`].some((text) => text.toLowerCase().includes(needle));
+}
+/** One tag group: its sticky header with counts, then the Read and Actions runs. */
+function GroupSection({ busy, group, selectedKeys, onApply, }) {
+    const chosenInGroup = group.tools.filter((tool) => selectedKeys.has(keyOf(tool))).length;
+    return (_jsxs("section", { children: [group.label === null ? null : (_jsxs("h4", { className: "bg-background sticky top-0 z-10 flex items-baseline justify-between gap-2 border-b border-border/60 px-3 py-1.5 font-mono text-xs font-semibold", children: [_jsx("span", { className: "truncate", children: group.label }), _jsxs("span", { className: "text-muted-foreground shrink-0 text-[10px] font-normal tabular-nums", children: [chosenInGroup, " / ", group.tools.length] })] })), [
+                { label: "Read", rows: group.visible.filter((tool) => tool.readOnly) },
+                { label: "Actions", rows: group.visible.filter((tool) => !tool.readOnly) },
+            ].map(({ label, rows }) => rows.length === 0 ? null : (_jsx(SubsectionRows, { busy: busy, groupLabel: group.label, label: label, onApply: onApply, rows: rows, selectedKeys: selectedKeys }, label)))] }));
+}
+/** One Read or Actions run within a group: its header with select-all, then rows. */
+function SubsectionRows({ busy, groupLabel, label, rows, selectedKeys, onApply, }) {
+    const rowKeys = rows.map((tool) => keyOf(tool));
+    const picked = rowKeys.filter((key) => selectedKeys.has(key)).length;
+    const allState = picked === 0 ? false : picked === rowKeys.length ? true : "indeterminate";
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 pt-2 pb-1", children: [_jsx("span", { className: label === "Actions"
+                            ? "text-primary text-[10px] font-semibold tracking-wide uppercase"
+                            : "text-muted-foreground text-[10px] font-semibold tracking-wide uppercase", children: label }), _jsx(Checkbox, { "aria-label": `Select all ${label.toLowerCase()}${groupLabel === null ? "" : ` in ${groupLabel}`}`, checked: allState, disabled: busy, onCheckedChange: (next) => {
+                            // The rows on screen only: with a filter active this is
+                            // "select what I searched for", never the hidden rest.
+                            onApply(rowKeys, next === true);
+                        } })] }), _jsx("ul", { className: "divide-y divide-border/50", children: rows.map((tool) => (_jsx(PickerRow, { checked: selectedKeys.has(keyOf(tool)), disabled: busy, 
+                    // The subheader above already says Read or Actions.
+                    kindBadge: false, onToggle: (key, checked) => {
+                        onApply([key], checked);
+                    }, tool: tool }, keyOf(tool)))) })] }));
+}
+/**
+ * Buckets by first tag in first-appearance order — a compiler emits tools in
+ * source order, so tag order is the API's own organization. Untagged tools
+ * trail as one "Other" bucket, unless nothing is tagged at all: then the one
+ * group is unlabeled rather than titled "Other" for no contrast.
+ */
+function groupByFirstTag(tools) {
+    const buckets = new Map();
+    for (const tool of tools) {
+        const firstTag = tool.tags?.[0];
+        if (firstTag === undefined)
+            continue;
+        const bucket = buckets.get(firstTag);
+        if (bucket)
+            bucket.push(tool);
+        else
+            buckets.set(firstTag, [tool]);
+    }
+    if (buckets.size === 0)
+        return [{ label: null, tools }];
+    const untagged = tools.filter((tool) => (tool.tags?.length ?? 0) === 0);
+    if (untagged.length > 0) {
+        // Into the real "Other" tag's bucket when one exists, so two groups
+        // never share a label (and with it a React key).
+        const bucket = buckets.get(UNTAGGED_LABEL);
+        if (bucket)
+            bucket.push(...untagged);
+        else
+            buckets.set(UNTAGGED_LABEL, untagged);
+    }
+    return [...buckets.entries()].map(([label, bucketTools]) => ({
+        label,
+        tools: bucketTools,
+    }));
+}

package/dist/components/blocks/mcp-access-tool-picker-internals.d.ts

@@ -0,0 +1,35 @@
+import type { McpAccessToolListing } from "./mcp-access-types";
+/** The coordinate a selector and a compiled operation are matched on. */
+export declare const keyOf: (tool: {
+    method: string;
+    pathTemplate: string;
+}) => string;
+/**
+ * The slice of the app's inventory query the pickers read, shaped so a
+ * TanStack Query result can be passed whole. `data` is `undefined` for both
+ * "still loading" and "failed to load"; `isPending` says which.
+ */
+export type McpToolInventoryState = {
+    data: {
+        tools: McpAccessToolListing[];
+    } | undefined;
+    isPending: boolean;
+};
+/** The one line an absent inventory renders, in both pickers. */
+export declare function InventoryUnavailableNote({ isPending }: {
+    isPending: boolean;
+}): import("@types/react").JSX.Element;
+/** Why an empty selection blocks the mint, in both pickers' footers. */
+export declare function EmptySelectionWarning(): import("@types/react").JSX.Element;
+/**
+ * One selectable tool row. `kindBadge` shows the read-only/action label — the
+ * flat list's only signal, redundant under the grouped picker's Read/Actions
+ * subheaders.
+ */
+export declare function PickerRow({ checked, disabled, kindBadge, tool, onToggle, }: {
+    checked: boolean;
+    disabled: boolean;
+    kindBadge: boolean;
+    tool: McpAccessToolListing;
+    onToggle: (key: string, checked: boolean) => void;
+}): import("@types/react").JSX.Element;

package/dist/components/blocks/mcp-access-tool-picker-internals.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Checkbox } from "../ui/checkbox";
+/** The coordinate a selector and a compiled operation are matched on. */
+export const keyOf = (tool) => `${tool.method} ${tool.pathTemplate}`;
+/** The one line an absent inventory renders, in both pickers. */
+export function InventoryUnavailableNote({ isPending }) {
+    return (_jsx("p", { className: "text-muted-foreground text-xs", children: isPending ? "Loading the tool list…" : "Couldn't load the tool list." }));
+}
+/** Why an empty selection blocks the mint, in both pickers' footers. */
+export function EmptySelectionWarning() {
+    return (_jsx("p", { className: "text-destructive text-xs", children: "Select at least one tool to generate a connection code." }));
+}
+/**
+ * One selectable tool row. `kindBadge` shows the read-only/action label — the
+ * flat list's only signal, redundant under the grouped picker's Read/Actions
+ * subheaders.
+ */
+export function PickerRow({ checked, disabled, kindBadge, tool, onToggle, }) {
+    const id = useId();
+    return (_jsxs("li", { className: "flex min-h-11 items-start gap-3 px-3 py-2", children: [_jsx(Checkbox, { checked: checked, disabled: disabled, id: id, onCheckedChange: (next) => {
+                    onToggle(keyOf(tool), next === true);
+                } }), _jsxs("label", { className: "min-w-0 flex-1 cursor-pointer", htmlFor: id, children: [kindBadge ? (_jsxs("span", { className: "flex flex-wrap items-center gap-x-2", children: [_jsx("span", { className: "truncate font-mono text-xs", children: tool.name }), _jsx("span", { className: "text-muted-foreground text-[10px] uppercase", children: tool.readOnly ? "read-only" : "action" })] })) : (_jsx("span", { className: "block truncate font-mono text-xs", children: tool.name })), _jsx("span", { className: "text-muted-foreground block truncate text-xs", children: tool.description })] })] }));
+}

package/dist/components/blocks/mcp-access-tool-picker.d.ts

@@ -1,20 +1,7 @@
-import type { McpAccessToolListing, McpAccessToolSelector } from "./mcp-access-types";
-/** The coordinate a selector and a compiled operation are matched on. */
-export declare const keyOf: (tool: {
-    method: string;
-    pathTemplate: string;
-}) => string;
-/**
- * The slice of the app's inventory query the picker reads, shaped so a
- * TanStack Query result can be passed whole. `data` is `undefined` for both
- * "still loading" and "failed to load"; `isPending` says which.
- */
-export type McpToolInventoryState = {
-    data: {
-        tools: McpAccessToolListing[];
-    } | undefined;
-    isPending: boolean;
-};
+import type { McpToolInventoryState } from "./mcp-access-tool-picker-internals";
+import type { McpAccessToolSelector } from "./mcp-access-types";
+export { keyOf } from "./mcp-access-tool-picker-internals";
+export type { McpToolInventoryState } from "./mcp-access-tool-picker-internals";
 /**
  * An exact tool selection, applied as it is clicked. There is nothing to
  * confirm: the list on screen is always what a code will be minted with, and an

package/dist/components/blocks/mcp-access-tool-picker.js

@@ -1,9 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-import { Checkbox } from "../ui/checkbox";
 import { Spinner } from "../ui/spinner";
-/** The coordinate a selector and a compiled operation are matched on. */
-export const keyOf = (tool) => `${tool.method} ${tool.pathTemplate}`;
+import { EmptySelectionWarning, InventoryUnavailableNote, keyOf, PickerRow, } from "./mcp-access-tool-picker-internals";
+export { keyOf } from "./mcp-access-tool-picker-internals";
 /**
  * An exact tool selection, applied as it is clicked. There is nothing to
  * confirm: the list on screen is always what a code will be minted with, and an
@@ -17,7 +15,7 @@ export const keyOf = (tool) => `${tool.method} ${tool.pathTemplate}`;
 export function McpAccessToolPicker({ busy, inventory, selected, onChange, }) {
     const selectedKeys = new Set(selected.map((tool) => keyOf(tool)));
     if (inventory.data === undefined) {
-        return (_jsx("p", { className: "text-muted-foreground text-xs", children: inventory.isPending ? "Loading the tool list…" : "Couldn't load the tool list." }));
+        return _jsx(InventoryUnavailableNote, { isPending: inventory.isPending });
     }
     const tools = inventory.data.tools;
     const toggle = (key, checked) => {
@@ -31,11 +29,5 @@ export function McpAccessToolPicker({ busy, inventory, selected, onChange, }) {
             .map((tool) => ({ method: tool.method, pathTemplate: tool.pathTemplate })));
     };
     const chosen = tools.filter((tool) => selectedKeys.has(keyOf(tool)));
-    return (_jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)] gap-2", children: [_jsx("ul", { className: "max-h-64 divide-y divide-border/50 overflow-y-auto rounded-md border border-border/60", children: tools.map((tool) => (_jsx(PickerRow, { checked: selectedKeys.has(keyOf(tool)), disabled: busy, onToggle: toggle, tool: tool }, keyOf(tool)))) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [busy ? _jsx(Spinner, { "aria-label": "Saving selection", className: "text-muted-foreground" }) : null, _jsxs("p", { "aria-live": "polite", className: "text-muted-foreground text-xs", children: [chosen.length, " of ", tools.length, " tools selected"] }), chosen.length === 0 ? (_jsx("p", { className: "text-destructive text-xs", children: "Select at least one tool to generate a connection code." })) : null] })] }));
-}
-function PickerRow({ checked, disabled, tool, onToggle, }) {
-    const id = useId();
-    return (_jsxs("li", { className: "flex min-h-11 items-start gap-3 px-3 py-2", children: [_jsx(Checkbox, { checked: checked, disabled: disabled, id: id, onCheckedChange: (next) => {
-                    onToggle(keyOf(tool), next === true);
-                } }), _jsxs("label", { className: "min-w-0 flex-1 cursor-pointer", htmlFor: id, children: [_jsxs("span", { className: "flex flex-wrap items-center gap-x-2", children: [_jsx("span", { className: "truncate font-mono text-xs", children: tool.name }), _jsx("span", { className: "text-muted-foreground text-[10px] uppercase", children: tool.readOnly ? "read-only" : "action" })] }), _jsx("span", { className: "block truncate text-muted-foreground text-xs", children: tool.description })] })] }));
+    return (_jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)] gap-2", children: [_jsx("ul", { className: "max-h-64 divide-y divide-border/50 overflow-y-auto rounded-md border border-border/60", children: tools.map((tool) => (_jsx(PickerRow, { checked: selectedKeys.has(keyOf(tool)), disabled: busy, kindBadge: true, onToggle: toggle, tool: tool }, keyOf(tool)))) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [busy ? _jsx(Spinner, { "aria-label": "Saving selection", className: "text-muted-foreground" }) : null, _jsxs("p", { "aria-live": "polite", className: "text-muted-foreground text-xs", children: [chosen.length, " of ", tools.length, " tools selected"] }), chosen.length === 0 ? _jsx(EmptySelectionWarning, {}) : null] })] }));
 }

package/dist/components/blocks/mcp-access-types.d.ts

@@ -21,6 +21,8 @@ export type McpAccessToolListing = {
     readOnly: boolean;
     method: McpHttpMethod;
     pathTemplate: string;
+    /** The operation's OpenAPI tags; the grouped picker buckets by the first. */
+    tags?: readonly string[];
 };
 /**
  * What a mint produced, as the fields these controls report: the access the

package/dist/components/blocks/timestamp-format.d.ts

@@ -4,5 +4,11 @@ type TimestampFormatOptions = {
 declare function formatTimestamp(value: string | undefined, options?: TimestampFormatOptions): string;
 declare function formatTimestampFull(value: string | undefined, options?: TimestampFormatOptions): string;
 declare function getTimestampDateTime(value: string | undefined): string | undefined;
-export { formatTimestamp, formatTimestampFull, getTimestampDateTime };
+/**
+ * Backends that store naive UTC timestamps serialize without a zone designator,
+ * and `Date.parse` reads a zoneless string as local time. Append the missing
+ * designator so timestamps render in the viewer's timezone.
+ */
+declare function toUtcTimestamp(value: string): string;
+export { formatTimestamp, formatTimestampFull, getTimestampDateTime, toUtcTimestamp };
 export type { TimestampFormatOptions };

package/dist/components/blocks/timestamp-format.js

@@ -28,6 +28,14 @@ function getTimestampDateTime(value) {
         return undefined;
     return date.toISOString();
 }
+/**
+ * Backends that store naive UTC timestamps serialize without a zone designator,
+ * and `Date.parse` reads a zoneless string as local time. Append the missing
+ * designator so timestamps render in the viewer's timezone.
+ */
+function toUtcTimestamp(value) {
+    return /(?:z|[+-]\d\d:?\d\d)$/i.test(value) ? value : `${value}Z`;
+}
 function parseTimestamp(value) {
     if (!value)
         return undefined;
@@ -63,4 +71,4 @@ const dateTimeFormatter = new Intl.DateTimeFormat(undefined, {
     month: "short",
     year: "numeric",
 });
-export { formatTimestamp, formatTimestampFull, getTimestampDateTime };
+export { formatTimestamp, formatTimestampFull, getTimestampDateTime, toUtcTimestamp };

package/dist/components/ui/checkbox.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CheckIcon } from "lucide-react";
+import { CheckIcon, MinusIcon } from "lucide-react";
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
 import { cn } from "../../lib/utils";
 function Checkbox({ className, ...props }) {
-    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none", children: _jsx(CheckIcon, { className: "size-3.5" }) }) }));
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary dark:data-[state=indeterminate]:bg-primary", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none", children: props.checked === "indeterminate" ? (_jsx(MinusIcon, { className: "size-3.5" })) : (_jsx(CheckIcon, { className: "size-3.5" })) }) }));
 }
 export { Checkbox };

package/dist/components/ui/data-table-facet-filter.d.ts

@@ -7,17 +7,33 @@ type DataTableFacetOption = {
     value: string;
 };
 /**
- * Narrow a column to a set of its own values.
+ * The facet-filter popover, controlled: one button per facet that wears the
+ * current selection, checkable values inside. The caller owns the selection --
+ * URL search state, column filters, anything -- and receives the whole next
+ * selection on every toggle, so the popover can never disagree with the list
+ * it narrows and there is nothing to apply or discard on close.
+ */
+declare function FacetFilter({ counts, onSelectionChange, options, selected, title, }: {
+    /** Rows each option would leave, shown when provided. */
+    counts?: ReadonlyMap<string, number>;
+    onSelectionChange: (values: string[]) => void;
+    options: DataTableFacetOption[];
+    selected: readonly string[];
+    title: string;
+}): React.JSX.Element;
+/**
+ * The column-bound binding: narrow a column to a set of its own values.
  *
- * Counts come from the table's faceted row model, which `TanStackDataTable`
- * already builds -- so an option can say how many rows it would leave without
- * the caller counting anything itself. Pair with the `arrIncludesSome` filter
- * function, which is what a multi-select selection means.
+ * Selection lives in the column's filter value, and counts come from the
+ * table's faceted row model, which `TanStackDataTable` already builds -- so an
+ * option can say how many rows it would leave without the caller counting
+ * anything itself. Pair with the `arrIncludesSome` filter function, which is
+ * what a multi-select selection means.
  */
 declare function DataTableFacetFilter({ columnId, options, title, }: {
     columnId: string;
     options: DataTableFacetOption[];
     title: string;
 }): React.JSX.Element;
-export { DataTableFacetFilter };
+export { DataTableFacetFilter, FacetFilter };
 export type { DataTableFacetOption };

package/dist/components/ui/data-table-facet-filter.js

@@ -8,32 +8,44 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 import { Separator } from "./separator";
 /**
- * Narrow a column to a set of its own values.
- *
- * Counts come from the table's faceted row model, which `TanStackDataTable`
- * already builds -- so an option can say how many rows it would leave without
- * the caller counting anything itself. Pair with the `arrIncludesSome` filter
- * function, which is what a multi-select selection means.
+ * The facet-filter popover, controlled: one button per facet that wears the
+ * current selection, checkable values inside. The caller owns the selection --
+ * URL search state, column filters, anything -- and receives the whole next
+ * selection on every toggle, so the popover can never disagree with the list
+ * it narrows and there is nothing to apply or discard on close.
  */
-function DataTableFacetFilter({ columnId, options, title, }) {
-    const column = useDataTable().getColumn(columnId);
-    const counts = column?.getFacetedUniqueValues();
-    const selected = new Set(readSelection(column?.getFilterValue()));
-    const select = (value) => {
-        const next = new Set(selected);
+function FacetFilter({ counts, onSelectionChange, options, selected, title, }) {
+    const selectedSet = new Set(selected);
+    const toggle = (value) => {
+        const next = new Set(selectedSet);
         if (next.has(value))
             next.delete(value);
         else
             next.add(value);
-        // An empty selection is no filter at all, not a filter matching nothing.
-        column?.setFilterValue(next.size ? [...next] : undefined);
+        onSelectionChange([...next]);
     };
-    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { size: "sm", type: "button", variant: "outline", children: [_jsx(PlusCircleIcon, {}), title, selected.size > 0 ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "mx-0.5 data-[orientation=vertical]:h-4", orientation: "vertical" }), _jsx(FacetSelectionSummary, { labels: options.filter((option) => selected.has(option.value)) })] })) : null] }) }), _jsx(PopoverContent, { align: "start", className: "w-52 p-0", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: title }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No matches." }), _jsx(CommandGroup, { children: options.map((option) => (_jsx(FacetOptionItem, { count: counts?.get(option.value), onSelect: () => {
-                                            select(option.value);
-                                        }, option: option, selected: selected.has(option.value) }, option.value))) }), selected.size > 0 ? (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, {}), _jsx(CommandGroup, { children: _jsx(CommandItem, { className: "justify-center", onSelect: () => {
-                                                    column?.setFilterValue(undefined);
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { size: "sm", type: "button", variant: "outline", children: [_jsx(PlusCircleIcon, {}), title, selectedSet.size > 0 ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "mx-0.5 data-[orientation=vertical]:h-4", orientation: "vertical" }), _jsx(FacetSelectionSummary, { labels: options.filter((option) => selectedSet.has(option.value)) })] })) : null] }) }), _jsx(PopoverContent, { align: "start", className: "w-52 p-0", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: title }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No matches." }), _jsx(CommandGroup, { children: options.map((option) => (_jsx(FacetOptionItem, { count: counts?.get(option.value), onSelect: () => {
+                                            toggle(option.value);
+                                        }, option: option, selected: selectedSet.has(option.value) }, option.value))) }), selectedSet.size > 0 ? (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, {}), _jsx(CommandGroup, { children: _jsx(CommandItem, { className: "justify-center", onSelect: () => {
+                                                    onSelectionChange([]);
                                                 }, children: "Clear" }) })] })) : null] })] }) })] }));
 }
+/**
+ * The column-bound binding: narrow a column to a set of its own values.
+ *
+ * Selection lives in the column's filter value, and counts come from the
+ * table's faceted row model, which `TanStackDataTable` already builds -- so an
+ * option can say how many rows it would leave without the caller counting
+ * anything itself. Pair with the `arrIncludesSome` filter function, which is
+ * what a multi-select selection means.
+ */
+function DataTableFacetFilter({ columnId, options, title, }) {
+    const column = useDataTable().getColumn(columnId);
+    return (_jsx(FacetFilter, { counts: column?.getFacetedUniqueValues(), onSelectionChange: (values) => {
+            // An empty selection is no filter at all, not a filter matching nothing.
+            column?.setFilterValue(values.length ? values : undefined);
+        }, options: options, selected: readSelection(column?.getFilterValue()), title: title }));
+}
 /** Names the choices while they still fit, then counts them. */
 function FacetSelectionSummary({ labels }) {
     if (labels.length > 2)
@@ -50,4 +62,4 @@ function readSelection(value) {
         return [];
     return value.filter((entry) => typeof entry === "string");
 }
-export { DataTableFacetFilter };
+export { DataTableFacetFilter, FacetFilter };

package/dist/components/ui/data-table-search-input.d.ts

@@ -0,0 +1,14 @@
+type DataTableSearchInputProps = {
+    ariaLabel: string;
+    onChange: (value: string) => void;
+    placeholder: string;
+    value: string;
+};
+/**
+ * Shows what is being typed. Any debounce that turns the value into an address
+ * belongs in the caller's table state, next to everything else that decides
+ * what the table is looking at -- so a Clear that cancels a search cancels the
+ * write still in flight along with it.
+ */
+declare function DataTableSearchInput({ ariaLabel, onChange, placeholder, value, }: DataTableSearchInputProps): import("@types/react").JSX.Element;
+export { DataTableSearchInput, type DataTableSearchInputProps };

package/dist/components/ui/data-table-search-input.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SearchIcon } from "lucide-react";
+import { Input } from "./input";
+/**
+ * Shows what is being typed. Any debounce that turns the value into an address
+ * belongs in the caller's table state, next to everything else that decides
+ * what the table is looking at -- so a Clear that cancels a search cancels the
+ * write still in flight along with it.
+ */
+function DataTableSearchInput({ ariaLabel, onChange, placeholder, value, }) {
+    return (_jsxs("div", { className: "relative w-full sm:max-w-64", children: [_jsx(SearchIcon, { className: "pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { "aria-label": ariaLabel, className: "pl-8", onChange: (event) => {
+                    onChange(event.target.value);
+                }, placeholder: placeholder, type: "search", value: value })] }));
+}
+export { DataTableSearchInput };

package/dist/components/ui/item.js

@@ -12,12 +12,16 @@ function ItemGroupItem({ role = "listitem", ...props }) {
 function ItemSeparator({ className, ...props }) {
     return (_jsx(Separator, { "data-slot": "item-separator", orientation: "horizontal", className: cn("my-0", className), ...props }));
 }
-const itemVariants = cva("group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50", {
+const itemVariants = cva(
+// Each variant owns the border color outright: `cn` does not resolve
+// Tailwind conflicts, so base + variant both setting it would leave the
+// winner to the consuming app's CSS emission order.
+"group/item flex flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50", {
     variants: {
         variant: {
-            default: "bg-transparent",
+            default: "border-transparent bg-transparent",
             outline: "border-border",
-            muted: "bg-muted/50",
+            muted: "border-transparent bg-muted/50",
         },
         size: {
             default: "gap-(--panel-gap) p-(--panel-padding)",

package/dist/entries/data-table-search-input.d.ts

@@ -0,0 +1 @@
+export * from "../components/ui/data-table-search-input";

package/dist/entries/data-table-search-input.js

@@ -0,0 +1 @@
+export * from "../components/ui/data-table-search-input";

package/dist/entries/feedback-triage-timeline.d.ts

@@ -0,0 +1 @@
+export * from "../components/blocks/feedback-triage-timeline";

package/dist/entries/feedback-triage-timeline.js

@@ -0,0 +1 @@
+export * from "../components/blocks/feedback-triage-timeline";

package/dist/entries/feedback-unread-badge.d.ts

@@ -0,0 +1 @@
+export * from "../components/blocks/feedback-unread-badge";

package/dist/entries/feedback-unread-badge.js

@@ -0,0 +1 @@
+export * from "../components/blocks/feedback-unread-badge";

package/dist/entries/mcp-access-grouped-tool-picker.d.ts

@@ -0,0 +1 @@
+export * from "../components/blocks/mcp-access-grouped-tool-picker";

package/dist/entries/mcp-access-grouped-tool-picker.js

@@ -0,0 +1 @@
+export * from "../components/blocks/mcp-access-grouped-tool-picker";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ciridae/ui",
-	"version": "0.9.0",
+	"version": "0.11.0",
 	"type": "module",
 	"private": false,
 	"engines": {