@beyondwork/docx-react-component 1.0.38 → 1.0.40

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

@@ -408,8 +408,16 @@
   box-shadow: inset -1px 0 0 color-mix(in srgb, var(--color-danger) 35%, transparent);
 }
 
+/*
+ * `wre-workflow-inline-active` no longer emits a visual outline.  The
+ * per-run inset box-shadow produced a halo around every text fragment
+ * (one box per run, due to box-decoration-break: clone above), which
+ * fought with the overlay's flat tint.  The class name is kept on the
+ * inline decoration as a data hook (no visual), and emphasis for the
+ * active scope now lives on the ChromeOverlay rail stripe + scope card.
+ */
 .prosemirror-surface .ProseMirror .wre-workflow-inline-active {
-  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-accent) 30%, transparent);
+  /* intentionally empty — visual emphasis handled by ChromeOverlay */
 }
 
 /*
@@ -423,9 +431,37 @@
   pointer-events: none;
 }
 
+/*
+ * ─── Gutter lane tokens ───
+ *
+ * The scope rail and scope card chrome live in a reserved lane to the
+ * left of the page frame so they visibly read as chrome (not document
+ * content).  Page surfaces use 64px, canvas surfaces 48px.  Host apps
+ * can override via CSS custom property.
+ */
+:root {
+  --wre-gutter-lane-width: 64px;
+  --wre-gutter-lane-pad: 8px;
+}
+
+.wre-canvas-surface {
+  --wre-gutter-lane-width: 48px;
+}
+
+/*
+ * The page-with-gutter grid shell allocates the gutter as its own
+ * column so absolute-positioned chrome overlays (which fill inset 0 of
+ * this shell) land INSIDE the gutter, not over the shell background.
+ */
+.wre-page-with-gutter {
+  display: grid;
+  grid-template-columns: var(--wre-gutter-lane-width) 1fr;
+  position: relative;
+}
+
 .wre-scope-rail-tint {
   position: absolute;
-  border-radius: 0.35rem;
+  border-radius: 0.2rem;
   pointer-events: none;
   z-index: 0;
   transition: background 140ms ease-out;
@@ -452,32 +488,89 @@
   outline-offset: -1px;
 }
 
+/*
+ * ─── Scope rail stripe ───
+ *
+ * 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: 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.75;
+  /* Reset button defaults. */
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  background-clip: padding-box;
+}
+
+.wre-scope-rail-stripe:hover,
+.wre-scope-rail-stripe:focus-visible {
+  transform: scaleX(1.5);
+  opacity: 1;
+  outline: none;
+}
+
+.wre-scope-rail-stripe-active {
+  opacity: 1;
+  transform: scaleX(1.75);
+}
+
+.wre-scope-rail-stripe.wre-scope-rail-label-accent { color: var(--color-accent); }
+.wre-scope-rail-stripe.wre-scope-rail-label-warning { color: var(--color-warning); }
+.wre-scope-rail-stripe.wre-scope-rail-label-insert { color: var(--color-insert); }
+.wre-scope-rail-stripe.wre-scope-rail-label-secondary { color: var(--color-secondary); }
+.wre-scope-rail-stripe.wre-scope-rail-label-danger { color: var(--color-danger); }
+
+/*
+ * ─── Scope rail label pill ───
+ *
+ * Shown only on stripe hover (CSS-driven).  The pill overlays the
+ * stripe with icon + short posture label, anchored to the first line
+ * of the scope.
+ */
 .wre-scope-rail-label {
   position: absolute;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 0.15rem;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.375rem;
+  gap: 0.2rem;
+  padding: 0.15rem 0.3rem;
+  border-radius: var(--radius-sm);
   border: 1px solid transparent;
   background: var(--color-canvas, #fff);
-  box-shadow: 0 2px 6px -3px rgba(0, 0, 0, 0.18);
-  font-size: 10px;
+  box-shadow: var(--shadow-sm);
+  font-size: 9.5px;
   line-height: 1;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.06em;
   font-weight: 600;
   cursor: pointer;
-  pointer-events: auto;
-  z-index: 1;
-  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
+  z-index: 2;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 140ms ease-out, transform 140ms ease-out;
+  transform: translateX(-4px);
 }
 
-.wre-scope-rail-label:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.22);
+.wre-scope-rail-stripe:hover + .wre-scope-rail-label,
+.wre-scope-rail-label:hover,
+.wre-scope-rail-stripe:focus-visible + .wre-scope-rail-label {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
 }
 
 .wre-scope-rail-label-accent {

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

@@ -15,6 +15,8 @@
 
 import React, { useState } from "react";
 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,
@@ -23,8 +25,13 @@ import {
   ChevronLeft,
   ChevronRight,
   CircleOff,
+  Eye,
+  EyeOff,
+  FileDiff,
   Flag,
   Hand,
+  MessageSquare,
+  MessageSquareDot,
   MessageSquareText,
   Rows3,
   SkipForward,
@@ -38,6 +45,7 @@ import type {
   ReviewQueueSnapshot,
   ScopeRailPosture,
 } from "../../api/public-types";
+import type { SessionCapabilities } from "../../runtime/session-capabilities";
 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";
@@ -68,7 +76,23 @@ export interface TwRoleActionRegionProps {
   workflowItem?: WorkflowWorkItemSnapshot | null;
   markupDisplay?: MarkupDisplayMode;
 
-  // Editor role
+  // Shared: editor + review role
+  canAddComment?: boolean;
+  showTrackedChanges?: boolean;
+  onAddComment?: () => void;
+  onShowTrackedChangesChange?: (show: boolean) => void;
+  /**
+   * Session capabilities used to gate the role-region tracked-changes
+   * toggle (mirrors the right-cluster gate at tw-toolbar.tsx).  When
+   * `capabilities.trackChangesSupported` is false, the toggle is disabled.
+   */
+  capabilities?: SessionCapabilities;
+
+  // Review sidebar panel (optional — hidden when not provided)
+  onReviewSidebarTrackedChanges?: () => void;
+  onReviewSidebarComments?: () => void;
+
+  // Workflow + review role: scope posture menu
   onMarkScopePosture?: (posture: ScopeRailPosture) => void;
 
   // Review role
@@ -142,7 +166,104 @@ interface RoleActionButtonProps {
 
 function RoleActionButton(arg: RoleActionButtonProps): React.JSX.Element | null {
   const { id, props } = arg;
+  const focusRingClass =
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
   switch (id) {
+    case "comment":
+      return (
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <button
+              type="button"
+              aria-label="Add comment"
+              disabled={!props.canAddComment || !props.onAddComment}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              onClick={props.onAddComment}
+              className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40 outline-none ${focusRingClass}`}
+              data-testid="role-add-comment"
+            >
+              <MessageSquare className="h-3.5 w-3.5" />
+            </button>
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
+              Add comment
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      );
+    case "tracked-changes-toggle":
+      return (
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <Toggle.Root
+              pressed={props.showTrackedChanges ?? false}
+              onPressedChange={(v) => props.onShowTrackedChangesChange?.(v)}
+              disabled={props.capabilities ? !props.capabilities.trackChangesSupported : false}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              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}`}
+              data-testid="role-tracked-changes-toggle"
+            >
+              {(props.showTrackedChanges ?? false) ? (
+                <Eye className="h-3.5 w-3.5" />
+              ) : (
+                <EyeOff className="h-3.5 w-3.5" />
+              )}
+            </Toggle.Root>
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
+              {(props.showTrackedChanges ?? false) ? "Hide tracked changes" : "Show tracked changes"}
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      );
+    case "review-sidebar-tracked-changes":
+      return (
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <button
+              type="button"
+              aria-label="Show tracked changes in sidebar"
+              disabled={!props.onReviewSidebarTrackedChanges}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              onClick={props.onReviewSidebarTrackedChanges}
+              className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40 outline-none ${focusRingClass}`}
+              data-testid="role-sidebar-tracked-changes"
+            >
+              <FileDiff className="h-3.5 w-3.5" />
+            </button>
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
+              Tracked changes panel
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      );
+    case "review-sidebar-comments":
+      return (
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <button
+              type="button"
+              aria-label="Show comments in sidebar"
+              disabled={!props.onReviewSidebarComments}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              onClick={props.onReviewSidebarComments}
+              className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40 outline-none ${focusRingClass}`}
+              data-testid="role-sidebar-comments"
+            >
+              <MessageSquareDot className="h-3.5 w-3.5" />
+            </button>
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
+              Comments panel
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      );
     case "editor-scope-posture-menu":
       return (
         <TwScopePostureMenu

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

@@ -42,6 +42,8 @@ import {
 
 import type {
   ActiveListContext,
+  ChromePinSurface,
+  ChromePinsState,
   CompatibilityPanelSnapshot,
   EditorRole,
   EditorStoryTarget,
@@ -49,6 +51,7 @@ import type {
   FormattingStateSnapshot,
   FormattingAlignment,
   InsertImageOptions,
+  PinState,
   ReviewQueueSnapshot,
   ScopeRailPosture,
   SectionBreakType,
@@ -61,6 +64,7 @@ import type {
 import type { SessionCapabilities } from "../../runtime/session-capabilities";
 import {
   getToolbarChromePlacement,
+  isChromeItemOwnedByRoleRegion,
   isToolbarChromeItemVisible,
   resolveScopedChromePolicy,
   type ScopedChromePolicy,
@@ -72,6 +76,7 @@ import {
   type MarkupDisplayMode,
   type WorkflowWorkItemSnapshot,
 } from "./tw-role-action-region";
+import { TwDetachHandle } from "../chrome/tw-detach-handle";
 import { TwToolbarIconButton } from "./tw-toolbar-icon-button";
 
 export interface TwToolbarProps {
@@ -144,7 +149,10 @@ export interface TwToolbarProps {
   /** Markup display mode for the review role. */
   markupDisplay?: MarkupDisplayMode;
 
-  // Editor role
+  // Shared: editor + review role (comment + TC in role region)
+  onReviewSidebarTrackedChanges?: () => void;
+  onReviewSidebarComments?: () => void;
+  // Workflow + review role: scope posture
   onMarkScopePosture?: (posture: ScopeRailPosture) => void;
   // Review role
   onReviewPrev?: () => void;
@@ -162,6 +170,10 @@ export interface TwToolbarProps {
   onWorkflowSkip?: () => void;
   onWorkflowMarkBlocked?: () => void;
   onWorkflowJumpToScope?: () => void;
+  /** Current chrome pin state; when supplied enables the topnav detach handle. */
+  chromePins?: ChromePinsState;
+  /** Called when the user detaches or re-attaches the topnav. */
+  onChromePinChange?: (surface: ChromePinSurface, pin: PinState | null) => void;
 }
 
 export interface ToolbarInteractionPolicy {
@@ -219,7 +231,12 @@ export function TwToolbar(props: TwToolbarProps) {
   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 showTrackedChangesToggle =
+    isToolbarChromeItemVisible(scopedChromePolicy, "tracked-changes-toggle") &&
+    !isChromeItemOwnedByRoleRegion("tracked-changes-toggle", props.role);
+  const showRightClusterComment =
+    isToolbarChromeItemVisible(scopedChromePolicy, "comment") &&
+    !isChromeItemOwnedByRoleRegion("comment", props.role);
   const showHealth =
     showDiagnosticsChrome &&
     isToolbarChromeItemVisible(scopedChromePolicy, "health") &&
@@ -527,6 +544,13 @@ export function TwToolbar(props: TwToolbarProps) {
           reviewQueue={props.reviewQueue}
           workflowItem={props.workflowItem}
           markupDisplay={props.markupDisplay}
+          canAddComment={canAddComment}
+          showTrackedChanges={props.showTrackedChanges}
+          capabilities={caps}
+          onAddComment={props.onAddComment}
+          onShowTrackedChangesChange={props.onShowTrackedChangesChange}
+          onReviewSidebarTrackedChanges={props.onReviewSidebarTrackedChanges}
+          onReviewSidebarComments={props.onReviewSidebarComments}
           onMarkScopePosture={props.onMarkScopePosture}
           onReviewPrev={props.onReviewPrev}
           onReviewNext={props.onReviewNext}
@@ -567,7 +591,7 @@ export function TwToolbar(props: TwToolbarProps) {
           </>
         ) : null}
 
-        {isToolbarChromeItemVisible(scopedChromePolicy, "comment") ? (
+        {showRightClusterComment ? (
           <TwToolbarIconButton
             icon={MessageSquare}
             label="Add comment"
@@ -809,6 +833,15 @@ export function TwToolbar(props: TwToolbarProps) {
             onClick={props.onExport}
           />
         ) : null}
+
+        {props.onChromePinChange ? (
+          <TwDetachHandle
+            surface="topnav"
+            pin={props.chromePins?.topnav}
+            onChange={props.onChromePinChange}
+            label="Detach toolbar"
+          />
+        ) : null}
       </div>
     </header>
   );