bits-lab 0.0.0-stage → 0.1.2

package/dist/CipherCard.js

@@ -0,0 +1,91 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-cipher-card";
+const CSS = `
+.bl-cipher { position: relative; display: grid; place-items: center; width: var(--bl-w); max-width: 100%; aspect-ratio: var(--bl-ratio); overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-bg); box-shadow: 0 0 0 1px var(--bl-line); color: var(--bl-ink); font-family: var(--bl-font); }
+.bl-cipher__glow { position: absolute; inset: 0; background: var(--bl-gradient); opacity: 0; transition: opacity 300ms; -webkit-mask-image: radial-gradient(var(--bl-r) circle at var(--bl-mx, 50%) var(--bl-my, 50%), #000 0%, transparent 100%); mask-image: radial-gradient(var(--bl-r) circle at var(--bl-mx, 50%) var(--bl-my, 50%), #000 0%, transparent 100%); }
+.bl-cipher__chars { position: absolute; inset: 0; margin: 0; padding: 6px; overflow: hidden; color: var(--bl-char); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.2; word-break: break-all; white-space: normal; opacity: 0; transition: opacity 300ms; -webkit-mask-image: radial-gradient(var(--bl-r) circle at var(--bl-mx, 50%) var(--bl-my, 50%), #000 10%, transparent 100%); mask-image: radial-gradient(var(--bl-r) circle at var(--bl-mx, 50%) var(--bl-my, 50%), #000 10%, transparent 100%); user-select: none; }
+.bl-cipher[data-active] .bl-cipher__glow { opacity: 0.55; }
+.bl-cipher[data-active] .bl-cipher__chars { opacity: 1; }
+.bl-cipher__badge { position: relative; z-index: 1; display: grid; place-items: center; min-width: 40%; aspect-ratio: 1; padding: 14px; box-sizing: border-box; border-radius: 50%; background: color-mix(in srgb, var(--bl-bg) 82%, transparent); box-shadow: 0 0 0 1px var(--bl-line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-align: center; }
+`;
+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 CHARSET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789#$%&*+<>/=?@";
+const scramble = (length, charset) => Array.from({ length }, () => charset[Math.floor(Math.random() * charset.length)]).join("");
+function CipherCard({
+  children,
+  charset = CHARSET,
+  density = 1800,
+  spotlight = 160,
+  width = 320,
+  aspectRatio = "1",
+  radius = 18,
+  gradient = "linear-gradient(135deg, #41a6f6, #73eff7 45%, #a7f070)",
+  backgroundColor = "#0b0b14",
+  textColor = "#f4f4f4",
+  charColor = "#f4f4f4",
+  lineColor = "#333c57",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const ref = useRef(null);
+  const [chars, setChars] = useState(() => scramble(density, charset));
+  const [active, setActive] = useState(false);
+  const last = useRef(0);
+  useEffect(() => setChars(scramble(density, charset)), [density, charset]);
+  const onMove = (event) => {
+    const node = ref.current;
+    const rect = node.getBoundingClientRect();
+    node.style.setProperty("--bl-mx", `${event.clientX - rect.left}px`);
+    node.style.setProperty("--bl-my", `${event.clientY - rect.top}px`);
+    const now = performance.now();
+    if (now - last.current > 33 && !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+      last.current = now;
+      setChars(scramble(density, charset));
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: `bl-cipher ${className}`,
+      "data-active": active || void 0,
+      onPointerMove: onMove,
+      onPointerEnter: () => setActive(true),
+      onPointerLeave: () => setActive(false),
+      onFocus: () => setActive(true),
+      onBlur: () => setActive(false),
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-ratio": aspectRatio,
+        "--bl-radius": `${radius}px`,
+        "--bl-r": `${spotlight}px`,
+        "--bl-gradient": gradient,
+        "--bl-bg": backgroundColor,
+        "--bl-ink": textColor,
+        "--bl-char": charColor,
+        "--bl-line": lineColor,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "bl-cipher__glow", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("p", { className: "bl-cipher__chars", "aria-hidden": "true", children: chars }),
+        /* @__PURE__ */ jsx("div", { className: "bl-cipher__badge", children })
+      ]
+    }
+  );
+}
+export {
+  CipherCard as default
+};

package/dist/CloudSky.d.ts

@@ -0,0 +1,28 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface CloudSkyProps {
+    /** Ray steps, noise detail and render resolution. */
+    quality?: 'low' | 'medium' | 'high';
+    /** One sample per N px, scaled up crisply; 0 for smooth. Overrides the quality resolution. */
+    pixelSize?: number;
+    /** Drift speed. */
+    speed?: number;
+    /** How much of the sky is cloud (0–1). */
+    coverage?: number;
+    /** Light direction in degrees, left (-) to right (+). */
+    sunAngle?: number;
+    sunHeight?: number;
+    /** Sky gradient; also the fallback without WebGL. */
+    topColor?: string;
+    bottomColor?: string;
+    /** Lit cloud tops. */
+    cloudColor?: string;
+    /** Shaded cloud bellies. */
+    shadeColor?: string;
+    /** Fills its parent by default. */
+    height?: number | string;
+    /** Content on top of the sky. */
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function CloudSky({ quality, pixelSize, speed, coverage, sunAngle, sunHeight, topColor, bottomColor, cloudColor, shadeColor, height, children, className, style }: CloudSkyProps): import("react").JSX.Element;

package/dist/CloudSky.js

@@ -0,0 +1,222 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+const QUALITY = {
+  low: { steps: 14, scale: 0.35, octaves: 3 },
+  medium: { steps: 22, scale: 0.5, octaves: 4 },
+  high: { steps: 36, scale: 0.8, octaves: 5 }
+};
+const VERTEX = "attribute vec2 p; void main() { gl_Position = vec4(p, 0.0, 1.0); }";
+const fragment = (octaves, steps) => `
+#ifdef GL_FRAGMENT_PRECISION_HIGH
+precision highp float;
+#else
+precision mediump float;
+#endif
+uniform vec2 uRes;
+uniform float uTime;
+uniform float uCover;
+uniform vec3 uTop;
+uniform vec3 uBottom;
+uniform vec3 uCloud;
+uniform vec3 uShade;
+uniform vec3 uSun;
+
+float hash(vec3 p) {
+  p = fract(p * 0.3183099 + 0.1);
+  p *= 17.0;
+  return fract(p.x * p.y * p.z * (p.x + p.y + p.z));
+}
+float noise(vec3 x) {
+  vec3 i = floor(x);
+  vec3 f = fract(x);
+  f = f * f * (3.0 - 2.0 * f);
+  return mix(mix(mix(hash(i), hash(i + vec3(1, 0, 0)), f.x), mix(hash(i + vec3(0, 1, 0)), hash(i + vec3(1, 1, 0)), f.x), f.y),
+             mix(mix(hash(i + vec3(0, 0, 1)), hash(i + vec3(1, 0, 1)), f.x), mix(hash(i + vec3(0, 1, 1)), hash(i + vec3(1, 1, 1)), f.x), f.y), f.z);
+}
+float fbm(vec3 p) {
+  float a = 0.5;
+  float s = 0.0;
+  for (int i = 0; i < ${octaves}; i++) {
+    s += a * noise(p);
+    p = p * 2.03 + vec3(1.7, 9.2, 3.1);
+    a *= 0.5;
+  }
+  return s;
+}
+// Cloud layer between heights 0 and 1.4, drifting with time.
+float density(vec3 p) {
+  vec3 q = p * 0.85 + vec3(uTime, 0.0, uTime * 0.4);
+  float layer = smoothstep(0.0, 0.35, p.y) * smoothstep(1.4, 0.75, p.y);
+  return clamp((fbm(q) - (1.0 - uCover)) * 4.0, 0.0, 1.0) * layer;
+}
+
+void main() {
+  vec2 uv = (gl_FragCoord.xy - 0.5 * uRes) / uRes.y;
+  vec3 rd = normalize(vec3(uv.x, uv.y + 0.32, 1.0));
+  vec3 ro = vec3(0.0, -0.7, 0.0);
+  vec3 sky = mix(uBottom, uTop, smoothstep(-0.05, 0.75, rd.y));
+  sky += pow(max(dot(rd, uSun), 0.0), 14.0) * 0.35 * uCloud;
+  if (rd.y < 0.02) {
+    gl_FragColor = vec4(sky, 1.0);
+    return;
+  }
+  float t0 = (0.0 - ro.y) / rd.y;
+  float t1 = min((1.4 - ro.y) / rd.y, t0 + 9.0);
+  float dt = (t1 - t0) / float(${steps});
+  float dither = fract(sin(dot(gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453);
+  float T = 1.0;
+  vec3 col = vec3(0.0);
+  for (int i = 0; i < ${steps}; i++) {
+    vec3 p = ro + rd * (t0 + (float(i) + dither) * dt);
+    float d = density(p);
+    if (d > 0.01) {
+      // One sample toward the sun: more cloud in the way means a darker sample.
+      float occ = density(p + uSun * 0.35);
+      vec3 lit = mix(uShade, uCloud, exp(-occ * 2.4));
+      lit = mix(lit * 0.82, lit, smoothstep(0.1, 1.1, p.y));
+      float a = 1.0 - exp(-d * dt * 3.0);
+      col += T * a * lit;
+      T *= 1.0 - a;
+      if (T < 0.03) break;
+    }
+  }
+  vec3 color = sky * T + col;
+  // Melt distant clouds into the horizon haze.
+  color = mix(sky, color, smoothstep(0.02, 0.2, rd.y));
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+const rgb = (hex) => {
+  const n = parseInt(hex.replace("#", "").replace(/^(.)(.)(.)$/, "$1$1$2$2$3$3"), 16);
+  return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255];
+};
+function CloudSky({
+  quality = "medium",
+  pixelSize = 0,
+  speed = 0.06,
+  coverage = 0.55,
+  sunAngle = 30,
+  sunHeight = 0.35,
+  topColor = "#29366f",
+  bottomColor = "#ef7d57",
+  cloudColor = "#f4f4f4",
+  shadeColor = "#5d275d",
+  height = "100%",
+  children,
+  className = "",
+  style
+}) {
+  const rootRef = useRef(null);
+  const timeRef = useRef(0);
+  useEffect(() => {
+    const canvas = document.createElement("canvas");
+    canvas.setAttribute("aria-hidden", "true");
+    Object.assign(canvas.style, { position: "absolute", inset: "0", display: "block", width: "100%", height: "100%", imageRendering: pixelSize > 0 ? "pixelated" : "" });
+    rootRef.current.prepend(canvas);
+    const gl = canvas.getContext("webgl", { antialias: false, alpha: true, premultipliedAlpha: false, powerPreference: "low-power" });
+    if (!gl) {
+      canvas.remove();
+      return void 0;
+    }
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const preset = QUALITY[quality] ?? QUALITY.medium;
+    const compile = (type, source) => {
+      const shader = gl.createShader(type);
+      gl.shaderSource(shader, source);
+      gl.compileShader(shader);
+      return shader;
+    };
+    const vs = compile(gl.VERTEX_SHADER, VERTEX);
+    const fs = compile(gl.FRAGMENT_SHADER, fragment(preset.octaves, preset.steps));
+    const program = gl.createProgram();
+    gl.attachShader(program, vs);
+    gl.attachShader(program, fs);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      gl.getExtension("WEBGL_lose_context")?.loseContext();
+      canvas.remove();
+      return void 0;
+    }
+    gl.useProgram(program);
+    const buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+    const loc = gl.getAttribLocation(program, "p");
+    gl.enableVertexAttribArray(loc);
+    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+    const u = (name) => gl.getUniformLocation(program, name);
+    const a = sunAngle * Math.PI / 180;
+    const sun = [Math.sin(a), sunHeight, Math.cos(a)];
+    const len = Math.hypot(...sun);
+    gl.uniform3fv(u("uSun"), sun.map((v) => v / len));
+    gl.uniform3fv(u("uTop"), rgb(topColor));
+    gl.uniform3fv(u("uBottom"), rgb(bottomColor));
+    gl.uniform3fv(u("uCloud"), rgb(cloudColor));
+    gl.uniform3fv(u("uShade"), rgb(shadeColor));
+    gl.uniform1f(u("uCover"), coverage);
+    const uTime = u("uTime");
+    const uRes = u("uRes");
+    let visible = true;
+    let raf = 0;
+    let last = 0;
+    const size = () => {
+      const scale = pixelSize > 0 ? 1 / pixelSize : preset.scale * Math.min(2, window.devicePixelRatio || 1);
+      canvas.width = Math.max(1, Math.round(canvas.clientWidth * scale));
+      canvas.height = Math.max(1, Math.round(canvas.clientHeight * scale));
+      gl.viewport(0, 0, canvas.width, canvas.height);
+      gl.uniform2f(uRes, canvas.width, canvas.height);
+    };
+    const draw = () => {
+      gl.uniform1f(uTime, timeRef.current);
+      gl.drawArrays(gl.TRIANGLES, 0, 3);
+    };
+    const tick = (now) => {
+      timeRef.current += Math.min(50, now - last) / 1e3 * speed;
+      last = now;
+      draw();
+      raf = requestAnimationFrame(tick);
+    };
+    const start = () => {
+      if (raf || reduced || !visible || document.hidden) return;
+      last = performance.now();
+      raf = requestAnimationFrame(tick);
+    };
+    const stop = () => {
+      cancelAnimationFrame(raf);
+      raf = 0;
+    };
+    const resize = new ResizeObserver(() => {
+      size();
+      draw();
+    });
+    resize.observe(canvas);
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible) start();
+      else stop();
+    });
+    observer.observe(canvas);
+    const onVisibility = () => document.hidden ? stop() : start();
+    document.addEventListener("visibilitychange", onVisibility);
+    size();
+    draw();
+    start();
+    return () => {
+      stop();
+      resize.disconnect();
+      observer.disconnect();
+      document.removeEventListener("visibilitychange", onVisibility);
+      gl.deleteBuffer(buffer);
+      gl.deleteProgram(program);
+      gl.deleteShader(vs);
+      gl.deleteShader(fs);
+      gl.getExtension("WEBGL_lose_context")?.loseContext();
+      canvas.remove();
+    };
+  }, [quality, pixelSize, speed, coverage, sunAngle, sunHeight, topColor, bottomColor, cloudColor, shadeColor]);
+  return /* @__PURE__ */ jsx("div", { ref: rootRef, className, style: { position: "relative", width: "100%", height, overflow: "hidden", background: `linear-gradient(${topColor}, ${bottomColor})`, ...style }, children: children && /* @__PURE__ */ jsx("div", { style: { position: "relative", height: "100%" }, children }) });
+}
+export {
+  CloudSky as default
+};

package/dist/CodeRain.d.ts

@@ -0,0 +1,24 @@
+import { type CSSProperties } from 'react';
+export interface CodeRainProps {
+    /** A preset set of glyphs, or your own characters. */
+    glyphs?: 'hex' | 'binary' | 'blocks' | 'arrows' | (string & {});
+    /** Glyph size, also the column width, in px. */
+    fontSize?: number;
+    fontFamily?: string;
+    speed?: number;
+    /** Share of columns that are falling. */
+    density?: number;
+    /** About how many seconds a tail lingers. */
+    tail?: number;
+    /** Chance of glyph flips and glitch rows. */
+    glitch?: number;
+    /** Columns within this many px of the pointer run hot. */
+    hotRadius?: number;
+    headColor?: string;
+    color?: string;
+    hotColor?: string;
+    backgroundColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function CodeRain({ glyphs, fontSize, fontFamily, speed, density, tail, glitch, hotRadius, headColor, color, hotColor, backgroundColor, className, style }: CodeRainProps): import("react").JSX.Element;

package/dist/CodeRain.js

@@ -0,0 +1,158 @@
+'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 GLYPHS = {
+  hex: "0123456789ABCDEF",
+  binary: "01",
+  blocks: "\u2596\u2597\u2598\u2599\u259A\u259B\u259C\u259D\u259E\u259F\u2588\u2584\u2580",
+  arrows: "\u2190\u2191\u2192\u2193\u2196\u2197\u2198\u2199\u25C4\u25BA\u25B2\u25BC"
+};
+function CodeRain({
+  glyphs = "hex",
+  fontSize = 14,
+  fontFamily = '"Press Start 2P", ui-monospace, monospace',
+  speed = 1,
+  density = 0.8,
+  tail = 1.2,
+  glitch = 4e-3,
+  hotRadius = 120,
+  headColor = "#f4f4f4",
+  color = "#38b764",
+  hotColor = "#ffcd75",
+  backgroundColor = "#0b0b14",
+  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 set = GLYPHS[glyphs] ?? glyphs;
+    const [br, bg, bb] = hexToRgb(backgroundColor);
+    const pick = () => set[Math.floor(Math.random() * set.length)];
+    let W = 0;
+    let H = 0;
+    let dpr = 1;
+    let cols = [];
+    let rows = 0;
+    let raf = 0;
+    let last = 0;
+    let visible = true;
+    const hand = { x: -1e4, y: -1e4 };
+    const fit = () => {
+      dpr = Math.min(2, window.devicePixelRatio || 1);
+      W = canvas.clientWidth;
+      H = canvas.clientHeight;
+      canvas.width = Math.round(W * dpr);
+      canvas.height = Math.round(H * dpr);
+      const count = Math.ceil(W / fontSize);
+      rows = Math.ceil(H / fontSize);
+      cols = Array.from({ length: count }, () => ({ y: -Math.random() * rows, rate: 6 + Math.random() * 10, on: Math.random() < density, glyph: pick() }));
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.fillStyle = backgroundColor;
+      ctx.fillRect(0, 0, W, H);
+    };
+    const step = (dt) => {
+      ctx.fillStyle = `rgba(${br},${bg},${bb},${(1 - Math.exp(-dt * 4 / Math.max(0.05, tail))).toFixed(3)})`;
+      ctx.fillRect(0, 0, W, H);
+      ctx.font = `${fontSize}px ${fontFamily}`;
+      ctx.textBaseline = "top";
+      cols.forEach((c, i) => {
+        if (!c.on) return;
+        const x = i * fontSize;
+        const near = Math.abs(x - hand.x) < hotRadius && hand.y > -1e3;
+        const prev = Math.floor(c.y);
+        c.y += c.rate * speed * dt * (near ? 2.2 : 1);
+        const row = Math.floor(c.y);
+        if (row !== prev) {
+          ctx.fillStyle = near ? hotColor : color;
+          ctx.fillText(c.glyph, x, prev * fontSize);
+          c.glyph = pick();
+          ctx.fillStyle = headColor;
+          ctx.fillText(c.glyph, x, row * fontSize);
+        }
+        if (row > rows + 4) {
+          c.y = -Math.random() * rows * 0.5;
+          c.rate = 6 + Math.random() * 10;
+          c.on = Math.random() < density;
+        }
+        if (Math.random() < glitch * 6) {
+          ctx.fillStyle = color;
+          ctx.fillText(pick(), x, Math.floor(Math.random() * Math.max(1, row)) * fontSize);
+        }
+      });
+      if (Math.random() < glitch) {
+        const y = Math.floor(Math.random() * rows) * fontSize;
+        ctx.fillStyle = hotColor;
+        for (let x = 0; x < W; x += fontSize) if (Math.random() < 0.6) ctx.fillText(pick(), x, y);
+      }
+    };
+    const still = () => {
+      ctx.font = `${fontSize}px ${fontFamily}`;
+      ctx.textBaseline = "top";
+      cols.forEach((c, i) => {
+        if (!c.on) return;
+        const len = 4 + i * 7 % 12;
+        const head = i * 5 % (rows + 4);
+        for (let k = 0; k < len; k++) {
+          ctx.fillStyle = k === 0 ? headColor : color;
+          ctx.globalAlpha = 1 - k / len;
+          ctx.fillText(pick(), i * fontSize, (head - k) * fontSize);
+        }
+      });
+      ctx.globalAlpha = 1;
+    };
+    const tick = (now) => {
+      step(Math.max(0, Math.min(0.05, (now - last) / 1e3)));
+      last = now;
+      raf = visible && !document.hidden ? requestAnimationFrame(tick) : 0;
+    };
+    const start = () => {
+      if (raf || reduced || !visible || document.hidden) return;
+      last = performance.now();
+      raf = requestAnimationFrame(tick);
+    };
+    const onMove = (event) => {
+      const r = canvas.getBoundingClientRect();
+      hand.x = event.clientX - r.left;
+      hand.y = event.clientY - r.top;
+    };
+    const onLeave = () => {
+      hand.x = -1e4;
+      hand.y = -1e4;
+    };
+    const resize = new ResizeObserver(() => {
+      fit();
+      if (reduced) still();
+    });
+    resize.observe(canvas);
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      start();
+    });
+    observer.observe(canvas);
+    document.addEventListener("visibilitychange", start);
+    canvas.addEventListener("pointermove", onMove);
+    canvas.addEventListener("pointerleave", onLeave);
+    fit();
+    if (reduced) document.fonts?.load(`${fontSize}px ${fontFamily}`).then(() => canvas.isConnected && still());
+    start();
+    return () => {
+      cancelAnimationFrame(raf);
+      resize.disconnect();
+      observer.disconnect();
+      document.removeEventListener("visibilitychange", start);
+      canvas.removeEventListener("pointermove", onMove);
+      canvas.removeEventListener("pointerleave", onLeave);
+    };
+  }, [glyphs, fontSize, fontFamily, speed, density, tail, glitch, hotRadius, headColor, color, hotColor, backgroundColor]);
+  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, "aria-hidden": "true", className, style: { display: "block", width: "100%", height: "100%", background: backgroundColor, ...style } });
+}
+export {
+  CodeRain as default
+};

package/dist/CodeShowcase.d.ts

@@ -0,0 +1,50 @@
+import { type CSSProperties } from 'react';
+export interface CodeFile {
+    /** Tab label. */
+    name: string;
+    code: string;
+    /** Treat lines starting with + / - as added / removed. */
+    diff?: boolean;
+    /** 1-based line numbers to emphasise. */
+    highlight?: number[];
+}
+export interface CodeShowcaseProps {
+    files?: CodeFile[];
+    defaultFile?: number;
+    /** Controlled active tab index. */
+    file?: number;
+    onFileChange?: (index: number) => void;
+    /** Advance every N ms until a tab is clicked; 0 is off. */
+    autoPlay?: number;
+    /** Line-by-line reveal on first view. */
+    reveal?: boolean;
+    stagger?: number;
+    /** Fold-out and fold-in time for changed lines, in ms. */
+    morphDuration?: number;
+    showChrome?: boolean;
+    showLineNumbers?: boolean;
+    copyable?: boolean;
+    width?: number;
+    fontSize?: number;
+    backgroundColor?: string;
+    barColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    dimColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    keywordColor?: string;
+    stringColor?: string;
+    numberColor?: string;
+    tagColor?: string;
+    functionColor?: string;
+    addColor?: string;
+    removeColor?: string;
+    radius?: number;
+    fontFamily?: string;
+    uiFontFamily?: string;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function CodeShowcase({ files, defaultFile, file: controlled, onFileChange, autoPlay, reveal, stagger, morphDuration, showChrome, showLineNumbers, copyable, width, fontSize, backgroundColor, barColor, textColor, mutedColor, dimColor, lineColor, accentColor, keywordColor, stringColor, numberColor, tagColor, functionColor, addColor, removeColor, radius, fontFamily, uiFontFamily, label, className, style }: CodeShowcaseProps): import("react").JSX.Element;