@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/components/typography.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+/*
+ * Typography — server-compatible. Headings read the data-font axis: --font-heading,
+ * --display-weight / --display-tracking / --display-em, and scale with --display-scale.
+ */
+export const headingVariants = cva("text-balance text-fg [overflow-wrap:break-word]", {
+    variants: {
+        size: {
+            /** 56px × display-scale (fluid down to 38px on phones). Hero / page title on websites. */
+            display: "font-display [font-weight:var(--display-weight)] [letter-spacing:var(--display-tracking)] [&_em]:[font-style:var(--display-em)] text-[length:calc(clamp(38px,4.2vw+20px,56px)*var(--display-scale))] leading-[1.02]",
+            /** 44px × display-scale. Admin page title. */
+            xl: "font-display [font-weight:var(--display-weight)] [letter-spacing:var(--display-tracking)] [&_em]:[font-style:var(--display-em)] text-[length:calc(clamp(32px,2.6vw+22px,44px)*var(--display-scale))] leading-[1.05]",
+            /** 32px × display-scale. Section title. */
+            lg: "font-sans font-semibold tracking-[-0.022em] text-[length:calc(32px*var(--display-scale))] leading-[1.12]",
+            /** 22px. Card / panel title. */
+            md: "font-sans font-semibold tracking-[-0.016em] text-[22px] leading-[1.25]",
+            /** 17px. Group heading inside a panel. */
+            sm: "font-sans font-semibold tracking-[-0.01em] text-[17px] leading-[1.35]",
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+const defaultSize = { 1: "xl", 2: "lg", 3: "md", 4: "sm", 5: "sm", 6: "sm" };
+/**
+ * A heading whose look (`size`) is decoupled from its level, so the outline never skips a
+ * level for visual reasons. `display` and `xl` use the preset's heading face; `<em>` inside
+ * follows the preset (italic in serif presets, plain in sans).
+ *
+ * ```tsx
+ * <Heading level={1} size="display">Dinner, <em>slowly</em>.</Heading>
+ * <Heading level={2} size="md">Billing details</Heading>
+ * ```
+ */
+export const Heading = React.forwardRef(function Heading({ level = 2, size, asChild, className, ...props }, ref) {
+    const Comp = (asChild ? Slot.Root : `h${level}`);
+    return _jsx(Comp, { ref: ref, "data-slot": "heading", "data-size": size ?? defaultSize[level], className: cn(headingVariants({ size: size ?? defaultSize[level] }), className), ...props });
+});
+/* ------------------------------------------------------------------ */
+/* Text                                                                */
+/* ------------------------------------------------------------------ */
+export const textVariants = cva("", {
+    variants: {
+        size: {
+            xs: "text-xs leading-[1.45]",
+            sm: "text-[13px] leading-[1.5]",
+            md: "text-sm leading-[1.55]",
+            lg: "text-base leading-[1.6]",
+        },
+        tone: {
+            default: "text-fg",
+            muted: "text-fg-muted",
+            subtle: "text-fg-subtle",
+            accent: "text-accent-ink",
+            danger: "text-danger",
+            success: "text-success",
+            warning: "text-warning",
+            /** Keep the parent colour. */
+            inherit: "",
+        },
+        weight: {
+            regular: "font-normal",
+            medium: "font-medium",
+            semibold: "font-semibold",
+        },
+    },
+    defaultVariants: { size: "md", tone: "default" },
+});
+/**
+ * Body text: 12 / 13 / 14 / 16 px, seven tones, three weights, single-line truncation or
+ * multi-line clamp. Paragraphs wrap with `text-wrap: pretty`.
+ *
+ * ```tsx
+ * <Text tone="muted" size="sm">Last edited 3 minutes ago by Elif.</Text>
+ * <Text truncate={2}>{post.excerpt}</Text>
+ * ```
+ */
+export const Text = React.forwardRef(function Text({ as = "p", size, tone, weight, truncate, tabular, asChild, className, style, title, children, ...props }, ref) {
+    const Comp = (asChild ? Slot.Root : as);
+    const lines = typeof truncate === "number" && truncate > 1 ? truncate : undefined;
+    const autoTitle = truncate && title === undefined && (typeof children === "string" || typeof children === "number") ? String(children) : title;
+    return (_jsx(Comp, { ref: ref, "data-slot": "text", title: autoTitle, className: cn(textVariants({ size, tone, weight }), as === "p" && !truncate && "text-pretty", (truncate === true || truncate === 1) && "truncate", lines && "overflow-hidden [display:-webkit-box] [-webkit-box-orient:vertical]", tabular && "tabular", className), style: lines ? { ...style, WebkitLineClamp: lines } : style, ...props, children: children }));
+});
+/** The opening paragraph under a page or article title. */
+export const Lead = React.forwardRef(function Lead({ className, ...props }, ref) {
+    return _jsx("p", { ref: ref, "data-slot": "lead", className: cn("text-pretty text-[length:var(--text-lead)] leading-[1.5] text-fg-muted", className), ...props });
+});
+/** Inline code: `slug`, `npm run build`, a field key. */
+export const Code = React.forwardRef(function Code({ className, ...props }, ref) {
+    return (_jsx("code", { ref: ref, "data-slot": "code", className: cn("rounded-[5px] border border-line bg-selected px-[0.36em] py-[0.08em] font-mono text-[0.86em] text-fg [overflow-wrap:anywhere]", className), ...props }));
+});
+/** A pulled quote or testimonial, set in the heading face. */
+export const Blockquote = React.forwardRef(function Blockquote({ attribution, className, children, ...props }, ref) {
+    return (_jsxs("figure", { "data-slot": "blockquote", className: cn("grid gap-2.5 border-s-2 border-accent-ink ps-5", className), children: [_jsx("blockquote", { ref: ref, className: "font-display text-[length:calc(22px*var(--display-scale))] leading-[1.4] text-fg [&_em]:[font-style:var(--display-em)]", ...props, children: children }), attribution ? _jsx("figcaption", { className: "text-[13px] text-fg-subtle", children: attribution }) : null] }));
+});
+/**
+ * Numbers that line up: tabular figures, no wrapping. Format the value first (`useFormat()` or
+ * `createFormatter` from `@vamos-ui/react/format`), then render it here.
+ *
+ * ```tsx
+ * <Numeric>{f.currency("1250.50")}</Numeric>
+ * <Numeric signOf={-4.2}>−4.2%</Numeric>
+ * ```
+ */
+export const Numeric = React.forwardRef(function Numeric({ mono, signOf, className, ...props }, ref) {
+    return (_jsx("span", { ref: ref, "data-slot": "numeric", className: cn("tabular whitespace-nowrap", mono && "font-mono text-[0.94em]", signOf !== undefined && (signOf < 0 ? "text-danger" : signOf > 0 ? "text-success" : "text-fg-muted"), className), ...props }));
+});
+/**
+ * Styles rich content you don't control element by element: an article body from the editor,
+ * a CMS page, release notes. Headings, lists, quotes, code, tables and media follow the
+ * `data-font` preset and tokens. Put long prose on a `surface` (not straight on the glass scene).
+ *
+ * ```tsx
+ * <Prose html={post.bodyHtml} />
+ * <Prose size="lg" lang="en"><h2>Opening hours</h2><p>…</p></Prose>
+ * ```
+ */
+export const Prose = React.forwardRef(function Prose({ size = "md", html, fullWidth, asChild, className, children, ...props }, ref) {
+    const Comp = asChild ? Slot.Root : "div";
+    return (_jsx(Comp, { ref: ref, "data-slot": "prose", className: cn("prose-ui", size === "sm" && "prose-ui-sm", size === "lg" && "prose-ui-lg", fullWidth && "max-w-none", className), ...(html !== undefined ? { dangerouslySetInnerHTML: { __html: html } } : { children }), ...props }));
+});
+/** Wraps a wide table inside Prose in a keyboard-scrollable region. */
+export const ProseTable = React.forwardRef(function ProseTable({ label, className, ...props }, ref) {
+    return _jsx("div", { ref: ref, role: "region", "aria-label": label, tabIndex: 0, "data-slot": "prose-table", className: cn(className), ...props });
+});

package/dist/components/user-picker.d.ts

@@ -0,0 +1,89 @@
+import * as React from "react";
+import { type AvatarStatus } from "./avatar.js";
+import { type RecordPickerMultipleProps, type RecordPickerSingleProps, type RecordSource } from "./record-picker.js";
+/** A person you can assign, mention or share with. */
+export interface PickerUser {
+    id: string;
+    name: string;
+    email?: string;
+    avatarUrl?: string | null;
+    status?: AvatarStatus;
+    /** Deactivated / left the company: dimmed, not selectable, still shown when already assigned. */
+    disabled?: boolean;
+    /** Role or department ("Account executive · Sales"). */
+    meta?: string;
+}
+/** A team or group; picking it adds its members (or the team itself). */
+export interface PickerTeam {
+    id: string;
+    name: string;
+    memberCount: number;
+}
+declare const userPickerLabels: {
+    unassigned: string;
+    assignToMe: string;
+    you: string;
+    teams: string;
+    people: string;
+    members: string;
+    assignees: string;
+    assigneesLabel: string;
+    andMore: string;
+    deactivated: string;
+    add: string;
+    search: string;
+};
+export type UserPickerLabels = typeof userPickerLabels;
+interface UserPickerBaseProps {
+    /** People: an array (searched in memory, locale-folded) or a server `RecordSource`. */
+    source: RecordSource<PickerUser> | PickerUser[];
+    /** Teams shown in their own group. */
+    teams?: RecordSource<PickerTeam> | PickerTeam[];
+    /** Resolve a picked team to people. Without it the team's id (`"team:<id>"`) is selected. */
+    getTeamMembers?: (team: PickerTeam, signal: AbortSignal) => Promise<PickerUser[]>;
+    /** Adds "Assign to me" and the "(you)" suffix. */
+    currentUserId?: string;
+    /** Field box (default), an avatar stack button (table cells, headers) or an always-open list. */
+    trigger?: "field" | "avatars" | "inline";
+    /** Avatars shown in the avatar trigger before "+N". Default 3. */
+    maxAvatars?: number;
+    /** Name of the role being assigned, for the trigger's accessible name ("Reviewers: …"). Default "Assignees". */
+    roleLabel?: string;
+    size?: "sm" | "md" | "lg";
+    placeholder?: string;
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    /** Records for the initial value when `source` is a server source. */
+    selectedRecords?: PickerUser[];
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    labels?: Partial<UserPickerLabels>;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+}
+export interface UserPickerSingleProps extends UserPickerBaseProps, Pick<RecordPickerSingleProps<PickerUser>, "value" | "defaultValue" | "onValueChange"> {
+    multiple?: false;
+}
+export interface UserPickerMultipleProps extends UserPickerBaseProps, Pick<RecordPickerMultipleProps<PickerUser>, "value" | "defaultValue" | "onValueChange" | "max"> {
+    multiple: true;
+}
+export type UserPickerProps = UserPickerSingleProps | UserPickerMultipleProps;
+/**
+ * Assign or mention people and teams: task assignee, approvers, deal owner, reviewers, shift staff,
+ * share-with. A Record picker specialised for people — avatars with presence, role line,
+ * "Assign to me", deactivated users, teams, and an avatar-stack trigger for table cells.
+ *
+ * ```tsx
+ * <Field label="Owner"><UserPicker source={people} currentUserId={me.id} value={ownerId} onValueChange={setOwnerId} /></Field>
+ * <UserPicker multiple trigger="avatars" source={people} value={assignees} onValueChange={setAssignees} aria-label="Assignees" />
+ * ```
+ */
+export declare const UserPicker: React.ForwardRefExoticComponent<UserPickerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/user-picker.js

@@ -0,0 +1,162 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Plus, UserRound, UsersRound } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useLocale } from "../lib/locale.js";
+import { compareText, highlightParts, matchText } from "../lib/text.js";
+import { itemSlots } from "../lib/variants.js";
+import { Avatar, AvatarGroup } from "./avatar.js";
+import { RecordPicker } from "./record-picker.js";
+const userPickerLabels = {
+    unassigned: "Unassigned",
+    assignToMe: "Assign to me",
+    you: "you",
+    teams: "Teams",
+    people: "People",
+    members: "{count, plural, one {# member} other {# members}}",
+    assignees: "{label}: {names}",
+    assigneesLabel: "Assignees",
+    andMore: "{names} and {count} more",
+    deactivated: "Deactivated",
+    add: "Assign",
+    search: "Search people…",
+};
+const TEAM_PREFIX = "team:";
+// RecordPicker caches results per `source.key` for the session, so every array needs its own key:
+// with a shared "users" key, two pickers on one page showed each other's people.
+const arrayKeys = new WeakMap();
+let arrayKeySeq = 0;
+function keyForArray(prefix, input) {
+    let key = arrayKeys.get(input);
+    if (!key)
+        arrayKeys.set(input, (key = `${prefix}#${++arrayKeySeq}`));
+    return key;
+}
+function toSource(key, input, getId, getText, sortBy) {
+    if (!Array.isArray(input))
+        return input;
+    return {
+        key: keyForArray(key, input),
+        getId,
+        getLabel: sortBy,
+        async search(q, { locale }) {
+            const cmp = compareText(locale);
+            const items = (q.trim() ? input.filter((x) => matchText(getText(x), q, locale)) : input).slice().sort((a, b) => cmp(sortBy(a), sortBy(b)));
+            return { items };
+        },
+        async getByIds(ids) {
+            const set = new Set(ids);
+            return input.filter((x) => set.has(getId(x)));
+        },
+    };
+}
+function Bold({ text, query, locale }) {
+    if (!query.trim())
+        return _jsx(_Fragment, { children: text });
+    return (_jsx(_Fragment, { children: highlightParts(text, query, locale).map((p, i) => p.match ? (_jsx("mark", { className: "bg-transparent font-semibold text-fg", children: p.text }, i)) : (_jsx(React.Fragment, { children: p.text }, i))) }));
+}
+/**
+ * Assign or mention people and teams: task assignee, approvers, deal owner, reviewers, shift staff,
+ * share-with. A Record picker specialised for people — avatars with presence, role line,
+ * "Assign to me", deactivated users, teams, and an avatar-stack trigger for table cells.
+ *
+ * ```tsx
+ * <Field label="Owner"><UserPicker source={people} currentUserId={me.id} value={ownerId} onValueChange={setOwnerId} /></Field>
+ * <UserPicker multiple trigger="avatars" source={people} value={assignees} onValueChange={setAssignees} aria-label="Assignees" />
+ * ```
+ */
+export const UserPicker = React.forwardRef(function UserPicker(props, ref) {
+    const { source, teams, getTeamMembers, currentUserId, trigger = "field", maxAvatars = 3, roleLabel, labels, selectedRecords, ...rest } = props;
+    const t = useLabels("userPicker", userPickerLabels, labels);
+    const { locale } = useLocale();
+    const people = React.useMemo(() => toSource("users", source, (u) => u.id, (u) => [u.name, u.email ?? "", u.meta ?? ""].join(" "), (u) => u.name), [source]);
+    const teamSource = React.useMemo(() => (teams ? toSource("teams", teams, (x) => x.id, (x) => x.name, (x) => x.name) : undefined), [teams]);
+    // One combined source: people, then teams (prefixed ids) in their own group.
+    const combined = React.useMemo(() => ({
+        key: `${people.key}${teamSource ? `+${teamSource.key}` : ""}`,
+        getId: (r) => (r.kind === "team" ? `${TEAM_PREFIX}${r.id}` : r.id),
+        getLabel: (r) => r.name,
+        getDescription: (r) => (r.kind === "team" ? undefined : (r.meta ?? r.email)),
+        getAvatar: (r) => ({ name: r.name, src: r.avatarUrl, shape: r.kind === "team" ? "square" : "circle" }),
+        async search(q, ctx) {
+            const [p, tm] = await Promise.all([people.search(q, ctx), teamSource && !ctx.cursor ? teamSource.search(q, { ...ctx, cursor: undefined }) : Promise.resolve({ items: [] })]);
+            const teamRows = tm.items.map((x) => ({ id: x.id, name: x.name, kind: "team", memberCount: x.memberCount }));
+            return { items: [...p.items, ...teamRows], nextCursor: p.nextCursor };
+        },
+        getByIds: people.getByIds
+            ? async (ids, signal) => {
+                const userIds = ids.filter((id) => !id.startsWith(TEAM_PREFIX));
+                const teamIds = ids.filter((id) => id.startsWith(TEAM_PREFIX)).map((id) => id.slice(TEAM_PREFIX.length));
+                const [u, tm] = await Promise.all([
+                    userIds.length ? people.getByIds(userIds, signal) : Promise.resolve([]),
+                    teamIds.length && teamSource?.getByIds ? teamSource.getByIds(teamIds, signal) : Promise.resolve([]),
+                ]);
+                return [...u, ...tm.map((x) => ({ id: x.id, name: x.name, kind: "team", memberCount: x.memberCount }))];
+            }
+            : undefined,
+    }), [people, teamSource]);
+    const me = React.useCallback((u) => (currentUserId && u.id === currentUserId ? `${u.name} (${t("you")})` : u.name), [currentUserId, t]);
+    const actions = React.useMemo(() => {
+        if (!currentUserId)
+            return [];
+        return [
+            {
+                id: "me",
+                label: t("assignToMe"),
+                icon: _jsx(UserRound, { "aria-hidden": true }),
+                onSelect: async ({ select }) => {
+                    const ctrl = new AbortController();
+                    const found = (await combined.getByIds?.([currentUserId], ctrl.signal))?.[0];
+                    if (found)
+                        select(found);
+                },
+            },
+        ];
+    }, [combined, currentUserId, t]);
+    const renderItem = (r, s) => {
+        if (r.kind === "team") {
+            return (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "inline-flex size-6 shrink-0 items-center justify-center rounded-[28%] bg-selected text-fg-muted [&_svg]:size-3.5", children: _jsx(UsersRound, {}) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: _jsx(Bold, { text: r.name, query: s.query, locale: locale }) }), _jsx("span", { className: itemSlots.shortcut, children: t("members", { count: r.memberCount ?? 0 }) })] }));
+        }
+        const isMe = currentUserId === r.id;
+        return (_jsxs(_Fragment, { children: [_jsx(Avatar, { name: r.name, src: r.avatarUrl, status: r.status, size: "sm", "aria-hidden": true }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "block truncate", children: [_jsx(Bold, { text: r.name, query: s.query, locale: locale }), isMe ? _jsxs(_Fragment, { children: [" ", _jsxs("span", { className: "text-fg-subtle", children: ["(", t("you"), ")"] })] }) : null] }), r.disabled ? (_jsx("span", { className: itemSlots.description, children: t("deactivated") })) : r.meta || r.email ? (_jsx("span", { className: cn(itemSlots.description, "truncate"), children: _jsx(Bold, { text: r.meta ?? r.email ?? "", query: s.query, locale: locale }) })) : null] })] }));
+    };
+    const resolveSelection = React.useCallback(async (r) => {
+        if (r.kind !== "team" || !getTeamMembers)
+            return r;
+        const members = await getTeamMembers({ id: r.id, name: r.name, memberCount: r.memberCount ?? 0 }, new AbortController().signal);
+        return members.filter((m) => !m.disabled);
+    }, [getTeamMembers]);
+    const shared = {
+        ...rest,
+        source: combined,
+        renderItem,
+        actions,
+        selectedRecords: selectedRecords,
+        getDisabled: (r) => Boolean(r.disabled),
+        getGroup: (r) => (teamSource ? (r.kind === "team" ? t("teams") : t("people")) : undefined),
+        resolveSelection,
+        recent: false,
+        searchPlaceholder: t("search"),
+        placeholder: rest.placeholder ?? (props.multiple ? t("add") : t("unassigned")),
+        mode: trigger === "inline" ? "inline" : "popover",
+    };
+    const renderTrigger = trigger === "avatars"
+        ? ({ selected, disabled }) => {
+            const names = selected.map((u) => me(u));
+            const shown = names.slice(0, 2).join(", ");
+            const list = names.length > 2 ? t("andMore", { names: shown, count: names.length - 2 }) : shown || t("unassigned");
+            return (_jsx(AvatarsTrigger, { "aria-label": rest["aria-label"] ? `${rest["aria-label"]}: ${list}` : t("assignees", { label: roleLabel ?? t("assigneesLabel"), names: list }), disabled: disabled, selected: selected, max: maxAvatars, size: props.size }));
+        }
+        : undefined;
+    if (props.multiple) {
+        return _jsx(RecordPicker, { ref: ref, ...shared, source: combined, multiple: true, renderTrigger: renderTrigger });
+    }
+    return _jsx(RecordPicker, { ref: ref, ...shared, source: combined, multiple: false, renderTrigger: renderTrigger });
+});
+/** Avatar stack + "+" — the compact trigger for table cells and record headers. */
+const AvatarsTrigger = React.forwardRef(function AvatarsTrigger({ selected, max, size = "md", className, "aria-label": label, ...props }, ref) {
+    const avatarSize = size === "sm" ? "xs" : size === "lg" ? "md" : "sm";
+    return (_jsxs("button", { ref: ref, type: "button", "data-slot": "user-picker-avatars", className: cn("group/avatars inline-flex items-center gap-1 rounded-full p-0.5 pe-1 outline-none transition-colors hover:bg-hover focus-ring disabled:pointer-events-none disabled:opacity-50", className), ...props, children: [label ? _jsx("span", { className: "sr-only", children: label }) : null, selected.length ? (_jsx(AvatarGroup, { max: max, size: avatarSize, "aria-hidden": true, children: selected.map((u) => (_jsx(Avatar, { name: u.name, src: u.avatarUrl }, u.id))) })) : null, _jsx("span", { "aria-hidden": true, className: cn("inline-flex items-center justify-center rounded-full border border-dashed border-field-border-hover text-fg-subtle transition-colors group-hover/avatars:border-fg-subtle group-hover/avatars:text-fg", avatarSize === "xs" ? "size-5 [&_svg]:size-3" : avatarSize === "sm" ? "size-6 [&_svg]:size-3.5" : "size-8 [&_svg]:size-4"), children: _jsx(Plus, {}) })] }));
+});

package/dist/components/version-history.d.ts

@@ -0,0 +1,191 @@
+import * as React from "react";
+import { type ValueFormat } from "../lib/value-format.js";
+export declare const versionHistoryLabels: {
+    versions: string;
+    current: string;
+    autosave: string;
+    published: string;
+    manual: string;
+    system: string;
+    before: string;
+    after: string;
+    comparing: string;
+    split: string;
+    unified: string;
+    viewMode: string;
+    onlyChanges: string;
+    identical: string;
+    identicalHint: string;
+    loading: string;
+    loadError: string;
+    retry: string;
+    added: string;
+    removed: string;
+    changed: string;
+    unchanged: string;
+    addedLine: string;
+    removedLine: string;
+    stats: string;
+    prevChange: string;
+    nextChange: string;
+    changeOf: string;
+    unchangedLines: string;
+    expandAll: string;
+    diffRegion: string;
+    field: string;
+    restore: string;
+    restoreTitle: string;
+    restoreBody: string;
+    restoreConfirm: string;
+    restored: string;
+    restoreError: string;
+    yes: string;
+    no: string;
+    empty: string;
+    selectHint: string;
+};
+export type VersionHistoryLabels = Partial<typeof versionHistoryLabels>;
+export type DiffGranularity = "line" | "word" | "char";
+type SegKind = "same" | "add" | "del";
+interface Seg {
+    text: string;
+    kind: SegKind;
+}
+export interface DiffLine {
+    type: SegKind;
+    text: string;
+    oldNo?: number;
+    newNo?: number;
+    /** Word / char highlights inside a changed line. */
+    segments?: Seg[];
+}
+/** Line diff with optional word / char highlights inside changed lines (jsdiff). */
+export declare function diffText(before: string, after: string, granularity?: DiffGranularity): DiffLine[];
+export interface DiffViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    before: string;
+    after: string;
+    /** Highlight changes inside lines by word (default), char, or not at all (`"line"`). */
+    granularity?: DiffGranularity;
+    /** `unified` (default) or `split` (before at the start side, after at the end). */
+    mode?: "split" | "unified";
+    /** Unchanged lines kept around each change; longer runs collapse behind "Show N unchanged lines". Default 3. `Infinity` shows all. */
+    context?: number;
+    /** Column / region names ("v12 · Nov 8", "Current"). */
+    beforeLabel?: string;
+    afterLabel?: string;
+    /** Line number gutters. Default `true`. */
+    lineNumbers?: boolean;
+    /** Previous / next change buttons and the +/− summary. Default `true`. */
+    toolbar?: boolean;
+    /** Extra toolbar content (mode switch, restore). */
+    actions?: React.ReactNode;
+    /** Wrap long lines (prose) instead of scrolling (code). Default `true`. */
+    wrap?: boolean;
+    labels?: VersionHistoryLabels;
+}
+/**
+ * Text diff of two versions — line diff with word-level highlights (jsdiff), unified or
+ * side by side, with collapsed unchanged runs and change navigation (buttons and `n` / `p`).
+ * Colour is never the only signal: `+` / `−` gutters, `<ins>` / `<del>` and screen-reader text.
+ *
+ * ```tsx
+ * <DiffView before={v11.body} after={v12.body} mode="split" beforeLabel="v11" afterLabel="v12" />
+ * ```
+ */
+export declare const DiffView: React.ForwardRefExoticComponent<DiffViewProps & React.RefAttributes<HTMLDivElement>>;
+export interface FieldDiffField {
+    key: string;
+    label: string;
+    /** Number / date / money formatting of the value. */
+    format?: ValueFormat;
+    /** `"text-long"` renders a word diff (descriptions, notes). */
+    type?: "text" | "text-long" | "boolean" | "list" | "json";
+    /** Custom value renderer. */
+    render?: (value: unknown) => React.ReactNode;
+}
+export type FieldChange = "added" | "removed" | "changed" | "same";
+export interface RecordDiffEntry {
+    key: string;
+    change: FieldChange;
+    before?: unknown;
+    after?: unknown;
+}
+/** Field-by-field comparison of two records. Pass `fields` to pick and order keys; default: every key of both. */
+export declare function diffRecords(a: Record<string, unknown> | null | undefined, b: Record<string, unknown> | null | undefined, fields?: Array<{
+    key: string;
+}> | string[]): RecordDiffEntry[];
+export interface FieldDiffProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    before: Record<string, unknown> | null | undefined;
+    after: Record<string, unknown> | null | undefined;
+    /** Fields to compare, in order. Default: every key, humanized labels. */
+    fields?: FieldDiffField[];
+    /** Hide unchanged fields. Default `true`. */
+    onlyChanges?: boolean;
+    beforeLabel?: string;
+    afterLabel?: string;
+    labels?: VersionHistoryLabels;
+}
+/**
+ * Record changes field by field — price, status, owner, permissions. Before is struck through,
+ * after is marked; long text fields get a word diff.
+ *
+ * ```tsx
+ * <FieldDiff before={v1} after={v2} fields={[
+ *   { key: "amount", label: "Amount", format: "currency" },
+ *   { key: "stage", label: "Stage" },
+ * ]} />
+ * ```
+ */
+export declare const FieldDiff: React.ForwardRefExoticComponent<FieldDiffProps & React.RefAttributes<HTMLDivElement>>;
+export interface Version {
+    id: string;
+    /** ISO instant. */
+    createdAt: string;
+    author?: {
+        name: string;
+        avatar?: string;
+    };
+    /** "v12 · Pricing update". Default: the date. */
+    label?: string;
+    /** Default `"manual"`. */
+    kind?: "manual" | "autosave" | "published" | "system";
+    current?: boolean;
+    /** Short note ("Changed hero copy and pricing"). */
+    summary?: string;
+}
+export type VersionContent = string | Record<string, unknown>;
+export interface VersionHistoryProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    versions: Version[];
+    /** Pair to compare (any order; older is "before"). Default: the newest non-current version vs current. */
+    compare?: [string, string];
+    defaultCompare?: [string, string];
+    onCompareChange?: (pair: [string, string]) => void;
+    /** Content of a version: text (DiffView) or a record (FieldDiff). Cached per id. */
+    loadVersion: (id: string) => VersionContent | Promise<VersionContent>;
+    /** Record versions: which fields to compare. */
+    fields?: FieldDiffField[];
+    /** Shows "Restore this version" (with confirmation) for the older selected version. */
+    onRestore?: (id: string) => void | Promise<void>;
+    /** `page` (list beside the diff) or `panel` (stacked, for a Sheet). Default `"page"`. */
+    layout?: "panel" | "page";
+    /** Text diff layout. Uncontrolled; default `"unified"` (`"split"` on `page` layout). */
+    defaultMode?: "split" | "unified";
+    granularity?: DiffGranularity;
+    /** Collapsed context lines (DiffView). Default 3. */
+    context?: number;
+    labels?: VersionHistoryLabels;
+}
+/**
+ * Revisions of a record: pick two (listbox with two-selection), see what changed — text with
+ * word highlights or record fields — and restore an older one after confirmation.
+ *
+ * ```tsx
+ * <VersionHistory
+ *   versions={revisions}
+ *   loadVersion={(id) => api.revision(id).then((r) => r.body)}
+ *   onRestore={(id) => api.restore(postId, id)}
+ * />
+ * ```
+ */
+export declare const VersionHistory: React.ForwardRefExoticComponent<VersionHistoryProps & React.RefAttributes<HTMLDivElement>>;
+export {};