@tallyui/components 3.4.0 → 3.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tallyui/components",
-  "version": "3.4.0",
+  "version": "3.5.1",
   "type": "module",
   "description": "Universal POS UI components for Tally UI",
   "main": "./dist/index.js",
@@ -27,22 +27,22 @@
     "directory": "packages/components"
   },
   "peerDependencies": {
-    "@tallyui/core": "^3.4.0",
-    "@tallyui/primitives": "^3.4.0",
-    "@tallyui/theme": "^3.4.0",
+    "@tallyui/core": "^3.5.1",
+    "@tallyui/primitives": "^3.5.1",
+    "@tallyui/theme": "^3.5.1",
     "react": ">=18",
     "react-native": ">=0.74",
     "react-native-svg": ">=15"
   },
   "dependencies": {
     "class-variance-authority": "^0.7.1",
-    "@tallyui/pos": "3.4.0"
+    "@tallyui/pos": "3.5.1"
   },
   "devDependencies": {
-    "@tallyui/connector-medusa": "3.4.0",
-    "@tallyui/connector-vendure": "3.4.0",
-    "@tallyui/connector-woocommerce": "3.4.0",
-    "@tallyui/mock-api": "3.4.0",
+    "@tallyui/connector-medusa": "3.5.1",
+    "@tallyui/connector-vendure": "3.5.1",
+    "@tallyui/connector-woocommerce": "3.5.1",
+    "@tallyui/mock-api": "3.5.1",
     "@types/react": ">=18",
     "react": "^19.2.4",
     "react-native-svg": "15.12.1",

package/src/index.ts

@@ -12,6 +12,13 @@ export {
   ProductStockBadge,
   ProductCard,
   ProductGrid,
+  ProductTable,
+  ViewToggle,
+  type ViewToggleProps,
+  defaultProductColumns,
+  useDefaultProductColumns,
+  type ProductTableProps,
+  type ProductTableColumn,
   type ProductTitleProps,
   type ProductPriceProps,
   type ProductImageProps,

package/src/product/category-nav.tsx

@@ -30,9 +30,12 @@ export function CategoryNav({
     return (
       <Pressable
         key={cat.id}
+        testID={`category-nav-${cat.id}`}
+        role="radio"
+        aria-checked={active}
         onPress={() => onSelect(cat.id)}
         className={cn(
-          'rounded-full px-3 py-1.5',
+          'rounded-md px-3 py-1.5',
           active ? 'bg-primary' : 'bg-muted',
         )}
       >
@@ -55,6 +58,8 @@ export function CategoryNav({
         showsHorizontalScrollIndicator={false}
         contentContainerClassName="flex-row gap-2 px-3 py-2"
         className={className}
+        role="radiogroup"
+        accessibilityLabel="Categories"
         {...viewProps}
       >
         {content}
@@ -63,7 +68,7 @@ export function CategoryNav({
   }
 
   return (
-    <View className={cn('gap-1 p-2', className)} {...viewProps}>
+    <View className={cn('gap-1 p-2', className)} role="radiogroup" accessibilityLabel="Categories" {...viewProps}>
       {content}
     </View>
   );

package/src/product/index.ts

@@ -5,6 +5,8 @@ export { ProductSku, type ProductSkuProps } from './product-sku';
 export { ProductStockBadge, type ProductStockBadgeProps } from './product-stock-badge';
 export { ProductCard, type ProductCardProps } from './product-card';
 export { ProductGrid, type ProductGridProps } from './product-grid';
+export { ViewToggle, type ViewToggleProps } from './view-toggle';
+export { ProductTable, defaultProductColumns, useDefaultProductColumns, type ProductTableProps, type ProductTableColumn } from './product-table';
 export { ProductList, type ProductListProps } from './product-list';
 export { CategoryNav, type CategoryNavProps, type CategoryItem } from './category-nav';
 export { ProductVariantPicker, type ProductVariantPickerProps, type VariantOption } from './product-variant-picker';

package/src/product/product-table.tsx

@@ -0,0 +1,153 @@
+import { useMemo, useState, type JSX, type ReactNode } from 'react';
+import { FlatList, Pressable, View, type ViewProps } from 'react-native';
+import { useProductTraits, useTraitContext, useStockOverlaid, type ProductTraits, type TraitContext } from '@tallyui/core';
+import { productSortValue, sortProducts, type ProductSort, type ProductSortValue } from '@tallyui/pos';
+import { cn } from '@tallyui/theme';
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, Text, VStack } from '../ui';
+import { ProductTitle } from './product-title';
+import { ProductSku } from './product-sku';
+import { ProductPrice } from './product-price';
+import { ProductStockBadge } from './product-stock-badge';
+
+// Limit initial mounts for a 2,000-product catalogue to eight rows.
+const INITIAL_ROWS = 8;
+// Keep each render batch small for a 2,000-product catalogue.
+const BATCH_ROWS = 8;
+// Keep nearby rows mounted without rendering the whole 2,000-product catalogue.
+const WINDOW_SIZE = 5;
+
+export interface ProductTableColumn<Doc = any> {
+  /** Stable id; the default columns use PRODUCT_SORT_FIELDS. */
+  id: string;
+  /** Header label. */
+  header: string;
+  render: (doc: Doc) => ReactNode;
+  /** The value the header sort orders by; omit to make the column unsortable. */
+  sortValue?: (doc: Doc) => ProductSortValue;
+  /** Flex weight of the column; default 1. */
+  flex?: number;
+}
+
+export interface ProductTableProps extends Omit<ViewProps, 'children'> {
+  items: any[];
+  /** Default: trait columns with a ConnectorProvider, else none. */
+  columns?: ProductTableColumn[];
+  /** Controlled sort when not undefined (null = no sort). */
+  sort?: ProductSort | null;
+  /** Initial sort when uncontrolled; default null. */
+  defaultSort?: ProductSort | null;
+  onSortChange?: (sort: ProductSort | null) => void;
+  /** Sort rows here (default true); false leaves ordering to the app. */
+  sortItems?: boolean;
+  onSelect?: (doc: any) => void;
+  searchSlot?: ReactNode;
+  filterSlot?: ReactNode;
+  emptyState?: ReactNode;
+  showUnsellable?: boolean;
+  /** Passed to the default price column's ProductPrice. */
+  currencySymbol?: string;
+  className?: string;
+}
+
+export function defaultProductColumns(
+  traits: ProductTraits, context?: TraitContext, options?: { currencySymbol?: string },
+): ProductTableColumn[] {
+  const columns: ProductTableColumn[] = [
+    { id: 'name', header: 'Name', flex: 3, render: (doc) => <ProductTitle doc={doc} numberOfLines={2} /> },
+    { id: 'sku', header: 'SKU', flex: 1, render: (doc) => <ProductSku doc={doc} /> },
+    { id: 'barcode', header: 'Barcode', flex: 1, render: (doc) => <Text>{traits.getBarcode(doc) ?? '—'}</Text> },
+    { id: 'price', header: 'Price', flex: 1, render: (doc) => <ProductPrice doc={doc} currencySymbol={options?.currencySymbol} /> },
+    { id: 'stock', header: 'Stock', flex: 1, render: (doc) => <ProductStockBadge doc={doc} showQuantity showAsOf={false} /> },
+    { id: 'category', header: 'Category', flex: 2, render: (doc) => <Text>{traits.getCategoryNames(doc).join(', ') || '—'}</Text> },
+  ];
+  return columns.map((column) => ({
+    ...column, sortValue: (doc) => productSortValue(doc, column.id, traits, context),
+  }));
+}
+
+export function useDefaultProductColumns(options?: { currencySymbol?: string }): ProductTableColumn[] {
+  const traits = useProductTraits();
+  const context = useTraitContext();
+  const currencySymbol = options?.currencySymbol;
+  return useMemo(() => defaultProductColumns(traits, context, { currencySymbol }), [traits, context, currencySymbol]);
+}
+
+export function ProductTable({
+  items, columns, sort, defaultSort = null, onSortChange, sortItems = true, onSelect,
+  searchSlot, filterSlot, emptyState, showUnsellable = false, currencySymbol, className, ...viewProps
+}: ProductTableProps): JSX.Element {
+  // Without a ConnectorProvider, custom columns can render without traits.
+  let traits: ReturnType<typeof useProductTraits> | undefined;
+  try {
+    traits = useProductTraits();
+  } catch {
+    traits = undefined;
+  }
+  const context = useTraitContext();
+  const resolvedColumns = useMemo(() => columns ?? (traits
+    ? defaultProductColumns(traits, context, { currencySymbol }) : []), [columns, traits, context, currencySymbol]);
+  const [internalSort, setInternalSort] = useState(defaultSort);
+  const activeSort = sort === undefined ? internalSort : sort;
+  const visibleItems = showUnsellable || !traits ? items : items.filter((item) => traits!.isSellable(item));
+  const overlaidItems = useStockOverlaid(visibleItems);
+  const rows = sortItems ? sortProducts([...overlaidItems], activeSort,
+    (doc, field) => resolvedColumns.find((column) => column.id === field)?.sortValue?.(doc)) : overlaidItems;
+
+  const changeSort = (id: string) => {
+    const next: ProductSort | null = activeSort?.field !== id ? { field: id, dir: 'asc' }
+      : activeSort.dir === 'asc' ? { field: id, dir: 'desc' } : null;
+    if (sort === undefined) setInternalSort(next);
+    onSortChange?.(next);
+  };
+
+  return (
+    <VStack space="none" className={cn('flex-1', className)} {...viewProps}>
+      {searchSlot && <View className="px-3 py-2">{searchSlot}</View>}
+      {filterSlot && <View className="px-3 pb-2">{filterSlot}</View>}
+      {rows.length ? (
+        <Table className="flex-1">
+          <TableHeader>
+            <TableRow>
+              {resolvedColumns.map((column) => (
+                <TableHead key={column.id} style={{ flex: column.flex ?? 1 }}
+                  {...(column.sortValue ? { 'aria-sort': activeSort?.field === column.id
+                    ? (activeSort.dir === 'asc' ? 'ascending' : 'descending') : 'none' } : {})}>
+                  {column.sortValue ? (
+                    <Pressable accessibilityRole="button" accessibilityLabel={'Sort by ' + column.header}
+                      testID={'product-table-sort-' + column.id} onPress={() => changeSort(column.id)}>
+                      <Text>{column.header}{activeSort?.field === column.id ? (activeSort.dir === 'asc' ? ' ▲' : ' ▼') : ''}</Text>
+                    </Pressable>
+                  ) : <Text>{column.header}</Text>}
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody className="flex-1">
+            <FlatList
+              data={rows}
+              keyExtractor={(item, index) => String(item.id ?? index)}
+              initialNumToRender={INITIAL_ROWS}
+              maxToRenderPerBatch={BATCH_ROWS}
+              windowSize={WINDOW_SIZE}
+              renderItem={({ item, index }) => {
+                const key = String(item.id ?? index);
+                const row = (
+                  <TableRow testID={onSelect ? undefined : 'product-row-' + key}>
+                    {resolvedColumns.map((column) => (
+                      <TableCell key={column.id} style={{ flex: column.flex ?? 1 }}>{column.render(item)}</TableCell>
+                    ))}
+                  </TableRow>
+                );
+                return onSelect ? (
+                  <Pressable accessibilityRole="button" testID={'product-row-' + key} onPress={() => onSelect(item)}>
+                    {row}
+                  </Pressable>
+                ) : row;
+              }}
+            />
+          </TableBody>
+        </Table>
+      ) : emptyState ?? null}
+    </VStack>
+  );
+}

package/src/product/view-toggle.tsx

@@ -0,0 +1,31 @@
+import type { JSX } from 'react';
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+import { cn } from '@tallyui/theme';
+import type { CatalogueView } from '@tallyui/pos';
+
+export interface ViewToggleProps extends Omit<ViewProps, 'children'> {
+  value: CatalogueView;
+  onChange: (view: CatalogueView) => void;
+  /** Default { grid: 'Grid', table: 'Table' }. */
+  labels?: { grid?: string; table?: string };
+  className?: string;
+}
+
+export function ViewToggle({ value, onChange, labels, className, ...viewProps }: ViewToggleProps): JSX.Element {
+  return (
+    <View {...viewProps} role="radiogroup" accessibilityLabel="View" testID="view-toggle"
+      className={cn('flex-row self-start overflow-hidden rounded-md border border-border', className)}>
+      {(['grid', 'table'] as const).map((view) => {
+        const selected = value === view;
+        const label = labels?.[view] ?? (view === 'grid' ? 'Grid' : 'Table');
+        return (
+          <Pressable key={view} role="radio" aria-checked={selected} testID={`view-toggle-${view}`}
+            accessibilityLabel={label} onPress={() => { if (!selected) onChange(view); }}
+            className={cn('px-3 py-2', selected ? 'bg-primary' : 'bg-card')}>
+            <Text className={cn('text-sm font-medium', selected ? 'text-primary-foreground' : 'text-foreground')}>{label}</Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/src/sale/catalogue.tsx

@@ -1,13 +1,14 @@
-import { useEffect, useMemo, useState, type ReactNode } from 'react';
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { Pressable, Text, View } from 'react-native';
-import { useStockOverlaid, useStockOverlayAsOf, type ProductTraits } from '@tallyui/core';
-import { catalogueEntries, findEntryByCode, searchProducts, variantPriceLabel, type CatalogueEntry } from '@tallyui/pos';
-import { ProductGrid, ProductImage, ProductPrice, ProductStockBadge, ProductTitle } from '../product';
+import { useStockOverlaid, useStockOverlayAsOf, type ProductTraits, type ProductCategory } from '@tallyui/core';
+import { catalogueEntries, findEntryByCode, searchProducts, variantPriceLabel, sortProducts, productSortValue,
+  catalogueViewReducer, normalizeCatalogueViewState, resolveGridColumns, DEFAULT_CATALOGUE_VIEW_STATE,
+  listCategories, inCategory,
+  type CatalogueEntry, type CatalogueViewState, type CatalogueViewAction } from '@tallyui/pos';
+import { ProductGrid, ProductImage, ProductPrice, ProductStockBadge, ProductTitle, ProductTable, ViewToggle, CategoryNav } from '../product';
 import { SearchInput } from '../input';
 import { VStack } from '../ui';
 
-// Keep product names readable and touch targets at least 160 px wide where two columns fit.
-const MIN_TILE_WIDTH = 160;
 const STOCK_LABEL = {
   in_stock: 'In Stock', out_of_stock: 'Out of Stock', backorder: 'On Backorder', unknown: 'Unknown',
 };
@@ -32,7 +33,8 @@ function laterOf(a: Date | null | undefined, b: Date | null | undefined): Date |
   return a.getTime() >= b.getTime() ? a : b;
 }
 
-export function Catalogue<Doc>({ products, traits, currency, onSelect, statusText, statusAccessory, lastSyncedAt, loading, pullError, lastStockCheckAt, hour12, minCodeLength }: {
+export function Catalogue<Doc>({ products, traits, currency, onSelect, statusText, statusAccessory, lastSyncedAt, loading, pullError, lastStockCheckAt, hour12, minCodeLength,
+  viewState, defaultViewState, loadViewState, saveViewState, onViewStateError, onStateChange, showViewToggle = false, items, onQueryChange, showCategoryNav = false, categories }: {
   products: Doc[];
   traits: ProductTraits<Doc>;
   currency: string;
@@ -58,11 +60,80 @@ export function Catalogue<Doc>({ products, traits, currency, onSelect, statusTex
    * search instead of doing a code lookup. A scanner's timing threshold is the app's own concern,
    * in its unfocused wedge listener — not this prop's job. */
   minCodeLength?: number;
+  /** Controlled view state; changes are reported through onStateChange. */
+  viewState?: CatalogueViewState;
+  /** Uncontrolled initial state, merged over DEFAULT_CATALOGUE_VIEW_STATE. */
+  defaultViewState?: Partial<CatalogueViewState>;
+  /** App-owned stored state, read once on mount in uncontrolled mode. */
+  loadViewState?: () => unknown | Promise<unknown>;
+  /** Saves cashier changes, never loads; uncontrolled only. */
+  saveViewState?: (state: CatalogueViewState) => void | Promise<void>;
+  /** Load/save errors; swallowed when omitted. */
+  onViewStateError?: (error: unknown) => void;
+  /** Loaded state or a cashier's next state (requested state when controlled). */
+  onStateChange?: (state: CatalogueViewState) => void;
+  /** Show the grid/table toggle in the header. Default false. */
+  showViewToggle?: boolean;
+  /** Show the category nav in the header. Default false. */
+  showCategoryNav?: boolean;
+  /** Replaces the categories derived from the listed products. */
+  categories?: ProductCategory[];
+  /** App-filtered, sorted list shown as given; products still drives scanning and variant choices. */
+  items?: Doc[];
+  /** Search text on every input change, for apps that filter items themselves. */
+  onQueryChange?: (query: string) => void;
 }) {
+  const [initial] = useState<{
+    state: CatalogueViewState; loaded?: CatalogueViewState; pending?: Promise<unknown>; failed?: boolean; error?: unknown;
+  }>(() => {
+    const state = normalizeCatalogueViewState({ ...DEFAULT_CATALOGUE_VIEW_STATE, ...defaultViewState });
+    if (viewState !== undefined || !loadViewState) return { state };
+    try {
+      const value = loadViewState();
+      if (value instanceof Promise) return { state, pending: value };
+      const loaded = normalizeCatalogueViewState(value, state);
+      return { state: loaded, loaded };
+    } catch (error) {
+      return { state, failed: true, error };
+    }
+  });
+  const [internalState, setInternalState] = useState(initial.state);
+  const state = viewState ?? internalState;
+  const cashierChanged = useRef(false);
+  useEffect(() => {
+    let mounted = true;
+    if (initial.loaded) onStateChange?.(initial.loaded);
+    if (initial.failed) onViewStateError?.(initial.error);
+    initial.pending?.then((value) => {
+      if (!mounted || cashierChanged.current) return;
+      const loaded = normalizeCatalogueViewState(value, initial.state);
+      setInternalState(loaded);
+      onStateChange?.(loaded);
+    }, (error) => { if (mounted) onViewStateError?.(error); });
+    return () => { mounted = false; };
+  }, [initial]);
+
+  function changeState(action: CatalogueViewAction) {
+    const next = catalogueViewReducer(state, action);
+    if (next === state) return;
+    cashierChanged.current = true;
+    if (viewState !== undefined) { onStateChange?.(next); return; }
+    setInternalState(next);
+    onStateChange?.(next);
+    try {
+      Promise.resolve(saveViewState?.(next)).catch((error) => onViewStateError?.(error));
+    } catch (error) {
+      onViewStateError?.(error);
+    }
+  }
+
   const isLoading = loading ?? (lastSyncedAt === null && pullError == null);
   // Idempotent (the adapter's overlay returns just the fields the stock map sets), so an app that already
   // merges the overlay itself keeps working, and can drop its own merge.
   const shown = useStockOverlaid(products) as Doc[];
+  const categoryList = useMemo(() => categories ?? listCategories(shown, traits), [categories, shown, traits]);
+  const activeCategory = showCategoryNav ? categoryList.find((category) => category.id === state.categoryId) : undefined;
+  const suppliedItems = useStockOverlaid(items ?? products) as Doc[];
   const overlayAsOf = useStockOverlayAsOf();
   const parsedOverlayAsOf = overlayAsOf ? new Date(overlayAsOf) : undefined;
   const validOverlayAsOf = parsedOverlayAsOf && !isNaN(parsedOverlayAsOf.getTime()) ? parsedOverlayAsOf : undefined;
@@ -72,10 +143,14 @@ export function Catalogue<Doc>({ products, traits, currency, onSelect, statusTex
   // from the current entries below, so an open chooser shows each reconcile pass as it lands.
   const [chooserId, setChooserId] = useState<string | null>(null);
   const [width, setWidth] = useState(0);
-  // ProductGrid has 4 px padding on each side of the content and each cell.
-  const columns = Math.max(2, Math.min(6, Math.floor((width - 8) / (MIN_TILE_WIDTH + 8))));
+  const columns = resolveGridColumns(state.gridColumns, width);
   const entries = useMemo(() => catalogueEntries(shown, traits, { currency }), [shown, traits, currency]);
-  const results = useMemo(() => searchProducts(shown, query, traits), [shown, query, traits]);
+  const results = useMemo(() => {
+    if (items !== undefined) return suppliedItems;
+    const filtered = searchProducts(activeCategory
+      ? shown.filter((doc) => inCategory(doc, activeCategory.id, traits)) : shown, query, traits);
+    return state.sort ? sortProducts(filtered, state.sort, (doc, field) => productSortValue(doc, field, traits, { currency })) : filtered;
+  }, [items, suppliedItems, shown, query, traits, state.sort, currency, showCategoryNav, activeCategory]);
   const choices = useMemo(() => (chooserId === null ? []
     : entries.filter((entry) => traits.getId(entry.product) === chooserId)), [entries, chooserId, traits]);
   // A product that leaves the catalogue (a resync, or no longer sellable) closes its chooser.
@@ -86,23 +161,38 @@ export function Catalogue<Doc>({ products, traits, currency, onSelect, statusTex
     setChooserId(null);
   }
 
+  function selectProduct(product: Doc) {
+    const variants = entries.filter((entry) => traits.getId(entry.product) === traits.getId(product));
+    if (variants.length === 1) select(variants[0]);
+    else setChooserId(traits.getId(product));
+  }
+
+  const emptyState = <Text className="mt-10 text-center text-sm text-muted-foreground">
+    {query.trim() ? `No products match "${query.trim()}".` : activeCategory ? `No products in ${activeCategory.name}.`
+      : isLoading ? 'Loading products…' : 'No products yet.'}
+  </Text>;
+
   return (
     <View className="flex-1" onLayout={(event) => setWidth(event.nativeEvent.layout.width)}>
       <View className="gap-2 border-b border-border bg-card px-4 pb-3 pt-3">
-        <SearchInput value={query} onChangeText={setQuery} placeholder="Search or scan barcode / SKU" autoFocus
+        <SearchInput value={query} onChangeText={(text) => { setQuery(text); onQueryChange?.(text); }} placeholder="Search or scan barcode / SKU" autoFocus
           onSubmitEditing={() => {
             if (minCodeLength && query.trim().length < minCodeLength) return;
             const entry = findEntryByCode(entries, query);
             if (entry) { select(entry); setQuery(''); }
           }} />
-        {(statusText || statusAccessory) ? (
+        {(statusText || statusAccessory || showViewToggle) ? (
           <View testID="catalogue-status-row" className="flex-row items-center gap-2">
             {statusText ? <Text className="flex-1 text-xs text-muted-foreground" numberOfLines={statusAccessory ? 1 : undefined}>
               {statusText}{query.trim() ? ` · ${results.length.toLocaleString()} matching` : ''}
             </Text> : null}
             {statusAccessory}
+            {showViewToggle ? <ViewToggle value={state.view} onChange={(view) => changeState({ type: 'setView', view })} /> : null}
           </View>
         ) : null}
+        {showCategoryNav ? <CategoryNav categories={[{ id: '', name: 'All products' }, ...categoryList]}
+          selectedId={activeCategory?.id ?? ''}
+          onSelect={(id) => changeState({ type: 'setCategory', categoryId: id === '' ? null : id })} /> : null}
         {choices.length > 0 ? (
           <View accessibilityLabel="Choose variant" className="gap-2">
             {choices.map((entry) => (
@@ -120,16 +210,15 @@ export function Catalogue<Doc>({ products, traits, currency, onSelect, statusTex
           </View>
         ) : null}
       </View>
-      <ProductGrid items={results} numColumns={columns}
+      {state.view === 'table' ? (
+        <ProductTable items={results} sort={state.sort} onSortChange={(sort) => changeState({ type: 'setSort', sort })}
+          sortItems={false} onSelect={selectProduct} emptyState={emptyState} />
+      ) : <ProductGrid items={results} numColumns={columns}
         renderItem={(product: Doc) => (
           // TallyUI's ProductCard has no children slot, so the tile is composed directly here
           // (same structure/classes as ProductCard) to add the stock badge as a fourth child,
           // inside the card and centred with the rest, rather than adding a slot to ProductCard (out of scope for TV6b).
-          <Pressable accessibilityRole="button" testID={`product-tile-${traits.getName(product)}`} onPress={() => {
-            const variants = entries.filter((entry) => entry.product === product);
-            if (variants.length === 1) select(variants[0]);
-            else setChooserId(traits.getId(product));
-          }}>
+          <Pressable accessibilityRole="button" testID={`product-tile-${traits.getName(product)}`} onPress={() => selectProduct(product)}>
             <VStack space="sm" className="items-center rounded-lg border border-border bg-card p-3">
               <ProductImage doc={product} size={80} className="rounded-md" />
               <ProductTitle doc={product} className="text-sm" numberOfLines={2} />
@@ -138,9 +227,7 @@ export function Catalogue<Doc>({ products, traits, currency, onSelect, statusTex
             </VStack>
           </Pressable>
         )}
-        emptyState={<Text className="mt-10 text-center text-sm text-muted-foreground">
-          {query.trim() ? `No products match "${query.trim()}".` : isLoading ? 'Loading products…' : 'No products yet.'}
-        </Text>} />
+        emptyState={emptyState} />}
     </View>
   );
 }