@astryxdesign/core 0.7.4 → 0.7.5-canary.0418c47

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/useScrollableArea.test.tsx

@@ -113,6 +113,38 @@ 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[];
 
@@ -179,6 +211,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');

package/src/hooks/useScrollableArea.ts

@@ -200,6 +200,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));
@@ -218,8 +219,10 @@ export function useScrollableArea({
     let frame: number | null = null;
     let isActive = true;
 
-    const measure = () => {
-      frame = null;
+    // 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,
@@ -256,20 +259,26 @@ export function useScrollableArea({
       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
+      // 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
+      // The 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
+      // 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;
@@ -278,6 +287,7 @@ export function useScrollableArea({
     };
 
     registerScrollOwner(viewport, stateRef.current);
+    measureRef.current = measureNow;
     measure();
     const stopObservingViewport = observeResize(viewport, scheduleMeasure);
     const stopObservingContent = observeResize(content, scheduleMeasure);
@@ -323,6 +333,7 @@ export function useScrollableArea({
 
     return () => {
       isActive = false;
+      measureRef.current = null;
       unregisterScrollOwner(viewport);
       stopObservingViewport();
       stopObservingContent();
@@ -342,6 +353,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';