@beyondwork/docx-react-component 1.0.90 → 1.0.91

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beyondwork/docx-react-component",
   "publisher": "beyondwork",
-  "version": "1.0.90",
+  "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/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
@@ -1178,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}
@@ -1285,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;
-}