@beyondwork/docx-react-component 1.0.57 → 1.0.59

package/src/runtime/surface-projection.ts

@@ -29,6 +29,8 @@ import type {
   SdtNode,
   ShapeNode,
   SmartArtPreviewNode,
+  BorderSpec,
+  TableBorders,
   TableCellBorders,
   TableNode,
   TextMark,
@@ -65,6 +67,14 @@ import { resolveHyperlinkRunFormatting } from "./hyperlink-color-resolver.ts";
 import { concretizeThemeColors, ThemeColorResolver } from "./theme-color-resolver.ts";
 import type { CanonicalParagraphFormatting, CanonicalRunFormatting } from "../model/canonical-document.ts";
 
+const SAFE_CSS_HEX_COLOR_RE = /^#?(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
+const PICTURE_EFFECT_SCHEME_ALIASES: Record<string, string> = {
+  tx1: "dk1",
+  bg1: "lt1",
+  tx2: "dk2",
+  bg2: "lt2",
+};
+
 interface ParagraphAccumulator {
   blockId: string;
   kind: "paragraph";
@@ -399,10 +409,37 @@ function createTableBlock(
   const rows: SurfaceTableRowSnapshot[] = [];
   const rowSpans = computeTableRowSpans(table);
   const resolvedTable = resolveTableStyleResolution(table, document.styles.tables);
+  // SOW gap G3 — build the theme color resolver once per table so every cell
+  // shading with `w:themeFill` can resolve the theme slot + tint/shade without
+  // reconstructing the resolver per cell.
+  const tableThemeResolver = document.subParts?.canonicalTheme
+    ? new ThemeColorResolver(document.subParts.canonicalTheme)
+    : undefined;
+
+  // SOW gap G5 — fold table-level borders into per-cell rendering. The CCEP
+  // SOW form tables ship only `w:tblBorders` (single sz=4 on every side + insideH
+  // + insideV) and no per-cell borders, so every interior edge must fall back
+  // to `insideH`/`insideV` and perimeter edges must fall back to outer sides.
+  const tableBorders = resolvedTable.tableResolved.borders ?? table.borders;
+  const totalColumns =
+    table.gridColumns.length > 0
+      ? table.gridColumns.length
+      : table.rows.reduce(
+          (max, r) =>
+            Math.max(
+              max,
+              (r.gridBefore ?? 0) +
+                r.cells.reduce((sum, c) => sum + (c.gridSpan ?? 1), 0) +
+                (r.gridAfter ?? 0),
+            ),
+          0,
+        );
+  const totalRows = table.rows.length;
 
   for (const [rowIndex, row] of table.rows.entries()) {
     const cells: SurfaceTableCellSnapshot[] = [];
     const resolvedRow = resolvedTable.rows[rowIndex];
+    let columnCursor = row.gridBefore ?? 0;
     for (const [cellIndex, cell] of row.cells.entries()) {
       const cellContent: SurfaceBlockSnapshot[] = [];
       for (const child of cell.children) {
@@ -420,7 +457,30 @@ function createTableBlock(
         innerCursor = result.nextCursor;
       }
       const resolvedCell = resolvedRow?.cells[cellIndex];
-      const cellBorders = resolveCellBorderStyles(resolvedCell?.borders ?? cell.borders);
+      const cellSpan = cell.gridSpan ?? 1;
+      const startColumn = columnCursor;
+      const endColumn = columnCursor + cellSpan - 1;
+      const position = {
+        isTopEdge: rowIndex === 0,
+        isBottomEdge: rowIndex === totalRows - 1,
+        isLeftEdge: startColumn === 0,
+        isRightEdge: endColumn === totalColumns - 1,
+      };
+      columnCursor = endColumn + 1;
+      const cellBorders = resolveCellBorderStyles(
+        resolvedCell?.borders ?? cell.borders,
+        tableBorders,
+        position,
+      );
+      // SOW gap G3 — resolve effective cell fill honoring theme references.
+      // `w:themeFill` wins when `w:fill` is absent or "auto"; the resolver
+      // applies `w:clrSchemeMapping` remap + byte-form tint/shade from
+      // `w:themeFillTint` / `w:themeFillShade`. Returned hex has no leading
+      // "#" to match the direct-fill convention below.
+      const effectiveFill = resolveCellShadingFill(
+        resolvedCell?.shading ?? cell.shading,
+        tableThemeResolver,
+      );
       // 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.
@@ -436,7 +496,7 @@ function createTableBlock(
         verticalMerge: cell.verticalMerge ?? null,
         colspan: cell.gridSpan ?? 1,
         rowspan: rowSpans.get(`${rowIndex}:${cellIndex}`) ?? 1,
-        ...(resolvedCell?.shading?.fill ? { backgroundColor: `#${resolvedCell.shading.fill}` } : {}),
+        ...(effectiveFill ? { backgroundColor: `#${effectiveFill}` } : {}),
         ...(resolvedCell?.verticalAlign ? { verticalAlign: resolvedCell.verticalAlign } : {}),
         ...(cellBorders.borderTop ? { borderTop: cellBorders.borderTop } : {}),
         ...(cellBorders.borderRight ? { borderRight: cellBorders.borderRight } : {}),
@@ -487,6 +547,17 @@ function createTableBlock(
       }
     : undefined;
 
+  // SOW gap G1 — when the table's own width is expressed as a percent
+  // (`w:tblW w:type="pct"`), compute relative column proportions so the
+  // node-view can emit `<col style="width: NN%">` instead of absolute `pt`
+  // widths. This matters for the CCEP SOW, whose tables all use pct widths
+  // at both table and cell level: absolute pt columns inside a `width:100%`
+  // container drift against the container on zoom + re-layout.
+  const gridColumnsRelative = computeRelativeGridColumns(
+    table.gridColumns,
+    tr.widthType,
+  );
+
   return {
     block: {
       blockId: `table-${tableIndex}`,
@@ -495,6 +566,7 @@ function createTableBlock(
       to: innerCursor,
       styleId: table.styleId,
       gridColumns: table.gridColumns,
+      ...(gridColumnsRelative ? { gridColumnsRelative } : {}),
       ...(resolvedTable.table?.alignment ? { alignment: resolvedTable.table.alignment } : {}),
       tblLook: resolvedTable.effectiveTblLook,
       ...(tableResolvedAttr ? { tableResolved: tableResolvedAttr } : {}),
@@ -554,20 +626,148 @@ function computeTableRowSpans(table: TableNode): Map<string, number> {
   return rowSpans;
 }
 
+/**
+ * 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
+ * reference in `w:themeFill` + `w:themeFillTint` / `w:themeFillShade` is
+ * resolved through the theme cascade. Returns a 6-digit hex WITHOUT a leading
+ * "#" to match the direct-fill convention, or undefined when no paintable
+ * color can be derived.
+ */
+function resolveCellShadingFill(
+  shading:
+    | {
+        fill?: string;
+        themeFill?: string;
+        themeFillTint?: string;
+        themeFillShade?: string;
+      }
+    | undefined,
+  themeResolver: ThemeColorResolver | undefined,
+): string | undefined {
+  if (!shading) return undefined;
+  const direct = shading.fill;
+  if (direct && direct !== "auto") return direct;
+  const themeSlot = shading.themeFill;
+  if (!themeSlot || !themeResolver) return direct; // keep "auto" fallback if present
+  const resolved = themeResolver.resolveWordThemeColor(
+    themeSlot,
+    shading.themeFillTint,
+    shading.themeFillShade,
+  );
+  if (!resolved || resolved === "auto") return direct;
+  // Strip leading "#" if the resolver returned one.
+  return resolved.startsWith("#") ? resolved.slice(1) : resolved;
+}
+
+/**
+ * SOW gap G1 — derive relative column widths (percent 0–100, sum 100)
+ * from the canonical `gridColumns` (twips). Only populated when the table
+ * itself is sized in percent; other width types keep the absolute pt path
+ * in the node-view. Returns null when the grid is empty, all-zero, or the
+ * width type is not `pct`.
+ */
+function computeRelativeGridColumns(
+  gridColumns: readonly number[],
+  widthType: "auto" | "dxa" | "pct" | "nil" | undefined,
+): number[] | null {
+  if (widthType !== "pct") return null;
+  if (gridColumns.length === 0) return null;
+  let total = 0;
+  for (const col of gridColumns) total += col > 0 ? col : 0;
+  if (total <= 0) return null;
+  return gridColumns.map((col) => (col > 0 ? (col / total) * 100 : 0));
+}
+
+/**
+ * Render a typed `BorderSpec` shape to a CSS shorthand string. Returns
+ * undefined for absent / "none" / "nil" specs so callers can keep their
+ * falsy-check pattern.
+ */
+function borderSpecToCssShorthand(
+  spec: BorderSpec | undefined | null,
+): string | undefined {
+  if (!spec) return undefined;
+  if (spec.value === "none" || spec.value === "nil") return undefined;
+  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}`;
+}
+
+/**
+ * SOW gap G5 — border cascade for an individual cell. When the cell does not
+ * declare `w:tcBorders.<side>`, the renderer falls back to the table-level
+ * `w:tblBorders`: outer sides (`top`/`right`/`bottom`/`left`) apply when the
+ * cell sits on the corresponding table perimeter; `insideH`/`insideV` apply
+ * to interior edges. The CCEP SOW relies on this cascade — its form tables
+ * declare only `w:tblBorders` and expect every cell to carry visible 1px
+ * borders on all four sides.
+ *
+ * `position` is optional; when absent, the function falls back to the legacy
+ * cell-only behavior (no inside/outer cascade) so older callers keep working.
+ */
 function resolveCellBorderStyles(
   borders: TableCellBorders | undefined,
+  tableBorders?: TableBorders,
+  position?: {
+    isTopEdge: boolean;
+    isBottomEdge: boolean;
+    isLeftEdge: boolean;
+    isRightEdge: boolean;
+  },
 ): { borderTop?: string; borderRight?: string; borderBottom?: string; borderLeft?: string } {
-  if (!borders) return {};
+  const pick = (
+    cellSide: BorderSpec | undefined,
+    tableOuter: BorderSpec | undefined,
+    tableInside: BorderSpec | undefined,
+    onEdge: boolean,
+  ): string | undefined => {
+    if (cellSide && cellSide.value !== "nil") {
+      const rendered = borderSpecToCssShorthand(cellSide);
+      if (rendered) return rendered;
+      if (cellSide.value === "none") return undefined; // explicit "off" — no fallback
+    }
+    const fallback = onEdge ? tableOuter : tableInside;
+    return borderSpecToCssShorthand(fallback);
+  };
+
   const result: { borderTop?: string; borderRight?: string; borderBottom?: string; borderLeft?: string } = {};
-  const sides = [["top", "borderTop"], ["right", "borderRight"], ["bottom", "borderBottom"], ["left", "borderLeft"]] as const;
-  for (const [side, key] of sides) {
-    const spec = borders[side];
-    if (!spec || spec.value === "none" || spec.value === "nil") continue;
-    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";
-    result[key] = `${width} ${style} ${color}`;
-  }
+  const top = pick(
+    borders?.top,
+    tableBorders?.top,
+    tableBorders?.insideH,
+    position?.isTopEdge ?? true,
+  );
+  const right = pick(
+    borders?.right,
+    tableBorders?.right,
+    tableBorders?.insideV,
+    position?.isRightEdge ?? true,
+  );
+  const bottom = pick(
+    borders?.bottom,
+    tableBorders?.bottom,
+    tableBorders?.insideH,
+    position?.isBottomEdge ?? true,
+  );
+  const left = pick(
+    borders?.left,
+    tableBorders?.left,
+    tableBorders?.insideV,
+    position?.isLeftEdge ?? true,
+  );
+  if (top) result.borderTop = top;
+  if (right) result.borderRight = right;
+  if (bottom) result.borderBottom = bottom;
+  if (left) result.borderLeft = left;
   return result;
 }
 
@@ -651,13 +851,14 @@ function createParagraphBlock(
   // by the placeholder path. Segment-level work inside
   // `appendInlineSegments` is suppressed symmetrically via the same
   // `cullBuild` flag, preserving cursor arithmetic.
-  const effectiveNumbering = cullBuild
-    ? undefined
-    : resolveEffectiveParagraphNumbering(document, paragraph);
+  // Always resolve numbering so the counter advances for culled paragraphs too.
+  const effectiveNumbering = resolveEffectiveParagraphNumbering(document, paragraph);
   const resolvedNumbering =
     !cullBuild && effectiveNumbering
       ? numberingPrefixResolver.resolveDetailed(effectiveNumbering, paragraph)
-      : null;
+      : effectiveNumbering
+        ? advanceNumberingCounterOnly(numberingPrefixResolver, effectiveNumbering)
+        : null;
 
   // Task 11: compute cascaded paragraph formatting (expensive — styles-catalog walk).
   const stylesCatalog = document.styles;
@@ -760,6 +961,14 @@ function createParagraphBlock(
   };
 }
 
+function advanceNumberingCounterOnly(
+  resolver: NumberingPrefixResolver,
+  numbering: NonNullable<ParagraphNode["numbering"]>,
+): null {
+  resolver.resolve(numbering);
+  return null;
+}
+
 function resolveEffectiveParagraphNumbering(
   document: CanonicalDocumentEnvelope,
   paragraph: ParagraphNode,
@@ -1100,7 +1309,7 @@ function appendInlineSegments(
         const mediaId = c.mediaId ?? `drawing-frame-${start}`;
         const state: "editable" | "missing" = c.mediaId ? "editable" : "missing";
         const anchor = surfaceAnchorFromGeometry(node.anchor);
-        const pictureEffects = surfacePictureEffectsFromContent(c);
+        const pictureEffects = surfacePictureEffectsFromContent(c, themeResolver);
         paragraph.segments.push({
           segmentId: `${paragraph.blockId}-segment-${paragraph.segments.length}`,
           kind: "image",
@@ -1303,6 +1512,7 @@ function surfaceAnchorFromGeometry(
     ...(anchor.allowOverlap !== undefined ? { allowOverlap: anchor.allowOverlap } : {}),
     ...(anchor.simplePos !== undefined ? { simplePos: anchor.simplePos } : {}),
     ...(anchor.docPr ? { docPr: { ...anchor.docPr } } : {}),
+    ...(anchor.wrapPolygon ? { wrapPolygon: anchor.wrapPolygon } : {}),
   };
 }
 
@@ -1313,14 +1523,20 @@ function surfaceAnchorFromGeometry(
  */
 function surfacePictureEffectsFromContent(
   content: PictureContent,
+  themeResolver?: ThemeColorResolver,
 ): SurfacePictureEffects | undefined {
+  const outerShadow = resolveSurfacePictureShadow(content.outerShadow, themeResolver);
+  const glow = resolveSurfacePictureGlow(content.glow, themeResolver);
   const has =
     content.srcRect !== undefined ||
     content.rotation !== undefined ||
     content.flipH !== undefined ||
     content.flipV !== undefined ||
     content.presetGeom !== undefined ||
-    content.stretch !== undefined;
+    content.stretch !== undefined ||
+    content.softEdgeRadius !== undefined ||
+    outerShadow !== undefined ||
+    glow !== undefined;
   if (!has) return undefined;
   return {
     ...(content.srcRect ? { srcRect: { ...content.srcRect } } : {}),
@@ -1329,9 +1545,63 @@ function surfacePictureEffectsFromContent(
     ...(content.flipV !== undefined ? { flipV: content.flipV } : {}),
     ...(content.presetGeom !== undefined ? { presetGeom: content.presetGeom } : {}),
     ...(content.stretch !== undefined ? { stretch: content.stretch } : {}),
+    ...(content.softEdgeRadius !== undefined ? { softEdgeRadius: content.softEdgeRadius } : {}),
+    ...(outerShadow ? { outerShadow } : {}),
+    ...(glow ? { glow } : {}),
   };
 }
 
+function resolveSurfacePictureShadow(
+  shadow: PictureContent["outerShadow"] | undefined,
+  themeResolver?: ThemeColorResolver,
+): SurfacePictureEffects["outerShadow"] | undefined {
+  if (!shadow) return undefined;
+  const color = resolveSurfacePictureEffectColor(shadow.color, shadow.colorType, themeResolver);
+  if (!color) return undefined;
+  return {
+    blurRad: shadow.blurRad,
+    dist: shadow.dist,
+    dir: shadow.dir,
+    color,
+    colorType: "srgbClr",
+  };
+}
+
+function resolveSurfacePictureGlow(
+  glow: PictureContent["glow"] | undefined,
+  themeResolver?: ThemeColorResolver,
+): SurfacePictureEffects["glow"] | undefined {
+  if (!glow) return undefined;
+  const color = resolveSurfacePictureEffectColor(glow.color, glow.colorType, themeResolver);
+  if (!color) return undefined;
+  return {
+    radius: glow.radius,
+    color,
+    colorType: "srgbClr",
+  };
+}
+
+function resolveSurfacePictureEffectColor(
+  color: string,
+  colorType: "srgbClr" | "schemeClr",
+  themeResolver?: ThemeColorResolver,
+): string | undefined {
+  if (colorType === "srgbClr") {
+    return normalizeSafeCssHexColor(color);
+  }
+  const slot = PICTURE_EFFECT_SCHEME_ALIASES[color] ?? color;
+  if (slot === "phClr") return undefined;
+  const resolved = themeResolver?.resolveSchemeSlot(slot);
+  return normalizeSafeCssHexColor(resolved);
+}
+
+function normalizeSafeCssHexColor(value: string | undefined): string | undefined {
+  if (!value) return undefined;
+  const trimmed = value.trim();
+  if (!SAFE_CSS_HEX_COLOR_RE.test(trimmed)) return undefined;
+  return trimmed.replace(/^#/, "").toUpperCase();
+}
+
 /**
  * V2c.5 — Extract the first paragraph's plain text from a parsed
  * `txbxBlocks` tree for the `txbxText` segment preview.  The recursion
@@ -1790,6 +2060,10 @@ function summarizePreviewInline(node: InlineNode): string {
       return node.text ? `[VML: ${node.text}]` : "[Legacy VML drawing]";
     case "drawing_frame":
       return node.content.type === "picture" ? "[Image]" : "[Drawing]";
+    case "ole_embed":
+      return node.progId
+        ? `[Embedded object: ${node.progId}]`
+        : "[Embedded object]";
   }
 }
 
@@ -1860,6 +2134,7 @@ function toSurfaceResolvedNumbering(
         ? { textColumn: { ...numbering.geometry.textColumn } }
         : {}),
     },
+    ...(numbering.picBulletMediaId ? { picBulletMediaId: numbering.picBulletMediaId } : {}),
   };
 }
 

package/src/runtime/table-schema.ts

@@ -210,6 +210,12 @@ export const tableNodeSpec: NodeSpec = {
     styleId: { default: null },
     propertiesXml: { default: null },
     gridColumns: { default: [] },
+    /**
+     * SOW gap G1 — relative column widths (percent 0–100) used for the
+     * `<colgroup>` when the table width itself is expressed as a percent.
+     * `null` = use absolute pt widths from `gridColumns`.
+     */
+    gridColumnsRelative: { default: null },
     alignment: { default: null },
     tblLookFirstRow: { default: false },
     tblLookLastRow: { default: false },

package/src/runtime/theme-color-resolver.ts

@@ -26,6 +26,7 @@
 
 import type { CanonicalRunFormatting, CanonicalTheme, ClrSchemeMappingSlot, ResolvedTheme } from "../model/canonical-document.ts";
 import { resolveThemeColor } from "../io/ooxml/parse-theme.ts";
+import { GRADIENT_STOP_UNITS } from "./units.ts";
 
 /**
  * DrawingML color modifier (ECMA-376 §20.1.2.3.x).
@@ -40,7 +41,6 @@ export interface DrawingMlColorMod {
   value: number;
 }
 
-const DML_UNIT = 100_000;
 
 /**
  * Unified runtime theme color resolver.
@@ -251,7 +251,7 @@ function applyDmlMods(
 ): string {
   let rgb = parseHexToRgbDml(hex);
   for (const mod of mods) {
-    const frac = mod.value / DML_UNIT;
+    const frac = mod.value / GRADIENT_STOP_UNITS;
     switch (mod.kind) {
       case "lumMod": {
         const hsl = rgbToHsl(rgb);

package/src/runtime/units.ts

@@ -16,9 +16,18 @@
 /** EMU (English Metric Units) per CSS pixel at 96 dpi. */
 export const EMU_PER_PX = 9525;
 
+/** EMU per inch — 914 400 EMU = 1 inch (ECMA-376 §20.1.2.2). */
+export const EMU_PER_INCH = 914_400;
+
 /** OOXML rotation units per degree (`a:xfrm a:rot` = 60 000ths°). */
 export const ROTATION_UNITS_PER_DEGREE = 60000;
 
+/** OOXML gradient-stop and crop-offset unit (100 000 = 100%). */
+export const GRADIENT_STOP_UNITS = 100_000;
+
+/** OOXML percentage parts unit (5 000 = 100%). Used for table pct widths. */
+export const PERCENTAGE_PARTS = 5_000;
+
 /** OOXML picture-crop units per percent (`a:srcRect` uses 1/1000 of a percent). */
 export const SRCRECT_UNITS_PER_PERCENT = 1000;
 

package/src/runtime/workflow-rail-segments.ts

@@ -387,15 +387,18 @@ export function attachScopeCardModel(
   }
 
   const workItemByScope = new Map<string, string>();
+  const anchorByScope = new Map<string, EditorAnchorProjection>();
   for (const scope of input.scopes ?? []) {
     if (scope.workItemId) {
       workItemByScope.set(scope.scopeId, scope.workItemId);
     }
+    anchorByScope.set(scope.scopeId, scope.anchor);
   }
 
   const models: ScopeCardModel[] = [];
   for (const segment of firstByScope.values()) {
     const workItemId = workItemByScope.get(segment.scopeId);
+    const anchor = anchorByScope.get(segment.scopeId);
     const issue = resolveIssueForScope(
       segment.scopeId,
       workItemId,
@@ -423,6 +426,7 @@ export function attachScopeCardModel(
       label: segment.label ?? "",
       posture: segment.posture,
       primaryAnchorRect,
+      ...(anchor ? { anchor } : {}),
       ...(issue ? { issue } : {}),
       suggestionGroupIds: suggestionGroups.map((group) => group.groupId),
       suggestionGroups,