@ciridae/ui 0.9.0 → 0.10.0

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/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/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.10.0",
 	"type": "module",
 	"private": false,
 	"engines": {