@beyondwork/docx-react-component 1.0.89 → 1.0.90

package/package.json

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

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

@@ -878,6 +878,10 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                 dismissSelectionToolbar();
                 props.onShowTrackedChangesChange(show);
               }}
+              onMarkupDisplayChange={(mode) => {
+                dismissSelectionToolbar();
+                props.onReviewMarkupModeChange?.(mode);
+              }}
               role={viewState.editorRole}
               reviewQueue={props.reviewQueue}
               markupDisplay={markupDisplay}