{title}

{metaParts.join(' · ')}

{turns.map((turn) => turn.role === 'user' ? (

) : (

), )}

{/* Brand accent tick keeps the footer recognizable without splitting the localized attribution string into styled fragments. */} {copy.generatedBy} {stamp !== undefined ? ` · ${stamp}` : ''}

) } /** Render one row's blocks in order (text flows, images become badges). */ function ShareBlocks({ blocks, role, theme, copy }: { blocks: readonly ShareBlock[]; role: 'user' | 'assistant'; theme: ShareTheme; copy: ShareCardCopy }): ReactNode { return ( <> {blocks.map((block, index) => block.kind === 'text' ? ( role === 'assistant' // Assistant prose is Markdown (ticket 09); user messages stay // plain text — the Chat view renders them the same way. ? : ) : , )} ) } /** User-message typesetting: the plain-text fold of ticket 03, unchanged. */ function ShareText({ text, theme }: { text: string; theme: ShareTheme }): ReactNode { const segments = segmentShareText(text) if (segments.length === 0) return null return (

{segments.map((segment, index) => ( ))}

) } function ShareSegment({ segment, theme }: { segment: ShareTextSegment; theme: ShareTheme }): ReactNode { switch (segment.kind) { case 'code': case 'table': // Monospace + `pre` (NOT pre-wrap): the line's natural width wins, the // block may visually overflow the card edge, and ticket 04 measures // that width to widen the slice — wrapping here would destroy the only // signal the width probe has. return (

{segment.lines.join('\n')}

) case 'list': return (

{segment.items.map((item, index) => (

{item.marker} {item.text}

))}

) case 'para': default: return (

{segment.text}

) } } /* ---- markdown rendering (ticket 09, PLAN §5.1 v1.2) ------------------------- * Assistant text renders through the pure parser in markdown.ts. Same red * lines as the rest of the card: inline styles only (an SVG-as-image render * loads no stylesheets), and NEVER hide horizontal content — code lines and * table cells keep their natural width so the rasterizer's width probe can * lift the slice (inline emphasis wraps instead, which changes nothing). */ /** Assistant text block → parsed blocks → self-styled Markdown rendering. */ function ShareMarkdown({ text, theme, copy }: { text: string; theme: ShareTheme; copy: ShareCardCopy }): ReactNode { const blocks = parseMarkdown(text) if (blocks.length === 0) return null return (

{blocks.map((block, index) => ( ))}

) } /** Heading ladder over the card's 15px body; h6 demotes to the secondary tone. */ function mdHeadingStyle(level: number, theme: ShareTheme): CSSProperties { switch (level) { case 1: return { fontSize: '20px', fontWeight: 700, lineHeight: 1.4 } case 2: return { fontSize: '18px', fontWeight: 700, lineHeight: 1.4 } case 3: return { fontSize: '16.5px', fontWeight: 600, lineHeight: 1.45 } case 4: return { fontSize: '15.5px', fontWeight: 600, lineHeight: 1.5 } case 5: return { fontSize: '15px', fontWeight: 600, lineHeight: 1.5 } default: return { fontSize: '15px', fontWeight: 600, lineHeight: 1.5, color: theme.textSecondary } } } /** One markdown block. Every branch keeps `overflow: 'visible'` (file header). */ function MdBlockView({ block, theme, copy }: { block: MdBlock; theme: ShareTheme; copy: ShareCardCopy }): ReactNode { switch (block.kind) { case 'heading': return (

) case 'para': return (

) case 'code': return (

{block.lang !== undefined ? (

{block.lang}

) : null} {/* Natural width by design: the rasterizer measures this box to lift the slice — wrapping here would destroy its only width signal. */}

{block.lines.join('\n')}

) case 'quote': return (

{block.children.map((child, index) => ( ))}

) case 'list': return case 'table': return case 'hr': return

case 'image': // Markdown image: same placeholder row an image block renders (the // picture lives on the far end of a URL the share image cannot fetch). return } } /** List rows; one nesting indent under the parent item's content column. */ function MdListView({ items, depth, theme }: { items: readonly MdListItem[]; depth: number; theme: ShareTheme }): ReactNode { return (

0 ? { marginLeft: '18px' } : null) }}> {items.map((item, index) => { const ordered = item.number !== undefined return (

{ordered ? `${item.number}.` : '•'}

{item.children.length > 0 ? : null}

) })}

) } /** Column alignment → CSS text-align ('start' keeps the card's direction). */ function mdAlignText(align: MdAlign): 'start' | 'center' | 'right' { if (align === 'center') return 'center' if (align === 'right') return 'right' return 'start' } /** GFM table as a natural-width grid: nowrap cells, hairline borders. */ function MdTableView({ block, theme }: { block: Extract; theme: ShareTheme }): ReactNode { const cellBase: CSSProperties = { padding: '6px 10px', border: `1px solid ${theme.border}` } return ( {block.header.map((cell, index) => ( ))} {block.rows.map((row, rowIndex) => ( {row.map((cell, colIndex) => ( ))} ))}

) } /** Render an inline span sequence (raw strings for plain text). */ function MdSpans({ spans, theme }: { spans: readonly MdSpan[]; theme: ShareTheme }): ReactNode { if (spans.length === 0) return null return ( <> {spans.map((span, index) => ( ))} ) } /** * One inline span. Plain s with explicit styles, never semantic tags: * the SVG-image render applies its own UA cascade, and only explicit values * lay out identically to the measured page render. */ function MdSpanView({ span, theme }: { span: MdSpan; theme: ShareTheme }): ReactNode { switch (span.kind) { case 'text': return span.text case 'bold': return case 'italic': return case 'strike': return case 'code': return ( {span.text} ) case 'link': // Colored text only: the share image is not clickable, and the URL is // deliberately NOT repeated next to the label. return } } /** Image attachments stay placeholders in v1 (files live on the host disk). */ function ImageBadge({ theme, label }: { theme: ShareTheme; label: string }): ReactNode { return (

{/* Inline SVG glyph (presentational attributes, no stylesheet) — the share image cannot load icon fonts or external images. */} {label}

) }