bits-lab 0.0.0-stage → 0.1.0

package/dist/Footprints.js

@@ -0,0 +1,126 @@
+'use client';
+import { jsx, jsxs } 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 FOOT = [".XXX.", "XXXXX", "XXXXX", ".XXXX", ".XXX.", ".....", ".XXX.", ".XXX."];
+function footSprite(rgb, cell) {
+  const c = document.createElement("canvas");
+  c.width = 5 * cell;
+  c.height = 8 * cell;
+  const g = c.getContext("2d");
+  g.fillStyle = `rgb(${rgb.join(",")})`;
+  FOOT.forEach((row, y) => [...row].forEach((ch, x) => ch === "X" && g.fillRect(x * cell, y * cell, cell, cell)));
+  return c;
+}
+function Footprints({
+  children,
+  stamps = "feet",
+  stride = 34,
+  size = 22,
+  life = 1600,
+  spread = 9,
+  jitter = 8,
+  max = 60,
+  color = "#94b0c2",
+  className = "",
+  style
+}) {
+  const rootRef = useRef(null);
+  const canvasRef = useRef(null);
+  const stampKey = Array.isArray(stamps) ? stamps.join("|") : stamps;
+  useEffect(() => {
+    const root = rootRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const feet = stampKey === "feet";
+    const sprites = feet ? [footSprite(hexToRgb(color), 4)] : stampKey.split("|").map((src) => Object.assign(new Image(), { src }));
+    const prints = [];
+    let W = 0;
+    let H = 0;
+    let dpr = 1;
+    let last = null;
+    let count = 0;
+    let raf = 0;
+    const fit = () => {
+      dpr = Math.min(2, window.devicePixelRatio || 1);
+      W = root.clientWidth;
+      H = root.clientHeight;
+      canvas.width = Math.round(W * dpr);
+      canvas.height = Math.round(H * dpr);
+    };
+    const tick = (now) => {
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, W, H);
+      ctx.imageSmoothingEnabled = false;
+      for (let i = prints.length - 1; i >= 0; i--) {
+        const p = prints[i];
+        const age = (now - p.at) / life;
+        if (age >= 1) {
+          prints.splice(i, 1);
+          continue;
+        }
+        const pop = reduced ? 1 : age < 0.12 ? 0.6 + age / 0.12 * 0.55 : 1.15 - Math.min(0.15, (age - 0.12) * 0.6);
+        const scale = pop * (1 - age * 0.35);
+        const img = p.sprite;
+        if (!img.width) continue;
+        const w = size * scale;
+        const h = img.height / img.width * w;
+        ctx.save();
+        ctx.globalAlpha = Math.min(1, (1 - age) * 1.4);
+        ctx.translate(p.x, p.y);
+        ctx.rotate(p.angle);
+        ctx.drawImage(img, -w / 2, -h / 2, w, h);
+        ctx.restore();
+      }
+      raf = prints.length ? requestAnimationFrame(tick) : 0;
+    };
+    const onMove = (event) => {
+      const r = root.getBoundingClientRect();
+      const x = event.clientX - r.left;
+      const y = event.clientY - r.top;
+      if (!last) {
+        last = { x, y };
+        return;
+      }
+      const dx = x - last.x;
+      const dy = y - last.y;
+      const d = Math.hypot(dx, dy);
+      if (d < stride) return;
+      const heading = Math.atan2(dy, dx);
+      const side = feet ? count % 2 ? 1 : -1 : 0;
+      const nx = -Math.sin(heading) * spread * side;
+      const ny = Math.cos(heading) * spread * side;
+      const turn = feet ? heading + Math.PI / 2 : (Math.random() - 0.5) * jitter * Math.PI / 180;
+      prints.push({ x: x + nx, y: y + ny, angle: turn, at: performance.now(), sprite: sprites[count % sprites.length] });
+      if (prints.length > max) prints.shift();
+      count += 1;
+      last = { x, y };
+      if (!raf) raf = requestAnimationFrame(tick);
+    };
+    const onLeave = () => {
+      last = null;
+    };
+    fit();
+    const resize = new ResizeObserver(fit);
+    resize.observe(root);
+    root.addEventListener("pointermove", onMove, { passive: true });
+    root.addEventListener("pointerleave", onLeave);
+    return () => {
+      cancelAnimationFrame(raf);
+      resize.disconnect();
+      root.removeEventListener("pointermove", onMove);
+      root.removeEventListener("pointerleave", onLeave);
+    };
+  }, [stampKey, stride, size, life, spread, jitter, max, color]);
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className, style: { position: "relative", touchAction: "pan-y", ...style }, children: [
+    children,
+    /* @__PURE__ */ jsx("canvas", { ref: canvasRef, "aria-hidden": "true", style: { position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" } })
+  ] });
+}
+export {
+  Footprints as default
+};

package/dist/FunnelFlow.d.ts

@@ -0,0 +1,34 @@
+import { type CSSProperties } from 'react';
+export interface FunnelStage {
+    label: string;
+    value: number;
+}
+export interface FunnelFlowProps {
+    /** Top of the funnel first; bar heights scale to the first stage. */
+    stages?: FunnelStage[];
+    height?: number;
+    barWidth?: number;
+    particles?: boolean;
+    /** Dots per second entering the first band. */
+    rate?: number;
+    particleSize?: number;
+    /** Number and percent formatting. */
+    locale?: string;
+    /** Accessible name and table caption. */
+    label?: string;
+    barColor?: string;
+    activeColor?: string;
+    bandColor?: string;
+    bandActiveColor?: string;
+    particleColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    chipColor?: string;
+    tooltipColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function FunnelFlow({ stages, height, barWidth, particles, rate, particleSize, locale, label, barColor, activeColor, bandColor, bandActiveColor, particleColor, textColor, mutedColor, chipColor, tooltipColor, lineColor, accentColor, fontFamily, className, style }: FunnelFlowProps): import("react").JSX.Element;

package/dist/FunnelFlow.js

@@ -0,0 +1,267 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-funnel-flow";
+const CSS = `
+.bl-funnel { position: relative; width: 100%; font-family: var(--bl-font); color: var(--bl-ink); }
+.bl-funnel:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 4px; border-radius: 8px; }
+.bl-funnel__svg { display: block; width: 100%; overflow: visible; }
+.bl-funnel__bar { fill: var(--bl-bar); transition: fill 150ms; }
+.bl-funnel__band { fill: var(--bl-band); transition: fill 150ms; }
+.bl-funnel__stage[data-active] .bl-funnel__bar { fill: var(--bl-bar-active); }
+.bl-funnel__stage[data-active] + .bl-funnel__band, .bl-funnel__band[data-active] { fill: var(--bl-band-active); }
+.bl-funnel__hit { fill: transparent; cursor: default; }
+.bl-funnel__label { fill: var(--bl-muted); font-size: 12px; }
+.bl-funnel__value { fill: var(--bl-ink); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
+.bl-funnel__rate { fill: var(--bl-ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.bl-funnel__chip { fill: var(--bl-chip); }
+.bl-funnel__dot { fill: var(--bl-particle); }
+.bl-funnel__tip { position: absolute; z-index: 2; top: 0; left: 0; min-width: 140px; padding: 8px 10px; border-radius: 8px; background: var(--bl-tip); color: var(--bl-ink); font-size: 13px; line-height: 1.45; box-shadow: 0 0 0 1px var(--bl-line), 0 10px 24px -10px rgba(0,0,0,0.8); pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); }
+.bl-funnel__tip strong { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
+.bl-funnel__tip span { color: var(--bl-muted); }
+.bl-funnel__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+`;
+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 FunnelFlow({
+  stages = [],
+  height = 280,
+  barWidth = 18,
+  particles = true,
+  rate = 40,
+  particleSize = 3,
+  locale = "en-US",
+  label = "Conversion funnel",
+  barColor = "#3b5dc9",
+  activeColor = "#73eff7",
+  bandColor = "rgba(59,93,201,0.22)",
+  bandActiveColor = "rgba(115,239,247,0.22)",
+  particleColor = "#a5c8ff",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  chipColor = "#1a1c2c",
+  tooltipColor = "#262b44",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const dotsRef = useRef(null);
+  const [width, setWidth] = useState(640);
+  const [active, setActive] = useState(-1);
+  const count = new Intl.NumberFormat(locale);
+  const pct = new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 1 });
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    const measure = () => setWidth(Math.max(240, root.clientWidth));
+    measure();
+    const resize = new ResizeObserver(measure);
+    resize.observe(root);
+    return () => resize.disconnect();
+  }, []);
+  const top = 46;
+  const plot = height - top - 8;
+  const mid = top + plot / 2;
+  const max = Math.max(1, ...stages.map((s) => s.value));
+  const n = stages.length;
+  const pad = barWidth / 2 + 4;
+  const step = n > 1 ? (width - pad * 2) / (n - 1) : 0;
+  const geo = stages.map((s, i) => {
+    const h = Math.max(2, s.value / max * plot);
+    return { x: n > 1 ? pad + i * step : width / 2, h, y0: mid - h / 2, y1: mid + h / 2 };
+  });
+  const conv = (i) => stages[i].value ? stages[i + 1].value / stages[i].value : 0;
+  const geoRef = useRef(geo);
+  geoRef.current = geo;
+  useEffect(() => {
+    const layer = dotsRef.current;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (!particles || reduced || n < 2 || !layer) return void 0;
+    const ns = "http://www.w3.org/2000/svg";
+    const live = [];
+    let visible = true;
+    let raf = 0;
+    let last = 0;
+    let carry = 0;
+    const speed = 0.55;
+    const spawn = () => {
+      const node = document.createElementNS(ns, "circle");
+      node.setAttribute("r", String(particleSize));
+      node.setAttribute("class", "bl-funnel__dot");
+      layer.appendChild(node);
+      live.push({ node, band: 0, t: 0, lane: Math.random() - 0.5, drop: null });
+    };
+    const decide = (p) => {
+      p.drop = Math.random() > conv(p.band) ? { at: 0.25 + Math.random() * 0.5, vy: 0, dy: 0 } : null;
+    };
+    const tick = (now) => {
+      const dt = Math.max(0, Math.min(0.05, (now - last) / 1e3));
+      last = now;
+      carry += rate * dt;
+      while (carry >= 1) {
+        carry -= 1;
+        spawn();
+        decide(live[live.length - 1]);
+      }
+      const g = geoRef.current;
+      for (let i = live.length - 1; i >= 0; i--) {
+        const p = live[i];
+        p.t += speed * dt * (p.drop && p.t > p.drop.at ? 0.4 : 1);
+        if (p.t >= 1 && !(p.drop && p.t > p.drop.at)) {
+          p.band += 1;
+          p.t -= 1;
+          if (p.band >= n - 1) {
+            p.node.remove();
+            live.splice(i, 1);
+            continue;
+          }
+          decide(p);
+        }
+        const a = g[p.band];
+        const b = g[p.band + 1];
+        const e = p.t * p.t * (3 - 2 * p.t);
+        const x = a.x + (b.x - a.x) * Math.min(1, p.t);
+        const halfH = (a.h + (b.h - a.h) * e) / 2;
+        let y = mid + p.lane * halfH * 1.8 * 0.95;
+        let opacity = 0.9;
+        if (p.drop && p.t > p.drop.at) {
+          p.drop.vy += 520 * dt;
+          p.drop.dy += p.drop.vy * dt;
+          y += p.drop.dy;
+          opacity = Math.max(0, 0.9 - p.drop.dy / 90);
+          if (opacity <= 0) {
+            p.node.remove();
+            live.splice(i, 1);
+            continue;
+          }
+        }
+        p.node.setAttribute("cx", x.toFixed(1));
+        p.node.setAttribute("cy", y.toFixed(1));
+        p.node.setAttribute("opacity", opacity.toFixed(2));
+      }
+      raf = requestAnimationFrame(tick);
+    };
+    const start = () => {
+      if (raf || !visible || document.hidden) return;
+      last = performance.now();
+      raf = requestAnimationFrame(tick);
+    };
+    const stop = () => {
+      cancelAnimationFrame(raf);
+      raf = 0;
+    };
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible) start();
+      else stop();
+    });
+    observer.observe(layer.ownerSVGElement);
+    const onVisibility = () => document.hidden ? stop() : start();
+    document.addEventListener("visibilitychange", onVisibility);
+    start();
+    return () => {
+      stop();
+      observer.disconnect();
+      document.removeEventListener("visibilitychange", onVisibility);
+      live.forEach((p) => p.node.remove());
+    };
+  }, [particles, rate, particleSize, n, stages.map((s) => s.value).join(), height, width]);
+  const onKey = (event) => {
+    if (!n) return;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      event.preventDefault();
+      setActive((a) => Math.min(n - 1, a + 1));
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      event.preventDefault();
+      setActive((a) => Math.max(0, a < 0 ? 0 : a - 1));
+    } else if (event.key === "Home") setActive(0);
+    else if (event.key === "End") setActive(n - 1);
+    else if (event.key === "Escape") setActive(-1);
+  };
+  const describe = (i) => `${stages[i].label}: ${count.format(stages[i].value)}${i ? `, ${pct.format(conv(i - 1))} of ${stages[i - 1].label}, ${pct.format(stages[0].value ? stages[i].value / stages[0].value : 0)} of ${stages[0].label}` : ""}`;
+  const summary = n > 1 ? `${label}. ${n} stages from ${count.format(stages[0].value)} ${stages[0].label} to ${count.format(stages[n - 1].value)} ${stages[n - 1].label}, ${pct.format(stages[0].value ? stages[n - 1].value / stages[0].value : 0)} overall.` : label;
+  const tip = active >= 0 ? geo[active] : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: `bl-funnel ${className}`,
+      tabIndex: 0,
+      role: "group",
+      "aria-label": `${summary} Use the arrow keys to read each stage.`,
+      onKeyDown: onKey,
+      onBlur: () => setActive(-1),
+      style: { "--bl-bar": barColor, "--bl-bar-active": activeColor, "--bl-band": bandColor, "--bl-band-active": bandActiveColor, "--bl-particle": particleColor, "--bl-ink": textColor, "--bl-muted": mutedColor, "--bl-chip": chipColor, "--bl-tip": tooltipColor, "--bl-line": lineColor, "--bl-accent": accentColor, "--bl-font": fontFamily, ...style },
+      children: [
+        /* @__PURE__ */ jsxs("svg", { className: "bl-funnel__svg", width, height, viewBox: `0 0 ${width} ${height}`, "aria-hidden": "true", onPointerLeave: () => setActive(-1), children: [
+          geo.map((g, i) => /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsxs("g", { className: "bl-funnel__stage", "data-active": active === i || void 0, onPointerEnter: () => setActive(i), children: [
+              /* @__PURE__ */ jsx("rect", { className: "bl-funnel__hit", x: g.x - Math.max(barWidth, step / 2) / 2, y: 0, width: Math.max(barWidth, step / 2), height }),
+              /* @__PURE__ */ jsx("rect", { className: "bl-funnel__bar", x: g.x - barWidth / 2, y: g.y0, width: barWidth, height: g.h, rx: 4 })
+            ] }),
+            i < n - 1 && /* @__PURE__ */ jsx(
+              "path",
+              {
+                className: "bl-funnel__band",
+                "data-active": active === i + 1 || void 0,
+                d: `M${g.x + barWidth / 2} ${g.y0} C${(g.x + geo[i + 1].x) / 2} ${g.y0} ${(g.x + geo[i + 1].x) / 2} ${geo[i + 1].y0} ${geo[i + 1].x - barWidth / 2} ${geo[i + 1].y0} L${geo[i + 1].x - barWidth / 2} ${geo[i + 1].y1} C${(g.x + geo[i + 1].x) / 2} ${geo[i + 1].y1} ${(g.x + geo[i + 1].x) / 2} ${g.y1} ${g.x + barWidth / 2} ${g.y1}Z`
+              }
+            )
+          ] }, `${i}-${stages[i].label}`)),
+          /* @__PURE__ */ jsx("g", { ref: dotsRef }),
+          geo.map((g, i) => {
+            const anchor = n > 1 && i === 0 ? "start" : n > 1 && i === n - 1 ? "end" : "middle";
+            const tx = anchor === "start" ? g.x - barWidth / 2 : anchor === "end" ? g.x + barWidth / 2 : g.x;
+            return /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx("text", { className: "bl-funnel__label", x: tx, y: 14, textAnchor: anchor, children: stages[i].label }),
+              /* @__PURE__ */ jsx("text", { className: "bl-funnel__value", x: tx, y: 34, textAnchor: anchor, children: count.format(stages[i].value) })
+            ] }, `label-${i}`);
+          }),
+          geo.slice(0, -1).map((g, i) => {
+            const cx = (g.x + geo[i + 1].x) / 2;
+            return /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx("rect", { className: "bl-funnel__chip", x: cx - 26, y: mid - 11, width: 52, height: 22, rx: 11 }),
+              /* @__PURE__ */ jsx("text", { className: "bl-funnel__rate", x: cx, y: mid + 4, textAnchor: "middle", children: pct.format(conv(i)) })
+            ] }, `rate-${i}`);
+          })
+        ] }),
+        tip && /* @__PURE__ */ jsxs("div", { className: "bl-funnel__tip", style: { left: Math.min(width - 70, Math.max(70, tip.x)), top: Math.max(56, tip.y0) }, children: [
+          /* @__PURE__ */ jsx("span", { children: stages[active].label }),
+          /* @__PURE__ */ jsx("strong", { children: count.format(stages[active].value) }),
+          active > 0 && /* @__PURE__ */ jsxs("span", { children: [
+            pct.format(conv(active - 1)),
+            " of previous \xB7 ",
+            pct.format(stages[0].value ? stages[active].value / stages[0].value : 0),
+            " of total"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "bl-funnel__sr", "aria-live": "polite", children: active >= 0 ? describe(active) : "" }),
+        /* @__PURE__ */ jsxs("table", { className: "bl-funnel__sr", children: [
+          /* @__PURE__ */ jsx("caption", { children: label }),
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Stage" }),
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Count" }),
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "From previous" })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: stages.map((s, i) => /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "row", children: s.label }),
+            /* @__PURE__ */ jsx("td", { children: count.format(s.value) }),
+            /* @__PURE__ */ jsx("td", { children: i ? pct.format(conv(i - 1)) : "-" })
+          ] }, `${i}-${s.label}`)) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  FunnelFlow as default
+};

package/dist/GameOver.d.ts

@@ -0,0 +1,46 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface GameOverStat {
+    label: ReactNode;
+    value: number;
+}
+export interface GameOverProps {
+    title?: string;
+    subtitle?: ReactNode;
+    /** Rows that tally up one at a time. */
+    stats?: GameOverStat[];
+    totalLabel?: string;
+    /** Defaults to the sum of the stat values. */
+    total?: number;
+    /** CONTINUE? seconds; 0 turns the countdown off. */
+    countdown?: number;
+    continueLabel?: string;
+    quitLabel?: string;
+    /** Shown when the countdown reaches zero. */
+    finalMessage?: string;
+    onContinue?: () => void;
+    onQuit?: () => void;
+    onTimeout?: () => void;
+    /** Tally time per row in ms. */
+    tallyDuration?: number;
+    /** Fixed full-screen dialog (Esc quits) instead of filling the parent. */
+    fixed?: boolean;
+    /** Focus Continue once it appears; defaults to fixed. */
+    autoFocus?: boolean;
+    /** Change to play it again. */
+    replayKey?: string | number;
+    minHeight?: number;
+    titleSize?: number;
+    backgroundColor?: string;
+    titleColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    accentColor?: string;
+    lineColor?: string;
+    buttonColor?: string;
+    buttonTextColor?: string;
+    shadowColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function GameOver({ title, subtitle, stats, totalLabel, total, countdown, continueLabel, quitLabel, finalMessage, onContinue, onQuit, onTimeout, tallyDuration, fixed, autoFocus, replayKey, minHeight, titleSize, backgroundColor, titleColor, textColor, mutedColor, accentColor, lineColor, buttonColor, buttonTextColor, shadowColor, fontFamily, className, style }: GameOverProps): import("react").JSX.Element;

package/dist/GameOver.js

@@ -0,0 +1,191 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useMemo, useRef, useState } from "react";
+const STYLE_ID = "bl-game-over";
+const CSS = `
+.bl-go { position: relative; display: grid; place-content: center; justify-items: center; gap: 22px; width: 100%; height: 100%; min-height: var(--bl-min-h); padding: 28px 16px; box-sizing: border-box; overflow: hidden; background: var(--bl-bg); color: var(--bl-ink); font-family: var(--bl-font); text-align: center; }
+.bl-go[data-fixed] { position: fixed; inset: 0; z-index: 2000; min-height: 0; }
+.bl-go__title { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; color: var(--bl-title); font-size: var(--bl-title-size); font-weight: 400; line-height: 1.2; text-shadow: 0.08em 0.08em 0 var(--bl-shadow); }
+.bl-go__title span { display: inline-block; animation: bl-go-drop 520ms cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--i) * 80ms); }
+.bl-go__sub { margin: -8px 0 0; color: var(--bl-muted); font-size: 11px; line-height: 1.6; }
+.bl-go__stats { display: grid; gap: 10px; min-width: min(320px, 100%); margin: 0; font-size: 11px; }
+.bl-go__row { display: flex; justify-content: space-between; gap: 24px; animation: bl-go-in 200ms steps(2) both; }
+.bl-go__row dt { color: var(--bl-muted); }
+.bl-go__row dd { margin: 0; font-variant-numeric: tabular-nums; }
+.bl-go__row[data-total] { padding-top: 10px; border-top: 3px dotted var(--bl-line); color: var(--bl-accent); font-size: 13px; }
+.bl-go__row[data-total] dt { color: inherit; }
+.bl-go__continue { display: grid; gap: 10px; justify-items: center; min-height: 64px; font-size: 13px; }
+.bl-go__count { color: var(--bl-accent); font-size: 32px; animation: bl-go-tick 1s steps(1) both; }
+.bl-go__count[data-low] { color: var(--bl-title); }
+.bl-go__final { color: var(--bl-muted); font-size: 12px; line-height: 1.6; animation: bl-go-in 300ms steps(3) both; }
+.bl-go__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
+.bl-go__btn { padding: 12px 18px; border: 0; background: var(--bl-btn); color: var(--bl-btn-ink); font: inherit; font-size: 11px; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 0 3px var(--bl-shadow), inset -3px -3px 0 rgba(0,0,0,0.3), inset 3px 3px 0 rgba(255,255,255,0.25); }
+.bl-go__btn[data-secondary] { background: transparent; color: var(--bl-ink); box-shadow: 0 0 0 3px var(--bl-line); }
+.bl-go__btn:hover { filter: brightness(1.15); }
+.bl-go__btn:active { transform: translateY(3px); }
+.bl-go__btn:focus-visible { outline: 3px solid var(--bl-accent); outline-offset: 5px; }
+.bl-go__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-go-drop { from { opacity: 0; transform: translateY(-1.4em); } }
+@keyframes bl-go-in { from { opacity: 0; } }
+@keyframes bl-go-tick { from { transform: scale(1.5); } 30% { transform: none; } }
+@media (prefers-reduced-motion: reduce) {
+  .bl-go__title span, .bl-go__row, .bl-go__count, .bl-go__final { 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 format = (value) => Math.round(value).toLocaleString("en-US");
+function GameOver({
+  title = "GAME OVER",
+  subtitle,
+  stats = [],
+  totalLabel = "Total",
+  total,
+  countdown = 9,
+  continueLabel = "Continue",
+  quitLabel = "Quit",
+  finalMessage = "Thanks for playing!",
+  onContinue,
+  onQuit,
+  onTimeout,
+  tallyDuration = 700,
+  fixed = false,
+  autoFocus = fixed,
+  replayKey,
+  minHeight = 420,
+  titleSize = 40,
+  backgroundColor = "#0b0b14",
+  titleColor = "#b13e53",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  accentColor = "#ffcd75",
+  lineColor = "#333c57",
+  buttonColor = "#38b764",
+  buttonTextColor = "#0b0b14",
+  shadowColor = "#000000",
+  fontFamily = '"Press Start 2P", ui-monospace, monospace',
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const sum = total ?? stats.reduce((acc, row) => acc + (Number(row.value) || 0), 0);
+  const plan = useMemo(() => {
+    const titleEnd = [...title].length * 80 + 520;
+    const rows2 = [...stats.map((row) => Number(row.value) || 0), sum].map((value, i) => ({ value, start: titleEnd + i * (tallyDuration + 220) }));
+    const tallyEnd = titleEnd + rows2.length * (tallyDuration + 220);
+    return { rows: rows2, tallyEnd, end: tallyEnd + countdown * 1e3 };
+  }, [title, stats, sum, tallyDuration, countdown]);
+  const [elapsed, setElapsed] = useState(0);
+  const startRef = useRef(0);
+  useEffect(() => {
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    startRef.current = performance.now() - (reduced ? plan.tallyEnd : 0);
+    setElapsed(reduced ? plan.tallyEnd : 0);
+    let frame = 0;
+    const tick = (now) => {
+      const t = Math.min(plan.end, now - startRef.current);
+      setElapsed(t);
+      if (t < plan.end) frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [plan, replayKey]);
+  const tallied = elapsed >= plan.tallyEnd;
+  const timedOut = countdown > 0 && elapsed >= plan.end;
+  const secondsLeft = Math.max(0, countdown - Math.floor((elapsed - plan.tallyEnd) / 1e3));
+  const skipTally = () => {
+    if (!tallied) startRef.current = performance.now() - plan.tallyEnd;
+  };
+  const timeoutRef = useRef(onTimeout);
+  timeoutRef.current = onTimeout;
+  useEffect(() => {
+    if (timedOut) timeoutRef.current?.();
+  }, [timedOut]);
+  const continueRef = useRef(null);
+  useEffect(() => {
+    if (tallied && autoFocus) continueRef.current?.focus({ preventScroll: true });
+  }, [tallied, autoFocus]);
+  const quitRef = useRef(onQuit);
+  quitRef.current = onQuit;
+  useEffect(() => {
+    if (!fixed) return void 0;
+    const onKey = (event) => {
+      if (event.key === "Escape") quitRef.current?.();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [fixed]);
+  const rows = plan.rows.map((row) => {
+    if (elapsed < row.start) return null;
+    const progress = Math.min(1, (elapsed - row.start) / tallyDuration);
+    return { shown: row.value * (1 - (1 - progress) ** 3) };
+  });
+  const totalRow = rows[rows.length - 1];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-go ${className}`,
+      "data-fixed": fixed || void 0,
+      role: fixed ? "dialog" : "region",
+      "aria-modal": fixed || void 0,
+      "aria-labelledby": `${uid}-title`,
+      onClick: skipTally,
+      style: {
+        "--bl-min-h": `${minHeight}px`,
+        "--bl-title-size": `${titleSize}px`,
+        "--bl-bg": backgroundColor,
+        "--bl-title": titleColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-accent": accentColor,
+        "--bl-line": lineColor,
+        "--bl-btn": buttonColor,
+        "--bl-btn-ink": buttonTextColor,
+        "--bl-shadow": shadowColor,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx("h2", { id: `${uid}-title`, className: "bl-go__title", "aria-label": title, children: [...title].map((ch, i) => /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { "--i": i }, children: ch === " " ? "\xA0" : ch }, `${replayKey}-${i}`)) }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "bl-go__sub", children: subtitle }),
+        (stats.length > 0 || total != null) && /* @__PURE__ */ jsxs("dl", { className: "bl-go__stats", children: [
+          stats.map(
+            (row, i) => rows[i] ? /* @__PURE__ */ jsxs("div", { className: "bl-go__row", children: [
+              /* @__PURE__ */ jsx("dt", { children: row.label }),
+              /* @__PURE__ */ jsx("dd", { children: format(rows[i].shown) })
+            ] }, i) : null
+          ),
+          totalRow && /* @__PURE__ */ jsxs("div", { className: "bl-go__row", "data-total": "", children: [
+            /* @__PURE__ */ jsx("dt", { children: totalLabel }),
+            /* @__PURE__ */ jsx("dd", { children: format(totalRow.shown) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-go__continue", children: [
+          tallied && countdown > 0 && !timedOut && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "CONTINUE?" }),
+            /* @__PURE__ */ jsx("span", { className: "bl-go__count", "data-low": secondsLeft <= 3 || void 0, "aria-hidden": "true", children: secondsLeft }, secondsLeft)
+          ] }),
+          timedOut && /* @__PURE__ */ jsx("p", { className: "bl-go__final", children: finalMessage })
+        ] }),
+        tallied && /* @__PURE__ */ jsxs("div", { className: "bl-go__actions", children: [
+          /* @__PURE__ */ jsx("button", { ref: continueRef, type: "button", className: "bl-go__btn", onClick: () => onContinue?.(), children: continueLabel }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "bl-go__btn", "data-secondary": "", onClick: () => onQuit?.(), children: quitLabel })
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "bl-go__sr", "aria-live": "polite", children: [
+          tallied ? `${totalLabel}: ${format(sum)}.${countdown > 0 && !timedOut ? ` Continue? ${countdown} seconds to decide.` : ""}` : "",
+          timedOut ? ` ${finalMessage}` : ""
+        ] })
+      ]
+    }
+  );
+}
+export {
+  GameOver as default
+};