@usetheo/ui 0.5.0-next.0 → 0.6.0-next.0

package/CHANGELOG.md

@@ -7,6 +7,182 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.6.0-next.0] - 2026-05-23
+
+Minor — `<ChatMessage>` rewritten on top of the Vercel AI SDK `UIMessage`
+shape with full markdown rendering, syntax-highlighted code blocks, math,
+mermaid diagrams, tool calls, reasoning panels, file/source citations,
+branching navigation, and a streaming-safe markdown preprocess.
+
+### Added
+
+- **`<ChatMessage>` v2 (RFC 0009)** — promoted from primitive to composite
+  (`src/components/composites/chat-message/`). Two consumption shapes:
+  (a) convenience `<ChatMessage message={uiMessage} />` auto-dispatches
+  every part to its built-in renderer; (b) composable
+  `<ChatMessage.Root from="assistant"><ChatMessage.Content>…</…></…>` for
+  full control. Forks structural shell from `vercel/ai-elements`
+  (Apache-2.0, see `NOTICE`). Renders 11 part types:
+  `text`, `reasoning`, `tool-${name}`, `dynamic-tool`, `file`,
+  `reasoning-file`, `source-url`, `source-document`, `step-start`,
+  `custom`, `data-${name}`. (#TBD)
+- **Branching navigation** — `<ChatMessageBranch>` + content / selector /
+  previous / next / page sub-components for cycling through alternate
+  responses on a single turn. (#TBD)
+- **Markdown engine (`src/lib/markdown/`)** — `parseMarkdownToReact()` +
+  `parseMarkdownToReactSafe()` build a mdast → hast → React pipeline
+  via the existing optional peer-deps (`mdast-util-from-markdown`,
+  `mdast-util-gfm`, `mdast-util-to-hast`, `hast-util-sanitize`,
+  `hast-util-to-jsx-runtime`). Sanitize schema allows
+  `language-*` classes on `<code>`/`<pre>` so syntax highlight survives.
+  GFM tables, task lists, strikethrough, autolinks all render. (#TBD)
+- **Streaming-safe preprocessor** — `preprocessStreaming()` auto-closes
+  trailing `**bold`, `_italic`, `` `code ``, `[link](url`, `$math$`,
+  `$$blockmath$$`, and `` ```fence `` so token-by-token streaming output
+  never flashes raw markdown chars. Re-implemented (NOT
+  `streamdown`-dep) so we don't take a runtime dependency on a Vercel
+  package we compete with. (#TBD)
+- **`<CodeBlock>` + `<InlineCode>` (`src/lib/markdown/`)** — fenced code
+  ships Shiki SSR-friendly highlight (lazy `import("shiki")` — peer-dep
+  optional, graceful plain-`<pre>` fallback), language label header,
+  Copy → Check 2s button per `shadcn.io` AI code-block pattern. Inline
+  `<code>` is styled distinct from blocks. (#TBD)
+- **`<MathInline>` + `<MathBlock>`** — lazy-load KaTeX, render to safe
+  HTML, fall back to `<code>` / `<pre>` plain when peer-dep missing. (#TBD)
+- **`<MermaidDiagram>`** — lazy-load Mermaid with `securityLevel:
+  "strict"`, render to SVG. Failed parse or missing peer falls back to
+  a labeled `<pre>` block. (#TBD)
+- **11 Vercel-compat UIMessagePart types** + 10 type guards in
+  `src/types/chat.ts` (`UIMessage`, `UIMessagePart`, `TextUIPart`,
+  `ReasoningUIPart`, `ToolUIPart`, `DataUIPart`, `FileUIPart`,
+  `ReasoningFileUIPart`, `SourceUrlUIPart`, `SourceDocumentUIPart`,
+  `StepStartUIPart`, `CustomContentUIPart`, `ProviderMetadata`,
+  `ToolInvocationState`, `MessageRole`). Field-for-field compatible
+  with `useChat()` from `@ai-sdk/react` — zero-adapter interop. (#TBD)
+
+### Changed
+
+- **Taxonomy**: `ChatMessage` moves from `primitives/` → `composites/`.
+  Composite layer is the correct home — internal deps on `<Button>`,
+  native `<details>`, our `<Card>` patterns. README catalog counts
+  adjust automatically via the structure gate (`pnpm sync:readme`). (#TBD)
+- **`registry/chat-message.json`** — descriptor now lists 12 source
+  files + 6 lib files, declares `lucide-react` + `safe-href` + `button`
+  registry-deps. (#TBD)
+
+### Breaking changes
+
+- **`Message` type removed.** `import type { Message } from "@usetheo/ui"`
+  now fails — use `UIMessage` instead. TypeScript will hint
+  `Did you mean 'UIMessage'?`.
+- **`message.content` removed.** Replace every callsite:
+
+  ```diff
+  - { id, role: "user", content: "hello", timestamp: "10:00" }
+  + { id, role: "user", parts: [{ type: "text", text: "hello" }] }
+  ```
+
+  Internal callsites already migrated: `agent-stream`,
+  `chat-thread.stories`, `theo-code-shell.data`, `task-running.stories`,
+  `task-starting.stories`, `task-completed.stories`. For mockup data
+  with arbitrary JSX content, use the composable form:
+
+  ```tsx
+  <ChatMessage.Root from="assistant">
+    <ChatMessage.Content variant="contained">
+      <div>any JSX here</div>
+    </ChatMessage.Content>
+  </ChatMessage.Root>
+  ```
+
+- **`message.model` / `message.timestamp` no longer rendered** by
+  `<ChatMessage>` — fold them into custom UI under the message body, or
+  attach via `metadata?: unknown` (consumer-typed) and read from there.
+- **`./components/primitives/chat-message/`** deleted. Imports must move
+  to `./components/composites/chat-message/` (the public `@usetheo/ui`
+  barrel handles this; only relative imports inside the repo need
+  updating).
+
+### Notes
+
+- **License attribution**: a `NOTICE` file ships at the package root
+  with Apache-2.0 attribution to `vercel/ai-elements` for the
+  structural-shell components forked, and to `vercel/ai` for the
+  `UIMessage` shape mirrored. Both upstream and TheoUI are Apache-2.0
+  — compatible.
+- **Reference clones** of `vercel/ai-elements` and `vercel/ai` live in
+  `referencia/` (read-only). Not shipped in the npm tarball (excluded
+  via the `files` field).
+
+## [0.5.1-next.0] - 2026-05-22
+
+Patch — RFC 0008 follow-up. The 0.5.0-next.0 release declared `tailwindcss@^4`
+as a peer dependency and shipped the `./vite-plugin` + `./preset` subpaths,
+but the actual CSS / token / preset artifacts inside the tarball were still
+Tailwind v3 internally. Result: every TheoKit consumer of 0.5.0-next.0 booted
+with unstyled UI in dev and production — `bg-primary`, `text-muted-foreground`,
+`border-border`, `text-body-sm`, etc. emitted as className strings with no
+matching CSS rule.
+
+This release rewrites the three v3-shaped artifacts to v4-native syntax and
+ships a fixture-backed real-build dogfood so the regression cannot recur.
+
+### Changed
+
+- **`dist/styles.css` is now Tailwind v4 native.** Uses `@import "tailwindcss"`
+  (replaces the v3 `@tailwind base; @tailwind components; @tailwind utilities;`
+  trio that Tailwind v4 emits as literal strings, with zero utility generation).
+  Imports `tokens.css` (runtime cascade) AND `tokens-v4.css` (`@theme` namespace)
+  so consumers' Tailwind v4 build resolves both layers correctly. Same
+  `@layer base` content (border-color, body font, focus ring, scrollbar
+  styling) as before. (#TBD)
+- **`./preset` subpath is now a CSS file.** Tailwind v4 dropped the v3 JS
+  preset format — `theme.extend.colors.{name}` declarations are a no-op for
+  v4. The new `dist/preset.css` simply chains `@import "./tokens.css"` and
+  `@import "./tokens-v4.css"` so consumers can `@import "@usetheo/ui/preset.css"`
+  from their own Tailwind v4 entry CSS. (#TBD)
+
+### Added
+
+- **`@usetheo/ui/tokens-v4.css` (NEW)** — `@theme {}` block declaring 28
+  `--color-*` aliases (full color set), 14 `--text-*` typescale tiers
+  (Violet Forge — `--text-display-2xl` through `--text-code-sm` with companion
+  `--*--line-height`, `--*--letter-spacing`, `--*--font-weight`), 3 `--font-*`
+  family tokens, 7 `--radius-*` tiers, 5 `--shadow-*` levels, 3 `--ease-*`
+  timings, and 2 `--animate-*` keyframe-bound utilities. Every color alias
+  uses `hsl(var(--*))` indirection so `<ThemeProvider>`'s runtime
+  `[data-theme]` cascade keeps working — switching themes still recolors
+  every utility. (#TBD)
+- **`@usetheo/ui/styles-v3-legacy.css` (NEW)** — the previous v3-shaped
+  `@tailwind base/components/utilities` entry. Pinned consumers on
+  `tailwindcss@^3` who still want a prebuilt stylesheet can import this
+  subpath. New code SHOULD use `@usetheo/ui/styles.css` (v4) instead.
+- **`@usetheo/ui/preset-v3-legacy` (NEW)** — the v3 JS `Partial<Config>`
+  preset that previously lived at `./preset`. Renamed so the canonical
+  `./preset` subpath can host the v4 CSS preset. v3 consumers update
+  imports from `@usetheo/ui/preset` to `@usetheo/ui/preset-v3-legacy`.
+- **Dogfood scripts** — `pnpm dogfood:v4-zero-config` (shape check, runs in
+  `quality:gates`) and `pnpm dogfood:v4-real-build` (end-to-end: packs the
+  tarball, installs in a tmp project alongside `@tailwindcss/cli@^4`, runs
+  Tailwind v4 against `tests/fixtures/v4-zero-config/`, and grep-asserts the
+  expected utility classes appear in the emitted CSS — 12 assertions). The
+  real-build dogfood is opt-in (slow, requires network) but catches any
+  future regression where v3-shaped artifacts get shipped under a v4 peer
+  declaration. (#TBD)
+
+### Notes
+
+- **Breaking for any 0.5.0-next.0 consumer.** The `./preset` subpath changed
+  from JS (`Partial<Config>` default-export) to CSS file. Code importing
+  `import preset from "@usetheo/ui/preset"` will break and must migrate to
+  `@import "@usetheo/ui/preset.css"` in an entry CSS. Blast radius: TheoKit
+  (already reverted away from 0.5.x by the time this fix shipped) plus any
+  community consumer that adopted 0.5.0-next.0 in the same day — likely zero.
+- The runtime indirection via `hsl(var(--*))` aliases keeps `<ThemeProvider>`
+  and every built-in theme (`violet-forge`, `dracula`, `vercel-mono`, etc.)
+  working with zero changes — the v4 utilities transparently follow the v3
+  cascade.
+
 ## [0.5.0-next.0] - 2026-05-22
 
 Minor bump — public API gains two subpath exports (`./vite-plugin` and

package/NOTICE

@@ -0,0 +1,38 @@
+@usetheo/ui
+Copyright 2026 usetheo.dev
+
+This product includes software developed at Vercel, Inc.
+(https://vercel.com).
+
+The `<ChatMessage>` composite's structural shell (Message, MessageContent,
+MessageActions, MessageAction, MessageBranch*, MessageResponse,
+MessageToolbar) was adapted from Vercel's `ai-elements` package, available
+at https://github.com/vercel/ai-elements, licensed under the Apache License,
+Version 2.0. The original code lives in `packages/elements/src/message.tsx`.
+
+The `UIMessage` + `UIMessagePart` type surface in `src/types/chat.ts` mirrors
+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
+same terms — see LICENSE.
+
+This product also bundles or peer-depends on the following third-party
+libraries, distributed under their own licenses:
+
+  - lucide-react           (ISC, https://lucide.dev/)
+  - class-variance-authority (Apache-2.0)
+  - clsx                   (MIT)
+  - cmdk                   (MIT)
+  - tailwind-merge         (MIT)
+  - tailwindcss-animate    (MIT)
+  - radix-ui/*             (MIT)
+  - zod                    (MIT)
+  - mdast-util-from-markdown / mdast-util-gfm / mdast-util-to-hast / hast-util-sanitize / hast-util-to-jsx-runtime / micromark-extension-gfm  (MIT, optional peer-deps)
+  - shiki                  (MIT, optional peer-dep)
+  - katex                  (MIT, optional peer-dep)
+  - mermaid                (MIT, optional peer-dep)
+  - roughjs                (MIT, optional peer-dep)
+  - perfect-freehand       (MIT, optional peer-dep)
+  - geist (font)           (SIL OFL 1.1, self-hosted)

package/README.md

@@ -13,8 +13,8 @@ A React component library built for AI agent surfaces and cloud dashboards. **10
 <!-- 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-517%20passing-success?style=flat-square)](#quality-gates)
-[![components](https://img.shields.io/badge/components-101-7C3AED?style=flat-square)](#component-catalog)
+[![tests](https://img.shields.io/badge/tests-1123%20passing-success?style=flat-square)](#quality-gates)
+[![components](https://img.shields.io/badge/components-120-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 -->
 
@@ -133,31 +133,31 @@ import { ThemeProvider, ThemeScript } from "@usetheo/ui";
 ## Component catalog
 
 <!-- BEGIN:component-catalog-intro -->
-**101 components**, organized by mechanical rule: a *primitive* imports no other `@usetheo/ui` component; a *composite* does.
+**120 components**, organized by mechanical rule: a *primitive* imports no other `@usetheo/ui` component; a *composite* does.
 <!-- END:component-catalog-intro -->
 
 <details>
 <summary>
 <!-- BEGIN:primitives-count -->
-**Primitives** (80) — building blocks
+**Primitives** (79) — building blocks
 <!-- END:primitives-count -->
 </summary>
 
 <!-- BEGIN:primitives -->
 `AgentErrorCard` · `AgentEvent` · `AgentHandoff` · `AgentProfile` · `AgentStartingState` · `AgentStreaming`
 `ArtifactPreview` · `AttachmentChip` · `AuditLogEntry` · `AutoCompactNotice` · `Avatar` · `Badge`
-`BrowserControls` · `BuildLogStream` · `Button` · `CapabilityIndicator` · `Card` · `ChatMessage`
-`ChatThread` · `Checkbox` · `ContextCard` · `ContextWindowBar` · `CostMeter` · `CreatedFilesCard`
-`CronJobCard` · `Dialog` · `DiffViewer` · `EmptyState` · `FolderContextCard` · `FolderSelector`
-`FormField` · `HookConfig` · `HookEventLog` · `Input` · `IntentSelector` · `Label`
-`LaneBoard` · `LoginSplit` · `MCPServerCard` · `MemoryEditor` · `MentionMenu` · `MetricsPanel`
-`ModelCard` · `ModelSelector` · `PermissionMatrix` · `ProgressChecklist` · `ProjectSwitcher` · `QuickActionChips`
-`RadioGroup` · `RecentFoldersList` · `RuleCard` · `RunStats` · `RunningTasksPanel` · `ScrollArea`
-`Select` · `SessionListItem` · `SessionTimeline` · `Sheet` · `Sidebar` · `Skeleton`
-`SkillCard` · `SocialAuthRow` · `StepsRail` · `SubAgentDispatch` · `Switch` · `SystemPromptEditor`
-`Tabs` · `TaskNode` · `TaskPlan` · `TerminalPanel` · `Textarea` · `Toast`
-`Toaster` · `TokenUsageChart` · `ToolCall` · `ToolCallCard` · `ToolResult` · `ToolsList`
-`Tooltip` · `TopNav`
+`BrowserControls` · `BuildLogStream` · `Button` · `CapabilityIndicator` · `Card` · `ChatThread`
+`Checkbox` · `ContextCard` · `ContextWindowBar` · `CostMeter` · `CreatedFilesCard` · `CronJobCard`
+`Dialog` · `DiffViewer` · `EmptyState` · `FolderContextCard` · `FolderSelector` · `FormField`
+`HookConfig` · `HookEventLog` · `Input` · `IntentSelector` · `Label` · `LaneBoard`
+`LoginSplit` · `MCPServerCard` · `MemoryEditor` · `MentionMenu` · `MetricsPanel` · `ModelCard`
+`ModelSelector` · `PermissionMatrix` · `ProgressChecklist` · `ProjectSwitcher` · `QuickActionChips` · `RadioGroup`
+`RecentFoldersList` · `RuleCard` · `RunStats` · `RunningTasksPanel` · `ScrollArea` · `Select`
+`SessionListItem` · `SessionTimeline` · `Sheet` · `Sidebar` · `Skeleton` · `SkillCard`
+`SocialAuthRow` · `StepsRail` · `SubAgentDispatch` · `Switch` · `SystemPromptEditor` · `Tabs`
+`TaskNode` · `TaskPlan` · `TerminalPanel` · `Textarea` · `Toast` · `Toaster`
+`TokenUsageChart` · `ToolCall` · `ToolCallCard` · `ToolResult` · `ToolsList` · `Tooltip`
+`TopNav`
 <!-- END:primitives -->
 
 </details>
@@ -165,12 +165,12 @@ import { ThemeProvider, ThemeScript } from "@usetheo/ui";
 <details>
 <summary>
 <!-- BEGIN:composites-count -->
-**Composites** (21) — assembled flows
+**Composites** (41) — assembled flows
 <!-- END:composites-count -->
 </summary>
 
 <!-- BEGIN:composites -->
-`AgentComposer` · `AgentEditor` · `AgentStream` · `AgentTimeline` · `ApprovalCard` · `ChatComposer` · `CommandPalette` · `CronJobsList` · `DeploymentRow` · `DomainConfig` · `EnvVarEditor` · `MCPServerList` · `PermissionModal` · `PreviewEnvCard` · `PreviewPanel` · `ProjectCard` · `RollbackUI` · `RuleEditor` · `SkillEditor` · `SkillsList` · `TaskHeader`
+`AgentComposer` · `AgentEditor` · `AgentStream` · `AgentTimeline` · `ApprovalCard` · `ChatComposer` · `ChatMessage` · `ChatMessageAction` · `ChatMessageActions` · `ChatMessageBranch` · `ChatMessageBranchContent` · `ChatMessageBranchNext` · `ChatMessageBranchPage` · `ChatMessageBranchPrevious` · `ChatMessageBranchSelector` · `ChatMessageContent` · `ChatMessageResponse` · `ChatMessageRoot` · `ChatMessageToolbar` · `CommandPalette` · `CronJobsList` · `DataPart` · `DeploymentRow` · `DomainConfig` · `EnvVarEditor` · `FilePart` · `MCPServerList` · `PermissionModal` · `PreviewEnvCard` · `PreviewPanel` · `ProjectCard` · `ReasoningPart` · `RollbackUI` · `RuleEditor` · `SkillEditor` · `SkillsList` · `SourceDocumentPart` · `SourceUrlPart` · `TaskHeader` · `TextPart` · `ToolCallPart`
 <!-- END:composites -->
 
 </details>