@beyondwork/docx-react-component 1.0.88 → 1.0.89

package/src/ui-tailwind/chrome/tw-detach-handle.tsx

@@ -1,6 +1,6 @@
 /**
- * Shared detach/attach primitive for chrome surfaces that can float vs
- * dock.  Extracted from the hand-rolled implementation in
+ * Shared placement primitive for chrome surfaces that can be pinned near
+ * the document. Extracted from the hand-rolled implementation in
  * `tw-selection-tool-host.tsx` so the same UX works on the topnav, the
  * selection tier, and any future overlay layer that opts in.
  *
@@ -10,7 +10,7 @@
  */
 
 import React, { useCallback, useEffect, useRef } from "react";
-import { GripHorizontal } from "lucide-react";
+import { GripHorizontal, Pin, PinOff } from "lucide-react";
 
 import type {
   ChromePinSurface,
@@ -21,11 +21,11 @@ import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-edi
 export interface TwDetachHandleProps {
   /** Which chrome surface this handle controls; stored in ViewState. */
   surface: ChromePinSurface;
-  /** Current pin state; `undefined` means docked-default. */
+  /** Current pin state; `undefined` means the surface follows its anchor. */
   pin?: PinState;
   /** Callback fired with the next pin state (null = clear). */
   onChange: (surface: ChromePinSurface, pin: PinState | null) => void;
-  /** Human label rendered next to the status chip. */
+  /** Human label used for accessible labels. No visible product copy is rendered. */
   label: string;
   /** Optional test id override. */
   "data-testid"?: string;
@@ -34,7 +34,7 @@ export interface TwDetachHandleProps {
 }
 
 /**
- * Compact grip + Float/Dock toggle row.  Consumers mount this inline
+ * Compact grip + keep-visible toggle row.  Consumers mount this inline
  * above the surface's content; when `pin.detached === true` the consumer
  * translates the surface by `pin.offset.x / y` itself (the handle does
  * not wrap the payload).
@@ -110,39 +110,34 @@ export function TwDetachHandle(props: TwDetachHandleProps): React.JSX.Element {
   return (
     <div
       className={[
-        "inline-flex items-center gap-1.5 self-center rounded-lg border border-border/70 bg-canvas/94 px-1.5 py-1 shadow-[0_8px_20px_-18px_var(--color-shadow-strong)]",
+        "inline-flex items-center gap-0.5 self-center rounded-lg border border-border/70 bg-canvas/94 px-1 py-1 shadow-[0_8px_20px_-18px_var(--color-shadow-strong)]",
         props.className ?? "",
       ]
         .filter(Boolean)
         .join(" ")}
       data-testid={props["data-testid"] ?? `detach-handle-${surface}`}
       data-surface={surface}
+      aria-label={`${label} placement controls`}
     >
       <button
         type="button"
-        aria-label={isDetached ? "Drag floating menu" : "Drag to float menu"}
+        aria-label={`Move ${label}`}
         data-testid={dragHandleTestId}
-        className="inline-flex h-6 items-center justify-center rounded-md border border-transparent px-1.5 text-tertiary transition-colors hover:border-border/60 hover:bg-surface hover:text-primary"
+        className="inline-flex h-6 w-6 items-center justify-center rounded-md border border-transparent text-tertiary transition-colors hover:border-border/60 hover:bg-surface hover:text-primary"
         onMouseDown={beginDrag}
       >
         <GripHorizontal className="h-3 w-3" />
       </button>
-      <span className="text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
-        {label}
-      </span>
-      <span className="rounded-full bg-surface px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-[0.08em] text-secondary">
-        {isDetached ? "Floating" : "Docked"}
-      </span>
       <button
         type="button"
-        aria-label={isDetached ? "Dock menu" : "Float menu"}
+        aria-label={isDetached ? `Return ${label} to selection` : `Keep ${label} visible`}
         aria-pressed={isDetached}
         data-testid={toggleTestId}
-        className="inline-flex h-6 items-center rounded-md border border-border/60 px-2 text-[10px] font-medium text-secondary transition-colors hover:bg-surface hover:text-primary"
+        className="inline-flex h-6 w-6 items-center justify-center rounded-md border border-border/60 text-secondary transition-colors hover:bg-surface hover:text-primary"
         onMouseDown={preserveEditorSelectionMouseDown}
         onClick={toggle}
       >
-        {isDetached ? "Dock menu" : "Float menu"}
+        {isDetached ? <PinOff className="h-3 w-3" /> : <Pin className="h-3 w-3" />}
       </button>
     </div>
   );

package/src/ui-tailwind/chrome/tw-image-context-toolbar.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { MoreHorizontal } from "lucide-react";
 
 import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
 import type { ActiveImageContext } from "../../ui/headless/selection-tool-types";
@@ -17,7 +18,7 @@ export interface TwImageContextToolbarProps {
   ) => void;
   /**
    * Phase D.3 — progressive-disclosure compact mode.  When `true`,
-   * the toolbar reduces to the image badge + a single "More…" button
+   * the toolbar reduces to the image badge + a single actions button
    * that opens the shared context menu via `onOpenMore`.  Size
    * presets + nudge controls move into the registry's image actions
    * (see `editor-action-registry.ts` — image-size-small/medium/large
@@ -37,6 +38,7 @@ const NUDGE_EMU = 228600;
 
 export function TwImageContextToolbar(props: TwImageContextToolbarProps) {
   const { activeImage } = props;
+  const displayLabel = activeImage.display === "floating" ? "Positioned" : "Inline";
 
   if (props.compact) {
     return (
@@ -49,13 +51,14 @@ export function TwImageContextToolbar(props: TwImageContextToolbarProps) {
           Image
         </span>
         <span className="rounded-full bg-surface px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-[0.1em] text-secondary">
-          {activeImage.display}
+          {displayLabel}
         </span>
         <button
           type="button"
           data-testid="image-context-toolbar-more"
           aria-label="Image actions menu"
-          className="inline-flex h-6 items-center gap-1 rounded-[var(--radius-sm)] px-2 text-xs font-medium text-secondary hover:bg-hover focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]"
+          title="Image actions"
+          className="inline-flex h-6 w-6 items-center justify-center rounded-[var(--radius-sm)] text-secondary hover:bg-hover focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]"
           disabled={props.disabled}
           onMouseDown={preserveEditorSelectionMouseDown}
           onClick={(ev) => {
@@ -63,7 +66,7 @@ export function TwImageContextToolbar(props: TwImageContextToolbarProps) {
             props.onOpenMore?.({ clientX: rect.left, clientY: rect.bottom });
           }}
         >
-          More…
+          <MoreHorizontal className="h-3.5 w-3.5" aria-hidden="true" />
         </button>
       </div>
     );
@@ -78,7 +81,7 @@ export function TwImageContextToolbar(props: TwImageContextToolbarProps) {
         Image
       </span>
       <span className="rounded-full bg-surface px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-[0.1em] text-secondary">
-        {activeImage.display}
+        {displayLabel}
       </span>
       <div role="group" aria-label="Image size" className="inline-flex items-center rounded-[var(--radius-sm)] bg-[var(--color-bg-muted)] p-0.5">
         {IMAGE_SIZE_PRESETS.map((preset) => {

package/src/ui-tailwind/chrome/tw-inline-find-bar.tsx

@@ -0,0 +1,100 @@
+import * as React from "react";
+import { ChevronDown, ChevronUp, Search, X } from "lucide-react";
+
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+
+export interface TwInlineFindBarProps {
+  query: string;
+  activeIndex: number;
+  resultCount: number;
+  onQueryChange: (query: string) => void;
+  onPrevious: () => void;
+  onNext: () => void;
+  onClose: () => void;
+}
+
+export function TwInlineFindBar(props: TwInlineFindBarProps): React.JSX.Element {
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+  const hasResults = props.resultCount > 0;
+
+  React.useEffect(() => {
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  }, []);
+
+  return (
+    <div
+      className="pointer-events-auto flex w-[min(420px,calc(100vw-2rem))] items-center gap-2 rounded-2xl border border-[color:color-mix(in_srgb,var(--color-accent-primary)_28%,var(--color-border-subtle))] bg-[color:color-mix(in_srgb,var(--color-bg-canvas)_94%,white)] px-2.5 py-2 shadow-[0_18px_50px_rgba(20,31,29,0.18)]"
+      data-testid="inline-find-bar"
+      role="search"
+      aria-label="Find in document"
+    >
+      <Search className="h-4 w-4 shrink-0 text-accent" aria-hidden="true" />
+      <input
+        ref={inputRef}
+        aria-label="Find text"
+        className="min-w-0 flex-1 bg-transparent px-1 text-[13px] font-medium text-primary outline-none placeholder:text-tertiary"
+        placeholder="Find in document"
+        type="search"
+        value={props.query}
+        onChange={(event) => props.onQueryChange(event.currentTarget.value)}
+        onKeyDown={(event) => {
+          if (event.key === "Escape") {
+            event.preventDefault();
+            props.onClose();
+            return;
+          }
+          if (event.key === "Enter") {
+            event.preventDefault();
+            if (event.shiftKey) {
+              props.onPrevious();
+            } else {
+              props.onNext();
+            }
+          }
+        }}
+      />
+      <span
+        className="min-w-[56px] rounded-full bg-[color:color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)] px-2 py-1 text-center text-[11px] font-semibold tabular-nums text-accent"
+        aria-live="polite"
+      >
+        {props.query.trim()
+          ? hasResults
+            ? `${props.activeIndex + 1}/${props.resultCount}`
+            : "0/0"
+          : "Find"}
+      </span>
+      <button
+        type="button"
+        aria-label="Previous match"
+        disabled={!hasResults}
+        className="inline-flex h-7 w-7 items-center justify-center rounded-full text-secondary transition-colors hover:bg-hover disabled:cursor-not-allowed disabled:opacity-35"
+        onMouseDown={preserveEditorSelectionMouseDown}
+        onClick={props.onPrevious}
+      >
+        <ChevronUp className="h-4 w-4" aria-hidden="true" />
+      </button>
+      <button
+        type="button"
+        aria-label="Next match"
+        disabled={!hasResults}
+        className="inline-flex h-7 w-7 items-center justify-center rounded-full text-secondary transition-colors hover:bg-hover disabled:cursor-not-allowed disabled:opacity-35"
+        onMouseDown={preserveEditorSelectionMouseDown}
+        onClick={props.onNext}
+      >
+        <ChevronDown className="h-4 w-4" aria-hidden="true" />
+      </button>
+      <button
+        type="button"
+        aria-label="Close find"
+        className="inline-flex h-7 w-7 items-center justify-center rounded-full text-tertiary transition-colors hover:bg-hover hover:text-primary"
+        onMouseDown={preserveEditorSelectionMouseDown}
+        onClick={props.onClose}
+      >
+        <X className="h-4 w-4" aria-hidden="true" />
+      </button>
+    </div>
+  );
+}
+
+export default TwInlineFindBar;

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

@@ -49,7 +49,6 @@ export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarP
   const density = props.density ?? "full";
   const addCommentDisabled = !model.canAddComment;
   const formattingDisabled = !model.canToggleFormatting;
-  const contextLabel = summarizeSelectionContext(model);
   const tooltipLabel = addCommentDisabled
     ? props.disabledReason ?? "Select text within one paragraph to add a DOCX comment"
     : "Add comment";
@@ -144,49 +143,10 @@ export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarP
         </Tooltip.Portal>
       </Tooltip.Root>
 
-      {model.previewText ? (
-        <>
-          <div className="mx-0.5 h-4 w-px bg-[var(--color-border-subtle)]" />
-          <span className="max-w-[7rem] truncate text-[10px] text-secondary">
-            {model.previewText}
-          </span>
-        </>
-      ) : null}
-
-      {contextLabel ? (
-        <>
-          {!model.previewText ? <div className="mx-0.5 h-4 w-px bg-[var(--color-border-subtle)]" /> : null}
-          <span
-            className={`min-w-0 max-w-[9rem] truncate rounded-full px-1.5 py-0.5 text-[9px] font-medium tracking-[0.08em] ${
-              model.badges.some((badge) => badge.tone === "accent")
-                ? "bg-canvas text-accent ring-1 ring-accent/25"
-                : "bg-surface text-tertiary"
-            }`}
-          >
-            {contextLabel}
-          </span>
-        </>
-      ) : null}
     </div>
   );
 });
 
-function summarizeSelectionContext(model: SelectionToolbarModel): string | null {
-  if (model.badges.length === 0) {
-    return null;
-  }
-
-  const accentBadges = model.badges.filter((badge) => badge.tone === "accent");
-  const source = accentBadges.length > 0 ? accentBadges : model.badges;
-  const labels = source.slice(0, 2).map((badge) => badge.label.trim()).filter(Boolean);
-  if (labels.length === 0) {
-    return null;
-  }
-
-  const summary = labels.join(" · ");
-  return summary.length > 30 ? `${summary.slice(0, 27)}...` : summary;
-}
-
 interface ToolbarActionButtonProps {
   icon: React.ReactNode;
   label: string;

package/src/ui-tailwind/chrome/tw-table-context-toolbar.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { MoreHorizontal } from "lucide-react";
 
 import type {
   TableOperationCapabilitySnapshot,
@@ -34,7 +35,7 @@ export interface TwTableContextToolbarProps {
    * When `true`, the toolbar stays action-first:
    *   - a small context label
    *   - the tier's highest-frequency table actions
-   *   - a single "More…" button that opens the shared command graph
+   *   - a single icon button that opens the shared command graph
    *
    * Diagnostic metadata such as "3 x 4" or "R1 C1" is intentionally
    * omitted from the compact surface. It belongs in properties /
@@ -46,7 +47,7 @@ export interface TwTableContextToolbarProps {
    */
   compact?: boolean;
   /**
-   * Fires when the user clicks the "More…" button in compact mode.
+   * Fires when the user clicks the compact actions button.
    * Receives the button's clientX / clientY so the integrator can
    * open `TwContextMenu` at the button anchor via
    * `chromeControllerRef.current?.openWithKinds({ kinds: ["table-cell"], clientX, clientY })`.
@@ -84,7 +85,7 @@ const CELL_FILL_PRESETS = [
  *
  * - `caret-in-cell` (T2) — single-cell selection.  Minimal inline set:
  *   row +/−, column +/−.  Anything structural (merge/split/fill/delete
- *   table) lives behind "More" to keep the panel ~180px wide.
+ *   table) lives behind the actions button to keep the panel ~180px wide.
  * - `multi-cell` (T3) — >1 cell but not a full row/column/table.  Adds
  *   merge/split/fill palette.
  * - `row-selected` (T4a) — selection spans exactly one full row
@@ -141,9 +142,9 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
     : null;
   const selectionLabel = tableContext ? formatSelectionLabel(tableContext, tier) : null;
 
-  // Product compact variant: action-first local chrome + one "More…"
+  // Product compact variant: action-first local chrome + one actions
   // button that opens the shared context menu.  The full action set
-  // still lives in editor-action-registry so right-click and "More…"
+  // still lives in editor-action-registry so right-click and local actions
   // stay identical; this surface only promotes the tier's obvious next
   // actions and leaves metadata to deeper surfaces.
   if (props.compact) {
@@ -170,7 +171,8 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
           type="button"
           data-testid="table-context-toolbar-more"
           aria-label="Table actions menu"
-          className="inline-flex h-6 items-center gap-1 rounded-[var(--radius-sm)] px-2 text-xs font-medium text-secondary hover:bg-hover focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]"
+          title="Table actions"
+          className="inline-flex h-6 w-6 items-center justify-center rounded-[var(--radius-sm)] text-secondary hover:bg-hover focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]"
           disabled={props.disabled || !props.onOpenMore}
           onMouseDown={preserveEditorSelectionMouseDown}
           onClick={(ev) => {
@@ -181,7 +183,7 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
             });
           }}
         >
-          More…
+          <MoreHorizontal className="h-3.5 w-3.5" aria-hidden="true" />
         </button>
       </div>
     );

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 { ScopeRailSegment } from "../../api/public-types.ts";
+import type { ScopeRailPosture, ScopeRailSegment } from "../../api/public-types.ts";
 import type {
   EditorRole,
   EditorStoryTarget,
@@ -49,6 +49,8 @@ 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).
@@ -213,6 +215,7 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
   geometryFacet,
   space,
   activeScopeId,
+  visibleScopePostures,
   onScopeStripeClick,
   onScopeSegmentClick,
   onScopeCardClose,
@@ -242,6 +245,17 @@ 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"
@@ -268,6 +282,7 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
         workflowFacet={workflowFacet}
         space={space}
         activeScopeId={activeScopeId}
+        visibleScopePostures={visibleScopePostures}
         onStripeClick={onScopeStripeClick}
         onSegmentClick={onScopeSegmentClick}
       />
@@ -275,6 +290,7 @@ 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,6 +52,8 @@ 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: (
@@ -91,6 +93,7 @@ export const TwScopeCardLayer: React.FC<TwScopeCardLayerProps> = ({
   facet,
   workflowFacet,
   activeScopeId,
+  visibleScopeIds,
   onClose,
   onModeChange,
   onIssueAction,
@@ -119,7 +122,9 @@ 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() ?? [];
+  const models = (workflowFacet?.getAllScopeCardModels() ?? []).filter((model) =>
+    visibleScopeIds ? visibleScopeIds.has(model.scopeId) : true,
+  );
 
   const pinnedModel = pinnedScopeId
     ? models.find((m) => m.scopeId === pinnedScopeId) ?? null

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

@@ -46,6 +46,8 @@ 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.
@@ -87,8 +89,8 @@ const POSTURE_STYLES: Record<ScopeRailPosture, PostureStyle> = {
 // ---------------------------------------------------------------------------
 
 const DEFAULT_RAIL_LANE_PX = 44;
-const STRIPE_WIDTH_PX = 4;
-const LABEL_WIDTH_PX = 40;
+const STRIPE_WIDTH_PX = 6;
+const LABEL_WIDTH_PX = 58;
 const STACK_OFFSET_PX = 6;
 
 export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
@@ -97,12 +99,15 @@ 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() ?? [];
+  const segments = (workflowFacet?.getAllRailSegments() ?? []).filter((segment) =>
+    visibleScopePostures ? visibleScopePostures.has(segment.posture) : true,
+  );
 
   if (!frame || segments.length === 0) {
     return null;
@@ -223,16 +228,21 @@ export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
               style={projectRectToOverlay(stripeRect, projectorSpace)}
             />
             {/* Label pill — revealed on stripe hover via CSS. */}
-            <div
-              className={`wre-scope-rail-label wre-scope-rail-label-${style.railToken}`}
+            <button
+              type="button"
+              tabIndex={-1}
+              className={`wre-scope-rail-label wre-scope-rail-label-${style.railToken} ${
+                isActive ? "wre-scope-rail-label-active" : ""
+              }`}
               data-scope-id={segment.scopeId}
               data-posture={segment.posture}
-              aria-hidden="true"
+              aria-label={`${style.labelText}${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/preserve-position.ts

@@ -190,8 +190,8 @@ export interface ReplaceStateOptions extends PreservePositionOptions {
    * When `true`, wrap the state swap in `capturePosition` /
    * `restorePosition` so the scroll anchor block stays at the same
    * viewport-Y across the replacement. Shipped **disabled by default**
-   * after the 2026-04-24 jump-to-top regression — re-enable under a
-   * diagnosed-safe codepath only.
+   * after the 2026-04-24 jump-to-top regression; typing paths re-enable
+   * it only through a bounded same-story policy.
    */
   preserveScrollAnchor?: boolean;
   /**
@@ -229,8 +229,9 @@ export interface ReplaceStateOptions extends PreservePositionOptions {
  * after the 2026-04-24 jump-to-top regression report — enabling it
  * requires evidence that the anchor math holds under the
  * rebuild-effect's exact timing (PM DOM mid-mutation, observer-driven
- * scrollTop resets, etc.). The capture/restore helpers are still
- * exported + unit-tested for the eventual re-enable.
+ * scrollTop resets, etc.). When the bounded anchor restore refuses its
+ * target, the helper restores the captured scrollTop instead of leaving
+ * a PM/browser-origin top jump in place.
  */
 export function replaceStatePreservingPosition(
   options: ReplaceStateOptions,
@@ -242,7 +243,10 @@ export function replaceStatePreservingPosition(
   options.suppressionRef.current = true;
   options.view.updateState(newState);
   if (preserved) {
-    restorePosition(preserved, options);
+    const restored = restorePosition(preserved, options);
+    if (!restored) {
+      restoreCapturedScrollTop(preserved);
+    }
   }
   const release = () => {
     options.suppressionRef.current = false;
@@ -253,3 +257,24 @@ export function replaceStatePreservingPosition(
     queueMicrotask(release);
   }
 }
+
+/**
+ * Last-resort guard for the typing rebuild path. If PM clears scrollTop
+ * during `updateState()` and the precise anchor restore refuses to write
+ * (unsafe target, missing block), keep the user near the same viewport
+ * instead of accepting a top jump. Requires a real captured anchor so
+ * empty/pre-mount roots remain no-op.
+ */
+function restoreCapturedScrollTop(captured: PreservedPosition): boolean {
+  if (!captured.scrollRoot || !captured.anchor) return false;
+  if (!Number.isFinite(captured.scrollTop) || captured.scrollTop < 0) {
+    return false;
+  }
+  const maxScrollTop = captured.scrollRoot.scrollHeight - captured.scrollRoot.clientHeight;
+  const target =
+    Number.isFinite(maxScrollTop) && maxScrollTop > 0
+      ? Math.min(captured.scrollTop, maxScrollTop)
+      : captured.scrollTop;
+  captured.scrollRoot.scrollTop = target;
+  return true;
+}

package/src/ui-tailwind/editor-surface/tw-prosemirror-surface.tsx

@@ -958,7 +958,8 @@ export const TwProseMirrorSurface = forwardRef<
       // replacement stays in the same focused story with a live geometry
       // facet. `maxScrollDeltaPx` is the guardrail: if the anchor target
       // would move by more than the small local-edit budget, the helper
-      // refuses the restore and leaves the browser/runtime position alone.
+      // refuses that exact target but restores the captured scrollTop so
+      // a PM/browser-origin top jump is not accepted as the final state.
       //
       // Ordering invariant is regression-guarded by
       // `test/ui-tailwind/editor-surface/preserve-position-ordering.test.ts`.

package/src/ui-tailwind/editor-surface/tw-table-node-view.tsx

@@ -30,6 +30,7 @@ interface OpenVerticalMerge {
   col: number;
   colSpan: number;
   continuedThisRow: boolean;
+  hasMaterializedRowSpan: boolean;
   layout: TableCellLayout;
 }
 
@@ -159,7 +160,9 @@ function computeTableLayout(tableNode: PMNode): TableCellLayout[][] {
       if (verticalMerge === "continue") {
         const owner = findVerticalMergeOwner(openVerticalMerges, column, colSpan);
         if (owner) {
-          owner.layout.rowSpan += 1;
+          if (!owner.hasMaterializedRowSpan) {
+            owner.layout.rowSpan += 1;
+          }
           owner.continuedThisRow = true;
           layoutRow.push({
             cellIndex,
@@ -189,6 +192,7 @@ function computeTableLayout(tableNode: PMNode): TableCellLayout[][] {
           col: column,
           colSpan,
           continuedThisRow: true,
+          hasMaterializedRowSpan: explicitRowSpan > 1,
           layout,
         });
       }

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

@@ -23,6 +23,7 @@ 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).
@@ -66,6 +67,8 @@ 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
@@ -262,6 +265,8 @@ export function TwReviewRail(props: TwReviewRailProps) {
                 <TwWorkflowTab
                   segments={workflowSegments}
                   activeScopeId={props.activeScopeId ?? null}
+                  enabledLayerFilters={props.workflowLayerFilters}
+                  onEnabledLayerFiltersChange={props.onWorkflowLayerFiltersChange}
                   onOpenScope={props.onOpenScope}
                 />
               )}