@beyondwork/docx-react-component 1.0.29 → 1.0.30

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

@@ -0,0 +1,1133 @@
+import React from "react";
+
+import * as Popover from "@radix-ui/react-popover";
+import * as Select from "@radix-ui/react-select";
+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,
+  AlignRight,
+  Baseline,
+  Bold,
+  ChevronDown,
+  Download,
+  Eye,
+  EyeOff,
+  FileText,
+  Highlighter,
+  ImagePlus,
+  Indent,
+  Italic,
+  List,
+  MessageSquare,
+  Minus,
+  Monitor,
+  MoreHorizontal,
+  Outdent,
+  Plus,
+  Redo2,
+  Rows3,
+  Strikethrough,
+  Subscript,
+  Superscript,
+  Underline,
+  Undo2,
+} from "lucide-react";
+
+import type {
+  ActiveListContext,
+  CompatibilityPanelSnapshot,
+  EditorStoryTarget,
+  EditorWarning,
+  FormattingStateSnapshot,
+  FormattingAlignment,
+  InsertImageOptions,
+  SectionBreakType,
+  StyleCatalogSnapshot,
+  WorkflowBlockedCommandReason,
+  WordReviewEditorChromePreset,
+  WorkspaceMode,
+  ZoomLevel,
+} from "../../api/public-types";
+import type { SessionCapabilities } from "../../runtime/session-capabilities";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+import { TwHealthPanel } from "../review/tw-health-panel";
+import { TwToolbarIconButton } from "./tw-toolbar-icon-button";
+
+export interface TwToolbarProps {
+  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;
+  /** Active story target — shows a breadcrumb when editing a secondary story. */
+  activeStory?: EditorStoryTarget;
+  /** Called when the user clicks the story breadcrumb to return to main body. */
+  onCloseStory?: () => void;
+  onUndo: () => void;
+  onRedo: () => void;
+  onSetParagraphStyle?: (styleId: string) => void;
+  onToggleBold?: () => void;
+  onToggleItalic?: () => void;
+  onToggleUnderline?: () => void;
+  onToggleStrikethrough?: () => void;
+  onToggleSuperscript?: () => void;
+  onToggleSubscript?: () => void;
+  onSetFontFamily?: (fontFamily: string) => void;
+  onSetFontSize?: (fontSize: number) => void;
+  onSetTextColor?: (color: string) => void;
+  onSetHighlightColor?: (color: string | null) => void;
+  onSetAlignment?: (alignment: FormattingAlignment) => void;
+  onToggleBulletedList?: () => void;
+  onToggleNumberedList?: () => void;
+  onOutdent?: () => void;
+  onIndent?: () => void;
+  onAddComment: () => void;
+  onInsertPageBreak?: () => void;
+  onInsertTable?: () => void;
+  onInsertSectionBreak?: (type: SectionBreakType) => void;
+  onInsertImage?: (options: InsertImageOptions) => void;
+  onExport: () => void;
+  onWorkspaceModeChange: (value: WorkspaceMode) => void;
+  onZoomChange?: (level: ZoomLevel) => void;
+  onShowTrackedChangesChange: (show: boolean) => void;
+  onRestartNumbering?: () => void;
+  onContinueNumbering?: () => void;
+  onUpdateFields?: () => void;
+  onUpdateTableOfContents?: () => void;
+}
+
+export interface ToolbarInteractionPolicy {
+  mode: "edit" | "suggest" | "comment" | "view" | "blocked";
+  canFormatText: boolean;
+  canInsertStructural: boolean;
+  canAddComment: boolean;
+}
+
+export function getSupportedZoomPresets(): ReadonlyArray<number> {
+  return [75, 100, 125, 150];
+}
+
+const focusRingClass =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+
+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 = ["#1f1f1f", "#5c5852", "#1660a8", "#50684d", "#9b4f49", "#7b5f32"];
+const HIGHLIGHT_COLORS = [
+  { value: "#ffff00", label: "Yellow" },
+  { 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 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}%`
+      : zoomLevel === "pageWidth"
+        ? "Fit width"
+        : "Fit page";
+
+  return (
+    <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 min-w-0 flex-1 items-center gap-0.5">
+        <TwToolbarIconButton
+          icon={Undo2}
+          label="Undo"
+          disabled={caps ? !caps.canUndo : true}
+          onClick={props.onUndo}
+        />
+        <TwToolbarIconButton
+          icon={Redo2}
+          label="Redo"
+          disabled={caps ? !caps.canRedo : true}
+          onClick={props.onRedo}
+        />
+        <div className="mx-1 h-4 w-px bg-border" />
+
+        {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}
+            />
+
+            <div className="mx-1 h-4 w-px bg-border" />
+          </>
+        ) : null}
+
+        <TwToolbarIconButton
+          icon={Bold}
+          label="Bold"
+          active={props.formattingState?.bold ?? false}
+          disabled={!canEdit}
+          onClick={props.onToggleBold}
+        />
+        <TwToolbarIconButton
+          icon={Italic}
+          label="Italic"
+          active={props.formattingState?.italic ?? false}
+          disabled={!canEdit}
+          onClick={props.onToggleItalic}
+        />
+        <TwToolbarIconButton
+          icon={Underline}
+          label="Underline"
+          active={props.formattingState?.underline ?? false}
+          disabled={!canEdit}
+          onClick={props.onToggleUnderline}
+        />
+        {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"
+          disabled={!canEdit}
+          onClick={props.onOutdent}
+        />
+        <TwToolbarIconButton
+          icon={Indent}
+          label="Indent"
+          disabled={!canEdit}
+          onClick={props.onIndent}
+        />
+        {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" ? (
+          <>
+            <div className="mx-1 h-4 w-px bg-border" />
+            <button
+              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-surface transition-colors outline-none ${focusRingClass}`}
+              aria-label={`Editing ${storyLabel(props.activeStory)} — click to return to main body`}
+            >
+              <span className="text-secondary">&larr;</span>
+              {storyLabel(props.activeStory)}
+            </button>
+          </>
+        ) : null}
+      </div>
+
+      {/* Right cluster: comment, track changes, markup, view, export */}
+      <div className="flex items-center gap-0.5">
+        <TwToolbarIconButton
+          icon={MessageSquare}
+          label="Add comment"
+          disabled={!canAddComment}
+          emphasis
+          onClick={props.onAddComment}
+        />
+
+        {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" />
+          </>
+        ) : null}
+
+        {/* View mode toggle group: Canvas (clean, flowing) / Page (layout-sensitive) */}
+        <ToggleGroup.Root
+          type="single"
+          value={workspaceMode}
+          onValueChange={(v: string) => {
+            if (v) props.onWorkspaceModeChange(v as WorkspaceMode);
+          }}
+          className="flex items-center gap-0.5"
+        >
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <ToggleGroup.Item
+                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-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>
+            </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}>
+                Canvas — clean flowing text
+              </Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <ToggleGroup.Item
+                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-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>
+            </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}>
+                Page — layout-sensitive view
+              </Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
+        </ToggleGroup.Root>
+
+        {/* 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">
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <button
+                    type="button"
+                    aria-label="Zoom out"
+                    className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface outline-none ${focusRingClass}`}
+                    disabled={typeof zoomLevel === "number" && zoomLevel <= 50}
+                    onMouseDown={preserveEditorSelectionMouseDown}
+                    onClick={() => {
+                      const current = typeof zoomLevel === "number" ? zoomLevel : 100;
+                      props.onZoomChange!(Math.max(50, current - 10));
+                    }}
+                  >
+                    <Minus className="h-3 w-3" />
+                  </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}>
+                    Zoom out
+                  </Tooltip.Content>
+                </Tooltip.Portal>
+              </Tooltip.Root>
+
+              <Popover.Root>
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <Popover.Trigger asChild>
+                      <button
+                        type="button"
+                        aria-label={`Zoom: ${zoomLabel}`}
+                        onMouseDown={preserveEditorSelectionMouseDown}
+                        className={`inline-flex h-7 items-center justify-center rounded-md px-1.5 text-[11px] font-medium text-secondary transition-colors hover:bg-surface outline-none ${focusRingClass}`}
+                      >
+                        {zoomLabel}
+                      </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}>
+                      Zoom level
+                    </Tooltip.Content>
+                  </Tooltip.Portal>
+                </Tooltip.Root>
+                <Popover.Portal>
+                  <Popover.Content
+                    className="w-[140px] rounded-lg bg-canvas shadow-lg ring-1 ring-border p-1 z-50"
+                    sideOffset={8}
+                    align="center"
+                  >
+                    {getSupportedZoomPresets().map((preset) => {
+                      const label = `${preset}%`;
+                      return (
+                        <Popover.Close key={preset} asChild>
+                          <button
+                            type="button"
+                            onMouseDown={preserveEditorSelectionMouseDown}
+                            className={`w-full rounded-md px-3 py-1.5 text-left text-xs transition-colors hover:bg-surface ${
+                              zoomLevel === preset ? "font-semibold text-accent" : "text-primary"
+                            }`}
+                            onClick={() => props.onZoomChange!(preset)}
+                          >
+                            {label}
+                          </button>
+                        </Popover.Close>
+                      );
+                    })}
+                  </Popover.Content>
+                </Popover.Portal>
+              </Popover.Root>
+
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <button
+                    type="button"
+                    aria-label="Zoom in"
+                    className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface outline-none ${focusRingClass}`}
+                    disabled={typeof zoomLevel === "number" && zoomLevel >= 200}
+                    onMouseDown={preserveEditorSelectionMouseDown}
+                    onClick={() => {
+                      const current = typeof zoomLevel === "number" ? zoomLevel : 100;
+                      props.onZoomChange!(Math.min(200, current + 10));
+                    }}
+                  >
+                    <Plus className="h-3 w-3" />
+                  </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}>
+                    Zoom in
+                  </Tooltip.Content>
+                </Tooltip.Portal>
+              </Tooltip.Root>
+            </div>
+          </>
+        ) : null}
+
+        {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
+                      ? `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}
+
+        <TwToolbarIconButton
+          icon={Download}
+          label={caps?.exportBlocked ? "Export blocked" : "Download document"}
+          disabled={caps ? !caps.canExport : true}
+          emphasis
+          onClick={props.onExport}
+        />
+      </div>
+    </header>
+  );
+}
+
+function ToolbarParagraphStyleSelect(props: {
+  styles: StyleCatalogSnapshot["paragraphs"];
+  value?: string;
+  disabled: boolean;
+  onValueChange?: (styleId: string) => void;
+}) {
+  const resolvedValue =
+    props.value && props.styles.some((style) => style.styleId === props.value)
+      ? props.value
+      : "";
+
+  return (
+    <Select.Root
+      disabled={props.disabled}
+      onValueChange={(value) => props.onValueChange?.(value)}
+      value={resolvedValue}
+    >
+      <Select.Trigger
+        aria-label="Paragraph style"
+        aria-disabled={props.disabled || undefined}
+        data-disabled={props.disabled ? "" : undefined}
+        onMouseDown={preserveEditorSelectionMouseDown}
+        className={`inline-flex h-7 min-w-[8.5rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2.5 text-xs font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+      >
+        <Select.Value placeholder="Style" />
+        <Select.Icon>
+          <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
+        </Select.Icon>
+      </Select.Trigger>
+      <Select.Portal>
+        <Select.Content
+          align="start"
+          className="z-50 overflow-hidden rounded-lg bg-canvas shadow-lg ring-1 ring-border"
+          position="popper"
+          sideOffset={8}
+        >
+          <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-canvas data-[state=checked]:text-accent data-[state=checked]:ring-1 data-[state=checked]:ring-accent/20 ${focusRingClass}`}
+                key={style.styleId}
+                value={style.styleId}
+              >
+                <Select.ItemText>{style.displayName}</Select.ItemText>
+              </Select.Item>
+            ))}
+          </Select.Viewport>
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+}
+
+function ToolbarFontFamilySelect(props: {
+  value?: string;
+  disabled: boolean;
+  onValueChange?: (fontFamily: string) => void;
+}) {
+  const resolvedValue = props.value && FONT_FAMILIES.includes(props.value) ? props.value : "";
+
+  return (
+    <Select.Root
+      disabled={props.disabled}
+      onValueChange={(value) => props.onValueChange?.(value)}
+      value={resolvedValue}
+    >
+      <Select.Trigger
+        aria-label="Font family"
+        aria-disabled={props.disabled || undefined}
+        data-disabled={props.disabled ? "" : undefined}
+        onMouseDown={preserveEditorSelectionMouseDown}
+        className={`inline-flex h-7 min-w-[7rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2 text-xs font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+      >
+        <Select.Value placeholder="Font" />
+        <Select.Icon>
+          <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
+        </Select.Icon>
+      </Select.Trigger>
+      <Select.Portal>
+        <Select.Content
+          align="start"
+          className="z-50 overflow-hidden rounded-lg bg-canvas shadow-lg ring-1 ring-border"
+          position="popper"
+          sideOffset={8}
+        >
+          <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-canvas data-[state=checked]:text-accent data-[state=checked]:ring-1 data-[state=checked]:ring-accent/20 ${focusRingClass}`}
+                key={font}
+                value={font}
+              >
+                <Select.ItemText>{font}</Select.ItemText>
+              </Select.Item>
+            ))}
+          </Select.Viewport>
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+}
+
+function ToolbarFontSizeSelect(props: {
+  value?: number;
+  disabled: boolean;
+  onValueChange?: (fontSize: number) => void;
+}) {
+  const resolvedValue =
+    typeof props.value === "number" && FONT_SIZES.includes(props.value) ? String(props.value) : "";
+
+  return (
+    <Select.Root
+      disabled={props.disabled}
+      onValueChange={(value) => props.onValueChange?.(Number(value))}
+      value={resolvedValue}
+    >
+      <Select.Trigger
+        aria-label="Font size"
+        aria-disabled={props.disabled || undefined}
+        data-disabled={props.disabled ? "" : undefined}
+        onMouseDown={preserveEditorSelectionMouseDown}
+        className={`inline-flex h-7 min-w-[4rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2 text-xs font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+      >
+        <Select.Value placeholder="Size" />
+        <Select.Icon>
+          <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
+        </Select.Icon>
+      </Select.Trigger>
+      <Select.Portal>
+        <Select.Content
+          align="start"
+          className="z-50 overflow-hidden rounded-lg bg-canvas shadow-lg ring-1 ring-border"
+          position="popper"
+          sideOffset={8}
+        >
+          <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-canvas data-[state=checked]:text-accent data-[state=checked]:ring-1 data-[state=checked]:ring-accent/20 ${focusRingClass}`}
+                key={size}
+                value={String(size)}
+              >
+                <Select.ItemText>{size}</Select.ItemText>
+              </Select.Item>
+            ))}
+          </Select.Viewport>
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+}
+
+function ToolbarFormattingOverflow(props: {
+  disabled: boolean;
+  formattingState?: FormattingStateSnapshot;
+  onToggleStrikethrough?: () => void;
+  onToggleSuperscript?: () => void;
+  onToggleSubscript?: () => void;
+}) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <div className="relative">
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            aria-label="More text formatting"
+            aria-expanded={open}
+            disabled={props.disabled}
+            onMouseDown={preserveEditorSelectionMouseDown}
+            onClick={() => setOpen((value) => !value)}
+            className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+          >
+            <MoreHorizontal className="h-3.5 w-3.5" />
+          </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}>
+            More text formatting
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+      {open ? (
+        <div className="absolute left-0 top-9 z-50 w-[220px] rounded-lg bg-canvas p-2 shadow-lg ring-1 ring-border">
+          <div className="mb-1 px-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+            Text styling
+          </div>
+          <div className="grid grid-cols-3 gap-1">
+            <ToolbarPopoverActionButton
+              active={props.formattingState?.strikethrough ?? false}
+              ariaLabel="Strikethrough"
+              disabled={props.disabled}
+              icon={<Strikethrough className="h-3.5 w-3.5" />}
+              onClick={() => {
+                props.onToggleStrikethrough?.();
+                setOpen(false);
+              }}
+            />
+            <ToolbarPopoverActionButton
+              active={props.formattingState?.superscript ?? false}
+              ariaLabel="Superscript"
+              disabled={props.disabled}
+              icon={<Superscript className="h-3.5 w-3.5" />}
+              onClick={() => {
+                props.onToggleSuperscript?.();
+                setOpen(false);
+              }}
+            />
+            <ToolbarPopoverActionButton
+              active={props.formattingState?.subscript ?? false}
+              ariaLabel="Subscript"
+              disabled={props.disabled}
+              icon={<Subscript className="h-3.5 w-3.5" />}
+              onClick={() => {
+                props.onToggleSubscript?.();
+                setOpen(false);
+              }}
+            />
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function ToolbarColorPopover(props: {
+  ariaLabel: string;
+  colors: ReadonlyArray<{ value: string | null; label: string }>;
+  disabled: boolean;
+  icon: React.ReactNode;
+  title: string;
+  onSelect: (value: string | null) => void;
+}) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <div className="relative">
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            aria-label={props.ariaLabel}
+            aria-expanded={open}
+            disabled={props.disabled}
+            onMouseDown={preserveEditorSelectionMouseDown}
+            onClick={() => setOpen((value) => !value)}
+            className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+          >
+            {props.icon}
+          </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}>
+            {props.title}
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+      {open ? (
+        <div className="absolute left-0 top-9 z-50 w-[180px] rounded-lg bg-canvas p-2 shadow-lg ring-1 ring-border">
+          <div className="mb-1 px-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+            {props.title}
+          </div>
+          <div className="grid grid-cols-3 gap-1">
+            {props.colors.map((color) => (
+              <button
+                key={`${props.ariaLabel}-${color.label}`}
+                type="button"
+                aria-label={`${props.title} ${color.label}`}
+                disabled={props.disabled}
+                onMouseDown={preserveEditorSelectionMouseDown}
+                onClick={() => {
+                  props.onSelect(color.value);
+                  setOpen(false);
+                }}
+                className={`inline-flex h-8 items-center justify-center rounded-md border border-border text-[10px] font-medium text-primary transition-transform hover:scale-[1.04] disabled:cursor-not-allowed disabled:opacity-40 ${
+                  color.value ? "" : "bg-surface"
+                } ${focusRingClass}`}
+                style={color.value ? { backgroundColor: color.value } : undefined}
+              >
+                {color.value ? <span className="sr-only">{color.label}</span> : "None"}
+              </button>
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function ToolbarAlignmentPopover(props: {
+  activeAlignment?: FormattingAlignment;
+  disabled: boolean;
+  onSelect: (alignment: FormattingAlignment) => void;
+}) {
+  const [open, setOpen] = React.useState(false);
+  const alignments = [
+    { value: "left" as const, label: "Align left", icon: <AlignLeft className="h-3.5 w-3.5" /> },
+    { value: "center" as const, label: "Align center", icon: <AlignCenter className="h-3.5 w-3.5" /> },
+    { value: "right" as const, label: "Align right", icon: <AlignRight className="h-3.5 w-3.5" /> },
+    { value: "justify" as const, label: "Align justify", icon: <AlignJustify className="h-3.5 w-3.5" /> },
+  ];
+
+  return (
+    <div className="relative">
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            aria-label="Paragraph alignment"
+            aria-expanded={open}
+            disabled={props.disabled}
+            onMouseDown={preserveEditorSelectionMouseDown}
+            onClick={() => setOpen((value) => !value)}
+            className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+          >
+            {(alignments.find((entry) => entry.value === props.activeAlignment) ?? alignments[0])?.icon}
+          </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}>
+            Paragraph alignment
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+      {open ? (
+        <div className="absolute left-0 top-9 z-50 w-[220px] rounded-lg bg-canvas p-2 shadow-lg ring-1 ring-border">
+          <div className="mb-1 px-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+            Paragraph alignment
+          </div>
+          <div className="grid grid-cols-2 gap-1">
+            {alignments.map((entry) => (
+              <ToolbarPopoverActionButton
+                key={entry.value}
+                active={props.activeAlignment === entry.value}
+                ariaLabel={entry.label}
+                disabled={props.disabled}
+                icon={entry.icon}
+                onClick={() => {
+                  props.onSelect(entry.value);
+                  setOpen(false);
+                }}
+              />
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function ToolbarInsertMenu(props: {
+  disabled: boolean;
+  onInsertPageBreak?: () => void;
+  onInsertTable?: () => void;
+  onInsertSectionBreak?: (type: SectionBreakType) => void;
+  onInsertImage?: (options: InsertImageOptions) => void;
+}) {
+  const [open, setOpen] = React.useState(false);
+
+  async function handleImageChange(event: React.ChangeEvent<HTMLInputElement>): Promise<void> {
+    const file = event.target.files?.[0];
+    if (!file || props.disabled || !props.onInsertImage) {
+      event.target.value = "";
+      return;
+    }
+    const data = new Uint8Array(await file.arrayBuffer());
+    props.onInsertImage({
+      data,
+      mimeType: file.type || "image/png",
+      altText: file.name,
+    });
+    setOpen(false);
+    event.target.value = "";
+  }
+
+  return (
+    <div className="relative">
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            aria-label="Insert"
+            aria-expanded={open}
+            disabled={props.disabled}
+            onMouseDown={preserveEditorSelectionMouseDown}
+            onClick={() => setOpen((value) => !value)}
+            className={`inline-flex h-7 items-center gap-1 rounded-md border border-border bg-canvas px-2 text-xs font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+          >
+            Insert
+            <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
+          </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}>
+            Insert
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+      {open ? (
+        <div className="absolute left-0 top-9 z-50 w-[220px] rounded-lg bg-canvas p-2 shadow-lg ring-1 ring-border">
+          <div className="space-y-1">
+            <ToolbarMenuButton
+              ariaLabel="Insert page break"
+              disabled={props.disabled || !props.onInsertPageBreak}
+              icon={<Minus className="h-3.5 w-3.5" />}
+              label="Page break"
+              onClick={() => {
+                props.onInsertPageBreak?.();
+                setOpen(false);
+              }}
+            />
+            <ToolbarMenuButton
+              ariaLabel="Insert table"
+              disabled={props.disabled || !props.onInsertTable}
+              icon={<Rows3 className="h-3.5 w-3.5" />}
+              label="Table"
+              onClick={() => {
+                props.onInsertTable?.();
+                setOpen(false);
+              }}
+            />
+            <label
+              className={`flex h-8 cursor-pointer items-center gap-2 rounded-md px-2 text-xs font-medium text-primary transition-colors hover:bg-surface ${
+                props.disabled || !props.onInsertImage ? "pointer-events-none opacity-40" : ""
+              }`}
+            >
+              <ImagePlus className="h-3.5 w-3.5 text-secondary" />
+              <span>Image</span>
+              <input
+                accept="image/png,image/jpeg,image/gif"
+                aria-label="Insert image"
+                className="sr-only"
+                disabled={props.disabled || !props.onInsertImage}
+                type="file"
+                onChange={(event) => {
+                  void handleImageChange(event);
+                }}
+              />
+            </label>
+            <ToolbarMenuButton
+              ariaLabel="Insert next-page section break"
+              disabled={props.disabled || !props.onInsertSectionBreak}
+              icon={<FileText className="h-3.5 w-3.5" />}
+              label="Next-page section break"
+              onClick={() => {
+                props.onInsertSectionBreak?.("nextPage");
+                setOpen(false);
+              }}
+            />
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function ToolbarPopoverActionButton(props: {
+  active: boolean;
+  ariaLabel: string;
+  disabled: boolean;
+  icon: React.ReactNode;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={props.ariaLabel}
+      aria-pressed={props.active}
+      disabled={props.disabled}
+      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-canvas text-accent ring-1 ring-accent/30 shadow-sm" : "bg-canvas text-secondary hover:bg-surface"
+      } ${focusRingClass}`}
+    >
+      {props.icon}
+    </button>
+  );
+}
+
+function ToolbarMenuButton(props: {
+  ariaLabel: string;
+  disabled: boolean;
+  icon: React.ReactNode;
+  label: string;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={props.ariaLabel}
+      disabled={props.disabled}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={props.onClick}
+      className={`flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-xs font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+    >
+      <span className="text-secondary">{props.icon}</span>
+      <span>{props.label}</span>
+    </button>
+  );
+}
+
+function storyLabel(target: EditorStoryTarget): string {
+  switch (target.kind) {
+    case "header":
+      return `Header (${target.variant})`;
+    case "footer":
+      return `Footer (${target.variant})`;
+    case "footnote":
+      return "Footnote";
+    case "endnote":
+      return "Endnote";
+    default:
+      return "Document";
+  }
+}