@beyondwork/docx-react-component 1.0.94 → 1.0.96

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beyondwork/docx-react-component",
   "publisher": "beyondwork",
-  "version": "1.0.94",
+  "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/api/v3/ai/replacement.ts

@@ -384,9 +384,9 @@ export function createReplacementFamily(runtime: RuntimeApiHandle) {
     },
 
     applyScopeAction(input: ApplyScopeActionInput): ApplyResult {
-      // @endStateApi — live-with-adapter. Routes through the scope
-      // compiler's applyFormatting + the same ApplyResult projection
-      // used by applyReplacementScope.
+      // @endStateApi — live-with-adapter. Routes scope actions through the
+      // shipped compiler/applyFormatting facade so AI-triggered formatting
+      // mutations share validation, audit, and undo semantics.
       const proposalId =
         input.proposalId ??
         mockId(

package/src/api/v3/runtime/formatting.ts

@@ -216,9 +216,9 @@ export function createFormattingFamily(runtime: RuntimeApiHandle) {
     },
 
     applyToScope(input: FormattingApplyToScopeInput): FormattingApplyToScopeResult {
-      // @endStateApi — live-with-adapter. Routes through the scope
-      // compiler's applyFormatting with actor=user + origin=ui; returns
-      // the authored-revision + audit shape projected for v3 callers.
+      // @endStateApi — live-with-adapter. Routes through the scope-compiler
+      // facade so scope-targeted formatting shares Layer-08 validation,
+      // audit, and runtime-owned mutation semantics.
       const result = compiler.applyFormatting({
         targetScopeId: input.scopeId,
         action: input.action,

package/src/core/commands/formatting-commands.ts

@@ -591,7 +591,7 @@ export function applyFormattingOperationToDocument(
 export type TextMarkClearTarget = TextMark["type"] | "visualHighlight";
 
 export type TextMarkRangeOperation =
-  | { type: "clear-mark"; mark: TextMarkClearTarget }
+  | { type: "clear-mark"; mark: TextMarkClearTarget; expandToFullHighlight?: boolean }
   | { type: "set-mark"; mark: TextMark };
 
 /**
@@ -605,8 +605,14 @@ export function applyTextMarkOperationToDocumentRange(
   range: { from: number; to: number },
   operation: TextMarkRangeOperation,
 ): FormattingMutationResult {
-  const selectionFrom = Math.min(range.from, range.to);
-  const selectionTo = Math.max(range.from, range.to);
+  const inputFrom = Math.min(range.from, range.to);
+  const inputTo = Math.max(range.from, range.to);
+  const expandedRange =
+    operation.type === "clear-mark" && operation.expandToFullHighlight === true
+      ? expandRangeToCanonicalHighlightExtent(document, inputFrom, inputTo)
+      : { from: inputFrom, to: inputTo };
+  const selectionFrom = expandedRange.from;
+  const selectionTo = expandedRange.to;
   const selection: RuntimeRenderSnapshot["selection"] = {
     anchor: selectionFrom,
     head: selectionTo,
@@ -671,6 +677,143 @@ export function applyTextMarkOperationToDocumentRange(
   };
 }
 
+function expandRangeToCanonicalHighlightExtent(
+  document: CanonicalDocumentEnvelope,
+  inputFrom: number,
+  inputTo: number,
+): { from: number; to: number } {
+  let from = inputFrom;
+  let to = inputTo;
+  const root = document.content as DocumentRootNode;
+  let cursor = 0;
+
+  for (let blockIndex = 0; blockIndex < root.children.length; blockIndex += 1) {
+    const block = root.children[blockIndex]!;
+    const blockFrom = cursor;
+    const blockLength =
+      block.type === "paragraph"
+        ? block.children.reduce(
+            (total, child) => total + inlineNodeLength(child as InlineNode),
+            0,
+          )
+        : 1;
+    const blockTo = blockFrom + blockLength;
+
+    if (
+      block.type === "paragraph" &&
+      rangesOverlap(inputFrom, inputTo, blockFrom, blockTo)
+    ) {
+      const spans = collectInlineHighlightSpans(block.children, blockFrom).spans;
+      const expanded = expandRangeWithinHighlightSpans(spans, inputFrom, inputTo);
+      if (expanded.from < from) from = expanded.from;
+      if (expanded.to > to) to = expanded.to;
+    }
+
+    cursor = blockTo;
+    if (blockIndex < root.children.length - 1) {
+      cursor += 1;
+    }
+  }
+
+  return { from, to };
+}
+
+interface HighlightSpan {
+  readonly from: number;
+  readonly to: number;
+  readonly highlighted: boolean;
+}
+
+function collectInlineHighlightSpans(
+  nodes: readonly InlineNode[],
+  start: number,
+): { spans: HighlightSpan[]; nextPosition: number } {
+  const spans: HighlightSpan[] = [];
+  let position = start;
+
+  for (const node of nodes) {
+    if (node.type === "text") {
+      const length = Array.from(node.text).length;
+      if (length > 0) {
+        spans.push({
+          from: position,
+          to: position + length,
+          highlighted: marksHaveVisualHighlight(node.marks),
+        });
+      }
+      position += length;
+      continue;
+    }
+
+    if (node.type === "hyperlink") {
+      const nested = collectInlineHighlightSpans(node.children as InlineNode[], position);
+      spans.push(...nested.spans);
+      position = nested.nextPosition;
+      continue;
+    }
+
+    const length = inlineNodeLength(node);
+    if (length > 0) {
+      spans.push({
+        from: position,
+        to: position + length,
+        highlighted: false,
+      });
+    }
+    position += length;
+  }
+
+  return { spans, nextPosition: position };
+}
+
+function expandRangeWithinHighlightSpans(
+  spans: readonly HighlightSpan[],
+  inputFrom: number,
+  inputTo: number,
+): { from: number; to: number } {
+  let from = inputFrom;
+  let to = inputTo;
+  let touchedLeftIndex = -1;
+  let touchedRightIndex = -1;
+
+  for (let i = 0; i < spans.length; i += 1) {
+    const span = spans[i]!;
+    if (!span.highlighted) continue;
+    if (rangesOverlap(inputFrom, inputTo, span.from, span.to)) {
+      if (touchedLeftIndex === -1) touchedLeftIndex = i;
+      touchedRightIndex = i;
+    }
+  }
+
+  if (touchedLeftIndex === -1) {
+    return { from, to };
+  }
+
+  for (let i = touchedLeftIndex; i >= 0; i -= 1) {
+    const span = spans[i]!;
+    if (!span.highlighted) break;
+    if (span.to < from) break;
+    if (span.from < from) from = span.from;
+  }
+
+  for (let i = touchedRightIndex; i < spans.length; i += 1) {
+    const span = spans[i]!;
+    if (!span.highlighted) break;
+    if (span.from > to) break;
+    if (span.to > to) to = span.to;
+  }
+
+  return { from, to };
+}
+
+function marksHaveVisualHighlight(marks: readonly TextMark[] | undefined): boolean {
+  return (
+    marks?.some((mark) =>
+      mark.type === "highlight" || mark.type === "backgroundColor"
+    ) ?? false
+  );
+}
+
 function resolveTextMarkRangeUpdater(
   operation: TextMarkRangeOperation,
 ): (marks?: TextMark[]) => TextMark[] | undefined {

package/src/core/state/text-transaction.ts

@@ -130,9 +130,12 @@ function applyLinearTextTransaction(
 
   // `normalizedRange.{from,to}` are logical positions (scope markers = 0 width,
   // matching surface-projection). Translate to unit-array indices so scope
-  // marker units preserved at the boundary stay intact on either side.
-  const unitFrom = logicalPositionToUnitIndex(story.units, normalizedRange.from, "before");
-  const unitTo = logicalPositionToUnitIndex(story.units, normalizedRange.to, "after");
+  // marker units sitting exactly on the replacement boundaries stay intact:
+  // start-boundary markers remain before the inserted payload, end-boundary
+  // markers remain after it. Markers strictly inside the range are still part
+  // of the replacement/delete slice.
+  const unitFrom = logicalPositionToUnitIndex(story.units, normalizedRange.from, "after");
+  const unitTo = logicalPositionToUnitIndex(story.units, normalizedRange.to, "before");
 
   ensureEditableRange(story.units.slice(unitFrom, unitTo));
 

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",
           },
         );
@@ -3531,6 +3539,9 @@ export function createDocumentRuntime(
             ? {
                 type: "clear-mark" as const,
                 mark: step.formattingAction.mark,
+                ...(step.formattingAction.expandToFullHighlight === true
+                  ? { expandToFullHighlight: true as const }
+                  : {}),
               }
             : {
                 type: "set-mark" as const,
@@ -6445,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/scopes/semantic-scope-types.ts

@@ -332,6 +332,15 @@ export type ScopeFormattingAction =
        * `"visualHighlight"` to remove both visual highlight layers.
        */
       readonly mark: ScopeFormattingClearTarget;
+      /**
+       * When true, expand the target range to the full contiguous visual
+       * highlight span that touches it before clearing. Mirrors
+       * `clearHighlight({expandToFullHighlight:true})`; the clear remains
+       * source-layer exact, so `mark:"highlight"` still removes only
+       * `w:highlight`, while `mark:"visualHighlight"` removes highlight +
+       * shading across the expanded span.
+       */
+      readonly expandToFullHighlight?: boolean;
     }
   | {
       readonly kind: "set-mark";

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/WordReviewEditor.tsx

@@ -3931,18 +3931,11 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         }}
         onDeselectObject={() => activeRuntime.deselectObject()}
         onScopeAskAgent={(payload) => {
-          // Resolve the scope's anchor + story from the workflow
-          // facet's card model so the agent request carries the
-          // canonical range. Layer-06 Slice 4 made `runtime.workflow`
-          // the canonical source for scope-card data.
-          const models = activeRuntime.workflow.getAllScopeCardModels();
-          const model = models.find((entry) => entry.scopeId === payload.scopeId);
-          if (!model) return;
-          const scopeSnapshot = activeRuntime.getWorkflowScopeSnapshot();
-          const scopes = scopeSnapshot?.scopes ?? [];
-          const scope = scopes.find((entry) => entry.scopeId === payload.scopeId);
-          if (!scope) return;
-          const anchor = scope.anchor;
+          // Resolve scope card + story through the mounted UI API seam so
+          // the shell root does not re-own workflow facet reads.
+          const model = api.ui?.scope.card(payload.scopeId) ?? null;
+          const bundle = api.ui?.scope.getBundle(payload.scopeId) ?? null;
+          const anchor = payload.anchor ?? model?.anchor;
           if (!anchor) return;
           const requestId =
             typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
@@ -3957,8 +3950,10 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
             requestId,
             scopeId: payload.scopeId,
             anchor,
-            selectionText: model.label ?? "",
-            ...(scope.storyTarget ? { storyTarget: scope.storyTarget } : {}),
+            selectionText: model?.label ?? "",
+            ...(bundle?.scope.handle.storyTarget
+              ? { storyTarget: bundle.scope.handle.storyTarget }
+              : {}),
           };
           onEventRef.current?.(eventPayload);
         }}

package/src/ui/editor-shell-view.tsx

@@ -162,7 +162,10 @@ export interface EditorShellViewProps {
     groupId: string;
   }) => void;
   /** K2 — forwarded from workspace to WordReviewEditor. */
-  onScopeAskAgent?: (payload: { scopeId: string }) => void;
+  onScopeAskAgent?: (payload: {
+    scopeId: string;
+    anchor?: import("../api/public-types.ts").EditorAnchorProjection;
+  }) => void;
   /** N6 — deselects the currently grabbed object; wired to runtime.deselectObject(). */
   onDeselectObject?: () => void;
   mediaPreviews?: Record<string, MediaPreviewDescriptor>;

package/src/ui-tailwind/chrome-overlay/tw-chrome-overlay.tsx

@@ -28,6 +28,7 @@ import { TwScopeCardLayer } from "./tw-scope-card-layer";
 import { TwPageStackChromeLayer, type PmPortalView } from "../page-stack/tw-page-stack-chrome-layer";
 import { TwTableGripLayer } from "../chrome/tw-table-grip-layer";
 import { TwObjectSelectionOverlay } from "./tw-object-selection-overlay";
+import { useUiApi } from "../ui-api-context";
 
 export interface TwChromeOverlayProps {
   /** Layout facet the overlay layers read from (layout-semantic data). */
@@ -39,10 +40,9 @@ export interface TwChromeOverlayProps {
    */
   geometryFacet: import("../../runtime/geometry/index.ts").GeometryFacet;
   /**
-   * Workflow facet — Layer-06 canonical source of scope rail segments
-   * + scope card models (`runtime.workflow`). Required for scope-rail
-   * / scope-card rendering; pass `null` when no runtime is attached
-   * (e.g., during initial mount).
+   * Workflow facet — no-provider fallback for scope rail/card reads.
+   * Mounted editor paths prefer `api.ui.scope.*`; pass `null` when no
+   * runtime is attached (e.g., during initial mount).
    */
   workflowFacet: import("../../runtime/workflow/rail/types.ts").WorkflowFacet | null;
   /** Optional coordinate space override.  Defaults to the overlay origin. */
@@ -242,6 +242,15 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
   mediaPreviews,
   activeBandRibbonProps,
 }) => {
+  const ui = useUiApi();
+  const scopeRailSegments = React.useMemo(
+    () =>
+      ui?.scope.rail().segments ??
+      workflowFacet?.getAllRailSegments() ??
+      [],
+    [ui, workflowFacet, renderFrameRevision],
+  );
+
   return (
     <div
       className="wre-chrome-overlay pointer-events-none absolute inset-0 z-30"
@@ -266,6 +275,7 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
       <TwScopeRailLayer
         geometryFacet={geometryFacet}
         workflowFacet={workflowFacet}
+        scopeRailSegments={scopeRailSegments}
         space={space}
         activeScopeId={activeScopeId}
         onStripeClick={onScopeStripeClick}

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
@@ -17,6 +17,7 @@ import {
   projectRectToOverlay,
   type OverlayCoordinateSpace,
 } from "./chrome-overlay-projector";
+import { useUiApi } from "../ui-api-context";
 import type { RenderFrame, RenderFrameRect } from "../../api/public-types.ts";
 import type { ScopeRailSegment, ScopeRailPosture } from "../../api/public-types.ts";
 import type { WorkflowFacet } from "../../api/public-types.ts";
@@ -30,16 +31,21 @@ export interface TwScopeRailLayerProps {
   /**
    * Geometry facet — used for `getRenderFrame()`. Migrated from
    * `facet: WordReviewEditorLayoutFacet` in refactor/05 cross-lane-coord
-   * §8.4 pass. Rail-segment + scope-card data flows through
-   * `workflowFacet` per Layer-06 Slice 4's seam inversion.
+   * §8.4 pass. Mounted rail/card data flows through `api.ui.scope.*`.
    */
   geometryFacet: GeometryFacet;
   /**
-   * Workflow facet — canonical source of scope rail segments + scope
-   * card models (`runtime.workflow.*`). Required for the layer to
-   * render anything; passing `null` makes the layer a no-op.
+   * Workflow facet — no-provider fallback for scope rail/card reads.
+   * Mounted editor paths prefer `api.ui.scope.*`; passing `null` makes
+   * fallback reads no-op.
    */
   workflowFacet: WorkflowFacet | null;
+  /**
+   * Optional pre-read rail snapshot from `ui.scope.rail()`. When omitted,
+   * the layer reads the mounted UI API itself, then falls back to the
+   * workflow facet for no-provider paths.
+   */
+  scopeRailSegments?: readonly ScopeRailSegment[];
   /** Overlay's coordinate space.  Defaults to the overlay's own origin. */
   space?: OverlayCoordinateSpace;
   /** Horizontal pad (px) the rail gutter occupies to the left of body. */
@@ -88,12 +94,13 @@ const POSTURE_STYLES: Record<ScopeRailPosture, PostureStyle> = {
 
 const DEFAULT_RAIL_LANE_PX = 44;
 const STRIPE_WIDTH_PX = 4;
-const LABEL_WIDTH_PX = 40;
+const LABEL_WIDTH_PX = 28;
 const STACK_OFFSET_PX = 6;
 
 export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
   geometryFacet,
   workflowFacet,
+  scopeRailSegments,
   space,
   railLaneWidthPx = DEFAULT_RAIL_LANE_PX,
   activeScopeId,
@@ -101,8 +108,13 @@ export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
   onSegmentClick,
   "data-testid": testId,
 }) => {
+  const ui = useUiApi();
   const frame = geometryFacet.getRenderFrame() ?? null;
-  const segments = workflowFacet?.getAllRailSegments() ?? [];
+  const segments =
+    scopeRailSegments ??
+    ui?.scope.rail().segments ??
+    workflowFacet?.getAllRailSegments() ??
+    [];
 
   if (!frame || segments.length === 0) {
     return null;
@@ -110,15 +122,23 @@ export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
 
   // P2: which scopes currently have a `source: "ai"` candidate
   // overlapping — drives the agent-pending shimmer class on their
-  // tints. Reads from the workflow facet's card-model projection so the
-  // shimmer logic lives in the Layer-06 runtime, not the overlay.
-  const cardModels = workflowFacet?.getAllScopeCardModels() ?? [];
+  // tints. Mounted surfaces read card projections through ui.scope.card;
+  // no-provider paths fall back to the workflow facet.
+  const cardModels = ui ? [] : workflowFacet?.getAllScopeCardModels() ?? [];
   const agentPendingByScope = new Map<string, boolean>();
   for (const model of cardModels) {
     if (model.agentPending) {
       agentPendingByScope.set(model.scopeId, true);
     }
   }
+  if (ui) {
+    for (const segment of segments) {
+      const model = ui.scope.card(segment.scopeId);
+      if (model?.agentPending) {
+        agentPendingByScope.set(segment.scopeId, true);
+      }
+    }
+  }
 
   // P3c: stack offsets for overlapping scopes.  Two scopes whose
   // offset ranges intersect on the same page render as stacked
@@ -222,17 +242,20 @@ export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
               onKeyDown={handleStripeKey}
               style={projectRectToOverlay(stripeRect, projectorSpace)}
             />
-            {/* Label pill — revealed on stripe hover via CSS. */}
-            <div
+            {/* Edit handle — revealed on stripe hover via CSS. */}
+            <button
+              type="button"
+              tabIndex={-1}
               className={`wre-scope-rail-label wre-scope-rail-label-${style.railToken}`}
               data-scope-id={segment.scopeId}
               data-posture={segment.posture}
-              aria-hidden="true"
+              aria-label={`Edit scope${segment.label ? `: ${segment.label}` : ""}`}
+              onClick={handleActivate}
               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>
-            </div>
+            </button>
           </React.Fragment>
         );
       })}

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

@@ -402,13 +402,7 @@ function buildParagraph(
       indentRight: paragraphLayout.indentation?.right ?? null,
       indentFirstLine: paragraphLayout.indentation?.firstLine ?? null,
       indentHanging: paragraphLayout.indentation?.hanging ?? null,
-      numberingMarkerWidth:
-        paragraphLayout.markerLane?.width ??
-        paragraphLayout.indentation?.hanging ??
-        (paragraphLayout.indentation?.firstLine !== undefined &&
-        paragraphLayout.indentation.firstLine < 0
-          ? Math.abs(paragraphLayout.indentation.firstLine)
-          : null),
+      numberingMarkerWidth: paragraphLayout.markerLane?.width ?? null,
       numberingMarkerStart: paragraphLayout.markerLane?.start ?? null,
       numberingMarkerJustification: paragraphLayout.markerJustification ?? null,
       numberingMarkerRunProperties: block.resolvedNumbering?.markerRunProperties ?? null,

package/src/ui-tailwind/review-workspace/use-scope-card-state.ts

@@ -9,13 +9,13 @@ import {
   cycleScopeIndex,
   shouldHandleScopeNavKey,
 } from "../chrome-overlay/scope-keyboard-cycle";
+import { useUiApi } from "../ui-api-context.tsx";
 
 export interface UseScopeCardStateOptions {
   layoutFacet?: import("../../runtime/layout/index.ts").WordReviewEditorLayoutFacet;
   /**
-   * Layer-06 workflow facet — canonical source of scope card models.
-   * Required by the keyboard-nav loop + Ask-agent handler after Slice 4
-   * rail-seam inversion removed those methods from `layoutFacet`.
+   * Layer-06 workflow facet — no-provider fallback for scope card models.
+   * Mounted paths prefer `api.ui.scope.rail/card`.
    */
   workflowFacet?: import("../../runtime/workflow/rail/types.ts").WorkflowFacet;
   onScopeModeChangeRequested?: (payload: {
@@ -79,6 +79,31 @@ export function useScopeCardState(options: UseScopeCardStateOptions): ScopeCardS
   void layoutFacet;
 
   const [activeScopeId, setActiveScopeId] = useState<string | null>(null);
+  const ui = useUiApi();
+
+  const readScopeIds = useCallback((): string[] => {
+    if (ui) {
+      const ids: string[] = [];
+      const seen = new Set<string>();
+      for (const segment of ui.scope.rail().segments) {
+        if (seen.has(segment.scopeId)) continue;
+        seen.add(segment.scopeId);
+        ids.push(segment.scopeId);
+      }
+      return ids;
+    }
+    return workflowFacet?.getAllScopeCardModels().map((model) => model.scopeId) ?? [];
+  }, [ui, workflowFacet]);
+
+  const readScopeCard = useCallback(
+    (scopeId: string) => {
+      if (ui) return ui.scope.card(scopeId);
+      return workflowFacet
+        ?.getAllScopeCardModels()
+        .find((m) => m.scopeId === scopeId) ?? null;
+    },
+    [ui, workflowFacet],
+  );
 
   const handleScopeStripeClick = useCallback(
     (segment: { scopeId: string }) => {
@@ -94,14 +119,13 @@ export function useScopeCardState(options: UseScopeCardStateOptions): ScopeCardS
   }, []);
 
   useEffect(() => {
-    if (!workflowFacet) {
+    if (!ui && !workflowFacet) {
       return undefined;
     }
     const onKey = (event: KeyboardEvent) => {
       if (!shouldHandleScopeNavKey(event)) return;
-      const models = workflowFacet.getAllScopeCardModels();
-      if (models.length === 0) return;
-      const ids = models.map((model) => model.scopeId);
+      const ids = readScopeIds();
+      if (ids.length === 0) return;
       const key = event.key.toLowerCase();
       if (key === "enter") {
         if (!activeScopeId) {
@@ -117,7 +141,7 @@ export function useScopeCardState(options: UseScopeCardStateOptions): ScopeCardS
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-  }, [workflowFacet, activeScopeId]);
+  }, [ui, workflowFacet, activeScopeId, readScopeIds]);
 
   const handleScopeCardModeChange = useCallback(
     (scopeId: string, mode: WorkflowScopeMode) => {
@@ -149,12 +173,10 @@ export function useScopeCardState(options: UseScopeCardStateOptions): ScopeCardS
 
   const handleScopeCardAskAgent = useCallback(
     (scopeId: string) => {
-      const cardModel = workflowFacet
-        ?.getAllScopeCardModels()
-        .find((m) => m.scopeId === scopeId);
+      const cardModel = readScopeCard(scopeId);
       onScopeAskAgent?.({ scopeId, anchor: cardModel?.anchor });
     },
-    [onScopeAskAgent, workflowFacet],
+    [onScopeAskAgent, readScopeCard],
   );
 
   return {

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>');

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

@@ -283,13 +283,20 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   //     changed, re-read any attached anchors" marker. Per-query
   //     invalidation fan-out is a Phase Q follow-up — the geometry
   //     facet does not yet expose per-kind invalidation events.
-  const uiApiForEmit = useUiApi();
+  const uiApi = useUiApi();
   const shellChannels = useUiShellChannels();
   React.useEffect(() => {
-    if (!uiApiForEmit || !shellChannels) return;
-    shellChannels.viewport.emit(uiApiForEmit.viewport.get());
+    if (!uiApi || !shellChannels) return;
+    shellChannels.viewport.emit(uiApi.viewport.get());
     shellChannels.overlays.emit({ kind: "page", value: 0 });
-  }, [renderFrameRevision, uiApiForEmit, shellChannels]);
+  }, [renderFrameRevision, uiApi, shellChannels]);
+  const scopeRailSegments = useMemo(
+    () =>
+      uiApi?.scope.rail().segments ??
+      props.workflowFacet?.getAllRailSegments() ??
+      [],
+    [uiApi, props.workflowFacet, renderFrameRevision],
+  );
   const headings = props.documentNavigation?.headings ?? [];
   const headerVariant = snapshot.pageLayout?.headerVariants[0]?.variant ?? "default";
   const footerVariant = snapshot.pageLayout?.footerVariants[0]?.variant ?? "default";
@@ -1272,10 +1279,10 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
               onRejectRevision: props.onRejectRevision,
               onAcceptAllChanges: props.onAcceptAllChanges,
               onRejectAllChanges: props.onRejectAllChanges,
-              // Slice 4C rail-seam inversion: segments now come from the
-              // Layer-06 workflow facet. Layout facet no longer exposes
-              // `getAllScopeRailSegments` (methods removed in v40 / Slice 4C).
-              scopeRailSegments: props.workflowFacet?.getAllRailSegments() ?? [],
+              // Layer 11 closeout: mounted workspace chrome reads scope
+              // rail data through `api.ui.scope.rail()`, with the workflow
+              // facet retained as the no-provider fallback.
+              scopeRailSegments,
               activeScopeId,
               onOpenScope: (segment) => {
                 handleScopeStripeClick({ scopeId: segment.scopeId });