bits-lab 0.0.0-stage → 0.1.2

package/dist/Reveal.js

@@ -0,0 +1,92 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-reveal";
+const CSS = `
+.bl-reveal { position: relative; }
+.bl-reveal__part { display: block; transition: opacity var(--bl-dur) cubic-bezier(.2,.8,.2,1), transform var(--bl-dur) cubic-bezier(.2,.8,.2,1), clip-path var(--bl-dur) steps(var(--bl-steps)); transition-delay: calc(var(--bl-delay) + var(--i, 0) * var(--bl-stagger)); }
+.bl-reveal:not([data-shown])[data-effect="fade"] .bl-reveal__part { opacity: 0; }
+.bl-reveal:not([data-shown])[data-effect="rise"] .bl-reveal__part { opacity: 0; transform: translateY(var(--bl-distance)); }
+.bl-reveal:not([data-shown])[data-effect="zoom"] .bl-reveal__part { opacity: 0; transform: scale(0.92); }
+.bl-reveal:not([data-shown])[data-effect="wipe"] .bl-reveal__part { clip-path: inset(0 100% 0 0); }
+.bl-reveal__cover { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(var(--bl-cols), 1fr); grid-template-rows: repeat(var(--bl-rows), 1fr); pointer-events: none; }
+.bl-reveal__block { background: var(--bl-cover); transition: opacity 1ms linear; transition-delay: calc(var(--bl-delay) + var(--d) * var(--bl-dur)); }
+.bl-reveal[data-shown] .bl-reveal__block { opacity: 0; }
+@media (prefers-reduced-motion: reduce) { .bl-reveal .bl-reveal__part { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } .bl-reveal .bl-reveal__cover { 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);
+  }, []);
+}
+const scatter = (i) => {
+  const x = Math.sin((i + 1) * 91.345) * 47453.13;
+  return x - Math.floor(x);
+};
+function Reveal({
+  children,
+  as: Tag = "div",
+  effect = "rise",
+  cascade = false,
+  trigger = "view",
+  once = true,
+  threshold = 0.2,
+  duration = 600,
+  delay = 0,
+  stagger = 90,
+  distance = 24,
+  steps = 8,
+  blocks = [8, 5],
+  coverColor = "#0b0b14",
+  onReveal,
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const revealRef = useRef(onReveal);
+  revealRef.current = onReveal;
+  const [shown, setShown] = useState(false);
+  useEffect(() => {
+    if (trigger === "mount") {
+      const id = requestAnimationFrame(() => requestAnimationFrame(() => setShown(true)));
+      return () => cancelAnimationFrame(id);
+    }
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setShown(true);
+          if (once) observer.disconnect();
+        } else if (!once) setShown(false);
+      },
+      { threshold }
+    );
+    observer.observe(rootRef.current);
+    return () => observer.disconnect();
+  }, [trigger, once, threshold]);
+  useEffect(() => {
+    if (shown) revealRef.current?.();
+  }, [shown]);
+  const parts = cascade ? Children.toArray(children) : [children];
+  const [cols, rows] = blocks;
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ref: rootRef,
+      className: `bl-reveal ${className}`,
+      "data-effect": effect,
+      "data-shown": shown || void 0,
+      style: { "--bl-dur": `${duration}ms`, "--bl-delay": `${delay}ms`, "--bl-stagger": `${stagger}ms`, "--bl-distance": `${distance}px`, "--bl-steps": steps, "--bl-cols": cols, "--bl-rows": rows, "--bl-cover": coverColor, ...style },
+      children: [
+        parts.map((part, i) => /* @__PURE__ */ jsx("div", { className: "bl-reveal__part", style: { "--i": i }, children: part }, i)),
+        effect === "blocks" && /* @__PURE__ */ jsx("div", { className: "bl-reveal__cover", "aria-hidden": "true", children: Array.from({ length: cols * rows }, (_, i) => /* @__PURE__ */ jsx("span", { className: "bl-reveal__block", style: { "--d": scatter(i).toFixed(3) } }, i)) })
+      ]
+    }
+  );
+}
+export {
+  Reveal as default
+};

package/dist/RingProgress.d.ts

@@ -0,0 +1,45 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface Ring {
+    value: number;
+    /** Defaults to 100. */
+    max?: number;
+    label?: string;
+    /** Overrides the color from `colors`. */
+    color?: string;
+}
+export interface RingProgressProps {
+    /** Outer ring first. Values clamp to 0–max. */
+    rings?: Ring[];
+    /** Diameter, in px. */
+    size?: number;
+    /** Ring width, in px. */
+    thickness?: number;
+    /** Space between rings, in px. */
+    gap?: number;
+    /** Fill animation length, in ms. */
+    duration?: number;
+    /** Delay between rings, in ms. */
+    stagger?: number;
+    /** Where rings start, in degrees (0 = top). */
+    startAngle?: number;
+    /** Lighter-to-full gradient of each ring's own hue. */
+    gradient?: boolean;
+    /** Defaults to on for two or more rings. */
+    showLegend?: boolean;
+    /** Centre caption while nothing is focused. */
+    centerLabel?: ReactNode;
+    /** Text in the centre and the legend; also read aloud, so it must be plain text. */
+    formatValue?: (ring: Ring) => string;
+    /** Ring colors in order (the default three are validated for a dark surface). */
+    colors?: string[];
+    /** Opacity of each ring's track (same hue). */
+    trackOpacity?: number;
+    textColor?: string;
+    mutedColor?: string;
+    hoverColor?: string;
+    focusColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function RingProgress({ rings, size, thickness, gap, duration, stagger, startAngle, gradient, showLegend, centerLabel, formatValue, colors, trackOpacity, textColor, mutedColor, hoverColor, focusColor, fontFamily, className, style }: RingProgressProps): import("react").JSX.Element;

package/dist/RingProgress.js

@@ -0,0 +1,180 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useState } from "react";
+const STYLE_ID = "bl-ring-progress";
+const CSS = `
+.bl-ring { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; max-width: 100%; color: var(--bl-ink); font-family: var(--bl-font); }
+.bl-ring__figure { position: relative; flex: 0 0 auto; width: var(--bl-size); max-width: 100%; aspect-ratio: 1; }
+.bl-ring__figure svg { display: block; width: 100%; height: 100%; overflow: visible; }
+.bl-ring__arc { fill: none; stroke-linecap: round; transition: stroke-dashoffset var(--bl-dur) cubic-bezier(.2,.9,.25,1) var(--bl-delay), opacity 200ms; }
+.bl-ring__track { fill: none; transition: opacity 200ms; }
+/* A zero-length arc would still draw its round caps as a dot, so hide it. */
+.bl-ring .bl-ring__arc[data-empty] { opacity: 0; }
+.bl-ring__hit { fill: none; stroke: transparent; cursor: default; pointer-events: stroke; }
+.bl-ring[data-focus] .bl-ring__layer:not([data-focused]) .bl-ring__arc, .bl-ring[data-focus] .bl-ring__layer:not([data-focused]) .bl-ring__track { opacity: 0.3; }
+.bl-ring__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
+.bl-ring__value { font-size: var(--bl-value-size); font-weight: 700; line-height: 1.05; }
+.bl-ring__label { margin-top: 4px; color: var(--bl-muted); font-size: 12px; }
+.bl-ring__legend { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
+.bl-ring__item { display: grid; grid-template-columns: 14px auto auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; outline: none; cursor: default; }
+.bl-ring__item:hover, .bl-ring__item:focus-visible, .bl-ring__item[data-focused] { background: var(--bl-hover); }
+.bl-ring__item:focus-visible { box-shadow: inset 0 0 0 2px var(--bl-focus); }
+.bl-ring__key { width: 14px; height: 4px; border-radius: 2px; }
+.bl-ring__name { color: var(--bl-muted); font-size: 13px; }
+.bl-ring__num { justify-self: end; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
+@media (prefers-reduced-motion: reduce) { .bl-ring__arc { transition: opacity 200ms; } }
+`;
+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 DEFAULT_COLORS = ["#3987e5", "#d95926", "#199e70"];
+const percent = (ring) => Math.max(0, Math.min(1, ring.value / (ring.max || 100)));
+const defaultFormat = (ring) => `${Math.round(percent(ring) * 100)}%`;
+function RingProgress({
+  rings = [{ value: 72, label: "Progress" }],
+  size = 180,
+  thickness = 14,
+  gap = 6,
+  duration = 1100,
+  stagger = 120,
+  startAngle = 0,
+  gradient = true,
+  showLegend,
+  centerLabel,
+  formatValue = defaultFormat,
+  colors = DEFAULT_COLORS,
+  trackOpacity = 0.18,
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  hoverColor = "rgba(255,255,255,0.06)",
+  focusColor = "#73eff7",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [drawn, setDrawn] = useState(false);
+  const [focus, setFocus] = useState(null);
+  const legend = showLegend ?? rings.length > 1;
+  useEffect(() => {
+    const timer = setTimeout(() => setDrawn(true), 30);
+    return () => clearTimeout(timer);
+  }, []);
+  const view = 100;
+  const center = view / 2;
+  const unit = view / size;
+  const stroke = thickness * unit;
+  const step = (thickness + gap) * unit;
+  const shown = focus ?? 0;
+  const primary = rings[shown];
+  const inner = size - 2 * rings.length * (thickness + gap) + 2 * gap;
+  const centerText = primary ? String(formatValue(primary)) : "";
+  const valueSize = Math.max(12, Math.min(Math.round(size * 0.17), Math.floor(inner * 0.78 / Math.max(2, centerText.length * 0.62))));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-ring ${className}`,
+      "data-focus": focus !== null || void 0,
+      style: {
+        "--bl-size": `${size}px`,
+        "--bl-dur": `${duration}ms`,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-hover": hoverColor,
+        "--bl-focus": focusColor,
+        "--bl-font": fontFamily,
+        "--bl-value-size": `${valueSize}px`,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "bl-ring__figure", children: [
+          /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${view} ${view}`, "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("defs", { children: rings.map((ring, i) => {
+              const c = ring.color ?? colors[i % colors.length];
+              return /* @__PURE__ */ jsxs("linearGradient", { id: `${uid}-g${i}`, x1: "0", y1: "0", x2: "1", y2: "1", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0", style: { stopColor: `color-mix(in srgb, ${c} 70%, white)` } }),
+                /* @__PURE__ */ jsx("stop", { offset: "1", style: { stopColor: c } })
+              ] }, i);
+            }) }),
+            rings.map((ring, i) => {
+              const c = ring.color ?? colors[i % colors.length];
+              const r = center - stroke / 2 - i * step;
+              if (r <= stroke / 2) return null;
+              const circumference = 2 * Math.PI * r;
+              const fraction = drawn ? percent(ring) : 0;
+              const transform = `rotate(${startAngle - 90} ${center} ${center})`;
+              return /* @__PURE__ */ jsxs("g", { className: "bl-ring__layer", "data-focused": focus === i || void 0, onPointerEnter: () => setFocus(i), onPointerLeave: () => setFocus(null), children: [
+                /* @__PURE__ */ jsx("circle", { className: "bl-ring__track", cx: center, cy: center, r, stroke: c, strokeOpacity: trackOpacity, strokeWidth: stroke }),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "bl-ring__arc",
+                    cx: center,
+                    cy: center,
+                    r,
+                    stroke: gradient ? `url(#${uid}-g${i})` : c,
+                    strokeWidth: stroke,
+                    strokeDasharray: circumference,
+                    strokeDashoffset: circumference * (1 - fraction),
+                    transform,
+                    "data-empty": fraction === 0 || void 0,
+                    style: { "--bl-delay": `${i * stagger}ms` }
+                  }
+                ),
+                /* @__PURE__ */ jsx("circle", { className: "bl-ring__hit", cx: center, cy: center, r, strokeWidth: step })
+              ] }, i);
+            })
+          ] }),
+          primary && /* @__PURE__ */ jsxs("div", { className: "bl-ring__center", children: [
+            /* @__PURE__ */ jsx("div", { className: "bl-ring__value", children: formatValue(primary) }),
+            /* @__PURE__ */ jsx("div", { className: "bl-ring__label", children: focus === null && centerLabel !== void 0 ? centerLabel : primary.label })
+          ] })
+        ] }),
+        legend ? /* @__PURE__ */ jsx("ul", { className: "bl-ring__legend", children: rings.map((ring, i) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "bl-ring__item",
+            tabIndex: 0,
+            role: "meter",
+            "aria-label": ring.label ?? `Ring ${i + 1}`,
+            "aria-valuemin": 0,
+            "aria-valuemax": ring.max || 100,
+            "aria-valuenow": ring.value,
+            "aria-valuetext": formatValue(ring),
+            "data-focused": focus === i || void 0,
+            onPointerEnter: () => setFocus(i),
+            onPointerLeave: () => setFocus(null),
+            onFocus: () => setFocus(i),
+            onBlur: () => setFocus(null),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "bl-ring__key", style: { background: ring.color ?? colors[i % colors.length] }, "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "bl-ring__name", children: ring.label ?? `Ring ${i + 1}` }),
+              /* @__PURE__ */ jsx("span", { className: "bl-ring__num", children: formatValue(ring) })
+            ]
+          },
+          i
+        )) }) : primary && /* @__PURE__ */ jsx(
+          "span",
+          {
+            role: "meter",
+            "aria-label": primary.label ?? "Progress",
+            "aria-valuemin": 0,
+            "aria-valuemax": primary.max || 100,
+            "aria-valuenow": primary.value,
+            "aria-valuetext": formatValue(primary),
+            style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  RingProgress as default
+};

package/dist/RollingNumber.d.ts

@@ -0,0 +1,28 @@
+import { type CSSProperties } from 'react';
+export interface RollingNumberProps {
+    /** The number to show. Changes roll each digit to its new place. */
+    value?: number;
+    /** Start here and roll to `value` when the number scrolls into view. */
+    from?: number;
+    /** BCP 47 locale for formatting (defaults to the browser's). */
+    locale?: string | string[];
+    /** Any Intl.NumberFormat options: currency, percent, compact, fraction digits… */
+    format?: Intl.NumberFormatOptions;
+    prefix?: string;
+    suffix?: string;
+    /** Roll length, in ms. */
+    duration?: number;
+    /** Delay added per digit from the left, in ms. */
+    stagger?: number;
+    /** With `from`, wait until visible before rolling. */
+    startOnView?: boolean;
+    /** Announce changes politely to screen readers. */
+    announce?: boolean;
+    /** Digit cell height, in em. */
+    lineHeight?: number;
+    /** Digit color (defaults to the inherited text color). */
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function RollingNumber({ value, from, locale, format, prefix, suffix, duration, stagger, startOnView, announce, lineHeight, color, className, style }: RollingNumberProps): import("react").JSX.Element;

package/dist/RollingNumber.js

@@ -0,0 +1,108 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useMemo, useRef, useState } from "react";
+const STYLE_ID = "bl-rolling-number";
+const CSS = `
+.bl-rn { position: relative; display: inline-flex; align-items: baseline; color: var(--bl-ink); font-variant-numeric: tabular-nums; line-height: var(--bl-lh); white-space: nowrap; }
+.bl-rn__col { position: relative; display: inline-block; height: calc(var(--bl-lh) * 1em); overflow: hidden; }
+.bl-rn__strip { display: flex; flex-direction: column; transform: translateY(calc(var(--bl-digit) * -10%)); transition: transform var(--bl-dur) var(--bl-ease) var(--bl-delay); }
+.bl-rn__strip > span { display: block; height: calc(var(--bl-lh) * 1em); text-align: center; }
+.bl-rn__sym { display: inline-block; }
+.bl-rn__col[data-enter], .bl-rn__sym[data-enter] { animation: bl-rn-in var(--bl-dur) var(--bl-ease); }
+.bl-rn__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-rn-in { from { opacity: 0; transform: translateY(40%); } }
+@media (prefers-reduced-motion: reduce) { .bl-rn__strip { transition: none; } .bl-rn__col[data-enter], .bl-rn__sym[data-enter] { 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 DIGITS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+function tokenize(text) {
+  const chars = [...text];
+  let digitIndex = 0;
+  let symbolIndex = 0;
+  const tokens = [];
+  for (let i = chars.length - 1; i >= 0; i--) {
+    const char = chars[i];
+    if (char >= "0" && char <= "9") tokens.unshift({ key: `d${digitIndex++}`, digit: Number(char), char });
+    else tokens.unshift({ key: `s${symbolIndex++}-${char}`, char });
+  }
+  return tokens;
+}
+function RollingNumber({
+  value = 0,
+  from,
+  locale,
+  format,
+  prefix = "",
+  suffix = "",
+  duration = 900,
+  stagger = 40,
+  startOnView = true,
+  announce = false,
+  lineHeight = 1.1,
+  color,
+  className = "",
+  style
+}) {
+  useStyles();
+  const ref = useRef(null);
+  const [shown, setShown] = useState(from ?? value);
+  const [started, setStarted] = useState(!startOnView || from === void 0);
+  const mounted = useRef(false);
+  useEffect(() => {
+    if (started) return void 0;
+    const node = ref.current;
+    if (!node || typeof IntersectionObserver === "undefined") {
+      setStarted(true);
+      return void 0;
+    }
+    const observer = new IntersectionObserver(([entry]) => entry.isIntersecting && setStarted(true), { threshold: 0.3 });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [started]);
+  useEffect(() => {
+    if (!started) return void 0;
+    const timer = setTimeout(() => setShown(value), mounted.current ? 0 : 30);
+    mounted.current = true;
+    return () => clearTimeout(timer);
+  }, [value, started]);
+  const formatter = useMemo(() => new Intl.NumberFormat(locale, format), [locale, JSON.stringify(format)]);
+  const text = `${prefix}${formatter.format(shown)}${suffix}`;
+  const tokens = tokenize(text);
+  const known = useRef(/* @__PURE__ */ new Set());
+  const rendered = tokens.map((token) => {
+    const entering = mounted.current && !known.current.has(token.key);
+    return { ...token, entering };
+  });
+  useEffect(() => {
+    known.current = new Set(tokens.map((token) => token.key));
+  });
+  let digitOrder = 0;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: `bl-rn ${className}`,
+      style: { "--bl-lh": lineHeight, "--bl-dur": `${duration}ms`, "--bl-ease": "cubic-bezier(.2,.9,.25,1)", ...color ? { "--bl-ink": color } : { "--bl-ink": "currentColor" }, ...style },
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { display: "inline-flex", alignItems: "baseline" }, children: rendered.map((token) => {
+          if (token.digit === void 0) {
+            return /* @__PURE__ */ jsx("span", { className: "bl-rn__sym", "data-enter": token.entering || void 0, children: token.char }, token.key);
+          }
+          const delay = digitOrder++ * stagger;
+          return /* @__PURE__ */ jsx("span", { className: "bl-rn__col", "data-enter": token.entering || void 0, children: /* @__PURE__ */ jsx("span", { className: "bl-rn__strip", style: { "--bl-digit": token.digit, "--bl-delay": `${delay}ms` }, children: DIGITS.map((d) => /* @__PURE__ */ jsx("span", { children: d }, d)) }) }, token.key);
+        }) }),
+        /* @__PURE__ */ jsx("span", { className: "bl-rn__sr", "aria-live": announce ? "polite" : void 0, children: `${prefix}${formatter.format(value)}${suffix}` })
+      ]
+    }
+  );
+}
+export {
+  RollingNumber as default
+};

package/dist/ScanScope.d.ts

@@ -0,0 +1,24 @@
+import { type CSSProperties } from 'react';
+export interface ScanScopeProps {
+    /** A rotating sweep over range rings, or a bar scanning down. */
+    mode?: 'radar' | 'line';
+    /** A count to scatter, or positions in 0–1 of the area. */
+    blips?: number | {
+        x: number;
+        y: number;
+    }[];
+    /** Seconds per sweep. */
+    period?: number;
+    /** Length of the fading wake (share of a turn, or of the height). */
+    trail?: number;
+    rings?: number;
+    gridSize?: number;
+    pixelSize?: number;
+    color?: string;
+    blipColor?: string;
+    gridColor?: string;
+    backgroundColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ScanScope({ mode, blips, period, trail, rings, gridSize, pixelSize, color, blipColor, gridColor, backgroundColor, className, style }: ScanScopeProps): import("react").JSX.Element;

package/dist/ScanScope.js

@@ -0,0 +1,164 @@
+'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 rgba = ([r, g, b], a) => `rgba(${r},${g},${b},${a})`;
+function ScanScope({
+  mode = "radar",
+  blips = 9,
+  period = 4,
+  trail = 0.22,
+  rings = 4,
+  gridSize = 28,
+  pixelSize = 2,
+  color = "#38b764",
+  blipColor = "#ffcd75",
+  gridColor = "#262b44",
+  backgroundColor = "#0b0b14",
+  className = "",
+  style
+}) {
+  const canvasRef = useRef(null);
+  const blipKey = Array.isArray(blips) ? blips.map((b) => `${b.x},${b.y}`).join(";") : String(blips);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const beam = hexToRgb(color);
+    const dot = hexToRgb(blipColor);
+    const grid = hexToRgb(gridColor);
+    const points = (Array.isArray(blips) ? blips : Array.from({ length: blips }, (_, i) => ({ x: 0.15 + (Math.sin(i * 91.7) * 0.5 + 0.5) * 0.7, y: 0.15 + (Math.sin(i * 37.3 + 2) * 0.5 + 0.5) * 0.7 }))).map((p) => ({ ...p, litAt: -1e9 }));
+    let W = 0;
+    let H = 0;
+    let dpr = 1;
+    let t = 0;
+    let raf = 0;
+    let last = 0;
+    let visible = true;
+    let prevSweep = 0;
+    const fit = () => {
+      dpr = 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 snap = (v) => Math.round(v / pixelSize) * pixelSize;
+    const drawGrid = (cx, cy, radius) => {
+      ctx.fillStyle = rgba(grid, 1);
+      for (let x = snap(W % gridSize / 2); x < W; x += gridSize) for (let y = 0; y < H; y += pixelSize * 2) ctx.fillRect(x, y, 1, pixelSize);
+      for (let y = snap(H % gridSize / 2); y < H; y += gridSize) for (let x = 0; x < W; x += pixelSize * 2) ctx.fillRect(x, y, pixelSize, 1);
+      if (mode !== "radar") return;
+      ctx.fillStyle = rgba(beam, 0.35);
+      for (let r = 1; r <= rings; r++) {
+        const rr = radius * r / rings;
+        const steps = Math.ceil(rr * Math.PI * 2 / (pixelSize * 2));
+        for (let k = 0; k < steps; k++) {
+          const a = k / steps * Math.PI * 2;
+          ctx.fillRect(snap(cx + Math.cos(a) * rr), snap(cy + Math.sin(a) * rr), pixelSize, pixelSize);
+        }
+      }
+    };
+    const draw = (now) => {
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.fillStyle = backgroundColor;
+      ctx.fillRect(0, 0, W, H);
+      const cx = W / 2;
+      const cy = H / 2;
+      const radius = Math.min(W, H) * 0.46;
+      drawGrid(cx, cy, radius);
+      const turn = t / period % 1;
+      if (!reduced) {
+        if (mode === "radar") {
+          const slices = 28;
+          for (let s = 0; s < slices; s++) {
+            const a0 = (turn - trail * (s + 1) / slices) * Math.PI * 2;
+            const a1 = (turn - trail * s / slices) * Math.PI * 2;
+            ctx.fillStyle = rgba(beam, 0.35 * (1 - s / slices) ** 2);
+            ctx.beginPath();
+            ctx.moveTo(cx, cy);
+            ctx.arc(cx, cy, radius, a0, a1);
+            ctx.closePath();
+            ctx.fill();
+          }
+        } else {
+          const y = turn * H;
+          const glow = ctx.createLinearGradient(0, y - H * trail, 0, y);
+          glow.addColorStop(0, rgba(beam, 0));
+          glow.addColorStop(1, rgba(beam, 0.35));
+          ctx.fillStyle = glow;
+          ctx.fillRect(0, y - H * trail, W, H * trail);
+          ctx.fillStyle = rgba(beam, 0.9);
+          ctx.fillRect(0, snap(y), W, pixelSize);
+        }
+      }
+      points.forEach((p) => {
+        const x = mode === "radar" ? cx + (p.x - 0.5) * radius * 2 : p.x * W;
+        const y = mode === "radar" ? cy + (p.y - 0.5) * radius * 2 : p.y * H;
+        if (mode === "radar" && Math.hypot(x - cx, y - cy) > radius) return;
+        const age = reduced ? 0 : (now - p.litAt) / (period * 1e3);
+        if (age >= 1) return;
+        const a = 1 - age;
+        const s = pixelSize * 3;
+        ctx.fillStyle = rgba(dot, a);
+        ctx.fillRect(snap(x) - s / 2, snap(y) - s / 2, s, s);
+        if (age < 0.25 && !reduced) {
+          const rr = 4 + age / 0.25 * 18;
+          ctx.fillStyle = rgba(dot, (1 - age / 0.25) * 0.8);
+          const steps = 16;
+          for (let k = 0; k < steps; k++) {
+            const ang = k / steps * Math.PI * 2;
+            ctx.fillRect(snap(x + Math.cos(ang) * rr), snap(y + Math.sin(ang) * rr), pixelSize, pixelSize);
+          }
+        }
+      });
+    };
+    const tick = (now) => {
+      t += Math.max(0, Math.min(0.05, (now - last) / 1e3));
+      last = now;
+      const turn = t / period % 1;
+      points.forEach((p) => {
+        let at;
+        if (mode === "radar") at = (Math.atan2(p.y - 0.5, p.x - 0.5) / (Math.PI * 2) + 1) % 1;
+        else at = p.y;
+        const crossed = prevSweep <= turn ? at > prevSweep && at <= turn : at > prevSweep || at <= turn;
+        if (crossed) p.litAt = now;
+      });
+      prevSweep = turn;
+      draw(now);
+      raf = visible && !document.hidden ? requestAnimationFrame(tick) : 0;
+    };
+    const start = () => {
+      if (raf || reduced || !visible || document.hidden) return;
+      last = performance.now();
+      raf = requestAnimationFrame(tick);
+    };
+    const resize = new ResizeObserver(() => {
+      fit();
+      draw(performance.now());
+    });
+    resize.observe(canvas);
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      start();
+    });
+    observer.observe(canvas);
+    document.addEventListener("visibilitychange", start);
+    fit();
+    draw(performance.now());
+    start();
+    return () => {
+      cancelAnimationFrame(raf);
+      resize.disconnect();
+      observer.disconnect();
+      document.removeEventListener("visibilitychange", start);
+    };
+  }, [mode, blipKey, period, trail, rings, gridSize, pixelSize, color, blipColor, gridColor, backgroundColor]);
+  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, "aria-hidden": "true", className, style: { display: "block", width: "100%", height: "100%", background: backgroundColor, ...style } });
+}
+export {
+  ScanScope as default
+};

package/dist/ScoreTicker.d.ts

@@ -0,0 +1,32 @@
+import { type CSSProperties } from 'react';
+export interface ScoreTickerProps {
+    /** The score; drums roll forward to it, decreases roll back. */
+    value?: number;
+    /** Zero-padded width; caps at all nines. */
+    digits?: number;
+    label?: string;
+    /** Shows HI, and beating it flashes NEW HIGH SCORE. */
+    highScore?: number;
+    /** Above 1, gain popups add "×N COMBO". */
+    combo?: number;
+    showPopups?: boolean;
+    /** Smallest gain that shakes the panel. */
+    shakeAt?: number;
+    /** Roll time in ms. */
+    duration?: number;
+    /** Digit size in px. */
+    size?: number;
+    textColor?: string;
+    dimColor?: string;
+    mutedColor?: string;
+    panelColor?: string;
+    edgeColor?: string;
+    drumColor?: string;
+    accentColor?: string;
+    comboColor?: string;
+    highColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ScoreTicker({ value, digits, label, highScore, combo, showPopups, shakeAt, duration, size, textColor, dimColor, mutedColor, panelColor, edgeColor, drumColor, accentColor, comboColor, highColor, fontFamily, className, style }: ScoreTickerProps): import("react").JSX.Element;