@alexkroman1/aai-ui 0.12.3 → 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

@@ -1,10 +1,11 @@
-import type * as preact from "preact";
+import type { ButtonHTMLAttributes, ReactNode } from "react";
 /**
- * Visual style of a {@link Button}.
+ * Visual style of a {@link Button} (design-system "website refresh":
+ * rectangular, ALL-CAPS, tracked labels).
  *
- * - `"default"` — Primary filled button (accent background).
- * - `"secondary"` — Muted surface background with border.
- * - `"ghost"` — Transparent background with border.
+ * - `"default"` — Primary filled button (indigo background).
+ * - `"secondary"` — Outlined primary (transparent background, primary border).
+ * - `"ghost"` — Raised neutral (surface background with hairline border).
  *
  * @public
  */
@@ -12,8 +13,8 @@ export type ButtonVariant = "default" | "secondary" | "ghost";
 /**
  * Size preset for a {@link Button}.
  *
- * - `"default"` — Compact (height 2rem / 32 px).
- * - `"lg"` — Large with generous padding, suitable for primary CTAs.
+ * - `"default"` — Compact control (height 36 px).
+ * - `"lg"` — Primary CTA (height 44 px, generous padding).
  *
  * @public
  */
@@ -26,25 +27,32 @@ export type ButtonSize = "default" | "lg";
  *
  * @example
  * ```tsx
- * <Button variant="secondary" onClick={handleClick}>
- *   Stop
- * </Button>
- *
- * <Button size="lg" className="w-full">
- *   Start Conversation
- * </Button>
+ * 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 variant - Visual style (`"default"` | `"secondary"` | `"ghost"`). Defaults to `"default"`.
- * @param size - Size preset (`"default"` | `"lg"`). Defaults to `"default"`.
- * @param className - Additional CSS class names.
- * @param children - Button label / content.
+ * @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, ...rest }: {
+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;
-    children?: preact.ComponentChildren;
-} & Omit<preact.JSX.HTMLAttributes<HTMLButtonElement>, "className">): preact.JSX.Element;
+    /** Button label / content. */
+    children?: ReactNode;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className">): import("react").JSX.Element;

package/dist/components/button.js

@@ -1,14 +1,38 @@
+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 "preact/jsx-runtime";
-//#region components/button.tsx
-const LG_STYLE = {
-	display: "grid",
-	placeItems: "center",
-	appearance: "none",
-	margin: 0,
-	padding: "12px 32px",
-	lineHeight: 1
-};
+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.
 *
@@ -17,27 +41,42 @@ const LG_STYLE = {
 *
 * @example
 * ```tsx
-* <Button variant="secondary" onClick={handleClick}>
-*   Stop
-* </Button>
+* import { Button } from "@alexkroman1/aai-ui";
 *
-* <Button size="lg" className="w-full">
-*   Start Conversation
-* </Button>
+* function Actions({ onStop }: { onStop: () => void }) {
+*   return (
+*     <>
+*       <Button variant="secondary" onClick={onStop}>Stop</Button>
+*       <Button size="lg" className="w-full">Start Conversation</Button>
+*     </>
+*   );
+* }
 * ```
 *
-* @param variant - Visual style (`"default"` | `"secondary"` | `"ghost"`). Defaults to `"default"`.
-* @param size - Size preset (`"default"` | `"lg"`). Defaults to `"default"`.
-* @param className - Additional CSS class names.
-* @param children - Button label / content.
+* @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, ...rest }) {
+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: size === "lg" ? LG_STYLE : void 0,
-		class: clsx(size !== "lg" && "flex items-center justify-center appearance-none m-0 h-8 px-3 py-1.5 w-fit leading-none", "rounded-aai text-sm font-medium cursor-pointer border outline-none", variant === "secondary" && "bg-aai-surface-hover text-aai-text-secondary border-aai-border", variant === "ghost" && "bg-transparent text-aai-text-secondary border-aai-border", variant === "default" && "bg-aai-primary text-white border-transparent", className),
+		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
 	});

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

@@ -1,29 +1,35 @@
-import type * as preact from "preact";
+/** @jsxImportSource react */
+import type { ReactNode } from "react";
 /**
- * The main chat interface for a voice agent session.
- * Displays a header (with title and {@link StateIndicator}), an
- * {@link ErrorBanner}, the {@link MessageList}, and session {@link Controls}.
+ * 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 {@link SessionProvider}.
+ * Must be rendered inside a `SessionProvider`.
  *
  * @example
  * ```tsx
- * <StartScreen icon="🍕" title="Pizza Palace">
- *   <ChatView />
- * </StartScreen>
- * ```
+ * import { ChatView, StartScreen } from "@alexkroman1/aai-ui";
  *
- * @example Pair with a sidebar
- * ```tsx
- * <SidebarLayout sidebar={<RecipeCard />}>
- *   <ChatView className="border-l" />
- * </SidebarLayout>
+ * function App() {
+ *   return (
+ *     <StartScreen icon="🍕" title="Pizza Palace">
+ *       <ChatView />
+ *     </StartScreen>
+ *   );
+ * }
  * ```
  *
- * @param className - Additional CSS class names applied to the root element.
+ * @param props - Chat surface props.
  *
  * @public
  */
-export declare function ChatView({ className }: {
-    className?: string;
-}): preact.JSX.Element;
+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

@@ -1,61 +1,3 @@
-import { useClientConfig } from "../client-context.js";
-import { useSession } from "../signals.js";
-import { Controls } from "./controls.js";
-import { ErrorBanner } from "./error-banner.js";
-import { MessageList } from "./message-list.js";
-import { StateIndicator } from "./state-indicator.js";
-import clsx from "clsx";
-import { jsx, jsxs } from "preact/jsx-runtime";
-//#region components/chat-view.tsx
-/**
-* The main chat interface for a voice agent session.
-* Displays a header (with title and {@link StateIndicator}), an
-* {@link ErrorBanner}, the {@link MessageList}, and session {@link Controls}.
-*
-* Must be rendered inside a {@link SessionProvider}.
-*
-* @example
-* ```tsx
-* <StartScreen icon="🍕" title="Pizza Palace">
-*   <ChatView />
-* </StartScreen>
-* ```
-*
-* @example Pair with a sidebar
-* ```tsx
-* <SidebarLayout sidebar={<RecipeCard />}>
-*   <ChatView className="border-l" />
-* </SidebarLayout>
-* ```
-*
-* @param className - Additional CSS class names applied to the root element.
-*
-* @public
-*/
-function ChatView({ className }) {
-	const { session } = useSession();
-	const { title } = useClientConfig();
-	return /* @__PURE__ */ jsxs("div", {
-		class: clsx("flex flex-col h-screen max-w-130 mx-auto bg-aai-bg text-aai-text font-aai text-sm", className),
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				class: "flex items-center gap-3 px-4 py-3 border-b border-aai-border shrink-0",
-				children: [title ? /* @__PURE__ */ jsx("span", {
-					class: "text-sm font-semibold text-aai-primary",
-					children: title
-				}) : /* @__PURE__ */ jsx("pre", {
-					class: "font-aai-mono text-[10px] leading-[1.1] font-bold text-aai-primary m-0",
-					children: "▄▀█ ▄▀█ █\n█▀█ █▀█ █"
-				}), /* @__PURE__ */ jsx("div", {
-					class: "ml-auto",
-					children: /* @__PURE__ */ jsx(StateIndicator, { state: session.state })
-				})]
-			}),
-			/* @__PURE__ */ jsx(ErrorBanner, { error: session.error }),
-			/* @__PURE__ */ jsx(MessageList, {}),
-			/* @__PURE__ */ jsx(Controls, {})
-		]
-	});
-}
-//#endregion
+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

@@ -1,18 +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
- * {@link SessionProvider}.
+ * `SessionProvider`.
  *
  * @example
  * ```tsx
- * <Controls className="justify-end" />
+ * import { Controls } from "@alexkroman1/aai-ui";
+ *
+ * function Footer() {
+ *   return <Controls className="justify-end" />;
+ * }
  * ```
  *
- * @param className - Additional CSS class names applied to the container.
+ * @param props - Container props.
  *
  * @public
  */
-export declare function Controls({ className }: {
-    className?: string;
-}): import("preact").JSX.Element;
+export declare const Controls: MemoExoticComponent<FunctionComponent<ControlsProps>>;

package/dist/components/controls.js

@@ -1,37 +1,49 @@
-import { useSession } from "../signals.js";
+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 "preact/jsx-runtime";
-//#region components/controls.tsx
+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
-* {@link SessionProvider}.
+* `SessionProvider`.
 *
 * @example
 * ```tsx
-* <Controls className="justify-end" />
+* import { Controls } from "@alexkroman1/aai-ui";
+*
+* function Footer() {
+*   return <Controls className="justify-end" />;
+* }
 * ```
 *
-* @param className - Additional CSS class names applied to the container.
+* @param props - Container props.
 *
 * @public
 */
-function Controls({ className }) {
-	const { running, toggle, reset } = useSession();
+const Controls = memo(function Controls({ className }) {
+	const running = useSessionSelector((s) => s.running);
+	const { toggle, restart } = useSessionCore();
 	return /* @__PURE__ */ jsxs("div", {
-		class: clsx("flex gap-2 px-4 py-3 border-t border-aai-border shrink-0", className),
-		children: [/* @__PURE__ */ jsx(Button, {
-			variant: "secondary",
-			onClick: toggle,
-			children: running.value ? "Stop" : "Resume"
-		}), /* @__PURE__ */ jsx(Button, {
-			variant: "ghost",
-			onClick: reset,
-			children: "New Conversation"
-		})]
+		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 };