Tour

// 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 { 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/motion/tour

import {
  AnimatePresence,
  animate,
  type MotionValue,
  motion,
  useIsPresent,
  useMotionValue,
  useReducedMotion,
} from "motion/react";
import {
  type KeyboardEvent,
  type ReactNode,
  type RefObject,
  useCallback,
  useEffect,
  useId,
  useLayoutEffect,
  useRef,
  useState,
} from "react";
import { createPortal } from "react-dom";
import { Button } from "@/components/motion/button";
import { EASE_OUT, SPRING_LAYOUT, SPRING_PANEL } from "@/lib/ease";
import { cn } from "@/lib/utils";

export type TourPlacement = "top" | "right" | "bottom" | "left";

export interface TourStep {
  /** CSS selector or ref of the element to spotlight. Missing → centered card. */
  target: string | RefObject<HTMLElement | null>;
  title: ReactNode;
  content: ReactNode;
  /** Preferred side for the card. Flips/shifts to stay in the viewport. */
  placement?: TourPlacement;
}

export type TourCloseReason = "complete" | "skip" | "escape";

export interface TourLabels {
  next?: string;
  back?: string;
  skip?: string;
  done?: string;
}

export interface TourProps {
  steps: TourStep[];
  /** Controlled open state. */
  open?: boolean;
  /** Uncontrolled initial open state. */
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  /** Controlled step index. */
  step?: number;
  /** Uncontrolled step the tour (re)starts at each time it opens. Default 0. */
  defaultStep?: number;
  onStepChange?: (step: number) => void;
  /** Fires when Done is pressed on the last step. */
  onComplete?: () => void;
  /** Fires whenever the tour closes, with why. */
  onClose?: (reason: TourCloseReason) => void;
  /** Space between the target and the spotlight edge, px. Default 8. */
  padding?: number;
  /** Spotlight corner radius, px. Default 12. */
  radius?: number;
  /** Dim strength of the overlay, 0–1. Default 0.6. */
  overlayOpacity?: number;
  labels?: TourLabels;
  /** Classes for the popover card. */
  className?: string;
}

type Box = { left: number; top: number; width: number; height: number };

// Gap between spotlight and card, and the minimum distance the card keeps
// from the viewport edges.
const GAP = 12;
const MARGIN = 12;
// How long after a step change measurements keep springing toward the target
// (the target may still be smooth-scrolling into view). Outside this window,
// scroll/resize updates snap so the spotlight stays glued to the element.
const GLIDE_MS = 700;

const OPPOSITE: Record<TourPlacement, TourPlacement> = {
  top: "bottom",
  bottom: "top",
  left: "right",
  right: "left",
};

function resolveTarget(target: TourStep["target"]): HTMLElement | null {
  if (typeof document === "undefined") return null;
  if (typeof target === "string") {
    return document.querySelector<HTMLElement>(target);
  }
  return target.current;
}

const clamp = (v: number, min: number, max: number) =>
  Math.min(Math.max(v, min), Math.max(min, max));

/** Positions the card beside `spot`, flipping to the side with room and
 * shifting along the edge so it never leaves the viewport. */
function placeCard(
  spot: Box | null,
  card: { width: number; height: number },
  preferred: TourPlacement | undefined,
  vw: number,
  vh: number,
): { x: number; y: number; side: TourPlacement | "center" } {
  const { width: w, height: h } = card;
  if (!spot) {
    return { x: (vw - w) / 2, y: (vh - h) / 2, side: "center" };
  }
  const right = spot.left + spot.width;
  const bottom = spot.top + spot.height;
  const space: Record<TourPlacement, number> = {
    top: spot.top - GAP - MARGIN,
    bottom: vh - bottom - GAP - MARGIN,
    left: spot.left - GAP - MARGIN,
    right: vw - right - GAP - MARGIN,
  };
  const need = (side: TourPlacement) =>
    side === "top" || side === "bottom" ? h : w;
  const order: TourPlacement[] = preferred
    ? [
        preferred,
        OPPOSITE[preferred],
        ...(["bottom", "top", "right", "left"] as const).filter(
          (s) => s !== preferred && s !== OPPOSITE[preferred],
        ),
      ]
    : ["bottom", "top", "right", "left"];
  const side =
    order.find((s) => space[s] >= need(s)) ??
    order.reduce((best, s) => (space[s] > space[best] ? s : best), order[0]);

  const cx = spot.left + spot.width / 2;
  const cy = spot.top + spot.height / 2;
  let x: number;
  let y: number;
  if (side === "bottom" || side === "top") {
    x = cx - w / 2;
    y = side === "bottom" ? bottom + GAP : spot.top - GAP - h;
  } else {
    y = cy - h / 2;
    x = side === "right" ? right + GAP : spot.left - GAP - w;
  }
  return {
    x: clamp(x, MARGIN, vw - w - MARGIN),
    y: clamp(y, MARGIN, vh - h - MARGIN),
    side,
  };
}

/**
 * Onboarding tour: dims the page, cuts a rounded spotlight around each
 * target and glides it between steps, with a card beside the target holding
 * the step copy, progress dots and Back/Next/Skip/Done. Everything renders
 * `position: fixed` from `getBoundingClientRect`, so it stays aligned inside
 * scrolled pages and nested scroll containers.
 */
export function Tour({
  steps,
  open,
  defaultOpen = false,
  onOpenChange,
  step,
  defaultStep = 0,
  onStepChange,
  onComplete,
  onClose,
  padding = 8,
  radius = 12,
  overlayOpacity = 0.6,
  labels,
  className,
}: TourProps) {
  const [openState, setOpenState] = useState(defaultOpen);
  const isOpen = (open ?? openState) && steps.length > 0;
  const [stepState, setStepState] = useState(defaultStep);
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  // Uncontrolled tours restart at `defaultStep` every time they open. Adjusted
  // during render so the first open frame already shows the right step.
  const [wasOpen, setWasOpen] = useState(isOpen);
  if (wasOpen !== isOpen) {
    setWasOpen(isOpen);
    if (isOpen && step === undefined) setStepState(defaultStep);
  }

  const index = clamp(step ?? stepState, 0, Math.max(0, steps.length - 1));

  const setOpen = useCallback(
    (next: boolean) => {
      if (open === undefined) setOpenState(next);
      onOpenChange?.(next);
    },
    [open, onOpenChange],
  );

  const goTo = useCallback(
    (next: number) => {
      if (step === undefined) setStepState(next);
      onStepChange?.(next);
    },
    [step, onStepChange],
  );

  const close = useCallback(
    (reason: TourCloseReason) => {
      setOpen(false);
      if (reason === "complete") onComplete?.();
      onClose?.(reason);
    },
    [setOpen, onComplete, onClose],
  );

  if (!mounted) return null;

  return createPortal(
    <AnimatePresence>
      {isOpen ? (
        <TourLayer
          key="tour"
          steps={steps}
          index={index}
          goTo={goTo}
          close={close}
          padding={padding}
          radius={radius}
          overlayOpacity={overlayOpacity}
          labels={labels}
          className={className}
        />
      ) : null}
    </AnimatePresence>,
    document.body,
  );
}

interface TourLayerProps {
  steps: TourStep[];
  index: number;
  goTo: (step: number) => void;
  close: (reason: TourCloseReason) => void;
  padding: number;
  radius: number;
  overlayOpacity: number;
  labels?: TourLabels;
  className?: string;
}

const FOCUSABLE =
  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';

function TourLayer({
  steps,
  index,
  goTo,
  close,
  padding,
  radius,
  overlayOpacity,
  labels,
  className,
}: TourLayerProps) {
  const reduce = useReducedMotion() ?? false;
  const isPresent = useIsPresent();
  const titleId = useId();
  const bodyId = useId();
  const cardRef = useRef<HTMLDivElement>(null);
  const nextRef = useRef<HTMLButtonElement>(null);
  const returnFocus = useRef<HTMLElement | null>(null);
  const firstPlace = useRef(true);
  const glideUntil = useRef(0);
  const frame = useRef(0);
  const [side, setSide] = useState<TourPlacement | "center">("bottom");
  const [hasTarget, setHasTarget] = useState(true);

  const sx = useMotionValue(0);
  const sy = useMotionValue(0);
  const sw = useMotionValue(0);
  const sh = useMotionValue(0);
  const cx = useMotionValue(0);
  const cy = useMotionValue(0);

  const current = steps[index];
  const last = index === steps.length - 1;
  // Depend on the step's target/placement, not the step object: callers often
  // pass an inline `steps` array, whose objects are new every render.
  const target = current.target;
  const placement = current.placement;

  const measure = useCallback(() => {
    const el = resolveTarget(target);
    const vw = document.documentElement.clientWidth;
    const vh = window.innerHeight;
    let spot: Box | null = null;
    if (el) {
      const r = el.getBoundingClientRect();
      spot = {
        left: r.left - padding,
        top: r.top - padding,
        width: r.width + padding * 2,
        height: r.height + padding * 2,
      };
    }
    const glide =
      !reduce && !firstPlace.current && performance.now() < glideUntil.current;
    const set = (mv: MotionValue<number>, v: number) => {
      if (glide) {
        animate(mv, v, SPRING_LAYOUT);
      } else {
        mv.stop();
        mv.set(v);
      }
    };
    // With no target the spotlight collapses to a point at the center and the
    // whole viewport stays dimmed.
    const s = spot ?? { left: vw / 2, top: vh / 2, width: 0, height: 0 };
    set(sx, s.left);
    set(sy, s.top);
    set(sw, s.width);
    set(sh, s.height);

    const card = cardRef.current;
    const placed = placeCard(
      spot,
      { width: card?.offsetWidth ?? 0, height: card?.offsetHeight ?? 0 },
      placement,
      vw,
      vh,
    );
    set(cx, placed.x);
    set(cy, placed.y);
    setSide(placed.side);
    setHasTarget(Boolean(el));
    firstPlace.current = false;
  }, [target, placement, padding, reduce, sx, sy, sw, sh, cx, cy]);

  const schedule = useCallback(() => {
    cancelAnimationFrame(frame.current);
    frame.current = requestAnimationFrame(measure);
  }, [measure]);

  // Step change: bring the target into view, then glide to it.
  // biome-ignore lint/correctness/useExhaustiveDependencies: `index` re-arms the glide even when two steps share a target.
  useLayoutEffect(() => {
    const el = resolveTarget(target);
    if (!firstPlace.current) glideUntil.current = performance.now() + GLIDE_MS;
    if (el) {
      const r = el.getBoundingClientRect();
      const vw = document.documentElement.clientWidth;
      const vh = window.innerHeight;
      if (r.top < 0 || r.bottom > vh || r.left < 0 || r.right > vw) {
        el.scrollIntoView({
          block: "center",
          inline: "nearest",
          behavior: reduce ? "auto" : "smooth",
        });
      }
    }
    measure();
  }, [index, target, measure, reduce]);

  // Follow the target through scrolls (any container), resizes and reflows.
  useEffect(() => {
    const el = resolveTarget(target);
    const observer = new ResizeObserver(schedule);
    if (el) observer.observe(el);
    if (cardRef.current) observer.observe(cardRef.current);
    window.addEventListener("scroll", schedule, true);
    window.addEventListener("resize", schedule);
    return () => {
      cancelAnimationFrame(frame.current);
      observer.disconnect();
      window.removeEventListener("scroll", schedule, true);
      window.removeEventListener("resize", schedule);
    };
  }, [target, schedule]);

  // Focus moves into the card on open and returns to whatever opened the tour
  // the moment it starts closing.
  useLayoutEffect(() => {
    const active = document.activeElement;
    returnFocus.current = active instanceof HTMLElement ? active : null;
    nextRef.current?.focus({ preventScroll: true });
  }, []);

  useEffect(() => {
    if (isPresent) return;
    const target = returnFocus.current;
    if (target?.isConnected) target.focus({ preventScroll: true });
  }, [isPresent]);

  // A step change can unmount the focused control (Back on the first step);
  // keep focus inside the dialog.
  // biome-ignore lint/correctness/useExhaustiveDependencies: runs after each step change.
  useEffect(() => {
    if (!isPresent) return;
    const card = cardRef.current;
    if (card && !card.contains(document.activeElement)) {
      nextRef.current?.focus({ preventScroll: true });
    }
  }, [index, isPresent]);

  useEffect(() => {
    if (!isPresent) return;
    const onKey = (event: globalThis.KeyboardEvent) => {
      if (event.key === "Escape") {
        event.preventDefault();
        close("escape");
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [close, isPresent]);

  const next = () => (last ? close("complete") : goTo(index + 1));
  const back = () => index > 0 && goTo(index - 1);

  const onCardKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
    if (event.key === "Tab") {
      const card = cardRef.current;
      if (!card) return;
      const items = Array.from(card.querySelectorAll<HTMLElement>(FOCUSABLE));
      if (items.length === 0) {
        event.preventDefault();
        return;
      }
      const first = items[0];
      const end = items[items.length - 1];
      if (event.shiftKey && document.activeElement === first) {
        event.preventDefault();
        end.focus();
      } else if (!event.shiftKey && document.activeElement === end) {
        event.preventDefault();
        first.focus();
      }
    } else if (event.key === "ArrowRight") {
      event.preventDefault();
      next();
    } else if (event.key === "ArrowLeft") {
      event.preventDefault();
      back();
    }
  };

  const enterOffset =
    reduce || side === "center"
      ? { x: 0, y: 0 }
      : {
          x: side === "left" ? 6 : side === "right" ? -6 : 0,
          y: side === "top" ? 6 : side === "bottom" ? -6 : 0,
        };

  return (
    <motion.div
      className="fixed inset-0 z-[9998]"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1, transition: { duration: 0.2, ease: EASE_OUT } }}
      exit={{ opacity: 0, transition: { duration: 0.14, ease: EASE_OUT } }}
    >
      {/* Catches pointer input so the page underneath can't be used mid-tour. */}
      <div aria-hidden className="absolute inset-0" />
      {/* Spotlight: a rounded box whose giant box-shadow is the dim layer, so
          the cut-out is a real rounded rect with no clip/mask geometry. Its
          width/height are animated on purpose — the spotlight's size *is* the
          component's layout, and it is a single paint-only element. */}
      <motion.div
        aria-hidden
        className={cn(
          "pointer-events-none absolute left-0 top-0",
          // The ring would draw a dot at the center when there's no target.
          hasTarget && "ring-2 ring-primary/70",
        )}
        style={{
          x: sx,
          y: sy,
          width: sw,
          height: sh,
          borderRadius: radius,
          boxShadow: `0 0 0 200vmax rgb(0 0 0 / ${overlayOpacity})`,
        }}
      />
      <motion.div
        ref={cardRef}
        role="dialog"
        aria-modal="true"
        aria-labelledby={titleId}
        aria-describedby={bodyId}
        onKeyDown={onCardKeyDown}
        className="absolute left-0 top-0 w-[min(20rem,calc(100vw-24px))] outline-none"
        style={{ x: cx, y: cy }}
      >
        <motion.div
          initial={{ opacity: 0, scale: reduce ? 1 : 0.96, ...enterOffset }}
          animate={{ opacity: 1, scale: 1, x: 0, y: 0 }}
          exit={{ opacity: 0, scale: reduce ? 1 : 0.97 }}
          transition={reduce ? { duration: 0.15 } : SPRING_PANEL}
          className={cn(
            "rounded-2xl border border-border bg-background p-4 text-foreground shadow-2xl",
            className,
          )}
        >
          <motion.div
            key={index}
            aria-live="polite"
            initial={{ opacity: 0, y: reduce ? 0 : 4 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.22, ease: EASE_OUT }}
          >
            <p className="text-xs font-medium text-muted-foreground tabular-nums">
              Step {index + 1} of {steps.length}
            </p>
            <h2 id={titleId} className="mt-1 text-sm font-semibold">
              {current.title}
            </h2>
            <div
              id={bodyId}
              className="mt-1.5 text-sm leading-relaxed text-muted-foreground"
            >
              {current.content}
            </div>
          </motion.div>

          <div className="mt-4 flex items-center justify-between gap-3">
            <StepDots count={steps.length} index={index} reduce={reduce} />
            <div className="flex items-center gap-1.5">
              {!last ? (
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => close("skip")}
                >
                  {labels?.skip ?? "Skip"}
                </Button>
              ) : null}
              {index > 0 ? (
                <Button variant="outline" size="sm" onClick={back}>
                  {labels?.back ?? "Back"}
                </Button>
              ) : null}
              <Button ref={nextRef} size="sm" onClick={next}>
                {last ? (labels?.done ?? "Done") : (labels?.next ?? "Next")}
              </Button>
            </div>
          </div>
        </motion.div>
      </motion.div>
    </motion.div>
  );
}

const DOT = 6;
const DOT_GAP = 6;

function StepDots({
  count,
  index,
  reduce,
}: {
  count: number;
  index: number;
  reduce: boolean;
}) {
  return (
    <div aria-hidden className="relative flex items-center" style={{ gap: DOT_GAP }}>
      {Array.from({ length: count }, (_, i) => (
        <span
          // biome-ignore lint/suspicious/noArrayIndexKey: dots are positional.
          key={i}
          className={cn(
            "block rounded-full transition-colors",
            i < index ? "bg-primary/50" : "bg-muted-foreground/25",
          )}
          style={{ width: DOT, height: DOT }}
        />
      ))}
      <motion.span
        className="absolute left-0 top-1/2 block rounded-full bg-primary"
        style={{ width: DOT, height: DOT, marginTop: -DOT / 2 }}
        initial={false}
        animate={{ x: index * (DOT + DOT_GAP), scale: 1.35 }}
        transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
      />
    </div>
  );
}

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,
  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 { TOUCH_TARGET_CLASS } from "@/lib/touch";
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-primary/5",
  outline:
    "border border-border bg-transparent text-foreground hover:bg-primary/5",
};

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(
          "relative inline-flex items-center justify-center font-medium select-none",
          "transition-colors",
          "disabled:pointer-events-none disabled:opacity-50",
          // The ripple layer clips itself, so on a touch screen the button can
          // stop clipping and let its enlarged hit area overhang.
          ripple && "overflow-hidden pointer-coarse:overflow-visible",
          TOUCH_TARGET_CLASS,
          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(
          "relative inline-flex items-center justify-center font-medium select-none",
          "transition-colors",
          TOUCH_TARGET_CLASS,
          VARIANT_CLASS[variant],
          SIZE_CLASS[size],
          className,
        )}
        {...rest}
      >
        {children}
      </motion.a>
    );
  },
);

"use client";

import { forwardRef } from "react";
import { Magnetic } from "../magnetic";
import { Button, type ButtonProps } from "./base";

export interface MagneticButtonProps extends ButtonProps {
  /** Magnetic pull strength. Default 0.25. */
  strength?: number;
  /** Class applied to the magnetic wrapper. */
  magneticClassName?: string;
}

export const MagneticButton = forwardRef<HTMLButtonElement, MagneticButtonProps>(function MagneticButton(
  { strength = 0.25, magneticClassName, children, ...rest },
  ref,
) {
  return (
    <Magnetic strength={strength} className={magneticClassName}>
      <Button ref={ref} {...rest}>
        {children}
      </Button>
    </Magnetic>
  );
});

"use client";

import { Check, Loader2, X } from "lucide-react";
import {
  AnimatePresence,
  motion,
  useReducedMotion,
  type Variants,
} from "motion/react";
import {
  forwardRef,
  type ReactNode,
  useLayoutEffect,
  useRef,
  useState,
} from "react";
import { EASE_OUT, SPRING_SWAP } from "@/lib/ease";
import { Button, type ButtonProps } from "./base";

export type ButtonState = "idle" | "loading" | "success" | "error";

export interface StatefulButtonProps extends Omit<ButtonProps, "children"> {
  state?: ButtonState;
  children: ReactNode;
  loadingText?: ReactNode;
  successText?: ReactNode;
  errorText?: ReactNode;
  icon?: ReactNode;
}

const CASCADE_STAGGER = 0.025;
const ROLL_BLUR = "blur(6px)";

const CASCADE_LETTER_VARIANTS: Variants = {
  initial: { opacity: 0, y: "105%", filter: ROLL_BLUR },
  animate: (delay: number = 0) => ({
    opacity: 1,
    y: "0%",
    filter: "blur(0px)",
    transition: { ...SPRING_SWAP, delay },
  }),
  exit: (delay: number = 0) => ({
    opacity: 0,
    y: "-105%",
    filter: ROLL_BLUR,
    transition: { duration: 0.16, ease: EASE_OUT, delay: delay * 0.5 },
  }),
};

const ICON_VARIANTS: Variants = {
  // Width collapses too, so the icon adds/removes its own space smoothly
  // instead of popping the row width in a single frame.
  initial: { opacity: 0, width: 0, scale: 0.7, filter: ROLL_BLUR },
  animate: {
    opacity: 1,
    width: "1.5rem",
    scale: 1,
    filter: "blur(0px)",
    transition: SPRING_SWAP,
  },
  exit: {
    opacity: 0,
    width: 0,
    scale: 0.7,
    filter: ROLL_BLUR,
    transition: { duration: 0.16, ease: EASE_OUT },
  },
};

function IconSlot({ keyId, children }: { keyId: string; children: ReactNode }) {
  const reduce = useReducedMotion();
  return (
    <motion.span
      key={keyId}
      variants={ICON_VARIANTS}
      initial={reduce ? { opacity: 0 } : "initial"}
      animate={reduce ? { opacity: 1 } : "animate"}
      exit={reduce ? { opacity: 0 } : "exit"}
      transition={reduce ? { duration: 0.15 } : undefined}
      className="inline-grid shrink-0 place-items-center overflow-hidden"
    >
      {children}
    </motion.span>
  );
}

function TextSlot({
  value,
  children,
}: {
  value: string;
  children: ReactNode;
}) {
  const reduce = useReducedMotion();
  const measureRef = useRef<HTMLSpanElement>(null);
  const [width, setWidth] = useState<number>();
  const label = typeof children === "string" ? children : null;
  const cascade = label !== null && !reduce;

  // Measure strings with the same per-letter layout as the cascade. Measuring
  // the whole string preserves kerning, which can make it narrower than the
  // inline-block letters and clip the final glyph during the width animation.
  useLayoutEffect(() => {
    const nextWidth = measureRef.current?.offsetWidth;
    if (!nextWidth) return;
    setWidth((current) => (current === nextWidth ? current : nextWidth));
  });

  return (
    <motion.span
      initial={false}
      animate={{ width }}
      transition={reduce ? { duration: 0 } : SPRING_SWAP}
      className="relative inline-block overflow-hidden whitespace-nowrap align-bottom"
    >
      <span
        ref={measureRef}
        aria-hidden
        className="invisible inline-block whitespace-nowrap"
      >
        {cascade
          ? label.split("").map((char, index) => (
              <span
                // biome-ignore lint/suspicious/noArrayIndexKey: position is the slot identity.
                key={index}
                className="inline-block whitespace-pre"
              >
                {char}
              </span>
            ))
          : children}
      </span>

      {cascade ? (
        <>
          <span className="sr-only">{label}</span>
          <AnimatePresence initial={false}>
            <motion.span
              key={`cascade-${value}`}
              aria-hidden
              initial="initial"
              animate="animate"
              exit="exit"
              className="absolute left-0 top-0 inline-block whitespace-pre"
            >
              {label.split("").map((char, index) => (
                <motion.span
                  // biome-ignore lint/suspicious/noArrayIndexKey: position is the slot identity.
                  key={index}
                  custom={index * CASCADE_STAGGER}
                  variants={CASCADE_LETTER_VARIANTS}
                  className="inline-block whitespace-pre will-change-[opacity,filter,transform]"
                >
                  {char}
                </motion.span>
              ))}
            </motion.span>
          </AnimatePresence>
        </>
      ) : (
        <AnimatePresence initial={false}>
          <motion.span
            key={`text-${value}`}
            initial={reduce ? { opacity: 0 } : { opacity: 0, y: 14, filter: ROLL_BLUR }}
            animate={reduce ? { opacity: 1 } : { opacity: 1, y: 0, filter: "blur(0px)" }}
            exit={reduce ? { opacity: 0 } : { opacity: 0, y: -14, filter: ROLL_BLUR }}
            transition={reduce ? { duration: 0.15 } : SPRING_SWAP}
            className="absolute left-0 top-0 inline-block will-change-[opacity,filter,transform]"
          >
            {children}
          </motion.span>
        </AnimatePresence>
      )}
    </motion.span>
  );
}

export const StatefulButton = forwardRef<HTMLButtonElement, StatefulButtonProps>(function StatefulButton(
  {
    state = "idle",
    children,
    loadingText = "Loading",
    successText = "Done",
    errorText = "Try again",
    icon,
    disabled,
    ...rest
  },
  ref,
) {
  const isBusy = state === "loading";
  const stateText =
    state === "loading"
      ? loadingText
      : state === "success"
        ? successText
        : state === "error"
        ? errorText
        : children;
  const textKey =
    typeof stateText === "string" ? `${state}-${stateText}` : state;

  return (
    <Button ref={ref} disabled={disabled || isBusy} aria-busy={isBusy} whileHover={undefined} {...rest}>
      <span
        aria-live="polite"
        className="relative inline-flex items-center justify-center overflow-hidden"
      >
        <AnimatePresence initial={false}>
          {state === "loading" ? (
            <IconSlot keyId="loading-icon">
              <Loader2 className="h-4 w-4 animate-spin" />
            </IconSlot>
          ) : null}
          {state === "success" ? (
            <IconSlot keyId="success-icon">
              <Check className="h-4 w-4" />
            </IconSlot>
          ) : null}
          {state === "error" ? (
            <IconSlot keyId="error-icon">
              <X className="h-4 w-4" />
            </IconSlot>
          ) : null}
        </AnimatePresence>

        <TextSlot value={textKey}>{stateText}</TextSlot>

        <AnimatePresence initial={false}>
          {state === "idle" && icon ? (
            <IconSlot keyId="idle-icon">{icon}</IconSlot>
          ) : null}
        </AnimatePresence>
      </span>
    </Button>
  );
});

"use client";

import { motion, useMotionValue, useReducedMotion, useSpring } from "motion/react";
import { useRef, type ReactNode } from "react";
import { SPRING_MOUSE } from "@/lib/ease";
import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
import { cn } from "@/lib/utils";

export interface MagneticProps {
  children: ReactNode;
  strength?: number;
  className?: string;
}

export function Magnetic({ children, strength = 0.35, className }: MagneticProps) {
  const ref = useRef<HTMLDivElement>(null);
  const reduce = useReducedMotion();
  const canHover = useHoverCapable();
  // Decorative cursor-follow: skip on touch (phantom hover) and reduced motion.
  const enabled = !reduce && canHover;
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const sx = useSpring(x, SPRING_MOUSE);
  const sy = useSpring(y, SPRING_MOUSE);

  const onMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const el = ref.current;
    if (!el || !enabled) return;
    const rect = el.getBoundingClientRect();
    x.set((e.clientX - rect.left - rect.width / 2) * strength);
    y.set((e.clientY - rect.top - rect.height / 2) * strength);
  };

  const onLeave = () => {
    x.set(0);
    y.set(0);
  };

  return (
    <motion.div
      ref={ref}
      onMouseMove={onMove}
      onMouseLeave={onLeave}
      style={{ x: sx, y: sy }}
      className={cn("inline-block", className)}
    >
      {children}
    </motion.div>
  );
}