@beyondwork/docx-react-component 1.0.106 → 1.0.108

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { createPortal } from "react-dom";
 
 import * as Popover from "@radix-ui/react-popover";
 import * as Select from "@radix-ui/react-select";
@@ -71,7 +70,10 @@ import {
 } from "../../ui/headless/scoped-chrome-policy";
 import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
 import { TwDisplayModeSelector } from "../chrome/tw-display-mode-selector";
-import { type MarkupDisplayMode } from "./tw-role-action-region";
+import {
+  TwRoleActionRegion,
+  type MarkupDisplayMode,
+} from "./tw-role-action-region";
 import { TwToolbarIconButton } from "./tw-toolbar-icon-button";
 
 export interface TwToolbarProps {
@@ -86,9 +88,9 @@ export interface TwToolbarProps {
   compactMode?: boolean;
   /**
    * True when the runtime has an active editable text/paragraph target
-   * (focused caret or range selection). Formatting, paragraph, list, and
-   * structural insert controls use this in addition to document-level edit
-   * capability so top chrome does not advertise commands against no target.
+   * (focused caret or range selection). Selection-scoped controls combine
+   * this with edit capability so top chrome does not advertise document
+   * commands when focus is on chrome or an object frame.
    */
   hasEditableSelectionTarget?: boolean;
   workspaceMode: WorkspaceMode;
@@ -132,7 +134,7 @@ export interface TwToolbarProps {
   onToggleSidebar?: () => void;
   onZoomChange?: (level: ZoomLevel) => void;
   onShowTrackedChangesChange: (show: boolean) => void;
-  /** Top-toolbar fallback for changing redline/comment display when review context band is not active. */
+  /** Top-toolbar control for changing redline/comment display. */
   onMarkupDisplayChange?: (mode: MarkupDisplayMode) => void;
   onRestartNumbering?: () => void;
   onContinueNumbering?: () => void;
@@ -141,13 +143,13 @@ export interface TwToolbarProps {
 
   // ───── R1: role-scoped inline action region (spec §6.4) ──────────────
   /**
-   * Active editor role. Since Chrome Closure Pass Task 1 (2026-04-22) the
-   * role-action region renders inside `<TwContextBand>` — the toolbar
-   * itself no longer mounts `<TwRoleActionRegion>`. The `role` prop is
-   * retained here only so the formatting cluster can defer items owned
-   * by the role-region via `isChromeItemOwnedByRoleRegion`.
+   * Active editor role. Shipping product chrome keeps role switching in
+   * the main toolbar's Edit / Review / Workflow toggle; extra
+   * context-band rows are not mounted by default.
    */
   role?: EditorRole;
+  /** Called when the main toolbar role toggle changes product mode. */
+  onEditorRoleChange?: (role: EditorRole) => void;
   /** Review-queue snapshot — consumed only by the view-cluster change-counter chip. */
   reviewQueue?: ReviewQueueSnapshot;
   /** Markup display mode for the review role. */
@@ -159,8 +161,7 @@ export interface TwToolbarProps {
   // Workflow + review role: scope posture
   onMarkScopePosture?: (posture: ScopeRailPosture) => void;
   // Review role — inline prev/next + accept/reject stay on the toolbar for
-  // the view-cluster mount (queue counter chip); batch ops moved with the
-  // role-region to <TwContextBand> and are threaded there, not here.
+  // the view-cluster mount (queue counter chip).
   onReviewPrev?: () => void;
   onReviewNext?: () => void;
   onReviewAccept?: () => void;
@@ -228,6 +229,31 @@ export function getSupportedZoomPresets(): ReadonlyArray<number> {
 const focusRingClass =
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
 
+function ToolbarTextButton(props: {
+  ariaLabel: string;
+  children: React.ReactNode;
+  disabled?: boolean;
+  disabledReason?: string;
+  onClick?: () => void;
+}): React.JSX.Element {
+  const disabledReason =
+    props.disabled && props.disabledReason ? props.disabledReason : undefined;
+  return (
+    <button
+      type="button"
+      aria-label={props.ariaLabel}
+      data-disabled-reason={disabledReason}
+      disabled={props.disabled}
+      title={disabledReason ? `Not available: ${disabledReason}` : undefined}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={props.onClick}
+      className={`inline-flex h-6 items-center rounded-md px-2 text-[11px] font-medium text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+    >
+      {props.children}
+    </button>
+  );
+}
+
 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"];
@@ -238,80 +264,19 @@ const HIGHLIGHT_COLORS = [
   { value: "#e6e0d4", label: "Stone" },
   { value: null, label: "None" },
 ] as const;
-
-function ToolbarPortalMenu(props: {
-  anchorRef: React.RefObject<HTMLButtonElement | null>;
-  align?: "start" | "end";
-  children: React.ReactNode;
-  className: string;
-  menuWidthPx: number;
-  open: boolean;
-}): React.ReactPortal | null {
-  const style = useToolbarPortalPosition({
-    align: props.align ?? "start",
-    anchorRef: props.anchorRef,
-    menuWidthPx: props.menuWidthPx,
-    open: props.open,
-  });
-  const body = props.anchorRef.current?.ownerDocument?.body;
-  if (!props.open || !body) {
-    return null;
-  }
-  return createPortal(
-    <div className={props.className} style={style}>
-      {props.children}
-    </div>,
-    body,
-  );
-}
-
-function useToolbarPortalPosition(input: {
-  align: "start" | "end";
-  anchorRef: React.RefObject<HTMLButtonElement | null>;
-  menuWidthPx: number;
-  open: boolean;
-}): React.CSSProperties {
-  const [style, setStyle] = React.useState<React.CSSProperties>({
-    left: 8,
-    position: "fixed",
-    top: 8,
-    zIndex: 50,
-  });
-
-  React.useLayoutEffect(() => {
-    if (!input.open) return;
-    const anchor = input.anchorRef.current;
-    const ownerWindow = anchor?.ownerDocument?.defaultView;
-    if (!anchor || !ownerWindow) return;
-
-    const update = () => {
-      const rect = anchor.getBoundingClientRect();
-      const viewportWidth = ownerWindow.innerWidth || input.menuWidthPx + 16;
-      const rawLeft =
-        input.align === "end" ? rect.right - input.menuWidthPx : rect.left;
-      const left = Math.min(
-        Math.max(8, rawLeft),
-        Math.max(8, viewportWidth - input.menuWidthPx - 8),
-      );
-      setStyle({
-        left,
-        position: "fixed",
-        top: Math.max(8, rect.bottom + 8),
-        zIndex: 50,
-      });
-    };
-
-    update();
-    ownerWindow.addEventListener("resize", update);
-    ownerWindow.addEventListener("scroll", update, true);
-    return () => {
-      ownerWindow.removeEventListener("resize", update);
-      ownerWindow.removeEventListener("scroll", update, true);
-    };
-  }, [input.align, input.anchorRef, input.menuWidthPx, input.open]);
-
-  return style;
-}
+const ROLE_TOGGLE_ITEMS: ReadonlyArray<{
+  role: EditorRole;
+  label: string;
+  testId: string;
+}> = [
+  { role: "editor", label: "Edit", testId: "toolbar-role-toggle-edit" },
+  { role: "review", label: "Review", testId: "toolbar-role-toggle-review" },
+  {
+    role: "workflow",
+    label: "Workflow",
+    testId: "toolbar-role-toggle-workflow",
+  },
+];
 
 export function TwToolbar(props: TwToolbarProps) {
   const caps = props.capabilities;
@@ -330,9 +295,11 @@ export function TwToolbar(props: TwToolbarProps) {
     props.interactionPolicy && props.interactionPolicy.mode !== "edit"
       ? `Not available in ${props.interactionPolicy.mode} mode.`
       : "Editing is not available in this document.";
-  const editDisabledReason = selectionTargetDisabledReason ?? (!baseCanFormatText ? editModeDisabledReason : undefined);
+  const editDisabledReason =
+    selectionTargetDisabledReason ?? (!baseCanFormatText ? editModeDisabledReason : undefined);
   const insertDisabledReason =
-    selectionTargetDisabledReason ?? (!baseCanInsertStructural ? editModeDisabledReason : undefined);
+    selectionTargetDisabledReason ??
+    (!baseCanInsertStructural ? editModeDisabledReason : undefined);
   const canEdit = baseCanFormatText && hasEditableSelectionTarget;
   const canInsertStructural = baseCanInsertStructural && hasEditableSelectionTarget;
   const canAddComment = props.interactionPolicy?.canAddComment ?? (caps ? caps.canAddComment : false);
@@ -367,10 +334,20 @@ export function TwToolbar(props: TwToolbarProps) {
   const showRightClusterComment =
     isToolbarChromeItemVisible(scopedChromePolicy, "comment") &&
     !isChromeItemOwnedByRoleRegion("comment", props.role);
+  const healthIssueCount = caps?.healthIssueCount ?? 0;
+  const hasHealthIssue =
+    healthIssueCount > 0 ||
+    props.compatibility?.blockExport === true ||
+    (props.compatibility?.featureEntries.some(
+      (entry) => entry.featureClass === "unsupported-fatal",
+    ) ??
+      false) ||
+    (props.warnings?.length ?? 0) > 0 ||
+    (props.blockedReasons?.length ?? 0) > 0;
   const showHealth =
     showDiagnosticsChrome &&
     isToolbarChromeItemVisible(scopedChromePolicy, "health") &&
-    Boolean(props.compatibility && props.warnings);
+    hasHealthIssue;
   const showListActions = isToolbarChromeItemVisible(scopedChromePolicy, "list-actions");
   const showUpdateActions = isToolbarChromeItemVisible(scopedChromePolicy, "update-actions");
   const showSidebarToggle =
@@ -429,6 +406,16 @@ export function TwToolbar(props: TwToolbarProps) {
     >
       {/* Left cluster: undo/redo + formatting */}
       <div className={`flex min-w-0 flex-1 items-center gap-0.5 ${isCompact ? "flex-wrap" : ""}`}>
+        {props.role ? (
+          <>
+            <ToolbarRoleToggle
+              role={props.role}
+              disabled={!props.onEditorRoleChange}
+              onRoleChange={props.onEditorRoleChange}
+            />
+            <div className="mx-1 h-4 w-px bg-border" />
+          </>
+        ) : null}
         <TwToolbarIconButton
           icon={Undo2}
           label="Undo"
@@ -531,7 +518,6 @@ export function TwToolbar(props: TwToolbarProps) {
                   disabled={!canEdit || !props.onSetTextColor}
                   disabledReason={editDisabledReason}
                   icon={<Baseline className="h-3.5 w-3.5" />}
-                  activeValue={props.formattingState?.textColor?.toLowerCase()}
                   onSelect={(value) => {
                     if (value) {
                       props.onSetTextColor?.(value);
@@ -545,7 +531,6 @@ export function TwToolbar(props: TwToolbarProps) {
                   disabled={!canEdit || !props.onSetHighlightColor}
                   disabledReason={editDisabledReason}
                   icon={<Highlighter className="h-3.5 w-3.5" />}
-                  activeValue={props.formattingState?.highlightColor?.toLowerCase() ?? null}
                   onSelect={(value) => props.onSetHighlightColor?.(value)}
                   title="Highlight color"
                 />
@@ -604,30 +589,22 @@ export function TwToolbar(props: TwToolbarProps) {
         ) : null}
         {showListContinuationInRow ? (
           <>
-            <button
-              type="button"
-              aria-label="Restart numbering"
+            <ToolbarTextButton
+              ariaLabel="Restart numbering"
               disabled={!canEdit || !props.onRestartNumbering}
-              title={!canEdit && editDisabledReason ? `Not available: ${editDisabledReason}` : undefined}
-              data-disabled-reason={!canEdit && editDisabledReason ? editDisabledReason : undefined}
-              onMouseDown={preserveEditorSelectionMouseDown}
+              disabledReason={editDisabledReason}
               onClick={props.onRestartNumbering}
-              className={`inline-flex h-6 items-center rounded-md px-2 text-[11px] 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"
+            </ToolbarTextButton>
+            <ToolbarTextButton
+              ariaLabel="Continue numbering"
               disabled={!canEdit || !props.onContinueNumbering}
-              title={!canEdit && editDisabledReason ? `Not available: ${editDisabledReason}` : undefined}
-              data-disabled-reason={!canEdit && editDisabledReason ? editDisabledReason : undefined}
-              onMouseDown={preserveEditorSelectionMouseDown}
+              disabledReason={editDisabledReason}
               onClick={props.onContinueNumbering}
-              className={`inline-flex h-6 items-center rounded-md px-2 text-[11px] font-medium text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
             >
               Continue
-            </button>
+            </ToolbarTextButton>
           </>
         ) : null}
         {showInsertMenu && showInsertActionsInRow ? (
@@ -643,30 +620,22 @@ export function TwToolbar(props: TwToolbarProps) {
         ) : null}
         {showUpdateActions && showUpdateActionsInRow ? (
           <>
-            <button
-              type="button"
-              aria-label="Refresh fields"
+            <ToolbarTextButton
+              ariaLabel="Refresh fields"
               disabled={!canEdit || !props.onUpdateFields}
-              title={!canEdit && editDisabledReason ? `Not available: ${editDisabledReason}` : undefined}
-              data-disabled-reason={!canEdit && editDisabledReason ? editDisabledReason : undefined}
-              onMouseDown={preserveEditorSelectionMouseDown}
+              disabledReason={editDisabledReason}
               onClick={props.onUpdateFields}
-              className={`inline-flex h-6 items-center rounded-md px-2 text-[11px] 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"
+            </ToolbarTextButton>
+            <ToolbarTextButton
+              ariaLabel="Refresh table of contents"
               disabled={!canEdit || !props.onUpdateTableOfContents}
-              title={!canEdit && editDisabledReason ? `Not available: ${editDisabledReason}` : undefined}
-              data-disabled-reason={!canEdit && editDisabledReason ? editDisabledReason : undefined}
-              onMouseDown={preserveEditorSelectionMouseDown}
+              disabledReason={editDisabledReason}
               onClick={props.onUpdateTableOfContents}
-              className={`inline-flex h-6 items-center rounded-md px-2 text-[11px] font-medium text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
             >
               TOC
-            </button>
+            </ToolbarTextButton>
           </>
         ) : null}
         {showCompactOverflow ? (
@@ -721,16 +690,28 @@ export function TwToolbar(props: TwToolbarProps) {
         ) : null}
       </div>
 
-      {/*
-       * Chrome Closure Pass · Task 1 (designsystem.md §6.3) — the
-       * role-action region used to render here as the toolbar's center
-       * subregion. It now lives inside `TwContextBand` (rendered as a
-       * sibling above the toolbar) so the workspace row is
-       *   [shell] · [TwContextBand carrying role actions] · [TwToolbar]
-       * The toolbar still consumes `props.role` above for
-       * `isChromeItemOwnedByRoleRegion` deferral so it does not
-       * duplicate controls the band already exposes (§6.2 "Do not").
-       */}
+      {props.role ? (
+        <TwRoleActionRegion
+          role={props.role}
+          policy={scopedChromePolicy}
+          compactMode={isCompact}
+          reviewQueue={props.reviewQueue}
+          markupDisplay={props.markupDisplay}
+          canAddComment={canAddComment}
+          showTrackedChanges={props.showTrackedChanges}
+          onAddComment={props.onAddComment}
+          onShowTrackedChangesChange={props.onShowTrackedChangesChange}
+          capabilities={caps}
+          onReviewSidebarTrackedChanges={props.onReviewSidebarTrackedChanges}
+          onReviewSidebarComments={props.onReviewSidebarComments}
+          onMarkScopePosture={props.onMarkScopePosture}
+          onReviewPrev={props.onReviewPrev}
+          onReviewNext={props.onReviewNext}
+          onReviewAccept={props.onReviewAccept}
+          onReviewReject={props.onReviewReject}
+          onReviewMarkupMode={props.onMarkupDisplayChange}
+        />
+      ) : null}
 
       {/* Right cluster: comment, track changes, markup, view, export */}
       <div className={`flex items-center gap-0.5 ${isCompact ? "ml-auto flex-wrap justify-end" : ""}`}>
@@ -1002,17 +983,17 @@ export function TwToolbar(props: TwToolbarProps) {
                   className={`relative inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface hover:text-primary outline-none ${focusRingClass}`}
                 >
                   <AlertCircle className="h-3.5 w-3.5" />
-                  {(caps?.healthIssueCount ?? 0) > 0 ? (
+                  {healthIssueCount > 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}
+                      {healthIssueCount}
                     </span>
                   ) : null}
                 </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?.healthIssueCount ?? 0) > 0
-                    ? `Document health — ${caps?.healthIssueCount} issue${(caps?.healthIssueCount ?? 0) !== 1 ? "s" : ""} (opens rail)`
+                  {healthIssueCount > 0
+                    ? `Document health — ${healthIssueCount} issue${healthIssueCount !== 1 ? "s" : ""} (opens rail)`
                     : "Document health — no issues"}
                 </Tooltip.Content>
               </Tooltip.Portal>
@@ -1036,6 +1017,49 @@ export function TwToolbar(props: TwToolbarProps) {
   );
 }
 
+function ToolbarRoleToggle(props: {
+  role: EditorRole;
+  disabled?: boolean;
+  onRoleChange?: (role: EditorRole) => void;
+}): React.JSX.Element {
+  return (
+    <ToggleGroup.Root
+      type="single"
+      value={props.role}
+      aria-label="Editor mode"
+      data-testid="toolbar-role-toggle"
+      disabled={props.disabled}
+      onValueChange={(value) => {
+        if (!value || value === props.role) {
+          return;
+        }
+        props.onRoleChange?.(value as EditorRole);
+      }}
+      className="mr-0.5 inline-flex h-7 shrink-0 items-center rounded-[var(--radius-md)] border border-[var(--color-border-subtle)] bg-[var(--color-bg-muted)] p-0.5"
+    >
+      {ROLE_TOGGLE_ITEMS.map((item) => (
+        <ToggleGroup.Item
+          key={item.role}
+          value={item.role}
+          aria-label={item.label}
+          data-testid={item.testId}
+          onMouseDown={preserveEditorSelectionMouseDown}
+          className={[
+            "inline-flex h-6 items-center rounded-[var(--radius-sm)] px-2 text-[11px] font-semibold",
+            "text-[var(--color-text-secondary)] transition-colors duration-[var(--motion-fast)]",
+            "hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-primary)]",
+            "data-[state=on]:bg-[var(--color-bg-canvas)] data-[state=on]:text-[var(--color-accent-primary)]",
+            "disabled:cursor-not-allowed disabled:opacity-40",
+            "focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]",
+          ].join(" ")}
+        >
+          {item.label}
+        </ToggleGroup.Item>
+      ))}
+    </ToggleGroup.Root>
+  );
+}
+
 function ToolbarParagraphStyleSelect(props: {
   styles: StyleCatalogSnapshot["paragraphs"];
   value?: string;
@@ -1062,9 +1086,15 @@ function ToolbarParagraphStyleSelect(props: {
         aria-label="Paragraph style"
         aria-disabled={props.disabled || undefined}
         data-disabled={props.disabled ? "" : undefined}
-        data-disabled-reason={props.disabled && props.disabledReason ? props.disabledReason : undefined}
+        data-disabled-reason={
+          props.disabled && props.disabledReason ? props.disabledReason : undefined
+        }
         data-mixed={isMixed ? "true" : undefined}
-        title={props.disabled && props.disabledReason ? `Not available: ${props.disabledReason}` : undefined}
+        title={
+          props.disabled && props.disabledReason
+            ? `Not available: ${props.disabledReason}`
+            : undefined
+        }
         onMouseDown={preserveEditorSelectionMouseDown}
         className={`inline-flex h-6 min-w-[7.5rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2 text-[11px] font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
       >
@@ -1129,9 +1159,15 @@ function ToolbarFontFamilySelect(props: {
         aria-label="Font family"
         aria-disabled={props.disabled || undefined}
         data-disabled={props.disabled ? "" : undefined}
-        data-disabled-reason={props.disabled && props.disabledReason ? props.disabledReason : undefined}
+        data-disabled-reason={
+          props.disabled && props.disabledReason ? props.disabledReason : undefined
+        }
         data-mixed={isMixed ? "true" : undefined}
-        title={props.disabled && props.disabledReason ? `Not available: ${props.disabledReason}` : undefined}
+        title={
+          props.disabled && props.disabledReason
+            ? `Not available: ${props.disabledReason}`
+            : undefined
+        }
         onMouseDown={preserveEditorSelectionMouseDown}
         className={`inline-flex h-6 min-w-[6.5rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2 text-[11px] font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
       >
@@ -1198,9 +1234,15 @@ function ToolbarFontSizeSelect(props: {
         aria-label="Font size"
         aria-disabled={props.disabled || undefined}
         data-disabled={props.disabled ? "" : undefined}
-        data-disabled-reason={props.disabled && props.disabledReason ? props.disabledReason : undefined}
+        data-disabled-reason={
+          props.disabled && props.disabledReason ? props.disabledReason : undefined
+        }
         data-mixed={isMixed ? "true" : undefined}
-        title={props.disabled && props.disabledReason ? `Not available: ${props.disabledReason}` : undefined}
+        title={
+          props.disabled && props.disabledReason
+            ? `Not available: ${props.disabledReason}`
+            : undefined
+        }
         onMouseDown={preserveEditorSelectionMouseDown}
         className={`inline-flex h-6 min-w-[3.5rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2 text-[11px] font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
       >
@@ -1273,7 +1315,6 @@ function ToolbarCompactOverflow(props: {
   onUpdateTableOfContents?: () => void;
 }) {
   const [open, setOpen] = React.useState(false);
-  const triggerRef = React.useRef<HTMLButtonElement>(null);
 
   async function handleImageChange(event: React.ChangeEvent<HTMLInputElement>): Promise<void> {
     const file = event.target.files?.[0];
@@ -1293,28 +1334,19 @@ function ToolbarCompactOverflow(props: {
   }
 
   return (
-    <Popover.Root open={open} onOpenChange={setOpen}>
+    <div className="relative">
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <Popover.Anchor asChild>
-            <button
-              ref={triggerRef}
-              type="button"
-              aria-label="More document tools"
-              aria-expanded={open}
-              aria-haspopup="menu"
-              onMouseDown={preserveEditorSelectionMouseDown}
-              onClick={(event) => {
-                event.preventDefault();
-                setOpen((value) => !value);
-              }}
-              className={`inline-flex h-6 w-6 items-center justify-center rounded-md border border-border bg-canvas text-primary transition-colors hover:bg-surface outline-none ${
-                open ? "text-accent ring-1 ring-accent/30 shadow-sm" : ""
-              } ${focusRingClass}`}
-            >
-              <MoreHorizontal className="h-3.5 w-3.5" />
-            </button>
-          </Popover.Anchor>
+          <button
+            type="button"
+            aria-label="More document tools"
+            aria-expanded={open}
+            onMouseDown={preserveEditorSelectionMouseDown}
+            onClick={() => setOpen((value) => !value)}
+            className={`inline-flex h-6 w-6 items-center justify-center rounded-md border border-border bg-canvas text-primary transition-colors hover:bg-surface outline-none ${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}>
@@ -1322,12 +1354,8 @@ function ToolbarCompactOverflow(props: {
           </Tooltip.Content>
         </Tooltip.Portal>
       </Tooltip.Root>
-      <ToolbarPortalMenu
-        anchorRef={triggerRef}
-        className="w-[min(20rem,calc(100vw-2rem))] rounded-lg bg-canvas p-2 shadow-lg ring-1 ring-border"
-        menuWidthPx={320}
-        open={open}
-      >
+      {open ? (
+        <div className="absolute left-0 top-9 z-50 w-[min(20rem,calc(100vw-2rem))] rounded-lg bg-canvas p-2 shadow-lg ring-1 ring-border">
           <div className="space-y-3">
             {props.showStyleSelectors ? (
               <div className="space-y-2">
@@ -1487,14 +1515,15 @@ function ToolbarCompactOverflow(props: {
                   }}
                 />
                 <label
-                  title={
+                  aria-disabled={!props.canInsertStructural || !props.onInsertImage ? "true" : undefined}
+                  data-disabled-reason={
                     !props.canInsertStructural && props.insertDisabledReason
-                      ? `Not available: ${props.insertDisabledReason}`
+                      ? props.insertDisabledReason
                       : undefined
                   }
-                  data-disabled-reason={
+                  title={
                     !props.canInsertStructural && props.insertDisabledReason
-                      ? props.insertDisabledReason
+                      ? `Not available: ${props.insertDisabledReason}`
                       : undefined
                   }
                   className={`flex h-7 cursor-pointer items-center gap-2 rounded-md px-2 text-left text-[11px] font-medium text-primary transition-colors hover:bg-surface ${
@@ -1558,8 +1587,9 @@ function ToolbarCompactOverflow(props: {
               </div>
             ) : null}
           </div>
-      </ToolbarPortalMenu>
-    </Popover.Root>
+        </div>
+      ) : null}
+    </div>
   );
 }
 
@@ -1572,36 +1602,28 @@ function ToolbarFormattingOverflow(props: {
   onToggleSubscript?: () => void;
 }) {
   const [open, setOpen] = React.useState(false);
-  const triggerRef = React.useRef<HTMLButtonElement>(null);
   const disabledTitle =
     props.disabled && props.disabledReason ? `Not available: ${props.disabledReason}` : undefined;
 
   return (
-    <Popover.Root open={open} onOpenChange={setOpen}>
+    <div className="relative">
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <Popover.Anchor asChild>
-            <button
-              ref={triggerRef}
-              type="button"
-              aria-label="More text formatting"
-              aria-expanded={open}
-              aria-haspopup="menu"
-              data-disabled-reason={props.disabled && props.disabledReason ? props.disabledReason : undefined}
-              disabled={props.disabled}
-              title={disabledTitle}
-              onMouseDown={preserveEditorSelectionMouseDown}
-              onClick={(event) => {
-                event.preventDefault();
-                setOpen((value) => !value);
-              }}
-              className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${
-                open ? "bg-canvas text-accent ring-1 ring-accent/30 shadow-sm" : ""
-              } ${focusRingClass}`}
-            >
-              <MoreHorizontal className="h-3.5 w-3.5" />
-            </button>
-          </Popover.Anchor>
+          <button
+            type="button"
+            aria-label="More text formatting"
+            aria-expanded={open}
+            data-disabled-reason={
+              props.disabled && props.disabledReason ? props.disabledReason : undefined
+            }
+            disabled={props.disabled}
+            title={disabledTitle}
+            onMouseDown={preserveEditorSelectionMouseDown}
+            onClick={() => setOpen((value) => !value)}
+            className={`inline-flex h-6 w-6 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}>
@@ -1609,12 +1631,8 @@ function ToolbarFormattingOverflow(props: {
           </Tooltip.Content>
         </Tooltip.Portal>
       </Tooltip.Root>
-      <ToolbarPortalMenu
-        anchorRef={triggerRef}
-        className="w-[220px] rounded-lg bg-canvas p-2 shadow-lg ring-1 ring-border"
-        menuWidthPx={220}
-        open={open}
-      >
+      {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>
@@ -1653,8 +1671,9 @@ function ToolbarFormattingOverflow(props: {
               }}
             />
           </div>
-      </ToolbarPortalMenu>
-    </Popover.Root>
+        </div>
+      ) : null}
+    </div>
   );
 }
 
@@ -1664,42 +1683,32 @@ function ToolbarColorPopover(props: {
   disabled: boolean;
   disabledReason?: string;
   icon: React.ReactNode;
-  activeValue?: string | null;
   title: string;
   onSelect: (value: string | null) => void;
 }) {
   const [open, setOpen] = React.useState(false);
-  const triggerRef = React.useRef<HTMLButtonElement>(null);
-  const activeValue = props.activeValue?.toLowerCase() ?? null;
   const disabledTitle =
     props.disabled && props.disabledReason ? `Not available: ${props.disabledReason}` : undefined;
 
   return (
-    <Popover.Root open={open} onOpenChange={setOpen}>
+    <div className="relative">
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <Popover.Anchor asChild>
-            <button
-              ref={triggerRef}
-              type="button"
-              aria-label={props.ariaLabel}
-              aria-expanded={open}
-              aria-haspopup="menu"
-              data-disabled-reason={props.disabled && props.disabledReason ? props.disabledReason : undefined}
-              disabled={props.disabled}
-              title={disabledTitle}
-              onMouseDown={preserveEditorSelectionMouseDown}
-              onClick={(event) => {
-                event.preventDefault();
-                setOpen((value) => !value);
-              }}
-              className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${
-                open ? "bg-canvas text-accent ring-1 ring-accent/30 shadow-sm" : ""
-              } ${focusRingClass}`}
-            >
-              {props.icon}
-            </button>
-          </Popover.Anchor>
+          <button
+            type="button"
+            aria-label={props.ariaLabel}
+            aria-expanded={open}
+            data-disabled-reason={
+              props.disabled && props.disabledReason ? props.disabledReason : undefined
+            }
+            disabled={props.disabled}
+            title={disabledTitle}
+            onMouseDown={preserveEditorSelectionMouseDown}
+            onClick={() => setOpen((value) => !value)}
+            className={`inline-flex h-6 w-6 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}>
@@ -1707,46 +1716,35 @@ function ToolbarColorPopover(props: {
           </Tooltip.Content>
         </Tooltip.Portal>
       </Tooltip.Root>
-      <ToolbarPortalMenu
-        anchorRef={triggerRef}
-        className="w-[180px] rounded-lg bg-canvas p-2 shadow-lg ring-1 ring-border"
-        menuWidthPx={180}
-        open={open}
-      >
+      {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) => {
-              const normalizedValue = color.value?.toLowerCase() ?? null;
-              const isActive = normalizedValue === activeValue;
-              return (
-                <button
-                  key={`${props.ariaLabel}-${color.label}`}
-                  type="button"
-                  aria-label={`${props.title} ${color.label}`}
-                  aria-pressed={isActive}
-                  data-active={isActive ? "true" : undefined}
-                  disabled={props.disabled}
-                  onMouseDown={preserveEditorSelectionMouseDown}
-                  onClick={() => {
-                    props.onSelect(color.value);
-                    setOpen(false);
-                  }}
-                  className={`inline-flex h-7 items-center justify-center rounded-md border text-[10px] font-medium text-primary transition-transform hover:scale-[1.04] disabled:cursor-not-allowed disabled:opacity-40 ${
-                    isActive
-                      ? "border-accent ring-2 ring-accent/35 shadow-sm"
-                      : "border-border"
-                  } ${color.value ? "" : "bg-surface"} ${focusRingClass}`}
-                  style={color.value ? { backgroundColor: color.value } : undefined}
-                >
-                  {color.value ? <span className="sr-only">{color.label}</span> : "None"}
-                </button>
-              );
-            })}
+            {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-7 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>
-      </ToolbarPortalMenu>
-    </Popover.Root>
+        </div>
+      ) : null}
+    </div>
   );
 }
 
@@ -1757,7 +1755,6 @@ function ToolbarAlignmentPopover(props: {
   onSelect: (alignment: FormattingAlignment) => void;
 }) {
   const [open, setOpen] = React.useState(false);
-  const triggerRef = React.useRef<HTMLButtonElement>(null);
   const disabledTitle =
     props.disabled && props.disabledReason ? `Not available: ${props.disabledReason}` : undefined;
   const alignments = [
@@ -1768,31 +1765,24 @@ function ToolbarAlignmentPopover(props: {
   ];
 
   return (
-    <Popover.Root open={open} onOpenChange={setOpen}>
+    <div className="relative">
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <Popover.Anchor asChild>
-            <button
-              ref={triggerRef}
-              type="button"
-              aria-label="Paragraph alignment"
-              aria-expanded={open}
-              aria-haspopup="menu"
-              data-disabled-reason={props.disabled && props.disabledReason ? props.disabledReason : undefined}
-              disabled={props.disabled}
-              title={disabledTitle}
-              onMouseDown={preserveEditorSelectionMouseDown}
-              onClick={(event) => {
-                event.preventDefault();
-                setOpen((value) => !value);
-              }}
-              className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${
-                open ? "bg-canvas text-accent ring-1 ring-accent/30 shadow-sm" : ""
-              } ${focusRingClass}`}
-            >
-              {(alignments.find((entry) => entry.value === props.activeAlignment) ?? alignments[0])?.icon}
-            </button>
-          </Popover.Anchor>
+          <button
+            type="button"
+            aria-label="Paragraph alignment"
+            aria-expanded={open}
+            data-disabled-reason={
+              props.disabled && props.disabledReason ? props.disabledReason : undefined
+            }
+            disabled={props.disabled}
+            title={disabledTitle}
+            onMouseDown={preserveEditorSelectionMouseDown}
+            onClick={() => setOpen((value) => !value)}
+            className={`inline-flex h-6 w-6 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}>
@@ -1800,12 +1790,8 @@ function ToolbarAlignmentPopover(props: {
           </Tooltip.Content>
         </Tooltip.Portal>
       </Tooltip.Root>
-      <ToolbarPortalMenu
-        anchorRef={triggerRef}
-        className="w-[220px] rounded-lg bg-canvas p-2 shadow-lg ring-1 ring-border"
-        menuWidthPx={220}
-        open={open}
-      >
+      {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>
@@ -1825,8 +1811,9 @@ function ToolbarAlignmentPopover(props: {
               />
             ))}
           </div>
-      </ToolbarPortalMenu>
-    </Popover.Root>
+        </div>
+      ) : null}
+    </div>
   );
 }
 
@@ -1850,9 +1837,11 @@ function ToolbarInsertMenu(props: {
   onInsertImage?: (options: InsertImageOptions) => void;
 }) {
   const [open, setOpen] = React.useState(false);
-  const triggerRef = React.useRef<HTMLButtonElement>(null);
+  const triggerUnavailable = props.disabled && props.disabledReason
+    ? props.disabledReason
+    : undefined;
   const disabledTitle =
-    props.disabled && props.disabledReason ? `Not available: ${props.disabledReason}` : undefined;
+    triggerUnavailable ? `Not available: ${triggerUnavailable}` : undefined;
 
   async function handleImageChange(event: React.ChangeEvent<HTMLInputElement>): Promise<void> {
     const file = event.target.files?.[0];
@@ -1871,50 +1860,31 @@ function ToolbarInsertMenu(props: {
   }
 
   return (
-    <Popover.Root open={open} onOpenChange={setOpen}>
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>
-          <Popover.Anchor asChild>
-            <button
-              ref={triggerRef}
-              type="button"
-              aria-label="Insert"
-              aria-expanded={open}
-              aria-haspopup="menu"
-              data-disabled-reason={props.disabled && props.disabledReason ? props.disabledReason : undefined}
-              disabled={props.disabled}
-              title={disabledTitle}
-              onMouseDown={preserveEditorSelectionMouseDown}
-              onClick={(event) => {
-                event.preventDefault();
-                setOpen((value) => !value);
-              }}
-              className={`inline-flex h-6 items-center gap-1 rounded-md border border-border bg-canvas px-2 text-[11px] font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${
-                open ? "text-accent ring-1 ring-accent/30 shadow-sm" : ""
-              } ${focusRingClass}`}
-            >
-              Insert
-              <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
-            </button>
-          </Popover.Anchor>
-        </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>
-      <ToolbarPortalMenu
-        anchorRef={triggerRef}
-        className="w-[220px] rounded-lg bg-canvas p-2 shadow-lg ring-1 ring-border"
-        menuWidthPx={220}
-        open={open}
+    <div className="relative">
+      <button
+        type="button"
+        aria-label="Insert"
+        aria-disabled={triggerUnavailable ? "true" : undefined}
+        aria-expanded={open}
+        data-disabled-reason={triggerUnavailable}
+        title={disabledTitle ?? "Insert"}
+        onMouseDown={preserveEditorSelectionMouseDown}
+        onClick={() => setOpen((value) => !value)}
+        className={`inline-flex h-6 items-center gap-1 rounded-md border border-border bg-canvas px-2 text-[11px] font-medium text-primary transition-colors hover:bg-surface outline-none ${focusRingClass}`}
       >
+        Insert
+        <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
+      </button>
+      {open ? (
+        <div
+          className="absolute left-0 top-9 z-[60] w-[220px] rounded-lg bg-canvas p-2 shadow-lg ring-1 ring-border"
+          data-testid="toolbar-insert-menu"
+        >
           <div className="space-y-1">
             <ToolbarMenuButton
               ariaLabel="Insert page break"
               disabled={props.disabled || !props.onInsertPageBreak}
-              disabledReason={props.disabled ? props.disabledReason : props.disabledReasons?.pageBreak}
+              disabledReason={props.disabledReasons?.pageBreak ?? props.disabledReason}
               icon={<Minus className="h-3.5 w-3.5" />}
               label="Page break"
               onClick={() => {
@@ -1925,7 +1895,7 @@ function ToolbarInsertMenu(props: {
             <ToolbarMenuButton
               ariaLabel="Insert table"
               disabled={props.disabled || !props.onInsertTable}
-              disabledReason={props.disabled ? props.disabledReason : props.disabledReasons?.table}
+              disabledReason={props.disabledReasons?.table ?? props.disabledReason}
               icon={<Rows3 className="h-3.5 w-3.5" />}
               label="Table"
               onClick={() => {
@@ -1935,19 +1905,15 @@ function ToolbarInsertMenu(props: {
             />
             <label
               aria-disabled={props.disabled || !props.onInsertImage ? "true" : undefined}
-              title={
-                props.disabled
-                  ? disabledTitle
-                  : !props.onInsertImage && props.disabledReasons?.image
-                    ? `Not available: ${props.disabledReasons.image}`
-                    : undefined
-              }
               data-disabled-reason={
-                props.disabled
-                  ? props.disabledReason
-                  : !props.onInsertImage
-                    ? props.disabledReasons?.image
-                    : undefined
+                props.disabled || !props.onInsertImage
+                  ? props.disabledReasons?.image ?? props.disabledReason
+                  : undefined
+              }
+              title={
+                props.disabled || !props.onInsertImage
+                  ? `Not available: ${props.disabledReasons?.image ?? props.disabledReason ?? "Insert image is not available."}`
+                  : undefined
               }
               className={`flex h-7 cursor-pointer items-center gap-2 rounded-md px-2 text-[11px] font-medium text-primary transition-colors hover:bg-surface ${
                 props.disabled || !props.onInsertImage ? "pointer-events-none opacity-40" : ""
@@ -1969,7 +1935,7 @@ function ToolbarInsertMenu(props: {
             <ToolbarMenuButton
               ariaLabel="Insert next-page section break"
               disabled={props.disabled || !props.onInsertSectionBreak}
-              disabledReason={props.disabled ? props.disabledReason : props.disabledReasons?.sectionBreak}
+              disabledReason={props.disabledReasons?.sectionBreak ?? props.disabledReason}
               icon={<FileText className="h-3.5 w-3.5" />}
               label="Next-page section break"
               onClick={() => {
@@ -1978,8 +1944,9 @@ function ToolbarInsertMenu(props: {
               }}
             />
           </div>
-      </ToolbarPortalMenu>
-    </Popover.Root>
+        </div>
+      ) : null}
+    </div>
   );
 }
 
@@ -2000,11 +1967,11 @@ function ToolbarPopoverActionButton(props: {
       type="button"
       aria-label={props.ariaLabel}
       aria-pressed={props.active}
-      disabled={props.disabled}
-      title={titleAttr}
       data-disabled-reason={
         props.disabled && props.disabledReason ? props.disabledReason : undefined
       }
+      disabled={props.disabled}
+      title={titleAttr}
       onMouseDown={preserveEditorSelectionMouseDown}
       onClick={props.onClick}
       className={`inline-flex h-7 items-center justify-center rounded-md border border-border transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${