bits-lab 0.0.0-stage → 0.1.2

package/dist/RangeDual.d.ts

@@ -0,0 +1,34 @@
+import { type CSSProperties } from 'react';
+export type Ends = [number, number];
+export interface RangeDualProps {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: Ends;
+    defaultValue?: Ends;
+    onValueChange?: (value: Ends) => void;
+    /** Smallest allowed distance between the ends. */
+    minGap?: number;
+    /** Bin counts drawn behind the track. */
+    histogram?: number[];
+    /** Text for bubbles, labels and screen readers. */
+    format?: (value: number) => string;
+    label?: string;
+    showInputs?: boolean;
+    showScale?: boolean;
+    width?: number;
+    thumbSize?: number;
+    histogramHeight?: number;
+    backgroundColor?: string;
+    fieldColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    dimColor?: string;
+    trackColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function RangeDual({ min, max, step, value, defaultValue, onValueChange, minGap, histogram, format, label, showInputs, showScale, width, thumbSize, histogramHeight, backgroundColor, fieldColor, textColor, mutedColor, dimColor, trackColor, lineColor, accentColor, fontFamily, className, style }: RangeDualProps): import("react").JSX.Element;

package/dist/RangeDual.js

@@ -0,0 +1,238 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-range-dual";
+const CSS = `
+.bl-range { width: 100%; max-width: var(--bl-w); padding-top: 34px; font-family: var(--bl-font); color: var(--bl-ink); }
+.bl-range__label { display: block; margin: -34px 0 18px; color: var(--bl-muted); font-size: 13px; font-weight: 600; }
+.bl-range__hist { display: flex; align-items: flex-end; gap: 2px; height: var(--bl-hist-h); padding: 0 calc(var(--bl-thumb) / 2); }
+.bl-range__bar { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--bl-dim); transition: background-color 160ms; }
+.bl-range__bar[data-in] { background: var(--bl-accent); opacity: 0.55; }
+.bl-range__track { position: relative; height: var(--bl-thumb); margin: 0; touch-action: none; cursor: pointer; }
+.bl-range__rail { position: absolute; left: calc(var(--bl-thumb) / 2); right: calc(var(--bl-thumb) / 2); top: 50%; height: 6px; margin-top: -3px; border-radius: 999px; background: var(--bl-track); }
+.bl-range__fill { position: absolute; top: 0; bottom: 0; left: calc(var(--bl-lo) * 100%); right: calc((1 - var(--bl-hi)) * 100%); border-radius: inherit; background: var(--bl-accent); cursor: grab; }
+.bl-range[data-dragging="both"] .bl-range__fill { cursor: grabbing; }
+.bl-range__thumb { position: absolute; top: 0; left: calc(var(--p) * (100% - var(--bl-thumb))); width: var(--bl-thumb); height: var(--bl-thumb); box-sizing: border-box; border-radius: 50%; background: var(--bl-ink); box-shadow: 0 0 0 3px var(--bl-accent), 0 4px 12px rgba(0,0,0,0.4); outline: none; transition: transform 140ms cubic-bezier(.3,1.6,.5,1); }
+.bl-range__thumb:focus-visible { box-shadow: 0 0 0 3px var(--bl-accent), 0 0 0 7px color-mix(in srgb, var(--bl-accent) 35%, transparent); }
+.bl-range__thumb[data-active] { transform: scale(1.18); z-index: 2; }
+.bl-range__tip { position: absolute; left: 50%; bottom: calc(100% + 10px); padding: 3px 8px; border-radius: 6px; background: var(--bl-ink); color: var(--bl-bg); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; transform: translate(-50%, 4px) scale(0.85); opacity: 0; pointer-events: none; transition: opacity 120ms, transform 180ms cubic-bezier(.3,1.6,.5,1); }
+.bl-range__tip::after { content: ""; position: absolute; left: 50%; top: 100%; border: 4px solid transparent; border-top-color: var(--bl-ink); transform: translateX(-50%); }
+.bl-range__track:hover .bl-range__tip, .bl-range__thumb:focus-visible .bl-range__tip, .bl-range__thumb[data-active] .bl-range__tip { opacity: 1; transform: translate(-50%, 0) scale(1); }
+.bl-range__scale { display: flex; justify-content: space-between; margin-top: 8px; color: var(--bl-dim); font-size: 12px; }
+.bl-range__inputs { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
+.bl-range__inputs label { display: grid; flex: 1; gap: 4px; color: var(--bl-muted); font-size: 12px; }
+.bl-range__inputs input { height: 36px; padding: 0 10px; box-sizing: border-box; border: 0; border-radius: 10px; background: var(--bl-field); color: var(--bl-ink); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--bl-line); outline: none; }
+.bl-range__inputs input:focus { box-shadow: inset 0 0 0 2px var(--bl-accent); }
+.bl-range__dash { margin-top: 18px; color: var(--bl-dim); }
+@media (prefers-reduced-motion: reduce) { .bl-range__thumb, .bl-range__tip, .bl-range__bar { 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);
+  }, []);
+}
+function RangeDual({
+  min = 0,
+  max = 100,
+  step = 1,
+  value,
+  defaultValue,
+  onValueChange,
+  minGap = 0,
+  histogram,
+  format = (v) => String(v),
+  label = "Range",
+  showInputs = true,
+  showScale = true,
+  width = 460,
+  thumbSize = 22,
+  histogramHeight = 56,
+  backgroundColor = "#1a1c2c",
+  fieldColor = "#0b0b14",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  dimColor = "#566c86",
+  trackColor = "#333c57",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  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 ?? [min, max]);
+  const [lo, hi] = value ?? inner;
+  const [active, setActive] = useState(null);
+  const [drafts, setDrafts] = useState(null);
+  const trackRef = useRef(null);
+  const drag = useRef(null);
+  const span = Math.max(1e-9, max - min);
+  const snap = (v) => {
+    const snapped = Math.round((v - min) / step) * step + min;
+    return Math.max(min, Math.min(max, Number(snapped.toFixed(10))));
+  };
+  const commit = (a, b) => {
+    const next = [a, b];
+    if (value === void 0) setInner(next);
+    onValueChange?.(next);
+  };
+  const setEnd = (which, raw) => {
+    const v = snap(raw);
+    if (which === 0) commit(Math.min(v, hi - minGap), hi);
+    else commit(lo, Math.max(v, lo + minGap));
+  };
+  const valueAt = (clientX) => {
+    const rect = trackRef.current.getBoundingClientRect();
+    const usable = rect.width - thumbSize;
+    return min + Math.max(0, Math.min(1, (clientX - rect.left - thumbSize / 2) / usable)) * span;
+  };
+  const onPointerDown = (event) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    const v = valueAt(event.clientX);
+    const onFill = event.target.classList.contains("bl-range__fill");
+    const nearest = lo === hi ? v > lo ? 1 : 0 : Math.abs(v - lo) <= Math.abs(v - hi) ? 0 : 1;
+    const which = onFill ? "both" : nearest;
+    drag.current = { which, start: v, lo, hi };
+    setActive(which);
+    try {
+      trackRef.current.setPointerCapture(event.pointerId);
+    } catch {
+    }
+    if (which !== "both") setEnd(which, v);
+    trackRef.current.querySelectorAll(".bl-range__thumb")[which === "both" ? 0 : which]?.focus({ preventScroll: true });
+  };
+  const onPointerMove = (event) => {
+    const d = drag.current;
+    if (!d) return;
+    const v = valueAt(event.clientX);
+    if (d.which === "both") {
+      const shift = Math.max(min - d.lo, Math.min(max - d.hi, v - d.start));
+      const nextLo = snap(d.lo + shift);
+      commit(nextLo, nextLo + (d.hi - d.lo));
+    } else setEnd(d.which, v);
+  };
+  const endDrag = () => {
+    drag.current = null;
+    setActive(null);
+  };
+  const onKeyDown = (event, which) => {
+    const big = Math.max(step, (max - min) / 10);
+    const current = which === 0 ? lo : hi;
+    const moves = { ArrowRight: step, ArrowUp: step, ArrowLeft: -step, ArrowDown: -step, PageUp: big, PageDown: -big };
+    let next;
+    if (event.key in moves) next = current + moves[event.key];
+    else if (event.key === "Home") next = which === 0 ? min : lo + minGap;
+    else if (event.key === "End") next = which === 0 ? hi - minGap : max;
+    else return;
+    event.preventDefault();
+    setEnd(which, next);
+  };
+  const p = (v) => (v - min) / span;
+  const bins = histogram ?? [];
+  const peak = Math.max(1, ...bins);
+  const thumb = (which) => {
+    const v = which === 0 ? lo : hi;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "bl-range__thumb",
+        role: "slider",
+        tabIndex: 0,
+        "aria-label": which === 0 ? `${label} minimum` : `${label} maximum`,
+        "aria-valuemin": which === 0 ? min : lo + minGap,
+        "aria-valuemax": which === 0 ? hi - minGap : max,
+        "aria-valuenow": v,
+        "aria-valuetext": format(v),
+        "data-active": active === which || active === "both" || void 0,
+        style: { "--p": p(v) },
+        onKeyDown: (event) => onKeyDown(event, which),
+        children: /* @__PURE__ */ jsx("span", { className: "bl-range__tip", "aria-hidden": "true", children: format(v) })
+      }
+    );
+  };
+  const field = (which, name) => /* @__PURE__ */ jsxs("label", { children: [
+    name,
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "number",
+        inputMode: "decimal",
+        min,
+        max,
+        step,
+        value: drafts?.[which] ?? (which === 0 ? lo : hi),
+        onChange: (event) => setDrafts((d) => ({ ...d ?? {}, [which]: event.target.value })),
+        onBlur: (event) => {
+          if (event.target.value !== "") setEnd(which, Number(event.target.value));
+          setDrafts(null);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Enter") event.currentTarget.blur();
+        },
+        "aria-describedby": `${uid}-label`
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-range ${className}`,
+      role: "group",
+      "aria-labelledby": `${uid}-label`,
+      "data-dragging": active ?? void 0,
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-thumb": `${thumbSize}px`,
+        "--bl-hist-h": `${histogramHeight}px`,
+        "--bl-lo": p(lo),
+        "--bl-hi": p(hi),
+        "--bl-bg": backgroundColor,
+        "--bl-field": fieldColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-dim": dimColor,
+        "--bl-track": trackColor,
+        "--bl-line": lineColor,
+        "--bl-accent": accentColor,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("span", { id: `${uid}-label`, className: "bl-range__label", children: [
+          label,
+          ": ",
+          format(lo),
+          " \u2013 ",
+          format(hi)
+        ] }),
+        bins.length > 0 && /* @__PURE__ */ jsx("div", { className: "bl-range__hist", "aria-hidden": "true", children: bins.map((count, i) => {
+          const binLo = min + i / bins.length * span;
+          const binHi = min + (i + 1) / bins.length * span;
+          return /* @__PURE__ */ jsx("span", { className: "bl-range__bar", "data-in": binHi > lo && binLo < hi || void 0, style: { height: `${count / peak * 100}%` } }, i);
+        }) }),
+        /* @__PURE__ */ jsxs("div", { ref: trackRef, className: "bl-range__track", onPointerDown, onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, children: [
+          /* @__PURE__ */ jsx("div", { className: "bl-range__rail", children: /* @__PURE__ */ jsx("div", { className: "bl-range__fill" }) }),
+          thumb(0),
+          thumb(1)
+        ] }),
+        showScale && /* @__PURE__ */ jsxs("div", { className: "bl-range__scale", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("span", { children: format(min) }),
+          /* @__PURE__ */ jsx("span", { children: format(max) })
+        ] }),
+        showInputs && /* @__PURE__ */ jsxs("div", { className: "bl-range__inputs", children: [
+          field(0, "Minimum"),
+          /* @__PURE__ */ jsx("span", { className: "bl-range__dash", "aria-hidden": "true", children: "\u2013" }),
+          field(1, "Maximum")
+        ] })
+      ]
+    }
+  );
+}
+export {
+  RangeDual as default
+};

package/dist/RatingPips.d.ts

@@ -0,0 +1,25 @@
+import { type CSSProperties } from 'react';
+export interface RatingPipsProps {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    /** How many pips. */
+    max?: number;
+    allowHalf?: boolean;
+    /** Clicking the current value clears it. */
+    clearable?: boolean;
+    /** A picture of the value instead of an input. */
+    readOnly?: boolean;
+    icon?: 'heart' | 'star' | 'gem';
+    /** Accessible name. */
+    label?: string;
+    size?: number;
+    gap?: number;
+    fullColor?: string;
+    emptyColor?: string;
+    previewColor?: string;
+    accentColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function RatingPips({ value: controlled, defaultValue, onChange, max, allowHalf, clearable, readOnly, icon, label, size, gap, fullColor, emptyColor, previewColor, accentColor, className, style }: RatingPipsProps): import("react").JSX.Element;

package/dist/RatingPips.js

@@ -0,0 +1,129 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-rating-pips";
+const CSS = `
+.bl-pips { display: inline-flex; gap: var(--bl-gap); padding: 4px; border-radius: 8px; outline: none; touch-action: manipulation; }
+.bl-pips[data-interactive] { cursor: pointer; }
+.bl-pips:focus-visible { box-shadow: 0 0 0 2px var(--bl-accent); }
+.bl-pips__pip { position: relative; width: var(--bl-size); height: var(--bl-size); }
+.bl-pips__pip svg { position: absolute; inset: 0; width: 100%; height: 100%; shape-rendering: crispEdges; }
+.bl-pips__empty, .bl-pips__full { position: absolute; inset: 0; }
+.bl-pips__empty { color: var(--bl-empty); }
+.bl-pips__full { color: var(--bl-full); clip-path: inset(0 calc(100% - var(--fill) * 100%) 0 0); }
+.bl-pips__pip[data-pop] .bl-pips__full { animation: bl-pips-pop 320ms steps(4); }
+.bl-pips[data-preview] .bl-pips__full { color: var(--bl-preview); }
+@keyframes bl-pips-pop { 40% { transform: scale(1.35) translateY(-12%); } }
+@media (prefers-reduced-motion: reduce) { .bl-pips__pip[data-pop] .bl-pips__full { 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 ICONS = {
+  heart: [".XX..XX.", "XXXXXXXX", "XXXXXXXX", "XXXXXXXX", ".XXXXXX.", "..XXXX..", "...XX...", "........"],
+  star: ["...XX...", "...XX...", "XXXXXXXX", ".XXXXXX.", "..XXXX..", ".XXXXXX.", ".XX..XX.", "X......X"],
+  gem: ["..XXXX..", ".XXXXXX.", "XXXXXXXX", "XXXXXXXX", ".XXXXXX.", "..XXXX..", "...XX...", "........"]
+};
+function Icon({ shape }) {
+  const rows = ICONS[shape] ?? ICONS.heart;
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 8 8", "aria-hidden": "true", children: [
+    rows.map((row, y) => [...row].map((ch, x) => ch === "X" ? /* @__PURE__ */ jsx("rect", { x, y, width: "1", height: "1", fill: "currentColor" }, `${x}-${y}`) : null)),
+    /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "1", height: "1", fill: "rgba(255,255,255,0.55)" })
+  ] });
+}
+function RatingPips({
+  value: controlled,
+  defaultValue = 0,
+  onChange,
+  max = 5,
+  allowHalf = true,
+  clearable = true,
+  readOnly = false,
+  icon = "heart",
+  label = "Rating",
+  size = 28,
+  gap = 4,
+  fullColor = "#b13e53",
+  emptyColor = "#333c57",
+  previewColor = "#ef7d57",
+  accentColor = "#73eff7",
+  className = "",
+  style
+}) {
+  useStyles();
+  const [inner, setInner] = useState(defaultValue);
+  const value = controlled ?? inner;
+  const [preview, setPreview] = useState(null);
+  const [popFrom, setPopFrom] = useState(-1);
+  const [round, setRound] = useState(0);
+  const rootRef = useRef(null);
+  const step = allowHalf ? 0.5 : 1;
+  const shown = preview ?? value;
+  const set = (next) => {
+    const v = Math.max(0, Math.min(max, next));
+    if (v === value) return;
+    if (v > value) {
+      setPopFrom(Math.floor(value));
+      setRound((r) => r + 1);
+    }
+    if (controlled === void 0) setInner(v);
+    onChange?.(v);
+  };
+  const at = (event) => {
+    const pips = [...rootRef.current.querySelectorAll(".bl-pips__pip")];
+    for (let i = 0; i < pips.length; i++) {
+      const r = pips[i].getBoundingClientRect();
+      if (event.clientX <= r.right + gap / 2) return allowHalf && event.clientX < r.left + r.width / 2 ? i + 0.5 : i + 1;
+    }
+    return max;
+  };
+  const say = (v) => `${v} of ${max}`;
+  if (readOnly) {
+    return /* @__PURE__ */ jsx("span", { className: `bl-pips ${className}`, role: "img", "aria-label": `${label}: ${say(value)}`, style: { "--bl-size": `${size}px`, "--bl-gap": `${gap}px`, "--bl-full": fullColor, "--bl-empty": emptyColor, "--bl-preview": previewColor, "--bl-accent": accentColor, ...style }, children: Array.from({ length: max }, (_, i) => /* @__PURE__ */ jsxs("span", { className: "bl-pips__pip", style: { "--fill": Math.max(0, Math.min(1, value - i)) }, children: [
+      /* @__PURE__ */ jsx("span", { className: "bl-pips__empty", children: /* @__PURE__ */ jsx(Icon, { shape: icon }) }),
+      /* @__PURE__ */ jsx("span", { className: "bl-pips__full", children: /* @__PURE__ */ jsx(Icon, { shape: icon }) })
+    ] }, i)) });
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: rootRef,
+      className: `bl-pips ${className}`,
+      role: "slider",
+      tabIndex: 0,
+      "aria-label": label,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      "aria-valuetext": say(value),
+      "data-interactive": "",
+      "data-preview": preview !== null || void 0,
+      onPointerMove: (event) => event.pointerType === "mouse" && setPreview(at(event)),
+      onPointerLeave: () => setPreview(null),
+      onClick: (event) => {
+        const v = at(event);
+        set(clearable && v === value ? 0 : v);
+        setPreview(null);
+      },
+      onKeyDown: (event) => {
+        const moves = { ArrowRight: step, ArrowUp: step, ArrowLeft: -step, ArrowDown: -step, Home: -max, End: max };
+        if (moves[event.key] === void 0) return;
+        event.preventDefault();
+        set(value + moves[event.key]);
+      },
+      style: { "--bl-size": `${size}px`, "--bl-gap": `${gap}px`, "--bl-full": fullColor, "--bl-empty": emptyColor, "--bl-preview": previewColor, "--bl-accent": accentColor, ...style },
+      children: Array.from({ length: max }, (_, i) => /* @__PURE__ */ jsxs("span", { className: "bl-pips__pip", "data-pop": i >= popFrom && i < value && round > 0 || void 0, style: { "--fill": Math.max(0, Math.min(1, shown - i)) }, children: [
+        /* @__PURE__ */ jsx("span", { className: "bl-pips__empty", children: /* @__PURE__ */ jsx(Icon, { shape: icon }) }),
+        /* @__PURE__ */ jsx("span", { className: "bl-pips__full", children: /* @__PURE__ */ jsx(Icon, { shape: icon }) })
+      ] }, `${i}-${i >= popFrom && i < value ? round : 0}`))
+    }
+  );
+}
+export {
+  RatingPips as default
+};

package/dist/RetroHorizon.d.ts

@@ -0,0 +1,27 @@
+import { type CSSProperties } from 'react';
+export interface RetroHorizonProps {
+    /** Grid rows per second rolling toward the viewer; 0 holds still. */
+    speed?: number;
+    /** Horizon height as a share of the box (0–1). */
+    horizon?: number;
+    /** Each art pixel becomes this many screen pixels; 1 renders smooth. */
+    pixelSize?: number;
+    /** Spacing of the vertical grid lines, in art pixels. */
+    gridSpacing?: number;
+    /** Number of horizontal grid lines. */
+    gridLines?: number;
+    showSun?: boolean;
+    showMountains?: boolean;
+    /** Number of stars in the sky. */
+    stars?: number;
+    skyTop?: string;
+    skyBottom?: string;
+    sunTop?: string;
+    sunBottom?: string;
+    mountainColor?: string;
+    gridColor?: string;
+    floorColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function RetroHorizon({ speed, horizon, pixelSize, gridSpacing, gridLines, showSun, showMountains, stars, skyTop, skyBottom, sunTop, sunBottom, mountainColor, gridColor, floorColor, className, style }: RetroHorizonProps): import("react").JSX.Element;

package/dist/RetroHorizon.js

@@ -0,0 +1,169 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+function hexToRgb(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 mix = (a, b, t) => {
+  const [r1, g1, b1] = hexToRgb(a);
+  const [r2, g2, b2] = hexToRgb(b);
+  return `rgb(${Math.round(r1 + (r2 - r1) * t)},${Math.round(g1 + (g2 - g1) * t)},${Math.round(b1 + (b2 - b1) * t)})`;
+};
+function seeded(seed) {
+  let s = seed;
+  return () => {
+    s = s * 16807 % 2147483647;
+    return s / 2147483647;
+  };
+}
+function RetroHorizon({
+  speed = 1,
+  horizon = 0.55,
+  pixelSize = 3,
+  gridSpacing = 12,
+  gridLines = 24,
+  showSun = true,
+  showMountains = true,
+  stars = 60,
+  skyTop = "#0b0b14",
+  skyBottom = "#5d275d",
+  sunTop = "#ffcd75",
+  sunBottom = "#b13e53",
+  mountainColor = "#1a1c2c",
+  gridColor = "#73eff7",
+  floorColor = "#0b0b14",
+  className = "",
+  style
+}) {
+  const wrapRef = useRef(null);
+  const canvasRef = useRef(null);
+  useEffect(() => {
+    const wrap = wrapRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    let w = 0;
+    let h = 0;
+    let frame = 0;
+    let visible = true;
+    let offset = 0;
+    let last = performance.now();
+    let starField = [];
+    let ridge = [];
+    const layout = () => {
+      w = Math.max(40, Math.round(wrap.clientWidth / pixelSize));
+      h = Math.max(30, Math.round(wrap.clientHeight / pixelSize));
+      canvas.width = w;
+      canvas.height = h;
+      const rand = seeded(7);
+      const horizonY = Math.round(h * horizon);
+      starField = Array.from({ length: stars }, () => [Math.floor(rand() * w), Math.floor(rand() * horizonY * 0.85), rand()]);
+      ridge = [];
+      let y = 0;
+      for (let x = 0; x < w; x++) {
+        y += (rand() - 0.5) * 2.2;
+        y = Math.max(-h * 0.12, Math.min(0, y * 0.97));
+        ridge.push(Math.round(y));
+      }
+      draw();
+    };
+    const draw = () => {
+      const horizonY = Math.round(h * horizon);
+      const bands = 10;
+      for (let i = 0; i < bands; i++) {
+        ctx.fillStyle = mix(skyTop, skyBottom, i / (bands - 1));
+        ctx.fillRect(0, Math.floor(i / bands * horizonY), w, Math.ceil(horizonY / bands) + 1);
+      }
+      for (const [x, y, twinkle] of starField) {
+        const t = reduced ? 1 : 0.5 + 0.5 * Math.sin(last / 600 + twinkle * 20);
+        ctx.fillStyle = `rgba(244,244,244,${0.3 + t * 0.6})`;
+        ctx.fillRect(x, y, 1, 1);
+      }
+      if (showSun) {
+        const r = Math.round(Math.min(w, h) * 0.22);
+        const cx = Math.round(w / 2);
+        const cy = horizonY - Math.round(r * 0.35);
+        for (let y = -r; y <= r; y++) {
+          const py = cy + y;
+          if (py >= horizonY) break;
+          const t = (y + r) / (2 * r);
+          if (y > 0) {
+            const stripe = Math.floor(y / r * 6);
+            const gap = 1 + Math.floor(stripe / 2);
+            if (y % (gap + 3) < gap) continue;
+          }
+          const half = Math.round(Math.sqrt(r * r - y * y));
+          ctx.fillStyle = mix(sunTop, sunBottom, t);
+          ctx.fillRect(cx - half, py, half * 2, 1);
+        }
+      }
+      if (showMountains) {
+        ctx.fillStyle = mountainColor;
+        ridge.forEach((dy, x) => {
+          const peak = Math.round(Math.abs(Math.sin(x * 0.045)) * h * 0.07 + Math.abs(Math.sin(x * 0.13 + 1)) * h * 0.03);
+          const top = horizonY - peak + dy;
+          ctx.fillRect(x, top, 1, horizonY - top);
+        });
+      }
+      ctx.fillStyle = floorColor;
+      ctx.fillRect(0, horizonY, w, h - horizonY);
+      ctx.fillStyle = gridColor;
+      const depth = h - horizonY;
+      for (let i = 0; i < gridLines; i++) {
+        const z = (i + offset % 1) / gridLines;
+        const y = horizonY + Math.round(Math.pow(z, 2.2) * depth);
+        if (y <= horizonY || y >= h) continue;
+        ctx.globalAlpha = 0.25 + z * 0.75;
+        ctx.fillRect(0, y, w, 1);
+      }
+      ctx.globalAlpha = 1;
+      const vx = w / 2;
+      const count = Math.ceil(w / gridSpacing) + 6;
+      for (let i = -count; i <= count; i++) {
+        const bottomX = vx + i * gridSpacing * 3;
+        for (let y = horizonY + 1; y < h; y++) {
+          const t = (y - horizonY) / depth;
+          const x = Math.round(vx + (bottomX - vx) * t);
+          if (x < 0 || x >= w) continue;
+          ctx.globalAlpha = 0.2 + t * 0.8;
+          ctx.fillRect(x, y, 1, 1);
+        }
+      }
+      ctx.globalAlpha = 1;
+      ctx.fillStyle = sunTop;
+      ctx.fillRect(0, horizonY, w, 1);
+    };
+    const tick = (now) => {
+      frame = 0;
+      const dt = Math.min(0.1, (now - last) / 1e3);
+      last = now;
+      offset += dt * speed;
+      draw();
+      if (visible) frame = requestAnimationFrame(tick);
+    };
+    const resize = new ResizeObserver(layout);
+    resize.observe(wrap);
+    const io = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible && !frame && !reduced && speed) {
+        last = performance.now();
+        frame = requestAnimationFrame(tick);
+      }
+    });
+    io.observe(wrap);
+    layout();
+    if (!reduced && speed) frame = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(frame);
+      resize.disconnect();
+      io.disconnect();
+    };
+  }, [speed, horizon, pixelSize, gridSpacing, gridLines, showSun, showMountains, stars, skyTop, skyBottom, sunTop, sunBottom, mountainColor, gridColor, floorColor]);
+  return /* @__PURE__ */ jsx("div", { ref: wrapRef, className, style: { position: "relative", width: "100%", height: "100%", overflow: "hidden", ...style }, children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, "aria-hidden": "true", style: { position: "absolute", inset: 0, width: "100%", height: "100%", imageRendering: pixelSize > 1 ? "pixelated" : "auto" } }) });
+}
+export {
+  RetroHorizon as default
+};

package/dist/Reveal.d.ts

@@ -0,0 +1,30 @@
+import { type CSSProperties, type ElementType, type ReactNode } from 'react';
+export interface RevealProps {
+    children?: ReactNode;
+    as?: ElementType;
+    /** The entrance; blocks dissolves a grid of cover blocks in a scattered order. */
+    effect?: 'fade' | 'rise' | 'zoom' | 'wipe' | 'blocks';
+    /** Reveal each direct child in turn. */
+    cascade?: boolean;
+    trigger?: 'view' | 'mount';
+    /** false hides it again when scrolled away. */
+    once?: boolean;
+    threshold?: number;
+    /** In ms. */
+    duration?: number;
+    delay?: number;
+    /** Delay between cascading children, in ms. */
+    stagger?: number;
+    /** Rise distance in px. */
+    distance?: number;
+    /** How many steps the wipe takes. */
+    steps?: number;
+    /** The blocks grid, [columns, rows]. */
+    blocks?: [number, number];
+    /** Block colour: match the background behind the content. */
+    coverColor?: string;
+    onReveal?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function Reveal({ children, as: Tag, effect, cascade, trigger, once, threshold, duration, delay, stagger, distance, steps, blocks, coverColor, onReveal, className, style }: RevealProps): import("react").JSX.Element;