@lovett/ui 0.2.0 → 0.2.4

package/src/styles.css

@@ -956,7 +956,13 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
-  min-block-size: 96px;
+  /* 96px is the OUTER floor, and `min-block-size` is a border-box one — so it
+     carries the block-start compensation below, which lives outside the border
+     box. Without the `+ --space-1` an empty lane in a content-sized board
+     (the only layout where this floor binds at all; a stretched board takes
+     its height from the grid row) drew its frame 4px shorter than before.
+     Measured: column 154px -> 150px, with the empty message itself unmoved. */
+  min-block-size: calc(96px + var(--space-1));
   /* Overridable by the consuming surface. Capping it is what produces the
      next-card peek instead of an infinitely tall column. Declared here rather
      than spelled as a `var(--x, fallback)` so the token-shape guard can still
@@ -968,6 +974,52 @@
   max-block-size: var(--board-column-max-block-size);
   flex: 1 1 auto;
   overflow-y: auto;
+
+  /* THE LANE IS A CLIP, AND A CARD PAINTS OUTSIDE ITSELF.
+   *
+   * `overflow-y: auto` here does not clip one axis. A `visible` companion is
+   * coerced to `auto` — the same rule `.ds-board-scroller` above declares
+   * `overflow-y: hidden` to dodge — so this box clips INLINE as well. That is
+   * why the reserve below is four-sided and not a top inset: with zero padding
+   * the clip edge WAS the card's own border box, so every card lost shadow
+   * left and right, the top one lost its hover lift into the header gap, and
+   * the last one lost its shadow at the scroll end. Owner, in a browser, 2026-
+   * 09-09: the lift is sliced. Nothing typecheck, lint, build or the suite
+   * reads can see a sliced shadow, and jsdom has no layout to measure one.
+   *
+   * `scroll-padding-block-end` below is NOT this and never was. It positions
+   * where `scrollIntoView` lands. It reserves no paint room whatsoever.
+   *
+   * The reserve is READ OFF the shadow tokens, not guessed. A shadow paints
+   * `|offset| + spread + blur/2` past the border box, so the hover step
+   * --shadow-md reaches furthest in the theme where it is a plain
+   * `0 4px 12px`: 6px inline, 2px block-start, 10px block-end. The hover
+   * `translateY(-1px)` lifts all of that one pixel, taking block-start to 3.
+   * Rounded up onto the spacing scale: 8 / 4 / 12. A value off the scale would
+   * mean the scale is wrong; these are on it.
+   *
+   * Inline and block-start are pulled straight back by an equal NEGATIVE
+   * margin, so this box grows outward into the column's own --space-2 padding
+   * and not one card moves. That is the entire requirement — paint room
+   * without repositioning the lane's resting composition. The side effect is
+   * an improvement: an overlay vertical scrollbar now floats over the reserve
+   * instead of over the cards.
+   *
+   * Block-end takes no such margin, deliberately, and this is where the
+   * scroller's note at ~:839 is respected rather than overruled. 12px exceeds
+   * the column's 8px of bottom padding, so pulling back would drive this box
+   * through the column's border AND consume the 8px that note keeps clear for
+   * an overlay HORIZONTAL scrollbar to float over — the one thing it asks for.
+   * Uncompensated trailing padding on a scroll container costs nothing at
+   * rest, because `flex: 1 1 auto` already makes this box taller than its
+   * content; it surfaces only at the bottom of a scrolled lane, where it reads
+   * as the end of the list rather than as a gap. */
+  padding-inline: var(--space-2);
+  margin-inline: calc(var(--space-2) * -1);
+  padding-block-start: var(--space-1);
+  margin-block-start: calc(var(--space-1) * -1);
+  padding-block-end: var(--space-3);
+
   scroll-padding-block-end: var(--space-6);
 }
 

package/src/theme-v2.css

@@ -158,6 +158,19 @@
      against its surface, under the 3:1 WCAG 2.2 SC 2.4.11 asks of a focus
      indicator. See the note on --ring-focus in tokens.css. */
   --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));
 }
 
@@ -225,4 +238,17 @@
   --inset-highlight: 255 255 255 / 0.05;
   --modal-overlay: 0 0 0 / 0.7;
   --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));
 }

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

@@ -740,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
   /**
@@ -453,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.
@@ -613,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: () => {

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'
 
@@ -163,6 +173,91 @@ export interface ThreadComment {
    * 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;