Treemap

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

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

"use client";

import { useEffect, useState } from "react";

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

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

  return canHover;
}

"use client";

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

/**
 * Where the keyboard or the pointer last moved to: the row's id, stamped with
 * the query it was placed under.
 */
type RowCursor = { id: string; query: string };

/** The cursor's row, or -1 once the query has moved on or the row has left. */
function indexOfCursor(
  rows: readonly { id: string }[],
  query: string,
  cursor: RowCursor | null,
) {
  if (cursor === null || cursor.query !== query) return -1;
  return rows.findIndex((row) => row.id === cursor.id);
}

/**
 * The highlighted row of a list whose rows can change under it.
 *
 * Which row is highlighted is resolved during render, never in a passive
 * effect: a passive effect runs after the commit, so a list that had just
 * changed would carry an `aria-activedescendant` naming a row that has left it,
 * and a key pressed in that window would commit the wrong row or nothing at
 * all.
 *
 * The cursor holds the row's id, not its position. A position alone cannot tell
 * a list that shrank from one that swapped its rows for a different set of the
 * same length, and the second case is the one that silently hands Enter to a
 * row the user never chose. A cursor whose row has left the list returns the
 * highlight to the first row rather than to the nearest surviving one: the row
 * the user aimed at is gone, and the first row is where a new query already
 * puts the highlight.
 *
 * Pass the query the list is filtered by. The cursor is stamped with it and
 * dropped when it changes, so a caller cannot forget to clear it — including a
 * caller whose query arrives as a prop and so never runs its own handler. Rows
 * that come back under a query that has moved on cannot revive it either.
 * `moveTo(null)` is for deliberate resets, such as reopening the list.
 *
 * Both callbacks keep one identity for the life of the component, and read the
 * rows and the query through a ref to do it. A caller will put them in an
 * effect's dependencies — the exhaustive-deps rule makes it — and a `moveTo`
 * rebuilt on every keystroke would re-run that effect on every keystroke.
 */
export function useRowCursor(rows: readonly { id: string }[], query: string) {
  const [cursor, setCursor] = useState<RowCursor | null>(null);
  // Written after commit, not during render: a render React discards or has not
  // finished still runs the component body, and an event handler that read this
  // in that window would stamp the cursor with a query the committed tree does
  // not have.
  const latest = useRef({ rows, query });
  useLayoutEffect(() => {
    latest.current = { rows, query };
  });

  const cursorRow = indexOfCursor(rows, query, cursor);
  // Cleared rather than ignored: React re-runs this render with the cursor
  // already gone, so rows that come back cannot revive a highlight the user has
  // stopped aiming at.
  if (cursor !== null && cursorRow < 0) setCursor(null);

  const moveTo = useCallback(
    (id: string | null) =>
      setCursor(id === null ? null : { id, query: latest.current.query }),
    [],
  );

  const moveActive = useCallback((direction: 1 | -1) => {
    const { rows: live, query: liveQuery } = latest.current;
    const last = live.length - 1;
    if (last < 0) return;
    // Steps from the row the cursor is really on, inside the update, so that
    // two keys landing in one batch move two rows rather than one.
    setCursor((current) => {
      const at = Math.max(indexOfCursor(live, liveQuery, current), 0);
      const next = Math.min(Math.max(at + direction, 0), last);
      return { id: live[next].id, query: liveQuery };
    });
  }, []);

  return { activeIndex: cursorRow < 0 ? 0 : cursorRow, moveTo, moveActive };
}

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

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

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

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

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

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

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

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

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

"use client";

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

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

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

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

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

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

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

"use client";

import { useMemo, useRef } from "react";
import { isHoveringPointer } from "@/lib/touch";

interface BoundaryEvent {
  pointerId: number;
  pointerType: string;
  buttons: number;
}

export interface HoverGesture {
  /** True when this enter starts a hover: the pointer arrived resting, not pressing. */
  enter: (event: BoundaryEvent) => boolean;
  /** True when this leave ends a hover that entered as one. */
  leave: (event: BoundaryEvent) => boolean;
}

/**
 * Pairs a surface's enter with its leave, per pointer.
 *
 * `isHoveringPointer` answers the question the *enter* asks — is this pointer
 * resting on the surface or pressing it — and both boundary cases go wrong if
 * the leave is asked the same question again:
 *
 * - A pen with no hover never rests. It arrives in contact, taps, and the spec
 *   then requires its boundary events after `pointerup`, so the leave carries
 *   `buttons: 0` and reads as a mouse gliding off. Hover teardown then undid
 *   the tap — the panel the pen had just opened closed under it.
 * - A mouse pressed on the surface and dragged off leaves with `buttons: 1`.
 *   Skipping teardown there strands the surface open: the release happens
 *   outside, and no second leave ever comes.
 *
 * So the state a hover holds is released by the pointer that took it, whatever
 * the buttons say at the boundary, and a pointer that arrived in contact never
 * took it in the first place. Contact is the exception tracked here, not
 * hover: a leave from a pointer this surface never saw enter — mounted under
 * the cursor, say — still counts, since the alternative is state with no way
 * out.
 */
export function useHoverGesture(): HoverGesture {
  const contact = useRef(new Set<number>());

  return useMemo(
    () => ({
      enter: (event) => {
        if (isHoveringPointer(event)) {
          contact.current.delete(event.pointerId);
          return true;
        }
        contact.current.add(event.pointerId);
        return false;
      },
      leave: (event) => {
        const arrivedInContact = contact.current.delete(event.pointerId);
        return !arrivedInContact && event.pointerType !== "touch";
      },
    }),
    [],
  );
}

"use client";

import { useMemo, useRef } from "react";

/** What a pointerdown recorded, read back by the click that ends its gesture. */
export interface TapRecord<S> {
  /** Which input started the gesture. */
  pointerType: string;
  /** What the surface was showing when it started. */
  state: S;
}

export interface TapGesture<S> {
  /** Record the gesture a pointerdown starts, with the state it starts in. */
  start: (event: { pointerType: string }, state: S) => void;
  /** Read the record and clear it. `null` when no pointer is behind this click. */
  take: () => TapRecord<S> | null;
  /** Drop the record: this gesture will never spend it on a click. */
  drop: () => void;
}

/**
 * The pointer gesture behind a click, recorded where the click cannot report
 * it. A `click` carries no `pointerType` in the engines that matter, so the
 * `pointerdown` before it is the only thing that says which input activated
 * the control — and whether one did at all, since keyboard activation
 * synthesizes a click with no pointer behind it.
 *
 * State goes in with the record because a click reports that no better: a
 * browser that focuses a control on contact can open the very panel the tap
 * was meant to open, and reading "is it open" at click time then undoes it.
 * What the gesture started against is what it acts on.
 *
 * The record is spent by one click and dropped by everything else, because a
 * record that outlives its gesture is worse than none:
 *
 * - A scroll or an OS gesture takes the touch away — `pointercancel`, no click
 *   ever — and the finger would sit in the record until some later click.
 * - That later click is often `Enter` on a keyboard, which arrives with no
 *   pointerdown of its own and would inherit the abandoned finger. A keydown
 *   is the start of a keyboard activation and never part of a tap, so it drops
 *   the record too.
 *
 * Both ends have to be wired by the surface: `drop` on `onPointerCancel` and
 * on `onKeyDown`.
 */
export function useTapGesture<S>(): TapGesture<S> {
  const record = useRef<TapRecord<S> | null>(null);

  return useMemo(
    () => ({
      start: (event, state) => {
        record.current = { pointerType: event.pointerType, state };
      },
      take: () => {
        const spent = record.current;
        record.current = null;
        return spent;
      },
      drop: () => {
        record.current = null;
      },
    }),
    [],
  );
}

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

/**
 * 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";
// beui.dev/charts/treemap

import { cn } from "@/lib/utils";
import { TreemapContext, useTreemapModel, type TreemapProps } from "./treemap/context";
import { TreemapLegend } from "./treemap/legend";
import { TreemapPlot } from "./treemap/plot";
import { TreemapTooltip } from "./treemap/tooltip";

/** Compose Plot, Tooltip and Legend, or omit children for the complete chart. */
export function Treemap({
  data,
  label,
  formatValue,
  colors,
  textColor,
  activeId,
  defaultActiveId,
  onActiveChange,
  className,
  children,
  ...props
}: TreemapProps) {
  const model = useTreemapModel({
    data,
    label,
    formatValue,
    colors,
    textColor,
    activeId,
    defaultActiveId,
    onActiveChange,
  });
  return (
    <TreemapContext.Provider value={model}>
      <section
        aria-label={model.label}
        {...props}
        data-slot="treemap"
        className={cn("min-w-0 w-full space-y-4", className)}
      >
        {children === undefined ? (
          <>
            <TreemapPlot />
            <TreemapTooltip />
            <TreemapLegend />
          </>
        ) : (
          children
        )}
        <div className="sr-only">
          <table>
            <caption>{model.label} data</caption>
            <thead>
              <tr>
                <th scope="col">Item</th>
                <th scope="col">Value</th>
                <th scope="col">Share of total</th>
                <th scope="col">Details</th>
              </tr>
            </thead>
            <tbody>
              {model.items.map((item) => (
                <tr key={item.id}>
                  <th scope="row">{item.path.join(" / ")}</th>
                  <td>{model.formatValue(item.value)}</td>
                  <td>{(item.share * 100).toFixed(1)}%</td>
                  <td>{item.description ?? ""}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>
    </TreemapContext.Provider>
  );
}

export { useTreemap } from "./treemap/context";
export type { TreemapProps } from "./treemap/context";
export type {
  TreemapNode,
  TreemapLeaf,
  TreemapGroup,
  TreemapItem,
  TreemapTile,
} from "./treemap/model";
export { TreemapPlot } from "./treemap/plot";
export type { TreemapPlotProps } from "./treemap/plot";
export { TreemapTooltip } from "./treemap/tooltip";
export type { TreemapTooltipProps } from "./treemap/tooltip";
export { TreemapLegend } from "./treemap/legend";
export type { TreemapLegendProps } from "./treemap/legend";

"use client";

import { useReducedMotion } from "motion/react";
import {
  createContext,
  useCallback,
  useContext,
  useId,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
  type ComponentProps,
} from "react";
import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
import { useRowCursor } from "@/lib/hooks/use-row-cursor";
import { buildTreemap, layoutTreemap, TREEMAP_COLORS, type TreemapNode } from "./model";

const defaultFormat = (value: number) =>
  value.toLocaleString("en-US", { maximumFractionDigits: 2 });

export interface TreemapProps extends ComponentProps<"section"> {
  /** Flat leaves or nested groups. Tile area uses leaf values; groups sum their descendants. */
  data: readonly TreemapNode[];
  label?: string;
  formatValue?: (value: number) => string;
  /** Top-level palette; nodes can override their inherited color and textColor. */
  colors?: readonly string[];
  textColor?: string;
  activeId?: string | null;
  defaultActiveId?: string | null;
  onActiveChange?: (id: string | null) => void;
}

export function useTreemapModel({
  data,
  label = "Treemap",
  formatValue = defaultFormat,
  colors = TREEMAP_COLORS,
  textColor = "#ffffff",
  activeId,
  defaultActiveId = null,
  onActiveChange,
}: TreemapProps) {
  const model = useMemo(() => buildTreemap(data, colors, textColor), [data, colors, textColor]);
  const [size, setSize] = useState({ width: 1000, height: 625 });
  const tiles = useMemo(
    () => layoutTreemap(model.nodes, size.width, size.height),
    [model.nodes, size],
  );
  const cursor = useRowCursor(tiles, "");
  const [internalId, setInternalId] = useState(defaultActiveId);
  if (internalId !== null && !tiles.some((tile) => tile.id === internalId)) setInternalId(null);
  const requestedId = activeId === undefined ? internalId : activeId;
  const active = tiles.find((tile) => tile.id === requestedId) ?? null;
  const [tooltipOpen, setTooltipOpen] = useState(false);
  const plotRef = useRef<HTMLDivElement>(null);
  const buttons = useRef(new Map<string, HTMLButtonElement>());
  const tooltipId = useId();
  const latest = useRef({ activeId, requestedId, onActiveChange });
  useLayoutEffect(() => {
    latest.current = { activeId, requestedId, onActiveChange };
  });
  const setActive = useCallback((id: string | null) => {
    const current = latest.current;
    if (current.activeId === undefined) setInternalId(id);
    if (current.requestedId !== id) current.onActiveChange?.(id);
  }, []);
  const registerButton = useCallback((id: string, node: HTMLButtonElement | null) => {
    if (node) buttons.current.set(id, node);
    else buttons.current.delete(id);
  }, []);
  return {
    ...model,
    tiles,
    size,
    setSize,
    label,
    formatValue,
    active,
    setActive,
    cursor,
    tooltipOpen,
    setTooltipOpen,
    plotRef,
    buttons,
    registerButton,
    tooltipId,
    reduce: useReducedMotion(),
    canHover: useHoverCapable(),
  };
}

export const TreemapContext = createContext<ReturnType<typeof useTreemapModel> | null>(null);

export function useTreemap() {
  const context = useContext(TreemapContext);
  if (!context) throw new Error("Treemap parts must be rendered inside Treemap.");
  return context;
}

"use client";

import { cn } from "@/lib/utils";
import { useTreemap } from "./context";

export interface TreemapLegendProps {
  className?: string;
  showValues?: boolean;
}

export function TreemapLegend({ className, showValues = false }: TreemapLegendProps) {
  const { nodes, formatValue } = useTreemap();
  if (!nodes.length) return null;
  return (
    <ul
      aria-label="Treemap legend"
      className={cn("flex flex-wrap gap-x-5 gap-y-2 text-xs", className)}
    >
      {nodes.map((node) => (
        <li key={node.id} className="inline-flex items-center gap-1.5">
          <span
            aria-hidden="true"
            className="size-1.5 shrink-0 rounded-full"
            style={{ backgroundColor: node.color }}
          />
          <span className="text-muted-foreground">{node.label}</span>
          {showValues ? (
            <span className="font-mono tabular-nums">{formatValue(node.value)}</span>
          ) : null}
        </li>
      ))}
    </ul>
  );
}

interface TreemapBase {
  /** Unique across the whole tree. Retain IDs when updating values. */
  id: string;
  label: string;
  color?: string;
  textColor?: string;
  description?: string;
}

export interface TreemapLeaf extends TreemapBase {
  /** Finite, nonnegative weight. Zero values stay in the accessible table. */
  value: number;
}

export interface TreemapGroup extends TreemapBase {
  /** Group weights are derived from their leaves; groups never add their own value. */
  children: readonly TreemapNode[];
}

export type TreemapNode = TreemapLeaf | TreemapGroup;

export interface TreemapItem extends TreemapLeaf {
  color: string;
  textColor: string;
  path: readonly string[];
  share: number;
}

interface ResolvedNode {
  id: string;
  label: string;
  value: number;
  color: string;
  children: ResolvedNode[];
  item: TreemapItem | null;
}

export interface TreemapTile extends TreemapItem {
  x: number;
  y: number;
  width: number;
  height: number;
}

export const TREEMAP_COLORS = [
  "#1d4ed8",
  "#7c3aed",
  "#0f766e",
  "#b45309",
  "#be123c",
  "#475569",
] as const;

export function buildTreemap(
  data: readonly TreemapNode[],
  colors: readonly string[],
  textColor: string,
) {
  if (!colors.length) throw new Error("Treemap: colors must contain at least one color.");
  const ids = new Set<string>();
  const items: TreemapItem[] = [];
  const resolve = (
    node: TreemapNode,
    path: readonly string[],
    inheritedColor: string,
    inheritedText: string,
  ): ResolvedNode => {
    if (ids.has(node.id)) throw new Error(`Treemap: duplicate node ID "${node.id}".`);
    ids.add(node.id);
    const color = node.color ?? inheritedColor;
    const foreground = node.textColor ?? inheritedText;
    const nextPath = [...path, node.label];
    if ("children" in node) {
      const children = node.children.map((child) => resolve(child, nextPath, color, foreground));
      const value = children.reduce((sum, child) => sum + child.value, 0);
      if (!Number.isFinite(value)) throw new Error("Treemap: group totals must remain finite.");
      return { id: node.id, label: node.label, value, color, children, item: null };
    }
    if (!Number.isFinite(node.value) || node.value < 0)
      throw new Error("Treemap: leaf values must be finite and nonnegative.");
    const item: TreemapItem = { ...node, color, textColor: foreground, path: nextPath, share: 0 };
    items.push(item);
    return { id: node.id, label: node.label, value: node.value, color, children: [], item };
  };
  const nodes = data.map((node, index) =>
    resolve(node, [], colors[index % colors.length], textColor),
  );
  const total = nodes.reduce((sum, node) => sum + node.value, 0);
  if (!Number.isFinite(total)) throw new Error("Treemap: the total must remain finite.");
  for (const item of items) item.share = total ? item.value / total : 0;
  return { nodes, items, total };
}

/** Order-preserving balanced binary tiling, recursively applied to groups.
 * See https://d3js.org/d3-hierarchy/treemap#treemapBinary for the tiling method.
 * The calculation is local and never generates values or mutates consumer data. */
export function layoutTreemap(nodes: readonly ResolvedNode[], width: number, height: number) {
  const tiles: TreemapTile[] = [];
  const partition = (
    siblings: readonly ResolvedNode[],
    x: number,
    y: number,
    w: number,
    h: number,
  ) => {
    const positive = siblings.filter((node) => node.value > 0);
    if (!positive.length) return;
    if (positive.length === 1) {
      const node = positive[0];
      if (node.item) tiles.push({ ...node.item, x, y, width: w, height: h });
      else partition(node.children, x, y, w, h);
      return;
    }
    const total = positive.reduce((sum, node) => sum + node.value, 0);
    let cut = 1;
    let subtotal = positive[0].value;
    for (let i = 1; i < positive.length - 1; i++) {
      const next = subtotal + positive[i].value;
      if (Math.abs(next - total / 2) > Math.abs(subtotal - total / 2)) break;
      cut = i + 1;
      subtotal = next;
    }
    const fraction = subtotal / total;
    if (w >= h) {
      const split = w * fraction;
      partition(positive.slice(0, cut), x, y, split, h);
      partition(positive.slice(cut), x + split, y, w - split, h);
    } else {
      const split = h * fraction;
      partition(positive.slice(0, cut), x, y, w, split);
      partition(positive.slice(cut), x, y + split, w, h - split);
    }
  };
  partition(nodes, 0, 0, width, height);
  return tiles.filter((tile) => tile.width > 0 && tile.height > 0);
}

"use client";

import { AnimatePresence, LayoutGroup } from "motion/react";
import { useId, useLayoutEffect, useRef, type KeyboardEvent, type ReactNode } from "react";
import { cn } from "@/lib/utils";
import { useTreemap } from "./context";
import type { TreemapTile } from "./model";
import { TreemapCell } from "./tile";

export interface TreemapPlotProps {
  /** Sets the plot height; default 20rem. The layout follows its measured dimensions. */
  className?: string;
  tileClassName?: string;
  /** Return presentation content only; each tile already owns its button and accessible name. */
  renderTile?: (tile: TreemapTile) => ReactNode;
}

export function TreemapPlot({ className, tileClassName, renderTile }: TreemapPlotProps) {
  const { tiles, items, plotRef, setSize, cursor, buttons, setActive, setTooltipOpen } =
    useTreemap();
  const layoutId = useId();
  const focusedId = useRef<string | null>(null);
  useLayoutEffect(() => {
    const plot = plotRef.current;
    if (!plot) return;
    const measure = () => {
      const { width, height } = plot.getBoundingClientRect();
      if (width > 0 && height > 0)
        setSize((size) =>
          size.width === width && size.height === height ? size : { width, height },
        );
    };
    measure();
    const observer = new ResizeObserver(measure);
    observer.observe(plot);
    return () => observer.disconnect();
  }, [plotRef, setSize]);
  useLayoutEffect(() => {
    const id = focusedId.current;
    if (!id || tiles.some((tile) => tile.id === id)) return;
    focusedId.current = null;
    const lost = buttons.current.get(id);
    if (document.activeElement === lost || document.activeElement === document.body) {
      const replacement = tiles[cursor.activeIndex];
      if (replacement) buttons.current.get(replacement.id)?.focus();
      else plotRef.current?.focus();
    }
  }, [tiles, cursor.activeIndex, buttons, plotRef]);
  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
    if (!(event.target instanceof HTMLButtonElement)) return;
    const id = event.target.dataset.treemapTile;
    const current = tiles.find((tile) => tile.id === id);
    if (!current) return;
    if (event.key === "Escape") {
      setTooltipOpen(false);
      return;
    }
    if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key))
      return;
    event.preventDefault();
    let next = current;
    if (event.key === "Home") next = tiles[0];
    else if (event.key === "End") next = tiles[tiles.length - 1];
    else {
      const horizontal = event.key === "ArrowLeft" || event.key === "ArrowRight";
      const direction = event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 1;
      const cx = current.x + current.width / 2;
      const cy = current.y + current.height / 2;
      let best = Number.POSITIVE_INFINITY;
      for (const tile of tiles) {
        const dx = tile.x + tile.width / 2 - cx;
        const dy = tile.y + tile.height / 2 - cy;
        const forward = (horizontal ? dx : dy) * direction;
        const cross = Math.abs(horizontal ? dy : dx);
        const score = forward + cross * 2;
        if (forward > 0.01 && score < best) {
          next = tile;
          best = score;
        }
      }
    }
    setTooltipOpen(true);
    if (next.id === current.id) setActive(current.id);
    else buttons.current.get(next.id)?.focus();
  };
  return (
    <LayoutGroup id={layoutId}>
      {/* biome-ignore lint/a11y/useSemanticElements: This group is a chart, not a collection of form fields. */}
      <div
        ref={plotRef}
        role="group"
        aria-label="Treemap tiles"
        tabIndex={-1}
        data-slot="treemap-plot"
        className={cn(
          "relative h-80 w-full min-w-0 rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-ring",
          className,
        )}
        onKeyDown={onKeyDown}
        onFocus={(event) => {
          if (event.target instanceof HTMLButtonElement)
            focusedId.current = event.target.dataset.treemapTile ?? null;
        }}
        onBlur={(event) => {
          if (!event.currentTarget.contains(event.relatedTarget)) {
            focusedId.current = null;
            setTooltipOpen(false);
          }
        }}
        onPointerLeave={() => setTooltipOpen(false)}
      >
        <AnimatePresence initial={false}>
          {tiles.map((tile) => (
            <TreemapCell
              key={tile.id}
              tile={tile}
              className={tileClassName}
              renderTile={renderTile}
            />
          ))}
        </AnimatePresence>
        {!tiles.length ? (
          <p className="flex h-full items-center justify-center text-sm text-muted-foreground">
            {items.length ? "No positive values" : "No treemap data"}
          </p>
        ) : null}
      </div>
    </LayoutGroup>
  );
}

"use client";

import { MotionConfig } from "motion/react";
import type { ReactNode } from "react";
import { NumberTicker } from "@/components/motion/number-ticker";
import { Tooltip } from "@/components/motion/tooltip";
import { cn } from "@/lib/utils";
import { useTreemap } from "./context";
import type { TreemapItem } from "./model";

export interface TreemapTooltipProps {
  className?: string;
  side?: "top" | "right" | "bottom" | "left";
  children?: ReactNode | ((item: TreemapItem) => ReactNode);
}

export function TreemapTooltip({ className, side = "top", children }: TreemapTooltipProps) {
  const { active, plotRef, size, tiles, tooltipId, tooltipOpen, setTooltipOpen, formatValue } =
    useTreemap();
  if (!tiles.length) return null;
  return (
    <Tooltip
      id={tooltipId}
      anchorRef={plotRef}
      followCursor
      anchorPoint={{
        x: active ? (active.x + active.width / 2) / size.width : 0.5,
        y: active ? (active.y + active.height / 2) / size.height : 0.5,
      }}
      open={tooltipOpen && active !== null}
      onOpenChange={setTooltipOpen}
      side={side}
      className={cn("max-w-64", className)}
      content={
        active
          ? typeof children === "function"
            ? children(active)
            : (children ?? (
                <MotionConfig transition={{ type: "tween" }}>
                  <span className="flex flex-col gap-1.5 text-xs">
                    {active.path.length > 1 ? (
                      <span className="text-muted-foreground">
                        {active.path.slice(0, -1).join(" / ")}
                      </span>
                    ) : null}
                    <span className="font-medium">{active.label}</span>
                    <span className="inline-flex items-center gap-2 font-mono tabular-nums">
                      <NumberTicker
                        value={active.value}
                        format={() => formatValue(active.value)}
                        startOnView={false}
                        duration={0.2}
                        stagger={0}
                      />
                      <span className="text-muted-foreground">·</span>
                      <NumberTicker
                        value={active.share * 100}
                        format={() => `${(active.share * 100).toFixed(1)}%`}
                        startOnView={false}
                        duration={0.2}
                        stagger={0}
                        className="text-muted-foreground"
                      />
                    </span>
                    {active.description ? (
                      <span className="text-muted-foreground">{active.description}</span>
                    ) : null}
                  </span>
                </MotionConfig>
              ))
          : null
      }
    />
  );
}

"use client";

import { motion, useIsPresent } from "motion/react";
import { useCallback, type ReactNode } from "react";
import { EASE_OUT, SPRING_LAYOUT } from "@/lib/ease";
import { cn } from "@/lib/utils";
import { useTreemap } from "./context";
import type { TreemapTile } from "./model";

export function TreemapCell({
  tile,
  className,
  renderTile,
}: {
  tile: TreemapTile;
  className?: string;
  renderTile?: (tile: TreemapTile) => ReactNode;
}) {
  const {
    size,
    active,
    setActive,
    cursor,
    tiles,
    formatValue,
    tooltipId,
    tooltipOpen,
    setTooltipOpen,
    reduce,
    canHover,
    registerButton,
  } = useTreemap();
  const present = useIsPresent();
  const ref = useCallback(
    (node: HTMLButtonElement | null) => registerButton(tile.id, node),
    [tile.id, registerButton],
  );
  const selected = tooltipOpen && active?.id === tile.id;
  const width = tile.width / size.width;
  const height = tile.height / size.height;
  // Small tiles remain inspectable; their labels stay in the accessible name
  // and exact-data table rather than spilling into neighbouring rectangles.
  const showLabel = tile.width >= 52 && tile.height >= 32;
  const showValue = tile.width >= 70 && tile.height >= 56;
  return (
    <motion.button
      ref={ref}
      type="button"
      data-treemap-tile={tile.id}
      layout={!reduce}
      inert={!present}
      aria-hidden={!present || undefined}
      tabIndex={present && tiles[cursor.activeIndex]?.id === tile.id ? 0 : -1}
      aria-label={[
        tile.path.join(" / "),
        formatValue(tile.value),
        `${(tile.share * 100).toFixed(1)}% of total`,
        tile.description,
      ]
        .filter(Boolean)
        .join(". ")}
      aria-describedby={present && selected ? tooltipId : undefined}
      className={cn(
        "absolute overflow-hidden border-2 border-background text-left outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white",
        className,
      )}
      style={{
        left: `${(tile.x / size.width) * 100}%`,
        top: `${(tile.y / size.height) * 100}%`,
        width: `${width * 100}%`,
        height: `${height * 100}%`,
        backgroundColor: tile.color,
        color: tile.textColor,
        borderRadius: 8,
        pointerEvents: present ? "auto" : "none",
      }}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{
        layout: reduce ? { duration: 0 } : SPRING_LAYOUT,
        opacity: { type: "tween", duration: present ? 0.18 : 0.1, ease: EASE_OUT },
      }}
      onPointerEnter={(event) => {
        if (present && canHover && event.pointerType !== "touch") {
          setActive(tile.id);
          setTooltipOpen(true);
        }
      }}
      onPointerMove={(event) => {
        if (present && (event.pointerType === "touch" ? event.buttons === 1 : canHover)) {
          setActive(tile.id);
          setTooltipOpen(true);
        }
      }}
      onPointerDown={() => {
        if (present) {
          setActive(tile.id);
          setTooltipOpen(true);
        }
      }}
      onClick={() => {
        if (present) {
          setActive(tile.id);
          setTooltipOpen(true);
        }
      }}
      onFocus={() => {
        if (present) {
          cursor.moveTo(tile.id);
          setActive(tile.id);
          setTooltipOpen(true);
        }
      }}
    >
      <motion.span
        aria-hidden="true"
        layout={reduce ? false : "position"}
        transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
        className="absolute inset-x-2 top-2 min-w-0 sm:inset-x-3 sm:top-3"
      >
        {renderTile ? (
          renderTile(tile)
        ) : showLabel ? (
          <>
            <span className="block truncate text-xs font-semibold sm:text-sm">{tile.label}</span>
            {showValue ? (
              <span className="mt-1 block truncate font-mono text-[10px] tabular-nums opacity-80 sm:text-xs">
                {formatValue(tile.value)}
              </span>
            ) : null}
          </>
        ) : null}
      </motion.span>
      <motion.span
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 bg-white/10"
        initial={false}
        animate={{ opacity: selected ? 1 : 0 }}
        transition={{ type: "tween", duration: 0.1, ease: EASE_OUT }}
      />
    </motion.button>
  );
}

"use client";

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

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

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

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

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

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

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

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

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

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

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

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

  return (
    <span
      className={cn("relative inline-block overflow-hidden", className)}
      style={{ height: `${DIGIT_HEIGHT_EM}em`, width: "1ch" }}
    >
      <motion.span
        ref={columnRef}
        initial={{ y: 0 }}
        animate={{ y: `-${digit * DIGIT_HEIGHT_EM}em` }}
        transition={
          reduce
            ? { duration: 0 }
            : { duration, delay, ease: EASE_OUT }
        }
        className="absolute inset-x-0 top-0 flex flex-col items-center will-change-[transform,filter]"
      >
        {DIGITS.map((n) => (
          <span
            key={n}
            className="flex h-[1.1em] items-center justify-center leading-none"
          >
            {n}
          </span>
        ))}
      </motion.span>
    </span>
  );
}