@cueplusplus/ui 0.13.0

package/dist/elements/generative.d.ts

@@ -0,0 +1,144 @@
+import { AgentFidelity, AgentSkin } from "../system/agent-skin.js";
+import { ChartSeries, GENERATIVE_TYPES, GenerativeAction, GenerativeFault, GenerativeFaultKind, GenerativeNode, GenerativeTypeName, TableColumn, isGenerativeType } from "./generative/spec.js";
+import { GENERATIVE_ICONS, GenerativeIconName, isGenerativeIcon } from "./generative/icons.js";
+import * as React from "react";
+//#region src/elements/generative.d.ts
+/**
+ * How many levels deep the renderer will walk before it stops and draws a
+ * notice.
+ *
+ * A cap rather than a recursion guard, and a documented one, because the number
+ * is a statement about the vocabulary rather than about the stack: a composed
+ * dashboard is six or seven levels, an ambitious one is a dozen, and nothing a
+ * person would want to look at is thirty-two. A spec deeper than this is a
+ * runaway generation or a cycle that survived serialization, and drawing the
+ * first 32 levels of it is more useful than drawing none.
+ */
+declare const GENERATIVE_MAX_DEPTH = 32;
+interface GenerativeUIProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /**
+   * The tree to draw, exactly as it arrived.
+   *
+   * Typed `unknown` rather than `GenerativeNode` on purpose. A caller who has
+   * just parsed a tool result holds a `JSON.parse` return, and a signature that
+   * demanded a node would push every consumer into the same cast — which is a
+   * claim about the bytes that nobody is in a position to make. The renderer
+   * reads what it was given and reports what it could not use.
+   */
+  spec: unknown;
+  /**
+   * Where a control's press goes: a button, a form submit, a list row, a
+   * checkbox, a card's confirm.
+   *
+   * Called with the `$action` string the model put on the node, the intrinsic
+   * that fired it, and — where the control has one — its own value. Omit it and
+   * every control is inert, which is the right default for a transcript that is
+   * being re-read rather than used.
+   */
+  onAction?: (action: GenerativeAction) => void;
+  /**
+   * Told about every node the renderer refused to guess at, after the render
+   * that refused it.
+   *
+   * The counterpart of never throwing. A fallback is legible on screen, but the
+   * person who needs to know that this console is a version behind the model
+   * driving it is usually not the person looking at it — so the faults are also
+   * a stream, one call per refusal, suitable for a counter or a log line.
+   */
+  onFault?: (fault: GenerativeFault) => void;
+  /**
+   * Turns a `Markdown` node's source into elements.
+   *
+   * Without it the source renders verbatim, as characters, because this subpath
+   * ships no parser and will not acquire one: `@cueplusplus/ui/elements/markdown`
+   * is the sanitized renderer this prop is shaped for, and it carries two peers
+   * that a console drawing a weather card should not have to install.
+   *
+   * ```tsx
+   * import { MarkdownText } from "@cueplusplus/ui/elements/markdown";
+   *
+   * <GenerativeUI spec={spec} renderMarkdown={(md) => <MarkdownText>{md}</MarkdownText>} />
+   * ```
+   */
+  renderMarkdown?: (value: string) => React.ReactNode;
+  /**
+   * How many levels to walk before drawing the depth notice. Defaults to
+   * {@link GENERATIVE_MAX_DEPTH}; anything below one level is read as one,
+   * since a tree with no levels is not a tree.
+   */
+  maxDepth?: number;
+  /**
+   * Which value-set paints this tree: `cue` (the default) or `aui`, which
+   * installs assistant-ui's own surface language. Leave it off inside an
+   * {@link AgentSurface}, which has stamped the subtree already.
+   */
+  skin?: AgentSkin;
+  /**
+   * Whether the density knobs follow cue's ladder (`cue-metrics`, the default)
+   * or pin assistant-ui's own numbers (`upstream`).
+   */
+  fidelity?: AgentFidelity;
+}
+/**
+ * The vocabulary a model composes at runtime.
+ *
+ * Every other component in this library is handed props by a programmer, and a
+ * wrong one costs a type error at the call site. This one is handed a tree by a
+ * language model over a network, so its whole contract is what it does with
+ * input nobody checked. A model emits JSON — 27 intrinsic names, nested — and
+ * `GenerativeUI` turns it into elements. There is no compile step between the
+ * two and there cannot be one.
+ *
+ * That reverses the usual priorities. The interesting question is not what a
+ * correct spec renders as, it is what an incorrect one does, and the answer is
+ * three-fold and never an exception:
+ *
+ * - a `$type` from a newer catalogue draws an in-place notice and its siblings
+ *   still render;
+ * - a spec that is not a component tree at all draws a legible error state,
+ *   never a blank box that looks like a message still streaming;
+ * - a tree nested deeper than {@link GENERATIVE_MAX_DEPTH} stops and says so,
+ *   rather than exhausting the stack and taking the console with it.
+ *
+ * The root is a plain `<div data-slot="generative-ui" data-aui="root">` and it
+ * is always there: an unreadable spec draws the error state *inside* it rather
+ * than instead of it, so a caller's layout, `className` and ref hold whatever
+ * the model sent.
+ *
+ * ## Why it is not Tailwind
+ *
+ * The stylesheet is plain `[data-aui]` CSS, and the tree it draws carries no
+ * `class` attribute anywhere. That is upstream's arrangement and it is worth
+ * keeping precisely: a widget a model composed has to draw inside whatever
+ * console it was sent to, and a console is very often somebody else's app with
+ * no utility framework, no shadcn and no design system of its own. The
+ * consequence runs all the way down — the icons are hand-drawn rather than
+ * `lucide-react`, the chart is 300 lines of SVG rather than `recharts`, and
+ * `./elements/generative` declares no optional peer at all. There is no package
+ * in the tree whose absence turns a weather card into a stack trace.
+ *
+ * ```tsx
+ * import { GenerativeUI } from "@cueplusplus/ui/elements/generative";
+ * import "@cueplusplus/ui/elements/generative.css";
+ * ```
+ *
+ * ## Two skins
+ *
+ * `skin` and `fidelity` are the same two axes {@link AgentSurface} publishes,
+ * and for the same reason: the vocabulary has cue's values by default and
+ * assistant-ui's under `skin="aui"`, which is upstream's own
+ * `data-aui-theme="elements"` layer — a 20px card, a borderless 12px field, a
+ * pill button. Pass them here when the tree is its own island; leave them off
+ * inside an `AgentSurface`, which has already stamped the subtree and whose
+ * values inherit through CSS with nothing threaded.
+ *
+ * @example
+ * <GenerativeUI
+ *   spec={JSON.parse(toolResult)}
+ *   onAction={(action) => send({ type: "ui-action", ...action })}
+ *   onFault={(fault) => telemetry.warn("generative", fault)}
+ * />
+ */
+declare const GenerativeUI: React.ForwardRefExoticComponent<GenerativeUIProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { type ChartSeries, GENERATIVE_ICONS, GENERATIVE_MAX_DEPTH, GENERATIVE_TYPES, type GenerativeAction, type GenerativeFault, type GenerativeFaultKind, type GenerativeIconName, type GenerativeNode, type GenerativeTypeName, GenerativeUI, GenerativeUIProps, type TableColumn, isGenerativeIcon, isGenerativeType };

package/dist/elements/generative.js

@@ -0,0 +1,126 @@
+"use client";
+import { GenerativeBoundary, GenerativeError } from "./generative/faults.js";
+import { GENERATIVE_TYPES, describe, isGenerativeType, isNode } from "./generative/spec.js";
+import { GENERATIVE_ICONS, isGenerativeIcon } from "./generative/icons.js";
+import { renderValue } from "./generative/intrinsics.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/elements/generative.tsx
+/**
+* How many levels deep the renderer will walk before it stops and draws a
+* notice.
+*
+* A cap rather than a recursion guard, and a documented one, because the number
+* is a statement about the vocabulary rather than about the stack: a composed
+* dashboard is six or seven levels, an ambitious one is a dozen, and nothing a
+* person would want to look at is thirty-two. A spec deeper than this is a
+* runaway generation or a cycle that survived serialization, and drawing the
+* first 32 levels of it is more useful than drawing none.
+*/
+const GENERATIVE_MAX_DEPTH = 32;
+/**
+* The walk, in a component of its own so a boundary can sit above it.
+*
+* This split is not organisation, it is the only arrangement that works: React
+* error boundaries catch what their *children* throw, and a walk that ran in
+* `GenerativeUI`'s own render would throw in the same render that mounts the
+* boundary, where the boundary can never see it. So the recursion lives one
+* component down and {@link GenerativeBoundary} sits between.
+*/
+function GenerativeTree({ spec, onAction, onFault, renderMarkdown, maxDepth }) {
+	const faults = [];
+	const tree = isNode(spec) ? renderValue(spec, "root", 1, {
+		onAction,
+		renderMarkdown,
+		maxDepth,
+		faults
+	}) : /* @__PURE__ */ jsx(GenerativeError, { detail: `The response was ${describe(spec)}, which is not a component tree this surface can draw.` });
+	const latest = React.useRef(faults);
+	latest.current = faults;
+	const signature = faults.map((fault) => `${fault.kind}@${fault.path}`).join("|");
+	React.useEffect(() => {
+		if (onFault === void 0) return;
+		for (const fault of latest.current) onFault(fault);
+	}, [signature, onFault]);
+	return tree;
+}
+/**
+* The vocabulary a model composes at runtime.
+*
+* Every other component in this library is handed props by a programmer, and a
+* wrong one costs a type error at the call site. This one is handed a tree by a
+* language model over a network, so its whole contract is what it does with
+* input nobody checked. A model emits JSON — 27 intrinsic names, nested — and
+* `GenerativeUI` turns it into elements. There is no compile step between the
+* two and there cannot be one.
+*
+* That reverses the usual priorities. The interesting question is not what a
+* correct spec renders as, it is what an incorrect one does, and the answer is
+* three-fold and never an exception:
+*
+* - a `$type` from a newer catalogue draws an in-place notice and its siblings
+*   still render;
+* - a spec that is not a component tree at all draws a legible error state,
+*   never a blank box that looks like a message still streaming;
+* - a tree nested deeper than {@link GENERATIVE_MAX_DEPTH} stops and says so,
+*   rather than exhausting the stack and taking the console with it.
+*
+* The root is a plain `<div data-slot="generative-ui" data-aui="root">` and it
+* is always there: an unreadable spec draws the error state *inside* it rather
+* than instead of it, so a caller's layout, `className` and ref hold whatever
+* the model sent.
+*
+* ## Why it is not Tailwind
+*
+* The stylesheet is plain `[data-aui]` CSS, and the tree it draws carries no
+* `class` attribute anywhere. That is upstream's arrangement and it is worth
+* keeping precisely: a widget a model composed has to draw inside whatever
+* console it was sent to, and a console is very often somebody else's app with
+* no utility framework, no shadcn and no design system of its own. The
+* consequence runs all the way down — the icons are hand-drawn rather than
+* `lucide-react`, the chart is 300 lines of SVG rather than `recharts`, and
+* `./elements/generative` declares no optional peer at all. There is no package
+* in the tree whose absence turns a weather card into a stack trace.
+*
+* ```tsx
+* import { GenerativeUI } from "@cueplusplus/ui/elements/generative";
+* import "@cueplusplus/ui/elements/generative.css";
+* ```
+*
+* ## Two skins
+*
+* `skin` and `fidelity` are the same two axes {@link AgentSurface} publishes,
+* and for the same reason: the vocabulary has cue's values by default and
+* assistant-ui's under `skin="aui"`, which is upstream's own
+* `data-aui-theme="elements"` layer — a 20px card, a borderless 12px field, a
+* pill button. Pass them here when the tree is its own island; leave them off
+* inside an `AgentSurface`, which has already stamped the subtree and whose
+* values inherit through CSS with nothing threaded.
+*
+* @example
+* <GenerativeUI
+*   spec={JSON.parse(toolResult)}
+*   onAction={(action) => send({ type: "ui-action", ...action })}
+*   onFault={(fault) => telemetry.warn("generative", fault)}
+* />
+*/
+const GenerativeUI = React.forwardRef(function GenerativeUI({ spec, onAction, onFault, renderMarkdown, maxDepth, skin, fidelity, ...elementProps }, ref) {
+	const cap = maxDepth === void 0 || !Number.isFinite(maxDepth) ? 32 : Math.max(1, Math.floor(maxDepth));
+	return /* @__PURE__ */ jsx("div", {
+		...elementProps,
+		ref,
+		"data-slot": "generative-ui",
+		"data-aui": "root",
+		"data-cue-skin": skin,
+		"data-cue-fidelity": fidelity,
+		children: /* @__PURE__ */ jsx(GenerativeBoundary, { children: /* @__PURE__ */ jsx(GenerativeTree, {
+			spec,
+			onAction,
+			onFault,
+			renderMarkdown,
+			maxDepth: cap
+		}) })
+	});
+});
+//#endregion
+export { GENERATIVE_ICONS, GENERATIVE_MAX_DEPTH, GENERATIVE_TYPES, GenerativeUI, isGenerativeIcon, isGenerativeType };

package/dist/elements/guardrail-notice.d.ts

@@ -0,0 +1,29 @@
+import { ComponentProps } from "react";
+//#region src/elements/guardrail-notice.d.ts
+/**
+ * A refusal in its own shape, with the nearest thing it can do instead.
+ *
+ * @example
+ * import { GuardrailNotice } from "@cueplusplus/ui/elements";
+ *
+ * <GuardrailNotice
+ *   title="I can't help with that"
+ *   explanation="This asks for a working attack against infrastructure you don't own."
+ *   policy="policy"
+ *   alternatives={alternatives}
+ * />
+ */
+declare function GuardrailNotice({ title, explanation, policy, alternatives, onPick, className, ...props }: Omit<ComponentProps<"div">, "children" | "title" | "explanation" | "policy" | "alternatives" | "onPick"> & {
+  /** The refusal in one line, stated plainly rather than apologetically. */
+  title: string;
+  /** Why, and where the line actually sits. */
+  explanation: string;
+  /** Short label for the rule that applied. */
+  policy: string;
+  /** The nearest things it can do. Pass an empty array to hide the section. */
+  alternatives: readonly string[];
+  /** Called when an alternative is chosen. */
+  onPick?: (alternative: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { GuardrailNotice };

package/dist/elements/guardrail-notice.js

@@ -0,0 +1,63 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ShieldIcon } from "lucide-react";
+//#region src/elements/guardrail-notice.tsx
+/**
+* A refusal in its own shape, with the nearest thing it can do instead.
+*
+* @example
+* import { GuardrailNotice } from "@cueplusplus/ui/elements";
+*
+* <GuardrailNotice
+*   title="I can't help with that"
+*   explanation="This asks for a working attack against infrastructure you don't own."
+*   policy="policy"
+*   alternatives={alternatives}
+* />
+*/
+function GuardrailNotice({ title, explanation, policy, alternatives, onPick, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "guardrail-notice",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-(--radius-overlay) p-4", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2.5",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "flex size-7 shrink-0 items-center justify-center rounded-(--radius-surface) bg-warn/12 text-warn",
+						children: /* @__PURE__ */ jsx(ShieldIcon, { className: "size-3.5" })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate text-(length:--cue-text-body) font-medium",
+						children: title
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-subtle shrink-0"),
+						children: policy
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-fg-muted text-(length:--cue-text-ui) leading-(--cue-leading-ui)",
+				children: explanation
+			}),
+			alternatives.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle"),
+					children: "try instead"
+				}), alternatives.map((alternative) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => onPick?.(alternative),
+					className: "hover:bg-surface-1 text-fg-muted hover:text-fg -mx-1.5 rounded-(--radius-surface) px-1.5 py-1 text-start text-(length:--cue-text-body) transition-colors",
+					children: alternative
+				}, alternative))]
+			})
+		]
+	});
+}
+//#endregion
+export { GuardrailNotice };

package/dist/elements/image-generation.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from "react";
+//#region src/elements/image-generation.d.ts
+/**
+ * A dot grid holds the frame while the image resolves out of a blur.
+ *
+ * @example
+ * import { ImageGeneration } from "@cueplusplus/ui/elements";
+ *
+ * <ImageGeneration prompt="A calm blue abstract" generating={false} />
+ */
+declare function ImageGeneration({ prompt, generating, className, ...props }: Omit<ComponentProps<"div">, "children" | "prompt" | "generating"> & {
+  /** Prompt text shown under the image frame. */
+  prompt: string;
+  /** When true the frame holds a pulsing dot grid; otherwise the image resolves. */
+  generating: boolean;
+}): import("react").JSX.Element;
+//#endregion
+export { ImageGeneration };

package/dist/elements/image-generation.js

@@ -0,0 +1,64 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ShimmerLabel, ghostButton, mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RefreshCwIcon } from "lucide-react";
+//#region src/elements/image-generation.tsx
+const DOTS = Array.from({ length: 64 }, (_, i) => i);
+/**
+* A dot grid holds the frame while the image resolves out of a blur.
+*
+* @example
+* import { ImageGeneration } from "@cueplusplus/ui/elements";
+*
+* <ImageGeneration prompt="A calm blue abstract" generating={false} />
+*/
+function ImageGeneration({ prompt, generating, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "image-generation",
+		className: cn("flex w-52 flex-col gap-2.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn(paper, "relative aspect-square w-full overflow-hidden rounded-(--radius-overlay)"),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute inset-0 grid grid-cols-8 place-items-center p-6",
+					"aria-hidden": true,
+					children: DOTS.map((dot) => {
+						const row = Math.floor(dot / 8);
+						const col = dot % 8;
+						return /* @__PURE__ */ jsx("span", {
+							className: cn("bg-surface-3 size-1 rounded-full transition-opacity duration-500", generating ? "animate-pulse motion-reduce:animate-none" : "opacity-0"),
+							style: { animationDelay: `${(row + col) * 90}ms` }
+						}, dot);
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"aria-hidden": true,
+					className: cn("absolute inset-0 transition-[opacity,filter] duration-1000 ease-out motion-reduce:transition-none", generating ? "opacity-0 blur-xl" : "blur-none opacity-100"),
+					style: { background: "radial-gradient(120% 90% at 20% 100%, oklch(0.45 0.09 265) 0%, transparent 55%), radial-gradient(110% 80% at 85% 90%, oklch(0.62 0.1 300 / 0.8) 0%, transparent 60%), radial-gradient(130% 100% at 60% 0%, oklch(0.88 0.06 60) 0%, oklch(0.74 0.09 25 / 0.9) 45%, transparent 75%), linear-gradient(to top, oklch(0.35 0.06 275), oklch(0.82 0.07 50))" }
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cn(mono, "absolute end-2.5 top-2.5 tabular-nums", generating ? "text-fg-subtle" : "text-accent-fg"),
+					children: "1024 × 1024"
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-2",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-fg-muted min-w-0 flex-1 truncate text-(length:--cue-text-ui)",
+				children: generating ? /* @__PURE__ */ jsx(ShimmerLabel, {
+					className: "relative",
+					children: "Generating"
+				}) : prompt
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Regenerate image",
+				className: cn(ghostButton, "size-6 shrink-0", generating && "pointer-events-none opacity-0"),
+				children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: "size-3" })
+			})]
+		})]
+	});
+}
+//#endregion
+export { ImageGeneration };

package/dist/elements/index.d.ts

@@ -0,0 +1,116 @@
+import { AgentFidelity, AgentSkin } from "../system/agent-skin.js";
+import { ActivityGraph } from "./activity-graph.js";
+import { AgentCard, AgentSkill } from "./agent-card.js";
+import { AgentHandoff } from "./agent-handoff.js";
+import { AGENT_MODES, AGENT_MODE_DESCRIPTIONS, AGENT_MODE_LABELS, ANNOUNCEMENTS, AgentMode, Announcements, CLAMP_LABELS, COMPACTION_LABELS, COMPACTION_STATES, CONTEXT_CATEGORY_LABELS, CONTEXT_LABELS, CONTEXT_STAT_LABELS, ClampLabels, CompactionState, ContextLabels, PERMISSION_LABELS, PERMISSION_SCOPE_LABELS, PermissionLabels, QUEUE_LABELS, QueueLabels, REVERT_LABELS, REVERT_SCOPES, REVERT_SCOPE_DESCRIPTIONS, REVERT_SCOPE_LABELS, RISK_LABELS, RevertLabels, RevertScope, SECURITY_RISKS, SecurityRisk, TAIL_ACTIONS, TURN_ACTION_LABELS, TailAction, TurnActionLabels, VERB_TRIADS, VERDICT_LABELS, VerbKind, VerbTense, VerbTriad, VerdictLabels, verbFor } from "./vocabulary.js";
+import { AgentModeBadge, AgentModeBadgeProps } from "./agent-mode-badge.js";
+import { AgentPlan } from "./agent-plan.js";
+import { AgentState, AgentStatus, StatusStep } from "./agent-status.js";
+import { AgentSurface, AgentSurfaceProps } from "./agent-surface.js";
+import { AnimatedNumber, AnimatedNumberProps, formatCompactNumber } from "./animated-number.js";
+import { ApprovalCard, ApprovalState } from "./approval-card.js";
+import { ArtifactCard } from "./artifact-card.js";
+import { BackgroundInbox, BackgroundRun, BackgroundState } from "./background-inbox.js";
+import { CanvasSplit, CanvasSplitBody, CanvasSplitDocument, CanvasSplitHeader, CanvasSplitLine, CanvasSplitMessage, CanvasSplitThread } from "./canvas-split.js";
+import { Chart, ChartVariant } from "./chart.js";
+import { ChatPanel, ChatPanelAssistantMessage, ChatPanelComposer, ChatPanelMessages, ChatPanelTyping, ChatPanelUserMessage } from "./chat-panel.js";
+import { Checkpoint, CheckpointHistory } from "./checkpoint-history.js";
+import { Clamp, ClampProps } from "./clamp.js";
+import { CodeDiff, DiffKind, DiffLine } from "./code-diff.js";
+import { CodeRunner, RunState } from "./code-runner.js";
+import { ElementsCommandPalette, PaletteCommand } from "./command-palette.js";
+import { CompactionRow, CompactionRowProps } from "./compaction-row.js";
+import { ComparisonCard, ComparisonOption } from "./comparison-card.js";
+import { ComposerActions, ComposerAttachButton, ComposerAttachment, ComposerAttachmentChip, ComposerAttachments, ComposerBar, ComposerCommand, ComposerCommandItem, ComposerContext, ComposerInput, ComposerMenu, ComposerMenuItem, ComposerModel, ComposerModelItem, ComposerModelTrigger, ComposerPerson, ComposerPersonItem, ComposerSend, ComposerToolbar, ComposerUsage, ComposerVoice, ComposerVoiceButton, ElementsComposer, applyMention, useMentionMatches, useSlashMatches } from "./composer.js";
+import { ComputerStep, ComputerUse } from "./computer-use.js";
+import { Confidence, ConfidenceClaim, ConfidenceMarker } from "./confidence-marker.js";
+import { ConnectionPhase, ConnectionState } from "./connection-state.js";
+import { ContextBreakdown, ContextSegment } from "./context-breakdown.js";
+import { ContextCategory, ContextStat, ContextTone, ContextUsage, ContextUsageProps } from "./context-usage.js";
+import { ConversationSearch, SearchHit } from "./conversation-search.js";
+import { CostLine, CostMeter } from "./cost-meter.js";
+import { DataTableProps, ElementsDataTable, ModelUsage } from "./data-table.js";
+import { DatedMessage, DaySeparator } from "./day-separator.js";
+import { Diagram } from "./diagram.js";
+import { DocumentAnchor, DocumentReference } from "./document-reference.js";
+import { DraftRestore } from "./draft-restore.js";
+import { EditMessage } from "./edit-message.js";
+import { ElicitationField, ElicitationForm, ElicitationState } from "./elicitation-form.js";
+import { ChatEmptyState, EmptyStateComposer, EmptyStateGreeting, EmptyStateSuggestion, EmptyStateSuggestions } from "./empty-state.js";
+import { ChangeSummary, EndOfTurnSummary, EndOfTurnSummaryProps, formatChangeSummary } from "./end-of-turn-summary.js";
+import { ErrorState, ErrorStateProps } from "./error-state.js";
+import { FeedbackDialog } from "./feedback-dialog.js";
+import { FileTree, FileTreeNode } from "./file-tree.js";
+import { FlowEdge, FlowGraph, FlowNode, FlowNodeState } from "./flow-graph.js";
+import { GuardrailNotice } from "./guardrail-notice.js";
+import { ImageGeneration } from "./image-generation.js";
+import { CitationSource, InlineCitation, InlineCitationProps } from "./inline-citation.js";
+import { JobProgress, JobStage } from "./job-progress.js";
+import { LauncherBubble } from "./launcher-bubble.js";
+import { LiveRegionAnnouncer, LiveRegionAnnouncerProps, useAnnouncerPresent } from "./live-region-announcer.js";
+import { GenerationLoader, GenerationLoaderProps, GenerationLoaderVariant } from "./loading-state.js";
+import { MapAnswer, MapPin } from "./map-answer.js";
+import { Frac, MathBlock, MathStep, Sub, Sup } from "./math-block.js";
+import { McpServer, McpServerPanel, McpServerStatus } from "./mcp-server-panel.js";
+import { MemoryChange, MemoryChip, MemoryChips } from "./memory-chips.js";
+import { MessageActions, MessageActionsProps, Reaction } from "./message-actions.js";
+import { MessageAttachmentItem, MessageAttachments } from "./message-attachment.js";
+import { MessageBranches, MessageBranchesProps } from "./message-branches.js";
+import { MessagePair, MessagePairProps } from "./message-pair.js";
+import { MessageQueue, QueuedMessage } from "./message-queue.js";
+import { MessageTiming, TimingStat } from "./message-timing.js";
+import { MobileComposer } from "./mobile-composer.js";
+import { ModelPicker, PickableModel } from "./model-picker.js";
+import { NumberTicker } from "./number-ticker.js";
+import { Onboarding, OnboardingStep } from "./onboarding.js";
+import { GrantScope, PermissionGrant } from "./permission-grant.js";
+import { AlwaysAllowInput, AlwaysAllowLabel, PermissionScope, PermissionScopes, PermissionScopesProps, formatAlwaysAllow } from "./permission-scopes.js";
+import { PromptLibrary, SavedPrompt } from "./prompt-library.js";
+import { QueueDock, QueueDockProps, QueuedFollowUp, formatQueueSummary } from "./queue-dock.js";
+import { QuotaBanner } from "./quota-banner.js";
+import { QuoteAction, QuoteReply } from "./quote-reply.js";
+import { at, clamp, indexIn, pct, progressOf, take } from "./range.js";
+import { ReadAloud } from "./read-aloud.js";
+import { EffortLevel, ReasoningEffort } from "./reasoning-effort.js";
+import { ReasoningPanel, ReasoningPanelProps, ReasoningStep } from "./reasoning-panel.js";
+import { RecommendationCard, RecommendationState } from "./recommendation-card.js";
+import { RegenerateMenu, RegenerateOption } from "./regenerate-menu.js";
+import { ReportSection, ResearchReport, SectionState } from "./research-report.js";
+import { RetrievalChunk, RetrievalChunks } from "./retrieval-chunks.js";
+import { RevertDock, RevertDockProps, RevertReach, formatRevertSummary } from "./revert-dock.js";
+import { DiffHunk, HunkDecision, ReviewableDiff } from "./reviewable-diff.js";
+import { RiskBadge, RiskBadgeProps } from "./risk-badge.js";
+import { ScheduleCard, ScheduleRun } from "./schedule-card.js";
+import { ScoreBreakdown, ScoreCriterion } from "./score-breakdown.js";
+import { ScrollAnchor, ScrollAnchorMessage } from "./scroll-anchor.js";
+import { SettingToggle, SettingsPanel } from "./settings-panel.js";
+import { SharedConversation, SharedTurn } from "./shared-conversation.js";
+import { Source, Sources, SourcesProps } from "./sources.js";
+import { SpeakerIdentity, SpeakerKind, SpeakerTurn } from "./speaker-identity.js";
+import { SpecRow, SpecSheet } from "./spec-sheet.js";
+import { StoppedRun } from "./stopped-run.js";
+import { Segment, StreamingText } from "./streaming-text.js";
+import { SubagentItem, SubagentList } from "./subagent-list.js";
+import { Suggestions, SuggestionsProps } from "./suggestions.js";
+import { ShimmerLabel, SwapLabel, codeScroll, codeSurface, collapsePanel, field, fieldInteractive, floating, ghostButton, iconSwap, iconSwapIn, iconSwapOut, inkButton, labelSwap, labelSwapIn, labelSwapOut, live, mono, paper, pressable } from "./surfaces.js";
+import { TailPriority, TailStatus, TailStatusProps } from "./tail-status.js";
+import { TerminalBlock } from "./terminal-block.js";
+import { ThinkingIndicator } from "./thinking-indicator.js";
+import { ThreadItem, ThreadList } from "./thread-list.js";
+import { SearchableThread, ThreadSearch } from "./thread-search.js";
+import { ElementsTimeline, TimelineEvent, TimelineWhen } from "./timeline.js";
+import { TodoItem, TodoList, TodoStatus } from "./todo-list.js";
+import { ToolCall, ToolCallProps } from "./tool-call.js";
+import { ToolError } from "./tool-error.js";
+import { GroupedTool, GroupedToolState, ToolGroup } from "./tool-group.js";
+import { TimelineStat, TimelineStep, ToolTimeline, ToolTimelineProps } from "./tool-timeline.js";
+import { SpanStatus, TraceSpan, TraceWaterfall } from "./trace-waterfall.js";
+import { TimeBoundary, TimeBoundaryProps, UnreadDivider, UnreadDividerProps } from "./transcript-rules.js";
+import { TurnFooter, TurnFooterProps, TurnTimestamp } from "./turn-footer.js";
+import { TypingIndicator } from "./typing-indicator.js";
+import { VerdictIssue, VerdictRow, VerdictRowProps, VerdictTone, verdictStars } from "./verdict-row.js";
+import { VoiceConversation, VoiceMode, VoiceTurn } from "./voice-conversation.js";
+import { WebPreview } from "./web-preview.js";
+import { WebSearch, WebSearchResult } from "./web-search.js";
+import { WorkCollapse, WorkCollapseProps, WorkSummary, formatWorkDuration, formatWorkLabel } from "./work-collapse.js";
+export { AGENT_MODES, AGENT_MODE_DESCRIPTIONS, AGENT_MODE_LABELS, ANNOUNCEMENTS, ActivityGraph, AgentCard, type AgentFidelity, AgentHandoff, type AgentMode, AgentModeBadge, type AgentModeBadgeProps, AgentPlan, type AgentSkill, type AgentSkin, type AgentState, AgentStatus, AgentSurface, type AgentSurfaceProps, type AlwaysAllowInput, type AlwaysAllowLabel, AnimatedNumber, type AnimatedNumberProps, type Announcements, ApprovalCard, type ApprovalState, ArtifactCard, BackgroundInbox, type BackgroundRun, type BackgroundState, CLAMP_LABELS, COMPACTION_LABELS, COMPACTION_STATES, CONTEXT_CATEGORY_LABELS, CONTEXT_LABELS, CONTEXT_STAT_LABELS, CanvasSplit, CanvasSplitBody, CanvasSplitDocument, CanvasSplitHeader, CanvasSplitLine, CanvasSplitMessage, CanvasSplitThread, type ChangeSummary, Chart, type ChartVariant, ChatEmptyState, ChatPanel, ChatPanelAssistantMessage, ChatPanelComposer, ChatPanelMessages, ChatPanelTyping, ChatPanelUserMessage, type Checkpoint, CheckpointHistory, type CitationSource, Clamp, type ClampLabels, type ClampProps, CodeDiff, CodeRunner, CompactionRow, type CompactionRowProps, type CompactionState, ComparisonCard, type ComparisonOption, ComposerActions, ComposerAttachButton, type ComposerAttachment, ComposerAttachmentChip, ComposerAttachments, ComposerBar, type ComposerCommand, ComposerCommandItem, ComposerContext, ComposerInput, ComposerMenu, ComposerMenuItem, type ComposerModel, ComposerModelItem, ComposerModelTrigger, type ComposerPerson, ComposerPersonItem, ComposerSend, ComposerToolbar, type ComposerUsage, ComposerVoice, ComposerVoiceButton, type ComputerStep, ComputerUse, type Confidence, type ConfidenceClaim, ConfidenceMarker, type ConnectionPhase, ConnectionState, ContextBreakdown, type ContextCategory, type ContextLabels, type ContextSegment, type ContextStat, type ContextTone, ContextUsage, type ContextUsageProps, ConversationSearch, type CostLine, CostMeter, type DataTableProps, type DatedMessage, DaySeparator, Diagram, type DiffHunk, type DiffKind, type DiffLine, type DocumentAnchor, DocumentReference, DraftRestore, EditMessage, type EffortLevel, ElementsCommandPalette, ElementsComposer, ElementsDataTable, ElementsTimeline, type ElicitationField, ElicitationForm, type ElicitationState, EmptyStateComposer, EmptyStateGreeting, EmptyStateSuggestion, EmptyStateSuggestions, EndOfTurnSummary, type EndOfTurnSummaryProps, ErrorState, type ErrorStateProps, FeedbackDialog, FileTree, type FileTreeNode, type FlowEdge, FlowGraph, type FlowNode, type FlowNodeState, Frac, GenerationLoader, type GenerationLoaderProps, type GenerationLoaderVariant, type GrantScope, type GroupedTool, type GroupedToolState, GuardrailNotice, type HunkDecision, ImageGeneration, InlineCitation, type InlineCitationProps, JobProgress, type JobStage, LauncherBubble, LiveRegionAnnouncer, type LiveRegionAnnouncerProps, MapAnswer, type MapPin, MathBlock, type MathStep, type McpServer, McpServerPanel, type McpServerStatus, type MemoryChange, type MemoryChip, MemoryChips, MessageActions, type MessageActionsProps, type MessageAttachmentItem, MessageAttachments, MessageBranches, type MessageBranchesProps, MessagePair, type MessagePairProps, MessageQueue, MessageTiming, MobileComposer, ModelPicker, type ModelUsage, NumberTicker, Onboarding, type OnboardingStep, PERMISSION_LABELS, PERMISSION_SCOPE_LABELS, type PaletteCommand, PermissionGrant, type PermissionLabels, type PermissionScope, PermissionScopes, type PermissionScopesProps, type PickableModel, PromptLibrary, QUEUE_LABELS, QueueDock, type QueueDockProps, type QueueLabels, type QueuedFollowUp, type QueuedMessage, QuotaBanner, type QuoteAction, QuoteReply, REVERT_LABELS, REVERT_SCOPES, REVERT_SCOPE_DESCRIPTIONS, REVERT_SCOPE_LABELS, RISK_LABELS, type Reaction, ReadAloud, ReasoningEffort, ReasoningPanel, type ReasoningPanelProps, type ReasoningStep, RecommendationCard, type RecommendationState, RegenerateMenu, type RegenerateOption, type ReportSection, ResearchReport, type RetrievalChunk, RetrievalChunks, RevertDock, type RevertDockProps, type RevertLabels, type RevertReach, type RevertScope, ReviewableDiff, RiskBadge, type RiskBadgeProps, type RunState, SECURITY_RISKS, type SavedPrompt, ScheduleCard, type ScheduleRun, ScoreBreakdown, type ScoreCriterion, ScrollAnchor, type ScrollAnchorMessage, type SearchHit, type SearchableThread, type SectionState, type SecurityRisk, type Segment, type SettingToggle, SettingsPanel, SharedConversation, type SharedTurn, ShimmerLabel, type Source, Sources, type SourcesProps, type SpanStatus, SpeakerIdentity, type SpeakerKind, type SpeakerTurn, type SpecRow, SpecSheet, type StatusStep, StoppedRun, StreamingText, Sub, type SubagentItem, SubagentList, Suggestions, type SuggestionsProps, Sup, SwapLabel, TAIL_ACTIONS, TURN_ACTION_LABELS, type TailAction, type TailPriority, TailStatus, type TailStatusProps, TerminalBlock, ThinkingIndicator, type ThreadItem, ThreadList, ThreadSearch, TimeBoundary, type TimeBoundaryProps, type TimelineEvent, type TimelineStat, type TimelineStep, type TimelineWhen, type TimingStat, type TodoItem, TodoList, type TodoStatus, ToolCall, type ToolCallProps, ToolError, ToolGroup, ToolTimeline, type ToolTimelineProps, type TraceSpan, TraceWaterfall, type TurnActionLabels, TurnFooter, type TurnFooterProps, type TurnTimestamp, TypingIndicator, UnreadDivider, type UnreadDividerProps, VERB_TRIADS, VERDICT_LABELS, type VerbKind, type VerbTense, type VerbTriad, type VerdictIssue, type VerdictLabels, VerdictRow, type VerdictRowProps, type VerdictTone, VoiceConversation, type VoiceMode, type VoiceTurn, WebPreview, WebSearch, type WebSearchResult, WorkCollapse, type WorkCollapseProps, type WorkSummary, applyMention, at, clamp, codeScroll, codeSurface, collapsePanel, field, fieldInteractive, floating, formatAlwaysAllow, formatChangeSummary, formatCompactNumber, formatQueueSummary, formatRevertSummary, formatWorkDuration, formatWorkLabel, ghostButton, iconSwap, iconSwapIn, iconSwapOut, indexIn, inkButton, labelSwap, labelSwapIn, labelSwapOut, live, mono, paper, pct, pressable, progressOf, take, useAnnouncerPresent, useMentionMatches, useSlashMatches, verbFor, verdictStars };