@hdcodedev/snowfall 1.0.5 → 1.0.7

package/dist/index.mjs

@@ -23,13 +23,14 @@ var DEFAULT_PHYSICS = {
   FLAKE_SIZE: {
     MIN: 0.5,
     MAX: 1.6
-  }
+  },
+  MAX_SURFACES: 15
 };
 var SnowfallContext = createContext(void 0);
-function SnowfallProvider({ children }) {
+function SnowfallProvider({ children, initialDebug = false }) {
   const [isEnabled, setIsEnabled] = useState(true);
   const [physicsConfig, setPhysicsConfig] = useState(DEFAULT_PHYSICS);
-  const [debugMode, setDebugMode] = useState(false);
+  const [debugMode, setDebugMode] = useState(initialDebug);
   const [metrics, setMetrics] = useState(null);
   const toggleSnow = () => {
     setIsEnabled((prev) => !prev);
@@ -84,13 +85,16 @@ 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";
+var TAU = Math.PI * 2;
 
 // src/utils/snowfall/dom.ts
 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_TAGS = [TAG_HEADER, TAG_FOOTER, "article", "section", "aside", "nav"];
+var AUTO_DETECT_ROLES = [`[role="${ROLE_BANNER}"]`, `[role="${ROLE_CONTENTINFO}"]`, '[role="main"]'];
 var AUTO_DETECT_CLASSES = [
   ".card",
   '[class*="card"]',
@@ -99,18 +103,6 @@ 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;
@@ -118,22 +110,21 @@ var getElementType = (el) => {
   if (role && BOTTOM_ROLES.includes(role)) return VAL_BOTTOM;
   return VAL_TOP;
 };
-var shouldAccumulate = (el) => {
+var shouldAccumulate = (el, precomputedStyle) => {
   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 styles = precomputedStyle || window.getComputedStyle(el);
   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 hasBorder = parseFloat(styles.borderWidth) > 0 && styles.borderColor !== "transparent" && styles.borderColor !== "rgba(0, 0, 0, 0)" && styles.borderStyle !== "none";
   const hasBoxShadow = styles.boxShadow !== "none";
-  const hasBorderRadius = parseFloat(styles.borderRadius) > 0;
-  return hasBackground || hasBorder || hasBoxShadow || hasBorderRadius;
+  const hasFilter = styles.filter !== "none" && styles.filter.includes("drop-shadow");
+  const hasBackdropFilter = styles.backdropFilter !== "none";
+  return hasBackground || hasBorder || hasBoxShadow || hasFilter || hasBackdropFilter;
 };
-var getAccumulationSurfaces = () => {
-  clearStyleCache();
+var getAccumulationSurfaces = (maxSurfaces = 5) => {
   const surfaces = [];
   const seen = /* @__PURE__ */ new Set();
   const candidates = document.querySelectorAll(
@@ -144,45 +135,31 @@ var getAccumulationSurfaces = () => {
       ...AUTO_DETECT_CLASSES
     ].join(", ")
   );
-  candidates.forEach((el) => {
-    if (seen.has(el)) return;
+  for (const el of candidates) {
+    if (surfaces.length >= maxSurfaces) break;
+    if (seen.has(el)) continue;
     const manualOverride = el.getAttribute(ATTR_SNOWFALL);
-    if (manualOverride === VAL_IGNORE) return;
+    if (manualOverride === VAL_IGNORE) continue;
     const isManuallyIncluded = manualOverride !== null;
-    const styles = getCachedStyle(el);
+    const styles = window.getComputedStyle(el);
     const isVisible = styles.display !== "none" && styles.visibility !== "hidden" && parseFloat(styles.opacity) > 0.1;
-    if (!isVisible && !isManuallyIncluded) return;
+    if (!isVisible && !isManuallyIncluded) continue;
     const rect = el.getBoundingClientRect();
     const hasSize = rect.width >= 100 && rect.height >= 50;
-    if (!hasSize && !isManuallyIncluded) return;
+    if (!hasSize && !isManuallyIncluded) continue;
     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 = getCachedStyle(currentEl);
-      if (style.position === "fixed" || style.position === "sticky") {
-        isFixed = true;
-        break;
-      }
-      currentEl = currentEl.parentElement;
-    }
-    if (shouldAccumulate(el)) {
+    if (isFullPageWrapper && !isBottomSurface && !isManuallyIncluded) continue;
+    if (shouldAccumulate(el, styles)) {
       let type = getElementType(el);
-      if (manualOverride === VAL_BOTTOM) {
-        type = VAL_BOTTOM;
-      } else if (manualOverride === VAL_TOP) {
-        type = VAL_TOP;
-      }
-      surfaces.push({ el, type, isFixed });
+      if (manualOverride === VAL_BOTTOM) type = VAL_BOTTOM;
+      else if (manualOverride === VAL_TOP) type = VAL_TOP;
+      surfaces.push({ el, type });
       seen.add(el);
     }
-  });
-  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) => {
@@ -190,76 +167,128 @@ var getElementRects = (accumulationMap) => {
   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 });
+    elementRects.push({ el, rect, 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 createSnowflake = (worldWidth, config, isBackground = false) => {
+  const x = Math.random() * worldWidth;
+  const dna = Math.random();
+  const noise = {
+    speed: dna * 13 % 1,
+    wind: dna * 7 % 1,
+    wobblePhase: dna * 23 % 1,
+    wobbleSpeed: dna * 5 % 1
+  };
+  const { MIN, MAX } = config.FLAKE_SIZE;
+  const sizeRatio = dna;
+  const profile = isBackground ? {
+    sizeMin: MIN * 0.6,
+    sizeRange: (MAX - MIN) * 0.4,
+    speedBase: 0.2,
+    speedScale: 0.3,
+    noiseSpeedScale: 0.2,
+    windScale: config.WIND_STRENGTH * 0.625,
+    opacityBase: 0.2,
+    opacityScale: 0.2,
+    wobbleBase: 5e-3,
+    wobbleScale: 0.015
+  } : {
+    sizeMin: MIN,
+    sizeRange: MAX - MIN,
+    speedBase: 0.5,
+    speedScale: 0.5,
+    noiseSpeedScale: 0.3,
+    windScale: config.WIND_STRENGTH,
+    opacityBase: 0.5,
+    opacityScale: 0.3,
+    wobbleBase: 0.01,
+    wobbleScale: 0.02
+  };
+  const radius = profile.sizeMin + sizeRatio * profile.sizeRange;
+  return {
+    x,
+    y: window.scrollY - 5,
+    radius,
+    speed: radius * profile.speedScale + noise.speed * profile.noiseSpeedScale + profile.speedBase,
+    wind: (noise.wind - 0.5) * profile.windScale,
+    opacity: profile.opacityBase + sizeRatio * profile.opacityScale,
+    wobble: noise.wobblePhase * TAU,
+    wobbleSpeed: noise.wobbleSpeed * profile.wobbleScale + profile.wobbleBase,
+    sizeRatio,
+    isBackground
+  };
+};
+var initializeMaxHeights = (width, baseMax, borderRadius, isBottom = false) => {
+  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;
+  }
+  return maxHeights;
+};
+var calculateCurveOffsets = (width, borderRadius, isBottom) => {
+  const offsets = new Array(width).fill(0);
+  if (borderRadius <= 0 || isBottom) return offsets;
+  for (let x = 0; x < width; x++) {
+    let offset = 0;
+    if (x < borderRadius) {
+      const dist = borderRadius - x;
+      offset = borderRadius - Math.sqrt(Math.max(0, borderRadius * borderRadius - dist * dist));
+    } else if (x > width - borderRadius) {
+      const dist = x - (width - borderRadius);
+      offset = borderRadius - Math.sqrt(Math.max(0, borderRadius * borderRadius - dist * dist));
+    }
+    offsets[x] = offset;
+  }
+  return offsets;
+};
+var calculateGravityMultipliers = (height) => {
+  const multipliers = new Array(height);
+  for (let i = 0; i < height; i++) {
+    const ratio = i / height;
+    multipliers[i] = Math.sqrt(ratio);
   }
+  return multipliers;
 };
 var initializeAccumulation = (accumulationMap, config) => {
-  const elements = getAccumulationSurfaces();
+  const elements = getAccumulationSurfaces(config.MAX_SURFACES);
   for (const [el] of accumulationMap.entries()) {
     if (!el.isConnected) {
       accumulationMap.delete(el);
     }
   }
-  elements.forEach(({ el, type, isFixed }) => {
+  elements.forEach(({ el, type }) => {
     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;
+        existing.curveOffsets = calculateCurveOffsets(width, existing.borderRadius, isBottom);
+        if (existing.leftSide.length === Math.ceil(rect.height) && !existing.sideGravityMultipliers) {
+          existing.sideGravityMultipliers = calculateGravityMultipliers(existing.leftSide.length);
+        }
       }
       return;
     }
@@ -267,26 +296,7 @@ var initializeAccumulation = (accumulationMap, config) => {
     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;
-    }
+    const maxHeights = initializeMaxHeights(width, baseMax, borderRadius, isBottom);
     accumulationMap.set(el, {
       heights: existing?.heights.length === width ? existing.heights : new Array(width).fill(0),
       maxHeights,
@@ -294,8 +304,9 @@ var initializeAccumulation = (accumulationMap, config) => {
       rightSide: existing?.rightSide.length === height ? existing.rightSide : new Array(height).fill(0),
       maxSideHeight: isBottom ? 0 : config.MAX_DEPTH.SIDE,
       borderRadius,
-      type,
-      isFixed
+      curveOffsets: calculateCurveOffsets(width, borderRadius, isBottom),
+      sideGravityMultipliers: calculateGravityMultipliers(height),
+      type
     });
   });
 };
@@ -314,30 +325,35 @@ var accumulateSide = (sideArray, rectHeight, localY, maxSideHeight, borderRadius
     }
   }
 };
-var updateSnowflakes = (snowflakes, elementRects, config, dt, canvasWidth, canvasHeight) => {
+var updateSnowflakes = (snowflakes, elementRects, config, dt, worldWidth, worldHeight) => {
+  const scrollX = window.scrollX;
+  const scrollY = window.scrollY;
   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) {
+    for (const item of elementRects) {
+      const { rect, acc } = item;
       const isBottom = acc.type === VAL_BOTTOM;
+      const flakeViewportX = flake.x - scrollX;
+      const flakeViewportY = flake.y - scrollY;
+      const isInVerticalBounds = flakeViewportY >= rect.top && flakeViewportY <= rect.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 localY = Math.floor(flakeViewportY - 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 (flakeViewportX >= rect.left - 5 && flakeViewportX < 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 (!landed && flakeViewportX > rect.right - 3 && flakeViewportX <= rect.right + 5) {
             if (!isCorner) {
               accumulateSide(acc.rightSide, rect.height, localY, acc.maxSideHeight, borderRadius, config);
               landed = true;
@@ -346,12 +362,12 @@ var updateSnowflakes = (snowflakes, elementRects, config, dt, canvasWidth, canva
           if (landed) break;
         }
       }
-      if (flake.x >= rect.left && flake.x <= rect.right) {
-        const localX = Math.floor(flake.x - rect.left);
+      if (flakeViewportX >= rect.left && flakeViewportX <= rect.right) {
+        const localX = Math.floor(flakeViewportX - 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) {
+        if (flakeViewportY >= surfaceY && flakeViewportY < surfaceY + 10 && currentHeight < maxHeight) {
           const shouldAccumulate2 = isBottom ? Math.random() < 0.15 : true;
           if (shouldAccumulate2) {
             const baseSpread = Math.ceil(flake.radius);
@@ -386,7 +402,7 @@ var updateSnowflakes = (snowflakes, elementRects, config, dt, canvasWidth, canva
         }
       }
     }
-    if (landed || flake.y > canvasHeight + 10 || flake.x < -20 || flake.x > canvasWidth + 20) {
+    if (landed || flake.y > worldHeight + 10 || flake.x < -20 || flake.x > worldWidth + 20) {
       snowflakes.splice(i, 1);
     }
   }
@@ -414,136 +430,116 @@ var meltAndSmoothAccumulation = (elementRects, config, dt) => {
 };
 
 // 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 ACC_FILL_STYLE = "rgba(255, 255, 255, 0.95)";
+var ACC_SHADOW_COLOR = "rgba(200, 230, 255, 0.6)";
+var drawSnowflakes = (ctx, flakes) => {
+  if (flakes.length === 0) return;
+  ctx.fillStyle = "#FFFFFF";
+  for (const flake of flakes) {
+    ctx.globalAlpha = flake.opacity;
+    ctx.beginPath();
+    ctx.arc(flake.x, flake.y, flake.radius, 0, TAU);
+    ctx.fill();
+  }
+  for (const flake of flakes) {
+    if (flake.isBackground) continue;
+    ctx.globalAlpha = flake.opacity * 0.2;
+    ctx.beginPath();
+    ctx.arc(flake.x, flake.y, flake.radius * 1.5, 0, TAU);
+    ctx.fill();
+  }
+  ctx.globalAlpha = 1;
 };
-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) {
+var drawAccumulations = (ctx, elementRects) => {
+  ctx.fillStyle = ACC_FILL_STYLE;
+  ctx.shadowColor = ACC_SHADOW_COLOR;
+  ctx.shadowBlur = 4;
+  ctx.shadowOffsetY = -1;
+  ctx.globalAlpha = 1;
+  const currentScrollX = window.scrollX;
+  const currentScrollY = window.scrollY;
+  ctx.beginPath();
+  for (const item of elementRects) {
+    const { rect, acc } = item;
     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 dx = currentScrollX;
+    const dy = currentScrollY;
     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;
+      const py = baseY - height + (acc.curveOffsets[x] || 0) + dy;
       if (first) {
-        targetCtx.moveTo(px, py);
+        ctx.moveTo(px, py);
         first = false;
       } else {
-        targetCtx.lineTo(px, py);
+        ctx.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);
+      const py = baseY - height + (acc.curveOffsets[x] || 0) + dy;
+      ctx.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 py = baseY + (acc.curveOffsets[x] || 0) + dy;
+      ctx.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();
+    const startPy = baseY + (acc.curveOffsets[startX] || 0) + dy;
+    ctx.lineTo(startPx, startPy);
   }
+  ctx.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;
+var drawSideAccumulations = (ctx, elementRects) => {
+  ctx.fillStyle = ACC_FILL_STYLE;
+  ctx.shadowColor = ACC_SHADOW_COLOR;
+  ctx.shadowBlur = 3;
+  ctx.globalAlpha = 1;
+  const currentScrollX = window.scrollX;
+  const currentScrollY = window.scrollY;
+  ctx.beginPath();
+  const drawSide = (sideArray, isLeft, multipliers, rect, dx, dy) => {
+    const baseX = isLeft ? rect.left : rect.right;
+    ctx.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 gravityMultiplier = multipliers[y] || 0;
+      const py = rect.top + y + dy;
+      const px = (isLeft ? baseX - width * gravityMultiplier : baseX + width * gravityMultiplier) + dx;
+      const ny = rect.top + nextY + dy;
+      const nGravityMultiplier = multipliers[nextY] || 0;
+      const nx = (isLeft ? baseX - nextWidth * nGravityMultiplier : baseX + nextWidth * nGravityMultiplier) + dx;
+      ctx.lineTo(px, py);
+      ctx.lineTo(nx, ny);
+    }
+    ctx.lineTo(baseX + dx, rect.bottom + dy);
   };
-  setupCtx(ctx);
-  if (fixedCtx) setupCtx(fixedCtx);
-  const scrollX = window.scrollX;
-  const scrollY = window.scrollY;
-  for (const { rect, acc } of elementRects) {
+  for (const item of elementRects) {
+    const { rect, acc } = item;
     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 heightRatio = y / sideArray.length;
-        const gravityMultiplier = Math.pow(heightRatio, 1.5);
-        const py = rect.top + y + dy;
-        const px = (isLeft ? baseX - width * gravityMultiplier : baseX + width * gravityMultiplier) + dx;
-        const ny = rect.top + nextY + dy;
-        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);
-      }
-      targetCtx.lineTo(baseX + dx, rect.bottom + dy);
-      targetCtx.closePath();
-      targetCtx.fill();
-    };
-    if (hasLeftSnow) drawSide(acc.leftSide, true);
-    if (hasRightSnow) drawSide(acc.rightSide, false);
+    const dx = currentScrollX;
+    const dy = currentScrollY;
+    if (hasLeftSnow) drawSide(acc.leftSide, true, acc.sideGravityMultipliers, rect, dx, dy);
+    if (hasRightSnow) drawSide(acc.rightSide, false, acc.sideGravityMultipliers, rect, dx, dy);
   }
+  ctx.fill();
   ctx.shadowBlur = 0;
-  if (fixedCtx) fixedCtx.shadowBlur = 0;
 };
 
 // src/Snowfall.tsx
@@ -570,7 +566,7 @@ function Snowfall() {
     drawTime: 0
   });
   useEffect(() => {
-    setIsMounted(true);
+    requestAnimationFrame(() => setIsMounted(true));
   }, []);
   useEffect(() => {
     isEnabledRef.current = isEnabled;
@@ -589,31 +585,49 @@ function Snowfall() {
     if (!ctx) return;
     const resizeCanvas = () => {
       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;
-        }
+        const newWidth = window.innerWidth;
+        const newHeight = window.innerHeight;
+        const dpr = window.devicePixelRatio || 1;
+        canvasRef.current.width = newWidth * dpr;
+        canvasRef.current.height = newHeight * dpr;
+        canvasRef.current.style.width = `${newWidth}px`;
+        canvasRef.current.style.height = `${newHeight}px`;
       }
     };
     resizeCanvas();
-    const resizeObserver = new ResizeObserver(() => {
+    const windowResizeObserver = new ResizeObserver(() => {
       resizeCanvas();
     });
-    resizeObserver.observe(document.body);
+    windowResizeObserver.observe(document.body);
+    const surfaceObserver = new ResizeObserver((entries) => {
+      let needsUpdate = false;
+      for (const entry of entries) {
+        if (entry.target.isConnected) {
+          needsUpdate = true;
+          break;
+        }
+      }
+      if (needsUpdate) {
+        initAccumulationWrapper();
+      }
+    });
     snowflakesRef.current = [];
     const initAccumulationWrapper = () => {
       const scanStart = performance.now();
       initializeAccumulation(accumulationRef.current, physicsConfigRef.current);
+      surfaceObserver.disconnect();
+      for (const [el] of accumulationRef.current) {
+        surfaceObserver.observe(el);
+      }
       metricsRef.current.scanTime = performance.now() - scanStart;
     };
     initAccumulationWrapper();
-    setIsVisible(true);
+    requestAnimationFrame(() => {
+      if (isMounted) setIsVisible(true);
+    });
     let lastTime = 0;
-    let lastRectUpdate = 0;
     let lastMetricsUpdate = 0;
-    let cachedElementRects = [];
+    let elementRects = [];
     const animate = (currentTime) => {
       if (lastTime === 0) {
         lastTime = currentTime;
@@ -629,29 +643,36 @@ function Snowfall() {
       const dt = deltaTime / 16.67;
       const frameStartTime = performance.now();
       const clearStart = performance.now();
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      const dpr = window.devicePixelRatio || 1;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
+      const scrollX = window.scrollX;
+      const scrollY = window.scrollY;
+      ctx.translate(-scrollX, -scrollY);
       metricsRef.current.clearTime = performance.now() - clearStart;
       const snowflakes = snowflakesRef.current;
-      if (currentTime - lastRectUpdate > 100) {
-        const rectStart = performance.now();
-        cachedElementRects = getElementRects(accumulationRef.current);
-        metricsRef.current.rectUpdateTime = performance.now() - rectStart;
-        lastRectUpdate = currentTime;
-      }
+      const rectStart = performance.now();
+      elementRects = getElementRects(accumulationRef.current);
+      metricsRef.current.rectUpdateTime = performance.now() - rectStart;
       const physicsStart = performance.now();
-      meltAndSmoothAccumulation(cachedElementRects, physicsConfigRef.current, dt);
-      updateSnowflakes(snowflakes, cachedElementRects, physicsConfigRef.current, dt, canvas.width, canvas.height);
+      meltAndSmoothAccumulation(elementRects, physicsConfigRef.current, dt);
+      updateSnowflakes(
+        snowflakes,
+        elementRects,
+        physicsConfigRef.current,
+        dt,
+        document.documentElement.scrollWidth,
+        document.documentElement.scrollHeight
+      );
       metricsRef.current.physicsTime = performance.now() - physicsStart;
       const drawStart = performance.now();
-      for (const flake of snowflakes) {
-        drawSnowflake(ctx, flake);
-      }
+      drawSnowflakes(ctx, snowflakes);
       if (isEnabledRef.current && snowflakes.length < physicsConfigRef.current.MAX_FLAKES) {
         const isBackground = Math.random() < 0.4;
-        snowflakes.push(createSnowflake(canvas.width, physicsConfigRef.current, isBackground));
+        snowflakes.push(createSnowflake(document.documentElement.scrollWidth, physicsConfigRef.current, isBackground));
       }
-      drawAccumulations(ctx, ctx, cachedElementRects);
-      drawSideAccumulations(ctx, ctx, cachedElementRects);
+      drawAccumulations(ctx, elementRects);
+      drawSideAccumulations(ctx, elementRects);
       metricsRef.current.drawTime = performance.now() - drawStart;
       metricsRef.current.frameTime = performance.now() - frameStartTime;
       if (currentTime - lastMetricsUpdate > 500) {
@@ -684,7 +705,8 @@ function Snowfall() {
       cancelAnimationFrame(animationIdRef.current);
       window.removeEventListener("resize", handleResize);
       clearInterval(checkInterval);
-      resizeObserver.disconnect();
+      windowResizeObserver.disconnect();
+      surfaceObserver.disconnect();
     };
   }, [isMounted]);
   if (!isMounted) return null;
@@ -693,7 +715,8 @@ function Snowfall() {
     {
       ref: canvasRef,
       style: {
-        position: "absolute",
+        position: "fixed",
+        // FIXED position to eliminate scroll jitter
         top: 0,
         left: 0,
         pointerEvents: "none",
@@ -710,9 +733,9 @@ function Snowfall() {
 // src/DebugPanel.tsx
 import { useEffect as useEffect2, useState as useState3 } from "react";
 import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
-function DebugPanel() {
+function DebugPanel({ defaultOpen = true }) {
   const { debugMode, toggleDebug, metrics } = useSnowfall();
-  const [isMinimized, setIsMinimized] = useState3(false);
+  const [isMinimized, setIsMinimized] = useState3(!defaultOpen);
   const [copied, setCopied] = useState3(false);
   useEffect2(() => {
     const handleKeyDown = (e) => {
@@ -740,145 +763,199 @@ function DebugPanel() {
     }
   };
   if (!debugMode) return null;
-  return /* @__PURE__ */ 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__ */ jsxs("div", { style: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      marginBottom: isMinimized ? 0 : "10px"
-    }, children: [
-      /* @__PURE__ */ jsx3("div", { style: { fontWeight: "bold", color: "#0ff" }, children: "\u2744\uFE0F SNOWFALL DEBUG" }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "10px" }, children: [
-        /* @__PURE__ */ jsx3(
-          "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__ */ jsx3(
-          "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__ */ jsxs(Fragment2, { children: [
-      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "10px", paddingBottom: "10px", borderBottom: "1px solid #333" }, children: [
-        /* @__PURE__ */ jsx3("div", { style: { color: "#ff0", marginBottom: "5px", fontWeight: "bold" }, children: "\u26A1 PERFORMANCE" }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          "FPS: ",
-          /* @__PURE__ */ jsx3("span", { style: { color: metrics.fps < 30 ? "#f00" : metrics.fps < 50 ? "#ff0" : "#0f0" }, children: metrics.fps.toFixed(1) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          "Frame Time: ",
-          metrics.frameTime.toFixed(2),
-          "ms"
-        ] }),
-        /* @__PURE__ */ jsxs("div", { style: { color: "#f80" }, children: [
-          "rAF Gap: ",
-          metrics.rafGap?.toFixed(1) || 0,
-          "ms ",
-          metrics.rafGap && metrics.rafGap > 20 ? "\u26A0\uFE0F THROTTLED!" : ""
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "10px", paddingBottom: "10px", borderBottom: "1px solid #333" }, children: [
-        /* @__PURE__ */ jsx3("div", { style: { color: "#ff0", marginBottom: "5px", fontWeight: "bold" }, children: "\u{1F52C} DETAILED TIMINGS" }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          "Clear: ",
-          metrics.clearTime?.toFixed(2) || 0,
-          "ms"
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          "Physics: ",
-          metrics.physicsTime?.toFixed(2) || 0,
-          "ms"
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          "Draw: ",
-          metrics.drawTime?.toFixed(2) || 0,
-          "ms"
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          "Scan: ",
-          metrics.scanTime.toFixed(2),
-          "ms"
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          "Rect Update: ",
-          metrics.rectUpdateTime.toFixed(2),
-          "ms"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "10px", paddingBottom: "10px", borderBottom: "1px solid #333" }, children: [
-        /* @__PURE__ */ jsx3("div", { style: { color: "#ff0", marginBottom: "5px", fontWeight: "bold" }, children: "\u{1F4CA} COUNTS" }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          "Snowflakes: ",
-          metrics.flakeCount,
-          " / ",
-          metrics.maxFlakes
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-snowfall": "top",
+      style: {
+        position: "fixed",
+        bottom: "80px",
+        left: "24px",
+        backgroundColor: "rgba(15, 23, 42, 0.75)",
+        backdropFilter: "blur(16px)",
+        WebkitBackdropFilter: "blur(16px)",
+        color: "#e2e8f0",
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+        fontSize: "12px",
+        padding: isMinimized ? "12px" : "20px",
+        borderRadius: "16px",
+        zIndex: 1e4,
+        minWidth: isMinimized ? "auto" : "300px",
+        maxWidth: "100%",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+        boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2)",
+        transition: "all 0.2s ease"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: isMinimized ? 0 : "16px",
+          gap: "16px"
+        }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { fontWeight: "600", color: "#fff", display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ jsx3("span", { style: { fontSize: "14px" }, children: "\u2744\uFE0F" }),
+            /* @__PURE__ */ jsx3("span", { style: {
+              background: "linear-gradient(to right, #60a5fa, #22d3ee)",
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+              fontWeight: "700"
+            }, children: "DEBUG" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                onClick: () => setIsMinimized(!isMinimized),
+                style: {
+                  background: "rgba(255, 255, 255, 0.1)",
+                  border: "1px solid rgba(255, 255, 255, 0.1)",
+                  color: "#fff",
+                  cursor: "pointer",
+                  width: "24px",
+                  height: "24px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: "6px",
+                  fontSize: "10px"
+                },
+                children: isMinimized ? "\u25B2" : "\u25BC"
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                onClick: toggleDebug,
+                style: {
+                  background: "rgba(239, 68, 68, 0.15)",
+                  border: "1px solid rgba(239, 68, 68, 0.2)",
+                  color: "#f87171",
+                  cursor: "pointer",
+                  width: "24px",
+                  height: "24px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: "6px",
+                  fontSize: "12px"
+                },
+                children: "\u2715"
+              }
+            )
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          "Surfaces: ",
-          metrics.surfaceCount
+        !isMinimized && metrics && /* @__PURE__ */ jsxs(Fragment2, { children: [
+          /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px", paddingBottom: "12px", borderBottom: "1px solid rgba(255,255,255,0.08)" }, children: [
+            /* @__PURE__ */ jsx3("div", { style: { color: "#94a3b8", marginBottom: "8px", fontSize: "11px", fontWeight: "600", letterSpacing: "0.5px", textTransform: "uppercase" }, children: "Performance" }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "4px" }, children: [
+              /* @__PURE__ */ jsx3("span", { children: "FPS" }),
+              /* @__PURE__ */ jsx3("span", { style: { fontWeight: "bold", color: metrics.fps < 30 ? "#f87171" : metrics.fps < 50 ? "#facc15" : "#4ade80" }, children: metrics.fps.toFixed(1) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "4px" }, children: [
+              /* @__PURE__ */ jsx3("span", { children: "Frame Time" }),
+              /* @__PURE__ */ jsxs("span", { style: { fontFamily: "monospace" }, children: [
+                metrics.frameTime.toFixed(2),
+                "ms"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ jsx3("span", { style: { color: metrics.rafGap && metrics.rafGap > 20 ? "#fbbf24" : "inherit" }, children: "rAF Gap" }),
+              /* @__PURE__ */ jsxs("span", { style: { fontFamily: "monospace" }, children: [
+                metrics.rafGap?.toFixed(1) || 0,
+                "ms"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px", paddingBottom: "12px", borderBottom: "1px solid rgba(255,255,255,0.08)" }, children: [
+            /* @__PURE__ */ jsx3("div", { style: { color: "#94a3b8", marginBottom: "8px", fontSize: "11px", fontWeight: "600", letterSpacing: "0.5px", textTransform: "uppercase" }, children: "Detailed Timings" }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "4px 12px" }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ jsx3("span", { children: "Clear" }),
+                " ",
+                /* @__PURE__ */ jsxs("span", { style: { fontFamily: "monospace" }, children: [
+                  metrics.clearTime?.toFixed(2) || 0,
+                  "ms"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ jsx3("span", { children: "Physics" }),
+                " ",
+                /* @__PURE__ */ jsxs("span", { style: { fontFamily: "monospace" }, children: [
+                  metrics.physicsTime?.toFixed(2) || 0,
+                  "ms"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ jsx3("span", { children: "Draw" }),
+                " ",
+                /* @__PURE__ */ jsxs("span", { style: { fontFamily: "monospace" }, children: [
+                  metrics.drawTime?.toFixed(2) || 0,
+                  "ms"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ jsx3("span", { children: "Scan" }),
+                " ",
+                /* @__PURE__ */ jsxs("span", { style: { fontFamily: "monospace" }, children: [
+                  metrics.scanTime.toFixed(2),
+                  "ms"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", gridColumn: "span 2" }, children: [
+                /* @__PURE__ */ jsx3("span", { children: "Rect Update" }),
+                " ",
+                /* @__PURE__ */ jsxs("span", { style: { fontFamily: "monospace" }, children: [
+                  metrics.rectUpdateTime.toFixed(2),
+                  "ms"
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
+            /* @__PURE__ */ jsx3("div", { style: { color: "#94a3b8", marginBottom: "8px", fontSize: "11px", fontWeight: "600", letterSpacing: "0.5px", textTransform: "uppercase" }, children: "Counts" }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "4px" }, children: [
+              /* @__PURE__ */ jsx3("span", { children: "Snowflakes" }),
+              /* @__PURE__ */ jsxs("span", { style: { fontFamily: "monospace" }, children: [
+                metrics.flakeCount,
+                " / ",
+                metrics.maxFlakes
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ jsx3("span", { children: "Surfaces" }),
+              /* @__PURE__ */ jsx3("span", { style: { fontFamily: "monospace" }, children: metrics.surfaceCount })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              onClick: copyToClipboard,
+              style: {
+                width: "100%",
+                padding: "10px",
+                background: copied ? "rgba(34, 197, 94, 0.2)" : "rgba(255, 255, 255, 0.05)",
+                border: copied ? "1px solid rgba(34, 197, 94, 0.5)" : "1px solid rgba(255, 255, 255, 0.1)",
+                color: copied ? "#4ade80" : "#fff",
+                cursor: "pointer",
+                borderRadius: "8px",
+                fontSize: "11px",
+                fontWeight: "600",
+                transition: "all 0.2s",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "6px"
+              },
+              children: copied ? "\u2713 COPIED" : "\u{1F4CB} COPY METRICS"
+            }
+          ),
+          /* @__PURE__ */ jsx3("div", { style: { marginTop: "12px", fontSize: "10px", color: "#64748b", textAlign: "center" }, children: "Shift+D to toggle" })
         ] })
-      ] }),
-      /* @__PURE__ */ jsx3(
-        "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__ */ jsx3("div", { style: { marginTop: "8px", fontSize: "10px", color: "#666", textAlign: "center" }, children: "Shift+D to toggle" })
-    ] })
-  ] });
+      ]
+    }
+  );
 }
 export {
   DEFAULT_PHYSICS,