@preset.nz/ux-kit 0.1.0 → 0.1.2

package/README.md

@@ -15,44 +15,7 @@ Like [facets](https://github.com/preset-nz/facets), the kit ships unbuilt TypeSc
 
 ## Components
 
-Union of the `src/components/ui` folders in Strata, Oblique, Shard and Map & Territory (Fault has none). Where several apps had the same component, the richest variant was taken. All are exported from the package index.
-
-| Component | In kit | Came from | Notes |
-|---|---|---|---|
-| button | yes | Strata, Shard, M&T | Base UI Button |
-| checkbox | yes | Strata, Oblique, Shard | |
-| input | yes | all four | |
-| label | yes | Strata, Oblique, Shard | |
-| select | yes | Strata, Oblique, Shard | |
-| separator | yes | all four | |
-| dialog | yes | Oblique, Shard, M&T | Shard's themed variant. `render={<Button />}` replaces `asChild` |
-| sheet | yes | M&T | Base UI Dialog docked to an edge (`side`) |
-| popover | yes | Oblique | `PopoverAnchor` dropped: Base UI anchors through the Positioner's `anchor` prop |
-| tooltip | yes | Oblique, M&T | `TooltipProvider delay` replaces `delayDuration` |
-| tabs | yes | Oblique | `TabsTrigger` / `TabsContent` wrap Base UI `Tab` / `Panel`. Orientation uses `data-[orientation=...]` |
-| toggle | yes | Oblique | `data-pressed` replaces `data-[state=on]` |
-| toggle-group | yes | Oblique | Base UI `value` is always an array and `multiple` replaces `type="single" \| "multiple"` |
-| slider | yes | Oblique, Shard, M&T | Takes a number or an array; one thumb per value |
-| dropdown-menu | yes | Shard, M&T | M&T's fuller variant. `DropdownMenuLabel` is Base UI's `GroupLabel`, so it must sit inside a `DropdownMenuGroup` |
-| context-menu | yes | Shard | Same shape as dropdown-menu, same `Label` caveat |
-| navigation-menu | yes | M&T | Always the shared-viewport form. Radix's `NavigationMenuIndicator` and the `viewport={false}` mode are gone |
-| snackbar | yes | Strata, Oblique | The kit's one toast, on Base UI Toast. `useSnackbar().show({ message, kind, description, action, persistent, timeout })` returns an id and `dismiss(id?)` closes one or all; kinds are `plain`, `success`, `warning`, `error`. Mount `SnackbarProvider` once and a `SnackbarViewport` inside it. `notify(opts)` and `dismissNotification(id?)` do the same from outside React |
-| avatar | yes | M&T | Base UI Avatar |
-| badge | yes | M&T | Plain, `render` prop replaces `asChild` |
-| breadcrumb | yes | M&T | Plain `<a>`, no `next/link`. Use `render` for a router link |
-| card | yes | M&T | Plain |
-| skeleton | yes | M&T | Plain |
-| textarea | yes | M&T | Plain, restyled to match Input |
-| sidebar | yes | M&T | Plain, 700 lines. `asChild` became `render`. `useIsMobile` moved into the kit. Untested beyond the `collapsible="none"` form in the playground |
-| toolbar | yes | Oblique, M&T | Base UI Toolbar (roving focus). `ToolbarItems` takes `groups` of `ToolbarItemSpec` (id, label, icon, shortcut, enabled, disabledReason, pressed, menu) and `onCommand(id)`; Oblique's `ToolButtonSpec` table with M&T's disabled reason. Disabled items stay focusable so the tooltip can say why. `ToolbarButton`, `ToolbarGroup`, `ToolbarSeparator`, `ToolbarSpacer` compose by hand. Shard's header buttons are inline JSX and Fault's are not a toolbar, so neither contributed |
-| color-field | yes | M&T, Oblique, Strata | Swatch, hex text (commits on blur or Enter, bad input reverts), optional alpha (`#rrggbbaa`), preset grid in a Popover, native picker with `onPickStart`/`onPickEnd` for undo transactions (Oblique), `clearable` and null value (Strata, Oblique's optional colour), read-only, `trailing` slot for an eyedropper |
-| number-field | yes | Base UI, Oblique | Base UI NumberField with the label as the ScrubArea (drag it; click it to type). Shift is coarse (x10), Alt/Option fine (x0.1), as Oblique's InputNumber, and `integer` keeps Alt on whole steps (integerStepFix). `onValueChange(value, { reason })` is `scrub`, `step` or `typed` (typed commits on blur or Enter, never per keystroke; Escape reverts). `onScrubStart`/`onScrubEnd` bracket one drag as the undo transaction, `onScrubCancel` is Escape mid-drag. `VectorField` is N of them with X/Y/Z/W labels. Scrubbing only on the label: no gutter scrub |
-| color-swatch | yes | Strata, M&T, Oblique | Chip over a checkerboard; `null` is the dashed empty chip |
-| side-panel | yes | Strata, M&T | Docked panel, props only (`open`, `width` owned by the app). Collapsed it leaves an icon rail that reopens it; the inner edge resizes by pointer drag (pointer capture) or arrow keys, clamped by `clampWidth`. `SidePanelHeader`, `SidePanelContent`. Strata's `SidePanel` ideas; persistence stays app-side |
-| status-bar | yes | Oblique, Strata, M&T | `StatusBar`, `StatusItem` (optional label), `StatusSpacer`. Contents stay app-side |
-| empty-state | yes | new | Icon, title, description, action slot |
-
-M&T's `src/palettes/` (presets and derivation) was considered for the colour field and left out: it is map domain data and stays in the app, which passes its colours in through `presets`.
+Every component is exported from `src/index.ts`, which is the list. Each file's top comment says how it differs from shadcn and Radix. M&T's `src/palettes/` (presets and derivation) stays in the app, as map domain data; it passes its colours to the colour field through `presets`.
 
 ## Using it
 
@@ -77,15 +40,41 @@ Without the `@source` line the build passes and the components render unstyled,
 
 [facets](https://github.com/preset-nz/facets) 0.2 draws its number, slider and colour fields with the host app's components. An app on the kit re-exports them, for example `export { NumberField } from "@preset.nz/ux-kit"` in `src/components/ui/number-field.tsx`.
 
+## Chat
+
+`@preset.nz/ux-kit/chat` is a separate subpath, so apps without chat don't pull in streamdown. It is presentational: props in, callbacks out, no Tauri, no events, no model or fetch code. The host owns the messages and appends text deltas to the last one.
+
+```tsx
+import { ChatMarkdown, ChatMessage, ChatMessageContent, ChatScroller, ChatScrollerItem, PromptInput } from "@preset.nz/ux-kit/chat"
+```
+
+Add streamdown's classes to the app's CSS, next to the kit's `@source` line:
+
+```css
+@source "../node_modules/streamdown/dist/*.js";
+```
+
+| Export | Props worth knowing |
+|---|---|
+| `ChatScroller`, `ChatScrollerItem` | The scrolling list. It follows a streamed reply and stops following when the person scrolls up; a jump-to-latest button appears. `autoScroll`, `defaultScrollPosition`, `scrollButton`. Give an item `scrollAnchor` (on a user turn) to pin the view to it. Fills its parent, so give the parent a height. Built on `@shadcn/react/message-scroller` |
+| `ChatMessage`, `ChatMessageContent` | `from: "user" \| "assistant"`. A user turn is a right-hand bubble |
+| `ChatMarkdown` | Streamdown core: `children` is the text so far, `isAnimating` while it arrives. No code highlighting, diagrams or maths |
+| `ToolCall`, `ToolCallHeader`, `ToolCallContent`, `ToolCallInput`, `ToolCallOutput` | A collapsible row. Header takes `name` and `state: "running" \| "done" \| "refused"`; input and output show JSON or text; `errorText` replaces the output |
+| `Reasoning`, `ReasoningTrigger`, `ReasoningContent` | A folded "Thinking…" block. `isStreaming` opens it and folds it a second after it ends; `duration` is measured if not given; `open` / `defaultOpen` / `onOpenChange` for host control |
+| `Suggestions`, `Suggestion` | Starter prompts: `suggestion` text, `onClick(text)` |
+| `PromptInput` | `onSubmit(text)`, `onStop`, `status: "idle" \| "streaming" \| "stopped" \| "error"` (send becomes stop while streaming), `value` / `onValueChange` (optional, so a suggestion can fill it), `tools` (the toolbar slot, for example a `ToggleGroup`), `disabled`, `placeholder`. Enter sends, Shift+Enter breaks the line |
+| `ChatRole`, `ToolCallState`, `ChatStatus` | The small types the above share |
+
+The components are adapted from Vercel AI Elements (Apache-2.0) and shadcn/ui's MessageScroller (MIT). See `THIRD_PARTY_NOTICES.md`.
+
 ## Working on it
 
 ```sh
-just install   # pnpm install
+just install   # pnpm install, and the playground's crates
 just dev       # the playground as a desktop app
-just check     # typecheck and lint the kit
-just check-all # the kit, the playground and cargo check
+just check     # the kit, the playground and cargo check
 ```
 
-The playground links the sibling packages (rhizome, app-kit, preferences, facets, math), so `just dev` and `just check-all` need them checked out next to this repo. `just check` needs only this repo.
+Run them in `ux-kit/` of [preset-nz/packages](https://github.com/preset-nz/packages). The playground links the other packages in that repo (rhizome, app-kit, preferences, facets, math), so a change to one of them that breaks it fails `just check`.
 
 MIT.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,253 @@
+# Third-party notices
+
+`@preset.nz/ux-kit` is MIT (see `LICENSE`). The files under `src/chat/` are adapted from the projects below. Each adapted file keeps its original copyright and licence notice at the top, followed by a line saying what preset.nz changed. The dependencies the chat subpath installs (`streamdown` Apache-2.0, `@shadcn/react` MIT) are used unmodified and keep their own licences.
+
+## Vercel AI Elements
+
+- URL: https://github.com/vercel/ai-elements (registry: https://elements.ai-sdk.dev)
+- Licence: Apache License 2.0
+- Copyright 2023 Vercel, Inc.
+- Derived files in ux-kit: `src/chat/message.tsx` (Message, response part), `src/chat/tool.tsx` (Tool), `src/chat/reasoning.tsx` (Reasoning, Shimmer), `src/chat/suggestion.tsx` (Suggestion), `src/chat/prompt-input.tsx` (Prompt Input, trimmed)
+- Changes: our own types in place of the `ai` package's, Base UI in place of Radix, Phosphor in place of lucide, a CSS shimmer in place of `motion`, no attachments, model select, command menu or message branching, and ux-kit's tokens. Each file's header says which of these apply to it.
+
+## shadcn/ui
+
+- URL: https://github.com/shadcn-ui/ui (MessageScroller, https://ui.shadcn.com/docs/changelog/2026-06-chat-components)
+- Licence: MIT
+- Copyright (c) 2023 shadcn
+- Derived files in ux-kit: `src/chat/scroller.tsx`. The `shimmer` utility in `src/shadcn-tailwind.css` is shadcn's too, vendored with that file.
+- Changes: one `ChatScroller` that assembles the Provider, Root, Viewport, Content and jump button from `@shadcn/react/message-scroller`; Phosphor icon; ux-kit Button.
+
+### MIT License (shadcn)
+
+MIT License
+
+Copyright (c) 2023 shadcn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+### Apache License 2.0 (Vercel)
+
+Copyright 2023 Vercel, Inc.
+
+```
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+```

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@preset.nz/ux-kit",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "One look and one way of working for the preset.nz desktop apps: tokens, palettes, fonts and Base UI primitives.",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/preset-nz/ux-kit.git"
+    "url": "git+https://github.com/preset-nz/packages.git",
+    "directory": "ux-kit"
   },
   "type": "module",
   "sideEffects": [
@@ -13,11 +14,13 @@
   ],
   "exports": {
     ".": "./src/index.ts",
+    "./chat": "./src/chat/index.ts",
     "./graphics": "./src/graphics/index.ts",
     "./index.css": "./src/index.css"
   },
   "files": [
-    "src"
+    "src",
+    "THIRD_PARTY_NOTICES.md"
   ],
   "peerDependencies": {
     "react": "^19",
@@ -28,25 +31,22 @@
     "@fontsource-variable/geist": "^5.2.9",
     "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "@phosphor-icons/react": "^2.1.10",
-    "@preset.nz/math": "^0.1.0",
+    "@shadcn/react": "^0.3.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "shadcn": "^4.11.0",
+    "streamdown": "^2.7.0",
     "tailwind-merge": "^3.6.0",
-    "tw-animate-css": "^1.4.0"
+    "tw-animate-css": "^1.4.0",
+    "@preset.nz/math": "^0.1.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.4",
+    "@biomejs/biome": "^2.5.15",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "eslint": "^9.39.4",
-    "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.3",
-    "globals": "^16.5.0",
+    "lefthook": "^2.1.17",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.61.1"
+    "typescript": "~7.0.2"
   },
   "publishConfig": {
     "access": "public"

package/src/chat/index.ts

@@ -0,0 +1,9 @@
+// The chat subpath: @preset.nz/ux-kit/chat. Presentational only, props in and
+// callbacks out. Kept off the main index so apps without chat don't pull in streamdown.
+export * from "./message"
+export * from "./prompt-input"
+export * from "./reasoning"
+export * from "./scroller"
+export * from "./suggestion"
+export * from "./tool"
+export * from "./types"

package/src/chat/message.tsx

@@ -0,0 +1,80 @@
+/**
+ * Copyright 2023 Vercel, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Adapted from Vercel AI Elements (https://github.com/vercel/ai-elements), message.tsx.
+ * Modified by preset.nz, 2026-10-14: own types instead of the `ai` package, no branching or actions, markdown through streamdown core only, ux-kit tokens.
+ */
+import type { ComponentProps, HTMLAttributes } from "react"
+import { memo } from "react"
+import { Streamdown } from "streamdown"
+
+import { cn } from "../lib/utils"
+import type { ChatRole } from "./types"
+
+export type ChatMessageProps = HTMLAttributes<HTMLDivElement> & {
+  from: ChatRole
+}
+
+/** One turn. A user turn sits right in a bubble; an assistant turn runs the full width. */
+export function ChatMessage({ className, from, ...props }: ChatMessageProps) {
+  return (
+    <div
+      data-slot="chat-message"
+      data-from={from}
+      className={cn(
+        // Selectable: a reply is something you copy (ux-kit turns selection off app-wide).
+        "group flex w-full max-w-[95%] flex-col gap-2 select-text",
+        from === "user" ? "is-user ml-auto justify-end" : "is-assistant",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export type ChatMessageContentProps = HTMLAttributes<HTMLDivElement>
+
+export function ChatMessageContent({ className, ...props }: ChatMessageContentProps) {
+  return (
+    <div
+      data-slot="chat-message-content"
+      className={cn(
+        "flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-xs text-foreground",
+        "group-[.is-user]:ml-auto group-[.is-user]:rounded-md group-[.is-user]:bg-secondary group-[.is-user]:px-3 group-[.is-user]:py-2",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export type ChatMarkdownProps = ComponentProps<typeof Streamdown>
+
+/**
+ * Markdown that tolerates half-written input, for streamed text. Pass
+ * `isAnimating` while the text is still arriving. Streamdown core only: code
+ * blocks are plain, with no highlighting, diagrams or maths.
+ */
+export const ChatMarkdown = memo(
+  function ChatMarkdown({ className, ...props }: ChatMarkdownProps) {
+    return (
+      <Streamdown
+        className={cn("size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", className)}
+        {...props}
+      />
+    )
+  },
+  (prev, next) => prev.children === next.children && next.isAnimating === prev.isAnimating,
+)

package/src/chat/prompt-input.tsx

@@ -0,0 +1,121 @@
+/**
+ * Copyright 2023 Vercel, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Adapted from Vercel AI Elements (https://github.com/vercel/ai-elements), prompt-input.tsx.
+ * Modified by preset.nz, 2026-10-14: trimmed to a textarea, a toolbar slot and a submit or stop button (no attachments, model select, command menu or provider); own types instead of the `ai` package, ux-kit Textarea and Button, Phosphor icons.
+ */
+import { ArrowUpIcon, StopIcon } from "@phosphor-icons/react"
+import type { ComponentProps, FormEvent, KeyboardEvent, ReactNode } from "react"
+import { useState } from "react"
+
+import { Button } from "../components/button"
+import { Textarea } from "../components/textarea"
+import { cn } from "../lib/utils"
+import type { ChatStatus } from "./types"
+
+export type PromptInputProps = Omit<ComponentProps<"form">, "onSubmit"> & {
+  /** Called with the trimmed text when the person presses Enter or the send button. */
+  onSubmit: (text: string) => void
+  /** Called by the stop button, which replaces send while `status` is "streaming". */
+  onStop?: () => void
+  status?: ChatStatus
+  /** The text, if the host holds it (so a suggestion can fill it). Uncontrolled when left out. */
+  value?: string
+  onValueChange?: (value: string) => void
+  placeholder?: string
+  /** The toolbar slot, left of the send button: mode toggles, model name, and the like. */
+  tools?: ReactNode
+  /** Disables typing and sending. The stop button still works. */
+  disabled?: boolean
+}
+
+/**
+ * A message box: Enter sends, Shift+Enter breaks the line (and an IME
+ * composition is left alone). While streaming, the send button becomes stop.
+ */
+export function PromptInput({
+  onSubmit,
+  onStop,
+  status = "idle",
+  value,
+  onValueChange,
+  placeholder = "Ask for a pattern or a change…",
+  tools,
+  disabled = false,
+  className,
+  ...props
+}: PromptInputProps) {
+  const [inner, setInner] = useState("")
+  const text = value ?? inner
+  const setText = (next: string) => {
+    setInner(next)
+    onValueChange?.(next)
+  }
+  const streaming = status === "streaming"
+  const canSend = !disabled && !streaming && text.trim().length > 0
+
+  const send = () => {
+    if (!canSend) return
+    onSubmit(text.trim())
+    setText("")
+  }
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault()
+    if (streaming) onStop?.()
+    else send()
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key !== "Enter" || event.shiftKey) return
+    if (event.nativeEvent.isComposing) return
+    event.preventDefault()
+    send()
+  }
+
+  return (
+    <form
+      data-slot="prompt-input"
+      onSubmit={handleSubmit}
+      className={cn(
+        "flex w-full flex-col gap-1 rounded-md border border-input bg-background p-1.5 focus-within:border-ring focus-within:ring-1 focus-within:ring-ring/50 dark:bg-input/30",
+        className,
+      )}
+      {...props}
+    >
+      <Textarea
+        name="message"
+        rows={1}
+        value={text}
+        disabled={disabled}
+        placeholder={placeholder}
+        onChange={(event) => setText(event.currentTarget.value)}
+        onKeyDown={handleKeyDown}
+        className="field-sizing-content max-h-40 min-h-9 resize-none border-0 bg-transparent px-1 py-1 focus-visible:ring-0 dark:bg-transparent"
+      />
+      <div className="flex items-center justify-between gap-1">
+        <div className="flex min-w-0 items-center gap-1">{tools}</div>
+        <Button
+          type="submit"
+          size="icon-sm"
+          aria-label={streaming ? "Stop" : "Send"}
+          disabled={streaming ? !onStop : !canSend}
+        >
+          {streaming ? <StopIcon weight="fill" /> : <ArrowUpIcon />}
+        </Button>
+      </div>
+    </form>
+  )
+}