@estiva-app/ui 0.54.0 → 0.56.0

package/src/BlockHandle.test.tsx

@@ -0,0 +1,216 @@
+// @vitest-environment jsdom
+/**
+ * The block handle (RIC-18): what its rows do to the document, and which rows
+ * it offers. The drag itself is the browser's and is driven in real Chromium
+ * (the PR says how); here, the slice it starts with and what a drop of it keeps.
+ */
+import { afterEach, beforeAll, describe, expect, it } from 'vitest'
+import { act, cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Editor } from '@tiptap/core'
+import StarterKit from '@tiptap/starter-kit'
+import { BlockHandle } from './BlockHandle'
+import { BlockId } from './BlockNodes'
+import { EditorBlockHandle, deleteBlock, duplicateBlock, moveBlock, startBlockDrag } from './EditorBlockHandle'
+import { MenuItem } from './Menu'
+
+const DOCUMENT = {
+  type: 'doc',
+  content: [
+    { type: 'paragraph', attrs: { blockId: 'p1' }, content: [{ type: 'text', text: 'one' }] },
+    { type: 'paragraph', attrs: { blockId: 'p2' }, content: [{ type: 'text', text: 'two' }] },
+  ],
+}
+
+type Json = { type: string; attrs?: Record<string, unknown>; content?: Json[] }
+const editors: Editor[] = []
+function editor(content: object = DOCUMENT) {
+  const e = new Editor({ extensions: [StarterKit, BlockId], content })
+  editors.push(e)
+  return e
+}
+const ids = (e: Editor) => (e.getJSON().content as Json[]).map((b) => b.attrs?.blockId)
+const posOf = (e: Editor, id: string) => {
+  let at = -1
+  e.state.doc.forEach((node, pos) => {
+    if (node.attrs.blockId === id) at = pos
+  })
+  return at
+}
+
+/**
+ * Press and release on the handle. Base UI opens a menu on the press; under
+ * jsdom `user.click`'s own move-press-release-click left it shut, while the
+ * same handle opens on a click in Chromium (the story, driven in the PR).
+ */
+async function press(user: ReturnType<typeof userEvent.setup>, target: HTMLElement) {
+  await user.pointer({ keys: '[MouseLeft>]', target })
+  await user.pointer({ keys: '[/MouseLeft]', target })
+  await screen.findByRole('menu')
+}
+
+// jsdom lays nothing out, so a Range has no rects. The editor measures the caret
+// a frame after Duplicate, Delete or a move gives it the focus back; under load
+// that frame came while a test still ran (CI, 5 October), and threw.
+beforeAll(() => {
+  const none = { top: 0, bottom: 0, left: 0, right: 0, width: 0, height: 0, x: 0, y: 0, toJSON: () => ({}) }
+  Range.prototype.getClientRects = () => [] as unknown as DOMRectList
+  Range.prototype.getBoundingClientRect = () => none as DOMRect
+})
+
+afterEach(() => {
+  cleanup()
+  for (const e of editors.splice(0)) e.destroy()
+})
+
+describe('duplicateBlock', () => {
+  it('puts a copy after the block, and the copy gets an id of its own', () => {
+    const e = editor()
+    duplicateBlock(e, posOf(e, 'p1'))
+    const [first, copy, last] = ids(e)
+    expect(first).toBe('p1')
+    expect(copy).toMatch(/^[0-9a-f]{12}$/)
+    expect(last).toBe('p2')
+    expect(e.getText()).toBe('one\n\none\n\ntwo')
+  })
+
+  it('then deleting the copy gives back the document it started from', () => {
+    const e = editor()
+    const before = e.getJSON()
+    duplicateBlock(e, posOf(e, 'p2'))
+    deleteBlock(e, posOf(e, ids(e)[2] as string))
+    expect(e.getJSON()).toEqual(before)
+  })
+})
+
+describe('deleteBlock', () => {
+  it('removes the block and leaves the others their ids', () => {
+    const e = editor()
+    deleteBlock(e, posOf(e, 'p1'))
+    expect(ids(e)).toEqual(['p2'])
+  })
+
+  it('leaves an empty paragraph when it was the only block', () => {
+    const e = editor({ type: 'doc', content: [DOCUMENT.content[0]] })
+    deleteBlock(e, 0)
+    expect(e.getText()).toBe('')
+    expect(e.state.doc.childCount).toBe(1)
+  })
+})
+
+describe('moveBlock', () => {
+  it('moves the block whole, so it keeps its id, as a drop in the gutter does', () => {
+    const e = editor()
+    moveBlock(e, posOf(e, 'p1'), e.state.doc.content.size)
+    expect(ids(e)).toEqual(['p2', 'p1'])
+    expect(e.getText()).toBe('two\n\none')
+  })
+
+  it('does nothing when the block would land where it is', () => {
+    const e = editor()
+    const before = e.getJSON()
+    expect(moveBlock(e, posOf(e, 'p2'), posOf(e, 'p2'))).toBe(false)
+    expect(e.getJSON()).toEqual(before)
+  })
+})
+
+describe('startBlockDrag', () => {
+  it('selects the block and drags its slice, with its id, as a move', () => {
+    const e = editor()
+    const transfer = { data: {} as Record<string, string>, clearData() {}, setData(type: string, value: string) { this.data[type] = value }, effectAllowed: '' }
+    startBlockDrag(e, posOf(e, 'p2'), { dataTransfer: transfer as unknown as DataTransfer })
+    expect(e.view.dragging?.move).toBe(true)
+    expect(e.view.dragging?.slice.content.firstChild?.attrs.blockId).toBe('p2')
+    expect(e.state.selection.from).toBe(posOf(e, 'p2'))
+    expect(transfer.data['text/plain']).toBe('two')
+  })
+
+  it('a drop of that slice, as ProseMirror makes it, keeps the id', () => {
+    const e = editor()
+    startBlockDrag(e, posOf(e, 'p1'), { dataTransfer: null })
+    // ProseMirror's drop: delete the selection, then insert the slice's node at the drop point.
+    const node = e.view.dragging!.slice.content.firstChild!
+    const tr = e.state.tr.deleteSelection()
+    tr.insert(tr.doc.content.size, node)
+    e.view.dispatch(tr)
+    expect(ids(e)).toEqual(['p2', 'p1'])
+  })
+})
+
+describe('BlockHandle', () => {
+  it('reading, offers only the caller’s rows and does not drag', async () => {
+    render(
+      <BlockHandle actions={(b) => <MenuItem label={`Copy link ${b.id}`} onClick={() => {}} />}>
+        <div>
+          <p data-block-id="r1">read me</p>
+        </div>
+      </BlockHandle>,
+    )
+    const user = userEvent.setup()
+    await user.hover(screen.getByText('read me'))
+    const handle = screen.getByRole('button', { name: 'Block menu' })
+    expect(handle.getAttribute('draggable')).toBe('false')
+    await press(user, handle)
+    expect(screen.getAllByRole('menuitem').map((r) => r.textContent)).toEqual(['Copy link r1'])
+  })
+
+  it('reading with no rows of the caller’s, draws no handle', async () => {
+    render(
+      <BlockHandle>
+        <div>
+          <p data-block-id="r1">read me</p>
+        </div>
+      </BlockHandle>,
+    )
+    await userEvent.setup().hover(screen.getByText('read me'))
+    expect(screen.queryByRole('button', { name: 'Block menu' })).toBeNull()
+  })
+
+  it('editing, Delete from the menu removes the block', async () => {
+    const e = editor()
+    const { EditorContent } = await import('@tiptap/react')
+    render(
+      <EditorBlockHandle editor={e}>
+        <EditorContent editor={e} />
+      </EditorBlockHandle>,
+    )
+    const user = userEvent.setup()
+    // jsdom lays nothing out: every block's top is 0, so the pointer is on the last.
+    await act(async () => user.hover(screen.getByText('two')))
+    await press(user, screen.getByRole('button', { name: 'Block menu' }))
+    expect(screen.getAllByRole('menuitem').map((r) => r.textContent)).toEqual(['Duplicate', 'Delete'])
+    await user.click(screen.getByRole('menuitem', { name: 'Delete' }))
+    // The editor takes the focus back a frame later and measures the caret then: wait for it, so it is part of the test.
+    await act(() => new Promise<void>((done) => requestAnimationFrame(() => done())))
+    expect(ids(e)).toEqual(['p1'])
+  })
+
+  it('an editor that cannot be edited gets the caller’s rows only, and no drag', async () => {
+    const e = editor()
+    e.setEditable(false)
+    const { EditorContent } = await import('@tiptap/react')
+    render(
+      <EditorBlockHandle editor={e} actions={(b) => <MenuItem label={`Copy link ${b.id}`} onClick={() => {}} />}>
+        <EditorContent editor={e} />
+      </EditorBlockHandle>,
+    )
+    const user = userEvent.setup()
+    await act(async () => user.hover(screen.getByText('two')))
+    const handle = screen.getByRole('button', { name: 'Block menu' })
+    expect(handle.getAttribute('draggable')).toBe('false')
+    await press(user, handle)
+    expect(screen.getAllByRole('menuitem').map((r) => r.textContent)).toEqual(['Copy link p2'])
+  })
+
+  it('draws no handle before its editor exists', async () => {
+    render(
+      <EditorBlockHandle editor={null} actions={() => <MenuItem label="Copy link" onClick={() => {}} />}>
+        <div>
+          <p data-block-id="r1">not yet</p>
+        </div>
+      </EditorBlockHandle>,
+    )
+    await userEvent.setup().hover(screen.getByText('not yet'))
+    expect(screen.queryByRole('button', { name: 'Block menu' })).toBeNull()
+  })
+})

package/src/BlockHandle.tsx

@@ -0,0 +1,220 @@
+import { useCallback, useEffect, useRef, useState, type DragEvent, type MouseEvent, type ReactNode } from 'react'
+import type { BaseUIEvent } from '@base-ui/react/types'
+import { IconGripVertical } from '@tabler/icons-react'
+import { cn } from './cn'
+import { IconButton } from './IconButton'
+import { Menu, MenuSeparator } from './Menu'
+
+/** The block the pointer is on: its §13.3 id, its element, and — in an editor — where it starts. */
+export interface HandleBlock {
+  /** `undefined` only for a block that has none yet, which nothing can address. */
+  id: string | undefined
+  element: HTMLElement
+  /** Position before the block in the editor's document; absent when reading. */
+  pos?: number
+}
+
+/** What `EditorBlockHandle` hands this part to make it edit. A reading surface leaves it off. */
+export interface BlockHandleEditing {
+  /** The block level with `y`, in the editor's own document. */
+  find: (y: number) => HandleBlock | null
+  /** The editing rows, before the caller's. */
+  rows: (block: HandleBlock) => ReactNode
+  /** Starts the browser's drag of the block; the handle is draggable only with this. */
+  startDrag: (block: HandleBlock, event: globalThis.DragEvent) => void
+  /** Drops the dragged block before `target`, or after it: a drop in the gutter, where the editor has none. */
+  drop: (target: HandleBlock, after: boolean) => void
+  endDrag: () => void
+  /** Calls back when the document changes, so a block found before is found again. Returns the unsubscribe. */
+  onChange: (changed: () => void) => () => void
+}
+
+export interface BlockHandleProps {
+  /** The caller's own rows — a link to the block, a comment on it. Reading, they are the whole menu; with none, no handle is drawn. */
+  actions?: (block: HandleBlock) => ReactNode
+  /** Given by `EditorBlockHandle` (from `@estiva-app/ui/editor`). Leave it off to read. */
+  editing?: BlockHandleEditing
+  /** What the blocks are drawn in. Reading: a surface whose top-level elements carry `data-block-id`, as `RichText` draws. */
+  children: ReactNode
+  className?: string
+}
+
+/** A block's id as a reading surface writes it: on the element, or on the first inside it (a table's wrapper). */
+function readId(element: HTMLElement): string | undefined {
+  const own = element.getAttribute('data-block-id') ?? element.querySelector('[data-block-id]')?.getAttribute('data-block-id')
+  return own || undefined
+}
+
+/** The last of `blocks` whose top is at or above `y` — the gap between two blocks belongs to the one before. */
+export function blockAtY(blocks: readonly HandleBlock[], y: number): HandleBlock | null {
+  let found: HandleBlock | null = null
+  for (const block of blocks) {
+    if (block.element.getBoundingClientRect().top > y) break
+    found = block
+  }
+  return found ?? blocks[0] ?? null
+}
+
+/** The top-level blocks of a reading surface: its root's children that carry an id. */
+function readingBlocks(root: Element | null): HandleBlock[] {
+  if (!root) return []
+  return Array.from(root.children)
+    .filter((el): el is HTMLElement => el instanceof HTMLElement)
+    .map((element) => ({ id: readId(element), element }))
+    .filter((b) => b.id !== undefined)
+}
+
+/** The handle's 24px, against the block's first line. */
+const HANDLE = 24
+
+/**
+ * How far down the block the handle starts, so it is centred on the first
+ * line: a heading's line is taller than a paragraph's. A table's or a list's
+ * first line is its first descendant's.
+ */
+function firstLineOffset(element: HTMLElement): number {
+  const text = element.querySelector<HTMLElement>('p, h1, h2, h3, pre, li') ?? element
+  const line = parseFloat(getComputedStyle(text).lineHeight)
+  if (!Number.isFinite(line)) return 0
+  const inset = text === element ? 0 : text.getBoundingClientRect().top - element.getBoundingClientRect().top
+  return inset + (line - HANDLE) / 2
+}
+
+/**
+ * The handle at the left of the block under the pointer, and the block's menu
+ * behind it. Reading, the menu is the caller's rows only, so someone who
+ * cannot edit can still point at one block — copy a link to it, comment on
+ * it. In an editor, `EditorBlockHandle` adds the drag, Turn into, Duplicate
+ * and Delete.
+ *
+ * It sits in the gutter left of the content, 28px out, so wrapping the content
+ * moves nothing. The gutter counts as the block's, as in Notion: the handle
+ * stays while the pointer crosses to it.
+ */
+export function BlockHandle({ actions, editing, children, className }: BlockHandleProps) {
+  const frame = useRef<HTMLDivElement>(null)
+  const content = useRef<HTMLDivElement>(null)
+  const [block, setBlock] = useState<HandleBlock | null>(null)
+  const [top, setTop] = useState(0)
+  const [open, setOpen] = useState(false)
+
+  const follow = useCallback(
+    (y: number) => {
+      if (!content.current || !frame.current) return
+      const found = editing ? editing.find(y) : blockAtY(readingBlocks(content.current.firstElementChild), y)
+      setBlock(found)
+      if (found) setTop(found.element.getBoundingClientRect().top - frame.current.getBoundingClientRect().top + firstLineOffset(found.element))
+    },
+    [editing],
+  )
+
+  // A block moved or deleted under the handle would leave its rows acting on a stale position.
+  useEffect(() => {
+    if (!editing) return
+    return editing.onChange(() => {
+      if (!open) setBlock(null)
+    })
+  }, [editing, open])
+
+  const rows = editing && block ? editing.rows(block) : null
+  const own = actions && block ? actions(block) : null
+
+  /*
+    A block dragged down the gutter lands by height, as in Notion: the top half
+    of a block puts it before, the bottom half after, and the line shows where.
+    Over the text, the editor draws its own line and makes its own drop.
+  */
+  const dragging = useRef(false)
+  const [line, setLine] = useState<number | null>(null)
+  const inGutter = (e: DragEvent<HTMLDivElement>) => dragging.current && !!editing && !!content.current && !content.current.contains(e.target as Node)
+  const landing = (y: number) => {
+    const target = editing?.find(y)
+    if (!target || !frame.current) return null
+    const box = target.element.getBoundingClientRect()
+    const after = y > box.top + box.height / 2
+    // Midway across the gap to the neighbour, where the editor draws its own line.
+    const neighbour = (after ? target.element.nextElementSibling : target.element.previousElementSibling)?.getBoundingClientRect()
+    const edge = after ? (neighbour ? (box.bottom + neighbour.top) / 2 : box.bottom) : neighbour ? (neighbour.bottom + box.top) / 2 : box.top
+    return { target, after, top: edge - frame.current.getBoundingClientRect().top }
+  }
+  const endDrag = () => {
+    dragging.current = false
+    setLine(null)
+    editing?.endDrag()
+  }
+
+  return (
+    <div
+      ref={frame}
+      className={cn('relative', className)}
+      onMouseMove={(e) => {
+        if (!open) follow(e.clientY)
+      }}
+      onMouseLeave={() => {
+        if (!open) setBlock(null)
+      }}
+      onDragOver={(e) => {
+        if (!inGutter(e)) return setLine(null)
+        e.preventDefault()
+        setLine(landing(e.clientY)?.top ?? null)
+      }}
+      onDrop={(e) => {
+        if (inGutter(e)) {
+          e.preventDefault()
+          const at = landing(e.clientY)
+          if (at) editing?.drop(at.target, at.after)
+        }
+        // The drop can redraw the document and take the handle with it, before its dragend.
+        endDrag()
+      }}
+      onDragLeave={(e) => {
+        if (!frame.current?.contains(e.relatedTarget as Node)) setLine(null)
+      }}
+    >
+      <div ref={content}>{children}</div>
+      {/* The gutter is the frame's own, so the pointer on its way from the text to the handle never leaves it. */}
+      <div aria-hidden className="absolute inset-y-0 -left-7 w-7" />
+      {line !== null && <div aria-hidden className="pointer-events-none absolute inset-x-0 h-px bg-accent-primary" style={{ top: line }} />}
+      {block && (rows || own) && (
+        // The top is the block's, measured: it depends on the document, not on a size of ours.
+        <div className={cn('absolute -left-7', rows && 'cursor-grab active:cursor-grabbing')} style={{ top }}>
+          <Menu
+            open={open}
+            onOpenChange={setOpen}
+            trigger={
+              <IconButton
+                aria-label="Block menu"
+                tooltip={rows ? 'Drag to move, click for the menu' : 'Menu'}
+                draggable={!!rows}
+                // Base UI opens a menu on the press, so a drag flashed it open.
+                // The handle's menu opens on the click instead, as Notion's does:
+                // a press that becomes a drag never clicks.
+                onMouseDown={(e: BaseUIEvent<MouseEvent<HTMLButtonElement>>) => e.preventBaseUIHandler()}
+                onClick={(e: BaseUIEvent<MouseEvent<HTMLButtonElement>>) => {
+                  e.preventBaseUIHandler()
+                  setOpen((was) => !was)
+                }}
+                onDragStart={(e: DragEvent<HTMLButtonElement>) => {
+                  if (!editing || !rows) return
+                  setOpen(false)
+                  dragging.current = true
+                  editing.startDrag(block, e.nativeEvent)
+                }}
+                onDragEnd={() => {
+                  endDrag()
+                  setBlock(null)
+                }}
+              >
+                <IconGripVertical size={16} stroke={1.5} />
+              </IconButton>
+            }
+          >
+            {rows}
+            {rows && own && <MenuSeparator />}
+            {own}
+          </Menu>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/CollapsibleSection.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { IconPlus } from '@tabler/icons-react'
 import { Chip } from './Chip'
 import { CollapsibleSection } from './CollapsibleSection'
+import { MenuItem } from './Menu'
 import { NavItem } from './NavItem'
 
 /** A section that opens and closes: the header's title is the toggle, and the rows slide. */
@@ -9,7 +10,7 @@ const meta = {
   title: 'Navigation/CollapsibleSection',
   component: CollapsibleSection,
   decorators: [(Story) => <div className="w-[280px]"><Story /></div>],
-  args: { title: 'Section', contentClassName: 'gap-px', children: null },
+  args: { title: 'Section', contentClassName: 'gap-0.5', children: null },
   argTypes: { children: { control: false }, actions: { control: false } },
   render: (args) => (
     <CollapsibleSection {...args}>
@@ -48,6 +49,18 @@ export const AsARow: Story = {
   args: { title: 'Folder', look: 'row' },
 }
 
+/** `menu`: the section's "More options" ⋮, after its actions — a folder's Rename, Archive. Hover the title. */
+export const WithMenu: Story = {
+  args: {
+    menu: (
+      <>
+        <MenuItem label="Rename" />
+        <MenuItem label="Delete" destructive />
+      </>
+    ),
+  },
+}
+
 /** `indent`: the heading look, its rows starting under its title, past the chevron — a folder in a sidebar. */
 export const Indented: Story = {
   args: { title: 'Group', indent: true },

package/src/CollapsibleSection.tsx

@@ -32,10 +32,16 @@ export interface CollapsibleSectionProps {
   onOpenChange?: (open: boolean) => void
   /** Remember open or closed in this browser, under this key. The app prefixes it. */
   storageKey?: string
+  /** 16px, before the title; the arrow takes its place on hover — `SectionHeader`'s. */
+  icon?: ReactNode
   /** Beside the title and always visible, before the actions — a count. `SectionHeader`'s. */
   trailing?: ReactNode
   /** Beside the title, revealed on hover or focus — `SectionHeader`'s. */
   actions?: SectionAction[]
+  /** Beside the actions, revealed with them: the section's "More options" menu, `MenuItem`s — `SectionHeader`'s. */
+  menu?: ReactNode
+  /** The ⋮'s accessible name — `SectionHeader`'s. */
+  menuLabel?: string
   showActions?: 'hover' | 'always'
   /**
    * `heading` (default): the title is a section heading. `row`: the fold is a
@@ -79,7 +85,7 @@ function writeStored(key: string | undefined, open: boolean) {
   }
 }
 
-export function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, trailing, actions, showActions, look = 'heading', indent = false, children, className, contentClassName }: CollapsibleSectionProps) {
+export function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, icon, trailing, actions, menu, menuLabel, showActions, look = 'heading', indent = false, children, className, contentClassName }: CollapsibleSectionProps) {
   const [openState, setOpenState] = useState(() => readStored(storageKey) ?? defaultOpen)
   const open = openProp ?? openState
   const setOpen = (next: boolean) => {
@@ -89,7 +95,7 @@ export function CollapsibleSection({ title, defaultOpen = true, open: openProp,
   }
   return (
     <Collapsible.Root open={open} onOpenChange={setOpen} className={cn('flex flex-col', className)}>
-      <SectionHeader title={title} chevron isExpanded={open} trailing={trailing} actions={actions} showActions={showActions} look={look} className="shrink-0" render={<Collapsible.Trigger />} />
+      <SectionHeader title={title} chevron icon={icon} isExpanded={open} trailing={trailing} actions={actions} menu={menu} menuLabel={menuLabel} showActions={showActions} look={look} className="shrink-0" render={<Collapsible.Trigger />} />
       {/* The slide: Base UI measures the panel and writes its height to a
           variable — `auto` again once the slide ends, so rows that arrive
           later are not clipped — and the panel is 0 high on its opening frame
@@ -101,8 +107,8 @@ export function CollapsibleSection({ title, defaultOpen = true, open: openProp,
         className={COLLAPSIBLE_PANEL_CLASSES}
       >
         {/* A row's rows start under its title: the 16px chevron and its 8px gap
-            (pl-6). An indented heading's: its 12px chevron and 4px gap (pl-4). */}
-        <div className={cn('flex flex-col', look === 'row' ? 'pl-6' : indent && 'pl-4', contentClassName)}>{children}</div>
+            (pl-6). An indented heading's: the same — its arrow is a row's now (5 October). */}
+        <div className={cn('flex flex-col pt-0.5', (look === 'row' || indent) && 'pl-6', contentClassName)}>{children}</div>
       </Collapsible.Panel>
     </Collapsible.Root>
   )

package/src/ContainerHeader.mdx

@@ -17,6 +17,10 @@ with a hairline under it.
   thread, a side panel. One per column.
 - The column's own actions — new, sort, close — as IconButtons with tooltips
   in `actions`.
+- `titleMenu`: the title opens a menu of the column's views, its chevron
+  drawn; the title and the chevron are one button.
+
+<Canvas of={ContainerHeaderStories.WithTitleMenu} />
 
 ## When not
 

package/src/ContainerHeader.stories.tsx

@@ -2,6 +2,7 @@ import type { Decorator, Meta, StoryObj } from '@storybook/react-vite'
 import { IconEdit, IconSortDescending, IconX } from '@tabler/icons-react'
 import { ContainerHeader } from './ContainerHeader'
 import { IconButton } from './IconButton'
+import { MenuItem } from './Menu'
 import { Card } from './Card'
 
 // The top of a column: a surface with a hairline, so the bar's own hairline and height can be seen.
@@ -18,6 +19,19 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+/** A title that opens a menu: the title and its chevron are one button. Click it. */
+export const WithTitleMenu: Story = {
+  args: {
+    title: 'View one',
+    titleMenu: (
+      <>
+        <MenuItem label="View one" selected />
+        <MenuItem label="View two" />
+      </>
+    ),
+  },
+}
+
 /** A string title, one line, alone. */
 export const Default: Story = {}
 

package/src/ContainerHeader.test.tsx

@@ -7,6 +7,8 @@
  */
 import { afterEach, describe, expect, it } from 'vitest'
 import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { MenuItem } from './Menu'
 import { ContainerHeader } from './ContainerHeader'
 
 afterEach(cleanup)
@@ -44,4 +46,10 @@ describe('ContainerHeader', () => {
     expect(container.firstElementChild!.children).toHaveLength(2)
     expect(screen.getByRole('button', { name: 'New' }).closest('div')!.className).toContain('gap-1')
   })
+
+  it('a title with a menu is one button, and opens it', async () => {
+    render(<ContainerHeader title="View one" titleMenu={<MenuItem label="View two" />} />)
+    await userEvent.click(screen.getByRole('button', { name: 'View one' }))
+    expect(await screen.findByRole('menuitem', { name: 'View two' })).not.toBeNull()
+  })
 })

package/src/ContainerHeader.tsx

@@ -1,6 +1,9 @@
 import type { ReactNode } from 'react'
 import { IconChevronDown } from '@tabler/icons-react'
+import { Button as BaseButton } from '@base-ui/react/button'
 import { cn } from './cn'
+import { MENU_TRIGGER_CLASSES } from './looks'
+import { Menu } from './Menu'
 
 /**
  * The bar across the top of a column — a list, a thread, a side panel: its
@@ -20,20 +23,45 @@ export interface ContainerHeaderProps {
   title: ReactNode
   /** A chevron after the title, for a title that opens something. */
   chevron?: boolean
+  /**
+   * The menu the title opens: `MenuItem`s — the column's views (Katerina,
+   * 5 October: Peek's Topics column, Topics or Folders). The title and its
+   * chevron are then one button, lit under the pointer; the chevron is drawn.
+   */
+  titleMenu?: ReactNode
   /** The column's own buttons, at the right edge: IconButtons with tooltips, 4px apart. */
   actions?: ReactNode
   className?: string
 }
 
-export function ContainerHeader({ title, chevron = false, actions, className }: ContainerHeaderProps) {
+export function ContainerHeader({ title, chevron = false, titleMenu, actions, className }: ContainerHeaderProps) {
   const text = typeof title === 'string'
+  const name = (
+    <div className={cn('flex items-center gap-1', text ? 'shrink-0' : 'min-w-0 flex-1')}>
+      {text ? <span className="whitespace-nowrap text-body-2-strong text-text-primary">{title}</span> : <div className="min-w-0 flex-1">{title}</div>}
+      {(chevron || titleMenu != null) && <IconChevronDown size={12} stroke={1.5} className="shrink-0 text-text-secondary" />}
+    </div>
+  )
   return (
-    <div className={cn('flex h-12 shrink-0 items-center justify-between overflow-hidden border-b border-border-subtle py-2 pr-4 pl-5', className)}>
+    // With a title menu the bar gives the button 6px of its left padding
+    // (pl-3.5 + the button's px-1.5 = pl-5): the words stay where a title's
+    // are, and the fill is inside the bar — a negative margin had it clipped
+    // (Katerina, 5 October).
+    <div className={cn('flex h-12 shrink-0 items-center justify-between overflow-hidden border-b border-border-subtle py-2 pr-4', titleMenu != null ? 'pl-3.5' : 'pl-5', className)}>
       <div className={cn('flex items-center gap-2 overflow-hidden', text ? 'shrink-0' : 'min-w-0 flex-1')}>
-        <div className={cn('flex items-center gap-1', text ? 'shrink-0' : 'min-w-0 flex-1')}>
-          {text ? <span className="whitespace-nowrap text-body-2-strong text-text-primary">{title}</span> : <div className="min-w-0 flex-1">{title}</div>}
-          {chevron && <IconChevronDown size={12} stroke={1.5} className="shrink-0 text-text-secondary" />}
-        </div>
+        {titleMenu != null ? (
+          <Menu
+            trigger={
+              <BaseButton type="button" className={cn('flex min-w-0 items-center px-1.5 py-1', MENU_TRIGGER_CLASSES)}>
+                {name}
+              </BaseButton>
+            }
+          >
+            {titleMenu}
+          </Menu>
+        ) : (
+          name
+        )}
       </div>
       {actions && (
         <div className="flex shrink-0 items-center justify-end gap-3">