feat: add reflow-free element measurement utility

.changeset/config.json

@@ -3,13 +3,7 @@
   "changelog": "@changesets/cli/changelog",
   "commit": false,
   "fixed": [],
-  "linked": [
-    [
-      "react-grab",
-      "grab",
-      "@react-grab/cli"
-    ]
-  ],
+  "linked": [["react-grab", "grab", "@react-grab/cli"]],
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",

packages/cli/src/commands/add.ts

@@ -4,10 +4,7 @@ import { detectNonInteractive } from "../utils/is-non-interactive.js";
 import { detectProject } from "../utils/detect.js";
 import { handleError } from "../utils/handle-error.js";
 import { highlighter } from "../utils/highlighter.js";
-import {
-  installMcpServers,
-  promptMcpInstall,
-} from "../utils/install-mcp.js";
+import { installMcpServers, promptMcpInstall } from "../utils/install-mcp.js";
 import { logger } from "../utils/logger.js";
 import { spinner } from "../utils/spinner.js";
 

packages/cli/src/commands/init.ts

@@ -9,9 +9,7 @@ import {
   applyTransformWithFeedback,
   installPackagesWithFeedback,
 } from "../utils/cli-helpers.js";
-import {
-  promptMcpInstall,
-} from "../utils/install-mcp.js";
+import { promptMcpInstall } from "../utils/install-mcp.js";
 import {
   detectProject,
   findReactProjects,
@@ -23,14 +21,10 @@ import {
 import { printDiff } from "../utils/diff.js";
 import { handleError } from "../utils/handle-error.js";
 import { highlighter } from "../utils/highlighter.js";
-import {
-  getPackagesToInstall,
-} from "../utils/install.js";
+import { getPackagesToInstall } from "../utils/install.js";
 import { logger } from "../utils/logger.js";
 import { spinner } from "../utils/spinner.js";
-import {
-  type AgentIntegration,
-} from "../utils/templates.js";
+import { type AgentIntegration } from "../utils/templates.js";
 import {
   previewOptionsTransform,
   previewPackageJsonTransform,

packages/cli/src/utils/detect.ts

@@ -417,9 +417,7 @@ export const detectReactGrab = (projectRoot: string): boolean => {
   return filesToCheck.some(hasReactGrabInFile);
 };
 
-const AGENT_PACKAGES = [
-  "@react-grab/mcp",
-];
+const AGENT_PACKAGES = ["@react-grab/mcp"];
 
 export const detectUnsupportedFramework = (
   projectRoot: string,

packages/cli/src/utils/install.ts

@@ -44,4 +44,3 @@ export const getPackagesToInstall = (
 
   return packages;
 };
-

packages/cli/src/utils/templates.ts

@@ -55,7 +55,9 @@ export const TANSTACK_EFFECT = `useEffect(() => {
     }
   }, []);`;
 
-export const TANSTACK_EFFECT_WITH_AGENT = (_agent: AgentIntegration): string => {
+export const TANSTACK_EFFECT_WITH_AGENT = (
+  _agent: AgentIntegration,
+): string => {
   return TANSTACK_EFFECT;
 };
 

packages/cli/test/detect.test.ts

@@ -340,4 +340,3 @@ describe("detectUnsupportedFramework", () => {
     expect(detectUnsupportedFramework("/test")).toBe(null);
   });
 });
-

packages/cli/test/install.test.ts

@@ -1,7 +1,5 @@
 import { describe, expect, it } from "vitest";
-import {
-  getPackagesToInstall,
-} from "../src/utils/install.js";
+import { getPackagesToInstall } from "../src/utils/install.js";
 
 describe("getPackagesToInstall", () => {
   it("should return only react-grab when no agent and includeReactGrab is true", () => {

packages/cli/test/transform.test.ts

@@ -257,13 +257,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
     );
     mockReadFileSync.mockReturnValue(entryContent);
 
-    const result = previewTransform(
-      "/test",
-      "vite",
-      "unknown",
-      "mcp",
-      false,
-    );
+    const result = previewTransform("/test", "vite", "unknown", "mcp", false);
 
     expect(result.success).toBe(true);
     expect(result.newContent).toContain("react-grab");

packages/gym/components/agent-playground.tsx

@@ -112,7 +112,6 @@ export const AgentPlaygroundContent = ({
     });
   }, [loadedProviders, failedProviders, addLog]);
 
-
   const handleAddProvider = (provider: string) => {
     const currentProviders =
       new URLSearchParams(window.location.search).get("provider") ?? "";

packages/react-grab/e2e/fixtures.ts

@@ -1008,9 +1008,7 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
         const items = dropdown.querySelectorAll<HTMLButtonElement>(
           "[data-react-grab-menu-item]",
         );
-        return Array.from(items).map(
-          (item) => item.textContent?.trim() ?? "",
-        );
+        return Array.from(items).map((item) => item.textContent?.trim() ?? "");
       }
       return [];
     }, ATTRIBUTE_NAME);
@@ -1682,9 +1680,7 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
             id: "comment-action",
             label: "Edit",
             shortcut: "Enter",
-            onAction: (context: {
-              enterPromptMode?: () => void;
-            }) => {
+            onAction: (context: { enterPromptMode?: () => void }) => {
               context.enterPromptMode?.();
             },
           },

packages/react-grab/src/components/toolbar/index.tsx

@@ -1299,24 +1299,14 @@ export const Toolbar: Component<ToolbarProps> = (props) => {
             </span>
           </Show>
           <Show when={selectionHintIndex() === 1}>
-            <span
-              class={cn(
-                "flex items-center gap-1",
-                HINT_FLIP_IN_ANIMATION,
-              )}
-            >
+            <span class={cn("flex items-center gap-1", HINT_FLIP_IN_ANIMATION)}>
               <Kbd>↑</Kbd>
               <Kbd>↓</Kbd>
               to fine-tune target
             </span>
           </Show>
           <Show when={selectionHintIndex() === 2}>
-            <span
-              class={cn(
-                "flex items-center gap-1",
-                HINT_FLIP_IN_ANIMATION,
-              )}
-            >
+            <span class={cn("flex items-center gap-1", HINT_FLIP_IN_ANIMATION)}>
               <Kbd>esc</Kbd>
               to cancel
             </span>

packages/react-grab/src/components/toolbar/toolbar-content.tsx

@@ -216,10 +216,12 @@ export const ToolbarContent: Component<ToolbarContentProps> = (props) => {
           "grid relative overflow-visible",
           gridSizeTransitionClass(),
           props.isCollapsed
-            ? (isVertical()
-                ? "grid-rows-[0fr] pointer-events-none"
-                : "grid-cols-[0fr] pointer-events-none")
-            : (isVertical() ? "grid-rows-[1fr]" : "grid-cols-[1fr]"),
+            ? isVertical()
+              ? "grid-rows-[0fr] pointer-events-none"
+              : "grid-cols-[0fr] pointer-events-none"
+            : isVertical()
+              ? "grid-rows-[1fr]"
+              : "grid-cols-[1fr]",
         )}
       >
         <div

packages/react-grab/src/types.ts

@@ -559,6 +559,15 @@ export interface GrabbedBox {
   element?: Element;
 }
 
+export interface ElementMeasurement {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  isIntersecting: boolean;
+  intersectionRatio: number;
+}
+
 export interface Rect {
   left: number;
   top: number;

packages/react-grab/src/utils/comment-storage.ts

@@ -76,9 +76,7 @@ let didConfirmClear = readSessionFlag(CLEAR_CONFIRMED_KEY);
 
 export const loadComments = (): CommentItem[] => commentItems;
 
-export const addCommentItem = (
-  item: Omit<CommentItem, "id">,
-): CommentItem[] =>
+export const addCommentItem = (item: Omit<CommentItem, "id">): CommentItem[] =>
   persistCommentItems(
     [{ ...item, id: generateId("comment") }, ...commentItems].slice(
       0,
@@ -101,6 +99,9 @@ export const confirmClear = (): void => {
     sessionStorage.setItem(CLEAR_CONFIRMED_KEY, "1");
   } catch (error) {
     // HACK: sessionStorage can throw in private browsing or when quota is exceeded
-    logRecoverableError("Failed to save clear preference to sessionStorage", error);
+    logRecoverableError(
+      "Failed to save clear preference to sessionStorage",
+      error,
+    );
   }
 };