@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/dist/Tokenizer/Tokenizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tokenizer.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/Tokenizer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tokenizer.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/Tokenizer.tsx"],"names":[],"mappings":"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"}

package/dist/Tokenizer/Tokenizer.js

@@ -4,23 +4,36 @@
 
 /**
  * @file Tokenizer.tsx
- * @input Uses React, BaseTypeahead, Field, Token, useAnnounce
- * @output Exports Tokenizer multi-select typeahead component
+ * @input Uses React, BaseTypeahead, Field, Token, useAnnounce,
+ *   useAdaptivePresentation, and TokenizerBottomSheet (lazy)
+ * @output Exports Tokenizer multi-select typeahead component, and the
+ *   internal TokenizerWithPresentation signature the `internal/tokenizer-presentation`
+ *   entry re-exports
  * @position Composed component; forwards DOM ref and exposes focus control via
- *   handleRef
+ *   handleRef. The sheet presentation — a trigger that opens
+ *   TokenizerBottomSheet — is implemented but not exposed: `TokenizerProps`
+ *   offers no `experimental.presentation` while its user experience is being
+ *   finished (`component:Tokenizer` DEC-3, implementation gap), and only
+ *   Astryx's own packages reach it through the internal entry
+ *   (`architecture:react-component-runtime` INV13).
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Tokenizer/index.ts
+ * - /packages/core/src/Tokenizer/TokenizerBottomSheet.tsx (sheet presentation)
  * - /apps/storybook/stories/Tokenizer.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Tokenizer/ (showcase blocks)
  */
-import React, { useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { lazy, Suspense, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { BusyIndicatorLaneProvider, createBusyIndicatorLane, useIsBusy } from "../Typeahead/busyIndicatorLane.js";
 import { TrailingKeyDownContext } from "../Typeahead/trailingKeyDown.js";
 import { useFieldInputStyling } from "../Field/fieldParts.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
+import { useAdaptivePresentation } from "../hooks/useAdaptivePresentation.js";
+import { useIsHydrating } from "../hooks/useIsHydrating.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
+import { warnOnce } from "../utils/devWarning.js";
 import { BaseTypeahead } from "../Typeahead/BaseTypeahead.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
@@ -34,7 +47,7 @@ import { useTooltip } from "../Tooltip/index.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, sizeVars, typeScaleVars } from "../theme/tokens.stylex.js";
-import { mergeProps } from "../utils/index.js";
+import { composeEventHandlers, mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
 
@@ -58,6 +71,23 @@ import { useTranslator } from "../i18n/index.js";
 /**
  * Imperative handle for Tokenizer handleRef.
  */
+
+/**
+ * The presentation options the sheet-capable signature admits. Not public:
+ * `TokenizerProps` has no `experimental` while the sheet's user experience is
+ * being finished; Astryx's own packages reach the sheet through
+ * `@astryxdesign/core/internal/tokenizer-presentation`.
+ */
+
+/**
+ * The props of the sheet-capable signature: `TokenizerProps` plus the
+ * presentation options and a `ref` that also accepts the sheet presentation's
+ * trigger button, the control it stands for there. Not public: reached only
+ * as `TokenizerWithPresentation` through the internal entry, so the released
+ * `TokenizerProps` — an interface, so `interface X extends TokenizerProps<T>`,
+ * `Omit<TokenizerProps<T>, …>` and `ComponentProps<typeof Tokenizer>` keep
+ * their released shapes — names no presentation.
+ */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // =============================================================================
 // Styles
@@ -138,6 +168,25 @@ const styles = {
   layerPopover: {
     kzqmXN: "x1xgy17j",
     $$css: true
+  },
+  sheetTrigger: {
+    kzqmXN: "xh8yej3",
+    kMv6JI: "xjb2p0i",
+    kGuDYH: "x1qlqyl8",
+    kMwMTN: "x1heor9g",
+    k9WMMc: "x1yc453h",
+    kysU6D: "xjyslct",
+    kkrTdU: "x1ypdohk x16khyan",
+    $$css: true
+  },
+  sheetTriggerDisabled: {
+    kVAM5u: "xvy26l8 xmnqt3w",
+    kMwMTN: "x1bhcspo",
+    $$css: true
+  },
+  sheetTokenDisabled: {
+    kMwMTN: "x1tgivj0 x1bhcspo",
+    $$css: true
   }
 };
 const sizeStyles = {
@@ -208,6 +257,41 @@ const layerPlaceholderSizeStyles = {
 // "Create: X" suggestions from real search results.
 const CREATABLE_ID_PREFIX = '__xds_create__';
 
+// The touch sheet (BottomSheet, its gestures, the confirmation dialog, and
+// the empty state) only renders for the bottom-sheet presentation. Loading it
+// on demand keeps it out of pages whose tokenizers stay inline combobox fields
+// (`component:Tokenizer` PR6).
+// One import promise, shared by the preload and the lazy element: the sheet
+// presentation loads its chunk as soon as it is active, so the first press
+// does not wait for the network, while nothing of the sheet is rendered until
+// a press (`architecture:component-style-authoring` INV7).
+const loadTokenizerBottomSheet = async () => import("./TokenizerBottomSheet.js");
+const LazyTokenizerBottomSheet = /*#__PURE__*/lazy(async () => loadTokenizerBottomSheet().then(module => ({
+  default: module.TokenizerBottomSheet
+})));
+
+/**
+ * Hosts the lazily loaded sheet. Renders nothing on the server or in the
+ * render that hydrates server HTML: a lazy component that has not loaded yet
+ * would leave server markup incomplete and abort hydration. The closed sheet
+ * has no visible markup, so it first renders right after hydration.
+ */
+function TokenizerSheetHost(props) {
+  const isHydrating = useIsHydrating();
+  if (isHydrating) {
+    return null;
+  }
+  // `lazy` erases the component's type parameter; the module exports the
+  // generic component this props type belongs to.
+  const Sheet = LazyTokenizerBottomSheet;
+  return /*#__PURE__*/_jsx(Suspense, {
+    fallback: null,
+    children: /*#__PURE__*/_jsx(Sheet, {
+      ...props
+    })
+  });
+}
+
 /**
  * Multi-select input with token chips and typeahead search.
  *
@@ -298,6 +382,12 @@ function EndLane({
     }, isBusy ? 'busy' : 'idle'), children]
   });
 }
+
+// The public signature names no presentation: `ComponentProps<typeof
+// Tokenizer>` and every public call resolve against `TokenizerProps`. The
+// implementation also reads the presentation options, reached only through
+// `TokenizerWithPresentation` below.
+
 export function Tokenizer({
   label,
   isLabelHidden = false,
@@ -343,6 +433,7 @@ export function Tokenizer({
   ref,
   handleRef,
   onKeyDown,
+  experimental,
   id: idProp,
   'aria-describedby': ariaDescribedByProp,
   ...restProps
@@ -355,6 +446,12 @@ export function Tokenizer({
     containerClassName,
     containerStyle
   });
+  // A caller's onClick arrives through the base props; the sheet trigger
+  // composes it with its own open handler rather than letting either win.
+  const {
+    onClick: callerOnClick,
+    ...restWithoutClick
+  } = rest;
   const t = useTranslator();
   const size = useSize(sizeProp, 'md');
   const generatedInputId = useId();
@@ -364,10 +461,128 @@ export function Tokenizer({
   const inputRef = useRef(null);
   const wrapperRef = useRef(null);
 
-  // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
-  // tooltip listeners attach to the input wrapper and the typeahead input stays
-  // perceivable via aria-disabled instead of the disabled attribute. Input is
-  // blocked by the isDisabled guards in BaseTypeahead and handleWrapperClick.
+  // Experimental presentation (`component:Tokenizer` DEC-3). `adaptive`
+  // resolves through the policy the selection controls share; an open sheet
+  // keeps its presentation until it closes, so a resolution change mid-task
+  // cannot pull the surface out from under the person.
+  const presentation = experimental?.presentation ?? 'popover';
+  const resolvedPresentation = useAdaptivePresentation(presentation);
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  // Latched for the sheet's lifetime: a sheet stays presented after it closes
+  // until BottomSheet has run its exit and handed focus back to the trigger.
+  // Without the latch, `adaptive` resolving to `popover` mid-session (a phone
+  // turned to landscape) would unmount the sheet and the trigger it returns
+  // focus to in the same render, dropping focus to the page body
+  // (`component:Tokenizer` FR16).
+  const [isSheetPresented, setIsSheetPresented] = useState(false);
+  const isSheetPresentation = isSheetOpen || isSheetPresented || resolvedPresentation === 'bottom-sheet';
+  // Preload the sheet's chunk while the sheet presentation is active, so the
+  // first press opens without waiting for the network; nothing renders.
+  useEffect(() => {
+    if (isSheetPresentation) {
+      void loadTokenizerBottomSheet();
+    }
+  }, [isSheetPresentation]);
+  const triggerRef = useRef(null);
+  // The sheet's query between presentations: the sheet is in the DOM only
+  // from a press until its exit completes, and a close the field forces
+  // keeps the query (FR18). The ref follows every report; the press
+  // snapshots it into the state the next presentation starts from.
+  const sheetQueryRef = useRef('');
+  const [sheetInitialQuery, setSheetInitialQuery] = useState('');
+  const handleSheetQueryChange = useCallback(query => {
+    sheetQueryRef.current = query;
+    onChangeQuery?.(query);
+  }, [onChangeQuery]);
+  // Whether the field's control — the inline input or the trigger — holds
+  // focus. Kept in a ref by the focus and blur handlers of both, because a
+  // control unmounted while focused fires no blur: when a presentation swap
+  // removes the focused control (the latch releasing into the popover, or
+  // `adaptive` changing while the sheet is closed), the new presentation's
+  // control takes the focus over once it has mounted, so focus never lands on
+  // the page body (`component:Tokenizer` FR16, `spec:AST-085` FR4).
+  const isControlFocusedRef = useRef(false);
+  // Set around a focus move the field makes itself — a presentation swap
+  // handing focus from one control to the other — so the receiving control
+  // does not report it as focus entering from outside.
+  const isHandingOffFocusRef = useRef(false);
+  // Whether the caller has been told focus entered the field in this visit,
+  // so `onBlur` is never reported without its `onFocus`: in Safari a click
+  // or tap does not focus a button, so a pointer-opened sheet reports no
+  // entry, and the one focus the trigger then gets — BottomSheet's return
+  // focus — is the entry to report.
+  const hasReportedFocusRef = useRef(false);
+  // A control can hold focus without the field having seen a focus event:
+  // the inline input server-rendered with `autofocus` (`hasAutoFocus`) is
+  // focused before hydration, and the swap to the trigger in the first
+  // render after it removes that input. React detaches the old control
+  // before any effect of the swapping commit runs, so the live focus is
+  // read during that render, while the control is still in the document —
+  // a read of `document.activeElement` only, with no update made in render.
+  const previousPresentationRef = useRef(isSheetPresentation);
+  if (previousPresentationRef.current !== isSheetPresentation) {
+    previousPresentationRef.current = isSheetPresentation;
+    if (typeof document !== 'undefined') {
+      const active = document.activeElement;
+      if (active != null && (active === inputRef.current || active === triggerRef.current)) {
+        isControlFocusedRef.current = true;
+      }
+    }
+  }
+  useEffect(() => {
+    if (!isControlFocusedRef.current) {
+      return;
+    }
+    const active = document.activeElement;
+    if (active != null && active !== document.body) {
+      return;
+    }
+    isHandingOffFocusRef.current = true;
+    (isSheetPresentation ? triggerRef.current : inputRef.current)?.focus();
+    isHandingOffFocusRef.current = false;
+  }, [isSheetPresentation]);
+  // The trigger's accessible description names the selected tokens: the
+  // button's children are tokens whose own content assistive technology
+  // leaves out of a button's name (`spec:AST-020` FR1).
+  const triggerTokensId = useId();
+  // Each rendered token's id, for the trigger's description; the item id is
+  // an arbitrary string, so it is encoded rather than used as is.
+  const tokenElementId = itemId => `${triggerTokensId}-${encodeURIComponent(itemId)}`;
+  // Props that describe the inline combobox have no surface in the sheet
+  // presentation. Say so once in development rather than dropping them
+  // silently (`architecture:public-component-api` INV3).
+  const inertSheetProps = isSheetPresentation ? [['renderItem', renderItem], ['renderToken', renderToken], ['endContent', endContent], ['hasClear', hasClear || undefined], ['hasEntriesOnFocus', hasEntriesOnFocus || undefined], ['menuWidth', menuWidth], ['tokenOverflowBehavior', tokenOverflowBehavior], ['hasAutoFocus', hasAutoFocus || undefined]].filter(([, v]) => v !== undefined && v !== 'none').map(([name]) => name) : [];
+  const inertSheetPropsKey = inertSheetProps.join(',');
+  useEffect(() => {
+    if (inertSheetPropsKey === '') {
+      return;
+    }
+    warnOnce(`tokenizer:sheet-inert:${inertSheetPropsKey}`, 'Tokenizer', `\`${inertSheetProps.join('`, `')}\` ${inertSheetProps.length === 1 ? 'has' : 'have'} no surface in the bottom-sheet presentation and ${inertSheetProps.length === 1 ? 'is' : 'are'} not rendered there.`);
+    // eslint-disable-next-line @eslint-react/exhaustive-deps -- keyed by the joined names
+  }, [inertSheetPropsKey]);
+  // A field that becomes disabled cannot keep its sheet open, and must not
+  // reopen it when re-enabled (`component:Tokenizer` FR17). Adjusted in the
+  // render that sees the change, not an effect, so no frame shows both.
+  const [wasDisabled, setWasDisabled] = useState(isDisabled);
+  // A sheet that was open when the field became disabled stays mounted,
+  // closed, so it runs its exit and hands focus back to the trigger; a field
+  // that is disabled from the start mounts no sheet.
+  const [keepsSheetWhileDisabled, setKeepsSheetWhileDisabled] = useState(false);
+  if (isDisabled !== wasDisabled) {
+    setWasDisabled(isDisabled);
+    if (isDisabled && isSheetOpen) {
+      setIsSheetOpen(false);
+      setKeepsSheetWhileDisabled(true);
+    }
+    if (!isDisabled) {
+      setKeepsSheetWhileDisabled(false);
+    }
+  }
+
+  // Disabled-reason tooltip. The tooltip listeners attach to the input wrapper
+  // and the typeahead input stays perceivable via aria-disabled instead of the
+  // disabled attribute. Input is blocked by the isDisabled guards in
+  // BaseTypeahead and handleWrapperClick.
   const showsDisabledMessage = isDisabled && !!disabledMessage;
   const disabledMessageTooltip = useTooltip({
     placement: 'above',
@@ -376,12 +591,16 @@ export function Tokenizer({
     focusTrigger: 'always',
     isEnabled: showsDisabledMessage
   });
+
+  // The sheet presentation has no input; the public ref reaches the trigger,
+  // the control it stands for (`family:input-fields` FR10).
+  const triggerMergedRef = useMergedRefs(triggerRef, ref, disabledMessageTooltip.ref);
   useImperativeHandle(handleRef, () => ({
     focus() {
-      inputRef.current?.focus();
+      (isSheetPresentation ? triggerRef : inputRef).current?.focus();
     },
     blur() {
-      inputRef.current?.blur();
+      (isSheetPresentation ? triggerRef : inputRef).current?.blur();
     }
   }));
 
@@ -447,7 +666,11 @@ export function Tokenizer({
       layer.show();
     }
     if (comingFromOutside) {
-      onFocus?.(e);
+      isControlFocusedRef.current = true;
+      if (!isHandingOffFocusRef.current) {
+        hasReportedFocusRef.current = true;
+        onFocus?.(e);
+      }
       // Redirect to the input so the user doesn't have to tab through
       // every token remove button.
       if (e.target !== inputRef.current) {
@@ -457,6 +680,8 @@ export function Tokenizer({
   }, [isLayerMode, layer, isFocusInTokenizer, onFocus]);
   const handleBlurCapture = useCallback(e => {
     if (!isFocusInTokenizer(e.relatedTarget)) {
+      isControlFocusedRef.current = false;
+      hasReportedFocusRef.current = false;
       setIsFocusedWithin(false);
       onBlur?.(e);
       if (isLayerMode) {
@@ -518,19 +743,21 @@ export function Tokenizer({
     bootstrap: async () => []
   }), []);
 
-  // Announce token add/remove politely via the persistent live region.
-  // Tokens previously appeared and disappeared silently — Backspace on an
-  // empty input removes the trailing token, and the per-token remove buttons
-  // gave no audible feedback either.
+  // Announce token add/remove politely via a persistent live region.
+  // Announce token add/remove politely. `useAnnounce` follows where this
+  // call is made (`spec:AST-086` FR14): the inline field's words go to the
+  // shared channel, or into the modal that encloses the field. The sheet's
+  // own changes are announced from inside the sheet, where FR14 routes them
+  // into the sheet's dialog; the handlers below stay silent for those.
   const announce = useAnnounce();
 
   // Handle adding an item — detect creatable synthetic items
-  const handleAdd = useCallback(item => {
-    if (!item) {
-      return;
+  const handleAdd = useCallback((item, options) => {
+    if (isDisabled || !item) {
+      return false;
     }
     if (isAtMax) {
-      return;
+      return false;
     }
 
     // Detect "Create: X" synthetic items from the creatable source
@@ -540,7 +767,7 @@ export function Tokenizer({
       // label, so a selection carrying an opaque id with that label is also a
       // duplicate, not just one whose id happens to equal the text.
       if (selectedIds.has(createdValue) || selectedLabels.has(createdValue.toLowerCase())) {
-        return;
+        return false;
       }
       const base = {
         id: createdValue,
@@ -552,42 +779,53 @@ export function Tokenizer({
         item: realItem,
         type: 'create'
       });
-      announce(t('@astryx.tokenizer.tokenAdded', {
-        label: createdValue
-      }));
-      return;
+      if (!options?.silent) {
+        announce(t('@astryx.tokenizer.tokenAdded', {
+          label: createdValue
+        }));
+      }
+      return true;
     }
     if (selectedIds.has(item.id)) {
-      return;
+      return false;
     }
     const newItems = [...value, item];
     onChange(newItems, {
       item,
       type: 'add'
     });
-    announce(t('@astryx.tokenizer.tokenAdded', {
-      label: item.label
-    }));
-  }, [value, onChange, isAtMax, selectedIds, selectedLabels, hasCreate, announce, t]);
+    if (!options?.silent) {
+      announce(t('@astryx.tokenizer.tokenAdded', {
+        label: item.label
+      }));
+    }
+    return true;
+  }, [value, onChange, isDisabled, isAtMax, selectedIds, selectedLabels, hasCreate, announce, t]);
 
   // Handle removing an item. Single removal path: both Backspace on an empty
   // input and the per-token remove buttons route through here, so the
   // announcement covers both.
-  const handleRemove = useCallback(item => {
+  const handleRemove = useCallback((item, options) => {
+    if (isDisabled) {
+      return false;
+    }
     const newItems = value.filter(v => v.id !== item.id);
     onChange(newItems, {
       item,
       type: 'remove'
     });
-    announce(t('@astryx.tokenizer.tokenRemoved', {
-      label: item.label
-    }));
+    if (!options?.silent) {
+      announce(t('@astryx.tokenizer.tokenRemoved', {
+        label: item.label
+      }));
+    }
     inputRef.current?.focus();
-  }, [value, onChange, announce, t]);
+    return true;
+  }, [value, onChange, isDisabled, announce, t]);
 
   // Handle clearing all items
   const handleClearAll = useCallback(() => {
-    if (value.length === 0) {
+    if (isDisabled || value.length === 0) {
       return;
     }
     // Report the last item as removed (convention)
@@ -597,7 +835,7 @@ export function Tokenizer({
       type: 'remove'
     });
     inputRef.current?.focus();
-  }, [value, onChange]);
+  }, [value, onChange, isDisabled]);
 
   // Handle backspace on empty input — remove last token
   const handleKeyDown = useCallback(e => {
@@ -708,7 +946,10 @@ export function Tokenizer({
         value: onKeyDown,
         children: /*#__PURE__*/_jsx(BaseTypeahead, {
           ...rest,
-          ref: useMergedRefs(inputRef, ref),
+          ref: useMergedRefs(inputRef,
+          // With `experimental`, the ref type admits the trigger too; in
+          // this presentation it receives the input.
+          ref),
           searchSource: isAtMax ? emptySource : filteredSource,
           value: null,
           onChange: handleAdd,
@@ -740,14 +981,10 @@ export function Tokenizer({
           !(isAtMax || isTruncated || value.length > 0) && laneReserve]
         })
       })
-    }), htmlName != null && value.map(item => /*#__PURE__*/_jsx("input", {
+    }), htmlName != null && !isDisabled && value.map(item => /*#__PURE__*/_jsx("input", {
       type: "hidden",
       name: htmlName,
       value: item.id
-      // Disabled native controls are excluded from form submission;
-      // mirror that for the hidden carriers.
-      ,
-      disabled: isDisabled
     }, item.id)), /*#__PURE__*/_jsxs(EndLane, {
       lane: busyLane,
       laneRef: laneRef,
@@ -770,7 +1007,143 @@ export function Tokenizer({
     })]
   });
   let tokenizerContent;
-  if (isLayerMode) {
+  if (isSheetPresentation) {
+    tokenizerContent = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs("button", {
+        ...restWithoutClick,
+        ref: triggerMergedRef,
+        type: "button",
+        id: inputId,
+        "aria-haspopup": "dialog",
+        "aria-expanded": isSheetOpen,
+        "aria-disabled": isDisabled || undefined
+        // The description is what the inline input's is, in its order —
+        // the caller's ids, the field description, the status message, the
+        // disabled reason (`spec:AST-085` FR5: a disabled control exposes
+        // its description and reason on itself) — then the hidden count and
+        // the rendered tokens themselves, each by id: the
+        // accessible-description algorithm reads the referenced elements in
+        // order and separates them, so every label renders once
+        // (`architecture:component-style-authoring` INV7) and no locale's
+        // list punctuation is written here (AR6).
+        ,
+        "aria-describedby": [ariaDescribedByProp, ariaDescribedBy, value.length > 0 ? triggerTokensId : null, ...value.map(item => tokenElementId(item.id))].filter(Boolean).join(' ') || undefined
+        // The open runs first and the caller's onClick after it, as the
+        // inline input composes its click: a caller observes the click but
+        // cannot cancel the field's own handling
+        // (`family:input-fields` FR10).
+        ,
+        onClick: composeEventHandlers(() => {
+          if (isDisabled) {
+            return;
+          }
+          setIsSheetPresented(true);
+          setSheetInitialQuery(sheetQueryRef.current);
+          setIsSheetOpen(true);
+        },
+        // Typed for the input by the base props; here the control is the
+        // trigger button, and the handler only reads the event.
+        callerOnClick),
+        onFocus: event => {
+          isControlFocusedRef.current = true;
+          // BottomSheet focuses the trigger only after its exit completes;
+          // that focus is the signal that the retained sheet can leave. If
+          // the resolution moved to the popover meanwhile, the inline input
+          // takes the focus over once it mounts. The field's own sheet is
+          // part of the field: focus coming back from it, or handed over by
+          // a presentation swap, is not focus entering from outside, so the
+          // caller's onFocus — "when focus enters the tokenizer from
+          // outside" — stays quiet for it (`family:input-fields` FR10).
+          const isReturningFromSheet = !isSheetOpen && isSheetPresented;
+          if (isReturningFromSheet) {
+            setIsSheetPresented(false);
+          }
+          const isInsideTheField = isReturningFromSheet && hasReportedFocusRef.current || isHandingOffFocusRef.current;
+          if (!isInsideTheField) {
+            hasReportedFocusRef.current = true;
+            onFocus?.(event);
+          }
+        },
+        onBlur: event => {
+          // Focus moving into the sheet is still the field's: the flag
+          // stays, and the caller's onBlur — "when focus leaves the
+          // tokenizer entirely" — stays quiet. Only a blur to somewhere
+          // else reports.
+          if (isSheetOpen) {
+            return;
+          }
+          isControlFocusedRef.current = false;
+          hasReportedFocusRef.current = false;
+          onBlur?.(event);
+        },
+        onKeyDown: onKeyDown,
+        ...mergeProps(themeProps('tokenizer', {
+          size,
+          status: status?.type,
+          disabled: isDisabled ? 'disabled' : null
+        }), stylex.props(inputWrapperStyles.base, styles.wrapper, styles.sheetTrigger,
+        // The trigger keeps the inline field's height for its size step,
+        // as Selector's bottom-sheet trigger does; the sheet's own rows
+        // and search field carry the touch-sized targets.
+        sizeStyles[size], value.length > 0 && styles.wrapperWithTokens, isDisabled && inputWrapperStyles.disabled, isDisabled && styles.sheetTriggerDisabled, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], controlXstyle), controlClassName, controlStyle),
+        children: [startIcon && /*#__PURE__*/_jsx("span", {
+          ...{
+            0: {},
+            1: {
+              className: "x1xrm450 x1n2onr6 x1vjfegm"
+            }
+          }[!!(value.length > 0) << 0],
+          children: renderIconSlot(startIcon, {
+            size: 'sm',
+            color: 'secondary'
+          })
+        }), value.length > 0 ? value.map(item => /*#__PURE__*/_jsx(Token, {
+          id: tokenElementId(item.id),
+          label: item.label,
+          size: size,
+          isDisabled: isDisabled,
+          xstyle: isDisabled ? styles.sheetTokenDisabled : undefined
+        }, item.id)) : /*#__PURE__*/_jsx("span", {
+          ...{
+            0: {
+              className: "xv1l7n4 x7a5moj"
+            },
+            1: {
+              className: "x7a5moj xv1l7n4 x1bhcspo"
+            }
+          }[!!isDisabled << 0],
+          children: placeholder ?? ''
+        })]
+      }), value.length > 0 && /*#__PURE__*/_jsx(VisuallyHidden, {
+        id: triggerTokensId,
+        children: t('@astryx.tokenizer.selectedCount', {
+          count: value.length
+        })
+      }), htmlName != null && !isDisabled && value.map(item => /*#__PURE__*/_jsx("input", {
+        type: "hidden",
+        name: htmlName,
+        value: item.id
+      }, item.id)), (isSheetOpen || isSheetPresented) && (!isDisabled || keepsSheetWhileDisabled) && /*#__PURE__*/_jsx(TokenizerSheetHost, {
+        isOpen: isSheetOpen,
+        onOpenChange: setIsSheetOpen,
+        finalFocusRef: triggerRef,
+        initialQuery: sheetInitialQuery,
+        label: label,
+        searchSource: searchSource,
+        value: value,
+        isAtMax: isAtMax,
+        hasCreate: hasCreate,
+        maxMenuItems: maxMenuItems ?? 10,
+        minQueryLength: minQueryLength ?? 1,
+        debounceMs: debounceMs ?? 150,
+        emptySearchText: emptySearchText,
+        onAdd: handleAdd,
+        onRemove: handleRemove,
+        onClearAll: handleClearAll,
+        onChangeQuery: handleSheetQueryChange
+      })]
+    });
+  } else if (isLayerMode) {
     const placeholderSizeStyle = layerPlaceholderSizeStyles[size];
     tokenizerContent = /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("div", {
@@ -832,4 +1205,16 @@ export function Tokenizer({
     children: [tokenizerContent, showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
 }
-Tokenizer.displayName = 'Tokenizer';
+Tokenizer.displayName = 'Tokenizer';
+
+/**
+ * The same component with the sheet presentation reachable: `experimental`
+ * (`presentation: 'popover' | 'bottom-sheet' | 'adaptive'`) and a `ref` that
+ * also takes the trigger button. Not public — re-exported only by
+ * `@astryxdesign/core/internal/tokenizer-presentation`, the entry reserved
+ * for Astryx's own packages (`architecture:react-component-runtime` INV13),
+ * while the sheet's user experience is being finished (`component:Tokenizer`
+ * DEC-3). The public `Tokenizer` renders the popover presentation for every
+ * field.
+ */
+export const TokenizerWithPresentation = Tokenizer;