@ciridae/ui 0.8.1 → 0.9.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/feedback-center-sheet.js

@@ -10,8 +10,8 @@ function FeedbackCenterSheet(props) {
     return (_jsx(FormSheet, { closeDisabled: props.isSubmitting ?? false, isDirty: state.isDirty, onOpenChange: props.onOpenChange, open: props.open, children: _jsx(FeedbackCenterSheetContent, { props: props, state: state }) }));
 }
 function FeedbackCenterSheetContent({ props, state, }) {
-    const { requestClose } = useFormSheetActions();
-    return (_jsx(SheetContent, { size: "md", children: _jsxs(Tabs, { className: "min-h-0 flex-1", onValueChange: setFeedbackCenterTab(state.handleTabChange), value: state.activeTab, children: [_jsx(FeedbackCenterSheetHeader, { unreadReplyCount: state.unreadReplyCount }), _jsx(SheetBody, { className: "pb-(--panel-padding)", children: _jsx(FeedbackCenterTabs, { composerProps: getFeedbackComposerProps(props), commentsByFeedbackId: props.commentsByFeedbackId ?? {}, commentsError: props.commentsError, formId: state.formId, isCommentSubmitting: props.isCommentSubmitting ?? false, isCommentsLoading: props.isCommentsLoading ?? false, isLoading: props.isLoading ?? false, items: props.items, itemsError: props.itemsError, onBack: state.handleBack, onCancel: requestClose, onDirtyChange: state.setIsDirty, onRetryComments: props.onRetryComments, onRetryItems: props.onRetryItems, onSelectFeedback: state.handleSelectFeedback, onSubmitComment: props.onSubmitComment, onSubmittedChange: state.setIsSubmitted, onUrgencyChange: state.setUrgency, renderEvidence: props.renderEvidence, selectedFeedback: state.selectedFeedback, view: state.view }) }), _jsx(FeedbackCenterFooter, { activeTab: state.activeTab, formId: state.formId, isSubmitted: state.isSubmitted, isSubmitting: props.isSubmitting ?? false, onCancel: requestClose, urgency: state.urgency })] }) }));
+    const { contentProps, requestClose } = useFormSheetActions();
+    return (_jsx(SheetContent, { size: "md", ...contentProps, children: _jsxs(Tabs, { className: "min-h-0 flex-1", onValueChange: setFeedbackCenterTab(state.handleTabChange), value: state.activeTab, children: [_jsx(FeedbackCenterSheetHeader, { unreadReplyCount: state.unreadReplyCount }), _jsx(SheetBody, { className: "pb-(--panel-padding)", children: _jsx(FeedbackCenterTabs, { composerProps: getFeedbackComposerProps(props), commentsByFeedbackId: props.commentsByFeedbackId ?? {}, commentsError: props.commentsError, formId: state.formId, isCommentSubmitting: props.isCommentSubmitting ?? false, isCommentsLoading: props.isCommentsLoading ?? false, isLoading: props.isLoading ?? false, items: props.items, itemsError: props.itemsError, onBack: state.handleBack, onCancel: requestClose, onDirtyChange: state.setIsDirty, onRetryComments: props.onRetryComments, onRetryItems: props.onRetryItems, onSelectFeedback: state.handleSelectFeedback, onSubmitComment: props.onSubmitComment, onSubmittedChange: state.setIsSubmitted, onUrgencyChange: state.setUrgency, renderEvidence: props.renderEvidence, selectedFeedback: state.selectedFeedback, view: state.view }) }), _jsx(FeedbackCenterFooter, { activeTab: state.activeTab, formId: state.formId, isSubmitted: state.isSubmitted, isSubmitting: props.isSubmitting ?? false, onCancel: requestClose, urgency: state.urgency })] }) }));
 }
 function useFeedbackCenterSheetState(props) {
     const defaultTab = props.defaultTab ?? "submit";

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

@@ -14,7 +14,7 @@ function FeedbackSheet({ onOpenChange, open, ...composerProps }) {
     return (_jsx(FormSheet, { closeDisabled: composerProps.isSubmitting ?? false, isDirty: isDirty, onOpenChange: onOpenChange, open: open, children: _jsx(FeedbackSheetContent, { composerProps: composerProps, onDirtyChange: setIsDirty, open: open }) }));
 }
 function FeedbackSheetContent({ composerProps, onDirtyChange, open, }) {
-    const { requestClose } = useFormSheetActions();
+    const { contentProps, requestClose } = useFormSheetActions();
     const formId = React.useId();
     const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [urgency, setUrgency] = React.useState("normal");
@@ -24,6 +24,6 @@ function FeedbackSheetContent({ composerProps, onDirtyChange, open, }) {
             setUrgency("normal");
         }
     }, [open]);
-    return (_jsxs(SheetContent, { size: "md", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Send feedback" }), _jsx(SheetDescription, { children: "Share a bug, feature request, or general note." })] }), _jsx(SheetBody, { children: _jsx(FeedbackComposer, { ...composerProps, actions: "external", formId: formId, onCancel: requestClose, onDirtyChange: onDirtyChange, onSubmittedChange: setIsSubmitted, onUrgencyChange: setUrgency }) }), isSubmitted ? null : (_jsxs(SheetFooter, { children: [_jsx(Button, { disabled: composerProps.isSubmitting, onClick: requestClose, type: "button", variant: "outline", children: "Cancel" }), _jsxs(Button, { form: formId, loading: composerProps.isSubmitting, type: "submit", variant: urgency === "emergency" ? "destructive" : "default", children: [urgency === "emergency" ? _jsx(AlertTriangleIcon, {}) : _jsx(SendIcon, {}), urgency === "emergency" ? "Send emergency" : "Submit feedback"] })] }))] }));
+    return (_jsxs(SheetContent, { size: "md", ...contentProps, children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Send feedback" }), _jsx(SheetDescription, { children: "Share a bug, feature request, or general note." })] }), _jsx(SheetBody, { children: _jsx(FeedbackComposer, { ...composerProps, actions: "external", formId: formId, onCancel: requestClose, onDirtyChange: onDirtyChange, onSubmittedChange: setIsSubmitted, onUrgencyChange: setUrgency }) }), isSubmitted ? null : (_jsxs(SheetFooter, { children: [_jsx(Button, { disabled: composerProps.isSubmitting, onClick: requestClose, type: "button", variant: "outline", children: "Cancel" }), _jsxs(Button, { form: formId, loading: composerProps.isSubmitting, type: "submit", variant: urgency === "emergency" ? "destructive" : "default", children: [urgency === "emergency" ? _jsx(AlertTriangleIcon, {}) : _jsx(SendIcon, {}), urgency === "emergency" ? "Send emergency" : "Submit feedback"] })] }))] }));
 }
 export { FeedbackSheet };

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/kanban-board-parts.d.ts

@@ -22,5 +22,5 @@ declare function KanbanBoardColumn({ activeCardId, activeCardRect, activeMove, b
 declare function KanbanDragOverlay({ activeCard, activeCardRect, }: {
     activeCard: KanbanCardData | undefined;
     activeCardRect: KanbanOverlayRect | undefined;
-}): React.JSX.Element;
+}): React.ReactPortal;
 export { KanbanBoardColumn, KanbanDragOverlay };

package/dist/components/blocks/kanban-board-parts.js

@@ -45,8 +45,6 @@ function KanbanDropPlaceholder({ height }) {
 }
 function KanbanDragOverlay({ activeCard, activeCardRect, }) {
     const overlay = (_jsx(DragOverlay, { adjustScale: false, children: activeCard ? (_jsx("div", { style: { width: activeCardRect?.width }, children: _jsx(KanbanCard, { card: activeCard, isDragging: true }) })) : null }));
-    if (typeof document === "undefined")
-        return overlay;
     return createPortal(overlay, document.body);
 }
 function getSortableCardClickHandler({ card, onCardSelect, suppressSelectRef, }) {

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

@@ -0,0 +1,35 @@
+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;
+};
+/**
+ * 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,41 @@
+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}`;
+/**
+ * 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("p", { className: "text-muted-foreground text-xs", children: inventory.isPending ? "Loading the tool list…" : "Couldn't load the tool list." }));
+    }
+    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, 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 })] })] }));
+}

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

@@ -0,0 +1,39 @@
+/**
+ * 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;
+};
+/**
+ * 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/color-theme.js

@@ -139,8 +139,6 @@ function parseStoredPalette(value) {
     return null;
 }
 function getSystemTheme() {
-    if (typeof window === "undefined")
-        return "light";
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 export { ThemeProvider };

package/dist/components/ui/form-sheet.d.ts

@@ -1,5 +1,12 @@
 import * as React from "react";
 type FormSheetActions = Readonly<{
+    /**
+     * Spread onto the `SheetContent` this form sheet wraps. Carries the
+     * close-focus handler; without it, closing drops focus on `<body>`.
+     */
+    contentProps: Readonly<{
+        onCloseAutoFocus: (event: Event) => void;
+    }>;
     requestClose: () => void;
 }>;
 type FormSheetProps = {

package/dist/components/ui/form-sheet.js

@@ -11,13 +11,14 @@ function useFormSheetActions() {
 }
 function FormSheet({ children, closeDisabled = false, isDirty, onOpenChange, open, trigger, }) {
     const [discardPromptOpen, setDiscardPromptOpen] = React.useState(false);
+    const sheetReturnFocusRef = React.useRef(null);
     const discardReturnFocusRef = React.useRef(null);
-    const discardingRef = React.useRef(false);
-    const returnFocus = useFormSheetReturnFocus(open);
-    const closeSheet = React.useCallback(() => {
-        returnFocus.prepareForClose();
-        onOpenChange(false);
-    }, [onOpenChange, returnFocus]);
+    // Layout effect: parent layout effects run before the sheet's focus scope
+    // captures on mount, so this still sees the element focused before opening.
+    React.useLayoutEffect(() => {
+        if (open)
+            sheetReturnFocusRef.current = getActiveElement();
+    }, [open]);
     const requestClose = React.useCallback(() => {
         if (closeDisabled)
             return;
@@ -26,83 +27,48 @@ function FormSheet({ children, closeDisabled = false, isDirty, onOpenChange, ope
             setDiscardPromptOpen(true);
             return;
         }
-        closeSheet();
-    }, [closeDisabled, closeSheet, isDirty]);
-    const actions = React.useMemo(() => ({ requestClose }), [requestClose]);
+        onOpenChange(false);
+    }, [closeDisabled, isDirty, onOpenChange]);
+    const handleSheetCloseAutoFocus = React.useCallback((event) => {
+        returnFocusTo(event, sheetReturnFocusRef.current);
+    }, []);
+    const handleDiscardCloseAutoFocus = React.useCallback((event) => {
+        returnFocusTo(event, discardReturnFocusRef.current);
+    }, []);
+    const actions = React.useMemo(() => ({
+        contentProps: { onCloseAutoFocus: handleSheetCloseAutoFocus },
+        requestClose,
+    }), [handleSheetCloseAutoFocus, requestClose]);
     function handleOpenChange(nextOpen) {
         if (nextOpen) {
-            returnFocus.capture();
             onOpenChange(true);
             return;
         }
         requestClose();
     }
     function discardChanges() {
-        discardingRef.current = true;
         setDiscardPromptOpen(false);
-        closeSheet();
-    }
-    function handleDiscardPromptOpenChange(nextOpen) {
-        setDiscardPromptOpen(nextOpen);
-        if (!nextOpen && !discardingRef.current) {
-            requestAnimationFrame(() => discardReturnFocusRef.current?.focus());
-        }
-        discardingRef.current = false;
+        onOpenChange(false);
     }
-    return (_jsxs(_Fragment, { children: [_jsxs(Sheet, { onOpenChange: handleOpenChange, open: open, children: [trigger ? _jsx(SheetTrigger, { asChild: true, children: trigger }) : null, _jsx(FormSheetContext.Provider, { value: actions, children: children })] }), _jsx(DiscardChangesPrompt, { onDiscard: discardChanges, onOpenChange: handleDiscardPromptOpenChange, open: discardPromptOpen })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Sheet, { onOpenChange: handleOpenChange, open: open, children: [trigger ? _jsx(SheetTrigger, { asChild: true, children: trigger }) : null, _jsx(FormSheetContext.Provider, { value: actions, children: children })] }), _jsx(DiscardChangesPrompt, { onCloseAutoFocus: handleDiscardCloseAutoFocus, onDiscard: discardChanges, onOpenChange: setDiscardPromptOpen, open: discardPromptOpen })] }));
 }
-// useLayoutEffect warns during server rendering; the capture is browser-only anyway.
-const useIsomorphicLayoutEffect = typeof document === "undefined" ? React.useEffect : React.useLayoutEffect;
-function useFormSheetReturnFocus(open) {
-    const focusFrameRef = React.useRef(null);
-    const returnFocusRef = React.useRef(null);
-    const wasOpenRef = React.useRef(false);
-    const schedule = React.useCallback(() => {
-        const returnFocus = returnFocusRef.current;
-        if (!returnFocus)
-            return;
-        if (focusFrameRef.current !== null)
-            cancelAnimationFrame(focusFrameRef.current);
-        focusFrameRef.current = requestAnimationFrame(() => {
-            focusFrameRef.current = null;
-            if (returnFocus.isConnected)
-                returnFocus.focus();
-        });
-    }, []);
-    // Layout effect: a controlled open (no trigger, so capture() never ran) must
-    // read the pre-open element before the sheet's focus scope moves focus.
-    useIsomorphicLayoutEffect(() => {
-        if (open) {
-            if (!wasOpenRef.current)
-                returnFocusRef.current = getActiveElement();
-            wasOpenRef.current = true;
-            return;
-        }
-        if (!wasOpenRef.current)
-            return;
-        wasOpenRef.current = false;
-        schedule();
-    }, [open, schedule]);
-    React.useEffect(() => () => {
-        if (wasOpenRef.current)
-            schedule();
-    }, [schedule]);
-    const capture = React.useCallback(() => {
-        returnFocusRef.current = getActiveElement();
-        wasOpenRef.current = true;
-    }, []);
-    const prepareForClose = React.useCallback(() => {
-        schedule();
-        wasOpenRef.current = false;
-    }, [schedule]);
-    return React.useMemo(() => ({ capture, prepareForClose }), [capture, prepareForClose]);
+/**
+ * Radix aims its close-focus at the overlay's trigger. A controlled sheet has
+ * no trigger, so Radix suppresses the focus scope's own fallback and then
+ * focuses nothing, leaving `<body>` active. Restoring here rather than on a
+ * timer is what keeps the timing right: Radix fires this after the content
+ * unmounts, which is the moment the element is safe to focus again.
+ */
+function returnFocusTo(event, returnFocus) {
+    if (!returnFocus?.isConnected)
+        return; // discarded: the sheet owns focus from here
+    event.preventDefault();
+    returnFocus.focus();
 }
-function DiscardChangesPrompt({ onDiscard, onOpenChange, open, }) {
-    return (_jsx(AlertDialog, { onOpenChange: onOpenChange, open: open, children: _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Discard unsaved changes?" }), _jsx(AlertDialogDescription, { children: "Your changes have not been saved. Keep editing or discard them and close this panel." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Keep editing" }), _jsx(AlertDialogAction, { onClick: onDiscard, variant: "destructive", children: "Discard changes" })] })] }) }));
+function DiscardChangesPrompt({ onCloseAutoFocus, onDiscard, onOpenChange, open, }) {
+    return (_jsx(AlertDialog, { onOpenChange: onOpenChange, open: open, children: _jsxs(AlertDialogContent, { onCloseAutoFocus: onCloseAutoFocus, size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Discard unsaved changes?" }), _jsx(AlertDialogDescription, { children: "Your changes have not been saved. Keep editing or discard them and close this panel." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Keep editing" }), _jsx(AlertDialogAction, { onClick: onDiscard, variant: "destructive", children: "Discard changes" })] })] }) }));
 }
 function getActiveElement() {
-    if (typeof document === "undefined")
-        return null; // SSR-safe
     return document.activeElement instanceof HTMLElement ? document.activeElement : null;
 }
 export { FormSheet, useFormSheetActions };

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-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/dist/lib/browser-storage.d.ts

@@ -1,11 +1,10 @@
 /**
  * localStorage that cannot throw at its callers.
  *
- * Every access can raise: the API is absent during SSR, `getItem` throws when
- * storage is disabled by policy or by Safari's private mode, and `setItem`
- * throws on quota. A preference is worth remembering and never worth failing
- * over, so each call degrades to "no stored value" and the caller keeps its
- * in-memory state.
+ * Every access can raise: reading the property throws when storage is disabled
+ * by policy or by Safari's private mode, and `setItem` throws on quota. A
+ * preference is worth remembering and never worth failing over, so each call
+ * degrades to "no stored value" and the caller keeps its in-memory state.
  */
 declare function readStoredValue(key: string): string | null;
 declare function writeStoredValue(key: string, value: string): void;

package/dist/lib/browser-storage.js

@@ -1,15 +1,14 @@
 /**
  * localStorage that cannot throw at its callers.
  *
- * Every access can raise: the API is absent during SSR, `getItem` throws when
- * storage is disabled by policy or by Safari's private mode, and `setItem`
- * throws on quota. A preference is worth remembering and never worth failing
- * over, so each call degrades to "no stored value" and the caller keeps its
- * in-memory state.
+ * Every access can raise: reading the property throws when storage is disabled
+ * by policy or by Safari's private mode, and `setItem` throws on quota. A
+ * preference is worth remembering and never worth failing over, so each call
+ * degrades to "no stored value" and the caller keeps its in-memory state.
  */
 function storage() {
     try {
-        return typeof window === "undefined" ? null : window.localStorage;
+        return window.localStorage;
     }
     catch {
         // Accessing the property itself throws when storage is blocked by policy.

package/package.json

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