@hdcodedev/snowfall 1.0.1 → 1.0.2

package/dist/index.js

@@ -1,10 +1,8 @@
 "use strict";
 "use client";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -18,25 +16,672 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  DEFAULT_PHYSICS: () => import_SnowfallProvider.DEFAULT_PHYSICS,
-  Snowfall: () => import_Snowfall.default,
-  SnowfallProvider: () => import_SnowfallProvider.SnowfallProvider,
-  useSnowfall: () => import_SnowfallProvider.useSnowfall
+  DEFAULT_PHYSICS: () => DEFAULT_PHYSICS,
+  Snowfall: () => Snowfall,
+  SnowfallProvider: () => SnowfallProvider,
+  useSnowfall: () => useSnowfall
 });
 module.exports = __toCommonJS(index_exports);
-var import_Snowfall = __toESM(require("./Snowfall"));
-var import_SnowfallProvider = require("./SnowfallProvider");
+
+// src/Snowfall.tsx
+var import_react2 = require("react");
+
+// src/SnowfallProvider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_PHYSICS = {
+  MAX_FLAKES: 500,
+  MELT_SPEED: 5e-5,
+  WIND_STRENGTH: 0.8,
+  ACCUMULATION: {
+    SIDE_RATE: 1.2,
+    TOP_RATE: 1.9,
+    BOTTOM_RATE: 1.2
+  },
+  MAX_DEPTH: {
+    TOP: 50,
+    BOTTOM: 25,
+    SIDE: 8
+  },
+  FLAKE_SIZE: {
+    MIN: 0.5,
+    MAX: 2.5
+  }
+};
+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 toggleSnow = () => {
+    setIsEnabled((prev) => !prev);
+  };
+  const updatePhysicsConfig = (config) => {
+    setPhysicsConfig((prev) => ({
+      ...prev,
+      ...config,
+      ACCUMULATION: {
+        ...prev.ACCUMULATION,
+        ...config.ACCUMULATION || {}
+      },
+      MAX_DEPTH: {
+        ...prev.MAX_DEPTH,
+        ...config.MAX_DEPTH || {}
+      },
+      FLAKE_SIZE: {
+        ...prev.FLAKE_SIZE,
+        ...config.FLAKE_SIZE || {}
+      }
+    }));
+  };
+  const resetPhysics = () => {
+    setPhysicsConfig(DEFAULT_PHYSICS);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SnowfallContext.Provider, { value: {
+    isEnabled,
+    toggleSnow,
+    physicsConfig,
+    updatePhysicsConfig,
+    resetPhysics
+  }, children });
+}
+function useSnowfall() {
+  const context = (0, import_react.useContext)(SnowfallContext);
+  if (context === void 0) {
+    throw new Error("useSnowfall must be used within a SnowfallProvider");
+  }
+  return context;
+}
+
+// src/utils/snowfall/constants.ts
+var ATTR_SNOWFALL = "data-snowfall";
+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 AUTO_DETECT_TAGS = ["header", "footer", "article", "section", "aside", "nav"];
+var AUTO_DETECT_ROLES = ['[role="banner"]', '[role="contentinfo"]', '[role="main"]'];
+var AUTO_DETECT_CLASSES = [
+  ".card",
+  '[class*="card"]',
+  '[class*="Card"]',
+  '[class*="bg-"]',
+  '[class*="shadow-"]',
+  '[class*="rounded-"]'
+];
+var getElementType = (el) => {
+  const tagName = el.tagName.toLowerCase();
+  if (BOTTOM_TAGS.includes(tagName)) return VAL_BOTTOM;
+  const role = el.getAttribute("role");
+  if (role && BOTTOM_ROLES.includes(role)) return VAL_BOTTOM;
+  return VAL_TOP;
+};
+var shouldAccumulate = (el) => {
+  if (el.getAttribute(ATTR_SNOWFALL) === VAL_IGNORE) return false;
+  if (el.hasAttribute(ATTR_SNOWFALL)) return true;
+  const styles = window.getComputedStyle(el);
+  const rect = el.getBoundingClientRect();
+  const isVisible = styles.display !== "none" && styles.visibility !== "hidden" && parseFloat(styles.opacity) > 0.1;
+  if (!isVisible) return false;
+  const bgColor = styles.backgroundColor;
+  const hasBackground = bgColor !== "rgba(0, 0, 0, 0)" && bgColor !== "transparent";
+  const hasBorder = parseFloat(styles.borderWidth) > 0 || styles.borderStyle !== "none";
+  const hasBoxShadow = styles.boxShadow !== "none";
+  const hasBorderRadius = parseFloat(styles.borderRadius) > 0;
+  return hasBackground || hasBorder || hasBoxShadow || hasBorderRadius;
+};
+var getAccumulationSurfaces = () => {
+  const surfaces = [];
+  const seen = /* @__PURE__ */ new Set();
+  const candidates = document.querySelectorAll(
+    [
+      `[${ATTR_SNOWFALL}]`,
+      ...AUTO_DETECT_TAGS,
+      ...AUTO_DETECT_ROLES,
+      ...AUTO_DETECT_CLASSES
+    ].join(", ")
+  );
+  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 isVisible = styles.display !== "none" && styles.visibility !== "hidden" && parseFloat(styles.opacity) > 0.1;
+    if (!isVisible && !isManuallyIncluded) return;
+    const hasSize = rect.width >= 100 && rect.height >= 50;
+    if (!hasSize && !isManuallyIncluded) return;
+    const isFullPageWrapper = rect.top <= 10 && rect.height >= window.innerHeight * 0.9;
+    const isBottomTag = BOTTOM_TAGS.includes(el.tagName.toLowerCase());
+    const isBottomRole = BOTTOM_ROLES.includes(el.getAttribute("role") || "");
+    const isBottomSurface = isBottomTag || isBottomRole || manualOverride === VAL_BOTTOM;
+    if (isFullPageWrapper && !isBottomSurface && !isManuallyIncluded) return;
+    let isFixed = false;
+    let currentEl = el;
+    while (currentEl && currentEl !== document.body) {
+      const style = window.getComputedStyle(currentEl);
+      if (style.position === "fixed" || style.position === "sticky") {
+        isFixed = true;
+        break;
+      }
+      currentEl = currentEl.parentElement;
+    }
+    if (shouldAccumulate(el)) {
+      let type = getElementType(el);
+      if (manualOverride === VAL_BOTTOM) {
+        type = VAL_BOTTOM;
+      } else if (manualOverride === VAL_TOP) {
+        type = VAL_TOP;
+      }
+      surfaces.push({ el, type, isFixed });
+      seen.add(el);
+    }
+  });
+  console.log(`[Snowfall] Auto-detection found ${surfaces.length} surfaces`);
+  return surfaces;
+};
+var getElementRects = (accumulationMap) => {
+  const elementRects = [];
+  for (const [el, acc] of accumulationMap.entries()) {
+    if (!el.isConnected) continue;
+    const rect = el.getBoundingClientRect();
+    const absoluteRect = {
+      left: rect.left + window.scrollX,
+      right: rect.right + window.scrollX,
+      top: rect.top + window.scrollY,
+      bottom: rect.bottom + window.scrollY,
+      width: rect.width,
+      height: rect.height,
+      x: rect.x,
+      // Note: these are strictly viewport relative in DOMRect usually, 
+      // but we just need consistent absolute coords for physics
+      y: rect.y,
+      toJSON: rect.toJSON
+    };
+    elementRects.push({ el, rect: absoluteRect, acc });
+  }
+  return elementRects;
+};
+
+// src/utils/snowfall/physics.ts
+var createSnowflake = (canvasWidth, config, isBackground = false) => {
+  if (isBackground) {
+    const sizeRatio = Math.random();
+    const radius = config.FLAKE_SIZE.MIN * 0.6 + sizeRatio * (config.FLAKE_SIZE.MAX - config.FLAKE_SIZE.MIN) * 0.4;
+    return {
+      x: Math.random() * canvasWidth,
+      y: window.scrollY - 5,
+      radius,
+      speed: radius * 0.3 + Math.random() * 0.2 + 0.2,
+      wind: (Math.random() - 0.5) * (config.WIND_STRENGTH * 0.625),
+      opacity: Math.random() * 0.2 + 0.2,
+      wobble: Math.random() * Math.PI * 2,
+      wobbleSpeed: Math.random() * 0.015 + 5e-3,
+      sizeRatio,
+      isBackground: true
+    };
+  } else {
+    const sizeRatio = Math.random();
+    const radius = config.FLAKE_SIZE.MIN + sizeRatio * (config.FLAKE_SIZE.MAX - config.FLAKE_SIZE.MIN);
+    return {
+      x: Math.random() * canvasWidth,
+      y: window.scrollY - 5,
+      radius,
+      speed: radius * 0.5 + Math.random() * 0.3 + 0.5,
+      wind: (Math.random() - 0.5) * config.WIND_STRENGTH,
+      opacity: Math.random() * 0.3 + 0.5,
+      wobble: Math.random() * Math.PI * 2,
+      wobbleSpeed: Math.random() * 0.02 + 0.01,
+      sizeRatio,
+      isBackground: false
+    };
+  }
+};
+var initializeAccumulation = (accumulationMap, config) => {
+  const elements = getAccumulationSurfaces();
+  for (const [el] of accumulationMap.entries()) {
+    if (!el.isConnected) {
+      accumulationMap.delete(el);
+    }
+  }
+  elements.forEach(({ el, type, isFixed }) => {
+    const existing = accumulationMap.get(el);
+    const rect = el.getBoundingClientRect();
+    const width = Math.ceil(rect.width);
+    const isBottom = type === VAL_BOTTOM;
+    if (existing && existing.heights.length === width) {
+      existing.type = type;
+      existing.isFixed = isFixed;
+      if (existing.borderRadius !== void 0) {
+        const styleBuffer = window.getComputedStyle(el);
+        existing.borderRadius = parseFloat(styleBuffer.borderTopLeftRadius) || 0;
+      }
+      return;
+    }
+    const height = Math.ceil(rect.height);
+    const baseMax = isBottom ? config.MAX_DEPTH.BOTTOM : config.MAX_DEPTH.TOP;
+    const styles = window.getComputedStyle(el);
+    const borderRadius = parseFloat(styles.borderTopLeftRadius) || 0;
+    let maxHeights = new Array(width);
+    for (let i = 0; i < width; i++) {
+      let edgeFactor = 1;
+      if (!isBottom && borderRadius > 0) {
+        if (i < borderRadius) {
+          edgeFactor = Math.pow(i / borderRadius, 1.2);
+        } else if (i > width - borderRadius) {
+          edgeFactor = Math.pow((width - i) / borderRadius, 1.2);
+        }
+      }
+      maxHeights[i] = baseMax * edgeFactor * (0.85 + Math.random() * 0.15);
+    }
+    const smoothPasses = 4;
+    for (let p = 0; p < smoothPasses; p++) {
+      const smoothed = [...maxHeights];
+      for (let i = 1; i < width - 1; i++) {
+        smoothed[i] = (maxHeights[i - 1] + maxHeights[i] + maxHeights[i + 1]) / 3;
+      }
+      maxHeights = smoothed;
+    }
+    accumulationMap.set(el, {
+      heights: existing?.heights.length === width ? existing.heights : new Array(width).fill(0),
+      maxHeights,
+      leftSide: existing?.leftSide.length === height ? existing.leftSide : new Array(height).fill(0),
+      rightSide: existing?.rightSide.length === height ? existing.rightSide : new Array(height).fill(0),
+      maxSideHeight: isBottom ? 0 : config.MAX_DEPTH.SIDE,
+      borderRadius,
+      type,
+      isFixed
+    });
+  });
+};
+var accumulateSide = (sideArray, rectHeight, localY, maxSideHeight, borderRadius, config) => {
+  const spread = 4;
+  const addHeight = config.ACCUMULATION.SIDE_RATE * (0.8 + Math.random() * 0.4);
+  for (let dy = -spread; dy <= spread; dy++) {
+    const y = localY + dy;
+    if (y >= 0 && y < sideArray.length) {
+      const inTop = y < borderRadius;
+      const inBottom = y > rectHeight - borderRadius;
+      if (borderRadius > 0 && (inTop || inBottom)) continue;
+      const normalizedDist = Math.abs(dy) / spread;
+      const falloff = (Math.cos(normalizedDist * Math.PI) + 1) / 2;
+      sideArray[y] = Math.min(maxSideHeight, sideArray[y] + addHeight * falloff);
+    }
+  }
+};
+var updateSnowflakes = (snowflakes, elementRects, config, dt, canvasWidth, canvasHeight) => {
+  for (let i = snowflakes.length - 1; i >= 0; i--) {
+    const flake = snowflakes[i];
+    flake.wobble += flake.wobbleSpeed * dt;
+    flake.x += (flake.wind + Math.sin(flake.wobble) * 0.5) * dt;
+    flake.y += (flake.speed + Math.cos(flake.wobble * 0.5) * 0.1) * dt;
+    let landed = false;
+    for (const { rect, acc } of elementRects) {
+      const isBottom = acc.type === VAL_BOTTOM;
+      if (!landed && acc.maxSideHeight > 0 && !isBottom) {
+        const isInVerticalBounds = flake.y >= rect.top && flake.y <= rect.bottom;
+        if (isInVerticalBounds) {
+          const localY = Math.floor(flake.y - rect.top);
+          const borderRadius = acc.borderRadius;
+          const isInTopCorner = localY < borderRadius;
+          const isInBottomCorner = localY > rect.height - borderRadius;
+          const isCorner = borderRadius > 0 && (isInTopCorner || isInBottomCorner);
+          if (flake.x >= rect.left - 5 && flake.x < rect.left + 3) {
+            if (!isCorner) {
+              accumulateSide(acc.leftSide, rect.height, localY, acc.maxSideHeight, borderRadius, config);
+              landed = true;
+            }
+          }
+          if (!landed && flake.x > rect.right - 3 && flake.x <= rect.right + 5) {
+            if (!isCorner) {
+              accumulateSide(acc.rightSide, rect.height, localY, acc.maxSideHeight, borderRadius, config);
+              landed = true;
+            }
+          }
+          if (landed) break;
+        }
+      }
+      if (flake.x >= rect.left && flake.x <= rect.right) {
+        const localX = Math.floor(flake.x - rect.left);
+        const currentHeight = acc.heights[localX] || 0;
+        const maxHeight = acc.maxHeights[localX] || 5;
+        const surfaceY = isBottom ? rect.bottom - currentHeight : rect.top - currentHeight;
+        if (flake.y >= surfaceY && flake.y < surfaceY + 10 && currentHeight < maxHeight) {
+          const shouldAccumulate2 = isBottom ? Math.random() < 0.15 : true;
+          if (shouldAccumulate2) {
+            const baseSpread = Math.ceil(flake.radius);
+            const spread = baseSpread + Math.floor(Math.random() * 2);
+            const accumRate = isBottom ? config.ACCUMULATION.BOTTOM_RATE : config.ACCUMULATION.TOP_RATE;
+            const centerOffset = Math.floor(Math.random() * 3) - 1;
+            for (let dx = -spread; dx <= spread; dx++) {
+              if (Math.random() < 0.15) continue;
+              const idx = localX + dx + centerOffset;
+              if (idx >= 0 && idx < acc.heights.length) {
+                const dist = Math.abs(dx);
+                const pixelMax = acc.maxHeights[idx] || 5;
+                const normDist = dist / spread;
+                const falloff = (Math.cos(normDist * Math.PI) + 1) / 2;
+                const baseAdd = 0.3 * falloff;
+                const randomFactor = 0.8 + Math.random() * 0.4;
+                const addHeight = baseAdd * randomFactor * accumRate;
+                if (acc.heights[idx] < pixelMax && addHeight > 0) {
+                  acc.heights[idx] = Math.min(pixelMax, acc.heights[idx] + addHeight);
+                }
+              }
+            }
+            if (isBottom) {
+              landed = true;
+              break;
+            }
+          }
+          if (!isBottom) {
+            landed = true;
+            break;
+          }
+        }
+      }
+    }
+    if (landed || flake.y > canvasHeight + 10 || flake.x < -20 || flake.x > canvasWidth + 20) {
+      snowflakes.splice(i, 1);
+    }
+  }
+};
+var meltAndSmoothAccumulation = (elementRects, config, dt) => {
+  for (const { acc } of elementRects) {
+    const meltRate = config.MELT_SPEED * dt;
+    const len = acc.heights.length;
+    if (len > 2) {
+      for (let i = 1; i < len - 1; i++) {
+        if (acc.heights[i] > 0.05) {
+          const avg = (acc.heights[i - 1] + acc.heights[i + 1]) / 2;
+          acc.heights[i] = acc.heights[i] * 0.99 + avg * 0.01;
+        }
+      }
+    }
+    for (let i = 0; i < acc.heights.length; i++) {
+      if (acc.heights[i] > 0) acc.heights[i] = Math.max(0, acc.heights[i] - meltRate);
+    }
+    for (let i = 0; i < acc.leftSide.length; i++) {
+      if (acc.leftSide[i] > 0) acc.leftSide[i] = Math.max(0, acc.leftSide[i] - meltRate);
+      if (acc.rightSide[i] > 0) acc.rightSide[i] = Math.max(0, acc.rightSide[i] - meltRate);
+    }
+  }
+};
+
+// src/utils/snowfall/draw.ts
+var drawSnowflake = (ctx, flake) => {
+  ctx.beginPath();
+  ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
+  ctx.fillStyle = `rgba(255, 255, 255, ${flake.opacity})`;
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(flake.x, flake.y, flake.radius * 1.5, 0, Math.PI * 2);
+  ctx.fillStyle = `rgba(255, 255, 255, ${flake.opacity * 0.2})`;
+  ctx.fill();
+};
+var drawAccumulations = (ctx, fixedCtx, elementRects) => {
+  const setupCtx = (c) => {
+    c.fillStyle = "rgba(255, 255, 255, 0.95)";
+    c.shadowColor = "rgba(200, 230, 255, 0.6)";
+    c.shadowBlur = 4;
+    c.shadowOffsetY = -1;
+  };
+  setupCtx(ctx);
+  if (fixedCtx) setupCtx(fixedCtx);
+  const scrollX = window.scrollX;
+  const scrollY = window.scrollY;
+  for (const { rect, acc } of elementRects) {
+    if (!acc.heights.some((h) => h > 0.1)) continue;
+    const useFixed = acc.isFixed && fixedCtx;
+    const targetCtx = useFixed ? fixedCtx : ctx;
+    const dx = useFixed ? -scrollX : 0;
+    const dy = useFixed ? -scrollY : 0;
+    const isBottom = acc.type === VAL_BOTTOM;
+    const baseY = isBottom ? rect.bottom - 1 : rect.top + 1;
+    const borderRadius = acc.borderRadius;
+    const getCurveOffset = (xPos) => {
+      if (borderRadius <= 0 || isBottom) return 0;
+      let offset = 0;
+      if (xPos < borderRadius) {
+        const dist = borderRadius - xPos;
+        offset = borderRadius - Math.sqrt(Math.max(0, borderRadius * borderRadius - dist * dist));
+      } else if (xPos > rect.width - borderRadius) {
+        const dist = xPos - (rect.width - borderRadius);
+        offset = borderRadius - Math.sqrt(Math.max(0, borderRadius * borderRadius - dist * dist));
+      }
+      return offset;
+    };
+    targetCtx.beginPath();
+    let first = true;
+    const step = 2;
+    const len = acc.heights.length;
+    for (let x = 0; x < len; x += step) {
+      const height = acc.heights[x] || 0;
+      const px = rect.left + x + dx;
+      const py = baseY - height + getCurveOffset(x) + dy;
+      if (first) {
+        targetCtx.moveTo(px, py);
+        first = false;
+      } else {
+        targetCtx.lineTo(px, py);
+      }
+    }
+    if ((len - 1) % step !== 0) {
+      const x = len - 1;
+      const height = acc.heights[x] || 0;
+      const px = rect.left + x + dx;
+      const py = baseY - height + getCurveOffset(x) + dy;
+      targetCtx.lineTo(px, py);
+    }
+    for (let x = len - 1; x >= 0; x -= step) {
+      const px = rect.left + x + dx;
+      const py = baseY + getCurveOffset(x) + dy;
+      targetCtx.lineTo(px, py);
+    }
+    const startX = 0;
+    const startPx = rect.left + startX + dx;
+    const startPy = baseY + getCurveOffset(startX) + dy;
+    targetCtx.lineTo(startPx, startPy);
+    targetCtx.closePath();
+    targetCtx.fill();
+  }
+  ctx.shadowBlur = 0;
+  ctx.shadowOffsetY = 0;
+  if (fixedCtx) {
+    fixedCtx.shadowBlur = 0;
+    fixedCtx.shadowOffsetY = 0;
+  }
+};
+var drawSideAccumulations = (ctx, fixedCtx, elementRects) => {
+  const setupCtx = (c) => {
+    c.fillStyle = "rgba(255, 255, 255, 0.95)";
+    c.shadowColor = "rgba(200, 230, 255, 0.6)";
+    c.shadowBlur = 3;
+  };
+  setupCtx(ctx);
+  if (fixedCtx) setupCtx(fixedCtx);
+  const scrollX = window.scrollX;
+  const scrollY = window.scrollY;
+  for (const { rect, acc } of elementRects) {
+    if (acc.maxSideHeight === 0) continue;
+    const hasLeftSnow = acc.leftSide.some((h) => h > 0.3);
+    const hasRightSnow = acc.rightSide.some((h) => h > 0.3);
+    if (!hasLeftSnow && !hasRightSnow) continue;
+    const useFixed = acc.isFixed && fixedCtx;
+    const targetCtx = useFixed ? fixedCtx : ctx;
+    const dx = useFixed ? -scrollX : 0;
+    const dy = useFixed ? -scrollY : 0;
+    const drawSide = (sideArray, isLeft) => {
+      targetCtx.beginPath();
+      const baseX = isLeft ? rect.left : rect.right;
+      targetCtx.moveTo(baseX + dx, rect.top + dy);
+      for (let y = 0; y < sideArray.length; y += 2) {
+        const width = sideArray[y] || 0;
+        const nextY = Math.min(y + 2, sideArray.length - 1);
+        const nextWidth = sideArray[nextY] || 0;
+        const py = rect.top + y + dy;
+        const px = (isLeft ? baseX - width : baseX + width) + dx;
+        const ny = rect.top + nextY + dy;
+        const nx = (isLeft ? baseX - nextWidth : baseX + nextWidth) + dx;
+        targetCtx.lineTo(px, py);
+        targetCtx.lineTo(nx, ny);
+      }
+      targetCtx.lineTo(baseX + dx, rect.bottom + dy);
+      targetCtx.closePath();
+      targetCtx.fill();
+    };
+    if (hasLeftSnow) drawSide(acc.leftSide, true);
+    if (hasRightSnow) drawSide(acc.rightSide, false);
+  }
+  ctx.shadowBlur = 0;
+  if (fixedCtx) fixedCtx.shadowBlur = 0;
+};
+
+// src/Snowfall.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Snowfall() {
+  const { isEnabled, physicsConfig } = useSnowfall();
+  const isEnabledRef = (0, import_react2.useRef)(isEnabled);
+  const physicsConfigRef = (0, import_react2.useRef)(physicsConfig);
+  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);
+  (0, import_react2.useEffect)(() => {
+    setIsMounted(true);
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    isEnabledRef.current = isEnabled;
+  }, [isEnabled]);
+  (0, import_react2.useEffect)(() => {
+    physicsConfigRef.current = physicsConfig;
+  }, [physicsConfig]);
+  (0, import_react2.useEffect)(() => {
+    if (!isMounted) return;
+    const canvas = canvasRef.current;
+    const fixedCanvas = fixedCanvasRef.current;
+    if (!canvas || !fixedCanvas) return;
+    const ctx = canvas.getContext("2d");
+    const fixedCtx = fixedCanvas.getContext("2d");
+    if (!ctx || !fixedCtx) return;
+    const resizeCanvas = () => {
+      if (canvasRef.current && fixedCanvasRef.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();
+    const resizeObserver = new ResizeObserver(() => {
+      resizeCanvas();
+    });
+    resizeObserver.observe(document.body);
+    snowflakesRef.current = [];
+    const initAccumulationWrapper = () => {
+      initializeAccumulation(accumulationRef.current, physicsConfigRef.current);
+    };
+    initAccumulationWrapper();
+    setIsVisible(true);
+    let lastTime = 0;
+    const animate = (currentTime) => {
+      if (lastTime === 0) {
+        lastTime = currentTime;
+        animationIdRef.current = requestAnimationFrame(animate);
+        return;
+      }
+      const deltaTime = Math.min(currentTime - lastTime, 50);
+      lastTime = currentTime;
+      const dt = deltaTime / 16.67;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      fixedCtx.clearRect(0, 0, fixedCanvas.width, fixedCanvas.height);
+      const snowflakes = snowflakesRef.current;
+      const elementRects = getElementRects(accumulationRef.current);
+      meltAndSmoothAccumulation(elementRects, physicsConfigRef.current, dt);
+      updateSnowflakes(snowflakes, elementRects, physicsConfigRef.current, dt, canvas.width, canvas.height);
+      for (const flake of snowflakes) {
+        drawSnowflake(ctx, flake);
+      }
+      if (isEnabledRef.current && snowflakes.length < physicsConfigRef.current.MAX_FLAKES) {
+        const isBackground = Math.random() < 0.4;
+        snowflakes.push(createSnowflake(canvas.width, physicsConfigRef.current, isBackground));
+      }
+      drawAccumulations(ctx, fixedCtx, elementRects);
+      drawSideAccumulations(ctx, fixedCtx, elementRects);
+      animationIdRef.current = requestAnimationFrame(animate);
+    };
+    animationIdRef.current = requestAnimationFrame(animate);
+    const handleResize = () => {
+      resizeCanvas();
+      accumulationRef.current.clear();
+      initAccumulationWrapper();
+    };
+    window.addEventListener("resize", handleResize);
+    const checkInterval = setInterval(initAccumulationWrapper, 3e3);
+    return () => {
+      cancelAnimationFrame(animationIdRef.current);
+      window.removeEventListener("resize", handleResize);
+      clearInterval(checkInterval);
+      resizeObserver.disconnect();
+    };
+  }, [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"
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEFAULT_PHYSICS,