@beyondwork/docx-react-component 1.0.39 → 1.0.41

package/src/ui-tailwind/editor-surface/pm-decorations.ts

@@ -39,6 +39,12 @@ function getWorkflowInlineClass(
   isActiveWorkItem: boolean,
   isSelectionZone: boolean,
 ): string {
+  // Active-work-item emphasis lives on the ChromeOverlay rail stripe, not
+  // on the PM inline decoration.  The per-run outline produced a halo
+  // around every text fragment (one box per wrapped span due to
+  // box-decoration-break: clone) — the `data-workflow-active` attribute
+  // remains the canonical hook for hit-testing and accessibility.
+  void isActiveWorkItem;
   const base =
     scope.mode === "edit"
       ? "wre-workflow-inline wre-workflow-inline-edit"
@@ -47,8 +53,7 @@ function getWorkflowInlineClass(
         : scope.mode === "comment"
           ? "wre-workflow-inline wre-workflow-inline-comment"
           : "wre-workflow-inline wre-workflow-inline-view";
-  const withZone = isSelectionZone ? `${base} wre-workflow-inline-zone` : base;
-  return isActiveWorkItem ? `${withZone} wre-workflow-inline-active` : withZone;
+  return isSelectionZone ? `${base} wre-workflow-inline-zone` : base;
 }
 
 function getWorkflowRailClass(

package/src/ui-tailwind/editor-surface/pm-state-from-snapshot.ts

@@ -578,6 +578,23 @@ function buildSdtBlock(
   );
 }
 
+/**
+ * Labels surface-projection emits for preserve-only complex fragments
+ * (charts, SmartArt, drawing shapes, WordArt, legacy VML).  These have
+ * no first-class rendering — when the debug preview toggle is off, they
+ * collapse to a zero-dimension quiet marker so the reviewer's document
+ * view stays clean.  Toggling `showUnsupportedObjectPreviews` on swaps
+ * them to the richer atom node specs that ship the preserved detail.
+ */
+const UNSUPPORTED_COMPLEX_PREVIEW_LABELS = new Set<string>([
+  "Embedded chart",
+  "SmartArt diagram",
+  "Drawing shape",
+  "Text box",
+  "WordArt",
+  "Legacy VML drawing",
+]);
+
 /**
  * Map an opaque_inline surface segment to a dedicated complex-rendering PM atom
  * node when the label identifies a known complex content type, or fall back to
@@ -635,12 +652,20 @@ function buildOpaqueInlineOrComplexAtom(
     });
   }
 
+  // Preserve-only complex fragments without the debug toggle: collapse
+  // to a zero-dimension quiet marker so the document view matches the
+  // dev-drawer copy ("off by default").  The fragment stays in the
+  // canonical document, so export round-trips remain lossless.
+  const effectivePresentation =
+    segment.presentation ??
+    (UNSUPPORTED_COMPLEX_PREVIEW_LABELS.has(label) ? "quiet-marker" : "inline-chip");
+
   return editorSchema.nodes.opaque_inline.create({
     fragmentId: segment.fragmentId,
     warningId: segment.warningId,
     label,
     detail,
-    presentation: segment.presentation ?? "inline-chip",
+    presentation: effectivePresentation,
     displayText: segment.displayText ?? null,
   });
 }

package/src/ui-tailwind/index.ts

@@ -47,6 +47,11 @@ export { TwStatusBar } from "./status/tw-status-bar";
 // Chrome
 export { TwAlertBanner } from "./chrome/tw-alert-banner";
 export { TwSelectionToolbar } from "./chrome/tw-selection-toolbar";
+export {
+  TwModeDock,
+  type TwModeDockAction,
+  type TwModeDockProps,
+} from "./chrome/tw-mode-dock";
 
 // Chrome overlay plane (R3a — scope rail layer)
 export {

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/tw-review-workspace.tsx

@@ -67,6 +67,7 @@ import {
 import type { EditorCommandBag } from "../ui/editor-command-bag.ts";
 import { preserveEditorSelectionMouseDown } from "../ui/headless/preserve-editor-selection";
 import { TwAlertBanner } from "./chrome/tw-alert-banner";
+import { TwModeDock } from "./chrome/tw-mode-dock";
 import { TwLayoutPanel } from "./chrome/tw-layout-panel";
 import { TwPageRuler } from "./chrome/tw-page-ruler";
 import {
@@ -129,6 +130,15 @@ export interface TwReviewWorkspaceProps {
     searchLabel?: string;
     helpLabel?: string;
   };
+  /**
+   * Opt-in floating mode dock pinned to the bottom of the workspace.
+   * Hosts pass the derived label / icon / actions; defaults to hidden.
+   */
+  modeDock?: {
+    label: string;
+    icon?: ReactNode;
+    actions?: readonly import("./chrome/tw-mode-dock").TwModeDockAction[];
+  };
   document: ReactNode;
   workspaceMode: WorkspaceMode;
   zoomLevel?: ZoomLevel;
@@ -314,6 +324,25 @@ export interface TwReviewWorkspaceProps {
    * re-renders with the new per-role action set.
    */
   onEditorRoleChange?: (role: import("../api/public-types.ts").EditorRole) => void;
+  /**
+   * Scope card mode selector fired a mode change.  Wire to the host's
+   * existing overlay-apply path (or an equivalent CCEP workflow
+   * endpoint).  The card never mutates runtime state directly.
+   */
+  onScopeModeChangeRequested?: (payload: {
+    scopeId: string;
+    mode: import("../api/public-types.ts").WorkflowScopeMode;
+  }) => void;
+  /**
+   * Scope card issue row fired an action (resolve/waive/escalate/
+   * acknowledge).  Host updates the attached `IssueMetadataValue`
+   * state and re-pushes via `setWorkflowMetadataEntries`.
+   */
+  onScopeIssueActionRequested?: (payload: {
+    scopeId: string;
+    issueId: string;
+    action: import("../api/public-types.ts").ScopeIssueAction;
+  }) => void;
 }
 
 export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
@@ -328,6 +357,40 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   const markupDisplay = props.markupDisplay;
   const [navOpen, setNavOpen] = useState(false);
   const [layoutToolsOpen, setLayoutToolsOpen] = useState(false);
+
+  // Scope card state — tracks which scope's card is currently open so
+  // the ChromeOverlay's card layer renders the right one.  The card
+  // closes on click-outside, Escape, or a repeat click on its stripe.
+  const [activeScopeId, setActiveScopeId] = useState<string | null>(null);
+  const handleScopeStripeClick = useCallback(
+    (segment: { scopeId: string }) => {
+      setActiveScopeId((current) =>
+        current === segment.scopeId ? null : segment.scopeId,
+      );
+    },
+    [],
+  );
+  const handleScopeCardClose = useCallback(() => {
+    setActiveScopeId(null);
+  }, []);
+  const onScopeModeChangeRequested = props.onScopeModeChangeRequested;
+  const handleScopeCardModeChange = useCallback(
+    (scopeId: string, mode: import("../api/public-types.ts").WorkflowScopeMode) => {
+      onScopeModeChangeRequested?.({ scopeId, mode });
+    },
+    [onScopeModeChangeRequested],
+  );
+  const onScopeIssueActionRequested = props.onScopeIssueActionRequested;
+  const handleScopeCardIssueAction = useCallback(
+    (
+      scopeId: string,
+      issueId: string,
+      action: import("../api/public-types.ts").ScopeIssueAction,
+    ) => {
+      onScopeIssueActionRequested?.({ scopeId, issueId, action });
+    },
+    [onScopeIssueActionRequested],
+  );
   const zoomLevel = props.zoomLevel ?? 100;
   const zoomScale = typeof zoomLevel === "number" ? zoomLevel / 100 : 1;
   const pageZoomBucket =
@@ -1144,6 +1207,11 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                             tableContext={props.tableContext}
                             onSetColumnWidth={props.onSetColumnWidth}
                             onSetRowHeight={props.onSetRowHeight}
+                            activeScopeId={activeScopeId}
+                            onScopeStripeClick={handleScopeStripeClick}
+                            onScopeCardClose={handleScopeCardClose}
+                            onScopeCardModeChange={handleScopeCardModeChange}
+                            onScopeCardIssueAction={handleScopeCardIssueAction}
                           />
                         ) : null}
                       </div>
@@ -1280,6 +1348,13 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
             </div>
           ) : null}
         </div>
+        {props.modeDock ? (
+          <TwModeDock
+            label={props.modeDock.label}
+            icon={props.modeDock.icon}
+            actions={props.modeDock.actions}
+          />
+        ) : null}
       </div>
     </Tooltip.Provider>
   );