bits-lab 0.0.0-stage → 0.1.0

package/dist/TradingCard.d.ts

@@ -0,0 +1,30 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface TradingCardProps {
+    name?: string;
+    image?: string;
+    imageAlt?: string;
+    /** Frame colour and how strong the holo foil is (common has none). */
+    rarity?: 'common' | 'rare' | 'epic' | 'legendary';
+    stats?: {
+        label: string;
+        value: ReactNode;
+    }[];
+    /** With a back, the card is a button that flips. */
+    back?: ReactNode;
+    flipped?: boolean;
+    onFlip?: (flipped: boolean) => void;
+    /** Maximum tilt toward the pointer, in degrees. */
+    tilt?: number;
+    width?: number;
+    radius?: number;
+    cardColor?: string;
+    backColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    accentColor?: string;
+    frameColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function TradingCard({ name, image, imageAlt, rarity, stats, back, flipped: controlled, onFlip, tilt, width, radius, cardColor, backColor, textColor, mutedColor, accentColor, frameColor, fontFamily, className, style }: TradingCardProps): import("react").JSX.Element;

package/dist/TradingCard.js

@@ -0,0 +1,147 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-trading-card";
+const CSS = `
+.bl-tcard { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; --shift: 0.5; display: inline-block; width: var(--bl-w); perspective: 900px; font-family: var(--bl-font); color: var(--bl-ink); }
+.bl-tcard__flip { position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--turn))); transform-style: preserve-3d; transition: transform 500ms cubic-bezier(.3,1.2,.4,1); cursor: default; }
+.bl-tcard[data-flippable] .bl-tcard__flip { cursor: pointer; }
+.bl-tcard[data-tilting] .bl-tcard__flip { transition: transform 80ms linear; }
+.bl-tcard__flip:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 6px; border-radius: var(--bl-radius); }
+.bl-tcard__face { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; overflow: hidden; padding: 10px; border-radius: var(--bl-radius); background: var(--bl-card); box-shadow: inset 0 0 0 4px var(--bl-frame), inset 0 0 0 6px rgba(0,0,0,0.35), 0 18px 34px -16px rgba(0,0,0,0.9); backface-visibility: hidden; }
+.bl-tcard__back { transform: rotateY(180deg); place-items: center; grid-template-rows: 1fr; background: var(--bl-back); }
+.bl-tcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 4px 6px 0; }
+.bl-tcard__name { font-size: 15px; font-weight: 700; line-height: 1.2; }
+.bl-tcard__rarity { color: var(--bl-frame); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
+.bl-tcard__art { position: relative; overflow: hidden; border-radius: 6px; background: #0b0b14; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.5); }
+.bl-tcard__art > img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
+.bl-tcard__stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 0 2px 2px; }
+.bl-tcard__stat { display: grid; justify-items: center; padding: 4px 2px; border-radius: 4px; background: rgba(0,0,0,0.3); }
+.bl-tcard__stat-label { color: var(--bl-muted); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; }
+.bl-tcard__stat-value { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
+.bl-tcard__foil { position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(115deg, #ef7d57 0 8%, #ffcd75 8% 16%, #a7f070 16% 24%, #73eff7 24% 32%, #41a6f6 32% 40%, #b13e53 40% 48%); background-size: 260% 260%; background-position: calc(var(--shift) * 100%) calc(var(--shift) * 60%); mix-blend-mode: color-dodge; opacity: var(--bl-foil); pointer-events: none; }
+.bl-tcard__glare { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,0.45), transparent 45%); mix-blend-mode: overlay; opacity: 0; transition: opacity 200ms; pointer-events: none; }
+.bl-tcard[data-tilting] .bl-tcard__glare { opacity: 1; }
+@media (prefers-reduced-motion: reduce) { .bl-tcard__flip { transition: none; transform: rotateY(var(--turn)); } .bl-tcard__glare { 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);
+  }, []);
+}
+const RARITY = {
+  common: { frame: "#94b0c2", foil: 0 },
+  rare: { frame: "#41a6f6", foil: 0.25 },
+  epic: { frame: "#b13e53", foil: 0.4 },
+  legendary: { frame: "#ffcd75", foil: 0.55 }
+};
+function TradingCard({
+  name = "",
+  image,
+  imageAlt = "",
+  rarity = "rare",
+  stats = [],
+  back,
+  flipped: controlled,
+  onFlip,
+  tilt = 14,
+  width = 240,
+  radius = 14,
+  cardColor = "#262b44",
+  backColor = "#29366f",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  accentColor = "#73eff7",
+  frameColor,
+  fontFamily = "inherit",
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const [inner, setInner] = useState(false);
+  const flipped = controlled ?? inner;
+  const tier = RARITY[rarity] ?? RARITY.rare;
+  useEffect(() => {
+    const root = rootRef.current;
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return void 0;
+    let raf = 0;
+    const onMove = (event) => {
+      if (raf) return;
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        const r = root.getBoundingClientRect();
+        const x = (event.clientX - r.left) / r.width;
+        const y = (event.clientY - r.top) / r.height;
+        root.style.setProperty("--ry", `${((x - 0.5) * tilt * 2).toFixed(2)}deg`);
+        root.style.setProperty("--rx", `${((0.5 - y) * tilt * 2).toFixed(2)}deg`);
+        root.style.setProperty("--gx", `${(x * 100).toFixed(1)}%`);
+        root.style.setProperty("--gy", `${(y * 100).toFixed(1)}%`);
+        root.style.setProperty("--shift", ((x + y) / 2).toFixed(3));
+        root.dataset.tilting = "";
+      });
+    };
+    const onLeave = () => {
+      cancelAnimationFrame(raf);
+      raf = 0;
+      ["--rx", "--ry", "--gx", "--gy", "--shift"].forEach((p) => root.style.removeProperty(p));
+      delete root.dataset.tilting;
+    };
+    root.addEventListener("pointermove", onMove);
+    root.addEventListener("pointerleave", onLeave);
+    return () => {
+      cancelAnimationFrame(raf);
+      root.removeEventListener("pointermove", onMove);
+      root.removeEventListener("pointerleave", onLeave);
+    };
+  }, [tilt]);
+  const flip = () => {
+    if (!back) return;
+    if (controlled === void 0) setInner((f) => !f);
+    onFlip?.(!flipped);
+  };
+  const face = /* @__PURE__ */ jsxs("span", { className: "bl-tcard__face", children: [
+    /* @__PURE__ */ jsxs("span", { className: "bl-tcard__head", children: [
+      /* @__PURE__ */ jsx("span", { className: "bl-tcard__name", children: name }),
+      /* @__PURE__ */ jsx("span", { className: "bl-tcard__rarity", children: rarity })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "bl-tcard__art", children: image && /* @__PURE__ */ jsx("img", { src: image, alt: imageAlt, draggable: false }) }),
+    stats.length > 0 && // Spans, not a <dl>: the card can be a button, which only takes inline content.
+    /* @__PURE__ */ jsx("span", { className: "bl-tcard__stats", role: "list", children: stats.map((s) => /* @__PURE__ */ jsxs("span", { className: "bl-tcard__stat", role: "listitem", children: [
+      /* @__PURE__ */ jsx("span", { className: "bl-tcard__stat-label", children: s.label }),
+      /* @__PURE__ */ jsx("span", { className: "bl-tcard__stat-value", children: s.value })
+    ] }, s.label)) }),
+    tier.foil > 0 && /* @__PURE__ */ jsx("span", { className: "bl-tcard__foil", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: "bl-tcard__glare", "aria-hidden": "true" })
+  ] });
+  const Tag = back ? "button" : "div";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: rootRef,
+      className: `bl-tcard ${className}`,
+      "data-flippable": back ? "" : void 0,
+      style: { "--bl-w": `${width}px`, "--bl-radius": `${radius}px`, "--bl-card": cardColor, "--bl-back": backColor, "--bl-ink": textColor, "--bl-muted": mutedColor, "--bl-accent": accentColor, "--bl-frame": frameColor ?? tier.frame, "--bl-foil": tier.foil, "--turn": flipped ? "180deg" : "0deg", "--bl-font": fontFamily, ...style },
+      children: /* @__PURE__ */ jsxs(
+        Tag,
+        {
+          className: "bl-tcard__flip",
+          type: back ? "button" : void 0,
+          "aria-pressed": back ? flipped : void 0,
+          "aria-label": back ? `${name}, ${rarity} card. ${flipped ? "Showing the back" : "Showing the front"}; press to flip.` : void 0,
+          onClick: back ? flip : void 0,
+          children: [
+            face,
+            back && /* @__PURE__ */ jsx("span", { className: "bl-tcard__face bl-tcard__back", "aria-hidden": !flipped || void 0, children: back })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  TradingCard as default
+};

package/dist/VanishInput.d.ts

@@ -0,0 +1,34 @@
+import { type CSSProperties } from 'react';
+export interface VanishInputProps {
+    /** Suggestions that rotate while the field is empty. */
+    placeholders?: string[];
+    /** Time per placeholder, in ms. */
+    interval?: number;
+    /** Called with the trimmed text; the field then clears. */
+    onSubmit?: (text: string) => void;
+    onChange?: (text: string) => void;
+    /** Accessible name of the field. */
+    label?: string;
+    /** Accessible name of the submit button. */
+    submitLabel?: string;
+    /** Particle size, in px. */
+    particleSize?: number;
+    /** Dissolve length, in ms. */
+    duration?: number;
+    width?: number;
+    height?: number;
+    radius?: number;
+    fontSize?: number;
+    /** Left text padding, in px. */
+    padding?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    accentTextColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function VanishInput({ placeholders, interval, onSubmit, onChange, label, submitLabel, particleSize, duration, width, height, radius, fontSize, padding, backgroundColor, textColor, mutedColor, lineColor, accentColor, accentTextColor, fontFamily, className, style }: VanishInputProps): import("react").JSX.Element;

package/dist/VanishInput.js

@@ -0,0 +1,190 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-vanish";
+const CSS = `
+.bl-vanish { position: relative; display: flex; align-items: center; width: 100%; max-width: var(--bl-w); height: var(--bl-h); border-radius: var(--bl-radius); background: var(--bl-bg); box-shadow: inset 0 0 0 1px var(--bl-line), 0 10px 30px -18px rgba(0,0,0,0.6); font-family: var(--bl-font); transition: box-shadow 160ms; }
+.bl-vanish:focus-within { box-shadow: inset 0 0 0 1.5px var(--bl-accent), 0 0 0 4px var(--bl-ring); }
+.bl-vanish__field { position: relative; flex: 1; min-width: 0; height: 100%; overflow: hidden; }
+.bl-vanish__input { width: 100%; height: 100%; padding: 0 0 0 var(--bl-pad); border: 0; background: transparent; color: var(--bl-ink); font: inherit; font-size: var(--bl-size); outline: none; }
+.bl-vanish[data-vanishing] .bl-vanish__input { color: transparent; }
+.bl-vanish__placeholder { position: absolute; left: var(--bl-pad); right: 8px; top: 50%; color: var(--bl-muted); font-size: var(--bl-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transform: translateY(-50%); animation: bl-vanish-in 420ms cubic-bezier(.2,.9,.25,1); }
+@keyframes bl-vanish-in { from { opacity: 0; transform: translateY(calc(-50% + 12px)); } }
+.bl-vanish__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
+.bl-vanish__submit { flex: 0 0 auto; display: grid; place-items: center; width: calc(var(--bl-h) - 12px); height: calc(var(--bl-h) - 12px); margin-right: 6px; border: 0; border-radius: calc(var(--bl-radius) - 4px); background: var(--bl-accent); color: var(--bl-accent-ink); cursor: pointer; transition: opacity 160ms, transform 160ms; }
+.bl-vanish__submit:disabled { opacity: 0.35; cursor: default; }
+.bl-vanish__submit:not(:disabled):hover { transform: scale(1.05); }
+.bl-vanish__submit:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) { .bl-vanish__placeholder { animation: none; } .bl-vanish, .bl-vanish__submit { 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 DEFAULT_PLACEHOLDERS = ["Search for a component\u2026", 'Try "pixel button"', "Find a background", "What are you building today?"];
+function VanishInput({
+  placeholders = DEFAULT_PLACEHOLDERS,
+  interval = 3e3,
+  onSubmit,
+  onChange,
+  label = "Search",
+  submitLabel = "Submit",
+  particleSize = 2,
+  duration = 900,
+  width = 560,
+  height = 52,
+  radius = 26,
+  fontSize = 16,
+  padding = 20,
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "rgba(255,255,255,0.12)",
+  accentColor = "#73eff7",
+  accentTextColor = "#0b0b14",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const [value, setValue] = useState("");
+  const [index, setIndex] = useState(0);
+  const [vanishing, setVanishing] = useState(false);
+  const inputRef = useRef(null);
+  const canvasRef = useRef(null);
+  const frame = useRef(0);
+  useEffect(() => {
+    if (placeholders.length < 2 || value) return void 0;
+    const timer = setInterval(() => setIndex((i) => (i + 1) % placeholders.length), interval);
+    return () => clearInterval(timer);
+  }, [placeholders.length, interval, value]);
+  useEffect(() => () => cancelAnimationFrame(frame.current), []);
+  const vanish = (text) => {
+    const input = inputRef.current;
+    const canvas = canvasRef.current;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (reduced || !canvas) return;
+    const dpr = Math.min(2, window.devicePixelRatio || 1);
+    const w = input.clientWidth;
+    const h = input.clientHeight;
+    canvas.width = Math.round(w * dpr);
+    canvas.height = Math.round(h * dpr);
+    const ctx = canvas.getContext("2d", { willReadFrequently: true });
+    const computed = getComputedStyle(input);
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.font = `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;
+    ctx.fillStyle = textColor;
+    ctx.textBaseline = "middle";
+    ctx.fillText(text, parseFloat(computed.paddingLeft) - input.scrollLeft, h / 2);
+    const step = Math.max(1, Math.round(particleSize * dpr));
+    const { data } = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const particles = [];
+    let maxX = 0;
+    for (let y = 0; y < canvas.height; y += step) {
+      for (let x = 0; x < canvas.width; x += step) {
+        const i = (y * canvas.width + x) * 4;
+        if (data[i + 3] < 100) continue;
+        particles.push({ x: x / dpr, y: y / dpr, vx: 0, vy: 0, alpha: 1, color: `rgb(${data[i]},${data[i + 1]},${data[i + 2]})` });
+        maxX = Math.max(maxX, x / dpr);
+      }
+    }
+    const size = step / dpr;
+    const start = performance.now();
+    const sweep = duration * 0.55;
+    const tick = (now) => {
+      const t = now - start;
+      ctx.clearRect(0, 0, w, h);
+      let alive = 0;
+      for (const p of particles) {
+        if (p.alpha <= 0) continue;
+        alive++;
+        const released = t > (maxX - p.x) / Math.max(1, maxX) * sweep;
+        if (released) {
+          if (!p.vx) {
+            p.vx = 0.6 + Math.random() * 1.6;
+            p.vy = (Math.random() - 0.5) * 1.6;
+          }
+          p.x += p.vx;
+          p.y += p.vy;
+          p.alpha -= 0.02 + Math.random() * 0.03;
+        }
+        ctx.globalAlpha = Math.max(0, p.alpha);
+        ctx.fillStyle = p.color;
+        ctx.fillRect(p.x, p.y, size, size);
+      }
+      ctx.globalAlpha = 1;
+      if (alive && t < duration * 2) frame.current = requestAnimationFrame(tick);
+      else {
+        ctx.clearRect(0, 0, w, h);
+        setVanishing(false);
+      }
+    };
+    setVanishing(true);
+    cancelAnimationFrame(frame.current);
+    frame.current = requestAnimationFrame(tick);
+  };
+  const submit = (event) => {
+    event.preventDefault();
+    const text = value.trim();
+    if (!text || vanishing) return;
+    vanish(value);
+    onSubmit?.(text);
+    setValue("");
+    onChange?.("");
+  };
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      className: `bl-vanish ${className}`,
+      role: "search",
+      "data-vanishing": vanishing || void 0,
+      onSubmit: submit,
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-h": `${height}px`,
+        "--bl-radius": `${radius}px`,
+        "--bl-size": `${fontSize}px`,
+        "--bl-pad": `${padding}px`,
+        "--bl-bg": backgroundColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-line": lineColor,
+        "--bl-accent": accentColor,
+        "--bl-accent-ink": accentTextColor,
+        "--bl-ring": `color-mix(in srgb, ${accentColor} 22%, transparent)`,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "bl-vanish__field", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              className: "bl-vanish__input",
+              type: "text",
+              value,
+              onChange: (event) => {
+                setValue(event.target.value);
+                onChange?.(event.target.value);
+              },
+              "aria-label": label,
+              autoComplete: "off",
+              enterKeyHint: "send"
+            }
+          ),
+          !value && !vanishing && placeholders.length > 0 && /* @__PURE__ */ jsx("span", { className: "bl-vanish__placeholder", "aria-hidden": "true", children: placeholders[index % placeholders.length] }, index),
+          /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "bl-vanish__canvas", "aria-hidden": "true" })
+        ] }),
+        /* @__PURE__ */ jsx("button", { type: "submit", className: "bl-vanish__submit", disabled: !value.trim() || vanishing, "aria-label": submitLabel, children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 8h10M9 4l4 4-4 4" }) }) })
+      ]
+    }
+  );
+}
+export {
+  VanishInput as default
+};

package/dist/VideoHero.d.ts

@@ -0,0 +1,32 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface VideoHeroProps {
+    /** A video file to play in the lightbox. */
+    src?: string;
+    /** An embed player URL (rendered in an iframe) instead of a file. */
+    embedUrl?: string;
+    /** Thumbnail image (also the video poster). */
+    poster?: string;
+    /** Custom thumbnail content instead of `poster`. */
+    children?: ReactNode;
+    title?: ReactNode;
+    meta?: ReactNode;
+    /** Button name; defaults to "Play video: title". */
+    label?: string;
+    aspectRatio?: string;
+    /** Max thumbnail width, in px. */
+    width?: number;
+    radius?: number;
+    buttonSize?: number;
+    /** Play button leans toward the cursor. */
+    magnetic?: boolean;
+    /** Lightbox grow length, in ms. */
+    duration?: number;
+    accentColor?: string;
+    accentTextColor?: string;
+    backdropColor?: string;
+    fontFamily?: string;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function VideoHero({ src, embedUrl, poster, children, title, meta, label, aspectRatio, width, radius, buttonSize, magnetic, duration, accentColor, accentTextColor, backdropColor, fontFamily, onOpenChange, className, style }: VideoHeroProps): import("react").JSX.Element;

package/dist/VideoHero.js

@@ -0,0 +1,207 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+const STYLE_ID = "bl-video-hero";
+const CSS = `
+.bl-vhero { position: relative; display: block; width: 100%; max-width: var(--bl-w); aspect-ratio: var(--bl-ratio); padding: 0; overflow: hidden; border: 0; border-radius: var(--bl-radius); background: #000; color: #fff; font-family: var(--bl-font); cursor: pointer; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7); }
+.bl-vhero:focus-visible { outline: 3px solid var(--bl-accent); outline-offset: 3px; }
+.bl-vhero__poster { position: absolute; inset: 0; transition: transform 600ms cubic-bezier(.2,.9,.25,1), filter 300ms; }
+.bl-vhero__poster > img, .bl-vhero__poster > video { width: 100%; height: 100%; object-fit: cover; display: block; }
+.bl-vhero:hover .bl-vhero__poster { transform: scale(1.04); filter: brightness(0.8); }
+.bl-vhero__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 55%); }
+.bl-vhero__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: var(--bl-btn); height: var(--bl-btn); border-radius: 50%; background: var(--bl-accent); color: var(--bl-accent-ink); transform: translate(calc(-50% + var(--bl-px, 0px)), calc(-50% + var(--bl-py, 0px))) scale(var(--bl-ps, 1)); transition: transform 300ms cubic-bezier(.2,.9,.25,1.3); box-shadow: 0 10px 30px -8px rgba(0,0,0,0.6); }
+.bl-vhero:hover .bl-vhero__play { --bl-ps: 1.1; }
+.bl-vhero__play::before, .bl-vhero__play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--bl-accent); animation: bl-vhero-ring 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
+.bl-vhero__play::after { animation-delay: 1.2s; }
+.bl-vhero__caption { position: absolute; left: 18px; right: 18px; bottom: 16px; text-align: left; }
+.bl-vhero__title { display: block; font-size: 18px; font-weight: 700; }
+.bl-vhero__meta { display: block; margin-top: 3px; color: rgba(255,255,255,0.75); font-size: 13px; }
+.bl-vhero-box__backdrop { position: fixed; inset: 0; z-index: 1400; background: var(--bl-backdrop); }
+.bl-vhero-box { position: fixed; z-index: 1401; overflow: hidden; border-radius: var(--bl-radius); background: #000; box-shadow: 0 40px 100px -30px rgba(0,0,0,0.9); outline: none; }
+.bl-vhero-box > video, .bl-vhero-box > iframe { display: block; width: 100%; height: 100%; border: 0; }
+.bl-vhero-box__close { position: fixed; z-index: 1402; top: 16px; right: 16px; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.14); color: #fff; cursor: pointer; }
+.bl-vhero-box__close:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+@keyframes bl-vhero-ring { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.9); opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .bl-vhero__poster, .bl-vhero__play { transition: none; } .bl-vhero__play::before, .bl-vhero__play::after { animation: none; 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 reduced = () => window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+function VideoHero({
+  src,
+  embedUrl,
+  poster,
+  children,
+  title,
+  meta,
+  label,
+  aspectRatio = "16 / 9",
+  width = 720,
+  radius = 16,
+  buttonSize = 72,
+  magnetic = true,
+  duration = 520,
+  accentColor = "#f4f4f4",
+  accentTextColor = "#1a1c2c",
+  backdropColor = "rgba(6,6,12,0.82)",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  onOpenChange,
+  className = "",
+  style
+}) {
+  useStyles();
+  const triggerRef = useRef(null);
+  const boxRef = useRef(null);
+  const backdropRef = useRef(null);
+  const closeRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const closing = useRef(false);
+  const change = (next) => {
+    setOpen(next);
+    onOpenChange?.(next);
+  };
+  const target = () => {
+    const [w, h] = aspectRatio.split("/").map(Number);
+    const ratio = w / h || 16 / 9;
+    const maxW = Math.min(window.innerWidth - 32, 1100);
+    const maxH = window.innerHeight - 96;
+    const width2 = Math.min(maxW, maxH * ratio);
+    const height = width2 / ratio;
+    return { left: (window.innerWidth - width2) / 2, top: (window.innerHeight - height) / 2, width: width2, height };
+  };
+  const box = (r) => ({ left: `${r.left}px`, top: `${r.top}px`, width: `${r.width}px`, height: `${r.height}px` });
+  useEffect(() => {
+    if (open) setMounted(true);
+  }, [open]);
+  useLayoutEffect(() => {
+    if (!mounted || !open) return void 0;
+    const node = boxRef.current;
+    const from = triggerRef.current.getBoundingClientRect();
+    const to = target();
+    Object.assign(node.style, box(to));
+    if (!reduced()) node.animate([box(from), box(to)], { duration, easing: "cubic-bezier(.2,.9,.25,1)" });
+    backdropRef.current.animate({ opacity: [0, 1] }, { duration: duration * 0.6, fill: "both" });
+    const video = node.querySelector("video");
+    video?.play().catch(() => {
+      video.muted = true;
+      video.play().catch(() => {
+      });
+    });
+    closeRef.current?.focus({ preventScroll: true });
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const onResize = () => Object.assign(node.style, box(target()));
+    window.addEventListener("resize", onResize);
+    return () => {
+      document.body.style.overflow = previous;
+      window.removeEventListener("resize", onResize);
+    };
+  }, [mounted, open]);
+  useEffect(() => {
+    if (open || !mounted || closing.current) return;
+    closing.current = true;
+    const node = boxRef.current;
+    const finish = () => {
+      closing.current = false;
+      setMounted(false);
+      triggerRef.current?.focus({ preventScroll: true });
+    };
+    node.querySelector("video")?.pause();
+    backdropRef.current.animate({ opacity: [1, 0] }, { duration: duration * 0.6, fill: "forwards" });
+    if (reduced()) return finish();
+    const from = node.getBoundingClientRect();
+    node.animate([box(from), box(triggerRef.current.getBoundingClientRect())], { duration: duration * 0.85, easing: "cubic-bezier(.4,0,.2,1)", fill: "forwards" }).onfinish = finish;
+  }, [open, mounted]);
+  const onPointerMove = (event) => {
+    if (!magnetic || reduced()) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const x = (event.clientX - rect.left) / rect.width - 0.5;
+    const y = (event.clientY - rect.top) / rect.height - 0.5;
+    event.currentTarget.style.setProperty("--bl-px", `${x * 40}px`);
+    event.currentTarget.style.setProperty("--bl-py", `${y * 30}px`);
+  };
+  const onPointerLeave = (event) => {
+    event.currentTarget.style.removeProperty("--bl-px");
+    event.currentTarget.style.removeProperty("--bl-py");
+  };
+  const vars = {
+    "--bl-w": `${width}px`,
+    "--bl-ratio": aspectRatio,
+    "--bl-radius": `${radius}px`,
+    "--bl-btn": `${buttonSize}px`,
+    "--bl-accent": accentColor,
+    "--bl-accent-ink": accentTextColor,
+    "--bl-backdrop": backdropColor,
+    "--bl-font": fontFamily
+  };
+  const name = label ?? (typeof title === "string" ? `Play video: ${title}` : "Play video");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: `bl-vhero ${className}`,
+        "aria-label": name,
+        "aria-haspopup": "dialog",
+        onClick: () => change(true),
+        onPointerMove,
+        onPointerLeave,
+        style: { ...vars, ...style },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "bl-vhero__poster", "aria-hidden": "true", children: children ?? (poster ? /* @__PURE__ */ jsx("img", { src: poster, alt: "" }) : null) }),
+          (title || meta) && /* @__PURE__ */ jsx("span", { className: "bl-vhero__shade", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "bl-vhero__play", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { width: buttonSize * 0.34, height: buttonSize * 0.34, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M7 4.5v15l13-7.5z" }) }) }),
+          (title || meta) && /* @__PURE__ */ jsxs("span", { className: "bl-vhero__caption", "aria-hidden": "true", children: [
+            title && /* @__PURE__ */ jsx("span", { className: "bl-vhero__title", children: title }),
+            meta && /* @__PURE__ */ jsx("span", { className: "bl-vhero__meta", children: meta })
+          ] })
+        ]
+      }
+    ),
+    mounted && createPortal(
+      /* @__PURE__ */ jsxs("div", { style: vars, children: [
+        /* @__PURE__ */ jsx("div", { ref: backdropRef, className: "bl-vhero-box__backdrop", onClick: () => change(false) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: boxRef,
+            className: "bl-vhero-box",
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": typeof title === "string" ? title : "Video",
+            tabIndex: -1,
+            onKeyDown: (event) => {
+              if (event.key === "Escape") {
+                event.stopPropagation();
+                change(false);
+              }
+              if (event.key === "Tab") {
+                const items = [closeRef.current, boxRef.current.querySelector("video, iframe")].filter(Boolean);
+                const index = items.indexOf(document.activeElement);
+                event.preventDefault();
+                items[(index + (event.shiftKey ? -1 : 1) + items.length) % items.length]?.focus();
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx("button", { ref: closeRef, type: "button", className: "bl-vhero-box__close", "aria-label": "Close video", onClick: () => change(false), children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 3l10 10M13 3 3 13" }) }) }),
+              embedUrl ? /* @__PURE__ */ jsx("iframe", { src: embedUrl, title: typeof title === "string" ? title : "Video", allow: "autoplay; fullscreen; picture-in-picture; encrypted-media", allowFullScreen: true }) : /* @__PURE__ */ jsx("video", { src, poster, controls: true, autoPlay: true, playsInline: true })
+            ]
+          }
+        )
+      ] }),
+      document.body
+    )
+  ] });
+}
+export {
+  VideoHero as default
+};

package/dist/VoiceOrb.d.ts

@@ -0,0 +1,23 @@
+import { type CSSProperties } from 'react';
+export type OrbState = 'idle' | 'listening' | 'thinking' | 'speaking';
+export interface VoiceOrbProps {
+    state?: OrbState;
+    /** With "mic", the microphone opens only while listening and is released right after. */
+    source?: 'simulated' | 'mic';
+    /** Drive the orb yourself (0–1), e.g. from your TTS audio. Overrides the source. */
+    level?: number;
+    /** Diameter, in px. */
+    size?: number;
+    /** Gradient stops; they rotate. */
+    colors?: string[];
+    glowColor?: string;
+    /** Level gain. */
+    sensitivity?: number;
+    /** Accessible name, combined with the state. */
+    label?: string;
+    /** Called if the microphone is denied or missing (falls back to a simulated voice). */
+    onMicError?: (error: unknown) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function VoiceOrb({ state, source, level, size, colors, glowColor, sensitivity, label, onMicError, className, style }: VoiceOrbProps): import("react").JSX.Element;