@beyondwork/docx-react-component 1.0.86 → 1.0.87

package/src/ui/headless/revision-decoration-model.ts

@@ -204,18 +204,16 @@ export function buildClassFromRevisionDisplay(
 
   // Insertion underline (simple / all markup, insertion kind).
   if (display.insertionUnderline) {
-    // Matches the underline visual used in the review-store path for
-    // "simple-markup" insertions; keeps the two paths producing the
-    // same class bundle so a mid-flight migration does not produce a
-    // visual diff.
-    parts.push(
-      "underline decoration-insert/60 decoration-1 underline-offset-2 text-primary",
-    );
+    parts.push(display.markupMode === "all"
+      ? "rounded-[2px] bg-insert-soft/35 px-[1px] text-primary underline decoration-insert decoration-2 underline-offset-2"
+      : "rounded-[2px] px-[1px] text-primary underline decoration-insert decoration-2 underline-offset-2");
   }
 
   // Strikethrough (deletion kind, simple or all markup).
   if (display.strikethrough) {
-    parts.push("text-danger line-through decoration-danger/80 decoration-1");
+    parts.push(display.markupMode === "all"
+      ? "rounded-[2px] bg-delete-soft/35 px-[1px] text-danger line-through decoration-danger decoration-2"
+      : "text-danger line-through decoration-danger decoration-2");
   }
 
   // De-emphasize (e.g. inactive revision in all-markup; reviewer
@@ -234,7 +232,7 @@ export function buildClassFromRevisionDisplay(
     (display.kind === "formatting" || display.kind === "property-change")
   ) {
     parts.push(
-      "underline decoration-accent/70 decoration-dotted decoration-1 underline-offset-2",
+      "rounded-[2px] bg-accent-soft/70 px-[1px] underline decoration-accent/80 decoration-dotted decoration-2 underline-offset-2",
     );
   }
 
@@ -277,18 +275,18 @@ export function getRevisionHighlightClass(
       return "";
     case "simple-markup":
       if (state.hasInsertions) {
-        return `underline decoration-insert/60 decoration-1 underline-offset-2 text-primary${activeRing}`;
+        return `rounded-[2px] px-[1px] text-primary underline decoration-insert decoration-2 underline-offset-2${activeRing}`;
       }
       if (state.hasDeletions) {
-        return `text-secondary line-through decoration-danger/70 decoration-1${activeRing}`;
+        return `text-danger line-through decoration-danger decoration-2${activeRing}`;
       }
       return activeRing;
     case "all-markup":
       if (state.hasInsertions) {
-        return `text-primary bg-insert-soft/80 ring-1 ring-insert/20${activeRing}`;
+        return `rounded-[2px] bg-insert-soft/35 px-[1px] text-primary underline decoration-insert decoration-2 underline-offset-2${activeRing}`;
       }
       if (state.hasDeletions) {
-        return `text-danger line-through decoration-danger/80 decoration-1 bg-delete-soft/70${activeRing}`;
+        return `rounded-[2px] bg-delete-soft/35 px-[1px] text-danger line-through decoration-danger decoration-2${activeRing}`;
       }
       return activeRing;
   }

package/src/ui-tailwind/chrome/responsive-chrome.ts

@@ -17,11 +17,11 @@ export function isNarrowChromeViewport(viewportWidth?: number): boolean {
   return typeof viewportWidth === "number" && viewportWidth <= NARROW_CHROME_MAX_WIDTH;
 }
 
-export function getInitialReviewRailOpen(input: {
+export function getInitialReviewRailOpen(_input: {
   viewportWidth?: number;
   reviewRailAvailable: boolean;
 }): boolean {
-  return input.reviewRailAvailable && !isNarrowChromeViewport(input.viewportWidth);
+  return false;
 }
 
 export function resolveResponsiveChromeState(

package/src/ui-tailwind/chrome/tw-alert-banner.tsx

@@ -123,6 +123,7 @@ export function TwAlertBanner(
   // 3. Workflow blocked — host policy refuses a command, per reasons.
   if (workflowBlockedReasons.length > 0) {
     const firstReason = workflowBlockedReasons[0]!;
+    const hint = getWorkflowBlockedHint(firstReason);
     return renderBanner({
       severity: "warning",
       icon: (
@@ -131,6 +132,7 @@ export function TwAlertBanner(
       message: (
         <>
           {firstReason.message}
+          {hint ? <span className="opacity-80"> {hint}</span> : null}
           {workflowBlockedReasons.length > 1
             ? ` (+${workflowBlockedReasons.length - 1} more)`
             : ""}
@@ -161,3 +163,28 @@ export function TwAlertBanner(
 
   return null;
 }
+
+function getWorkflowBlockedHint(
+  reason: WorkflowBlockedCommandReason,
+): string | null {
+  switch (reason.code) {
+    case "suggesting_unsupported":
+      return "Switch to Edit for this command, or insert plain text.";
+    case "workflow_comment_only":
+      return "Add a comment, or use an editing scope.";
+    case "outside_workflow_scope":
+      return "Move into an editable workflow scope.";
+    case "workflow_view_only":
+    case "document_viewing_mode":
+    case "document_read_only":
+      return "Open an editable copy or request edit access.";
+    case "workflow_preserve_only":
+    case "workflow_blocked_import":
+    case "protected_range":
+    case "unsupported_surface":
+      return "Use detail for the safe path.";
+    case "workflow_round_locked":
+      return "Wait for the round to unlock or request approval.";
+  }
+  return null;
+}

package/src/ui-tailwind/editor-surface/fast-text-edit-lane.ts

@@ -1,7 +1,10 @@
 import type { Transaction } from "prosemirror-state";
 import type { EditorView } from "prosemirror-view";
 
-import type { TextCommandAck } from "../../api/public-types.ts";
+import type {
+  TextCommandAck,
+  TextCommandRefreshClass,
+} from "../../api/public-types.ts";
 import type {
   LocalEditSessionState,
   PendingOp,
@@ -78,7 +81,11 @@ export interface FastTextEditLaneOptions {
   /** Optional probe hooks for perf instrumentation. */
   probe?: {
     markPredicted(opId: string): void;
-    markReconciled(opId: string, kind: TextCommandAck["kind"]): void;
+    markReconciled(
+      opId: string,
+      kind: TextCommandAck["kind"],
+      refreshClass: TextCommandRefreshClass,
+    ): void;
   };
 }
 
@@ -96,6 +103,22 @@ function allocOpId(): string {
   return `op-${Date.now().toString(36)}-${nextOpIdCounter}`;
 }
 
+export function getTextCommandRefreshClass(
+  ack: TextCommandAck,
+): TextCommandRefreshClass {
+  if (ack.refreshClass) return ack.refreshClass;
+  switch (ack.kind) {
+    case "equivalent":
+      return "local-text-equivalent";
+    case "adjusted":
+      return "surface-only";
+    case "rejected":
+      return "blocked";
+    case "structural-divergence":
+      return "full-projection";
+  }
+}
+
 export function createFastTextEditLane(
   options: FastTextEditLaneOptions,
 ): FastTextEditLane {
@@ -136,9 +159,11 @@ export function createFastTextEditLane(
 
     if (options.shouldBailBeforePredict?.(intent, fromRuntime, toRuntime)) {
       const ack = options.dispatchRuntimeCommand(toRuntimeCommand(intent, opId));
+      const refreshClass = getTextCommandRefreshClass(ack);
       incrementInvalidationCounter(PREDICTED_LANE_COUNTERS.bailBeforePredict);
-      markLaneDebugReconciled(debugEntry, ack.kind, true);
-      options.probe?.markReconciled(opId, ack.kind);
+      incrementRefreshClassCounter(refreshClass);
+      markLaneDebugReconciled(debugEntry, ack.kind, refreshClass, true);
+      options.probe?.markReconciled(opId, ack.kind, refreshClass);
       switch (ack.kind) {
         case "equivalent":
           options.session.advanceToRevision({
@@ -184,8 +209,10 @@ export function createFastTextEditLane(
       op.predictedSelectionHead = view.state.selection.head;
 
       const ack = options.dispatchRuntimeCommand(toRuntimeCommand(intent, opId));
-      markLaneDebugReconciled(debugEntry, ack.kind, false);
-      options.probe?.markReconciled(opId, ack.kind);
+      const refreshClass = getTextCommandRefreshClass(ack);
+      markLaneDebugReconciled(debugEntry, ack.kind, refreshClass, false);
+      incrementRefreshClassCounter(refreshClass);
+      options.probe?.markReconciled(opId, ack.kind, refreshClass);
 
       switch (ack.kind) {
         case "equivalent":
@@ -284,6 +311,8 @@ interface LaneDebugEntry {
   toRuntime: number;
   /** Dispatch → reconcile observation. Filled by `markLaneDebugReconciled`. */
   ackKind?: TextCommandAck["kind"];
+  /** Narrow refresh tier derived from the runtime ack. */
+  refreshClass?: TextCommandRefreshClass;
   /** Wall-clock ms between `pushLaneDebug` and `markLaneDebugReconciled`. */
   reconcileMs?: number;
   /** Whether the lane short-circuited to dispatch-only (no predicted TX). */
@@ -336,10 +365,12 @@ function pushLaneDebug(
 function markLaneDebugReconciled(
   entry: LaneDebugEntry | null,
   ackKind: TextCommandAck["kind"],
+  refreshClass: TextCommandRefreshClass,
   bailed: boolean,
 ): void {
   if (!entry) return;
   entry.ackKind = ackKind;
+  entry.refreshClass = refreshClass;
   entry.bailed = bailed;
   const now =
     typeof performance !== "undefined" && typeof performance.now === "function"
@@ -348,6 +379,26 @@ function markLaneDebugReconciled(
   entry.reconcileMs = now - entry.startedAtMs;
 }
 
+function incrementRefreshClassCounter(refreshClass: TextCommandRefreshClass): void {
+  switch (refreshClass) {
+    case "selection-only":
+      incrementInvalidationCounter(PREDICTED_LANE_COUNTERS.refreshSelectionOnly);
+      return;
+    case "local-text-equivalent":
+      incrementInvalidationCounter(PREDICTED_LANE_COUNTERS.refreshLocalTextEquivalent);
+      return;
+    case "surface-only":
+      incrementInvalidationCounter(PREDICTED_LANE_COUNTERS.refreshSurfaceOnly);
+      return;
+    case "full-projection":
+      incrementInvalidationCounter(PREDICTED_LANE_COUNTERS.refreshFullProjection);
+      return;
+    case "blocked":
+      incrementInvalidationCounter(PREDICTED_LANE_COUNTERS.refreshBlocked);
+      return;
+  }
+}
+
 function buildTxCompat(
   view: EditorView,
   _intent: PredictedIntent,

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

@@ -13,3 +13,20 @@ export function sliceBlocksForPage(
     (b) => b.from < page.endOffset && b.to > page.startOffset,
   );
 }
+
+export function findBlockIndexRangeForPage(
+  blocks: readonly SurfaceBlockSnapshot[],
+  page: Pick<DocumentPageSnapshot, "startOffset" | "endOffset">,
+): { first: number; last: number } | null {
+  if (page.endOffset <= page.startOffset) return null;
+  let first = -1;
+  let last = -1;
+  for (let index = 0; index < blocks.length; index += 1) {
+    const block = blocks[index]!;
+    if (block.from < page.endOffset && block.to > page.startOffset) {
+      if (first === -1) first = index;
+      last = index;
+    }
+  }
+  return first === -1 ? null : { first, last };
+}

package/src/ui-tailwind/editor-surface/perf-probe.ts

@@ -41,6 +41,11 @@ export const PREDICTED_LANE_COUNTERS = {
   rollback: "predictions.rollback",
   structuralDivergence: "predictions.structuralDivergence",
   bailBeforePredict: "predictions.bailBeforePredict",
+  refreshSelectionOnly: "predictions.refresh.selectionOnly",
+  refreshLocalTextEquivalent: "predictions.refresh.localTextEquivalent",
+  refreshSurfaceOnly: "predictions.refresh.surfaceOnly",
+  refreshFullProjection: "predictions.refresh.fullProjection",
+  refreshBlocked: "predictions.refresh.blocked",
 } as const;
 
 export interface PerfProbeSample {

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

@@ -3,13 +3,47 @@ import { Plugin } from "prosemirror-state";
 export interface ContextualInteractionCallbacks {
   onCommentActivated?: (commentId: string) => void;
   onRevisionActivated?: (revisionId: string) => void;
+  onRevisionHovered?: (revisionId: string | null) => void;
+}
+
+function findRevisionId(target: EventTarget | null): string | null {
+  const element = target as HTMLElement | null;
+  return element?.closest?.("[data-revision-id]")?.getAttribute("data-revision-id") ?? null;
 }
 
 export function createContextualInteractionPlugin(
   callbacks: ContextualInteractionCallbacks,
 ): Plugin {
+  let hoveredRevisionId: string | null = null;
+
   return new Plugin({
     props: {
+      handleDOMEvents: {
+        mouseover(_view, event) {
+          const revisionId = findRevisionId(event.target);
+          if (!revisionId || revisionId === hoveredRevisionId) {
+            return false;
+          }
+          hoveredRevisionId = revisionId;
+          callbacks.onRevisionHovered?.(revisionId);
+          return false;
+        },
+        mouseout(_view, event) {
+          const revisionId = findRevisionId(event.target);
+          if (!revisionId) {
+            return false;
+          }
+          const relatedRevisionId = findRevisionId(event.relatedTarget);
+          if (relatedRevisionId === revisionId) {
+            return false;
+          }
+          if (hoveredRevisionId === revisionId) {
+            hoveredRevisionId = null;
+            callbacks.onRevisionHovered?.(null);
+          }
+          return false;
+        },
+      },
       handleClick(_view, _pos, event) {
         const target = event.target as HTMLElement | null;
         const commentId = target?.closest?.("[data-comment-id]")?.getAttribute("data-comment-id");

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

@@ -4,10 +4,12 @@ import type { CommentDecorationModel } from "../../ui/headless/comment-decoratio
 import { getCommentHighlightClass, type MarkupDisplay } from "../../ui/headless/comment-decoration-model";
 import type {
   RevisionDecorationModel,
+  RevisionDecorationEntry,
   RevisionDisplayFlags,
 } from "../../ui/headless/revision-decoration-model";
 import {
   buildClassFromRevisionDisplay,
+  getAuthorColor,
   getRevisionHighlightClass,
 } from "../../ui/headless/revision-decoration-model";
 import type {
@@ -46,6 +48,106 @@ type RailDecorationSpec = {
   attrs: Record<string, string>;
 };
 
+function sanitizeRevisionAuthorColor(raw: unknown): string | null {
+  if (typeof raw !== "string") return null;
+  const value = raw.trim();
+  if (/^var\(--color-chart-categorical-[1-8]\)$/.test(value)) return value;
+  return sanitizeHostCssColor(value);
+}
+
+function resolveRevisionAuthorColor(
+  rev: RevisionDecorationEntry,
+  display?: RevisionDisplayFlags,
+): string | undefined {
+  return sanitizeRevisionAuthorColor(display?.authorColor) ?? getAuthorColor(rev.authorId);
+}
+
+function buildRevisionAuthorStyle(
+  kind: RevisionDecorationEntry["kind"],
+  authorColor: string | undefined,
+): string | undefined {
+  if (!authorColor) return undefined;
+
+  const backgroundStrength =
+    kind === "deletion" ? "8%" : kind === "insertion" ? "10%" : "9%";
+  return [
+    `--wre-revision-author: ${authorColor}`,
+    "color: var(--wre-revision-author)",
+    `background-color: color-mix(in srgb, var(--wre-revision-author) ${backgroundStrength}, transparent)`,
+    `text-decoration-color: var(--wre-revision-author)`,
+    "text-decoration-thickness: 2px",
+    "text-underline-offset: 2px",
+    "box-decoration-break: clone",
+    "-webkit-box-decoration-break: clone",
+  ].join("; ");
+}
+
+function labelRevisionKind(kind: RevisionDecorationEntry["kind"]): string {
+  switch (kind) {
+    case "insertion":
+      return "Insertion";
+    case "deletion":
+      return "Deletion";
+    case "formatting":
+      return "Formatting change";
+    case "move":
+      return "Move";
+    case "property-change":
+      return "Property change";
+  }
+}
+
+function buildRevisionInlineAttrs(
+  rev: RevisionDecorationEntry,
+  className: string,
+  display?: RevisionDisplayFlags,
+): Record<string, string> {
+  const attrs: Record<string, string> = {
+    class: className,
+    "data-revision-id": rev.revisionId,
+    "data-revision-kind": rev.kind,
+  };
+  if (rev.authorId) {
+    attrs["data-revision-author-id"] = rev.authorId;
+    attrs.title = `${labelRevisionKind(rev.kind)} by ${rev.authorId}`;
+  }
+  if (rev.authorPaletteIndex !== undefined) {
+    attrs["data-revision-author-index"] = String(rev.authorPaletteIndex);
+  }
+
+  const style = buildRevisionAuthorStyle(
+    rev.kind,
+    resolveRevisionAuthorColor(rev, display),
+  );
+  if (style) {
+    attrs.style = style;
+  }
+  return attrs;
+}
+
+function buildRevisionBoundaryAttrs(
+  rev: RevisionDecorationEntry,
+  display?: RevisionDisplayFlags,
+): Record<string, string> {
+  const attrs: Record<string, string> = {
+    class: "text-insert font-semibold",
+    "data-revision-id": rev.revisionId,
+    "data-revision-kind": rev.kind,
+  };
+  if (rev.authorId) {
+    attrs["data-revision-author-id"] = rev.authorId;
+    attrs.title = `${labelRevisionKind(rev.kind)} by ${rev.authorId}`;
+  }
+  if (rev.authorPaletteIndex !== undefined) {
+    attrs["data-revision-author-index"] = String(rev.authorPaletteIndex);
+  }
+  const authorColor = resolveRevisionAuthorColor(rev, display);
+  if (authorColor) {
+    attrs.style = `color: ${authorColor}`;
+  }
+  return attrs;
+}
+
 /**
  * Validate and normalize a host-supplied CSS color before interpolating it
  * into an inline-style string.  Accepts only the narrow subset a
@@ -466,6 +568,7 @@ export function buildDecorations(
             Decoration.inline(cleanPmFrom, cleanPmTo, {
               class: "hidden",
               "data-revision-id": rev.revisionId,
+              "data-revision-kind": rev.kind,
             }),
           );
           revisionCount += 1;
@@ -480,17 +583,28 @@ export function buildDecorations(
       // Suggestions styling is always shown regardless of showTrackedChanges toggle.
       if (suggestionsEnabled) {
         if (rev.kind === "insertion") {
+          const insertionClass =
+            buildClassFromRevisionDisplay(revDisplayFlags) ||
+            getRevisionHighlightClass(revisionModel, rev.from, rev.to, "all");
           decorations.push(
-            Decoration.inline(pmFrom, pmTo, {
-              class: "text-insert",
-              "data-revision-id": rev.revisionId,
-            }),
+            Decoration.inline(
+              pmFrom,
+              pmTo,
+              buildRevisionInlineAttrs(rev, insertionClass, revDisplayFlags),
+            ),
           );
           decorations.push(
             Decoration.widget(pmFrom, () => {
               const el = document.createElement("span");
               el.textContent = "[";
-              el.className = "text-insert";
+              const attrs = buildRevisionBoundaryAttrs(rev, revDisplayFlags);
+              for (const [name, value] of Object.entries(attrs)) {
+                if (name === "class") {
+                  el.className = value;
+                } else {
+                  el.setAttribute(name, value);
+                }
+              }
               el.setAttribute("contenteditable", "false");
               return el;
             }, { side: -1, key: `${rev.revisionId}-open` }),
@@ -499,30 +613,41 @@ export function buildDecorations(
             Decoration.widget(pmTo, () => {
               const el = document.createElement("span");
               el.textContent = "]";
-              el.className = "text-insert";
+              const attrs = buildRevisionBoundaryAttrs(rev, revDisplayFlags);
+              for (const [name, value] of Object.entries(attrs)) {
+                if (name === "class") {
+                  el.className = value;
+                } else {
+                  el.setAttribute(name, value);
+                }
+              }
               el.setAttribute("contenteditable", "false");
               return el;
             }, { side: 1, key: `${rev.revisionId}-close` }),
           );
           revisionCount += 1;
         } else if (rev.kind === "deletion") {
+          const deletionClass =
+            buildClassFromRevisionDisplay(revDisplayFlags) ||
+            getRevisionHighlightClass(revisionModel, rev.from, rev.to, "all");
           decorations.push(
-            Decoration.inline(pmFrom, pmTo, {
-              class: "text-danger line-through decoration-danger/80 decoration-1",
-              "data-revision-id": rev.revisionId,
-            }),
+            Decoration.inline(
+              pmFrom,
+              pmTo,
+              buildRevisionInlineAttrs(rev, deletionClass, revDisplayFlags),
+            ),
           );
           revisionCount += 1;
         } else if (rev.kind === "property-change" || rev.kind === "formatting") {
           const propertyChangeClass =
             buildClassFromRevisionDisplay(revDisplayFlags) ||
-            "underline decoration-accent/70 decoration-dotted decoration-1 underline-offset-2";
+            "rounded-[2px] bg-accent-soft/70 px-[1px] underline decoration-accent/80 decoration-dotted decoration-2 underline-offset-2";
           decorations.push(
-            Decoration.inline(pmFrom, pmTo, {
-              class: propertyChangeClass,
-              "data-revision-id": rev.revisionId,
-              "data-revision-kind": rev.kind,
-            }),
+            Decoration.inline(
+              pmFrom,
+              pmTo,
+              buildRevisionInlineAttrs(rev, propertyChangeClass, revDisplayFlags),
+            ),
           );
           revisionCount += 1;
         }
@@ -547,10 +672,11 @@ export function buildDecorations(
       if (!cls) continue;
 
       decorations.push(
-        Decoration.inline(pmFrom, pmTo, {
-          class: cls,
-          "data-revision-id": rev.revisionId,
-        }),
+        Decoration.inline(
+          pmFrom,
+          pmTo,
+          buildRevisionInlineAttrs(rev, cls, displayFlags),
+        ),
       );
       revisionCount += 1;
     }

package/src/ui-tailwind/editor-surface/pm-position-map.ts

@@ -87,13 +87,19 @@ function walkBlocks(
         break;
       }
       case "opaque_block": {
+        const placeholderSize =
+          block.state === "placeholder-culled" &&
+          typeof block.placeholderSize === "number" &&
+          Number.isFinite(block.placeholderSize)
+            ? Math.max(1, block.placeholderSize)
+            : 1;
         entries.push({
           runtimeStart: block.from,
           pmStart: nextPmCursor,
           runtimeEnd: block.to,
-          pmEnd: nextPmCursor + 1,
+          pmEnd: nextPmCursor + placeholderSize,
         });
-        nextPmCursor += 1;
+        nextPmCursor += placeholderSize;
         break;
       }
       case "sdt_block": {