@beyondwork/docx-react-component 1.0.89 → 1.0.91

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beyondwork/docx-react-component",
   "publisher": "beyondwork",
-  "version": "1.0.89",
+  "version": "1.0.91",
   "description": "Embeddable React Word (docx) editor with review, comments, tracked changes, and round-trip OOXML fidelity.",
   "type": "module",
   "sideEffects": [

package/src/ui-tailwind/chrome-overlay/tw-chrome-overlay.tsx

@@ -14,7 +14,7 @@
 
 import * as React from "react";
 import type { OverlayCoordinateSpace } from "./chrome-overlay-projector";
-import type { ScopeRailPosture, ScopeRailSegment } from "../../api/public-types.ts";
+import type { ScopeRailSegment } from "../../api/public-types.ts";
 import type {
   EditorRole,
   EditorStoryTarget,
@@ -49,8 +49,6 @@ export interface TwChromeOverlayProps {
   space?: OverlayCoordinateSpace;
   /** Active scope id (for emphasis + rail tab sync). */
   activeScopeId?: string | null;
-  /** Posture filters shared with the Workflow rail. Omitted means all scopes render. */
-  visibleScopePostures?: ReadonlySet<ScopeRailPosture>;
   /**
    * Click handler fired when the user clicks a scope rail stripe.
    * P0 wires this to open the scope card (P1 ships the card layer).
@@ -215,7 +213,6 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
   geometryFacet,
   space,
   activeScopeId,
-  visibleScopePostures,
   onScopeStripeClick,
   onScopeSegmentClick,
   onScopeCardClose,
@@ -245,17 +242,6 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
   mediaPreviews,
   activeBandRibbonProps,
 }) => {
-  const visibleScopeIds = React.useMemo(() => {
-    if (!visibleScopePostures) return undefined;
-    const ids = new Set<string>();
-    for (const segment of workflowFacet?.getAllRailSegments() ?? []) {
-      if (visibleScopePostures.has(segment.posture)) {
-        ids.add(segment.scopeId);
-      }
-    }
-    return ids;
-  }, [visibleScopePostures, workflowFacet]);
-
   return (
     <div
       className="wre-chrome-overlay pointer-events-none absolute inset-0 z-30"
@@ -282,7 +268,6 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
         workflowFacet={workflowFacet}
         space={space}
         activeScopeId={activeScopeId}
-        visibleScopePostures={visibleScopePostures}
         onStripeClick={onScopeStripeClick}
         onSegmentClick={onScopeSegmentClick}
       />
@@ -290,7 +275,6 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
         facet={facet}
         workflowFacet={workflowFacet}
         activeScopeId={activeScopeId ?? null}
-        visibleScopeIds={visibleScopeIds}
         onClose={onScopeCardClose ?? noop}
         onModeChange={onScopeCardModeChange ?? noopModeChange}
         onIssueAction={onScopeCardIssueAction ?? noopIssueAction}

package/src/ui-tailwind/chrome-overlay/tw-scope-card-layer.tsx

@@ -52,8 +52,6 @@ export interface TwScopeCardLayerProps {
    */
   workflowFacet: WorkflowFacet | null;
   activeScopeId: string | null;
-  /** Scope ids currently visible under the Workflow rail layer filters. */
-  visibleScopeIds?: ReadonlySet<string>;
   onClose: () => void;
   onModeChange: (scopeId: string, mode: WorkflowScopeMode) => void;
   onIssueAction: (
@@ -93,7 +91,6 @@ export const TwScopeCardLayer: React.FC<TwScopeCardLayerProps> = ({
   facet,
   workflowFacet,
   activeScopeId,
-  visibleScopeIds,
   onClose,
   onModeChange,
   onIssueAction,
@@ -122,9 +119,7 @@ export const TwScopeCardLayer: React.FC<TwScopeCardLayerProps> = ({
   // The effective scope is the pinned one if it still resolves to a
   // model, else the active one.  When a pinned scope disappears
   // (e.g. the host cleared the overlay), drop the pin.
-  const models = (workflowFacet?.getAllScopeCardModels() ?? []).filter((model) =>
-    visibleScopeIds ? visibleScopeIds.has(model.scopeId) : true,
-  );
+  const models = workflowFacet?.getAllScopeCardModels() ?? [];
 
   const pinnedModel = pinnedScopeId
     ? models.find((m) => m.scopeId === pinnedScopeId) ?? null

package/src/ui-tailwind/chrome-overlay/tw-scope-rail-layer.tsx

@@ -46,8 +46,6 @@ export interface TwScopeRailLayerProps {
   railLaneWidthPx?: number;
   /** Scope id that should render with the `active` emphasis. */
   activeScopeId?: string | null;
-  /** Posture filters shared with the Workflow rail. Omitted means all scopes render. */
-  visibleScopePostures?: ReadonlySet<ScopeRailPosture>;
   /**
    * Fires when the user clicks the rail stripe — opens the scope card.
    * P0 wires this directly; P1 replaces with card-layer-aware routing.
@@ -89,8 +87,8 @@ const POSTURE_STYLES: Record<ScopeRailPosture, PostureStyle> = {
 // ---------------------------------------------------------------------------
 
 const DEFAULT_RAIL_LANE_PX = 44;
-const STRIPE_WIDTH_PX = 6;
-const LABEL_WIDTH_PX = 58;
+const STRIPE_WIDTH_PX = 4;
+const LABEL_WIDTH_PX = 40;
 const STACK_OFFSET_PX = 6;
 
 export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
@@ -99,15 +97,12 @@ export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
   space,
   railLaneWidthPx = DEFAULT_RAIL_LANE_PX,
   activeScopeId,
-  visibleScopePostures,
   onStripeClick,
   onSegmentClick,
   "data-testid": testId,
 }) => {
   const frame = geometryFacet.getRenderFrame() ?? null;
-  const segments = (workflowFacet?.getAllRailSegments() ?? []).filter((segment) =>
-    visibleScopePostures ? visibleScopePostures.has(segment.posture) : true,
-  );
+  const segments = workflowFacet?.getAllRailSegments() ?? [];
 
   if (!frame || segments.length === 0) {
     return null;
@@ -228,21 +223,16 @@ export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
               style={projectRectToOverlay(stripeRect, projectorSpace)}
             />
             {/* Label pill — revealed on stripe hover via CSS. */}
-            <button
-              type="button"
-              tabIndex={-1}
-              className={`wre-scope-rail-label wre-scope-rail-label-${style.railToken} ${
-                isActive ? "wre-scope-rail-label-active" : ""
-              }`}
+            <div
+              className={`wre-scope-rail-label wre-scope-rail-label-${style.railToken}`}
               data-scope-id={segment.scopeId}
               data-posture={segment.posture}
-              aria-label={`${style.labelText}${segment.label ? `: ${segment.label}` : ""}`}
-              onClick={handleActivate}
+              aria-hidden="true"
               style={projectRectToOverlay(labelRect, projectorSpace)}
             >
               <span aria-hidden="true" className={`wre-scope-rail-icon wre-scope-rail-icon-${style.icon}`} />
               <span className="wre-scope-rail-label-text">{style.labelText}</span>
-            </button>
+            </div>
           </React.Fragment>
         );
       })}

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

@@ -23,7 +23,6 @@ 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).
@@ -67,8 +66,6 @@ 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
@@ -265,8 +262,6 @@ 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,13 +10,6 @@
 
 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[];
@@ -28,8 +21,6 @@ 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<
@@ -48,13 +39,26 @@ 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(() => {
@@ -67,31 +71,20 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
     return Array.from(byScopeId.values()).sort(compareWorkflowSegments(activeScopeId ?? null));
   }, [activeScopeId, segments]);
   const [query, setQuery] = React.useState("");
-  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 [enabledFilters, setEnabledFilters] = React.useState<ReadonlySet<ScopeFilterKey>>(
+    () => new Set(SCOPE_FILTERS.map((filter) => filter.key)),
   );
   const availableFilters = React.useMemo(() => {
     const presentPostures = new Set(uniqueSegments.map((segment) => segment.posture));
-    return WORKFLOW_SCOPE_LAYER_FILTERS.filter((filter) =>
+    return SCOPE_FILTERS.filter((filter) =>
       filter.postures.some((posture) => presentPostures.has(posture)),
     );
   }, [uniqueSegments]);
   const visibleSegments = React.useMemo(() => {
     const normalizedQuery = normalizeScopeQuery(query);
     return uniqueSegments.filter((segment) => {
-      if (!isWorkflowScopePostureVisible(segment.posture, activeEnabledFilters)) {
+      const filterKey = filterKeyForPosture(segment.posture);
+      if (!enabledFilters.has(filterKey)) {
         return false;
       }
       if (!normalizedQuery) {
@@ -99,7 +92,7 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
       }
       return scopeSearchText(segment).includes(normalizedQuery);
     });
-  }, [activeEnabledFilters, query, uniqueSegments]);
+  }, [enabledFilters, query, uniqueSegments]);
 
   if (uniqueSegments.length === 0) {
     return (
@@ -153,7 +146,7 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
             role="group"
           >
             {availableFilters.map((filter) => {
-              const isEnabled = activeEnabledFilters.has(filter.key);
+              const isEnabled = enabledFilters.has(filter.key);
               return (
                 <button
                   key={filter.key}
@@ -167,9 +160,15 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
                   ].join(" ")}
                   data-testid={`workflow-scope-filter-${filter.key}`}
                   onClick={() => {
-                    setEnabledFilters(
-                      toggleWorkflowScopeLayerKey(activeEnabledFilters, filter.key),
-                    );
+                    setEnabledFilters((current) => {
+                      const next = new Set(current);
+                      if (next.has(filter.key)) {
+                        next.delete(filter.key);
+                      } else {
+                        next.add(filter.key);
+                      }
+                      return next;
+                    });
                   }}
                 >
                   {filter.label}
@@ -246,6 +245,13 @@ 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/theme/editor-theme.css

@@ -475,19 +475,19 @@
 }
 
 .wre-scope-rail-tint-accent {
-  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
+  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
 }
 .wre-scope-rail-tint-warning {
-  background: color-mix(in srgb, var(--color-warning) 23%, transparent);
+  background: color-mix(in srgb, var(--color-warning) 14%, transparent);
 }
 .wre-scope-rail-tint-insert {
-  background: color-mix(in srgb, var(--color-insert) 20%, transparent);
+  background: color-mix(in srgb, var(--color-insert) 12%, transparent);
 }
 .wre-scope-rail-tint-secondary {
-  background: color-mix(in srgb, var(--color-secondary) 16%, transparent);
+  background: color-mix(in srgb, var(--color-secondary) 9%, transparent);
 }
 .wre-scope-rail-tint-danger {
-  background: color-mix(in srgb, var(--color-danger) 24%, transparent);
+  background: color-mix(in srgb, var(--color-danger) 14%, 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 6px
+ * The rail stripe is the rest-state representation of a scope: a 4px
  * 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: 6px;
-  border-radius: 999px;
+  width: 4px;
+  border-radius: 2px;
   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.9;
+  opacity: 0.75;
   /* Reset button defaults. */
   border: none;
   padding: 0;
@@ -568,22 +568,16 @@
   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.45);
+  transform: scaleX(1.5);
   opacity: 1;
   outline: none;
 }
 
 .wre-scope-rail-stripe-active {
   opacity: 1;
-  transform: scaleX(1.6);
+  transform: scaleX(1.75);
 }
 
 .wre-scope-rail-stripe.wre-scope-rail-label-accent { color: var(--color-accent); }
@@ -629,8 +623,6 @@
   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,
@@ -700,12 +692,7 @@
 }
 
 .wre-scope-rail-label-active {
-  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);
+  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
 }
 
 .wre-scope-rail-icon {

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

@@ -9,8 +9,8 @@
  * Review-role actions here collapse what used to live in
  * `TwReviewQueueBar` as a second strip — the review prev/next, counts,
  * active-item label, accept/reject, markup-mode, and batch operations.
- * Editor-role actions surface the scope posture menu.  Workflow-role
- * actions surface work-item traversal + claim/skip/complete.
+ * Workflow-role actions surface the scope posture menu plus work-item
+ * traversal + claim/skip/complete.
  */
 
 import React, { useState } from "react";
@@ -18,14 +18,12 @@ import * as Popover from "@radix-ui/react-popover";
 import * as Toggle from "@radix-ui/react-toggle";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import {
-  BookmarkCheck,
   Check,
   CheckCheck,
   ChevronLeft,
   ChevronRight,
   CircleOff,
   FileDiff,
-  Flag,
   Hand,
   MessageSquare,
   MessageSquareDot,
@@ -48,6 +46,7 @@ import type { ScopedChromePolicy } from "../../ui/headless/scoped-chrome-policy"
 import type { ToolbarChromeItemId } from "../../ui/headless/chrome-registry";
 import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
 import { ROLE_ACTION_SETS } from "../../ui/headless/role-action-sets";
+import { TwDisplayModeSelector } from "../chrome/tw-display-mode-selector";
 import { TwScopePostureMenu } from "./tw-scope-posture-menu";
 
 /**
@@ -103,7 +102,7 @@ export interface TwRoleActionRegionProps {
   onReviewSidebarTrackedChanges?: () => void;
   onReviewSidebarComments?: () => void;
 
-  // Workflow + review role: scope posture menu
+  // Workflow role: assign authorable scope posture.
   onMarkScopePosture?: (posture: ScopeRailPosture) => void;
 
   // Review role
@@ -366,10 +365,11 @@ function RoleActionButton(arg: RoleActionButtonProps): React.JSX.Element | null
       );
     case "review-markup-mode":
       return (
-        <MarkupModeSelect
-          mode={props.markupDisplay ?? "simple"}
+        <TwDisplayModeSelector
+          value={props.markupDisplay ?? "simple"}
           onChange={(mode) => props.onReviewMarkupMode?.(mode)}
           disabled={!props.onReviewMarkupMode}
+          data-testid="role-review-markup-mode"
         />
       );
     case "workflow-prev":
@@ -693,30 +693,4 @@ function ReviewActiveLabel({
   );
 }
 
-function MarkupModeSelect(arg: {
-  mode: MarkupDisplayMode;
-  onChange: (mode: MarkupDisplayMode) => void;
-  disabled?: boolean;
-}): React.JSX.Element {
-  const Icon = arg.mode === "clean" ? BookmarkCheck : arg.mode === "all" ? Flag : Rows3;
-  return (
-    <button
-      type="button"
-      aria-label={`Markup display: ${arg.mode}`}
-      disabled={arg.disabled}
-      onMouseDown={preserveEditorSelectionMouseDown}
-      onClick={() => {
-        const next: MarkupDisplayMode =
-          arg.mode === "all" ? "clean" : arg.mode === "clean" ? "simple" : "all";
-        arg.onChange(next);
-      }}
-      data-testid="role-review-markup-mode"
-      className="inline-flex h-6 items-center gap-1 rounded-md border border-border bg-canvas px-2 text-[11px] font-medium text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"
-    >
-      <Icon className="h-3.5 w-3.5" />
-      <span className="capitalize">{arg.mode}</span>
-    </button>
-  );
-}
-
 export default TwRoleActionRegion;

package/src/ui-tailwind/toolbar/tw-scope-posture-menu.tsx

@@ -1,13 +1,15 @@
 /**
  * Scope posture menu — replaces the old "Mark section" button with a
- * topnav dropdown listing the seven `ScopeRailPosture` values so
- * editors can mark regions with an explicit workflow mode instead of a
- * single "marked" flag.
+ * topnav dropdown listing the authorable `ScopeRailPosture` values so
+ * workflow operators can mark regions with an explicit workflow mode
+ * instead of a single "marked" flag.
  *
  * Per runtime-rendering-and-chrome-phase.md §6.4, the menu lives inline
- * in the editor role's primary action region (not in the review queue
+ * in the workflow role's primary action region (not in the review queue
  * strip).  Postures align 1:1 with the rail vocabulary so the rail
- * updates visually as soon as the user picks one.
+ * updates visually as soon as the user picks one. Runtime-only postures
+ * like preserve-only and blocked-import still render in overlays, but
+ * they are not choices users can assign from this product menu.
  */
 
 import React, { useState } from "react";
@@ -17,7 +19,6 @@ import {
   ChevronDown,
   Eye,
   Flag,
-  Lock,
   MessageCircle,
   Pencil,
   Sparkles,
@@ -35,12 +36,12 @@ export interface TwScopePostureMenuProps {
   "data-testid"?: string;
 }
 
-interface PostureEntry {
+export interface ScopePostureMenuEntry {
   posture: ScopeRailPosture;
   label: string;
   hint: string;
   icon: React.ComponentType<{ className?: string }>;
-  tone: "accent" | "warning" | "comment" | "secondary" | "danger";
+  tone: "accent" | "warning" | "comment" | "secondary";
 }
 
 /**
@@ -49,7 +50,7 @@ interface PostureEntry {
  * glyphs via the `data-icon` attribute).  Extract both into a single
  * source of truth in a follow-up.
  */
-const POSTURE_ENTRIES: readonly PostureEntry[] = [
+export const SCOPE_POSTURE_MENU_ENTRIES: readonly ScopePostureMenuEntry[] = [
   {
     posture: "edit",
     label: "Edit scope",
@@ -85,22 +86,11 @@ const POSTURE_ENTRIES: readonly PostureEntry[] = [
     icon: Flag,
     tone: "warning",
   },
-  {
-    posture: "preserve-only",
-    label: "Preserve only",
-    hint: "Blocked — export-preserving only",
-    icon: Lock,
-    tone: "danger",
-  },
-  {
-    posture: "blocked-import",
-    label: "Blocked import",
-    hint: "Blocked — imported region is locked",
-    icon: Lock,
-    tone: "danger",
-  },
 ];
 
+export const SCOPE_POSTURE_MENU_POSTURES: readonly ScopeRailPosture[] =
+  SCOPE_POSTURE_MENU_ENTRIES.map((entry) => entry.posture);
+
 export function TwScopePostureMenu(props: TwScopePostureMenuProps): React.JSX.Element {
   const [open, setOpen] = useState(false);
 
@@ -131,7 +121,7 @@ export function TwScopePostureMenu(props: TwScopePostureMenuProps): React.JSX.El
           <div className="mb-1 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
             Mark section with posture
           </div>
-          {POSTURE_ENTRIES.map((entry) => (
+          {SCOPE_POSTURE_MENU_ENTRIES.map((entry) => (
             <Popover.Close key={entry.posture} asChild>
               <button
                 type="button"
@@ -163,7 +153,7 @@ export function TwScopePostureMenu(props: TwScopePostureMenuProps): React.JSX.El
   );
 }
 
-function toneClass(tone: PostureEntry["tone"]): string {
+function toneClass(tone: ScopePostureMenuEntry["tone"]): string {
   switch (tone) {
     case "accent":
       return "text-accent";
@@ -171,8 +161,6 @@ function toneClass(tone: PostureEntry["tone"]): string {
       return "text-warning";
     case "comment":
       return "text-comment";
-    case "danger":
-      return "text-danger";
     case "secondary":
     default:
       return "text-secondary";

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

@@ -69,6 +69,7 @@ import {
   type ScopedChromePolicy,
 } 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 { TwToolbarIconButton } from "./tw-toolbar-icon-button";
 
@@ -123,6 +124,8 @@ 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. */
+  onMarkupDisplayChange?: (mode: MarkupDisplayMode) => void;
   onRestartNumbering?: () => void;
   onContinueNumbering?: () => void;
   onUpdateFields?: () => void;
@@ -262,6 +265,10 @@ export function TwToolbar(props: TwToolbarProps) {
   const showTrackedChangesToggle =
     isToolbarChromeItemVisible(scopedChromePolicy, "tracked-changes-toggle") &&
     !isChromeItemOwnedByRoleRegion("tracked-changes-toggle", props.role);
+  const showMarkupDisplaySelector =
+    props.markupDisplay !== undefined &&
+    props.onMarkupDisplayChange !== undefined &&
+    !isChromeItemOwnedByRoleRegion("review-markup-mode", props.role);
   const showRightClusterComment =
     isToolbarChromeItemVisible(scopedChromePolicy, "comment") &&
     !isChromeItemOwnedByRoleRegion("comment", props.role);
@@ -695,6 +702,17 @@ export function TwToolbar(props: TwToolbarProps) {
           </>
         ) : null}
 
+        {showMarkupDisplaySelector ? (
+          <>
+            <TwDisplayModeSelector
+              value={props.markupDisplay!}
+              onChange={(mode) => props.onMarkupDisplayChange?.(mode)}
+              data-testid="toolbar-display-mode-selector"
+            />
+            <div className="mx-1 h-4 w-px bg-border" />
+          </>
+        ) : null}
+
         {/* View mode toggle group: Canvas (clean, flowing) / Page (layout-sensitive) */}
         {isToolbarChromeItemVisible(scopedChromePolicy, "workspace-mode") ? (
           <ToggleGroup.Root

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

@@ -68,11 +68,6 @@ import { useLayoutFacetRenderSignal } from "./review-workspace/use-layout-facet-
 import { useScrollRootCapture } from "./review-workspace/use-scroll-root-capture.ts";
 import { usePmSurfaceCapture } from "./review-workspace/use-pm-surface-capture.ts";
 import { TwReviewWorkspaceNavigator } from "./review-workspace/tw-review-workspace-navigator.tsx";
-import {
-  createDefaultWorkflowScopeLayerKeys,
-  workflowScopePosturesForLayerKeys,
-  type WorkflowScopeLayerKey,
-} from "./workflow-scope-layers";
 
 export {
   FRAME_PX_PER_TWIP_AT_96DPI,
@@ -179,13 +174,6 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     useRef<TwWorkspaceChromeHostController | null>(null);
   const [shellModeOverride, setShellModeOverride] =
     useState<ShellHeaderMode | null>(null);
-  const [workflowLayerFilters, setWorkflowLayerFilters] = useState<
-    ReadonlySet<WorkflowScopeLayerKey>
-  >(createDefaultWorkflowScopeLayerKeys);
-  const visibleScopePostures = useMemo(
-    () => workflowScopePosturesForLayerKeys(workflowLayerFilters),
-    [workflowLayerFilters],
-  );
   // P8.11 — body slot wrapping `{props.document}` (the PM surface) + scroll
   // root ref.  The chrome layer's `TwPageStackChromeLayer` needs both to
   // measure per-page rects and to reparent PM's DOM node across band
@@ -878,6 +866,10 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                 dismissSelectionToolbar();
                 props.onShowTrackedChangesChange(show);
               }}
+              onMarkupDisplayChange={(mode) => {
+                dismissSelectionToolbar();
+                props.onReviewMarkupModeChange?.(mode);
+              }}
               role={viewState.editorRole}
               reviewQueue={props.reviewQueue}
               markupDisplay={markupDisplay}
@@ -1174,7 +1166,6 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                             onSetColumnWidth={props.onSetColumnWidth}
                             onSetRowHeight={props.onSetRowHeight}
                             activeScopeId={activeScopeId}
-                            visibleScopePostures={visibleScopePostures}
                             editorRole={viewState.editorRole}
                             scopeCardScopeTagEditor={props.scopeCardScopeTagEditor}
                             onScopeStripeClick={handleScopeStripeClick}
@@ -1281,8 +1272,6 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
               // `getAllScopeRailSegments` (methods removed in v40 / Slice 4C).
               scopeRailSegments: props.workflowFacet?.getAllRailSegments() ?? [],
               activeScopeId,
-              workflowLayerFilters,
-              onWorkflowLayerFiltersChange: setWorkflowLayerFilters,
               onOpenScope: (segment) => {
                 handleScopeStripeClick({ scopeId: segment.scopeId });
               },

package/src/ui-tailwind/workflow-scope-layers.ts

@@ -1,70 +0,0 @@
-import type { ScopeRailPosture } from "../api/public-types";
-
-export type WorkflowScopeLayerKey =
-  | "edit"
-  | "suggest"
-  | "comment"
-  | "view"
-  | "candidate"
-  | "blocked";
-
-export interface WorkflowScopeLayerFilter {
-  key: WorkflowScopeLayerKey;
-  label: string;
-  postures: readonly ScopeRailPosture[];
-}
-
-export const WORKFLOW_SCOPE_LAYER_FILTERS: readonly WorkflowScopeLayerFilter[] = [
-  { 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 function createDefaultWorkflowScopeLayerKeys(): ReadonlySet<WorkflowScopeLayerKey> {
-  return new Set(WORKFLOW_SCOPE_LAYER_FILTERS.map((filter) => filter.key));
-}
-
-export function workflowScopeLayerKeyForPosture(
-  posture: ScopeRailPosture,
-): WorkflowScopeLayerKey {
-  if (posture === "preserve-only" || posture === "blocked-import") {
-    return "blocked";
-  }
-  return posture;
-}
-
-export function isWorkflowScopePostureVisible(
-  posture: ScopeRailPosture,
-  enabledLayers: ReadonlySet<WorkflowScopeLayerKey>,
-): boolean {
-  return enabledLayers.has(workflowScopeLayerKeyForPosture(posture));
-}
-
-export function workflowScopePosturesForLayerKeys(
-  enabledLayers: ReadonlySet<WorkflowScopeLayerKey>,
-): ReadonlySet<ScopeRailPosture> {
-  const postures = new Set<ScopeRailPosture>();
-  for (const filter of WORKFLOW_SCOPE_LAYER_FILTERS) {
-    if (!enabledLayers.has(filter.key)) continue;
-    for (const posture of filter.postures) {
-      postures.add(posture);
-    }
-  }
-  return postures;
-}
-
-export function toggleWorkflowScopeLayerKey(
-  current: ReadonlySet<WorkflowScopeLayerKey>,
-  key: WorkflowScopeLayerKey,
-): ReadonlySet<WorkflowScopeLayerKey> {
-  const next = new Set(current);
-  if (next.has(key)) {
-    next.delete(key);
-  } else {
-    next.add(key);
-  }
-  return next;
-}