feat: box model overlay for inspect mode

.gitignore

@@ -17,3 +17,4 @@ playwright-report
 meta.json
 .agents/skills
 .claude.expect
+.mcp.json

apps/website/public/r/index.json

@@ -8,9 +8,7 @@
       "type": "registry:component",
       "title": "React Grab",
       "description": "Loads React Grab as early as possible — select context for coding agents directly from your website.",
-      "dependencies": [
-        "react-grab"
-      ],
+      "dependencies": ["react-grab"],
       "files": [
         {
           "path": "react-grab.tsx",

apps/website/public/r/react-grab.json

@@ -4,9 +4,7 @@
   "type": "registry:component",
   "title": "React Grab",
   "description": "Loads React Grab as early as possible — select context for coding agents directly from your website.",
-  "dependencies": [
-    "react-grab"
-  ],
+  "dependencies": ["react-grab"],
   "files": [
     {
       "path": "components/react-grab.tsx",

packages/react-grab/e2e/drag-selection.spec.ts

@@ -306,6 +306,49 @@ test.describe("Drag Selection with Scroll", () => {
     await reactGrab.page.mouse.up();
   });
 
+  test("drag bounds height should grow by exactly the scroll delta during auto-scroll", async ({
+    reactGrab,
+  }) => {
+    await reactGrab.activate();
+
+    const viewport = await reactGrab.getViewportSize();
+
+    // Start drag from the top of the page
+    const startX = 100;
+    const startY = 100;
+    await reactGrab.page.mouse.move(startX, startY);
+    await reactGrab.page.mouse.down();
+
+    // Move near the bottom edge to trigger auto-scroll (threshold is 25px)
+    const nearBottomY = viewport.height - 10;
+    await reactGrab.page.mouse.move(startX, nearBottomY, { steps: 5 });
+    await reactGrab.page.waitForTimeout(200);
+
+    // Capture initial state after auto-scroll has started
+    const scrollBefore = await reactGrab.page.evaluate(() => window.scrollY);
+    const boundsBefore = await reactGrab.getDragBoxBounds();
+    expect(boundsBefore).not.toBeNull();
+
+    // Wait for auto-scroll to advance several frames
+    await reactGrab.page.waitForTimeout(800);
+
+    const scrollAfter = await reactGrab.page.evaluate(() => window.scrollY);
+    const boundsAfter = await reactGrab.getDragBoxBounds();
+    expect(boundsAfter).not.toBeNull();
+
+    const scrollDelta = scrollAfter - scrollBefore;
+    // Auto-scroll should have moved the page
+    expect(scrollDelta).toBeGreaterThan(0);
+
+    // The drag height growth should match the scroll delta (not double-counted).
+    // Allow a small tolerance for RAF timing between reading scroll and bounds.
+    const heightGrowth = boundsAfter!.height - boundsBefore!.height;
+    const drift = Math.abs(heightGrowth - scrollDelta);
+    expect(drift).toBeLessThanOrEqual(20);
+
+    await reactGrab.page.mouse.up();
+  });
+
   test("drag selection should work in scrollable container", async ({ reactGrab }) => {
     await reactGrab.activate();
 

packages/react-grab/package.json

@@ -102,7 +102,6 @@
   "devDependencies": {
     "@babel/core": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "solid-js": "^1.9.10",
     "@playwright/test": "^1.40.0",
     "@tailwindcss/cli": "^4.1.17",
     "@types/babel__core": "^7.20.5",
@@ -111,6 +110,7 @@
     "babel-preset-solid": "^1.9.10",
     "concurrently": "^9.1.2",
     "expect-sdk": "0.0.0-canary-20260405095424",
+    "solid-js": "^1.9.10",
     "tailwindcss": "^4.1.0",
     "tsx": "^4.21.0"
   },