@djangocfg/widget-chat 0.1.1

package/src/composer/stories/harness.tsx

@@ -0,0 +1,127 @@
+import { CornerDownLeft, Mic, MicOff, Square } from "lucide-react";
+
+import type { ChatCapabilities } from "../../core";
+import type { StreamChunk } from "../../core/chunks";
+import { ChatProvider } from "../../store";
+import { mockAdapter } from "../../testing";
+import { Composer } from "../composer";
+import { ComposerQueue } from "../tray/queue";
+import { ComposerSend } from "../controls/send";
+import { ComposerVoice } from "../controls/voice";
+import { Field } from "./field";
+
+/**
+ * The composer workbench.
+ *
+ * Separate from `primitives/stories-harness.tsx` rather than a variant of it:
+ * that one auto-sends on mount to produce a transcript, which is the opposite
+ * of what these stories need. Here nothing is sent until someone types, because
+ * the states worth seeing — a menu tracking the caret, a chip tray, the send
+ * button flipping to Stop — only exist while a human is mid-input.
+ *
+ * Copy is passed in as English literals. This package carries no locales
+ * (`ComposerInput`'s `label` is documented as host copy), so a workbench that
+ * reached for i18n would be inventing a dependency the components refuse.
+ */
+
+const surface = "relative grid gap-2 rounded-lg border border-border bg-background p-2";
+const chips = "flex flex-wrap gap-1";
+// A FIXED height (`h-7`), not padding-derived: with `py-1` the height came from
+// the content, so a chip carrying a 24px thumbnail grew taller than a plain one
+// and the tray went ragged — visible the moment an image and a PDF sat side by
+// side. The row now sets the height and the thumbnail (`h-full`) fits itself
+// into it. `overflow-hidden` keeps the picture inside the rounded corner.
+const chip =
+  "flex h-7 items-center gap-1 overflow-hidden rounded border border-border bg-muted pl-2 pr-1 text-xs";
+// `rounded-control` — ui-core's `--radius-control`, the app's one corner for
+// interactive controls. Matches what `ui/chat.tsx` ships, so the workbench and
+// the packaged chat cannot drift on geometry.
+const sendButton =
+  "grid size-8 shrink-0 place-items-center rounded-control bg-primary text-primary-foreground disabled:opacity-40";
+// The mic is secondary: same geometry, no fill until it is recording. Filling it
+// like Send would give two primary actions and no way to tell which one sends.
+const voiceButton =
+  "grid size-8 shrink-0 place-items-center rounded-control text-muted-foreground hover:bg-muted aria-pressed:bg-destructive aria-pressed:text-destructive-foreground";
+// A row, not two grid children: the buttons share one cell at the end of the
+// composer, and `justify-self-end` on each would stack them in the same column.
+const toolbar = "flex items-center justify-end gap-1";
+
+export interface ComposerHarnessProps {
+  /** Chunks the mock adapter replays once a turn is sent. */
+  readonly script?: readonly StreamChunk[];
+  readonly delayMs?: number;
+  readonly capabilities?: ChatCapabilities;
+  /** Seed the ↑ ladder, OLDEST first. It also grows as prompts are sent. */
+  readonly history?: readonly string[];
+  /** Seed the field, for states that need text without typing. */
+  readonly initialText?: string;
+  /**
+   * Persist the draft under this room, as a host does.
+   *
+   * Absent ⇒ no persistence, which is every other story: a shared workbench key
+   * would let one story's leftover text appear in the next one.
+   */
+  readonly draftRoom?: string;
+  /**
+   * Send the seeded text on mount, so a story can PARK mid-turn.
+   *
+   * Off by default, which is the whole reason this workbench is separate from
+   * the transcript one: the composer's states exist while someone is typing,
+   * and a harness that always sent would clear the field before any of them
+   * could be seen. `Streaming` is the one story that needs the opposite, and a
+   * doc comment claiming that state while the button renders idle is only
+   * catchable in the browser: every assertion here reads the source rather than
+   * the running button.
+   */
+  readonly sendOnMount?: boolean;
+}
+
+export function ComposerHarness({
+  script = [],
+  delayMs = 40,
+  capabilities,
+  history,
+  initialText,
+  draftRoom,
+  sendOnMount = false,
+}: ComposerHarnessProps) {
+  return (
+    <ChatProvider
+      adapter={mockAdapter({ script, delayMs })}
+      capabilities={capabilities}
+    >
+      <Composer className={surface}>
+        <ComposerQueue
+          className="rounded border border-border bg-muted/40 px-2 py-1 text-xs"
+          itemClassName="flex items-center justify-between gap-2 py-0.5"
+        />
+        <Field
+          history={history}
+          initialText={initialText}
+          draftRoom={draftRoom}
+          sendOnMount={sendOnMount}
+        />
+        <div className={toolbar}>
+          <ComposerVoice className={voiceButton}>
+            {(recording) =>
+              recording ? (
+                <MicOff className="size-4" aria-hidden />
+              ) : (
+                <Mic className="size-4" aria-hidden />
+              )
+            }
+          </ComposerVoice>
+          <ComposerSend className={sendButton}>
+            {(streaming) =>
+              streaming ? (
+                <Square className="size-3.5 fill-current" aria-hidden />
+              ) : (
+                <CornerDownLeft className="size-4" aria-hidden />
+              )
+            }
+          </ComposerSend>
+        </div>
+      </Composer>
+    </ChatProvider>
+  );
+}

package/src/composer/tools/menu.tsx

@@ -0,0 +1,129 @@
+import { useMemo, useState, type ChangeEvent, type ReactNode } from "react";
+
+import { filterToolCatalogue, recentTools, type ToolCatalogEntry } from "../../core";
+import { ToolRows } from "./rows";
+import { useMenuNav } from "./use-menu-nav";
+import { useRecentTools } from "./use-recent-tools";
+
+export interface ToolMenuProps {
+  readonly entries: readonly ToolCatalogEntry[];
+  readonly onPick: (entry: ToolCatalogEntry) => void;
+  /** Ids already staged. A row for one of these UNPICKS it. */
+  readonly picked?: ReadonlySet<string>;
+  /** Copy is the host's — this surface carries no locales. */
+  readonly label: string;
+  readonly searchLabel: string;
+  readonly emptyLabel: string;
+  readonly recentLabel: string;
+  readonly forgetLabel: string;
+  readonly icon?: (key: string) => ReactNode;
+  readonly categoryLabel?: (category: string) => string;
+  readonly className?: string;
+}
+
+// Below this the filter has nothing to narrow, and its autofocus would take the
+// first keystroke from a user who opened a short menu to click.
+const FILTER_FROM = 8;
+
+/** Marks the recents group, which is not one of the registry's categories. */
+const RECENT = "\u001frecent";
+
+/** The arsenal sheet: a filter above what this agent can do. */
+export function ToolMenu({
+  entries,
+  onPick,
+  picked,
+  label,
+  searchLabel,
+  emptyLabel,
+  recentLabel,
+  forgetLabel,
+  icon,
+  categoryLabel,
+  className,
+}: ToolMenuProps) {
+  const [query, setQuery] = useState("");
+  const recent = useRecentTools();
+
+  const groups = useMemo(() => {
+    const found = filterToolCatalogue(entries, query);
+    // Recents lead only at REST. Once the user types they have said what they
+    // want, and a habit group above the answer buries it — the same defect as
+    // an unranked filter, one layer up.
+    if (query.trim() !== "") return found;
+
+    const rows = recentTools(entries, recent.ids);
+    if (rows.length === 0) return found;
+
+    // A tool appears ONCE. Left in both places it is two rows the keyboard must
+    // walk and two nodes any query matches, and the pair disagree about what
+    // their trailing column means — the recent one offers forget, the catalogue
+    // one a check.
+    const lifted = new Set(rows.map((row) => row.id));
+    const rest = found
+      .map((group) => ({
+        category: group.category,
+        entries: group.entries.filter((entry) => !lifted.has(entry.id)),
+      }))
+      .filter((group) => group.entries.length > 0);
+
+    return [{ category: RECENT, entries: rows }, ...rest];
+  }, [entries, query, recent.ids]);
+
+  // The rows as the eye reads them: arrow keys move through one list, not
+  // through groups, so the index and the render must flatten identically.
+  const flat = useMemo(() => groups.flatMap((group) => group.entries), [groups]);
+
+  const commit = (entry: ToolCatalogEntry): void => {
+    recent.remember(entry.id);
+    onPick(entry);
+  };
+
+  const nav = useMenuNav({
+    count: flat.length,
+    onCommit: (index) => {
+      const entry = flat[index];
+      if (entry !== undefined) commit(entry);
+    },
+  });
+
+  const searchable = entries.length >= FILTER_FROM;
+  const onQuery = (event: ChangeEvent<HTMLInputElement>): void => setQuery(event.target.value);
+
+  return (
+    <div className={className} onKeyDown={nav.onKeyDown}>
+      {searchable ? (
+        <input
+          type="search"
+          value={query}
+          onChange={onQuery}
+          aria-label={searchLabel}
+          className="border-border w-full border-b bg-transparent px-3 py-2 text-sm outline-none"
+          // The sheet is reached by a deliberate press and exists to be searched.
+          autoFocus
+        />
+      ) : null}
+      {groups.length === 0 ? (
+        // `status`, not a row: an empty result is not pickable, and a menu that
+        // renders nothing reads as broken.
+        <p role="status" className="text-muted-foreground px-3 py-2 text-sm">
+          {emptyLabel}
+        </p>
+      ) : (
+        <ToolRows
+          groups={groups}
+          onPick={commit}
+          picked={picked}
+          label={label}
+          icon={icon}
+          categoryLabel={(category) => (category === RECENT ? recentLabel : categoryLabel?.(category) ?? category)}
+          activeIndex={nav.navigated ? nav.activeIndex : -1}
+          onHover={nav.setActiveIndex}
+          recentCategory={RECENT}
+          onForget={recent.forget}
+          forgetLabel={forgetLabel}
+        />
+      )}
+    </div>
+  );
+}

package/src/composer/tools/rows.tsx

@@ -0,0 +1,180 @@
+import { Check, X } from "lucide-react";
+import { useEffect, useRef, type ReactNode } from "react";
+
+import type { ToolCatalogEntry, ToolCatalogGroup } from "../../core";
+
+export interface ToolRowsProps {
+  readonly groups: readonly ToolCatalogGroup[];
+  readonly onPick: (entry: ToolCatalogEntry) => void;
+  /** Ids already staged on the draft. A row for one of these UNPICKS it. */
+  readonly picked?: ReadonlySet<string>;
+  /** The list's accessible name. Host copy — no locales below `ui/`. */
+  readonly label: string;
+  /** Glyph for an entry's icon KEY — this package ships no icon library. */
+  readonly icon?: (key: string) => ReactNode;
+  /** The heading for a category key. Absent ⇒ the raw key, which is honest. */
+  readonly categoryLabel?: (category: string) => string;
+  /** Index into the FLATTENED rows, or -1 when the keyboard has not moved. */
+  readonly activeIndex?: number;
+  /** Pointer entering a row adopts it, so the two input modes share one cursor. */
+  readonly onHover?: (index: number) => void;
+  /** The synthetic group whose rows carry a forget control. */
+  readonly recentCategory?: string;
+  readonly onForget?: (id: string) => void;
+  readonly forgetLabel?: string;
+}
+
+/**
+ * The catalogue as grouped rows.
+ *
+ * A menu, not a listbox: nothing holds a value, and a listbox may not contain
+ * the `<button>` each row is (axe `aria-required-children`). Grouped because a
+ * flat list of forty tools gives a screen reader nothing to navigate by.
+ *
+ * Rows are numbered ACROSS groups, matching how arrow keys move: the keyboard
+ * walks what the eye reads, not the group structure under it.
+ */
+export function ToolRows({
+  groups,
+  onPick,
+  picked,
+  label,
+  icon,
+  categoryLabel,
+  activeIndex = -1,
+  onHover,
+  recentCategory,
+  onForget,
+  forgetLabel,
+}: ToolRowsProps) {
+  let row = -1;
+
+  return (
+    <div role="menu" aria-label={label} className="max-h-72 overflow-y-auto py-1">
+      {groups.map((group) => {
+        const heading = categoryLabel?.(group.category) ?? group.category;
+        const forgettable = recentCategory !== undefined && group.category === recentCategory;
+        return (
+          <div key={group.category} role="group" aria-label={heading}>
+            <p className="text-muted-foreground px-3 pt-2 pb-1 text-xs font-medium">{heading}</p>
+            {group.entries.map((entry) => {
+              row += 1;
+              const index = row;
+              return (
+                <ToolRow
+                  key={`${group.category}:${entry.id}`}
+                  entry={entry}
+                  onPick={onPick}
+                  checked={picked?.has(entry.id) ?? false}
+                  icon={icon}
+                  active={index === activeIndex}
+                  onHover={onHover === undefined ? undefined : () => onHover(index)}
+                  forgettable={forgettable}
+                  onForget={forgettable ? onForget : undefined}
+                  forgetLabel={forgetLabel}
+                />
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+interface ToolRowProps {
+  readonly entry: ToolCatalogEntry;
+  readonly onPick: (entry: ToolCatalogEntry) => void;
+  readonly checked: boolean;
+  readonly icon?: (key: string) => ReactNode;
+  readonly active: boolean;
+  readonly onHover?: () => void;
+  /** In the recents group: the trailing column carries forget, not a check. */
+  readonly forgettable: boolean;
+  readonly onForget?: (id: string) => void;
+  readonly forgetLabel?: string;
+}
+
+/**
+ * One row, which TOGGLES rather than adds.
+ *
+ * `menuitemcheckbox`, not `menuitem`: the row carries state a reader must be
+ * able to hear, and `aria-checked` is the only way to say "already staged"
+ * without inventing copy. Disabling it instead would leave the chip's `×` as
+ * the only way back — two places for one decision.
+ *
+ * The forget control is a SIBLING, not a nested button: a button inside a
+ * button is invalid HTML, and browsers resolve it by dropping one of them.
+ */
+function ToolRow({
+  entry,
+  onPick,
+  checked,
+  icon,
+  active,
+  onHover,
+  forgettable,
+  onForget,
+  forgetLabel,
+}: ToolRowProps) {
+  const glyph = entry.icon === undefined ? null : icon?.(entry.icon);
+  const rowRef = useRef<HTMLDivElement>(null);
+
+  // `nearest` scrolls the minimum: a visible row does not move, and walking the
+  // list never jumps the pane.
+  useEffect(() => {
+    if (active) rowRef.current?.scrollIntoView({ block: "nearest" });
+  }, [active]);
+
+  return (
+    <div
+      ref={rowRef}
+      /* Presentational: an unroled wrapper would break the menu's structure. */
+      role="none"
+      className="composer-tool-row relative flex items-stretch"
+      data-active={active ? "" : undefined}
+      onMouseEnter={onHover}
+    >
+      <button
+        type="button"
+        role="menuitemcheckbox"
+        aria-checked={checked}
+        onClick={() => onPick(entry)}
+        className="flex w-full items-start gap-2.5 px-3 py-1.5 text-left"
+      >
+        {glyph === null ? null : (
+          <span className="text-muted-foreground mt-0.5 shrink-0" aria-hidden>
+            {glyph}
+          </span>
+        )}
+        <span className="flex min-w-0 flex-col">
+          <span className="truncate text-sm">{entry.name}</span>
+          {/* Two lines, not `truncate`: one line cuts the half that tells two
+              neighbouring tools apart. */}
+          <span className="text-muted-foreground line-clamp-2 text-xs">{entry.summary}</span>
+        </span>
+        {/* Holds its column whether drawn or not, or the text shifts on every
+            toggle. Forget lands in this same column — one geometry, not two. */}
+        <span className="mt-0.5 ml-auto size-3.5 shrink-0" aria-hidden>
+          {checked && !forgettable ? <Check className="size-3.5" /> : null}
+        </span>
+      </button>
+      {/* One column, one meaning: a check where it is staged, forget where it
+          is recent. Never both. */}
+      {onForget === undefined ? null : (
+        <button
+          type="button"
+          /* A `menu` accepts only menu items (axe `aria-required-children`). */
+          role="menuitem"
+          aria-label={forgetLabel}
+          onClick={() => onForget(entry.id)}
+          /* Absolute over the column the check reserves: a control that appears
+             on hover must not reflow the row. Appearance is `composer.css`. */
+          className="composer-tool-forget absolute top-1.5 right-3"
+        >
+          <X className="size-3.5" />
+        </button>
+      )}
+    </div>
+  );
+}

package/src/composer/tools/use-menu-nav.ts

@@ -0,0 +1,66 @@
+import { useCallback, useEffect, useState, type KeyboardEvent } from "react";
+
+import { NO_ROW, nextRow, stepForKey } from "../../core";
+
+export interface MenuNav {
+  /** Index into the flattened rows, or `NO_ROW` before the user navigates. */
+  readonly activeIndex: number;
+  /** True once a key moved the selection — drives `aria-activedescendant`. */
+  readonly navigated: boolean;
+  readonly onKeyDown: (event: KeyboardEvent) => void;
+  readonly setActiveIndex: (index: number) => void;
+}
+
+export interface MenuNavOptions {
+  /** How many rows are currently rendered, across all groups. */
+  readonly count: number;
+  /** Commit the row at this index. */
+  readonly onCommit: (index: number) => void;
+  readonly onEscape?: () => void;
+}
+
+/**
+ * React binding over `core/tools/nav`. Where the cursor lands is that module's;
+ * this owns only the event and the state holding it.
+ *
+ * Held keys are the BROWSER's auto-repeat, deliberately: it already fires
+ * `keydown` repeatedly at the rate the user set in their OS, so a timer here
+ * would ignore that preference and race with it. `event.repeat` is not filtered.
+ *
+ * The index resets whenever the row count changes — every keystroke in the
+ * filter rebuilds the list, and an index held across that points at a different
+ * tool than the one the user was looking at.
+ */
+export function useMenuNav({ count, onCommit, onEscape }: MenuNavOptions): MenuNav {
+  const [activeIndex, setActiveIndex] = useState(NO_ROW);
+
+  useEffect(() => setActiveIndex(NO_ROW), [count]);
+
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onEscape?.();
+        return;
+      }
+      if (event.key === "Enter") {
+        // Enter before any navigation is not a pick: the user is still typing,
+        // and committing row 0 on it commits a row the user never read.
+        if (activeIndex < 0) return;
+        event.preventDefault();
+        onCommit(activeIndex);
+        return;
+      }
+
+      const step = stepForKey(event.key);
+      const next = nextRow(activeIndex, step, count);
+      if (next === NO_ROW) return;
+      // The filter input owns the caret; without this, ArrowUp jumps it to the
+      // start of the query while the selection also moves.
+      event.preventDefault();
+      setActiveIndex(next);
+    },
+    [activeIndex, count, onCommit, onEscape],
+  );
+
+  return { activeIndex, navigated: activeIndex >= 0, onKeyDown, setActiveIndex };
+}

package/src/composer/tools/use-recent-tools.ts

@@ -0,0 +1,30 @@
+import { useLocalStorage } from "@djangocfg/ui-core/hooks";
+import { useCallback } from "react";
+
+import { forgetTool, rememberTool } from "../../core";
+
+const STORAGE_KEY = "djc:chat:recent-tools";
+
+export interface RecentTools {
+  readonly ids: readonly string[];
+  readonly remember: (id: string) => void;
+  readonly forget: (id: string) => void;
+}
+
+/**
+ * The tools this user reaches for, newest first, across sessions.
+ *
+ * IDs only — names are resolved at read time, so a withdrawn tool cannot render
+ * a dead row. One key across every room: the habit is the person's.
+ */
+export function useRecentTools(): RecentTools {
+  const [ids, setIds] = useLocalStorage<readonly string[]>(STORAGE_KEY, []);
+
+  const remember = useCallback(
+    (id: string) => setIds((current) => rememberTool(current, id)),
+    [setIds],
+  );
+  const forget = useCallback((id: string) => setIds((current) => forgetTool(current, id)), [setIds]);
+
+  return { ids, remember, forget };
+}

package/src/composer/tray/banner.tsx

@@ -0,0 +1,157 @@
+/**
+ * A notice block ABOVE the composer box: a limit approaching, a plan to review.
+ *
+ * Above rather than inside, which is what separates it from `ComposerQueue`.
+ * The queue describes the DRAFT and belongs within the same rounded surface;
+ * this describes the account or the session and would read as part of the
+ * message if it shared that surface.
+ *
+ * Form adapted from vercel/ai-elements `checkpoint.tsx` and `confirmation.tsx`
+ * (Apache-2.0, submodule @ 6a9d5b1): composed parts rather than one component
+ * with a prop per feature. Their `Alert`-based shell and shadcn `Button` are
+ * NOT copied — this package styles against `ui-core` tokens and ships its own
+ * button, so only the composition survives the crossing.
+ *
+ * Composition is the whole point here, not taste. The predecessor exposed
+ * `icon`, `title`, `description`, `actions[]`, `variant`, `onDismiss` and
+ * `className` — seven props, and a caller wanting a second line or a link had
+ * no route but an eighth. Parts leave that to the caller's JSX.
+ *
+ * Copy is the HOST's: nothing here reads the dictionary, because a banner's
+ * words are always about the host's own situation (an allowance, a plan, a
+ * quota). `dismissLabel` is the exception and is required — an icon-only
+ * control needs an accessible name in all 17 locales, and a hardcoded English
+ * one is what this package exists to stop shipping.
+ */
+
+import type { ReactNode } from "react";
+import { X } from "lucide-react";
+
+/** Tints the ICON only; the surface stays neutral so a notice never shouts. */
+export type ComposerBannerTone = "info" | "warning" | "upgrade";
+
+const ICON_TINT: Record<ComposerBannerTone, string> = {
+  info: "text-muted-foreground",
+  warning: "text-destructive",
+  upgrade: "text-primary",
+};
+
+export interface ComposerBannerProps {
+  readonly children: ReactNode;
+  readonly className?: string;
+}
+
+/** The surface. Lay out its parts in the order they should read. */
+export function ComposerBanner({ children, className }: ComposerBannerProps) {
+  return (
+    <div
+      // `role="status"`, not `alert`: every use is ambient. An alert interrupts,
+      // and a limit approaching is not worth taking focus for.
+      role="status"
+      data-slot="composer-banner"
+      className={`flex w-full items-start gap-3 rounded-2xl border border-border bg-muted/60 px-3.5 py-3 text-sm text-foreground ${className ?? ""}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface ComposerBannerIconProps {
+  readonly children: ReactNode;
+  readonly tone?: ComposerBannerTone;
+}
+
+export function ComposerBannerIcon({
+  children,
+  tone = "info",
+}: ComposerBannerIconProps) {
+  return (
+    <span
+      className={`mt-0.5 flex shrink-0 [&_svg]:size-5 ${ICON_TINT[tone]}`}
+      aria-hidden
+    >
+      {children}
+    </span>
+  );
+}
+
+/** Title and body. `min-w-0` so a long word truncates instead of pushing the
+ *  actions off the row. */
+export function ComposerBannerBody({ children, className }: ComposerBannerProps) {
+  return (
+    <div className={`min-w-0 flex-1 ${className ?? ""}`}>{children}</div>
+  );
+}
+
+export function ComposerBannerTitle({ children }: { readonly children: ReactNode }) {
+  return <p className="font-semibold leading-snug">{children}</p>;
+}
+
+export function ComposerBannerDescription({
+  children,
+}: {
+  readonly children: ReactNode;
+}) {
+  return <p className="mt-0.5 text-xs text-muted-foreground">{children}</p>;
+}
+
+/** Holds the buttons. Two is the practical limit — a notice offering three
+ *  routes is a dialog wearing a banner's clothes. */
+export function ComposerBannerActions({ children }: { readonly children: ReactNode }) {
+  return <div className="flex shrink-0 items-center gap-1.5">{children}</div>;
+}
+
+export interface ComposerBannerActionProps {
+  readonly children: ReactNode;
+  readonly onClick: () => void;
+  /** `primary` fills; `outline` (default) stays bordered and neutral. */
+  readonly variant?: "primary" | "outline";
+}
+
+const ACTION_CLASS: Record<
+  NonNullable<ComposerBannerActionProps["variant"]>,
+  string
+> = {
+  primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+  outline:
+    "border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground",
+};
+
+export function ComposerBannerAction({
+  children,
+  onClick,
+  variant = "outline",
+}: ComposerBannerActionProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`inline-flex h-8 cursor-pointer items-center justify-center rounded-lg px-3 text-xs font-medium transition-colors focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none ${ACTION_CLASS[variant]}`}
+    >
+      {children}
+    </button>
+  );
+}
+
+export interface ComposerBannerDismissProps {
+  readonly onDismiss: () => void;
+  /** Required: an icon-only control with no name is invisible to a reader. */
+  readonly label: string;
+}
+
+export function ComposerBannerDismiss({
+  onDismiss,
+  label,
+}: ComposerBannerDismissProps) {
+  return (
+    <button
+      type="button"
+      onClick={onDismiss}
+      aria-label={label}
+      title={label}
+      className="-mt-1 -mr-1 inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
+    >
+      <X className="size-4" aria-hidden />
+    </button>
+  );
+}