@estiva-app/ui 0.58.0 → 0.60.0

package/src/MembersDialog.tsx

@@ -0,0 +1,184 @@
+import { useId, useState, type ReactNode } from 'react'
+import { IconArrowLeft, IconUserMinus, IconUserPlus } from '@tabler/icons-react'
+import { Avatar } from './Avatar'
+import { Button } from './Button'
+import { Chip } from './Chip'
+import { ChipInput, type ChipInputOption } from './ChipInput'
+import { DialogShell } from './DialogShell'
+import { Field } from './Field'
+import { Form } from './Form'
+import { IconButton } from './IconButton'
+import { MenuItem } from './Menu'
+
+/** One row of the roster: a face, a name, and an optional second line. */
+export interface MembersDialogMember {
+  id: string
+  name: string
+  /** A picture URL, resolved by the caller, as `Avatar` takes its `src`. */
+  picture?: string
+  /** The line under the name: a role, a relation ("Assignee"), or a state. */
+  caption?: string
+}
+
+/** Somebody who can be added: a `ChipInput` option with a face. */
+export interface MembersDialogCandidate extends ChipInputOption {
+  picture?: string
+}
+
+/** What the viewer's own row offers: in when they are out, out when they are in. */
+export type MembersDialogSelfAction = 'join' | 'leave'
+
+export interface MembersDialogProps {
+  /** The roster, in the order to draw it. The viewer's own row is the caller's to name ("You"). */
+  members: MembersDialogMember[]
+  /** The number in the title's chip. Defaults to how many rows there are. */
+  count?: number
+  /**
+   * The viewer's own row on top: "Join" when they are not in, "Leave" when
+   * they are. Absent while it is not known, or where they cannot change it —
+   * no row is better than a wrong one.
+   */
+  self?: {
+    action: MembersDialogSelfAction
+    onToggle: () => void | Promise<unknown>
+  }
+  /** Who "Add members" may offer. Members are left out by id. */
+  candidates?: MembersDialogCandidate[]
+  /**
+   * Adds the people chosen. With it, the "Add members" row shows and opens the
+   * add layer. Return `false` (or a promise of it) to stay on the add layer —
+   * nothing was added; anything else goes back to the roster.
+   */
+  onAdd?: (chosen: MembersDialogCandidate[]) => void | boolean | Promise<void | boolean>
+  /** One line under the roster — what membership does and does not cover. */
+  note?: ReactNode
+  /** `add` opens straight on the add layer. */
+  initialView?: 'list' | 'add'
+  onClose: () => void
+}
+
+const LEADING_CLASSES = 'size-8 rounded-md bg-accent-muted flex items-center justify-center shrink-0 text-accent-primary'
+
+/**
+ * Who is in this, with joining, leaving and adding people — the list a
+ * `MembersPill` opens.
+ *
+ * Moved from Peek's `MembersDialog` (2026-10-06; Katerina's design of 22 July,
+ * with the row and inset rulings of 15 September). Two layers in one dialog:
+ * the roster, with the viewer's Join or Leave and "Add members" on top, and the
+ * add layer, whose back arrow returns to the roster. Adding returns to the
+ * roster so the new people are visible at once.
+ */
+export function MembersDialog({ members, count, self, candidates = [], onAdd, note, initialView = 'list', onClose }: MembersDialogProps) {
+  const [view, setView] = useState<'list' | 'add'>(onAdd ? initialView : 'list')
+  const [chosen, setChosen] = useState<MembersDialogCandidate[]>([])
+  const [toggling, setToggling] = useState(false)
+  const formId = useId()
+
+  const toggle = async () => {
+    if (!self || toggling) return
+    setToggling(true)
+    try {
+      await self.onToggle()
+    } finally {
+      setToggling(false)
+    }
+  }
+
+  const add = async () => {
+    if (!onAdd || chosen.length === 0) return
+    if ((await onAdd(chosen)) === false) return
+    setChosen([])
+    setView('list')
+  }
+
+  if (view === 'add' && onAdd) {
+    return (
+      <DialogShell
+        title="Add members"
+        onClose={onClose}
+        headerContent={
+          <div className="flex min-w-0 items-center gap-2">
+            <IconButton tooltip="Back to members" aria-label="Back to members" className="-ml-2" onClick={() => setView('list')}>
+              <IconArrowLeft size={16} stroke={1.5} />
+            </IconButton>
+            <span className="truncate text-h4 text-text-primary">Add members</span>
+          </div>
+        }
+        bodyClassName="flex flex-col gap-6"
+        footer={
+          <>
+            <Button variant="muted" onClick={onClose}>Cancel</Button>
+            <Button variant="primary" type="submit" form={formId} disabled={chosen.length === 0}>Invite</Button>
+          </>
+        }
+      >
+        <Form id={formId} onSubmit={add}>
+          <Field label="Invite people" required>
+            <ChipInput
+              value={chosen}
+              onChange={setChosen}
+              options={candidates}
+              placeholder="Search people..."
+              excludeIds={members.map((m) => m.id)}
+              chipLeading={(o) => <Avatar name={o.label} src={o.picture} size={16} />}
+              rowLeading={(o) => <Avatar name={o.label} src={o.picture} size={32} />}
+              autoFocus
+            />
+          </Field>
+        </Form>
+      </DialogShell>
+    )
+  }
+
+  return (
+    <DialogShell
+      title="Members"
+      onClose={onClose}
+      headerContent={
+        <div className="flex min-w-0 items-center gap-2">
+          <span className="truncate text-h4 text-text-primary">Members</span>
+          <Chip label={String(count ?? members.length)} />
+        </div>
+      }
+      bodyMaxHeight="max-h-[400px]"
+      bodyClassName="p-0 py-2"
+    >
+      {/* MenuItem outside a Menu is a plain button. Its fill sits 8px in from the dialog's sides,
+          and its own 12px inset puts the square over the rows' faces, 20px in, at the same 48px. */}
+      {(self || onAdd) && (
+        <div className="flex flex-col px-2">
+          {self && (
+            <MenuItem
+              size="tall"
+              className="py-2"
+              disabled={toggling}
+              onClick={() => void toggle()}
+              leading={<span className={LEADING_CLASSES}>{self.action === 'join' ? <IconUserPlus size={16} stroke={1.5} /> : <IconUserMinus size={16} stroke={1.5} />}</span>}
+              label={self.action === 'join' ? 'Join' : 'Leave'}
+            />
+          )}
+          {onAdd && (
+            <MenuItem
+              size="tall"
+              className="py-2"
+              onClick={() => setView('add')}
+              leading={<span className={LEADING_CLASSES}><IconUserPlus size={16} stroke={1.5} /></span>}
+              label="Add members"
+            />
+          )}
+        </div>
+      )}
+      {members.map((member) => (
+        <div key={member.id} className="flex h-12 items-center gap-3 px-5">
+          <Avatar size={32} name={member.name} src={member.picture} />
+          <div className="flex min-w-0 flex-1 flex-col justify-center gap-[2px]">
+            <div className="truncate text-body-2 text-text-primary">{member.name}</div>
+            {member.caption && <div className="truncate text-caption text-text-secondary">{member.caption}</div>}
+          </div>
+        </div>
+      ))}
+      {note && <div className="px-5 pb-2 pt-3 text-caption text-text-secondary">{note}</div>}
+    </DialogShell>
+  )
+}

package/src/MembersPill.mdx

@@ -0,0 +1,45 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
+import * as MembersPillStories from './MembersPill.stories'
+
+<Meta of={MembersPillStories} />
+
+# MembersPill
+
+Who is in this: up to three faces and the total, in a small outlined pill
+that opens the full list.
+
+<Canvas of={MembersPillStories.TwoMembers} />
+
+## When
+
+- A page or conversation header that says, at a glance, who is in it, and
+  opens the list — a **MembersDialog** — on a press.
+
+## When not
+
+- The faces alone, with nothing to open → **AvatarGroup**.
+- The people need to be readable → **MembersDialog**, or a list of **Person** rows.
+
+## How
+
+```tsx
+import { MembersPill } from '@estiva-app/ui'
+
+const people: { name: string; picture?: string }[] = []
+const [open, setOpen] = useState(false)
+
+<MembersPill members={people} onClick={() => setOpen(true)} />
+```
+
+- `members` is what **AvatarGroup** takes; the first three are drawn.
+- `count` is the number beside the faces when it is not `members.length` —
+  pass three faces and the real total.
+- No `onClick` disables it; no members draws nothing.
+
+## What it owns
+
+Nothing. It only draws. Clicks and keys are yours.
+
+## Props
+
+<Controls of={MembersPillStories.TwoMembers} />

package/src/MembersPill.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { MembersPill } from './MembersPill'
+
+const meta = {
+  title: 'Primitives/MembersPill',
+  component: MembersPill,
+  args: {
+    members: [{ name: 'Ana Duarte' }, { name: 'Ravi Mehta' }],
+    onClick: () => {},
+  },
+} satisfies Meta<typeof MembersPill>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const TwoMembers: Story = {}
+
+export const One: Story = {
+  args: { members: [{ name: 'Ana Duarte' }] },
+}
+
+/** Twelve members, three faces: the count says the rest. */
+export const Many: Story = {
+  args: {
+    members: [{ name: 'Ana Duarte' }, { name: 'Ravi Mehta' }, { name: 'Marta Silva' }],
+    count: 12,
+  },
+}
+
+/** Nothing to open — the pill is disabled, not another element. */
+export const Disabled: Story = {
+  args: { onClick: undefined },
+}
+
+/** No members draws nothing at all. */
+export const Empty: Story = {
+  args: { members: [] },
+}

package/src/MembersPill.tsx

@@ -0,0 +1,35 @@
+import { AvatarGroup, type AvatarGroupMember } from './AvatarGroup'
+import { Button } from './Button'
+import { cn } from './cn'
+import { MONO_CAPTION_CLASSES } from './looks'
+
+export interface MembersPillProps {
+  /** Who is in it, in order. Up to three faces are drawn. */
+  members: AvatarGroupMember[]
+  /** The number beside the faces. Defaults to how many members there are. */
+  count?: number
+  /** Opens the list — usually a `MembersDialog`. Without it the pill is disabled. */
+  onClick?: () => void
+  className?: string
+}
+
+/**
+ * Who is in this: up to three faces and the total, in a small outlined pill
+ * that opens the full list.
+ *
+ * Moved from Peek's `MembersPill` (2026-10-06), unchanged: the package's
+ * Button, outlined, at its default 32px — the faces sit 3px inside the
+ * hairline on the top, the bottom and the left, 8px from the count (Katerina's
+ * pick of 15 September). `disabled` rather than another element when there is
+ * nothing to press, so one element keeps one set of pixels.
+ */
+export function MembersPill({ members, count, onClick, className }: MembersPillProps) {
+  const total = count ?? members.length
+  if (total === 0) return null
+  return (
+    <Button variant="outlined" aria-label={`${total} ${total === 1 ? 'member' : 'members'}`} disabled={!onClick} onClick={onClick} className={cn('gap-2 pl-[3px] pr-2', className)}>
+      <AvatarGroup members={members} />
+      <span className={cn(MONO_CAPTION_CLASSES, 'signal:tabular-nums')}>{total}</span>
+    </Button>
+  )
+}

package/src/NavItem.mdx

@@ -71,9 +71,9 @@ import { NavItem } from '@estiva-app/ui'
 />
 ```
 
-- It renders a plain anchor. A router app keeps a thin wrapper: compute
-  `active` from the location, intercept the click, navigate — every
-  anchor prop passes through.
+- It renders a plain anchor, and every anchor prop passes through. Under
+  **AppProvider**'s `navigate` a click changes page without a reload, so no
+  wrapper is needed: compute `active` from the location where you place it.
 - The label truncates; the count never gives up its width.
 - `menu` is the items only: `menu={<MenuItem label="Move to Folder…" onClick={move} />}`.
   The ⋮'s name is `More options for {label}` unless `menuLabel` says otherwise.

package/src/NavItem.tsx

@@ -1,6 +1,7 @@
 import { useId, useState, type ComponentPropsWithoutRef, type ReactNode } from 'react'
 import { Collapsible } from '@base-ui/react/collapsible'
 import { IconAlertSquareRounded, IconChevronRight, IconDotsVertical } from '@tabler/icons-react'
+import { useInAppClick } from './AppProvider'
 import { cn } from './cn'
 import { COLLAPSIBLE_PANEL_CLASSES, COUNT_TEXT_CLASSES, SIDEBAR_ROW_CLASSES, SIDEBAR_ROW_TEXT_CLASSES } from './looks'
 import { IconButton } from './IconButton'
@@ -92,8 +93,10 @@ export function NavItem({
   open: openProp,
   onOpenChange,
   className,
+  onClick,
   ...props
 }: NavItemProps) {
+  const inApp = useInAppClick(href, onClick)
   const [openState, setOpenState] = useState(defaultOpen)
   const panelId = useId()
   const hasRows = children != null && children !== false
@@ -135,6 +138,7 @@ export function NavItem({
         className,
       )}
       {...props}
+      onClick={inApp}
     >
       {(icon || hasRows) && (
         <span

package/src/NavTree.mdx

@@ -92,8 +92,9 @@ import { NavTree, Sidebar } from '@estiva-app/ui'
 </Sidebar>
 ```
 
-- Each row is a **NavItem**, so a row is a link: a router app prevents the
-  default in `onSelect` and navigates.
+- Each row is a **NavItem**, so a row is a link, and changes page as one
+  does: through **AppProvider**'s `navigate`, or `onSelect` preventing the
+  default and navigating.
 - `storageKey` remembers each group open or closed in this browser, under
   the key and the group's id. The rows under a row are not remembered yet.
 - The words in `emptyMessage` are the caller's.

package/src/RailItem.mdx

@@ -40,9 +40,9 @@ import { Rail, RailItem } from '@estiva-app/ui'
 </Rail>
 ```
 
-- Both render plain anchors and a `nav` region. A router app keeps a thin
-  wrapper per item: compute `active` from the location, intercept the
-  click, navigate.
+- Both render plain anchors and a `nav` region. Under **AppProvider**'s `navigate`
+  a click changes page without a reload; compute `active` from the location
+  where you place each item.
 - Icons are 16px at stroke 1.5.
 
 - A tile is 64px wide and 48px tall: the 16px icon in its 32px square, over its

package/src/RailItem.tsx

@@ -1,4 +1,5 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react'
+import { useInAppClick } from './AppProvider'
 import { cn } from './cn'
 
 /**
@@ -22,13 +23,15 @@ export interface RailItemProps extends Omit<ComponentPropsWithoutRef<'a'>, 'href
   className?: string
 }
 
-export function RailItem({ href, icon, label, active = false, className, ...props }: RailItemProps) {
+export function RailItem({ href, icon, label, active = false, className, onClick, ...props }: RailItemProps) {
+  const inApp = useInAppClick(href, onClick)
   return (
     <a
       href={href}
       aria-current={active ? 'page' : undefined}
       className={cn('group flex h-12 w-full shrink-0 flex-col items-center gap-0.5 px-2 py-0.5', className)}
       {...props}
+      onClick={inApp}
     >
       <div
         className={cn(

package/src/SearchInput.mdx

@@ -13,12 +13,11 @@ focus, and an optional keyboard hint at the right edge.
 ## When
 
 - Filtering a list, live, above the list it filters.
-- As a **launcher affordance**: keep the input `pointer-events-none` and
-  open your command surface from a click on the surround — the component
-  is the same either way, and `shortcut` shows the way in ("Ctrl+K").
 
 ## When not
 
+- The way into a launcher from the top bar → **TopBar**'s `onSearch`. The
+  bar draws this look as a button, 290px, and answers Ctrl+K itself.
 - General text entry → **TextInput**.
 - Picking entries from a directory → **ChipInput** or **Select**.
 
@@ -35,7 +34,7 @@ import { SearchInput } from '@estiva-app/ui'
   `Input` since stage 3; the border, the focus-within rule and the `Kbd`
   hint are this component's.
 - **Give it an `aria-label` ("Search")** — the placeholder is not a name,
-  and this usually stands alone in a top bar rather than in a `Field`.
+  and this usually stands alone above its list rather than in a `Field`.
   Inside one, the label names it and you add nothing.
 
 ## What it owns

package/src/SearchInput.tsx

@@ -13,9 +13,9 @@ import { BARE_INPUT_CLASSES, FIELD_SHELL_CLASSES } from './looks'
  * The one product string — Peek's default placeholder "Search Peek..." —
  * stays in Peek; the default here says only "Search…".
  *
- * In Peek's top bar this is a launcher affordance rather than a live field:
- * the input is `pointer-events-none` and clicking the surround opens the
- * command launcher. The component is the same either way.
+ * The top bar's way into a launcher is not this: `TopBar`'s `onSearch` draws
+ * this look as a button and answers Ctrl+K itself (8 October). Peek used to
+ * make this field inert and catch the click around it.
  *
  * On Base UI's `Input` since stage 3 of the migration (2026-09-07), so a
  * search field inside a `Field` is labelled by it without the caller wiring

package/src/Sidebar.mdx

@@ -48,8 +48,8 @@ import { Sidebar, NavItem, CollapsibleSection, SectionHeader } from '@estiva-app
 ```
 
 **Every row is a plain anchor, so in a router app each click would reload
-the page.** Keep NavItem's rule: a thin wrapper computes `active` from the
-location, intercepts the click and navigates in place — see **NavItem**.
+the page** — unless the app gives **AppProvider**'s `navigate`, which
+changes page in place. See **NavItem**.
 
 Anything you place directly in the column needs `shrink-0` (both headings
 above take it in `className`):

package/src/Tabs.mdx

@@ -17,8 +17,13 @@ is a neutral fill, not the accent — selection is a place, not a highlight.
   baseline — the one way a number sits beside a label. A count of `0` is
   still drawn ("Assigned to me · 0" is an answer); an absent count draws
   nothing.
+- A tab with `unread` draws the **UnreadDot** after its label (and count),
+  without the dot's 24px slot so the row keeps one height, and says "new" in
+  its accessible name.
 - Two sizes: `default` (14px) and `small` (12px, the denser geometry).
 
+<Canvas of={TabsStories.WithUnread} />
+
 <Canvas of={TabsStories.WithAZero} />
 
 ## When not

package/src/Tabs.stories.tsx

@@ -74,6 +74,21 @@ export const WithAnIcon: Story = {
   ),
 }
 
+/** `unread`: something new behind a tab you are not on — the accent dot after the label. */
+export const WithUnread: Story = {
+  args: { tabs: [], active: 'overview', onChange: () => {} },
+  render: () => (
+    <Demo
+      initial="overview"
+      tabs={[
+        { id: 'overview', label: 'Overview' },
+        { id: 'activity', label: 'Activity', unread: true },
+        { id: 'all', label: 'All', count: 12, unread: true },
+      ]}
+    />
+  ),
+}
+
 /** `small` is the 12px geometry. */
 export const Small: Story = {
   args: { tabs: [], active: 'conversations', onChange: () => {} },

package/src/Tabs.test.tsx

@@ -123,6 +123,14 @@ describe('Tabs', () => {
     expect(list.getAttribute('aria-labelledby')).toBeNull()
   })
 
+  it('an unread tab draws the dot and says "new" in its name; the others draw neither', () => {
+    const tabs: TabDef<Id>[] = [{ id: 'one', label: 'One' }, { id: 'two', label: 'Two', count: 3, unread: true }, { id: 'three', label: 'Three' }]
+    render(<Tabs tabs={tabs} active="one" onChange={() => {}} />)
+    expect(screen.getByRole('tab', { name: /^Two.*\bnew$/ }).querySelector('[data-unread]')).not.toBeNull()
+    expect(screen.getByRole('tab', { name: 'One' }).querySelector('[data-unread]')).toBeNull()
+    expect(screen.getByRole('tab', { name: 'Three' }).querySelector('[data-unread]')).toBeNull()
+  })
+
   it('puts className on the outer box, around the row', () => {
     const { container } = render(<Tabs tabs={THREE} active="one" onChange={() => {}} className="mt-4" />)
     const outer = container.firstElementChild as HTMLElement

package/src/Tabs.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 import { Tabs as BaseTabs } from '@base-ui/react/tabs'
 import { cn } from './cn'
+import { UnreadDot } from './UnreadDot'
 
 /**
  * A row of tabs. Ship's Tabs (2026-09-01), which was Peek's TopicTabs with
@@ -26,6 +27,8 @@ export interface TabDef<T extends string> {
   count?: number
   /** 16px, stroke 1.5. */
   icon?: ReactNode
+  /** Something new behind this tab: the `UnreadDot` after the label, and "new" in the tab's accessible name. */
+  unread?: boolean
 }
 
 export interface TabsProps<T extends string> {
@@ -91,6 +94,15 @@ export function Tabs<T extends string>({ tabs, active, onChange, size = 'default
                 <span className="ml-2.5 font-mono text-caption tabular-nums text-text-secondary">{tab.count}</span>
               ) : null}
             </span>
+            {/* The dot without its 24px slot: a tab is a line of text, and the
+                slot would make an unread tab taller than its neighbours. The
+                disc says nothing to a screen reader, so the name says "new". */}
+            {tab.unread ? (
+              <>
+                <UnreadDot className="h-auto w-auto" />
+                <span className="sr-only">new</span>
+              </>
+            ) : null}
           </BaseTabs.Tab>
         ))}
       </BaseTabs.List>

package/src/TopBar.mdx

@@ -5,7 +5,7 @@ import * as TopBarStories from './TopBar.stories'
 
 # TopBar
 
-The 52px top bar: `menu` and `logo` on the left, a `search` slot in the
+The 52px top bar: `menu` and `logo` on the left, the search field in the
 centre, the identity cluster on the right. Three manners — **`solid`**,
 in flow with a hairline and a surface; **`inset`**, in flow with neither,
 standing on the ground; and **`floating`**, an overlay with neither, whose
@@ -27,8 +27,12 @@ bar ignores the pointer so the content underneath stays reachable.
 - `menu` is the menu button, in an app whose navigation collapses — the
   collapsing itself stays the caller's. `logo` sits beside it: the app's
   name as text, or a mark.
-- The `search` slot holds its place even while empty, so a search field
-  drops in later without moving anything.
+- `onSearch` is what searching opens — your command launcher. With it the
+  bar draws the search field itself: **SearchInput**'s look, 290px, as a
+  button showing `searchPlaceholder` ("Search…") and the shortcut. A click on
+  it, and Ctrl+K (Cmd+K on a Mac) anywhere on the page, call `onSearch`.
+- The centre holds its place even while empty, so search drops in later
+  without moving anything.
 
 <Canvas of={TopBarStories.FloatingNoSearch} />
 
@@ -37,25 +41,29 @@ bar ignores the pointer so the content underneath stays reachable.
 - Page-level headers inside the content → not this; this is the frame's
   bar, once per app. The top of a column is **ContainerHeader**.
 - Anything the bar would need to know — who you are, what is searched —
-  stays outside: pass composed slots.
+  stays outside: pass composed slots, and what searching opens as `onSearch`.
+- A search field of your own in the centre → only for something the bar's
+  does not do; pass it as `search`, which takes the centre (`onSearch` still
+  answers Ctrl+K). A field that filters a list sits above that list:
+  **SearchInput**.
 
 ## How
 
 ```tsx
-import { TopBar, IdentityMenu, SearchInput } from '@estiva-app/ui'
+import { TopBar, IdentityMenu } from '@estiva-app/ui'
 
 <TopBar
   logo="Estiva"
-  search={<SearchInput shortcut="Ctrl+K" className="w-[290px]" />}
+  onSearch={openLauncher}
+  searchPlaceholder="Search Estiva…"
   right={<IdentityMenu me={me} signedIn={signedIn} />}
 />
 ```
 
 - Geometry is fixed: 52px, `pl-5 pr-[26px]`, right cluster `gap-[6px]` —
   don't restyle it per app.
-- In `floating`, a launcher-affordance search is the caller's trick: keep
-  the input `pointer-events-none` and open the launcher from a wrapper's
-  `mousedown` (see SearchInput's page).
+- `onSearch` is called on every Ctrl+K, open or not: to close the launcher
+  on a second Ctrl+K, toggle in your handler.
 - The frame is desktop-only for now — there is no narrow-screen
   behaviour; the menu button collapses panels, it does not open a drawer.
 
@@ -69,6 +77,7 @@ It does these by itself. Write none of them around it.
 | It does | So you never write | Refused when written by hand |
 |---|---|---|
 | Keeps its 52px in a scrolling column | `shrink-0` |  |
+| Answers Ctrl+K (Cmd+K) anywhere on the page, given `onSearch` | a `keydown` listener on the window |  |
 
 ## Props
 

package/src/TopBar.stories.tsx

@@ -1,9 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { IconMenu2 } from '@tabler/icons-react'
-import type { ReactNode } from 'react'
+import { useState, type ReactNode } from 'react'
 import { IconButton } from './IconButton'
 import { PersonTrigger } from './PersonTrigger'
-import { SearchInput } from './SearchInput'
 import { TopBar } from './TopBar'
 
 /**
@@ -26,6 +25,7 @@ const meta = {
     menu: { control: false },
     logo: { control: false },
     search: { control: false },
+    onSearch: { control: false },
     right: { control: false },
   },
 } satisfies Meta<typeof TopBar>
@@ -60,11 +60,29 @@ const Behind = ({ children }: { children: ReactNode }) => (
 export const Solid: Story = {
   render: (args) => (
     <Below>
-      <TopBar {...args} logo="Estiva" search={<SearchInput shortcut="Ctrl+K" className="w-[290px]" />} right={face} />
+      <TopBar {...args} logo="Estiva" onSearch={() => {}} right={face} />
     </Below>
   ),
 }
 
+/**
+ * The bar's own search field: a click on it, or Ctrl+K (Cmd+K on a Mac)
+ * anywhere, calls `onSearch` — here it counts, where an app opens its launcher.
+ */
+export const Search: Story = {
+  render: function Search(args) {
+    const [opened, setOpened] = useState(0)
+    return (
+      <div className="flex h-40 flex-col overflow-hidden bg-bg-base">
+        <TopBar {...args} logo="Estiva" onSearch={() => setOpened((n) => n + 1)} searchPlaceholder="Search Estiva…" right={face} />
+        <div className="flex flex-1 items-center justify-center text-body-2 text-text-secondary">
+          {opened === 0 ? 'Click the field, or press Ctrl+K.' : `Search opened ${opened} ${opened === 1 ? 'time' : 'times'}.`}
+        </div>
+      </div>
+    )
+  },
+}
+
 /** No search yet: the centre slot holds its place, so it drops in later without moving anything. */
 export const SolidNoSearch: Story = {
   render: (args) => (
@@ -78,7 +96,7 @@ export const SolidNoSearch: Story = {
 export const Floating: Story = {
   render: (args) => (
     <Behind>
-      <TopBar {...args} variant="floating" menu={menuButton} search={<SearchInput shortcut="Ctrl+K" className="w-[290px]" />} right={face} />
+      <TopBar {...args} variant="floating" menu={menuButton} onSearch={() => {}} right={face} />
     </Behind>
   ),
 }