@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/dist/hooks/useMenuPress.js

@@ -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
@@ -46,10 +48,13 @@
  * - /packages/core/src/hooks/useMenuPress.test.tsx
  * - /packages/core/src/hooks/menuPressGesture.ts
  */
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { currentGesture } from "../Layer/gestureCounter.js";
 import { IDLE_MENU_PRESS, menuPressStep } from "./menuPressGesture.js";
 import { useLongPress } from "./useLongPress.js";
+import { edgeAutoscroll } from "../utils/edgeAutoscroll.js";
+import { focusForLastInput } from "../utils/focusReturn.js";
+import { useInteractionModalityTracking } from "../utils/interactionModality.js";
 
 /** Marks a menu root that carries this press model. */
 export const MENU_PRESS_MARKER = 'data-astryx-menu-press';
@@ -225,6 +230,9 @@ function isInMenuTree(element, root) {
 export function useMenuPress(options) {
   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(IDLE_MENU_PRESS);
   const pointerIdRef = useRef(null);
   const detachRef = useRef(null);
@@ -235,7 +243,30 @@ export function useMenuPress(options) {
   // exists.
   const longPressApiRef = useRef(null);
   const touchMovePreventerRef = useRef(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(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(null);
   const triggerGestureRef = useRef(null);
   // The second pointer that ended a gesture must not start the next one.
@@ -282,11 +313,9 @@ export function useMenuPress(options) {
     };
   }, [getDocument]);
   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();
     touchMovePreventerRef.current?.();
@@ -309,10 +338,13 @@ export function useMenuPress(options) {
     }
     // 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 : isRowFocusable(row) ? row : row.querySelector(INNER_CONTROL_SELECTOR);
     if (target != null && target !== getDocument().activeElement) {
-      target.focus({
+      focusForLastInput(target, {
         preventScroll: true
       });
     }
@@ -448,32 +480,25 @@ export function useMenuPress(options) {
       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();
-  }, [getScroller, resolvePoint, stopAutoscroll]);
+    autoscroll.update();
+  }, [autoscroll, getScroller, resolvePoint, stopAutoscroll]);
 
   // --- Document-level tracking ----------------------------------------------
 

package/dist/hooks/usePressFeedback.d.ts

@@ -11,8 +11,11 @@ import { pressableProps } from '../utils/pressFeedback.js';
  * 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/dist/hooks/usePressFeedback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePressFeedback.d.ts","sourceRoot":"","sources":["../../src/hooks/usePressFeedback.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAuB,cAAc,EAAC,MAAM,wBAAwB,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,cAAc,CAGxD"}
+{"version":3,"file":"usePressFeedback.d.ts","sourceRoot":"","sources":["../../src/hooks/usePressFeedback.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAuB,cAAc,EAAC,MAAM,wBAAwB,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,cAAc,CAGxD"}

package/dist/hooks/usePressFeedback.js

@@ -29,8 +29,11 @@ import { installPressFeedback, pressableProps } from "../utils/pressFeedback.js"
  * 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/dist/hooks/useScrollableArea.d.ts

@@ -4,6 +4,11 @@
  * @output Safe prop getters, native keyboard entry, and stable per-axis effective scroll state
  * @position Canonical behavior core for ScrollableArea and structure-owning adopters
  *
+ * Geometry and style signals coalesce into one full measurement per frame. A
+ * scroll only moves the offset, so its event re-derives the logical edges
+ * from box geometry: no computed-style read and no extra frame while the
+ * user scrolls.
+ *
  * SYNC: When modified, update:
  * - /packages/core/src/hooks/useScrollableArea.doc.mjs
  * - /packages/core/src/hooks/useScrollableArea.test.tsx

package/dist/hooks/useScrollableArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollableArea.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollableArea.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAOL,KAAK,aAAa,EAEnB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkB5C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,CAAC;AACnD,MAAM,MAAM,uBAAuB,GAAG,gBAAgB,GAAG,QAAQ,CAAC;AAElE,MAAM,MAAM,oBAAoB,GAC5B;IAAC,KAAK,EAAE,SAAS,CAAA;CAAC,GAClB;IAAC,KAAK,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAAC,GAC7D;IACE,KAAK,EAAE,mBAAmB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC3B,CAAC;AAEN,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,eAAe,CAAC;CACxB;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,UAAU,CAAC;IACjB,cAAc,EAAE,oBAAoB,CAAC;IACrC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,iBAAiB,CAAC,EAAE,uBAAuB,CAAC;CAC7C;AAED,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,GACtE,aAAa,CAAC,CAAC,CAAC,CAAC;AAEnB,MAAM,WAAW,uBAAuB;IACtC,gBAAgB,CAAC,CAAC,SAAS,WAAW,EACpC,KAAK,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,sBAAsB,CAAC,CAAC,CAAC,CAAC;IAC7B,eAAe,CAAC,CAAC,SAAS,WAAW,EACnC,KAAK,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,sBAAsB,CAAC,CAAC,CAAC,CAAC;IAC7B,KAAK,EAAE,mBAAmB,CAAC;CAC5B;AAiGD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,cAAc,EACd,UAAoB,EACpB,iBAAoC,GACrC,EAAE,wBAAwB,GAAG,uBAAuB,CA0SpD"}
+{"version":3,"file":"useScrollableArea.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollableArea.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAOL,KAAK,aAAa,EAEnB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmB5C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,CAAC;AACnD,MAAM,MAAM,uBAAuB,GAAG,gBAAgB,GAAG,QAAQ,CAAC;AAElE,MAAM,MAAM,oBAAoB,GAC5B;IAAC,KAAK,EAAE,SAAS,CAAA;CAAC,GAClB;IAAC,KAAK,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAAC,GAC7D;IACE,KAAK,EAAE,mBAAmB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC3B,CAAC;AAEN,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,eAAe,CAAC;CACxB;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,UAAU,CAAC;IACjB,cAAc,EAAE,oBAAoB,CAAC;IACrC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,iBAAiB,CAAC,EAAE,uBAAuB,CAAC;CAC7C;AAED,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,GACtE,aAAa,CAAC,CAAC,CAAC,CAAC;AAEnB,MAAM,WAAW,uBAAuB;IACtC,gBAAgB,CAAC,CAAC,SAAS,WAAW,EACpC,KAAK,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,sBAAsB,CAAC,CAAC,CAAC,CAAC;IAC7B,eAAe,CAAC,CAAC,SAAS,WAAW,EACnC,KAAK,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,sBAAsB,CAAC,CAAC,CAAC,CAAC;IAC7B,KAAK,EAAE,mBAAmB,CAAC;CAC5B;AAkGD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,cAAc,EACd,UAAoB,EACpB,iBAAoC,GACrC,EAAE,wBAAwB,GAAG,uBAAuB,CA+YpD"}

package/dist/hooks/useScrollableArea.js

@@ -8,6 +8,11 @@
  * @output Safe prop getters, native keyboard entry, and stable per-axis effective scroll state
  * @position Canonical behavior core for ScrollableArea and structure-owning adopters
  *
+ * Geometry and style signals coalesce into one full measurement per frame. A
+ * scroll only moves the offset, so its event re-derives the logical edges
+ * from box geometry: no computed-style read and no extra frame while the
+ * user scrolls.
+ *
  * SYNC: When modified, update:
  * - /packages/core/src/hooks/useScrollableArea.doc.mjs
  * - /packages/core/src/hooks/useScrollableArea.test.tsx
@@ -20,7 +25,7 @@ import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
 import { mergeProps } from "../utils/mergeProps.js";
 import { mergeRefs } from "../utils/mergeRefs.js";
 import { observeResize } from "../utils/sharedResizeObserver.js";
-import { getLogicalAxisMapping, measureLogicalOverflowGeometry, measureLogicalScrollAxis } from "./scrollGeometry.js";
+import { getLogicalAxisMapping, measureLogicalOverflowGeometry, measureLogicalScrollAxis, measureLogicalScrollPosition } from "./scrollGeometry.js";
 import { registerScrollOwner, unregisterScrollOwner } from "./scrollOwnerRegistry.js";
 const INACTIVE_AXIS_STATE = {
   isScrollable: false,
@@ -41,6 +46,7 @@ const INITIAL_MAPPING = {
   inlineReversed: false,
   blockReversed: false
 };
+const LOGICAL_AXES = ['inline', 'block'];
 const styles = {
   overflow: (overflowX, overflowY) => [{
     kXHlph: overflowX != null ? "xyto64x" : overflowX,
@@ -108,6 +114,7 @@ export function useScrollableArea({
   const [overflow, setOverflow] = useState(INITIAL_OVERFLOW);
   const [mapping, setMapping] = useState(INITIAL_MAPPING);
   const stateRef = useRef(INITIAL_STATE);
+  const measureRef = useRef(null);
   const viewportRef = useCallback(node => {
     setViewport(current => current === node ? current : node);
   }, []);
@@ -122,8 +129,20 @@ export function useScrollableArea({
     }
     let frame = null;
     let isActive = true;
-    const measure = () => {
-      frame = null;
+    // What the last full measurement read from computed style and geometry.
+    // A scroll changes neither, so the scroll path reuses them.
+    let measuredMapping = INITIAL_MAPPING;
+    let measuredOverflow = INITIAL_OVERFLOW;
+    const publish = nextState => {
+      stateRef.current = nextState;
+      registerScrollOwner(viewport, nextState);
+      setMeasured(current => statesEqual(current, nextState) ? current : nextState);
+    };
+
+    // Measures now; `measure` is the frame callback that also clears the
+    // pending frame. The same-commit remeasure below calls this one, so a frame
+    // already scheduled stays the only pending one.
+    const measureNow = () => {
       const computedStyle = getComputedStyle(viewport);
       const nextMapping = getLogicalAxisMapping(computedStyle.writingMode, computedStyle.direction);
       const inlineOverflow = axisIsRequested(axis, 'inline') ? measureLogicalOverflowGeometry(viewport, 'inline', nextMapping) : false;
@@ -144,26 +163,78 @@ export function useScrollableArea({
         inline,
         block
       };
-      stateRef.current = nextState;
-      registerScrollOwner(viewport, nextState);
-      // eslint-disable-next-line @eslint-react/set-state-in-effect -- measured DOM geometry controls whether the viewport becomes a CSS scroll container
+      measuredMapping = nextMapping;
+      measuredOverflow = nextOverflow;
+      // Measured DOM geometry decides whether the viewport becomes a CSS
+      // scroll container.
       setOverflow(current => overflowEqual(current, nextOverflow) ? current : nextOverflow);
-      // eslint-disable-next-line @eslint-react/set-state-in-effect -- measured DOM state is the hook's output
-      setMeasured(current => statesEqual(current, nextState) ? current : nextState);
-      // eslint-disable-next-line @eslint-react/set-state-in-effect -- writing-mode changes remap behavior-owned physical CSS
+      // The measured DOM state is the hook's output.
+      publish(nextState);
+      // A writing-mode change remaps the behavior-owned physical CSS.
       setMapping(current => mappingsEqual(current, nextMapping) ? current : nextMapping);
     };
+    const measure = () => {
+      frame = null;
+      measureNow();
+    };
     const scheduleMeasure = () => {
       if (!isActive || frame != null) {
         return;
       }
       frame = window.requestAnimationFrame(measure);
     };
+
+    // A scroll moves the offset and nothing else, so it only re-derives the
+    // logical edges, from box geometry, as the scroll event is dispatched.
+    // Browsers fire it at most once per frame, before animation-frame
+    // callbacks, when style and layout are normally still clean from the last
+    // frame: no computed style is read, no frame is requested, and the edges
+    // are current in the frame that moved. Anything a scroll cannot explain
+    // (overflow appearing or going away on a requested axis, or an offset
+    // whose sign the measured writing direction rules out) schedules the
+    // full measurement, as every other invalidation does.
+    const onScroll = () => {
+      if (!isActive || frame != null) {
+        // A full measurement is already pending for this frame.
+        return;
+      }
+      const current = stateRef.current;
+      let next = current;
+      for (const logicalAxis of LOGICAL_AXES) {
+        if (!axisIsRequested(axis, logicalAxis)) {
+          continue;
+        }
+        const position = measureLogicalScrollPosition(viewport, logicalAxis, measuredMapping);
+        if (position == null) {
+          return;
+        }
+        if (position.overflows !== measuredOverflow[logicalAxis] || position.contradictsMapping) {
+          scheduleMeasure();
+          return;
+        }
+        const axisState = current[logicalAxis];
+        if (!axisState.isScrollable || axisState.atStart === position.atStart && axisState.atEnd === position.atEnd) {
+          continue;
+        }
+        next = {
+          ...next,
+          [logicalAxis]: {
+            isScrollable: true,
+            atStart: position.atStart,
+            atEnd: position.atEnd
+          }
+        };
+      }
+      if (next !== current) {
+        publish(next);
+      }
+    };
     registerScrollOwner(viewport, stateRef.current);
+    measureRef.current = measureNow;
     measure();
     const stopObservingViewport = observeResize(viewport, scheduleMeasure);
     const stopObservingContent = observeResize(content, scheduleMeasure);
-    viewport.addEventListener('scroll', scheduleMeasure, {
+    viewport.addEventListener('scroll', onScroll, {
       passive: true
     });
     window.addEventListener('resize', scheduleMeasure);
@@ -201,11 +272,12 @@ export function useScrollableArea({
     void fonts?.ready.then(scheduleMeasure);
     return () => {
       isActive = false;
+      measureRef.current = null;
       unregisterScrollOwner(viewport);
       stopObservingViewport();
       stopObservingContent();
       mutationObserver?.disconnect();
-      viewport.removeEventListener('scroll', scheduleMeasure);
+      viewport.removeEventListener('scroll', onScroll);
       window.removeEventListener('resize', scheduleMeasure);
       window.visualViewport?.removeEventListener('resize', scheduleMeasure);
       content.removeEventListener('load', scheduleMeasure, true);
@@ -219,6 +291,27 @@ export function useScrollableArea({
       }
     };
   }, [axis, content, viewport]);
+
+  // The first measure reads the viewport before this hook has let an
+  // overflowing axis scroll (it is `clip` until then), so it finds overflow
+  // but no scrollable axis yet. Measure again in the same commit once an axis
+  // has just gained overflow (or the axis mapping changed), so the viewport is
+  // a tab stop from the first frame it scrolls, not an animation frame later
+  // (`spec:AST-025` FR12). Only on a gain: content that fits only once a
+  // scrollbar takes space would otherwise flip overflow back and forth inside
+  // one commit; a loss waits for the next frame, as before.
+  const previousOverflowRef = useRef(INITIAL_OVERFLOW);
+  const previousMappingRef = useRef(INITIAL_MAPPING);
+  useIsomorphicLayoutEffect(() => {
+    const previous = previousOverflowRef.current;
+    const hasGainedOverflow = overflow.inline && !previous.inline || overflow.block && !previous.block;
+    const hasRemapped = mapping !== previousMappingRef.current;
+    previousOverflowRef.current = overflow;
+    previousMappingRef.current = mapping;
+    if (hasGainedOverflow || hasRemapped) {
+      measureRef.current?.();
+    }
+  }, [overflow, mapping]);
   const state = useMemo(() => ({
     inline: axisIsRequested(axis, 'inline') ? measured.inline : INACTIVE_AXIS_STATE,
     block: axisIsRequested(axis, 'block') ? measured.block : INACTIVE_AXIS_STATE

package/dist/i18n/generated-locales/en.generated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.generated.d.ts","sourceRoot":"","sources":["../../../src/i18n/generated-locales/en.generated.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA+jBpD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"en.generated.d.ts","sourceRoot":"","sources":["../../../src/i18n/generated-locales/en.generated.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAkmBpD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/i18n/generated-locales/en.generated.js

@@ -105,6 +105,7 @@ const runtimeCatalog = {
   '@astryx.chat.status.failed': 'Failed',
   '@astryx.chat.messageAriaLabel': 'Message {status}',
   '@astryx.chat.pastedText.expand': 'Expand',
+  '@astryx.chat.pastedText.label': '{lines, plural, =1 {{chars, plural, other {{chars} chars}}} other {{lines} lines, {chars, plural, other {{chars} chars}}}}',
   '@astryx.checkboxList.item.checkbox': 'Checkbox',
   '@astryx.commandPalette.emptySearch': 'No results',
   '@astryx.commandPalette.emptyBootstrap': 'Type to search',
@@ -329,11 +330,30 @@ const runtimeCatalog = {
   '@astryx.fileInput.errorMaxFiles': 'Maximum {maxFiles} files allowed',
   '@astryx.fileInput.errorMaxSize': '"{fileName}" exceeds {maxSize} limit',
   '@astryx.fileInput.fileSelected': '1 file selected: {fileName}',
+  '@astryx.fileInput.fileSize.bytes': '{size, number, ::group-off} B',
+  '@astryx.fileInput.fileSize.kilobytes': '{size, number, :: .0 group-off} KB',
+  '@astryx.fileInput.fileSize.megabytes': '{size, number, :: .0 group-off} MB',
   '@astryx.fileInput.filesSelected': '{count} files selected',
   '@astryx.fileInput.placeholder': 'Choose file',
   '@astryx.fileInput.placeholderMultiple': 'Choose files',
   '@astryx.fileInput.required': 'Required',
   '@astryx.fileInput.triggerWithFiles': '{label}, {fileNames}',
+  '@astryx.kbd.key.alt': 'Alt',
+  '@astryx.kbd.key.backspace': 'Backspace',
+  '@astryx.kbd.key.command': 'Command',
+  '@astryx.kbd.key.control': 'Control',
+  '@astryx.kbd.key.controlShort': 'Ctrl',
+  '@astryx.kbd.key.down': 'Down arrow',
+  '@astryx.kbd.key.enter': 'Enter',
+  '@astryx.kbd.key.escape': 'Escape',
+  '@astryx.kbd.key.escapeShort': 'Esc',
+  '@astryx.kbd.key.left': 'Left arrow',
+  '@astryx.kbd.key.plus': 'Plus',
+  '@astryx.kbd.key.right': 'Right arrow',
+  '@astryx.kbd.key.shift': 'Shift',
+  '@astryx.kbd.key.tab': 'Tab',
+  '@astryx.kbd.key.up': 'Up arrow',
+  '@astryx.kbd.shortcut': '{shortcut} + {key}',
   '@astryx.keyboardHint.toNavigate': 'to navigate',
   '@astryx.lightbox.mediaViewer': 'Media viewer',
   '@astryx.lightbox.zoom': 'Zoom',
@@ -407,6 +427,19 @@ const runtimeCatalog = {
   '@astryx.typeahead.resultCount': '{count, number} {count, plural, one {result} other {results}}',
   '@astryx.tokenizer.tokenAdded': 'Added {label}',
   '@astryx.tokenizer.tokenRemoved': 'Removed {label}',
+  '@astryx.tokenizer.search': 'Search {label}',
+  '@astryx.tokenizer.searchPlaceholder': 'Search…',
+  '@astryx.tokenizer.noResultsDescription': 'Try a different search.',
+  '@astryx.tokenizer.create': 'Create "{value}"',
+  '@astryx.tokenizer.add': 'Add',
+  '@astryx.tokenizer.addValue': 'Add {value}',
+  '@astryx.tokenizer.done': 'Done',
+  '@astryx.tokenizer.clearAllTitle': 'Clear all selected items?',
+  '@astryx.tokenizer.clearAllDescription': 'This removes all selected items from {label}.',
+  '@astryx.tokenizer.nothingToClear': 'Nothing selected',
+  '@astryx.tokenizer.allRemoved': 'All items removed',
+  '@astryx.tokenizer.selectedCount': '{count, number} selected',
+  '@astryx.tokenizer.clearSelection': 'Clear selection',
   '@astryx.lightbox.imagePosition': 'Image {index, number} of {total, number}',
   '@astryx.lightbox.mediaPosition': '{alt}, {index, number} of {total, number}',
   '@astryx.transferList.selectedLabel': 'Selected',

package/dist/i18n/generated-locales/pseudo.generated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pseudo.generated.d.ts","sourceRoot":"","sources":["../../../src/i18n/generated-locales/pseudo.generated.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAwkBpD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"pseudo.generated.d.ts","sourceRoot":"","sources":["../../../src/i18n/generated-locales/pseudo.generated.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA6mBpD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/i18n/generated-locales/pseudo.generated.js

@@ -105,6 +105,7 @@ const runtimeCatalog = {
   '@astryx.chat.status.failed': '⟦Ƒàíłéð⟧',
   '@astryx.chat.messageAriaLabel': '⟦Ṁéššàĝé {status}⟧',
   '@astryx.chat.pastedText.expand': '⟦Éẋþàñð⟧',
+  '@astryx.chat.pastedText.label': '⟦{lines, plural, =1 {{chars, plural, other {{chars} chars}}} other {{lines} lines, {chars, plural, other {{chars} chars}}}}⟧',
   '@astryx.checkboxList.item.checkbox': '⟦Çĥéçķƀóẋ⟧',
   '@astryx.commandPalette.emptySearch': '⟦Ñó řéšúłţš⟧',
   '@astryx.commandPalette.emptyBootstrap': '⟦Ţýþé ţó šéàřçĥ⟧',
@@ -329,11 +330,30 @@ const runtimeCatalog = {
   '@astryx.fileInput.errorMaxFiles': '⟦Ṁàẋíɱúɱ {maxFiles} ƒíłéš àłłóŵéð⟧',
   '@astryx.fileInput.errorMaxSize': '⟦"{fileName}" éẋçééðš {maxSize} łíɱíţ⟧',
   '@astryx.fileInput.fileSelected': '⟦1 ƒíłé šéłéçţéð: {fileName}⟧',
+  '@astryx.fileInput.fileSize.bytes': '⟦{size, number, ::group-off} Ɓ⟧',
+  '@astryx.fileInput.fileSize.kilobytes': '⟦{size, number, :: .0 group-off} ĶƁ⟧',
+  '@astryx.fileInput.fileSize.megabytes': '⟦{size, number, :: .0 group-off} ṀƁ⟧',
   '@astryx.fileInput.filesSelected': '⟦{count} ƒíłéš šéłéçţéð⟧',
   '@astryx.fileInput.placeholder': '⟦Çĥóóšé ƒíłé⟧',
   '@astryx.fileInput.placeholderMultiple': '⟦Çĥóóšé ƒíłéš⟧',
   '@astryx.fileInput.required': '⟦Řéɋúířéð⟧',
   '@astryx.fileInput.triggerWithFiles': '⟦{label}, {fileNames}⟧',
+  '@astryx.kbd.key.alt': '⟦Àłţ⟧',
+  '@astryx.kbd.key.backspace': '⟦Ɓàçķšþàçé⟧',
+  '@astryx.kbd.key.command': '⟦Çóɱɱàñð⟧',
+  '@astryx.kbd.key.control': '⟦Çóñţřół⟧',
+  '@astryx.kbd.key.controlShort': '⟦Çţřł⟧',
+  '@astryx.kbd.key.down': '⟦Ðóŵñ àřřóŵ⟧',
+  '@astryx.kbd.key.enter': '⟦Éñţéř⟧',
+  '@astryx.kbd.key.escape': '⟦Éšçàþé⟧',
+  '@astryx.kbd.key.escapeShort': '⟦Éšç⟧',
+  '@astryx.kbd.key.left': '⟦Łéƒţ àřřóŵ⟧',
+  '@astryx.kbd.key.plus': '⟦Þłúš⟧',
+  '@astryx.kbd.key.right': '⟦Říĝĥţ àřřóŵ⟧',
+  '@astryx.kbd.key.shift': '⟦Šĥíƒţ⟧',
+  '@astryx.kbd.key.tab': '⟦Ţàƀ⟧',
+  '@astryx.kbd.key.up': '⟦Úþ àřřóŵ⟧',
+  '@astryx.kbd.shortcut': '⟦{shortcut} + {key}⟧',
   '@astryx.keyboardHint.toNavigate': '⟦ţó ñàṽíĝàţé⟧',
   '@astryx.lightbox.mediaViewer': '⟦Ṁéðíà ṽíéŵéř⟧',
   '@astryx.lightbox.zoom': '⟦Žóóɱ⟧',
@@ -407,6 +427,19 @@ const runtimeCatalog = {
   '@astryx.typeahead.resultCount': '⟦{count, number} {count, plural, one {result} other {results}}⟧',
   '@astryx.tokenizer.tokenAdded': '⟦Àððéð {label}⟧',
   '@astryx.tokenizer.tokenRemoved': '⟦Řéɱóṽéð {label}⟧',
+  '@astryx.tokenizer.search': '⟦Šéàřçĥ {label}⟧',
+  '@astryx.tokenizer.searchPlaceholder': '⟦Šéàřçĥ…⟧',
+  '@astryx.tokenizer.noResultsDescription': '⟦Ţřý à ð탃éřéñţ šéàřçĥ.⟧',
+  '@astryx.tokenizer.create': '⟦Çřéàţé "{value}"⟧',
+  '@astryx.tokenizer.add': '⟦Àðð⟧',
+  '@astryx.tokenizer.addValue': '⟦Àðð {value}⟧',
+  '@astryx.tokenizer.done': '⟦Ðóñé⟧',
+  '@astryx.tokenizer.clearAllTitle': '⟦Çłéàř àłł šéłéçţéð íţéɱš?⟧',
+  '@astryx.tokenizer.clearAllDescription': '⟦Ţĥíš řéɱóṽéš àłł šéłéçţéð íţéɱš ƒřóɱ {label}.⟧',
+  '@astryx.tokenizer.nothingToClear': '⟦Ñóţĥíñĝ šéłéçţéð⟧',
+  '@astryx.tokenizer.allRemoved': '⟦Àłł íţéɱš řéɱóṽéð⟧',
+  '@astryx.tokenizer.selectedCount': '⟦{count, number} šéłéçţéð⟧',
+  '@astryx.tokenizer.clearSelection': '⟦Çłéàř šéłéçţíóñ⟧',
   '@astryx.lightbox.imagePosition': '⟦Íɱàĝé {index, number} óƒ {total, number}⟧',
   '@astryx.lightbox.mediaPosition': '⟦{alt}, {index, number} óƒ {total, number}⟧',
   '@astryx.transferList.selectedLabel': '⟦Šéłéçţéð⟧',

package/dist/internal/tokenizer-presentation.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @file tokenizer-presentation.ts
+ * @input Tokenizer's sheet-capable signature
+ * @output `@astryxdesign/core/internal/tokenizer-presentation`: the Tokenizer
+ *   with its `presentation` options reachable, for Astryx's own packages
+ * @position An internal entry reserved for Astryx's own packages:
+ *   undocumented, outside the public API and its compatibility promise
+ *   (spec:AST-017 FR21), versioned in lockstep with Core, and allowed only in
+ *   Core and Lab by the `@astryx/no-core-internal-import` lint rule
+ *   (architecture:react-component-runtime INV13). The sheet presentation is
+ *   implemented but not yet exposed: the public `TokenizerProps` offers no
+ *   `experimental.presentation` while its user experience is being finished
+ *   (`component:Tokenizer` DEC-3, implementation gap), and every public field
+ *   renders the popover presentation. Named re-exports only.
+ *
+ * SYNC: When modified, update tokenizer-presentation.test.ts and
+ * scripts/sync-exports.js.
+ */
+export { TokenizerWithPresentation } from '../Tokenizer/Tokenizer.js';
+export type { TokenizerPresentationOptions, TokenizerWithPresentationProps, } from '../Tokenizer/Tokenizer.js';
+//# sourceMappingURL=tokenizer-presentation.d.ts.map

package/dist/internal/tokenizer-presentation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokenizer-presentation.d.ts","sourceRoot":"","sources":["../../src/internal/tokenizer-presentation.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAC,yBAAyB,EAAC,MAAM,wBAAwB,CAAC;AACjE,YAAY,EACV,4BAA4B,EAC5B,8BAA8B,GAC/B,MAAM,wBAAwB,CAAC"}

package/dist/internal/tokenizer-presentation.js

@@ -0,0 +1,21 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file tokenizer-presentation.ts
+ * @input Tokenizer's sheet-capable signature
+ * @output `@astryxdesign/core/internal/tokenizer-presentation`: the Tokenizer
+ *   with its `presentation` options reachable, for Astryx's own packages
+ * @position An internal entry reserved for Astryx's own packages:
+ *   undocumented, outside the public API and its compatibility promise
+ *   (spec:AST-017 FR21), versioned in lockstep with Core, and allowed only in
+ *   Core and Lab by the `@astryx/no-core-internal-import` lint rule
+ *   (architecture:react-component-runtime INV13). The sheet presentation is
+ *   implemented but not yet exposed: the public `TokenizerProps` offers no
+ *   `experimental.presentation` while its user experience is being finished
+ *   (`component:Tokenizer` DEC-3, implementation gap), and every public field
+ *   renders the popover presentation. Named re-exports only.
+ *
+ * SYNC: When modified, update tokenizer-presentation.test.ts and
+ * scripts/sync-exports.js.
+ */
+export { TokenizerWithPresentation } from "../Tokenizer/Tokenizer.js";

package/dist/internal/touch.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @file touch.ts
+ * @input The gesture core: the arena, the recognizers, and their geometry
+ * @output `@astryxdesign/core/internal/touch`: the gesture core's primitives
+ *   for Lab components, re-exported by name
+ * @position An internal entry reserved for Astryx's own packages:
+ *   undocumented, outside the public API and its compatibility promise
+ *   (spec:AST-017 FR21), versioned in lockstep with Core, and allowed only in
+ *   Core and Lab by the `@astryx/no-core-internal-import` lint rule
+ *   (architecture:react-component-runtime INV13). Core components import the
+ *   same modules by relative path. Named re-exports only, never a gathering
+ *   object: a bundler keeps one copy per page and only what a component uses
+ *   (architecture:component-style-authoring INV6). Importing it attaches no
+ *   listeners: a recognizer listens only once a component starts it under a
+ *   coarse pointer (`spec:AST-094` FR19, FR24).
+ *
+ * SYNC: When modified, update scripts/touch-support-bundle.test.mjs and
+ * touch.test.ts.
+ */
+export { browserClock, GestureArena } from '../gestures/GestureArena.js';
+export { ALL_NATIVE_TOUCH, GestureRecognizer, isActive, isTerminal, isTransitionAllowed, MANIPULATION, } from '../gestures/GestureRecognizer.js';
+export { angleBetween, centroid, distance, travel, unwrapAngle, } from '../gestures/geometry.js';
+export { LongPressGestureRecognizer } from '../gestures/LongPressGestureRecognizer.js';
+export { TapGestureRecognizer } from '../gestures/TapGestureRecognizer.js';
+export { DEFAULT_ENVIRONMENT } from '../gestures/types.js';
+//# sourceMappingURL=touch.d.ts.map

package/dist/internal/touch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"touch.d.ts","sourceRoot":"","sources":["../../src/internal/touch.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAAC,YAAY,EAAE,YAAY,EAAC,MAAM,0BAA0B,CAAC;AACpE,OAAO,EACL,gBAAgB,EAChB,iBAAiB,EACjB,QAAQ,EACR,UAAU,EACV,mBAAmB,EACnB,YAAY,GACb,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,WAAW,GACZ,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAC,0BAA0B,EAAC,MAAM,wCAAwC,CAAC;AAClF,OAAO,EAAC,oBAAoB,EAAC,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAC,mBAAmB,EAAC,MAAM,mBAAmB,CAAC"}

package/dist/internal/touch.js

@@ -0,0 +1,28 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file touch.ts
+ * @input The gesture core: the arena, the recognizers, and their geometry
+ * @output `@astryxdesign/core/internal/touch`: the gesture core's primitives
+ *   for Lab components, re-exported by name
+ * @position An internal entry reserved for Astryx's own packages:
+ *   undocumented, outside the public API and its compatibility promise
+ *   (spec:AST-017 FR21), versioned in lockstep with Core, and allowed only in
+ *   Core and Lab by the `@astryx/no-core-internal-import` lint rule
+ *   (architecture:react-component-runtime INV13). Core components import the
+ *   same modules by relative path. Named re-exports only, never a gathering
+ *   object: a bundler keeps one copy per page and only what a component uses
+ *   (architecture:component-style-authoring INV6). Importing it attaches no
+ *   listeners: a recognizer listens only once a component starts it under a
+ *   coarse pointer (`spec:AST-094` FR19, FR24).
+ *
+ * SYNC: When modified, update scripts/touch-support-bundle.test.mjs and
+ * touch.test.ts.
+ */
+
+export { browserClock, GestureArena } from "../gestures/GestureArena.js";
+export { ALL_NATIVE_TOUCH, GestureRecognizer, isActive, isTerminal, isTransitionAllowed, MANIPULATION } from "../gestures/GestureRecognizer.js";
+export { angleBetween, centroid, distance, travel, unwrapAngle } from "../gestures/geometry.js";
+export { LongPressGestureRecognizer } from "../gestures/LongPressGestureRecognizer.js";
+export { TapGestureRecognizer } from "../gestures/TapGestureRecognizer.js";
+export { DEFAULT_ENVIRONMENT } from "../gestures/types.js";