@beyondwork/docx-react-component 1.0.95 → 1.0.96

package/package.json

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

package/src/runtime/document-runtime.ts

@@ -13,6 +13,7 @@ import {
   type EditorWarning as InternalEditorWarning,
 } from "../core/state/editor-state.ts";
 import {
+  createPlainText,
   logicalPositionToUnitIndex,
   parseTextStory,
   serializeTextStory,
@@ -3195,6 +3196,13 @@ export function createDocumentRuntime(
     replaceText(text, target, formatting) {
       try {
         const timestamp = clock();
+        const selection = target ? createSelectionFromPublicAnchor(target) : state.selection;
+        if (
+          shouldPreserveEquivalentReplacement(formatting) &&
+          replacementTextMatchesCurrentRange(state.document, activeStory, selection, text)
+        ) {
+          return;
+        }
         applyTextCommandInActiveStory(
           {
             type: "text.insert",
@@ -3203,7 +3211,7 @@ export function createDocumentRuntime(
             origin: createOrigin("api", timestamp),
           },
           {
-            selection: target ? createSelectionFromPublicAnchor(target) : state.selection,
+            selection,
             blockedCommandName: "replaceText",
           },
         );
@@ -6448,6 +6456,43 @@ function createSelectionFromPublicAnchor(
   }
 }
 
+function shouldPreserveEquivalentReplacement(formatting: TextFormattingDirective | undefined): boolean {
+  return !formatting || formatting.mode === "match-replaced-range";
+}
+
+function replacementTextMatchesCurrentRange(
+  document: CanonicalDocumentEnvelope,
+  activeStory: EditorStoryTarget,
+  selection: import("../core/state/editor-state.ts").SelectionSnapshot,
+  replacement: string,
+): boolean {
+  const from = Math.max(0, Math.min(selection.anchor, selection.head));
+  const to = Math.max(0, Math.max(selection.anchor, selection.head));
+  if (from === to) {
+    return replacement.length === 0;
+  }
+
+  const content = activeStory.kind === "main"
+    ? document.content
+    : {
+        type: "doc" as const,
+        children: [...getStoryBlocks(document, activeStory)],
+      };
+  const story = parseTextStory(content);
+  if (from > story.size || to > story.size) {
+    return false;
+  }
+
+  const unitFrom = logicalPositionToUnitIndex(story.units, from, "after");
+  const unitTo = logicalPositionToUnitIndex(story.units, to, "before");
+  const selectedText = createPlainText({
+    firstParagraph: story.firstParagraph,
+    units: story.units.slice(unitFrom, unitTo),
+    size: to - from,
+  });
+  return selectedText === replacement;
+}
+
 /**
  * I2 Tier B Slice 4b — extract the selection range from a document as a
  * `CanonicalDocumentFragment`. The fragment preserves text + marks +

package/src/runtime/workflow/rail/compose.ts

@@ -94,6 +94,11 @@ export function collectScopeRailSegments(
   const activeIds = new Set(input.activeWorkItemScopeIds ?? []);
 
   for (const scope of input.scopes ?? []) {
+    // Invisible scopes are runtime/agent context only. They may still
+    // participate in guard decisions, but they must not surface as rail,
+    // card, or body-tint chrome.
+    if (scope.visibility === "invisible") continue;
+
     const range = anchorToRuntimeRange(scope.anchor);
     if (!range) continue;
     const storyTarget = scope.storyTarget ?? MAIN_STORY_TARGET;

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,
@@ -253,16 +250,6 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
       [],
     [ui, workflowFacet, renderFrameRevision],
   );
-  const visibleScopeIds = React.useMemo(() => {
-    if (!visibleScopePostures) return undefined;
-    const ids = new Set<string>();
-    for (const segment of scopeRailSegments) {
-      if (visibleScopePostures.has(segment.posture)) {
-        ids.add(segment.scopeId);
-      }
-    }
-    return ids;
-  }, [scopeRailSegments, visibleScopePostures]);
 
   return (
     <div
@@ -291,7 +278,6 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
         scopeRailSegments={scopeRailSegments}
         space={space}
         activeScopeId={activeScopeId}
-        visibleScopePostures={visibleScopePostures}
         onStripeClick={onScopeStripeClick}
         onSegmentClick={onScopeSegmentClick}
       />
@@ -299,7 +285,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

@@ -53,8 +53,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: (
@@ -94,7 +92,6 @@ export const TwScopeCardLayer: React.FC<TwScopeCardLayerProps> = ({
   facet,
   workflowFacet,
   activeScopeId,
-  visibleScopeIds,
   onClose,
   onModeChange,
   onIssueAction,
@@ -131,11 +128,10 @@ export const TwScopeCardLayer: React.FC<TwScopeCardLayerProps> = ({
   const getVisibleScopeCardModel = React.useCallback(
     (scopeId: string | null): ScopeCardModel | null => {
       if (!scopeId) return null;
-      if (visibleScopeIds && !visibleScopeIds.has(scopeId)) return null;
       if (ui) return ui.scope.card(scopeId);
       return getWorkflowScopeCardModel(scopeId);
     },
-    [getWorkflowScopeCardModel, ui, visibleScopeIds],
+    [getWorkflowScopeCardModel, ui],
   );
 
   // The effective scope is the pinned one if it still resolves to a

package/src/ui-tailwind/chrome-overlay/tw-scope-rail-layer.tsx

@@ -1,7 +1,7 @@
 /**
  * Scope rail layer — renders workflow scopes as a thin color stripe in
- * the reserved left-gutter lane plus a per-line flat tint behind the
- * scoped text runs.
+ * the reserved left-gutter lane plus a border-only line outline. The
+ * visible scope ownership border lives on the PM inline text decoration.
  *
  * Per runtime-rendering-and-chrome-phase.md §5 and
  * docs/plans/scope-card-overlay.md P0, the rail is a projection over
@@ -52,8 +52,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.
@@ -95,8 +93,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 = 28;
 const STACK_OFFSET_PX = 6;
 
 export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
@@ -106,21 +104,17 @@ export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
   space,
   railLaneWidthPx = DEFAULT_RAIL_LANE_PX,
   activeScopeId,
-  visibleScopePostures,
   onStripeClick,
   onSegmentClick,
   "data-testid": testId,
 }) => {
   const ui = useUiApi();
   const frame = geometryFacet.getRenderFrame() ?? null;
-  const railSegments =
+  const segments =
     scopeRailSegments ??
     ui?.scope.rail().segments ??
     workflowFacet?.getAllRailSegments() ??
     [];
-  const segments = railSegments.filter((segment) =>
-    visibleScopePostures ? visibleScopePostures.has(segment.posture) : true,
-  );
 
   if (!frame || segments.length === 0) {
     return null;
@@ -248,16 +242,14 @@ export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
               onKeyDown={handleStripeKey}
               style={projectRectToOverlay(stripeRect, projectorSpace)}
             />
-            {/* Label pill — revealed on stripe hover via CSS. */}
+            {/* Edit handle — 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" : ""
-              }`}
+              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}` : ""}`}
+              aria-label={`Edit scope${segment.label ? `: ${segment.label}` : ""}`}
               onClick={handleActivate}
               style={projectRectToOverlay(labelRect, projectorSpace)}
             >

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

@@ -379,17 +379,31 @@
 /*
  * ─── Workflow inline text emphasis ───
  *
- * Since R3a the workflow scope rail + flat block tint are painted on the
- * ChromeOverlay plane (see src/ui-tailwind/chrome-overlay/).  PM
- * decorations retain ONLY inline text emphasis for postures that carry
- * unique per-text signals (candidate = dashed underline, blocked-import =
- * wavy underline, active = thin outline).  The rounded in-text background
- * boxes that previously wrapped every run are gone — the overlay's flat
- * tint handles that signal.
+ * Scopes should read as text ownership, not block selection.  PM inline
+ * decorations carry the visible border on the scoped text, while the
+ * ChromeOverlay plane supplies the gutter/action rail.  Keep this
+ * border-only: no filled boxes over document content.
  */
 .prosemirror-surface .ProseMirror .wre-workflow-inline {
   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
+  border-radius: 2px;
+}
+
+.prosemirror-surface .ProseMirror .wre-workflow-inline-edit {
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 52%, transparent);
+}
+
+.prosemirror-surface .ProseMirror .wre-workflow-inline-suggest {
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-warning) 56%, transparent);
+}
+
+.prosemirror-surface .ProseMirror .wre-workflow-inline-comment {
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-insert) 48%, transparent);
+}
+
+.prosemirror-surface .ProseMirror .wre-workflow-inline-view {
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-secondary) 46%, transparent);
 }
 
 .prosemirror-surface .ProseMirror .wre-workflow-inline-candidate {
@@ -408,31 +422,29 @@
 
 /*
  * Locked zone marker for inline runs: a subtle dotted right edge so the
- * reader can tell where the locked range ends when the gutter label scrolls
- * out of view.  The overlay's flat tint carries the primary signal.
+ * reader can tell where the locked range ends when the gutter handle scrolls
+ * out of view.  The rail carries the action affordance.
  */
 .prosemirror-surface .ProseMirror .wre-workflow-inline-locked-zone {
   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.
+ * Active scope emphasis is a stronger text border plus the gutter handle.
+ * This keeps focus local to scoped text without reintroducing filled green
+ * rectangles.
  */
 .prosemirror-surface .ProseMirror .wre-workflow-inline-active {
-  /* intentionally empty — visual emphasis handled by ChromeOverlay */
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--color-accent) 72%, transparent),
+    0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
 }
 
 /*
  * ─── ChromeOverlay: scope rail layer ───
  *
- * The overlay sits above PM and paints the flat block-tint + gutter labels
- * that used to be inline PM decorations.  Positions come from the render
- * kernel's anchor index, not DOM rects.
+ * The overlay sits above PM and paints gutter handles plus optional
+ * border-only line outlines.  It must not fill document content.
  */
 .wre-scope-rail-layer {
   pointer-events: none;
@@ -471,58 +483,36 @@
   border-radius: 0.2rem;
   pointer-events: none;
   z-index: 0;
-  transition: background 140ms ease-out;
-}
-
-.wre-scope-rail-tint-accent {
-  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
-}
-.wre-scope-rail-tint-warning {
-  background: color-mix(in srgb, var(--color-warning) 14%, transparent);
-}
-.wre-scope-rail-tint-insert {
-  background: color-mix(in srgb, var(--color-insert) 12%, transparent);
-}
-.wre-scope-rail-tint-secondary {
-  background: color-mix(in srgb, var(--color-secondary) 9%, transparent);
-}
-.wre-scope-rail-tint-danger {
-  background: color-mix(in srgb, var(--color-danger) 14%, transparent);
-}
-
-/* §3.7 canonical scope families */
-.wre-scope-rail-tint-blocked {
-  background: var(--color-scope-tint-blocked);
-}
-.wre-scope-rail-tint-in-scope {
-  background: var(--color-scope-tint-in-scope);
-}
-.wre-scope-rail-tint-suggest {
-  background: var(--color-scope-tint-suggest);
-}
-.wre-scope-rail-tint-comment {
-  background: var(--color-scope-tint-comment);
-}
-.wre-scope-rail-tint-scheduled {
-  background: var(--color-scope-tint-scheduled);
-}
+  background: transparent;
+  transition: box-shadow 140ms ease-out;
+}
+
+.wre-scope-rail-tint-accent,
+.wre-scope-rail-tint-warning,
+.wre-scope-rail-tint-insert,
+.wre-scope-rail-tint-secondary,
+.wre-scope-rail-tint-danger,
+.wre-scope-rail-tint-blocked,
+.wre-scope-rail-tint-in-scope,
+.wre-scope-rail-tint-suggest,
+.wre-scope-rail-tint-comment,
+.wre-scope-rail-tint-scheduled,
 .wre-scope-rail-tint-proposed {
-  background: var(--color-scope-tint-proposed);
+  background: transparent;
 }
 
 .wre-scope-rail-tint-active {
-  outline: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
+  outline: 1px solid color-mix(in srgb, var(--color-accent) 52%, transparent);
   outline-offset: -1px;
 }
 
 /*
  * ─── Agent-pending shimmer (K2 / scope-card-overlay P2) ───
  *
- * Painted on every scope tint that overlaps a WorkflowCandidateRange
- * with `source: "ai"`.  A soft 1.8s pulse signals the agent is
- * thinking without competing with the active outline.  Reduced-
- * motion disables the animation and holds a static 60% opacity
- * border so the posture is still readable.
+ * Painted on every scope outline that overlaps a WorkflowCandidateRange
+ * with `source: "ai"`. A soft 1.8s pulse signals the agent is thinking
+ * without competing with the active outline. Reduced-motion disables the
+ * animation and holds a static 60% opacity outline.
  */
 @keyframes wre-agent-pulse {
   0%, 100% { opacity: 0.4; }
@@ -544,9 +534,9 @@
  * ─── 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.
+ * 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 edit handle.
  */
 .wre-scope-rail-stripe {
   position: absolute;
@@ -595,34 +585,31 @@
 .wre-scope-rail-stripe.wre-scope-rail-tint-proposed  { background: var(--color-scope-tint-proposed); }
 
 /*
- * ─── Scope rail label pill ───
+ * ─── Scope rail edit handle ───
  *
- * 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.
+ * Shown only on stripe hover (CSS-driven). The handle overlays the
+ * stripe with a compact icon anchored to the first line of the scope.
  */
 .wre-scope-rail-label {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.2rem;
-  padding: 0.15rem 0.3rem;
-  border-radius: var(--radius-sm);
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border-radius: 999px;
   border: 1px solid transparent;
   background: var(--color-canvas, #fff);
   box-shadow: var(--shadow-sm);
-  font-size: 9.5px;
-  line-height: 1;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  font-weight: 600;
+  font: inherit;
   cursor: pointer;
   z-index: 2;
   opacity: 0;
   pointer-events: none;
   transition: opacity 140ms ease-out, transform 140ms ease-out;
   transform: translateX(-4px);
+  margin: 0;
 }
 
 .wre-scope-rail-stripe:hover + .wre-scope-rail-label,
@@ -697,8 +684,8 @@
 
 .wre-scope-rail-icon {
   display: inline-block;
-  width: 14px;
-  height: 14px;
+  width: 13px;
+  height: 13px;
   background-color: currentColor;
   mask-repeat: no-repeat;
   mask-position: center;
@@ -708,6 +695,10 @@
   -webkit-mask-size: contain;
 }
 
+.wre-scope-rail-label-text {
+  display: none;
+}
+
 /* Simple inline-SVG-as-mask icons so consumers don't need an icon font. */
 .wre-scope-rail-icon-lock {
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></svg>');