@cueplusplus/ui 0.3.0 → 0.5.0

package/dist/elements/message-queue.js

@@ -0,0 +1,80 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, ghostButton, mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon, XIcon } from "lucide-react";
+//#region src/elements/message-queue.tsx
+/**
+* Turns you typed while a run was in flight, stacked and cancelable until it finishes.
+*
+* @example
+* import { MessageQueue } from "@cueplusplus/ui/elements";
+*
+* <MessageQueue
+*   running="Fix the converter and add a guard"
+*   queued={[{ id: "a", text: "Also add a changeset" }]}
+*   onCancel={(id) => drop(id)}
+* />
+*/
+function MessageQueue({ running, queued, onCancel, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "message-queue",
+		className: cn("flex w-full max-w-sm flex-col gap-2", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cn(paper, "flex items-center gap-2.5 rounded-(--radius-overlay) p-3"),
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "relative flex size-2 shrink-0",
+						children: [/* @__PURE__ */ jsx("span", { className: "absolute inline-flex size-full animate-ping rounded-full bg-stream/60 motion-reduce:hidden" }), /* @__PURE__ */ jsx("span", { className: "relative inline-flex size-2 rounded-full bg-stream" })]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-fg min-w-0 flex-1 truncate text-(length:--cue-text-body)",
+						children: running
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-subtle shrink-0"),
+						children: "running"
+					})
+				]
+			}),
+			queued.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline justify-between px-1",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle"),
+					children: [queued.length, " queued"]
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle"),
+					children: "sends when this finishes"
+				})]
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: "flex flex-col gap-1.5",
+				children: queued.map((message, index) => /* @__PURE__ */ jsxs("li", {
+					className: cn(field, "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex items-center gap-2.5 rounded-(--radius-overlay) py-2 pr-2 pl-3 duration-300"),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: cn(mono, "text-fg-subtle w-3 shrink-0 tabular-nums"),
+							children: index + 1
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-fg-muted min-w-0 flex-1 truncate text-(length:--cue-text-body)",
+							children: message.text
+						}),
+						/* @__PURE__ */ jsx(ArrowUpIcon, { className: "text-fg-subtle size-3 shrink-0" }),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": `Remove "${message.text}" from the queue`,
+							onClick: () => onCancel?.(message.id),
+							className: cn(ghostButton, "size-6 shrink-0"),
+							children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
+						})
+					]
+				}, message.id))
+			})
+		]
+	});
+}
+//#endregion
+export { MessageQueue };

package/dist/elements/message-timing.d.ts

@@ -0,0 +1,33 @@
+import { ComponentProps } from "react";
+//#region src/elements/message-timing.d.ts
+/** One measurement of a finished turn — a label and an already-formatted value. */
+interface TimingStat {
+  /** What was measured: `ttft`, `tok/s`, `cost`. Also the row's key. */
+  label: string;
+  /** The measurement, formatted by the caller. This element does no arithmetic. */
+  value: string;
+}
+/**
+ * What the turn cost: time to first token, throughput, tokens, money.
+ *
+ * @example
+ * import { MessageTiming } from "@cueplusplus/ui/elements";
+ *
+ * <MessageTiming
+ *   stats={[
+ *     { label: "ttft", value: "0.4s" },
+ *     { label: "total", value: "2.6s" },
+ *   ]}
+ * />
+ */
+declare function MessageTiming({ stats, streaming, className, ...props }: Omit<ComponentProps<"div">, "children" | "stats" | "streaming"> & {
+  /**
+   * Label and value pairs, pre-formatted. Show fewer while streaming and the full set
+   * once the turn settles.
+   */
+  stats: readonly TimingStat[];
+  /** Tints the values blue while they are still moving. */
+  streaming?: boolean;
+}): import("react").JSX.Element;
+//#endregion
+export { MessageTiming, TimingStat };

package/dist/elements/message-timing.js

@@ -0,0 +1,37 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/message-timing.tsx
+/**
+* What the turn cost: time to first token, throughput, tokens, money.
+*
+* @example
+* import { MessageTiming } from "@cueplusplus/ui/elements";
+*
+* <MessageTiming
+*   stats={[
+*     { label: "ttft", value: "0.4s" },
+*     { label: "total", value: "2.6s" },
+*   ]}
+* />
+*/
+function MessageTiming({ stats, streaming, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-timing",
+		className: cn("cue-elements-fade-in cue-elements-animate-in flex w-full max-w-sm flex-wrap items-center gap-x-3 gap-y-1 duration-500", className),
+		...props,
+		children: stats.map((stat) => /* @__PURE__ */ jsxs("span", {
+			className: "flex items-baseline gap-1",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn(mono, "text-fg-subtle"),
+				children: stat.label
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn(mono, "tabular-nums", streaming ? "text-stream" : "text-fg-muted"),
+				children: stat.value
+			})]
+		}, stat.label))
+	});
+}
+//#endregion
+export { MessageTiming };

package/dist/elements/mobile-composer.d.ts

@@ -0,0 +1,44 @@
+import { ComponentProps } from "react";
+//#region src/elements/mobile-composer.d.ts
+/**
+ * The bottom sheet: keyboard-aware, quick actions above, thumb-sized targets.
+ *
+ * @example
+ * import { MobileComposer } from "@cueplusplus/ui/elements";
+ *
+ * <MobileComposer
+ *   value={value}
+ *   keyboardOpen={keyboardOpen}
+ *   running={false}
+ *   actions={actions}
+ *   onValueChange={setValue}
+ *   onSend={send}
+ * />
+ */
+declare function MobileComposer({ value, keyboardOpen, running, actions, onAction, onAttach, onValueChange, onSend, onStop, onFocus, className, ...props }: Omit<ComponentProps<"div">, "children" | "value" | "keyboardOpen" | "running" | "actions" | "onAction" | "onAttach" | "onValueChange" | "onSend" | "onStop" | "onFocus"> & {
+  /** Current input. The field is 16px so iOS does not zoom on focus. */
+  value: string;
+  /** Collapses the quick actions and the home indicator inset when the keyboard is up. */
+  keyboardOpen: boolean;
+  /** Swaps send for stop, and suppresses Return-to-send while a run is in flight. */
+  running: boolean;
+  /** Quick actions above the field, scrolled horizontally. */
+  actions: readonly string[];
+  /**
+   * Called when a quick action is tapped. Omit it and the chips render disabled, since
+   * actions is required and the row would otherwise be inert.
+   */
+  onAction?: (action: string) => void;
+  /** Called from the attachment control. Omit it and the control renders disabled. */
+  onAttach?: () => void;
+  /** Called as the message is typed. */
+  onValueChange?: (value: string) => void;
+  /** Called to send. */
+  onSend?: () => void;
+  /** Called to stop a run in flight. */
+  onStop?: () => void;
+  /** Called when the field takes focus; drive keyboardOpen from it. */
+  onFocus?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { MobileComposer };

package/dist/elements/mobile-composer.js

@@ -0,0 +1,88 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, ghostButton, inkButton } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon, MicIcon, PlusIcon, SquareIcon } from "lucide-react";
+//#region src/elements/mobile-composer.tsx
+/**
+* The bottom sheet: keyboard-aware, quick actions above, thumb-sized targets.
+*
+* @example
+* import { MobileComposer } from "@cueplusplus/ui/elements";
+*
+* <MobileComposer
+*   value={value}
+*   keyboardOpen={keyboardOpen}
+*   running={false}
+*   actions={actions}
+*   onValueChange={setValue}
+*   onSend={send}
+* />
+*/
+function MobileComposer({ value, keyboardOpen, running, actions, onAction, onAttach, onValueChange, onSend, onStop, onFocus, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "mobile-composer",
+		className: cn("bg-bg border-border flex w-full max-w-[19rem] flex-col gap-2.5 rounded-t-(--radius-overlay) border-t px-3 pt-3", keyboardOpen ? "pb-3" : "pb-6", className),
+		...props,
+		children: [
+			!keyboardOpen && /* @__PURE__ */ jsx("div", {
+				className: "cue-elements-fade-in cue-elements-animate-in -mx-3 flex gap-1.5 overflow-x-auto px-3 pb-0.5 duration-200",
+				children: actions.map((action) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => onAction?.(action),
+					disabled: !onAction,
+					className: cn("disabled:pointer-events-none", "bg-fg/[0.06]", "text-fg-muted shrink-0 rounded-full px-3 py-1.5 text-(length:--cue-text-ui) whitespace-nowrap"),
+					children: action
+				}, action))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-end gap-2",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Add an attachment",
+						onClick: onAttach,
+						disabled: !onAttach,
+						className: cn(ghostButton, field, "size-9 shrink-0 disabled:pointer-events-none disabled:opacity-30"),
+						children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-4" })
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cn(field, "flex min-w-0 flex-1 items-center gap-2 rounded-(--radius-overlay) px-3 py-2"),
+						children: [/* @__PURE__ */ jsx("input", {
+							value,
+							onChange: (event) => onValueChange?.(event.target.value),
+							onFocus,
+							onKeyDown: (event) => {
+								if (event.key !== "Enter" || event.shiftKey) return;
+								if (event.nativeEvent.isComposing) return;
+								event.preventDefault();
+								if (!running && value !== "") onSend?.();
+							},
+							placeholder: "Message",
+							"aria-label": "Message",
+							className: "text-fg-muted placeholder:text-fg-subtle min-w-0 flex-1 bg-transparent text-(length:--cue-text-emphasis) outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent"
+						}), value === "" && /* @__PURE__ */ jsx(MicIcon, { className: "text-fg-subtle size-4 shrink-0" })]
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": running ? "Stop" : "Send",
+						onClick: running ? onStop : onSend,
+						disabled: !running && value === "",
+						className: cn(inkButton, "flex size-9 shrink-0 items-center justify-center rounded-full disabled:pointer-events-none disabled:opacity-25"),
+						children: running ? /* @__PURE__ */ jsx(SquareIcon, { className: "size-3 fill-current" }) : /* @__PURE__ */ jsx(ArrowUpIcon, { className: "size-4" })
+					})
+				]
+			}),
+			!keyboardOpen && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "bg-surface-3 mx-auto h-1 w-28 rounded-full"
+			}),
+			keyboardOpen && /* @__PURE__ */ jsx("span", {
+				className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle text-center"),
+				children: "return to send"
+			})
+		]
+	});
+}
+//#endregion
+export { MobileComposer };

package/dist/elements/model-picker.d.ts

@@ -0,0 +1,38 @@
+import { ComponentProps } from "react";
+//#region src/elements/model-picker.d.ts
+interface PickableModel {
+  /** Stable identity, compared against selectedId and reported by onSelect. */
+  id: string;
+  /** Display name of the model. */
+  name: string;
+  /** Group heading the model sits under. */
+  family: string;
+  /** Window size, pre-formatted. */
+  context: string;
+  /** Cost, pre-formatted. The element never does currency math. */
+  price: string;
+  /** Short capability chips: vision, tools, thinking. */
+  capabilities: readonly string[];
+}
+/**
+ * The full list rather than the rail: grouped by family, priced, with what each one
+ * can do.
+ *
+ * @example
+ * import { ModelPicker } from "@cueplusplus/ui/elements";
+ *
+ * <ModelPicker models={models} selectedId={selectedId} onSelect={setSelectedId} />
+ */
+declare function ModelPicker({ models, selectedId, onSelect, className, ...props }: Omit<ComponentProps<"div">, "children" | "models" | "selectedId" | "onSelect"> & {
+  /**
+   * Every model on offer. Families are derived from the entries and keep their
+   * first-seen order.
+   */
+  models: readonly PickableModel[];
+  /** Which model is active. */
+  selectedId: string;
+  /** Called when a model is picked. */
+  onSelect?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { ModelPicker, PickableModel };

package/dist/elements/model-picker.js

@@ -0,0 +1,69 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+//#region src/elements/model-picker.tsx
+/**
+* The full list rather than the rail: grouped by family, priced, with what each one
+* can do.
+*
+* @example
+* import { ModelPicker } from "@cueplusplus/ui/elements";
+*
+* <ModelPicker models={models} selectedId={selectedId} onSelect={setSelectedId} />
+*/
+function ModelPicker({ models, selectedId, onSelect, className, ...props }) {
+	const families = [...new Set(models.map((model) => model.family))];
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "model-picker",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-1 rounded-(--radius-overlay) p-2", className),
+		...props,
+		children: families.map((family) => /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn(mono, "text-fg-subtle px-2 pt-2 pb-1"),
+				children: family
+			}), models.filter((model) => model.family === family).map((model) => {
+				const selected = model.id === selectedId;
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-pressed": selected,
+					onClick: () => onSelect?.(model.id),
+					className: cn("flex items-center gap-2.5 rounded-(--radius-surface) px-2 py-2 text-start transition-colors", selected ? "bg-surface-2" : "hover:bg-surface-1"),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "flex size-3.5 shrink-0 items-center justify-center",
+							children: selected && /* @__PURE__ */ jsx(CheckIcon, { className: "cue-elements-fade-in cue-elements-zoom-in-90 cue-elements-animate-in text-fg-muted size-3.5 duration-200" })
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "flex min-w-0 flex-1 flex-col gap-1",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "truncate text-(length:--cue-text-body)",
+								children: model.name
+							}), /* @__PURE__ */ jsx("span", {
+								className: "flex flex-wrap gap-1",
+								children: model.capabilities.map((capability) => /* @__PURE__ */ jsx("span", {
+									className: cn(field, mono, "text-fg-muted rounded-(--radius-control) px-1 py-px"),
+									children: capability
+								}, capability))
+							})]
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "flex shrink-0 flex-col items-end gap-1",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: cn(mono, "text-fg-subtle tabular-nums"),
+								children: model.context
+							}), /* @__PURE__ */ jsx("span", {
+								className: cn(mono, "text-fg-subtle tabular-nums"),
+								children: model.price
+							})]
+						})
+					]
+				}, model.id);
+			})]
+		}, family))
+	});
+}
+//#endregion
+export { ModelPicker };

package/dist/elements/number-ticker.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from "react";
+//#region src/elements/number-ticker.d.ts
+/**
+ * Digits that roll into place as a count updates in real time.
+ *
+ * @example
+ * import { NumberTicker } from "@cueplusplus/ui/elements";
+ *
+ * <NumberTicker value={1284} label="tokens / sec" />
+ */
+declare function NumberTicker({ value, label, className, ...props }: Omit<ComponentProps<"div">, "children" | "value" | "label"> & {
+  /** Numeric value whose digits roll into place as it changes. */
+  value: number;
+  /** Mono caption rendered under the rolling number. */
+  label: string;
+}): import("react").JSX.Element;
+//#endregion
+export { NumberTicker };

package/dist/elements/number-ticker.js

@@ -0,0 +1,47 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/number-ticker.tsx
+function RollingDigit({ digit }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "inline-flex h-[1.15em] overflow-hidden",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "flex flex-col transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
+			style: { transform: `translateY(-${digit * 1.15}em)` },
+			children: Array.from({ length: 10 }, (_, i) => /* @__PURE__ */ jsx("span", {
+				className: "h-[1.15em] leading-[1.15]",
+				children: i
+			}, i))
+		})
+	});
+}
+/**
+* Digits that roll into place as a count updates in real time.
+*
+* @example
+* import { NumberTicker } from "@cueplusplus/ui/elements";
+*
+* <NumberTicker value={1284} label="tokens / sec" />
+*/
+function NumberTicker({ value, label, className, ...props }) {
+	const formatted = value.toLocaleString("en-US");
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "number-ticker",
+		className: cn("flex flex-col items-center gap-2.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex text-(length:--cue-text-title) font-medium tracking-tight tabular-nums",
+			"aria-label": formatted,
+			children: formatted.split("").map((char, i) => /\d/.test(char) ? /* @__PURE__ */ jsx(RollingDigit, { digit: Number(char) }, i) : /* @__PURE__ */ jsx("span", {
+				className: "h-[1.15em] leading-[1.15]",
+				children: char
+			}, i))
+		}), /* @__PURE__ */ jsx("span", {
+			className: cn(mono, "text-fg-subtle"),
+			children: label
+		})]
+	});
+}
+//#endregion
+export { NumberTicker };

package/dist/elements/onboarding.d.ts

@@ -0,0 +1,30 @@
+import { ComponentProps } from "react";
+//#region src/elements/onboarding.d.ts
+interface OnboardingStep {
+  /** Step heading. */
+  title: string;
+  /** What this step teaches, in a sentence or two. */
+  body: string;
+  /** A prompt the user could actually send. Showing beats describing. */
+  example: string;
+}
+/**
+ * First run: three moves that teach what this assistant is actually for.
+ *
+ * @example
+ * import { Onboarding } from "@cueplusplus/ui/elements";
+ *
+ * <Onboarding steps={steps} index={index} onNext={next} onSkip={skip} />
+ */
+declare function Onboarding({ steps, index, onNext, onSkip, className, ...props }: Omit<ComponentProps<"div">, "children" | "steps" | "index" | "onNext" | "onSkip"> & {
+  /** What to teach, in order. Three is usually the limit before it is skipped. */
+  steps: readonly OnboardingStep[];
+  /** Which step is showing. The final step's action reads Start instead of Next. */
+  index: number;
+  /** Called to advance. */
+  onNext?: () => void;
+  /** Called to dismiss. Always offer it. */
+  onSkip?: () => void;
+}): import("react").JSX.Element | null;
+//#endregion
+export { Onboarding, OnboardingStep };

package/dist/elements/onboarding.js

@@ -0,0 +1,75 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, inkButton, mono, paper } from "./surfaces.js";
+import { indexIn } from "./range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/onboarding.tsx
+/**
+* First run: three moves that teach what this assistant is actually for.
+*
+* @example
+* import { Onboarding } from "@cueplusplus/ui/elements";
+*
+* <Onboarding steps={steps} index={index} onNext={next} onSkip={skip} />
+*/
+function Onboarding({ steps, index, onNext, onSkip, className, ...props }) {
+	const current = indexIn(steps, index);
+	const step = steps[current];
+	if (!step) return null;
+	const last = current >= steps.length - 1;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "onboarding",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-4 rounded-(--radius-overlay) p-5", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "cue-elements-fade-in cue-elements-animate-in flex flex-col gap-2 duration-300",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "text-fg-subtle tabular-nums"),
+					children: [
+						current + 1,
+						" of ",
+						steps.length
+					]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-(length:--cue-text-emphasis) font-medium tracking-tight",
+					children: step.title
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-fg-muted text-(length:--cue-text-body) leading-relaxed break-words",
+					children: step.body
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cn(field, "text-fg-muted rounded-(--radius-surface) px-3 py-2 text-(length:--cue-text-body) leading-relaxed"),
+					children: step.example
+				})
+			]
+		}, current), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "flex gap-1.5",
+					children: steps.map((_, i) => /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cn("h-1 rounded-full transition-all duration-300 motion-reduce:transition-none", i === current ? "bg-accent w-4" : "bg-surface-3 w-1")
+					}, i))
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onSkip,
+					className: "text-fg-muted hover:bg-surface-2 hover:text-fg ms-auto 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: "Skip"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onNext,
+					className: cn(inkButton, "flex h-8 items-center rounded-full px-3.5 text-(length:--cue-text-ui) font-medium"),
+					children: last ? "Start" : "Next"
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { Onboarding };

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

@@ -0,0 +1,35 @@
+import { ComponentProps } from "react";
+//#region src/elements/permission-grant.d.ts
+/**
+ * How far a granted permission reaches — this session, every session, or nowhere. The
+ * prop that carries it also accepts `pending`, before the user has answered.
+ */
+type GrantScope = "session" | "always" | "denied";
+/**
+ * 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}
+ * />
+ */
+declare function PermissionGrant({ capability, requester, reach, scope, onGrant, className, ...props }: Omit<ComponentProps<"div">, "children" | "capability" | "requester" | "reach" | "scope" | "onGrant"> & {
+  /** What is being granted, named as a capability rather than an action. */
+  capability: string;
+  /** Who is asking. */
+  requester: string;
+  /** Exactly what the grant covers, and what it does not. Write the limits in too. */
+  reach: readonly string[];
+  /** pending shows the choices; anything else shows the settled outcome. */
+  scope: GrantScope | "pending";
+  /** Called with the scope the user chose. */
+  onGrant?: (scope: GrantScope) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { GrantScope, PermissionGrant };