@beyondwork/docx-react-component 1.0.88 → 1.0.89

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>

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

@@ -68,6 +68,11 @@ 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,
@@ -174,6 +179,13 @@ 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
@@ -533,12 +545,10 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
         )
         : null;
 
-  // Audit §2.5 — context band mounts as a composition-level sibling of
-  // the toolbar so the workspace row becomes
-  //   [toolbar left cluster] · [context band] · [toolbar right cluster]
-  // and the band can render mode-owned content (Phase B.3 additive mount;
-  // Phase D migrates role-action contents into the band and retires the
-  // legacy inline role region inside TwToolbar).
+  // Audit §2.5 — context band mounts as a composition-level sibling below
+  // the shell header only when the active mode has meaningful mode-owned
+  // content. Plain editor mode keeps its authoring controls in the toolbar
+  // and intentionally does not render an empty "Edit" ribbon.
   //
   // `resolveChromeComposition` is pure but each call allocates new Sets +
   // arrays.  `TwReviewWorkspace` re-renders on every PM transaction (the
@@ -573,6 +583,9 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     modeOverride: shellModeOverride === "more" ? "more" : undefined,
   });
   const showHealthRailTab = composition.rail.visibleTabs.has("health");
+  const showContextBand =
+    chromeVisibility.toolbar &&
+    (composition.mode === "more" || viewState.editorRole !== "editor");
 
   const arbiter = useWorkspaceArbiter();
 
@@ -591,18 +604,12 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
          * decoupling this branch.
          */}
         {/*
-         * Chrome Closure Pass · Task 1 (designsystem.md §6.3) — the
-         * role-action region used to render inline in the toolbar's
-         * center subregion. It now lives inside `TwContextBand` so the
-         * workspace row reads
-         *   [shell header] · [TwContextBand carrying role actions] · [TwToolbar (formatting only)]
-         * matching §8.8.1's "Workspace context row / mode-owned band"
-         * row. Callbacks below mirror what was previously threaded
-         * through `ChromePresetToolbar` to `TwRoleActionRegion`; the
-         * toolbar still receives `role` for `isChromeItemOwnedByRoleRegion`
-         * deferral but no longer renders the region itself.
+         * Chrome Closure Pass · Task 1 (designsystem.md §6.3) — review,
+         * workflow, and More mode actions live in `TwContextBand`; editor
+         * mode stays toolbar-only unless a future pass adds real contextual
+         * authoring content.
          */}
-        {chromeVisibility.toolbar ? (
+        {showContextBand ? (
           <TwContextBand mode={composition.mode}>
             {composition.mode === "more" ? (
               <TwMoreContextBandContent
@@ -615,7 +622,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                   props.onActiveRailTabChange?.("health");
                 }}
                 onOpenOutline={() => setNavOpen(true)}
-                onOpenSearch={props.reviewRailFooter?.onSearch}
+                onOpenSearch={props.onOpenInlineFind ?? props.reviewRailFooter?.onSearch}
               />
             ) : viewState.editorRole ? (
               <TwRoleActionRegion
@@ -1167,6 +1174,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                             onSetColumnWidth={props.onSetColumnWidth}
                             onSetRowHeight={props.onSetRowHeight}
                             activeScopeId={activeScopeId}
+                            visibleScopePostures={visibleScopePostures}
                             editorRole={viewState.editorRole}
                             scopeCardScopeTagEditor={props.scopeCardScopeTagEditor}
                             onScopeStripeClick={handleScopeStripeClick}
@@ -1273,6 +1281,8 @@ 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

@@ -0,0 +1,70 @@
+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;
+}