bits-lab 0.0.0-stage → 0.1.2

package/dist/GaugeMeter.d.ts

@@ -0,0 +1,38 @@
+import { type CSSProperties } from 'react';
+export declare const DEFAULT_ZONES: GaugeZone[];
+export interface GaugeZone {
+    /** Upper bound of this zone (inclusive). */
+    to: number;
+    color: string;
+    label: string;
+    icon?: 'check' | 'warn' | 'alert';
+}
+export interface GaugeMeterProps {
+    value?: number;
+    min?: number;
+    max?: number;
+    /** Severity bands, low to high. */
+    zones?: GaugeZone[];
+    label?: string;
+    unit?: string;
+    format?: (value: number) => string;
+    /** Dial sweep in degrees. */
+    sweep?: number;
+    majorTicks?: number;
+    minorTicks?: number;
+    /** Needle spring stiffness. */
+    stiffness?: number;
+    /** Needle spring damping (lower overshoots more). */
+    damping?: number;
+    size?: number;
+    thickness?: number;
+    trackColor?: string;
+    tickColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    needleColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function GaugeMeter({ value, min, max, zones, label, unit, format, sweep, majorTicks, minorTicks, stiffness, damping, size, thickness, trackColor, tickColor, textColor, mutedColor, needleColor, fontFamily, className, style }: GaugeMeterProps): import("react").JSX.Element;

package/dist/GaugeMeter.js

@@ -0,0 +1,195 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useInsertionEffect, useLayoutEffect, useRef } from "react";
+const STYLE_ID = "bl-gauge-meter";
+const CSS = `
+.bl-gauge { position: relative; display: grid; justify-items: center; width: min(var(--bl-size), 100%); color: var(--bl-ink); font-family: var(--bl-font); }
+.bl-gauge__dial { position: relative; width: 100%; }
+.bl-gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
+.bl-gauge__track { fill: none; stroke: var(--bl-track); stroke-linecap: round; }
+.bl-gauge__fill { fill: none; stroke-linecap: round; transition: stroke 300ms; }
+.bl-gauge__zone { fill: none; stroke-width: 3; opacity: 0.55; }
+.bl-gauge__tick { stroke: var(--bl-tick); stroke-linecap: round; }
+.bl-gauge__num { fill: var(--bl-muted); font-size: 9px; font-variant-numeric: tabular-nums; text-anchor: middle; dominant-baseline: middle; }
+
+.bl-gauge__readout { position: absolute; left: 0; right: 0; top: var(--bl-readout); display: grid; justify-items: center; gap: 3px; text-align: center; pointer-events: none; }
+.bl-gauge__value { font-size: calc(var(--bl-size) * 0.11); font-weight: 650; line-height: 1; }
+.bl-gauge__unit { margin-left: 2px; color: var(--bl-muted); font-size: 0.5em; font-weight: 600; }
+.bl-gauge__state { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--bl-zone) 18%, transparent); color: var(--bl-zone); font-size: 12px; font-weight: 700; }
+.bl-gauge__label { margin-top: 8px; color: var(--bl-muted); font-size: 13px; font-weight: 600; }
+`;
+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_ZONES = [
+  { to: 60, color: "#0ca30c", label: "Normal", icon: "check" },
+  { to: 85, color: "#fab219", label: "High", icon: "warn" },
+  { to: 100, color: "#d03b3b", label: "Critical", icon: "alert" }
+];
+const ICONS = {
+  check: "M2.5 6.5 5 9l4.5-5.5",
+  warn: "M6 2.5v4M6 9h.01",
+  alert: "M6 2 10.5 10h-9zM6 5.5v2M6 9h.01"
+};
+const CX = 100;
+const CY = 100;
+function GaugeMeter({
+  value = 0,
+  min = 0,
+  max = 100,
+  zones = DEFAULT_ZONES,
+  label,
+  unit = "",
+  format = (v) => Math.round(v).toLocaleString(),
+  sweep = 240,
+  majorTicks = 5,
+  minorTicks = 4,
+  stiffness = 140,
+  damping = 11,
+  size = 260,
+  thickness = 12,
+  trackColor = "#262b44",
+  tickColor = "#566c86",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  needleColor = "#f4f4f4",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const needleRef = useRef(null);
+  const fillRef = useRef(null);
+  const physics = useRef({ x: null, v: 0 });
+  const R = 78;
+  const clamp = (v) => Math.max(min, Math.min(max, v));
+  const frac = (v) => (clamp(v) - min) / (max - min || 1);
+  const angleOf = (p) => -sweep / 2 + p * sweep;
+  const point = (deg, r) => [CX + r * Math.sin(deg * Math.PI / 180), CY - r * Math.cos(deg * Math.PI / 180)];
+  const arc = (p0, p1, r) => {
+    const [x0, y0] = point(angleOf(p0), r);
+    const [x1, y1] = point(angleOf(p1), r);
+    const large = (p1 - p0) * sweep > 180 ? 1 : 0;
+    return `M${x0.toFixed(2)} ${y0.toFixed(2)} A${r} ${r} 0 ${large} 1 ${x1.toFixed(2)} ${y1.toFixed(2)}`;
+  };
+  const arcLength = Math.PI * R * sweep / 180;
+  const zoneOf = (v) => zones.find((z) => clamp(v) <= z.to) ?? zones[zones.length - 1];
+  const zone = zoneOf(value);
+  useLayoutEffect(() => {
+    const target = frac(value);
+    const state = physics.current;
+    const apply = (p) => {
+      needleRef.current?.setAttribute("transform", `rotate(${angleOf(p).toFixed(2)} ${CX} ${CY})`);
+      fillRef.current?.setAttribute("stroke-dashoffset", String(arcLength * (1 - Math.max(0, Math.min(1, p)))));
+    };
+    if (state.x === null || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+      state.x = target;
+      state.v = 0;
+      apply(target);
+      return void 0;
+    }
+    let frame = 0;
+    let last = performance.now();
+    const tick = (now) => {
+      let dt = Math.min(0.1, (now - last) / 1e3);
+      last = now;
+      while (dt > 0) {
+        const h = Math.min(dt, 1 / 240);
+        state.v += (-stiffness * (state.x - target) - damping * state.v) * h;
+        state.x += state.v * h;
+        dt -= h;
+      }
+      apply(state.x);
+      if (Math.abs(state.x - target) > 5e-4 || Math.abs(state.v) > 5e-4) frame = requestAnimationFrame(tick);
+      else {
+        state.x = target;
+        apply(target);
+      }
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [value, min, max, sweep, stiffness, damping]);
+  const ticks = [];
+  const total = majorTicks * (minorTicks + 1);
+  for (let i = 0; i <= total; i++) {
+    const p = i / total;
+    const major = i % (minorTicks + 1) === 0;
+    const a = angleOf(p);
+    const [x0, y0] = point(a, R - thickness / 2 - 4);
+    const [x1, y1] = point(a, R - thickness / 2 - (major ? 11 : 7));
+    ticks.push(/* @__PURE__ */ jsx("line", { className: "bl-gauge__tick", x1: x0, y1: y0, x2: x1, y2: y1, strokeWidth: major ? 1.6 : 1 }, `t${i}`));
+    if (major) {
+      const [tx, ty] = point(a, R - thickness / 2 - 20);
+      ticks.push(
+        /* @__PURE__ */ jsx("text", { className: "bl-gauge__num", x: tx, y: ty, children: format(min + p * (max - min)) }, `n${i}`)
+      );
+    }
+  }
+  let from = 0;
+  const bands = zones.map((z, i) => {
+    const p0 = from;
+    const p1 = frac(z.to);
+    from = p1;
+    return p1 > p0 ? /* @__PURE__ */ jsx("path", { className: "bl-gauge__zone", d: arc(p0, p1, R + thickness / 2 + 4), stroke: z.color }, i) : null;
+  });
+  const lowest = Math.max(...[angleOf(0), angleOf(1)].map((a) => point(a, R + thickness)[1]), CY + 58);
+  const viewHeight = Math.ceil(lowest + 6);
+  const text = `${format(clamp(value))}${unit ? ` ${unit}` : ""}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-gauge ${className}`,
+      role: "meter",
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": clamp(value),
+      "aria-valuetext": `${text}, ${zone?.label ?? ""}`,
+      "aria-labelledby": label ? `${uid}-label` : void 0,
+      style: {
+        "--bl-size": `${size}px`,
+        "--bl-readout": `${(CY + 14) / viewHeight * 100}%`,
+        "--bl-track": trackColor,
+        "--bl-tick": tickColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-zone": zone?.color,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "bl-gauge__dial", children: [
+          /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 200 ${viewHeight}`, "aria-hidden": "true", children: [
+            bands,
+            /* @__PURE__ */ jsx("path", { className: "bl-gauge__track", d: arc(0, 1, R), strokeWidth: thickness }),
+            /* @__PURE__ */ jsx("path", { ref: fillRef, className: "bl-gauge__fill", d: arc(0, 1, R), strokeWidth: thickness, stroke: zone?.color, strokeDasharray: arcLength }),
+            ticks,
+            /* @__PURE__ */ jsx("g", { ref: needleRef, children: /* @__PURE__ */ jsx("path", { d: `M${CX - 3} ${CY} L${CX} ${CY - R + thickness / 2 + 2} L${CX + 3} ${CY} Z`, fill: needleColor }) }),
+            /* @__PURE__ */ jsx("circle", { cx: CX, cy: CY, r: 7, fill: needleColor }),
+            /* @__PURE__ */ jsx("circle", { cx: CX, cy: CY, r: 3, fill: trackColor })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "bl-gauge__readout", children: [
+            /* @__PURE__ */ jsxs("span", { className: "bl-gauge__value", "aria-hidden": "true", children: [
+              format(clamp(value)),
+              unit && /* @__PURE__ */ jsx("span", { className: "bl-gauge__unit", children: unit })
+            ] }),
+            zone && /* @__PURE__ */ jsxs("span", { className: "bl-gauge__state", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: ICONS[zone.icon] ?? ICONS.check }) }),
+              zone.label
+            ] })
+          ] })
+        ] }),
+        label && /* @__PURE__ */ jsx("div", { id: `${uid}-label`, className: "bl-gauge__label", children: label })
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_ZONES,
+  GaugeMeter as default
+};

package/dist/GlassPanel.d.ts

@@ -0,0 +1,27 @@
+import { type CSSProperties, type ElementType, type ReactNode } from 'react';
+export interface GlassPanelProps {
+    children?: ReactNode;
+    as?: ElementType;
+    /** Backdrop blur in px. */
+    blur?: number;
+    /** How much colour shows through. */
+    saturation?: number;
+    /** An 8-bit dither over the frost. */
+    pixel?: boolean;
+    /** A soft light that follows the pointer. */
+    sheen?: boolean;
+    padding?: number | string;
+    radius?: number;
+    tint?: string;
+    /** Used where backdrop blur isn't supported. */
+    fallbackTint?: string;
+    edgeColor?: string;
+    lineColor?: string;
+    sheenColor?: string;
+    sheenSize?: number;
+    textColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function GlassPanel({ children, as: Tag, blur, saturation, pixel, sheen, padding, radius, tint, fallbackTint, edgeColor, lineColor, sheenColor, sheenSize, textColor, fontFamily, className, style }: GlassPanelProps): import("react").JSX.Element;

package/dist/GlassPanel.js

@@ -0,0 +1,80 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef } from "react";
+const STYLE_ID = "bl-glass-panel";
+const CSS = `
+.bl-glass { --gx: 50%; --gy: 0%; position: relative; overflow: hidden; isolation: isolate; padding: var(--bl-pad); border-radius: var(--bl-radius); background: var(--bl-tint); color: var(--bl-ink); font-family: var(--bl-font); -webkit-backdrop-filter: blur(var(--bl-blur)) saturate(var(--bl-sat)); backdrop-filter: blur(var(--bl-blur)) saturate(var(--bl-sat)); box-shadow: inset 0 1px 0 var(--bl-edge), inset 0 0 0 1px var(--bl-line), 0 20px 40px -24px rgba(0,0,0,0.7); }
+.bl-glass::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle var(--bl-sheen-size) at var(--gx) var(--gy), var(--bl-sheen), transparent 70%); pointer-events: none; transition: background-position 200ms; }
+.bl-glass[data-pixel]::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--bl-dither); background-size: 4px 4px; opacity: 0.35; image-rendering: pixelated; pointer-events: none; }
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .bl-glass { background: var(--bl-fallback); } }
+`;
+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 DITHER = `url("data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2" shape-rendering="crispEdges"><rect width="1" height="1" fill="rgba(255,255,255,0.35)"/><rect x="1" y="1" width="1" height="1" fill="rgba(255,255,255,0.35)"/></svg>')}")`;
+function GlassPanel({
+  children,
+  as: Tag = "div",
+  blur = 14,
+  saturation = 1.5,
+  pixel = false,
+  sheen = true,
+  padding = 24,
+  radius = 18,
+  tint = "rgba(38,43,68,0.42)",
+  fallbackTint = "rgba(26,28,44,0.92)",
+  edgeColor = "rgba(255,255,255,0.35)",
+  lineColor = "rgba(255,255,255,0.12)",
+  sheenColor = "rgba(255,255,255,0.14)",
+  sheenSize = 260,
+  textColor = "#f4f4f4",
+  fontFamily = "inherit",
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  useEffect(() => {
+    if (!sheen || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return void 0;
+    const root = rootRef.current;
+    let raf = 0;
+    const onMove = (event) => {
+      if (raf) return;
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        const r = root.getBoundingClientRect();
+        root.style.setProperty("--gx", `${(event.clientX - r.left).toFixed(0)}px`);
+        root.style.setProperty("--gy", `${(event.clientY - r.top).toFixed(0)}px`);
+      });
+    };
+    const onLeave = () => {
+      root.style.removeProperty("--gx");
+      root.style.removeProperty("--gy");
+    };
+    root.addEventListener("pointermove", onMove);
+    root.addEventListener("pointerleave", onLeave);
+    return () => {
+      cancelAnimationFrame(raf);
+      root.removeEventListener("pointermove", onMove);
+      root.removeEventListener("pointerleave", onLeave);
+    };
+  }, [sheen]);
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref: rootRef,
+      className: `bl-glass ${className}`,
+      "data-pixel": pixel || void 0,
+      style: { "--bl-blur": `${blur}px`, "--bl-sat": saturation, "--bl-pad": typeof padding === "number" ? `${padding}px` : padding, "--bl-radius": `${radius}px`, "--bl-tint": tint, "--bl-fallback": fallbackTint, "--bl-edge": edgeColor, "--bl-line": lineColor, "--bl-sheen": sheen ? sheenColor : "transparent", "--bl-sheen-size": `${sheenSize}px`, "--bl-dither": DITHER, "--bl-ink": textColor, "--bl-font": fontFamily, ...style },
+      children
+    }
+  );
+}
+export {
+  GlassPanel as default
+};

package/dist/GrainFX.d.ts

@@ -0,0 +1,34 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type GrainEffect = 'grain' | 'dither' | 'halftone' | 'scanlines' | 'blur';
+type Edge = 'top' | 'bottom' | 'left' | 'right';
+export interface GrainFXProps {
+    /** What to texture; without children it covers its parent. */
+    children?: ReactNode;
+    /** Stack any number. */
+    effects?: GrainEffect | GrainEffect[];
+    /** Strength, 0–1. */
+    amount?: number;
+    /** Pixel size of grain and dither, in px. */
+    cell?: number;
+    /** Grain refresh rate. */
+    fps?: number;
+    /** CSS mix-blend-mode for grain and dither. */
+    blend?: string;
+    /** Ink for dither, halftone and scanlines. */
+    color?: string;
+    /** Dither density, 0–1. */
+    density?: number;
+    dotSize?: number;
+    dotPitch?: number;
+    /** The edge halftone dots fade from. */
+    fadeFrom?: Edge;
+    /** Edge blur strength in px. */
+    blur?: number;
+    blurEdge?: Edge;
+    /** How far in the edge blur reaches, in %. */
+    blurSize?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function GrainFX({ children, effects, amount, cell, fps, blend, color, density, dotSize, dotPitch, fadeFrom, blur, blurEdge, blurSize, className, style }: GrainFXProps): import("react").JSX.Element;
+export {};

package/dist/GrainFX.js

@@ -0,0 +1,122 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useMemo, useRef } from "react";
+const STYLE_ID = "bl-grain-fx";
+const CSS = `
+.bl-grain { position: relative; isolation: isolate; }
+.bl-grain[data-cover] { position: absolute; inset: 0; }
+.bl-grain__layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
+.bl-grain__noise { display: block; width: 100%; height: 100%; opacity: var(--bl-amount); mix-blend-mode: var(--bl-blend); image-rendering: pixelated; }
+.bl-grain__dither { opacity: var(--bl-amount); mix-blend-mode: var(--bl-blend); background-image: var(--bl-dither); background-size: calc(var(--bl-cell) * 8) calc(var(--bl-cell) * 8); image-rendering: pixelated; }
+.bl-grain__halftone { opacity: var(--bl-amount); background-image: radial-gradient(circle at center, var(--bl-ink) var(--bl-dot), transparent calc(var(--bl-dot) + 0.6px)); background-size: var(--bl-pitch) var(--bl-pitch); -webkit-mask-image: linear-gradient(var(--bl-fade-dir), #000, transparent); mask-image: linear-gradient(var(--bl-fade-dir), #000, transparent); }
+.bl-grain__scan { opacity: var(--bl-amount); background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--bl-cell) * 1), var(--bl-ink) calc(var(--bl-cell) * 1) calc(var(--bl-cell) * 2)); }
+.bl-grain__blur { -webkit-backdrop-filter: blur(var(--bl-blur)); backdrop-filter: blur(var(--bl-blur)); -webkit-mask-image: linear-gradient(var(--bl-blur-dir), #000, transparent var(--bl-blur-size)); mask-image: linear-gradient(var(--bl-blur-dir), #000, transparent var(--bl-blur-size)); }
+`;
+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 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];
+function ditherTile(color, level) {
+  const cells = BAYER.map((t, i) => t < level * 64 ? `<rect x="${i % 8}" y="${Math.floor(i / 8)}" width="1" height="1"/>` : "").join("");
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" shape-rendering="crispEdges" fill="${color}">${cells}</svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+const DIR = { top: "to bottom", bottom: "to top", left: "to right", right: "to left" };
+function GrainFX({
+  children,
+  effects = ["grain"],
+  amount = 0.35,
+  cell = 2,
+  fps = 12,
+  blend = "overlay",
+  color = "#0b0b14",
+  density = 0.5,
+  dotSize = 2.5,
+  dotPitch = 8,
+  fadeFrom = "top",
+  blur = 10,
+  blurEdge = "bottom",
+  blurSize = 45,
+  className = "",
+  style
+}) {
+  useStyles();
+  const canvasRef = useRef(null);
+  const list = Array.isArray(effects) ? effects : [effects];
+  const has = (name) => list.includes(name);
+  const grain = has("grain");
+  const dither = useMemo(() => ditherTile(color, density), [color, density]);
+  useEffect(() => {
+    if (!grain) return void 0;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    let image = null;
+    let visible = true;
+    let timer = 0;
+    const fit = () => {
+      canvas.width = Math.max(1, Math.ceil(canvas.clientWidth / cell));
+      canvas.height = Math.max(1, Math.ceil(canvas.clientHeight / cell));
+      image = ctx.createImageData(canvas.width, canvas.height);
+    };
+    const paint = () => {
+      const d = image.data;
+      for (let i = 0; i < d.length; i += 4) {
+        const v = Math.random() * 255;
+        d[i] = v;
+        d[i + 1] = v;
+        d[i + 2] = v;
+        d[i + 3] = 255;
+      }
+      ctx.putImageData(image, 0, 0);
+    };
+    const loop = () => {
+      paint();
+      timer = visible && !document.hidden && !reduced ? setTimeout(loop, 1e3 / fps) : 0;
+    };
+    const resize = new ResizeObserver(() => {
+      fit();
+      paint();
+    });
+    resize.observe(canvas);
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible && !timer) loop();
+    });
+    observer.observe(canvas);
+    const onVisibility = () => !timer && loop();
+    document.addEventListener("visibilitychange", onVisibility);
+    fit();
+    loop();
+    return () => {
+      clearTimeout(timer);
+      resize.disconnect();
+      observer.disconnect();
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [grain, cell, fps]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-grain ${className}`,
+      "data-cover": children == null || void 0,
+      style: { "--bl-amount": amount, "--bl-cell": `${cell}px`, "--bl-blend": blend, "--bl-ink": color, "--bl-dither": dither, "--bl-dot": `${dotSize}px`, "--bl-pitch": `${dotPitch}px`, "--bl-fade-dir": DIR[fadeFrom] ?? "to bottom", "--bl-blur": `${blur}px`, "--bl-blur-dir": DIR[blurEdge] ?? "to top", "--bl-blur-size": `${blurSize}%`, ...style },
+      children: [
+        children,
+        has("blur") && /* @__PURE__ */ jsx("span", { className: "bl-grain__layer bl-grain__blur", "aria-hidden": "true" }),
+        has("halftone") && /* @__PURE__ */ jsx("span", { className: "bl-grain__layer bl-grain__halftone", "aria-hidden": "true" }),
+        has("dither") && /* @__PURE__ */ jsx("span", { className: "bl-grain__layer bl-grain__dither", "aria-hidden": "true" }),
+        has("scanlines") && /* @__PURE__ */ jsx("span", { className: "bl-grain__layer bl-grain__scan", "aria-hidden": "true" }),
+        grain && /* @__PURE__ */ jsx("span", { className: "bl-grain__layer", "aria-hidden": "true", children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "bl-grain__noise" }) })
+      ]
+    }
+  );
+}
+export {
+  GrainFX as default
+};

package/dist/GravityBox.d.ts

@@ -0,0 +1,30 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface GravityBoxProps {
+    /** Each child becomes a rigid body, starting where the layout placed it. */
+    children?: ReactNode;
+    /** Box height, in px. */
+    height?: number;
+    gravity?: number;
+    /** Bounciness (0–1). */
+    restitution?: number;
+    friction?: number;
+    /** When things fall: on scroll into view, immediately, or when the box is clicked. */
+    startOn?: 'view' | 'mount' | 'click';
+    /** Give each body a random starting spin. */
+    spin?: boolean;
+    /** Grab and throw with mouse, pen or touch. */
+    draggable?: boolean;
+    /** Stop simulating once everything rests (resumes on touch). */
+    sleep?: boolean;
+    gap?: number;
+    padding?: number;
+    radius?: number;
+    backgroundColor?: string;
+    /** Run physics even under reduced motion. */
+    force?: boolean;
+    /** Called the first time everything settles. */
+    onSettle?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function GravityBox({ children, height, gravity, restitution, friction, startOn, spin, draggable, sleep, gap, padding, radius, backgroundColor, force, onSettle, className, style }: GravityBoxProps): import("react").JSX.Element;