@beyondwork/docx-react-component 1.0.28 → 1.0.30

package/src/ui-tailwind/toolbar/tw-toolbar-icon-button.tsx

@@ -26,13 +26,13 @@ export function TwToolbarIconButton(props: TwToolbarIconButtonProps) {
           onMouseDown={preserveEditorSelectionMouseDown}
           onClick={props.onClick}
           className={[
-            "inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors outline-none",
+            "inline-flex h-7 w-7 items-center justify-center rounded-lg border border-transparent transition-colors outline-none",
             "disabled:opacity-30 disabled:cursor-not-allowed",
             props.emphasis
-              ? "text-accent hover:bg-accent-soft"
+              ? "text-accent hover:border-border/60 hover:bg-surface"
               : props.active
-                ? "bg-accent-soft text-accent"
-                : "text-secondary hover:bg-surface hover:text-primary",
+                ? "border-border/70 bg-surface text-accent shadow-[0_4px_12px_-10px_var(--color-shadow-strong)]"
+                : "text-secondary hover:border-border/60 hover:bg-surface hover:text-primary",
             focusRingClass,
           ].join(" ")}
         >

package/src/ui-tailwind/toolbar/tw-toolbar.tsx

@@ -6,6 +6,7 @@ import * as Toggle from "@radix-ui/react-toggle";
 import * as ToggleGroup from "@radix-ui/react-toggle-group";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import {
+  AlertCircle,
   AlignCenter,
   AlignJustify,
   AlignLeft,
@@ -21,6 +22,7 @@ import {
   ImagePlus,
   Indent,
   Italic,
+  List,
   MessageSquare,
   Minus,
   Monitor,
@@ -32,13 +34,12 @@ import {
   Strikethrough,
   Subscript,
   Superscript,
-  ShieldAlert,
-  ShieldCheck,
   Underline,
   Undo2,
 } from "lucide-react";
 
 import type {
+  ActiveListContext,
   CompatibilityPanelSnapshot,
   EditorStoryTarget,
   EditorWarning,
@@ -48,6 +49,7 @@ import type {
   SectionBreakType,
   StyleCatalogSnapshot,
   WorkflowBlockedCommandReason,
+  WordReviewEditorChromePreset,
   WorkspaceMode,
   ZoomLevel,
 } from "../../api/public-types";
@@ -57,15 +59,17 @@ import { TwHealthPanel } from "../review/tw-health-panel";
 import { TwToolbarIconButton } from "./tw-toolbar-icon-button";
 
 export interface TwToolbarProps {
-  sourceLabel?: string;
   capabilities?: SessionCapabilities;
   compatibility?: CompatibilityPanelSnapshot;
   warnings?: EditorWarning[];
   blockedReasons?: WorkflowBlockedCommandReason[];
+  showDiagnosticsChrome?: boolean;
   interactionPolicy?: ToolbarInteractionPolicy;
+  preset?: WordReviewEditorChromePreset;
   workspaceMode: WorkspaceMode;
   zoomLevel?: ZoomLevel;
   formattingState?: FormattingStateSnapshot;
+  activeListContext?: ActiveListContext | null;
   styleCatalog?: StyleCatalogSnapshot;
   /** Display toggle for tracked change decorations (not a runtime mutation toggle). */
   showTrackedChanges: boolean;
@@ -87,6 +91,8 @@ export interface TwToolbarProps {
   onSetTextColor?: (color: string) => void;
   onSetHighlightColor?: (color: string | null) => void;
   onSetAlignment?: (alignment: FormattingAlignment) => void;
+  onToggleBulletedList?: () => void;
+  onToggleNumberedList?: () => void;
   onOutdent?: () => void;
   onIndent?: () => void;
   onAddComment: () => void;
@@ -98,6 +104,10 @@ export interface TwToolbarProps {
   onWorkspaceModeChange: (value: WorkspaceMode) => void;
   onZoomChange?: (level: ZoomLevel) => void;
   onShowTrackedChangesChange: (show: boolean) => void;
+  onRestartNumbering?: () => void;
+  onContinueNumbering?: () => void;
+  onUpdateFields?: () => void;
+  onUpdateTableOfContents?: () => void;
 }
 
 export interface ToolbarInteractionPolicy {
@@ -116,24 +126,33 @@ const focusRingClass =
 
 const FONT_FAMILIES = ["Arial", "Times New Roman", "Calibri", "Cambria", "Georgia", "Verdana"];
 const FONT_SIZES = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 36];
-const TEXT_COLORS = ["#000000", "#434343", "#1660a8", "#1a7f37", "#cf222e", "#7a4f00"];
+const TEXT_COLORS = ["#1f1f1f", "#5c5852", "#1660a8", "#50684d", "#9b4f49", "#7b5f32"];
 const HIGHLIGHT_COLORS = [
   { value: "#ffff00", label: "Yellow" },
-  { value: "#00ff00", label: "Green" },
-  { value: "#00ffff", label: "Cyan" },
-  { value: "#ff69b4", label: "Pink" },
+  { value: "#d9e7f7", label: "Blue" },
+  { value: "#f1dbd6", label: "Rose" },
+  { value: "#e6e0d4", label: "Stone" },
   { value: null, label: "None" },
 ] as const;
 
 export function TwToolbar(props: TwToolbarProps) {
   const caps = props.capabilities;
+  const preset = props.preset ?? "advanced";
   const workspaceMode = props.workspaceMode;
-  const isPageMode = workspaceMode === "page";
   const paragraphStyles = props.styleCatalog?.paragraphs ?? [];
   const zoomLevel = props.zoomLevel ?? 100;
   const canEdit = props.interactionPolicy?.canFormatText ?? (caps ? caps.canEdit : false);
   const canInsertStructural = props.interactionPolicy?.canInsertStructural ?? canEdit;
   const canAddComment = props.interactionPolicy?.canAddComment ?? (caps ? caps.canAddComment : false);
+  const showStyleSelectors = preset === "advanced";
+  const showAdvancedFormatting = preset === "advanced";
+  const showFormattingColors = preset !== "review";
+  const showInsertMenu = preset === "simple" || preset === "advanced";
+  const showTrackedChangesToggle = preset !== "simple";
+  const showDiagnosticsChrome = props.showDiagnosticsChrome ?? true;
+  const showHealth = showDiagnosticsChrome && Boolean(props.compatibility && props.warnings);
+  const showListActions = preset === "simple" || preset === "advanced";
+  const showUpdateActions = preset === "advanced";
   const zoomLabel =
     typeof zoomLevel === "number"
       ? `${zoomLevel}%`
@@ -142,9 +161,9 @@ export function TwToolbar(props: TwToolbarProps) {
         : "Fit page";
 
   return (
-    <header className="flex h-10 shrink-0 items-center gap-1 border-b border-border px-2">
+    <header className="flex h-11 shrink-0 items-center gap-1 rounded-xl border border-border/70 bg-canvas/92 px-2.5 shadow-[0_8px_20px_-18px_var(--color-shadow-strong)] backdrop-blur-sm">
       {/* Left cluster: undo/redo + formatting */}
-      <div className="flex items-center gap-0.5">
+      <div className="flex min-w-0 flex-1 items-center gap-0.5">
         <TwToolbarIconButton
           icon={Undo2}
           label="Undo"
@@ -159,25 +178,29 @@ export function TwToolbar(props: TwToolbarProps) {
         />
         <div className="mx-1 h-4 w-px bg-border" />
 
-        <ToolbarParagraphStyleSelect
-          disabled={!canEdit || paragraphStyles.length === 0 || !props.onSetParagraphStyle}
-          styles={paragraphStyles}
-          value={props.formattingState?.paragraphStyleId}
-          onValueChange={props.onSetParagraphStyle}
-        />
+        {showStyleSelectors ? (
+          <>
+            <ToolbarParagraphStyleSelect
+              disabled={!canEdit || paragraphStyles.length === 0 || !props.onSetParagraphStyle}
+              styles={paragraphStyles}
+              value={props.formattingState?.paragraphStyleId}
+              onValueChange={props.onSetParagraphStyle}
+            />
 
-        <ToolbarFontFamilySelect
-          disabled={!canEdit || !props.onSetFontFamily}
-          value={props.formattingState?.fontFamily}
-          onValueChange={props.onSetFontFamily}
-        />
-        <ToolbarFontSizeSelect
-          disabled={!canEdit || !props.onSetFontSize}
-          value={props.formattingState?.fontSize}
-          onValueChange={props.onSetFontSize}
-        />
+            <ToolbarFontFamilySelect
+              disabled={!canEdit || !props.onSetFontFamily}
+              value={props.formattingState?.fontFamily}
+              onValueChange={props.onSetFontFamily}
+            />
+            <ToolbarFontSizeSelect
+              disabled={!canEdit || !props.onSetFontSize}
+              value={props.formattingState?.fontSize}
+              onValueChange={props.onSetFontSize}
+            />
 
-        <div className="mx-1 h-4 w-px bg-border" />
+            <div className="mx-1 h-4 w-px bg-border" />
+          </>
+        ) : null}
 
         <TwToolbarIconButton
           icon={Bold}
@@ -200,41 +223,66 @@ export function TwToolbar(props: TwToolbarProps) {
           disabled={!canEdit}
           onClick={props.onToggleUnderline}
         />
-        <ToolbarFormattingOverflow
-          disabled={!canEdit}
-          formattingState={props.formattingState}
-          onToggleStrikethrough={props.onToggleStrikethrough}
-          onToggleSuperscript={props.onToggleSuperscript}
-          onToggleSubscript={props.onToggleSubscript}
-        />
-        <ToolbarColorPopover
-          ariaLabel="Text color"
-          colors={TEXT_COLORS.map((value) => ({ value, label: value }))}
-          disabled={!canEdit || !props.onSetTextColor}
-          icon={<Baseline className="h-3.5 w-3.5" />}
-          onSelect={(value) => {
-            if (value) {
-              props.onSetTextColor?.(value);
-            }
-          }}
-          title="Text color"
-        />
-        <ToolbarColorPopover
-          ariaLabel="Highlight color"
-          colors={HIGHLIGHT_COLORS.map((entry) => ({ value: entry.value, label: entry.label }))}
-          disabled={!canEdit || !props.onSetHighlightColor}
-          icon={<Highlighter className="h-3.5 w-3.5" />}
-          onSelect={(value) => props.onSetHighlightColor?.(value)}
-          title="Highlight color"
-        />
-        <ToolbarAlignmentPopover
-          activeAlignment={props.formattingState?.alignment}
-          disabled={!canEdit || !props.onSetAlignment}
-          onSelect={(alignment) => props.onSetAlignment?.(alignment)}
-        />
+        {showAdvancedFormatting ? (
+          <ToolbarFormattingOverflow
+            disabled={!canEdit}
+            formattingState={props.formattingState}
+            onToggleStrikethrough={props.onToggleStrikethrough}
+            onToggleSuperscript={props.onToggleSuperscript}
+            onToggleSubscript={props.onToggleSubscript}
+          />
+        ) : null}
+        {showFormattingColors ? (
+          <>
+            <ToolbarColorPopover
+              ariaLabel="Text color"
+              colors={TEXT_COLORS.map((value) => ({ value, label: value }))}
+              disabled={!canEdit || !props.onSetTextColor}
+              icon={<Baseline className="h-3.5 w-3.5" />}
+              onSelect={(value) => {
+                if (value) {
+                  props.onSetTextColor?.(value);
+                }
+              }}
+              title="Text color"
+            />
+            <ToolbarColorPopover
+              ariaLabel="Highlight color"
+              colors={HIGHLIGHT_COLORS.map((entry) => ({ value: entry.value, label: entry.label }))}
+              disabled={!canEdit || !props.onSetHighlightColor}
+              icon={<Highlighter className="h-3.5 w-3.5" />}
+              onSelect={(value) => props.onSetHighlightColor?.(value)}
+              title="Highlight color"
+            />
+            <ToolbarAlignmentPopover
+              activeAlignment={props.formattingState?.alignment}
+              disabled={!canEdit || !props.onSetAlignment}
+              onSelect={(alignment) => props.onSetAlignment?.(alignment)}
+            />
+          </>
+        ) : null}
 
         <div className="mx-1 h-4 w-px bg-border" />
 
+        {showListActions ? (
+          <>
+            <TwToolbarIconButton
+              icon={List}
+              label="Bulleted list"
+              active={Boolean(props.activeListContext && !props.activeListContext.isOrdered)}
+              disabled={!canEdit}
+              onClick={props.onToggleBulletedList}
+            />
+            <TwToolbarIconButton
+              icon={Rows3}
+              label="Numbered list"
+              active={Boolean(props.activeListContext?.isOrdered)}
+              disabled={!canEdit}
+              onClick={props.onToggleNumberedList}
+            />
+          </>
+        ) : null}
+
         <TwToolbarIconButton
           icon={Outdent}
           label="Outdent"
@@ -247,13 +295,63 @@ export function TwToolbar(props: TwToolbarProps) {
           disabled={!canEdit}
           onClick={props.onIndent}
         />
-        <ToolbarInsertMenu
-          disabled={!canInsertStructural}
-          onInsertImage={props.onInsertImage}
-          onInsertPageBreak={props.onInsertPageBreak}
-          onInsertSectionBreak={props.onInsertSectionBreak}
-          onInsertTable={props.onInsertTable}
-        />
+        {showListActions && props.activeListContext ? (
+          <>
+            <button
+              type="button"
+              aria-label="Restart numbering"
+              disabled={!canEdit || !props.onRestartNumbering}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              onClick={props.onRestartNumbering}
+              className={`inline-flex h-7 items-center rounded-md px-2 text-xs font-medium text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+            >
+              Restart
+            </button>
+            <button
+              type="button"
+              aria-label="Continue numbering"
+              disabled={!canEdit || !props.onContinueNumbering}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              onClick={props.onContinueNumbering}
+              className={`inline-flex h-7 items-center rounded-md px-2 text-xs font-medium text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+            >
+              Continue
+            </button>
+          </>
+        ) : null}
+        {showInsertMenu ? (
+          <ToolbarInsertMenu
+            disabled={!canInsertStructural}
+            onInsertImage={props.onInsertImage}
+            onInsertPageBreak={props.onInsertPageBreak}
+            onInsertSectionBreak={props.onInsertSectionBreak}
+            onInsertTable={props.onInsertTable}
+          />
+        ) : null}
+        {showUpdateActions ? (
+          <>
+            <button
+              type="button"
+              aria-label="Refresh fields"
+              disabled={!canEdit || !props.onUpdateFields}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              onClick={props.onUpdateFields}
+              className={`inline-flex h-7 items-center rounded-md px-2 text-xs font-medium text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+            >
+              Fields
+            </button>
+            <button
+              type="button"
+              aria-label="Refresh table of contents"
+              disabled={!canEdit || !props.onUpdateTableOfContents}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              onClick={props.onUpdateTableOfContents}
+              className={`inline-flex h-7 items-center rounded-md px-2 text-xs font-medium text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+            >
+              TOC
+            </button>
+          </>
+        ) : null}
 
         {/* Story focus breadcrumb — visible when editing a secondary story */}
         {props.activeStory && props.activeStory.kind !== "main" ? (
@@ -263,7 +361,7 @@ export function TwToolbar(props: TwToolbarProps) {
               type="button"
               onClick={props.onCloseStory}
               onMouseDown={preserveEditorSelectionMouseDown}
-              className={`inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium text-accent hover:bg-accent-soft transition-colors outline-none ${focusRingClass}`}
+              className={`inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium text-accent hover:bg-surface transition-colors outline-none ${focusRingClass}`}
               aria-label={`Editing ${storyLabel(props.activeStory)} — click to return to main body`}
             >
               <span className="text-secondary">&larr;</span>
@@ -273,13 +371,6 @@ export function TwToolbar(props: TwToolbarProps) {
         ) : null}
       </div>
 
-      {/* Center: document title */}
-      <div className="flex-1 text-center min-w-0">
-        <span className="text-sm font-medium truncate block">
-          {props.sourceLabel ?? "Untitled"}
-        </span>
-      </div>
-
       {/* Right cluster: comment, track changes, markup, view, export */}
       <div className="flex items-center gap-0.5">
         <TwToolbarIconButton
@@ -290,29 +381,33 @@ export function TwToolbar(props: TwToolbarProps) {
           onClick={props.onAddComment}
         />
 
-        <Tooltip.Root>
-          <Tooltip.Trigger asChild>
-            <Toggle.Root
-              pressed={props.showTrackedChanges}
-              onPressedChange={props.onShowTrackedChangesChange}
-              disabled={caps ? !caps.trackChangesSupported : false}
-              onMouseDown={preserveEditorSelectionMouseDown}
-              className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-accent-soft data-[state=on]:text-accent outline-none disabled:opacity-40 ${focusRingClass}`}
-            >
-              {props.showTrackedChanges ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />}
-            </Toggle.Root>
-          </Tooltip.Trigger>
-          <Tooltip.Portal>
-            <Tooltip.Content
-              className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50"
-              sideOffset={6}
-            >
-              {props.showTrackedChanges ? "Hide tracked changes" : "Show tracked changes"}
-            </Tooltip.Content>
-          </Tooltip.Portal>
-        </Tooltip.Root>
+        {showTrackedChangesToggle ? (
+          <>
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Toggle.Root
+                  pressed={props.showTrackedChanges}
+                  onPressedChange={props.onShowTrackedChangesChange}
+                  disabled={caps ? !caps.trackChangesSupported : false}
+                  onMouseDown={preserveEditorSelectionMouseDown}
+                  className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-canvas data-[state=on]:text-accent data-[state=on]:ring-1 data-[state=on]:ring-accent/30 data-[state=on]:shadow-sm outline-none disabled:opacity-40 ${focusRingClass}`}
+                >
+                  {props.showTrackedChanges ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />}
+                </Toggle.Root>
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Content
+                  className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50"
+                  sideOffset={6}
+                >
+                  {props.showTrackedChanges ? "Hide tracked changes" : "Show tracked changes"}
+                </Tooltip.Content>
+              </Tooltip.Portal>
+            </Tooltip.Root>
 
-        <div className="mx-1 h-4 w-px bg-border" />
+            <div className="mx-1 h-4 w-px bg-border" />
+          </>
+        ) : null}
 
         {/* View mode toggle group: Canvas (clean, flowing) / Page (layout-sensitive) */}
         <ToggleGroup.Root
@@ -329,7 +424,7 @@ export function TwToolbar(props: TwToolbarProps) {
                 value="canvas"
                 aria-label="Canvas workspace"
                 onMouseDown={preserveEditorSelectionMouseDown}
-                className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-accent-soft data-[state=on]:text-accent outline-none ${focusRingClass}`}
+                className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-canvas data-[state=on]:text-accent data-[state=on]:ring-1 data-[state=on]:ring-accent/30 data-[state=on]:shadow-sm outline-none ${focusRingClass}`}
               >
                 <Monitor className="h-3.5 w-3.5" />
               </ToggleGroup.Item>
@@ -346,7 +441,7 @@ export function TwToolbar(props: TwToolbarProps) {
                 value="page"
                 aria-label="Page workspace"
                 onMouseDown={preserveEditorSelectionMouseDown}
-                className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-accent-soft data-[state=on]:text-accent outline-none ${focusRingClass}`}
+                className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-canvas data-[state=on]:text-accent data-[state=on]:ring-1 data-[state=on]:ring-accent/30 data-[state=on]:shadow-sm outline-none ${focusRingClass}`}
               >
                 <FileText className="h-3.5 w-3.5" />
               </ToggleGroup.Item>
@@ -359,8 +454,8 @@ export function TwToolbar(props: TwToolbarProps) {
           </Tooltip.Root>
         </ToggleGroup.Root>
 
-        {/* Zoom controls — visible in page mode */}
-        {isPageMode && props.onZoomChange ? (
+        {/* Zoom controls — available in all workspace modes */}
+        {props.onZoomChange ? (
           <>
             <div className="mx-1 h-4 w-px bg-border" />
             <div className="flex items-center gap-0.5">
@@ -460,86 +555,60 @@ export function TwToolbar(props: TwToolbarProps) {
           </>
         ) : null}
 
-        {/* Health indicator */}
-        {props.compatibility && props.warnings ? (
-          <Popover.Root>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Popover.Trigger asChild>
-                  <button
-                    type="button"
-                    onMouseDown={preserveEditorSelectionMouseDown}
-                    className={`relative inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-surface hover:text-primary outline-none ${focusRingClass} ${
-                      (caps?.healthIssueCount ?? 0) > 0 ? "text-secondary" : "text-secondary"
-                    }`}
-                  >
+        {showHealth ? (
+          <>
+            <Popover.Root>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Popover.Trigger asChild>
+                    <button
+                      type="button"
+                      aria-label="Document health"
+                      onMouseDown={preserveEditorSelectionMouseDown}
+                      className={`relative inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface hover:text-primary outline-none ${focusRingClass}`}
+                    >
+                      <AlertCircle className="h-4 w-4" />
+                      {(caps?.healthIssueCount ?? 0) > 0 ? (
+                        <span className="absolute -top-0.5 -right-0.5 flex h-3 min-w-[12px] items-center justify-center rounded-full bg-tertiary text-[8px] font-medium text-white">
+                          {caps?.healthIssueCount}
+                        </span>
+                      ) : null}
+                    </button>
+                  </Popover.Trigger>
+                </Tooltip.Trigger>
+                <Tooltip.Portal>
+                  <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
                     {(caps?.healthIssueCount ?? 0) > 0
-                      ? <ShieldAlert className="h-4 w-4" />
-                      : <ShieldCheck className="h-4 w-4" />
-                    }
-                    {(caps?.healthIssueCount ?? 0) > 0 ? (
-                      <span className="absolute -top-0.5 -right-0.5 flex h-3 min-w-[12px] items-center justify-center rounded-full bg-tertiary text-[8px] font-medium text-white">
-                        {caps?.healthIssueCount}
-                      </span>
-                    ) : null}
-                  </button>
-                </Popover.Trigger>
-              </Tooltip.Trigger>
-              <Tooltip.Portal>
-                <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
-                  {(caps?.healthIssueCount ?? 0) > 0
-                    ? `Document health — ${caps?.healthIssueCount} issue${(caps?.healthIssueCount ?? 0) !== 1 ? "s" : ""}`
-                    : "Document health — no issues"
-                  }
-                </Tooltip.Content>
-              </Tooltip.Portal>
-            </Tooltip.Root>
-            <Popover.Portal>
-              <Popover.Content
-                className="w-[360px] max-h-[480px] overflow-y-auto rounded-lg bg-canvas shadow-lg ring-1 ring-border p-3 z-50"
-                sideOffset={8}
-                align="end"
-              >
-                <TwHealthPanel
-                  blockedReasons={props.blockedReasons}
-                  compatibility={props.compatibility}
-                  warnings={props.warnings}
-                />
-              </Popover.Content>
-            </Popover.Portal>
-          </Popover.Root>
+                      ? `Document health — ${caps?.healthIssueCount} issue${(caps?.healthIssueCount ?? 0) !== 1 ? "s" : ""}`
+                      : "Document health — no issues"}
+                  </Tooltip.Content>
+                </Tooltip.Portal>
+              </Tooltip.Root>
+              <Popover.Portal>
+                <Popover.Content
+                  className="w-[360px] max-h-[480px] overflow-y-auto rounded-lg bg-canvas shadow-lg ring-1 ring-border p-3 z-50"
+                  sideOffset={8}
+                  align="end"
+                >
+                  <TwHealthPanel
+                    blockedReasons={props.blockedReasons}
+                    compatibility={props.compatibility!}
+                    warnings={props.warnings!}
+                  />
+                </Popover.Content>
+              </Popover.Portal>
+            </Popover.Root>
+            <div className="mx-1 h-4 w-px bg-border" />
+          </>
         ) : null}
 
-        <div className="mx-1 h-4 w-px bg-border" />
-
-        {/* Export button */}
-        <Tooltip.Root>
-          <Tooltip.Trigger asChild>
-            <button
-              type="button"
-              disabled={caps ? !caps.canExport : true}
-              onMouseDown={preserveEditorSelectionMouseDown}
-              className={[
-                "inline-flex h-7 items-center gap-1.5 rounded-md px-2.5 text-xs font-semibold transition-colors outline-none",
-                focusRingClass,
-                caps?.exportBlocked
-                  ? "cursor-not-allowed text-danger opacity-50"
-                  : "text-accent hover:bg-accent-soft",
-              ].join(" ")}
-              onClick={props.onExport}
-            >
-              <Download className="h-3.5 w-3.5" />
-              Export .docx
-            </button>
-          </Tooltip.Trigger>
-          <Tooltip.Portal>
-            <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
-              {caps?.exportBlocked
-                ? "Export blocked by unsupported content"
-                : "Export document"}
-            </Tooltip.Content>
-          </Tooltip.Portal>
-        </Tooltip.Root>
+        <TwToolbarIconButton
+          icon={Download}
+          label={caps?.exportBlocked ? "Export blocked" : "Download document"}
+          disabled={caps ? !caps.canExport : true}
+          emphasis
+          onClick={props.onExport}
+        />
       </div>
     </header>
   );
@@ -584,7 +653,7 @@ function ToolbarParagraphStyleSelect(props: {
           <Select.Viewport className="p-1">
             {props.styles.map((style) => (
               <Select.Item
-                className={`flex cursor-pointer items-center rounded-md px-2.5 py-1.5 text-xs text-primary outline-none data-[highlighted]:bg-surface data-[state=checked]:bg-accent-soft data-[state=checked]:text-accent ${focusRingClass}`}
+                className={`flex cursor-pointer items-center rounded-md px-2.5 py-1.5 text-xs text-primary outline-none data-[highlighted]:bg-surface data-[state=checked]:bg-canvas data-[state=checked]:text-accent data-[state=checked]:ring-1 data-[state=checked]:ring-accent/20 ${focusRingClass}`}
                 key={style.styleId}
                 value={style.styleId}
               >
@@ -633,7 +702,7 @@ function ToolbarFontFamilySelect(props: {
           <Select.Viewport className="p-1">
             {FONT_FAMILIES.map((font) => (
               <Select.Item
-                className={`flex cursor-pointer items-center rounded-md px-2.5 py-1.5 text-xs text-primary outline-none data-[highlighted]:bg-surface data-[state=checked]:bg-accent-soft data-[state=checked]:text-accent ${focusRingClass}`}
+                className={`flex cursor-pointer items-center rounded-md px-2.5 py-1.5 text-xs text-primary outline-none data-[highlighted]:bg-surface data-[state=checked]:bg-canvas data-[state=checked]:text-accent data-[state=checked]:ring-1 data-[state=checked]:ring-accent/20 ${focusRingClass}`}
                 key={font}
                 value={font}
               >
@@ -683,7 +752,7 @@ function ToolbarFontSizeSelect(props: {
           <Select.Viewport className="p-1">
             {FONT_SIZES.map((size) => (
               <Select.Item
-                className={`flex cursor-pointer items-center rounded-md px-2.5 py-1.5 text-xs text-primary outline-none data-[highlighted]:bg-surface data-[state=checked]:bg-accent-soft data-[state=checked]:text-accent ${focusRingClass}`}
+                className={`flex cursor-pointer items-center rounded-md px-2.5 py-1.5 text-xs text-primary outline-none data-[highlighted]:bg-surface data-[state=checked]:bg-canvas data-[state=checked]:text-accent data-[state=checked]:ring-1 data-[state=checked]:ring-accent/20 ${focusRingClass}`}
                 key={size}
                 value={String(size)}
               >
@@ -1018,7 +1087,7 @@ function ToolbarPopoverActionButton(props: {
       onMouseDown={preserveEditorSelectionMouseDown}
       onClick={props.onClick}
       className={`inline-flex h-8 items-center justify-center rounded-md border border-border transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${
-        props.active ? "bg-accent-soft text-accent" : "bg-canvas text-secondary hover:bg-surface"
+        props.active ? "bg-canvas text-accent ring-1 ring-accent/30 shadow-sm" : "bg-canvas text-secondary hover:bg-surface"
       } ${focusRingClass}`}
     >
       {props.icon}