@alexkroman1/aai-ui 0.12.2 → 0.13.0

package/dist/components/bullet-list.d.ts

@@ -0,0 +1,74 @@
+import type { ReactNode } from "react";
+/**
+ * Props for {@link BulletList}.
+ *
+ * @public
+ */
+export type BulletListProps = {
+    /**
+     * The bullets, in the order they should read.
+     *
+     * TEXT rather than `ReactNode`, deliberately: every list this replaced was a
+     * string array straight off a run's output, and taking strings is what lets
+     * this component key them (see the component doc). A page that needs a link
+     * inside a bullet wants its own `<ul>`, not a prop here.
+     */
+    items: readonly string[];
+    /**
+     * Rendered as a heading above the list, inside a wrapping `<section>`.
+     *
+     * Omitted (or `null`/`false`, so `title={cond && "Risks"}` means what it
+     * looks like) renders the bare `<ul>` with no wrapper — which is what four of
+     * the five lists this replaced were.
+     */
+    title?: ReactNode | undefined;
+    /**
+     * `"sm"` adds `text-sm`, which two of the five copies carried and three did
+     * not. `"base"` is the default and adds nothing.
+     */
+    size?: "sm" | "base" | undefined;
+    /**
+     * ADDED to the list's own classes rather than replacing them. There is no
+     * `tailwind-merge` in this package, so a class that CONFLICTS with a base one
+     * is not reliably the winner — use this for additions, not overrides.
+     */
+    className?: string | undefined;
+};
+/**
+ * A disc-bulleted list of short strings — a run's key points, findings, risks.
+ *
+ * Five pages had written this, byte-identical apart from a `text-sm` suffix on
+ * two of them, and all five had the same two defects. Both are the reason this
+ * is a component rather than four lines a page repeats:
+ *
+ * - **All five keyed by the string itself, and these lists are MODEL OUTPUT.**
+ *   Two identical bullets are entirely plausible — a summariser that repeats
+ *   itself is a bad summary, not a bad program — and a repeated string is then
+ *   a duplicate `key`: React warns, and the two `<li>`s contend for one slot in
+ *   the reconciliation. What is keyed here instead is the content PLUS how many
+ *   times that content has already appeared in this list, which is unique by
+ *   construction and unchanged by a re-render that did not change the text.
+ *   (Position alone would also be sound — these lists are replaced wholesale by
+ *   each new output and never reordered — but it is what `noArrayIndexKey`
+ *   exists to talk you out of, and a unique key is one `Map` away, so there is
+ *   no reason to spend a lint suppression on it.)
+ * - **Three of the five rendered an empty `<ul>` under a heading.** Two had
+ *   hand-rolled `if (items.length === 0) return null` and three had not, so the
+ *   same absent field was "nothing" on two pages and a stray heading with a
+ *   void under it on three. Emptiness renders NOTHING here, `title` included:
+ *   a heading over no bullets is a claim the run did not make.
+ *
+ * @example
+ * ```tsx
+ * import { BulletList } from "@alexkroman1/aai-ui";
+ *
+ * function Findings({ risks }: { risks: string[] }) {
+ *   return <BulletList title="Risks" items={risks} size="sm" />;
+ * }
+ * ```
+ *
+ * @param props - Bullet-list props.
+ *
+ * @public
+ */
+export declare function BulletList({ items, title, size, className }: BulletListProps): ReactNode;

package/dist/components/button.d.ts

@@ -0,0 +1,58 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+/**
+ * Visual style of a {@link Button} (design-system "website refresh":
+ * rectangular, ALL-CAPS, tracked labels).
+ *
+ * - `"default"` — Primary filled button (indigo background).
+ * - `"secondary"` — Outlined primary (transparent background, primary border).
+ * - `"ghost"` — Raised neutral (surface background with hairline border).
+ *
+ * @public
+ */
+export type ButtonVariant = "default" | "secondary" | "ghost";
+/**
+ * Size preset for a {@link Button}.
+ *
+ * - `"default"` — Compact control (height 36 px).
+ * - `"lg"` — Primary CTA (height 44 px, generous padding).
+ *
+ * @public
+ */
+export type ButtonSize = "default" | "lg";
+/**
+ * A styled button with variant and size presets.
+ *
+ * Accepts all standard `<button>` HTML attributes in addition to the props
+ * listed below.
+ *
+ * @example
+ * ```tsx
+ * import { Button } from "@alexkroman1/aai-ui";
+ *
+ * function Actions({ onStop }: { onStop: () => void }) {
+ *   return (
+ *     <>
+ *       <Button variant="secondary" onClick={onStop}>Stop</Button>
+ *       <Button size="lg" className="w-full">Start Conversation</Button>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @param props - Button props: `variant` (visual style — see
+ * {@link ButtonVariant}, defaults to `"default"`), `size` (see
+ * {@link ButtonSize}, defaults to `"default"`), `className` (appended to the
+ * button's own classes), `children` (the label), and any `<button>` attribute.
+ *
+ * @public
+ */
+export declare function Button({ variant, size, className, children, style, ...rest }: {
+    /** Visual style. Defaults to `"default"`. */
+    variant?: ButtonVariant;
+    /** Size preset. Defaults to `"default"`. */
+    size?: ButtonSize;
+    /** Additional CSS class names, appended to the button's own. */
+    className?: string;
+    /** Button label / content. */
+    children?: ReactNode;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className">): import("react").JSX.Element;

package/dist/components/button.js

@@ -0,0 +1,85 @@
+import { useTheme } from "../context.js";
+import { a as inkTint, i as focusRingStyle, n as FOCUS_RING, o as primaryTint } from "../_colors-CpZO-88A.js";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/button.tsx
+/** @jsxImportSource react */
+/** One variant's rest and hover colors, derived from the theme. */
+function variantColors(variant, theme) {
+	switch (variant) {
+		case "default": return {
+			bg: theme.primary,
+			fg: theme.surface,
+			border: "transparent",
+			hoverBg: inkTint(theme.text, theme.primary, 14),
+			hoverFg: theme.surface,
+			hoverBorder: "transparent"
+		};
+		case "secondary": return {
+			bg: "transparent",
+			fg: theme.primary,
+			border: theme.primary,
+			hoverBg: primaryTint(theme.primary, theme.surface, 8),
+			hoverFg: theme.primary,
+			hoverBorder: theme.primary
+		};
+		default: return {
+			bg: theme.surface,
+			fg: theme.text,
+			border: theme.border,
+			hoverBg: inkTint(theme.text, theme.surface, 5),
+			hoverFg: theme.text,
+			hoverBorder: theme.border
+		};
+	}
+}
+/**
+* A styled button with variant and size presets.
+*
+* Accepts all standard `<button>` HTML attributes in addition to the props
+* listed below.
+*
+* @example
+* ```tsx
+* import { Button } from "@alexkroman1/aai-ui";
+*
+* function Actions({ onStop }: { onStop: () => void }) {
+*   return (
+*     <>
+*       <Button variant="secondary" onClick={onStop}>Stop</Button>
+*       <Button size="lg" className="w-full">Start Conversation</Button>
+*     </>
+*   );
+* }
+* ```
+*
+* @param props - Button props: `variant` (visual style — see
+* {@link ButtonVariant}, defaults to `"default"`), `size` (see
+* {@link ButtonSize}, defaults to `"default"`), `className` (appended to the
+* button's own classes), `children` (the label), and any `<button>` attribute.
+*
+* @public
+*/
+function Button({ variant = "default", size = "default", className, children, style, ...rest }) {
+	const theme = useTheme();
+	const colors = variantColors(variant, theme);
+	const vars = {
+		"--aai-btn-bg": colors.bg,
+		"--aai-btn-fg": colors.fg,
+		"--aai-btn-bd": colors.border,
+		"--aai-btn-bg-hover": colors.hoverBg,
+		"--aai-btn-fg-hover": colors.hoverFg,
+		"--aai-btn-bd-hover": colors.hoverBorder,
+		...focusRingStyle(theme.primary),
+		...style
+	};
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		style: vars,
+		className: clsx("inline-flex items-center justify-center appearance-none m-0 w-fit whitespace-nowrap", size === "lg" ? "h-11 px-7 text-xs" : "h-9 px-5 text-[11px]", "rounded-aai font-aai font-medium tracking-[1.4px] uppercase leading-none", "cursor-pointer border transition-colors duration-150", "bg-(--aai-btn-bg) text-(--aai-btn-fg) border-(--aai-btn-bd)", "enabled:hover:bg-(--aai-btn-bg-hover) enabled:hover:text-(--aai-btn-fg-hover)", "enabled:hover:border-(--aai-btn-bd-hover)", FOCUS_RING, "disabled:cursor-not-allowed disabled:opacity-50", className),
+		...rest,
+		children
+	});
+}
+//#endregion
+export { Button };

package/dist/components/chat-view.d.ts

@@ -0,0 +1,35 @@
+/** @jsxImportSource react */
+import type { ReactNode } from "react";
+/**
+ * The main chat interface for a voice agent session — the design-system
+ * "voice agent console": a 760px column on the cream page with a header
+ * (logo + live-status eyebrow), the conversation on a raised white card,
+ * and the session controls beneath it.
+ *
+ * Must be rendered inside a `SessionProvider`.
+ *
+ * @example
+ * ```tsx
+ * import { ChatView, StartScreen } from "@alexkroman1/aai-ui";
+ *
+ * function App() {
+ *   return (
+ *     <StartScreen icon="🍕" title="Pizza Palace">
+ *       <ChatView />
+ *     </StartScreen>
+ *   );
+ * }
+ * ```
+ *
+ * @param props - Chat surface props.
+ *
+ * @public
+ */
+export declare function ChatView({ icon, title, className, }: {
+    /** Element rendered in place of the logo in the header. */
+    icon?: ReactNode | undefined;
+    /** Title string for the header. Defaults to the agent's declared name. */
+    title?: string | undefined;
+    /** Additional CSS class names for the root element, appended to its own. */
+    className?: string | undefined;
+}): ReactNode;

package/dist/components/chat-view.js

@@ -0,0 +1,3 @@
+import { t as ChatView } from "../chat-view-BCbI7gD4.js";
+import "../context.js";
+export { ChatView };

package/dist/components/console-shell.d.ts

@@ -0,0 +1,85 @@
+import type { ReactNode } from "react";
+import type { AgentState } from "../types.ts";
+/**
+ * Props of {@link ConsoleShell}.
+ *
+ * @public
+ */
+export type ConsoleShellProps = {
+    /** Element rendered in place of the logo in the header. */
+    icon?: ReactNode | undefined;
+    /** Title string for the header. */
+    title?: string | undefined;
+    /** Live status shown in the header eyebrow. */
+    state: AgentState;
+    /** Whether the status dot pulses. */
+    pulsing: boolean;
+    /** Card content — normally a {@link MessageList}. */
+    children: ReactNode;
+    /** Row rendered beneath the card (controls). */
+    footer: ReactNode;
+    /** Additional CSS class names for the root element, appended to its own. */
+    className?: string | undefined;
+};
+/**
+ * The design-system "console" chrome: a 760px column on the themed page with a
+ * header (icon + live-status eyebrow), an announced error banner, the main
+ * content on a raised card, and a footer row beneath it.
+ *
+ * {@link ChatView} is this shell with `<MessageList>` inside it and
+ * `<Controls>` under it, and until now that was the only way to get it — the
+ * shell itself was internal, so a client wanting its own conversation markup
+ * had to rebuild the chrome as well. Each one that did re-derived the error
+ * banner WITHOUT `role="alert"`.
+ *
+ * **The banner is {@link SessionErrorBanner} now, composed here rather than
+ * spelled out.** It was four lines of this file, and this file is a whole
+ * FRAME — a centred `max-w-190` column — so the full-bleed chromes that needed
+ * the announced banner could not take it without taking a layout that would
+ * replace the design they exist to demonstrate. Composing means there is one
+ * banner, and it means this component no longer takes an `error` prop: the
+ * banner reads the session itself, which is one fewer thing a caller can wire
+ * up wrong.
+ *
+ * Reach for it when the conversation is yours and the frame is not. Reach for
+ * `<ChatView>` when both are ours. Reach for `<SessionErrorBanner>` alone when
+ * neither is.
+ *
+ * Must be rendered inside the providers `mountClient()` installs.
+ *
+ * @example A custom conversation in the stock chrome
+ * ```tsx
+ * import {
+ *   ConsoleShell,
+ *   Controls,
+ *   useConversation,
+ *   useSessionStatus,
+ * } from "@alexkroman1/aai-ui";
+ *
+ * function Console() {
+ *   const state = useSessionStatus();
+ *   const { items } = useConversation();
+ *   return (
+ *     <ConsoleShell
+ *       title="Dispatch"
+ *       state={state}
+ *       pulsing={state === "listening"}
+ *       footer={<Controls />}
+ *     >
+ *       <ul>
+ *         {items.map((item) => (
+ *           <li key={item.kind === "message" ? item.message.id : item.toolCall.callId}>
+ *             {item.kind === "message" ? item.message.content : item.toolCall.name}
+ *           </li>
+ *         ))}
+ *       </ul>
+ *     </ConsoleShell>
+ *   );
+ * }
+ * ```
+ *
+ * @param props - See {@link ConsoleShellProps}.
+ *
+ * @public
+ */
+export declare function ConsoleShell({ icon, title, state, pulsing, children, footer, className, }: ConsoleShellProps): ReactNode;

package/dist/components/controls.d.ts

@@ -0,0 +1,33 @@
+import { type FunctionComponent, type MemoExoticComponent } from "react";
+/**
+ * Props of {@link Controls}.
+ *
+ * @public
+ */
+export type ControlsProps = {
+    /**
+     * Additional CSS class names, appended to the container's own layout
+     * classes rather than replacing them.
+     */
+    className?: string;
+};
+/**
+ * Session control buttons: **Stop / Resume** and **New Conversation**.
+ *
+ * Reads session state from {@link useSession}. Must be rendered inside a
+ * `SessionProvider`.
+ *
+ * @example
+ * ```tsx
+ * import { Controls } from "@alexkroman1/aai-ui";
+ *
+ * function Footer() {
+ *   return <Controls className="justify-end" />;
+ * }
+ * ```
+ *
+ * @param props - Container props.
+ *
+ * @public
+ */
+export declare const Controls: MemoExoticComponent<FunctionComponent<ControlsProps>>;

package/dist/components/controls.js

@@ -0,0 +1,49 @@
+import { useSessionCore, useSessionSelector } from "../context.js";
+import { Button } from "./button.js";
+import { n as SessionUrlChips } from "../url-chips-oyy_Eiqh.js";
+import { memo } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/controls.tsx
+/** @jsxImportSource react */
+/**
+* Session control buttons: **Stop / Resume** and **New Conversation**.
+*
+* Reads session state from {@link useSession}. Must be rendered inside a
+* `SessionProvider`.
+*
+* @example
+* ```tsx
+* import { Controls } from "@alexkroman1/aai-ui";
+*
+* function Footer() {
+*   return <Controls className="justify-end" />;
+* }
+* ```
+*
+* @param props - Container props.
+*
+* @public
+*/
+const Controls = memo(function Controls({ className }) {
+	const running = useSessionSelector((s) => s.running);
+	const { toggle, restart } = useSessionCore();
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex flex-wrap items-center gap-3 shrink-0", className),
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				onClick: toggle,
+				children: running ? "Stop" : "Resume"
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				onClick: restart,
+				children: "New Conversation"
+			}),
+			/* @__PURE__ */ jsx(SessionUrlChips, { className: "basis-full sm:basis-auto sm:ml-auto sm:max-w-[60%]" })
+		]
+	});
+});
+//#endregion
+export { Controls };

package/dist/components/conversation-view.d.ts

@@ -0,0 +1,130 @@
+/** @jsxImportSource react */
+import type { CSSProperties, ReactNode } from "react";
+import type { ConversationLogEntry } from "../conversation-log.ts";
+import type { ChatMessage, ToolCallInfo } from "../types.ts";
+import type { UseUserTranscriptResult } from "../use-user-transcript.ts";
+/**
+ * Props of {@link ConversationView}.
+ *
+ * @public
+ */
+export type ConversationViewProps = {
+    /** One finalized message, in this chrome's own markup. */
+    renderMessage: (message: ChatMessage) => ReactNode;
+    /**
+     * One tool invocation. Absent, a compact {@link ToolCallRow} naming the tool,
+     * shimmering while it is pending.
+     */
+    renderTool?: ((toolCall: ToolCallInfo) => ReactNode) | undefined;
+    /**
+     * The agent's reply as it arrives. Absent, `renderMessage` is called with a
+     * synthetic assistant message carrying the text so far (its `id` is `-1`,
+     * which no real message has) — every chrome so far rendered the two the same
+     * way, and this keeps them from drifting.
+     */
+    renderStreaming?: ((text: string) => ReactNode) | undefined;
+    /**
+     * The caller's in-progress turn. Rendered only while `transcript.speaking`,
+     * which is the `null`-vs-`""` distinction {@link useUserTranscript} makes
+     * (`""` is speech detected with no words yet — render on it, and read
+     * `transcript.text` for the placeholder). Absent, a muted italic line.
+     */
+    renderTranscript?: ((transcript: UseUserTranscriptResult) => ReactNode) | undefined;
+    /**
+     * Where the transcript row goes. `"inline"` (the default) is the last row
+     * inside the scroll region, as `MessageList` places it; `"below"` renders it
+     * after the scroll region as a sibling — the strip a two-pane board pins to
+     * the bottom of its conversation column, outside the scroll.
+     */
+    transcriptPosition?: "inline" | "below" | undefined;
+    /**
+     * A persisted transcript to render IN PLACE of the live session's items —
+     * `useConversationLog().entries`, whose newest session entry already is the
+     * live conversation. Session entries render through `renderMessage` /
+     * `renderTool`, each after `renderSessionHeader`; a `spoken` entry is
+     * `renderMessage` over an assistant message (id `-2`); a `note` is
+     * `renderNote`. The streaming reply, the transcript and the thinking row are
+     * rendered after it as usual.
+     */
+    log?: readonly ConversationLogEntry[] | undefined;
+    /** A log `note`. Absent, a small centred muted line. */
+    renderNote?: ((entry: Extract<ConversationLogEntry, {
+        kind: "note";
+    }>) => ReactNode) | undefined;
+    /**
+     * What goes above each log `session` entry — a timestamp, a "continue"
+     * button. Absent, nothing.
+     */
+    renderSessionHeader?: ((entry: Extract<ConversationLogEntry, {
+        kind: "session";
+    }>) => ReactNode) | undefined;
+    /** Rendered inside the scroll region while there is nothing to show at all. */
+    empty?: ReactNode | undefined;
+    /**
+     * The `aria-label` of the thinking row. Default `"Thinking"`. Say who: the
+     * dots are the only sign the agent is working, and to a screen reader they
+     * are punctuation.
+     */
+    thinkingLabel?: string | undefined;
+    /** What the thinking row shows. Default: three pulsing dots. */
+    thinkingIndicator?: ReactNode | undefined;
+    /** CSS class names for the thinking row itself (the `role="status"` element). */
+    thinkingClassName?: string | undefined;
+    /**
+     * Classes for the {@link AutoScroll} container. It must end up with a
+     * bounded height (`flex-1 min-h-0`, `h-full`) or nothing pins.
+     */
+    className?: string | undefined;
+    /** Classes for the scroll region's content element — padding, gap, direction. */
+    contentClassName?: string | undefined;
+    /** Classes for the scrolling element itself. See {@link AutoScroll}. */
+    scrollClassName?: string | undefined;
+    /** Inline styles for the scroll container. */
+    style?: CSSProperties | undefined;
+};
+/**
+ * The conversation's skeleton over {@link useConversation}, with every row a
+ * render slot: a pinned scroll region holding the empty state, the interleaved
+ * messages and tool calls, the streaming reply and the announced thinking row,
+ * plus the live transcript — inside the scroll or pinned beneath it.
+ *
+ * `useConversation()` already made the DATA one thing: the interleave, the
+ * streaming utterance, the `null`-vs-`""` transcript distinction and the
+ * thinking-suppression rule. What three custom chromes then each wrote around
+ * it was the same fifty lines of STRUCTURE: an `AutoScroll` with a bounded
+ * height, an empty-state guard on `items.length === 0 && streaming === null`,
+ * the map with its keys, the streaming row, the thinking row with its
+ * `role="status"` and `aria-label` (and the same comment about screen readers
+ * hearing punctuation), the transcript guarded on `speaking`. The bubbles are
+ * the part each template exists to show, so those are slots; the order and the
+ * accessibility contract are this component's.
+ *
+ * {@link MessageList} is this with the stock bubbles filled in.
+ *
+ * Must be rendered inside the providers `mountClient()` installs.
+ *
+ * @example A board's radio log: its own bubbles, the stock tool row, the transcript pinned below
+ * ```tsx
+ * import { ConversationView } from "@alexkroman1/aai-ui";
+ *
+ * function RadioLog() {
+ *   return (
+ *     <ConversationView
+ *       contentClassName="p-4 flex flex-col gap-2"
+ *       empty={<p className="text-center opacity-60">Standing by.</p>}
+ *       renderMessage={({ role, content }) => (
+ *         <div className={role === "assistant" ? "self-start" : "self-end"}>{content}</div>
+ *       )}
+ *       renderTranscript={({ text }) => <div className="px-4 py-2 italic">{text}</div>}
+ *       transcriptPosition="below"
+ *       thinkingLabel="Dispatch is thinking"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @param props - See {@link ConversationViewProps}.
+ *
+ * @public
+ */
+export declare function ConversationView({ renderMessage, renderTool, renderStreaming, renderTranscript, transcriptPosition, log, renderNote, renderSessionHeader, empty, thinkingLabel, thinkingIndicator, thinkingClassName, className, contentClassName, scrollClassName, style, }: ConversationViewProps): ReactNode;

package/dist/components/eyebrow.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+/**
+ * Eyebrow label — the design system's small outlined pill with ALL-CAPS,
+ * tracked text ("VOICE AGENT", "LISTENING", …). Used as a section label on
+ * the start screen and as the live status chip in the chat header.
+ *
+ * @internal
+ */
+export declare function Eyebrow({ children, className, style, ...rest }: {
+    children: ReactNode;
+    className?: string | undefined;
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, "className">): ReactNode;

package/dist/components/facts.d.ts

@@ -0,0 +1,81 @@
+import type { ReactNode } from "react";
+/**
+ * Props for {@link Facts}.
+ *
+ * @public
+ */
+export type FactsProps = {
+    /**
+     * The facts, in reading order. Anything `false`, `null`, `undefined` or the
+     * empty string is DROPPED, so a page writes `cond && \`${n} skipped\`` inline
+     * instead of splicing a separator into a conditional string.
+     *
+     * `0` is NOT dropped — it is a fact ("0 words"), and treating it as absent is
+     * the bug a plain truthiness filter would ship.
+     *
+     * They are TEXT rather than `ReactNode`: every one of the nine lines this
+     * replaced was a string, and taking strings is what lets this JOIN them (see
+     * the component doc) instead of interleaving keyed separator elements.
+     */
+    items: readonly (string | number | false | null | undefined)[];
+    /**
+     * Which of the two muted typographies the pages use. `"sm"` is
+     * `text-sm opacity-70`, `"xs"` is `text-xs opacity-60` — the size and the
+     * muting move together, because that is the pair every site had.
+     */
+    size?: "sm" | "xs" | undefined;
+    /**
+     * The element to render. `"p"` by default; `"span"` for a line that sits
+     * inside phrasing content, where a `<p>` is invalid nesting the browser will
+     * reparent out from under React.
+     */
+    as?: "p" | "span" | undefined;
+    /**
+     * ADDED to the base classes rather than replacing them — `tabular-nums`,
+     * `uppercase tracking-[1.2px]`. There is no `tailwind-merge` in this package,
+     * so a class that CONFLICTS with a base one is not reliably the winner.
+     */
+    className?: string | undefined;
+};
+/**
+ * A muted line of run facts, joined by `·` — "6 segments · 12:04 of audio ·
+ * 1,840 words".
+ *
+ * Nine pages had written this by hand under four different typographies for
+ * one role, two of them (`call-audit-workflow` and `spoken-summary-workflow`) byte-identical down
+ * to the payload. Three things it takes off the caller:
+ *
+ * - **The separator cannot be forgotten, and neither can the space around it.**
+ *   Four of the nine carried a literal `{" "}` at the end of a line, because
+ *   Prettier's wrap ate the space that made `· ` read as a separator rather
+ *   than as punctuation glued to the next word. A line that is correct only
+ *   because somebody remembered an invisible JSX expression is exactly the
+ *   thing a component should own.
+ * - **A fact worth omitting is omitted, and by the caller's own condition.**
+ *   The hand-written shape for a conditional fact was to splice the separator
+ *   into the string — `{x ? \` · budget exhausted\` : ""}` — which puts the
+ *   punctuation in two places and gets the leading separator wrong the moment
+ *   the fact before it also disappears. Passing the condition and letting this
+ *   drop it keeps the separator in one place.
+ * - **A line with nothing left to say renders NOTHING.** With every fact
+ *   conditional, the alternative is a muted empty row, or a bare `·`.
+ *
+ * The facts are JOINED into one string rather than interleaved as elements, and
+ * that is why the prop is text: joined, there is no per-fact `key` to invent —
+ * the same reasoning `WorkflowProgress` gives for its log lines. A line that
+ * genuinely needs an element in it (a link) wants its own markup.
+ *
+ * @example
+ * ```tsx
+ * import { Facts } from "@alexkroman1/aai-ui";
+ *
+ * function RunFacts({ words, cut }: { words: number; cut: number }) {
+ *   return <Facts size="xs" items={[`${words} words`, cut > 0 && `${cut} blind cuts`]} />;
+ * }
+ * ```
+ *
+ * @param props - Facts-line props.
+ *
+ * @public
+ */
+export declare function Facts({ items, size, as, className }: FactsProps): ReactNode;