@astryxdesign/lab 0.6.2-canary.fc74d7e → 0.6.3-canary.039a67e

package/dist/MobileTokenizer/MobileTokenizer.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @file MobileTokenizer.tsx
+ * @input Uses public @astryxdesign/core components only (BottomSheet,
+ *   BottomSheetSwitcher, Button, Field, Heading, Icon, IconButton, Text,
+ *   TextInput, Token)
+ * @output Exports MobileTokenizer — Lab prototype of the touch Tokenizer
+ *   flow (stacked manage + add sheets)
+ * @position Lab (canary) stack layer 1: validates the design before the
+ *   Core promotion (Tokenizer presentation="bottom-sheet") stacked after it.
+ *
+ * API mirrors Core Tokenizer (label/searchSource/value/onChange/change,
+ * hasCreate, maxEntries) so graduation is an import swap. Differences from
+ * Core are the Lab deltas: the filter is a bordered TextInput (Core's
+ * PanelSearchInput is not exported), strings are literals (no i18n keys),
+ * and there is no theming/spec contract yet.
+ */
+import { type ReactNode } from 'react';
+import type { BaseProps } from '@astryxdesign/core';
+import type { SearchableItem, SearchSource } from '@astryxdesign/core/Typeahead';
+export type MobileTokenizerChange<T extends SearchableItem> = {
+    item: T;
+    type: 'add';
+} | {
+    item: T;
+    type: 'create';
+} | {
+    item: T;
+    type: 'remove';
+} | {
+    type: 'reorder';
+};
+export interface MobileTokenizerProps<T extends SearchableItem> extends Omit<BaseProps<HTMLDivElement>, 'onChange'> {
+    label: string;
+    searchSource: SearchSource<T>;
+    value: T[];
+    onChange: (items: T[], change: MobileTokenizerChange<T>) => void;
+    renderItem?: (item: T) => ReactNode;
+    placeholder?: string;
+    description?: string;
+    isOptional?: boolean;
+    isDisabled?: boolean;
+    hasCreate?: boolean;
+    maxEntries?: number;
+    maxMenuItems?: number;
+    minQueryLength?: number;
+    debounceMs?: number;
+    emptySearchResultsText?: string;
+    onChangeQuery?: (query: string) => void;
+}
+export declare function MobileTokenizer<T extends SearchableItem>({ label, searchSource, value, onChange, renderItem, placeholder, description, isOptional, isDisabled, hasCreate, maxEntries, maxMenuItems, minQueryLength, debounceMs, emptySearchResultsText, onChangeQuery, xstyle, }: MobileTokenizerProps<T>): import("react").JSX.Element;
+export declare namespace MobileTokenizer {
+    var displayName: string;
+}
+//# sourceMappingURL=MobileTokenizer.d.ts.map

package/dist/MobileTokenizer/MobileTokenizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileTokenizer.d.ts","sourceRoot":"","sources":["../../src/MobileTokenizer/MobileTokenizer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAWlD,OAAO,KAAK,EACV,cAAc,EACd,YAAY,EACb,MAAM,8BAA8B,CAAC;AAOtC,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,cAAc,IACtD;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,IAAI,EAAE,KAAK,CAAA;CAAC,GACtB;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GACzB;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GACzB;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CAC1E,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC9B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACjE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AA+GD,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,EAAE,EACxD,KAAK,EACL,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,UAAU,EACV,WAAW,EACX,WAAW,EACX,UAAU,EACV,UAAkB,EAClB,SAAiB,EACjB,UAAU,EACV,YAAiB,EACjB,cAAkB,EAClB,UAAgB,EAChB,sBAA2C,EAC3C,aAAa,EACb,MAAM,GACP,EAAE,oBAAoB,CAAC,CAAC,CAAC,+BAyQzB;yBA3Re,eAAe"}

package/dist/MobileTokenizer/MobileTokenizer.js

@@ -0,0 +1,386 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file MobileTokenizer.tsx
+ * @input Uses public @astryxdesign/core components only (BottomSheet,
+ *   BottomSheetSwitcher, Button, Field, Heading, Icon, IconButton, Text,
+ *   TextInput, Token)
+ * @output Exports MobileTokenizer — Lab prototype of the touch Tokenizer
+ *   flow (stacked manage + add sheets)
+ * @position Lab (canary) stack layer 1: validates the design before the
+ *   Core promotion (Tokenizer presentation="bottom-sheet") stacked after it.
+ *
+ * API mirrors Core Tokenizer (label/searchSource/value/onChange/change,
+ * hasCreate, maxEntries) so graduation is an import swap. Differences from
+ * Core are the Lab deltas: the filter is a bordered TextInput (Core's
+ * PanelSearchInput is not exported), strings are literals (no i18n keys),
+ * and there is no theming/spec contract yet.
+ */
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { BottomSheet } from '@astryxdesign/core/BottomSheet';
+import { BottomSheetSwitcher } from '@astryxdesign/core/BottomSheet';
+import { Button } from '@astryxdesign/core/Button';
+import { Divider } from '@astryxdesign/core/Divider';
+import { Field } from '@astryxdesign/core/Field';
+import { Icon } from '@astryxdesign/core/Icon';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { Text } from '@astryxdesign/core/Text';
+import { TextInput } from '@astryxdesign/core/TextInput';
+import { Token } from '@astryxdesign/core/Token';
+import '@astryxdesign/core/theme/tokens.stylex';
+import { colorVars, radiusVars, spacingVars } from '@astryxdesign/core/theme/tokens.stylex';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CREATABLE_ID_PREFIX = '__xds_create__';
+const styles = {
+  filterInput: {
+    kzQI83: "x1iyjqo2",
+    kmuXW: "xs83m0k",
+    kCS8Yb: "x1r8uery",
+    k7Eaqz: "xeuugli",
+    $$css: true
+  },
+  empty: {
+    k8WAf4: "x1na6nto",
+    $$css: true
+  }
+};
+export function MobileTokenizer({
+  label,
+  searchSource,
+  value,
+  onChange,
+  renderItem,
+  placeholder,
+  description,
+  isOptional,
+  isDisabled = false,
+  hasCreate = false,
+  maxEntries,
+  maxMenuItems = 10,
+  minQueryLength = 1,
+  debounceMs = 150,
+  emptySearchResultsText = 'No results found',
+  onChangeQuery,
+  xstyle
+}) {
+  const triggerId = useId();
+  const [activeSheet, setActiveSheet] = useState(null);
+  const selectedIds = useMemo(() => new Set(value.map(v => v.id)), [value]);
+  const isAtMax = maxEntries != null && value.length >= maxEntries;
+  const handleAdd = item => {
+    if (isAtMax || selectedIds.has(item.id)) {
+      return;
+    }
+    if (hasCreate && typeof item.id === 'string' && item.id.startsWith(CREATABLE_ID_PREFIX)) {
+      const created = item.id.slice(CREATABLE_ID_PREFIX.length);
+      if (selectedIds.has(created)) {
+        return;
+      }
+      const real = {
+        id: created,
+        label: created
+      };
+      onChange([...value, real], {
+        item: real,
+        type: 'create'
+      });
+      return;
+    }
+    onChange([...value, item], {
+      item,
+      type: 'add'
+    });
+  };
+  const handleRemove = item => onChange(value.filter(v => v.id !== item.id), {
+    item,
+    type: 'remove'
+  });
+  const handleClearAll = () => {
+    if (value.length > 0) {
+      onChange([], {
+        item: value[value.length - 1],
+        type: 'remove'
+      });
+    }
+  };
+
+  // ---- add-sheet search ----
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const seqRef = useRef(0);
+  const isAddOpen = activeSheet === 'add';
+  useEffect(() => {
+    if (!isAddOpen) {
+      return;
+    }
+    const seq = ++seqRef.current;
+    const run = async () => {
+      setIsSearching(true);
+      try {
+        const trimmed = query.trim();
+        let items;
+        if (trimmed === '') {
+          items = searchSource.bootstrap ? await searchSource.bootstrap() : await searchSource.search('');
+        } else if (trimmed.length < minQueryLength) {
+          items = [];
+        } else {
+          items = await searchSource.search(query);
+        }
+        if (seqRef.current === seq) {
+          setResults(items.slice(0, maxMenuItems));
+        }
+      } finally {
+        if (seqRef.current === seq) {
+          setIsSearching(false);
+        }
+      }
+    };
+    if (debounceMs > 0) {
+      const timer = setTimeout(() => {
+        void run();
+      }, debounceMs);
+      return () => clearTimeout(timer);
+    }
+    void run();
+  }, [isAddOpen, query, searchSource, minQueryLength, maxMenuItems, debounceMs]);
+  const createItem = useMemo(() => {
+    const trimmed = query.trim();
+    if (!hasCreate || trimmed === '' || isAtMax) {
+      return null;
+    }
+    if (selectedIds.has(trimmed) || results.some(r => r.label.toLowerCase() === trimmed.toLowerCase())) {
+      return null;
+    }
+    return {
+      id: `${CREATABLE_ID_PREFIX}${trimmed}`,
+      label: `Create "${trimmed}"`
+    };
+  }, [hasCreate, query, results, selectedIds, isAtMax]);
+  return /*#__PURE__*/_jsxs(Field, {
+    label: label,
+    description: description,
+    isOptional: isOptional,
+    isDisabled: isDisabled,
+    inputID: triggerId,
+    xstyle: xstyle,
+    children: [/*#__PURE__*/_jsxs("button", {
+      type: "button",
+      id: triggerId,
+      "aria-haspopup": "dialog",
+      "aria-expanded": activeSheet != null,
+      "aria-label": label,
+      disabled: isDisabled,
+      onClick: () => setActiveSheet('manage'),
+      ...{
+        className: "x78zum5 x1a02dak x6s0dn4 xzye2dw xh8yej3 x1gg8mnh xu0wf1k xf314gf xmkeg23 x1y0btm7 x14i3s5s xh6dtrn xjbqb8w x1yc453h x1ypdohk x16khyan"
+      },
+      children: [value.length > 0 ? value.map(item => /*#__PURE__*/_jsx(Token, {
+        label: item.label,
+        isDisabled: isDisabled
+      }, item.id)) : /*#__PURE__*/_jsx("span", {
+        ...{
+          className: "xv1l7n4"
+        },
+        children: placeholder ?? ''
+      }), /*#__PURE__*/_jsx("span", {
+        ...{
+          className: "xvc5jky x78zum5 x2lah0s"
+        },
+        "aria-hidden": "true",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "chevronDown",
+          size: "sm",
+          color: "secondary"
+        })
+      })]
+    }), !isDisabled && /*#__PURE__*/_jsxs(BottomSheetSwitcher, {
+      activeSheet: activeSheet,
+      onActiveSheetChange: id => setActiveSheet(id),
+      children: [/*#__PURE__*/_jsx(BottomSheet, {
+        sheetId: "manage",
+        label: label,
+        height: "hug",
+        children: /*#__PURE__*/_jsxs("div", {
+          ...{
+            className: "x78zum5 xdt5ytf x5yr21d x2lwn1j xrrkdod x1vlblms xvmdzux"
+          },
+          children: [/*#__PURE__*/_jsx("div", {
+            ...{
+              className: "x78zum5 x13a6bvl x1p37lm5"
+            },
+            children: /*#__PURE__*/_jsx(IconButton, {
+              label: "Close",
+              icon: /*#__PURE__*/_jsx(Icon, {
+                icon: "close"
+              }),
+              variant: "ghost",
+              size: "sm",
+              onClick: () => setActiveSheet(null)
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            ...{
+              className: "x78zum5 xdt5ytf x1odjw0f x2lwn1j"
+            },
+            "data-testid": "mobile-tokenizer-manage-list",
+            children: value.length === 0 ? /*#__PURE__*/_jsx(Text, {
+              type: "supporting",
+              color: "secondary",
+              xstyle: styles.empty,
+              children: "No items yet"
+            }) : value.map((item, i) => /*#__PURE__*/_jsxs("div", {
+              children: [i > 0 && /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs("div", {
+                ...{
+                  className: "x78zum5 x6s0dn4 x1txdalj xh8yej3 x1gg8mnh xce4md1 x7a5moj x1yc453h xjbqb8w xc342km x1tgivj0 x1ypdohk x16khyan"
+                },
+                children: [/*#__PURE__*/_jsx("span", {
+                  ...{
+                    className: "x1iyjqo2 xeuugli"
+                  },
+                  children: /*#__PURE__*/_jsx(Text, {
+                    type: "body",
+                    children: item.label
+                  })
+                }), /*#__PURE__*/_jsx(IconButton, {
+                  label: `Remove ${item.label}`,
+                  icon: /*#__PURE__*/_jsx(Icon, {
+                    icon: "close"
+                  }),
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => handleRemove(item)
+                })]
+              })]
+            }, item.id))
+          }), /*#__PURE__*/_jsxs("div", {
+            ...{
+              className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1vlblms xr1yuqi"
+            },
+            children: [/*#__PURE__*/_jsx(Button, {
+              label: "Clear all",
+              variant: "ghost",
+              isDisabled: value.length === 0,
+              onClick: handleClearAll
+            }), /*#__PURE__*/_jsx(Button, {
+              label: "Add item",
+              variant: "primary",
+              isDisabled: isAtMax,
+              onClick: () => setActiveSheet('add')
+            })]
+          })]
+        })
+      }), /*#__PURE__*/_jsx(BottomSheet, {
+        sheetId: "add",
+        label: "Add item",
+        height: "tall",
+        children: /*#__PURE__*/_jsxs("div", {
+          ...{
+            className: "x78zum5 xdt5ytf x5yr21d x2lwn1j xrrkdod x1vlblms xvmdzux"
+          },
+          children: [/*#__PURE__*/_jsxs("div", {
+            ...{
+              className: "x78zum5 xdt5ytf x1odjw0f x2lwn1j"
+            },
+            role: "listbox",
+            "aria-multiselectable": "true",
+            "aria-label": label,
+            "data-testid": "mobile-tokenizer-add-list",
+            children: [createItem != null && /*#__PURE__*/_jsxs("button", {
+              type: "button",
+              role: "option",
+              "aria-selected": false,
+              ...{
+                className: "x78zum5 x6s0dn4 x1txdalj xh8yej3 x1gg8mnh xce4md1 x7a5moj x1yc453h xjbqb8w xc342km x1tgivj0 x1ypdohk x16khyan"
+              },
+              onClick: () => {
+                handleAdd(createItem);
+                setQuery('');
+              },
+              children: [/*#__PURE__*/_jsx("span", {
+                ...{
+                  className: "x1iyjqo2 xeuugli"
+                },
+                children: /*#__PURE__*/_jsx(Text, {
+                  type: "body",
+                  children: createItem.label
+                })
+              }), /*#__PURE__*/_jsx("span", {
+                ...{
+                  className: "x78zum5 x6s0dn4 xl56j7k xgd8bvy x1fgtraw x2lah0s xjspbzw xmkeg23 x1y0btm7 x14i3s5s xosj86m xo5v014"
+                },
+                "aria-hidden": "true",
+                children: "+"
+              })]
+            }), !isSearching && results.length === 0 && createItem == null ? /*#__PURE__*/_jsx(Text, {
+              type: "supporting",
+              color: "secondary",
+              xstyle: styles.empty,
+              children: emptySearchResultsText
+            }) : results.map(item => {
+              const isSelected = selectedIds.has(item.id);
+              const rowDisabled = !isSelected && isAtMax;
+              return /*#__PURE__*/_jsxs("button", {
+                type: "button",
+                role: "option",
+                "aria-selected": isSelected,
+                "aria-disabled": rowDisabled || undefined,
+                ...{
+                  0: {
+                    className: "x78zum5 x6s0dn4 x1txdalj xh8yej3 x1gg8mnh xce4md1 x7a5moj x1yc453h xjbqb8w xc342km x1tgivj0 x1ypdohk x16khyan"
+                  },
+                  1: {
+                    className: "x78zum5 x6s0dn4 x1txdalj xh8yej3 x1gg8mnh xce4md1 x7a5moj x1yc453h xjbqb8w xc342km x1tgivj0 x1ypdohk x16khyan xbyyjgo"
+                  }
+                }[!!rowDisabled << 0],
+                onClick: () => isSelected ? handleRemove(item) : handleAdd(item),
+                children: [/*#__PURE__*/_jsx("span", {
+                  ...{
+                    className: "x1iyjqo2 xeuugli"
+                  },
+                  children: renderItem ? renderItem(item) : /*#__PURE__*/_jsx(Text, {
+                    type: "body",
+                    children: item.label
+                  })
+                }), /*#__PURE__*/_jsx("span", {
+                  ...{
+                    className: "x78zum5 x6s0dn4 xl56j7k xgd8bvy x1fgtraw x2lah0s xjspbzw xmkeg23 x1y0btm7 x14i3s5s xosj86m xo5v014"
+                  },
+                  "aria-hidden": "true",
+                  children: isSelected ? /*#__PURE__*/_jsx(Icon, {
+                    icon: "check",
+                    size: "sm"
+                  }) : '+'
+                })]
+              }, item.id);
+            })]
+          }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs("div", {
+            ...{
+              className: "x78zum5 xuk3077 x1txdalj x1xye8es xr1yuqi"
+            },
+            children: [/*#__PURE__*/_jsx(TextInput, {
+              label: `Search ${label}`,
+              isLabelHidden: true,
+              placeholder: "Search...",
+              value: query,
+              width: "100%",
+              hasClear: true,
+              onChange: next => {
+                setQuery(next);
+                onChangeQuery?.(next);
+              },
+              xstyle: styles.filterInput
+            }), /*#__PURE__*/_jsx(Button, {
+              label: "Done",
+              variant: "primary",
+              onClick: () => setActiveSheet('manage')
+            })]
+          })]
+        })
+      })]
+    })]
+  });
+}
+MobileTokenizer.displayName = 'MobileTokenizer';

package/dist/MobileTokenizer/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @file index.ts
+ * @input MobileTokenizer component
+ * @output Public MobileTokenizer entry point for @astryxdesign/lab
+ * @position Component barrel; re-exported by /packages/lab/src/index.ts
+ */
+export { MobileTokenizer } from './MobileTokenizer';
+export type { MobileTokenizerProps, MobileTokenizerChange, } from './MobileTokenizer';
+//# sourceMappingURL=index.d.ts.map

package/dist/MobileTokenizer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MobileTokenizer/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,YAAY,EACV,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC"}

package/dist/MobileTokenizer/index.js

@@ -0,0 +1,11 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input MobileTokenizer component
+ * @output Public MobileTokenizer entry point for @astryxdesign/lab
+ * @position Component barrel; re-exported by /packages/lab/src/index.ts
+ */
+export { MobileTokenizer } from "./MobileTokenizer.js";

package/dist/index.d.ts

@@ -28,4 +28,5 @@ export { SankeyChart, type SankeyChartProps, SankeyLink, type SankeyLinkProps, S
 export * from './CircularProgress';
 export * from './ListInput';
 export { LogStream, type LogStreamProps, type LogEntry, type LogStreamLevel, } from './LogStream';
+export { MobileTokenizer, type MobileTokenizerProps, type MobileTokenizerChange, } from './MobileTokenizer';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -66,6 +66,11 @@ export * from "./ListInput/index.js";
 // LogStream — experimental streaming log viewer
 export { LogStream } from "./LogStream/index.js";
 
+// MobileTokenizer — Lab prototype (stack layer 1) of the touch Tokenizer
+// flow: summary trigger + stacked manage/add BottomSheets. Graduates to
+// Core Tokenizer presentation="bottom-sheet" (stack layer 2).
+export { MobileTokenizer } from "./MobileTokenizer/index.js";
+
 // RichTextEditor (RFC facebook/astryx#3899) has graduated out of @astryxdesign/lab
 // into its own canary-only package, @astryxdesign/richtext, so it can be canaried
 // independently (e.g. into EPS/Nest). Import it from there:

package/dist/lab.css

@@ -133,6 +133,7 @@
   .xu0wf1k:not(#\#):not(#\#){padding-block:var(--spacing-1)}
   .xce4md1:not(#\#):not(#\#){padding-block:var(--spacing-2)}
   .x8o8v82:not(#\#):not(#\#){padding-block:var(--spacing-3)}
+  .x1na6nto:not(#\#):not(#\#){padding-block:var(--spacing-4)}
   .xnjsko4:not(#\#):not(#\#){padding-inline:0}
   .x4ezzuc:not(#\#):not(#\#){padding-inline:var(--spacing-1-5)}
   .x7a5moj:not(#\#):not(#\#){padding-inline:var(--spacing-1)}
@@ -309,6 +310,7 @@
   .x3nfvp2:not(#\#):not(#\#):not(#\#){display:inline-flex}
   .x1s85apg:not(#\#):not(#\#):not(#\#){display:none}
   .xbh8q5q:not(#\#):not(#\#):not(#\#){fill:none}
+  .x1r8uery:not(#\#):not(#\#):not(#\#){flex-basis:0}
   .xdl72j9:not(#\#):not(#\#):not(#\#){flex-basis:auto}
   .xdt5ytf:not(#\#):not(#\#):not(#\#){flex-direction:column}
   .x1iyjqo2:not(#\#):not(#\#):not(#\#){flex-grow:1}
@@ -375,6 +377,7 @@
   .x1lqcxt8:not(#\#):not(#\#):not(#\#){justify-self:start}
   .x9pfba7:not(#\#):not(#\#):not(#\#){letter-spacing:.08em}
   .xa7kkou:not(#\#):not(#\#):not(#\#){line-height:1.7}
+  .xo5v014:not(#\#):not(#\#):not(#\#){line-height:1}
   .xklk4pu:not(#\#):not(#\#):not(#\#){line-height:30px}
   .xw6l6zx:not(#\#):not(#\#):not(#\#){line-height:var(--text-body-leading)}
   .x17iicif:not(#\#):not(#\#):not(#\#){line-height:var(--text-code-leading)}
@@ -384,6 +387,7 @@
   .x3ct3a4:not(#\#):not(#\#):not(#\#){list-style-type:none}
   .x1h1dc9q:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(var(--spacing-0-5) + var(--border-width))}
   .x1pezmd8:not(#\#):not(#\#):not(#\#){margin-inline-end:var(--spacing-2)}
+  .xvc5jky:not(#\#):not(#\#):not(#\#){margin-inline-start:auto}
   .x1m70ojl:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * var(--spacing-1-5))}
   .xhi58n4:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(var(--spacing-1) * -1)}
   .xladpz9:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--spacing-0-5)}
@@ -426,6 +430,7 @@
   .x2b8uid:not(#\#):not(#\#):not(#\#){text-align:center}
   .xp4054r:not(#\#):not(#\#):not(#\#){text-align:end}
   .xdpxx8g:not(#\#):not(#\#):not(#\#){text-align:left}
+  .x1yc453h:not(#\#):not(#\#):not(#\#){text-align:start}
   .xlyipyv:not(#\#):not(#\#):not(#\#){text-overflow:ellipsis}
   .xtvhhri:not(#\#):not(#\#):not(#\#){text-transform:uppercase}
   .x5ve5x3:not(#\#):not(#\#):not(#\#){touch-action:none}
@@ -500,12 +505,14 @@
   .x11xkdxz:not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:var(--border-width)}
   .x1ey2m1c:not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
   .x1hmuevu:not(#\#):not(#\#):not(#\#):not(#\#){bottom:var(--spacing-3)}
+  .x5yr21d:not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
   .xtdtrs8:not(#\#):not(#\#):not(#\#):not(#\#){height:100dvh}
   .x170jfvy:not(#\#):not(#\#):not(#\#):not(#\#){height:10px}
   .x1v9usgg:not(#\#):not(#\#):not(#\#):not(#\#){height:14px}
   .xlup9mm:not(#\#):not(#\#):not(#\#):not(#\#){height:16px}
   .xjm9jq1:not(#\#):not(#\#):not(#\#):not(#\#){height:1px}
   .xxk0z11:not(#\#):not(#\#):not(#\#):not(#\#){height:24px}
+  .x1fgtraw:not(#\#):not(#\#):not(#\#):not(#\#){height:28px}
   .x1gnnpzl:not(#\#):not(#\#):not(#\#):not(#\#){height:30px}
   .x10w6t97:not(#\#):not(#\#):not(#\#):not(#\#){height:32px}
   .x1ycjhwn:not(#\#):not(#\#):not(#\#):not(#\#){height:5px}
@@ -516,6 +523,7 @@
   .x1unci72:not(#\#):not(#\#):not(#\#):not(#\#){left:var(--spacing-4)}
   .xlstkdb:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--spacing-0-5)}
   .x1p37lm5:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--spacing-2)}
+  .xr1yuqi:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:auto}
   .x160xvyo:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(var(--spacing-1) * -1)}
   .xcsaf9d:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--spacing-1)}
   .xtbrsbv:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--spacing-2)}
@@ -533,6 +541,7 @@
   .xisnujt:not(#\#):not(#\#):not(#\#):not(#\#){min-height:20px}
   .xjwf9q1:not(#\#):not(#\#):not(#\#):not(#\#){min-height:24px}
   .x1cy360x:not(#\#):not(#\#):not(#\#):not(#\#){min-height:3em}
+  .x1gg8mnh:not(#\#):not(#\#):not(#\#):not(#\#){min-height:44px}
   .x1uogy3y:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-md)}
   .x1gdqauq:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-sm)}
   .xu95rz8:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--transfer-list-panel-min-block-size)}
@@ -546,9 +555,11 @@
   .x1odjw0f:not(#\#):not(#\#):not(#\#):not(#\#){overflow-y:auto}
   .x1a148e8:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:env(safe-area-inset-bottom,0px)}
   .xy143xn:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--spacing-1)}
+  .xvmdzux:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--spacing-3)}
   .xpgmcrp:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--icon-block-offset)}
   .xbx876j:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--spacing-0-5)}
   .x1xye8es:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--spacing-2)}
+  .x1vlblms:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--spacing-3)}
   .x13vifvy:not(#\#):not(#\#):not(#\#):not(#\#){top:0}
   .xctzyg:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--spacing-2)}
   .xyx6v2t:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--spacing-3)}
@@ -560,6 +571,7 @@
   .x1i1rx1s:not(#\#):not(#\#):not(#\#):not(#\#){width:1px}
   .xvy4d1p:not(#\#):not(#\#):not(#\#):not(#\#){width:24px}
   .x1dz1jew:not(#\#):not(#\#):not(#\#):not(#\#){width:280px}
+  .xgd8bvy:not(#\#):not(#\#):not(#\#):not(#\#){width:28px}
   .x1849jeq:not(#\#):not(#\#):not(#\#):not(#\#){width:30px}
   .x1td3qas:not(#\#):not(#\#):not(#\#):not(#\#){width:32px}
   .x1ftt334:not(#\#):not(#\#):not(#\#):not(#\#){width:5px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.6.2-canary.fc74d7e",
+  "version": "0.6.3-canary.039a67e",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -46,7 +46,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.6.2-canary.fc74d7e",
+    "@astryxdesign/core": "0.6.3-canary.039a67e",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -56,8 +56,8 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.6.2-canary.fc74d7e",
-    "@astryxdesign/cli": "0.6.2-canary.fc74d7e",
+    "@astryxdesign/a11y-spec": "0.6.3-canary.039a67e",
+    "@astryxdesign/cli": "0.6.3-canary.039a67e",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/MobileTokenizer/MobileTokenizer.doc.mjs

@@ -0,0 +1,32 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
+export const docs = {
+  name: 'MobileTokenizer',
+  displayName: 'Mobile Tokenizer',
+  group: 'MobileTokenizer',
+  category: 'Form Controls',
+  keywords: ['tokenizer', 'mobile', 'touch', 'bottom sheet', 'tags', 'chips'],
+  props: [
+    {name: 'label', type: 'string', description: 'Field label and sheet heading.', required: true},
+    {name: 'searchSource', type: 'SearchSource<T>', description: 'Core Typeahead search source (search + bootstrap).', required: true},
+    {name: 'value', type: 'T[]', description: 'Selected items (Core SearchableItem).', required: true},
+    {name: 'onChange', type: '(items: T[], change: MobileTokenizerChange<T>) => void', description: 'Mirrors Core Tokenizer: single-item add/create/remove, or reorder.', required: true},
+    {name: 'placeholder', type: 'string', description: 'Trigger text when nothing is selected.'},
+    {name: 'hasCreate', type: 'boolean', description: 'Offer Create "<query>" for unmatched free text.', default: 'false'},
+    {name: 'maxEntries', type: 'number', description: 'Cap selections; add rows disable at the cap.'},
+    {name: 'renderItem', type: '(item: T) => ReactNode', description: 'Custom add-sheet row content.'},
+  ],
+  usage: {
+    description:
+      'Lab prototype for trying the touch Tokenizer flow: tap the field to open the manage sheet (review, remove, Clear all, Add item), tap Add item for the stacked search sheet (results above, filter + Done in the bottom row above the keyboard, tap +/check to toggle immediately).',
+    bestPractices: [
+      {guidance: true, description: 'Try this in Lab/canary to validate the flow; graduate via Core Tokenizer presentation="adaptive" when it ships.'},
+      {guidance: false, description: 'Do not ship stable product on this Lab API; it has no theming, i18n, or spec contract yet.'},
+    ],
+    anatomy: [
+      {name: 'Trigger field', required: true, description: 'Button showing tokens as a summary, with chevron.'},
+      {name: 'Manage sheet', required: true, description: 'Selected rows with remove, Clear all footer, Add item.'},
+      {name: 'Add sheet', required: true, description: 'Stacked sheet: result rows with +/check toggles, bottom filter + Done row.'},
+    ],
+  },
+};

package/src/MobileTokenizer/MobileTokenizer.test.tsx

@@ -0,0 +1,72 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+/**
+ * @file MobileTokenizer.test.tsx
+ * @input Uses vitest, @testing-library/react, MobileTokenizer
+ * @output Lab tests for the sketch flow: field -> manage -> add (bottom
+ *   filter) -> Done -> manage
+ * @position Lab tests; validates MobileTokenizer.tsx
+ */
+import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
+import {render, screen, fireEvent, waitFor} from '@testing-library/react';
+import {useState} from 'react';
+import {MobileTokenizer, type MobileTokenizerChange} from './MobileTokenizer';
+import type {SearchSource, SearchableItem} from '@astryxdesign/core/Typeahead';
+
+const ITEMS: SearchableItem[] = [
+  {id: 'design', label: 'Design'},
+  {id: 'eng', label: 'Eng'},
+  {id: 'engineer', label: 'Engineer'},
+  {id: 'energizer', label: 'Energizer'},
+];
+const source: SearchSource<SearchableItem> = {
+  search: q => ITEMS.filter(i => i.label.toLowerCase().includes(q.toLowerCase())),
+  bootstrap: () => ITEMS,
+};
+
+function Harness({spy}: {spy?: (i: SearchableItem[], c: MobileTokenizerChange<SearchableItem>) => void}) {
+  const [value, setValue] = useState<SearchableItem[]>([ITEMS[0], ITEMS[1]]);
+  return (
+    <MobileTokenizer label="Tags" searchSource={source} value={value} debounceMs={0} placeholder="Add tags"
+      onChange={(items, change) => { setValue(items); spy?.(items, change); }} />
+  );
+}
+
+beforeEach(() => {
+  HTMLDialogElement.prototype.showModal = vi.fn(function (this: HTMLDialogElement) { this.setAttribute('open', ''); });
+  HTMLDialogElement.prototype.show = vi.fn(function (this: HTMLDialogElement) { this.setAttribute('open', ''); });
+  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) { this.removeAttribute('open'); });
+  if (!Element.prototype.setPointerCapture) { Element.prototype.setPointerCapture = vi.fn(); Element.prototype.releasePointerCapture = vi.fn(); }
+  vi.stubGlobal('matchMedia', vi.fn().mockReturnValue({matches: false, media: '', onchange: null, addEventListener: vi.fn(), removeEventListener: vi.fn(), addListener: vi.fn(), removeListener: vi.fn(), dispatchEvent: vi.fn()}));
+  vi.stubGlobal('requestAnimationFrame', vi.fn((cb: FrameRequestCallback) => { cb(0); return 1; }));
+});
+afterEach(() => vi.unstubAllGlobals());
+
+describe('MobileTokenizer (Lab, sketch flow)', () => {
+  it('field -> manage -> add: filter at bottom, tap + adds, Done returns', async () => {
+    const spy = vi.fn();
+    render(<Harness spy={spy} />);
+    const trigger = screen.getByRole('button', {name: /Tags/});
+    expect(trigger.getAttribute('aria-haspopup')).toBe('dialog');
+    fireEvent.click(trigger);
+    expect((await screen.findByTestId('mobile-tokenizer-manage-list')).textContent).toContain('Design');
+    fireEvent.click(screen.getByRole('button', {name: 'Add item'}));
+    const search = await screen.findByLabelText('Search Tags');
+    fireEvent.change(search, {target: {value: 'E'}});
+    const engineer = await screen.findByRole('option', {name: /Engineer/});
+    fireEvent.click(engineer);
+    expect(spy).toHaveBeenCalledWith([ITEMS[0], ITEMS[1], ITEMS[2]], expect.objectContaining({type: 'add'}));
+    await waitFor(() => expect(screen.getByRole('option', {name: /Engineer/}).getAttribute('aria-selected')).toBe('true'));
+    fireEvent.click(screen.getByRole('button', {name: 'Done'}));
+    expect((await screen.findByTestId('mobile-tokenizer-manage-list')).textContent).toContain('Engineer');
+  });
+  it('manage sheet removes and clears', async () => {
+    const spy = vi.fn();
+    render(<Harness spy={spy} />);
+    fireEvent.click(screen.getByRole('button', {name: /Tags/}));
+    await screen.findByTestId('mobile-tokenizer-manage-list');
+    fireEvent.click(screen.getByRole('button', {name: 'Remove Eng'}));
+    expect(spy).toHaveBeenCalledWith([ITEMS[0]], expect.objectContaining({type: 'remove'}));
+    fireEvent.click(screen.getByRole('button', {name: 'Clear all'}));
+    expect(spy).toHaveBeenLastCalledWith([], expect.objectContaining({type: 'remove'}));
+  });
+});

package/src/MobileTokenizer/MobileTokenizer.tsx

@@ -0,0 +1,474 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file MobileTokenizer.tsx
+ * @input Uses public @astryxdesign/core components only (BottomSheet,
+ *   BottomSheetSwitcher, Button, Field, Heading, Icon, IconButton, Text,
+ *   TextInput, Token)
+ * @output Exports MobileTokenizer — Lab prototype of the touch Tokenizer
+ *   flow (stacked manage + add sheets)
+ * @position Lab (canary) stack layer 1: validates the design before the
+ *   Core promotion (Tokenizer presentation="bottom-sheet") stacked after it.
+ *
+ * API mirrors Core Tokenizer (label/searchSource/value/onChange/change,
+ * hasCreate, maxEntries) so graduation is an import swap. Differences from
+ * Core are the Lab deltas: the filter is a bordered TextInput (Core's
+ * PanelSearchInput is not exported), strings are literals (no i18n keys),
+ * and there is no theming/spec contract yet.
+ */
+
+import {
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import * as stylex from '@stylexjs/stylex';
+import type {BaseProps} from '@astryxdesign/core';
+import {BottomSheet} from '@astryxdesign/core/BottomSheet';
+import {BottomSheetSwitcher} from '@astryxdesign/core/BottomSheet';
+import {Button} from '@astryxdesign/core/Button';
+import {Divider} from '@astryxdesign/core/Divider';
+import {Field} from '@astryxdesign/core/Field';
+import {Icon} from '@astryxdesign/core/Icon';
+import {IconButton} from '@astryxdesign/core/IconButton';
+import {Text} from '@astryxdesign/core/Text';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {Token} from '@astryxdesign/core/Token';
+import type {
+  SearchableItem,
+  SearchSource,
+} from '@astryxdesign/core/Typeahead';
+import {
+  colorVars,
+  radiusVars,
+  spacingVars,
+} from '@astryxdesign/core/theme/tokens.stylex';
+
+export type MobileTokenizerChange<T extends SearchableItem> =
+  | {item: T; type: 'add'}
+  | {item: T; type: 'create'}
+  | {item: T; type: 'remove'}
+  | {type: 'reorder'};
+
+export interface MobileTokenizerProps<T extends SearchableItem> extends Omit<
+  BaseProps<HTMLDivElement>,
+  'onChange'
+> {
+  label: string;
+  searchSource: SearchSource<T>;
+  value: T[];
+  onChange: (items: T[], change: MobileTokenizerChange<T>) => void;
+  renderItem?: (item: T) => ReactNode;
+  placeholder?: string;
+  description?: string;
+  isOptional?: boolean;
+  isDisabled?: boolean;
+  hasCreate?: boolean;
+  maxEntries?: number;
+  maxMenuItems?: number;
+  minQueryLength?: number;
+  debounceMs?: number;
+  emptySearchResultsText?: string;
+  onChangeQuery?: (query: string) => void;
+}
+
+type SheetId = 'manage' | 'add';
+const CREATABLE_ID_PREFIX = '__xds_create__';
+
+const styles = stylex.create({
+  trigger: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: spacingVars['--spacing-1'],
+    width: '100%',
+    minHeight: 44,
+    paddingBlock: spacingVars['--spacing-1'],
+    paddingInline: spacingVars['--spacing-2'],
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colorVars['--color-border'],
+    borderRadius: radiusVars['--radius-element'],
+    backgroundColor: 'transparent',
+    textAlign: 'start',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
+  },
+  triggerPlaceholder: {
+    color: colorVars['--color-text-secondary'],
+  },
+  chevron: {
+    marginInlineStart: 'auto',
+    display: 'flex',
+    flexShrink: 0,
+  },
+  sheetBody: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    minHeight: 0,
+    paddingInline: spacingVars['--spacing-3'],
+    paddingBlockStart: spacingVars['--spacing-3'],
+    paddingBlockEnd: spacingVars['--spacing-3'],
+  },
+  // Sketch has no visible sheet headings — manage is rows + a top-end
+  // close affordance only. The sheet's accessible name still comes from
+  // BottomSheet's `label`, not a rendered heading.
+  closeRow: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginBlockEnd: spacingVars['--spacing-2'],
+  },
+  list: {
+    display: 'flex',
+    flexDirection: 'column',
+    overflowY: 'auto',
+    minHeight: 0,
+  },
+  row: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacingVars['--spacing-2'],
+    width: '100%',
+    minHeight: 44,
+    paddingBlock: spacingVars['--spacing-2'],
+    paddingInline: spacingVars['--spacing-1'],
+    textAlign: 'start',
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    color: colorVars['--color-text-primary'],
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
+  },
+  rowDisabled: {opacity: 0.5},
+  rowLabel: {flexGrow: 1, minWidth: 0},
+  toggleMark: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 28,
+    height: 28,
+    flexShrink: 0,
+    borderRadius: radiusVars['--radius-full'],
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colorVars['--color-border'],
+    fontSize: 18,
+    lineHeight: 1,
+  },
+  footer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacingVars['--spacing-2'],
+    paddingBlockStart: spacingVars['--spacing-3'],
+    marginTop: 'auto',
+  },
+  filterRow: {
+    display: 'flex',
+    alignItems: 'flex-end',
+    gap: spacingVars['--spacing-2'],
+    paddingBlockStart: spacingVars['--spacing-2'],
+    marginTop: 'auto',
+  },
+  // TextInput renders Field (block, shrink-to-fit); xstyle lands on that
+  // root, so it must flex — the filter takes all row space minus Done+gap.
+  filterInput: {flexGrow: 1, flexShrink: 1, flexBasis: 0, minWidth: 0},
+  empty: {paddingBlock: spacingVars['--spacing-4']},
+});
+
+export function MobileTokenizer<T extends SearchableItem>({
+  label,
+  searchSource,
+  value,
+  onChange,
+  renderItem,
+  placeholder,
+  description,
+  isOptional,
+  isDisabled = false,
+  hasCreate = false,
+  maxEntries,
+  maxMenuItems = 10,
+  minQueryLength = 1,
+  debounceMs = 150,
+  emptySearchResultsText = 'No results found',
+  onChangeQuery,
+  xstyle,
+}: MobileTokenizerProps<T>) {
+  const triggerId = useId();
+  const [activeSheet, setActiveSheet] = useState<SheetId | null>(null);
+  const selectedIds = useMemo(() => new Set(value.map(v => v.id)), [value]);
+  const isAtMax = maxEntries != null && value.length >= maxEntries;
+
+  const handleAdd = (item: T) => {
+    if (isAtMax || selectedIds.has(item.id)) {
+      return;
+    }
+    if (
+      hasCreate &&
+      typeof item.id === 'string' &&
+      item.id.startsWith(CREATABLE_ID_PREFIX)
+    ) {
+      const created = item.id.slice(CREATABLE_ID_PREFIX.length);
+      if (selectedIds.has(created)) {
+        return;
+      }
+      const real = {id: created, label: created} as T;
+      onChange([...value, real], {item: real, type: 'create'});
+      return;
+    }
+    onChange([...value, item], {item, type: 'add'});
+  };
+  const handleRemove = (item: T) =>
+    onChange(
+      value.filter(v => v.id !== item.id),
+      {item, type: 'remove'},
+    );
+  const handleClearAll = () => {
+    if (value.length > 0) {
+      onChange([], {item: value[value.length - 1], type: 'remove'});
+    }
+  };
+
+  // ---- add-sheet search ----
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<T[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const seqRef = useRef(0);
+  const isAddOpen = activeSheet === 'add';
+  useEffect(() => {
+    if (!isAddOpen) {
+      return;
+    }
+    const seq = ++seqRef.current;
+    const run = async () => {
+      setIsSearching(true);
+      try {
+        const trimmed = query.trim();
+        let items: T[];
+        if (trimmed === '') {
+          items = searchSource.bootstrap
+            ? await searchSource.bootstrap()
+            : await searchSource.search('');
+        } else if (trimmed.length < minQueryLength) {
+          items = [];
+        } else {
+          items = await searchSource.search(query);
+        }
+        if (seqRef.current === seq) {
+          setResults(items.slice(0, maxMenuItems));
+        }
+      } finally {
+        if (seqRef.current === seq) {
+          setIsSearching(false);
+        }
+      }
+    };
+    if (debounceMs > 0) {
+      const timer = setTimeout(() => {
+        void run();
+      }, debounceMs);
+      return () => clearTimeout(timer);
+    }
+    void run();
+  }, [isAddOpen, query, searchSource, minQueryLength, maxMenuItems, debounceMs]);
+
+  const createItem = useMemo<T | null>(() => {
+    const trimmed = query.trim();
+    if (!hasCreate || trimmed === '' || isAtMax) {
+      return null;
+    }
+    if (
+      selectedIds.has(trimmed) ||
+      results.some(r => r.label.toLowerCase() === trimmed.toLowerCase())
+    ) {
+      return null;
+    }
+    return {
+      id: `${CREATABLE_ID_PREFIX}${trimmed}`,
+      label: `Create "${trimmed}"`,
+    } as unknown as T;
+  }, [hasCreate, query, results, selectedIds, isAtMax]);
+
+  return (
+    <Field
+      label={label}
+      description={description}
+      isOptional={isOptional}
+      isDisabled={isDisabled}
+      inputID={triggerId}
+      xstyle={xstyle}>
+      <button
+        type="button"
+        id={triggerId}
+        aria-haspopup="dialog"
+        aria-expanded={activeSheet != null}
+        aria-label={label}
+        disabled={isDisabled}
+        onClick={() => setActiveSheet('manage')}
+        {...stylex.props(styles.trigger)}>
+        {value.length > 0 ? (
+          value.map(item => (
+            <Token key={item.id} label={item.label} isDisabled={isDisabled} />
+          ))
+        ) : (
+          <span {...stylex.props(styles.triggerPlaceholder)}>
+            {placeholder ?? ''}
+          </span>
+        )}
+        <span {...stylex.props(styles.chevron)} aria-hidden="true">
+          <Icon icon="chevronDown" size="sm" color="secondary" />
+        </span>
+      </button>
+
+      {!isDisabled && (
+        <BottomSheetSwitcher
+          activeSheet={activeSheet}
+          onActiveSheetChange={id => setActiveSheet(id as SheetId | null)}>
+          <BottomSheet sheetId="manage" label={label} height="hug">
+            <div {...stylex.props(styles.sheetBody)}>
+              <div {...stylex.props(styles.closeRow)}>
+                <IconButton
+                  label="Close"
+                  icon={<Icon icon="close" />}
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setActiveSheet(null)}
+                />
+              </div>
+              <div {...stylex.props(styles.list)} data-testid="mobile-tokenizer-manage-list">
+                {value.length === 0 ? (
+                  <Text type="supporting" color="secondary" xstyle={styles.empty}>
+                    No items yet
+                  </Text>
+                ) : (
+                  value.map((item, i) => (
+                    <div key={item.id}>
+                      {i > 0 && <Divider />}
+                      <div {...stylex.props(styles.row)}>
+                        <span {...stylex.props(styles.rowLabel)}>
+                          <Text type="body">{item.label}</Text>
+                        </span>
+                        <IconButton
+                          label={`Remove ${item.label}`}
+                          icon={<Icon icon="close" />}
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleRemove(item)}
+                        />
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+              <div {...stylex.props(styles.footer)}>
+                <Button
+                  label="Clear all"
+                  variant="ghost"
+                  isDisabled={value.length === 0}
+                  onClick={handleClearAll}
+                />
+                <Button
+                  label="Add item"
+                  variant="primary"
+                  isDisabled={isAtMax}
+                  onClick={() => setActiveSheet('add')}
+                />
+              </div>
+            </div>
+          </BottomSheet>
+
+          <BottomSheet sheetId="add" label="Add item" height="tall">
+            <div {...stylex.props(styles.sheetBody)}>
+              <div
+                {...stylex.props(styles.list)}
+                role="listbox"
+                aria-multiselectable="true"
+                aria-label={label}
+                data-testid="mobile-tokenizer-add-list">
+                {createItem != null && (
+                  <button
+                    type="button"
+                    role="option"
+                    aria-selected={false}
+                    {...stylex.props(styles.row)}
+                    onClick={() => {
+                      handleAdd(createItem);
+                      setQuery('');
+                    }}>
+                    <span {...stylex.props(styles.rowLabel)}>
+                      <Text type="body">{createItem.label}</Text>
+                    </span>
+                    <span {...stylex.props(styles.toggleMark)} aria-hidden="true">+</span>
+                  </button>
+                )}
+                {!isSearching && results.length === 0 && createItem == null ? (
+                  <Text type="supporting" color="secondary" xstyle={styles.empty}>
+                    {emptySearchResultsText}
+                  </Text>
+                ) : (
+                  results.map(item => {
+                    const isSelected = selectedIds.has(item.id);
+                    const rowDisabled = !isSelected && isAtMax;
+                    return (
+                      <button
+                        key={item.id}
+                        type="button"
+                        role="option"
+                        aria-selected={isSelected}
+                        aria-disabled={rowDisabled || undefined}
+                        {...stylex.props(styles.row, rowDisabled && styles.rowDisabled)}
+                        onClick={() =>
+                          isSelected ? handleRemove(item) : handleAdd(item)
+                        }>
+                        <span {...stylex.props(styles.rowLabel)}>
+                          {renderItem ? renderItem(item) : <Text type="body">{item.label}</Text>}
+                        </span>
+                        <span {...stylex.props(styles.toggleMark)} aria-hidden="true">
+                          {isSelected ? <Icon icon="check" size="sm" /> : '+'}
+                        </span>
+                      </button>
+                    );
+                  })
+                )}
+              </div>
+              <Divider />
+              <div {...stylex.props(styles.filterRow)}>
+                <TextInput
+                  label={`Search ${label}`}
+                  isLabelHidden
+                  placeholder="Search..."
+                  value={query}
+                  width="100%"
+                  hasClear
+                  onChange={next => {
+                    setQuery(next);
+                    onChangeQuery?.(next);
+                  }}
+                  xstyle={styles.filterInput}
+                />
+                <Button
+                  label="Done"
+                  variant="primary"
+                  onClick={() => setActiveSheet('manage')}
+                />
+              </div>
+            </div>
+          </BottomSheet>
+        </BottomSheetSwitcher>
+      )}
+    </Field>
+  );
+}
+
+MobileTokenizer.displayName = 'MobileTokenizer';

package/src/MobileTokenizer/index.ts

@@ -0,0 +1,16 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input MobileTokenizer component
+ * @output Public MobileTokenizer entry point for @astryxdesign/lab
+ * @position Component barrel; re-exported by /packages/lab/src/index.ts
+ */
+
+export {MobileTokenizer} from './MobileTokenizer';
+export type {
+  MobileTokenizerProps,
+  MobileTokenizerChange,
+} from './MobileTokenizer';

package/src/index.ts

@@ -253,6 +253,15 @@ export {
   type LogStreamLevel,
 } from './LogStream';
 
+// MobileTokenizer — Lab prototype (stack layer 1) of the touch Tokenizer
+// flow: summary trigger + stacked manage/add BottomSheets. Graduates to
+// Core Tokenizer presentation="bottom-sheet" (stack layer 2).
+export {
+  MobileTokenizer,
+  type MobileTokenizerProps,
+  type MobileTokenizerChange,
+} from './MobileTokenizer';
+
 // RichTextEditor (RFC facebook/astryx#3899) has graduated out of @astryxdesign/lab
 // into its own canary-only package, @astryxdesign/richtext, so it can be canaried
 // independently (e.g. into EPS/Nest). Import it from there: