@beyondwork/docx-react-component 1.0.105 → 1.0.108

package/src/ui-tailwind/chrome/tw-workspace-chrome-host.tsx

@@ -66,6 +66,7 @@ import {
  */
 function createStableHostProxy(
   hostRef: { current: EditorActionHostCallbacks },
+  fallbackRef?: { current: EditorActionHostCallbacks },
 ): EditorActionHostCallbacks {
   // Proxy construction is ~free and happens exactly once per component
   // lifetime (see the empty-dep useMemo call site below).  The `get`
@@ -76,11 +77,20 @@ function createStableHostProxy(
       // `typeof host[key] === "function"` checks elsewhere behave
       // predictably.
       if (typeof prop !== "string") return undefined;
-      return (hostRef.current as Record<string, unknown>)[prop];
+      const hostValue = (hostRef.current as Record<string, unknown>)[prop];
+      if (hostValue !== undefined) return hostValue;
+      return fallbackRef
+        ? (fallbackRef.current as Record<string, unknown>)[prop]
+        : undefined;
     },
     has: (_target, prop) => {
       if (typeof prop !== "string") return false;
-      return prop in (hostRef.current as Record<string, unknown>);
+      return (
+        prop in (hostRef.current as Record<string, unknown>) ||
+        (fallbackRef
+          ? prop in (fallbackRef.current as Record<string, unknown>)
+          : false)
+      );
     },
     // `ownKeys` + `getOwnPropertyDescriptor` left default — iteration
     // over the proxy isn't part of the registry contract.
@@ -184,7 +194,22 @@ export function TwWorkspaceChromeHost(
   // `[mode]` so wholesale-snapshot re-renders don't rebuild groups.
   const hostRef = useRef<EditorActionHostCallbacks>(editorActionHost);
   hostRef.current = editorActionHost;
-  const stableHost = useMemo(() => createStableHostProxy(hostRef), []);
+  // Phase E trust/detail action fallback. Registry rows remain callback-
+  // driven, but the chrome host can satisfy product-safe detail requests
+  // through the existing rail-tab channel it already owns. Hosts still
+  // override these by supplying explicit callbacks in `editorActionHost`.
+  const railActionHostRef = useRef<EditorActionHostCallbacks>({});
+  const openRailTabRef = useRef<
+    ((tab: EditorRailTab, itemId?: string) => void) | undefined
+  >(onOpenRailTab);
+  openRailTabRef.current = onOpenRailTab;
+  railActionHostRef.current = {
+    onOpenTemplateSlotInfo: () => openRailTabRef.current?.("workflow"),
+  };
+  const stableHost = useMemo(
+    () => createStableHostProxy(hostRef, railActionHostRef),
+    [],
+  );
 
   const controller = useContextMenuController({
     mode,
@@ -203,15 +228,6 @@ export function TwWorkspaceChromeHost(
   requestWithKindsRef.current = controller.requestWithKinds;
   const dismissRef = useRef(controller.dismiss);
   dismissRef.current = controller.dismiss;
-  // Phase E.0 — ref-sync the rail-tab callback so the imperative handle
-  // identity stays stable while still dispatching to the freshest host
-  // closure on every call.  `undefined` is kept in the ref when the host
-  // omits the prop so `openRailTab` becomes a safe no-op.
-  const openRailTabRef = useRef<
-    ((tab: EditorRailTab, itemId?: string) => void) | undefined
-  >(onOpenRailTab);
-  openRailTabRef.current = onOpenRailTab;
-
   useImperativeHandle(
     controllerRef,
     () => ({

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

@@ -18,15 +18,24 @@ import type { ScopeRailSegment } from "../../api/public-types.ts";
 import type {
   EditorRole,
   EditorStoryTarget,
+  GeometryFacet,
   ScopeIssueAction,
   TableStructureContextSnapshot,
   WordReviewEditorLayoutFacet,
+  WorkflowFacet,
   WorkflowScopeMode,
 } from "../../api/public-types";
+import type {
+  UiObjectDragSession,
+  UiObjectDragStartInput,
+} from "../../api/v3/ui/_types.ts";
 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 { TwPresenceOverlayLane } from "./tw-presence-overlay-lane";
+import { TwReviewOverlayLaneMarkers } from "./tw-review-overlay-lane-markers";
+import { TwSubstrateOverlayLanes } from "./tw-substrate-overlay-lanes";
 
 export interface TwChromeOverlayProps {
   /** Layout facet the overlay layers read from (layout-semantic data). */
@@ -36,13 +45,13 @@ export interface TwChromeOverlayProps {
    * `facet.getRenderFrame` / `.getRenderZoom` in refactor/05
    * cross-lane-coord §8.4.
    */
-  geometryFacet: import("../../runtime/geometry/index.ts").GeometryFacet;
+  geometryFacet: GeometryFacet;
   /**
    * 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;
+  workflowFacet: WorkflowFacet | null;
   /** Optional coordinate space override.  Defaults to the overlay origin. */
   space?: OverlayCoordinateSpace;
   /** Active scope id (for emphasis + rail tab sync). */
@@ -111,6 +120,8 @@ export interface TwChromeOverlayProps {
   grabbedObjectToOffset?: number | null;
   /** Called when the user clicks outside the selection box to deselect. */
   onDeselectObject?: () => void;
+  /** Object handle drag lifecycle; routed through the mounted UI API seam. */
+  onBeginObjectDrag?: (input: UiObjectDragStartInput) => UiObjectDragSession;
 
   // Table grip props (P6) -----------------------------------------------
   /** Active table context — when present, column/row resize grips are shown. */
@@ -200,6 +211,15 @@ export interface TwChromeOverlayProps {
   > | null;
 }
 
+export function resolveTableGripContext(
+  tableContext: TableStructureContextSnapshot | null | undefined,
+): TableStructureContextSnapshot | null {
+  if (!tableContext || tableContext.selectionKind !== "cell") {
+    return null;
+  }
+  return tableContext;
+}
+
 /**
  * Placement contract:
  *   - The overlay is an absolutely positioned `div` that fills its parent.
@@ -231,6 +251,7 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
   grabbedObjectFromOffset,
   grabbedObjectToOffset,
   onDeselectObject,
+  onBeginObjectDrag,
   tableContext,
   onSetColumnWidth,
   onSetRowHeight,
@@ -245,6 +266,8 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
   mediaPreviews,
   activeBandRibbonProps,
 }) => {
+  const tableGripContext = resolveTableGripContext(tableContext);
+
   return (
     <div
       className="wre-chrome-overlay pointer-events-none absolute inset-0 z-30"
@@ -284,7 +307,7 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
       <TwTableGripLayer
         facet={facet}
         geometryFacet={geometryFacet}
-        tableContext={tableContext ?? null}
+        tableContext={tableGripContext}
         space={space}
         onSetColumnWidth={onSetColumnWidth}
         onSetRowHeight={onSetRowHeight}
@@ -296,7 +319,11 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
         geometryFacet={geometryFacet}
         space={space}
         onDeselect={onDeselectObject}
+        onBeginObjectDrag={onBeginObjectDrag}
       />
+      <TwSubstrateOverlayLanes space={space} />
+      <TwReviewOverlayLaneMarkers space={space} />
+      <TwPresenceOverlayLane />
       {children}
     </div>
   );

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

@@ -21,6 +21,11 @@
 import * as React from "react";
 import { useEffect, useRef } from "react";
 import type { GeometryFacet } from "../../api/public-types";
+import type {
+  UiObjectDragHandle,
+  UiObjectDragSession,
+  UiObjectDragStartInput,
+} from "../../api/v3/ui/_types.ts";
 import type { OverlayCoordinateSpace } from "./chrome-overlay-projector";
 import { projectRectToOverlay } from "./chrome-overlay-projector";
 
@@ -57,6 +62,8 @@ export interface TwObjectSelectionOverlayProps {
   space?: OverlayCoordinateSpace;
   /** Called when the user clicks outside the selection box. */
   onDeselect?: () => void;
+  /** Starts the mounted object-drag lifecycle for move/resize/rotate handles. */
+  onBeginObjectDrag?: (input: UiObjectDragStartInput) => UiObjectDragSession;
 }
 
 export function TwObjectSelectionOverlay({
@@ -66,8 +73,10 @@ export function TwObjectSelectionOverlay({
   geometryFacet,
   space,
   onDeselect,
+  onBeginObjectDrag,
 }: TwObjectSelectionOverlayProps) {
   const overlayRef = useRef<HTMLDivElement>(null);
+  const dragRef = useRef<{ session: UiObjectDragSession } | null>(null);
 
   // Click-outside to deselect.
   useEffect(() => {
@@ -81,6 +90,42 @@ export function TwObjectSelectionOverlay({
     return () => document.removeEventListener("pointerdown", handlePointerDown, { capture: true });
   }, [grabbedObjectId, onDeselect]);
 
+  useEffect(() => {
+    if (!onBeginObjectDrag) return;
+    function handlePointerMove(e: PointerEvent) {
+      const active = dragRef.current;
+      if (!active) return;
+      active.session.update({
+        clientX: e.clientX,
+        clientY: e.clientY,
+      });
+    }
+    function handlePointerUp(e: PointerEvent) {
+      const active = dragRef.current;
+      if (!active) return;
+      dragRef.current = null;
+      active.session.commit({
+        clientX: e.clientX,
+        clientY: e.clientY,
+      });
+    }
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key !== "Escape") return;
+      const active = dragRef.current;
+      if (!active) return;
+      dragRef.current = null;
+      active.session.cancel();
+    }
+    document.addEventListener("pointermove", handlePointerMove, { capture: true });
+    document.addEventListener("pointerup", handlePointerUp, { capture: true });
+    document.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () => {
+      document.removeEventListener("pointermove", handlePointerMove, { capture: true });
+      document.removeEventListener("pointerup", handlePointerUp, { capture: true });
+      document.removeEventListener("keydown", handleKeyDown, { capture: true });
+    };
+  }, [onBeginObjectDrag]);
+
   if (!grabbedObjectId || grabbedObjectFromOffset == null) return null;
 
   const frame = geometryFacet.getRenderFrame();
@@ -92,6 +137,14 @@ export function TwObjectSelectionOverlay({
   if (!rawRect) return null;
 
   const rect = projectRectToOverlay(rawRect, space);
+  const coordinateSpace = space ?? { originLeftPx: 0, originTopPx: 0 };
+  const dragInitialRect = {
+    leftPx: rawRect.leftPx - coordinateSpace.originLeftPx,
+    topPx: rawRect.topPx - coordinateSpace.originTopPx,
+    widthPx: rawRect.widthPx,
+    heightPx: rawRect.heightPx,
+    space: "overlay" as const,
+  };
 
   const boxStyle: React.CSSProperties = {
     position: "absolute",
@@ -104,6 +157,20 @@ export function TwObjectSelectionOverlay({
     pointerEvents: "auto",
   };
 
+  const beginDrag = (handle: UiObjectDragHandle, event: React.PointerEvent<HTMLElement>) => {
+    if (!onBeginObjectDrag) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const session = onBeginObjectDrag({
+      objectId: grabbedObjectId,
+      handle,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      initialRect: dragInitialRect,
+    });
+    dragRef.current = { session };
+  };
+
   return (
     <div
       ref={overlayRef}
@@ -112,16 +179,37 @@ export function TwObjectSelectionOverlay({
       data-object-selection=""
       data-object-id={grabbedObjectId}
       aria-label="Selected object"
+      onPointerDown={(event) => {
+        if (event.target === event.currentTarget) {
+          beginDrag("move", event);
+        }
+      }}
     >
       {HANDLE_POSITIONS.map((pos) => (
-        <ObjectHandle key={pos} position={pos} />
+        <ObjectHandle
+          key={pos}
+          position={pos}
+          interactive={Boolean(onBeginObjectDrag)}
+          onPointerDown={(event) => beginDrag(pos, event)}
+        />
       ))}
-      <RotateGrip />
+      <RotateGrip
+        interactive={Boolean(onBeginObjectDrag)}
+        onPointerDown={(event) => beginDrag("rotate", event)}
+      />
     </div>
   );
 }
 
-function ObjectHandle({ position }: { position: HandlePosition }) {
+function ObjectHandle({
+  position,
+  interactive,
+  onPointerDown,
+}: {
+  position: HandlePosition;
+  interactive: boolean;
+  onPointerDown?: React.PointerEventHandler<HTMLDivElement>;
+}) {
   const HANDLE_PX = 8;
   const half = HANDLE_PX / 2;
   const pos = position;
@@ -135,17 +223,28 @@ function ObjectHandle({ position }: { position: HandlePosition }) {
     borderRadius: 1,
     boxSizing: "border-box",
     cursor: CURSOR_MAP[pos],
-    // Visual only in v1 — pointer events disabled so clicks fall through to
-    // the click-outside listener which deselectObjects.
-    pointerEvents: "none",
+    pointerEvents: interactive ? "auto" : "none",
     ...(pos.includes("w") ? { left: -half } : pos.includes("e") ? { right: -half } : { left: "50%", transform: "translateX(-50%)" }),
     ...(pos.includes("n") ? { top: -half } : pos.includes("s") ? { bottom: -half } : { top: "50%", transform: `${pos === "w" || pos === "e" ? "translateY(-50%)" : "translateX(-50%) translateY(-50%)"}` }),
   };
 
-  return <div style={style} data-handle={pos} aria-hidden="true" />;
+  return (
+    <div
+      style={style}
+      data-handle={pos}
+      aria-hidden="true"
+      onPointerDown={onPointerDown}
+    />
+  );
 }
 
-function RotateGrip() {
+function RotateGrip({
+  interactive,
+  onPointerDown,
+}: {
+  interactive: boolean;
+  onPointerDown?: React.PointerEventHandler<HTMLDivElement>;
+}) {
   const style: React.CSSProperties = {
     position: "absolute",
     width: 10,
@@ -157,8 +256,15 @@ function RotateGrip() {
     left: "50%",
     transform: "translateX(-50%)",
     cursor: "grab",
-    pointerEvents: "none",
+    pointerEvents: interactive ? "auto" : "none",
     boxSizing: "border-box",
   };
-  return <div style={style} data-handle="rotate" aria-hidden="true" />;
+  return (
+    <div
+      style={style}
+      data-handle="rotate"
+      aria-hidden="true"
+      onPointerDown={onPointerDown}
+    />
+  );
 }