refactor: rename short variable names to be descriptive (#251)

Author: aidenybai

AGENTS.md

@@ -124,6 +124,7 @@ E2E tests (`pnpm test` at root) run Playwright against the `e2e-playground` Vite
 ### Key commands reference
 
 See root `package.json` scripts and `CONTRIBUTING.md` for the full list. Quick reference:
+
 - **Install**: `ni` (or `pnpm install`)
 - **Build**: `nr build` (or `pnpm build`)
 - **Dev watch**: `nr dev` (or `pnpm dev`) — watches core packages

packages/design-system/src/index.tsx

@@ -2572,7 +2572,6 @@ const StateCard = (props: StateCardProps) => {
               visible={true}
               status={currentProps().status}
               hasAgent={currentProps().hasAgent}
-
               isPromptMode={currentProps().isPromptMode}
               inputValue={currentProps().inputValue}
               replyToPrompt={currentProps().replyToPrompt}

packages/react-grab/e2e/fixtures.ts

@@ -352,7 +352,10 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
       return new Promise<Record<string, string>>((resolve) => {
         const originalSetData = DataTransfer.prototype.setData;
         const clipboardWrites: Record<string, string> = {};
-        DataTransfer.prototype.setData = function (type: string, value: string) {
+        DataTransfer.prototype.setData = function (
+          type: string,
+          value: string,
+        ) {
           clipboardWrites[type] = value;
           return originalSetData.call(this, type, value);
         };

packages/react-grab/src/components/selection-label/index.tsx

@@ -192,7 +192,8 @@ export const SelectionLabel: Component<SelectionLabelProps> = (props) => {
     (previousResult: PositionResult): PositionResult => {
       viewportVersion();
       const currentElementIdentity = elementIdentity();
-      const didReset = currentElementIdentity !== previousResult.elementIdentity;
+      const didReset =
+        currentElementIdentity !== previousResult.elementIdentity;
       const cached = didReset
         ? {
             position: DEFAULT_OFFSCREEN_POSITION,

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

@@ -562,8 +562,10 @@ export const Toolbar: Component<ToolbarProps> = (props) => {
     let newRatio = positionRatio();
 
     if (wasCollapsed) {
-      const { position: newPos, ratio } =
-        getExpandedFromCollapsed(currentPosition(), snapEdge());
+      const { position: newPos, ratio } = getExpandedFromCollapsed(
+        currentPosition(),
+        snapEdge(),
+      );
       newRatio = ratio;
       setPosition(newPos);
       setPositionRatio(newRatio);

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

@@ -99,7 +99,8 @@ export const ToolbarMenu: Component<ToolbarMenuProps> = (props) => {
             <For each={props.actions}>
               {(action) => {
                 const isToggleAction = action.isActive !== undefined;
-                const isActionEnabled = () => resolveToolbarActionEnabled(action);
+                const isActionEnabled = () =>
+                  resolveToolbarActionEnabled(action);
                 const isToggleActive = () => {
                   void toggleRefreshCounter();
                   return Boolean(action.isActive?.());

packages/react-grab/src/core/index.tsx

@@ -236,8 +236,7 @@ export const init = (rawOptions?: Options): ReactGrabAPI => {
     const didJustCopy = createMemo(() => store.current.state === "justCopied");
     const isPromptMode = createMemo(
       () =>
-        store.current.state === "active" &&
-        Boolean(store.current.isPromptMode),
+        store.current.state === "active" && Boolean(store.current.isPromptMode),
     );
     const isCommentMode = createMemo(
       () => store.pendingCommentMode || isPromptMode(),
@@ -3143,7 +3142,9 @@ export const init = (rawOptions?: Options): ReactGrabAPI => {
       if (!isThemeEnabled()) return [];
       if (!pluginRegistry.store.theme.grabbedBoxes.enabled) return [];
       void store.viewportVersion;
-      const currentIds = new Set(store.labelInstances.map((i) => i.id));
+      const currentIds = new Set(
+        store.labelInstances.map((instance) => instance.id),
+      );
       for (const cachedId of labelInstanceCache.keys()) {
         if (!currentIds.has(cachedId)) {
           labelInstanceCache.delete(cachedId);

packages/react-grab/src/utils/create-anchored-dropdown.ts

@@ -54,7 +54,9 @@ export const createAnchoredDropdown = (
   };
 
   const handleViewportChange = () => {
-    setViewportVersion((previousViewportVersion) => previousViewportVersion + 1);
+    setViewportVersion(
+      (previousViewportVersion) => previousViewportVersion + 1,
+    );
     measure();
   };
 
@@ -93,8 +95,14 @@ export const createAnchoredDropdown = (
 
     onCleanup(() => {
       window.removeEventListener("resize", handleViewportChange);
-      window.visualViewport?.removeEventListener("resize", handleViewportChange);
-      window.visualViewport?.removeEventListener("scroll", handleViewportChange);
+      window.visualViewport?.removeEventListener(
+        "resize",
+        handleViewportChange,
+      );
+      window.visualViewport?.removeEventListener(
+        "scroll",
+        handleViewportChange,
+      );
     });
   });
 

packages/react-grab/src/utils/create-element-bounds.ts

@@ -79,20 +79,20 @@ export const createElementBounds = (element: Element): OverlayBounds => {
   let bounds: OverlayBounds;
 
   if (transform !== "none" && element instanceof HTMLElement) {
-    const ow = element.offsetWidth;
-    const oh = element.offsetHeight;
+    const offsetWidth = element.offsetWidth;
+    const offsetHeight = element.offsetHeight;
 
-    if (ow > 0 && oh > 0) {
+    if (offsetWidth > 0 && offsetHeight > 0) {
       const centerX = rect.left + rect.width * 0.5;
       const centerY = rect.top + rect.height * 0.5;
 
       bounds = {
         borderRadius: style.borderRadius || "0px",
-        height: oh,
+        height: offsetHeight,
         transform,
-        width: ow,
-        x: centerX - ow * 0.5,
-        y: centerY - oh * 0.5,
+        width: offsetWidth,
+        x: centerX - offsetWidth * 0.5,
+        y: centerY - offsetHeight * 0.5,
       };
     } else {
       bounds = {

packages/react-grab/src/utils/create-toolbar-drag.ts

@@ -33,12 +33,12 @@ interface ToolbarDragResult {
   isDragging: Accessor<boolean>;
   isSnapping: Accessor<boolean>;
   handlePointerDown: (event: PointerEvent) => void;
-  createDragAwareHandler: (
-    callback: () => void,
-  ) => (event: MouseEvent) => void;
+  createDragAwareHandler: (callback: () => void) => (event: MouseEvent) => void;
 }
 
-export const createToolbarDrag = (config: ToolbarDragConfig): ToolbarDragResult => {
+export const createToolbarDrag = (
+  config: ToolbarDragConfig,
+): ToolbarDragResult => {
   const [isDragging, setIsDragging] = createSignal(false);
   const [isSnapping, setIsSnapping] = createSignal(false);
   const [hasDragMoved, setHasDragMoved] = createSignal(false);
@@ -69,10 +69,8 @@ export const createToolbarDrag = (config: ToolbarDragConfig): ToolbarDragResult
     const deltaTime = now - lastPointerPosition.time;
 
     if (deltaTime > 0) {
-      const newVelocityX =
-        (event.clientX - lastPointerPosition.x) / deltaTime;
-      const newVelocityY =
-        (event.clientY - lastPointerPosition.y) / deltaTime;
+      const newVelocityX = (event.clientX - lastPointerPosition.x) / deltaTime;
+      const newVelocityY = (event.clientY - lastPointerPosition.y) / deltaTime;
       setVelocity({ x: newVelocityX, y: newVelocityY });
     }