bits-lab 0.0.0-stage → 0.1.2

package/dist/MegaMenu.js

@@ -0,0 +1,280 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-mega-menu";
+const CSS = `
+.bl-mega { position: relative; color: var(--bl-ink); font-family: var(--bl-font); }
+.bl-mega__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
+.bl-mega__trigger { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--bl-muted); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: color 150ms, background-color 150ms; }
+.bl-mega__trigger:hover, .bl-mega__trigger[aria-expanded="true"] { color: var(--bl-ink); background: var(--bl-hover); }
+.bl-mega__trigger:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+.bl-mega__trigger svg { transition: transform 220ms cubic-bezier(.3,1.4,.5,1); }
+.bl-mega__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
+.bl-mega__viewport { position: absolute; top: calc(100% + var(--bl-gap)); left: 0; z-index: 40; width: var(--bl-pw, 0px); height: var(--bl-ph, 0px); transform: translateX(var(--bl-px, 0px)); border-radius: var(--bl-radius); background: var(--bl-bg); box-shadow: 0 0 0 1px var(--bl-line), 0 30px 60px -30px rgba(0,0,0,0.85); overflow: hidden; transform-origin: top center; transition: width var(--bl-dur) var(--bl-ease), height var(--bl-dur) var(--bl-ease), transform var(--bl-dur) var(--bl-ease); animation: bl-mega-in 220ms cubic-bezier(.2,.9,.25,1); }
+.bl-mega__viewport[data-closing] { animation: bl-mega-out 160ms ease-in forwards; }
+.bl-mega__viewport[data-fresh] { transition: none; }
+.bl-mega__caret { position: absolute; top: calc(100% + var(--bl-gap) - 5px); left: 0; z-index: 41; width: 10px; height: 10px; background: var(--bl-bg); box-shadow: -1px -1px 0 0 var(--bl-line); transform: translateX(var(--bl-cx, 0px)) rotate(45deg); transition: transform var(--bl-dur) var(--bl-ease); pointer-events: none; }
+.bl-mega__viewport[data-fresh] ~ .bl-mega__caret { transition: none; }
+.bl-mega__caret[data-closing] { opacity: 0; transition: opacity 120ms; }
+.bl-mega__pane { position: absolute; top: 0; left: 0; width: max-content; max-width: var(--bl-max-w); padding: 18px; box-sizing: border-box; }
+.bl-mega__pane[data-state="in"] { animation: bl-mega-pane-in var(--bl-dur) var(--bl-ease) both; }
+.bl-mega__pane[data-state="out"] { animation: bl-mega-pane-out calc(var(--bl-dur) * 0.6) ease both; pointer-events: none; }
+.bl-mega[data-narrow] .bl-mega__pane { width: var(--bl-full); max-width: none; }
+@keyframes bl-mega-in { from { opacity: 0; transform: translateX(var(--bl-px, 0px)) translateY(-6px) scale(0.97); } }
+@keyframes bl-mega-out { to { opacity: 0; transform: translateX(var(--bl-px, 0px)) translateY(-6px) scale(0.97); } }
+@keyframes bl-mega-pane-in { from { opacity: 0; transform: translateX(calc(var(--bl-dir) * 36px)); } }
+@keyframes bl-mega-pane-out { to { opacity: 0; transform: translateX(calc(var(--bl-dir) * -36px)); } }
+@media (prefers-reduced-motion: reduce) {
+  .bl-mega__viewport, .bl-mega__caret { transition: none; }
+  .bl-mega__pane[data-state], .bl-mega__viewport { animation-name: bl-mega-fade; }
+  .bl-mega__viewport[data-closing] { animation-name: bl-mega-fade-out; }
+}
+@keyframes bl-mega-fade { from { opacity: 0; } }
+@keyframes bl-mega-fade-out { to { opacity: 0; } }
+`;
+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 Chevron = () => /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 3.5 5 6.5 8 3.5" }) });
+function MegaMenu({
+  items = [],
+  openDelay = 90,
+  closeDelay = 220,
+  gap = 10,
+  maxPanelWidth = 640,
+  duration = 320,
+  label = "Main",
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  hoverColor = "rgba(255,255,255,0.06)",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  radius = 14,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const rootRef = useRef(null);
+  const viewportRef = useRef(null);
+  const triggerRefs = useRef([]);
+  const paneRefs = useRef({});
+  const timer = useRef(0);
+  const [active, setActive] = useState(-1);
+  const [panes, setPanes] = useState([]);
+  const [closing, setClosing] = useState(false);
+  const [fresh, setFresh] = useState(true);
+  const openAt = (index) => {
+    clearTimeout(timer.current);
+    if (index === active && !closing) return;
+    const from = closing ? -1 : active;
+    setClosing(false);
+    setFresh(from < 0);
+    setActive(index);
+    const dir = from < 0 ? 0 : index > from ? 1 : -1;
+    setPanes((list) => [...list.filter((p) => p.index !== index && p.index === from).map((p) => ({ ...p, state: "out", dir })), { index, state: "in", dir, key: `${index}-${Date.now()}` }]);
+  };
+  const close = (refocus = false) => {
+    clearTimeout(timer.current);
+    if (active < 0) return;
+    if (refocus) triggerRefs.current[active]?.focus();
+    setClosing(true);
+  };
+  const scheduleOpen = (index) => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => openAt(index), active >= 0 && !closing ? 0 : openDelay);
+  };
+  const scheduleClose = () => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => close(), closeDelay);
+  };
+  useLayoutEffect(() => {
+    if (active < 0) return void 0;
+    const place = () => {
+      const root = rootRef.current;
+      const pane = paneRefs.current[panes[panes.length - 1]?.key];
+      const trigger = triggerRefs.current[active];
+      if (!root || !pane || !trigger) return;
+      const rootBox = root.getBoundingClientRect();
+      const vw = document.documentElement.clientWidth;
+      const narrow = vw < 640;
+      root.toggleAttribute("data-narrow", narrow);
+      root.style.setProperty("--bl-full", `${vw - 16}px`);
+      const w = narrow ? vw - 16 : Math.min(pane.offsetWidth, vw - 16);
+      const h = pane.offsetHeight;
+      const t = trigger.getBoundingClientRect();
+      const center = t.left + t.width / 2 - rootBox.left;
+      const x = Math.max(8, Math.min(vw - 8 - w, rootBox.left + center - w / 2)) - rootBox.left;
+      root.style.setProperty("--bl-pw", `${w}px`);
+      root.style.setProperty("--bl-ph", `${h}px`);
+      root.style.setProperty("--bl-px", `${x}px`);
+      root.style.setProperty("--bl-cx", `${center - 5}px`);
+    };
+    place();
+    const resize = new ResizeObserver(place);
+    Object.values(paneRefs.current).forEach((node) => node && resize.observe(node));
+    resize.observe(rootRef.current);
+    window.addEventListener("resize", place);
+    const frame = requestAnimationFrame(() => setFresh(false));
+    return () => {
+      resize.disconnect();
+      window.removeEventListener("resize", place);
+      cancelAnimationFrame(frame);
+    };
+  }, [active, panes]);
+  const onPaneEnd = (key) => setPanes((list) => list.filter((p) => p.key !== key || p.state !== "out"));
+  const onViewportEnd = (event) => {
+    if (event.target !== event.currentTarget || !closing) return;
+    setActive(-1);
+    setPanes([]);
+    setClosing(false);
+    setFresh(true);
+  };
+  useEffect(() => {
+    if (active < 0) return void 0;
+    const onKey = (event) => {
+      if (event.key === "Escape") close(true);
+    };
+    const onDown = (event) => {
+      if (!rootRef.current?.contains(event.target)) close();
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onDown);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onDown);
+    };
+  }, [active, closing]);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  const focusPending = useRef(false);
+  const focusPanel = () => {
+    focusPending.current = true;
+  };
+  useEffect(() => {
+    if (!focusPending.current) return;
+    const target = viewportRef.current?.querySelector('[data-state="in"] a, [data-state="in"] button');
+    if (target) {
+      focusPending.current = false;
+      target.focus();
+    }
+  }, [panes]);
+  const onTriggerKey = (event, index) => {
+    const triggers = items.map((_, i) => i).filter((i) => items[i].content);
+    if (event.key === "ArrowDown" && items[index].content) {
+      event.preventDefault();
+      openAt(index);
+      focusPanel();
+    } else if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      const all = triggerRefs.current.filter(Boolean);
+      const at = all.indexOf(event.currentTarget);
+      const next = all[(at + (event.key === "ArrowRight" ? 1 : -1) + all.length) % all.length];
+      next?.focus();
+      const nextIndex = triggerRefs.current.indexOf(next);
+      if (active >= 0 && !closing && triggers.includes(nextIndex)) openAt(nextIndex);
+    }
+  };
+  const showing = active >= 0;
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ref: rootRef,
+      className: `bl-mega ${className}`,
+      "aria-label": label,
+      onPointerLeave: (event) => event.pointerType === "mouse" && scheduleClose(),
+      style: {
+        "--bl-gap": `${gap}px`,
+        "--bl-max-w": `${maxPanelWidth}px`,
+        "--bl-dur": `${duration}ms`,
+        "--bl-ease": "cubic-bezier(.3,1.15,.5,1)",
+        "--bl-bg": backgroundColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-hover": hoverColor,
+        "--bl-line": lineColor,
+        "--bl-accent": accentColor,
+        "--bl-radius": `${radius}px`,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx("ul", { className: "bl-mega__bar", children: items.map((item, i) => /* @__PURE__ */ jsx("li", { children: item.content ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: (node) => {
+              triggerRefs.current[i] = node;
+            },
+            type: "button",
+            className: "bl-mega__trigger",
+            "aria-expanded": showing && !closing && active === i,
+            "aria-controls": `${uid}-panel`,
+            onPointerEnter: (event) => event.pointerType === "mouse" && scheduleOpen(i),
+            onClick: () => showing && !closing && active === i ? close() : openAt(i),
+            onKeyDown: (event) => onTriggerKey(event, i),
+            children: [
+              item.label,
+              /* @__PURE__ */ jsx(Chevron, {})
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(
+          "a",
+          {
+            ref: (node) => {
+              triggerRefs.current[i] = node;
+            },
+            href: item.href,
+            className: "bl-mega__trigger",
+            onPointerEnter: (event) => event.pointerType === "mouse" && showing && scheduleClose(),
+            onKeyDown: (event) => onTriggerKey(event, i),
+            children: item.label
+          }
+        ) }, item.label)) }),
+        showing && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: viewportRef,
+              id: `${uid}-panel`,
+              className: "bl-mega__viewport",
+              "data-closing": closing || void 0,
+              "data-fresh": fresh || void 0,
+              onPointerEnter: () => clearTimeout(timer.current),
+              onAnimationEnd: onViewportEnd,
+              onKeyDown: (event) => {
+                if (event.key === "Escape") close(true);
+              },
+              children: panes.map((pane) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: (node) => {
+                    if (node) paneRefs.current[pane.key] = node;
+                    else delete paneRefs.current[pane.key];
+                  },
+                  className: "bl-mega__pane",
+                  "data-state": pane.state,
+                  style: { "--bl-dir": pane.dir },
+                  "aria-hidden": pane.state === "out" || void 0,
+                  inert: pane.state === "out" || void 0,
+                  onAnimationEnd: (event) => event.target === event.currentTarget && pane.state === "out" && onPaneEnd(pane.key),
+                  children: items[pane.index]?.content
+                },
+                pane.key
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "bl-mega__caret", "aria-hidden": "true", "data-closing": closing || void 0 })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  MegaMenu as default
+};

package/dist/MeteorShower.d.ts

@@ -0,0 +1,24 @@
+import { type CSSProperties } from 'react';
+export interface MeteorShowerProps {
+    /** Average meteors per second. */
+    rate?: number;
+    /** Shared heading in degrees: 0 is right, 90 is down. */
+    angle?: number;
+    /** Speed range in px per second. */
+    minSpeed?: number;
+    maxSpeed?: number;
+    /** Tail length in px (varies ±40%). */
+    tail?: number;
+    thickness?: number;
+    /** Snap to blocks of this size; 0 draws smooth streaks. */
+    pixelSize?: number;
+    /** Number of background stars. */
+    stars?: number;
+    headColor?: string;
+    tailColor?: string;
+    starColor?: string;
+    backgroundColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function MeteorShower({ rate, angle, minSpeed, maxSpeed, tail, thickness, pixelSize, stars, headColor, tailColor, starColor, backgroundColor, className, style }: MeteorShowerProps): import("react").JSX.Element;

package/dist/MeteorShower.js

@@ -0,0 +1,155 @@
+'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 MeteorShower({
+  rate = 2.5,
+  angle = 135,
+  minSpeed = 500,
+  maxSpeed = 1e3,
+  tail = 180,
+  thickness = 2,
+  pixelSize = 4,
+  stars = 90,
+  headColor = "#f4f4f4",
+  tailColor = "#73eff7",
+  starColor = "#94b0c2",
+  backgroundColor = "transparent",
+  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;
+    const heading = angle * Math.PI / 180;
+    const dir = [Math.cos(heading), Math.sin(heading)];
+    let width = 0;
+    let height = 0;
+    let dpr = 1;
+    let field = [];
+    let meteors = [];
+    let frame = 0;
+    let visible = true;
+    let last = performance.now();
+    let spawnDebt = 0;
+    let time = 0;
+    const snap = (v) => pixelSize ? Math.round(v / pixelSize) * pixelSize : v;
+    const spawn = (progress = 0) => {
+      const diag = Math.hypot(width, height);
+      const px = Math.random() * width;
+      const py = Math.random() * height;
+      const back = diag / 2 + tail;
+      const travel = (back + diag / 2 + tail) * 1.1;
+      meteors.push({ x: px - dir[0] * back, y: py - dir[1] * back, speed: minSpeed + Math.random() * (maxSpeed - minSpeed), d: travel * progress, travel, len: tail * (0.6 + Math.random() * 0.6) });
+    };
+    const layout = () => {
+      dpr = Math.min(2, window.devicePixelRatio || 1);
+      width = wrap.clientWidth;
+      height = wrap.clientHeight;
+      canvas.width = Math.round(width * dpr);
+      canvas.height = Math.round(height * dpr);
+      field = Array.from({ length: stars }, () => ({ x: Math.random() * width, y: Math.random() * height, size: Math.random() < 0.15 ? 2 : 1, phase: Math.random() * Math.PI * 2, speed: 0.6 + Math.random() * 1.8 }));
+      meteors = [];
+      if (reduced) for (let i = 0; i < 3; i++) spawn(0.35 + i * 0.12);
+      draw();
+    };
+    const square = (x, y, s, color) => {
+      ctx.fillStyle = color;
+      ctx.fillRect(snap(x) - s / 2, snap(y) - s / 2, s, s);
+    };
+    const draw = () => {
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, width, height);
+      if (backgroundColor !== "transparent") {
+        ctx.fillStyle = backgroundColor;
+        ctx.fillRect(0, 0, width, height);
+      }
+      field.forEach((s) => {
+        const a = reduced ? 0.6 : 0.35 + 0.65 * (0.5 + 0.5 * Math.sin(s.phase + time * s.speed));
+        const size = pixelSize ? Math.max(pixelSize / 2, s.size * (pixelSize / 2)) : s.size;
+        square(s.x, s.y, size, rgba(starColor, a));
+      });
+      meteors.forEach((m) => {
+        const hx = m.x + dir[0] * m.d;
+        const hy = m.y + dir[1] * m.d;
+        if (pixelSize) {
+          const step = pixelSize;
+          for (let t = m.len; t >= 0; t -= step) {
+            const k = 1 - t / m.len;
+            const size = Math.max(pixelSize / 2, Math.round(thickness * k + 1) * (pixelSize / 2));
+            square(hx - dir[0] * t, hy - dir[1] * t, size, rgba(tailColor, k * k * 0.9));
+          }
+          square(hx, hy, pixelSize * Math.max(1, Math.round(thickness / 2 + 0.5)), headColor);
+        } else {
+          const g = ctx.createLinearGradient(hx, hy, hx - dir[0] * m.len, hy - dir[1] * m.len);
+          g.addColorStop(0, rgba(tailColor, 0.9));
+          g.addColorStop(1, rgba(tailColor, 0));
+          ctx.strokeStyle = g;
+          ctx.lineWidth = thickness;
+          ctx.lineCap = "round";
+          ctx.beginPath();
+          ctx.moveTo(hx, hy);
+          ctx.lineTo(hx - dir[0] * m.len, hy - dir[1] * m.len);
+          ctx.stroke();
+          ctx.fillStyle = rgba(headColor, 0.25);
+          ctx.beginPath();
+          ctx.arc(hx, hy, thickness * 2.5, 0, Math.PI * 2);
+          ctx.fill();
+          ctx.fillStyle = headColor;
+          ctx.beginPath();
+          ctx.arc(hx, hy, thickness * 0.9, 0, Math.PI * 2);
+          ctx.fill();
+        }
+      });
+    };
+    const tick = (now) => {
+      frame = 0;
+      const dt = Math.min(0.1, (now - last) / 1e3);
+      last = now;
+      time += dt;
+      spawnDebt += dt * rate * (0.5 + Math.random());
+      while (spawnDebt >= 1) {
+        spawn();
+        spawnDebt -= 1;
+      }
+      meteors.forEach((m) => {
+        m.d += m.speed * dt;
+      });
+      meteors = meteors.filter((m) => m.d < m.travel);
+      draw();
+      if (visible) frame = requestAnimationFrame(tick);
+    };
+    const start = () => {
+      if (reduced || frame || !visible) 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);
+    layout();
+    start();
+    return () => {
+      cancelAnimationFrame(frame);
+      resize.disconnect();
+      io.disconnect();
+    };
+  }, [rate, angle, minSpeed, maxSpeed, tail, thickness, pixelSize, stars, headColor, tailColor, starColor, backgroundColor]);
+  return /* @__PURE__ */ jsx("div", { ref: wrapRef, className, "aria-hidden": "true", style: { position: "relative", width: "100%", height: "100%", overflow: "hidden", ...style }, children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, style: { position: "absolute", inset: 0, width: "100%", height: "100%" } }) });
+}
+export {
+  MeteorShower as default
+};

package/dist/Minimap.d.ts

@@ -0,0 +1,21 @@
+import { type CSSProperties, type RefObject } from 'react';
+export type BlockKind = 'heading' | 'text' | 'media' | 'code' | 'control';
+export interface MinimapProps {
+    /** Scroll container to map; omit to map the whole window. */
+    target?: RefObject<HTMLElement | null>;
+    /** Which elements become blocks. */
+    selector?: string;
+    width?: number;
+    /** Max height; longer content scrolls inside the map. */
+    height?: number;
+    /** Size of one map pixel in screen px. */
+    pixelSize?: number;
+    colors?: Partial<Record<BlockKind, string>>;
+    backgroundColor?: string;
+    edgeColor?: string;
+    viewportColor?: string;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function Minimap({ target, selector, width, height, pixelSize, colors, backgroundColor, edgeColor, viewportColor, label, className, style }: MinimapProps): import("react").JSX.Element;