@estiva-app/ui 0.65.3 → 0.67.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.mdx

@@ -58,6 +58,14 @@ import { InlineChip, RichText } from '@estiva-app/ui'
   sideways.
 - Each block carries its `id` as `data-block-id`, for an app that points at
   one block.
+- A list item with `checked` is a checklist item, drawn with a box where its
+  bullet or number was; a ticked one's words, links and code are grey and struck
+  through. It still counts in a numbered list. Give `onTick` where the reader
+  may change the text and the box ticks with one click, handing you the block
+  id and the new state to save; without it the box is a picture, and says done
+  or not to a screen reader. Each box is named by its item's words. A quote with
+  a `tone` is a callout, on its tone's wash; a tone it does not know is drawn as
+  `note` (`calloutLook`).
 - **An editor wears the same look.** Put `richTextClassName()` (or
   `richTextClassName('small')`) on the editor's root, so what is being written
   looks exactly like what is read. It styles the elements inside the box,
@@ -70,6 +78,10 @@ import { richTextClassName } from '@estiva-app/ui'
 const editorAttributes = { class: richTextClassName('default', 'outline-none') }
 ```
 
+<Canvas of={RichTextStories.ChecklistAndCallouts} />
+
+<Canvas of={RichTextStories.NumberedAndNested} />
+
 ## What it owns
 
 Nothing. It only draws. Clicks and keys are yours.

package/src/RichText.stories.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { IconSquareRounded } from '@tabler/icons-react'
 import { RichText, type RichTextBlock, type RichTextRun } from './RichText'
@@ -140,3 +141,52 @@ export const CodeInALanguage: Story = {
     ],
   },
 }
+
+const task = (text: string, checked?: boolean): RichTextBlock => ({ type: 'listItem', checked, inline: [t(text)] })
+const callout = (tone: string, text: string): RichTextBlock => ({ type: 'blockquote', tone, inline: [t(text)] })
+
+/** A checklist, among a plain list's items, and each callout tone after a plain quote (RIC-19). The boxes tick: `onTick` is given. */
+export const ChecklistAndCallouts: Story = {
+  render: (args) => {
+    const [ticked, setTicked] = useState<Record<string, boolean>>({ c1: true })
+    const list = ['c1', 'c2', 'c3'].map((id, i) => ({ ...task(['Item one', 'Item two', 'Item three'][i], ticked[id] ?? false), id }))
+    return (
+      <RichText
+        {...args}
+        onTick={(id, checked) => setTicked((was) => ({ ...was, [id]: checked }))}
+        blocks={[
+          { type: 'bulletList', children: [...list, task('A plain item keeps its bullet')] },
+          { type: 'blockquote', inline: [t('A plain quote.')] },
+          callout('note', 'Note, the default callout. A tone this part does not know is drawn as this one.'),
+          callout('tip', 'Tip.'),
+          callout('important', 'Important.'),
+          callout('warning', 'Warning.'),
+          callout('caution', 'Caution.'),
+        ]}
+      />
+    )
+  },
+}
+
+const ticked = (text: string, checked: boolean | undefined, indent = 0): RichTextBlock => ({ ...task(text, checked), ...(indent ? { indent } : {}) })
+
+/**
+ * A numbered list counts its checklist items: the plain item after two of them
+ * is 3. A sub-item sits under a ticked item, not struck through (Katerina,
+ * review of #170), inside the ticked item's words as the editor draws it.
+ */
+export const NumberedAndNested: Story = {
+  args: {
+    blocks: [
+      { type: 'orderedList', children: [ticked('Item one', true), ticked('Item two', false), ticked('Item three, a plain item', undefined)] },
+      {
+        type: 'bulletList',
+        children: [
+          ticked('Item one', true),
+          ticked('A sub-item under it', false, 1),
+          { type: 'listItem', checked: true, inline: [t('A ticked item with '), t('[a link](https://example.com)'), t(' and '), t('code', 'code')] },
+        ],
+      },
+    ],
+  },
+}

package/src/RichText.test.tsx

@@ -146,6 +146,54 @@ describe('RichText', () => {
     }
     expect(richTextClassName('default', 'outline-none')).toContain('outline-none')
   })
+
+  const CHECKLIST: RichTextBlock[] = [
+    {
+      type: 'bulletList',
+      id: 'l1',
+      children: [
+        { type: 'listItem', id: 'i1', checked: true, inline: [{ text: 'ship', marks: [] }] },
+        { type: 'listItem', id: 'i2', checked: false, inline: [{ text: 'verify', marks: [] }] },
+        { type: 'listItem', id: 'i3', inline: [{ text: 'plain', marks: [] }] },
+      ],
+    },
+    { type: 'blockquote', id: 'q1', tone: 'warning', inline: [{ text: 'careful', marks: [] }] },
+    { type: 'blockquote', id: 'q2', tone: 'danger', inline: [{ text: 'unknown', marks: [] }] },
+  ]
+
+  it('draws a checklist item with its box, and a plain item without one (RIC-19)', () => {
+    const { container } = render(<RichText blocks={CHECKLIST} />)
+    expect([...container.querySelectorAll('li')].map((li) => li.getAttribute('data-checked'))).toEqual(['true', 'false', null])
+    // Without onTick the box is a picture: nothing to tab to or click, but a screen reader still hears done or not, by the item's words.
+    const boxes = screen.getAllByRole('checkbox')
+    expect(boxes.map((b) => [b.getAttribute('aria-label'), b.getAttribute('aria-checked'), b.getAttribute('aria-readonly'), b.tabIndex])).toEqual([
+      ['ship', 'true', 'true', -1],
+      ['verify', 'false', 'true', -1],
+    ])
+  })
+
+  it('ticks an item with one click when the app may change the text, each box named by its item', () => {
+    const onTick = vi.fn()
+    render(<RichText blocks={CHECKLIST} onTick={onTick} />)
+    const boxes = [screen.getByRole('checkbox', { name: 'ship' }), screen.getByRole('checkbox', { name: 'verify' })]
+    expect(boxes.map((b) => b.getAttribute('aria-checked'))).toEqual(['true', 'false'])
+    expect(screen.getAllByRole('checkbox')).toHaveLength(2)
+    fireEvent.click(boxes[1])
+    expect(onTick).toHaveBeenCalledWith('i2', true)
+  })
+
+  it('draws a callout in its tone, and one it does not know as a note', () => {
+    const { container } = render(<RichText blocks={CHECKLIST} />)
+    expect([...container.querySelectorAll('blockquote')].map((q) => [q.getAttribute('data-tone'), q.getAttribute('data-callout')])).toEqual([
+      ['warning', 'warning'],
+      ['danger', 'note'],
+    ])
+  })
+
+  it('draws an empty tone as a note, as the editor does (review of #170)', () => {
+    const { container } = render(<RichText blocks={[{ type: 'blockquote', tone: '', inline: [t('empty')] }]} />)
+    expect(container.querySelector('blockquote')!.getAttribute('data-callout')).toBe('note')
+  })
 })
 
 describe('an indented list item — MAN-13', () => {
@@ -181,4 +229,12 @@ describe('an indented list item — MAN-13', () => {
     const { container } = render(<RichText blocks={[{ type: 'bulletList', children: [item('a', 'one'), { ...item('b', 'two'), indent: -1 }, { ...item('c', 'three'), indent: Number.NaN }]}]} />)
     expect([...container.querySelector('ul')!.children].map((li) => li.getAttribute('data-block-id'))).toEqual(['a', 'b', 'c'])
   })
+
+  it('draws an item indented under a checklist item inside its words, after them (RIC-19)', () => {
+    const { container } = render(<RichText blocks={[{ type: 'bulletList', children: [{ ...item('a', 'done'), checked: true }, item('b', 'under it', 1)] }]} />)
+    const sub = container.querySelector('[data-block-id="b"]')!
+    expect(sub.closest('li[data-checked]')?.getAttribute('data-block-id')).toBe('a')
+    expect(sub.parentElement!.parentElement!.matches('li[data-checked="true"] > div')).toBe(true)
+    expect(sub.hasAttribute('data-checked')).toBe(false)
+  })
 })

package/src/RichText.tsx

@@ -1,4 +1,5 @@
 import type { MouseEvent, ReactNode } from 'react'
+import { Checkbox } from './Checkbox'
 import { cn } from './cn'
 import { Link } from './Link'
 import { codeColours } from './codeColours'
@@ -51,6 +52,10 @@ export interface RichTextBlock {
   start?: number
   /** How far a list item is indented under the items above it. A list's items stay flat; this draws them nested. */
   indent?: number
+  /** A checklist item's tick: `true` or `false`, absent on a plain item. */
+  checked?: boolean
+  /** A callout's tone (`note`, `tip`, `important`, `warning`, `caution`), absent on a plain quote. */
+  tone?: string
   attrs?: Record<string, unknown>
   inline?: readonly RichTextRun[]
   children?: readonly RichTextBlock[]
@@ -79,6 +84,12 @@ export interface RichTextProps {
    * `undefined` to leave it to the part, which draws its words.
    */
   renderBlock?: (block: RichTextBlock) => ReactNode | undefined
+  /**
+   * Ticks or unticks a checklist item, by its block id: its box is then a
+   * control, one click where the text is read. Without it the box is a picture
+   * of the state — for someone who may not change the text.
+   */
+  onTick?: (blockId: string, checked: boolean) => void
 }
 
 /**
@@ -97,6 +108,13 @@ const RICH_TEXT_CLASSES = {
   /* The line in the muted text grey, not the border grey: a border grey was 1.3 : 1 in Leaf (Katerina, 9 October). */
   // eslint-disable-next-line token-spacing/no-restricted-classes -- @estiva-escape: the quote line is Peek's, 3px, between the ramp's 2 and 4
   quote: '[&_blockquote>p]:m-0 [&_blockquote]:border-l-[3px] [&_blockquote]:border-text-muted [&_blockquote]:pl-2.5',
+  /*
+    A checklist item: the box where the bullet was, in the list's gutter, and the words where they were (Katerina, review of #170). The item stays a list item, so a numbered list still counts it; the box sits beside the row and adds nothing to its height, the same in the editor and here.
+    A ticked item's words grey and struck through, its links and code too (Katerina); the lists under it are not.
+  */
+  checklist: '[&_li[data-checked]]:relative [&_li[data-checked]]:list-none [&_[data-checklist-box]]:absolute [&_[data-checklist-box]]:-left-5 [&_[data-checklist-box]]:top-0.5 [&_[data-checklist-box]]:flex [&_li[data-checked=true]>div>p]:text-text-muted [&_li[data-checked=true]>div>p]:line-through [&_li[data-checked=true]>div>p_a]:text-text-muted [&_li[data-checked=true]>div>p_a]:decoration-text-muted [&_li[data-checked=true]>div>p_code]:border-transparent [&_li[data-checked=true]>div>p_code]:bg-transparent [&_li[data-checked=true]>div>p_code]:text-text-muted',
+  /* A callout: the quote's line in its tone's colour, on its tone's wash (RIC-19, to Katerina's review). `data-callout` is the tone as drawn — an unknown one is `note`. */
+  callout: '[&_blockquote[data-callout]]:rounded-sm [&_blockquote[data-callout]]:py-2 [&_blockquote[data-callout]]:pr-3 [&_blockquote[data-callout=note]]:border-info-default [&_blockquote[data-callout=note]]:bg-info-muted [&_blockquote[data-callout=tip]]:border-success-default [&_blockquote[data-callout=tip]]:bg-success-muted [&_blockquote[data-callout=important]]:border-accent-primary [&_blockquote[data-callout=important]]:bg-accent-muted [&_blockquote[data-callout=warning]]:border-warning-default [&_blockquote[data-callout=warning]]:bg-warning-muted [&_blockquote[data-callout=caution]]:border-error-default [&_blockquote[data-callout=caution]]:bg-error-muted',
   /* Code in a sentence: the code fill and a thin border, in the heading colour (Katerina, 9 October: option B; the amber of 0.64.0 was too much). */
   // eslint-disable-next-line token-values/no-restricted-classes -- @estiva-escape: code is 0.85 of the text around it, so it scales with a heading and with `small`; a named size is fixed
   code: '[&_:not(pre)>code]:rounded-sm [&_:not(pre)>code]:bg-bg-code [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:border [&_:not(pre)>code]:border-border-default [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-text-primary',
@@ -107,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). */
@@ -121,8 +140,8 @@ const RICH_TEXT_CLASSES = {
  * being written looks the same as what is read. Put it on the editor's root.
  */
 export function richTextClassName(size: RichTextSize = 'default', className?: string) {
-  const { base, headings, lists, quote, code, codeBlock, syntax, divider, table, marks } = RICH_TEXT_CLASSES
-  return cn(base, headings, lists, quote, code, codeBlock, syntax, divider, table, marks, RICH_TEXT_CLASSES[size], className)
+  const { base, headings, lists, quote, checklist, callout, code, codeBlock, syntax, divider, table, marks } = RICH_TEXT_CLASSES
+  return cn(base, headings, lists, quote, checklist, callout, code, codeBlock, syntax, divider, table, marks, RICH_TEXT_CLASSES[size], className)
 }
 
 /**
@@ -167,6 +186,16 @@ interface Draw {
   renderText: (text: string) => ReactNode
   renderReference: (reference: string, run: RichTextRun) => ReactNode
   renderBlock?: (block: RichTextBlock) => ReactNode | undefined
+  onTick?: (blockId: string, checked: boolean) => void
+}
+
+/** SPEC §13.3's callout tones — GitHub's alert kinds. */
+const CALLOUT_TONES: ReadonlySet<string> = new Set(['note', 'tip', 'important', 'warning', 'caution'])
+
+/** The tone a callout is drawn in: its own, or `note` for one this part does not know (§13.3). */
+export function calloutLook(tone: string): string {
+  const named = tone.toLowerCase()
+  return CALLOUT_TONES.has(named) ? named : 'note'
 }
 
 function Runs({ runs, draw }: { runs?: readonly RichTextRun[]; draw: Draw }) {
@@ -239,6 +268,43 @@ function Table({ block, draw }: { block: RichTextBlock; draw: Draw }) {
   )
 }
 
+/** An item's words, for its box's name: a box says which item it ticks (Katerina, review of #170). */
+const wordsOf = (item: RichTextBlock) => (item.inline ?? []).map((run) => run.text).join('').trim()
+
+/**
+ * One list item. A checklist item takes the editor's shape (`Checklist`): the
+ * box, then the words in a `div`, and `below` — the items indented under it —
+ * inside that `div` after them, as the editor draws them.
+ */
+function ListItem({ item, draw, below }: { item: RichTextBlock; draw: Draw; below?: ReactNode }) {
+  if (typeof item.checked !== 'boolean') {
+    return (
+      <li data-block-id={item.id}>
+        <Runs runs={item.inline} draw={draw} />
+        {below}
+      </li>
+    )
+  }
+  const { onTick } = draw
+  const id = item.id
+  const name = wordsOf(item) || 'Item'
+  const control = onTick && id ? (next: boolean) => onTick(id, next) : undefined
+  return (
+    <li data-block-id={id} data-checked={String(item.checked)}>
+      {/* Without `onTick` the box is a picture, so the box around it says done or not: a strike-through is not read out. */}
+      <span data-checklist-box="" {...(control ? {} : { role: 'checkbox', 'aria-checked': item.checked, 'aria-readonly': true, 'aria-label': name })}>
+        <Checkbox checked={item.checked} onChange={control} aria-label={name} />
+      </span>
+      <div>
+        <p>
+          <Runs runs={item.inline} draw={draw} />
+        </p>
+        {below}
+      </div>
+    </li>
+  )
+}
+
 interface NestedItem {
   item: RichTextBlock
   key: number
@@ -281,11 +347,13 @@ function Block({ block, draw }: { block: RichTextBlock; draw: Draw }): ReactNode
       const ordered = block.type === 'orderedList'
       const items = (nodes: readonly NestedItem[]): ReactNode[] =>
         nodes.map(({ item, key, below }) => (
-          <li key={item.id ?? key} data-block-id={item.id}>
-            <Runs runs={item.inline} draw={draw} />
-            {/* The list an indented item sits in is drawn, not stored: it has no id, and the type of the list around it. */}
-            {below.length > 0 && (ordered ? <ol>{items(below)}</ol> : <ul>{items(below)}</ul>)}
-          </li>
+          <ListItem
+            key={item.id ?? key}
+            item={item}
+            draw={draw}
+            // The list an indented item sits in is drawn, not stored: it has no id, and the type of the list around it.
+            below={below.length > 0 && (ordered ? <ol>{items(below)}</ol> : <ul>{items(below)}</ul>)}
+          />
         ))
       const top = items(nestItems(block.children ?? []))
       return ordered
@@ -293,7 +361,11 @@ function Block({ block, draw }: { block: RichTextBlock; draw: Draw }): ReactNode
         : <ul data-block-id={block.id}>{top}</ul>
     }
     case 'blockquote':
-      return <blockquote data-block-id={block.id}>{runs}</blockquote>
+      return (
+        <blockquote data-block-id={block.id} data-tone={block.tone} data-callout={typeof block.tone === 'string' ? calloutLook(block.tone) : undefined}>
+          {runs}
+        </blockquote>
+      )
     case 'codeBlock':
       // Literal: no marks, no links, no chips. A long line wraps; nothing scrolls sideways.
       // In a language highlight.js knows, each word takes its colour; in any other, the text as it is.
@@ -329,9 +401,10 @@ export function RichText({
   renderText = (text) => text,
   renderReference = (_reference, run) => run.text,
   renderBlock,
+  onTick,
 }: RichTextProps) {
   if (blocks.length === 0) return null
-  const draw: Draw = { renderText, renderReference, renderBlock }
+  const draw: Draw = { renderText, renderReference, renderBlock, onTick }
   return (
     <div data-rich-text className={richTextClassName(size)}>
       {blocks.map((block, i) => <Block key={block.id ?? i} block={block} draw={draw} />)}

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,
@@ -43,6 +44,9 @@ export {
 } from './ComposerTriggers'
 export {
   BlockId,
+  Checklist,
+  Callout,
+  isChecklistTick,
   UnknownBlock,
   ReferenceNode,
   AttachmentNode,

package/src/index.ts

@@ -52,7 +52,7 @@ export {
 } from './InlineChip'
 export { Lightbox, type LightboxProps } from './Lightbox'
 export { Link, type LinkProps, type LinkVariant } from './Link'
-export { RichText, richTextClassName, type RichTextProps, type RichTextBlock, type RichTextRun, type RichTextSize } from './RichText'
+export { RichText, richTextClassName, calloutLook, type RichTextProps, type RichTextBlock, type RichTextRun, type RichTextSize } from './RichText'
 export { IconButton, type IconButtonProps, type IconButtonVariant } from './IconButton'
 export { Kbd, type KbdProps } from './Kbd'
 export { KindIcon, thingKindOf, type KindIconProps, type ThingKind } from './KindIcon'

package/src/registry/registry.test.ts

@@ -26,7 +26,7 @@ import { SCHEMA_VERSION, validateRegistry, type Registry, type RegistryEntry } f
 const root = process.cwd()
 const registry = buildRegistry({ root })
 /** Editor extensions: named like components by the catalogue, and not React components. */
-const EDITOR_EXTENSIONS = ['KeptSelection', 'BlockId', 'UnknownBlock', 'ReferenceNode', 'AttachmentNode', 'PersonMention', 'UrgentPersonMention', 'CaptionedReference', 'ReferenceTrigger', 'SlashCommands', 'PastedImages', 'CodeBlockColours']
+const EDITOR_EXTENSIONS = ['KeptSelection', 'BlockId', 'UnknownBlock', 'ReferenceNode', 'AttachmentNode', 'PersonMention', 'UrgentPersonMention', 'CaptionedReference', 'ReferenceTrigger', 'SlashCommands', 'PastedImages', 'CodeBlockColours', 'Checklist', 'Callout']
 const entry = (name: string): RegistryEntry => {
   const found = registry.entries.find((candidate) => candidate.name === name)
   if (!found) throw new Error(`no entry for ${name}`)
@@ -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 140 names over 76 files: 107 components, 32 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)', () => {
+  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: 107, helper: 32, 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(68)
+    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** |