@beyondwork/docx-react-component 1.0.27 → 1.0.29

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

@@ -1,1064 +0,0 @@
-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,
-  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 interface TwToolbarProps {
-  sourceLabel?: string;
-  capabilities?: SessionCapabilities;
-  compatibility?: CompatibilityPanelSnapshot;
-  warnings?: EditorWarning[];
-  blockedReasons?: WorkflowBlockedCommandReason[];
-  interactionPolicy?: ToolbarInteractionPolicy;
-  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;
-  onWorkspaceModeChange: (value: WorkspaceMode) => void;
-  onZoomChange?: (level: ZoomLevel) => void;
-  onShowTrackedChangesChange: (show: boolean) => 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 = ["#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 = props.interactionPolicy?.canFormatText ?? (caps ? caps.canEdit : false);
-  const canInsertStructural = props.interactionPolicy?.canInsertStructural ?? canEdit;
-  const canAddComment = props.interactionPolicy?.canAddComment ?? (caps ? caps.canAddComment : 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">
-      {/* Left cluster: undo/redo + formatting */}
-      <div className="flex 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" />
-
-        <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={!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}
-        />
-        <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={!canInsertStructural}
-          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 */}
-      <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
-          icon={MessageSquare}
-          label="Add comment"
-          disabled={!canAddComment}
-          emphasis
-          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>
-
-        <div className="mx-1 h-4 w-px bg-border" />
-
-        {/* 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-accent-soft data-[state=on]:text-accent 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-accent-soft data-[state=on]:text-accent 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 — 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>
-            <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"
-                    }`}
-                  >
-                    {(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>
-        ) : 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>
-      </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-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"
-        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-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"
-        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-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";
-  }
-}