@lovett/ui 0.0.11 → 0.2.0

package/src/thread/link-preview.tsx

@@ -0,0 +1,341 @@
+/**
+ * LinkPreview — one unfurled link card in a comment (ADR-150 D8).
+ *
+ * The worker does everything dangerous. It scans `body_md`, fetches through the
+ * shared SSRF guard, parses a byte-capped head with a regex, and stores plain
+ * strings (ADR-150 D1-D3). By the time a card reaches this file it is data:
+ * a title, an optional description, an optional image URL, a worker-derived
+ * display domain, and the href the person actually typed. Nothing here fetches,
+ * parses, or decides anything about a URL.
+ *
+ * ## The four things this component exists to get right
+ *
+ * **1. The still frame is DRAWN, never READ BACK.** D4's reduced-motion
+ * treatment reuses `attachments.tsx`'s pattern, and that pattern was written
+ * for a SAME-ORIGIN attachment. An `og:image` is hotlinked from a third party,
+ * so drawing it taints the canvas the instant `drawImage` runs. Drawing and
+ * DISPLAYING a tainted canvas is legal and is exactly what this needs;
+ * `toDataURL()` or `getImageData()` on one throws `SecurityError`. So the
+ * `<canvas>` element is rendered directly and must never be "improved" into
+ * producing a data URL.
+ *
+ * `crossOrigin="anonymous"` is deliberately NOT set. It would untaint the
+ * canvas — and make every image whose origin sends no CORS header fail to load
+ * at all, trading a working card for a broken one on most of the web.
+ *
+ * **2. Every `og:image` is treated as potentially animated.** Unlike an
+ * attachment, its MIME is unknown without fetching it (D4), so the still-frame
+ * path is not gated on `image/gif` the way `AttachmentImage`'s is. Under
+ * `prefers-reduced-motion` the live image is hidden behind the captured frame
+ * until someone presses play.
+ *
+ * **3. The media geometry is declared before the bytes arrive and KEPT when
+ * they never do.** `imageAspect ?? 16/9` sizes the slot up front, and a load
+ * failure swaps the picture for an icon INSIDE the same box. A third party's
+ * dead CDN must not be able to move a thread someone is reading.
+ *
+ * **4. The link and the dismiss button are siblings.** Nesting a `<button>`
+ * inside an `<a>` is invalid HTML and breaks keyboard use — and this is exactly
+ * the shape where it is tempting, because the card reads as one clickable
+ * thing.
+ *
+ * ## Surface
+ *
+ * `<Card>`, not a bordered `<div>` with a background token (CLAUDE.md §2). The
+ * primitive owns the opaque surface, the border and the shadow; the grey
+ * structure — the hairline under the media, the recessed media well — sits
+ * INSIDE it, which is the data-display recipe rather than an exception to it.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { ExternalLink, ImageOff, Play, X } from 'lucide-react'
+import Card from '../card'
+import { cn } from '../lib/utils'
+import { QUIET_ICON, QUIET_ICON_BOX, usePrefersReducedMotion } from './attachments'
+import type { ThreadLinkPreview } from './types'
+
+/**
+ * The slot's ratio when the page declared nothing usable.
+ *
+ * D4 names 16:9 specifically. It is a reservation, not a promise about the
+ * picture: `object-fit: cover` crops whatever actually arrives into it.
+ */
+export const LINK_PREVIEW_DEFAULT_ASPECT = 16 / 9
+
+/**
+ * D4 clamps the declared ratio to `0.1..10` in the worker. This re-applies it
+ * rather than trusting the row, for one narrow reason: a `0`, a `NaN`, or a
+ * 1000:1 ratio arriving from a stale row would produce a collapsed or hairline
+ * slot, and the whole point of declaring the geometry is that the layout cannot
+ * depend on what a third party sent.
+ */
+function mediaAspect(declared: number | null | undefined): number {
+  if (declared == null || !Number.isFinite(declared) || declared <= 0) {
+    return LINK_PREVIEW_DEFAULT_ASPECT
+  }
+  return Math.min(10, Math.max(0.1, declared))
+}
+
+/** A nullable string field, normalized to "present and non-empty, or absent". */
+function blank(value: string | null | undefined): string | undefined {
+  const trimmed = value?.trim()
+  return trimmed === undefined || trimmed === '' ? undefined : trimmed
+}
+
+export interface LinkPreviewProps {
+  readonly preview: ThreadLinkPreview
+  /**
+   * Hide this card for this comment (D7). Absent — or `canHide: false` — and no
+   * dismiss control renders.
+   *
+   * `canHide` is a RENDERING convenience and never an authorization decision:
+   * the server re-checks that the caller authored the comment on every hide,
+   * and a client that flips the flag gets a 404, not a hidden card.
+   */
+  readonly onHide?: ((preview: ThreadLinkPreview) => void) | undefined
+  readonly className?: string | undefined
+}
+
+export function LinkPreview({ preview, onHide, className }: LinkPreviewProps) {
+  const reduced = usePrefersReducedMotion()
+  const [broken, setBroken] = useState(false)
+  const [playing, setPlaying] = useState(false)
+  const [capturedSrc, setCapturedSrc] = useState<string | null>(null)
+  const imageRef = useRef<HTMLImageElement>(null)
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const capturedSrcRef = useRef<string | null>(null)
+
+  const imageUrl = preview.imageUrl ?? undefined
+  // Trimmed to `undefined`, not rendered as empty. A whitespace-only
+  // description would otherwise reserve a line of nothing under the title, and
+  // a whitespace-only site name would render a bare separator dot.
+  const description = blank(preview.description)
+  const siteName = blank(preview.siteName)
+
+  /**
+   * D6 lets a stale `ok` row keep rendering while a refresh runs, so the same
+   * card can be handed a NEW `og:image` without unmounting — the key is the URL
+   * hash, not the image. React's documented "adjust state when a prop changes"
+   * shape, rather than an effect: an effect would paint the broken placeholder
+   * (or the previous still) for a frame before correcting itself.
+   */
+  const [seenImageUrl, setSeenImageUrl] = useState(imageUrl)
+  if (seenImageUrl !== imageUrl) {
+    setSeenImageUrl(imageUrl)
+    setBroken(false)
+    setPlaying(false)
+  }
+
+  /**
+   * D5 makes a non-empty title the condition for writing an `ok` row at all, so
+   * a blank one should be unreachable. Two lines keep it from producing a card
+   * with no accessible name and a dismiss button labelled "Dismiss link
+   * preview: ".
+   */
+  const title = blank(preview.title) ?? preview.domain
+
+  const captureStill = useCallback(
+    (image: HTMLImageElement) => {
+      if (imageUrl === undefined || capturedSrcRef.current === imageUrl) return
+      const canvas = canvasRef.current
+      const width = image.naturalWidth
+      const height = image.naturalHeight
+      if (canvas === null || width <= 0 || height <= 0) return
+      canvas.width = width
+      canvas.height = height
+      const context = canvas.getContext('2d')
+      if (context === null) return
+      // DRAW ONLY. This canvas is now tainted by a cross-origin image; reading
+      // it back with `toDataURL()` / `getImageData()` throws `SecurityError`.
+      // See the header. The element itself is what gets displayed.
+      context.drawImage(image, 0, 0, width, height)
+      capturedSrcRef.current = imageUrl
+      setCapturedSrc(imageUrl)
+    },
+    [imageUrl],
+  )
+
+  // The preference can flip while the comment is on screen, and an og:image
+  // that keeps animating after someone turns reduced motion on has ignored them
+  // at the moment they asked. The `complete` check covers an image whose load
+  // event already fired before the preference changed.
+  useEffect(() => {
+    if (!reduced) return
+    setPlaying(false)
+    const image = imageRef.current
+    if (image?.complete === true) captureStill(image)
+  }, [captureStill, reduced])
+
+  const hasMedia = imageUrl !== undefined
+  const showStill = hasMedia && reduced && !playing && !broken
+  const canDismiss = preview.canHide && onHide !== undefined
+
+  return (
+    <Card
+      // `h-auto` because this is a flow item whose height is its content, not a
+      // grid cell. `overflow-hidden` (Card's default) is KEPT here so the media
+      // clips to the card's corner — nothing that can take focus touches the
+      // edge, so no focus ring is eaten by it.
+      className={cn('h-auto', className)}
+      style={{
+        borderRadius: 'var(--thread-inner-radius, var(--radius-sm))',
+        // A preview should not stretch to the full width of a wide comment
+        // column; it is a footnote to the text, not a hero.
+        maxInlineSize: 'min(100%, calc(var(--space-12) * 8))',
+      }}
+    >
+      {hasMedia ? (
+        <div
+          className="relative block w-full overflow-hidden border-b"
+          style={{
+            // Declared BEFORE the bytes, and kept if they never arrive.
+            aspectRatio: String(mediaAspect(preview.imageAspect)),
+            background: 'rgb(var(--surface-inset))',
+            borderColor: 'rgb(var(--border))',
+          }}
+        >
+          {broken ? (
+            <span
+              className="flex h-full w-full items-center justify-center"
+              style={{ color: 'rgb(var(--text-tertiary))' }}
+            >
+              <ImageOff size={14} strokeWidth={1.5} aria-hidden="true" />
+            </span>
+          ) : (
+            <>
+              <img
+                ref={imageRef}
+                src={imageUrl}
+                // D4: the page supplied no trustworthy description of its own
+                // image, so it is decorative. The title beside it is the
+                // accessible content.
+                alt=""
+                loading="lazy"
+                // Prevents a referrer leak. It does NOT prevent the reader's IP
+                // reaching the image origin — that cost is accepted in D4 and
+                // is why a signed proxy is a named follow-up.
+                referrerPolicy="no-referrer"
+                className="h-full w-full object-cover"
+                style={{ visibility: showStill ? 'hidden' : 'visible' }}
+                onLoad={(event) => {
+                  // Only under the preference. Capturing every preview image
+                  // unconditionally would decode and redraw a full-resolution
+                  // bitmap for every card on the page to produce a still
+                  // nobody is going to be shown.
+                  if (reduced) captureStill(event.currentTarget)
+                }}
+                onError={() => {
+                  setBroken(true)
+                }}
+              />
+              <canvas
+                ref={canvasRef}
+                aria-hidden="true"
+                hidden={!showStill || capturedSrc !== imageUrl}
+                className="absolute inset-0 h-full w-full object-cover"
+              />
+              {showStill ? (
+                <button
+                  type="button"
+                  aria-label={`Play preview image from ${preview.domain}`}
+                  onClick={() => {
+                    setPlaying(true)
+                  }}
+                  className="absolute inset-0 flex items-center justify-center focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]"
+                  style={{
+                    // diag:contrast-ok — this scrim sits on a PHOTOGRAPH, which
+                    // is the one thing check-contrast says it cannot see:
+                    // composited against the light theme's base surface the
+                    // pair measures 1.53:1, and against the image it is
+                    // actually over it is the same media-scrim/on-scrim
+                    // treatment `attachments.tsx` uses for the identical
+                    // control. D4 requires reusing that pattern rather than
+                    // inventing a second one, so this is inherited, eyeballed
+                    // debt and not a new colour decision.
+                    background: 'rgb(var(--media-scrim-mid))',
+                    color: 'rgb(var(--media-on-scrim))',
+                  }}
+                >
+                  <Play size={20} strokeWidth={1.75} aria-hidden="true" />
+                </button>
+              ) : null}
+            </>
+          )}
+        </div>
+      ) : null}
+
+      <div
+        className="flex flex-col gap-[var(--space-1)]"
+        style={{ padding: 'var(--space-3)' }}
+      >
+        <div className="flex items-start gap-[var(--space-2)]">
+          {/* SIBLINGS, never nested. A `<button>` inside an `<a>` is invalid
+              and unusable from a keyboard, and this is the exact shape where
+              it is tempting. */}
+          <a
+            href={preview.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={cn(
+              'group/link block min-w-0 flex-1 no-underline',
+              'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]',
+            )}
+            style={{ borderRadius: 'var(--radius-xs)' }}
+          >
+            <span
+              className="flex min-w-0 items-center gap-[var(--space-1)] text-[11.5px]"
+              style={{ color: 'rgb(var(--text-tertiary))' }}
+            >
+              <ExternalLink size={11} strokeWidth={1.5} aria-hidden="true" className="shrink-0" />
+              {/* The DOMAIN leads, and that ordering is deliberate. It is
+                  derived by the worker from the URL the link actually points
+                  at; `og:site_name` is a string the target page chose. Reading
+                  "Your Bank - evil.example" is a very different claim from
+                  reading "evil.example - Your Bank". */}
+              <span className="truncate">{preview.domain}</span>
+              {siteName === undefined || siteName.toLowerCase() === preview.domain.toLowerCase() ? null : (
+                <span className="truncate">&middot; {siteName}</span>
+              )}
+            </span>
+            <span
+              className="block text-[13px] font-semibold leading-[1.35] line-clamp-2 group-hover/link:underline"
+              style={{
+                color: 'rgb(var(--foreground))',
+                marginBlockStart: 'var(--space-1)',
+              }}
+            >
+              {title}
+            </span>
+          </a>
+
+          {canDismiss ? (
+            <button
+              type="button"
+              // Preview-specific, per D8. The title is what the reader sees, so
+              // it is what identifies this card among the (at most three) on
+              // one comment — a bare "Dismiss" would be three identical rows in
+              // a screen reader's control list.
+              aria-label={`Dismiss link preview: ${title}`}
+              className={QUIET_ICON}
+              style={QUIET_ICON_BOX}
+              onClick={() => {
+                onHide?.(preview)
+              }}
+            >
+              <X size={12} strokeWidth={1.75} aria-hidden="true" />
+            </button>
+          ) : null}
+        </div>
+
+        {description === undefined ? null : (
+          <p
+            className="line-clamp-2 text-[12px] leading-[1.5]"
+            style={{ color: 'rgb(var(--text-secondary))' }}
+          >
+            {description}
+          </p>
+        )}
+      </div>
+    </Card>
+  )
+}

package/src/thread/markdown-format.ts

@@ -0,0 +1,155 @@
+/**
+ * markdown-format — what the composer's toolbar actually DOES.
+ *
+ * ADR-147 D7. The reference this port replaces (`post-modal.tsx`'s
+ * `RichComposer`) rendered a toolbar of buttons wired to nothing — fake
+ * chrome, and the named anti-pattern of this slice. So the transform is a pure
+ * function with its own tests: given the textarea's value and selection, it
+ * returns the new value and the new selection. The component's only job is to
+ * call it and restore the caret.
+ *
+ * Toggling is symmetric on purpose. A bold button that can only ever add `**`
+ * is a button that punishes a misclick, and "select it again and press it
+ * again" is the behaviour every editor has trained people to expect.
+ */
+
+export type MarkdownFormat = 'bold' | 'italic' | 'code' | 'link' | 'list'
+
+export interface MarkdownEdit {
+  readonly value: string
+  readonly selectionStart: number
+  readonly selectionEnd: number
+}
+
+const WRAPPERS: Readonly<Record<'bold' | 'italic' | 'code', string>> = {
+  bold: '**',
+  italic: '_',
+  code: '`',
+}
+
+const LIST_PREFIX = '- '
+const LINK_PLACEHOLDER = 'url'
+
+function clamp(n: number, min: number, max: number): number {
+  return Math.min(Math.max(n, min), max)
+}
+
+function applyWrapper(
+  value: string,
+  start: number,
+  end: number,
+  marker: string,
+): MarkdownEdit {
+  const selected = value.slice(start, end)
+  const width = marker.length
+
+  // Case 1 — the markers are INSIDE the selection: "**bold**" selected whole.
+  if (selected.length >= width * 2 && selected.startsWith(marker) && selected.endsWith(marker)) {
+    const inner = selected.slice(width, selected.length - width)
+    return {
+      value: value.slice(0, start) + inner + value.slice(end),
+      selectionStart: start,
+      selectionEnd: start + inner.length,
+    }
+  }
+
+  // Case 2 — the markers are OUTSIDE the selection: only "bold" selected
+  // inside "**bold**". Same intent, different selection; unwrap either way.
+  if (
+    start >= width &&
+    value.slice(start - width, start) === marker &&
+    value.slice(end, end + width) === marker
+  ) {
+    return {
+      value: value.slice(0, start - width) + selected + value.slice(end + width),
+      selectionStart: start - width,
+      selectionEnd: start - width + selected.length,
+    }
+  }
+
+  // Case 3 — wrap. With an empty selection this leaves the caret between the
+  // markers, which is what "press bold then type" has to do.
+  return {
+    value: value.slice(0, start) + marker + selected + marker + value.slice(end),
+    selectionStart: start + width,
+    selectionEnd: end + width,
+  }
+}
+
+function applyLink(value: string, start: number, end: number): MarkdownEdit {
+  const selected = value.slice(start, end)
+  const inserted = `[${selected}](${LINK_PLACEHOLDER})`
+  const next = value.slice(0, start) + inserted + value.slice(end)
+
+  if (selected === '') {
+    // Nothing selected: caret goes between the brackets so the label is typed
+    // first. The url placeholder is still there to be tabbed/clicked into.
+    return { value: next, selectionStart: start + 1, selectionEnd: start + 1 }
+  }
+  // Text selected: it becomes the label and the url placeholder is selected,
+  // so pasting a link immediately replaces it.
+  const urlStart = start + selected.length + 3
+  return {
+    value: next,
+    selectionStart: urlStart,
+    selectionEnd: urlStart + LINK_PLACEHOLDER.length,
+  }
+}
+
+function applyList(value: string, start: number, end: number): MarkdownEdit {
+  // Lists are a LINE operation, so the selection is grown to whole lines
+  // first — otherwise selecting three words in the middle of a paragraph
+  // inserts a bullet mid-sentence.
+  const lineStart = value.lastIndexOf('\n', Math.max(start - 1, 0)) + 1
+  const nextBreak = value.indexOf('\n', end)
+  const lineEnd = nextBreak === -1 ? value.length : nextBreak
+
+  const block = value.slice(lineStart, lineEnd)
+  const lines = block.split('\n')
+  const meaningful = lines.filter((line) => line.trim() !== '')
+  const allPrefixed =
+    meaningful.length > 0 && meaningful.every((line) => line.startsWith(LIST_PREFIX))
+
+  const next = lines
+    .map((line) => {
+      if (allPrefixed) return line.startsWith(LIST_PREFIX) ? line.slice(LIST_PREFIX.length) : line
+      return line.trim() === '' ? line : LIST_PREFIX + line
+    })
+    .join('\n')
+
+  return {
+    value: value.slice(0, lineStart) + next + value.slice(lineEnd),
+    selectionStart: lineStart,
+    selectionEnd: lineStart + next.length,
+  }
+}
+
+/**
+ * Pure. Deterministic. No DOM.
+ *
+ * Out-of-range selections are clamped rather than trusted — a stale
+ * `selectionStart` after a controlled re-render is a real thing, and slicing a
+ * string with a negative index fails silently instead of loudly.
+ */
+export function applyMarkdownFormat(
+  value: string,
+  selectionStart: number,
+  selectionEnd: number,
+  format: MarkdownFormat,
+): MarkdownEdit {
+  const start = clamp(Math.min(selectionStart, selectionEnd), 0, value.length)
+  const end = clamp(Math.max(selectionStart, selectionEnd), 0, value.length)
+
+  switch (format) {
+    case 'bold':
+      return applyWrapper(value, start, end, WRAPPERS.bold)
+    case 'italic':
+      return applyWrapper(value, start, end, WRAPPERS.italic)
+    case 'code':
+      return applyWrapper(value, start, end, WRAPPERS.code)
+    case 'link':
+      return applyLink(value, start, end)
+    case 'list':
+      return applyList(value, start, end)
+  }
+}