Add minimal reproducers for known bugs

- Added `examples/reproducers/issue-001-video-card-logic/` to reproduce VideoCard logic failure.
- Added `examples/reproducers/issue-002-login-modal-nsec/` to reproduce Login Modal missing error.
- Added `examples/reproducers/issue-003-popover-ref-error/` to reproduce Popover ReferenceError.
- Each reproducer includes a README.md with instructions.

examples/reproducers/issue-003-popover-ref-error/README.md

@@ -0,0 +1,12 @@
+# Issue 003: Popover ReferenceError
+
+This reproducer attempts to reproduce the `ReferenceError` in popover placement tests.
+
+## Run
+```bash
+npx playwright test examples/reproducers/issue-003-popover-ref-error/repro.spec.ts
+```
+
+## Expected Result
+If the bug is present, the test will FAIL with `ReferenceError`.
+Note: In some environments, this test might pass if the bug is flaky or fixed.

examples/reproducers/issue-003-popover-ref-error/repro.spec.ts

@@ -0,0 +1,95 @@
+import { expect, test } from "@playwright/test";
+import type { Locator } from "@playwright/test";
+import {
+  applyReducedMotion,
+  failOnConsoleErrors,
+} from "../../../tests/e2e/helpers/uiTestUtils";
+
+// Function that might be causing reference error
+async function getPanelWithTriggerMetrics(panel: Locator, trigger: Locator) {
+  const triggerHandle = await trigger.elementHandle();
+  if (!triggerHandle) {
+    throw new Error("Trigger element is not attached");
+  }
+
+  try {
+    return await panel.evaluate((node, triggerElement) => {
+      const rect = node.getBoundingClientRect();
+      const triggerRect = triggerElement.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const tokenValue = window
+        .getComputedStyle(document.documentElement)
+        .getPropertyValue("--popover-inline-safe-max")
+        .trim();
+      const popoverMaxWidth = window
+        .getComputedStyle(node)
+        .getPropertyValue("--popover-max-width")
+        .trim();
+
+      return {
+        rect: {
+          top: rect.top,
+          left: rect.left,
+          right: rect.right,
+          bottom: rect.bottom,
+          width: rect.width,
+          height: rect.height,
+        },
+        triggerRect: {
+          top: triggerRect.top,
+          left: triggerRect.left,
+          right: triggerRect.right,
+          bottom: triggerRect.bottom,
+          width: triggerRect.width,
+          height: triggerRect.height,
+        },
+        viewport: { width: viewportWidth, height: viewportHeight },
+        placement: node.dataset.popoverPlacement || "",
+        state: node.dataset.popoverState || "",
+        popoverMaxWidth,
+        tokenMaxWidth: tokenValue,
+      };
+    }, triggerHandle);
+  } finally {
+    await triggerHandle.dispose();
+  }
+}
+
+function assertWithinViewport(metrics: {
+  rect: { top: number; left: number; right: number; bottom: number };
+  viewport: { width: number; height: number };
+}) {
+  const tolerance = 0.5;
+  expect(metrics.rect.left).toBeGreaterThanOrEqual(-tolerance);
+  expect(metrics.rect.top).toBeGreaterThanOrEqual(-tolerance);
+  expect(metrics.rect.right).toBeLessThanOrEqual(metrics.viewport.width + tolerance);
+  expect(metrics.rect.bottom).toBeLessThanOrEqual(metrics.viewport.height + tolerance);
+}
+
+test.describe("popover demo alignments (reproducer)", () => {
+  test.beforeEach(async ({ page }) => {
+    await applyReducedMotion(page);
+    failOnConsoleErrors(page);
+    await page.goto("/views/dev/popover-demo.html", { waitUntil: "networkidle" });
+  });
+
+  test("aligns the video card menu with the trigger's right edge", async ({ page }) => {
+    const trigger = page.locator("[data-demo-card-more]");
+    await trigger.click();
+
+    const panel = page.locator('[data-component="overlay-root"] [data-popover-state="open"]');
+    await expect(panel).toBeVisible();
+
+    const metrics = await getPanelWithTriggerMetrics(panel, trigger);
+
+    assertWithinViewport(metrics);
+    expect(metrics.state).toBe("open");
+    expect(metrics.placement).toBe("bottom-end");
+    expect(metrics.popoverMaxWidth).toBe(metrics.tokenMaxWidth);
+    expect(metrics).toHaveProperty("popoverMaxWidth");
+
+    const tolerance = 1.5;
+    expect(Math.abs(metrics.rect.right - metrics.triggerRect.right)).toBeLessThanOrEqual(tolerance);
+  });
+});