@estiva-app/ui 0.55.0 → 0.57.0

package/src/SectionHeader.tsx

@@ -1,16 +1,17 @@
 import type { ReactNode } from 'react'
-import { IconChevronRight } from '@tabler/icons-react'
+import { IconChevronRight, IconDotsVertical } from '@tabler/icons-react'
 import { useRender } from '@base-ui/react/use-render'
 import { cn } from './cn'
 import { SIDEBAR_ROW_CLASSES, SIDEBAR_ROW_TEXT_CLASSES } from './looks'
 import { IconButton } from './IconButton'
+import { Menu } from './Menu'
 import { SectionLabel } from './SectionLabel'
 
 /**
  * The 32px row a section starts with (Peek's SectionHeader, 2026-09-01):
  * a SectionLabel, an optional collapse chevron that makes the title the
- * toggle, and actions that appear while the row is hovered or focused, as
- * IconButtons with tooltips.
+ * toggle, and actions that appear while the row is hovered or keyboard-focused,
+ * as IconButtons with tooltips.
  *
  * Three things changed on 2026-09-09, for `CollapsibleSection`:
  *
@@ -45,10 +46,19 @@ export interface SectionHeaderProps {
   title: string
   /** Collapsible: draws the chevron and makes the title a button that toggles. */
   chevron?: boolean
+  /**
+   * 16px, stroke 1.5, before the title — a folder's (Katerina, 5 October:
+   * Peek's Folders, the standard heading with a folder icon). With `chevron`
+   * the icon is what shows at rest and the arrow takes its place under the
+   * pointer or the keyboard, as a NavItem's icon turns into its arrow.
+   */
+  icon?: ReactNode
   isExpanded?: boolean
   onToggle?: () => void
   /**
-   * Beside the title and always visible, before the actions — a count.
+   * Beside the title and always visible, before the actions — a count. An
+   * `UnreadDot` instead sits in the last action's place (the ⋮'s, with a
+   * `menu`) and steps aside while the actions show, as a NavItem's dot does.
    *
    * The actions come and go with the hover; this does not, because a count is
    * information rather than an affordance. Peek's Screener header carries its
@@ -58,7 +68,17 @@ export interface SectionHeaderProps {
   trailing?: ReactNode
   /** Right-aligned, in the order given. */
   actions?: SectionAction[]
-  /** `hover` reveals the actions while the row is hovered or focused; `always` keeps them. */
+  /**
+   * The heading's "More options" menu: `MenuItem`s — what acts on the whole
+   * section, a folder's Rename or Archive (Katerina, 5 October: Peek's Folders
+   * page goes, and its folder actions move onto the folder's heading). The ⋮
+   * is NavItem's, after the actions and revealed with them; it stays while its
+   * menu is open.
+   */
+  menu?: ReactNode
+  /** The ⋮'s accessible name. Default "More options for" the title. */
+  menuLabel?: string
+  /** `hover` reveals the actions while the row is hovered or keyboard-focused (always on a screen with no hover); `always` keeps them. */
   showActions?: 'hover' | 'always'
   /**
    * `fill` lights the row under the pointer when it does something (a toggle,
@@ -82,23 +102,74 @@ export interface SectionHeaderProps {
   className?: string
 }
 
-export function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, trailing, actions, showActions = 'hover', hover = 'fill', look = 'heading', render, className }: SectionHeaderProps) {
+export function SectionHeader({ title, chevron = false, icon, isExpanded = true, onToggle, trailing, actions, menu, menuLabel, showActions = 'hover', hover = 'fill', look = 'heading', render, className }: SectionHeaderProps) {
   const row = look === 'row'
+  /*
+    One arrow for everything that folds, a NavItem's 16px, and the title 8px
+    after it as a row's label is (Katerina, 5 October: a folder heading and
+    the rows under it fold with one arrow; then every folding heading, Peek's
+    Starred too). It was 12px with a 4px gap; with an icon, the arrow now
+    fills the icon's place exactly.
+  */
+  const acts = (actions && actions.length > 0) || menu != null
+  /*
+    A dot sits in the place of the last button and steps aside while the
+    buttons show — the rows' dot and ⋮ share a place the same way (Katerina,
+    5 October). A count stays beside them: it is information (09-09).
+
+    "A dot" is whatever holds an `UnreadDot`, found by the `data-unread` it
+    draws, so the CSS decides (`has-[[data-unread]]`) rather than a check of
+    the element's type: that missed a dot in a tooltip or in an app's own
+    wrapper, which then sat beside the buttons as a count does. With no
+    buttons it sits on their axis all the same (`-mr-1`, as they are pulled).
+    In the last button's place it is the 24px slot at `right-1`, where the
+    buttons' box ends, gone while they show — on a screen with no hover, then,
+    always.
+  */
+  const trailingClasses = !acts
+    ? 'has-[[data-unread]]:-mr-1'
+    : showActions === 'hover' &&
+      'has-[[data-unread]]:pointer-events-none has-[[data-unread]]:absolute has-[[data-unread]]:inset-y-0 has-[[data-unread]]:right-1 has-[[data-unread]]:w-6 has-[[data-unread]]:justify-center has-[[data-unread]]:transition-opacity group-hover:has-[[data-unread]]:opacity-0 group-has-[:focus-visible]:has-[[data-unread]]:opacity-0 group-has-[[data-section-menu]_[aria-expanded=true]]:has-[[data-unread]]:opacity-0 [@media(hover:none)]:has-[[data-unread]]:opacity-0'
+  /*
+    The buttons show under the pointer, while the keyboard is anywhere in the
+    row — the title's toggle included, as a NavItem's ⋮ shows once its link
+    has keyboard focus; it was only one of the buttons themselves — and while
+    the menu is open. `aria-expanded` is asked of the buttons' own box: the
+    toggle says it too, and an open section would keep them for good.
+
+    A screen with no hover (a phone, a tablet) shows them always: nothing
+    there can point at the row, so hidden they could never be reached.
+  */
+  const reveal = showActions === 'hover' && 'opacity-0 transition-opacity group-hover:opacity-100 group-has-[:focus-visible]:opacity-100 has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100'
   const titleElement = useRender({
     render: render ?? (chevron ? <button type="button" onClick={onToggle} aria-expanded={isExpanded} /> : <span />),
     props: {
       // `text-left`: a button centres its text. `h-full` and `flex-1`: the
       // whole row up to the actions is the hit target, as it was when the
       // row itself carried the click.
-      className: cn('flex h-full min-w-0 flex-1 items-center text-left', row ? 'gap-2' : 'gap-1'),
+      // An icon is a row's: NavItem's 8px after it.
+      className: cn('flex h-full min-w-0 flex-1 items-center text-left', row || chevron || icon != null ? 'gap-2' : 'gap-1'),
       children: (
         <>
-          {chevron && (
-            <IconChevronRight
-              size={row ? 16 : 12}
-              stroke={1.5}
-              className={cn('shrink-0 transition-transform duration-150', !row && 'text-text-secondary', isExpanded && 'rotate-90')}
-            />
+          {icon != null ? (
+            <span className="relative flex size-4 shrink-0 items-center justify-center text-text-secondary">
+              <span className={cn('flex', chevron && 'transition-opacity group-hover:opacity-0 group-has-[:focus-visible]:opacity-0')}>{icon}</span>
+              {chevron && (
+                <IconChevronRight
+                  size={16}
+                  stroke={1.5}
+                  className={cn('absolute opacity-0 transition-[opacity,transform] duration-150 group-hover:opacity-100 group-has-[:focus-visible]:opacity-100', isExpanded && 'rotate-90')}
+                />
+              )}
+            </span>
+          ) : (
+            chevron && (
+              <IconChevronRight
+                size={16}
+                stroke={1.5}
+                className={cn('shrink-0 transition-transform duration-150', !row && 'text-text-secondary', isExpanded && 'rotate-90')}
+              />
+            )
           )}
           {look === 'quiet' ? (
             <span className="min-w-0 truncate text-caption text-text-muted">{title}</span>
@@ -116,7 +187,8 @@ export function SectionHeader({ title, chevron = false, isExpanded = true, onTog
   return (
     <div
       className={cn(
-        'group flex h-[32px] shrink-0 items-center gap-1 px-2',
+        // `relative`: a dot in the last button's place is placed against the row.
+        'group relative flex h-[32px] shrink-0 items-center gap-1 px-2',
         !row && 'transition-colors',
         // A row is NavItem's shape and colour: 6px corners, secondary words that brighten on hover.
         row ? cn(SIDEBAR_ROW_CLASSES, SIDEBAR_ROW_TEXT_CLASSES) : 'rounded-lg',
@@ -124,7 +196,10 @@ export function SectionHeader({ title, chevron = false, isExpanded = true, onTog
         // lights up, a fixed heading over rows does not (2026-09-09, the
         // Sidebar's fixed group).
         // A quiet label never lights up: it is a label; its button does.
-        hover === 'fill' && look !== 'quiet' && (chevron || (actions && actions.length > 0)) && 'hover:bg-bg-hover',
+        hover === 'fill' && look !== 'quiet' && (chevron || acts) && 'hover:bg-bg-hover',
+        // While its menu is open the pointer is on the menu, not the row: the
+        // row keeps its hover look, as a NavItem's does.
+        hover === 'fill' && look !== 'quiet' && menu != null && 'has-[[data-section-menu]_[aria-expanded=true]]:bg-bg-hover',
         className,
       )}
     >
@@ -132,23 +207,36 @@ export function SectionHeader({ title, chevron = false, isExpanded = true, onTog
       {/* Outside the title button, like the actions: a chip inside a button
           would be part of the button's accessible name and part of its hit
           target, and the count is neither. */}
-      {trailing != null && <div className="flex shrink-0 items-center">{trailing}</div>}
-      {actions && actions.length > 0 && (
+      {trailing != null && <div className={cn('flex shrink-0 items-center', trailingClasses)}>{trailing}</div>}
+      {acts && (
         <div
           // `-mr-1`: an IconButton is 24px around a 16px icon, so at the row's
           // `px-2` its icon ended 12px from the edge while a NavItem's number
           // ends 8px from it; pulled 4px, the icon and the number share a
           // right edge (Katerina, 2026-09-09; measured 4px off, then 0).
-          className={cn(
-            '-mr-1 flex shrink-0 items-center gap-1',
-            showActions === 'hover' && 'opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100',
-          )}
+          className="-mr-1 flex shrink-0 items-center"
         >
-          {actions.map((action) => (
-            <IconButton key={action.tooltip} tooltip={action.tooltip} aria-label={action.tooltip} onClick={action.onClick}>
-              {action.icon}
-            </IconButton>
-          ))}
+          <div className={cn('flex items-center gap-1', reveal)}>
+            {actions?.map((action) => (
+              <IconButton key={action.tooltip} tooltip={action.tooltip} aria-label={action.tooltip} onClick={action.onClick}>
+                {action.icon}
+              </IconButton>
+            ))}
+            {menu != null && (
+              <div data-section-menu className="flex items-center">
+                <Menu
+                  align="right"
+                  trigger={
+                    <IconButton tooltip="More options" aria-label={menuLabel ?? `More options for ${title}`}>
+                      <IconDotsVertical size={16} stroke={1.5} />
+                    </IconButton>
+                  }
+                >
+                  {menu}
+                </Menu>
+              </div>
+            )}
+          </div>
         </div>
       )}
     </div>

package/src/SectionLabel.tsx

@@ -45,9 +45,12 @@ export function SectionLabel({
   return (
     <span
       className={cn(
-        'text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest',
-        // Leaf's section labels are Signal's type (Katerina, 28 September),
-        // but a group that folds keeps Ship's (Katerina, 2 October).
+        'text-h5 leading-3',
+        // Ship's type in every theme but Leaf, whose section labels are the
+        // micro-label (Katerina, 28 September) unless the group folds (2
+        // October). Signal dropped its micro-label on 5 October: every one of
+        // Peek's section labels is Ship's type, folding or not, so Desk's
+        // Screener and its Urgent and Open work read as one.
         !folds && 'leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest',
         tone === 'secondary' ? 'text-text-secondary' : tone === 'muted' ? 'text-text-muted' : 'text-text-primary',
         truncate && 'min-w-0 truncate',

package/src/Select.test.tsx

@@ -104,6 +104,14 @@ describe('Select', () => {
     expect(screen.getByRole('combobox', { name: 'Status' }).getAttribute('aria-expanded')).toBe('true')
   })
 
+  it('puts 2px between options, as between a menu’s rows', async () => {
+    const user = userEvent.setup()
+    render(<Controlled initial="todo" />)
+    await user.click(screen.getByRole('combobox', { name: 'Status' }))
+    const [first] = await screen.findAllByRole('option')
+    expect(first.parentElement!.className.split(' ')).toContain('gap-0.5')
+  })
+
   it('opens from the keyboard, moves with arrows, picks with Enter, and gives focus back', async () => {
     const user = userEvent.setup()
     const onChange = vi.fn()

package/src/Select.tsx

@@ -174,8 +174,11 @@ export function Select({ value, onChange, options, size = 'default', ariaLabel,
              * to the right side". The rows keep their 4px inset, because the
              * padding that was the panel's is the content's; and the cap loses
              * its `- 0.5rem`, because that padding is inside the box that
-             * scrolls now, so 288px stays 288px. */}
-            <ScrollArea viewportClassName="max-h-[min(288px,var(--available-height))]" contentClassName="flex flex-col p-2">
+             * scrolls now, so 288px stays 288px.
+             *
+             * `gap-0.5`: 2px between the options, as between a menu's rows —
+             * they touched, while every menu had moved to 2px (0.56.0). */}
+            <ScrollArea viewportClassName="max-h-[min(288px,var(--available-height))]" contentClassName="flex flex-col gap-0.5 p-2">
             {options.map((option) => (
               <BaseSelect.Item
                 key={option.value}

package/src/Sidebar.tsx

@@ -35,7 +35,7 @@ export function Sidebar({ 'aria-label': ariaLabel = 'Workspace', children, class
       {/* The rows scroll in a ScrollArea: the bar takes no width, so the
           column's padding reads the same with a long list as with a short
           one (Katerina, 2026-09-08). The padding and the gap are the box's. */}
-      <ScrollArea className="min-h-0 flex-1" contentClassName="flex flex-col gap-px px-2.5 py-3">
+      <ScrollArea className="min-h-0 flex-1" contentClassName="flex flex-col gap-0.5 px-2.5 py-3">
         {children}
       </ScrollArea>
     </nav>

package/src/SuggestionMenu.stories.tsx

@@ -83,6 +83,21 @@ export const Default: Story = {
   ),
 }
 
+/** No heading: rows the editor ranks itself, 2px apart as under one. */
+export const NoHeading: Story = {
+  render: () => (
+    <AtACaret<Command>
+      ariaLabel="Commands"
+      width="w-[300px]"
+      maxHeight="max-h-[400px]"
+      sections={[{ items: FORMAT }]}
+      itemKey={(c) => c.id}
+      row={commandRow}
+      onSelect={() => {}}
+    />
+  ),
+}
+
 /** Tall rows: a face, a second line, and Enter's hint on the highlighted one. */
 export const TallRows: Story = {
   render: () => (

package/src/SuggestionMenu.test.tsx

@@ -48,6 +48,14 @@ describe('SuggestionMenu', () => {
     expect(screen.getByRole('group', { name: 'Second' })).toBeTruthy()
   })
 
+  it('puts 2px between rows, with a heading or without one', async () => {
+    draw({ sections: [{ items: ['One', 'Two'] }, { label: 'Second', items: ['Three'] }] })
+    const list = await screen.findByRole('listbox')
+    // The rows with no heading are the listbox's own; under a heading, MenuSection's.
+    expect(list.className.split(' ')).toContain('gap-0.5')
+    expect(screen.getByRole('group', { name: 'Second' }).firstElementChild!.className.split(' ')).toContain('gap-0.5')
+  })
+
   it('draws nothing when there is nothing to show', () => {
     draw({ sections: [{ label: 'First', items: [] }] })
     expect(screen.queryByRole('listbox')).toBeNull()

package/src/SuggestionMenu.tsx

@@ -177,8 +177,10 @@ export function SuggestionMenu<T>({ rect, editorElement, ariaLabel, width, maxHe
 
   return (
     <Popover anchor={rect} open={rect !== null} side="top" align="left" className={width} maxHeight={maxHeight} ariaLabel={ariaLabel}>
-      {/* The list the editor drives from its caret: a listbox, because Base UI's lists need a text field of their own. */}
-      <div id={listboxId} role="listbox" aria-label={ariaLabel} className="flex flex-col">
+      {/* The list the editor drives from its caret: a listbox, because Base UI's lists need a text field of their own.
+          `gap-0.5`: 2px between rows, as a menu's — a section with a heading
+          had them from `MenuSection`, and rows without one touched. */}
+      <div id={listboxId} role="listbox" aria-label={ariaLabel} className="flex flex-col gap-0.5">
         {shown.map((section, i) => (
           <div key={section.label ?? i} className="contents">
             {i > 0 && <MenuSeparator />}

package/src/eslint/no-copied-look.test.ts

@@ -27,7 +27,7 @@ const write = (path: string, text: string) => {
   mkdirSync(dirname(join(root, path)), { recursive: true })
   writeFileSync(join(root, path), text)
 }
-const SECTION_LABEL = 'text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-secondary'
+const SECTION_LABEL = 'text-h5 leading-3 leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-secondary'
 const registry = (entries: { name: string; sourceFile: string; looks: string[] }[]) => JSON.stringify({ schemaVersion: 2, entries })
 write('app/package.json', '{ "name": "app" }')
 write(
@@ -78,7 +78,7 @@ tester.run('no-copied-look', noCopiedLook, {
     {
       name: 'the same look, the words in another order and one class more',
       filename: app,
-      code: probe('<span className="text-text-secondary signal:tracking-widest signal:uppercase text-h5 signal:text-small signal:font-mono leading-3 shrink-0">x</span>'),
+      code: probe('<span className="text-text-secondary leaf:tracking-widest leaf:uppercase text-h5 leaf:text-small leaf:font-mono leading-3 shrink-0">x</span>'),
       errors: [{ messageId: 'usePart' }],
     },
     {

package/src/gates/app-checks.ts

@@ -235,7 +235,7 @@ export function appChecks(h: GateHelpers, { app = '.', page, chain = { ref: 'UIG
       { what: 'a title= is an error naming WithTooltip', run: probe(`import { Button } from '@estiva-app/ui'\n${component('<Button title="Delete">x</Button>')}`, 'error', 'WithTooltip') },
     ]),
     ticket('UIG-25', [
-      { what: "SectionLabel's class list, typed by hand, is a warning", run: probe(component('<span className="text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-secondary">Label</span>'), 'warning', 'SectionLabel') },
+      { what: "SectionLabel's class list, typed by hand, is a warning", run: probe(component('<span className="text-h5 leading-3 leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-secondary">Label</span>'), 'warning', 'SectionLabel') },
     ]),
     ticket('UIG-27', [
       { what: 'the installed package has Link', run: () => h.contains(installed, /\bLink\b/, 'the installed @estiva-app/ui exports Link') },

package/src/looks.ts

@@ -48,6 +48,12 @@ export const BARE_INPUT_CLASSES = 'bg-transparent text-text-primary placeholder:
 export const SIDEBAR_ROW_CLASSES = 'rounded-lg transition-colors'
 export const SIDEBAR_ROW_TEXT_CLASSES = 'text-text-secondary hover:text-text-primary'
 
+/** A quiet icon control: secondary, brightening on a hover fill — IconButton's `muted`. */
+export const MUTED_CONTROL_CLASSES = 'text-text-secondary hover:bg-bg-hover hover:text-text-primary'
+
+/** A control that opens a menu: a hover fill, held while its menu is up — PersonTrigger's row, and a ContainerHeader title with a menu. */
+export const MENU_TRIGGER_CLASSES = 'cursor-pointer rounded-md transition-colors hover:bg-bg-hover data-[popup-open]:bg-bg-hover'
+
 /**
  * A panel that slides open and shut on Base UI's Collapsible: Base UI measures
  * it and writes its height to a variable, `auto` again once the slide ends, and