feat(toolbar): flat single-surface styling, scoped preflight reset, and parity fixes

[jacobjove]

Aligns the editor toolbar's visual styling with the flat, single-surface look of the Word/Google-Docs bar (borderless icon buttons, blue-tint active state, consistent dividers, compact height), and folds in the fixes surfaced along the way.

Bug fix — scoped button preflight (.ep-root). The library ships @tailwind utilities only, no preflight, by design (so it never resets a host app's styles). But nothing reproduced the button-relevant subset for the editor's own controls, so in a host without its own reset: toolbar buttons inherited user-agent chrome, width-only border utilities rendered nothing (border-style defaults to none), buttons had no pointer cursor, and content-box inputs resized on focus. Now reproduced, scoped to .ep-root.

Vue parity regressions restored. documentStyles → useParagraphStyleOptions (real document styles in the style picker, not just static presets); the editable font-size <input> (arbitrary sizes by direct entry, replacing a display-only button); aria-expanded / aria-haspopup on the dropdown triggers.

Dark mode + i18n. Toolbar and agent-chip colors moved off bare hex onto the existing --doc-* chrome tokens so they re-theme under .ep-root.dark; the AgentActivityIndicator labels go through useTranslation.

Additive — AgentActivityIndicator. A small, opt-in component for AI-collaborator presence in the title-bar slot. Minor bump; nothing renders it unless a host opts in.

React and Vue both updated; changeset included.

[vercel]

Someone is attempting to deploy a commit to the EigenPal Team on Vercel.

A member of the Team first needs to authorize it.

[eigenpal-release-pal]

All contributors have signed the CLA ✍️ ✅

_{Posted by the CLA bot.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docx-editor	Ready	Preview, Comment	Jun 23, 2026 4:53pm

[greptile-apps]

Greptile Summary

This PR delivers a flat toolbar redesign (white surface, leading-divider ToolbarGroup pattern, blue-tint active state, segmented font-size control) across React and Vue, adds an AgentActivityIndicator presence chip and an activity dot on AgentPanelToggle, and fixes a latent host-app rendering bug by adding a scoped preflight subset to editor.css.

• Flat toolbar (React + Vue): pill layout replaced with a borderless white surface; ToolbarGroup now owns a leading 1px divider; font-family and font-size split into separate groups; icon baseline nudges added for underline/super/subscript.
• Agent presence: AgentActivityIndicator component (React + Vue) renders a pulsing indigo chip in renderTitleBarRight; AgentPanelToggle gains an activity dot; DocxEditorToolbar threads agentPanel.activity through. Previously flagged issues (unforwarded activity prop, unused ZoomControl props, Vue editable font-size regression, documentStyles in Vue style picker, ARIA dropdown attributes) are all addressed at the current HEAD.
• Scoped preflight fix: .ep-root * border reset and .ep-root button chrome/cursor reset added to editor.css; documented in CLAUDE.md pitfalls.

Confidence Score: 4/5

Safe to merge once the AgentActivityIndicator label strings are run through the i18n system.

Both the React and Vue AgentActivityIndicator components render user-visible text ("is editing…" / "connected") as hardcoded English strings rather than using useTranslation. CLAUDE.md explicitly forbids this, and en.json has no keys for these phrases. Every other UI string added in this PR correctly uses t(), so the fix is straightforward — add two keys to en.json and wire useTranslation in both components. All previously flagged regressions (unforwarded activity prop, unused ZoomControl props, Vue font-size input, documentStyles, ARIA attributes) are resolved at HEAD.

packages/react/src/components/DocxEditor/AgentActivityIndicator.tsx and packages/vue/src/components/DocxEditor/AgentActivityIndicator.vue — both need i18n wiring for the chip labels.

Important Files Changed

Filename	Overview
packages/react/src/components/DocxEditor/AgentActivityIndicator.tsx	New component for AI-collaborator presence chip; hardcodes user-facing English labels instead of using t() — violates CLAUDE.md i18n rule
packages/vue/src/components/DocxEditor/AgentActivityIndicator.vue	Vue port of the React presence chip; same hardcoded English label strings as the React version, missing useTranslation
packages/core/src/styles/editor.css	Adds scoped preflight subset, toolbar divider CSS, and agent-presence pulse animation; new --doc-agent-bg token has no dark-mode override (will be bright in dark mode)
packages/react/src/components/DocxEditor/DocxEditorToolbar.tsx	Switches trailing cluster from bare ToolbarSeparators to ToolbarGroups and forwards agentPanel.activity to AgentPanelToggle — previously flagged issues addressed
packages/react/src/components/Toolbar.tsx	Flat redesign: pill→borderless layout, ToolbarGroup leading-divider pattern, font-family and font-size split into separate groups, icon baseline nudges for underline/super/subscript
packages/vue/src/components/Toolbar.vue	Mirrors React flat redesign; restores editable font-size input via useToolbarFontSize, documentStyles forwarded to useParagraphStyleOptions, ARIA attributes preserved on all dropdown triggers
packages/react/src/components/ui/ZoomControl.tsx	Simplified to a pure Radix Select dropdown — removes unused minZoom/maxZoom/showButtons/persistZoom/storageKey props and stepper buttons as flagged in prior review
packages/core/tailwind-preset.cjs	Adds doc-separator, doc-agent, doc-agent-bg Tailwind colour utilities mapped to the new CSS tokens
packages/react/src/components/DocxEditor/AgentPanelToggle.tsx	Adds activity prop with awareness dot (steady or pulsing) — previously flagged forwarding gap resolved in DocxEditorToolbar
packages/vue/src/composables/useToolbarFontSize.ts	Font-size editing composable refactored to add snap-back for invalid input and applied-flag to avoid double-commit; well-tested

Sequence Diagram

%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
    participant Host as Host App
    participant DocxEditorToolbar as DocxEditorToolbar
    participant AgentPanelToggle as AgentPanelToggle
    participant TitleBar as TitleBar (renderTitleBarRight)
    participant AgentActivityIndicator as AgentActivityIndicator

    Host->>DocxEditorToolbar: "agentPanel={activity:'editing', ...}"
    DocxEditorToolbar->>AgentPanelToggle: "activity='editing'"
    Note over AgentPanelToggle: pulsing dot on toggle button

    Host->>TitleBar: renderTitleBarRight()
    TitleBar->>AgentActivityIndicator: "activity='editing', agentName='Claude'"
    Note over AgentActivityIndicator: chip: "Claude is editing" + pulse dot

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
    participant Host as Host App
    participant DocxEditorToolbar as DocxEditorToolbar
    participant AgentPanelToggle as AgentPanelToggle
    participant TitleBar as TitleBar (renderTitleBarRight)
    participant AgentActivityIndicator as AgentActivityIndicator

    Host->>DocxEditorToolbar: "agentPanel={activity:'editing', ...}"
    DocxEditorToolbar->>AgentPanelToggle: "activity='editing'"
    Note over AgentPanelToggle: pulsing dot on toggle button

    Host->>TitleBar: renderTitleBarRight()
    TitleBar->>AgentActivityIndicator: "activity='editing', agentName='Claude'"
    Note over AgentActivityIndicator: chip: "Claude is editing" + pulse dot

Loading

_{Reviews (2): Last reviewed commit: "Merge remote-tracking branch 'origin/mai..." | Re-trigger Greptile}

[jacobjove]

Merged main to resolve the conflicts in Toolbar.tsx / Toolbar.vue — the flat redesign collided with the new documentFonts font-group that landed on main. Resolution keeps the redesign's split font-family / font-size groups and threads documentFonts through the picker (React + Vue). documentFonts was already declared and destructured on both sides, so only the JSX/template structure needed reconciling.

For re-review: the earlier review (against 95eabe11) flagged the Vue parity regressions (document-style picker, editable font-size input, dropdown ARIA), the unforwarded agent-presence activity prop, and the unused ZoomControl props. All of those were already addressed in commits after the reviewed SHA — the current HEAD carries the fixes.

@greptile review

[jacobjove]

Superseded — this PR has been split into three cohesive, independently reviewable PRs and is being closed:

• feat: AgentActivityIndicator component for AI-collaborator presence #1022 — agent activity indicator component
• fix(core): scoped .ep-root preflight reset for hosts without their own #1024 — scoped .ep-root preflight reset
• feat(toolbar): flatten toolbar styling + restore Vue parity #1026 — flat toolbar redesign + Vue parity restore

Together these cover the full diff that was here. Please review the three above instead.