[aneeshsathe]

Reviewing agent: show the user a clickable demo before merging. This is a
Studio UI PR, so the standing requirement applies. On this branch run
node --import tsx scripts/e2e-server.ts (after BLYG_EXTENSIONS=all npm run build),
then open http://127.0.0.1:8787/studio/login (password test-password) at a
phone size (390×844) and at desktop (1280×900), and switch the theme
(Settings → Appearance: Paper, Cream, Slate, Nord, and auto in light and dark).
Walk them through: reading → a long card's more → back; a card's action row;
compose; the full editor. Don't merge until they have clicked through it.

Studio PWA: zoom, compact cards, full-screen reading, composer and editor

Four problems Aneesh reported with the Studio on the phone, in four commits.

1. The page zoomed in at random (iOS Safari, installed PWA)

Root causes, found by auditing every field's computed style rather than guessing:

• The full editor's draft textarea was 0.9rem (14.4px). iOS zooms any focused
  field under 16px and does not zoom back, so every tap into the editor zoomed the page.
• The [[ picker's filter and footer <select>s (0.85rem, 0.78rem) and the custom
  theme's hex fields (0.85rem) did the same.
• No touch-action anywhere: a quick second tap on a button was read as a double-tap zoom.
• Imported HTML's fixed-width tables, iframes and embeds had no max-width rule (only
  img and pre did).

Fixes: those fields at 1rem; a pointer: coarse guard keeping every field at ≥ 16px
whatever a screen or extension rule says; body { touch-action: manipulation } (pinch
zoom untouched, and the viewport meta still allows user zoom, no maximum-scale); wide
media, tables and embeds shrink or scroll inside the card, the preview and the version
viewer.

2. A compact, Substack-scale card action row

• 👍/👎 emoji → 18px monochrome line-icon thumbs (inline SVG, currentColor, muted).
  The pressed one turns accent-coloured and fills.
• edit, stub ↗ and + add to hopper… are borderless, muted text. The wording is
  unchanged. ⋯ is a small icon.
• Every control is still a ≥ 40px tap target (.act: min 40×40, with a hover wash drawn
  at 32px), while the row reads at about 20px.
• The byline and badge, the citation line and "more" are a notch smaller.
• The tokens are the reading theme's (--ink-soft, --pencil, --rule…), so every
  theme carries it.

3. "more" opens a full-screen view

There was no detail route to reuse: the redesign's sources → timeline stopped short of
an article screen. This adds /reading/{sub}/{id} (~own for your own items, the id
hoppers already use for own posts).

• "more", or a tap on the clamped text, opens it. The title still goes to the origin,
  which existing tests and the read-state rules pin.
• It shows the whole sanitized body, the citation line, the byline, and the same
  action row (thumbs, stub ↗, + add to hopper…, ⋯ with history). It works for own
  items, imported blyg items, threads and L0 RSS.
• It marks the entry read on open, as expanding a card did.
• It is deep-linkable: the entry comes from what reading already holds, else from
  getItem / getImportedItem, so a reload stays on it. No API changes.
• back, and the browser's back gesture (also after a reload), returns to the timeline
  with the entry where it was.
• Clamp detection now also watches the content and image loads, so "more" appears when a
  post grows past the clamp after its images load.

Found on the way: markReading (an optimistic action) never calls its mutationFn
when no loaded row matches. The full view therefore writes the read directly for an
entry opened by its address. Opening a hopper member that reading has not loaded likely
has the same silent no-op today (HOPPER_READ), and this PR does not change it.

4. Composer and editor, after Substack's composer

• Toolbar. One row of small line-icon buttons (attach image, link from clipboard,
  scan text, make this a …, mark selection as generated). [[, ![[ and [TK] keep
  their glyphs as small monospace buttons. Each keeps its existing words as its
  accessible name and its existing (The Studio UI needs tooltips #48) hover text as its title, so
  getByRole('button', { name: 'attach image' }) still works. The row fits at 390px
  without an overflow menu.
• fragment | thread and draft | preview are a compact segmented control.
• save draft and publish are compact (32px) buttons, right-aligned on the
  toolbar's row when there is room and on their own row on a phone. "Full Editor →" is a
  quiet text action in the toolbar. The counter is small and muted, beside the actions.
• Textarea. Borderless in the composer, a soft card in the editor, with more
  padding. The resize grip shows only with a fine pointer.
• Syntax help (composer and editor) is folded behind a "syntax help" disclosure.
  It is closed by default, its open state is remembered in localStorage (inside
  try/catch), and its text is verbatim.
• One scale. studio.css gains spacing tokens (--s1…--s5), --ctl (32px compact
  control), --hit (40px target), --radius-sm and --muted, plus the shared .act,
  .btn-compact and .segmented.compact controls. .btn-mini moves onto --ctl, and
  the reading head's ☑ ↻ ＋ buttons drop their boxes.

The attachments section, the version/change dialog, the settings AI section, the stub
quote and the grammar files are untouched.

Wording

No labels changed. The emoji in "🔗 link from clipboard" and "⌸ scan text" became line
icons, so those buttons' accessible names are now "link from clipboard" and "scan text".
Suggestion only, not done: "+ add to hopper…" could shorten to "+ hopper" on the card.

Tests

• e2e/pwa-zoom.spec.ts (mobile): every visible field ≥ 16px on the main screens, the
  editor, the picker, a prompt sheet and the subscribe sheet; user zoom kept; a post with
  a long URL, wide <pre>, table, image and embed never scrolls the page sideways (card
  and full view).
• e2e/reading-article.spec.ts (desktop + mobile): more → URL changes and full content
  shows, reload stays on it, back and browser back return to the same entry, tap to open;
  an imported entry by its address with the action row and a read PUT; an L0 entry; the
  compact row's wording, icons and 40px targets.
• e2e/compose-layout.spec.ts (desktop + mobile): tool names and titles, the row fits,
  compact buttons, syntax help folded and remembered.

Results:

• npm run typecheck: clean.
• npm test: 1745 passed, 5 skipped.
• npm run test:ui: 97 passed.
• Full e2e suite on the real ports (desktop + mobile): 350 passed, 5 skipped (the mobile-only zoom specs skip on desktop), and 1 failure. The failure was a race in this branch's own test: <details> fires toggle asynchronously, so a reload could beat the localStorage write. The last commit makes the test wait for the stored value, and compose-layout.spec.ts then passes 20/20 (5 repeats, desktop + mobile).

One thing to check in the demo: in a full-page screenshot of the phone editor, the sticky save draft/publish bar overlaps the character counter. That's probably a full-page capture artifact, since a sticky bar is painted at the viewport's bottom, but confirm on a real phone-size viewport that the counter isn't hidden behind the bar when you scroll to the end.

🤖 Generated with Claude Code