@beyondwork/docx-react-component 1.0.60 → 1.0.62

package/src/runtime/layout/paginated-layout-engine.ts

@@ -197,6 +197,7 @@ export function buildPageStackWithSplits(
   mainSurface: EditorSurfaceSnapshot,
   measurementProvider?: LayoutMeasurementProvider,
 ): PageStackResultWithSplits {
+  const defaultTabInterval = document.subParts?.settings?.defaultTabStop ?? 720;
   const pages: DocumentPageSnapshot[] = [];
   const splitsByBlock = new Map<string, ParagraphLineSlice[]>();
   // P8.1b — aggregate note allocations and fragments across all sections,
@@ -270,6 +271,7 @@ export function buildPageStackWithSplits(
       document.subParts?.footnoteCollection,
       measurementProvider,
       cache,
+      defaultTabInterval,
     );
     const paginated = paginatedResult.pages;
 
@@ -795,6 +797,7 @@ function measureBlockHeight(
   columnWidth: number,
   measurementProvider?: LayoutMeasurementProvider,
   cache?: MeasurementCache,
+  defaultTabInterval = 720,
 ): number {
   if (!block) return 0;
 
@@ -804,7 +807,7 @@ function measureBlockHeight(
   const compute = (): number => {
     switch (block.kind) {
       case "paragraph": {
-        const formatting = resolveBlockFormatting(block);
+        const formatting = resolveBlockFormatting(block, defaultTabInterval);
         if (formatting) {
           // Provider path: sum per-line heights so canvas-backed measurements
           // that emit variable line heights (mixed inline font sizes, etc.)
@@ -837,14 +840,26 @@ function measureBlockHeight(
         return estimateBlockHeight(block, columnWidth);
       }
       case "table":
-        return measureTableHeight(block, columnWidth, measurementProvider, cache);
+        return measureTableHeight(
+          block,
+          columnWidth,
+          measurementProvider,
+          cache,
+          defaultTabInterval,
+        );
       case "sdt_block":
         return Math.max(
           MIN_BLOCK_HEIGHT_TWIPS,
           block.children.reduce(
             (total, child) =>
               total +
-              measureBlockHeight(child, columnWidth, measurementProvider, cache),
+              measureBlockHeight(
+                child,
+                columnWidth,
+                measurementProvider,
+                cache,
+                defaultTabInterval,
+              ),
             0,
           ),
         );
@@ -875,6 +890,7 @@ function measureTableHeight(
   columnWidth: number,
   measurementProvider?: LayoutMeasurementProvider,
   cache?: MeasurementCache,
+  defaultTabInterval = 720,
 ): number {
   const TABLE_ROW_PADDING_TWIPS = 120;
   let totalHeight = 0;
@@ -920,6 +936,7 @@ function measureTableHeight(
           cellWidth,
           measurementProvider,
           cache,
+          defaultTabInterval,
         );
       }
       contentHeight = Math.max(contentHeight, cellContentHeight + TABLE_ROW_PADDING_TWIPS);
@@ -1091,8 +1108,7 @@ function resolveTabAdvance(
   avgCharWidth: number,
   columnWidth: number,
 ): number {
-  // Default tab stops every 720 twips (0.5 inch)
-  const defaultTabInterval = 720;
+  const defaultTabInterval = formatting.defaultTabInterval;
   const currentPosition = currentChars * avgCharWidth + formatting.indentLeft;
 
   if (formatting.tabStops.length === 0) {
@@ -1156,6 +1172,7 @@ function paginateSectionBlocks(
   footnotes: FootnoteCollection | undefined,
   measurementProvider?: LayoutMeasurementProvider,
   cache?: MeasurementCache,
+  defaultTabInterval = 720,
 ): Omit<DocumentPageSnapshot, "pageIndex">[] {
   return paginateSectionBlocksWithSplits(
     section,
@@ -1164,6 +1181,7 @@ function paginateSectionBlocks(
     footnotes,
     measurementProvider,
     cache,
+    defaultTabInterval,
   ).pages;
 }
 
@@ -1174,6 +1192,7 @@ export function paginateSectionBlocksWithSplits(
   footnotes: FootnoteCollection | undefined,
   measurementProvider?: LayoutMeasurementProvider,
   cache?: MeasurementCache,
+  defaultTabInterval = 720,
 ): SectionPaginationResult {
   if (blocks.length === 0) {
     return {
@@ -1329,18 +1348,32 @@ export function paginateSectionBlocksWithSplits(
       const columnWidth =
         columnMetrics[Math.min(columnIndex, columnMetrics.length - 1)]?.width ??
         getUsableColumnWidth(layout);
-      const baseHeight = measureBlockHeight(block, columnWidth, measurementProvider, cache);
+      const baseHeight = measureBlockHeight(
+        block,
+        columnWidth,
+        measurementProvider,
+        cache,
+        defaultTabInterval,
+      );
 
       // keepNext: this paragraph must stay with the next one on the same page
       const keepWithNextHeight =
         block.kind === "paragraph" && block.keepNext
           ? baseHeight +
-            measureBlockHeight(blocks[index + 1], columnWidth, measurementProvider, cache)
+            measureBlockHeight(
+              blocks[index + 1],
+              columnWidth,
+              measurementProvider,
+              cache,
+              defaultTabInterval,
+            )
           : baseHeight;
 
       // keepLines: the entire paragraph must fit on one page.
       // If it doesn't fit and there's already content on this page, break before it.
-      const formatting = block.kind === "paragraph" ? resolveBlockFormatting(block) : null;
+      const formatting = block.kind === "paragraph"
+        ? resolveBlockFormatting(block, defaultTabInterval)
+        : null;
       const keepLinesActive = formatting?.keepLines ?? false;
 
       const noteHeight = estimateFootnoteReservation(block, footnotes, columnWidth, reservedNotes);

package/src/runtime/layout/resolved-formatting-document.ts

@@ -122,13 +122,14 @@ export function buildResolvedFormattingState(
   const usedFamilies = new Set<string>();
 
   const theme = document.subParts?.resolvedTheme;
-  collectFormatting(mainSurface.blocks, paragraphs, runs, usedFamilies, theme);
+  const tabs = buildTabSettings(document.subParts?.settings);
+  collectFormatting(mainSurface.blocks, paragraphs, runs, usedFamilies, theme, tabs.defaultTabInterval);
 
   return {
     paragraphs,
     runs,
     fonts: buildFontCatalog(usedFamilies, document.subParts),
-    tabs: buildTabSettings(),
+    tabs,
     numbering: buildNumberingGeometry(document.subParts),
     settings: buildDocumentSettings(document.subParts?.settings),
     revision: revisionCounter,
@@ -141,11 +142,12 @@ function collectFormatting(
   runs: Map<RunId, ResolvedRunFormatting>,
   usedFamilies: Set<string>,
   theme: ResolvedTheme | undefined,
+  defaultTabInterval: number,
 ): void {
   for (const block of blocks) {
     switch (block.kind) {
       case "paragraph": {
-        const formatting = resolveBlockFormatting(block);
+        const formatting = resolveBlockFormatting(block, defaultTabInterval);
         if (formatting) {
           paragraphs.set(block.blockId, formatting);
         }
@@ -163,12 +165,12 @@ function collectFormatting(
       case "table":
         for (const row of block.rows) {
           for (const cell of row.cells) {
-            collectFormatting(cell.content, paragraphs, runs, usedFamilies, theme);
+            collectFormatting(cell.content, paragraphs, runs, usedFamilies, theme, defaultTabInterval);
           }
         }
         break;
       case "sdt_block":
-        collectFormatting(block.children, paragraphs, runs, usedFamilies, theme);
+        collectFormatting(block.children, paragraphs, runs, usedFamilies, theme, defaultTabInterval);
         break;
     }
   }
@@ -244,11 +246,11 @@ function buildFontCatalog(
   };
 }
 
-function buildTabSettings(): ResolvedTabSettings {
-  // Current DocumentSettings model does not carry `defaultTabStop`.
-  // Word's default is 720 twips (0.5"); retain that until settings exposes one.
+function buildTabSettings(
+  settings: DocumentSettings | undefined,
+): ResolvedTabSettings {
   return {
-    defaultTabInterval: 720,
+    defaultTabInterval: settings?.defaultTabStop ?? 720,
   };
 }
 

package/src/runtime/layout/resolved-formatting-state.ts

@@ -100,6 +100,8 @@ export interface ResolvedParagraphFormatting {
   averageCharWidthTwips: number;
   /** Effective tab stops sorted by position. */
   tabStops: LayoutTabStop[];
+  /** Document default tab interval in twips. */
+  defaultTabInterval: number;
   /** Keep with next paragraph. */
   keepNext: boolean;
   /** Keep all lines of this paragraph on the same page. */
@@ -140,6 +142,7 @@ export interface ResolvedTableRowFormatting {
 
 export function resolveBlockFormatting(
   block: SurfaceBlockSnapshot,
+  defaultTabInterval = 720,
 ): ResolvedParagraphFormatting | null {
   if (block.kind !== "paragraph") {
     return null;
@@ -163,6 +166,7 @@ export function resolveBlockFormatting(
     fontSizeHalfPoints: fontInfo.fontSizeHalfPoints,
     averageCharWidthTwips: fontInfo.avgCharWidth,
     tabStops: resolveTabStops(block),
+    defaultTabInterval,
     keepNext: Boolean(block.keepNext ?? block.resolvedParagraphFormatting?.keepNext),
     keepLines: Boolean(block.keepLines ?? block.resolvedParagraphFormatting?.keepLines),
     pageBreakBefore: Boolean(block.pageBreakBefore ?? block.resolvedParagraphFormatting?.pageBreakBefore),

package/src/runtime/numbering-prefix.ts

@@ -144,8 +144,10 @@ function advanceSequence(
   currentLevel: number,
   levelDefinitions: Map<number, NumberingLevelDefinition>,
 ): void {
-  if (state.lastLevel !== null && currentLevel <= state.lastLevel) {
-    state.counters.length = currentLevel + 1;
+  for (let level = currentLevel + 1; level < state.counters.length; level += 1) {
+    if (shouldResetDeeperLevel(level, currentLevel, levelDefinitions)) {
+      state.counters[level] = undefined;
+    }
   }
 
   // Initialize any skipped parent levels so legal outline %1.%2.%3. patterns
@@ -163,6 +165,28 @@ function advanceSequence(
   state.lastLevel = currentLevel;
 }
 
+function shouldResetDeeperLevel(
+  level: number,
+  triggeringLevel: number,
+  levelDefinitions: Map<number, NumberingLevelDefinition>,
+): boolean {
+  const restartAfterLevel = levelDefinitions.get(level)?.restartAfterLevel;
+  if (restartAfterLevel === 0) {
+    return false;
+  }
+
+  const defaultRestartLevel = level - 1;
+  const restartIndex = restartAfterLevel !== undefined
+    ? restartAfterLevel - 1
+    : defaultRestartLevel;
+
+  if (restartIndex >= level) {
+    return triggeringLevel <= defaultRestartLevel;
+  }
+
+  return triggeringLevel <= restartIndex;
+}
+
 function getLevelStartAt(
   level: number,
   levelDefinitions: Map<number, NumberingLevelDefinition>,

package/src/runtime/surface-projection.ts

@@ -32,6 +32,7 @@ import type {
   BorderSpec,
   TableBorders,
   TableCellBorders,
+  TableCellMargins,
   TableNode,
   TextMark,
   DrawingFrameNode,
@@ -491,6 +492,10 @@ function createTableBlock(
               .map((region) => `band-${region}`)
               .join(" ")
           : null;
+      const cellPadding = resolveEffectiveCellMargins(
+        cell.margins,
+        resolvedTable.table?.cellMargins,
+      );
       cells.push({
         gridSpan: cell.gridSpan ?? 1,
         verticalMerge: cell.verticalMerge ?? null,
@@ -502,6 +507,10 @@ function createTableBlock(
         ...(cellBorders.borderRight ? { borderRight: cellBorders.borderRight } : {}),
         ...(cellBorders.borderBottom ? { borderBottom: cellBorders.borderBottom } : {}),
         ...(cellBorders.borderLeft ? { borderLeft: cellBorders.borderLeft } : {}),
+        ...(cellPadding.top !== undefined ? { paddingTop: cellPadding.top } : {}),
+        ...(cellPadding.right !== undefined ? { paddingRight: cellPadding.right } : {}),
+        ...(cellPadding.bottom !== undefined ? { paddingBottom: cellPadding.bottom } : {}),
+        ...(cellPadding.left !== undefined ? { paddingLeft: cellPadding.left } : {}),
         // R3.a Phase 2: per-cell text-flow direction copied from canonical
         // TableCellNode. Node-view renders `tbRl` / `btLr` as CSS writing-mode.
         ...(cell.textDirection ? { textDirection: cell.textDirection } : {}),
@@ -626,6 +635,18 @@ function computeTableRowSpans(table: TableNode): Map<string, number> {
   return rowSpans;
 }
 
+function resolveEffectiveCellMargins(
+  direct: TableCellMargins | undefined,
+  tableDefault: TableCellMargins | undefined,
+): TableCellMargins {
+  return {
+    ...(direct?.top !== undefined ? { top: direct.top } : tableDefault?.top !== undefined ? { top: tableDefault.top } : {}),
+    ...(direct?.right !== undefined ? { right: direct.right } : tableDefault?.right !== undefined ? { right: tableDefault.right } : {}),
+    ...(direct?.bottom !== undefined ? { bottom: direct.bottom } : tableDefault?.bottom !== undefined ? { bottom: tableDefault.bottom } : {}),
+    ...(direct?.left !== undefined ? { left: direct.left } : tableDefault?.left !== undefined ? { left: tableDefault.left } : {}),
+  };
+}
+
 /**
  * SOW gap G3 — resolve the final paintable fill for a cell `w:shd`. Precedence
  * matches Word: a concrete `w:fill` (non-"auto") wins; otherwise the theme
@@ -660,6 +681,42 @@ function resolveCellShadingFill(
   return resolved.startsWith("#") ? resolved.slice(1) : resolved;
 }
 
+function resolveSurfaceParagraphShading(
+  shading: ParagraphNode["shading"],
+  themeResolver: ThemeColorResolver | undefined,
+): NonNullable<Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["shading"]> {
+  const resolvedFill = resolveCellShadingFill(shading, themeResolver);
+  return {
+    ...(shading?.val ? { val: shading.val } : {}),
+    ...(shading?.color ? { color: shading.color } : {}),
+    ...(resolvedFill !== undefined
+      ? { fill: resolvedFill }
+      : shading?.fill !== undefined
+        ? { fill: shading.fill }
+        : {}),
+  };
+}
+
+function resolveSurfaceParagraphFormatting(
+  formatting: CanonicalParagraphFormatting,
+  themeResolver: ThemeColorResolver | undefined,
+): CanonicalParagraphFormatting {
+  if (!formatting.shading) {
+    return formatting;
+  }
+  const resolvedFill = resolveCellShadingFill(formatting.shading, themeResolver);
+  if (resolvedFill === undefined && formatting.shading.fill === undefined) {
+    return formatting;
+  }
+  return {
+    ...formatting,
+    shading: {
+      ...formatting.shading,
+      ...(resolvedFill !== undefined ? { fill: resolvedFill } : {}),
+    },
+  };
+}
+
 /**
  * SOW gap G1 — derive relative column widths (percent 0–100, sum 100)
  * from the canonical `gridColumns` (twips). Only populated when the table
@@ -842,6 +899,9 @@ function createParagraphBlock(
   nextCursor: number;
   lockedFragmentIds: string[];
 } {
+  const themeResolver = document.subParts?.canonicalTheme
+    ? new ThemeColorResolver(document.subParts.canonicalTheme)
+    : undefined;
   // L7 Phase 2.9 — viewport bail. When the paragraph is outside the
   // viewport, the returned block is discarded (the outer caller in
   // `createEditorSurfaceSnapshot` replaces it with a placeholder-culled
@@ -871,6 +931,9 @@ function createParagraphBlock(
         { styleId: paragraph.styleId, direct: directParagraphFormatting },
         stylesCatalog,
       );
+  const surfaceResolvedParagraphFormatting = resolvedParagraphFormatting
+    ? resolveSurfaceParagraphFormatting(resolvedParagraphFormatting, themeResolver)
+    : undefined;
 
   // Task 11: compute cascaded marker run formatting (expensive).
   const markerRunProperties =
@@ -905,8 +968,8 @@ function createParagraphBlock(
           },
         }
       : {}),
-    ...(resolvedParagraphFormatting && Object.keys(resolvedParagraphFormatting).length > 0
-      ? { resolvedParagraphFormatting }
+    ...(surfaceResolvedParagraphFormatting && Object.keys(surfaceResolvedParagraphFormatting).length > 0
+      ? { resolvedParagraphFormatting: surfaceResolvedParagraphFormatting }
       : {}),
     ...(paragraph.alignment ? { alignment: paragraph.alignment } : {}),
     ...(paragraph.spacing ? { spacing: paragraph.spacing } : {}),
@@ -915,28 +978,26 @@ function createParagraphBlock(
       : {}),
     ...(paragraph.indentation ? { indentation: paragraph.indentation } : {}),
     ...(paragraph.borders ? { borders: paragraph.borders } : {}),
-    ...(paragraph.shading ? { shading: paragraph.shading } : {}),
+    ...(paragraph.shading
+      ? { shading: resolveSurfaceParagraphShading(paragraph.shading, themeResolver) }
+      : {}),
     ...(paragraph.tabStops && paragraph.tabStops.length > 0
       ? { tabStops: paragraph.tabStops.map((tabStop) => toSurfaceTabStop(tabStop)) }
       : {}),
-    ...(paragraph.keepNext ? { keepNext: true } : {}),
-    ...(paragraph.keepLines ? { keepLines: true } : {}),
-    ...(paragraph.pageBreakBefore ? { pageBreakBefore: true } : {}),
+    ...(paragraph.keepNext !== undefined ? { keepNext: paragraph.keepNext } : {}),
+    ...(paragraph.keepLines !== undefined ? { keepLines: paragraph.keepLines } : {}),
+    ...(paragraph.pageBreakBefore !== undefined ? { pageBreakBefore: paragraph.pageBreakBefore } : {}),
     ...(paragraph.widowControl !== undefined ? { widowControl: paragraph.widowControl } : {}),
     ...(paragraph.outlineLevel !== undefined ? { outlineLevel: paragraph.outlineLevel } : {}),
-    ...(paragraph.bidi ? { bidi: true } : {}),
-    ...(paragraph.suppressLineNumbers ? { suppressLineNumbers: true } : {}),
+    ...(paragraph.bidi !== undefined ? { bidi: paragraph.bidi } : {}),
+    ...(paragraph.suppressLineNumbers !== undefined
+      ? { suppressLineNumbers: paragraph.suppressLineNumbers }
+      : {}),
     segments: [],
   };
   const lockedFragmentIds: string[] = [];
   let cursor = start;
   const children = Array.isArray(paragraph.children) ? paragraph.children : [];
-  // Build once per paragraph block — ThemeColorResolver is a thin wrapper
-  // around CanonicalTheme that applies clrMap remapping. Constructed here so
-  // it is not recreated on every text segment (inner hot loop).
-  const themeResolver = document.subParts?.canonicalTheme
-    ? new ThemeColorResolver(document.subParts.canonicalTheme)
-    : undefined;
 
   for (const child of children) {
     const result = appendInlineSegments(

package/src/runtime/table-schema.ts

@@ -42,6 +42,10 @@ type TableCellAttrs = {
   borderRight?: string | null;
   borderBottom?: string | null;
   borderLeft?: string | null;
+  paddingTop?: number | null;
+  paddingRight?: number | null;
+  paddingBottom?: number | null;
+  paddingLeft?: number | null;
   /** R3.a Phase 2 — per-cell text-flow direction. */
   textDirection?: "lrTb" | "tbRl" | "btLr" | null;
   bandClasses?: string | null;
@@ -83,6 +87,12 @@ function getCellAttrs(dom: HTMLElement): TableCellAttrs {
   const backgroundColor =
     dom.getAttribute("data-cell-background") ?? dom.style.backgroundColor ?? null;
   const verticalAlign = dom.getAttribute("data-vertical-align") as "top" | "center" | "bottom" | null;
+  const readPadding = (name: string): number | null => {
+    const raw = dom.getAttribute(name);
+    if (!raw) return null;
+    const parsed = Number.parseInt(raw, 10);
+    return Number.isFinite(parsed) ? parsed : null;
+  };
 
   return {
     colspan,
@@ -99,6 +109,10 @@ function getCellAttrs(dom: HTMLElement): TableCellAttrs {
     borderRight: dom.getAttribute("data-border-right"),
     borderBottom: dom.getAttribute("data-border-bottom"),
     borderLeft: dom.getAttribute("data-border-left"),
+    paddingTop: readPadding("data-cell-padding-top"),
+    paddingRight: readPadding("data-cell-padding-right"),
+    paddingBottom: readPadding("data-cell-padding-bottom"),
+    paddingLeft: readPadding("data-cell-padding-left"),
     bandClasses: dom.getAttribute("data-band-classes"),
   };
 }
@@ -133,6 +147,10 @@ function setCellDomAttrs(nodeAttrs: TableCellAttrs, className: string): Record<s
   if (nodeAttrs.borderRight) attrs["data-border-right"] = nodeAttrs.borderRight;
   if (nodeAttrs.borderBottom) attrs["data-border-bottom"] = nodeAttrs.borderBottom;
   if (nodeAttrs.borderLeft) attrs["data-border-left"] = nodeAttrs.borderLeft;
+  if (typeof nodeAttrs.paddingTop === "number") attrs["data-cell-padding-top"] = String(nodeAttrs.paddingTop);
+  if (typeof nodeAttrs.paddingRight === "number") attrs["data-cell-padding-right"] = String(nodeAttrs.paddingRight);
+  if (typeof nodeAttrs.paddingBottom === "number") attrs["data-cell-padding-bottom"] = String(nodeAttrs.paddingBottom);
+  if (typeof nodeAttrs.paddingLeft === "number") attrs["data-cell-padding-left"] = String(nodeAttrs.paddingLeft);
   if (nodeAttrs.bandClasses) {
     attrs["data-band-classes"] = nodeAttrs.bandClasses;
     // Concatenate band classes onto the base `class` so Tailwind's @apply resolves at parse time.
@@ -151,6 +169,10 @@ function setCellDomAttrs(nodeAttrs: TableCellAttrs, className: string): Record<s
   if (bBottom) styles.push(`border-bottom: ${bBottom}`);
   const bLeft = safeCssBorder(nodeAttrs.borderLeft);
   if (bLeft) styles.push(`border-left: ${bLeft}`);
+  if (typeof nodeAttrs.paddingTop === "number") styles.push(`padding-top: ${nodeAttrs.paddingTop / 20}pt`);
+  if (typeof nodeAttrs.paddingRight === "number") styles.push(`padding-right: ${nodeAttrs.paddingRight / 20}pt`);
+  if (typeof nodeAttrs.paddingBottom === "number") styles.push(`padding-bottom: ${nodeAttrs.paddingBottom / 20}pt`);
+  if (typeof nodeAttrs.paddingLeft === "number") styles.push(`padding-left: ${nodeAttrs.paddingLeft / 20}pt`);
   if (styles.length > 0) attrs.style = styles.join("; ");
 
   return attrs;
@@ -190,6 +212,10 @@ const tableCellSpecAttrs = {
   borderRight: { default: null },
   borderBottom: { default: null },
   borderLeft: { default: null },
+  paddingTop: { default: null },
+  paddingRight: { default: null },
+  paddingBottom: { default: null },
+  paddingLeft: { default: null },
   /**
    * R3.a Phase 2 — per-cell text-flow direction copied from
    * `TableCellNode.textDirection` ("lrTb" | "tbRl" | "btLr"). Node-view maps

package/src/ui/WordReviewEditor.tsx

@@ -218,6 +218,7 @@ import {
   resolveChromePreset,
   resolveChromeVisibilityForPreset,
 } from "../ui-tailwind/chrome/chrome-preset-model.ts";
+import { TwRuntimeReplDialog } from "../ui-tailwind/chrome/tw-runtime-repl-dialog.tsx";
 import { createRuntimeCollabSync } from "../runtime/collab/runtime-collab-sync.ts";
 import {
   clearLocalCursorState,
@@ -689,6 +690,7 @@ export function __createWordReviewEditorRefBridge(
         color,
       });
     },
+    clearHighlight: (options) => runtime.clearHighlight(options),
     setAlignment: (alignment) => {
       applyRuntimeFormattingOperation(runtime, {
         type: "set-alignment",
@@ -1237,6 +1239,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
     const surfaceRef = useRef<TwProseMirrorSurfaceRef | null>(null);
     const selectionToolbarElementRef = useRef<HTMLDivElement | null>(null);
     const shellRef = useRef<HTMLDivElement | null>(null);
+    const editorRefForRepl = useRef<WordReviewEditorRef | null>(null);
     const lastSelectionToolbarKeyRef = useRef<string | null>(null);
     const lastAnnouncedErrorIdRef = useRef<string | null>(null);
     const scopeMetadataResolverRef = useRef<ScopeMetadataResolver | null>(null);
@@ -1817,6 +1820,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
             color,
           });
         },
+        clearHighlight: (options) => activeRuntime.clearHighlight(options),
         setAlignment: (alignment) => {
           applyRuntimeFormattingOperation(activeRuntime, {
             type: "set-alignment",
@@ -2304,6 +2308,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         ...projections,
       }) as WordReviewEditorRef;
         refHolder.current = refValue;
+        editorRefForRepl.current = refValue;
         return refValue;
       },
       [
@@ -3368,6 +3373,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
     );
 
     return (
+      <>
       <EditorShellView
         shellRef={shellRef}
         documentId={documentId}
@@ -3486,6 +3492,23 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         onScopeRejectSuggestionGroup={(payload) => {
           applySuggestionGroupAction(activeRuntime, payload.groupId, "reject");
         }}
+        mediaPreviews={mediaPreviews}
+        onActivateFloatingImage={(payload) => {
+          activeRuntime.focus();
+          applyRuntimeSelection(activeRuntime, {
+            anchor: payload.from,
+            head: payload.from,
+            isCollapsed: true,
+            activeRange: {
+              kind: "node",
+              at: payload.from,
+              assoc: 1,
+            },
+            ...(payload.storyTarget.kind === "main"
+              ? {}
+              : { storyTarget: payload.storyTarget }),
+          });
+        }}
         onDeselectObject={() => activeRuntime.deselectObject()}
         onScopeAskAgent={(payload) => {
           // Resolve the scope's anchor + story from the facet's card
@@ -3522,6 +3545,8 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
           onEventRef.current?.(eventPayload);
         }}
       />
+      <TwRuntimeReplDialog runtime={activeRuntime} editorRef={editorRefForRepl} />
+      </>
     );
   },
 );

package/src/ui/editor-runtime-boundary.ts

@@ -1071,6 +1071,7 @@ function createLoadingRuntimeBridge(input: {
     rejectChange: () => undefined,
     acceptAllChanges: () => undefined,
     rejectAllChanges: () => undefined,
+    clearHighlight: () => undefined,
     openStory: () => false,
     closeStory: () => undefined,
     getActiveStory: () => input.snapshot.activeStory,

package/src/ui/editor-shell-view.tsx

@@ -27,6 +27,7 @@ import type { EditorCommandBag } from "./editor-command-bag.ts";
 import type { ReviewRailTab } from "../ui-tailwind/review/tw-review-rail.tsx";
 import { TwReviewWorkspace } from "../ui-tailwind/tw-review-workspace.tsx";
 import type { EditorViewStateSnapshot } from "../api/public-types.ts";
+import type { MediaPreviewDescriptor } from "../ui-tailwind/editor-surface/pm-state-from-snapshot.ts";
 
 export interface EditorShellViewProps {
   shellRef: React.RefObject<HTMLDivElement | null>;
@@ -129,6 +130,13 @@ export interface EditorShellViewProps {
   onScopeAskAgent?: (payload: { scopeId: string }) => void;
   /** N6 — deselects the currently grabbed object; wired to runtime.deselectObject(). */
   onDeselectObject?: () => void;
+  mediaPreviews?: Record<string, MediaPreviewDescriptor>;
+  onActivateFloatingImage?: (payload: {
+    mediaId: string;
+    from: number;
+    to: number;
+    storyTarget: import("../api/public-types.ts").EditorStoryTarget;
+  }) => void;
 }
 
 export function EditorShellView(props: EditorShellViewProps) {