@beyondwork/docx-react-component 1.0.18 → 1.0.20

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

@@ -1,50 +1,135 @@
 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 {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  Baseline,
+  Bold,
+  ChevronDown,
   Download,
   Eye,
   EyeOff,
   FileText,
+  Highlighter,
+  ImagePlus,
+  Indent,
+  Italic,
   MessageSquare,
+  Minus,
   Monitor,
+  MoreHorizontal,
+  Outdent,
+  Plus,
   Redo2,
+  Rows3,
+  Strikethrough,
+  Subscript,
+  Superscript,
   ShieldAlert,
   ShieldCheck,
+  Underline,
   Undo2,
 } from "lucide-react";
 
-import type { CompatibilityPanelSnapshot, EditorWarning } from "../../api/public-types";
+import type {
+  CompatibilityPanelSnapshot,
+  EditorStoryTarget,
+  EditorWarning,
+  FormattingStateSnapshot,
+  FormattingAlignment,
+  InsertImageOptions,
+  SectionBreakType,
+  StyleCatalogSnapshot,
+  WorkflowBlockedCommandReason,
+  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 type ViewMode = "canvas" | "document";
-
 export interface TwToolbarProps {
   sourceLabel?: string;
   capabilities?: SessionCapabilities;
   compatibility?: CompatibilityPanelSnapshot;
   warnings?: EditorWarning[];
-  viewMode: ViewMode;
+  blockedReasons?: WorkflowBlockedCommandReason[];
+  workspaceMode: WorkspaceMode;
+  zoomLevel?: ZoomLevel;
+  formattingState?: FormattingStateSnapshot;
+  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;
+  onOutdent?: () => void;
+  onIndent?: () => void;
   onAddComment: () => void;
+  onInsertPageBreak?: () => void;
+  onInsertTable?: () => void;
+  onInsertSectionBreak?: (type: SectionBreakType) => void;
+  onInsertImage?: (options: InsertImageOptions) => void;
   onExport: () => void;
-  onViewModeChange: (value: ViewMode) => void;
+  onWorkspaceModeChange: (value: WorkspaceMode) => void;
+  onZoomChange?: (level: ZoomLevel) => void;
   onShowTrackedChangesChange: (show: boolean) => void;
 }
 
+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 = ["#000000", "#434343", "#1660a8", "#1a7f37", "#cf222e", "#7a4f00"];
+const HIGHLIGHT_COLORS = [
+  { value: "#ffff00", label: "Yellow" },
+  { value: "#00ff00", label: "Green" },
+  { value: "#00ffff", label: "Cyan" },
+  { value: "#ff69b4", label: "Pink" },
+  { value: null, label: "None" },
+] as const;
+
 export function TwToolbar(props: TwToolbarProps) {
   const caps = props.capabilities;
+  const workspaceMode = props.workspaceMode;
+  const isPageMode = workspaceMode === "page";
+  const paragraphStyles = props.styleCatalog?.paragraphs ?? [];
+  const zoomLevel = props.zoomLevel ?? 100;
+  const canEdit = caps ? caps.canEdit : false;
+  const zoomLabel =
+    typeof zoomLevel === "number"
+      ? `${zoomLevel}%`
+      : zoomLevel === "pageWidth"
+        ? "Fit width"
+        : "Fit page";
 
   return (
     <header className="flex h-10 shrink-0 items-center gap-1 border-b border-border px-2">
@@ -64,7 +149,118 @@ export function TwToolbar(props: TwToolbarProps) {
         />
         <div className="mx-1 h-4 w-px bg-border" />
 
-        {/* Paragraph style selector and B/I/U removed — not yet supported */}
+        <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" />
+
+        <TwToolbarIconButton
+          icon={Bold}
+          label="Bold"
+          active={props.formattingState?.bold ?? false}
+          disabled={caps ? !caps.canEdit : true}
+          onClick={props.onToggleBold}
+        />
+        <TwToolbarIconButton
+          icon={Italic}
+          label="Italic"
+          active={props.formattingState?.italic ?? false}
+          disabled={caps ? !caps.canEdit : true}
+          onClick={props.onToggleItalic}
+        />
+        <TwToolbarIconButton
+          icon={Underline}
+          label="Underline"
+          active={props.formattingState?.underline ?? false}
+          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)}
+        />
+
+        <div className="mx-1 h-4 w-px bg-border" />
+
+        <TwToolbarIconButton
+          icon={Outdent}
+          label="Outdent"
+          disabled={!canEdit}
+          onClick={props.onOutdent}
+        />
+        <TwToolbarIconButton
+          icon={Indent}
+          label="Indent"
+          disabled={!canEdit}
+          onClick={props.onIndent}
+        />
+        <ToolbarInsertMenu
+          disabled={!canEdit}
+          onInsertImage={props.onInsertImage}
+          onInsertPageBreak={props.onInsertPageBreak}
+          onInsertSectionBreak={props.onInsertSectionBreak}
+          onInsertTable={props.onInsertTable}
+        />
+
+        {/* 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-accent-soft 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>
 
       {/* Center: document title */}
@@ -90,6 +286,7 @@ export function TwToolbar(props: TwToolbarProps) {
               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" />}
@@ -107,12 +304,12 @@ export function TwToolbar(props: TwToolbarProps) {
 
         <div className="mx-1 h-4 w-px bg-border" />
 
-        {/* View mode toggle group: Canvas (clean, flowing) / Document (paged, markup) */}
+        {/* View mode toggle group: Canvas (clean, flowing) / Page (layout-sensitive) */}
         <ToggleGroup.Root
           type="single"
-          value={props.viewMode}
+          value={workspaceMode}
           onValueChange={(v: string) => {
-            if (v) props.onViewModeChange(v as ViewMode);
+            if (v) props.onWorkspaceModeChange(v as WorkspaceMode);
           }}
           className="flex items-center gap-0.5"
         >
@@ -120,6 +317,8 @@ export function TwToolbar(props: TwToolbarProps) {
             <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-accent-soft data-[state=on]:text-accent outline-none ${focusRingClass}`}
               >
                 <Monitor className="h-3.5 w-3.5" />
@@ -134,7 +333,9 @@ export function TwToolbar(props: TwToolbarProps) {
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
               <ToggleGroup.Item
-                value="document"
+                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}`}
               >
                 <FileText className="h-3.5 w-3.5" />
@@ -142,12 +343,113 @@ export function TwToolbar(props: TwToolbarProps) {
             </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}>
-                Document — paged with markup
+                Page — layout-sensitive view
               </Tooltip.Content>
             </Tooltip.Portal>
           </Tooltip.Root>
         </ToggleGroup.Root>
 
+        {/* Zoom controls — visible in page mode */}
+        {isPageMode && 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}
+
         {/* Health indicator */}
         {props.compatibility && props.warnings ? (
           <Popover.Root>
@@ -156,6 +458,7 @@ export function TwToolbar(props: TwToolbarProps) {
                 <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"
                     }`}
@@ -188,6 +491,7 @@ export function TwToolbar(props: TwToolbarProps) {
                 align="end"
               >
                 <TwHealthPanel
+                  blockedReasons={props.blockedReasons}
                   compatibility={props.compatibility}
                   warnings={props.warnings}
                 />
@@ -204,6 +508,7 @@ export function TwToolbar(props: TwToolbarProps) {
             <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,
@@ -214,7 +519,7 @@ export function TwToolbar(props: TwToolbarProps) {
               onClick={props.onExport}
             >
               <Download className="h-3.5 w-3.5" />
-              Export
+              Export .docx
             </button>
           </Tooltip.Trigger>
           <Tooltip.Portal>
@@ -229,3 +534,515 @@ export function TwToolbar(props: TwToolbarProps) {
     </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"
+        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-accent-soft data-[state=checked]:text-accent ${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"
+        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-accent-soft data-[state=checked]:text-accent ${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"
+        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-accent-soft data-[state=checked]:text-accent ${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-accent-soft text-accent" : "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";
+  }
+}