@beyondwork/docx-react-component 1.0.36 → 1.0.38

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

@@ -43,11 +43,14 @@ import {
 import type {
   ActiveListContext,
   CompatibilityPanelSnapshot,
+  EditorRole,
   EditorStoryTarget,
   EditorWarning,
   FormattingStateSnapshot,
   FormattingAlignment,
   InsertImageOptions,
+  ReviewQueueSnapshot,
+  ScopeRailPosture,
   SectionBreakType,
   StyleCatalogSnapshot,
   WorkflowBlockedCommandReason,
@@ -56,9 +59,19 @@ import type {
   ZoomLevel,
 } from "../../api/public-types";
 import type { SessionCapabilities } from "../../runtime/session-capabilities";
+import {
+  getToolbarChromePlacement,
+  isToolbarChromeItemVisible,
+  resolveScopedChromePolicy,
+  type ScopedChromePolicy,
+} from "../../ui/headless/scoped-chrome-policy";
 import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
 import { TwHealthPanel } from "../review/tw-health-panel";
-import { resolveToolbarLayoutModel } from "./toolbar-layout";
+import {
+  TwRoleActionRegion,
+  type MarkupDisplayMode,
+  type WorkflowWorkItemSnapshot,
+} from "./tw-role-action-region";
 import { TwToolbarIconButton } from "./tw-toolbar-icon-button";
 
 export interface TwToolbarProps {
@@ -68,6 +81,7 @@ export interface TwToolbarProps {
   blockedReasons?: WorkflowBlockedCommandReason[];
   showDiagnosticsChrome?: boolean;
   interactionPolicy?: ToolbarInteractionPolicy;
+  scopedChromePolicy?: ScopedChromePolicy;
   preset?: WordReviewEditorChromePreset;
   compactMode?: boolean;
   workspaceMode: WorkspaceMode;
@@ -115,6 +129,39 @@ export interface TwToolbarProps {
   onContinueNumbering?: () => void;
   onUpdateFields?: () => void;
   onUpdateTableOfContents?: () => void;
+
+  // ───── R1: role-scoped inline action region (spec §6.4) ──────────────
+  /**
+   * Active editor role.  When supplied, the toolbar renders the inline
+   * `TwRoleActionRegion` between the left formatting cluster and the
+   * right view cluster.  Omit to keep the pre-R1 layout.
+   */
+  role?: EditorRole;
+  /** Review-queue snapshot for the review role's inline prev/next/counts. */
+  reviewQueue?: ReviewQueueSnapshot;
+  /** Active work item for the workflow role's inline queue. */
+  workflowItem?: WorkflowWorkItemSnapshot | null;
+  /** Markup display mode for the review role. */
+  markupDisplay?: MarkupDisplayMode;
+
+  // Editor role
+  onMarkScopePosture?: (posture: ScopeRailPosture) => void;
+  // Review role
+  onReviewPrev?: () => void;
+  onReviewNext?: () => void;
+  onReviewAccept?: () => void;
+  onReviewReject?: () => void;
+  onReviewAcceptAll?: () => void;
+  onReviewRejectAll?: () => void;
+  onReviewMarkupMode?: (mode: MarkupDisplayMode) => void;
+  // Workflow role
+  onWorkflowPrev?: () => void;
+  onWorkflowNext?: () => void;
+  onWorkflowMarkComplete?: () => void;
+  onWorkflowClaim?: () => void;
+  onWorkflowSkip?: () => void;
+  onWorkflowMarkBlocked?: () => void;
+  onWorkflowJumpToScope?: () => void;
 }
 
 export interface ToolbarInteractionPolicy {
@@ -152,27 +199,56 @@ export function TwToolbar(props: TwToolbarProps) {
   const canEdit = props.interactionPolicy?.canFormatText ?? (caps ? caps.canEdit : false);
   const canInsertStructural = props.interactionPolicy?.canInsertStructural ?? canEdit;
   const canAddComment = props.interactionPolicy?.canAddComment ?? (caps ? caps.canAddComment : false);
-  const showStyleSelectors = preset === "advanced";
-  const showAdvancedFormatting = preset === "advanced";
-  const showFormattingColors = preset !== "review";
-  const showInsertMenu = preset === "simple" || preset === "advanced";
-  const showTrackedChangesToggle = preset !== "simple";
   const showDiagnosticsChrome = props.showDiagnosticsChrome ?? true;
-  const showHealth = showDiagnosticsChrome && Boolean(props.compatibility && props.warnings);
-  const showListActions = preset === "simple" || preset === "advanced";
-  const showUpdateActions = preset === "advanced";
-  const showSidebarToggle = props.showSidebarToggle ?? false;
-  const layoutModel = resolveToolbarLayoutModel({
-    compactMode: isCompact,
+  const scopedChromePolicy = props.scopedChromePolicy ?? resolveScopedChromePolicy({
     preset,
-    hasActiveListContext: Boolean(props.activeListContext),
+    compactMode: isCompact,
+    capabilities: caps,
+    interactionGuardSnapshot: props.interactionPolicy
+      ? ({
+          effectiveMode: props.interactionPolicy.mode,
+          blockedReasons: props.blockedReasons ?? [],
+        } as any)
+      : undefined,
+    activeListContext: props.activeListContext,
+    ...(props.role ? { role: props.role } : {}),
   });
+  const showStyleSelectors = isToolbarChromeItemVisible(scopedChromePolicy, "text-style-selectors");
+  const showInlineFormatting = isToolbarChromeItemVisible(scopedChromePolicy, "inline-formatting");
+  const showAdvancedFormatting = preset === "advanced" && showInlineFormatting;
+  const showTextColors = isToolbarChromeItemVisible(scopedChromePolicy, "text-colors");
+  const showParagraphAlignment = isToolbarChromeItemVisible(scopedChromePolicy, "paragraph-alignment");
+  const showInsertMenu = isToolbarChromeItemVisible(scopedChromePolicy, "insert-actions");
+  const showTrackedChangesToggle = isToolbarChromeItemVisible(scopedChromePolicy, "tracked-changes-toggle");
+  const showHealth =
+    showDiagnosticsChrome &&
+    isToolbarChromeItemVisible(scopedChromePolicy, "health") &&
+    Boolean(props.compatibility && props.warnings);
+  const showListActions = isToolbarChromeItemVisible(scopedChromePolicy, "list-actions");
+  const showUpdateActions = isToolbarChromeItemVisible(scopedChromePolicy, "update-actions");
+  const showSidebarToggle =
+    (props.showSidebarToggle ?? false) &&
+    isToolbarChromeItemVisible(scopedChromePolicy, "sidebar-toggle");
+  const showStyleSelectorsInRow = getToolbarChromePlacement(scopedChromePolicy, "text-style-selectors") === "inline";
+  const showListActionsInRow = getToolbarChromePlacement(scopedChromePolicy, "list-actions") === "inline";
+  const showSpacingActionsInRow = getToolbarChromePlacement(scopedChromePolicy, "indentation") === "inline";
+  const showListContinuationInRow =
+    getToolbarChromePlacement(scopedChromePolicy, "list-continuation") === "inline";
+  const showInsertActionsInRow = getToolbarChromePlacement(scopedChromePolicy, "insert-actions") === "inline";
+  const showUpdateActionsInRow = getToolbarChromePlacement(scopedChromePolicy, "update-actions") === "inline";
+  const showCompactOverflow =
+    getToolbarChromePlacement(scopedChromePolicy, "text-style-selectors") === "overflow" ||
+    getToolbarChromePlacement(scopedChromePolicy, "list-actions") === "overflow" ||
+    getToolbarChromePlacement(scopedChromePolicy, "indentation") === "overflow" ||
+    getToolbarChromePlacement(scopedChromePolicy, "list-continuation") === "overflow" ||
+    getToolbarChromePlacement(scopedChromePolicy, "insert-actions") === "overflow" ||
+    getToolbarChromePlacement(scopedChromePolicy, "update-actions") === "overflow";
   const showPostFormattingDivider =
-    layoutModel.showListActionsInRow ||
-    layoutModel.showSpacingActionsInRow ||
-    (showInsertMenu && layoutModel.showInsertActionsInRow) ||
-    (showUpdateActions && layoutModel.showUpdateActionsInRow) ||
-    layoutModel.showCompactOverflow;
+    showListActionsInRow ||
+    showSpacingActionsInRow ||
+    showInsertActionsInRow ||
+    showUpdateActionsInRow ||
+    showCompactOverflow;
   const zoomLabel =
     typeof zoomLevel === "number"
       ? `${zoomLevel}%`
@@ -185,8 +261,8 @@ export function TwToolbar(props: TwToolbarProps) {
       className={[
         "shrink-0 rounded-xl border border-border/70 bg-canvas/92 px-2.5 shadow-[0_8px_20px_-18px_var(--color-shadow-strong)] backdrop-blur-sm",
         isCompact
-          ? "flex min-h-11 flex-wrap items-center gap-1.5 py-2"
-          : "flex h-11 items-center gap-1",
+          ? "flex min-h-10 flex-wrap items-center gap-1.5 py-1.5"
+          : "flex h-10 items-center gap-1",
       ].join(" ")}
     >
       {/* Left cluster: undo/redo + formatting */}
@@ -205,7 +281,7 @@ export function TwToolbar(props: TwToolbarProps) {
         />
         <div className="mx-1 h-4 w-px bg-border" />
 
-        {showStyleSelectors && layoutModel.showStyleSelectorsInRow ? (
+        {showStyleSelectors && showStyleSelectorsInRow ? (
           <>
             <ToolbarParagraphStyleSelect
               disabled={!canEdit || paragraphStyles.length === 0 || !props.onSetParagraphStyle}
@@ -229,69 +305,79 @@ export function TwToolbar(props: TwToolbarProps) {
           </>
         ) : null}
 
-        <TwToolbarIconButton
-          icon={Bold}
-          label="Bold"
-          active={props.formattingState?.bold ?? false}
-          disabled={!canEdit}
-          onClick={props.onToggleBold}
-        />
-        <TwToolbarIconButton
-          icon={Italic}
-          label="Italic"
-          active={props.formattingState?.italic ?? false}
-          disabled={!canEdit}
-          onClick={props.onToggleItalic}
-        />
-        <TwToolbarIconButton
-          icon={Underline}
-          label="Underline"
-          active={props.formattingState?.underline ?? false}
-          disabled={!canEdit}
-          onClick={props.onToggleUnderline}
-        />
-        {showAdvancedFormatting ? (
-          <ToolbarFormattingOverflow
-            disabled={!canEdit}
-            formattingState={props.formattingState}
-            onToggleStrikethrough={props.onToggleStrikethrough}
-            onToggleSuperscript={props.onToggleSuperscript}
-            onToggleSubscript={props.onToggleSubscript}
-          />
-        ) : null}
-        {showFormattingColors ? (
+        {showInlineFormatting ? (
           <>
-            <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"
+            <TwToolbarIconButton
+              icon={Bold}
+              label="Bold"
+              active={props.formattingState?.bold ?? false}
+              disabled={!canEdit}
+              onClick={props.onToggleBold}
             />
-            <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"
+            <TwToolbarIconButton
+              icon={Italic}
+              label="Italic"
+              active={props.formattingState?.italic ?? false}
+              disabled={!canEdit}
+              onClick={props.onToggleItalic}
             />
-            <ToolbarAlignmentPopover
-              activeAlignment={props.formattingState?.alignment}
-              disabled={!canEdit || !props.onSetAlignment}
-              onSelect={(alignment) => props.onSetAlignment?.(alignment)}
+            <TwToolbarIconButton
+              icon={Underline}
+              label="Underline"
+              active={props.formattingState?.underline ?? false}
+              disabled={!canEdit}
+              onClick={props.onToggleUnderline}
             />
+            {showAdvancedFormatting ? (
+              <ToolbarFormattingOverflow
+                disabled={!canEdit}
+                formattingState={props.formattingState}
+                onToggleStrikethrough={props.onToggleStrikethrough}
+                onToggleSuperscript={props.onToggleSuperscript}
+                onToggleSubscript={props.onToggleSubscript}
+              />
+            ) : null}
+          </>
+        ) : null}
+        {showTextColors || showParagraphAlignment ? (
+          <>
+            {showTextColors ? (
+              <>
+                <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"
+                />
+              </>
+            ) : null}
+            {showParagraphAlignment ? (
+              <ToolbarAlignmentPopover
+                activeAlignment={props.formattingState?.alignment}
+                disabled={!canEdit || !props.onSetAlignment}
+                onSelect={(alignment) => props.onSetAlignment?.(alignment)}
+              />
+            ) : null}
           </>
         ) : null}
 
         {showPostFormattingDivider ? <div className="mx-1 h-4 w-px bg-border" /> : null}
 
-        {showListActions && layoutModel.showListActionsInRow ? (
+        {showListActions && showListActionsInRow ? (
           <>
             <TwToolbarIconButton
               icon={List}
@@ -309,7 +395,7 @@ export function TwToolbar(props: TwToolbarProps) {
             />
           </>
         ) : null}
-        {layoutModel.showSpacingActionsInRow ? (
+        {showSpacingActionsInRow ? (
           <>
             <TwToolbarIconButton
               icon={Outdent}
@@ -325,7 +411,7 @@ export function TwToolbar(props: TwToolbarProps) {
             />
           </>
         ) : null}
-        {layoutModel.showListContinuationInRow ? (
+        {showListContinuationInRow ? (
           <>
             <button
               type="button"
@@ -333,7 +419,7 @@ export function TwToolbar(props: TwToolbarProps) {
               disabled={!canEdit || !props.onRestartNumbering}
               onMouseDown={preserveEditorSelectionMouseDown}
               onClick={props.onRestartNumbering}
-              className={`inline-flex h-7 items-center rounded-md px-2 text-xs font-medium text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+              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>
@@ -343,13 +429,13 @@ export function TwToolbar(props: TwToolbarProps) {
               disabled={!canEdit || !props.onContinueNumbering}
               onMouseDown={preserveEditorSelectionMouseDown}
               onClick={props.onContinueNumbering}
-              className={`inline-flex h-7 items-center rounded-md px-2 text-xs font-medium text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+              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>
           </>
         ) : null}
-        {showInsertMenu && layoutModel.showInsertActionsInRow ? (
+        {showInsertMenu && showInsertActionsInRow ? (
           <ToolbarInsertMenu
             disabled={!canInsertStructural}
             onInsertImage={props.onInsertImage}
@@ -358,7 +444,7 @@ export function TwToolbar(props: TwToolbarProps) {
             onInsertTable={props.onInsertTable}
           />
         ) : null}
-        {showUpdateActions && layoutModel.showUpdateActionsInRow ? (
+        {showUpdateActions && showUpdateActionsInRow ? (
           <>
             <button
               type="button"
@@ -366,7 +452,7 @@ export function TwToolbar(props: TwToolbarProps) {
               disabled={!canEdit || !props.onUpdateFields}
               onMouseDown={preserveEditorSelectionMouseDown}
               onClick={props.onUpdateFields}
-              className={`inline-flex h-7 items-center rounded-md px-2 text-xs font-medium text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+              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>
@@ -376,23 +462,25 @@ export function TwToolbar(props: TwToolbarProps) {
               disabled={!canEdit || !props.onUpdateTableOfContents}
               onMouseDown={preserveEditorSelectionMouseDown}
               onClick={props.onUpdateTableOfContents}
-              className={`inline-flex h-7 items-center rounded-md px-2 text-xs font-medium text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+              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>
           </>
         ) : null}
-        {layoutModel.showCompactOverflow ? (
+        {showCompactOverflow ? (
           <ToolbarCompactOverflow
             activeListContext={props.activeListContext}
             canEdit={canEdit}
             canInsertStructural={canInsertStructural}
             formattingState={props.formattingState}
             paragraphStyles={paragraphStyles}
-            showInsertMenu={showInsertMenu}
-            showListActions={showListActions}
-            showStyleSelectors={showStyleSelectors}
-            showUpdateActions={showUpdateActions}
+            showInsertMenu={getToolbarChromePlacement(scopedChromePolicy, "insert-actions") === "overflow"}
+            showListActions={getToolbarChromePlacement(scopedChromePolicy, "list-actions") === "overflow"}
+            showParagraphActions={getToolbarChromePlacement(scopedChromePolicy, "indentation") === "overflow"}
+            showListContinuation={getToolbarChromePlacement(scopedChromePolicy, "list-continuation") === "overflow"}
+            showStyleSelectors={getToolbarChromePlacement(scopedChromePolicy, "text-style-selectors") === "overflow"}
+            showUpdateActions={getToolbarChromePlacement(scopedChromePolicy, "update-actions") === "overflow"}
             onSetParagraphStyle={props.onSetParagraphStyle}
             onSetFontFamily={props.onSetFontFamily}
             onSetFontSize={props.onSetFontSize}
@@ -412,14 +500,15 @@ export function TwToolbar(props: TwToolbarProps) {
         ) : null}
 
         {/* Story focus breadcrumb — visible when editing a secondary story */}
-        {props.activeStory && props.activeStory.kind !== "main" ? (
+        {props.activeStory && props.activeStory.kind !== "main" &&
+        isToolbarChromeItemVisible(scopedChromePolicy, "story-breadcrumb") ? (
           <>
             <div className="mx-1 h-4 w-px bg-border" />
             <button
               type="button"
               onClick={props.onCloseStory}
               onMouseDown={preserveEditorSelectionMouseDown}
-              className={`inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium text-accent hover:bg-surface transition-colors outline-none ${focusRingClass}`}
+              className={`inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] font-medium text-accent hover:bg-surface transition-colors outline-none ${focusRingClass}`}
               aria-label={`Editing ${storyLabel(props.activeStory)} — click to return to main body`}
             >
               <span className="text-secondary">&larr;</span>
@@ -429,8 +518,43 @@ export function TwToolbar(props: TwToolbarProps) {
         ) : null}
       </div>
 
+      {/* R1: role-scoped inline action region (spec §6.4) */}
+      {props.role ? (
+        <TwRoleActionRegion
+          role={props.role}
+          policy={scopedChromePolicy}
+          compactMode={isCompact}
+          reviewQueue={props.reviewQueue}
+          workflowItem={props.workflowItem}
+          markupDisplay={props.markupDisplay}
+          onMarkScopePosture={props.onMarkScopePosture}
+          onReviewPrev={props.onReviewPrev}
+          onReviewNext={props.onReviewNext}
+          onReviewAccept={props.onReviewAccept}
+          onReviewReject={props.onReviewReject}
+          onReviewAcceptAll={props.onReviewAcceptAll}
+          onReviewRejectAll={props.onReviewRejectAll}
+          onReviewMarkupMode={props.onReviewMarkupMode}
+          onWorkflowPrev={props.onWorkflowPrev}
+          onWorkflowNext={props.onWorkflowNext}
+          onWorkflowMarkComplete={props.onWorkflowMarkComplete}
+          onWorkflowClaim={props.onWorkflowClaim}
+          onWorkflowSkip={props.onWorkflowSkip}
+          onWorkflowMarkBlocked={props.onWorkflowMarkBlocked}
+          onWorkflowJumpToScope={props.onWorkflowJumpToScope}
+        />
+      ) : null}
+
       {/* Right cluster: comment, track changes, markup, view, export */}
       <div className={`flex items-center gap-0.5 ${isCompact ? "ml-auto flex-wrap justify-end" : ""}`}>
+        {scopedChromePolicy.scopeStatusLabel ? (
+          <>
+            <span className="inline-flex h-6 items-center rounded-full bg-surface px-2 text-[10px] font-medium text-secondary ring-1 ring-border/50">
+              {scopedChromePolicy.scopeStatusLabel}
+            </span>
+            <div className="mx-1 h-4 w-px bg-border" />
+          </>
+        ) : null}
         {showSidebarToggle ? (
           <>
             <TwToolbarIconButton
@@ -443,13 +567,15 @@ export function TwToolbar(props: TwToolbarProps) {
           </>
         ) : null}
 
-        <TwToolbarIconButton
-          icon={MessageSquare}
-          label="Add comment"
-          disabled={!canAddComment}
-          emphasis
-          onClick={props.onAddComment}
-        />
+        {isToolbarChromeItemVisible(scopedChromePolicy, "comment") ? (
+          <TwToolbarIconButton
+            icon={MessageSquare}
+            label="Add comment"
+            disabled={!canAddComment}
+            emphasis
+            onClick={props.onAddComment}
+          />
+        ) : null}
 
         {showTrackedChangesToggle ? (
           <>
@@ -460,9 +586,9 @@ export function TwToolbar(props: TwToolbarProps) {
                   onPressedChange={props.onShowTrackedChangesChange}
                   disabled={caps ? !caps.trackChangesSupported : false}
                   onMouseDown={preserveEditorSelectionMouseDown}
-                  className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-canvas data-[state=on]:text-accent data-[state=on]:ring-1 data-[state=on]:ring-accent/30 data-[state=on]:shadow-sm outline-none disabled:opacity-40 ${focusRingClass}`}
+                  className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-canvas data-[state=on]:text-accent data-[state=on]:ring-1 data-[state=on]:ring-accent/30 data-[state=on]:shadow-sm outline-none disabled:opacity-40 ${focusRingClass}`}
                 >
-                  {props.showTrackedChanges ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />}
+                  {props.showTrackedChanges ? <Eye className="h-3.5 w-3.5" /> : <EyeOff className="h-3.5 w-3.5" />}
                 </Toggle.Root>
               </Tooltip.Trigger>
               <Tooltip.Portal>
@@ -480,21 +606,22 @@ export function TwToolbar(props: TwToolbarProps) {
         ) : null}
 
         {/* View mode toggle group: Canvas (clean, flowing) / Page (layout-sensitive) */}
-        <ToggleGroup.Root
-          type="single"
-          value={workspaceMode}
-          onValueChange={(v: string) => {
-            if (v) props.onWorkspaceModeChange(v as WorkspaceMode);
-          }}
-          className="flex items-center gap-0.5"
-        >
+        {isToolbarChromeItemVisible(scopedChromePolicy, "workspace-mode") ? (
+          <ToggleGroup.Root
+            type="single"
+            value={workspaceMode}
+            onValueChange={(v: string) => {
+              if (v) props.onWorkspaceModeChange(v as WorkspaceMode);
+            }}
+            className="flex items-center gap-0.5"
+          >
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
               <ToggleGroup.Item
                 value="canvas"
                 aria-label="Canvas workspace"
                 onMouseDown={preserveEditorSelectionMouseDown}
-                className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-canvas data-[state=on]:text-accent data-[state=on]:ring-1 data-[state=on]:ring-accent/30 data-[state=on]:shadow-sm outline-none ${focusRingClass}`}
+                className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-canvas data-[state=on]:text-accent data-[state=on]:ring-1 data-[state=on]:ring-accent/30 data-[state=on]:shadow-sm outline-none ${focusRingClass}`}
               >
                 <Monitor className="h-3.5 w-3.5" />
               </ToggleGroup.Item>
@@ -511,7 +638,7 @@ export function TwToolbar(props: TwToolbarProps) {
                 value="page"
                 aria-label="Page workspace"
                 onMouseDown={preserveEditorSelectionMouseDown}
-                className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-canvas data-[state=on]:text-accent data-[state=on]:ring-1 data-[state=on]:ring-accent/30 data-[state=on]:shadow-sm outline-none ${focusRingClass}`}
+                className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-canvas data-[state=on]:text-accent data-[state=on]:ring-1 data-[state=on]:ring-accent/30 data-[state=on]:shadow-sm outline-none ${focusRingClass}`}
               >
                 <FileText className="h-3.5 w-3.5" />
               </ToggleGroup.Item>
@@ -522,10 +649,11 @@ export function TwToolbar(props: TwToolbarProps) {
               </Tooltip.Content>
             </Tooltip.Portal>
           </Tooltip.Root>
-        </ToggleGroup.Root>
+          </ToggleGroup.Root>
+        ) : null}
 
         {/* Zoom controls — available in all workspace modes */}
-        {props.onZoomChange ? (
+        {isToolbarChromeItemVisible(scopedChromePolicy, "zoom") && props.onZoomChange ? (
           <>
             <div className="mx-1 h-4 w-px bg-border" />
             <div className="flex items-center gap-0.5">
@@ -534,7 +662,7 @@ export function TwToolbar(props: TwToolbarProps) {
                   <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}`}
+                    className={`inline-flex h-6 w-6 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={() => {
@@ -560,7 +688,7 @@ export function TwToolbar(props: TwToolbarProps) {
                         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}`}
+                        className={`inline-flex h-6 items-center justify-center rounded-md px-1.5 text-[10px] font-medium text-secondary transition-colors hover:bg-surface outline-none ${focusRingClass}`}
                       >
                         {zoomLabel}
                       </button>
@@ -604,7 +732,7 @@ export function TwToolbar(props: TwToolbarProps) {
                   <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}`}
+                    className={`inline-flex h-6 w-6 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={() => {
@@ -635,9 +763,9 @@ export function TwToolbar(props: TwToolbarProps) {
                       type="button"
                       aria-label="Document health"
                       onMouseDown={preserveEditorSelectionMouseDown}
-                      className={`relative inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface hover:text-primary outline-none ${focusRingClass}`}
+                      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-4 w-4" />
+                      <AlertCircle className="h-3.5 w-3.5" />
                       {(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}
@@ -672,13 +800,15 @@ export function TwToolbar(props: TwToolbarProps) {
           </>
         ) : null}
 
-        <TwToolbarIconButton
-          icon={Download}
-          label={caps?.exportBlocked ? "Export blocked" : "Download document"}
-          disabled={caps ? !caps.canExport : true}
-          emphasis
-          onClick={props.onExport}
-        />
+        {isToolbarChromeItemVisible(scopedChromePolicy, "export") ? (
+          <TwToolbarIconButton
+            icon={Download}
+            label={caps?.exportBlocked ? "Export blocked" : "Download document"}
+            disabled={caps ? !caps.canExport : true}
+            emphasis
+            onClick={props.onExport}
+          />
+        ) : null}
       </div>
     </header>
   );
@@ -706,7 +836,7 @@ function ToolbarParagraphStyleSelect(props: {
         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}`}
+        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}`}
       >
         <Select.Value placeholder="Style" />
         <Select.Icon>
@@ -723,7 +853,7 @@ function ToolbarParagraphStyleSelect(props: {
           <Select.Viewport className="p-1">
             {props.styles.map((style) => (
               <Select.Item
-                className={`flex cursor-pointer items-center rounded-md px-2.5 py-1.5 text-xs text-primary outline-none data-[highlighted]:bg-surface data-[state=checked]:bg-canvas data-[state=checked]:text-accent data-[state=checked]:ring-1 data-[state=checked]:ring-accent/20 ${focusRingClass}`}
+                className={`flex cursor-pointer items-center rounded-md px-2 py-1 text-[11px] text-primary outline-none data-[highlighted]:bg-surface data-[state=checked]:bg-canvas data-[state=checked]:text-accent data-[state=checked]:ring-1 data-[state=checked]:ring-accent/20 ${focusRingClass}`}
                 key={style.styleId}
                 value={style.styleId}
               >
@@ -755,7 +885,7 @@ function ToolbarFontFamilySelect(props: {
         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}`}
+        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}`}
       >
         <Select.Value placeholder="Font" />
         <Select.Icon>
@@ -772,7 +902,7 @@ function ToolbarFontFamilySelect(props: {
           <Select.Viewport className="p-1">
             {FONT_FAMILIES.map((font) => (
               <Select.Item
-                className={`flex cursor-pointer items-center rounded-md px-2.5 py-1.5 text-xs text-primary outline-none data-[highlighted]:bg-surface data-[state=checked]:bg-canvas data-[state=checked]:text-accent data-[state=checked]:ring-1 data-[state=checked]:ring-accent/20 ${focusRingClass}`}
+                className={`flex cursor-pointer items-center rounded-md px-2 py-1 text-[11px] text-primary outline-none data-[highlighted]:bg-surface data-[state=checked]:bg-canvas data-[state=checked]:text-accent data-[state=checked]:ring-1 data-[state=checked]:ring-accent/20 ${focusRingClass}`}
                 key={font}
                 value={font}
               >
@@ -805,7 +935,7 @@ function ToolbarFontSizeSelect(props: {
         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}`}
+        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}`}
       >
         <Select.Value placeholder="Size" />
         <Select.Icon>
@@ -822,7 +952,7 @@ function ToolbarFontSizeSelect(props: {
           <Select.Viewport className="p-1">
             {FONT_SIZES.map((size) => (
               <Select.Item
-                className={`flex cursor-pointer items-center rounded-md px-2.5 py-1.5 text-xs text-primary outline-none data-[highlighted]:bg-surface data-[state=checked]:bg-canvas data-[state=checked]:text-accent data-[state=checked]:ring-1 data-[state=checked]:ring-accent/20 ${focusRingClass}`}
+                className={`flex cursor-pointer items-center rounded-md px-2 py-1 text-[11px] text-primary outline-none data-[highlighted]:bg-surface data-[state=checked]:bg-canvas data-[state=checked]:text-accent data-[state=checked]:ring-1 data-[state=checked]:ring-accent/20 ${focusRingClass}`}
                 key={size}
                 value={String(size)}
               >
@@ -844,6 +974,8 @@ function ToolbarCompactOverflow(props: {
   paragraphStyles: StyleCatalogSnapshot["paragraphs"];
   showInsertMenu: boolean;
   showListActions: boolean;
+  showParagraphActions: boolean;
+  showListContinuation: boolean;
   showStyleSelectors: boolean;
   showUpdateActions: boolean;
   onSetParagraphStyle?: (styleId: string) => void;
@@ -891,7 +1023,7 @@ function ToolbarCompactOverflow(props: {
             aria-expanded={open}
             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 ${focusRingClass}`}
+            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}`}
           >
             More
             <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
@@ -971,31 +1103,36 @@ function ToolbarCompactOverflow(props: {
               </div>
             ) : null}
 
-            <div className="space-y-1">
-              <div className="px-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
-                Paragraph
-              </div>
-              <ToolbarMenuButton
-                ariaLabel="Outdent"
-                disabled={!props.canEdit || !props.onOutdent}
-                icon={<Outdent className="h-3.5 w-3.5" />}
-                label="Outdent"
-                onClick={() => {
-                  props.onOutdent?.();
-                  setOpen(false);
-                }}
-              />
-              <ToolbarMenuButton
-                ariaLabel="Indent"
-                disabled={!props.canEdit || !props.onIndent}
-                icon={<Indent className="h-3.5 w-3.5" />}
-                label="Indent"
-                onClick={() => {
-                  props.onIndent?.();
-                  setOpen(false);
-                }}
-              />
-              {props.activeListContext ? (
+            {props.showParagraphActions || (props.showListContinuation && props.activeListContext) ? (
+              <div className="space-y-1">
+                <div className="px-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+                  Paragraph
+                </div>
+                {props.showParagraphActions ? (
+                  <>
+                    <ToolbarMenuButton
+                      ariaLabel="Outdent"
+                      disabled={!props.canEdit || !props.onOutdent}
+                      icon={<Outdent className="h-3.5 w-3.5" />}
+                      label="Outdent"
+                      onClick={() => {
+                        props.onOutdent?.();
+                        setOpen(false);
+                      }}
+                    />
+                    <ToolbarMenuButton
+                      ariaLabel="Indent"
+                      disabled={!props.canEdit || !props.onIndent}
+                      icon={<Indent className="h-3.5 w-3.5" />}
+                      label="Indent"
+                      onClick={() => {
+                        props.onIndent?.();
+                        setOpen(false);
+                      }}
+                    />
+                  </>
+                ) : null}
+                {props.showListContinuation && props.activeListContext ? (
                 <>
                   <ToolbarMenuButton
                     ariaLabel="Restart numbering"
@@ -1018,8 +1155,9 @@ function ToolbarCompactOverflow(props: {
                     }}
                   />
                 </>
-              ) : null}
-            </div>
+                ) : null}
+              </div>
+            ) : null}
 
             {props.showInsertMenu ? (
               <div className="space-y-1">
@@ -1047,7 +1185,7 @@ function ToolbarCompactOverflow(props: {
                   }}
                 />
                 <label
-                  className={`flex h-8 cursor-pointer items-center gap-2 rounded-md px-2 text-left text-xs font-medium text-primary transition-colors hover:bg-surface ${
+                  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 ${
                     !props.canInsertStructural || !props.onInsertImage ? "pointer-events-none opacity-40" : ""
                   }`}
                 >
@@ -1131,7 +1269,7 @@ function ToolbarFormattingOverflow(props: {
             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}`}
+            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>
@@ -1206,7 +1344,7 @@ function ToolbarColorPopover(props: {
             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}`}
+            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>
@@ -1234,7 +1372,7 @@ function ToolbarColorPopover(props: {
                   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 ${
+                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}
@@ -1273,7 +1411,7 @@ function ToolbarAlignmentPopover(props: {
             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}`}
+            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>
@@ -1346,7 +1484,7 @@ function ToolbarInsertMenu(props: {
             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}`}
+            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 ${focusRingClass}`}
           >
             Insert
             <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
@@ -1382,7 +1520,7 @@ function ToolbarInsertMenu(props: {
               }}
             />
             <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 ${
+              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" : ""
               }`}
             >
@@ -1431,7 +1569,7 @@ function ToolbarPopoverActionButton(props: {
       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 ${
+      className={`inline-flex h-7 items-center justify-center rounded-md border border-border transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${
         props.active ? "bg-canvas text-accent ring-1 ring-accent/30 shadow-sm" : "bg-canvas text-secondary hover:bg-surface"
       } ${focusRingClass}`}
     >
@@ -1454,7 +1592,7 @@ function ToolbarMenuButton(props: {
       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}`}
+      className={`flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-[11px] 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>