@beyondwork/docx-react-component 1.0.38 → 1.0.39

package/src/runtime/render/render-kernel.ts

@@ -14,6 +14,7 @@
  */
 
 import { MAIN_STORY_TARGET } from "../../core/selection/mapping.ts";
+import { recordPerfSample } from "../../ui-tailwind/editor-surface/perf-probe.ts";
 import type { EditorStoryTarget } from "../../api/public-types";
 import type {
   PublicPageNode,
@@ -165,6 +166,7 @@ export function createRenderKernel(input: CreateRenderKernelInput): RenderKernel
   }
 
   function buildFrame(options?: RenderFrameQueryOptions): RenderFrame {
+    const t0 = typeof performance !== "undefined" ? performance.now() : 0;
     const activeStory = options?.story ?? getActiveStory();
     const measurementFidelity = facet.getMeasurementFidelity();
     const rawPages = facet.getPages();
@@ -211,7 +213,7 @@ export function createRenderKernel(input: CreateRenderKernelInput): RenderKernel
       ? Number(extractRevisionFromPageId(filteredPages[0].pageId))
       : 0;
 
-    return {
+    const frame: RenderFrame = {
       revision: Number.isFinite(revision) ? revision : 0,
       measurementFidelity,
       activeStory,
@@ -220,6 +222,8 @@ export function createRenderKernel(input: CreateRenderKernelInput): RenderKernel
       decorationIndex,
       anchorIndex,
     };
+    if (t0 > 0) recordPerfSample("render.frame_build", performance.now() - t0);
+    return frame;
   }
 
   return {

package/src/runtime/resolved-numbering-geometry.ts

@@ -1,4 +1,5 @@
 import type {
+  CanonicalRunFormatting,
   NumberingCatalog,
   NumberingLevelDefinition,
   NumberingLevelOverrideDefinition,
@@ -27,6 +28,7 @@ export interface ResolvedNumberingGeometry {
     firstLine?: number;
     hanging?: number;
   };
+  markerRunProperties?: CanonicalRunFormatting;
 }
 
 export interface ResolvedNumberingDefinitionSet {
@@ -67,7 +69,7 @@ export function resolveNumberingDefinitionSet(
     abstractDefinition,
     effectiveLevels,
     effectiveLevel,
-    geometry: resolveNumberingGeometry(effectiveLevel.paragraphGeometry, paragraph),
+    geometry: resolveNumberingGeometry(effectiveLevel.paragraphGeometry, paragraph, effectiveLevel.runProperties),
   };
 }
 
@@ -110,6 +112,8 @@ function mergeLevelDefinition(
     base?.paragraphGeometry,
     override?.paragraphGeometry,
   );
+  const runProperties = override?.runProperties ?? base?.runProperties;
+  const restartAfterLevel = override?.restartAfterLevel ?? base?.restartAfterLevel;
 
   return {
     level,
@@ -124,6 +128,8 @@ function mergeLevelDefinition(
       : {}),
     ...(override?.suffix ?? base?.suffix ? { suffix: override?.suffix ?? base?.suffix } : {}),
     ...(paragraphGeometry ? { paragraphGeometry } : {}),
+    ...(runProperties ? { runProperties } : {}),
+    ...(restartAfterLevel !== undefined ? { restartAfterLevel } : {}),
   };
 }
 
@@ -179,6 +185,7 @@ function mergeLevelParagraphGeometry(
 function resolveNumberingGeometry(
   levelGeometry: NumberingLevelParagraphGeometry | undefined,
   paragraph: Pick<ParagraphNode, "spacing" | "indentation" | "tabStops"> | undefined,
+  levelRunProperties: CanonicalRunFormatting | undefined,
 ): ResolvedNumberingGeometry {
   const spacing = mergeParagraphSpacing(levelGeometry?.spacing, paragraph?.spacing);
   const indentation = mergeParagraphIndentation(levelGeometry?.indentation, paragraph?.indentation);
@@ -197,6 +204,7 @@ function resolveNumberingGeometry(
     ...(tabStops && tabStops.length > 0 ? { tabStops } : {}),
     ...(markerLane ? { markerLane } : {}),
     ...(textColumn ? { textColumn } : {}),
+    ...(levelRunProperties ? { markerRunProperties: levelRunProperties } : {}),
   };
 }
 

package/src/runtime/surface-projection.ts

@@ -46,6 +46,12 @@ import {
   resolveSectionVariants,
 } from "./story-context.ts";
 import { resolveTableStyleResolution } from "./table-style-resolver.ts";
+import {
+  resolveEffectiveParagraphFormatting,
+  resolveEffectiveRunFormatting,
+  resolveNumberingMarkerRunFormatting,
+} from "./paragraph-style-resolver.ts";
+import type { CanonicalParagraphFormatting, CanonicalRunFormatting } from "../model/canonical-document.ts";
 
 interface ParagraphAccumulator {
   blockId: string;
@@ -57,6 +63,7 @@ interface ParagraphAccumulator {
   numberingPrefix?: string;
   numberingSuffix?: "tab" | "space" | "nothing";
   resolvedNumbering?: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["resolvedNumbering"];
+  resolvedParagraphFormatting?: CanonicalParagraphFormatting;
   contextualSpacing?: boolean;
   segments: SurfaceInlineSegment[];
 }
@@ -341,6 +348,16 @@ function createTableBlock(
       }
       const resolvedCell = resolvedRow?.cells[cellIndex];
       const cellBorders = resolveCellBorderStyles(resolvedCell?.borders ?? cell.borders);
+      // R2a: project the resolved conditional-format regions into CSS class
+      // names so the NodeView can paint band colors via theme vars instead of
+      // inline styles. Direct shading overrides still win at render time.
+      const bandClasses =
+        resolvedCell?.activeConditionalRegions &&
+        resolvedCell.activeConditionalRegions.length > 0
+          ? resolvedCell.activeConditionalRegions
+              .map((region) => `band-${region}`)
+              .join(" ")
+          : null;
       cells.push({
         gridSpan: cell.gridSpan ?? 1,
         verticalMerge: cell.verticalMerge ?? null,
@@ -352,6 +369,7 @@ function createTableBlock(
         ...(cellBorders.borderRight ? { borderRight: cellBorders.borderRight } : {}),
         ...(cellBorders.borderBottom ? { borderBottom: cellBorders.borderBottom } : {}),
         ...(cellBorders.borderLeft ? { borderLeft: cellBorders.borderLeft } : {}),
+        ...(bandClasses ? { bandClasses } : {}),
         content: cellContent,
       });
     }
@@ -365,6 +383,7 @@ function createTableBlock(
       ...(resolvedRow?.style.height !== undefined ? { height: resolvedRow.style.height } : {}),
       ...(resolvedRow?.style.heightRule ? { heightRule: resolvedRow.style.heightRule } : {}),
       ...(headerLike ? { isHeader: true } : {}),
+      ...(row.cantSplit ? { cantSplit: true } : {}),
     });
   }
 
@@ -523,6 +542,26 @@ function createParagraphBlock(
   const resolvedNumbering = effectiveNumbering
     ? numberingPrefixResolver.resolveDetailed(effectiveNumbering, paragraph)
     : null;
+
+  // Task 11: compute cascaded paragraph formatting
+  const stylesCatalog = document.styles;
+  const directParagraphFormatting = buildDirectParagraphFormattingFromNode(paragraph);
+  const resolvedParagraphFormatting = resolveEffectiveParagraphFormatting(
+    { styleId: paragraph.styleId, direct: directParagraphFormatting },
+    stylesCatalog,
+  );
+
+  // Task 11: compute cascaded marker run formatting
+  const markerRunProperties = effectiveNumbering
+    ? resolveNumberingMarkerRunFormatting(
+        {
+          paragraphStyleId: paragraph.styleId,
+          levelRunProperties: resolvedNumbering?.markerRunProperties,
+        },
+        stylesCatalog,
+      )
+    : undefined;
+
   const accumulator: ParagraphAccumulator = {
     blockId: `paragraph-${paragraphIndex}`,
     kind: "paragraph",
@@ -536,9 +575,17 @@ function createParagraphBlock(
           ...(resolvedNumbering.text !== null && resolvedNumbering.suffix
             ? { numberingSuffix: resolvedNumbering.suffix }
             : {}),
-          resolvedNumbering: toSurfaceResolvedNumbering(resolvedNumbering),
+          resolvedNumbering: {
+            ...toSurfaceResolvedNumbering(resolvedNumbering),
+            ...(markerRunProperties && Object.keys(markerRunProperties).length > 0
+              ? { markerRunProperties }
+              : {}),
+          },
         }
       : {}),
+    ...(resolvedParagraphFormatting && Object.keys(resolvedParagraphFormatting).length > 0
+      ? { resolvedParagraphFormatting }
+      : {}),
     ...(paragraph.alignment ? { alignment: paragraph.alignment } : {}),
     ...(paragraph.spacing ? { spacing: paragraph.spacing } : {}),
     ...(paragraph.contextualSpacing !== undefined
@@ -683,6 +730,48 @@ function resolveStyleLinkedNumberingLevel(
   return undefined;
 }
 
+function buildDirectRunFormattingFromMarks(
+  marks: SurfaceTextMark[] | undefined,
+  markAttrs: {
+    backgroundColor?: string;
+    charSpacing?: number;
+    kerning?: number;
+    textFill?: string;
+    fontFamily?: string;
+    fontSize?: number;
+    textColor?: string;
+  } | undefined,
+): CanonicalRunFormatting | undefined {
+  const direct: CanonicalRunFormatting = {};
+  if (marks) {
+    if (marks.includes("bold")) direct.bold = true;
+    if (marks.includes("italic")) direct.italic = true;
+    if (marks.includes("underline")) direct.underline = "single";
+    if (marks.includes("strikethrough")) direct.strikethrough = true;
+    if (marks.includes("doubleStrikethrough")) direct.doubleStrikethrough = true;
+    if (marks.includes("vanish")) direct.vanish = true;
+    if (marks.includes("allCaps")) direct.allCaps = true;
+    if (marks.includes("smallCaps")) direct.smallCaps = true;
+  }
+  if (markAttrs) {
+    if (markAttrs.fontFamily) {
+      direct.fontFamily = markAttrs.fontFamily;
+      direct.fontFamilyAscii = markAttrs.fontFamily;
+    }
+    if (typeof markAttrs.fontSize === "number") {
+      // markAttrs.fontSize is already in half-points from cloneMarks
+      direct.fontSizeHalfPoints = markAttrs.fontSize;
+    }
+    if (markAttrs.textColor) {
+      direct.colorHex = markAttrs.textColor.replace(/^#/, "");
+    }
+    if (markAttrs.backgroundColor) {
+      direct.highlight = markAttrs.backgroundColor;
+    }
+  }
+  return Object.keys(direct).length > 0 ? direct : undefined;
+}
+
 function appendInlineSegments(
   paragraph: ParagraphAccumulator,
   node: InlineNode,
@@ -692,23 +781,33 @@ function appendInlineSegments(
   hyperlinkHref?: string,
 ): { nextCursor: number; lockedFragmentIds: string[] } {
   switch (node.type) {
-    case "text":
+    case "text": {
+      const cloned = node.marks ? cloneMarks(node.marks) : { marks: [] as SurfaceTextMark[] };
+      const directRunFormatting = buildDirectRunFormattingFromMarks(
+        cloned.marks.length > 0 ? cloned.marks : undefined,
+        cloned.markAttrs,
+      );
+      const resolvedRunFormatting = resolveEffectiveRunFormatting(
+        {
+          paragraphStyleId: paragraph.styleId,
+          characterStyleId: undefined,
+          direct: directRunFormatting,
+        },
+        document.styles,
+      );
       paragraph.segments.push({
         segmentId: `${paragraph.blockId}-segment-${paragraph.segments.length}`,
         kind: "text",
         from: start,
         to: start + Array.from(node.text).length,
         text: node.text,
-        ...(node.marks ? (() => {
-          const result = cloneMarks(node.marks);
-          return {
-            ...(result.marks.length > 0 ? { marks: result.marks } : {}),
-            ...(result.markAttrs ? { markAttrs: result.markAttrs } : {}),
-          };
-        })() : {}),
+        ...(cloned.marks.length > 0 ? { marks: cloned.marks } : {}),
+        ...(cloned.markAttrs ? { markAttrs: cloned.markAttrs } : {}),
+        ...(Object.keys(resolvedRunFormatting).length > 0 ? { resolvedRunFormatting } : {}),
         ...(hyperlinkHref ? { hyperlinkHref } : {}),
       });
       return { nextCursor: start + Array.from(node.text).length, lockedFragmentIds: [] };
+    }
     case "tab":
       paragraph.segments.push({
         segmentId: `${paragraph.blockId}-segment-${paragraph.segments.length}`,
@@ -1368,6 +1467,27 @@ function toSurfaceTabStop(
   };
 }
 
+function buildDirectParagraphFormattingFromNode(
+  paragraph: ParagraphNode,
+): CanonicalParagraphFormatting | undefined {
+  const direct: CanonicalParagraphFormatting = {};
+  if (paragraph.spacing) direct.spacing = paragraph.spacing;
+  if (paragraph.indentation) direct.indentation = paragraph.indentation;
+  if (paragraph.alignment) direct.alignment = paragraph.alignment;
+  if (paragraph.borders) direct.borders = paragraph.borders;
+  if (paragraph.shading) direct.shading = paragraph.shading;
+  if (paragraph.tabStops && paragraph.tabStops.length > 0) direct.tabStops = [...paragraph.tabStops];
+  if (paragraph.contextualSpacing !== undefined) direct.contextualSpacing = paragraph.contextualSpacing;
+  if (paragraph.keepNext !== undefined) direct.keepNext = paragraph.keepNext;
+  if (paragraph.keepLines !== undefined) direct.keepLines = paragraph.keepLines;
+  if (paragraph.widowControl !== undefined) direct.widowControl = paragraph.widowControl;
+  if (paragraph.pageBreakBefore !== undefined) direct.pageBreakBefore = paragraph.pageBreakBefore;
+  if (paragraph.outlineLevel !== undefined) direct.outlineLevel = paragraph.outlineLevel;
+  if (paragraph.bidi !== undefined) direct.bidi = paragraph.bidi;
+  if (paragraph.suppressLineNumbers !== undefined) direct.suppressLineNumbers = paragraph.suppressLineNumbers;
+  return Object.keys(direct).length > 0 ? direct : undefined;
+}
+
 function toSurfaceResolvedNumbering(
   numbering: NumberingPrefixResult,
 ): NonNullable<Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["resolvedNumbering"]> {

package/src/runtime/table-schema.ts

@@ -42,6 +42,7 @@ type TableCellAttrs = {
   borderRight?: string | null;
   borderBottom?: string | null;
   borderLeft?: string | null;
+  bandClasses?: string | null;
 };
 
 function resolveRenderedColspan(attrs: {
@@ -96,6 +97,7 @@ function getCellAttrs(dom: HTMLElement): TableCellAttrs {
     borderRight: dom.getAttribute("data-border-right"),
     borderBottom: dom.getAttribute("data-border-bottom"),
     borderLeft: dom.getAttribute("data-border-left"),
+    bandClasses: dom.getAttribute("data-band-classes"),
   };
 }
 
@@ -129,6 +131,11 @@ 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 (nodeAttrs.bandClasses) {
+    attrs["data-band-classes"] = nodeAttrs.bandClasses;
+    // Concatenate band classes onto the base `class` so Tailwind's @apply resolves at parse time.
+    attrs.class = `${attrs.class} ${nodeAttrs.bandClasses}`;
+  }
 
   const styles: string[] = [];
   const bgColor = safeCssColor(nodeAttrs.backgroundColor);
@@ -181,6 +188,8 @@ const tableCellSpecAttrs = {
   borderRight: { default: null },
   borderBottom: { default: null },
   borderLeft: { default: null },
+  /** R2b: space-joined band classes ("band-firstRow band-band1Horz") from the resolved style. */
+  bandClasses: { default: null },
 } as const;
 
 export const tableNodeSpec: NodeSpec = {
@@ -199,6 +208,8 @@ export const tableNodeSpec: NodeSpec = {
     tblLookLastColumn: { default: false },
     tblLookNoHBand: { default: false },
     tblLookNoVBand: { default: false },
+    /** R2d: raw `w:tblLook/@w:val` hex preserved verbatim so vendor-extended bits survive round-trip. */
+    tblLookVal: { default: null },
   },
   parseDOM: [{ tag: "table" }],
   toDOM(node) {