refactor: to new canvas impl instead of DOM

[aidenybai]

Note

Migrates overlay rendering to a single high-DPI OverlayCanvas with offscreen layers and lerped animations, reducing DOM churn and centralizing drawing.

• Replace SelectionBox/Crosshair with OverlayCanvas (layers: crosshair/drag/selection/grabbed/processing); renderer now mounts the canvas and retains SelectionLabel
• Extend getState and plugin hooks with isCrosshairVisible, isSelectionBoxVisible, isDragBoxVisible, grabbedBoxes, selectionFilePath
• Add overlay-related constants (z-index, lerp factors, fade buffer, DPR min, colors) and better resize/DPR handling
• E2E: remove fixed timeouts in favor of polling; new helpers (waitForActive, waitForSelectionBox/Label/Source, context-menu waiters); specs updated to read from window.__REACT_GRAB__
• Build: change IIFE global to globalThis.__REACT_GRAB_MODULE__

^{Written by Cursor Bugbot for commit 72708a8. This will update automatically on new commits. Configure here.}

---

Summary by cubic

Switched to a single canvas-based overlay for crosshair, selection, drag, and grabbed states to reduce DOM churn and improve performance. Updated renderer and E2E helpers to use the new overlay and internal state.

• Refactors

  • Added OverlayCanvas with offscreen layers, animated bounds, and high-DPI support.
  • Removed SelectionBox and Crosshair; renderer now mounts OverlayCanvas and keeps SelectionLabel.
  • Updated E2E helpers to read visibility/bounds from window.REACT_GRAB, replaced timeouts with polling-based waits, and added waitForSelectionLabel, waitForActive, and waitForSelectionSource.
  • Added constants for z-index, lerp factors, fade buffer, min device pixel ratio, and overlay colors.
  • Exposed grabbedBoxes in API state and plugin hooks for accurate visibility and bounds.
  • Added isCrosshairVisible, isSelectionBoxVisible, and isDragBoxVisible to API state and plugin hooks.
  • Exposed selectionFilePath in API state to support open-file behavior.

• Migration

  • Tests should no longer query data-react-grab-selection-box or data-react-grab-crosshair; use the overlay canvas and window.REACT_GRAB.
  • DOM-based box geometry is no longer available; read bounds and source info from API state (e.g., targetElement, dragBounds, grabbedBoxes, selectionFilePath).
  • IIFE build global name changed to globalThis.REACT_GRAB_MODULE.

^{Written for commit 72708a8. Summary will update on new commits.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
react-grab-website	Ready	Preview, Comment	Jan 6, 2026 2:14am

[cubic-dev-ai]

No issues found across 6 files

[cubic-dev-ai]

1 issue found across 1 file (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="packages/react-grab/src/components/overlay-canvas.tsx">

<violation number="1" location="packages/react-grab/src/components/overlay-canvas.tsx:537">
P2: Magic number `0.01` used for opacity convergence threshold in two places. Consider extracting to a constant (e.g., `OPACITY_CONVERGENCE_THRESHOLD`) to keep both usages in sync.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

3 issues found across 7 files (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="packages/react-grab/e2e/open-file.spec.ts">

<violation number="1" location="packages/react-grab/e2e/open-file.spec.ts:38">
P2: The `pressKeyCombo` action is being called inside the `expect.poll()` callback, which means it will be pressed repeatedly every 500ms until the condition passes. This masks timing issues and can cause flaky tests. The action should be performed once before the poll, then poll only the result. This pattern is repeated multiple times in this file.</violation>

<violation number="2" location="packages/react-grab/e2e/open-file.spec.ts:396">
P2: Loosening the assertion from `.toBe(1)` to `.toBeGreaterThanOrEqual(1)` (and `.toBe(2)` to `.toBeGreaterThanOrEqual(2)`) works around the repeated key press issue but makes the test less precise. Once the key press is moved outside the poll, the exact count assertions should be restored.</violation>
</file>

<file name="packages/react-grab/e2e/fixtures.ts">

<violation number="1" location="packages/react-grab/e2e/fixtures.ts:297">
P2: The strict inequality check `!== null` will incorrectly pass when `selectionFilePath` is `undefined` (since `undefined !== null` is `true`). This can cause the function to resolve prematurely when the API isn&#39;t ready or the property hasn&#39;t been set. Use loose equality `!= null` instead to catch both `null` and `undefined`.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}