fancy-ui-react 0.2.0

package/dist/components/fireworks-hdr/FireworksHdr.js

@@ -0,0 +1,426 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useEventCallback } from "../../internals/dom/use-event-callback.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { isDev } from "./dev.js";
+import { EXPOSURE_AMBIENT, hexToLinearRgb, linearToOklab, resolveQualityTier, QUALITY, createSim, KEEP_CLEAR_DESKTOP, adaptiveDowngradeStep, shellHueColor, nextShellHue, poissonIntervalMs, adaptiveLevel, createAdaptiveState, sampleZone, rectExpandedContains, AMBIENT_ZONES, AMBIENT_RADIUS_MAX, SHELL, SHELL_JITTER_DEG } from "./fireworks-shared.js";
+import { startWebGpuFireworks } from "./webgpu-renderer.js";
+import { startWebGl2Fireworks } from "./webgl2-renderer.js";
+const MAX_INSTANCES = QUALITY.high.maxParticles;
+const DT_CLAMP = 0.05;
+const MAX_AMBIENT_INFLIGHT_SOFT = 2;
+const MAX_AMBIENT_INFLIGHT_HARD = 3;
+const RESTORE_TIMEOUT_MS = 4e3;
+function clampExposure(v) {
+  return Number.isFinite(v) ? Math.max(1, Math.min(4, v)) : 1;
+}
+function resolvePalette(hexes) {
+  const parsed = (hexes.length ? hexes : ["#42cfff", "#3d5bff", "#a142ff", "#ff2fd6"]).map(
+    hexToLinearRgb
+  );
+  return parsed.map((c) => {
+    const o = linearToOklab(c);
+    let h = Math.atan2(o.b, o.a);
+    if (h < 0) h += Math.PI * 2;
+    return { c, h };
+  }).sort((a, b) => a.h - b.h).map((x) => x.c);
+}
+function currentDpr() {
+  return Math.min(typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1, 2);
+}
+function detectLowPower() {
+  if (typeof navigator === "undefined") return false;
+  const mem = navigator.deviceMemory;
+  const cores = navigator.hardwareConcurrency;
+  return typeof mem === "number" && mem <= 4 || typeof cores === "number" && cores <= 4;
+}
+function FireworksHdr({
+  palette = ["#ff2fd6", "#a142ff", "#3d5bff", "#42cfff"],
+  hdr = true,
+  exposure = EXPOSURE_AMBIENT,
+  ambient = true,
+  ambientIntensity = 0.35,
+  interactive = true,
+  quality = "auto",
+  ambientShells,
+  respectReducedMotion = true,
+  className = "",
+  onReady,
+  onLost
+}) {
+  const canvasRef = useRef(null);
+  const qualityRef = useLiveRef(quality);
+  const interactiveRef = useLiveRef(interactive);
+  const handleReady = useEventCallback(onReady);
+  const handleLost = useEventCallback(onLost);
+  useEffect(() => {
+    const node = canvasRef.current;
+    if (!node) return;
+    const canvas = node;
+    let disposed = false;
+    let engine = null;
+    let sim = null;
+    let instances = null;
+    let rafId = 0;
+    let running = false;
+    let lastTime = 0;
+    const adaptive = createAdaptiveState();
+    let currentRenderScale = 1;
+    let currentSpawnScale = 1;
+    let currentExposure = clampExposure(exposure);
+    const frameUniforms = { exposure: currentExposure };
+    let keepClear = KEEP_CLEAR_DESKTOP;
+    const paletteRgb = resolvePalette(palette);
+    const prefersReduced = respectReducedMotion && typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const lowPower = detectLowPower();
+    let ambientOn = ambient && !prefersReduced;
+    let ambientLevel = Math.max(0, Math.min(1, ambientIntensity));
+    const hueState = { i: 0, dir: 1 };
+    let ambientElapsed = 0;
+    let nextInterval = poissonIntervalMs(2200, Math.random, 900, 5200);
+    let ambientInFlight = 0;
+    const pendingDoubles = [];
+    let isVisible = true;
+    let observer = null;
+    let resizeObs = null;
+    let wired = false;
+    let pointerBound = false;
+    let recovering = false;
+    let recoveryUsed = false;
+    let restoreTimer = 0;
+    function updateAspect() {
+      if (!sim || !canvas) return;
+      const w = canvas.clientWidth || 1;
+      const h = canvas.clientHeight || 1;
+      sim.setAspect(w / h);
+    }
+    function currentAspect() {
+      return (canvas.clientWidth || 1) / (canvas.clientHeight || 1);
+    }
+    const SELF_DRAWING = ["peony", "willow", "ring", "heart", "star"];
+    const ambientMix = (ambientShells ?? []).filter((k) => SELF_DRAWING.includes(k));
+    function pickShell() {
+      const r = Math.random();
+      if (r < 0.62) return "peony";
+      if (r < 0.82) return "willow";
+      return "ring";
+    }
+    function pickAmbientShell() {
+      if (ambientMix.length) return ambientMix[Math.floor(Math.random() * ambientMix.length)];
+      return pickShell();
+    }
+    function ambientColor() {
+      return shellHueColor(nextShellHue(hueState), paletteRgb, SHELL_JITTER_DEG, Math.random);
+    }
+    function ambientScale(shell, level) {
+      const raw = 0.7 + 0.4 * level;
+      const ceiling = AMBIENT_RADIUS_MAX / SHELL[shell].radius[1];
+      return Math.min(raw, ceiling);
+    }
+    function doAmbientLaunch(mirror) {
+      if (!sim || ambientInFlight >= MAX_AMBIENT_INFLIGHT_HARD) return;
+      let picked = sampleZone(AMBIENT_ZONES, Math.random, keepClear);
+      let apex = picked.apex;
+      if (mirror) {
+        const mirrored = { x: 1 - picked.apex.x, y: picked.apex.y };
+        if (keepClear && rectExpandedContains(keepClear, mirrored.x, mirrored.y)) {
+          picked = sampleZone(AMBIENT_ZONES, Math.random, keepClear);
+          apex = picked.apex;
+        } else {
+          apex = mirrored;
+        }
+      }
+      const shell = pickAmbientShell();
+      const res = sim.launch({
+        apex,
+        shell,
+        color: ambientColor(),
+        depth: picked.depth,
+        scale: ambientScale(shell, ambientLevel),
+        intensity: "ambient"
+      });
+      ambientInFlight++;
+      window.setTimeout(() => {
+        ambientInFlight = Math.max(0, ambientInFlight - 1);
+      }, res.breakMs + 200);
+    }
+    function ambientTick(dtMs) {
+      if (!ambientOn) return;
+      for (let i = pendingDoubles.length - 1; i >= 0; i--) {
+        const pending = pendingDoubles[i];
+        pending.at -= dtMs;
+        if (pending.at <= 0) {
+          doAmbientLaunch(pending.mirror);
+          pendingDoubles.splice(i, 1);
+        }
+      }
+      ambientElapsed += dtMs;
+      if (ambientElapsed >= nextInterval && ambientInFlight < MAX_AMBIENT_INFLIGHT_SOFT) {
+        doAmbientLaunch(false);
+        ambientElapsed = 0;
+        nextInterval = poissonIntervalMs(2200, Math.random, 900, 5200);
+        if (Math.random() < 0.18) {
+          pendingDoubles.push({ at: 120 + Math.random() * 200, mirror: true });
+        }
+      }
+    }
+    function applyAdaptiveLevel() {
+      const level = adaptiveLevel(adaptive);
+      if (level.renderScale !== currentRenderScale) {
+        currentRenderScale = level.renderScale;
+        engine?.setRenderScale(currentRenderScale);
+      }
+      if (level.spawnScale !== currentSpawnScale) {
+        currentSpawnScale = level.spawnScale;
+        sim?.setSpawnScale(currentSpawnScale);
+      }
+      if (isDev()) {
+        console.info(
+          `[FireworksHdr] adaptive downgrade → step ${adaptive.step} (renderScale ${currentRenderScale}, spawnScale ${currentSpawnScale})`
+        );
+      }
+    }
+    function loop(now) {
+      if (!running || disposed || !sim || !engine || !instances) return;
+      if (engine.lost) {
+        handleEngineLoss();
+        return;
+      }
+      const rawFrameMs = now - lastTime;
+      const dt = Math.min((now - lastTime) / 1e3, DT_CLAMP);
+      lastTime = now;
+      ambientTick(dt * 1e3);
+      engine.resizeIfNeeded();
+      sim.step(dt);
+      const n = sim.writeInstances(instances);
+      frameUniforms.exposure = currentExposure;
+      engine.frame(dt, instances, n, frameUniforms);
+      if (n > 0 && !document.hidden && adaptiveDowngradeStep(adaptive, rawFrameMs)) {
+        applyAdaptiveLevel();
+      }
+      rafId = requestAnimationFrame(loop);
+    }
+    function startLoop() {
+      if (running) return;
+      running = true;
+      lastTime = performance.now();
+      rafId = requestAnimationFrame(loop);
+    }
+    function stopLoop() {
+      running = false;
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = 0;
+    }
+    function handlePointerDown(e) {
+      if (!sim) return;
+      const rect = canvas.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) return;
+      const x = (e.clientX - rect.left) / rect.width;
+      const y = (e.clientY - rect.top) / rect.height;
+      if (x < 0 || x > 1 || y < 0 || y > 1) return;
+      sim.launch({
+        apex: { x, y },
+        shell: pickShell(),
+        color: ambientColor(),
+        intensity: "ambient"
+      });
+    }
+    function handleVisibility() {
+      if (document.hidden) stopLoop();
+      else if (isVisible && !disposed && sim) startLoop();
+    }
+    function buildHandle(level) {
+      return {
+        launch(o) {
+          if (!sim) return { flightMs: 0, breakMs: 0 };
+          return sim.launch(o);
+        },
+        setAmbient(on, intensity) {
+          ambientOn = on && !prefersReduced;
+          if (intensity !== void 0) ambientLevel = Math.max(0, Math.min(1, intensity));
+        },
+        setKeepClear(rect) {
+          keepClear = rect;
+          sim?.setKeepClear(rect);
+        },
+        setExposure(v) {
+          currentExposure = clampExposure(v);
+        },
+        renderLevel: level,
+        cleanup: teardown
+      };
+    }
+    function teardown() {
+      disposed = true;
+      stopLoop();
+      observer?.disconnect();
+      resizeObs?.disconnect();
+      if (pointerBound) {
+        window.removeEventListener("pointerdown", handlePointerDown);
+        pointerBound = false;
+      }
+      document.removeEventListener("visibilitychange", handleVisibility);
+      canvas.removeEventListener("webglcontextrestored", onContextRestored);
+      if (restoreTimer) window.clearTimeout(restoreTimer);
+      restoreTimer = 0;
+      wired = false;
+      engine?.destroy();
+      engine = null;
+      sim = null;
+      instances = null;
+    }
+    function releaseEngine() {
+      stopLoop();
+      engine?.destroy();
+      engine = null;
+      sim = null;
+      instances = null;
+    }
+    function giveUp() {
+      if (disposed) return;
+      teardown();
+      handleLost();
+    }
+    async function reboot() {
+      recovering = true;
+      let revived = false;
+      try {
+        revived = await boot();
+      } catch (error) {
+        if (isDev()) {
+          console.warn("[FireworksHdr] engine reboot failed:", error);
+        }
+      }
+      recovering = false;
+      if (!revived && !disposed) giveUp();
+    }
+    function onContextRestored() {
+      if (restoreTimer) window.clearTimeout(restoreTimer);
+      restoreTimer = 0;
+      if (disposed) return;
+      void reboot();
+    }
+    function handleEngineLoss() {
+      if (disposed || recovering) return;
+      const wasWebgl = engine ? engine.renderLevel.startsWith("webgl") : false;
+      releaseEngine();
+      if (recoveryUsed) {
+        giveUp();
+        return;
+      }
+      recoveryUsed = true;
+      if (wasWebgl) {
+        recovering = true;
+        canvas.addEventListener("webglcontextrestored", onContextRestored, { once: true });
+        restoreTimer = window.setTimeout(() => {
+          restoreTimer = 0;
+          canvas.removeEventListener("webglcontextrestored", onContextRestored);
+          recovering = false;
+          giveUp();
+        }, RESTORE_TIMEOUT_MS);
+      } else {
+        void reboot();
+      }
+    }
+    function activate(eng) {
+      engine = eng;
+      const level = eng.renderLevel;
+      const minDim = Math.min(canvas.clientWidth, canvas.clientHeight);
+      const q = resolveQualityTier(qualityRef.current, level, currentDpr(), minDim, lowPower);
+      sim = createSim({
+        quality: q,
+        aspect: currentAspect(),
+        palette: paletteRgb
+      });
+      sim.setKeepClear(keepClear);
+      instances = new Float32Array(sim.capacity * 8);
+      if (!wired) {
+        observer = new IntersectionObserver(
+          ([entry]) => {
+            isVisible = entry.isIntersecting;
+            if (isVisible && !document.hidden && !disposed) startLoop();
+            else stopLoop();
+          },
+          { threshold: 0 }
+        );
+        observer.observe(canvas);
+        resizeObs = new ResizeObserver(() => {
+          updateAspect();
+          engine?.resizeIfNeeded();
+        });
+        resizeObs.observe(canvas);
+        if (interactiveRef.current) {
+          window.addEventListener("pointerdown", handlePointerDown);
+          pointerBound = true;
+        }
+        document.addEventListener("visibilitychange", handleVisibility);
+        wired = true;
+      }
+      updateAspect();
+      startLoop();
+      handleReady(buildHandle(level));
+    }
+    async function boot() {
+      let eng = null;
+      if (typeof navigator !== "undefined" && "gpu" in navigator) {
+        eng = await startWebGpuFireworks(canvas, {
+          maxInstances: MAX_INSTANCES,
+          renderScale: 1,
+          exposure: currentExposure
+        }).catch((error) => {
+          if (isDev()) {
+            console.warn("[FireworksHdr] WebGPU start failed:", error);
+          }
+          return null;
+        });
+      }
+      if (disposed) {
+        eng?.destroy();
+        return false;
+      }
+      if (!eng) {
+        const minDim = Math.min(canvas.clientWidth, canvas.clientHeight);
+        const webglTier = resolveQualityTier(
+          qualityRef.current,
+          "webgl-p3",
+          currentDpr(),
+          minDim,
+          lowPower
+        );
+        eng = startWebGl2Fireworks(canvas, {
+          maxInstances: QUALITY[webglTier].maxParticles,
+          renderScale: 1
+        });
+        if (disposed) {
+          eng?.destroy();
+          return false;
+        }
+      }
+      if (!eng) return false;
+      activate(eng);
+      return true;
+    }
+    if (hdr) {
+      boot().catch((error) => {
+        if (isDev()) {
+          console.warn("[FireworksHdr] engine boot failed:", error);
+        }
+        return false;
+      });
+    }
+    return teardown;
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("pointer-events-none absolute inset-0 h-full w-full", className),
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "block h-full w-full" })
+    }
+  );
+}
+export {
+  FireworksHdr
+};

package/dist/components/fireworks-hdr/dev.d.ts

@@ -0,0 +1 @@
+export declare function isDev(): boolean;

package/dist/components/fireworks-hdr/dev.js

@@ -0,0 +1,8 @@
+"use client";
+function isDev() {
+  const env = globalThis.process?.env;
+  return env?.NODE_ENV !== void 0 && env.NODE_ENV !== "production";
+}
+export {
+  isDev
+};