bits-lab 0.0.0-stage → 0.1.0

package/dist/AgentCard.js

@@ -0,0 +1,168 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-agent-card";
+const CSS = `
+.bl-agent { width: 100%; max-width: var(--bl-w); overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-bg); color: var(--bl-ink); font-family: var(--bl-font); box-shadow: 0 0 0 1px var(--bl-line); transition: box-shadow 300ms; }
+.bl-agent[data-status="running"] { box-shadow: 0 0 0 1px var(--bl-accent), 0 0 24px -8px var(--bl-accent); }
+.bl-agent[data-status="error"] { box-shadow: 0 0 0 1px var(--bl-error); }
+.bl-agent__head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+.bl-agent__head:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: -2px; }
+.bl-agent__icon { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; background: var(--bl-chip); color: var(--bl-muted); }
+.bl-agent[data-status="success"] .bl-agent__icon { background: color-mix(in srgb, var(--bl-ok) 22%, transparent); color: var(--bl-ok); }
+.bl-agent[data-status="error"] .bl-agent__icon { background: color-mix(in srgb, var(--bl-error) 22%, transparent); color: var(--bl-error); }
+.bl-agent__spin { position: absolute; inset: 3px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--bl-accent) 25%, transparent); border-top-color: var(--bl-accent); animation: bl-agent-spin 800ms linear infinite; }
+.bl-agent__title { display: grid; flex: 1; min-width: 0; gap: 1px; }
+.bl-agent__tool { font-family: var(--bl-mono); font-size: 13px; font-weight: 700; }
+.bl-agent__args { overflow: hidden; color: var(--bl-muted); font-family: var(--bl-mono); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
+.bl-agent__meta { flex: 0 0 auto; color: var(--bl-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
+.bl-agent__chev { flex: 0 0 auto; color: var(--bl-muted); transition: transform 220ms; }
+.bl-agent__head[aria-expanded="true"] .bl-agent__chev { transform: rotate(180deg); }
+.bl-agent__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms cubic-bezier(.2,.9,.25,1); }
+.bl-agent__body[data-open] { grid-template-rows: 1fr; }
+.bl-agent__inner { min-height: 0; overflow: hidden; }
+.bl-agent__logs { max-height: var(--bl-log-h); margin: 0 14px; padding: 10px 12px; overflow-y: auto; border-radius: 10px; background: var(--bl-code); font-family: var(--bl-mono); font-size: 12px; line-height: 1.6; list-style: none; }
+.bl-agent__logs li { color: var(--bl-muted); white-space: pre-wrap; overflow-wrap: anywhere; animation: bl-agent-line 260ms ease both; }
+.bl-agent__logs li::before { content: "\u203A "; color: var(--bl-dim); }
+.bl-agent__out { margin: 10px 14px 14px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--bl-ok) 10%, transparent); font-size: 13px; line-height: 1.5; }
+.bl-agent__out[data-error] { background: color-mix(in srgb, var(--bl-error) 12%, transparent); color: var(--bl-error); }
+.bl-agent__out pre { margin: 0; font-family: var(--bl-mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
+.bl-agent__empty { padding: 10px 14px 14px; color: var(--bl-dim); font-size: 13px; }
+.bl-agent__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-agent-spin { to { transform: rotate(360deg); } }
+@keyframes bl-agent-line { from { opacity: 0; transform: translateY(4px); } }
+@media (prefers-reduced-motion: reduce) { .bl-agent__spin { animation-duration: 2.4s; } .bl-agent__logs li { animation: none; } .bl-agent__body, .bl-agent__chev { 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 summarize = (args) => {
+  if (args == null) return "";
+  if (typeof args === "string") return args;
+  return Object.entries(args).map(([k, v]) => `${k}: ${JSON.stringify(v)}`).join(", ");
+};
+const seconds = (ms) => ms < 1e3 ? `${Math.round(ms)}ms` : `${(ms / 1e3).toFixed(ms < 1e4 ? 1 : 0)}s`;
+const ICONS = {
+  success: "M3 8.5 6.5 12 13 4.5",
+  error: "M4 4l8 8M12 4l-8 8",
+  queued: "M8 4v4l2.5 2.5"
+};
+function AgentCard({
+  tool = "tool",
+  args,
+  status = "running",
+  startedAt,
+  duration,
+  logs = [],
+  result,
+  error,
+  icon,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  width = 520,
+  logHeight = 160,
+  backgroundColor = "#1a1c2c",
+  chipColor = "#262b44",
+  codeColor = "#0b0b14",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  dimColor = "#566c86",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  okColor = "#38b764",
+  errorColor = "#ef7d57",
+  radius = 14,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  monoFamily = "ui-monospace, SFMono-Regular, Menlo, monospace",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [innerOpen, setInnerOpen] = useState(defaultOpen);
+  const open = controlledOpen ?? innerOpen;
+  const [now, setNow] = useState(() => Date.now());
+  const logRef = useRef(null);
+  const stick = useRef(true);
+  useEffect(() => {
+    if (status !== "running") return void 0;
+    const timer = setInterval(() => setNow(Date.now()), 100);
+    return () => clearInterval(timer);
+  }, [status]);
+  useEffect(() => {
+    const node = logRef.current;
+    if (node && stick.current) node.scrollTop = node.scrollHeight;
+  }, [logs.length, open]);
+  const toggle = () => {
+    if (controlledOpen === void 0) setInnerOpen((o) => !o);
+    onOpenChange?.(!open);
+  };
+  const elapsed = duration ?? (startedAt ? Math.max(0, now - startedAt) : null);
+  const meta = status === "queued" ? "Queued" : status === "running" ? elapsed != null ? seconds(elapsed) : "Running" : status === "success" ? elapsed != null ? `Done in ${seconds(elapsed)}` : "Done" : elapsed != null ? `Failed after ${seconds(elapsed)}` : "Failed";
+  const statusText = { queued: "queued", running: "running", success: "finished", error: "failed" }[status];
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: `bl-agent ${className}`,
+      "data-status": status,
+      "aria-labelledby": `${uid}-tool`,
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-log-h": `${logHeight}px`,
+        "--bl-bg": backgroundColor,
+        "--bl-chip": chipColor,
+        "--bl-code": codeColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-dim": dimColor,
+        "--bl-line": lineColor,
+        "--bl-accent": accentColor,
+        "--bl-ok": okColor,
+        "--bl-error": errorColor,
+        "--bl-radius": `${radius}px`,
+        "--bl-font": fontFamily,
+        "--bl-mono": monoFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("button", { type: "button", className: "bl-agent__head", "aria-expanded": open, "aria-controls": `${uid}-body`, onClick: toggle, children: [
+          /* @__PURE__ */ jsx("span", { className: "bl-agent__icon", "aria-hidden": "true", children: status === "running" ? /* @__PURE__ */ jsx("span", { className: "bl-agent__spin" }) : status === "queued" && icon ? icon : /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: ICONS[status] ?? ICONS.queued }) }) }),
+          /* @__PURE__ */ jsxs("span", { className: "bl-agent__title", children: [
+            /* @__PURE__ */ jsx("span", { id: `${uid}-tool`, className: "bl-agent__tool", children: tool }),
+            args != null && /* @__PURE__ */ jsx("span", { className: "bl-agent__args", children: summarize(args) })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "bl-agent__meta", children: meta }),
+          /* @__PURE__ */ jsx("svg", { className: "bl-agent__chev", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 4.5 6 7.5 9 4.5" }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { id: `${uid}-body`, className: "bl-agent__body", "data-open": open || void 0, inert: open ? void 0 : true, children: /* @__PURE__ */ jsxs("div", { className: "bl-agent__inner", children: [
+          logs.length > 0 ? /* @__PURE__ */ jsx(
+            "ol",
+            {
+              ref: logRef,
+              className: "bl-agent__logs",
+              "aria-label": "Logs",
+              tabIndex: 0,
+              onScroll: (event) => {
+                const node = event.currentTarget;
+                stick.current = node.scrollTop + node.clientHeight >= node.scrollHeight - 8;
+              },
+              children: logs.map((line, i) => /* @__PURE__ */ jsx("li", { children: line }, i))
+            }
+          ) : /* @__PURE__ */ jsx("p", { className: "bl-agent__empty", children: status === "queued" ? "Waiting to start\u2026" : "No logs." }),
+          status === "error" && error && /* @__PURE__ */ jsx("div", { className: "bl-agent__out", "data-error": "", children: typeof error === "string" ? /* @__PURE__ */ jsx("pre", { children: error }) : error }),
+          status === "success" && result != null && /* @__PURE__ */ jsx("div", { className: "bl-agent__out", children: typeof result === "string" ? /* @__PURE__ */ jsx("pre", { children: result }) : result })
+        ] }) }),
+        /* @__PURE__ */ jsx("span", { className: "bl-agent__sr", "aria-live": "polite", children: `${tool} ${statusText}${status === "error" && typeof error === "string" ? `: ${error.split("\n")[0]}` : ""}` })
+      ]
+    }
+  );
+}
+export {
+  AgentCard as default
+};

package/dist/ArcadeButtons.d.ts

@@ -0,0 +1,23 @@
+import { type CSSProperties, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';
+export interface ArcadeButtonsProps {
+    children?: ReactNode;
+    /** Blast off and drop back in, hop away from the pointer, or stretch like a slingshot. */
+    behavior?: 'launch' | 'dodge' | 'sling';
+    /** Launch calls it at lift-off; sling on a far enough release (without an event). */
+    onClick?: (event?: ReactMouseEvent<HTMLButtonElement>) => void;
+    /** Dodges before giving in. */
+    maxDodges?: number;
+    /** How close the pointer gets before it dodges, in px. */
+    dodgeRadius?: number;
+    /** How far the sling stretches, in px. */
+    pull?: number;
+    disabled?: boolean;
+    color?: string;
+    textColor?: string;
+    smokeColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ArcadeButtons({ children, behavior, onClick, maxDodges, dodgeRadius, pull, disabled, color, textColor, smokeColor, accentColor, fontFamily, className, style }: ArcadeButtonsProps): import("react").JSX.Element;

package/dist/ArcadeButtons.js

@@ -0,0 +1,169 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-arcade-buttons";
+const CSS = `
+.bl-arcade { position: relative; display: inline-block; transform: translate(var(--dx), var(--dy)); transition: transform 260ms cubic-bezier(.3,1.5,.5,1); }
+.bl-arcade__btn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: 4px; background: var(--bl-bg); color: var(--bl-ink); font: inherit; font-family: var(--bl-font); font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: inset -4px -4px 0 rgba(0,0,0,0.3), inset 4px 4px 0 rgba(255,255,255,0.25), 0 4px 0 rgba(0,0,0,0.45); touch-action: none; user-select: none; transform: translate(var(--sx, 0px), var(--sy, 0px)) scale(var(--scx, 1), var(--scy, 1)); transition: transform 420ms cubic-bezier(.3,1.8,.4,1); }
+.bl-arcade__btn:active { box-shadow: inset 4px 4px 0 rgba(0,0,0,0.3), 0 1px 0 rgba(0,0,0,0.45); translate: 0 3px; }
+.bl-arcade__btn:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 3px; }
+.bl-arcade__btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.bl-arcade[data-state="rumble"] .bl-arcade__btn { animation: bl-arcade-rumble 70ms steps(2) infinite; }
+.bl-arcade[data-state="flying"] .bl-arcade__btn { animation: bl-arcade-launch 520ms cubic-bezier(.5,0,.9,.4) forwards; }
+.bl-arcade[data-state="landing"] .bl-arcade__btn { animation: bl-arcade-land 420ms cubic-bezier(.2,1.4,.4,1) both; }
+.bl-arcade__smoke { position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: var(--bl-smoke); opacity: 0; pointer-events: none; }
+.bl-arcade[data-state="flying"] .bl-arcade__smoke { animation: bl-arcade-puff 600ms steps(5) forwards; }
+.bl-arcade[data-state="flying"] .bl-arcade__smoke:nth-child(2) { --side: -1; animation-delay: 60ms; }
+.bl-arcade[data-state="flying"] .bl-arcade__smoke:nth-child(3) { --side: 1; animation-delay: 120ms; }
+.bl-arcade[data-pulling] { transition: none; }
+.bl-arcade[data-pulling] .bl-arcade__btn { transition: none; }
+@keyframes bl-arcade-rumble { 50% { transform: translate(1px, -1px); } }
+@keyframes bl-arcade-launch { to { transform: translateY(-140vh) scaleY(1.2); } }
+@keyframes bl-arcade-land { from { transform: translateY(-60px); opacity: 0; } }
+@keyframes bl-arcade-puff { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: translate(calc(var(--side, 0) * 18px), 10px) scale(2.4); } }
+@media (prefers-reduced-motion: reduce) { .bl-arcade, .bl-arcade__btn { transition: none !important; animation: none !important; transform: none !important; } .bl-arcade__smoke { display: 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 ArcadeButtons({
+  children,
+  behavior = "launch",
+  onClick,
+  maxDodges = 5,
+  dodgeRadius = 70,
+  pull = 90,
+  disabled = false,
+  color = "#b13e53",
+  textColor = "#f4f4f4",
+  smokeColor = "#94b0c2",
+  accentColor = "#73eff7",
+  fontFamily = "inherit",
+  className = "",
+  style
+}) {
+  useStyles();
+  const wrapRef = useRef(null);
+  const btnRef = useRef(null);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const [state, setState] = useState("idle");
+  const dodges = useRef(0);
+  const timers = useRef([]);
+  const clickRef = useRef(onClick);
+  clickRef.current = onClick;
+  const reduced = () => window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+  useEffect(() => () => timers.current.forEach(clearTimeout), []);
+  useEffect(() => {
+    if (behavior !== "dodge") return void 0;
+    dodges.current = 0;
+    setOffset({ x: 0, y: 0 });
+    const onMove = (event) => {
+      if (event.pointerType !== "mouse" || dodges.current >= maxDodges || reduced()) return;
+      const r = btnRef.current.getBoundingClientRect();
+      const dx = event.clientX - (r.left + r.width / 2);
+      const dy = event.clientY - (r.top + r.height / 2);
+      if (Math.hypot(dx / (r.width / 2 + dodgeRadius), dy / (r.height / 2 + dodgeRadius)) > 1) return;
+      dodges.current += 1;
+      const away = Math.atan2(-dy, -dx) + (Math.random() - 0.5) * 1.2;
+      setOffset((o) => {
+        const nx = o.x + Math.cos(away) * (r.width * 0.9);
+        const ny = o.y + Math.sin(away) * (r.height * 1.6);
+        const len = Math.hypot(nx, ny);
+        const max = r.width * 1.6;
+        return len > max ? { x: nx / len * max * 0.5, y: ny / len * max * 0.5 } : { x: nx, y: ny };
+      });
+    };
+    window.addEventListener("pointermove", onMove, { passive: true });
+    return () => window.removeEventListener("pointermove", onMove);
+  }, [behavior, maxDodges, dodgeRadius]);
+  useEffect(() => {
+    if (behavior !== "sling") return void 0;
+    const btn = btnRef.current;
+    const wrap = wrapRef.current;
+    let drag = null;
+    const paint = (x, y) => {
+      const d = Math.min(1, Math.hypot(x, y) / pull);
+      btn.style.setProperty("--sx", `${x}px`);
+      btn.style.setProperty("--sy", `${y}px`);
+      btn.style.setProperty("--scx", (1 + d * 0.25).toFixed(3));
+      btn.style.setProperty("--scy", (1 - d * 0.18).toFixed(3));
+    };
+    const onDown = (event) => {
+      if (event.button > 0 || reduced() || btn.disabled) return;
+      drag = { x: event.clientX, y: event.clientY, far: false };
+      btn.setPointerCapture?.(event.pointerId);
+      wrap.dataset.pulling = "";
+    };
+    const onMove = (event) => {
+      if (!drag) return;
+      let x = event.clientX - drag.x;
+      let y = event.clientY - drag.y;
+      const len = Math.hypot(x, y);
+      const k = len > 0 ? pull * (1 - Math.exp(-len / pull)) / len : 0;
+      x *= k;
+      y *= k;
+      drag.far = len > pull * 0.8;
+      paint(x, y);
+    };
+    const onUp = () => {
+      if (!drag) return;
+      const far = drag.far;
+      drag = null;
+      delete wrap.dataset.pulling;
+      paint(0, 0);
+      if (far) clickRef.current?.();
+    };
+    btn.addEventListener("pointerdown", onDown);
+    btn.addEventListener("pointermove", onMove);
+    btn.addEventListener("pointerup", onUp);
+    btn.addEventListener("pointercancel", onUp);
+    return () => {
+      btn.removeEventListener("pointerdown", onDown);
+      btn.removeEventListener("pointermove", onMove);
+      btn.removeEventListener("pointerup", onUp);
+      btn.removeEventListener("pointercancel", onUp);
+    };
+  }, [behavior, pull]);
+  const handleClick = (event) => {
+    if (behavior === "launch" && !reduced()) {
+      if (state !== "idle") return;
+      setState("rumble");
+      timers.current = [
+        setTimeout(() => {
+          setState("flying");
+          clickRef.current?.(event);
+        }, 380),
+        setTimeout(() => setState("landing"), 1500),
+        setTimeout(() => setState("idle"), 1950)
+      ];
+      return;
+    }
+    if (behavior === "sling" && event.detail > 0 && !reduced()) return;
+    clickRef.current?.(event);
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: wrapRef,
+      className: `bl-arcade ${className}`,
+      "data-state": state,
+      style: { "--dx": `${offset.x}px`, "--dy": `${offset.y}px`, "--bl-bg": color, "--bl-ink": textColor, "--bl-smoke": smokeColor, "--bl-accent": accentColor, "--bl-font": fontFamily, ...style },
+      children: [
+        /* @__PURE__ */ jsx("button", { ref: btnRef, type: "button", className: "bl-arcade__btn", disabled, onClick: handleClick, children }),
+        behavior === "launch" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "bl-arcade__smoke", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "bl-arcade__smoke", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "bl-arcade__smoke", "aria-hidden": "true" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ArcadeButtons as default
+};

package/dist/AuroraBands.d.ts

@@ -0,0 +1,19 @@
+import { type CSSProperties } from 'react';
+export interface AuroraBandsProps {
+    /** One colour per curtain (cycled). */
+    colors?: string[];
+    /** How many curtains. */
+    ribbons?: number;
+    speed?: number;
+    /** How many flat light steps the glow is drawn in. */
+    bands?: number;
+    /** Curtain height as a share of the sky. */
+    height?: number;
+    pixelSize?: number;
+    stars?: number;
+    skyTop?: string;
+    skyBottom?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function AuroraBands({ colors, ribbons, speed, bands, height, pixelSize, stars, skyTop, skyBottom, className, style }: AuroraBandsProps): import("react").JSX.Element;

package/dist/AuroraBands.js

@@ -0,0 +1,126 @@
+'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];
+};
+function AuroraBands({
+  colors = ["#38b764", "#73eff7", "#b13e53"],
+  ribbons = 3,
+  speed = 1,
+  bands = 5,
+  height = 0.38,
+  pixelSize = 4,
+  stars = 70,
+  skyTop = "#0b0b14",
+  skyBottom = "#1a1c2c",
+  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 tints = colors.map(hexToRgb);
+    const top = hexToRgb(skyTop);
+    const bottom = hexToRgb(skyBottom);
+    let w = 0;
+    let h = 0;
+    let img = null;
+    let sky = [];
+    let field = [];
+    let t = 3;
+    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);
+      sky = Array.from({ length: h }, (_, y) => top.map((c, k) => c + (bottom[k] - c) * (y / h)));
+      field = Array.from({ length: stars }, (_, i) => ({ x: Math.floor((Math.sin(i * 12.9898) * 0.5 + 0.5) * w), y: Math.floor((Math.sin(i * 78.233) * 0.5 + 0.5) * h * 0.8), phase: i }));
+    };
+    const frame = () => {
+      const d = img.data;
+      for (let y = 0; y < h; y++) {
+        const [r, g, b] = sky[y];
+        for (let x = 0; x < w; x++) {
+          const i = (y * w + x) * 4;
+          d[i] = r;
+          d[i + 1] = g;
+          d[i + 2] = b;
+          d[i + 3] = 255;
+        }
+      }
+      field.forEach((s) => {
+        const twinkle = 0.5 + 0.5 * Math.sin(t * 2 + s.phase);
+        const i = (s.y * w + s.x) * 4;
+        const v = 120 + twinkle * 135;
+        d[i] = v;
+        d[i + 1] = v;
+        d[i + 2] = v;
+      });
+      for (let r = 0; r < ribbons; r++) {
+        const [cr, cg, cb] = tints[r % tints.length];
+        for (let x = 0; x < w; x++) {
+          const u = x / w;
+          const centre = h * (0.32 + r * 0.1 + 0.1 * Math.sin(u * 5 + t * 0.5 + r * 1.9) + 0.05 * Math.sin(u * 13 - t * 0.9 + r));
+          const thick = h * height * (0.5 + 0.25 * Math.sin(u * 7 + t * 0.7 + r * 2.3));
+          const streak = 0.65 + 0.35 * Math.sin(x * 0.9 + t * 3 + r * 5) * Math.sin(x * 0.23 - t);
+          for (let y = 0; y < h; y++) {
+            const dy = (y - centre) / thick;
+            let v = dy > 0 ? Math.exp(-dy * dy * 9) : Math.exp(dy * 1.6);
+            v *= streak;
+            if (v < 0.08) continue;
+            const level = Math.floor(v * bands) / bands;
+            if (!level) continue;
+            const i = (y * w + x) * 4;
+            d[i] = Math.min(255, d[i] + cr * level);
+            d[i + 1] = Math.min(255, d[i + 1] + cg * level);
+            d[i + 2] = Math.min(255, d[i + 2] + cb * level);
+          }
+        }
+      }
+      ctx.putImageData(img, 0, 0);
+    };
+    const tick = (now) => {
+      t += Math.max(0, Math.min(0.05, (now - last) / 1e3)) * speed;
+      last = now;
+      frame();
+      raf = visible && !document.hidden ? requestAnimationFrame(tick) : 0;
+    };
+    const start = () => {
+      if (raf || reduced || !visible || document.hidden) return;
+      last = performance.now();
+      raf = requestAnimationFrame(tick);
+    };
+    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);
+    fit();
+    frame();
+    start();
+    return () => {
+      cancelAnimationFrame(raf);
+      resize.disconnect();
+      observer.disconnect();
+      document.removeEventListener("visibilitychange", start);
+    };
+  }, [colors.join(), ribbons, speed, bands, height, pixelSize, stars, skyTop, skyBottom]);
+  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, "aria-hidden": "true", className, style: { display: "block", width: "100%", height: "100%", background: skyTop, imageRendering: "pixelated", ...style } });
+}
+export {
+  AuroraBands as default
+};

package/dist/AvatarTooltips.d.ts

@@ -0,0 +1,32 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface StackPerson {
+    id?: string;
+    name: string;
+    role?: string;
+    /** An image URL or any node; initials are used otherwise. */
+    avatar?: ReactNode;
+}
+export interface AvatarTooltipsProps {
+    people?: StackPerson[];
+    /** Visible avatars; the rest fold into a "+N" chip. */
+    max?: number;
+    size?: number;
+    /** Overlap at rest, in px. */
+    overlap?: number;
+    /** Gap when fanned out, in px. */
+    spread?: number;
+    ring?: number;
+    /** How far the tag swings toward the pointer, in degrees. */
+    sway?: number;
+    label?: string;
+    backgroundColor?: string;
+    chipColor?: string;
+    textColor?: string;
+    tooltipColor?: string;
+    tooltipTextColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function AvatarTooltips({ people, max, size, overlap, spread, ring, sway, label, backgroundColor, chipColor, textColor, tooltipColor, tooltipTextColor, accentColor, fontFamily, className, style }: AvatarTooltipsProps): import("react").JSX.Element;

package/dist/AvatarTooltips.js

@@ -0,0 +1,121 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useInsertionEffect, useState } from "react";
+const STYLE_ID = "bl-avatar-tooltips";
+const CSS = `
+.bl-avs { display: inline-flex; align-items: center; margin: 0; padding: var(--bl-pad) 0 0; list-style: none; font-family: var(--bl-font); }
+.bl-avs__item { position: relative; flex: 0 0 auto; transition: margin 340ms cubic-bezier(.3,1.35,.5,1); }
+.bl-avs__item + .bl-avs__item { margin-left: calc(var(--bl-overlap) * -1); }
+.bl-avs:hover .bl-avs__item + .bl-avs__item, .bl-avs:focus-within .bl-avs__item + .bl-avs__item { margin-left: var(--bl-spread); }
+.bl-avs__face { position: relative; display: grid; place-items: center; width: var(--bl-size); height: var(--bl-size); overflow: hidden; border-radius: 50%; background: var(--bl-chip); color: var(--bl-ink); font-size: calc(var(--bl-size) * 0.34); font-weight: 700; box-shadow: 0 0 0 var(--bl-ring) var(--bl-bg); outline: none; cursor: default; transition: transform 240ms cubic-bezier(.3,1.5,.5,1); }
+.bl-avs__face img, .bl-avs__face svg { width: 100%; height: 100%; object-fit: cover; }
+.bl-avs__item:hover, .bl-avs__item:focus-within { z-index: 2; }
+.bl-avs__item:hover .bl-avs__face, .bl-avs__face:focus { transform: translateY(-6px) scale(1.08); }
+.bl-avs__face:focus-visible { box-shadow: 0 0 0 var(--bl-ring) var(--bl-bg), 0 0 0 calc(var(--bl-ring) + 2px) var(--bl-accent); }
+.bl-avs__tip { position: absolute; left: 50%; bottom: calc(100% + 10px); display: grid; justify-items: center; gap: 1px; padding: 6px 10px; border-radius: 8px; background: var(--bl-tip); color: var(--bl-tip-ink); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 8px) scale(0.6) rotate(var(--bl-sway, 0deg)); transform-origin: bottom center; transition: opacity 120ms, transform 340ms cubic-bezier(.3,1.6,.5,1); }
+.bl-avs__tip::after { content: ""; position: absolute; left: 50%; top: 100%; border: 5px solid transparent; border-top-color: var(--bl-tip); transform: translateX(-50%); }
+.bl-avs__item:hover .bl-avs__tip, .bl-avs__face:focus + .bl-avs__tip { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(var(--bl-sway, 0deg)); }
+.bl-avs__name { font-size: 13px; font-weight: 700; }
+.bl-avs__role { font-size: 11px; opacity: 0.75; }
+.bl-avs__more { background: var(--bl-accent); color: var(--bl-tip); }
+@media (prefers-reduced-motion: reduce) { .bl-avs__item, .bl-avs__face, .bl-avs__tip { transition: opacity 120ms; } }
+`;
+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 initials = (name) => String(name).split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0].toUpperCase()).join("");
+function AvatarTooltips({
+  people = [],
+  max = 5,
+  size = 48,
+  overlap = 14,
+  spread = 6,
+  ring = 3,
+  sway = 12,
+  label = "Team",
+  backgroundColor = "#1a1c2c",
+  chipColor = "#333c57",
+  textColor = "#f4f4f4",
+  tooltipColor = "#f4f4f4",
+  tooltipTextColor = "#1a1c2c",
+  accentColor = "#73eff7",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [swayBy, setSwayBy] = useState({});
+  const shown = people.length > max ? people.slice(0, max - 1) : people;
+  const rest = people.length > max ? people.slice(max - 1) : [];
+  const onMove = (key, event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const offset = (event.clientX - rect.left) / rect.width - 0.5;
+    setSwayBy((current) => ({ ...current, [key]: offset * 2 * sway }));
+  };
+  const item = (key, face, tip, name, extraClass = "") => /* @__PURE__ */ jsxs("li", { className: "bl-avs__item", onPointerMove: (event) => onMove(key, event), onPointerLeave: () => setSwayBy((current) => ({ ...current, [key]: 0 })), children: [
+    /* @__PURE__ */ jsx("span", { className: `bl-avs__face ${extraClass}`, tabIndex: 0, role: "img", "aria-label": name, "aria-describedby": `${uid}-${key}`, children: face }),
+    /* @__PURE__ */ jsx("span", { id: `${uid}-${key}`, className: "bl-avs__tip", role: "tooltip", style: { "--bl-sway": `${(swayBy[key] ?? 0).toFixed(1)}deg` }, children: tip })
+  ] }, key);
+  return /* @__PURE__ */ jsxs(
+    "ul",
+    {
+      className: `bl-avs ${className}`,
+      "aria-label": `${label}: ${people.length} ${people.length === 1 ? "person" : "people"}`,
+      style: {
+        "--bl-size": `${size}px`,
+        "--bl-overlap": `${overlap}px`,
+        "--bl-spread": `${spread}px`,
+        "--bl-ring": `${ring}px`,
+        "--bl-pad": `${Math.round(size * 0.9)}px`,
+        "--bl-bg": backgroundColor,
+        "--bl-chip": chipColor,
+        "--bl-ink": textColor,
+        "--bl-tip": tooltipColor,
+        "--bl-tip-ink": tooltipTextColor,
+        "--bl-accent": accentColor,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        shown.map((person, i) => {
+          const key = person.id ?? `p${i}`;
+          const face = person.avatar ? typeof person.avatar === "string" ? /* @__PURE__ */ jsx("img", { src: person.avatar, alt: "" }) : person.avatar : initials(person.name);
+          return item(
+            key,
+            face,
+            /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "bl-avs__name", children: person.name }),
+              person.role && /* @__PURE__ */ jsx("span", { className: "bl-avs__role", children: person.role })
+            ] }),
+            person.role ? `${person.name}, ${person.role}` : person.name
+          );
+        }),
+        rest.length > 0 && item(
+          "more",
+          `+${rest.length}`,
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("span", { className: "bl-avs__name", children: [
+              rest.length,
+              " more"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "bl-avs__role", children: [
+              rest.slice(0, 4).map((p) => p.name).join(", "),
+              rest.length > 4 ? "\u2026" : ""
+            ] })
+          ] }),
+          `${rest.length} more: ${rest.map((p) => p.name).join(", ")}`,
+          "bl-avs__more"
+        )
+      ]
+    }
+  );
+}
+export {
+  AvatarTooltips as default
+};