@openwarelabs/ui 0.14.1 → 0.16.0

package/README.md

@@ -58,17 +58,17 @@ import { Button, Field, Input, Toaster, toast } from "@openwarelabs/ui";
 
 | 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) |
+| 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) |
+| 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` |
 | 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` |
+| 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) |
 | 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) |
+| 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` |
-| Layout | `Card`, `SettingsRow`, `Stack`, `Separator`, `ScrollShadow`, `VisuallyHidden`, `AspectRatio`, `Splitter` + `SplitterPanel` + `SplitterHandle` (panels you resize by dragging or with the arrow keys, collapsible, remembered) |
+| 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.

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/InlineEdit/InlineEdit.d.cts

@@ -0,0 +1,8 @@
+import type { InlineEditProps } from "./InlineEdit.types.cjs";
+export type { InlineEditLabels, InlineEditProps } from "./InlineEdit.types.cjs";
+/**
+ * Text that people click, or focus and press Enter, to edit where it is: a project's name, a title, a value in a
+ * settings row. Enter saves and Escape cancels; focus goes back to the text either way. `onSave` can return a Promise:
+ * the editor stays open while it runs, and shows its error if it fails.
+ */
+export declare function InlineEdit({ value, defaultValue, onSave, onCancel, label, placeholder, multiline, validate, required, maxLength, textVariant, saveOnBlur, showActions, editing, defaultEditing, onEditingChange, selectOnFocus, disabled, readOnly, labels: labelsProp, id, className, }: InlineEditProps): import("react").JSX.Element;

package/dist/components/InlineEdit/InlineEdit.d.ts

@@ -0,0 +1,8 @@
+import type { InlineEditProps } from "./InlineEdit.types.js";
+export type { InlineEditLabels, InlineEditProps } from "./InlineEdit.types.js";
+/**
+ * Text that people click, or focus and press Enter, to edit where it is: a project's name, a title, a value in a
+ * settings row. Enter saves and Escape cancels; focus goes back to the text either way. `onSave` can return a Promise:
+ * the editor stays open while it runs, and shows its error if it fails.
+ */
+export declare function InlineEdit({ value, defaultValue, onSave, onCancel, label, placeholder, multiline, validate, required, maxLength, textVariant, saveOnBlur, showActions, editing, defaultEditing, onEditingChange, selectOnFocus, disabled, readOnly, labels: labelsProp, id, className, }: InlineEditProps): import("react").JSX.Element;

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

@@ -0,0 +1,74 @@
+import type { TextVariant } from "../Text/Text.cjs";
+export interface InlineEditLabels {
+    /** Names the text's button, given `label`. @default (label) => `Edit ${label.toLowerCase()}` */
+    edit?(label: string): string;
+    /** The Save button, with `showActions`. @default "Save" */
+    save?: string;
+    /** The Cancel button, with `showActions`. @default "Cancel" */
+    cancel?: string;
+    /** Read out while a slow `onSave` runs. @default "Saving" */
+    saving?: string;
+    /** Shown when a `required` value is left empty. @default "This can't be empty." */
+    required?: string;
+    /** Shown when `onSave` fails without a message of its own. @default "Couldn't save. Try again." */
+    failed?: string;
+}
+export interface InlineEditProps {
+    /** The text, when you control it. Update it in `onSave`. */
+    value?: string;
+    /** The text at first, when it keeps the text itself.
+     * @default "" */
+    defaultValue?: string;
+    /**
+     * Called with the new text when people save a change (not when they save it unchanged). Return a Promise to keep
+     * the editor open, showing that it's saving, until it settles; if it rejects or throws, its message is shown and
+     * the editor stays open to try again.
+     */
+    onSave?(value: string): void | Promise<unknown>;
+    /** Called when people cancel an edit, with Escape, the Cancel button or, without `saveOnBlur`, by leaving it. */
+    onCancel?(): void;
+    /** What the text is, such as "Project name": the editor's name, and the button's ("Edit project name"). Required. */
+    label: string;
+    /** Shown, muted, when the text is empty, and in the empty editor.
+     * @default label */
+    placeholder?: string;
+    /** Edits in a Textarea that grows with the text: Enter adds a line, and Ctrl+Enter or ⌘Enter saves.
+     * @default false */
+    multiline?: boolean;
+    /** Checks the text before it's saved; return a message to show instead of saving, or undefined when it's fine. */
+    validate?(value: string): string | undefined;
+    /** Refuses to save empty text (or only spaces), with `labels.required`.
+     * @default false */
+    required?: boolean;
+    /** The most characters it takes. */
+    maxLength?: number;
+    /** A Text style for the text and the editor, so it can be a heading or a caption. Left out, it takes the font around it. */
+    textVariant?: TextVariant;
+    /** Leaving the editor saves. When false, leaving it cancels.
+     * @default true */
+    saveOnBlur?: boolean;
+    /** Shows Save and Cancel buttons beside the editor.
+     * @default false */
+    showActions?: boolean;
+    /** Whether it's editing, when you control it. */
+    editing?: boolean;
+    /** Whether it starts out editing, when it controls that itself.
+     * @default false */
+    defaultEditing?: boolean;
+    /** Called when it starts or stops editing. */
+    onEditingChange?(editing: boolean): void;
+    /** Selects all the text when the editor opens, to type over it. Otherwise the caret goes at the end.
+     * @default false */
+    selectOnFocus?: boolean;
+    /** Shows the text dimmed, and it can't be edited or focused.
+     * @default false */
+    disabled?: boolean;
+    /** Shows the text plainly, as text, with nothing to click.
+     * @default false */
+    readOnly?: boolean;
+    /** The words it uses, for other languages. */
+    labels?: InlineEditLabels;
+    /** The display button's id. */
+    id?: string;
+    className?: string;
+}