@beyondwork/docx-react-component 1.0.37 → 1.0.39

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) {

package/src/runtime/view-state.ts

@@ -19,13 +19,17 @@ import type {
   ActiveListContext,
   ActiveNoteContext,
   CaretAffinity,
+  ChromePinsState,
+  ChromePinSurface,
   DocumentMode,
+  EditorRole,
   EditorStoryTarget,
   EditorSurfaceSnapshot,
   EditorViewStateSnapshot,
   LayoutMeasurement,
   PageLayoutSnapshot,
   PageRegionHitTest,
+  PinState,
   SelectionSnapshot,
   SurfaceBlockSnapshot,
   SurfaceInlineSegment,
@@ -44,6 +48,20 @@ export interface ViewState {
   caretAffinity: CaretAffinity;
   activePageRegion: PageRegionHitTest | null;
   activeObjectFrame: LayoutMeasurement["objectFrame"] | null;
+  /**
+   * Role-scoped chrome dimension (spec §6.4).  Host apps drive the role via
+   * `setEditorRole`; the mounted shell reads this to pick a per-role
+   * toolbar action set.  Independent of `viewMode` — one user session may
+   * start in "review" role and switch to "editor" without changing
+   * workspace or document mode.
+   */
+  editorRole: EditorRole;
+  /**
+   * Pin state for detachable chrome surfaces (topnav, selection tier).
+   * Lives here so it survives snapshot rebuilds within one session.
+   * Absent key ⇒ docked default.
+   */
+  chromePins: ChromePinsState;
 }
 
 const MIN_ZOOM_PERCENT = 50;
@@ -58,6 +76,8 @@ const DEFAULT_VIEW_STATE: ViewState = {
   caretAffinity: "none",
   activePageRegion: null,
   activeObjectFrame: null,
+  editorRole: "editor",
+  chromePins: {},
 };
 
 export function createViewState(initial?: Partial<ViewState>): ViewState {
@@ -113,6 +133,37 @@ export function setActiveObjectFrame(
   return { ...state, activeObjectFrame: frame };
 }
 
+export function setEditorRole(state: ViewState, role: EditorRole): ViewState {
+  if (state.editorRole === role) return state;
+  return { ...state, editorRole: role };
+}
+
+export function setChromePin(
+  state: ViewState,
+  surface: ChromePinSurface,
+  pin: PinState | null,
+): ViewState {
+  const next: ChromePinsState = { ...state.chromePins };
+  if (pin === null) {
+    if (next[surface] === undefined) {
+      return state;
+    }
+    delete next[surface];
+  } else {
+    const current = next[surface];
+    if (
+      current &&
+      current.detached === pin.detached &&
+      current.offset.x === pin.offset.x &&
+      current.offset.y === pin.offset.y
+    ) {
+      return state;
+    }
+    next[surface] = pin;
+  }
+  return { ...state, chromePins: next };
+}
+
 /**
  * Derive list context from the surface block at the current selection head.
  */
@@ -219,9 +270,25 @@ export function createEditorViewStateSnapshot(
     activeObjectFrame: derivedViewState.activeObjectFrame,
     measurement,
     isFocused: derivedViewState.isFocused,
+    editorRole: derivedViewState.editorRole,
+    chromePins: cloneChromePins(derivedViewState.chromePins),
   };
 }
 
+function cloneChromePins(pins: ChromePinsState): ChromePinsState {
+  const out: ChromePinsState = {};
+  for (const key of Object.keys(pins) as ChromePinSurface[]) {
+    const pin = pins[key];
+    if (pin) {
+      out[key] = {
+        detached: pin.detached,
+        offset: { x: pin.offset.x, y: pin.offset.y },
+      };
+    }
+  }
+  return out;
+}
+
 // ---------------------------------------------------------------------------
 // Internal helpers
 // ---------------------------------------------------------------------------

package/src/runtime/workflow-markup.ts

@@ -341,11 +341,7 @@ function collectOpaqueFragmentMarkup(
   const seen = new Set(existing.map((item) => item.fragmentId));
 
   return Object.values(preservation.opaqueFragments)
-    .filter(
-      (fragment) =>
-        !seen.has(fragment.fragmentId)
-        && fragment.packagePartName === "/word/document.xml",
-    )
+    .filter((fragment) => !seen.has(fragment.fragmentId))
     .map((fragment) => {
       const descriptor = describeOpaqueFragment(fragment);
       const blockedReasonCode = isBlockedImportFeatureKey(descriptor.featureKey)