@beyondwork/docx-react-component 1.0.57 → 1.0.59

package/src/ui-tailwind/editor-surface/pm-schema.ts

@@ -8,6 +8,7 @@ import {
 import {
   isSupportedShapeGeometry,
   renderShapeSvg,
+  type GradientFill,
   type ShapeFill,
   type ShapeLine,
 } from "./shape-renderer.ts";
@@ -83,6 +84,16 @@ function safeHexColor(raw: string | null | undefined): string | null {
   return HEX_COLOR_RE.test(raw) ? `#${raw}` : null;
 }
 
+/** Strict CSS hex validator for inline style sinks. Accepts 3/4/6/8-digit hex with optional leading #. */
+function safeFilterHexColor(raw: string | null | undefined): string | null {
+  if (!raw || raw === "auto") return null;
+  const trimmed = raw.trim();
+  if (!/^#?(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(trimmed)) {
+    return null;
+  }
+  return `#${trimmed.replace(/^#/, "").toUpperCase()}`;
+}
+
 /** Validate a CSS color value (may already include #). Returns the value or null. */
 function safeCssColor(raw: string | null | undefined): string | null {
   if (!raw) return null;
@@ -124,6 +135,20 @@ function resolveMarkerJustificationCss(raw: string | null): string {
   }
 }
 
+function resolveMarkerAlignCss(raw: string | null): string {
+  switch (raw) {
+    case "left":
+      return "left";
+    case "center":
+      return "center";
+    case "right":
+    case "both":
+    case "distribute":
+    default:
+      return "right";
+  }
+}
+
 /**
  * ProseMirror schema for the supported live surface slice.
  *
@@ -147,8 +172,10 @@ export const editorSchema = new Schema({
         numberingPrefix: { default: null },
         numberingSuffix: { default: null },
         numberingMarkerWidth: { default: null },
+        numberingMarkerStart: { default: null },
         numberingMarkerJustification: { default: null },
         numberingMarkerRunProperties: { default: null },
+        numberingPicBulletSrc: { default: null },
         alignment: { default: null },
         spacingBefore: { default: null },
         spacingAfter: { default: null },
@@ -217,7 +244,7 @@ export const editorSchema = new Schema({
         else if (lineSpacing && lineRule === "exact") styles.push(`line-height: ${lineSpacing / 20}pt`);
         else if (lineSpacing && lineRule === "atLeast") styles.push(`min-height: ${lineSpacing / 20}pt`);
         const indentLeft = node.attrs.indentLeft as number | null;
-        if (indentLeft) styles.push(`padding-left: ${indentLeft / 20}pt`);
+        if (indentLeft !== null) styles.push(`padding-left: ${indentLeft / 20}pt`);
         const indentRight = node.attrs.indentRight as number | null;
         if (indentRight) styles.push(`padding-right: ${indentRight / 20}pt`);
         const indentFirstLine = node.attrs.indentFirstLine as number | null;
@@ -271,7 +298,9 @@ export const editorSchema = new Schema({
         const numberingLevel = node.attrs.numberingLevel as number | null;
         const numberingSuffix = node.attrs.numberingSuffix as "tab" | "space" | "nothing" | null;
         const numberingMarkerWidth = node.attrs.numberingMarkerWidth as number | null;
+        const numberingMarkerStart = node.attrs.numberingMarkerStart as number | null;
         const numberingMarkerJustification = node.attrs.numberingMarkerJustification as string | null;
+        const numberingPicBulletSrc = node.attrs.numberingPicBulletSrc as string | null;
         const children: Array<string | number | readonly unknown[]> = [];
         if (pageBreak) {
           children.push([
@@ -285,10 +314,10 @@ export const editorSchema = new Schema({
             "Page break",
           ]);
         }
-        if (numberingPrefix) {
+        if (numberingPrefix || numberingPicBulletSrc) {
           const hasResolvedMarkerWidth =
             typeof numberingMarkerWidth === "number" && numberingMarkerWidth > 0;
-          const fallbackMinWidth = Math.min(Math.max(numberingPrefix.length + 1, 4), 14);
+          const fallbackMinWidth = Math.min(Math.max((numberingPrefix?.length ?? 1) + 1, 4), 14);
           const fallbackMarginRight =
             numberingSuffix === "nothing"
               ? "0.25rem"
@@ -315,7 +344,7 @@ export const editorSchema = new Schema({
 
           const prefixStyles = [
             `font-variant-numeric: tabular-nums`,
-            `justify-content: ${resolveMarkerJustificationCss(numberingMarkerJustification)}`,
+            `text-align: ${resolveMarkerAlignCss(numberingMarkerJustification)}`,
           ];
 
           if (markerRunProperties) {
@@ -344,9 +373,11 @@ export const editorSchema = new Schema({
               `width: ${markerWidthPt}pt`,
               `min-width: ${markerWidthPt}pt`,
               `flex-basis: ${markerWidthPt}pt`,
+              `margin-left: -${markerWidthPt}pt`,
               `margin-right: 0`,
               `overflow: visible`,
             );
+            void numberingMarkerStart; // consumed via paragraph padding-left geometry
           } else {
             prefixStyles.push(
               `min-width: ${fallbackMinWidth}ch`,
@@ -359,14 +390,16 @@ export const editorSchema = new Schema({
             {
               class: baseClasses.join(" "),
               contenteditable: "false",
-              "data-numbering-prefix": numberingPrefix,
+              "data-numbering-prefix": numberingPicBulletSrc ? "" : (numberingPrefix ?? ""),
               ...(typeof numberingLevel === "number"
                 ? { "data-numbering-level": String(numberingLevel) }
                 : {}),
               ...(numberingSuffix ? { "data-numbering-suffix": numberingSuffix } : {}),
               style: prefixStyles.join("; "),
             },
-            numberingPrefix,
+            numberingPicBulletSrc
+              ? (["img", { src: numberingPicBulletSrc, alt: "", "aria-hidden": "true", style: "max-width:100%;max-height:100%;object-fit:contain;display:block;" }] as readonly unknown[])
+              : (numberingPrefix ?? ""),
           ]);
         }
         children.push([
@@ -465,6 +498,12 @@ export const editorSchema = new Schema({
         wrapMode: { default: null },
         distMargins: { default: null },
         positionH: { default: null },
+        // Lane 6d N9.b — polygon clip for tight/through wrap.
+        wrapPolygon: { default: null },
+        // Lane 6d N11.b — CSS filter effects (soft-edge, outer shadow, glow).
+        softEdgeRadius: { default: null },
+        outerShadow: { default: null },
+        glow: { default: null },
       },
       toDOM(node) {
         const isMissing = node.attrs.state === "missing";
@@ -496,14 +535,67 @@ export const editorSchema = new Schema({
               `inset(${(srcRect.top / SRCRECT_UNITS_PER_PERCENT).toFixed(3)}% ${(srcRect.right / SRCRECT_UNITS_PER_PERCENT).toFixed(3)}% ${(srcRect.bottom / SRCRECT_UNITS_PER_PERCENT).toFixed(3)}% ${(srcRect.left / SRCRECT_UNITS_PER_PERCENT).toFixed(3)}%)`,
             );
           }
+          // N11.b filter effects → CSS filter on the img element.
+          const softEdgeRadius = node.attrs.softEdgeRadius as number | null;
+          const outerShadow = node.attrs.outerShadow as {
+            blurRad: number; dist: number; dir: number; color: string;
+            colorType: "srgbClr" | "schemeClr";
+          } | null;
+          const glow = node.attrs.glow as {
+            radius: number; color: string;
+            colorType: "srgbClr" | "schemeClr";
+          } | null;
+          const filterParts: string[] = [];
+          if (softEdgeRadius) {
+            filterParts.push(`blur(${(softEdgeRadius / EMU_PER_PX).toFixed(2)}px)`);
+          }
+          // Defense in depth: even though parse-picture.ts validates
+          // srgbClr@val against a strict hex allowlist, re-validate here at
+          // the CSS sink so a future parser refactor or a bypass that lands
+          // attacker-controlled text in node.attrs cannot escape
+          // `drop-shadow(#…)` into arbitrary CSS (e.g. `FF0000) url(…)/*`).
+          // safeFilterHexColor returns `#RRGGBB` on valid hex input and
+          // empty string otherwise, so schemeClr tokens (e.g. "accent1")
+          // naturally skip this branch until a theme resolver runs.
+          const safeFilterHexColor = (raw: unknown): string => {
+            return typeof raw === "string" &&
+              /^[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/.test(raw)
+              ? `#${raw.toUpperCase()}`
+              : "";
+          };
+          if (glow) {
+            const glowColor = safeFilterHexColor(glow.color);
+            if (glowColor) {
+              filterParts.push(`drop-shadow(0 0 ${(glow.radius / EMU_PER_PX).toFixed(2)}px ${glowColor})`);
+            }
+          }
+          if (outerShadow) {
+            const shadowColor = safeFilterHexColor(outerShadow.color);
+            if (shadowColor) {
+              const blurPx = (outerShadow.blurRad / EMU_PER_PX).toFixed(2);
+              const distPx = outerShadow.dist / EMU_PER_PX;
+              const dirRad = (outerShadow.dir / ROTATION_UNITS_PER_DEGREE) * (Math.PI / 180);
+              const dx = (distPx * Math.cos(dirRad)).toFixed(2);
+              const dy = (distPx * Math.sin(dirRad)).toFixed(2);
+              filterParts.push(`drop-shadow(${dx}px ${dy}px ${blurPx}px ${shadowColor})`);
+            }
+          }
           // N9 float-wrap → CSS float + shape-outside on the wrapper span.
           const wrapMode = node.attrs.wrapMode as string | null;
           const positionH = node.attrs.positionH as { align?: string } | null;
           const distMargins = node.attrs.distMargins as
             | { top?: number; bottom?: number; left?: number; right?: number }
             | null;
+          const wrapPolygon = node.attrs.wrapPolygon as Array<{ x: number; y: number }> | null;
           const wrapperStyleParts: string[] = [];
-          if (isFloating && wrapMode === "square") {
+          if (isFloating && (wrapMode === "tight" || wrapMode === "through") && wrapPolygon?.length) {
+            // N9.b — polygon clip: OOXML wrapPolygon coords are in 21600ths-of-image units.
+            const floatSide = positionH?.align === "right" ? "right" : "left";
+            const pts = wrapPolygon
+              .map((p) => `${(p.x / 21600 * 100).toFixed(2)}% ${(p.y / 21600 * 100).toFixed(2)}%`)
+              .join(", ");
+            wrapperStyleParts.push(`float:${floatSide}`, `shape-outside:polygon(${pts})`);
+          } else if (isFloating && wrapMode === "square") {
             const floatSide = positionH?.align === "right" ? "right" : "left";
             wrapperStyleParts.push(
               `float:${floatSide}`,
@@ -527,6 +619,7 @@ export const editorSchema = new Schema({
             heightPx ? `height:${heightPx}px` : "",
             transformParts.length > 0 ? `transform:${transformParts.join(" ")}` : "",
             clipParts.length > 0 ? `clip-path:${clipParts[0]}` : "",
+            filterParts.length > 0 ? `filter:${filterParts.join(" ")}` : "",
           ].filter(Boolean).join(";");
           const wrapperStyle = wrapperStyleParts.join(";");
           const wrapperAttrs: Record<string, string> = {
@@ -872,14 +965,7 @@ export const editorSchema = new Schema({
           const geometry = node.attrs.geometry as string | null;
           const fill = node.attrs.fill as
             | ShapeFill
-            | {
-                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;
-              }
+            | GradientFill
             | {
                 kind: "pattern";
                 preset: string;
@@ -891,11 +977,13 @@ export const editorSchema = new Schema({
           const heightEmu = node.attrs.heightEmu as number | null;
           const widthPx = widthEmu ? Math.max(8, Math.round(widthEmu / EMU_PER_PX)) : null;
           const heightPx = heightEmu ? Math.max(8, Math.round(heightEmu / EMU_PER_PX)) : null;
+          // N10.b — gradient fills pass through to renderShapeSvg (SVG defs path).
+          // Pattern fills remain unsupported → chip fallback.
           const svgFill =
             fill === undefined || fill === null
               ? undefined
-              : fill.kind === "solid" || fill.kind === "none"
-                ? fill
+              : fill.kind === "solid" || fill.kind === "none" || fill.kind === "gradient"
+                ? (fill as ShapeFill | GradientFill)
                 : undefined;
           // N10 — try SVG render path for supported geometries with extent.
           if (

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

@@ -374,8 +374,14 @@ function buildParagraph(
         paragraphLayout.indentation.firstLine < 0
           ? Math.abs(paragraphLayout.indentation.firstLine)
           : null),
+      numberingMarkerStart: paragraphLayout.markerLane?.start ?? null,
       numberingMarkerJustification: paragraphLayout.markerJustification ?? null,
       numberingMarkerRunProperties: block.resolvedNumbering?.markerRunProperties ?? null,
+      numberingPicBulletSrc: (() => {
+        const mediaId = block.resolvedNumbering?.picBulletMediaId;
+        if (!mediaId) return null;
+        return mediaPreviews[mediaId]?.src ?? null;
+      })(),
       shadingFill: block.shading?.fill ?? cascade?.shading?.fill ?? null,
       borderTop: (block.borders as Record<string, unknown>)?.top ?? cascadeBorders?.top ?? null,
       borderBottom: (block.borders as Record<string, unknown>)?.bottom ?? cascadeBorders?.bottom ?? null,
@@ -464,6 +470,12 @@ function buildInlineContent(
           wrapMode: segment.anchor?.wrapMode ?? null,
           distMargins: segment.anchor?.distMargins ?? null,
           positionH: segment.anchor?.positionH ?? null,
+          // Lane 6d N9.b — polygon clip.
+          wrapPolygon: segment.anchor?.wrapPolygon ?? null,
+          // Lane 6d N11.b — filter effects.
+          softEdgeRadius: segment.pictureEffects?.softEdgeRadius ?? null,
+          outerShadow: segment.pictureEffects?.outerShadow ?? null,
+          glow: segment.pictureEffects?.glow ?? null,
         }),
       ];
       }
@@ -583,6 +595,7 @@ function buildTable(
     {
       styleId: block.styleId ?? null,
       gridColumns: block.gridColumns,
+      gridColumnsRelative: block.gridColumnsRelative ?? null,
       alignment: block.alignment ?? null,
       tblLookFirstRow: block.tblLook?.firstRow ?? false,
       tblLookLastRow: block.tblLook?.lastRow ?? false,

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;
 }