@stll/folio-core 0.45.0 → 0.47.0

package/dist/layout-engine/types.d.ts

@@ -1,7 +1,8 @@
 import { OutlineStyleAttr } from "../types/documentEnumValues.js";
-import { ImagePosition, ImageWrap, NumberFormat, SdtProperties, SdtType, ShapeTextBody, TableCellFormatting, TableWidthType, VerticalAlign } from "@stll/docx-core/model";
+import { CssBorderStyle } from "../utils/borderCss.js";
+import { ImagePosition, ImageWrap, InlineWrapper, NumberFormat, OutlineLevel, ParagraphNumberingOverride, PreviewDescriptor, SdtProperties, SdtType, SectionStart, ShapeTextBody, TableCellFormatting, TableWidthType, UnderlineStyle, VerticalAlign } from "@stll/docx-core/model";
 declare namespace types_d_exports {
-  export { BlockId, BorderStyle, CellBorderSpec, CellBorders, ColumnBreakBlock, ColumnBreakMeasure, ColumnLayout, DEFAULT_TEXTBOX_MARGINS, DEFAULT_TEXTBOX_WIDTH, DocumentPosition, FOOTNOTE_ENTRY_MARGIN_BOTTOM, FOOTNOTE_FALLBACK_LINE_HEIGHT, FOOTNOTE_SEPARATOR_HEIGHT, FieldRun, FloatingTablePosition, FlowBlock, FootnoteContent, Fragment, FragmentBase, HeaderFooterContent, HeaderFooterContentHeights, HeaderFooterLayout, HitTestResult, HyperlinkInfo, ImageBlock, ImageFragment, ImageMeasure, ImageRun, ImageRunPosition, Layout, LayoutOptions, LineBreakRun, ListMarkerFormatting, ListNumPr, MathRun, Measure, MeasuredLine, Page, PageBreakBlock, PageBreakMeasure, PageHeaderFooterRefs, PageMargins, ParagraphAttrs, ParagraphBlock, ParagraphBorders, ParagraphFragment, ParagraphIndent, ParagraphMeasure, ParagraphSpacing, RenderedPageBreakRun, Run, RunFormatting, SdtGroup, SectionBreakBlock, SectionBreakMeasure, SectionPageNumbering, TabAlignment, TabRun, TabStop, TableBlock, TableCell, TableCellMeasure, TableFragment, TableMeasure, TableRow, TableRowMeasure, TextBoxBlock, TextBoxFlowAttrs, TextBoxFragment, TextBoxMeasure, TextRun, floatingTextBoxReservesBand, floatingTextBoxWrapsText, getTableRowLeadingWidth, isFloatingImageRun, isFloatingTextBoxBlock, isTextWrappingFloatingImageRun, resolveTableCellPadding, resolveTableWidthPx, tableColumnsArePinned };
+  export { BlockId, BorderStyle, CellBorderSpec, CellBorders, ColumnBreakBlock, ColumnBreakMeasure, ColumnLayout, DEFAULT_TEXTBOX_MARGINS, DEFAULT_TEXTBOX_WIDTH, DocumentPosition, FOOTNOTE_ENTRY_MARGIN_BOTTOM, FOOTNOTE_FALLBACK_LINE_HEIGHT, FOOTNOTE_SEPARATOR_HEIGHT, FieldRun, FloatingTablePosition, FlowBlock, FootnoteContent, Fragment, FragmentBase, HeaderFooterContent, HeaderFooterContentHeights, HeaderFooterLayout, HitTestResult, HyperlinkInfo, ImageBlock, ImageFragment, ImageMeasure, ImageRun, ImageRunPosition, Layout, LayoutOptions, LineBreakRun, ListMarkerFormatting, MathRun, Measure, MeasuredLine, Page, PageBreakBlock, PageBreakMeasure, PageHeaderFooterRefs, PageMargins, ParagraphAttrs, ParagraphBlock, ParagraphBorders, ParagraphFragment, ParagraphIndent, ParagraphMeasure, ParagraphSpacing, RenderedPageBreakRun, Run, RunFormatting, SdtGroup, SectionBreakBlock, SectionBreakMeasure, SectionPageNumbering, TabAlignment, TabRun, TabStop, TableBlock, TableCell, TableCellMeasure, TableFragment, TableMeasure, TableRow, TableRowMeasure, TextBoxBlock, TextBoxFlowAttrs, TextBoxFragment, TextBoxMeasure, TextRun, floatingTextBoxReservesBand, floatingTextBoxWrapsText, getTableRowLeadingWidth, isFloatingImageRun, isFloatingTextBoxBlock, isListNumPr, isTextWrappingFloatingImageRun, resolveTableCellPadding, resolveTableWidthPx, tableColumnsArePinned };
 }
 /**
  * Unique identifier for a block in the document.
@@ -14,8 +15,13 @@ type BlockId = string | number;
 type RunFormatting = {
   bold?: boolean;
   italic?: boolean;
+  /**
+   * `w:u`: `true` for a plain underline, or the authored `ST_Underline` member
+   * and colour. The style is the model's union, not a CSS
+   * `text-decoration-style`: the painter translates it.
+   */
   underline?: boolean | {
-    style?: string;
+    style?: UnderlineStyle;
     color?: string;
   };
   strike?: boolean;
@@ -67,6 +73,8 @@ type RunFormatting = {
     bidi?: string;
   };
   fontSize?: number;
+  /** The imported deletion already resolved its pre-change style hierarchy. */
+  usesHistoricalFormatting?: true;
   letterSpacing?: number;
   superscript?: boolean;
   subscript?: boolean;
@@ -99,6 +107,20 @@ type RunFormatting = {
    * RTL; the painter sets `dir="ltr"` so style/paragraph RTL does not leak in.
    */
   rtl?: boolean;
+  /**
+   * The bidirectional wrapper (`w:bdo` / `w:dir`) the run was authored inside,
+   * when it was inside one. An override switches the bidirectional algorithm
+   * off for its content, which is what makes a Latin word inside an `rtl`
+   * override read backwards; an embedding opens a level and leaves the
+   * algorithm on. `direction` is the wrapper's own `w:val`, absent when the
+   * wrapper states none.
+   *
+   * Distinct from `rtl`, which is the run's own `w:rtl` property: the wrapper
+   * is a container the author wrote around the run, not a property of it.
+   */
+  bidiWrapper?: Omit<Extract<InlineWrapper, {
+    kind: "bidi";
+  }>, "type" | "kind" | "content">;
   /**
    * Text effect animation hint (w:effect). Word 2013+ no longer animates,
    * but the painter emits `docx-text-effect-<name>` plus `data-effect` so
@@ -201,6 +223,8 @@ type ImageRunPosition = {
 type ImageRun = {
   kind: "image";
   src: string;
+  /** Set instead of `src` for a drawing with no image data; see {@link ImageBlock.preview}. */
+  preview?: PreviewDescriptor;
   width: number;
   height: number;
   alt?: string;
@@ -212,6 +236,10 @@ type ImageRun = {
    * eigenpal #424 (opacity render pipeline).
    */
   opacity?: number;
+  /** DrawingML picture brightness as a signed percentage. */
+  brightness?: number;
+  /** DrawingML picture contrast as a signed percentage. */
+  contrast?: number;
   /** Position for floating/anchored images */
   position?: ImageRunPosition;
   /** Whether a table-cell anchor uses the cell as its positioning scope. Undefined defaults true. */
@@ -242,7 +270,7 @@ type ImageRun = {
   /** CSS border color. eigenpal #1096. */
   borderColor?: string;
   /** CSS border style. eigenpal #1096. */
-  borderStyle?: string;
+  borderStyle?: CssBorderStyle;
   /** Whether this picture is itself a tracked insertion (`<w:ins>`). eigenpal #641. */
   isInsertion?: boolean;
   /** Whether this picture is itself a tracked deletion (`<w:del>`). eigenpal #641. */
@@ -349,7 +377,7 @@ type TabStop = {
  * Border specification for paragraphs.
  */
 type BorderStyle = {
-  style?: string;
+  style?: CssBorderStyle;
   width?: number;
   color?: string;
   space?: number;
@@ -366,12 +394,19 @@ type ParagraphBorders = {
   bar?: BorderStyle;
 };
 /**
- * List numbering properties for a paragraph.
+ * Whether a paragraph states numbering at all.
+ *
+ * `null` is the ProseMirror attr's absent state and `undefined` the model's,
+ * so both mean the same thing here. It says nothing about what the statement
+ * resolves to: a cancellation is a statement, and which arm it is belongs to
+ * a `switch`, not to this one.
+ *
+ * Stated equality has one owner too, and it is
+ * {@link sameStatedParagraphNumbering}: the marker tier and the layout tier
+ * used to hold byte-identical copies under different names, and an equality
+ * that drifts is how a list silently renumbers.
  */
-type ListNumPr = {
-  numId?: number;
-  ilvl?: number;
-};
+declare const isListNumPr: (value: ParagraphNumberingOverride | null | undefined) => value is ParagraphNumberingOverride;
 /**
  * Paragraph block attributes.
  */
@@ -407,8 +442,8 @@ type ParagraphAttrs = {
     };
     useLegacyEthiopicAmharicRules?: boolean;
   };
-  /** OOXML outline level (`w:outlineLvl`), where zero is the top level. */
-  outlineLevel?: number;
+  /** The stated OOXML outline level (`w:outlineLvl`), heading or body text. */
+  outlineLevel?: OutlineLevel;
   spacing?: ParagraphSpacing;
   /** Whether this paragraph participates in the active section line grid. */
   snapToGrid?: boolean;
@@ -464,7 +499,7 @@ type ParagraphAttrs = {
   suppressEmptyParagraphHeight?: boolean;
   /** Reserve the reference extra line advance for a story-leading empty level-0 outline paragraph. */
   reserveEmptyOutlineHeight?: boolean;
-  numPr?: ListNumPr;
+  numPr?: ParagraphNumberingOverride;
   listMarker?: string;
   listIsBullet?: boolean;
   listMarkerHidden?: boolean;
@@ -546,7 +581,7 @@ type ParagraphBlock = {
 type CellBorderSpec = {
   width?: number;
   color?: string;
-  style?: string;
+  style?: CssBorderStyle;
 };
 /**
  * Cell borders (all four sides).
@@ -670,6 +705,12 @@ type ImageBlock = {
   kind: "image";
   id: BlockId;
   src: string;
+  /**
+   * Set instead of `src` for a drawing with no image data: the display list
+   * rasterises it when it interns it. `src` is then empty, and a block with
+   * neither paints nothing, as before.
+   */
+  preview?: PreviewDescriptor;
   width: number;
   height: number;
   alt?: string;
@@ -681,6 +722,10 @@ type ImageBlock = {
    * eigenpal #424 (opacity render pipeline).
    */
   opacity?: number;
+  /** DrawingML picture brightness as a signed percentage. */
+  brightness?: number;
+  /** DrawingML picture contrast as a signed percentage. */
+  contrast?: number;
   anchor?: {
     isAnchored?: boolean;
     offsetH?: number;
@@ -702,7 +747,7 @@ type ImageBlock = {
   /** CSS border color. eigenpal #1096. */
   borderColor?: string;
   /** CSS border style. eigenpal #1096. */
-  borderStyle?: string;
+  borderStyle?: CssBorderStyle;
   pmStart?: number;
   pmEnd?: number;
 };
@@ -712,7 +757,14 @@ type ImageBlock = {
 type SectionBreakBlock = {
   kind: "sectionBreak";
   id: BlockId;
-  type?: "continuous" | "nextPage" | "evenPage" | "oddPage";
+  /**
+   * How the section starting at this boundary begins (`w:sectPr/w:type`,
+   * §17.6.22). `SectionStart` is `ST_SectionMark` in full, so the bridge hands
+   * the parsed value straight through: a member the layout does not model
+   * fails the paginator's exhaustiveness check instead of being cast in.
+   * Absent means `nextPage`; `normalizeSectionBreakType` owns that reading.
+   */
+  type?: SectionStart;
   pageSize?: {
     w: number;
     h: number;
@@ -1438,4 +1490,4 @@ declare function resolveTableWidthPx(width: number | undefined, widthType: Table
 /** Return the leading visual offset for a row with omitted grid columns. */
 declare const getTableRowLeadingWidth: (row: TableRow, columnWidths: readonly number[]) => number;
 //#endregion
-export { BlockId, BorderStyle, CellBorderSpec, CellBorders, ColumnBreakBlock, ColumnBreakMeasure, ColumnLayout, DEFAULT_TEXTBOX_MARGINS, DEFAULT_TEXTBOX_WIDTH, DocumentPosition, FOOTNOTE_ENTRY_MARGIN_BOTTOM, FOOTNOTE_FALLBACK_LINE_HEIGHT, FOOTNOTE_SEPARATOR_HEIGHT, FieldRun, FloatingTablePosition, FlowBlock, FootnoteContent, Fragment, FragmentBase, HeaderFooterContent, HeaderFooterContentHeights, HeaderFooterLayout, HitTestResult, HyperlinkInfo, ImageBlock, ImageFragment, ImageMeasure, ImageRun, ImageRunPosition, Layout, LayoutOptions, LineBreakRun, ListMarkerFormatting, ListNumPr, MathRun, Measure, MeasuredLine, Page, PageBreakBlock, PageBreakMeasure, PageHeaderFooterRefs, PageMargins, ParagraphAttrs, ParagraphBlock, ParagraphBorders, ParagraphFragment, ParagraphIndent, ParagraphMeasure, ParagraphSpacing, RenderedPageBreakRun, Run, RunFormatting, SdtGroup, SectionBreakBlock, SectionBreakMeasure, SectionPageNumbering, TabAlignment, TabRun, TabStop, TableBlock, TableCell, TableCellMeasure, TableFragment, TableMeasure, TableRow, TableRowMeasure, TextBoxBlock, TextBoxFlowAttrs, TextBoxFragment, TextBoxMeasure, TextRun, floatingTextBoxReservesBand, floatingTextBoxWrapsText, getTableRowLeadingWidth, isFloatingImageRun, isFloatingTextBoxBlock, isTextWrappingFloatingImageRun, resolveTableCellPadding, resolveTableWidthPx, tableColumnsArePinned, types_d_exports };
+export { BlockId, BorderStyle, CellBorderSpec, CellBorders, ColumnBreakBlock, ColumnBreakMeasure, ColumnLayout, DEFAULT_TEXTBOX_MARGINS, DEFAULT_TEXTBOX_WIDTH, DocumentPosition, FOOTNOTE_ENTRY_MARGIN_BOTTOM, FOOTNOTE_FALLBACK_LINE_HEIGHT, FOOTNOTE_SEPARATOR_HEIGHT, FieldRun, FloatingTablePosition, FlowBlock, FootnoteContent, Fragment, FragmentBase, HeaderFooterContent, HeaderFooterContentHeights, HeaderFooterLayout, HitTestResult, HyperlinkInfo, ImageBlock, ImageFragment, ImageMeasure, ImageRun, ImageRunPosition, Layout, LayoutOptions, LineBreakRun, ListMarkerFormatting, MathRun, Measure, MeasuredLine, Page, PageBreakBlock, PageBreakMeasure, PageHeaderFooterRefs, PageMargins, ParagraphAttrs, ParagraphBlock, ParagraphBorders, ParagraphFragment, ParagraphIndent, ParagraphMeasure, ParagraphSpacing, RenderedPageBreakRun, Run, RunFormatting, SdtGroup, SectionBreakBlock, SectionBreakMeasure, SectionPageNumbering, TabAlignment, TabRun, TabStop, TableBlock, TableCell, TableCellMeasure, TableFragment, TableMeasure, TableRow, TableRowMeasure, TextBoxBlock, TextBoxFlowAttrs, TextBoxFragment, TextBoxMeasure, TextRun, floatingTextBoxReservesBand, floatingTextBoxWrapsText, getTableRowLeadingWidth, isFloatingImageRun, isFloatingTextBoxBlock, isListNumPr, isTextWrappingFloatingImageRun, resolveTableCellPadding, resolveTableWidthPx, tableColumnsArePinned, types_d_exports };

package/dist/layout-engine/types.js

@@ -12,11 +12,26 @@ var types_exports = /* @__PURE__ */ __exportAll({
 	getTableRowLeadingWidth: () => getTableRowLeadingWidth,
 	isFloatingImageRun: () => isFloatingImageRun,
 	isFloatingTextBoxBlock: () => isFloatingTextBoxBlock,
+	isListNumPr: () => isListNumPr,
 	isTextWrappingFloatingImageRun: () => isTextWrappingFloatingImageRun,
 	resolveTableCellPadding: () => resolveTableCellPadding,
 	resolveTableWidthPx: () => resolveTableWidthPx,
 	tableColumnsArePinned: () => tableColumnsArePinned
 });
+/**
+* Whether a paragraph states numbering at all.
+*
+* `null` is the ProseMirror attr's absent state and `undefined` the model's,
+* so both mean the same thing here. It says nothing about what the statement
+* resolves to: a cancellation is a statement, and which arm it is belongs to
+* a `switch`, not to this one.
+*
+* Stated equality has one owner too, and it is
+* {@link sameStatedParagraphNumbering}: the marker tier and the layout tier
+* used to hold byte-identical copies under different names, and an equality
+* that drifts is how a list silently renumbers.
+*/
+const isListNumPr = (value) => value !== void 0 && value !== null;
 const DEFAULT_TABLE_CELL_PADDING = {
 	top: 0,
 	right: 7,
@@ -175,4 +190,4 @@ const getTableRowLeadingWidth = (row, columnWidths) => {
 	return columnWidths.slice(0, row.gridBefore ?? 0).reduce((sum, columnWidth) => sum + columnWidth, 0);
 };
 //#endregion
-export { DEFAULT_TEXTBOX_MARGINS, DEFAULT_TEXTBOX_WIDTH, FOOTNOTE_ENTRY_MARGIN_BOTTOM, FOOTNOTE_FALLBACK_LINE_HEIGHT, FOOTNOTE_SEPARATOR_HEIGHT, floatingTextBoxReservesBand, floatingTextBoxWrapsText, getTableRowLeadingWidth, isFloatingImageRun, isFloatingTextBoxBlock, isTextWrappingFloatingImageRun, resolveTableCellPadding, resolveTableWidthPx, tableColumnsArePinned, types_exports };
+export { DEFAULT_TEXTBOX_MARGINS, DEFAULT_TEXTBOX_WIDTH, FOOTNOTE_ENTRY_MARGIN_BOTTOM, FOOTNOTE_FALLBACK_LINE_HEIGHT, FOOTNOTE_SEPARATOR_HEIGHT, floatingTextBoxReservesBand, floatingTextBoxWrapsText, getTableRowLeadingWidth, isFloatingImageRun, isFloatingTextBoxBlock, isListNumPr, isTextWrappingFloatingImageRun, resolveTableCellPadding, resolveTableWidthPx, tableColumnsArePinned, types_exports };

package/dist/layout-painter/borderStroke.d.ts

@@ -1,8 +1,22 @@
-import { BorderStyle, ParagraphBorders } from "../layout-engine/types.js";
+import { CssBorderStyle } from "../utils/borderCss.js";
+import { ParagraphBorders } from "../layout-engine/types.js";
 //#region src/layout-painter/borderStroke.d.ts
+/**
+ * A CSS border to paint.
+ *
+ * `style` is the CSS keyword, never an `ST_Border` member and never a
+ * DrawingML dash: an outline's dash is translated by `cssBorderStyleForDash`
+ * before it reaches a border shorthand, because `border: 1px sysDash #000`
+ * invalidates the whole declaration.
+ */
+type BorderStroke = {
+  color?: string | undefined;
+  style?: CssBorderStyle | undefined;
+  width?: number | undefined;
+};
 type CssBorderStroke = {
   color: string;
-  style: string;
+  style: CssBorderStyle;
   width: number;
 };
 /**
@@ -10,8 +24,8 @@ type CssBorderStroke = {
  * fractional border width to one device pixel, so its color carries the
  * fractional coverage while layout keeps the authored width.
  */
-declare const resolveCssBorderStroke: (border: Pick<BorderStyle, "color" | "style" | "width">) => CssBorderStroke;
-declare const borderStrokeToCss: (border: Pick<BorderStyle, "color" | "style" | "width">) => string;
+declare const resolveCssBorderStroke: (border: BorderStroke) => CssBorderStroke;
+declare const borderStrokeToCss: (border: BorderStroke) => string;
 type ParagraphBorderHorizontalOutsets = {
   left: number;
   right: number;

package/dist/layout-painter/renderImage.d.ts

@@ -15,6 +15,8 @@ declare const IMAGE_CLASS_NAMES: {
  */
 type ImageVisualAttrs = {
   opacity?: number;
+  brightness?: number;
+  contrast?: number;
   cropTop?: number;
   cropRight?: number;
   cropBottom?: number;
@@ -43,6 +45,8 @@ declare function applyImageBorder(element: HTMLElement, border: ImageBorderAttrs
  */
 declare function hasImageVisualAttrs(v: ImageVisualAttrs): boolean;
 declare function hasImageCrop(v: ImageVisualAttrs): boolean;
+/** Apply non-geometric opacity and luminance effects to an image element. */
+declare function applyImageColorAttrs(img: HTMLImageElement, v: ImageVisualAttrs): void;
 /**
  * Apply an OOXML `<a:srcRect>` crop to an `<img>` whose parent already has
  * `overflow: hidden` and is sized to the *visible* (cropped) dimensions
@@ -96,4 +100,4 @@ type RenderImageFragmentOptions = {
  */
 declare function renderImageFragment(fragment: ImageFragment, block: ImageBlock, _measure: ImageMeasure, _context: RenderContext, options?: RenderImageFragmentOptions): HTMLElement;
 //#endregion
-export { IMAGE_CLASS_NAMES, ImageBorderAttrs, ImageVisualAttrs, RenderImageFragmentOptions, applyImageBorder, applyImageVisualAttrs, hasImageCrop, hasImageVisualAttrs, renderImageFragment, wrapImageWithCrop };
+export { IMAGE_CLASS_NAMES, ImageBorderAttrs, ImageVisualAttrs, RenderImageFragmentOptions, applyImageBorder, applyImageColorAttrs, applyImageVisualAttrs, hasImageCrop, hasImageVisualAttrs, renderImageFragment, wrapImageWithCrop };

package/dist/layout-painter/renderImage.js

@@ -1,3 +1,4 @@
+import { imageLuminanceFilter } from "../utils/imageLuminance.js";
 import { applySanitizedImageSrc } from "../utils/sanitizeImageSrc.js";
 import { anchorTargetAttrs, sanitizeExternalUrl } from "../utils/urlSecurity.js";
 //#region src/layout-painter/renderImage.ts
@@ -32,11 +33,17 @@ function applyImageBorder(element, border) {
 */
 function hasImageVisualAttrs(v) {
 	if (v.opacity != null && v.opacity < 1) return true;
-	return hasImageCrop(v);
+	return imageLuminanceFilter(v) !== void 0 || hasImageCrop(v);
 }
 function hasImageCrop(v) {
 	return Boolean(v.cropTop || v.cropRight || v.cropBottom || v.cropLeft);
 }
+/** Apply non-geometric opacity and luminance effects to an image element. */
+function applyImageColorAttrs(img, v) {
+	if (v.opacity != null && v.opacity < 1) img.style.opacity = String(Math.max(0, v.opacity));
+	const filter = imageLuminanceFilter(v);
+	if (filter !== void 0) img.style.filter = filter;
+}
 /**
 * Apply an OOXML `<a:srcRect>` crop to an `<img>` whose parent already has
 * `overflow: hidden` and is sized to the *visible* (cropped) dimensions
@@ -58,7 +65,7 @@ function hasImageCrop(v) {
 * call for plain images.
 */
 function applyImageVisualAttrs(img, v) {
-	if (v.opacity != null && v.opacity < 1) img.style.opacity = String(Math.max(0, v.opacity));
+	applyImageColorAttrs(img, v);
 	const top = v.cropTop ?? 0;
 	const right = v.cropRight ?? 0;
 	const bottom = v.cropBottom ?? 0;
@@ -159,4 +166,4 @@ function renderImageFragment(fragment, block, _measure, _context, options = {})
 	return containerEl;
 }
 //#endregion
-export { IMAGE_CLASS_NAMES, applyImageBorder, applyImageVisualAttrs, hasImageCrop, hasImageVisualAttrs, renderImageFragment, wrapImageWithCrop };
+export { IMAGE_CLASS_NAMES, applyImageBorder, applyImageColorAttrs, applyImageVisualAttrs, hasImageCrop, hasImageVisualAttrs, renderImageFragment, wrapImageWithCrop };

package/dist/layout-painter/renderPage.d.ts

@@ -19,6 +19,8 @@ type PageFloatingImage = {
    * opaque. eigenpal #424 (opacity render pipeline).
    */
   opacity?: number;
+  brightness?: number;
+  contrast?: number;
   /** Which side: 'left' for left margin, 'right' for right margin */
   side: "left" | "right";
   /** X position relative to content area (0 = left edge of content) */

package/dist/layout-painter/renderPage.js

@@ -3,6 +3,7 @@ import { rectsToFloatingZones } from "../layout-engine/measure/floatingZones.js"
 import { measureParagraph } from "../layout-engine/measure/measureParagraph.js";
 import { resolveTableInlineOffset } from "../layout-engine/measure/tableInlinePlacement.js";
 import { floatingTextBoxReservesBand, floatingTextBoxWrapsText, isFloatingImageRun, isFloatingTextBoxBlock, isTextWrappingFloatingImageRun } from "../layout-engine/types.js";
+import { cssBorderStyle } from "../utils/borderCss.js";
 import { resolveFontFamily } from "../utils/fontResolver.js";
 import { borderToStyle } from "../utils/formatToStyle.js";
 import { normalizeHorizontalScalePercent } from "../utils/horizontalScale.js";
@@ -17,6 +18,7 @@ import { renderTextBoxFragment } from "./renderTextBox.js";
 import { emuToPixels } from "./renderUtils.js";
 import { renderWatermarkLayer } from "./renderWatermark.js";
 import { panic } from "better-result";
+import { statesNoBorder } from "@stll/docx-core/model";
 //#region src/layout-painter/renderPage.ts
 /**
 * Page Renderer
@@ -76,13 +78,13 @@ function pageBorderSpacePx(border) {
 * exact stroke they will see on screen.
 */
 function pageBorderWidthPx(border) {
-	if (!border || border.style === "none" || border.style === "nil") return 0;
+	if (!border || statesNoBorder(border.style)) return 0;
 	const widthPx = border.size !== void 0 && border.size !== 0 ? eighthsToPixels(border.size) : 1;
 	const floored = Math.max(1, widthPx);
-	return border.style === "double" ? Math.max(3, floored) : floored;
+	return cssBorderStyle(border.style) === "double" ? Math.max(3, floored) : floored;
 }
 function applyPageBorderSide(element, border, side, theme) {
-	if (!border || border.style === "none" || border.style === "nil") return;
+	if (!border || statesNoBorder(border.style)) return;
 	const styles = borderToStyle(border, side, theme);
 	for (const [key, value] of Object.entries(styles)) element.style[key] = String(value);
 	const styleKey = `border${side}Style`;
@@ -100,7 +102,7 @@ function renderPageBorderOverlay(page, options, doc) {
 		pb.bottom,
 		pb.left,
 		pb.right
-	].some((border) => border && border.style !== "none" && border.style !== "nil")) return null;
+	].some((border) => border !== void 0 && !statesNoBorder(border.style))) return null;
 	const offsetFrom = pb.offsetFrom ?? "text";
 	const topOffset = pageBorderSpacePx(pb.top);
 	const rightOffset = pageBorderSpacePx(pb.right);
@@ -371,6 +373,8 @@ function extractFloatingImagesFromParagraph(block, fragmentY, geometry) {
 			...imgRun.alt !== void 0 ? { alt: imgRun.alt } : {},
 			...imgRun.transform !== void 0 ? { transform: imgRun.transform } : {},
 			...imgRun.opacity != null ? { opacity: imgRun.opacity } : {},
+			...imgRun.brightness != null ? { brightness: imgRun.brightness } : {},
+			...imgRun.contrast != null ? { contrast: imgRun.contrast } : {},
 			side,
 			x,
 			y,
@@ -460,6 +464,8 @@ function renderHeaderFooterContent(content, context, options, layout) {
 				height: run.height,
 				...run.alt !== void 0 ? { alt: run.alt } : {},
 				...run.opacity != null ? { opacity: run.opacity } : {},
+				...run.brightness != null ? { brightness: run.brightness } : {},
+				...run.contrast != null ? { contrast: run.contrast } : {},
 				...run.pmStart !== void 0 ? { pmStart: run.pmStart } : {},
 				...run.pmEnd !== void 0 ? { pmEnd: run.pmEnd } : {},
 				paragraphY: paragraphStartY,

package/dist/layout-painter/renderParagraph.d.ts

@@ -30,6 +30,18 @@ type RenderParagraphOptions = {
   renderedInlineImageKeys?: Set<string>;
 };
 declare function getRenderableTextColor(run: TextRun | TabRun): string | undefined;
+/**
+ * How CSS spells each bidirectional wrapper: an override switches the
+ * bidirectional algorithm off for its content, an embedding opens a level and
+ * leaves it on.
+ *
+ * Both painters write the keyword from here, so the DOM painter and the
+ * display list cannot spell the pair differently.
+ */
+declare const UNICODE_BIDI_BY_WRAPPER_CONTROL: {
+  readonly override: "bidi-override";
+  readonly embedding: "embed";
+};
 /**
  * Get leader character for tab
  */
@@ -122,6 +134,7 @@ type RenderLineOptions = {
  * @returns The line DOM element
  */
 declare function renderLine(block: ParagraphBlock, line: MeasuredLine, alignment: "left" | "center" | "right" | "justify" | undefined, doc: Document, options?: RenderLineOptions): HTMLElement;
+declare const paragraphHasTrackedChanges: (block: ParagraphBlock) => boolean;
 /**
  * Render a paragraph fragment
  *
@@ -134,4 +147,4 @@ declare function renderLine(block: ParagraphBlock, line: MeasuredLine, alignment
  */
 declare function renderParagraphFragment(fragment: ParagraphFragment, block: ParagraphBlock, measure: ParagraphMeasure, context: RenderContext, options?: RenderParagraphOptions): HTMLElement;
 //#endregion
-export { PARAGRAPH_CLASS_NAMES, RenderParagraphOptions, getLeaderChar, getRenderableTextColor, renderLine, renderParagraphFragment, sliceRunsForLine, splitCollapsibleLineEdgeSpaces, splitTextRunsByEastAsia, startsAfterSoftWrap };
+export { PARAGRAPH_CLASS_NAMES, RenderParagraphOptions, UNICODE_BIDI_BY_WRAPPER_CONTROL, getLeaderChar, getRenderableTextColor, paragraphHasTrackedChanges, renderLine, renderParagraphFragment, sliceRunsForLine, splitCollapsibleLineEdgeSpaces, splitTextRunsByEastAsia, startsAfterSoftWrap };

package/dist/layout-painter/renderParagraph.js

@@ -8,9 +8,11 @@ import { DOCX_SCRIPT_FONT_SCALE } from "../layout-engine/measure/measureHelpers.
 import { calculateTabWidth } from "../layout-engine/measure/tabCalculator.js";
 import { FONT_KERNING_MODE, countCompressibleSpaces, getFontKerningMode, getRunFontKerningMode, toPaintedText } from "../layout-engine/measure/textMeasurementPolicy.js";
 import { isFloatingImageRun } from "../layout-engine/types.js";
+import { writeCommentAnchorIds } from "../render-dom/commentAnchorAttributes.js";
 import { AUTHOR_COLORS, getAuthorColorIdx } from "../utils/authorColors.js";
 import { resolveFontFamily } from "../utils/fontResolver.js";
 import "../utils/fontWeights.js";
+import { underlineDecorationCss } from "../utils/formatToStyle.js";
 import { getHorizontalScaleFactor } from "../utils/horizontalScale.js";
 import { resolvePhysicalParagraphInlineLayout } from "../utils/paragraphInlineLayout.js";
 import { inlineImageBoundingBox, parseRotationDegrees, rotatedBoundingBox } from "../utils/rotationBoundingBox.js";
@@ -20,7 +22,7 @@ import { anchorTargetAttrs, sanitizeExternalUrl } from "../utils/urlSecurity.js"
 import { borderStrokeToCss, resolveParagraphBorderHorizontalOutsets } from "./borderStroke.js";
 import { planCursiveJoiners, withCursiveJoiners } from "./cursiveJoiners.js";
 import { getAutomaticTextColorForBackground, setAuthoredBackgroundColor, setAuthoredTextColor } from "./documentColors.js";
-import { applyImageBorder, applyImageVisualAttrs, hasImageCrop, hasImageVisualAttrs, wrapImageWithCrop } from "./renderImage.js";
+import { applyImageBorder, applyImageColorAttrs, applyImageVisualAttrs, hasImageCrop, hasImageVisualAttrs, wrapImageWithCrop } from "./renderImage.js";
 import { resolveImageLineAlign } from "./renderUtils.js";
 import { applySdtDataAttrs } from "./sdtBoundary.js";
 //#region src/layout-painter/renderParagraph.ts
@@ -164,6 +166,18 @@ function applyHorizontalScaleTransform(element, horizontalScale) {
 	element.style.transformOrigin = "left center";
 }
 /**
+* How CSS spells each bidirectional wrapper: an override switches the
+* bidirectional algorithm off for its content, an embedding opens a level and
+* leaves it on.
+*
+* Both painters write the keyword from here, so the DOM painter and the
+* display list cannot spell the pair differently.
+*/
+const UNICODE_BIDI_BY_WRAPPER_CONTROL = {
+	override: "bidi-override",
+	embedding: "embed"
+};
+/**
 * Apply text run styles to an element
 */
 function applyRunStyles(element, run) {
@@ -192,6 +206,10 @@ function applyRunStyles(element, run) {
 	}
 	if (run.rtl === true) element.dir = RIGHT_TO_LEFT_DIRECTION;
 	else if (run.rtl === false) element.dir = LEFT_TO_RIGHT_DIRECTION;
+	if (run.bidiWrapper) {
+		element.style.unicodeBidi = UNICODE_BIDI_BY_WRAPPER_CONTROL[run.bidiWrapper.control];
+		if (run.bidiWrapper.direction !== void 0 && run.rtl === void 0) element.dir = run.bidiWrapper.direction === "rtl" ? RIGHT_TO_LEFT_DIRECTION : LEFT_TO_RIGHT_DIRECTION;
+	}
 	if (run.textEffect) {
 		element.classList.add("docx-text-effect", `docx-text-effect-${run.textEffect}`);
 		element.dataset["effect"] = run.textEffect;
@@ -221,14 +239,15 @@ function applyRunStyles(element, run) {
 	const decorations = [];
 	let explicitDecorationStyle = false;
 	if (run.underline) {
-		if (!isNoteReferenceRun(run)) decorations.push("underline");
-		if (typeof run.underline === "object") {
-			if (run.underline.style) {
-				element.style.textDecorationStyle = run.underline.style;
-				explicitDecorationStyle = true;
-			}
-			if (run.underline.color) element.style.textDecorationColor = run.underline.color;
+		const authored = typeof run.underline === "object" ? run.underline.style : void 0;
+		const underline = authored === void 0 ? void 0 : underlineDecorationCss(authored);
+		if ((underline === void 0 || underline.decorationStyle !== void 0) && !isNoteReferenceRun(run)) decorations.push("underline");
+		if (underline?.decorationStyle !== void 0) {
+			element.style.textDecorationStyle = underline.decorationStyle;
+			explicitDecorationStyle = true;
 		}
+		if (underline?.decorationThickness !== void 0) element.style.textDecorationThickness = underline.decorationThickness;
+		if (typeof run.underline === "object" && run.underline.color) element.style.textDecorationColor = run.underline.color;
 	}
 	if (run.strike) decorations.push("line-through");
 	if (run.hidden) {
@@ -238,7 +257,7 @@ function applyRunStyles(element, run) {
 	if (run.commentIds && run.commentIds.length > 0) {
 		element.style.backgroundColor = "rgba(255, 212, 0, 0.08)";
 		element.style.borderBottom = "1px solid rgba(180, 130, 0, 0.24)";
-		element.dataset["commentId"] = String(run.commentIds[0]);
+		writeCommentAnchorIds(element, run.commentIds);
 	}
 	if (run.isInsertion) {
 		const authorIdx = getAuthorColorIdx(run.changeAuthor ?? "");
@@ -492,6 +511,7 @@ function renderInlineImageRun(run, doc) {
 		img.style.transform = run.transform;
 		img.style.transformOrigin = "center center";
 	}
+	applyImageColorAttrs(img, run);
 	if (!hasImageCrop(run)) applyImageBorder(img, run);
 	const rotation = parseRotationDegrees(run.transform);
 	if (rotation !== 0) {
@@ -558,6 +578,7 @@ function renderBlockImage(run, doc) {
 		img.style.transform = run.transform;
 		img.style.transformOrigin = "center center";
 	}
+	applyImageColorAttrs(img, run);
 	if (!hasImageCrop(run)) applyImageBorder(img, run);
 	const rotation = parseRotationDegrees(run.transform);
 	if (rotation !== 0) {
@@ -1432,6 +1453,7 @@ function bordersFormGroup(a, b) {
 	if (!a || !b) return false;
 	return bordersEqual(a.top, b.top) && bordersEqual(a.bottom, b.bottom) && bordersEqual(a.left, b.left) && bordersEqual(a.right, b.right) && bordersEqual(a.between, b.between);
 }
+const paragraphHasTrackedChanges = (block) => block.attrs?.listMarkerRevision !== void 0 || block.runs.some((run) => run.kind !== "lineBreak" && (run.isInsertion === true || run.isDeletion === true));
 /**
 * Render a paragraph fragment
 *
@@ -1451,6 +1473,7 @@ function renderParagraphFragment(fragment, block, measure, context, options = {}
 	if (block.paraId) fragmentEl.dataset["paraId"] = block.paraId;
 	fragmentEl.dataset["fromLine"] = String(fragment.fromLine);
 	fragmentEl.dataset["toLine"] = String(fragment.toLine);
+	if (paragraphHasTrackedChanges(block)) fragmentEl.dataset["trackedChanges"] = "true";
 	applyPmPositions(fragmentEl, fragment.pmStart, fragment.pmEnd);
 	applySdtDataAttrs(fragmentEl, fragment.sdtGroups);
 	if (fragment.continuesFromPrev) fragmentEl.dataset["continuesFromPrev"] = "true";
@@ -1467,25 +1490,8 @@ function renderParagraphFragment(fragment, block, measure, context, options = {}
 	const indent = block.attrs?.indent;
 	const borders = block.attrs?.borders;
 	if (borders) {
-		const borderStyleToCss = (style) => {
-			switch (style) {
-				case "single": return "solid";
-				case "double": return "double";
-				case "dotted": return "dotted";
-				case "dashed": return "dashed";
-				case "thick": return "solid";
-				case "wave": return "wavy";
-				case "dashSmallGap": return "dashed";
-				case "nil":
-				case "none": return "none";
-				default: return "solid";
-			}
-		};
 		fragmentEl.style.boxSizing = "border-box";
-		const borderToCss = (border) => borderStrokeToCss({
-			...border,
-			style: borderStyleToCss(border.style)
-		});
+		const borderToCss = (border) => borderStrokeToCss(border);
 		const groupedWithPrev = bordersFormGroup(options.prevBorders, borders);
 		const groupedWithNext = bordersFormGroup(borders, options.nextBorders);
 		const renderedTopBorder = groupedWithPrev ? borders.between : borders.top;
@@ -1667,4 +1673,4 @@ function renderListMarker({ marker, inlineWidth, visualOffset, doc, formatting,
 	return span;
 }
 //#endregion
-export { PARAGRAPH_CLASS_NAMES, getLeaderChar, getRenderableTextColor, renderLine, renderParagraphFragment, sliceRunsForLine, splitCollapsibleLineEdgeSpaces, splitTextRunsByEastAsia, startsAfterSoftWrap };
+export { PARAGRAPH_CLASS_NAMES, UNICODE_BIDI_BY_WRAPPER_CONTROL, getLeaderChar, getRenderableTextColor, paragraphHasTrackedChanges, renderLine, renderParagraphFragment, sliceRunsForLine, splitCollapsibleLineEdgeSpaces, splitTextRunsByEastAsia, startsAfterSoftWrap };

package/dist/layout-painter/renderTable.d.ts

@@ -1,6 +1,7 @@
 import { TableBlock, TableFragment, TableMeasure } from "../layout-engine/types.js";
 import { RenderContext } from "./renderUtils.js";
 import { PageGeometry } from "./anchoredImagePosition.js";
+import { TextDirection } from "@stll/docx-core/model";
 //#region src/layout-painter/renderTable.d.ts
 /**
  * CSS class names for table elements
@@ -15,6 +16,8 @@ declare const TABLE_CLASS_NAMES: {
   tableEdgeHandleBottom: string;
   tableEdgeHandleRight: string;
 };
+/** The quarter turn a cell's `w:textDirection` puts on its content. */
+declare const cellTextRotationDegrees: (direction: TextDirection | undefined) => number;
 /**
  * Options for rendering a table fragment
  */
@@ -38,4 +41,4 @@ declare function renderNestedTable(block: TableBlock, measure: TableMeasure, con
  */
 declare function renderTableFragment(fragment: TableFragment, block: TableBlock, measure: TableMeasure, context: RenderContext, options?: RenderTableFragmentOptions): HTMLElement;
 //#endregion
-export { RenderTableFragmentOptions, TABLE_CLASS_NAMES, renderNestedTable, renderTableFragment };
+export { RenderTableFragmentOptions, TABLE_CLASS_NAMES, cellTextRotationDegrees, renderNestedTable, renderTableFragment };