@estiva-app/ui 0.54.0 → 0.56.0

package/src/NavTree.tsx

@@ -52,6 +52,10 @@ export interface NavTreeGroup {
   trailing?: ReactNode
   /** Beside the title, shown on hover or focus: "Open", typically. */
   actions?: SectionAction[]
+  /** The group's "More options" menu, after its actions: `MenuItem`s — a folder's Rename, Archive. */
+  menu?: ReactNode
+  /** 16px, before the title — a folder's; the arrow takes its place on hover. */
+  icon?: ReactNode
   defaultOpen?: boolean
   /** The caller owns whether the group is open. */
   open?: boolean
@@ -146,6 +150,8 @@ function Group({ group, selected, onSelect, storageKey }: { group: NavTreeGroup
       loading={group.nodes === null}
       trailing={group.trailing}
       actions={group.actions}
+      menu={group.menu}
+      icon={group.icon}
       defaultOpen={group.defaultOpen ?? holds(group.nodes, selected)}
       open={group.open}
       onOpenChange={group.onOpenChange}
@@ -167,6 +173,10 @@ export interface NavTreeSectionProps {
   trailing?: ReactNode
   /** Beside the title, shown on hover or focus: "Open", typically. */
   actions?: SectionAction[]
+  /** The group's "More options" menu, after its actions: `MenuItem`s. */
+  menu?: ReactNode
+  /** 16px, before the title; the arrow takes its place on hover. */
+  icon?: ReactNode
   /** Open unless told otherwise. */
   defaultOpen?: boolean
   /** The caller owns whether the group is open. */
@@ -189,13 +199,17 @@ export interface NavTreeSectionProps {
  * `groups`; an app whose groups each read their own data draws them itself,
  * as `NavTree`'s children.
  */
-export function NavTreeSection({ id, title, message, loading = false, trailing, actions, defaultOpen = true, open, onOpenChange, storageKey, onIntent, children }: NavTreeSectionProps) {
+export function NavTreeSection({ id, title, message, loading = false, trailing, actions, menu, icon, defaultOpen = true, open, onOpenChange, storageKey, onIntent, children }: NavTreeSectionProps) {
   const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
   useEffect(() => () => clearTimeout(timer.current), [])
   const intent = onIntent
   return (
     <div
-      className="shrink-0"
+      // 4px between groups, none above the first: a folded group's heading
+      // sits 38px from the next (Katerina, 5 October: 42 was too far from rows
+      // 33 apart; halved), and the list starts 16px under its header, as every
+      // list column does (on the first group it read 20, Topics against People).
+      className="mt-1 shrink-0 first:mt-0"
       data-nav-group={id}
       onPointerEnter={intent ? () => { clearTimeout(timer.current); timer.current = setTimeout(intent, NAV_TREE_INTENT_MS) } : undefined}
       onPointerLeave={intent ? () => clearTimeout(timer.current) : undefined}
@@ -210,8 +224,11 @@ export function NavTreeSection({ id, title, message, loading = false, trailing,
         storageKey={storageKey}
         trailing={trailing}
         actions={actions}
-        className="mt-2 shrink-0"
-        contentClassName="gap-px"
+        menu={menu}
+        icon={icon}
+        className="shrink-0"
+        // 2px between rows, as a list column's and a menu's (Katerina, 5 October).
+        contentClassName="gap-0.5"
       >
         {message !== undefined ? <Line message={message} /> : loading ? <SkeletonList rows={3} /> : children}
       </CollapsibleSection>

package/src/PersonTrigger.tsx

@@ -2,6 +2,7 @@ import type { ComponentPropsWithRef } from 'react'
 import { Button as BaseButton } from '@base-ui/react/button'
 import { IconChevronDown } from '@tabler/icons-react'
 import { cn } from './cn'
+import { MENU_TRIGGER_CLASSES } from './looks'
 import { Avatar } from './Avatar'
 import { Person, type PersonProps } from './Person'
 
@@ -66,13 +67,13 @@ export function PersonTrigger({ name, picture, fallback, size, open = false, com
       aria-haspopup="menu"
       aria-expanded={open}
       className={cn(
-        'flex h-8 min-h-8 cursor-pointer items-center gap-1.5 rounded-md pl-1.5 pr-1.5 text-body-2 text-text-primary transition-colors hover:bg-bg-hover',
+        'flex h-8 min-h-8 items-center gap-1.5 pl-1.5 pr-1.5 text-body-2 text-text-primary',
+        MENU_TRIGGER_CLASSES,
         open && 'bg-bg-hover',
         // Under a `Menu` the open state is Base UI's, not a prop: the trigger
-        // carries `data-popup-open` while its menu is up, and sets its own
-        // `aria-expanded`. Both spellings hold the fill, so this works whether
-        // the caller drives it or the menu does.
-        'data-[popup-open]:bg-bg-hover',
+        // carries `data-popup-open` while its menu is up (MENU_TRIGGER_CLASSES
+        // holds the fill for it), and sets its own `aria-expanded`; `open`
+        // holds it for a caller that drives it.
         className,
       )}
       {...props}

package/src/SectionHeader.mdx

@@ -24,6 +24,12 @@ title the toggle — that is where a section folds.
 
 <Canvas of={SectionHeaderStories.PersistentActions} />
 
+- `menu` gives the section a "More options" ⋮ after its actions, with what
+  acts on the whole section — a folder's Rename, Archive. It is **NavItem**'s
+  ⋮, revealed with the actions, and stays while its menu is open.
+
+<Canvas of={SectionHeaderStories.WithMenu} />
+
 - `look="quiet"`: a small grey label over a list whose rows are rows, not
   headings — "Folders" over the folders — with its action held on screen.
   It never lights up under the pointer; its button does.

package/src/SectionHeader.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { IconPlus, IconSortDescending } from '@tabler/icons-react'
 import { Chip } from './Chip'
+import { MenuItem, MenuSeparator } from './Menu'
 import { SectionHeader } from './SectionHeader'
 
 /** The 32px row a section starts with. Hover it: the row fills, and its actions appear. A section that folds is CollapsibleSection, whose header this is. */
@@ -49,6 +50,23 @@ export const StillOnHover: Story = {
   },
 }
 
+/** `menu`: the section's "More options", after its actions and revealed with them. The row keeps its hover look while the menu is open. */
+export const WithMenu: Story = {
+  args: {
+    chevron: true,
+    isExpanded: true,
+    onToggle: () => {},
+    menu: (
+      <>
+        <MenuItem label="Add" />
+        <MenuItem label="Rename" />
+        <MenuSeparator />
+        <MenuItem label="Delete" destructive />
+      </>
+    ),
+  },
+}
+
 /** A count beside the title, held on screen while the actions come and go. */
 export const WithTrailing: Story = {
   args: {

package/src/SectionHeader.test.tsx

@@ -7,7 +7,9 @@
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { MenuItem } from './Menu'
 import { SectionHeader } from './SectionHeader'
+import { UnreadDot } from './UnreadDot'
 
 afterEach(cleanup)
 
@@ -71,4 +73,28 @@ describe('SectionHeader, the trailing slot', () => {
     // Not part of the hover reveal either — a count is information, not an affordance.
     expect(count.closest('.opacity-0')).toBe(null)
   })
+
+  it('a dot sits in the last button’s place and steps aside for it; a count stays beside the buttons', () => {
+    const { container } = render(
+      <SectionHeader title="Section" trailing={<UnreadDot />} actions={[{ icon: <span />, tooltip: 'Open', onClick: () => {} }]} menu={<MenuItem label="Rename" />} />,
+    )
+    const dot = container.querySelector('[data-unread]')!
+    // Inside the buttons' box, over the last one — not a slot of its own before them.
+    expect(dot.closest('[class~="group/acts"]')).not.toBe(null)
+    expect(dot.parentElement!.className).toContain('group-hover:opacity-0')
+    expect(screen.getByRole('button', { name: 'More options for Section' })).not.toBeNull()
+  })
+
+  it('an icon shows at rest, and folding, the arrow is in its place', () => {
+    const { container } = render(<SectionHeader title="Section" chevron icon={<span data-icon />} onToggle={() => {}} />)
+    const icon = container.querySelector('[data-icon]')!
+    expect(icon.parentElement!.className).toContain('group-hover:opacity-0')
+    // The arrow is the icon's sibling, hidden until the pointer comes.
+    expect(icon.parentElement!.parentElement!.querySelector('svg')!.getAttribute('class')).toContain('group-hover:opacity-100')
+  })
+
+  it('a dot with no buttons sits on their axis all the same', () => {
+    const { container } = render(<SectionHeader title="Section" trailing={<UnreadDot />} />)
+    expect(container.querySelector('[data-unread]')!.parentElement!.className).toContain('-mr-1')
+  })
 })

package/src/SectionHeader.tsx

@@ -1,10 +1,12 @@
-import type { ReactNode } from 'react'
-import { IconChevronRight } from '@tabler/icons-react'
+import { isValidElement, type ReactNode } from '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'
+import { UnreadDot } from './UnreadDot'
 
 /**
  * The 32px row a section starts with (Peek's SectionHeader, 2026-09-01):
@@ -45,10 +47,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,6 +69,16 @@ export interface SectionHeaderProps {
   trailing?: ReactNode
   /** Right-aligned, in the order given. */
   actions?: SectionAction[]
+  /**
+   * 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 focused; `always` keeps them. */
   showActions?: 'hover' | 'always'
   /**
@@ -82,23 +103,51 @@ 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).
+  const dot = isValidElement(trailing) && trailing.type === UnreadDot
+  const shared = acts && showActions === 'hover' && dot
+  const reveal = showActions === 'hover' && 'opacity-0 transition-opacity group-hover:opacity-100 has-[:focus-visible]:opacity-100 has-[[aria-expanded=true]]: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>
@@ -124,7 +173,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 +184,47 @@ 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 && !shared && (
+        // A dot with no buttons to share a place with still sits on their
+        // axis — the rows' dots and ⋮ (`-mr-1`, as the buttons are pulled).
+        <div className={cn('flex shrink-0 items-center', dot && !acts && '-mr-1')}>{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="group/acts relative -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>
+          {shared && (
+            // The dot in the last button's 24px place, on the axis of its icon;
+            // gone while the buttons show.
+            <div className="pointer-events-none absolute inset-y-0 right-0 flex w-6 items-center justify-center transition-opacity group-hover:opacity-0 group-has-[:focus-visible]/acts:opacity-0 group-has-[[aria-expanded=true]]/acts:opacity-0">
+              {trailing}
+            </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/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/editor.ts

@@ -9,6 +9,7 @@
  */
 export { KeptSelection, SelectionToolbar, normalizeHref, type MarkId, type SelectionToolbarProps } from './SelectionToolbar'
 export { suggestionPopup, isSuggestionActive, isSuggestionOpen, type SuggestionPopupOptions } from './suggestionPopup'
+export { EditorBlockHandle, blockDropCursor, deleteBlock, moveBlock, duplicateBlock, startBlockDrag, type EditorBlockHandleProps, type BlockTurnInto } from './EditorBlockHandle'
 export {
   PersonMention,
   UrgentPersonMention,

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/index.ts

@@ -14,6 +14,7 @@ export { AttachmentCard, type AttachmentCardProps, type AttachmentCardState } fr
 export { Avatar, hueFor, initialsFor, type AvatarProps } from './Avatar'
 export { AvatarGroup, type AvatarGroupMember, type AvatarGroupProps } from './AvatarGroup'
 export { Banner, type BannerProps, type BannerTone } from './Banner'
+export { BlockHandle, blockAtY, type BlockHandleProps, type BlockHandleEditing, type HandleBlock } from './BlockHandle'
 export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './Button'
 export { Card, type CardAttention, type CardFill, type CardHover, type CardProps } from './Card'
 export { Checkbox, type CheckboxProps } from './Checkbox'

package/src/looks.ts

@@ -45,6 +45,12 @@ export const BARE_INPUT_CLASSES = 'bg-transparent text-text-primary placeholder:
 
 /** A sidebar row's shape and its words at rest, brightening under the pointer: NavItem, and SectionHeader's `row` (a folder among rows). */
 // 8px corners, a MenuItem row's (Katerina, 2 October).
+/** 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'
+
 export const SIDEBAR_ROW_CLASSES = 'rounded-lg transition-colors'
 export const SIDEBAR_ROW_TEXT_CLASSES = 'text-text-secondary hover:text-text-primary'
 

package/src/registry/registry.test.ts

@@ -48,20 +48,20 @@ describe('the registry builds', () => {
     expect(registry.entries.map((one) => one.name).sort()).toEqual(values.map((one) => one.name).sort())
   })
 
-  it('counts 122 names over 67 files: 98 components, 23 helpers and 1 hook (NavTree, NavTreeSection, the composer triggers and UnreadDot joined on 2 October)', () => {
+  it('counts 130 names over 69 files: 100 components, 29 helpers and 1 hook (NavTree, NavTreeSection, the composer triggers and UnreadDot joined on 2 October; BlockHandle and EditorBlockHandle (RIC-18) on 2 October, and moveBlock and blockDropCursor, the drop in the gutter, on 5 October)', () => {
     // The reconciliation GATES.md §24 explains. If this changes, that changes.
     // The ten `EDITOR_EXTENSIONS` count as components by their names; they are
     // editor extensions, documented on SelectionToolbar's, BlockNodes' and
     // ComposerTriggers' pages.
     const kinds = registry.entries.reduce<Record<string, number>>((all, one) => ({ ...all, [one.kind]: (all[one.kind] ?? 0) + 1 }), {})
-    expect(kinds).toEqual({ component: 98, helper: 23, hook: 1 })
-    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(67)
+    expect(kinds).toEqual({ component: 100, helper: 29, hook: 1 })
+    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(69)
   })
 
   it('gives every entry a purpose, from its own page or from the comment above it', () => {
     expect(registry.entries.filter((one) => one.purpose.trim() === '')).toEqual([])
-    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(63)
-    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(59)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(65)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(65)
   })
 
   it('takes a name with a page of its own from the page, and a name without one from the code', () => {

package/stories/Choosing.mdx

@@ -70,6 +70,8 @@ fork freely, owe nothing back, mention it on the package's ticket.
 | Bold, italic and the like over selected text in an editor | **SelectionToolbar**, from `@estiva-app/ui/editor` — it follows the selection by itself |
 | A composer's `@`, `!@`, `[` and `/` — mention a person, reference something, format or insert | **ComposerTriggers** — `PersonMention`, `UrgentPersonMention`, `CaptionedReference`, `ReferenceTrigger` and `SlashCommands` from `@estiva-app/ui/editor`; the app passes its people, its items and its own `/` rows |
 | An editor that saves a block document and must keep its block ids | **BlockNodes** — `BlockId`, `UnknownBlock`, `ReferenceNode` and `AttachmentNode` from `@estiva-app/ui/editor`, beside StarterKit and TableKit |
+| Move, turn, duplicate or delete one block of a document being edited | **EditorBlockHandle**, from `@estiva-app/ui/editor`, with your rows after its own |
+| Offer a link or a comment on one block of a document being read | **BlockHandle** — your rows only, and no Tiptap loaded |
 | Anything with a title, body and footer | **DialogShell** |
 | "Are you sure?" | **ConfirmDialog** |
 | A picture full screen, from a thumbnail | **Lightbox** — an **AttachmentCard** opens one by itself |