basalt-ui 1.25.0 → 1.27.0

package/src/connectivity/connectivity-indicator.tsx

@@ -8,7 +8,10 @@
  * @example
  * import { ConnectivityIndicator } from 'basalt-ui'
  *
- * <BasaltShell globalActions={<ConnectivityIndicator />} {...rest} />
+ * <BasaltShell
+ *   globalActions={[{ key: 'connectivity', node: <ConnectivityIndicator />, mobile: 'bar' }]}
+ *   {...rest}
+ * />
  */
 import { ActionIcon, Badge, Divider, Group, Popover, Stack, Text } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
@@ -172,7 +175,10 @@ const ICON_COLOR: Record<ConnectivityStatus, string> = {
  * ConnectivityIndicator — clickable wifi icon that opens a per-signal detail popover.
  *
  * @example
- * <BasaltShell globalActions={<ConnectivityIndicator />} {...rest} />
+ * <BasaltShell
+ *   globalActions={[{ key: 'connectivity', node: <ConnectivityIndicator />, mobile: 'bar' }]}
+ *   {...rest}
+ * />
  */
 export function ConnectivityIndicator() {
   const [opened, { open, toggle, close }] = useDisclosure(false)
@@ -195,13 +201,14 @@ export function ConnectivityIndicator() {
         <ActionIcon
           variant="transparent"
           color={ICON_COLOR[status]}
-          // A numeric size, not the named `"md"` — the theme's `ActionIcon.extend` `vars` (see
-          // `theme/index.ts`) now re-points a `size="md"` ActionIcon at the density-tracking control-
-          // height anchor (for a `size="md"` ActionIcon meant to match a `size="md"` Input/Button), so
-          // this plain toolbar icon must opt OUT with an explicit number to keep Mantine's own static
-          // `--ai-size-md` (28px at the 16px root) — unaffected by that override (`props.size` is a
-          // number here, never the literal string `'md'`) and by the density knob.
-          size={28}
+          // `ctl`, the control tier (`docs/CONTROLS-SPEC.md` §5) — this indicator's home is a header
+          // toolbar, and that is the tier a toolbar control is. It used to pin a literal `28` to opt
+          // OUT of the `size="md"` height (42px, sized for a form field), which was the right escape
+          // before the `ctl` tier existed; the cost was that the shell's globals rendered 2px short
+          // of every other control in the same 48px row. `--ai-size-ctl` is declared on `:root` by
+          // `cssVariablesResolver`, so this resolves with or without an enclosing `CtlSlot`, and it
+          // tracks the density knob like the rest of the tier.
+          size="ctl"
           onClick={toggle}
           onMouseEnter={scheduleOpen}
           onMouseLeave={scheduleClose}

package/src/content/index.ts

@@ -7,7 +7,9 @@
  * remark-gfm + rehype-sanitize + remend, all optional peers) with its fence-renderer registry,
  * `MermaidDiagram` (beautiful-mermaid, optional peer), the MDX
  * component map, the docs-page frame (`ArticleLayout`), overview cards (`ArticleCard`/
- * `ArticleGrid`), and the contextual-help drawer (`GuideLink`/`GuideDrawer`). See
+ * `ArticleGrid`), the contextual-help drawer (`GuideLink`/`GuideDrawer`), and a re-export of the
+ * three `basalt-ui/controls` filters an article list needs (`FilterSet`/`ViewTabs`/
+ * `MultiSelectFilter`, which replaced the controlled `ArticleFilterBar`). See
  * `agent/rules/basalt-content.md` for the full doctrine + the content-collections recipe.
  */
 export { Prose } from './prose'
@@ -69,8 +71,19 @@ export type { Article, ArticleFilterQuery, ArticleOrder } from './article-model'
 export { toArticleActions } from './article-actions'
 export type { ToArticleActionsOptions } from './article-actions'
 
-export { ArticleFilterBar } from './article-filter-bar'
-export type { ArticleFilterBarProps } from './article-filter-bar'
+// The article filter UI is no longer content's own: `ArticleFilterBar` (controlled,
+// `value`/`onChange`, its own responsive twin) was replaced by the store-bound controls of
+// `basalt-ui/controls` (`docs/CONTROLS-SPEC.md` §3, C2/C9). Re-exported here — not merely
+// documented as moved — so a content-only consumer that never imports `./controls` still gets the
+// three it needs from the surface it was already using. Both spellings are the same module: one
+// component, two import paths.
+export { FilterSet, MultiSelectFilter, ViewTabs } from '../controls'
+export type {
+  FilterSetProps,
+  MultiSelectFilterProps,
+  ViewTabsOption,
+  ViewTabsProps,
+} from '../controls'
 
 export { GuideDrawer, GuideLink } from './guide'
 export type { GuideDrawerProps, GuideLinkProps } from './guide'

package/src/content/prose.module.css

@@ -32,37 +32,16 @@
   margin-bottom: 0;
 }
 
-/* Fixed-header clearance so an anchor-jumped/TOC-navigated heading isn't hidden under a sticky
- * header. RESPONSIVE (docs/CONTENT-SPEC.md §5): BasaltShell's AppShell header itself switches
- * height at the `sm` breakpoint (`shell/index.tsx`'s `header={{ height: { base, sm } }}`), so the
- * clearance must too — the default below is the DESKTOP value (`>= sm`, the common path); the
- * `max-width: 47.99375em` override below swaps in the MOBILE value. `47.99375em` is Mantine's own
- * complement of a `min-width: 48em` breakpoint (`em(px - 0.1)` — verified against the installed
- * `@mantine/core`'s `MantineClasses.mjs`, the same formula behind `visibleFrom`/`hiddenFrom`), NOT
- * an independently hand-picked value — a plain `47.99em` leaves a viewport band (`47.99em` to just
- * under `48em`) matched by NEITHER this rule nor AppShell's own `(min-width: 48em)` override.
- * `48em` is a STATIC assumption, not a value this CSS module can read live: it is Mantine's default
- * `theme.breakpoints.sm` (unmodified by `baseTheme`, `theme/index.ts`), and `shell/index.tsx` reads
- * that theme value directly for its own `min-width` media query — but a media query condition
- * cannot resolve a CSS custom property (`@media (min-width: var(--x))` is not valid CSS), so this
- * static module has no way to follow a consumer's `createBasaltTheme(overrides)` that overrides
- * `breakpoints.sm`. A consumer doing so desyncs this file's breakpoint from AppShell's actual
- * header-switch point — the failure mode is a heading that scrolls to a clearance tuned for the
- * WRONG header on the mismatched viewport band, not a total breakage. Both values also assume
- * BasaltShell's own AppShell header heights — a `./content` consumer rendering Prose standalone (no
- * BasaltShell) overrides `--vx-space-sticky-header-clearance`/`-mobile` itself. */
+/* Sticky-header clearance for in-page anchors. One value on every viewport: since the
+ * controls waves the AppShell header is `appShellHeaderHeight` (48px) on phones too — the two-row
+ * mobile header and its `-mobile` clearance token are gone (docs/CONTROLS-SPEC.md §2.1, law C14).
+ * `--basalt-page-bar-h` (a sticky PageBar row 2, published by the shell) is added on top so a
+ * heading never lands under the filter row. A `./content` consumer rendering Prose standalone (no
+ * BasaltShell) overrides `--vx-space-sticky-header-clearance` itself. */
 .root h2,
 .root h3,
 .root h4 {
-  scroll-margin-top: var(--vx-space-sticky-header-clearance);
-}
-
-@media (max-width: 47.99375em) {
-  .root h2,
-  .root h3,
-  .root h4 {
-    scroll-margin-top: var(--vx-space-sticky-header-clearance-mobile);
-  }
+  scroll-margin-top: calc(var(--vx-space-sticky-header-clearance) + var(--basalt-page-bar-h, 0px));
 }
 
 /* Headings share family/weight/color across densities; size + margin differ below. */

package/src/content/prose.module.css.test.ts

@@ -15,7 +15,7 @@ import { describe, expect, it } from 'bun:test'
 
 const PROSE_CSS_PATH = resolve(dirname(fileURLToPath(import.meta.url)), 'prose.module.css')
 
-describe('prose.module.css — responsive sticky-header clearance split (Decision 3)', () => {
+describe('prose.module.css — sticky-header clearance (one header height, plus the PageBar row)', () => {
   const css = readFileSync(PROSE_CSS_PATH, 'utf8')
 
   // The first (unconditional) `.root h2, .root h3, .root h4 { scroll-margin-top: … }` rule in the
@@ -25,31 +25,15 @@ describe('prose.module.css — responsive sticky-header clearance split (Decisio
     /\.root h2,\s*\.root h3,\s*\.root h4\s*\{\s*scroll-margin-top:\s*([^;]+);\s*\}/,
   )
 
-  it('the base (non-media) rule clears the DESKTOP header', () => {
+  it('clears the header plus the sticky PageBar row on every viewport (one header height since C14)', () => {
     expect(baseRuleMatch).not.toBeNull()
-    expect(baseRuleMatch?.[1]).toBe('var(--vx-space-sticky-header-clearance)')
-  })
-
-  // Requires the literal `max-width: 47.99375em` query wrapping the rule — fails if the query is
-  // inverted to `min-width`, retuned to a different value, or the whole `@media` block is deleted.
-  const mediaBlockMatch = css.match(
-    /@media\s*\(max-width:\s*47\.99375em\)\s*\{[\s\S]*?\.root h2,\s*\.root h3,\s*\.root h4\s*\{\s*scroll-margin-top:\s*([^;]+);\s*\}\s*\}/,
-  )
-
-  it("the mobile override exists at Mantine's exact 48em min-width complement (47.99375em)", () => {
-    expect(mediaBlockMatch).not.toBeNull()
-  })
-
-  it('the media override clears the MOBILE header, not the desktop one (catches a var swap)', () => {
-    expect(mediaBlockMatch?.[1]).toBe('var(--vx-space-sticky-header-clearance-mobile)')
+    expect(baseRuleMatch?.[1]).toBe(
+      'calc(var(--vx-space-sticky-header-clearance) + var(--basalt-page-bar-h, 0px))',
+    )
   })
 
-  it('the base rule appears before the override in source order — both share (0,2,1) specificity, so a same-specificity tie resolves by source order regardless of the @media nesting; an override placed BEFORE the base rule would lose to it even while the media query matches', () => {
-    const baseIndex = css.indexOf('scroll-margin-top: var(--vx-space-sticky-header-clearance);')
-    const mobileIndex = css.indexOf(
-      'scroll-margin-top: var(--vx-space-sticky-header-clearance-mobile);',
-    )
-    expect(baseIndex).toBeGreaterThan(-1)
-    expect(mobileIndex).toBeGreaterThan(baseIndex)
+  it('has no mobile override — the -mobile clearance token no longer exists', () => {
+    expect(css).not.toContain('clearance-mobile')
+    expect(css).not.toContain('@media (max-width: 47.99375em)')
   })
 })

package/src/controls/actions.module.css

@@ -0,0 +1,62 @@
+/*
+ * `OverflowMenu` row chrome. Rows are `ctl`-tier (30px) on desktop and 44px below `sm`
+ * (`--vx-space-sheet-row-height`, law C15) — the mobile kebab IS the sheet, so there is no second
+ * component for the touch case.
+ */
+
+.menuItem {
+  min-height: calc(var(--vx-space-control-height-ctl) * var(--mantine-scale, 1));
+}
+
+/*
+ * Danger rows read the status token, not a Mantine shade — `--vx-bad-solid` resolves per color
+ * scheme, a pinned `red.6` does not (see the `mantine-shade-index` guard).
+ */
+.menuItemDanger {
+  color: var(--vx-bad-solid);
+}
+
+/* A `kind: 'custom'` row hosts the consumer's own node, so it only supplies the row box. */
+.customRow {
+  display: flex;
+  align-items: center;
+  min-height: calc(var(--vx-space-control-height-ctl) * var(--mantine-scale, 1));
+  padding: 0 var(--vx-space-row-inset-x);
+}
+
+@media (max-width: 47.99375em) {
+  .menuItem,
+  .customRow {
+    min-height: var(--vx-space-sheet-row-height);
+  }
+}
+
+/*
+ * A `kind: 'custom'` node's slot — see `BarEntry`'s doc. The whole point is the HEIGHT: basalt does
+ * not draw the node, so the only thing it can guarantee is the box it sits in. `inline-flex` +
+ * `align-items: center` centres a 20px Badge inside the 30px tier instead of letting it sit on the
+ * row's baseline, and `flex: none` keeps it out of the row's own shrink arithmetic.
+ */
+.customSlot {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  height: calc(var(--vx-space-control-height-ctl) * var(--mantine-scale, 1));
+}
+
+/*
+ * The fold's own two glyphs, sized by overriding the icon slot's box var — never by the `width`
+ * attribute on the SVG, which is a presentation attribute the slot's CSS outranks anyway. The kebab
+ * reads at 18px because it is the ENTIRE content of an icon button (there is no label beside it to
+ * balance against), while `More`'s trailing chevron is the same 14px every pill's trailing
+ * affordance takes (`controls.module.css`'s `.glyph`).
+ */
+.kebabIcon {
+  --vx-space-icon-size: 1.125rem;
+}
+
+.chevronIcon {
+  --vx-space-icon-size: 0.875rem;
+
+  color: var(--vx-faint);
+}

package/src/controls/actions.module.css.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Typed CSS-module declaration (the S4 CSS-modules path). Named string props — not an index
+ * signature — so dot access stays verbatim under the package's strict flags.
+ */
+declare const classes: {
+  readonly menuItem: string
+  readonly menuItemDanger: string
+  readonly customRow: string
+  readonly customSlot: string
+  readonly kebabIcon: string
+  readonly chevronIcon: string
+}
+export default classes

package/src/controls/actions.test.tsx

@@ -0,0 +1,252 @@
+/**
+ * `ActionGroup`'s fold and its mobile projection — the two behaviours that make `BarAction[]` data
+ * rather than a `ReactNode` row (`docs/CONTROLS-SPEC.md` §2.1, laws C6/C7/C9).
+ *
+ * Both variants of the group are mounted at once (the swap is CSS, law C9), so every assertion here
+ * scopes itself to one variant. A CSS module resolves to `''` under `bun test`, so the variants are
+ * told apart by Mantine's own `visibleFrom`/`hiddenFrom` utility classes, which are stable public
+ * API (`mantine-visible-from-sm` / `mantine-hidden-from-sm`).
+ */
+import { MantineProvider } from '@mantine/core'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, expect, test } from 'bun:test'
+import type { ReactNode } from 'react'
+import {
+  ActionGroup,
+  BarActionRow,
+  BarExtrasProvider,
+  OverflowMenu,
+  barActionMobile,
+  globalActionMobile,
+} from './actions'
+import type { BarAction, BarExtras } from './actions'
+
+function renderGroup(props: Parameters<typeof ActionGroup>[0]) {
+  return render(
+    <MantineProvider>
+      <ActionGroup {...props} />
+    </MantineProvider>,
+  )
+}
+
+const desktop = () => document.querySelector('.mantine-visible-from-sm')
+const mobile = () => document.querySelector('.mantine-hidden-from-sm')
+
+const secondary = (n: number): BarAction[] =>
+  Array.from({ length: n }, (_, i) => ({ key: `s${i}`, label: `Second ${i}` }))
+
+describe('ActionGroup — desktop', () => {
+  test('the primary renders filled, the secondaries default', () => {
+    renderGroup({ primary: { key: 'new', label: 'New run' }, secondary: secondary(1) })
+    const row = desktop()
+    expect(row).not.toBeNull()
+    const primary = row?.querySelector('[data-variant="filled"]')
+    expect(primary?.textContent).toBe('New run')
+    expect(row?.querySelector('[data-variant="default"]')?.textContent).toBe('Second 0')
+  })
+
+  test('three secondaries render inline with no More menu', () => {
+    renderGroup({ secondary: secondary(3) })
+    const row = desktop()
+    expect(row?.querySelectorAll('[data-variant="default"]').length).toBe(3)
+    expect(row?.textContent).not.toContain('More')
+  })
+
+  test('a fourth secondary folds into ONE More menu instead of widening the row (law C7)', () => {
+    renderGroup({ secondary: secondary(5) })
+    const row = desktop()
+    // Three inline + the `More` trigger, which is itself a `default` button.
+    expect(row?.querySelectorAll('[data-variant="default"]').length).toBe(4)
+    expect(row?.textContent).toContain('More')
+    expect(screen.getAllByRole('button', { name: 'More' }).length).toBe(1)
+  })
+
+  test("a kind: 'menu' action never takes bar width — it folds even as the only secondary", () => {
+    renderGroup({
+      secondary: [{ key: 'more', kind: 'menu', label: 'Export as', items: secondary(2) }],
+    })
+    expect(desktop()?.textContent).toContain('More')
+  })
+})
+
+describe('ActionGroup — mobile', () => {
+  test('the primary rides the bar and the rest fold into one kebab', () => {
+    renderGroup({ primary: { key: 'new', label: 'New run' }, secondary: secondary(4) })
+    const row = mobile()
+    expect(row).not.toBeNull()
+    expect(row?.textContent).toContain('New run')
+    const kebabs = row?.querySelectorAll('[aria-label="More actions"]')
+    expect(kebabs?.length).toBe(1)
+  })
+
+  test('a primary WITH an icon becomes an icon button, named by its label', () => {
+    renderGroup({ primary: { key: 'new', label: 'New run', icon: <span>+</span> } })
+    const button = mobile()?.querySelector('[aria-label="New run"]')
+    expect(button).not.toBeNull()
+    // The label is the accessible name only — it is never painted beside the glyph.
+    expect(button?.textContent).toBe('+')
+  })
+
+  test('an icon-LESS primary keeps its label instead of drawing a first-letter avatar', () => {
+    // `N` for `New run` is an avatar: a glyph whose meaning has to be known in advance. The label is
+    // wider and says what the button does, and the breadcrumb beside it truncates to make room.
+    renderGroup({ primary: { key: 'new', label: 'New run' } })
+    const row = mobile()
+    expect(row?.textContent).toContain('New run')
+    expect(row?.textContent).not.toBe('N')
+  })
+
+  test("mobile: 'hidden' drops the action from the bar AND from the kebab", () => {
+    renderGroup({ secondary: [{ key: 'x', label: 'Nowhere', mobile: 'hidden' }] })
+    const row = mobile()
+    expect(row).toBeNull()
+    // Still on desktop, though — `mobile` only decides the small-viewport placement.
+    expect(desktop()?.textContent).toContain('Nowhere')
+  })
+
+  test("mobile: 'bar' promotes a secondary out of the kebab and onto the bar", () => {
+    renderGroup({ secondary: [{ key: 'live', label: 'Live', mobile: 'bar' }] })
+    // Icon-less, so it takes the labelled form — an ActionIcon with no icon would be an empty box.
+    expect(mobile()?.textContent).toContain('Live')
+    expect(mobile()?.querySelector('[aria-label="More actions"]')).toBeNull()
+  })
+
+  test("an icon-bearing mobile: 'bar' secondary is the icon form, named by its label", () => {
+    renderGroup({
+      secondary: [{ key: 'live', label: 'Live', mobile: 'bar', icon: <span>●</span> }],
+    })
+    expect(mobile()?.querySelector('[aria-label="Live"]')).not.toBeNull()
+  })
+})
+
+describe('the mobile placement law', () => {
+  test('a primary rides the bar, everything else folds', () => {
+    const action: BarAction = { key: 'a', label: 'A' }
+    expect(barActionMobile(action, true)).toBe('bar')
+    expect(barActionMobile(action, false)).toBe('more')
+  })
+
+  test('an explicit `mobile` wins over both defaults', () => {
+    expect(barActionMobile({ key: 'a', label: 'A', mobile: 'more' }, true)).toBe('more')
+    expect(barActionMobile({ key: 'a', label: 'A', mobile: 'bar' }, false)).toBe('bar')
+  })
+
+  test("a kind: 'menu' group is always a More row, never a bar slot", () => {
+    expect(barActionMobile({ key: 'm', kind: 'menu', label: 'M', items: [] }, true)).toBe('more')
+  })
+
+  test('the first two global actions ride the bar, the rest fold', () => {
+    const global = { key: 'g', node: null }
+    expect(globalActionMobile(global, 0)).toBe('bar')
+    expect(globalActionMobile(global, 1)).toBe('bar')
+    expect(globalActionMobile(global, 2)).toBe('more')
+    expect(globalActionMobile({ ...global, mobile: 'hidden' }, 0)).toBe('hidden')
+  })
+})
+
+describe('OverflowMenu', () => {
+  test('renders nothing for an empty action list — an empty home renders nothing (law C14)', () => {
+    render(
+      <MantineProvider>
+        <OverflowMenu actions={[]} />
+      </MantineProvider>,
+    )
+    expect(document.querySelector('button')).toBeNull()
+  })
+
+  test('the trigger is a labelled button on desktop and a named icon button as a kebab', () => {
+    const { unmount } = render(
+      <MantineProvider>
+        <OverflowMenu actions={secondary(1)} />
+      </MantineProvider>,
+    )
+    expect(screen.getByRole('button', { name: 'More' })).not.toBeNull()
+    unmount()
+
+    render(
+      <MantineProvider>
+        <OverflowMenu actions={secondary(1)} trigger="kebab" label="More actions" />
+      </MantineProvider>,
+    )
+    expect(screen.getByRole('button', { name: 'More actions' })).not.toBeNull()
+  })
+})
+
+/**
+ * The `host` scoping (`BarActionRowProps.host`). The shell's `mobile: 'more'` global actions belong
+ * to ONE kebab, and the leak that made this a law was that every `ActionGroup` read the context:
+ * `PageBar.filtersEnd` and any consumer-mounted tier-2 group each grew a second kebab holding a
+ * duplicate of the global node, and each took the claim that decides whether the shell renders its
+ * own.
+ */
+describe('shell kebab extras are scoped to the page bar', () => {
+  const GLOBAL_ROW: BarAction = { key: 'g', kind: 'custom', node: <span data-testid="global" /> }
+
+  function renderWithExtras(node: ReactNode) {
+    const claims: number[] = []
+    const extras: BarExtras = {
+      mobileMoreActions: [GLOBAL_ROW],
+      claimKebab: () => {
+        claims.push(1)
+        return () => claims.push(-1)
+      },
+    }
+    const result = render(
+      <MantineProvider>
+        <BarExtrasProvider value={extras}>{node}</BarExtrasProvider>
+      </MantineProvider>,
+    )
+    return { ...result, claims }
+  }
+
+  test('a public ActionGroup takes neither the global rows nor the claim', async () => {
+    const { claims } = renderWithExtras(
+      <ActionGroup secondary={[{ key: 'a', label: 'Own action' }]} />,
+    )
+    expect(claims).toHaveLength(0)
+    // Its own kebab exists (its secondary defaults to `more`) but holds only its own row.
+    fireEvent.click(screen.getByLabelText('More actions'))
+    await waitFor(() => expect(screen.getByRole('menuitem', { name: 'Own action' })).toBeDefined())
+    expect(screen.queryByTestId('global')).toBeNull()
+  })
+
+  test('the page-bar row-1 group DOES take them — it is the one instance entitled to', async () => {
+    const { claims } = renderWithExtras(
+      <BarActionRow host="page" secondary={[{ key: 'a', label: 'Own action' }]} />,
+    )
+    expect(claims).toEqual([1])
+    fireEvent.click(screen.getByLabelText('More actions'))
+    await waitFor(() => expect(screen.getByTestId('global')).toBeDefined())
+  })
+
+  test("viewport: 'desktop' renders no mobile half at all — no kebab, no claim", () => {
+    const { claims } = renderWithExtras(
+      <BarActionRow host="page" viewport="desktop" secondary={[{ key: 'a', label: 'Row 2' }]} />,
+    )
+    expect(claims).toHaveLength(0)
+    expect(document.querySelector('.mantine-hidden-from-sm')).toBeNull()
+    expect(desktop()?.textContent).toContain('Row 2')
+  })
+
+  test('mobileOnly actions join the mobile kebab without widening the desktop row', async () => {
+    renderWithExtras(
+      <BarActionRow
+        host="page"
+        secondary={[{ key: 'a', label: 'Own action' }]}
+        mobileOnly={[{ key: 'metrics', label: 'Manage metrics' }]}
+      />,
+    )
+    expect(desktop()?.textContent).not.toContain('Manage metrics')
+    fireEvent.click(screen.getByLabelText('More actions'))
+    await waitFor(() =>
+      expect(screen.getByRole('menuitem', { name: 'Manage metrics' })).toBeDefined(),
+    )
+  })
+
+  test("a mobileOnly action marked 'bar' renders inline on the mobile bar", () => {
+    renderWithExtras(
+      <BarActionRow host="page" mobileOnly={[{ key: 'm', label: 'Metrics', mobile: 'bar' }]} />,
+    )
+    expect(mobile()?.textContent).toContain('Metrics')
+  })
+})