From 87e361a1ba9d88e9f81e9a0445bd3f07b505b7ac Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sun, 1 Feb 2026 09:14:16 -0500
Subject: [PATCH] Simplify e2e test main window vs popup window logic

---
 integrations/tests/playwright.config.ts       |   16 +-
 integrations/tests/src/utils/goToUrl.ts       |    9 +-
 integrations/tests/tests/cursor.spec.tsx      |  447 ++++---
 .../tests/tests/default-sizes.spec.tsx        |  136 +--
 .../tests/tests/fixed-size-elements.spec.tsx  |  300 +++--
 .../tests/tests/imperative-api-hooks.spec.tsx |   94 +-
 .../tests/keyboard-interactions.spec.tsx      |  619 +++++-----
 .../tests/tests/pointer-interactions.spec.tsx | 1025 ++++++++---------
 .../tests/tests/resize-events.spec.tsx        |  413 ++++---
 .../tests/tests/stacking-order.spec.tsx       |  265 ++---
 integrations/tests/tests/visibility.spec.tsx  |  160 ++-
 11 files changed, 1697 insertions(+), 1787 deletions(-)

diff --git a/integrations/tests/playwright.config.ts b/integrations/tests/playwright.config.ts
index 3516f6cab..ea7f0e10c 100644
--- a/integrations/tests/playwright.config.ts
+++ b/integrations/tests/playwright.config.ts
@@ -1,9 +1,23 @@
 import { defineConfig, devices } from "@playwright/test";
 
+export type ExtendedUseOptions = {
+  usePopUpWindow: boolean;
+};
+
 const DEVICES = [
   {
     name: "chromium",
-    use: devices["Desktop Chrome"]
+    use: {
+      ...devices["Desktop Chrome"],
+      usePopUpWindow: false
+    }
+  },
+  {
+    name: "chromium: popup",
+    use: {
+      ...devices["Desktop Chrome"],
+      usePopUpWindow: true
+    }
   }
 ];
 
diff --git a/integrations/tests/src/utils/goToUrl.ts b/integrations/tests/src/utils/goToUrl.ts
index 983680c43..fde97d88f 100644
--- a/integrations/tests/src/utils/goToUrl.ts
+++ b/integrations/tests/src/utils/goToUrl.ts
@@ -1,5 +1,7 @@
 import type { Page } from "@playwright/test";
+import { test } from "@playwright/test";
 import { createElement, type ReactElement } from "react";
+import type { ExtendedUseOptions } from "../../playwright.config";
 import { PopupWindow } from "../../src/components/PopupWindow";
 import { encode } from "./serializer/encode";
 
@@ -11,15 +13,16 @@ export async function goToUrl(
     useGroupRef?: boolean | undefined;
     usePanelCallbackRef?: boolean | undefined;
     usePanelRef?: boolean | undefined;
-    usePopUpWindow?: boolean | undefined;
   } = {}
 ): Promise<Page> {
+  const usePopUpWindow = (test.info().project.use as ExtendedUseOptions)
+    .usePopUpWindow;
+
   const {
     useGroupCallbackRef = false,
     useGroupRef = false,
     usePanelCallbackRef = false,
-    usePanelRef = false,
-    usePopUpWindow = false
+    usePanelRef = false
   } = config;
 
   let element = elementProp;
diff --git a/integrations/tests/tests/cursor.spec.tsx b/integrations/tests/tests/cursor.spec.tsx
index faf69dd48..994ecc2fd 100644
--- a/integrations/tests/tests/cursor.spec.tsx
+++ b/integrations/tests/tests/cursor.spec.tsx
@@ -10,237 +10,228 @@ import { goToUrl } from "../src/utils/goToUrl";
 const moveConfig = { steps: 10 };
 
 test.describe("cursor", () => {
-  for (const usePopUpWindow of [true, false]) {
-    test.describe(usePopUpWindow ? "in a popup" : "in the main window", () => {
-      test("horizontal", async ({ page: mainPage }) => {
-        const page = await goToUrl(
-          mainPage,
+  test("horizontal", async ({ page: mainPage }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group orientation="horizontal">
+        <Panel id="left" minSize="25%" />
+        <Separator />
+        <Panel id="right" minSize="25%" />
+      </Group>
+    );
+
+    const hitAreaBox = await calculateHitArea(page, ["left", "right"]);
+    const { x, y } = getCenterCoordinates(hitAreaBox);
+
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("auto");
+
+    await page.mouse.move(x, y, moveConfig);
+
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("ew-resize");
+
+    await page.mouse.down();
+    await page.mouse.move(25, y, moveConfig);
+
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("e-resize");
+
+    await page.mouse.move(975, y, moveConfig);
+
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("w-resize");
+  });
+
+  test("vertical", async ({ page: mainPage }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group orientation="vertical">
+        <Panel id="top" minSize="25%" />
+        <Separator />
+        <Panel id="bottom" minSize="25%" />
+      </Group>
+    );
+
+    const hitAreaBox = await calculateHitArea(page, ["top", "bottom"]);
+    const { x, y } = getCenterCoordinates(hitAreaBox);
+
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("auto");
+
+    await page.mouse.move(x, y, moveConfig);
+
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("ns-resize");
+
+    await page.mouse.down();
+    await page.mouse.move(x, 0, moveConfig);
+
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("s-resize");
+
+    await page.mouse.move(x, 600, moveConfig);
+
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("n-resize");
+  });
+
+  test("intersecting", async ({ page: mainPage }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group className="h-[250px]!" orientation="vertical">
+        <Panel id="top" minSize="25%" />
+        <Separator id="vertical-separator" />
+        <Panel id="bottom" minSize="25%">
           <Group orientation="horizontal">
             <Panel id="left" minSize="25%" />
             <Separator />
             <Panel id="right" minSize="25%" />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        const hitAreaBox = await calculateHitArea(page, ["left", "right"]);
-        const { x, y } = getCenterCoordinates(hitAreaBox);
-
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("auto");
-
-        await page.mouse.move(x, y, moveConfig);
-
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("ew-resize");
-
-        await page.mouse.down();
-        await page.mouse.move(25, y, moveConfig);
-
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("e-resize");
-
-        await page.mouse.move(975, y, moveConfig);
-
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("w-resize");
-      });
-
-      test("vertical", async ({ page: mainPage }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group orientation="vertical">
-            <Panel id="top" minSize="25%" />
-            <Separator />
-            <Panel id="bottom" minSize="25%" />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        const hitAreaBox = await calculateHitArea(page, ["top", "bottom"]);
-        const { x, y } = getCenterCoordinates(hitAreaBox);
-
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("auto");
-
-        await page.mouse.move(x, y, moveConfig);
-
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("ns-resize");
-
-        await page.mouse.down();
-        await page.mouse.move(x, 0, moveConfig);
-
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("s-resize");
-
-        await page.mouse.move(x, 600, moveConfig);
-
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("n-resize");
-      });
-
-      test("intersecting", async ({ page: mainPage }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group className="h-[250px]!" orientation="vertical">
-            <Panel id="top" minSize="25%" />
-            <Separator id="vertical-separator" />
-            <Panel id="bottom" minSize="25%">
-              <Group orientation="horizontal">
-                <Panel id="left" minSize="25%" />
-                <Separator />
-                <Panel id="right" minSize="25%" />
-              </Group>
-            </Panel>
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        const separator = page.getByTestId("vertical-separator");
-        const boundingBox = (await separator.boundingBox())!;
-        const x = boundingBox.x + boundingBox.width / 2;
-        const y = boundingBox.y;
-
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("auto");
-
-        // Centered
-        await page.mouse.move(x, y, moveConfig);
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("move");
-
-        // Top left
-        await page.mouse.down();
-        await page.mouse.move(1, 1, moveConfig);
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("se-resize");
-
-        // Top
-        await page.mouse.move(x, 0, moveConfig);
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("s-resize");
-
-        // Top right
-        await page.mouse.move(1000, 1, moveConfig);
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("sw-resize");
-
-        // Right
-        await page.mouse.move(975, y, moveConfig);
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("w-resize");
-
-        // Bottom right
-        await page.mouse.move(1000, 600, moveConfig);
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("nw-resize");
-
-        // Bottom
-        await page.mouse.move(x, 600, moveConfig);
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("n-resize");
-
-        // Bottom left
-        await page.mouse.move(1, 600, moveConfig);
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("ne-resize");
-
-        // Left
-        await page.mouse.move(25, y, moveConfig);
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("e-resize");
-
-        // Centered
-        await page.mouse.move(x, y, moveConfig);
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("move");
-      });
-
-      test("edge case", async ({ page: mainPage }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group className="h-[250px]!" orientation="vertical">
-            <Panel id="top" minSize="25%" />
-            <Separator id="vertical-separator" />
-            <Panel id="bottom" minSize="25%">
-              <Group orientation="horizontal">
-                <Panel id="left" minSize="25%" />
-                <Separator />
-                <Panel id="right" minSize="25%" />
-              </Group>
-            </Panel>
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        const separator = page.getByTestId("vertical-separator");
-        const boundingBox = (await separator.boundingBox())!;
-        const x = boundingBox.x + boundingBox.width / 2;
-        const y = boundingBox.y;
-
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("auto");
-
-        // Centered
-        await page.mouse.move(x, y, moveConfig);
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("move");
-
-        await page.mouse.down();
-
-        // Moving only in one dimension should not affect the cursor
-        await page.mouse.move(x, y - 25, moveConfig);
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("move");
-      });
-
-      test("disabled", async ({ page: mainPage }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group disableCursor orientation="vertical">
-            <Panel id="top" minSize="25%" />
+          </Group>
+        </Panel>
+      </Group>
+    );
+
+    const separator = page.getByTestId("vertical-separator");
+    const boundingBox = (await separator.boundingBox())!;
+    const x = boundingBox.x + boundingBox.width / 2;
+    const y = boundingBox.y;
+
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("auto");
+
+    // Centered
+    await page.mouse.move(x, y, moveConfig);
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("move");
+
+    // Top left
+    await page.mouse.down();
+    await page.mouse.move(1, 1, moveConfig);
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("se-resize");
+
+    // Top
+    await page.mouse.move(x, 0, moveConfig);
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("s-resize");
+
+    // Top right
+    await page.mouse.move(1000, 1, moveConfig);
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("sw-resize");
+
+    // Right
+    await page.mouse.move(975, y, moveConfig);
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("w-resize");
+
+    // Bottom right
+    await page.mouse.move(1000, 600, moveConfig);
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("nw-resize");
+
+    // Bottom
+    await page.mouse.move(x, 600, moveConfig);
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("n-resize");
+
+    // Bottom left
+    await page.mouse.move(1, 600, moveConfig);
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("ne-resize");
+
+    // Left
+    await page.mouse.move(25, y, moveConfig);
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("e-resize");
+
+    // Centered
+    await page.mouse.move(x, y, moveConfig);
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("move");
+  });
+
+  test("edge case", async ({ page: mainPage }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group className="h-[250px]!" orientation="vertical">
+        <Panel id="top" minSize="25%" />
+        <Separator id="vertical-separator" />
+        <Panel id="bottom" minSize="25%">
+          <Group orientation="horizontal">
+            <Panel id="left" minSize="25%" />
             <Separator />
-            <Panel id="bottom" minSize="25%" />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        const hitAreaBox = await calculateHitArea(page, ["top", "bottom"]);
-        const { x, y } = getCenterCoordinates(hitAreaBox);
-
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("auto");
-
-        await page.mouse.move(x, y, moveConfig);
-
-        expect(
-          await page.evaluate(() => getComputedStyle(document.body).cursor)
-        ).toBe("auto");
-      });
-    });
-  }
+            <Panel id="right" minSize="25%" />
+          </Group>
+        </Panel>
+      </Group>
+    );
+
+    const separator = page.getByTestId("vertical-separator");
+    const boundingBox = (await separator.boundingBox())!;
+    const x = boundingBox.x + boundingBox.width / 2;
+    const y = boundingBox.y;
+
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("auto");
+
+    // Centered
+    await page.mouse.move(x, y, moveConfig);
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("move");
+
+    await page.mouse.down();
+
+    // Moving only in one dimension should not affect the cursor
+    await page.mouse.move(x, y - 25, moveConfig);
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("move");
+  });
+
+  test("disabled", async ({ page: mainPage }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group disableCursor orientation="vertical">
+        <Panel id="top" minSize="25%" />
+        <Separator />
+        <Panel id="bottom" minSize="25%" />
+      </Group>
+    );
+
+    const hitAreaBox = await calculateHitArea(page, ["top", "bottom"]);
+    const { x, y } = getCenterCoordinates(hitAreaBox);
+
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("auto");
+
+    await page.mouse.move(x, y, moveConfig);
+
+    expect(
+      await page.evaluate(() => getComputedStyle(document.body).cursor)
+    ).toBe("auto");
+  });
 });
diff --git a/integrations/tests/tests/default-sizes.spec.tsx b/integrations/tests/tests/default-sizes.spec.tsx
index 998534f1f..eebfa618d 100644
--- a/integrations/tests/tests/default-sizes.spec.tsx
+++ b/integrations/tests/tests/default-sizes.spec.tsx
@@ -4,83 +4,75 @@ import { goToUrl } from "../src/utils/goToUrl";
 
 // High level tests; more nuanced scenarios are covered by unit tests
 test.describe("default panel sizes", () => {
-  for (const usePopUpWindow of [true, false]) {
-    test.describe(usePopUpWindow ? "in a popup" : "in the main window", () => {
-      test("percentages", async ({ page: mainPage }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel defaultSize="30%" id="left" minSize={50} />
-            <Separator />
-            <Panel collapsible defaultSize="0%" id="middle" minSize={50} />
-            <Separator />
-            <Panel id="right" minSize={50} />
-          </Group>,
-          { usePopUpWindow }
-        );
+  test("percentages", async ({ page: mainPage }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel defaultSize="30%" id="left" minSize={50} />
+        <Separator />
+        <Panel collapsible defaultSize="0%" id="middle" minSize={50} />
+        <Separator />
+        <Panel id="right" minSize={50} />
+      </Group>
+    );
 
-        await expect(page.getByText("id: left")).toContainText("30%");
-        await expect(page.getByText("id: middle")).toContainText("0%");
-        await expect(page.getByText("id: right")).toContainText("70%");
-        await expect(page.getByRole("separator")).toHaveCount(2);
-      });
+    await expect(page.getByText("id: left")).toContainText("30%");
+    await expect(page.getByText("id: middle")).toContainText("0%");
+    await expect(page.getByText("id: right")).toContainText("70%");
+    await expect(page.getByRole("separator")).toHaveCount(2);
+  });
 
-      test("pixels", async ({ page: mainPage }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel defaultSize={200} id="left" minSize={50} />
-            <Separator />
-            <Panel collapsible defaultSize={0} id="middle" minSize={50} />
-            <Separator />
-            <Panel id="right" minSize={50} />
-          </Group>,
-          { usePopUpWindow }
-        );
+  test("pixels", async ({ page: mainPage }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel defaultSize={200} id="left" minSize={50} />
+        <Separator />
+        <Panel collapsible defaultSize={0} id="middle" minSize={50} />
+        <Separator />
+        <Panel id="right" minSize={50} />
+      </Group>
+    );
 
-        await expect(page.getByText("id: left")).toContainText("200px");
-        await expect(page.getByText("id: middle")).toContainText("0px");
-        await expect(page.getByText("id: right")).toContainText("752px");
-        await expect(page.getByRole("separator")).toHaveCount(2);
-      });
+    await expect(page.getByText("id: left")).toContainText("200px");
+    await expect(page.getByText("id: middle")).toContainText("0px");
+    await expect(page.getByText("id: right")).toContainText("752px");
+    await expect(page.getByRole("separator")).toHaveCount(2);
+  });
 
-      test("rems", async ({ page: mainPage }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel defaultSize="10rem" id="left" minSize={50} />
-            <Separator />
-            <Panel collapsible defaultSize="0rem" id="middle" minSize={50} />
-            <Separator />
-            <Panel id="right" minSize={50} />
-          </Group>,
-          { usePopUpWindow }
-        );
+  test("rems", async ({ page: mainPage }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel defaultSize="10rem" id="left" minSize={50} />
+        <Separator />
+        <Panel collapsible defaultSize="0rem" id="middle" minSize={50} />
+        <Separator />
+        <Panel id="right" minSize={50} />
+      </Group>
+    );
 
-        await expect(page.getByText("id: left")).toContainText("160px");
-        await expect(page.getByText("id: middle")).toContainText("0px");
-        await expect(page.getByText("id: right")).toContainText("792px");
-        await expect(page.getByRole("separator")).toHaveCount(2);
-      });
+    await expect(page.getByText("id: left")).toContainText("160px");
+    await expect(page.getByText("id: middle")).toContainText("0px");
+    await expect(page.getByText("id: right")).toContainText("792px");
+    await expect(page.getByRole("separator")).toHaveCount(2);
+  });
 
-      test("vw", async ({ page: mainPage }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel defaultSize="25vw" id="left" minSize={50} />
-            <Separator />
-            <Panel collapsible defaultSize="0vw" id="middle" minSize={50} />
-            <Separator />
-            <Panel id="right" minSize={50} />
-          </Group>,
-          { usePopUpWindow }
-        );
+  test("vw", async ({ page: mainPage }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel defaultSize="25vw" id="left" minSize={50} />
+        <Separator />
+        <Panel collapsible defaultSize="0vw" id="middle" minSize={50} />
+        <Separator />
+        <Panel id="right" minSize={50} />
+      </Group>
+    );
 
-        await expect(page.getByText("id: left")).toContainText("250px");
-        await expect(page.getByText("id: middle")).toContainText("0px");
-        await expect(page.getByText("id: right")).toContainText("702px");
-        await expect(page.getByRole("separator")).toHaveCount(2);
-      });
-    });
-  }
+    await expect(page.getByText("id: left")).toContainText("250px");
+    await expect(page.getByText("id: middle")).toContainText("0px");
+    await expect(page.getByText("id: right")).toContainText("702px");
+    await expect(page.getByRole("separator")).toHaveCount(2);
+  });
 });
diff --git a/integrations/tests/tests/fixed-size-elements.spec.tsx b/integrations/tests/tests/fixed-size-elements.spec.tsx
index 2acf9b3d6..6a8b03b67 100644
--- a/integrations/tests/tests/fixed-size-elements.spec.tsx
+++ b/integrations/tests/tests/fixed-size-elements.spec.tsx
@@ -4,160 +4,148 @@ import { assertLayoutChangeCounts } from "../src/utils/assertLayoutChangeCounts"
 import { goToUrl } from "../src/utils/goToUrl";
 
 test.describe("fixed size elements", () => {
-  for (const usePopUpWindow of [true, false]) {
-    test.describe(usePopUpWindow ? "in a popup" : "in the main window", () => {
-      test("should not be interactive directly", async ({ page: mainPage }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel id="foo" />
-            <div>foo+bar</div>
-            <Panel id="bar" />
-            <Separator id="bar+baz" />
-            <div>bar+baz</div>
-            <Panel id="baz" />
-            <Separator id="baz+qux+left" />
-            <div>baz+qux</div>
-            <Separator id="baz+qux+right" />
-            <Panel id="qux" />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        await assertLayoutChangeCounts(mainPage, 1);
-
-        for (const text of ["foo+bar", "bar+baz", "baz+qux"]) {
-          const box = (await page.getByText(text).boundingBox())!;
-
-          await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
-          await page.mouse.down();
-          await page.mouse.move(0, 0);
-          await page.mouse.up();
-        }
-
-        await assertLayoutChangeCounts(mainPage, 1);
-      });
-
-      test("should work without an explicit separator", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel id="foo" />
-            <div>foo+bar</div>
-            <Panel id="bar" />
-            <Separator id="bar+baz" />
-            <div>bar+baz</div>
-            <Panel id="baz" />
-            <Separator id="baz+qux+left" />
-            <div>baz+qux</div>
-            <Separator id="baz+qux+right" />
-            <Panel id="qux" />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        await assertLayoutChangeCounts(mainPage, 1);
-
-        const boxFoo = (await page.getByText("id: foo").boundingBox())!;
-
-        await page.mouse.move(boxFoo.x + boxFoo.width, boxFoo.y);
-        await page.mouse.down();
-        await page.mouse.move(0, 0);
-        await page.mouse.up();
-
-        await assertLayoutChangeCounts(mainPage, 2);
-
-        const boxBar = (await page.getByText("id: bar").boundingBox())!;
-
-        await page.mouse.move(boxBar.x, boxBar.y);
-        await page.mouse.down();
-        await page.mouse.move(1000, 0);
-        await page.mouse.up();
-
-        await assertLayoutChangeCounts(mainPage, 3);
-      });
-
-      test("should work with an explicit separator", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel id="foo" />
-            <div>foo+bar</div>
-            <Panel id="bar" />
-            <Separator id="bar+baz" />
-            <div>bar+baz</div>
-            <Panel id="baz" />
-            <Separator id="baz+qux+left" />
-            <div>baz+qux</div>
-            <Separator id="baz+qux+right" />
-            <Panel id="qux" />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        const separatorBox = (await page.getByTestId("bar+baz").boundingBox())!;
-
-        await page.mouse.move(separatorBox.x, separatorBox.y);
-        await page.mouse.down();
-        await page.mouse.move(0, 0);
-        await page.mouse.up();
-
-        await assertLayoutChangeCounts(mainPage, 2);
-
-        const boxBaz = (await page.getByText("id: baz").boundingBox())!;
-
-        await page.mouse.move(boxBaz.x, boxBaz.y);
-        await page.mouse.down();
-        await page.mouse.move(1000, 0);
-        await page.mouse.up();
-
-        await assertLayoutChangeCounts(mainPage, 3);
-      });
-
-      test("should work with two explicit separators", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel id="foo" />
-            <div>foo+bar</div>
-            <Panel id="bar" />
-            <Separator id="bar+baz" />
-            <div>bar+baz</div>
-            <Panel id="baz" />
-            <Separator id="baz+qux+left" />
-            <div>baz+qux</div>
-            <Separator id="baz+qux+right" />
-            <Panel id="qux" />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        let separatorBox = (await page
-          .getByTestId("baz+qux+left")
-          .boundingBox())!;
-
-        await page.mouse.move(separatorBox.x, separatorBox.y);
-        await page.mouse.down();
-        await page.mouse.move(0, 0);
-        await page.mouse.up();
-
-        await assertLayoutChangeCounts(mainPage, 2);
-
-        separatorBox = (await page.getByTestId("baz+qux+right").boundingBox())!;
-
-        await page.mouse.move(separatorBox.x, separatorBox.y);
-        await page.mouse.down();
-        await page.mouse.move(1000, 0);
-        await page.mouse.up();
-
-        await assertLayoutChangeCounts(mainPage, 3);
-      });
-    });
-  }
+  test("should not be interactive directly", async ({ page: mainPage }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel id="foo" />
+        <div>foo+bar</div>
+        <Panel id="bar" />
+        <Separator id="bar+baz" />
+        <div>bar+baz</div>
+        <Panel id="baz" />
+        <Separator id="baz+qux+left" />
+        <div>baz+qux</div>
+        <Separator id="baz+qux+right" />
+        <Panel id="qux" />
+      </Group>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 1);
+
+    for (const text of ["foo+bar", "bar+baz", "baz+qux"]) {
+      const box = (await page.getByText(text).boundingBox())!;
+
+      await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+      await page.mouse.down();
+      await page.mouse.move(0, 0);
+      await page.mouse.up();
+    }
+
+    await assertLayoutChangeCounts(mainPage, 1);
+  });
+
+  test("should work without an explicit separator", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel id="foo" />
+        <div>foo+bar</div>
+        <Panel id="bar" />
+        <Separator id="bar+baz" />
+        <div>bar+baz</div>
+        <Panel id="baz" />
+        <Separator id="baz+qux+left" />
+        <div>baz+qux</div>
+        <Separator id="baz+qux+right" />
+        <Panel id="qux" />
+      </Group>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 1);
+
+    const boxFoo = (await page.getByText("id: foo").boundingBox())!;
+
+    await page.mouse.move(boxFoo.x + boxFoo.width, boxFoo.y);
+    await page.mouse.down();
+    await page.mouse.move(0, 0);
+    await page.mouse.up();
+
+    await assertLayoutChangeCounts(mainPage, 2);
+
+    const boxBar = (await page.getByText("id: bar").boundingBox())!;
+
+    await page.mouse.move(boxBar.x, boxBar.y);
+    await page.mouse.down();
+    await page.mouse.move(1000, 0);
+    await page.mouse.up();
+
+    await assertLayoutChangeCounts(mainPage, 3);
+  });
+
+  test("should work with an explicit separator", async ({ page: mainPage }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel id="foo" />
+        <div>foo+bar</div>
+        <Panel id="bar" />
+        <Separator id="bar+baz" />
+        <div>bar+baz</div>
+        <Panel id="baz" />
+        <Separator id="baz+qux+left" />
+        <div>baz+qux</div>
+        <Separator id="baz+qux+right" />
+        <Panel id="qux" />
+      </Group>
+    );
+
+    const separatorBox = (await page.getByTestId("bar+baz").boundingBox())!;
+
+    await page.mouse.move(separatorBox.x, separatorBox.y);
+    await page.mouse.down();
+    await page.mouse.move(0, 0);
+    await page.mouse.up();
+
+    await assertLayoutChangeCounts(mainPage, 2);
+
+    const boxBaz = (await page.getByText("id: baz").boundingBox())!;
+
+    await page.mouse.move(boxBaz.x, boxBaz.y);
+    await page.mouse.down();
+    await page.mouse.move(1000, 0);
+    await page.mouse.up();
+
+    await assertLayoutChangeCounts(mainPage, 3);
+  });
+
+  test("should work with two explicit separators", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel id="foo" />
+        <div>foo+bar</div>
+        <Panel id="bar" />
+        <Separator id="bar+baz" />
+        <div>bar+baz</div>
+        <Panel id="baz" />
+        <Separator id="baz+qux+left" />
+        <div>baz+qux</div>
+        <Separator id="baz+qux+right" />
+        <Panel id="qux" />
+      </Group>
+    );
+
+    let separatorBox = (await page.getByTestId("baz+qux+left").boundingBox())!;
+
+    await page.mouse.move(separatorBox.x, separatorBox.y);
+    await page.mouse.down();
+    await page.mouse.move(0, 0);
+    await page.mouse.up();
+
+    await assertLayoutChangeCounts(mainPage, 2);
+
+    separatorBox = (await page.getByTestId("baz+qux+right").boundingBox())!;
+
+    await page.mouse.move(separatorBox.x, separatorBox.y);
+    await page.mouse.down();
+    await page.mouse.move(1000, 0);
+    await page.mouse.up();
+
+    await assertLayoutChangeCounts(mainPage, 3);
+  });
 });
diff --git a/integrations/tests/tests/imperative-api-hooks.spec.tsx b/integrations/tests/tests/imperative-api-hooks.spec.tsx
index 0bd28f514..21f4d11ee 100644
--- a/integrations/tests/tests/imperative-api-hooks.spec.tsx
+++ b/integrations/tests/tests/imperative-api-hooks.spec.tsx
@@ -4,59 +4,55 @@ import { goToUrl } from "../src/utils/goToUrl";
 
 // High level tests; more nuanced scenarios are covered by unit tests
 test.describe("imperative API hooks", () => {
-  for (const usePopUpWindow of [true, false]) {
-    test.describe(usePopUpWindow ? "in a popup" : "in the main window", () => {
-      for (const { useGroupCallbackRef, useGroupRef } of [
-        { useGroupRef: true },
-        { useGroupCallbackRef: true }
-      ]) {
-        test.describe(
-          useGroupCallbackRef ? "useGroupCallbackRef" : "useGroupRef",
-          () => {
-            test("should work", async ({ page: mainPage }) => {
-              await goToUrl(
-                mainPage,
-                <Group>
-                  <Panel id="left" defaultSize="30" />
-                  <Separator />
-                  <Panel id="right" />
-                </Group>,
-                { usePopUpWindow, useGroupCallbackRef, useGroupRef }
-              );
+  for (const { useGroupCallbackRef, useGroupRef } of [
+    { useGroupRef: true },
+    { useGroupCallbackRef: true }
+  ]) {
+    test.describe(
+      useGroupCallbackRef ? "useGroupCallbackRef" : "useGroupRef",
+      () => {
+        test("should work", async ({ page: mainPage }) => {
+          await goToUrl(
+            mainPage,
+            <Group>
+              <Panel id="left" defaultSize="30" />
+              <Separator />
+              <Panel id="right" />
+            </Group>,
+            { useGroupCallbackRef, useGroupRef }
+          );
 
-              await expect(
-                mainPage.getByText("imperativeGroupApiLayout")
-              ).toContainText('"left": 30');
-            });
-          }
-        );
+          await expect(
+            mainPage.getByText("imperativeGroupApiLayout")
+          ).toContainText('"left": 30');
+        });
       }
+    );
+  }
 
-      for (const { usePanelCallbackRef, usePanelRef } of [
-        { usePanelRef: true },
-        { usePanelCallbackRef: true }
-      ]) {
-        test.describe(
-          usePanelCallbackRef ? "usePanelCallbackRef" : "usePanelRef",
-          () => {
-            test("should work", async ({ page: mainPage }) => {
-              await goToUrl(
-                mainPage,
-                <Group>
-                  <Panel id="left" defaultSize="30" />
-                  <Separator />
-                  <Panel id="right" />
-                </Group>,
-                { usePopUpWindow, usePanelCallbackRef, usePanelRef }
-              );
+  for (const { usePanelCallbackRef, usePanelRef } of [
+    { usePanelRef: true },
+    { usePanelCallbackRef: true }
+  ]) {
+    test.describe(
+      usePanelCallbackRef ? "usePanelCallbackRef" : "usePanelRef",
+      () => {
+        test("should work", async ({ page: mainPage }) => {
+          await goToUrl(
+            mainPage,
+            <Group>
+              <Panel id="left" defaultSize="30" />
+              <Separator />
+              <Panel id="right" />
+            </Group>,
+            { usePanelCallbackRef, usePanelRef }
+          );
 
-              await expect(
-                mainPage.getByText("imperativePanelApiSize")
-              ).toContainText('"asPercentage": 70');
-            });
-          }
-        );
+          await expect(
+            mainPage.getByText("imperativePanelApiSize")
+          ).toContainText('"asPercentage": 70');
+        });
       }
-    });
+    );
   }
 });
diff --git a/integrations/tests/tests/keyboard-interactions.spec.tsx b/integrations/tests/tests/keyboard-interactions.spec.tsx
index c383e4778..37b0f0d35 100644
--- a/integrations/tests/tests/keyboard-interactions.spec.tsx
+++ b/integrations/tests/tests/keyboard-interactions.spec.tsx
@@ -9,321 +9,308 @@ import { goToUrl } from "../src/utils/goToUrl";
 // - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/separator_role
 
 test.describe("keyboard interactions: window splitter api", () => {
-  for (const usePopUpWindow of [true, false]) {
-    test.describe(usePopUpWindow ? "in a popup" : "in the main window", () => {
-      test("horizontal: arrow keys", async ({ page: mainPage }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel defaultSize="30%" id="left" minSize="5%" />
-            <Separator />
-            <Panel id="right" minSize="5%" />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        await assertLayoutChangeCounts(mainPage, 1);
-        await expect(mainPage.getByText('"left": 30')).toBeVisible();
-
-        await expect(await getSeparatorAriaAttributes(page)).toEqual({
-          "aria-controls": "left",
-          "aria-valuemax": "95",
-          "aria-valuemin": "5",
-          "aria-valuenow": "30"
-        });
-
-        const separator = page.getByRole("separator");
-
-        await separator.focus();
-        await page.keyboard.press("ArrowLeft");
-
-        await assertLayoutChangeCounts(mainPage, 2);
-        await expect(mainPage.getByText('"left": 25')).toBeVisible();
-
-        await expect(await getSeparatorAriaAttributes(page)).toEqual({
-          "aria-controls": "left",
-          "aria-valuemax": "95",
-          "aria-valuemin": "5",
-          "aria-valuenow": "25"
-        });
-
-        await page.keyboard.press("ArrowRight");
-
-        await assertLayoutChangeCounts(mainPage, 3);
-        await expect(mainPage.getByText('"left": 30')).toBeVisible();
-
-        await expect(await getSeparatorAriaAttributes(page)).toEqual({
-          "aria-controls": "left",
-          "aria-valuemax": "95",
-          "aria-valuemin": "5",
-          "aria-valuenow": "30"
-        });
-
-        // Up/down are no-ops
-        await page.keyboard.press("ArrowUp");
-        await page.keyboard.press("ArrowDown");
-        await assertLayoutChangeCounts(mainPage, 3);
-      });
-
-      test("vertical: arrow keys", async ({ page: mainPage }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group orientation="vertical">
-            <Panel defaultSize="30%" id="top" minSize="5%" />
-            <Separator />
-            <Panel id="bottom" minSize="5%" />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        await assertLayoutChangeCounts(mainPage, 1);
-        await expect(mainPage.getByText('"top": 30')).toBeVisible();
-
-        await expect(await getSeparatorAriaAttributes(page)).toEqual({
-          "aria-controls": "top",
-          "aria-valuemax": "95",
-          "aria-valuemin": "5",
-          "aria-valuenow": "30"
-        });
-
-        const separator = page.getByRole("separator");
-
-        await separator.focus();
-        await page.keyboard.press("ArrowDown");
-
-        await assertLayoutChangeCounts(mainPage, 2);
-        await expect(mainPage.getByText('"top": 35')).toBeVisible();
-
-        await expect(await getSeparatorAriaAttributes(page)).toEqual({
-          "aria-controls": "top",
-          "aria-valuemax": "95",
-          "aria-valuemin": "5",
-          "aria-valuenow": "35"
-        });
-
-        await page.keyboard.press("ArrowUp");
-
-        await assertLayoutChangeCounts(mainPage, 3);
-        await expect(mainPage.getByText('"top": 30')).toBeVisible();
-
-        await expect(await getSeparatorAriaAttributes(page)).toEqual({
-          "aria-controls": "top",
-          "aria-valuemax": "95",
-          "aria-valuemin": "5",
-          "aria-valuenow": "30"
-        });
-
-        // Left/right are no-ops
-        await page.keyboard.press("ArrowLeft");
-        await page.keyboard.press("ArrowRight");
-        await assertLayoutChangeCounts(mainPage, 3);
-      });
-
-      test("enter key and collapsible panel", async ({ page: mainPage }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel collapsible collapsedSize="5%" id="left" minSize="20%" />
-            <Separator />
-            <Panel id="right" minSize="20%" />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        await assertLayoutChangeCounts(mainPage, 1);
-        await expect(mainPage.getByText('"left": 50')).toBeVisible();
-        await expect(mainPage.getByText('"right": 50')).toBeVisible();
-
-        await expect(await getSeparatorAriaAttributes(page)).toEqual({
-          "aria-controls": "left",
-          "aria-valuemax": "80",
-          "aria-valuemin": "5",
-          "aria-valuenow": "50"
-        });
-
-        const separator = page.getByRole("separator");
-        await separator.focus();
-        await page.keyboard.press("Enter");
-
-        await assertLayoutChangeCounts(mainPage, 2);
-        await expect(mainPage.getByText('"left": 5')).toBeVisible();
-        await expect(mainPage.getByText('"right": 95')).toBeVisible();
-
-        await expect(await getSeparatorAriaAttributes(page)).toEqual({
-          "aria-controls": "left",
-          "aria-valuemax": "80",
-          "aria-valuemin": "5",
-          "aria-valuenow": "5"
-        });
-
-        await page.keyboard.press("Enter");
-
-        await assertLayoutChangeCounts(mainPage, 3);
-        await expect(mainPage.getByText('"left": 50')).toBeVisible();
-        await expect(mainPage.getByText('"right": 50')).toBeVisible();
-
-        await expect(await getSeparatorAriaAttributes(page)).toEqual({
-          "aria-controls": "left",
-          "aria-valuemax": "80",
-          "aria-valuemin": "5",
-          "aria-valuenow": "50"
-        });
-
-        await page.keyboard.press("ArrowLeft");
-
-        await assertLayoutChangeCounts(mainPage, 4);
-        await expect(mainPage.getByText('"left": 45')).toBeVisible();
-        await expect(mainPage.getByText('"right": 55')).toBeVisible();
-
-        await expect(await getSeparatorAriaAttributes(page)).toEqual({
-          "aria-controls": "left",
-          "aria-valuemax": "80",
-          "aria-valuemin": "5",
-          "aria-valuenow": "45"
-        });
-
-        await page.keyboard.press("Enter");
-
-        await assertLayoutChangeCounts(mainPage, 5);
-        await expect(mainPage.getByText('"left": 5')).toBeVisible();
-        await expect(mainPage.getByText('"right": 95')).toBeVisible();
-
-        await expect(await getSeparatorAriaAttributes(page)).toEqual({
-          "aria-controls": "left",
-          "aria-valuemax": "80",
-          "aria-valuemin": "5",
-          "aria-valuenow": "5"
-        });
-
-        await page.keyboard.press("Enter");
-
-        await assertLayoutChangeCounts(mainPage, 6);
-        await expect(mainPage.getByText('"left": 45')).toBeVisible();
-        await expect(mainPage.getByText('"right": 55')).toBeVisible();
-
-        await expect(await getSeparatorAriaAttributes(page)).toEqual({
-          "aria-controls": "left",
-          "aria-valuemax": "80",
-          "aria-valuemin": "5",
-          "aria-valuenow": "45"
-        });
-      });
-
-      test("enter key and non-collapsible panel", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel id="left" minSize="20%" />
-            <Separator />
-            <Panel id="right" minSize="20%" />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        await assertLayoutChangeCounts(mainPage, 1);
-        await expect(mainPage.getByText('"left": 50')).toBeVisible();
-        await expect(mainPage.getByText('"right": 50')).toBeVisible();
-
-        const separator = page.getByRole("separator");
-        await separator.focus();
-        await page.keyboard.press("Enter");
-
-        await assertLayoutChangeCounts(mainPage, 1);
-      });
-
-      test("home and end keys", async ({ page: mainPage }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel id="left" minSize="20%" />
-            <Separator />
-            <Panel collapsible collapsedSize="5%" id="right" minSize="20%" />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        await assertLayoutChangeCounts(mainPage, 1);
-        await expect(mainPage.getByText('"left": 50')).toBeVisible();
-        await expect(mainPage.getByText('"right": 50')).toBeVisible();
-
-        const separator = page.getByRole("separator");
-
-        await separator.focus();
-        await page.keyboard.press("Home");
-
-        await assertLayoutChangeCounts(mainPage, 2);
-        await expect(mainPage.getByText('"left": 20')).toBeVisible();
-        await expect(mainPage.getByText('"right": 80')).toBeVisible();
-
-        await page.keyboard.press("End");
-
-        await assertLayoutChangeCounts(mainPage, 3);
-        await expect(mainPage.getByText('"left": 95')).toBeVisible();
-        await expect(mainPage.getByText('"right": 5')).toBeVisible();
-      });
-
-      test("f6 key cycles through separators", async ({ page: mainPage }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel />
-            <Separator id="separator-left" />
-            <Panel />
-            <Separator id="separator-center" />
-            <div />
-            <Separator id="separator-right" />
-            <Panel />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        await page.getByTestId("separator-left").focus();
-        await expect(page.getByTestId("separator-left")).toBeFocused();
-
-        await page.keyboard.press("F6");
-        await expect(page.getByTestId("separator-center")).toBeFocused();
-
-        await page.keyboard.press("F6");
-        await expect(page.getByTestId("separator-right")).toBeFocused();
-
-        await page.keyboard.press("F6");
-        await expect(page.getByTestId("separator-left")).toBeFocused();
-
-        await page.keyboard.press("Shift+F6");
-        await expect(page.getByTestId("separator-right")).toBeFocused();
-      });
-
-      test("should respect when parent Group has been disabled", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group disabled>
-            <Panel defaultSize="30%" id="left" minSize="5%" />
-            <Separator />
-            <Panel id="right" minSize="5%" />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        await assertLayoutChangeCounts(mainPage, 1);
-        await expect(mainPage.getByText('"left": 30')).toBeVisible();
-
-        const separator = page.getByRole("separator");
-
-        await separator.focus();
-        await page.keyboard.press("ArrowLeft");
-        await page.keyboard.press("ArrowRight");
-        await page.keyboard.press("ArrowUp");
-        await page.keyboard.press("ArrowDown");
-        await page.keyboard.press("Enter");
-        await page.keyboard.press("Home");
-
-        await assertLayoutChangeCounts(mainPage, 1);
-        await expect(mainPage.getByText('"left": 30')).toBeVisible();
-      });
+  test("horizontal: arrow keys", async ({ page: mainPage }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel defaultSize="30%" id="left" minSize="5%" />
+        <Separator />
+        <Panel id="right" minSize="5%" />
+      </Group>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 1);
+    await expect(mainPage.getByText('"left": 30')).toBeVisible();
+
+    await expect(await getSeparatorAriaAttributes(page)).toEqual({
+      "aria-controls": "left",
+      "aria-valuemax": "95",
+      "aria-valuemin": "5",
+      "aria-valuenow": "30"
     });
-  }
+
+    const separator = page.getByRole("separator");
+
+    await separator.focus();
+    await page.keyboard.press("ArrowLeft");
+
+    await assertLayoutChangeCounts(mainPage, 2);
+    await expect(mainPage.getByText('"left": 25')).toBeVisible();
+
+    await expect(await getSeparatorAriaAttributes(page)).toEqual({
+      "aria-controls": "left",
+      "aria-valuemax": "95",
+      "aria-valuemin": "5",
+      "aria-valuenow": "25"
+    });
+
+    await page.keyboard.press("ArrowRight");
+
+    await assertLayoutChangeCounts(mainPage, 3);
+    await expect(mainPage.getByText('"left": 30')).toBeVisible();
+
+    await expect(await getSeparatorAriaAttributes(page)).toEqual({
+      "aria-controls": "left",
+      "aria-valuemax": "95",
+      "aria-valuemin": "5",
+      "aria-valuenow": "30"
+    });
+
+    // Up/down are no-ops
+    await page.keyboard.press("ArrowUp");
+    await page.keyboard.press("ArrowDown");
+    await assertLayoutChangeCounts(mainPage, 3);
+  });
+
+  test("vertical: arrow keys", async ({ page: mainPage }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group orientation="vertical">
+        <Panel defaultSize="30%" id="top" minSize="5%" />
+        <Separator />
+        <Panel id="bottom" minSize="5%" />
+      </Group>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 1);
+    await expect(mainPage.getByText('"top": 30')).toBeVisible();
+
+    await expect(await getSeparatorAriaAttributes(page)).toEqual({
+      "aria-controls": "top",
+      "aria-valuemax": "95",
+      "aria-valuemin": "5",
+      "aria-valuenow": "30"
+    });
+
+    const separator = page.getByRole("separator");
+
+    await separator.focus();
+    await page.keyboard.press("ArrowDown");
+
+    await assertLayoutChangeCounts(mainPage, 2);
+    await expect(mainPage.getByText('"top": 35')).toBeVisible();
+
+    await expect(await getSeparatorAriaAttributes(page)).toEqual({
+      "aria-controls": "top",
+      "aria-valuemax": "95",
+      "aria-valuemin": "5",
+      "aria-valuenow": "35"
+    });
+
+    await page.keyboard.press("ArrowUp");
+
+    await assertLayoutChangeCounts(mainPage, 3);
+    await expect(mainPage.getByText('"top": 30')).toBeVisible();
+
+    await expect(await getSeparatorAriaAttributes(page)).toEqual({
+      "aria-controls": "top",
+      "aria-valuemax": "95",
+      "aria-valuemin": "5",
+      "aria-valuenow": "30"
+    });
+
+    // Left/right are no-ops
+    await page.keyboard.press("ArrowLeft");
+    await page.keyboard.press("ArrowRight");
+    await assertLayoutChangeCounts(mainPage, 3);
+  });
+
+  test("enter key and collapsible panel", async ({ page: mainPage }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel collapsible collapsedSize="5%" id="left" minSize="20%" />
+        <Separator />
+        <Panel id="right" minSize="20%" />
+      </Group>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 1);
+    await expect(mainPage.getByText('"left": 50')).toBeVisible();
+    await expect(mainPage.getByText('"right": 50')).toBeVisible();
+
+    await expect(await getSeparatorAriaAttributes(page)).toEqual({
+      "aria-controls": "left",
+      "aria-valuemax": "80",
+      "aria-valuemin": "5",
+      "aria-valuenow": "50"
+    });
+
+    const separator = page.getByRole("separator");
+    await separator.focus();
+    await page.keyboard.press("Enter");
+
+    await assertLayoutChangeCounts(mainPage, 2);
+    await expect(mainPage.getByText('"left": 5')).toBeVisible();
+    await expect(mainPage.getByText('"right": 95')).toBeVisible();
+
+    await expect(await getSeparatorAriaAttributes(page)).toEqual({
+      "aria-controls": "left",
+      "aria-valuemax": "80",
+      "aria-valuemin": "5",
+      "aria-valuenow": "5"
+    });
+
+    await page.keyboard.press("Enter");
+
+    await assertLayoutChangeCounts(mainPage, 3);
+    await expect(mainPage.getByText('"left": 50')).toBeVisible();
+    await expect(mainPage.getByText('"right": 50')).toBeVisible();
+
+    await expect(await getSeparatorAriaAttributes(page)).toEqual({
+      "aria-controls": "left",
+      "aria-valuemax": "80",
+      "aria-valuemin": "5",
+      "aria-valuenow": "50"
+    });
+
+    await page.keyboard.press("ArrowLeft");
+
+    await assertLayoutChangeCounts(mainPage, 4);
+    await expect(mainPage.getByText('"left": 45')).toBeVisible();
+    await expect(mainPage.getByText('"right": 55')).toBeVisible();
+
+    await expect(await getSeparatorAriaAttributes(page)).toEqual({
+      "aria-controls": "left",
+      "aria-valuemax": "80",
+      "aria-valuemin": "5",
+      "aria-valuenow": "45"
+    });
+
+    await page.keyboard.press("Enter");
+
+    await assertLayoutChangeCounts(mainPage, 5);
+    await expect(mainPage.getByText('"left": 5')).toBeVisible();
+    await expect(mainPage.getByText('"right": 95')).toBeVisible();
+
+    await expect(await getSeparatorAriaAttributes(page)).toEqual({
+      "aria-controls": "left",
+      "aria-valuemax": "80",
+      "aria-valuemin": "5",
+      "aria-valuenow": "5"
+    });
+
+    await page.keyboard.press("Enter");
+
+    await assertLayoutChangeCounts(mainPage, 6);
+    await expect(mainPage.getByText('"left": 45')).toBeVisible();
+    await expect(mainPage.getByText('"right": 55')).toBeVisible();
+
+    await expect(await getSeparatorAriaAttributes(page)).toEqual({
+      "aria-controls": "left",
+      "aria-valuemax": "80",
+      "aria-valuemin": "5",
+      "aria-valuenow": "45"
+    });
+  });
+
+  test("enter key and non-collapsible panel", async ({ page: mainPage }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel id="left" minSize="20%" />
+        <Separator />
+        <Panel id="right" minSize="20%" />
+      </Group>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 1);
+    await expect(mainPage.getByText('"left": 50')).toBeVisible();
+    await expect(mainPage.getByText('"right": 50')).toBeVisible();
+
+    const separator = page.getByRole("separator");
+    await separator.focus();
+    await page.keyboard.press("Enter");
+
+    await assertLayoutChangeCounts(mainPage, 1);
+  });
+
+  test("home and end keys", async ({ page: mainPage }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel id="left" minSize="20%" />
+        <Separator />
+        <Panel collapsible collapsedSize="5%" id="right" minSize="20%" />
+      </Group>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 1);
+    await expect(mainPage.getByText('"left": 50')).toBeVisible();
+    await expect(mainPage.getByText('"right": 50')).toBeVisible();
+
+    const separator = page.getByRole("separator");
+
+    await separator.focus();
+    await page.keyboard.press("Home");
+
+    await assertLayoutChangeCounts(mainPage, 2);
+    await expect(mainPage.getByText('"left": 20')).toBeVisible();
+    await expect(mainPage.getByText('"right": 80')).toBeVisible();
+
+    await page.keyboard.press("End");
+
+    await assertLayoutChangeCounts(mainPage, 3);
+    await expect(mainPage.getByText('"left": 95')).toBeVisible();
+    await expect(mainPage.getByText('"right": 5')).toBeVisible();
+  });
+
+  test("f6 key cycles through separators", async ({ page: mainPage }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel />
+        <Separator id="separator-left" />
+        <Panel />
+        <Separator id="separator-center" />
+        <div />
+        <Separator id="separator-right" />
+        <Panel />
+      </Group>
+    );
+
+    await page.getByTestId("separator-left").focus();
+    await expect(page.getByTestId("separator-left")).toBeFocused();
+
+    await page.keyboard.press("F6");
+    await expect(page.getByTestId("separator-center")).toBeFocused();
+
+    await page.keyboard.press("F6");
+    await expect(page.getByTestId("separator-right")).toBeFocused();
+
+    await page.keyboard.press("F6");
+    await expect(page.getByTestId("separator-left")).toBeFocused();
+
+    await page.keyboard.press("Shift+F6");
+    await expect(page.getByTestId("separator-right")).toBeFocused();
+  });
+
+  test("should respect when parent Group has been disabled", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group disabled>
+        <Panel defaultSize="30%" id="left" minSize="5%" />
+        <Separator />
+        <Panel id="right" minSize="5%" />
+      </Group>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 1);
+    await expect(mainPage.getByText('"left": 30')).toBeVisible();
+
+    const separator = page.getByRole("separator");
+
+    await separator.focus();
+    await page.keyboard.press("ArrowLeft");
+    await page.keyboard.press("ArrowRight");
+    await page.keyboard.press("ArrowUp");
+    await page.keyboard.press("ArrowDown");
+    await page.keyboard.press("Enter");
+    await page.keyboard.press("Home");
+
+    await assertLayoutChangeCounts(mainPage, 1);
+    await expect(mainPage.getByText('"left": 30')).toBeVisible();
+  });
 });
diff --git a/integrations/tests/tests/pointer-interactions.spec.tsx b/integrations/tests/tests/pointer-interactions.spec.tsx
index 2c612999b..f314353ac 100644
--- a/integrations/tests/tests/pointer-interactions.spec.tsx
+++ b/integrations/tests/tests/pointer-interactions.spec.tsx
@@ -10,558 +10,525 @@ import { goToUrl } from "../src/utils/goToUrl";
 import { resizeHelper } from "../src/utils/pointer-interactions/resizeHelper";
 
 test.describe("pointer interactions", () => {
-  for (const usePopUpWindow of [true, false]) {
-    test.describe(usePopUpWindow ? "in a popup" : "in the main window", () => {
-      test("drag separator to resize group", async ({ page: mainPage }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel defaultSize="30%" id="left" minSize={50} />
-            <Separator />
-            <Panel id="right" minSize={50} />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        await assertLayoutChangeCounts(mainPage, 1);
-        await expect(mainPage.getByText('"left": 30')).toBeVisible();
-
-        await resizeHelper(page, ["left", "right"], 100, 0);
-
-        await assertLayoutChangeCounts(mainPage, 2);
-        await expect(mainPage.getByText('"left": 40')).toBeVisible();
-
-        await resizeHelper(page, ["left", "right"], 1000, 0);
+  test("drag separator to resize group", async ({ page: mainPage }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel defaultSize="30%" id="left" minSize={50} />
+        <Separator />
+        <Panel id="right" minSize={50} />
+      </Group>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 1);
+    await expect(mainPage.getByText('"left": 30')).toBeVisible();
+
+    await resizeHelper(page, ["left", "right"], 100, 0);
+
+    await assertLayoutChangeCounts(mainPage, 2);
+    await expect(mainPage.getByText('"left": 40')).toBeVisible();
+
+    await resizeHelper(page, ["left", "right"], 1000, 0);
+
+    await assertLayoutChangeCounts(mainPage, 3);
+    await expect(mainPage.getByText('"left": 95')).toBeVisible();
+
+    await resizeHelper(page, ["left", "right"], -1000, 0);
+
+    await assertLayoutChangeCounts(mainPage, 4);
+    await expect(mainPage.getByText('"left": 5')).toBeVisible();
+  });
 
-        await assertLayoutChangeCounts(mainPage, 3);
-        await expect(mainPage.getByText('"left": 95')).toBeVisible();
-
-        await resizeHelper(page, ["left", "right"], -1000, 0);
+  // See github.com/bvaughn/react-resizable-panels/issues/581
+  test("should not handle or call preventDefault for right-click events", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel defaultSize="30%" id="left" minSize={50} />
+        <Separator />
+        <Panel id="right" minSize={50} />
+      </Group>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 1);
+    await expect(mainPage.getByText('"left": 30')).toBeVisible();
+
+    const separator = page.getByRole("separator");
+    const box = (await separator.boundingBox())!;
+
+    await page.mouse.move(box.x, box.y);
+    await page.mouse.down({ button: "right" });
+
+    // Right-click should have been registered but not handled by this library
+    await expect(separator).not.toHaveAttribute("data-separator", "active");
+
+    // Subsequent clicks should not impact the layout
+    await page.mouse.move(box.x - 100, box.y);
+    await page.mouse.click(0, 0);
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    await assertLayoutChangeCounts(mainPage, 1);
+    await expect(mainPage.getByText('"left": 30')).toBeVisible();
+  });
+
+  // See github.com/bvaughn/react-resizable-panels/issues/594
+  test("should only call preventDefault for pointerup events that were handled by this library", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Container className="relative">
+        <Group>
+          <Panel defaultSize="30%" id="left" minSize={50} />
+          <Separator />
+          <Panel id="right" minSize={50} />
+        </Group>
+        <Clickable className="bg-red-600 absolute left-0 top-0 p-2" />
+      </Container>
+    );
+
+    const clickable = page.getByText("Clickable");
+    const clickableBox = (await clickable.boundingBox())!;
+
+    // A handled "pointerdown" event should also prevent the corresponding "pointerup" event
+
+    const separator = page.getByRole("separator");
+    const separatorBox = (await separator.boundingBox())!;
+
+    await page.mouse.move(separatorBox.x, separatorBox.y + separatorBox.height);
+    await page.mouse.down();
+    await page.mouse.move(clickableBox.x, clickableBox.y);
+    await page.mouse.up();
+
+    await expect(page.getByText("Clickable down:0 up:0")).toBeVisible();
+
+    // An unhandled "pointerdown" event should not prevent the corresponding "pointerup" event
+
+    await page.mouse.move(1000, 0);
+    await page.mouse.down();
+    await page.mouse.move(clickableBox.x, clickableBox.y);
+    await page.mouse.up();
+
+    await expect(page.getByText("Clickable down:0 up:1")).toBeVisible();
+  });
+
+  test("drag panel boundary to resize group", async ({ page: mainPage }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel defaultSize="30%" id="left" minSize={50} />
+        <Panel id="right" minSize={50} />
+      </Group>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 1);
+    await expect(mainPage.getByText('"left": 30')).toBeVisible();
+
+    await resizeHelper(page, ["left", "right"], 100, 0);
+
+    await assertLayoutChangeCounts(mainPage, 2);
+    await expect(mainPage.getByText('"left": 40')).toBeVisible();
+
+    await resizeHelper(page, ["left", "right"], 1000, 0);
+
+    await assertLayoutChangeCounts(mainPage, 3);
+    await expect(mainPage.getByText('"left": 95')).toBeVisible();
+
+    await resizeHelper(page, ["left", "right"], -1000, 0);
+
+    await assertLayoutChangeCounts(mainPage, 4);
+    await expect(mainPage.getByText('"left": 5')).toBeVisible();
+  });
+
+  test("should not resize when disabled", async ({ page: mainPage }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group disabled>
+        <Panel defaultSize="30%" id="left" minSize={50} />
+        <Separator />
+        <Panel id="right" minSize={50} />
+      </Group>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 1);
+    await expect(mainPage.getByText('"left": 30')).toBeVisible();
+
+    await resizeHelper(page, ["left", "right"], 100, 0);
+
+    await assertLayoutChangeCounts(mainPage, 1);
+    await expect(mainPage.getByText('"left": 30')).toBeVisible();
+  });
+
+  test("dragging a handle should resize multiple panels", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel id="left" minSize={50} />
+        <Separator />
+        <Panel id="center" minSize={50} />
+        <Separator />
+        <Panel id="right" minSize={50} />
+      </Group>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 1);
+    await expect(mainPage.getByText('"left": 33')).toBeVisible();
+    await expect(mainPage.getByText('"center": 33')).toBeVisible();
+    await expect(mainPage.getByText('"right": 33')).toBeVisible();
+
+    await resizeHelper(page, ["left", "center"], 1000, 0);
+
+    await assertLayoutChangeCounts(mainPage, 2);
+    await expect(mainPage.getByText('"left": 89')).toBeVisible();
+    await expect(mainPage.getByText('"center": 5')).toBeVisible();
+    await expect(mainPage.getByText('"right": 5')).toBeVisible();
+
+    await resizeHelper(page, ["center", "right"], -1000, 0);
+
+    await assertLayoutChangeCounts(mainPage, 3);
+    await expect(mainPage.getByText('"left": 5')).toBeVisible();
+    await expect(mainPage.getByText('"center": 5')).toBeVisible();
+    await expect(mainPage.getByText('"right": 89')).toBeVisible();
+
+    await resizeHelper(page, ["center", "right"], 1000, 0);
+
+    await assertLayoutChangeCounts(mainPage, 4);
+    await expect(mainPage.getByText('"left": 5')).toBeVisible();
+    await expect(mainPage.getByText('"center": 89')).toBeVisible();
+    await expect(mainPage.getByText('"right": 5')).toBeVisible();
+  });
+
+  test("initial position should be the anchor while a drag is in progress", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel id="left" minSize={50} />
+        <Separator />
+        <Panel id="center" minSize={50} />
+        <Separator />
+        <Panel id="right" minSize={50} />
+      </Group>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 1, 1);
+    await expect(mainPage.getByText('"left": 33')).toBeVisible();
+    await expect(mainPage.getByText('"center": 33')).toBeVisible();
+    await expect(mainPage.getByText('"right": 33')).toBeVisible();
+
+    const hitAreaBox = await calculateHitArea(page, ["left", "center"]);
+    const { x, y } = getCenterCoordinates(hitAreaBox);
+
+    await page.mouse.move(x, y);
+    await page.mouse.down();
+    await page.mouse.move(x + 500, y, {
+      steps: 1
+    });
 
-        await assertLayoutChangeCounts(mainPage, 4);
-        await expect(mainPage.getByText('"left": 5')).toBeVisible();
-      });
+    await assertLayoutChangeCounts(mainPage, 2, 1);
+    await expect(mainPage.getByText('"left": 86')).toBeVisible();
+    await expect(mainPage.getByText('"center": 5')).toBeVisible();
+    await expect(mainPage.getByText('"right": 9')).toBeVisible();
+
+    await page.mouse.move(x - 500, y);
+
+    await assertLayoutChangeCounts(mainPage, 3, 1);
+    await expect(mainPage.getByText('"left": 5')).toBeVisible();
+    await expect(mainPage.getByText('"center": 61')).toBeVisible();
+    await expect(mainPage.getByText('"right": 33')).toBeVisible();
+
+    await page.mouse.move(x, y);
+    await page.mouse.up();
+
+    // TRICKY Because the cursor ended at the exact same starting spot, no layout change was committed
+    await assertLayoutChangeCounts(mainPage, 4, 1);
+    await expect(mainPage.getByText('"left": 33')).toBeVisible();
+    await expect(mainPage.getByText('"center": 33')).toBeVisible();
+    await expect(mainPage.getByText('"right": 33')).toBeVisible();
+  });
+
+  test("drag should measure delta using the available group size (minus flex gap)", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group className="gap-20">
+        <Panel defaultSize="10%" id="left" minSize="5%" />
+        <Separator />
+        <Panel id="right" minSize="5%" />
+      </Group>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 1);
+    await expect(mainPage.getByText('"left": 10')).toBeVisible();
+
+    await resizeHelper(page, ["left", "right"], 800, 0);
+
+    // The new layout would be ~91% and 9% if not for flex-gap
+    await assertLayoutChangeCounts(mainPage, 2);
+    await expect(mainPage.getByText('"left": 95')).toBeVisible();
+  });
+
+  test("should disable pointer-events while resize is active", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel id="left" />
+        <Separator />
+        <Panel id="right" />
+      </Group>
+    );
+
+    const hitAreaBox = await calculateHitArea(page, ["left", "right"]);
+    const { x, y } = getCenterCoordinates(hitAreaBox);
+
+    const panel = page.getByText("id: left");
+
+    await page.mouse.move(x, y);
+    await expect(panel).toHaveCSS("pointer-events", "auto");
+
+    await page.mouse.down();
+    await expect(panel).toHaveCSS("pointer-events", "none");
+
+    await page.mouse.up();
+    await expect(panel).toHaveCSS("pointer-events", "auto");
+  });
+
+  test("does not notify on-changed handler until pointer resize finishes", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel id="left" minSize={50} />
+        <Separator />
+        <Panel id="center" minSize={50} />
+        <Separator />
+        <Panel id="right" minSize={50} />
+      </Group>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 1, 1);
+    await expect(mainPage.getByText('"left": 33')).toBeVisible();
+    await expect(mainPage.getByText('"center": 33')).toBeVisible();
+    await expect(mainPage.getByText('"right": 33')).toBeVisible();
+
+    const hitAreaBox = await calculateHitArea(page, ["left", "center"]);
+    const { x, y } = getCenterCoordinates(hitAreaBox);
+
+    await page.mouse.move(x, y);
+    await page.mouse.down();
+    await page.mouse.move(x + 500, y, {
+      steps: 1
+    });
 
-      // See github.com/bvaughn/react-resizable-panels/issues/581
-      test("should not handle or call preventDefault for right-click events", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel defaultSize="30%" id="left" minSize={50} />
-            <Separator />
-            <Panel id="right" minSize={50} />
-          </Group>,
-          { usePopUpWindow }
-        );
+    await assertLayoutChangeCounts(mainPage, 2, 1);
+    await expect(mainPage.getByText('"left": 86')).toBeVisible();
+    await expect(mainPage.getByText('"center": 5')).toBeVisible();
+    await expect(mainPage.getByText('"right": 9')).toBeVisible();
+
+    await page.mouse.move(x - 500, y);
+
+    await assertLayoutChangeCounts(mainPage, 3, 1);
+    await expect(mainPage.getByText('"left": 5')).toBeVisible();
+    await expect(mainPage.getByText('"center": 61')).toBeVisible();
+    await expect(mainPage.getByText('"right": 33')).toBeVisible();
+
+    await page.mouse.up();
+
+    await assertLayoutChangeCounts(mainPage, 3, 2);
+    await expect(mainPage.getByText('"left": 5')).toBeVisible();
+    await expect(mainPage.getByText('"center": 61')).toBeVisible();
+    await expect(mainPage.getByText('"right": 33')).toBeVisible();
+  });
+
+  test("double-clicking a separator resets primary panel to default size", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel defaultSize="30%" id="left" minSize={50} />
+        <Separator id="separator" />
+        <Panel id="right" minSize={50} />
+      </Group>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 1);
+    await expect(mainPage.getByText('"left": 30')).toBeVisible();
+
+    await resizeHelper(page, ["left", "right"], 100, 0);
+
+    await assertLayoutChangeCounts(mainPage, 2);
+    await expect(mainPage.getByText('"left": 40')).toBeVisible();
+
+    const separator = page.getByTestId("separator");
+    await separator.dblclick();
+
+    await assertLayoutChangeCounts(mainPage, 3);
+    await expect(mainPage.getByText('"left": 30')).toBeVisible();
+  });
+
+  test("double-clicking a separator resets secondary panel to default size", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel id="left" minSize={50} />
+        <Separator id="separator" />
+        <Panel defaultSize="70%" id="right" minSize={50} />
+      </Group>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 1);
+    await expect(mainPage.getByText('"left": 30')).toBeVisible();
+
+    await resizeHelper(page, ["left", "right"], 100, 0);
+
+    await assertLayoutChangeCounts(mainPage, 2);
+    await expect(mainPage.getByText('"left": 40')).toBeVisible();
+
+    const separator = page.getByTestId("separator");
+    await separator.dblclick();
+
+    await assertLayoutChangeCounts(mainPage, 3);
+    await expect(mainPage.getByText('"left": 30')).toBeVisible();
+  });
+
+  test.describe("focus", () => {
+    test("should update focus to the nearest separator", async ({
+      page: mainPage
+    }) => {
+      const page = await goToUrl(
+        mainPage,
+        <Group>
+          <Panel id="left" />
+          <Separator id="separator-left" />
+          <Panel id="center" />
+          <Separator id="separator-right" />
+          <Panel id="right" />
+        </Group>
+      );
+
+      const hitAreaBox = await calculateHitArea(page, ["center", "right"]);
+      const { x, y } = getCenterCoordinates(hitAreaBox);
+
+      const separator = page.getByTestId("separator-right");
+      await expect(separator).not.toBeFocused();
+
+      await page.mouse.move(x, y);
+      await page.mouse.down();
+      await page.mouse.up();
+
+      await expect(separator).toBeFocused();
+    });
 
-        await assertLayoutChangeCounts(mainPage, 1);
-        await expect(mainPage.getByText('"left": 30')).toBeVisible();
-
-        const separator = page.getByRole("separator");
-        const box = (await separator.boundingBox())!;
-
-        await page.mouse.move(box.x, box.y);
-        await page.mouse.down({ button: "right" });
-
-        // Right-click should have been registered but not handled by this library
-        await expect(separator).not.toHaveAttribute("data-separator", "active");
-
-        // Subsequent clicks should not impact the layout
-        await page.mouse.move(box.x - 100, box.y);
-        await page.mouse.click(0, 0);
-
-        await new Promise((resolve) => setTimeout(resolve, 100));
-
-        await assertLayoutChangeCounts(mainPage, 1);
-        await expect(mainPage.getByText('"left": 30')).toBeVisible();
-      });
-
-      // See github.com/bvaughn/react-resizable-panels/issues/594
-      test("should only call preventDefault for pointerup events that were handled by this library", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Container className="relative">
-            <Group>
-              <Panel defaultSize="30%" id="left" minSize={50} />
-              <Separator />
-              <Panel id="right" minSize={50} />
-            </Group>
-            <Clickable className="bg-red-600 absolute left-0 top-0 p-2" />
-          </Container>,
-          { usePopUpWindow }
+    test("should activate the closest separator in the event that there is two", async ({
+      page: mainPage
+    }) => {
+      const page = await goToUrl(
+        mainPage,
+        <Group>
+          <Panel id="left" />
+          <Separator id="separator-left" />
+          <div>fixed size</div>
+          <Separator id="separator-right" />
+          <Panel id="right" />
+        </Group>
+      );
+
+      const separatorLeft = page.getByTestId("separator-left");
+      const separatorRight = page.getByTestId("separator-right");
+
+      {
+        const { x, y } = getCenterCoordinates(
+          (await separatorRight.boundingBox())!
         );
 
-        const clickable = page.getByText("Clickable");
-        const clickableBox = (await clickable.boundingBox())!;
-
-        // A handled "pointerdown" event should also prevent the corresponding "pointerup" event
-
-        const separator = page.getByRole("separator");
-        const separatorBox = (await separator.boundingBox())!;
+        await expect(separatorRight).not.toBeFocused();
 
-        await page.mouse.move(
-          separatorBox.x,
-          separatorBox.y + separatorBox.height
+        await page.mouse.move(x, y);
+        await expect(separatorLeft).not.toHaveAttribute(
+          "data-separator",
+          "hover"
         );
-        await page.mouse.down();
-        await page.mouse.move(clickableBox.x, clickableBox.y);
-        await page.mouse.up();
-
-        await expect(page.getByText("Clickable down:0 up:0")).toBeVisible();
+        await expect(separatorRight).toHaveAttribute("data-separator", "hover");
 
-        // An unhandled "pointerdown" event should not prevent the corresponding "pointerup" event
-
-        await page.mouse.move(1000, 0);
         await page.mouse.down();
-        await page.mouse.move(clickableBox.x, clickableBox.y);
-        await page.mouse.up();
-
-        await expect(page.getByText("Clickable down:0 up:1")).toBeVisible();
-      });
-
-      test("drag panel boundary to resize group", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel defaultSize="30%" id="left" minSize={50} />
-            <Panel id="right" minSize={50} />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        await assertLayoutChangeCounts(mainPage, 1);
-        await expect(mainPage.getByText('"left": 30')).toBeVisible();
-
-        await resizeHelper(page, ["left", "right"], 100, 0);
-
-        await assertLayoutChangeCounts(mainPage, 2);
-        await expect(mainPage.getByText('"left": 40')).toBeVisible();
-
-        await resizeHelper(page, ["left", "right"], 1000, 0);
-
-        await assertLayoutChangeCounts(mainPage, 3);
-        await expect(mainPage.getByText('"left": 95')).toBeVisible();
-
-        await resizeHelper(page, ["left", "right"], -1000, 0);
-
-        await assertLayoutChangeCounts(mainPage, 4);
-        await expect(mainPage.getByText('"left": 5')).toBeVisible();
-      });
-
-      test("should not resize when disabled", async ({ page: mainPage }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group disabled>
-            <Panel defaultSize="30%" id="left" minSize={50} />
-            <Separator />
-            <Panel id="right" minSize={50} />
-          </Group>,
-          { usePopUpWindow }
+        await expect(separatorLeft).not.toHaveAttribute(
+          "data-separator",
+          "active"
         );
-
-        await assertLayoutChangeCounts(mainPage, 1);
-        await expect(mainPage.getByText('"left": 30')).toBeVisible();
-
-        await resizeHelper(page, ["left", "right"], 100, 0);
-
-        await assertLayoutChangeCounts(mainPage, 1);
-        await expect(mainPage.getByText('"left": 30')).toBeVisible();
-      });
-
-      test("dragging a handle should resize multiple panels", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel id="left" minSize={50} />
-            <Separator />
-            <Panel id="center" minSize={50} />
-            <Separator />
-            <Panel id="right" minSize={50} />
-          </Group>,
-          { usePopUpWindow }
+        await expect(separatorRight).toHaveAttribute(
+          "data-separator",
+          "active"
         );
 
-        await assertLayoutChangeCounts(mainPage, 1);
-        await expect(mainPage.getByText('"left": 33')).toBeVisible();
-        await expect(mainPage.getByText('"center": 33')).toBeVisible();
-        await expect(mainPage.getByText('"right": 33')).toBeVisible();
-
-        await resizeHelper(page, ["left", "center"], 1000, 0);
-
-        await assertLayoutChangeCounts(mainPage, 2);
-        await expect(mainPage.getByText('"left": 89')).toBeVisible();
-        await expect(mainPage.getByText('"center": 5')).toBeVisible();
-        await expect(mainPage.getByText('"right": 5')).toBeVisible();
-
-        await resizeHelper(page, ["center", "right"], -1000, 0);
-
-        await assertLayoutChangeCounts(mainPage, 3);
-        await expect(mainPage.getByText('"left": 5')).toBeVisible();
-        await expect(mainPage.getByText('"center": 5')).toBeVisible();
-        await expect(mainPage.getByText('"right": 89')).toBeVisible();
-
-        await resizeHelper(page, ["center", "right"], 1000, 0);
-
-        await assertLayoutChangeCounts(mainPage, 4);
-        await expect(mainPage.getByText('"left": 5')).toBeVisible();
-        await expect(mainPage.getByText('"center": 89')).toBeVisible();
-        await expect(mainPage.getByText('"right": 5')).toBeVisible();
-      });
-
-      test("initial position should be the anchor while a drag is in progress", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel id="left" minSize={50} />
-            <Separator />
-            <Panel id="center" minSize={50} />
-            <Separator />
-            <Panel id="right" minSize={50} />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        await assertLayoutChangeCounts(mainPage, 1, 1);
-        await expect(mainPage.getByText('"left": 33')).toBeVisible();
-        await expect(mainPage.getByText('"center": 33')).toBeVisible();
-        await expect(mainPage.getByText('"right": 33')).toBeVisible();
-
-        const hitAreaBox = await calculateHitArea(page, ["left", "center"]);
-        const { x, y } = getCenterCoordinates(hitAreaBox);
-
-        await page.mouse.move(x, y);
-        await page.mouse.down();
-        await page.mouse.move(x + 500, y, {
-          steps: 1
-        });
-
-        await assertLayoutChangeCounts(mainPage, 2, 1);
-        await expect(mainPage.getByText('"left": 86')).toBeVisible();
-        await expect(mainPage.getByText('"center": 5')).toBeVisible();
-        await expect(mainPage.getByText('"right": 9')).toBeVisible();
-
-        await page.mouse.move(x - 500, y);
-
-        await assertLayoutChangeCounts(mainPage, 3, 1);
-        await expect(mainPage.getByText('"left": 5')).toBeVisible();
-        await expect(mainPage.getByText('"center": 61')).toBeVisible();
-        await expect(mainPage.getByText('"right": 33')).toBeVisible();
-
-        await page.mouse.move(x, y);
         await page.mouse.up();
+        await expect(separatorRight).toBeFocused();
+      }
 
-        // TRICKY Because the cursor ended at the exact same starting spot, no layout change was committed
-        await assertLayoutChangeCounts(mainPage, 4, 1);
-        await expect(mainPage.getByText('"left": 33')).toBeVisible();
-        await expect(mainPage.getByText('"center": 33')).toBeVisible();
-        await expect(mainPage.getByText('"right": 33')).toBeVisible();
-      });
-
-      test("drag should measure delta using the available group size (minus flex gap)", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group className="gap-20">
-            <Panel defaultSize="10%" id="left" minSize="5%" />
-            <Separator />
-            <Panel id="right" minSize="5%" />
-          </Group>,
-          { usePopUpWindow }
+      {
+        const { x, y } = getCenterCoordinates(
+          (await separatorLeft.boundingBox())!
         );
 
-        await assertLayoutChangeCounts(mainPage, 1);
-        await expect(mainPage.getByText('"left": 10')).toBeVisible();
-
-        await resizeHelper(page, ["left", "right"], 800, 0);
-
-        // The new layout would be ~91% and 9% if not for flex-gap
-        await assertLayoutChangeCounts(mainPage, 2);
-        await expect(mainPage.getByText('"left": 95')).toBeVisible();
-      });
-
-      test("should disable pointer-events while resize is active", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel id="left" />
-            <Separator />
-            <Panel id="right" />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        const hitAreaBox = await calculateHitArea(page, ["left", "right"]);
-        const { x, y } = getCenterCoordinates(hitAreaBox);
-
-        const panel = page.getByText("id: left");
+        await expect(separatorLeft).not.toBeFocused();
 
         await page.mouse.move(x, y);
-        await expect(panel).toHaveCSS("pointer-events", "auto");
-
-        await page.mouse.down();
-        await expect(panel).toHaveCSS("pointer-events", "none");
-
-        await page.mouse.up();
-        await expect(panel).toHaveCSS("pointer-events", "auto");
-      });
-
-      test("does not notify on-changed handler until pointer resize finishes", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel id="left" minSize={50} />
-            <Separator />
-            <Panel id="center" minSize={50} />
-            <Separator />
-            <Panel id="right" minSize={50} />
-          </Group>,
-          { usePopUpWindow }
+        await expect(separatorLeft).toHaveAttribute("data-separator", "hover");
+        await expect(separatorRight).not.toHaveAttribute(
+          "data-separator",
+          "hover"
         );
 
-        await assertLayoutChangeCounts(mainPage, 1, 1);
-        await expect(mainPage.getByText('"left": 33')).toBeVisible();
-        await expect(mainPage.getByText('"center": 33')).toBeVisible();
-        await expect(mainPage.getByText('"right": 33')).toBeVisible();
-
-        const hitAreaBox = await calculateHitArea(page, ["left", "center"]);
-        const { x, y } = getCenterCoordinates(hitAreaBox);
-
-        await page.mouse.move(x, y);
         await page.mouse.down();
-        await page.mouse.move(x + 500, y, {
-          steps: 1
-        });
-
-        await assertLayoutChangeCounts(mainPage, 2, 1);
-        await expect(mainPage.getByText('"left": 86')).toBeVisible();
-        await expect(mainPage.getByText('"center": 5')).toBeVisible();
-        await expect(mainPage.getByText('"right": 9')).toBeVisible();
-
-        await page.mouse.move(x - 500, y);
-
-        await assertLayoutChangeCounts(mainPage, 3, 1);
-        await expect(mainPage.getByText('"left": 5')).toBeVisible();
-        await expect(mainPage.getByText('"center": 61')).toBeVisible();
-        await expect(mainPage.getByText('"right": 33')).toBeVisible();
-
-        await page.mouse.up();
-
-        await assertLayoutChangeCounts(mainPage, 3, 2);
-        await expect(mainPage.getByText('"left": 5')).toBeVisible();
-        await expect(mainPage.getByText('"center": 61')).toBeVisible();
-        await expect(mainPage.getByText('"right": 33')).toBeVisible();
-      });
-
-      test("double-clicking a separator resets primary panel to default size", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel defaultSize="30%" id="left" minSize={50} />
-            <Separator id="separator" />
-            <Panel id="right" minSize={50} />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        await assertLayoutChangeCounts(mainPage, 1);
-        await expect(mainPage.getByText('"left": 30')).toBeVisible();
-
-        await resizeHelper(page, ["left", "right"], 100, 0);
-
-        await assertLayoutChangeCounts(mainPage, 2);
-        await expect(mainPage.getByText('"left": 40')).toBeVisible();
-
-        const separator = page.getByTestId("separator");
-        await separator.dblclick();
-
-        await assertLayoutChangeCounts(mainPage, 3);
-        await expect(mainPage.getByText('"left": 30')).toBeVisible();
-      });
-
-      test("double-clicking a separator resets secondary panel to default size", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel id="left" minSize={50} />
-            <Separator id="separator" />
-            <Panel defaultSize="70%" id="right" minSize={50} />
-          </Group>,
-          { usePopUpWindow }
+        await expect(separatorLeft).toHaveAttribute("data-separator", "active");
+        await expect(separatorRight).not.toHaveAttribute(
+          "data-separator",
+          "active"
         );
 
-        await assertLayoutChangeCounts(mainPage, 1);
-        await expect(mainPage.getByText('"left": 30')).toBeVisible();
-
-        await resizeHelper(page, ["left", "right"], 100, 0);
-
-        await assertLayoutChangeCounts(mainPage, 2);
-        await expect(mainPage.getByText('"left": 40')).toBeVisible();
-
-        const separator = page.getByTestId("separator");
-        await separator.dblclick();
-
-        await assertLayoutChangeCounts(mainPage, 3);
-        await expect(mainPage.getByText('"left": 30')).toBeVisible();
-      });
-
-      test.describe("focus", () => {
-        test("should update focus to the nearest separator", async ({
-          page: mainPage
-        }) => {
-          const page = await goToUrl(
-            mainPage,
-            <Group>
-              <Panel id="left" />
-              <Separator id="separator-left" />
-              <Panel id="center" />
-              <Separator id="separator-right" />
-              <Panel id="right" />
-            </Group>,
-            { usePopUpWindow }
-          );
-
-          const hitAreaBox = await calculateHitArea(page, ["center", "right"]);
-          const { x, y } = getCenterCoordinates(hitAreaBox);
-
-          const separator = page.getByTestId("separator-right");
-          await expect(separator).not.toBeFocused();
-
-          await page.mouse.move(x, y);
-          await page.mouse.down();
-          await page.mouse.up();
-
-          await expect(separator).toBeFocused();
-        });
-
-        test("should activate the closest separator in the event that there is two", async ({
-          page: mainPage
-        }) => {
-          const page = await goToUrl(
-            mainPage,
-            <Group>
-              <Panel id="left" />
-              <Separator id="separator-left" />
-              <div>fixed size</div>
-              <Separator id="separator-right" />
-              <Panel id="right" />
-            </Group>,
-            { usePopUpWindow }
-          );
-
-          const separatorLeft = page.getByTestId("separator-left");
-          const separatorRight = page.getByTestId("separator-right");
-
-          {
-            const { x, y } = getCenterCoordinates(
-              (await separatorRight.boundingBox())!
-            );
-
-            await expect(separatorRight).not.toBeFocused();
-
-            await page.mouse.move(x, y);
-            await expect(separatorLeft).not.toHaveAttribute(
-              "data-separator",
-              "hover"
-            );
-            await expect(separatorRight).toHaveAttribute(
-              "data-separator",
-              "hover"
-            );
-
-            await page.mouse.down();
-            await expect(separatorLeft).not.toHaveAttribute(
-              "data-separator",
-              "active"
-            );
-            await expect(separatorRight).toHaveAttribute(
-              "data-separator",
-              "active"
-            );
-
-            await page.mouse.up();
-            await expect(separatorRight).toBeFocused();
-          }
-
-          {
-            const { x, y } = getCenterCoordinates(
-              (await separatorLeft.boundingBox())!
-            );
-
-            await expect(separatorLeft).not.toBeFocused();
-
-            await page.mouse.move(x, y);
-            await expect(separatorLeft).toHaveAttribute(
-              "data-separator",
-              "hover"
-            );
-            await expect(separatorRight).not.toHaveAttribute(
-              "data-separator",
-              "hover"
-            );
-
-            await page.mouse.down();
-            await expect(separatorLeft).toHaveAttribute(
-              "data-separator",
-              "active"
-            );
-            await expect(separatorRight).not.toHaveAttribute(
-              "data-separator",
-              "active"
-            );
-
-            await page.mouse.up();
-            await expect(separatorLeft).toBeFocused();
-          }
-        });
-      });
-
-      // See github.com/bvaughn/react-resizable-panels/issues/645
-      test("should update separator state when the cursor mouses over an iframe", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group className="gap-0!">
-            <Panel className="p-0! *:p-0!" id="left">
-              <IFrame className="w-full h-full" />
-            </Panel>
-            <Separator id="separator" />
-            <Panel className="p-0! *:p-0!" id="right" />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        const separator = page.getByTestId("separator");
-
-        const { x, y } = getCenterCoordinates((await separator.boundingBox())!);
-
-        await expect(separator).toHaveAttribute("data-separator", "inactive");
-
-        await page.mouse.move(x, y);
-        await expect(separator).toHaveAttribute("data-separator", "hover");
-
-        await page.mouse.move(x - 25, y);
-        await expect(separator).toHaveAttribute("data-separator", "inactive");
-      });
+        await page.mouse.up();
+        await expect(separatorLeft).toBeFocused();
+      }
     });
-  }
+  });
+
+  // See github.com/bvaughn/react-resizable-panels/issues/645
+  test("should update separator state when the cursor mouses over an iframe", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group className="gap-0!">
+        <Panel className="p-0! *:p-0!" id="left">
+          <IFrame className="w-full h-full" />
+        </Panel>
+        <Separator id="separator" />
+        <Panel className="p-0! *:p-0!" id="right" />
+      </Group>
+    );
+
+    const separator = page.getByTestId("separator");
+
+    const { x, y } = getCenterCoordinates((await separator.boundingBox())!);
+
+    await expect(separator).toHaveAttribute("data-separator", "inactive");
+
+    await page.mouse.move(x, y);
+    await expect(separator).toHaveAttribute("data-separator", "hover");
+
+    await page.mouse.move(x - 25, y);
+    await expect(separator).toHaveAttribute("data-separator", "inactive");
+  });
 });
diff --git a/integrations/tests/tests/resize-events.spec.tsx b/integrations/tests/tests/resize-events.spec.tsx
index cae743416..fdf44d2dc 100644
--- a/integrations/tests/tests/resize-events.spec.tsx
+++ b/integrations/tests/tests/resize-events.spec.tsx
@@ -5,214 +5,207 @@ import { expectPanelSize } from "../src/utils/expectPanelSize";
 import { goToUrl } from "../src/utils/goToUrl";
 
 test.describe("resize events", () => {
-  for (const usePopUpWindow of [true, false]) {
-    test.describe(usePopUpWindow ? "in a popup" : "in the main window", () => {
-      test("resizing the window should revalidate group layout constraints", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel defaultSize="30%" id="left" minSize={250} />
-            <Separator />
-            <Panel id="right" minSize={50} />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        await expectLayout({
-          layout: {
-            left: 30,
-            right: 70
-          },
-          mainPage,
-          onLayoutChangeCount: 1,
-          onLayoutChangedCount: 1
-        });
-        await expectPanelSize({
-          mainPage,
-          onResizeCount: 1,
-          panelId: "left",
-          panelSize: {
-            asPercentage: 30,
-            inPixels: 293
-          }
-        });
-        await expectPanelSize({
-          mainPage,
-          onResizeCount: 1,
-          panelId: "right",
-          panelSize: {
-            asPercentage: 70,
-            inPixels: 683
-          }
-        });
-
-        await page.setViewportSize({
-          width: 500,
-          height: 500
-        });
-
-        await expectLayout({
-          layout: {
-            left: 53,
-            right: 47
-          },
-          mainPage,
-          onLayoutChangeCount: 2,
-          onLayoutChangedCount: 2
-        });
-        await expectPanelSize({
-          mainPage,
-          onResizeCount: 3,
-          panelId: "left",
-          panelSize: {
-            asPercentage: 53,
-            inPixels: 250
-          },
-          prevPanelSize: {
-            asPercentage: 30,
-            inPixels: 143
-          }
-        });
-        await expectPanelSize({
-          mainPage,
-          onResizeCount: 3,
-          panelId: "right",
-          panelSize: {
-            asPercentage: 47,
-            inPixels: 226
-          },
-          prevPanelSize: {
-            asPercentage: 70,
-            inPixels: 333
-          }
-        });
-
-        await page.setViewportSize({
-          width: 1000,
-          height: 500
-        });
-
-        await expectLayout({
-          layout: {
-            left: 53,
-            right: 47
-          },
-          mainPage,
-          onLayoutChangeCount: 2,
-          onLayoutChangedCount: 2
-        });
-      });
-
-      test("resizing the window should revalidate group layout constraints alt", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel id="left" minSize={50} />
-            <Separator />
-            <Panel id="right" minSize={50} />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        await expectLayout({
-          layout: {
-            left: 50,
-            right: 50
-          },
-          mainPage,
-          onLayoutChangeCount: 1,
-          onLayoutChangedCount: 1
-        });
-
-        await page.setViewportSize({
-          width: 500,
-          height: 500
-        });
-
-        await expectLayout({
-          layout: {
-            left: 50,
-            right: 50
-          },
-          mainPage,
-          onLayoutChangeCount: 1,
-          onLayoutChangedCount: 1
-        });
-
-        const bounds = (await page.getByRole("separator").boundingBox())!;
-        await page.mouse.move(bounds.x, bounds.y);
-        await page.mouse.down();
-        await page.mouse.move(0, bounds.y);
-
-        // Left would be 5% if the constraints were stale
-        await expectLayout({
-          layout: {
-            left: 11,
-            right: 89
-          },
-          mainPage,
-          onLayoutChangeCount: 2,
-          onLayoutChangedCount: 1
-        });
-      });
-
-      test("resizing the window should notify Panel resize handlers", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Group>
-            <Panel defaultSize="30%" id="left" minSize={250} />
-            <Separator />
-            <Panel id="right" minSize={50} />
-          </Group>,
-          { usePopUpWindow }
-        );
-
-        await expectLayout({
-          layout: {
-            left: 30,
-            right: 70
-          },
-          mainPage,
-          onLayoutChangeCount: 1,
-          onLayoutChangedCount: 1
-        });
-
-        await page.setViewportSize({
-          width: 500,
-          height: 500
-        });
-
-        await expectLayout({
-          layout: {
-            left: 53,
-            right: 47
-          },
-          mainPage,
-          onLayoutChangeCount: 2,
-          onLayoutChangedCount: 2
-        });
-
-        await page.setViewportSize({
-          width: 1000,
-          height: 500
-        });
-
-        await expectLayout({
-          layout: {
-            left: 53,
-            right: 47
-          },
-          mainPage,
-          onLayoutChangeCount: 2,
-          onLayoutChangedCount: 2
-        });
-      });
-    });
-  }
+  test("resizing the window should revalidate group layout constraints", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel defaultSize="30%" id="left" minSize={250} />
+        <Separator />
+        <Panel id="right" minSize={50} />
+      </Group>
+    );
+
+    await expectLayout({
+      layout: {
+        left: 30,
+        right: 70
+      },
+      mainPage,
+      onLayoutChangeCount: 1,
+      onLayoutChangedCount: 1
+    });
+    await expectPanelSize({
+      mainPage,
+      onResizeCount: 1,
+      panelId: "left",
+      panelSize: {
+        asPercentage: 30,
+        inPixels: 293
+      }
+    });
+    await expectPanelSize({
+      mainPage,
+      onResizeCount: 1,
+      panelId: "right",
+      panelSize: {
+        asPercentage: 70,
+        inPixels: 683
+      }
+    });
+
+    await page.setViewportSize({
+      width: 500,
+      height: 500
+    });
+
+    await expectLayout({
+      layout: {
+        left: 53,
+        right: 47
+      },
+      mainPage,
+      onLayoutChangeCount: 2,
+      onLayoutChangedCount: 2
+    });
+    await expectPanelSize({
+      mainPage,
+      onResizeCount: 3,
+      panelId: "left",
+      panelSize: {
+        asPercentage: 53,
+        inPixels: 250
+      },
+      prevPanelSize: {
+        asPercentage: 30,
+        inPixels: 143
+      }
+    });
+    await expectPanelSize({
+      mainPage,
+      onResizeCount: 3,
+      panelId: "right",
+      panelSize: {
+        asPercentage: 47,
+        inPixels: 226
+      },
+      prevPanelSize: {
+        asPercentage: 70,
+        inPixels: 333
+      }
+    });
+
+    await page.setViewportSize({
+      width: 1000,
+      height: 500
+    });
+
+    await expectLayout({
+      layout: {
+        left: 53,
+        right: 47
+      },
+      mainPage,
+      onLayoutChangeCount: 2,
+      onLayoutChangedCount: 2
+    });
+  });
+
+  test("resizing the window should revalidate group layout constraints alt", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel id="left" minSize={50} />
+        <Separator />
+        <Panel id="right" minSize={50} />
+      </Group>
+    );
+
+    await expectLayout({
+      layout: {
+        left: 50,
+        right: 50
+      },
+      mainPage,
+      onLayoutChangeCount: 1,
+      onLayoutChangedCount: 1
+    });
+
+    await page.setViewportSize({
+      width: 500,
+      height: 500
+    });
+
+    await expectLayout({
+      layout: {
+        left: 50,
+        right: 50
+      },
+      mainPage,
+      onLayoutChangeCount: 1,
+      onLayoutChangedCount: 1
+    });
+
+    const bounds = (await page.getByRole("separator").boundingBox())!;
+    await page.mouse.move(bounds.x, bounds.y);
+    await page.mouse.down();
+    await page.mouse.move(0, bounds.y);
+
+    // Left would be 5% if the constraints were stale
+    await expectLayout({
+      layout: {
+        left: 11,
+        right: 89
+      },
+      mainPage,
+      onLayoutChangeCount: 2,
+      onLayoutChangedCount: 1
+    });
+  });
+
+  test("resizing the window should notify Panel resize handlers", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Group>
+        <Panel defaultSize="30%" id="left" minSize={250} />
+        <Separator />
+        <Panel id="right" minSize={50} />
+      </Group>
+    );
+
+    await expectLayout({
+      layout: {
+        left: 30,
+        right: 70
+      },
+      mainPage,
+      onLayoutChangeCount: 1,
+      onLayoutChangedCount: 1
+    });
+
+    await page.setViewportSize({
+      width: 500,
+      height: 500
+    });
+
+    await expectLayout({
+      layout: {
+        left: 53,
+        right: 47
+      },
+      mainPage,
+      onLayoutChangeCount: 2,
+      onLayoutChangedCount: 2
+    });
+
+    await page.setViewportSize({
+      width: 1000,
+      height: 500
+    });
+
+    await expectLayout({
+      layout: {
+        left: 53,
+        right: 47
+      },
+      mainPage,
+      onLayoutChangeCount: 2,
+      onLayoutChangedCount: 2
+    });
+  });
 });
diff --git a/integrations/tests/tests/stacking-order.spec.tsx b/integrations/tests/tests/stacking-order.spec.tsx
index 1c7706c36..4a43ad552 100644
--- a/integrations/tests/tests/stacking-order.spec.tsx
+++ b/integrations/tests/tests/stacking-order.spec.tsx
@@ -6,144 +6,129 @@ import { calculateHitArea } from "../src/utils/calculateHitArea";
 import { goToUrl } from "../src/utils/goToUrl";
 
 test.describe("stacking order", () => {
-  for (const usePopUpWindow of [true, false]) {
-    test.describe(usePopUpWindow ? "in a popup" : "in the main window", () => {
-      test("should ignore pointer events that target overlapping higher z-index targets", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Container className="relative">
-            <Group className="w-25 h-25 min-h-25">
-              <Panel id="left" />
-              <Separator id="separator" />
-              <Panel id="center" />
-              <Panel id="right" />
-            </Group>
-            <div className="bg-red-600 absolute left-[30%] top-0 p-2">
-              blocker
-            </div>
-            <div className="bg-red-600 absolute left-[65%] top-0 p-2">
-              blocker
-            </div>
-          </Container>,
-          { usePopUpWindow }
-        );
-
-        await assertLayoutChangeCounts(mainPage, 1);
-
-        const box = (await page.getByRole("separator").boundingBox())!;
-
-        await page.mouse.move(box.x, box.y);
-        await page.mouse.down();
-        await page.mouse.move(0, 0);
-        await page.mouse.up();
-
-        await assertLayoutChangeCounts(mainPage, 1);
-
-        const hitAreaBox = await calculateHitArea(page, ["center", "right"]);
-
-        await page.mouse.move(hitAreaBox.x, hitAreaBox.y);
-        await page.mouse.down();
-        await page.mouse.move(1000, 0);
-        await page.mouse.up();
-
-        await assertLayoutChangeCounts(mainPage, 1);
-      });
-
-      test("should allow pointer events that target nearby but not overlapping higher z-index targets", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Container className="relative">
-            <Group className="w-25 h-25 min-h-25">
-              <Panel id="left" />
-              <Separator id="separator" />
-              <Panel id="center" />
-              <Panel id="right" />
-            </Group>
-            <div className="bg-red-600 absolute left-[30%] top-0 p-2">
-              blocker
-            </div>
-            <div className="bg-red-600 absolute left-[65%] top-0 p-2">
-              blocker
-            </div>
-          </Container>,
-          { usePopUpWindow }
-        );
-
-        await assertLayoutChangeCounts(mainPage, 1);
-
-        const box = (await page.getByRole("separator").boundingBox())!;
-
-        await page.mouse.move(box.x, box.y + box.height);
-        await page.mouse.down();
-        await page.mouse.move(0, 0);
-        await page.mouse.up();
-
-        await assertLayoutChangeCounts(mainPage, 2);
-
-        const hitAreaBox = await calculateHitArea(page, ["center", "right"]);
-
-        await page.mouse.move(hitAreaBox.x, hitAreaBox.y + hitAreaBox.height);
-        await page.mouse.down();
-        await page.mouse.move(1000, 0);
-        await page.mouse.up();
-
-        await assertLayoutChangeCounts(mainPage, 3);
-      });
-
-      test("should allow resizes that originate outside of an overlapping element and then move beneath it", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <Container className="relative">
-            <Group className="w-25 h-25 min-h-25">
-              <Panel id="left" />
-              <Separator id="separator" />
-              <Panel id="right" />
-            </Group>
-            <div className="bg-red-600 absolute left-0 top-0 p-2">blocker</div>
-          </Container>,
-          { usePopUpWindow }
-        );
-
-        const separator = page.getByRole("separator");
-        const panelBox = (await page.getByText("id: left").boundingBox())!;
-        const separatorBox = (await separator.boundingBox())!;
-
-        await assertLayoutChangeCounts(mainPage, 1);
-
-        await page.mouse.move(separatorBox.x, separatorBox.y);
-        await expect(separator).toHaveAttribute("data-separator", "hover");
-
-        await page.mouse.down();
-        await expect(separator).toHaveAttribute("data-separator", "active");
-        await assertLayoutChangeCounts(mainPage, 1);
-
-        await page.mouse.move(panelBox.x, separatorBox.y);
-        await expect(separator).toHaveAttribute("data-separator", "active");
-        await assertLayoutChangeCounts(mainPage, 2, 1);
-
-        await page.mouse.move(panelBox.x + 25, separatorBox.y);
-        await expect(separator).toHaveAttribute("data-separator", "active");
-        await assertLayoutChangeCounts(mainPage, 3, 1);
-
-        // Releasing the cursor under the overlaid element should do two things:
-        // It should deactivate the separator
-        // It should transition to an "inactive" state because it's now blocked
-        await page.mouse.up();
-        await expect(separator).toHaveAttribute("data-separator", "inactive");
-        await assertLayoutChangeCounts(mainPage, 3, 2);
-
-        // No-op
-        await page.mouse.down();
-        await page.mouse.move(separatorBox.x, separatorBox.y);
-        await page.mouse.up();
-        await assertLayoutChangeCounts(mainPage, 3, 2);
-      });
-    });
-  }
+  test("should ignore pointer events that target overlapping higher z-index targets", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Container className="relative">
+        <Group className="w-25 h-25 min-h-25">
+          <Panel id="left" />
+          <Separator id="separator" />
+          <Panel id="center" />
+          <Panel id="right" />
+        </Group>
+        <div className="bg-red-600 absolute left-[30%] top-0 p-2">blocker</div>
+        <div className="bg-red-600 absolute left-[65%] top-0 p-2">blocker</div>
+      </Container>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 1);
+
+    const box = (await page.getByRole("separator").boundingBox())!;
+
+    await page.mouse.move(box.x, box.y);
+    await page.mouse.down();
+    await page.mouse.move(0, 0);
+    await page.mouse.up();
+
+    await assertLayoutChangeCounts(mainPage, 1);
+
+    const hitAreaBox = await calculateHitArea(page, ["center", "right"]);
+
+    await page.mouse.move(hitAreaBox.x, hitAreaBox.y);
+    await page.mouse.down();
+    await page.mouse.move(1000, 0);
+    await page.mouse.up();
+
+    await assertLayoutChangeCounts(mainPage, 1);
+  });
+
+  test("should allow pointer events that target nearby but not overlapping higher z-index targets", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Container className="relative">
+        <Group className="w-25 h-25 min-h-25">
+          <Panel id="left" />
+          <Separator id="separator" />
+          <Panel id="center" />
+          <Panel id="right" />
+        </Group>
+        <div className="bg-red-600 absolute left-[30%] top-0 p-2">blocker</div>
+        <div className="bg-red-600 absolute left-[65%] top-0 p-2">blocker</div>
+      </Container>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 1);
+
+    const box = (await page.getByRole("separator").boundingBox())!;
+
+    await page.mouse.move(box.x, box.y + box.height);
+    await page.mouse.down();
+    await page.mouse.move(0, 0);
+    await page.mouse.up();
+
+    await assertLayoutChangeCounts(mainPage, 2);
+
+    const hitAreaBox = await calculateHitArea(page, ["center", "right"]);
+
+    await page.mouse.move(hitAreaBox.x, hitAreaBox.y + hitAreaBox.height);
+    await page.mouse.down();
+    await page.mouse.move(1000, 0);
+    await page.mouse.up();
+
+    await assertLayoutChangeCounts(mainPage, 3);
+  });
+
+  test("should allow resizes that originate outside of an overlapping element and then move beneath it", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <Container className="relative">
+        <Group className="w-25 h-25 min-h-25">
+          <Panel id="left" />
+          <Separator id="separator" />
+          <Panel id="right" />
+        </Group>
+        <div className="bg-red-600 absolute left-0 top-0 p-2">blocker</div>
+      </Container>
+    );
+
+    const separator = page.getByRole("separator");
+    const panelBox = (await page.getByText("id: left").boundingBox())!;
+    const separatorBox = (await separator.boundingBox())!;
+
+    await assertLayoutChangeCounts(mainPage, 1);
+
+    await page.mouse.move(separatorBox.x, separatorBox.y);
+    await expect(separator).toHaveAttribute("data-separator", "hover");
+
+    await page.mouse.down();
+    await expect(separator).toHaveAttribute("data-separator", "active");
+    await assertLayoutChangeCounts(mainPage, 1);
+
+    await page.mouse.move(panelBox.x, separatorBox.y);
+    await expect(separator).toHaveAttribute("data-separator", "active");
+    await assertLayoutChangeCounts(mainPage, 2, 1);
+
+    await page.mouse.move(panelBox.x + 25, separatorBox.y);
+    await expect(separator).toHaveAttribute("data-separator", "active");
+    await assertLayoutChangeCounts(mainPage, 3, 1);
+
+    // Releasing the cursor under the overlaid element should do two things:
+    // It should deactivate the separator
+    // It should transition to an "inactive" state because it's now blocked
+    await page.mouse.up();
+    await expect(separator).toHaveAttribute("data-separator", "inactive");
+    await assertLayoutChangeCounts(mainPage, 3, 2);
+
+    // No-op
+    await page.mouse.down();
+    await page.mouse.move(separatorBox.x, separatorBox.y);
+    await page.mouse.up();
+    await assertLayoutChangeCounts(mainPage, 3, 2);
+  });
 });
diff --git a/integrations/tests/tests/visibility.spec.tsx b/integrations/tests/tests/visibility.spec.tsx
index 73e0ee3fe..fa56efd8f 100644
--- a/integrations/tests/tests/visibility.spec.tsx
+++ b/integrations/tests/tests/visibility.spec.tsx
@@ -5,88 +5,82 @@ import { assertLayoutChangeCounts } from "../src/utils/assertLayoutChangeCounts"
 import { goToUrl } from "../src/utils/goToUrl";
 
 test.describe("visibility", () => {
-  for (const usePopUpWindow of [true, false]) {
-    test.describe(usePopUpWindow ? "in a popup" : "in the main window", () => {
-      test("Activity API should defer default layout calculation until visible", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <DisplayModeToggle mode="activity">
-            <Group>
-              <Panel defaultSize="25%" id="left" minSize={150} />
-              <Separator />
-              <Panel id="right" />
-            </Group>
-          </DisplayModeToggle>,
-          { usePopUpWindow }
-        );
-
-        await assertLayoutChangeCounts(mainPage, 0);
-
-        await page.getByText("hidden → visible").click();
-
-        await assertLayoutChangeCounts(mainPage, 1);
-        await expect(page.getByText("id: left")).toContainText("25%");
-        await expect(page.getByRole("separator")).toBeVisible();
-        await expect(page.getByText("id: right")).toContainText("75%");
-
-        await page.getByText("visible → hidden").click();
-
-        await assertLayoutChangeCounts(mainPage, 1);
-
-        await page.setViewportSize({
-          width: 500,
-          height: 500
-        });
-        await page.getByText("hidden → visible").click();
-
-        await assertLayoutChangeCounts(mainPage, 2);
-        await expect(page.getByText("id: left")).toContainText("32%");
-        await expect(page.getByRole("separator")).toBeVisible();
-        await expect(page.getByText("id: right")).toContainText("68%");
-      });
-
-      test("display:hidden should defer default layout calculation until visible", async ({
-        page: mainPage
-      }) => {
-        const page = await goToUrl(
-          mainPage,
-          <DisplayModeToggle mode="css">
-            <Group>
-              <Panel defaultSize="25%" id="left" minSize={150} />
-              <Separator />
-              <Panel id="right" />
-            </Group>
-          </DisplayModeToggle>,
-          { usePopUpWindow }
-        );
-
-        await assertLayoutChangeCounts(mainPage, 0);
-
-        await page.getByText("hidden → visible").click();
-
-        await assertLayoutChangeCounts(mainPage, 1);
-        await expect(page.getByText("id: left")).toContainText("25%");
-        await expect(page.getByRole("separator")).toBeVisible();
-        await expect(page.getByText("id: right")).toContainText("75%");
-
-        await page.getByText("visible → hidden").click();
-
-        await assertLayoutChangeCounts(mainPage, 1);
-        // Actual layout values are not meaningful since the Group is not visible
-
-        await page.setViewportSize({
-          width: 500,
-          height: 500
-        });
-        await page.getByText("hidden → visible").click();
-
-        await assertLayoutChangeCounts(mainPage, 2);
-        await expect(page.getByText("id: left")).toContainText("32%");
-        await expect(page.getByRole("separator")).toBeVisible();
-        await expect(page.getByText("id: right")).toContainText("68%");
-      });
+  test("Activity API should defer default layout calculation until visible", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <DisplayModeToggle mode="activity">
+        <Group>
+          <Panel defaultSize="25%" id="left" minSize={150} />
+          <Separator />
+          <Panel id="right" />
+        </Group>
+      </DisplayModeToggle>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 0);
+
+    await page.getByText("hidden → visible").click();
+
+    await assertLayoutChangeCounts(mainPage, 1);
+    await expect(page.getByText("id: left")).toContainText("25%");
+    await expect(page.getByRole("separator")).toBeVisible();
+    await expect(page.getByText("id: right")).toContainText("75%");
+
+    await page.getByText("visible → hidden").click();
+
+    await assertLayoutChangeCounts(mainPage, 1);
+
+    await page.setViewportSize({
+      width: 500,
+      height: 500
     });
-  }
+    await page.getByText("hidden → visible").click();
+
+    await assertLayoutChangeCounts(mainPage, 2);
+    await expect(page.getByText("id: left")).toContainText("32%");
+    await expect(page.getByRole("separator")).toBeVisible();
+    await expect(page.getByText("id: right")).toContainText("68%");
+  });
+
+  test("display:hidden should defer default layout calculation until visible", async ({
+    page: mainPage
+  }) => {
+    const page = await goToUrl(
+      mainPage,
+      <DisplayModeToggle mode="css">
+        <Group>
+          <Panel defaultSize="25%" id="left" minSize={150} />
+          <Separator />
+          <Panel id="right" />
+        </Group>
+      </DisplayModeToggle>
+    );
+
+    await assertLayoutChangeCounts(mainPage, 0);
+
+    await page.getByText("hidden → visible").click();
+
+    await assertLayoutChangeCounts(mainPage, 1);
+    await expect(page.getByText("id: left")).toContainText("25%");
+    await expect(page.getByRole("separator")).toBeVisible();
+    await expect(page.getByText("id: right")).toContainText("75%");
+
+    await page.getByText("visible → hidden").click();
+
+    await assertLayoutChangeCounts(mainPage, 1);
+    // Actual layout values are not meaningful since the Group is not visible
+
+    await page.setViewportSize({
+      width: 500,
+      height: 500
+    });
+    await page.getByText("hidden → visible").click();
+
+    await assertLayoutChangeCounts(mainPage, 2);
+    await expect(page.getByText("id: left")).toContainText("32%");
+    await expect(page.getByRole("separator")).toBeVisible();
+    await expect(page.getByText("id: right")).toContainText("68%");
+  });
 });