@beyondwork/docx-react-component 1.0.58 → 1.0.59

package/src/ui-tailwind/editor-surface/shape-renderer.ts

@@ -17,7 +17,7 @@
  * fill; `noLine: true` → `stroke: "none"`.
  */
 
-import { EMU_PER_PX } from "../../runtime/units";
+import { EMU_PER_PX, ROTATION_UNITS_PER_DEGREE } from "../../runtime/units";
 
 const SUPPORTED_GEOMETRIES = new Set(["rect", "ellipse", "roundRect"]);
 
@@ -81,9 +81,18 @@ export function resolveLineCss(line: ShapeLine | undefined): ResolvedLineCss {
   return { stroke, strokeWidth };
 }
 
+export type GradientFill = {
+  kind: "gradient";
+  stops: Array<{ pos: number; color: string; colorType: "srgbClr" | "schemeClr" }>;
+  direction:
+    | { kind: "linear"; angle: number; scaled?: boolean }
+    | { kind: "path"; path: "circle" | "rect" | "shape" };
+  rotWithShape?: boolean;
+};
+
 export interface ShapeSegmentLike {
   geometry?: string;
-  fill?: ShapeFill;
+  fill?: ShapeFill | GradientFill;
   line?: ShapeLine;
 }
 
@@ -94,6 +103,44 @@ export interface ShapeSegmentLike {
  */
 export type SvgSpec = readonly [string, Record<string, string>, ...SvgSpec[]];
 
+/**
+ * Build an SVG `<defs>` element containing a `<linearGradient>` or
+ * `<radialGradient>` for the given gradient fill.  `id` is the gradient
+ * element ID referenced via `fill="url(#id)"` on the geometry element.
+ *
+ * OOXML linear gradient angle: 60000ths of a degree, clockwise from north.
+ * Converted to SVG objectBoundingBox coordinates via:
+ *   x1 = 0.5 − 0.5·sin(θ), y1 = 0.5 + 0.5·cos(θ)
+ *   x2 = 0.5 + 0.5·sin(θ), y2 = 0.5 − 0.5·cos(θ)
+ * where θ is in radians.
+ *
+ * OOXML stop pos: 0–100000 (= 0–100%).
+ */
+function renderGradientDefs(fill: GradientFill, id: string): SvgSpec {
+  const stopEls: SvgSpec[] = fill.stops.map(
+    (s): SvgSpec => [
+      "stop",
+      {
+        offset: `${(s.pos / 1000).toFixed(2)}%`,
+        "stop-color": s.colorType === "srgbClr" ? `#${s.color}` : "currentColor",
+      },
+    ],
+  );
+
+  let gradEl: SvgSpec;
+  if (fill.direction.kind === "linear") {
+    const rad = (fill.direction.angle / ROTATION_UNITS_PER_DEGREE) * (Math.PI / 180);
+    const x1 = (0.5 - 0.5 * Math.sin(rad)).toFixed(4);
+    const y1 = (0.5 + 0.5 * Math.cos(rad)).toFixed(4);
+    const x2 = (0.5 + 0.5 * Math.sin(rad)).toFixed(4);
+    const y2 = (0.5 - 0.5 * Math.cos(rad)).toFixed(4);
+    gradEl = ["linearGradient", { id, x1, y1, x2, y2, gradientUnits: "objectBoundingBox" }, ...stopEls];
+  } else {
+    gradEl = ["radialGradient", { id, cx: "50%", cy: "50%", r: "50%", gradientUnits: "objectBoundingBox" }, ...stopEls];
+  }
+  return ["defs", {}, gradEl];
+}
+
 /**
  * Render a supported geometry into a PM-compatible DOMOutputSpec tree
  * for an inline `<svg>`.  Returns `null` when the geometry is unsupported
@@ -101,6 +148,9 @@ export type SvgSpec = readonly [string, Record<string, string>, ...SvgSpec[]];
  *
  * The SVG is sized 1:1 to its container; the wrapper span owns the
  * outer `width:Xpx; height:Ypx`.
+ *
+ * Gradient fills: emits `<defs><linearGradient>` / `<radialGradient>` and
+ * references it via `fill="url(#g0)"` on the geometry element.
  */
 export function renderShapeSvg(
   segment: ShapeSegmentLike,
@@ -111,7 +161,19 @@ export function renderShapeSvg(
   if (!segment.geometry || !SUPPORTED_GEOMETRIES.has(segment.geometry)) {
     return null;
   }
-  const fillCss = resolveFillCss(segment.fill);
+
+  let fillAttr: string;
+  let gradDefs: SvgSpec | null = null;
+  if (segment.fill && segment.fill.kind === "gradient") {
+    gradDefs = renderGradientDefs(segment.fill, "g0");
+    fillAttr = "url(#g0)";
+  } else {
+    fillAttr = resolveFillCss(segment.fill as ShapeFill | undefined).fill;
+  }
+
+  // Keep resolveFillCss call for non-gradient so the isSchemePlaceholder
+  // warning path (future) still fires when needed.
+  const fillCss = { fill: fillAttr, isSchemePlaceholder: false };
   const lineCss = resolveLineCss(segment.line);
   const sw = lineCss.strokeWidth;
   // Inset the geometry by half the stroke so the stroke paints inside
@@ -184,17 +246,17 @@ export function renderShapeSvg(
   // `xmlns` *attribute* after createElement() is meaningless — the
   // resulting node is HTMLUnknownElement and won't paint as SVG.
   // Children inherit the namespace, so the geometry tag stays bare.
-  return [
-    "http://www.w3.org/2000/svg svg",
-    {
-      viewBox: `0 0 ${widthPx} ${heightPx}`,
-      width: String(widthPx),
-      height: String(heightPx),
-      preserveAspectRatio: "none",
-      "aria-hidden": "true",
-    },
-    geometryEl,
-  ];
+  const svgAttrs = {
+    viewBox: `0 0 ${widthPx} ${heightPx}`,
+    width: String(widthPx),
+    height: String(heightPx),
+    preserveAspectRatio: "none",
+    "aria-hidden": "true",
+  };
+  if (gradDefs) {
+    return ["http://www.w3.org/2000/svg svg", svgAttrs, gradDefs, geometryEl];
+  }
+  return ["http://www.w3.org/2000/svg svg", svgAttrs, geometryEl];
 }
 
 /**

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

@@ -71,6 +71,20 @@ export function resolveMarkerJustificationCss(raw: string | undefined): string {
   }
 }
 
+export function resolveMarkerAlignCss(raw: string | undefined): React.CSSProperties["textAlign"] {
+  switch (raw) {
+    case "left":
+      return "left";
+    case "center":
+      return "center";
+    case "right":
+    case "both":
+    case "distribute":
+    default:
+      return "right";
+  }
+}
+
 /** Build CSSProperties for a paragraph block from spacing/indent/alignment. */
 export function buildParagraphStyle(
   block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
@@ -144,11 +158,12 @@ export function buildMarkerStyle(
   suffix: "tab" | "space" | "nothing" | undefined,
   markerRunProperties: CanonicalRunFormatting | undefined,
   markerWidth: number | undefined,
+  markerStart: number | undefined,
   markerJustification: string | undefined,
 ): React.CSSProperties {
   const style: React.CSSProperties = {
     fontVariantNumeric: "tabular-nums",
-    justifyContent: resolveMarkerJustificationCss(markerJustification),
+    textAlign: resolveMarkerAlignCss(markerJustification),
   };
 
   if (markerRunProperties) {
@@ -180,8 +195,10 @@ export function buildMarkerStyle(
     style.width = `${markerWidthPt}pt`;
     style.minWidth = `${markerWidthPt}pt`;
     style.flexBasis = `${markerWidthPt}pt`;
+    style.marginLeft = `-${markerWidthPt}pt`;
     style.marginRight = 0;
     style.overflow = "visible";
+    void markerStart; // consumed via paragraph padding-left geometry
   } else {
     const fallbackMinWidth = Math.min(Math.max(prefix.length + 1, 4), 14);
     const fallbackMarginRight =

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

@@ -142,6 +142,7 @@ function ParagraphBlock({
   const resolvedNumbering = block.resolvedNumbering;
   const markerRunProperties = resolvedNumbering?.markerRunProperties;
   const markerWidth = resolvedNumbering?.geometry?.markerLane?.width;
+  const markerStart = resolvedNumbering?.geometry?.markerLane?.start;
   const markerJustification = resolvedNumbering?.geometry?.markerJustification;
 
   const prefixSpan =
@@ -164,6 +165,7 @@ function ParagraphBlock({
           numberingSuffix,
           markerRunProperties,
           markerWidth,
+          markerStart,
           markerJustification,
         )}
       >

package/src/ui-tailwind/editor-surface/tw-table-node-view.tsx

@@ -10,6 +10,7 @@
 
 import type { Node as PMNode } from "prosemirror-model";
 import type { NodeViewConstructor, ViewMutationRecord } from "prosemirror-view";
+import { PERCENTAGE_PARTS } from "../../runtime/units.ts";
 
 // R2c: band class styles live in ./tw-table-bands.module.css. Consumers import
 // that stylesheet through their build pipeline (same pattern as editor-theme.css).
@@ -325,7 +326,7 @@ function applyTableAttrs(table: HTMLTableElement, node: PMNode): void {
   const tableWidthType = node.attrs.tableWidthType as string | null | undefined;
   let baseClasses = "border-collapse w-full my-2 text-sm";
   if (tableWidthType === "pct" && typeof tableWidth === "number") {
-    // OOXML pct widths are fiftieths of a percent (5000 = 100%).
+    // OOXML pct widths are fiftieths of a percent (PERCENTAGE_PARTS = 100%).
     table.style.width = `${tableWidth / 50}%`;
     baseClasses = "border-collapse my-2 text-sm";
   } else if (tableWidthType === "dxa" && typeof tableWidth === "number") {
@@ -406,6 +407,14 @@ function syncColgroup(table: HTMLTableElement, node: PMNode): void {
   const gridColumns = Array.isArray(node.attrs.gridColumns)
     ? (node.attrs.gridColumns as number[])
     : [];
+  // SOW gap G1 — percent widths win when the table itself is sized in
+  // percent. The relative array sums to 100 and comes from
+  // `computeRelativeGridColumns` in surface-projection so the column
+  // proportions track the container instead of the absolute `pt` widths
+  // sliding against it. `null` (the default) keeps the legacy pt path.
+  const gridColumnsRelative = Array.isArray(node.attrs.gridColumnsRelative)
+    ? (node.attrs.gridColumnsRelative as number[])
+    : null;
   const existing = Array.from(table.children).find(
     (child): child is HTMLTableColElement =>
       child instanceof (table.ownerDocument?.defaultView?.HTMLTableColElement ??
@@ -429,12 +438,19 @@ function syncColgroup(table: HTMLTableElement, node: PMNode): void {
   while (colgroup.childElementCount > desired) {
     colgroup.lastElementChild?.remove();
   }
+  const usePct =
+    gridColumnsRelative !== null && gridColumnsRelative.length === desired;
   for (let i = 0; i < desired; i += 1) {
     const col = colgroup.children[i] as HTMLTableColElement;
     const twips = gridColumns[i] ?? 0;
     col.setAttribute("data-col-index", String(i));
     col.setAttribute("data-col-twips", String(twips));
-    col.style.width = twips > 0 ? `${twips / 20}pt` : "";
+    if (usePct) {
+      const pct = gridColumnsRelative[i] ?? 0;
+      col.style.width = pct > 0 ? `${pct.toFixed(4)}%` : "";
+    } else {
+      col.style.width = twips > 0 ? `${twips / 20}pt` : "";
+    }
   }
 
   if (!existing) {

package/src/ui-tailwind/index.ts

@@ -67,6 +67,15 @@ export {
   type CommandPaletteItem,
   type TwCommandPaletteProps,
 } from "./chrome/tw-command-palette";
+export {
+  TwCommandPaletteMount,
+  type TwCommandPaletteMountProps,
+} from "./chrome/tw-command-palette-mount";
+export {
+  useContainerBreakpoint,
+  resolveBreakpoint,
+  type BreakpointMap,
+} from "./chrome/use-container-breakpoint";
 
 // Collab chrome (P9) — mount when chromePreset === "collab"; each
 // component is pure presentational and takes snapshots + callbacks.

package/src/ui-tailwind/page-chrome-model.ts

@@ -3,6 +3,16 @@ import type {
   PageLayoutSnapshot,
   SurfaceBlockSnapshot,
 } from "../api/public-types.ts";
+import { findPageForOffset } from "../runtime/document-navigation.ts";
+import {
+  DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP,
+  estimateBlockHeight,
+  estimateParagraphLineCount,
+  estimateParagraphLineHeight,
+  getUsableColumnWidth,
+} from "../runtime/page-layout-estimation.ts";
+
+const DOCUMENT_CONTENT_TOP_PADDING_PX = 40;
 
 export interface LineMarker {
   id: string;
@@ -14,14 +24,76 @@ export function computeLineMarkersIfEnabled(input: {
   pageLayout: PageLayoutSnapshot | undefined;
   surfaceBlocks: readonly SurfaceBlockSnapshot[];
   pages: ReadonlyArray<DocumentNavigationSnapshot["pages"][number]>;
-  buildLineNumberMarkers: (
-    blocks: readonly SurfaceBlockSnapshot[],
-    pages: ReadonlyArray<DocumentNavigationSnapshot["pages"][number]>,
-  ) => LineMarker[];
 }): LineMarker[] {
   if (!input.pageLayout?.lineNumbering) {
     return [];
   }
 
-  return input.buildLineNumberMarkers(input.surfaceBlocks, input.pages);
+  return buildLineNumberMarkers(input.surfaceBlocks, input.pages);
+}
+
+function buildLineNumberMarkers(
+  blocks: readonly SurfaceBlockSnapshot[],
+  pages: ReadonlyArray<DocumentNavigationSnapshot["pages"][number]>,
+): LineMarker[] {
+  const markers: LineMarker[] = [];
+  if (pages.length === 0) {
+    return markers;
+  }
+
+  let currentTopTwips = 0;
+  let lineNumber = 1;
+  let lastPageIndex = -1;
+  let lastSectionIndex = -1;
+
+  for (const block of blocks) {
+    const pageIndex = findPageForOffset(pages, block.from);
+    const page = pages[pageIndex];
+    if (!page) {
+      continue;
+    }
+
+    const lineNumbering = page.layout.lineNumbering;
+    const restartMode = lineNumbering?.restart ?? "newPage";
+    const restartStart = lineNumbering?.start ?? 1;
+    const countBy = Math.max(1, lineNumbering?.countBy ?? 1);
+    const columnWidth = getUsableColumnWidth(page.layout);
+
+    if (pageIndex !== lastPageIndex) {
+      if (restartMode === "newPage" || lastPageIndex === -1) {
+        lineNumber = restartStart;
+      }
+      lastPageIndex = pageIndex;
+    }
+    if (page.sectionIndex !== lastSectionIndex) {
+      if (restartMode === "newSection" || lastSectionIndex === -1) {
+        lineNumber = restartStart;
+      }
+      lastSectionIndex = page.sectionIndex;
+    }
+
+    if (block.kind === "paragraph" && lineNumbering) {
+      const lineCount = estimateParagraphLineCount(block, columnWidth);
+      const lineHeight = estimateParagraphLineHeight(block);
+      const suppress = block.suppressLineNumbers === true;
+      for (let lineIndex = 0; lineIndex < lineCount; lineIndex += 1) {
+        if (!suppress && (lineNumber - restartStart) % countBy === 0) {
+          markers.push({
+            id: `${block.blockId}-${lineIndex}`,
+            label: String(lineNumber),
+            topPx:
+              DOCUMENT_CONTENT_TOP_PADDING_PX +
+              (currentTopTwips + lineIndex * lineHeight) * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP,
+          });
+        }
+        if (!suppress) {
+          lineNumber += 1;
+        }
+      }
+    }
+
+    currentTopTwips += estimateBlockHeight(block, columnWidth);
+  }
+
+  return markers;
 }

package/src/ui-tailwind/page-stack/tw-page-stack-chrome-layer.tsx

@@ -147,7 +147,7 @@ export interface TwPageStackChromeLayerProps {
   "data-testid"?: string;
 }
 
-export const TwPageStackChromeLayer: React.FC<TwPageStackChromeLayerProps> = ({
+const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
   facet,
   scrollRoot,
   renderFrameRevision,
@@ -409,4 +409,59 @@ export const TwPageStackChromeLayer: React.FC<TwPageStackChromeLayerProps> = ({
   );
 };
 
+function storyTargetEqual(
+  a: TwPageStackChromeLayerProps["activeStory"],
+  b: TwPageStackChromeLayerProps["activeStory"],
+): boolean {
+  if (a.kind !== b.kind) return false;
+  if (a.kind === "main") return true;
+  if (a.kind === "footnote" || a.kind === "endnote") {
+    // TS narrows a to { noteId: string }; b shares the same kind (guard above)
+    return a.noteId === (b as Extract<typeof b, { noteId: string }>).noteId;
+  }
+  if (a.kind === "header" || a.kind === "footer") {
+    const bh = b as Extract<typeof b, { kind: "header" | "footer" }>;
+    return (
+      a.relationshipId === bh.relationshipId &&
+      a.variant === bh.variant &&
+      a.sectionIndex === bh.sectionIndex
+    );
+  }
+  return false;
+}
+
+function rangeEqual(
+  a: { start: number; end: number } | null | undefined,
+  b: { start: number; end: number } | null | undefined,
+): boolean {
+  if (a == null && b == null) return true;
+  if (a == null || b == null) return false;
+  return a.start === b.start && a.end === b.end;
+}
+
+function propsAreEqual(
+  prev: TwPageStackChromeLayerProps,
+  next: TwPageStackChromeLayerProps,
+): boolean {
+  return (
+    prev.facet === next.facet &&
+    prev.scrollRoot === next.scrollRoot &&
+    prev.renderFrameRevision === next.renderFrameRevision &&
+    storyTargetEqual(prev.activeStory, next.activeStory) &&
+    prev.onOpenStory === next.onOpenStory &&
+    prev.pmSurfaceElement === next.pmSurfaceElement &&
+    prev.pmView === next.pmView &&
+    rangeEqual(prev.visiblePageIndexRange, next.visiblePageIndexRange) &&
+    prev["data-testid"] === next["data-testid"]
+  );
+}
+
+export const TwPageStackChromeLayer = React.memo(
+  TwPageStackChromeLayerInner,
+  propsAreEqual,
+);
+
+/** Exported for unit testing only. */
+export { propsAreEqual as _propsAreEqualForTest };
+
 export default TwPageStackChromeLayer;

package/src/ui-tailwind/page-stack/tw-region-block-renderer.tsx

@@ -140,6 +140,7 @@ function RegionParagraph({
   const resolvedNumbering = block.resolvedNumbering;
   const markerRunProperties = resolvedNumbering?.markerRunProperties;
   const markerWidth = resolvedNumbering?.geometry?.markerLane?.width;
+  const markerStart = resolvedNumbering?.geometry?.markerLane?.start;
   const markerJustification = resolvedNumbering?.geometry?.markerJustification;
 
   const prefixSpan =
@@ -164,6 +165,7 @@ function RegionParagraph({
           numberingSuffix,
           markerRunProperties,
           markerWidth,
+          markerStart,
           markerJustification,
         )}
       >