bits-lab 0.0.0-stage → 0.1.0

package/dist/HexField.d.ts

@@ -0,0 +1,29 @@
+import { type CSSProperties } from 'react';
+export interface HexFieldProps {
+    /** Hexagon radius in px. */
+    size?: number;
+    gap?: number;
+    /** Fills its parent by default. */
+    height?: number | string;
+    baseColor?: string;
+    cellColor?: string;
+    glowColor?: string;
+    rippleColor?: string;
+    backgroundColor?: string;
+    /** How far the pointer glow reaches, in px. */
+    hoverRadius?: number;
+    /** Ripple speed in px per second. */
+    rippleSpeed?: number;
+    rippleWidth?: number;
+    /** A slow drifting wave at rest. */
+    wave?: boolean;
+    /** Render at a third of the resolution for chunky pixels. */
+    pixelated?: boolean;
+    onRipple?: (at: {
+        x: number;
+        y: number;
+    }) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function HexField({ size, gap, height, baseColor, cellColor, glowColor, rippleColor, backgroundColor, hoverRadius, rippleSpeed, rippleWidth, wave, pixelated, onRipple, className, style }: HexFieldProps): import("react").JSX.Element;

package/dist/HexField.js

@@ -0,0 +1,188 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+const hexToRgb = (hex) => {
+  const n = parseInt(hex.replace("#", "").replace(/^(.)(.)(.)$/, "$1$1$2$2$3$3"), 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+};
+const mix = (a, b, t) => a.map((v, i) => Math.round(v + (b[i] - v) * t));
+function HexField({
+  size = 22,
+  gap = 3,
+  height = "100%",
+  baseColor = "#1a1c2c",
+  cellColor = "#29366f",
+  glowColor = "#73eff7",
+  rippleColor = "#ffcd75",
+  backgroundColor = "#0b0b14",
+  hoverRadius = 110,
+  rippleSpeed = 420,
+  rippleWidth = 70,
+  wave = true,
+  pixelated = false,
+  onRipple,
+  className = "",
+  style
+}) {
+  const canvasRef = useRef(null);
+  const rippleRef = useRef(onRipple);
+  rippleRef.current = onRipple;
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const base = hexToRgb(cellColor);
+    const glow = hexToRgb(glowColor);
+    const ripCol = hexToRgb(rippleColor);
+    const edge = hexToRgb(baseColor);
+    let cells = [];
+    let W = 0;
+    let H = 0;
+    let dpr = 1;
+    const pointer = { x: -9999, y: -9999 };
+    const ripples = [];
+    let flash = null;
+    let visible = true;
+    let raf = 0;
+    let clock = 0;
+    let last = 0;
+    const layout = () => {
+      dpr = pixelated ? 1 / 3 : Math.min(2, window.devicePixelRatio || 1);
+      W = canvas.clientWidth;
+      H = canvas.clientHeight;
+      canvas.width = Math.round(W * dpr);
+      canvas.height = Math.round(H * dpr);
+      const w = Math.sqrt(3) * size;
+      const rowH = size * 1.5;
+      cells = [];
+      for (let row = -1; row * rowH < H + size; row++) {
+        for (let col = -1; col * w < W + w; col++) {
+          cells.push({ x: col * w + (row % 2 ? w / 2 : 0), y: row * rowH, lift: 0 });
+        }
+      }
+    };
+    const hex = (x, y, r) => {
+      ctx.beginPath();
+      for (let k = 0; k < 6; k++) {
+        const a = Math.PI / 3 * k - Math.PI / 2;
+        const px = x + Math.cos(a) * r;
+        const py = y + Math.sin(a) * r;
+        if (k) ctx.lineTo(px, py);
+        else ctx.moveTo(px, py);
+      }
+      ctx.closePath();
+    };
+    const draw = () => {
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, W, H);
+      const r = size - gap / 2;
+      cells.forEach((cell) => {
+        const waveT = wave && !reduced ? (Math.sin(cell.x * 0.012 + cell.y * 0.018 - clock * 1.1) + 1) / 2 : 0.5;
+        const d = Math.hypot(cell.x - pointer.x, cell.y - pointer.y);
+        const hover = Math.max(0, 1 - d / hoverRadius) ** 1.6;
+        let rip = 0;
+        ripples.forEach((rp) => {
+          const ring = Math.abs(Math.hypot(cell.x - rp.x, cell.y - rp.y) - rp.r);
+          rip = Math.max(rip, Math.max(0, 1 - ring / rippleWidth) * rp.strength);
+        });
+        if (flash) rip = Math.max(rip, Math.max(0, 1 - Math.hypot(cell.x - flash.x, cell.y - flash.y) / (hoverRadius * 1.6)) * flash.strength);
+        let rgb = mix(edge, base, 0.45 + waveT * 0.35);
+        rgb = mix(rgb, glow, hover * 0.85);
+        rgb = mix(rgb, ripCol, rip * 0.9);
+        const lift = rip * 3 + hover * 1.5;
+        hex(cell.x, cell.y - lift, r * (1 + rip * 0.08));
+        ctx.fillStyle = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
+        ctx.fill();
+      });
+    };
+    const tick = (now) => {
+      const dt = Math.max(0, Math.min(0.05, (now - last) / 1e3));
+      last = now;
+      clock += dt;
+      const reach = Math.hypot(W, H) + rippleWidth;
+      for (let i = ripples.length - 1; i >= 0; i--) {
+        const rp = ripples[i];
+        rp.r += rippleSpeed * dt;
+        rp.strength = Math.max(0, 1 - rp.r / reach);
+        if (rp.r > reach) ripples.splice(i, 1);
+      }
+      draw();
+      raf = visible && !document.hidden && (wave || ripples.length || pointer.x > -9999) ? requestAnimationFrame(tick) : 0;
+    };
+    const start = () => {
+      if (raf || reduced || !visible || document.hidden) return;
+      last = performance.now();
+      raf = requestAnimationFrame(tick);
+    };
+    const local = (event) => {
+      const rect = canvas.getBoundingClientRect();
+      return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+    };
+    const onMove = (event) => {
+      Object.assign(pointer, local(event));
+      if (reduced) draw();
+      else start();
+    };
+    const onLeave = () => {
+      pointer.x = -9999;
+      pointer.y = -9999;
+      if (reduced) draw();
+      else start();
+    };
+    const onDown = (event) => {
+      const at = local(event);
+      rippleRef.current?.(at);
+      if (reduced) {
+        flash = { ...at, strength: 1 };
+        draw();
+        setTimeout(() => {
+          flash = null;
+          draw();
+        }, 450);
+        return;
+      }
+      ripples.push({ ...at, r: 0, strength: 1 });
+      if (ripples.length > 6) ripples.shift();
+      start();
+    };
+    const resize = new ResizeObserver(() => {
+      layout();
+      draw();
+    });
+    resize.observe(canvas);
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      start();
+    });
+    observer.observe(canvas);
+    const onVisibility = () => start();
+    document.addEventListener("visibilitychange", onVisibility);
+    canvas.addEventListener("pointermove", onMove);
+    canvas.addEventListener("pointerleave", onLeave);
+    canvas.addEventListener("pointerdown", onDown);
+    layout();
+    draw();
+    start();
+    return () => {
+      cancelAnimationFrame(raf);
+      resize.disconnect();
+      observer.disconnect();
+      document.removeEventListener("visibilitychange", onVisibility);
+      canvas.removeEventListener("pointermove", onMove);
+      canvas.removeEventListener("pointerleave", onLeave);
+      canvas.removeEventListener("pointerdown", onDown);
+    };
+  }, [size, gap, baseColor, cellColor, glowColor, rippleColor, hoverRadius, rippleSpeed, rippleWidth, wave, pixelated]);
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      className,
+      "aria-hidden": "true",
+      style: { display: "block", width: "100%", height, background: backgroundColor, touchAction: "pan-y", imageRendering: pixelated ? "pixelated" : void 0, ...style }
+    }
+  );
+}
+export {
+  HexField as default
+};

package/dist/HoldToConfirm.d.ts

@@ -0,0 +1,29 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface HoldToConfirmProps {
+    /** Label while waiting. */
+    children?: ReactNode;
+    /** Label after confirming. */
+    doneLabel?: ReactNode;
+    /** Called once the fuse burns all the way. */
+    onConfirm?: () => void;
+    /** Hold time in ms. */
+    duration?: number;
+    /** How many times faster it rewinds when let go. */
+    rewind?: number;
+    /** How long the done state shows, in ms. */
+    resetAfter?: number;
+    disabled?: boolean;
+    width?: number;
+    height?: number;
+    radius?: number;
+    backgroundColor?: string;
+    fillColor?: string;
+    fuseColor?: string;
+    sparkColor?: string;
+    textColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function HoldToConfirm({ children, doneLabel, onConfirm, duration, rewind, resetAfter, disabled, width, height, radius, backgroundColor, fillColor, fuseColor, sparkColor, textColor, accentColor, fontFamily, className, style }: HoldToConfirmProps): import("react").JSX.Element;

package/dist/HoldToConfirm.js

@@ -0,0 +1,163 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-hold-confirm";
+const CSS = `
+.bl-hold { --p: 0; position: relative; display: inline-grid; place-items: center; min-width: var(--bl-w); height: var(--bl-h); padding: 0 22px; overflow: hidden; border: 0; border-radius: var(--bl-radius); background: var(--bl-bg); color: var(--bl-ink); font: inherit; font-family: var(--bl-font); font-size: 15px; font-weight: 700; cursor: pointer; user-select: none; touch-action: none; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.3); -webkit-tap-highlight-color: transparent; }
+.bl-hold:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 3px; }
+.bl-hold:disabled { cursor: not-allowed; opacity: 0.5; }
+.bl-hold__fill { position: absolute; inset: 0; background: var(--bl-fill); transform: scaleX(var(--p)); transform-origin: left; }
+.bl-hold__fuse { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: repeating-linear-gradient(90deg, var(--bl-fuse) 0 6px, transparent 6px 9px); }
+.bl-hold__spark { position: absolute; bottom: -2px; left: calc(var(--p) * 100%); width: 8px; height: 8px; margin-left: -4px; background: var(--bl-spark); box-shadow: 4px -4px 0 var(--bl-spark), -4px -6px 0 var(--bl-fuse), 2px -10px 0 rgba(255,255,255,0.7); opacity: 0; animation: bl-hold-crackle 120ms steps(2) infinite; }
+.bl-hold[data-state="holding"] .bl-hold__spark { opacity: 1; }
+.bl-hold__label { position: relative; display: inline-flex; align-items: center; gap: 8px; }
+.bl-hold[data-state="done"] { animation: bl-hold-flash 420ms steps(3); }
+.bl-hold__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-hold-crackle { 50% { transform: translate(1px, -2px) scale(0.8); } }
+@keyframes bl-hold-flash { 33% { filter: brightness(1.8); } }
+@media (prefers-reduced-motion: reduce) { .bl-hold__spark { display: none; } .bl-hold[data-state="done"] { 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);
+  }, []);
+}
+function HoldToConfirm({
+  children = "Hold to delete",
+  doneLabel = "Done",
+  onConfirm,
+  duration = 1200,
+  rewind = 2.5,
+  resetAfter = 1600,
+  disabled = false,
+  width = 200,
+  height = 52,
+  radius = 10,
+  backgroundColor = "#333c57",
+  fillColor = "#b13e53",
+  fuseColor = "#ef7d57",
+  sparkColor = "#ffcd75",
+  textColor = "#f4f4f4",
+  accentColor = "#73eff7",
+  fontFamily = "inherit",
+  className = "",
+  style
+}) {
+  useStyles();
+  const ref = useRef(null);
+  const confirmRef = useRef(onConfirm);
+  confirmRef.current = onConfirm;
+  const [state, setState] = useState("idle");
+  const [announce, setAnnounce] = useState("");
+  const held = useRef(false);
+  useEffect(() => {
+    const el = ref.current;
+    let p = 0;
+    let raf = 0;
+    let last = 0;
+    let done = false;
+    let resetTimer = 0;
+    const paint = () => el.style.setProperty("--p", p.toFixed(4));
+    const tick = (now) => {
+      const dt = Math.max(0, Math.min(0.25, (now - last) / 1e3));
+      last = now;
+      p = held.current ? Math.min(1, p + dt * 1e3 / duration) : Math.max(0, p - dt * 1e3 / duration * rewind);
+      paint();
+      if (held.current && p >= 1 && !done) {
+        done = true;
+        held.current = false;
+        setState("done");
+        setAnnounce(`${typeof doneLabel === "string" ? doneLabel : "Done"}.`);
+        confirmRef.current?.();
+        resetTimer = setTimeout(() => {
+          done = false;
+          p = 0;
+          paint();
+          setState("idle");
+          setAnnounce("");
+        }, resetAfter);
+        raf = 0;
+        return;
+      }
+      raf = held.current || p > 0 ? requestAnimationFrame(tick) : 0;
+      if (!raf) setState("idle");
+    };
+    const start = () => {
+      if (done || el.disabled) return;
+      held.current = true;
+      setState("holding");
+      if (!raf) {
+        last = performance.now();
+        raf = requestAnimationFrame(tick);
+      }
+    };
+    const stop = () => {
+      if (!held.current) return;
+      held.current = false;
+      if (!raf && p > 0) {
+        last = performance.now();
+        raf = requestAnimationFrame(tick);
+      }
+    };
+    const onDown = (event) => {
+      if (event.button > 0) return;
+      el.setPointerCapture?.(event.pointerId);
+      start();
+    };
+    const onKeyDown = (event) => {
+      if ((event.key === " " || event.key === "Enter") && !event.repeat) {
+        event.preventDefault();
+        start();
+      }
+    };
+    const onKeyUp = (event) => {
+      if (event.key === " " || event.key === "Enter") stop();
+    };
+    const onClick = (event) => event.preventDefault();
+    el.addEventListener("pointerdown", onDown);
+    el.addEventListener("pointerup", stop);
+    el.addEventListener("pointercancel", stop);
+    el.addEventListener("lostpointercapture", stop);
+    el.addEventListener("keydown", onKeyDown);
+    el.addEventListener("keyup", onKeyUp);
+    el.addEventListener("blur", stop);
+    el.addEventListener("click", onClick);
+    return () => {
+      cancelAnimationFrame(raf);
+      clearTimeout(resetTimer);
+      el.removeEventListener("pointerdown", onDown);
+      el.removeEventListener("pointerup", stop);
+      el.removeEventListener("pointercancel", stop);
+      el.removeEventListener("lostpointercapture", stop);
+      el.removeEventListener("keydown", onKeyDown);
+      el.removeEventListener("keyup", onKeyUp);
+      el.removeEventListener("blur", stop);
+      el.removeEventListener("click", onClick);
+    };
+  }, [duration, rewind, resetAfter]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: `bl-hold ${className}`,
+      "data-state": state,
+      disabled,
+      style: { "--bl-w": `${width}px`, "--bl-h": `${height}px`, "--bl-radius": `${radius}px`, "--bl-bg": backgroundColor, "--bl-fill": fillColor, "--bl-fuse": fuseColor, "--bl-spark": sparkColor, "--bl-ink": textColor, "--bl-accent": accentColor, "--bl-font": fontFamily, ...style },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "bl-hold__fill", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "bl-hold__fuse", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "bl-hold__spark", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "bl-hold__label", children: state === "done" ? doneLabel : children }),
+        /* @__PURE__ */ jsx("span", { className: "bl-hold__sr", children: state === "done" ? "" : " (press and hold to confirm)" }),
+        /* @__PURE__ */ jsx("span", { className: "bl-hold__sr", "aria-live": "polite", children: announce })
+      ]
+    }
+  );
+}
+export {
+  HoldToConfirm as default
+};

package/dist/HorizontalTrack.d.ts

@@ -0,0 +1,28 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface HorizontalTrackProps {
+    /** Gallery items. Each becomes a focusable list item. */
+    children?: ReactNode;
+    /** Content pinned above the track. */
+    header?: ReactNode;
+    /** Item width, in px. */
+    itemWidth?: number;
+    gap?: number;
+    /** Side padding of the track, in px. */
+    padding?: number;
+    /** Height of the pinned stage. Use the scroll box height when inside one. */
+    stageHeight?: string;
+    /** After scrolling stops, glide to the nearest item. */
+    snap?: boolean;
+    /** Counter and progress bar under the track. */
+    showProgress?: boolean;
+    /** Accessible name of the gallery. */
+    label?: string;
+    accentColor?: string;
+    mutedColor?: string;
+    trackColor?: string;
+    barRadius?: number;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function HorizontalTrack({ children, header, itemWidth, gap, padding, stageHeight, snap, showProgress, label, accentColor, mutedColor, trackColor, barRadius, fontFamily, className, style }: HorizontalTrackProps): import("react").JSX.Element;

package/dist/HorizontalTrack.js

@@ -0,0 +1,195 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-horizontal-track";
+const CSS = `
+.bl-htrack { position: relative; height: var(--bl-len); }
+.bl-htrack__stage { position: sticky; top: 0; height: var(--bl-stage); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
+.bl-htrack__header { padding: 0 var(--bl-pad); margin-bottom: 20px; }
+.bl-htrack__row { display: flex; gap: var(--bl-gap); width: max-content; padding: 0 var(--bl-pad); transform: translate3d(calc(var(--bl-x) * -1px), 0, 0); will-change: transform; }
+.bl-htrack__item { flex: 0 0 auto; width: var(--bl-item); max-width: calc(100vw - var(--bl-pad) * 2); outline: none; }
+.bl-htrack__item:focus-visible { box-shadow: 0 0 0 3px var(--bl-accent); }
+.bl-htrack__footer { display: flex; align-items: center; gap: 16px; padding: 22px var(--bl-pad) 0; color: var(--bl-muted); font: 600 13px/1 var(--bl-font); font-variant-numeric: tabular-nums; }
+.bl-htrack__bar { flex: 1; height: 4px; border-radius: var(--bl-bar-radius); background: var(--bl-track); overflow: hidden; }
+.bl-htrack__fill { height: 100%; background: var(--bl-accent); transform-origin: left; transform: scaleX(var(--bl-p)); }
+@media (prefers-reduced-motion: reduce) {
+  .bl-htrack { height: auto; }
+  .bl-htrack__stage { position: relative; height: auto; padding: 32px 0; }
+  .bl-htrack__row { transform: none; width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
+  .bl-htrack__item { scroll-snap-align: start; }
+  .bl-htrack__footer { display: 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);
+  }, []);
+}
+function scrollParent(node) {
+  for (let el = node?.parentElement; el; el = el.parentElement) {
+    if (/(auto|scroll|overlay)/.test(getComputedStyle(el).overflowY) && el.scrollHeight > el.clientHeight) return el;
+  }
+  return window;
+}
+function HorizontalTrack({
+  children,
+  header,
+  itemWidth = 420,
+  gap = 24,
+  padding = 48,
+  stageHeight = "100vh",
+  snap = true,
+  showProgress = true,
+  label = "Gallery",
+  accentColor = "#ffcd75",
+  mutedColor = "#94b0c2",
+  trackColor = "rgba(148,176,194,0.2)",
+  barRadius = 2,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const stageRef = useRef(null);
+  const rowRef = useRef(null);
+  const [length, setLength] = useState(null);
+  const [current, setCurrent] = useState(0);
+  const items = Children.toArray(children);
+  const geometry = useRef({ travel: 0, scroller: null });
+  const sectionStart = () => {
+    const { scroller } = geometry.current;
+    const rect = rootRef.current.getBoundingClientRect();
+    if (scroller === window) return rect.top + window.scrollY;
+    return rect.top - scroller.getBoundingClientRect().top + scroller.scrollTop;
+  };
+  const scrollTo = (top, smooth = true) => {
+    const { scroller } = geometry.current;
+    scroller.scrollTo({ top, behavior: smooth ? "smooth" : "auto" });
+  };
+  useEffect(() => {
+    const root = rootRef.current;
+    const stage = stageRef.current;
+    const row = rowRef.current;
+    const scroller = scrollParent(root);
+    geometry.current.scroller = scroller;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (reduced) return;
+    let frame = 0;
+    let idle = 0;
+    let lastIndex = -1;
+    const measure = () => {
+      const travel = Math.max(0, row.scrollWidth - stage.clientWidth);
+      geometry.current.travel = travel;
+      setLength((prev) => prev === travel + stage.clientHeight ? prev : travel + stage.clientHeight);
+    };
+    const update = () => {
+      frame = 0;
+      const { travel } = geometry.current;
+      const rect = root.getBoundingClientRect();
+      const viewTop = scroller === window ? 0 : scroller.getBoundingClientRect().top;
+      const progress = travel ? Math.min(1, Math.max(0, (viewTop - rect.top) / travel)) : 0;
+      root.style.setProperty("--bl-x", (progress * travel).toFixed(1));
+      root.style.setProperty("--bl-p", progress.toFixed(4));
+      const step = row.children[1] ? row.children[1].offsetLeft - row.children[0].offsetLeft : 1;
+      const index = Math.min(row.children.length - 1, Math.round(progress * travel / step));
+      if (index !== lastIndex) {
+        lastIndex = index;
+        setCurrent(index);
+      }
+    };
+    const settle = () => {
+      const { travel } = geometry.current;
+      const start = sectionStart();
+      const offset = (scroller === window ? window.scrollY : scroller.scrollTop) - start;
+      if (offset <= 2 || offset >= travel - 2) return;
+      const lefts = [...row.children].map((child) => Math.min(travel, child.offsetLeft - row.children[0].offsetLeft));
+      const nearest = lefts.reduce((best, x) => Math.abs(x - offset) < Math.abs(best - offset) ? x : best, lefts[0]);
+      if (Math.abs(nearest - offset) > 2) scrollTo(start + nearest);
+    };
+    const onScroll = () => {
+      if (!frame) frame = requestAnimationFrame(update);
+      if (snap) {
+        clearTimeout(idle);
+        idle = setTimeout(settle, 140);
+      }
+    };
+    const observer = new ResizeObserver(() => {
+      measure();
+      onScroll();
+    });
+    observer.observe(stage);
+    observer.observe(row);
+    measure();
+    update();
+    scroller.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll);
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(idle);
+      observer.disconnect();
+      scroller.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [snap, items.length]);
+  const onFocus = (event, index) => {
+    if (!event.target.matches(":focus-visible")) return;
+    const row = rowRef.current;
+    const { travel, scroller } = geometry.current;
+    if (!scroller || !travel) return;
+    const x = Math.min(travel, row.children[index].offsetLeft - row.children[0].offsetLeft);
+    scrollTo(sectionStart() + x);
+  };
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      ref: rootRef,
+      className: `bl-htrack ${className}`,
+      "aria-label": label,
+      style: {
+        "--bl-len": length == null ? stageHeight : `${length}px`,
+        "--bl-stage": stageHeight,
+        "--bl-item": `${itemWidth}px`,
+        "--bl-gap": `${gap}px`,
+        "--bl-pad": `${padding}px`,
+        "--bl-accent": accentColor,
+        "--bl-muted": mutedColor,
+        "--bl-track": trackColor,
+        "--bl-bar-radius": `${barRadius}px`,
+        "--bl-font": fontFamily,
+        "--bl-x": 0,
+        "--bl-p": 0,
+        ...style
+      },
+      children: /* @__PURE__ */ jsxs("div", { ref: stageRef, className: "bl-htrack__stage", children: [
+        header && /* @__PURE__ */ jsx("div", { className: "bl-htrack__header", children: header }),
+        /* @__PURE__ */ jsx("div", { ref: rowRef, className: "bl-htrack__row", role: "list", children: items.map((child, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "bl-htrack__item",
+            role: "listitem",
+            tabIndex: 0,
+            "aria-label": `${index + 1} of ${items.length}`,
+            onFocus: (event) => onFocus(event, index),
+            children: child
+          },
+          child.key ?? index
+        )) }),
+        showProgress && items.length > 1 && /* @__PURE__ */ jsxs("div", { className: "bl-htrack__footer", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            String(current + 1).padStart(2, "0"),
+            " / ",
+            String(items.length).padStart(2, "0")
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "bl-htrack__bar", children: /* @__PURE__ */ jsx("div", { className: "bl-htrack__fill" }) })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  HorizontalTrack as default
+};

package/dist/HotbarDock.d.ts

@@ -0,0 +1,40 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface HotbarItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** Stack count shown in the corner. */
+    count?: number;
+}
+export interface HotbarDockProps {
+    items?: HotbarItem[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (id: string, item: HotbarItem | undefined) => void;
+    /** Size of the slot under the pointer. */
+    magnify?: number;
+    /** How far the swell reaches, in px. */
+    range?: number;
+    /** Number keys 1–9 pick a slot (not while typing). */
+    hotkeys?: boolean;
+    /** Scrolling over the bar cycles the selection. */
+    wheel?: boolean;
+    label?: string;
+    slotSize?: number;
+    gap?: number;
+    padding?: number;
+    radius?: number;
+    backgroundColor?: string;
+    slotColor?: string;
+    hoverColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    selectColor?: string;
+    accentColor?: string;
+    tooltipColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function HotbarDock({ items, value, defaultValue, onChange, magnify, range, hotkeys, wheel, label, slotSize, gap, padding, radius, backgroundColor, slotColor, hoverColor, textColor, mutedColor, lineColor, selectColor, accentColor, tooltipColor, fontFamily, className, style }: HotbarDockProps): import("react").JSX.Element;