mobile: paper and file particle views (parity phase 4)

- Extract the shared markdown renderer/theme out of TextParticleView into
  a reusable MarkdownBody component (DRY).
- PaperParticleView renders desktop-authored documents (title + markdown)
  with a length-based dwell.
- FileParticleView shows name/size and a Download action that opens a
  signed URL via the OS.
- Both wired into StreamView's render switch; FallbackParticleView is now a
  true catch-all for unknown/folder types only.

Deferred (documented for a follow-up phase): composing papers/files from
mobile, particle attachments + lightbox, and link previews in text.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_01LqGPzXQ1AA9CqYHgCgmbtV

js/mobile/src/features/stream-view/TextParticleView.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useRef, type ReactNode } from 'react';
-import { Platform, ScrollView, Text, View, type ViewStyle } from 'react-native';
-import { Renderer, useMarkdown, type MarkedStyles } from 'react-native-marked';
+import { useEffect, useRef } from 'react';
+import { ScrollView, Text, View } from 'react-native';
 import type { Particle } from '@/api/types';
 import { cn } from '@/lib/utils';
+import { MarkdownBody } from '@/components/MarkdownBody';
 import { RelativeTimestamp } from '@/components/RelativeTimestamp';
 import { useStreamSafeArea } from './stream-safe-area';
 
@@ -47,156 +47,6 @@ function hasMarkdownFormatting(content: string): boolean {
   );
 }
 
-// react-native-marked doesn't render GFM task-list checkboxes (marked strips
-// the `[ ]`/`[x]` into token flags the parser ignores), so a write/read drift
-// shows up as bullets with no box. Swap the marker for a checkbox glyph before
-// parsing — read-only, matching desktop's bullet-free checkboxes.
-const TASK_ITEM_RE = /^(\s*)[-*+] \[([ xX])\] /gm;
-
-function withTaskCheckboxes(markdown: string): string {
-  return markdown.replace(
-    TASK_ITEM_RE,
-    (_match, indent: string, mark: string) =>
-      `${indent}${mark === ' ' ? '☐' : '☑'} `,
-  );
-}
-
-// Mirror the desktop Crepe palette (markdown-editor.css `--crepe-*`) so a
-// message reads the same on both surfaces: white-on-transparent text, a blue
-// accent, pink inline code, and a near-opaque dark surface behind code blocks
-// and tables. Defined at module scope so the references stay stable —
-// `useMarkdown` re-parses only when these or the content change.
-//
-// Known gap vs desktop: fenced code blocks aren't syntax-highlighted (Crepe
-// uses CodeMirror; react-native-marked only exposes the language tag). They
-// render as plain monospace on the dark surface, which is acceptable for v1.
-const TEXT_COLOR = 'rgba(255,255,255,0.92)';
-const ACCENT = '#60a5fa';
-const SURFACE = 'rgba(24,24,28,0.96)';
-const OUTLINE = 'rgba(255,255,255,0.2)';
-const MONO = Platform.OS === 'ios' ? 'Menlo' : 'monospace';
-
-const MARKDOWN_THEME = {
-  colors: {
-    text: TEXT_COLOR,
-    link: ACCENT,
-    code: SURFACE,
-    border: OUTLINE,
-  },
-};
-
-const MARKDOWN_STYLES: MarkedStyles = {
-  text: { color: TEXT_COLOR, fontSize: 18, lineHeight: 28 },
-  li: { color: TEXT_COLOR, fontSize: 18, lineHeight: 28 },
-  strong: { fontWeight: '700' },
-  em: { fontStyle: 'italic' },
-  strikethrough: {
-    textDecorationLine: 'line-through',
-    color: 'rgba(255,255,255,0.6)',
-  },
-  // fontStyle "normal" cancels react-native-marked's italic-by-default for
-  // links and inline code (desktop renders neither italic).
-  link: { color: ACCENT, fontStyle: 'normal' },
-  // borderBottomWidth 0 removes the library's default heading underline rule,
-  // which desktop's headings don't have.
-  h1: {
-    color: '#ffffff',
-    fontSize: 28,
-    lineHeight: 34,
-    fontWeight: '700',
-    marginTop: 8,
-    marginBottom: 8,
-    borderBottomWidth: 0,
-  },
-  h2: {
-    color: '#ffffff',
-    fontSize: 24,
-    lineHeight: 30,
-    fontWeight: '700',
-    marginTop: 8,
-    marginBottom: 6,
-    borderBottomWidth: 0,
-  },
-  h3: {
-    color: '#ffffff',
-    fontSize: 20,
-    lineHeight: 26,
-    fontWeight: '600',
-    marginTop: 6,
-    marginBottom: 4,
-  },
-  h4: {
-    color: '#ffffff',
-    fontSize: 18,
-    lineHeight: 24,
-    fontWeight: '600',
-    marginTop: 6,
-    marginBottom: 4,
-  },
-  h5: {
-    color: '#ffffff',
-    fontSize: 16,
-    lineHeight: 22,
-    fontWeight: '600',
-    marginTop: 4,
-    marginBottom: 2,
-  },
-  h6: {
-    color: 'rgba(255,255,255,0.7)',
-    fontSize: 15,
-    lineHeight: 20,
-    fontWeight: '600',
-    marginTop: 4,
-    marginBottom: 2,
-  },
-  codespan: {
-    color: '#fca5a5',
-    fontFamily: MONO,
-    fontStyle: 'normal',
-    backgroundColor: 'rgba(255,255,255,0.1)',
-  },
-  code: {
-    backgroundColor: SURFACE,
-    borderColor: OUTLINE,
-    borderWidth: 1,
-    borderRadius: 8,
-    padding: 12,
-    marginVertical: 6,
-  },
-  blockquote: {
-    borderLeftWidth: 3,
-    borderLeftColor: OUTLINE,
-    paddingLeft: 12,
-    marginVertical: 6,
-    opacity: 0.85,
-  },
-  // hr is left to the library default, which already draws a 1px rule in the
-  // themed border color (OUTLINE).
-  table: { borderWidth: 1, borderColor: OUTLINE, marginVertical: 6 },
-  tableRow: { borderColor: OUTLINE },
-  tableCell: { borderColor: OUTLINE, padding: 8 },
-};
-
-// react-native-marked feeds fenced code blocks the `em` (italic, proportional)
-// text style, so out of the box code renders italic in the body font. Override
-// `code` to apply a monospace, non-italic style instead — matching desktop's
-// code blocks. Instantiated once at module scope to keep the reference stable
-// for `useMarkdown`'s memoization.
-const CODE_TEXT_STYLE = {
-  color: TEXT_COLOR,
-  fontFamily: MONO,
-  fontSize: 15,
-  lineHeight: 22,
-};
-
-class MarkdownRenderer extends Renderer {
-  code(text: string, language?: string, containerStyle?: ViewStyle): ReactNode {
-    return super.code(text, language, containerStyle, CODE_TEXT_STYLE);
-  }
-}
-
-const MARKDOWN_RENDERER = new MarkdownRenderer();
-
 export function TextParticleView({
   particle,
   paused,
@@ -208,11 +58,6 @@ export function TextParticleView({
   const durationS = computeReadDuration(content);
   const elapsedRef = useRef(0);
   const safe = useStreamSafeArea();
-  const markdownNodes = useMarkdown(withTaskCheckboxes(content), {
-    renderer: MARKDOWN_RENDERER,
-    theme: MARKDOWN_THEME,
-    styles: MARKDOWN_STYLES,
-  });
 
   const editedLabel = editedAt ? (
     <View className="mt-3 items-center">
@@ -290,7 +135,7 @@ export function TextParticleView({
         showsVerticalScrollIndicator
         indicatorStyle="white"
       >
-        {markdownNodes}
+        <MarkdownBody content={content} />
         {editedLabel}
       </ScrollView>
     </View>