bits-lab 0.0.0-stage → 0.1.0

package/dist/DiffReveal.js

@@ -0,0 +1,247 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useMemo, useRef, useState } from "react";
+const STYLE_ID = "bl-diff-reveal";
+const CSS = `
+.bl-diff { display: grid; gap: 12px; color: var(--bl-ink); font-family: var(--bl-font); }
+.bl-diff__text { margin: 0; font-size: var(--bl-size); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
+.bl-diff__del { border-radius: 4px; transition: opacity 260ms, background-color 260ms; }
+.bl-diff__del[data-phase="strike"] { background: color-mix(in srgb, var(--bl-del) 22%, transparent); color: var(--bl-del); text-decoration: line-through; text-decoration-thickness: 2px; }
+.bl-diff__del[data-phase="gone"] { display: none; }
+.bl-diff__ins { border-radius: 4px; background: color-mix(in srgb, var(--bl-ins) 24%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bl-ins) 40%, transparent); transition: background-color 900ms, box-shadow 900ms; }
+.bl-diff[data-done] .bl-diff__ins { background: color-mix(in srgb, var(--bl-ins) 10%, transparent); box-shadow: none; }
+.bl-diff[data-settled] .bl-diff__ins { background: transparent; }
+.bl-diff__caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -0.15em; background: var(--bl-ins); animation: bl-diff-blink 900ms steps(1) infinite; }
+.bl-diff__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--bl-muted); font-size: 13px; }
+.bl-diff__btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 999px; background: var(--bl-chip); color: var(--bl-ink); font: inherit; cursor: pointer; }
+.bl-diff__btn:hover { box-shadow: 0 0 0 1px var(--bl-ins); }
+.bl-diff__btn:focus-visible { outline: 2px solid var(--bl-ins); outline-offset: 2px; }
+.bl-diff__btn[aria-pressed="true"] { background: color-mix(in srgb, var(--bl-ins) 22%, var(--bl-chip)); }
+.bl-diff__speeds { display: inline-flex; gap: 4px; }
+.bl-diff__count { margin-left: auto; font-variant-numeric: tabular-nums; }
+.bl-diff__count b { font-weight: 600; }
+.bl-diff__count .bl-diff__plus { color: var(--bl-ins); }
+.bl-diff__count .bl-diff__minus { color: var(--bl-del); }
+.bl-diff__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-diff-blink { 50% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .bl-diff__del, .bl-diff__ins { transition: none; } .bl-diff__caret { animation: none; } }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+function diffWords(before, after) {
+  const a = before.split(/(\s+)/).filter(Boolean);
+  const b = after.split(/(\s+)/).filter(Boolean);
+  const ops = [];
+  const push = (type, text) => {
+    const last = ops[ops.length - 1];
+    if (last && last.type === type) last.text += text;
+    else ops.push({ type, text });
+  };
+  if (a.length * b.length > 25e4) {
+    push("del", before);
+    push("ins", after);
+    return ops;
+  }
+  const lcs = Array.from({ length: a.length + 1 }, () => new Uint16Array(b.length + 1));
+  for (let i2 = a.length - 1; i2 >= 0; i2--) for (let j2 = b.length - 1; j2 >= 0; j2--) lcs[i2][j2] = a[i2] === b[j2] ? lcs[i2 + 1][j2 + 1] + 1 : Math.max(lcs[i2 + 1][j2], lcs[i2][j2 + 1]);
+  let i = 0;
+  let j = 0;
+  while (i < a.length && j < b.length) {
+    if (a[i] === b[j]) {
+      push("same", a[i]);
+      i++;
+      j++;
+    } else if (lcs[i + 1][j] >= lcs[i][j + 1]) push("del", a[i++]);
+    else push("ins", b[j++]);
+  }
+  while (i < a.length) push("del", a[i++]);
+  while (j < b.length) push("ins", b[j++]);
+  return tidy(ops);
+}
+function tidy(ops) {
+  const out = [];
+  let del = "";
+  let ins = "";
+  const flush = () => {
+    if (del) out.push({ type: "del", text: del });
+    if (ins) out.push({ type: "ins", text: ins });
+    del = "";
+    ins = "";
+  };
+  ops.forEach((op, k) => {
+    if (op.type === "del") del += op.text;
+    else if (op.type === "ins") ins += op.text;
+    else if ((del || ins) && /^\s+$/.test(op.text) && ops[k + 1] && ops[k + 1].type !== "same") {
+      del += op.text;
+      ins += op.text;
+    } else {
+      flush();
+      out.push(op);
+    }
+  });
+  flush();
+  return out;
+}
+const SPEEDS = [0.5, 1, 2];
+const countWords = (text) => text.split(/\s+/).filter(Boolean).length;
+function DiffReveal({
+  before = "",
+  after = "",
+  autoPlay = true,
+  threshold = 0.4,
+  replayKey,
+  charsPerSecond = 45,
+  strikeDuration = 520,
+  stagger = 220,
+  showControls = true,
+  onDone,
+  as = "p",
+  fontSize = 18,
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  chipColor = "#262b44",
+  insertColor = "#38b764",
+  deleteColor = "#ef7d57",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const ref = useRef(null);
+  const ops = useMemo(() => diffWords(before, after), [before, after]);
+  const [clock, setClock] = useState(0);
+  const [playing, setPlaying] = useState(false);
+  const [speed, setSpeed] = useState(1);
+  const doneRef = useRef(onDone);
+  doneRef.current = onDone;
+  const Tag = as;
+  const plan = useMemo(() => {
+    let d = 0;
+    let c = 0;
+    const steps = ops.map((op) => {
+      if (op.type === "del") {
+        const at = d++ * stagger;
+        return { strike: at, gone: at + strikeDuration };
+      }
+      if (op.type === "ins") {
+        const start = c;
+        c += op.text.length;
+        return { start };
+      }
+      return null;
+    });
+    const typeAt = d ? (d - 1) * stagger + strikeDuration + 160 : 0;
+    const total = typeAt + c / charsPerSecond * 1e3;
+    const stats = ops.reduce((s, op) => op.type === "same" ? s : { ...s, [op.type]: s[op.type] + countWords(op.text) }, { ins: 0, del: 0 });
+    return { steps, typeAt, total, stats };
+  }, [ops, stagger, strikeDuration, charsPerSecond]);
+  const done = clock >= plan.total;
+  useEffect(() => {
+    if (!playing) return void 0;
+    let frame = 0;
+    let last = performance.now();
+    const tick = (now) => {
+      const dt = (now - last) * speed;
+      last = now;
+      setClock((c) => {
+        const next = Math.min(plan.total, c + dt);
+        if (next >= plan.total) setPlaying(false);
+        return next;
+      });
+      frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [playing, speed, plan.total]);
+  useEffect(() => {
+    if (done && clock > 0) doneRef.current?.();
+  }, [done, clock]);
+  const play = () => {
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+      setClock(plan.total);
+      return;
+    }
+    setClock(0);
+    setPlaying(true);
+  };
+  useEffect(() => {
+    setPlaying(false);
+    setClock(0);
+    if (!autoPlay) return void 0;
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        io.disconnect();
+        play();
+      },
+      { threshold }
+    );
+    io.observe(ref.current);
+    return () => io.disconnect();
+  }, [before, after, replayKey, autoPlay]);
+  const typed = Math.max(0, (clock - plan.typeAt) / 1e3 * charsPerSecond);
+  const idle = clock === 0 && !playing;
+  let caretPlaced = false;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: `bl-diff ${className}`,
+      "data-done": done && clock > 0 || void 0,
+      "data-settled": done && clock > 0 && !playing || void 0,
+      style: { "--bl-size": `${fontSize}px`, "--bl-ink": textColor, "--bl-muted": mutedColor, "--bl-chip": chipColor, "--bl-ins": insertColor, "--bl-del": deleteColor, "--bl-font": fontFamily, ...style },
+      children: [
+        /* @__PURE__ */ jsx(Tag, { className: "bl-diff__text", "aria-hidden": "true", children: ops.map((op, i) => {
+          if (op.type === "same") return /* @__PURE__ */ jsx("span", { children: op.text }, i);
+          const step = plan.steps[i];
+          if (op.type === "del") {
+            const phase = idle ? "idle" : clock >= step.gone ? "gone" : clock >= step.strike ? "strike" : "idle";
+            return /* @__PURE__ */ jsx("span", { className: "bl-diff__del", "data-phase": phase, children: op.text }, i);
+          }
+          const shown = idle ? 0 : Math.min(op.text.length, Math.floor(typed - step.start));
+          if (shown <= 0) return null;
+          const caret = !caretPlaced && playing && shown < op.text.length;
+          if (caret) caretPlaced = true;
+          return /* @__PURE__ */ jsxs("span", { className: "bl-diff__ins", children: [
+            op.text.slice(0, shown),
+            caret && /* @__PURE__ */ jsx("span", { className: "bl-diff__caret" })
+          ] }, i);
+        }) }),
+        /* @__PURE__ */ jsx("span", { className: "bl-diff__sr", children: after }),
+        showControls && /* @__PURE__ */ jsxs("div", { className: "bl-diff__bar", children: [
+          /* @__PURE__ */ jsxs("button", { type: "button", className: "bl-diff__btn", onClick: play, children: [
+            /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: idle ? /* @__PURE__ */ jsx("path", { d: "M4 2.5v9l7-4.5z", fill: "currentColor" }) : /* @__PURE__ */ jsx("path", { d: "M11.5 5.5A5 5 0 0 0 2.6 4.4M2.5 2v2.5H5M2.5 8.5a5 5 0 0 0 8.9 1.1" }) }),
+            idle ? "Play edit" : "Replay"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "bl-diff__speeds", role: "group", "aria-label": "Speed", children: SPEEDS.map((s) => /* @__PURE__ */ jsxs("button", { type: "button", className: "bl-diff__btn", "aria-pressed": speed === s, onClick: () => setSpeed(s), children: [
+            s,
+            "\xD7"
+          ] }, s)) }),
+          /* @__PURE__ */ jsxs("span", { className: "bl-diff__count", children: [
+            /* @__PURE__ */ jsxs("b", { className: "bl-diff__plus", children: [
+              "+",
+              plan.stats.ins
+            ] }),
+            " ",
+            /* @__PURE__ */ jsxs("b", { className: "bl-diff__minus", children: [
+              "\u2212",
+              plan.stats.del
+            ] }),
+            " words"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "bl-diff__sr", "aria-live": "polite", children: done && clock > 0 ? `Edit applied: ${plan.stats.ins} words inserted, ${plan.stats.del} words deleted.` : "" })
+      ]
+    }
+  );
+}
+export {
+  DiffReveal as default,
+  diffWords
+};

package/dist/DirectionHover.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode, type HTMLAttributes } from 'react';
+export interface DirectionHoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The card's base (an image, usually). */
+    children?: ReactNode;
+    /** Slides in from the edge the pointer entered. */
+    overlay?: ReactNode;
+    duration?: number;
+    /** How much the base zooms while open. */
+    zoom?: number;
+    radius?: number;
+    overlayColor?: string;
+    textColor?: string;
+    accentColor?: string;
+}
+export default function DirectionHover({ children, overlay, duration, zoom, radius, overlayColor, textColor, accentColor, className, style, ...rest }: DirectionHoverProps): import("react").JSX.Element;

package/dist/DirectionHover.js

@@ -0,0 +1,90 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-direction-hover";
+const CSS = `
+.bl-dh { position: relative; overflow: hidden; border-radius: var(--bl-radius); isolation: isolate; outline: none; }
+.bl-dh:focus-visible { box-shadow: 0 0 0 3px var(--bl-accent); }
+.bl-dh__base { display: block; transition: transform var(--bl-dur) cubic-bezier(.2,.9,.25,1); }
+.bl-dh[data-open] .bl-dh__base { transform: scale(var(--bl-zoom)); }
+.bl-dh__overlay { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; box-sizing: border-box; background: var(--bl-overlay); color: var(--bl-ink); transform: translate(var(--bl-x, 0), var(--bl-y, 100%)); transition: transform var(--bl-dur) cubic-bezier(.2,.9,.25,1); }
+.bl-dh[data-open] .bl-dh__overlay { transform: translate(0, 0); }
+.bl-dh[data-instant] .bl-dh__overlay { transition: none; }
+@media (prefers-reduced-motion: reduce) { .bl-dh__overlay { transform: none; opacity: 0; transition: opacity 150ms; } .bl-dh[data-open] .bl-dh__overlay { opacity: 1; } .bl-dh__base { transition: 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 OFFSETS = { top: ["0", "-100%"], right: ["100%", "0"], bottom: ["0", "100%"], left: ["-100%", "0"] };
+function edgeOf(rect, x, y) {
+  const dx = (x - rect.left - rect.width / 2) / (rect.width / 2);
+  const dy = (y - rect.top - rect.height / 2) / (rect.height / 2);
+  return Math.abs(dx) > Math.abs(dy) ? dx > 0 ? "right" : "left" : dy > 0 ? "bottom" : "top";
+}
+function DirectionHover({
+  children,
+  overlay,
+  duration = 320,
+  zoom = 1.06,
+  radius = 14,
+  overlayColor = "linear-gradient(to top, rgba(11,11,20,0.92), rgba(11,11,20,0.55))",
+  textColor = "#f4f4f4",
+  accentColor = "#73eff7",
+  className = "",
+  style,
+  ...rest
+}) {
+  useStyles();
+  const ref = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [from, setFrom] = useState("bottom");
+  const [instant, setInstant] = useState(false);
+  const enter = (event) => {
+    const side = edgeOf(ref.current.getBoundingClientRect(), event.clientX, event.clientY);
+    setInstant(true);
+    setFrom(side);
+    requestAnimationFrame(
+      () => requestAnimationFrame(() => {
+        setInstant(false);
+        setOpen(true);
+      })
+    );
+  };
+  const leave = (event) => {
+    setFrom(edgeOf(ref.current.getBoundingClientRect(), event.clientX, event.clientY));
+    setOpen(false);
+  };
+  const [x, y] = OFFSETS[from];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: `bl-dh ${className}`,
+      "data-open": open || void 0,
+      "data-instant": instant || void 0,
+      onPointerEnter: (event) => event.pointerType === "mouse" && enter(event),
+      onPointerLeave: (event) => event.pointerType === "mouse" && leave(event),
+      onFocus: () => {
+        setFrom("bottom");
+        setOpen(true);
+      },
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false);
+      },
+      style: { "--bl-x": x, "--bl-y": y, "--bl-dur": `${duration}ms`, "--bl-zoom": zoom, "--bl-radius": `${radius}px`, "--bl-overlay": overlayColor, "--bl-ink": textColor, "--bl-accent": accentColor, ...style },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "bl-dh__base", children }),
+        /* @__PURE__ */ jsx("div", { className: "bl-dh__overlay", children: overlay })
+      ]
+    }
+  );
+}
+export {
+  DirectionHover as default
+};

package/dist/Discard.d.ts

@@ -0,0 +1,18 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface DiscardProps {
+    /** The thing to throw away. */
+    children?: ReactNode;
+    /** Set to play the effect. */
+    discarded?: boolean;
+    /** Falling strips, a balled-up toss, or torn in two. */
+    effect?: 'shred' | 'crumple' | 'tear';
+    /** Shredder strips. */
+    strips?: number;
+    /** Effect length in ms. */
+    duration?: number;
+    /** Called when the effect has finished: remove the content here. */
+    onDiscarded?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function Discard({ children, discarded, effect, strips, duration, onDiscarded, className, style }: DiscardProps): import("react").JSX.Element;

package/dist/Discard.js

@@ -0,0 +1,61 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useState } from "react";
+const STYLE_ID = "bl-discard";
+const CSS = `
+.bl-discard { position: relative; }
+.bl-discard__live[data-hidden] { visibility: hidden; }
+.bl-discard__fx { position: absolute; inset: 0; pointer-events: none; }
+.bl-discard__piece { position: absolute; inset: 0; overflow: hidden; }
+.bl-discard[data-effect="shred"] .bl-discard__piece { clip-path: inset(0 calc(100% - var(--r)) 0 var(--l)); animation: bl-discard-strip var(--bl-dur) cubic-bezier(.5,0,.8,.4) both; animation-delay: calc(var(--i) * 25ms); }
+.bl-discard[data-effect="tear"] .bl-discard__piece { clip-path: var(--edge); animation: bl-discard-tear var(--bl-dur) cubic-bezier(.4,0,.7,.5) both; }
+.bl-discard[data-effect="crumple"] .bl-discard__piece { animation: bl-discard-crumple var(--bl-dur) steps(9) both; }
+.bl-discard[data-effect="fade"] .bl-discard__piece { animation: bl-discard-fade var(--bl-dur) ease both; }
+@keyframes bl-discard-strip { 20% { transform: translateY(6%); } to { transform: translateY(160%) rotate(calc(var(--s) * 6deg)); opacity: 0; } }
+@keyframes bl-discard-tear { 25% { transform: translateX(calc(var(--s) * 4%)) rotate(calc(var(--s) * 2deg)); } to { transform: translate(calc(var(--s) * 40%), 70%) rotate(calc(var(--s) * 18deg)); opacity: 0; } }
+@keyframes bl-discard-crumple { 40% { transform: scale(0.55) rotate(-25deg); border-radius: 40%; filter: brightness(0.8) contrast(1.4); } 60% { transform: scale(0.3) rotate(40deg); border-radius: 50%; } to { transform: translate(120%, -60%) scale(0.12) rotate(220deg); border-radius: 50%; opacity: 0; } }
+@keyframes bl-discard-fade { to { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .bl-discard .bl-discard__piece { animation: bl-discard-fade 200ms ease both !important; clip-path: none !important; } }
+`;
+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 tearEdges(teeth) {
+  const zig = Array.from({ length: teeth + 1 }, (_, i) => [50 + (i % 2 ? 4 : -4), i / teeth * 100]);
+  const line = zig.map(([x, y]) => `${x}% ${y}%`).join(", ");
+  const back = [...zig].reverse().map(([x, y]) => `${x}% ${y}%`).join(", ");
+  return [`polygon(0 0, ${line}, 0 100%)`, `polygon(100% 0, 100% 100%, ${back})`];
+}
+function Discard({ children, discarded = false, effect = "shred", strips = 8, duration = 900, onDiscarded, className = "", style }) {
+  useStyles();
+  const [playing, setPlaying] = useState(false);
+  useEffect(() => {
+    if (!discarded) {
+      setPlaying(false);
+      return void 0;
+    }
+    setPlaying(true);
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const total = reduced ? 220 : duration + (effect === "shred" ? strips * 25 : 0);
+    const id = setTimeout(() => onDiscarded?.(), total);
+    return () => clearTimeout(id);
+  }, [discarded]);
+  let pieces = [];
+  if (playing) {
+    if (effect === "shred") pieces = Array.from({ length: strips }, (_, i) => ({ "--l": `${i / strips * 100}%`, "--r": `${(i + 1) / strips * 100}%`, "--i": i, "--s": i % 2 ? 1 : -1 }));
+    else if (effect === "tear") pieces = tearEdges(10).map((edge, i) => ({ "--edge": edge, "--s": i ? 1 : -1 }));
+    else pieces = [{}];
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `bl-discard ${className}`, "data-effect": effect, style: { "--bl-dur": `${duration}ms`, ...style }, children: [
+    /* @__PURE__ */ jsx("div", { className: "bl-discard__live", "data-hidden": playing || void 0, children }),
+    playing && /* @__PURE__ */ jsx("div", { className: "bl-discard__fx", "aria-hidden": "true", children: pieces.map((vars, i) => /* @__PURE__ */ jsx("div", { className: "bl-discard__piece", style: vars, children }, i)) })
+  ] });
+}
+export {
+  Discard as default
+};

package/dist/DitherField.d.ts

@@ -0,0 +1,15 @@
+import { type CSSProperties } from 'react';
+export interface DitherFieldProps {
+    /** What moves underneath: drifting clouds, rolling waves or a pulsing ring. */
+    pattern?: 'noise' | 'waves' | 'radial';
+    /** Two or more colours, darkest first. */
+    palette?: string[];
+    scale?: number;
+    speed?: number;
+    pixelSize?: number;
+    /** The pointer adds a warm spot. */
+    pointer?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function DitherField({ pattern, palette, scale, speed, pixelSize, pointer, className, style }: DitherFieldProps): import("react").JSX.Element;

package/dist/DitherField.js

@@ -0,0 +1,157 @@
+'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 BAYER = [0, 32, 8, 40, 2, 34, 10, 42, 48, 16, 56, 24, 50, 18, 58, 26, 12, 44, 4, 36, 14, 46, 6, 38, 60, 28, 52, 20, 62, 30, 54, 22, 3, 35, 11, 43, 1, 33, 9, 41, 51, 19, 59, 27, 49, 17, 57, 25, 15, 47, 7, 39, 13, 45, 5, 37, 63, 31, 55, 23, 61, 29, 53, 21].map((v) => (v + 0.5) / 64);
+const hash = (x, y, z) => {
+  let n = Math.imul(x, 374761393) ^ Math.imul(y, 668265263) ^ Math.imul(z, 1440662683);
+  n = Math.imul(n ^ n >>> 13, 1274126177);
+  return ((n ^ n >>> 16) >>> 0) / 4294967296;
+};
+const fade = (t) => t * t * (3 - 2 * t);
+function noise(x, y, z) {
+  const xi = Math.floor(x);
+  const yi = Math.floor(y);
+  const zi = Math.floor(z);
+  const u = fade(x - xi);
+  const v = fade(y - yi);
+  const w = fade(z - zi);
+  const lerp = (a, b, k) => a + (b - a) * k;
+  const corner = (dx, dy, dz) => hash(xi + dx, yi + dy, zi + dz);
+  return lerp(
+    lerp(lerp(corner(0, 0, 0), corner(1, 0, 0), u), lerp(corner(0, 1, 0), corner(1, 1, 0), u), v),
+    lerp(lerp(corner(0, 0, 1), corner(1, 0, 1), u), lerp(corner(0, 1, 1), corner(1, 1, 1), u), v),
+    w
+  );
+}
+function DitherField({
+  pattern = "noise",
+  palette = ["#1a1c2c", "#5d275d", "#b13e53", "#ef7d57", "#ffcd75"],
+  scale = 1,
+  speed = 1,
+  pixelSize = 3,
+  pointer = true,
+  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 colors = palette.map(hexToRgb);
+    const steps = colors.length - 1;
+    const hand = { x: -1, y: -1, glow: 0, on: false };
+    let w = 0;
+    let h = 0;
+    let img = null;
+    let t = 0;
+    let raf = 0;
+    let last = 0;
+    let visible = true;
+    const fit = () => {
+      w = Math.max(1, Math.ceil(canvas.clientWidth / pixelSize));
+      h = Math.max(1, Math.ceil(canvas.clientHeight / pixelSize));
+      canvas.width = w;
+      canvas.height = h;
+      img = ctx.createImageData(w, h);
+    };
+    const value = (x, y) => {
+      const u = x / w;
+      const v = y / h;
+      const k = 3 * scale;
+      if (pattern === "waves") return 0.5 + 0.25 * Math.sin(u * k * 4 + Math.sin(v * k * 2 + t * 0.7) * 1.5 + t * 0.5) + 0.25 * Math.sin(v * k * 3 - t * 0.4);
+      if (pattern === "radial") {
+        const d = Math.hypot(u - 0.5, (v - 0.5) * (h / w)) * 2;
+        return 0.5 + 0.5 * Math.cos(d * k * 3 - t * 1.2);
+      }
+      const n = noise(u * k * 2, v * k * 2 * (h / w), t * 0.25) * 0.65 + noise(u * k * 5, v * k * 5 * (h / w), t * 0.4 + 9) * 0.35;
+      return (n - 0.22) / 0.56;
+    };
+    const frame = () => {
+      const d = img.data;
+      for (let y = 0; y < h; y++) {
+        for (let x = 0; x < w; x++) {
+          let v = value(x, y);
+          if (hand.glow > 0.01) {
+            const dx = (x - hand.x) / w;
+            const dy = (y - hand.y) / w;
+            v += Math.exp(-(dx * dx + dy * dy) / 0.012) * 0.6 * hand.glow;
+          }
+          const pos = Math.max(0, Math.min(steps, v * steps));
+          const base = Math.min(steps - 1, Math.floor(pos));
+          const pick = pos - base > BAYER[(y & 7) * 8 + (x & 7)] ? base + 1 : base;
+          const c = colors[pick];
+          const i = (y * w + x) * 4;
+          d[i] = c[0];
+          d[i + 1] = c[1];
+          d[i + 2] = c[2];
+          d[i + 3] = 255;
+        }
+      }
+      ctx.putImageData(img, 0, 0);
+    };
+    const tick = (now) => {
+      const dt = Math.max(0, Math.min(0.05, (now - last) / 1e3));
+      last = now;
+      t += dt * speed;
+      hand.glow += ((hand.on ? 1 : 0) - hand.glow) * Math.min(1, dt * 5);
+      frame();
+      raf = visible && !document.hidden ? requestAnimationFrame(tick) : 0;
+    };
+    const start = () => {
+      if (raf || reduced || !visible || document.hidden) return;
+      last = performance.now();
+      raf = requestAnimationFrame(tick);
+    };
+    const onMove = (event) => {
+      if (!pointer) return;
+      const r = canvas.getBoundingClientRect();
+      hand.x = (event.clientX - r.left) / r.width * w;
+      hand.y = (event.clientY - r.top) / r.height * h;
+      hand.on = true;
+      if (reduced) {
+        hand.glow = 1;
+        frame();
+      }
+    };
+    const onLeave = () => {
+      hand.on = false;
+      if (reduced) {
+        hand.glow = 0;
+        frame();
+      }
+    };
+    const resize = new ResizeObserver(() => {
+      fit();
+      frame();
+    });
+    resize.observe(canvas);
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      start();
+    });
+    observer.observe(canvas);
+    document.addEventListener("visibilitychange", start);
+    canvas.addEventListener("pointermove", onMove);
+    canvas.addEventListener("pointerleave", onLeave);
+    fit();
+    frame();
+    start();
+    return () => {
+      cancelAnimationFrame(raf);
+      resize.disconnect();
+      observer.disconnect();
+      document.removeEventListener("visibilitychange", start);
+      canvas.removeEventListener("pointermove", onMove);
+      canvas.removeEventListener("pointerleave", onLeave);
+    };
+  }, [pattern, palette.join(), scale, speed, pixelSize, pointer]);
+  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, "aria-hidden": "true", className, style: { display: "block", width: "100%", height: "100%", background: palette[0], imageRendering: "pixelated", touchAction: "pan-y", ...style } });
+}
+export {
+  DitherField as default
+};

package/dist/DotGlobe.d.ts

@@ -0,0 +1,48 @@
+import { type CSSProperties } from 'react';
+/** [latitude, longitude] in degrees. */
+export type LatLon = [number, number];
+export interface GlobeMarker {
+    lat: number;
+    lon: number;
+    /** Also feeds the globe's accessible description. */
+    label?: string;
+    color?: string;
+}
+export interface GlobeArc {
+    from: LatLon;
+    to: LatLon;
+}
+export interface DotGlobeProps {
+    /** Max width, in px (the globe is square and shrinks to fit). */
+    size?: number;
+    /** Fibonacci samples over the whole sphere; roughly a third land on land. */
+    dotCount?: number;
+    /** Dot scale. */
+    dotSize?: number;
+    /** Square dots, for a pixel look. */
+    square?: boolean;
+    dotColor?: string;
+    oceanColor?: string;
+    glowColor?: string;
+    arcColor?: string;
+    markerColor?: string;
+    markers?: GlobeMarker[];
+    /** Great-circle arcs with a traveling comet. Longer arcs fly higher. */
+    arcs?: GlobeArc[];
+    /** Spin when idle; resumes after a drag settles. */
+    autoRotate?: boolean;
+    /** Spin speed, in degrees per second. */
+    rotateSpeed?: number;
+    /** Longitude facing the viewer at start. */
+    initialLon?: number;
+    /** Latitude tilted toward the viewer at start. */
+    initialLat?: number;
+    /** Drag with inertia (arrow keys always work when focused). */
+    draggable?: boolean;
+    /** Accessible name. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function isLand(lat: number, lon: number): boolean;
+export default function DotGlobe({ size, dotCount, dotSize, square, dotColor, oceanColor, glowColor, arcColor, markerColor, markers, arcs, autoRotate, rotateSpeed, initialLon, initialLat, draggable, label, className, style }: DotGlobeProps): import("react").JSX.Element;