@carto/ps-react-ui 4.9.1 → 4.11.1

package/src/chat/use-typewriter.ts

@@ -0,0 +1,82 @@
+import { useEffect, useRef, useState } from 'react'
+
+interface UseTypewriterOptions {
+  /** Characters revealed per second (default: `500`). */
+  speed?: number
+  /** When true on mount, skip the animation and reveal the full text immediately. */
+  skipAnimation?: boolean
+}
+
+interface UseTypewriterResult {
+  /** The portion of `fullText` revealed so far. */
+  displayedText: string
+  /** `true` while characters are still being revealed. */
+  isTyping: boolean
+}
+
+/**
+ * Reveals a string character-by-character at a steady rate via
+ * `requestAnimationFrame`. Useful for smoothing out bursty WebSocket-streamed
+ * agent message text — pair it with `ChatAgentMessage`.
+ *
+ * @example
+ * ```tsx
+ * const { displayedText, isTyping } = useTypewriter(message)
+ * return (
+ *   <ChatAgentMessage>
+ *     <Markdown>{displayedText}</Markdown>
+ *     {isTyping ? <Cursor /> : null}
+ *   </ChatAgentMessage>
+ * )
+ * ```
+ */
+export function useTypewriter(
+  fullText: string,
+  options: UseTypewriterOptions = {},
+): UseTypewriterResult {
+  const { speed = 500, skipAnimation = false } = options
+
+  const skipRef = useRef(skipAnimation)
+
+  const [charIndex, setCharIndex] = useState(() =>
+    skipRef.current ? fullText.length : 0,
+  )
+
+  useEffect(() => {
+    if (skipRef.current) {
+      setCharIndex(fullText.length)
+      return
+    }
+
+    if (charIndex >= fullText.length) {
+      return
+    }
+
+    const msPerChar = 1000 / speed
+    let rafId: number
+    let lastTime: number | null = null
+
+    function tick(timestamp: number) {
+      lastTime ??= timestamp
+
+      const elapsed = timestamp - lastTime
+      const charsToAdd = Math.floor(elapsed / msPerChar)
+
+      if (charsToAdd > 0) {
+        lastTime = timestamp
+        setCharIndex((prev) => Math.min(prev + charsToAdd, fullText.length))
+      }
+
+      rafId = requestAnimationFrame(tick)
+    }
+
+    rafId = requestAnimationFrame(tick)
+
+    return () => cancelAnimationFrame(rafId)
+  }, [fullText, charIndex, speed])
+
+  return {
+    displayedText: fullText.slice(0, charIndex),
+    isTyping: charIndex < fullText.length,
+  }
+}

package/src/components/copy-button/copy-button.test.tsx

@@ -0,0 +1,41 @@
+import { describe, test, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { CopyButton } from './copy-button'
+
+vi.mock('@carto/ps-utils', () => ({
+  copy: vi.fn(() => Promise.resolve()),
+}))
+
+describe('CopyButton', () => {
+  test('renders copy button', () => {
+    render(
+      <CopyButton copyText='hello' onSuccess={vi.fn()} onError={vi.fn()} />,
+    )
+    expect(screen.getByRole('button')).toBeTruthy()
+  })
+
+  test('renders with custom aria-label', () => {
+    render(
+      <CopyButton
+        copyText='hello'
+        onSuccess={vi.fn()}
+        onError={vi.fn()}
+        aria-label='Copy response'
+      />,
+    )
+    expect(screen.getByLabelText('Copy response')).toBeTruthy()
+  })
+
+  test('calls copy utility when clicked', async () => {
+    const { copy } = await import('@carto/ps-utils')
+    render(
+      <CopyButton
+        copyText='hello world'
+        onSuccess={vi.fn()}
+        onError={vi.fn()}
+      />,
+    )
+    fireEvent.click(screen.getByRole('button'))
+    expect(copy).toHaveBeenCalledWith('hello world')
+  })
+})

package/src/components/copy-button/copy-button.tsx

@@ -0,0 +1,31 @@
+import { IconButton } from '@mui/material'
+import { ContentCopyOutlined } from '@mui/icons-material'
+import type { CopyButtonProps } from './types'
+import { copy } from '@carto/ps-utils'
+
+export function CopyButton({
+  copyText,
+  onSuccess,
+  onError,
+  'aria-label': ariaLabel,
+  ...props
+}: CopyButtonProps) {
+  async function onCopy() {
+    try {
+      await copy(copyText)
+      onSuccess?.()
+    } catch (err) {
+      onError?.(err as Error)
+    }
+  }
+  return (
+    <IconButton
+      size='small'
+      onClick={() => void onCopy()}
+      aria-label={ariaLabel ?? 'Copy'}
+      {...props}
+    >
+      <ContentCopyOutlined fontSize='small' />
+    </IconButton>
+  )
+}

package/src/components/copy-button/types.ts

@@ -0,0 +1,10 @@
+import type { IconButtonProps } from '@mui/material/IconButton'
+
+export interface CopyButtonProps extends Omit<
+  IconButtonProps,
+  'onError' | 'onClick'
+> {
+  copyText: string
+  onSuccess?: () => void
+  onError?: (err: Error) => void
+}

package/src/components/index.ts

@@ -62,3 +62,6 @@ export type { BasemapsUIProps } from './basemaps/types'
 
 export { Tooltip, setTooltipEnterDelay } from './tooltip/tooltip'
 export { SmartTooltip } from './smart-tooltip/smart-tooltip'
+
+export type { CopyButtonProps } from './copy-button/types'
+export { CopyButton } from './copy-button/copy-button'

package/src/widgets/echart/types.ts

@@ -2,7 +2,7 @@ import type { EChartsOption } from 'echarts'
 import type * as echarts from 'echarts'
 import type { BaseWidgetState } from '../stores/types'
 import type { Ref, RefObject } from 'react'
-import { theme as CartoTheme } from '../../theme'
+import { theme as CartoTheme } from '@carto/meridian-ds/theme'
 
 export type EchartOptionsProps = EChartsOption
 

package/src/widgets-v2/actions/brush-toggle/brush-toggle.tsx

@@ -1,6 +1,6 @@
 import { useEffect, type ComponentType } from 'react'
 import { IconButton, type SvgIconProps } from '@mui/material'
-import HighlightAltIcon from '@mui/icons-material/HighlightAlt'
+import { HighlightAlt as HighlightAltIcon } from '@mui/icons-material'
 import { Tooltip } from '../../../components'
 import {
   useEchartInstance,

package/src/widgets-v2/actions/change-column/sortable-column-item.tsx

@@ -1,7 +1,7 @@
 import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import { ListItemText, MenuItem } from '@mui/material'
-import DragIndicatorIcon from '@mui/icons-material/DragIndicator'
+import { DragIndicator as DragIndicatorIcon } from '@mui/icons-material'
 import type { ComponentType, ReactNode } from 'react'
 import type { SvgIconProps } from '@mui/material'
 import { styles } from './style'

package/src/widgets-v2/actions/download/download.tsx

@@ -8,7 +8,7 @@ import {
   MenuItem,
   type SvgIconProps,
 } from '@mui/material'
-import DownloadIcon from '@mui/icons-material/FileDownload'
+import { FileDownload as DownloadIcon } from '@mui/icons-material'
 import { Tooltip } from '../../../components'
 import { triggerLinkDownload } from './exports'
 import type { DownloadItem } from './types'

package/src/widgets-v2/actions/download/icons.tsx

@@ -1,5 +1,5 @@
 import { SvgIcon, type SvgIconProps } from '@mui/material'
-import ImageOutlined from '@mui/icons-material/ImageOutlined'
+import { ImageOutlined } from '@mui/icons-material'
 
 /**
  * Generic "image" glyph used for the PNG download item. Wraps MUI's

package/src/widgets-v2/actions/fullscreen/fullscreen.tsx

@@ -15,9 +15,9 @@ import {
   Typography,
   type SvgIconProps,
 } from '@mui/material'
-import FullscreenIcon from '@mui/icons-material/Fullscreen'
-import FullscreenExitIcon from '@mui/icons-material/FullscreenExit'
-import CloseIcon from '@mui/icons-material/Close'
+import { Fullscreen as FullscreenIcon } from '@mui/icons-material'
+import { FullscreenExit as FullscreenExitIcon } from '@mui/icons-material'
+import { Close as CloseIcon } from '@mui/icons-material'
 import { Tooltip } from '../../../components'
 import { getWidgetStore, useWidget, useWidgetId } from '../../stores'
 import { DEFAULT_FULLSCREEN_LABELS, type FullScreenLabels } from './labels'

package/src/widgets-v2/actions/index.ts

@@ -15,6 +15,14 @@ export {
   type StackToggleProps,
   type StackToggleLabels,
 } from './stack-toggle'
+export {
+  ShowAllToggle,
+  setShowAll,
+  SHOW_ALL_ID,
+  DEFAULT_SHOW_ALL_LABELS,
+  type ShowAllToggleProps,
+  type ShowAllLabels,
+} from './show-all'
 export {
   ZoomToggle,
   addZoom,

package/src/widgets-v2/actions/lock-selection/lock-selection.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, type ComponentType } from 'react'
 import { IconButton, type SvgIconProps } from '@mui/material'
-import LockIcon from '@mui/icons-material/Lock'
-import LockOpenIcon from '@mui/icons-material/LockOpen'
+import { Lock as LockIcon } from '@mui/icons-material'
+import { LockOpen as LockOpenIcon } from '@mui/icons-material'
 import { Tooltip } from '../../../components'
 import { useTransform, useWidgetId } from '../../stores'
 import type { TransformPair } from '../../stores'

package/src/widgets-v2/actions/relative-data/relative-data.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, type ComponentType } from 'react'
 import { IconButton, type SvgIconProps } from '@mui/material'
-import PercentIcon from '@mui/icons-material/Percent'
+import { Percent as PercentIcon } from '@mui/icons-material'
 import { Tooltip } from '../../../components'
 import {
   getWidgetStore,

package/src/widgets-v2/actions/searcher/searcher-toggle.tsx

@@ -1,6 +1,6 @@
 import { useCallback, type ComponentType } from 'react'
 import { IconButton, type SvgIconProps } from '@mui/material'
-import SearchIcon from '@mui/icons-material/Search'
+import { Search as SearchIcon } from '@mui/icons-material'
 import { Tooltip } from '../../../components'
 import {
   getWidgetStore,

package/src/widgets-v2/actions/searcher/searcher.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { IconButton, InputAdornment, TextField } from '@mui/material'
-import SearchIcon from '@mui/icons-material/Search'
-import ClearIcon from '@mui/icons-material/Clear'
+import { Search as SearchIcon } from '@mui/icons-material'
+import { Clear as ClearIcon } from '@mui/icons-material'
 import { debounce } from '@carto/ps-utils'
 import { getWidgetStore, useWidget, useWidgetId } from '../../stores'
 import { setSearcherText } from './searcher-toggle'

package/src/widgets-v2/actions/show-all/index.ts

@@ -0,0 +1,7 @@
+export {
+  ShowAllToggle,
+  setShowAll,
+  SHOW_ALL_ID,
+  type ShowAllToggleProps,
+} from './show-all'
+export { DEFAULT_SHOW_ALL_LABELS, type ShowAllLabels } from './labels'

package/src/widgets-v2/actions/show-all/labels.ts

@@ -0,0 +1,8 @@
+export interface ShowAllLabels {
+  /** Tooltip + aria-label for the collapse (✕) button shown while expanded. */
+  toggle: string
+}
+
+export const DEFAULT_SHOW_ALL_LABELS: ShowAllLabels = {
+  toggle: 'Show less',
+}

package/src/widgets-v2/actions/show-all/show-all.test.tsx

@@ -0,0 +1,50 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { Provider } from '../../provider/widget-provider'
+import { clearAllWidgetStores, getWidgetStore } from '../../stores'
+import { ShowAllToggle, setShowAll, SHOW_ALL_ID } from './show-all'
+
+beforeEach(() => clearAllWidgetStores())
+afterEach(() => clearAllWidgetStores())
+
+describe('setShowAll', () => {
+  it('writes the flag under transformStates[SHOW_ALL_ID]', () => {
+    render(
+      <Provider id='sa1' data={[]}>
+        <span />
+      </Provider>,
+    )
+    setShowAll('sa1', true)
+    expect(
+      getWidgetStore('sa1').getState().transformStates[SHOW_ALL_ID]?.enabled,
+    ).toBe(true)
+    setShowAll('sa1', false)
+    expect(
+      getWidgetStore('sa1').getState().transformStates[SHOW_ALL_ID]?.enabled,
+    ).toBe(false)
+  })
+})
+
+describe('<ShowAllToggle>', () => {
+  it('renders a collapse (✕) button', () => {
+    render(
+      <Provider id='sa2' data={[]}>
+        <ShowAllToggle />
+      </Provider>,
+    )
+    expect(screen.getByRole('button', { name: 'Show less' })).toBeTruthy()
+  })
+
+  it('clears the flag on click (collapses)', () => {
+    render(
+      <Provider id='sa3' data={[]}>
+        <ShowAllToggle />
+      </Provider>,
+    )
+    setShowAll('sa3', true)
+    fireEvent.click(screen.getByRole('button', { name: 'Show less' }))
+    expect(
+      getWidgetStore('sa3').getState().transformStates[SHOW_ALL_ID]?.enabled,
+    ).toBe(false)
+  })
+})

package/src/widgets-v2/actions/show-all/show-all.tsx

@@ -0,0 +1,72 @@
+import { type ComponentType } from 'react'
+import { IconButton, type SvgIconProps } from '@mui/material'
+import { Close as CloseIcon } from '@mui/icons-material'
+import { Tooltip } from '../../../components'
+import { getWidgetStore, useWidgetId } from '../../stores'
+import { DEFAULT_SHOW_ALL_LABELS, type ShowAllLabels } from './labels'
+import { styles } from './style'
+
+/**
+ * The `show-all` flag is a pure UI signal (no data/config transform): the
+ * Category overflow row writes it `true` via {@link setShowAll}, the
+ * composer reads it with `useTransformEnabled(id, SHOW_ALL_ID)` to drop the
+ * row cap, and this button writes it back `false` to collapse. Stored under
+ * `transformStates` so `useTransformEnabled` can observe it like any other
+ * action flag — but it never registers a pipeline transform, so toggling it
+ * never re-runs the data pipeline.
+ */
+export const SHOW_ALL_ID = 'show-all'
+
+export interface ShowAllToggleProps {
+  labels?: Partial<ShowAllLabels>
+  icon?: ComponentType<SvgIconProps>
+  iconProps?: SvgIconProps
+}
+
+/**
+ * Collapse (✕) affordance shown while a widget is expanded into its
+ * "show all" state. Clicking it clears the `show-all` flag, returning the
+ * widget to its capped view. Mount it conditionally (only while the flag is
+ * set) so it doesn't occupy a `Widget.Toolbox` visibility-budget slot when
+ * the widget is collapsed.
+ */
+export function ShowAllToggle({
+  labels,
+  icon: Icon = CloseIcon,
+  iconProps,
+}: ShowAllToggleProps) {
+  const id = useWidgetId()
+  const _labels = { ...DEFAULT_SHOW_ALL_LABELS, ...labels }
+
+  return (
+    <Tooltip title={_labels.toggle}>
+      <IconButton
+        size='small'
+        aria-label={_labels.toggle}
+        aria-pressed
+        onClick={() => setShowAll(id, false)}
+        sx={styles.toggle}
+      >
+        <Icon fontSize='small' {...iconProps} />
+      </IconButton>
+    </Tooltip>
+  )
+}
+
+/**
+ * Imperatively writes the `show-all` flag into the widget store. Mirrors
+ * {@link setSearcherText} — used by the Category overflow row (to expand)
+ * and the {@link ShowAllToggle} button (to collapse) without routing through
+ * a re-rendered subscription.
+ */
+export function setShowAll(widgetId: string, value: boolean): void {
+  getWidgetStore(widgetId).setState((s) => ({
+    transformStates: {
+      ...s.transformStates,
+      [SHOW_ALL_ID]: {
+        ...s.transformStates[SHOW_ALL_ID],
+        enabled: value,
+      },
+    },
+  }))
+}

package/src/widgets-v2/actions/show-all/style.ts

@@ -0,0 +1,8 @@
+import type { SxProps, Theme } from '@mui/material'
+
+export const styles = {
+  toggle: {
+    p: 0.5,
+    '& .MuiSvgIcon-root': { fontSize: 20 },
+  },
+} satisfies Record<string, SxProps<Theme>>

package/src/widgets-v2/actions/stack-toggle/stack-toggle.tsx

@@ -1,6 +1,6 @@
 import { type ComponentType } from 'react'
 import { IconButton, type SvgIconProps } from '@mui/material'
-import StackedBarChartIcon from '@mui/icons-material/StackedBarChart'
+import { StackedBarChart as StackedBarChartIcon } from '@mui/icons-material'
 import { Tooltip } from '../../../components'
 import { useSingleTransform, useWidgetId } from '../../stores'
 import { addStack } from './transforms'

package/src/widgets-v2/actions/zoom-toggle/zoom-toggle.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, type ComponentType } from 'react'
 import { IconButton, useTheme, type SvgIconProps } from '@mui/material'
-import ZoomInIcon from '@mui/icons-material/ZoomIn'
+import { ZoomIn as ZoomInIcon } from '@mui/icons-material'
 import { Tooltip } from '../../../components'
 import {
   getEchartInstance,

package/src/widgets-v2/category/category-ui.test.tsx

@@ -48,15 +48,15 @@ describe('<CategoryUI>', () => {
       expect(screen.getAllByRole('button')).toHaveLength(12)
     })
 
-    it('default caps at 20 when data exceeds it → "Other (X more)" footer', () => {
+    it('default caps at 20 when data exceeds it → "Others <count>" footer', () => {
       const twentyFive = Array.from({ length: 25 }, (_, i) => ({
         name: `n${i}`,
         value: 25 - i,
       }))
       render(<CategoryUI data={[twentyFive]} />)
       expect(screen.getAllByRole('button')).toHaveLength(20)
-      expect(screen.getByText('Other')).toBeTruthy()
-      expect(screen.getByText('(5 more)')).toBeTruthy()
+      expect(screen.getByText('Others')).toBeTruthy()
+      expect(screen.getByText('5')).toBeTruthy()
     })
 
     it('maxItems=null → no cap, no scroll (canonical form)', () => {
@@ -70,7 +70,7 @@ describe('<CategoryUI>', () => {
       const { container } = render(
         <CategoryUI data={[twentyFive]} maxItems={null} />,
       )
-      expect(screen.queryByText('Other')).toBeNull()
+      expect(screen.queryByText('Others')).toBeNull()
       expect(screen.getAllByRole('button')).toHaveLength(25)
       const root = container.firstChild as HTMLElement
       const list = root.firstChild as HTMLElement
@@ -86,15 +86,31 @@ describe('<CategoryUI>', () => {
       render(
         <CategoryUI data={[twentyFive]} maxItems={Number.POSITIVE_INFINITY} />,
       )
-      expect(screen.queryByText('Other')).toBeNull()
+      expect(screen.queryByText('Others')).toBeNull()
       expect(screen.getAllByRole('button')).toHaveLength(25)
     })
 
-    it('slices to maxItems and shows "Other (X more)" footer', () => {
+    it('slices to maxItems and shows "Others <count>" footer', () => {
       render(<CategoryUI data={[oneToTwelve()]} maxItems={5} />)
       expect(screen.getAllByRole('button')).toHaveLength(5)
-      expect(screen.getByText('Other')).toBeTruthy()
-      expect(screen.getByText('(7 more)')).toBeTruthy()
+      expect(screen.getByText('Others')).toBeTruthy()
+      expect(screen.getByText('7')).toBeTruthy()
+    })
+
+    it('onShowAll makes the Other row a button that fires the callback', () => {
+      const onShowAll = vi.fn()
+      render(
+        <CategoryUI
+          data={[oneToTwelve()]}
+          maxItems={5}
+          onShowAll={onShowAll}
+        />,
+      )
+      // 5 category rows + the now-interactive "Others" row = 6 buttons.
+      const buttons = screen.getAllByRole('button')
+      expect(buttons).toHaveLength(6)
+      fireEvent.click(screen.getByText('Others'))
+      expect(onShowAll).toHaveBeenCalledTimes(1)
     })
 
     it('maxItems=0 is the no-cap-with-scroll sentinel: every row renders inside a fixed scroll viewport', () => {
@@ -107,7 +123,7 @@ describe('<CategoryUI>', () => {
         <CategoryUI data={[oneToTwelve()]} maxItems={0} />,
       )
       expect(screen.getAllByRole('button')).toHaveLength(12)
-      expect(screen.queryByText('Other')).toBeNull()
+      expect(screen.queryByText('Others')).toBeNull()
       expect(screen.queryByText(/more/)).toBeNull()
       // List has the scroll viewport inline style applied.
       const root = container.firstChild as HTMLElement
@@ -217,7 +233,7 @@ describe('<CategoryUI>', () => {
         />,
       )
       expect(screen.getByText('Others')).toBeTruthy()
-      expect(screen.getByText('(+9 hidden)')).toBeTruthy()
+      expect(screen.getByText('+9 hidden')).toBeTruthy()
     })
 
     it('large maxItems = no Other row', () => {

package/src/widgets-v2/category/category-ui.tsx

@@ -50,7 +50,7 @@ export interface CategoryUIProps {
    * Caps the number of visible category rows.
    *
    * - `undefined` (omitted) — caps at {@link DEFAULT_MAX_ITEMS} (20).
-   *   Surplus rows fold into a single italic "Other (X more)" footer.
+   *   Surplus rows fold into a single "Others <count>" footer row.
    *   `undefined` cannot mean "no cap" because it's consumed by the
    *   default-parameter syntax — pass `null` instead.
    * - positive finite N — same as the default but with a custom cap.
@@ -71,6 +71,13 @@ export interface CategoryUIProps {
   maxItems?: number | null
   /** Labels for the "Other" overflow row. `{count}` placeholder is replaced. */
   labels?: CategoryLabels
+  /**
+   * When provided, the "Other" overflow row becomes a button — clicking it
+   * fires `onShowAll`, which a composer typically wires to expand the widget
+   * (drop the row cap) so every category becomes reachable. When omitted the
+   * overflow row stays a static summary.
+   */
+  onShowAll?: () => void
   /** Manual override for the bar-width denominator. */
   maxOverride?: number
   /**
@@ -156,6 +163,7 @@ export function CategoryUI({
   series,
   maxItems = DEFAULT_MAX_ITEMS,
   labels,
+  onShowAll,
   maxOverride,
   size = 'small',
   stacked = false,
@@ -224,7 +232,7 @@ export function CategoryUI({
 
   // Three modes:
   //   * positive finite N (default `DEFAULT_MAX_ITEMS = 20` when prop
-  //     omitted): cap at N rows; surplus folds into "Other (X more)".
+  //     omitted): cap at N rows; surplus folds into "Others <count>".
   //   * `0`: no cap WITH scroll — every row renders, the list locks to a
   //     fixed viewport and scrolls internally. Composers use this to
   //     bypass pagination while the user is searching:
@@ -296,7 +304,7 @@ export function CategoryUI({
     <Box sx={styles.root}>
       <Box
         ref={listRefCallback}
-        sx={styles.list}
+        sx={scrollMode ? { ...styles.list, ...styles.listScroll } : styles.list}
         style={
           scrollMaxHeight !== undefined
             ? { maxHeight: scrollMaxHeight, overflowY: 'auto' }
@@ -378,6 +386,8 @@ export function CategoryUI({
             hiddenCount={hiddenCount}
             otherLabel={labels?.other}
             otherCountLabel={labels?.otherCount}
+            showAllLabel={labels?.showAll}
+            onShowAll={onShowAll}
           />
         )}
       </Box>

package/src/widgets-v2/category/category.test.tsx

@@ -96,7 +96,7 @@ describe('<Category> bridge', () => {
     // 3 visible rows + Other footer.
     expect(screen.getAllByRole('button')).toHaveLength(3)
     expect(screen.getByText('Rest')).toBeTruthy()
-    expect(screen.getByText('((3 hidden))')).toBeTruthy()
+    expect(screen.getByText('(3 hidden)')).toBeTruthy()
   })
 
   it('does NOT read `transformStates.searcher.enabled` from the store (composer-mediation contract)', () => {
@@ -119,7 +119,7 @@ describe('<Category> bridge', () => {
       </Provider>,
     )
     expect(screen.getAllByRole('button')).toHaveLength(3)
-    expect(screen.getByText('Other')).toBeTruthy()
+    expect(screen.getByText('Others')).toBeTruthy()
 
     // Flip the searcher flag in the store — bridge should NOT react.
     act(() => {
@@ -134,7 +134,7 @@ describe('<Category> bridge', () => {
 
     // Still capped, Other still there.
     expect(screen.getAllByRole('button')).toHaveLength(3)
-    expect(screen.getByText('Other')).toBeTruthy()
+    expect(screen.getByText('Others')).toBeTruthy()
   })
 
   it('respects maxItems=0 (no-cap sentinel) from the consumer', () => {
@@ -153,7 +153,7 @@ describe('<Category> bridge', () => {
     )
     // No cap → all rows render, Other footer is suppressed.
     expect(screen.getAllByRole('button')).toHaveLength(10)
-    expect(screen.queryByText('Other')).toBeNull()
+    expect(screen.queryByText('Others')).toBeNull()
   })
 
   it('forwards size="medium" through to the rendered bars', () => {