@corbits/react-ui 0.1.0 → 0.2.0

package/README.md

@@ -1,125 +1,268 @@
 # @corbits/react-ui
 
-React components for agent and workflow surfaces — chat, runs, artifacts, analytics, collections. Import one module at a time, or from the root barrel.
+React components for agent products: chat transcripts with reasoning and tool calls, approval cards, run status, artifacts and charts, styled by one Tailwind v4 token theme. The UI package of Corbits: it renders data a host web app loads from Interchange, and works in any React 18 or 19 app without Interchange.
 
-## Runtime support
+## Why @corbits/react-ui?
 
-Node >= 24 consumes built `dist/`. Peers: `react` and `react-dom` (18 or 19), `lucide-react`, `sonner`, `@radix-ui/react-dialog`, `@radix-ui/react-dropdown-menu`, `@radix-ui/react-slot`, `@radix-ui/react-tooltip`.
+1. **Props in, markup out.** No component fetches, subscribes or holds a client. Your data layer stays yours, and every component renders the same in stories, tests and production.
+2. **Agent-shaped building blocks.** `ChatThread` renders a message as ordered parts (text, reasoning, tool calls), and `ApprovalCard`, `GateBlock` and `StepList` cover a run that waits on a person.
+3. **Pay for what you import.** One root entry, the package is side-effect free apart from its CSS, and heavy peers (Radix dialog, dropdown-menu, tooltip, `sonner`) are optional.
+4. **Server Components ready.** Stateful modules ship `"use client"`, so a React Server Components app imports them directly. Outside RSC the directive is a no-op.
 
-## Quickstart
+## Install
 
 ```bash
-npm add @corbits/react-ui
-pnpm add @corbits/react-ui
-yarn add @corbits/react-ui
-bun add @corbits/react-ui
+bun add @corbits/react-ui react react-dom lucide-react @radix-ui/react-slot
 ```
 
-Until a release is cut, consumers pin a commit instead of a version range:
+Requires Node 24 or later. Tested on React 19; the peer range also accepts React 18.2+.
 
-```json
-"@corbits/react-ui": "github:corbitsdev/react-ui#<commit-sha>"
-```
+Optional peers are needed only by the modules that import them. Those modules are not in the root entry, so import them by subpath:
+
+| Peer                            | Subpaths                                                      |
+| ------------------------------- | ------------------------------------------------------------- |
+| `@radix-ui/react-dialog`        | `ui/dialog`, `ui/command-palette`, `ui/mic-permission-dialog` |
+| `@radix-ui/react-dropdown-menu` | `ui/menu`                                                     |
+| `@radix-ui/react-tooltip`       | `ui/tooltip`                                                  |
+| `sonner`                        | `ui/toast`                                                    |
+
+## Quickstart
 
-Import the stylesheet once at the app root, before your own CSS (no Tailwind build required). Mount `ThemeProvider` near the root so dark mode persists per user, and `Toaster` once alongside it so any component can call `toast()`:
+Import the stylesheet once at the app root, before your own CSS, and mount `ThemeProvider` near the root:
 
 ```tsx
 import "@corbits/react-ui/styles.css";
 
-import { ThemeProvider, Toaster, toast } from "@corbits/react-ui";
-
-export function Root() {
+import { ChatThread, ThemeProvider, type ChatMessage } from "@corbits/react-ui";
+
+const messages: ChatMessage[] = [
+  {
+    id: "m1",
+    role: "user",
+    createdAt: "2026-01-01T09:00:00Z",
+    parts: [{ type: "text", text: "What changed in the repo today?" }],
+  },
+  {
+    id: "m2",
+    role: "agent",
+    createdAt: "2026-01-01T09:00:04Z",
+    parts: [
+      { type: "reasoning", text: "Check the commit log first." },
+      {
+        type: "tool",
+        toolCallId: "t1",
+        toolName: "git__log",
+        label: "Read today's commits",
+        state: "done",
+        output: "3 commits",
+      },
+      { type: "text", text: "Three commits landed today, all in the docs." },
+    ],
+  },
+];
+
+export function App() {
   return (
-    <ThemeProvider storageKey="corbits-theme" defaultMode="light">
-      <App />
-      <Toaster position="bottom-right" />
+    <ThemeProvider>
+      <ChatThread messages={messages} identity={{ name: "Scout" }} />
     </ThemeProvider>
   );
 }
-
-function App() {
-  return <button onClick={() => toast("Signed out.")}>Sign out</button>;
-}
 ```
 
-That sheet includes Tailwind preflight and a base layer — it restyles the page, and neither import is safe to skip: without one of them the components render unstyled markup, not a fallback look. If you already use Tailwind v4, import `@corbits/react-ui/theme.css` instead and let your own build generate utilities; don't import both.
+This renders the user message, a collapsed reasoning block, a finished tool call and the agent's reply.
+
+`styles.css` includes Tailwind preflight and a base layer, so it restyles the page. If you already run Tailwind v4, import `@corbits/react-ui/theme.css` instead and let your build generate the utilities. Import one of the two, never both; without either, components render unstyled.
 
-Dark mode is a `dark` class on an ancestor; the stylesheet reads it and does not manage it. With neither `.dark` nor `.light` set, the theme follows the OS — a `@media (prefers-color-scheme: dark)` block applies the dark tokens to `:root` and sets `color-scheme: dark` so native controls follow, so a zero-JS install already renders dark on a dark-OS host. That media-query path is tokens only — `dark:` utilities still need a `.dark` ancestor.
+## Where it fits
 
-Removing `.dark` is not light: hosts that toggle by adding and removing `.dark` must now add `.light` for an explicit light choice (or mount `ThemeProvider`, which toggles both), or a dark-OS user falls back to OS dark. An explicit-light choice on a dark OS first-paints dark then swaps when JS adds `.light`; to block the flash, apply it before first paint *only when the stored choice is light* — `<script>if (localStorage.getItem("corbits-theme")?.includes('"light"')) document.documentElement.classList.add("light")</script>` — adding it unconditionally pins light for dark-OS users too. `ThemeProvider` still wins once it mounts — mount it only if you want the library to persist the choice and apply named presets.
+- **Interchange** runs AI agents as principals (first-class identities with their own permissions and credentials). The hub is its multi-tenant control plane: tenants, principals, grants (permissions a principal holds) and credentials. The sidecar is the portable agent runtime.
+- **Corbits** is the set of published packages around Interchange that turn an agent into a product. This package is the UI bucket: it runs in the host web app and plugs into the host's data layer, not into the hub or the sidecar.
+- It pairs with the hub modules whose data it renders, such as [`@corbits/artifacts`](https://github.com/corbitsdev/corbits-artifacts), [`@corbits/mailbox`](https://github.com/corbitsdev/corbits-mailbox) and [`@corbits/cron`](https://github.com/corbitsdev/corbits-cron).
 
-A page body typically pairs `PageShell` (margins and scroll ownership) with `EmptyState` (title, description, an optional icon, and an action):
+## Reference
+
+Import from the root; it tree-shakes to what you use. Only the optional-peer modules have their own subpath:
 
 ```tsx
-import { Button, EmptyState, PageShell } from "@corbits/react-ui";
+import { Button } from "@corbits/react-ui";
+import { Toaster, toast } from "@corbits/react-ui/ui/toast";
 
-export function NotFoundPage() {
+export function SignOut() {
   return (
-    <PageShell width="full">
-      <EmptyState
-        title="Page not found"
-        description="This page doesn't exist."
-        action={
-          <Button variant="outline" onClick={() => window.history.back()}>
-            Go back
-          </Button>
-        }
-      />
-    </PageShell>
+    <>
+      <Button onClick={() => toast("Signed out.")}>Sign out</Button>
+      <Toaster position="bottom-right" />
+    </>
   );
 }
 ```
 
-Every component is importable by subpath (`@corbits/react-ui/ui/button`) or from the root (`@corbits/react-ui`).
-
-The brand faces (Red Hat Display, Space Mono) are named by the theme but not bundled. Load them yourself, or the stack falls through to system fonts; to use a face loaded under a generated name, override `--font-sans` / `--font-mono`.
-
-This package ships no `"use client"` directives. In a React Server Components app, re-export stateful components from a file you mark yourself, using subpaths rather than the root barrel.
-
-## How it works
-
-Components never fetch — data arrives as props. The root entry is re-exports only and the package is side-effect free aside from the CSS files, so either import style tree-shakes to what you used. Tokens and keyframes live in `theme.css`; `styles.css` is the prebuilt sheet for hosts that do not run Tailwind.
-
-See [PRODUCT.md](./PRODUCT.md) for why this library exists, [ARCHITECTURE.md](./ARCHITECTURE.md) for the no-fetch rule and the theme layer, and [IMPLEMENTATION.md](./IMPLEMENTATION.md) for toolchain and peers.
-
-## Development
-
-```sh
-git clone https://github.com/corbitsdev/react-ui.git
-cd react-ui
-bun install
-bun run build        # generate → SWC → tsc → Tailwind → contrast gate
-bun run typecheck
-bun run lint
-bun run dep-guard
-bun run test
-bun run stories      # Ladle workbench
-```
-
-A new component is not done until it has at least one story per meaningful state, checked in both themes. See [CONTRIBUTING.md](./CONTRIBUTING.md).
+### Theming
 
-## Thinking indicator
+Dark mode is a `.dark` class on an ancestor. With neither `.dark` nor `.light` on the root, the tokens follow `prefers-color-scheme` and set `color-scheme` for native controls; `dark:` utilities still need a `.dark` ancestor.
 
-The Corbits logo has three motion variants: `silk` (default), `strata`, and `echo`.
+`ThemeProvider` toggles both classes and persists the choice under `storageKey`. Hosts that manage the class themselves add `.light` for an explicit light choice, since removing `.dark` falls back to the OS. To avoid a dark first paint for a stored light choice on a dark OS, add `.light` before first paint only when the stored choice is light:
 
-```tsx
-import { ThinkingIndicator, ThinkingMark } from "@corbits/react-ui";
-
-export function Thinking() {
-  return (
-    <>
-      <ThinkingIndicator variant="silk" />
-      <ThinkingIndicator variant="strata" label="Reviewing files..." />
-      <ThinkingMark variant="echo" className="w-8" />
-    </>
-  );
-}
+```html
+<script>
+  if (localStorage.getItem("corbits-theme")?.includes('"light"'))
+    document.documentElement.classList.add("light");
+</script>
 ```
 
-`ThinkingIndicator` supplies an accessible status label; `ThinkingMark` is decorative.
-Both accept `variant`, `paused`, `className`, and `style`. Reduced-motion users see a
-static highlight instead.
+The theme names Red Hat Display and Space Mono but does not bundle them. Load them yourself or the stack falls back to system fonts; override `--font-sans` and `--font-mono` for a face loaded under another name.
+
+### Components
+
+Everything imports from `@corbits/react-ui`, except rows marked "optional peer", which import from the subpath shown; see [Install](#install).
+
+#### Chat
+
+| Component             | What it is                                                               |
+| --------------------- | ------------------------------------------------------------------------ |
+| `ChatThread`          | Scrolling transcript of user and agent messages                          |
+| `AgentTurn`           | One agent reply: reasoning, tool calls, answer, in order                 |
+| `MessageBubble`       | One user or system message                                               |
+| `ChatInput`           | Auto-growing message input with a send/stop button                       |
+| `ChatComposer`        | `ChatInput` with suggestion chips for an empty conversation              |
+| `ChatPanel`           | Docked chat frame with header and footer                                 |
+| `PartsRenderer`       | Renders a list of message parts                                          |
+| `ReasoningBlock`      | Collapsible thinking text                                                |
+| `ToolBlock`           | A tool call's lifecycle: running, done, failed                           |
+| `ToolNarrative`       | What the agent did, as one expandable line                               |
+| `ToolPicker`          | Browse, search and select tools                                          |
+| `QuickReplyChips`     | Tappable suggested replies                                               |
+| `TypingIndicator`     | Agent-is-typing dots                                                     |
+| `ThinkingIndicator`   | Animated Corbits mark with a status label                                |
+| `ThinkingMark`        | Decorative animated Corbits mark                                         |
+| `ThinkingLabel`       | Rotating-verb status label                                               |
+| `ShimmerText`         | Shimmer sweep over text                                                  |
+| `MicButton`           | Permission-aware microphone toggle                                       |
+| `VoiceWaveform`       | Live audio level bars                                                    |
+| `DictationStatusLine` | Composer dictation status row                                            |
+| `MicPermissionDialog` | Microphone permission prompt (optional peer, `ui/mic-permission-dialog`) |
+
+#### Runs
+
+| Component           | What it is                                        |
+| ------------------- | ------------------------------------------------- |
+| `LiveRunBanner`     | Status of a run in progress                       |
+| `LiveStatusLine`    | The single "what's happening now" line            |
+| `ApprovalCard`      | Approve or reject a pending action                |
+| `GateBlock`         | Chrome for a run parked on a human decision       |
+| `StepList`          | Vertical list of run steps and their status       |
+| `HorizontalStepper` | Horizontal step progress                          |
+| `ProgressChecklist` | Steps of a long operation and how far along it is |
+| `TraceWaterfall`    | Run-trace timeline, one row per span              |
+| `IntakeForm`        | Inputs a workflow asks for before it runs         |
+| `RunNowButton`      | Run something immediately                         |
+| `ConfirmButton`     | Button that asks for a second click               |
+| `NowCards`          | Attention band of items needing action            |
+| `NotificationsBell` | Bell with count and a panel slot                  |
+
+#### Artifacts
+
+| Component        | What it is                                          |
+| ---------------- | --------------------------------------------------- |
+| `ArtifactBody`   | One artifact, drawn the way its kind implies        |
+| `ArtifactNotice` | "Nothing to draw here" message for artifact viewers |
+| `BlockCard`      | Generative-UI block frame                           |
+| `ResearchBody`   | Research brief and report                           |
+| `CompareBody`    | Side-by-side comparison                             |
+| `EmbedBody`      | Sandboxed third-party embed                         |
+| `CsvTable`       | Capped preview of CSV text                          |
+| `QuoteCard`      | A rotating quote                                    |
+| `ProfileCard`    | Identity, status, actions and channels              |
+
+#### Charts
+
+| Component         | What it is                                          |
+| ----------------- | --------------------------------------------------- |
+| `ChartFrame`      | Caption, legend, plot, and the same data as a table |
+| `TimeSeriesChart` | Values over time                                    |
+| `BarChart`        | Vertical bars                                       |
+| `CategoryBars`    | Dense horizontal category ranking                   |
+| `Sparkline`       | Inline trend line                                   |
+| `TokenMosaic`     | Shares of a whole as one stacked strip              |
+| `StatGrid`        | Grid of headline numbers                            |
+| `AnimatedNumber`  | Number that counts to its new value                 |
+
+#### Layout
+
+| Component           | What it is                                   |
+| ------------------- | -------------------------------------------- |
+| `PageShell`         | Page margins and scroll ownership            |
+| `PagePanel`         | Bordered page-content frame                  |
+| `TopBar`            | Title, breadcrumbs and actions row           |
+| `Sidebar`           | Collapsible navigation sidebar               |
+| `SidebarPanel`      | Sidebar with pins, body and footer           |
+| `SidebarItemRow`    | One sidebar row                              |
+| `ListDetail`        | Index on the left, open item on the right    |
+| `InspectorShell`    | Side inspector rail                          |
+| `Section`           | Titled block of content                      |
+| `SettingsPanel`     | Settings frame with optional save            |
+| `LibraryPageHeader` | Title, count and controls for a library page |
+| `Card`              | Bordered content card                        |
+| `EmptyState`        | Title, description, icon and action          |
+| `RichEmptyState`    | Empty state with suggested next-step actions |
+| `BootScreen`        | Screen shown before the app loads            |
+| `DitherCanvas`      | Animated dithered background                 |
+| `CorbitsMark`       | Corbits logo                                 |
+| `AuthLayout`        | Sign-in page layout                          |
+| `LoginForm`         | Sign-in and sign-up form, with optional SSO  |
+
+#### Controls
+
+| Component           | What it is                                                      |
+| ------------------- | --------------------------------------------------------------- |
+| `Button`            | Button with variants and sizes                                  |
+| `Input`             | Text input                                                      |
+| `Textarea`          | Multi-line input                                                |
+| `Select`            | Native select                                                   |
+| `Checkbox`          | Checkbox                                                        |
+| `SelectionCheckbox` | Row-selection checkbox                                          |
+| `Switch`            | On/off toggle                                                   |
+| `FileInput`         | File picker                                                     |
+| `Tabs`              | Tab strip                                                       |
+| `ViewToggle`        | Grid or rows segmented control                                  |
+| `FilterBar`         | Row of filters with an active-filter summary                    |
+| `FilterChip`        | One toggleable filter                                           |
+| `KindCardGrid`      | Selectable card grid                                            |
+| `BulkActionBar`     | Actions for a multi-row selection                               |
+| `Table`             | Table primitives                                                |
+| `SortableTable`     | Table with sortable columns                                     |
+| `Badge`             | Status label                                                    |
+| `StatusDot`         | Colored status dot                                              |
+| `Avatar`            | Initials or image avatar                                        |
+| `ProviderMark`      | Which service an action goes through                            |
+| `Skeleton`          | Loading placeholder                                             |
+| `Dialog`            | Modal dialog (optional peer, `ui/dialog`)                       |
+| `CommandPalette`    | Global search overlay (optional peer, `ui/command-palette`)     |
+| `Menu`              | Dropdown menu (optional peer, `ui/menu`)                        |
+| `InfoTooltip`       | Hover info tooltip (optional peer, `ui/tooltip`)                |
+| `Toaster`           | Toast host; call `toast()` anywhere (optional peer, `ui/toast`) |
+| `ThemeProvider`     | Persists light, dark or system mode and presets                 |
+| `ThemeToggle`       | Light, dark or system switch                                    |
+
+## Using with Interchange
+
+The host app owns the connection to the hub; components only take props.
+
+1. Load run state with [`@intx/hub-client`](https://github.com/faremeter/interchange/tree/main/packages/hub-client): `createRunSession` polls a workflow run's event log and exposes a seq-ordered `WorkflowRunEvent` timeline.
+2. Map that timeline to props: agent output to `ChatMessage` parts for `ChatThread`, step events to `StepList` items, and a run parked on a person to `GateBlock` or `ApprovalCard`.
+3. Wire callbacks back to the hub. `ApprovalCard`'s `onApprove` and `onReject` call your hub route that resolves the awaited signal; the hub checks the caller's grant, not the component.
+
+## Upgrading from 0.1
+
+- Install from npm. Git installs (`github:corbitsdev/react-ui#<sha>`) no longer build `dist/`.
+- Per-module subpaths are gone: import from `@corbits/react-ui` (`import { Button } from "@corbits/react-ui"`).
+- `ui/dialog`, `ui/command-palette`, `ui/mic-permission-dialog`, `ui/menu`, `ui/tooltip` and `ui/toast` are subpath-only, and their peers are optional: `import { Toaster, toast } from "@corbits/react-ui/ui/toast"`. Install the peer for each subpath you keep.
+- `lib/csv`, `lib/url`, `lib/utils`, `lib/workflow-registry` and `ui/chat-dock-timing` are internal. Replace `cn` with `twMerge(clsx(...))`.
+- Stateful components ship `"use client"`. Client wrappers you wrote for them still work, and can go.
+- 84 unused modules are removed, `ui/command` is removed, `ActivityBlock` is renamed `ReasoningBlock`, and `AuthLayout` no longer renders `DitherCanvas` by default.
+- With neither `.dark` nor `.light` on the root, the theme follows the OS. Hosts that toggle `.dark` must add `.light` for an explicit light choice, or mount `ThemeProvider`.
 
 ## License
 
-LGPL-2.1-only. See [LICENSE](./LICENSE).
+LGPL-2.1-only. See [LICENSE](https://github.com/corbitsdev/react-ui/blob/main/LICENSE).

package/dist/blocks/login/auth-layout.d.ts

@@ -35,4 +35,4 @@ export type AuthLayoutProps = {
  * *without* the retracting toolbar, so a `100vh` sign-in page is reliably a
  * little too tall and the button sits just under the fold.
  */
-export declare function AuthLayout({ brand, children, panel, aside, className }: AuthLayoutProps): import("react").JSX.Element;
+export declare function AuthLayout({ brand, children, panel, aside, className, }: AuthLayoutProps): import("react").JSX.Element;

package/dist/blocks/login/auth-layout.js

@@ -16,37 +16,7 @@ import { cn } from "../../lib/utils.js";
  * `min-h-svh`, not `min-h-screen`. On mobile browsers `100vh` is the viewport
  * *without* the retracting toolbar, so a `100vh` sign-in page is reliably a
  * little too tall and the button sits just under the fold.
- */ export function AuthLayout({ brand, children, panel, aside, className }) {
-    return /*#__PURE__*/ _jsxs("div", {
-        className: cn("grid min-h-svh bg-background lg:grid-cols-2", className),
-        children: [
-            /*#__PURE__*/ _jsxs("main", {
-                className: "relative flex flex-col",
-                children: [
-                    brand === undefined ? null : /*#__PURE__*/ _jsx("div", {
-                        className: "flex items-center gap-2.5 p-6 text-base font-semibold tracking-tight md:p-8",
-                        children: brand
-                    }),
-                    /*#__PURE__*/ _jsx("div", {
-                        className: "flex flex-1 items-center justify-center px-6 pb-16 md:px-10",
-                        children: /*#__PURE__*/ _jsx("div", {
-                            className: "w-full max-w-sm",
-                            children: children
-                        })
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                "aria-hidden": true,
-                className: "relative hidden overflow-hidden bg-card lg:block",
-                children: [
-                    panel,
-                    aside === undefined ? null : /*#__PURE__*/ _jsx("div", {
-                        className: "absolute inset-0 flex items-center justify-center p-12",
-                        children: aside
-                    })
-                ]
-            })
-        ]
-    });
+ */
+export function AuthLayout({ brand, children, panel, aside, className, }) {
+    return (_jsxs("div", { className: cn("grid min-h-svh bg-background lg:grid-cols-2", className), children: [_jsxs("main", { className: "relative flex flex-col", children: [brand === undefined ? null : (_jsx("div", { className: "flex items-center gap-2.5 p-6 text-base font-semibold tracking-tight md:p-8", children: brand })), _jsx("div", { className: "flex flex-1 items-center justify-center px-6 pb-16 md:px-10", children: _jsx("div", { className: "w-full max-w-sm", children: children }) })] }), _jsxs("div", { "aria-hidden": true, className: "relative hidden overflow-hidden bg-card lg:block", children: [panel, aside === undefined ? null : (_jsx("div", { className: "absolute inset-0 flex items-center justify-center p-12", children: aside }))] })] }));
 }

package/dist/blocks/login/login-form.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../lib/utils.js";
@@ -24,128 +25,14 @@ import { Input } from "../../ui/input.js";
  * The submit button reads "Signing in…" / "Signing up…" while busy rather
  * than swapping to a spinner. The label is the status, so it is announced by
  * the same mechanism that announces the button.
- */ export function LoginForm({ mode = "sign-in", heading = "Welcome back", providers = [], onProvider, onSubmit, busy = false, error = null, footer, className }) {
+ */
+export function LoginForm({ mode = "sign-in", heading = "Welcome back", providers = [], onProvider, onSubmit, busy = false, error = null, footer, className, }) {
     const [name, setName] = useState("");
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
     const isSignUp = mode === "sign-up";
-    return /*#__PURE__*/ _jsxs("div", {
-        className: cn("flex flex-col gap-6", className),
-        children: [
-            /*#__PURE__*/ _jsx("h1", {
-                className: "text-3xl leading-none font-semibold tracking-tight text-balance",
-                children: heading
-            }),
-            error === null ? null : /*#__PURE__*/ _jsx("p", {
-                role: "alert",
-                "aria-live": "assertive",
-                className: "rounded-md border border-destructive px-3 py-2 text-sm text-destructive",
-                children: error
-            }),
-            onSubmit === undefined ? null : /*#__PURE__*/ _jsxs("form", {
-                className: "flex flex-col gap-4",
-                onSubmit: (event)=>{
+    return (_jsxs("div", { className: cn("flex flex-col gap-6", className), children: [_jsx("h1", { className: "text-3xl leading-none font-semibold tracking-tight text-balance", children: heading }), error === null ? null : (_jsx("p", { role: "alert", "aria-live": "assertive", className: "rounded-md border border-destructive px-3 py-2 text-sm text-destructive", children: error })), onSubmit === undefined ? null : (_jsxs("form", { className: "flex flex-col gap-4", onSubmit: (event) => {
                     event.preventDefault();
-                    onSubmit(isSignUp ? {
-                        name,
-                        email,
-                        password
-                    } : {
-                        email,
-                        password
-                    });
-                },
-                children: [
-                    !isSignUp ? null : /*#__PURE__*/ _jsxs("label", {
-                        className: "flex flex-col gap-1.5 text-sm font-medium",
-                        children: [
-                            "Name",
-                            /*#__PURE__*/ _jsx(Input, {
-                                type: "text",
-                                name: "name",
-                                autoComplete: "name",
-                                placeholder: "Ada Lovelace",
-                                value: name,
-                                onChange: (event)=>setName(event.target.value),
-                                disabled: busy,
-                                required: true,
-                                className: "h-11"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsxs("label", {
-                        className: "flex flex-col gap-1.5 text-sm font-medium",
-                        children: [
-                            "Email",
-                            /*#__PURE__*/ _jsx(Input, {
-                                type: "email",
-                                name: "email",
-                                autoComplete: "email",
-                                placeholder: "you@example.com",
-                                value: email,
-                                onChange: (event)=>setEmail(event.target.value),
-                                disabled: busy,
-                                required: true,
-                                className: "h-11"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsxs("label", {
-                        className: "flex flex-col gap-1.5 text-sm font-medium",
-                        children: [
-                            "Password",
-                            /*#__PURE__*/ _jsx(Input, {
-                                type: "password",
-                                name: "password",
-                                autoComplete: isSignUp ? "new-password" : "current-password",
-                                value: password,
-                                onChange: (event)=>setPassword(event.target.value),
-                                disabled: busy,
-                                required: true,
-                                className: "h-11"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsx(Button, {
-                        type: "submit",
-                        size: "lg",
-                        disabled: busy,
-                        children: busy ? isSignUp ? "Signing up…" : "Signing in…" : "Continue"
-                    })
-                ]
-            }),
-            onSubmit === undefined || providers.length === 0 ? null : /*#__PURE__*/ _jsxs("div", {
-                className: "flex items-center gap-3",
-                children: [
-                    /*#__PURE__*/ _jsx("span", {
-                        "aria-hidden": true,
-                        className: "h-px flex-1 bg-border"
-                    }),
-                    /*#__PURE__*/ _jsx("span", {
-                        className: "text-xs tracking-wider text-muted-foreground uppercase",
-                        children: "or"
-                    }),
-                    /*#__PURE__*/ _jsx("span", {
-                        "aria-hidden": true,
-                        className: "h-px flex-1 bg-border"
-                    })
-                ]
-            }),
-            providers.map((provider)=>/*#__PURE__*/ _jsxs(Button, {
-                    type: "button",
-                    variant: "outline",
-                    size: "lg",
-                    disabled: busy,
-                    onClick: ()=>onProvider?.(provider.id),
-                    children: [
-                        provider.icon,
-                        provider.label
-                    ]
-                }, provider.id)),
-            footer === undefined ? null : /*#__PURE__*/ _jsx("div", {
-                className: "text-sm text-muted-foreground",
-                children: footer
-            })
-        ]
-    });
+                    onSubmit(isSignUp ? { name, email, password } : { email, password });
+                }, children: [!isSignUp ? null : (_jsxs("label", { className: "flex flex-col gap-1.5 text-sm font-medium", children: ["Name", _jsx(Input, { type: "text", name: "name", autoComplete: "name", placeholder: "Ada Lovelace", value: name, onChange: (event) => setName(event.target.value), disabled: busy, required: true, className: "h-11" })] })), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm font-medium", children: ["Email", _jsx(Input, { type: "email", name: "email", autoComplete: "email", placeholder: "you@example.com", value: email, onChange: (event) => setEmail(event.target.value), disabled: busy, required: true, className: "h-11" })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm font-medium", children: ["Password", _jsx(Input, { type: "password", name: "password", autoComplete: isSignUp ? "new-password" : "current-password", value: password, onChange: (event) => setPassword(event.target.value), disabled: busy, required: true, className: "h-11" })] }), _jsx(Button, { type: "submit", size: "lg", disabled: busy, children: busy ? (isSignUp ? "Signing up…" : "Signing in…") : "Continue" })] })), onSubmit === undefined || providers.length === 0 ? null : (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { "aria-hidden": true, className: "h-px flex-1 bg-border" }), _jsx("span", { className: "text-xs tracking-wider text-muted-foreground uppercase", children: "or" }), _jsx("span", { "aria-hidden": true, className: "h-px flex-1 bg-border" })] })), providers.map((provider) => (_jsxs(Button, { type: "button", variant: "outline", size: "lg", disabled: busy, onClick: () => onProvider?.(provider.id), children: [provider.icon, provider.label] }, provider.id))), footer === undefined ? null : (_jsx("div", { className: "text-sm text-muted-foreground", children: footer }))] }));
 }

package/dist/hooks/use-command-palette-navigation.js

@@ -6,24 +6,28 @@ import { useMemo, useState } from "react";
  * Selection is held as an id rather than an index so it survives the list
  * reordering that happens every keystroke (fresh search results land at
  * different positions) — an index would silently point at the wrong row.
- */ export function useCommandPaletteNavigation({ items, onSelect, onClose }) {
+ */
+export function useCommandPaletteNavigation({ items, onSelect, onClose, }) {
     const [requestedId, setRequestedId] = useState(undefined);
-    const activeId = useMemo(()=>{
-        if (items.length === 0) return undefined;
-        if (requestedId !== undefined && items.some((item)=>item.id === requestedId)) return requestedId;
+    const activeId = useMemo(() => {
+        if (items.length === 0)
+            return undefined;
+        if (requestedId !== undefined &&
+            items.some((item) => item.id === requestedId))
+            return requestedId;
         return items[0]?.id;
-    }, [
-        items,
-        requestedId
-    ]);
+    }, [items, requestedId]);
     function moveBy(delta) {
-        if (items.length === 0) return;
-        const currentIndex = activeId === undefined ? -1 : items.findIndex((item)=>item.id === activeId);
+        if (items.length === 0)
+            return;
+        const currentIndex = activeId === undefined
+            ? -1
+            : items.findIndex((item) => item.id === activeId);
         const nextIndex = (currentIndex + delta + items.length) % items.length;
         setRequestedId(items[nextIndex]?.id);
     }
     function onKeyDown(event) {
-        switch(event.key){
+        switch (event.key) {
             case "ArrowDown":
                 event.preventDefault();
                 moveBy(1);
@@ -34,7 +38,8 @@ import { useMemo, useState } from "react";
                 return;
             case "Enter":
                 event.preventDefault();
-                if (activeId !== undefined) onSelect(activeId);
+                if (activeId !== undefined)
+                    onSelect(activeId);
                 return;
             case "Escape":
                 event.preventDefault();
@@ -44,9 +49,5 @@ import { useMemo, useState } from "react";
                 return;
         }
     }
-    return {
-        activeId,
-        setActiveId: setRequestedId,
-        onKeyDown
-    };
+    return { activeId, setActiveId: setRequestedId, onKeyDown };
 }

package/dist/hooks/use-controllable-state.d.ts

@@ -1,10 +1,10 @@
 export type ControllableStateAction<T> = T | ((previous: T) => T);
 export type UseControllableStateOptions<T> = {
     /** Controlled value. Supply this with `onChange` to lift state to a parent. */
-    readonly value?: T;
+    readonly value?: T | undefined;
     /** Seeds the hook's own state when `value` is not supplied. */
     readonly defaultValue: T;
-    readonly onChange?: (value: T) => void;
+    readonly onChange?: ((value: T) => void) | undefined;
     /** Identifies the caller in the dev-mode controlled/uncontrolled warning below. */
     readonly name: string;
 };