@beyondwork/docx-react-component 1.0.52 → 1.0.54

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

@@ -97,10 +97,17 @@ const MODE_OPTIONS: ReadonlyArray<{ mode: WorkflowScopeMode; label: string }> =
 ];
 
 const SEVERITY_COLOR: Record<IssueSeverity, string> = {
-  low: "var(--color-secondary)",
-  medium: "var(--color-warning)",
-  high: "var(--color-warning)",
-  blocker: "var(--color-danger)",
+  low:     "var(--color-semantic-info)",
+  medium:  "var(--color-semantic-warning)",
+  high:    "var(--color-semantic-error)",
+  blocker: "var(--color-semantic-error)",
+};
+
+const SEVERITY_SOFT: Record<IssueSeverity, string> = {
+  low:     "var(--color-semantic-info-soft)",
+  medium:  "var(--color-semantic-warning-soft)",
+  high:    "var(--color-semantic-error-soft)",
+  blocker: "var(--color-semantic-error-soft)",
 };
 
 const SEVERITY_LABEL: Record<IssueSeverity, string> = {
@@ -151,14 +158,18 @@ export const TwScopeCard: React.FC<TwScopeCardProps> = ({
   }, []);
 
   // --- Escape + click-outside ---------------------------------------------
+  // Pinned cards survive Escape and click-outside; only unpinned cards
+  // are dismissed by those gestures.
   React.useEffect(() => {
     const onKey = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
+        if (pinned) return; // pinned cards are immune to Escape
         event.stopPropagation();
         onClose();
       }
     };
     const onPointerDown = (event: PointerEvent) => {
+      if (pinned) return; // pinned cards are immune to click-outside
       const root = rootRef.current;
       if (!root) return;
       if (event.target instanceof Node && root.contains(event.target)) return;
@@ -170,7 +181,7 @@ export const TwScopeCard: React.FC<TwScopeCardProps> = ({
       window.removeEventListener("keydown", onKey, true);
       window.removeEventListener("pointerdown", onPointerDown, true);
     };
-  }, [onClose]);
+  }, [onClose, pinned]);
 
   // --- Focus trap ----------------------------------------------------------
   const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -201,7 +212,8 @@ export const TwScopeCard: React.FC<TwScopeCardProps> = ({
   return (
     <div
       ref={rootRef}
-      className="wre-scope-card pointer-events-auto absolute flex w-80 max-w-[22rem] flex-col gap-2 rounded-lg border border-border bg-canvas p-3 text-sm shadow-[var(--shadow-float)]"
+      className="wre-scope-card pointer-events-auto absolute flex min-w-[320px] max-w-[500px] flex-col gap-2 rounded-[var(--radius-xl)] border border-[var(--color-border-default)] bg-[var(--color-bg-canvas)] p-[14px] text-sm shadow-[var(--shadow-float)]"
+      style={{ padding: "calc(14px * var(--space-density-multiplier))" }}
       role="dialog"
       aria-modal="false"
       aria-labelledby={headerId}
@@ -215,7 +227,7 @@ export const TwScopeCard: React.FC<TwScopeCardProps> = ({
       <div className="flex items-center justify-between gap-2">
         <div
           id={headerId}
-          className="flex min-w-0 flex-1 items-center gap-2 text-xs font-medium text-primary"
+          className="flex min-w-0 flex-1 items-center gap-2 text-xs font-medium text-[var(--color-text-primary)]"
         >
           <span
             className={`wre-scope-rail-icon wre-scope-rail-icon-${posturePresentationIcon(model.posture)}`}
@@ -226,7 +238,7 @@ export const TwScopeCard: React.FC<TwScopeCardProps> = ({
             {postureLabel}
           </span>
           {model.label ? (
-            <span className="truncate text-tertiary">· {model.label}</span>
+            <span className="truncate text-[var(--color-text-tertiary)]">· {model.label}</span>
           ) : null}
         </div>
         <div className="flex items-center gap-1">
@@ -237,8 +249,8 @@ export const TwScopeCard: React.FC<TwScopeCardProps> = ({
               aria-pressed={pinned ? "true" : "false"}
               className={`flex h-6 w-6 items-center justify-center rounded-sm text-[10px] font-semibold uppercase tracking-[0.06em] transition-colors ${
                 pinned
-                  ? "bg-surface text-accent"
-                  : "text-tertiary hover:bg-surface hover:text-primary"
+                  ? "bg-surface text-[var(--color-accent-primary)]"
+                  : "text-[var(--color-text-tertiary)] hover:bg-surface hover:text-[var(--color-text-primary)]"
               }`}
               onClick={onTogglePin}
               data-testid="scope-card-pin"
@@ -264,7 +276,7 @@ export const TwScopeCard: React.FC<TwScopeCardProps> = ({
         <div
           role="group"
           aria-label="Scope mode"
-          className="flex gap-1 rounded-md border border-border bg-surface p-0.5"
+          className="flex items-center gap-0 border-b border-[var(--color-border-default)]"
         >
           {MODE_OPTIONS.map(({ mode, label }) => {
             const active = model.posture === mode;
@@ -273,10 +285,10 @@ export const TwScopeCard: React.FC<TwScopeCardProps> = ({
                 key={mode}
                 type="button"
                 aria-pressed={active ? "true" : "false"}
-                className={`flex-1 rounded-sm px-2 py-1 text-xs font-medium transition-colors ${
+                className={`px-3 py-1.5 text-xs font-medium border-b-2 transition-colors ${
                   active
-                    ? "bg-canvas text-primary shadow-sm"
-                    : "text-secondary hover:bg-canvas hover:text-primary"
+                    ? "border-[var(--color-accent-primary)] text-[var(--color-text-primary)]"
+                    : "border-transparent text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]"
                 }`}
                 onClick={() => onModeChange(mode)}
                 data-testid={`scope-card-mode-${mode}`}
@@ -382,10 +394,13 @@ const IssueRow: React.FC<{
       <div className="flex items-center gap-1.5 text-[11px]">
         <span
           aria-hidden="true"
-          className="inline-block h-2 w-2 rounded-full"
-          style={{ background: SEVERITY_COLOR[issue.severity] }}
-        />
-        <span className="font-semibold text-primary">
+          className="inline-flex items-center rounded-[var(--radius-sm)] px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.08em]"
+          style={{
+            color: SEVERITY_COLOR[issue.severity],
+            backgroundColor: SEVERITY_SOFT[issue.severity],
+          }}
+          data-testid="scope-card-severity-badge"
+        >
           {SEVERITY_LABEL[issue.severity]}
         </span>
         {issue.owner ? (

package/src/ui-tailwind/chrome-overlay/tw-table-continuation-header.tsx

@@ -0,0 +1,94 @@
+/**
+ * Renders repeated header rows for a multi-page table on a continuation page.
+ *
+ * Architecture: one PM view → one `<table>` DOM element per table. NodeView
+ * cannot clip rows by page, so header repetition on continuation pages must
+ * come from a chrome overlay. This component renders an absolutely-positioned
+ * `<table>` (header rows only) at the Y-offset of the table's first row on
+ * this page, computed from `facet.getTableBodyYOffsetOnPage`. Visual-only
+ * (`aria-hidden`, `pointer-events: none`); no effect on PM doc structure.
+ */
+
+import React from "react";
+import type { SurfaceTableRowSnapshot } from "../../api/public-types.ts";
+import type { WordReviewEditorLayoutFacet } from "../../runtime/layout/public-facet.ts";
+
+export interface TwTableContinuationHeaderProps {
+  blockId: string;
+  pageIndex: number;
+  facet: WordReviewEditorLayoutFacet;
+  /** Pre-resolved header rows (from `SurfaceTableBlock.rows[ref.sourceRowIndex]`). */
+  headerRows: readonly SurfaceTableRowSnapshot[];
+  /** px-per-twip conversion factor from the page layout. */
+  pxPerTwip: number;
+  /** Top edge of the page body in px (absolute within the page frame). */
+  bodyOriginTopPx: number;
+}
+
+function TwTableContinuationHeaderInner({
+  blockId,
+  pageIndex,
+  facet,
+  headerRows,
+  pxPerTwip,
+  bodyOriginTopPx,
+}: TwTableContinuationHeaderProps): React.ReactElement | null {
+  const yOffsetTwips = facet.getTableBodyYOffsetOnPage(blockId, pageIndex);
+  if (yOffsetTwips === null || headerRows.length === 0) return null;
+
+  const topPx = bodyOriginTopPx + yOffsetTwips * pxPerTwip;
+
+  return (
+    <div
+      aria-hidden
+      style={{
+        position: "absolute",
+        top: `${topPx}px`,
+        left: 0,
+        right: 0,
+        pointerEvents: "none",
+        overflow: "hidden",
+      }}
+    >
+      <table style={{ width: "100%", borderCollapse: "collapse" }}>
+        <tbody>
+          {headerRows.map((row, ri) => (
+            <tr key={ri}>
+              {row.cells.map((cell, ci) => (
+                <td
+                  key={ci}
+                  colSpan={cell.colspan ?? 1}
+                  style={{
+                    backgroundColor: cell.backgroundColor ?? undefined,
+                    verticalAlign: cell.verticalAlign ?? "top",
+                    borderTop: cell.borderTop ?? undefined,
+                    borderRight: cell.borderRight ?? undefined,
+                    borderBottom: cell.borderBottom ?? undefined,
+                    borderLeft: cell.borderLeft ?? undefined,
+                    padding: "2px 4px",
+                  }}
+                >
+                  {cell.content
+                    .filter((b) => b.kind === "paragraph")
+                    .map((b, bi) =>
+                      b.kind === "paragraph" ? (
+                        <span key={bi}>
+                          {b.segments
+                            .map((s) => ("text" in s ? s.text : ""))
+                            .join("")}
+                        </span>
+                      ) : null,
+                    )}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export const TwTableContinuationHeader = React.memo(
+  TwTableContinuationHeaderInner,
+);

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

@@ -6,6 +6,7 @@ export type PerfProbeKind =
   | "selection"
   | "runtime.create"
   | "loadSession.laycacheProbe"
+  | "loadSession.compatReportCached"
   | "snapshot.surface"
   | "snapshot.compatibility"
   | "snapshot.navigation"

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

@@ -308,24 +308,37 @@ function buildChromeWidgetDomUncached(input: ChromeWidgetInput): HTMLElement {
     line.style.right = "0";
     line.style.top = `${Math.round(input.interGapPx / 2)}px`;
     line.style.height = "0";
-    line.style.borderTop = "1px dotted var(--color-border, rgba(0,0,0,0.3))";
+    line.style.borderTop = "1px dotted var(--color-border-default)";
     root.appendChild(line);
 
+    // L6d.U2: badge is now a true pill — `--radius-pill` geometry,
+    // hairline `--color-border-default` border, subtle `--shadow-soft`
+    // so the callout reads as a card floating over the seam line rather
+    // than text painted on top of it.  The pill is 18 px tall (10 px
+    // font + 8 px vertical padding + hairline border); re-center so the
+    // seam line bisects the pill vertically.
+    const PILL_HEIGHT_PX = 18;
     const badge = document.createElement("span");
     badge.className = "wre-page-chrome-canvas-badge";
     badge.setAttribute("data-kind", "canvas-seam-badge");
+    badge.setAttribute("data-variant", "pill");
     badge.textContent = input.nextPageLabel;
     badge.style.position = "absolute";
-    badge.style.top = `${Math.round(input.interGapPx / 2) - 9}px`;
+    badge.style.top = `${Math.round(input.interGapPx / 2) - Math.round(PILL_HEIGHT_PX / 2)}px`;
     badge.style.left = "50%";
     badge.style.transform = "translateX(-50%)";
+    badge.style.display = "inline-flex";
+    badge.style.alignItems = "center";
+    badge.style.height = `${PILL_HEIGHT_PX}px`;
+    badge.style.padding = "0 10px";
     badge.style.fontSize = "10px";
     badge.style.letterSpacing = "0.12em";
     badge.style.textTransform = "uppercase";
-    badge.style.color = "var(--color-text-tertiary, #6b7280)";
-    badge.style.backgroundColor =
-      "var(--color-surface, rgba(255,255,255,0.9))";
-    badge.style.padding = "0 8px";
+    badge.style.color = "var(--color-text-tertiary)";
+    badge.style.backgroundColor = "var(--color-surface)";
+    badge.style.border = "1px solid var(--color-border-default)";
+    badge.style.borderRadius = "var(--radius-pill)";
+    badge.style.boxShadow = "var(--shadow-soft)";
     root.appendChild(badge);
     return root;
   }
@@ -360,7 +373,7 @@ function buildChromeWidgetDomUncached(input: ChromeWidgetInput): HTMLElement {
   label.style.fontSize = "10px";
   label.style.letterSpacing = "0.12em";
   label.style.textTransform = "uppercase";
-  label.style.color = "var(--color-tertiary, #6b7280)";
+  label.style.color = "var(--color-text-tertiary)";
   // Intentionally no background, no border, no padding — the label floats
   // transparently in the workspace-canvas gap.
   root.appendChild(label);

package/src/ui-tailwind/editor-surface/pm-state-from-snapshot.ts

@@ -519,6 +519,8 @@ function buildTable(
             borderRight: cell.borderRight ?? null,
             borderBottom: cell.borderBottom ?? null,
             borderLeft: cell.borderLeft ?? null,
+            // R3.a Phase 2 — per-cell text-flow direction.
+            textDirection: cell.textDirection ?? null,
             bandClasses: cell.bandClasses ?? null,
           },
           Fragment.from(cellContent),
@@ -536,6 +538,20 @@ function buildTable(
       Fragment.from(cells),
     ));
   }
+  // R3.a Phase 2 — convert each typed BorderSpec on `tableResolved.borders`
+  // into a CSS shorthand string ("1px solid #000000") so the schema attrs
+  // carry render-ready values. The four outer sides are applied as inline
+  // styles by the node-view; insideH / insideV ride along for round-trip
+  // and future use but do not change CSS at the table level (the per-cell
+  // border resolver already paints them on each cell).
+  const tr = block.tableResolved;
+  const tableBorderTop = tr?.borders?.top ? borderSpecToCss(tr.borders.top) : null;
+  const tableBorderRight = tr?.borders?.right ? borderSpecToCss(tr.borders.right) : null;
+  const tableBorderBottom = tr?.borders?.bottom ? borderSpecToCss(tr.borders.bottom) : null;
+  const tableBorderLeft = tr?.borders?.left ? borderSpecToCss(tr.borders.left) : null;
+  const tableBorderInsideH = tr?.borders?.insideH ? borderSpecToCss(tr.borders.insideH) : null;
+  const tableBorderInsideV = tr?.borders?.insideV ? borderSpecToCss(tr.borders.insideV) : null;
+
   return editorSchema.nodes.table.create(
     {
       styleId: block.styleId ?? null,
@@ -548,11 +564,49 @@ function buildTable(
       tblLookNoHBand: block.tblLook?.noHBand ?? false,
       tblLookNoVBand: block.tblLook?.noVBand ?? false,
       tblLookVal: block.tblLook?.val ?? null,
+      // R3.a Phase 2 — table-level resolved properties.
+      tableWidth: tr?.width ?? null,
+      tableWidthType: tr?.widthType ?? null,
+      tableLayoutMode: tr?.layoutMode ?? null,
+      tableCellSpacing: tr?.cellSpacing ?? null,
+      tableCellSpacingType: tr?.cellSpacingType ?? null,
+      tableBorderTop,
+      tableBorderRight,
+      tableBorderBottom,
+      tableBorderLeft,
+      tableBorderInsideH,
+      tableBorderInsideV,
     },
     Fragment.from(rows),
   );
 }
 
+/**
+ * R3.a Phase 2 — convert a parsed OOXML `BorderSpec` shape (size in eighths of
+ * a point, color hex without `#`, value like "single"/"double"/"dashed") to a
+ * CSS shorthand string. Mirrors the cell-side helper at
+ * `src/runtime/surface-projection.ts:506` so cell + table borders look the
+ * same. Returns `null` for absent / "none" / "nil" specs so callers can stamp
+ * `null` cleanly into PM attrs.
+ */
+function borderSpecToCss(
+  spec: { value?: string; size?: number; color?: string } | null | undefined,
+): string | null {
+  if (!spec) return null;
+  if (spec.value === "none" || spec.value === "nil") return null;
+  const width = spec.size ? `${Math.max(1, Math.round(spec.size / 8))}px` : "1px";
+  const style =
+    spec.value === "double"
+      ? "double"
+      : spec.value === "dashed" || spec.value === "dashSmallGap"
+        ? "dashed"
+        : spec.value === "dotted"
+          ? "dotted"
+          : "solid";
+  const color = spec.color && spec.color !== "auto" ? `#${spec.color}` : "currentColor";
+  return `${width} ${style} ${color}`;
+}
+
 function buildSdtBlock(
   block: Extract<SurfaceBlockSnapshot, { kind: "sdt_block" }>,
   mediaPreviews: Record<string, MediaPreviewDescriptor>,

package/src/ui-tailwind/editor-surface/scroll-anchor.ts

@@ -0,0 +1,93 @@
+/**
+ * Lane 6d — Slice U3: workspace-mode scroll anchoring.
+ *
+ * Capturing a scroll anchor before toggling `workspaceMode` between
+ * `canvas` and `page` — then restoring it after the new chrome has
+ * painted — keeps the user's viewport over the same paragraph even
+ * though the page-break widgets add ~112 px of vertical spacer per
+ * boundary in page mode.
+ *
+ * The anchor is keyed on `data-block-id` rather than pixel offset so
+ * it survives arbitrary height changes across the toggle.  Each helper
+ * does a single DOM read or a single `scrollTop` write — no mutation
+ * observers, no rAF loops — so the inverted-PM contract is preserved.
+ */
+
+export interface ScrollAnchor {
+  /** `data-block-id` of the topmost block straddling or below scrollTop. */
+  blockId: string;
+  /**
+   * Offset of the viewport's top edge within that block's rect, in CSS
+   * pixels.  `restoreScrollAnchor` adds this back so the block's
+   * leading edge lands in the same relative spot after the toggle.
+   */
+  offsetWithinBlock: number;
+}
+
+/**
+ * Find the scroll anchor for `root` — the scroll container whose
+ * `scrollTop` / `getBoundingClientRect` we will read.
+ *
+ * Returns `null` when the root has no `[data-block-id]` descendants or
+ * when the root itself has zero height (e.g. disconnected during the
+ * toggle).
+ */
+export function findScrollAnchor(root: HTMLElement | null): ScrollAnchor | null {
+  if (!root) return null;
+  const blocks = root.querySelectorAll<HTMLElement>("[data-block-id]");
+  if (blocks.length === 0) return null;
+  const rootRect = root.getBoundingClientRect();
+  const rootTop = rootRect.top;
+  // Walk blocks in document order; pick the first one whose bottom is
+  // >= the scroll root's top edge.  That's the topmost block at least
+  // partially visible (or the one just below when the viewport sits in
+  // a gap between blocks).
+  for (const block of blocks) {
+    const rect = block.getBoundingClientRect();
+    if (rect.bottom < rootTop) continue;
+    const blockId = block.getAttribute("data-block-id");
+    if (!blockId) continue;
+    return {
+      blockId,
+      offsetWithinBlock: rootTop - rect.top,
+    };
+  }
+  return null;
+}
+
+/**
+ * Restore an earlier anchor by finding the same `data-block-id` under
+ * `root` and adjusting `scrollTop` so the block's leading edge sits at
+ * the same offset relative to the viewport.
+ *
+ * Graceful no-op when the anchor's block no longer exists (deletion
+ * mid-toggle, doc swap) or when the new root is empty.
+ */
+export function restoreScrollAnchor(
+  root: HTMLElement | null,
+  anchor: ScrollAnchor | null,
+): void {
+  if (!root || !anchor) return;
+  const selector = `[data-block-id="${cssEscape(anchor.blockId)}"]`;
+  const block = root.querySelector<HTMLElement>(selector);
+  if (!block) return;
+  const rootRect = root.getBoundingClientRect();
+  const blockRect = block.getBoundingClientRect();
+  // We want, post-restore, `blockRect.top === rootRect.top - offsetWithinBlock`
+  // (i.e. the block's leading edge sits `offsetWithinBlock` px above the
+  // viewport top because the viewport sat that far INTO the block at
+  // capture time).  Scrolling by `delta` shifts rects by `-delta`, so
+  // solve for delta: delta = blockRect.top - rootRect.top + offsetWithinBlock.
+  const delta = blockRect.top - rootRect.top + anchor.offsetWithinBlock;
+  root.scrollTop = root.scrollTop + delta;
+}
+
+/**
+ * Minimal CSS.escape shim for attribute selectors — `data-block-id`
+ * values include UUIDs or runtime-offset strings, so escape anything
+ * that isn't a safe word-char.  Avoids depending on DOM `CSS.escape`
+ * which may be absent under some JSDOM builds.
+ */
+function cssEscape(value: string): string {
+  return value.replace(/[^a-zA-Z0-9_-]/g, (ch) => `\\${ch}`);
+}

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

@@ -282,11 +282,33 @@ function requestTableLayoutSync(start: HTMLElement): void {
   table?.dispatchEvent(new Event(TABLE_LAYOUT_SYNC_EVENT));
 }
 
+// R3.a Phase 2 — single source of truth for the inline style properties
+// `applyTableAttrs` writes back. Adding a new managed property requires only
+// adding it here (and the matching conditional assignment below); the reset
+// loop will pick it up automatically so stale values can never persist
+// across PM snapshot updates.
+const R3A_MANAGED_TABLE_STYLES = [
+  "marginLeft",
+  "marginRight",
+  "width",
+  "tableLayout",
+  "borderCollapse",
+  "borderSpacing",
+  "borderTop",
+  "borderRight",
+  "borderBottom",
+  "borderLeft",
+] as const;
+
 function applyTableAttrs(table: HTMLTableElement, node: PMNode): void {
-  table.className = "border-collapse w-full my-2 text-sm";
+  // Reset every R3.a-managed inline style first so re-application doesn't
+  // accumulate stale values across PM updates (e.g. width changes, layout
+  // mode flips). The base Tailwind className is rebuilt below to match.
   table.setAttribute("data-pm-table-root", "true");
-  table.style.marginLeft = "";
-  table.style.marginRight = "";
+  for (const prop of R3A_MANAGED_TABLE_STYLES) {
+    table.style[prop] = "";
+  }
+
   const alignment = node.attrs.alignment as string | null | undefined;
   if (alignment === "center") {
     table.style.marginLeft = "auto";
@@ -294,6 +316,67 @@ function applyTableAttrs(table: HTMLTableElement, node: PMNode): void {
   } else if (alignment === "right") {
     table.style.marginLeft = "auto";
   }
+
+  // R3.a Phase 2 — table-level inline styles from resolved properties.
+  // Width: pct → "%", dxa → "pt" (twips/20), auto → "auto", null → unset.
+  // When an explicit width is present we drop Tailwind's `w-full` so the
+  // explicit value wins; otherwise keep the responsive default.
+  const tableWidth = node.attrs.tableWidth as number | null | undefined;
+  const tableWidthType = node.attrs.tableWidthType as string | null | undefined;
+  let baseClasses = "border-collapse w-full my-2 text-sm";
+  if (tableWidthType === "pct" && typeof tableWidth === "number") {
+    // OOXML pct widths are fiftieths of a percent (5000 = 100%).
+    table.style.width = `${tableWidth / 50}%`;
+    baseClasses = "border-collapse my-2 text-sm";
+  } else if (tableWidthType === "dxa" && typeof tableWidth === "number") {
+    table.style.width = `${tableWidth / 20}pt`;
+    baseClasses = "border-collapse my-2 text-sm";
+  } else if (tableWidthType === "auto") {
+    table.style.width = "auto";
+    baseClasses = "border-collapse my-2 text-sm";
+  }
+
+  // Layout mode: w:tblLayout/@w:type. "fixed" → CSS `table-layout: fixed`
+  // (column widths from <colgroup> rule); "autofit" falls through to the
+  // browser default ("auto").
+  const layoutMode = node.attrs.tableLayoutMode as string | null | undefined;
+  if (layoutMode === "fixed") {
+    table.style.tableLayout = "fixed";
+  }
+
+  // Cell spacing: w:tblCellSpacing. Non-zero spacing requires
+  // `border-collapse: separate` in CSS (border-collapse: collapse ignores
+  // border-spacing).
+  // ECMA-376 §17.4.44: w:tblCellSpacing is total spacing between cells in
+  // twentieths of a point; direct CSS border-spacing equivalent.
+  const cellSpacing = node.attrs.tableCellSpacing as number | null | undefined;
+  const cellSpacingType = node.attrs.tableCellSpacingType as string | null | undefined;
+  if (typeof cellSpacing === "number" && cellSpacing > 0 && cellSpacingType === "dxa") {
+    table.style.borderCollapse = "separate";
+    table.style.borderSpacing = `${cellSpacing / 20}pt`;
+    // `border-collapse` overrides Tailwind's `border-collapse` utility, so
+    // strip it from the base class set to avoid the conflicting cascade
+    // result that some browsers cache.
+    baseClasses = baseClasses.replace("border-collapse", "border-separate");
+  }
+
+  // Outer borders (top / right / bottom / left) — apply directly as inline
+  // styles. insideH / insideV are intentionally NOT applied at the table
+  // level because CSS has no native "table-inside-border" property; their
+  // visual effect is realized through per-cell borders projected on the
+  // cell snapshot via resolveCellBorderStyles in surface-projection.
+  // (See Lane 3b R3.a Phase 2 close-out plan: "option 1 — cell-level
+  // fallback".)
+  const tBorderTop = node.attrs.tableBorderTop as string | null | undefined;
+  const tBorderRight = node.attrs.tableBorderRight as string | null | undefined;
+  const tBorderBottom = node.attrs.tableBorderBottom as string | null | undefined;
+  const tBorderLeft = node.attrs.tableBorderLeft as string | null | undefined;
+  if (tBorderTop) table.style.borderTop = tBorderTop;
+  if (tBorderRight) table.style.borderRight = tBorderRight;
+  if (tBorderBottom) table.style.borderBottom = tBorderBottom;
+  if (tBorderLeft) table.style.borderLeft = tBorderLeft;
+
+  table.className = baseClasses;
   syncColgroup(table, node);
 }
 
@@ -423,6 +506,27 @@ function applyCellAttrs(cell: HTMLTableCellElement, node: PMNode, isHeader: bool
   cell.style.borderRight = borderRight ?? "";
   cell.style.borderBottom = borderBottom ?? "";
   cell.style.borderLeft = borderLeft ?? "";
+
+  // R3.a Phase 2 — vertical text direction. OOXML: tbRl = top→bottom, right→left
+  // (most common for vertical headers, reads when tilting the head right);
+  // btLr = bottom→top, left→right (rare, reads tilting head left); lrTb is the
+  // default horizontal flow. CSS `writing-mode` is the direct equivalent.
+  const textDirection = node.attrs.textDirection as
+    | "lrTb"
+    | "tbRl"
+    | "btLr"
+    | null
+    | undefined;
+  cell.style.writingMode = "";
+  if (textDirection === "tbRl") {
+    cell.style.writingMode = "vertical-rl";
+    cell.setAttribute("data-text-direction", "tbRl");
+  } else if (textDirection === "btLr") {
+    cell.style.writingMode = "vertical-lr";
+    cell.setAttribute("data-text-direction", "btLr");
+  } else {
+    cell.removeAttribute("data-text-direction");
+  }
 }
 
 /**

package/src/ui-tailwind/index.ts

@@ -56,6 +56,17 @@ export {
   type TwModeDockAction,
   type TwModeDockProps,
 } from "./chrome/tw-mode-dock";
+export {
+  TwPasteDropToast,
+  type TwPasteDropToastProps,
+} from "./chrome/tw-paste-drop-toast";
+export {
+  TwCommandPalette,
+  isCommandPaletteOpenShortcut,
+  type CommandPaletteGroup,
+  type CommandPaletteItem,
+  type TwCommandPaletteProps,
+} from "./chrome/tw-command-palette";
 
 // Collab chrome (P9) — mount when chromePreset === "collab"; each
 // component is pure presentational and takes snapshots + callbacks.

package/src/ui-tailwind/page-stack/tw-footnote-area.tsx

@@ -32,7 +32,7 @@ export interface TwFootnoteAreaProps {
   "data-testid"?: string;
 }
 
-export const TwFootnoteArea: React.FC<TwFootnoteAreaProps> = ({
+export const TwFootnoteArea: React.FC<TwFootnoteAreaProps> = React.memo(({
   pageIndex,
   blocks,
   topPx,
@@ -66,6 +66,6 @@ export const TwFootnoteArea: React.FC<TwFootnoteAreaProps> = ({
       <TwRegionBlockRenderer blocks={blocks} />
     </div>
   );
-};
+});
 
 export default TwFootnoteArea;