fix(panes): keep text selectable outside seam drags; render JSON monospace

[obvious-autobuild-staging]

Why

David, using the live app, reported he could not select any text in the converter — not the JSON, the CSV table, or the raw text view — and that the JSON output was not fixed-width. Both trace to the converter shell: SplitPane carried select-none unconditionally (meant to guard seam drags, but applied as a standing rule), and the CodeMirror renderer inherited the sans body font because nothing applied the monospace token to it.

What

• Selection (root cause): select-none on the SplitPane container is now conditional on the existing dragging state — it applies only while a seam drag is live and is removed on pointerup/pointercancel. Idle text is fully selectable with the mouse in the CSV table, JSON editor, read-only output, and raw-text view; keyboard selection (shift+arrows, ctrl/cmd+A) is unaffected.
• Monospace: added a first-class --font-mono token in the Tailwind theme (app/src/index.css, @theme inline) and applied font-mono to the shared JsonCodeMirror host — the single renderer behind both the editable JSON pane and the read-only output view. The CodeMirror content already inherits, so both panes now render ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace in both themes. CSV numerics already used font-mono, which now resolves to the same token.

Rejected alternative: suppressing selection at the document level during drag — the container-scoped class is tighter and self-cleaning.

How to Review

• app/src/components/SplitPane.tsx — the one-line behavioral change plus comment.
• app/src/components/JsonCodeMirror.tsx + app/src/index.css — token definition and its single consumption point.
• Tests: SplitPane.test.tsx asserts the shell is selectable while idle and select-none only during a live drag; JsonCodeMirror.test.tsx asserts both editor and output hosts carry the font-mono token.
• Intentionally excluded: no changes to conversion logic or pane chrome.

Test Evidence

97/97 vitest, eslint and tsc clean. Verified in the built app (vite preview + Playwright, light and dark): computed user-select is auto on table cells, JSON editor, and read-only output while idle; none on the shell only during a live seam drag and restored after pointerup; computed font-family on editor and output content is the monospace token stack in both themes; a real mouse drag-select captured 32 chars of JSON output text. dist rebuilt and committed per the freshness gate.

🔗 Obvious Project · 🧵 Obvious Thread

[obvious-autobuild-staging]

Obvious Code Review — Pass 1

Verdict: COMMENT

No findings — clean pass.

Reviewed the full canonical patch at head f772886:

• Drag-scoped select-none in SplitPane: listeners attach/detach symmetrically with dragging, pointercancel handled, pointer capture keeps pointerup on the seam; keyboard resize correctly never suppresses selection.
• --font-mono token propagates into CodeMirror via the theme's fontFamily: inherit (verified in the rebuilt bundle); font stack covers macOS/Windows/Linux.
• Dist freshness satisfied: new asset hashes referenced consistently, old assets deleted, prerendered shell updated.
• Gates re-run locally on the PR head: tsc --noEmit clean, vitest 97/97 passing.

---

View full review in Obvious

[obvious-autobuild-staging]

Replying to this comment

Replying to this comment

Thanks for the clean pass — glad the drag-scoped select-none, token propagation, and dist freshness all check out at head f772886.