bits-lab 0.0.0-stage → 0.1.0

package/dist/WebcamPixels.js

@@ -0,0 +1,292 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-webcam-pixels";
+const CSS = `
+.bl-cam { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-bg); color: var(--bl-ink); font-family: var(--bl-font); }
+.bl-cam__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
+.bl-cam__panel { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; }
+.bl-cam__panel h3 { margin: 0; font-size: 18px; font-weight: 700; }
+.bl-cam__panel p { max-width: 36ch; margin: 0; color: var(--bl-muted); font-size: 14px; line-height: 1.5; }
+.bl-cam__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--bl-accent); color: var(--bl-bg); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
+.bl-cam__btn:focus-visible { outline: 2px solid var(--bl-ink); outline-offset: 3px; }
+.bl-cam__btn[data-quiet] { background: color-mix(in srgb, var(--bl-bg) 70%, transparent); color: var(--bl-ink); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bl-ink) 30%, transparent); backdrop-filter: blur(6px); }
+.bl-cam__bar { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; pointer-events: none; }
+.bl-cam__bar > * { pointer-events: auto; }
+.bl-cam__live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--bl-bg) 70%, transparent); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; backdrop-filter: blur(6px); }
+.bl-cam__live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bl-live); animation: bl-cam-pulse 1.4s ease-in-out infinite; }
+.bl-cam__spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--bl-accent) 25%, transparent); border-top-color: var(--bl-accent); animation: bl-cam-spin 800ms linear infinite; }
+.bl-cam__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-cam-pulse { 50% { opacity: 0.35; } }
+@keyframes bl-cam-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .bl-cam__live::before { animation: none; } .bl-cam__spin { animation-duration: 2.4s; } }
+`;
+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 rgb(hex) {
+  const v = hex.replace("#", "");
+  const full = v.length === 3 ? v.replace(/./g, (c) => c + c) : v.slice(0, 6);
+  const n = parseInt(full, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+const ASCII_RAMP = " .:-=+*#%@";
+const MESSAGES = {
+  denied: ["Camera blocked", "Camera access was turned down. Allow it for this site in your browser\u2019s address bar or settings, then try again."],
+  missing: ["No camera found", "Plug in or enable a camera, then try again."],
+  busy: ["Camera in use", "Another app or tab is using the camera. Close it, then try again."],
+  unsupported: ["Camera not available", "This browser (or an insecure http:// page) can\u2019t share a camera."],
+  error: ["Couldn\u2019t start the camera", "Something went wrong while starting it. Try again."]
+};
+function WebcamPixels({
+  src,
+  mode = "pixels",
+  cellSize = 10,
+  palette,
+  mirror,
+  contrast = 1.1,
+  fps = 24,
+  autoStart = false,
+  monochrome = false,
+  inkColor = "#73eff7",
+  backgroundColor = "#14151f",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  accentColor = "#73eff7",
+  liveColor = "#ef4444",
+  radius = 16,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  title = "See yourself in pixels",
+  description = "Your camera is turned into a live pixel grid right here in the browser. Nothing is recorded or uploaded.",
+  label,
+  onStatusChange,
+  className = "",
+  style
+}) {
+  useStyles();
+  const wrapRef = useRef(null);
+  const canvasRef = useRef(null);
+  const videoRef = useRef(null);
+  const streamRef = useRef(null);
+  const [status, setStatus] = useState(src ? "live" : "idle");
+  const flip = mirror ?? !src;
+  const changeStatus = (next) => {
+    setStatus(next);
+    onStatusChange?.(next);
+  };
+  const stop = () => {
+    streamRef.current?.getTracks().forEach((t) => t.stop());
+    streamRef.current = null;
+    if (videoRef.current) videoRef.current.srcObject = null;
+  };
+  const start = async () => {
+    if (!navigator.mediaDevices?.getUserMedia) {
+      changeStatus("unsupported");
+      return;
+    }
+    changeStatus("requesting");
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ video: { width: { ideal: 640 }, height: { ideal: 480 }, facingMode: "user" }, audio: false });
+      streamRef.current = stream;
+      const video = videoRef.current;
+      video.srcObject = stream;
+      await video.play().catch(() => {
+      });
+      changeStatus("live");
+    } catch (err) {
+      stop();
+      const name = err?.name;
+      changeStatus(name === "NotAllowedError" || name === "SecurityError" ? "denied" : name === "NotFoundError" || name === "OverconstrainedError" ? "missing" : name === "NotReadableError" ? "busy" : "error");
+    }
+  };
+  const turnOff = () => {
+    stop();
+    changeStatus("idle");
+  };
+  useEffect(() => {
+    if (src) {
+      stop();
+      changeStatus("live");
+    } else if (autoStart) start();
+    else changeStatus("idle");
+    return stop;
+  }, [src]);
+  useEffect(() => {
+    if (status !== "live") return void 0;
+    const wrap = wrapRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    const sample = document.createElement("canvas");
+    const sctx = sample.getContext("2d", { willReadFrequently: true });
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const interval = 1e3 / (reduced ? Math.min(fps, 4) : fps);
+    const colors = palette?.length ? palette.map(rgb) : null;
+    const ink = rgb(inkColor);
+    let source = videoRef.current;
+    let ready = !src;
+    let frame = 0;
+    let lastDraw = 0;
+    let visible = true;
+    let cancelled = false;
+    if (src) {
+      const isVideo = /\.(mp4|webm|ogv|mov)(\?|$)/i.test(src);
+      source = isVideo ? Object.assign(document.createElement("video"), { muted: true, loop: true, playsInline: true, crossOrigin: "anonymous" }) : new Image();
+      source.crossOrigin = "anonymous";
+      const onReady = () => {
+        if (cancelled) return;
+        ready = true;
+        if (isVideo) source.play().catch(() => {
+        });
+        render(performance.now(), true);
+      };
+      source.addEventListener(isVideo ? "loadeddata" : "load", onReady, { once: true });
+      source.src = src;
+    }
+    const nearest = (r, g, b) => {
+      let best = colors[0];
+      let bestD = Infinity;
+      for (const c of colors) {
+        const d = (c[0] - r) ** 2 * 0.3 + (c[1] - g) ** 2 * 0.59 + (c[2] - b) ** 2 * 0.11;
+        if (d < bestD) {
+          bestD = d;
+          best = c;
+        }
+      }
+      return best;
+    };
+    const render = (now, force = false) => {
+      frame = 0;
+      if (cancelled) return;
+      if (visible && ready && (force || now - lastDraw >= interval)) {
+        lastDraw = now;
+        const dpr = Math.min(2, window.devicePixelRatio || 1);
+        const w = wrap.clientWidth;
+        const h = wrap.clientHeight;
+        if (canvas.width !== Math.round(w * dpr) || canvas.height !== Math.round(h * dpr)) {
+          canvas.width = Math.round(w * dpr);
+          canvas.height = Math.round(h * dpr);
+        }
+        const cols = Math.max(1, Math.floor(w / cellSize));
+        const rows = Math.max(1, Math.floor(h / cellSize));
+        const sw = source.videoWidth || source.naturalWidth || 0;
+        const sh = source.videoHeight || source.naturalHeight || 0;
+        if (sw && sh) {
+          sample.width = cols;
+          sample.height = rows;
+          const scale = Math.max(cols / sw, rows / sh);
+          const cw = cols / scale;
+          const ch = rows / scale;
+          sctx.save();
+          if (flip) {
+            sctx.translate(cols, 0);
+            sctx.scale(-1, 1);
+          }
+          sctx.drawImage(source, (sw - cw) / 2, (sh - ch) / 2, cw, ch, 0, 0, cols, rows);
+          sctx.restore();
+          const data = sctx.getImageData(0, 0, cols, rows).data;
+          const cell = cellSize * dpr;
+          const ox = (canvas.width - cols * cell) / 2;
+          const oy = (canvas.height - rows * cell) / 2;
+          ctx.fillStyle = backgroundColor;
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
+          if (mode === "ascii") {
+            ctx.font = `700 ${cell * 1.05}px ui-monospace, SFMono-Regular, Menlo, monospace`;
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+          }
+          for (let i = 0; i < cols * rows; i++) {
+            const c = i % cols;
+            const r = (i - c) / cols;
+            let R = data[i * 4];
+            let G = data[i * 4 + 1];
+            let B = data[i * 4 + 2];
+            R = Math.max(0, Math.min(255, (R - 128) * contrast + 128));
+            G = Math.max(0, Math.min(255, (G - 128) * contrast + 128));
+            B = Math.max(0, Math.min(255, (B - 128) * contrast + 128));
+            const lum = (0.299 * R + 0.587 * G + 0.114 * B) / 255;
+            let color = monochrome ? ink : [R, G, B];
+            if (colors && !monochrome) color = nearest(R, G, B);
+            const x = ox + c * cell;
+            const y = oy + r * cell;
+            if (mode === "ascii") {
+              const ch2 = ASCII_RAMP[Math.min(ASCII_RAMP.length - 1, Math.floor(lum * ASCII_RAMP.length))];
+              if (ch2 === " ") continue;
+              ctx.fillStyle = `rgb(${color[0]},${color[1]},${color[2]})`;
+              ctx.fillText(ch2, x + cell / 2, y + cell / 2);
+            } else if (mode === "dots") {
+              const rad = cell / 2 * Math.sqrt(lum) * 0.95;
+              if (rad < 0.4) continue;
+              ctx.fillStyle = `rgb(${color[0]},${color[1]},${color[2]})`;
+              ctx.beginPath();
+              ctx.arc(x + cell / 2, y + cell / 2, rad, 0, Math.PI * 2);
+              ctx.fill();
+            } else {
+              const k = monochrome ? lum : 1;
+              ctx.fillStyle = `rgb(${Math.round(color[0] * k)},${Math.round(color[1] * k)},${Math.round(color[2] * k)})`;
+              ctx.fillRect(x, y, cell + 0.5, cell + 0.5);
+            }
+          }
+        }
+      }
+      if (!(src && source instanceof HTMLImageElement)) frame = requestAnimationFrame(render);
+    };
+    const io = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+    });
+    io.observe(wrap);
+    const resize = new ResizeObserver(() => render(performance.now(), true));
+    resize.observe(wrap);
+    frame = requestAnimationFrame(render);
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(frame);
+      io.disconnect();
+      resize.disconnect();
+      if (src && source instanceof HTMLVideoElement) source.pause();
+    };
+  }, [status, src, mode, cellSize, palette?.join(), flip, contrast, fps, monochrome, inkColor, backgroundColor]);
+  const message = MESSAGES[status];
+  const statusText = { idle: "Camera off.", requesting: "Waiting for camera permission\u2026", live: src ? "" : "Camera on." }[status] ?? (message ? `${message[0]}. ${message[1]}` : "");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapRef,
+      className: `bl-cam ${className}`,
+      style: { "--bl-bg": backgroundColor, "--bl-ink": textColor, "--bl-muted": mutedColor, "--bl-accent": accentColor, "--bl-live": liveColor, "--bl-radius": `${radius}px`, "--bl-font": fontFamily, ...style },
+      children: [
+        /* @__PURE__ */ jsx("video", { ref: videoRef, muted: true, playsInline: true, "aria-hidden": "true", style: { display: "none" } }),
+        /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "bl-cam__canvas", role: "img", "aria-label": label ?? `${src ? "Image" : "Live camera"} rendered as ${{ ascii: "ASCII art", dots: "halftone dots" }[mode] ?? "pixel art"}`, hidden: status !== "live" }),
+        status === "live" && !src && /* @__PURE__ */ jsxs("div", { className: "bl-cam__bar", children: [
+          /* @__PURE__ */ jsx("span", { className: "bl-cam__live", children: "LIVE" }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "bl-cam__btn", "data-quiet": "", onClick: turnOff, children: "Stop camera" })
+        ] }),
+        status === "idle" && /* @__PURE__ */ jsxs("div", { className: "bl-cam__panel", children: [
+          /* @__PURE__ */ jsx("h3", { children: title }),
+          /* @__PURE__ */ jsx("p", { children: description }),
+          /* @__PURE__ */ jsxs("button", { type: "button", className: "bl-cam__btn", onClick: start, children: [
+            /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M1.5 4.5h9v7h-9zM10.5 7l4-2.5v7l-4-2.5" }) }),
+            "Turn on camera"
+          ] })
+        ] }),
+        status === "requesting" && /* @__PURE__ */ jsxs("div", { className: "bl-cam__panel", children: [
+          /* @__PURE__ */ jsx("span", { className: "bl-cam__spin", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("p", { children: "Waiting for you to allow the camera in your browser\u2019s prompt\u2026" })
+        ] }),
+        message && /* @__PURE__ */ jsxs("div", { className: "bl-cam__panel", children: [
+          /* @__PURE__ */ jsx("h3", { children: message[0] }),
+          /* @__PURE__ */ jsx("p", { children: message[1] }),
+          status !== "unsupported" && /* @__PURE__ */ jsx("button", { type: "button", className: "bl-cam__btn", onClick: start, children: "Try again" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "bl-cam__sr", role: "status", children: statusText })
+      ]
+    }
+  );
+}
+export {
+  WebcamPixels as default
+};

package/dist/WheelPicker.d.ts

@@ -0,0 +1,29 @@
+import { type CSSProperties } from 'react';
+export interface WheelOption {
+    value: string | number;
+    label: string;
+}
+export interface WheelPickerProps {
+    options?: (string | number | WheelOption)[];
+    value?: string | number;
+    defaultValue?: string | number;
+    onChange?: (value: string | number, option: WheelOption) => void;
+    /** Rows shown; odd numbers work best. */
+    visible?: number;
+    rowHeight?: number;
+    width?: number;
+    /** Accessible name. */
+    label?: string;
+    fontSize?: number;
+    radius?: number;
+    backgroundColor?: string;
+    bandColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function WheelPicker({ options, value, defaultValue, onChange, visible, rowHeight, width, label, fontSize, radius, backgroundColor, bandColor, textColor, mutedColor, lineColor, accentColor, fontFamily, className, style }: WheelPickerProps): import("react").JSX.Element;

package/dist/WheelPicker.js

@@ -0,0 +1,199 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-wheel-picker";
+const CSS = `
+.bl-wheel { position: relative; display: inline-block; width: var(--bl-w); height: calc(var(--bl-row) * var(--bl-visible)); overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-bg); color: var(--bl-ink); font-family: var(--bl-font); font-size: var(--bl-size); box-shadow: inset 0 0 0 1px var(--bl-line); cursor: grab; touch-action: none; user-select: none; outline: none; perspective: 600px; }
+.bl-wheel:focus-visible { box-shadow: inset 0 0 0 2px var(--bl-accent); }
+.bl-wheel[data-dragging] { cursor: grabbing; }
+.bl-wheel__band { position: absolute; left: 6px; right: 6px; top: 50%; height: var(--bl-row); margin-top: calc(var(--bl-row) / -2); border-radius: 8px; background: var(--bl-band); box-shadow: inset 0 0 0 1px var(--bl-line); pointer-events: none; }
+.bl-wheel__drum { position: absolute; inset: 0; transform-style: preserve-3d; }
+.bl-wheel__opt { position: absolute; left: 0; right: 0; top: 50%; height: var(--bl-row); margin-top: calc(var(--bl-row) / -2); display: grid; place-items: center; color: var(--bl-muted); white-space: nowrap; backface-visibility: hidden; transform: rotateX(calc(var(--k) * var(--bl-step) * -1)) translateZ(var(--bl-radius-z)); opacity: calc(1 - var(--far) * 0.75); }
+.bl-wheel__opt[data-current] { color: var(--bl-ink); font-weight: 700; }
+.bl-wheel__fade { position: absolute; inset: 0; background: linear-gradient(var(--bl-bg), transparent 38%, transparent 62%, var(--bl-bg)); pointer-events: 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 asOption = (o) => typeof o === "object" && o !== null ? o : { value: o, label: String(o) };
+function WheelPicker({
+  options = [],
+  value,
+  defaultValue,
+  onChange,
+  visible = 5,
+  rowHeight = 40,
+  width = 140,
+  label = "Pick an option",
+  fontSize = 18,
+  radius = 14,
+  backgroundColor = "#1a1c2c",
+  bandColor = "rgba(115,239,247,0.08)",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  fontFamily = "inherit",
+  className = "",
+  style
+}) {
+  useStyles();
+  const opts = options.map(asOption);
+  const n = opts.length;
+  const indexOf = (v) => Math.max(0, opts.findIndex((o) => o.value === v));
+  const [inner, setInner] = useState(() => indexOf(value ?? defaultValue ?? opts[0]?.value));
+  const index = value !== void 0 ? indexOf(value) : Math.min(inner, Math.max(0, n - 1));
+  const [pos, setPos] = useState(index);
+  const rootRef = useRef(null);
+  const motion = useRef({ raf: 0, v: 0, drag: null });
+  const commit = (i) => {
+    const next = Math.max(0, Math.min(n - 1, i));
+    if (value === void 0) setInner(next);
+    if (next !== index) onChange?.(opts[next].value, opts[next]);
+    return next;
+  };
+  const commitRef = useRef(commit);
+  commitRef.current = commit;
+  useEffect(() => {
+    if (!motion.current.drag && !motion.current.raf) setPos(index);
+  }, [index]);
+  useEffect(() => {
+    const root = rootRef.current;
+    const m = motion.current;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    let p = index;
+    const clamp = (v) => Math.max(-0.4, Math.min(n - 0.6, v));
+    const show = (v) => {
+      p = v;
+      setPos(v);
+    };
+    const settle = (target) => {
+      cancelAnimationFrame(m.raf);
+      let last = performance.now();
+      const step = (now) => {
+        const dt = Math.min(0.05, (now - last) / 1e3);
+        last = now;
+        if (target === void 0 && Math.abs(m.v) > 1.2) {
+          m.v *= Math.exp(-dt * 3.2);
+          show(clamp(p + m.v * dt));
+        } else {
+          const goal = target ?? Math.round(Math.max(0, Math.min(n - 1, p)));
+          m.v = 0;
+          const next = p + (goal - p) * Math.min(1, dt * 14);
+          if (Math.abs(goal - next) < 2e-3) {
+            show(goal);
+            m.raf = 0;
+            commitRef.current(goal);
+            return;
+          }
+          show(next);
+        }
+        m.raf = requestAnimationFrame(step);
+      };
+      m.raf = requestAnimationFrame(step);
+    };
+    const jump = (i) => {
+      const target = Math.max(0, Math.min(n - 1, i));
+      m.v = 0;
+      if (reduced) {
+        cancelAnimationFrame(m.raf);
+        m.raf = 0;
+        show(target);
+        commitRef.current(target);
+      } else settle(target);
+    };
+    const onDown = (event) => {
+      if (event.button > 0) return;
+      cancelAnimationFrame(m.raf);
+      m.raf = 0;
+      root.setPointerCapture?.(event.pointerId);
+      m.drag = { y: event.clientY, start: p, at: performance.now(), last: event.clientY };
+      m.v = 0;
+      root.dataset.dragging = "";
+    };
+    const onMove = (event) => {
+      if (!m.drag) return;
+      const now = performance.now();
+      const dy = event.clientY - m.drag.y;
+      const dt = Math.max(1, now - m.drag.at) / 1e3;
+      m.v = -(event.clientY - m.drag.last) / rowHeight / dt * 0.6 + m.v * 0.4;
+      m.drag.at = now;
+      m.drag.last = event.clientY;
+      show(clamp(m.drag.start - dy / rowHeight));
+    };
+    const onUp = () => {
+      if (!m.drag) return;
+      m.drag = null;
+      delete root.dataset.dragging;
+      if (reduced) m.v = 0;
+      settle();
+    };
+    let wheelAcc = 0;
+    const onWheel = (event) => {
+      event.preventDefault();
+      wheelAcc += event.deltaY;
+      if (Math.abs(wheelAcc) >= 30) {
+        jump(Math.round(p) + Math.sign(wheelAcc));
+        wheelAcc = 0;
+      }
+    };
+    const onKey = (event) => {
+      const page = Math.max(1, visible - 1);
+      const moves = { ArrowDown: 1, ArrowUp: -1, PageDown: page, PageUp: -page, Home: -1e9, End: 1e9 };
+      if (moves[event.key] === void 0) return;
+      event.preventDefault();
+      jump(Math.round(p) + moves[event.key]);
+    };
+    root.addEventListener("pointerdown", onDown);
+    root.addEventListener("pointermove", onMove);
+    root.addEventListener("pointerup", onUp);
+    root.addEventListener("pointercancel", onUp);
+    root.addEventListener("wheel", onWheel, { passive: false });
+    root.addEventListener("keydown", onKey);
+    return () => {
+      cancelAnimationFrame(m.raf);
+      m.raf = 0;
+      root.removeEventListener("pointerdown", onDown);
+      root.removeEventListener("pointermove", onMove);
+      root.removeEventListener("pointerup", onUp);
+      root.removeEventListener("pointercancel", onUp);
+      root.removeEventListener("wheel", onWheel);
+      root.removeEventListener("keydown", onKey);
+    };
+  }, [n, rowHeight, visible, index]);
+  const stepDeg = 180 / (visible + 1);
+  const radiusZ = rowHeight / 2 / Math.tan(stepDeg / 2 * Math.PI / 180);
+  const shown = Math.round(Math.max(0, Math.min(n - 1, pos)));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: `bl-wheel ${className}`,
+      role: "spinbutton",
+      tabIndex: 0,
+      "aria-label": label,
+      "aria-valuemin": 0,
+      "aria-valuemax": Math.max(0, n - 1),
+      "aria-valuenow": index,
+      "aria-valuetext": opts[index]?.label ?? "",
+      style: { "--bl-w": `${width}px`, "--bl-row": `${rowHeight}px`, "--bl-visible": visible, "--bl-step": `${stepDeg}deg`, "--bl-radius-z": `${radiusZ.toFixed(1)}px`, "--bl-size": `${fontSize}px`, "--bl-radius": `${radius}px`, "--bl-bg": backgroundColor, "--bl-band": bandColor, "--bl-ink": textColor, "--bl-muted": mutedColor, "--bl-line": lineColor, "--bl-accent": accentColor, "--bl-font": fontFamily, ...style },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "bl-wheel__band", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("div", { className: "bl-wheel__drum", "aria-hidden": "true", children: opts.map((o, i) => {
+          const k = i - pos;
+          if (Math.abs(k) > visible / 2 + 1) return null;
+          return /* @__PURE__ */ jsx("span", { className: "bl-wheel__opt", "data-current": i === shown || void 0, style: { "--k": k.toFixed(3), "--far": Math.min(1, Math.abs(k) / (visible / 2 + 0.5)).toFixed(3) }, children: o.label }, String(o.value));
+        }) }),
+        /* @__PURE__ */ jsx("span", { className: "bl-wheel__fade", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+export {
+  WheelPicker as default
+};

package/dist/WobbleCard.d.ts

@@ -0,0 +1,23 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface WobbleCardProps {
+    children?: ReactNode;
+    /** How far it leans and stretches; 0 turns the jelly off. */
+    intensity?: number;
+    stiffness?: number;
+    /** Lower damping wobbles longer. */
+    damping?: number;
+    /** Max width in px. */
+    width?: number;
+    padding?: number;
+    radius?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    lineColor?: string;
+    /** Rings the card while the pointer is over it or focus is inside. */
+    accentColor?: string;
+    sheenColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function WobbleCard({ children, intensity, stiffness, damping, width, padding, radius, backgroundColor, textColor, lineColor, accentColor, sheenColor, fontFamily, className, style }: WobbleCardProps): import("react").JSX.Element;

package/dist/WobbleCard.js

@@ -0,0 +1,112 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef } from "react";
+const STYLE_ID = "bl-wobble-card";
+const CSS = `
+.bl-wobble { position: relative; box-sizing: border-box; width: 100%; max-width: var(--bl-w); touch-action: pan-y; }
+.bl-wobble__body { position: relative; box-sizing: border-box; overflow: hidden; padding: var(--bl-pad); border-radius: var(--bl-radius); background: var(--bl-bg); color: var(--bl-ink); font-family: var(--bl-font); box-shadow: 0 0 0 2px var(--bl-line), 0 18px 40px -22px rgba(0,0,0,0.8); transform-origin: 50% 50%; will-change: transform; transition: box-shadow 200ms; }
+.bl-wobble__body::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--bl-mx, 50%) var(--bl-my, 50%), var(--bl-sheen), transparent 60%); opacity: 0; transition: opacity 250ms; pointer-events: none; }
+.bl-wobble[data-active] .bl-wobble__body { box-shadow: 0 0 0 2px var(--bl-accent), 0 24px 48px -22px rgba(0,0,0,0.85); }
+.bl-wobble[data-active] .bl-wobble__body::before { opacity: 1; }
+.bl-wobble:focus-within .bl-wobble__body { box-shadow: 0 0 0 2px var(--bl-accent), 0 18px 40px -22px rgba(0,0,0,0.8); }
+.bl-wobble__content { position: relative; }
+`;
+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 WobbleCard({
+  children,
+  intensity = 1,
+  stiffness = 170,
+  damping = 9,
+  width = 360,
+  padding = 24,
+  radius = 18,
+  backgroundColor = "#262b44",
+  textColor = "#f4f4f4",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  sheenColor = "rgba(115,239,247,0.18)",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const bodyRef = useRef(null);
+  useEffect(() => {
+    const root = rootRef.current;
+    const body = bodyRef.current;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const s = { tx: 0, ty: 0, x: 0, y: 0, vx: 0, vy: 0 };
+    let frame = 0;
+    let last = 0;
+    const apply = () => {
+      const k = intensity;
+      const sx = 1 + k * (0.05 * Math.abs(s.x) - 0.025 * Math.abs(s.y));
+      const sy = 1 + k * (0.05 * Math.abs(s.y) - 0.025 * Math.abs(s.x));
+      body.style.transform = `translate(${(s.x * 7 * k).toFixed(2)}px, ${(s.y * 7 * k).toFixed(2)}px) skew(${(-s.x * s.y * 5 * k).toFixed(2)}deg, ${(s.x * s.y * 2 * k).toFixed(2)}deg) scale(${sx.toFixed(4)}, ${sy.toFixed(4)})`;
+    };
+    const tick = (now) => {
+      const dt = Math.min(0.05, (now - last) / 1e3 || 0.016);
+      last = now;
+      for (let t = 0; t < dt; t += 1 / 240) {
+        s.vx += (stiffness * (s.tx - s.x) - damping * s.vx) / 240;
+        s.vy += (stiffness * (s.ty - s.y) - damping * s.vy) / 240;
+        s.x += s.vx / 240;
+        s.y += s.vy / 240;
+      }
+      apply();
+      const moving = Math.abs(s.tx - s.x) > 1e-3 || Math.abs(s.ty - s.y) > 1e-3 || Math.abs(s.vx) > 0.01 || Math.abs(s.vy) > 0.01;
+      if (moving) frame = requestAnimationFrame(tick);
+      else {
+        Object.assign(s, { x: s.tx, y: s.ty, vx: 0, vy: 0 });
+        apply();
+        frame = 0;
+      }
+    };
+    const wake = () => {
+      if (reduced || frame) return;
+      last = performance.now();
+      frame = requestAnimationFrame(tick);
+    };
+    const onMove = (event) => {
+      const rect = root.getBoundingClientRect();
+      const px = (event.clientX - rect.left) / rect.width;
+      const py = (event.clientY - rect.top) / rect.height;
+      root.style.setProperty("--bl-mx", `${(px * 100).toFixed(1)}%`);
+      root.style.setProperty("--bl-my", `${(py * 100).toFixed(1)}%`);
+      root.dataset.active = "";
+      s.tx = Math.max(-1, Math.min(1, px * 2 - 1));
+      s.ty = Math.max(-1, Math.min(1, py * 2 - 1));
+      wake();
+    };
+    const onLeave = () => {
+      delete root.dataset.active;
+      s.tx = 0;
+      s.ty = 0;
+      s.vx -= s.x * 3;
+      s.vy -= s.y * 3;
+      wake();
+    };
+    root.addEventListener("pointermove", onMove);
+    root.addEventListener("pointerleave", onLeave);
+    root.addEventListener("pointercancel", onLeave);
+    return () => {
+      cancelAnimationFrame(frame);
+      root.removeEventListener("pointermove", onMove);
+      root.removeEventListener("pointerleave", onLeave);
+      root.removeEventListener("pointercancel", onLeave);
+      body.style.transform = "";
+    };
+  }, [intensity, stiffness, damping]);
+  return /* @__PURE__ */ jsx("div", { ref: rootRef, className: `bl-wobble ${className}`, style: { "--bl-w": `${width}px`, "--bl-pad": `${padding}px`, "--bl-radius": `${radius}px`, "--bl-bg": backgroundColor, "--bl-ink": textColor, "--bl-line": lineColor, "--bl-accent": accentColor, "--bl-sheen": sheenColor, "--bl-font": fontFamily, ...style }, children: /* @__PURE__ */ jsx("div", { ref: bodyRef, className: "bl-wobble__body", children: /* @__PURE__ */ jsx("div", { className: "bl-wobble__content", children }) }) });
+}
+export {
+  WobbleCard as default
+};