@beyondwork/docx-react-component 1.0.41 → 1.0.42

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

@@ -77,6 +77,7 @@ const POSTURE_STYLES: Record<ScopeRailPosture, PostureStyle> = {
 const DEFAULT_RAIL_LANE_PX = 44;
 const STRIPE_WIDTH_PX = 4;
 const LABEL_WIDTH_PX = 40;
+const STACK_OFFSET_PX = 6;
 
 export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
   facet,
@@ -96,6 +97,27 @@ export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
     return null;
   }
 
+  // P2: which scopes currently have a `source: "ai"` candidate
+  // overlapping — drives the agent-pending shimmer class on their
+  // tints.  Reads from the facet's card-model projection so the
+  // shimmer logic lives in the runtime, not the overlay.
+  const cardModels =
+    typeof facet.getAllScopeCardModels === "function"
+      ? facet.getAllScopeCardModels()
+      : [];
+  const agentPendingByScope = new Map<string, boolean>();
+  for (const model of cardModels) {
+    if (model.agentPending) {
+      agentPendingByScope.set(model.scopeId, true);
+    }
+  }
+
+  // P3c: stack offsets for overlapping scopes.  Two scopes whose
+  // offset ranges intersect on the same page render as stacked
+  // stripes in the gutter; the inner stripe shifts STACK_OFFSET_PX
+  // further right per overlap count so all are clickable.
+  const stackIndexByScope = computeStackIndices(segments);
+
   const projectorSpace: OverlayCoordinateSpace = space ?? { originLeftPx: 0, originTopPx: 0 };
 
   return (
@@ -121,14 +143,20 @@ export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
         const stripeTopPx = firstLine.topPx;
         const stripeHeightPx =
           lastLine.topPx + lastLine.heightPx - firstLine.topPx;
+        const stackIndex = stackIndexByScope.get(segment.scopeId) ?? 0;
+        const stackOffset = stackIndex * STACK_OFFSET_PX;
         const stripeRect: RenderFrameRect = {
-          leftPx: firstLine.leftPx - railLaneWidthPx + (railLaneWidthPx - STRIPE_WIDTH_PX) / 2,
+          leftPx:
+            firstLine.leftPx
+              - railLaneWidthPx
+              + (railLaneWidthPx - STRIPE_WIDTH_PX) / 2
+              + stackOffset,
           topPx: stripeTopPx,
           widthPx: STRIPE_WIDTH_PX,
           heightPx: Math.max(stripeHeightPx, 14),
         };
         const labelRect: RenderFrameRect = {
-          leftPx: firstLine.leftPx - railLaneWidthPx,
+          leftPx: firstLine.leftPx - railLaneWidthPx + stackOffset,
           topPx: stripeTopPx,
           widthPx: LABEL_WIDTH_PX,
           heightPx: 20,
@@ -148,18 +176,28 @@ export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
         return (
           <React.Fragment key={`${segment.scopeId}:${segment.pageIndex}:${segment.fromOffset}`}>
             {/* Per-line tint behind the scoped text runs. */}
-            {lineRects.map((lineRect, index) => (
-              <div
-                key={`tint:${index}`}
-                className={`wre-scope-rail-tint wre-scope-rail-tint-${style.tintToken} ${
-                  isActive ? "wre-scope-rail-tint-active" : ""
-                }`}
-                data-scope-id={segment.scopeId}
-                data-posture={segment.posture}
-                data-line-index={index}
-                style={projectRectToOverlay(lineRect, projectorSpace)}
-              />
-            ))}
+            {lineRects.map((lineRect, index) => {
+              const agentPending = agentPendingByScope.get(segment.scopeId) === true;
+              const tintClassList = [
+                "wre-scope-rail-tint",
+                `wre-scope-rail-tint-${style.tintToken}`,
+              ];
+              if (isActive) tintClassList.push("wre-scope-rail-tint-active");
+              if (agentPending) {
+                tintClassList.push("wre-scope-rail-tint-agent-pending");
+              }
+              return (
+                <div
+                  key={`tint:${index}`}
+                  className={tintClassList.join(" ")}
+                  data-scope-id={segment.scopeId}
+                  data-posture={segment.posture}
+                  data-line-index={index}
+                  data-agent-pending={agentPending ? "true" : undefined}
+                  style={projectRectToOverlay(lineRect, projectorSpace)}
+                />
+              );
+            })}
             {/* Rail stripe in the gutter. */}
             <button
               type="button"
@@ -168,6 +206,7 @@ export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
               }`}
               data-scope-id={segment.scopeId}
               data-posture={segment.posture}
+              data-stack-index={stackIndex}
               data-testid="scope-rail-stripe"
               aria-label={`${style.labelText}${segment.label ? `: ${segment.label}` : ""}`}
               aria-expanded={isActive ? "true" : "false"}
@@ -246,4 +285,44 @@ function pushRectsFromPage(
   }
 }
 
+/**
+ * P3c: Compute a stack index per scope so overlapping scopes render
+ * as offset stripes in the gutter instead of stacking on top of each
+ * other.  For each scope's first segment, count earlier-document-
+ * order scopes whose offset range intersects on the same page — that
+ * count is the stack index (0 = outer / earliest, 1 = next, etc).
+ *
+ * Exported for unit testing.
+ */
+export function computeStackIndices(
+  segments: readonly ScopeRailSegment[],
+): Map<string, number> {
+  const firstSegmentByScope = new Map<string, ScopeRailSegment>();
+  const scopeOrder: string[] = [];
+  for (const segment of segments) {
+    if (!firstSegmentByScope.has(segment.scopeId)) {
+      firstSegmentByScope.set(segment.scopeId, segment);
+      scopeOrder.push(segment.scopeId);
+    }
+  }
+
+  const result = new Map<string, number>();
+  for (let i = 0; i < scopeOrder.length; i += 1) {
+    const scopeId = scopeOrder[i];
+    const seg = firstSegmentByScope.get(scopeId);
+    if (!seg) continue;
+    let overlapCount = 0;
+    for (let j = 0; j < i; j += 1) {
+      const other = firstSegmentByScope.get(scopeOrder[j]);
+      if (!other) continue;
+      if (other.pageIndex !== seg.pageIndex) continue;
+      if (other.toOffset > seg.fromOffset && other.fromOffset < seg.toOffset) {
+        overlapCount += 1;
+      }
+    }
+    result.set(scopeId, overlapCount);
+  }
+  return result;
+}
+
 export default TwScopeRailLayer;

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

@@ -23,6 +23,39 @@ type RailDecorationSpec = {
   attrs: Record<string, string>;
 };
 
+/**
+ * Validate and normalize a host-supplied CSS color before interpolating it
+ * into an inline-style string.  Accepts only the narrow subset a
+ * host-issued metadata color would legitimately use:
+ *   - `#rgb`, `#rrggbb`, `#rrggbbaa` hex literals
+ *   - `rgb(...)` / `rgba(...)` with numeric/percent/alpha args, no nested
+ *     comments or closing-paren escape tricks
+ *   - named colors drawn from a short whitelist
+ * Any semicolon, brace, or parenthesis outside the matched shape is
+ * rejected.  Returns `null` when the input is unsafe; callers must drop
+ * the style attribute entirely in that case.
+ */
+export function sanitizeHostCssColor(raw: unknown): string | null {
+  if (typeof raw !== "string") return null;
+  const value = raw.trim();
+  if (value.length === 0 || value.length > 64) return null;
+  // Hex: #rgb / #rrggbb / #rrggbbaa
+  if (/^#[0-9a-fA-F]{3}$|^#[0-9a-fA-F]{6}$|^#[0-9a-fA-F]{8}$/.test(value)) {
+    return value;
+  }
+  // rgb()/rgba() with digits, dots, percent, commas and a single space.
+  if (/^rgba?\(\s*\d+(\.\d+)?%?(\s*,\s*\d+(\.\d+)?%?){2,3}\s*\)$/.test(value)) {
+    return value;
+  }
+  // Named colors — short whitelist that covers every host-chip use.
+  const named = new Set([
+    "black", "white", "red", "green", "blue", "yellow", "orange",
+    "purple", "pink", "brown", "gray", "grey", "transparent",
+  ]);
+  if (named.has(value.toLowerCase())) return value.toLowerCase();
+  return null;
+}
+
 function isSelectionZoneScope(scope: WorkflowScope): boolean {
   return (
     scope.scopeId.startsWith("scope-lab-") ||
@@ -511,10 +544,11 @@ export function buildDecorations(
       const pmRange = buildAnchorPmRange(metadata.anchor, positionMap);
       if (!pmRange || !pmRange.allowInline || pmRange.from >= pmRange.to) continue;
 
+      const safeColor = sanitizeHostCssColor(metadata.color);
       decorations.push(
         Decoration.inline(pmRange.from, pmRange.to, {
           class: getWorkflowMetadataInlineClass(),
-          ...(metadata.color ? { style: `--wre-workflow-metadata-color: ${metadata.color};` } : {}),
+          ...(safeColor ? { style: `--wre-workflow-metadata-color: ${safeColor};` } : {}),
           "data-workflow-entry-id": metadata.entryId,
           "data-workflow-metadata-id": metadata.metadataId,
         }),

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

@@ -178,7 +178,60 @@ interface ChromeWidgetInput {
   nextHeaderPreview: string;
 }
 
+// P14.c — cache the widget DOM by input identity.  PM rebuilds the
+// page-break decorations on every commit (37 widgets per 38-page doc);
+// each widget's DOM is ~10 elements.  When the page IDs, labels, and
+// preview text haven't changed (the common case during typing inside
+// one page), returning the cached DOM lets PM's decoration
+// reconciliation skip the remount entirely.  Bounded LRU at 256 entries
+// so a long session with significant content churn doesn't grow without
+// bound.
+const widgetDomCache = new Map<string, HTMLElement>();
+const WIDGET_DOM_CACHE_LIMIT = 256;
+
+function widgetCacheKey(input: ChromeWidgetInput): string {
+  return [
+    input.posture,
+    input.prevPageId,
+    input.nextPageId,
+    input.prevPageIndex,
+    input.nextPageIndex,
+    input.headerBandPx,
+    input.footerBandPx,
+    input.interGapPx,
+    input.prevPageLabel,
+    input.nextPageLabel,
+    input.hasPrevFooterStory ? "1" : "0",
+    input.hasNextHeaderStory ? "1" : "0",
+    input.prevFooterPreview,
+    input.nextHeaderPreview,
+  ].join("\x1f");
+}
+
 function buildChromeWidgetDom(input: ChromeWidgetInput): HTMLElement {
+  const key = widgetCacheKey(input);
+  const cached = widgetDomCache.get(key);
+  if (cached) {
+    // Touch LRU recency by re-inserting.
+    widgetDomCache.delete(key);
+    widgetDomCache.set(key, cached);
+    return cached;
+  }
+  const built = buildChromeWidgetDomUncached(input);
+  widgetDomCache.set(key, built);
+  if (widgetDomCache.size > WIDGET_DOM_CACHE_LIMIT) {
+    const oldest = widgetDomCache.keys().next().value;
+    if (oldest !== undefined) widgetDomCache.delete(oldest);
+  }
+  return built;
+}
+
+/** Test-only export — clears the cache between assertions. */
+export function __resetPageBreakWidgetCache(): void {
+  widgetDomCache.clear();
+}
+
+function buildChromeWidgetDomUncached(input: ChromeWidgetInput): HTMLElement {
   const root = document.createElement("div");
   root.className = "wre-page-chrome-widget";
   root.setAttribute("data-kind", "page-chrome-widget");
@@ -187,6 +240,12 @@ function buildChromeWidgetDom(input: ChromeWidgetInput): HTMLElement {
   root.setAttribute("data-next-page-id", input.nextPageId);
   root.setAttribute("data-prev-page-index", String(input.prevPageIndex));
   root.setAttribute("data-next-page-index", String(input.nextPageIndex));
+  // P3.a: expose page-frame boundary markers so the page stack and tests
+  // can enumerate pages without re-walking the render graph.  Each widget
+  // ends page N (`prev`) and starts page N+1 (`next`); the outer workspace
+  // frame still accounts for the boundaries at both ends of the document.
+  root.setAttribute("data-page-frame-end", input.prevPageId);
+  root.setAttribute("data-page-frame-start", input.nextPageId);
   root.contentEditable = "false";
   root.setAttribute("aria-hidden", "false");
   root.style.display = "block";
@@ -245,16 +304,40 @@ function buildChromeWidgetDom(input: ChromeWidgetInput): HTMLElement {
   });
   root.appendChild(footer);
 
+  // P3.a: the inter-page gap is now a visible canvas strip that reads as
+  // "the space between two papers", not a subtle gradient inside one white
+  // page.  The strip paints in the workspace canvas color (the same color
+  // the page frames float on in page mode), with subtle drop/rise shadows
+  // on either edge so the preceding footer reads as "bottom of page N's
+  // paper" and the following header reads as "top of page N+1's paper".
+  //
+  // The visual goal: bringing the user closer to a Word-native perception
+  // of distinct pages without requiring the PM editable tree to be split
+  // into per-page subtrees (that lands in P3.b).
   const separator = document.createElement("div");
   separator.className = "wre-page-chrome-separator";
+  separator.setAttribute("data-kind", "page-chrome-separator");
   separator.style.position = "absolute";
   separator.style.left = "0";
   separator.style.right = "0";
   separator.style.top = `${input.footerBandPx}px`;
   separator.style.height = `${input.interGapPx}px`;
-  // Background: two subtle page-edge shadows mimicking real paper gap.
-  separator.style.background =
-    "linear-gradient(to bottom, rgba(0,0,0,0.045), rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.035))";
+  // Canvas color (same as the scroll root's bg-surface) so the strip reads
+  // as "gap between two papers".  Page mode and canvas mode both use the
+  // same token so the UX remains consistent at any chrome preset.
+  separator.style.backgroundColor = "var(--color-surface, #f1f5f9)";
+  // Inner shadows on top/bottom: the previous footer's bottom edge gains
+  // a subtle paper-edge shadow, and the next header's top edge likewise.
+  // Inset shadows let us avoid touching the footer / header DOM while
+  // keeping the shadows flush with the band borders.
+  separator.style.boxShadow = [
+    // Top edge — simulates the bottom shadow of page N's paper.
+    "inset 0 1px 0 rgba(15, 23, 42, 0.06)",
+    "inset 0 2px 3px -2px rgba(15, 23, 42, 0.12)",
+    // Bottom edge — simulates the top shadow of page N+1's paper.
+    "inset 0 -1px 0 rgba(15, 23, 42, 0.06)",
+    "inset 0 -2px 3px -2px rgba(15, 23, 42, 0.12)",
+  ].join(", ");
   root.appendChild(separator);
 
   const header = buildBand({

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

@@ -178,24 +178,24 @@ export const editorSchema = new Schema({
         const spacingBefore = node.attrs.spacingBefore as number | null;
         const contextualSpacingBefore = node.attrs.contextualSpacingBefore as boolean | null;
         if (contextualSpacingBefore) styles.push("margin-top: 0");
-        else if (spacingBefore) styles.push(`margin-top: ${spacingBefore / 20}px`);
+        else if (spacingBefore) styles.push(`margin-top: ${spacingBefore / 20}pt`);
         const contextualSpacingAfter = node.attrs.contextualSpacingAfter as boolean | null;
         const spacingAfter = node.attrs.spacingAfter as number | null;
         if (contextualSpacingAfter) styles.push("margin-bottom: 0");
-        else if (spacingAfter) styles.push(`margin-bottom: ${spacingAfter / 20}px`);
+        else if (spacingAfter) styles.push(`margin-bottom: ${spacingAfter / 20}pt`);
         const lineSpacing = node.attrs.lineSpacing as number | null;
         const lineRule = node.attrs.lineRule as string | null;
         if (lineSpacing && lineRule === "auto") styles.push(`line-height: ${lineSpacing / 240}`);
-        else if (lineSpacing && lineRule === "exact") styles.push(`line-height: ${lineSpacing / 20}px`);
-        else if (lineSpacing && lineRule === "atLeast") styles.push(`min-height: ${lineSpacing / 20}px`);
+        else if (lineSpacing && lineRule === "exact") styles.push(`line-height: ${lineSpacing / 20}pt`);
+        else if (lineSpacing && lineRule === "atLeast") styles.push(`min-height: ${lineSpacing / 20}pt`);
         const indentLeft = node.attrs.indentLeft as number | null;
-        if (indentLeft) styles.push(`padding-left: ${indentLeft / 20}px`);
+        if (indentLeft) styles.push(`padding-left: ${indentLeft / 20}pt`);
         const indentRight = node.attrs.indentRight as number | null;
-        if (indentRight) styles.push(`padding-right: ${indentRight / 20}px`);
+        if (indentRight) styles.push(`padding-right: ${indentRight / 20}pt`);
         const indentFirstLine = node.attrs.indentFirstLine as number | null;
         const indentHanging = node.attrs.indentHanging as number | null;
-        if (indentHanging) styles.push(`text-indent: -${indentHanging / 20}px`);
-        else if (indentFirstLine) styles.push(`text-indent: ${indentFirstLine / 20}px`);
+        if (indentHanging) styles.push(`text-indent: -${indentHanging / 20}pt`);
+        else if (indentFirstLine) styles.push(`text-indent: ${indentFirstLine / 20}pt`);
         const shadingColor = safeHexColor(node.attrs.shadingFill as string | null);
         if (shadingColor) styles.push(`background-color: ${shadingColor}`);
         for (const [side, attrName] of [["top", "borderTop"], ["bottom", "borderBottom"], ["left", "borderLeft"], ["right", "borderRight"]] as const) {
@@ -309,11 +309,13 @@ export const editorSchema = new Schema({
           }
 
           if (hasResolvedMarkerWidth) {
-            const markerWidthPx = Math.max(1, Math.round(numberingMarkerWidth / 20));
+            // P13.a: emit marker geometry in pt (twips/20 == pt) so it
+            // self-scales under CSS `zoom` and matches Word's intent.
+            const markerWidthPt = Math.max(1, numberingMarkerWidth / 20);
             prefixStyles.push(
-              `width: ${markerWidthPx}px`,
-              `min-width: ${markerWidthPx}px`,
-              `flex-basis: ${markerWidthPx}px`,
+              `width: ${markerWidthPt}pt`,
+              `min-width: ${markerWidthPt}pt`,
+              `flex-basis: ${markerWidthPt}pt`,
               `margin-right: 0`,
               `overflow: visible`,
             );
@@ -889,7 +891,7 @@ export const editorSchema = new Schema({
       attrs: { value: { default: 0 } },
       toDOM(mark) {
         const twips = mark.attrs.value as number;
-        return ["span", { style: `letter-spacing: ${twips / 20}px` }, 0];
+        return ["span", { style: `letter-spacing: ${twips / 20}pt` }, 0];
       },
     },
     font_kerning: {

package/src/ui-tailwind/editor-surface/remote-cursor-plugin.ts

@@ -12,6 +12,23 @@ import {
   type RemoteCursorState,
 } from "../../runtime/collab/remote-cursor-awareness";
 
+/**
+ * Remote `cursor.color` comes straight off Yjs Awareness — another peer
+ * can set it to anything.  Validate to a narrow CSS-color allowlist
+ * before interpolating into an inline style, otherwise a malicious peer
+ * could inject arbitrary CSS declarations via `; background: url(...)`.
+ * Returns a fallback neutral color when the input is rejected.
+ */
+const SAFE_REMOTE_CURSOR_FALLBACK = "#6b7280";
+function safeRemoteCursorColor(raw: unknown): string {
+  if (typeof raw !== "string") return SAFE_REMOTE_CURSOR_FALLBACK;
+  const value = raw.trim();
+  if (value.length === 0 || value.length > 32) return SAFE_REMOTE_CURSOR_FALLBACK;
+  if (/^#[0-9a-fA-F]{3}$|^#[0-9a-fA-F]{6}$|^#[0-9a-fA-F]{8}$/.test(value)) return value;
+  if (/^rgba?\(\s*\d+(\.\d+)?%?(\s*,\s*\d+(\.\d+)?%?){2,3}\s*\)$/.test(value)) return value;
+  return SAFE_REMOTE_CURSOR_FALLBACK;
+}
+
 interface RemoteCursorPluginState {
   cursors: RemoteCursorState[];
 }
@@ -68,7 +85,7 @@ export function createRemoteCursorPlugin(
       if (from !== to) {
         decorations.push(
           Decoration.inline(from, to, {
-            style: `background-color: ${cursor.color}33;`,
+            style: `background-color: ${safeRemoteCursorColor(cursor.color)}33;`,
             class: "remote-cursor-selection",
           }),
         );
@@ -149,7 +166,7 @@ function createCursorWidget(cursor: RemoteCursorState): HTMLElement {
     top: -0.2em;
     width: 2px;
     height: 1.2em;
-    background-color: ${cursor.color};
+    background-color: ${safeRemoteCursorColor(cursor.color)};
     border-radius: 1px;
   `;
   container.appendChild(caret);
@@ -163,7 +180,7 @@ function createCursorWidget(cursor: RemoteCursorState): HTMLElement {
     font-family: system-ui, -apple-system, sans-serif;
     font-weight: 500;
     color: white;
-    background-color: ${cursor.color};
+    background-color: ${safeRemoteCursorColor(cursor.color)};
     padding: 1px 4px;
     border-radius: 3px;
     white-space: nowrap;

package/src/ui-tailwind/editor-surface/tw-page-block-view.tsx

@@ -91,17 +91,17 @@ function buildParagraphStyle(
     block.spacing?.lineRule ?? block.resolvedParagraphFormatting?.spacing?.lineRule;
 
   if (spacingBefore != null) {
-    style.marginTop = `${spacingBefore / 20}px`;
+    style.marginTop = `${spacingBefore / 20}pt`;
   }
   if (spacingAfter != null) {
-    style.marginBottom = `${spacingAfter / 20}px`;
+    style.marginBottom = `${spacingAfter / 20}pt`;
   }
   if (lineSpacing && lineRule === "auto") {
     style.lineHeight = String(lineSpacing / 240);
   } else if (lineSpacing && lineRule === "exact") {
-    style.lineHeight = `${lineSpacing / 20}px`;
+    style.lineHeight = `${lineSpacing / 20}pt`;
   } else if (lineSpacing && lineRule === "atLeast") {
-    style.minHeight = `${lineSpacing / 20}px`;
+    style.minHeight = `${lineSpacing / 20}pt`;
   }
 
   // Indentation
@@ -114,10 +114,10 @@ function buildParagraphStyle(
   const indentHanging =
     block.indentation?.hanging ?? block.resolvedParagraphFormatting?.indentation?.hanging;
 
-  if (indentLeft) style.paddingLeft = `${indentLeft / 20}px`;
-  if (indentRight) style.paddingRight = `${indentRight / 20}px`;
-  if (indentHanging) style.textIndent = `-${indentHanging / 20}px`;
-  else if (indentFirstLine) style.textIndent = `${indentFirstLine / 20}px`;
+  if (indentLeft) style.paddingLeft = `${indentLeft / 20}pt`;
+  if (indentRight) style.paddingRight = `${indentRight / 20}pt`;
+  if (indentHanging) style.textIndent = `-${indentHanging / 20}pt`;
+  else if (indentFirstLine) style.textIndent = `${indentFirstLine / 20}pt`;
 
   // Shading
   const shadingFill = block.shading?.fill;
@@ -171,10 +171,11 @@ function buildMarkerStyle(
 
   const hasResolvedMarkerWidth = typeof markerWidth === "number" && markerWidth > 0;
   if (hasResolvedMarkerWidth) {
-    const markerWidthPx = Math.max(1, Math.round(markerWidth! / 20));
-    style.width = `${markerWidthPx}px`;
-    style.minWidth = `${markerWidthPx}px`;
-    style.flexBasis = `${markerWidthPx}px`;
+    // P13.a: emit marker geometry in pt so it self-scales under CSS `zoom`.
+    const markerWidthPt = Math.max(1, markerWidth! / 20);
+    style.width = `${markerWidthPt}pt`;
+    style.minWidth = `${markerWidthPt}pt`;
+    style.flexBasis = `${markerWidthPt}pt`;
     style.marginRight = 0;
     style.overflow = "visible";
   } else {
@@ -450,9 +451,9 @@ function TableBlock({
             key={rowIdx}
             style={
               row.height != null && row.heightRule === "exact"
-                ? { height: `${row.height / 20}px` }
+                ? { height: `${row.height / 20}pt` }
                 : row.height != null && row.heightRule === "atLeast"
-                  ? { minHeight: `${row.height / 20}px` }
+                  ? { minHeight: `${row.height / 20}pt` }
                   : undefined
             }
           >

package/src/ui-tailwind/editor-surface/tw-table-node-view.tsx

@@ -294,6 +294,72 @@ function applyTableAttrs(table: HTMLTableElement, node: PMNode): void {
   } else if (alignment === "right") {
     table.style.marginLeft = "auto";
   }
+  syncColgroup(table, node);
+}
+
+/**
+ * P6.a: real `<colgroup>` driven by the table's canonical `gridColumns`.
+ *
+ * Pre-P6 tables relied on per-row padding cells (`data-row-padding`) to
+ * approximate column widths.  That produced correct-looking tables on
+ * simple CCEP fixtures but broke as soon as a row used `w:gridBefore` /
+ * `w:gridAfter` or a cell spanned multiple logical columns with
+ * non-uniform widths.  HTML's `<colgroup>` is the canonical place to
+ * declare per-column widths; every browser honors it exactly and we
+ * avoid the padding-cell trick entirely for width purposes.
+ *
+ * Each `<col>` uses its twips width converted to `pt` via `twips / 20`
+ * (the same unit the row-padding helper already uses for its
+ * `style.width`).  Keeping `pt` units avoids tying the NodeView to a
+ * pxPerTwip value — the CSS `zoom` applied at the workspace root
+ * rescales `pt` alongside every other length, so the columns follow
+ * zoom automatically.
+ *
+ * When `gridColumns` is empty (malformed input, or a table built
+ * programmatically without a declared grid), the colgroup is removed
+ * so the browser falls back to auto-sizing.
+ */
+function syncColgroup(table: HTMLTableElement, node: PMNode): void {
+  const gridColumns = Array.isArray(node.attrs.gridColumns)
+    ? (node.attrs.gridColumns as number[])
+    : [];
+  const existing = Array.from(table.children).find(
+    (child): child is HTMLTableColElement =>
+      child instanceof (table.ownerDocument?.defaultView?.HTMLTableColElement ??
+        HTMLTableColElement) && child.tagName === "COLGROUP",
+  ) as HTMLElement | undefined;
+
+  if (gridColumns.length === 0) {
+    existing?.remove();
+    return;
+  }
+
+  const owner = table.ownerDocument ?? document;
+  const colgroup = existing ?? owner.createElement("colgroup");
+  colgroup.setAttribute("data-pm-table-colgroup", "true");
+  // Reuse existing <col> children where possible; add/remove tail cols.
+  const desired = gridColumns.length;
+  const actual = colgroup.childElementCount;
+  for (let i = actual; i < desired; i += 1) {
+    colgroup.appendChild(owner.createElement("col"));
+  }
+  while (colgroup.childElementCount > desired) {
+    colgroup.lastElementChild?.remove();
+  }
+  for (let i = 0; i < desired; i += 1) {
+    const col = colgroup.children[i] as HTMLTableColElement;
+    const twips = gridColumns[i] ?? 0;
+    col.setAttribute("data-col-index", String(i));
+    col.setAttribute("data-col-twips", String(twips));
+    col.style.width = twips > 0 ? `${twips / 20}pt` : "";
+  }
+
+  if (!existing) {
+    // Colgroup must be the first child of <table> per HTML spec so the
+    // column widths propagate to every row.  `insertBefore(first)`
+    // handles both empty and populated tables uniformly.
+    table.insertBefore(colgroup, table.firstChild);
+  }
 }
 
 function applyRowAttrs(row: HTMLTableRowElement, node: PMNode): void {

package/src/ui-tailwind/index.ts

@@ -53,6 +53,38 @@ export {
   type TwModeDockProps,
 } from "./chrome/tw-mode-dock";
 
+// Collab chrome (P9) — mount when chromePreset === "collab"; each
+// component is pure presentational and takes snapshots + callbacks.
+export {
+  CollabPresenceStrip,
+  type CollabPresenceStripProps,
+} from "./chrome/collab-presence-strip";
+export {
+  CollabRoleChip,
+  type CollabRoleChipProps,
+} from "./chrome/collab-role-chip";
+export {
+  CollabAudienceChip,
+  type CollabAudienceChipProps,
+} from "./chrome/collab-audience-chip";
+export {
+  CollabTamperBanner,
+  type CollabTamperBannerProps,
+} from "./chrome/collab-tamper-banner";
+export {
+  CollabNegotiationActionBar,
+  type CollabNegotiationActionBarProps,
+} from "./chrome/collab-negotiation-action-bar";
+export {
+  CollabSendToSupplierButton,
+  type CollabSendToSupplierButtonProps,
+} from "./chrome/collab-send-to-supplier-button";
+export {
+  CollabSendToSupplierModal,
+  type CollabSendToSupplierModalProps,
+  type CollabSendToSupplierSubmitArgs,
+} from "./chrome/collab-send-to-supplier-modal";
+
 // Chrome overlay plane (R3a — scope rail layer)
 export {
   TwChromeOverlay,

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

@@ -17,11 +17,36 @@ export interface TwReviewRailFooterProps {
 const focusRingClass =
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-canvas";
 
+/**
+ * Accept only http(s) and mailto help links.  Rejects javascript:, data:,
+ * and any other scheme that could execute code when a reviewer clicks the
+ * help button.  Host-supplied; treated as untrusted.
+ */
+function safeHelpHref(raw: string | undefined): string | undefined {
+  if (typeof raw !== "string") return undefined;
+  const value = raw.trim();
+  if (value.length === 0) return undefined;
+  // Allow relative paths (no scheme) — hosts often use `/docs/help`.
+  if (value.startsWith("/") || value.startsWith("#") || value.startsWith("?")) {
+    return value;
+  }
+  try {
+    const url = new URL(value, "https://placeholder.invalid/");
+    if (url.protocol === "https:" || url.protocol === "http:" || url.protocol === "mailto:") {
+      return value;
+    }
+  } catch {
+    // fall through
+  }
+  return undefined;
+}
+
 export function TwReviewRailFooter(props: TwReviewRailFooterProps) {
   const searchLabel = props.searchLabel ?? "SEARCH";
   const helpLabel = props.helpLabel ?? "HELP";
+  const helpHref = safeHelpHref(props.helpHref);
 
-  if (!props.onSearch && !props.helpHref) {
+  if (!props.onSearch && !helpHref) {
     return null;
   }
 
@@ -38,9 +63,10 @@ export function TwReviewRailFooter(props: TwReviewRailFooterProps) {
         </button>
       ) : null}
 
-      {props.helpHref ? (
+      {helpHref ? (
         <a
-          href={props.helpHref}
+          href={helpHref}
+          rel="noopener noreferrer"
           className={`inline-flex items-center gap-1.5 rounded-sm px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-tertiary transition-colors hover:text-secondary ${focusRingClass}`}
         >
           <HelpCircle aria-hidden="true" className="h-3 w-3" />