@vvedantb/ui 0.3.2 → 0.4.0-rc.1

package/README.md

@@ -4,18 +4,15 @@ 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. |
-| `@vvedantb/ui/tokens` | `tokens.css`: colour, radius, shadow, ease and font tokens for Tailwind v4. |
-| `@vvedantb/ui/tokens/css/*.css` | `index`, `base`, `dialog`, `modal`, `tabs`, `tabs-pills`, `utilities`, `scrollbar-thin`, `animations`, `compat-shadcn-rgb`. |
-| `@vvedantb/ui/tokens/compat/shadcn-rgb.css` | Same file as `tokens/css/compat-shadcn-rgb.css`. |
-| `@vvedantb/ui/tokens/tailwind-preset` | Tailwind preset for apps that load a JS config with `@config`. |
-| `@vvedantb/ui/tokens/native` | JS colours, radii and spacing. No CSS, no React DOM. |
+| `@vvedantb/ui` | The only JavaScript entry. Primitives (Radix-based), AI elements, audio (`playChime`, `useReplyChime`, `playTone`), `toast` and `SonnerToaster`, the composer (`InputArea`, deprecated 0.3 `Composer`), shell (`SidebarHeader`, `PillTabs`, `SessionsHoverCard`), app helpers (confirm skip, update watcher, settings chrome, `useStableAuth`), `cn`, and the native tokens `tokens` and `Tokens`. See `app/README.md` in the repository for the app helpers. |
+| `@vvedantb/ui/tokens` | `tokens.css`: colour, radius, shadow, ease and font tokens for Tailwind v4. CSS. |
+| `@vvedantb/ui/tokens/tokens.css` | Same file as `@vvedantb/ui/tokens`. CSS. |
+| `@vvedantb/ui/tokens/css/*.css` | `index`, `base`, `dialog`, `modal`, `tabs`, `tabs-pills`, `utilities`, `scrollbar-thin`, `animations`, `compat-shadcn-rgb`. CSS. |
+| `@vvedantb/ui/tokens/compat/shadcn-rgb.css` | Same file as `tokens/css/compat-shadcn-rgb.css`. CSS. |
+| `@vvedantb/ui/tokens/tailwind-preset` | Tailwind preset (`.mjs`) for `@config "@vvedantb/ui/tokens/tailwind-preset"`. Kept as a build-tool entry: Tailwind needs a resolvable package path, and it is not a React API. |
+| `@vvedantb/ui/package.json` | Package metadata. |
+
+Removed in 0.4.0-rc.1: the `/cn`, `/sonner`, `/audio`, `/shell`, `/app`, `/composer` and `/tokens/native` subpaths. Import from `@vvedantb/ui`. See [`MIGRATION.md`](MIGRATION.md).
 
 ```css
 @import "tailwindcss";
@@ -34,15 +31,66 @@ 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.
+- The root barrel has no top-level side effects, so an app that imports only the audio symbols bundles only audio code.
 - `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
 
+### InputArea (recommended)
+
+`InputArea` is the chat composer extracted from an app: a pill that grows into a card, a plus menu, dictate, stop and send, ghost text, a `/` menu, and slots for banners, a queue, attachments and chips. It is presentational. It makes no requests and reads no router, billing or storage. The app passes data in and handles callbacks. It adds its own `TooltipProvider` and `LazyMotion`, so it needs no app provider.
+
+```tsx
+import { InputArea, InputBanners, buildComposerSlashItems } from "@vvedantb/ui";
+
+<InputArea
+  value={draft}
+  onChange={setDraft}
+  onSubmit={(text) => send(text)}
+  onStop={abort}
+  isStreaming={isStreaming}
+  fileCount={files.length}
+  chipCount={chips.length}
+  onFilesSelected={addFiles}
+  onRemoveLastChip={removeLastChip}
+  showDictate
+  slashItems={slashItems}
+  onSlashSelect={(item, { openFilePicker }) => run(item, openFilePicker)}
+  attachments={<AttachmentStrip />}
+  chips={<ChipRow />}
+  plusMenuExtra={<SkillPickerAndConnectionRows />}
+  getPrediction={complete}
+  className={composerClass}
+  borderClassName={borderClass}
+  submitButtonClassName={submitBg}
+  submitIconClassName={submitText}
+/>
+```
+
+| Prop | Default | Notes |
+| --- | --- | --- |
+| `value`, `onChange`, `defaultValue` | uncontrolled, `""` | `onSubmit` clears the draft through `onChange("")` first. Restore it yourself if sending fails. |
+| `onSubmit(text)` | none | Trimmed text. Not called while `isSending`, or when send is disabled. |
+| `onStop`, `isStreaming`, `isSending`, `isUploading` | off | While streaming, stop shows next to send, and send queues. Sending or uploading shows a spinner and disables send. |
+| `canSubmit` | text, or `fileCount` or `chipCount` above 0 | Overrides when send is enabled. |
+| `fileCount`, `chipCount` | `0` | Compact mode needs them: files or chips keep the card open. |
+| `showDictate`, `onDictateTranscription` | off, append to draft | |
+| `showFileUpload`, `onFilesSelected`, `onAttachFile`, `attachAccept` | on, none, click the hidden input, images and PDF | The hidden input and drop handling appear only with `onFilesSelected`. `onAttachFile` replaces the click. |
+| `banners`, `promoBanner`, `queue`, `attachments`, `chips`, `plusMenuExtra` | none | Slots. `plusMenuExtra` goes after the attach row: include your own `DropdownMenuSeparator`. |
+| `slashItems`, `onSlashSelect`, `renderSlashItem` | menu off | Build items with `buildComposerSlashItems`. `renderSlashItem(item, row)` wraps a row, for example in a hover card. |
+| `getPrediction`, `predictionEnabled` | off, `true` | Ghost text. Tab accepts, Esc dismisses. Paused while the `/` menu is open. |
+| `className`, `containerClassName`, `borderClassName`, `submitButtonClassName`, `submitIconClassName`, `placeholder` | none | The app passes its own class strings for an exact match. |
+
+Building blocks: `InputActions`, `ConnectionStatusMenuItem` (icon, label, description, `connected`, `onClick`, `title`), `InputBanners`, `PromoBanner` (`show`, `onUpgrade`, `onDismiss`, text as children), `FadePresence`, `ComposerSlashMenu`, `ComposerSlashRow`, and the hooks and helpers listed in the changelog. Parity against the original: `composer/examples/parity/PARITY.md`. App migration: `composer/MIGRATION-INPUTAREA.md`.
+
+### Composer (deprecated)
+
+> **Deprecated in 0.4.0-rc.1.** Use `InputArea`. The 0.3 `Composer` was written from scratch and does not match the app composer. It stays exported and unchanged for existing consumers, and is not removed in 0.4.0-rc.1.
+
 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"
+import { Composer, ComposerIconButton } from "@vvedantb/ui";
 
 <Composer
   value={draft}
@@ -113,7 +161,7 @@ Rules 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";
+import { ComposerGhostText, ComposerShell, useComposerPrediction } from "@vvedantb/ui";
 
 function MentionComposer({ draft, setDraft, send }: Props) {
   const prediction = useComposerPrediction({ value: draft, enabled: true, getPrediction });
@@ -133,7 +181,7 @@ Fixture: `composer/examples/` (see its README). It has a `tokens.css` page and a
 ## Sessions hover card
 
 ```tsx
-import { SessionsHoverCard } from "@vvedantb/ui/shell";
+import { SessionsHoverCard } from "@vvedantb/ui";
 
 <SessionsHoverCard
   header="Session title"
@@ -149,8 +197,7 @@ import { SessionsHoverCard } from "@vvedantb/ui/shell";
 ## Toaster
 
 ```tsx
-import { toast } from "sonner";
-import { SonnerToaster } from "@vvedantb/ui"; // or "@vvedantb/ui/sonner"
+import { SonnerToaster, toast } from "@vvedantb/ui";
 
 <SonnerToaster
   theme={theme}
@@ -210,6 +257,6 @@ The compat file includes a fallback `glass-panel-strong` (`rgb(var(--card) / 0.9
 
 A fixture that renders the main components against sample light and dark RGB variables is in `tokens/examples/compat-shadcn-rgb/`.
 
-`@clerk/clerk-react`, `@tanstack/react-hotkeys` and `zod` are optional peers. Install them only if you import `@vvedantb/ui/app`.
+`@clerk/clerk-react`, `@tanstack/react-hotkeys`, `motion` and `zod` are optional peers (`peerDependenciesMeta`). Install `@clerk/clerk-react` only to use `useStableAuth`, `@tanstack/react-hotkeys` and `zod` only for the features that use them, and `motion` only to use the motion presets, `InputArea`, the 0.3 `Composer` or the AI elements and primitives that animate.
 
 Full documentation: the repository `README.md`. Upgrading from `@vvedantb/tokens`, `@vvedantb/shell` or `@vvedantb/app-kit`: `MIGRATION.md`.

package/app/README.md

@@ -1,4 +1,4 @@
-# `@vvedantb/ui/app`
+# App helpers (`@vvedantb/ui`)
 
 Shared web React helpers that were duplicated across apps. Source-exported as the `./app` subpath of `@vvedantb/ui`.
 
@@ -10,9 +10,9 @@ npm install @vvedantb/ui
 
 ## Peers
 
-Required: `react` and `react-dom` (>=19). Optional peers of `@vvedantb/ui`, needed only for this subpath: `@clerk/clerk-react` (`useStableAuth`), `@tanstack/react-hotkeys` and `zod`.
+Required: `react` and `react-dom` (>=19). Optional peers of `@vvedantb/ui`, needed only for the app helpers: `@clerk/clerk-react` (`useStableAuth`), `@tanstack/react-hotkeys` and `zod`.
 
-`sonner` is not a dependency. The update watcher takes the toast API as an option. This subpath uses a local class join (`cn`), not the `cn` from `@vvedantb/ui`. Tailwind must scan `node_modules/@vvedantb/ui/app/src/**/*.{ts,tsx}` so the class names are generated, and the app needs the `@vvedantb/ui/tokens` names (`bg-surface-card`, `divide-separator`, `text-muted-foreground` and so on).
+`sonner` is not a dependency. The update watcher takes the toast API as an option. The app source uses a local class join, which the root does not export (the root `cn` is the clsx and tailwind-merge one). Tailwind must scan `node_modules/@vvedantb/ui/app/src/**/*.{ts,tsx}` so the class names are generated, and the app needs the `@vvedantb/ui/tokens` names (`bg-surface-card`, `divide-separator`, `text-muted-foreground` and so on).
 
 ```css
 @source "../node_modules/@vvedantb/ui/app/src/**/*.{ts,tsx}";
@@ -21,7 +21,7 @@ Required: `react` and `react-dom` (>=19). Optional peers of `@vvedantb/ui`, need
 ## Confirm skip (Alt-click)
 
 ```tsx
-import { ConfirmSkipHint, skipConfirmTitle, useRequestConfirm } from "@vvedantb/ui/app";
+import { ConfirmSkipHint, skipConfirmTitle, useRequestConfirm } from "@vvedantb/ui";
 
 const { request } = useRequestConfirm();
 
@@ -42,7 +42,7 @@ const { request } = useRequestConfirm();
 
 ```ts
 import { toast } from "sonner";
-import { startUpdateAvailableWatcher } from "@vvedantb/ui/app";
+import { startUpdateAvailableWatcher } from "@vvedantb/ui";
 
 useEffect(
   () =>
@@ -61,7 +61,7 @@ Options: `origin`, `toast`, `closeConvex?`, `pollMs?` (default 60000), `toastId?
 ## Settings chrome
 
 ```tsx
-import { SettingsPage, SettingsSection, SettingsToggleRow } from "@vvedantb/ui/app";
+import { SettingsPage, SettingsSection, SettingsToggleRow } from "@vvedantb/ui";
 
 <SettingsPage
   title="Notifications"
@@ -82,8 +82,8 @@ Exports: `SettingsSection`, `SettingsField`, `SettingsStack`, `SettingsToggleRow
 ## useStableAuth
 
 ```ts
-import { useStableAuth } from "@vvedantb/ui/app"; // 2000 ms debounce, wraps Clerk useAuth
-import { createUseStableAuth } from "@vvedantb/ui/app";
+import { useStableAuth } from "@vvedantb/ui"; // 2000 ms debounce, wraps Clerk useAuth
+import { createUseStableAuth } from "@vvedantb/ui";
 
 const useAuth = createUseStableAuth(useClerkAuth, { debounceMs: 3000 });
 ```

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.3.2",
+  "version": "0.4.0-rc.1",
   "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.",
+  "description": "Shared React 19 UI for web apps: one JavaScript entry (primitives, shell pieces, app helpers, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -17,36 +17,8 @@
       "types": "./src/index.ts",
       "default": "./src/index.ts"
     },
-    "./cn": {
-      "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"
-    },
-    "./app": {
-      "types": "./app/src/index.ts",
-      "default": "./app/src/index.ts"
-    },
     "./tokens": "./tokens/src/tokens.css",
     "./tokens/tokens.css": "./tokens/src/tokens.css",
-    "./tokens/native": {
-      "types": "./tokens/src/native.ts",
-      "default": "./tokens/src/native.ts"
-    },
     "./tokens/css/index.css": "./tokens/src/css/index.css",
     "./tokens/css/base.css": "./tokens/src/css/base.css",
     "./tokens/css/dialog.css": "./tokens/src/css/dialog.css",
@@ -193,6 +165,9 @@
     "@tanstack/react-hotkeys": {
       "optional": true
     },
+    "motion": {
+      "optional": true
+    },
     "zod": {
       "optional": true
     }

package/src/composer/Composer.tsx

@@ -303,6 +303,7 @@ const ComposerGhostText = React.forwardRef<HTMLDivElement, ComposerGhostTextProp
  * Chat composer: autosizing textarea, plus-menu and action slots, send/stop
  * button and optional ghost-text predictions. The ref points at the textarea.
  */
+/** @deprecated Use `InputArea` from `@vvedantb/ui`. Kept unchanged for existing consumers. */
 const Composer = React.forwardRef<HTMLTextAreaElement, ComposerProps>(function Composer(
   {
     value: valueProp,

package/src/composer/index.ts

@@ -22,3 +22,4 @@ export {
   visibleComposerPrediction,
 } from "./prediction";
 export type { ComposerPredictionAction, ComposerPredictionState } from "./prediction";
+export * from "./input-area";

package/src/composer/input-area/ComposerSlashMenu.tsx

@@ -0,0 +1,137 @@
+import { useEffect, useRef } from "react";
+import type { ReactNode } from "react";
+import { m } from "motion/react";
+import { motionFast } from "./motion";
+import type { ComposerSlashPlacement } from "./composerSlashPosition";
+import type { ComposerSlashItem } from "./composerSlashItems";
+import { filterAndGroupSlashItems } from "./composerSlashItems";
+import { optionId } from "./composerSlashOptionId";
+import { ComposerSlashRow } from "./ComposerSlashRow";
+
+interface ComposerSlashMenuProps {
+  listboxId: string;
+  placement: ComposerSlashPlacement;
+  items: ComposerSlashItem[];
+  query: string;
+  selectedIndex: number;
+  onHoverIndex: (index: number) => void;
+  onSelectItem: (item: ComposerSlashItem) => void;
+  /** Wrap the row, for example in a hover card. Return `row` to keep the default. */
+  renderItem?: (item: ComposerSlashItem, row: ReactNode) => ReactNode;
+}
+
+export function ComposerSlashMenu({
+  listboxId,
+  placement,
+  items,
+  query,
+  selectedIndex,
+  onHoverIndex,
+  onSelectItem,
+  renderItem,
+}: ComposerSlashMenuProps) {
+  const listRef = useRef<HTMLDivElement>(null);
+  const groups = filterAndGroupSlashItems(items, query);
+  const flatItems = groups.flatMap((group) => group.items);
+  const indexById = new Map(flatItems.map((item, index) => [item.id, index]));
+  const isAbove = placement.placement === "above";
+
+  useEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const selected = list.querySelector<HTMLElement>(
+      '[data-slash-picker-item][data-selected="true"]',
+    );
+    selected?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex, flatItems.length]);
+
+  return (
+    <div
+      className="fixed z-50"
+      style={{
+        left: placement.left,
+        top: placement.top,
+        width: placement.width,
+        transform: isAbove ? "translateY(-100%)" : undefined,
+      }}
+    >
+      <m.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        exit={{ opacity: 0, scale: 0.95 }}
+        transition={motionFast}
+        style={{ maxHeight: placement.maxHeight }}
+        className={
+          "flex flex-col overflow-hidden rounded-surface " +
+          "bg-popover/95 text-popover-foreground backdrop-blur-md smooth-shadow-ring-lg " +
+          (isAbove ? "origin-bottom" : "origin-top")
+        }
+      >
+        {flatItems.length > 0 ? (
+          <div
+            ref={listRef}
+            id={listboxId}
+            role="listbox"
+            aria-label="Commands"
+            className="scrollbar scroll-fade min-h-0 flex-1 overflow-y-auto overscroll-contain py-1"
+          >
+            {groups.map((group) => (
+              <div key={group.group}>
+                <div className="px-3 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+                  {group.group}
+                </div>
+                {group.items.map((item) => {
+                  const index = indexById.get(item.id);
+                  if (index === undefined) return null;
+                  const row = (
+                    <ComposerSlashRow
+                      label={item.label}
+                      description={item.description}
+                      icon={item.icon}
+                      badge={item.badge}
+                      active={item.active}
+                    />
+                  );
+                  const isSelected = index === selectedIndex;
+                  return (
+                    <button
+                      key={item.id}
+                      id={optionId(listboxId, item.id)}
+                      type="button"
+                      role="option"
+                      aria-selected={isSelected}
+                      data-slash-picker-item
+                      data-selected={isSelected ? "true" : "false"}
+                      onMouseEnter={() => onHoverIndex(index)}
+                      onMouseDown={(event) => {
+                        event.preventDefault();
+                        onSelectItem(item);
+                      }}
+                      className={
+                        "mx-1 flex w-[calc(100%-0.5rem)] min-w-0 items-center rounded-lg px-2 py-1.5 text-left text-sm max-sm:py-2.5 " +
+                        "transition-[background-color] active:scale-[0.99] active:duration-100 active:ease-out " +
+                        (isSelected
+                          ? "bg-primary/15 font-medium text-foreground dark:bg-primary/25"
+                          : "text-foreground/90 hover:bg-muted")
+                      }
+                    >
+                      {renderItem ? (
+                        renderItem(item, row)
+                      ) : (
+                        row
+                      )}
+                    </button>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="px-3 py-2.5 text-xs leading-relaxed text-muted-foreground">
+            No matches.
+          </div>
+        )}
+      </m.div>
+    </div>
+  );
+}

package/src/composer/input-area/ComposerSlashRow.tsx

@@ -0,0 +1,75 @@
+import type { ReactNode } from "react";
+import {
+  IconBook2,
+  IconFile,
+  IconLock,
+  IconPaperclip,
+  IconPlus,
+} from "@tabler/icons-react";
+import type { SlashIconKey } from "./composerSlashItems";
+
+function previewOneLine(text: string, maxLength = 72): string {
+  const singleLine = text.replace(/\s+/g, " ").trim();
+  if (singleLine.length <= maxLength) return singleLine;
+  return `${singleLine.slice(0, maxLength - 1)}…`;
+}
+
+function SlashIcon({ icon }: { icon: SlashIconKey }): ReactNode {
+  const className = "size-4 shrink-0 text-muted-foreground";
+  switch (icon) {
+    case "plus":
+      return <IconPlus className={className} />;
+    case "paperclip":
+      return <IconPaperclip className={className} />;
+    case "lock":
+      return <IconLock className={className} />;
+    case "book":
+      return <IconBook2 className={className} />;
+    case "file":
+      return <IconFile className={className} />;
+  }
+}
+
+export function ComposerSlashRow({
+  label,
+  description,
+  icon,
+  badge,
+  active,
+}: {
+  label: string;
+  description?: string;
+  icon: SlashIconKey;
+  badge?: string;
+  active?: boolean;
+}): ReactNode {
+  const detail = description ? previewOneLine(description) : null;
+  return (
+    <span className="flex w-full min-w-0 items-center gap-2">
+      <SlashIcon icon={icon} />
+      <span className="flex min-w-0 flex-1 flex-col gap-0.5 overflow-hidden">
+        <span className="flex min-w-0 items-center gap-1.5">
+          <span className="flex min-w-0 flex-1 items-center gap-0.5 overflow-hidden">
+            <span className="shrink-0 text-muted-foreground">/</span>
+            <span className="truncate">{label}</span>
+          </span>
+          {badge ? (
+            <span className="flex shrink-0 items-center gap-1 rounded-md bg-surface-secondary px-1.5 py-0.5 text-[10px] font-medium leading-none text-muted-foreground">
+              {badge}
+            </span>
+          ) : null}
+          {active ? (
+            <span className="shrink-0 text-[10px] font-medium text-muted-foreground">
+              On
+            </span>
+          ) : null}
+        </span>
+        {detail ? (
+          <span className="truncate text-xs text-muted-foreground">
+            {detail}
+          </span>
+        ) : null}
+      </span>
+    </span>
+  );
+}

package/src/composer/input-area/ConnectionStatusMenuItem.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import { DropdownMenuItem } from "../../ui/dropdown-menu";
+
+export type ConnectionStatusMenuItemProps = {
+  /** Brand mark with its own status dot. The app owns it. */
+  icon: ReactNode;
+  label: ReactNode;
+  /** Shown under the label while `connected` is true. */
+  description?: ReactNode;
+  connected: boolean;
+  onClick?: () => void;
+  title?: string;
+};
+
+/** Menu row that shows a connection state, for example an external tool hub. */
+export function ConnectionStatusMenuItem({
+  icon,
+  label,
+  description,
+  connected,
+  onClick,
+  title,
+}: ConnectionStatusMenuItemProps) {
+  return (
+    <DropdownMenuItem
+      startContent={icon}
+      description={connected ? description : undefined}
+      title={title}
+      onClick={onClick}
+    >
+      {label}
+    </DropdownMenuItem>
+  );
+}

package/src/composer/input-area/FadePresence.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import { AnimatePresence, domAnimation, LazyMotion, m } from "motion/react";
+import { motionFast } from "./motion";
+
+export type FadePresenceProps = {
+  show: boolean;
+  children: ReactNode;
+  className?: string;
+};
+
+/** Fades children in and out as `show` changes. Does not animate on first mount. Brings its own `LazyMotion`, so `m` components animate without an app provider. */
+export function FadePresence({ show, children, className }: FadePresenceProps) {
+  return (
+    <LazyMotion features={domAnimation}>
+    <AnimatePresence initial={false}>
+      {show ? (
+        <m.div
+          key="fade-presence"
+          className={className}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={motionFast}
+        >
+          {children}
+        </m.div>
+      ) : null}
+    </AnimatePresence>
+    </LazyMotion>
+  );
+}

package/src/composer/input-area/InputActions.tsx

@@ -0,0 +1,63 @@
+import type { ReactNode } from "react";
+import { IconPaperclip, IconPlus } from "@tabler/icons-react";
+import { Button } from "../../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../ui/dropdown-menu";
+
+export type InputActionsProps = {
+  showFileUpload?: boolean;
+  onAttachFile?: () => void;
+  compact?: boolean;
+  /** Extra menu rows after the attach row, such as a skill picker and a connection item. Include your own separators. */
+  extra?: ReactNode;
+  attachLabel?: ReactNode;
+};
+
+export function InputActions({
+  showFileUpload = false,
+  onAttachFile,
+  compact = false,
+  extra,
+  attachLabel = "Attach file",
+}: InputActionsProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          size="icon"
+          variant="ghost"
+          className={`relative shrink-0 rounded-full max-sm:hit-target ${
+            compact
+              ? "size-8 bg-surface-tertiary text-foreground hover:bg-surface-tertiary/80 hover:text-foreground"
+              : ""
+          }`}
+          startContent={<IconPlus width={18} />}
+        />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        aria-label="Tool options"
+        side="top"
+        collisionPadding={12}
+        className="max-h-[min(24rem,calc(100dvh-6rem))] max-w-[min(20rem,calc(100vw-1.5rem))] overflow-y-auto"
+      >
+        {showFileUpload ? (
+          <>
+            <DropdownMenuItem
+              startContent={<IconPaperclip size={18} />}
+              onClick={onAttachFile}
+            >
+              {attachLabel}
+            </DropdownMenuItem>
+            {extra ? <DropdownMenuSeparator /> : null}
+          </>
+        ) : null}
+        {extra}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}