cursedbelt 5.14.0 → 5.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "5.14.0",
+	"version": "5.15.2",
 	"license": "ISC",
 	"type": "module",
 	"description": "The React design system of the cursedbelt split — components, styles, theme. cursedbelt-core below it; server tier in cursedbelt-server.",
@@ -67,7 +67,7 @@
 		"typecheck:scripts": "tsc --noEmit --project tsconfig.scripts.json",
 		"demo:check": "tsc --noEmit --project demo/tsconfig.json",
 		"demo:paths": "bun run demo/generatePaths.ts --write",
-		"guardrails:report": "bun run scripts/guardrailsEnforce.ts no-raw-action-button,no-raw-overflow,no-raw-inputs,no-hardcoded-colors,no-raw-modal-footer,no-unguarded-editing-modal,control-height-tokens,no-raw-zindex,no-raw-data-table,no-tailwind-palette,no-raw-title-attr,micro-typography-floor,choice-needs-empty-state,no-select-as-action-menu,no-native-dialog,no-fast-tooltip,no-raw-password,no-raw-lazy --scope cursedbelt src/react src/styles.css",
+		"guardrails:report": "bun run scripts/guardrailsEnforce.ts no-raw-action-button,no-raw-overflow,no-raw-inputs,no-hardcoded-colors,no-raw-modal-footer,no-unguarded-editing-modal,control-height-tokens,no-raw-zindex,no-raw-data-table,no-tailwind-palette,no-raw-title-attr,micro-typography-floor,choice-needs-empty-state,no-select-as-action-menu,no-native-dialog,no-fast-tooltip,no-raw-password,no-raw-lazy,no-raw-popover --scope cursedbelt src/react src/styles.css",
 		"lint": "biome lint --error-on-warnings src e2e demo scripts",
 		"styles": "bun run styles:static && bun run styles:utilities && bun run styles:areas",
 		"styles:static": "bun run scripts/generateStaticStyles.ts",
@@ -86,6 +86,7 @@
 		"e2e:playback-degraded": "playwright test --config e2e/playwright.config.ts playback-degraded.spec.ts",
 		"e2e:resize-grip": "playwright test --config e2e/playwright.config.ts resize-grip-rail.spec.ts",
 		"e2e:touch": "playwright test --config e2e/playwright.config.ts --project=touch",
+		"e2e:tap-away": "playwright test --config e2e/playwright.config.ts tap-away.spec.ts",
 		"done:serial": "bun run typecheck && bun run lint && bun run test && bun run build",
 		"paths": "bun run scripts/paths.ts",
 		"surface": "public-surface",

package/scripts/guardrails-baseline.json

@@ -14,7 +14,8 @@
     "no-local-reimplementation": 0,
     "micro-typography-floor": 0,
     "no-fast-tooltip": 0,
-    "no-raw-lazy": 0
+    "no-raw-lazy": 0,
+    "no-raw-popover": 0
   },
   "cursedshell": {
     "no-raw-action-button": 0,

package/scripts/guardrailsEnforce.spec.ts

@@ -1406,3 +1406,56 @@ const View = React.lazy(() => import('./View'));`,
     ).toHaveLength(0);
   });
 });
+
+describe('no-raw-popover', () => {
+  test("🔴 flags the hand-rolled menu flix's subtitle button opened (owner, 2026-09-27, iPhone)", () => {
+    expect(
+      check(
+        'no-raw-popover',
+        `{open ? (
+        <div className="absolute right-0 bottom-12 min-w-44 overflow-hidden rounded-xl bg-black/90">
+          <MenuRow />
+        </div>
+      ) : null}`,
+      ),
+    ).toHaveLength(1);
+  });
+
+  test('flags `&&`, a responsive position and an inline style, on any disclosure-state name', () => {
+    expect(check('no-raw-popover', `{menuOpen && <div className="md:absolute z-30">x</div>}`)).toHaveLength(1);
+    expect(check('no-raw-popover', `{showPicker && (<ul style={{ position: "fixed" }}>x</ul>)}`)).toHaveLength(1);
+    expect(check('no-raw-popover', `{menu === "audio" && <div className={cn("absolute", x)}>x</div>}`)).toHaveLength(1);
+  });
+
+  test('passes an in-flow disclosure, a badge, and an overlay nobody opens', () => {
+    expect(check('no-raw-popover', `{open && <div className="flex flex-col gap-1">x</div>}`)).toHaveLength(0);
+    expect(check('no-raw-popover', `{showBadge && <span className="absolute -right-1 top-0">3</span>}`)).toHaveLength(0);
+    expect(check('no-raw-popover', `{loading && <div className="absolute inset-0">…</div>}`)).toHaveLength(0);
+  });
+
+  test('passes a panel with its reason in the block above', () => {
+    expect(
+      check(
+        'no-raw-popover',
+        `{/* guardrails-ignore no-raw-popover: a drop-target outline, not a popup */}
+{dragOpen && <div className="absolute inset-0 ring-2">x</div>}`,
+      ),
+    ).toHaveLength(0);
+  });
+
+  test("the belt's own Popover may render what it replaces", () => {
+    expect(
+      RULES['no-raw-popover'].check(
+        'src/react/components/Popover.tsx',
+        `{open && <div className="absolute">x</div>}`,
+      ),
+    ).toHaveLength(0);
+  });
+
+  test('stays linear on a huge file — an unbounded condition backtracked for minutes on desk', () => {
+    const big = `{a && b}\n`.repeat(20000) + `const x = 1;`.repeat(2000);
+    const started = performance.now();
+    check('no-raw-popover', big);
+    expect(performance.now() - started).toBeLessThan(2000);
+  });
+});

package/scripts/guardrailsEnforce.ts

@@ -114,6 +114,10 @@
 //     is the belt one and is not matched; `*.spec|test.tsx` fixtures and cursedbelt's
 //     own `react/confirm.tsx` / `react/prompt.tsx` are exempt by construction.
 //
+//   no-raw-popover — owner, 2026-09-27: no hand-rolled `{open && <div className="absolute …">}`
+//     popup; they never close when you tap away. Use `Popover` (`unstyled` for your own look)
+//     or `DropdownMenu`. See the rule's own block below.
+//
 //   no-fast-tooltip — owner, 2026-09-08: a hover-only hint must REST before it opens.
 //     Flags a hover delay written as a numeric literal below 500ms (`delayDuration={120}`,
 //     `openDelay={300}`, `delay: { open: 0 }`) and a direct `@radix-ui/react-tooltip` /
@@ -1817,6 +1821,61 @@ const noRawLazy: Rule = {
 	},
 };
 
+// ── no-raw-popover ──────────────────────────────────────────────────────────
+// Owner report, 2026-09-27, on an iPhone: "many popup menu places don't shut when you
+// click off of them". flix's subtitle menu, music's folder menu — each a hand-rolled
+// `{open && <div className="absolute …">}` with no outside-press handling at all, so the
+// bug was in every copy, on every screen. cursedbelt's `Popover` closes on a tap or click
+// anywhere else, on Escape and on focus leaving, follows a full-screen element, and takes
+// `unstyled` for a panel with its own look; `DropdownMenu` is the action-list form.
+//
+// The rule is on the SHAPE, for the reason `no-raw-data-table` gives — "does this panel
+// close when you tap away?" is not decidable by a scanner: a conditional render (`&&` or
+// `? (`) whose condition names disclosure state (open, menu, expanded, dropdown, popover,
+// picker, flyout, show…) and whose element is positioned `absolute`/`fixed`. A panel that
+// genuinely is not a popup (an in-place badge, a drop-target overlay) takes the opt-out
+// with its reason in the comment block above. The belt's own `Popover` is exempt.
+// Bounded (160 chars, no `{}<>;`): unbounded, a 9,000-line file backtracked for minutes.
+const RAW_POPOVER_RE =
+	/\{([^{}<>;]{1,160}?)(?:&&|\?)\s*\(?\s*<(div|ul|ol|section|menu|aside|nav|span|form|dialog)\b/g;
+const POPOVER_STATE_RE = /(open|menu|expanded|dropdown|popover|picker|flyout|popup|popout|suggestions)/i;
+const FLOATING_POSITION_RE =
+	/(?:^|[\s"'`{:])(?:[a-z0-9-]+:)*(?:absolute|fixed)(?=[\s"'`}]|$)|position\s*:\s*["'](?:absolute|fixed)["']/;
+const RAW_POPOVER_IGNORE_RE = /guardrails-ignore\s+no-raw-popover\s*:/;
+
+const noRawPopover: Rule = {
+	name: "no-raw-popover",
+	description:
+		"Owner, 2026-09-27: no hand-rolled popup (`{open && <div className=\"absolute …\">}`) — they never close when you tap away. Use cursedbelt's `Popover` (`unstyled` keeps your own look; it follows a full-screen element) or `DropdownMenu` for an action list. A panel that is not a popup takes the opt-out with its reason.",
+	check(filePath, source) {
+		const normalized = filePath.replace(/\\/g, "/");
+		if (/(^|\/)src\/react\/components\/Popover\.tsx$/.test(normalized)) return [];
+		if (isTestSource(normalized)) return [];
+		const scannable = blankComments(source);
+		const lines = source.split("\n");
+		const out: Violation[] = [];
+		RAW_POPOVER_RE.lastIndex = 0;
+		for (const match of scannable.matchAll(RAW_POPOVER_RE)) {
+			const condition = match[1] ?? "";
+			if (!POPOVER_STATE_RE.test(condition)) continue;
+			const tagStart = (match.index ?? 0) + match[0].lastIndexOf("<");
+			const tag = readOpeningTag(source, tagStart);
+			if (!FLOATING_POSITION_RE.test(tag.code)) continue;
+			const line = lineOf(source, tagStart);
+			const matchLine = lineOf(source, match.index ?? 0);
+			if (
+				RAW_POPOVER_IGNORE_RE.test(tag.text) ||
+				RAW_POPOVER_IGNORE_RE.test(lines[matchLine - 1] ?? "") ||
+				RAW_POPOVER_IGNORE_RE.test(blockAbove(lines, matchLine)) ||
+				RAW_POPOVER_IGNORE_RE.test(blockAbove(lines, line))
+			)
+				continue;
+			out.push({ file: filePath, line, snippet: lines[line - 1]?.trim().slice(0, 160) ?? "" });
+		}
+		return out;
+	},
+};
+
 export const RULES: Record<string, Rule> = {
 	[noRawActionButton.name]: noRawActionButton,
 	[noRawOverflow.name]: noRawOverflow,
@@ -1838,6 +1897,7 @@ export const RULES: Record<string, Rule> = {
 	[noRawPassword.name]: noRawPassword,
 	[noRawNav.name]: noRawNav,
 	[noRawLazy.name]: noRawLazy,
+	[noRawPopover.name]: noRawPopover,
 };
 
 /**

package/src/react/components/DropdownMenu.spec.tsx

@@ -0,0 +1,39 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react';
+import type { ButtonHTMLAttributes } from 'react';
+import { DropdownMenu } from './DropdownMenu.js';
+
+afterEach(cleanup);
+
+function B(props: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      // guardrails-ignore no-raw-action-button: a spec fixture — any trigger element must work.
+      type='button'
+      {...props}
+    />
+  );
+}
+
+const menu = () => screen.queryByRole('menu', { hidden: true });
+
+describe('DropdownMenu closes on a press anywhere else', () => {
+  test('even on a surface that stops its own pointerdown — a drag handle, a canvas', async () => {
+    render(
+      <div>
+        <B onPointerDown={(e) => e.stopPropagation()}>drag handle</B>
+        <DropdownMenu items={[{ key: 'a', label: 'Rename' }]} trigger={<B>actions</B>} />
+      </div>,
+    );
+    fireEvent.pointerDown(screen.getByText('actions'), { button: 0, ctrlKey: false });
+    expect(menu()).toBeTruthy();
+    await act(() => new Promise((r) => setTimeout(r, 0)));
+    act(() => {
+      screen.getByText('drag handle').dispatchEvent(
+        new PointerEvent('pointerdown', { bubbles: true, button: 0, pointerType: 'touch' }),
+      );
+    });
+    await act(() => new Promise((r) => setTimeout(r, 5)));
+    expect(menu()).toBeNull();
+  });
+});

package/src/react/components/DropdownMenu.tsx

@@ -1,7 +1,9 @@
 import * as RDrop from '@radix-ui/react-dropdown-menu';
 import { Check, ChevronRight } from 'lucide-react';
-import type { ReactNode } from 'react';
+import { type ReactNode, useCallback, useRef, useState } from 'react';
+import { useOutsidePress } from '../hooks/useOutsidePress.js';
 import { cn } from '../lib/cn.js';
+import { useFloatingContainer } from '../lib/floatingContainer.js';
 import {
   FLOATING_ANIMATION,
   FLOATING_COLLISION_PADDING,
@@ -85,15 +87,44 @@ export function DropdownMenu({
   open,
   onOpenChange,
 }: DropdownMenuProps) {
+  const container = useFloatingContainer();
+  // Always controlled underneath, so the outside-press fallback can close it too.
+  const [ownOpen, setOwnOpen] = useState(false);
+  const isOpen = open ?? ownOpen;
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (open === undefined) setOwnOpen(next);
+      onOpenChange?.(next);
+    },
+    [open, onOpenChange],
+  );
+  /*
+   * Radix's menu listens for the outside `pointerdown` in the BUBBLE phase, so a surface that
+   * stops its own pointerdown (a drag handle, a canvas) kept the menu open. The belt's one
+   * tap-away listener runs in the capture phase; see `useOutsidePress`. The menu is modal, so
+   * it decides on the pointerdown (an inert page sends an iPhone no click).
+   */
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const pressInside = useOutsidePress({
+    open: isOpen,
+    onDismiss: () => setOpen(false),
+    inside: [triggerRef],
+    escape: false,
+    decideOn: 'pointerdown',
+  });
   return (
-    <RDrop.Root open={open} onOpenChange={onOpenChange}>
-      <RDrop.Trigger asChild>{trigger}</RDrop.Trigger>
-      <RDrop.Portal>
+    <RDrop.Root open={isOpen} onOpenChange={setOpen}>
+      <RDrop.Trigger asChild ref={triggerRef}>
+        {trigger}
+      </RDrop.Trigger>
+      <RDrop.Portal container={container}>
         <RDrop.Content
           align={align}
           side={side}
           sideOffset={4}
           collisionPadding={FLOATING_COLLISION_PADDING}
+          onClickCapture={pressInside.onClickCapture}
+          onPointerDownCapture={pressInside.onPointerDownCapture}
           className={cn(FLOATING_CONTENT_BASE, FLOATING_ANIMATION, 'min-w-[8rem] p-1', className)}
         >
           {items.map((item) => (
@@ -107,6 +138,7 @@ export function DropdownMenu({
 }
 
 function DropdownItem({ item }: { item: DropdownMenuItem }) {
+  const container = useFloatingContainer();
   if (item.divider) {
     return <RDrop.Separator className='my-1 h-px bg-border' />;
   }
@@ -125,7 +157,7 @@ function DropdownItem({ item }: { item: DropdownMenuItem }) {
           </span>
           <ChevronRight className='size-4 opacity-60' />
         </RDrop.SubTrigger>
-        <RDrop.Portal>
+        <RDrop.Portal container={container}>
           <RDrop.SubContent
             className={cn(FLOATING_CONTENT_BASE, FLOATING_ANIMATION, 'min-w-[8rem] p-1')}
             sideOffset={2}

package/src/react/components/HoverCard.tsx

@@ -2,6 +2,7 @@ import * as RHover from '@radix-ui/react-hover-card';
 import type { ReactNode } from 'react';
 import { useHasHover } from '../hooks/useHasHover.js';
 import { cn } from '../lib/cn.js';
+import { useFloatingContainer } from '../lib/floatingContainer.js';
 import { HOVER_HINT_DELAY_MS } from '../lib/hoverIntent.js';
 import {
   FLOATING_ANIMATION,
@@ -40,6 +41,7 @@ export function HoverCard({
   className,
 }: HoverCardProps) {
   const hasHover = useHasHover();
+  const container = useFloatingContainer();
 
   // On touch devices, render the trigger without the HoverCard wrapper
   // (no hover = no way to trigger it; don't block pointer events).
@@ -48,7 +50,7 @@ export function HoverCard({
   return (
     <RHover.Root openDelay={openDelay} closeDelay={closeDelay}>
       <RHover.Trigger asChild>{trigger}</RHover.Trigger>
-      <RHover.Portal>
+      <RHover.Portal container={container}>
         <RHover.Content
           align={align}
           side={side}

package/src/react/components/Popover.spec.tsx

@@ -0,0 +1,241 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { type ButtonHTMLAttributes, type Ref, useState } from 'react';
+import { Popover, type PopoverPoint } from './Popover.js';
+
+afterEach(cleanup);
+
+/** The fixtures' plain control — Popover has to work with ANY trigger element. */
+function B(props: ButtonHTMLAttributes<HTMLButtonElement> & { ref?: Ref<HTMLButtonElement> }) {
+  return (
+    <button
+      // guardrails-ignore no-raw-action-button: a spec fixture — the point is that the
+      // behaviour holds for whatever element an app hands it.
+      type='button'
+      {...props}
+    />
+  );
+}
+
+/**
+ * Owner report, 2026-09-27, on an iPhone: menus that stayed open after tapping away (flix's
+ * subtitle menu, music's folder menu). Each was a hand-rolled panel with no outside-press
+ * handling. These pin the behaviour every app now gets from this one component.
+ */
+function Harness({ modal = false }: { modal?: boolean }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div>
+      <B>elsewhere</B>
+      <Popover
+        open={open}
+        onOpenChange={setOpen}
+        modal={modal}
+        unstyled
+        label='Subtitles'
+        trigger={<B>subtitles</B>}
+      >
+        <B>English</B>
+      </Popover>
+    </div>
+  );
+}
+
+const openIt = () => fireEvent.click(screen.getByRole('button', { name: 'subtitles' }));
+const panel = () => screen.queryByRole('dialog', { name: 'Subtitles' });
+
+/** A press as a browser delivers it: pointerdown, then click. Radix decides on the click. */
+async function tapOutside(target: Element, pointerType: 'mouse' | 'touch') {
+  act(() => {
+    target.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, button: 0, pointerType }));
+  });
+  act(() => {
+    target.dispatchEvent(new MouseEvent('click', { bubbles: true, button: 0 }));
+  });
+  await act(() => new Promise((r) => setTimeout(r, 5)));
+}
+
+describe('Popover closes when you press anywhere else', () => {
+  for (const pointerType of ['mouse', 'touch'] as const) {
+    test(`a ${pointerType} press outside closes it`, async () => {
+      render(<Harness />);
+      openIt();
+      expect(panel()).toBeTruthy();
+      // Radix arms its outside listener a tick after opening, so an opening press never closes it.
+      await act(() => new Promise((r) => setTimeout(r, 0)));
+      await tapOutside(screen.getByRole('button', { name: 'elsewhere' }), pointerType);
+      expect(panel()).toBeNull();
+    });
+  }
+
+  test('a press on something that stops its own click still closes it', async () => {
+    // Radix alone skips dismissal when an outside handler stops propagation ("intercepted") —
+    // a video surface, a card, a row. The capture-phase fallback is what closes it then.
+    function Stopper() {
+      const [open, setOpen] = useState(false);
+      return (
+        <div>
+          <B onClick={(e) => e.stopPropagation()}>
+            video surface
+          </B>
+          <Popover open={open} onOpenChange={setOpen} label='Subtitles' trigger={<B>subtitles</B>}>
+            <B>English</B>
+          </Popover>
+        </div>
+      );
+    }
+    render(<Stopper />);
+    openIt();
+    await act(() => new Promise((r) => setTimeout(r, 0)));
+    await tapOutside(screen.getByRole('button', { name: 'video surface' }), 'touch');
+    expect(panel()).toBeNull();
+  });
+
+  test('an uncontrolled popover closes on an outside press too', async () => {
+    render(
+      <div>
+        <B>elsewhere</B>
+        <Popover label='Subtitles' trigger={<B>subtitles</B>}>
+          <B>English</B>
+        </Popover>
+      </div>,
+    );
+    openIt();
+    expect(panel()).toBeTruthy();
+    await act(() => new Promise((r) => setTimeout(r, 0)));
+    await tapOutside(screen.getByRole('button', { name: 'elsewhere' }), 'mouse');
+    expect(panel()).toBeNull();
+  });
+
+  test('a press inside does not close it', async () => {
+    render(<Harness />);
+    openIt();
+    await act(() => new Promise((r) => setTimeout(r, 0)));
+    await tapOutside(screen.getByRole('button', { name: 'English' }), 'mouse');
+    expect(panel()).toBeTruthy();
+  });
+
+  test('Escape closes it', () => {
+    render(<Harness />);
+    openIt();
+    fireEvent.keyDown(document.activeElement ?? document.body, { key: 'Escape' });
+    expect(panel()).toBeNull();
+  });
+
+  test('the trigger toggles it shut', () => {
+    render(<Harness />);
+    openIt();
+    expect(panel()).toBeTruthy();
+    openIt();
+    expect(panel()).toBeNull();
+  });
+
+  test('🔴 modal closes on a tap that sends NO click — an iPhone tapping the inert page', async () => {
+    // Measured in Playwright's iPhone 15 WebKit, 2026-09-27: under `modal` the tap lands on
+    // <html>, iOS sends no click for it, and a click-deciding popover never closed.
+    render(<Harness modal />);
+    openIt();
+    await act(() => new Promise((r) => setTimeout(r, 0)));
+    act(() => {
+      document.documentElement.dispatchEvent(
+        new PointerEvent('pointerdown', { bubbles: true, button: 0, pointerType: 'touch' }),
+      );
+    });
+    await act(() => new Promise((r) => setTimeout(r, 5)));
+    expect(panel()).toBeNull();
+  });
+
+  test('modal: the click the closing tap produces does not reach what the menu uncovered', async () => {
+    let played = 0;
+    function Player() {
+      const [open, setOpen] = useState(false);
+      return (
+        <div>
+          <B onClick={() => played++}>picture</B>
+          <Popover open={open} onOpenChange={setOpen} modal label='Subtitles' trigger={<B>subtitles</B>}>
+            <B>English</B>
+          </Popover>
+        </div>
+      );
+    }
+    render(<Player />);
+    openIt();
+    await act(() => new Promise((r) => setTimeout(r, 0)));
+    await tapOutside(screen.getByText('picture'), 'touch');
+    expect(panel()).toBeNull();
+    expect(played).toBe(0);
+    await tapOutside(screen.getByText('picture'), 'touch');
+    expect(played).toBe(1); // closed, the picture works again
+  });
+
+  test('modal still closes on an outside press', async () => {
+    render(<Harness modal />);
+    openIt();
+    await act(() => new Promise((r) => setTimeout(r, 0)));
+    await tapOutside(document.body, 'mouse');
+    expect(panel()).toBeNull();
+  });
+});
+
+describe('anchor mode — a panel with no trigger of its own', () => {
+  function AnchorHarness() {
+    const [at, setAt] = useState<PopoverPoint | null>(null);
+    return (
+      <div>
+        <B>elsewhere</B>
+        <B
+          onClick={(e) => {
+            const trigger = e.currentTarget;
+            setAt((cur) => (cur ? null : { x: 10, y: 10, trigger }));
+          }}
+        >
+          more
+        </B>
+        <Popover anchor={at} onOpenChange={(o) => !o && setAt(null)} label='Row actions'>
+          <p>menu body</p>
+        </Popover>
+      </div>
+    );
+  }
+  const anchorPanel = () => screen.queryByRole('dialog', { name: 'Row actions' });
+
+  test('opens while the anchor is set and closes on an outside press', async () => {
+    render(<AnchorHarness />);
+    expect(anchorPanel()).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: 'more' }));
+    expect(anchorPanel()).toBeTruthy();
+    await act(() => new Promise((r) => setTimeout(r, 0)));
+    await tapOutside(screen.getByRole('button', { name: 'elsewhere' }), 'mouse');
+    expect(anchorPanel()).toBeNull();
+  });
+
+  test("a press on the anchor's own control is left to its click, so it toggles", async () => {
+    render(<AnchorHarness />);
+    const more = screen.getByRole('button', { name: 'more' });
+    fireEvent.click(more);
+    await act(() => new Promise((r) => setTimeout(r, 0)));
+    act(() => {
+      more.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, button: 0, pointerType: 'mouse' }));
+    });
+    expect(anchorPanel()).toBeTruthy(); // the pointerdown alone did not close it…
+    fireEvent.click(more);
+    await act(() => new Promise((r) => setTimeout(r, 5)));
+    expect(anchorPanel()).toBeNull(); // …the control's own click did — once, not shut-then-reopen.
+  });
+});
+
+describe('full screen', () => {
+  test('the panel mounts inside the full-screen element, the only subtree the browser paints', () => {
+    const stage = document.createElement('div');
+    document.body.appendChild(stage);
+    Object.defineProperty(document, 'fullscreenElement', { configurable: true, get: () => stage });
+    try {
+      render(<Harness />);
+      openIt();
+      expect(stage.contains(panel())).toBe(true);
+    } finally {
+      Object.defineProperty(document, 'fullscreenElement', { configurable: true, get: () => null });
+      stage.remove();
+    }
+  });
+});