@estiva-app/ui 0.73.0 → 0.74.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.73.0",
+  "version": "0.74.0",
   "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.0",
     "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/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}