@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/components/audit-log.d.ts

@@ -0,0 +1,150 @@
+import * as React from "react";
+import { type LabelFn } from "../lib/labels.js";
+import { type FieldDiffField } from "./version-history.js";
+export type AuditSeverity = "info" | "warning" | "critical";
+export interface AuditEvent {
+    id: string;
+    /** ISO instant. */
+    at: string;
+    actor: {
+        id: string;
+        name: string;
+        type: "user" | "api-key" | "system";
+        avatar?: string;
+    };
+    /** Dotted action code: `"user.role.updated"`. Label it with `actionLabels`. */
+    action: string;
+    target?: {
+        type: string;
+        id: string;
+        label?: string;
+    };
+    ip?: string;
+    /** "Istanbul, TR". */
+    location?: string;
+    userAgent?: string;
+    changes?: {
+        before: Record<string, unknown>;
+        after: Record<string, unknown>;
+    };
+    /** Request id, reason, export size… `requestId` gets its own copy row. */
+    metadata?: Record<string, unknown>;
+    /** Default `"info"`. */
+    severity?: AuditSeverity;
+}
+export interface AuditFilters {
+    /** Free text over actor, action, target, IP. */
+    q?: string;
+    actorId?: string;
+    /** Action prefix (`"user"`, `"user.role"`) or full code. */
+    action?: string;
+    severity?: AuditSeverity;
+}
+export declare const auditLogLabels: {
+    log: string;
+    search: string;
+    searchPlaceholder: string;
+    allActors: string;
+    allActions: string;
+    allSeverities: string;
+    actor: string;
+    action: string;
+    severity: string;
+    time: string;
+    target: string;
+    source: string;
+    info: string;
+    warning: string;
+    critical: string;
+    user: string;
+    apiKey: string;
+    system: string;
+    expand: string;
+    changes: string;
+    fields: string;
+    json: string;
+    changesView: string;
+    noChanges: string;
+    details: string;
+    eventId: string;
+    requestId: string;
+    ip: string;
+    userAgent: string;
+    metadata: string;
+    raw: string;
+    showRaw: string;
+    hideRaw: string;
+    copyJson: string;
+    results: string;
+    resultsOf: string;
+    empty: string;
+    clear: string;
+    loadMore: string;
+    loading: string;
+    export: string;
+};
+export type AuditLogLabels = Partial<typeof auditLogLabels>;
+type T = LabelFn<typeof auditLogLabels>;
+/** Local filtering (used unless `manualFiltering`). Locale-aware text match. */
+export declare function filterAuditEvents(events: AuditEvent[], filters: AuditFilters, locale?: string, actionLabels?: Record<string, string>): AuditEvent[];
+export interface AuditLogProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    events: AuditEvent[];
+    /** Total on the server (server mode) — "50 of 12,408 events". */
+    rowCount?: number;
+    /** `"user.role.updated"` → "Changed role". Missing codes are humanized. */
+    actionLabels?: Record<string, string>;
+    /** Labels / formats for the change diff ("price" → currency). */
+    changeFields?: FieldDiffField[];
+    filters?: AuditFilters;
+    defaultFilters?: AuditFilters;
+    onFiltersChange?: (filters: AuditFilters) => void;
+    /** Server mode: `events` are already filtered; the component only reports filter changes. */
+    manualFiltering?: boolean;
+    /** Show the built-in filter row. Default `true`. */
+    showFilters?: boolean;
+    /** Extra filter controls (a Date range picker) at the end of the filter row. */
+    toolbar?: React.ReactNode;
+    /** Retention / scope notice ("Showing the last 90 days"). */
+    notice?: React.ReactNode;
+    onExport?: (events: AuditEvent[]) => void;
+    hasMore?: boolean;
+    /** Called near the end of the scroll and by the "Load older events" button. */
+    onLoadMore?: () => void | Promise<void>;
+    loading?: boolean;
+    /** Scroll viewport height. Default `"32rem"`. */
+    height?: string;
+    /** Virtualize above this many events. Default 80. */
+    virtualizeAfter?: number;
+    /** `table` (default) or `timeline` — a compact feed for one record's history. */
+    variant?: "table" | "timeline";
+    /** Pin the clock for relative times (timeline variant; docs, tests). */
+    now?: Date | string | number;
+    labels?: AuditLogLabels;
+}
+/**
+ * The full ledger of who did what, when and from where: logins, permission changes, exports,
+ * deletes. Filter by actor, action and severity, expand an event to see its field diff and raw
+ * JSON, and scroll thousands of rows (virtualized, native table semantics kept).
+ * Timestamps show seconds and the time zone; IPs and ids are mono and left-to-right.
+ *
+ * ```tsx
+ * <AuditLog
+ *   events={events}
+ *   actionLabels={{ "user.role.updated": "Changed role", "export.created": "Exported data" }}
+ *   hasMore={hasMore}
+ *   onLoadMore={fetchOlder}
+ *   notice="Showing the last 90 days"
+ * />
+ * ```
+ */
+export declare const AuditLog: React.ForwardRefExoticComponent<AuditLogProps & React.RefAttributes<HTMLDivElement>>;
+export interface AuditEventDetailProps {
+    event: AuditEvent;
+    changeFields?: FieldDiffField[];
+    labels?: AuditLogLabels;
+    /** @internal */
+    t?: T;
+}
+/** Expanded row content: field diff (or JSON diff) of the change, ids with copy, client and raw JSON. */
+export declare function AuditEventDetail({ event: e, changeFields, labels, t: tProp }: AuditEventDetailProps): React.JSX.Element;
+export {};

package/dist/components/audit-log.js

@@ -0,0 +1,205 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { ChevronRight, Cpu, Download, KeyRound, Search, ShieldAlert } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useFormat, useLocale } from "../lib/locale.js";
+import { matchText } from "../lib/text.js";
+import { CopyValueButton } from "../lib/data-islands.js";
+import { ActivityTimeline } from "./activity-timeline.js";
+import { Avatar } from "./avatar.js";
+import { Badge } from "./badge.js";
+import { Button } from "./button.js";
+import { NativeSelect } from "./native-select.js";
+import { Spinner } from "./spinner.js";
+import { ToggleGroup, ToggleGroupItem } from "./toggle.js";
+import { DiffView, FieldDiff } from "./version-history.js";
+export const auditLogLabels = {
+    log: "Audit log",
+    search: "Search events",
+    searchPlaceholder: "Search actor, action, target or IP…",
+    allActors: "All actors",
+    allActions: "All actions",
+    allSeverities: "Any severity",
+    actor: "Actor",
+    action: "Action",
+    severity: "Severity",
+    time: "Time",
+    target: "Target",
+    source: "Source",
+    info: "Info",
+    warning: "Warning",
+    critical: "Critical",
+    user: "User",
+    apiKey: "API key",
+    system: "System",
+    expand: "Show details for {action} by {actor}",
+    changes: "Changes",
+    fields: "Fields",
+    json: "JSON",
+    changesView: "Changes view",
+    noChanges: "No field changes recorded.",
+    details: "Details",
+    eventId: "Event ID",
+    requestId: "Request ID",
+    ip: "IP address",
+    userAgent: "Client",
+    metadata: "Metadata",
+    raw: "Raw event",
+    showRaw: "View raw JSON",
+    hideRaw: "Hide raw JSON",
+    copyJson: "event JSON",
+    results: "{count, plural, one {# event} other {# events}}",
+    resultsOf: "{shown} of {total} events",
+    empty: "No events match these filters",
+    clear: "Clear filters",
+    loadMore: "Load older events",
+    loading: "Loading…",
+    export: "Export",
+};
+function humanizeAction(code) {
+    const s = code.replace(/[._-]+/g, " ").trim();
+    return s.charAt(0).toUpperCase() + s.slice(1);
+}
+/** Local filtering (used unless `manualFiltering`). Locale-aware text match. */
+export function filterAuditEvents(events, filters, locale, actionLabels) {
+    return events.filter((e) => {
+        if (filters.actorId && e.actor.id !== filters.actorId)
+            return false;
+        if (filters.severity && (e.severity ?? "info") !== filters.severity)
+            return false;
+        if (filters.action && !(e.action === filters.action || e.action.startsWith(`${filters.action}.`)))
+            return false;
+        if (filters.q) {
+            const hay = [e.actor.name, e.action, actionLabels?.[e.action], e.target?.label, e.target?.id, e.target?.type, e.ip, e.location].filter(Boolean).join(" ");
+            if (!matchText(hay, filters.q, locale))
+                return false;
+        }
+        return true;
+    });
+}
+/**
+ * The full ledger of who did what, when and from where: logins, permission changes, exports,
+ * deletes. Filter by actor, action and severity, expand an event to see its field diff and raw
+ * JSON, and scroll thousands of rows (virtualized, native table semantics kept).
+ * Timestamps show seconds and the time zone; IPs and ids are mono and left-to-right.
+ *
+ * ```tsx
+ * <AuditLog
+ *   events={events}
+ *   actionLabels={{ "user.role.updated": "Changed role", "export.created": "Exported data" }}
+ *   hasMore={hasMore}
+ *   onLoadMore={fetchOlder}
+ *   notice="Showing the last 90 days"
+ * />
+ * ```
+ */
+export const AuditLog = React.forwardRef(function AuditLog({ events, rowCount, actionLabels, changeFields, filters: filtersProp, defaultFilters, onFiltersChange, manualFiltering, showFilters = true, toolbar, notice, onExport, hasMore, onLoadMore, loading, height = "32rem", virtualizeAfter = 80, variant = "table", now, labels, className, ...props }, ref) {
+    const t = useLabels("auditLog", auditLogLabels, labels);
+    const f = useFormat();
+    const { locale } = useLocale();
+    const [filterState, setFilterState] = React.useState(defaultFilters ?? {});
+    const filters = filtersProp ?? filterState;
+    const setFilters = (next) => {
+        setFilterState(next);
+        onFiltersChange?.(next);
+    };
+    const [expanded, setExpanded] = React.useState(() => new Set());
+    const [loadingMore, setLoadingMore] = React.useState(false);
+    const scrollRef = React.useRef(null);
+    const baseId = React.useId();
+    const actionLabel = (code) => actionLabels?.[code] ?? humanizeAction(code);
+    const shown = React.useMemo(() => (manualFiltering ? events : filterAuditEvents(events, filters, locale, actionLabels)), [events, filters, manualFiltering, locale, actionLabels]);
+    const actors = React.useMemo(() => {
+        const m = new Map();
+        events.forEach((e) => m.set(e.actor.id, e.actor.name));
+        return Array.from(m, ([value, label]) => ({ value, label })).sort((a, b) => a.label.localeCompare(b.label, locale));
+    }, [events, locale]);
+    const actionGroups = React.useMemo(() => {
+        const m = new Set();
+        events.forEach((e) => m.add(e.action.split(".")[0]));
+        return Array.from(m).sort();
+    }, [events]);
+    const more = async () => {
+        if (!onLoadMore || loadingMore)
+            return;
+        setLoadingMore(true);
+        try {
+            await onLoadMore();
+        }
+        finally {
+            setLoadingMore(false);
+        }
+    };
+    const virtual = variant === "table" && shown.length > virtualizeAfter;
+    const virtualizer = useVirtualizer({
+        count: virtual ? shown.length : 0,
+        getScrollElement: () => scrollRef.current,
+        estimateSize: () => 52,
+        overscan: 8,
+        getItemKey: (i) => shown[i]?.id ?? i,
+    });
+    const toggle = (id) => setExpanded((s) => {
+        const n = new Set(s);
+        if (n.has(id))
+            n.delete(id);
+        else
+            n.add(id);
+        return n;
+    });
+    const filterRow = showFilters ? (_jsxs("div", { "data-slot": "audit-filters", className: "flex flex-wrap items-center gap-2", children: [_jsxs("label", { className: "relative min-w-48 flex-1", children: [_jsx("span", { className: "sr-only", children: t("search") }), _jsx(Search, { "aria-hidden": true, className: "pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2 text-fg-subtle" }), _jsx("input", { type: "search", value: filters.q ?? "", placeholder: t("searchPlaceholder"), onChange: (e) => setFilters({ ...filters, q: e.target.value || undefined }), className: "h-8 w-full rounded-ui-sm border border-field-border bg-field ps-8 pe-2.5 text-[13px] text-fg outline-none placeholder:text-fg-subtle hover:border-field-border-hover focus-visible:border-field-border-hover focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_18%,transparent)]" })] }), _jsx(NativeSelect, { size: "sm", "aria-label": t("actor"), value: filters.actorId ?? "", onChange: (e) => setFilters({ ...filters, actorId: e.target.value || undefined }), items: [{ value: "", label: t("allActors") }, ...actors], className: "w-auto" }), _jsx(NativeSelect, { size: "sm", "aria-label": t("action"), value: filters.action ?? "", onChange: (e) => setFilters({ ...filters, action: e.target.value || undefined }), items: [{ value: "", label: t("allActions") }, ...actionGroups.map((g) => ({ value: g, label: humanizeAction(g) }))], className: "w-auto" }), _jsx(NativeSelect, { size: "sm", "aria-label": t("severity"), value: filters.severity ?? "", onChange: (e) => setFilters({ ...filters, severity: (e.target.value || undefined) }), items: [
+                    { value: "", label: t("allSeverities") },
+                    { value: "info", label: t("info") },
+                    { value: "warning", label: t("warning") },
+                    { value: "critical", label: t("critical") },
+                ], className: "w-auto" }), toolbar, onExport ? (_jsxs(Button, { size: "sm", variant: "ghost", onClick: () => onExport(shown), className: "ms-auto", children: [_jsx(Download, { "aria-hidden": true }), t("export")] })) : null] })) : null;
+    const summary = (_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-fg-muted", children: [_jsx("span", { className: "tabular", "aria-live": "polite", children: rowCount !== undefined && rowCount > shown.length ? t("resultsOf", { shown: f.number(shown.length), total: f.number(rowCount) }) : t("results", { count: shown.length }) }), notice ? _jsx("span", { className: "text-fg-subtle", children: notice }) : null, loading ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(Spinner, { size: "xs" }), t("loading")] })) : null] }));
+    const empty = (_jsxs("div", { className: "flex flex-col items-center gap-2 px-4 py-10 text-center", children: [_jsx("p", { className: "text-sm text-fg-muted", children: t("empty") }), Object.values(filters).some(Boolean) && !filtersProp ? (_jsx(Button, { size: "xs", variant: "secondary", onClick: () => setFilters({}), children: t("clear") })) : null] }));
+    if (variant === "timeline") {
+        const items = shown.map((e) => ({
+            id: e.id,
+            at: e.at,
+            avatar: e.actor.type === "user" ? { name: e.actor.name, src: e.actor.avatar } : undefined,
+            icon: e.actor.type === "api-key" ? KeyRound : e.actor.type === "system" ? Cpu : undefined,
+            tone: e.severity === "critical" ? "danger" : e.severity === "warning" ? "warning" : "neutral",
+            actor: e.actor.name,
+            title: (_jsxs(_Fragment, { children: [actionLabel(e.action).toLocaleLowerCase(locale), e.target?.label ? _jsxs(_Fragment, { children: [" \u00B7 ", e.target.label] }) : null] })),
+            body: e.changes ? _jsx(FieldDiff, { before: e.changes.before, after: e.changes.after, fields: changeFields, className: "mt-1.5 max-w-xl" }) : undefined,
+        }));
+        return (_jsxs("div", { ref: ref, "data-slot": "audit-log", "data-variant": "timeline", className: cn("ui-audit grid gap-3", className), ...props, children: [filterRow, _jsx(ActivityTimeline, { items: items, now: now, hasMore: hasMore, onLoadMore: onLoadMore, empty: t("empty") })] }));
+    }
+    const renderEvent = (e, index, measure) => {
+        const open = expanded.has(e.id);
+        const detailId = `${baseId}-${e.id}`;
+        const sev = e.severity ?? "info";
+        return (_jsxs("tbody", { ref: measure, "data-index": index, "data-expanded": open ? "" : undefined, "data-severity": sev, children: [_jsxs("tr", { "data-slot": "audit-row", className: "cursor-pointer", onClick: (ev) => !ev.target.closest("button,a,input") && toggle(e.id), children: [_jsx("td", { className: "w-9 py-2 ps-2 align-top", children: _jsx("button", { type: "button", "aria-expanded": open, "aria-controls": open ? detailId : undefined, "aria-label": t("expand", { action: actionLabel(e.action), actor: e.actor.name }), onClick: () => toggle(e.id), className: "inline-flex size-6 cursor-pointer items-center justify-center rounded-ui-sm text-fg-subtle hover:bg-hover hover:text-fg focus-ring", children: _jsx(ChevronRight, { "aria-hidden": true, className: cn("size-4 transition-transform motion-reduce:transition-none rtl:rotate-180", open && "rotate-90 rtl:rotate-90") }) }) }), _jsx("td", { className: "py-2 pe-3 align-top whitespace-nowrap", children: _jsxs("time", { dateTime: e.at, className: "grid text-[13px] leading-tight tabular", title: f.date(e.at, "full"), children: [_jsx("span", { className: "text-fg", children: f.date(e.at, { month: "short", day: "numeric", year: "numeric" }) }), _jsx("span", { className: "font-mono text-[11.5px] text-fg-muted", children: f.time(e.at, { hour: "2-digit", minute: "2-digit", second: "2-digit", timeZoneName: "short" }) })] }) }), _jsx("td", { className: "py-2 pe-3 align-top", children: _jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [e.actor.type === "user" ? (_jsx(Avatar, { name: e.actor.name, src: e.actor.avatar, size: "sm", "aria-hidden": true })) : (_jsx("span", { "aria-hidden": true, className: "inline-flex size-6 shrink-0 items-center justify-center rounded-ui-sm bg-selected text-fg-muted [&_svg]:size-3.5", children: e.actor.type === "api-key" ? _jsx(KeyRound, {}) : _jsx(Cpu, {}) })), _jsxs("span", { className: "grid min-w-0 leading-tight", children: [_jsx("span", { className: "truncate text-[13px] font-medium text-fg", children: e.actor.name }), _jsx("span", { className: "text-[11.5px] text-fg-subtle", children: e.actor.type === "api-key" ? t("apiKey") : e.actor.type === "system" ? t("system") : t("user") })] })] }) }), _jsx("td", { className: "py-2 pe-3 align-top", children: _jsxs("span", { className: "grid leading-tight", children: [_jsxs("span", { className: "flex items-center gap-1.5 text-[13px] text-fg", children: [sev === "critical" ? _jsx(ShieldAlert, { "aria-hidden": true, className: "size-3.5 shrink-0 text-danger" }) : null, actionLabel(e.action), sev !== "info" ? (_jsx(Badge, { size: "sm", tone: sev === "critical" ? "danger" : "warning", children: t(sev) })) : null] }), _jsx("code", { dir: "ltr", className: "font-mono text-[11px] text-fg-subtle", children: e.action })] }) }), _jsx("td", { className: "py-2 pe-3 align-top", children: e.target ? (_jsxs("span", { className: "grid min-w-0 leading-tight", children: [_jsx("span", { className: "truncate text-[13px] text-fg", children: e.target.label ?? e.target.id }), _jsxs("span", { className: "truncate text-[11.5px] text-fg-subtle", children: [humanizeAction(e.target.type), " \u00B7 ", _jsx("span", { dir: "ltr", className: "font-mono", children: e.target.id })] })] })) : (_jsx("span", { className: "text-fg-subtle", children: "\u2014" })) }), _jsx("td", { className: "py-2 pe-3 align-top", children: _jsxs("span", { className: "grid leading-tight", children: [_jsx("span", { dir: "ltr", className: "text-start font-mono text-[12px] text-fg-muted", children: e.ip ?? "—" }), e.location ? _jsx("span", { className: "text-[11.5px] text-fg-subtle", children: e.location }) : null] }) })] }), open ? (_jsx("tr", { "data-slot": "audit-detail", children: _jsx("td", { colSpan: 6, id: detailId, className: "px-3 pt-1 pb-4 ps-11", children: _jsx(AuditEventDetail, { event: e, changeFields: changeFields, t: t }) }) })) : null] }, e.id));
+    };
+    const items = virtual ? virtualizer.getVirtualItems() : [];
+    const padTop = virtual && items.length ? items[0].start : 0;
+    const padBottom = virtual && items.length ? virtualizer.getTotalSize() - items[items.length - 1].end : 0;
+    return (_jsxs("div", { ref: ref, "data-slot": "audit-log", "data-variant": "table", className: cn("ui-audit grid gap-3", className), ...props, children: [filterRow, summary, _jsxs("div", { ref: scrollRef, "data-slot": "audit-scroll", className: "overflow-auto rounded-ui border border-line", style: { maxHeight: height }, onScroll: (e) => {
+                    const el = e.currentTarget;
+                    if (hasMore && !loadingMore && el.scrollTop + el.clientHeight > el.scrollHeight - 240)
+                        void more();
+                }, children: [_jsxs("table", { className: "ui-audit-table w-full min-w-[46rem] text-start", "aria-label": t("log"), "aria-rowcount": rowCount, children: [_jsx("thead", { children: _jsxs("tr", { className: "text-[11.5px] font-medium text-fg-muted", children: [_jsx("th", { scope: "col", className: "w-9 py-2 ps-2", children: _jsx("span", { className: "sr-only", children: t("details") }) }), _jsx("th", { scope: "col", className: "py-2 pe-3 text-start font-medium", children: t("time") }), _jsx("th", { scope: "col", className: "py-2 pe-3 text-start font-medium", children: t("actor") }), _jsx("th", { scope: "col", className: "py-2 pe-3 text-start font-medium", children: t("action") }), _jsx("th", { scope: "col", className: "py-2 pe-3 text-start font-medium", children: t("target") }), _jsx("th", { scope: "col", className: "py-2 pe-3 text-start font-medium", children: t("source") })] }) }), shown.length === 0 && !loading ? (_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { colSpan: 6, children: empty }) }) })) : virtual ? (_jsxs(_Fragment, { children: [padTop > 0 ? (_jsx("tbody", { "aria-hidden": true, children: _jsx("tr", { style: { height: padTop } }) })) : null, items.map((vi) => renderEvent(shown[vi.index], vi.index, virtualizer.measureElement)), padBottom > 0 ? (_jsx("tbody", { "aria-hidden": true, children: _jsx("tr", { style: { height: padBottom } }) })) : null] })) : (shown.map((e, i) => renderEvent(e, i)))] }), hasMore && onLoadMore ? (_jsx("div", { className: "flex justify-center border-t border-line p-2", children: _jsx(Button, { size: "xs", variant: "ghost", loading: loadingMore, onClick: () => void more(), children: t("loadMore") }) })) : null] })] }));
+});
+/** Expanded row content: field diff (or JSON diff) of the change, ids with copy, client and raw JSON. */
+export function AuditEventDetail({ event: e, changeFields, labels, t: tProp }) {
+    const tOwn = useLabels("auditLog", auditLogLabels, labels);
+    const t = tProp ?? tOwn;
+    const [view, setView] = React.useState("fields");
+    const [raw, setRaw] = React.useState(false);
+    const requestId = typeof e.metadata?.requestId === "string" ? e.metadata.requestId : undefined;
+    const meta = Object.entries(e.metadata ?? {}).filter(([k]) => k !== "requestId");
+    const json = JSON.stringify(e, null, 2);
+    const rows = [
+        [t("eventId"), e.id, e.id],
+        ...(requestId ? [[t("requestId"), requestId, requestId]] : []),
+        ...(e.ip ? [[t("ip"), e.ip, e.ip]] : []),
+        ...(e.userAgent ? [[t("userAgent"), e.userAgent]] : []),
+        ...meta.map(([k, v]) => [humanizeAction(k), typeof v === "object" ? JSON.stringify(v) : String(v)]),
+    ];
+    return (_jsxs("div", { "data-slot": "audit-event-detail", className: "grid gap-4 lg:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]", children: [_jsxs("section", { className: "grid min-w-0 content-start gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h4", { className: "text-xs font-semibold text-fg", children: t("changes") }), e.changes ? (_jsxs(ToggleGroup, { "aria-label": t("changesView"), size: "xs", value: view, onValueChange: (v) => v && setView(v), className: "ms-auto", children: [_jsx(ToggleGroupItem, { value: "fields", children: t("fields") }), _jsx(ToggleGroupItem, { value: "json", children: t("json") })] })) : null] }), !e.changes ? (_jsx("p", { className: "text-[13px] text-fg-subtle", children: t("noChanges") })) : view === "fields" ? (_jsx(FieldDiff, { before: e.changes.before, after: e.changes.after, fields: changeFields })) : (_jsx(DiffView, { before: JSON.stringify(e.changes.before, null, 2), after: JSON.stringify(e.changes.after, null, 2), granularity: "word", context: Infinity, wrap: false, toolbar: false }))] }), _jsxs("section", { className: "grid min-w-0 content-start gap-2", children: [_jsx("h4", { className: "text-xs font-semibold text-fg", children: t("details") }), _jsx("dl", { className: "grid gap-1.5 text-[13px]", children: rows.map(([label, value, copy]) => (_jsxs("div", { className: "grid grid-cols-[7.5rem_minmax(0,1fr)] items-start gap-2", children: [_jsx("dt", { className: "text-fg-muted", children: label }), _jsxs("dd", { className: "flex min-w-0 items-start gap-1", children: [_jsx("span", { dir: "ltr", className: cn("min-w-0 text-start", copy ? "break-all font-mono text-[12px] text-fg" : "text-fg [overflow-wrap:anywhere]"), children: value }), copy ? _jsx(CopyValueButton, { text: copy, label: label, className: "-my-1" }) : null] })] }, label))) }), _jsxs("div", { className: "mt-1 grid gap-2", children: [_jsx("button", { type: "button", "aria-expanded": raw, onClick: () => setRaw((r) => !r), className: "w-fit cursor-pointer text-xs font-medium text-fg-muted underline-offset-2 hover:text-fg hover:underline focus-ring", children: raw ? t("hideRaw") : t("showRaw") }), raw ? (_jsxs("div", { className: "relative", children: [_jsx("pre", { "aria-label": t("raw"), tabIndex: 0, dir: "ltr", className: "max-h-64 overflow-auto rounded-ui-sm border border-line bg-surface-2 p-3 pe-10 font-mono text-[11.5px] leading-relaxed text-fg-muted focus-ring", children: json }), _jsx(CopyValueButton, { text: json, label: t("copyJson"), className: "absolute end-1.5 top-1.5" })] })) : null] })] })] }));
+}

package/dist/components/avatar.d.ts

@@ -0,0 +1,87 @@
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "radix-ui";
+declare const avatarLabels: {
+    online: string;
+    away: string;
+    busy: string;
+    offline: string;
+    withStatus: string;
+    overflow: string;
+    more: string;
+};
+export type AvatarLabels = typeof avatarLabels;
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type AvatarStatus = "online" | "away" | "busy" | "offline";
+export declare const avatarVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    shape?: "square" | "circle" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Soft background + ink text for an initials avatar, from the chart palette. */
+export declare function avatarColor(seed: string): React.CSSProperties;
+export interface AvatarRootProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
+    size?: AvatarSize;
+    shape?: "circle" | "square";
+}
+/** Root of the composite API: `<AvatarRoot><AvatarImage/><AvatarFallback/></AvatarRoot>`. */
+export declare const AvatarRoot: React.ForwardRefExoticComponent<AvatarRootProps & React.RefAttributes<HTMLSpanElement>>;
+/** The photo. Pass `asChild` to render a framework image (Next `<Image>`). */
+export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+/** Shown while the image loads (after `delayMs`), when it fails, or when there is none. */
+export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** Photo URL. Missing, `null` or failing → initials. */
+    src?: string | null;
+    /** Person or organisation name: initials, fallback colour and the accessible name. */
+    name: string;
+    /** 20 / 24 / 32 / 40 / 56 px. Default `"md"`. */
+    size?: AvatarSize;
+    /** `"square"` for organisation logos. */
+    shape?: "circle" | "square";
+    /** Presence dot (announced with the name). */
+    status?: AvatarStatus;
+    /** Override the announced status text ("In a meeting"). */
+    statusLabel?: string;
+    /** Override the computed initials (1–2 letters) or pass an icon. */
+    fallback?: React.ReactNode;
+    /** ms before the fallback shows while an image loads (avoids flashing). Default 300. */
+    delayMs?: number;
+    /** Use the same neutral colour for every fallback instead of the per-name hue. */
+    neutral?: boolean;
+    labels?: Partial<AvatarLabels>;
+}
+/**
+ * A person or organisation: contact lists, assignees, comment threads, the top-bar user menu.
+ * Image with an initials fallback (locale-correct: "ilker şahin" → "İŞ" in Turkish), a colour
+ * picked from the name, and an optional status dot.
+ *
+ * ```tsx
+ * <Avatar name="Ada Lovelace" src="/people/ada.jpg" status="online" />
+ * <Avatar name="Northwind Traders" shape="square" size="lg" />
+ * ```
+ */
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Avatars shown before the "+N" chip. Default 4. */
+    max?: number;
+    /** Total number of people when the list you pass is already truncated (server-side). */
+    total?: number;
+    size?: AvatarSize;
+    shape?: "circle" | "square";
+    /** Makes "+N" a button (open the full list in a popover or dialog). */
+    onOverflowClick?: () => void;
+    /** Overlap between avatars. Default `"md"`. */
+    spacing?: "sm" | "md" | "lg";
+    labels?: Partial<AvatarLabels>;
+}
+/**
+ * Stacked avatars with a "+N" overflow ("3 more people" for screen readers): assignees,
+ * attendees, a team on a deal.
+ *
+ * ```tsx
+ * <AvatarGroup max={3} aria-label="Assignees">
+ *   {team.map((p) => <Avatar key={p.id} name={p.name} src={p.photo} />)}
+ * </AvatarGroup>
+ * ```
+ */
+export declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/avatar.js

@@ -0,0 +1,126 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useLocale } from "../lib/locale.js";
+import { initials as toInitials } from "../lib/text.js";
+const avatarLabels = {
+    online: "Online",
+    away: "Away",
+    busy: "Busy",
+    offline: "Offline",
+    withStatus: "{name} ({status})",
+    overflow: "+{count}",
+    more: "{count, plural, one {# more person} other {# more people}}",
+};
+export const avatarVariants = cva("relative inline-flex shrink-0 select-none items-center justify-center align-middle font-medium leading-none tracking-[0.01em]", {
+    variants: {
+        size: {
+            xs: "size-5 text-[8.5px]",
+            sm: "size-6 text-[10px]",
+            md: "size-8 text-xs",
+            lg: "size-10 text-sm",
+            xl: "size-14 text-[19px]",
+        },
+        shape: {
+            circle: "rounded-full",
+            /** Organisation / workspace logos. */
+            square: "rounded-[28%]",
+        },
+    },
+    defaultVariants: { size: "md", shape: "circle" },
+});
+const dotSize = {
+    xs: "size-1.5 ring-1",
+    sm: "size-[7px] ring-[1.5px]",
+    md: "size-2 ring-2",
+    lg: "size-2.5 ring-2",
+    xl: "size-3.5 ring-[3px]",
+};
+const statusColor = {
+    online: "bg-success",
+    away: "bg-warning",
+    busy: "bg-danger",
+    offline: "bg-fg-subtle",
+};
+/** Deterministic 1–6 from a string (stable across renders and servers). */
+function hueIndex(seed) {
+    let h = 2166136261;
+    for (let i = 0; i < seed.length; i++)
+        h = Math.imul(h ^ seed.charCodeAt(i), 16777619);
+    return ((h >>> 0) % 6) + 1;
+}
+/** Soft background + ink text for an initials avatar, from the chart palette. */
+export function avatarColor(seed) {
+    const c = `var(--chart-${hueIndex(seed)})`;
+    return {
+        backgroundColor: `color-mix(in oklch, ${c} 20%, var(--surface-solid))`,
+        color: `color-mix(in oklch, ${c} 60%, var(--fg))`,
+    };
+}
+const AvatarGroupContext = React.createContext(null);
+/** Root of the composite API: `<AvatarRoot><AvatarImage/><AvatarFallback/></AvatarRoot>`. */
+export const AvatarRoot = React.forwardRef(function AvatarRoot({ size, shape, className, ...props }, ref) {
+    const group = React.useContext(AvatarGroupContext);
+    const s = size ?? group?.size ?? "md";
+    const sh = shape ?? group?.shape ?? "circle";
+    return (_jsx(AvatarPrimitive.Root, { ref: ref, "data-slot": "avatar", "data-size": s, "data-shape": sh, className: cn(avatarVariants({ size: s, shape: sh }), group && "ring-2 ring-(--avatar-ring)", className), ...props }));
+});
+/** The photo. Pass `asChild` to render a framework image (Next `<Image>`). */
+export const AvatarImage = React.forwardRef(function AvatarImage({ className, ...props }, ref) {
+    return _jsx(AvatarPrimitive.Image, { ref: ref, "data-slot": "avatar-image", className: cn("size-full rounded-[inherit] object-cover", className), ...props });
+});
+/** Shown while the image loads (after `delayMs`), when it fails, or when there is none. */
+export const AvatarFallback = React.forwardRef(function AvatarFallback({ className, ...props }, ref) {
+    return (_jsx(AvatarPrimitive.Fallback, { ref: ref, "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center rounded-[inherit] bg-selected text-fg-muted [&_svg]:size-[55%]", className), ...props }));
+});
+/**
+ * A person or organisation: contact lists, assignees, comment threads, the top-bar user menu.
+ * Image with an initials fallback (locale-correct: "ilker şahin" → "İŞ" in Turkish), a colour
+ * picked from the name, and an optional status dot.
+ *
+ * ```tsx
+ * <Avatar name="Ada Lovelace" src="/people/ada.jpg" status="online" />
+ * <Avatar name="Northwind Traders" shape="square" size="lg" />
+ * ```
+ */
+export const Avatar = React.forwardRef(function Avatar({ src, name, size, shape, status, statusLabel, fallback, delayMs = 300, neutral, labels, className, style, ...props }, ref) {
+    const t = useLabels("avatar", avatarLabels, labels);
+    const { locale } = useLocale();
+    const group = React.useContext(AvatarGroupContext);
+    const s = size ?? group?.size ?? "md";
+    const statusText = status ? (statusLabel ?? t(status)) : undefined;
+    const accessible = statusText ? t("withStatus", { name, status: statusText }) : name;
+    const letters = fallback ?? (toInitials(name, locale, s === "xs" ? 1 : 2) || "?");
+    return (_jsxs(AvatarRoot, { ref: ref, size: s, shape: shape, className: className, style: style, ...props, children: [src ? _jsx(AvatarImage, { src: src, alt: accessible }) : null, _jsx(AvatarFallback, { delayMs: src ? delayMs : undefined, role: "img", "aria-label": accessible, style: neutral ? undefined : avatarColor(name), children: _jsx("span", { "aria-hidden": true, children: letters }) }), status ? (_jsx("span", { "aria-hidden": true, "data-slot": "avatar-status", "data-status": status, className: cn("absolute end-0 bottom-0 rounded-full ring-(--avatar-ring)", shape === "square" && "-end-0.5 -bottom-0.5", dotSize[s], statusColor[status]) })) : null] }));
+});
+const overlap = {
+    xs: { sm: "-ms-0.5", md: "-ms-1", lg: "-ms-1.5" },
+    sm: { sm: "-ms-1", md: "-ms-1.5", lg: "-ms-2" },
+    md: { sm: "-ms-1", md: "-ms-2", lg: "-ms-3" },
+    lg: { sm: "-ms-1.5", md: "-ms-2.5", lg: "-ms-4" },
+    xl: { sm: "-ms-2", md: "-ms-3.5", lg: "-ms-5" },
+};
+/**
+ * Stacked avatars with a "+N" overflow ("3 more people" for screen readers): assignees,
+ * attendees, a team on a deal.
+ *
+ * ```tsx
+ * <AvatarGroup max={3} aria-label="Assignees">
+ *   {team.map((p) => <Avatar key={p.id} name={p.name} src={p.photo} />)}
+ * </AvatarGroup>
+ * ```
+ */
+export const AvatarGroup = React.forwardRef(function AvatarGroup({ max = 4, total, size = "md", shape = "circle", onOverflowClick, spacing = "md", labels, className, children, ...props }, ref) {
+    const t = useLabels("avatar", avatarLabels, labels);
+    const items = React.Children.toArray(children).filter(React.isValidElement);
+    const shown = items.slice(0, Math.max(0, max));
+    const extra = Math.max(0, (total ?? items.length) - shown.length);
+    const ctx = React.useMemo(() => ({ size, shape }), [size, shape]);
+    const step = overlap[size][spacing];
+    const chipClass = cn(avatarVariants({ size, shape }), "relative ring-2 ring-(--avatar-ring) bg-surface-2 font-mono tabular text-fg-muted", step);
+    return (_jsxs("div", { ref: ref, role: "group", "data-slot": "avatar-group", className: cn("flex items-center", className), ...props, children: [_jsx(AvatarGroupContext.Provider, { value: ctx, children: shown.map((child, i) => (_jsx("span", { className: cn("relative inline-flex rounded-full", i > 0 && step), children: child }, child.key ?? i))) }), extra > 0 ? (onOverflowClick ? (_jsx("button", { type: "button", "data-slot": "avatar-overflow", onClick: onOverflowClick, "aria-label": t("more", { count: extra }), className: cn(chipClass, "cursor-pointer transition-colors hover:bg-hover hover:text-fg focus-ring"), children: _jsx("span", { "aria-hidden": true, children: t("overflow", { count: extra }) }) })) : (_jsx("span", { "data-slot": "avatar-overflow", role: "img", "aria-label": t("more", { count: extra }), className: chipClass, children: _jsx("span", { "aria-hidden": true, children: t("overflow", { count: extra }) }) }))) : null] }));
+});

package/dist/components/badge.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+export declare const badgeVariants: (props?: ({
+    tone?: "accent" | "info" | "custom" | "warning" | "outline" | "danger" | "neutral" | "success" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    shape?: "square" | "pill" | null | undefined;
+    interactive?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, Omit<VariantProps<typeof badgeVariants>, "interactive"> {
+    /** Render as the child element (e.g. a `<Link>` to a filtered list). Ignored when `onRemove` is set. */
+    asChild?: boolean;
+    /** Small status dot before the label. */
+    dot?: boolean;
+    /** Any CSS colour (hex, oklch, var()) — user-defined label colours. Overrides `tone`. */
+    color?: string;
+    /** Show a number instead of children, with tabular figures and a cap (`max`). */
+    count?: number;
+    /** Cap for `count`: 120 → "99+". Default 99. */
+    max?: number;
+    /** Makes the badge a removable chip with a × button. */
+    onRemove?: () => void;
+    /** Accessible name of the × button. Default "Remove {label}" (dictionary `badge.remove`). */
+    removeLabel?: string;
+    /** Dims the badge and disables the remove button. */
+    disabled?: boolean;
+}
+/**
+ * Status, count and label pill — and the kit's chip (`onRemove`), reused by Tag input,
+ * Combobox multi-select and Filter bar. Server-compatible (the remove button and count
+ * formatting are tiny client islands).
+ *
+ * ```tsx
+ * <Badge tone="success" dot>Published</Badge>
+ * <Badge count={128} tone="accent" />            // "99+"
+ * <Badge onRemove={() => drop("design")}>Design</Badge>
+ * <Badge asChild interactive><Link href="/posts?status=draft">Draft</Link></Badge>
+ * ```
+ *
+ * No CSS `uppercase` — it breaks Turkish (i → I) without the right `lang`; use `upperText()`.
+ */
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;