Chart

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

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

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

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

import {
  CartesianChart,
  type CartesianChartProps,
} from "@/components/motion/chart/cartesian";

export interface AreaChartProps extends CartesianChartProps {
  /** Gradient fades toward the baseline; solid keeps one translucent tone. */
  fill?: "gradient" | "solid";
}

/**
 * Volume over time: filled areas (overlapping or stacked) that rise from the
 * baseline as their lines draw in, on scroll and whenever the range changes,
 * with a snapping cursor and one tooltip for every series.
 */
export function AreaChart(props: AreaChartProps) {
  return <CartesianChart type="area" {...props} />;
}

"use client";

import { motion, useInView, useReducedMotion } from "motion/react";
import { type PointerEvent, useId, useRef, useState } from "react";
import {
  type ChartCurve,
  type ChartDatum,
  ChartLegend,
  type ChartSeries,
  ChartTable,
  ChartTooltip,
  curvePath,
  formatCompact,
  formatFull,
  GROW,
  gutterFor,
  labelStride,
  niceTicks,
  seriesColor,
  stepIndex,
  type TooltipIndicator,
  useChartWidth,
} from "@/components/motion/chart/shared";
import { cn } from "@/lib/utils";

export interface CartesianChartProps {
  data: ChartDatum[];
  /** Key of the x value in each datum (dates, months…). */
  index: string;
  series: ChartSeries[];
  /** Plot height in px. Default 250. */
  height?: number;
  /** Default "natural" (smooth, never overshoots a point). */
  curve?: ChartCurve;
  /** Stack series on top of each other instead of overlapping them. */
  stacked?: boolean;
  /** Draw a dot on every point. */
  dots?: boolean;
  /** Print each point's value above it. Best for short series. */
  showValues?: boolean;
  /** Show the y axis labels. Default false: gridlines carry the scale. */
  yAxis?: boolean;
  /** Show the legend. Default: when there are two or more series. */
  legend?: boolean;
  indicator?: TooltipIndicator;
  /** Formats x labels and the tooltip title. */
  formatIndex?: (value: string) => string;
  formatValue?: (value: number) => string;
  formatAxis?: (value: number) => string;
  /** Names the chart for assistive tech and the table view. */
  title: string;
  className?: string;
}

const AXIS = 28; // x labels
const PAD_X = 12;
const PAD_TOP = 12;

/**
 * Shared engine for line and area charts: monotone, linear or stepped curves,
 * optional stacking and gradient fills; lines draw in left to right and areas
 * rise from the baseline when scrolled into view (replayed when the range changes), a hairline cursor that
 * snaps to the nearest x, and one tooltip listing every series there.
 */
export function CartesianChart({
  type,
  fill = "gradient",
  data,
  index,
  series,
  height = 250,
  curve = "natural",
  stacked = false,
  dots = false,
  showValues = false,
  yAxis = false,
  legend,
  indicator = "dot",
  formatIndex = (v) => v,
  formatValue = formatFull,
  formatAxis = formatCompact,
  title,
  className,
}: CartesianChartProps & {
  type: "line" | "area";
  fill?: "gradient" | "solid";
}) {
  const uid = useId().replace(/:/g, "");
  const reduce = useReducedMotion();
  const [measureRef, width] = useChartWidth();
  const viewRef = useRef<HTMLDivElement>(null);
  const inView = useInView(viewRef, { once: true, amount: 0.3 });
  const [active, setActive] = useState<number | null>(null);
  const shown = reduce || inView;

  const value = (d: ChartDatum, key: string) => Number(d[key]) || 0;

  // Per-series [lower, upper] for every point; lower is 0 unless stacked.
  const bands = series.map((_, si) =>
    data.map((d) => {
      const lower = stacked
        ? series.slice(0, si).reduce((sum, s) => sum + value(d, s.key), 0)
        : 0;
      return [lower, lower + value(d, series[si].key)] as const;
    }),
  );
  const tops = bands.flatMap((b) => b.map(([, up]) => up));
  const ticks = niceTicks(Math.min(0, ...tops), Math.max(...tops, 0));
  const lo = ticks[0];
  const hi = ticks[ticks.length - 1];

  const left = yAxis ? gutterFor(ticks.map(formatAxis)) : PAD_X;
  const plotW = Math.max(0, width - left - PAD_X);
  const step = data.length > 1 ? plotW / (data.length - 1) : 0;
  const x = (i: number) => left + i * step;
  const y = (v: number) => PAD_TOP + (1 - (v - lo) / (hi - lo)) * (height - PAD_TOP);
  const stride = labelStride(data.length, plotW, 64);
  const last = data.length - 1;
  const showLegend = legend ?? series.length > 1;

  const linePts = (si: number) =>
    bands[si].map(([, up], i) => [x(i), y(up)] as [number, number]);
  const areaPath = (si: number) => {
    const top = curvePath(linePts(si), curve);
    const bottom = curvePath(
      bands[si].map(([low], i) => [x(i), y(low)] as [number, number]).reverse(),
      curve,
    ).replace(/^M/, "L");
    return `${top}${bottom}Z`;
  };

  // Replays the reveal when the visible range changes (e.g. 7d → 90d).
  const revealKey = `${data.length}-${String(data[0]?.[index] ?? "")}`;

  const onPointerMove = (e: PointerEvent<SVGSVGElement>) => {
    const box = e.currentTarget.getBoundingClientRect();
    const i = Math.round((e.clientX - box.left - left) / (step || 1));
    setActive(Math.min(last, Math.max(0, i)));
  };

  const activeTop =
    active === null
      ? 0
      : Math.min(...series.map((_, si) => y(bands[si][active][1])));

  return (
    <div ref={viewRef} className={cn("w-full", className)}>
      <div ref={measureRef} className="relative w-full">
        {width > 0 && data.length > 0 && (
          // biome-ignore lint/a11y/useSemanticElements: a chart is not a form; group labels the plot
          <svg
            width={width}
            height={height + AXIS}
            role="group"
            aria-label={`${title}. Use arrow keys to read each point.`}
            // biome-ignore lint/a11y/noNoninteractiveTabindex: focusable chart widget; arrow keys read values
            tabIndex={0}
            onKeyDown={(e) => {
              const next = stepIndex(e.key, active, data.length);
              if (next === undefined) return;
              e.preventDefault();
              setActive(next);
            }}
            onPointerMove={onPointerMove}
            onPointerLeave={() => setActive(null)}
            onBlur={() => setActive(null)}
            className="block touch-pan-y overflow-visible rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring"
          >
            <defs>
              {type === "area" &&
                series.map((s, si) => (
                  <linearGradient
                    key={s.key}
                    id={`${uid}-fill-${si}`}
                    x1="0"
                    x2="0"
                    y1="0"
                    y2="1"
                  >
                    <stop
                      offset="5%"
                      stopColor={seriesColor(s, si)}
                      stopOpacity={fill === "gradient" ? 0.6 : 0.4}
                    />
                    <stop
                      offset="95%"
                      stopColor={seriesColor(s, si)}
                      stopOpacity={fill === "gradient" ? 0.05 : 0.4}
                    />
                  </linearGradient>
                ))}
            </defs>

            {ticks.map((t) => (
              <g key={t}>
                <line
                  x1={yAxis ? left : 0}
                  x2={width}
                  y1={y(t)}
                  y2={y(t)}
                  stroke="var(--border-strong)"
                  shapeRendering="crispEdges"
                />
                {yAxis && (
                  <text
                    x={left - 8}
                    y={y(t)}
                    dy="0.32em"
                    textAnchor="end"
                    className="fill-muted-foreground text-xs tabular-nums"
                  >
                    {formatAxis(t)}
                  </text>
                )}
              </g>
            ))}

            {data.map((d, i) =>
              // Every stride-th label plus the last, minus a strided one that
              // would crowd the last.
              i === last || (i % stride === 0 && (last - i) * step >= 64) ? (
                <text
                  // biome-ignore lint/suspicious/noArrayIndexKey: x positions keep their order.
                  key={i}
                  x={x(i)}
                  y={height + 20}
                  textAnchor={i === 0 ? "start" : i === last ? "end" : "middle"}
                  className="fill-muted-foreground text-xs"
                >
                  {formatIndex(String(d[index]))}
                </text>
              ) : null,
            )}

            {active !== null && (
              <line
                x1={x(active)}
                x2={x(active)}
                y1={PAD_TOP}
                y2={height}
                stroke="var(--muted-foreground)"
                strokeOpacity={0.4}
                shapeRendering="crispEdges"
              />
            )}

            {/* Remounted per range so the entrance replays when the data
                window changes (e.g. 7 days → 3 months). */}
            <g key={revealKey}>
              {type === "area" &&
                series.map((s, si) => (
                  <motion.path
                    key={s.key}
                    d={areaPath(si)}
                    fill={`url(#${uid}-fill-${si})`}
                    initial={reduce ? false : { opacity: 0, scaleY: 0.4 }}
                    animate={shown ? { opacity: 1, scaleY: 1 } : { opacity: 0, scaleY: 0.4 }}
                    transition={reduce ? { duration: 0 } : { ...GROW, duration: 0.9, delay: 0.15 }}
                    style={{ transformBox: "view-box", transformOrigin: `0px ${y(lo)}px` }}
                  />
                ))}
              {series.map((s, si) => (
                <motion.path
                  key={s.key}
                  d={curvePath(linePts(si), curve)}
                  fill="none"
                  stroke={seriesColor(s, si)}
                  strokeWidth={2}
                  strokeLinejoin="round"
                  strokeLinecap="round"
                  initial={reduce ? false : { pathLength: 0 }}
                  animate={{ pathLength: shown ? 1 : 0 }}
                  transition={reduce ? { duration: 0 } : { duration: 1.1, ease: GROW.ease, delay: si * 0.08 }}
                />
              ))}
              {(dots || showValues) && (
                <motion.g
                  initial={reduce ? false : { opacity: 0 }}
                  animate={{ opacity: shown ? 1 : 0 }}
                  transition={reduce ? { duration: 0 } : { duration: 0.3, delay: 0.9 }}
                >
                  {dots &&
                    series.map((s, si) =>
                      linePts(si).map(([cx, cy], i) => (
                        <circle
                          // biome-ignore lint/suspicious/noArrayIndexKey: points keep their order.
                          key={`${s.key}-${i}`}
                          cx={cx}
                          cy={cy}
                          r={3.5}
                          fill={seriesColor(s, si)}
                          stroke="var(--card)"
                          strokeWidth={2}
                        />
                      )),
                    )}
                  {showValues &&
                    series.map((s, si) =>
                      linePts(si).map(([cx, cy], i) => (
                        <text
                          // biome-ignore lint/suspicious/noArrayIndexKey: points keep their order.
                          key={`${s.key}-v${i}`}
                          x={cx}
                          y={cy - 12}
                          textAnchor="middle"
                          className="fill-foreground text-xs font-medium tabular-nums"
                        >
                          {formatValue(value(data[i], s.key))}
                        </text>
                      )),
                    )}
                </motion.g>
              )}
            </g>

            {active !== null &&
              series.map((s, si) => (
                <motion.circle
                  key={s.key}
                  initial={reduce ? false : { scale: 0.4 }}
                  animate={{ scale: 1, cx: x(active), cy: y(bands[si][active][1]) }}
                  transition={
                    reduce
                      ? { duration: 0 }
                      : { type: "spring", stiffness: 520, damping: 40 }
                  }
                  r={5}
                  fill={seriesColor(s, si)}
                  stroke="var(--card)"
                  strokeWidth={2}
                  style={{ transformBox: "fill-box", transformOrigin: "center" }}
                />
              ))}
          </svg>
        )}
        <ChartTooltip
          open={active !== null}
          x={active === null ? 0 : x(active)}
          y={activeTop}
          width={width}
          indicator={indicator}
          label={active === null ? "" : formatIndex(String(data[active][index]))}
          rows={
            active === null
              ? []
              : (() => {
                  const rows = series.map((s, si) => ({
                    label: s.label,
                    value: formatValue(value(data[active], s.key)),
                    color: seriesColor(s, si),
                  }));
                  // Stacked: read top-down, the way the bands sit.
                  return stacked ? rows.reverse() : rows;
                })()
          }
        />
      </div>
      {showLegend && (
        <ChartLegend
          items={series.map((s, si) => ({ label: s.label, color: seriesColor(s, si) }))}
        />
      )}
      <ChartTable
        caption={title}
        head={[index, ...series.map((s) => s.label)]}
        rows={data.map((d) => [
          formatIndex(String(d[index])),
          ...series.map((s) => formatValue(value(d, s.key))),
        ])}
      />
    </div>
  );
}

"use client";

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

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

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

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

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

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

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

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

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

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

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

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

type Point = [number, number];

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

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

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

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

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

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

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

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

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

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

"use client";

import { motion, MotionConfig, useReducedMotion, type Transition } from "motion/react";
import {
  createContext,
  useCallback,
  useContext,
  useId,
  useMemo,
  useState,
  type ReactNode,
} from "react";
import { EASE_OUT } from "@/lib/ease";
import { TOUCH_TARGET_CLASS } from "@/lib/touch";
import { cn } from "@/lib/utils";

type Variant = "pill" | "underline" | "segment";

type Ctx = {
  value: string;
  setValue: (v: string) => void;
  layoutId: string;
  variant: Variant;
};

const TabsCtx = createContext<Ctx | null>(null);

function useTabs() {
  const ctx = useContext(TabsCtx);
  if (!ctx) throw new Error("Tabs.* must be used inside <Tabs>");
  return ctx;
}

// Weighty spring for the active-tab indicator: a touch of overshoot so it
// settles with life instead of snapping.
const transition: Transition = {
  type: "spring",
  stiffness: 170,
  damping: 24,
  mass: 1.2,
};

export function Tabs({
  defaultValue,
  value,
  onValueChange,
  variant = "pill",
  children,
  className,
}: {
  defaultValue?: string;
  value?: string;
  onValueChange?: (v: string) => void;
  variant?: Variant;
  children: ReactNode;
  className?: string;
}) {
  const [internal, setInternal] = useState(defaultValue ?? "");
  const layoutId = useId();
  const reduce = useReducedMotion();
  const controlled = value !== undefined;
  const current = controlled ? value : internal;
  const setValue = useCallback(
    (v: string) => {
      if (!controlled) setInternal(v);
      onValueChange?.(v);
    },
    [controlled, onValueChange],
  );
  const contextValue = useMemo(
    () => ({ value: current, setValue, layoutId, variant }),
    [current, layoutId, setValue, variant],
  );
  return (
    <MotionConfig transition={reduce ? { duration: 0 } : transition}>
      <TabsCtx.Provider value={contextValue}>
        {/* layoutRoot: the indicator's layoutId measures in page coordinates, so
            inside fixed/scrolled containers it would replay scroll offsets as
            movement. The pill only ever travels within the list, so scoping
            projection to the Tabs wrapper is always correct. */}
        <motion.div layoutRoot className={className}>
          {children}
        </motion.div>
      </TabsCtx.Provider>
    </MotionConfig>
  );
}

const listClasses: Record<Variant, string> = {
  pill: "inline-flex items-center gap-1 rounded-full bg-card p-1",
  underline: "inline-flex items-center gap-1 border-b border-border",
  segment: "inline-flex items-center gap-0 rounded-lg bg-card p-0.5",
};

export function TabsList({ children, className }: { children: ReactNode; className?: string }) {
  const { variant } = useTabs();
  return (
    <div role="tablist" className={cn(listClasses[variant], className)}>
      {children}
    </div>
  );
}

export function TabsTrigger({
  value,
  children,
  className,
  indicatorClassName,
}: {
  value: string;
  children: ReactNode;
  className?: string;
  indicatorClassName?: string;
}) {
  const { value: current, setValue, layoutId, variant } = useTabs();
  const active = current === value;

  if (variant === "underline") {
    return (
      <button
        type="button"
        role="tab"
        aria-selected={active}
        onClick={() => setValue(value)}
        className={cn(
          "relative isolate px-3 pb-2.5 pt-1 -mb-px text-sm font-medium transition-colors min-h-[44px] inline-flex items-center",
          active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
          className,
        )}
      >
        {children}
        {active ? (
        <motion.span
          layoutId={layoutId}
          layout="position"
          className={cn(
            "absolute -bottom-px left-0 right-0 h-px bg-primary",
            indicatorClassName,
          )}
        />
        ) : null}
      </button>
    );
  }

  const radius = variant === "pill" ? "rounded-full" : "rounded-md";

  return (
    <div className="relative">
      {active ? (
        <motion.span
          layoutId={layoutId}
          layout="position"
          style={{ borderRadius: variant === "pill" ? 9999 : 8 }}
          className={cn(
            "absolute inset-0 bg-primary",
            radius,
            indicatorClassName,
          )}
        />
      ) : null}
      <button
        type="button"
        role="tab"
        aria-selected={active}
        onClick={() => setValue(value)}
        className={cn(
          "relative z-10 inline-flex items-center justify-center whitespace-nowrap bg-transparent px-3.5 py-1.5 text-sm font-medium outline-none",
          TOUCH_TARGET_CLASS,
          "transition-colors",
          active
            ? "text-primary-foreground"
            : "text-muted-foreground hover:text-foreground",
          radius,
          className,
        )}
      >
        {children}
      </button>
    </div>
  );
}

export function TabsContent({ value, children, className }: { value: string; children: ReactNode; className?: string }) {
  const { value: current } = useTabs();
  const reduce = useReducedMotion();
  const active = current === value;
  // Inactive panels stay mounted but hidden, so their content (e.g. source
  // code) is present in the server-rendered HTML for crawlers and assistive
  // tech, instead of being dropped from the DOM.
  if (!active) {
    return (
      <div hidden className={className}>
        {children}
      </div>
    );
  }
  return (
    <motion.div
      key={value}
      initial={{ opacity: 0, y: reduce ? 0 : 4 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.18, ease: EASE_OUT }}
      className={cn("mt-4", className)}
    >
      {children}
    </motion.div>
  );
}

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

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

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

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

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

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

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

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

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

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

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

"use client";
// karaui.kamisama-v0.my.id/components/motion/chart

import { motion, useInView, useReducedMotion } from "motion/react";
import { useRef, useState } from "react";
import {
  type ChartDatum,
  ChartLegend,
  type ChartSeries,
  ChartTable,
  ChartTooltip,
  formatCompact,
  formatFull,
  GROW,
  gutterFor,
  labelStride,
  niceTicks,
  seriesColor,
  stepIndex,
  type TooltipIndicator,
  useChartWidth,
} from "@/components/motion/chart/shared";
import { cn } from "@/lib/utils";

export interface BarChartProps {
  data: ChartDatum[];
  /** Key of the category label in each datum. */
  index: string;
  series: ChartSeries[];
  /** "vertical" draws columns; "horizontal" draws rows of bars. */
  layout?: "vertical" | "horizontal";
  /** Stack series into one bar per category. */
  stacked?: boolean;
  /** Print each bar's value at its end. */
  showValues?: boolean;
  /** Corner radius of the bar's data end, in px. Default 6. */
  radius?: number;
  /** Plot height in px (vertical layout). Default 250. */
  height?: number;
  /** Show the value axis labels. Default false: gridlines carry the scale. */
  valueAxis?: boolean;
  /** Show the legend. Default: when there are two or more series. */
  legend?: boolean;
  indicator?: TooltipIndicator;
  formatIndex?: (value: string) => string;
  formatValue?: (value: number) => string;
  formatAxis?: (value: number) => string;
  /** Names the chart for assistive tech and the table view. */
  title: string;
  className?: string;
}

const GAP = 4; // between bars of one group
const ROW = 36; // horizontal layout: px per category
const AXIS = 28;

type Rect = { x: number; y: number; w: number; h: number };

/** Bar path rounded only at the data end, square against the baseline. */
function barPath({ x, y, w, h }: Rect, r: number, end: "top" | "bottom" | "right" | "left") {
  const rr = Math.max(0, Math.min(r, w / 2, h / 2));
  if (end === "top")
    return `M${x},${y + h}V${y + rr}Q${x},${y} ${x + rr},${y}H${x + w - rr}Q${x + w},${y} ${x + w},${y + rr}V${y + h}Z`;
  if (end === "bottom")
    return `M${x},${y}V${y + h - rr}Q${x},${y + h} ${x + rr},${y + h}H${x + w - rr}Q${x + w},${y + h} ${x + w},${y + h - rr}V${y}Z`;
  if (end === "right")
    return `M${x},${y}H${x + w - rr}Q${x + w},${y} ${x + w},${y + rr}V${y + h - rr}Q${x + w},${y + h} ${x + w - rr},${y + h}H${x}Z`;
  return `M${x + w},${y}H${x + rr}Q${x},${y} ${x},${y + rr}V${y + h - rr}Q${x},${y + h} ${x + rr},${y + h}H${x + w}Z`;
}

/**
 * Compares magnitudes across categories as columns or horizontal bars,
 * grouped or stacked. Bars grow from the baseline when scrolled into view;
 * hovering or arrowing to a category dims the others and shows one tooltip
 * for every series.
 */
export function BarChart({
  data,
  index,
  series,
  layout = "vertical",
  stacked = false,
  showValues = false,
  radius = 6,
  height: heightProp = 250,
  valueAxis = false,
  legend,
  indicator = "dot",
  formatIndex = (v) => v,
  formatValue = formatFull,
  formatAxis = formatCompact,
  title,
  className,
}: BarChartProps) {
  const reduce = useReducedMotion();
  const [measureRef, width] = useChartWidth();
  const viewRef = useRef<HTMLDivElement>(null);
  const inView = useInView(viewRef, { once: true, amount: 0.3 });
  const [active, setActive] = useState<number | null>(null);
  const shown = reduce || inView;
  const horizontal = layout === "horizontal";
  const value = (d: ChartDatum, key: string) => Number(d[key]) || 0;

  // Value extent: stacked bars sum positives and negatives separately.
  const extents = data.flatMap((d) => {
    if (!stacked) return series.map((s) => value(d, s.key));
    let pos = 0;
    let neg = 0;
    for (const s of series) {
      const v = value(d, s.key);
      if (v >= 0) pos += v;
      else neg += v;
    }
    return [pos, neg];
  });
  const ticks = niceTicks(Math.min(0, ...extents), Math.max(0, ...extents));
  const lo = ticks[0];
  const hi = ticks[ticks.length - 1];

  const labelGutter = horizontal
    ? gutterFor(data.map((d) => formatIndex(String(d[index]))))
    : 0;
  const valueGutter = !horizontal && valueAxis ? gutterFor(ticks.map(formatAxis)) : 0;
  // Room at the data end for printed values.
  const endRoom = showValues ? (horizontal ? 44 : 20) : 0;
  const height = horizontal ? data.length * ROW : heightProp;

  // Category axis runs along x (vertical) or y (horizontal).
  const catStart = horizontal ? 0 : valueGutter;
  const catLength = horizontal ? height : Math.max(0, width - valueGutter);
  const band = data.length ? catLength / data.length : 0;
  const valStart = horizontal ? labelGutter : endRoom;
  const valLength = horizontal
    ? Math.max(0, width - labelGutter - endRoom)
    : height - endRoom;
  // Value → position along the value axis, measured from its origin.
  const scale = (v: number) => ((v - lo) / (hi - lo)) * valLength;
  const zero = scale(0);

  const groups = stacked ? 1 : series.length;
  const thickness = Math.max(
    3,
    Math.min(horizontal ? 24 : 56, (band * (horizontal ? 0.72 : 0.62) - GAP * (groups - 1)) / groups),
  );
  const groupLen = thickness * groups + GAP * (groups - 1);

  const bars = data.map((d, i) => {
    const offset = catStart + band * i + (band - groupLen) / 2;
    let pos = 0;
    let neg = 0;
    return series.map((s, si) => {
      const v = value(d, s.key);
      const from = stacked ? (v >= 0 ? pos : neg) : 0;
      const to = from + v;
      if (stacked) {
        if (v >= 0) pos = to;
        else neg = to;
      }
      const a = scale(Math.min(from, to));
      const b = scale(Math.max(from, to));
      const lane = offset + (stacked ? 0 : si * (thickness + GAP));
      const rect: Rect = horizontal
        ? { x: valStart + a, y: lane, w: b - a, h: thickness }
        : { x: lane, y: valStart + (valLength - b), w: thickness, h: b - a };
      // Only the outermost segment of a stack gets the rounded end.
      const outer =
        !stacked ||
        series.slice(si + 1).every((t) => Math.sign(value(d, t.key)) !== Math.sign(v) || value(d, t.key) === 0);
      const end = horizontal ? (v >= 0 ? "right" : "left") : v >= 0 ? "top" : "bottom";
      return { s, si, v, rect, outer, end } as const;
    });
  });

  const totalH = horizontal ? height : height + AXIS;
  const stride = horizontal ? 1 : labelStride(data.length, catLength, 48);

  // Tooltip anchors at the category's data end.
  const anchor = (i: number) => {
    const rs = bars[i].map((b) => b.rect);
    if (horizontal) {
      return {
        x: Math.max(...rs.map((r) => r.x + r.w)),
        y: catStart + band * i + band / 2,
      };
    }
    return {
      x: catStart + band * i + band / 2,
      y: Math.min(...rs.map((r) => r.y)) + 12,
    };
  };
  const tip = active === null ? { x: 0, y: 0 } : anchor(active);

  return (
    <div ref={viewRef} className={cn("w-full", className)}>
      <div ref={measureRef} className="relative w-full">
        {width > 0 && data.length > 0 && (
          // biome-ignore lint/a11y/useSemanticElements: a chart is not a form; group labels the plot
          <svg
            width={width}
            height={totalH}
            role="group"
            aria-label={`${title}. Use arrow keys to read each category.`}
            // biome-ignore lint/a11y/noNoninteractiveTabindex: focusable chart widget; arrow keys read values
            tabIndex={0}
            onKeyDown={(e) => {
              const next = stepIndex(e.key, active, data.length);
              if (next === undefined) return;
              e.preventDefault();
              setActive(next);
            }}
            onPointerLeave={() => setActive(null)}
            onBlur={() => setActive(null)}
            className="block overflow-visible rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring"
          >
            {/* Gridlines run across the value axis only. */}
            {ticks.map((t) => {
              const p = valStart + (horizontal ? scale(t) : valLength - scale(t));
              return (
                <g key={t}>
                  {horizontal ? (
                    <line x1={p} x2={p} y1={0} y2={height} stroke="var(--border-strong)" shapeRendering="crispEdges" />
                  ) : (
                    <line x1={valueGutter} x2={width} y1={p} y2={p} stroke="var(--border-strong)" shapeRendering="crispEdges" />
                  )}
                  {valueAxis && !horizontal && (
                    <text x={valueGutter - 8} y={p} dy="0.32em" textAnchor="end" className="fill-muted-foreground text-xs tabular-nums">
                      {formatAxis(t)}
                    </text>
                  )}
                </g>
              );
            })}

            {bars.map((group, i) => {
              const dim = active !== null && active !== i;
              const label = formatIndex(String(data[i][index]));
              return (
                // biome-ignore lint/suspicious/noArrayIndexKey: categories keep their order.
                <g key={i}>
                  {group.map(({ s, si, rect, outer, end }) => (
                    <motion.path
                      key={s.key}
                      d={barPath(rect, outer ? radius : 0, end)}
                      fill={seriesColor(s, si)}
                      initial={false}
                      animate={{
                        [horizontal ? "scaleX" : "scaleY"]: shown ? 1 : 0,
                        opacity: dim ? 0.3 : 1,
                      }}
                      transition={{
                        scaleX: reduce ? { duration: 0 } : { ...GROW, delay: i * 0.04 },
                        scaleY: reduce ? { duration: 0 } : { ...GROW, delay: i * 0.04 },
                        opacity: { duration: 0.15 },
                      }}
                      style={{
                        // Grow from the zero line, whichever side the bar sits on.
                        transformBox: "view-box",
                        transformOrigin: horizontal
                          ? `${valStart + zero}px 0px`
                          : `0px ${valStart + valLength - zero}px`,
                      }}
                    />
                  ))}

                  {showValues &&
                    (stacked ? [group[group.length - 1]] : group).map(({ s, rect, v }) => {
                      const shownValue = stacked
                        ? group.reduce((sum, g) => sum + g.v, 0)
                        : v;
                      const end = stacked
                        ? horizontal
                          ? Math.max(...group.map((g) => g.rect.x + g.rect.w))
                          : Math.min(...group.map((g) => g.rect.y))
                        : horizontal
                          ? rect.x + rect.w
                          : rect.y;
                      return (
                        <motion.text
                          key={`${s.key}-v`}
                          x={horizontal ? end + 8 : rect.x + (stacked ? groupLen : rect.w) / 2}
                          y={horizontal ? rect.y + (stacked ? groupLen : rect.h) / 2 : end - 8}
                          dy={horizontal ? "0.32em" : undefined}
                          textAnchor={horizontal ? "start" : "middle"}
                          className="fill-foreground text-xs font-medium tabular-nums"
                          initial={false}
                          animate={{ opacity: shown ? (dim ? 0.3 : 1) : 0 }}
                          transition={reduce ? { duration: 0 } : { duration: 0.3, delay: shown && active === null ? 0.5 + i * 0.04 : 0 }}
                        >
                          {formatValue(shownValue)}
                        </motion.text>
                      );
                    })}

                  {horizontal ? (
                    <text
                      x={labelGutter - 10}
                      y={catStart + band * i + band / 2}
                      dy="0.32em"
                      textAnchor="end"
                      className="fill-muted-foreground text-xs"
                    >
                      {label}
                    </text>
                  ) : (
                    i % stride === 0 && (
                      <text
                        x={catStart + band * i + band / 2}
                        y={height + 20}
                        textAnchor="middle"
                        className="fill-muted-foreground text-xs"
                      >
                        {label}
                      </text>
                    )
                  )}

                  {/* The whole category band is the hit target, not the bar. */}
                  <rect
                    x={horizontal ? 0 : catStart + band * i}
                    y={horizontal ? catStart + band * i : 0}
                    width={horizontal ? width : band}
                    height={horizontal ? band : height}
                    fill="transparent"
                    onPointerEnter={() => setActive(i)}
                  />
                </g>
              );
            })}
          </svg>
        )}
        <ChartTooltip
          open={active !== null}
          x={tip.x}
          y={tip.y}
          width={width}
          indicator={indicator}
          label={active === null ? "" : formatIndex(String(data[active][index]))}
          rows={
            active === null
              ? []
              : series.map((s, si) => ({
                  label: s.label,
                  value: formatValue(value(data[active], s.key)),
                  color: seriesColor(s, si),
                }))
          }
        />
      </div>
      {(legend ?? series.length > 1) && (
        <ChartLegend
          items={series.map((s, si) => ({ label: s.label, color: seriesColor(s, si) }))}
        />
      )}
      <ChartTable
        caption={title}
        head={[index, ...series.map((s) => s.label)]}
        rows={data.map((d) => [
          formatIndex(String(d[index])),
          ...series.map((s) => formatValue(value(d, s.key))),
        ])}
      />
    </div>
  );
}