Add a compact text style selector to Content

[3mdistal]

Problem

The Content selection toolbar exposed four permanent H1–H4 buttons but no way to return selected text to regular body text. The four controls also consumed a disproportionate amount of the compact toolbar.

Approach

• Replace the four heading buttons with one labeled selector that reflects the current block style.
• Offer Text and exact H1–H4 choices in a compact accessible menu, with the active choice checked.
• Preserve the selected editor range while the menu has focus so pointer and keyboard choices apply immediately and current-style choices remain idempotent.
• Preserve compatibility with existing H5/H6 blocks: the trigger identifies their actual style and Text converts them back to body text, while H5/H6 remain intentionally absent from the new menu.
• Convert every selected paragraph or heading block when Text is chosen, including mixed multi-block selections.
• Restore focus normally when the menu is dismissed with Escape, while keeping editor focus after a style is applied.
• Keep the rest of the formatting toolbar unchanged. Highlight colors are intentionally outside this PR.

Matched visual evidence

Before

Route: http://127.0.0.1:3317/page/j4a5KAEDBHXY
Viewport: 1496 x 846, desktop Chrome
Fixture: disposable local account toolbar-demo@example.com; page Toolbar comparison; paragraph Select this sentence to compare the formatting toolbar.
State: Personal expanded, agent panel closed, full paragraph selected, formatting bubble open, no submenu.

After

Route: http://127.0.0.1:3317/page/vDisteHisXMq
Viewport: 1496 x 846, desktop Chrome
Fixture: same account, page title, paragraph, sidebar state, and agent-panel state. The route differs because the isolated worktree uses its own disposable local fixture database.
State: full paragraph selected, formatting bubble open, Text selector expanded, Text checked, H1–H4 visible.

The matched captures and their reproduction notes are retained in templates/content/docs/solutions/evidence/content-text-selector/.

Verification

Current head: 674ac20bfa72de62e273f80ca5eac97871128bd6, with main at 01881316a10e3626937d3268c594c986c78e9d85 integrated after the repair.

• pnpm --filter content exec vitest --run app/components/editor/BubbleToolbar.test.tsx — 11 tests passed, including mixed paragraph/heading conversion, explicit Escape return-to-editor focus, applied-style editor-focus preservation, H5/H6 compatibility, and pointer/keyboard activation.
• pnpm --filter content typecheck — passed after refreshing the frozen workspace dependencies.
• pnpm --filter content build — passed; existing doctor findings about local production credentials and pre-existing environment reads remain non-blocking.
• pnpm test:content-product-impact — 30 tests passed.
• pnpm guards — all 51 checks passed.
• The current app booted successfully with Node 24, loaded a disposable mixed paragraph/H2 document in the collaborative editor, and the fixture was permanently deleted with an empty Trash read-back.
• Exact-head native drag replay remains unclaimed: Computer Use failed to initialize (Sky Computer Use native pipe startup failed), and the collaborative preview did not reliably preserve its scripted selection after reload. The focused test now models Escape and close-autofocus separately and asserts both editor.isFocused and the ProseMirror DOM as document.activeElement; earlier independent browser QA covered pointer conversion, keyboard open/dismiss/selection, idempotent Text, accessibility semantics, clean console, and fixture restoration.

Safety and review focus

• No data model, API, migration, permission, feature-flag, or deployment changes.
• Rollback is limited to the toolbar component, its focused tests, the changelog entry, and visual evidence.
• Please focus review on mixed-block Text conversion, Escape versus applied-style focus handling, selection preservation, H5/H6 compatibility, and the compact toolbar layout.

Visual-review handoff

Steve's current guidance is to share screenshots of prominent UX changes asynchronously in #dev-agent-native; it explicitly does not need to block shipping. Guidance thread: https://builder-internal.slack.com/archives/C0AKU9QD539/p1784744132830489?thread_ts=1784744132.830489&cid=C0AKU9QD539

Original selector/highlight feedback: https://builder-internal.slack.com/archives/C0ATH3CCZT4/p1785450194911999

This PR prepares the evidence for that later review. It does not claim Slack visual approval, and it does not include the separate Notion-style highlight-color work or the later H5/H6-disable idea.

content_product_impact:
  lane: local_refinement
  features:
    - content.feature.durable-foundations
  capabilities:
    - content.author.document-editor
  record_change: none
  proof:
    - pnpm --filter content exec vitest --run app/components/editor/BubbleToolbar.test.tsx
  rationale: The change refines the existing editor toolbar without changing the document-editor contract.

[github-actions]

Here's a visual recap of what changed:

Open the full interactive recap

[builder-io-integration]

Builder reviewed your changes — looks good ✅

Review Details

Incremental Code Review Summary

The latest commit addresses the remaining Escape-focus concern by handling onEscapeKeyDown, preventing Popover trigger autofocus for that dismissal path, and explicitly restoring editor focus. The prior mixed-selection repair remains intact through unconditional setParagraph(), while H5/H6 detection, selection replay, exact heading application, and pointer/keyboard activation are unchanged and covered by the expanded focused suite. Two independent code-review passes found no confirmed defects; one import-resolution report was verified as a false positive because the Content-local Popover wrapper exists. This remains a low-risk UI-only change.

Verification

• Focused BubbleToolbar tests: 11 passed according to the review agents.
• Content typecheck/build and guards are reported passing in the PR verification notes.
• No confirmed code-review findings remain.

🧪 Browser testing: Skipped — the dev server was healthy, but all browser executor retries lacked Chrome interaction tools, so the planned UI cases could not be executed.