bits-lab 0.0.0-stage → 0.1.2

package/dist/SmartNavbar.js

@@ -0,0 +1,188 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-smart-navbar";
+const CSS = `
+.bl-nav { position: sticky; top: 0; z-index: 40; height: 0; font-family: var(--bl-font); container-type: inline-size; }
+.bl-nav__bar { position: relative; display: flex; align-items: center; gap: 18px; width: 100%; max-width: 100%; height: var(--bl-h); margin: 0 auto; padding: 0 var(--bl-pad); box-sizing: border-box; color: var(--bl-ink); background: var(--bl-bg-top); border-bottom: 1px solid var(--bl-line-top); transition: max-width var(--bl-dur) var(--bl-ease), margin-top var(--bl-dur) var(--bl-ease), height var(--bl-dur) var(--bl-ease), border-radius var(--bl-dur) var(--bl-ease), background-color var(--bl-dur), box-shadow var(--bl-dur), border-color var(--bl-dur), transform var(--bl-dur) var(--bl-ease); }
+.bl-nav[data-pill] .bl-nav__bar { max-width: var(--bl-pill-w); height: var(--bl-pill-h); margin-top: var(--bl-pill-top); border-radius: var(--bl-pill-r); background: var(--bl-bg-pill); border-color: transparent; box-shadow: 0 0 0 1px var(--bl-line), 0 12px 32px -14px rgba(0,0,0,0.6); backdrop-filter: blur(var(--bl-blur)) saturate(1.4); -webkit-backdrop-filter: blur(var(--bl-blur)) saturate(1.4); }
+.bl-nav[data-hidden]:not(:focus-within) .bl-nav__bar { transform: translateY(calc(-100% - var(--bl-pill-top) - 8px)); }
+.bl-nav__brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; color: inherit; font-weight: 700; text-decoration: none; white-space: nowrap; }
+.bl-nav__links { display: flex; gap: 4px; flex: 1; justify-content: center; margin: 0; padding: 0; list-style: none; min-width: 0; }
+.bl-nav__link { display: block; padding: 8px 12px; border-radius: var(--bl-link-r); color: var(--bl-muted); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color 150ms, background-color 150ms; }
+.bl-nav__link:hover, .bl-nav__link[aria-current="page"] { color: var(--bl-ink); background: var(--bl-hover); }
+.bl-nav__link:focus-visible, .bl-nav__menu:focus-visible, .bl-nav__brand:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+.bl-nav__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
+.bl-nav__menu { display: none; place-items: center; width: 38px; height: 38px; margin-left: auto; border: 0; border-radius: var(--bl-link-r); background: var(--bl-hover); color: var(--bl-ink); cursor: pointer; }
+.bl-nav__sheet { position: absolute; left: 8px; right: 8px; top: calc(100% + 8px); display: grid; gap: 2px; padding: 8px; border-radius: var(--bl-link-r); background: var(--bl-bg-pill); box-shadow: 0 0 0 1px var(--bl-line), 0 20px 40px -16px rgba(0,0,0,0.7); backdrop-filter: blur(var(--bl-blur)); -webkit-backdrop-filter: blur(var(--bl-blur)); }
+@container (max-width: 640px) {
+  .bl-nav__links, .bl-nav__actions { display: none; }
+  .bl-nav__menu { display: grid; }
+}
+@media (prefers-reduced-motion: reduce) { .bl-nav__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 scrollParent(node) {
+  for (let el = node?.parentElement; el; el = el.parentElement) {
+    if (/(auto|scroll|overlay)/.test(getComputedStyle(el).overflowY) && el.scrollHeight > el.clientHeight) return el;
+  }
+  return window;
+}
+function SmartNavbar({
+  brand,
+  brandHref = "/",
+  links = [],
+  actions,
+  current,
+  onNavigate,
+  shrinkAt = 60,
+  hideOnScroll = true,
+  hideAfter = 240,
+  height = 64,
+  pillHeight = 52,
+  pillWidth = 720,
+  pillTop = 12,
+  padding = 24,
+  radius = 999,
+  blur = 14,
+  duration = 380,
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  topColor = "transparent",
+  topLineColor = "rgba(255,255,255,0.08)",
+  pillColor = "rgba(26,28,44,0.72)",
+  lineColor = "rgba(255,255,255,0.12)",
+  hoverColor = "rgba(255,255,255,0.08)",
+  accentColor = "#73eff7",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  label = "Main",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const ref = useRef(null);
+  const [pill, setPill] = useState(false);
+  const [hidden, setHidden] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuOpenRef = useRef(false);
+  menuOpenRef.current = menuOpen;
+  useEffect(() => {
+    const scroller = scrollParent(ref.current);
+    const read = () => scroller === window ? window.scrollY : scroller.scrollTop;
+    let last = read();
+    let travel = 0;
+    let frame = 0;
+    const update = () => {
+      frame = 0;
+      const y = read();
+      const delta = y - last;
+      last = y;
+      setPill(y > shrinkAt);
+      travel = Math.sign(delta) === Math.sign(travel) ? travel + delta : delta;
+      if (!hideOnScroll || y < hideAfter || menuOpenRef.current) setHidden(false);
+      else if (travel > 12) setHidden(true);
+      else if (travel < -8) setHidden(false);
+    };
+    const onScroll = () => {
+      if (!frame) frame = requestAnimationFrame(update);
+    };
+    update();
+    scroller.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      cancelAnimationFrame(frame);
+      scroller.removeEventListener("scroll", onScroll);
+    };
+  }, [shrinkAt, hideOnScroll, hideAfter]);
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onKey = (event) => event.key === "Escape" && setMenuOpen(false);
+    const onDown = (event) => !ref.current.contains(event.target) && setMenuOpen(false);
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onDown);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onDown);
+    };
+  }, [menuOpen]);
+  const link = (item, extra) => /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: "bl-nav__link",
+      href: item.href,
+      "aria-current": current === item.href ? "page" : void 0,
+      onClick: (event) => {
+        if (onNavigate) {
+          event.preventDefault();
+          onNavigate(item.href, item);
+        }
+        extra?.();
+      },
+      children: item.label
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: `bl-nav ${className}`,
+      "data-pill": pill || void 0,
+      "data-hidden": hidden || void 0,
+      style: {
+        "--bl-h": `${height}px`,
+        "--bl-pill-h": `${pillHeight}px`,
+        "--bl-pill-w": `${pillWidth}px`,
+        "--bl-pill-top": `${pillTop}px`,
+        "--bl-pill-r": `${Math.min(radius, pillHeight / 2)}px`,
+        "--bl-link-r": `${Math.min(radius, 10)}px`,
+        "--bl-pad": `${padding}px`,
+        "--bl-blur": `${blur}px`,
+        "--bl-dur": `${duration}ms`,
+        "--bl-ease": "cubic-bezier(.2,.9,.25,1)",
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-bg-top": topColor,
+        "--bl-line-top": topLineColor,
+        "--bl-bg-pill": pillColor,
+        "--bl-line": lineColor,
+        "--bl-hover": hoverColor,
+        "--bl-accent": accentColor,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: /* @__PURE__ */ jsxs("nav", { className: "bl-nav__bar", "aria-label": label, children: [
+        brand && /* @__PURE__ */ jsx(
+          "a",
+          {
+            className: "bl-nav__brand",
+            href: brandHref,
+            onClick: (event) => {
+              if (onNavigate) {
+                event.preventDefault();
+                onNavigate(brandHref);
+              }
+            },
+            children: brand
+          }
+        ),
+        /* @__PURE__ */ jsx("ul", { className: "bl-nav__links", children: links.map((item) => /* @__PURE__ */ jsx("li", { children: link(item) }, item.href)) }),
+        actions && /* @__PURE__ */ jsx("div", { className: "bl-nav__actions", children: actions }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "bl-nav__menu", "aria-expanded": menuOpen, "aria-controls": `${uid}-sheet`, "aria-label": menuOpen ? "Close menu" : "Open menu", onClick: () => setMenuOpen((o) => !o), children: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 18 18", stroke: "currentColor", strokeWidth: "2", fill: "none", "aria-hidden": "true", children: menuOpen ? /* @__PURE__ */ jsx("path", { d: "M3 3l12 12M15 3 3 15" }) : /* @__PURE__ */ jsx("path", { d: "M2 4h14M2 9h14M2 14h14" }) }) }),
+        menuOpen && /* @__PURE__ */ jsxs("div", { id: `${uid}-sheet`, className: "bl-nav__sheet", children: [
+          links.map((item) => /* @__PURE__ */ jsx("div", { children: link(item, () => setMenuOpen(false)) }, item.href)),
+          actions && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 8, padding: "8px 4px 2px" }, children: actions })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  SmartNavbar as default
+};

package/dist/SparkChart.d.ts

@@ -0,0 +1,41 @@
+import { type CSSProperties } from 'react';
+/** A plain number, or a value with its label (shown in the tooltip and table). */
+export type SparkDatum = number | {
+    value: number;
+    label?: string;
+};
+export interface SparkChartProps {
+    /** One series. */
+    data?: SparkDatum[];
+    /** Labels for a plain number array. */
+    labels?: string[];
+    /** Height in px; the width follows the container. */
+    height?: number;
+    /** Monotone curve that never overshoots the data. */
+    smooth?: boolean;
+    /** A ~10% wash under the line. */
+    area?: boolean;
+    /** Direct label on the last value. */
+    showEndLabel?: boolean;
+    /** Hairline baseline. */
+    showBaseline?: boolean;
+    /** Draw the line in on mount (skipped under reduced motion). */
+    animate?: boolean;
+    drawDuration?: number;
+    /** Formats the end label, tooltip and table. */
+    formatValue?: (value: number) => string;
+    /** Names the chart for screen readers (an automatic summary follows). */
+    label?: string;
+    color?: string;
+    textColor?: string;
+    mutedColor?: string;
+    gridColor?: string;
+    /** Surface behind the chart; used for the 2px ring around the dot. */
+    surfaceColor?: string;
+    tooltipColor?: string;
+    focusColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function SparkChart({ data, labels, height, smooth, area, showEndLabel, showBaseline, animate, drawDuration, formatValue, label, color, textColor, mutedColor, gridColor, surfaceColor, tooltipColor, focusColor, fontFamily, className, style }: SparkChartProps): import("react").JSX.Element;

package/dist/SparkChart.js

@@ -0,0 +1,188 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useMemo, useRef, useState } from "react";
+const STYLE_ID = "bl-spark-chart";
+const CSS = `
+.bl-spark { position: relative; width: 100%; color: var(--bl-ink); font-family: var(--bl-font); outline: none; touch-action: pan-y; }
+.bl-spark:focus-visible { box-shadow: 0 0 0 2px var(--bl-focus); border-radius: 6px; }
+.bl-spark svg { display: block; width: 100%; overflow: visible; }
+.bl-spark__line { fill: none; stroke: var(--bl-color); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: d 450ms cubic-bezier(.2,.9,.25,1); }
+.bl-spark[data-draw] .bl-spark__line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bl-spark-draw var(--bl-draw) cubic-bezier(.4,0,.2,1) forwards; }
+.bl-spark__area { fill: var(--bl-color); opacity: 0.1; transition: d 450ms cubic-bezier(.2,.9,.25,1); }
+.bl-spark[data-draw] .bl-spark__area { animation: bl-spark-fade var(--bl-draw) ease both; }
+.bl-spark__base { stroke: var(--bl-grid); stroke-width: 1; }
+.bl-spark__dot { fill: var(--bl-color); stroke: var(--bl-surface); stroke-width: 2; }
+.bl-spark__cross { stroke: var(--bl-muted); stroke-width: 1; }
+.bl-spark__end { fill: var(--bl-ink); font-size: 12px; font-weight: 600; }
+.bl-spark__tip { position: absolute; top: 0; z-index: 2; padding: 6px 9px; border-radius: 8px; background: var(--bl-tip-bg); box-shadow: 0 0 0 1px var(--bl-grid), 0 8px 20px -8px rgba(0,0,0,0.6); pointer-events: none; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); }
+.bl-spark__tip strong { display: block; font-size: 14px; font-weight: 700; color: var(--bl-ink); }
+.bl-spark__tip span { display: flex; align-items: center; gap: 6px; color: var(--bl-muted); font-size: 12px; }
+.bl-spark__tip i { width: 10px; height: 2px; border-radius: 1px; background: var(--bl-color); }
+.bl-spark__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-spark-draw { to { stroke-dashoffset: 0; } }
+@keyframes bl-spark-fade { from { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .bl-spark[data-draw] .bl-spark__line, .bl-spark[data-draw] .bl-spark__area { animation: none; stroke-dasharray: none; } .bl-spark__line, .bl-spark__area { 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 smoothPath(points) {
+  if (points.length < 3) return points.map(([x, y], i) => `${i ? "L" : "M"}${x},${y}`).join("");
+  const n = points.length;
+  const dx = [];
+  const slope = [];
+  for (let i = 0; i < n - 1; i++) {
+    dx.push(points[i + 1][0] - points[i][0]);
+    slope.push((points[i + 1][1] - points[i][1]) / (dx[i] || 1));
+  }
+  const tangent = [slope[0]];
+  for (let i = 1; i < n - 1; i++) tangent.push(slope[i - 1] * slope[i] <= 0 ? 0 : 3 * (dx[i - 1] + dx[i]) / ((2 * dx[i] + dx[i - 1]) / slope[i - 1] + (dx[i] + 2 * dx[i - 1]) / slope[i]));
+  tangent.push(slope[n - 2]);
+  let d = `M${points[0][0]},${points[0][1]}`;
+  for (let i = 0; i < n - 1; i++) {
+    const [x0, y0] = points[i];
+    const [x1, y1] = points[i + 1];
+    const h = dx[i] / 3;
+    d += `C${x0 + h},${y0 + h * tangent[i]} ${x1 - h},${y1 - h * tangent[i + 1]} ${x1},${y1}`;
+  }
+  return d;
+}
+const defaultFormat = (value) => new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }).format(value);
+function SparkChart({
+  data = [],
+  labels,
+  height = 96,
+  smooth = true,
+  area = true,
+  showEndLabel = true,
+  showBaseline = true,
+  animate = true,
+  drawDuration = 900,
+  formatValue = defaultFormat,
+  label = "Trend",
+  color = "#3987e5",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  gridColor = "rgba(255,255,255,0.1)",
+  surfaceColor = "#1a1c2c",
+  tooltipColor = "#11131c",
+  focusColor = "#73eff7",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const ref = useRef(null);
+  const [width, setWidth] = useState(320);
+  const [active, setActive] = useState(null);
+  const values = data.map((d) => typeof d === "number" ? d : d.value);
+  const names = data.map((d, i) => (typeof d === "number" ? labels?.[i] : d.label) ?? `Point ${i + 1}`);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return void 0;
+    const observer = new ResizeObserver(([entry]) => setWidth(Math.max(60, entry.contentRect.width)));
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+  const endLabel = showEndLabel && values.length ? formatValue(values[values.length - 1]) : "";
+  const padRight = endLabel ? Math.min(80, String(endLabel).length * 7.5 + 14) : 6;
+  const padY = 8;
+  const geometry = useMemo(() => {
+    if (!values.length) return null;
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const span = max - min || 1;
+    const plotW = Math.max(10, width - padRight - 6);
+    const x = (i) => 6 + (values.length === 1 ? plotW / 2 : i / (values.length - 1) * plotW);
+    const y = (v) => padY + (1 - (v - min) / span) * (height - padY * 2);
+    const points = values.map((v, i) => [Number(x(i).toFixed(2)), Number(y(v).toFixed(2))]);
+    const line = smooth ? smoothPath(points) : points.map(([px, py], i) => `${i ? "L" : "M"}${px},${py}`).join("");
+    const bottom = height - padY;
+    const fill = `${line}L${points[points.length - 1][0]},${bottom}L${points[0][0]},${bottom}Z`;
+    return { points, line, fill, bottom, min, max };
+  }, [values.join(","), width, height, smooth, padRight]);
+  const nearest = (clientX) => {
+    const rect = ref.current.getBoundingClientRect();
+    const x = clientX - rect.left;
+    let best = 0;
+    geometry.points.forEach(([px], i) => {
+      if (Math.abs(px - x) < Math.abs(geometry.points[best][0] - x)) best = i;
+    });
+    return best;
+  };
+  const onKeyDown = (event) => {
+    if (!geometry) return;
+    const last = values.length - 1;
+    const moves = { ArrowRight: (active ?? -1) + 1, ArrowLeft: (active ?? last + 1) - 1, Home: 0, End: last };
+    if (event.key === "Escape") return setActive(null);
+    if (!(event.key in moves)) return;
+    event.preventDefault();
+    setActive(Math.max(0, Math.min(last, moves[event.key])));
+  };
+  const point = geometry && active !== null ? geometry.points[active] : null;
+  const trend = values.length > 1 ? values[values.length - 1] - values[0] : 0;
+  const summary = values.length ? `${label}: ${values.length} points from ${formatValue(values[0])} to ${formatValue(values[values.length - 1])}, ${trend > 0 ? "up" : trend < 0 ? "down" : "flat"} overall; low ${formatValue(geometry.min)}, high ${formatValue(geometry.max)}.` : `${label}: no data.`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: `bl-spark ${className}`,
+      "data-draw": animate || void 0,
+      tabIndex: values.length ? 0 : void 0,
+      role: "group",
+      "aria-label": summary,
+      "aria-describedby": `${uid}-table`,
+      onPointerMove: (event) => geometry && setActive(nearest(event.clientX)),
+      onPointerDown: (event) => geometry && setActive(nearest(event.clientX)),
+      onPointerLeave: () => setActive(null),
+      onKeyDown,
+      onBlur: () => setActive(null),
+      style: {
+        "--bl-color": color,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-grid": gridColor,
+        "--bl-surface": surfaceColor,
+        "--bl-tip-bg": tooltipColor,
+        "--bl-focus": focusColor,
+        "--bl-font": fontFamily,
+        "--bl-draw": `${drawDuration}ms`,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx("svg", { height, "aria-hidden": "true", children: geometry && /* @__PURE__ */ jsxs(Fragment, { children: [
+          showBaseline && /* @__PURE__ */ jsx("line", { className: "bl-spark__base", x1: "6", x2: width - padRight, y1: geometry.bottom + 0.5, y2: geometry.bottom + 0.5 }),
+          area && /* @__PURE__ */ jsx("path", { className: "bl-spark__area", d: geometry.fill }),
+          /* @__PURE__ */ jsx("path", { className: "bl-spark__line", d: geometry.line, pathLength: "1" }),
+          point && /* @__PURE__ */ jsx("line", { className: "bl-spark__cross", x1: point[0], x2: point[0], y1: padY / 2, y2: geometry.bottom }),
+          /* @__PURE__ */ jsx("circle", { className: "bl-spark__dot", cx: (point ?? geometry.points[geometry.points.length - 1])[0], cy: (point ?? geometry.points[geometry.points.length - 1])[1], r: "4" }),
+          endLabel && /* @__PURE__ */ jsx("text", { className: "bl-spark__end", x: geometry.points[geometry.points.length - 1][0] + 9, y: geometry.points[geometry.points.length - 1][1], dominantBaseline: "middle", children: endLabel })
+        ] }) }),
+        point && /* @__PURE__ */ jsxs("div", { className: "bl-spark__tip", style: { left: Math.min(Math.max(point[0], 50), width - 50), top: point[1] }, children: [
+          /* @__PURE__ */ jsx("strong", { children: formatValue(values[active]) }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            /* @__PURE__ */ jsx("i", { "aria-hidden": "true" }),
+            names[active]
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "bl-spark__sr", "aria-live": "polite", children: point ? `${names[active]}: ${formatValue(values[active])}` : "" }),
+        /* @__PURE__ */ jsxs("table", { id: `${uid}-table`, className: "bl-spark__sr", children: [
+          /* @__PURE__ */ jsx("caption", { children: label }),
+          /* @__PURE__ */ jsx("tbody", { children: values.map((v, i) => /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "row", children: names[i] }),
+            /* @__PURE__ */ jsx("td", { children: formatValue(v) })
+          ] }, i)) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  SparkChart as default
+};

package/dist/Spoiler.d.ts

@@ -0,0 +1,22 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface SpoilerProps {
+    /** The hidden text. */
+    children?: ReactNode;
+    revealed?: boolean;
+    defaultRevealed?: boolean;
+    onReveal?: (shown: boolean) => void;
+    /** Let a second click hide it again. */
+    rehide?: boolean;
+    /** Accessible name while hidden. */
+    label?: string;
+    dotColor?: string;
+    coverColor?: string;
+    accentColor?: string;
+    /** Size of the particle tile in px. */
+    tile?: number;
+    /** Particles per tile. */
+    density?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function Spoiler({ children, revealed, defaultRevealed, onReveal, rehide, label, dotColor, coverColor, accentColor, tile, density, className, style }: SpoilerProps): import("react").JSX.Element;

package/dist/Spoiler.js

@@ -0,0 +1,97 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { useInsertionEffect, useMemo, useState } from "react";
+const STYLE_ID = "bl-spoiler";
+const CSS = `
+.bl-spoiler { border-radius: 4px; color: transparent; background-image: var(--bl-dots), var(--bl-dots); background-size: var(--bl-tile) var(--bl-tile), calc(var(--bl-tile) * 1.37) calc(var(--bl-tile) * 1.37); background-color: var(--bl-cover); -webkit-box-decoration-break: clone; box-decoration-break: clone; cursor: pointer; user-select: none; -webkit-user-select: none; transition: color 500ms ease, background-size 700ms cubic-bezier(.2,.9,.25,1), background-color 400ms ease; animation: bl-spoiler-drift 2.4s linear infinite; }
+.bl-spoiler:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+.bl-spoiler[data-revealed] { color: inherit; background-color: transparent; background-size: calc(var(--bl-tile) * 5) calc(var(--bl-tile) * 5), calc(var(--bl-tile) * 6) calc(var(--bl-tile) * 6); cursor: text; user-select: text; -webkit-user-select: text; animation: bl-spoiler-scatter 700ms ease forwards; }
+.bl-spoiler[data-gone] { background: none; animation: none; }
+@keyframes bl-spoiler-drift { to { background-position: var(--bl-tile) calc(var(--bl-tile) * -1), calc(var(--bl-tile) * -1.37) calc(var(--bl-tile) * 1.37); } }
+@keyframes bl-spoiler-scatter { to { background-position: calc(var(--bl-tile) * 3) calc(var(--bl-tile) * -2), calc(var(--bl-tile) * -3) calc(var(--bl-tile) * 2); opacity: 1; } }
+@media (prefers-reduced-motion: reduce) { .bl-spoiler { animation: none; transition: color 150ms; } .bl-spoiler[data-revealed] { background: none; 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 tiles = /* @__PURE__ */ new Map();
+function dotTile(color, size, count) {
+  const key = `${color}|${size}|${count}`;
+  if (tiles.has(key)) return tiles.get(key);
+  if (typeof document === "undefined") return "none";
+  const canvas = document.createElement("canvas");
+  canvas.width = canvas.height = size * 2;
+  const ctx = canvas.getContext("2d");
+  ctx.fillStyle = color;
+  for (let i = 0; i < count; i++) {
+    ctx.globalAlpha = 0.35 + Math.random() * 0.65;
+    const r = 0.6 + Math.random() * 0.9;
+    ctx.beginPath();
+    ctx.arc(Math.random() * size * 2, Math.random() * size * 2, r, 0, Math.PI * 2);
+    ctx.fill();
+  }
+  const url = `url(${canvas.toDataURL()})`;
+  tiles.set(key, url);
+  return url;
+}
+function Spoiler({
+  children,
+  revealed,
+  defaultRevealed = false,
+  onReveal,
+  rehide = false,
+  label = "Spoiler",
+  dotColor = "#f4f4f4",
+  coverColor = "rgba(148,176,194,0.18)",
+  accentColor = "#73eff7",
+  tile = 24,
+  density = 60,
+  className = "",
+  style
+}) {
+  useStyles();
+  const [inner, setInner] = useState(defaultRevealed);
+  const shown = revealed ?? inner;
+  const [gone, setGone] = useState(defaultRevealed);
+  const dots = useMemo(() => dotTile(dotColor, tile, density), [dotColor, tile, density]);
+  const toggle = () => {
+    if (shown && !rehide) return;
+    const next = !shown;
+    if (revealed === void 0) setInner(next);
+    setGone(false);
+    onReveal?.(next);
+  };
+  const interactive = !shown || rehide;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `bl-spoiler ${className}`,
+      "data-revealed": shown || void 0,
+      "data-gone": shown && gone || void 0,
+      role: interactive ? "button" : void 0,
+      tabIndex: interactive ? 0 : void 0,
+      "aria-label": shown ? void 0 : `${label}, hidden. Press to reveal.`,
+      "aria-pressed": rehide ? shown : void 0,
+      onClick: toggle,
+      onKeyDown: (event) => {
+        if (interactive && (event.key === "Enter" || event.key === " ")) {
+          event.preventDefault();
+          toggle();
+        }
+      },
+      onAnimationEnd: (event) => {
+        if (event.animationName === "bl-spoiler-scatter") setGone(true);
+      },
+      style: { "--bl-dots": dots, "--bl-tile": `${tile}px`, "--bl-cover": coverColor, "--bl-accent": accentColor, ...style },
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": shown ? void 0 : true, children })
+    }
+  );
+}
+export {
+  Spoiler as default
+};

package/dist/SpotlightTour.d.ts

@@ -0,0 +1,38 @@
+import { type ReactNode, type RefObject } from 'react';
+export type TourSide = 'top' | 'bottom' | 'left' | 'right';
+export interface TourStep {
+    /** A CSS selector or a ref; without one the bubble centres on screen. */
+    target?: string | RefObject<Element | null>;
+    title: ReactNode;
+    body?: ReactNode;
+    /** Preferred side for the bubble. */
+    side?: TourSide;
+}
+export interface SpotlightTourProps {
+    steps?: TourStep[];
+    open?: boolean;
+    /** Whether the user finished (true) or skipped (false). */
+    onClose?: (completed: boolean) => void;
+    onStepChange?: (index: number) => void;
+    startAt?: number;
+    /** Space around the target inside the spotlight. */
+    padding?: number;
+    radius?: number;
+    /** Distance between spotlight and bubble. */
+    gap?: number;
+    width?: number;
+    closeOnBackdrop?: boolean;
+    backLabel?: string;
+    nextLabel?: string;
+    doneLabel?: string;
+    skipLabel?: string;
+    dimColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    onAccentColor?: string;
+    fontFamily?: string;
+}
+export default function SpotlightTour({ steps, open, onClose, onStepChange, startAt, padding, radius, gap, width, closeOnBackdrop, backLabel, nextLabel, doneLabel, skipLabel, dimColor, backgroundColor, textColor, mutedColor, lineColor, accentColor, onAccentColor, fontFamily }: SpotlightTourProps): import("react").ReactPortal | null;