@usetheo/ui 0.12.0 → 0.13.1

package/DESIGN.md

@@ -1,6 +1,6 @@
-# DESIGN.md — `@usetheo/ui` (Violet Forge)
+# DESIGN.md — `@theokit/ui` (Violet Forge)
 
-> Plain-text design system spec for LLM assistants generating UI against `@usetheo/ui`. Companion to [`llms.txt`](./llms.txt) (component catalog) and [`docs/design-system.md`](./docs/design-system.md) (human-facing long-form). Read these three together; this file is the visual layer.
+> Plain-text design system spec for LLM assistants generating UI against `@theokit/ui`. Companion to [`llms.txt`](./llms.txt) (component catalog) and [`docs/design-system.md`](./docs/design-system.md) (human-facing long-form). Read these three together; this file is the visual layer.
 >
 > Tokens here are normative — they mirror [`src/styles/tokens.css`](./src/styles/tokens.css) and [`src/themes/violet-forge.ts`](./src/themes/violet-forge.ts). Drift between this file and those is enforced in CI.
 
@@ -8,7 +8,7 @@
 
 ## 1. Visual Theme & Atmosphere
 
-`@usetheo/ui` ships under the design system codename **Violet Forge** — a Vercel-inspired neutral-grayscale system with a Theo violet primary (`#7C3AED`) and a burnt-sienna accent (`#C96442`). The voice is **engineered, calm, agent-surface-ready**. Surfaces are pure neutrals (zero hue tint); color enters only through `primary`, `accent`, and semantic states (success / warning / destructive / info).
+`@theokit/ui` ships under the design system codename **Violet Forge** — a Vercel-inspired neutral-grayscale system with a Theo violet primary (`#7C3AED`) and a burnt-sienna accent (`#C96442`). The voice is **engineered, calm, agent-surface-ready**. Surfaces are pure neutrals (zero hue tint); color enters only through `primary`, `accent`, and semantic states (success / warning / destructive / info).
 
 The system targets two adjacent surfaces:
 
@@ -381,7 +381,7 @@ The token layer respects `prefers-reduced-motion: reduce` — all `transition-*`
 
 ## 9. Agent Prompt Guide
 
-Quick fragments for LLM assistants generating UI against `@usetheo/ui`. Drop into a prompt verbatim.
+Quick fragments for LLM assistants generating UI against `@theokit/ui`. Drop into a prompt verbatim.
 
 ### 9.1 Quick token reference
 
@@ -407,39 +407,39 @@ RADIUS         sm 4 / md 6 / lg 10 / xl 14 / 2xl 20 / full 9999
 
 ### 9.2 Prompt: build a dashboard list page
 
-> Build a [DOMAIN] list page using `@usetheo/ui`. Compose `<PageShell title="…" description="…">` with an `<ActionBar>` (search input + primary action button). Inside, render `<DataTable>` with sticky header. Use `{typography.display-md}` for the title via PageShell's built-in. Status indicators use `<StatusDot variant="success|warning|destructive|info">`. Row actions use `<DropdownMenu>` with `variant="ghost"` trigger. No emojis, no inline hex — only token references. Match the `comfortable` density default.
+> Build a [DOMAIN] list page using `@theokit/ui`. Compose `<PageShell title="…" description="…">` with an `<ActionBar>` (search input + primary action button). Inside, render `<DataTable>` with sticky header. Use `{typography.display-md}` for the title via PageShell's built-in. Status indicators use `<StatusDot variant="success|warning|destructive|info">`. Row actions use `<DropdownMenu>` with `variant="ghost"` trigger. No emojis, no inline hex — only token references. Match the `comfortable` density default.
 
 ### 9.3 Prompt: build a settings panel
 
-> Build a settings page using `@usetheo/ui`. Wrap content in `<PageShell title="Settings" description="…">`. Inside, stack `<Card>` sections per setting group. Each Card has `Card.Header` (title `{typography.title-lg}` + description `{typography.body-sm} text-muted-foreground`), `Card.Content` with form fields (`<Input>`, `<Switch>`, `<Select>`), and `Card.Footer` with a `<Button variant="primary">` save action. Destructive actions go in a final `<DangerZone>` composite. Spacing between Cards is `{spacing.6}` (24 px).
+> Build a settings page using `@theokit/ui`. Wrap content in `<PageShell title="Settings" description="…">`. Inside, stack `<Card>` sections per setting group. Each Card has `Card.Header` (title `{typography.title-lg}` + description `{typography.body-sm} text-muted-foreground`), `Card.Content` with form fields (`<Input>`, `<Switch>`, `<Select>`), and `Card.Footer` with a `<Button variant="primary">` save action. Destructive actions go in a final `<DangerZone>` composite. Spacing between Cards is `{spacing.6}` (24 px).
 
 ### 9.4 Prompt: build an agent chat surface
 
-> Build a chat surface using `@usetheo/ui`. Wrap in a flex column with internal max-width 768 px. Render messages via `<ChatMessage role="user|assistant|system" parts={…}>`. Tool calls and tool results inside `parts[]` render as `<ToolCall>` / `<ToolResult>` blocks (mono labels via `{typography.code-sm}`, prose via `{typography.body-sm}`). Use `<AgentEvent>` for non-message stream events. Composer at the bottom uses `<ChatComposer>` (a composite with `<Textarea>` + send button). No emojis. Streaming state uses `<AgentStreaming>`.
+> Build a chat surface using `@theokit/ui`. Wrap in a flex column with internal max-width 768 px. Render messages via `<ChatMessage role="user|assistant|system" parts={…}>`. Tool calls and tool results inside `parts[]` render as `<ToolCall>` / `<ToolResult>` blocks (mono labels via `{typography.code-sm}`, prose via `{typography.body-sm}`). Use `<AgentEvent>` for non-message stream events. Composer at the bottom uses `<ChatComposer>` (a composite with `<Textarea>` + send button). No emojis. Streaming state uses `<AgentStreaming>`.
 
 ### 9.5 Prompt: build a billing / pricing surface
 
-> Build a pricing/billing page using `@usetheo/ui`. Wrap in `<PageShell title="Billing" description="…">`. Pricing tiers render as a 3-up grid of `<Card>` (tablet 2-up, mobile 1-up). Featured tier uses `<PlanBadge variant="primary">` and an outline on the Card (`border-primary`). Tier name in `{typography.title-lg}`, price in `{typography.display-xl}` with `font-mono` for digits, feature list in `{typography.body-md}` rows with a `<Check>` icon. CTA at the bottom: `<Button variant="primary" size="lg">` for the featured tier, `<Button variant="secondary" size="lg">` for the rest. Usage meters use `<UsageMeter>` and `<CostMeter>`.
+> Build a pricing/billing page using `@theokit/ui`. Wrap in `<PageShell title="Billing" description="…">`. Pricing tiers render as a 3-up grid of `<Card>` (tablet 2-up, mobile 1-up). Featured tier uses `<PlanBadge variant="primary">` and an outline on the Card (`border-primary`). Tier name in `{typography.title-lg}`, price in `{typography.display-xl}` with `font-mono` for digits, feature list in `{typography.body-md}` rows with a `<Check>` icon. CTA at the bottom: `<Button variant="primary" size="lg">` for the featured tier, `<Button variant="secondary" size="lg">` for the rest. Usage meters use `<UsageMeter>` and `<CostMeter>`.
 
 ### 9.6 Prompt: use the design system tokens
 
-> All styling must use `@usetheo/ui` tokens. Colors via Tailwind preset classes (`bg-primary`, `text-foreground`, `border-border`) or CSS vars (`hsl(var(--primary))`). Typography via preset (`text-display-md`, `text-body-md`, `text-label-caps`) — never raw `text-4xl`. Spacing via Tailwind utilities (`gap-4`, `p-5`) which map to the 4-px base. Radii via `rounded-lg` / `rounded-xl` / `rounded-md` mapped to system tokens. Never inline hex, never inline pixel values for spacing — always tokens. The `@usetheo/ui` Tailwind preset must be installed via `presets: [theoUiPreset]` in `tailwind.config.{ts,js}`.
+> All styling must use `@theokit/ui` tokens. Colors via Tailwind preset classes (`bg-primary`, `text-foreground`, `border-border`) or CSS vars (`hsl(var(--primary))`). Typography via preset (`text-display-md`, `text-body-md`, `text-label-caps`) — never raw `text-4xl`. Spacing via Tailwind utilities (`gap-4`, `p-5`) which map to the 4-px base. Radii via `rounded-lg` / `rounded-xl` / `rounded-md` mapped to system tokens. Never inline hex, never inline pixel values for spacing — always tokens. The `@theokit/ui` Tailwind preset must be installed via `presets: [theoUiPreset]` in `tailwind.config.{ts,js}`.
 
 ### 9.7 Component subpath import map (post-Brief-4 tree-shaking)
 
 For Tailwind v4 / Vite projects, prefer subpath imports — they tree-shake per-component:
 
 ```ts
-import { Button } from "@usetheo/ui/button";
-import { Card } from "@usetheo/ui/card";
-import { Input } from "@usetheo/ui/input";
-import { DataTable } from "@usetheo/ui/data-table";
-import { PageShell } from "@usetheo/ui/page-shell";
-import { ActionBar } from "@usetheo/ui/action-bar";
-import { ChatMessage } from "@usetheo/ui/chat-message";
+import { Button } from "@theokit/ui/button";
+import { Card } from "@theokit/ui/card";
+import { Input } from "@theokit/ui/input";
+import { DataTable } from "@theokit/ui/data-table";
+import { PageShell } from "@theokit/ui/page-shell";
+import { ActionBar } from "@theokit/ui/action-bar";
+import { ChatMessage } from "@theokit/ui/chat-message";
 ```
 
-Barrel imports (`import { Button } from "@usetheo/ui"`) work but ship the full barrel — acceptable for prototyping, not for production bundles.
+Barrel imports (`import { Button } from "@theokit/ui"`) work but ship the full barrel — acceptable for prototyping, not for production bundles.
 
 ---
 
@@ -453,4 +453,4 @@ Barrel imports (`import { Button } from "@usetheo/ui"`) work but ship the full b
 
 ---
 
-**End of DESIGN.md** — Violet Forge, `@usetheo/ui` 0.11.0-next.0
+**End of DESIGN.md** — Violet Forge, `@theokit/ui` 0.11.0-next.0

package/NOTICE

@@ -1,4 +1,4 @@
-@usetheo/ui
+@theokit/ui
 Copyright 2026 usetheo.dev
 
 This product includes software developed at Vercel, Inc.
@@ -15,7 +15,7 @@ the canonical shape declared in `vercel/ai` `packages/ai/src/ui/ui-messages.ts`
 (also Apache-2.0) so consumers using `useChat()` from `@ai-sdk/react` get
 zero-adapter interop with `<ChatMessage>`.
 
-`@usetheo/ui` itself is licensed under the Apache License, Version 2.0, the
+`@theokit/ui` itself is licensed under the Apache License, Version 2.0, the
 same terms — see LICENSE.
 
 This product also bundles or peer-depends on the following third-party

package/README.md

@@ -2,19 +2,19 @@
 
 <img src="https://usetheo.dev/logo-128.webp" alt="Theo" width="96" height="96" />
 
-**`@usetheo/ui`** · the **Build** (UI) auxiliary of the [Theo ecosystem](https://usetheo.dev)
+**`@theokit/ui`** · the **Build** (UI) auxiliary of the [Theo ecosystem](https://usetheo.dev)
 
 # The UI your agent already needs.
 
-A React component library built for AI agent surfaces and cloud dashboards. **102 components** designed for what you'd otherwise build from scratch. The visual surface verb of **Chat. Build. Deploy.**
+A React component library built for AI agent surfaces and cloud dashboards. **153 components** designed for what you'd otherwise build from scratch. The visual surface verb of **Chat. Build. Deploy.**
 
 *Editorial typography. Three runtime-swappable themes. shadcn-compatible registry. Apache-2.0.*
 
 <!-- BEGIN:counts -->
 [![license](https://img.shields.io/badge/license-Apache--2.0-7C3AED?style=flat-square)](./LICENSE)
 [![react](https://img.shields.io/badge/react-18+-7C3AED?style=flat-square&logo=react&logoColor=white)](https://react.dev)
-[![tests](https://img.shields.io/badge/tests-1344%20passing-success?style=flat-square)](#quality-gates)
-[![components](https://img.shields.io/badge/components-139-7C3AED?style=flat-square)](#component-catalog)
+[![tests](https://img.shields.io/badge/tests-1605%20passing-success?style=flat-square)](#quality-gates)
+[![components](https://img.shields.io/badge/components-154-7C3AED?style=flat-square)](#component-catalog)
 [![shadcn](https://img.shields.io/badge/shadcn-compatible-000?style=flat-square)](https://ui.shadcn.com/docs/registry)
 <!-- END:counts -->
 
@@ -30,29 +30,31 @@ There is a version of your product where the agent UI is half-built before you s
 
 The chat thread, the tool calls, the streaming assistant message, the model selector, the cost meter, the context window indicator, the audit log row, the permission modal, the deployment status, the build log stream — all rendered. All themed. All accessible. You write product logic. The interface ships with you.
 
-## Why `@usetheo/ui`
+## Why `@theokit/ui`
 
-Most component libraries optimize for marketing pages. `@usetheo/ui` is built for the surfaces that AI agents and cloud dashboards actually need — surfaces where transparency, density of information, and developer trust matter more than hero sections.
+Most component libraries optimize for marketing pages. `@theokit/ui` is built for the surfaces that AI agents and cloud dashboards actually need — surfaces where transparency, density of information, and developer trust matter more than hero sections.
 
 - **Built for AI agents.** Primitives for skills, cron jobs, permission matrices, MCP servers, memory editing, hook config, audit logs, model cards, token usage charts, sub-agent dispatch — the components a transparent agent UI actually needs.
 - **Built for PaaS.** Composites for project cards, deployment rows, build log streams, env var editors, domain config, preview environments, rollback flows, metrics panels.
 - **Themeable at runtime.** Ship three themes out of the box, swap them live via `<ThemeProvider />`, or define your own.
 - **shadcn-compatible registry.** Copy individual components into your project (`npx shadcn add …`) or install the whole package — your call.
-- **Framework-agnostic.** Peer-deps on React only. Works under Vite, Next, Remix, Astro, Tanstack Start.
+- **shadcn v4 conventions.** Every component emits `data-slot` (and `data-variant`/`data-size` where it varies) so you target and override styles by attribute, not Tailwind class order. The `"use client"` directive is preserved in the build, so client components are safe to import into a React Server Component tree when installed from npm.
+- **Per-subpath types.** `import { Button } from "@theokit/ui/button"` resolves an isolated `Button` declaration, not the whole barrel's type surface.
+- **Standard React + Tailwind package.** React is the only required peer (18 or 19); Radix UI, CVA, cmdk, and lucide ship as dependencies. Pairs with TheoKit, or runs standalone in any React app.
 
 The agent UI gap is real — most teams reach for shadcn for the primitives and build the agent-specific parts from scratch, losing weeks before shipping a real surface.
 
-| Surface need | `@usetheo/ui` | shadcn / Radix | Tremor | Build it yourself |
+| Surface need | `@theokit/ui` | shadcn / Radix | Tremor | Build it yourself |
 |---|---|---|---|---|
 | Generic primitives (Button, Card, Dialog) | **Yes** (same Radix foundation) | Yes | Limited | Slow |
-| Agent-specific primitives (`AgentEvent`, `ToolCall`, `MCPServerCard`) | **Yes — 81 of them** | None | None | Weeks |
-| cloud-specific composites (`DeploymentRow`, `BuildLogStream`, `RollbackUI`) | **Yes — 21 of them** | None | None | Weeks |
+| Agent-specific primitives (`AgentEvent`, `ToolCall`, `MCPServerCard`) | **Yes** | None | None | Weeks |
+| cloud-specific composites (`DeploymentRow`, `BuildLogStream`, `RollbackUI`) | **Yes** | None | None | Weeks |
 | Three runtime-swappable themes | **Built-in** | DIY | DIY | DIY |
 | shadcn-compatible registry | **Yes** | Original | No | N/A |
 | ESM-only, tree-shake via barrel | **Yes** | Yes | Yes | DIY |
-| a11y enforced as a quality gate | **Yes** — vitest-axe on 126 stories | Per-component, manual | Manual | Often skipped |
+| a11y enforced as a quality gate | **Yes** — vitest-axe on 151 stories | Per-component, manual | Manual | Often skipped |
 
-Same Radix UI underneath as shadcn — no philosophy fight. We just shipped the next 102 components you were about to write.
+Same Radix UI underneath as shadcn — no philosophy fight. We just shipped the next 153 components you were about to write.
 
 ## What you'd build
 
@@ -73,17 +75,17 @@ Below this line, full technical vocabulary is in play. Installation, themes, the
 ### Option A — install the package
 
 ```bash
-pnpm add @usetheo/ui
+pnpm add @theokit/ui
 ```
 
 ```css
 /* app entrypoint */
-@import "@usetheo/ui/tokens.css";
-@import "@usetheo/ui/styles.css";
+@import "@theokit/ui/tokens.css";
+@import "@theokit/ui/styles.css";
 ```
 
 ```tsx
-import { ThemeProvider, AgentEvent, ToolCall, DeploymentRow } from "@usetheo/ui";
+import { ThemeProvider, AgentEvent, ToolCall, DeploymentRow } from "@theokit/ui";
 
 export default function App() {
   return (
@@ -109,12 +111,12 @@ Every item under [`registry/r/`](./registry/r) is a standalone copy-paste unit w
 
 **Precondition.** Copy-paste install requires `@/` configured as a path alias in your `tsconfig.json` (`{ "paths": { "@/*": ["./src/*"] } }`) — the shadcn-ui 2.0 convention. Inlined source uses `@/lib/cn` and similar `@/components/ui/...` imports. If your project uses a different alias (Vite default `~/`, etc.), either add the `@/` mapping or rewrite the imports after copy-paste. The shipped `registry/index.json` declares this requirement under `metadata.requires.tsconfigPathAlias`.
 
-### SSR (Next.js / Astro / Remix)
+### SSR / Server Components
 
 Inject `<ThemeScript>` in `<head>` to prevent FOUC and hydration mismatch:
 
 ```tsx
-import { ThemeProvider, ThemeScript } from "@usetheo/ui";
+import { ThemeProvider, ThemeScript } from "@theokit/ui";
 
 <html lang="en" suppressHydrationWarning>
   <head>
@@ -130,7 +132,7 @@ import { ThemeProvider, ThemeScript } from "@usetheo/ui";
 
 ### Option C — install the agent skill
 
-For AI coding assistants (Claude Code, Cursor, Codex), `@usetheo/ui` ships a companion **skill** that teaches the assistant how to use the library correctly — pick the right composite, respect the design tokens, run the slop test before shipping.
+For AI coding assistants (Claude Code, Cursor, Codex), `@theokit/ui` ships a companion **skill** that teaches the assistant how to use the library correctly — pick the right composite, respect the design tokens, run the slop test before shipping.
 
 ```bash
 npx skills add usetheodev/theo-ui
@@ -143,33 +145,34 @@ The skill lives at [`skills/theo-ui/`](./skills/theo-ui/) and is installable via
 ## Component catalog
 
 <!-- BEGIN:component-catalog-intro -->
-**139 components**, organized by mechanical rule: a *primitive* imports no other `@usetheo/ui` component; a *composite* does.
+**154 components**, organized by mechanical rule: a *primitive* imports no other `@theokit/ui` component; a *composite* does.
 <!-- END:component-catalog-intro -->
 
 <details>
 <summary>
 <!-- BEGIN:primitives-count -->
-**Primitives** (92) — building blocks
+**Primitives** (99) — building blocks
 <!-- END:primitives-count -->
 </summary>
 
 <!-- BEGIN:primitives -->
 `ActionBar` · `AgentErrorCard` · `AgentEvent` · `AgentHandoff` · `AgentProfile` · `AgentStartingState`
 `AgentStreaming` · `Alert` · `ArtifactPreview` · `AttachmentChip` · `AuditLogEntry` · `AutoCompactNotice`
-`Avatar` · `Badge` · `BrowserControls` · `BuildLogStream` · `Button` · `CapabilityIndicator`
-`Card` · `ChatThread` · `Checkbox` · `ContextCard` · `ContextWindowBar` · `CopyButton`
-`CostMeter` · `CreatedFilesCard` · `CronJobCard` · `DangerZone` · `Dialog` · `DiffViewer`
-`DropdownMenu` · `EmptyState` · `FolderContextCard` · `FolderSelector` · `FormField` · `HookConfig`
-`HookEventLog` · `Input` · `IntentSelector` · `Label` · `LaneBoard` · `LoginSplit`
-`MCPServerCard` · `MemoryEditor` · `MentionMenu` · `MetricsPanel` · `ModelCard` · `ModelSelector`
-`Pagination` · `PermissionMatrix` · `PinInput` · `PlanBadge` · `Progress` · `ProgressChecklist`
-`ProjectSwitcher` · `QuickActionChips` · `RadioGroup` · `RecentFoldersList` · `RuleCard` · `RunStats`
-`RunningTasksPanel` · `ScrollArea` · `Select` · `SessionListItem` · `SessionTimeline` · `Sheet`
-`Sidebar` · `Skeleton` · `SkillCard` · `SocialAuthRow` · `StatTile` · `StatusDot`
-`StepsRail` · `SubAgentDispatch` · `Switch` · `SystemPromptEditor` · `Table` · `Tabs`
-`TaskNode` · `TaskPlan` · `TerminalPanel` · `Textarea` · `Timestamp` · `Toast`
+`Avatar` · `Badge` · `BranchIndicator` · `BrowserControls` · `BuildLogStream` · `Button`
+`CapabilityIndicator` · `Card` · `ChannelCard` · `ChatThread` · `Checkbox` · `ContextCard`
+`ContextWindowBar` · `CopyButton` · `CostMeter` · `CreatedFilesCard` · `CronJobCard` · `DangerZone`
+`Dialog` · `DiffViewer` · `DropdownMenu` · `EmptyState` · `ExportChatDialog` · `FolderContextCard`
+`FolderSelector` · `FormField` · `GatewayStatusIndicator` · `HookConfig` · `HookEventLog` · `Input`
+`IntentSelector` · `Label` · `LaneBoard` · `LoginSplit` · `MCPServerCard` · `MemoryEditor`
+`MentionMenu` · `MetricsPanel` · `ModelCard` · `ModelSelector` · `Pagination` · `PermissionMatrix`
+`PinInput` · `PlanBadge` · `Progress` · `ProgressChecklist` · `ProjectSwitcher` · `QuickActionChips`
+`RadioGroup` · `RecentFoldersList` · `RuleCard` · `RunStats` · `RunStatusPill` · `RunningTasksPanel`
+`ScrollArea` · `Select` · `SessionListItem` · `SessionTimeline` · `Sheet` · `Sidebar`
+`Skeleton` · `SkillCard` · `SocialAuthRow` · `StatTile` · `StatusDot` · `StepsRail`
+`SubAgentDispatch` · `Switch` · `SystemPromptEditor` · `Table` · `Tabs` · `TaskNode`
+`TaskPlan` · `TerminalPanel` · `Textarea` · `ThinkingLevelSelector` · `Timestamp` · `Toast`
 `Toaster` · `TokenUsageChart` · `ToolCall` · `ToolCallCard` · `ToolResult` · `ToolsList`
-`Tooltip` · `TopNav`
+`Tooltip` · `TopNav` · `UpdateBanner`
 <!-- END:primitives -->
 
 </details>
@@ -177,12 +180,12 @@ The skill lives at [`skills/theo-ui/`](./skills/theo-ui/) and is installable via
 <details>
 <summary>
 <!-- BEGIN:composites-count -->
-**Composites** (47) — assembled flows
+**Composites** (55) — assembled flows
 <!-- END:composites-count -->
 </summary>
 
 <!-- BEGIN:composites -->
-`AccountMenu` · `AgentComposer` · `AgentEditor` · `AgentStream` · `AgentTimeline` · `ApprovalCard` · `ChatComposer` · `ChatMessage` · `ChatMessageAction` · `ChatMessageActions` · `ChatMessageBranch` · `ChatMessageBranchContent` · `ChatMessageBranchNext` · `ChatMessageBranchPage` · `ChatMessageBranchPrevious` · `ChatMessageBranchSelector` · `ChatMessageContent` · `ChatMessageResponse` · `ChatMessageRoot` · `ChatMessageToolbar` · `CodeBlock` · `CommandPalette` · `ConfirmDialog` · `CronJobsList` · `DataPart` · `DataTable` · `DeploymentRow` · `DomainConfig` · `EnvVarEditor` · `FilePart` · `MCPServerList` · `PageShell` · `PermissionModal` · `PreviewEnvCard` · `PreviewPanel` · `ProjectCard` · `ReasoningPart` · `RollbackUI` · `RuleEditor` · `SkillEditor` · `SkillsList` · `SourceDocumentPart` · `SourceUrlPart` · `TaskHeader` · `TextPart` · `ToolCallPart` · `UsageMeter`
+`AccountMenu` · `AgentComposer` · `AgentEditor` · `AgentStream` · `AgentTimeline` · `AgentToolRenderer` · `ApprovalCard` · `ChatComposer` · `ChatMessage` · `ChatMessageAction` · `ChatMessageActions` · `ChatMessageBranch` · `ChatMessageBranchContent` · `ChatMessageBranchNext` · `ChatMessageBranchPage` · `ChatMessageBranchPrevious` · `ChatMessageBranchSelector` · `ChatMessageContent` · `ChatMessageResponse` · `ChatMessageRoot` · `ChatMessageToolbar` · `ChoicePrompt` · `CodeBlock` · `CommandPalette` · `ConfirmDialog` · `ConfirmPrompt` · `CronJobsList` · `DataPart` · `DataTable` · `DeploymentRow` · `DomainConfig` · `EnvVarEditor` · `FilePart` · `MCPServerList` · `MetricCard` · `MultiSelectPrompt` · `PageShell` · `PermissionModal` · `PreviewEnvCard` · `PreviewPanel` · `ProjectCard` · `ReasoningPart` · `RollbackUI` · `RuleEditor` · `SkillEditor` · `SkillsList` · `SourceDocumentPart` · `SourceUrlPart` · `StabilityBundleViewer` · `StatusIndicator` · `TaskHeader` · `TextPart` · `TextPrompt` · `ToolCallPart` · `UsageMeter`
 <!-- END:composites -->
 
 </details>
@@ -207,12 +210,12 @@ Three themes ship out of the box, all driven by HSL-split CSS variables. Swap at
 
 | Theme | Vibe | Primary | Accent |
 |---|---|---|---|
-| `violet-forge` *(default)* | Editorial dark, AI workspace energy | Theo violet `#7C3AED` | Burnt sienna `#C96442` |
+| `violet-forge` *(default)* | Editorial dark, AI workspace energy | Theo violet `#A855F7` | Burnt sienna `#C96442` |
 | `classic-paper` | Warm light, document-first reading | Indigo `#2563EB` | Amber `#F59E0B` |
 | `aurora-terminal` | High-contrast dev terminal feel | Cyan-aurora `#3DD9D6` | Aurora pink `#FF5C8A` |
 
 ```tsx
-import { ThemeProvider, ThemeSwitcher, builtinThemes } from "@usetheo/ui";
+import { ThemeProvider, ThemeSwitcher, builtinThemes } from "@theokit/ui";
 
 <ThemeProvider defaultTheme="violet-forge" themes={builtinThemes}>
   <ThemeSwitcher />
@@ -220,7 +223,7 @@ import { ThemeProvider, ThemeSwitcher, builtinThemes } from "@usetheo/ui";
 </ThemeProvider>
 ```
 
-Define your own theme by extending `Theme` from `@usetheo/ui` — see [`docs/design-system.md`](./docs/design-system.md).
+Define your own theme by extending `Theme` from `@theokit/ui` — see [`docs/design-system.md`](./docs/design-system.md).
 
 ---
 
@@ -228,7 +231,7 @@ Define your own theme by extending `Theme` from `@usetheo/ui` — see [`docs/des
 
 | Token | Light | Dark |
 |---|---|---|
-| Primary (Theo violet) | `#7C3AED` | `#7C3AED` |
+| Primary (Theo violet) | `#A855F7` | `#A855F7` |
 | Accent (burnt sienna) | `#C96442` | `#C96442` |
 | Background | `#FFFFFF` pure white (Vercel-style) | `#0A0A0A` charcoal |
 | Display font | **Geist Sans** | **Geist Sans** |
@@ -241,11 +244,11 @@ Full spec: [`docs/design-system.md`](./docs/design-system.md). Visual audit of c
 
 ### Self-hosting fonts
 
-By default `@usetheo/ui/styles.css` `@import`s Geist + Geist Mono from `fonts.googleapis.com`. For GDPR-sensitive deployments or strict CSP environments, self-host instead:
+By default `@theokit/ui/styles.css` `@import`s Geist + Geist Mono from `fonts.googleapis.com`. For GDPR-sensitive deployments or strict CSP environments, self-host instead:
 
 1. Download Geist from [Vercel](https://vercel.com/font) (or the `geist` npm package).
 2. Drop the assets into your `public/fonts/` folder.
-3. In your app's global CSS, comment the `@usetheo/ui/styles.css` `@import` rule for Google Fonts (or import `@usetheo/ui/tokens.css` only) and add your own `@font-face` blocks for `Geist` and `Geist Mono`.
+3. In your app's global CSS, comment the `@theokit/ui/styles.css` `@import` rule for Google Fonts (or import `@theokit/ui/tokens.css` only) and add your own `@font-face` blocks for `Geist` and `Geist Mono`.
 
 The CSS variables (`--font-body`, `--font-display`, `--font-mono`) are already wired to consume whichever `@font-face` rules are present — no component changes needed.
 
@@ -291,7 +294,7 @@ pnpm quality:gates     # full chain
 ```
 src/
   components/
-    primitives/    atomic building blocks (no internal @usetheo/ui deps)
+    primitives/    atomic building blocks (no internal @theokit/ui deps)
     composites/    assembled flows (compose primitives via barrel imports)
   foundations/     Ladle stories for colors, typography, spacing, elevation, motion
   themes/          ThemeProvider, ThemeScript, ThemeSwitcher, 3 themes
@@ -310,33 +313,33 @@ tests/             fixture-shadcn-app/ (registry install integration test)
 
 ## Bundle & module format
 
-- **ESM-only** — `@usetheo/ui` ships a single `dist/index.js` (ESM) plus
+- **ESM-only** — `@theokit/ui` ships a single `dist/index.js` (ESM) plus
   per-component `dist/components/.../index.d.ts` type declarations. No CJS
   build. Consumers running on CommonJS Node need to transpile or use a
-  bundler. This is intentional: the four-pillar audience (modern Vite,
-  Next 14+, Astro, Remix) is ESM-first.
+  bundler. This is intentional: modern ESM-first React toolchains are the
+  target.
 - **Tree-shaking via the barrel** — modern bundlers (Vite, esbuild, Rollup,
   webpack 5, Bun) read the `sideEffects: ["**/*.css"]` hint and tree-shake
   unused components from the barrel import (`import { Button } from
-  "@usetheo/ui"` drops every other component from the final bundle). No
+  "@theokit/ui"` drops every other component from the final bundle). No
   per-component subpath exports are needed for this to work.
 - **Subpath imports are aliases (not separate bundles).** `package.json#exports`
-  publishes 99 component subpaths (`@usetheo/ui/button`, `@usetheo/ui/agent-event`,
+  publishes 99 component subpaths (`@theokit/ui/button`, `@theokit/ui/agent-event`,
   …). Every subpath resolves to the same `dist/index.js`. tsup is configured with
   `splitting: false` deliberately — a 99-entry split would duplicate shared code
   (cn, types, Radix runtime) into every chunk and inflate the tarball. Subpath
   imports exist for IDE intellisense and import organization. Modern bundlers
-  tree-shake the same way whether you write `import { Button } from "@usetheo/ui"`
-  or `import { Button } from "@usetheo/ui/button"`. Runtimes that don't tree-shake
+  tree-shake the same way whether you write `import { Button } from "@theokit/ui"`
+  or `import { Button } from "@theokit/ui/button"`. Runtimes that don't tree-shake
   (Jest classic, Node REPL, raw browser ESM) will load the full barrel either way
   — accept that cost or pre-bundle with the consumer's tooling.
 - **CSS distribution** — `dist/styles.css` is the recommended single import
   (combines tokens, fonts self-hosted, Tailwind base/components/utilities).
-  `@usetheo/ui/tokens.css`, `@usetheo/ui/fonts.css`, and
-  `@usetheo/ui/fonts-cdn.css` (opt-in) are available for finer control.
+  `@theokit/ui/tokens.css`, `@theokit/ui/fonts.css`, and
+  `@theokit/ui/fonts-cdn.css` (opt-in) are available for finer control.
 - **Self-hosted fonts** — Geist Sans + Geist Mono ship as woff2 under
   `dist/fonts/` (~290 KB total). Opt into Google Fonts CDN with
-  `@import "@usetheo/ui/fonts-cdn.css"` instead of the default if you
+  `@import "@theokit/ui/fonts-cdn.css"` instead of the default if you
   prefer not to host static assets.
 
 ---
@@ -345,22 +348,22 @@ tests/             fixture-shadcn-app/ (registry install integration test)
 
 Honest claims only.
 
-- **Production.** 102 components, 453 tests passing, zero a11y violations on 126 Ladle stories, bundle size enforced. Quality gates run on every PR.
+- **Production.** 153 components, 1,513 tests passing, zero a11y violations on 151 Ladle stories, bundle size enforced. Quality gates run on every PR.
 - **Registry distribution.** Served at [`https://usetheodev.github.io/theo-ui/r/`](https://usetheodev.github.io/theo-ui/r/) (GitHub Pages, auto-deploy on every push to `main`). The branded `https://ui.usetheo.dev/r/` URL is a single DNS CNAME away — point `ui.usetheo.dev` at `usetheodev.github.io` and add it as a custom domain in Pages settings.
 - **ESM-only.** Modern bundlers only. Consumers on CommonJS Node need to transpile or use a bundler.
 - **Component count is the floor, not the ceiling.** New agent and PaaS surfaces ship through PRs; every addition runs the same quality gates.
 
 ## Engines (isolated subpaths)
 
-Engines ship as bundle-isolated subpaths — they are NOT in the main barrel (`@usetheo/ui`). Each one has its own dist file, its own optional peer-deps, and its own RFC.
+Engines ship as bundle-isolated subpaths — they are NOT in the main barrel (`@theokit/ui`). Each one has its own dist file, its own optional peer-deps, and its own RFC.
 
 ```bash
 # Whiteboard — view-only renderer for JSON in Excalidraw style.
-pnpm add @usetheo/ui roughjs perfect-freehand
+pnpm add @theokit/ui roughjs perfect-freehand
 ```
 
 ```tsx
-import { Whiteboard, type WhiteboardData } from "@usetheo/ui/whiteboard";
+import { Whiteboard, type WhiteboardData } from "@theokit/ui/whiteboard";
 
 const scene: WhiteboardData = {
   version: 1,
@@ -378,14 +381,14 @@ const scene: WhiteboardData = {
 
 ```bash
 # Slide — view-only renderer for markdown + YAML frontmatter, Marp-inspired.
-pnpm add @usetheo/ui mdast-util-from-markdown mdast-util-gfm \
+pnpm add @theokit/ui mdast-util-from-markdown mdast-util-gfm \
   micromark-extension-gfm mdast-util-to-hast hast-util-sanitize \
   hast-util-to-jsx-runtime yaml
 ```
 
 ```tsx
-import { Slide } from "@usetheo/ui/slide";
-import "@usetheo/ui/slide/themes/default.css";
+import { Slide } from "@theokit/ui/slide";
+import "@theokit/ui/slide/themes/default.css";
 
 const md = `---
 theme: default
@@ -406,14 +409,14 @@ Note: IDs generated from markdown headings are prefixed with `user-content-` by
 
 ```bash
 # SlideDeck — multi-slide deck w/ navigation, presenter, fullscreen, PDF.
-pnpm add @usetheo/ui mdast-util-from-markdown mdast-util-gfm \
+pnpm add @theokit/ui mdast-util-from-markdown mdast-util-gfm \
   micromark-extension-gfm mdast-util-to-hast hast-util-sanitize \
   hast-util-to-jsx-runtime yaml
 ```
 
 ```tsx
-import { SlideDeck } from "@usetheo/ui/slide-deck";
-import "@usetheo/ui/slide/themes/default.css";
+import { SlideDeck } from "@theokit/ui/slide-deck";
+import "@theokit/ui/slide/themes/default.css";
 
 const deck = `# Welcome
 
@@ -436,9 +439,9 @@ Use ← / → / Space, swipe on mobile, or click thumbnails.
 
 | Engine | Subpath | Status | RFC |
 |---|---|---|---|
-| Whiteboard (view-only, JSON → SVG, Excalidraw aesthetic) | `@usetheo/ui/whiteboard` | Available | [RFC 0001](./docs/rfcs/0001-whiteboard.md) |
-| Slide (view-only, markdown → themed surface, Marp-inspired) | `@usetheo/ui/slide` | Available | [RFC 0002](./docs/rfcs/0002-slide.md) |
-| SlideDeck (multi-slide deck w/ navigation + presenter + fullscreen + PDF) | `@usetheo/ui/slide-deck` | Available | [RFC 0003](./docs/rfcs/0003-slide-deck.md) |
+| Whiteboard (view-only, JSON → SVG, Excalidraw aesthetic) | `@theokit/ui/whiteboard` | Available | [RFC 0001](./docs/rfcs/0001-whiteboard.md) |
+| Slide (view-only, markdown → themed surface, Marp-inspired) | `@theokit/ui/slide` | Available | [RFC 0002](./docs/rfcs/0002-slide.md) |
+| SlideDeck (multi-slide deck w/ navigation + presenter + fullscreen + PDF) | `@theokit/ui/slide-deck` | Available | [RFC 0003](./docs/rfcs/0003-slide-deck.md) |
 | Diagram | TBD | Roadmap | TBD |
 
 Each engine ships behind the same gate chain (test + story + a11y + registry + bundle isolation). No version commitment for the Roadmap items — these are not on the 0.1 / 1.0 line.

package/dist/chunk-23YEYNDS.js

@@ -0,0 +1,89 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var formatTokens = (n) => {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+  return `${n}`;
+};
+var ContextWindowBar = forwardRef(
+  ({
+    className,
+    used,
+    total,
+    trailing,
+    label = "Context",
+    compact,
+    warnAt = 0.7,
+    dangerAt = 0.9,
+    ...props
+  }, ref) => {
+    const ratio = Math.max(0, Math.min(1, used / total));
+    const tone = ratio >= dangerAt ? "destructive" : ratio >= warnAt ? "warning" : "primary";
+    const percent = Math.round(ratio * 100);
+    const barColor = {
+      primary: "bg-primary",
+      warning: "bg-warning",
+      destructive: "bg-destructive"
+    }[tone];
+    const textColor = {
+      primary: "text-foreground",
+      warning: "text-warning",
+      destructive: "text-destructive"
+    }[tone];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "context-window-bar",
+        ref,
+        className: cn("grid gap-1.5", className),
+        ...props,
+        children: [
+          !compact ? /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-label-caps text-muted-foreground uppercase tracking-wider", children: label }),
+            /* @__PURE__ */ jsxs("span", { className: cn("font-mono text-body-sm tabular-nums", textColor), children: [
+              formatTokens(used),
+              " / ",
+              formatTokens(total),
+              " ",
+              /* @__PURE__ */ jsxs("span", { className: "opacity-60", children: [
+                "(",
+                percent,
+                "%)"
+              ] })
+            ] })
+          ] }) : null,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-1.5 w-full overflow-hidden rounded-full bg-muted",
+              role: "progressbar",
+              tabIndex: -1,
+              "aria-valuenow": used,
+              "aria-valuemin": 0,
+              "aria-valuemax": total,
+              "aria-label": `${percent}% of context window used`,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "h-full rounded-full transition-[width,background-color] duration-base ease-out-soft",
+                    barColor
+                  ),
+                  style: { width: `${percent}%` }
+                }
+              )
+            }
+          ),
+          trailing ? /* @__PURE__ */ jsx("div", { className: "font-mono text-label text-muted-foreground", children: trailing }) : null
+        ]
+      }
+    );
+  }
+);
+ContextWindowBar.displayName = "ContextWindowBar";
+
+export { ContextWindowBar };
+//# sourceMappingURL=chunk-23YEYNDS.js.map
+//# sourceMappingURL=chunk-23YEYNDS.js.map

package/dist/chunk-23YEYNDS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/context-window-bar/context-window-bar.tsx"],"names":[],"mappings":"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","file":"chunk-23YEYNDS.js","sourcesContent":["import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\ninterface ContextWindowBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Tokens currently used in the context window. */\n  used: number;\n  /** Model's total context capacity (e.g. 200_000, 1_000_000). */\n  total: number;\n  /** Optional secondary label rendered on the right (e.g. model name). */\n  trailing?: ReactNode;\n  /** Optional title shown above the bar. */\n  label?: ReactNode;\n  /** Compact mode hides numbers and label; just the bar. */\n  compact?: boolean;\n  /**\n   * Override warning thresholds (0..1). Defaults: warn 0.7, danger 0.9.\n   */\n  warnAt?: number;\n  dangerAt?: number;\n}\n\nconst formatTokens = (n: number) => {\n  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;\n  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;\n  return `${n}`;\n};\n\n/**\n * ContextWindowBar — shows how much of the model's context window has been\n * consumed. Color transitions: success → warning → destructive past thresholds.\n *\n * Critical for transparency: a user should always be able to glance at this\n * and know if the conversation is about to hit the cap.\n */\nconst ContextWindowBar = forwardRef<HTMLDivElement, ContextWindowBarProps>(\n  (\n    {\n      className,\n      used,\n      total,\n      trailing,\n      label = \"Context\",\n      compact,\n      warnAt = 0.7,\n      dangerAt = 0.9,\n      ...props\n    },\n    ref,\n  ) => {\n    const ratio = Math.max(0, Math.min(1, used / total));\n    const tone = ratio >= dangerAt ? \"destructive\" : ratio >= warnAt ? \"warning\" : \"primary\";\n    const percent = Math.round(ratio * 100);\n\n    const barColor = {\n      primary: \"bg-primary\",\n      warning: \"bg-warning\",\n      destructive: \"bg-destructive\",\n    }[tone];\n\n    const textColor = {\n      primary: \"text-foreground\",\n      warning: \"text-warning\",\n      destructive: \"text-destructive\",\n    }[tone];\n\n    return (\n      <div\n        data-slot=\"context-window-bar\"\n        ref={ref}\n        className={cn(\"grid gap-1.5\", className)}\n        {...props}\n      >\n        {!compact ? (\n          <div className=\"flex items-baseline justify-between gap-2\">\n            <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              {label}\n            </span>\n            <span className={cn(\"font-mono text-body-sm tabular-nums\", textColor)}>\n              {formatTokens(used)} / {formatTokens(total)}{\" \"}\n              <span className=\"opacity-60\">({percent}%)</span>\n            </span>\n          </div>\n        ) : null}\n        <div\n          className=\"h-1.5 w-full overflow-hidden rounded-full bg-muted\"\n          role=\"progressbar\"\n          tabIndex={-1}\n          aria-valuenow={used}\n          aria-valuemin={0}\n          aria-valuemax={total}\n          aria-label={`${percent}% of context window used`}\n        >\n          <div\n            className={cn(\n              \"h-full rounded-full transition-[width,background-color] duration-base ease-out-soft\",\n              barColor,\n            )}\n            style={{ width: `${percent}%` }}\n          />\n        </div>\n        {trailing ? (\n          <div className=\"font-mono text-label text-muted-foreground\">{trailing}</div>\n        ) : null}\n      </div>\n    );\n  },\n);\nContextWindowBar.displayName = \"ContextWindowBar\";\n\nexport { ContextWindowBar };\n"]}