bits-lab 0.0.0-stage → 0.1.0

package/dist/FeedList.js

@@ -0,0 +1,163 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-feed-list";
+const CSS = `
+.bl-feed { margin: 0; padding: 6px; list-style: none; width: 100%; max-width: var(--bl-w); max-height: var(--bl-max-h); overflow-y: auto; box-sizing: border-box; border-radius: var(--bl-radius); background: var(--bl-bg); font-family: var(--bl-font); color: var(--bl-ink); box-shadow: inset 0 0 0 1px var(--bl-line); outline: none; }
+.bl-feed:focus-visible { box-shadow: inset 0 0 0 2px var(--bl-accent); }
+.bl-feed__item { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 280ms cubic-bezier(.3,.8,.3,1), opacity 220ms; }
+.bl-feed__item[data-leaving] { grid-template-rows: 0fr; opacity: 0; }
+.bl-feed__row { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 12px; min-height: 0; overflow: hidden; padding: 10px 12px; border-radius: 10px; }
+.bl-feed__item[data-new] .bl-feed__row { animation: bl-feed-in 420ms cubic-bezier(.2,.9,.3,1.2) both; }
+.bl-feed__item[data-selectable] .bl-feed__row { cursor: pointer; }
+.bl-feed__item[data-selectable]:hover .bl-feed__row { background: var(--bl-hover); }
+.bl-feed__item[data-active] .bl-feed__row { background: var(--bl-hover); box-shadow: inset 3px 0 0 var(--bl-accent); }
+.bl-feed__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--bl-chip); color: var(--tone, var(--bl-accent)); }
+.bl-feed__text { display: grid; gap: 2px; min-width: 0; }
+.bl-feed__title { font-size: 14px; font-weight: 600; line-height: 1.35; }
+.bl-feed__body { color: var(--bl-muted); font-size: 13px; line-height: 1.4; }
+.bl-feed__time { color: var(--bl-muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.bl-feed__empty { padding: 18px 12px; color: var(--bl-muted); font-size: 14px; text-align: center; }
+.bl-feed__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-feed-in { 0% { opacity: 0; transform: translateY(-10px); background: var(--bl-flash); } 60% { background: var(--bl-flash); } }
+@media (prefers-reduced-motion: reduce) { .bl-feed__item { transition: none; } .bl-feed__item[data-new] .bl-feed__row { 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 ago(time, now, locale) {
+  const s = Math.round((now - new Date(time).getTime()) / 1e3);
+  if (s < 45) return "just now";
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto", style: "short" });
+  if (s < 3600) return rtf.format(-Math.round(s / 60), "minute");
+  if (s < 86400) return rtf.format(-Math.round(s / 3600), "hour");
+  if (s < 604800) return rtf.format(-Math.round(s / 86400), "day");
+  return new Date(time).toLocaleDateString(locale, { month: "short", day: "numeric" });
+}
+function FeedList({
+  items = [],
+  onSelect,
+  max = 50,
+  label = "Activity",
+  emptyLabel = "Nothing yet.",
+  locale,
+  width = 480,
+  maxHeight = 420,
+  radius = 14,
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  hoverColor = "rgba(255,255,255,0.05)",
+  chipColor = "rgba(255,255,255,0.07)",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  flashColor = "rgba(115,239,247,0.14)",
+  fontFamily = "inherit",
+  className = "",
+  style
+}) {
+  useStyles();
+  const shown = items.slice(0, max);
+  const [rows, setRows] = useState(() => shown.map((item) => ({ item, state: "idle" })));
+  const [now, setNow] = useState(() => Date.now());
+  const [active, setActive] = useState(0);
+  const [announce, setAnnounce] = useState("");
+  const known = useRef(new Set(shown.map((i) => i.id)));
+  const listRef = useRef(null);
+  const selectable = typeof onSelect === "function";
+  const uid = `bl-feed-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  useEffect(() => {
+    const ids = new Set(shown.map((i) => i.id));
+    const added = shown.filter((i) => !known.current.has(i.id));
+    known.current = ids;
+    setRows((prev) => {
+      const leaving = prev.filter((r) => !ids.has(r.item.id)).map((r) => ({ ...r, state: "leaving" }));
+      const next = shown.map((item) => ({ item, state: added.includes(item) ? "new" : "idle" }));
+      leaving.forEach((r) => {
+        const at = prev.findIndex((p) => p.item.id === r.item.id);
+        next.splice(Math.min(at, next.length), 0, r);
+      });
+      return next;
+    });
+    if (added.length) setAnnounce(added.length === 1 ? `New: ${added[0].title}` : `${added.length} new items`);
+    const id = setTimeout(() => setRows((prev) => prev.filter((r) => r.state !== "leaving")), 320);
+    return () => clearTimeout(id);
+  }, [shown.map((i) => i.id).join("|")]);
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 3e4);
+    return () => clearInterval(id);
+  }, []);
+  const live = rows.filter((r) => r.state !== "leaving");
+  const current = Math.min(active, Math.max(0, live.length - 1));
+  const onKeyDown = (event) => {
+    if (!selectable || !live.length) return;
+    const moves = { ArrowDown: 1, ArrowUp: -1, Home: -1e9, End: 1e9 };
+    if (moves[event.key] !== void 0) {
+      event.preventDefault();
+      const next = Math.max(0, Math.min(live.length - 1, current + moves[event.key]));
+      setActive(next);
+      listRef.current?.querySelector(`#${uid}-${next}`)?.scrollIntoView({ block: "nearest" });
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onSelect(live[current].item);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "ul",
+      {
+        ref: listRef,
+        className: `bl-feed ${className}`,
+        role: selectable ? "listbox" : "list",
+        "aria-label": label,
+        "aria-activedescendant": selectable && live.length ? `${uid}-${current}` : void 0,
+        tabIndex: selectable ? 0 : void 0,
+        onKeyDown,
+        style: { "--bl-w": `${width}px`, "--bl-max-h": `${maxHeight}px`, "--bl-radius": `${radius}px`, "--bl-bg": backgroundColor, "--bl-ink": textColor, "--bl-muted": mutedColor, "--bl-hover": hoverColor, "--bl-chip": chipColor, "--bl-line": lineColor, "--bl-accent": accentColor, "--bl-flash": flashColor, "--bl-font": fontFamily, ...style },
+        children: [
+          rows.map(({ item, state }) => {
+            const i = live.findIndex((r) => r.item.id === item.id);
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                id: i >= 0 ? `${uid}-${i}` : void 0,
+                className: "bl-feed__item",
+                role: selectable ? "option" : void 0,
+                "aria-selected": selectable ? i === current : void 0,
+                "aria-hidden": state === "leaving" || void 0,
+                "data-new": state === "new" || void 0,
+                "data-leaving": state === "leaving" || void 0,
+                "data-selectable": selectable || void 0,
+                "data-active": selectable && i === current || void 0,
+                onClick: selectable && i >= 0 ? () => {
+                  setActive(i);
+                  onSelect(item);
+                } : void 0,
+                style: { "--tone": item.tone },
+                children: /* @__PURE__ */ jsxs("div", { className: "bl-feed__row", children: [
+                  /* @__PURE__ */ jsx("span", { className: "bl-feed__icon", "aria-hidden": "true", children: item.icon ?? "\u2022" }),
+                  /* @__PURE__ */ jsxs("span", { className: "bl-feed__text", children: [
+                    /* @__PURE__ */ jsx("span", { className: "bl-feed__title", children: item.title }),
+                    item.body && /* @__PURE__ */ jsx("span", { className: "bl-feed__body", children: item.body })
+                  ] }),
+                  item.time != null && /* @__PURE__ */ jsx("time", { className: "bl-feed__time", dateTime: new Date(item.time).toISOString(), children: ago(item.time, now, locale) })
+                ] })
+              },
+              item.id
+            );
+          }),
+          !live.length && /* @__PURE__ */ jsx("li", { className: "bl-feed__empty", children: emptyLabel })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "bl-feed__sr", "aria-live": "polite", children: announce })
+  ] });
+}
+export {
+  FeedList as default
+};

package/dist/FlickerGrid.d.ts

@@ -0,0 +1,29 @@
+import { type CSSProperties } from 'react';
+export interface FlickerGridProps {
+    /** Square size in px. */
+    squareSize?: number;
+    /** Space between squares in px. */
+    gap?: number;
+    /** Color of the flickering noise. */
+    color?: string;
+    /** Color of squares inside the mask. */
+    maskColor?: string;
+    /** Average re-rolls per cell per second. */
+    flickerChance?: number;
+    /** Brightest opacity a noise square reaches (0–1). */
+    maxOpacity?: number;
+    /** Opacity of masked squares (0–1). */
+    maskOpacity?: number;
+    /** A word that emerges from the grid; long text shrinks to fit. */
+    text?: string;
+    /** An image (e.g. a logo) used as the mask instead of text; its opaque pixels count. */
+    maskSrc?: string;
+    fontSize?: number;
+    fontWeight?: number | string;
+    fontFamily?: string;
+    /** Accessible name; defaults to text. Without either, the grid is decorative. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function FlickerGrid({ squareSize, gap, color, maskColor, flickerChance, maxOpacity, maskOpacity, text, maskSrc, fontSize, fontWeight, fontFamily, label, className, style }: FlickerGridProps): import("react").JSX.Element;

package/dist/FlickerGrid.js

@@ -0,0 +1,156 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+function rgba(hex, alpha) {
+  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 `rgba(${n >> 16 & 255},${n >> 8 & 255},${n & 255},${alpha})`;
+}
+function FlickerGrid({
+  squareSize = 4,
+  gap = 4,
+  color = "#566c86",
+  maskColor = "#73eff7",
+  flickerChance = 1.5,
+  maxOpacity = 0.35,
+  maskOpacity = 0.95,
+  text,
+  maskSrc,
+  fontSize = 120,
+  fontWeight = 800,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  label,
+  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 cols = 0;
+    let rows = 0;
+    let dpr = 1;
+    let opacity = new Float32Array(0);
+    let inMask = new Uint8Array(0);
+    let frame = 0;
+    let visible = true;
+    let last = performance.now();
+    let image = null;
+    let cancelled = false;
+    const buildMask = () => {
+      inMask = new Uint8Array(cols * rows);
+      if (!text && !image) return;
+      const off = document.createElement("canvas");
+      off.width = cols;
+      off.height = rows;
+      const octx = off.getContext("2d");
+      const cell = squareSize + gap;
+      if (image) {
+        const scale = Math.min(cols / image.width, rows / image.height) * 0.8;
+        const iw = image.width * scale;
+        const ih = image.height * scale;
+        octx.drawImage(image, (cols - iw) / 2, (rows - ih) / 2, iw, ih);
+      } else {
+        const size = Math.max(4, fontSize / cell);
+        octx.font = `${fontWeight} ${size}px ${fontFamily}`;
+        octx.textAlign = "center";
+        octx.textBaseline = "middle";
+        const width = octx.measureText(text).width;
+        if (width > cols * 0.92) octx.font = `${fontWeight} ${size * cols * 0.92 / width}px ${fontFamily}`;
+        octx.fillStyle = "#fff";
+        octx.fillText(text, cols / 2, rows / 2);
+      }
+      const data = octx.getImageData(0, 0, cols, rows).data;
+      for (let i = 0; i < cols * rows; i++) inMask[i] = data[i * 4 + 3] > 100 ? 1 : 0;
+    };
+    const layout = () => {
+      dpr = Math.min(2, window.devicePixelRatio || 1);
+      const width = wrap.clientWidth;
+      const height = wrap.clientHeight;
+      canvas.width = Math.round(width * dpr);
+      canvas.height = Math.round(height * dpr);
+      const cell = squareSize + gap;
+      cols = Math.max(1, Math.floor(width / cell));
+      rows = Math.max(1, Math.floor(height / cell));
+      opacity = new Float32Array(cols * rows).map(() => Math.random() * maxOpacity);
+      buildMask();
+      draw();
+    };
+    const draw = () => {
+      const cell = (squareSize + gap) * dpr;
+      const size = squareSize * dpr;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      const ox = (canvas.width - cols * cell + gap * dpr) / 2;
+      const oy = (canvas.height - rows * cell + gap * dpr) / 2;
+      for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+          const i = r * cols + c;
+          const masked = inMask[i];
+          const a = masked ? Math.min(1, maskOpacity * (0.55 + opacity[i] / maxOpacity / 2)) : opacity[i];
+          ctx.fillStyle = rgba(masked ? maskColor : color, a);
+          ctx.fillRect(ox + c * cell, oy + r * cell, size, size);
+        }
+      }
+    };
+    const tick = (now) => {
+      frame = 0;
+      const dt = Math.min(0.1, (now - last) / 1e3);
+      last = now;
+      const p = Math.min(1, flickerChance * dt);
+      for (let i = 0; i < opacity.length; i++) if (Math.random() < p) opacity[i] = Math.random() * maxOpacity;
+      draw();
+      if (visible) frame = requestAnimationFrame(tick);
+    };
+    const start = () => {
+      if (reduced || frame || !visible || cancelled) return;
+      last = performance.now();
+      frame = requestAnimationFrame(tick);
+    };
+    const resize = new ResizeObserver(layout);
+    resize.observe(wrap);
+    const io = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible) start();
+    });
+    io.observe(wrap);
+    if (maskSrc) {
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        if (cancelled) return;
+        image = img;
+        buildMask();
+        draw();
+      };
+      img.src = maskSrc;
+    }
+    layout();
+    start();
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(frame);
+      resize.disconnect();
+      io.disconnect();
+    };
+  }, [squareSize, gap, color, maskColor, flickerChance, maxOpacity, maskOpacity, text, maskSrc, fontSize, fontWeight, fontFamily]);
+  const name = label ?? text;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: wrapRef,
+      className,
+      role: name ? "img" : void 0,
+      "aria-label": name || void 0,
+      "aria-hidden": name ? void 0 : true,
+      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%" } })
+    }
+  );
+}
+export {
+  FlickerGrid as default
+};

package/dist/FocusGrid.d.ts

@@ -0,0 +1,20 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface FocusGridProps {
+    /** Each child becomes a card. */
+    children?: ReactNode;
+    /** Auto-fill column width in px. */
+    minWidth?: number;
+    gap?: number;
+    /** Blur on the other cards, in px. */
+    blur?: number;
+    /** Opacity of the other cards. */
+    dim?: number;
+    shrink?: number;
+    lift?: number;
+    duration?: number;
+    radius?: number;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function FocusGrid({ children, minWidth, gap, blur, dim, shrink, lift, duration, radius, label, className, style }: FocusGridProps): import("react").JSX.Element;

package/dist/FocusGrid.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { Children, useInsertionEffect } from "react";
+const STYLE_ID = "bl-focus-grid";
+const CSS = `
+.bl-focus { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--bl-min), 100%), 1fr)); gap: var(--bl-gap); width: 100%; margin: 0; padding: 0; list-style: none; }
+.bl-focus__item { position: relative; min-width: 0; border-radius: var(--bl-radius); transition: filter var(--bl-dur) ease, opacity var(--bl-dur) ease, transform var(--bl-dur) cubic-bezier(.2,.9,.25,1); }
+.bl-focus:has(.bl-focus__item:is(:hover, :focus-within)) .bl-focus__item:not(:is(:hover, :focus-within)) { filter: blur(var(--bl-blur)) saturate(0.6); opacity: var(--bl-dim); transform: scale(var(--bl-shrink)); }
+.bl-focus__item:is(:hover, :focus-within) { transform: scale(var(--bl-lift)); z-index: 1; }
+@media (prefers-reduced-motion: reduce) {
+  .bl-focus__item { transition: opacity 150ms; }
+  .bl-focus:has(.bl-focus__item:is(:hover, :focus-within)) .bl-focus__item:not(:is(:hover, :focus-within)) { filter: none; transform: none; }
+  .bl-focus__item:is(:hover, :focus-within) { transform: 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 FocusGrid({ children, minWidth = 220, gap = 16, blur = 4, dim = 0.45, shrink = 0.97, lift = 1.02, duration = 300, radius = 14, label, className = "", style }) {
+  useStyles();
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: `bl-focus ${className}`,
+      "aria-label": label,
+      style: {
+        "--bl-min": `${minWidth}px`,
+        "--bl-gap": `${gap}px`,
+        "--bl-blur": `${blur}px`,
+        "--bl-dim": dim,
+        "--bl-shrink": shrink,
+        "--bl-lift": lift,
+        "--bl-dur": `${duration}ms`,
+        "--bl-radius": `${radius}px`,
+        ...style
+      },
+      children: Children.toArray(children).map((child, i) => /* @__PURE__ */ jsx("li", { className: "bl-focus__item", children: child }, child?.key ?? i))
+    }
+  );
+}
+export {
+  FocusGrid as default
+};

package/dist/FocusPull.d.ts

@@ -0,0 +1,26 @@
+import { type CSSProperties, type ElementType } from 'react';
+export interface FocusPullProps {
+    text?: string;
+    as?: ElementType;
+    /** How the focus moves: across the line, out from the middle, or all at once with a lens breathe. */
+    rack?: 'sweep' | 'center' | 'snap';
+    /** How long each letter takes to sharpen, in ms. */
+    pull?: number;
+    /** How long the sweep takes to cross the line, in ms. */
+    spread?: number;
+    /** Out-of-focus blur in px. */
+    depth?: number;
+    /** Colour-fringe offset in px while soft. */
+    fringe?: number;
+    trigger?: 'view' | 'mount' | 'hover';
+    /** Share of the line that must be visible before a "view" trigger fires. */
+    threshold?: number;
+    textColor?: string;
+    /** The two fringe colours, [left, right]. */
+    fringeColors?: [string, string];
+    /** Called when the whole line is sharp. */
+    onFocused?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function FocusPull({ text, as: Tag, rack, pull, spread, depth, fringe, trigger, threshold, textColor, fringeColors, onFocused, className, style }: FocusPullProps): import("react").JSX.Element;

package/dist/FocusPull.js

@@ -0,0 +1,106 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-focus-pull";
+const CSS = `
+.bl-focus { margin: 0; color: var(--bl-ink); }
+.bl-focus__lens { display: inline; }
+.bl-focus__word { display: inline-block; white-space: nowrap; }
+.bl-focus__ch { display: inline-block; white-space: pre; transition: filter var(--bl-pull) cubic-bezier(.2,.7,.2,1), opacity var(--bl-pull) ease, text-shadow var(--bl-pull) cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--p) * var(--bl-spread)); }
+.bl-focus[data-state="soft"] .bl-focus__ch { filter: blur(var(--bl-depth)); opacity: 0.35; text-shadow: var(--bl-fringe) 0 0 var(--bl-red), calc(var(--bl-fringe) * -1) 0 0 var(--bl-cyan); transition: none; }
+.bl-focus[data-state="sharp"][data-rack="snap"] .bl-focus__ch { animation: bl-focus-breathe var(--bl-pull) cubic-bezier(.2,.7,.2,1) both; transition: none; }
+.bl-focus__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-focus-breathe {
+  0% { filter: blur(var(--bl-depth)); opacity: 0.35; text-shadow: var(--bl-fringe) 0 0 var(--bl-red), calc(var(--bl-fringe) * -1) 0 0 var(--bl-cyan); }
+  55% { filter: blur(0); opacity: 1; text-shadow: 0 0 0 transparent, 0 0 0 transparent; }
+  72% { filter: blur(calc(var(--bl-depth) * 0.18)); text-shadow: calc(var(--bl-fringe) * 0.4) 0 0 var(--bl-red), calc(var(--bl-fringe) * -0.4) 0 0 var(--bl-cyan); }
+  100% { filter: blur(0); opacity: 1; text-shadow: 0 0 0 transparent, 0 0 0 transparent; }
+}
+@media (prefers-reduced-motion: reduce) { .bl-focus .bl-focus__ch { filter: none !important; opacity: 1 !important; text-shadow: none !important; transition: none !important; animation: 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 FocusPull({
+  text = "",
+  as: Tag = "p",
+  rack = "sweep",
+  pull = 900,
+  spread = 700,
+  depth = 8,
+  fringe = 3,
+  trigger = "view",
+  threshold = 0.4,
+  textColor = "inherit",
+  fringeColors = ["rgba(239,125,87,0.7)", "rgba(115,239,247,0.7)"],
+  onFocused,
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const focusedRef = useRef(onFocused);
+  focusedRef.current = onFocused;
+  const [state, setState] = useState(trigger === "mount" ? "sharp" : "soft");
+  const n = Math.max(1, [...text].length - 1);
+  const position = (i) => rack === "center" ? Math.abs(i / n - 0.5) * 2 : rack === "snap" ? 0 : i / n;
+  useEffect(() => {
+    if (trigger !== "view") return void 0;
+    const root = rootRef.current;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setState("sharp");
+          observer.disconnect();
+        }
+      },
+      { threshold }
+    );
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, [trigger, threshold]);
+  useEffect(() => {
+    if (state !== "sharp") return void 0;
+    const timer = setTimeout(() => focusedRef.current?.(), pull + (rack === "snap" ? 0 : spread));
+    return () => clearTimeout(timer);
+  }, [state, pull, spread, rack]);
+  const onPointerEnter = () => {
+    if (trigger !== "hover" || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+    setState("soft");
+    requestAnimationFrame(() => requestAnimationFrame(() => setState("sharp")));
+  };
+  let index = 0;
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ref: rootRef,
+      className: `bl-focus ${className}`,
+      "data-state": state,
+      "data-rack": rack,
+      onPointerEnter,
+      style: { "--bl-pull": `${pull}ms`, "--bl-spread": `${rack === "snap" ? 0 : spread}ms`, "--bl-depth": `${depth}px`, "--bl-fringe": `${fringe}px`, "--bl-red": fringeColors[0], "--bl-cyan": fringeColors[1], "--bl-ink": textColor, ...style },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "bl-focus__sr", children: text }),
+        /* @__PURE__ */ jsx("span", { className: "bl-focus__lens", "aria-hidden": "true", children: text.split(/(\s+)/).map((part, w) => {
+          if (!part) return null;
+          if (/^\s+$/.test(part)) {
+            index += part.length;
+            return " ";
+          }
+          return /* @__PURE__ */ jsx("span", { className: "bl-focus__word", children: [...part].map((ch) => {
+            const i = index++;
+            return /* @__PURE__ */ jsx("span", { className: "bl-focus__ch", style: { "--p": position(i).toFixed(3) }, children: ch }, i);
+          }) }, w);
+        }) })
+      ]
+    }
+  );
+}
+export {
+  FocusPull as default
+};

package/dist/Footprints.d.ts

@@ -0,0 +1,24 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface FootprintsProps {
+    /** The area to walk across. */
+    children?: ReactNode;
+    /** Built-in pixel footprints, or image URLs cycled in order. */
+    stamps?: 'feet' | string[];
+    /** Distance between stamps in px. */
+    stride?: number;
+    /** Stamp width in px. */
+    size?: number;
+    /** Stamp lifetime in ms. */
+    life?: number;
+    /** How far apart left and right feet sit, in px. */
+    spread?: number;
+    /** Random tilt for image stamps, in degrees. */
+    jitter?: number;
+    /** Most stamps on screen at once. */
+    max?: number;
+    /** Footprint colour. */
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function Footprints({ children, stamps, stride, size, life, spread, jitter, max, color, className, style }: FootprintsProps): import("react").JSX.Element;