@beyondwork/docx-react-component 1.0.87 → 1.0.89

package/src/ui-tailwind/editor-surface/scroll-anchor.ts

@@ -137,7 +137,23 @@ export function restoreScrollAnchor(
   anchor: ScrollAnchor | null,
   options?: FindScrollAnchorOptions,
 ): void {
-  if (!root || !anchor) return;
+  const targetScrollTop = resolveScrollTopForAnchor(root, anchor, options);
+  if (root && targetScrollTop !== null) {
+    root.scrollTop = targetScrollTop;
+  }
+}
+
+/**
+ * Resolve the `scrollTop` that would restore `anchor` without mutating the
+ * scroll container. Used by the edit-path preservation guard so it can reject
+ * unsafe restores before writing scroll state.
+ */
+export function resolveScrollTopForAnchor(
+  root: HTMLElement | null,
+  anchor: ScrollAnchor | null,
+  options?: FindScrollAnchorOptions,
+): number | null {
+  if (!root || !anchor) return null;
 
   if (options?.geometryFacet && !options.prepaintFallback) {
     const geometry = options.geometryFacet.getBlock(anchor.blockId);
@@ -150,15 +166,14 @@ export function restoreScrollAnchor(
       //   newScrollTop = newBlockTop + offsetWithinBlock.
       // Matches the DOM-path formula below (round-trip verified by
       // `test/ui/mode-toggle-scroll-anchor.test.ts`).
-      root.scrollTop = rect.topPx + anchor.offsetWithinBlock;
-      return;
+      return rect.topPx + anchor.offsetWithinBlock;
     }
     // No block match through facet; fall through to DOM path.
   }
 
   const selector = `[data-block-id="${cssEscape(anchor.blockId)}"]`;
   const block = root.querySelector<HTMLElement>(selector);
-  if (!block) return;
+  if (!block) return null;
   // Cold-open / pre-paint DOM fallback — same rationale as
   // findScrollAnchor's fallback above.
   // geometry:allow-dom-fallback
@@ -171,7 +186,7 @@ export function restoreScrollAnchor(
   // capture time).  Scrolling by `delta` shifts rects by `-delta`, so
   // solve for delta: delta = blockRect.top - rootRect.top + offsetWithinBlock.
   const delta = blockRect.top - rootRect.top + anchor.offsetWithinBlock;
-  root.scrollTop = root.scrollTop + delta;
+  return root.scrollTop + delta;
 }
 
 /**

package/src/ui-tailwind/editor-surface/tw-prosemirror-surface.tsx

@@ -72,6 +72,7 @@ import { createPredictedTxGate } from "./predicted-tx-gate";
 import { replaceStatePreservingPosition } from "./preserve-position";
 import {
   createScopeTagRegistry,
+  storyTargetsEqual,
   type ScopeTagRegistry,
 } from "../../api/public-types";
 import { hasBailIfCrossedTagInRange } from "./predicted-tag-preflight";
@@ -92,6 +93,24 @@ import { chartNodeViews } from "./chart-node-view.tsx";
 import type { SelectionToolbarAnchor } from "../../ui/headless/selection-toolbar-model";
 import type { MediaPreviewDescriptor } from "./pm-state-from-snapshot";
 
+type RebuildScrollAnchorPolicy = "bounded-same-story";
+
+const BOUNDED_TYPING_SCROLL_RESTORE_MAX_DELTA_PX = 256;
+
+export function shouldPreserveScrollAnchorForRebuild(options: {
+  policy: RebuildScrollAnchorPolicy | null;
+  view: Pick<EditorView, "hasFocus"> | null;
+  geometryFacet?: import("../../runtime/geometry/index.ts").GeometryFacet;
+  previousStory: EditorStoryTarget | null;
+  nextStory: EditorStoryTarget;
+}): boolean {
+  if (options.policy !== "bounded-same-story") return false;
+  if (!options.view?.hasFocus()) return false;
+  if (!options.geometryFacet) return false;
+  if (!options.previousStory) return false;
+  return storyTargetsEqual(options.previousStory, options.nextStory);
+}
+
 /**
  * Build page-break widget decorations from the layout facet's current page
  * graph. Returns `[]` when the facet is unavailable, the active story is
@@ -435,6 +454,8 @@ export const TwProseMirrorSurface = forwardRef<
   const sessionRef = useRef<import("./local-edit-session-state").LocalEditSessionState | null>(null);
   const laneRef = useRef<import("./fast-text-edit-lane").FastTextEditLane | null>(null);
   const equivalentAckLedgerRef = useRef<Map<string, string>>(new Map());
+  const pendingRebuildScrollAnchorRef = useRef<RebuildScrollAnchorPolicy | null>(null);
+  const lastBuiltStoryRef = useRef<EditorStoryTarget | null>(null);
   const selectionToolbarFrameRef = useRef<number | null>(null);
   const lastSelectionToolbarMeasurementRef = useRef<{
     key: string | null;
@@ -766,6 +787,7 @@ export const TwProseMirrorSurface = forwardRef<
     if (!props.dispatchRuntimeCommand || !sessionRef.current) {
       laneRef.current = null;
       equivalentAckLedgerRef.current.clear();
+      pendingRebuildScrollAnchorRef.current = null;
       return;
     }
     // Wave 1 Slice E1/E2 — lane observability.
@@ -811,6 +833,7 @@ export const TwProseMirrorSurface = forwardRef<
         );
       },
       onEquivalentAck: (ack) => {
+        pendingRebuildScrollAnchorRef.current = null;
         if (
           ack.opId &&
           ack.newRevisionToken &&
@@ -821,16 +844,22 @@ export const TwProseMirrorSurface = forwardRef<
         }
         equivalentAckLedgerRef.current.clear();
       },
-      onAdjustedAck: () => {
+      onAdjustedAck: (ack) => {
         // Adjusted path: allow the rebuild effect to run (it will call
         // view.updateState with the canonical snapshot).
         equivalentAckLedgerRef.current.clear();
+        pendingRebuildScrollAnchorRef.current =
+          getTextCommandRefreshClass(ack) === "surface-only"
+            ? "bounded-same-story"
+            : null;
       },
       onRejectedAck: () => {
         equivalentAckLedgerRef.current.clear();
+        pendingRebuildScrollAnchorRef.current = null;
       },
       onStructuralDivergence: () => {
         equivalentAckLedgerRef.current.clear();
+        pendingRebuildScrollAnchorRef.current = null;
       },
     });
   }, [props.dispatchRuntimeCommand, scopeTagRegistry]);
@@ -839,6 +868,7 @@ export const TwProseMirrorSurface = forwardRef<
     if (!mountRef.current || !surface) return;
 
     if (viewRef.current && documentBuildKeyRef.current === documentBuildKey) {
+      pendingRebuildScrollAnchorRef.current = null;
       return;
     }
 
@@ -866,6 +896,8 @@ export const TwProseMirrorSurface = forwardRef<
       documentBuildKeyRef.current = documentBuildKey;
       applyDecorationProps(viewRef.current, positionMapRef.current);
       equivalentAckLedgerRef.current.delete(snapshot.revisionToken);
+      pendingRebuildScrollAnchorRef.current = null;
+      lastBuiltStoryRef.current = snapshot.activeStory;
       if (pendingTypingProbeRef.current) {
         finishPerfProbe(pendingTypingProbeRef.current);
         pendingTypingProbeRef.current = null;
@@ -921,24 +953,38 @@ export const TwProseMirrorSurface = forwardRef<
       // AFTER, so PM's internal selection-change events during the
       // swap are swallowed by the selection-sync plugin.
       //
-      // Scroll-anchor preservation (`preserveScrollAnchor: true`) is
-      // currently OFF by default after the 2026-04-24 jump-to-top
-      // regression report (see hotfix commit). Re-enable under a
-      // diagnosed-safe codepath only; the capture/restore helpers
-      // remain tested and ready.
+      // Scroll-anchor preservation is narrowly re-enabled only when a
+      // predicted edit receives a `surface-only` adjusted ack and the
+      // replacement stays in the same focused story with a live geometry
+      // facet. `maxScrollDeltaPx` is the guardrail: if the anchor target
+      // would move by more than the small local-edit budget, the helper
+      // refuses that exact target but restores the captured scrollTop so
+      // a PM/browser-origin top jump is not accepted as the final state.
       //
       // Ordering invariant is regression-guarded by
       // `test/ui-tailwind/editor-surface/preserve-position-ordering.test.ts`.
+      const scrollAnchorPolicy = pendingRebuildScrollAnchorRef.current;
+      pendingRebuildScrollAnchorRef.current = null;
+      const preserveScrollAnchor = shouldPreserveScrollAnchorForRebuild({
+        policy: scrollAnchorPolicy,
+        view: viewRef.current,
+        geometryFacet: props.geometryFacet,
+        previousStory: lastBuiltStoryRef.current,
+        nextStory: snapshot.activeStory,
+      });
       replaceStatePreservingPosition(
         {
           view: viewRef.current,
           geometryFacet: props.geometryFacet,
           suppressionRef: suppressSelectionEchoRef,
+          preserveScrollAnchor,
+          maxScrollDeltaPx: BOUNDED_TYPING_SCROLL_RESTORE_MAX_DELTA_PX,
         },
         state,
       );
     }
     documentBuildKeyRef.current = documentBuildKey;
+    lastBuiltStoryRef.current = snapshot.activeStory;
     applyDecorationProps(viewRef.current, positionMap);
 
     if (activeSearchRef.current) {

package/src/ui-tailwind/editor-surface/tw-table-node-view.tsx

@@ -30,6 +30,7 @@ interface OpenVerticalMerge {
   col: number;
   colSpan: number;
   continuedThisRow: boolean;
+  hasMaterializedRowSpan: boolean;
   layout: TableCellLayout;
 }
 
@@ -159,7 +160,9 @@ function computeTableLayout(tableNode: PMNode): TableCellLayout[][] {
       if (verticalMerge === "continue") {
         const owner = findVerticalMergeOwner(openVerticalMerges, column, colSpan);
         if (owner) {
-          owner.layout.rowSpan += 1;
+          if (!owner.hasMaterializedRowSpan) {
+            owner.layout.rowSpan += 1;
+          }
           owner.continuedThisRow = true;
           layoutRow.push({
             cellIndex,
@@ -189,6 +192,7 @@ function computeTableLayout(tableNode: PMNode): TableCellLayout[][] {
           col: column,
           colSpan,
           continuedThisRow: true,
+          hasMaterializedRowSpan: explicitRowSpan > 1,
           layout,
         });
       }

package/src/ui-tailwind/review/tw-review-rail.tsx

@@ -23,6 +23,7 @@ import {
   TwReviewRailFooter,
   type TwReviewRailFooterProps,
 } from "./tw-review-rail-footer";
+import type { WorkflowScopeLayerKey } from "../workflow-scope-layers";
 
 /**
  * Review rail with up to four tabs (Workflow / Comments / Changes / Health).
@@ -66,6 +67,8 @@ export interface TwReviewRailProps {
    */
   scopeRailSegments?: readonly ScopeRailSegment[];
   activeScopeId?: string | null;
+  workflowLayerFilters?: ReadonlySet<WorkflowScopeLayerKey>;
+  onWorkflowLayerFiltersChange?: (filters: ReadonlySet<WorkflowScopeLayerKey>) => void;
   /**
    * Optional host-provided Workflow-tab override.  When supplied this
    * ReactNode replaces the default TwWorkflowTab content while still using
@@ -262,6 +265,8 @@ export function TwReviewRail(props: TwReviewRailProps) {
                 <TwWorkflowTab
                   segments={workflowSegments}
                   activeScopeId={props.activeScopeId ?? null}
+                  enabledLayerFilters={props.workflowLayerFilters}
+                  onEnabledLayerFiltersChange={props.onWorkflowLayerFiltersChange}
                   onOpenScope={props.onOpenScope}
                 />
               )}

package/src/ui-tailwind/review/tw-workflow-tab.tsx

@@ -10,6 +10,13 @@
 
 import React from "react";
 import type { ScopeRailSegment, ScopeRailPosture } from "../../api/public-types";
+import {
+  WORKFLOW_SCOPE_LAYER_FILTERS,
+  createDefaultWorkflowScopeLayerKeys,
+  isWorkflowScopePostureVisible,
+  toggleWorkflowScopeLayerKey,
+  type WorkflowScopeLayerKey,
+} from "../workflow-scope-layers";
 
 export interface TwWorkflowTabProps {
   segments: readonly ScopeRailSegment[];
@@ -21,6 +28,8 @@ export interface TwWorkflowTabProps {
    * matching overlay card.  If omitted, focus sync is not wired.
    */
   onActiveScopeChange?: (scopeId: string) => void;
+  enabledLayerFilters?: ReadonlySet<WorkflowScopeLayerKey>;
+  onEnabledLayerFiltersChange?: (filters: ReadonlySet<WorkflowScopeLayerKey>) => void;
 }
 
 const POSTURE_META: Record<
@@ -39,26 +48,13 @@ const POSTURE_META: Record<
 const focusRingClass =
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
 
-type ScopeFilterKey = "edit" | "suggest" | "comment" | "view" | "candidate" | "blocked";
-
-const SCOPE_FILTERS: ReadonlyArray<{
-  key: ScopeFilterKey;
-  label: string;
-  postures: readonly ScopeRailPosture[];
-}> = [
-  { key: "edit", label: "Edit", postures: ["edit"] },
-  { key: "suggest", label: "Suggest", postures: ["suggest"] },
-  { key: "comment", label: "Comment", postures: ["comment"] },
-  { key: "view", label: "Review", postures: ["view"] },
-  { key: "candidate", label: "Scheduled", postures: ["candidate"] },
-  { key: "blocked", label: "Blocked", postures: ["preserve-only", "blocked-import"] },
-];
-
 export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
   segments,
   activeScopeId,
   onOpenScope,
   onActiveScopeChange,
+  enabledLayerFilters,
+  onEnabledLayerFiltersChange,
 }) => {
   // Dedupe by scopeId so a scope spanning multiple pages shows once.
   const uniqueSegments = React.useMemo(() => {
@@ -71,20 +67,31 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
     return Array.from(byScopeId.values()).sort(compareWorkflowSegments(activeScopeId ?? null));
   }, [activeScopeId, segments]);
   const [query, setQuery] = React.useState("");
-  const [enabledFilters, setEnabledFilters] = React.useState<ReadonlySet<ScopeFilterKey>>(
-    () => new Set(SCOPE_FILTERS.map((filter) => filter.key)),
+  const [uncontrolledEnabledFilters, setUncontrolledEnabledFilters] = React.useState<
+    ReadonlySet<WorkflowScopeLayerKey>
+  >(
+    createDefaultWorkflowScopeLayerKeys,
+  );
+  const activeEnabledFilters = enabledLayerFilters ?? uncontrolledEnabledFilters;
+  const setEnabledFilters = React.useCallback(
+    (next: ReadonlySet<WorkflowScopeLayerKey>) => {
+      if (!enabledLayerFilters) {
+        setUncontrolledEnabledFilters(next);
+      }
+      onEnabledLayerFiltersChange?.(next);
+    },
+    [enabledLayerFilters, onEnabledLayerFiltersChange],
   );
   const availableFilters = React.useMemo(() => {
     const presentPostures = new Set(uniqueSegments.map((segment) => segment.posture));
-    return SCOPE_FILTERS.filter((filter) =>
+    return WORKFLOW_SCOPE_LAYER_FILTERS.filter((filter) =>
       filter.postures.some((posture) => presentPostures.has(posture)),
     );
   }, [uniqueSegments]);
   const visibleSegments = React.useMemo(() => {
     const normalizedQuery = normalizeScopeQuery(query);
     return uniqueSegments.filter((segment) => {
-      const filterKey = filterKeyForPosture(segment.posture);
-      if (!enabledFilters.has(filterKey)) {
+      if (!isWorkflowScopePostureVisible(segment.posture, activeEnabledFilters)) {
         return false;
       }
       if (!normalizedQuery) {
@@ -92,7 +99,7 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
       }
       return scopeSearchText(segment).includes(normalizedQuery);
     });
-  }, [enabledFilters, query, uniqueSegments]);
+  }, [activeEnabledFilters, query, uniqueSegments]);
 
   if (uniqueSegments.length === 0) {
     return (
@@ -146,7 +153,7 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
             role="group"
           >
             {availableFilters.map((filter) => {
-              const isEnabled = enabledFilters.has(filter.key);
+              const isEnabled = activeEnabledFilters.has(filter.key);
               return (
                 <button
                   key={filter.key}
@@ -160,15 +167,9 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
                   ].join(" ")}
                   data-testid={`workflow-scope-filter-${filter.key}`}
                   onClick={() => {
-                    setEnabledFilters((current) => {
-                      const next = new Set(current);
-                      if (next.has(filter.key)) {
-                        next.delete(filter.key);
-                      } else {
-                        next.add(filter.key);
-                      }
-                      return next;
-                    });
+                    setEnabledFilters(
+                      toggleWorkflowScopeLayerKey(activeEnabledFilters, filter.key),
+                    );
                   }}
                 >
                   {filter.label}
@@ -245,13 +246,6 @@ function compareWorkflowSegments(activeScopeId: string | null) {
   };
 }
 
-function filterKeyForPosture(posture: ScopeRailPosture): ScopeFilterKey {
-  if (posture === "preserve-only" || posture === "blocked-import") {
-    return "blocked";
-  }
-  return posture;
-}
-
 function normalizeScopeQuery(value: string): string {
   return value.trim().toLocaleLowerCase();
 }

package/src/ui-tailwind/review-workspace/types.ts

@@ -136,6 +136,8 @@ export interface TwReviewWorkspaceProps {
     searchLabel?: string;
     helpLabel?: string;
   };
+  /** Opens the built-in inline find surface from More/Search and command palette. */
+  onOpenInlineFind?: () => void;
   document: ReactNode;
   workspaceMode: WorkspaceMode;
   zoomLevel?: ZoomLevel;

package/src/ui-tailwind/theme/editor-theme.css

@@ -475,19 +475,19 @@
 }
 
 .wre-scope-rail-tint-accent {
-  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
+  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
 }
 .wre-scope-rail-tint-warning {
-  background: color-mix(in srgb, var(--color-warning) 14%, transparent);
+  background: color-mix(in srgb, var(--color-warning) 23%, transparent);
 }
 .wre-scope-rail-tint-insert {
-  background: color-mix(in srgb, var(--color-insert) 12%, transparent);
+  background: color-mix(in srgb, var(--color-insert) 20%, transparent);
 }
 .wre-scope-rail-tint-secondary {
-  background: color-mix(in srgb, var(--color-secondary) 9%, transparent);
+  background: color-mix(in srgb, var(--color-secondary) 16%, transparent);
 }
 .wre-scope-rail-tint-danger {
-  background: color-mix(in srgb, var(--color-danger) 14%, transparent);
+  background: color-mix(in srgb, var(--color-danger) 24%, transparent);
 }
 
 /* §3.7 canonical scope families */
@@ -543,22 +543,22 @@
 /*
  * ─── Scope rail stripe ───
  *
- * The rail stripe is the rest-state representation of a scope: a 4px
+ * The rail stripe is the rest-state representation of a scope: a 6px
  * color stripe in the gutter lane.  Posture color comes from the
  * accent/warning/insert/secondary/danger tokens.  Hover widens the
  * stripe via transform (zero layout cost) and reveals the label pill.
  */
 .wre-scope-rail-stripe {
   position: absolute;
-  width: 4px;
-  border-radius: 2px;
+  width: 6px;
+  border-radius: 999px;
   background: currentColor;
   pointer-events: auto;
   cursor: pointer;
   z-index: 1;
   transform-origin: left center;
   transition: transform 120ms ease-out, opacity 120ms ease-out;
-  opacity: 0.75;
+  opacity: 0.9;
   /* Reset button defaults. */
   border: none;
   padding: 0;
@@ -568,16 +568,22 @@
   background-clip: padding-box;
 }
 
+.wre-scope-rail-stripe::before {
+  content: "";
+  position: absolute;
+  inset: -5px -10px;
+}
+
 .wre-scope-rail-stripe:hover,
 .wre-scope-rail-stripe:focus-visible {
-  transform: scaleX(1.5);
+  transform: scaleX(1.45);
   opacity: 1;
   outline: none;
 }
 
 .wre-scope-rail-stripe-active {
   opacity: 1;
-  transform: scaleX(1.75);
+  transform: scaleX(1.6);
 }
 
 .wre-scope-rail-stripe.wre-scope-rail-label-accent { color: var(--color-accent); }
@@ -623,6 +629,8 @@
   pointer-events: none;
   transition: opacity 140ms ease-out, transform 140ms ease-out;
   transform: translateX(-4px);
+  margin: 0;
+  font-family: inherit;
 }
 
 .wre-scope-rail-stripe:hover + .wre-scope-rail-label,
@@ -692,7 +700,12 @@
 }
 
 .wre-scope-rail-label-active {
-  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, currentColor 42%, transparent),
+    0 8px 22px color-mix(in srgb, currentColor 14%, transparent);
 }
 
 .wre-scope-rail-icon {

package/src/ui-tailwind/toolbar/tw-role-action-region.tsx

@@ -21,7 +21,6 @@ import {
   BookmarkCheck,
   Check,
   CheckCheck,
-  ChevronDown,
   ChevronLeft,
   ChevronRight,
   CircleOff,
@@ -31,6 +30,7 @@ import {
   MessageSquare,
   MessageSquareDot,
   MessageSquareText,
+  MoreHorizontal,
   Rows3,
   SkipForward,
   Target,
@@ -185,6 +185,15 @@ function isRoleActionRenderable(
     case "review-accept-all":
     case "review-reject-all":
       return reviewQueueTotal > 0;
+    case "workflow-prev":
+    case "workflow-next":
+    case "workflow-mark-complete":
+    case "workflow-claim":
+    case "workflow-skip":
+    case "workflow-mark-blocked":
+      return props.workflowItem !== undefined;
+    case "workflow-jump-to-scope":
+      return props.workflowItem !== undefined || props.onWorkflowJumpToScope !== undefined;
     default:
       return true;
   }
@@ -433,11 +442,11 @@ function RoleActionOverflow({
           aria-label="More role actions"
           aria-expanded={open}
           onMouseDown={preserveEditorSelectionMouseDown}
-          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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas"
+          title="More role actions"
+          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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas"
           data-testid="role-action-overflow-trigger"
         >
-          More
-          <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
+          <MoreHorizontal className="h-3.5 w-3.5 text-tertiary" aria-hidden="true" />
         </button>
       </Popover.Trigger>
       <Popover.Portal>

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

@@ -70,7 +70,6 @@ import {
 } from "../../ui/headless/scoped-chrome-policy";
 import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
 import { type MarkupDisplayMode } from "./tw-role-action-region";
-import { TwDetachHandle } from "../chrome/tw-detach-handle";
 import { TwToolbarIconButton } from "./tw-toolbar-icon-button";
 
 export interface TwToolbarProps {
@@ -155,9 +154,9 @@ export interface TwToolbarProps {
   onReviewNext?: () => void;
   onReviewAccept?: () => void;
   onReviewReject?: () => void;
-  /** Current chrome pin state; when supplied enables the topnav detach handle. */
+  /** Current chrome pin state, retained for host compatibility. */
   chromePins?: ChromePinsState;
-  /** Called when the user detaches or re-attaches the topnav. */
+  /** Called when a host-supported chrome surface changes placement. */
   onChromePinChange?: (surface: ChromePinSurface, pin: PinState | null) => void;
 
   /**
@@ -255,7 +254,8 @@ export function TwToolbar(props: TwToolbarProps) {
   });
   const showStyleSelectors = isToolbarChromeItemVisible(scopedChromePolicy, "text-style-selectors");
   const showInlineFormatting = isToolbarChromeItemVisible(scopedChromePolicy, "inline-formatting");
-  const showAdvancedFormatting = preset === "advanced" && showInlineFormatting;
+  const showAdvancedFormatting =
+    showInlineFormatting && (preset === "advanced" || props.role === "editor");
   const showTextColors = isToolbarChromeItemVisible(scopedChromePolicy, "text-colors");
   const showParagraphAlignment = isToolbarChromeItemVisible(scopedChromePolicy, "paragraph-alignment");
   const showInsertMenu = isToolbarChromeItemVisible(scopedChromePolicy, "insert-actions");
@@ -891,14 +891,6 @@ export function TwToolbar(props: TwToolbarProps) {
           />
         ) : null}
 
-        {props.onChromePinChange ? (
-          <TwDetachHandle
-            surface="topnav"
-            pin={props.chromePins?.topnav}
-            onChange={props.onChromePinChange}
-            label="Detach toolbar"
-          />
-        ) : null}
       </div>
     </header>
   );
@@ -1158,10 +1150,9 @@ function ToolbarCompactOverflow(props: {
             aria-expanded={open}
             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}`}
+            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}`}
           >
-            More
-            <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
+            <MoreHorizontal className="h-3.5 w-3.5" />
           </button>
         </Tooltip.Trigger>
         <Tooltip.Portal>