bits-lab 0.0.0-stage → 0.1.2

package/dist/ParallaxCollage.d.ts

@@ -0,0 +1,41 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface CollagePiece {
+    id?: string;
+    /** An image URL; or pass content for any node. */
+    src?: string;
+    content?: ReactNode;
+    /** Makes the piece meaningful to screen readers; otherwise it is decorative. */
+    alt?: string;
+    /** Left, top and width as percentages of the collage. */
+    x?: number;
+    y?: number;
+    width?: number;
+    /** 0 is far and slow, 1 is near and fast. */
+    depth?: number;
+    /** Resting rotation in degrees. */
+    rotate?: number;
+    /** Style for the image. */
+    style?: CSSProperties;
+}
+export interface ParallaxCollageProps {
+    pieces?: CollagePiece[];
+    /** Your content in the middle layer. */
+    children?: ReactNode;
+    height?: number | string;
+    /** Max vertical drift in px for a depth-1 piece. */
+    range?: number;
+    /** Max rotation drift in degrees for a depth-1 piece. */
+    spin?: number;
+    /** Lean toward the mouse. */
+    pointer?: boolean;
+    pointerRange?: number;
+    /** Blur for the farthest pieces. */
+    depthBlur?: number;
+    radius?: number;
+    textColor?: string;
+    fontFamily?: string;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ParallaxCollage({ pieces, children, height, range, spin, pointer, pointerRange, depthBlur, radius, textColor, fontFamily, label, className, style }: ParallaxCollageProps): import("react").JSX.Element;

package/dist/ParallaxCollage.js

@@ -0,0 +1,143 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef } from "react";
+const STYLE_ID = "bl-parallax-collage";
+const CSS = `
+.bl-collage { position: relative; width: 100%; height: var(--bl-h); overflow: hidden; color: var(--bl-ink); font-family: var(--bl-font); }
+.bl-collage__piece { position: absolute; left: var(--x); top: var(--y); width: var(--w); z-index: var(--z); will-change: transform; filter: var(--blur, none); }
+.bl-collage__piece > img { display: block; width: 100%; height: auto; border-radius: var(--bl-radius); box-shadow: 0 18px 40px -18px rgba(0,0,0,0.7); }
+.bl-collage__piece > :not(img) { width: 100%; }
+.bl-collage__content { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; text-align: center; pointer-events: none; }
+.bl-collage__content > * { pointer-events: auto; }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+function scrollParent(node) {
+  for (let el = node?.parentElement; el; el = el.parentElement) {
+    if (/(auto|scroll|overlay)/.test(getComputedStyle(el).overflowY) && el.scrollHeight > el.clientHeight) return el;
+  }
+  return window;
+}
+function ParallaxCollage({
+  pieces = [],
+  children,
+  height = 520,
+  range = 160,
+  spin = 6,
+  pointer = true,
+  pointerRange = 18,
+  depthBlur = 0,
+  radius = 10,
+  textColor = "#f4f4f4",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  label,
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const pieceRefs = useRef([]);
+  useEffect(() => {
+    const root = rootRef.current;
+    const scroller = scrollParent(root);
+    const isWindow = scroller === window;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    let frame = 0;
+    let visible = true;
+    let lean = { x: 0, y: 0 };
+    let leanTarget = { x: 0, y: 0 };
+    const update = () => {
+      frame = 0;
+      const view = isWindow ? { top: 0, height: window.innerHeight } : { top: scroller.getBoundingClientRect().top, height: scroller.clientHeight };
+      const rect = root.getBoundingClientRect();
+      const progress = reduced ? 0 : Math.max(-1, Math.min(1, (view.top + view.height / 2 - (rect.top + rect.height / 2)) / (view.height / 2 + rect.height / 2)));
+      lean.x += (leanTarget.x - lean.x) * 0.12;
+      lean.y += (leanTarget.y - lean.y) * 0.12;
+      pieces.forEach((piece, i) => {
+        const node = pieceRefs.current[i];
+        if (!node) return;
+        const depth = piece.depth ?? 0.5;
+        const y = -progress * depth * range + lean.y * depth * pointerRange;
+        const x = lean.x * depth * pointerRange;
+        const r = (piece.rotate ?? 0) + progress * depth * spin * (i % 2 ? -1 : 1);
+        node.style.transform = `translate3d(${x.toFixed(1)}px, ${y.toFixed(1)}px, 0) rotate(${r.toFixed(2)}deg)`;
+      });
+      if (Math.abs(leanTarget.x - lean.x) + Math.abs(leanTarget.y - lean.y) > 2e-3) schedule();
+    };
+    const schedule = () => {
+      if (!frame && visible) frame = requestAnimationFrame(update);
+    };
+    const onPointer = (event) => {
+      if (!pointer || reduced || event.pointerType === "touch") return;
+      const rect = root.getBoundingClientRect();
+      leanTarget = { x: ((event.clientX - rect.left) / rect.width - 0.5) * 2, y: ((event.clientY - rect.top) / rect.height - 0.5) * 2 };
+      schedule();
+    };
+    const onLeave = () => {
+      leanTarget = { x: 0, y: 0 };
+      schedule();
+    };
+    const io = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      schedule();
+    });
+    io.observe(root);
+    scroller.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("resize", schedule);
+    root.addEventListener("pointermove", onPointer);
+    root.addEventListener("pointerleave", onLeave);
+    update();
+    return () => {
+      cancelAnimationFrame(frame);
+      io.disconnect();
+      scroller.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+      root.removeEventListener("pointermove", onPointer);
+      root.removeEventListener("pointerleave", onLeave);
+    };
+  }, [pieces, range, spin, pointer, pointerRange]);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref: rootRef,
+      className: `bl-collage ${className}`,
+      "aria-label": label,
+      style: { "--bl-h": typeof height === "number" ? `${height}px` : height, "--bl-radius": `${radius}px`, "--bl-ink": textColor, "--bl-font": fontFamily, ...style },
+      children: [
+        pieces.map((piece, i) => {
+          const depth = piece.depth ?? 0.5;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: (node) => {
+                pieceRefs.current[i] = node;
+              },
+              className: "bl-collage__piece",
+              "aria-hidden": piece.alt ? void 0 : true,
+              style: {
+                "--x": `${piece.x ?? 0}%`,
+                "--y": `${piece.y ?? 0}%`,
+                "--w": `${piece.width ?? 30}%`,
+                // Near pieces stack above far ones; blur (if any) grows with distance from the middle.
+                "--z": Math.round(depth * 100),
+                "--blur": depthBlur && depth < 0.35 ? `blur(${((0.35 - depth) * depthBlur).toFixed(1)}px)` : "none"
+              },
+              children: piece.content ?? /* @__PURE__ */ jsx("img", { src: piece.src, alt: piece.alt ?? "", loading: "lazy", style: piece.style })
+            },
+            piece.id ?? i
+          );
+        }),
+        children && /* @__PURE__ */ jsx("div", { className: "bl-collage__content", children })
+      ]
+    }
+  );
+}
+export {
+  ParallaxCollage as default
+};

package/dist/PasswordMeter.d.ts

@@ -0,0 +1,44 @@
+import { type CSSProperties } from 'react';
+export interface PasswordRequirement {
+    id?: string;
+    label: string;
+    test: RegExp | ((value: string) => boolean);
+}
+export interface StrengthLevel {
+    label: string;
+    color: string;
+}
+export interface PasswordMeterProps {
+    value?: string;
+    defaultValue?: string;
+    /** Also receives the current strength. */
+    onValueChange?: (value: string, strength: {
+        level: number;
+        label?: string;
+    }) => void;
+    requirements?: PasswordRequirement[];
+    levels?: StrengthLevel[];
+    label?: string;
+    name?: string;
+    autoComplete?: string;
+    showChecklist?: boolean;
+    width?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    trackColor?: string;
+    accentColor?: string;
+    okColor?: string;
+    onOkColor?: string;
+    radius?: number;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const DEFAULT_REQUIREMENTS: PasswordRequirement[];
+export declare function scorePassword(password: string, requirements?: PasswordRequirement[], levels?: StrengthLevel[]): {
+    level: number;
+    met: boolean[];
+};
+export default function PasswordMeter({ value, defaultValue, onValueChange, requirements, levels, label, name, autoComplete, showChecklist, width, backgroundColor, textColor, mutedColor, lineColor, trackColor, accentColor, okColor, onOkColor, radius, fontFamily, className, style }: PasswordMeterProps): import("react").JSX.Element;

package/dist/PasswordMeter.js

@@ -0,0 +1,165 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useState } from "react";
+const STYLE_ID = "bl-password-meter";
+const CSS = `
+.bl-pw { width: 100%; max-width: var(--bl-w); font-family: var(--bl-font); color: var(--bl-ink); }
+.bl-pw__label { display: block; margin-bottom: 6px; color: var(--bl-muted); font-size: 13px; font-weight: 600; }
+.bl-pw__field { position: relative; display: flex; align-items: center; border-radius: var(--bl-radius); background: var(--bl-bg); box-shadow: inset 0 0 0 1px var(--bl-line); transition: box-shadow 150ms; }
+.bl-pw__field:focus-within { box-shadow: inset 0 0 0 2px var(--bl-level, var(--bl-accent)); }
+.bl-pw__input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 15px; letter-spacing: 0.02em; outline: none; }
+.bl-pw__toggle { display: grid; place-items: center; width: 40px; height: 40px; margin-right: 2px; padding: 0; border: 0; border-radius: calc(var(--bl-radius) * 0.7); background: transparent; color: var(--bl-muted); cursor: pointer; }
+.bl-pw__toggle:hover { color: var(--bl-ink); }
+.bl-pw__toggle:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: -2px; }
+.bl-pw__meter { display: grid; grid-template-columns: repeat(var(--bl-segments), 1fr); gap: 5px; margin: 10px 0 6px; }
+.bl-pw__seg { height: 6px; border-radius: 999px; background: var(--bl-track); overflow: hidden; }
+.bl-pw__seg::after { content: ""; display: block; height: 100%; border-radius: inherit; background: var(--bl-level); transform: scaleX(0); transform-origin: left; transition: transform 280ms cubic-bezier(.3,1.2,.5,1), background-color 280ms; transition-delay: calc(var(--i) * 40ms); }
+.bl-pw__seg[data-on]::after { transform: scaleX(1); }
+.bl-pw__level { display: flex; justify-content: space-between; color: var(--bl-muted); font-size: 12px; }
+.bl-pw__level b { color: var(--bl-level, var(--bl-muted)); transition: color 200ms; }
+.bl-pw__list { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; }
+.bl-pw__req { display: flex; align-items: center; gap: 8px; color: var(--bl-muted); transition: color 200ms; }
+.bl-pw__req[data-met] { color: var(--bl-ink); }
+.bl-pw__tick { display: grid; place-items: center; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--bl-track); color: var(--bl-on-ok); transition: background-color 200ms, box-shadow 200ms; }
+.bl-pw__req[data-met] .bl-pw__tick { background: var(--bl-ok); box-shadow: none; animation: bl-pw-pop 320ms cubic-bezier(.3,1.6,.5,1); }
+.bl-pw__tick path { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 260ms 60ms cubic-bezier(.2,.9,.25,1); }
+.bl-pw__req[data-met] .bl-pw__tick path { stroke-dashoffset: 0; }
+.bl-pw__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-pw-pop { 40% { transform: scale(1.3); } }
+@media (prefers-reduced-motion: reduce) { .bl-pw__seg::after, .bl-pw__tick path { transition: none; } .bl-pw__req[data-met] .bl-pw__tick { 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 DEFAULT_REQUIREMENTS = [
+  { id: "length", label: "At least 8 characters", test: (v) => v.length >= 8 },
+  { id: "lower", label: "A lowercase letter", test: (v) => /[a-z]/.test(v) },
+  { id: "upper", label: "An uppercase letter", test: (v) => /[A-Z]/.test(v) },
+  { id: "number", label: "A number", test: (v) => /\d/.test(v) },
+  { id: "symbol", label: "A symbol", test: (v) => /[^A-Za-z0-9\s]/.test(v) }
+];
+const DEFAULT_LEVELS = [
+  { label: "Too weak", color: "#b13e53" },
+  { label: "Weak", color: "#ef7d57" },
+  { label: "Fair", color: "#ffcd75" },
+  { label: "Good", color: "#a7f070" },
+  { label: "Strong", color: "#38b764" }
+];
+function scorePassword(password, requirements = DEFAULT_REQUIREMENTS, levels = DEFAULT_LEVELS) {
+  if (!password) return { level: -1, met: requirements.map(() => false) };
+  const met = requirements.map((r) => typeof r.test === "function" ? r.test(password) : r.test.test(password));
+  const ratio = met.filter(Boolean).length / Math.max(1, requirements.length);
+  const lengthBonus = Math.min(0.25, Math.max(0, password.length - 8) * 0.03);
+  const level = Math.min(levels.length - 1, Math.floor((ratio * 0.8 + lengthBonus) * levels.length));
+  return { level, met };
+}
+const Eye = ({ open }) => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("path", { d: "M1.5 9S4.5 3.5 9 3.5 16.5 9 16.5 9 13.5 14.5 9 14.5 1.5 9 1.5 9Z" }),
+  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "2.4" }),
+  !open && /* @__PURE__ */ jsx("path", { d: "M3 15 15 3" })
+] });
+function PasswordMeter({
+  value,
+  defaultValue = "",
+  onValueChange,
+  requirements = DEFAULT_REQUIREMENTS,
+  levels = DEFAULT_LEVELS,
+  label = "Password",
+  name,
+  autoComplete = "new-password",
+  showChecklist = true,
+  width = 420,
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "#333c57",
+  trackColor = "#333c57",
+  accentColor = "#73eff7",
+  okColor = "#38b764",
+  onOkColor = "#0b0b14",
+  radius = 12,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [inner, setInner] = useState(defaultValue);
+  const password = value ?? inner;
+  const [visible, setVisible] = useState(false);
+  const [spoken, setSpoken] = useState("");
+  const { level, met } = scorePassword(password, requirements, levels);
+  const current = levels[level];
+  const metCount = met.filter(Boolean).length;
+  useEffect(() => {
+    if (!password) return void 0;
+    const timer = setTimeout(() => setSpoken(`Password strength: ${current?.label ?? ""}. ${metCount} of ${requirements.length} requirements met.`), 900);
+    return () => clearTimeout(timer);
+  }, [password, current?.label, metCount, requirements.length]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-pw ${className}`,
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-segments": levels.length,
+        "--bl-level": current?.color,
+        "--bl-bg": backgroundColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-line": lineColor,
+        "--bl-track": trackColor,
+        "--bl-accent": accentColor,
+        "--bl-ok": okColor,
+        "--bl-on-ok": onOkColor,
+        "--bl-radius": `${radius}px`,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx("label", { className: "bl-pw__label", htmlFor: `${uid}-input`, children: label }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-pw__field", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: `${uid}-input`,
+              className: "bl-pw__input",
+              type: visible ? "text" : "password",
+              name,
+              autoComplete,
+              spellCheck: false,
+              value: password,
+              "aria-describedby": `${uid}-level ${showChecklist ? `${uid}-list` : ""}`.trim(),
+              onChange: (event) => {
+                if (value === void 0) setInner(event.target.value);
+                onValueChange?.(event.target.value, { level, label: current?.label });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "bl-pw__toggle", "aria-pressed": visible, "aria-label": "Show password", onClick: () => setVisible((v) => !v), children: /* @__PURE__ */ jsx(Eye, { open: visible }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "bl-pw__meter", "aria-hidden": "true", children: levels.map((_, i) => /* @__PURE__ */ jsx("span", { className: "bl-pw__seg", "data-on": i <= level || void 0, style: { "--i": i } }, i)) }),
+        /* @__PURE__ */ jsxs("div", { id: `${uid}-level`, className: "bl-pw__level", children: [
+          /* @__PURE__ */ jsx("span", { children: "Strength" }),
+          /* @__PURE__ */ jsx("b", { children: current?.label ?? "\u2014" })
+        ] }),
+        showChecklist && /* @__PURE__ */ jsx("ul", { id: `${uid}-list`, className: "bl-pw__list", "aria-label": "Requirements", children: requirements.map((r, i) => /* @__PURE__ */ jsxs("li", { className: "bl-pw__req", "data-met": met[i] || void 0, children: [
+          /* @__PURE__ */ jsx("span", { className: "bl-pw__tick", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M1.8 5.2 4 7.4 8.2 2.8" }) }) }),
+          r.label,
+          /* @__PURE__ */ jsx("span", { className: "bl-pw__sr", children: met[i] ? " (met)" : " (not met)" })
+        ] }, r.id ?? r.label)) }),
+        /* @__PURE__ */ jsx("span", { className: "bl-pw__sr", "aria-live": "polite", children: spoken })
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_REQUIREMENTS,
+  PasswordMeter as default,
+  scorePassword
+};

package/dist/PegBoard.d.ts

@@ -0,0 +1,26 @@
+import { type CSSProperties } from 'react';
+export interface PegBoardProps {
+    pegSize?: number;
+    spacing?: number;
+    /** How many px a fully raised peg climbs. */
+    rise?: number;
+    /** Radius of the pointer "hand" in px. */
+    reach?: number;
+    /** Roughly how many seconds pegs take to sink back. */
+    settle?: number;
+    /** A word pressed into the pegs at rest. */
+    imprint?: string;
+    /** CSS font for the imprint; its "1px" is replaced by the fitted size. */
+    imprintFont?: string;
+    /** Imprint height as a share of the board. */
+    imprintHeight?: number;
+    pegColor?: string;
+    topColor?: string;
+    peakColor?: string;
+    backgroundColor?: string;
+    /** Fills its parent by default. */
+    height?: number | string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function PegBoard({ pegSize, spacing, rise, reach, settle, imprint, imprintFont, imprintHeight, pegColor, topColor, peakColor, backgroundColor, height, className, style }: PegBoardProps): import("react").JSX.Element;

package/dist/PegBoard.js

@@ -0,0 +1,184 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+const hexToRgb = (hex) => {
+  const n = parseInt(hex.replace("#", "").replace(/^(.)(.)(.)$/, "$1$1$2$2$3$3"), 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+};
+const mix = (a, b, t) => `rgb(${a.map((v, i) => Math.round(v + (b[i] - v) * t)).join(",")})`;
+function PegBoard({
+  pegSize = 10,
+  spacing = 4,
+  rise = 9,
+  reach = 80,
+  settle = 1.6,
+  imprint = "",
+  imprintFont = '700 1px "Press Start 2P", ui-monospace, monospace',
+  imprintHeight = 0.55,
+  pegColor = "#29366f",
+  topColor = "#41a6f6",
+  peakColor = "#73eff7",
+  backgroundColor = "#0b0b14",
+  height = "100%",
+  className = "",
+  style
+}) {
+  const canvasRef = useRef(null);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const base = hexToRgb(pegColor);
+    const top = hexToRgb(topColor);
+    const peak = hexToRgb(peakColor);
+    const pitch = pegSize + spacing;
+    let cols = 0;
+    let rows = 0;
+    let lift = new Float32Array(0);
+    let rest = new Float32Array(0);
+    let W = 0;
+    let H = 0;
+    let dpr = 1;
+    const hand = { x: -1e4, y: -1e4, down: false };
+    let visible = true;
+    let raf = 0;
+    let last = 0;
+    const stamp = () => {
+      rest = new Float32Array(cols * rows);
+      if (!imprint) return;
+      const off = document.createElement("canvas");
+      off.width = cols;
+      off.height = rows;
+      const o = off.getContext("2d");
+      const size = Math.max(4, Math.floor(rows * imprintHeight));
+      o.font = imprintFont.replace(/\b1px\b/, `${size}px`);
+      o.textAlign = "center";
+      o.textBaseline = "middle";
+      let fit = size;
+      while (fit > 4 && o.measureText(imprint).width > cols * 0.9) {
+        fit -= 1;
+        o.font = imprintFont.replace(/\b1px\b/, `${fit}px`);
+      }
+      o.fillStyle = "#fff";
+      o.fillText(imprint, cols / 2, rows / 2 + 1);
+      const data = o.getImageData(0, 0, cols, rows).data;
+      for (let i = 0; i < cols * rows; i++) rest[i] = data[i * 4 + 3] > 110 ? 0.75 : 0;
+    };
+    const layout = () => {
+      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);
+      cols = Math.ceil(W / pitch) + 1;
+      rows = Math.ceil(H / pitch) + 1;
+      stamp();
+      lift = Float32Array.from(rest);
+    };
+    const draw = () => {
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, W, H);
+      for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+          const h = lift[r * cols + c];
+          const x = c * pitch;
+          const y = r * pitch;
+          const up = h * rise;
+          if (up > 0.5) {
+            ctx.fillStyle = mix(base, [0, 0, 0], 0.45);
+            ctx.fillRect(x, y - up + pegSize, pegSize, up);
+          }
+          ctx.fillStyle = mix(base, h > 0.6 ? peak : top, Math.min(1, h * 1.2));
+          ctx.fillRect(x, y - up, pegSize, pegSize);
+        }
+      }
+    };
+    const tick = (now) => {
+      const dt = Math.max(0, Math.min(0.05, (now - last) / 1e3));
+      last = now;
+      const ease = reduced ? 1 : 1 - Math.exp(-dt / Math.max(0.05, settle / 4));
+      const press = 1 - Math.exp(-dt * 30);
+      let moving = false;
+      for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+          const i = r * cols + c;
+          const d = Math.hypot(c * pitch + pegSize / 2 - hand.x, r * pitch + pegSize / 2 - hand.y);
+          const pushed = d < reach ? (1 - d / reach) ** 1.4 * (hand.down ? 1 : 0.7) : 0;
+          const goal = Math.max(rest[i], pushed);
+          const k = goal > lift[i] ? reduced ? 1 : press : ease;
+          lift[i] += (goal - lift[i]) * k;
+          if (Math.abs(goal - lift[i]) > 2e-3) moving = true;
+          else lift[i] = goal;
+        }
+      }
+      draw();
+      raf = moving && visible && !document.hidden ? requestAnimationFrame(tick) : 0;
+    };
+    const wake = () => {
+      if (raf || !visible || document.hidden) return;
+      last = performance.now();
+      raf = requestAnimationFrame(tick);
+    };
+    const local = (event) => {
+      const rect = canvas.getBoundingClientRect();
+      hand.x = event.clientX - rect.left;
+      hand.y = event.clientY - rect.top;
+    };
+    const onMove = (event) => {
+      local(event);
+      wake();
+    };
+    const onDown = (event) => {
+      local(event);
+      hand.down = true;
+      wake();
+    };
+    const onUp = () => {
+      hand.down = false;
+      wake();
+    };
+    const onLeave = () => {
+      hand.x = -1e4;
+      hand.y = -1e4;
+      hand.down = false;
+      wake();
+    };
+    const resize = new ResizeObserver(() => {
+      layout();
+      draw();
+    });
+    resize.observe(canvas);
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      wake();
+    });
+    observer.observe(canvas);
+    const onVisibility = () => wake();
+    document.addEventListener("visibilitychange", onVisibility);
+    canvas.addEventListener("pointermove", onMove);
+    canvas.addEventListener("pointerdown", onDown);
+    window.addEventListener("pointerup", onUp);
+    canvas.addEventListener("pointerleave", onLeave);
+    document.fonts?.ready.then(() => {
+      if (!canvas.isConnected) return;
+      layout();
+      draw();
+    });
+    layout();
+    draw();
+    return () => {
+      cancelAnimationFrame(raf);
+      resize.disconnect();
+      observer.disconnect();
+      document.removeEventListener("visibilitychange", onVisibility);
+      canvas.removeEventListener("pointermove", onMove);
+      canvas.removeEventListener("pointerdown", onDown);
+      window.removeEventListener("pointerup", onUp);
+      canvas.removeEventListener("pointerleave", onLeave);
+    };
+  }, [pegSize, spacing, rise, reach, settle, imprint, imprintFont, imprintHeight, pegColor, topColor, peakColor]);
+  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className, "aria-hidden": "true", style: { display: "block", width: "100%", height, background: backgroundColor, touchAction: "pan-y", ...style } });
+}
+export {
+  PegBoard as default
+};

package/dist/PinCard.d.ts

@@ -0,0 +1,21 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface PinCardProps {
+    children?: ReactNode;
+    /** The label pill above the pin. */
+    title?: ReactNode;
+    /** Makes the whole card a link. */
+    href?: string;
+    target?: string;
+    width?: number;
+    radius?: number;
+    backgroundColor?: string;
+    labelColor?: string;
+    textColor?: string;
+    lineColor?: string;
+    /** Beam, pin and glow. */
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function PinCard({ children, title, href, target, width, radius, backgroundColor, labelColor, textColor, lineColor, accentColor, fontFamily, className, style }: PinCardProps): import("react").JSX.Element;