@hdcodedev/snowfall 1.0.3 → 1.0.5

package/dist/index.js

@@ -22,6 +22,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   DEFAULT_PHYSICS: () => DEFAULT_PHYSICS,
+  DebugPanel: () => DebugPanel,
   Snowfall: () => Snowfall,
   SnowfallProvider: () => SnowfallProvider,
   useSnowfall: () => useSnowfall
@@ -57,9 +58,14 @@ var SnowfallContext = (0, import_react.createContext)(void 0);
 function SnowfallProvider({ children }) {
   const [isEnabled, setIsEnabled] = (0, import_react.useState)(true);
   const [physicsConfig, setPhysicsConfig] = (0, import_react.useState)(DEFAULT_PHYSICS);
+  const [debugMode, setDebugMode] = (0, import_react.useState)(false);
+  const [metrics, setMetrics] = (0, import_react.useState)(null);
   const toggleSnow = () => {
     setIsEnabled((prev) => !prev);
   };
+  const toggleDebug = () => {
+    setDebugMode((prev) => !prev);
+  };
   const updatePhysicsConfig = (config) => {
     setPhysicsConfig((prev) => ({
       ...prev,
@@ -86,7 +92,11 @@ function SnowfallProvider({ children }) {
     toggleSnow,
     physicsConfig,
     updatePhysicsConfig,
-    resetPhysics
+    resetPhysics,
+    debugMode,
+    toggleDebug,
+    metrics,
+    setMetrics
   }, children });
 }
 function useSnowfall() {
@@ -103,13 +113,11 @@ var VAL_IGNORE = "ignore";
 var VAL_TOP = "top";
 var VAL_BOTTOM = "bottom";
 var TAG_HEADER = "header";
-var TAG_FOOTER = "footer";
 var ROLE_BANNER = "banner";
-var ROLE_CONTENTINFO = "contentinfo";
 
 // src/utils/snowfall/dom.ts
-var BOTTOM_TAGS = [TAG_HEADER, TAG_FOOTER];
-var BOTTOM_ROLES = [ROLE_BANNER, ROLE_CONTENTINFO];
+var BOTTOM_TAGS = [TAG_HEADER];
+var BOTTOM_ROLES = [ROLE_BANNER];
 var AUTO_DETECT_TAGS = ["header", "footer", "article", "section", "aside", "nav"];
 var AUTO_DETECT_ROLES = ['[role="banner"]', '[role="contentinfo"]', '[role="main"]'];
 var AUTO_DETECT_CLASSES = [
@@ -120,6 +128,18 @@ var AUTO_DETECT_CLASSES = [
   '[class*="shadow-"]',
   '[class*="rounded-"]'
 ];
+var styleCache = /* @__PURE__ */ new Map();
+var getCachedStyle = (el) => {
+  let cached = styleCache.get(el);
+  if (!cached) {
+    cached = window.getComputedStyle(el);
+    styleCache.set(el, cached);
+  }
+  return cached;
+};
+var clearStyleCache = () => {
+  styleCache.clear();
+};
 var getElementType = (el) => {
   const tagName = el.tagName.toLowerCase();
   if (BOTTOM_TAGS.includes(tagName)) return VAL_BOTTOM;
@@ -142,6 +162,7 @@ var shouldAccumulate = (el) => {
   return hasBackground || hasBorder || hasBoxShadow || hasBorderRadius;
 };
 var getAccumulationSurfaces = () => {
+  clearStyleCache();
   const surfaces = [];
   const seen = /* @__PURE__ */ new Set();
   const candidates = document.querySelectorAll(
@@ -154,13 +175,13 @@ var getAccumulationSurfaces = () => {
   );
   candidates.forEach((el) => {
     if (seen.has(el)) return;
-    const rect = el.getBoundingClientRect();
     const manualOverride = el.getAttribute(ATTR_SNOWFALL);
     if (manualOverride === VAL_IGNORE) return;
     const isManuallyIncluded = manualOverride !== null;
-    const styles = window.getComputedStyle(el);
+    const styles = getCachedStyle(el);
     const isVisible = styles.display !== "none" && styles.visibility !== "hidden" && parseFloat(styles.opacity) > 0.1;
     if (!isVisible && !isManuallyIncluded) return;
+    const rect = el.getBoundingClientRect();
     const hasSize = rect.width >= 100 && rect.height >= 50;
     if (!hasSize && !isManuallyIncluded) return;
     const isFullPageWrapper = rect.top <= 10 && rect.height >= window.innerHeight * 0.9;
@@ -171,7 +192,7 @@ var getAccumulationSurfaces = () => {
     let isFixed = false;
     let currentEl = el;
     while (currentEl && currentEl !== document.body) {
-      const style = window.getComputedStyle(currentEl);
+      const style = getCachedStyle(currentEl);
       if (style.position === "fixed" || style.position === "sticky") {
         isFixed = true;
         break;
@@ -190,6 +211,7 @@ var getAccumulationSurfaces = () => {
     }
   });
   console.log(`[Snowfall] Auto-detection found ${surfaces.length} surfaces`);
+  console.log("[Snowfall] \u2705 Using OPTIMIZED version with Map-based caching & 5s intervals");
   return surfaces;
 };
 var getElementRects = (accumulationMap) => {
@@ -531,10 +553,14 @@ var drawSideAccumulations = (ctx, fixedCtx, elementRects) => {
         const width = sideArray[y] || 0;
         const nextY = Math.min(y + 2, sideArray.length - 1);
         const nextWidth = sideArray[nextY] || 0;
+        const heightRatio = y / sideArray.length;
+        const gravityMultiplier = Math.pow(heightRatio, 1.5);
         const py = rect.top + y + dy;
-        const px = (isLeft ? baseX - width : baseX + width) + dx;
+        const px = (isLeft ? baseX - width * gravityMultiplier : baseX + width * gravityMultiplier) + dx;
         const ny = rect.top + nextY + dy;
-        const nx = (isLeft ? baseX - nextWidth : baseX + nextWidth) + dx;
+        const nRatio = nextY / sideArray.length;
+        const nGravityMultiplier = Math.pow(nRatio, 1.5);
+        const nx = (isLeft ? baseX - nextWidth * nGravityMultiplier : baseX + nextWidth * nGravityMultiplier) + dx;
         targetCtx.lineTo(px, py);
         targetCtx.lineTo(nx, ny);
       }
@@ -552,16 +578,26 @@ var drawSideAccumulations = (ctx, fixedCtx, elementRects) => {
 // src/Snowfall.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function Snowfall() {
-  const { isEnabled, physicsConfig } = useSnowfall();
+  const { isEnabled, physicsConfig, setMetrics } = useSnowfall();
   const isEnabledRef = (0, import_react2.useRef)(isEnabled);
   const physicsConfigRef = (0, import_react2.useRef)(physicsConfig);
+  const setMetricsRef = (0, import_react2.useRef)(setMetrics);
   const [isMounted, setIsMounted] = (0, import_react2.useState)(false);
   const [isVisible, setIsVisible] = (0, import_react2.useState)(false);
   const canvasRef = (0, import_react2.useRef)(null);
-  const fixedCanvasRef = (0, import_react2.useRef)(null);
   const snowflakesRef = (0, import_react2.useRef)([]);
   const accumulationRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
   const animationIdRef = (0, import_react2.useRef)(0);
+  const fpsFrames = (0, import_react2.useRef)([]);
+  const metricsRef = (0, import_react2.useRef)({
+    scanTime: 0,
+    rectUpdateTime: 0,
+    frameTime: 0,
+    rafGap: 0,
+    clearTime: 0,
+    physicsTime: 0,
+    drawTime: 0
+  });
   (0, import_react2.useEffect)(() => {
     setIsMounted(true);
   }, []);
@@ -571,26 +607,23 @@ function Snowfall() {
   (0, import_react2.useEffect)(() => {
     physicsConfigRef.current = physicsConfig;
   }, [physicsConfig]);
+  (0, import_react2.useEffect)(() => {
+    setMetricsRef.current = setMetrics;
+  }, [setMetrics]);
   (0, import_react2.useEffect)(() => {
     if (!isMounted) return;
     const canvas = canvasRef.current;
-    const fixedCanvas = fixedCanvasRef.current;
-    if (!canvas || !fixedCanvas) return;
+    if (!canvas) return;
     const ctx = canvas.getContext("2d");
-    const fixedCtx = fixedCanvas.getContext("2d");
-    if (!ctx || !fixedCtx) return;
+    if (!ctx) return;
     const resizeCanvas = () => {
-      if (canvasRef.current && fixedCanvasRef.current) {
+      if (canvasRef.current) {
         const newHeight = Math.max(document.documentElement.scrollHeight, window.innerHeight);
         const newWidth = Math.max(document.documentElement.scrollWidth, window.innerWidth);
         if (canvasRef.current.height !== newHeight || canvasRef.current.width !== newWidth) {
           canvasRef.current.width = newWidth;
           canvasRef.current.height = newHeight;
         }
-        if (fixedCanvasRef.current.width !== window.innerWidth || fixedCanvasRef.current.height !== window.innerHeight) {
-          fixedCanvasRef.current.width = window.innerWidth;
-          fixedCanvasRef.current.height = window.innerHeight;
-        }
       }
     };
     resizeCanvas();
@@ -600,11 +633,16 @@ function Snowfall() {
     resizeObserver.observe(document.body);
     snowflakesRef.current = [];
     const initAccumulationWrapper = () => {
+      const scanStart = performance.now();
       initializeAccumulation(accumulationRef.current, physicsConfigRef.current);
+      metricsRef.current.scanTime = performance.now() - scanStart;
     };
     initAccumulationWrapper();
     setIsVisible(true);
     let lastTime = 0;
+    let lastRectUpdate = 0;
+    let lastMetricsUpdate = 0;
+    let cachedElementRects = [];
     const animate = (currentTime) => {
       if (lastTime === 0) {
         lastTime = currentTime;
@@ -612,14 +650,28 @@ function Snowfall() {
         return;
       }
       const deltaTime = Math.min(currentTime - lastTime, 50);
+      const now = performance.now();
+      fpsFrames.current.push(now);
+      fpsFrames.current = fpsFrames.current.filter((t) => now - t < 1e3);
+      metricsRef.current.rafGap = currentTime - lastTime;
       lastTime = currentTime;
       const dt = deltaTime / 16.67;
+      const frameStartTime = performance.now();
+      const clearStart = performance.now();
       ctx.clearRect(0, 0, canvas.width, canvas.height);
-      fixedCtx.clearRect(0, 0, fixedCanvas.width, fixedCanvas.height);
+      metricsRef.current.clearTime = performance.now() - clearStart;
       const snowflakes = snowflakesRef.current;
-      const elementRects = getElementRects(accumulationRef.current);
-      meltAndSmoothAccumulation(elementRects, physicsConfigRef.current, dt);
-      updateSnowflakes(snowflakes, elementRects, physicsConfigRef.current, dt, canvas.width, canvas.height);
+      if (currentTime - lastRectUpdate > 100) {
+        const rectStart = performance.now();
+        cachedElementRects = getElementRects(accumulationRef.current);
+        metricsRef.current.rectUpdateTime = performance.now() - rectStart;
+        lastRectUpdate = currentTime;
+      }
+      const physicsStart = performance.now();
+      meltAndSmoothAccumulation(cachedElementRects, physicsConfigRef.current, dt);
+      updateSnowflakes(snowflakes, cachedElementRects, physicsConfigRef.current, dt, canvas.width, canvas.height);
+      metricsRef.current.physicsTime = performance.now() - physicsStart;
+      const drawStart = performance.now();
       for (const flake of snowflakes) {
         drawSnowflake(ctx, flake);
       }
@@ -627,8 +679,26 @@ function Snowfall() {
         const isBackground = Math.random() < 0.4;
         snowflakes.push(createSnowflake(canvas.width, physicsConfigRef.current, isBackground));
       }
-      drawAccumulations(ctx, fixedCtx, elementRects);
-      drawSideAccumulations(ctx, fixedCtx, elementRects);
+      drawAccumulations(ctx, ctx, cachedElementRects);
+      drawSideAccumulations(ctx, ctx, cachedElementRects);
+      metricsRef.current.drawTime = performance.now() - drawStart;
+      metricsRef.current.frameTime = performance.now() - frameStartTime;
+      if (currentTime - lastMetricsUpdate > 500) {
+        setMetricsRef.current({
+          fps: fpsFrames.current.length,
+          frameTime: metricsRef.current.frameTime,
+          scanTime: metricsRef.current.scanTime,
+          rectUpdateTime: metricsRef.current.rectUpdateTime,
+          surfaceCount: accumulationRef.current.size,
+          flakeCount: snowflakes.length,
+          maxFlakes: physicsConfigRef.current.MAX_FLAKES,
+          rafGap: metricsRef.current.rafGap,
+          clearTime: metricsRef.current.clearTime,
+          physicsTime: metricsRef.current.physicsTime,
+          drawTime: metricsRef.current.drawTime
+        });
+        lastMetricsUpdate = currentTime;
+      }
       animationIdRef.current = requestAnimationFrame(animate);
     };
     animationIdRef.current = requestAnimationFrame(animate);
@@ -638,7 +708,7 @@ function Snowfall() {
       initAccumulationWrapper();
     };
     window.addEventListener("resize", handleResize);
-    const checkInterval = setInterval(initAccumulationWrapper, 3e3);
+    const checkInterval = setInterval(initAccumulationWrapper, 5e3);
     return () => {
       cancelAnimationFrame(animationIdRef.current);
       window.removeEventListener("resize", handleResize);
@@ -647,44 +717,202 @@ function Snowfall() {
     };
   }, [isMounted]);
   if (!isMounted) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "canvas",
-      {
-        ref: canvasRef,
-        style: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          pointerEvents: "none",
-          zIndex: 9999,
-          opacity: isVisible ? 1 : 0,
-          transition: "opacity 0.3s ease-in"
-        },
-        "aria-hidden": "true"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "canvas",
-      {
-        ref: fixedCanvasRef,
-        style: {
-          position: "fixed",
-          top: 0,
-          left: 0,
-          pointerEvents: "none",
-          zIndex: 9999,
-          opacity: isVisible ? 1 : 0,
-          transition: "opacity 0.3s ease-in"
-        },
-        "aria-hidden": "true"
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "canvas",
+    {
+      ref: canvasRef,
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        pointerEvents: "none",
+        zIndex: 9999,
+        opacity: isVisible ? 1 : 0,
+        transition: "opacity 0.3s ease-in",
+        willChange: "transform"
+      },
+      "aria-hidden": "true"
+    }
+  ) });
+}
+
+// src/DebugPanel.tsx
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function DebugPanel() {
+  const { debugMode, toggleDebug, metrics } = useSnowfall();
+  const [isMinimized, setIsMinimized] = (0, import_react3.useState)(false);
+  const [copied, setCopied] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      if (e.shiftKey && e.key === "D") {
+        toggleDebug();
       }
-    )
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleDebug]);
+  const copyToClipboard = () => {
+    if (metrics) {
+      const data = {
+        ...metrics,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        userAgent: navigator.userAgent,
+        canvasSize: {
+          width: window.innerWidth,
+          height: window.innerHeight
+        }
+      };
+      navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  };
+  if (!debugMode) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+    position: "fixed",
+    bottom: "20px",
+    left: "20px",
+    backgroundColor: "rgba(0, 0, 0, 0.9)",
+    color: "#0f0",
+    fontFamily: "monospace",
+    fontSize: "12px",
+    padding: isMinimized ? "10px" : "15px",
+    borderRadius: "8px",
+    zIndex: 1e4,
+    minWidth: isMinimized ? "auto" : "320px",
+    maxWidth: "400px",
+    border: "1px solid #0f0",
+    boxShadow: "0 4px 20px rgba(0, 255, 0, 0.3)"
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: isMinimized ? 0 : "10px"
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontWeight: "bold", color: "#0ff" }, children: "\u2744\uFE0F SNOWFALL DEBUG" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "10px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            onClick: () => setIsMinimized(!isMinimized),
+            style: {
+              background: "none",
+              border: "1px solid #0f0",
+              color: "#0f0",
+              cursor: "pointer",
+              padding: "2px 8px",
+              borderRadius: "4px",
+              fontSize: "10px"
+            },
+            children: isMinimized ? "\u25B2" : "\u25BC"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            onClick: toggleDebug,
+            style: {
+              background: "none",
+              border: "1px solid #f00",
+              color: "#f00",
+              cursor: "pointer",
+              padding: "2px 8px",
+              borderRadius: "4px",
+              fontSize: "10px"
+            },
+            children: "\u2715"
+          }
+        )
+      ] })
+    ] }),
+    !isMinimized && metrics && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "10px", paddingBottom: "10px", borderBottom: "1px solid #333" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { color: "#ff0", marginBottom: "5px", fontWeight: "bold" }, children: "\u26A1 PERFORMANCE" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+          "FPS: ",
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: metrics.fps < 30 ? "#f00" : metrics.fps < 50 ? "#ff0" : "#0f0" }, children: metrics.fps.toFixed(1) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+          "Frame Time: ",
+          metrics.frameTime.toFixed(2),
+          "ms"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { color: "#f80" }, children: [
+          "rAF Gap: ",
+          metrics.rafGap?.toFixed(1) || 0,
+          "ms ",
+          metrics.rafGap && metrics.rafGap > 20 ? "\u26A0\uFE0F THROTTLED!" : ""
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "10px", paddingBottom: "10px", borderBottom: "1px solid #333" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { color: "#ff0", marginBottom: "5px", fontWeight: "bold" }, children: "\u{1F52C} DETAILED TIMINGS" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+          "Clear: ",
+          metrics.clearTime?.toFixed(2) || 0,
+          "ms"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+          "Physics: ",
+          metrics.physicsTime?.toFixed(2) || 0,
+          "ms"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+          "Draw: ",
+          metrics.drawTime?.toFixed(2) || 0,
+          "ms"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+          "Scan: ",
+          metrics.scanTime.toFixed(2),
+          "ms"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+          "Rect Update: ",
+          metrics.rectUpdateTime.toFixed(2),
+          "ms"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "10px", paddingBottom: "10px", borderBottom: "1px solid #333" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { color: "#ff0", marginBottom: "5px", fontWeight: "bold" }, children: "\u{1F4CA} COUNTS" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+          "Snowflakes: ",
+          metrics.flakeCount,
+          " / ",
+          metrics.maxFlakes
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+          "Surfaces: ",
+          metrics.surfaceCount
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          onClick: copyToClipboard,
+          style: {
+            width: "100%",
+            padding: "8px",
+            background: copied ? "#0a0" : "#000",
+            border: copied ? "1px solid #0f0" : "1px solid #555",
+            color: "#0f0",
+            cursor: "pointer",
+            borderRadius: "4px",
+            fontSize: "11px",
+            fontFamily: "monospace"
+          },
+          children: copied ? "\u2713 COPIED!" : "\u{1F4CB} COPY METRICS"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { marginTop: "8px", fontSize: "10px", color: "#666", textAlign: "center" }, children: "Shift+D to toggle" })
+    ] })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEFAULT_PHYSICS,
+  DebugPanel,
   Snowfall,
   SnowfallProvider,
   useSnowfall