@beyondwork/docx-react-component 1.0.38 → 1.0.40

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

@@ -1,23 +1,23 @@
 /**
- * Scope rail layer — renders workflow scopes as a continuous zone with a
- * gutter icon + label column OUTSIDE the document flow plus a flat block-
- * level tint BEHIND the scoped paragraphs.
+ * 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.
  *
- * Per runtime-rendering-and-chrome-phase.md §5, the rail is a projection
- * over canonical workflow scopes; it never lives inside the PM NodeView
- * tree.  Positions come from the render kernel's anchor index — not from
- * DOM rect math — so the rail stays aligned across scroll, zoom, resize,
- * and through predicted-text reconciliation.
+ * Per runtime-rendering-and-chrome-phase.md §5 and
+ * docs/plans/scope-card-overlay.md P0, the rail is a projection over
+ * canonical workflow scopes; it never lives inside the PM NodeView
+ * tree.  Positions come from the render kernel's per-line block data
+ * (walked directly from `RenderFrame.pages[].regions.body.blocks[]`)
+ * so multi-line scopes produce one tight tint per line rather than a
+ * fat bounding-box union.
  */
 
 import * as React from "react";
 import {
-  inflateRect,
   projectRectToOverlay,
-  unionRect,
   type OverlayCoordinateSpace,
 } from "./chrome-overlay-projector";
-import type { RenderFrameRect } from "../../runtime/render";
+import type { RenderFrame, RenderFrameRect } from "../../runtime/render";
 import type { ScopeRailSegment, ScopeRailPosture } from "../../runtime/layout";
 import type { WordReviewEditorLayoutFacet } from "../../runtime/layout";
 
@@ -26,16 +26,25 @@ import type { WordReviewEditorLayoutFacet } from "../../runtime/layout";
 // ---------------------------------------------------------------------------
 
 export interface TwScopeRailLayerProps {
-  /** Layout facet that provides segments + anchor index. */
+  /** Layout facet that provides segments + render frame. */
   facet: WordReviewEditorLayoutFacet;
   /** Overlay's coordinate space.  Defaults to the overlay's own origin. */
   space?: OverlayCoordinateSpace;
-  /** Horizontal padding (px) the rail gutter occupies to the left of body. */
+  /** Horizontal pad (px) the rail gutter occupies to the left of body. */
   railLaneWidthPx?: number;
-  /** Optional click handler for a segment label (open-scope drawer, etc). */
-  onSegmentClick?: (segment: ScopeRailSegment) => void;
   /** Scope id that should render with the `active` emphasis. */
   activeScopeId?: string | null;
+  /**
+   * Fires when the user clicks the rail stripe — opens the scope card.
+   * P0 wires this directly; P1 replaces with card-layer-aware routing.
+   */
+  onStripeClick?: (segment: ScopeRailSegment) => void;
+  /**
+   * Legacy click handler kept for existing consumers.  Called alongside
+   * `onStripeClick` so host apps that subscribed to the pre-stripe API
+   * continue to receive clicks.
+   */
+  onSegmentClick?: (segment: ScopeRailSegment) => void;
   /** Test id applied to the layer root. */
   "data-testid"?: string;
 }
@@ -46,7 +55,7 @@ export interface TwScopeRailLayerProps {
 
 interface PostureStyle {
   labelText: string;
-  icon: string; // lucide-style key; CSS ::before handles glyph in production
+  icon: string;
   railToken: string;
   tintToken: string;
 }
@@ -65,20 +74,19 @@ const POSTURE_STYLES: Record<ScopeRailPosture, PostureStyle> = {
 // Component
 // ---------------------------------------------------------------------------
 
-const DEFAULT_RAIL_LANE_PX = 120;
-const LABEL_WIDTH_PX = 92;
+const DEFAULT_RAIL_LANE_PX = 44;
+const STRIPE_WIDTH_PX = 4;
+const LABEL_WIDTH_PX = 40;
 
 export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
   facet,
   space,
   railLaneWidthPx = DEFAULT_RAIL_LANE_PX,
-  onSegmentClick,
   activeScopeId,
+  onStripeClick,
+  onSegmentClick,
   "data-testid": testId,
 }) => {
-  // Read the render frame once per paint cycle.  The facet.subscribe path
-  // already invalidates the caller's React state on layout changes, so we
-  // just read on render.
   const frame = typeof facet.getRenderFrame === "function"
     ? facet.getRenderFrame() ?? null
     : null;
@@ -88,16 +96,6 @@ export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
     return null;
   }
 
-  // Group segments by scopeId so multi-page scopes render one contiguous
-  // tint per page range.  (Per-page render happens below because each
-  // scope may span pages.)
-  const items = segments.map((segment) => {
-    const rect = resolveSegmentRect(facet, frame, segment);
-    if (!rect) return null;
-    const style = POSTURE_STYLES[segment.posture];
-    return { segment, rect, style };
-  }).filter((item): item is NonNullable<typeof item> => item !== null);
-
   const projectorSpace: OverlayCoordinateSpace = space ?? { originLeftPx: 0, originTopPx: 0 };
 
   return (
@@ -108,43 +106,86 @@ export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
       role="group"
       aria-label="Workflow scope rail"
     >
-      {items.map(({ segment, rect, style }) => {
-        const isActive = activeScopeId === segment.scopeId || segment.isActiveWorkItem;
-        const tintRect = inflateRect(rect, { leftPx: 4, rightPx: 4, topPx: 2, bottomPx: 2 });
+      {segments.map((segment) => {
+        const style = POSTURE_STYLES[segment.posture];
+        const lineRects = collectLineRectsForSegment(frame, segment);
+        if (lineRects.length === 0) return null;
+
+        const isActive =
+          activeScopeId === segment.scopeId || segment.isActiveWorkItem;
+
+        // Stripe + label span the vertical range of the scope's lines;
+        // they live in the gutter lane to the left of the first line.
+        const firstLine = lineRects[0];
+        const lastLine = lineRects[lineRects.length - 1];
+        const stripeTopPx = firstLine.topPx;
+        const stripeHeightPx =
+          lastLine.topPx + lastLine.heightPx - firstLine.topPx;
+        const stripeRect: RenderFrameRect = {
+          leftPx: firstLine.leftPx - railLaneWidthPx + (railLaneWidthPx - STRIPE_WIDTH_PX) / 2,
+          topPx: stripeTopPx,
+          widthPx: STRIPE_WIDTH_PX,
+          heightPx: Math.max(stripeHeightPx, 14),
+        };
         const labelRect: RenderFrameRect = {
-          leftPx: rect.leftPx - railLaneWidthPx,
-          topPx: rect.topPx,
+          leftPx: firstLine.leftPx - railLaneWidthPx,
+          topPx: stripeTopPx,
           widthPx: LABEL_WIDTH_PX,
-          heightPx: Math.max(20, Math.min(rect.heightPx, 48)),
+          heightPx: 20,
+        };
+
+        const handleActivate = () => {
+          onStripeClick?.(segment);
+          onSegmentClick?.(segment);
+        };
+        const handleStripeKey = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            handleActivate();
+          }
         };
 
         return (
           <React.Fragment key={`${segment.scopeId}:${segment.pageIndex}:${segment.fromOffset}`}>
-            {/* Flat tint behind the scoped block region */}
-            <div
-              className={`wre-scope-rail-tint wre-scope-rail-tint-${style.tintToken} absolute ${
-                isActive ? "wre-scope-rail-tint-active" : ""
-              }`}
-              data-scope-id={segment.scopeId}
-              data-posture={segment.posture}
-              style={projectRectToOverlay(tintRect, projectorSpace)}
-            />
-            {/* Gutter label + icon outside the page frame */}
+            {/* Per-line tint behind the scoped text runs. */}
+            {lineRects.map((lineRect, index) => (
+              <div
+                key={`tint:${index}`}
+                className={`wre-scope-rail-tint wre-scope-rail-tint-${style.tintToken} ${
+                  isActive ? "wre-scope-rail-tint-active" : ""
+                }`}
+                data-scope-id={segment.scopeId}
+                data-posture={segment.posture}
+                data-line-index={index}
+                style={projectRectToOverlay(lineRect, projectorSpace)}
+              />
+            ))}
+            {/* Rail stripe in the gutter. */}
             <button
               type="button"
-              className={`wre-scope-rail-label wre-scope-rail-label-${style.railToken} pointer-events-auto absolute flex flex-col items-center justify-center gap-1 rounded-md text-[10px] font-semibold uppercase tracking-[0.08em] ${
-                isActive ? "wre-scope-rail-label-active" : ""
+              className={`wre-scope-rail-stripe wre-scope-rail-label-${style.railToken} ${
+                isActive ? "wre-scope-rail-stripe-active" : ""
               }`}
               data-scope-id={segment.scopeId}
               data-posture={segment.posture}
-              data-icon={style.icon}
+              data-testid="scope-rail-stripe"
               aria-label={`${style.labelText}${segment.label ? `: ${segment.label}` : ""}`}
-              onClick={onSegmentClick ? () => onSegmentClick(segment) : undefined}
+              aria-expanded={isActive ? "true" : "false"}
+              onClick={handleActivate}
+              onKeyDown={handleStripeKey}
+              style={projectRectToOverlay(stripeRect, projectorSpace)}
+            />
+            {/* Label pill — revealed on stripe hover via CSS. */}
+            <div
+              className={`wre-scope-rail-label wre-scope-rail-label-${style.railToken}`}
+              data-scope-id={segment.scopeId}
+              data-posture={segment.posture}
+              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>
         );
       })}
@@ -156,23 +197,53 @@ export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
 // Internals
 // ---------------------------------------------------------------------------
 
-function resolveSegmentRect(
-  facet: WordReviewEditorLayoutFacet,
-  _frame: { anchorIndex: { byRuntimeOffset: (offset: number) => RenderFrameRect | null } },
+/**
+ * Walk the render frame and collect one rect per line whose owning
+ * fragment overlaps the segment's offset range.  Line frames come from
+ * the kernel's per-line projection, which clamps widthPx to the line's
+ * text-actual width via `Math.min(regionFrame.widthPx, box.widthTwips
+ * * pxPerTwip)`.  Multi-line scopes therefore produce one tight tint
+ * per line instead of a single bounding-box union.
+ *
+ * Exported for unit testing — not part of the public API.
+ */
+export function collectLineRectsForSegment(
+  frame: RenderFrame,
   segment: ScopeRailSegment,
-): RenderFrameRect | null {
-  const fromRect = _frame.anchorIndex.byRuntimeOffset(segment.fromOffset);
-  const toRect = _frame.anchorIndex.byRuntimeOffset(Math.max(segment.fromOffset, segment.toOffset - 1));
-  const unioned = unionRect(fromRect, toRect);
-  if (unioned) return unioned;
-  // Fall back to the page rect so long scopes that can't resolve per-line
-  // still render a posture in the gutter.
-  const fallbackPage = facet.getPage(segment.pageIndex);
-  if (!fallbackPage) return null;
-  // Approximate: derive a rect from the page's body region by asking the
-  // render frame for the page rect.  Without a render kernel kernel this
-  // function returns null and the segment is skipped.
-  return null;
+): RenderFrameRect[] {
+  const rects: RenderFrameRect[] = [];
+  const lo = segment.fromOffset;
+  const hi = segment.toOffset;
+  if (lo >= hi) return rects;
+
+  const page = frame.pages[segment.pageIndex];
+  if (!page) {
+    // Fall back to scanning every page — protects against pageIndex
+    // drift during an in-flight layout update.
+    for (const p of frame.pages) {
+      pushRectsFromPage(rects, p, lo, hi);
+    }
+    return rects;
+  }
+  pushRectsFromPage(rects, page, lo, hi);
+  return rects;
+}
+
+function pushRectsFromPage(
+  sink: RenderFrameRect[],
+  page: RenderFrame["pages"][number],
+  lo: number,
+  hi: number,
+): void {
+  for (const block of page.regions.body.blocks) {
+    const from = block.fragment.from;
+    const to = block.fragment.to;
+    if (to <= lo || from >= hi) continue;
+    // Block overlaps the segment — emit one tint per line.
+    for (const line of block.lines) {
+      sink.push(line.frame);
+    }
+  }
 }
 
 export default TwScopeRailLayer;

package/src/ui-tailwind/editor-surface/page-slice-util.ts

@@ -0,0 +1,15 @@
+import type { DocumentPageSnapshot, SurfaceBlockSnapshot } from "../../api/public-types.ts";
+
+/**
+ * Filter surface blocks to those that overlap a page's character-offset range.
+ * A block overlaps [startOffset, endOffset) when block.from < endOffset AND block.to > startOffset.
+ * Blocks that straddle a page boundary appear on both pages.
+ */
+export function sliceBlocksForPage(
+  blocks: SurfaceBlockSnapshot[],
+  page: Pick<DocumentPageSnapshot, "startOffset" | "endOffset">,
+): SurfaceBlockSnapshot[] {
+  return blocks.filter(
+    (b) => b.from < page.endOffset && b.to > page.startOffset,
+  );
+}

package/src/ui-tailwind/editor-surface/pm-command-bridge.ts

@@ -23,6 +23,8 @@ export interface CommandBridgeCallbacks extends SelectionSyncCallbacks {
   onInsertHardBreak: () => void;
   onInsertTab: () => void;
   onOutdentTab?: () => void;
+  onListIndent?: () => void;
+  onListOutdent?: () => void;
   onUndo: () => void;
   onRedo: () => void;
   onBlockedInput?: (command: "paste" | "drop", message: string) => void;
@@ -77,8 +79,14 @@ export function createSelectionSyncPlugin(
   });
 }
 
+export interface CommandBridgePluginOptions {
+  /** P6: when true, omit prosemirror-tables columnResizing() — chrome overlay grips take over. */
+  useChromeColumnResizing?: boolean;
+}
+
 export function createCommandBridgePlugins(
   callbacks: CommandBridgeCallbacks,
+  options?: CommandBridgePluginOptions,
 ): Plugin[] {
   let isComposing = false;
 
@@ -145,6 +153,18 @@ export function createCommandBridgePlugins(
           return false;
         }
 
+        // Alt+Shift+Right → list indent; Alt+Shift+Left → list outdent (Word keyboard behavior)
+        if (event.altKey && event.shiftKey) {
+          if (event.key === "ArrowRight") {
+            callbacks.onListIndent?.();
+            return true;
+          }
+          if (event.key === "ArrowLeft") {
+            callbacks.onListOutdent?.();
+            return true;
+          }
+        }
+
         const resolution = resolveSurfaceShortcut(
           {
             key: event.key,
@@ -195,7 +215,12 @@ export function createCommandBridgePlugins(
   // selection handles. Doc-changing table transactions (new rows, etc.) are
   // filtered by the runtime filter above; navigation-only steps pass through.
   const tablePlugin = tableEditing();
-  const columnResizingPlugin = columnResizing();
-
-  return [filterPlugin, selectionPlugin, inputPlugin, keydownPlugin, tablePlugin, columnResizingPlugin];
+  // P6: chrome overlay grips replace prosemirror-tables column resizing.
+  // useChromeColuumnResizing=true removes the PM plugin; set to false to fall
+  // back to the legacy prosemirror-tables drag handle for one release cycle.
+  const plugins: Plugin[] = [filterPlugin, selectionPlugin, inputPlugin, keydownPlugin, tablePlugin];
+  if (!options?.useChromeColumnResizing) {
+    plugins.push(columnResizing());
+  }
+  return plugins;
 }

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

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