@lovett/ui 0.2.0 → 0.2.4

package/dist/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/dist/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/dist/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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lovett/ui",
-  "version": "0.2.0",
+  "version": "0.2.4",
   "private": false,
   "type": "module",
   "description": "Design system primitives, tokens, layouts, and patterns for the Lovett portfolio.",
@@ -19,7 +19,7 @@
     "./theme-v2.css": "./dist/theme-v2.css"
   },
   "publishConfig": {
-    "access": "restricted"
+    "access": "public"
   },
   "files": [
     "dist",

package/src/__tests__/clip-reserve.test.ts

@@ -0,0 +1,431 @@
+// @vitest-environment node
+//
+// Pure source scan — no DOM. jsdom has no layout engine, so it cannot
+// measure a clipped shadow even in principle; see the blind-spot note.
+/**
+ * Static guard for the "a box that CLIPS holds a box that paints OUTSIDE
+ * ITSELF" defect class.
+ *
+ * THE DEFECT THIS PINS, MEASURED IN A BROWSER
+ * -------------------------------------------
+ * `.ds-board-column-body` is the lane's scroll box. It declared
+ * `overflow-y: auto` and no padding at all. Two things follow.
+ *
+ * First, it clipped on BOTH axes, not one: when a box sets a non-`visible`
+ * overflow on one axis, a `visible` companion computes to `auto`. So the
+ * clip rectangle was the lane's border box in the inline direction too —
+ * `.ds-board-scroller` above declares `overflow-y: hidden` for exactly this
+ * reason, and the lane body had no such companion.
+ *
+ * Second, the clip rectangle coincided EXACTLY with each card's own border
+ * box, and a card paints well outside that: `--shadow-sm` at rest,
+ * `--shadow-md` plus `translateY(-1px)` on hover.
+ *
+ * Measured in Chromium at the real token values, sampling the red/luma
+ * profile outward from the top card's edges while it was hovered:
+ *
+ *                       before                    after
+ *   dark,  inline    34 34 34 34 34 …       29 30 31 32 32 33 33 34
+ *   dark,  above     34 34 34 34 34 …       32 33 34 34 34
+ *   light, inline   248 248 248 248 …      245 246 247 247 248 248
+ *
+ * A flat run at the surface's own base luma means the shadow was not there
+ * at all. Every card lost its shadow left and right; the hovered top card
+ * additionally had its lifted first pixel row cut off, which is the sliced
+ * lift the owner reported. In light the casualty was `--shadow-md`'s
+ * `0 0 0 1px` contact ring — the card's edge definition on hover.
+ *
+ * Not one of typecheck, lint, build or the suite can see any of that.
+ *
+ * WHAT THIS GUARD CHECKS, AND WHAT IT CANNOT
+ * ------------------------------------------
+ * It checks ONE thing, honestly: for each containment pair declared in
+ * CONTAINMENT below, the clipping rule reserves padding on every side at
+ * least as large as the outset the contained rule paints on that side —
+ * with the outset DERIVED from the shadow tokens rather than written down
+ * here. Retune `--shadow-md` and this recomputes; add a theme whose
+ * `--shadow-md` reaches further and this recomputes for that theme too.
+ *
+ * PER SIDE is the whole point. "Has padding" is not the invariant and
+ * scores a box padded on one axis as safe — which is precisely the shape
+ * of the sibling defect in the reply composer, whose clip wrapper carries
+ * `paddingBlockStart` and nothing else.
+ *
+ * The three things it does NOT do, stated plainly:
+ *
+ *   1. IT DOES NOT DISCOVER CONTAINMENT. CSS does not encode which element
+ *      ends up inside which; only the rendered tree knows, and it is
+ *      assembled from `board.tsx` plus whatever the host passes as
+ *      `children`. So CONTAINMENT is hand-written, one entry per pair
+ *      somebody has actually observed. A pair nobody adds is a pair
+ *      nobody checks. This guard is a regression pin on a known
+ *      relationship, not a search for unknown ones.
+ *
+ *   2. IT CANNOT CROSS A COMPONENT BOUNDARY, AND THIS IS MEASURED, NOT
+ *      SUSPECTED. The reply composer has the identical defect: the clip is
+ *      `comment.tsx:885`, the ring it eats is drawn in `composer.tsx:192`,
+ *      and `reactions.tsx:304` is the same shape again with the ring
+ *      string hidden in a module-level `CHIP_BASE` constant. A scan built
+ *      against exactly that question in `ignite-workspace` produced 15
+ *      candidates and missed both real bugs. Textual scanning cannot see a
+ *      clipping ancestor whose victim is inside a child component, and an
+ *      AST walker would have to resolve the import graph and then
+ *      over-approximate "this component draws a ring somewhere" — which
+ *      flags clips whose ring is nested under a second clip that already
+ *      handles it. So the JSX half is out of scope here rather than
+ *      half-covered, and the composer bug is tracked as its own decision.
+ *
+ *   3. IT USES THE SPEC'S REACH, NOT SKIA'S. A shadow's painted extent is
+ *      taken as `|offset| + spread + blur/2`, per CSS Backgrounds 3.
+ *      Chromium's Gaussian tail runs slightly longer than that at high
+ *      alpha. At the tokens' real alphas the difference vanished — the
+ *      profiles above resolve to the base surface inside the reserve — but
+ *      a future token at alpha 1.0 could clip a faint tail this arithmetic
+ *      calls covered. The formula is the floor, not a proof of invisibility.
+ *
+ * Mutation check (ADR-146 D8 — "a guard never observed failing is not a
+ * guard"): delete any one of the three padding declarations on
+ * `.ds-board-column-body` and the first test goes red naming that side and
+ * the shortfall in px. Verified for all three.
+ */
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+const SRC = fileURLToPath(new URL('..', import.meta.url))
+const read = (f: string) => readFileSync(join(SRC, f), 'utf8')
+
+type Side = 'top' | 'right' | 'bottom' | 'left'
+const SIDES: readonly Side[] = ['top', 'right', 'bottom', 'left']
+type Box = Record<Side, number>
+const zero = (): Box => ({ top: 0, right: 0, bottom: 0, left: 0 })
+
+/** Split on `sep` at paren depth 0 — `rgba(0, 0, 0, 0.2)` is one token. */
+function splitTop(value: string, sep: string): string[] {
+  const out: string[] = []
+  let depth = 0
+  let cur = ''
+  for (const ch of value) {
+    if (ch === '(') depth += 1
+    else if (ch === ')') depth -= 1
+    if (ch === sep && depth === 0) {
+      out.push(cur)
+      cur = ''
+    } else cur += ch
+  }
+  out.push(cur)
+  return out
+}
+
+const LENGTH = /^-?\d*\.?\d+(px)?$/
+const px = (t: string) => Number.parseFloat(t)
+
+/**
+ * Flatten a stylesheet to (selector, declarations), descending through
+ * at-rules so a rule inside `@media (prefers-reduced-motion)` is still seen.
+ */
+function rules(css: string): { selector: string; decls: Map<string, string> }[] {
+  const stripped = css.replace(/\/\*[\s\S]*?\*\//g, ' ')
+  const out: { selector: string; decls: Map<string, string> }[] = []
+  const walk = (text: string) => {
+    let i = 0
+    while (i < text.length) {
+      const open = text.indexOf('{', i)
+      if (open === -1) return
+      let depth = 1
+      let j = open + 1
+      while (j < text.length && depth > 0) {
+        if (text[j] === '{') depth += 1
+        else if (text[j] === '}') depth -= 1
+        j += 1
+      }
+      const head = text.slice(i, open).trim()
+      const body = text.slice(open + 1, j - 1)
+      if (head.startsWith('@')) walk(body)
+      else {
+        const decls = new Map<string, string>()
+        for (const decl of splitTop(body.replace(/\{[\s\S]*?\}/g, ' '), ';')) {
+          const colon = decl.indexOf(':')
+          if (colon === -1) continue
+          const prop = decl.slice(0, colon).trim()
+          if (prop === '' || prop.startsWith('--')) continue
+          decls.set(prop, decl.slice(colon + 1).trim())
+        }
+        for (const sel of splitTop(head, ',')) out.push({ selector: sel.trim(), decls })
+      }
+      i = j
+    }
+  }
+  walk(stripped)
+  return out
+}
+
+/** `--space-2` -> 8. Only literal px scale values; anything else throws. */
+function readScale(): Map<string, number> {
+  const out = new Map<string, number>()
+  for (const [, name, value] of read('tokens.css').matchAll(/^\s*(--[a-z0-9-]+)\s*:\s*([^;]+);/gm)) {
+    const v = value!.trim()
+    if (/^-?\d*\.?\d+px$/.test(v)) out.set(name!, px(v))
+  }
+  return out
+}
+const SCALE = readScale()
+
+/** A length that may be a raw px value or `var(--space-n)`. Throws otherwise. */
+function resolveLength(raw: string): number {
+  const v = raw.trim()
+  if (LENGTH.test(v)) return px(v)
+  const varMatch = /^var\((--[a-z0-9-]+)\)$/.exec(v)
+  if (varMatch !== null) {
+    const found = SCALE.get(varMatch[1]!)
+    if (found === undefined) throw new Error(`${v} does not resolve to a px scale token`)
+    return found
+  }
+  const calcMatch = /^calc\(\s*var\((--[a-z0-9-]+)\)\s*\*\s*(-?[\d.]+)\s*\)$/.exec(v)
+  if (calcMatch !== null) {
+    const found = SCALE.get(calcMatch[1]!)
+    if (found === undefined) throw new Error(`${v} does not resolve to a px scale token`)
+    return found * Number.parseFloat(calcMatch[2]!)
+  }
+  // Deliberately loud. Silently reading an unparsed padding as 0 would make
+  // the guard fail safe; silently reading it as "covered" would make it lie.
+  throw new Error(`unparsed length: ${raw}`)
+}
+
+/**
+ * The outset a box-shadow list paints beyond the border box, per side.
+ * `inset` layers paint inward and contribute nothing.
+ */
+function shadowOutset(list: string): Box {
+  const out = zero()
+  for (const layer of splitTop(list, ',')) {
+    const tokens = layer.trim().split(/\s+/).filter(Boolean)
+    if (tokens.length === 0) continue
+    if (tokens[0] === 'inset') continue
+    const lengths: number[] = []
+    for (const t of tokens) {
+      if (!LENGTH.test(t)) break
+      lengths.push(px(t))
+    }
+    if (lengths.length < 2) throw new Error(`unparsed shadow layer: ${layer}`)
+    const [ox = 0, oy = 0, blur = 0, spread = 0] = lengths
+    const reach = blur / 2 + spread
+    out.left = Math.max(out.left, -ox + reach)
+    out.right = Math.max(out.right, ox + reach)
+    out.top = Math.max(out.top, -oy + reach)
+    out.bottom = Math.max(out.bottom, oy + reach)
+  }
+  return out
+}
+
+/**
+ * Every `--shadow-*` token, reduced to its widest reach per side across
+ * EVERY theme block that declares it. A theme is not a special case.
+ */
+function readShadowTokens(): Map<string, Box> {
+  const out = new Map<string, Box>()
+  for (const file of ['tokens.css', 'theme-v2.css']) {
+    for (const [, name, value] of read(file).matchAll(/^\s*(--shadow-[a-z0-9-]+)\s*:\s*([^;]+);/gm)) {
+      const box = shadowOutset(value!)
+      const prev = out.get(name!) ?? zero()
+      out.set(name!, {
+        top: Math.max(prev.top, box.top),
+        right: Math.max(prev.right, box.right),
+        bottom: Math.max(prev.bottom, box.bottom),
+        left: Math.max(prev.left, box.left),
+      })
+    }
+  }
+  return out
+}
+const SHADOWS = readShadowTokens()
+
+/** `translateY(-1px)` on a hover state moves the whole paint region up. */
+function transformShift(decl: string | undefined): { x: number; y: number } {
+  if (decl === undefined || decl.includes('none')) return { x: 0, y: 0 }
+  const ty = /translateY\(\s*(-?[\d.]+)px\s*\)/.exec(decl)
+  const t = /translate\(\s*(-?[\d.]+)px\s*,\s*(-?[\d.]+)px\s*\)/.exec(decl)
+  if (t !== null) return { x: Number.parseFloat(t[1]!), y: Number.parseFloat(t[2]!) }
+  if (ty !== null) return { x: 0, y: Number.parseFloat(ty[1]!) }
+  return { x: 0, y: 0 }
+}
+
+const STYLES = rules(read('styles.css'))
+
+/**
+ * The furthest any state of `base` paints outside its border box, taking
+ * each state's own transform into account before the max — a state that
+ * lifts needs more room above and less below, and they are different states.
+ */
+function paintReach(base: string, exclude: RegExp): { reach: Box; states: string[] } {
+  const own = new RegExp(`^\\${base}(?![\\w-])`)
+  const reach = zero()
+  const states: string[] = []
+  for (const rule of STYLES) {
+    if (!own.test(rule.selector) || exclude.test(rule.selector)) continue
+    const shadow = rule.decls.get('box-shadow')
+    if (shadow === undefined) continue
+    const token = /^var\((--shadow-[a-z0-9-]+)\)$/.exec(shadow.trim())
+    const box = token === null ? shadowOutset(shadow) : SHADOWS.get(token[1]!)
+    if (box === undefined) throw new Error(`${rule.selector}: unknown shadow ${shadow}`)
+    const { x, y } = transformShift(rule.decls.get('transform'))
+    states.push(rule.selector)
+    reach.top = Math.max(reach.top, box.top - y)
+    reach.bottom = Math.max(reach.bottom, box.bottom + y)
+    reach.left = Math.max(reach.left, box.left - x)
+    reach.right = Math.max(reach.right, box.right + x)
+  }
+  return { reach, states }
+}
+
+/** Per-side padding of a rule. Longhands and the shorthands actually used. */
+function paddingOf(selector: string): Box {
+  const out = zero()
+  const apply = (side: Side, v: string) => {
+    out[side] = resolveLength(v)
+  }
+  for (const rule of STYLES) {
+    if (rule.selector !== selector) continue
+    for (const [prop, value] of rule.decls) {
+      if (!prop.startsWith('padding')) continue
+      const parts = splitTop(value, ' ')
+        .map((p) => p.trim())
+        .filter(Boolean)
+      const one = parts[0]!
+      switch (prop) {
+        case 'padding-block-start':
+        case 'padding-top':
+          apply('top', one)
+          break
+        case 'padding-block-end':
+        case 'padding-bottom':
+          apply('bottom', one)
+          break
+        case 'padding-inline-start':
+        case 'padding-left':
+          apply('left', one)
+          break
+        case 'padding-inline-end':
+        case 'padding-right':
+          apply('right', one)
+          break
+        case 'padding-inline':
+          apply('left', one)
+          apply('right', parts[1] ?? one)
+          break
+        case 'padding-block':
+          apply('top', one)
+          apply('bottom', parts[1] ?? one)
+          break
+        default:
+          // `padding` shorthand and anything else. Refusing to guess is the
+          // point: an unrecognised form must not read as "covered".
+          throw new Error(`${selector}: unhandled padding form \`${prop}: ${value}\``)
+      }
+    }
+  }
+  return out
+}
+
+/** Per-side margin, same rules. Used only for the layout-neutrality check. */
+function marginOf(selector: string): Box {
+  const out = zero()
+  for (const rule of STYLES) {
+    if (rule.selector !== selector) continue
+    for (const [prop, value] of rule.decls) {
+      if (!prop.startsWith('margin')) continue
+      const v = splitTop(value, ' ')[0]!.trim()
+      if (prop === 'margin-block-start') out.top = resolveLength(v)
+      else if (prop === 'margin-block-end') out.bottom = resolveLength(v)
+      else if (prop === 'margin-inline') {
+        out.left = resolveLength(v)
+        out.right = resolveLength(v)
+      } else throw new Error(`${selector}: unhandled margin form \`${prop}: ${value}\``)
+    }
+  }
+  return out
+}
+
+/**
+ * The containment pairs. Hand-written, because CSS does not encode
+ * containment and a scan cannot infer it — see blind spot 1 above.
+ */
+const CONTAINMENT = [
+  {
+    clip: '.ds-board-column-body',
+    paints: '.ds-board-card',
+    /**
+     * The DragOverlay card is NOT in the lane. dnd-kit renders
+     * `<DragOverlay>` as a sibling of the board inside `<DndContext>`
+     * (`sortable.tsx:616`) and positions it `fixed`, so its heavier
+     * `--shadow-lg` never meets this clip. Charging the lane for it would
+     * demand 12px of inline reserve for a shadow that is never there.
+     */
+    exclude: /\[data-overlay/,
+    /** Compensated so the reserve costs no layout; see the rule's comment. */
+    compensated: ['top', 'left', 'right'] as Side[],
+  },
+]
+
+describe('clip reserve', () => {
+  it('parsed plausible shadow tokens', () => {
+    // Guard the guard. If any of these silently returned zero, every
+    // assertion below would pass on a completely unreserved lane.
+    expect(SHADOWS.size).toBeGreaterThanOrEqual(5)
+    expect(SCALE.get('--space-2')).toBe(8)
+    // `0 4px 12px` is --shadow-md's widest theme form: 6 inline, 2 up, 10 down.
+    const md = SHADOWS.get('--shadow-md')!
+    expect(md.left).toBeCloseTo(6)
+    expect(md.right).toBeCloseTo(6)
+    expect(md.top).toBeCloseTo(2)
+    expect(md.bottom).toBeCloseTo(10)
+    // An inset layer paints inward and must contribute nothing.
+    expect(shadowOutset('inset 0 1px 0 0 red')).toEqual(zero())
+    expect(STYLES.length).toBeGreaterThan(100)
+  })
+
+  it.each(CONTAINMENT)('$clip reserves what $paints paints, on every side', (pair) => {
+    const { reach, states } = paintReach(pair.paints, pair.exclude)
+    // Guard the guard: if the selector stopped matching, `reach` would be all
+    // zeroes and the assertion would be vacuous.
+    expect(states.length).toBeGreaterThanOrEqual(2)
+    expect(Math.max(...SIDES.map((s) => reach[s]))).toBeGreaterThan(0)
+
+    const padding = paddingOf(pair.clip)
+    const short = SIDES.filter((side) => padding[side] < reach[side]).map(
+      (side) =>
+        `${pair.clip} reserves ${padding[side]}px on the ${side}, but ${pair.paints} ` +
+        `paints ${reach[side]}px past its border box there (states: ${states.join(', ')}). ` +
+        `The lane clips on BOTH axes — overflow-y:auto coerces overflow-x to auto — ` +
+        `so the shortfall is cut off, and no gate but a browser can see it.`,
+    )
+    expect(short).toEqual([])
+  })
+
+  it.each(CONTAINMENT)('$clip pays for that reserve with no layout at all', (pair) => {
+    // The reserve exists to hold paint, not to move anything. On every
+    // compensated side an equal negative margin gives the padding back, so
+    // the lane's resting composition is bit-identical: verified in Chromium,
+    // where the top card sat at the same x/y before and after the fix.
+    //
+    // Block-end is deliberately NOT in the list. Its 12px exceeds the
+    // column's own 8px of bottom padding, so compensating would drive this
+    // box through the column's border and consume the gutter the scroller's
+    // note reserves for an overlay horizontal scrollbar. Trailing padding on
+    // a scroll container is free at rest anyway. If someone adds that margin,
+    // this goes red and they get to re-read that note first.
+    const padding = paddingOf(pair.clip)
+    const margin = marginOf(pair.clip)
+    const wrong = SIDES.filter((side) =>
+      pair.compensated.includes(side) ? padding[side] + margin[side] !== 0 : margin[side] !== 0,
+    ).map(
+      (side) =>
+        `${pair.clip}: ${side} padding ${padding[side]}px, margin ${margin[side]}px — ` +
+        (pair.compensated.includes(side)
+          ? 'a compensated side must sum to 0 or every card moves.'
+          : 'this side is deliberately uncompensated; see the rule comment.'),
+    )
+    expect(wrong).toEqual([])
+  })
+})

package/src/detail/__tests__/activity-pane.test.tsx

@@ -275,6 +275,40 @@ describe('ActivityPane — forwarding the thread callbacks', () => {
     expect(onRetry).toHaveBeenCalledWith('c-failed')
   })
 
+  it('carries a comment’s canEdit / canDelete through to the menu', async () => {
+    // The pane forwards `comments` verbatim, so the capability needs no prop
+    // of its own here — but "needs no plumbing" is a claim, and this is the
+    // assertion behind it. Wiring the two callbacks is not enough on its own.
+    const REFUSED: readonly ThreadComment[] = [
+      {
+        id: 'c1',
+        author: { id: 'u1', name: 'Ada Lovelace' },
+        bodyMd: 'Somebody else wrote this.',
+        createdAt: NOW - 60_000,
+        canEdit: false,
+        canDelete: false,
+      },
+    ]
+    const shown = await comments({ comments: REFUSED, onEdit: vi.fn(), onDelete: vi.fn() })
+    // Both refused, no clipboard under jsdom and the pane never forwards
+    // `onCopyLink`, so there is nothing left to put in a menu and no trigger
+    // is drawn. Which is the point: the two items are gone, not greyed.
+    expect(
+      within(shown).queryByRole('button', { name: "More actions for Ada Lovelace's comment" }),
+    ).toBeNull()
+  })
+
+  it('draws both when a comment states no capability — the 0.2.0 render', async () => {
+    // The other half of the default, at the control. `WIRED` sets neither
+    // flag, so a host that upgrades without mapping them loses nothing.
+    const shown = await comments({ onEdit: vi.fn(), onDelete: vi.fn() })
+    await userEvent.click(
+      within(shown).getByRole('button', { name: "More actions for Ada Lovelace's comment" }),
+    )
+    expect(screen.getByRole('menuitem', { name: 'Edit' })).toBeInTheDocument()
+    expect(screen.getByRole('menuitem', { name: 'Delete' })).toBeInTheDocument()
+  })
+
   it('draws none of them for a host that wires none — the 0.1.0 render', async () => {
     const shown = await comments()
     // What FU-0019 measured in a browser: a written reaction is readable and

package/src/detail/activity-pane.tsx

@@ -135,6 +135,16 @@ export interface ActivityPaneProps {
    * by opening the surface rather than by reading the source, and the source
    * understates it.
    *
+   * WIRING `onEdit` OR `onDelete` IS HALF THE JOB. The callback says the host
+   * has the mutation; `canEdit` / `canDelete` on each `ThreadComment` say
+   * whether this viewer may use it on THAT comment, and the pane forwards
+   * `comments` verbatim, so they arrive with no plumbing here. Set them, or
+   * every live comment in the feed gets an Edit the server will 404 — which is
+   * what forwarding these two without them shipped as, and the same shape as
+   * the `onHideLinkPreview` note below. Absent means the item is drawn, so
+   * nothing this pane renders today disappears on upgrade; that is a
+   * deliberate default and `ThreadComment` argues it.
+   *
    * `onRetry` is the same omission with one sharper edge: the failed send it
    * recovers was posted by THIS pane's own composer, so dropping it left the
    * pane manufacturing a state and offering nobody a way out of it.