feat(toolbar): flat toolbar redesign + agent presence indicator

[jacobjove]

Refreshes the editor toolbar to a flat, single-surface design (borderless icon buttons, blue-tint active state, segmented font-size control, consistent dividers) and adds an AgentActivityIndicator component for showing AI-collaborator presence in the title-bar slot.

Separately fixes a latent rendering bug: the library ships without Tailwind's 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. In host apps without their 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.

React and Vue both updated; changeset included (minor — additive AgentActivityIndicator).

---

^{Need help on this PR? Tag /codesmith with what you need. Autofix is disabled.}

[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 18, 2026 1:47pm

[greptile-apps]

Greptile Summary

This PR delivers a flat toolbar redesign (white surface, top hairline divider, blue-tint active state, segmented font-size control) across React and Vue, fixes latent preflight-related rendering bugs in host apps without a CSS reset, and adds AgentActivityIndicator for showing AI-collaborator presence in the title-bar slot.

• Toolbar redesign: ToolbarGroup gains a self-managed leading divider, ToolbarButton active state migrates from a dark slab to a blue-tint doc token, and the font family/size pickers are split into separate groups; editor.css picks up a scoped preflight subset (border-style reset, button chrome reset) and the ep-agent-pulse animation.
• AgentActivityIndicator: New React + Vue components expose activity (absent | connected | editing) for driving an awareness chip from Yjs or any presence layer; exported from both package entry points with a minor-bump changeset.
• Vue Toolbar regressions: The documentStyles prop is dropped (doc-specific styles no longer appear in the Vue style picker), the font-size <input> is replaced with a display-only <button> (no custom size entry in Vue), and aria-expanded/aria-haspopup are stripped from dropdown triggers; ZoomControl grows five props that its implementation never reads.

Confidence Score: 3/5

Not safe to merge without addressing the Vue Toolbar regressions and the unconnected agent presence dot.

The toolbar redesign and AgentActivityIndicator additions are solid, but the Vue adapter ships with three user-visible regressions: document-specific styles vanish from the style picker, font size can no longer be typed directly, and dropdown triggers lose their accessibility semantics. The new AgentPanelToggle presence dot is also impossible to activate through DocxEditorToolbar because the activity prop is never threaded through, and ZoomControl exposes five props that are silently ignored.

packages/vue/src/components/Toolbar.vue (three regressions), packages/react/src/components/DocxEditor/DocxEditorToolbar.tsx (activity not forwarded), packages/react/src/components/ui/ZoomControl.tsx (dead props)

Important Files Changed

Filename	Overview
packages/vue/src/components/Toolbar.vue	Large flat-toolbar redesign; has three regressions: documentStyles prop removed (doc-specific styles vanish from the style picker), font-size input replaced with button (no custom size entry), and aria-expanded/aria-haspopup removed from dropdown triggers.
packages/react/src/components/ui/ZoomControl.tsx	Stripped to a pure Radix Select dropdown; five newly added props (minZoom, maxZoom, showButtons, persistZoom, storageKey) are declared in the interface but never consumed, silently swallowing values the caller already passes.
packages/react/src/components/DocxEditor/DocxEditorToolbar.tsx	Migrates trailing toolbar controls from bare ToolbarSeparators to ToolbarGroups; the new AgentPanelToggle activity prop is never forwarded, leaving the agent-presence dot on the toggle unreachable from DocxEditorToolbar.
packages/react/src/components/DocxEditor/AgentPanelToggle.tsx	Adds activity prop with awareness dot (steady or pulsing); the prop itself is correct but is never forwarded by DocxEditorToolbar, so it is unreachable from the public surface.
packages/react/src/components/DocxEditor/AgentActivityIndicator.tsx	New component — presence chip with avatar, status label, and pulse dot; uses inline styles and CSS tokens throughout, well-scoped and accessible.
packages/vue/src/components/DocxEditor/AgentActivityIndicator.vue	Vue port of the React AgentActivityIndicator; uses getCurrentInstance() to detect click-listener wiring (fragile but documented); otherwise a clean port with scoped styles.
packages/react/src/components/Toolbar.tsx	Flat toolbar redesign — pill removed, ToolbarGroup gains leading divider, ToolbarButton active state migrated to blue-tint doc tokens, font family and size split into separate groups; changes are coherent and consistent.
packages/core/src/styles/editor.css	Adds scoped preflight subset (border-style reset, button chrome reset), toolbar-group first-child divider rule, agent CSS tokens, and ep-agent-pulse keyframe with reduced-motion guard — all well-scoped under .ep-root.
packages/react/src/components/ui/Select.tsx	Adds bordered prop to SelectTrigger and migrates shadcn tokens to doc tokens; SelectLabel hardcodes text-slate-500 instead of the doc-text-subtle token used elsewhere.
packages/react/src/components/ui/FontSizePicker.tsx	Segmented control redesign — outer border on container, borderless inner buttons, box-sizing fixed, inline styles get CSS variable fallbacks; preserves both editable input and display-only button states.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    subgraph React
        DET[DocxEditorToolbar] -->|active, badge, onClick| APT[AgentPanelToggle]
        APT -. activity prop exists but NOT forwarded .-> dot[presence dot - unreachable]
        DET --> TB[Toolbar]
        TB --> TG[ToolbarGroup with leading divider]
        TG --> FSP[FontSizePicker - editable input kept]
        TG --> ZC[ZoomControl - Select only]
        ZC -. minZoom maxZoom showButtons silently ignored .-> ZC
    end
    subgraph Vue
        VTB[Toolbar.vue] --> VFG[font-size - button only no typing]
        VTB --> VSP[style picker - static presets only]
        VTB --> VAAT[AgentActivityIndicator.vue]
    end
    subgraph Shared
        CSS[editor.css - scoped preflight + ep-agent-pulse]
        TW[tailwind-preset.cjs - doc-separator + doc-agent tokens]
        AAI[AgentActivityIndicator.tsx - activity prop drives chip]
    end
    CSS --> React
    CSS --> Vue
    TW --> React

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"}}}%%
flowchart TD
    subgraph React
        DET[DocxEditorToolbar] -->|active, badge, onClick| APT[AgentPanelToggle]
        APT -. activity prop exists but NOT forwarded .-> dot[presence dot - unreachable]
        DET --> TB[Toolbar]
        TB --> TG[ToolbarGroup with leading divider]
        TG --> FSP[FontSizePicker - editable input kept]
        TG --> ZC[ZoomControl - Select only]
        ZC -. minZoom maxZoom showButtons silently ignored .-> ZC
    end
    subgraph Vue
        VTB[Toolbar.vue] --> VFG[font-size - button only no typing]
        VTB --> VSP[style picker - static presets only]
        VTB --> VAAT[AgentActivityIndicator.vue]
    end
    subgraph Shared
        CSS[editor.css - scoped preflight + ep-agent-pulse]
        TW[tailwind-preset.cjs - doc-separator + doc-agent tokens]
        AAI[AgentActivityIndicator.tsx - activity prop drives chip]
    end
    CSS --> React
    CSS --> Vue
    TW --> React

Loading

_{Reviews (1): Last reviewed commit: "Merge branch 'main' into feat/toolbar-re..." | Re-trigger Greptile}