Sparkline

// 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;

"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;
}

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

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

"use client";
// beui.dev/charts/sparkline

/* A compact trend for tables, stat cards and inline text. New values morph the
 * line on the same springs as LineChart, and the end dot follows. With
 * `interactive`, hovering, dragging or arrow keys move a dot along the line and
 * the readout shows that sample. Reduced motion: values update in place. */

import { motion, useReducedMotion, useTransform } from "motion/react";
import { type ComponentProps, useId, useState } from "react";
import { NumberTicker } from "@/components/motion/number-ticker";
import { EASE_OUT, SPRING_LAYOUT } from "@/lib/ease";
import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
import { cn } from "@/lib/utils";
import { XYInspector } from "./xy/inspector";
import { areaPath, linePath, type XYCurve } from "./xy/path";
import { useAnimatedPoints, type XYPointTarget } from "./xy/use-points";
import { useElementWidth } from "./xy/use-width";

export interface SparklineProps extends Omit<ComponentProps<"div">, "children"> {
  /** Samples in display order. Missing or non-finite values leave a gap. */
  data: readonly (number | null)[];
  /** Optional sample labels, such as dates, used by the interactive readout. */
  labels?: readonly string[];
  /** Accessible name, such as "Revenue, last 30 days". */
  label: string;
  variant?: "line" | "area";
  curve?: XYCurve;
  /** Any CSS color. Defaults to the current text color. */
  color?: string;
  /** Height in px. Width follows the container. */
  height?: number;
  strokeWidth?: number;
  /** Show the change from the first to the last sample as a badge. */
  showDelta?: boolean;
  /** Color a fall green and a rise red, for metrics where lower is better, such as error rate. */
  invertDelta?: boolean;
  /** Hover, drag or arrow keys to read individual samples. Adds one tab stop. */
  interactive?: boolean;
  formatValue?: (value: number) => string;
}

const number = new Intl.NumberFormat("en", { maximumFractionDigits: 2 });
const PAD = 3;

export function Sparkline({
  data,
  labels,
  label,
  variant = "line",
  curve = "monotone",
  color = "currentColor",
  height = 32,
  strokeWidth = 1.5,
  showDelta = false,
  invertDelta = false,
  interactive = false,
  formatValue = (value) => number.format(value),
  className,
  ...props
}: SparklineProps) {
  const reduce = useReducedMotion() ?? false;
  const canHover = useHoverCapable();
  const gradientId = useId();
  const tooltipId = useId();
  const { ref, width } = useElementWidth<HTMLDivElement>();
  const [active, setActive] = useState<number | null>(null);
  const [open, setOpen] = useState(false);
  // Under a finger the readout dot tracks the touch directly instead of gliding.
  const [touching, setTouching] = useState(false);
  const values = data.map((value) =>
    typeof value === "number" && Number.isFinite(value) ? value : null,
  );
  const present = values.filter((value): value is number => value !== null);
  // Fit the data tightly: at this size a zero baseline or rounded bounds would
  // flatten a metric that sits far from zero. The area fills to the bottom edge.
  const lo = present.length ? Math.min(...present) : 0;
  const hi = present.length ? Math.max(...present) : 1;
  const range = hi - lo || 1;
  const n = values.length;
  const x = (i: number) => PAD + (n === 1 ? (width - PAD * 2) / 2 : (i / (n - 1)) * (width - PAD * 2));
  const y = (value: number) =>
    hi === lo ? height / 2 : PAD + ((hi - value) / range) * (height - PAD * 2);

  const targets: XYPointTarget[] = [];
  if (width > 0) {
    targets.push({ key: "baseline", x: 0, y: height });
    values.forEach((value, i) => {
      if (value !== null) targets.push({ key: String(i), x: x(i), y: y(value) });
    });
  }
  const points = useAnimatedPoints(targets, reduce, width);
  // Indexed by position: a live sparkline shifts every sample left as it ticks.
  const ordered = values.map((value, i) => (value === null ? null : (points.get(String(i)) ?? null)));
  const baseline = points.get("baseline");
  const motionValues = [
    ...(baseline ? [baseline.y] : []),
    ...ordered.flatMap((point) => (point ? [point.x, point.y] : [])),
  ];
  const read = (coordinates: number[]) => {
    let cursor = 1;
    return ordered.map((point) =>
      point ? { x: coordinates[cursor++], y: coordinates[cursor++] } : null,
    );
  };
  const line = useTransform(motionValues, (c: number[]) => (baseline ? linePath(read(c), curve) : ""));
  const fill = useTransform(motionValues, (c: number[]) =>
    baseline ? areaPath(read(c), c[0], curve) : "",
  );

  const lastIndex = values.findLastIndex((value) => value !== null);
  const firstIndex = values.findIndex((value) => value !== null);
  const last = lastIndex >= 0 ? (values[lastIndex] as number) : null;
  const first = firstIndex >= 0 ? (values[firstIndex] as number) : null;
  const delta = first !== null && last !== null && first !== 0 ? ((last - first) / Math.abs(first)) * 100 : null;
  const trend = delta === null || Math.abs(delta) < 0.05 ? "flat" : delta > 0 ? "up" : "down";
  const tone = trend === "flat" ? "flat" : (trend === "up") !== invertDelta ? "good" : "bad";
  const inspecting = interactive && open && active !== null && values[active] !== null;
  const dotIndex = inspecting ? (active as number) : lastIndex;
  const dotValue = dotIndex >= 0 ? values[dotIndex] : null;
  const name = (i: number) => labels?.[i] ?? `Sample ${i + 1}`;
  const summary = [
    label,
    first !== null && last !== null ? `from ${formatValue(first)} to ${formatValue(last)}` : "no data",
    delta !== null && trend !== "flat" ? `${trend} ${Math.abs(delta).toFixed(1)}%` : null,
  ]
    .filter(Boolean)
    .join(", ");

  return (
    <div
      {...props}
      data-slot="sparkline"
      className={cn("inline-flex w-full min-w-0 items-center gap-2", className)}
    >
      <div ref={ref} className="relative min-w-0 flex-1" style={{ height, color }}>
        <svg
          role="img"
          aria-label={summary}
          width={width || undefined}
          height={height}
          className="absolute inset-0 overflow-visible"
        >
          {variant === "area" ? (
            <>
              <defs>
                <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0%" stopColor="currentColor" stopOpacity={0.3} />
                  <stop offset="100%" stopColor="currentColor" stopOpacity={0} />
                </linearGradient>
              </defs>
              <motion.path d={fill} fill={`url(#${gradientId})`} />
            </>
          ) : null}
          <motion.path
            d={line}
            fill="none"
            stroke="currentColor"
            strokeWidth={strokeWidth}
            strokeLinecap="round"
            strokeLinejoin="round"
          />
          {width > 0 && dotValue !== null && dotValue !== undefined ? (
            <motion.circle
              r={inspecting ? 3.5 : 2.5}
              cx={0}
              cy={0}
              fill="currentColor"
              stroke="var(--background)"
              strokeWidth={inspecting ? 2 : 0}
              initial={false}
              animate={{ x: x(dotIndex), y: y(dotValue) }}
              transition={reduce || touching ? { duration: 0 } : SPRING_LAYOUT}
            />
          ) : null}
        </svg>
        {interactive && present.length ? (
          <div className="absolute inset-0 rounded-sm has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-ring">
            <XYInspector
              count={n}
              activeIndex={active ?? -1}
              onActive={setActive}
              label={`${label}: inspect samples`}
              valueText={(i) => {
                const value = values[i];
                return `${name(i)}: ${value === null ? "no data" : formatValue(value)}`;
              }}
              mode="point"
              open={open}
              setOpen={setOpen}
              onTouchChange={setTouching}
              tooltipId={tooltipId}
              canHover={canHover}
              className="inset-0 size-full"
            />
          </div>
        ) : null}
      </div>
      {interactive && present.length ? (
        <span
          id={tooltipId}
          aria-hidden={!inspecting}
          className="shrink-0 text-right text-xs leading-tight tabular-nums"
        >
          <span className="block font-mono">
            {dotValue !== null && dotValue !== undefined ? (
              <NumberTicker
                value={dotValue}
                format={() => formatValue(dotValue)}
                startOnView={false}
                duration={0.2}
                stagger={0}
                className="whitespace-pre"
              />
            ) : (
              "No data"
            )}
          </span>
          <motion.span
            className="block text-[10px] text-muted-foreground"
            initial={false}
            animate={{ opacity: inspecting ? 1 : 0 }}
            transition={{ duration: 0.12, ease: EASE_OUT }}
          >
            {inspecting ? name(active as number) : " "}
          </motion.span>
        </span>
      ) : null}
      {showDelta && delta !== null ? (
        <span
          aria-hidden="true"
          className={cn(
            "shrink-0 rounded-md px-1.5 py-0.5 font-mono text-[11px] tabular-nums",
            tone === "good" && "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
            tone === "bad" && "bg-rose-500/10 text-rose-600 dark:text-rose-400",
            tone === "flat" && "bg-muted text-muted-foreground",
          )}
        >
          {trend === "up" ? "+" : trend === "down" ? "−" : ""}
          {Math.abs(delta).toFixed(1)}%
        </span>
      ) : null}
    </div>
  );
}

"use client";

import { type CSSProperties, type PointerEvent, useRef } from "react";
import { cn } from "@/lib/utils";

export interface XYInspectorProps {
  count: number;
  activeIndex: number;
  onActive: (index: number) => void;
  /** Accessible name of the slider. */
  label: string;
  valueText: (index: number) => string;
  /** `point` snaps to the nearest sample (lines); `band` to the slot under the pointer (bars). */
  mode: "point" | "band";
  /** `vertical` reads categories top to bottom, for horizontal bars. */
  orientation?: "horizontal" | "vertical";
  open: boolean;
  setOpen: (open: boolean) => void;
  tooltipId?: string;
  canHover: boolean;
  /** Reports a touch drag starting and ending, so marks can track the finger 1:1. */
  onTouchChange?: (touching: boolean) => void;
  className?: string;
  style?: CSSProperties;
}

/**
 * One invisible native range over the plot: a single tab stop for keyboard and
 * assistive technology, with pointer hit testing that matches the drawn marks.
 */
export function XYInspector({
  count,
  activeIndex,
  onActive,
  label,
  valueText,
  mode,
  orientation = "horizontal",
  open,
  setOpen,
  tooltipId,
  canHover,
  onTouchChange,
  className,
  style,
}: XYInspectorProps) {
  const pointerDriven = useRef(false);
  const focused = useRef(false);
  // Focus from a mouse click is incidental: it must not pin the tooltip open
  // once the pointer leaves. Focus from the keyboard (or keys pressed after a
  // click) is deliberate and keeps it open until blur or Escape.
  const mouseFocus = useRef(false);
  const last = useRef<number | null>(null);
  const index = activeIndex >= 0 ? activeIndex : count - 1;
  const vertical = orientation === "vertical";
  const inspectPointer = (event: PointerEvent<HTMLInputElement>) => {
    const bounds = event.currentTarget.getBoundingClientRect();
    const length = vertical ? bounds.height : bounds.width;
    if (!length || !count) return;
    const offset = vertical ? event.clientY - bounds.top : event.clientX - bounds.left;
    const fraction = Math.min(1, Math.max(0, offset / length));
    const next =
      mode === "point"
        ? Math.round(fraction * (count - 1))
        : Math.min(count - 1, Math.floor(fraction * count));
    onActive(next);
    if (last.current !== next) setOpen(true);
    last.current = next;
  };
  const step = (next: number) => {
    onActive(Math.min(count - 1, Math.max(0, next)));
    setOpen(true);
  };
  if (!count) return null;
  return (
    <input
      type="range"
      aria-label={label}
      aria-orientation={orientation}
      min={0}
      max={count - 1}
      step={1}
      value={index}
      aria-valuetext={valueText(index)}
      aria-describedby={open && activeIndex >= 0 ? tooltipId : undefined}
      className={cn("absolute m-0 cursor-crosshair touch-pan-y opacity-0", className)}
      style={style}
      onFocus={() => {
        focused.current = true;
        if (!pointerDriven.current) step(index);
      }}
      onBlur={() => {
        focused.current = false;
        mouseFocus.current = false;
        pointerDriven.current = false;
        setOpen(false);
      }}
      onPointerEnter={(event) => {
        if (canHover && event.pointerType !== "touch") inspectPointer(event);
      }}
      onPointerMove={(event) => {
        if (event.pointerType === "touch" ? event.buttons === 1 : canHover || event.buttons === 1)
          inspectPointer(event);
      }}
      onPointerLeave={(event) => {
        last.current = null;
        // Touch fires a leave after every tap; tap-to-inspect stays open.
        const mouse = event.pointerType !== "touch" && mouseFocus.current;
        if (!focused.current || pointerDriven.current || mouse) setOpen(false);
      }}
      onPointerDown={(event) => {
        pointerDriven.current = true;
        if (event.pointerType === "touch") onTouchChange?.(true);
        else mouseFocus.current = true;
        last.current = null;
        inspectPointer(event);
      }}
      onPointerUp={(event) => {
        if (event.pointerType === "touch") onTouchChange?.(false);
      }}
      onPointerCancel={(event) => {
        pointerDriven.current = false;
        if (event.pointerType === "touch") onTouchChange?.(false);
        setOpen(false);
      }}
      onClick={() => {
        // Native range changes finish before click. Release the pointer guard
        // so later assistive-technology changes are accepted.
        pointerDriven.current = false;
      }}
      onKeyDown={(event) => {
        pointerDriven.current = false;
        mouseFocus.current = false;
        if (event.key === "Escape") setOpen(false);
        else if (vertical && (event.key === "ArrowUp" || event.key === "ArrowDown")) {
          // Categories read top to bottom, so Down moves down the list.
          event.preventDefault();
          step(index + (event.key === "ArrowDown" ? 1 : -1));
        } else if (
          ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown"].includes(
            event.key,
          )
        )
          setOpen(true);
      }}
      onChange={(event) => {
        // Native thumb travel differs from the drawn marks. Pointer hit testing
        // owns pointer gestures; the range owns keyboard and AT input.
        if (pointerDriven.current) return;
        step(Number(event.target.value));
      }}
    />
  );
}

export type XYCurve = "monotone" | "linear" | "step";
export type XYPathPoint = { x: number; y: number } | null;

const f = (value: number) => Math.round(value * 100) / 100;

/** Contiguous runs. A gap in the data is a gap in the line, never an interpolation. */
function runs(points: readonly XYPathPoint[]) {
  const out: { x: number; y: number }[][] = [];
  let run: { x: number; y: number }[] = [];
  for (const point of points) {
    if (point) run.push(point);
    else if (run.length) {
      out.push(run);
      run = [];
    }
  }
  if (run.length) out.push(run);
  return out;
}

// Monotone cubic interpolation (Fritsch–Carlson): smooth, but it never
// overshoots a local peak or dips below a local trough the data doesn't have.
function tangents(run: { x: number; y: number }[]) {
  const n = run.length;
  const t = new Array<number>(n).fill(0);
  for (let i = 1; i < n - 1; i++) {
    const h0 = run[i].x - run[i - 1].x;
    const h1 = run[i + 1].x - run[i].x;
    const s0 = h0 ? (run[i].y - run[i - 1].y) / h0 : 0;
    const s1 = h1 ? (run[i + 1].y - run[i].y) / h1 : 0;
    const p = h0 + h1 ? (s0 * h1 + s1 * h0) / (h0 + h1) : 0;
    t[i] = (Math.sign(s0) + Math.sign(s1)) * Math.min(Math.abs(s0), Math.abs(s1), 0.5 * Math.abs(p));
  }
  const end = (a: number, b: number, neighbour: number) => {
    const h = run[b].x - run[a].x;
    return h ? (3 * (run[b].y - run[a].y)) / h / 2 - neighbour / 2 : neighbour;
  };
  t[0] = end(0, 1, t[1]);
  t[n - 1] = end(n - 2, n - 1, t[n - 2]);
  return t;
}

function segment(run: { x: number; y: number }[], curve: XYCurve) {
  const [first, ...rest] = run;
  let d = `M${f(first.x)},${f(first.y)}`;
  // A lone sample draws as a dot with a round line cap.
  if (!rest.length) return `${d}h0`;
  if (curve === "linear" || run.length === 2) {
    for (const p of rest) d += `L${f(p.x)},${f(p.y)}`;
    return d;
  }
  if (curve === "step") {
    for (let i = 1; i < run.length; i++) {
      const mid = (run[i - 1].x + run[i].x) / 2;
      d += `H${f(mid)}V${f(run[i].y)}`;
    }
    return `${d}H${f(run[run.length - 1].x)}`;
  }
  const t = tangents(run);
  for (let i = 1; i < run.length; i++) {
    const a = run[i - 1];
    const b = run[i];
    const dx = (b.x - a.x) / 3;
    d += `C${f(a.x + dx)},${f(a.y + dx * t[i - 1])},${f(b.x - dx)},${f(b.y - dx * t[i])},${f(b.x)},${f(b.y)}`;
  }
  return d;
}

export function linePath(points: readonly XYPathPoint[], curve: XYCurve = "monotone") {
  return runs(points)
    .map((run) => segment(run, curve))
    .join("");
}

/** Close each run down to the baseline. Lone samples have no area to fill. */
export function areaPath(
  points: readonly XYPathPoint[],
  baseline: number,
  curve: XYCurve = "monotone",
) {
  return runs(points)
    .filter((run) => run.length > 1)
    .map(
      (run) =>
        `${segment(run, curve)}L${f(run[run.length - 1].x)},${f(baseline)}L${f(run[0].x)},${f(baseline)}Z`,
    )
    .join("");
}

"use client";

import { animate, type MotionValue, motionValue } from "motion/react";
import { useLayoutEffect, useRef, useState } from "react";
import { SPRING_LAYOUT } from "@/lib/ease";

export type XYAnimatedPoint = { x: MotionValue<number>; y: MotionValue<number> };
export type XYPointTarget = { key: string; x: number; y: number };

/**
 * One spring per coordinate, keyed by identity. Paths, dots and fills read the
 * same values, so a data change morphs every mark together. A resize jumps:
 * the data didn't change, so nothing should appear to move.
 */
export function useAnimatedPoints(targets: XYPointTarget[], reduce: boolean, width: number) {
  const shape = targets.map((target) => target.key).join("\n");
  const create = (previous?: Map<string, XYAnimatedPoint>) =>
    new Map(
      targets.map((target) => [
        target.key,
        previous?.get(target.key) ?? { x: motionValue(target.x), y: motionValue(target.y) },
      ]),
    );
  const [stored, setStored] = useState(() => ({ shape, points: create() }));
  let points = stored.points;
  if (stored.shape !== shape) {
    points = create(stored.points);
    setStored({ shape, points });
  }
  const lastWidth = useRef(width);
  // Hover and focus renders produce the same snapshot, so they never restart a spring.
  const snapshot = JSON.stringify(targets);
  useLayoutEffect(() => {
    const resized = lastWidth.current !== width;
    lastWidth.current = width;
    const next: XYPointTarget[] = JSON.parse(snapshot);
    const controls: ReturnType<typeof animate>[] = [];
    for (const target of next) {
      const point = points.get(target.key);
      if (!point) continue;
      for (const axis of ["x", "y"] as const) {
        if (reduce || resized) point[axis].jump(target[axis]);
        else controls.push(animate(point[axis], target[axis], SPRING_LAYOUT));
      }
    }
    return () => {
      for (const control of controls) control.stop();
    };
  }, [snapshot, reduce, points, width]);
  return points;
}

"use client";

import { useLayoutEffect, useRef, useState } from "react";

/** Pixel geometry keeps dots round and strokes even; nothing renders before the first measure. */
export function useElementWidth<T extends HTMLElement>() {
  const ref = useRef<T>(null);
  const [width, setWidth] = useState(0);
  useLayoutEffect(() => {
    const node = ref.current;
    if (!node) return;
    const update = () => setWidth(node.clientWidth);
    update();
    const observer = new ResizeObserver(update);
    observer.observe(node);
    return () => observer.disconnect();
  }, []);
  return { ref, width };
}

"use client";

import { animate, motion, useInView, useReducedMotion } from "motion/react";
import { useEffect, useMemo, useRef, useState } from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export interface NumberTickerProps {
  value: number;
  /** Digits to pad to (left). */
  pad?: number;
  /**
   * Fraction digits to keep. The value is rounded to this many places before
   * `format` runs (default 0, whole numbers).
   */
  decimals?: number;
  /** Per-digit roll duration in seconds. */
  duration?: number;
  /** Stagger between digits. */
  stagger?: number;
  /** Render only after the element enters the viewport. */
  startOnView?: boolean;
  prefix?: string;
  suffix?: string;
  /** Add a small blur during digit rolls. */
  blur?: boolean;
  className?: string;
  digitClassName?: string;
  /** Insert locale group separators (commas). Server-component safe. */
  locale?: boolean;
  /** Custom formatter. Client-only — server components must use `locale` instead. */
  format?: (value: number) => string;
}

const DIGIT_HEIGHT_EM = 1.1;
const DIGITS = Array.from({ length: 10 }, (_, n) => n);

export function NumberTicker({
  value,
  pad,
  decimals = 0,
  duration = 0.9,
  stagger = 0.04,
  startOnView = true,
  prefix,
  suffix,
  blur = false,
  className,
  digitClassName,
  locale,
  format,
}: NumberTickerProps) {
  const containerRef = useRef<HTMLSpanElement>(null);
  const inView = useInView(containerRef, { once: true, amount: 0.6 });
  const [armed, setArmed] = useState(!startOnView);

  useEffect(() => {
    if (startOnView && inView) setArmed(true);
  }, [startOnView, inView]);

  const text = useMemo(() => {
    const places = Math.max(0, Math.floor(decimals));
    const factor = 10 ** places;
    const rounded = Math.round(value * factor) / factor;
    const formatted = format
      ? format(rounded)
      : locale
        ? rounded.toLocaleString(undefined, {
            minimumFractionDigits: places,
            maximumFractionDigits: places,
          })
        : rounded.toFixed(places);
    return pad ? formatted.padStart(pad, "0") : formatted;
  }, [value, pad, decimals, format, locale]);
  const glyphs = useMemo(() => {
    const chars = text.split("");
    // Key by place value (position from the right): a changing digit keeps its
    // identity and rolls to the new value instead of remounting and replaying
    // from 0. Growing numbers add glyphs on the left without re-keying the
    // ones, tens, hundreds already on screen.
    return chars.map((char, i) => ({ char, id: `g-${chars.length - 1 - i}` }));
  }, [text]);
  const readableText = `${prefix ?? ""}${text}${suffix ?? ""}`;

  // Stagger is an entrance flourish. Once the reveal has played, value
  // changes roll every digit immediately — a per-digit delay on live updates
  // reads as lag.
  const [entered, setEntered] = useState(false);
  useEffect(() => {
    if (!armed || entered) return;
    const total = (duration + glyphs.length * stagger) * 1000;
    const t = window.setTimeout(() => setEntered(true), total);
    return () => window.clearTimeout(t);
  }, [armed, entered, duration, stagger, glyphs.length]);

  return (
    <span
      ref={containerRef}
      className={cn("inline-flex items-baseline tabular-nums", className)}
    >
      <span className="sr-only">{readableText}</span>
      <span aria-hidden="true" className="inline-flex items-baseline">
        {prefix ? <span>{prefix}</span> : null}
        {glyphs.map(({ char, id }, i) => {
          const isDigit = /\d/.test(char);
          if (!isDigit) {
            return (
              <span key={id} className="inline-block">
                {char}
              </span>
            );
          }
          const digit = Number(char);
          return (
            <Digit
              key={id}
              digit={armed ? digit : 0}
              delay={entered ? 0 : i * stagger}
              duration={duration}
              blur={blur}
              className={digitClassName}
            />
          );
        })}
        {suffix ? <span>{suffix}</span> : null}
      </span>
    </span>
  );
}

function Digit({
  digit,
  delay,
  duration,
  blur,
  className,
}: {
  digit: number;
  delay: number;
  duration: number;
  blur: boolean;
  className?: string;
}) {
  const reduce = useReducedMotion();
  const columnRef = useRef<HTMLSpanElement>(null);

  useEffect(() => {
    if (reduce || !blur || !columnRef.current || !Number.isFinite(digit)) {
      return;
    }

    const node = columnRef.current;
    const controls = animate(
      node,
      { filter: ["blur(10px)", "blur(0px)"] },
      {
        duration: Math.min(duration * 0.75, 0.32),
        delay,
        ease: EASE_OUT,
      },
    );

    return () => {
      controls.stop();
      node.style.filter = "blur(0px)";
    };
  }, [blur, delay, digit, duration, reduce]);

  return (
    // The invisible in-flow digit gives the slot a real text baseline so it
    // lines up with surrounding text; clip-path clips the rolling column
    // without moving that baseline the way overflow: hidden would.
    <span
      className={cn(
        "relative inline-block text-center [clip-path:inset(0)]",
        className,
      )}
      style={{
        height: `${DIGIT_HEIGHT_EM}em`,
        lineHeight: `${DIGIT_HEIGHT_EM}em`,
        width: "1ch",
      }}
    >
      <span className="invisible">{digit}</span>
      <motion.span
        ref={columnRef}
        initial={{ y: 0 }}
        animate={{ y: `-${digit * DIGIT_HEIGHT_EM}em` }}
        transition={
          reduce
            ? { duration: 0 }
            : { duration, delay, ease: EASE_OUT }
        }
        className="absolute inset-x-0 top-0 flex flex-col items-center will-change-[transform,filter]"
      >
        {DIGITS.map((n) => (
          <span
            key={n}
            className="flex h-[1.1em] items-center justify-center leading-none"
          >
            {n}
          </span>
        ))}
      </motion.span>
    </span>
  );
}

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

"use client";

import {
  AnimatePresence,
  type HTMLMotionProps,
  motion,
  useReducedMotion,
} from "motion/react";
import {
  forwardRef,
  type PointerEvent,
  type ReactNode,
  useCallback,
  useRef,
  useState,
} from "react";
import { EASE_OUT, SPRING_PRESS } from "@/lib/ease";
import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
import { cn } from "@/lib/utils";

export type ButtonVariant = "primary" | "secondary" | "ghost" | "outline";
export type ButtonSize = "sm" | "md" | "lg" | "icon";

export interface ButtonProps extends Omit<
  HTMLMotionProps<"button">,
  "children"
> {
  variant?: ButtonVariant;
  size?: ButtonSize;
  pressScale?: number;
  /** Spawn a Material-style ripple from the press point. Off by default. */
  ripple?: boolean;
  children?: ReactNode;
}

export interface ButtonLinkProps extends Omit<
  HTMLMotionProps<"a">,
  "children"
> {
  variant?: ButtonVariant;
  size?: ButtonSize;
  pressScale?: number;
  children?: ReactNode;
}

type Ripple = { id: number; x: number; y: number; size: number };

const VARIANT_CLASS: Record<ButtonVariant, string> = {
  primary: "bg-primary text-primary-foreground hover:bg-primary/90",
  secondary: "border border-border bg-card text-foreground hover:border-border",
  ghost: "text-muted-foreground hover:text-foreground hover:bg-muted/60",
  outline:
    "border border-border bg-transparent text-foreground hover:bg-muted/60",
};

const SIZE_CLASS: Record<ButtonSize, string> = {
  sm: "h-8 px-3 text-xs gap-1.5 rounded-full",
  md: "h-10 px-5 text-sm gap-2 rounded-full",
  lg: "h-12 px-6 text-base gap-2 rounded-full",
  icon: "h-8 w-8 rounded-lg",
};

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  function Button(
    {
      variant = "primary",
      size = "md",
      pressScale = 0.93,
      ripple = false,
      className,
      children,
      onPointerDown,
      ...rest
    },
    ref,
  ) {
    const reduce = useReducedMotion();
    const canHover = useHoverCapable();
    const [ripples, setRipples] = useState<Ripple[]>([]);
    const nextId = useRef(0);

    const handlePointerDown = useCallback(
      (event: PointerEvent<HTMLButtonElement>) => {
        if (ripple && !reduce) {
          const rect = event.currentTarget.getBoundingClientRect();
          const size = Math.max(rect.width, rect.height) * 2;
          const id = nextId.current++;
          setRipples((prev) => [
            ...prev,
            {
              id,
              x: event.clientX - rect.left,
              y: event.clientY - rect.top,
              size,
            },
          ]);
        }
        onPointerDown?.(event);
      },
      [ripple, reduce, onPointerDown],
    );

    return (
      <motion.button
        ref={ref}
        type="button"
        whileTap={reduce ? undefined : { scale: pressScale }}
        whileHover={reduce || !canHover ? undefined : { scale: 1.02 }}
        transition={SPRING_PRESS}
        onPointerDown={handlePointerDown}
        className={cn(
          "inline-flex items-center justify-center font-medium select-none",
          "transition-colors",
          "disabled:pointer-events-none disabled:opacity-50",
          ripple && "relative overflow-hidden",
          VARIANT_CLASS[variant],
          SIZE_CLASS[size],
          className,
        )}
        {...rest}
      >
        {ripple && !reduce ? (
          <span className="pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]">
            <AnimatePresence>
              {ripples.map((r) => (
                <motion.span
                  key={r.id}
                  className="absolute rounded-full bg-current"
                  style={{
                    left: r.x,
                    top: r.y,
                    width: r.size,
                    height: r.size,
                    x: "-50%",
                    y: "-50%",
                  }}
                  initial={{ scale: 0.05, opacity: 0.3 }}
                  animate={{ scale: 1, opacity: 0 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 1.6, ease: EASE_OUT }}
                  onAnimationComplete={() =>
                    setRipples((prev) => prev.filter((x) => x.id !== r.id))
                  }
                />
              ))}
            </AnimatePresence>
          </span>
        ) : null}
        {children}
      </motion.button>
    );
  },
);

export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
  function ButtonLink(
    {
      variant = "primary",
      size = "md",
      pressScale = 0.93,
      className,
      children,
      ...rest
    },
    ref,
  ) {
    const reduce = useReducedMotion();
    const canHover = useHoverCapable();

    return (
      <motion.a
        ref={ref}
        whileTap={reduce ? undefined : { scale: pressScale }}
        whileHover={reduce || !canHover ? undefined : { scale: 1.02 }}
        transition={SPRING_PRESS}
        className={cn(
          "inline-flex items-center justify-center font-medium select-none",
          "transition-colors",
          VARIANT_CLASS[variant],
          SIZE_CLASS[size],
          className,
        )}
        {...rest}
      >
        {children}
      </motion.a>
    );
  },
);