feat(viewer): opt-in wide layout for wide monitors

[banozz0]

Refs #223. This covers the "display the text over a wider area" part. It doesn't include the collapsible sidebar or the text-density config.

Problem

The feed column is capped at max-width: 860px (#stream and .standalone-main). On a ~1930px window about 60% of the screen stays empty, and diff and code cards scroll sideways to show lines that would fit.

What this adds

• Per-workspace width setting. GET/PUT /api/width takes {"id":"normal"|"wide"}. It's stored with Store.setSetting("width") like the theme, so there's no schema change and it works on SqlStore, JsonFileStore and the Durable Object. A width-changed SSE event makes other open tabs follow live. Like /api/theme, the GET is readable in public-read mode and the PUT still needs auth.
• Toggle. A ↔ pill sits beside Stream/Timeline and is hidden on phones. It puts a wide class on the engine root, and #stream / .standalone-main grow to 1600px. Only max-width changes, so the phone @media rules are untouched.
• Markdown keeps a readable measure. MD_CSS caps prose elements (p, headings, lists, dl, blockquote) at 780px, just above their width in the normal column. Fenced code blocks and tables aren't capped, so they use the full width in wide mode. The CSS is static, so there's no render-cache key change and nothing reloads on toggle.
• Long lines soft-wrap in wide mode. Even a 1600px column can't fit a 4000px line, so in wide mode the viewer requests ?wrap=1 for the server-rendered text kinds. The wrappable kinds are markdown, code, terminal and diff, marked by softWrap in SURFACE_KIND_METADATA. Markdown fences, code and terminal output use pre-wrap, and wrapped code lines hang under the code rather than the line number. Diffs use @pierre/diffs' native overflow: "wrap". The flag is part of the render cache key and ignored for other kinds. With wrap off, output is byte-identical: a unit test deep-compares it, and an e2e test checks that all four kinds scroll in normal mode and don't in wide mode. surfaceSrc now builds every frame URL, including the version picker's.

Normal stays the default, and the self-hosted normal layout is unchanged.

Side effects worth knowing

• A markdown surface opened fullscreen, or loaded top-level at /s/:id, now caps prose at 780px in normal mode too. It used to span the whole dialog or page.
• A fenced block nested inside a list item or blockquote stays within its capped parent at 780px.
• On first load in wide mode, the column can briefly render at 860px before the width setting arrives, because it's fetched in parallel with posts.
• Toggling width reloads the text frames. If an older version is picked in the version dropdown, those frames reload at the latest version while html and mermaid frames stay on the older one.
• Embed hosts get the toggle and the .wide class through the engine as-is. There's no embed-specific e2e.

Verification

• npm test: 502/502 node, 8/8 viewer
• npm run test:worker: 1/1
• npm run test:e2e: 190 passed (chromium + webkit), including the new e2e/width.spec.ts. That spec checks that the toggle widens the column and persists across a reload, that another tab follows live, that the phone layout is unchanged, that a long-line diff has no horizontal overflow in wide mode, that markdown prose is the same width as its code block in normal mode, and that in wide mode prose stays ≤780px while the code block goes past 1200px.
• typecheck, lint, format:check: pass
• bench:check --gate deterministic: no regressions
• Checked by eye at 1930px in Chromium and WebKit, light and dark: markdown, unified and split diffs, code, terminal, flowchart and sequence mermaid, json, html, image, timeline, standalone, and Home (which keeps its own 880px column).

Changeset: minor.

🤖 Generated with Claude Code

https://claude.ai/code/session_01VZX7jtqqerDjNe5Q813hbK