@estiva-app/ui 0.65.2 → 0.66.0

package/src/ComposerTriggers.tsx

@@ -433,14 +433,23 @@ export interface SlashCommand {
   keywords?: readonly string[]
   /** Runs once the `/query` that summoned the list has been removed. */
   run: (editor: Editor) => void
+  /**
+   * The extensions (by name) the row needs: an editor without one of them is
+   * not offered the row, so no row makes something the editor cannot hold.
+   */
+  needs?: readonly string[]
 }
 
+/** Whether an editor has every extension a row needs. */
+const offers = (editor: Editor, command: SlashCommand) =>
+  !command.needs || command.needs.every((name) => editor.extensionManager.extensions.some((extension) => extension.name === name))
+
 export interface SlashSection {
   label: string
   commands: readonly SlashCommand[]
 }
 
-export type FormatId = 'paragraph' | 'heading' | 'subheading' | 'quote' | 'bulletList' | 'orderedList' | 'code'
+export type FormatId = 'paragraph' | 'heading' | 'subheading' | 'quote' | 'bulletList' | 'orderedList' | 'code' | 'checklist' | 'note' | 'warning'
 
 export interface FormatDef {
   id: FormatId
@@ -466,6 +475,19 @@ export const FORMATS: readonly FormatDef[] = [
   { id: 'orderedList', label: 'Numbered list', trigger: '1.' },
 ]
 
+/**
+ * What only a document holds — a checklist item and a callout (RIC-19) — so
+ * only a block editor's `/` offers them (`formatSection('block')`): a
+ * message's text has no spelling for either. They need the `Checklist` and
+ * `Callout` extensions. Note and Warning are the two callouts offered (Miky,
+ * 2026-10-13); the other tones are read and kept, not offered.
+ */
+const DOCUMENT_FORMATS: readonly FormatDef[] = [
+  { id: 'checklist', label: 'Checklist', trigger: '[]' },
+  { id: 'note', label: 'Note' },
+  { id: 'warning', label: 'Warning' },
+]
+
 /** Code as a mark inside the line, or as a block of its own. */
 export type CodeFormat = 'inline' | 'block'
 
@@ -501,19 +523,50 @@ export function applyFormat(editor: Editor, id: FormatId, code: CodeFormat = 'in
       return run('toggleOrderedList')
     case 'code':
       return run(code === 'block' ? 'toggleCodeBlock' : 'toggleCode')
+    case 'checklist': {
+      // In a list, that item becomes one; elsewhere, the line becomes a list of one.
+      if (!editor.isActive('listItem') && !run('toggleBulletList')) return false
+      // An item already a checklist item keeps its tick.
+      if (typeof editor.getAttributes('listItem').checked === 'boolean') return true
+      return editor.chain().updateAttributes('listItem', { checked: false }).run()
+    }
+    case 'note':
+    case 'warning': {
+      if (!editor.isActive('blockquote') && !run('toggleBlockquote')) return false
+      return editor.chain().updateAttributes('blockquote', { tone: id }).run()
+    }
     default:
       return false
   }
 }
 
-/** The Format section every app's `/` opens with. */
+/** Words a row is also found by, beyond its id. */
+const KEYWORDS: Partial<Record<FormatId, string[]>> = {
+  checklist: ['todo', 'task'],
+  note: ['callout'],
+  warning: ['callout'],
+}
+
+/** The extension a row's block needs: without it the row would make a plain bullet or a plain quote (Katerina, review of #170). */
+const NEEDS: Partial<Record<FormatId, string[]>> = {
+  checklist: ['checklist'],
+  note: ['callout'],
+  warning: ['callout'],
+}
+
+/**
+ * The Format section every app's `/` opens with. A block editor's also offers
+ * a checklist and the callouts — only where the editor has the `Checklist` and
+ * `Callout` extensions (`SlashCommand.needs`).
+ */
 export function formatSection(code: CodeFormat = 'inline'): SlashSection {
   return {
     label: 'Format',
-    commands: FORMATS.map((format) => ({
+    commands: (code === 'block' ? [...FORMATS, ...DOCUMENT_FORMATS] : FORMATS).map((format) => ({
       key: `format-${format.id}`,
       row: { label: format.label, shortcut: (code === 'block' && format.blockTrigger) || format.trigger },
-      keywords: [format.id],
+      keywords: [format.id, ...(KEYWORDS[format.id] ?? [])],
+      ...(NEEDS[format.id] ? { needs: NEEDS[format.id] } : {}),
       run: (editor) => {
         applyFormat(editor, format.id, code)
       },
@@ -565,7 +618,10 @@ export const SlashCommands = Extension.create<SlashCommandsOptions>({
         char: '/',
         startOfLine: false,
         pluginKey: new PluginKey('slashCommands'),
-        items: ({ query }) => filterSlashSections(sections, query).flatMap((section, at) => section.commands.map((command) => ({ ...command, section: at }))),
+        items: ({ query, editor }) =>
+          filterSlashSections(sections, query).flatMap((section, at) =>
+            section.commands.filter((command) => offers(editor, command)).map((command) => ({ ...command, section: at })),
+          ),
         command: ({ editor, range, props }) => {
           editor.chain().focus().deleteRange(range).run()
           props.run(editor)

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'
@@ -84,6 +85,33 @@ export const WithTheAppsOwnParts: Story = {
   },
 }
 
+/** Items indented under the one above, two levels deep, in both lists: each level is the type of the list it sits in. */
+export const IndentedItems: Story = {
+  args: {
+    blocks: [
+      {
+        type: 'bulletList',
+        children: [
+          { type: 'listItem', inline: [t('Item one')] },
+          { type: 'listItem', indent: 1, inline: [t('Item one, under it')] },
+          { type: 'listItem', indent: 2, inline: [t('A level further in')] },
+          { type: 'listItem', indent: 1, inline: [t('Back one level')] },
+          { type: 'listItem', inline: [t('Item two')] },
+        ],
+      },
+      {
+        type: 'orderedList',
+        children: [
+          { type: 'listItem', inline: [t('The first step')] },
+          { type: 'listItem', indent: 1, inline: [t('Each level counts from one')] },
+          { type: 'listItem', indent: 1, inline: [t('Then two')] },
+          { type: 'listItem', inline: [t('The second step')] },
+        ],
+      },
+    ],
+  },
+}
+
 /** A block this part has no design for, from a later version: its words are drawn, never dropped. */
 export const UnknownBlock: Story = {
   args: {
@@ -113,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,4 +146,95 @@ 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', () => {
+  const item = (id: string, text: string, indent?: number): RichTextBlock => ({ type: 'listItem', id, inline: [t(text)], ...(indent ? { indent } : {}) })
+
+  it('draws an item inside the one above, in a list of the same type with no id', () => {
+    const { container } = render(
+      <RichText blocks={[{ type: 'orderedList', id: 'l1', children: [item('i1', 'intro'), item('i2', 'after', 1), item('i3', 'deeper', 2), item('i4', 'back')] }]} />,
+    )
+    const outer = container.querySelector('ol[data-block-id="l1"]')!
+    expect([...outer.children].map((li) => li.getAttribute('data-block-id'))).toEqual(['i1', 'i4'])
+    const inner = outer.querySelector(':scope > li > ol')!
+    expect(inner.hasAttribute('data-block-id')).toBe(false)
+    expect(inner.querySelector(':scope > li')?.getAttribute('data-block-id')).toBe('i2')
+    expect(inner.querySelector(':scope > li > ol > li')?.textContent).toBe('deeper')
+  })
+
+  it('never draws an item more than one level below the one before it', () => {
+    const { container } = render(<RichText blocks={[{ type: 'bulletList', children: [item('a', 'first', 2), item('b', 'next', 3)] }]} />)
+    const outer = container.querySelector('ul')!
+    expect([...outer.children].map((li) => li.getAttribute('data-block-id'))).toEqual(['a'])
+    expect(outer.querySelector(':scope > li > ul > li')?.getAttribute('data-block-id')).toBe('b')
+  })
+
+  it('never nests deeper than 8 levels (SPEC §13.3)', () => {
+    const deep = Array.from({ length: 20 }, (_, i) => item(`d${i}`, `level ${i}`, i))
+    const { container } = render(<RichText blocks={[{ type: 'bulletList', children: deep }]} />)
+    expect(container.querySelectorAll('ul').length).toBe(9)
+    expect(container.querySelector('[data-block-id="d19"]')!.parentElement).toBe(container.querySelector('[data-block-id="d8"]')!.parentElement)
+  })
+
+  it('draws an item with an indent that is not a whole number above 0 at the left', () => {
+    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'
@@ -49,6 +50,12 @@ export interface RichTextBlock {
   language?: string
   /** A numbered list's first number. */
   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[]
@@ -77,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
 }
 
 /**
@@ -95,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',
@@ -119,8 +139,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)
 }
 
 /**
@@ -165,6 +185,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 }) {
@@ -237,6 +267,68 @@ 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
+  below: NestedItem[]
+}
+
+const MAX_DEPTH = 8
+
+/** A list's flat items, each under the last item one level up — never more than one level below the item before. */
+function nestItems(items: readonly RichTextBlock[]): NestedItem[] {
+  const top: NestedItem[] = []
+  // The last item seen at each depth.
+  const path: NestedItem[] = []
+  items.forEach((item, key) => {
+    const asked = Number.isInteger(item.indent) && item.indent! > 0 ? item.indent! : 0
+    // SPEC §13.3: never deeper than 8, so a hostile list cannot nest thousands deep.
+    const depth = Math.min(asked, path.length, MAX_DEPTH)
+    path.length = depth
+    const node: NestedItem = { item, key, below: [] }
+    ;(depth === 0 ? top : path[depth - 1].below).push(node)
+    path.push(node)
+  })
+  return top
+}
+
 function Block({ block, draw }: { block: RichTextBlock; draw: Draw }): ReactNode {
   const own = draw.renderBlock?.(block)
   if (own !== undefined) return own
@@ -251,17 +343,28 @@ function Block({ block, draw }: { block: RichTextBlock; draw: Draw }): ReactNode
       return <p data-block-id={block.id}>{runs}</p>
     case 'bulletList':
     case 'orderedList': {
-      const items = (block.children ?? []).map((item, i) => (
-        <li key={item.id ?? i} data-block-id={item.id}>
-          <Runs runs={item.inline} draw={draw} />
-        </li>
-      ))
-      return block.type === 'bulletList'
-        ? <ul data-block-id={block.id}>{items}</ul>
-        : <ol data-block-id={block.id} start={block.start}>{items}</ol>
+      const ordered = block.type === 'orderedList'
+      const items = (nodes: readonly NestedItem[]): ReactNode[] =>
+        nodes.map(({ item, key, below }) => (
+          <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
+        ? <ol data-block-id={block.id} start={block.start}>{top}</ol>
+        : <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.
@@ -297,9 +400,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

@@ -43,6 +43,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 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)', () => {
     // 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(kinds).toEqual({ component: 109, helper: 34, hook: 1 })
     expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(76)
   })
 
   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 === 'comment').length).toBe(72)
   })
 
   it('takes a name with a page of its own from the page, and a name without one from the code', () => {