bits-lab 0.0.0-stage → 0.1.0

package/dist/LevelMap.js

@@ -0,0 +1,189 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useMemo, useRef, useState } from "react";
+const STYLE_ID = "bl-level-map";
+const CSS = `
+.bl-lvl { position: relative; width: 100%; font-family: var(--bl-font, "Press Start 2P", ui-monospace, monospace); }
+.bl-lvl__svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
+.bl-lvl__reveal { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bl-lvl-draw var(--bl-draw) steps(24) 200ms forwards; }
+.bl-lvl__node { position: absolute; display: grid; place-items: center; width: var(--bl-node); height: var(--bl-node); margin: calc(var(--bl-node) / -2) 0 0 calc(var(--bl-node) / -2); padding: 0; border: 0; cursor: pointer;
+  background: var(--bl-face); color: #0b0b14; font-size: calc(var(--bl-node) / 4);
+  box-shadow: 0 -4px 0 0 #0b0b14, 0 4px 0 0 #0b0b14, -4px 0 0 0 #0b0b14, 4px 0 0 0 #0b0b14, inset -4px -4px 0 0 rgba(0,0,0,0.25), inset 4px 4px 0 0 rgba(255,255,255,0.3); }
+.bl-lvl__node:hover:not([aria-disabled="true"]) { filter: brightness(1.12); transform: translateY(-2px); }
+.bl-lvl__node:focus-visible { outline: 4px solid #f4f4f4; outline-offset: 6px; }
+.bl-lvl__node[aria-disabled="true"] { cursor: not-allowed; filter: grayscale(1) brightness(0.6); }
+.bl-lvl__node[data-status="current"] { animation: bl-lvl-pulse 1s steps(2) infinite; }
+.bl-lvl__marker { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); animation: bl-lvl-bounce 0.7s steps(3) infinite alternate; pointer-events: none; }
+.bl-lvl__name { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 140px; color: var(--bl-text); font-size: 8px; line-height: 1.5; text-align: center; text-transform: uppercase; pointer-events: none; }
+.bl-lvl__stars { display: block; margin-top: 4px; color: #ffcd75; letter-spacing: 2px; }
+@keyframes bl-lvl-draw { to { stroke-dashoffset: 0; } }
+@keyframes bl-lvl-pulse { 50% { box-shadow: 0 -4px 0 0 #f4f4f4, 0 4px 0 0 #f4f4f4, -4px 0 0 0 #f4f4f4, 4px 0 0 0 #f4f4f4, inset -4px -4px 0 0 rgba(0,0,0,0.25), inset 4px 4px 0 0 rgba(255,255,255,0.3); } }
+@keyframes bl-lvl-bounce { to { transform: translate(-50%, -8px); } }
+@media (prefers-reduced-motion: reduce) {
+  .bl-lvl__reveal { animation: none; stroke-dashoffset: 0; }
+  .bl-lvl__node[data-status="current"], .bl-lvl__marker { 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 Lock = () => /* @__PURE__ */ jsxs("svg", { width: "45%", height: "45%", viewBox: "0 0 8 8", shapeRendering: "crispEdges", fill: "#0b0b14", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("rect", { x: "2", y: "0", width: "4", height: "1" }),
+  /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "1", height: "3" }),
+  /* @__PURE__ */ jsx("rect", { x: "6", y: "1", width: "1", height: "3" }),
+  /* @__PURE__ */ jsx("rect", { x: "0", y: "4", width: "8", height: "4" })
+] });
+const STATUS_COLORS = { cleared: "#38b764", current: "#ffcd75", available: "#41a6f6", locked: "#566c86" };
+function layout(count, width, { nodeSize, minSpacing, rowGap, padding }) {
+  const inner = Math.max(nodeSize, width - padding * 2 - nodeSize);
+  const perRow = Math.max(2, Math.floor(inner / minSpacing) + 1);
+  const spacing = inner / (perRow - 1);
+  const points = Array.from({ length: count }, (_, i) => {
+    const row = Math.floor(i / perRow);
+    const col = i % perRow;
+    const x = padding + nodeSize / 2 + (row % 2 ? perRow - 1 - col : col) * spacing;
+    const y = padding + nodeSize / 2 + 40 + row * rowGap + Math.sin(col * 1.3 + row) * rowGap * 0.12;
+    return { x, y, row };
+  });
+  const rows = Math.ceil(count / perRow);
+  return { points, height: padding * 2 + nodeSize + 40 + (rows - 1) * rowGap + 70 };
+}
+function pathThrough(points) {
+  if (!points.length) return "";
+  let d = `M${points[0].x} ${points[0].y}`;
+  for (let i = 1; i < points.length; i++) {
+    const a = points[i - 1];
+    const b = points[i];
+    if (a.row === b.row) {
+      d += ` Q${(a.x + b.x) / 2} ${(a.y + b.y) / 2 - 18} ${b.x} ${b.y}`;
+    } else {
+      const bulge = a.x > b.x || a.row % 2 === 0 ? 80 : -80;
+      d += ` C${a.x + bulge} ${a.y} ${b.x + bulge} ${b.y} ${b.x} ${b.y}`;
+    }
+  }
+  return d;
+}
+const DEFAULT_LEVELS = [
+  { id: 1, name: "Spawn point", status: "cleared", stars: 3 },
+  { id: 2, name: "Oak woods", status: "cleared", stars: 2 },
+  { id: 3, name: "Copper cave", status: "cleared", stars: 3 },
+  { id: 4, name: "Sunken temple", status: "current" },
+  { id: 5, name: "Lava bridge", status: "available" },
+  { id: 6, name: "Sky isles", status: "locked" },
+  { id: 7, name: "Crystal depths", status: "locked" },
+  { id: 8, name: "The dragon", status: "locked" }
+];
+function LevelMap({
+  levels = DEFAULT_LEVELS,
+  nodeSize = 56,
+  minSpacing = 130,
+  rowGap = 150,
+  padding = 24,
+  pathColor = "#566c86",
+  clearedColor = "#a7f070",
+  textColor = "#f4f4f4",
+  marker,
+  drawDuration = 1200,
+  fontFamily,
+  onSelect,
+  className = "",
+  style
+}) {
+  useStyles();
+  const maskId = `bl-lvl-mask-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const rootRef = useRef(null);
+  const nodeRefs = useRef([]);
+  const [width, setWidth] = useState(640);
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return void 0;
+    const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, []);
+  const { points, height } = useMemo(
+    () => layout(levels.length, width, { nodeSize, minSpacing, rowGap, padding }),
+    [levels.length, width, nodeSize, minSpacing, rowGap, padding]
+  );
+  const fullPath = useMemo(() => pathThrough(points), [points]);
+  const progressIndex = Math.max(0, levels.findIndex((level) => level.status === "current"), levels.filter((level) => level.status === "cleared").length - 1);
+  const clearedPath = useMemo(() => pathThrough(points.slice(0, progressIndex + 1)), [points, progressIndex]);
+  const focusNode = (index) => nodeRefs.current[Math.max(0, Math.min(levels.length - 1, index))]?.focus();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: `bl-lvl ${className}`,
+      role: "list",
+      "aria-label": "Level map",
+      style: { height, "--bl-node": `${nodeSize}px`, "--bl-text": textColor, "--bl-draw": `${drawDuration}ms`, ...fontFamily ? { "--bl-font": fontFamily } : null, ...style },
+      children: [
+        /* @__PURE__ */ jsxs("svg", { className: "bl-lvl__svg", width: "100%", height, "aria-hidden": "true", shapeRendering: "crispEdges", children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("mask", { id: maskId, maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { className: "bl-lvl__reveal", d: clearedPath, pathLength: "1", fill: "none", stroke: "#fff", strokeWidth: "24" }, progressIndex) }) }),
+          /* @__PURE__ */ jsx("path", { d: fullPath, fill: "none", stroke: pathColor, strokeWidth: "6", strokeDasharray: "6 12", strokeLinecap: "square" }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: clearedPath,
+              fill: "none",
+              stroke: clearedColor,
+              strokeWidth: "8",
+              strokeDasharray: "8 10",
+              strokeLinecap: "square",
+              mask: `url(#${maskId})`
+            }
+          )
+        ] }),
+        levels.map((level, index) => {
+          const point = points[index];
+          const locked = level.status === "locked";
+          return /* @__PURE__ */ jsx("div", { role: "listitem", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: (el) => {
+                nodeRefs.current[index] = el;
+              },
+              type: "button",
+              className: "bl-lvl__node",
+              "data-status": level.status,
+              "aria-disabled": locked || void 0,
+              "aria-current": level.status === "current" ? "step" : void 0,
+              "aria-label": `Level ${index + 1}${level.name ? `: ${level.name}` : ""}, ${level.status}${level.stars ? `, ${level.stars} of 3 stars` : ""}`,
+              style: { left: point.x, top: point.y, "--bl-face": STATUS_COLORS[level.status] ?? STATUS_COLORS.available },
+              onClick: () => !locked && onSelect?.(level, index),
+              onKeyDown: (event) => {
+                if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+                  event.preventDefault();
+                  focusNode(index + 1);
+                }
+                if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+                  event.preventDefault();
+                  focusNode(index - 1);
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: locked ? /* @__PURE__ */ jsx(Lock, {}) : level.status === "cleared" ? "\u2713" : level.label ?? index + 1 }),
+                level.status === "current" && /* @__PURE__ */ jsx("span", { className: "bl-lvl__marker", "aria-hidden": "true", children: marker ?? /* @__PURE__ */ jsx("span", { style: { fontSize: 22, color: "#ffcd75" }, children: "\u25BC" }) }),
+                level.name && /* @__PURE__ */ jsxs("span", { className: "bl-lvl__name", "aria-hidden": "true", children: [
+                  level.name,
+                  level.stars ? /* @__PURE__ */ jsxs("span", { className: "bl-lvl__stars", children: [
+                    "\u2605".repeat(level.stars),
+                    "\u2606".repeat(3 - level.stars)
+                  ] }) : null
+                ] })
+              ]
+            }
+          ) }, level.id ?? index);
+        })
+      ]
+    }
+  );
+}
+export {
+  LevelMap as default
+};

package/dist/LightShafts.d.ts

@@ -0,0 +1,22 @@
+import { type CSSProperties } from 'react';
+export interface LightShaftsProps {
+    /** Swaying rays from a source, flickering floor pillars, or forked lightning with a flash. */
+    mode?: 'rays' | 'beams' | 'lightning';
+    /** Rays or pillars. */
+    count?: number;
+    speed?: number;
+    /** Light source position as a share of the area. */
+    originX?: number;
+    originY?: number;
+    /** Fan angle of the rays in degrees. */
+    spread?: number;
+    /** Roughly how often lightning strikes, in ms. */
+    interval?: number;
+    pixelSize?: number;
+    /** [main, second]. */
+    colors?: string[];
+    backgroundColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function LightShafts({ mode, count, speed, originX, originY, spread, interval, pixelSize, colors, backgroundColor, className, style }: LightShaftsProps): import("react").JSX.Element;

package/dist/LightShafts.js

@@ -0,0 +1,170 @@
+'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];
+};
+const rgba = ([r, g, b], a) => `rgba(${r},${g},${b},${a})`;
+function bolt(x, y, length, angle, depth, out) {
+  const segs = 10;
+  let px = x;
+  let py = y;
+  for (let i = 0; i < segs; i++) {
+    const a = angle + (Math.random() - 0.5) * 0.9;
+    const nx = px + Math.cos(a) * (length / segs);
+    const ny = py + Math.sin(a) * (length / segs);
+    out.push([px, py, nx, ny, depth]);
+    if (depth < 2 && Math.random() < 0.18) bolt(nx, ny, length * 0.45, a + (Math.random() < 0.5 ? -0.6 : 0.6), depth + 1, out);
+    px = nx;
+    py = ny;
+  }
+  return out;
+}
+function LightShafts({
+  mode = "rays",
+  count = 7,
+  speed = 1,
+  originX = 0.5,
+  originY = -0.05,
+  spread = 70,
+  interval = 3500,
+  pixelSize = 3,
+  colors = ["#ffcd75", "#f4f4f4"],
+  backgroundColor = "#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 main = hexToRgb(colors[0]);
+    const second = hexToRgb(colors[1] ?? colors[0]);
+    const bg = hexToRgb(backgroundColor);
+    let w = 0;
+    let h = 0;
+    let t = 2;
+    let raf = 0;
+    let last = 0;
+    let visible = true;
+    let strike = null;
+    let nextStrike = 600;
+    const pillars = Array.from({ length: count }, (_, i) => ({ x: (i + 0.5) / count + Math.sin(i * 7.1) * 0.3 / count, width: 0.4 + i * 37 % 10 / 20, phase: i * 1.7 }));
+    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;
+      ctx.imageSmoothingEnabled = false;
+    };
+    const rays = () => {
+      const ox = originX * w;
+      const oy = originY * h;
+      const reach = Math.hypot(w, h) * 1.1;
+      for (let i = 0; i < count; i++) {
+        const base = (i / Math.max(1, count - 1) - 0.5) * (spread * Math.PI / 180);
+        const a = Math.PI / 2 + base + Math.sin(t * 0.4 + i * 1.3) * 0.08;
+        const half = 0.03 + 0.025 * (0.5 + 0.5 * Math.sin(t * 0.7 + i * 2.1));
+        const glow = ctx.createLinearGradient(ox, oy, ox + Math.cos(a) * reach, oy + Math.sin(a) * reach);
+        const tint = i % 2 ? second : main;
+        const strength = 0.16 + 0.1 * Math.sin(t * 1.1 + i);
+        glow.addColorStop(0, rgba(tint, strength * 1.8));
+        glow.addColorStop(0.6, rgba(tint, strength * 0.5));
+        glow.addColorStop(1, rgba(tint, 0));
+        ctx.fillStyle = glow;
+        ctx.beginPath();
+        ctx.moveTo(ox, oy);
+        ctx.lineTo(ox + Math.cos(a - half) * reach, oy + Math.sin(a - half) * reach);
+        ctx.lineTo(ox + Math.cos(a + half) * reach, oy + Math.sin(a + half) * reach);
+        ctx.closePath();
+        ctx.fill();
+      }
+    };
+    const beams = () => {
+      pillars.forEach((p, i) => {
+        const flicker = 0.55 + 0.25 * Math.sin(t * 3 + p.phase) + 0.2 * Math.sin(t * 7.3 + p.phase * 2);
+        const x = (p.x + Math.sin(t * 0.3 + p.phase) * 0.01) * w;
+        const bw = Math.max(1, w / count * p.width * 0.5);
+        const tint = i % 2 ? second : main;
+        const glow = ctx.createLinearGradient(0, h, 0, 0);
+        glow.addColorStop(0, rgba(tint, 0.55 * flicker));
+        glow.addColorStop(0.5, rgba(tint, 0.18 * flicker));
+        glow.addColorStop(1, rgba(tint, 0));
+        ctx.fillStyle = glow;
+        ctx.fillRect(Math.round(x - bw / 2), 0, Math.round(bw), h);
+        ctx.fillStyle = rgba(tint, 0.35 * flicker);
+        ctx.fillRect(Math.round(x), Math.round(h * 0.35), 1, h);
+      });
+    };
+    const lightning = (now) => {
+      if (!strike || now - strike.at > 700) return;
+      const age = (now - strike.at) / 700;
+      const flash = age < 0.08 || age > 0.16 && age < 0.22 ? 0.35 : 0;
+      if (flash) {
+        ctx.fillStyle = rgba(second, flash);
+        ctx.fillRect(0, 0, w, h);
+      }
+      ctx.fillStyle = rgba(main, 1 - age);
+      strike.segs.forEach(([x0, y0, x1, y1, depth]) => {
+        const steps = Math.max(1, Math.ceil(Math.hypot(x1 - x0, y1 - y0)));
+        for (let k = 0; k <= steps; k++) ctx.fillRect(Math.round(x0 + (x1 - x0) * k / steps), Math.round(y0 + (y1 - y0) * k / steps), depth ? 1 : 2, depth ? 1 : 2);
+      });
+    };
+    const draw = (now) => {
+      ctx.globalCompositeOperation = "source-over";
+      const [r, g, b] = bg;
+      ctx.fillStyle = `rgb(${r},${g},${b})`;
+      ctx.fillRect(0, 0, w, h);
+      ctx.globalCompositeOperation = "lighter";
+      if (mode === "beams") beams();
+      else if (mode === "lightning") lightning(now);
+      else rays();
+      ctx.globalCompositeOperation = "source-over";
+    };
+    const tick = (now) => {
+      const dt = Math.max(0, Math.min(0.05, (now - last) / 1e3));
+      last = now;
+      t += dt * speed;
+      if (mode === "lightning") {
+        nextStrike -= dt * 1e3;
+        if (nextStrike <= 0) {
+          strike = { at: now, segs: bolt(w * (0.2 + Math.random() * 0.6), 0, h * 0.95, Math.PI / 2, 0, []) };
+          nextStrike = interval * (0.6 + Math.random() * 0.8);
+        }
+      }
+      draw(now);
+      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();
+      draw(performance.now());
+    });
+    resize.observe(canvas);
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      start();
+    });
+    observer.observe(canvas);
+    document.addEventListener("visibilitychange", start);
+    fit();
+    draw(performance.now());
+    start();
+    return () => {
+      cancelAnimationFrame(raf);
+      resize.disconnect();
+      observer.disconnect();
+      document.removeEventListener("visibilitychange", start);
+    };
+  }, [mode, count, speed, originX, originY, spread, interval, pixelSize, colors.join(), backgroundColor]);
+  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, "aria-hidden": "true", className, style: { display: "block", width: "100%", height: "100%", background: backgroundColor, imageRendering: "pixelated", ...style } });
+}
+export {
+  LightShafts as default
+};

package/dist/LightboxGallery.d.ts

@@ -0,0 +1,26 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface GalleryImage {
+    src: string;
+    alt?: string;
+    caption?: ReactNode;
+    /** A smaller image for the grid. */
+    thumb?: string;
+}
+export interface LightboxGalleryProps {
+    images?: GalleryImage[];
+    /** Grid column width in px. */
+    thumbSize?: number;
+    gap?: number;
+    aspectRatio?: string;
+    radius?: number;
+    /** Applied to thumbs and the full image. */
+    imageStyle?: CSSProperties;
+    label?: string;
+    backdropColor?: string;
+    surfaceColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function LightboxGallery({ images, thumbSize, gap, aspectRatio, radius, imageStyle, label, backdropColor, surfaceColor, accentColor, fontFamily, className, style }: LightboxGalleryProps): import("react").JSX.Element;