@cueplusplus/ui 0.13.0

package/dist/elements/permission-grant.js

@@ -0,0 +1,86 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, inkButton, mono, paper } from "./surfaces.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { KeyRoundIcon } from "lucide-react";
+//#region src/elements/permission-grant.tsx
+/**
+* Granting a capability rather than approving one action, with the reach spelled out.
+*
+* @example
+* import { PermissionGrant } from "@cueplusplus/ui/elements";
+*
+* <PermissionGrant
+*   capability="Filesystem access"
+*   requester="filesystem-mcp"
+*   reach={reach}
+*   scope="pending"
+*   onGrant={setScope}
+* />
+*/
+function PermissionGrant({ capability, requester, reach, scope, onGrant, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "permission-grant",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3.5 rounded-(--radius-overlay) p-4", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "bg-surface-1 text-fg-muted flex size-7 shrink-0 items-center justify-center rounded-(--radius-surface)",
+					children: /* @__PURE__ */ jsx(KeyRoundIcon, { className: "size-3.5" })
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate text-(length:--cue-text-body) font-medium",
+						children: capability
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "text-fg-muted truncate text-(length:--cue-text-ui)",
+						children: ["requested by ", requester]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn(mono, "text-fg-subtle"),
+					children: "this grants"
+				}), reach.map((item) => /* @__PURE__ */ jsxs("span", {
+					className: "text-fg-muted flex items-baseline gap-2 text-(length:--cue-text-ui)",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "bg-surface-3 size-1 rounded-full"
+					}), item]
+				}, item))]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex h-8 items-center justify-end gap-2",
+				children: scope === "pending" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onGrant?.("denied"),
+						className: "text-fg-muted hover:bg-surface-2 hover:text-fg h-8 rounded-full px-3 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+						children: "Deny"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onGrant?.("session"),
+						className: "text-fg-muted hover:bg-surface-2 hover:text-fg h-8 rounded-full px-3 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+						children: "This session"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onGrant?.("always"),
+						className: cn(inkButton, "flex h-8 items-center rounded-full px-3 text-(length:--cue-text-ui) font-medium"),
+						children: "Always"
+					})
+				] }) : /* @__PURE__ */ jsx("span", {
+					className: cn(field, mono, "cue-elements-fade-in cue-elements-animate-in text-fg-muted rounded-full px-2.5 py-1.5 duration-300"),
+					children: scope === "denied" ? "denied" : `granted · ${scope}`
+				}, scope)
+			})
+		]
+	});
+}
+//#endregion
+export { PermissionGrant };

package/dist/elements/permission-scopes.d.ts

@@ -0,0 +1,215 @@
+import { PermissionLabels } from "./vocabulary.js";
+import * as React from "react";
+//#region src/elements/permission-scopes.d.ts
+/**
+ * One destination a standing grant can be written to.
+ *
+ * `writes` has no default anywhere in this package and never will.
+ * `PERMISSION_SCOPE_LABELS` ships the four reaches in words — `this session`,
+ * `this project (just you)`, `this project (shared)`, `all projects` — because
+ * those are the same everywhere; where a grant lands is the product's own
+ * answer, and a design system that guessed at a path would be committing the
+ * exact defect this element exists to prevent.
+ */
+interface PermissionScope {
+  /** Identifies it, and what `onAlwaysAllow` reports. */
+  id: string;
+  /**
+   * The words that go inside the answer: `this project (just you)`.
+   * `PERMISSION_SCOPE_LABELS` is the shipped set.
+   */
+  label: string;
+  /**
+   * What choosing it writes, and where, as a sentence a person can act on:
+   * `Saves to .cue/settings.local.json (gitignored)`, `Not saved. Gone when
+   * this run ends.` Drawn under the answer, never hidden behind a hover, and
+   * wrapped inside the word if the path leaves it nowhere else to break — it
+   * is the card's only account of where the grant lands, so it is never
+   * shortened and never allowed off the edge.
+   */
+  writes: string;
+}
+/** What {@link formatAlwaysAllow} was asked to write a label for. */
+interface AlwaysAllowInput {
+  /**
+   * The rules the grant would write, exactly as they will be written:
+   * `Bash(git commit:*)`, `Read(src/**)`. Never shortened.
+   */
+  rules: readonly string[];
+  /** The chosen scope's words: `this project (just you)`. */
+  scope: string;
+  /**
+   * Whether the rules are rules or directories. Directories get their own
+   * phrasing — the study's only other form — because `allow /Users/kit/rig/`
+   * reads as a path and `allow access to /Users/kit/rig/` reads as a grant.
+   */
+  kind?: "rule" | "directory";
+  /** What to say when there is no rule to name. `PERMISSION_LABELS.fallback`. */
+  fallback?: string;
+}
+/**
+ * The self-writing label, in the three pieces the control renders it in.
+ *
+ * The scope is separated out because it is the one part of the sentence that
+ * can change without the answer changing: the reader picks a different
+ * destination and the same grant goes somewhere else. `text` is all three
+ * joined, and it is what the control's accessible name is built from, so the
+ * sentence a screen reader hears and the sentence on the screen cannot drift.
+ */
+interface AlwaysAllowLabel {
+  /** Everything before the scope: `Yes, allow Bash(git commit:*) for `. */
+  lead: string;
+  /** The scope's own words, which the control draws as its destination. */
+  scope: string;
+  /**
+   * Everything after it. Empty in every form the study found, and present
+   * because a table translated into a language that puts the scope first will
+   * need it.
+   */
+  trail: string;
+  /** The three joined: the whole sentence. */
+  text: string;
+}
+/**
+ * Write the "always allow" answer's label from what it would actually grant.
+ *
+ * The four forms are Claude Code's, and the reason they are worth copying is
+ * that they degrade in the right order: name one rule, name two, then count.
+ * What this does **not** do is shorten — no 17-character elision, no stripping
+ * the `:*` off a prefix rule — because the elided part is the part that says
+ * how far the grant reaches. When there are more rules than the label can name,
+ * {@link PermissionScopes} lists every one of them underneath rather than
+ * leaving `and 3 more` as the only account of what was granted.
+ *
+ * @example
+ * formatAlwaysAllow({ rules: ["Bash(git commit:*)"], scope: "this project (just you)" }).text;
+ * // "Yes, allow Bash(git commit:*) for this project (just you)"
+ * @example
+ * formatAlwaysAllow({ rules: ["Read(src/**)", "Read(docs/**)", "Read(test/**)"], scope: "all projects" }).text;
+ * // "Yes, allow Read(src/**) and 2 more for all projects"
+ * @example
+ * formatAlwaysAllow({ rules: ["/Users/kit/rig"], scope: "this session", kind: "directory" }).text;
+ * // "Yes, allow access to /Users/kit/rig/ for this session"
+ */
+declare function formatAlwaysAllow({ rules, scope, kind, fallback }: AlwaysAllowInput): AlwaysAllowLabel;
+interface PermissionScopesProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onSelect"> {
+  /**
+   * The question, in the words of the thing being asked for: `Run this
+   * command?`, `Edit this file?`. One step up in size, as the reference sets
+   * it: it is the only sentence on the card that has to be read.
+   */
+  question: string;
+  /**
+   * The file, host or command the question is about, set in mono beside it.
+   * Omit for a question that names its own subject.
+   */
+  subject?: string;
+  /**
+   * The exact input the call would run with, drawn in a recessed mono box —
+   * the command, the patch, the URL. Shown verbatim and never parsed.
+   */
+  input?: string;
+  /**
+   * The rules a standing grant would write, exactly as they will be written.
+   * The always-allow answer's label is built from these; when there are more
+   * than the label can name, all of them are listed under it.
+   */
+  rules?: readonly string[];
+  /** Whether `rules` are rules or directories, which changes the phrasing. */
+  ruleKind?: "rule" | "directory";
+  /**
+   * Where a standing grant can be written, in the order they are offered.
+   * **No scopes means no always-allow answer**: a permanent grant that cannot
+   * say where it is saved is not one this element will offer.
+   */
+  scopes?: readonly PermissionScope[];
+  /**
+   * Which scope is chosen, by `id`. Defaults to the first. Claude Code
+   * persists this choice across prompts and so should a console — which is why
+   * it is a prop here rather than state: this element never remembers anything.
+   */
+  scope?: string;
+  /** Called with the next scope's `id` when the destination is cycled. */
+  onScopeChange?: (id: string) => void;
+  /** Yes, once. The answer exists only when this is given. */
+  onAllowOnce?: () => void;
+  /**
+   * Yes, and write the rules to the chosen scope — reported by `id`. The
+   * answer exists only when this **and** at least one scope are given.
+   */
+  onAlwaysAllow?: (scope: string) => void;
+  /**
+   * No. Also what `Escape` does, while focus is inside the card. The answer
+   * exists only when this is given.
+   */
+  onDeny?: () => void;
+  /** The card's own six strings, merged over `PERMISSION_LABELS`. */
+  labels?: Partial<PermissionLabels>;
+}
+/**
+ * Approval that says how far it reaches and where that is written down.
+ *
+ * Every product in the study offers a scope at the moment of approval, and
+ * every one of them labels it the same static way — `Always allow` — which is
+ * the least informative string in an agent UI: it is the only control on the
+ * screen whose consequences outlive the conversation, and it says nothing about
+ * what it grants or where the grant goes. So this one writes its own label.
+ * `Yes, allow Bash(git commit:*) for this project (just you)` names the rule
+ * and the reach; the line under it names the file, in a sentence, permanently
+ * visible.
+ *
+ * Nothing is shortened. Claude Code elides a long rule and strips the `:*` off
+ * a prefix rule, and both cuts land on the part that says how much is being
+ * granted, so the label here wraps instead. When there are more rules than the
+ * sentence can name, every one of them is listed under the answer — `and 3
+ * more` is a count, and a count is not an account.
+ *
+ * The three answers are numbered, and the numbers are real **while focus is
+ * inside the card**: `1`, `2` and `3` fire whichever answers are rendered,
+ * built from the same list that draws them, so a card with no always-allow has
+ * `2` on its deny, and `Escape` denies. The handler is the card's own
+ * `onKeyDown` and nothing is ever bound to the document, so the keys answer for
+ * a reader who has tabbed to an answer or been handed the card, and for nobody
+ * else.
+ *
+ * That is narrower than the reference, and the narrowing is the point. Claude
+ * Code disables its buttons for 500ms after mount and *then* takes focus, so
+ * its digits answer from anywhere; this card never claims focus at all, because
+ * a card that arrives mid-sentence and starts answering keystrokes is the bug
+ * that delay exists to prevent — and a row in a library cannot know whether the
+ * reader is halfway through typing `1` into a composer above it. A product that
+ * wants the digits to answer from anywhere has the information to decide that
+ * safely and this element does not: it routes its own key handler to the same
+ * three callbacks, or hands the card focus itself with a `ref` and a `tabIndex`
+ * of its own.
+ *
+ * There is no settled state. An answered permission is not a card any more; the
+ * row that survives is the tool call's own, with its status changed. Every
+ * product that modelled approval as an overlay ended up with the bug where the
+ * next message hides the answer.
+ *
+ * @example
+ * import { PermissionScopes, PERMISSION_SCOPE_LABELS } from "@cueplusplus/ui/elements";
+ *
+ * <PermissionScopes
+ *   question="Run this command?"
+ *   subject="cue-cli"
+ *   input='cue patch --universe 3 --fixtures 6'
+ *   rules={["Bash(cue patch:*)"]}
+ *   scopes={[
+ *     { id: "session", label: PERMISSION_SCOPE_LABELS.session, writes: "Not saved. Gone when this run ends." },
+ *     { id: "project", label: PERMISSION_SCOPE_LABELS.project, writes: "Saves to .cue/settings.local.json (gitignored)" },
+ *   ]}
+ *   scope={scope}
+ *   onScopeChange={setScope}
+ *   onAllowOnce={() => allow()}
+ *   onAlwaysAllow={(id) => remember(id)}
+ *   onDeny={() => deny()}
+ * />
+ * @example
+ * // No scopes: the card asks, and the only answers are once and no.
+ * <PermissionScopes question="Delete this file?" subject="cues/old.cue" onAllowOnce={allow} onDeny={deny} />
+ */
+declare const PermissionScopes: React.ForwardRefExoticComponent<PermissionScopesProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { AlwaysAllowInput, AlwaysAllowLabel, PermissionScope, PermissionScopes, PermissionScopesProps, formatAlwaysAllow };

package/dist/elements/permission-scopes.js

@@ -0,0 +1,249 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, fieldInteractive, mono, paper } from "./surfaces.js";
+import { PERMISSION_LABELS } from "./vocabulary.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/permission-scopes.tsx
+/**
+* Write the "always allow" answer's label from what it would actually grant.
+*
+* The four forms are Claude Code's, and the reason they are worth copying is
+* that they degrade in the right order: name one rule, name two, then count.
+* What this does **not** do is shorten — no 17-character elision, no stripping
+* the `:*` off a prefix rule — because the elided part is the part that says
+* how far the grant reaches. When there are more rules than the label can name,
+* {@link PermissionScopes} lists every one of them underneath rather than
+* leaving `and 3 more` as the only account of what was granted.
+*
+* @example
+* formatAlwaysAllow({ rules: ["Bash(git commit:*)"], scope: "this project (just you)" }).text;
+* // "Yes, allow Bash(git commit:*) for this project (just you)"
+* @example
+* formatAlwaysAllow({ rules: ["Read(src/**)", "Read(docs/**)", "Read(test/**)"], scope: "all projects" }).text;
+* // "Yes, allow Read(src/**) and 2 more for all projects"
+* @example
+* formatAlwaysAllow({ rules: ["/Users/kit/rig"], scope: "this session", kind: "directory" }).text;
+* // "Yes, allow access to /Users/kit/rig/ for this session"
+*/
+function formatAlwaysAllow({ rules, scope, kind = "rule", fallback = PERMISSION_LABELS.fallback }) {
+	const named = rules.filter((rule) => rule.trim() !== "");
+	const join = (lead) => ({
+		lead,
+		scope,
+		trail: "",
+		text: `${lead}${scope}`
+	});
+	if (named.length === 0) return {
+		lead: fallback,
+		scope: "",
+		trail: "",
+		text: fallback
+	};
+	if (kind === "directory") {
+		const first = named[0];
+		if (named.length === 1) return join(`Yes, allow access to ${first.endsWith("/") ? first : `${first}/`} for `);
+		return join(`Yes, allow access to ${named.length} directories for `);
+	}
+	if (named.length === 1) return join(`Yes, allow ${named[0]} for `);
+	if (named.length === 2) return join(`Yes, allow ${named[0]} and ${named[1]} for `);
+	return join(`Yes, allow ${named[0]} and ${named.length - 1} more for `);
+}
+/**
+* Approval that says how far it reaches and where that is written down.
+*
+* Every product in the study offers a scope at the moment of approval, and
+* every one of them labels it the same static way — `Always allow` — which is
+* the least informative string in an agent UI: it is the only control on the
+* screen whose consequences outlive the conversation, and it says nothing about
+* what it grants or where the grant goes. So this one writes its own label.
+* `Yes, allow Bash(git commit:*) for this project (just you)` names the rule
+* and the reach; the line under it names the file, in a sentence, permanently
+* visible.
+*
+* Nothing is shortened. Claude Code elides a long rule and strips the `:*` off
+* a prefix rule, and both cuts land on the part that says how much is being
+* granted, so the label here wraps instead. When there are more rules than the
+* sentence can name, every one of them is listed under the answer — `and 3
+* more` is a count, and a count is not an account.
+*
+* The three answers are numbered, and the numbers are real **while focus is
+* inside the card**: `1`, `2` and `3` fire whichever answers are rendered,
+* built from the same list that draws them, so a card with no always-allow has
+* `2` on its deny, and `Escape` denies. The handler is the card's own
+* `onKeyDown` and nothing is ever bound to the document, so the keys answer for
+* a reader who has tabbed to an answer or been handed the card, and for nobody
+* else.
+*
+* That is narrower than the reference, and the narrowing is the point. Claude
+* Code disables its buttons for 500ms after mount and *then* takes focus, so
+* its digits answer from anywhere; this card never claims focus at all, because
+* a card that arrives mid-sentence and starts answering keystrokes is the bug
+* that delay exists to prevent — and a row in a library cannot know whether the
+* reader is halfway through typing `1` into a composer above it. A product that
+* wants the digits to answer from anywhere has the information to decide that
+* safely and this element does not: it routes its own key handler to the same
+* three callbacks, or hands the card focus itself with a `ref` and a `tabIndex`
+* of its own.
+*
+* There is no settled state. An answered permission is not a card any more; the
+* row that survives is the tool call's own, with its status changed. Every
+* product that modelled approval as an overlay ended up with the bug where the
+* next message hides the answer.
+*
+* @example
+* import { PermissionScopes, PERMISSION_SCOPE_LABELS } from "@cueplusplus/ui/elements";
+*
+* <PermissionScopes
+*   question="Run this command?"
+*   subject="cue-cli"
+*   input='cue patch --universe 3 --fixtures 6'
+*   rules={["Bash(cue patch:*)"]}
+*   scopes={[
+*     { id: "session", label: PERMISSION_SCOPE_LABELS.session, writes: "Not saved. Gone when this run ends." },
+*     { id: "project", label: PERMISSION_SCOPE_LABELS.project, writes: "Saves to .cue/settings.local.json (gitignored)" },
+*   ]}
+*   scope={scope}
+*   onScopeChange={setScope}
+*   onAllowOnce={() => allow()}
+*   onAlwaysAllow={(id) => remember(id)}
+*   onDeny={() => deny()}
+* />
+* @example
+* // No scopes: the card asks, and the only answers are once and no.
+* <PermissionScopes question="Delete this file?" subject="cues/old.cue" onAllowOnce={allow} onDeny={deny} />
+*/
+const PermissionScopes = React.forwardRef(function PermissionScopes({ question, subject, input, rules = [], ruleKind = "rule", scopes = [], scope, onScopeChange, onAllowOnce, onAlwaysAllow, onDeny, labels, className, onKeyDown, ...elementProps }, ref) {
+	const copy = {
+		...PERMISSION_LABELS,
+		...labels
+	};
+	const chosen = scopes.find((entry) => entry.id === scope) ?? scopes[0];
+	const always = chosen === void 0 ? void 0 : formatAlwaysAllow({
+		rules,
+		scope: chosen.label,
+		kind: ruleKind,
+		fallback: copy.fallback
+	});
+	const answers = [];
+	if (onAllowOnce !== void 0) answers.push({
+		id: "once",
+		label: copy.allowOnce,
+		run: onAllowOnce
+	});
+	if (onAlwaysAllow !== void 0 && chosen !== void 0 && always !== void 0) answers.push({
+		id: "always",
+		label: /* @__PURE__ */ jsxs(Fragment, { children: [
+			always.lead,
+			always.scope === "" ? null : /* @__PURE__ */ jsx("span", {
+				className: "font-medium underline decoration-dotted underline-offset-2",
+				children: always.scope
+			}),
+			always.trail
+		] }),
+		run: () => onAlwaysAllow(chosen.id)
+	});
+	if (onDeny !== void 0) answers.push({
+		id: "deny",
+		label: copy.deny,
+		run: onDeny
+	});
+	const listed = rules.filter((rule) => rule.trim() !== "");
+	const namesAtMost = ruleKind === "directory" ? 1 : 2;
+	const spelled = answers.some((answer) => answer.id === "always") && listed.length > namesAtMost;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "permission-scopes",
+		"data-scope": chosen?.id,
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			if (event.key === "Escape" && onDeny !== void 0) {
+				event.preventDefault();
+				onDeny();
+				return;
+			}
+			if (event.metaKey || event.ctrlKey || event.altKey) return;
+			const at = Number.parseInt(event.key, 10);
+			const answer = Number.isNaN(at) ? void 0 : answers[at - 1];
+			if (answer === void 0) return;
+			event.preventDefault();
+			answer.run();
+		},
+		className: cn(paper, "flex w-full max-w-md flex-col gap-2.5 rounded-(--radius-overlay) p-3", className),
+		...elementProps,
+		children: [
+			/* @__PURE__ */ jsxs("p", {
+				className: "text-fg text-(length:--cue-text-body) font-bold wrap-anywhere",
+				children: [question, subject === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx("span", {
+					"data-slot": "permission-scopes-subject",
+					className: cn(mono, "font-normal"),
+					children: subject
+				})] })]
+			}),
+			input === void 0 ? null : /* @__PURE__ */ jsx("pre", {
+				"data-slot": "permission-scopes-input",
+				className: cn(field, mono, "text-fg-muted max-h-40 overflow-auto rounded-(--radius-control) px-2.5 py-2 whitespace-pre-wrap"),
+				children: input
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				"data-slot": "permission-scopes-answers",
+				className: "flex flex-col gap-1",
+				children: answers.map((answer, index) => /* @__PURE__ */ jsxs("li", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"data-answer": answer.id,
+						onClick: answer.run,
+						className: cn(answer.id === "always" ? fieldInteractive : "hover:bg-surface-2", "flex w-full items-baseline gap-1 rounded-(--radius-control) px-2 py-1.5 text-start text-(length:--cue-text-ui) outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent", answer.id === "deny" ? "text-fg-muted" : "text-fg"),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn(mono, "shrink-0 opacity-60"),
+							children: index + 1
+						}), /* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 wrap-anywhere",
+							children: answer.label
+						})]
+					}), answer.id === "always" && chosen !== void 0 ? onScopeChange !== void 0 && scopes.length > 1 ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"data-slot": "permission-scopes-destination",
+						"aria-label": `${chosen.writes}. ${copy.change}.`,
+						title: copy.change,
+						onClick: () => {
+							onScopeChange(scopes[(scopes.indexOf(chosen) + 1) % scopes.length].id);
+						},
+						className: "text-fg-subtle ms-6 self-start rounded-(--radius-control) text-start text-(length:--cue-text-ui) wrap-anywhere underline decoration-dotted underline-offset-2 outline-none hover:decoration-solid focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent",
+						children: chosen.writes
+					}) : /* @__PURE__ */ jsx("span", {
+						"data-slot": "permission-scopes-destination",
+						className: "text-fg-subtle ms-6 text-(length:--cue-text-ui) wrap-anywhere",
+						children: chosen.writes
+					}) : null]
+				}, answer.id))
+			}),
+			spelled ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn(mono, "text-fg-subtle wrap-anywhere"),
+					children: copy.rules
+				}), /* @__PURE__ */ jsx("ul", {
+					"data-slot": "permission-scopes-rules",
+					className: "flex flex-col gap-0.5",
+					children: listed.map((rule) => /* @__PURE__ */ jsxs("li", {
+						className: cn(mono, "text-fg-muted flex items-baseline gap-2 break-all"),
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "bg-surface-3 size-1 shrink-0 rounded-full"
+						}), rule]
+					}, rule))
+				})]
+			}) : null,
+			onDeny === void 0 ? null : /* @__PURE__ */ jsx("p", {
+				"data-slot": "permission-scopes-hint",
+				className: cn(mono, "text-fg-subtle wrap-anywhere"),
+				children: copy.hint
+			})
+		]
+	});
+});
+//#endregion
+export { PermissionScopes, formatAlwaysAllow };

package/dist/elements/prompt-library.d.ts

@@ -0,0 +1,43 @@
+import { ComponentProps } from "react";
+//#region src/elements/prompt-library.d.ts
+interface SavedPrompt {
+  /** Stable identity, compared against selectedId. */
+  id: string;
+  /** Prompt name, and the only field the search filters on. */
+  name: string;
+  /** The prompt text, shown in the preview below the list. */
+  body: string;
+  /** Placeholder names in the body, listed so you know what the prompt will ask for. */
+  variables: readonly string[];
+}
+/**
+ * Prompts you saved, searchable, with their variables shown before you insert one.
+ *
+ * @example
+ * import { PromptLibrary } from "@cueplusplus/ui/elements";
+ *
+ * <PromptLibrary
+ *   prompts={prompts}
+ *   query={query}
+ *   selectedId={selectedId}
+ *   onQueryChange={setQuery}
+ *   onSelect={setSelectedId}
+ *   onInsert={insert}
+ * />
+ */
+declare function PromptLibrary({ prompts, query, selectedId, onQueryChange, onSelect, onInsert, className, ...props }: Omit<ComponentProps<"div">, "children" | "prompts" | "query" | "selectedId" | "onQueryChange" | "onSelect" | "onInsert"> & {
+  /** Everything saved. Filtering happens inside against the name. */
+  prompts: readonly SavedPrompt[];
+  /** Current search text. */
+  query: string;
+  /** Which prompt is previewed below the list. */
+  selectedId: string;
+  /** Called as the search is typed. */
+  onQueryChange?: (query: string) => void;
+  /** Called when a prompt is highlighted. */
+  onSelect?: (id: string) => void;
+  /** Called on double click, to drop the prompt into the composer. */
+  onInsert?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { PromptLibrary, SavedPrompt };