@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/components/version-history.js

@@ -0,0 +1,431 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { diffChars, diffLines, diffWordsWithSpace } from "diff";
+import { ArrowDown, ArrowUp, ChevronsUpDown, History, RotateCcw } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useFormat } from "../lib/locale.js";
+import { formatValue } from "../lib/value-format.js";
+import { ConfirmDialog } from "./alert-dialog.js";
+import { Avatar } from "./avatar.js";
+import { Badge } from "./badge.js";
+import { Button, IconButton } from "./button.js";
+import { Skeleton } from "./skeleton.js";
+import { toast } from "./toast.js";
+import { ToggleGroup, ToggleGroupItem } from "./toggle.js";
+export const versionHistoryLabels = {
+    versions: "Versions",
+    current: "Current",
+    autosave: "Autosave",
+    published: "Published",
+    manual: "Saved",
+    system: "System",
+    before: "Before",
+    after: "After",
+    comparing: "Comparing {before} with {after}",
+    split: "Split",
+    unified: "Unified",
+    viewMode: "Diff layout",
+    onlyChanges: "Only changes",
+    identical: "These versions are identical",
+    identicalHint: "Pick another version from the list to compare.",
+    loading: "Loading versions…",
+    loadError: "Couldn't load this version.",
+    retry: "Try again",
+    added: "Added",
+    removed: "Removed",
+    changed: "Changed",
+    unchanged: "Unchanged",
+    addedLine: "Added line",
+    removedLine: "Removed line",
+    stats: "{added} additions, {removed} deletions",
+    prevChange: "Previous change",
+    nextChange: "Next change",
+    changeOf: "Change {index} of {total}",
+    unchangedLines: "{count, plural, one {Show # unchanged line} other {Show # unchanged lines}}",
+    expandAll: "Expand all",
+    diffRegion: "Differences between {before} and {after}",
+    field: "Field",
+    restore: "Restore this version",
+    restoreTitle: "Restore the version from {date}?",
+    restoreBody: "The current content is kept as a version too, so you can undo this.",
+    restoreConfirm: "Restore",
+    restored: "Version restored",
+    restoreError: "Couldn't restore the version",
+    yes: "Yes",
+    no: "No",
+    empty: "—",
+    selectHint: "Select two versions to compare.",
+};
+function splitLines(v) {
+    const lines = v.split("\n");
+    if (lines.length > 1 && lines[lines.length - 1] === "")
+        lines.pop();
+    return lines;
+}
+function inline(a, b, g) {
+    const parts = g === "char" ? diffChars(a, b) : diffWordsWithSpace(a, b);
+    const left = [];
+    const right = [];
+    for (const p of parts) {
+        if (p.added)
+            right.push({ text: p.value, kind: "add" });
+        else if (p.removed)
+            left.push({ text: p.value, kind: "del" });
+        else {
+            left.push({ text: p.value, kind: "same" });
+            right.push({ text: p.value, kind: "same" });
+        }
+    }
+    return [left, right];
+}
+/** Line diff with optional word / char highlights inside changed lines (jsdiff). */
+export function diffText(before, after, granularity = "word") {
+    const changes = diffLines(before, after);
+    const out = [];
+    let o = 1;
+    let n = 1;
+    for (let i = 0; i < changes.length; i++) {
+        const c = changes[i];
+        if (!c.added && !c.removed) {
+            for (const text of splitLines(c.value))
+                out.push({ type: "same", text, oldNo: o++, newNo: n++ });
+            continue;
+        }
+        if (c.removed) {
+            const dels = splitLines(c.value);
+            const next = changes[i + 1];
+            const adds = next?.added ? splitLines(next.value) : [];
+            if (next?.added)
+                i++;
+            const delLines = dels.map((text) => ({ type: "del", text, oldNo: o++ }));
+            const addLines = adds.map((text) => ({ type: "add", text, newNo: n++ }));
+            if (granularity !== "line") {
+                for (let k = 0; k < Math.min(dels.length, adds.length); k++) {
+                    const [l, r] = inline(dels[k], adds[k], granularity);
+                    delLines[k].segments = l;
+                    addLines[k].segments = r;
+                }
+            }
+            out.push(...delLines, ...addLines);
+            continue;
+        }
+        for (const text of splitLines(c.value))
+            out.push({ type: "add", text, newNo: n++ });
+    }
+    return out;
+}
+function collapse(lines, isChange, context, open) {
+    const keep = lines.map(() => false);
+    lines.forEach((l, i) => {
+        if (!isChange(l))
+            return;
+        for (let k = Math.max(0, i - context); k <= Math.min(lines.length - 1, i + context); k++)
+            keep[k] = true;
+    });
+    const rows = [];
+    let i = 0;
+    while (i < lines.length) {
+        if (keep[i] || open.has(i)) {
+            rows.push({ kind: "line", line: lines[i], change: isChange(lines[i]) });
+            i++;
+            continue;
+        }
+        let j = i;
+        while (j < lines.length && !keep[j])
+            j++;
+        if (j - i <= 2) {
+            for (let k = i; k < j; k++)
+                rows.push({ kind: "line", line: lines[k], change: false });
+        }
+        else
+            rows.push({ kind: "gap", id: i, count: j - i });
+        i = j;
+    }
+    return rows;
+}
+function Segments({ line }) {
+    if (!line.segments) {
+        if (line.type === "add")
+            return _jsx("ins", { className: "ui-diff-text", children: line.text || " " });
+        if (line.type === "del")
+            return _jsx("del", { className: "ui-diff-text", children: line.text || " " });
+        return _jsx("span", { className: "ui-diff-text", children: line.text || " " });
+    }
+    return (_jsx("span", { className: "ui-diff-text", children: line.segments.map((s, i) => s.kind === "add" ? (_jsx("ins", { "data-word": "", children: s.text }, i)) : s.kind === "del" ? (_jsx("del", { "data-word": "", children: s.text }, i)) : (_jsx("span", { children: s.text }, i))) }));
+}
+/**
+ * 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 const DiffView = React.forwardRef(function DiffView({ before, after, granularity = "word", mode = "unified", context = 3, beforeLabel, afterLabel, lineNumbers = true, toolbar = true, actions, wrap = true, labels, className, ...props }, ref) {
+    const t = useLabels("versionHistory", versionHistoryLabels, labels);
+    const f = useFormat();
+    const lines = React.useMemo(() => diffText(before, after, granularity), [before, after, granularity]);
+    const [open, setOpen] = React.useState(() => new Set());
+    const [current, setCurrent] = React.useState(-1);
+    const bodyRef = React.useRef(null);
+    const added = lines.filter((l) => l.type === "add").length;
+    const removed = lines.filter((l) => l.type === "del").length;
+    const bLabel = beforeLabel ?? t("before");
+    const aLabel = afterLabel ?? t("after");
+    React.useEffect(() => {
+        setOpen(new Set());
+        setCurrent(-1);
+    }, [before, after]);
+    const pairs = React.useMemo(() => {
+        const out = [];
+        let i = 0;
+        while (i < lines.length) {
+            const l = lines[i];
+            if (l.type === "same") {
+                out.push({ left: l, right: l, idx: i });
+                i++;
+                continue;
+            }
+            const dels = [];
+            const adds = [];
+            const start = i;
+            while (i < lines.length && lines[i].type === "del")
+                dels.push(lines[i++]);
+            while (i < lines.length && lines[i].type === "add")
+                adds.push(lines[i++]);
+            for (let k = 0; k < Math.max(dels.length, adds.length); k++)
+                out.push({ left: dels[k], right: adds[k], idx: start + k });
+        }
+        return out;
+    }, [lines]);
+    const rows = React.useMemo(() => mode === "split"
+        ? collapse(pairs, (p) => p.left?.type !== "same" || p.right?.type !== "same", context, open)
+        : collapse(lines, (l) => l.type !== "same", context, open), [mode, pairs, lines, context, open]);
+    // Change blocks: first row of each contiguous run of changed rows.
+    const blocks = React.useMemo(() => {
+        const out = [];
+        rows.forEach((r, i) => {
+            if (r.kind === "line" && r.change && !(rows[i - 1]?.kind === "line" && rows[i - 1].change))
+                out.push(i);
+        });
+        return out;
+    }, [rows]);
+    const go = (dir) => {
+        if (!blocks.length)
+            return;
+        const next = current < 0 ? (dir === 1 ? 0 : blocks.length - 1) : (current + dir + blocks.length) % blocks.length;
+        setCurrent(next);
+        const el = bodyRef.current?.querySelector(`[data-row="${blocks[next]}"]`);
+        el?.scrollIntoView({ block: "center", behavior: window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth" });
+    };
+    const expand = (id, count) => setOpen((s) => {
+        const n = new Set(s);
+        for (let k = id; k < id + count; k++)
+            n.add(k);
+        return n;
+    });
+    const identical = added === 0 && removed === 0;
+    const gaps = rows.filter((r) => r.kind === "gap");
+    const gapRow = (r, i) => (_jsx("div", { "data-row": i, className: "ui-diff-gap", children: _jsxs("button", { type: "button", onClick: () => expand(r.id, r.count), className: "focus-ring", children: [_jsx(ChevronsUpDown, { "aria-hidden": true, className: "size-3.5" }), t("unchangedLines", { count: r.count })] }) }, `g${r.id}`));
+    const gutter = (no) => (lineNumbers ? _jsx("span", { className: "ui-diff-no", "aria-hidden": true, children: no ?? "" }) : null);
+    const marker = (type) => (_jsx("span", { className: "ui-diff-marker", "aria-hidden": true, children: type === "add" ? "+" : type === "del" ? "−" : "" }));
+    const sr = (type) => (type === "add" ? _jsxs("span", { className: "sr-only", children: [t("addedLine"), ": "] }) : type === "del" ? _jsxs("span", { className: "sr-only", children: [t("removedLine"), ": "] }) : null);
+    return (_jsxs("div", { ref: ref, "data-slot": "diff-view", "data-mode": mode, "data-wrap": wrap ? "" : undefined, "data-numbers": lineNumbers ? "" : undefined, className: cn("ui-diff overflow-hidden rounded-ui border border-line bg-surface-2", className), ...props, children: [toolbar ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-line px-2.5 py-1.5", children: [_jsxs("span", { className: "font-mono text-xs tabular", children: [_jsxs("span", { "aria-hidden": true, children: [_jsxs("span", { className: "text-success", children: ["+", f.number(added)] }), " ", _jsxs("span", { className: "text-danger", children: ["\u2212", f.number(removed)] })] }), _jsx("span", { className: "sr-only", children: t("stats", { added: f.number(added), removed: f.number(removed) }) })] }), blocks.length > 0 ? (_jsx("span", { className: "text-xs text-fg-subtle tabular", "aria-live": "polite", children: current >= 0 ? t("changeOf", { index: current + 1, total: blocks.length }) : null })) : null, _jsxs("span", { className: "ms-auto flex items-center gap-1", children: [actions, gaps.length > 1 ? (_jsx(Button, { size: "xs", variant: "ghost", onClick: () => expand(0, lines.length), children: t("expandAll") })) : null, _jsx(IconButton, { label: t("prevChange"), shortcut: "p", size: "xs", tooltip: false, disabled: !blocks.length, onClick: () => go(-1), children: _jsx(ArrowUp, {}) }), _jsx(IconButton, { label: t("nextChange"), shortcut: "n", size: "xs", tooltip: false, disabled: !blocks.length, onClick: () => go(1), children: _jsx(ArrowDown, {}) })] })] })) : null, identical ? (_jsx("p", { className: "px-4 py-6 text-center text-sm text-fg-muted", children: t("identical") })) : (_jsx("div", { ref: bodyRef, role: "region", tabIndex: 0, "aria-label": t("diffRegion", { before: bLabel, after: aLabel }), onKeyDown: (e) => {
+                    if (e.metaKey || e.ctrlKey || e.altKey)
+                        return;
+                    if (e.key === "n" || e.key === "j") {
+                        e.preventDefault();
+                        go(1);
+                    }
+                    else if (e.key === "p" || e.key === "k") {
+                        e.preventDefault();
+                        go(-1);
+                    }
+                }, className: "ui-diff-body focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)", children: mode === "split" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "ui-diff-split ui-diff-head", "aria-hidden": true, children: [_jsx("span", { children: bLabel }), _jsx("span", { children: aLabel })] }), rows.map((r, i) => r.kind === "gap" ? (gapRow(r, i)) : (_jsxs("div", { "data-row": i, "data-current": blocks[current] === i ? "" : undefined, className: "ui-diff-split", children: [_jsxs("div", { className: "ui-diff-line", "data-type": r.line.left?.type ?? "empty", dir: "auto", children: [gutter(r.line.left?.oldNo), marker(r.line.left?.type === "same" ? undefined : r.line.left?.type), r.line.left ? (_jsxs(_Fragment, { children: [r.line.left.type !== "same" ? sr(r.line.left.type) : null, _jsx(Segments, { line: r.line.left })] })) : null] }), _jsxs("div", { className: "ui-diff-line", "data-type": r.line.right?.type ?? "empty", dir: "auto", children: [gutter(r.line.right?.newNo), marker(r.line.right?.type === "same" ? undefined : r.line.right?.type), r.line.right && r.line.right.type !== "same" ? sr(r.line.right.type) : null, r.line.right ? r.line.right.type === "same" ? _jsx("span", { className: "ui-diff-text", "aria-hidden": true, children: r.line.right.text || " " }) : _jsx(Segments, { line: r.line.right }) : null] })] }, r.line.idx + (r.line.left?.type ?? "") + (r.line.right?.type ?? ""))))] })) : (rows.map((r, i) => r.kind === "gap" ? (gapRow(r, i)) : (_jsxs("div", { "data-row": i, "data-current": blocks[current] === i ? "" : undefined, className: "ui-diff-line", "data-type": r.line.type, dir: "auto", children: [gutter(r.line.oldNo), gutter(r.line.newNo), marker(r.line.type), sr(r.line.type), _jsx(Segments, { line: r.line })] }, `${r.line.type}${r.line.oldNo ?? ""}-${r.line.newNo ?? ""}`)))) }))] }));
+});
+const isEmpty = (v) => v === undefined || v === null || v === "" || (Array.isArray(v) && v.length === 0);
+const same = (a, b) => (typeof a === "object" || typeof b === "object" ? JSON.stringify(a) === JSON.stringify(b) : a === b);
+/** Field-by-field comparison of two records. Pass `fields` to pick and order keys; default: every key of both. */
+export function diffRecords(a, b, fields) {
+    const before = a ?? {};
+    const after = b ?? {};
+    const keys = fields ? fields.map((f) => (typeof f === "string" ? f : f.key)) : Array.from(new Set([...Object.keys(before), ...Object.keys(after)]));
+    return keys.map((key) => {
+        const x = before[key];
+        const y = after[key];
+        const change = isEmpty(x) && isEmpty(y) ? "same" : isEmpty(x) ? "added" : isEmpty(y) ? "removed" : same(x, y) ? "same" : "changed";
+        return { key, change, before: x, after: y };
+    });
+}
+function humanize(key) {
+    const s = key.replace(/[_.-]+/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").trim();
+    return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
+}
+/**
+ * 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 const FieldDiff = React.forwardRef(function FieldDiff({ before, after, fields, onlyChanges = true, beforeLabel, afterLabel, labels, className, ...props }, ref) {
+    const t = useLabels("versionHistory", versionHistoryLabels, labels);
+    const f = useFormat();
+    const defs = fields ?? diffRecords(before, after).map((d) => ({ key: d.key, label: humanize(d.key) }));
+    const entries = diffRecords(before, after, defs);
+    const rows = entries.map((e, i) => ({ e, def: defs[i] })).filter((r) => !onlyChanges || r.e.change !== "same");
+    const show = (def, v) => {
+        if (isEmpty(v))
+            return _jsx("span", { className: "text-fg-subtle", children: t("empty") });
+        if (def.render)
+            return def.render(v);
+        if (typeof v === "boolean" || def.type === "boolean")
+            return v ? t("yes") : t("no");
+        if (Array.isArray(v) || def.type === "list")
+            return (Array.isArray(v) ? v : [v]).map(String).join(", ");
+        if (typeof v === "object" || def.type === "json")
+            return _jsx("code", { className: "font-mono text-[12px]", children: JSON.stringify(v) });
+        if (def.format && (typeof v === "number" || typeof v === "string"))
+            return formatValue(f, v, def.format);
+        return String(v);
+    };
+    if (rows.length === 0) {
+        return (_jsx("div", { ref: ref, "data-slot": "field-diff", className: cn("rounded-ui border border-line bg-surface-2 px-4 py-5 text-center text-sm text-fg-muted", className), ...props, children: t("identical") }));
+    }
+    const toneOf = { added: "success", removed: "danger", changed: "warning", same: "neutral" };
+    return (_jsx("div", { ref: ref, "data-slot": "field-diff", className: cn("overflow-x-auto rounded-ui border border-line bg-surface-2", className), ...props, children: _jsxs("table", { className: "ui-field-diff w-full border-collapse text-[13px]", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: t("field") }), _jsx("th", { scope: "col", children: beforeLabel ?? t("before") }), _jsx("th", { scope: "col", children: afterLabel ?? t("after") })] }) }), _jsx("tbody", { children: rows.map(({ e, def }) => (_jsxs("tr", { "data-change": e.change, children: [_jsx("th", { scope: "row", children: _jsxs("span", { className: "flex flex-wrap items-center gap-1.5", children: [def.label, e.change !== "same" ? (_jsx(Badge, { size: "sm", tone: toneOf[e.change], className: "font-normal", children: t(e.change) })) : null] }) }), def.type === "text-long" && e.change === "changed" ? (_jsx("td", { colSpan: 2, children: _jsx(DiffView, { before: String(e.before ?? ""), after: String(e.after ?? ""), toolbar: false, lineNumbers: false, context: Infinity, className: "border-0 bg-transparent", labels: labels }) })) : (_jsxs(_Fragment, { children: [_jsx("td", { dir: "auto", children: e.change === "same" ? show(def, e.before) : e.change === "added" ? show(def, e.before) : _jsx("del", { children: show(def, e.before) }) }), _jsx("td", { dir: "auto", children: e.change === "same" ? show(def, e.after) : e.change === "removed" ? show(def, e.after) : _jsx("ins", { children: show(def, e.after) }) })] }))] }, e.key))) })] }) }));
+});
+/**
+ * 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 const VersionHistory = React.forwardRef(function VersionHistory({ versions, compare, defaultCompare, onCompareChange, loadVersion, fields, onRestore, layout = "page", defaultMode, granularity = "word", context = 3, labels, className, ...props }, ref) {
+    const t = useLabels("versionHistory", versionHistoryLabels, labels);
+    const f = useFormat();
+    const sorted = React.useMemo(() => [...versions].sort((a, b) => b.createdAt.localeCompare(a.createdAt)), [versions]);
+    const currentId = sorted.find((v) => v.current)?.id ?? sorted[0]?.id;
+    const fallback = React.useMemo(() => {
+        if (!sorted.length)
+            return null;
+        const other = sorted.find((v) => v.id !== currentId);
+        return [other?.id ?? currentId, currentId];
+    }, [sorted, currentId]);
+    const [pairState, setPairState] = React.useState(defaultCompare ?? null);
+    const pair = compare ?? pairState ?? fallback;
+    const setPair = (p) => {
+        setPairState(p);
+        onCompareChange?.(p);
+    };
+    const [lastClicked, setLastClicked] = React.useState(null);
+    const [mode, setMode] = React.useState(defaultMode ?? (layout === "page" ? "split" : "unified"));
+    const [onlyChanges, setOnlyChanges] = React.useState(true);
+    const [active, setActive] = React.useState(0);
+    const [cache, setCache] = React.useState({});
+    const [errors, setErrors] = React.useState({});
+    const [confirming, setConfirming] = React.useState(false);
+    const listRef = React.useRef(null);
+    const loadRef = React.useRef(loadVersion);
+    loadRef.current = loadVersion;
+    const listId = React.useId();
+    const [older, newer] = React.useMemo(() => {
+        if (!pair)
+            return [undefined, undefined];
+        const a = sorted.find((v) => v.id === pair[0]);
+        const b = sorted.find((v) => v.id === pair[1]);
+        if (!a || !b)
+            return [a ?? b, b ?? a];
+        return a.createdAt <= b.createdAt ? [a, b] : [b, a];
+    }, [pair, sorted]);
+    const load = React.useCallback((id) => {
+        setErrors((e) => ({ ...e, [id]: false }));
+        Promise.resolve(loadRef.current(id))
+            .then((c) => setCache((m) => ({ ...m, [id]: c })))
+            .catch(() => setErrors((e) => ({ ...e, [id]: true })));
+    }, []);
+    React.useEffect(() => {
+        for (const v of [older, newer])
+            if (v && cache[v.id] === undefined && !errors[v.id])
+                load(v.id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [older?.id, newer?.id]);
+    const toggle = (id) => {
+        if (!pair)
+            return;
+        const selected = Array.from(new Set(pair));
+        if (selected.includes(id)) {
+            if (selected.length < 2)
+                return;
+            const keep = selected.find((x) => x !== id);
+            setPair([keep, keep === currentId ? keep : currentId]);
+            return;
+        }
+        const keep = lastClicked && selected.includes(lastClicked) ? lastClicked : (selected.find((x) => x === currentId) ?? selected[0]);
+        setLastClicked(id);
+        setPair([keep, id]);
+    };
+    const vLabel = (v) => (v ? (v.label ?? f.date(v.createdAt, "datetime-short")) : "");
+    const onListKey = (e) => {
+        const max = sorted.length - 1;
+        let next = active;
+        if (e.key === "ArrowDown")
+            next = Math.min(max, active + 1);
+        else if (e.key === "ArrowUp")
+            next = Math.max(0, active - 1);
+        else if (e.key === "Home")
+            next = 0;
+        else if (e.key === "End")
+            next = max;
+        else if (e.key === " " || e.key === "Enter") {
+            e.preventDefault();
+            toggle(sorted[active].id);
+            return;
+        }
+        else
+            return;
+        e.preventDefault();
+        setActive(next);
+        listRef.current?.querySelectorAll("[role=option]")[next]?.focus();
+    };
+    const kindTone = { autosave: "neutral", published: "success", system: "info", manual: "neutral" };
+    const a = older && cache[older.id];
+    const b = newer && cache[newer.id];
+    const loading = (older && a === undefined && !errors[older.id]) || (newer && b === undefined && !errors[newer.id]);
+    const failed = (older && errors[older.id]) || (newer && errors[newer.id]);
+    const isRecord = (a !== undefined && typeof a === "object") || (b !== undefined && typeof b === "object");
+    const restorable = onRestore && older && newer && older.id !== newer.id && !older.current ? older : undefined;
+    const list = (_jsx("ul", { ref: listRef, id: listId, role: "listbox", "aria-multiselectable": "true", "aria-label": t("versions"), "aria-describedby": `${listId}-hint`, onKeyDown: onListKey, className: cn("flex flex-col gap-px", layout === "panel" ? "max-h-72 overflow-y-auto" : "max-h-72 overflow-y-auto @[52rem]/vh:max-h-none"), children: sorted.map((v, i) => {
+            const selected = Boolean(pair?.includes(v.id));
+            const role = v.id === older?.id && older?.id !== newer?.id ? "before" : v.id === newer?.id ? "after" : null;
+            return (_jsxs("li", { role: "option", "aria-selected": selected, tabIndex: i === active ? 0 : -1, onClick: () => {
+                    setActive(i);
+                    toggle(v.id);
+                }, onFocus: () => setActive(i), "data-selected": selected ? "" : undefined, className: cn("group relative flex cursor-pointer items-start gap-2.5 rounded-ui-sm px-2.5 py-2 outline-none transition-colors", "hover:bg-hover focus-visible:ring-2 focus-visible:ring-(--ring) focus-visible:ring-inset", selected && "bg-selected hover:bg-selected"), children: [_jsx("span", { "aria-hidden": true, className: cn("absolute inset-y-2 start-0 w-0.5 rounded-full transition-colors", role === "after" ? "bg-accent-ink" : role === "before" ? "bg-fg-muted" : "bg-transparent") }), v.author ? _jsx(Avatar, { name: v.author.name, src: v.author.avatar, size: "sm", className: "mt-px" }) : (_jsx("span", { "aria-hidden": true, className: "mt-px inline-flex size-6 shrink-0 items-center justify-center rounded-full bg-selected text-fg-muted [&_svg]:size-3.5", children: _jsx(History, {}) })), _jsxs("span", { className: "grid min-w-0 flex-1 gap-0.5", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx("span", { className: "truncate text-[13px] font-medium text-fg", children: vLabel(v) }), v.current ? (_jsx(Badge, { tone: "accent", size: "sm", children: t("current") })) : v.kind && v.kind !== "manual" ? (_jsx(Badge, { tone: kindTone[v.kind], size: "sm", children: t(v.kind) })) : null] }), _jsx("span", { className: "truncate text-xs text-fg-muted", children: [v.author?.name, v.label ? f.date(v.createdAt, "datetime-short") : null].filter(Boolean).join(" · ") }), v.summary ? _jsx("span", { className: "line-clamp-2 text-xs text-fg-muted", children: v.summary }) : null] }), role ? (_jsx("span", { className: cn("mt-0.5 shrink-0 rounded-ui-sm px-1.5 py-px font-mono text-[10px] uppercase tracking-wider", role === "after" ? "bg-accent-soft text-accent-ink" : "bg-surface-2 text-fg-muted ring-1 ring-line"), children: t(role) })) : null] }, v.id));
+        }) }));
+    const toolbarActions = (_jsx(_Fragment, { children: !isRecord ? (_jsxs(ToggleGroup, { "aria-label": t("viewMode"), size: "xs", value: mode, onValueChange: (v) => v && setMode(v), className: "max-sm:hidden", children: [_jsx(ToggleGroupItem, { value: "unified", children: t("unified") }), _jsx(ToggleGroupItem, { value: "split", children: t("split") })] })) : null }));
+    const compareView = !older || !newer ? (_jsx("p", { className: "text-sm text-fg-muted", children: t("selectHint") })) : failed ? (_jsxs("div", { role: "alert", className: "flex items-center gap-3 rounded-ui border border-line bg-surface-2 px-4 py-4 text-sm text-danger", children: [t("loadError"), _jsx(Button, { size: "xs", onClick: () => [older, newer].forEach((v) => errors[v.id] && load(v.id)), children: t("retry") })] })) : loading ? (_jsxs("div", { role: "status", "aria-busy": "true", className: "grid gap-2 rounded-ui border border-line bg-surface-2 p-4", children: [_jsx("span", { className: "sr-only", children: t("loading") }), [92, 78, 85, 40, 66].map((w, i) => (_jsx(Skeleton, { className: "h-3.5 rounded-ui-sm", style: { width: `${w}%` } }, i)))] })) : older.id === newer.id ? (_jsxs("div", { className: "rounded-ui border border-line bg-surface-2 px-4 py-6 text-center", children: [_jsx("p", { className: "text-sm font-medium text-fg", children: t("identical") }), _jsx("p", { className: "mt-1 text-[13px] text-fg-muted", children: t("identicalHint") })] })) : isRecord ? (_jsxs("div", { className: "grid gap-2", children: [_jsxs("label", { className: "ms-auto inline-flex cursor-pointer items-center gap-2 text-xs text-fg-muted", children: [_jsx("input", { type: "checkbox", checked: onlyChanges, onChange: (e) => setOnlyChanges(e.target.checked), className: "size-3.5 accent-(--accent-ink)" }), t("onlyChanges")] }), _jsx(FieldDiff, { before: typeof a === "object" ? a : null, after: typeof b === "object" ? b : null, fields: fields, onlyChanges: onlyChanges, beforeLabel: vLabel(older), afterLabel: vLabel(newer), labels: labels })] })) : (_jsx(DiffView, { before: String(a ?? ""), after: String(b ?? ""), mode: mode, granularity: granularity, context: context, beforeLabel: vLabel(older), afterLabel: vLabel(newer), actions: toolbarActions, labels: labels }));
+    return (_jsx("div", { ref: ref, "data-slot": "version-history", "data-layout": layout, className: cn("@container/vh", className), ...props, children: _jsxs("div", { className: cn("grid gap-4", layout === "page" && "@[52rem]/vh:grid-cols-[16.5rem_minmax(0,1fr)] @[52rem]/vh:items-start"), children: [_jsxs("div", { className: cn("grid content-start gap-2", layout === "page" && "@[52rem]/vh:sticky @[52rem]/vh:top-4"), children: [_jsx("p", { id: `${listId}-hint`, className: "px-2.5 text-xs text-fg-muted", children: t("selectHint") }), list] }), _jsxs("section", { "aria-label": older && newer ? t("comparing", { before: vLabel(older), after: vLabel(newer) }) : undefined, className: "grid min-w-0 gap-3", children: [older && newer && older.id !== newer.id ? (_jsxs("header", { className: "flex flex-wrap items-center gap-x-3 gap-y-2", children: [_jsxs("p", { className: "flex min-w-0 flex-wrap items-baseline gap-x-2 text-sm", children: [_jsx("span", { className: "text-fg-muted", children: vLabel(older) }), _jsx("span", { "aria-hidden": true, className: "text-fg-subtle", children: "\u2192" }), _jsx("span", { className: "font-medium text-fg", children: vLabel(newer) })] }), restorable ? (_jsxs(Button, { size: "sm", variant: "secondary", className: "ms-auto", onClick: () => setConfirming(true), children: [_jsx(RotateCcw, { "aria-hidden": true }), t("restore")] })) : null] })) : null, compareView] }), restorable ? (_jsx(ConfirmDialog, { open: confirming, title: t("restoreTitle", { date: f.dateTime(restorable.createdAt) }), description: t("restoreBody"), confirmLabel: t("restoreConfirm"), onConfirm: async () => {
+                        try {
+                            await onRestore(restorable.id);
+                            toast.success(t("restored"));
+                        }
+                        catch (err) {
+                            toast.danger(t("restoreError"));
+                            throw err;
+                        }
+                    }, onResult: () => setConfirming(false) })) : null] }) }));
+});

package/dist/data-table/csv.d.ts

@@ -0,0 +1,27 @@
+export type CsvCell = string | number | boolean | null | undefined | Date;
+export interface CsvOptions {
+    /** Default: `csvDelimiter(locale)`. */
+    delimiter?: string;
+    /** Used for the delimiter and decimal separator. Default "en-US". */
+    locale?: string;
+    /** Prepend the UTF-8 byte order mark (Excel reads accents correctly). Default `true`. */
+    bom?: boolean;
+    /** Write numbers with the locale's decimal separator (`1234,5` for tr-TR). Default `true`. */
+    localizeNumbers?: boolean;
+    /** Prefix cells that start with `= + - @ tab CR` with `'` so spreadsheets never run them. Default `true`. */
+    guardFormulas?: boolean;
+}
+/** `","` for en-US, `";"` for locales whose decimal separator is a comma. */
+export declare function csvDelimiter(locale?: string): string;
+/** One escaped cell. Strings that look like formulas get a `'` prefix; numbers never do. */
+export declare function escapeCsvCell(value: CsvCell, o?: CsvOptions): string;
+/**
+ * Rows (first row = headers) → CSV text.
+ *
+ * ```ts
+ * toCsv([["Name", "Value"], ["Northwind", 4800.5]], { locale: "tr-TR" }); // "Name;Value\r\nNorthwind;4800,5\r\n"
+ * ```
+ */
+export declare function toCsv(rows: CsvCell[][], o?: CsvOptions): string;
+/** Saves CSV text as a file in the browser. `filename` gets `.csv` if it has no extension. */
+export declare function downloadCsv(filename: string, csv: string): void;

package/dist/data-table/csv.js

@@ -0,0 +1,68 @@
+/**
+ * CSV writer for list exports. React-free. Excel-friendly by default: UTF-8 BOM, CRLF line ends,
+ * the delimiter of the locale (`;` where the decimal separator is a comma, e.g. tr-TR / de-DE),
+ * and a guard against formula injection.
+ */
+import { numberSeparators } from "../format/core.js";
+/** `","` for en-US, `";"` for locales whose decimal separator is a comma. */
+export function csvDelimiter(locale = "en-US") {
+    return numberSeparators(locale).decimal === "," ? ";" : ",";
+}
+const FORMULA = /^[=+\-@\t\r]/;
+/** One escaped cell. Strings that look like formulas get a `'` prefix; numbers never do. */
+export function escapeCsvCell(value, o = {}) {
+    const delimiter = o.delimiter ?? csvDelimiter(o.locale);
+    if (value === null || value === undefined)
+        return "";
+    let s;
+    if (typeof value === "number") {
+        if (!Number.isFinite(value))
+            return "";
+        s = String(value);
+        if (o.localizeNumbers !== false) {
+            const { decimal } = numberSeparators(o.locale ?? "en-US");
+            if (decimal !== ".")
+                s = s.replace(".", decimal);
+        }
+    }
+    else if (typeof value === "boolean") {
+        s = value ? "true" : "false";
+    }
+    else if (value instanceof Date) {
+        s = Number.isNaN(value.getTime()) ? "" : value.toISOString();
+    }
+    else {
+        s = value;
+        if (o.guardFormulas !== false && FORMULA.test(s))
+            s = `'${s}`;
+    }
+    return s.includes(delimiter) || /["\r\n]/.test(s) || s !== s.trim() ? `"${s.replace(/"/g, '""')}"` : s;
+}
+/**
+ * Rows (first row = headers) → CSV text.
+ *
+ * ```ts
+ * toCsv([["Name", "Value"], ["Northwind", 4800.5]], { locale: "tr-TR" }); // "Name;Value\r\nNorthwind;4800,5\r\n"
+ * ```
+ */
+export function toCsv(rows, o = {}) {
+    const opts = { ...o, delimiter: o.delimiter ?? csvDelimiter(o.locale) };
+    const body = rows.map((r) => r.map((c) => escapeCsvCell(c, opts)).join(opts.delimiter)).join("\r\n");
+    return (o.bom === false ? "" : "") + body + (rows.length ? "\r\n" : "");
+}
+/** Saves CSV text as a file in the browser. `filename` gets `.csv` if it has no extension. */
+export function downloadCsv(filename, csv) {
+    if (typeof document === "undefined")
+        return;
+    const name = /\.[a-z0-9]+$/i.test(filename) ? filename : `${filename}.csv`;
+    const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = name;
+    a.rel = "noopener";
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+}