@estiva-app/ui 0.74.0 → 0.75.0

package/src/CardUnder.mdx

@@ -0,0 +1,53 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
+import * as CardUnderStories from './CardUnder.stories'
+
+<Meta of={CardUnderStories} />
+
+# CardUnder
+
+The one card added under a piece of text, and the ✕ that removes it.
+
+<Canvas of={CardUnderStories.WhileWriting} />
+
+## When
+
+- **while writing** — under the box: the ✕ always shows.
+- **after sending** — `revealOnHover`: the ✕ shows when the pointer is over the card or the ✕ has focus, and always on a screen that cannot hover, so a tap reaches it.
+- **no ✕** — no `onRemove`: to anyone but who wrote it.
+
+<Canvas of={CardUnderStories.AfterSending} />
+
+## When not
+
+- A link alone on its line, with no card chosen → **LinkRow**.
+- A part of something longer: it has no ✕ → **PartCard**.
+
+## How
+
+```tsx
+import { CardUnder } from '@estiva-app/ui'
+
+<CardUnder link={link} onRemove={isAuthor ? removeCard : undefined} revealOnHover={sent} />
+```
+
+- **Which link gets the card is the app's**, by the rule every app reads by (`defaultCardOf` in `@estiva-app/protocol`). This draws the one it is given.
+- `onRemove` is the app's: before sending it drops the card from what will be sent; after, it sends the edit that removes it.
+- It is at most 480px wide.
+
+## What it owns
+
+| It does | So you never write |
+|---|---|
+| Places the ✕ at the card's top corner | a remove button of your own |
+| Reveals the ✕ on hover and focus, and always shows it on touch | a hover or touch check |
+
+## Keys
+
+| Key | Does |
+|---|---|
+| Tab | Reaches the ✕, and shows it when it was waiting for hover |
+| Enter, Space | Removes the card |
+
+## Props
+
+<Controls of={CardUnderStories.NoRemove} />

package/src/CardUnder.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { Button } from './Button'
+import { CardUnder } from './CardUnder'
+import { ITEM, LOADING, ready, SAID, UNAVAILABLE } from './linked.examples'
+
+const meta = {
+  title: 'Components/CardUnder',
+  component: CardUnder,
+  parameters: { layout: 'padded' },
+  args: { link: ready(ITEM) },
+} satisfies Meta<typeof CardUnder>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Under a box being written in: the ✕ always shows. Press it to remove the card. */
+export const WhileWriting: Story = {
+  render: (args) => {
+    const [removed, setRemoved] = useState(false)
+    if (removed) return <Button onClick={() => setRemoved(false)}>Put it back</Button>
+    return <CardUnder {...args} onRemove={() => setRemoved(true)} />
+  },
+}
+
+/** Under text already sent: the ✕ shows on hover or focus, and always on a screen that cannot hover. */
+export const AfterSending: Story = {
+  render: (args) => {
+    const [removed, setRemoved] = useState(false)
+    if (removed) return <Button onClick={() => setRemoved(false)}>Put it back</Button>
+    return <CardUnder {...args} revealOnHover onRemove={() => setRemoved(true)} />
+  },
+}
+
+/** To anyone but who wrote it: no ✕. */
+export const NoRemove: Story = {}
+
+/** Words a person wrote, as the card. */
+export const WordsAPersonWrote: Story = { args: { link: ready(SAID) }, render: (args) => <CardUnder {...args} onRemove={() => {}} /> }
+
+/** Still being looked up: at the card's height, with its ✕. */
+export const Loading: Story = { args: { link: LOADING }, render: (args) => <CardUnder {...args} onRemove={() => {}} /> }
+
+/** Deleted, or not this reader's to see. */
+export const NotAvailable: Story = { args: { link: UNAVAILABLE }, render: (args) => <CardUnder {...args} onRemove={() => {}} /> }

package/src/CardUnder.test.tsx

@@ -0,0 +1,40 @@
+// @vitest-environment jsdom
+/** What the CardUnder page claims, pinned: the ✕ removes the card, by pointer and by keyboard, and only where it is given. */
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { CardUnder } from './CardUnder'
+import { ITEM, ready } from './linked.examples'
+
+afterEach(cleanup)
+
+describe('CardUnder', () => {
+  it('draws the card it is given', () => {
+    render(<CardUnder link={ready(ITEM)} />)
+    expect(screen.getByRole('link', { name: ITEM.title })).toBeTruthy()
+  })
+
+  it('removes the card when the ✕ is pressed', async () => {
+    const user = userEvent.setup()
+    const onRemove = vi.fn()
+    render(<CardUnder link={ready(ITEM)} onRemove={onRemove} />)
+    await user.click(screen.getByRole('button', { name: 'Remove card' }))
+    expect(onRemove).toHaveBeenCalledTimes(1)
+  })
+
+  it('reaches the ✕ from the keyboard once sent, and removes the card with Enter', async () => {
+    const user = userEvent.setup()
+    const onRemove = vi.fn()
+    render(<CardUnder link={ready({ ...ITEM, conversation: undefined, status: undefined, owner: undefined })} onRemove={onRemove} revealOnHover />)
+    await user.tab()
+    await user.tab()
+    expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Remove card' }))
+    await user.keyboard('{Enter}')
+    expect(onRemove).toHaveBeenCalledTimes(1)
+  })
+
+  it('has no ✕ for anyone but who wrote it', () => {
+    render(<CardUnder link={ready(ITEM)} />)
+    expect(screen.queryByRole('button', { name: 'Remove card' })).toBeNull()
+  })
+})

package/src/CardUnder.tsx

@@ -0,0 +1,45 @@
+/**
+ * The one card added under a piece of text, and the ✕ that removes it (why:
+ * https://github.com/estiva-app/estiva-docs/blob/main/decisions/where-a-link-sits-and-which-file-gets-the-card.md).
+ *
+ * Under a box being written in, the ✕ always shows. Under text already sent
+ * (`revealOnHover`) it shows when the pointer is over the card or the ✕ has
+ * focus, and always on a screen that cannot hover, so a tap reaches it (Miky,
+ * 16 Oct, kickoff).
+ */
+import { IconX } from '@tabler/icons-react'
+import { cn } from './cn'
+import { IconButton } from './IconButton'
+import { LinkCard } from './LinkCard'
+import type { LinkState } from './linked'
+
+export interface CardUnderProps {
+  link: LinkState
+  /** Draws the ✕. Without it the card shows with none, as it does to anyone but the author. */
+  onRemove?: () => void
+  /** The ✕ waits for hover or focus: under text already sent. Always shown on a screen that cannot hover. */
+  revealOnHover?: boolean
+}
+
+export function CardUnder({ link, onRemove, revealOnHover = false }: CardUnderProps) {
+  return (
+    <div className="group/card flex max-w-[480px] items-start gap-1">
+      <div className="min-w-0 flex-1">
+        <LinkCard link={link} />
+      </div>
+      {onRemove && (
+        // At the card's top corner: halfway down a tall card a ✕ reads as belonging to nothing.
+        <div
+          className={cn(
+            'flex shrink-0 self-start pt-2',
+            revealOnHover && 'opacity-0 transition-opacity group-hover/card:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100',
+          )}
+        >
+          <IconButton aria-label="Remove card" tooltip="Remove card" onClick={onRemove}>
+            <IconX size={16} />
+          </IconButton>
+        </div>
+      )}
+    </div>
+  )
+}

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/InlineChip.tsx

@@ -45,6 +45,8 @@ export const INLINE_CHIP_TONE_CLASSES = {
    * copy of this chip still has the 16.8px box).
    */
   quiet: 'h-[19.6px] bg-bg-active text-text-muted font-mono text-caption',
+  /** A file this reader cannot open — deleted, or not theirs to see: said in words, quieter than a link. */
+  muted: 'bg-bg-active text-text-muted',
 } as const
 
 export type InlineChipTone = keyof typeof INLINE_CHIP_TONE_CLASSES

package/src/LinkCard.mdx

@@ -0,0 +1,58 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
+import * as LinkCardStories from './LinkCard.stories'
+
+<Meta of={LinkCardStories} />
+
+# LinkCard
+
+A link's card: what a row cannot hold, and the changes the reader may make from it.
+
+<Canvas of={LinkCardStories.Default} />
+
+## When
+
+- **ready** — the title as the link (the icon opens it too), the key and what it is in, its summary, the items inside it, its newest conversation, and a footer: the pickers and the conversation count, or who wrote it and when. No summary, the title alone.
+- **read only** — a picker the app passed no `onChange` for reads as words in the same place: the reader may not change it. `readOnly` makes every value words, as the hover preview does.
+- **words a person wrote** — their face, their name, the time as the link, and the words.
+- **loading** — the card it will become in bars, at its own height: `shape` from `loadingShapeOf(linked)` the last time it drew, or the kind's usual card. **LinkCardLoading**, from this file.
+- **unavailable** — one line, as **LinkRow** draws it.
+
+<Canvas of={LinkCardStories.ReadOnly} />
+<Canvas of={LinkCardStories.Loading} />
+
+## When not
+
+- A link alone on its line, where the card was not chosen → **LinkRow**.
+- The one card under a piece of text, with its ✕ → **CardUnder**, which draws this.
+- A part of something longer → **PartCard**.
+
+## How
+
+```tsx
+import { LinkCard } from '@estiva-app/ui'
+
+const linked = {
+  ...fromLookup,
+  status: { value: statusKey, options: statuses, onChange: mayChange ? setStatus : undefined },
+  owner: { value: ownerKey, options: people, onChange: mayChange ? setOwner : undefined },
+  ownerLabel: 'Owner',
+}
+<LinkCard link={{ state: 'ready', linked }} />
+```
+
+- **Whether the reader may change it is the app's.** Pass `onChange` only to a reader who may; anyone else sees words.
+- The picker offers only the options it is given: to let the reader set nobody as the owner, include an option for it.
+- `linked.latest` is drawn whenever it is given: pass it only to a reader who may read it.
+- `linked.conversation.unread` only for a member of it.
+
+## What it owns
+
+| It does | So you never write |
+|---|---|
+| Draws the pickers, or the same values as words | a read-only variant of your own |
+| Holds its own height while it loads | a placeholder height of your own |
+| Opens each item inside it on its own | a row click handler |
+
+## Props
+
+<Controls of={LinkCardStories.ReadOnly} />

package/src/LinkCard.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { LinkCard, LinkCardLoading } from './LinkCard'
+import { loadingShapeOf, type Linked } from './linked'
+import { GROUP, ITEM, ITEM_NO_SUMMARY, ITEM_READ_ONLY, ITEM_UNREAD, PAGE, PLACE, ready, SAID, UNAVAILABLE } from './linked.examples'
+
+const meta = {
+  title: 'Components/LinkCard',
+  component: LinkCard,
+  parameters: { layout: 'padded' },
+  args: { link: ready(ITEM) },
+  decorators: [(Story) => <div className="max-w-[480px]">{Story()}</div>],
+} satisfies Meta<typeof LinkCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Its status and owner change from the card: pick one. */
+export const Default: Story = {
+  render: () => {
+    const [status, setStatus] = useState('doing')
+    const [owner, setOwner] = useState<string>('a')
+    const linked: Linked = { ...ITEM, status: { ...ITEM.status!, value: status, onChange: setStatus }, owner: { ...ITEM.owner!, value: owner, onChange: setOwner } }
+    return <LinkCard link={ready(linked)} />
+  },
+}
+
+/** To a reader who may not change it: the same two values, as words. */
+export const ReadOnly: Story = { args: { link: ready(ITEM_READ_ONLY) } }
+
+/** Something unread in its conversation, to a member: the count is brighter, with a dot. */
+export const Unread: Story = { args: { link: ready(ITEM_UNREAD) } }
+
+/** No summary: the title alone. */
+export const NoSummary: Story = { args: { link: ready(ITEM_NO_SUMMARY) } }
+
+/** A group: its progress, its lead, and each item inside, which opens on its own. */
+export const WithItems: Story = { args: { link: ready(GROUP) } }
+
+/** A place people talk: its members and its newest conversation. */
+export const WithLatest: Story = { args: { link: ready(PLACE) } }
+
+/** A page of text: who wrote it, and when. */
+export const WithAuthors: Story = { args: { link: ready(PAGE) } }
+
+/** Words a person wrote: their face, the time as the link, and the words. */
+export const WordsAPersonWrote: Story = { args: { link: ready(SAID) } }
+
+/** Still being looked up, beside the card it becomes: the same height. */
+export const Loading: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      {[ITEM, GROUP, PLACE, PAGE].map((linked) => (
+        // Each at a card's full width, as under a message: a narrower column wraps the summary.
+        <div key={linked.id} className="grid w-[968px] grid-cols-[480px_480px] items-start gap-2">
+          <LinkCardLoading kind={linked.kind} shape={loadingShapeOf(linked)} />
+          <LinkCard link={ready(linked)} />
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+/** Nothing remembered of it: the kind's usual card. */
+export const LoadingByKind: Story = { args: { link: { state: 'loading', kind: 'issue' } } }
+
+/** Deleted, or not this reader's to see: one line. */
+export const NotAvailable: Story = { args: { link: UNAVAILABLE } }

package/src/LinkCard.test.tsx

@@ -0,0 +1,103 @@
+// @vitest-environment jsdom
+/**
+ * What the LinkCard and LinkParts pages claim, pinned: the pickers for a
+ * reader who may change it and words for one who may not, the conversation
+ * count and its unread, what each kind draws, and the loading and
+ * not-available states.
+ */
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { LinkCard } from './LinkCard'
+import { GROUP, ITEM, ITEM_NO_SUMMARY, ITEM_READ_ONLY, ITEM_UNREAD, LOADING, PAGE, PLACE, ready, SAID, UNAVAILABLE } from './linked.examples'
+
+afterEach(cleanup)
+
+describe('LinkCard', () => {
+  it('opens what it links from its title', () => {
+    render(<LinkCard link={ready(ITEM)} />)
+    expect(screen.getByRole('link', { name: ITEM.title }).getAttribute('href')).toBe('#item')
+  })
+
+  it('lets a reader who may change it pick a new status and owner', async () => {
+    const user = userEvent.setup()
+    const onStatus = vi.fn()
+    const onOwner = vi.fn()
+    render(<LinkCard link={ready({ ...ITEM, status: { ...ITEM.status!, onChange: onStatus }, owner: { ...ITEM.owner!, onChange: onOwner } })} />)
+    await user.click(screen.getByRole('combobox', { name: 'Status' }))
+    await user.click(await screen.findByRole('option', { name: /Done/ }))
+    expect(onStatus).toHaveBeenCalledWith('done')
+    await user.click(screen.getByRole('combobox', { name: 'Owner' }))
+    await user.click(await screen.findByRole('option', { name: /Person three/ }))
+    expect(onOwner).toHaveBeenCalledWith('c')
+  })
+
+  it('shows the same values as words to a reader who may not change them', () => {
+    render(<LinkCard link={ready(ITEM_READ_ONLY)} />)
+    expect(screen.queryByRole('combobox')).toBeNull()
+    expect(screen.getByText('In progress')).toBeTruthy()
+    expect(screen.getByText('Person one')).toBeTruthy()
+  })
+
+  it('shows words, never pickers, when read only, even to a reader who could change it', () => {
+    render(<LinkCard link={ready(ITEM)} readOnly />)
+    expect(screen.queryByRole('combobox')).toBeNull()
+  })
+
+  it('says nobody owns it when nobody does', () => {
+    render(<LinkCard link={ready({ ...ITEM_READ_ONLY, owner: { value: undefined, options: [] } })} />)
+    expect(screen.getByText('Unassigned')).toBeTruthy()
+  })
+
+  it('shows the title alone when there is no summary', () => {
+    render(<LinkCard link={ready(ITEM_NO_SUMMARY)} />)
+    expect(screen.getByRole('link', { name: 'Item two' })).toBeTruthy()
+    expect(screen.queryByText(ITEM.summary!)).toBeNull()
+  })
+
+  it('opens the conversation from its count, and says when it holds something unread', () => {
+    const { rerender } = render(<LinkCard link={ready(ITEM)} />)
+    const count = screen.getByRole('link', { name: /comments — open the conversation/ })
+    expect(count.getAttribute('href')).toBe('#item-conversation')
+    expect(count.textContent).not.toContain('unread')
+    rerender(<LinkCard link={ready(ITEM_UNREAD)} />)
+    expect(screen.getByRole('link', { name: /comments, unread — open the conversation/ })).toBeTruthy()
+  })
+
+  it('opens each item inside it on its own', () => {
+    render(<LinkCard link={ready(GROUP)} />)
+    expect(screen.getByRole('link', { name: 'Item three' }).getAttribute('href')).toBe('#c3')
+    expect(screen.getByText('2/5')).toBeTruthy()
+  })
+
+  it('shows the newest conversation where it is given, and who wrote a page', () => {
+    render(
+      <>
+        <LinkCard link={ready(PLACE)} />
+        <LinkCard link={ready(PAGE)} />
+      </>,
+    )
+    expect(screen.getByText('Latest conversation')).toBeTruthy()
+    expect(screen.getByText(PLACE.latest!.body)).toBeTruthy()
+    expect(screen.getByText('Yesterday')).toBeTruthy()
+  })
+
+  it('draws a person’s words as theirs, with the time as the link', () => {
+    render(<LinkCard link={ready(SAID)} />)
+    expect(screen.getByText('Person one')).toBeTruthy()
+    expect(screen.getByText(SAID.body!)).toBeTruthy()
+    expect(screen.getByRole('link', { name: '10:42' }).getAttribute('href')).toBe('#said')
+  })
+
+  it('while it loads, is busy and shows nothing of it', () => {
+    const { container } = render(<LinkCard link={LOADING} />)
+    expect(container.querySelector('[aria-busy="true"]')).not.toBeNull()
+    expect(screen.queryByRole('link')).toBeNull()
+  })
+
+  it('says it is not available, and where it may still open', () => {
+    render(<LinkCard link={UNAVAILABLE} />)
+    expect(screen.getByText('Item — not available.')).toBeTruthy()
+    expect(screen.getByRole('link', { name: /Open in App one/ }).getAttribute('href')).toBe('#elsewhere')
+  })
+})