@beyondwork/docx-react-component 1.0.42 → 1.0.45

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

@@ -268,7 +268,7 @@ function buildPMBlocks(
     } else if (block.kind === "sdt_block") {
       nodes.push(buildSdtBlock(block, mediaPreviews, showUnsupportedObjectPreviews));
     } else {
-      nodes.push(buildOpaqueBlock(block));
+      nodes.push(buildOpaqueBlock(block, showUnsupportedObjectPreviews));
     }
   }
 
@@ -366,7 +366,13 @@ function buildParagraph(
       indentRight: paragraphLayout.indentation?.right ?? null,
       indentFirstLine: paragraphLayout.indentation?.firstLine ?? null,
       indentHanging: paragraphLayout.indentation?.hanging ?? null,
-      numberingMarkerWidth: paragraphLayout.markerLane?.width ?? null,
+      numberingMarkerWidth:
+        paragraphLayout.markerLane?.width ??
+        paragraphLayout.indentation?.hanging ??
+        (paragraphLayout.indentation?.firstLine !== undefined &&
+        paragraphLayout.indentation.firstLine < 0
+          ? Math.abs(paragraphLayout.indentation.firstLine)
+          : null),
       numberingMarkerJustification: paragraphLayout.markerJustification ?? null,
       numberingMarkerRunProperties: block.resolvedNumbering?.markerRunProperties ?? null,
       shadingFill: block.shading?.fill ?? cascade?.shading?.fill ?? null,
@@ -453,7 +459,7 @@ function buildInlineContent(
       }
 
     case "opaque_inline":
-      return [buildOpaqueInlineOrComplexAtom(segment, showUnsupportedObjectPreviews)];
+      return [buildOpaqueInlineOrComplexAtom(segment, mediaPreviews, showUnsupportedObjectPreviews)];
 
     case "note_ref": {
       const text = editorSchema.text(
@@ -602,6 +608,7 @@ const UNSUPPORTED_COMPLEX_PREVIEW_LABELS = new Set<string>([
  */
 function buildOpaqueInlineOrComplexAtom(
   segment: Extract<import("../../api/public-types").SurfaceInlineSegment, { kind: "opaque_inline" }>,
+  mediaPreviews: Record<string, MediaPreviewDescriptor>,
   showUnsupportedObjectPreviews: boolean,
 ): PMNode {
   const label = segment.label;
@@ -618,11 +625,30 @@ function buildOpaqueInlineOrComplexAtom(
     });
   }
 
-  if (showUnsupportedObjectPreviews && label === "Embedded chart") {
-    return editorSchema.nodes.chart_atom.create({ detail });
+  // Bitmap-backed complex objects always upgrade to the typed atom so the
+  // reviewer sees Word's own cached rendering regardless of the debug-preview
+  // flag.  The flag still gates the badge-only path for shape/wordart/vml
+  // families (below) which are decoration-weight.  Chart and SmartArt are
+  // *always* rendered as typed atoms regardless of flag — a silent quiet
+  // marker over a chart leaves the reviewer with no signal that data is
+  // missing, which is worse than the small cost of an always-visible chip.
+  const previewSrc = segment.previewMediaId
+    ? mediaPreviews[segment.previewMediaId]?.src ?? null
+    : null;
+
+  if (label === "Embedded chart") {
+    return editorSchema.nodes.chart_atom.create({
+      previewMediaId: segment.previewMediaId ?? null,
+      previewSrc,
+      detail,
+    });
   }
-  if (showUnsupportedObjectPreviews && label === "SmartArt diagram") {
-    return editorSchema.nodes.smartart_atom.create({ detail });
+  if (label === "SmartArt diagram") {
+    return editorSchema.nodes.smartart_atom.create({
+      previewMediaId: segment.previewMediaId ?? null,
+      previewSrc,
+      detail,
+    });
   }
   if (showUnsupportedObjectPreviews && (label === "Drawing shape" || label === "Text box")) {
     const textMatch = /(?:Text content|Content): "([^"]+)"/.exec(detail);
@@ -672,12 +698,37 @@ function buildOpaqueInlineOrComplexAtom(
 
 function buildOpaqueBlock(
   block: Extract<SurfaceBlockSnapshot, { kind: "opaque_block" }>,
+  showUnsupportedObjectPreviews: boolean,
 ): PMNode {
+  // Viewport-culled placeholder: emit a single paragraph with ZWSP text so
+  // PM position math matches the original block span.
+  // See docs/plans/lane-2-render-performance.md Task 2.2.3.
+  const placeholderSize = block.placeholderSize ?? null;
+  if (placeholderSize !== null) {
+    const targetSize = placeholderSize as number;
+    if (targetSize <= 2) {
+      // Edge case: bare empty paragraph claims exactly 2 positions.
+      return editorSchema.nodes.paragraph.create(
+        { blockId: block.blockId, placeholderCulled: true },
+        Fragment.empty,
+      );
+    }
+    // General case: one paragraph with (targetSize - 2) ZWSP chars so the
+    // total PM positions = 1 (open) + (targetSize - 2) (text) + 1 (close) = targetSize.
+    const filler = "\u200b".repeat(targetSize - 2);
+    return editorSchema.nodes.paragraph.create(
+      { blockId: block.blockId, placeholderCulled: true },
+      editorSchema.text(filler),
+    );
+  }
+
+  // Real (non-placeholder) opaque_block: existing behaviour unchanged.
   return editorSchema.nodes.opaque_block.create({
     fragmentId: block.fragmentId,
     warningId: block.warningId,
     label: block.label,
     detail: block.detail,
+    presentation: showUnsupportedObjectPreviews ? "callout" : "quiet-marker",
   });
 }
 

package/src/ui-tailwind/editor-surface/surface-build-keys.ts

@@ -23,6 +23,7 @@ export function createSurfaceDocumentBuildKey(input: {
   mediaPreviewKey: string;
   showUnsupportedObjectPreviews?: boolean;
 }): string {
+  const vp = input.surface?.viewportBlockRange ?? null;
   return JSON.stringify({
     surfaceIdentity:
       input.surface === undefined || input.surface === null
@@ -31,6 +32,7 @@ export function createSurfaceDocumentBuildKey(input: {
     activeStory: input.activeStory,
     mediaPreviewKey: input.mediaPreviewKey,
     showUnsupportedObjectPreviews: input.showUnsupportedObjectPreviews ?? false,
+    viewport: vp ? `${vp.start}:${vp.end}` : "full",
   });
 }
 

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

@@ -0,0 +1,265 @@
+import type React from "react";
+
+import type {
+  SurfaceBlockSnapshot,
+  SurfaceTextMark,
+} from "../../api/public-types.ts";
+import type { CanonicalRunFormatting } from "../../model/canonical-document.ts";
+
+// ---------------------------------------------------------------------------
+// Pure helpers shared by `tw-page-block-view` (body) and `tw-region-block-
+// renderer` (header / footer / footnote / endnote bands).  Extracted in P8.4
+// so per-page regions reuse body typography verbatim — indent/margin/line-
+// height/marker geometry stay identical across all regions.
+// ---------------------------------------------------------------------------
+
+export const HEX_COLOR_RE = /^[0-9A-Fa-f]{3,8}$/;
+export const SAFE_FONT_RE = /^[A-Za-z0-9 ,\-'"]+$/;
+export const SAFE_ALIGNMENT = new Set([
+  "left",
+  "center",
+  "right",
+  "justify",
+  "start",
+  "end",
+]);
+
+export function safeHexColor(raw: string | null | undefined): string | null {
+  if (!raw || raw === "auto") return null;
+  return HEX_COLOR_RE.test(raw) ? `#${raw}` : null;
+}
+
+/** Resolve heading level from styleId or outlineLevel (outlineLevel 0 = Heading 1). */
+export function resolveHeadingLevel(
+  styleId?: string,
+  outlineLevel?: number,
+): number | null {
+  if (styleId) {
+    const normalized = styleId.toLowerCase();
+    const compact = normalized.replace(/[\s_-]+/g, "");
+    const headingMatch = /^heading([1-6])$/.exec(compact);
+    if (headingMatch) {
+      return Number.parseInt(headingMatch[1], 10);
+    }
+    if (compact === "title") return 1;
+    if (compact === "subtitle") return 2;
+    if (compact === "tocheading") return 1;
+    if (/^(appendix|schedule|annex|exhibit|attachment)(heading|title)$/.test(compact)) return 2;
+  }
+  if (
+    typeof outlineLevel === "number" &&
+    Number.isInteger(outlineLevel) &&
+    outlineLevel >= 0 &&
+    outlineLevel <= 5
+  ) {
+    return outlineLevel + 1;
+  }
+  return null;
+}
+
+export function resolveMarkerJustificationCss(raw: string | undefined): string {
+  switch (raw) {
+    case "left":
+      return "flex-start";
+    case "center":
+      return "center";
+    case "right":
+    case "both":
+    case "distribute":
+    default:
+      return "flex-end";
+  }
+}
+
+/** Build CSSProperties for a paragraph block from spacing/indent/alignment. */
+export function buildParagraphStyle(
+  block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
+): React.CSSProperties {
+  const style: React.CSSProperties = {};
+
+  // Alignment — direct takes precedence over resolvedParagraphFormatting
+  const rawAlignment = block.alignment ?? block.resolvedParagraphFormatting?.alignment;
+  const safeAlign = rawAlignment === "both" ? "justify" : rawAlignment;
+  if (safeAlign && SAFE_ALIGNMENT.has(safeAlign)) {
+    style.textAlign = safeAlign as React.CSSProperties["textAlign"];
+  }
+
+  // Spacing
+  const spacingBefore =
+    block.spacing?.before ?? block.resolvedParagraphFormatting?.spacing?.before;
+  const spacingAfter =
+    block.spacing?.after ?? block.resolvedParagraphFormatting?.spacing?.after;
+  const lineSpacing =
+    block.spacing?.line ?? block.resolvedParagraphFormatting?.spacing?.line;
+  const lineRule =
+    block.spacing?.lineRule ?? block.resolvedParagraphFormatting?.spacing?.lineRule;
+
+  if (spacingBefore != null) {
+    style.marginTop = `${spacingBefore / 20}pt`;
+  }
+  if (spacingAfter != null) {
+    style.marginBottom = `${spacingAfter / 20}pt`;
+  }
+  if (lineSpacing && lineRule === "auto") {
+    style.lineHeight = String(lineSpacing / 240);
+  } else if (lineSpacing && lineRule === "exact") {
+    style.lineHeight = `${lineSpacing / 20}pt`;
+  } else if (lineSpacing && lineRule === "atLeast") {
+    style.minHeight = `${lineSpacing / 20}pt`;
+  }
+
+  // Indentation
+  const indentLeft =
+    block.indentation?.left ?? block.resolvedParagraphFormatting?.indentation?.left;
+  const indentRight =
+    block.indentation?.right ?? block.resolvedParagraphFormatting?.indentation?.right;
+  const indentFirstLine =
+    block.indentation?.firstLine ?? block.resolvedParagraphFormatting?.indentation?.firstLine;
+  const indentHanging =
+    block.indentation?.hanging ?? block.resolvedParagraphFormatting?.indentation?.hanging;
+
+  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;
+  const shadingColor = safeHexColor(shadingFill);
+  if (shadingColor) style.backgroundColor = shadingColor;
+
+  // Page break visual indicator
+  if (block.pageBreakBefore) {
+    style.borderTop = "2px dashed rgba(0,0,0,0.1)";
+    style.paddingTop = "8px";
+    style.marginTop = "16px";
+  }
+
+  return style;
+}
+
+/** Build CSSProperties for the numbering marker span. */
+export function buildMarkerStyle(
+  prefix: string,
+  suffix: "tab" | "space" | "nothing" | undefined,
+  markerRunProperties: CanonicalRunFormatting | undefined,
+  markerWidth: number | undefined,
+  markerJustification: string | undefined,
+): React.CSSProperties {
+  const style: React.CSSProperties = {
+    fontVariantNumeric: "tabular-nums",
+    justifyContent: resolveMarkerJustificationCss(markerJustification),
+  };
+
+  if (markerRunProperties) {
+    if (markerRunProperties.bold) style.fontWeight = "bold";
+    if (markerRunProperties.italic) style.fontStyle = "italic";
+    if (markerRunProperties.underline && markerRunProperties.underline !== "none") {
+      style.textDecoration = "underline";
+    }
+    if (typeof markerRunProperties.fontSizeHalfPoints === "number") {
+      style.fontSize = `${markerRunProperties.fontSizeHalfPoints / 2}pt`;
+    }
+    const colorHex = markerRunProperties.colorHex;
+    if (colorHex && colorHex !== "auto") {
+      style.color = `#${colorHex.toLowerCase()}`;
+    }
+    const family = markerRunProperties.fontFamilyAscii ?? markerRunProperties.fontFamily;
+    if (family && SAFE_FONT_RE.test(family)) {
+      style.fontFamily = family;
+    }
+  } else {
+    style.color = "var(--color-text-tertiary)";
+    style.fontFamily = "var(--font-legal-sans)";
+  }
+
+  const hasResolvedMarkerWidth = typeof markerWidth === "number" && markerWidth > 0;
+  if (hasResolvedMarkerWidth) {
+    // 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 {
+    const fallbackMinWidth = Math.min(Math.max(prefix.length + 1, 4), 14);
+    const fallbackMarginRight =
+      suffix === "nothing" ? "0.25rem" : suffix === "space" ? "0.5rem" : "0.75rem";
+    style.minWidth = `${fallbackMinWidth}ch`;
+    style.marginRight = fallbackMarginRight;
+  }
+
+  return style;
+}
+
+/** Build CSSProperties for a text segment from marks and markAttrs. */
+export function buildSegmentStyle(
+  marks: SurfaceTextMark[] | undefined,
+  markAttrs?: {
+    fontSize?: number;
+    textColor?: string;
+    fontFamily?: string;
+    backgroundColor?: string;
+    charSpacing?: number;
+  },
+): React.CSSProperties {
+  const style: React.CSSProperties = {};
+
+  if (marks) {
+    if (marks.includes("bold")) style.fontWeight = "bold";
+    if (marks.includes("italic")) style.fontStyle = "italic";
+    if (marks.includes("underline")) style.textDecoration = "underline";
+    if (marks.includes("strikethrough") || marks.includes("doubleStrikethrough")) {
+      style.textDecoration = marks.includes("underline")
+        ? "underline line-through"
+        : "line-through";
+    }
+    if (marks.includes("superscript")) {
+      style.verticalAlign = "super";
+      style.fontSize = "smaller";
+    }
+    if (marks.includes("subscript")) {
+      style.verticalAlign = "sub";
+      style.fontSize = "smaller";
+    }
+    if (marks.includes("allCaps")) style.textTransform = "uppercase";
+    if (marks.includes("smallCaps")) style.fontVariant = "small-caps";
+    if (marks.includes("vanish")) style.display = "none";
+  }
+
+  if (markAttrs) {
+    if (markAttrs.fontSize) style.fontSize = `${markAttrs.fontSize}pt`;
+    if (markAttrs.textColor) style.color = markAttrs.textColor;
+    if (markAttrs.fontFamily && SAFE_FONT_RE.test(markAttrs.fontFamily)) {
+      style.fontFamily = markAttrs.fontFamily;
+    }
+    if (markAttrs.backgroundColor) style.backgroundColor = markAttrs.backgroundColor;
+    if (markAttrs.charSpacing) style.letterSpacing = `${markAttrs.charSpacing}px`;
+  }
+
+  return style;
+}
+
+export function hasStyleEntries(style: React.CSSProperties): boolean {
+  return Object.keys(style).length > 0;
+}
+
+export function headingClassList(level: number): string[] {
+  switch (level) {
+    case 1:
+      return ["text-3xl", "font-semibold", "tracking-tight", "leading-tight"];
+    case 2:
+      return ["text-2xl", "font-semibold", "tracking-tight"];
+    case 3:
+      return ["text-xl", "font-medium"];
+    case 4:
+      return ["text-lg", "font-medium"];
+    case 5:
+      return ["text-base", "font-semibold", "uppercase", "tracking-[0.12em]"];
+    case 6:
+      return ["text-sm", "font-semibold", "uppercase", "tracking-[0.16em]"];
+    default:
+      return [];
+  }
+}

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

@@ -3,243 +3,15 @@ import React from "react";
 import type {
   SurfaceBlockSnapshot,
   SurfaceInlineSegment,
-  SurfaceTextMark,
 } from "../../api/public-types.ts";
-import type { CanonicalRunFormatting } from "../../model/canonical-document.ts";
-
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-
-const HEX_COLOR_RE = /^[0-9A-Fa-f]{3,8}$/;
-const SAFE_FONT_RE = /^[A-Za-z0-9 ,\-'"]+$/;
-const SAFE_ALIGNMENT = new Set(["left", "center", "right", "justify", "start", "end"]);
-
-// ---------------------------------------------------------------------------
-// Helper utilities (mirror pm-schema.ts helpers)
-// ---------------------------------------------------------------------------
-
-function safeHexColor(raw: string | null | undefined): string | null {
-  if (!raw || raw === "auto") return null;
-  return HEX_COLOR_RE.test(raw) ? `#${raw}` : null;
-}
-
-/** Resolve heading level from styleId or outlineLevel (outlineLevel 0 = Heading 1). */
-function resolveHeadingLevel(styleId?: string, outlineLevel?: number): number | null {
-  if (styleId) {
-    const normalized = styleId.toLowerCase();
-    const compact = normalized.replace(/[\s_-]+/g, "");
-    const headingMatch = /^heading([1-6])$/.exec(compact);
-    if (headingMatch) {
-      return Number.parseInt(headingMatch[1], 10);
-    }
-    if (compact === "title") return 1;
-    if (compact === "subtitle") return 2;
-    if (compact === "tocheading") return 1;
-    if (/^(appendix|schedule|annex|exhibit|attachment)(heading|title)$/.test(compact)) return 2;
-  }
-  if (
-    typeof outlineLevel === "number" &&
-    Number.isInteger(outlineLevel) &&
-    outlineLevel >= 0 &&
-    outlineLevel <= 5
-  ) {
-    return outlineLevel + 1;
-  }
-  return null;
-}
-
-function resolveMarkerJustificationCss(raw: string | undefined): string {
-  switch (raw) {
-    case "left":
-      return "flex-start";
-    case "center":
-      return "center";
-    case "right":
-    case "both":
-    case "distribute":
-    default:
-      return "flex-end";
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Style builders
-// ---------------------------------------------------------------------------
-
-/** Build CSSProperties for a paragraph block from spacing/indent/alignment. */
-function buildParagraphStyle(
-  block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
-): React.CSSProperties {
-  const style: React.CSSProperties = {};
-
-  // Alignment — direct takes precedence over resolvedParagraphFormatting
-  const rawAlignment = block.alignment ?? block.resolvedParagraphFormatting?.alignment;
-  const safeAlign = rawAlignment === "both" ? "justify" : rawAlignment;
-  if (safeAlign && SAFE_ALIGNMENT.has(safeAlign)) {
-    style.textAlign = safeAlign as React.CSSProperties["textAlign"];
-  }
-
-  // Spacing
-  const spacingBefore =
-    block.spacing?.before ?? block.resolvedParagraphFormatting?.spacing?.before;
-  const spacingAfter =
-    block.spacing?.after ?? block.resolvedParagraphFormatting?.spacing?.after;
-  const lineSpacing =
-    block.spacing?.line ?? block.resolvedParagraphFormatting?.spacing?.line;
-  const lineRule =
-    block.spacing?.lineRule ?? block.resolvedParagraphFormatting?.spacing?.lineRule;
-
-  if (spacingBefore != null) {
-    style.marginTop = `${spacingBefore / 20}pt`;
-  }
-  if (spacingAfter != null) {
-    style.marginBottom = `${spacingAfter / 20}pt`;
-  }
-  if (lineSpacing && lineRule === "auto") {
-    style.lineHeight = String(lineSpacing / 240);
-  } else if (lineSpacing && lineRule === "exact") {
-    style.lineHeight = `${lineSpacing / 20}pt`;
-  } else if (lineSpacing && lineRule === "atLeast") {
-    style.minHeight = `${lineSpacing / 20}pt`;
-  }
-
-  // Indentation
-  const indentLeft =
-    block.indentation?.left ?? block.resolvedParagraphFormatting?.indentation?.left;
-  const indentRight =
-    block.indentation?.right ?? block.resolvedParagraphFormatting?.indentation?.right;
-  const indentFirstLine =
-    block.indentation?.firstLine ?? block.resolvedParagraphFormatting?.indentation?.firstLine;
-  const indentHanging =
-    block.indentation?.hanging ?? block.resolvedParagraphFormatting?.indentation?.hanging;
-
-  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;
-  const shadingColor = safeHexColor(shadingFill);
-  if (shadingColor) style.backgroundColor = shadingColor;
-
-  // Page break visual indicator
-  if (block.pageBreakBefore) {
-    style.borderTop = "2px dashed rgba(0,0,0,0.1)";
-    style.paddingTop = "8px";
-    style.marginTop = "16px";
-  }
-
-  return style;
-}
-
-/** Build CSSProperties for the numbering marker span. */
-function buildMarkerStyle(
-  prefix: string,
-  suffix: "tab" | "space" | "nothing" | undefined,
-  markerRunProperties: CanonicalRunFormatting | undefined,
-  markerWidth: number | undefined,
-  markerJustification: string | undefined,
-): React.CSSProperties {
-  const style: React.CSSProperties = {
-    fontVariantNumeric: "tabular-nums",
-    justifyContent: resolveMarkerJustificationCss(markerJustification),
-  };
-
-  if (markerRunProperties) {
-    if (markerRunProperties.bold) style.fontWeight = "bold";
-    if (markerRunProperties.italic) style.fontStyle = "italic";
-    if (markerRunProperties.underline && markerRunProperties.underline !== "none") {
-      style.textDecoration = "underline";
-    }
-    if (typeof markerRunProperties.fontSizeHalfPoints === "number") {
-      style.fontSize = `${markerRunProperties.fontSizeHalfPoints / 2}pt`;
-    }
-    const colorHex = markerRunProperties.colorHex;
-    if (colorHex && colorHex !== "auto") {
-      style.color = `#${colorHex.toLowerCase()}`;
-    }
-    const family = markerRunProperties.fontFamilyAscii ?? markerRunProperties.fontFamily;
-    if (family && SAFE_FONT_RE.test(family)) {
-      style.fontFamily = family;
-    }
-  } else {
-    style.color = "var(--color-text-tertiary)";
-    style.fontFamily = "var(--font-legal-sans)";
-  }
-
-  const hasResolvedMarkerWidth = typeof markerWidth === "number" && markerWidth > 0;
-  if (hasResolvedMarkerWidth) {
-    // 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 {
-    const fallbackMinWidth = Math.min(Math.max(prefix.length + 1, 4), 14);
-    const fallbackMarginRight =
-      suffix === "nothing" ? "0.25rem" : suffix === "space" ? "0.5rem" : "0.75rem";
-    style.minWidth = `${fallbackMinWidth}ch`;
-    style.marginRight = fallbackMarginRight;
-  }
-
-  return style;
-}
-
-/** Build CSSProperties for a text segment from marks and markAttrs. */
-function buildSegmentStyle(
-  marks: SurfaceTextMark[] | undefined,
-  markAttrs?: {
-    fontSize?: number;
-    textColor?: string;
-    fontFamily?: string;
-    backgroundColor?: string;
-    charSpacing?: number;
-  },
-): React.CSSProperties {
-  const style: React.CSSProperties = {};
-
-  if (marks) {
-    if (marks.includes("bold")) style.fontWeight = "bold";
-    if (marks.includes("italic")) style.fontStyle = "italic";
-    if (marks.includes("underline")) style.textDecoration = "underline";
-    if (marks.includes("strikethrough") || marks.includes("doubleStrikethrough")) {
-      style.textDecoration = marks.includes("underline")
-        ? "underline line-through"
-        : "line-through";
-    }
-    if (marks.includes("superscript")) {
-      style.verticalAlign = "super";
-      style.fontSize = "smaller";
-    }
-    if (marks.includes("subscript")) {
-      style.verticalAlign = "sub";
-      style.fontSize = "smaller";
-    }
-    if (marks.includes("allCaps")) style.textTransform = "uppercase";
-    if (marks.includes("smallCaps")) style.fontVariant = "small-caps";
-    if (marks.includes("vanish")) style.display = "none";
-  }
-
-  if (markAttrs) {
-    if (markAttrs.fontSize) style.fontSize = `${markAttrs.fontSize}pt`;
-    if (markAttrs.textColor) style.color = markAttrs.textColor;
-    if (markAttrs.fontFamily && SAFE_FONT_RE.test(markAttrs.fontFamily)) {
-      style.fontFamily = markAttrs.fontFamily;
-    }
-    if (markAttrs.backgroundColor) style.backgroundColor = markAttrs.backgroundColor;
-    if (markAttrs.charSpacing) style.letterSpacing = `${markAttrs.charSpacing}px`;
-  }
-
-  return style;
-}
-
-function hasStyleEntries(style: React.CSSProperties): boolean {
-  return Object.keys(style).length > 0;
-}
+import {
+  buildMarkerStyle,
+  buildParagraphStyle,
+  buildSegmentStyle,
+  hasStyleEntries,
+  headingClassList,
+  resolveHeadingLevel,
+} from "./tw-page-block-view.helpers.ts";
 
 // ---------------------------------------------------------------------------
 // Segment renderer
@@ -409,25 +181,6 @@ function ParagraphBlock({
   );
 }
 
-function headingClassList(level: number): string[] {
-  switch (level) {
-    case 1:
-      return ["text-3xl", "font-semibold", "tracking-tight", "leading-tight"];
-    case 2:
-      return ["text-2xl", "font-semibold", "tracking-tight"];
-    case 3:
-      return ["text-xl", "font-medium"];
-    case 4:
-      return ["text-lg", "font-medium"];
-    case 5:
-      return ["text-base", "font-semibold", "uppercase", "tracking-[0.12em]"];
-    case 6:
-      return ["text-sm", "font-semibold", "uppercase", "tracking-[0.16em]"];
-    default:
-      return [];
-  }
-}
-
 /** Render a table block as <table>. */
 function TableBlock({
   block,