@ciridae/ui 0.8.2 → 0.10.0

package/dist/components/blocks/copy-field.d.ts

@@ -0,0 +1,18 @@
+/**
+ * One value as a labelled read-only text field, so it reads like the field it
+ * is about to be pasted into. A real `input` rather than a styled block: it
+ * selects, tabs, and reads to assistive tech like its destination. The row
+ * stays when there is no value yet, because dropping it left the steps above
+ * pointing at nothing.
+ */
+export declare function CopyField({ label, placeholder, value, }: {
+    label: string;
+    /**
+     * What an absent value means, which is not the same for every field. A
+     * minted secret is not generated yet; a deployment-wide URL that is
+     * missing will never arrive, and saying otherwise sends someone back to
+     * the mint button indefinitely.
+     */
+    placeholder?: string;
+    value: string | undefined;
+}): import("@types/react").JSX.Element;

package/dist/components/blocks/copy-field.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useEffect, useId, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+/** PostHog's own no-capture vocabulary — a fixed class name, not app config. */
+const POSTHOG_NO_CAPTURE_CLASS_NAME = "ph-no-capture";
+const COPIED_RESET_DELAY = 2000;
+/**
+ * One value as a labelled read-only text field, so it reads like the field it
+ * is about to be pasted into. A real `input` rather than a styled block: it
+ * selects, tabs, and reads to assistive tech like its destination. The row
+ * stays when there is no value yet, because dropping it left the steps above
+ * pointing at nothing.
+ */
+export function CopyField({ label, placeholder = "Not generated yet", value, }) {
+    const fieldId = useId();
+    return (_jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)] gap-1", children: [_jsx(Label, { className: "text-muted-foreground text-xs", htmlFor: fieldId, children: label }), _jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [_jsx(Input, { className: `${POSTHOG_NO_CAPTURE_CLASS_NAME} h-8 font-mono text-[11px]`, "data-sentry-mask": true, id: fieldId, onFocus: (event) => {
+                            event.target.select();
+                        }, placeholder: placeholder, readOnly: true, value: value ?? "" }), value === undefined ? null : _jsx(CopyButton, { label: label, text: value })] })] }));
+}
+function CopyButton({ label, text }) {
+    // What was copied, not that something was: this button survives a remint,
+    // so a boolean would keep claiming the checkmark over a value the clipboard
+    // has never held. Comparing makes a new `text` read as uncopied at once.
+    const [copiedText, setCopiedText] = useState(null);
+    const copied = copiedText === text;
+    useEffect(() => {
+        if (!copied)
+            return;
+        const timer = window.setTimeout(() => {
+            setCopiedText(null);
+        }, COPIED_RESET_DELAY);
+        return () => {
+            window.clearTimeout(timer);
+        };
+    }, [copied]);
+    /**
+     * `await` rather than `.catch`, because the two failures arrive differently:
+     * a denied permission or an unfocused document rejects, while an insecure
+     * origin has no `navigator.clipboard` at all and throws before a promise
+     * exists. Either way the user is about to paste a stale clipboard into a
+     * credential setup, so neither can pass silently.
+     */
+    const copy = async () => {
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopiedText(text);
+        }
+        catch {
+            toast.error(`Could not copy the ${label.toLowerCase()}`, {
+                description: "Select the field and copy it by hand.",
+            });
+        }
+    };
+    return (_jsx(Button, { "aria-label": copied ? `${label} copied` : `Copy ${label.toLowerCase()}`, onClick: () => {
+            void copy();
+        }, size: "icon-xs", variant: "ghost", children: copied ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}) }));
+}

package/dist/components/blocks/generated-connect-link.d.ts

@@ -0,0 +1,22 @@
+import type { McpAccessMode, McpAccessToolSelector, McpConnectLink } from "./mcp-access-types";
+/**
+ * The slice of the app's mint mutation this control drives, shaped so a
+ * TanStack Query mutation result can be passed whole. `data` is the link the
+ * last mint produced, absent until one succeeds.
+ */
+export type CreateConnectLinkState = {
+    data: McpConnectLink | undefined;
+    isPending: boolean;
+    mutate: () => void;
+};
+/**
+ * The mint button and whatever link it has produced. Split from the sheet
+ * because this is the one control that acts on the chosen access, and what it
+ * is named and coloured for has to track that choice rather than the mode.
+ */
+export declare function GeneratedConnectLink({ access, createConnectLink, currentTools, disabled, }: {
+    access: McpAccessMode | undefined;
+    createConnectLink: CreateConnectLinkState;
+    currentTools: McpAccessToolSelector[] | null;
+    disabled: boolean;
+}): import("@types/react").JSX.Element;

package/dist/components/blocks/generated-connect-link.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../ui/button";
+import { keyOf } from "./mcp-access-tool-picker";
+import { Spinner } from "../ui/spinner";
+const expiryFormatter = new Intl.DateTimeFormat(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short",
+});
+const ACCESS_LABEL = { read_only: "read-only", all: "full", selected: "custom" };
+const generateLabel = (hasLink, access, writes) => {
+    if (hasLink)
+        return "Generate new code";
+    if (access === "all")
+        return "Generate full-access code";
+    return writes ? "Generate write-access code" : "Generate code";
+};
+/**
+ * The methods the tool compiler treats as read-only, mirroring its
+ * `_READ_ONLY_METHODS` — the `readOnly` an operation reports is that set
+ * membership and nothing else, so a selector's own method already answers this.
+ */
+const READ_ONLY_METHODS = new Set(["GET"]);
+/**
+ * Whether the link this button mints can write. `all` always can, and so can a
+ * Custom set holding a non-`GET` operation. Read off the selectors the grant is
+ * already made of rather than the compiled inventory: the two agree by
+ * construction, and asking the server would put a network boundary — and a
+ * failure mode — under a pure predicate.
+ */
+function grantsWrite(access, currentTools) {
+    if (access === "all")
+        return true;
+    if (access !== "selected")
+        return false;
+    return (currentTools ?? []).some((tool) => !READ_ONLY_METHODS.has(tool.method));
+}
+/**
+ * The mint button and whatever link it has produced. Split from the sheet
+ * because this is the one control that acts on the chosen access, and what it
+ * is named and coloured for has to track that choice rather than the mode.
+ */
+export function GeneratedConnectLink({ access, createConnectLink, currentTools, disabled, }) {
+    const link = createConnectLink.data;
+    const writeGranting = grantsWrite(access, currentTools);
+    // The link reports the access it was minted with, not the current setting,
+    // so switching modes — or changing a custom selection — with a link on
+    // screen labels it honestly instead of silently re-describing a credential
+    // that already exists.
+    const changedSinceMint = link !== undefined &&
+        (link.access !== access ||
+            !sameSelection(link.access === "selected" ? link.tools : null, currentTools));
+    const staleLabel = changedSinceMint && access !== undefined ? ACCESS_LABEL[access] : null;
+    return (_jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)] gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [_jsx(Button, { disabled: createConnectLink.isPending || disabled, onClick: () => {
+                            // What the button is labelled for, not what was last read.
+                            createConnectLink.mutate();
+                        }, size: "sm", 
+                        // Named and coloured for what it will mint: the access is chosen
+                        // well above this button, and this is the click that acts on it.
+                        // Keyed on whether the grant can write rather than on the mode, so
+                        // a Custom set holding an action tool does not read as read-only.
+                        variant: writeGranting ? "destructive" : "default", children: generateLabel(link !== undefined, access, writeGranting) }), createConnectLink.isPending ? (_jsx(Spinner, { "aria-label": "Generating connection code", className: "text-muted-foreground" })) : null, link === undefined ? null : (_jsxs("p", { className: "text-muted-foreground/70 text-xs", children: [_jsxs("span", { className: "font-medium", children: [ACCESS_LABEL[link.access], " access"] }), " \u00B7 single use \u00B7 expires ", expiryFormatter.format(new Date(link.expiresAt))] }))] }), staleLabel === null ? null : (_jsxs("p", { className: "text-destructive text-xs", children: ["This code was generated before you changed the access above. Generate a new one to share", " ", staleLabel, " access."] }))] }));
+}
+function sameSelection(left, right) {
+    if (left === null || right === null)
+        return left === right;
+    const keys = new Set(left.map((tool) => keyOf(tool)));
+    return right.length === left.length && right.every((tool) => keys.has(keyOf(tool)));
+}

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

@@ -0,0 +1,22 @@
+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
+ * empty selection is reported but never stored because it is not a grant.
+ *
+ * Controlled rather than seeded once: the sheet owns the selection because the
+ * mint gate has to agree with these boxes, and a copy here could only be kept
+ * in step by remounting — which loses the scroll position on every click and
+ * still leaves the gate reading the older value.
+ */
+export declare function McpAccessToolPicker({ busy, inventory, selected, onChange, }: {
+    busy: boolean;
+    /** The compiled inventory a Custom selection chooses from. The app owns
+     * the fetch — and with it when the request is made at all. */
+    inventory: McpToolInventoryState;
+    selected: McpAccessToolSelector[];
+    onChange: (tools: McpAccessToolSelector[]) => void;
+}): import("@types/react").JSX.Element;

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spinner } from "../ui/spinner";
+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
+ * empty selection is reported but never stored because it is not a grant.
+ *
+ * Controlled rather than seeded once: the sheet owns the selection because the
+ * mint gate has to agree with these boxes, and a copy here could only be kept
+ * in step by remounting — which loses the scroll position on every click and
+ * still leaves the gate reading the older value.
+ */
+export function McpAccessToolPicker({ busy, inventory, selected, onChange, }) {
+    const selectedKeys = new Set(selected.map((tool) => keyOf(tool)));
+    if (inventory.data === undefined) {
+        return _jsx(InventoryUnavailableNote, { isPending: inventory.isPending });
+    }
+    const tools = inventory.data.tools;
+    const toggle = (key, checked) => {
+        const next = new Set(selectedKeys);
+        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 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, 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

@@ -0,0 +1,41 @@
+/**
+ * The vocabulary the mcp-access controls speak. The gateway owns these
+ * shapes; they travel unchanged from its database through an app's backend to
+ * here. Plain types rather than schemas: parsing belongs to the app's own
+ * data layer, and the components only need to name what they are handed.
+ */
+/** The gateway owns this vocabulary; it travels unchanged from its database to here. */
+export type McpAccessMode = "read_only" | "all" | "selected";
+/** Who adds the connector, which is the only thing the two setups differ on. */
+export type ConnectPlan = "personal" | "workspace";
+export type McpHttpMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+/** The durable coordinate a Custom selection stores per operation. */
+export type McpAccessToolSelector = {
+    method: McpHttpMethod;
+    pathTemplate: string;
+};
+/** A selector's coordinate plus its display labels. */
+export type McpAccessToolListing = {
+    name: string;
+    description: string;
+    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
+ * code was stamped with, and when it stops working. The code itself is not
+ * here — the app shows it through its own `CopyField`, and a type that never
+ * carries the credential cannot leak it. Discriminated on `access`: only a
+ * selected link carries tools, and it always does.
+ */
+export type McpConnectLink = {
+    access: Exclude<McpAccessMode, "selected">;
+    expiresAt: string;
+} | {
+    access: "selected";
+    tools: McpAccessToolSelector[];
+    expiresAt: string;
+};

package/dist/components/blocks/mcp-access-types.js

@@ -0,0 +1,7 @@
+/**
+ * The vocabulary the mcp-access controls speak. The gateway owns these
+ * shapes; they travel unchanged from its database through an app's backend to
+ * here. Plain types rather than schemas: parsing belongs to the app's own
+ * data layer, and the components only need to name what they are handed.
+ */
+export {};

package/dist/components/blocks/mcp-client-setup.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+import type { ConnectPlan } from "./mcp-access-types";
+import type { McpConnectClient } from "./mcp-connect-clients";
+/**
+ * Per-client setup for the connection.
+ *
+ * One client at a time, because every client wants the same values and only
+ * the steps differ — listing all of them stacked repeated the same URL five
+ * times and buried the one set of values the reader actually needs. The values
+ * sit above the tabs so switching clients never moves them.
+ */
+export declare function McpClientSetup({ clientId, code, connectorName, footer, onClientChange, onPlanChange, plan, url, urlNote, }: {
+    clientId: McpConnectClient;
+    /** The minted secret, absent until the member generates one. */
+    code: string | undefined;
+    /** Interpolated unquoted into the copyable CLI commands, so it must be a
+     * plain slug (no spaces, no leading `-`): quoting would have to pick a
+     * shell, and a leading `-` reaches the CLIs as an option. A name that
+     * fails the check renders the placeholder instead of a broken command. */
+    connectorName: string;
+    /** Minting lives in the card, beside the field it fills. */
+    footer: ReactNode;
+    onClientChange: (client: McpConnectClient) => void;
+    onPlanChange: (plan: ConnectPlan) => void;
+    plan: ConnectPlan;
+    url: string | undefined;
+    /** What to show in place of `url`, given why it is absent. */
+    urlNote: string;
+}): import("@types/react").JSX.Element;

package/dist/components/blocks/mcp-client-setup.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Tabs, TabsList, TabsTrigger } from "../ui/tabs";
+import { CopyField } from "./copy-field";
+import { CONNECT_CLIENTS, clientSteps, planAffectsClient } from "./mcp-connect-clients";
+import { McpPlanChoice } from "./mcp-plan-choice";
+/**
+ * The shape a connector name must have to be interpolated unquoted into the
+ * CLI commands below. Stricter than any one CLI needs: the first character
+ * may not be `-` because `--help-readonly` is a legal name by looser rules
+ * yet reaches both CLIs as an option, and there is no quoting that works for
+ * POSIX shells and Windows `cmd` at once.
+ */
+const PLAIN_SLUG = /^[\w.][\w.-]*$/;
+/**
+ * Per-client setup for the connection.
+ *
+ * One client at a time, because every client wants the same values and only
+ * the steps differ — listing all of them stacked repeated the same URL five
+ * times and buried the one set of values the reader actually needs. The values
+ * sit above the tabs so switching clients never moves them.
+ */
+export function McpClientSetup({ clientId, code, connectorName, footer, onClientChange, onPlanChange, plan, url, urlNote, }) {
+    const client = CONNECT_CLIENTS.find((candidate) => candidate.id === clientId);
+    return (_jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)] gap-3", children: [_jsx(ValueCard, { code: code, connectorName: connectorName, footer: footer, isCli: clientId === "cli", url: url, urlNote: urlNote }), _jsx(Tabs, { onValueChange: (value) => {
+                    // Narrowed through the catalogue rather than asserted: the tab list is
+                    // built from it, so a value that is not in it is not a client.
+                    const next = CONNECT_CLIENTS.find((candidate) => candidate.id === value);
+                    if (next)
+                        onClientChange(next.id);
+                }, value: clientId, children: _jsx(TabsList, { className: "w-full justify-start gap-x-2 overflow-x-auto", variant: "line", children: CONNECT_CLIENTS.map((candidate) => (_jsxs(TabsTrigger, { className: "text-xs", value: candidate.id, children: [_jsx(candidate.Icon, { "aria-hidden": "true", className: "size-3" }), candidate.tab] }, candidate.id))) }) }), client && planAffectsClient(client) ? (_jsx(McpPlanChoice, { onChange: onPlanChange, plan: plan })) : null, _jsx("p", { className: "text-muted-foreground text-sm", children: client ? clientSteps(client, plan) : null })] }));
+}
+/**
+ * The values, shown once. The CLIs take a whole command rather than a name and
+ * a URL, so that tab swaps the card's contents instead of adding a third field
+ * nobody else uses.
+ *
+ * The footer sits with the fields it fills, so minting no longer needs a
+ * sentence pointing at a control elsewhere on screen.
+ */
+function ValueCard({ code, connectorName, footer, isCli, url, urlNote, }) {
+    // The URL is deployment configuration now, not a mint result, so reusing
+    // the minted secret's "not generated yet" would point at a button that can
+    // never fill it. The caller owns which of the absent-URL states applies.
+    // The commands interpolate the name bare, so only a plain slug may reach
+    // them — `--help-readonly` would parse as an option, a space as two argv
+    // entries — and neither is visible in the rendered field. Each absence
+    // names its own cause: a bad name with a good URL must not read as a
+    // missing URL.
+    const cliName = PLAIN_SLUG.test(connectorName) ? connectorName : undefined;
+    const cliNote = url !== undefined && cliName === undefined
+        ? "The connector name can't be placed in a command — it needs to be a plain slug."
+        : urlNote;
+    return (_jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)] gap-3 rounded-lg border border-border bg-muted/30 p-3", children: [isCli ? (_jsxs(_Fragment, { children: [_jsx(CopyField, { label: "Claude Code CLI", placeholder: cliNote, value: url === undefined || cliName === undefined
+                            ? undefined
+                            : `claude mcp add --transport http ${cliName} ${url}` }), _jsx(CopyField, { label: "Codex CLI", placeholder: cliNote, value: url === undefined || cliName === undefined
+                            ? undefined
+                            : `codex mcp add ${cliName} --url ${url}` })] })) : (_jsxs(_Fragment, { children: [_jsx(CopyField, { label: "Name", placeholder: urlNote, value: url === undefined ? undefined : connectorName }), _jsx(CopyField, { label: "URL", placeholder: urlNote, value: url })] })), _jsx(CopyField, { label: "Connection code", value: code }), _jsx("div", { className: "border-border border-t pt-3", children: footer })] }));
+}

package/dist/components/blocks/mcp-connect-clients.d.ts

@@ -0,0 +1,43 @@
+import type { LucideIcon } from "lucide-react";
+import type { ConnectPlan } from "./mcp-access-types";
+/**
+ * Closed: an unknown client is not a reason to show a broken dialog.
+ *
+ * One `cli` token, not one per CLI: both commands take the same two values, so
+ * a tab each would have shown the same link twice to say `--url` differently.
+ */
+export declare const MCP_CONNECT_CLIENT_VALUES: readonly ["claude-web", "claude-desktop", "chatgpt-web", "chatgpt-desktop", "cli"];
+export type McpConnectClient = (typeof MCP_CONNECT_CLIENT_VALUES)[number];
+type ConnectClientMetadata = {
+    tab: string;
+    /** The label carries the brand, so the icon carries the surface — and the
+     * surface is what decides whether a local gateway works. */
+    Icon: LucideIcon;
+    steps: string;
+    /**
+     * Steps for a plan where only an owner may add a connector, or `null` for
+     * a client where the distinction does not exist.
+     *
+     * Null is the meaningful state rather than a missing key: a desktop app or
+     * CLI is installed per-machine, so everyone adds their own connector
+     * whatever plan the workspace is on, and the Plan control hides itself
+     * rather than offering a choice that changes nothing.
+     */
+    workspaceSteps: string | null;
+};
+export type ConnectClient = ConnectClientMetadata & {
+    id: McpConnectClient;
+};
+/**
+ * The steps to show for one client on one plan.
+ *
+ * `workspaceSteps` is nullable, so this has to answer for a null; the sheet
+ * never asks, because it keys the plan by client and writes it only where the
+ * control renders. Answering with the personal steps rather than nothing keeps
+ * the worst case a wrong-but-followable instruction instead of a blank panel.
+ */
+export declare const clientSteps: (client: ConnectClient, plan: ConnectPlan) => string;
+/** Whether the plan choice changes anything for this client. */
+export declare const planAffectsClient: (client: ConnectClientMetadata) => boolean;
+export declare const CONNECT_CLIENTS: ConnectClient[];
+export {};

package/dist/components/blocks/mcp-connect-clients.js

@@ -0,0 +1,66 @@
+import { GlobeIcon, MonitorIcon, TerminalIcon } from "lucide-react";
+/**
+ * Closed: an unknown client is not a reason to show a broken dialog.
+ *
+ * One `cli` token, not one per CLI: both commands take the same two values, so
+ * a tab each would have shown the same link twice to say `--url` differently.
+ */
+export const MCP_CONNECT_CLIENT_VALUES = [
+    "claude-web",
+    "claude-desktop",
+    "chatgpt-web",
+    "chatgpt-desktop",
+    "cli",
+];
+/**
+ * Keyed by the URL token rather than listed alongside it: a `Record` over the
+ * client union is exhaustive, so adding a token without metadata fails to
+ * compile instead of deep-linking to a sheet with no tab and blank steps.
+ */
+const CONNECT_CLIENT_METADATA = {
+    "claude-web": {
+        Icon: GlobeIcon,
+        steps: "Customize → Connectors → Add → Add custom connector. Paste the values, click Add, then paste your connection code when Claude asks for it.",
+        tab: "Claude",
+        workspaceSteps: "An owner adds the connector once using the name and URL above. After that, select Connect on it and paste your own connection code. On Team and Enterprise plans only owners can add connectors.",
+    },
+    "claude-desktop": {
+        Icon: MonitorIcon,
+        steps: "Settings → Connectors → Add custom connector. Paste the values, then paste your connection code when Claude asks for it.",
+        tab: "Claude Desktop",
+        workspaceSteps: null,
+    },
+    "chatgpt-web": {
+        Icon: GlobeIcon,
+        steps: "Settings → Connectors → Create. Paste the values, tick the risk acknowledgement, and Create, then paste your connection code when asked.",
+        tab: "ChatGPT",
+        workspaceSteps: "An owner adds the connector once using the name and URL above. After that, select Connect on it and paste your own connection code.",
+    },
+    "chatgpt-desktop": {
+        Icon: MonitorIcon,
+        steps: "Settings → Connectors → Create. Choose Streamable HTTP, paste the values, and Save, then paste your connection code when asked.",
+        tab: "ChatGPT Desktop",
+        workspaceSteps: null,
+    },
+    cli: {
+        Icon: TerminalIcon,
+        steps: "Run the command for your CLI, then paste your connection code when asked on first use.",
+        tab: "CLI",
+        workspaceSteps: null,
+    },
+};
+/**
+ * The steps to show for one client on one plan.
+ *
+ * `workspaceSteps` is nullable, so this has to answer for a null; the sheet
+ * never asks, because it keys the plan by client and writes it only where the
+ * control renders. Answering with the personal steps rather than nothing keeps
+ * the worst case a wrong-but-followable instruction instead of a blank panel.
+ */
+export const clientSteps = (client, plan) => plan === "workspace" ? (client.workspaceSteps ?? client.steps) : client.steps;
+/** Whether the plan choice changes anything for this client. */
+export const planAffectsClient = (client) => client.workspaceSteps !== null;
+export const CONNECT_CLIENTS = MCP_CONNECT_CLIENT_VALUES.map((id) => ({
+    id,
+    ...CONNECT_CLIENT_METADATA[id],
+}));

package/dist/components/blocks/mcp-plan-choice.d.ts

@@ -0,0 +1,17 @@
+import type { ConnectPlan } from "./mcp-access-types";
+/**
+ * Who adds the connector, as a named pair matching the access control above it.
+ *
+ * This asks rather than infers. The alternative was gating on this app's own
+ * admin role, but a project admin here is not necessarily an owner of the
+ * Claude or ChatGPT workspace: the two are unrelated systems, so inferring one
+ * from the other would hide the URL from the person who needs it and show it
+ * to someone who cannot use it. Only the reader knows which plan they are on.
+ *
+ * Nothing here changes what is minted or what it may reach. The plan selects
+ * which setup steps are true, and the values above stay identical either way.
+ */
+export declare function McpPlanChoice({ onChange, plan, }: {
+    onChange: (plan: ConnectPlan) => void;
+    plan: ConnectPlan;
+}): import("@types/react").JSX.Element;

package/dist/components/blocks/mcp-plan-choice.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../ui/button";
+const PLAN_LABEL = {
+    personal: "Personal",
+    workspace: "Team or Enterprise",
+};
+/**
+ * Who adds the connector, as a named pair matching the access control above it.
+ *
+ * This asks rather than infers. The alternative was gating on this app's own
+ * admin role, but a project admin here is not necessarily an owner of the
+ * Claude or ChatGPT workspace: the two are unrelated systems, so inferring one
+ * from the other would hide the URL from the person who needs it and show it
+ * to someone who cannot use it. Only the reader knows which plan they are on.
+ *
+ * Nothing here changes what is minted or what it may reach. The plan selects
+ * which setup steps are true, and the values above stay identical either way.
+ */
+export function McpPlanChoice({ onChange, plan, }) {
+    return (_jsxs("div", { "aria-label": "Who adds the connector", className: "inline-flex w-fit rounded-md border border-border p-0.5", role: "group", children: [_jsx(PlanOption, { label: PLAN_LABEL.personal, onSelect: () => {
+                    onChange("personal");
+                }, selected: plan === "personal" }), _jsx(PlanOption, { label: PLAN_LABEL.workspace, onSelect: () => {
+                    onChange("workspace");
+                }, selected: plan === "workspace" })] }));
+}
+function PlanOption({ label, onSelect, selected, }) {
+    return (_jsx(Button, { "aria-pressed": selected, onClick: onSelect, size: "sm", variant: selected ? "secondary" : "ghost", children: label }));
+}

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/copy-field.d.ts

@@ -0,0 +1 @@
+export * from "../components/blocks/copy-field";

package/dist/entries/copy-field.js

@@ -0,0 +1 @@
+export * from "../components/blocks/copy-field";

package/dist/entries/generated-connect-link.d.ts

@@ -0,0 +1 @@
+export * from "../components/blocks/generated-connect-link";

package/dist/entries/generated-connect-link.js

@@ -0,0 +1 @@
+export * from "../components/blocks/generated-connect-link";

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/dist/entries/mcp-access-tool-picker.d.ts

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

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

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

package/dist/entries/mcp-access-types.d.ts

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

package/dist/entries/mcp-access-types.js

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

package/dist/entries/mcp-client-setup.d.ts

@@ -0,0 +1 @@
+export * from "../components/blocks/mcp-client-setup";

package/dist/entries/mcp-client-setup.js

@@ -0,0 +1 @@
+export * from "../components/blocks/mcp-client-setup";

package/dist/entries/mcp-connect-clients.d.ts

@@ -0,0 +1 @@
+export * from "../components/blocks/mcp-connect-clients";

package/dist/entries/mcp-connect-clients.js

@@ -0,0 +1 @@
+export * from "../components/blocks/mcp-connect-clients";

package/dist/entries/mcp-plan-choice.d.ts

@@ -0,0 +1 @@
+export * from "../components/blocks/mcp-plan-choice";

package/dist/entries/mcp-plan-choice.js

@@ -0,0 +1 @@
+export * from "../components/blocks/mcp-plan-choice";

package/package.json

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