@lovett/ui 0.0.11 → 0.2.0

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

@@ -0,0 +1,252 @@
+/**
+ * Thread fixture — the HARD cases.
+ *
+ * CLAUDE.md §7: shared mock data lives in a fixture file, never inline in a
+ * test. This one is written against ADR-147's acceptance criteria rather than
+ * against a pleasant screenshot, so every entry is here because something
+ * plausible breaks on it:
+ *
+ *   • a 4-deep chain                       — the render cap, and what "Continue
+ *                                            this thread" has to reach
+ *   • 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
+ *   • 2 images and a PDF                   — D9, including a declared aspect
+ *   • 6 distinct reactions, 1 the viewer's — D8
+ *   • a user mention AND a task mention    — D11
+ *   • an edited comment                    — D15
+ *   • a 2,000-character body               — D5 / acceptance 7
+ *   • a one-word body                      — D5 / acceptance 7
+ *   • a null author, a null display name,
+ *     no avatar, and a BROKEN avatar src   — D5 / acceptance 7
+ *
+ * Every timestamp is derived from FIXTURE_NOW, so the fixture is frozen and
+ * the relative labels it produces are assertable (D16, CLAUDE.md §7).
+ */
+
+import type { ThreadComment } from '../../types'
+
+/** 2026-09-06T12:00:00.000Z. Pass this as `now` and the clock cannot move. */
+export const FIXTURE_NOW = Date.UTC(2026, 8, 6, 12, 0, 0)
+
+const MINUTE = 60_000
+const HOUR = 60 * MINUTE
+const DAY = 24 * HOUR
+
+function ago(ms: number): number {
+  return FIXTURE_NOW - ms
+}
+
+/** Exactly 2,000 characters, deterministically. */
+export const LONG_BODY: string = 'The flighting plan holds through the end of the quarter. '
+  .repeat(40)
+  .slice(0, 2000)
+
+export const BROKEN_AVATAR_SRC = 'https://assets.example.invalid/missing-avatar.png'
+
+export const THREAD_FIXTURE: readonly ThreadComment[] = [
+  // ── 6 reactions, one of them the viewer's. Author has no avatar at all. ──
+  {
+    id: 'c-reactions',
+    author: { id: 'usr_marcus', name: 'Marcus Webb', role: 'Strategy' },
+    bodyMd: 'Pulling the second flight forward a week gives us the full holiday run-up.',
+    createdAt: ago(6 * MINUTE),
+    pinned: true,
+    reactions: [
+      { key: 'up', count: 7, viewerReacted: true },
+      { key: 'heart', count: 3, viewerReacted: false },
+      { key: 'celebrate', count: 2, viewerReacted: false },
+      { key: 'eyes', count: 4, viewerReacted: false },
+      { key: 'check', count: 1, viewerReacted: false },
+      { key: 'question', count: 2, viewerReacted: false },
+    ],
+  },
+
+  // ── Mentions: one person, one task item. Edited. Broken avatar src. ──
+  {
+    id: 'c-mentions',
+    author: {
+      id: 'usr_dana',
+      name: 'Dana Ortiz',
+      avatarUrl: BROKEN_AVATAR_SRC,
+      tint: 'blue',
+    },
+    bodyMd:
+      '@[Marcus Webb](user:usr_marcus) this is blocked on @[Slice B migration](task_item:tit_44a) landing first. Link for context: [the plan](https://example.com/plan).',
+    createdAt: ago(42 * MINUTE),
+    editedAt: ago(38 * MINUTE),
+    reactions: [{ key: 'eyes', count: 2, viewerReacted: false }],
+  },
+
+  // ── Attachments: two images (one with a declared aspect) and a PDF. ──
+  {
+    id: 'c-attachments',
+    author: { id: 'usr_priya', name: 'Priya Nair' },
+    bodyMd: 'Both cut-downs plus the signed spec.',
+    createdAt: ago(3 * HOUR),
+    attachments: [
+      {
+        id: 'att-1',
+        kind: 'image',
+        name: 'hero-16x9.jpg',
+        url: 'https://assets.example.invalid/hero-16x9.jpg',
+        mime: 'image/jpeg',
+        sizeBytes: 482_113,
+        aspectRatio: 16 / 9,
+      },
+      {
+        id: 'att-2',
+        kind: 'image',
+        name: 'story-9x16.jpg',
+        url: 'https://assets.example.invalid/story-9x16.jpg',
+        mime: 'image/jpeg',
+        sizeBytes: 511_902,
+        aspectRatio: 9 / 16,
+      },
+      {
+        id: 'att-3',
+        kind: 'file',
+        name: 'creative-spec.pdf',
+        url: 'https://assets.example.invalid/creative-spec.pdf',
+        mime: 'application/pdf',
+        sizeBytes: 1_884_160,
+      },
+    ],
+  },
+
+  // ── D4: a DELETED parent that keeps its subtree. ──
+  {
+    id: 'c-deleted-parent',
+    author: { id: 'usr_gone', name: 'Sam Petrov' },
+    // The API blanks the body on read; the fixture reflects what arrives.
+    bodyMd: '',
+    createdAt: ago(5 * HOUR),
+    deletedAt: ago(4 * HOUR),
+  },
+  {
+    id: 'c-deleted-child-a',
+    parentId: 'c-deleted-parent',
+    // D5: the author record is gone entirely (ON DELETE SET NULL).
+    author: null,
+    bodyMd: 'Agreed, and the same applies to the Q4 flight.',
+    createdAt: ago(4 * HOUR + 50 * MINUTE),
+  },
+  {
+    id: 'c-deleted-child-b',
+    parentId: 'c-deleted-parent',
+    // D5: a real user with NO display name — only an email.
+    author: { id: 'usr_noname', name: null, email: 'jordan@example.com' },
+    bodyMd: 'Still true after the rebrief?',
+    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',
+    parentId: 'c-not-on-this-page',
+    author: { id: 'usr_lee', name: 'Lee Ndiaye' },
+    bodyMd: 'Following on from the earlier note about pacing.',
+    createdAt: ago(6 * HOUR),
+  },
+
+  // ── A four-level chain: root + 3 nested. Exercises the depth cap. ──
+  {
+    id: 'c-deep-0',
+    author: { id: 'usr_marcus', name: 'Marcus Webb' },
+    bodyMd: 'Level one.',
+    createdAt: ago(2 * DAY),
+  },
+  {
+    id: 'c-deep-1',
+    parentId: 'c-deep-0',
+    author: { id: 'usr_dana', name: 'Dana Ortiz' },
+    bodyMd: 'Level two.',
+    createdAt: ago(2 * DAY - 10 * MINUTE),
+  },
+  {
+    id: 'c-deep-2',
+    parentId: 'c-deep-1',
+    author: { id: 'usr_priya', name: 'Priya Nair' },
+    bodyMd: 'Level three.',
+    createdAt: ago(2 * DAY - 20 * MINUTE),
+  },
+  {
+    id: 'c-deep-3',
+    parentId: 'c-deep-2',
+    author: { id: 'usr_lee', name: 'Lee Ndiaye' },
+    bodyMd: 'Level four, past the render cap.',
+    createdAt: ago(2 * DAY - 30 * MINUTE),
+  },
+
+  // ── Eight replies on one parent: 3 visible, 5 hidden. ──
+  {
+    id: 'c-many',
+    author: { id: 'usr_priya', name: 'Priya Nair' },
+    bodyMd: 'Dropping the full list of markets below.',
+    createdAt: ago(3 * DAY),
+  },
+  ...Array.from({ length: 8 }, (_, index): ThreadComment => ({
+    id: `c-many-${String(index + 1)}`,
+    parentId: 'c-many',
+    author: { id: 'usr_marcus', name: 'Marcus Webb' },
+    bodyMd: `Market ${String(index + 1)} confirmed.`,
+    createdAt: ago(3 * DAY - (index + 1) * MINUTE),
+  })),
+
+  // ── A 2,000-character body and a one-word body. ──
+  {
+    id: 'c-long',
+    author: { id: 'usr_dana', name: 'Dana Ortiz' },
+    bodyMd: LONG_BODY,
+    createdAt: ago(4 * DAY),
+  },
+  {
+    id: 'c-one-word',
+    author: { id: 'usr_lee', name: 'Lee Ndiaye' },
+    bodyMd: 'Shipped.',
+    createdAt: ago(5 * DAY),
+  },
+
+  // ── D17: an optimistic send in flight, and one that failed. ──
+  {
+    id: 'c-pending',
+    author: { id: 'usr_ada', name: 'Ada Whitfield' },
+    bodyMd: 'Adding the revised pacing now.',
+    createdAt: ago(2 * MINUTE),
+    state: 'pending',
+  },
+  {
+    id: 'c-failed',
+    author: { id: 'usr_ada', name: 'Ada Whitfield' },
+    bodyMd: 'This one never made it off the device.',
+    createdAt: ago(4 * MINUTE),
+    state: 'failed',
+    errorText: 'This comment did not send.',
+  },
+]
+
+/** The viewer, for composer avatars and reaction ownership. */
+export const FIXTURE_VIEWER = {
+  id: 'usr_ada',
+  name: 'Ada Whitfield',
+} as const

package/src/thread/__tests__/link-preview-source.test.ts

@@ -0,0 +1,120 @@
+// @vitest-environment node
+//
+// Pure source scan — no DOM needed, and jsdom rewrites `import.meta.url` to an
+// http URL that `fileURLToPath` refuses. Same pragma, same reason, as
+// `token-shape.test.ts`.
+//
+/**
+ * The half of ADR-150 AC 32 that a rendering test structurally cannot cover.
+ *
+ * A canvas tainted by a cross-origin `og:image` DISPLAYS perfectly. It throws
+ * only when it is READ — `toDataURL()`, `getImageData()`, `toBlob()` — so a
+ * green render proves nothing about the defect this criterion exists to
+ * prevent. The runtime spy in `link-preview.test.tsx` proves the current code
+ * does not read it back; this proves no future refactor can add the read
+ * without a failing test, which is the durable half.
+ *
+ * AC 29 rides along for the same structural reason: "the built client contains
+ * no HTML parser and the link card adds no TipTap code to a thread list" is a
+ * statement about the module's IMPORTS, and the cheapest honest place to assert
+ * it is the import list itself.
+ */
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+const SOURCE = readFileSync(
+  fileURLToPath(new URL('../link-preview.tsx', import.meta.url)),
+  'utf8',
+)
+
+/**
+ * The module with its prose removed.
+ *
+ * Every negative assertion below runs against this rather than the raw file,
+ * because the module's own documentation NAMES the things it must not do -
+ * "`crossOrigin=\"anonymous\"` is deliberately NOT set", "`toDataURL()` throws".
+ * Scanning the comments would either fail on a correct file or force the
+ * documentation to stop being specific, and the specificity is the point.
+ */
+const CODE = SOURCE.replace(/\/\*[\s\S]*?\*\//g, '')
+  .split('\n')
+  .filter((line) => !/^\s*(?:\/\/|\*)/.test(line))
+  .join('\n')
+
+describe('AC 32 - the still-frame canvas is drawn and never read back', () => {
+  it('contains no canvas read-back call', () => {
+    // The module's comments NAME all three APIs deliberately, so these match a
+    // CALL rather than a mention.
+    expect(CODE).not.toMatch(/\.toDataURL\s*\(/)
+    expect(CODE).not.toMatch(/\.getImageData\s*\(/)
+    expect(CODE).not.toMatch(/\.toBlob\s*\(/)
+  })
+
+  it('draws the frame it displays', () => {
+    // The positive half: removing `drawImage` would leave an empty canvas and
+    // an always-blank still, which no assertion about absence would catch.
+    expect(CODE).toMatch(/\.drawImage\s*\(/)
+  })
+
+  it('never sets crossOrigin on the hotlinked image', () => {
+    // It would untaint the canvas AND make every origin that sends no CORS
+    // header fail to load at all — a working card traded for a broken one on
+    // most of the web (D4, review amendment).
+    expect(CODE).not.toMatch(/crossOrigin\s*=/i)
+    // And the file still SAYS why, so the next reader does not re-add it.
+    expect(SOURCE).toMatch(/crossOrigin/)
+  })
+})
+
+describe('AC 29 - the card carries no editor, no parser, and no fetch client', () => {
+  it('imports nothing from TipTap, ProseMirror, or a markdown pipeline', () => {
+    const specifiers = [...CODE.matchAll(/^import[\s\S]*?from '([^']+)'/gm)].map((m) => m[1])
+    expect(specifiers.length).toBeGreaterThan(0)
+    for (const specifier of specifiers) {
+      expect(specifier).not.toMatch(/tiptap|prosemirror|react-markdown|remark|rehype/i)
+    }
+  })
+
+  it('holds no URL and makes no request', () => {
+    // A primitive that fetched would be a primitive with a base URL in it
+    // (CLAUDE.md §3). Every URL this renders arrives as data.
+    expect(CODE).not.toMatch(/\bfetch\s*\(/)
+    expect(CODE).not.toMatch(/https?:\/\//)
+  })
+
+  it('renders no raw markup', () => {
+    expect(CODE).not.toMatch(/dangerouslySetInnerHTML/)
+    expect(CODE).not.toMatch(/innerHTML/)
+  })
+
+  it('uses Lucide icons rather than inline SVG', () => {
+    // CLAUDE.md §6. `packages/ui/` may own an SVG definition; a link card is
+    // not one of the places that should.
+    expect(CODE).not.toMatch(/<svg/)
+    expect(CODE).toMatch(/from 'lucide-react'/)
+  })
+})
+
+describe('CLAUDE.md section 2 - the surface is the primitive, not a forked div', () => {
+  it('renders a Card and never uses a washed-out tint as the surface', () => {
+    expect(CODE).toMatch(/from '\.\.\/card'/)
+    expect(CODE).toMatch(/<Card/)
+    // The two tokens the owner's hard rule names. `--muted` is a small muted
+    // FILL and `--surface-overlay*` is a tint on an already-opaque surface;
+    // neither is ever a card/panel background.
+    expect(CODE).not.toMatch(/background:\s*'rgb\(var\(--surface-overlay/)
+    expect(CODE).not.toMatch(/background:\s*'rgb\(var\(--muted\)\)'/)
+  })
+
+  it('carries no colour literal and no raw spacing or radius value', () => {
+    // CLAUDE.md section 4: colour literals live only in tokens.css, and every
+    // spacing/radius value snaps to a tier.
+    expect(CODE).not.toMatch(/#[0-9a-fA-F]{3,8}\b/)
+    expect(CODE).not.toMatch(/\b(?:rgb|rgba|oklch|hsl)\(\s*(?!var\()/)
+    for (const property of ['padding', 'margin', 'gap', 'borderRadius', 'inset']) {
+      const raw = new RegExp(`${property}[^,;\\n]*:\\s*'[^']*\\d+(?:px|rem|em)`, 'i')
+      expect(CODE).not.toMatch(raw)
+    }
+  })
+})