@astryxdesign/core 0.2.0-canary.ea693ac → 0.2.0-canary.fc53ff7

package/src/hooks/containerReveal.pool.stylex.ts

@@ -0,0 +1,464 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file containerReveal.pool.stylex.ts
+ * @input Uses StyleX, theme tokens
+ * @output A fixed pool of scoped markers, each paired with its reveal style
+ *   blocks (reveal / conceal, each with a layout-preserved variant) compiled
+ *   against that marker.
+ * @position Internal to useContainerReveal.
+ *
+ * WHY A POOL OF LITERAL BLOCKS: `stylex.when.ancestor(':hover', marker)` is
+ * resolved by the StyleX compiler, which welds the marker's class into the
+ * emitted selector (`.marker:hover *`). A marker and the styles referencing it
+ * are therefore inseparable at build time — the marker cannot be passed as a
+ * runtime argument, so the blocks cannot be produced by a loop or a helper and
+ * must be written out literally per marker. A single shared marker would leak
+ * hover/focus across NESTED reveal containers (an ancestor container's :hover
+ * matches a descendant container's revealed content), so useContainerReveal
+ * hands each concurrently mounted container a distinct marker from this pool
+ * (see the free-list there).
+ *
+ * The reveal recipe hides content with `position: absolute` (removed from
+ * layout flow, so it reserves no space) plus `opacity: 0`. Both keep the
+ * content in the accessibility tree and tab order — unlike display/visibility
+ * — so it stays reachable by keyboard and assistive tech while hidden.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import {durationVars, easeVars} from '../theme/tokens.stylex';
+
+export const POOL_SIZE = 6;
+
+export const m0 = stylex.defineMarker();
+const s0 = stylex.create({
+  // Hidden at rest via position + opacity (kept in the a11y tree and tab
+  // order); on container :hover (fine pointer) or :focus-within it returns to
+  // flow and fades in. Always shown on touch.
+  reveal: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m0)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m0)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+    position: {
+      default: 'absolute',
+      [stylex.when.ancestor(':hover', m0)]: {'@media (hover: hover)': 'static'},
+      [stylex.when.ancestor(':focus-within', m0)]: 'static',
+      '@media (any-pointer: coarse)': 'static',
+    },
+  },
+  // Opacity-only reveal that keeps the box reserved (no layout shift). Use for
+  // content that is already positioned (e.g. an absolute overlay).
+  revealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m0)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m0)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+  },
+  // Inverted: visible at rest, fades OUT on :hover only. Deliberately ignores
+  // :focus-within (a keyboard user must never watch content vanish) and stays
+  // visible on touch. Never leaves the a11y tree.
+  conceal: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m0)]: {'@media (hover: hover)': 0},
+    },
+  },
+  concealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m0)]: {'@media (hover: hover)': 0},
+    },
+  },
+});
+
+export const m1 = stylex.defineMarker();
+const s1 = stylex.create({
+  // Hidden at rest via position + opacity (kept in the a11y tree and tab
+  // order); on container :hover (fine pointer) or :focus-within it returns to
+  // flow and fades in. Always shown on touch.
+  reveal: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m1)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m1)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+    position: {
+      default: 'absolute',
+      [stylex.when.ancestor(':hover', m1)]: {'@media (hover: hover)': 'static'},
+      [stylex.when.ancestor(':focus-within', m1)]: 'static',
+      '@media (any-pointer: coarse)': 'static',
+    },
+  },
+  // Opacity-only reveal that keeps the box reserved (no layout shift). Use for
+  // content that is already positioned (e.g. an absolute overlay).
+  revealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m1)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m1)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+  },
+  // Inverted: visible at rest, fades OUT on :hover only. Deliberately ignores
+  // :focus-within (a keyboard user must never watch content vanish) and stays
+  // visible on touch. Never leaves the a11y tree.
+  conceal: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m1)]: {'@media (hover: hover)': 0},
+    },
+  },
+  concealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m1)]: {'@media (hover: hover)': 0},
+    },
+  },
+});
+
+export const m2 = stylex.defineMarker();
+const s2 = stylex.create({
+  // Hidden at rest via position + opacity (kept in the a11y tree and tab
+  // order); on container :hover (fine pointer) or :focus-within it returns to
+  // flow and fades in. Always shown on touch.
+  reveal: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m2)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m2)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+    position: {
+      default: 'absolute',
+      [stylex.when.ancestor(':hover', m2)]: {'@media (hover: hover)': 'static'},
+      [stylex.when.ancestor(':focus-within', m2)]: 'static',
+      '@media (any-pointer: coarse)': 'static',
+    },
+  },
+  // Opacity-only reveal that keeps the box reserved (no layout shift). Use for
+  // content that is already positioned (e.g. an absolute overlay).
+  revealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m2)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m2)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+  },
+  // Inverted: visible at rest, fades OUT on :hover only. Deliberately ignores
+  // :focus-within (a keyboard user must never watch content vanish) and stays
+  // visible on touch. Never leaves the a11y tree.
+  conceal: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m2)]: {'@media (hover: hover)': 0},
+    },
+  },
+  concealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m2)]: {'@media (hover: hover)': 0},
+    },
+  },
+});
+
+export const m3 = stylex.defineMarker();
+const s3 = stylex.create({
+  // Hidden at rest via position + opacity (kept in the a11y tree and tab
+  // order); on container :hover (fine pointer) or :focus-within it returns to
+  // flow and fades in. Always shown on touch.
+  reveal: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m3)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m3)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+    position: {
+      default: 'absolute',
+      [stylex.when.ancestor(':hover', m3)]: {'@media (hover: hover)': 'static'},
+      [stylex.when.ancestor(':focus-within', m3)]: 'static',
+      '@media (any-pointer: coarse)': 'static',
+    },
+  },
+  // Opacity-only reveal that keeps the box reserved (no layout shift). Use for
+  // content that is already positioned (e.g. an absolute overlay).
+  revealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m3)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m3)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+  },
+  // Inverted: visible at rest, fades OUT on :hover only. Deliberately ignores
+  // :focus-within (a keyboard user must never watch content vanish) and stays
+  // visible on touch. Never leaves the a11y tree.
+  conceal: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m3)]: {'@media (hover: hover)': 0},
+    },
+  },
+  concealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m3)]: {'@media (hover: hover)': 0},
+    },
+  },
+});
+
+export const m4 = stylex.defineMarker();
+const s4 = stylex.create({
+  // Hidden at rest via position + opacity (kept in the a11y tree and tab
+  // order); on container :hover (fine pointer) or :focus-within it returns to
+  // flow and fades in. Always shown on touch.
+  reveal: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m4)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m4)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+    position: {
+      default: 'absolute',
+      [stylex.when.ancestor(':hover', m4)]: {'@media (hover: hover)': 'static'},
+      [stylex.when.ancestor(':focus-within', m4)]: 'static',
+      '@media (any-pointer: coarse)': 'static',
+    },
+  },
+  // Opacity-only reveal that keeps the box reserved (no layout shift). Use for
+  // content that is already positioned (e.g. an absolute overlay).
+  revealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m4)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m4)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+  },
+  // Inverted: visible at rest, fades OUT on :hover only. Deliberately ignores
+  // :focus-within (a keyboard user must never watch content vanish) and stays
+  // visible on touch. Never leaves the a11y tree.
+  conceal: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m4)]: {'@media (hover: hover)': 0},
+    },
+  },
+  concealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m4)]: {'@media (hover: hover)': 0},
+    },
+  },
+});
+
+export const m5 = stylex.defineMarker();
+const s5 = stylex.create({
+  // Hidden at rest via position + opacity (kept in the a11y tree and tab
+  // order); on container :hover (fine pointer) or :focus-within it returns to
+  // flow and fades in. Always shown on touch.
+  reveal: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m5)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m5)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+    position: {
+      default: 'absolute',
+      [stylex.when.ancestor(':hover', m5)]: {'@media (hover: hover)': 'static'},
+      [stylex.when.ancestor(':focus-within', m5)]: 'static',
+      '@media (any-pointer: coarse)': 'static',
+    },
+  },
+  // Opacity-only reveal that keeps the box reserved (no layout shift). Use for
+  // content that is already positioned (e.g. an absolute overlay).
+  revealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', m5)]: {'@media (hover: hover)': 1},
+      [stylex.when.ancestor(':focus-within', m5)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+  },
+  // Inverted: visible at rest, fades OUT on :hover only. Deliberately ignores
+  // :focus-within (a keyboard user must never watch content vanish) and stays
+  // visible on touch. Never leaves the a11y tree.
+  conceal: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m5)]: {'@media (hover: hover)': 0},
+    },
+  },
+  concealLayoutPreserved: {
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+    opacity: {
+      default: 1,
+      [stylex.when.ancestor(':hover', m5)]: {'@media (hover: hover)': 0},
+    },
+  },
+});
+
+// The compiled StyleX objects carry `when.ancestor` conditionals the public
+// `StyleXStyles` type does not model, so the slot shape is inferred.
+export const POOL = [
+  {marker: m0, reveal: s0.reveal, revealLayoutPreserved: s0.revealLayoutPreserved, conceal: s0.conceal, concealLayoutPreserved: s0.concealLayoutPreserved},
+  {marker: m1, reveal: s1.reveal, revealLayoutPreserved: s1.revealLayoutPreserved, conceal: s1.conceal, concealLayoutPreserved: s1.concealLayoutPreserved},
+  {marker: m2, reveal: s2.reveal, revealLayoutPreserved: s2.revealLayoutPreserved, conceal: s2.conceal, concealLayoutPreserved: s2.concealLayoutPreserved},
+  {marker: m3, reveal: s3.reveal, revealLayoutPreserved: s3.revealLayoutPreserved, conceal: s3.conceal, concealLayoutPreserved: s3.concealLayoutPreserved},
+  {marker: m4, reveal: s4.reveal, revealLayoutPreserved: s4.revealLayoutPreserved, conceal: s4.conceal, concealLayoutPreserved: s4.concealLayoutPreserved},
+  {marker: m5, reveal: s5.reveal, revealLayoutPreserved: s5.revealLayoutPreserved, conceal: s5.conceal, concealLayoutPreserved: s5.concealLayoutPreserved},
+] as const;
+
+export type RevealSlot = (typeof POOL)[number];

package/src/hooks/index.ts

@@ -92,3 +92,10 @@ export {useLongPress} from './useLongPress';
 export type {UseLongPressOptions, UseLongPressHandlers} from './useLongPress';
 
 export {useDevWarning} from './useDevWarning';
+
+export {useContainerReveal} from './useContainerReveal';
+export type {
+  UseContainerRevealOptions,
+  UseContainerRevealReturn,
+  ContentRevealOptions,
+} from './useContainerReveal';

package/src/hooks/useContainerReveal.test.tsx

@@ -0,0 +1,116 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useContainerReveal.test.tsx
+ * @input Uses vitest, @testing-library/react, useContainerReveal
+ * @output Unit tests for the marker-pool free-list, per-instance scoping, the
+ *   inert (disabled) path, and the content-option → style-block mapping.
+ * @position Testing; validates useContainerReveal.ts and its pool.
+ *
+ * SYNC: When useContainerReveal.ts changes, update these tests.
+ */
+
+import {describe, it, expect} from 'vitest';
+import {renderHook, render, act} from '@testing-library/react';
+import {useContainerReveal} from './useContainerReveal';
+import {POOL_SIZE} from './containerReveal.pool.stylex';
+
+describe('useContainerReveal', () => {
+  it('returns spreadable getter props for container and content', () => {
+    const {result} = renderHook(() => useContainerReveal());
+    const container = result.current.getContainerProps();
+    const content = result.current.getContentRevealProps();
+    expect(container).toHaveProperty('className');
+    expect(content).toHaveProperty('className');
+    expect(typeof container.className).toBe('string');
+    expect(typeof content.className).toBe('string');
+  });
+
+  it('is inert when disabled: no marker class, empty content props', () => {
+    const {result} = renderHook(() =>
+      useContainerReveal({isEnabled: false}),
+    );
+    expect(result.current.getContainerProps()).toEqual({});
+    expect(result.current.getContentRevealProps()).toEqual({});
+  });
+
+  it('gives two concurrently mounted containers DISTINCT marker classes', () => {
+    // The core leak-safety property: nested/concurrent containers must never
+    // share a marker, or an ancestor container's :hover would reveal a
+    // descendant container's content.
+    const a = renderHook(() => useContainerReveal());
+    const b = renderHook(() => useContainerReveal());
+    const classA = a.result.current.getContainerProps().className;
+    const classB = b.result.current.getContainerProps().className;
+    expect(classA).toBeTruthy();
+    expect(classB).toBeTruthy();
+    expect(classA).not.toBe(classB);
+    a.unmount();
+    b.unmount();
+  });
+
+  it('recycles a slot after unmount (free-list release)', () => {
+    const first = renderHook(() => useContainerReveal());
+    const firstClass = first.result.current.getContainerProps().className;
+    first.unmount();
+    // A fresh mount should be able to reclaim the just-released slot.
+    const second = renderHook(() => useContainerReveal());
+    const secondClass = second.result.current.getContainerProps().className;
+    expect(secondClass).toBe(firstClass);
+    second.unmount();
+  });
+
+  it('reveal and conceal map to different style blocks', () => {
+    const {result} = renderHook(() => useContainerReveal());
+    const reveal = result.current.getContentRevealProps().className;
+    const conceal = result.current.getContentRevealProps({
+      isRevealInverted: true,
+    }).className;
+    expect(reveal).toBeTruthy();
+    expect(conceal).toBeTruthy();
+    expect(reveal).not.toBe(conceal);
+  });
+
+  it('layout-preserved reveal differs from clipped reveal', () => {
+    const {result} = renderHook(() => useContainerReveal());
+    const clipped = result.current.getContentRevealProps().className;
+    const preserved = result.current.getContentRevealProps({
+      isLayoutPreserved: true,
+    }).className;
+    expect(clipped).not.toBe(preserved);
+  });
+
+  it('assigns distinct markers across a full pool of concurrent containers', () => {
+    function Probe({onClass}: {onClass: (c: string) => void}) {
+      const {getContainerProps} = useContainerReveal();
+      onClass(getContainerProps().className ?? '');
+      return null;
+    }
+    const classes: string[] = [];
+    const {unmount} = render(
+      <>
+        {Array.from({length: POOL_SIZE}, (_, i) => (
+          <Probe key={i} onClass={(c) => classes.push(c)} />
+        ))}
+      </>,
+    );
+    const unique = new Set(classes.filter(Boolean));
+    expect(unique.size).toBe(POOL_SIZE);
+    unmount();
+  });
+
+  it('survives repeated mount/unmount without leaking the pool', () => {
+    // Mount and unmount a full pool several times; each cycle must still hand
+    // out POOL_SIZE distinct markers, proving slots are released.
+    for (let cycle = 0; cycle < 3; cycle++) {
+      const hooks = Array.from({length: POOL_SIZE}, () =>
+        renderHook(() => useContainerReveal()),
+      );
+      const classes = hooks.map(
+        (h) => h.result.current.getContainerProps().className,
+      );
+      expect(new Set(classes).size).toBe(POOL_SIZE);
+      act(() => hooks.forEach((h) => h.unmount()));
+    }
+  });
+});