Audit Trail

// Shared motion tokens. Easing curves mirror the CSS custom properties in
// globals.css; springs are the canonical physics used across components.
// Strong custom variants — defaults like `ease-in`/`ease-out` feel weak.

export const EASE_OUT = [0.16, 1, 0.3, 1] as const;
export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;
export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;

/** CSS string form of EASE_OUT for inline style transitions. */
export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)";

/** Press feedback on buttons and other tappable surfaces. */
export const SPRING_PRESS = {
  type: "spring",
  stiffness: 500,
  damping: 30,
  mass: 0.6,
} as const;

/** Content swaps — label/icon slots trading places inside a control. */
export const SPRING_SWAP = {
  type: "spring",
  stiffness: 460,
  damping: 30,
  mass: 0.55,
} as const;

/** Overlay panel entrances — modals and sheets summoned by pointer. */
export const SPRING_PANEL = {
  type: "spring",
  stiffness: 420,
  damping: 40,
  mass: 0.5,
} as const;

/** Shared-layout glides — pills, indicators and panels morphing between positions. */
export const SPRING_LAYOUT = {
  type: "spring",
  stiffness: 360,
  damping: 32,
  mass: 0.6,
} as const;

/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */
export const SPRING_MOUSE = {
  stiffness: 200,
  damping: 15,
  mass: 0.3,
} as const;

/** Dragged handles and fills (sliders) — critically damped `useSpring` config,
 * so the value follows the pointer butterily and never rebounds off an end. */
export const SPRING_GLIDE = {
  stiffness: 700,
  damping: 50,
  mass: 0.5,
} as const;

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

"use client";

import { type RefObject, useEffect } from "react";

/**
 * What the dismissing gesture does to the control it landed on.
 *
 * `"pass-through"` is the platform norm (native popover light-dismiss): the
 * tap closes the overlay *and* activates whatever was under it. Use
 * `"consume"` where the open overlay sits over or beside controls that would
 * be costly to trigger by accident — the dismissal then swallows the
 * activation too, so the gesture only closes.
 */
export type DismissBehavior = "pass-through" | "consume";

export interface DismissOptions {
  /** Default `"pass-through"`. */
  behavior?: DismissBehavior;
  /** Dismiss on Escape as well. Default true. */
  escape?: boolean;
  /** Return true for an outside target that should *not* dismiss. Must be stable. */
  ignore?: (target: Element) => boolean;
}

/**
 * What every currently open dismiss scope counts as inside itself. A consumed
 * dismissal reads this to tell a stray gesture from one that belongs to an
 * overlay in front of it: overlays have no shared z-order to consult, but the
 * one the gesture landed in has said as much by registering it.
 */
const openScopes = new Set<(target: Element) => boolean>();

function claimedByAnotherScope(
  self: (target: Element) => boolean,
  target: Element,
) {
  for (const scope of openScopes) {
    if (scope !== self && scope(target)) return true;
  }
  return false;
}

// preventDefault on pointerdown does not suppress the click that follows, so
// consuming a gesture means swallowing that click itself. The swallower
// deliberately outlives the effect that installed it — the dismissal it
// belongs to has already unmounted or re-rendered by the time the click lands.
// It releases on that click, or on the next gesture if the pointer is dragged
// away and no click ever arrives, so it can never eat a later one. A keydown
// releases it too: a gesture that ends with neither a click nor a cancel would
// otherwise leave it armed, and the click Enter synthesizes on some focused
// control is not the one this dismissal was owed.
function consumeActivation(source: Event) {
  const swallow = (event: MouseEvent) => {
    event.preventDefault();
    event.stopPropagation();
    release();
  };
  const restart = (event: Event) => {
    if (event !== source) release();
  };
  const release = () => {
    window.removeEventListener("click", swallow, true);
    window.removeEventListener("pointerdown", restart, true);
    window.removeEventListener("pointercancel", restart, true);
    window.removeEventListener("keydown", release, true);
  };
  window.addEventListener("click", swallow, true);
  window.addEventListener("pointerdown", restart, true);
  window.addEventListener("pointercancel", restart, true);
  window.addEventListener("keydown", release, true);
}

/**
 * Close an open overlay on Escape or a pointerdown outside `ref`. Pass `null`
 * for `ref` when what counts as inside isn't one element, and say so with
 * `ignore` instead.
 *
 * The pointerdown listener is capture-phase: a bubble-phase one is blinded by
 * any handler in between that stops propagation, and an overlay cannot know
 * what it is layered over. `onDismiss` and `ignore` must be stable (wrap in
 * useCallback) so the listeners aren't re-bound every render while open.
 */
export function useDismiss(
  open: boolean,
  onDismiss: () => void,
  ref: RefObject<HTMLElement | null> | null,
  {
    behavior = "pass-through",
    escape: dismissOnEscape = true,
    ignore,
  }: DismissOptions = {},
) {
  useEffect(() => {
    if (!open) return;
    const inside = (target: Element) =>
      Boolean(ref?.current?.contains(target)) || Boolean(ignore?.(target));
    const onKey = (event: KeyboardEvent) => {
      if (dismissOnEscape && event.key === "Escape") onDismiss();
    };
    const onPointer = (event: PointerEvent) => {
      const target = event.target as Element | null;
      if (!target || inside(target)) return;
      // Outside this overlay, but inside one that is also open: the gesture is
      // that overlay's to answer, and swallowing its click from behind would
      // cost the user the control they actually aimed at.
      if (behavior === "consume" && !claimedByAnotherScope(inside, target)) {
        consumeActivation(event);
      }
      onDismiss();
    };
    openScopes.add(inside);
    window.addEventListener("keydown", onKey);
    window.addEventListener("pointerdown", onPointer, true);
    return () => {
      openScopes.delete(inside);
      window.removeEventListener("keydown", onKey);
      window.removeEventListener("pointerdown", onPointer, true);
    };
  }, [open, onDismiss, ref, behavior, dismissOnEscape, ignore]);
}

"use client";

import { useEffect, useState } from "react";

/**
 * Returns true only on devices that have a true hover (mouse / trackpad).
 * Touch devices fire phantom `:hover` on tap that sticks until tap-elsewhere
 * — gate hover-only effects (scale lifts, magnetic pulls) behind this.
 */
export function useHoverCapable() {
  const [canHover, setCanHover] = useState(false);

  useEffect(() => {
    if (typeof window === "undefined" || !window.matchMedia) return;
    const mq = window.matchMedia("(hover: hover) and (pointer: fine)");
    const update = () => setCanHover(mq.matches);
    update();
    mq.addEventListener?.("change", update);
    return () => mq.removeEventListener?.("change", update);
  }, []);

  return canHover;
}

// Shared touch primitives. iOS and iPadOS run their own gestures on top of the
// page — the long-press selection callout and the selection it drags in with
// it — and they win: once the platform claims a touch it cancels ours
// mid-gesture, so a press-and-hold or a drag simply dies. Surfaces that own
// their gesture have to opt out.
//
// What the two classes below cover, precisely:
// - `-webkit-touch-callout: none` stops iOS's long-press callout. WebKit-only:
//   it is not a property other engines have, so it is inert everywhere else.
// - `user-select: none` stops the long-press selection on every engine,
//   Android included, and stops a drag from painting a selection under the
//   cursor. It is inherited, so it reaches every descendant — which is why the
//   two classes differ only in whether they apply it unconditionally.
// What neither covers:
// - Chrome for Android's long-press menu on a link or an image. No CSS
//   suppresses it; a gesture surface that wraps one needs its own
//   `onContextMenu` with `preventDefault()`.
// - The native drag of an `<img>` or `<a>` descendant. `-webkit-user-drag` is
//   not inherited and plain divs and buttons are not drag sources, so setting
//   it on the surface does nothing — the child itself needs `draggable={false}`.

/**
 * Classes for a surface that *is* the control: a thumb, a drum, a stage, a
 * handle, a hold button. Selection is suppressed on every input, because a
 * drag that highlights the control's own label is wrong on a mouse too.
 * Compose with `touch-none` when the surface also owns the scroll axis — leave
 * it off when the page must still scroll from there.
 */
export const TOUCH_GESTURE_CLASS = "select-none [-webkit-touch-callout:none]";

/**
 * The same opt-out for a gesture surface that wraps content the consumer owns:
 * a scroller, a context-menu trigger, a sheet header, a list row. Selection is
 * suppressed only where the platform runs its own press gestures — a coarse
 * pointer — so a mouse user can still select and copy that content. If the
 * gesture itself would paint a selection under the cursor, add `select-none`
 * for the duration of the gesture rather than reaching for
 * `TOUCH_GESTURE_CLASS`.
 *
 * `pointer: coarse` describes the *primary* pointer and nothing else, so a
 * hybrid machine reads it wrong in both directions: a tablet with a mouse
 * plugged in keeps touch as primary and loses mouse selection, and a laptop
 * with a touchscreen keeps the mouse as primary and leaves selection live
 * under a finger. No media query can answer per interaction — the query is
 * about the device, and the question is about the gesture in progress. The
 * default stays here because it is right on the machines that are one thing or
 * the other, and losing a selection is a nuisance; where the miss costs a
 * *gesture* instead, the surface pairs it with `holdSelection` on the press.
 */
export const TOUCH_GESTURE_CONTENT_CLASS =
  "[-webkit-touch-callout:none] pointer-coarse:select-none";

/**
 * Grow a small control's *hit area* to at least 44×44px (WCAG 2.5.5, Apple
 * HIG) on a coarse pointer, without changing what it looks like or the space
 * it takes in layout. An invisible `::after` box, centered on the control and
 * `max(100%, 2.75rem)` on each axis, catches the taps: a 32px icon button
 * reaches 6px past each edge, a wide 40px button only grows vertically, and a
 * control already 44px or larger is left as it is. Hit-testing a pseudo
 * element lands on its owner, so handlers, focus and `:active` all behave.
 *
 * Mouse and trackpad rendering is untouched — nothing here applies outside
 * `pointer: coarse`. Requirements on the element it goes on:
 * - It must be the containing block: add `relative` (and keep it mergeable, so
 *   a consumer's `absolute` still wins through `cn`).
 * - It must not clip itself (`overflow-hidden`), or the overhang is clipped
 *   away along with its hit area.
 * - It must render children: `<input>` and other void elements have no
 *   `::after`. Put it on the wrapper or label instead.
 * - It must not already use `::after` for something visible.
 *
 * Centered 44px means two 32px buttons with a 4px gap overlap by 8px; the
 * later one wins that strip, which still ends well short of the earlier
 * button's visual center. Below a ~32px pitch the later neighbour starts
 * eating into that center — use `TOUCH_TARGET_Y_CLASS` for such dense rows.
 *
 * The overhang is real geometry: inside a scroll container it counts as
 * scrollable overflow, so a control flush against a scroller's edge can add a
 * few pixels of scroll on touch screens. Give such a scroller a little padding
 * on that side.
 */
export const TOUCH_TARGET_CLASS =
  "pointer-coarse:after:absolute pointer-coarse:after:top-1/2 pointer-coarse:after:left-1/2 pointer-coarse:after:size-[max(100%,2.75rem)] pointer-coarse:after:-translate-x-1/2 pointer-coarse:after:-translate-y-1/2 pointer-coarse:after:content-['']";

/**
 * `TOUCH_TARGET_CLASS` on the vertical axis only, for controls packed tighter
 * than ~32px apart in a row (pagination dots, dense swatches), where growing
 * sideways would hand most of each control to its neighbour. Same rules.
 */
export const TOUCH_TARGET_Y_CLASS =
  "pointer-coarse:after:absolute pointer-coarse:after:inset-x-0 pointer-coarse:after:top-1/2 pointer-coarse:after:h-[max(100%,2.75rem)] pointer-coarse:after:-translate-y-1/2 pointer-coarse:after:content-['']";

/**
 * Suppress selection on `element` for as long as a gesture is running on it,
 * whatever the primary pointer of the machine happens to be. Returns the
 * release. Inline, so it wins over the class above and is gone again the
 * moment the gesture ends.
 *
 * For the press gestures a native selection would otherwise steal — a
 * long-press that opens a menu. Elsewhere prefer the classes: a surface that
 * takes selection away for the whole session is a surface whose text nobody
 * can copy.
 */
export function holdSelection(element: HTMLElement) {
  element.style.setProperty("user-select", "none");
  element.style.setProperty("-webkit-user-select", "none");
  return () => {
    element.style.removeProperty("user-select");
    element.style.removeProperty("-webkit-user-select");
  };
}

/**
 * Pointer capture, best effort. WebKit throws `NotFoundError` when the pointer
 * is already gone by the time the handler runs — routine on iOS, where the
 * system can claim the touch first — and an uncaught throw takes the rest of
 * the handler, the gesture included, down with it. Touch pointers carry
 * implicit capture anyway, so losing it is never fatal.
 */
export function capturePointer(element: Element, pointerId: number) {
  try {
    element.setPointerCapture(pointerId);
  } catch {
    // Pointer is no longer active — implicit capture still applies on touch.
  }
}

/** Release a capture taken with `capturePointer`, ignoring a stale pointer. */
export function releasePointer(element: Element, pointerId: number) {
  try {
    if (element.hasPointerCapture(pointerId)) {
      element.releasePointerCapture(pointerId);
    }
  } catch {
    // Capture was already dropped by the browser.
  }
}

/**
 * Whether this event came from a pointer that is *hovering*: not a touch, and
 * not currently pressed. Which input the user is holding right now is not
 * something a device capability can answer — a touchscreen laptop hovers and
 * taps, and iPadOS reports a fine hovering pointer for a finger — so both
 * paths stay live and each handler branches on the event it was given.
 *
 * A pen resting on the glass is making contact, not hovering: `buttons` is the
 * tell, and it sends a pen tap down the same route a finger takes.
 *
 * This answers what an *enter* asks. A leave is the other half of a pair and
 * has to be read against the enter that started it — `useHoverGesture` in
 * `lib/hooks/use-hover-gesture` does that, and hover surfaces should use it
 * rather than asking this question twice.
 */
export const isHoveringPointer = (event: {
  pointerType: string;
  buttons: number;
}) => event.pointerType !== "touch" && event.buttons === 0;

"use client";
// karaui.kamisama-v0.my.id/components/blocks/audit-trail

import { ChevronDown, Download, Search, X } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { type ReactNode, type Ref, useEffect, useId, useMemo, useRef, useState } from "react";
import { Button } from "@/components/motion/button";
import { seriesColor } from "@/components/motion/chart/shared";
import { EmptyState } from "@/components/motion/empty-state";
import { MultiSelect } from "@/components/motion/multi-select";
import { SegmentedControl } from "@/components/motion/segmented-control";
import { Skeleton } from "@/components/motion/skeleton";
import { EASE_OUT, SPRING_LAYOUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export type AuditSeverity = "info" | "notice" | "warning" | "critical";
export type AuditActionType = "create" | "update" | "delete" | "access";

export interface AuditActor {
  id: string;
  name: string;
  /** Avatar image URL. Initials on a categorical tint otherwise. */
  avatar?: string;
}

export interface AuditChange {
  field: string;
  before?: ReactNode;
  after?: ReactNode;
}

export interface AuditEntry {
  id: string;
  actor: AuditActor;
  /** Past-tense verb shown between actor and target, e.g. "updated". */
  action: string;
  /** Bucket used by the action-type filter. */
  type: AuditActionType;
  /** What was acted on, e.g. "billing-plan" or "API key ••4f2a". */
  target: string;
  /** Date, epoch ms or ISO string. */
  timestamp: Date | number | string;
  severity?: AuditSeverity;
  /** Free-form area, e.g. "Billing", "Security". */
  category?: string;
  /** Field-level diff shown when the entry is expanded. */
  changes?: AuditChange[];
}

export interface AuditTrailProps {
  entries: AuditEntry[];
  /** Export button handler, called with the currently filtered entries. Hidden when omitted. */
  onExport?: (entries: AuditEntry[]) => void;
  /** Heading. Default "Audit log". */
  title?: ReactNode;
  /** Locale for dates and relative times. Default "en-US" so server and client agree. */
  locale?: string;
  /** Height of the scrolling list. Default "22rem". */
  listHeight?: string;
  className?: string;
}

const DAY = 86_400_000;

const TYPE_OPTIONS: { value: "all" | AuditActionType; label: string }[] = [
  { value: "all", label: "All" },
  { value: "create", label: "Create" },
  { value: "update", label: "Update" },
  { value: "delete", label: "Delete" },
  { value: "access", label: "Access" },
];

// Theme tokens mixed toward the foreground so the text keeps contrast on both
// light and dark cards (same recipe as Alert).
const SEVERITY_CLASS: Record<AuditSeverity, string> = {
  info: "bg-foreground/5 text-muted-foreground",
  notice:
    "bg-[color-mix(in_oklab,var(--chart-1)_12%,transparent)] text-[color-mix(in_oklab,var(--chart-1)_70%,var(--foreground))]",
  warning:
    "bg-[color-mix(in_oklab,var(--warning)_16%,transparent)] text-[color-mix(in_oklab,var(--warning)_50%,var(--foreground))]",
  critical:
    "bg-[color-mix(in_oklab,var(--destructive)_14%,transparent)] text-[color-mix(in_oklab,var(--destructive)_75%,var(--foreground))]",
};

function toMs(t: AuditEntry["timestamp"]) {
  return t instanceof Date ? t.getTime() : typeof t === "number" ? t : Date.parse(t);
}

function initials(name: string) {
  const parts = name.trim().split(/\s+/);
  return ((parts[0]?.[0] ?? "") + (parts.length > 1 ? (parts.at(-1)?.[0] ?? "") : "")).toUpperCase();
}

function textOf(node: ReactNode): string {
  return typeof node === "string" || typeof node === "number" ? String(node) : "";
}

/**
 * Chronological activity log grouped by day. Filter by actor, action type and
 * free text; entries with a field diff expand (height morph) to show the old
 * value struck through beside the new one. Entries added after mount slide in
 * at the top. "Now" — and with it day grouping and relative times — is read
 * after mount, so server and client render the same skeleton first.
 */
export function AuditTrail({
  entries,
  onExport,
  title = "Audit log",
  locale = "en-US",
  listHeight = "22rem",
  className,
}: AuditTrailProps) {
  const reduce = useReducedMotion() ?? false;
  const baseId = useId();
  const [now, setNow] = useState<number | null>(null);
  useEffect(() => {
    setNow(Date.now());
    const t = window.setInterval(() => setNow(Date.now()), 30_000);
    return () => window.clearInterval(t);
  }, []);

  const [actors, setActors] = useState<string[]>([]);
  const [type, setType] = useState<"all" | AuditActionType>("all");
  const [query, setQuery] = useState("");
  const [expanded, setExpanded] = useState<Set<string>>(() => new Set());

  // Entries present at first render don't animate in; anything added later
  // slides in from the top. A row reads `fresh` only when it mounts, so ids
  // are marked known right after the commit that first rendered them.
  const known = useRef<Set<string> | null>(null);
  if (known.current === null) known.current = new Set(entries.map((e) => e.id));
  const isNew = (id: string) => !known.current?.has(id);
  useEffect(() => {
    if (now === null) return;
    for (const e of entries) known.current?.add(e.id);
  }, [entries, now]);

  const actorOptions = useMemo(() => {
    const seen = new Map<string, AuditActor>();
    for (const e of entries) if (!seen.has(e.actor.id)) seen.set(e.actor.id, e.actor);
    return [...seen.values()]
      .sort((a, b) => a.name.localeCompare(b.name))
      .map((a) => ({ value: a.id, label: a.name }));
  }, [entries]);
  const actorIndex = useMemo(
    () => new Map(actorOptions.map((o, i) => [o.value, i])),
    [actorOptions],
  );

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    return entries
      .filter((e) => (actors.length ? actors.includes(e.actor.id) : true))
      .filter((e) => (type === "all" ? true : e.type === type))
      .filter((e) => {
        if (!q) return true;
        const hay = [
          e.actor.name,
          e.action,
          e.target,
          e.category ?? "",
          ...(e.changes ?? []).flatMap((c) => [c.field, textOf(c.before), textOf(c.after)]),
        ]
          .join(" ")
          .toLowerCase();
        return hay.includes(q);
      })
      .sort((a, b) => toMs(b.timestamp) - toMs(a.timestamp));
  }, [entries, actors, type, query]);

  const dayFmt = useMemo(
    () => new Intl.DateTimeFormat(locale, { weekday: "short", month: "short", day: "numeric" }),
    [locale],
  );
  const fullFmt = useMemo(
    () => new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short" }),
    [locale],
  );
  const rtf = useMemo(
    () => new Intl.RelativeTimeFormat(locale, { numeric: "auto", style: "short" }),
    [locale],
  );

  const groups = useMemo(() => {
    if (now === null) return [];
    const startOfToday = new Date(now);
    startOfToday.setHours(0, 0, 0, 0);
    const today = startOfToday.getTime();
    const out: { key: string; label: string; items: AuditEntry[] }[] = [];
    for (const e of filtered) {
      const d = new Date(toMs(e.timestamp));
      d.setHours(0, 0, 0, 0);
      const start = d.getTime();
      const key = String(start);
      let group = out.at(-1);
      if (!group || group.key !== key) {
        const daysAgo = Math.round((today - start) / DAY);
        const label =
          daysAgo === 0 ? "Today" : daysAgo === 1 ? "Yesterday" : dayFmt.format(start);
        group = { key, label, items: [] };
        out.push(group);
      }
      group.items.push(e);
    }
    return out;
  }, [filtered, now, dayFmt]);

  const relative = (t: AuditEntry["timestamp"]) => {
    if (now === null) return "";
    const diff = Math.max(0, now - toMs(t));
    const s = Math.round(diff / 1000);
    if (s < 45) return rtf.format(0, "second");
    const m = Math.round(s / 60);
    if (m < 60) return rtf.format(-m, "minute");
    const h = Math.round(m / 60);
    if (h < 24) return rtf.format(-h, "hour");
    return rtf.format(-Math.round(diff / DAY), "day");
  };

  const toggle = (id: string) =>
    setExpanded((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });

  const filtersActive = actors.length > 0 || type !== "all" || query.trim() !== "";
  const clearFilters = () => {
    setActors([]);
    setType("all");
    setQuery("");
  };

  return (
    <section
      aria-labelledby={`${baseId}-title`}
      className={cn(
        "flex w-full flex-col gap-3 rounded-2xl border border-border bg-card p-4 text-card-foreground",
        className,
      )}
    >
      <header className="flex items-center justify-between gap-3">
        <div className="flex min-w-0 items-baseline gap-2">
          <h3 id={`${baseId}-title`} className="truncate text-sm font-semibold">
            {title}
          </h3>
          <span className="text-xs tabular-nums text-muted-foreground" aria-live="polite">
            {filtered.length} {filtered.length === 1 ? "event" : "events"}
          </span>
        </div>
        {onExport ? (
          <Button variant="outline" size="sm" onClick={() => onExport(filtered)}>
            <Download className="size-3.5" aria-hidden />
            Export
          </Button>
        ) : null}
      </header>

      <div className="grid gap-2 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
        <label className="relative flex min-h-11 items-center">
          <span className="sr-only">Search events</span>
          <Search className="pointer-events-none absolute left-3 size-4 text-muted-foreground" aria-hidden />
          <input
            type="search"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Search actor, target, field…"
            className="h-11 w-full rounded-2xl border border-border bg-background pr-3 pl-9 text-sm outline-none transition-colors placeholder:text-muted-foreground hover:border-foreground/20 focus-visible:border-foreground/40 focus-visible:ring-2 focus-visible:ring-ring/40 [&::-webkit-search-cancel-button]:hidden"
          />
        </label>
        <MultiSelect
          options={actorOptions}
          value={actors}
          onValueChange={setActors}
          placeholder={actors.length ? "" : "All actors"}
          aria-label="Filter by actor"
          maxVisibleChips={1}
        />
      </div>

      <div className="flex items-center justify-between gap-2">
        <SegmentedControl
          size="sm"
          options={TYPE_OPTIONS}
          value={type}
          onValueChange={(v) => setType(v as "all" | AuditActionType)}
          aria-label="Filter by action type"
        />
        <AnimatePresence initial={false}>
          {filtersActive ? (
            <motion.button
              type="button"
              key="clear"
              onClick={clearFilters}
              initial={{ opacity: 0, x: reduce ? 0 : 6 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, transition: { duration: 0.12 } }}
              transition={{ duration: 0.2, ease: EASE_OUT }}
              className="inline-flex h-7 items-center gap-1 rounded-full px-2 text-xs text-muted-foreground outline-none transition-colors hover:bg-foreground/5 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
            >
              <X className="size-3" aria-hidden />
              Clear
            </motion.button>
          ) : null}
        </AnimatePresence>
      </div>

      <div
        className="-mx-1 overflow-y-auto px-1 [scrollbar-color:var(--border-strong)_transparent] [scrollbar-width:thin]"
        style={{ height: listHeight }}
      >
        {now === null ? (
          <div className="flex flex-col gap-4 pt-1" aria-hidden>
            {[0, 1, 2, 3].map((i) => (
              <div key={i} className="flex items-start gap-3">
                <Skeleton shape="circle" width={28} />
                <div className="flex flex-1 flex-col gap-2 pt-1">
                  <Skeleton shape="text" className="w-3/4" />
                  <Skeleton shape="text" className="h-3 w-1/3" />
                </div>
              </div>
            ))}
          </div>
        ) : groups.length === 0 ? (
          <EmptyState
            size="sm"
            title="No matching events"
            description="Try another actor, action type or search term."
            action={
              filtersActive ? (
                <Button variant="outline" size="sm" onClick={clearFilters}>
                  Clear filters
                </Button>
              ) : undefined
            }
          />
        ) : (
          <div className="flex flex-col gap-3">
            {groups.map((group) => (
              <section key={group.key} aria-label={group.label}>
                <h4 className="sticky top-0 z-10 bg-card/95 py-1 text-[11px] font-semibold tracking-wide text-muted-foreground uppercase backdrop-blur-sm">
                  {group.label}
                </h4>
                <ol className="relative">
                  <AnimatePresence initial={false} mode="popLayout">
                    {group.items.map((entry, i) => (
                      <AuditRow
                        key={entry.id}
                        entry={entry}
                        last={i === group.items.length - 1}
                        fresh={isNew(entry.id)}
                        expanded={expanded.has(entry.id)}
                        onToggle={() => toggle(entry.id)}
                        tint={seriesColor({}, actorIndex.get(entry.actor.id) ?? 0)}
                        relative={relative(entry.timestamp)}
                        absolute={fullFmt.format(toMs(entry.timestamp))}
                        iso={new Date(toMs(entry.timestamp)).toISOString()}
                        reduce={reduce}
                        panelId={`${baseId}-${entry.id}`}
                      />
                    ))}
                  </AnimatePresence>
                </ol>
              </section>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

function AuditRow({
  entry,
  last,
  fresh,
  expanded,
  onToggle,
  tint,
  relative,
  absolute,
  iso,
  reduce,
  panelId,
  ref,
}: {
  /** Forwarded so AnimatePresence's popLayout can measure the exiting row. */
  ref?: Ref<HTMLLIElement>;
  entry: AuditEntry;
  last: boolean;
  fresh: boolean;
  expanded: boolean;
  onToggle: () => void;
  tint: string;
  relative: string;
  absolute: string;
  iso: string;
  reduce: boolean;
  panelId: string;
}) {
  const hasDiff = Boolean(entry.changes?.length);
  const severity = entry.severity ?? "info";

  const summary = (
    <>
      <span className="font-medium text-foreground">{entry.actor.name}</span>{" "}
      <span className="text-muted-foreground">{entry.action}</span>{" "}
      <span className="font-mono text-[12px] text-foreground">{entry.target}</span>
    </>
  );

  const meta = (
    <span className="mt-1 flex flex-wrap items-center gap-1.5">
      <span
        className={cn(
          "inline-flex h-5 items-center rounded-full px-1.5 text-[10px] font-semibold capitalize",
          SEVERITY_CLASS[severity],
        )}
      >
        {severity}
      </span>
      {entry.category ? (
        <span className="inline-flex h-5 items-center rounded-full border border-border px-1.5 text-[10px] font-medium text-muted-foreground">
          {entry.category}
        </span>
      ) : null}
      {hasDiff ? (
        <span className="text-[11px] text-muted-foreground">
          {entry.changes?.length} {entry.changes?.length === 1 ? "field" : "fields"}
        </span>
      ) : null}
    </span>
  );

  return (
    <motion.li
      ref={ref}
      layout={reduce ? false : "position"}
      initial={fresh ? { opacity: 0, y: reduce ? 0 : -14 } : false}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, transition: { duration: 0.12 } }}
      transition={{ default: { duration: 0.32, ease: EASE_OUT }, layout: SPRING_LAYOUT }}
      className="relative flex gap-3 pb-3"
    >
      {/* Rail connecting avatars within a day. */}
      {!last ? (
        <span aria-hidden className="absolute top-8 bottom-0 left-3.5 w-px bg-border-strong" />
      ) : null}
      <span
        aria-hidden
        className="relative grid size-7 shrink-0 place-items-center overflow-hidden rounded-full text-[10px] font-semibold text-foreground ring-2 ring-card"
        style={{ background: `color-mix(in oklab, ${tint} 28%, var(--card))` }}
      >
        {entry.actor.avatar ? (
          // biome-ignore lint/performance/noImgElement: library component; consumers pass any URL.
          <img src={entry.actor.avatar} alt="" className="size-full object-cover" />
        ) : (
          initials(entry.actor.name)
        )}
      </span>

      <div className="min-w-0 flex-1">
        <div className="flex items-start gap-2">
          {hasDiff ? (
            <button
              type="button"
              aria-expanded={expanded}
              aria-controls={panelId}
              onClick={onToggle}
              className="group -mx-1.5 -my-0.5 flex min-w-0 flex-1 items-start gap-1.5 rounded-lg px-1.5 py-0.5 text-left text-sm outline-none transition-colors hover:bg-foreground/[0.04] focus-visible:ring-2 focus-visible:ring-ring"
            >
              <span className="min-w-0 flex-1">
                <span className="block">{summary}</span>
                {meta}
              </span>
              <motion.span
                aria-hidden
                animate={{ rotate: expanded ? 180 : 0 }}
                transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
                className="mt-0.5 inline-flex text-muted-foreground group-hover:text-foreground"
              >
                <ChevronDown className="size-4" />
              </motion.span>
            </button>
          ) : (
            <div className="min-w-0 flex-1 text-sm">
              <span className="block">{summary}</span>
              {meta}
            </div>
          )}
          <time
            dateTime={iso}
            title={absolute}
            className="shrink-0 pt-0.5 text-[11px] tabular-nums text-muted-foreground"
          >
            {relative}
          </time>
        </div>

        <AnimatePresence initial={false}>
          {hasDiff && expanded ? (
            // Height is animated on purpose: the disclosure's job is to open
            // space in the list, and siblings glide with it.
            <motion.div
              key="diff"
              id={panelId}
              initial={{ height: 0, opacity: 0 }}
              animate={{ height: "auto", opacity: 1 }}
              exit={{ height: 0, opacity: 0, transition: { duration: 0.16, ease: EASE_OUT } }}
              transition={reduce ? { duration: 0 } : { duration: 0.26, ease: EASE_OUT }}
              className="overflow-hidden"
            >
              <dl className="mt-2 grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1.5 rounded-xl border border-border bg-background/60 p-2.5 text-xs">
                {entry.changes?.map((c) => (
                  <div key={c.field} className="contents">
                    <dt className="pt-0.5 font-mono text-muted-foreground">{c.field}</dt>
                    <dd className="flex min-w-0 flex-wrap items-center gap-1.5">
                      {c.before !== undefined && c.before !== null ? (
                        <del className="rounded-md bg-[color-mix(in_oklab,var(--destructive)_12%,transparent)] px-1.5 py-0.5 font-mono text-[color-mix(in_oklab,var(--destructive)_70%,var(--foreground))] decoration-1">
                          <span className="sr-only">was </span>
                          {c.before}
                        </del>
                      ) : null}
                      {c.before != null && c.after != null ? (
                        <span aria-hidden className="text-muted-foreground">
                          →
                        </span>
                      ) : null}
                      {c.after !== undefined && c.after !== null ? (
                        <ins className="rounded-md bg-[color-mix(in_oklab,var(--success)_16%,transparent)] px-1.5 py-0.5 font-mono text-[color-mix(in_oklab,var(--success)_55%,var(--foreground))] no-underline">
                          <span className="sr-only">now </span>
                          {c.after}
                        </ins>
                      ) : null}
                    </dd>
                  </div>
                ))}
              </dl>
            </motion.div>
          ) : null}
        </AnimatePresence>
      </div>
    </motion.li>
  );
}

export type {
  ButtonLinkProps,
  ButtonProps,
  ButtonSize,
  ButtonVariant,
} from "./base";
export { Button, ButtonLink } from "./base";
export type { MagneticButtonProps } from "./magnetic";
export { MagneticButton } from "./magnetic";
export type { ButtonState, StatefulButtonProps } from "./stateful";
export { StatefulButton } from "./stateful";

"use client";

import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { type ReactNode, useEffect, useState } from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export type ChartSeries = {
  /** Key of the value in each datum. */
  key: string;
  label: string;
  /** Any CSS color. Default: the next `--chart-N` slot, in fixed order. */
  color?: string;
};

export type ChartDatum = Record<string, string | number>;

/** "natural" is a monotone curve: smooth, but never overshoots a data point. */
export type ChartCurve = "natural" | "linear" | "step";

export type TooltipIndicator = "dot" | "line" | "dashed";

// Fixed categorical order, validated for colorblind and normal-vision
// separation (light and dark steps live in the theme's --chart-* tokens).
// Fallbacks are the light steps, for projects without the theme layer.
const SLOT_FALLBACKS = ["#2a78d6", "#eb6834", "#1baf7a", "#eda100", "#e87ba4"];

/** Color for slot `index`; color follows the series, never its rank. */
export function seriesColor(series: { color?: string }, index: number) {
  if (series.color) return series.color;
  const slot = index % SLOT_FALLBACKS.length;
  return `var(--chart-${slot + 1}, ${SLOT_FALLBACKS[slot]})`;
}

/**
 * Layout width of the element given the returned ref. ResizeObserver reports
 * the untransformed box, unlike getBoundingClientRect (react-use-measure), so a
 * chart inside a scaled container (thumbnails, zoomed stages) still fills it.
 */
export function useChartWidth<T extends Element = HTMLDivElement>() {
  const [el, setEl] = useState<T | null>(null);
  const [width, setWidth] = useState(0);
  useEffect(() => {
    if (!el) return;
    const observer = new ResizeObserver(([entry]) =>
      setWidth(entry.contentRect.width),
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, [el]);
  return [setEl, width] as const;
}

// A fixed locale keeps server and client output identical for hydration.
const FULL = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
const COMPACT = new Intl.NumberFormat("en-US", {
  notation: "compact",
  maximumFractionDigits: 1,
});
export const formatFull = (n: number) => FULL.format(n);
export const formatCompact = (n: number) => COMPACT.format(n);

/** Round tick values covering [min, max], about `count` of them. */
export function niceTicks(min: number, max: number, count = 4) {
  if (min === max) max = min + 1;
  const raw = (max - min) / count;
  const mag = 10 ** Math.floor(Math.log10(raw));
  const step =
    [1, 2, 2.5, 5, 10].map((m) => m * mag).find((s) => s >= raw) ?? 10 * mag;
  const start = Math.floor(min / step) * step;
  const end = Math.ceil(max / step) * step;
  const ticks: number[] = [];
  for (let v = start; v <= end + step / 2; v += step) {
    ticks.push(Number(v.toFixed(10)));
  }
  return ticks;
}

/** Keep every k-th label so neighbours stay at least `minGap` px apart. */
export function labelStride(count: number, width: number, minGap = 56) {
  return Math.max(1, Math.ceil(count / Math.max(1, Math.floor(width / minGap))));
}

/** Approximate gutter for axis labels at 12px. */
export function gutterFor(labels: string[]) {
  return Math.max(...labels.map((l) => l.length), 1) * 7 + 12;
}

type Point = [number, number];

/** SVG path through `points` (sorted by x) with the given curve. */
export function curvePath(points: Point[], curve: ChartCurve) {
  if (points.length === 0) return "";
  const [x0, y0] = points[0];
  if (points.length === 1) return `M${x0},${y0}`;
  if (curve === "step") {
    // Changes value halfway between points, like a stepped series.
    let d = `M${x0},${y0}`;
    for (let i = 1; i < points.length; i++) {
      const [px] = points[i - 1];
      const [x, y] = points[i];
      const mid = (px + x) / 2;
      d += `H${mid}V${y}H${x}`;
    }
    return d;
  }
  if (curve === "linear" || points.length < 3) {
    return points.map(([x, y], i) => `${i ? "L" : "M"}${x},${y}`).join("");
  }
  // Monotone cubic (Fritsch–Carlson): tangents are clamped so the curve stays
  // between its neighbours and never invents a peak the data doesn't have.
  const n = points.length;
  const slopes: number[] = [];
  for (let i = 0; i < n - 1; i++) {
    const dx = points[i + 1][0] - points[i][0];
    slopes.push(dx ? (points[i + 1][1] - points[i][1]) / dx : 0);
  }
  const tangents = points.map((_, i) => {
    if (i === 0) return slopes[0];
    if (i === n - 1) return slopes[n - 2];
    const a = slopes[i - 1];
    const b = slopes[i];
    return a * b <= 0 ? 0 : (a + b) / 2;
  });
  for (let i = 0; i < n - 1; i++) {
    const m = slopes[i];
    if (m === 0) {
      tangents[i] = 0;
      tangents[i + 1] = 0;
      continue;
    }
    const a = tangents[i] / m;
    const b = tangents[i + 1] / m;
    const s = a * a + b * b;
    if (s > 9) {
      const t = 3 / Math.sqrt(s);
      tangents[i] = t * a * m;
      tangents[i + 1] = t * b * m;
    }
  }
  let d = `M${x0},${y0}`;
  for (let i = 0; i < n - 1; i++) {
    const [xa, ya] = points[i];
    const [xb, yb] = points[i + 1];
    const h = (xb - xa) / 3;
    d += `C${xa + h},${ya + tangents[i] * h} ${xb - h},${yb - tangents[i + 1] * h} ${xb},${yb}`;
  }
  return d;
}

// ── tooltip ────────────────────────────────────────────────────────────────

export type TooltipRow = { label: string; value: string; color: string };

function Indicator({ kind, color }: { kind: TooltipIndicator; color: string }) {
  return (
    <span
      aria-hidden
      className={cn(
        "shrink-0 rounded-[2px]",
        kind === "dot" && "size-2.5",
        kind === "line" && "w-1 self-stretch",
        kind === "dashed" && "w-0 self-stretch border-[1.5px] border-dashed",
      )}
      style={
        kind === "dashed" ? { borderColor: color } : { background: color }
      }
    />
  );
}

/**
 * Compact readout that springs between data positions: an optional label,
 * then one row per series with a colored indicator, the name and the value.
 */
export function ChartTooltip({
  open,
  x,
  y,
  width,
  label,
  rows,
  indicator = "dot",
}: {
  open: boolean;
  /** Anchor in px, relative to the chart's positioned wrapper. */
  x: number;
  y: number;
  /** Wrapper width, to flip the tooltip before it overflows the edge. */
  width: number;
  label?: string;
  rows: TooltipRow[];
  indicator?: TooltipIndicator;
}) {
  const reduce = useReducedMotion();
  const flip = x > width / 2;
  return (
    <AnimatePresence>
      {open && (
        <motion.div
          aria-hidden
          initial={{ opacity: 0, x, y, scale: reduce ? 1 : 0.96 }}
          animate={{ opacity: 1, x, y, scale: 1 }}
          exit={{ opacity: 0, scale: reduce ? 1 : 0.96, transition: { duration: 0.1 } }}
          transition={
            reduce
              ? { duration: 0 }
              : {
                  opacity: { duration: 0.12 },
                  scale: { duration: 0.15, ease: EASE_OUT },
                  // Tracks the pointer between data positions; firm enough to
                  // never trail behind a quick sweep.
                  default: { type: "spring", stiffness: 520, damping: 42 },
                }
          }
          className="pointer-events-none absolute top-0 left-0 z-10"
        >
          <div
            className={cn(
              "grid min-w-32 -translate-y-1/2 gap-1.5 rounded-lg border border-border bg-background px-2.5 py-1.5 text-xs shadow-xl",
              flip ? "-translate-x-[calc(100%+12px)]" : "translate-x-3",
            )}
          >
            {label ? (
              <p className="font-medium text-foreground">{label}</p>
            ) : null}
            {rows.map((row) => (
              <div key={row.label} className="flex items-stretch gap-2">
                <Indicator kind={indicator} color={row.color} />
                <div className="flex flex-1 items-center justify-between gap-4 leading-none">
                  <span className="text-muted-foreground">{row.label}</span>
                  <span className="font-mono font-medium tabular-nums text-foreground">
                    {row.value}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

// ── legend & table ─────────────────────────────────────────────────────────

export function ChartLegend({
  items,
  className,
}: {
  items: { label: string; color: string }[];
  className?: string;
}) {
  return (
    <ul
      className={cn(
        "flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-3 text-xs text-muted-foreground",
        className,
      )}
    >
      {items.map((item) => (
        <li key={item.label} className="flex items-center gap-1.5">
          <span
            aria-hidden
            className="size-2 shrink-0 rounded-[2px]"
            style={{ background: item.color }}
          />
          {item.label}
        </li>
      ))}
    </ul>
  );
}

/** The table view: every value reachable without hovering or seeing color. */
export function ChartTable({
  caption,
  head,
  rows,
}: {
  caption: string;
  head: string[];
  rows: ReactNode[][];
}) {
  // The wrapper is what hides it: a <caption> escapes a visually hidden
  // table's clip and would otherwise paint over the chart.
  return (
    <div className="sr-only">
      <table>
        <caption>{caption}</caption>
        <thead>
          <tr>
            {head.map((h) => (
              <th key={h} scope="col">
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, r) => (
            // biome-ignore lint/suspicious/noArrayIndexKey: rows mirror data order and never reorder.
            <tr key={r}>
              {row.map((cell, c) =>
                c === 0 ? (
                  // biome-ignore lint/suspicious/noArrayIndexKey: fixed column order.
                  <th key={c} scope="row">
                    {cell}
                  </th>
                ) : (
                  // biome-ignore lint/suspicious/noArrayIndexKey: fixed column order.
                  <td key={c}>{cell}</td>
                ),
              )}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

/** Shared entrance timing: marks grow once the chart scrolls into view. */
export const GROW = { duration: 0.7, ease: EASE_OUT } as const;

/** Arrow-key stepping shared by every chart that reads positions. */
export function stepIndex(
  key: string,
  current: number | null,
  count: number,
  wrap = false,
) {
  const forward = key === "ArrowRight" || key === "ArrowDown";
  const back = key === "ArrowLeft" || key === "ArrowUp";
  if (!forward && !back) return undefined;
  if (current === null) return forward ? 0 : count - 1;
  const next = current + (forward ? 1 : -1);
  if (wrap) return (next + count) % count;
  return Math.min(count - 1, Math.max(0, next));
}

"use client";

import { motion, useReducedMotion, type Variants } from "motion/react";
import type { ReactNode } from "react";
import { EASE_IN_OUT, EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export type EmptyStateSize = "sm" | "md" | "lg";
export type EmptyStateIllustrationVariant = "documents" | "search";

/* -------------------------------------------------------------------------- */
/*                                Illustration                                */
/* -------------------------------------------------------------------------- */

export interface EmptyStateIllustrationProps {
  variant?: EmptyStateIllustrationVariant;
  /** Width in px; height follows the 5:4 viewBox. */
  size?: number;
  className?: string;
}

const draw = (delay: number, reduce: boolean) => ({
  initial: reduce ? { pathLength: 1, opacity: 0 } : { pathLength: 0, opacity: 0 },
  whileInView: { pathLength: 1, opacity: 1 },
  viewport: { once: true },
  transition: reduce
    ? { duration: 0.2 }
    : {
        pathLength: { duration: 0.5, ease: EASE_OUT, delay },
        opacity: { duration: 0.1, delay },
      },
});

// Idle float: translate only (no rotate/scale), so no SVG transform-origin is
// involved. Rotations in the art are static `transform` attributes on an
// inner <g> that motion never touches.
const float = (reduce: boolean, amplitude: number, duration: number, delay: number) =>
  reduce
    ? {}
    : {
        animate: { y: [0, -amplitude, 0] },
        transition: { duration, ease: EASE_IN_OUT, repeat: Infinity, delay },
      };

/** Small default empty-state art: a floating document stack or a search lens. */
export function EmptyStateIllustration({
  variant = "documents",
  size = 120,
  className,
}: EmptyStateIllustrationProps) {
  const reduce = useReducedMotion() ?? false;
  const lineClass = "stroke-border-strong";

  return (
    <svg
      width={size}
      height={(size * 4) / 5}
      viewBox="0 0 120 96"
      fill="none"
      aria-hidden="true"
      focusable="false"
      className={cn("overflow-visible", className)}
    >
      <ellipse cx="60" cy="88" rx="30" ry="3.5" className="fill-muted" />
      {variant === "documents" ? (
        <>
          <motion.g {...float(reduce, 2, 3.4, 0.4)}>
            <g transform="rotate(-9 46 48)">
              <rect x="24" y="20" width="44" height="56" rx="7" strokeWidth="1.5" className="fill-muted stroke-border-strong" />
            </g>
          </motion.g>
          <motion.g {...float(reduce, 2.5, 3.8, 0.9)}>
            <g transform="rotate(8 74 48)">
              <rect x="52" y="20" width="44" height="56" rx="7" strokeWidth="1.5" className="fill-muted stroke-border-strong" />
            </g>
          </motion.g>
          <motion.g {...float(reduce, 3.5, 3, 0)}>
            <rect x="37" y="16" width="46" height="60" rx="7" strokeWidth="1.5" className="fill-card stroke-border-strong" />
            <motion.path d="M46 30h20" strokeWidth="3" strokeLinecap="round" className="stroke-foreground/70" {...draw(0.25, reduce)} />
            <motion.path d="M46 40h28" strokeWidth="3" strokeLinecap="round" className={lineClass} {...draw(0.35, reduce)} />
            <motion.path d="M46 49h24" strokeWidth="3" strokeLinecap="round" className={lineClass} {...draw(0.45, reduce)} />
            <motion.path d="M46 58h16" strokeWidth="3" strokeLinecap="round" className={lineClass} {...draw(0.55, reduce)} />
            <motion.g
              initial={{ opacity: 0, y: reduce ? 0 : 4 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.3, ease: EASE_OUT, delay: 0.6 }}
            >
              <circle cx="84" cy="17" r="9" className="fill-primary" />
              <path d="M84 13v8M80 17h8" strokeWidth="2" strokeLinecap="round" className="stroke-primary-foreground" />
            </motion.g>
          </motion.g>
        </>
      ) : (
        <>
          <motion.g {...float(reduce, 1.5, 3.6, 0.5)}>
            <rect x="22" y="22" width="64" height="50" rx="8" strokeWidth="1.5" className="fill-muted stroke-border-strong" />
            <motion.path d="M32 36h30" strokeWidth="3" strokeLinecap="round" className={lineClass} {...draw(0.2, reduce)} />
            <motion.path d="M32 46h22" strokeWidth="3" strokeLinecap="round" className={lineClass} {...draw(0.3, reduce)} />
            <motion.path d="M32 56h26" strokeWidth="3" strokeLinecap="round" className={lineClass} {...draw(0.4, reduce)} />
          </motion.g>
          <motion.g {...float(reduce, 3.5, 3, 0)}>
            <circle cx="76" cy="48" r="17" strokeWidth="1.5" className="fill-card stroke-border-strong" />
            <motion.circle cx="76" cy="48" r="11" strokeWidth="3" className="stroke-foreground/70" {...draw(0.35, reduce)} />
            <motion.path d="M84.5 56.5 96 68" strokeWidth="5" strokeLinecap="round" className="stroke-foreground/70" {...draw(0.6, reduce)} />
            <motion.path d="M72.5 44.5l7 7M79.5 44.5l-7 7" strokeWidth="2" strokeLinecap="round" className="stroke-muted-foreground" {...draw(0.75, reduce)} />
          </motion.g>
        </>
      )}
    </svg>
  );
}

/* -------------------------------------------------------------------------- */
/*                                 EmptyState                                 */
/* -------------------------------------------------------------------------- */

export interface EmptyStateProps {
  title: ReactNode;
  description?: ReactNode;
  /**
   * Icon or illustration slot. Defaults to `<EmptyStateIllustration />`;
   * pass `null` for none.
   */
  icon?: ReactNode;
  /** Primary call to action (e.g. a library `Button`). */
  action?: ReactNode;
  /** Secondary call to action, rendered after the primary. */
  secondaryAction?: ReactNode;
  size?: EmptyStateSize;
  /** Dashed border container, for empty regions inside a page. */
  bordered?: boolean;
  /** Heading element for the title. Default `h3`. */
  titleAs?: "h2" | "h3" | "h4" | "p";
  /** Extra content under the actions (links, hints). */
  children?: ReactNode;
  className?: string;
}

const SIZE: Record<
  EmptyStateSize,
  { root: string; title: string; description: string; art: number }
> = {
  sm: { root: "gap-3 px-4 py-6", title: "text-sm", description: "text-xs max-w-[32ch]", art: 88 },
  md: { root: "gap-4 px-6 py-10", title: "text-base", description: "text-sm max-w-[38ch]", art: 120 },
  lg: { root: "gap-5 px-8 py-14", title: "text-lg", description: "text-base max-w-[44ch]", art: 152 },
};

/**
 * Empty-state block: illustration, title, description and actions that
 * stagger in when scrolled into view (opacity + small rise; opacity only under
 * reduced motion).
 */
export function EmptyState({
  title,
  description,
  icon,
  action,
  secondaryAction,
  size = "md",
  bordered = false,
  titleAs: Title = "h3",
  children,
  className,
}: EmptyStateProps) {
  const reduce = useReducedMotion();
  const s = SIZE[size];

  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: 0.07, delayChildren: 0.05 } },
  };
  const item: Variants = {
    hidden: { opacity: 0, y: reduce ? 0 : 8 },
    show: { opacity: 1, y: 0, transition: { duration: 0.32, ease: EASE_OUT } },
  };

  const art = icon === undefined ? <EmptyStateIllustration size={s.art} /> : icon;

  return (
    <motion.div
      variants={container}
      initial="hidden"
      whileInView="show"
      viewport={{ once: true, amount: 0.4 }}
      className={cn(
        "flex w-full flex-col items-center text-center",
        s.root,
        bordered && "rounded-2xl border border-dashed border-border-strong",
        className,
      )}
    >
      {art != null ? (
        <motion.div variants={item} className="flex items-center justify-center text-muted-foreground">
          {art}
        </motion.div>
      ) : null}
      <div className="flex flex-col items-center gap-1.5">
        <motion.div variants={item}>
          <Title className={cn("font-semibold tracking-tight text-foreground", s.title)}>
            {title}
          </Title>
        </motion.div>
        {description != null ? (
          <motion.p variants={item} className={cn("text-muted-foreground text-balance", s.description)}>
            {description}
          </motion.p>
        ) : null}
      </div>
      {action != null || secondaryAction != null ? (
        <motion.div variants={item} className="flex flex-wrap items-center justify-center gap-2">
          {action}
          {secondaryAction}
        </motion.div>
      ) : null}
      {children != null ? <motion.div variants={item}>{children}</motion.div> : null}
    </motion.div>
  );
}