Release log

Twelve new components cover what a real app screen needs. Heading, Text, Link and List open a typography category. DescriptionList, ErrorSummary, CurrencyInput and MaskedInput handle data and forms, with `fieldErrorsFrom` turning a server's errors into the summary and a per-field `errorText`. DateRangePicker and Deadline handle dates, and SignaturePad and DocumentViewer handle documents.

`rift-ds/format` is a new subpath of pure helpers: money as decimal strings, added without floating-point drift, and relative and time-zone dates. Input gains `prefix`, `suffix`, `clearable`, `errorText` and `action`; Field gains `errorText`; Widget gains `description`, `footer`, `padding` and `collapsible`; and an attachment with a `fileUrl` now shows a PDF or a text file in place in the file viewer.

ShaderScene paints a horizon or a rift in the theme's ambient colours, with a scrim, a vignette, fades and grain, and a pale tint on a light page. It reports its status the way ShaderField does and pauses off screen. Nothing published was renamed or removed, so upgrading needs no code changes.

Every app shell now draws from one recipe in one of three modes: `flush`, edge to edge behind a hairline; `floating`, the rail raised as a card; and `inset`, the rail flush beside a raised content surface. AppLayout, AppSidebar, the `app-shell` block and ChatWidget all read it, so their gap, edge and background agree. The edge belongs to the mode: floating and inset are raised, and flush never is.

ChatWidget takes `layout` to sit as a page in any of the three modes, and `backdrop` (`solid` or `blur`) for what the flush layout lies on. When there is not room for a raised mode, it falls back to flush on the solid backdrop. Its `fit` widgets now hang under a centred composer. The rails share one geometry: the collapse toggle has a tooltip and hover pill, ThemePicker's swatch has a tooltip, and group headings are in mixed case.

The passive hover and active washes are a step lighter in both colour modes. The Aubergine preset is now Signal: safety-orange buttons with navy labels, navy headlines on a cool blue-grey page, the logo on the orange and blue-led chart series. Its id is still `plum`, so `data-brand="plum"` and its stylesheet path are unchanged. Nothing published was renamed or removed, so upgrading needs no code changes.

A chat can now propose a change and wait for the reader to confirm it. `rift-ds/chat/actions`, a new subpath with no dependencies, holds `defineAction`, `planAction` and the confirmation mark a page and its route share. ActionCard is the proposal, with Confirm and Dismiss, then the record of what happened, with Undo; given `facts`, it lists what the change will do over Confirm and keeps them once confirmed. ActionReadout is what a confirmed change did. A card sent with `lead` opens the reply under a status line that keeps running, so the thinking never moves it.

A chat can also follow what the reader is looking at: ChatWidget's `context` object, `useSelectionFocus`, `useHeldHighlight` and `describeSelection` for a highlight and what it sits in, `getContext` on ChatProvider, and starters a model writes for the focus with `createStartersHandler` and `useGeneratedStarters`. Every card a reply carries now reads one recipe, with the new `--color-chat-card-bg` fill.

EntitySwitcher is new, for the company, team or account a screen is scoped to, and so is the Aubergine preset. Two defaults moved: ChatWidget's `contextPlacement` is now `inside` (it was `above`), and a docked panel takes the overlay once the page loses the room the dock needs. `contextLabel` and `contextNote` are deprecated in favour of `context`. Nothing published was renamed or removed.

A chat reply can now carry several cards, or be a card with no text. `useChatAgentState` from `rift-ds/chat` reports what the agent is doing to an entry button, and ChatLauncher keeps a reply's progress on show after the panel closes. ChatWidget takes `contextPlacement` to put its context note above the composer or inside it.

The composer now sizes itself to what it holds. A ChatWidget with nothing for the footer renders the one-row `inline="chat"` composer. Four defaults moved: `maxRows` is 12 in a chat composer (it was 8) and 3 in the mini composer (it was 1), and `size="compact"` now changes only the mini composer.

The script from `colorModeScript()` now puts the visitor's colour mode back when a hydration failure at the root makes React rebuild `<html>` and drop its attributes. Nothing published was renamed or removed, so upgrading needs no code changes.

Search on a large DataTable no longer holds up typing. The field takes each key at once and the rows follow a moment later, under a thin progress line. Each row's text is read once per `rows` array, so an app that changes a row's values in place should pass a new array when its rows change. An inline `columns` array no longer costs a scan on every render, and selecting many rows no longer slows down with the square of the row count.

When a TableToolbar AI command changes the view, the table now draws skeleton rows, then the new rows, then the toast. `MOTION_TABLE_COMMAND_SKELETON_MS` in `rift-ds/tokens/motion` sets how long the skeleton rows stay. Nothing published was renamed or removed, so upgrading needs no code changes.

Ten form controls now reach an enclosing form under `name`: Checkbox, RadioButton, RadioGroup, ToggleSwitch, PinInput, Dropdown, RichDropdown, TagInput, TimePicker and SelectionCard. A form using them will start receiving values it used to leave out, so check anything that rejects unknown fields. They submit through hidden inputs, which browsers leave out of validation, so `required` does not block a native submit on them; validate these fields in your app or on your server.

Every component now has a JSON schema at `/schema/components/<slug>.json`, generated from its props interface. `rift-ds/tokens/values` gives every token's value in every theme and mode, and the same values are published as DTCG files.

SegmentedControl takes `cycle`, one circle that steps through the segments. AppSidebar takes `collapsedFooterSlot`, and a click on the collapsed rail's empty space expands it. A tab's `panelId` writes its `aria-controls`, an inline Composer can grow, and `--color-icon-bg` and `--color-label-bg` are new. Light surfaces take a softer tint, and Forest and Volt are retuned.

TableToolbar folds whenever search and Filter no longer fit, long labels end in an ellipsis instead of being cut, and rows in several components wrap on a phone. Nothing published was renamed or removed, so upgrading needs no code changes.

Status colours read more clearly in light mode: Badge, Alert, Banner, Toast and the other status surfaces use a stronger fill and more colourful text, and the neutral role moves to a lighter fill so it no longer outweighs the coloured ones. The outlined neutral button takes a lighter edge in both modes, matching a SegmentedControl beside it.

TableToolbar's icon buttons are now outlined neutral instead of filled grey, and AttachmentViewer and BentoTile use the same outline. The Smoke theme charts in colour from the same muted ramps as its badges, while its accents and background stay grey.

A selected SegmentedControl icon's tooltip no longer turns nearly invisible, and the Zest theme's positive text holds AA on the stronger fill. Nothing published was renamed or removed, so upgrading needs no code changes.

TableToolbar takes `command`: a Describe button at the start of the bar turns the whole row into a composer, the way selecting rows turns it into the bulk bar. Your handler turns the sentence into a table view, and the library calls no model. A change lands in a toast with an Undo for 10 seconds, and an error lands in a toast that stays, with the table left alone and the text back in the composer.

Composer takes `inline` and `size`: `size` is the default and compact density a table uses, and `inline` puts everything on one row at that density's control height. Toast takes `action` in the stack as well as standalone, and `useOptionalToast` lets a component join the host's stack or bring its own.

Bar, stacked bar and combo charts now draw bars as a wash of their series colour. TableToolbar moves Group and Columns into More under 480px, AppSidebar shows counts on the collapsed rail, and tooltips always paint in the top layer. Nothing published was renamed or removed, so upgrading needs no code changes.

Stat takes `deltaPlacement="auto"`: the delta sits beside the value while the stat has room and drops under the label once it is narrow, such as two KPI tiles side by side on a phone. It reads its own width with a container query, so it restacks wherever it sits.

ChatWidget's history rail takes a footer through `threadsProps.footerSlot`, for controls or a link out, shown in both seats and faded out while the inline rail is collapsed.

AppSidebar's panel mode now opens and closes with the logo, every icon and the avatar holding their place, and its inset layout draws a divider between the rail and the side panel. The app shell block's top bar stays in view over a blur, and the dashboard block's stats restack on a phone. Nothing published was renamed or removed.

AppLayout and AppSidebar take a `layout` prop: `flush`, `floating` or `inset`. Inset runs the rail flush on a shell colour and sets the content full width in a surface inset from the other edges, which scrolls inside itself, with a side panel joining the rail. Two colour roles name the planes, `--color-bg-app-shell` and `--color-bg-app-surface`. AppSidebar's boolean `floating` is deprecated in favour of `layout="floating"` and keeps working.

ChatLauncher takes `surface="inset"`: docked beside an inset layout, the panel goes flat on the surface colour at the same gap and its widen grip follows, and as an overlay it takes the gap but keeps its shadow.

Icon-only SegmentedControl strips now show their labels as tooltips on hover and keyboard focus, and the label stays each segment's name. ThemeToggle defaults to `size="default"`, and TableToolbar starts the table on its active view, offers "is none of" for enum filters and keeps a narrow bulk bar from overlapping. Nothing published was renamed or removed.

`SiteHeader` is the sticky top bar the docs site runs on: section pills that open mega menus, a blur that dissolves into the page as it scrolls, and a fold to a drawer when the pills no longer fit. Its parts ship on their own too: `MegaMenu`, a wide panel of icon rows beside an optional featured card, and `ProgressiveBlur`, a backdrop blur that fades out along one edge.

Drawer takes a `heading` that puts content such as your logo where the title text shows, while `title` stays as the dialog's hidden accessible name. `Nav` is deprecated in favour of `SiteHeader` and keeps working.

In a QuestionCard set, picking an option now only marks it and Next moves on, so a slip can be changed before the step passes. A radio is always a circle and a checkbox a rounded square whatever the theme's radii, and their unchecked ring takes a new `--color-input-indicator-border` that clears 3:1 in both themes. Nothing published was renamed or removed.

Every number and date a component prints is now written in a locale you choose. Wrap your app in `LocaleProvider` (`rift-ds/behaviors/LocaleProvider`) and the charts, tables, calendars, pickers, counters and percentages take your locale's digits, decimal and percent marks, month and weekday names, first day of the week and clock; a component's own `locale` prop wins. It formats and never translates: words stay props.

`useShortcut` (`rift-ds/behaviors/shortcuts`) binds keys with a short string, `mod+k` for Cmd+K on a Mac and Ctrl+K elsewhere, through the one listener the components use, so a shortcut stays quiet in a text field and never takes Escape from an open overlay. `useRegisteredShortcuts` lists the live bindings for a help dialog, and Kbd, the command palette and the menus take `keys` to draw a shortcut for the reader's platform.

Set `dir="rtl"` on `<html>` and every component lays itself out right to left: sides and insets, slides and toggles, arrow keys and drags, mirrored icons, and menus that line up with their trigger's leading edge. Drawer, the popups and table columns take `start` and `end` beside `left` and `right`.

Themes can colour the logo, display type, headings and running text apart from the action colour, and Marquee joins as the twelfth theme. Nothing published was renamed or removed. Numbers and dates now default to `en-US` rather than the browser's locale, chart value axes group long numbers, and the command palette trigger draws Ctrl K off a Mac.

DataTable is rebuilt on a headless engine, TanStack Table. A column's `type` (text, status, person, currency, number, progress, date, tags, checkbox, link) draws, aligns, sorts and filters it with no render function. The table sorts by several columns, resizes, moves, pins and hides them, filters from each header, edits cells or whole rows in place, groups rows with totals, opens row details and saves its setup as views. Past 200 unpaged rows it draws only the rows in view, and `manual` hands sorting, filtering and paging to your server, with loading and failed-load states built in.

`TableToolbar` is the control bar over a table: search, filters as chips, sort, group, columns, density, saved views, a bulk bar for selected rows and the page's primary action. In a DataTable's `toolbar` slot it needs no props, and on a phone it folds to icons with its panels opening as sheets.

For starting an app, `rift-ds/tokens/base.css` is the reset and page the components are tuned against, `ThemeToggle` with `colorModeScript` sets the colour mode before first paint, `npx rift-ds init app` wires a Next.js app, and `npx rift-ds init block <name>` copies in a whole starting page. `ThemePicker` and `CommandPaletteTrigger` join the library, AiButton shows what an agent is doing through `state`, and every menu, list and popover is placed so a clipping container cannot cut it off.

Nothing published was renamed or removed. Initials avatars now take a colour fill picked from the name (pass `fill="neutral"` for the grey), a table narrower than a phone shows "Page X of Y", and `@tanstack/react-table` and `@tanstack/react-virtual` install with the package.

Every checkbox, radio, switch and chosen mark in the library is now the same one. Checkbox, RadioButton and ToggleSwitch export their indicators (`CheckboxIndicator`, `RadioIndicator`, `SwitchIndicator`) as small presentational pieces, and SelectionCard, QuestionCard, InspectorToggleSwitch and FilterBar compose them instead of drawing their own. Add the `ds-control-host` class to a host that is itself the control and its indicator lights on hover exactly as the standalone control does.

`ChosenMark`, exported beside Dropdown, is the one trailing check a listbox or menu row shows on its selected item, drawn by Dropdown, Combobox, RichDropdown, TimePicker, ModelPicker, DropdownMenu and ContextMenu. `CheckIcon` and `MinusIcon` are the one SVG check and minus every control draws, the switch thumb included, and `rift-ds/behaviors/visually-hidden.css` carries the one `ds-visually-hidden` class for text that is read but not seen.

The surfaces follow one rule per family: a choice offered as a row (SelectionCard, QuestionCard) wears Input's surface, a card that holds content takes the container surface, a row inside an overlay sits at the inner radius step, and the current item of a navigation list holds the passive active token. Dialog, Drawer and CommandPalette close through CircularButton, and ModelPicker's effort row is a SegmentedControl. Nothing was renamed or removed, so upgrading needs no code changes.

Links in a routed app now navigate without reloading the page. Wrap your app in `LinkProvider`, published as `rift-ds/behaviors/LinkProvider`, with Next.js's `Link` or your router's, and every client-rendered component below it renders its links through the router, the chat's answer links included.

Every component that takes an `href`, its own or an item's, also takes a `linkComponent` prop that wins over the provider; NavList, SourceTrail and AppLayout pass it on to the parts they render. Breadcrumb, CircularButton, LinkList, ThreadPanel and WidgetRow can render in a Server Component, where no provider reaches them, so pass the prop on the instance there.

The Smoke theme carries more colour, so its status colours no longer read as grey. Nothing was renamed or removed, and with neither the provider nor the prop set every link stays a plain `<a>`, so upgrading needs no code changes.

Every component now forwards its ref to its element and passes your own attributes through, and state you can own works controlled or uncontrolled through one pair of names: `value`, `defaultValue` and `onValueChange`, and the same shape for `checked`, `values` and `open`. Textarea and Slider gain `defaultValue`, and NotificationCenter, AgentRail and ChatAgentPane move to `value`.

Every word a component writes, announced or on screen, now has a prop with its English default, so a product in another language can translate all of it; the chat widget passes the words through per part, and the chat guide shows a full set. Colour moves to `tone` on Button and the actions around it, backed by a destructive token family at AA, and BentoTile and BentoTileArt join the library.

A few behaviours shift on their own. Popovers, menus, pickers and tooltips now close through the same stack as the modals, so inside a Dialog the first Escape closes the menu and the second the Dialog. The native `aria-label` beats the deprecated `ariaLabel`, Combobox submits its selection rather than the search text, and every chart is a client component, so importing one into a Server Component works. Nothing was renamed or removed: the older names keep working, so upgrading needs no code changes.

The chat can now ask. When a reply needs a decision before it can go on, it ends in a question with the answers to pick: one answer, several, or a short set asked a step at a time, with a "Something else" field when the list may not cover it. The answer is sent as the next message, and the card stays in the conversation as the record of the choice. On the server, `askUser` on createChatHandler gives the model the tool it asks through, and `npx rift-ds init chat` now writes it on.

QuestionCard is a library component of its own, for use outside the chat, with QuestionSummary as the record of a set. PromptSuggestions gains `value`, which keeps a used row as the record of the choice, and ChatThread and ChatWidget gain `flow`, where `bottom-up` is the classic message thread beside the send-to-top default. The breakpoints are published as `rift-ds/tokens/breakpoints`, and every stacking layer is a `--layer-*` token.

A few behaviours shift without any change on your side. A follow-up chip once sent stays as the record and no longer takes a tap, a reply that asks gets no follow-up chips, and the `rift-ds/chat/demo` story now asks its questions instead of carrying buttons in its cards. Nothing was renamed or removed, so upgrading needs no code changes.

The chat can now open what it makes in a panel beside the conversation. Set `artifacts` on ChatWidget and a reply can carry a dashboard, a page or a file: the thread shows a tile, and the tile or a header button opens it. On a narrow chat it rises as a sheet. The panel can be dragged wider or expanded to fill the chat, and a page drawn in it runs in a sandboxed frame with its source one switch away.

An artifact travels as an ordinary card, so a server that already sends cards can send one. ArtifactPanel and ArtifactCard are library components of their own, for use outside the chat, and `rift-ds/chat/demo` adds a dashboard and a web page to its scripted conversation.

Two layouts shift without any change on your side. The agent panel now sits beside the conversation from 760px of chat width, where it waited for 860px, and gains a close button and a solid background. ThreadPanel keeps one inset whether collapsed or expanded, so its marks no longer move when it opens, and its expanded content sits 8px closer to each edge. Nothing was renamed or removed, so upgrading needs no code changes.

The chat is now one thing you install. `rift-ds/chat` holds the whole assembly: ChatProvider keeps the conversation, ChatWidget is the panel, and ChatLauncher is the floating button that opens it. Replies stream, follow-up questions and thumbs come built in, and the conversation survives moving between pages. The engine under it is exported too, for a chat with your own UI.

The launcher's header menu docks the panel to the right or left edge, or floats it as a card the visitor moves and sizes. The server side ships beside it: the streaming handler for Claude in `rift-ds/chat/server`, optional rate limits and a daily budget over Upstash in `rift-ds/chat/upstash`, and a scripted conversation in `rift-ds/chat/demo` that runs with no model or key.

`npx rift-ds init chat` scaffolds all of it into a Next.js app: the routes, the mount and an env example, starting in demo mode and never overwriting a file. Six ambient tokens now colour the ShaderField background, and most theme presets key the AI gradient to their own action colour. Everything is additive, and the chat's dependencies are optional peers, so upgrading needs no code changes.

A chat input can now reference people, files and skills. Mention is the inline tag, MentionMenu the list a trigger opens, and MentionText draws a sent message with its mentions as tags. Composer takes a mentions prop: typing @ or / at the start of a word opens the menu, and the value stays a plain string throughout.

Threads say what state they are in. ThreadPanel rows and ThreadTabs tabs carry a status (idle, working, unread, waiting or error), drawn by StatusDot, which gains an 8px size for list rows, a hollow outline for a settled state, and a decorative mode so a list of dots is not a list of announcements. The old unread flag still works and is deprecated.

`npx rift-ds init` now installs three agent skills instead of one: the library skill, with a new reference of every token and its light and dark value, a skill for restyling existing screens onto the system, and one for auditing styles against the tokens. The command reads the list from the site, so later skills arrive without a package update. Add --skill to install one, and use --dir in place of --out, which still works. Everything is additive, so upgrading needs no code changes.

Anything with a name can now have a mark. PixelAvatar draws a small pixel character from a name, the same character and colour every time, so a project or workspace needs nothing designed or stored. AppSidebar rows can use it in place of an icon, and ThreadPanel projects wear it by default instead of a folder. In a list, the colours are spread so neighbours never match.

Widget is a new titled tile for dashboards and home screens, with rows, labelled groups, and a grid that packs tiles of different heights into columns. PromptSuggestions gains two layouts for an empty-state home screen: tiles, an icon over a label and a line of description, and cards, with the icon in a tinted cover.

SourceChip gains hover and pressed states and can preview its source in a floating panel. Everything is additive, so upgrading needs no code changes; pass a folder icon to a ThreadPanel project to keep its old look.

Menu items can now show a current choice. Give the items of a DropdownMenu or ContextMenu a selected value and they become a set of radio items: the chosen one holds a quiet fill, full-strength text and icon, and a trailing check. Plain action items are unchanged.

Three theme presets take new typeface pairings: Bubblegum sets Fredoka over Nunito, Velvet sets Playfair Display over Plus Jakarta Sans, and Volt sets Space Grotesk over Manrope, with the faces shipped in the package. Tinted themes are brighter in light mode, where the two lightest surfaces carry half the tint they did. The Fraunces and Work Sans font files leave the package, since no preset uses them. Nothing else is removed, so upgrading needs no code changes.

Four new components for files in a conversation. AttachmentTile draws one file as a square: a picture fills it, a PDF, spreadsheet, document or presentation wears a coloured mark, and every other file wears its extension as a neutral badge. AttachmentGroup lays out the files on a sent message, AttachmentViewer opens them in a preview dialog, and AttachmentDropZone lets a file be dropped anywhere on a chat. A headless hook, useAttachments, owns the list of files and their previews.

Composer now takes files: an attach button, paste and drop feed a row of tiles above the input, and a message can be files alone. ChatMessage shows a turn's files above its bubble. Four new file-format colour tokens keep the colour each format is known by in every theme. DocumentChip is deprecated in favour of the tile and keeps working. Nothing breaks, so upgrading needs no code changes.

InspectorColorPicker joins the Inspector family: the library colour picker dressed as one bar, with its name on the left and the colour on the right. A new motion token, the orbit duration, paces Globe's spin, so a theme's motion scale now reaches it, and Composer can place its context note above the input with contextPlacement="above".

The action colour is now kept for actions. Spinner, FileInput, Sparkline, the bar charts, Timeline's links, Instructions and DatePicker's today ring each use the role that fits instead, and a build check stops new decorative uses. Every action fill also holds contrast with its label and icon in every state, which repairs the Volt preset, and Treemap labels pick a readable colour for each cell. Nothing breaks, so upgrading needs no code changes.

Six one-row controls for tool panels and settings rails: InspectorSlider, InspectorInput, InspectorToggleSwitch, InspectorSegmentedControl, InspectorDropdown, and InspectorSection to group them. Each is one bar with its name inside, sized and shaped like Button, so a dense panel of settings stays light. They sit beside the form controls rather than replacing them.

SegmentedControl's track corner now counts its hairline, so on a theme with squarer pills it stays parallel with the sliding pill. Nothing breaks, so upgrading needs no code changes.

Three new navigation components. BottomNav is the tab bar of a mobile app, drawn in the Rift style, as the iOS Liquid Glass capsule, or as the Material 3 Expressive bar. TopAppBar is the header of a mobile screen, with a title that collapses as the page scrolls. SidebarPanel lists one section's pages, on its own or beside AppSidebar as a third navigation level.

Screen readers get more to work with: charts are named by their title, Nav names its landmark and accepts native props, and Stepper announces its steps. Nothing breaks, so upgrading needs no code changes.

No code changed. 1.0.0 shipped with the README's banner image as a relative path, which npm cannot resolve against the repository, so the package page opened with a broken image. This release carries an absolute one.

The banner is now generated from the repository URL rather than typed by hand, alongside the npm badge that already worked that way, so it cannot drift again.

Rift DS is on npm. `npm install rift-ds` gets you 133 React components built on 255 semantic design tokens, with light and dark modes in the box and React as the only required peer dependency.

Theming is plain CSS custom properties. There is no provider to mount and no config file to write: every semantic token chains to a primitive, so overriding a handful of primitives restyles everything built on them, the charts and the ambient background included. Eleven complete themes ship as generated stylesheets, and setting one `data-brand` attribute on the root element applies a whole look, self-hosted typefaces and all, with no runtime JavaScript.

The Recharts-backed charts live behind their own entry point, so `recharts` stays an optional peer dependency you install only if you use them.

Coding agents are treated as first-class consumers. `npx rift-ds init` installs an agent skill into your project and prints the MCP connect line, and the public MCP endpoint serves the component catalogue, the prop contracts and the token registry with no key and no account. All of it is generated from the same JSDoc that builds the shipped type declarations, so an agent reads the exact contract the package ships.

Prefer owning the source? Every component is also installable through the shadcn CLI, or you can clone the repo. All three paths are MIT.

If you were using the earlier scoped package, this is the same system under its own name. Change your import specifier to `rift-ds` and nothing else moves.