@estiva-app/ui 0.73.0 → 0.74.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.73.0",
+  "version": "0.74.1",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/registry.json

@@ -4,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.73.0",
+    "packageVersion": "0.74.1",
     "exports": 178,
     "typeExports": 164,
     "files": null
@@ -4395,6 +4395,12 @@
           "required": false,
           "note": "A second line under the label — a role, an address — 12px, secondary, truncating."
         },
+        {
+          "name": "aside",
+          "takes": "text",
+          "required": false,
+          "note": "After the label, on its line — 12px, muted, never cut: where a file sits (an issue's ref and project) when its second line is its summary (SUM-7)."
+        },
         {
           "name": "leading",
           "takes": "anything",

package/src/CommandPalette.test.tsx

@@ -94,6 +94,12 @@ describe('CommandPaletteSearch — rows', () => {
     expect(groups.map((g) => g.firstElementChild?.textContent)).toEqual(['First', 'Second'])
   })
 
+  it('draws a row’s aside after its label, on the label’s line, above the second line (SUM-7)', () => {
+    render(<Search groups={[{ label: 'Recent', rows: [row('Ship launch', { aside: 'SHI-12 · Ship 1', description: 'What we show on Friday' })] }]} />)
+    const option = screen.getByRole('option')
+    expect(within(option).getByText('What we show on Friday').previousElementSibling?.textContent).toBe('Ship launchSHI-12 · Ship 1')
+  })
+
   it('puts 2px between its rows and under each heading, as a menu does', () => {
     render(<Search groups={[{ label: 'Group', rows: [row('One'), row('Two')] }]} />)
     const [first] = screen.getAllByRole('option')

package/src/CommandPalette.tsx

@@ -196,8 +196,10 @@ export interface CommandPaletteRow {
   /** Unique in the level. The footer follows the lit row by it. */
   id: string
   label: string
-  /** The second line — where it is, who said it, when. */
+  /** The second line — where it is, who said it, when; a file's summary. */
   description?: string
+  /** After the label, muted: where a file sits (an issue's ref and project) when its second line is its summary. */
+  aside?: string
   /** A 16px icon, drawn on the row's 32px tile. */
   icon?: ReactNode
   /** Instead of `icon`: something with a look of its own — a face, a status mark — in the same 32px space, with no tile. */
@@ -414,6 +416,7 @@ export function CommandPaletteSearch({ query, onQueryChange, placeholder, groups
                       size="tall"
                       label={row.label}
                       description={row.description}
+                      aside={row.aside}
                       leading={<RowLeading row={row} />}
                       submenu={!!row.onGoIn}
                       hint={row.onGoIn ? <Kbd>Tab</Kbd> : <EnterHint />}

package/src/CommentHighlights.test.ts

@@ -7,7 +7,7 @@
 import { afterEach, describe, expect, it } from 'vitest'
 import { Editor } from '@tiptap/core'
 import StarterKit from '@tiptap/starter-kit'
-import { BlockId } from './BlockNodes'
+import { BlockId, ReferenceNode } from './BlockNodes'
 import { CommentHighlights, anchorOfSelection, commentPlace } from './CommentHighlights'
 
 let editor: Editor | undefined
@@ -62,7 +62,49 @@ describe('anchorOfSelection', () => {
     ])
     // The quote opens at 0, its first line's text at 2–10, the second's at 12–20.
     e.commands.setTextSelection({ from: 6, to: 15 })
-    expect(anchorOfSelection(e)).toEqual({ blocks: ['q1'], quote: { start: 'linetwo' } })
+    // The quote's lines are joined with '\n', as the protocol reads the quote's text.
+    expect(anchorOfSelection(e)).toEqual({ blocks: ['q1'], quote: { start: 'line\ntwo' } })
+  })
+
+  it('quotes a line break inside a paragraph as a new line', () => {
+    const e = open([{ type: 'paragraph', attrs: { blockId: 'p1' }, content: [{ type: 'text', text: 'A line' }, { type: 'hardBreak' }, { type: 'text', text: 'broken here' }] }])
+    // "A line" at 1–7, the break at 7, "broken here" at 8–19.
+    e.commands.setTextSelection({ from: 3, to: 14 })
+    expect(anchorOfSelection(e)).toEqual({ blocks: ['p1'], quote: { start: 'line\nbroken' } })
+  })
+
+  it('anchors nothing when only the edge between two lines of a quote, or a line break, is selected', () => {
+    const e = open([
+      { type: 'blockquote', attrs: { blockId: 'q1' }, content: [{ type: 'paragraph', content: [{ type: 'text', text: 'one line' }] }, { type: 'paragraph', content: [{ type: 'text', text: 'two line' }] }] },
+      { type: 'paragraph', attrs: { blockId: 'p1' }, content: [{ type: 'text', text: 'A line' }, { type: 'hardBreak' }, { type: 'text', text: 'broken here' }] },
+    ])
+    // The quote's first line ends at 10, its second starts at 12; the paragraph opens at 22, its break at 29.
+    e.commands.setTextSelection({ from: 10, to: 12 })
+    expect(anchorOfSelection(e)).toBeNull()
+    e.commands.setTextSelection({ from: 29, to: 30 })
+    expect(anchorOfSelection(e)).toBeNull()
+  })
+
+  it('quotes a list item as its own words, its nested items as the items after it', () => {
+    const item = (blockId: string, text: string, nested?: object) => ({
+      type: 'listItem',
+      attrs: { blockId },
+      content: [{ type: 'paragraph', content: [{ type: 'text', text }] }, ...(nested ? [nested] : [])],
+    })
+    const e = open([{ type: 'bulletList', attrs: { blockId: 'l1' }, content: [item('a', 'alpha', { type: 'bulletList', content: [item('b', 'beta')] }), item('c', 'gamma')] }])
+    // "alpha" at 3–8; the nested list's item "beta" at 12–16.
+    e.commands.setTextSelection({ from: 3, to: 8 })
+    expect(anchorOfSelection(e)).toEqual({ blocks: ['a'] })
+    // The list's text on the wire is "alpha\nbeta\ngamma": the nested item sits between its parent and the next.
+    expect(commentPlace(e, { id: 'c', blocks: ['l1'], quote: { start: 'alpha\nbeta' } })).toEqual({ state: 'resolved', from: 3, to: 16, words: true })
+  })
+
+  it('quotes a URL chip as its URL, as on the wire', () => {
+    const content = [
+      { type: 'paragraph', attrs: { blockId: 'p1' }, content: [{ type: 'text', text: 'see ' }, { type: 'reference', attrs: { uri: '', href: 'https://ship.estiva.app/x' } }, { type: 'text', text: ' ok' }] },
+    ]
+    const e = (editor = new Editor({ extensions: [StarterKit, BlockId, ReferenceNode, CommentHighlights], content: { type: 'doc', content } }))
+    expect(commentPlace(e, { id: 'c', blocks: ['p1'], quote: { start: 'see https://ship' } })).toMatchObject({ state: 'resolved', from: 1 })
   })
 
   it('keeps the words around a quote only when the quoted words repeat', () => {
@@ -88,6 +130,18 @@ describe('commentPlace', () => {
     expect(commentPlace(e, { id: 'c', blocks: ['p1'], quote: { start: 'omega' } })).toEqual({ state: 'reworded', from: 0, to: 18 })
   })
 
+  it('finds words across two lines of a quote, as the protocol writes them', () => {
+    const e = open([
+      { type: 'blockquote', attrs: { blockId: 'q1' }, content: [{ type: 'paragraph', content: [{ type: 'text', text: 'one line' }] }, { type: 'paragraph', content: [{ type: 'text', text: 'two line' }] }] },
+    ])
+    expect(commentPlace(e, { id: 'c', blocks: ['q1'], quote: { start: 'line\ntwo' } })).toEqual({ state: 'resolved', from: 6, to: 15, words: true })
+  })
+
+  it('finds words across a line break, as the protocol writes them', () => {
+    const e = open([{ type: 'paragraph', attrs: { blockId: 'p1' }, content: [{ type: 'text', text: 'A line' }, { type: 'hardBreak' }, { type: 'text', text: 'broken here' }] }])
+    expect(commentPlace(e, { id: 'c', blocks: ['p1'], quote: { start: 'line\nbroken' } })).toEqual({ state: 'resolved', from: 3, to: 14, words: true })
+  })
+
   it('says detached when none of the blocks is left', () => {
     const e = open()
     expect(commentPlace(e, { id: 'c', blocks: ['gone'], quote: { start: 'alpha' } })).toEqual({ state: 'detached' })

package/src/CommentHighlights.ts

@@ -106,27 +106,64 @@ function placesIn(doc: ProseMirrorNode): Map<string, Place> {
 
 /**
  * A block's text, and the document position where each of its characters
- * starts and ends. A chip counts as its `nostr:` text, as on the wire.
+ * starts and ends. It is the text the protocol's `inlineTextOf` reads from the
+ * same block on the wire, or a quote written here would not be found there: a
+ * chip counts as the text it is on the wire (a URL chip its URL, any other its
+ * `nostr:` reference), a line break as `\n`, and the blocks inside a block (a
+ * quote's lines, a list's items, a table's cells) are joined with `\n`. A list
+ * item is its own text: the list inside it is flat on the wire, its items
+ * following it in the list.
  */
 function textOf(block: Place): { text: string; starts: number[]; ends: number[] } {
   let text = ''
   const starts: number[] = []
   const ends: number[] = []
-  block.node.descendants((node, offset) => {
-    const at = block.pos + 1 + offset
-    if (node.isText && node.text) {
-      for (let i = 0; i < node.text.length; i++) (starts.push(at + i), ends.push(at + i + 1))
-      text += node.text
-    } else if (node.isInline && node.isLeaf) {
-      const wire = typeof node.attrs.uri === 'string' ? node.attrs.uri : ''
-      for (let i = 0; i < wire.length; i++) (starts.push(at), ends.push(at + node.nodeSize))
-      text += wire
+  const add = (chars: string, start: number, end: number) => {
+    for (let i = 0; i < chars.length; i++) (starts.push(start), ends.push(end))
+    text += chars
+  }
+  const walk = (node: ProseMirrorNode, pos: number) => {
+    if (node.isTextblock) {
+      node.forEach((child, offset) => {
+        const at = pos + 1 + offset
+        if (child.isText && child.text) {
+          for (let i = 0; i < child.text.length; i++) (starts.push(at + i), ends.push(at + i + 1))
+          text += child.text
+        } else if (child.type.name === 'hardBreak') add('\n', at, at + child.nodeSize)
+        else if (child.isInline && child.isLeaf) add(String(child.attrs.href || child.attrs.uri || ''), at, at + child.nodeSize)
+      })
+      return
     }
-    return true
-  })
+    // A list item's paragraphs are one run on the wire, with nothing between them.
+    if (node.type.name === 'listItem') {
+      node.forEach((child, offset) => void (LISTS.has(child.type.name) || walk(child, pos + 1 + offset)))
+      return
+    }
+    const children = LISTS.has(node.type.name) ? itemsOf(node, pos) : childrenOf(node, pos)
+    children.forEach(({ node: child, pos: at }, index) => {
+      // Between two blocks: the boundary, where neither one's text is.
+      if (index > 0) add('\n', at, at)
+      walk(child, at)
+    })
+  }
+  walk(block.node, block.pos)
   return { text, starts, ends }
 }
 
+/** The lists whose nested items the wire holds flat, after the item they are in. */
+const LISTS = new Set(['bulletList', 'orderedList'])
+
+function childrenOf(node: ProseMirrorNode, pos: number): { node: ProseMirrorNode; pos: number }[] {
+  const out: { node: ProseMirrorNode; pos: number }[] = []
+  node.forEach((child, offset) => void out.push({ node: child, pos: pos + 1 + offset }))
+  return out
+}
+
+/** A list's items as the wire lists them: each one, then the items of a list inside it. */
+function itemsOf(list: ProseMirrorNode, pos: number): { node: ProseMirrorNode; pos: number }[] {
+  return childrenOf(list, pos).flatMap((item) => [item, ...childrenOf(item.node, item.pos).flatMap((c) => (LISTS.has(c.node.type.name) ? itemsOf(c.node, c.pos) : []))])
+}
+
 /** Where `words` sits in `text` at or after `from`: the occurrence whose context matches, else the first. */
 function find(text: string, words: string, from: number, context: (at: number) => boolean): number {
   let first = -1
@@ -391,6 +428,8 @@ export function anchorOfSelection(editor: Editor): SelectionAnchor | null {
   if (run.length === 1) lastText = firstText
   // Between two blocks, with no character selected: nothing to comment on.
   if (run.length === 1 && firstText.text && start >= end) return null
+  // Only a line break, or the edge between two lines of one block: no word to comment on either.
+  if (run.length === 1 && firstText.text && !firstText.text.slice(start, end).replace(/\n/g, '')) return null
   const blocks = run.map((p) => p.node.attrs.blockId as string)
   if (start === 0 && end >= lastText.text.length) return { blocks }
 

package/src/ComposerTriggers.test.tsx

@@ -176,6 +176,27 @@ describe('[', () => {
     expect(icons).toEqual(['kind-a', 'own', 'list'])
   })
 
+  it('draws a summary as the second line, with where the thing sits beside the label; without one, the row is as before (SUM-7)', async () => {
+    const rows = [
+      { id: 's', label: 'Ship launch', snippet: '', uri: 'nostr:s', description: 'SHI-12 · Ship 1', summary: 'What we show on Friday' },
+      { id: 'n', label: 'Old plan', snippet: '', uri: 'nostr:n', description: 'SHI-3 · Ship 1' },
+    ]
+    function Summarised() {
+      const made = useEditor({
+        extensions: [StarterKit, Chip, ReferenceTrigger.configure({ items: () => rows, nodeName: 'messageMention', ariaLabel: 'Things', sectionLabel: 'Things' })],
+      })
+      editor = made
+      return <EditorContent editor={made} />
+    }
+    render(<Summarised />)
+    await type('[')
+    const [withSummary, without] = within(screen.getByRole('listbox')).getAllByRole('option')
+    // The line above a row's second line, as a person reads it.
+    const lineAbove = (row: HTMLElement, second: string) => within(row).getByText(second).previousElementSibling?.textContent
+    expect(lineAbove(withSummary, 'What we show on Friday')).toBe('Ship launchSHI-12 · Ship 1')
+    expect(lineAbove(without, 'SHI-3 · Ship 1')).toBe('Old plan')
+  })
+
   it('draws the app’s sections in order, skips an empty one, and redraws the open list when told', async () => {
     const listeners = new Set<() => void>()
     let late: CaptionedItem[] = []

package/src/ComposerTriggers.tsx

@@ -232,6 +232,13 @@ export interface CaptionedItem {
   search?: string
   /** The row's second line, e.g. where the thing sits. The chip does not wear it. */
   description?: string
+  /**
+   * What the thing is about, in a line of plain text — a file's summary. When
+   * set, it is the row's second line and `description` moves up after the
+   * label, muted; absent, the row is as before. The chip does not wear it, and
+   * the query is not matched against it.
+   */
+  summary?: string
   /**
    * This row's own 16px icon, in place of the list's `icon`: what the thing is,
    * when the list holds several kinds — a topic, a project, a message
@@ -363,7 +370,13 @@ export function referenceMenu({ ariaLabel, sectionLabel, icon, iconFor }: Refere
       return groups
     },
     itemKey: (item) => `reference-${item.id}`,
-    row: (item) => ({ leading: item.icon ?? iconFor?.(item.uri) ?? icon, label: captionOf(item.label, item.snippet), description: item.description, hint: <EnterHint /> }),
+    row: (item) => ({
+      leading: item.icon ?? iconFor?.(item.uri) ?? icon,
+      label: captionOf(item.label, item.snippet),
+      // A summary is the second line, and where the thing sits moves up beside the label (SUM-7's story).
+      ...(item.summary ? { description: item.summary, aside: item.description } : { description: item.description }),
+      hint: <EnterHint />,
+    }),
   }
 }
 

package/src/Menu.tsx

@@ -350,6 +350,12 @@ export interface MenuItemProps extends Omit<ComponentPropsWithRef<'button'>, 'ch
   size?: 'default' | 'tall'
   /** A second line under the label — a role, an address — 12px, secondary, truncating. */
   description?: string
+  /**
+   * After the label, on its line — 12px, muted, never cut: where a file sits
+   * (an issue's ref and project) when its second line is its summary (SUM-7).
+   * The label truncates before it does.
+   */
+  aside?: string
   /** Before the label: a 16px icon (stroke 1.5, secondary), or an Avatar, for rows led by a face. */
   leading?: ReactNode
   /** At the right edge: a hint, a value — anything. Wins over `shortcut` and `submenu`. */
@@ -425,7 +431,7 @@ export function menuItemClassName({ size, selected, className }: { size: 'defaul
 /** Everything inside the row — written once, for the same reason. Shared
  *  inside the package like `menuItemClassName`: `CommandPalette` draws it
  *  inside Base UI's `Autocomplete.Item`. Not exported from the index. */
-export function MenuItemBody({ label, children, size = 'default', description, leading, trailing, hint, shortcut, submenu, destructive, selected }: Pick<MenuItemProps, 'label' | 'children' | 'size' | 'description' | 'leading' | 'trailing' | 'hint' | 'shortcut' | 'submenu' | 'destructive' | 'selected'>) {
+export function MenuItemBody({ label, children, size = 'default', description, aside, leading, trailing, hint, shortcut, submenu, destructive, selected }: Pick<MenuItemProps, 'label' | 'children' | 'size' | 'description' | 'aside' | 'leading' | 'trailing' | 'hint' | 'shortcut' | 'submenu' | 'destructive' | 'selected'>) {
   const edge =
     trailing ??
     (shortcut ? (
@@ -441,9 +447,16 @@ export function MenuItemBody({ label, children, size = 'default', description, l
           colour. Ship's copy said `text-sm`, which was never the ramp. */}
       {children ?? (
         <span className={cn('flex min-w-0 flex-1 flex-col', size === 'tall' && 'gap-[2px]')}>
-          <span className={cn('truncate text-body-2', destructive ? 'text-error-default' : 'text-text-primary')}>
-            {label}
-          </span>
+          {aside ? (
+            <span className="flex min-w-0 items-baseline gap-2">
+              <span className={cn('truncate text-body-2', destructive ? 'text-error-default' : 'text-text-primary')}>{label}</span>
+              <span className="shrink-0 text-caption text-text-muted">{aside}</span>
+            </span>
+          ) : (
+            <span className={cn('truncate text-body-2', destructive ? 'text-error-default' : 'text-text-primary')}>
+              {label}
+            </span>
+          )}
           {description && <span className="truncate text-caption text-text-secondary">{description}</span>}
         </span>
       )}
@@ -469,12 +482,13 @@ export function MenuItemBody({ label, children, size = 'default', description, l
   )
 }
 
-export function MenuItem({ label, children, size = 'default', description, leading, trailing, hint, shortcut, submenu, destructive, selected, className, ...props }: MenuItemProps) {
+export function MenuItem({ label, children, size = 'default', description, aside, leading, trailing, hint, shortcut, submenu, destructive, selected, className, ...props }: MenuItemProps) {
   const body = (
     <MenuItemBody
       label={label}
       size={size}
       description={description}
+      aside={aside}
       leading={leading}
       trailing={trailing}
       hint={hint}

package/src/SuggestionMenu.tsx

@@ -34,6 +34,8 @@ import { Popover } from './Popover'
 export interface SuggestionMenuRow {
   label: string
   description?: string
+  /** After the label, muted — `MenuItem`'s. */
+  aside?: string
   leading?: ReactNode
   /** What you would type — drawn as keys at the right, e.g. `#` for a heading. */
   shortcut?: string
@@ -158,7 +160,7 @@ export function SuggestionMenu<T>({ rect, editorElement, ariaLabel, width, maxHe
   const drawRow = (item: T) => {
     const index = items.indexOf(item)
     const selected = index === highlight
-    const { label, description, leading, shortcut, hint, size } = row(item)
+    const { label, description, aside, leading, shortcut, hint, size } = row(item)
     return (
       // A row of a list the editor drives from its caret: focus stays in the text, so the row is no Tab stop.
       <MenuItem
@@ -171,6 +173,7 @@ export function SuggestionMenu<T>({ rect, editorElement, ariaLabel, width, maxHe
         size={size}
         label={label}
         description={description}
+        aside={aside}
         leading={leading}
         shortcut={shortcut}
         hint={hint}