Status Page

// 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";
// karaui.kamisama-v0.my.id/components/blocks/status-page

import { AlertTriangle, CheckCircle2, ChevronDown, Wrench, XCircle } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { type KeyboardEvent, type ReactNode, useId, useMemo, useRef, useState } from "react";
import { Badge, type BadgeVariant } from "@/components/motion/badge";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/motion/collapsible";
import { EASE_OUT, SPRING_SWAP } from "@/lib/ease";
import { cn } from "@/lib/utils";

export type ServiceDayStatus =
  | "operational"
  | "degraded"
  | "partial"
  | "major"
  | "maintenance"
  | "nodata";

export interface ServiceDay {
  /** Calendar day, `YYYY-MM-DD` (read as UTC so server and client agree). */
  date: string;
  status: ServiceDayStatus;
  /** Incident titles that touched this day; shown in the bar tooltip. */
  incidents?: string[];
}

export interface StatusService {
  id: string;
  name: string;
  description?: string;
  /** Oldest first; typically 90 entries. The last day is "today". */
  days: ServiceDay[];
  /** Override the computed uptime percentage. */
  uptime?: number;
}

export type IncidentStatus = "investigating" | "identified" | "monitoring" | "resolved";
export type IncidentImpact = "minor" | "major" | "critical" | "maintenance";

export interface IncidentUpdate {
  id: string;
  status: IncidentStatus;
  message: string;
  /** ISO timestamp. */
  at: string;
}

export interface StatusIncident {
  id: string;
  title: string;
  impact: IncidentImpact;
  status: IncidentStatus;
  /** Newest first. */
  updates: IncidentUpdate[];
  /** Affected service names. */
  services?: string[];
}

export interface StatusPageProps {
  services: StatusService[];
  incidents?: StatusIncident[];
  title?: ReactNode;
  /** Pre-formatted "last updated" text (never computed, so markup stays deterministic). */
  lastUpdated?: ReactNode;
  /** Ids of incidents expanded on mount. Default: unresolved ones. */
  defaultExpandedIncidents?: string[];
  locale?: string;
  /** IANA time zone for incident timestamps. Default "UTC" so SSR matches. */
  timeZone?: string;
  className?: string;
}

const DAY_TONE: Record<ServiceDayStatus, string> = {
  operational: "bg-success",
  degraded: "bg-warning/70",
  partial: "bg-warning",
  major: "bg-destructive",
  maintenance: "bg-chart-2",
  nodata: "bg-foreground/10",
};

const DAY_LABEL: Record<ServiceDayStatus, string> = {
  operational: "No downtime",
  degraded: "Degraded performance",
  partial: "Partial outage",
  major: "Major outage",
  maintenance: "Scheduled maintenance",
  nodata: "No data",
};

// Share of the day counted as up, for the computed uptime figure.
const DAY_UPTIME: Record<ServiceDayStatus, number | null> = {
  operational: 1,
  degraded: 0.998,
  partial: 0.99,
  major: 0.95,
  maintenance: 1,
  nodata: null,
};

const SEVERITY: ServiceDayStatus[] = ["operational", "maintenance", "degraded", "partial", "major"];

const IMPACT_BADGE: Record<IncidentImpact, BadgeVariant> = {
  minor: "warning",
  major: "destructive",
  critical: "destructive",
  maintenance: "secondary",
};

const STATUS_TEXT: Record<IncidentStatus, string> = {
  investigating: "Investigating",
  identified: "Identified",
  monitoring: "Monitoring",
  resolved: "Resolved",
};

export function computeUptime(days: ServiceDay[]) {
  const counted = days
    .map((d) => DAY_UPTIME[d.status])
    .filter((v): v is number => v != null);
  if (counted.length === 0) return 100;
  return (counted.reduce((a, b) => a + b, 0) / counted.length) * 100;
}

function overallOf(services: StatusService[]) {
  let worst: ServiceDayStatus = "operational";
  for (const s of services) {
    const today = s.days[s.days.length - 1]?.status ?? "operational";
    if (SEVERITY.indexOf(today) > SEVERITY.indexOf(worst)) worst = today;
  }
  return worst;
}

const BANNER: Record<
  ServiceDayStatus,
  { text: string; icon: ReactNode; className: string }
> = {
  operational: {
    text: "All systems operational",
    icon: <CheckCircle2 aria-hidden="true" />,
    className: "border-success/30 bg-success/10 text-[color-mix(in_oklab,var(--success)_70%,var(--foreground))]",
  },
  nodata: {
    text: "All systems operational",
    icon: <CheckCircle2 aria-hidden="true" />,
    className: "border-success/30 bg-success/10 text-[color-mix(in_oklab,var(--success)_70%,var(--foreground))]",
  },
  maintenance: {
    text: "Scheduled maintenance in progress",
    icon: <Wrench aria-hidden="true" />,
    className: "border-chart-2/30 bg-chart-2/10 text-foreground",
  },
  degraded: {
    text: "Degraded performance",
    icon: <AlertTriangle aria-hidden="true" />,
    className: "border-warning/40 bg-warning/10 text-[color-mix(in_oklab,var(--warning)_60%,var(--foreground))]",
  },
  partial: {
    text: "Partial system outage",
    icon: <AlertTriangle aria-hidden="true" />,
    className: "border-warning/40 bg-warning/15 text-[color-mix(in_oklab,var(--warning)_60%,var(--foreground))]",
  },
  major: {
    text: "Major system outage",
    icon: <XCircle aria-hidden="true" />,
    className: "border-destructive/40 bg-destructive/10 text-[color-mix(in_oklab,var(--destructive)_70%,var(--foreground))]",
  },
};

export function StatusPage({
  services,
  incidents = [],
  title = "System status",
  lastUpdated,
  defaultExpandedIncidents,
  locale = "en-US",
  timeZone = "UTC",
  className,
}: StatusPageProps) {
  const reduce = useReducedMotion() ?? false;
  const overall = overallOf(services);
  const banner = BANNER[overall];
  const dayFormat = useMemo(
    () => new Intl.DateTimeFormat(locale, { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" }),
    [locale],
  );
  const stampFormat = useMemo(
    () =>
      new Intl.DateTimeFormat(locale, {
        month: "short",
        day: "numeric",
        hour: "numeric",
        minute: "2-digit",
        timeZone,
        timeZoneName: "short",
      }),
    [locale, timeZone],
  );

  return (
    <div className={cn("flex w-full flex-col gap-4 text-sm", className)}>
      <div className="flex items-end justify-between gap-3">
        <h2 className="text-base font-semibold text-foreground">{title}</h2>
        {lastUpdated && <p className="text-xs text-muted-foreground">{lastUpdated}</p>}
      </div>

      <div
        role="status"
        className={cn(
          "relative flex items-center gap-2.5 overflow-hidden rounded-xl border border-border px-4 py-3 font-medium [&_svg]:size-5 [&_svg]:shrink-0",
          banner.className,
        )}
      >
        <AnimatePresence initial={false} mode="popLayout">
          <motion.span
            key={overall}
            className="flex items-center gap-2.5"
            initial={reduce ? { opacity: 0 } : { opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            exit={reduce ? { opacity: 0 } : { opacity: 0, y: -8 }}
            transition={SPRING_SWAP}
          >
            {banner.icon}
            {banner.text}
          </motion.span>
        </AnimatePresence>
      </div>

      <div className="divide-y divide-border rounded-xl border border-border bg-card">
        {services.map((service, i) => (
          <ServiceRow
            key={service.id}
            service={service}
            dayFormat={dayFormat}
            reduce={reduce}
            index={i}
          />
        ))}
        <div className="flex items-center justify-between px-4 py-2 text-[11px] text-muted-foreground">
          <span>{services[0]?.days.length ?? 90} days ago</span>
          <span className="flex items-center gap-3">
            {(["operational", "degraded", "major"] as const).map((s) => (
              <span key={s} className="inline-flex items-center gap-1">
                <span aria-hidden="true" className={cn("size-2 rounded-sm", DAY_TONE[s])} />
                {s === "operational" ? "Up" : s === "degraded" ? "Degraded" : "Outage"}
              </span>
            ))}
          </span>
          <span>Today</span>
        </div>
      </div>

      {incidents.length > 0 && (
        <section aria-label="Incidents" className="flex flex-col gap-2">
          <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
            Recent incidents
          </h3>
          <ol className="flex flex-col gap-2">
            {incidents.map((incident) => (
              <IncidentItem
                key={incident.id}
                incident={incident}
                stampFormat={stampFormat}
                defaultOpen={
                  defaultExpandedIncidents
                    ? defaultExpandedIncidents.includes(incident.id)
                    : incident.status !== "resolved"
                }
                reduce={reduce}
              />
            ))}
          </ol>
        </section>
      )}
    </div>
  );
}

function ServiceRow({
  service,
  dayFormat,
  reduce,
  index,
}: {
  service: StatusService;
  dayFormat: Intl.DateTimeFormat;
  reduce: boolean;
  index: number;
}) {
  const id = useId();
  const [hover, setHover] = useState<number | null>(null);
  const [focusIndex, setFocusIndex] = useState(service.days.length - 1);
  const barsRef = useRef<HTMLFieldSetElement>(null);
  const uptime = service.uptime ?? computeUptime(service.days);
  const today = service.days[service.days.length - 1]?.status ?? "operational";
  const count = service.days.length;
  const active = hover != null ? service.days[hover] : undefined;

  const formatDay = (date: string) => dayFormat.format(new Date(`${date}T00:00:00Z`));

  // One tab stop per row; arrows walk the days.
  const onKeyDown = (event: KeyboardEvent<HTMLFieldSetElement>) => {
    const step: Record<string, number> = { ArrowRight: 1, ArrowLeft: -1, Home: -count, End: count };
    const delta = step[event.key];
    if (delta == null) return;
    event.preventDefault();
    const next = Math.max(0, Math.min(count - 1, focusIndex + delta));
    setFocusIndex(next);
    setHover(next);
    barsRef.current?.querySelectorAll<HTMLButtonElement>("button")[next]?.focus();
  };

  return (
    <div className="flex flex-col gap-2 px-4 py-3">
      <div className="flex items-center gap-2">
        <span className="font-medium text-foreground">{service.name}</span>
        {service.description && (
          <span className="hidden truncate text-xs text-muted-foreground sm:inline">{service.description}</span>
        )}
        <span className="ml-auto font-mono text-xs tabular-nums text-muted-foreground">
          {uptime.toFixed(2)}% uptime
        </span>
        <span
          className={cn("size-2 rounded-full", DAY_TONE[today === "nodata" ? "operational" : today])}
          aria-label={DAY_LABEL[today]}
          role="img"
        />
      </div>
      <div className="relative">
        <fieldset
          ref={barsRef}
          aria-label={`${service.name}, last ${count} days`}
          onKeyDown={onKeyDown}
          onPointerLeave={() => setHover(null)}
          className="m-0 flex h-8 min-w-0 items-end gap-px border-0 p-0"
        >
          {service.days.map((day, i) => (
            <motion.button
              key={day.date}
              type="button"
              tabIndex={i === focusIndex ? 0 : -1}
              aria-label={`${formatDay(day.date)}: ${DAY_LABEL[day.status]}${
                day.incidents?.length ? `, ${day.incidents.join("; ")}` : ""
              }`}
              aria-describedby={hover === i ? `${id}-tip` : undefined}
              onPointerEnter={() => setHover(i)}
              onFocus={() => {
                setHover(i);
                setFocusIndex(i);
              }}
              onBlur={() => setHover(null)}
              initial={reduce ? { opacity: 0 } : { opacity: 0, scaleY: 0.2 }}
              whileInView={{ opacity: 1, scaleY: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.35, ease: EASE_OUT, delay: index * 0.06 + i * 0.004 }}
              className={cn(
                "h-full min-w-0 flex-1 origin-bottom rounded-xs outline-none transition-opacity",
                "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-card",
                DAY_TONE[day.status],
                hover != null && hover !== i && "opacity-60",
              )}
            />
          ))}
        </fieldset>
        <AnimatePresence>
          {active && hover != null && (
            <motion.div
              id={`${id}-tip`}
              role="tooltip"
              key="tip"
              style={{ left: `${((hover + 0.5) / count) * 100}%` }}
              initial={{ opacity: 0, y: reduce ? 0 : 4 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, transition: { duration: 0.1 } }}
              transition={{ duration: 0.14, ease: EASE_OUT }}
              className={cn(
                "pointer-events-none absolute bottom-full z-20 mb-2 w-48 rounded-lg border border-border bg-popover p-2.5 text-xs text-popover-foreground shadow-md",
                hover < count * 0.2 ? "translate-x-[-10%]" : hover > count * 0.8 ? "-translate-x-[90%]" : "-translate-x-1/2",
              )}
            >
              <p className="font-medium text-foreground">{formatDay(active.date)}</p>
              <p className="mt-0.5 flex items-center gap-1.5 text-muted-foreground">
                <span aria-hidden="true" className={cn("size-2 rounded-sm", DAY_TONE[active.status])} />
                {DAY_LABEL[active.status]}
              </p>
              {active.incidents?.length ? (
                <ul className="mt-1.5 space-y-0.5 border-t border-border pt-1.5 text-foreground">
                  {active.incidents.map((t) => (
                    <li key={t} className="truncate">
                      {t}
                    </li>
                  ))}
                </ul>
              ) : null}
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
}

function IncidentItem({
  incident,
  stampFormat,
  defaultOpen,
  reduce,
}: {
  incident: StatusIncident;
  stampFormat: Intl.DateTimeFormat;
  defaultOpen: boolean;
  reduce: boolean;
}) {
  const [open, setOpen] = useState(defaultOpen);
  const latest = incident.updates[0];
  const resolved = incident.status === "resolved";

  return (
    <li className="rounded-xl border border-border bg-card">
      <Collapsible open={open} onOpenChange={setOpen}>
        <CollapsibleTrigger className="flex w-full items-start gap-3 rounded-xl px-4 py-3 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring">
          <span
            aria-hidden="true"
            className={cn(
              "mt-1.5 size-2 shrink-0 rounded-full",
              resolved ? "bg-success" : incident.impact === "maintenance" ? "bg-chart-2" : "bg-warning",
            )}
          />
          <span className="min-w-0 flex-1">
            <span className="block font-medium text-foreground">{incident.title}</span>
            <span className="mt-1 flex flex-wrap items-center gap-1.5">
              <Badge size="sm" variant={resolved ? "success" : "warning"} dot={resolved ? true : "pulse"}>
                {STATUS_TEXT[incident.status]}
              </Badge>
              <Badge size="sm" variant={IMPACT_BADGE[incident.impact]}>
                {incident.impact === "maintenance" ? "Maintenance" : `${incident.impact[0]?.toUpperCase()}${incident.impact.slice(1)} impact`}
              </Badge>
              {latest && (
                <time dateTime={latest.at} className="text-xs text-muted-foreground">
                  {stampFormat.format(new Date(latest.at))}
                </time>
              )}
            </span>
          </span>
          <motion.span
            aria-hidden="true"
            animate={{ rotate: open ? 180 : 0 }}
            transition={reduce ? { duration: 0 } : SPRING_SWAP}
            className="mt-0.5 text-muted-foreground"
          >
            <ChevronDown className="size-4" />
          </motion.span>
        </CollapsibleTrigger>
        <CollapsibleContent innerClassName="px-4 pb-4">
          <ol className="relative ml-1 flex flex-col gap-3 border-l border-border pl-4">
            {incident.updates.map((update, i) => (
              <li key={update.id} className="relative">
                <span
                  aria-hidden="true"
                  className={cn(
                    "absolute -left-[21px] top-1 size-2.5 rounded-full border-2 border-card",
                    i === 0 ? (resolved ? "bg-success" : "bg-warning") : "bg-foreground/25",
                  )}
                />
                <p className="text-xs">
                  <span className="font-medium text-foreground">{STATUS_TEXT[update.status]}</span>
                  <span className="text-muted-foreground"> · </span>
                  <time dateTime={update.at} className="text-muted-foreground">
                    {stampFormat.format(new Date(update.at))}
                  </time>
                </p>
                <p className="mt-0.5 text-muted-foreground">{update.message}</p>
              </li>
            ))}
          </ol>
          {incident.services?.length ? (
            <p className="mt-3 text-xs text-muted-foreground">
              Affected: <span className="text-foreground">{incident.services.join(", ")}</span>
            </p>
          ) : null}
        </CollapsibleContent>
      </Collapsible>
    </li>
  );
}

"use client";

import { X } from "lucide-react";
import {
  AnimatePresence,
  motion,
  PresenceContext,
  useAnimate,
  useReducedMotion,
  type Variants,
} from "motion/react";
import {
  type KeyboardEvent as ReactKeyboardEvent,
  type ReactNode,
  useContext,
  useEffect,
  useRef,
  useState,
} from "react";
import { EASE_OUT, SPRING_LAYOUT, SPRING_PANEL, SPRING_SWAP } from "@/lib/ease";
import { cn } from "@/lib/utils";

export type BadgeVariant =
  | "default"
  | "secondary"
  | "outline"
  | "destructive"
  | "success"
  | "warning";

export type BadgeSize = "sm" | "md" | "lg";

/** Soft tinted surface or a filled one. Only the status variants differ. */
export type BadgeTone = "soft" | "solid";

const BASE: Record<"default" | "secondary" | "outline", string> = {
  default: "border-transparent bg-primary text-primary-foreground",
  secondary: "border-transparent bg-foreground/[0.07] text-foreground",
  outline: "border-border-strong bg-transparent text-foreground",
};

// Status tints mix the token toward --foreground/--background (as `alert`
// does), so the text keeps its contrast in both themes and every design style.
const SOFT: Record<"destructive" | "success" | "warning", string> = {
  destructive:
    "border-[color-mix(in_oklab,var(--destructive)_30%,transparent)] bg-[color-mix(in_oklab,var(--destructive)_10%,var(--background))] text-[color-mix(in_oklab,var(--destructive)_78%,var(--foreground))]",
  success:
    "border-[color-mix(in_oklab,var(--success)_32%,transparent)] bg-[color-mix(in_oklab,var(--success)_11%,var(--background))] text-[color-mix(in_oklab,var(--success)_60%,var(--foreground))]",
  warning:
    "border-[color-mix(in_oklab,var(--warning)_40%,transparent)] bg-[color-mix(in_oklab,var(--warning)_13%,var(--background))] text-[color-mix(in_oklab,var(--warning)_52%,var(--foreground))]",
};

// Filled status badges. Red reads best with light text in both themes;
// green and amber are light hues, so they always get dark text.
const SOLID: Record<"destructive" | "success" | "warning", string> = {
  destructive:
    "border-transparent bg-destructive text-background dark:text-foreground",
  success:
    "border-transparent bg-success text-[color-mix(in_oklab,var(--success)_22%,var(--foreground))] dark:text-[color-mix(in_oklab,var(--success)_22%,var(--background))]",
  warning:
    "border-transparent bg-warning text-[color-mix(in_oklab,var(--warning)_22%,var(--foreground))] dark:text-[color-mix(in_oklab,var(--warning)_22%,var(--background))]",
};

const SIZE: Record<BadgeSize, string> = {
  sm: "h-5 gap-1 px-1.5 text-[11px] [&_svg]:size-3",
  md: "h-6 gap-1.5 px-2 text-xs [&_svg]:size-3.5",
  lg: "h-7 gap-1.5 px-2.5 text-[13px] [&_svg]:size-3.5",
};

// Count badges are circles at one digit and pills beyond.
const COUNT_SIZE: Record<BadgeSize, string> = {
  sm: "h-4 min-w-4 px-1 text-[10px]",
  md: "h-5 min-w-5 px-1.5 text-[11px]",
  lg: "h-6 min-w-6 px-1.5 text-xs",
};

function variantClass(variant: BadgeVariant, tone: BadgeTone) {
  if (variant === "default" || variant === "secondary" || variant === "outline") {
    return BASE[variant];
  }
  return tone === "solid" ? SOLID[variant] : SOFT[variant];
}

export interface BadgeProps {
  children?: ReactNode;
  variant?: BadgeVariant;
  /** Status variants only (destructive/success/warning). Default "soft". */
  tone?: BadgeTone;
  size?: BadgeSize;
  /** Leading status dot in the text color; `"pulse"` adds a radiating ring. */
  dot?: boolean | "pulse";
  /** Leading icon (sized to the badge). Ignored when `dot` is set. */
  icon?: ReactNode;
  /**
   * Makes the badge removable: an × button plays the exit, then calls this.
   * Focus moves to the neighbouring chip's × when the removal came from it.
   */
  onRemove?: () => void;
  /** Accessible name of the × button. Default `Remove <text>`. */
  removeLabel?: string;
  /**
   * Count mode: renders a compact number that rolls up or down as it changes
   * and bumps when it rises. Hidden at 0 unless `showZero`.
   */
  count?: number;
  /** Counts above this read "max+". Default 99. */
  max?: number;
  showZero?: boolean;
  /** Spoken label for count mode, e.g. `(n) => \`${n} unread\``. */
  countLabel?: (count: number) => string;
  className?: string;
}

/**
 * General-purpose badge: six variants, three sizes, an optional (pulsing) dot
 * or icon, removable chips with an exit animation, and a count mode with
 * rolling digits capped at "99+". For animated status transitions
 * (loading → success) use `AnimatedBadge` instead.
 */
export function Badge(props: BadgeProps) {
  if (props.count !== undefined) return <CountBadge {...props} count={props.count} />;
  return <LabelBadge {...props} />;
}

/* -------------------------------------------------------------------------- */
/*                                 Label badge                                */
/* -------------------------------------------------------------------------- */

function LabelBadge({
  children,
  variant = "default",
  tone = "soft",
  size = "md",
  dot = false,
  icon,
  onRemove,
  removeLabel,
  className,
}: BadgeProps) {
  const reduce = useReducedMotion() ?? false;
  // Inside an AnimatePresence the badge pops in when added; anywhere else it
  // renders as-is so server HTML is visible before hydration.
  const inPresence = useContext(PresenceContext) !== null;
  const rootRef = useRef<HTMLSpanElement>(null);
  const [leaving, setLeaving] = useState(false);
  const refocus = useRef<HTMLElement | null>(null);
  const removable = Boolean(onRemove);

  const hidden = reduce ? { opacity: 0 } : { opacity: 0, scale: 0.8 };

  const startRemove = (fromKeyboardFocus: boolean) => {
    if (leaving) return;
    if (fromKeyboardFocus) refocus.current = neighbourRemoveButton(rootRef.current);
    setLeaving(true);
  };

  const finishRemove = () => {
    if (!leaving) return;
    const target = refocus.current;
    refocus.current = null;
    onRemove?.();
    if (target) requestAnimationFrame(() => target.focus({ preventScroll: true }));
  };

  const text = typeof children === "string" ? children : undefined;

  return (
    <motion.span
      ref={rootRef}
      data-badge=""
      // Siblings glide into the gap a removed chip leaves (transform-only).
      layout={removable && !reduce ? "position" : false}
      initial={inPresence ? hidden : false}
      animate={
        leaving
          ? { ...hidden, pointerEvents: "none" }
          : { opacity: 1, scale: 1, pointerEvents: "auto" }
      }
      // Already faded out by the × — leave at once so siblings close the gap.
      exit={{
        ...hidden,
        pointerEvents: "none",
        transition: { duration: leaving ? 0 : 0.12, ease: EASE_OUT },
      }}
      transition={
        leaving
          ? { duration: 0.14, ease: EASE_OUT }
          : reduce
            ? { duration: 0.12 }
            : { ...SPRING_PANEL, layout: SPRING_LAYOUT }
      }
      onAnimationComplete={finishRemove}
      className={cn(
        "inline-flex shrink-0 select-none items-center whitespace-nowrap rounded-full border font-medium leading-none",
        SIZE[size],
        variantClass(variant, tone),
        removable && (size === "sm" ? "pr-0.5" : "pr-1"),
        className,
      )}
    >
      {dot ? (
        <Dot pulse={dot === "pulse" && !reduce} />
      ) : icon ? (
        <span aria-hidden="true" className="inline-flex shrink-0">
          {icon}
        </span>
      ) : null}
      <span className="min-w-0 truncate">{children}</span>
      {removable ? (
        <button
          type="button"
          data-badge-remove=""
          aria-label={removeLabel ?? (text ? `Remove ${text}` : "Remove")}
          onClick={(event) => startRemove(event.detail === 0)}
          onKeyDown={(event: ReactKeyboardEvent<HTMLButtonElement>) => {
            if (event.key === "Backspace" || event.key === "Delete") {
              event.preventDefault();
              startRemove(true);
            }
          }}
          className={cn(
            "inline-flex shrink-0 items-center justify-center rounded-full opacity-70 outline-none transition-[opacity,background-color] hover:bg-current/15 hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-current/40",
            size === "sm" ? "size-4" : "size-[18px]",
          )}
        >
          <X aria-hidden="true" strokeWidth={2.4} className="size-3!" />
        </button>
      ) : null}
    </motion.span>
  );
}

/** The × of the next chip in the row, else the previous one. */
function neighbourRemoveButton(node: HTMLElement | null) {
  if (!node) return null;
  const pick = (el: Element | null) =>
    el?.querySelector<HTMLElement>("[data-badge-remove]") ?? null;
  let next = node.nextElementSibling;
  while (next && !pick(next)) next = next.nextElementSibling;
  if (next) return pick(next);
  let prev = node.previousElementSibling;
  while (prev && !pick(prev)) prev = prev.previousElementSibling;
  return prev ? pick(prev) : null;
}

// One pulse cycle of the dot's radiating ring, in seconds. Slow on purpose:
// an ambient "live" signal, not feedback, so it sits well outside UI timing.
const PULSE_DURATION = 1.6;

function Dot({ pulse }: { pulse: boolean }) {
  return (
    <span aria-hidden="true" className="relative inline-flex size-1.5 shrink-0">
      {pulse ? (
        <motion.span
          className="absolute inset-0 rounded-full bg-current"
          initial={{ scale: 1, opacity: 0.55 }}
          animate={{ scale: 2.6, opacity: 0 }}
          transition={{
            duration: PULSE_DURATION,
            ease: EASE_OUT,
            repeat: Number.POSITIVE_INFINITY,
          }}
        />
      ) : null}
      <span className="relative size-1.5 rounded-full bg-current" />
    </span>
  );
}

/* -------------------------------------------------------------------------- */
/*                                 Count badge                                */
/* -------------------------------------------------------------------------- */

function CountBadge({
  count,
  max = 99,
  showZero = false,
  countLabel,
  variant = "destructive",
  tone = "solid",
  size = "md",
  className,
}: BadgeProps & { count: number }) {
  const reduce = useReducedMotion() ?? false;
  const [scope, animate] = useAnimate<HTMLSpanElement>();
  const value = Math.max(0, Math.round(count));
  const visible = value > 0 || showZero;
  const text = value > max ? `${max}+` : String(value);

  // Direction is derived during render (not in an effect) so the very render
  // that swaps the digits already rolls them the right way.
  const [seen, setSeen] = useState(value);
  const [direction, setDirection] = useState<1 | -1>(1);
  if (value !== seen) {
    setSeen(value);
    setDirection(value > seen ? 1 : -1);
  }

  // Rising counts bump the pill (not on the pop-in from zero, which has its
  // own entrance).
  const previous = useRef(value);
  useEffect(() => {
    const prev = previous.current;
    previous.current = value;
    if (value > prev && prev > 0 && !reduce && scope.current) {
      animate(scope.current, { scale: [1, 1.18, 1] }, { duration: 0.32, ease: EASE_OUT });
    }
  }, [value, reduce, animate, scope]);

  return (
    <AnimatePresence initial={false}>
      {visible ? (
        <motion.span
          key="count"
          initial={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.4 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={
            reduce
              ? { opacity: 0, transition: { duration: 0.1 } }
              : { opacity: 0, scale: 0.4, transition: { duration: 0.14, ease: EASE_OUT } }
          }
          transition={reduce ? { duration: 0.12 } : SPRING_PANEL}
          className={cn("inline-flex shrink-0", className)}
        >
          <span
            ref={scope}
            data-badge-count=""
            className={cn(
              "inline-flex items-center justify-center rounded-full border font-semibold leading-none tabular-nums",
              COUNT_SIZE[size],
              variantClass(variant, tone),
            )}
          >
            <span className="sr-only">{countLabel ? countLabel(value) : text}</span>
            <RollingCount text={text} direction={direction} reduce={reduce} />
          </span>
        </motion.span>
      ) : null}
    </AnimatePresence>
  );
}

const roll: Variants = {
  enter: (dir: 1 | -1) => ({ y: dir > 0 ? "100%" : "-100%", opacity: 0 }),
  center: { y: "0%", opacity: 1 },
  exit: (dir: 1 | -1) => ({
    y: dir > 0 ? "-100%" : "100%",
    opacity: 0,
    transition: { duration: 0.14, ease: EASE_OUT },
  }),
};

const fade: Variants = {
  enter: { opacity: 0 },
  center: { opacity: 1 },
  exit: { opacity: 0, transition: { duration: 0.1 } },
};

/**
 * Direction-aware digit roll. `NumberTicker` spins each digit along a 0–9
 * strip, so 9 → 10 would roll the ones digit backwards; here every changed
 * glyph slides in from the direction of change instead.
 */
function RollingCount({
  text,
  direction,
  reduce,
}: {
  text: string;
  direction: 1 | -1;
  reduce: boolean;
}) {
  const chars = text.split("");
  // Keyed by place value from the right so a digit keeps its slot as the
  // number grows on the left.
  const glyphs = chars.map((char, i) => ({ char, place: chars.length - 1 - i }));
  return (
    <span aria-hidden="true" className="inline-flex">
      {glyphs.map(({ char, place }) => (
        <span
          key={place}
          className="relative inline-flex h-[1.2em] items-center justify-center overflow-hidden"
        >
          <span className="invisible">{char}</span>
          <AnimatePresence initial={false} custom={direction}>
            <motion.span
              key={char}
              custom={direction}
              variants={reduce ? fade : roll}
              initial="enter"
              animate="center"
              exit="exit"
              transition={reduce ? { duration: 0.12 } : SPRING_SWAP}
              className="absolute inset-0 flex items-center justify-center"
            >
              {char}
            </motion.span>
          </AnimatePresence>
        </span>
      ))}
    </span>
  );
}

"use client";

import { motion, useReducedMotion, type Transition } from "motion/react";
import {
  cloneElement,
  createContext,
  forwardRef,
  isValidElement,
  useCallback,
  useContext,
  useId,
  useState,
  type ButtonHTMLAttributes,
  type HTMLAttributes,
  type MouseEvent,
  type ReactElement,
  type ReactNode,
} from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

// Collapsible is the unstyled disclosure primitive: one trigger, one panel.
// `Accordion` (accordion.tsx) is built from it; `BouncyAccordion` is the
// springy, single-open icon-row variant. Reach for this when a single region
// should show or hide in flow ("Show 3 more", an expandable activity row).

/** Entrance is a touch longer than the exit — exits should feel faster. */
const OPEN_TRANSITION: Transition = { duration: 0.28, ease: EASE_OUT };
const CLOSE_TRANSITION: Transition = { duration: 0.2, ease: EASE_OUT };

interface CollapsibleContextValue {
  open: boolean;
  setOpen: (open: boolean) => void;
  disabled: boolean;
  triggerId: string;
  contentId: string;
}

const CollapsibleContext = createContext<CollapsibleContextValue | null>(null);

export function useCollapsible(component = "useCollapsible") {
  const context = useContext(CollapsibleContext);
  if (!context) {
    throw new Error(`${component} must be used within <Collapsible>.`);
  }
  return context;
}

export interface CollapsibleProps
  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
  /** Controlled open state. */
  open?: boolean;
  /** Initial open state when uncontrolled. */
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  disabled?: boolean;
  /** Override the generated trigger id (the content is labelled by it). */
  triggerId?: string;
  /** Override the generated content id (the trigger controls it). */
  contentId?: string;
  children?: ReactNode;
}

export const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(
  function Collapsible(
    {
      open: openProp,
      defaultOpen = false,
      onOpenChange,
      disabled = false,
      triggerId: triggerIdProp,
      contentId: contentIdProp,
      className,
      children,
      ...rest
    },
    ref,
  ) {
    const [internal, setInternal] = useState(defaultOpen);
    const controlled = openProp !== undefined;
    const open = controlled ? openProp : internal;
    const setOpen = useCallback(
      (next: boolean) => {
        if (!controlled) setInternal(next);
        onOpenChange?.(next);
      },
      [controlled, onOpenChange],
    );
    const baseId = useId();
    const triggerId = triggerIdProp ?? `${baseId}-trigger`;
    const contentId = contentIdProp ?? `${baseId}-content`;

    return (
      <CollapsibleContext.Provider
        value={{ open, setOpen, disabled, triggerId, contentId }}
      >
        <div
          ref={ref}
          data-state={open ? "open" : "closed"}
          data-disabled={disabled ? "" : undefined}
          className={cn(className)}
          {...rest}
        >
          {children}
        </div>
      </CollapsibleContext.Provider>
    );
  },
);

type ClonableChild = ReactElement<{
  onClick?: (event: MouseEvent<HTMLElement>) => void;
  [key: string]: unknown;
}>;

export interface CollapsibleTriggerProps
  extends ButtonHTMLAttributes<HTMLButtonElement> {
  /** Merge trigger behaviour onto the single child element instead of rendering a `<button>`. */
  asChild?: boolean;
}

/** Toggles the nearest `Collapsible`. Unstyled `<button>` by default. */
export const CollapsibleTrigger = forwardRef<
  HTMLButtonElement,
  CollapsibleTriggerProps
>(function CollapsibleTrigger(
  { asChild, children, onClick, className, disabled: disabledProp, ...rest },
  ref,
) {
  const context = useCollapsible("CollapsibleTrigger");
  const disabled = context.disabled || Boolean(disabledProp);
  const shared = {
    id: context.triggerId,
    "aria-expanded": context.open,
    "aria-controls": context.contentId,
    "data-state": context.open ? "open" : "closed",
    "data-disabled": disabled ? "" : undefined,
  };

  if (asChild && isValidElement(children)) {
    const child = children as ClonableChild;
    return cloneElement(child, {
      ...shared,
      onClick: (event: MouseEvent<HTMLElement>) => {
        child.props.onClick?.(event);
        if (!event.defaultPrevented && !disabled) context.setOpen(!context.open);
      },
    });
  }

  return (
    <button
      ref={ref}
      type="button"
      disabled={disabled}
      className={cn(className)}
      {...rest}
      {...shared}
      onClick={(event) => {
        onClick?.(event);
        if (!event.defaultPrevented) context.setOpen(!context.open);
      }}
    >
      {children}
    </button>
  );
});

export interface CollapsibleContentProps extends HTMLAttributes<HTMLDivElement> {
  /** Class for the inner wrapper that holds the children (padding goes here,
   * never on the animated outer element, so the closed height is truly 0). */
  innerClassName?: string;
  /** Set to give the panel `role="region"` labelled by its trigger. */
  region?: boolean;
  children?: ReactNode;
}

/** The disclosed panel. Stays mounted (inert while closed) so `aria-controls` always resolves. */
export function CollapsibleContent({
  className,
  innerClassName,
  region = false,
  children,
  style,
  ...rest
}: CollapsibleContentProps) {
  const { open, triggerId, contentId } = useCollapsible("CollapsibleContent");
  const reduce = useReducedMotion();
  const fade = open ? OPEN_TRANSITION : CLOSE_TRANSITION;

  return (
    // Height is animated on purpose: disclosure is a layout job — the panel
    // has to push the content below it down in flow, which transforms can't.
    // Reduced motion snaps the height and keeps only the opacity fade.
    <motion.div
      {...(rest as Record<string, unknown>)}
      id={contentId}
      role={region ? "region" : undefined}
      aria-labelledby={region ? triggerId : undefined}
      data-state={open ? "open" : "closed"}
      inert={!open}
      initial={false}
      animate={{ height: open ? "auto" : 0, opacity: open ? 1 : 0 }}
      transition={
        reduce ? { height: { duration: 0 }, opacity: { duration: 0.15 } } : fade
      }
      style={style}
      className={cn("overflow-hidden", className)}
    >
      <div className={innerClassName}>{children}</div>
    </motion.div>
  );
}

"use client";

import { motion, useReducedMotion } from "motion/react";
import {
  useCallback,
  useEffect,
  useImperativeHandle,
  useRef,
  useState,
  type CSSProperties,
  type HTMLAttributes,
  type PointerEvent as ReactPointerEvent,
  type ReactNode,
  type Ref,
} from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

// ScrollArea keeps the browser's own scrolling (wheel, touch momentum,
// keyboard, scroll anchoring, find-in-page) and only replaces the *painted*
// scrollbar: the native bar is hidden and an overlay thumb is drawn on top.
// The thumb is a visual affordance (aria-hidden); keyboard and assistive tech
// scroll the focusable viewport itself.

export type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
/** `hover`: visible while hovered or scrolling. `scroll`: only while scrolling. `always`: whenever content overflows. */
export type ScrollAreaType = "hover" | "scroll" | "always";

export interface ScrollAreaProps extends Omit<HTMLAttributes<HTMLDivElement>, "dir"> {
  children?: ReactNode;
  orientation?: ScrollAreaOrientation;
  type?: ScrollAreaType;
  /** Milliseconds of idle before the thumb fades out. */
  scrollHideDelay?: number;
  /** Fade the content out at edges that have more content beyond them. */
  fadeEdges?: boolean;
  /** Maximum fade length in px; it grows with the distance from the edge. */
  fadeSize?: number;
  /** Class for the scrolling viewport (padding usually belongs here). */
  viewportClassName?: string;
  /** Ref to the native scroll container, for `scrollTo` or virtualizers. */
  viewportRef?: Ref<HTMLElement | null>;
  /** Accessible name for the focusable scroll region. */
  "aria-label"?: string;
}

const MIN_THUMB = 24;
const TRACK_INSET = 2;
/** Fraction of the visible size a track click pages by (keeps a little context). */
const PAGE_FACTOR = 0.9;

type Axis = "x" | "y";

export function ScrollArea({
  children,
  orientation = "vertical",
  type = "hover",
  scrollHideDelay = 700,
  fadeEdges = true,
  fadeSize = 28,
  className,
  viewportClassName,
  viewportRef,
  "aria-label": ariaLabel,
  onPointerEnter,
  onPointerLeave,
  ...rest
}: ScrollAreaProps) {
  const reduce = useReducedMotion();
  const viewport = useRef<HTMLElement>(null);
  const content = useRef<HTMLDivElement>(null);
  const thumbs = useRef<Record<Axis, HTMLDivElement | null>>({ x: null, y: null });
  const tracks = useRef<Record<Axis, HTMLDivElement | null>>({ x: null, y: null });
  const hideTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
  const hovering = useRef(false);
  const dragging = useRef<{
    axis: Axis;
    pointer: number;
    scroll: number;
    ratio: number;
  } | null>(null);

  const [overflow, setOverflow] = useState({ x: false, y: false });
  const [visible, setVisible] = useState(false);

  useImperativeHandle(viewportRef, () => viewport.current as HTMLElement, []);

  const allowX = orientation !== "vertical";
  const allowY = orientation !== "horizontal";

  // Geometry is written straight to the DOM on every scroll frame so a long
  // list never re-renders React while scrolling.
  const update = useCallback(() => {
    const el = viewport.current;
    if (!el) return;
    const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = el;
    const hasY = allowY && scrollHeight - clientHeight > 1;
    const hasX = allowX && scrollWidth - clientWidth > 1;
    setOverflow((prev) => (prev.x === hasX && prev.y === hasY ? prev : { x: hasX, y: hasY }));

    const place = (axis: Axis) => {
      const thumb = thumbs.current[axis];
      const track = tracks.current[axis];
      if (!thumb || !track) return;
      const trackLen = axis === "y" ? track.clientHeight : track.clientWidth;
      const view = axis === "y" ? clientHeight : clientWidth;
      const total = axis === "y" ? scrollHeight : scrollWidth;
      const pos = axis === "y" ? scrollTop : scrollLeft;
      const len = Math.max(MIN_THUMB, Math.min(trackLen, (view / total) * trackLen));
      const max = total - view;
      const offset = max > 0 ? (pos / max) * (trackLen - len) : 0;
      // The thumb's length is set (not animated) whenever content resizes;
      // its motion along the track is a transform.
      if (axis === "y") {
        thumb.style.height = `${len}px`;
        thumb.style.transform = `translate3d(0, ${offset}px, 0)`;
      } else {
        thumb.style.width = `${len}px`;
        thumb.style.transform = `translate3d(${offset}px, 0, 0)`;
      }
    };
    if (hasY) place("y");
    if (hasX) place("x");

    if (fadeEdges) {
      // Fade length tracks the distance to each edge, so the mask eases in
      // and out as you leave or reach an end instead of popping.
      const top = hasY ? Math.min(fadeSize, scrollTop) : 0;
      const bottom = hasY ? Math.min(fadeSize, scrollHeight - clientHeight - scrollTop) : 0;
      const left = hasX ? Math.min(fadeSize, scrollLeft) : 0;
      const right = hasX ? Math.min(fadeSize, scrollWidth - clientWidth - scrollLeft) : 0;
      el.style.setProperty("--sa-top", `${Math.max(0, top)}px`);
      el.style.setProperty("--sa-bottom", `${Math.max(0, bottom)}px`);
      el.style.setProperty("--sa-left", `${Math.max(0, left)}px`);
      el.style.setProperty("--sa-right", `${Math.max(0, right)}px`);
    }
  }, [allowX, allowY, fadeEdges, fadeSize]);

  const scheduleHide = useCallback(() => {
    clearTimeout(hideTimer.current);
    hideTimer.current = setTimeout(() => {
      if (dragging.current) return;
      if (type === "hover" && hovering.current) return;
      setVisible(false);
    }, scrollHideDelay);
  }, [scrollHideDelay, type]);

  const reveal = useCallback(() => {
    setVisible(true);
    scheduleHide();
  }, [scheduleHide]);

  useEffect(() => {
    const el = viewport.current;
    const inner = content.current;
    if (!el || !inner) return;
    update();
    const observer = new ResizeObserver(() => update());
    observer.observe(el);
    observer.observe(inner);
    return () => observer.disconnect();
  }, [update]);

  // Bars mount only once overflow is known; place their thumbs right after.
  useEffect(() => {
    if (overflow.x || overflow.y) update();
  }, [overflow.x, overflow.y, update]);

  useEffect(() => () => clearTimeout(hideTimer.current), []);

  const onScroll = () => {
    update();
    if (type !== "always") reveal();
  };

  const startDrag = (axis: Axis) => (event: ReactPointerEvent<HTMLDivElement>) => {
    const el = viewport.current;
    const track = tracks.current[axis];
    const thumb = thumbs.current[axis];
    if (!el || !track || !thumb || event.button !== 0) return;
    event.preventDefault();
    event.stopPropagation();
    const trackLen = axis === "y" ? track.clientHeight : track.clientWidth;
    const thumbLen = axis === "y" ? thumb.offsetHeight : thumb.offsetWidth;
    const max = axis === "y" ? el.scrollHeight - el.clientHeight : el.scrollWidth - el.clientWidth;
    dragging.current = {
      axis,
      pointer: axis === "y" ? event.clientY : event.clientX,
      scroll: axis === "y" ? el.scrollTop : el.scrollLeft,
      ratio: trackLen - thumbLen > 0 ? max / (trackLen - thumbLen) : 0,
    };
    event.currentTarget.setPointerCapture(event.pointerId);
    setVisible(true);
    clearTimeout(hideTimer.current);
  };

  const onDragMove = (event: ReactPointerEvent<HTMLDivElement>) => {
    const drag = dragging.current;
    const el = viewport.current;
    if (!drag || !el) return;
    const delta = (drag.axis === "y" ? event.clientY : event.clientX) - drag.pointer;
    if (drag.axis === "y") el.scrollTop = drag.scroll + delta * drag.ratio;
    else el.scrollLeft = drag.scroll + delta * drag.ratio;
  };

  const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
    if (!dragging.current) return;
    dragging.current = null;
    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
      event.currentTarget.releasePointerCapture(event.pointerId);
    }
    if (type !== "always") scheduleHide();
  };

  // Clicking the empty track pages one viewport toward the click, like a
  // native scrollbar track.
  const pageTrack = (axis: Axis) => (event: ReactPointerEvent<HTMLDivElement>) => {
    const el = viewport.current;
    const thumb = thumbs.current[axis];
    if (!el || !thumb || event.button !== 0 || event.target !== event.currentTarget) return;
    event.preventDefault();
    const rect = thumb.getBoundingClientRect();
    const before = axis === "y" ? event.clientY < rect.top : event.clientX < rect.left;
    const page = (axis === "y" ? el.clientHeight : el.clientWidth) * PAGE_FACTOR;
    const amount = before ? -page : page;
    el.scrollBy({
      top: axis === "y" ? amount : 0,
      left: axis === "x" ? amount : 0,
      behavior: reduce ? "auto" : "smooth",
    });
  };

  const fade = "linear-gradient(to bottom, transparent 0, black var(--sa-top), black calc(100% - var(--sa-bottom)), transparent 100%)";
  const fadeX = "linear-gradient(to right, transparent 0, black var(--sa-left), black calc(100% - var(--sa-right)), transparent 100%)";
  const mask = fadeEdges
    ? allowX && allowY
      ? `${fade}, ${fadeX}`
      : allowX
        ? fadeX
        : fade
    : undefined;
  const viewportStyle: CSSProperties | undefined = mask
    ? ({
        "--sa-top": "0px",
        "--sa-bottom": "0px",
        "--sa-left": "0px",
        "--sa-right": "0px",
        maskImage: mask,
        WebkitMaskImage: mask,
        maskComposite: allowX && allowY ? "intersect" : undefined,
        WebkitMaskComposite: allowX && allowY ? "source-in" : undefined,
      } as CSSProperties)
    : undefined;

  const shown = type === "always" || visible;
  const both = overflow.x && overflow.y;

  const renderBar = (axis: Axis) => (
    <motion.div
      aria-hidden
      ref={(node: HTMLDivElement | null) => {
        tracks.current[axis] = node;
      }}
      data-orientation={axis === "y" ? "vertical" : "horizontal"}
      initial={false}
      animate={{ opacity: shown ? 1 : 0 }}
      transition={{ duration: shown ? 0.15 : 0.3, ease: EASE_OUT }}
      onPointerDown={pageTrack(axis)}
      className={cn(
        "group/scroll-track absolute z-10 flex touch-none select-none",
        !shown && "pointer-events-none",
        axis === "y" ? "w-2.5 justify-center" : "h-2.5 flex-col justify-center",
      )}
      style={
        axis === "y"
          ? { top: TRACK_INSET, right: TRACK_INSET, bottom: both ? 12 : TRACK_INSET }
          : { left: TRACK_INSET, bottom: TRACK_INSET, right: both ? 12 : TRACK_INSET }
      }
    >
      <div
        ref={(node) => {
          thumbs.current[axis] = node;
        }}
        onPointerDown={startDrag(axis)}
        onPointerMove={onDragMove}
        onPointerUp={endDrag}
        onPointerCancel={endDrag}
        className={cn(
          "absolute rounded-full bg-foreground/25 transition-colors hover:bg-foreground/45 active:bg-foreground/55 will-change-transform",
          axis === "y" ? "top-0 w-1.5 group-hover/scroll-track:w-2" : "left-0 h-1.5 group-hover/scroll-track:h-2",
        )}
      />
    </motion.div>
  );

  return (
    <div
      className={cn("relative overflow-hidden", className)}
      onPointerEnter={(event) => {
        onPointerEnter?.(event);
        hovering.current = true;
        if (type === "hover") {
          setVisible(true);
          clearTimeout(hideTimer.current);
        }
      }}
      onPointerLeave={(event) => {
        onPointerLeave?.(event);
        hovering.current = false;
        if (type === "hover") scheduleHide();
      }}
      {...rest}
    >
      {/* The viewport is focusable (tabIndex 0) so keyboard users can scroll
          it (WCAG 2.1.1); pass `aria-label` to name the region. */}
      <section
        ref={viewport}
        aria-label={ariaLabel}
        // biome-ignore lint/a11y/noNoninteractiveTabindex: a scroll container must be focusable for keyboard scrolling (WCAG 2.1.1).
        tabIndex={0}
        onScroll={onScroll}
        style={viewportStyle}
        className={cn(
          "size-full outline-none [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
          "focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset",
          allowY ? "overflow-y-auto" : "overflow-y-hidden",
          allowX ? "overflow-x-auto" : "overflow-x-hidden",
          viewportClassName,
        )}
      >
        {/* Horizontal content is laid out at its own width so the observer
            sees it grow; vertical content keeps the viewport's width. */}
        <div ref={content} className={cn(allowX ? "w-max min-w-full" : "min-w-full")}>
          {children}
        </div>
      </section>
      {overflow.y ? renderBar("y") : null}
      {overflow.x ? renderBar("x") : null}
    </div>
  );
}