@estiva-app/ui 0.66.0 → 0.67.0

package/src/EditorTableControls.tsx

@@ -0,0 +1,255 @@
+import { useCallback, useEffect, useRef, useState, type MouseEvent, type ReactNode } from 'react'
+import type { Editor } from '@tiptap/core'
+import { TextSelection, type Command } from '@tiptap/pm/state'
+import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, deleteColumn, deleteRow, deleteTable, toggleHeader } from '@tiptap/pm/tables'
+import { IconColumnInsertLeft, IconColumnInsertRight, IconGripHorizontal, IconGripVertical, IconPlus, IconRowInsertBottom, IconRowInsertTop, IconTrash } from '@tabler/icons-react'
+import { cn } from './cn'
+import { IconButton } from './IconButton'
+import { FLOATING_SURFACE_CLASSES } from './looks'
+import { Menu, MenuItem, MenuSeparator } from './Menu'
+
+export interface EditorTableControlsProps {
+  /** The editor, with TableKit (`@tiptap/extension-table`) in its extensions. Not editable, or not there yet: no controls. */
+  editor: Editor | null
+  /** The `EditorContent`. */
+  children: ReactNode
+  className?: string
+}
+
+/** The cell the pointer is on, and the table and row it is in. */
+interface Hovered {
+  table: HTMLTableElement
+  row: HTMLTableRowElement
+  cell: HTMLTableCellElement
+}
+
+/** Where the controls go, measured from the frame: they depend on the document, not on a size of ours. */
+interface Placed {
+  tableBox: { top: number; left: number; width: number; height: number }
+  rowBox: { top: number; height: number }
+  columnBox: { left: number; width: number }
+}
+
+/*
+  Every row runs the table command with the caret in a cell, as the command
+  expects — the hovered cell's, or for a ➕ bar the last row's or the last
+  column's — and leaves the editor focused there, as the block menu does: the
+  person is still in the field, so an editor that saves when they leave it
+  saves this too.
+*/
+
+/** Puts the caret in `cell` and runs `command` there. */
+function inCell(editor: Editor, cell: HTMLTableCellElement, command: Command): boolean {
+  const { view } = editor
+  if (!view.dom.contains(cell)) return false
+  const at = view.posAtDOM(cell, 0)
+  view.dispatch(view.state.tr.setSelection(TextSelection.near(view.state.doc.resolve(at))))
+  const done = command(view.state, view.dispatch, view)
+  editor.commands.focus()
+  return done
+}
+
+/** A row of header cells only: the table's header row. */
+function isHeaderRow(row: HTMLTableRowElement): boolean {
+  return row.cells.length > 0 && Array.from(row.cells).every((c) => c.tagName === 'TH')
+}
+
+/**
+ * The cell's row, or the whole table when it is its only one: a table holds at
+ * least one row (prosemirror-tables refuses to delete it). Deleting the header
+ * row makes the next row the header, so the table still opens with one.
+ */
+export function deleteTableRow(editor: Editor, cell: HTMLTableCellElement): boolean {
+  const row = cell.closest('tr')
+  const table = cell.closest('table')
+  if (!row || !table || table.rows.length <= 1) return inCell(editor, cell, deleteTable)
+  const header = isHeaderRow(row)
+  return inCell(editor, cell, header ? (state, dispatch, view) => deleteRow(state, dispatch) && (!view || toggleHeader('row')(view.state, view.dispatch)) : deleteRow)
+}
+
+/** The same for a column: the last one deletes the table. */
+export function deleteTableColumn(editor: Editor, cell: HTMLTableCellElement): boolean {
+  const row = cell.closest('tr')
+  return inCell(editor, cell, row && row.cells.length > 1 ? deleteColumn : deleteTable)
+}
+
+/** A row after the last one: the ➕ under the table. */
+export function appendTableRow(editor: Editor, table: HTMLTableElement): boolean {
+  const last = table.rows[table.rows.length - 1]?.cells[0]
+  return !!last && inCell(editor, last, addRowAfter)
+}
+
+/** A column after the last one: the ➕ right of the table. */
+export function appendTableColumn(editor: Editor, table: HTMLTableElement): boolean {
+  const first = table.rows[0]
+  const last = first?.cells[first.cells.length - 1]
+  return !!last && inCell(editor, last, addColumnAfter)
+}
+
+function place(frame: HTMLElement, { table, row, cell }: Hovered): Placed {
+  const at = frame.getBoundingClientRect()
+  const t = table.getBoundingClientRect()
+  const r = row.getBoundingClientRect()
+  const c = cell.getBoundingClientRect()
+  return {
+    tableBox: { top: t.top - at.top, left: t.left - at.left, width: t.width, height: t.height },
+    rowBox: { top: r.top - at.top, height: r.height },
+    columnBox: { left: c.left - at.left, width: c.width },
+  }
+}
+
+const ICON = { size: 16, stroke: 1.5, className: 'text-text-secondary' } as const
+
+/**
+ * A ➕ press keeps the focus where it is, as the selection toolbar's buttons do:
+ * the person never left the field, so an editor that saves when they leave it
+ * does not save half-way, and History gets one line for the edit, not one per
+ * press. (A handle's menu takes the focus, as every menu does.)
+ */
+const keepFocus = (e: MouseEvent) => e.preventDefault()
+
+/** What a handle and a ➕ bar sit in: the elevated surface's border and fill, opaque over the table's lines, with no shadow at this size. */
+const HANDLE_BOX = cn(FLOATING_SURFACE_CLASSES, 'shadow-none')
+
+/**
+ * A table's own controls in an editor, as in Notion: point at a cell and a
+ * handle sits on its row's left edge and on its column's top edge; press one
+ * for Insert above and below (left and right), Delete, and Delete table. On
+ * the last row a ➕ bar under the table adds a row, and on the last column one
+ * right of it adds a column. Tab in
+ * the last cell adds a row too — that is TableKit's own.
+ *
+ * Deleting a table's only row or only column deletes the table, which cannot
+ * be left with none.
+ *
+ * Built on the editor library's own table commands; the controls are ours.
+ * Wrap the `EditorContent` in it, inside an `EditorBlockHandle` if there is
+ * one: the block handle stays the table's, in the gutter.
+ */
+export function EditorTableControls({ editor, children, className }: EditorTableControlsProps) {
+  const frame = useRef<HTMLDivElement>(null)
+  // The cell pointed at and where its controls go, as one: the boxes mean nothing without their elements.
+  const [hovered, setHovered] = useState<(Hovered & Placed) | null>(null)
+  // A menu that is up keeps its row and column, wherever the pointer goes.
+  const [menu, setMenu] = useState<'row' | 'column' | null>(null)
+  const editable = !!editor && editor.isEditable
+
+  const follow = useCallback(
+    (target: EventTarget | null) => {
+      if (!editor || !frame.current || !(target instanceof Element)) return
+      // On a control of ours: keep what it was drawn for.
+      if (target.closest('[data-table-control]')) return
+      const cell = target.closest<HTMLTableCellElement>('td, th')
+      const row = cell?.closest('tr')
+      const table = row?.closest('table')
+      if (!cell || !row || !table || !editor.view.dom.contains(table)) {
+        setHovered(null)
+        return
+      }
+      // Measured on every move, the same cell too: a panel resized or a cell's text wrapping moves the edges under a still pointer.
+      const next = { table, row, cell, ...place(frame.current, { table, row, cell }) }
+      setHovered((was) => (was && was.cell === cell && JSON.stringify([was.tableBox, was.rowBox, was.columnBox]) === JSON.stringify([next.tableBox, next.rowBox, next.columnBox]) ? was : next))
+    },
+    [editor],
+  )
+
+  /*
+    Any change to the document moves everything under the controls, so they go
+    until the pointer moves again: a row added or deleted here, and someone
+    else's edit loaded into the field — which an app does without an `update`
+    (`emitUpdate: false`), and which redraws the cells the controls point at.
+  */
+  useEffect(() => {
+    if (!editor) return
+    const changed = ({ transaction }: { transaction: { docChanged: boolean } }) => {
+      if (transaction.docChanged && !menu) setHovered(null)
+    }
+    editor.on('transaction', changed)
+    return () => {
+      editor.off('transaction', changed)
+    }
+  }, [editor, menu])
+
+  const shown = editable ? hovered : null
+  const run = (act: () => boolean) => () => {
+    if (editor) act()
+    setMenu(null)
+    setHovered(null)
+  }
+
+  return (
+    <div
+      ref={frame}
+      className={cn('relative', className)}
+      onMouseMove={(e) => {
+        if (!menu) follow(e.target)
+      }}
+      onMouseLeave={() => {
+        if (!menu) setHovered(null)
+      }}
+    >
+      {children}
+      {shown && editor && (
+        <>
+          {/* The row's handle, centred on the table's left edge: the box is ours, so the table's line does not show through it. */}
+          <div data-table-control className={cn(HANDLE_BOX, 'absolute -translate-x-1/2 -translate-y-1/2')} style={{ left: shown.tableBox.left, top: shown.rowBox.top + shown.rowBox.height / 2 }}>
+            <Menu
+              open={menu === 'row'}
+              onOpenChange={(open) => setMenu(open ? 'row' : null)}
+              trigger={
+                <IconButton aria-label="Row menu" tooltip="Row" className="h-6 w-4 p-0">
+                  <IconGripVertical size={16} stroke={1.5} />
+                </IconButton>
+              }
+            >
+              {/* Nothing goes above a header row: it is the table's first row, and a header anywhere else is no header (RichText, the agent's text). */}
+              {!isHeaderRow(shown.row) && <MenuItem label="Insert above" leading={<IconRowInsertTop {...ICON} />} onClick={run(() => inCell(editor, shown.cell, addRowBefore))} />}
+              <MenuItem label="Insert below" leading={<IconRowInsertBottom {...ICON} />} onClick={run(() => inCell(editor, shown.cell, addRowAfter))} />
+              <MenuSeparator />
+              <MenuItem label="Delete" destructive leading={<IconTrash size={16} stroke={1.5} className="text-error-default" />} onClick={run(() => deleteTableRow(editor, shown.cell))} />
+              <MenuItem label="Delete table" destructive leading={<IconTrash size={16} stroke={1.5} className="text-error-default" />} onClick={run(() => inCell(editor, shown.cell, deleteTable))} />
+            </Menu>
+          </div>
+          {/* The column's handle, centred on the table's top edge. */}
+          <div data-table-control className={cn(HANDLE_BOX, 'absolute -translate-x-1/2 -translate-y-1/2')} style={{ left: shown.columnBox.left + shown.columnBox.width / 2, top: shown.tableBox.top }}>
+            <Menu
+              open={menu === 'column'}
+              onOpenChange={(open) => setMenu(open ? 'column' : null)}
+              trigger={
+                <IconButton aria-label="Column menu" tooltip="Column" className="h-4 w-6 p-0">
+                  <IconGripHorizontal size={16} stroke={1.5} />
+                </IconButton>
+              }
+            >
+              <MenuItem label="Insert left" leading={<IconColumnInsertLeft {...ICON} />} onClick={run(() => inCell(editor, shown.cell, addColumnBefore))} />
+              <MenuItem label="Insert right" leading={<IconColumnInsertRight {...ICON} />} onClick={run(() => inCell(editor, shown.cell, addColumnAfter))} />
+              <MenuSeparator />
+              <MenuItem label="Delete" destructive leading={<IconTrash size={16} stroke={1.5} className="text-error-default" />} onClick={run(() => deleteTableColumn(editor, shown.cell))} />
+              <MenuItem label="Delete table" destructive leading={<IconTrash size={16} stroke={1.5} className="text-error-default" />} onClick={run(() => inCell(editor, shown.cell, deleteTable))} />
+            </Menu>
+          </div>
+          {/*
+            The ➕ bars, flush with the table so the pointer reaches them from a
+            cell without leaving it — the row's from the last row, the column's
+            from the last column. Anywhere else the one under the table would
+            lie over the top of the next block for nothing.
+          */}
+          {shown.row === shown.table.rows[shown.table.rows.length - 1] && (
+            <div data-table-control className={cn(HANDLE_BOX, 'absolute flex h-4')} style={{ left: shown.tableBox.left, top: shown.tableBox.top + shown.tableBox.height, width: shown.tableBox.width }}>
+              <IconButton aria-label="Add row" tooltip="Add row" className="h-full w-full p-0" onMouseDown={keepFocus} onClick={run(() => appendTableRow(editor, shown.table))}>
+                <IconPlus size={12} stroke={1.5} />
+              </IconButton>
+            </div>
+          )}
+          {shown.cell === shown.row.cells[shown.row.cells.length - 1] && (
+            <div data-table-control className={cn(HANDLE_BOX, 'absolute flex w-4')} style={{ left: shown.tableBox.left + shown.tableBox.width, top: shown.tableBox.top, height: shown.tableBox.height }}>
+              <IconButton aria-label="Add column" tooltip="Add column" className="h-full w-full p-0" onMouseDown={keepFocus} onClick={run(() => appendTableColumn(editor, shown.table))}>
+                <IconPlus size={12} stroke={1.5} />
+              </IconButton>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}

package/src/NavItem.mdx

@@ -30,6 +30,14 @@ count — a muted mono number whose tooltip says what it counts.
 
 <Canvas of={NavItemStories.WithMenu} />
 
+- One thing done often enough to stay in sight — take the row off a list —
+  is `action`: an icon, its tooltip and its handler, the shape of a
+  **SectionHeader**'s actions. It shows with the ⋮, in the count's place, and
+  before the ⋮ when the row has a menu too. One, never a row of them: a second
+  thing to do goes in the menu.
+
+<Canvas of={NavItemStories.WithAction} />
+
 - A row with rows under it takes them as `children`: more `NavItem`s. The
   row stays a link; while it is pointed at or focused, its icon becomes the
   arrow that folds them, in the icon's own place, and they slide shut. For a
@@ -77,6 +85,8 @@ import { NavItem } from '@estiva-app/ui'
 - 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.
+- `action` is `{ icon, tooltip, onClick }`: `action={{ icon: <IconX size={16} stroke={1.5} />, tooltip: 'Remove from list', onClick: remove }}`.
+  Its name is `{tooltip}: {label}`.
 - `children` start open; `defaultOpen={false}` starts them folded, and
   `open` with `onOpenChange` hands the state to the app. The arrow's name is
   `Hide what is under {label}` or `Show what is under {label}`.

package/src/NavItem.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { IconSquareRounded } from '@tabler/icons-react'
+import { IconSquareRounded, IconX } from '@tabler/icons-react'
 import { Chip } from './Chip'
 import { MenuItem } from './Menu'
 import { NavItem } from './NavItem'
@@ -109,3 +109,25 @@ export const UnreadUrgent: Story = {
 export const UnreadWithMenu: Story = {
   args: { icon: placeholder, unread: true, menu: MENU },
 }
+
+const REMOVE = { icon: <IconX size={16} stroke={1.5} />, tooltip: 'Remove from list', onClick: () => {} }
+
+/** One button of its own, in sight rather than in a menu: point at the row and it takes the count's place, as the ⋮ does. */
+export const WithAction: Story = {
+  args: { icon: placeholder, action: REMOVE },
+}
+
+/** The button and the ⋮ together: the button sits before it, and a long label stops short of both. */
+export const WithActionAndMenu: Story = {
+  args: { label: 'An item whose label runs much longer than the column has room for', icon: placeholder, action: REMOVE, menu: MENU },
+}
+
+/** A hint and a button: point at it and the chip shows, then the button — a row whose state is a word (here, archived) and which can be taken off the list. */
+export const WithActionAndHint: Story = {
+  args: { label: 'An item whose label runs much longer than the column has room for', icon: placeholder, action: REMOVE, hint: <Chip type="neutral" label="Archived" /> },
+}
+
+/** Unread, with a button: point at it and the button lands on the dot. */
+export const UnreadWithAction: Story = {
+  args: { icon: placeholder, unread: true, action: REMOVE },
+}

package/src/NavItem.test.tsx

@@ -141,3 +141,39 @@ describe('NavItem unread', () => {
     expect(menu?.className).toContain('right-1')
   })
 })
+
+describe('NavItem with a button of its own', () => {
+  const remove = (onClick = () => {}) => ({ icon: <svg />, tooltip: 'Remove from list', onClick })
+
+  it('draws the button beside the link, named for its row, and a click runs it, not the link', async () => {
+    const onClick = vi.fn()
+    const onLink = vi.fn()
+    render(<NavItem href="#" label="Item one" action={remove(onClick)} onClick={onLink} />)
+    const button = screen.getByRole('button', { name: 'Remove from list: Item one' })
+    expect(button.closest('a')).toBeNull()
+    await userEvent.click(button)
+    expect(onClick).toHaveBeenCalledOnce()
+    expect(onLink).not.toHaveBeenCalled()
+  })
+
+  it('shows with the row, as the ⋮ does: in its place at right-1, always on a screen with no hover', () => {
+    render(<NavItem href="#" label="Item one" action={remove()} />)
+    const box = screen.getByRole('button', { name: 'Remove from list: Item one' }).closest('[data-nav-menu]')!
+    expect(box.className.split(' ')).toEqual(expect.arrayContaining(['right-1', 'opacity-0', 'group-hover/nav:opacity-100', '[@media(hover:none)]:opacity-100']))
+  })
+
+  it('with a menu too, sits before the ⋮, and the row keeps room for both while they show', () => {
+    const { container } = render(<NavItem href="#" label="Item one" action={remove()} menu={<span>Action</span>} />)
+    const buttons = [...container.querySelectorAll('[data-nav-menu] button')].map((b) => b.getAttribute('aria-label'))
+    expect(buttons).toEqual(['Remove from list: Item one', 'More options for Item one'])
+    const kept = [...container.querySelectorAll('a > [aria-hidden="true"]')].map((s) => s.className.split(' '))
+    expect(kept).toHaveLength(2)
+    expect(kept[0]).toContain('w-5')
+    expect(kept[1]).toContain('w-6')
+  })
+
+  it('lands on the dot, which steps aside for it', () => {
+    const { container } = render(<NavItem href="#" label="Item one" unread action={remove()} />)
+    expect(container.querySelector('[data-unread]')!.parentElement!.className.split(' ')).toContain('group-hover/nav:opacity-0')
+  })
+})

package/src/NavItem.tsx

@@ -6,6 +6,7 @@ import { cn } from './cn'
 import { COLLAPSIBLE_PANEL_CLASSES, COUNT_TEXT_CLASSES, SIDEBAR_ROW_CLASSES, SIDEBAR_ROW_TEXT_CLASSES } from './looks'
 import { IconButton } from './IconButton'
 import { Menu } from './Menu'
+import type { SectionAction } from './SectionHeader'
 import { UnreadDot } from './UnreadDot'
 import { WithTooltip } from './Tooltip'
 
@@ -33,6 +34,13 @@ import { WithTooltip } from './Tooltip'
  * link, like the ⋮. The rows slide as `CollapsibleSection`'s do, indented
  * past the icon so their icons start under this row's label.
  *
+ * `action` is one button of its own beside the ⋮ — any icon, with its tooltip
+ * (Katerina, 14 October: Peek's Open work keeps its ✕ "Remove from list" in
+ * sight, not inside a menu). The same shape as a `SectionHeader`'s actions,
+ * and drawn the same way: an `IconButton` that shows with the ⋮, in the
+ * count's place, before the ⋮ when there is one. One, never a row of them: a
+ * second thing to do goes in the menu.
+ *
  * `hint` is shown only while the row is pointed at or focused, left of the
  * count — a neutral `Chip`, typically. It takes its own room while it shows,
  * so the label ends with "…" before it instead of running under it.
@@ -60,6 +68,8 @@ export interface NavItemProps extends Omit<ComponentPropsWithoutRef<'a'>, 'href'
   menu?: ReactNode
   /** The ⋮'s accessible name and tooltip. Default "More options for {label}". */
   menuLabel?: string
+  /** One button beside the ⋮, shown with it: any 16px icon, its tooltip and its handler — a `SectionHeader` action's shape. With a menu too, it sits before the ⋮. */
+  action?: SectionAction
   /** Shown only while the row is pointed at or focused, left of the count: a neutral `Chip`, typically. */
   hint?: ReactNode
   /** Something new here: brighter words, the label in medium, and the `UnreadDot` at the right. Say so in the row's own words for assistive tech too. */
@@ -85,6 +95,7 @@ export function NavItem({
   icon,
   menu,
   menuLabel,
+  action,
   hint,
   unread = false,
   urgent = false,
@@ -107,7 +118,8 @@ export function NavItem({
   }
   // The row draws beside it — the ⋮, the arrow — so the pointer can leave the
   // link for them while the row still reads as the one it is on.
-  const besides = menu != null || hasRows
+  const buttons = (menu != null ? 1 : 0) + (action ? 1 : 0)
+  const besides = buttons > 0 || hasRows
   // What sits at the right at rest, after the count: the dot, or the badge.
   const mark = unread ? (urgent ? <UrgentMark /> : <UnreadDot />) : null
   // Under the ⋮ while it shows: the count and the mark step aside for it.
@@ -117,7 +129,7 @@ export function NavItem({
   // hidden (Katerina, 5 October).
   // A screen with no hover shows the ⋮ always (below), so what it lands on
   // steps aside always: the row reads as it does under a pointer.
-  const stepsAside = menu != null && 'transition-opacity group-hover/nav:opacity-0 group-has-[:focus-visible]/nav:opacity-0 group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:opacity-0 [@media(hover:none)]:opacity-0'
+  const stepsAside = buttons > 0 && 'transition-opacity group-hover/nav:opacity-0 group-has-[:focus-visible]/nav:opacity-0 group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:opacity-0 [@media(hover:none)]:opacity-0'
 
   const row = (
     <a
@@ -134,7 +146,7 @@ export function NavItem({
         // look while the ⋮ is pointed at and while its menu is open. The same
         // for the arrow.
         besides && !active && 'group-hover/nav:bg-bg-hover group-hover/nav:text-text-primary',
-        menu != null && !active && 'group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:bg-bg-hover group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:text-text-primary',
+        buttons > 0 && !active && 'group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:bg-bg-hover group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:text-text-primary',
         className,
       )}
       {...props}
@@ -156,6 +168,11 @@ export function NavItem({
         // Takes room only while it shows, so the label gives way to it.
         <span className="hidden shrink-0 items-center group-hover/nav:flex group-has-[:focus-visible]/nav:flex">{hint}</span>
       )}
+      {buttons > 1 && (
+        // Two buttons: the second one's room (24px and the 4px between them, the
+        // row's 8px gap making up the rest), kept only while they show.
+        <span aria-hidden="true" className="hidden w-5 shrink-0 group-hover/nav:block group-has-[:focus-visible]/nav:block group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:block [@media(hover:none)]:block" />
+      )}
       {count ? (
         <WithTooltip label={countLabel ?? `${count} open`}>
           {/* A 16px box, centred: the slot is an icon's width, so a number
@@ -179,7 +196,7 @@ export function NavItem({
         // of the ⋮ (8px from the edge to the 16px box), one column with a
         // folder heading's dot and ⋮ (Katerina, 5 October).
         <span className={cn('-mr-1 flex shrink-0', stepsAside)}>{mark}</span>
-      ) : menu != null && !count ? (
+      ) : buttons > 0 && !count ? (
         // Nothing at the right, but a menu: no room is kept at rest, so the
         // label has the row's whole width; while the ⋮ shows, its 24px slot
         // is kept, so a long label ends before it instead of running under it.
@@ -210,7 +227,7 @@ export function NavItem({
           </IconButton>
         </div>
       )}
-      {menu != null && (
+      {buttons > 0 && (
         // `right-1`: the 24px button's 16px icon ends 8px from the row's
         // edge, where a count ends (px-2) — and where a SectionHeader's
         // actions and ⋮ end, so a folder's ⋮ and its rows' ⋮ are one column
@@ -219,17 +236,24 @@ export function NavItem({
         // right of the slot's centre.
         // On a screen with no hover it always shows: nothing there can point
         // at the row, and the menu has no other way in.
-        <div data-nav-menu className={cn('absolute inset-y-0 right-1 flex items-center', 'opacity-0 transition-opacity group-hover/nav:opacity-100 group-has-[:focus-visible]/nav:opacity-100 has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100')}>
-          <Menu
-            align="right"
-            trigger={
-              <IconButton tooltip="More options" aria-label={name}>
-                <IconDotsVertical size={16} stroke={1.5} />
-              </IconButton>
-            }
-          >
-            {menu}
-          </Menu>
+        <div data-nav-menu className={cn('absolute inset-y-0 right-1 flex items-center gap-1', 'opacity-0 transition-opacity group-hover/nav:opacity-100 group-has-[:focus-visible]/nav:opacity-100 has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100')}>
+          {action && (
+            <IconButton tooltip={action.tooltip} aria-label={`${action.tooltip}: ${label}`} onClick={action.onClick}>
+              {action.icon}
+            </IconButton>
+          )}
+          {menu != null && (
+            <Menu
+              align="right"
+              trigger={
+                <IconButton tooltip="More options" aria-label={name}>
+                  <IconDotsVertical size={16} stroke={1.5} />
+                </IconButton>
+              }
+            >
+              {menu}
+            </Menu>
+          )}
         </div>
       )}
     </div>

package/src/RichText.tsx

@@ -125,7 +125,8 @@ const RICH_TEXT_CLASSES = {
   syntax: '[&_:is(.hljs-keyword,.hljs-doctag,.hljs-type,.hljs-template-tag,.hljs-template-variable)]:text-syntax-keyword [&_.hljs-title]:text-syntax-function [&_:is(.hljs-number,.hljs-literal,.hljs-attr,.hljs-attribute,.hljs-meta,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id)]:text-syntax-constant [&_:is(.hljs-string,.hljs-regexp)]:text-syntax-string [&_:is(.hljs-built_in,.hljs-symbol)]:text-syntax-variable [&_.hljs-comment]:text-syntax-comment [&_:is(.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo)]:text-syntax-tag',
   /* A divider splits the text in two: 16px either side (Katerina, 9 October; 4 before). */
   divider: '[&_hr]:my-2 [&_hr]:border-border-default',
-  table: '[&_:is(th,td)>p]:m-0 [&_:is(th,td)]:border [&_:is(th,td)]:border-border-default [&_:is(th,td)]:px-2 [&_:is(th,td)]:py-1 [&_:is(th,td)]:text-left [&_:is(th,td)]:align-top [&_table]:w-full [&_table]:border-collapse [&_th]:bg-bg-code [&_th]:font-medium [&_th]:text-text-primary',
+  /* A table 16px above and below, as a divider (Katerina, 14 October; 8 before): the editor's row ➕ sits in that room, not over the next line. */
+  table: '[&_:is(th,td)>p]:m-0 [&_:is(th,td)]:border [&_:is(th,td)]:border-border-default [&_:is(th,td)]:px-2 [&_:is(th,td)]:py-1 [&_:is(th,td)]:text-left [&_:is(th,td)]:align-top [&_table]:my-2 [&_table]:w-full [&_table]:border-collapse [&_th]:bg-bg-code [&_th]:font-medium [&_th]:text-text-primary',
   /* Bold in the heading colour, not only heavier. An underlined word draws a faint line, so it does not read as a link (Katerina, 9 October). */
   marks: '[&_em]:italic [&_strong]:font-semibold [&_strong]:text-text-primary [&_u]:underline [&_u]:decoration-text-muted [&_u]:underline-offset-2',
   /* Lines 1.5 apart (Katerina, 9 October; 1.4 before). */

package/src/editor.ts

@@ -12,6 +12,7 @@ export { PastedImages, pastedImages, pastedImageName, type PastedImagesOptions,
 export { CodeBlockColours } from './CodeBlockColours'
 export { suggestionPopup, isSuggestionActive, isSuggestionOpen, type SuggestionPopupOptions } from './suggestionPopup'
 export { EditorBlockHandle, blockDropCursor, deleteBlock, moveBlock, duplicateBlock, startBlockDrag, type EditorBlockHandleProps, type BlockTurnInto } from './EditorBlockHandle'
+export { EditorTableControls, appendTableRow, appendTableColumn, deleteTableRow, deleteTableColumn, type EditorTableControlsProps } from './EditorTableControls'
 export {
   PersonMention,
   UrgentPersonMention,

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 144 names over 76 files: 109 components, 34 helpers and 1 hook (NavTree, NavTreeSection, the composer triggers and UnreadDot joined on 2 October; BlockHandle and EditorBlockHandle (RIC-18) on 2 October, moveBlock and blockDropCursor, the drop in the gutter, on 5 October, MembersPill and MembersDialog, moved from Peek (SHI-31), on 6 October, ShowMore on 7 October, AppProvider on 8 October, and KindIcon, thingKindOf and PastedImages with its two helpers, moved from Peek, on 8 October; CodeBlockColours, the coloured code block of the editor, on 9 October; Checklist, Callout, isChecklistTick and calloutLook (RIC-19) on 13 October)', () => {
+  it('counts 149 names over 77 files: 110 components, 38 helpers and 1 hook (NavTree, NavTreeSection, the composer triggers and UnreadDot joined on 2 October; BlockHandle and EditorBlockHandle (RIC-18) on 2 October, moveBlock and blockDropCursor, the drop in the gutter, on 5 October, MembersPill and MembersDialog, moved from Peek (SHI-31), on 6 October, ShowMore on 7 October, AppProvider on 8 October, and KindIcon, thingKindOf and PastedImages with its two helpers, moved from Peek, on 8 October; CodeBlockColours, the coloured code block of the editor, on 9 October; Checklist, Callout, isChecklistTick and calloutLook (RIC-19) on 13 October; EditorTableControls and its four actions (RIC-21) on 13 October)', () => {
     // The reconciliation GATES.md §24 explains. If this changes, that changes.
     // The `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: 109, helper: 34, hook: 1 })
-    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(76)
+    expect(kinds).toEqual({ component: 110, helper: 38, hook: 1 })
+    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(77)
   })
 
   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(72)
-    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(72)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(73)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(76)
   })
 
   it('takes a name with a page of its own from the page, and a name without one from the code', () => {
@@ -299,7 +299,7 @@ describe('the ids point at something', () => {
 describe('a second parser agrees', async () => {
   const docgen = await import('react-docgen').catch(() => null)
 
-  it.skipIf(!docgen)('finds the same props on all 79 components', async () => {
+  it.skipIf(!docgen)('finds the same props on all 80 components', async () => {
     if (!docgen) return
     const resolver = new docgen.builtinResolvers.FindExportedDefinitionsResolver({ limit: 0 })
     const byName = new Map(registry.entries.map((one) => [one.name, one]))

package/src/registry/siblings.test.ts

@@ -26,7 +26,7 @@ function appAt(folder: string, name: string, deps: Record<string, string> = UI,
   put(`${folder}/src/${part}.tsx`, `/** The ${part.toLowerCase()} of ${name}. */\nexport function ${part}() {\n  return <i />\n}\n`)
 }
 // A repository is a folder with `.git`: a directory, or a worktree's file.
-appAt('alpha', 'alpha-app', UI, 'Tabletop')
+appAt('alpha', 'alpha-app', UI, 'Sundial')
 put('alpha/.git/HEAD', 'ref: refs/heads/main\n')
 put('beta/package.json', JSON.stringify({ name: 'beta' }))
 put('beta/.git/HEAD', 'ref: refs/heads/main\n')
@@ -75,7 +75,7 @@ describe.skipIf(!existsSync(cli))('estiva-ui find, with nothing else typed', ()
   })
 
   it('answers the same from the folder that holds them', () => {
-    expect(find(workspace, 'tabletop')).toMatch(/^Tabletop {2}· .* · {2}alpha/m)
+    expect(find(workspace, 'sundial')).toMatch(/^Sundial {2}· .* · {2}alpha/m)
     expect(find(workspace, 'zzqqx')).toContain('Nothing in estiva-ui, alpha, beta matches')
   })
 

package/stories/Choosing.mdx

@@ -73,6 +73,7 @@ fork freely, owe nothing back, mention it on the package's ticket.
 | 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 |
+| Add or delete a table's rows and columns in a document being edited | **EditorTableControls**, from `@estiva-app/ui/editor`, inside the EditorBlockHandle |
 | 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** |