@astryxdesign/core 0.5.2-canary.2da7a39 → 0.5.2-canary.2e51213

package/src/Resizable/Resizable.spec.md

@@ -0,0 +1,246 @@
+---
+schema_version: 3
+template_version: 3
+kind: component
+id: component:Resizable
+authority: draft
+archive_reason: null
+superseded_by: null
+approved_by: null
+approved_at: null
+owners: [cixzhang]
+review_triggers: [behavior, layout, theming, accessibility]
+verified_by:
+  [
+    packages/core/src/Resizable/ResizeHandle.test.tsx,
+    packages/core/src/Resizable/useResizable.test.ts,
+    packages/core/src/Resizable/shippedDirections.test.ts,
+    packages/core/src/Resizable/utils.test.ts,
+    packages/core/src/theme/themingTargets.test.ts,
+    scripts/check-knowledge.mjs,
+  ]
+modules: []
+families: []
+design_specs: []
+architecture:
+  [
+    architecture:component-theming-surface,
+    architecture:interaction-modality,
+    architecture:public-component-api,
+  ]
+contributing: []
+system_specs: [spec:AST-010]
+---
+
+# Resizable component contract
+
+## Intent
+
+Resizable combines the useResizable state and behavior hook with a focusable
+ResizeHandle. The handle presents a default Grip pill over an enlarged invisible
+Grab zone. AST-010 adds explicit pixel and percentage configuration while keeping
+selected state, persistence, callbacks, paint, and ARIA in resolved pixels.
+
+## Compatibility and migration
+
+- Released default preserved: `yes`; numeric and exact `Npx` stay pixels, exact
+  `N%` retains released one-time default behavior, and the broad `defaultSize`
+  string type remains source-compatible
+- Compatibility class: additive `minSize` / `maxSize`, structured percentage helper,
+  and optional container basis; deprecated pixel aliases remain supported
+- Controlled/uncontrolled behavior: unchanged
+- Migration decision: CSS-like `min()` / `max()` strings are not supported. Use
+  `percent(value, {min: pixel(value)})` or
+  `percent(value, {max: pixel(value)})`.
+
+Consumer migration instructions belong in consumer docs and release notes.
+
+## Ownership boundary
+
+**Owns**
+
+- useResizable size, collapse, snapping, persistence, and resize lifecycle.
+- ResizeHandle's separator semantics, pointer and keyboard interaction, and
+  current `resize-handle` target.
+- The default Grip pill and its current `resize-handle-pill` target, plus the
+  aligned invisible Grab zone.
+
+**Does not own / non-goals**
+
+- The structural region being resized — owned by LayoutPanel, SideNav, or another
+  caller.
+- Layout-region topology, inset, divider, or scrolling rules.
+- A public target for the Grab zone; none exists on current `main`.
+- Fixing the missing runtime reflection for the documented Handle `direction`
+  theming state; that remains a separate theming follow-up.
+
+## Public concepts
+
+`ResizableSize` is a Resizable-specific union: pixel number, exact `Npx`, exact
+`N%`, `PixelWidth`, or `ResizablePercentSize`.
+`pixel(value)` is Table's existing canonical structured pixel helper;
+`percent(value, {min: pixel(value)})` creates a literal percentage with a pixel
+floor; `percent(value, {max: pixel(value)})` creates one with a pixel ceiling.
+The options argument is required and the two bounds are mutually exclusive.
+`defaultSize` retains its released broad `SizeValue` type and adds the structured
+`PixelWidth` and `ResizablePercentSize` values; runtime validation remains
+authoritative for legacy strings.
+
+Numbers and exact `Npx` remain pixels. A descriptor default resolves once; a
+descriptor bound remains live. Consumer props, outputs, and examples are documented
+in `Resizable.doc.mjs` and `useResizable.doc.mjs`.
+
+## Behavioral and layout contract
+
+| ID  | Candidate invariant                                                                                                                                                                                                                      | Basis                            | Draft review state                                            |
+| --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------- |
+| FR1 | ResizeHandle renders one focusable Handle and one enlarged Grab zone; the default render also contains a Grip pill, while caller-provided children replace that pill.                                                                    | Current source, docs, and tests  | Verified current behavior; no new behavior decided            |
+| FR2 | Handle carries `resize-handle`, Grip pill carries `resize-handle-pill`, and Grab zone carries no public target.                                                                                                                          | Current source and public docs   | Verified current target inventory; no target change           |
+| FR3 | Pointer, keyboard, collapse, snap, persistence, reversal, and size behavior remain owned by ResizeHandle and useResizable rather than layout-regions collaborators.                                                                      | Current source, docs, and tests  | Verified current ownership; resize semantics remain unchanged |
+| FR4 | Resizable metadata advertises `direction` as a Handle visual state, but current runtime calls `themeProps('resize-handle')` without reflecting that value, so direction selectors cannot match.                                          | Current source and public docs   | Verified audit gap; deliberately not fixed in this change     |
+| FR5 | `percent(value, {min: pixel(value)})` and `percent(value, {max: pixel(value)})` resolve against the AST-010 basis; a default selects pixels once, while a bound re-resolves and clamps selected pixels. Both/neither bounds are invalid. | AST-010, source, tests, Chromium | New structured sizing behavior; selected state remains pixels |
+| FR6 | Deprecated pixel aliases remain source-compatible and mutually exclusive with unified bounds; untyped exact atomic strings keep their released runtime behavior, and untyped conflicts prefer the unified value and warn.                | AST-010, source, tests           | Additive migration with deterministic precedence              |
+
+### Allowed variation
+
+- **AV1 — Axis.** Handle may resize along the horizontal or vertical layout axis;
+  separator orientation and cursor follow the current implementation.
+- **AV2 — Placement.** Handle may participate inline or overlay its parent, and
+  Grip pill may sit at start, end, center, or the current automatic side.
+- **AV3 — Grip content.** Caller-provided children may replace Grip pill without
+  changing Handle or Grab zone ownership.
+- **AV4 — Divider.** Handle may paint its current divider treatment; a composing
+  region remains responsible for avoiding a duplicate adjacent divider.
+- **AV5 — Structured percentage bound.** A descriptor carries exactly one `min`
+  or `max`, whose value is a `PixelWidth`. Atomic percentages use the existing
+  exact `N%` string; arbitrary CSS expressions are outside this contract.
+
+### Representative states
+
+| State                  | Required invariant                                                    | Allowed variation                                  |
+| ---------------------- | --------------------------------------------------------------------- | -------------------------------------------------- |
+| Default handle         | Handle, Grab zone, and Grip pill render.                              | Divider and always-visible treatment may vary.     |
+| Custom handle content  | Handle and Grab zone remain; caller content replaces Grip pill.       | Caller content remains caller-owned.               |
+| Horizontal or vertical | Interaction follows the selected axis and current ARIA orientation.   | Size, reversal, and pill placement may vary.       |
+| Collapsed or expanded  | Handle preserves valid separator value semantics and resize controls. | Grip pill automatic side follows current behavior. |
+| Disabled               | Handle remains represented but is removed from interactive tab order. | Painted treatment follows existing styles.         |
+
+### Transformation and precedence order
+
+- Parse atomic strings exactly; validate `percent()` descriptors as a finite 0–100
+  percentage with exactly one finite non-negative pixel bound.
+- Resolve percentages against one active basis, then apply the descriptor's floor or
+  ceiling.
+- Commit a structured default as one initial pixel choice; keep percentage bounds
+  live and clamp with `Math.min(max, Math.max(min, size))`.
+- Maximum wins when resolved bounds conflict; interaction and persistence stay
+  pixel-only.
+
+### Performance and resources
+
+- Atomic pixel paths add no observer or render work.
+- A structured default observes a supplied container only until its initial pixel
+  choice is final; persisted pixels skip that measurement.
+- Percentage bounds reuse the shared ResizeObserver and remain subscribed while
+  live. Structured validation and resolution are constant-time; no CSS parser is
+  introduced.
+
+## Accessibility contract
+
+The structured API does not change ResizeHandle's separator role, label,
+orientation, collapsed value text, focus, pointer, or keyboard behavior. Its
+`aria-valuemin`, `aria-valuemax`, and `aria-valuenow` remain the same resolved pixel
+values used by hook state and painted geometry.
+
+## Design relationships
+
+| Anatomy or state | Design requirement                                                      | Representation authority       | Hierarchy role | Component contract |
+| ---------------- | ----------------------------------------------------------------------- | ------------------------------ | -------------- | ------------------ |
+| Handle           | Presents the focusable resize separator and optional divider treatment. | Current source and public docs | Prominent      | FR1, FR2, FR3      |
+| Grip pill        | Presents the default visible resize affordance.                         | Current source and public docs | Supporting     | FR1, FR2           |
+| Grab zone        | Enlarges pointer reach while remaining visually transparent.            | Current source and tests       | Supporting     | FR1, FR2           |
+| Direction state  | Selects horizontal or vertical resize presentation.                     | Current public metadata        | Supporting     | FR3, FR4           |
+
+Grab zone is interaction structure rather than a painted public theming seam. Its
+`none` disposition records factual reachability. The missing Handle direction
+reflection is a separate current audit gap: the target exists, but runtime does
+not emit the documented target state.
+
+### Theming anatomy
+
+<!-- anatomy-theming:v1 -->
+
+```json
+{
+  "Handle": {"target": "resize-handle"},
+  "Grip pill": {"target": "resize-handle-pill"},
+  "Grab zone": {
+    "none": {
+      "reason": "intentional: The invisible pointer hit area is nonvisual interaction structure and has no public target"
+    }
+  }
+}
+```
+
+## Family and system relationships
+
+- `architecture:component-theming-surface` owns anatomy qualification, target
+  mapping, and target-state reflection requirements.
+- `architecture:interaction-modality` owns shared modality behavior;
+  `architecture:public-component-api` owns the additive structured API and
+  compatibility boundary.
+- `Resizable/utils` is server-safe and re-exports Table's exact `pixel()` binding
+  plus `PixelWidth`, alongside Resizable's `percent()` and structured types.
+- `family:layout-regions` lists useResizable and ResizeHandle as collaborators
+  that may drive a LayoutPanel's size. Resizable is not a layout-regions member,
+  and that family does not own or redefine resize state, snapping, persistence,
+  collapse, pointer, or keyboard semantics.
+
+## Verification map
+
+| Contract            | Verification                                       | Representative states                                                                                           | Mutation or failure expectation                                                                                                                    | Audit section              |
+| ------------------- | -------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
+| FR1                 | `ResizeHandle.test.tsx` plus source inspection     | Default, custom, collapsed, disabled, both axes                                                                 | Handle and Grab zone regressions fail focused tests; custom Grip replacement currently relies on source review.                                    | `audit:Resizable/anatomy`  |
+| FR2                 | Source inspection and `themingTargets.test.ts`     | Handle, Grip pill, and Grab zone                                                                                | Removing a target or documenting an unshipped Grab zone target fails evidence or inventory.                                                        | `audit:Resizable/theming`  |
+| FR3                 | `ResizeHandle.test.tsx` and `useResizable.test.ts` | Pointer, keyboard, snap, collapse, persistence                                                                  | Moving resize ownership or changing current transformations fails focused behavior coverage.                                                       | `audit:Resizable/behavior` |
+| FR4                 | Source and public metadata comparison              | Horizontal and vertical Handle                                                                                  | No current test detects that documented `direction` is absent from runtime target-state reflection.                                                | `audit:Resizable/theming`  |
+| FR5                 | Hook/utils tests, typecheck, and Chromium          | Canonical floor/ceiling/default; invalid XOR shape; SSR/hydration; basis changes; numeric `containerRef` parity | Wrong resolution, rescaling defaults, stale clamps, observer leaks, extra numeric renders/ref reads, or state/paint/storage/ARIA divergence fails. | `audit:Resizable/behavior` |
+| FR6                 | Hook type/runtime tests                            | Old-only aliases; untyped exact atomic strings; typed and untyped conflicts                                     | Alias incompatibility, ambiguous config, or wrong precedence fails focused tests.                                                                  | `audit:Resizable/behavior` |
+| Theming anatomy map | `scripts/check-knowledge.mjs`                      | Canonical anatomy and two current targets                                                                       | Missing, extra, prefixed, stale, or multiply assigned mappings fail repository validation.                                                         | `audit:Resizable/theming`  |
+
+Current tests exercise Handle and Grab zone structure and behavior but do not
+render `children` to prove that custom content replaces Grip pill. That branch is
+source-inspected and lacks focused regression evidence. The documented
+`direction` visual axis is a closed union, so `extensibleAxes.test.ts` does not
+cover its missing runtime reflection; that mismatch is currently unguarded.
+
+## Decision log
+
+### Structured percentages use a Table-style helper
+
+**Decision:** `percent(value, {min: pixel(value)})` or
+`percent(value, {max: pixel(value)})` represents a percentage with exactly one
+pixel bound. Reuse Table's exact `pixel()` binding and `PixelWidth`; do not create
+a parallel static helper. The required options and XOR type avoid a second
+spelling for plain percentages and make every supported combination explicit.
+The pure helper is available with the same `pixel()` binding from the server-safe
+`Resizable/utils` subpath, matching Table's established helper/export pattern.
+`proportional()` is deliberately not reused because it means sibling weight, not a
+literal percentage.
+
+**Rejected:** parsing recursive CSS `min()` / `max()` strings. That would create a
+partial second CSS implementation without a demonstrated need for arbitrary
+composition.
+
+## Open questions
+
+- **OQ1 — Which follow-up should add and verify the missing Handle `direction`
+  target-state reflection?** (`checkable`)
+- **OQ2 — Which focused test should pin custom content replacing Grip pill?**
+  (`checkable`)
+
+## Content boundary
+
+This file does not duplicate consumer prop tables/examples, resize algorithms,
+layout-region rules, current audit results, or implementation steps. It links to
+their owners.

package/src/Resizable/ResizeHandle.test.tsx

@@ -44,6 +44,27 @@ function getSeparator(): HTMLElement {
   return screen.getByRole('separator');
 }
 
+function getHitArea(): HTMLElement {
+  return getSeparator().firstElementChild as HTMLElement;
+}
+
+/** Stub region props, so drag assertions read the calls directly. */
+function makeResizable(): ResizableProps {
+  return {
+    _size: 200,
+    _isCollapsed: false,
+    _onResizeStart: vi.fn(),
+    _onResizeMove: vi.fn(),
+    _onResizeEnd: vi.fn(),
+    _minSizePx: 100,
+    _maxSizePx: 400,
+    _snaps: [],
+    _collapsedSize: 40,
+    _collapsible: false,
+    _isResizableProps: true,
+  };
+}
+
 describe('ResizeHandle', () => {
   // --- ARIA wiring ---
 
@@ -120,7 +141,12 @@ describe('ResizeHandle', () => {
   it('resizes along the block axis for a vertical handle', () => {
     render(
       <Harness
-        config={{defaultSize: 200, minSizePx: 100, maxSizePx: 400}}
+        config={{
+          defaultSize: 200,
+          minSizePx: 100,
+          maxSizePx: 400,
+          direction: 'vertical',
+        }}
         handleProps={{direction: 'vertical'}}
       />,
     );
@@ -136,6 +162,25 @@ describe('ResizeHandle', () => {
     expect(separator).toHaveAttribute('aria-valuenow', '200');
   });
 
+  it('warns when the handle and hook use different axes', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    render(
+      <Harness
+        config={{
+          defaultSize: 200,
+          direction: 'vertical',
+        }}
+        handleProps={{direction: 'horizontal'}}
+      />,
+    );
+    expect(warn).toHaveBeenCalledWith(
+      'ResizeHandle: direction="horizontal" but its useResizable region is ' +
+        '"vertical". They must match: the hook measures one axis and the ' +
+        'handle drags the other.',
+    );
+    warn.mockRestore();
+  });
+
   it('collapses on Enter when the region is collapsible', () => {
     render(
       <Harness
@@ -213,37 +258,128 @@ describe('ResizeHandle', () => {
 
   // --- Drag listener lifecycle ---
 
-  it('stops driving the region and releases window listeners when unmounted mid-drag', () => {
-    const resizable: ResizableProps = {
-      _size: 200,
-      _isCollapsed: false,
-      _onResizeStart: vi.fn(),
-      _onResizeMove: vi.fn(),
-      _onResizeEnd: vi.fn(),
-      _minSizePx: 100,
-      _maxSizePx: 400,
-      _snaps: [],
-      _collapsedSize: 40,
-      _collapsible: false,
-      _isResizableProps: true,
-    };
+  it('takes pointer capture on the grab zone when a drag starts', () => {
+    const resizable = makeResizable();
+    render(<ResizeHandle resizable={resizable} label="Resize" />);
+    const hitArea = getHitArea();
+    const setPointerCapture = vi.fn();
+    Object.defineProperty(hitArea, 'setPointerCapture', {
+      value: setPointerCapture,
+      configurable: true,
+    });
+
+    fireEvent.pointerDown(hitArea, {pointerId: 7, clientX: 0, clientY: 0});
+    // Capture keeps the rest of the gesture on this element, so an embedded
+    // frame under the cursor can't swallow the drag into its own document.
+    expect(setPointerCapture).toHaveBeenCalledWith(7);
+  });
+
+  it('drives and ends the drag from events on the grab zone', () => {
+    const resizable = makeResizable();
+    render(<ResizeHandle resizable={resizable} label="Resize" />);
+    const hitArea = getHitArea();
+
+    fireEvent.pointerDown(hitArea, {pointerId: 1, clientX: 0, clientY: 0});
+    fireEvent.pointerMove(hitArea, {pointerId: 1, clientX: 30, clientY: 0});
+    expect(resizable._onResizeMove).toHaveBeenLastCalledWith(30);
+    fireEvent.pointerUp(hitArea, {pointerId: 1, clientX: 30, clientY: 0});
+    expect(resizable._onResizeEnd).toHaveBeenCalledTimes(1);
+
+    // The drag is over: a later move must not resize anything.
+    fireEvent.pointerMove(hitArea, {pointerId: 1, clientX: 90, clientY: 0});
+    expect(resizable._onResizeMove).toHaveBeenCalledTimes(1);
+    expect(document.body.style.cursor).toBe('');
+    expect(document.body.style.userSelect).toBe('');
+  });
+
+  it('ignores moves from a pointer that does not own the drag', () => {
+    const resizable = makeResizable();
+    render(<ResizeHandle resizable={resizable} label="Resize" />);
+    const hitArea = getHitArea();
+
+    fireEvent.pointerDown(hitArea, {pointerId: 1, clientX: 0, clientY: 0});
+    fireEvent.pointerMove(hitArea, {pointerId: 2, clientX: 30, clientY: 0});
+    expect(resizable._onResizeMove).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    ['pointercancel', fireEvent.pointerCancel],
+    ['lostpointercapture', fireEvent.lostPointerCapture],
+  ])('ends the drag on %s without signalling a resize end', (_name, fire) => {
+    const resizable = makeResizable();
+    render(<ResizeHandle resizable={resizable} label="Resize" />);
+    const hitArea = getHitArea();
+
+    fireEvent.pointerDown(hitArea, {pointerId: 1, clientX: 0, clientY: 0});
+    fire(hitArea, {pointerId: 1});
+    expect(resizable._onResizeEnd).not.toHaveBeenCalled();
+    expect(document.body.style.cursor).toBe('');
+    expect(document.body.style.userSelect).toBe('');
+
+    fireEvent.pointerMove(hitArea, {pointerId: 1, clientX: 30, clientY: 0});
+    expect(resizable._onResizeMove).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    ['pointercancel', fireEvent.pointerCancel],
+    ['lostpointercapture', fireEvent.lostPointerCapture],
+  ])('tells the region the gesture is over on %s', (_name, fire) => {
+    // A cancelled drag is not a resize end, but it IS the end of the gesture:
+    // the region freezes its percentage basis for the duration of a drag, and
+    // without this it stays frozen at the container size from grab time.
+    const resizable = {...makeResizable(), _onResizeCancel: vi.fn()};
+    render(<ResizeHandle resizable={resizable} label="Resize" />);
+    const hitArea = getHitArea();
+
+    fireEvent.pointerDown(hitArea, {pointerId: 1, clientX: 0, clientY: 0});
+    fire(hitArea, {pointerId: 1});
+    expect(resizable._onResizeCancel).toHaveBeenCalledTimes(1);
+    expect(resizable._onResizeEnd).not.toHaveBeenCalled();
+  });
+
+  it('does not report a cancel for a drag that ended normally', () => {
+    const resizable = {...makeResizable(), _onResizeCancel: vi.fn()};
+    render(<ResizeHandle resizable={resizable} label="Resize" />);
+    const hitArea = getHitArea();
+
+    fireEvent.pointerDown(hitArea, {pointerId: 1, clientX: 0, clientY: 0});
+    fireEvent.pointerUp(hitArea, {pointerId: 1, clientX: 30, clientY: 0});
+    expect(resizable._onResizeEnd).toHaveBeenCalledTimes(1);
+    // lostpointercapture follows every release; the drag is already cleared.
+    fireEvent.lostPointerCapture(hitArea, {pointerId: 1});
+    expect(resizable._onResizeCancel).not.toHaveBeenCalled();
+  });
+
+  it('tells the region the gesture is over when unmounted mid-drag', () => {
+    // The region outlives the handle here, so nothing else would release it.
+    const resizable = {...makeResizable(), _onResizeCancel: vi.fn()};
     const {unmount} = render(
       <ResizeHandle resizable={resizable} label="Resize" />,
     );
-    const separator = screen.getByRole('separator');
-    const hitArea = separator.firstElementChild as HTMLElement;
+    fireEvent.pointerDown(getHitArea(), {pointerId: 1, clientX: 0, clientY: 0});
+    unmount();
+    expect(resizable._onResizeCancel).toHaveBeenCalledTimes(1);
+    expect(resizable._onResizeEnd).not.toHaveBeenCalled();
+  });
+
+  it('stops driving the region and releases body styles when unmounted mid-drag', () => {
+    const resizable = makeResizable();
+    const {unmount} = render(
+      <ResizeHandle resizable={resizable} label="Resize" />,
+    );
+    const hitArea = getHitArea();
 
     // Start a drag and confirm moves reach the region.
-    fireEvent.pointerDown(hitArea, {clientX: 0, clientY: 0});
+    fireEvent.pointerDown(hitArea, {pointerId: 1, clientX: 0, clientY: 0});
     expect(resizable._onResizeStart).toHaveBeenCalledTimes(1);
-    fireEvent.pointerMove(window, {clientX: 10, clientY: 0});
+    fireEvent.pointerMove(hitArea, {pointerId: 1, clientX: 10, clientY: 0});
     expect(resizable._onResizeMove).toHaveBeenCalledTimes(1);
 
-    // Unmount mid-drag: the window listeners must be torn down, so further
-    // pointer moves no longer resize the (still-mounted) region, and the
-    // body cursor/user-select overrides are released.
+    // Unmounting removes the capturing element, which implicitly releases the
+    // pointer and takes its listeners with it. The body cursor/user-select
+    // overrides live outside the element, so they must be released here.
     unmount();
-    fireEvent.pointerMove(window, {clientX: 50, clientY: 0});
+    fireEvent.pointerMove(hitArea, {pointerId: 1, clientX: 50, clientY: 0});
     expect(resizable._onResizeMove).toHaveBeenCalledTimes(1);
     expect(document.body.style.cursor).toBe('');
     expect(document.body.style.userSelect).toBe('');
@@ -252,43 +388,18 @@ describe('ResizeHandle', () => {
   // --- RTL pointer-drag direction ---
 
   it('drives the region with the raw pointer delta under LTR', () => {
-    const resizable: ResizableProps = {
-      _size: 200,
-      _isCollapsed: false,
-      _onResizeStart: vi.fn(),
-      _onResizeMove: vi.fn(),
-      _onResizeEnd: vi.fn(),
-      _minSizePx: 100,
-      _maxSizePx: 400,
-      _snaps: [],
-      _collapsedSize: 40,
-      _collapsible: false,
-      _isResizableProps: true,
-    };
+    const resizable = makeResizable();
     render(<ResizeHandle resizable={resizable} label="Resize" />);
-    const hitArea = screen.getByRole('separator')
-      .firstElementChild as HTMLElement;
+    const hitArea = getHitArea();
 
-    fireEvent.pointerDown(hitArea, {clientX: 0, clientY: 0});
+    fireEvent.pointerDown(hitArea, {pointerId: 1, clientX: 0, clientY: 0});
     // Pointer moves +40px to the right → panel grows by +40 under LTR.
-    fireEvent.pointerMove(window, {clientX: 40, clientY: 0});
+    fireEvent.pointerMove(hitArea, {pointerId: 1, clientX: 40, clientY: 0});
     expect(resizable._onResizeMove).toHaveBeenLastCalledWith(40);
   });
 
   it('inverts the pointer delta under RTL so dragging resizes intuitively', () => {
-    const resizable: ResizableProps = {
-      _size: 200,
-      _isCollapsed: false,
-      _onResizeStart: vi.fn(),
-      _onResizeMove: vi.fn(),
-      _onResizeEnd: vi.fn(),
-      _minSizePx: 100,
-      _maxSizePx: 400,
-      _snaps: [],
-      _collapsedSize: 40,
-      _collapsible: false,
-      _isResizableProps: true,
-    };
+    const resizable = makeResizable();
     // Under RTL the start panel sits on the RIGHT, so a pointer move to the
     // right (+clientX) must SHRINK it — the delta is inverted. The handle reads
     // its own computed `direction` via getRTLMultiplier(); jsdom doesn't resolve
@@ -308,9 +419,9 @@ describe('ResizeHandle', () => {
         return realGetComputedStyle(el, pseudo ?? undefined);
       });
 
-    fireEvent.pointerDown(hitArea, {clientX: 0, clientY: 0});
+    fireEvent.pointerDown(hitArea, {pointerId: 1, clientX: 0, clientY: 0});
     // Same +40px physical move as LTR, but mirrored → −40 delta under RTL.
-    fireEvent.pointerMove(window, {clientX: 40, clientY: 0});
+    fireEvent.pointerMove(hitArea, {pointerId: 1, clientX: 40, clientY: 0});
     expect(resizable._onResizeMove).toHaveBeenLastCalledWith(-40);
 
     gcsSpy.mockRestore();
@@ -352,7 +463,17 @@ describe('ResizeHandle', () => {
     ['horizontal' as const, 'translateX'],
     ['vertical' as const, 'translateY'],
   ])('offsets the %s grab zone along the pill axis only', (direction, axis) => {
-    render(<Harness handleProps={{direction, pillPlacement: 'start'}} />);
+    render(
+      <Harness
+        config={{
+          defaultSize: 200,
+          minSizePx: 100,
+          maxSizePx: 400,
+          direction,
+        }}
+        handleProps={{direction, pillPlacement: 'start'}}
+      />,
+    );
     const hitArea = getSeparator().firstElementChild as HTMLElement;
     const translates = (hitArea.getAttribute('style') ?? '')
       .split(';')