@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/business/permission-matrix.js

@@ -0,0 +1,341 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, ChevronRight, Lock, Minus, ShieldCheck, Eye } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+import { Button } from "../components/button.js";
+import { Badge } from "../components/badge.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuItem, DropdownMenuTrigger } from "../components/dropdown-menu.js";
+import { Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader } from "../components/dialog.js";
+import { applyDependencies, diffPermissions, effectiveLevel, isGranted, scopeRank, setMany, setPermission, SCOPE_ORDER, } from "./permission-core.js";
+export const permissionMatrixLabels = {
+    label: "Permissions",
+    resource: "Resource",
+    none: "None",
+    own: "Own",
+    team: "Team",
+    all: "All",
+    granted: "Allowed",
+    denied: "Not allowed",
+    notApplicable: "Not applicable",
+    cell: "{resource}, {action}: {level}",
+    inheritedFrom: "From {role}",
+    inheritedState: "{level}, inherited from {role}",
+    override: "Changed from {role}",
+    reset: "Reset to inherited",
+    grantRow: "Grant all actions on {resource}",
+    revokeRow: "Revoke all actions on {resource}",
+    grantColumn: "Grant {action} on all resources",
+    revokeColumn: "Revoke {action} on all resources",
+    grantGroup: "Grant everything in {group}",
+    revokeGroup: "Revoke everything in {group}",
+    collapse: "Collapse {group}",
+    expand: "Expand {group}",
+    scopeMenu: "Scope for {resource}, {action}",
+    dependencyRaised: "{requires} enabled because {action} requires it",
+    dependencyLowered: "{action} lowered because it requires {requires}",
+    changes: "{count, plural, one {# change} other {# changes}}",
+    review: "Review",
+    discard: "Discard",
+    save: "Save",
+    close: "Close",
+    reviewTitle: "Review permission changes",
+    reviewDescription: "{count, plural, one {# change} other {# changes}} for {subject}.",
+    change: "{resource} · {action}: {from} → {to}",
+    dangerous: "Sensitive",
+    noChanges: "No changes",
+    readOnly: "System role · read only",
+    differs: "Differs",
+    permission: "Permission",
+    keyboard: "Arrow keys move. Space toggles, Enter opens scopes, 1–4 pick a scope, Delete resets to inherited.",
+};
+const levelLabel = (t, v, scoped, scopeNames) => {
+    if (!scoped)
+        return isGranted(v) ? t("granted") : t("denied");
+    const s = v === true ? "all" : v === false || v === undefined ? "none" : v;
+    return scopeNames?.[s] ?? t(s);
+};
+/**
+ * Who may do what: resources × actions with checkbox or scope cells (None / Own / Team / All),
+ * inheritance from a parent role, row / column / group bulk toggles, dependencies ("Edit needs
+ * View"), sticky headers, and a review-before-save diff. A WAI-ARIA grid.
+ *
+ * ```tsx
+ * <PermissionMatrix resources={resources} actions={actions} value={value} onValueChange={setValue}
+ *   inherited={manager} inheritedFrom="Manager" baseline={saved} onSave={save} dependencies={[{ action: "edit", requires: "view" }]} />
+ * ```
+ */
+export const PermissionMatrix = React.forwardRef(function PermissionMatrix({ resources, actions, scopes, value: valueProp, defaultValue, onValueChange, inherited, inheritedFrom = "parent role", baseline, onSave, subject = "this role", readOnly, dependencies, onDependencyApplied, maxHeight, labels, className, ...props }, ref) {
+    const t = useLabels("permissionMatrix", permissionMatrixLabels, labels);
+    const [value, setValueState] = useControllableState({ value: valueProp, defaultValue: defaultValue ?? {} });
+    const [collapsed, setCollapsed] = React.useState(() => new Set());
+    const [focus, setFocus] = React.useState({ r: 0, c: 0 });
+    const [live, setLive] = React.useState("");
+    const [reviewOpen, setReviewOpen] = React.useState(false);
+    const [saving, setSaving] = React.useState(false);
+    const gridRef = React.useRef(null);
+    const scopeNames = React.useMemo(() => (scopes ? Object.fromEntries(scopes.map((s) => [s.id, s.label])) : undefined), [scopes]);
+    // Groups in first-seen order.
+    const groups = React.useMemo(() => {
+        const out = [];
+        for (const r of resources) {
+            const key = r.group ?? "";
+            let g = out.find((x) => x.key === key);
+            if (!g)
+                out.push((g = { key, label: r.group, resources: [] }));
+            g.resources.push(r);
+        }
+        return out;
+    }, [resources]);
+    const visibleRows = groups.flatMap((g) => (collapsed.has(g.key) ? [] : g.resources));
+    const actionById = React.useMemo(() => new Map(actions.map((a) => [a.id, a])), [actions]);
+    const applies = (r, a) => !r.actions || r.actions.includes(a.id);
+    const commit = (next, changed) => {
+        let v = next;
+        if (dependencies?.length) {
+            const res = applyDependencies(next, dependencies, { changed, scoped: (id) => !!actionById.get(id)?.scoped, resources: resources.map((r) => r.id) });
+            v = res.value;
+            const first = res.adjusted[0];
+            if (first) {
+                const raised = first.action === first.reason.requires;
+                const msg = t(raised ? "dependencyRaised" : "dependencyLowered", {
+                    action: actionById.get(first.reason.action)?.label ?? first.reason.action,
+                    requires: actionById.get(first.reason.requires)?.label ?? first.reason.requires,
+                });
+                setLive(msg);
+                onDependencyApplied?.(msg);
+            }
+        }
+        setValueState(v);
+        onValueChange?.(v);
+    };
+    const setCell = (r, a, level) => {
+        if (readOnly || !applies(r, a))
+            return;
+        commit(setPermission(value, r.id, a.id, level), { resource: r.id, action: a.id });
+    };
+    const toggleCell = (r, a) => {
+        const cur = effectiveLevel(value, inherited, r.id, a.id);
+        if (a.scoped)
+            setCell(r, a, isGranted(cur) ? "none" : "all");
+        else
+            setCell(r, a, !isGranted(cur));
+    };
+    const resetCell = (r, a) => {
+        if (readOnly)
+            return;
+        commit(setPermission(value, r.id, a.id, undefined), { resource: r.id, action: a.id });
+    };
+    const bulk = (cells) => {
+        const list = cells.filter((x) => applies(x.r, x.a));
+        if (readOnly || !list.length)
+            return;
+        const allOn = list.every((x) => scopeRank(effectiveLevel(value, inherited, x.r.id, x.a.id)) === 3);
+        const next = setMany(value, list.map((x) => ({ resource: x.r.id, action: x.a.id })), (c) => (actionById.get(c.action)?.scoped ? (allOn ? "none" : "all") : !allOn));
+        commit(next);
+    };
+    const allGranted = (cells) => {
+        const list = cells.filter((x) => applies(x.r, x.a));
+        return list.length > 0 && list.every((x) => scopeRank(effectiveLevel(value, inherited, x.r.id, x.a.id)) === 3);
+    };
+    const changes = React.useMemo(() => (baseline ? diffPermissions(baseline, value) : []), [baseline, value]);
+    const changedKey = React.useMemo(() => new Set(changes.map((c) => `${c.resource}\u0000${c.action}`)), [changes]);
+    // Roving focus. r = -1 → header row (column toggles); c = -1 → row header (row toggle).
+    const clamp = (cell) => ({
+        r: Math.max(-1, Math.min(visibleRows.length - 1, cell.r)),
+        c: Math.max(-1, Math.min(actions.length - 1, cell.c)),
+    });
+    const cur = clamp(focus);
+    const focusAt = (cell) => {
+        const next = clamp(cell);
+        if (next.r === -1 && next.c === -1)
+            next.c = 0;
+        setFocus(next);
+        requestAnimationFrame(() => gridRef.current?.querySelector(`[data-pm-pos="${next.r}:${next.c}"]`)?.focus());
+    };
+    const onKeyNav = (e, cell) => {
+        const mod = e.ctrlKey || e.metaKey;
+        let target = null;
+        if (e.key === "ArrowRight")
+            target = { r: cell.r, c: cell.c + 1 };
+        else if (e.key === "ArrowLeft")
+            target = { r: cell.r, c: cell.c - 1 };
+        else if (e.key === "ArrowDown")
+            target = { r: cell.r + 1, c: cell.c };
+        else if (e.key === "ArrowUp")
+            target = { r: cell.r - 1, c: cell.c };
+        else if (e.key === "Home")
+            target = mod ? { r: 0, c: 0 } : { r: cell.r, c: -1 };
+        else if (e.key === "End")
+            target = mod ? { r: visibleRows.length - 1, c: actions.length - 1 } : { r: cell.r, c: actions.length - 1 };
+        else if (e.key === "PageDown")
+            target = { r: cell.r + 5, c: cell.c };
+        else if (e.key === "PageUp")
+            target = { r: cell.r - 5, c: cell.c };
+        if (target) {
+            // RTL: left/right swap visually.
+            const rtl = gridRef.current?.closest("[dir=rtl]");
+            if (rtl && (e.key === "ArrowRight" || e.key === "ArrowLeft"))
+                target = { r: cell.r, c: cell.c + (e.key === "ArrowRight" ? -1 : 1) };
+            e.preventDefault();
+            focusAt(target);
+            return true;
+        }
+        return false;
+    };
+    const tab = (cell) => (cur.r === cell.r && cur.c === cell.c ? 0 : -1);
+    const colCount = actions.length + 1;
+    return (_jsxs("div", { ref: ref, "data-slot": "permission-matrix", "data-readonly": readOnly ? "" : undefined, className: cn("vui-pm flex min-w-0 flex-col", className), ...props, children: [_jsx("div", { className: "vui-pm-scroll overflow-auto rounded-ui-lg border border-line bg-surface", style: maxHeight ? { maxHeight } : undefined, children: _jsxs("table", { ref: gridRef, role: "grid", "aria-label": props["aria-label"] ?? t("label"), "aria-readonly": readOnly || undefined, className: "w-full border-separate border-spacing-0 text-sm", children: [_jsx("caption", { className: "sr-only", children: t("keyboard") }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: "vui-pm-sticky vui-pm-corner sticky start-0 top-0 z-30 border-b border-line px-3 py-2.5 text-start text-[11px] font-medium tracking-[0.04em] text-fg-subtle uppercase", children: readOnly ? (_jsxs("span", { className: "inline-flex items-center gap-1.5 normal-case tracking-normal", children: [_jsx(Lock, { "aria-hidden": true, className: "size-3" }), " ", t("readOnly")] })) : (t("resource")) }), actions.map((a, ci) => {
+                                        const cells = visibleRows.map((r) => ({ r, a }));
+                                        const on = allGranted(cells);
+                                        return (_jsx("th", { scope: "col", className: "vui-pm-sticky sticky top-0 z-20 min-w-[6.5rem] border-b border-line px-1.5 py-1.5 text-center font-medium", children: readOnly ? (_jsx("span", { className: "block px-1.5 py-1 text-[13px] text-fg", children: a.label })) : (_jsxs("button", { type: "button", "data-pm-pos": `-1:${ci}`, tabIndex: tab({ r: -1, c: ci }), "aria-label": t(on ? "revokeColumn" : "grantColumn", { action: a.label }), title: t(on ? "revokeColumn" : "grantColumn", { action: a.label }), onFocus: () => setFocus({ r: -1, c: ci }), onKeyDown: (e) => onKeyNav(e, { r: -1, c: ci }), onClick: () => bulk(cells), className: "focus-ring inline-flex w-full items-center justify-center gap-1 rounded-ui-sm px-1.5 py-1 text-[13px] text-fg hover:bg-hover", children: [a.label, a.danger ? _jsx("span", { "aria-hidden": true, className: "size-1.5 rounded-full bg-danger" }) : null] })) }, a.id));
+                                    })] }) }), groups.map((g) => {
+                            const isCollapsed = collapsed.has(g.key);
+                            const groupCells = g.resources.flatMap((r) => actions.map((a) => ({ r, a })));
+                            const groupOn = allGranted(groupCells);
+                            return (_jsxs("tbody", { "data-slot": "permission-matrix-group", children: [g.label ? (_jsx("tr", { className: "vui-pm-group-row", children: _jsx("th", { scope: "colgroup", colSpan: colCount, className: "vui-pm-sticky-group sticky start-0 border-b border-line px-1.5 py-1 text-start", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("button", { type: "button", "aria-expanded": !isCollapsed, 
+                                                        // The visible group name is the accessible name (WCAG 2.5.3); aria-expanded carries the state.
+                                                        title: t(isCollapsed ? "expand" : "collapse", { group: g.label }), onClick: () => setCollapsed((s) => {
+                                                            const n = new Set(s);
+                                                            if (n.has(g.key))
+                                                                n.delete(g.key);
+                                                            else
+                                                                n.add(g.key);
+                                                            return n;
+                                                        }), className: "focus-ring inline-flex items-center gap-1.5 rounded-ui-sm px-1.5 py-1 font-mono text-[11px] font-medium tracking-[0.06em] text-fg-muted uppercase hover:bg-hover", children: [_jsx(ChevronRight, { "aria-hidden": true, className: cn("size-3.5 transition-transform duration-150 rtl:rotate-180", !isCollapsed && "rotate-90 rtl:rotate-90") }), g.label, _jsxs("span", { className: "font-sans tracking-normal text-fg-subtle normal-case tabular", children: ["\u00B7 ", g.resources.length] })] }), !readOnly ? (_jsx(Button, { size: "xs", variant: "ghost", className: "ms-auto text-fg-muted", onClick: () => bulk(groupCells), children: t(groupOn ? "revokeGroup" : "grantGroup", { group: g.label }) })) : null] }) }) })) : null, isCollapsed
+                                        ? null
+                                        : g.resources.map((r) => {
+                                            const ri = visibleRows.indexOf(r);
+                                            const rowCells = actions.map((a) => ({ r, a }));
+                                            const rowOn = allGranted(rowCells);
+                                            return (_jsxs("tr", { "data-slot": "permission-matrix-row", className: "vui-pm-row", children: [_jsx("th", { scope: "row", className: "vui-pm-sticky-col sticky start-0 z-10 border-b border-line px-1.5 py-1 text-start font-normal", children: readOnly ? (_jsxs("span", { className: "block px-1.5 py-1", children: [_jsx("span", { className: "block text-[13px] font-medium text-fg", children: r.label }), r.description ? _jsx("span", { className: "block text-xs text-fg-subtle", children: r.description }) : null] })) : (_jsxs("button", { type: "button", "data-pm-pos": `${ri}:-1`, tabIndex: tab({ r: ri, c: -1 }), onFocus: () => setFocus({ r: ri, c: -1 }), onKeyDown: (e) => onKeyNav(e, { r: ri, c: -1 }), onClick: () => bulk(rowCells), className: "focus-ring group/rt flex w-full min-w-[11rem] items-center gap-2 rounded-ui-sm px-1.5 py-1 text-start hover:bg-hover", children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block text-[13px] font-medium text-fg", children: r.label }), r.description ? _jsx("span", { className: "block text-xs text-fg-subtle", children: r.description }) : null] }), _jsxs("span", { className: "sr-only", children: [", ", t(rowOn ? "revokeRow" : "grantRow", { resource: r.label })] }), _jsx(ShieldCheck, { "aria-hidden": true, className: cn("size-3.5 shrink-0 text-fg-subtle opacity-0 transition-opacity group-hover/rt:opacity-100 group-focus-visible/rt:opacity-100", rowOn && "text-accent-ink opacity-100") })] })) }), actions.map((a, ci) => (_jsx("td", { role: "gridcell", className: "border-b border-line px-1 py-1 text-center", children: _jsx(PermissionMatrixCell, { resource: r, action: a, applicable: applies(r, a), own: value[r.id]?.[a.id], inherited: inherited?.[r.id]?.[a.id], inheritedFrom: inheritedFrom, changed: changedKey.has(`${r.id}\u0000${a.id}`), readOnly: readOnly, scopeNames: scopeNames, pos: `${ri}:${ci}`, tabIndex: tab({ r: ri, c: ci }), onFocus: () => setFocus({ r: ri, c: ci }), onNav: (e) => onKeyNav(e, { r: ri, c: ci }), onToggle: () => toggleCell(r, a), onSet: (l) => setCell(r, a, l), onReset: () => resetCell(r, a), t: t }) }, a.id)))] }, r.id));
+                                        })] }, g.key || "_"));
+                        })] }) }), _jsx("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": true, children: live }), baseline && changes.length && !readOnly ? (_jsxs("div", { "data-slot": "permission-matrix-savebar", className: "vui-pm-savebar sticky bottom-3 z-30 mx-auto mt-3 flex w-fit max-w-full items-center gap-2 rounded-full surface-popover py-1.5 ps-4 pe-1.5 text-sm", children: [_jsxs("span", { className: "inline-flex items-center gap-2 text-fg tabular", "aria-live": "polite", children: [_jsx("span", { "aria-hidden": true, className: "size-1.5 rounded-full bg-accent-ink" }), t("changes", { count: changes.length })] }), _jsxs(Button, { size: "sm", variant: "ghost", onClick: () => setReviewOpen(true), children: [_jsx(Eye, {}), " ", t("review")] }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => commit(baseline), children: t("discard") }), onSave ? (_jsx(Button, { size: "sm", variant: "primary", pill: true, loading: saving, onClick: async () => {
+                            setSaving(true);
+                            try {
+                                await onSave(value, changes);
+                            }
+                            finally {
+                                setSaving(false);
+                            }
+                        }, children: t("save") })) : null] })) : null, baseline ? (_jsx(Dialog, { open: reviewOpen, onOpenChange: setReviewOpen, children: _jsxs(DialogContent, { size: "md", children: [_jsx(DialogHeader, { title: t("reviewTitle"), description: t("reviewDescription", { count: changes.length, subject }) }), _jsx(DialogBody, { children: _jsx(PermissionDiff, { changes: changes, resources: resources, actions: actions, scopes: scopes, labels: labels }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => setReviewOpen(false), children: t("close") }), onSave ? (_jsx(Button, { variant: "primary", loading: saving, onClick: async () => {
+                                        setSaving(true);
+                                        try {
+                                            await onSave(value, changes);
+                                            setReviewOpen(false);
+                                        }
+                                        finally {
+                                            setSaving(false);
+                                        }
+                                    }, children: t("save") })) : null] })] }) })) : null] }));
+});
+/** One grid cell: a checkbox (boolean actions) or a scope menu (scoped actions). */
+export function PermissionMatrixCell({ resource: r, action: a, applicable, own, inherited, inheritedFrom, changed, readOnly, scopeNames, pos, tabIndex, onFocus, onNav, onToggle, onSet, onReset, t, }) {
+    const level = own !== undefined ? own : inherited;
+    const isInherited = own === undefined && inherited !== undefined;
+    const isOverride = own !== undefined && inherited !== undefined && scopeRank(own) !== scopeRank(inherited);
+    const rank = scopeRank(level);
+    const text = levelLabel(t, level, !!a.scoped, scopeNames);
+    const state = isInherited ? t("inheritedState", { level: text, role: inheritedFrom }) : text;
+    const name = t("cell", { resource: r.label, action: a.label, level: state });
+    const danger = !!a.danger && rank === 3;
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const common = {
+        "data-pm-pos": pos,
+        tabIndex,
+        onFocus,
+        "data-level": a.scoped ? SCOPE_ORDER[rank] : rank ? "on" : "off",
+        "data-inherited": isInherited ? "" : undefined,
+        "data-override": isOverride ? "" : undefined,
+        "data-changed": changed ? "" : undefined,
+        "data-danger": danger ? "" : undefined,
+        title: isInherited ? t("inheritedFrom", { role: inheritedFrom }) : isOverride ? t("override", { role: inheritedFrom }) : undefined,
+    };
+    const base = "vui-pm-cell focus-ring relative inline-flex h-8 w-full min-w-[5.5rem] items-center justify-center gap-1 rounded-ui-sm text-xs font-medium transition-[background-color,box-shadow,color] duration-150";
+    if (!applicable) {
+        return (_jsx("span", { ...common, role: "img", "aria-label": t("cell", { resource: r.label, action: a.label, level: t("notApplicable") }), className: cn(base, "text-fg-subtle/60"), onKeyDown: (e) => void onNav(e), children: _jsx(Minus, { "aria-hidden": true, className: "size-3" }) }));
+    }
+    const marks = (_jsxs(_Fragment, { children: [isInherited ? _jsx(Lock, { "aria-hidden": true, className: "size-3 text-fg-subtle" }) : null, changed ? _jsx("span", { "aria-hidden": true, className: "vui-pm-dot absolute end-1 top-1 size-1.5 rounded-full bg-accent-ink" }) : null] }));
+    const scopeKeys = (e) => {
+        if (readOnly)
+            return false;
+        if (["1", "2", "3", "4"].includes(e.key) && a.scoped) {
+            e.preventDefault();
+            onSet(SCOPE_ORDER[Number(e.key) - 1]);
+            return true;
+        }
+        if ((e.key === "Delete" || e.key === "Backspace") && own !== undefined && inherited !== undefined) {
+            e.preventDefault();
+            onReset();
+            return true;
+        }
+        return false;
+    };
+    if (!a.scoped) {
+        return (_jsxs("button", { type: "button", role: "checkbox", "aria-checked": rank > 0, "aria-label": name, "aria-readonly": readOnly || undefined, ...common, onClick: () => !readOnly && onToggle(), onKeyDown: (e) => {
+                if (onNav(e) || scopeKeys(e))
+                    return;
+                if (e.key === "Enter") {
+                    e.preventDefault();
+                    if (!readOnly)
+                        onToggle();
+                }
+            }, className: cn(base, !readOnly && "hover:bg-hover", isInherited && "opacity-75"), children: [_jsx("span", { "aria-hidden": true, className: cn("vui-pm-check inline-flex size-[18px] items-center justify-center rounded-[5px] border transition-colors", rank ? "border-transparent bg-accent text-accent-fg" : "border-field-border bg-field", danger && "tone-danger border-transparent bg-(--tone) text-scene", isInherited && rank && "border-dashed border-accent-ink bg-accent-soft text-accent-ink"), children: rank ? _jsx(Check, { strokeWidth: 3, className: "size-3" }) : null }), marks] }));
+    }
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: "vui-pm-level-text", children: rank === 0 ? _jsx("span", { className: "text-fg-subtle", children: "\u2014" }) : text }), rank === 3 ? _jsx(ShieldCheck, { "aria-hidden": true, className: "size-3" }) : null, marks] }));
+    if (readOnly) {
+        return (_jsx("span", { ...common, role: "img", "aria-label": name, className: cn(base, "vui-pm-scope"), onKeyDown: (e) => void onNav(e), children: content }));
+    }
+    return (_jsxs(DropdownMenu, { open: menuOpen, onOpenChange: setMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": name, ...common, onKeyDown: (e) => {
+                        if (onNav(e) || scopeKeys(e)) {
+                            e.preventDefault();
+                            return;
+                        }
+                        if (e.key === " ") {
+                            // Space toggles None ↔ All; Enter opens the menu.
+                            e.preventDefault();
+                            onToggle();
+                        }
+                    }, onPointerDown: (e) => {
+                        // Keep Radix from opening on pointerdown so a click opens like Enter does.
+                        if (e.button === 0 && !e.ctrlKey) {
+                            e.preventDefault();
+                            setMenuOpen((o) => !o);
+                        }
+                    }, className: cn(base, "vui-pm-scope hover:brightness-[0.97]", isInherited && "opacity-75"), children: content }) }), _jsxs(DropdownMenuContent, { align: "center", className: "min-w-44", children: [_jsx(DropdownMenuLabel, { children: t("scopeMenu", { resource: r.label, action: a.label }) }), _jsx(DropdownMenuRadioGroup, { value: SCOPE_ORDER[rank], onValueChange: (v) => onSet(v), children: SCOPE_ORDER.map((s, i) => (_jsxs(DropdownMenuRadioItem, { value: s, children: [_jsx("span", { className: "flex-1", children: scopeNames?.[s] ?? t(s) }), _jsx("span", { className: "ms-4 font-mono text-[11px] text-fg-subtle", children: i + 1 })] }, s))) }), own !== undefined && inherited !== undefined ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onSelect: onReset, children: t("reset") })] })) : null] })] }));
+}
+/** The review list before saving: "Quotes · Delete: None → Team", sensitive grants flagged. */
+export function PermissionDiff({ changes, resources, actions, scopes, labels, className, ...props }) {
+    const t = useLabels("permissionMatrix", permissionMatrixLabels, labels);
+    const scopeNames = scopes ? Object.fromEntries(scopes.map((s) => [s.id, s.label])) : undefined;
+    if (!changes.length)
+        return _jsx("p", { className: "text-sm text-fg-subtle", children: t("noChanges") });
+    return (_jsx("ul", { "data-slot": "permission-diff", className: cn("m-0 flex list-none flex-col divide-y divide-line rounded-ui-lg border border-line p-0", className), ...props, children: changes.map((c) => {
+            const r = resources.find((x) => x.id === c.resource);
+            const a = actions.find((x) => x.id === c.action);
+            const scoped = !!a?.scoped;
+            const from = levelLabel(t, c.from, scoped, scopeNames);
+            const to = levelLabel(t, c.to, scoped, scopeNames);
+            const up = scopeRank(c.to) > scopeRank(c.from);
+            return (_jsxs("li", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 px-3.5 py-2.5 text-sm", children: [_jsxs("span", { className: "min-w-0 flex-1 text-fg", children: [_jsx("span", { className: "font-medium", children: r?.label ?? c.resource }), _jsx("span", { className: "text-fg-subtle", children: " \u00B7 " }), a?.label ?? c.action] }), _jsxs("span", { className: "inline-flex items-center gap-1.5 text-[13px] tabular", children: [_jsx("span", { className: "text-fg-muted line-through decoration-fg-subtle/50", children: from }), _jsx("span", { "aria-hidden": true, className: "text-fg-subtle", children: "\u2192" }), _jsx("span", { className: cn("font-medium", up ? "text-fg" : "text-fg-muted"), children: to }), _jsx("span", { className: "sr-only", children: t("change", { resource: r?.label ?? c.resource, action: a?.label ?? c.action, from, to }) })] }), a?.danger && up ? (_jsx(Badge, { tone: "danger", size: "sm", children: t("dangerous") })) : null] }, `${c.resource}:${c.action}`));
+        }) }));
+}
+/** Subjects side by side: one row per permission, one column per role or plan. Read-only. */
+export function PermissionCompare({ subjects, resources, actions, scopes, onlyDifferences, highlightDifferences = true, maxHeight, labels, className, ...props }) {
+    const t = useLabels("permissionMatrix", permissionMatrixLabels, labels);
+    const scopeNames = scopes ? Object.fromEntries(scopes.map((s) => [s.id, s.label])) : undefined;
+    const rows = resources.flatMap((r) => actions
+        .filter((a) => !r.actions || r.actions.includes(a.id))
+        .map((a) => {
+        const levels = subjects.map((s) => s.value[r.id]?.[a.id]);
+        const differs = new Set(levels.map((l) => scopeRank(l))).size > 1;
+        return { r, a, levels, differs };
+    }));
+    const shown = onlyDifferences ? rows.filter((x) => x.differs) : rows;
+    return (_jsx("div", { "data-slot": "permission-compare", className: cn("vui-pm overflow-auto rounded-ui-lg border border-line bg-surface", className), style: maxHeight ? { maxHeight } : undefined, ...props, children: _jsxs("table", { className: "w-full border-separate border-spacing-0 text-sm", children: [_jsx("caption", { className: "sr-only", children: props["aria-label"] ?? t("label") }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: "vui-pm-sticky vui-pm-corner sticky start-0 top-0 z-30 border-b border-line px-3 py-2.5 text-start text-[11px] font-medium tracking-[0.04em] text-fg-subtle uppercase", children: t("permission") }), subjects.map((s) => (_jsxs("th", { scope: "col", className: "vui-pm-sticky sticky top-0 z-20 min-w-[8rem] border-b border-line px-3 py-2 text-center align-bottom", children: [_jsx("span", { className: "block text-[13px] font-semibold text-fg", children: s.label }), s.description ? _jsx("span", { className: "block text-[11px] font-normal text-fg-subtle", children: s.description }) : null] }, s.id)))] }) }), _jsx("tbody", { children: shown.map(({ r, a, levels, differs }) => (_jsxs("tr", { "data-differs": differs ? "" : undefined, className: cn(highlightDifferences && differs && "vui-pm-differs"), children: [_jsxs("th", { scope: "row", className: "vui-pm-sticky-col sticky start-0 z-10 border-b border-line px-3 py-2 text-start font-normal", children: [_jsx("span", { className: "text-[13px] font-medium text-fg", children: r.label }), _jsx("span", { className: "text-fg-subtle", children: " \u00B7 " }), _jsx("span", { className: "text-[13px] text-fg-muted", children: a.label }), highlightDifferences && differs ? _jsxs("span", { className: "sr-only", children: [" (", t("differs"), ")"] }) : null] }), levels.map((l, i) => {
+                                const rank = scopeRank(l);
+                                return (_jsx("td", { className: "border-b border-line px-2 py-1.5 text-center", children: _jsx("span", { className: cn("vui-pm-cell inline-flex h-7 min-w-[5rem] items-center justify-center gap-1 rounded-ui-sm px-2 text-xs font-medium", a.scoped && "vui-pm-scope"), "data-level": a.scoped ? SCOPE_ORDER[rank] : rank ? "on" : "off", "data-danger": a.danger && rank === 3 ? "" : undefined, children: a.scoped ? (rank ? levelLabel(t, l, true, scopeNames) : _jsx("span", { className: "text-fg-subtle", children: "\u2014" })) : rank ? (_jsxs(_Fragment, { children: [_jsx(Check, { "aria-hidden": true, className: "size-3.5 text-accent-ink" }), _jsx("span", { className: "sr-only", children: t("granted") })] })) : (_jsxs(_Fragment, { children: [_jsx(Minus, { "aria-hidden": true, className: "size-3.5 text-fg-subtle" }), _jsx("span", { className: "sr-only", children: t("denied") })] })) }) }, subjects[i].id));
+                            })] }, `${r.id}:${a.id}`))) })] }) }));
+}

package/dist/business/setup-checklist.d.ts

@@ -0,0 +1,80 @@
+import * as React from "react";
+export declare const setupChecklistLabels: {
+    title: string;
+    progress: string;
+    progressShort: string;
+    dismiss: string;
+    reopen: string;
+    skip: string;
+    undoSkip: string;
+    optional: string;
+    todo: string;
+    in_progress: string;
+    done: string;
+    skipped: string;
+    locked: string;
+    itemName: string;
+    allDone: string;
+    allDoneBody: string;
+    hide: string;
+    details: string;
+};
+export type SetupChecklistLabels = typeof setupChecklistLabels;
+export type SetupItemStatus = "todo" | "in_progress" | "done" | "skipped";
+export interface SetupItem {
+    id: string;
+    title: string;
+    description?: string;
+    status: SetupItemStatus;
+    /** The deep link or action that completes this step. */
+    action?: {
+        label: string;
+        href?: string;
+        onSelect?: () => void;
+    };
+    optional?: boolean;
+    /** Depends on another step. */
+    locked?: {
+        reason: string;
+    };
+    /** "2 min". */
+    estimate?: string;
+}
+export interface SetupChecklistProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    title?: string;
+    description?: string;
+    items: SetupItem[];
+    onSkip?: (id: string) => void;
+    onUndoSkip?: (id: string) => void;
+    /** Controlled dismissal. Show `<SetupChecklistLauncher>` while dismissed. */
+    dismissed?: boolean;
+    onDismissedChange?: (dismissed: boolean) => void;
+    /** `card` (dashboard), `sidebar` (app shell), `popover` (opened from the launcher). Default `"card"`. */
+    variant?: "card" | "sidebar" | "popover";
+    /** Open the first unfinished step's details. Default `true`. */
+    expandFirstIncomplete?: boolean;
+    /** Called once when the last required step becomes done. */
+    onAllDone?: () => void;
+    loading?: boolean;
+    labels?: Partial<SetupChecklistLabels>;
+}
+/**
+ * A "Get started" panel: ordered setup steps with progress, deep-link actions, skip, lock and
+ * dismiss. Completion comes from the app (pass the new `status`); focus never jumps when a
+ * step completes on its own.
+ *
+ * ```tsx
+ * <SetupChecklist items={steps} onSkip={skip} dismissed={hidden} onDismissedChange={setHidden} />
+ * {hidden ? <SetupChecklistLauncher items={steps} onOpen={() => setHidden(false)} /> : null}
+ * ```
+ */
+export declare const SetupChecklist: React.ForwardRefExoticComponent<SetupChecklistProps & React.RefAttributes<HTMLElement>>;
+export interface SetupChecklistLauncherProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    items: SetupItem[];
+    onOpen: () => void;
+    /** Fixed to the bottom end of the viewport. Default `false` (in flow). */
+    floating?: boolean;
+    labels?: Partial<SetupChecklistLabels>;
+}
+/** A pill that reopens a dismissed checklist: "Setup guide · 3 of 6". */
+export declare const SetupChecklistLauncher: React.ForwardRefExoticComponent<SetupChecklistLauncherProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/business/setup-checklist.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, ChevronDown, Lock, X, ArrowRight, Undo2, Rocket } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { SmartLink } from "../lib/provider.js";
+import { Button, IconButton } from "../components/button.js";
+import { ProgressCircle } from "../components/progress.js";
+import { Skeleton } from "../components/skeleton.js";
+export const setupChecklistLabels = {
+    title: "Get started",
+    progress: "{done} of {total} complete",
+    progressShort: "{done}/{total}",
+    dismiss: "Hide setup guide",
+    reopen: "Setup guide · {done} of {total}",
+    skip: "Skip for now",
+    undoSkip: "Undo skip",
+    optional: "Optional",
+    todo: "not started",
+    in_progress: "in progress",
+    done: "done",
+    skipped: "skipped",
+    locked: "locked",
+    itemName: "{title}, {status}",
+    allDone: "You're all set",
+    allDoneBody: "Everything is in place. You can hide this guide; it stays in Help.",
+    hide: "Hide guide",
+    details: "{title} details",
+};
+function counts(items) {
+    const required = items.filter((i) => !i.optional);
+    const done = items.filter((i) => i.status === "done" || i.status === "skipped").length;
+    const allDone = required.every((i) => i.status === "done" || i.status === "skipped");
+    return { done, total: items.length, allDone };
+}
+/**
+ * A "Get started" panel: ordered setup steps with progress, deep-link actions, skip, lock and
+ * dismiss. Completion comes from the app (pass the new `status`); focus never jumps when a
+ * step completes on its own.
+ *
+ * ```tsx
+ * <SetupChecklist items={steps} onSkip={skip} dismissed={hidden} onDismissedChange={setHidden} />
+ * {hidden ? <SetupChecklistLauncher items={steps} onOpen={() => setHidden(false)} /> : null}
+ * ```
+ */
+export const SetupChecklist = React.forwardRef(function SetupChecklist({ title, description, items, onSkip, onUndoSkip, dismissed, onDismissedChange, variant = "card", expandFirstIncomplete = true, onAllDone, loading, labels, className, ...props }, ref) {
+    const t = useLabels("setupChecklist", setupChecklistLabels, labels);
+    const { done, total, allDone } = counts(items);
+    const firstOpen = items.find((i) => (i.status === "todo" || i.status === "in_progress") && !i.locked)?.id;
+    const [open, setOpen] = React.useState(expandFirstIncomplete ? (firstOpen ?? null) : null);
+    const headingId = React.useId();
+    const wasDone = React.useRef(allDone);
+    const [live, setLive] = React.useState("");
+    const prevDone = React.useRef(done);
+    React.useEffect(() => {
+        if (allDone && !wasDone.current)
+            onAllDone?.();
+        wasDone.current = allDone;
+    }, [allDone, onAllDone]);
+    React.useEffect(() => {
+        if (prevDone.current !== done)
+            setLive(t("progress", { done, total }));
+        prevDone.current = done;
+    }, [done, total, t]);
+    // When the open step completes, move the disclosure (not focus) to the next unfinished step.
+    React.useEffect(() => {
+        const cur = items.find((i) => i.id === open);
+        if (cur && (cur.status === "done" || cur.status === "skipped") && expandFirstIncomplete)
+            setOpen(firstOpen ?? null);
+    }, [items]); // eslint-disable-line react-hooks/exhaustive-deps
+    if (dismissed)
+        return null;
+    return (_jsxs("section", { ref: ref, "aria-labelledby": headingId, "data-slot": "setup-checklist", "data-variant": variant, "data-complete": allDone ? "" : undefined, className: cn("vui-setup flex min-w-0 flex-col", variant === "card" && "rounded-ui-lg surface", variant === "popover" && "w-[22rem] max-w-full rounded-ui-lg surface-popover", variant === "sidebar" && "text-[13px]", className), ...props, children: [_jsxs("header", { className: cn("flex items-start gap-3", variant === "sidebar" ? "px-1 pb-3" : "border-b border-line px-4 py-3.5"), children: [_jsx(ProgressCircle, { value: total ? (done / total) * 100 : 0, size: variant === "sidebar" ? "sm" : "md", "aria-label": t("progress", { done, total }), className: "shrink-0", children: variant === "sidebar" || (loading && !total) ? undefined : _jsx("span", { className: "font-mono text-[11px] font-medium text-fg tabular", children: t("progressShort", { done, total }) }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { id: headingId, className: cn("font-semibold tracking-[-0.01em] text-fg", variant === "sidebar" ? "text-[13px]" : "text-[15px]"), children: title ?? t("title") }), loading && !total && description == null ? (_jsx(Skeleton, { className: "mt-1.5 h-3 w-24" })) : (_jsx("p", { className: "mt-0.5 text-xs text-fg-muted tabular", children: description ?? t("progress", { done, total }) }))] }), onDismissedChange ? (_jsx(IconButton, { label: t("dismiss"), size: "sm", variant: "ghost", onClick: () => onDismissedChange(true), className: "-me-1.5 -mt-0.5", children: _jsx(X, {}) })) : null] }), _jsx("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": true, children: live }), loading ? (_jsx("div", { className: "flex flex-col gap-3 p-4", "aria-busy": true, children: [0, 1, 2].map((i) => (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { shape: "circle", className: "size-5" }), _jsx(Skeleton, { className: "h-3.5 flex-1" })] }, i))) })) : allDone ? (_jsxs("div", { className: "flex flex-col items-start gap-2 px-4 py-5", "data-slot": "setup-checklist-complete", children: [_jsx("span", { className: "inline-flex size-9 items-center justify-center rounded-full bg-accent-soft text-accent-ink", "aria-hidden": true, children: _jsx(Rocket, { className: "size-4" }) }), _jsx("p", { className: "text-sm font-semibold text-fg", children: t("allDone") }), _jsx("p", { className: "text-[13px] text-fg-muted", children: t("allDoneBody") }), onDismissedChange ? (_jsx(Button, { size: "sm", variant: "secondary", className: "mt-1", onClick: () => onDismissedChange(true), children: t("hide") })) : null] })) : (_jsx("ol", { className: cn("m-0 flex list-none flex-col p-0", variant === "sidebar" ? "gap-0.5" : "p-1.5"), "data-slot": "setup-checklist-items", children: items.map((item, i) => (_jsx(SetupChecklistItem, { item: item, index: i, open: open === item.id, current: item.id === firstOpen, onToggle: () => setOpen((o) => (o === item.id ? null : item.id)), onSkip: onSkip, onUndoSkip: onUndoSkip, compact: variant === "sidebar", t: t }, item.id))) }))] }));
+});
+function StatusMark({ status, locked, index }) {
+    return (_jsx("span", { "aria-hidden": true, "data-status": status, className: cn("vui-setup-mark inline-flex size-5 shrink-0 items-center justify-center rounded-full text-[10px] font-semibold tabular transition-[background-color,box-shadow] duration-200 [&_svg]:size-3", status === "done" && "tone-success bg-(--tone) text-scene", status === "in_progress" && "bg-surface text-accent-ink shadow-[inset_0_0_0_1.5px_var(--accent-ink)]", status === "todo" && !locked && "text-fg-subtle shadow-[inset_0_0_0_1.5px_var(--track)]", status === "skipped" && "border-[1.5px] border-dashed border-field-border text-fg-subtle", locked && "bg-selected text-fg-subtle"), children: status === "done" ? _jsx(Check, { strokeWidth: 3 }) : locked ? _jsx(Lock, {}) : status === "skipped" ? null : index + 1 }));
+}
+function SetupChecklistItem({ item, index, open, current, onToggle, onSkip, onUndoSkip, compact, t }) {
+    const locked = !!item.locked && item.status !== "done";
+    const statusText = locked ? t("locked") : t(item.status);
+    const panelId = React.useId();
+    const finished = item.status === "done" || item.status === "skipped";
+    const hasDetails = !!(item.description || item.action || item.locked || (!finished && onSkip && item.optional) || (item.status === "skipped" && onUndoSkip) || (!finished && onSkip));
+    return (_jsxs("li", { "data-slot": "setup-checklist-item", "data-status": item.status, "data-current": current && !finished ? "" : undefined, className: cn("vui-setup-item rounded-ui transition-colors", current && !finished && !compact && "bg-accent-soft/50"), children: [_jsx("h3", { className: "m-0 text-inherit font-normal", children: _jsxs("button", { type: "button", "aria-expanded": hasDetails ? open : undefined, "aria-controls": hasDetails ? panelId : undefined, onClick: hasDetails ? onToggle : undefined, className: cn("focus-ring flex w-full items-center gap-3 rounded-ui text-start", compact ? "px-1 py-1.5" : "px-2.5 py-2.5", hasDetails && "hover:bg-hover"), children: [_jsx(StatusMark, { status: item.status, locked: locked, index: index }), _jsxs("span", { className: cn("min-w-0 flex-1 text-sm", finished ? "text-fg-muted" : "text-fg", item.status === "done" && "line-through decoration-fg-subtle/60", item.status === "skipped" && "italic"), children: [item.title, _jsxs("span", { className: "sr-only", children: [", ", statusText] })] }), item.optional && !finished ? _jsx("span", { className: "text-[11px] text-fg-subtle", children: t("optional") }) : null, item.estimate && !finished && !compact ? _jsx("span", { className: "font-mono text-[11px] text-fg-subtle tabular", children: item.estimate }) : null, hasDetails ? _jsx(ChevronDown, { "aria-hidden": true, className: cn("size-4 shrink-0 text-fg-subtle transition-transform duration-200", open && "rotate-180") }) : null] }) }), hasDetails ? (_jsxs("div", { id: panelId, hidden: !open, className: cn("vui-setup-panel", compact ? "ps-8 pb-2" : "ps-[2.875rem] pe-3 pb-3"), children: [item.description ? _jsx("p", { className: "text-[13px] text-fg-muted", children: item.description }) : null, locked ? (_jsxs("p", { className: "mt-1.5 flex items-center gap-1.5 text-xs text-fg-subtle", children: [_jsx(Lock, { "aria-hidden": true, className: "size-3" }), " ", item.locked.reason] })) : null, _jsxs("div", { className: "mt-2.5 flex flex-wrap items-center gap-2 empty:hidden", children: [item.action && !finished ? (item.action.href ? (_jsx(Button, { asChild: true, size: "sm", variant: current ? "primary" : "secondary", disabled: locked, children: _jsxs(SmartLink, { href: item.action.href, children: [item.action.label, " ", _jsx(ArrowRight, { className: "rtl:rotate-180" })] }) })) : (_jsxs(Button, { size: "sm", variant: current ? "primary" : "secondary", disabled: locked, onClick: item.action.onSelect, children: [item.action.label, " ", _jsx(ArrowRight, { className: "rtl:rotate-180" })] }))) : null, !finished && onSkip ? (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => onSkip(item.id), children: t("skip") })) : null, item.status === "skipped" && onUndoSkip ? (_jsxs(Button, { size: "sm", variant: "ghost", onClick: () => onUndoSkip(item.id), children: [_jsx(Undo2, {}), " ", t("undoSkip")] })) : null] })] })) : null] }));
+}
+/** A pill that reopens a dismissed checklist: "Setup guide · 3 of 6". */
+export const SetupChecklistLauncher = React.forwardRef(function SetupChecklistLauncher({ items, onOpen, floating, labels, className, ...props }, ref) {
+    const t = useLabels("setupChecklist", setupChecklistLabels, labels);
+    const { done, total } = counts(items);
+    return (_jsxs("button", { ref: ref, type: "button", "data-slot": "setup-checklist-launcher", onClick: onOpen, className: cn("focus-ring inline-flex h-9 items-center gap-2 rounded-full surface-popover ps-1.5 pe-3.5 text-[13px] font-medium text-fg transition-[transform,box-shadow] duration-150 motion-safe:hover:-translate-y-px", floating && "fixed end-5 bottom-5 z-40", className), ...props, children: [_jsx(ProgressCircle, { value: total ? (done / total) * 100 : 0, size: "sm", "aria-hidden": true, className: "size-6" }), t("reopen", { done, total })] }));
+});

package/dist/charts/area-chart.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { type ChartProps } from "./chart-shell.js";
+import { type ChartColor } from "./utils.js";
+export interface ChartReference {
+    y: number;
+    label?: string;
+    color?: ChartColor;
+    /** Which side of the line the label sits on. Default `"below"`; use `"above"` to keep it clear of data under the line (control limits). */
+    labelPosition?: "above" | "below";
+}
+export interface AreaChartProps<T extends object> extends Omit<ChartProps<T>, "children"> {
+    /** Keys to draw. Default: every config key. */
+    series?: string[];
+    stack?: "none" | "stacked" | "percent";
+    curve?: "monotone" | "linear" | "step";
+    /** Gradient (default), flat tint, or no fill (lines only). */
+    fill?: "gradient" | "solid" | "none";
+    /** Horizontal reference lines (targets, averages). */
+    reference?: ChartReference[];
+    /** A previous-period series: dashed, unfilled, never stacked. */
+    compare?: {
+        key: string;
+    };
+    /** Hide the value axis (sparkline-like cards). */
+    hideYAxis?: boolean;
+}
+/**
+ * Volume or trend over time. One line of code for the common case; colours, formatting, legend,
+ * tooltip, states and the table alternative come from the Chart frame.
+ *
+ * ```tsx
+ * <AreaChart title="Visits" data={rows} x="date" config={{ visits: { label: "Visits" } }} height="md" />
+ * ```
+ */
+export declare function AreaChart<T extends object>({ series, stack, curve, fill, reference, compare, hideYAxis, ...props }: AreaChartProps<T>): React.JSX.Element;

package/dist/charts/area-chart.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Area, AreaChart as RAreaChart } from "recharts";
+import { Chart, useChart } from "./chart-shell.js";
+import { ChartFrame, ChartGrid, ChartReferenceLine, ChartTooltip, ChartXAxis, ChartYAxis, usePointClick } from "./chart.js";
+import { patternDash, seriesColor } from "./utils.js";
+/**
+ * Volume or trend over time. One line of code for the common case; colours, formatting, legend,
+ * tooltip, states and the table alternative come from the Chart frame.
+ *
+ * ```tsx
+ * <AreaChart title="Visits" data={rows} x="date" config={{ visits: { label: "Visits" } }} height="md" />
+ * ```
+ */
+export function AreaChart({ series, stack = "none", curve = "monotone", fill = "gradient", reference, compare, hideYAxis, ...props }) {
+    return (_jsx(Chart, { skeleton: "area", ...props, children: _jsx(AreaPlot, { series: series, stack: stack, curve: curve, fill: fill, reference: reference, compare: compare, hideYAxis: hideYAxis }) }));
+}
+function AreaPlot({ series: keys, stack, curve, fill, reference, compare, hideYAxis }) {
+    const chart = useChart();
+    const onClick = usePointClick();
+    const all = chart.series.filter((s) => (keys ? keys.includes(s.key) : true));
+    const visible = all.filter((s) => !chart.isHidden(s.key));
+    const stacked = stack !== "none";
+    const percent = stack === "percent";
+    const single = chart.data.length === 1;
+    const type = curve === "step" ? "stepAfter" : curve;
+    const stackKeys = visible.filter((s) => s.key !== compare?.key).map((s) => s.key);
+    return (_jsx(ChartFrame, { children: _jsxs(RAreaChart, { data: chart.data, stackOffset: percent ? "expand" : undefined, margin: { top: 6, right: 18, bottom: 0, left: 0 }, onClick: onClick, style: onClick ? { cursor: "pointer" } : undefined, children: [_jsx("defs", { children: all.map((s) => (_jsxs("linearGradient", { id: `${chart.idPrefix}-${s.index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: seriesColor(s.key), "data-top": "", stopOpacity: 0.45 }), _jsx("stop", { offset: "95%", stopColor: seriesColor(s.key), stopOpacity: 0 })] }, s.key))) }), _jsx(ChartGrid, {}), _jsx(ChartXAxis, {}), _jsx(ChartYAxis, { hide: hideYAxis, keys: stackKeys, stacked: stacked, format: percent ? "percent" : undefined, tickFormatter: percent ? (v) => chart.f.percent(v, { maximumFractionDigits: 0 }) : undefined }), _jsx(ChartTooltip, { showTotal: stacked && !percent, showShare: percent, indicator: fill === "none" ? "line" : undefined }), reference?.map((r, i) => _jsx(ChartReferenceLine, { y: r.y, label: r.label, color: r.color, labelPosition: r.labelPosition }, i)), all.map((s) => {
+                    const isCompare = s.key === compare?.key;
+                    const fillValue = isCompare || fill === "none" ? "transparent" : fill === "solid" ? `color-mix(in oklch, ${seriesColor(s.key)} 22%, transparent)` : `url(#${chart.idPrefix}-${s.index})`;
+                    return (_jsx(Area, { dataKey: s.key, name: s.label, type: type, hide: chart.isHidden(s.key), stackId: stacked && !isCompare ? "stack" : undefined, stroke: seriesColor(s.key), strokeWidth: isCompare ? 1.5 : 2, strokeDasharray: isCompare ? "4 4" : patternDash(s.pattern), fill: fillValue, fillOpacity: 1, connectNulls: false, dot: single ? { r: 3, fill: seriesColor(s.key), strokeWidth: 0 } : false, activeDot: { r: 4, strokeWidth: 2, stroke: "var(--chart-tooltip)", fill: seriesColor(s.key) }, isAnimationActive: chart.animate, animationDuration: 600 }, s.key));
+                })] }) }));
+}