@beyondwork/docx-react-component 1.0.56 → 1.0.58

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

@@ -28,6 +28,7 @@ import { TwScopeCardLayer } from "./tw-scope-card-layer";
 import { TwPageStackOverlayLayer } from "./tw-page-stack-overlay-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";
 
 export interface TwChromeOverlayProps {
   /** Layout facet the overlay layers read from. */
@@ -93,6 +94,16 @@ export interface TwChromeOverlayProps {
   /** Optional extra children (e.g., future comment balloon layer). */
   children?: React.ReactNode;
 
+  // Object selection overlay (N6) ----------------------------------------
+  /** R.3 — grabbed image/shape id, or null. When set, the selection overlay renders. */
+  grabbedObjectId?: string | null;
+  /** Document `from` offset of the grabbed segment (for anchor-index lookup). */
+  grabbedObjectFromOffset?: number | null;
+  /** Document `to` offset of the grabbed segment. */
+  grabbedObjectToOffset?: number | null;
+  /** Called when the user clicks outside the selection box to deselect. */
+  onDeselectObject?: () => void;
+
   // Table grip props (P6) -----------------------------------------------
   /** Active table context — when present, column/row resize grips are shown. */
   tableContext?: TableStructureContextSnapshot | null;
@@ -187,6 +198,10 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
   scopeCardScopeTagEditor,
   "data-testid": testId,
   children,
+  grabbedObjectId,
+  grabbedObjectFromOffset,
+  grabbedObjectToOffset,
+  onDeselectObject,
   tableContext,
   onSetColumnWidth,
   onSetRowHeight,
@@ -209,6 +224,7 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
           facet={facet}
           scrollRoot={pageStackScrollRoot}
           renderFrameRevision={renderFrameRevision ?? 0}
+          visiblePageIndexRange={visiblePageIndexRange ?? null}
         />
       ) : null}
       {pageStackScrollRoot !== undefined ? (
@@ -250,6 +266,14 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
         onSetColumnWidth={onSetColumnWidth}
         onSetRowHeight={onSetRowHeight}
       />
+      <TwObjectSelectionOverlay
+        grabbedObjectId={grabbedObjectId ?? null}
+        grabbedObjectFromOffset={grabbedObjectFromOffset ?? null}
+        grabbedObjectToOffset={grabbedObjectToOffset ?? null}
+        facet={facet}
+        space={space}
+        onDeselect={onDeselectObject}
+      />
       {children}
     </div>
   );

package/src/ui-tailwind/chrome-overlay/tw-comment-balloon-layer.tsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+import type { RenderBlockDecoration } from "../../runtime/render/render-frame-types";
+import { TwCommentPreview } from "../chrome/tw-comment-preview";
+
+const WIDE_BREAKPOINT_PX = 1024;
+const CONNECTOR_GAP_PX = 16;
+const BALLOON_MAX_WIDTH_PX = 240;
+
+export interface CommentBalloonData {
+  commentId: string;
+  authorName: string;
+  authorInitials?: string;
+  authorAvatarUrl?: string;
+  timestamp?: string;
+  excerpt: string;
+}
+
+export interface TwCommentBalloonLayerProps {
+  /** Decoration rects from `frame.decorationIndex.comments`. */
+  commentDecorations: readonly RenderBlockDecoration[];
+  /** Pre-resolved comment data keyed by commentId. */
+  commentDataById: ReadonlyMap<string, CommentBalloonData>;
+  /** Viewport width — balloons only render >= WIDE_BREAKPOINT_PX. */
+  viewportWidthPx: number;
+  /** Right edge of the page frame in overlay coordinates (px). */
+  pageRightEdgePx: number;
+  onOpenThread?: (commentId: string) => void;
+}
+
+export const TwCommentBalloonLayer = React.memo(function TwCommentBalloonLayer({
+  commentDecorations,
+  commentDataById,
+  viewportWidthPx,
+  pageRightEdgePx,
+  onOpenThread,
+}: TwCommentBalloonLayerProps) {
+  if (viewportWidthPx < WIDE_BREAKPOINT_PX) return null;
+  if (commentDecorations.length === 0) return null;
+
+  return (
+    <>
+      {commentDecorations.map((dec) => {
+        const data = commentDataById.get(dec.refId);
+        if (!data) return null;
+        return (
+          <div
+            key={dec.refId}
+            style={{
+              position: "absolute",
+              top: dec.frame.topPx,
+              left: pageRightEdgePx + CONNECTOR_GAP_PX,
+              width: BALLOON_MAX_WIDTH_PX,
+              pointerEvents: "auto",
+              zIndex: 10,
+            }}
+          >
+            <TwCommentPreview
+              author={{
+                name: data.authorName,
+                initials: data.authorInitials,
+                avatarUrl: data.authorAvatarUrl,
+              }}
+              timestamp={data.timestamp}
+              excerpt={data.excerpt}
+              onOpenThread={
+                onOpenThread ? () => onOpenThread(data.commentId) : undefined
+              }
+            />
+          </div>
+        );
+      })}
+    </>
+  );
+});

package/src/ui-tailwind/chrome-overlay/tw-locked-block-layer.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { Lock } from "lucide-react";
+import type { RenderBlockDecoration } from "../../runtime/render/render-frame-types";
+
+const OUTLINE_INSET_PX = 2;
+const BADGE_SIZE_PX = 20;
+
+export interface TwLockedBlockLayerProps {
+  /** Decoration rects from `frame.decorationIndex.locked`. */
+  lockedDecorations: readonly RenderBlockDecoration[];
+}
+
+export const TwLockedBlockLayer = React.memo(function TwLockedBlockLayer({
+  lockedDecorations,
+}: TwLockedBlockLayerProps) {
+  if (lockedDecorations.length === 0) return null;
+
+  return (
+    <>
+      {lockedDecorations.map((dec, idx) => {
+        const { leftPx, topPx, widthPx, heightPx } = dec.frame;
+        return (
+          <React.Fragment key={`locked-${dec.refId}-${idx}`}>
+            {/* Dashed outline around the locked block */}
+            <div
+              aria-hidden
+              style={{
+                position: "absolute",
+                top: topPx + OUTLINE_INSET_PX,
+                left: leftPx + OUTLINE_INSET_PX,
+                width: widthPx - OUTLINE_INSET_PX * 2,
+                height: heightPx - OUTLINE_INSET_PX * 2,
+                border: "1.5px dashed var(--color-border-caution, #e8a020)",
+                borderRadius: 2,
+                pointerEvents: "none",
+              }}
+            />
+            {/* Lock badge in the top-right corner */}
+            <div
+              aria-label="Locked content"
+              role="img"
+              style={{
+                position: "absolute",
+                top: topPx - BADGE_SIZE_PX / 2,
+                left: leftPx + widthPx - BADGE_SIZE_PX / 2,
+                width: BADGE_SIZE_PX,
+                height: BADGE_SIZE_PX,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                background: "var(--color-bg-surface, #fff)",
+                border: "1px solid var(--color-border-caution, #e8a020)",
+                borderRadius: "50%",
+                pointerEvents: "none",
+                zIndex: 1,
+              }}
+            >
+              <Lock size={10} strokeWidth={2.5} />
+            </div>
+          </React.Fragment>
+        );
+      })}
+    </>
+  );
+});

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

@@ -0,0 +1,157 @@
+/**
+ * Lane 6d — N6 P11.1–P11.5: object selection chrome overlay.
+ *
+ * Renders a selection box with 8 resize handles and a rotate grip around the
+ * grabbed image or shape.  Purely visual chrome — no resize/rotate mutations
+ * in this slice; handle interaction is deferred to the follow-up N6.b slice.
+ *
+ * Positioning: uses `RenderAnchorIndex.byRuntimeOffset(from)` + `bySelection`
+ * to compute the object rect in overlay-coordinate space, then paints over it.
+ *
+ * Dismissal: clicking outside the overlay calls `onDeselect()` which routes
+ * to `runtime.deselectObject()` in the workspace.
+ *
+ * v1 scope:
+ *   - rect, ellipse, roundRect shapes and inline/floating images.
+ *   - Resize handles are visual only (pointer-events-none on each handle).
+ *   - Rotate grip is visual only.
+ *   - Anchor drag indicator omitted until N6.b.
+ */
+
+import * as React from "react";
+import { useEffect, useRef } from "react";
+import type { WordReviewEditorLayoutFacet } from "../../api/public-types";
+import type { OverlayCoordinateSpace } from "./chrome-overlay-projector";
+import { projectRectToOverlay } from "./chrome-overlay-projector";
+
+/** The 8 corner/edge handle positions. */
+const HANDLE_POSITIONS = [
+  "nw", "n", "ne",
+  "w",        "e",
+  "sw", "s", "se",
+] as const;
+type HandlePosition = typeof HANDLE_POSITIONS[number];
+
+const CURSOR_MAP: Record<HandlePosition, string> = {
+  nw: "nw-resize", n: "n-resize", ne: "ne-resize",
+  w: "w-resize",               e: "e-resize",
+  sw: "sw-resize", s: "s-resize", se: "se-resize",
+};
+
+export interface TwObjectSelectionOverlayProps {
+  /** Stable id of the grabbed image/shape (mediaId or shapeId), or null. */
+  grabbedObjectId: string | null;
+  /** Document offset (`from`) of the grabbed object's inline segment. Null when no object grabbed. */
+  grabbedObjectFromOffset: number | null;
+  /** Document offset (`to`) of the grabbed object's inline segment. Null when no object grabbed. */
+  grabbedObjectToOffset: number | null;
+  /** Layout facet for render-frame + anchor-index access. */
+  facet: WordReviewEditorLayoutFacet;
+  /** Optional overlay coordinate-space override. */
+  space?: OverlayCoordinateSpace;
+  /** Called when the user clicks outside the selection box. */
+  onDeselect?: () => void;
+}
+
+export function TwObjectSelectionOverlay({
+  grabbedObjectId,
+  grabbedObjectFromOffset,
+  grabbedObjectToOffset,
+  facet,
+  space,
+  onDeselect,
+}: TwObjectSelectionOverlayProps) {
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  // Click-outside to deselect.
+  useEffect(() => {
+    if (!grabbedObjectId || !onDeselect) return;
+    function handlePointerDown(e: PointerEvent) {
+      if (overlayRef.current && !overlayRef.current.contains(e.target as Node)) {
+        onDeselect!();
+      }
+    }
+    document.addEventListener("pointerdown", handlePointerDown, { capture: true });
+    return () => document.removeEventListener("pointerdown", handlePointerDown, { capture: true });
+  }, [grabbedObjectId, onDeselect]);
+
+  if (!grabbedObjectId || grabbedObjectFromOffset == null) return null;
+
+  const frame = typeof facet.getRenderFrame === "function" ? facet.getRenderFrame() : null;
+  if (!frame) return null;
+
+  const rawRect = grabbedObjectToOffset != null
+    ? frame.anchorIndex.bySelection(grabbedObjectFromOffset, grabbedObjectToOffset)
+    : frame.anchorIndex.byRuntimeOffset(grabbedObjectFromOffset);
+  if (!rawRect) return null;
+
+  const rect = projectRectToOverlay(rawRect, space);
+
+  const boxStyle: React.CSSProperties = {
+    position: "absolute",
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+    height: rect.height,
+    outline: "2px solid var(--color-accent-primary)",
+    boxSizing: "border-box",
+    pointerEvents: "auto",
+  };
+
+  return (
+    <div
+      ref={overlayRef}
+      style={boxStyle}
+      data-object-selection=""
+      data-object-id={grabbedObjectId}
+      aria-label="Selected object"
+    >
+      {HANDLE_POSITIONS.map((pos) => (
+        <ObjectHandle key={pos} position={pos} />
+      ))}
+      <RotateGrip />
+    </div>
+  );
+}
+
+function ObjectHandle({ position }: { position: HandlePosition }) {
+  const HANDLE_PX = 8;
+  const half = HANDLE_PX / 2;
+  const pos = position;
+
+  const style: React.CSSProperties = {
+    position: "absolute",
+    width: HANDLE_PX,
+    height: HANDLE_PX,
+    background: "white",
+    border: "1.5px solid var(--color-accent-primary)",
+    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",
+    ...(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" />;
+}
+
+function RotateGrip() {
+  const style: React.CSSProperties = {
+    position: "absolute",
+    width: 10,
+    height: 10,
+    borderRadius: "50%",
+    background: "white",
+    border: "1.5px solid var(--color-accent-primary)",
+    top: -24,
+    left: "50%",
+    transform: "translateX(-50%)",
+    cursor: "grab",
+    pointerEvents: "none",
+    boxSizing: "border-box",
+  };
+  return <div style={style} data-handle="rotate" aria-hidden="true" />;
+}

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

@@ -0,0 +1,233 @@
+/**
+ * Lane 6d — Slice N5 (P11.6 + P11.7): page-border + column-separator overlay.
+ *
+ * Pure presentational component that paints the four page-border edges
+ * and any column-separator vertical lines for a single page.  All
+ * positioning math lives in `page-border-resolver.ts`; this component
+ * does no measurement and reads no DOM — it accepts a `PageLayoutSnapshot`
+ * + page rect (in px) and emits inline-styled `<div>`s.
+ *
+ * Designed to be mounted by a per-page chrome layer (one
+ * `<TwPageBorderOverlay>` per page) so each page can use its own section's
+ * `pageBorders` and `columnDefinitions` independently.
+ */
+
+import React from "react";
+import type { PageLayoutSnapshot } from "../../api/public-types";
+import {
+  resolveColumnSeparatorXOffsets,
+  resolvePageBorders,
+} from "./page-border-resolver";
+
+export interface TwPageBorderOverlayProps {
+  /** Section layout for the page (drives `pageBorders` + `columnSeparator`). */
+  layout: PageLayoutSnapshot | undefined;
+  /** Zero-based page index within its owning section (drives display policy). */
+  pageInSection: number;
+  /** Page rect in container-relative pixels. */
+  pageWidthPx: number;
+  pageHeightPx: number;
+  /** Inner content-box insets in pixels (text margin from page edge). */
+  marginLeftPx: number;
+  marginRightPx: number;
+  marginTopPx: number;
+  marginBottomPx: number;
+  /** Optional test id for assertion targeting. */
+  "data-testid"?: string;
+}
+
+/**
+ * Border edge geometry helpers — convert the resolved spec + page
+ * dimensions into the absolute `style` props for one positioned `<div>`.
+ */
+function styleForEdge(
+  edge: "top" | "right" | "bottom" | "left",
+  widthPx: number,
+  styleName: string,
+  color: string,
+  insetTop: number,
+  insetRight: number,
+  insetBottom: number,
+  insetLeft: number,
+): React.CSSProperties {
+  switch (edge) {
+    case "top":
+      return {
+        position: "absolute",
+        top: `${insetTop}px`,
+        left: `${insetLeft}px`,
+        right: `${insetRight}px`,
+        height: `${widthPx}px`,
+        borderTop: `${widthPx}px ${styleName} ${color}`,
+        pointerEvents: "none",
+      };
+    case "bottom":
+      return {
+        position: "absolute",
+        bottom: `${insetBottom}px`,
+        left: `${insetLeft}px`,
+        right: `${insetRight}px`,
+        height: `${widthPx}px`,
+        borderBottom: `${widthPx}px ${styleName} ${color}`,
+        pointerEvents: "none",
+      };
+    case "left":
+      return {
+        position: "absolute",
+        top: `${insetTop}px`,
+        bottom: `${insetBottom}px`,
+        left: `${insetLeft}px`,
+        width: `${widthPx}px`,
+        borderLeft: `${widthPx}px ${styleName} ${color}`,
+        pointerEvents: "none",
+      };
+    case "right":
+      return {
+        position: "absolute",
+        top: `${insetTop}px`,
+        bottom: `${insetBottom}px`,
+        right: `${insetRight}px`,
+        width: `${widthPx}px`,
+        borderRight: `${widthPx}px ${styleName} ${color}`,
+        pointerEvents: "none",
+      };
+  }
+}
+
+export function TwPageBorderOverlay(
+  props: TwPageBorderOverlayProps,
+): React.ReactElement | null {
+  const {
+    layout,
+    pageInSection,
+    pageWidthPx,
+    pageHeightPx,
+    marginLeftPx,
+    marginRightPx,
+    marginTopPx,
+    marginBottomPx,
+  } = props;
+
+  const borders = resolvePageBorders(layout, pageInSection);
+  const columnOffsets = resolveColumnSeparatorXOffsets(layout);
+
+  // Nothing to paint at all → return null so React can skip the subtree.
+  const hasBorderEdges = !!borders?.display && (
+    borders.top !== null ||
+    borders.right !== null ||
+    borders.bottom !== null ||
+    borders.left !== null
+  );
+  if (!hasBorderEdges && columnOffsets.length === 0) {
+    return null;
+  }
+
+  // Insets — `offsetFrom: "page"` anchors to the page edge (= 0 inset);
+  // `offsetFrom: "text"` anchors to the text margin.  Per-edge `space`
+  // pushes the border further inward from that anchor.
+  const usePageOffset = (borders?.offsetFrom ?? "page") === "page";
+  const baseInsetTop = usePageOffset ? 0 : marginTopPx;
+  const baseInsetRight = usePageOffset ? 0 : marginRightPx;
+  const baseInsetBottom = usePageOffset ? 0 : marginBottomPx;
+  const baseInsetLeft = usePageOffset ? 0 : marginLeftPx;
+
+  return (
+    <div
+      data-page-border-overlay=""
+      data-page-in-section={pageInSection}
+      aria-hidden="true"
+      data-testid={props["data-testid"] ?? "page-border-overlay"}
+      style={{
+        position: "absolute",
+        inset: 0,
+        // zOrder: "back" sits visually behind text; default ("front") sits
+        // above.  Using `pointer-events: none` on every child means content
+        // remains clickable in either case.
+        zIndex: borders?.zOrder === "back" ? -1 : 1,
+        pointerEvents: "none",
+      }}
+    >
+      {hasBorderEdges && borders?.top ? (
+        <div
+          data-edge="top"
+          style={styleForEdge(
+            "top",
+            borders.top.widthPx,
+            borders.top.style,
+            borders.top.color,
+            baseInsetTop + borders.top.spacePx,
+            baseInsetRight,
+            baseInsetBottom,
+            baseInsetLeft,
+          )}
+        />
+      ) : null}
+      {hasBorderEdges && borders?.right ? (
+        <div
+          data-edge="right"
+          style={styleForEdge(
+            "right",
+            borders.right.widthPx,
+            borders.right.style,
+            borders.right.color,
+            baseInsetTop,
+            baseInsetRight + borders.right.spacePx,
+            baseInsetBottom,
+            baseInsetLeft,
+          )}
+        />
+      ) : null}
+      {hasBorderEdges && borders?.bottom ? (
+        <div
+          data-edge="bottom"
+          style={styleForEdge(
+            "bottom",
+            borders.bottom.widthPx,
+            borders.bottom.style,
+            borders.bottom.color,
+            baseInsetTop,
+            baseInsetRight,
+            baseInsetBottom + borders.bottom.spacePx,
+            baseInsetLeft,
+          )}
+        />
+      ) : null}
+      {hasBorderEdges && borders?.left ? (
+        <div
+          data-edge="left"
+          style={styleForEdge(
+            "left",
+            borders.left.widthPx,
+            borders.left.style,
+            borders.left.color,
+            baseInsetTop,
+            baseInsetRight,
+            baseInsetBottom,
+            baseInsetLeft + borders.left.spacePx,
+          )}
+        />
+      ) : null}
+      {/* Column separators — vertical hairlines centered in column gaps,
+          inset by the text margins so they paint inside the content box. */}
+      {columnOffsets.map((xPxFromContentLeft, i) => (
+        <div
+          key={`col-sep-${i}`}
+          data-column-separator=""
+          data-column-separator-index={i}
+          style={{
+            position: "absolute",
+            top: `${marginTopPx}px`,
+            bottom: `${marginBottomPx}px`,
+            left: `${marginLeftPx + xPxFromContentLeft}px`,
+            width: "1px",
+            backgroundColor: "var(--color-border-default, currentColor)",
+            opacity: 0.6,
+            pointerEvents: "none",
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default TwPageBorderOverlay;