@beyondwork/docx-react-component 1.0.56 → 1.0.57

package/src/ui-tailwind/chart/render/scatter.tsx

@@ -44,10 +44,15 @@ function ScatterChartImpl({ model, layout, theme }: ScatterChartProps): React.Re
   const totalPoints = Math.max(0, ...model.series.map(s => s.xValues.length));
   const visiblePoints = useProgressiveCount(totalPoints);
 
-  const toPoint = (x: number, y: number): Point => [
-    plot.x + ((x - xMin) / xSpan) * plot.w,
-    plot.y + plot.h - ((y - yMin) / ySpan) * plot.h,
-  ];
+  const reverseX = model.xAxis.reverse === true;
+  const reverseY = model.yAxis.reverse === true;
+  const toPoint = (x: number, y: number): Point => {
+    const xFrac = (x - xMin) / xSpan;
+    const yFrac = (y - yMin) / ySpan;
+    const px = reverseX ? plot.x + plot.w - xFrac * plot.w : plot.x + xFrac * plot.w;
+    const py = reverseY ? plot.y + yFrac * plot.h : plot.y + plot.h - yFrac * plot.h;
+    return [px, py];
+  };
 
   const style = model.style;
   const showLine = style === "line" || style === "lineMarker" || style === "smooth" || style === "smoothMarker";

package/src/ui-tailwind/chrome/avatar-initials.ts

@@ -0,0 +1,15 @@
+/**
+ * Derives up to two initials from a display name in a Unicode-safe way.
+ * Splits on whitespace, takes the first character of the first two words.
+ * Falls back to the first grapheme cluster for single-word names.
+ */
+export function getInitials(name: string): string {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return "";
+  if (words.length === 1) {
+    return (words[0].at(0) ?? "").toLocaleUpperCase();
+  }
+  const first = words[0].at(0) ?? "";
+  const second = words[1].at(0) ?? "";
+  return (first + second).toLocaleUpperCase();
+}

package/src/ui-tailwind/chrome/tw-comment-preview.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
 
+import { getInitials } from "./avatar-initials";
+
 export interface TwCommentPreviewProps {
   author: {
     name: string;
@@ -19,7 +21,7 @@ const focusRingClass =
 
 export function TwCommentPreview(props: TwCommentPreviewProps): React.JSX.Element {
   const initials =
-    props.author.initials ?? props.author.name.slice(0, 2).toUpperCase();
+    props.author.initials ?? getInitials(props.author.name);
 
   const containerClass = [
     "flex flex-col gap-1.5",

package/src/ui-tailwind/chrome/tw-context-menu.tsx

@@ -90,6 +90,11 @@ export function filterContextMenuEntries(
   if (ctx.tableToolbarVisible) {
     suppressedGroups.add("table");
   }
+  if (ctx.commentCardVisible) {
+    suppressedGroups.add("comment");
+  }
+  // "clipboard" is intentionally never suppressed — Cut/Copy/Paste remain
+  // available as a fallback regardless of which floating chrome is visible.
 
   const filtered = entries.filter((e) => {
     if (e.kind === "separator") return true;
@@ -128,6 +133,13 @@ export interface TwContextMenuProps {
   entries: ContextMenuEntry[];
   context?: Partial<ContextMenuContext>;
   platform?: "mac" | "win";
+  /**
+   * Accessible label for the menu container. WCAG 2.5.3 requires
+   * `role="menu"` to have an accessible name. Defaults to
+   * "Editor context menu"; hosts can override for domain context
+   * (e.g. "Review menu", "Table menu").
+   */
+  "aria-label"?: string;
   "data-testid"?: string;
 }
 
@@ -143,6 +155,7 @@ export function TwContextMenu(props: TwContextMenuProps): React.JSX.Element {
     entries,
     context,
     platform,
+    "aria-label": ariaLabel = "Editor context menu",
     "data-testid": testId = "tw-context-menu",
   } = props;
 
@@ -153,6 +166,7 @@ export function TwContextMenu(props: TwContextMenuProps): React.JSX.Element {
     <div
       data-testid={testId}
       role="menu"
+      aria-label={ariaLabel}
       className={[
         "flex flex-col",
         "rounded-[var(--radius-lg)]",

package/src/ui-tailwind/chrome/tw-selection-tool-host.tsx

@@ -107,6 +107,7 @@ function useDwellDensity(tool: ActiveSelectionToolModel | null): "micro" | "full
 
 export function TwSelectionToolHost(props: TwSelectionToolHostProps) {
   const density = useDwellDensity(props.tool);
+  const { onChromePinChange } = props;
 
   if (!props.tool) {
     return null;
@@ -124,9 +125,9 @@ export function TwSelectionToolHost(props: TwSelectionToolHostProps) {
 
   const handlePinChange = useCallback(
     (surface: ChromePinSurface, next: PinState | null) => {
-      props.onChromePinChange?.(surface, next);
+      onChromePinChange?.(surface, next);
     },
-    [props.onChromePinChange], // eslint-disable-line react-hooks/exhaustive-deps
+    [onChromePinChange],
   );
 
   const overlayTestId = getOverlayTestId(props.tool.kind, Boolean(props.placement));

package/src/ui-tailwind/chrome/tw-selection-toolbar.tsx

@@ -5,6 +5,7 @@ import { Baseline, Bold, Highlighter, Italic, MessageSquare, Underline } from "l
 
 import type { SelectionToolbarModel } from "../../ui/headless/selection-toolbar-model";
 import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+import { BRAND_TOKENS } from "../theme/tokens";
 
 export interface TwSelectionToolbarProps {
   model: SelectionToolbarModel;
@@ -24,13 +25,24 @@ const focusRingClass =
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
 
 /**
- * Fallback colors for the selection-toolbar one-click apply buttons.
- * The model can override via `textColorDefault` / `highlightColorDefault`
- * which R2.5 plumbs through from `formattingState` so the apply button
- * reflects the user's recent color pick.
+ * Fallback highlight color for the selection-toolbar "apply highlight"
+ * button. The model overrides via `highlightColorDefault` which R2.5
+ * plumbs through from `formattingState` so the apply button reflects
+ * the user's recent highlight pick.
+ *
+ * Drawn from the design-token system (`color.highlight.default`): user-
+ * driven content color, stable across themes (so highlights persist
+ * when the document is re-opened under a different theme).
  */
-const DEFAULT_TEXT_COLOR = "#1660a8";
-const DEFAULT_HIGHLIGHT_COLOR = "#ffff00";
+const DEFAULT_HIGHLIGHT_COLOR = BRAND_TOKENS.color.highlight.default;
+
+/**
+ * No static default text color — the "apply text color" button waits
+ * for the user's first color pick (via `model.textColorDefault`). Until
+ * then the button is disabled. This avoids shipping an arbitrary hex
+ * fallback and keeps the toolbar theme-neutral.
+ */
+const DEFAULT_TEXT_COLOR: string | null = null;
 
 export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarProps>(function TwSelectionToolbar(props, ref) {
   const { model } = props;
@@ -84,10 +96,17 @@ export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarP
         <>
           <ToolbarActionButton
             icon={<Baseline className="h-3.5 w-3.5" />}
-            label={`Apply ${model.textColorDefault ?? DEFAULT_TEXT_COLOR}`}
+            label={
+              model.textColorDefault
+                ? `Apply ${model.textColorDefault}`
+                : "Apply text color (pick a color first)"
+            }
             pressed={false}
-            disabled={formattingDisabled}
-            onClick={() => props.onSetTextColor?.(model.textColorDefault ?? DEFAULT_TEXT_COLOR)}
+            disabled={formattingDisabled || !model.textColorDefault}
+            onClick={() => {
+              const color = model.textColorDefault ?? DEFAULT_TEXT_COLOR;
+              if (color) props.onSetTextColor?.(color);
+            }}
           />
           <ToolbarActionButton
             icon={<Highlighter className="h-3.5 w-3.5" />}
@@ -117,7 +136,7 @@ export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarP
         </Tooltip.Trigger>
         <Tooltip.Portal>
           <Tooltip.Content
-            className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50"
+            className="rounded-md bg-primary px-2 py-1 text-xs text-[var(--color-text-inverse)] shadow-md z-50"
             sideOffset={6}
           >
             {tooltipLabel}
@@ -198,7 +217,7 @@ function ToolbarActionButton(props: ToolbarActionButtonProps) {
       </Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Content
-          className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50"
+          className="rounded-md bg-primary px-2 py-1 text-xs text-[var(--color-text-inverse)] shadow-md z-50"
           sideOffset={6}
         >
           {props.label}

package/src/ui-tailwind/chrome/tw-shortcut-hint.tsx

@@ -23,12 +23,25 @@ const MAC_SYMBOL: Record<string, string> = {
 
 function detectPlatform(): "mac" | "win" {
   if (typeof navigator === "undefined") return "win";
+  // Prefer the modern userAgentData.platform API (avoids navigator.platform deprecation warning).
+  const uaData = (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData;
+  if (uaData?.platform) return /mac|iPhone|iPad/i.test(uaData.platform) ? "mac" : "win";
   return /Mac|iPhone|iPad/.test(navigator.platform) ? "mac" : "win";
 }
 
 export function TwShortcutHint(props: TwShortcutHintProps): React.JSX.Element {
   const { keys, className } = props;
-  const platform = props.platform ?? detectPlatform();
+
+  // SSR-safe platform detection: render with the prop value (or "win" default)
+  // on the server, then update after hydration when navigator is available.
+  const [platform, setPlatform] = React.useState<"mac" | "win">(
+    props.platform ?? "win",
+  );
+
+  React.useEffect(() => {
+    if (props.platform) return; // explicit prop wins; no client detection needed
+    setPlatform(detectPlatform());
+  }, [props.platform]);
 
   const mapped = keys.map((k) =>
     platform === "mac"
@@ -56,7 +69,7 @@ export function TwShortcutHint(props: TwShortcutHintProps): React.JSX.Element {
     <span className={containerClass} data-testid="tw-shortcut-hint">
       {mapped.map((label, i) => (
         <kbd
-          key={i}
+          key={`${label}-${i}`}
           className={chipClass}
           data-testid="tw-shortcut-hint__chip"
         >

package/src/ui-tailwind/chrome/tw-suggestion-card.tsx

@@ -89,7 +89,7 @@ export function TwSuggestionCard(props: TwSuggestionCardProps) {
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Content
-              className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50"
+              className="rounded-md bg-primary px-2 py-1 text-xs text-[var(--color-text-inverse)] shadow-md z-50"
               sideOffset={6}
             >
               {tooltipLabel}

package/src/ui-tailwind/chrome/tw-table-context-toolbar.tsx

@@ -5,6 +5,7 @@ import type {
   TableStructureContextSnapshot,
 } from "../../api/public-types";
 import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+import { BRAND_TOKENS } from "../theme/tokens";
 
 export interface TwTableContextToolbarProps {
   disabled: boolean;
@@ -29,13 +30,29 @@ export interface TwTableContextToolbarProps {
   onSetCellVerticalAlign?: (align: "top" | "center" | "bottom") => void;
 }
 
-const CELL_COLORS = [
+/**
+ * Cell fill presets — user-driven content colors, NOT design-system
+ * tokens. Cell fills are document content and must persist across
+ * themes exactly as authored, so the palette is a stable component-
+ * local constant rather than a theme-adaptive token binding.
+ *
+ * Slot 1 is pure white (opaque "overwrite" content), slot 2 is
+ * "transparent" (no fill — clear existing). The remaining four slots
+ * draw from the scope-tint palette so the starter options stay in a
+ * consistent soft-pastel family that reads well on both light and dark
+ * canvases when reopened.
+ *
+ * Hosts may extend this palette via future props; R3.c replaced the
+ * earlier arbitrary Tailwind-palette picks with values drawn from the
+ * token manifest (scope-tint family).
+ */
+const CELL_FILL_PRESETS = [
   "#ffffff",
-  "#f0f0ee",
-  "#dbeafe",
-  "#fef3c7",
-  "#dcfce7",
-  "#fce7f3",
+  "transparent",
+  BRAND_TOKENS.color.scopeTint.inScope,
+  BRAND_TOKENS.color.scopeTint.scheduled,
+  BRAND_TOKENS.color.scopeTint.suggest,
+  BRAND_TOKENS.color.scopeTint.comment,
 ] as const;
 
 /**
@@ -298,7 +315,7 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
       {tier !== "caret-in-cell" ? (
         <ToolbarSection label="Fill">
           <div className="flex items-center gap-1">
-            {CELL_COLORS.map((color) => (
+            {CELL_FILL_PRESETS.map((color) => (
               <button
                 key={color}
                 type="button"

package/src/ui-tailwind/chrome/tw-table-grip-layer.tsx

@@ -102,11 +102,19 @@ export function TwTableGripLayer({
         const rect = frame.anchorIndex.byTableRowEdge(blockId, rowIndex);
         if (!rect) return null;
         const pos = projectRectToOverlay(rect, space);
+        // Current row height in twips is derived from the first cell's rect.
+        // Without this, mid-drag arithmetic collapses rows to MIN_ROW_TWIPS
+        // on any upward (negative-delta) drag.
+        const cellRect = frame.anchorIndex.byTableCell(blockId, rowIndex, 0);
+        const originalTwips = cellRect
+          ? Math.round(cellRect.heightPx / pxPerTwip)
+          : MIN_ROW_TWIPS;
         return (
           <RowResizeGrip
             key={`row-${blockId}-${rowIndex}`}
             pos={pos}
             rowIndex={rowIndex}
+            originalTwips={originalTwips}
             pxPerTwip={pxPerTwip}
             disabled={!!disabled || !onSetRowHeight}
             onCommit={onSetRowHeight}
@@ -143,6 +151,8 @@ function ColResizeGrip({
     originalTwips: number;
     dragStarted: boolean;
     gripEl: HTMLElement;
+    // Captured at mousedown so re-renders can't swap out onCommit mid-drag.
+    onCommit: ColResizeGripProps["onCommit"];
   } | null>(null);
   const [isActive, setIsActive] = useState(false);
 
@@ -154,9 +164,10 @@ function ColResizeGrip({
         originalTwips,
         dragStarted: false,
         gripEl: e.currentTarget,
+        onCommit,
       };
     },
-    [disabled, originalTwips],
+    [disabled, originalTwips, onCommit],
   );
 
   useEffect(() => {
@@ -185,7 +196,7 @@ function ColResizeGrip({
         MIN_COLUMN_TWIPS,
         Math.round(drag.originalTwips + deltaTwips),
       );
-      onCommit?.(colIndex, newTwips);
+      drag.onCommit?.(colIndex, newTwips);
     };
     window.addEventListener("mousemove", handleMove);
     window.addEventListener("mouseup", handleUp);
@@ -193,7 +204,7 @@ function ColResizeGrip({
       window.removeEventListener("mousemove", handleMove);
       window.removeEventListener("mouseup", handleUp);
     };
-  }, [colIndex, pxPerTwip, onCommit]);
+  }, [colIndex, pxPerTwip]);
 
   return (
     <div
@@ -226,6 +237,7 @@ function ColResizeGrip({
 interface RowResizeGripProps {
   pos: { left: string; top: string; width: string; height: string };
   rowIndex: number;
+  originalTwips: number;
   pxPerTwip: number;
   disabled: boolean;
   onCommit?: (
@@ -238,14 +250,18 @@ interface RowResizeGripProps {
 function RowResizeGrip({
   pos,
   rowIndex,
+  originalTwips,
   pxPerTwip,
   disabled,
   onCommit,
 }: RowResizeGripProps) {
   const dragRef = useRef<{
     startY: number;
+    originalTwips: number;
     dragStarted: boolean;
     gripEl: HTMLElement;
+    // Captured at mousedown so re-renders can't swap out onCommit mid-drag.
+    onCommit: RowResizeGripProps["onCommit"];
   } | null>(null);
   const [isActive, setIsActive] = useState(false);
 
@@ -254,11 +270,13 @@ function RowResizeGrip({
       if (disabled) return;
       dragRef.current = {
         startY: e.clientY,
+        originalTwips,
         dragStarted: false,
         gripEl: e.currentTarget,
+        onCommit,
       };
     },
-    [disabled],
+    [disabled, originalTwips, onCommit],
   );
 
   useEffect(() => {
@@ -282,13 +300,14 @@ function RowResizeGrip({
         forwardNonDragClick(drag.gripEl, e);
         return;
       }
-      const deltaY = e.clientY - drag.startY;
-      const deltaTwips = deltaY / pxPerTwip;
-      // We don't know the current row height from the grip alone; use atLeast
-      // so that a positive drag expands and a negative drag collapses to auto.
-      const newTwips = Math.max(MIN_ROW_TWIPS, Math.round(deltaTwips));
-      const rule = newTwips > 0 ? "atLeast" : "auto";
-      onCommit?.(rowIndex, newTwips, rule as "atLeast");
+      const deltaTwips = (e.clientY - drag.startY) / pxPerTwip;
+      const newTwips = Math.max(
+        MIN_ROW_TWIPS,
+        Math.round(drag.originalTwips + deltaTwips),
+      );
+      const rule: "atLeast" | "auto" =
+        newTwips > MIN_ROW_TWIPS ? "atLeast" : "auto";
+      drag.onCommit?.(rowIndex, newTwips, rule);
     };
     window.addEventListener("mousemove", handleMove);
     window.addEventListener("mouseup", handleUp);
@@ -296,7 +315,7 @@ function RowResizeGrip({
       window.removeEventListener("mousemove", handleMove);
       window.removeEventListener("mouseup", handleUp);
     };
-  }, [rowIndex, pxPerTwip, onCommit]);
+  }, [rowIndex, pxPerTwip]);
 
   return (
     <div

package/src/ui-tailwind/chrome-overlay/page-border-resolver.ts

@@ -0,0 +1,211 @@
+/**
+ * Lane 6d — Slice N5: pure resolvers for page borders + column separators.
+ *
+ * Page-border data is parsed from OOXML `<w:pgBorders>` and surfaced on
+ * `PageLayoutSnapshot.pageBorders`.  Units follow OOXML conventions:
+ *
+ *   - `size`  →  border width in **eighths of a point** (`w:sz`).
+ *   - `space` →  spacing from page edge in **points** (`w:space`).
+ *   - `value` →  OOXML border-style name (`single`, `double`, …).
+ *
+ * 1 pt = 96/72 px at 96 dpi → these helpers convert into px so the
+ * overlay can render inline `style="…"` declarations.
+ */
+
+import type { PageLayoutSnapshot } from "../../api/public-types";
+
+const PX_PER_PT = 96 / 72;
+const PX_PER_EIGHTH_PT = PX_PER_PT / 8;
+
+/**
+ * Convert an OOXML `w:sz` (eighths of a point) into pixels.
+ */
+export function borderSizeToPx(sizeEighthsPt: number | undefined): number {
+  if (!sizeEighthsPt || sizeEighthsPt <= 0) return 0;
+  return sizeEighthsPt * PX_PER_EIGHTH_PT;
+}
+
+/**
+ * Convert an OOXML `w:space` (points) into pixels.
+ */
+export function borderSpaceToPx(spacePt: number | undefined): number {
+  if (!spacePt || spacePt <= 0) return 0;
+  return spacePt * PX_PER_PT;
+}
+
+/**
+ * Map OOXML border-style names onto the closest CSS `border-style`.
+ * Unknown / fancy variants (`wave`, `dotDash`, `triple`, …) collapse to
+ * `solid` so the page still gets a visible edge — matching Word's
+ * fallback behavior in non-Word renderers.
+ */
+export function borderValueToCss(value: string | undefined): string {
+  if (!value) return "solid";
+  switch (value) {
+    case "none":
+    case "nil":
+      return "none";
+    case "single":
+    case "thick":
+    case "thinThickSmallGap":
+    case "thickThinSmallGap":
+    case "thinThickThinSmallGap":
+    case "thinThickMediumGap":
+    case "thickThinMediumGap":
+    case "thinThickThinMediumGap":
+    case "thinThickLargeGap":
+    case "thickThinLargeGap":
+    case "thinThickThinLargeGap":
+      return "solid";
+    case "double":
+      return "double";
+    case "dotted":
+    case "dottedHeavy":
+      return "dotted";
+    case "dashed":
+    case "dashedHeavy":
+    case "dashSmallGap":
+    case "dashDotStroked":
+      return "dashed";
+    default:
+      return "solid";
+  }
+}
+
+export interface PageBorderDecisionInput {
+  /** 0-based index of the page within its owning section. */
+  pageInSection: number;
+  /** Total page count in the section (informational; reserved for future rules). */
+  pageCountInSection?: number;
+  /** Display policy from `pageBorders.display`; missing → `allPages`. */
+  display?: "allPages" | "firstPage" | "notFirstPage";
+}
+
+/**
+ * Apply Word's `display` policy to decide whether the border paints on a
+ * given page.  `allPages` (or undefined) → always; `firstPage` → only
+ * page 0 in its section; `notFirstPage` → every page except page 0.
+ */
+export function shouldDisplayPageBorderOnPage(
+  input: PageBorderDecisionInput,
+): boolean {
+  const policy = input.display ?? "allPages";
+  switch (policy) {
+    case "allPages":
+      return true;
+    case "firstPage":
+      return input.pageInSection === 0;
+    case "notFirstPage":
+      return input.pageInSection > 0;
+  }
+}
+
+export interface ResolvedBorderEdge {
+  /** CSS `border-{edge}-style` value. */
+  style: string;
+  /** Width in pixels (already converted from `w:sz` units). */
+  widthPx: number;
+  /** Color string ready for inline style; defaults to `currentColor` when no color set. */
+  color: string;
+  /** Distance from the page (or text margin) edge, in pixels. */
+  spacePx: number;
+}
+
+/**
+ * Resolve a single border-spec into render-ready CSS values.  Returns
+ * `null` when the spec is `none`/`nil` or has zero width — the caller
+ * should skip rendering that edge.
+ */
+export function resolveBorderEdge(
+  spec: { value?: string; size?: number; space?: number; color?: string } | undefined,
+): ResolvedBorderEdge | null {
+  if (!spec) return null;
+  const style = borderValueToCss(spec.value);
+  if (style === "none") return null;
+  const widthPx = borderSizeToPx(spec.size);
+  if (widthPx <= 0) return null;
+  return {
+    style,
+    widthPx,
+    color: spec.color && spec.color !== "auto" ? `#${spec.color}` : "currentColor",
+    spacePx: borderSpaceToPx(spec.space),
+  };
+}
+
+export interface ResolvedPageBorders {
+  /** When `false`, the overlay should render nothing for this page. */
+  display: boolean;
+  /** Distance anchor — page edge or text-margin edge. */
+  offsetFrom: "page" | "text";
+  /** zOrder — `back` paints below content, `front` above (overlay default). */
+  zOrder: "front" | "back";
+  /** Per-edge resolved borders; missing keys mean "do not render this edge". */
+  top: ResolvedBorderEdge | null;
+  right: ResolvedBorderEdge | null;
+  bottom: ResolvedBorderEdge | null;
+  left: ResolvedBorderEdge | null;
+}
+
+/**
+ * Top-level resolver.  Combines display-policy gating with per-edge
+ * conversion.  Returns `null` when the section has no `pageBorders` at
+ * all so the overlay can short-circuit.
+ */
+export function resolvePageBorders(
+  layout: PageLayoutSnapshot | undefined,
+  pageInSection: number,
+): ResolvedPageBorders | null {
+  const pageBorders = layout?.pageBorders;
+  if (!pageBorders) return null;
+
+  const display = shouldDisplayPageBorderOnPage({
+    pageInSection,
+    display: pageBorders.display,
+  });
+
+  return {
+    display,
+    offsetFrom: pageBorders.offsetFrom ?? "page",
+    zOrder: pageBorders.zOrder ?? "front",
+    top: resolveBorderEdge(pageBorders.top),
+    right: resolveBorderEdge(pageBorders.right),
+    bottom: resolveBorderEdge(pageBorders.bottom),
+    left: resolveBorderEdge(pageBorders.left),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Column separators (P11.7)
+// ---------------------------------------------------------------------------
+
+/**
+ * Compute pixel x-offsets (relative to the content box) where vertical
+ * column-separator lines should paint.  Separators sit centered in the
+ * gap between adjacent columns.
+ *
+ * Returns `[]` when separators are disabled, columns are equal-width
+ * (Word draws no separator there unless explicitly requested), or the
+ * snapshot has fewer than 2 columns.
+ */
+export function resolveColumnSeparatorXOffsets(
+  layout: PageLayoutSnapshot | undefined,
+): number[] {
+  if (!layout?.columnSeparator) return [];
+  const cols = layout.columnDefinitions ?? [];
+  if (cols.length < 2) return [];
+
+  // OOXML column widths + spaces are in twips; 1 px ≈ 15 twips at 96 dpi.
+  const TWIPS_PER_PX = 1440 / 96;
+  const offsets: number[] = [];
+  let cursorPx = 0;
+  for (let i = 0; i < cols.length - 1; i += 1) {
+    const col = cols[i]!;
+    const widthPx = col.width / TWIPS_PER_PX;
+    const spacePx = (col.space ?? 0) / TWIPS_PER_PX;
+    cursorPx += widthPx;
+    // Separator centers in the gap between column[i] and column[i+1].
+    offsets.push(cursorPx + spacePx / 2);
+    cursorPx += spacePx;
+  }
+  return offsets;
+}

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

@@ -209,6 +209,7 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
           facet={facet}
           scrollRoot={pageStackScrollRoot}
           renderFrameRevision={renderFrameRevision ?? 0}
+          visiblePageIndexRange={visiblePageIndexRange ?? null}
         />
       ) : null}
       {pageStackScrollRoot !== undefined ? (