@stll/folio-core 0.15.13 → 0.17.0

package/dist/docx/xmlParser.js

@@ -55,6 +55,15 @@ const TEXT_KEY = "#text";
 const ATTR_KEY = ":@";
 /** Character reference required to keep carriage returns through XML end-of-line normalization. */
 const XML_CARRIAGE_RETURN_REFERENCE = "
";
+const EMPTY_NAMESPACE_SCOPE = { bindings: /* @__PURE__ */ new Map() };
+const resolveNamespaceUri = (scope, prefix) => {
+	let current = scope;
+	while (current) {
+		const value = current.bindings.get(prefix);
+		if (value !== void 0) return value;
+		current = current.parent;
+	}
+};
 /**
 * Convert a fast-xml-parser preserveOrder node into an XmlElement.
 *
@@ -62,7 +71,7 @@ const XML_CARRIAGE_RETURN_REFERENCE = "
";
 * (the tag name or `#text`) whose value is the children array, plus an
 * optional `:@` key holding the attributes object.
 */
-function fxpNodeToElement(node) {
+function fxpNodeToElement(node, inheritedNamespaceScope = EMPTY_NAMESPACE_SCOPE) {
 	if (TEXT_KEY in node) return {
 		type: "text",
 		text: node[TEXT_KEY]
@@ -76,8 +85,34 @@ function fxpNodeToElement(node) {
 			name: key
 		};
 		if (attrs) element.attributes = attrs;
+		let localBindings = null;
+		if (attrs) for (const [attribute, value] of Object.entries(attrs)) {
+			if (attribute !== "xmlns" && !attribute.startsWith("xmlns:")) continue;
+			localBindings ??= /* @__PURE__ */ new Map();
+			const prefix = attribute === "xmlns" ? "" : attribute.slice(6);
+			localBindings.set(prefix, value);
+		}
+		const namespaceScope = localBindings === null ? inheritedNamespaceScope : {
+			bindings: localBindings,
+			parent: inheritedNamespaceScope
+		};
+		Object.defineProperty(element, "namespaceScope", {
+			configurable: false,
+			enumerable: false,
+			value: namespaceScope,
+			writable: false
+		});
+		const colonIndex = key.indexOf(":");
+		const prefix = colonIndex === -1 ? "" : key.slice(0, colonIndex);
+		const namespaceUri = resolveNamespaceUri(namespaceScope, prefix);
+		if (namespaceUri !== void 0) Object.defineProperty(element, "namespaceUri", {
+			configurable: false,
+			enumerable: false,
+			value: namespaceUri,
+			writable: false
+		});
 		if (children.length > 0) {
-			for (let index = 0; index < children.length; index += 1) children[index] = fxpNodeToElement(children[index]);
+			for (let index = 0; index < children.length; index += 1) children[index] = fxpNodeToElement(children[index], namespaceScope);
 			element.elements = children;
 		}
 		return element;
@@ -159,6 +194,18 @@ function getNamespacePrefix(name) {
 	const colonIndex = name.indexOf(":");
 	return colonIndex !== -1 ? name.slice(0, colonIndex) : null;
 }
+/** Namespace URI resolved from the element's in-scope XML declarations. */
+const getNamespaceUri = (element) => element.namespaceUri;
+/** Get an attribute whose prefix resolves to one of the accepted namespace URIs. */
+function getAttributeByNamespaceUri(element, namespaceUris, localName) {
+	if (!element?.attributes) return null;
+	for (const [name, value] of Object.entries(element.attributes)) {
+		if (value === void 0 || getLocalName(name) !== localName) continue;
+		const prefix = getNamespacePrefix(name);
+		if (prefix !== null && namespaceUris.has(resolveNamespaceUri(element.namespaceScope, prefix) ?? "")) return String(value);
+	}
+	return null;
+}
 function hasLocalName(name, localName) {
 	if (!name) return false;
 	if (name === localName) return true;
@@ -640,4 +687,4 @@ function cloneWithXmlnsDeclarations(element, xmlnsDecls) {
 	return element;
 }
 //#endregion
-export { NAMESPACES, cloneWithXmlnsDeclarations, collectXmlnsDeclarations, elementToXml, findAllDeep, findByFullName, findChild, findChildByLocalName, findChildren, findChildrenByLocalName, findDeep, getAttribute, getAttributeAny, getAttributeAnyPrefix, getAttributes, getChildElements, getLocalName, getNamespacePrefix, getTextContent, hasChild, hasFlag, matchesName, mergeXmlnsDeclarations, parseBooleanElement, parseColorElement, parseNumberingLevelAttribute, parseNumericAttribute, parseTableMeasurementValue, parseXml, parseXmlDocument };
+export { NAMESPACES, cloneWithXmlnsDeclarations, collectXmlnsDeclarations, elementToXml, findAllDeep, findByFullName, findChild, findChildByLocalName, findChildren, findChildrenByLocalName, findDeep, getAttribute, getAttributeAny, getAttributeAnyPrefix, getAttributeByNamespaceUri, getAttributes, getChildElements, getLocalName, getNamespacePrefix, getNamespaceUri, getTextContent, hasChild, hasFlag, matchesName, mergeXmlnsDeclarations, parseBooleanElement, parseColorElement, parseNumberingLevelAttribute, parseNumericAttribute, parseTableMeasurementValue, parseXml, parseXmlDocument };

package/dist/layout-bridge/convert/toFlowBlocks.js

@@ -246,6 +246,8 @@ function extractRunFormatting(marks, theme) {
 			if (font) formatting.fontFamily = font;
 			const eastAsiaFont = resolveEastAsiaThemeFont(attrs, theme);
 			if (eastAsiaFont) formatting.eastAsiaFontFamily = eastAsiaFont;
+			const complexScriptFont = resolveComplexScriptThemeFont(attrs, theme);
+			if (complexScriptFont) formatting.complexScriptFontFamily = complexScriptFont;
 			break;
 		}
 		case "language": {
@@ -361,6 +363,9 @@ const resolveWesternThemeFont = (fontFamily, theme) => {
 	const themeRef = fontFamily.asciiTheme ?? fontFamily.hAnsiTheme;
 	return (themeRef ? resolveThemeFont(themeRef, theme?.fontScheme) : null) ?? fontFamily.ascii ?? fontFamily.hAnsi ?? void 0;
 };
+const resolveComplexScriptThemeFont = (fontFamily, theme) => {
+	return (fontFamily.cstheme ? resolveThemeFont(fontFamily.cstheme, theme?.fontScheme) : null) ?? fontFamily.cs ?? void 0;
+};
 const resolveEastAsiaThemeFont = (fontFamily, theme) => {
 	return (fontFamily.eastAsiaTheme ? resolveThemeFont(fontFamily.eastAsiaTheme, theme?.fontScheme) : null) ?? fontFamily.eastAsia ?? void 0;
 };
@@ -404,6 +409,8 @@ function paragraphRunDefaults(pmAttrs, theme) {
 	if (fontFamily) result.fontFamily = fontFamily;
 	const eastAsiaFontFamily = defaultTextFormatting.fontFamily ? resolveEastAsiaThemeFont(defaultTextFormatting.fontFamily, theme) : void 0;
 	if (eastAsiaFontFamily) result.eastAsiaFontFamily = eastAsiaFontFamily;
+	const complexScriptFontFamily = defaultTextFormatting.fontFamily ? resolveComplexScriptThemeFont(defaultTextFormatting.fontFamily, theme) : void 0;
+	if (complexScriptFontFamily) result.complexScriptFontFamily = complexScriptFontFamily;
 	if (defaultTextFormatting.language) result.language = { ...defaultTextFormatting.language };
 	if (defaultTextFormatting.fontSize !== void 0) result.fontSize = defaultTextFormatting.fontSize / 2;
 	if (defaultTextFormatting.bold !== void 0) result.bold = defaultTextFormatting.bold;

package/dist/layout-engine/measure/cache.js

@@ -170,7 +170,7 @@ const paragraphMeasureCache = /* @__PURE__ */ new Map();
 */
 function hashParagraphBlock(block) {
 	const parts = [`lbp:${getLineBreakProviderGeneration()}`];
-	for (const run of block.runs) if (run.kind === "text") parts.push(`t:${run.text}|${run.fontFamily}|${run.eastAsiaFontFamily}|${run.fontSize}|${run.bold}|${run.italic}|${run.allCaps}|${run.smallCaps}|${run.horizontalScale}|${run.letterSpacing}|${run.language?.val}|${run.language?.eastAsia}|${run.language?.bidi}`);
+	for (const run of block.runs) if (run.kind === "text") parts.push(`t:${run.text}|${run.fontFamily}|${run.eastAsiaFontFamily}|${run.complexScriptFontFamily}|${run.fontSize}|${run.bold}|${run.italic}|${run.allCaps}|${run.smallCaps}|${run.horizontalScale}|${run.letterSpacing}|${run.language?.val}|${run.language?.eastAsia}|${run.language?.bidi}`);
 	else if (run.kind === "tab") parts.push(`tab:${run.width}`);
 	else if (run.kind === "image") parts.push(`img:${run.width}x${run.height}:${run.exactLineHeight === true ? "exact" : "text"}`);
 	else if (run.kind === "lineBreak") parts.push("br");

package/dist/layout-engine/measure/measureContainer.js

@@ -1,4 +1,4 @@
-import { hasCjk, isCjkCodePoint, segmentByScript } from "../../utils/scriptSegments.js";
+import { SCRIPT_CLASS, hasCjk, hasComplexScript, scriptClassOf, segmentByScript } from "../../utils/scriptSegments.js";
 import { getCachedFontMetrics, getCachedTextWidth, getTextWidthCacheGeneration, setCachedFontMetrics, setCachedTextWidth } from "./cache.js";
 import { buildFontString, getResolvedData, ptToPx } from "./measureHelpers.js";
 import { setMeasureProvider } from "./measureProvider.js";
@@ -118,7 +118,7 @@ function canvasGetFontMetrics(style) {
 function canvasMeasureTextWidth(text, style) {
 	if (!text) return 0;
 	const measuredText = applyTextTransform(text, style);
-	if (style.eastAsiaFontFamily && !style.letterSpacing && hasCjk(measuredText)) return measureMixedScriptWidth(measuredText, style);
+	if (!style.letterSpacing && needsPerScriptFonts(style, measuredText)) return measureMixedScriptWidth(measuredText, style);
 	const ctx = getCanvasContext();
 	const font = buildFontString(style);
 	const letterSpacing = style.letterSpacing ?? 0;
@@ -173,14 +173,25 @@ function glyphAdvanceStyle(style, fontFamily) {
 * horizontal scale are applied once over the whole string so the total matches
 * the painter, which renders the same segments as sibling spans.
 */
+/**
+* Whether this run needs more than one font, i.e. it carries a per-script slot
+* AND text that would select it. Keeps the all-Latin path on a single font.
+*/
+function needsPerScriptFonts(style, measuredText) {
+	if (style.eastAsiaFontFamily && hasCjk(measuredText)) return true;
+	return Boolean(style.complexScriptFontFamily) && hasComplexScript(measuredText);
+}
+/** The font slot a script class selects, falling back to the western one. */
+function scriptFontFamily(style, script) {
+	if (script === SCRIPT_CLASS.eastAsia) return style.eastAsiaFontFamily ?? style.fontFamily;
+	if (script === SCRIPT_CLASS.complex) return style.complexScriptFontFamily ?? style.fontFamily;
+	return style.fontFamily;
+}
 function measureMixedScriptWidth(measuredText, style) {
 	const letterSpacing = style.letterSpacing ?? 0;
 	const horizontalScale = getHorizontalScaleFactor(style);
 	let glyphWidth = 0;
-	for (const segment of segmentByScript(measuredText)) {
-		const fontFamily = segment.isCjk ? style.eastAsiaFontFamily : style.fontFamily;
-		glyphWidth += canvasMeasureTextWidth(segment.text, glyphAdvanceStyle(style, fontFamily));
-	}
+	for (const segment of segmentByScript(measuredText)) glyphWidth += canvasMeasureTextWidth(segment.text, glyphAdvanceStyle(style, scriptFontFamily(style, segment.script)));
 	let width = glyphWidth;
 	if (letterSpacing) {
 		const codePoints = countCodePoints(measuredText);
@@ -251,6 +262,10 @@ function canvasMeasureRun(text, style) {
 		...style,
 		fontFamily: style.eastAsiaFontFamily
 	}) : void 0;
+	const complexScriptFont = style.complexScriptFontFamily !== void 0 && !style.letterSpacing ? buildFontString({
+		...style,
+		fontFamily: style.complexScriptFontFamily
+	}) : void 0;
 	const letterSpacing = style.letterSpacing ?? 0;
 	const scale = getHorizontalScaleFactor(style);
 	const charWidths = [];
@@ -259,7 +274,10 @@ function canvasMeasureRun(text, style) {
 	for (const char of text) {
 		const cp = char.codePointAt(0);
 		const measured = applyTextTransform(char, style);
-		if (eastAsiaFont !== void 0) ctx.font = isCjkCodePoint(cp) ? eastAsiaFont : baseFont;
+		if (eastAsiaFont !== void 0 || complexScriptFont !== void 0) {
+			const script = scriptClassOf(cp);
+			ctx.font = (script === SCRIPT_CLASS.eastAsia ? eastAsiaFont : void 0) ?? (script === SCRIPT_CLASS.complex ? complexScriptFont : void 0) ?? baseFont;
+		}
 		let charWidth = ctx.measureText(measured).width;
 		if (letterSpacing && offset + char.length < text.length) charWidth += letterSpacing;
 		charWidth *= scale;

package/dist/layout-engine/measure/measureHelpers.js

@@ -28,6 +28,7 @@ function buildRunFontStyle(run, fallbackFontFamily, fallbackFontSize) {
 	return {
 		fontFamily: run.fontFamily ?? fallbackFontFamily,
 		...run.eastAsiaFontFamily !== void 0 ? { eastAsiaFontFamily: run.eastAsiaFontFamily } : {},
+		...run.complexScriptFontFamily !== void 0 ? { complexScriptFontFamily: run.complexScriptFontFamily } : {},
 		fontSize,
 		...run.bold !== void 0 ? { bold: run.bold } : {},
 		...run.italic !== void 0 ? { italic: run.italic } : {},

package/dist/layout-engine/measure/measureTypes.d.ts

@@ -21,6 +21,11 @@ type FontStyle = {
    * and click positioning stay in sync.
    */
   eastAsiaFontFamily?: string;
+  /**
+   * Complex-script font for Arabic, Hebrew, Indic and South-East Asian code
+   * points. Same contract as `eastAsiaFontFamily`, over a different slot.
+   */
+  complexScriptFontFamily?: string;
   fontSize?: number;
   bold?: boolean;
   italic?: boolean;

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

@@ -37,6 +37,15 @@ type RunFormatting = {
    * to `fontFamily`.
    */
   eastAsiaFontFamily?: string;
+  /**
+   * Resolved complex-script font (`w:cs` / `cstheme`). Arabic, Hebrew, Indic
+   * and South-East Asian code points in this run measure and paint with this
+   * font; the rest keeps `fontFamily` (ascii/hAnsi). Mirrors
+   * `eastAsiaFontFamily` exactly, including the shared segmentation. Absent
+   * means complex-script text falls back to `fontFamily`, which is what Word
+   * does NOT do and is why this slot has to reach layout at all.
+   */
+  complexScriptFontFamily?: string;
   /** Run language metadata resolved from `w:lang`. */
   language?: {
     val?: string;

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

@@ -0,0 +1,80 @@
+//#region src/layout-painter/cursiveJoiners.d.ts
+/**
+ * Repair cursive letter connections that a face change severed.
+ *
+ * Browsers shape across an inline box boundary only while no shaping-relevant
+ * property changes. Colour and underline are safe, so tracked-change and
+ * comment marks already join. A face change is not: bold, italic, a different
+ * size or a different family selects another font, shaping stops there, and a
+ * cursive word split mid-word by such a run falls back to isolated forms and
+ * visibly comes apart. Word joins straight through the same boundary.
+ *
+ * The repair is a zero-width joiner on each side of the boundary, carried in its
+ * OWN span rather than appended to the run's text. That distinction is
+ * load-bearing: `data-pm-start`/`data-pm-end` spans map DOM text offsets back to
+ * ProseMirror positions for hit-testing, so growing a run's text node by a
+ * character would desync every offset after it. A joiner span carries no pm
+ * attributes, so the offset contract is untouched.
+ *
+ * Whether two runs share a face is decided by running the painter's own
+ * `applyRunStyles` over a probe element for each side and diffing the result,
+ * rather than by re-deriving the face from run fields. There is no second copy
+ * of the font decisions to drift from the first, and a property this module has
+ * never heard of counts as a face change: over-inserting a joiner is invisible,
+ * missing one is not.
+ *
+ * KNOWN RESIDUAL — the measurer does not see this repair. Canvas `measureText`
+ * ignores a joiner at a string edge (measuring the two halves with and without
+ * one returns bit-identical widths), while DOM layout applies the joined forms.
+ * So a repaired word paints at a different width than the measurer reserved, by
+ * roughly the difference between isolated and medial advances.
+ *
+ * Which DIRECTION depends on the font: measured against two Arabic fallback
+ * faces the divergence was -2.7px on one and +2.5px on the other. So it is a
+ * bounded disagreement that can push a line either way, NOT a safe
+ * over-reservation, and a line can therefore come out marginally too long. It
+ * arises only on words that contain a face change, and
+ * `tests/visual/measure-parity.spec.ts` holds it to a budget. Closing it needs widths from a real shaper
+ * rather than canvas; until then the trade is a correct rendering against a
+ * slightly wrong measurement, which beats a measurement that exactly matches a
+ * visibly broken rendering.
+ */
+/** Marks a span as joiner furniture: no text of its own, no pm positions. */
+declare const JOINER_DATASET_KEY = "docxJoiner";
+/** `applyRunStyles`, injected so this module does not import the painter back. */
+type ApplyRunStyles<TRun> = (element: HTMLElement, run: TRun) => void;
+/** Which side(s) of a run need a joiner span. */
+type JoinerSides = {
+  leading: boolean;
+  trailing: boolean;
+};
+type PlanOptions<TRun> = {
+  /** Runs in paint order, already sliced for the line and script-split. */
+  runs: readonly TRun[];
+  /** Text of a run, or undefined for a run that paints no text (image, break). */
+  textOf: (run: TRun) => string | undefined;
+  applyRunStyles: ApplyRunStyles<TRun>;
+  doc: Document;
+};
+/**
+ * Decide, for each run, whether it needs a joiner on either side.
+ *
+ * Only adjacent text-bearing runs are considered: an image or a tab between two
+ * words means they were never connected, so no joiner belongs there.
+ */
+declare function planCursiveJoiners<TRun>({ runs, textOf, applyRunStyles, doc }: PlanOptions<TRun>): Map<TRun, JoinerSides>;
+/**
+ * Build a joiner span wearing `run`'s own painted styles, so shaping crosses
+ * from that run into the joiner and takes the joined form.
+ *
+ * Without the matching styles the joiner would sit in a different face and the
+ * repair would be a no-op that still looked applied.
+ */
+declare function createJoinerSpan<TRun>(run: TRun, applyRunStyles: ApplyRunStyles<TRun>, doc: Document): HTMLElement;
+/**
+ * A run element wrapped with whatever joiners its boundaries need, ready to
+ * spread into `append`. Returns the element alone when no repair applies.
+ */
+declare function withCursiveJoiners<TRun>(runEl: HTMLElement, run: TRun, plan: Map<TRun, JoinerSides>, applyRunStyles: ApplyRunStyles<TRun>, doc: Document): HTMLElement[];
+//#endregion
+export { ApplyRunStyles, JOINER_DATASET_KEY, JoinerSides, createJoinerSpan, planCursiveJoiners, withCursiveJoiners };

package/dist/layout-painter/cursiveJoiners.js

@@ -0,0 +1,199 @@
+import { hasCursiveLetter, joinsAcrossBoundary } from "../utils/cursiveJoining.js";
+//#region src/layout-painter/cursiveJoiners.ts
+/**
+* Repair cursive letter connections that a face change severed.
+*
+* Browsers shape across an inline box boundary only while no shaping-relevant
+* property changes. Colour and underline are safe, so tracked-change and
+* comment marks already join. A face change is not: bold, italic, a different
+* size or a different family selects another font, shaping stops there, and a
+* cursive word split mid-word by such a run falls back to isolated forms and
+* visibly comes apart. Word joins straight through the same boundary.
+*
+* The repair is a zero-width joiner on each side of the boundary, carried in its
+* OWN span rather than appended to the run's text. That distinction is
+* load-bearing: `data-pm-start`/`data-pm-end` spans map DOM text offsets back to
+* ProseMirror positions for hit-testing, so growing a run's text node by a
+* character would desync every offset after it. A joiner span carries no pm
+* attributes, so the offset contract is untouched.
+*
+* Whether two runs share a face is decided by running the painter's own
+* `applyRunStyles` over a probe element for each side and diffing the result,
+* rather than by re-deriving the face from run fields. There is no second copy
+* of the font decisions to drift from the first, and a property this module has
+* never heard of counts as a face change: over-inserting a joiner is invisible,
+* missing one is not.
+*
+* KNOWN RESIDUAL — the measurer does not see this repair. Canvas `measureText`
+* ignores a joiner at a string edge (measuring the two halves with and without
+* one returns bit-identical widths), while DOM layout applies the joined forms.
+* So a repaired word paints at a different width than the measurer reserved, by
+* roughly the difference between isolated and medial advances.
+*
+* Which DIRECTION depends on the font: measured against two Arabic fallback
+* faces the divergence was -2.7px on one and +2.5px on the other. So it is a
+* bounded disagreement that can push a line either way, NOT a safe
+* over-reservation, and a line can therefore come out marginally too long. It
+* arises only on words that contain a face change, and
+* `tests/visual/measure-parity.spec.ts` holds it to a budget. Closing it needs widths from a real shaper
+* rather than canvas; until then the trade is a correct rendering against a
+* slightly wrong measurement, which beats a measurement that exactly matches a
+* visibly broken rendering.
+*/
+/** U+200D ZERO WIDTH JOINER — Joining_Type C, so it joins on both sides. */
+const ZERO_WIDTH_JOINER = "‍";
+/** Marks a span as joiner furniture: no text of its own, no pm positions. */
+const JOINER_DATASET_KEY = "docxJoiner";
+/**
+* Inline properties that `applyRunStyles` may set which provably cannot change
+* how text shapes, and so must NOT be read as a face change.
+*
+* A deny-list rather than an allow-list on purpose: an unlisted new property is
+* treated as face-changing, which inserts a harmless extra joiner instead of
+* silently stopping the repair. Fails toward the visible-correct rendering.
+*/
+const SHAPING_NEUTRAL_STYLE_PROPERTIES = /* @__PURE__ */ new Set([
+	"color",
+	"--doc-run-color",
+	"backgroundColor",
+	"background-color",
+	"textDecoration",
+	"text-decoration",
+	"textDecorationColor",
+	"text-decoration-color",
+	"textDecorationStyle",
+	"text-decoration-style",
+	"textUnderlineOffset",
+	"text-underline-offset",
+	"verticalAlign",
+	"vertical-align",
+	"opacity",
+	"borderBottom",
+	"border-bottom",
+	"outline"
+]);
+/**
+* The style declaration a run paints with, as a plain comparable record.
+*
+* Reading the keys the painter actually assigned (rather than enumerating a
+* CSSStyleDeclaration) keeps this working against both the real DOM and the
+* minimal fake the painter tests use.
+*/
+function paintedStyle(run, applyRunStyles, doc) {
+	const probe = doc.createElement("span");
+	applyRunStyles(probe, run);
+	const style = {};
+	for (const [property, value] of styleEntries(probe.style)) {
+		if (value === "") continue;
+		if (SHAPING_NEUTRAL_STYLE_PROPERTIES.has(property)) continue;
+		style[property] = value;
+	}
+	return style;
+}
+/**
+* Enumerate the properties a declaration actually has set.
+*
+* A real `CSSStyleDeclaration` is not a plain object: `Object.entries` on one
+* yields its INDEXED entries, so `["0", "font-family"]` rather than
+* `["fontFamily", "Arial"]`, which compares the list of property names instead
+* of their values. The painter's test fake IS a plain object. Both shapes have
+* to work, and the difference between them is invisible in unit tests, so it is
+* handled here explicitly rather than left to whichever one a caller happens to
+* pass. Real declarations report kebab-case names, including custom properties.
+*/
+function styleEntries(style) {
+	const declaration = style;
+	if (typeof declaration.length === "number" && typeof declaration.item === "function" && typeof declaration.getPropertyValue === "function") {
+		const entries = [];
+		for (let index = 0; index < declaration.length; index++) {
+			const property = declaration.item(index);
+			entries.push([property, declaration.getPropertyValue(property)]);
+		}
+		return entries;
+	}
+	return Object.entries(style).filter((entry) => typeof entry[1] === "string");
+}
+const sameFace = (a, b) => {
+	const keys = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]);
+	for (const key of keys) if (a[key] !== b[key]) return false;
+	return true;
+};
+/**
+* Decide, for each run, whether it needs a joiner on either side.
+*
+* Only adjacent text-bearing runs are considered: an image or a tab between two
+* words means they were never connected, so no joiner belongs there.
+*/
+function planCursiveJoiners({ runs, textOf, applyRunStyles, doc }) {
+	const plan = /* @__PURE__ */ new Map();
+	if (runs.length < 2) return plan;
+	let lineHasCursive = false;
+	for (const run of runs) {
+		const text = textOf(run);
+		if (text !== void 0 && hasCursiveLetter(text)) {
+			lineHasCursive = true;
+			break;
+		}
+	}
+	if (!lineHasCursive) return plan;
+	const styleCache = /* @__PURE__ */ new Map();
+	const styleOf = (run) => {
+		const cached = styleCache.get(run);
+		if (cached) return cached;
+		const computed = paintedStyle(run, applyRunStyles, doc);
+		styleCache.set(run, computed);
+		return computed;
+	};
+	const mark = (run, side) => {
+		const existing = plan.get(run);
+		if (existing) {
+			existing[side] = true;
+			return;
+		}
+		plan.set(run, {
+			leading: side === "leading",
+			trailing: side === "trailing"
+		});
+	};
+	for (let i = 0; i < runs.length - 1; i++) {
+		const before = runs[i];
+		const after = runs[i + 1];
+		const beforeText = textOf(before);
+		const afterText = textOf(after);
+		if (beforeText === void 0 || afterText === void 0) continue;
+		if (!joinsAcrossBoundary(beforeText, afterText)) continue;
+		if (sameFace(styleOf(before), styleOf(after))) continue;
+		mark(before, "trailing");
+		mark(after, "leading");
+	}
+	return plan;
+}
+/**
+* Build a joiner span wearing `run`'s own painted styles, so shaping crosses
+* from that run into the joiner and takes the joined form.
+*
+* Without the matching styles the joiner would sit in a different face and the
+* repair would be a no-op that still looked applied.
+*/
+function createJoinerSpan(run, applyRunStyles, doc) {
+	const span = doc.createElement("span");
+	applyRunStyles(span, run);
+	span.dataset[JOINER_DATASET_KEY] = "true";
+	span.textContent = ZERO_WIDTH_JOINER;
+	return span;
+}
+/**
+* A run element wrapped with whatever joiners its boundaries need, ready to
+* spread into `append`. Returns the element alone when no repair applies.
+*/
+function withCursiveJoiners(runEl, run, plan, applyRunStyles, doc) {
+	const sides = plan.get(run);
+	if (!sides) return [runEl];
+	const elements = [];
+	if (sides.leading) elements.push(createJoinerSpan(run, applyRunStyles, doc));
+	elements.push(runEl);
+	if (sides.trailing) elements.push(createJoinerSpan(run, applyRunStyles, doc));
+	return elements;
+}
+//#endregion
+export { JOINER_DATASET_KEY, createJoinerSpan, planCursiveJoiners, withCursiveJoiners };

package/dist/layout-painter/renderPage.js

@@ -1323,6 +1323,7 @@ function runContentKey(run) {
 	if (run.color) parts.push(`c:${run.color}`);
 	if (run.highlight) parts.push(`hi:${run.highlight}`);
 	if (run.fontFamily) parts.push(`ff:${run.fontFamily}`);
+	if (run.complexScriptFontFamily) parts.push(`cs:${run.complexScriptFontFamily}`);
 	if (run.eastAsiaFontFamily) parts.push(`ea:${run.eastAsiaFontFamily}`);
 	if (run.fontSize !== void 0) parts.push(`fs:${run.fontSize}`);
 	if (run.letterSpacing !== void 0) parts.push(`ls:${run.letterSpacing}`);

package/dist/layout-painter/renderParagraph.js

@@ -12,8 +12,9 @@ import { resolveFontFamily } from "../utils/fontResolver.js";
 import "../utils/fontWeights.js";
 import { inlineImageBoundingBox, parseRotationDegrees, rotatedBoundingBox } from "../utils/rotationBoundingBox.js";
 import { applySanitizedImageSrc } from "../utils/sanitizeImageSrc.js";
-import { hasCjk, segmentByScript } from "../utils/scriptSegments.js";
+import { SCRIPT_CLASS, hasCjk, hasComplexScript, segmentByScript } from "../utils/scriptSegments.js";
 import { borderStrokeToCss, resolveParagraphBorderHorizontalOutsets } from "./borderStroke.js";
+import { planCursiveJoiners, withCursiveJoiners } from "./cursiveJoiners.js";
 import { getAutomaticTextColorForBackground } from "./documentColors.js";
 import { applyImageBorder, applyImageVisualAttrs, hasImageCrop, hasImageVisualAttrs, wrapImageWithCrop } from "./renderImage.js";
 import { resolveImageLineAlign } from "./renderUtils.js";
@@ -591,7 +592,10 @@ function renderFieldRun(run, doc, context) {
 		kind: "text",
 		text
 	};
-	if (resolvedRun.eastAsiaFontFamily !== void 0 && !resolvedRun.letterSpacing && hasCjk(text)) {
+	if (needsPerScriptSpans({
+		...resolvedRun,
+		text
+	})) {
 		const wrapper = doc.createElement("span");
 		applyPmPositions(wrapper, resolvedRun.pmStart, resolvedRun.pmEnd);
 		if (resolvedRun.horizontalScale && resolvedRun.horizontalScale !== 100) {
@@ -604,7 +608,7 @@ function renderFieldRun(run, doc, context) {
 			const segmentRun = {
 				...segmentBase,
 				text: segment.text,
-				...segment.isCjk ? { fontFamily: resolvedRun.eastAsiaFontFamily } : {}
+				...scriptFontOverride(resolvedRun, segment.script)
 			};
 			wrapper.append(renderTextRun(segmentRun, doc));
 		}
@@ -719,6 +723,26 @@ function sliceRunsForLine(block, line) {
 	return result;
 }
 /**
+* The font a script segment paints with, mirroring the measurer's
+* `scriptFontFamily`. Returning undefined leaves the run's own `fontFamily`.
+*/
+const scriptFontOverride = (run, script) => {
+	if (script === SCRIPT_CLASS.eastAsia && run.eastAsiaFontFamily !== void 0) return { fontFamily: run.eastAsiaFontFamily };
+	if (script === SCRIPT_CLASS.complex && run.complexScriptFontFamily !== void 0) return { fontFamily: run.complexScriptFontFamily };
+	return {};
+};
+/**
+* Whether a run needs per-script sibling spans: it carries a script-specific
+* font slot AND text that selects it. A letter-spaced run is excluded because
+* CSS letter-spacing does not bridge sibling spans, and the measurer skips the
+* same case so the widths still agree.
+*/
+const needsPerScriptSpans = (run) => {
+	if (run.letterSpacing) return false;
+	if (run.eastAsiaFontFamily !== void 0 && hasCjk(run.text)) return true;
+	return run.complexScriptFontFamily !== void 0 && hasComplexScript(run.text);
+};
+/**
 * Split each text run carrying an East-Asian font into per-script sub-runs, so
 * CJK code points render with `eastAsiaFontFamily` and the rest with
 * `fontFamily`. Each sub-run gets a contiguous, exact `pmStart`/`pmEnd` (the
@@ -730,7 +754,7 @@ function sliceRunsForLine(block, line) {
 function splitTextRunsByEastAsia(runs) {
 	const result = [];
 	for (const run of runs) {
-		if (!isTextRun(run) || run.eastAsiaFontFamily === void 0 || run.letterSpacing || !hasCjk(run.text)) {
+		if (!isTextRun(run) || !needsPerScriptSpans(run)) {
 			result.push(run);
 			continue;
 		}
@@ -739,7 +763,7 @@ function splitTextRunsByEastAsia(runs) {
 			result.push({
 				...run,
 				text: segment.text,
-				...segment.isCjk ? { fontFamily: run.eastAsiaFontFamily } : {},
+				...scriptFontOverride(run, segment.script),
 				...run.pmStart !== void 0 ? {
 					pmStart: run.pmStart + offset,
 					pmEnd: run.pmStart + offset + segment.text.length
@@ -842,6 +866,7 @@ function runMeasureStyle(run) {
 		...run.letterSpacing !== void 0 ? { letterSpacing: run.letterSpacing } : {},
 		...run.smallCaps !== void 0 ? { smallCaps: run.smallCaps } : {},
 		...run.eastAsiaFontFamily !== void 0 ? { eastAsiaFontFamily: run.eastAsiaFontFamily } : {},
+		...run.complexScriptFontFamily !== void 0 ? { complexScriptFontFamily: run.complexScriptFontFamily } : {},
 		kerning: getRunFontKerningMode(run, 11) === FONT_KERNING_MODE.enabled
 	};
 }
@@ -956,11 +981,14 @@ function createTextMeasurer(doc) {
 		if (style.bold) fontPrefixParts.push("700");
 		fontPrefixParts.push(`${fontSizePx}px`);
 		const fontPrefix = fontPrefixParts.join(" ");
-		if (style.eastAsiaFontFamily && !style.letterSpacing && hasCjk(text)) {
-			const eaFallback = resolveFontFamily(style.eastAsiaFontFamily).cssFallback;
+		const perScriptFallback = {
+			...style.eastAsiaFontFamily ? { [SCRIPT_CLASS.eastAsia]: resolveFontFamily(style.eastAsiaFontFamily).cssFallback } : {},
+			...style.complexScriptFontFamily ? { [SCRIPT_CLASS.complex]: resolveFontFamily(style.complexScriptFontFamily).cssFallback } : {}
+		};
+		if (!style.letterSpacing && (style.eastAsiaFontFamily && hasCjk(text) || style.complexScriptFontFamily && hasComplexScript(text))) {
 			let segmentedWidth = 0;
 			for (const segment of segmentByScript(text)) {
-				ctx.font = `${fontPrefix} ${segment.isCjk ? eaFallback : cssFallback}`;
+				ctx.font = `${fontPrefix} ${perScriptFallback[segment.script] ?? cssFallback}`;
 				segmentedWidth += ctx.measureText(segment.text).width;
 			}
 			return segmentedWidth;
@@ -985,10 +1013,24 @@ function renderLine(block, line, alignment, doc, options) {
 	lineEl.style.boxSizing = "content-box";
 	lineEl.style.height = `${line.lineHeight}px`;
 	lineEl.style.lineHeight = `${line.lineHeight}px`;
+	lineEl.dataset["measuredWidth"] = String(line.width);
 	const splitRuns = splitTextRunsByEastAsia(sliceRunsForLine(block, line));
 	const { runs: runsForLine, collapsedLeadingRuns: collapsedLeadingSpaceRuns, collapsedTrailingRuns: collapsedTrailingSpaceRuns } = splitCollapsibleLineEdgeSpaces(splitRuns, startsAfterSoftWrap(block, line));
 	const isCollapsedLineEdgeSpaceRun = (run) => collapsedLeadingSpaceRuns.has(run) || collapsedTrailingSpaceRuns.has(run);
 	const collapsedSpaceMeasureText = collapsedLeadingSpaceRuns.size > 0 || collapsedTrailingSpaceRuns.size > 0 ? createTextMeasurer(doc) : void 0;
+	const applyJoinerRunStyles = (element, run) => {
+		if (isTextRun(run) || isTabRun(run)) applyRunStyles(element, run);
+	};
+	const cursiveJoinerPlan = planCursiveJoiners({
+		runs: runsForLine,
+		textOf: (run) => isTextRun(run) ? toPaintedText(run.text) : void 0,
+		applyRunStyles: applyJoinerRunStyles,
+		doc
+	});
+	const withJoiners = (runEl, run) => {
+		if (lineEl.style.display === "flex") return [runEl];
+		return withCursiveJoiners(runEl, run, cursiveJoinerPlan, applyJoinerRunStyles, doc);
+	};
 	const renderLineTextRun = (run) => {
 		const runEl = renderTextRun(run, doc);
 		if (collapsedLeadingSpaceRuns.has(run)) runEl.dataset["collapsedLeadingSpaces"] = "true";
@@ -1113,7 +1155,7 @@ function renderLine(block, line, alignment, doc, options) {
 				for (let j = i + 1; j < runsForLine.length; j++) {
 					const next = runsForLine[j];
 					if (isTabRun(next) || isLineBreakRun(next)) break;
-					if (isTextRun(next)) lineEl.append(renderLineTextRun(next));
+					if (isTextRun(next)) lineEl.append(...withJoiners(renderLineTextRun(next), next));
 					else if (isFieldRun(next) && options?.context) lineEl.append(renderFieldRun(next, doc, options.context));
 					else if (isImageRun(next)) {
 						if (isFloatingImageRun(next)) continue;
@@ -1133,7 +1175,7 @@ function renderLine(block, line, alignment, doc, options) {
 			currentX += tabWidth;
 		} else if (isTextRun(run)) {
 			const runEl = renderLineTextRun(run);
-			lineEl.append(runEl);
+			lineEl.append(...withJoiners(runEl, run));
 			if (isCollapsedLineEdgeSpaceRun(run)) continue;
 			if (!measureText) continue;
 			const fontSize = run.fontSize || 11;