@lovett/ui 0.1.0 → 0.2.3

package/src/thread/__tests__/thread.test.tsx

@@ -145,6 +145,86 @@ describe('Thread — D4 deletion and orphans', () => {
   })
 })
 
+/**
+ * FU-0032 — a tombstone has to say which removal it was.
+ *
+ * `[deleted]` covered one case because, when it was written, an author
+ * deleting their own comment was the only way a comment became a tombstone.
+ * An admin redacting somebody else's is the second, and the reader it lands
+ * hardest on is the person whose comment is gone: `[deleted]` tells them they
+ * did it themselves.
+ *
+ * The load-bearing tests here are the negative ones. `moderated` absent or
+ * false has to render the 0.1.0 string exactly, because every existing host is
+ * on that path and not one of them will ever set the field.
+ */
+describe('Thread — FU-0032 a moderated tombstone', () => {
+  /** One field, four states. Local because it is a permutation, not shared data. */
+  const TOMBSTONES: readonly ThreadComment[] = [
+    {
+      id: 't-self',
+      author: { id: 'usr_ada', name: 'Ada Whitfield' },
+      bodyMd: '',
+      createdAt: FIXTURE_NOW - 2 * 3_600_000,
+      deletedAt: FIXTURE_NOW - 60_000,
+      moderated: false,
+    },
+    {
+      id: 't-absent',
+      author: { id: 'usr_lee', name: 'Lee Ndiaye' },
+      bodyMd: '',
+      createdAt: FIXTURE_NOW - 3 * 3_600_000,
+      deletedAt: FIXTURE_NOW - 60_000,
+    },
+    {
+      id: 't-live',
+      author: { id: 'usr_dana', name: 'Dana Ortiz' },
+      bodyMd: 'Still here.',
+      createdAt: FIXTURE_NOW - 4 * 3_600_000,
+      moderated: true,
+    },
+  ]
+
+  it('says the comment was removed rather than deleted', () => {
+    renderThread()
+    // The byline stands in for the author, so it takes the SHORT form: a
+    // sentence in the name slot reads as an attribution, and the one thing
+    // this render must never do is imply who removed it.
+    expect(within(byline('c-moderated')).getByText('[removed]')).toBeTruthy()
+    // The body is the interface's own line, so it is where the sentence goes.
+    expect(
+      within(commentBox('c-moderated')).getByText('[removed by an admin]', { selector: 'p' }),
+    ).toBeTruthy()
+  })
+
+  it('withholds the author of a moderated comment, exactly as of a deleted one', () => {
+    renderThread()
+    expect(within(commentBox('c-moderated')).queryByText('Kai Moreau')).toBeNull()
+  })
+
+  it('renders [deleted] when moderated is false — the 0.1.0 string, unchanged', () => {
+    render(<Thread comments={TOMBSTONES} now={FIXTURE_NOW} locale="en-GB" defaultSort="new" />)
+    expect(within(byline('t-self')).getByText('[deleted]')).toBeTruthy()
+    expect(within(commentBox('t-self')).getByText('[deleted]', { selector: 'p' })).toBeTruthy()
+    expect(within(commentBox('t-self')).queryByText(/removed/)).toBeNull()
+  })
+
+  it('renders [deleted] when moderated is absent — every 0.1.0 host is here', () => {
+    render(<Thread comments={TOMBSTONES} now={FIXTURE_NOW} locale="en-GB" defaultSort="new" />)
+    expect(within(byline('t-absent')).getByText('[deleted]')).toBeTruthy()
+    expect(within(commentBox('t-absent')).getByText('[deleted]', { selector: 'p' })).toBeTruthy()
+    expect(within(commentBox('t-absent')).queryByText(/removed/)).toBeNull()
+  })
+
+  it('ignores moderated on a comment that is not a tombstone at all', () => {
+    render(<Thread comments={TOMBSTONES} now={FIXTURE_NOW} locale="en-GB" defaultSort="new" />)
+    const box = commentBox('t-live')
+    expect(within(box).getByText('Still here.')).toBeTruthy()
+    expect(within(byline('t-live')).getByText('Dana Ortiz')).toBeTruthy()
+    expect(within(box).queryByText(/removed/)).toBeNull()
+  })
+})
+
 describe('Thread — collapse, paging and the depth cap', () => {
   it('shows three replies then "Show 5 more replies"', () => {
     renderThread()
@@ -660,3 +740,191 @@ describe('Thread — MEDIUM 4: the comments are a real list', () => {
     expect(commentBox('c-many').style.paddingInlineStart).toBe('')
   })
 })
+
+/**
+ * The per-comment capability seam.
+ *
+ * 0.2.0 gated Edit and Delete on "a callback exists and this is not a
+ * tombstone" and nothing else, so a host that wired both drew both on every
+ * live comment — including ones the viewer did not write, where the server's
+ * `AND author_id = ?` answers 404 and always will.
+ *
+ * These assert at the rendered MENU ITEM, never at the prop. A capability that
+ * arrives and changes nothing is the same defect one layer further in.
+ */
+describe('Thread — canEdit and canDelete', () => {
+  /** Two comments by two people; only the first is the viewer's. */
+  const AUTHORSHIP: readonly ThreadComment[] = [
+    {
+      id: 'c-mine',
+      author: { id: 'usr_ada', name: 'Ada Whitfield' },
+      bodyMd: 'I wrote this one.',
+      createdAt: FIXTURE_NOW - 60_000,
+      canEdit: true,
+      canDelete: true,
+    },
+    {
+      id: 'c-theirs',
+      author: { id: 'usr_lee', name: 'Lee Ndiaye' },
+      bodyMd: 'And this one is not mine.',
+      createdAt: FIXTURE_NOW - 30_000,
+      canEdit: false,
+      canDelete: false,
+    },
+  ]
+
+  function openMenu(commentId: string, name: string): void {
+    fireEvent.click(
+      within(commentBox(commentId)).getByRole('button', {
+        name: `More actions for ${name}'s comment`,
+      }),
+    )
+  }
+
+  it('draws Edit and Delete on a comment the viewer authored', () => {
+    render(
+      <Thread
+        comments={AUTHORSHIP}
+        now={FIXTURE_NOW}
+        locale="en-GB"
+        defaultSort="new"
+        onEdit={vi.fn()}
+        onDelete={vi.fn()}
+      />,
+    )
+    openMenu('c-mine', 'Ada Whitfield')
+    expect(screen.getByRole('menuitem', { name: 'Edit' })).toBeTruthy()
+    expect(screen.getByRole('menuitem', { name: 'Delete' })).toBeTruthy()
+  })
+
+  it('draws NEITHER on a comment the viewer did not author', () => {
+    render(
+      <Thread
+        comments={AUTHORSHIP}
+        now={FIXTURE_NOW}
+        locale="en-GB"
+        defaultSort="new"
+        onEdit={vi.fn()}
+        onDelete={vi.fn()}
+        // A third item, so the menu still has a reason to exist and the two
+        // that matter are provably absent FROM it rather than absent because
+        // the whole trigger vanished. Both cases are asserted; this is the one
+        // where the viewer can see the menu they are not being offered.
+        onCopyLink={vi.fn()}
+      />,
+    )
+    openMenu('c-theirs', 'Lee Ndiaye')
+    expect(screen.getByRole('menuitem', { name: 'Copy link' })).toBeTruthy()
+    // Absent, not disabled. A greyed row still claims the action exists for
+    // somebody, which is the lie in a smaller font.
+    expect(screen.queryByRole('menuitem', { name: 'Edit' })).toBeNull()
+    expect(screen.queryByRole('menuitem', { name: 'Delete' })).toBeNull()
+  })
+
+  it('separates the two predicates — an admin may remove what it may not rewrite', () => {
+    const MODERATOR: readonly ThreadComment[] = [
+      {
+        id: 'c-theirs',
+        author: { id: 'usr_lee', name: 'Lee Ndiaye' },
+        bodyMd: 'Somebody else wrote this.',
+        createdAt: FIXTURE_NOW - 30_000,
+        canEdit: false,
+        canDelete: true,
+      },
+    ]
+    render(
+      <Thread
+        comments={MODERATOR}
+        now={FIXTURE_NOW}
+        locale="en-GB"
+        defaultSort="new"
+        onEdit={vi.fn()}
+        onDelete={vi.fn()}
+      />,
+    )
+    openMenu('c-theirs', 'Lee Ndiaye')
+    expect(screen.queryByRole('menuitem', { name: 'Edit' })).toBeNull()
+    expect(screen.getByRole('menuitem', { name: 'Delete' })).toBeTruthy()
+  })
+
+  it('still reports the id from a comment that kept its controls', () => {
+    const onDelete = vi.fn()
+    render(
+      <Thread
+        comments={AUTHORSHIP}
+        now={FIXTURE_NOW}
+        locale="en-GB"
+        defaultSort="new"
+        onDelete={onDelete}
+      />,
+    )
+    openMenu('c-mine', 'Ada Whitfield')
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Delete' }))
+    expect(onDelete).toHaveBeenCalledWith('c-mine')
+  })
+
+  it('draws both when the flags are ABSENT — every 0.2.0 host is here', () => {
+    // The uncomfortable half, asserted rather than assumed: absent means TRUE,
+    // so a host that upgrades without mapping the fields keeps exactly the
+    // render it has, defect and all. The alternative silently strips the edit
+    // control off the viewer's own comments and nothing errors.
+    renderThread({ onEdit: vi.fn(), onDelete: vi.fn() })
+    openMenu('c-one-word', 'Lee Ndiaye')
+    expect(screen.getByRole('menuitem', { name: 'Edit' })).toBeTruthy()
+    expect(screen.getByRole('menuitem', { name: 'Delete' })).toBeTruthy()
+  })
+
+  it('offers no overflow at all when the flags are the only thing left in it', () => {
+    // Both callbacks wired, both refused, no clipboard under jsdom and no
+    // `onCopyLink`: `CommentActions` has nothing to put in a menu and draws no
+    // trigger. An empty menu behind a button is the greyed row again.
+    render(
+      <Thread
+        comments={AUTHORSHIP}
+        now={FIXTURE_NOW}
+        locale="en-GB"
+        defaultSort="new"
+        onEdit={vi.fn()}
+        onDelete={vi.fn()}
+      />,
+    )
+    expect(
+      within(commentBox('c-theirs')).queryByRole('button', {
+        name: "More actions for Lee Ndiaye's comment",
+      }),
+    ).toBeNull()
+  })
+
+  it('keeps the tombstone rule — a deleted comment offers neither, flags or not', () => {
+    const TOMB: readonly ThreadComment[] = [
+      {
+        id: 'c-tomb',
+        author: { id: 'usr_ada', name: 'Ada Whitfield' },
+        bodyMd: '',
+        createdAt: FIXTURE_NOW - 60_000,
+        deletedAt: FIXTURE_NOW - 30_000,
+        canEdit: true,
+        canDelete: true,
+      },
+    ]
+    render(
+      <Thread
+        comments={TOMB}
+        now={FIXTURE_NOW}
+        locale="en-GB"
+        defaultSort="new"
+        onEdit={vi.fn()}
+        onDelete={vi.fn()}
+        onCopyLink={vi.fn()}
+      />,
+    )
+    fireEvent.click(
+      within(commentBox('c-tomb')).getByRole('button', {
+        name: "More actions for [deleted]'s comment",
+      }),
+    )
+    expect(screen.getByRole('menuitem', { name: 'Copy link' })).toBeTruthy()
+    expect(screen.queryByRole('menuitem', { name: 'Edit' })).toBeNull()
+    expect(screen.queryByRole('menuitem', { name: 'Delete' })).toBeNull()
+  })
+})

package/src/thread/attachments.tsx

@@ -592,7 +592,7 @@ export function GifPicker({ search, onPick, className }: GifPickerProps) {
             onClick={() => {
               onPick(gif)
             }}
-            className="block overflow-hidden border transition-[border-color] duration-[var(--dur-fast)] ease-[var(--ease-out)] hover:border-[rgb(var(--border-strong))] focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)] motion-reduce:transition-none"
+            className="block overflow-hidden border transition-[border-color] duration-[var(--dur-fast)] ease-[var(--ease-out)] hover:border-[rgb(var(--border-strong))] focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)] motion-reduce:transition-none"
             style={{
               borderRadius: 'var(--radius-sm)',
               borderColor: 'rgb(var(--border))',

package/src/thread/comment.tsx

@@ -171,6 +171,14 @@ export interface ThreadRenderContext extends RichComposerAttachmentProps {
    */
   readonly onCopyLink?: ((commentId: string) => void) | undefined
   readonly onCopyText?: ((commentId: string, ok: boolean) => void) | undefined
+  /**
+   * Edit and delete are gated TWICE, and the second gate is the per-comment
+   * one: the callback here says the host wired the mutation, and `canEdit` /
+   * `canDelete` on the row say whether this viewer may use it on THAT comment
+   * (see `ThreadComment`). Wiring the callback alone draws the item on every
+   * live comment, which is what 0.2.0 did and what the server then refused.
+   * Absent flags keep the item, so nothing a 0.2.0 host draws disappears.
+   */
   readonly onEdit?: ((commentId: string) => void) | undefined
   readonly onDelete?: ((commentId: string) => void) | undefined
   /**
@@ -212,6 +220,53 @@ function authorLabel(author: ThreadAuthor | null | undefined): string {
   return 'Unknown member'
 }
 
+/**
+ * THE tombstone strings — two acts, and a deliberate word for each.
+ *
+ * A comment becomes a tombstone two ways now (FU-0031, FU-0032): its author
+ * deleted it, or somebody else removed it. `[deleted]` was written when only
+ * the first existed, and it is read by the person whose comment is gone —
+ * telling them they did it themselves when they did not is the whole defect.
+ *
+ * REMOVED, not deleted. The two verbs carry the entire distinction, so each
+ * one is reserved for exactly one act: you delete your own, somebody removes
+ * yours. Any pair that shared a verb would need a qualifier to be read at all.
+ *
+ * "AN ADMIN", not "a workspace admin" and not "a moderator". The ONE thing
+ * `moderated` licenses the render to claim is that the author did not do it —
+ * that is the whole content of the flag, and how a host derives it is the
+ * host's business, not this module's. (An earlier draft asserted it comes from
+ * `deleted_by <> author_id`. That is one consumer's wire and appears nowhere in
+ * this repository; stating another product's schema as fact here is exactly the
+ * coupling this module's entity-agnostic claim rules out.) Naming a ROLE rather
+ * than a person keeps the claim true — nothing obliges a host to send an actor,
+ * and a string with a slot for one is a string somebody eventually fills.
+ * "Workspace" is one host's noun and this module is entity-agnostic by its own
+ * opening claim (types.ts); "moderator" is a forum's word for a role that
+ * exists in neither consumer. "Admin" is what both of them actually call the
+ * person who can do this, which is the test interface copy actually has to
+ * pass.
+ *
+ * TWO STRINGS PER ACT, because they land in two different slots. The byline is
+ * the AUTHOR position: a sentence there reads as an attribution, and "removed
+ * by an admin" sitting where a name goes says the admin wrote it. It also
+ * feeds two accessible names — "Collapse replies to X" and "More actions for
+ * X's comment" — which a sentence makes unusable. So the byline takes the
+ * short form and the body, which is the interface speaking in its own voice,
+ * takes the sentence.
+ *
+ * The brackets and the lower case are unchanged from `[deleted]`: that form is
+ * what marks a line as the system talking rather than a person, and a
+ * tombstone that stopped looking like one would be a worse regression than the
+ * one being fixed.
+ */
+const TOMBSTONE: Readonly<
+  Record<'deleted' | 'moderated', { readonly byline: string; readonly body: string }>
+> = {
+  deleted: { byline: '[deleted]', body: '[deleted]' },
+  moderated: { byline: '[removed]', body: '[removed by an admin]' },
+}
+
 /** "1 reply" / "8 replies" — the live region's wording, in one place. */
 function replyCountLabel(count: number): string {
   return `${String(count)} ${count === 1 ? 'reply' : 'replies'}`
@@ -375,7 +430,12 @@ export function CommentItem({
   const collapsed = thread.isCollapsed(node.id)
   const deleted = node.deletedAt != null
   const state = node.state ?? 'sent'
-  const label = deleted ? '[deleted]' : authorLabel(node.author)
+  // `moderated` says nothing about a live comment — nobody has removed one —
+  // so it is read HERE, under `deleted`, and nowhere else in the render. A
+  // comment carrying the flag without a `deletedAt` is not a tombstone and
+  // does not become one.
+  const tombstone = deleted ? TOMBSTONE[node.moderated === true ? 'moderated' : 'deleted'] : null
+  const label = tombstone === null ? authorLabel(node.author) : tombstone.byline
   const descendants = countDescendants(node)
   const atCap = renderDepth >= thread.maxDepth && !continued
   const { visible, hidden } = thread.visibleReplies(node)
@@ -401,6 +461,44 @@ export function CommentItem({
   // rather than trusted as a domain value (D6).
   const tint = asAvatarTint(author?.tint)
   const canEngage = !deleted && state === 'sent'
+  // The two capability gates, computed once and read only by CommentActions.
+  //
+  // Three conditions each, and each is a different question. `ctx.onEdit`
+  // asks whether the HOST wired the mutation at all; `deleted` asks whether
+  // there is anything left to act on; `node.canEdit` asks whether THIS viewer
+  // may act on THIS comment. 0.2.0 asked only the first two, so a host that
+  // wired both mutations drew both on everybody's comments and the server
+  // answered 404 forever.
+  //
+  // `!== false` rather than `=== true`: absent means the control is drawn,
+  // which is the render every 0.2.0 host already has (types.ts states the
+  // trade this makes and why the safer-looking default is worse). Only an
+  // explicit `false` takes an item away.
+  //
+  // Neither is an authorization decision. The server re-checks authorship on
+  // the edit and rank on the moderated delete; this decides what is DRAWN.
+  //
+  // `onReact` AND `onRetry` WERE CHECKED FOR THE SAME DEFECT AND DO NOT HAVE
+  // IT, which is worth stating so the next reader does not re-derive it and
+  // add two flags nothing needs.
+  //
+  //   • React is not an authored act. Acknowledging somebody else's remark is
+  //     the entire point of a reaction, so authorship is not a predicate any
+  //     host's reaction route can sensibly carry, and there is no live comment
+  //     on which the picker is drawn and cannot work. `canEngage` already
+  //     withholds it from a tombstone and from a send still in flight — the
+  //     two comments this RENDER refuses to offer it on.
+  //
+  //   • Retry is unreachable on anybody else's comment, resting on an
+  //     invariant rather than on a check. It is drawn only for
+  //     `state === 'failed'`, and both non-`sent` delivery states are
+  //     viewer-local: a comment that never reached the server, exists in one
+  //     browser, and has no other viewer. There is no authorship question to
+  //     ask about a row nobody else can see. That invariant is load-bearing
+  //     enough to skip a flag, so it is stated on `CommentDeliveryState`
+  //     where a host will actually read it — not only here.
+  const canEdit = ctx.onEdit !== undefined && !deleted && node.canEdit !== false
+  const canDelete = ctx.onDelete !== undefined && !deleted && node.canDelete !== false
   const indentClampDepth = ctx.indentClampDepth ?? DEFAULT_INDENT_CLAMP_DEPTH
 
   // A reply draws the segment of the connector that spans its own box.
@@ -561,14 +659,14 @@ export function CommentItem({
                       ctx.onCopyLink?.(node.id)
                     },
                   })}
-              {...(ctx.onEdit === undefined || deleted
+              {...(!canEdit
                 ? {}
                 : {
                     onEdit: () => {
                       ctx.onEdit?.(node.id)
                     },
                   })}
-              {...(ctx.onDelete === undefined || deleted
+              {...(!canDelete
                 ? {}
                 : {
                     onDelete: () => {
@@ -597,9 +695,9 @@ export function CommentItem({
             </p>
           )}
 
-          {deleted ? (
+          {tombstone !== null ? (
             <p className="text-[13px] italic" style={{ color: 'rgb(var(--text-tertiary))' }}>
-              [deleted]
+              {tombstone.body}
             </p>
           ) : (
             <CommentBody
@@ -624,7 +722,7 @@ export function CommentItem({
               deliberately attached outranks what a scanner found in their
               prose. A tombstone shows none — the worker already returns none
               for one (ADR-150 D8), and this is the second lock on it, because
-              "[deleted]" followed by three intact cards would leak the body
+              a tombstone followed by three intact cards would leak the body
               the tombstone exists to remove. */}
           {node.linkPreviews === undefined || node.linkPreviews.length === 0 || deleted ? null : (
             <LinkPreviews

package/src/thread/composer.tsx

@@ -189,7 +189,10 @@ export function ThreadComposer({
             'min-w-0 flex-1 overflow-hidden border',
             'transition-[border-color,box-shadow] duration-[var(--dur-fast)] ease-[var(--ease-out)]',
             'motion-reduce:transition-none',
-            'focus-within:border-[rgb(var(--accent))] focus-within:[box-shadow:var(--ring-focus)]',
+            // INSET, because this composer is mounted inside the `overflow-hidden` that
+            // `comment.tsx`'s grid-rows reply reveal requires. An outset ring is
+            // clipped there on three sides and the indicator vanishes.
+            'focus-within:border-[rgb(var(--accent))] focus-within:[box-shadow:var(--ring-focus-inset)]',
           )}
           style={{
             // Concentric: the host panel declares --thread-inner-radius as its

package/src/thread/reactions.tsx

@@ -117,7 +117,8 @@ const CHIP_BASE = cn(
   'inline-flex items-center justify-center gap-[var(--space-1)] border px-[var(--space-2)] text-[12px] font-semibold tabular-nums',
   'transition-[background-color,border-color,color,box-shadow,transform] duration-[var(--dur-fast)] ease-[var(--ease-out)]',
   'motion-reduce:transition-none',
-  'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]',
+  // INSET: chips sit inside clipping ancestors on both hosts.
+  'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)]',
   'active:scale-[0.96] motion-reduce:active:scale-100',
   'disabled:cursor-not-allowed disabled:opacity-60',
 )

package/src/thread/types.ts

@@ -42,6 +42,16 @@ export interface ThreadReactionCount {
  * ADR-147 D17 — optimistic send is a first-class state, not a nicety.
  * A comment silently lost to a bad connection is the worst thing this surface
  * can do to someone, and it is the most likely.
+ *
+ * `pending` AND `failed` ARE VIEWER-LOCAL, and that is an invariant a host has
+ * to hold rather than a thing this type can enforce. Both describe a comment
+ * that has not landed: it exists in one browser, no other viewer can see it,
+ * and no read should ever return either value. A host that puts `failed` on a
+ * row it fetched is describing somebody ELSE's comment as the viewer's own
+ * failed send, and the retry drawn beside it — the one control on this surface
+ * with no capability flag, because it never needed one — becomes the same lie
+ * `canEdit` exists to stop. Absent means `sent`, which is what every read
+ * should leave it as.
  */
 export type CommentDeliveryState = 'sent' | 'pending' | 'failed'
 
@@ -149,6 +159,105 @@ export interface ThreadComment {
   readonly editedAt?: number | null | undefined
   /** Set = tombstone (D4). The row still renders and KEEPS its subtree. */
   readonly deletedAt?: number | null | undefined
+  /**
+   * TRUE = the tombstone above was made by somebody OTHER than the author
+   * (FU-0031, FU-0032). Meaningless without `deletedAt`, and read nowhere else.
+   *
+   * One boolean rather than a `deletedBy` author, and that is a decision, not
+   * a shortcut: the wire deliberately never carries who removed a comment, so
+   * a field that could hold a name would be a field somebody eventually fills.
+   * A boolean cannot leak an identity it does not have.
+   *
+   * OPTIONAL, and absent means `[deleted]` — the render every host on 0.1.0
+   * already gets. A host with no moderation concept never sets it and never
+   * sees a word change.
+   */
+  readonly moderated?: boolean | undefined
+  /**
+   * Whether to DRAW the edit control on THIS comment.
+   *
+   * 0.2.0 forwarded `onEdit` and `onDelete` through to the thread and gated
+   * both menu items on nothing but "a callback exists, and this is not a
+   * tombstone". There was no authorship check anywhere in the render, so a
+   * host that wired the two mutations drew them on every live comment,
+   * including the ones the viewer did not write. Every server this was pointed
+   * at refused correctly, which is exactly what makes it the wrong kind of
+   * bug. It is not a hole; it is a LIE. A menu item that exists and can never
+   * work tells somebody they may do a thing they may not, and it is worse than
+   * the absent item, because the absent item at least agrees with the server.
+   *
+   * TWO flags rather than one `viewerIsAuthor`, and the argument for the
+   * second one is already in this interface. `moderated` exists because a
+   * comment can be removed by somebody OTHER than its author (FU-0031,
+   * FU-0032) — so a surface that can produce that tombstone has a delete
+   * predicate that is NOT authorship, while its edit stays author-only. This
+   * module cannot say what any host's predicates ARE, and does not try to; it
+   * only has to be able to spell two that differ, and `moderated` is already
+   * proof that they do. One consumer's arrangement is the existence proof
+   * rather than the rule: a moderated delete on a route of its own behind an
+   * admin rank, and the author-gated edit deliberately left alone, because the
+   * rank that removes somebody's words is not the rank that rewrites them.
+   * A single `viewerIsAuthor` cannot express that pair, and the day it has to,
+   * the fix is a breaking rename rather than a field.
+   *
+   * (Naming a consumer here is a narrower act than the one the TOMBSTONE
+   * docblock in `comment.tsx` rules out. That one would have told every host
+   * how to DERIVE a value — a schema stated as this module's fact. This one
+   * cites an arrangement to show a shape is reachable, and constrains nobody:
+   * a host whose two predicates are identical sets both flags the same way and
+   * never notices the seam has two halves.)
+   *
+   * A per-comment field rather than a predicate in the render context, because
+   * `ThreadLinkPreview.canHide` is already that shape and a second shape for
+   * the same idea is a second thing to learn. It also means nothing between
+   * here and the control needs new plumbing: `<Thread>` and `<ActivityPane>`
+   * forward `comments` verbatim, so the capability arrives with the row it
+   * describes.
+   *
+   * The SHAPE is `canHide`'s; the DEFAULT is its opposite, and that is worth
+   * saying out loud before somebody reasons from the precedent and guesses
+   * backwards. `canHide` is REQUIRED and therefore fails closed — a card whose
+   * host says nothing draws no dismiss control. These two are OPTIONAL and
+   * fail open. The difference is not principle, it is history: link previews
+   * were new when `canHide` landed, so requiring it cost no host anything,
+   * whereas edit and delete already render for everyone and a required field
+   * would be a breaking change that silently removes controls until it is
+   * supplied. "ABSENT MEANS TRUE" below is the whole of that argument.
+   *
+   * Deriving it here from `author.id` against a viewer id was the other
+   * candidate and is rejected twice over: a derived rule recomputed on the
+   * client is a second copy waiting to disagree with the server's, and
+   * `author.id` is nullable by D5 — `ON DELETE SET NULL` would quietly turn
+   * "the author is gone" into "you wrote this".
+   *
+   * ABSENT MEANS TRUE, and that is the uncomfortable half of this. A host on
+   * 0.2.0 that wired `onEdit` and upgrades without touching its data keeps
+   * precisely the render it has today, defect included. The alternative —
+   * absent means false — fixes that host by silently taking the edit control
+   * off the viewer's OWN comments until it maps two new fields: a release in
+   * which nobody can edit anything, nothing errors, no test in the host fails,
+   * and it survives to production for the same reason FU-0019 did. Trading a
+   * known lie for a new silent regression is not a trade, so the default
+   * preserves the render and this docblock is the notice. The seam is one
+   * field wide; a host that means it should set it.
+   *
+   * RENDERING ONLY, and never an authorization decision — the same words
+   * `canHide` is written in, for the same reason. The server re-checks
+   * authorship on every edit and rank on every moderated delete; a client that
+   * flips this to `true` earns a 404, not an edit.
+   */
+  readonly canEdit?: boolean | undefined
+  /**
+   * Whether to DRAW the delete control on THIS comment. Everything above
+   * applies, including that absent means true and that this decides RENDERING
+   * only — the server remains the gate and refuses on its own authority.
+   *
+   * It is separate from `canEdit` so the two predicates can differ, which on a
+   * surface with moderation they already do: an admin may remove a comment
+   * they may not rewrite, so `canDelete: true` with `canEdit: false` is the
+   * shape that describes them and there is no way to spell it with one flag.
+   */
+  readonly canDelete?: boolean | undefined
   readonly reactions?: readonly ThreadReactionCount[] | undefined
   readonly attachments?: readonly ThreadAttachment[] | undefined
   /**

package/src/tokens.css

@@ -402,6 +402,19 @@
      Both resolve through the theme-aware tokens, so the light block needs no
      override — var() resolves at use time. */
   --ring-focus: 0 0 0 2px rgb(var(--accent));
+  /* The SAME ring, painted inward. An outset box-shadow is clipped by ANY
+     ancestor with a non-visible overflow, and when that happens the focus
+     indicator does not degrade — it disappears, which is a WCAG 2.4.7 failure
+     rather than a cosmetic one.
+     Use this at a clipping boundary: inside a scroll container, inside the
+     `overflow-hidden` a grid-rows reveal needs, inside a Card that keeps its
+     default clip. It cannot be clipped by an ancestor because it paints inside
+     the element's own border box.
+     Found the long way on 2026-09-09: the reply composer, the reaction chips
+     and the GIF picker all lost their ring, and `thread.tsx` had already been
+     forced to override a Card's `overflow-hidden` to `overflow-visible` to keep
+     one. That override is the cost this token removes. */
+  --ring-focus-inset: inset 0 0 0 2px rgb(var(--accent));
   --ring-error: 0 0 0 2px rgb(var(--destructive));
 
   --radius-xs: 6px;