fix: filter hidden and out-of-flow children from gap detection

- Skip display:none and position:absolute/fixed children in
  computeChildGaps to prevent spurious gap rects at viewport origin
- Also skip zero-sized children as a safety net
- Simplify DOMMatrix.rotate() to single-arg form for Z-axis rotation

Author: aidenybai

packages/react-grab/src/components/overlay-canvas.tsx

@@ -323,7 +323,7 @@ export const OverlayCanvas: Component<OverlayCanvasProps> = (props) => {
 
     const pattern = context.createPattern(patternCanvas, "repeat");
     if (pattern) {
-      pattern.setTransform(new DOMMatrix().rotate(0, 0, HATCH_ROTATION_DEG));
+      pattern.setTransform(new DOMMatrix().rotate(HATCH_ROTATION_DEG));
       hatchPatternCache.set(color, pattern);
     }
     return pattern;

packages/react-grab/src/utils/create-box-model-bounds.ts

@@ -11,6 +11,7 @@ interface BoxSides {
 
 const GRID_DISPLAYS = new Set(["grid", "inline-grid"]);
 const LAYOUT_DISPLAYS = new Set(["flex", "inline-flex", "grid", "inline-grid"]);
+const OUT_OF_FLOW_POSITIONS = new Set(["absolute", "fixed"]);
 
 const parseSides = (style: CSSStyleDeclaration, property: string): BoxSides => ({
   top: parseFloat(style.getPropertyValue(`${property}-top`)) || 0,
@@ -86,7 +87,18 @@ const computeChildGaps = (
     return [];
   }
 
-  const childRects = Array.from(element.children).map((child) => child.getBoundingClientRect());
+  const childRects: DOMRect[] = [];
+  for (const child of element.children) {
+    const childStyle = window.getComputedStyle(child);
+    if (childStyle.display === "none" || OUT_OF_FLOW_POSITIONS.has(childStyle.position)) {
+      continue;
+    }
+    const rect = child.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) continue;
+    childRects.push(rect);
+  }
+
+  if (childRects.length < 2) return [];
 
   if (GRID_DISPLAYS.has(style.display)) {
     return [