bits-lab 0.0.0-stage → 0.1.0

package/dist/GravityBox.js

@@ -0,0 +1,220 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { Children, useEffect, useInsertionEffect, useRef, useState } from "react";
+import Matter from "matter-js";
+const STYLE_ID = "bl-gravity";
+const CSS = `
+.bl-grav { position: relative; width: 100%; height: var(--bl-h); overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-bg); }
+.bl-grav__layout { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: var(--bl-gap); padding: var(--bl-pad); }
+.bl-grav__item { display: inline-block; }
+.bl-grav[data-live] .bl-grav__item { position: absolute; left: 0; top: 0; margin: 0; touch-action: none; cursor: grab; user-select: none; will-change: transform; }
+.bl-grav[data-live] .bl-grav__item[data-held] { cursor: grabbing; z-index: 2; }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+const { Engine, Bodies, Body, Composite, Constraint, Sleeping } = Matter;
+function GravityBox({
+  children,
+  height = 420,
+  gravity = 1,
+  restitution = 0.35,
+  friction = 0.2,
+  startOn = "view",
+  spin = true,
+  draggable = true,
+  sleep = true,
+  gap = 10,
+  padding = 20,
+  radius = 16,
+  backgroundColor = "transparent",
+  force = false,
+  onSettle,
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const itemRefs = useRef([]);
+  const [live, setLive] = useState(false);
+  const [armed, setArmed] = useState(startOn === "mount");
+  const onSettleRef = useRef(onSettle);
+  onSettleRef.current = onSettle;
+  const items = Children.toArray(children);
+  useEffect(() => {
+    if (armed || startOn !== "view") return void 0;
+    const observer = new IntersectionObserver(([entry]) => entry.isIntersecting && setArmed(true), { threshold: 0.4 });
+    observer.observe(rootRef.current);
+    return () => observer.disconnect();
+  }, [armed, startOn]);
+  useEffect(() => {
+    if (!armed) return void 0;
+    if (!force && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return void 0;
+    const root = rootRef.current;
+    const nodes = itemRefs.current.filter(Boolean);
+    const base = root.getBoundingClientRect();
+    const boxes = nodes.map((node) => {
+      const r = node.getBoundingClientRect();
+      const radius2 = parseFloat(getComputedStyle(node.firstElementChild ?? node).borderTopLeftRadius) || 0;
+      return { x: r.left - base.left, y: r.top - base.top, w: r.width, h: r.height, radius: radius2 };
+    });
+    root.setAttribute("data-live", "");
+    setLive(true);
+    const engine = Engine.create({ enableSleeping: sleep });
+    engine.gravity.y = gravity;
+    const bodies = boxes.map((b) => {
+      const body = Bodies.rectangle(b.x + b.w / 2, b.y + b.h / 2, b.w, b.h, {
+        restitution,
+        friction,
+        frictionAir: 0.012,
+        chamfer: { radius: Math.min(b.radius, b.w / 2, b.h / 2) }
+      });
+      if (spin) Body.setAngularVelocity(body, (Math.random() - 0.5) * 0.08);
+      return body;
+    });
+    Composite.add(engine.world, bodies);
+    let walls = [];
+    const buildWalls = () => {
+      Composite.remove(engine.world, walls);
+      const w = root.clientWidth;
+      const h = root.clientHeight;
+      const t = 200;
+      walls = [
+        Bodies.rectangle(w / 2, h + t / 2, w + t * 2, t, { isStatic: true }),
+        Bodies.rectangle(-t / 2, h / 2, t, h * 3, { isStatic: true }),
+        Bodies.rectangle(w + t / 2, h / 2, t, h * 3, { isStatic: true })
+      ];
+      Composite.add(engine.world, walls);
+    };
+    buildWalls();
+    const paint = () => {
+      bodies.forEach((body, i) => {
+        const b = boxes[i];
+        nodes[i].style.transform = `translate(${(body.position.x - b.w / 2).toFixed(2)}px, ${(body.position.y - b.h / 2).toFixed(2)}px) rotate(${body.angle.toFixed(4)}rad)`;
+        nodes[i].style.width = `${b.w}px`;
+      });
+    };
+    paint();
+    let frame = 0;
+    let visible = true;
+    let last = performance.now();
+    let settledOnce = false;
+    let awakeFor = 0;
+    let grab = null;
+    const loop = (now) => {
+      frame = 0;
+      const dt = Math.min(1e3 / 30, now - last);
+      last = now;
+      Engine.update(engine, dt);
+      awakeFor += dt;
+      paint();
+      const resting = !grab && awakeFor > 500 && bodies.every((body) => body.isSleeping || body.speed < 0.05);
+      if (resting && sleep) {
+        if (!settledOnce) {
+          settledOnce = true;
+          onSettleRef.current?.();
+        }
+        return;
+      }
+      if (visible) frame = requestAnimationFrame(loop);
+    };
+    const wake = () => {
+      bodies.forEach((body) => Sleeping.set(body, false));
+      awakeFor = 0;
+      if (!frame && visible) {
+        last = performance.now();
+        frame = requestAnimationFrame(loop);
+      }
+    };
+    const onDown = (event) => {
+      if (!draggable || event.button > 0) return;
+      const index = nodes.findIndex((node) => node.contains(event.target));
+      if (index < 0 || event.target.closest("a, button, input, textarea, select")) return;
+      const rect = root.getBoundingClientRect();
+      const point = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+      const body = bodies[index];
+      const local = Matter.Vector.rotate(Matter.Vector.sub(point, body.position), -body.angle);
+      const constraint = Constraint.create({ pointA: point, bodyB: body, pointB: local, stiffness: 0.08, damping: 0.08, length: 0 });
+      Composite.add(engine.world, constraint);
+      grab = { constraint, node: nodes[index], id: event.pointerId };
+      nodes[index].setAttribute("data-held", "");
+      try {
+        root.setPointerCapture(event.pointerId);
+      } catch {
+      }
+      wake();
+    };
+    const onMove = (event) => {
+      if (!grab || event.pointerId !== grab.id) return;
+      const rect = root.getBoundingClientRect();
+      grab.constraint.pointA = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+    };
+    const onUp = (event) => {
+      if (!grab || event.pointerId !== grab.id) return;
+      Composite.remove(engine.world, grab.constraint);
+      grab.node.removeAttribute("data-held");
+      grab = null;
+      wake();
+    };
+    const resize = new ResizeObserver(() => {
+      buildWalls();
+      wake();
+    });
+    resize.observe(root);
+    const io = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible) wake();
+    });
+    io.observe(root);
+    root.addEventListener("pointerdown", onDown);
+    root.addEventListener("pointermove", onMove);
+    root.addEventListener("pointerup", onUp);
+    root.addEventListener("pointercancel", onUp);
+    frame = requestAnimationFrame(loop);
+    return () => {
+      cancelAnimationFrame(frame);
+      resize.disconnect();
+      io.disconnect();
+      root.removeEventListener("pointerdown", onDown);
+      root.removeEventListener("pointermove", onMove);
+      root.removeEventListener("pointerup", onUp);
+      root.removeEventListener("pointercancel", onUp);
+      Engine.clear(engine);
+      nodes.forEach((node) => {
+        node.style.transform = "";
+        node.style.width = "";
+      });
+      root.removeAttribute("data-live");
+      setLive(false);
+    };
+  }, [armed, gravity, restitution, friction, spin, draggable, sleep, force, items.length]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: rootRef,
+      className: `bl-grav ${className}`,
+      "data-live": live || void 0,
+      onClick: () => startOn === "click" && setArmed(true),
+      style: { "--bl-h": `${height}px`, "--bl-gap": `${gap}px`, "--bl-pad": `${padding}px`, "--bl-radius": `${radius}px`, "--bl-bg": backgroundColor, ...style },
+      children: /* @__PURE__ */ jsx("div", { className: "bl-grav__layout", children: items.map((child, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: (node) => {
+            itemRefs.current[i] = node;
+          },
+          className: "bl-grav__item",
+          children: child
+        },
+        child.key ?? i
+      )) })
+    }
+  );
+}
+export {
+  GravityBox as default
+};

package/dist/HealthBar.d.ts

@@ -0,0 +1,33 @@
+import { type CSSProperties } from 'react';
+export interface HealthBarProps {
+    /** Current value. Changes animate: damage drains, heals fill. */
+    value?: number;
+    max?: number;
+    /** Shown above the bar and used as the meter's accessible name. */
+    label?: string;
+    /** Number of cells; 0 or 1 for a smooth bar. */
+    segments?: number;
+    /** Bar height, in px. */
+    height?: number;
+    color?: string;
+    /** Fill color while critical. */
+    lowColor?: string;
+    /** Ghost bar color after damage. */
+    damageColor?: string;
+    /** Ghost bar color while healing. */
+    healColor?: string;
+    trackColor?: string;
+    labelColor?: string;
+    /** Fraction of max at which the bar turns critical and pulses. */
+    lowThreshold?: number;
+    /** How long the damage ghost waits before draining, in ms. */
+    delay?: number;
+    /** How long the ghost drains (or the heal fills), in ms. */
+    drainDuration?: number;
+    /** Show the "72/100" readout. */
+    showValue?: boolean;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function HealthBar({ value, max, label, segments, height, color, lowColor, damageColor, healColor, trackColor, labelColor, lowThreshold, delay, drainDuration, showValue, fontFamily, className, style }: HealthBarProps): import("react").JSX.Element;

package/dist/HealthBar.js

@@ -0,0 +1,140 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-health-bar";
+const CSS = `
+.bl-hp { display: grid; gap: 6px; font-family: var(--bl-font, "Press Start 2P", ui-monospace, monospace); color: var(--bl-label); }
+.bl-hp__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 10px; text-transform: uppercase; }
+.bl-hp__value { font-variant-numeric: tabular-nums; }
+.bl-hp__track {
+  position: relative; height: var(--bl-height); margin: 3px; background: var(--bl-track); overflow: hidden;
+  box-shadow: 0 -3px 0 0 #0b0b14, 0 3px 0 0 #0b0b14, -3px 0 0 0 #0b0b14, 3px 0 0 0 #0b0b14;
+}
+.bl-hp__ghost, .bl-hp__fill { position: absolute; inset: 0 auto 0 0; }
+.bl-hp__ghost { background: var(--bl-ghost); }
+.bl-hp__fill { background: var(--bl-fill); box-shadow: inset 0 calc(var(--bl-height) / 4) 0 0 rgba(255, 255, 255, 0.22), inset 0 calc(var(--bl-height) / -4) 0 0 rgba(0, 0, 0, 0.18); }
+.bl-hp[data-mode="damage"] .bl-hp__fill { transition: width 80ms steps(2); }
+.bl-hp[data-mode="damage"] .bl-hp__ghost { transition: width var(--bl-drain) cubic-bezier(.4, 0, .2, 1) var(--bl-delay); }
+.bl-hp[data-mode="heal"] .bl-hp__ghost { transition: width 80ms steps(2); }
+.bl-hp[data-mode="heal"] .bl-hp__fill { transition: width var(--bl-drain) cubic-bezier(.2, .8, .2, 1) var(--bl-delay); }
+.bl-hp[data-flash] .bl-hp__fill { filter: brightness(2.2) saturate(0.4); }
+.bl-hp__segments {
+  position: absolute; inset: 0; pointer-events: none;
+  background: repeating-linear-gradient(to right, transparent 0 calc(100% / var(--bl-segments) - 3px), #0b0b14 calc(100% / var(--bl-segments) - 3px) calc(100% / var(--bl-segments)));
+}
+.bl-hp__shimmer { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%); transform: translateX(-100%); }
+.bl-hp[data-shimmer] .bl-hp__shimmer { animation: bl-hp-shimmer 700ms steps(8) 1; }
+.bl-hp[data-critical] .bl-hp__track { animation: bl-hp-pulse 0.8s steps(2) infinite; }
+@keyframes bl-hp-shimmer { to { transform: translateX(100%); } }
+@keyframes bl-hp-pulse { 50% { box-shadow: 0 -3px 0 0 var(--bl-low), 0 3px 0 0 var(--bl-low), -3px 0 0 0 var(--bl-low), 3px 0 0 0 var(--bl-low); } }
+@media (prefers-reduced-motion: reduce) {
+  .bl-hp .bl-hp__fill, .bl-hp .bl-hp__ghost { transition: none !important; }
+  .bl-hp[data-critical] .bl-hp__track, .bl-hp[data-shimmer] .bl-hp__shimmer { animation: none; }
+}
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+const clamp = (value, max) => Math.min(max, Math.max(0, value));
+function HealthBar({
+  value = 72,
+  max = 100,
+  label = "HP",
+  segments = 10,
+  height = 20,
+  color = "#38b764",
+  lowColor = "#b13e53",
+  damageColor = "#f4f4f4",
+  healColor = "#a7f070",
+  trackColor = "#1a1c2c",
+  labelColor = "#f4f4f4",
+  lowThreshold = 0.25,
+  delay = 350,
+  drainDuration = 600,
+  showValue = true,
+  fontFamily,
+  className = "",
+  style
+}) {
+  useStyles();
+  const current = clamp(value, max);
+  const previous = useRef(current);
+  const [mode, setMode] = useState("damage");
+  const [flash, setFlash] = useState(false);
+  const [shimmer, setShimmer] = useState(0);
+  useEffect(() => {
+    if (current === previous.current) return void 0;
+    const damage = current < previous.current;
+    previous.current = current;
+    setMode(damage ? "damage" : "heal");
+    if (damage) {
+      setFlash(true);
+      const timer = setTimeout(() => setFlash(false), 140);
+      return () => clearTimeout(timer);
+    }
+    setShimmer((count) => count + 1);
+    return void 0;
+  }, [current]);
+  const ratio = max > 0 ? current / max : 0;
+  const critical = ratio > 0 && ratio <= lowThreshold;
+  const fill = critical ? lowColor : color;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-hp ${className}`,
+      "data-mode": mode,
+      "data-flash": flash || void 0,
+      "data-critical": critical || void 0,
+      "data-shimmer": shimmer ? "" : void 0,
+      style: {
+        "--bl-height": `${height}px`,
+        "--bl-fill": fill,
+        "--bl-ghost": mode === "damage" ? damageColor : healColor,
+        "--bl-track": trackColor,
+        "--bl-label": labelColor,
+        "--bl-low": lowColor,
+        "--bl-segments": Math.max(1, segments),
+        "--bl-delay": `${delay}ms`,
+        "--bl-drain": `${drainDuration}ms`,
+        ...fontFamily ? { "--bl-font": fontFamily } : null,
+        ...style
+      },
+      children: [
+        (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "bl-hp__head", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("span", { children: label }),
+          showValue && /* @__PURE__ */ jsxs("span", { className: "bl-hp__value", children: [
+            Math.round(current),
+            "/",
+            max
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "bl-hp__track",
+            role: "meter",
+            "aria-label": label || "Health",
+            "aria-valuemin": 0,
+            "aria-valuemax": max,
+            "aria-valuenow": Math.round(current),
+            "aria-valuetext": `${Math.round(current)} of ${max}${critical ? ", critical" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "bl-hp__ghost", style: { width: `${ratio * 100}%` } }),
+              /* @__PURE__ */ jsx("div", { className: "bl-hp__fill", style: { width: `${ratio * 100}%` } }),
+              /* @__PURE__ */ jsx("div", { className: "bl-hp__shimmer" }, shimmer),
+              segments > 1 && /* @__PURE__ */ jsx("div", { className: "bl-hp__segments" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  HealthBar as default
+};

package/dist/Heatmap.d.ts

@@ -0,0 +1,42 @@
+import { type CSSProperties } from 'react';
+export interface HeatDatum {
+    date: Date | string | number;
+    value: number;
+}
+export interface HeatDay {
+    date: Date;
+    week: number;
+    weekday: number;
+    value: number;
+    future: boolean;
+}
+export interface HeatmapProps {
+    data?: HeatDatum[];
+    /** The last day shown (default today). */
+    end?: Date | string | number;
+    weeks?: number;
+    weekStartsOn?: number;
+    /** Three cut-offs between the four non-zero levels (default quartiles). */
+    thresholds?: number[];
+    /** Empty plus four steps of one hue. */
+    colors?: string[];
+    title?: string;
+    unit?: string;
+    unitPlural?: string;
+    locale?: string;
+    cellSize?: number;
+    gap?: number;
+    radius?: number;
+    onSelect?: (day: HeatDay) => void;
+    textColor?: string;
+    mutedColor?: string;
+    dimColor?: string;
+    accentColor?: string;
+    tooltipColor?: string;
+    tooltipTextColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const HEAT_RAMP: string[];
+export default function Heatmap({ data, end, weeks, weekStartsOn, thresholds, colors, title, unit, unitPlural, locale, cellSize, gap, radius, onSelect, textColor, mutedColor, dimColor, accentColor, tooltipColor, tooltipTextColor, fontFamily, className, style }: HeatmapProps): import("react").JSX.Element;

package/dist/Heatmap.js

@@ -0,0 +1,232 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useMemo, useRef, useState } from "react";
+const STYLE_ID = "bl-heatmap";
+const CSS = `
+.bl-heat { position: relative; width: fit-content; max-width: 100%; color: var(--bl-ink); font-family: var(--bl-font); }
+.bl-heat__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
+.bl-heat__title { margin: 0; font-size: 14px; font-weight: 600; }
+.bl-heat__scroll { overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; }
+.bl-heat__frame { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; width: max-content; }
+.bl-heat__months { grid-column: 2; position: relative; height: 16px; color: var(--bl-dim); font-size: 11px; }
+.bl-heat__months span { position: absolute; top: 0; white-space: nowrap; }
+.bl-heat__days { display: grid; grid-template-rows: repeat(7, var(--bl-cell)); row-gap: var(--bl-gap); color: var(--bl-dim); font-size: 10px; line-height: var(--bl-cell); }
+.bl-heat__grid { display: grid; grid-template-rows: repeat(7, var(--bl-cell)); grid-auto-columns: var(--bl-cell); grid-auto-flow: column; gap: var(--bl-gap); outline: none; }
+.bl-heat__grid:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 4px; border-radius: 4px; }
+.bl-heat__row { display: contents; }
+.bl-heat__cell { border-radius: var(--bl-radius); background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); animation: bl-heat-in 420ms cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(var(--wk) * 14ms); }
+.bl-heat__cell[data-active] { box-shadow: 0 0 0 2px var(--bl-ink); }
+.bl-heat__cell[data-out] { visibility: hidden; }
+.bl-heat__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; color: var(--bl-muted); font-size: 12px; }
+.bl-heat__legend { display: flex; align-items: center; gap: 4px; }
+.bl-heat__legend i { width: 11px; height: 11px; border-radius: 2px; }
+.bl-heat__tip { position: absolute; z-index: 5; padding: 6px 9px; border-radius: 8px; background: var(--bl-tip); color: var(--bl-tip-ink); box-shadow: 0 10px 24px -10px rgba(0,0,0,0.8); font-size: 12px; line-height: 1.35; white-space: nowrap; pointer-events: none; transform: translate(-50%, calc(-100% - 8px)); }
+.bl-heat__tip b { display: block; font-size: 14px; }
+
+@keyframes bl-heat-in { from { opacity: 0; transform: scale(0.3); } }
+@media (prefers-reduced-motion: reduce) { .bl-heat__cell { animation: none; } }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+const HEAT_RAMP = ["#262b44", "#184f95", "#256abf", "#3987e5", "#86b6ef"];
+const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+const keyOf = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+function Heatmap({
+  data = [],
+  end,
+  weeks = 53,
+  weekStartsOn = 0,
+  thresholds,
+  colors = HEAT_RAMP,
+  title,
+  unit = "contribution",
+  unitPlural,
+  locale,
+  cellSize = 12,
+  gap = 3,
+  radius = 2,
+  onSelect,
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  dimColor = "#566c86",
+  accentColor = "#73eff7",
+  tooltipColor = "#f4f4f4",
+  tooltipTextColor = "#1a1c2c",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const plural = unitPlural ?? `${unit}s`;
+  const last = startOfDay(end ? new Date(end) : /* @__PURE__ */ new Date());
+  const first = new Date(last.getFullYear(), last.getMonth(), last.getDate() - (last.getDay() - weekStartsOn + 7) % 7 - (weeks - 1) * 7);
+  const values = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const entry of data) {
+      const d = startOfDay(new Date(entry.date));
+      map.set(keyOf(d), (map.get(keyOf(d)) ?? 0) + (Number(entry.value) || 0));
+    }
+    return map;
+  }, [data]);
+  const cuts = useMemo(() => {
+    if (thresholds) return thresholds;
+    const sorted = [...values.values()].filter((v) => v > 0).sort((a, b) => a - b);
+    if (!sorted.length) return [1, 2, 3];
+    const q = (p) => sorted[Math.min(sorted.length - 1, Math.floor(p * sorted.length))];
+    return [q(0.25), q(0.5), q(0.75)];
+  }, [values, thresholds]);
+  const levelOf = (v) => v <= 0 ? 0 : v <= cuts[0] ? 1 : v <= cuts[1] ? 2 : v <= cuts[2] ? 3 : 4;
+  const cells = useMemo(
+    () => Array.from({ length: weeks * 7 }, (_, i) => {
+      const date = new Date(first.getFullYear(), first.getMonth(), first.getDate() + i);
+      return { date, week: Math.floor(i / 7), weekday: i % 7, value: values.get(keyOf(date)) ?? 0, future: date > last };
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [values, weeks, weekStartsOn, last.getTime()]
+  );
+  const total = cells.reduce((sum, c) => sum + (c.future ? 0 : c.value), 0);
+  const [active, setActive] = useState(cells.length - 1 - cells.filter((c) => c.future).length);
+  const [tip, setTip] = useState(null);
+  const scrollRef = useRef(null);
+  const gridRef = useRef(null);
+  useEffect(() => {
+    const node = scrollRef.current;
+    if (node) node.scrollLeft = node.scrollWidth;
+  }, [weeks]);
+  const fmtDate = (d) => new Intl.DateTimeFormat(locale, { weekday: "short", month: "short", day: "numeric", year: "numeric" }).format(d);
+  const describe = (c) => `${c.value.toLocaleString(locale)} ${c.value === 1 ? unit : plural}, ${fmtDate(c.date)}`;
+  const showTip = (index) => {
+    const cell = cells[index];
+    const node = gridRef.current?.querySelector(`[data-i="${index}"]`);
+    if (!cell || !node || cell.future) return setTip(null);
+    const box = node.getBoundingClientRect();
+    const base = gridRef.current.closest(".bl-heat").getBoundingClientRect();
+    setTip({ index, x: box.left - base.left + box.width / 2, y: box.top - base.top });
+  };
+  const onKeyDown = (event) => {
+    const moves = { ArrowUp: -1, ArrowDown: 1, ArrowLeft: -7, ArrowRight: 7, Home: -active % 7, End: 6 - active % 7 };
+    if (!(event.key in moves)) {
+      if ((event.key === "Enter" || event.key === " ") && onSelect) {
+        event.preventDefault();
+        onSelect(cells[active]);
+      }
+      return;
+    }
+    event.preventDefault();
+    let next = active + moves[event.key];
+    while (next >= 0 && next < cells.length && cells[next].future) next -= 7;
+    if (next < 0 || next >= cells.length) return;
+    setActive(next);
+    showTip(next);
+    gridRef.current?.querySelector(`[data-i="${next}"]`)?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  };
+  const months = [];
+  for (let week = 0; week < weeks; week++) {
+    const date = cells[week * 7].date;
+    const previous = week > 0 ? cells[(week - 1) * 7].date : null;
+    if (previous && previous.getMonth() === date.getMonth()) continue;
+    if (months.length && week - months[months.length - 1].week < 3) {
+      if (months[months.length - 1].week === 0) months.pop();
+      else continue;
+    }
+    months.push({ week, text: new Intl.DateTimeFormat(locale, { month: "short" }).format(date) });
+  }
+  const dayNames = Array.from({ length: 7 }, (_, i) => new Intl.DateTimeFormat(locale, { weekday: "short" }).format(new Date(2024, 0, 7 + (i + weekStartsOn) % 7)));
+  const step = cellSize + gap;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-heat ${className}`,
+      style: {
+        "--bl-cell": `${cellSize}px`,
+        "--bl-gap": `${gap}px`,
+        "--bl-radius": `${radius}px`,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-dim": dimColor,
+        "--bl-accent": accentColor,
+        "--bl-tip": tooltipColor,
+        "--bl-tip-ink": tooltipTextColor,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        title && /* @__PURE__ */ jsx("div", { className: "bl-heat__head", children: /* @__PURE__ */ jsx("p", { className: "bl-heat__title", id: `${uid}-title`, children: title }) }),
+        /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "bl-heat__scroll", children: /* @__PURE__ */ jsxs("div", { className: "bl-heat__frame", children: [
+          /* @__PURE__ */ jsx("div", { className: "bl-heat__months", "aria-hidden": "true", style: { width: weeks * step - gap }, children: months.map((m) => /* @__PURE__ */ jsx("span", { style: { left: m.week * step }, children: m.text }, m.week)) }),
+          /* @__PURE__ */ jsx("div", { className: "bl-heat__days", "aria-hidden": "true", children: dayNames.map((name, i) => /* @__PURE__ */ jsx("span", { children: i % 2 === 1 ? name : "" }, name)) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: gridRef,
+              className: "bl-heat__grid",
+              role: "grid",
+              tabIndex: 0,
+              "aria-label": `${title ?? "Activity"}: ${total.toLocaleString(locale)} ${plural}. Use the arrow keys to read each day.`,
+              "aria-activedescendant": `${uid}-d${active}`,
+              onKeyDown,
+              onFocus: () => showTip(active),
+              onBlur: () => setTip(null),
+              onPointerLeave: () => setTip(null),
+              children: Array.from({ length: 7 }, (_, row) => /* @__PURE__ */ jsx("div", { className: "bl-heat__row", role: "row", children: cells.filter((c) => c.weekday === row).map((c) => {
+                const i = c.week * 7 + c.weekday;
+                return /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    id: `${uid}-d${i}`,
+                    "data-i": i,
+                    role: "gridcell",
+                    "aria-label": c.future ? void 0 : describe(c),
+                    "aria-hidden": c.future || void 0,
+                    "aria-selected": i === active,
+                    className: "bl-heat__cell",
+                    "data-out": c.future || void 0,
+                    "data-active": tip && tip.index === i || void 0,
+                    style: { gridColumn: c.week + 1, gridRow: row + 1, "--c": colors[levelOf(c.value)], "--wk": c.week },
+                    onPointerEnter: () => showTip(i),
+                    onClick: () => {
+                      setActive(i);
+                      if (!c.future) onSelect?.(c);
+                    }
+                  },
+                  i
+                );
+              }) }, row))
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-heat__foot", children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            total.toLocaleString(locale),
+            " ",
+            plural
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "bl-heat__legend", "aria-hidden": "true", children: [
+            "Less",
+            colors.map((c) => /* @__PURE__ */ jsx("i", { style: { background: c } }, c)),
+            "More"
+          ] })
+        ] }),
+        tip && cells[tip.index] && /* @__PURE__ */ jsxs("div", { className: "bl-heat__tip", "aria-hidden": "true", style: { left: tip.x, top: tip.y }, children: [
+          /* @__PURE__ */ jsxs("b", { children: [
+            cells[tip.index].value.toLocaleString(locale),
+            " ",
+            cells[tip.index].value === 1 ? unit : plural
+          ] }),
+          fmtDate(cells[tip.index].date)
+        ] })
+      ]
+    }
+  );
+}
+export {
+  HEAT_RAMP,
+  Heatmap as default
+};