@lovett/ui 0.1.0 → 0.2.0

package/src/sortable.tsx

@@ -9,7 +9,7 @@
  * - <DragHandle> is a Lucide-grip handle pre-wired to the listeners
  */
 
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import type { CSSProperties, HTMLAttributes, ReactNode } from 'react'
 import {
   DndContext,
@@ -17,11 +17,13 @@ import {
   MeasuringStrategy,
   closestCenter,
   closestCorners,
+  pointerWithin,
   useDroppable,
   KeyboardSensor,
   PointerSensor,
   useSensor,
   useSensors,
+  type CollisionDetection,
   type DragEndEvent,
   type DragOverEvent,
   type DragStartEvent,
@@ -203,15 +205,63 @@ export function DragHandle({
  *     as a click and not a 1px drag
  *
  * Added:
- *   - `closestCorners` rather than `closestCenter`. Center-based collision
- *     mis-resolves when the dragged card is taller than the row it is over,
- *     which is the normal case on a board with variable-height cards.
+ *   - pointer-first collision (`pointerFirstCollision` below), which resolves
+ *     the drop target from the CURSOR and falls back to `closestCorners` when
+ *     there is no cursor. That fallback is not a nicety: it is the keyboard
+ *     drag's only path.
  *   - `MeasuringStrategy.Always`, because a container's height changes as
  *     cards enter and leave it and a cached rect drops the item in the wrong
  *     lane.
  *   - screen-reader announcements naming the destination container, not its id.
  * ========================================================================== */
 
+/**
+ * Pointer first, `closestCorners` second — dnd-kit's documented shape for a
+ * multi-container board (the pointer, then a rect-based fallback; which rect
+ * strategy is the choice made at the bottom of this note), and the answer to
+ * two defects rather than one.
+ *
+ * The history is a ladder, and each rung is still true:
+ *
+ *   `closestCenter` measured the dragged card's CENTRE against each droppable
+ *   and mis-resolved whenever the card was taller than the row it was over,
+ *   which is the normal case on a board with variable-height cards.
+ *
+ *   `closestCorners` measured the card's four CORNERS instead. Better, and
+ *   still wrong in the same family: it measures the CARD. A tall card's
+ *   corners stay nearer its source lane until most of its body has crossed the
+ *   boundary, so the user has to drag the whole card into the destination
+ *   rather than point at it. Reported as "I have to literally drag the full
+ *   entire card over the lane so it catches it".
+ *
+ *   `pointerWithin` measures the POINTER, so a card is caught by the lane the
+ *   cursor is over regardless of how tall the card is. Card height stops being
+ *   an input at all, which is why this does not reintroduce the defect
+ *   `closestCorners` was adopted to fix — it retires the whole measurement.
+ *
+ * `pointerWithin` returns EVERY droppable containing the pointer, ordered by
+ * the pointer's mean distance to that rect's four corners — so the tightest
+ * box around the cursor wins. A pointer inside a card yields [card, column]
+ * and `over` resolves to the card, which is what gives a cross-column drop its
+ * insertion INDEX. A pointer in the column's empty space below the last card
+ * yields just the column, and the item appends. Both are wanted.
+ *
+ * It returns nothing at all when `pointerCoordinates` is null, and dnd-kit
+ * derives those from the activator event's `clientX`/`clientY`. A KeyboardEvent
+ * has neither, so EVERY keyboard drag takes the fallback — a pointer-only
+ * strategy would leave `over` permanently null and break cross-column keyboard
+ * movement silently, gates all green. The fallback is therefore `closestCorners`
+ * and not `rectIntersection`: keyboard drags keep the exact resolution they
+ * have been tested against, and the pointer-outside-every-droppable case (the
+ * board's margins and gutters) keeps resolving to the nearest lane rather than
+ * to nothing. `rectIntersection` would answer that case by area of overlap —
+ * "most of the card", the defect above, back in the gutters.
+ */
+export const pointerFirstCollision: CollisionDetection = (args) => {
+  const byPointer = pointerWithin(args)
+  return byPointer.length > 0 ? byPointer : closestCorners(args)
+}
+
 /** containerId -> the ids it holds, in order. */
 export type SortableContainers = Readonly<Record<string, readonly string[]>>
 
@@ -228,11 +278,30 @@ export interface MultiSortableListProps {
   /** Container ids in board order. Also the set treated as drop targets. */
   containerOrder: readonly string[]
   /**
-   * Commit the move. Called synchronously from the drop handler, so a
-   * `setState` here batches with the primitive's own reset and the board does
-   * not flash the pre-drag arrangement for a frame.
+   * Commit the move. Called from the drop handler with the arrangement the
+   * board is already showing, so the consumer's job is to make `containers`
+   * agree — it is not being asked to produce a frame.
+   *
+   * It used to say "called synchronously ... so a `setState` here batches with
+   * the primitive's own reset". True, and it described the wrong consumer. A
+   * consumer that patches its cache synchronously never saw the ghost; one
+   * that patches from a mutation's `onMutate` — a microtask at best, an
+   * `await cancelQueries` at worst — is not in that batch, and got a frame of
+   * the pre-drag arrangement. See the preview note below for what replaced it.
    */
   onMove: (move: MultiSortableMove, next: SortableContainers) => void
+  /**
+   * Override the drop-target strategy. Defaults to `pointerFirstCollision`,
+   * whose reasoning is in its own docblock.
+   *
+   * A prop because this component has now changed collision strategy twice
+   * (`closestCenter` → `closestCorners` → pointer-first) and both times a
+   * consumer had to wait for a release of this package to get the fix. The
+   * escape hatch costs one optional prop; a third such wait costs a release.
+   * Overriding it is opting out of the reasoning above, including the keyboard
+   * fallback — a bare `pointerWithin` here disables keyboard dragging.
+   */
+  collisionDetection?: CollisionDetection | undefined
   /**
    * What follows the pointer. Without this the card appears to vanish.
    *
@@ -251,9 +320,11 @@ export interface MultiSortableListProps {
    * and the container the drag is currently resolved INTO.
    *
    * The second argument exists because `useDroppable().isOver` cannot answer
-   * it on a board: `closestCorners` resolves `over` to a sortable ITEM
-   * whenever a column holds one, so the column's own droppable never wins and
-   * its `isOver` measured `false` on every column during real pointer AND
+   * it on a board: every collision strategy here resolves `over` to a sortable
+   * ITEM whenever a column holds one — `closestCorners` by distance, and
+   * `pointerWithin` because a pointer inside a card is inside its column too
+   * and the card's centre is nearer — so the column's own droppable never wins
+   * and its `isOver` measured `false` on every column during real pointer AND
    * keyboard drags. The container has to be derived from the resolved `over`
    * id — the same `containerOf` the announcements already use.
    */
@@ -263,6 +334,66 @@ export interface MultiSortableListProps {
   ) => ReactNode
 }
 
+/**
+ * The arrangement the board renders INSTEAD of `containers`, and the thing
+ * `containers` has to catch up to.
+ *
+ * Defect: dropping a card in another lane showed it snap back to its origin
+ * and then forward again — "like an invisible or ghost presence". The old
+ * `handleDragEnd` cleared the preview and then called `onMove`. Clearing means
+ * rendering from `containers`, and `containers` is the consumer's cache, which
+ * at that instant still holds the PRE-DRAG arrangement. One frame in the old
+ * lane, then the consumer's patch lands and moves it again. That frame is the
+ * ghost.
+ *
+ * Reordering the two lines does not fix it. Both are in one discrete event
+ * handler, React flushes that as one batch, and an asynchronous consumer patch
+ * is not in the batch either way — the render it produces still has the
+ * preview cleared and `containers` stale. The fix is not to clear the preview
+ * at the drop at all: hold it, and let the next `containers` supersede it.
+ *
+ * So the preview is held against the exact `containers` value it was committed
+ * over. Any new one means the consumer has spoken — a patch, a rollback, a
+ * refetch, all of them authoritative — and the preview is dropped in the same
+ * render, not a frame later.
+ *
+ * WHEN THE CONSUMER NEVER PATCHES. A held preview is a claim that a move
+ * landed. A consumer that rejects the move, fails its write without rolling
+ * back, or simply ignores `onMove` never produces a new `containers`, and an
+ * unbounded hold would leave the board asserting a move that did not happen —
+ * silently, until something unrelated invalidated the query. So the hold is
+ * bounded: after `PREVIEW_SETTLE_MS` the preview expires and `containers`
+ * wins, which renders as the card returning to its lane. That is the correct
+ * picture of a rejected move, and the only picture available, because the
+ * primitive has no other way to be told.
+ *
+ * The cost is paid by a consumer that commits WITHOUT an optimistic patch and
+ * waits for a server round trip: past the deadline the card returns and then
+ * moves again when the response lands. That is the ghost, delayed — and it is
+ * honest, because a board that does not yet know the move landed should not be
+ * drawing it. The fix for that consumer is an optimistic patch, which is the
+ * pattern this component is shaped around.
+ */
+interface DragPreview {
+  arrangement: SortableContainers
+  /** The `containers` identity this was committed over. A new one supersedes. */
+  basis: SortableContainers
+  /** False while the drag is in flight — a live preview is never superseded. */
+  settled: boolean
+}
+
+/**
+ * How long a settled preview outlives the drop before `containers` wins.
+ *
+ * Floor: dnd-kit's drop animation is 250ms, and the preview has to still be
+ * under the overlay when it lands or the overlay animates onto an empty slot.
+ * Ceiling: a rejected move has to read as rejected rather than as accepted,
+ * and half a second is about where a snap-back stops looking like a response.
+ * The healthy path never reaches either — an optimistic patch supersedes this
+ * in a frame or two, and the timer is cleared.
+ */
+export const PREVIEW_SETTLE_MS = 500
+
 function moveBetween(
   arrangement: SortableContainers,
   itemId: string,
@@ -284,6 +415,7 @@ export function MultiSortableList({
   containers,
   containerOrder,
   onMove,
+  collisionDetection = pointerFirstCollision,
   renderOverlay,
   labelForItem,
   labelForContainer,
@@ -296,11 +428,59 @@ export function MultiSortableList({
 
   const [activeId, setActiveId] = useState<string | null>(null)
   const [overContainerId, setOverContainerId] = useState<string | null>(null)
-  const [preview, setPreview] = useState<SortableContainers | null>(null)
+  const [preview, setPreview] = useState<DragPreview | null>(null)
   // The arrangement the drag started from, so a cancel restores it exactly.
   const originRef = useRef<SortableContainers | null>(null)
+  const settleTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(
+    () => () => {
+      if (settleTimer.current !== null) clearTimeout(settleTimer.current)
+    },
+    [],
+  )
+
+  const stopSettleTimer = () => {
+    if (settleTimer.current !== null) {
+      clearTimeout(settleTimer.current)
+      settleTimer.current = null
+    }
+  }
+
+  // Derived, not stored: on the render where `containers` finally carries the
+  // move, the board is already right — no second commit, no frame in between.
+  const superseded = preview !== null && preview.settled && preview.basis !== containers
+  const arrangement = preview !== null && !superseded ? preview.arrangement : containers
 
-  const arrangement = preview ?? containers
+  // And a supersede is FINAL. `containers` can return to the exact object the
+  // preview was held against — a rolled-back optimistic write restores the
+  // previous reference, not a copy of it — and a preview still sitting in state
+  // would then stop looking superseded and draw the move a second time, after
+  // the consumer had undone it. Dropping it here rather than in an effect keeps
+  // that to zero frames: React re-runs this render with the state already gone.
+  // The pending timer is left to fire into a null preview, where it is a no-op.
+  if (superseded) setPreview(null)
+
+  /**
+   * Show `next` until `containers` says otherwise. Called at every exit from a
+   * drag — committed, no-op, dropped outside, cancelled — so there is exactly
+   * one place where the board stops previewing.
+   *
+   * `next === containers` covers the ordinary cancel: the board is already
+   * rendering the truth, so there is nothing to hold and no timer to run.
+   */
+  const holdPreview = (next: SortableContainers) => {
+    stopSettleTimer()
+    if (next === containers) {
+      setPreview(null)
+      return
+    }
+    setPreview({ arrangement: next, basis: containers, settled: true })
+    settleTimer.current = setTimeout(() => {
+      settleTimer.current = null
+      setPreview(null)
+    }, PREVIEW_SETTLE_MS)
+  }
 
   const containerOf = (id: string): string | null => {
     if (containerOrder.includes(id)) return id
@@ -316,8 +496,14 @@ export function MultiSortableList({
   const handleDragStart = (event: DragStartEvent) => {
     const id = String(event.active.id)
     setActiveId(id)
-    originRef.current = containers
-    setPreview(containers)
+    stopSettleTimer()
+    // `arrangement`, not `containers`. A previous drop may still be held while
+    // its consumer patch is in flight, and rebasing on `containers` here would
+    // yank that card back to its old lane the moment the user picks up the
+    // next one — the ghost again, one drag later. The drag starts from what is
+    // on screen, which is also what the user is dragging.
+    originRef.current = arrangement
+    setPreview({ arrangement, basis: containers, settled: false })
     // The card starts over its own column, so the drop target is lit from the
     // first frame rather than only once the pointer crosses a boundary.
     setOverContainerId(containerOf(id))
@@ -341,7 +527,11 @@ export function MultiSortableList({
     const overItems = arrangement[to] ?? []
     const overIndex = overItems.indexOf(overId)
     const index = overIndex === -1 ? overItems.length : overIndex
-    setPreview(moveBetween(arrangement, itemId, from, to, index))
+    setPreview({
+      arrangement: moveBetween(arrangement, itemId, from, to, index),
+      basis: containers,
+      settled: false,
+    })
   }
 
   const handleDragEnd = (event: DragEndEvent) => {
@@ -355,8 +545,11 @@ export function MultiSortableList({
     setOverContainerId(null)
     originRef.current = null
 
+    // Dropped outside every column, or an id the origin does not hold. Nothing
+    // is committed, so nothing will patch: the board goes back to what it was
+    // showing when the drag began.
     if (!over || !from) {
-      setPreview(null)
+      holdPreview(origin)
       return
     }
 
@@ -367,22 +560,33 @@ export function MultiSortableList({
     const index = overIndex === -1 ? overItems.length : overIndex
     const next = moveBetween(origin, itemId, from, to, index)
 
-    setPreview(null)
-    if (from === to && (origin[from] ?? []).indexOf(itemId) === index) return
+    // Same lane, same slot. No `onMove`, therefore no patch to wait for.
+    if (from === to && (origin[from] ?? []).indexOf(itemId) === index) {
+      holdPreview(origin)
+      return
+    }
+
+    // Hold BEFORE handing over. The primitive's own state is then complete and
+    // consistent whatever `onMove` does, including throw.
+    holdPreview(next)
     onMove({ itemId, fromContainerId: from, toContainerId: to, toIndex: index }, next)
   }
 
   const handleDragCancel = () => {
     setActiveId(null)
     setOverContainerId(null)
+    const origin = originRef.current ?? containers
     originRef.current = null
-    setPreview(null)
+    // Not `setPreview(null)`: clearing renders `containers`, which is only the
+    // right answer when the drag started from it. If a previous drop is still
+    // held, cancelling this one must return to THAT, not undo both.
+    holdPreview(origin)
   }
 
   return (
     <DndContext
       sensors={sensors}
-      collisionDetection={closestCorners}
+      collisionDetection={collisionDetection}
       measuring={{ droppable: { strategy: MeasuringStrategy.Always } }}
       onDragStart={handleDragStart}
       onDragOver={handleDragOver}
@@ -424,11 +628,12 @@ export function MultiSortableList({
  * accent (design brief §4), and only the consumer knows what its border is.
  *
  * `isOver` here is `useDroppable`'s raw answer and is NOT the board's drag-over
- * signal: with `closestCorners`, `over` resolves to a sortable item whenever
- * the column holds one, so this reads `false` for the column the card is
- * actually over. It is kept because the droppable registration is what makes an
- * EMPTY column a drop target at all. The state a consumer should paint comes
- * from `MultiSortableList`'s `overContainerId`.
+ * signal: `over` resolves to a sortable item whenever the column holds one, so
+ * this reads `false` for the column the card is actually over. It is kept
+ * because the droppable registration is what makes an EMPTY column a drop
+ * target at all — and, under pointer-first collision, what makes the column's
+ * empty space below the last card a target for an append. The state a consumer
+ * should paint comes from `MultiSortableList`'s `overContainerId`.
  */
 export function SortableDropZone({
   id,

package/src/thread/__tests__/fixtures/thread-fixture.ts

@@ -11,6 +11,9 @@
  *   • 8 replies on one parent              — 3 visible, 5 hidden (D-port)
  *   • a DELETED parent with live children  — D4, the tombstone that keeps its
  *                                            subtree instead of orphaning it
+ *   • a MODERATED tombstone                — FU-0032, the second way a comment
+ *                                            becomes one; `moderated` is all
+ *                                            that separates it from the first
  *   • a reply whose parent is ABSENT       — D4's other half: "not fetched" is
  *                                            not "deleted", and must be labelled
  *   • a pending and a failed send          — D17
@@ -143,6 +146,20 @@ export const THREAD_FIXTURE: readonly ThreadComment[] = [
     createdAt: ago(4 * HOUR + 20 * MINUTE),
   },
 
+  // ── FU-0032: a tombstone somebody ELSE made. Structurally identical to
+  //    the one above — same blanked body, same `deletedAt` — and `moderated`
+  //    is the entire difference, which is the point: without it the two are
+  //    the same row and the reader is told the wrong thing about one of them.
+  //    The author is still withheld, and the wire never carries who removed it.
+  {
+    id: 'c-moderated',
+    author: { id: 'usr_kai', name: 'Kai Moreau' },
+    bodyMd: '',
+    createdAt: ago(5 * HOUR + 30 * MINUTE),
+    deletedAt: ago(3 * HOUR),
+    moderated: true,
+  },
+
   // ── D4's other half: the parent is ABSENT from this page, not deleted. ──
   {
     id: 'c-orphan',

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()

package/src/thread/comment.tsx

@@ -212,6 +212,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 +422,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)
@@ -597,9 +649,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 +676,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/types.ts

@@ -149,6 +149,20 @@ 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
   readonly reactions?: readonly ThreadReactionCount[] | undefined
   readonly attachments?: readonly ThreadAttachment[] | undefined
   /**