@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/src/hooks/useScrollableArea.ts

@@ -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
@@ -35,6 +40,7 @@ import {
   getLogicalAxisMapping,
   measureLogicalOverflowGeometry,
   measureLogicalScrollAxis,
+  measureLogicalScrollPosition,
   type LogicalAxisMapping,
   type LogicalOverflowGeometry,
 } from './scrollGeometry';
@@ -106,6 +112,7 @@ const INITIAL_MAPPING: LogicalAxisMapping = {
   inlineReversed: false,
   blockReversed: false,
 };
+const LOGICAL_AXES = ['inline', 'block'] as const;
 
 const styles = stylex.create({
   overflow: (
@@ -200,6 +207,7 @@ export function useScrollableArea({
     useState<LogicalOverflowGeometry>(INITIAL_OVERFLOW);
   const [mapping, setMapping] = useState<LogicalAxisMapping>(INITIAL_MAPPING);
   const stateRef = useRef<ScrollableAreaState>(INITIAL_STATE);
+  const measureRef = useRef<(() => void) | null>(null);
 
   const viewportRef = useCallback((node: HTMLElement | null) => {
     setViewport(current => (current === node ? current : node));
@@ -217,9 +225,23 @@ export function useScrollableArea({
 
     let frame: number | null = null;
     let isActive = true;
+    // 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 measure = () => {
-      frame = null;
+    const publish = (nextState: ScrollableAreaState) => {
+      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,
@@ -254,22 +276,26 @@ export function useScrollableArea({
         block: blockOverflow,
       };
       const nextState = {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;
@@ -277,12 +303,70 @@ export function useScrollableArea({
       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, {passive: true});
+    viewport.addEventListener('scroll', onScroll, {passive: true});
     window.addEventListener('resize', scheduleMeasure);
     window.visualViewport?.addEventListener('resize', scheduleMeasure);
     content.addEventListener('load', scheduleMeasure, true);
@@ -323,11 +407,12 @@ export function useScrollableArea({
 
     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);
@@ -342,6 +427,29 @@ 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<LogicalOverflowGeometry>(INITIAL_OVERFLOW);
+  const previousMappingRef = useRef<LogicalAxisMapping>(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<ScrollableAreaState>(
     () => ({
       inline: axisIsRequested(axis, 'inline')

package/src/i18n/generated-locales/en.generated.ts

@@ -114,6 +114,8 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
   '@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',
@@ -355,11 +357,30 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
   '@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',
@@ -440,6 +461,20 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
     '{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/src/i18n/generated-locales/pseudo.generated.ts

@@ -118,6 +118,8 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
   '@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': '⟦Ţýþé ţó šéàřçĥ⟧',
@@ -362,11 +364,32 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
   '@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': '⟦Žóóɱ⟧',
@@ -447,6 +470,20 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
     '⟦{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':

package/src/internal/tokenizer-presentation.test.ts

@@ -0,0 +1,29 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+/**
+ * @file tokenizer-presentation.test.ts
+ * @input The internal `internal/tokenizer-presentation` entry and the
+ *   Tokenizer module
+ * @output Proof that the entry re-exports the same component the public
+ *   Tokenizer entry ships, by name, and that the public Tokenizer barrel
+ *   names no presentation
+ * @position Unit tests of packages/core/src/internal/tokenizer-presentation.ts
+ */
+import {describe, expect, it} from 'vitest';
+
+describe('internal/tokenizer-presentation', () => {
+  it('re-exports the one Tokenizer component under the sheet-capable name, the same value the public entry ships', async () => {
+    const entry: Record<string, unknown> =
+      await import('./tokenizer-presentation');
+    const tokenizer = await import('../Tokenizer/Tokenizer');
+    expect(entry.TokenizerWithPresentation).toBe(tokenizer.Tokenizer);
+    // Named re-exports only, nothing else.
+    expect(Object.keys(entry).sort()).toEqual(['TokenizerWithPresentation']);
+  });
+
+  it('the public Tokenizer barrel exports no presentation surface', async () => {
+    const pub: Record<string, unknown> = await import('../Tokenizer');
+    expect(Object.keys(pub).sort()).toEqual(['Tokenizer']);
+    expect(pub).not.toHaveProperty('TokenizerWithPresentation');
+    expect(pub).not.toHaveProperty('TokenizerBottomSheet');
+  });
+});

package/src/internal/tokenizer-presentation.ts

@@ -0,0 +1,25 @@
+// 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';
+export type {
+  TokenizerPresentationOptions,
+  TokenizerWithPresentationProps,
+} from '../Tokenizer/Tokenizer';

package/src/internal/touch.test.ts

@@ -0,0 +1,44 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file touch.test.ts
+ * @input The internal `internal/touch` entry and the gesture core
+ * @output INV13's entry checks: the entry re-exports the gesture core's
+ *   primitives by name, the same values a Core component imports by path, and
+ *   no gathering object; importing it attaches no window or document
+ *   listeners, so a page with only a fine pointer runs none (`spec:AST-094`
+ *   FR19, FR24)
+ * @position Unit tests of packages/core/src/internal/touch.ts
+ *   (architecture:react-component-runtime INV13)
+ */
+
+import {afterEach, describe, expect, it, vi} from 'vitest';
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('internal/touch', () => {
+  it('re-exports the gesture core by name, the same values Core imports by path', async () => {
+    const entry: Record<string, unknown> = await import('./touch');
+    const arena = await import('../gestures/GestureArena');
+    const recognizer = await import('../gestures/GestureRecognizer');
+    expect(entry.GestureArena).toBe(arena.GestureArena);
+    expect(entry.GestureRecognizer).toBe(recognizer.GestureRecognizer);
+    for (const name of ['TapGestureRecognizer', 'LongPressGestureRecognizer']) {
+      expect(typeof entry[name], name).toBe('function');
+    }
+    // Named re-exports only: no gathering object a component would carry
+    // whole (architecture:component-style-authoring INV6).
+    expect(entry).not.toHaveProperty('touchModule');
+  });
+
+  it('attaches no window or document listeners when it loads', async () => {
+    vi.resetModules();
+    const onWindow = vi.spyOn(window, 'addEventListener');
+    const onDocument = vi.spyOn(document, 'addEventListener');
+    await import('./touch');
+    expect(onWindow).not.toHaveBeenCalled();
+    expect(onDocument).not.toHaveBeenCalled();
+  });
+});

package/src/internal/touch.ts

@@ -0,0 +1,41 @@
+// 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';
+export {
+  ALL_NATIVE_TOUCH,
+  GestureRecognizer,
+  isActive,
+  isTerminal,
+  isTransitionAllowed,
+  MANIPULATION,
+} from '../gestures/GestureRecognizer';
+export {
+  angleBetween,
+  centroid,
+  distance,
+  travel,
+  unwrapAngle,
+} from '../gestures/geometry';
+export {LongPressGestureRecognizer} from '../gestures/LongPressGestureRecognizer';
+export {TapGestureRecognizer} from '../gestures/TapGestureRecognizer';
+export {DEFAULT_ENVIRONMENT} from '../gestures/types';

package/src/motion/LayoutChangeSnapshot.tsx

@@ -0,0 +1,50 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file LayoutChangeSnapshot.tsx
+ * @input A value and a callback
+ * @output Exports LayoutChangeSnapshot: calls the callback in the commit that
+ *   changes the value, before React changes the DOM
+ * @position Motion foundation, internal to core; how a component that takes
+ *   an `animatedLayout` handle measures each change before it lands
+ *   (`spec:AST-105` FR1), whatever caused it: a click, an owner-set prop, or
+ *   a group's value
+ *
+ * `getSnapshotBeforeUpdate` runs in the commit, after render and before any
+ * DOM mutation of that commit, so the layout it reads is the old one. Unlike
+ * a read during render, it runs only for a render that commits, once (a
+ * StrictMode replay or a render React throws away never reaches it), and it
+ * keeps render pure (`architecture:react-component-runtime` INV1, INV3).
+ * Only a class component has it.
+ *
+ * SYNC: When modified, update Collapsible.tsx and TreeList.tsx.
+ */
+
+import {Component} from 'react';
+
+interface LayoutChangeSnapshotProps<T> {
+  /** The state whose change moves the layout. */
+  value: T;
+  /** Runs before the DOM changes, with the value being left. */
+  onBeforeChange: (previous: T) => void;
+}
+
+export class LayoutChangeSnapshot<T> extends Component<
+  LayoutChangeSnapshotProps<T>
+> {
+  override getSnapshotBeforeUpdate(
+    previous: Readonly<LayoutChangeSnapshotProps<T>>,
+  ): null {
+    if (!Object.is(previous.value, this.props.value)) {
+      this.props.onBeforeChange(previous.value);
+    }
+    return null;
+  }
+
+  // React asks for this beside getSnapshotBeforeUpdate.
+  override componentDidUpdate(): void {}
+
+  override render(): null {
+    return null;
+  }
+}