@openwarelabs/ui 0.15.0 → 0.16.1

package/README.md

@@ -54,24 +54,24 @@ import { Button, Field, Input, Toaster, toast } from "@openwarelabs/ui";
 
 ## Components
 
-106 components, each with a page in the docs.
+121 components, each with a page in the docs.
 
 | Group | Components |
 | --- | --- |
 | Typography | `Text` (each style on the Typography page as a variant: hero to caption, code and kbd; tones, `truncate`, `as`), `Link`, `Kbd`, `Code`, `CodeBlock`, `Snippet`, `Prose` (styles rendered Markdown or HTML, at chat or article size), `InlineEdit` (text you click to edit in place; Enter saves, Escape cancels, async saves) |
 | Actions | `Button` (primary, secondary, ghost, danger; sm, md, lg; `loading`; `shape="pill"`), `buttonClassName()` for links, `ButtonGroup`, `CloseButton`, `CopyButton`, `ToggleButton`, `SegmentedControl`, `ToggleButtonGroup` (one or several on), `Toolbar` + `ToolbarSeparator` (arrow keys across its controls) |
-| Inputs | `Form` (the browser's checks, your own and the server's errors, under each field; `useFormStatus`), `Field`, `Fieldset`, `Input` (start and end content), `Textarea` (`autoGrow`), `NumberField`, `SearchField`, `InputOTP`, `ColorField`, `DateField` and `TimeField` (typed in segments, in the locale's order), `TagInput` (several values as tags, typed or picked from suggestions), `PasswordInput` (show and hide, a strength meter, a checklist of rules; `passwordStrength()`) |
-| Choices | `Checkbox`, `CheckboxGroup`, `RadioGroup` (plain or cards), `Switch`, `Select`, `Combobox`, `Slider` (one value or a range), `Rating` (pick a score or show one), `ChoiceCard`, `ListBox` (one or many, on the page), `TreeView` (rows that open, select or check, with children loaded on demand) |
-| Pickers | `Calendar`, `DatePicker`, `RangeCalendar`, `DateRangePicker` (with presets), `ColorPicker`, `ColorArea`, `ColorSlider`, `ColorSwatchPicker`, `FileDropZone` |
+| Inputs | `Form` (the browser's checks, your own and the server's errors, under each field; `useFormStatus`), `Field`, `Fieldset`, `Input` (start and end content), `Textarea` (`autoGrow`), `NumberField`, `SearchField`, `InputOTP`, `ColorField`, `DateField` and `TimeField` (typed in segments, in the locale's order), `TagInput` (several values as tags, typed or picked from suggestions), `PasswordInput` (show and hide, a strength meter, a checklist of rules; `passwordStrength()`), `MentionInput` (`@` mentions and `/` commands in a list at the caret; `useMentions` for any text box), `SignaturePad` (sign with a mouse, finger or pen, or type instead; sent with a Form) |
+| Choices | `Checkbox`, `CheckboxGroup`, `RadioGroup` (plain or cards), `Switch`, `Select`, `Combobox`, `Slider` (one value or a range), `Rating` (pick a score or show one), `ChoiceCard`, `ListBox` (one or many, on the page), `TreeView` (rows that open, select or check, with children loaded on demand), `TransferList` (two lists with buttons to move items between them, searchable and orderable) |
+| Pickers | `Calendar`, `DatePicker`, `RangeCalendar`, `DateRangePicker` (with presets), `ColorPicker`, `ColorArea`, `ColorSlider`, `ColorSwatchPicker`, `FileDropZone`, `UploadList` (files uploading with progress, retry, cancel and remove; `useUploadQueue`) |
 | Feedback | `Alert`, `Badge`, `ProgressBar`, `ProgressCircle`, `Meter` (an amount in a range, toned by thresholds), `Spinner`, `Skeleton`, `SkeletonRows`, `Toaster` + `toast()` (sonner: stacked, swipeable, with actions and promises), `Tooltip`, `Banner` (an announcement bar across the top, dismissible and remembered) |
-| Overlays | `Dialog`, `ConfirmDialog`, `Drawer`, `Popover`, `HoverCard` (a preview when the pointer rests on a link), `Menu` + `MenuItem`, `CommandPalette`, `ContextMenu` (right-click, long press or Shift+F10, with the same items), `Tour` (steps that point at parts of the page, with an optional spotlight) + `Coachmark`, `NavigationMenu` + `NavigationMenuItem` + `NavigationMenuLink` (a site's top nav with dropdown panels and mega-menus) |
+| Overlays | `Dialog`, `ConfirmDialog`, `Drawer`, `Popover`, `HoverCard` (a preview when the pointer rests on a link), `Menu` + `MenuItem`, `CommandPalette`, `ContextMenu` (right-click, long press or Shift+F10, with the same items), `Tour` (steps that point at parts of the page, with an optional spotlight) + `Coachmark`, `NavigationMenu` + `NavigationMenuItem` + `NavigationMenuLink` (a site's top nav with dropdown panels and mega-menus), `NotificationCenter` (a bell with an unread count that opens a popover inbox) + `NotificationList` |
 | Navigation | `Tabs`, `Accordion`, `Disclosure`, `Breadcrumbs`, `Pagination`, `Steps`, `NavList` + `NavItem` |
-| Data display | `Table` (sorting, selection), `Stat`, `FileTree`, `EmptyState`, `Tag`, `ColorSwatch`, `Avatar`, `AvatarGroup`, `User`, `Image` (a placeholder while it loads, a fallback if it fails, `ratio`, `caption`), `Timeline` + `TimelineItem`, `DescriptionList` + `DescriptionItem`, `Carousel` + `CarouselSlide` (scroll-snap, arrows, dots, autoplay), `SortableList` (reorder by dragging or with the keyboard) |
-| AI | `PromptInput` (attachments, stop while streaming) + `PromptSuggestion`, `ChatConversation` (follows the newest message, jump to latest), `ChatMessage` + `ChatMessageActions`, `ChatLoader`, `ChatTool` (a tool call with its status, input, output and approval), `ChainOfThought`, `ChatSource` + `ChatSources`, `TextShimmer` |
+| Data display | `Table` (sorting, selection), `Stat`, `FileTree`, `EmptyState`, `Tag`, `ColorSwatch`, `Avatar`, `AvatarGroup`, `User`, `Image` (a placeholder while it loads, a fallback if it fails, `ratio`, `caption`), `Timeline` + `TimelineItem`, `DescriptionList` + `DescriptionItem`, `Carousel` + `CarouselSlide` (scroll-snap, arrows, dots, autoplay), `SortableList` (reorder by dragging or with the keyboard), `DiffViewer` (code diffs, unified or side by side, from two strings or a patch), `ActivityHeatmap` (a calendar of daily counts in shaded squares), `MediaPlayer` (audio and video with the library's own controls), `QRCode` (drawn as one SVG path, with its own encoder; `encodeQR()`) |
+| AI | `PromptInput` (attachments, stop while streaming) + `PromptSuggestion`, `ChatConversation` (follows the newest message, jump to latest), `ChatMessage` + `ChatMessageActions`, `ChatLoader`, `ChatTool` (a tool call with its status, input, output and approval), `ChainOfThought`, `ChatSource` + `ChatSources`, `TextShimmer`, `Markdown` (a safe renderer for answers as they stream, code in CodeBlock) |
 | Layout | `Card`, `SettingsRow`, `Stack`, `Separator`, `ScrollShadow`, `VisuallyHidden`, `AspectRatio`, `Splitter` + `SplitterPanel` + `SplitterHandle` (panels you resize by dragging or with the arrow keys, collapsible, remembered), `VirtualList` (renders only the rows in view, for 10,000 rows, logs and infinite feeds) |
 | Marketing | `SiteHeader`, `SectionHeading`, `Chip`, `DotGrid` |
 
-Hooks for your own components: `useControllableState`, `useFloating` (top-layer positioning that flips), `usePresence` (keeps a layer mounted while it animates out), `useDismiss`, `useModalDialog`, `useMenuKeyboard`. Every prop is typed and described, so your editor explains it on hover.
+Hooks for your own components: `useControllableState`, `useFloating` (top-layer positioning that flips), `usePresence` (keeps a layer mounted while it animates out), `useDismiss`, `useModalDialog`, `useMenuKeyboard`, `useVirtualizer` (the windowing behind VirtualList). Every prop is typed and described, so your editor explains it on hover.
 
 ## Blocks as components
 

package/dist/components/ActivityHeatmap/ActivityHeatmap.d.cts

@@ -0,0 +1,8 @@
+import type { ActivityHeatmapProps } from "./ActivityHeatmap.types.cjs";
+export type { ActivityHeatmapDay, ActivityHeatmapLabels, ActivityHeatmapProps } from "./ActivityHeatmap.types.cjs";
+/**
+ * A GitHub-style calendar of daily counts: a column per week, a row per weekday, each day shaded by its count.
+ * It's a grid with one focusable day: the arrow keys move by day and week, and each day is read out in full,
+ * with a tooltip showing the number. It scrolls sideways inside itself, starting at the latest week.
+ */
+export declare function ActivityHeatmap({ data, label, start, end, weekStartsOn, levels, thresholds, color, locale, formatTooltip, onDayClick, cellSize, showLegend, labels: labelsProp, className, }: ActivityHeatmapProps): import("react").JSX.Element;

package/dist/components/ActivityHeatmap/ActivityHeatmap.d.ts

@@ -0,0 +1,8 @@
+import type { ActivityHeatmapProps } from "./ActivityHeatmap.types.js";
+export type { ActivityHeatmapDay, ActivityHeatmapLabels, ActivityHeatmapProps } from "./ActivityHeatmap.types.js";
+/**
+ * A GitHub-style calendar of daily counts: a column per week, a row per weekday, each day shaded by its count.
+ * It's a grid with one focusable day: the arrow keys move by day and week, and each day is read out in full,
+ * with a tooltip showing the number. It scrolls sideways inside itself, starting at the latest week.
+ */
+export declare function ActivityHeatmap({ data, label, start, end, weekStartsOn, levels, thresholds, color, locale, formatTooltip, onDayClick, cellSize, showLegend, labels: labelsProp, className, }: ActivityHeatmapProps): import("react").JSX.Element;

package/dist/components/ActivityHeatmap/ActivityHeatmap.types.d.cts

@@ -0,0 +1,73 @@
+import type { ReactNode } from "react";
+import type { ISODate } from "../Calendar/dates.cjs";
+import type { ChartColor } from "../Chart/Chart.types.cjs";
+/** One day's number: `{ date: "2026-03-03", count: 12 }`. */
+export interface ActivityHeatmapDay {
+    /** The day, as "YYYY-MM-DD". */
+    date: ISODate;
+    /** How many things happened that day. Days left out count as 0. */
+    count: number;
+}
+export interface ActivityHeatmapLabels {
+    /** A day's number in words, in the tooltip, the cell's name and the summary.
+     * @default (count) => "No contributions", "1 contribution", "12 contributions" */
+    count?(count: number): string;
+    /** A cell's name for screen readers, from its count in words and its full date.
+     * @default (count, date) => `${count} on ${date}`, e.g. "12 contributions on Tuesday, 3 March 2026" */
+    day?(count: string, date: string): string;
+    /** What a screen reader hears before the grid: the total, and the busiest day when there is one.
+     * @default "1,204 contributions in total. The busiest day was Tuesday, 3 March 2026, with 42 contributions." */
+    summary?(total: string, busiest?: {
+        date: string;
+        count: string;
+    }): string;
+    /** The word before the legend's swatches. @default "Less" */
+    less?: string;
+    /** The word after them. @default "More" */
+    more?: string;
+}
+export interface ActivityHeatmapProps {
+    /** The numbers, one entry per day, in any order. Days with no entry show as empty; two entries for a day add up. */
+    data: ActivityHeatmapDay[];
+    /** What it shows, e.g. "Commits in the last year". It names the grid for screen readers. */
+    label: string;
+    /** The first day shown, "YYYY-MM-DD". @default 52 weeks before `end` */
+    start?: ISODate;
+    /** The last day shown, "YYYY-MM-DD". @default today */
+    end?: ISODate;
+    /** 1 starts each column on Monday, 0 on Sunday. @default the locale's first day of the week */
+    weekStartsOn?: 0 | 1;
+    /** How many shades, counting the empty one: 5 is empty and four steps up to the busiest day. Ignored with `thresholds`.
+     * @default 5 */
+    levels?: number;
+    /**
+     * The lowest count for each shade above empty, rising, e.g. `[1, 5, 10, 20]`: 1–4 is the lightest, 20 and over the
+     * darkest. @default `levels - 1` equal steps up to the busiest day
+     */
+    thresholds?: number[];
+    /** A chart palette slot (1–8) or any CSS colour, such as `"var(--ow-primary)"`. The shades are mixed from it and the
+     * empty colour, so they follow the theme. @default 1 */
+    color?: ChartColor;
+    /** Month and weekday names, dates and numbers follow this locale, e.g. "en-IE". @default the browser's */
+    locale?: string;
+    /** The tooltip for the hovered or focused day. @default its count and date, e.g. "12 contributions on Tue, 3 Mar 2026" */
+    formatTooltip?(day: ActivityHeatmapDay): ReactNode;
+    /** Makes each day a button: called with the day when it's clicked, or Enter or Space is pressed on it. */
+    onDayClick?(day: ActivityHeatmapDay): void;
+    /** The side of each square in pixels; the gap between them is a quarter of it. @default 12 */
+    cellSize?: number;
+    /** Shows "Less ▢▢▢▢▢ More" under the grid. @default true */
+    showLegend?: boolean;
+    /** The words it uses, for other languages. */
+    labels?: ActivityHeatmapLabels;
+    className?: string;
+}
+/** What `Intl.Locale` says about a locale's week, where the browser supports it: 1 is Monday … 7 is Sunday. Internal. */
+export interface LocaleWeekInfo {
+    getWeekInfo?(): {
+        firstDay: number;
+    };
+    weekInfo?: {
+        firstDay: number;
+    };
+}

package/dist/components/ActivityHeatmap/ActivityHeatmap.types.d.ts

@@ -0,0 +1,73 @@
+import type { ReactNode } from "react";
+import type { ISODate } from "../Calendar/dates.js";
+import type { ChartColor } from "../Chart/Chart.types.js";
+/** One day's number: `{ date: "2026-03-03", count: 12 }`. */
+export interface ActivityHeatmapDay {
+    /** The day, as "YYYY-MM-DD". */
+    date: ISODate;
+    /** How many things happened that day. Days left out count as 0. */
+    count: number;
+}
+export interface ActivityHeatmapLabels {
+    /** A day's number in words, in the tooltip, the cell's name and the summary.
+     * @default (count) => "No contributions", "1 contribution", "12 contributions" */
+    count?(count: number): string;
+    /** A cell's name for screen readers, from its count in words and its full date.
+     * @default (count, date) => `${count} on ${date}`, e.g. "12 contributions on Tuesday, 3 March 2026" */
+    day?(count: string, date: string): string;
+    /** What a screen reader hears before the grid: the total, and the busiest day when there is one.
+     * @default "1,204 contributions in total. The busiest day was Tuesday, 3 March 2026, with 42 contributions." */
+    summary?(total: string, busiest?: {
+        date: string;
+        count: string;
+    }): string;
+    /** The word before the legend's swatches. @default "Less" */
+    less?: string;
+    /** The word after them. @default "More" */
+    more?: string;
+}
+export interface ActivityHeatmapProps {
+    /** The numbers, one entry per day, in any order. Days with no entry show as empty; two entries for a day add up. */
+    data: ActivityHeatmapDay[];
+    /** What it shows, e.g. "Commits in the last year". It names the grid for screen readers. */
+    label: string;
+    /** The first day shown, "YYYY-MM-DD". @default 52 weeks before `end` */
+    start?: ISODate;
+    /** The last day shown, "YYYY-MM-DD". @default today */
+    end?: ISODate;
+    /** 1 starts each column on Monday, 0 on Sunday. @default the locale's first day of the week */
+    weekStartsOn?: 0 | 1;
+    /** How many shades, counting the empty one: 5 is empty and four steps up to the busiest day. Ignored with `thresholds`.
+     * @default 5 */
+    levels?: number;
+    /**
+     * The lowest count for each shade above empty, rising, e.g. `[1, 5, 10, 20]`: 1–4 is the lightest, 20 and over the
+     * darkest. @default `levels - 1` equal steps up to the busiest day
+     */
+    thresholds?: number[];
+    /** A chart palette slot (1–8) or any CSS colour, such as `"var(--ow-primary)"`. The shades are mixed from it and the
+     * empty colour, so they follow the theme. @default 1 */
+    color?: ChartColor;
+    /** Month and weekday names, dates and numbers follow this locale, e.g. "en-IE". @default the browser's */
+    locale?: string;
+    /** The tooltip for the hovered or focused day. @default its count and date, e.g. "12 contributions on Tue, 3 Mar 2026" */
+    formatTooltip?(day: ActivityHeatmapDay): ReactNode;
+    /** Makes each day a button: called with the day when it's clicked, or Enter or Space is pressed on it. */
+    onDayClick?(day: ActivityHeatmapDay): void;
+    /** The side of each square in pixels; the gap between them is a quarter of it. @default 12 */
+    cellSize?: number;
+    /** Shows "Less ▢▢▢▢▢ More" under the grid. @default true */
+    showLegend?: boolean;
+    /** The words it uses, for other languages. */
+    labels?: ActivityHeatmapLabels;
+    className?: string;
+}
+/** What `Intl.Locale` says about a locale's week, where the browser supports it: 1 is Monday … 7 is Sunday. Internal. */
+export interface LocaleWeekInfo {
+    getWeekInfo?(): {
+        firstDay: number;
+    };
+    weekInfo?: {
+        firstDay: number;
+    };
+}

package/dist/components/DiffViewer/DiffViewer.d.cts

@@ -0,0 +1,8 @@
+import type { DiffViewerProps } from "./DiffViewer.types.cjs";
+export type { DiffViewerLabels, DiffViewerProps } from "./DiffViewer.types.cjs";
+/**
+ * A code diff on the code block's night ground: from two versions of a text or from a unified patch, shown unified or
+ * side by side. Changed lines are tinted green or red with a "+" or "−" and read out as "Added" or "Removed"; the
+ * words that changed within them are marked; long runs of unchanged lines fold into buttons that show them.
+ */
+export declare function DiffViewer({ oldValue, newValue, patch, view, splitMinWidth, language, filename, oldFilename, context, wrap, showLineNumbers, wordDiff, copyable, maxHeight, labels: labelsProp, className, ...props }: DiffViewerProps): import("react").JSX.Element;

package/dist/components/DiffViewer/DiffViewer.d.ts

@@ -0,0 +1,8 @@
+import type { DiffViewerProps } from "./DiffViewer.types.js";
+export type { DiffViewerLabels, DiffViewerProps } from "./DiffViewer.types.js";
+/**
+ * A code diff on the code block's night ground: from two versions of a text or from a unified patch, shown unified or
+ * side by side. Changed lines are tinted green or red with a "+" or "−" and read out as "Added" or "Removed"; the
+ * words that changed within them are marked; long runs of unchanged lines fold into buttons that show them.
+ */
+export declare function DiffViewer({ oldValue, newValue, patch, view, splitMinWidth, language, filename, oldFilename, context, wrap, showLineNumbers, wordDiff, copyable, maxHeight, labels: labelsProp, className, ...props }: DiffViewerProps): import("react").JSX.Element;

package/dist/components/DiffViewer/DiffViewer.types.d.cts

@@ -0,0 +1,131 @@
+import type { HTMLAttributes } from "react";
+export interface DiffViewerLabels {
+    /** Read before each added line, which is otherwise only green with a "+".
+     * @default "Added" */
+    added?: string;
+    /** Read before each removed line.
+     * @default "Removed" */
+    removed?: string;
+    /** The header of the old line numbers' column, read by screen readers as they move through the table.
+     * @default "Old line" */
+    oldLine?: string;
+    /** The header of the new line numbers' column.
+     * @default "New line" */
+    newLine?: string;
+    /** The header of the lines' column in the unified view.
+     * @default "Line" */
+    line?: string;
+    /** The header of the old version's column in the split view.
+     * @default "Before" */
+    before?: string;
+    /** The header of the new version's column in the split view.
+     * @default "After" */
+    after?: string;
+    /** Names the table with the counts that show as "+3 −1".
+     * @default (added, removed) => `${added} lines added, ${removed} removed` */
+    summary?(added: number, removed: number): string;
+    /** The button that shows a collapsed run of unchanged lines.
+     * @default (count) => `Show ${count} unchanged lines` */
+    expand?(count: number): string;
+    /** The copy button's label.
+     * @default "Copy" */
+    copy?: string;
+    /** Shown when the two versions are the same.
+     * @default "No changes" */
+    noChanges?: string;
+    /** Read between the old and new name of a renamed file, for the "→" between them.
+     * @default "renamed to" */
+    renamed?: string;
+}
+export interface DiffViewerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The text before the change. Pass it with `newValue`, and the diff is worked out line by line. */
+    oldValue?: string;
+    /** The text after the change. */
+    newValue?: string;
+    /** A unified diff instead, as `git diff` prints it: its hunks and `@@` headers, and one file or several. */
+    patch?: string;
+    /** `unified` shows the lines one above the other; `split` puts the old version beside the new one, and wraps long
+     * lines so the two sides stay level.
+     * @default "unified" */
+    view?: "unified" | "split";
+    /** Below this width (pixels) a split view shows unified, as there isn't room for two columns. 0 keeps it split.
+     * @default 500 */
+    splitMinWidth?: number;
+    /** Shown on the right of the header, e.g. "tsx". */
+    language?: string;
+    /** The file's name in the header. With a `patch`, it's read from the patch unless you set it. */
+    filename?: string;
+    /** The name it had before, for a renamed file: shown as "old → new". */
+    oldFilename?: string;
+    /** How many unchanged lines show around each change. Longer runs of unchanged lines collapse to a button that
+     * shows them. `Infinity` shows every line.
+     * @default 3 */
+    context?: number;
+    /** Wraps long lines in the unified view instead of scrolling sideways. The split view always wraps.
+     * @default false */
+    wrap?: boolean;
+    /** @default true */
+    showLineNumbers?: boolean;
+    /** Marks the words that changed within a changed line.
+     * @default true */
+    wordDiff?: boolean;
+    /** Shows a copy button in the header. It copies `newValue`, or the file's part of the `patch`.
+     * @default true */
+    copyable?: boolean;
+    /** Scrolls each file past this height (pixels). */
+    maxHeight?: number;
+    /** The words it uses, for other languages. */
+    labels?: DiffViewerLabels;
+}
+/** A run of text within a changed line, and whether it's one of the words that changed. Internal. */
+export interface DiffSegment {
+    text: string;
+    changed: boolean;
+}
+/** One line of a diff: unchanged, added, removed, or a patch's `@@` hunk header. Internal. */
+export interface DiffLine {
+    type: "same" | "add" | "del" | "hunk";
+    text: string;
+    /** Its number in the old version, if it's in it. */
+    oldNo?: number;
+    /** Its number in the new version, if it's in it. */
+    newNo?: number;
+    /** The words that changed, when it pairs with a line on the other side. */
+    words?: DiffSegment[];
+}
+/** One file of a diff, worked out from two strings or read from a patch. Internal. */
+export interface DiffFile {
+    oldName?: string;
+    newName?: string;
+    lines: DiffLine[];
+    /** What the copy button copies. */
+    text: string;
+}
+/** What a diff shows, row by row: a line, a run of unchanged lines collapsed to a button (`gap` is the first one's
+ * index), or in a split view a pair of lines side by side. Internal. */
+export type DiffRow = {
+    kind: "line";
+    line: DiffLine;
+    reveal?: number;
+} | {
+    kind: "gap";
+    gap: number;
+    count: number;
+} | {
+    kind: "pair";
+    left?: DiffLine;
+    right?: DiffLine;
+    reveal?: number;
+};
+/** What each file's table is given. Internal. */
+export interface DiffTableProps {
+    file: DiffFile;
+    split: boolean;
+    context: number;
+    wrap: boolean;
+    showLineNumbers: boolean;
+    copyable: boolean;
+    language?: string;
+    maxHeight?: number;
+    labels: Required<DiffViewerLabels>;
+}

package/dist/components/DiffViewer/DiffViewer.types.d.ts

@@ -0,0 +1,131 @@
+import type { HTMLAttributes } from "react";
+export interface DiffViewerLabels {
+    /** Read before each added line, which is otherwise only green with a "+".
+     * @default "Added" */
+    added?: string;
+    /** Read before each removed line.
+     * @default "Removed" */
+    removed?: string;
+    /** The header of the old line numbers' column, read by screen readers as they move through the table.
+     * @default "Old line" */
+    oldLine?: string;
+    /** The header of the new line numbers' column.
+     * @default "New line" */
+    newLine?: string;
+    /** The header of the lines' column in the unified view.
+     * @default "Line" */
+    line?: string;
+    /** The header of the old version's column in the split view.
+     * @default "Before" */
+    before?: string;
+    /** The header of the new version's column in the split view.
+     * @default "After" */
+    after?: string;
+    /** Names the table with the counts that show as "+3 −1".
+     * @default (added, removed) => `${added} lines added, ${removed} removed` */
+    summary?(added: number, removed: number): string;
+    /** The button that shows a collapsed run of unchanged lines.
+     * @default (count) => `Show ${count} unchanged lines` */
+    expand?(count: number): string;
+    /** The copy button's label.
+     * @default "Copy" */
+    copy?: string;
+    /** Shown when the two versions are the same.
+     * @default "No changes" */
+    noChanges?: string;
+    /** Read between the old and new name of a renamed file, for the "→" between them.
+     * @default "renamed to" */
+    renamed?: string;
+}
+export interface DiffViewerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The text before the change. Pass it with `newValue`, and the diff is worked out line by line. */
+    oldValue?: string;
+    /** The text after the change. */
+    newValue?: string;
+    /** A unified diff instead, as `git diff` prints it: its hunks and `@@` headers, and one file or several. */
+    patch?: string;
+    /** `unified` shows the lines one above the other; `split` puts the old version beside the new one, and wraps long
+     * lines so the two sides stay level.
+     * @default "unified" */
+    view?: "unified" | "split";
+    /** Below this width (pixels) a split view shows unified, as there isn't room for two columns. 0 keeps it split.
+     * @default 500 */
+    splitMinWidth?: number;
+    /** Shown on the right of the header, e.g. "tsx". */
+    language?: string;
+    /** The file's name in the header. With a `patch`, it's read from the patch unless you set it. */
+    filename?: string;
+    /** The name it had before, for a renamed file: shown as "old → new". */
+    oldFilename?: string;
+    /** How many unchanged lines show around each change. Longer runs of unchanged lines collapse to a button that
+     * shows them. `Infinity` shows every line.
+     * @default 3 */
+    context?: number;
+    /** Wraps long lines in the unified view instead of scrolling sideways. The split view always wraps.
+     * @default false */
+    wrap?: boolean;
+    /** @default true */
+    showLineNumbers?: boolean;
+    /** Marks the words that changed within a changed line.
+     * @default true */
+    wordDiff?: boolean;
+    /** Shows a copy button in the header. It copies `newValue`, or the file's part of the `patch`.
+     * @default true */
+    copyable?: boolean;
+    /** Scrolls each file past this height (pixels). */
+    maxHeight?: number;
+    /** The words it uses, for other languages. */
+    labels?: DiffViewerLabels;
+}
+/** A run of text within a changed line, and whether it's one of the words that changed. Internal. */
+export interface DiffSegment {
+    text: string;
+    changed: boolean;
+}
+/** One line of a diff: unchanged, added, removed, or a patch's `@@` hunk header. Internal. */
+export interface DiffLine {
+    type: "same" | "add" | "del" | "hunk";
+    text: string;
+    /** Its number in the old version, if it's in it. */
+    oldNo?: number;
+    /** Its number in the new version, if it's in it. */
+    newNo?: number;
+    /** The words that changed, when it pairs with a line on the other side. */
+    words?: DiffSegment[];
+}
+/** One file of a diff, worked out from two strings or read from a patch. Internal. */
+export interface DiffFile {
+    oldName?: string;
+    newName?: string;
+    lines: DiffLine[];
+    /** What the copy button copies. */
+    text: string;
+}
+/** What a diff shows, row by row: a line, a run of unchanged lines collapsed to a button (`gap` is the first one's
+ * index), or in a split view a pair of lines side by side. Internal. */
+export type DiffRow = {
+    kind: "line";
+    line: DiffLine;
+    reveal?: number;
+} | {
+    kind: "gap";
+    gap: number;
+    count: number;
+} | {
+    kind: "pair";
+    left?: DiffLine;
+    right?: DiffLine;
+    reveal?: number;
+};
+/** What each file's table is given. Internal. */
+export interface DiffTableProps {
+    file: DiffFile;
+    split: boolean;
+    context: number;
+    wrap: boolean;
+    showLineNumbers: boolean;
+    copyable: boolean;
+    language?: string;
+    maxHeight?: number;
+    labels: Required<DiffViewerLabels>;
+}

package/dist/components/DiffViewer/diff.d.cts

@@ -0,0 +1,10 @@
+import type { DiffFile, DiffLine, DiffRow } from "./DiffViewer.types.cjs";
+/** The line-by-line diff of two texts. */
+export declare function diffText(oldValue: string, newValue: string, words: boolean): DiffLine[];
+/** Reads a unified diff: its files, their hunks and lines. Anything else (a commit message, index lines) is skipped. */
+export declare function parsePatch(patch: string, words: boolean): DiffFile[];
+/**
+ * The rows a file shows: its lines, with runs of unchanged lines beyond `context` of a change folded into a gap,
+ * unless that gap was opened. A file's first and last runs only keep the lines next to a change.
+ */
+export declare function toRows(lines: DiffLine[], context: number, opened: number[], split: boolean): DiffRow[];

package/dist/components/DiffViewer/diff.d.ts

@@ -0,0 +1,10 @@
+import type { DiffFile, DiffLine, DiffRow } from "./DiffViewer.types.js";
+/** The line-by-line diff of two texts. */
+export declare function diffText(oldValue: string, newValue: string, words: boolean): DiffLine[];
+/** Reads a unified diff: its files, their hunks and lines. Anything else (a commit message, index lines) is skipped. */
+export declare function parsePatch(patch: string, words: boolean): DiffFile[];
+/**
+ * The rows a file shows: its lines, with runs of unchanged lines beyond `context` of a change folded into a gap,
+ * unless that gap was opened. A file's first and last runs only keep the lines next to a change.
+ */
+export declare function toRows(lines: DiffLine[], context: number, opened: number[], split: boolean): DiffRow[];

package/dist/components/Markdown/Markdown.d.cts

@@ -0,0 +1,8 @@
+import type { MarkdownProps } from "./Markdown.types.cjs";
+export type { MarkdownCodeBlockProps, MarkdownComponents, MarkdownProps, MarkdownTag } from "./Markdown.types.cjs";
+/**
+ * Renders Markdown safely, as React elements in Prose: no HTML is ever injected, raw HTML shows as text and only http,
+ * https, mailto and relative links are followed. It's built for an agent's answer as it streams: the unfinished end
+ * never flashes raw syntax, and the blocks above it aren't rendered again.
+ */
+export declare function Markdown({ children, content, streaming, caret, size, allowImages, headingOffset, components, onLinkClick, className, ...props }: MarkdownProps): import("react").JSX.Element;

package/dist/components/Markdown/Markdown.d.ts

@@ -0,0 +1,8 @@
+import type { MarkdownProps } from "./Markdown.types.js";
+export type { MarkdownCodeBlockProps, MarkdownComponents, MarkdownProps, MarkdownTag } from "./Markdown.types.js";
+/**
+ * Renders Markdown safely, as React elements in Prose: no HTML is ever injected, raw HTML shows as text and only http,
+ * https, mailto and relative links are followed. It's built for an agent's answer as it streams: the unfinished end
+ * never flashes raw syntax, and the blocks above it aren't rendered again.
+ */
+export declare function Markdown({ children, content, streaming, caret, size, allowImages, headingOffset, components, onLinkClick, className, ...props }: MarkdownProps): import("react").JSX.Element;

package/dist/components/Markdown/Markdown.types.d.cts

@@ -0,0 +1,59 @@
+import type { ComponentType, ElementType, MouseEvent } from "react";
+import type { ProseProps } from "../Prose/Prose.types.cjs";
+/** The elements Markdown draws, each of which `components` can replace. */
+export type MarkdownTag = "a" | "blockquote" | "code" | "del" | "em" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "hr" | "img" | "li" | "ol" | "p" | "strong" | "table" | "td" | "th" | "ul";
+/** What a fenced code block's renderer gets. */
+export interface MarkdownCodeBlockProps {
+    /** The code, without the fences. */
+    code: string;
+    /** The word after the opening fence, such as "tsx". */
+    language?: string;
+}
+/** Your own renderers, by element: a router's Link for `a`, say. Each gets the element's props and children. */
+export type MarkdownComponents = Partial<Record<MarkdownTag, ElementType>> & {
+    /** Renders fenced code. Defaults to the library's CodeBlock. */
+    codeBlock?: ComponentType<MarkdownCodeBlockProps>;
+};
+export interface MarkdownProps extends Omit<ProseProps, "size" | "children"> {
+    /** The Markdown, as a string. */
+    children?: string;
+    /** The Markdown, if you'd rather not pass it as children. It wins over children. */
+    content?: string;
+    /** While the text is still arriving. An unfinished construct at the end (an open code fence, half a `**bold`, a link
+     * without its URL yet, half a table row) shows as what it's becoming, never as raw syntax, and the finished blocks
+     * above it aren't rendered again. The element is aria-busy meanwhile.
+     * @default false */
+    streaming?: boolean;
+    /** Blinks a caret after the last character while it streams; it holds still for reduced motion. Leave it off inside
+     * a streaming ChatMessage, which draws its own.
+     * @default false */
+    caret?: boolean;
+    /** chat sets 14px text with a tight rhythm, for answers in a conversation; article the prose style, for documents.
+     * @default "chat" */
+    size?: "chat" | "article";
+    /** Shows images. Off, an image shows as a link to it, named by its alt text.
+     * @default false */
+    allowImages?: boolean;
+    /** Moves every heading down this many levels, so `#` under a page's own h1 and h2 can be an h3.
+     * @default 0 */
+    headingOffset?: number;
+    /** Replaces the elements it draws with your own renderers. Keep the object stable (outside the component or memoised)
+     * so finished blocks aren't rendered again. */
+    components?: MarkdownComponents;
+    /** Called when a link is clicked, before it's followed; call `event.preventDefault()` to handle it yourself. */
+    onLinkClick?(event: MouseEvent<HTMLAnchorElement>, href: string): void;
+}
+/** What every block's renderer reads. Internal. */
+export interface MarkdownContext {
+    components: MarkdownComponents | undefined;
+    allowImages: boolean;
+    headingOffset: number;
+    caret: boolean;
+    click(event: MouseEvent<HTMLAnchorElement>, href: string): void;
+}
+/** One top-level block, rendered again only when its source or whether it's the streaming end changes. Internal. */
+export interface MarkdownBlockProps {
+    source: string;
+    context: MarkdownContext;
+    tail: boolean;
+}