@vvedantb/ui 0.2.2 → 0.3.0

package/README.md

@@ -5,6 +5,9 @@ Shared React 19 web UI. Source-exported: no build step.
 | Import | What it is |
 | --- | --- |
 | `@vvedantb/ui` | Primitives (Radix-based), AI elements, `playChime` and `useReplyChime`. |
+| `@vvedantb/ui/sonner` | `SonnerToaster`, its helpers and `toast`. |
+| `@vvedantb/ui/composer` | `Composer`, `ComposerShell`, `ComposerGhostText`, `ComposerIconButton`, `useComposerPrediction` and the pure prediction helpers. |
+| `@vvedantb/ui/audio` | `playChime`, `useReplyChime`, `playTone` and the shared audio floor. |
 | `@vvedantb/ui/cn` | `cn` class helper (clsx + tailwind-merge). |
 | `@vvedantb/ui/shell` | Router-free `SidebarHeader`, `PillTabs` and `SessionsHoverCard`. |
 | `@vvedantb/ui/app` | Alt-click confirm skip, update watcher, settings chrome, `useStableAuth`. See `app/README.md` in the repository. |
@@ -29,8 +32,102 @@ useReplyChime({ enabled: soundOn, isStreaming, threadId });
 ```
 
 - `playChime()`: soft rising two-note chime (WebAudio). One shared `AudioContext`, created on first use. It is a no-op on the server and when autoplay blocks audio. Calls less than 1 second apart play once.
+- `playTone(tone | tones)`: plays `{ frequency, startOffsetS?, durationS?, peakGain?, type? }` through the same floor.
+- Audio floor: every package sound shares one 1 second minimum gap. Route your own sounds through it with `withAudioFloor(() => play())` or `if (tryAcquireAudioFloor()) play()`.
+- These are also available from `@vvedantb/ui/audio`, which does not load the rest of the root barrel.
 - `useReplyChime`: chimes once when `isStreaming` goes from `true` to `false` for the same `threadId`. It is silent on the first sight of a thread, when `threadId` changes, and when `threadId` is null or undefined. While `enabled` is `false` it still tracks the edge, so enabling mid-turn does not replay a finish.
 
+## Composer
+
+Chat composer with an autosizing textarea, a footer with a plus-menu slot, action slots and a send or stop button. It also shows optional ghost-text predictions. It makes no network calls: the app supplies `getPrediction`.
+
+```tsx
+import { Composer, ComposerIconButton } from "@vvedantb/ui"; // or "@vvedantb/ui/composer"
+
+<Composer
+  value={draft}
+  onChange={setDraft}
+  onSubmit={(text) => send(text)}
+  streaming={isStreaming}
+  onStop={cancel}
+  plusMenu={<ComposerIconButton aria-label="Add">+</ComposerIconButton>}
+  attachments={chips}
+  getPrediction={(draft, { signal }) => fetchContinuation(draft, signal)}
+/>;
+```
+
+| Prop | Default | Notes |
+| --- | --- | --- |
+| `value`, `defaultValue`, `onChange` | uncontrolled, `""` | Pass `value` to control it. When controlled, clear the value yourself after `onSubmit`. When uncontrolled, the composer clears after submit. |
+| `onSubmit(text)` | none | Called with the trimmed draft on Enter or the send button. Not called for an empty draft, or when `disabled` or `streaming`. If it returns a rejected promise, an uncontrolled composer restores the draft. |
+| `streaming`, `onStop` | `false` | The stop button replaces send and calls `onStop`. Typing stays on, Enter does not submit. |
+| `disabled` | `false` | Disables the textarea and send. |
+| `placeholder` | `"Message"` | Also the textarea `aria-label`. |
+| `layout` | `"stacked"` | `"stacked"`: input above, footer bar with `plusMenu` left and `trailingActions` plus send or stop right. `"inline"`: one row with `plusMenu`, the input and the actions. Attachments stay above the row. |
+| `renderInput(ctx)` | none | Supplies your own input instead of the textarea. See Building blocks. |
+| `maxHeight` | `200` (px) | The textarea grows to this height, then scrolls. |
+| `autoFocus`, `className`, `textareaClassName` | none | `className` is the outer shell. `textareaClassName` is also applied to the ghost text mirror, so put padding and font classes there, not on the shell. |
+| `plusMenu` | none | Node, or `({ disabled }) => node`. Left of the footer. |
+| `trailingActions` | none | Node, or `({ disabled, streaming }) => node`. Right of the footer, before send or stop. |
+| `attachments` | none | Node rendered in a row above the textarea. The app renders the chips and their remove buttons. |
+| `getPrediction(draft, { signal })` | none | Returns the continuation of `draft`. Pass `signal` to your request. Errors show no ghost text. |
+| `predictionDebounceMs` | `500` (ms) | Pause after the last edit before a request. |
+| `predictionMinLength` | `12` (characters) | Minimum trimmed draft length. |
+
+Keys: Enter sends, Shift+Enter adds a line, and nothing sends during IME composition. Tab accepts the ghost text, and Esc hides it for the current draft.
+
+Predictions skip drafts shorter than `predictionMinLength`, drafts whose last word starts with `@` or `/`, and drafts that match `/[.!?]\s*$/`. Each edit aborts the previous request, and a result for an older draft is dropped. Ghost text shows only while the caret is at the end of the draft, so Tab always appends. It does not insert at a caret in the middle of the text. A space joins the draft and the prediction when neither has whitespace at the join.
+
+The ref goes to the textarea. `ComposerIconButton` is a round icon-only ghost button for the slots. The pure helpers `shouldSkipComposerPrediction`, `joinComposerPrediction`, `nextComposerPredictionState`, `visibleComposerPrediction` and `acceptComposerPrediction`, and the `useComposerPrediction` hook, are exported for apps with their own input.
+
+### Building blocks
+
+`renderInput` swaps the textarea for your own input and keeps the shell, slots, send or stop and predictions. The context gives `value`, `onChange`, `onKeyDown`, `ghostText`, `acceptGhost`, `dismissGhost`, `inputRef`, `disabled`, `placeholder`, `streaming`, `maxHeight` and `textareaClassName`.
+
+```tsx
+<Composer
+  layout="inline"
+  getPrediction={getPrediction}
+  renderInput={(ctx) => (
+    <MyEditor
+      ref={ctx.inputRef}
+      data-composer-input=""
+      value={ctx.value}
+      onChange={ctx.onChange}
+      onKeyDown={ctx.onKeyDown}
+      ghostText={ctx.ghostText}
+    />
+  )}
+/>
+```
+
+Rules for a custom input:
+
+- `onKeyDown` handles Enter (calls `preventDefault`, then submits, never during IME composition), Tab (accepts the ghost text) and Esc (dismisses it). Shift+Enter is not handled: your editor decides what a newline does.
+- Autosize and the caret-at-end ghost gate apply to the default textarea only. With `renderInput`, predictions run whenever the composer is not disabled or streaming. You size the editor (use `maxHeight`) and decide when the caret allows ghost text, for example by ignoring `ghostText`.
+- Put the `data-composer-input` attribute on the editor so the shell shows the focus ring.
+- `ref` on `Composer` points at the default textarea only. Use `ctx.inputRef` for a custom input.
+
+To build without `Composer`, assemble the parts yourself. `useComposerPrediction` takes the draft string and reads no element. `ComposerGhostText` draws the draft invisibly, then the ghost text, so give it the same padding and font classes as your editor and place it under the editor.
+
+```tsx
+import { ComposerGhostText, ComposerShell, useComposerPrediction } from "@vvedantb/ui/composer";
+
+function MentionComposer({ draft, setDraft, send }: Props) {
+  const prediction = useComposerPrediction({ value: draft, enabled: true, getPrediction });
+  return (
+    <ComposerShell layout="inline" plusMenu={plus} canSend={draft.trim() !== ""} onSend={send}>
+      <ComposerGhostText value={draft} ghostText={prediction.ghost} className="px-2 py-1 text-sm leading-6" />
+      <Editor data-composer-input="" className="relative px-2 py-1 text-sm leading-6" onChange={setDraft} />
+    </ComposerShell>
+  );
+}
+```
+
+`ComposerShell` props: `layout`, `disabled`, `streaming`, `canSend`, `onSend`, `onStop`, `plusMenu`, `trailingActions`, `attachments`, `className` and `children` (the input region). In the shell the Enter, Tab and Esc keys are yours to wire when you do not use `Composer`.
+
+Fixture: `composer/examples/` (see its README). It has a `tokens.css` page and a `compat-shadcn-rgb.css` page, each with light and dark.
+
 ## Sessions hover card
 
 ```tsx
@@ -45,13 +142,13 @@ import { SessionsHoverCard } from "@vvedantb/ui/shell";
 </SessionsHoverCard>
 ```
 
-`children` is the trigger. Defaults: `openDelay` 400 ms, `closeDelay` 150 ms, `side="right"`, `align="start"`, `sideOffset` 8, width and padding `w-64 p-3` (override with `className`). `body` is a node or a function of `{ open }`. `loadContent` runs only while the card is open. Control the state with `open`, `defaultOpen` and `onOpenChange`. Fixture: `shell/examples/sessions-hover-card/`.
+`children` is the trigger. It is rendered with `asChild` by default, so it keeps its own handlers (such as a context menu). Extra props and the ref go to it. Use `asChild={false}` for a default trigger element. The content portals to `document.body` by default, so `overflow:hidden` ancestors do not clip it. Pass `portal={false}` to opt out. `surface` is `"overlay"` (default), `"surface"` (`rounded-surface`) or `"glass"` (`glass-panel-strong`, `rounded-surface`). `className` merges over the surface without `!`. Defaults: `openDelay` 400 ms, `closeDelay` 150 ms, `side="right"`, `align="start"`, `sideOffset` 8, width and padding `w-64 p-3` (override with `className`). `body` is a node or a function of `{ open }`. `loadContent` runs only while the card is open. Control the state with `open`, `defaultOpen` and `onOpenChange`. Fixture: `shell/examples/sessions-hover-card/`.
 
 ## Toaster
 
 ```tsx
 import { toast } from "sonner";
-import { SonnerToaster } from "@vvedantb/ui";
+import { SonnerToaster } from "@vvedantb/ui"; // or "@vvedantb/ui/sonner"
 
 <SonnerToaster
   theme={theme}
@@ -73,7 +170,8 @@ Opt-in props (all default to the current look):
 
 | Prop | Values | Effect |
 | --- | --- | --- |
-| `toastRadius` | `"lg"` (default), `"surface"` | `rounded-lg` or `rounded-surface` (from `tokens/css/utilities.css`). |
+| `toastRadius` | `"lg"` (default), `"surface"`, `"control"` | `rounded-lg`, `rounded-surface` (from `tokens/css/utilities.css`) or `rounded-field` (the input radius). |
+| `density` | `"default"`, `"compact"` | Current padding and text, or `gap-2 px-3 py-2 text-xs` with `text-xs` descriptions. |
 | `toastIcons` | `"default"`, `"filled24"` | Sonner icons or 24px filled success, info, warning and error icons, a matching loader and a 14px close cross. |
 | `closeButtonStyle` | `"default"`, `"hoverChip"` | Text-style close button or a round chip at the top-right, shown on hover and always on small screens. It turns on `closeButton` unless you set it. |
 | `sonnerVars` | `false` (default), `true` | Sets `--normal-bg`, `--normal-border`, `--normal-text`, `--normal-bg-hover` and `--normal-border-hover` from `--color-card`, `--color-border`, `--color-foreground` and `--color-muted`, and `font-family: inherit`. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: primitives, shell pieces, app helpers, design tokens, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",
@@ -21,6 +21,18 @@
       "types": "./src/utils/cn.ts",
       "default": "./src/utils/cn.ts"
     },
+    "./sonner": {
+      "types": "./src/sonner.ts",
+      "default": "./src/sonner.ts"
+    },
+    "./audio": {
+      "types": "./src/audio/index.ts",
+      "default": "./src/audio/index.ts"
+    },
+    "./composer": {
+      "types": "./src/composer/index.ts",
+      "default": "./src/composer/index.ts"
+    },
     "./shell": {
       "types": "./shell/src/index.ts",
       "default": "./shell/src/index.ts"

package/shell/src/SessionsHoverCard.tsx

@@ -1,17 +1,49 @@
-import { useEffect, useState } from "react";
-import type { ReactNode } from "react";
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "../../src/ui/hover-card";
+import { forwardRef, useEffect, useState } from "react";
+import type { ComponentPropsWithoutRef, ComponentRef, ReactNode } from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { HoverCard, HoverCardTrigger } from "../../src/ui/hover-card";
+import { floatingSurfaceAnimateClass, floatingSurfaceClass } from "../../src/ui/_menu-classes";
 import { cn } from "../../src/utils/cn";
 
 export type SessionsHoverCardContext = { open: boolean };
 
-export type SessionsHoverCardProps = {
-  /** The element that triggers the card, such as a list row. Rendered with `asChild`. */
+export type SessionsHoverCardSurface = "overlay" | "surface" | "glass";
+
+/**
+ * Surface classes. Only `overlay` carries the shared floating surface, so the
+ * others need no `!` overrides, and `className` merges over all of them.
+ */
+const surfaceClasses: Record<SessionsHoverCardSurface, string> = {
+  overlay: floatingSurfaceClass,
+  surface: "rounded-surface bg-overlay text-overlay-foreground smooth-shadow-ring-lg",
+  glass: "rounded-surface glass-panel-strong text-foreground smooth-shadow-ring-lg",
+};
+
+export type SessionsHoverCardProps = Omit<
+  ComponentPropsWithoutRef<typeof HoverCardTrigger>,
+  "className" | "children"
+> & {
+  /**
+   * The trigger. With `asChild` (default) it is the element that triggers the
+   * card, such as a list row. Trigger props and the ref go to that element,
+   * which keeps its own handlers. With `asChild={false}` the children render
+   * inside a default trigger element.
+   */
   children: ReactNode;
+  /** Default `true`. */
+  asChild?: boolean;
+  /**
+   * Render the content in a portal on `document.body`, so `overflow:hidden`
+   * ancestors do not clip it. Default `true`. Use `false` to keep the content
+   * in place in the DOM.
+   */
+  portal?: boolean;
+  /**
+   * `"overlay"` (default): floating overlay, `rounded-lg`. `"surface"`: same
+   * fill with `rounded-surface`. `"glass"`: `glass-panel-strong` with
+   * `rounded-surface`.
+   */
+  surface?: SessionsHoverCardSurface;
   header?: ReactNode;
   /**
    * Body slot. A function runs only while the card is open, so it can start
@@ -34,7 +66,7 @@ export type SessionsHoverCardProps = {
   side?: "top" | "right" | "bottom" | "left";
   align?: "start" | "center" | "end";
   sideOffset?: number;
-  /** Merged over the default `w-64 p-3`. */
+  /** Merged over the default `w-64 p-3` and the surface classes. */
   className?: string;
 };
 
@@ -86,8 +118,14 @@ function RenderBody({
  * position, width and padding, and gives header, body and footer slots. The
  * app supplies the content.
  */
-export function SessionsHoverCard({
+export const SessionsHoverCard = forwardRef<
+  ComponentRef<typeof HoverCardTrigger>,
+  SessionsHoverCardProps
+>(function SessionsHoverCard({
   children,
+  asChild = true,
+  portal = true,
+  surface = "overlay",
   header,
   body,
   loadContent,
@@ -102,7 +140,8 @@ export function SessionsHoverCard({
   align = "start",
   sideOffset = 8,
   className,
-}: SessionsHoverCardProps) {
+  ...triggerProps
+}, ref) {
   const [openState, setOpenState] = useState(defaultOpen);
   const open = openProp ?? openState;
 
@@ -119,6 +158,31 @@ export function SessionsHoverCard({
     body
   );
 
+  const content = (
+    <HoverCardPrimitive.Content
+      side={side}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 outline-none max-sm:max-h-[85dvh] max-sm:max-w-[calc(100vw-2rem)] max-sm:overflow-y-auto",
+        surfaceClasses[surface],
+        floatingSurfaceAnimateClass,
+        "w-64 p-3",
+        className,
+      )}
+    >
+      {header ? (
+        <div className="mb-2 text-sm font-medium text-foreground">{header}</div>
+      ) : null}
+      {bodyNode != null ? (
+        <div className="text-sm text-muted-foreground">{bodyNode}</div>
+      ) : null}
+      {footer ? (
+        <div className="mt-2 text-xs text-muted-foreground">{footer}</div>
+      ) : null}
+    </HoverCardPrimitive.Content>
+  );
+
   return (
     <HoverCard
       open={open}
@@ -126,23 +190,10 @@ export function SessionsHoverCard({
       openDelay={openDelay}
       closeDelay={closeDelay}
     >
-      <HoverCardTrigger asChild>{children}</HoverCardTrigger>
-      <HoverCardContent
-        side={side}
-        align={align}
-        sideOffset={sideOffset}
-        className={cn("w-64 p-3", className)}
-      >
-        {header ? (
-          <div className="mb-2 text-sm font-medium text-foreground">{header}</div>
-        ) : null}
-        {bodyNode != null ? (
-          <div className="text-sm text-muted-foreground">{bodyNode}</div>
-        ) : null}
-        {footer ? (
-          <div className="mt-2 text-xs text-muted-foreground">{footer}</div>
-        ) : null}
-      </HoverCardContent>
+      <HoverCardTrigger ref={ref} asChild={asChild} {...triggerProps}>
+        {children}
+      </HoverCardTrigger>
+      {portal ? <HoverCardPrimitive.Portal>{content}</HoverCardPrimitive.Portal> : content}
     </HoverCard>
   );
-}
+});

package/shell/src/index.ts

@@ -8,4 +8,5 @@ export { SessionsHoverCard } from "./SessionsHoverCard.js";
 export type {
   SessionsHoverCardContext,
   SessionsHoverCardProps,
+  SessionsHoverCardSurface,
 } from "./SessionsHoverCard.js";

package/src/audio/audioFloor.ts

@@ -0,0 +1,37 @@
+/** Calls closer together than this are dropped, so overlapping events sound once. */
+export const AUDIO_FLOOR_MIN_GAP_S = 1;
+
+let lastAcquiredAtS: number | null = null;
+
+function nowS(): number {
+  return performance.now() / 1000;
+}
+
+/**
+ * Takes the shared audio floor. Returns `true` when at least 1 second has
+ * passed since the last sound that took it, and starts a new gap. Returns
+ * `false` otherwise, and the caller should stay silent.
+ *
+ * Every package sound (`playChime`, `playTone`) goes through this one floor.
+ * Apps can route their own sounds through it too.
+ */
+export function tryAcquireAudioFloor(): boolean {
+  const now = nowS();
+  if (lastAcquiredAtS !== null && now - lastAcquiredAtS < AUDIO_FLOOR_MIN_GAP_S) {
+    return false;
+  }
+  lastAcquiredAtS = now;
+  return true;
+}
+
+/** Runs `play` only if the shared floor is free. Returns whether it ran. */
+export function withAudioFloor(play: () => void): boolean {
+  if (!tryAcquireAudioFloor()) return false;
+  play();
+  return true;
+}
+
+/** Clears the floor. For tests. */
+export function resetAudioFloor(): void {
+  lastAcquiredAtS = null;
+}

package/src/audio/index.ts

@@ -1,3 +1,10 @@
 export { playChime } from "./playChime";
+export { playTone } from "./playTone";
+export type { Tone } from "./playTone";
+export {
+  AUDIO_FLOOR_MIN_GAP_S,
+  tryAcquireAudioFloor,
+  withAudioFloor,
+} from "./audioFloor";
 export { useReplyChime, nextReplyChimeState } from "./useReplyChime";
 export type { ReplyChimeInput, ReplyChimeWatch } from "./useReplyChime";

package/src/audio/playChime.ts

@@ -1,9 +1,4 @@
-type Tone = {
-  frequency: number;
-  startOffsetS: number;
-  durationS: number;
-  peakGain: number;
-};
+import { playTone, type Tone } from "./playTone";
 
 /** A soft rising interval (A5 then D6). The second note overlaps the first. */
 const REPLY_CHIME: readonly Tone[] = [
@@ -11,66 +6,13 @@ const REPLY_CHIME: readonly Tone[] = [
   { frequency: 1174.66, startOffsetS: 0.09, durationS: 0.28, peakGain: 0.14 },
 ];
 
-/** Long enough to avoid a click on attack. */
-const ATTACK_S = 0.012;
-
-/** Calls closer together than this are dropped, so overlapping events sound once. */
-const MIN_INTERVAL_S = 1;
-
-let sharedContext: AudioContext | null = null;
-let lastPlayedAtS: number | null = null;
-
-function getAudioContext(): AudioContext | null {
-  if (sharedContext) return sharedContext;
-  if (typeof window === "undefined" || !window.AudioContext) return null;
-  try {
-    sharedContext = new window.AudioContext();
-  } catch {
-    return null;
-  }
-  return sharedContext;
-}
-
 /**
  * Plays a soft rising two-note chime with WebAudio.
  *
  * The context is created on first use and shared. The call is a no-op on the
- * server, without WebAudio, or while autoplay policy blocks audio.
+ * server, without WebAudio, or while autoplay policy blocks audio. It shares
+ * the 1 second floor with every other package sound.
  */
 export function playChime(): void {
-  const context = getAudioContext();
-  if (!context) return;
-
-  if (context.state === "suspended") {
-    try {
-      context.resume().catch(() => undefined);
-    } catch {
-      return;
-    }
-  }
-
-  const start = context.currentTime;
-  if (lastPlayedAtS !== null && start - lastPlayedAtS < MIN_INTERVAL_S) return;
-  lastPlayedAtS = start;
-
-  try {
-    for (const tone of REPLY_CHIME) {
-      const oscillator = context.createOscillator();
-      const envelope = context.createGain();
-      oscillator.type = "sine";
-      oscillator.frequency.value = tone.frequency;
-
-      const toneStart = start + tone.startOffsetS;
-      const toneEnd = toneStart + tone.durationS;
-      envelope.gain.setValueAtTime(0, toneStart);
-      envelope.gain.linearRampToValueAtTime(tone.peakGain, toneStart + ATTACK_S);
-      envelope.gain.exponentialRampToValueAtTime(0.0001, toneEnd);
-
-      oscillator.connect(envelope).connect(context.destination);
-      oscillator.start(toneStart);
-      oscillator.stop(toneEnd);
-    }
-  } catch {
-    // Audio is optional. Stay silent on any failure.
-  }
+  playTone(REPLY_CHIME);
 }

package/src/audio/playTone.ts

@@ -0,0 +1,73 @@
+import { tryAcquireAudioFloor } from "./audioFloor";
+
+export type Tone = {
+  /** Pitch in Hz. */
+  frequency: number;
+  /** Delay from the start of the call, in seconds. Default 0. */
+  startOffsetS?: number;
+  /** Length in seconds. Default 0.28. */
+  durationS?: number;
+  /** Peak gain from 0 to 1. Default 0.14. */
+  peakGain?: number;
+  /** Default "sine". */
+  type?: OscillatorType;
+};
+
+/** Long enough to avoid a click on attack. */
+const ATTACK_S = 0.012;
+
+let sharedContext: AudioContext | null = null;
+
+function getAudioContext(): AudioContext | null {
+  if (sharedContext) return sharedContext;
+  if (typeof window === "undefined" || !window.AudioContext) return null;
+  try {
+    sharedContext = new window.AudioContext();
+  } catch {
+    return null;
+  }
+  return sharedContext;
+}
+
+/**
+ * Plays one tone or a sequence of overlapping tones with WebAudio, through the
+ * shared 1 second floor (see `tryAcquireAudioFloor`). The context is created on
+ * first use and shared. The call is a no-op on the server, without WebAudio,
+ * or while autoplay policy blocks audio.
+ */
+export function playTone(tones: Tone | readonly Tone[]): void {
+  const context = getAudioContext();
+  if (!context) return;
+
+  if (context.state === "suspended") {
+    try {
+      context.resume().catch(() => undefined);
+    } catch {
+      return;
+    }
+  }
+
+  if (!tryAcquireAudioFloor()) return;
+
+  try {
+    const start = context.currentTime;
+    for (const tone of Array.isArray(tones) ? tones : [tones as Tone]) {
+      const oscillator = context.createOscillator();
+      const envelope = context.createGain();
+      oscillator.type = tone.type ?? "sine";
+      oscillator.frequency.value = tone.frequency;
+
+      const toneStart = start + (tone.startOffsetS ?? 0);
+      const toneEnd = toneStart + (tone.durationS ?? 0.28);
+      envelope.gain.setValueAtTime(0, toneStart);
+      envelope.gain.linearRampToValueAtTime(tone.peakGain ?? 0.14, toneStart + ATTACK_S);
+      envelope.gain.exponentialRampToValueAtTime(0.0001, toneEnd);
+
+      oscillator.connect(envelope).connect(context.destination);
+      oscillator.start(toneStart);
+      oscillator.stop(toneEnd);
+    }
+  } catch {
+    // Audio is optional. Stay silent on any failure.
+  }
+}

package/src/composer/Composer.tsx

@@ -0,0 +1,469 @@
+"use client";
+
+import * as React from "react";
+import { IconArrowUp, IconPlayerStop } from "@tabler/icons-react";
+
+import { cn } from "../utils/cn";
+import { Button } from "../ui/button";
+import {
+  COMPOSER_PREDICTION_DEBOUNCE_MS,
+  COMPOSER_PREDICTION_MIN_LENGTH,
+  acceptComposerPrediction,
+} from "./prediction";
+import { useComposerPrediction } from "./useComposerPrediction";
+
+export type ComposerSlotContext = { disabled: boolean };
+export type ComposerTrailingContext = { disabled: boolean; streaming: boolean };
+export type ComposerLayout = "stacked" | "inline";
+
+export type ComposerInputRenderContext = {
+  value: string;
+  onChange: (value: string) => void;
+  /**
+   * Shared key handler. Enter submits (preventDefault, not while composing),
+   * Tab accepts the ghost text, Esc dismisses it. It ignores IME composition.
+   * Shift+Enter is not handled: the caller decides what a newline does.
+   */
+  onKeyDown: (event: React.KeyboardEvent) => void;
+  /** Visible ghost text including the joining space, or `""`. */
+  ghostText: string;
+  acceptGhost: () => void;
+  dismissGhost: () => void;
+  /** Attach to the input element (textarea or contenteditable root). */
+  inputRef: React.RefObject<HTMLElement | null>;
+  disabled: boolean;
+  placeholder: string;
+  streaming: boolean;
+  maxHeight: number;
+  textareaClassName?: string;
+};
+
+export type ComposerProps = {
+  /** Controlled value. Omit it for an uncontrolled composer. */
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+
+  /** Called with the trimmed draft on Enter or the send button. Never called for an empty draft. */
+  onSubmit?: (value: string) => void | Promise<void>;
+  onStop?: () => void;
+  /** Shows the stop button in place of send. Typing stays enabled. Enter does not submit. */
+  streaming?: boolean;
+  /** Disables the textarea and the send button. */
+  disabled?: boolean;
+
+  placeholder?: string;
+  /** Maximum textarea height in px. The textarea scrolls after it. Default 200. */
+  maxHeight?: number;
+  autoFocus?: boolean;
+  /** Classes for the outer shell. */
+  className?: string;
+  /** `"stacked"` (default): input above, footer bar below. `"inline"`: one row with plus, input and actions. */
+  layout?: ComposerLayout;
+  /**
+   * Supplies your own input (for example a contenteditable editor) in place of
+   * the textarea. The shell, slots, send/stop and predictions stay. Autosize
+   * and the caret-at-end gate apply to the default textarea only: the caller
+   * sizes the editor and decides when ghost text is valid.
+   */
+  renderInput?: (ctx: ComposerInputRenderContext) => React.ReactNode;
+  /** Classes for the textarea. Also applied to the ghost text mirror, so keep padding and font here. */
+  textareaClassName?: string;
+
+  /** Left of the footer. */
+  plusMenu?: React.ReactNode | ((ctx: ComposerSlotContext) => React.ReactNode);
+  /** Right of the footer, before send or stop. */
+  trailingActions?:
+    | React.ReactNode
+    | ((ctx: ComposerTrailingContext) => React.ReactNode);
+  /** Row above the textarea. The caller renders the chips and their remove buttons. */
+  attachments?: React.ReactNode;
+
+  /**
+   * Returns the continuation of a draft, shown as ghost text. The package makes
+   * no requests: the caller owns the network call and should pass `signal` to it.
+   */
+  getPrediction?: (draft: string, opts: { signal: AbortSignal }) => Promise<string>;
+  /** Default 500 ms. */
+  predictionDebounceMs?: number;
+  /** Default 12 characters (trimmed). */
+  predictionMinLength?: number;
+};
+
+const DEFAULT_MAX_HEIGHT = 200;
+
+// The textarea and its ghost text mirror must share these metrics.
+const TEXT_METRICS_BASE = "block w-full text-sm leading-6 break-words whitespace-pre-wrap";
+const textMetrics = (layout: ComposerLayout) =>
+  cn(TEXT_METRICS_BASE, layout === "inline" ? "px-2 py-1" : "px-4 pt-3.5 pb-1");
+
+function isCaretAtEnd(el: HTMLTextAreaElement): boolean {
+  return el.selectionStart === el.selectionEnd && el.selectionEnd === el.value.length;
+}
+
+/** Icon-only ghost button for the footer: `plusMenu` triggers, `trailingActions`. */
+const ComposerIconButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "ghost", size = "icon-sm", type = "button", ...props }, ref) => (
+  <Button
+    ref={ref}
+    type={type}
+    variant={variant}
+    size={size}
+    className={cn("rounded-full", className)}
+    {...props}
+  />
+));
+ComposerIconButton.displayName = "ComposerIconButton";
+
+
+type SlotNode<C> = React.ReactNode | ((ctx: C) => React.ReactNode);
+
+export type ComposerShellProps = {
+  layout?: ComposerLayout;
+  disabled?: boolean;
+  streaming?: boolean;
+  /** Enables the send button. */
+  canSend?: boolean;
+  onSend?: () => void;
+  onStop?: () => void;
+  plusMenu?: SlotNode<ComposerSlotContext>;
+  trailingActions?: SlotNode<ComposerTrailingContext>;
+  attachments?: React.ReactNode;
+  className?: string;
+  /** The input region: a textarea, a contenteditable, plus any ghost overlay. */
+  children?: React.ReactNode;
+};
+
+/**
+ * Outer chrome of the composer: border, field tokens, focus ring, attachments,
+ * plus-menu and trailing slots, and send or stop. Put your input in `children`.
+ * The focus ring follows any descendant with the `data-composer-input`
+ * attribute that matches `:focus-visible`.
+ */
+function ComposerShell({
+  layout = "stacked",
+  disabled = false,
+  streaming = false,
+  canSend = false,
+  onSend,
+  onStop,
+  plusMenu,
+  trailingActions,
+  attachments,
+  className,
+  children,
+}: ComposerShellProps) {
+  const plus = typeof plusMenu === "function" ? plusMenu({ disabled }) : plusMenu;
+  const trailing =
+    typeof trailingActions === "function"
+      ? trailingActions({ disabled, streaming })
+      : trailingActions;
+  const inline = layout === "inline";
+
+  const action = streaming ? (
+    <ComposerIconButton
+      variant="default"
+      aria-label="Stop generating"
+      data-slot="composer-stop"
+      onClick={() => onStop?.()}
+    >
+      <IconPlayerStop className="size-4" aria-hidden="true" />
+    </ComposerIconButton>
+  ) : (
+    <ComposerIconButton
+      variant="default"
+      aria-label="Send message"
+      data-slot="composer-send"
+      disabled={!canSend}
+      onClick={() => onSend?.()}
+    >
+      <IconArrowUp className="size-4" aria-hidden="true" />
+    </ComposerIconButton>
+  );
+
+  return (
+    <div
+      data-slot="composer"
+      data-layout={layout}
+      data-disabled={disabled || undefined}
+      data-streaming={streaming || undefined}
+      className={cn(
+        "group/composer relative flex w-full min-w-0 flex-col rounded-field border border-border bg-field-background text-sm transition-[border-color,box-shadow] duration-200 ease-smooth",
+        "has-[[data-composer-input]:focus-visible]:border-focus-border has-[[data-composer-input]:focus-visible]:ring-2 has-[[data-composer-input]:focus-visible]:ring-focus-ring",
+        disabled && "opacity-60",
+        className,
+      )}
+    >
+      {attachments ? (
+        <div data-slot="composer-attachments" className="flex flex-wrap items-center gap-2 px-3 pt-3">
+          {attachments}
+        </div>
+      ) : null}
+
+      {inline ? (
+        <div data-slot="composer-row" className="flex min-w-0 items-end gap-1 p-1.5">
+          {plus ? <div className="flex shrink-0 items-center gap-1">{plus}</div> : null}
+          <div data-slot="composer-input-region" className="relative min-w-0 flex-1">
+            {children}
+          </div>
+          <div className="flex shrink-0 items-center gap-1">
+            {trailing}
+            {action}
+          </div>
+        </div>
+      ) : (
+        <>
+          <div data-slot="composer-input-region" className="relative min-w-0">
+            {children}
+          </div>
+          <div data-slot="composer-footer" className="flex items-center gap-1 px-2 pt-1 pb-2">
+            {plus ? <div className="flex items-center gap-1">{plus}</div> : null}
+            <div className="ml-auto flex items-center gap-1">
+              {trailing}
+              {action}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export type ComposerGhostTextProps = {
+  value: string;
+  ghostText: string;
+  className?: string;
+};
+
+/**
+ * Input-agnostic ghost overlay. It renders the draft invisibly, then the ghost
+ * text, so the ghost lands after the last character. Position it absolutely
+ * under (or over) your input and give it the same padding and font classes.
+ */
+const ComposerGhostText = React.forwardRef<HTMLDivElement, ComposerGhostTextProps>(
+  function ComposerGhostText({ value, ghostText, className }, ref) {
+    return (
+      <div
+        ref={ref}
+        aria-hidden="true"
+        data-slot="composer-ghost"
+        className={cn(
+          "pointer-events-none absolute inset-0 overflow-y-auto [scrollbar-color:transparent_transparent] [&::-webkit-scrollbar]:bg-transparent",
+          className,
+        )}
+      >
+        <span className="invisible">{value}</span>
+        {ghostText ? <span className="text-muted-foreground/50">{ghostText}</span> : null}
+      </div>
+    );
+  },
+);
+
+/**
+ * Chat composer: autosizing textarea, plus-menu and action slots, send/stop
+ * button and optional ghost-text predictions. The ref points at the textarea.
+ */
+const Composer = React.forwardRef<HTMLTextAreaElement, ComposerProps>(function Composer(
+  {
+    value: valueProp,
+    defaultValue = "",
+    onChange,
+    onSubmit,
+    onStop,
+    streaming = false,
+    disabled = false,
+    placeholder = "Message",
+    maxHeight = DEFAULT_MAX_HEIGHT,
+    autoFocus,
+    className,
+    textareaClassName,
+    layout = "stacked",
+    renderInput,
+    plusMenu,
+    trailingActions,
+    attachments,
+    getPrediction,
+    predictionDebounceMs = COMPOSER_PREDICTION_DEBOUNCE_MS,
+    predictionMinLength = COMPOSER_PREDICTION_MIN_LENGTH,
+  },
+  forwardedRef,
+) {
+  const isControlled = valueProp !== undefined;
+  const [inner, setInner] = React.useState(defaultValue);
+  const value = isControlled ? valueProp : inner;
+
+  const textareaRef = React.useRef<HTMLTextAreaElement | null>(null);
+  const mirrorRef = React.useRef<HTMLDivElement | null>(null);
+  const customInputRef = React.useRef<HTMLElement | null>(null);
+  const custom = renderInput !== undefined;
+  const setRefs = React.useCallback(
+    (node: HTMLTextAreaElement | null) => {
+      textareaRef.current = node;
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [forwardedRef],
+  );
+
+  const setValue = React.useCallback(
+    (next: string) => {
+      if (!isControlled) setInner(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange],
+  );
+
+  // Ghost text shows only while the caret sits at the end of the draft.
+  const [caretAtEnd, setCaretAtEnd] = React.useState(true);
+  const prediction = useComposerPrediction({
+    value,
+    enabled: (custom || caretAtEnd) && !disabled && !streaming,
+    getPrediction,
+    debounceMs: predictionDebounceMs,
+    minLength: predictionMinLength,
+  });
+  const ghost = prediction.ghost;
+
+  // Autosize: grow with the content up to `maxHeight`, then scroll.
+  React.useLayoutEffect(() => {
+    const el = textareaRef.current;
+    if (custom || !el) return;
+    el.style.height = "auto";
+    const full = el.scrollHeight;
+    el.style.height = `${Math.min(full, maxHeight)}px`;
+    el.style.overflowY = full > maxHeight ? "auto" : "hidden";
+  }, [value, maxHeight, custom]);
+
+  const syncScroll = () => {
+    if (mirrorRef.current && textareaRef.current) {
+      mirrorRef.current.scrollTop = textareaRef.current.scrollTop;
+    }
+  };
+  React.useLayoutEffect(syncScroll, [value, ghost]);
+
+  const canSend = !disabled && !streaming && value.trim() !== "";
+
+  const submit = () => {
+    if (!canSend) return;
+    const draft = value.trim();
+    const result = onSubmit?.(draft);
+    if (!isControlled) setInner("");
+    if (!isControlled) onChange?.("");
+    prediction.clear();
+    if (result && typeof result.then === "function") {
+      // A failed async submit gives the draft back, unless the user already typed again.
+      result.then(undefined, () => {
+        if (!isControlled) setInner((current) => (current === "" ? draft : current));
+      });
+    }
+  };
+
+  const acceptGhost = () => {
+    if (!ghost) return;
+    prediction.clear();
+    setValue(acceptComposerPrediction(value, ghost));
+  };
+
+  const onKeyDown = (event: React.KeyboardEvent) => {
+    const el = event.currentTarget;
+    const native = event.nativeEvent;
+    if (native.isComposing || event.keyCode === 229) return;
+
+    if (event.key === "Tab" && !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
+      // The caret gate applies to the default textarea only. A custom input owns it.
+      const atEnd = custom || !(el instanceof HTMLTextAreaElement) || isCaretAtEnd(el);
+      if (ghost && atEnd) {
+        event.preventDefault();
+        acceptGhost();
+      }
+      return;
+    }
+    if (event.key === "Escape") {
+      if (ghost) {
+        event.preventDefault();
+        prediction.dismiss();
+      }
+      return;
+    }
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      submit();
+    }
+  };
+
+  const updateCaret = (el: HTMLTextAreaElement) => setCaretAtEnd(isCaretAtEnd(el));
+
+  const metrics = textMetrics(layout);
+
+  const input = renderInput ? (
+    renderInput({
+      value,
+      onChange: setValue,
+      onKeyDown,
+      ghostText: ghost,
+      acceptGhost,
+      dismissGhost: prediction.dismiss,
+      inputRef: customInputRef,
+      disabled,
+      placeholder,
+      streaming,
+      maxHeight,
+      textareaClassName,
+    })
+  ) : (
+    <>
+      <ComposerGhostText
+        ref={mirrorRef}
+        value={value}
+        ghostText={ghost}
+        className={cn(metrics, textareaClassName)}
+      />
+      <textarea
+        ref={setRefs}
+        data-slot="composer-textarea"
+        data-composer-input=""
+        rows={1}
+        value={value}
+        placeholder={placeholder}
+        aria-label={placeholder}
+        disabled={disabled}
+        autoFocus={autoFocus}
+        onChange={(event) => {
+          setValue(event.target.value);
+          updateCaret(event.target);
+        }}
+        onKeyDown={onKeyDown}
+        onSelect={(event) => updateCaret(event.currentTarget)}
+        onKeyUp={(event) => updateCaret(event.currentTarget)}
+        onClick={(event) => updateCaret(event.currentTarget)}
+        onScroll={syncScroll}
+        className={cn(
+          metrics,
+          "relative resize-none overflow-y-hidden border-0 bg-transparent text-foreground outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed",
+          textareaClassName,
+        )}
+      />
+    </>
+  );
+
+  return (
+    <ComposerShell
+      layout={layout}
+      disabled={disabled}
+      streaming={streaming}
+      canSend={canSend}
+      onSend={submit}
+      onStop={onStop}
+      plusMenu={plusMenu}
+      trailingActions={trailingActions}
+      attachments={attachments}
+      className={className}
+    >
+      {input}
+    </ComposerShell>
+  );
+});
+
+export { Composer, ComposerGhostText, ComposerIconButton, ComposerShell };

package/src/composer/index.ts

@@ -0,0 +1,23 @@
+export { Composer, ComposerGhostText, ComposerIconButton, ComposerShell } from "./Composer";
+export type {
+  ComposerGhostTextProps,
+  ComposerInputRenderContext,
+  ComposerLayout,
+  ComposerProps,
+  ComposerShellProps,
+  ComposerSlotContext,
+  ComposerTrailingContext,
+} from "./Composer";
+export { useComposerPrediction } from "./useComposerPrediction";
+export type { ComposerPrediction, UseComposerPredictionOptions } from "./useComposerPrediction";
+export {
+  COMPOSER_PREDICTION_DEBOUNCE_MS,
+  COMPOSER_PREDICTION_MIN_LENGTH,
+  acceptComposerPrediction,
+  initialComposerPredictionState,
+  joinComposerPrediction,
+  nextComposerPredictionState,
+  shouldSkipComposerPrediction,
+  visibleComposerPrediction,
+} from "./prediction";
+export type { ComposerPredictionAction, ComposerPredictionState } from "./prediction";

package/src/composer/prediction.ts

@@ -0,0 +1,94 @@
+/** Default trailing-edge debounce, in ms: how long the draft must sit before a prediction is requested. */
+export const COMPOSER_PREDICTION_DEBOUNCE_MS = 500;
+
+/** Default minimum draft length (trimmed characters) before a prediction is requested. */
+export const COMPOSER_PREDICTION_MIN_LENGTH = 12;
+
+/**
+ * True when no prediction should be requested for this draft.
+ *
+ * Skips drafts shorter than `minLength` (trimmed), drafts whose last word starts
+ * with `@` or `/` (an in-progress mention or command), and drafts that end a
+ * sentence (`.`, `!` or `?`, then optional whitespace).
+ */
+export function shouldSkipComposerPrediction(
+  value: string,
+  minLength: number = COMPOSER_PREDICTION_MIN_LENGTH,
+): boolean {
+  if (value.trim().length < minLength) return true;
+  const lastWord = value.split(/\s/).pop() ?? "";
+  if (lastWord.startsWith("@") || lastWord.startsWith("/")) return true;
+  if (/[.!?]\s*$/.test(value)) return true;
+  return false;
+}
+
+/**
+ * The ghost text for a draft: the bare continuation from the caller, with a
+ * joining space added when neither side has whitespace at the join.
+ */
+export function joinComposerPrediction(draft: string, prediction: string): string {
+  if (prediction === "") return "";
+  return /\s$/.test(draft) || /^\s/.test(prediction) ? prediction : ` ${prediction}`;
+}
+
+/** What `getPrediction` last returned, and the draft it was requested for. */
+export type ComposerPredictionState = {
+  /** Draft the stored `text` answers, or `null` when there is none. */
+  forValue: string | null;
+  /** Raw text from `getPrediction` (no joining space). */
+  text: string;
+  /** Draft for which the user pressed Esc. Suppresses requests until the draft changes. */
+  dismissedFor: string | null;
+};
+
+export type ComposerPredictionAction =
+  /** A request finished. `current` is the draft at the time it finished. */
+  | { type: "result"; forValue: string; text: string; current: string }
+  /** Esc: hide the prediction for this draft. */
+  | { type: "dismiss"; value: string }
+  /** Tab accepted the prediction, or the caller reset it. */
+  | { type: "clear" };
+
+export const initialComposerPredictionState: ComposerPredictionState = {
+  forValue: null,
+  text: "",
+  dismissedFor: null,
+};
+
+/**
+ * Pure reducer for prediction state. A result is dropped when the draft moved
+ * on while the request ran, or when it is empty.
+ */
+export function nextComposerPredictionState(
+  state: ComposerPredictionState,
+  action: ComposerPredictionAction,
+): ComposerPredictionState {
+  switch (action.type) {
+    case "result":
+      if (action.forValue !== action.current || action.text === "") return state;
+      return { ...state, forValue: action.forValue, text: action.text };
+    case "dismiss":
+      return { forValue: null, text: "", dismissedFor: action.value };
+    case "clear":
+      return { ...state, forValue: null, text: "" };
+  }
+}
+
+/**
+ * Ghost text to show for `value`, or `""`. It is empty when the state answers a
+ * different draft, the draft is dismissed or the draft is skipped.
+ */
+export function visibleComposerPrediction(
+  state: ComposerPredictionState,
+  value: string,
+  minLength: number = COMPOSER_PREDICTION_MIN_LENGTH,
+): string {
+  if (state.forValue !== value || state.dismissedFor === value) return "";
+  if (shouldSkipComposerPrediction(value, minLength)) return "";
+  return joinComposerPrediction(value, state.text);
+}
+
+/** The draft after Tab: the draft with the ghost text appended. */
+export function acceptComposerPrediction(value: string, ghost: string): string {
+  return value + ghost;
+}

package/src/composer/useComposerPrediction.ts

@@ -0,0 +1,86 @@
+import * as React from "react";
+
+import {
+  COMPOSER_PREDICTION_DEBOUNCE_MS,
+  COMPOSER_PREDICTION_MIN_LENGTH,
+  initialComposerPredictionState,
+  nextComposerPredictionState,
+  shouldSkipComposerPrediction,
+  visibleComposerPrediction,
+} from "./prediction";
+
+export type UseComposerPredictionOptions = {
+  value: string;
+  /** Off when there is no `getPrediction`, the composer is busy, or the caret is not at the end. */
+  enabled: boolean;
+  getPrediction?: (draft: string, opts: { signal: AbortSignal }) => Promise<string>;
+  debounceMs?: number;
+  minLength?: number;
+};
+
+export type ComposerPrediction = {
+  /** Ghost text to render after the draft, including any joining space. `""` when none. */
+  ghost: string;
+  dismiss: () => void;
+  clear: () => void;
+};
+
+/**
+ * Debounced ghost-text prediction for a draft. It does no I/O itself: the caller
+ * supplies `getPrediction`. Each draft change aborts the previous request. A
+ * result that arrives after its signal aborted, or after the draft changed, is
+ * dropped. Errors from `getPrediction` are swallowed: a failed prediction shows
+ * nothing.
+ */
+export function useComposerPrediction({
+  value,
+  enabled,
+  getPrediction,
+  debounceMs = COMPOSER_PREDICTION_DEBOUNCE_MS,
+  minLength = COMPOSER_PREDICTION_MIN_LENGTH,
+}: UseComposerPredictionOptions): ComposerPrediction {
+  const [state, dispatch] = React.useReducer(
+    nextComposerPredictionState,
+    initialComposerPredictionState,
+  );
+
+  const latestValue = React.useRef(value);
+  latestValue.current = value;
+  const getPredictionRef = React.useRef(getPrediction);
+  getPredictionRef.current = getPrediction;
+  const active = enabled && getPrediction !== undefined;
+
+  const skip = shouldSkipComposerPrediction(value, minLength);
+  const settled = state.forValue === value || state.dismissedFor === value;
+
+  React.useEffect(() => {
+    if (!active || skip || settled) return;
+    const controller = new AbortController();
+    const timer = setTimeout(() => {
+      const request = getPredictionRef.current;
+      if (!request) return;
+      request(value, { signal: controller.signal }).then(
+        (text) => {
+          if (controller.signal.aborted) return;
+          dispatch({ type: "result", forValue: value, text, current: latestValue.current });
+        },
+        () => {},
+      );
+    }, debounceMs);
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [value, active, skip, settled, debounceMs]);
+
+  const ghost = active ? visibleComposerPrediction(state, value, minLength) : "";
+
+  return {
+    ghost,
+    dismiss: React.useCallback(
+      () => dispatch({ type: "dismiss", value: latestValue.current }),
+      [],
+    ),
+    clear: React.useCallback(() => dispatch({ type: "clear" }), []),
+  };
+}

package/src/index.ts

@@ -98,3 +98,5 @@ export * from "./ai-elements/speech-input";
 export * from "./ai-elements/suggestion";
 
 export * from "./audio";
+
+export * from "./composer";

package/src/sonner.ts

@@ -0,0 +1,2 @@
+export * from "./ui/sonner";
+export { toast } from "sonner";

package/src/ui/sonner.tsx

@@ -26,8 +26,13 @@ type ToastClassNames = NonNullable<
 type ToasterStyle = CSSProperties & Record<`--${string}`, string>;
 
 type SonnerToasterOptions = {
-  /** `"lg"` (default) uses `rounded-lg`. `"surface"` uses `rounded-surface`. */
-  toastRadius?: "lg" | "surface";
+  /**
+   * `"lg"` (default) uses `rounded-lg`. `"surface"` uses `rounded-surface`.
+   * `"control"` uses `rounded-field`, the radius of inputs and selects.
+   */
+  toastRadius?: "lg" | "surface" | "control";
+  /** `"default"` keeps the current padding and text size. `"compact"` tightens padding, gap and text. */
+  density?: "default" | "compact";
   /** `"default"` keeps sonner's icons. `"filled24"` uses 24px filled icons. */
   toastIcons?: "default" | "filled24";
   /**
@@ -48,22 +53,31 @@ const hoverChipCloseButtonClassName =
 const defaultCloseButtonClassName =
   "rounded-lg bg-default px-2.5 py-1 text-xs font-medium text-foreground transition-colors hover:bg-default/78";
 
+const toastRadiusClasses = {
+  lg: "rounded-lg",
+  surface: "rounded-surface",
+  control: "rounded-field",
+} as const;
+
 /** Default `classNames`, with the opt-in variants applied. No options gives the 0.2.1 defaults. */
 function createToasterClassNames({
   toastRadius = "lg",
+  density = "default",
   closeButtonStyle = "default",
   descriptionMuted = false,
 }: Pick<
   SonnerToasterOptions,
-  "toastRadius" | "closeButtonStyle" | "descriptionMuted"
+  "toastRadius" | "density" | "closeButtonStyle" | "descriptionMuted"
 > = {}): ToastClassNames {
-  const radius = toastRadius === "surface" ? "rounded-surface" : "rounded-lg";
+  const radius = toastRadiusClasses[toastRadius];
+  const compact = density === "compact";
+  const descriptionSize = compact ? "text-xs" : "text-[13px]";
   return {
-    toast: `group toast glass-panel-strong flex w-full items-center gap-3 ${radius} px-4 py-3 text-sm text-foreground smooth-shadow-ring-md`,
+    toast: `group toast glass-panel-strong flex w-full items-center ${compact ? "gap-2" : "gap-3"} ${radius} ${compact ? "px-3 py-2 text-xs" : "px-4 py-3 text-sm"} text-foreground smooth-shadow-ring-md`,
     title: "font-medium leading-snug",
     description: descriptionMuted
-      ? "text-[13px] leading-snug text-muted-foreground!"
-      : "text-[13px] leading-snug text-muted-foreground",
+      ? `${descriptionSize} leading-snug text-muted-foreground!`
+      : `${descriptionSize} leading-snug text-muted-foreground`,
     actionButton:
       "rounded-lg bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground transition-opacity hover:opacity-90",
     cancelButton:
@@ -129,6 +143,7 @@ function mergeToastOptions(
 
 function SonnerToaster({
   toastRadius,
+  density,
   toastIcons = "default",
   closeButtonStyle = "default",
   sonnerVars = false,
@@ -157,6 +172,7 @@ function SonnerToaster({
           unstyled: true,
           classNames: createToasterClassNames({
             toastRadius,
+            density,
             closeButtonStyle,
             descriptionMuted,
           }),

package/tokens/examples/toaster/Fixture.tsx

@@ -7,6 +7,10 @@ function initialDark(): boolean {
   return new URLSearchParams(window.location.search).get("theme") === "dark";
 }
 
+const compact =
+  typeof window !== "undefined" &&
+  new URLSearchParams(window.location.search).get("variant") === "compact";
+
 function fire() {
   toast.success("Changes saved", {
     description: "Your settings were updated and will apply to new sessions.",
@@ -42,7 +46,8 @@ export function Fixture() {
       </main>
       <SonnerToaster
         theme={dark ? "dark" : "light"}
-        toastRadius="surface"
+        toastRadius={compact ? "control" : "surface"}
+        density={compact ? "compact" : "default"}
         toastIcons="filled24"
         closeButtonStyle="hoverChip"
         sonnerVars

package/tokens/examples/toaster/README.md

@@ -15,4 +15,4 @@ Run it from this folder (it is not a workspace member, and React resolves from t
 pnpm install --ignore-workspace && pnpm dev
 ```
 
-Open the printed URL plus `/tokens.html` or `/compat.html`. Add `?theme=dark` for dark mode, or use "Toggle theme". Hover the toast to see the close chip. `Fixture.tsx` is not part of the package typecheck.
+Open the printed URL plus `/tokens.html` or `/compat.html`. Add `?variant=compact` for the compact density with `toastRadius="control"`. Add `?theme=dark` for dark mode (combine with `&`), or use "Toggle theme". Hover the toast to see the close chip. `Fixture.tsx` is not part of the package typecheck.