@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/components/attachment-list.js

@@ -0,0 +1,196 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { AlertCircle, Download, Eye, File as FileGeneric, FileArchive, FileAudio, FileCode, FileImage, FileSpreadsheet, FileText, FileVideo, Paperclip, Plus, Presentation, RotateCcw, X, } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useFormat } from "../lib/locale.js";
+import { IconButton } from "./button.js";
+const EXT = {
+    pdf: "pdf",
+    doc: "document", docx: "document", odt: "document", rtf: "document", pages: "document",
+    xls: "spreadsheet", xlsx: "spreadsheet", ods: "spreadsheet", csv: "spreadsheet", numbers: "spreadsheet",
+    ppt: "presentation", pptx: "presentation", odp: "presentation", key: "presentation",
+    zip: "archive", rar: "archive", "7z": "archive", gz: "archive", tar: "archive",
+    png: "image", jpg: "image", jpeg: "image", gif: "image", webp: "image", avif: "image", svg: "image", heic: "image",
+    mp3: "audio", wav: "audio", m4a: "audio", ogg: "audio",
+    mp4: "video", mov: "video", webm: "video", mkv: "video",
+    js: "code", ts: "code", tsx: "code", json: "code", html: "code", css: "code", xml: "code", sql: "code",
+    txt: "text", md: "text", log: "text",
+};
+/** Splits "contract.final.pdf" into `["contract.final", ".pdf"]` (no extension → `[name, ""]`). */
+export function splitFileName(name) {
+    const i = name.lastIndexOf(".");
+    if (i <= 0 || i === name.length - 1 || name.length - i > 8)
+        return [name, ""];
+    return [name.slice(0, i), name.slice(i)];
+}
+/** Picks the file family from MIME type and extension — drives the icon and its tint. */
+export function attachmentKind(mime, name = "") {
+    const ext = splitFileName(name)[1].slice(1).toLowerCase();
+    const m = (mime ?? "").toLowerCase();
+    if (m === "application/pdf")
+        return "pdf";
+    if (m.startsWith("image/"))
+        return "image";
+    if (m.startsWith("video/"))
+        return "video";
+    if (m.startsWith("audio/"))
+        return "audio";
+    if (EXT[ext])
+        return EXT[ext];
+    if (/spreadsheet|excel|csv/.test(m))
+        return "spreadsheet";
+    if (/presentation|powerpoint/.test(m))
+        return "presentation";
+    if (/word|opendocument\.text|rtf/.test(m))
+        return "document";
+    if (/zip|compressed|tar|rar/.test(m))
+        return "archive";
+    if (/json|javascript|xml|html/.test(m))
+        return "code";
+    if (m.startsWith("text/"))
+        return "text";
+    return "other";
+}
+const KIND_ICON = {
+    image: FileImage,
+    pdf: FileText,
+    document: FileText,
+    spreadsheet: FileSpreadsheet,
+    presentation: Presentation,
+    archive: FileArchive,
+    audio: FileAudio,
+    video: FileVideo,
+    code: FileCode,
+    text: FileText,
+    other: FileGeneric,
+};
+/** Token-based tint per family (distinct, never raw colours). */
+const KIND_TONE = {
+    image: "var(--chart-4)",
+    pdf: "var(--danger)",
+    document: "var(--info)",
+    spreadsheet: "var(--success)",
+    presentation: "var(--warning)",
+    archive: "var(--chart-5)",
+    audio: "var(--chart-6)",
+    video: "var(--chart-3)",
+    code: "var(--chart-2)",
+    text: "var(--fg-muted)",
+    other: "var(--fg-muted)",
+};
+export const attachmentLabels = {
+    list: "Attachments",
+    empty: "No files attached",
+    preview: "Preview {name}",
+    download: "Download {name}",
+    remove: "Remove {name}",
+    retry: "Retry {name}",
+    uploading: "Uploading… {percent}",
+    progress: "{percent}, {name}",
+    processing: "Processing…",
+    failed: "Upload failed",
+    add: "Add files",
+    removing: "Removing…",
+};
+/** Mime-family tile: tinted icon, plus the extension in mono on larger tiles. Decorative. */
+export function AttachmentIcon({ mime, name = "", size = "md", className, style, ...props }) {
+    const kind = attachmentKind(mime, name);
+    const Icon = KIND_ICON[kind];
+    const ext = splitFileName(name)[1].slice(1).toUpperCase();
+    return (_jsxs("span", { "aria-hidden": true, "data-slot": "attachment-icon", "data-kind": kind, className: cn("relative inline-flex shrink-0 items-center justify-center rounded-ui-sm text-(--kind)", "bg-[color-mix(in_oklch,var(--kind)_11%,var(--surface-solid))] ring-1 ring-inset ring-[color-mix(in_oklch,var(--kind)_22%,transparent)]", size === "sm" && "size-6 [&_svg]:size-3.5", size === "md" && "size-9 [&_svg]:size-[18px]", size === "lg" && "size-full flex-col gap-1.5 rounded-none ring-0 [&_svg]:size-7", className), style: { ...style, ["--kind"]: KIND_TONE[kind] }, ...props, children: [_jsx(Icon, { strokeWidth: 1.6 }), size === "lg" && ext ? _jsx("span", { className: "font-mono text-[10px] font-medium tracking-[0.08em]", children: ext }) : null] }));
+}
+/** File name that truncates its base but always keeps the extension visible ("Quarterly board rep….pdf"). */
+export function AttachmentName({ name, className, ...props }) {
+    const [base, ext] = splitFileName(name);
+    return (_jsxs("span", { "data-slot": "attachment-name", dir: "auto", title: name, className: cn("flex min-w-0 items-baseline", className), ...props, children: [_jsx("span", { className: "truncate", children: base }), ext ? _jsx("span", { className: "shrink-0", children: ext }) : null] }));
+}
+/* ------------------------------------------------------------------ */
+/* AttachmentList                                                       */
+/* ------------------------------------------------------------------ */
+const listVariants = cva("", {
+    variants: {
+        layout: {
+            list: "flex flex-col divide-y divide-line overflow-hidden rounded-ui border border-line",
+            grid: "grid grid-cols-[repeat(auto-fill,minmax(9.5rem,1fr))] gap-3",
+            chips: "flex flex-wrap gap-1.5",
+        },
+    },
+    defaultVariants: { layout: "list" },
+});
+/**
+ * Files on a record — contracts on a deal, an employee's documents, a post's downloads. Mime
+ * icons tinted per family, sizes in the current locale ("1.2 MB" / "1,2 MB"), upload progress,
+ * processing and error states, preview, download and remove.
+ *
+ * ```tsx
+ * <AttachmentList items={files} onPreview={openLightbox} onRemove={removeWithUndo} onAddFiles={upload} />
+ * <AttachmentList layout="grid" items={photos} />
+ * <AttachmentList layout="chips" items={commentFiles} readOnly />
+ * ```
+ */
+export const AttachmentList = React.forwardRef(function AttachmentList({ items, layout = "list", size = "md", onPreview, onDownload, onRemove, onRetry, onAddFiles, accept, uploadSlot, readOnly, empty, labels, className, "aria-label": ariaLabel, ...props }, ref) {
+    const t = useLabels("attachments", attachmentLabels, labels);
+    const [removing, setRemoving] = React.useState(() => new Set());
+    const inputRef = React.useRef(null);
+    const remove = React.useCallback(async (file) => {
+        if (!onRemove)
+            return;
+        setRemoving((s) => new Set(s).add(file.id));
+        try {
+            await onRemove(file);
+        }
+        finally {
+            setRemoving((s) => {
+                const n = new Set(s);
+                n.delete(file.id);
+                return n;
+            });
+        }
+    }, [onRemove]);
+    const canAdd = !readOnly && Boolean(onAddFiles);
+    const hasTail = canAdd || (!readOnly && uploadSlot);
+    if (items.length === 0 && !hasTail) {
+        return (_jsxs("div", { ref: ref, "data-slot": "attachment-list", className: cn("flex items-center gap-2 rounded-ui border border-dashed border-line px-3 py-3 text-sm text-fg-subtle", className), ...props, children: [_jsx(Paperclip, { className: "size-4", "aria-hidden": true }), empty ?? t("empty")] }));
+    }
+    const addButton = canAdd ? (_jsxs(_Fragment, { children: [_jsx("input", { ref: inputRef, type: "file", multiple: true, accept: accept, hidden: true, tabIndex: -1, "aria-hidden": true, onChange: (e) => {
+                    const files = Array.from(e.currentTarget.files ?? []);
+                    if (files.length)
+                        onAddFiles(files);
+                    e.currentTarget.value = "";
+                } }), _jsxs("button", { type: "button", "data-slot": "attachment-add", onClick: () => inputRef.current?.click(), className: cn("inline-flex cursor-pointer items-center justify-center gap-1.5 text-fg-muted transition-colors hover:text-fg focus-ring [&_svg]:size-4", layout === "list" && "h-10 w-full px-3 text-[13px] hover:bg-hover", layout === "grid" && "aspect-[4/3] w-full flex-col rounded-ui border border-dashed border-field-border text-[13px] hover:border-field-border-hover hover:bg-hover", layout === "chips" && "h-7 rounded-full border border-dashed border-field-border px-2.5 text-xs hover:bg-hover"), children: [_jsx(Plus, { "aria-hidden": true }), t("add")] })] })) : null;
+    return (_jsxs("div", { ref: ref, role: "list", "aria-label": ariaLabel ?? t("list"), "data-slot": "attachment-list", "data-layout": layout, className: cn(listVariants({ layout }), className), ...props, children: [items.map((file) => (_jsx(AttachmentItem, { file: file, layout: layout, size: size, removing: removing.has(file.id), onPreview: onPreview, onDownload: onDownload, onRemove: readOnly || !onRemove ? undefined : remove, onRetry: readOnly ? undefined : onRetry, t: t }, file.id))), hasTail ? (_jsxs("div", { role: "listitem", "data-slot": "attachment-tail", className: cn(layout === "chips" && "contents"), children: [!readOnly ? uploadSlot : null, addButton] })) : null] }));
+});
+function AttachmentItem({ file, layout, size, removing, onPreview, onDownload, onRemove, onRetry, t }) {
+    const f = useFormat();
+    const status = file.status ?? "ready";
+    const ready = status === "ready";
+    const percent = f.percent(Math.max(0, Math.min(100, file.progress ?? 0)) / 100, { maximumFractionDigits: 0 });
+    const isImage = attachmentKind(file.mime, file.name) === "image";
+    const nameEl = ready && onPreview ? (_jsx("button", { type: "button", onClick: () => onPreview(file), className: "min-w-0 cursor-pointer text-start font-medium text-fg after:absolute after:inset-0 hover:underline focus-ring focus-visible:after:rounded-[inherit] underline-offset-2", children: _jsx(AttachmentName, { name: file.name }) })) : ready && file.url ? (_jsx("a", { href: file.url, target: "_blank", rel: "noreferrer", className: "min-w-0 font-medium text-fg after:absolute after:inset-0 hover:underline focus-ring underline-offset-2", children: _jsx(AttachmentName, { name: file.name }) })) : (_jsx(AttachmentName, { name: file.name, className: cn("font-medium", ready ? "text-fg" : "text-fg-muted") }));
+    const meta = [f.bytes(file.size)];
+    if (file.uploadedBy)
+        meta.push(file.uploadedBy);
+    if (file.uploadedAt)
+        meta.push(f.date(file.uploadedAt, "medium"));
+    const statusLine = status === "uploading" ? (_jsx("span", { className: "tabular", children: t("uploading", { percent }) })) : status === "processing" ? (_jsx("span", { children: t("processing") })) : status === "error" ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-danger", children: [_jsx(AlertCircle, { className: "size-3.5", "aria-hidden": true }), file.error ?? t("failed")] })) : (_jsx("span", { className: "tabular", children: meta.join(" · ") }));
+    const progressBar = status === "uploading" || status === "processing" ? (_jsx("span", { role: "progressbar", "aria-label": file.name, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": status === "uploading" ? (file.progress ?? 0) : undefined, "aria-valuetext": status === "uploading" ? t("progress", { percent, name: file.name }) : t("processing"), "data-indeterminate": status === "processing" ? "" : undefined, className: "ui-attachment-progress relative block h-1 w-full overflow-hidden rounded-full bg-track", children: _jsx("span", { className: "absolute inset-y-0 start-0 rounded-full bg-accent transition-[width] duration-300", style: status === "uploading" ? { width: `${file.progress ?? 0}%` } : undefined }) })) : null;
+    const download = ready && (onDownload || file.url) ? (onDownload ? (_jsx(IconButton, { label: t("download", { name: file.name }), size: "xs", tooltip: false, onClick: () => onDownload(file), children: _jsx(Download, {}) })) : (_jsx(IconButton, { asChild: true, label: t("download", { name: file.name }), size: "xs", tooltip: false, children: _jsx("a", { href: file.url, download: file.name, children: _jsx(Download, {}) }) }))) : null;
+    const actions = (_jsxs("span", { "data-slot": "attachment-actions", className: "relative z-1 flex shrink-0 items-center gap-0.5", children: [status === "error" && onRetry ? (_jsx(IconButton, { label: t("retry", { name: file.name }), size: "xs", tooltip: false, onClick: () => onRetry(file), children: _jsx(RotateCcw, {}) })) : null, layout !== "chips" && ready && onPreview ? (_jsx(IconButton, { label: t("preview", { name: file.name }), size: "xs", tooltip: false, onClick: () => onPreview(file), className: "max-sm:hidden", children: _jsx(Eye, {}) })) : null, layout !== "chips" ? download : null, onRemove ? (_jsx(IconButton, { label: t("remove", { name: file.name }), size: "xs", tooltip: false, variant: "ghost", disabled: removing, onClick: () => onRemove(file), className: "hover:text-danger", children: _jsx(X, {}) })) : null] }));
+    const common = {
+        role: "listitem",
+        "data-slot": "attachment",
+        "data-status": status,
+        "data-removing": removing ? "" : undefined,
+        "aria-busy": removing || status === "uploading" || status === "processing" || undefined,
+    };
+    if (layout === "chips") {
+        return (_jsxs("div", { ...common, className: cn("relative inline-flex h-7 max-w-64 items-center gap-1.5 rounded-full border border-line bg-surface-2 ps-1 pe-0.5 text-xs transition-opacity", status === "error" && "border-[color-mix(in_srgb,var(--danger)_40%,transparent)]", removing && "opacity-40", !onRemove && "pe-2.5"), children: [_jsx(AttachmentIcon, { mime: file.mime, name: file.name, size: "sm", className: "size-5 rounded-full [&_svg]:size-3" }), nameEl, _jsx("span", { className: "shrink-0 text-fg-subtle tabular", children: status === "uploading" ? percent : f.bytes(file.size) }), (onRemove || (status === "error" && onRetry)) ? actions : null] }));
+    }
+    if (layout === "grid") {
+        return (_jsxs("div", { ...common, className: cn("group relative flex min-w-0 flex-col overflow-hidden rounded-ui border border-line bg-surface-2 transition-[opacity,border-color] hover:border-field-border-hover", removing && "opacity-40"), children: [_jsxs("div", { className: "relative aspect-[4/3] overflow-hidden border-b border-line bg-[color-mix(in_oklch,var(--surface-2),var(--fg)_3%)]", children: [file.thumbUrl || (isImage && file.url && ready) ? (_jsx("img", { src: file.thumbUrl ?? file.url, alt: "", loading: "lazy", className: cn("size-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-[1.03]", !ready && "opacity-50 grayscale") })) : (_jsx(AttachmentIcon, { mime: file.mime, name: file.name, size: "lg" })), progressBar ? _jsx("span", { className: "absolute inset-x-2 bottom-2", children: progressBar }) : null, _jsx("span", { className: "absolute end-1.5 top-1.5 z-1 flex rounded-ui-sm border border-popover-border bg-popover-nested p-0.5 shadow-sm transition-opacity sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 [@media(hover:none)]:opacity-100", children: actions })] }), _jsxs("div", { className: "grid min-w-0 gap-0.5 px-2.5 py-2 text-[13px]", children: [nameEl, _jsx("span", { className: "truncate text-[11.5px] text-fg-muted", children: statusLine })] })] }));
+    }
+    return (_jsxs("div", { ...common, className: cn("group relative flex items-center gap-3 bg-transparent transition-[opacity,background-color] hover:bg-hover", size === "sm" ? "min-h-11 px-2.5 py-1.5 text-[13px]" : "min-h-14 px-3 py-2 text-sm", removing && "opacity-40", status === "error" && "bg-[color-mix(in_srgb,var(--danger)_5%,transparent)]"), children: [isImage && (file.thumbUrl || file.url) && ready ? (_jsx("img", { src: file.thumbUrl ?? file.url, alt: "", loading: "lazy", className: cn("shrink-0 rounded-ui-sm object-cover ring-1 ring-line", size === "sm" ? "size-7" : "size-9") })) : (_jsx(AttachmentIcon, { mime: file.mime, name: file.name, size: size === "sm" ? "sm" : "md", className: size === "sm" ? "size-7" : undefined })), _jsxs("div", { className: "grid min-w-0 flex-1 gap-1", children: [nameEl, progressBar ? _jsxs("span", { className: "flex items-center gap-2 text-xs text-fg-muted", children: [progressBar, _jsx("span", { className: "shrink-0", children: statusLine })] }) : _jsx("span", { className: "truncate text-xs text-fg-muted", children: statusLine })] }), actions] }));
+}

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] })] })] }));
+}