@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/src/hooks/useMenuPress.ts

@@ -18,7 +18,8 @@
  *   pointer events stay with the element it landed on (implicit capture), so a
  *   menu container never sees a finger that slid onto it — the document does.
  * - The highlight follows the pointer (DOM focus with `preventScroll` in a
- *   menu; a callback for a picker that highlights by index).
+ *   menu, its indicator following the last input; a callback for a picker
+ *   that highlights by index).
  * - The row under the RELEASE acts, the way its own click would, carrying the
  *   release's button and modifier keys.
  * - The browser's stray `click` for a tracked gesture is swallowed at the
@@ -32,7 +33,8 @@
  * - `pointercancel`, a second pointer, or the window losing focus end the
  *   gesture with nothing acting; the model never re-implements scrolling.
  * - While a press is tracked in an overflowing menu, a pointer resting near
- *   the top or bottom edge scrolls the menu toward that edge.
+ *   the top or bottom edge scrolls the menu toward that edge (the shared
+ *   timer of utils/edgeAutoscroll.ts).
  *
  * The menu root is marked `data-astryx-menu-press` so a nested flyout (a DOM
  * descendant of its parent menu) can tell which level owns a press, and so a
@@ -47,7 +49,14 @@
  * - /packages/core/src/hooks/menuPressGesture.ts
  */
 
-import {useCallback, useEffect, useMemo, useRef, type RefObject} from 'react';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type RefObject,
+} from 'react';
 import {currentGesture} from '../Layer/gestureCounter';
 import {
   IDLE_MENU_PRESS,
@@ -58,6 +67,9 @@ import {
   type MenuPressPointerType,
 } from './menuPressGesture';
 import {useLongPress, type UseLongPressHandlers} from './useLongPress';
+import {edgeAutoscroll} from '../utils/edgeAutoscroll';
+import {focusForLastInput} from '../utils/focusReturn';
+import {useInteractionModalityTracking} from '../utils/interactionModality';
 
 /** Marks a menu root that carries this press model. */
 export const MENU_PRESS_MARKER = 'data-astryx-menu-press';
@@ -327,6 +339,9 @@ interface ResolvedPoint {
 export function useMenuPress(options: UseMenuPressOptions): UseMenuPressReturn {
   const optionsRef = useRef(options);
   optionsRef.current = options;
+  // The highlight, and the hover focus of the rows in this menu, follow the
+  // last input, which this tracks for the document.
+  useInteractionModalityTracking();
 
   const gestureRef = useRef<MenuPressGesture<HTMLElement>>(IDLE_MENU_PRESS);
   const pointerIdRef = useRef<number | null>(null);
@@ -338,10 +353,36 @@ export function useMenuPress(options: UseMenuPressOptions): UseMenuPressReturn {
   // exists.
   const longPressApiRef = useRef<UseLongPressHandlers | null>(null);
   const touchMovePreventerRef = useRef<(() => void) | null>(null);
+  // The edge autoscroll running now: its scroller, its direction, and the
+  // re-read of the row under the resting pointer after each step.
   const autoscrollRef = useRef<{
-    timer: ReturnType<typeof setInterval>;
+    scroller: HTMLElement;
     direction: 1 | -1;
+    reread: () => void;
   } | null>(null);
+  const [autoscroll] = useState(() =>
+    edgeAutoscroll({
+      intervalMs: AUTOSCROLL_INTERVAL_MS,
+      immediate: true,
+      step: () => (autoscrollRef.current?.direction ?? 0) * AUTOSCROLL_STEP_PX,
+      apply: delta => {
+        const running = autoscrollRef.current;
+        if (running == null) {
+          return 0;
+        }
+        const before = running.scroller.scrollTop;
+        running.scroller.scrollTop = before + delta;
+        const moved = running.scroller.scrollTop - before;
+        if (moved === 0) {
+          // The edge is reached; nothing more to reveal.
+          autoscrollRef.current = null;
+          return 0;
+        }
+        running.reread();
+        return moved;
+      },
+    }),
+  );
   const lastPointerEventRef = useRef<PointerEvent | null>(null);
   const triggerGestureRef = useRef<number | null>(null);
   // The second pointer that ended a gesture must not start the next one.
@@ -396,11 +437,9 @@ export function useMenuPress(options: UseMenuPressOptions): UseMenuPressReturn {
   );
 
   const stopAutoscroll = useCallback(() => {
-    if (autoscrollRef.current != null) {
-      clearInterval(autoscrollRef.current.timer);
-      autoscrollRef.current = null;
-    }
-  }, []);
+    autoscroll.stop();
+    autoscrollRef.current = null;
+  }, [autoscroll]);
 
   const endGesture = useCallback(() => {
     longPressApiRef.current?.cancel();
@@ -423,7 +462,10 @@ export function useMenuPress(options: UseMenuPressOptions): UseMenuPressReturn {
       }
       // In a menu the highlight IS focus. A row whose root takes no
       // focus is highlighted through the control inside it; over nothing,
-      // the menu root holds focus so no row is lit.
+      // the menu root holds focus so no row is lit. The focus follows the
+      // last input (`architecture:interaction-modality` INV1): a held press
+      // is pointer input, so the row does not match :focus-visible, which a
+      // plain focus() would inherit from the focus before it.
       const target =
         row == null
           ? menuRef.current
@@ -431,7 +473,7 @@ export function useMenuPress(options: UseMenuPressOptions): UseMenuPressReturn {
             ? row
             : row.querySelector<HTMLElement>(INNER_CONTROL_SELECTOR);
       if (target != null && target !== getDocument().activeElement) {
-        target.focus({preventScroll: true});
+        focusForLastInput(target, {preventScroll: true});
       }
     },
     [getDocument],
@@ -580,36 +622,29 @@ export function useMenuPress(options: UseMenuPressOptions): UseMenuPressReturn {
         return;
       }
       stopAutoscroll();
-      const tick = () => {
-        const before = scroller.scrollTop;
-        scroller.scrollTop = before + direction * AUTOSCROLL_STEP_PX;
-        if (scroller.scrollTop === before) {
-          // The edge is reached; nothing more to reveal.
-          stopAutoscroll();
-          return;
-        }
-        // The rows moved under the resting pointer: re-read the row under it.
-        const last = lastPointerEventRef.current;
-        if (last != null) {
-          const point = resolvePoint(last);
-          stepRef.current(
-            {
-              type: 'move',
-              row: point.row,
-              isInMenu: point.isInMenu,
-              time: Date.now(),
-            },
-            last,
-          );
-        }
-      };
       autoscrollRef.current = {
+        scroller,
         direction,
-        timer: setInterval(tick, AUTOSCROLL_INTERVAL_MS),
+        // The rows moved under the resting pointer: re-read the row under it.
+        reread: () => {
+          const last = lastPointerEventRef.current;
+          if (last != null) {
+            const point = resolvePoint(last);
+            stepRef.current(
+              {
+                type: 'move',
+                row: point.row,
+                isInMenu: point.isInMenu,
+                time: Date.now(),
+              },
+              last,
+            );
+          }
+        },
       };
-      tick();
+      autoscroll.update();
     },
-    [getScroller, resolvePoint, stopAutoscroll],
+    [autoscroll, getScroller, resolvePoint, stopAutoscroll],
   );
 
   // --- Document-level tracking ----------------------------------------------

package/src/hooks/usePressFeedback.doc.mjs

@@ -20,12 +20,12 @@ export const docs = {
       name: 'pressableProps',
       type: "{'data-astryx-pressable': ''}",
       description:
-        "The marker attribute to spread on the element that paints the press. Compose one of `interactionOverlayStyles` (from `@astryxdesign/core/utils`) on the same element — `backgroundColor` or `backgroundImage` for a surface whose hover and press are the system's overlays, `pressedBackgroundColor` for one whose hover is its own — and it paints the pressed token at the press's strength on the first frame of a believed press and fades it over the release, keeping `:active` for a mouse. A press is themed through `--color-overlay-pressed`.",
+        "The marker attribute to spread on the element that paints the press. Compose one of `interactionOverlayStyles` (from `@astryxdesign/core/utils`) on the same element — `backgroundColor` or `backgroundImage` for a surface whose hover and press are the system's overlays, `pressedBackgroundColor` for one whose hover is its own — and it paints the pressed token at the press's strength on the first frame of a believed press and fades it over the release, keeping `:active` for a mouse on a desktop. On a phone or tablet, where the stylesheet drops `:active`, the controller also paints a mouse, trackpad or Space-key press: at once, held while the button or key is down, faded at the release. A press is themed through `--color-overlay-pressed`.",
     },
   ],
   usage: {
     description:
-      'The touch press model every Astryx pressable uses, for a local component that paints its own press. Under a finger, CSS `:active` paints on the touch itself and can outlive the start of a scroll; the press model instead waits 150 ms before believing a press, cancels it the moment the finger travels 10 px or a scroll claims the gesture, never brings it back inside that gesture, answers a quick tap at the lift, and fades the release over 200 ms — the clocks a native list uses. One document-level controller does this for every marked element (installed by the first pressable to mount, removed by the last to unmount), so calling the hook adds no listener or state to your element. Under a mouse nothing changes: keep your `:active` rule, and drop it under `@media (pointer: coarse)` the way the built-in components do.',
+      'The touch press model every Astryx pressable uses, for a local component that paints its own press. Under a finger, CSS `:active` paints on the touch itself and can outlive the start of a scroll; the press model instead waits 150 ms before believing a press, cancels it the moment the finger travels 10 px or a scroll claims the gesture, never brings it back inside that gesture, answers a quick tap at the lift, and fades the release over 200 ms — the clocks a native list uses. One document-level controller does this for every marked element (installed by the first pressable to mount, removed by the last to unmount), so calling the hook adds no listener or state to your element. On a desktop a mouse press is still your `:active` rule: keep it, and drop it under `@media (pointer: coarse)` the way the built-in components do. That query reads the primary pointer, so on a phone or tablet it also drops `:active` for a connected mouse, trackpad or keyboard; the controller paints those presses there (at once, faded at the release), so nothing goes unanswered.',
     bestPractices: [
       {
         guidance: true,
@@ -35,7 +35,7 @@ export const docs = {
       {
         guidance: true,
         description:
-          'Let the composed style own the press on every pointer: it keeps `:active` for a mouse and drops it under `@media (pointer: coarse)`, so a finger sees only the press model. A rule of your own that paints `:active` would paint under a finger too, on the touch and through a scroll.',
+          'Let the composed style own the press on every pointer: it keeps `:active` for a desktop mouse and drops it under `@media (pointer: coarse)`, where the controller paints every press (a finger through the press model, a mouse or Space key at once). A rule of your own that paints `:active` would paint under a finger too, on the touch and through a scroll.',
       },
       {
         guidance: false,
@@ -58,7 +58,7 @@ export const docs = {
 /** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
   description:
-    'Marks an element as a pressable surface of the touch press model (150 ms onset, 10 px slop, cancel on scroll, tap answers at lift, 200 ms fade) and installs the shared document controller. Returns the data-astryx-pressable marker to spread; compose one of interactionOverlayStyles on the same element to paint.',
+    'Marks an element as a pressable surface of the touch press model (150 ms onset, 10 px slop, cancel on scroll, tap answers at lift, 200 ms fade) and installs the shared document controller; on a coarse primary pointer it also paints mouse, trackpad and Space-key presses at once. Returns the data-astryx-pressable marker to spread; compose one of interactionOverlayStyles on the same element to paint.',
   paramDescriptions: {},
   returnDescriptions: {
     pressableProps:

package/src/hooks/usePressFeedback.ts

@@ -30,8 +30,11 @@ import {installPressFeedback, pressableProps} from '../utils/pressFeedback';
  * while a touch press is believed (after the onset delay, cancelled by travel
  * or by a scroll) and for the release, and the composed style paints the
  * pressed token at the press's strength on the first frame and fades it over
- * the release, keeping `:active` for a mouse. A press is themed through
- * `--color-overlay-pressed`, which the hold, the flash and the fade all read.
+ * the release, keeping `:active` for a mouse on a desktop. On a phone or
+ * tablet the stylesheet drops `:active` for every press, so the controller
+ * also paints a mouse, trackpad or Space-key press there, at once. A press is
+ * themed through `--color-overlay-pressed`, which the hold, the flash and the
+ * fade all read.
  * Every Astryx component that paints a press already does this; reach for it
  * when a local component paints its own press and must behave like the rest
  * of the system under a finger.

package/src/hooks/useScrollableArea.test.tsx

@@ -113,11 +113,46 @@ function makeMeasurable(viewport: HTMLElement) {
   });
 }
 
+/**
+ * As in a browser, the computed overflow is the one the hook writes: an axis is
+ * `clip` until the hook lets it scroll. `writingMode` reads the current mode.
+ */
+function mockOwnedComputedStyle(
+  writingMode: () => string = () => 'horizontal-tb',
+) {
+  vi.mocked(window.getComputedStyle).mockImplementation(element => {
+    const owned = (axis: 'X' | 'Y') =>
+      element
+        .getAttribute('style')
+        ?.match(new RegExp(`--x-overflow${axis}:\\s*(\\w+)`))?.[1] ?? 'visible';
+    return new Proxy({} as CSSStyleDeclaration, {
+      get(_target, property) {
+        if (property === 'overflowX') {
+          return owned('X');
+        }
+        if (property === 'overflowY') {
+          return owned('Y');
+        }
+        if (property === 'writingMode') {
+          return writingMode();
+        }
+        if (property === 'direction') {
+          return 'ltr';
+        }
+        return property === 'display' ? 'block' : '';
+      },
+    });
+  });
+}
+
 describe('useScrollableArea', () => {
   let frames: FrameRequestCallback[];
+  // A computed `direction` set by a stylesheet alone: no attribute changes.
+  let stylesheetDirection: string | null;
 
   beforeEach(() => {
     frames = [];
+    stylesheetDirection = null;
     vi.stubGlobal(
       'requestAnimationFrame',
       vi.fn((callback: FrameRequestCallback) => {
@@ -144,6 +179,9 @@ describe('useScrollableArea', () => {
           if (element instanceof HTMLElement && property === 'overflowY') {
             return element.style.overflowY || 'auto';
           }
+          if (property === 'direction' && stylesheetDirection != null) {
+            return stylesheetDirection;
+          }
           return Reflect.get(target, property, target);
         },
       });
@@ -179,6 +217,133 @@ describe('useScrollableArea', () => {
     expect(viewport.getAttribute('style')).toContain('clip');
   });
 
+  it('is a tab stop from the first frame its content overflows, before any animation frame (AST-025 FR12)', () => {
+    mockOwnedComputedStyle();
+    // Content that is already taller than the viewport when it mounts, such
+    // as loaded data replacing a loading fallback.
+    const extent = (value: number, scrolled: number) =>
+      function (this: HTMLElement) {
+        return this.dataset.testid === 'viewport' ? scrolled : value;
+      };
+    vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(
+      extent(100, 100),
+    );
+    vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(
+      extent(100, 100),
+    );
+    vi.spyOn(HTMLElement.prototype, 'scrollWidth', 'get').mockImplementation(
+      extent(100, 100),
+    );
+    vi.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(
+      extent(100, 180),
+    );
+
+    render(<Fixture axis="block" />);
+    const viewport = screen.getByTestId('viewport');
+
+    // No animation frame has run.
+    expect(viewport.getAttribute('style')).toContain('--x-overflowY: auto');
+    expect(viewport).toHaveAttribute('tabindex', '0');
+    expect(state().block.isScrollable).toBe(true);
+  });
+
+  it('settles content that fits only once a scrollbar takes space, without looping in one commit (AST-025 FR7)', () => {
+    mockOwnedComputedStyle();
+    // Under `clip` the content is 105 tall and overflows; under `auto` its
+    // scrollbar narrows it and it fits (a 16:9 child at full width).
+    const viewportOverflowY = (element: HTMLElement) =>
+      element.getAttribute('style')?.match(/--x-overflowY:\s*(\w+)/)?.[1];
+    vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(100);
+    vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockReturnValue(100);
+    vi.spyOn(HTMLElement.prototype, 'scrollWidth', 'get').mockReturnValue(100);
+    vi.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(
+      function (this: HTMLElement) {
+        return this.dataset.testid === 'viewport' &&
+          viewportOverflowY(this) !== 'auto'
+          ? 105
+          : 100;
+      },
+    );
+
+    expect(() => render(<Fixture axis="block" />)).not.toThrow();
+    // At most one flip per animation frame, as before.
+    expect(() => flushFrame()).not.toThrow();
+    expect(() => flushFrame()).not.toThrow();
+  });
+
+  it('leaves one frame pending after an overflowing mount, and none after unmount (AST-025 FR7)', async () => {
+    mockOwnedComputedStyle();
+    const pending = new Set<number>();
+    let nextId = 0;
+    vi.stubGlobal(
+      'requestAnimationFrame',
+      vi.fn(() => {
+        nextId += 1;
+        pending.add(nextId);
+        return nextId;
+      }),
+    );
+    vi.stubGlobal(
+      'cancelAnimationFrame',
+      vi.fn((id: number) => pending.delete(id)),
+    );
+    const extent = (fits: number, viewport: number) =>
+      function (this: HTMLElement) {
+        return this.dataset.testid === 'viewport' ? viewport : fits;
+      };
+    vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(100);
+    vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockReturnValue(100);
+    vi.spyOn(HTMLElement.prototype, 'scrollWidth', 'get').mockReturnValue(100);
+    vi.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(
+      extent(100, 180),
+    );
+
+    const {unmount} = render(<Fixture axis="block" />);
+    // Let the style change reach the MutationObserver.
+    await act(async () => {});
+    expect(screen.getByTestId('viewport')).toHaveAttribute('tabindex', '0');
+    expect(pending.size).toBe(1);
+
+    unmount();
+    expect(pending.size).toBe(0);
+  });
+
+  it('keeps the tab stop through a writing-mode change that moves the overflowing axis', async () => {
+    let isVertical = false;
+    mockOwnedComputedStyle(() =>
+      isVertical ? 'vertical-rl' : 'horizontal-tb',
+    );
+    // The content overflows the block axis in either mode: physical y while
+    // horizontal, physical x once vertical.
+    const viewportExtent = (axis: 'x' | 'y') =>
+      function (this: HTMLElement) {
+        if (this.dataset.testid !== 'viewport') {
+          return 100;
+        }
+        return (axis === 'x') === isVertical ? 180 : 100;
+      };
+    vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(100);
+    vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockReturnValue(100);
+    vi.spyOn(HTMLElement.prototype, 'scrollWidth', 'get').mockImplementation(
+      viewportExtent('x'),
+    );
+    vi.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(
+      viewportExtent('y'),
+    );
+
+    render(<Fixture axis="block" />);
+    const viewport = screen.getByTestId('viewport');
+    expect(viewport).toHaveAttribute('tabindex', '0');
+
+    isVertical = true;
+    await act(async () => {
+      viewport.parentElement!.setAttribute('dir', 'ltr');
+    });
+    flushFrame();
+    expect(viewport.getAttribute('style')).toContain('--x-overflowX: auto');
+    expect(viewport).toHaveAttribute('tabindex', '0');
+  });
+
   it('owns fitting and explicit Sticky overflow styling for direct adopters', () => {
     const {rerender} = render(<Fixture />);
     const viewport = screen.getByTestId('viewport');
@@ -252,7 +417,7 @@ describe('useScrollableArea', () => {
     expect(viewport).toHaveAttribute('tabindex', '0');
   });
 
-  it('requires scroll-capable computed overflow and more than 1px excess geometry', () => {
+  it('requires scroll-capable computed overflow and more than 1px excess geometry', async () => {
     render(<Fixture />);
     const viewport = screen.getByTestId('viewport');
     makeMeasurable(viewport);
@@ -268,8 +433,11 @@ describe('useScrollableArea', () => {
     flushFrame();
     expect(state().inline.isScrollable).toBe(false);
 
-    viewport.style.overflowX = 'auto';
-    void act(() => viewport.dispatchEvent(new Event('scroll')));
+    // A style change with no geometry change reaches the hook through its
+    // attribute observer; a scroll only ever moves the offset.
+    await act(async () => {
+      viewport.style.overflowX = 'auto';
+    });
     flushFrame();
     expect(state().inline).toEqual({
       isScrollable: true,
@@ -312,6 +480,179 @@ describe('useScrollableArea', () => {
     });
   });
 
+  it('derives edges as a scroll is dispatched, without reading computed style or requesting a frame', () => {
+    render(<Fixture />);
+    const viewport = screen.getByTestId('viewport');
+    makeMeasurable(viewport);
+    setGeometry(viewport, {scrollWidth: 300});
+    void act(() => viewport.dispatchEvent(new Event('scroll')));
+    flushFrame();
+    expect(state().inline.isScrollable).toBe(true);
+
+    const styleReads = vi.mocked(window.getComputedStyle).mock.calls.length;
+    const steps: [number, {atStart: boolean; atEnd: boolean}][] = [
+      [80, {atStart: false, atEnd: false}],
+      [200, {atStart: false, atEnd: true}],
+      [0, {atStart: true, atEnd: false}],
+    ];
+    for (const [scrollLeft, edges] of steps) {
+      setGeometry(viewport, {scrollLeft});
+      void act(() => viewport.dispatchEvent(new Event('scroll')));
+      expect(frames).toHaveLength(0);
+      expect(state().inline).toEqual({isScrollable: true, ...edges});
+    }
+    expect(vi.mocked(window.getComputedStyle).mock.calls).toHaveLength(
+      styleReads,
+    );
+  });
+
+  it('leaves a scroll to the full measurement already pending in its frame', () => {
+    render(<Fixture />);
+    const viewport = screen.getByTestId('viewport');
+    const content = screen.getByTestId('content');
+    makeMeasurable(viewport);
+    setGeometry(viewport, {scrollWidth: 300});
+    void act(() => viewport.dispatchEvent(new Event('scroll')));
+    flushFrame();
+
+    void act(() => content.dispatchEvent(new Event('transitionend')));
+    expect(frames).toHaveLength(1);
+    setGeometry(viewport, {scrollLeft: 80});
+    void act(() => viewport.dispatchEvent(new Event('scroll')));
+    expect(frames).toHaveLength(1);
+    expect(state().inline.atStart).toBe(true);
+
+    flushFrame();
+    expect(state().inline).toEqual({
+      isScrollable: true,
+      atStart: false,
+      atEnd: false,
+    });
+  });
+
+  it('measures fully when a scroll finds the requested overflow gone', () => {
+    render(<Fixture />);
+    const viewport = screen.getByTestId('viewport');
+    makeMeasurable(viewport);
+    setGeometry(viewport, {scrollWidth: 300, scrollLeft: 80});
+    void act(() => viewport.dispatchEvent(new Event('scroll')));
+    flushFrame();
+    expect(viewport).toHaveAttribute('tabindex', '0');
+
+    // Content shrinking clamps the offset, which the browser reports as a
+    // scroll: a change the offset cannot explain, measured in full.
+    setGeometry(viewport, {scrollWidth: 100, scrollLeft: 0});
+    void act(() => viewport.dispatchEvent(new Event('scroll')));
+    expect(frames).toHaveLength(1);
+    flushFrame();
+    expect(state().inline).toEqual({
+      isScrollable: false,
+      atStart: true,
+      atEnd: true,
+    });
+    expect(viewport).not.toHaveAttribute('tabindex');
+  });
+
+  it('keeps the last valid edges when a scroll arrives while the viewport has no box', () => {
+    render(<Fixture />);
+    const viewport = screen.getByTestId('viewport');
+    makeMeasurable(viewport);
+    setGeometry(viewport, {scrollWidth: 300, scrollLeft: 80});
+    void act(() => viewport.dispatchEvent(new Event('scroll')));
+    flushFrame();
+
+    // At offset 0 a zero-size box would report the start edge, so this step
+    // fails if the zero-size guard is removed.
+    setGeometry(viewport, {clientWidth: 0, clientHeight: 0, scrollLeft: 0});
+    void act(() => viewport.dispatchEvent(new Event('scroll')));
+    flushFrame();
+    expect(state().inline).toEqual({
+      isScrollable: true,
+      atStart: false,
+      atEnd: false,
+    });
+  });
+
+  it('applies the measured writing direction on the scroll path', () => {
+    render(<Fixture />);
+    const viewport = screen.getByTestId('viewport');
+    makeMeasurable(viewport);
+    viewport.dir = 'rtl';
+    setGeometry(viewport, {scrollWidth: 300});
+    void act(() => viewport.dispatchEvent(new Event('scroll')));
+    flushFrame();
+    expect(state().inline).toEqual({
+      isScrollable: true,
+      atStart: true,
+      atEnd: false,
+    });
+
+    const styleReads = vi.mocked(window.getComputedStyle).mock.calls.length;
+    setGeometry(viewport, {scrollLeft: -200});
+    void act(() => viewport.dispatchEvent(new Event('scroll')));
+    flushFrame();
+    expect(state().inline).toEqual({
+      isScrollable: true,
+      atStart: false,
+      atEnd: true,
+    });
+    expect(vi.mocked(window.getComputedStyle).mock.calls).toHaveLength(
+      styleReads,
+    );
+  });
+
+  it('derives vertical-rl block edges on the scroll path without requesting a frame', () => {
+    render(<Fixture axis="block" />);
+    const viewport = screen.getByTestId('viewport');
+    makeMeasurable(viewport);
+    viewport.style.writingMode = 'vertical-rl';
+    setGeometry(viewport, {scrollWidth: 220});
+    void act(() => viewport.dispatchEvent(new Event('transitionend')));
+    flushFrame();
+    expect(state().block).toEqual({
+      isScrollable: true,
+      atStart: true,
+      atEnd: false,
+    });
+
+    // The block axis runs right to left along x: its end is scrollLeft -120.
+    setGeometry(viewport, {scrollLeft: -120});
+    void act(() => viewport.dispatchEvent(new Event('scroll')));
+    expect(frames).toHaveLength(0);
+    expect(state().block).toEqual({
+      isScrollable: true,
+      atStart: false,
+      atEnd: true,
+    });
+  });
+
+  it('measures fully when a scroll offset contradicts the measured direction', () => {
+    render(<Fixture />);
+    const viewport = screen.getByTestId('viewport');
+    makeMeasurable(viewport);
+    setGeometry(viewport, {scrollWidth: 300});
+    void act(() => viewport.dispatchEvent(new Event('scroll')));
+    flushFrame();
+    expect(state().inline).toEqual({
+      isScrollable: true,
+      atStart: true,
+      atEnd: false,
+    });
+
+    // A stylesheet alone turns the area RTL, so nothing re-measured; the
+    // next scroll reports a negative offset the stored mapping rules out.
+    stylesheetDirection = 'rtl';
+    setGeometry(viewport, {scrollLeft: -200});
+    void act(() => viewport.dispatchEvent(new Event('scroll')));
+    expect(frames).toHaveLength(1);
+    flushFrame();
+    expect(state().inline).toEqual({
+      isScrollable: true,
+      atStart: false,
+      atEnd: true,
+    });
+  });
+
   it('normalizes RTL inline offsets to logical edges', () => {
     render(<Fixture />);
     const viewport = screen.getByTestId('viewport');