@beyondwork/docx-react-component 1.0.56 → 1.0.58

package/src/ui-tailwind/page-stack/tw-page-stack-chrome-layer.tsx

@@ -73,6 +73,7 @@ import type {
   WordReviewEditorLayoutFacet,
 } from "../../api/public-types.ts";
 import {
+  measureWidgetsViaOffsetChain,
   measureWidgetsViaBoundingRect,
   resolvePageOverlayRects,
   type PageOverlayRect,
@@ -176,7 +177,10 @@ export const TwPageStackChromeLayer: React.FC<TwPageStackChromeLayerProps> = ({
     const origin = overlayRootRef.current;
     const pageCount = facet.getPageCount();
     if (origin) {
-      const widgets = measureWidgetsViaBoundingRect(scrollRoot, origin);
+      const widgets = measureWidgetsViaBoundingRect(scrollRoot, origin, {
+        pageCount,
+        visiblePageIndexRange,
+      });
       const originRect = origin.getBoundingClientRect();
       // jsdom + SSR never populate `origin.clientHeight` (no layout
       // pass).  Fall back to `originRect.height`, and if that's also
@@ -194,12 +198,24 @@ export const TwPageStackChromeLayer: React.FC<TwPageStackChromeLayerProps> = ({
           widgets,
           pageCount,
           scrollHeight,
+          visiblePageIndexRange,
         }),
       );
     } else {
-      setRects(resolvePageOverlayRects([scrollRoot, pageCount]));
+      const widgets = measureWidgetsViaOffsetChain(scrollRoot, {
+        pageCount,
+        visiblePageIndexRange,
+      });
+      setRects(
+        resolvePageOverlayRects({
+          widgets,
+          pageCount,
+          scrollHeight: scrollRoot.clientHeight,
+          visiblePageIndexRange,
+        }),
+      );
     }
-  }, [facet, scrollRoot]);
+  }, [facet, scrollRoot, visiblePageIndexRange]);
 
   const refreshRects = React.useCallback(() => {
     if (!scrollRoot) {
@@ -371,14 +387,14 @@ export const TwPageStackChromeLayer: React.FC<TwPageStackChromeLayerProps> = ({
       }
       style={{ position: "absolute", inset: 0, pointerEvents: "none" }}
     >
-      {rects.map((rect, pageIndex) => {
-        const page = facet.getPage(pageIndex);
+      {rects.map((rect) => {
+        const page = facet.getPage(rect.pageIndex);
         if (!page) return null;
         return (
           <TwPageChromeEntry
             key={`page-chrome-${rect.pageId}`}
             rect={rect}
-            pageIndex={pageIndex}
+            pageIndex={rect.pageIndex}
             page={page}
             facet={facet}
             activeStory={activeStory}

package/src/ui-tailwind/review/tw-comment-sidebar.tsx

@@ -159,7 +159,7 @@ function CommentThreadCard(props: {
   const showExcerpt = Boolean(thread.excerpt) && !isDraftThread && thread.excerpt !== "Empty thread";
 
   const scrollRef = useCallback(
-    (node: HTMLDivElement | null) => {
+    (node: HTMLButtonElement | null) => {
       if (node && isActive && typeof node.scrollIntoView === "function") {
         node.scrollIntoView({ behavior: "smooth", block: "nearest" });
       }
@@ -168,14 +168,13 @@ function CommentThreadCard(props: {
   );
 
   return (
-    <div
+    <button
+      type="button"
       ref={scrollRef}
       data-comment-thread-id={thread.commentId}
       data-comment-thread-status={thread.status}
-      role="button"
-      tabIndex={0}
       className={[
-        "cursor-pointer rounded-lg bg-surface/90 px-3 py-2.5 transition-colors ring-1 ring-border/40",
+        "w-full text-left cursor-pointer rounded-lg bg-surface/90 px-3 py-2.5 transition-colors ring-1 ring-border",
         focusRingClass,
         isActive
           ? "bg-accent-soft/40 ring-accent/25 shadow-[var(--shadow-soft)]"
@@ -185,12 +184,6 @@ function CommentThreadCard(props: {
           : "",
       ].join(" ")}
       onClick={() => props.onOpenComment?.(thread)}
-      onKeyDown={(event) => {
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-          props.onOpenComment?.(thread);
-        }
-      }}
     >
       {/* Header row: avatar + author + date + status */}
       <div className="mb-1.5 flex items-center gap-1.5">
@@ -260,7 +253,7 @@ function CommentThreadCard(props: {
       {thread.entries.slice(1).map((entry) => {
         const replyPresentation = replyPresentationByEntryId.get(entry.entryId);
         return (
-          <div key={entry.entryId} className="mt-2 ml-4 border-l border-border/50 pl-2.5">
+          <div key={entry.entryId} className="mt-2 ml-4 border-l border-border pl-2.5">
             <div className="mb-0.5 flex items-center gap-1">
               <span className="text-[9px] font-medium text-secondary">{entry.authorId}</span>
               <span className="text-[9px] text-tertiary">{formatCommentDate(entry.createdAt)}</span>
@@ -321,7 +314,7 @@ function CommentThreadCard(props: {
           <span className="text-[9px] text-comment">Detached</span>
         )}
       </div>
-    </div>
+    </button>
   );
 }
 
@@ -338,7 +331,8 @@ function InlineEditableBody(props: {
   useEffect(() => {
     if (isEditing && textareaRef.current) {
       textareaRef.current.focus();
-      textareaRef.current.setSelectionRange(draft.length, draft.length);
+      const len = textareaRef.current.value.length;
+      textareaRef.current.setSelectionRange(len, len);
     }
   }, [isEditing]);
 
@@ -367,7 +361,7 @@ function InlineEditableBody(props: {
       ) : null}
       <textarea
         ref={textareaRef}
-        className="w-full resize-none rounded-md bg-surface px-2 py-1.5 text-[10px] leading-4 text-primary placeholder:text-tertiary focus:outline-none focus:ring-1 focus:ring-accent ring-1 ring-border/50"
+        className="w-full resize-none rounded-md bg-surface px-2 py-1.5 text-[10px] leading-4 text-primary placeholder:text-tertiary focus:outline-none focus:ring-1 focus:ring-accent ring-1 ring-border"
         rows={2}
         value={draft}
         placeholder="Type your comment..."
@@ -428,7 +422,7 @@ function ReplyInput(props: { commentId: string; onAddReply: (commentId: string,
     <div className="w-full mt-1.5" onClick={(e) => e.stopPropagation()}>
       <textarea
         ref={inputRef}
-        className="w-full resize-none rounded bg-surface px-2 py-1 text-[11px] text-primary placeholder:text-tertiary focus:outline-none focus:ring-1 focus:ring-accent ring-1 ring-border/50"
+        className="w-full resize-none rounded bg-surface px-2 py-1 text-[11px] text-primary placeholder:text-tertiary focus:outline-none focus:ring-1 focus:ring-accent ring-1 ring-border"
         rows={2}
         placeholder="Reply..."
         value={body}

package/src/ui-tailwind/review/tw-health-panel.tsx

@@ -187,28 +187,3 @@ export function TwHealthPanel(props: TwHealthPanelProps) {
   );
 }
 
-function FeatureClassBadge(props: { featureClass: CompatibilityFeatureEntry["featureClass"] }) {
-  const styles: Record<string, string> = {
-    "supported-roundtrip":
-      "text-[var(--color-semantic-success)] bg-[var(--color-semantic-success-soft)]",
-    "preserve-only":
-      "text-[var(--color-semantic-warning)] bg-[var(--color-semantic-warning-soft)]",
-    "unsupported-fatal":
-      "text-[var(--color-semantic-error)] bg-[var(--color-semantic-error-soft)]",
-  };
-  const labels: Record<string, string> = {
-    "supported-roundtrip": "supported",
-    "preserve-only": "preserve-only",
-    "unsupported-fatal": "blocked",
-  };
-  return (
-    <span
-      className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${styles[props.featureClass] ?? ""}`}
-    >
-      {labels[props.featureClass]}
-    </span>
-  );
-}
-
-// Keep FeatureClassBadge exported for potential external use
-export { FeatureClassBadge };

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

@@ -23,6 +23,13 @@ export type RailCardTone =
 
 export interface RailCardAvatar {
   initials: string;
+  /**
+   * Author-specific avatar background color. Caller-provided CSS color string
+   * (hex, rgb, hsl, or named). Intentionally bypasses the design token system:
+   * author identity colors must remain stable across light/dark themes and
+   * across workspace re-brands. Callers should provide a color with sufficient
+   * contrast against white `initials` text (WCAG AA 4.5:1).
+   */
   color?: string;
   alt?: string;
 }
@@ -80,28 +87,14 @@ export function TwRailCard(props: TwRailCardProps) {
   } = props;
 
   const handleClick = onClick || onSelect;
-  const tag: "article" | "button" = handleClick ? "button" : "article";
 
   const clamped = progress
     ? Math.max(0, Math.min(1, progress.total && progress.total > 0 ? progress.value / progress.total : progress.value))
     : 0;
 
-  const commonProps: Record<string, unknown> = {
-    className: `wre-rail-card block w-full text-left${isFocused ? " ring-1 ring-[var(--color-accent-primary)]/30" : ""}`,
-    "data-tone": tone,
-    "data-active": isActive ? "true" : "false",
-    "data-focused": isFocused ? "true" : undefined,
-    "data-testid": dataTestId,
-  };
-
-  if (handleClick) {
-    commonProps.onClick = handleClick;
-    commonProps.type = "button";
-  }
+  const sharedClassName = `wre-rail-card block w-full text-left${isFocused ? " ring-1 ring-[var(--color-accent-primary)]/30" : ""}`;
 
-  return React.createElement(
-    tag,
-    commonProps,
+  const cardChildren = (
     <>
       {counter ? (
         <span className="wre-rail-card__counter" aria-label={counter.label} title={counter.label}>
@@ -153,6 +146,34 @@ export function TwRailCard(props: TwRailCardProps) {
           />
         </span>
       ) : null}
-    </>,
+    </>
+  );
+
+  if (handleClick) {
+    return (
+      <button
+        type="button"
+        className={sharedClassName}
+        data-tone={tone}
+        data-active={isActive ? "true" : "false"}
+        data-focused={isFocused ? "true" : undefined}
+        data-testid={dataTestId}
+        onClick={handleClick}
+      >
+        {cardChildren}
+      </button>
+    );
+  }
+
+  return (
+    <article
+      className={sharedClassName}
+      data-tone={tone}
+      data-active={isActive ? "true" : "false"}
+      data-focused={isFocused ? "true" : undefined}
+      data-testid={dataTestId}
+    >
+      {cardChildren}
+    </article>
   );
 }

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

@@ -157,8 +157,8 @@ export function TwReviewRail(props: TwReviewRailProps) {
         <Tabs.List
           className={
             editorial
-              ? "flex shrink-0 items-center gap-2 border-b border-border/60 px-2"
-              : "flex shrink-0 border-b border-border/60 px-3 py-2"
+              ? "flex shrink-0 items-center gap-2 border-b border-border px-2"
+              : "flex shrink-0 border-b border-border px-3 py-2"
           }
           style={
             editorial

package/src/ui-tailwind/review/tw-revision-sidebar.tsx

@@ -120,18 +120,11 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
               const isActive = activeRevisionId === rev.revisionId;
 
               return (
-                <div
+                <button
                   key={rev.revisionId}
-                  role="button"
-                  tabIndex={0}
-                  className={`flex cursor-pointer rounded-md bg-surface/90 transition-colors ring-1 ring-border/40 ${focusRingClass} ${isActive ? "bg-accent-soft/40 ring-accent/25" : "hover:bg-surface"}`}
+                  type="button"
+                  className={`w-full text-left flex cursor-pointer rounded-md bg-surface/90 transition-colors ring-1 ring-border ${focusRingClass} ${isActive ? "bg-accent-soft/40 ring-accent/25" : "hover:bg-surface"}`}
                   onClick={() => props.onOpenRevision?.(rev)}
-                  onKeyDown={(event) => {
-                    if (event.key === "Enter" || event.key === " ") {
-                      event.preventDefault();
-                      props.onOpenRevision?.(rev);
-                    }
-                  }}
                 >
                   <div className={`w-0.5 shrink-0 rounded-l-md ${
                     rev.kind === "insertion" ? "bg-insert"
@@ -189,12 +182,12 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
                       )}
                     </div>
                   </div>
-                </div>
+                </button>
               );
             })}
           </div>
         ) : (
-          <p className="rounded-lg bg-surface px-3 py-4 text-xs text-tertiary ring-1 ring-border/40">
+          <p className="rounded-lg bg-surface px-3 py-4 text-xs text-tertiary ring-1 ring-border">
             {trackedChanges.totalCount > 0
               ? (visibleRevisions.length > 0
                   ? "No revisions match the current filter."

package/src/ui-tailwind/review/tw-workflow-tab.tsx

@@ -54,7 +54,7 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
   if (uniqueSegments.length === 0) {
     return (
       <div
-        className="wre-workflow-tab-empty rounded-md border border-dashed border-border/60 bg-canvas/50 p-4 text-[11px] text-tertiary"
+        className="wre-workflow-tab-empty rounded-md border border-dashed border-border bg-canvas/50 p-4 text-[11px] text-tertiary"
         data-testid="workflow-tab-empty"
       >
         <div className="font-semibold uppercase tracking-[0.1em] text-secondary">
@@ -82,7 +82,7 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
           <button
             key={segment.scopeId}
             type="button"
-            className={`wre-workflow-card flex flex-col gap-1 rounded-md border border-border/50 bg-canvas p-3 text-left transition-shadow hover:shadow-md ${
+            className={`wre-workflow-card flex flex-col gap-1 rounded-md border border-border bg-canvas p-3 text-left transition-shadow hover:shadow-md ${
               isActive ? "ring-1 ring-accent/60" : ""
             }`}
             onClick={() => {

package/src/ui-tailwind/theme/editor-theme.css

@@ -154,6 +154,7 @@
  * instead of near-black.  Accents drop from neon to the documented forest
  * green so they do not glow against the deep slate canvas.
  */
+[data-theme="dark"],
 .dark {
   --color-surface: #182420;
   --color-surface-hover: #20302a;

package/src/ui-tailwind/theme/tokens.css

@@ -91,6 +91,9 @@
   --color-change-comment: #E8F4EC;
   --color-change-selection: #DDF1E4;
 
+  /* Highlight (user-driven content, stable across themes — §3 cell-fill + text-highlight family) */
+  --color-highlight-default: #FFF59D;
+
   /* Chart — categorical */
   --color-chart-categorical-1: #1F6B4F;
   --color-chart-categorical-2: #72D6AE;
@@ -236,6 +239,9 @@
   --color-change-comment: #21342A;
   --color-change-selection: #294235;
 
+  /* Highlight (dimmed to avoid glare; same chroma family as light-mode yellow) */
+  --color-highlight-default: #B8A829;
+
   /* Chart — categorical */
   --color-chart-categorical-1: #53B487;
   --color-chart-categorical-2: #9AE7C7;

package/src/ui-tailwind/theme/tokens.ts

@@ -87,6 +87,15 @@ export const BRAND_TOKENS = {
       comment: "#E8F4EC",
       selection: "#DDF1E4",
     },
+    highlight: {
+      // Text-highlighter yellow. User-driven content color (like cell fills
+      // and author avatars) — intentionally stable across themes so highlights
+      // persist when the document is re-opened under a different theme.
+      // Light mode picks Material Amber-A100 for contrast on white canvas;
+      // dark mode dims the same chroma (~#B8A829) to avoid glare on dark
+      // canvas while keeping the mark recognizably "yellow".
+      default: "#FFF59D",
+    },
     scopeTint: {
       blocked: "#FBE3E6",
       inScope: "#E2F2E8",
@@ -170,6 +179,7 @@ export type BrandTokenPath =
   | `color.status.${keyof BrandTokens["color"]["status"]}`
   | `color.comment.${keyof BrandTokens["color"]["comment"]}`
   | `color.change.${keyof BrandTokens["color"]["change"]}`
+  | `color.highlight.${keyof BrandTokens["color"]["highlight"]}`
   | `color.scopeTint.${keyof BrandTokens["color"]["scopeTint"]}`
   | `color.chart.categorical.${keyof BrandTokens["color"]["chart"]["categorical"]}`
   | `color.chart.sequential.${keyof BrandTokens["color"]["chart"]["sequential"]}`

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

@@ -198,6 +198,8 @@ export interface TwReviewWorkspaceProps {
   selectionContextAnalytics?: RuntimeContextAnalyticsSnapshot | null;
   currentScopeContextAnalytics?: RuntimeContextAnalyticsSnapshot | null;
   commands: EditorCommandBag;
+  /** N6 — release the grabbed image/shape. Wired to `runtime.deselectObject()` by the host. */
+  onDeselectObject?: () => void;
   activeSelectionTool?: ActiveSelectionToolModel | null;
   selectionToolAnchor?: SelectionToolAnchor | null;
   documentNavigation?: DocumentNavigationSnapshot;
@@ -680,6 +682,23 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   // above bumps `renderFrameRevision` on the same kinds; including it
   // in the dependency list re-runs this memo without a separate
   // subscription.
+  // N6 — resolve grabbed-object segment offsets from the surface so the
+  // selection overlay can query the anchor index without a full surface walk.
+  const grabbedSegmentOffsets = useMemo(() => {
+    const objectId = snapshot.grabbedObjectId ?? null;
+    if (!objectId || !snapshot.surface) return null;
+    for (const block of snapshot.surface.blocks) {
+      if (!("segments" in block)) continue;
+      for (const seg of (block as { segments?: unknown[] }).segments ?? []) {
+        const s = seg as { kind?: string; mediaId?: string; from?: number; to?: number };
+        if ((s.kind === "image" || s.kind === "shape") && s.mediaId === objectId && s.from != null) {
+          return { from: s.from, to: s.to ?? s.from + 1 };
+        }
+      }
+    }
+    return null;
+  }, [snapshot.grabbedObjectId, snapshot.surface]);
+
   const statusBarPageFacts = useMemo(() => {
     const facet = props.layoutFacet;
     if (!facet) {
@@ -1662,6 +1681,10 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                         {props.layoutFacet ? (
                           <TwChromeOverlay
                             facet={props.layoutFacet}
+                            grabbedObjectId={snapshot.grabbedObjectId ?? null}
+                            grabbedObjectFromOffset={grabbedSegmentOffsets?.from ?? null}
+                            grabbedObjectToOffset={grabbedSegmentOffsets?.to ?? null}
+                            onDeselectObject={props.onDeselectObject}
                             tableContext={props.tableContext}
                             onSetColumnWidth={props.onSetColumnWidth}
                             onSetRowHeight={props.onSetRowHeight}

package/src/validation/compatibility-engine.ts

@@ -444,6 +444,7 @@ function measureInlineNode(
       flags.hyperlinks = true;
       return node.children.reduce((size, child) => size + measureInlineNode(child, flags), 0);
     case "image":
+    case "drawing_frame":
       flags.images = true;
       flags.runs = true;
       return 1;
@@ -778,6 +779,7 @@ function collectLossyInlineContent(
     case "field":
     case "bookmark_start":
     case "bookmark_end":
+    case "drawing_frame":
     case "shape":
     case "wordart":
     case "vml_shape":

package/src/validation/docx-comment-proof.ts

@@ -70,6 +70,7 @@ export type ClosureValidationCheck =
   | { type: "minCommentThreads"; count: number }
   | { type: "lockedFragmentCountAtLeast"; count: number }
   | { type: "surfaceBlockKind"; kind: string; count?: number }
+  | { type: "segmentLabelPrefix"; value: string; kind?: string }
   | { type: "opaqueBlockLabelPrefix"; value: string }
   | { type: "opaqueInlineLabelPrefix"; value: string }
   | {
@@ -238,6 +239,12 @@ export function evaluateClosureCheck(
           (check.count ?? 1),
         reason: `expected at least ${check.count ?? 1} surface blocks of kind ${check.kind}`,
       };
+    case "segmentLabelPrefix":
+      return {
+        type: check.type,
+        passed: hasSegmentLabelPrefix(context.surface, check.value, check.kind),
+        reason: `expected a ${check.kind ?? "surface"} segment label starting with ${check.value}`,
+      };
     case "opaqueBlockLabelPrefix":
       return {
         type: check.type,
@@ -253,7 +260,7 @@ export function evaluateClosureCheck(
     case "opaqueInlineLabelPrefix":
       return {
         type: check.type,
-        passed: hasOpaqueInlineLabelPrefix(context.surface, check.value),
+        passed: hasSegmentLabelPrefix(context.surface, check.value, "opaque_inline"),
         reason: `expected an opaque inline label starting with ${check.value}`,
       };
     case "trackedChangeMatch": {
@@ -458,9 +465,10 @@ export function extractDocxCommentProof(bytes: Uint8Array): DocxCommentProof {
   };
 }
 
-function hasOpaqueInlineLabelPrefix(
+function hasSegmentLabelPrefix(
   surface: RuntimeRenderSnapshot["surface"],
   prefix: string,
+  segmentKind?: string,
 ): boolean {
   if (!surface) {
     return false;
@@ -474,7 +482,8 @@ function hasOpaqueInlineLabelPrefix(
     if (
       block.segments.some(
         (segment) =>
-          segment.kind === "opaque_inline" &&
+          (segmentKind === undefined || segment.kind === segmentKind) &&
+          "label" in segment &&
           typeof segment.label === "string" &&
           segment.label.startsWith(prefix),
       )