@beyondwork/docx-react-component 1.0.39 → 1.0.40

package/src/ui-tailwind/chrome/tw-table-grip-layer.tsx

@@ -11,6 +11,14 @@
  * `onSetRowHeight` callbacks (which route to `ref.tables.apply(op)`).
  *
  * Drag state lives in `useRef` so moves don't trigger re-renders mid-drag.
+ *
+ * Click-trap fix: the grip is an invisible 6px-wide (column) / 6px-tall (row)
+ * strip with `pointer-events-auto`, so a click landing near a cell edge hits
+ * the grip instead of cell text.  To keep non-drag clicks from being swallowed,
+ * mousedown no longer calls `preventDefault` — that's deferred to the first
+ * mousemove that crosses `DRAG_THRESHOLD_PX`.  A mouseup without any crossing
+ * is forwarded via `document.elementFromPoint` to the element beneath the
+ * grip so PM still receives the click and places the caret.
  */
 
 import React, { useCallback, useEffect, useRef } from "react";
@@ -19,15 +27,53 @@ import type {
   TableStructureContextSnapshot,
   WordReviewEditorLayoutFacet,
 } from "../../api/public-types";
-import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
 import type { OverlayCoordinateSpace } from "../chrome-overlay/chrome-overlay-projector";
 import { projectRectToOverlay } from "../chrome-overlay/chrome-overlay-projector";
 import { DEFAULT_PX_PER_TWIP } from "../../runtime/render/render-frame-types";
 
 const GRIP_PX = 6;
+const DRAG_THRESHOLD_PX = 3;
 const MIN_COLUMN_TWIPS = 720;
 const MIN_ROW_TWIPS = 120;
 
+/**
+ * Re-dispatch a click that landed on an invisible resize grip to the element
+ * beneath it.  Called when a mouseup fires without any drag movement, so the
+ * user's intended target (typically PM-rendered cell text) still receives
+ * mousedown/mouseup/click and can place the caret.
+ */
+function forwardNonDragClick(gripEl: HTMLElement, event: MouseEvent): void {
+  const previous = gripEl.style.pointerEvents;
+  gripEl.style.pointerEvents = "none";
+  try {
+    const beneath = gripEl.ownerDocument?.elementFromPoint(
+      event.clientX,
+      event.clientY,
+    );
+    if (!beneath || beneath === gripEl) return;
+    const init: MouseEventInit = {
+      bubbles: true,
+      cancelable: true,
+      view: gripEl.ownerDocument?.defaultView ?? window,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      screenX: event.screenX,
+      screenY: event.screenY,
+      button: event.button,
+      buttons: event.buttons,
+      ctrlKey: event.ctrlKey,
+      metaKey: event.metaKey,
+      shiftKey: event.shiftKey,
+      altKey: event.altKey,
+    };
+    beneath.dispatchEvent(new MouseEvent("mousedown", init));
+    beneath.dispatchEvent(new MouseEvent("mouseup", init));
+    beneath.dispatchEvent(new MouseEvent("click", init));
+  } finally {
+    gripEl.style.pointerEvents = previous;
+  }
+}
+
 export interface TwTableGripLayerProps {
   facet: WordReviewEditorLayoutFacet;
   tableContext: TableStructureContextSnapshot | null;
@@ -131,31 +177,46 @@ function ColResizeGrip({
   const dragRef = useRef<{
     startX: number;
     originalTwips: number;
+    dragStarted: boolean;
+    gripEl: HTMLElement;
   } | null>(null);
 
   const handleMouseDown = useCallback(
     (e: React.MouseEvent<HTMLElement>) => {
       if (disabled) return;
-      preserveEditorSelectionMouseDown(e);
-      dragRef.current = { startX: e.clientX, originalTwips };
+      dragRef.current = {
+        startX: e.clientX,
+        originalTwips,
+        dragStarted: false,
+        gripEl: e.currentTarget,
+      };
     },
     [disabled, originalTwips],
   );
 
   useEffect(() => {
     const handleMove = (e: MouseEvent) => {
-      if (!dragRef.current) return;
+      const drag = dragRef.current;
+      if (!drag) return;
+      if (!drag.dragStarted) {
+        if (Math.abs(e.clientX - drag.startX) < DRAG_THRESHOLD_PX) return;
+        drag.dragStarted = true;
+      }
       e.preventDefault();
     };
     const handleUp = (e: MouseEvent) => {
-      if (!dragRef.current) return;
-      const deltaX = e.clientX - dragRef.current.startX;
-      const deltaTwips = deltaX / pxPerTwip;
+      const drag = dragRef.current;
+      if (!drag) return;
+      dragRef.current = null;
+      if (!drag.dragStarted) {
+        forwardNonDragClick(drag.gripEl, e);
+        return;
+      }
+      const deltaTwips = (e.clientX - drag.startX) / pxPerTwip;
       const newTwips = Math.max(
         MIN_COLUMN_TWIPS,
-        Math.round(dragRef.current.originalTwips + deltaTwips),
+        Math.round(drag.originalTwips + deltaTwips),
       );
-      dragRef.current = null;
       onCommit?.(colIndex, newTwips);
     };
     window.addEventListener("mousemove", handleMove);
@@ -216,38 +277,46 @@ function RowResizeGrip({
 }: RowResizeGripProps) {
   const dragRef = useRef<{
     startY: number;
-    startHeightPx: number;
+    dragStarted: boolean;
+    gripEl: HTMLElement;
   } | null>(null);
 
   const handleMouseDown = useCallback(
     (e: React.MouseEvent<HTMLElement>) => {
       if (disabled) return;
-      preserveEditorSelectionMouseDown(e);
-      // Start height is the current visible row height from the grip rect.
-      // We use the grip's own top position vs. previous row edge as a proxy.
-      dragRef.current = { startY: e.clientY, startHeightPx: 0 };
+      dragRef.current = {
+        startY: e.clientY,
+        dragStarted: false,
+        gripEl: e.currentTarget,
+      };
     },
     [disabled],
   );
 
   useEffect(() => {
     const handleMove = (e: MouseEvent) => {
-      if (!dragRef.current) return;
+      const drag = dragRef.current;
+      if (!drag) return;
+      if (!drag.dragStarted) {
+        if (Math.abs(e.clientY - drag.startY) < DRAG_THRESHOLD_PX) return;
+        drag.dragStarted = true;
+      }
       e.preventDefault();
     };
     const handleUp = (e: MouseEvent) => {
-      if (!dragRef.current) return;
-      const deltaY = e.clientY - dragRef.current.startY;
-      if (Math.abs(deltaY) < 2) {
-        dragRef.current = null;
+      const drag = dragRef.current;
+      if (!drag) return;
+      dragRef.current = null;
+      if (!drag.dragStarted) {
+        forwardNonDragClick(drag.gripEl, e);
         return;
       }
+      const deltaY = e.clientY - drag.startY;
       const deltaTwips = deltaY / pxPerTwip;
       // We don't know the current row height from the grip alone; use atLeast
       // so that a positive drag expands and a negative drag collapses to auto.
       const newTwips = Math.max(MIN_ROW_TWIPS, Math.round(deltaTwips));
       const rule = newTwips > 0 ? "atLeast" : "auto";
-      dragRef.current = null;
       onCommit?.(rowIndex, newTwips, rule as "atLeast");
     };
     window.addEventListener("mousemove", handleMove);

package/src/ui-tailwind/chrome-overlay/index.ts

@@ -7,6 +7,8 @@
 
 export { TwChromeOverlay, type TwChromeOverlayProps } from "./tw-chrome-overlay";
 export { TwScopeRailLayer, type TwScopeRailLayerProps } from "./tw-scope-rail-layer";
+export { TwScopeCard, type TwScopeCardProps } from "./tw-scope-card";
+export { TwScopeCardLayer, type TwScopeCardLayerProps } from "./tw-scope-card-layer";
 export {
   inflateRect,
   projectRectToOverlay,

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

@@ -16,10 +16,13 @@ import * as React from "react";
 import type { OverlayCoordinateSpace } from "./chrome-overlay-projector";
 import type { ScopeRailSegment } from "../../runtime/layout";
 import type {
+  ScopeIssueAction,
   TableStructureContextSnapshot,
   WordReviewEditorLayoutFacet,
+  WorkflowScopeMode,
 } from "../../api/public-types";
 import { TwScopeRailLayer } from "./tw-scope-rail-layer";
+import { TwScopeCardLayer } from "./tw-scope-card-layer";
 import { TwTableGripLayer } from "../chrome/tw-table-grip-layer";
 
 export interface TwChromeOverlayProps {
@@ -29,8 +32,38 @@ export interface TwChromeOverlayProps {
   space?: OverlayCoordinateSpace;
   /** Active scope id (for emphasis + rail tab sync). */
   activeScopeId?: string | null;
-  /** Click handler the rail layer forwards to consumers. */
+  /**
+   * Click handler fired when the user clicks a scope rail stripe.
+   * P0 wires this to open the scope card (P1 ships the card layer).
+   */
+  onScopeStripeClick?: (segment: ScopeRailSegment) => void;
+  /**
+   * Legacy click handler kept for compatibility with consumers that
+   * subscribed before the stripe affordance existed.  Called alongside
+   * `onScopeStripeClick` on a stripe click.
+   */
   onScopeSegmentClick?: (segment: ScopeRailSegment) => void;
+  /**
+   * Fires when the scope card is dismissed (close button, Escape, or
+   * click-outside).  The owner uses this to clear `activeScopeId`.
+   */
+  onScopeCardClose?: () => void;
+  /**
+   * Fires when a mode button inside the scope card is clicked.  The
+   * owner relays this into a `scope-mode-change-requested` event for
+   * the host (which then drives the overlay-apply path).
+   */
+  onScopeCardModeChange?: (scopeId: string, mode: WorkflowScopeMode) => void;
+  /**
+   * Fires when an issue action button (Resolve/Waive/Escalate) inside
+   * the scope card is clicked.  The owner relays this into a
+   * `scope-issue-action-requested` event for the host.
+   */
+  onScopeCardIssueAction?: (
+    scopeId: string,
+    issueId: string,
+    action: ScopeIssueAction,
+  ) => void;
   /** Test id applied to the overlay root. */
   "data-testid"?: string;
   /** Optional extra children (e.g., future comment balloon layer). */
@@ -62,7 +95,11 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
   facet,
   space,
   activeScopeId,
+  onScopeStripeClick,
   onScopeSegmentClick,
+  onScopeCardClose,
+  onScopeCardModeChange,
+  onScopeCardIssueAction,
   "data-testid": testId,
   children,
   tableContext,
@@ -79,8 +116,17 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
         facet={facet}
         space={space}
         activeScopeId={activeScopeId}
+        onStripeClick={onScopeStripeClick}
         onSegmentClick={onScopeSegmentClick}
       />
+      <TwScopeCardLayer
+        facet={facet}
+        activeScopeId={activeScopeId ?? null}
+        onClose={onScopeCardClose ?? noop}
+        onModeChange={onScopeCardModeChange ?? noopModeChange}
+        onIssueAction={onScopeCardIssueAction ?? noopIssueAction}
+        space={space}
+      />
       <TwTableGripLayer
         facet={facet}
         tableContext={tableContext ?? null}
@@ -93,4 +139,12 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
   );
 };
 
+const noop = () => undefined;
+const noopModeChange = (_scopeId: string, _mode: WorkflowScopeMode) => undefined;
+const noopIssueAction = (
+  _scopeId: string,
+  _issueId: string,
+  _action: ScopeIssueAction,
+) => undefined;
+
 export default TwChromeOverlay;

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

@@ -0,0 +1,133 @@
+/**
+ * TwScopeCardLayer — renders at most one scope card at a time, chosen
+ * by `activeScopeId`.  Consumes `facet.getAllScopeCardModels()` to
+ * look up the model, then positions the card 8px above the model's
+ * `primaryAnchorRect`.
+ *
+ * Per docs/plans/scope-card-overlay.md P1, the layer keeps
+ * positioning pure: it never calls `getBoundingClientRect` or reads
+ * DOM rects.  Coordinates come from the render kernel's anchor index
+ * through `ScopeCardModel.primaryAnchorRect`, projected into the
+ * overlay's own coordinate space via the shared projector.
+ *
+ * Auto-flip, pin, and overlapping-scope stacking land in P3.  P1
+ * renders a single card above the scope's first line and falls back
+ * to a top-left overlay placement when no rect is resolvable.
+ */
+
+import * as React from "react";
+import {
+  projectRectToOverlay,
+  type OverlayCoordinateSpace,
+} from "./chrome-overlay-projector";
+import { TwScopeCard } from "./tw-scope-card";
+import type {
+  ScopeIssueAction,
+  WorkflowScopeMode,
+} from "../../api/public-types";
+import type { RenderFrameRect } from "../../runtime/render";
+import type { WordReviewEditorLayoutFacet } from "../../runtime/layout";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface TwScopeCardLayerProps {
+  facet: WordReviewEditorLayoutFacet;
+  activeScopeId: string | null;
+  onClose: () => void;
+  onModeChange: (scopeId: string, mode: WorkflowScopeMode) => void;
+  onIssueAction: (
+    scopeId: string,
+    issueId: string,
+    action: ScopeIssueAction,
+  ) => void;
+  space?: OverlayCoordinateSpace;
+  "data-testid"?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+const CARD_GAP_PX = 8;
+const CARD_ESTIMATED_HEIGHT_PX = 160;
+const CARD_FALLBACK_LEFT_PX = 16;
+const CARD_FALLBACK_TOP_PX = 16;
+
+export const TwScopeCardLayer: React.FC<TwScopeCardLayerProps> = ({
+  facet,
+  activeScopeId,
+  onClose,
+  onModeChange,
+  onIssueAction,
+  space,
+  "data-testid": testId,
+}) => {
+  if (!activeScopeId) return null;
+  const models =
+    typeof facet.getAllScopeCardModels === "function"
+      ? facet.getAllScopeCardModels()
+      : [];
+  const model = models.find((m) => m.scopeId === activeScopeId);
+  if (!model) return null;
+
+  const projectorSpace: OverlayCoordinateSpace =
+    space ?? { originLeftPx: 0, originTopPx: 0 };
+  const positioned = resolveCardPosition(
+    model.primaryAnchorRect,
+    projectorSpace,
+  );
+
+  return (
+    <div
+      className="wre-scope-card-layer pointer-events-none absolute inset-0 z-30"
+      data-testid={testId ?? "scope-card-layer"}
+      data-active-scope-id={activeScopeId}
+    >
+      <div style={positioned} className="absolute">
+        <TwScopeCard
+          model={model}
+          onClose={onClose}
+          onModeChange={(mode) => onModeChange(model.scopeId, mode)}
+          onIssueAction={(action) => {
+            if (!model.issue) return;
+            onIssueAction(model.scopeId, model.issue.issueId, action);
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Positioning
+// ---------------------------------------------------------------------------
+
+function resolveCardPosition(
+  anchor: RenderFrameRect | null,
+  space: OverlayCoordinateSpace,
+): React.CSSProperties {
+  if (!anchor) {
+    return {
+      left: `${CARD_FALLBACK_LEFT_PX}px`,
+      top: `${CARD_FALLBACK_TOP_PX}px`,
+    };
+  }
+  // Position the card above the anchor's first line, leaving
+  // `CARD_GAP_PX` between anchor top and card bottom.  P3 adds auto-
+  // flip based on viewport clipping.
+  const targetRect: RenderFrameRect = {
+    leftPx: anchor.leftPx,
+    topPx: Math.max(0, anchor.topPx - CARD_ESTIMATED_HEIGHT_PX - CARD_GAP_PX),
+    widthPx: 1,
+    heightPx: 1,
+  };
+  const projected = projectRectToOverlay(targetRect, space);
+  return {
+    left: projected.left,
+    top: projected.top,
+  };
+}
+
+export default TwScopeCardLayer;