@office-kit/pptx-preview 0.11.0 → 0.13.0

package/dist/{src-DC6HxO-i.js → src-DYfIZIh8.js}

@@ -1,4 +1,255 @@
-import { getEffectiveColorMap, getGroupChildren, getGroupTransform, getParagraphAlignment, getParagraphBullet, getParagraphBulletImageBytes, getParagraphBulletStyle, getParagraphIndent, getParagraphLevel, getParagraphPropertiesEffective, getParagraphSpacing, getPresentationFonts, getPresentationTheme, getShapeAdjustValues, getShapeAltTitle, getShapeBodyPrEffective, getShapeBoundsResolved, getShapeChartSpec, getShapeClickAction, getShapeCustomGeometry, getShapeDescription, getShapeEffectsEffective, getShapeFillColorResolved, getShapeFillEffective, getShapeFillOpacity, getShapeFlip, getShapeGradientFill, getShapeGradientFillEffective, getShapeHyperlink, getShapeHyperlinkTooltip, getShapeImageBiLevelThreshold, getShapeImageBrightness, getShapeImageBytes, getShapeImageContrast, getShapeImageCrop, getShapeImageDuotone, getShapeImageFillBytes, getShapeImageFormat, getShapeImageLinkUrl, getShapeImageOpacity, getShapeImagePartName, getShapeKind, getShapeName, getShapeParagraphCount, getShapeParagraphElements, getShapePatternFill, getShapePlaceholderType, getShapePreset, getShapeRotation, getShapeRunClickAction, getShapeRunFormat, getShapeRunFormatEffective, getShapeRunHyperlink, getShapeRunHyperlinkTooltip, getShapeStrokeArrow, getShapeStrokeCap, getShapeStrokeColorResolved, getShapeStrokeCompound, getShapeStrokeDash, getShapeStrokeEffective, getShapeStrokeJoin, getShapeStrokeOpacity, getShapeTextAnchor, getShapeTextAutoFitParams, getShapeTextBodyRotationDeg, getShapeTextColumns, getShapeTextDirection, getShapeTextMargins, getShapeXmlString, getSlideBackground, getSlideBackgroundGradientFill, getSlideBackgroundImageBytes, getSlideBackgroundPatternFill, getSlideIndex, getSlideLayout, getSlideLayoutBackground, getSlideLayoutBackgroundGradientFill, getSlideLayoutBackgroundImageBytes, getSlideLayoutBackgroundPatternFill, getSlideLayoutShapes, getSlideMasterBackground, getSlideMasterBackgroundGradientFill, getSlideMasterBackgroundImageBytes, getSlideMasterBackgroundPatternFill, getSlideMasterShapes, getSlideShapes, getSlideSize, getSlides, getTableCellAnchor, getTableCellBorders, getTableCellFill, getTableCellMargins, getTableCellParagraphs, getTableCellSpan, getTableCells, getTableColumnWidths, getTableDimensions, getTableRowHeights, getTableStyleFlags, isChartShape, isParagraphBulletPicture, isShapeImageGrayscale, isShapePlaceholder, isShapeTextBox, isTableShape, resolveDeckBodyTextColor } from "@office-kit/pptx";
+import { getEffectiveColorMap, getGroupChildren, getGroupTransform, getParagraphAlignment, getParagraphBullet, getParagraphBulletImageBytes, getParagraphBulletStyle, getParagraphIndent, getParagraphLevel, getParagraphPropertiesEffective, getParagraphSpacing, getPresentationFirstSlideNumber, getPresentationFonts, getPresentationTheme, getShapeAdjustValues, getShapeAltTitle, getShapeBodyPrEffective, getShapeBounds, getShapeBoundsResolved, getShapeChartSpec, getShapeClickAction, getShapeCustomGeometry, getShapeDescription, getShapeEffectsEffective, getShapeFillColorResolved, getShapeFillEffective, getShapeFillOpacity, getShapeFlip, getShapeGradientFill, getShapeGradientFillEffective, getShapeHyperlinkTooltip, getShapeId, getShapeImageBiLevelThreshold, getShapeImageBrightness, getShapeImageBytes, getShapeImageContrast, getShapeImageCrop, getShapeImageDuotone, getShapeImageFillBytes, getShapeImageFillLayout, getShapeImageFormat, getShapeImageIntrinsicSize, getShapeImageLinkUrl, getShapeImageOpacity, getShapeImagePartName, getShapeKind, getShapeName, getShapeParagraphCount, getShapeParagraphElements, getShapePatternFill, getShapePlaceholderType, getShapePreset, getShapeRotation, getShapeRunClickAction, getShapeRunFormat, getShapeRunFormatEffective, getShapeRunHyperlink, getShapeRunHyperlinkTooltip, getShapeStrokeArrow, getShapeStrokeCap, getShapeStrokeColorResolved, getShapeStrokeCompound, getShapeStrokeDash, getShapeStrokeEffective, getShapeStrokeJoin, getShapeStrokeOpacity, getShapeTextAnchor, getShapeTextAutoFit, getShapeTextAutoFitParams, getShapeTextBodyRotationDeg, getShapeTextColumns, getShapeTextDirection, getShapeTextMargins, getShapeXmlString, getSlideBackground, getSlideBackgroundGradientFill, getSlideBackgroundImageBytes, getSlideBackgroundImageCrop, getSlideBackgroundImageFillLayout, getSlideBackgroundImageIntrinsicSize, getSlideBackgroundImageOpacity, getSlideBackgroundPatternFill, getSlideIndex, getSlideLayout, getSlideLayoutBackground, getSlideLayoutBackgroundGradientFill, getSlideLayoutBackgroundImageBytes, getSlideLayoutBackgroundPatternFill, getSlideLayoutShapes, getSlideMasterBackground, getSlideMasterBackgroundGradientFill, getSlideMasterBackgroundImageBytes, getSlideMasterBackgroundPatternFill, getSlideMasterShapes, getSlideShapes, getSlideSize, getSlides, getTableCellAnchor, getTableCellAppearanceEffective, getTableCellMargins, getTableCellParagraphs, getTableCellRunFormatEffective, getTableCellSpan, getTableCellTextDirection, getTableCells, getTableColumnWidths, getTableDimensions, getTableRowHeights, isChartShape, isParagraphBulletPicture, isShapeHidden, isShapeImageGrayscale, isShapePlaceholder, isShapeTextBox, isSlideBackgroundGraphicsHidden, isSlideLayoutBackgroundGraphicsHidden, isTableShape, resolveDeckBodyTextColor } from "@office-kit/pptx";
+//#region src/text-body-rect.ts
+const presetTextRect = (preset) => {
+	switch (preset) {
+		case "triangle": return {
+			l: .25,
+			t: .5,
+			r: .75,
+			b: 1
+		};
+		case "diamond": return {
+			l: .25,
+			t: .25,
+			r: .75,
+			b: .75
+		};
+		case "pentagon": return {
+			l: .191,
+			t: .236,
+			r: .809,
+			b: 1
+		};
+		case "star5": return {
+			l: .309,
+			t: .382,
+			r: .691,
+			b: .764
+		};
+		case "leftRightArrow": return {
+			l: .18,
+			t: .35,
+			r: .82,
+			b: .65
+		};
+		default: return null;
+	}
+};
+/**
+* The text rectangle a custom-geometry shape states for itself, as fractions
+* of its own extent, or `null` for a preset shape and for a custom one that
+* states none. `<a:rect>` is written in EMU against the shape's extents, so
+* dividing by them here is what lets the result travel with a shape that a
+* group has scaled.
+*/
+function shapeCustomTextRect(custom, extent) {
+	const rect = custom?.textRect;
+	if (!rect || extent === null || extent.w <= 0 || extent.h <= 0) return null;
+	return {
+		l: rect.l / extent.w,
+		t: rect.t / extent.h,
+		r: rect.r / extent.w,
+		b: rect.b / extent.h
+	};
+}
+/**
+* Text layout rectangle used by the preview, including preset geometry and body
+* insets. All coordinates and margins must use the same unit (normally EMU).
+* Preset regions follow the preview's current geometry approximations. When
+* margins collapse a preset region, retain that region without margins.
+*
+* A custom-geometry shape states its own rectangle in `<a:custGeom><a:rect>`.
+* Pass it as `custom`, as fractions of the shape's extent so that it scales
+* with `bounds` the way a preset region does, and it wins: unlike the table
+* above it is not an approximation of anything — it is what the file says.
+*/
+function resolveTextBodyRect(preset, bounds, margins, custom) {
+	const region = custom ?? presetTextRect(preset);
+	const x = bounds.x + (region?.l ?? 0) * bounds.w;
+	const y = bounds.y + (region?.t ?? 0) * bounds.h;
+	const w = ((region?.r ?? 1) - (region?.l ?? 0)) * bounds.w;
+	const h = ((region?.b ?? 1) - (region?.t ?? 0)) * bounds.h;
+	const innerW = w - margins.left - margins.right;
+	const innerH = h - margins.top - margins.bottom;
+	if (region && (innerW <= 0 || innerH <= 0)) return {
+		x,
+		y,
+		w,
+		h
+	};
+	return {
+		x: x + margins.left,
+		y: y + margins.top,
+		w: innerW,
+		h: innerH
+	};
+}
+//#endregion
+//#region src/text-body-style.ts
+/** Mac PowerPoint uses zero spacing when `spcCol` is absent. */
+const DEFAULT_COLUMN_GAP_PX = 0;
+const EMU_PER_PX$2 = 9525;
+const NONE = {
+	declarations: "",
+	transform: ""
+};
+/**
+* `<a:bodyPr vert="…"/>` as CSS. `writing-mode` is the right primitive for
+* the East-Asian and Mongolian cases, and `text-orientation` for the WordArt
+* ones, which stack upright glyphs. `vert270` reads bottom-to-top, which no
+* writing-mode expresses on its own — hence the half turn. Its columns still
+* follow the OOXML vertical-rl progression before that half turn; using
+* vertical-lr here reverses the column order relative to the SVG renderer.
+*/
+function verticalTextStyle(vert) {
+	switch (vert) {
+		case "vert":
+		case "eaVert": return {
+			declarations: "writing-mode:vertical-rl",
+			transform: ""
+		};
+		case "mongolianVert": return {
+			declarations: "writing-mode:vertical-lr",
+			transform: ""
+		};
+		case "vert270": return {
+			declarations: "writing-mode:vertical-rl",
+			transform: "rotate(180deg)"
+		};
+		case "wordArtVert": return {
+			declarations: "writing-mode:vertical-rl;text-orientation:upright",
+			transform: ""
+		};
+		case "wordArtVertRtl": return {
+			declarations: "writing-mode:vertical-rl;text-orientation:upright;direction:rtl",
+			transform: ""
+		};
+		case null: return NONE;
+	}
+}
+/**
+* `<a:bodyPr numCol="N" spcCol="EMU"/>` as CSS declarations, without a
+* trailing `;`. Empty below two columns, which is the same as not splitting
+* the body.
+*/
+function textColumnsStyle(cols) {
+	if (!cols || cols.count < 2) return "";
+	const gapPx = cols.gapEmu !== void 0 ? (cols.gapEmu / EMU_PER_PX$2).toFixed(2) : DEFAULT_COLUMN_GAP_PX;
+	return `column-count:${cols.count};column-gap:${gapPx}px`;
+}
+//#endregion
+//#region src/text-underline-style.ts
+const escapeXml$2 = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&apos;");
+/**
+* DrawingML underline as CSS for an inline decoration box. Pass a resolved
+* CSS color for image-based patterns. For `words`, apply only to non-space
+* text segments; keep strikethrough on a separate outer box.
+*/
+function textUnderlineStyle(underline, color, includeDecorationColor = true) {
+	if (underline === void 0 || underline === false || underline === "none") return "";
+	const heavy = underline === "heavy" || String(underline).endsWith("Heavy");
+	const thickness = heavy ? ";text-decoration-thickness:0.1em" : "";
+	const decorationColor = includeDecorationColor ? `;text-decoration-color:${escapeXml$2(color)}` : "";
+	if (underline === "dbl") return `text-decoration:underline;text-decoration-style:double${decorationColor}`;
+	if (underline === "wavy" || underline === "wavyHeavy") return `text-decoration:underline;text-decoration-style:wavy${decorationColor}${thickness}`;
+	if (!(typeof underline === "string" && (underline.startsWith("dash") || underline.startsWith("dotted") || underline.startsWith("dotDash") || underline.startsWith("dotDotDash") || underline === "wavyDbl"))) return `text-decoration:underline${decorationColor}${thickness}`;
+	const stroke = heavy ? 2 : 1;
+	const dash = underline.startsWith("dotted") ? "1 2" : underline === "dash" || underline === "dashHeavy" ? "4 2" : underline.startsWith("dashLong") ? "8 3" : underline.startsWith("dotDotDash") ? "5 2 1 2 1 2" : "5 2 1 2";
+	const width = underline === "wavyDbl" ? 8 : underline.startsWith("dotted") ? 3 : underline === "dash" || underline === "dashHeavy" ? 6 : underline.startsWith("dashLong") ? 11 : underline.startsWith("dotDotDash") ? 13 : 10;
+	const path = underline === "wavyDbl" ? "<path d=\"M0 1 Q2 -1 4 1 T8 1 M0 4 Q2 2 4 4 T8 4\"/>" : `<path d="M0 3 H${width}" stroke-dasharray="${dash}"/>`;
+	const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="6" viewBox="0 0 ${width} 6"><g fill="none" stroke="${escapeXml$2(color)}" stroke-width="${stroke}">${path}</g></svg>`;
+	return `text-decoration:none;background-image:url('data:image/svg+xml,${encodeURIComponent(svg).replaceAll("'", "%27")}');background-repeat:repeat-x;background-size:${width / 20}em 0.3em;background-position:0 100%;box-decoration-break:clone;-webkit-box-decoration-break:clone`;
+}
+//#endregion
+//#region src/paragraph-number-labels.ts
+const bulletAutoNumType = (style) => {
+	if (style === "number") return "arabicPeriod";
+	if (style !== null && typeof style === "object" && "autoNum" in style) return style.autoNum ?? null;
+	return null;
+};
+const toRoman = (n) => {
+	if (n <= 0) return String(n);
+	const map = [
+		[1e3, "M"],
+		[900, "CM"],
+		[500, "D"],
+		[400, "CD"],
+		[100, "C"],
+		[90, "XC"],
+		[50, "L"],
+		[40, "XL"],
+		[10, "X"],
+		[9, "IX"],
+		[5, "V"],
+		[4, "IV"],
+		[1, "I"]
+	];
+	let out = "";
+	let r = n;
+	for (const [v, s] of map) while (r >= v) {
+		out += s;
+		r -= v;
+	}
+	return out;
+};
+const toAlpha = (n) => {
+	if (n <= 0) return String(n);
+	let r = n;
+	let out = "";
+	while (r > 0) {
+		r -= 1;
+		out = String.fromCharCode(65 + r % 26) + out;
+		r = Math.floor(r / 26);
+	}
+	return out;
+};
+const formatAutoNum = (token, n) => {
+	const arabic = String(n);
+	switch (token) {
+		case "arabicPlain": return arabic;
+		case "arabicPeriod": return `${arabic}.`;
+		case "arabicParenR": return `${arabic})`;
+		case "arabicParenBoth": return `(${arabic})`;
+		case "romanUcPeriod": return `${toRoman(n)}.`;
+		case "romanLcPeriod": return `${toRoman(n).toLowerCase()}.`;
+		case "romanUcParenR": return `${toRoman(n)})`;
+		case "romanLcParenR": return `${toRoman(n).toLowerCase()})`;
+		case "romanUcParenBoth": return `(${toRoman(n)})`;
+		case "romanLcParenBoth": return `(${toRoman(n).toLowerCase()})`;
+		case "alphaUcPeriod": return `${toAlpha(n)}.`;
+		case "alphaLcPeriod": return `${toAlpha(n).toLowerCase()}.`;
+		case "alphaUcParenR": return `${toAlpha(n)})`;
+		case "alphaLcParenR": return `${toAlpha(n).toLowerCase()})`;
+		case "alphaUcParenBoth": return `(${toAlpha(n)})`;
+		case "alphaLcParenBoth": return `(${toAlpha(n).toLowerCase()})`;
+		default: return `${arabic}.`;
+	}
+};
+/** Resolve list numbering consistently for rendered slides and editing surfaces. */
+const paragraphNumberLabels = (paraData) => {
+	const numberLabels = Array.from({ length: paraData.length }, () => null);
+	{
+		const counters = [];
+		const types = [];
+		for (let i = 0; i < paraData.length; i++) {
+			const para = paraData[i];
+			const num = bulletAutoNumType(para.bulletStyle);
+			const level = Math.max(0, para.level);
+			for (let l = num === null ? level : level + 1; l < counters.length; l++) {
+				counters[l] = 0;
+				types[l] = null;
+			}
+			if (num === null) continue;
+			if (types[level] !== num) {
+				counters[level] = 1;
+				types[level] = num;
+			} else counters[level] = (counters[level] ?? 0) + 1;
+			numberLabels[i] = formatAutoNum(num, counters[level]);
+		}
+	}
+	return numberLabels;
+};
+//#endregion
 //#region src/emf.ts
 const WORD_BYTES = 4;
 const SHORT_BYTES = 2;
@@ -275,6 +526,8 @@ const FALLBACK_DESCENT = .22;
 const FALLBACK_LINEGAP = .08;
 const BASELINE_LEADING_DROP = .036;
 const GRID_NUDGE_X = -.75;
+const EMU_PER_PX$1 = 9525;
+let reflectionNamespace = 0;
 const EAST_ASIAN_CHAR = /[ᄀ-ᅟ⺀-〾ぁ-㏿㐀-䶿一-鿿ꀀ-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦]/;
 const CLOSING_PUNCT = /^[、。，．・）」』】〉》”’！？：；ー〜…,.!?:;)\]}]+$/;
 const OPENING_PUNCT = /^[（「『【〈《“‘([{]+$/;
@@ -303,14 +556,16 @@ const specOf = (piece) => ({
 	sizePx: piece.sizePx,
 	bold: piece.bold,
 	italic: piece.italic,
-	letterSpacingPx: piece.letterSpacingPx
+	letterSpacingPx: piece.letterSpacingPx,
+	kerning: piece.kerning ?? true
 });
 const bulletSpec = (b) => ({
 	family: b.family,
 	sizePx: b.sizePx,
 	bold: false,
 	italic: false,
-	letterSpacingPx: 0
+	letterSpacingPx: 0,
+	kerning: true
 });
 const escapeXml$1 = (s) => s.replace(/[&<>"]/g, (c) => ({
 	"&": "&amp;",
@@ -325,7 +580,7 @@ const fmt = (n) => {
 const layoutCore = (input, measure) => {
 	const widthCache = /* @__PURE__ */ new Map();
 	const metricCache = /* @__PURE__ */ new Map();
-	const key = (text, s) => `${s.family}|${s.sizePx}|${s.bold}|${s.italic}|${s.letterSpacingPx}|${text}`;
+	const key = (text, s) => `${s.family}|${s.sizePx}|${s.bold}|${s.italic}|${s.letterSpacingPx}|${s.kerning ?? true}|${text}`;
 	const mWidth = (text, s) => {
 		const k = key(text, s);
 		let w = widthCache.get(k);
@@ -368,8 +623,49 @@ const layoutCore = (input, measure) => {
 			const bulletLead = bullet ? bullet.imageHref ? bullet.sizePx + mWidth(" ", bulletSpec(bullet)) : mWidth(`${bullet.text} `, bulletSpec(bullet)) : 0;
 			const avail = Math.max(1, wrapRight - wrapLeft);
 			const tokens = [];
+			let wordParts = [];
+			const makeToken = (text, piece, continuesSegment = false) => ({
+				text,
+				piece,
+				isSpace: false,
+				isBreak: false,
+				continuesSegment,
+				width: mWidth(text, {
+					...specOf(piece),
+					sizePx: renderedSizePxOf(piece)
+				})
+			});
+			const flushWord = () => {
+				if (wordParts.length === 0) return;
+				const word = wordParts.map((part) => part.text).join("");
+				let partIndex = 0;
+				let partOffset = 0;
+				for (const segment of splitEastAsianBreakables(word)) {
+					const fragments = [];
+					let remaining = segment.length;
+					let width = 0;
+					while (remaining > 0) {
+						const part = wordParts[partIndex];
+						const length = Math.min(remaining, part.text.length - partOffset);
+						const token = makeToken(part.text.slice(partOffset, partOffset + length), part.piece, fragments.length > 0);
+						fragments.push(token);
+						width += token.width;
+						remaining -= length;
+						partOffset += length;
+						if (partOffset === part.text.length) {
+							partIndex++;
+							partOffset = 0;
+						}
+					}
+					const canBreak = EAST_ASIAN_CHAR.test(segment) ? width > avail - bulletLead : para.latinLineBreak === true || width > avail - bulletLead;
+					if (input.wrap && canBreak && [...segment].length > 1) for (const fragment of fragments) for (const ch of fragment.text) tokens.push(makeToken(ch, fragment.piece));
+					else for (const fragment of fragments) tokens.push(fragment);
+				}
+				wordParts = [];
+			};
 			for (const piece of para.pieces) {
 				if (piece.isBreak) {
+					flushWord();
 					tokens.push({
 						text: "",
 						piece,
@@ -379,28 +675,51 @@ const layoutCore = (input, measure) => {
 					});
 					continue;
 				}
-				for (const word of piece.text.match(/\s+|\S+/g) ?? []) {
-					const isSpace = /^\s+$/.test(word);
-					for (const seg of isSpace ? [word] : splitEastAsianBreakables(word)) {
-						const w = mWidth(seg, specOf(piece));
-						if (input.wrap && !isSpace && w > avail - bulletLead && [...seg].length > 1) for (const ch of seg) tokens.push({
-							text: ch,
-							piece,
-							isSpace: false,
-							isBreak: false,
-							width: mWidth(ch, specOf(piece))
-						});
-						else tokens.push({
-							text: seg,
-							piece,
-							isSpace,
-							isBreak: false,
-							width: w
+				for (const word of piece.text.match(/\t|[^\S\t]+|\S+/g) ?? []) {
+					if (!/^\s+$/.test(word)) {
+						wordParts.push({
+							text: word,
+							piece
 						});
+						continue;
+					}
+					flushWord();
+					if (word === "	") tokens.push({
+						text: "",
+						piece,
+						isSpace: true,
+						isBreak: false,
+						isTab: true,
+						width: 0
+					});
+					else tokens.push({
+						...makeToken(word, piece),
+						isSpace: true
+					});
+				}
+			}
+			flushWord();
+			let fieldWidth = 0;
+			let decimalWidth = 0;
+			for (let ti = tokens.length - 1; ti >= 0; ti--) {
+				const token = tokens[ti];
+				if (token.isTab || token.isBreak) {
+					if (token.isTab) {
+						token.tabFieldWidth = fieldWidth;
+						token.tabDecimalWidth = decimalWidth;
 					}
+					fieldWidth = decimalWidth = 0;
+				} else {
+					fieldWidth += token.width;
+					const decimal = token.text.indexOf(".");
+					decimalWidth = decimal < 0 ? decimalWidth + token.width : mWidth(token.text.slice(0, decimal), {
+						...specOf(token.piece),
+						sizePx: renderedSizePxOf(token.piece)
+					});
 				}
 			}
-			const wrapped = wrapTokens(tokens, input.wrap, wrapRight - firstLeft - bulletLead, avail);
+			for (const token of tokens) if (token.piece.highlightHex) token.highlightMetrics = mMetrics(token.piece);
+			const wrapped = wrapTokens(tokens, input.wrap, wrapRight - firstLeft - bulletLead, avail, para, firstLeft + bulletLead - wrapLeft);
 			const paraLines = wrapped.length > 0 ? wrapped : [[]];
 			for (let li = 0; li < paraLines.length; li++) {
 				const toks = paraLines[li];
@@ -414,6 +733,13 @@ const layoutCore = (input, measure) => {
 					if (m.d > descent) descent = m.d;
 					if (m.g > lineGap) lineGap = m.g;
 				}
+				const emptyLineBreak = toks.find((token) => token.isBreak && token.piece.sizePx > 0);
+				if (ascent === 0 && emptyLineBreak) {
+					const metrics = mMetrics(emptyLineBreak.piece);
+					ascent = metrics.a;
+					descent = metrics.d;
+					lineGap = metrics.g;
+				}
 				if (ascent === 0) {
 					ascent = para.fallbackSizePx * FALLBACK_ASCENT;
 					descent = para.fallbackSizePx * FALLBACK_DESCENT;
@@ -482,20 +808,130 @@ const layoutCore = (input, measure) => {
 	};
 	const columns = vert === "none" ? input.columns ?? null : null;
 	const { placements, requiredH } = columns && columns.count >= 2 ? placeColumns(frame, columns, input.anchor, buildLines) : placeSingle(frame, input.anchor, buildLines);
+	let anchorShift = 0;
+	if (input.anchorCentered && placements.length) {
+		let left = Infinity;
+		let right = -Infinity;
+		for (const { line, dx } of placements) {
+			let end = line.tokens.length;
+			while (end > 0 && (line.tokens[end - 1].isSpace || line.tokens[end - 1].isBreak)) end--;
+			let width = 0;
+			for (let i = 0; i < end; i++) if (!line.tokens[i].isBreak) width += line.tokens[i].width;
+			if (end) {
+				const x = line.anchorX + dx - (line.textAnchor === "end" ? width : line.textAnchor === "middle" ? width / 2 : 0);
+				left = Math.min(left, x);
+				right = Math.max(right, x + width);
+			}
+			if (line.bullet) {
+				const { x, b } = line.bullet;
+				left = Math.min(left, x + dx);
+				right = Math.max(right, x + dx + (b.imageHref ? b.sizePx : mWidth(b.text, bulletSpec(b))));
+			}
+		}
+		if (left !== Infinity) {
+			const shift = frame.x + frame.w / 2 - (left + right) / 2;
+			anchorShift = shift;
+			for (let i = 0; i < placements.length; i++) {
+				const placement = placements[i];
+				placements[i] = {
+					...placement,
+					dx: placement.dx + shift
+				};
+			}
+		}
+	}
 	return {
 		placements,
 		requiredH,
 		vert,
 		cx,
-		cy
+		cy,
+		anchorShift
 	};
 };
 const layoutTextSvg = (input, measure) => {
-	const { placements, vert, cx, cy } = layoutCore(input, measure);
-	const body = emitPlacements(placements);
+	const core = layoutCore(input, measure);
+	const { vert, cx, cy } = core;
+	const { defs, placements } = resolveFillPaints(core.placements);
+	const body = defs + emitPlacements(placements, input.effectsOnly === true, input.effectKind ?? "all");
 	if (vert === "none" || vert === "upright") return body;
 	return `<g transform="rotate(${vert === "cw90" ? 90 : 270} ${fmt(cx)} ${fmt(cy)})">${body}</g>`;
 };
+const lineContentExtent = (line, dx) => {
+	const toks = [...line.tokens];
+	while (toks.length > 0 && (toks[toks.length - 1].isSpace || toks[toks.length - 1].isBreak)) toks.pop();
+	const content = toks.filter((t) => !t.isBreak);
+	if (content.length === 0) return null;
+	const width = content.reduce((sum, t) => sum + t.width, 0);
+	return {
+		left: line.anchorX + dx + GRID_NUDGE_X - (line.textAnchor === "middle" ? width / 2 : line.textAnchor === "end" ? width : 0),
+		width
+	};
+};
+const resolveFillPaints = (placements) => {
+	if (!placements.some(({ line }) => line.tokens.some((t) => t.piece.fillPaint))) return {
+		defs: "",
+		placements
+	};
+	let left = Number.POSITIVE_INFINITY;
+	let top = Number.POSITIVE_INFINITY;
+	let right = Number.NEGATIVE_INFINITY;
+	let bottom = Number.NEGATIVE_INFINITY;
+	for (const { line, baselineY, dx } of placements) {
+		const extent = lineContentExtent(line, dx);
+		if (extent === null) continue;
+		left = Math.min(left, extent.left);
+		right = Math.max(right, extent.left + extent.width);
+		top = Math.min(top, baselineY - line.ascent);
+		bottom = Math.max(bottom, baselineY + line.descent);
+	}
+	if (!(right > left && bottom > top)) return {
+		defs: "",
+		placements
+	};
+	const bounds = {
+		x: left,
+		y: top,
+		w: right - left,
+		h: bottom - top
+	};
+	const painted = /* @__PURE__ */ new Map();
+	let defs = "";
+	const pieces = /* @__PURE__ */ new Map();
+	const repaint = (piece) => {
+		const paint = piece.fillPaint;
+		if (paint === void 0) return piece;
+		let next = pieces.get(piece);
+		if (next) return next;
+		let fill = painted.get(paint);
+		if (fill === void 0) {
+			const built = paint(bounds);
+			defs += built.defs;
+			fill = built.fill;
+			painted.set(paint, fill);
+		}
+		next = {
+			...piece,
+			fillHex: fill
+		};
+		pieces.set(piece, next);
+		return next;
+	};
+	const repainted = placements.map((placement) => ({
+		...placement,
+		line: {
+			...placement.line,
+			tokens: placement.line.tokens.map((token) => token.piece.fillPaint ? {
+				...token,
+				piece: repaint(token.piece)
+			} : token)
+		}
+	}));
+	return {
+		defs,
+		placements: repainted
+	};
+};
 /** Content height (px) the body would occupy at the given input's font sizes —
 *  for a single column the block height, for multi-column the tallest filled
 *  column. The SVG normAutofit path uses this to pick a shrink scale. */
@@ -558,17 +994,40 @@ const placeColumns = (frame, columns, anchor, buildLines) => {
 		requiredH: tallest
 	};
 };
-const emitPlacements = (placements) => {
-	const parts = [];
+/**
+* Draws the placed lines, with each paragraph's own lines — its bullet
+* included — inside a `<g data-pptx-paragraph>`.
+*
+* The index is the one `<p:bldP build="p">` counts in, so a player revealing a
+* text body one paragraph at a time has a single element to show or hide. A
+* paragraph that wraps into the next column appears as a second group under
+* the same index, because its lines are drawn where that column is.
+*/
+const emitPlacements = (placements, effectsOnly = false, effectKind = "all") => {
+	const paragraphs = [];
+	let parts = [];
+	let paraIndex = null;
+	const close = () => {
+		if (paraIndex !== null && parts.length > 0) paragraphs.push(`<g data-pptx-paragraph="${paraIndex}">${parts.join("")}</g>`);
+		parts = [];
+	};
+	let effectIndex = 0;
+	const namespace = reflectionNamespace++;
+	const nextEffectId = (kind) => `text-${kind}-${namespace}-${effectIndex++}`;
 	for (const { line, baselineY, dx } of placements) {
-		if (line.bullet) {
+		if (line.paraIndex !== paraIndex) {
+			close();
+			paraIndex = line.paraIndex;
+		}
+		if (line.bullet && !effectsOnly) {
 			const b = line.bullet.b;
 			if (b.imageHref) parts.push(`<image x="${fmt(line.bullet.x + dx + GRID_NUDGE_X)}" y="${fmt(baselineY - b.sizePx)}" width="${fmt(b.sizePx)}" height="${fmt(b.sizePx)}" href="${b.imageHref}" xlink:href="${b.imageHref}" preserveAspectRatio="xMidYMid meet"/>`);
 			else parts.push(`<text x="${fmt(line.bullet.x + dx + GRID_NUDGE_X)}" y="${fmt(baselineY)}" font-family="${escapeXml$1(b.family)}" font-size="${fmt(b.sizePx)}" fill="${b.fillHex}" xml:space="preserve">${escapeXml$1(b.text)}</text>`);
 		}
-		parts.push(emitLine(line, baselineY, dx));
+		parts.push(emitLine(line, baselineY, dx, line.descent, (kind) => nextEffectId(kind), effectsOnly, effectKind));
 	}
-	return parts.join("");
+	close();
+	return paragraphs.join("");
 };
 const topPad = (line) => {
 	const lead = line.advance - (line.ascent + line.descent);
@@ -582,64 +1041,296 @@ const lineAdvance = (line, para) => {
 	else adv = natural;
 	return adv * para.lineAdvanceScale;
 };
-const emitLine = (line, baselineY, dx) => {
+const emitLine = (line, baselineY, dx, descent, nextEffectId, effectsOnly, effectKind) => {
 	const toks = [...line.tokens];
 	while (toks.length > 0 && (toks[toks.length - 1].isSpace || toks[toks.length - 1].isBreak)) toks.pop();
 	const content = toks.filter((t) => !t.isBreak);
 	if (content.length === 0) return "";
 	const groups = groupTokens(content);
-	const tspans = groups.map((g) => tspan(g)).join("");
+	const tspans = groups.map((g) => {
+		const span = tspan(g);
+		if (!g.piece.href) return span;
+		const target = g.piece.href.startsWith("#") ? "" : " target=\"_blank\" rel=\"noopener noreferrer\"";
+		const title = g.piece.hrefTip ? `<title>${escapeXml$1(g.piece.hrefTip)}</title>` : "";
+		return `<a href="${escapeXml$1(g.piece.href)}"${target}>${title}${span}</a>`;
+	}).join("");
 	if (tspans === "") return "";
 	const x0 = line.anchorX + dx + GRID_NUDGE_X;
-	return `<text x="${fmt(x0)}" y="${fmt(baselineY)}" text-anchor="${line.textAnchor}" xml:space="preserve">${tspans}</text>` + emitWavyUnderlines(groups, line.textAnchor, x0, baselineY);
+	const text = `<text x="${fmt(x0)}" y="${fmt(baselineY)}" text-anchor="${line.textAnchor}" xml:space="preserve">${tspans}</text>`;
+	if (effectsOnly && effectKind === "fill") {
+		const painted = groups.map((g) => g.piece.fillPaint ? g : {
+			...g,
+			piece: unpaintedPiece(g.piece)
+		});
+		if (!painted.some((g) => g.piece.fillPaint)) return "";
+		const glyphs = `<text x="${fmt(x0)}" y="${fmt(baselineY)}" text-anchor="${line.textAnchor}" xml:space="preserve" aria-hidden="true" pointer-events="none">${painted.map(tspan).join("")}</text>`;
+		return emitTextOuterEffects(painted, line.textAnchor, x0, baselineY, nextEffectId) + glyphs + emitTextDecorations(painted, line.textAnchor, x0, baselineY);
+	}
+	const reflections = effectKind === "reflection" || effectKind === "all" ? emitTextReflections(groups, line.textAnchor, x0, baselineY, descent, nextEffectId) : "";
+	const outerEffects = effectKind === "outer" || effectKind === "all" ? emitTextOuterEffects(groups, line.textAnchor, x0, baselineY, nextEffectId) : "";
+	const innerShadows = effectKind === "innerShadow" || effectKind === "all" ? emitTextInnerShadows(groups, line.textAnchor, x0, baselineY, nextEffectId) : "";
+	if (effectsOnly) return outerEffects + reflections + innerShadows;
+	return emitHighlights(groups, line.textAnchor, x0, baselineY) + outerEffects + reflections + text + innerShadows + emitTextDecorations(groups, line.textAnchor, x0, baselineY);
+};
+const unpaintedPiece = (piece) => {
+	const { outlineHex: _outline, shadow: _shadow, glow: _glow, ...rest } = piece;
+	return {
+		...rest,
+		fillHex: "none",
+		underline: "none",
+		strike: false
+	};
 };
 const groupTokens = (toks) => {
 	const groups = [];
 	for (const t of toks) {
 		if (t.isBreak) continue;
 		const last = groups[groups.length - 1];
-		if (last && samePiece(last.piece, t.piece)) {
+		if (last && !last.isTab && !t.isTab && samePiece(last.piece, t.piece)) {
 			last.text += t.text;
 			last.width += t.width;
+			last.parts.push({
+				text: t.text,
+				width: t.width
+			});
 		} else groups.push({
 			text: t.text,
+			parts: [{
+				text: t.text,
+				width: t.width
+			}],
+			isTab: t.isTab === true,
 			piece: t.piece,
-			width: t.width
+			width: t.width,
+			...t.highlightMetrics ? { highlightMetrics: t.highlightMetrics } : {}
 		});
 	}
 	return groups;
 };
-const SUPERSCRIPT_SHIFT_RATIO = .33;
-const SUBSCRIPT_SHIFT_RATIO = .16;
-const baselineShiftPxOf = (p) => p.superSub === 1 ? p.sizePx * SUPERSCRIPT_SHIFT_RATIO : p.superSub === -1 ? -p.sizePx * SUBSCRIPT_SHIFT_RATIO : 0;
+const emitTextReflections = (groups, textAnchor, x0, baselineY, descent, nextEffectId) => {
+	const totalWidth = groups.reduce((sum, group) => sum + group.width, 0);
+	let cursor = x0 - (textAnchor === "middle" ? totalWidth / 2 : textAnchor === "end" ? totalWidth : 0);
+	const parts = [];
+	for (const group of groups) {
+		const reflection = group.piece.reflection;
+		if (!reflection || group.width <= 0 || group.isTab) {
+			cursor += group.width;
+			continue;
+		}
+		const scaleY = reflection.scaleY ?? 1;
+		const distPx = (reflection.offsetEmu ?? 0) / EMU_PER_PX$1;
+		const contactY = baselineY + descent;
+		const angleRad = (reflection.angleDeg ?? 0) * Math.PI / 180;
+		const offsetX = distPx * Math.cos(angleRad);
+		const offsetY = distPx * Math.sin(angleRad);
+		const startA = Math.max(0, Math.min(1, reflection.startOpacity ?? 1));
+		const endA = Math.max(0, Math.min(1, reflection.opacity ?? 0));
+		const endPosition = Math.max(0, Math.min(1, reflection.endPosition ?? 1));
+		const startPosition = Math.max(0, Math.min(endPosition, reflection.startPosition ?? 0));
+		const id = nextEffectId("reflection");
+		const gradientId = `${id}-gradient`;
+		const maskId = `${id}-mask`;
+		const filterId = `${id}-blur`;
+		const blurPx = Math.max(0, (reflection.blurEmu ?? 0) / EMU_PER_PX$1 / 2);
+		const fadeDirection = reflection.fadeDirection;
+		const defs = `<defs><linearGradient id="${gradientId}" ${fadeDirection === void 0 || fadeDirection === 90 ? "x1=\"0\" y1=\"1\" x2=\"0\" y2=\"0\"" : (() => {
+			const radians = fadeDirection * Math.PI / 180;
+			const dx = Math.cos(radians) / 2;
+			const dy = Math.sin(radians) / 2;
+			return `x1="${(.5 + dx).toFixed(3)}" y1="${(.5 + dy).toFixed(3)}" x2="${(.5 - dx).toFixed(3)}" y2="${(.5 - dy).toFixed(3)}"`;
+		})()}><stop offset="0" stop-color="#fff" stop-opacity="${startA.toFixed(3)}"/><stop offset="${startPosition.toFixed(3)}" stop-color="#fff" stop-opacity="${startA.toFixed(3)}"/><stop offset="${endPosition.toFixed(3)}" stop-color="#fff" stop-opacity="${endA.toFixed(3)}"/><stop offset="1" stop-color="#fff" stop-opacity="${endA.toFixed(3)}"/></linearGradient><mask id="${maskId}" maskContentUnits="objectBoundingBox"><rect width="1" height="1" fill="url(#${gradientId})"/></mask>` + (blurPx > 0 ? `<filter id="${filterId}" x="-25%" y="-25%" width="150%" height="150%"><feGaussianBlur stdDeviation="${fmt(blurPx)}"/></filter>` : "") + `</defs>`;
+		const filter = blurPx > 0 ? ` filter="url(#${filterId})"` : "";
+		const scaleX = reflection.scaleX ?? 1;
+		const alignment = reflection.alignment ?? "b";
+		const anchorX = alignment === "l" || alignment === "tl" || alignment === "bl" ? cursor : alignment === "r" || alignment === "tr" || alignment === "br" ? cursor + group.width : cursor + group.width / 2;
+		const anchorY = alignment === "tl" || alignment === "t" || alignment === "tr" ? baselineY - group.piece.sizePx : alignment === "l" || alignment === "ctr" || alignment === "r" ? baselineY - group.piece.sizePx / 2 : contactY;
+		const skew = (reflection.skewX ?? 0) !== 0 || (reflection.skewY ?? 0) !== 0 ? ` skewX(${fmt(reflection.skewX ?? 0)}) skewY(${fmt(reflection.skewY ?? 0)})` : "";
+		const transform = `translate(${fmt(anchorX + offsetX)} ${fmt(anchorY + offsetY)})${skew} scale(${fmt(scaleX)} ${fmt(scaleY)}) translate(${fmt(-anchorX)} ${fmt(-anchorY)})`;
+		const glyph = `<text x="${fmt(cursor)}" y="${fmt(baselineY)}" text-anchor="start" xml:space="preserve">${tspan(group)}</text>`;
+		parts.push(`${defs}<g transform="${transform}" mask="url(#${maskId})"${filter} data-pptx-reflection="text" aria-hidden="true" pointer-events="none">${glyph}</g>`);
+		cursor += group.width;
+	}
+	return parts.join("");
+};
+const emitTextOuterEffects = (groups, textAnchor, x0, baselineY, nextId) => {
+	const totalWidth = groups.reduce((sum, group) => sum + group.width, 0);
+	let cursor = x0 - (textAnchor === "middle" ? totalWidth / 2 : textAnchor === "end" ? totalWidth : 0);
+	const parts = [];
+	for (const group of groups) {
+		const shadow = group.piece.shadow;
+		const glow = group.piece.glow;
+		if (group.width <= 0 || group.isTab || !shadow && !glow) {
+			cursor += group.width;
+			continue;
+		}
+		const glyph = `<text x="${fmt(cursor)}" y="${fmt(baselineY)}" text-anchor="start" xml:space="preserve">${tspan(group)}</text>`;
+		if (shadow) {
+			const id = nextId("outer-shadow");
+			const angle = (shadow.angleDeg ?? 45) * Math.PI / 180;
+			const distance = (shadow.offsetEmu ?? 38100) / EMU_PER_PX$1;
+			const blur = Math.max(0, (shadow.blurEmu ?? 50800) / EMU_PER_PX$1 / 2);
+			const glyphSize = renderedSizePxOf(group.piece);
+			const pad = Math.max(1, distance + blur * 3);
+			const color = shadow.color ?? "#000000";
+			const opacity = Math.max(0, Math.min(1, shadow.opacity ?? 1));
+			const defs = `<defs><filter id="${id}" filterUnits="userSpaceOnUse" x="${fmt(cursor - pad)}" y="${fmt(baselineY - glyphSize * 1.5 - pad)}" width="${fmt(group.width + pad * 2)}" height="${fmt(glyphSize * 2 + pad * 2)}"><feGaussianBlur in="SourceAlpha" stdDeviation="${fmt(blur)}" result="shadowBlur"/><feOffset in="shadowBlur" dx="${fmt(Math.cos(angle) * distance)}" dy="${fmt(Math.sin(angle) * distance)}" result="shadowOffset"/><feFlood flood-color="${escapeXml$1(color)}" flood-opacity="${opacity.toFixed(3)}" result="shadowColor"/><feComposite in="shadowColor" in2="shadowOffset" operator="in"/></filter></defs>`;
+			parts.push(`${defs}${glyph.replace("<text ", `<text filter="url(#${id})" aria-hidden="true" pointer-events="none" `)}`);
+		}
+		if (glow) {
+			const id = nextId("glow");
+			const radius = Math.max(0, (glow.radiusEmu ?? 63500) / EMU_PER_PX$1);
+			const glyphSize = renderedSizePxOf(group.piece);
+			const pad = Math.max(1, radius * 2);
+			const color = glow.color ?? "#FFFF00";
+			const opacity = Math.max(0, Math.min(1, glow.opacity ?? 1));
+			const defs = `<defs><filter id="${id}" filterUnits="userSpaceOnUse" x="${fmt(cursor - pad)}" y="${fmt(baselineY - glyphSize * 1.5 - pad)}" width="${fmt(group.width + pad * 2)}" height="${fmt(glyphSize * 2 + pad * 2)}"><feMorphology in="SourceAlpha" operator="dilate" radius="${fmt(radius / 2)}" result="glowExpanded"/><feGaussianBlur in="glowExpanded" stdDeviation="${fmt(radius / 2)}" result="glowBlur"/><feFlood flood-color="${escapeXml$1(color)}" flood-opacity="${opacity.toFixed(3)}" result="glowColor"/><feComposite in="glowColor" in2="glowBlur" operator="in"/></filter></defs>`;
+			parts.push(`${defs}${glyph.replace("<text ", `<text filter="url(#${id})" aria-hidden="true" pointer-events="none" `)}`);
+		}
+		cursor += group.width;
+	}
+	return parts.join("");
+};
+const emitTextInnerShadows = (groups, textAnchor, x0, baselineY, nextId) => {
+	const totalWidth = groups.reduce((sum, group) => sum + group.width, 0);
+	let cursor = x0 - (textAnchor === "middle" ? totalWidth / 2 : textAnchor === "end" ? totalWidth : 0);
+	const parts = [];
+	for (const group of groups) {
+		const shadow = group.piece.innerShadow;
+		if (!shadow || group.width <= 0 || group.isTab) {
+			cursor += group.width;
+			continue;
+		}
+		const id = nextId("inner-shadow");
+		const angle = (shadow.angleDeg ?? 45) * Math.PI / 180;
+		const dx = (shadow.offsetEmu ?? 38100) / EMU_PER_PX$1 * Math.cos(angle);
+		const dy = (shadow.offsetEmu ?? 38100) / EMU_PER_PX$1 * Math.sin(angle);
+		const blurPx = Math.max(0, (shadow.blurEmu ?? 50800) / EMU_PER_PX$1 / 2);
+		const color = shadow.color ?? "#000000";
+		const opacity = Math.max(0, Math.min(1, shadow.opacity ?? 1));
+		const defs = `<defs><filter id="${id}" x="-25%" y="-25%" width="150%" height="150%"><feGaussianBlur in="SourceAlpha" stdDeviation="${fmt(blurPx)}" result="innerBlur"/><feOffset in="innerBlur" dx="${fmt(dx)}" dy="${fmt(dy)}" result="innerOff"/><feComposite in="innerOff" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="innerMask"/><feFlood flood-color="${escapeXml$1(color)}" flood-opacity="${opacity.toFixed(3)}" result="innerColor"/><feComposite in="innerColor" in2="innerMask" operator="in" result="innerOut"/><feComposite in="innerOut" in2="SourceAlpha" operator="in"/></filter></defs>`;
+		const glyph = `<text x="${fmt(cursor)}" y="${fmt(baselineY)}" text-anchor="start" xml:space="preserve" filter="url(#${id})" aria-hidden="true" pointer-events="none">${tspan(group)}</text>`;
+		parts.push(defs + glyph);
+		cursor += group.width;
+	}
+	return parts.join("");
+};
+const baselineShiftPxOf = (p) => p.sizePx * p.baseline;
 const SUPER_SUB_SIZE_RATIO = .65;
-const renderedSizePxOf = (p) => p.superSub !== 0 ? p.sizePx * SUPER_SUB_SIZE_RATIO : p.sizePx;
-const emitWavyUnderlines = (groups, textAnchor, x0, baselineY) => {
-	if (!groups.some((g) => g.piece.underline === "wavy")) return "";
+const SMALL_CAPS_LOWERCASE_RATIO = .8;
+const renderedSizePxOf = (p) => p.sizePx * (p.baseline !== 0 ? SUPER_SUB_SIZE_RATIO : 1) * (p.smallCaps === true ? SMALL_CAPS_LOWERCASE_RATIO : 1);
+const underlineStrokeWidth = (piece) => {
+	const size = renderedSizePxOf(piece);
+	const heavy = piece.underline === "heavy" || piece.underline.endsWith("Heavy");
+	return Math.max(heavy ? 1 : .6, size * (heavy ? .09 : .06));
+};
+const underlineDashArray = (piece) => {
+	const underline = piece.underline;
+	const scale = renderedSizePxOf(piece) / 10;
+	const pattern = (values) => values.map((value) => fmt(value * scale)).join(" ");
+	switch (underline) {
+		case "dotted":
+		case "dottedHeavy": return pattern([1.5, 3]);
+		case "dash":
+		case "dashHeavy": return pattern([5, 3]);
+		case "dashLong":
+		case "dashLongHeavy": return pattern([9, 3]);
+		case "dotDash":
+		case "dotDashHeavy": return pattern([
+			1.5,
+			3,
+			6,
+			3
+		]);
+		case "dotDotDash":
+		case "dotDotDashHeavy": return pattern([
+			1.5,
+			3,
+			1.5,
+			3,
+			6,
+			3
+		]);
+		default: return null;
+	}
+};
+const underlineSegments = (group, x) => {
+	if (group.piece.underline !== "words" || !/\s/.test(group.text)) return [{
+		x,
+		width: group.width
+	}];
+	const segments = [];
+	let offset = 0;
+	for (const part of group.parts) {
+		if (!/^\s+$/u.test(part.text) && part.text.length > 0) segments.push({
+			x: x + offset,
+			width: part.width
+		});
+		offset += part.width;
+	}
+	return segments;
+};
+const STRIKE_CENTER_EM = .3;
+const STRIKE_THICKNESS_EM = .05;
+const MIN_STRIKE_THICKNESS_PX = .6;
+const emitTextDecorations = (groups, textAnchor, x0, baselineY) => {
 	const totalWidth = groups.reduce((sum, g) => sum + g.width, 0);
 	let cursor = textAnchor === "middle" ? x0 - totalWidth / 2 : textAnchor === "end" ? x0 - totalWidth : x0;
 	const parts = [];
 	for (const g of groups) {
-		if (g.piece.underline === "wavy" && g.width > 0) {
-			const y = baselineY - baselineShiftPxOf(g.piece);
-			parts.push(wavyPath(cursor, cursor + g.width, y, g.piece));
+		if (g.piece.strike === "double" && !g.isTab && g.width > 0) {
+			const size = renderedSizePxOf(g.piece);
+			const center = baselineY - baselineShiftPxOf(g.piece) - size * STRIKE_CENTER_EM;
+			const stroke = Math.max(MIN_STRIKE_THICKNESS_PX, size * STRIKE_THICKNESS_EM);
+			for (const offset of [-stroke, stroke]) parts.push(`<line x1="${fmt(cursor)}" x2="${fmt(cursor + g.width)}" y1="${fmt(center + offset)}" y2="${fmt(center + offset)}" stroke="${g.piece.fillHex}" stroke-width="${fmt(stroke)}"/>`);
+		}
+		if (g.piece.underline !== "none" && g.width > 0 && (g.piece.underline !== "sng" || g.piece.underlineHex !== void 0)) {
+			const size = renderedSizePxOf(g.piece);
+			const baseline = baselineY - baselineShiftPxOf(g.piece);
+			const y = baseline + size * WAVY_BASELINE_OFFSET_RATIO;
+			const dash = underlineDashArray(g.piece);
+			for (const segment of underlineSegments(g, cursor)) if (g.piece.underline.startsWith("wavy")) if (g.piece.underline === "wavyDbl") {
+				const offset = size * .08;
+				parts.push(wavyPath(segment.x, segment.x + segment.width, baseline, g.piece, -offset));
+				parts.push(wavyPath(segment.x, segment.x + segment.width, baseline, g.piece, offset));
+			} else parts.push(wavyPath(segment.x, segment.x + segment.width, baseline, g.piece));
+			else {
+				const stroke = underlineStrokeWidth(g.piece);
+				const offsets = g.piece.underline === "dbl" ? [-size * .08, size * .08] : [0];
+				for (const offset of offsets) {
+					const dashAttr = dash === null ? "" : ` stroke-dasharray="${dash}"`;
+					parts.push(`<line x1="${fmt(segment.x)}" x2="${fmt(segment.x + segment.width)}" y1="${fmt(y + offset)}" y2="${fmt(y + offset)}" stroke="${g.piece.underlineHex ?? g.piece.fillHex}" stroke-width="${fmt(stroke)}"${dashAttr}/>`);
+				}
+			}
 		}
 		cursor += g.width;
 	}
 	return parts.join("");
 };
+const emitHighlights = (groups, anchor, x0, baselineY) => {
+	const width = groups.reduce((sum, group) => sum + group.width, 0);
+	let x = x0 - (anchor === "middle" ? width / 2 : anchor === "end" ? width : 0);
+	const backgrounds = [];
+	for (const group of groups) {
+		const metrics = group.highlightMetrics;
+		if (group.piece.highlightHex && metrics && group.width > 0) {
+			const scale = (group.piece.baseline === 0 ? 1 : SUPER_SUB_SIZE_RATIO) * (group.piece.smallCaps === true ? SMALL_CAPS_LOWERCASE_RATIO : 1);
+			const y = baselineY - baselineShiftPxOf(group.piece) - metrics.a * scale;
+			backgrounds.push(`<rect x="${fmt(x)}" y="${fmt(y)}" width="${fmt(group.width)}" height="${fmt((metrics.a + metrics.d) * scale)}" fill="${escapeXml$1(group.piece.highlightHex)}"/>`);
+		}
+		x += group.width;
+	}
+	return backgrounds.join("");
+};
 const WAVY_AMPLITUDE_RATIO = .045;
 const WAVY_AMPLITUDE_MIN_PX = .6;
 const WAVY_PERIOD_RATIO = .18;
 const WAVY_PERIOD_MIN_PX = 2;
 const WAVY_BASELINE_OFFSET_RATIO = .12;
-const WAVY_STROKE_WIDTH_RATIO = .06;
-const WAVY_STROKE_WIDTH_MIN_PX = .6;
-const wavyPath = (x1, x2, baselineY, piece) => {
+const wavyPath = (x1, x2, baselineY, piece, yOffset = 0) => {
 	const size = renderedSizePxOf(piece);
 	const amp = Math.max(WAVY_AMPLITUDE_MIN_PX, size * WAVY_AMPLITUDE_RATIO);
 	const period = Math.max(WAVY_PERIOD_MIN_PX, size * WAVY_PERIOD_RATIO);
-	const y = baselineY + size * WAVY_BASELINE_OFFSET_RATIO;
+	const y = baselineY + size * WAVY_BASELINE_OFFSET_RATIO + yOffset;
 	let d = `M${fmt(x1)} ${fmt(y)}`;
 	let cx = x1;
 	let up = true;
@@ -650,11 +1341,25 @@ const wavyPath = (x1, x2, baselineY, piece) => {
 		cx = midX;
 		up = !up;
 	}
-	const strokeWidth = Math.max(WAVY_STROKE_WIDTH_MIN_PX, size * WAVY_STROKE_WIDTH_RATIO);
-	return `<path d="${d}" stroke="${piece.fillHex}" stroke-width="${fmt(strokeWidth)}" fill="none"/>`;
+	const strokeWidth = underlineStrokeWidth(piece);
+	return `<path d="${d}" stroke="${piece.underlineHex ?? piece.fillHex}" stroke-width="${fmt(strokeWidth)}" fill="none"/>`;
+};
+const sameReflection = (a, b) => a === void 0 === (b === void 0) && a?.blurEmu === b?.blurEmu && a?.offsetEmu === b?.offsetEmu && a?.angleDeg === b?.angleDeg && a?.opacity === b?.opacity && a?.startOpacity === b?.startOpacity && a?.startPosition === b?.startPosition && a?.endPosition === b?.endPosition && a?.fadeDirection === b?.fadeDirection && a?.scaleX === b?.scaleX && a?.scaleY === b?.scaleY && a?.skewX === b?.skewX && a?.skewY === b?.skewY && a?.alignment === b?.alignment && a?.rotateWithShape === b?.rotateWithShape;
+const sameInnerShadow = (a, b) => {
+	if (a === void 0 || b === void 0) return a === b;
+	return a.color === b.color && a.blurEmu === b.blurEmu && a.offsetEmu === b.offsetEmu && a.angleDeg === b.angleDeg && a.opacity === b.opacity;
 };
-const samePiece = (a, b) => a.family === b.family && a.sizePx === b.sizePx && a.bold === b.bold && a.italic === b.italic && a.letterSpacingPx === b.letterSpacingPx && a.fillHex === b.fillHex && a.underline === b.underline && a.strike === b.strike && a.superSub === b.superSub && a.href === b.href;
+const sameShadow = (a, b) => {
+	if (a === void 0 || b === void 0) return a === b;
+	return a.color === b.color && a.blurEmu === b.blurEmu && a.offsetEmu === b.offsetEmu && a.angleDeg === b.angleDeg && a.opacity === b.opacity;
+};
+const sameGlow = (a, b) => {
+	if (a === void 0 || b === void 0) return a === b;
+	return a.color === b.color && a.radiusEmu === b.radiusEmu && a.opacity === b.opacity;
+};
+const samePiece = (a, b) => a.family === b.family && a.sizePx === b.sizePx && a.bold === b.bold && a.italic === b.italic && a.letterSpacingPx === b.letterSpacingPx && a.kerning === b.kerning && a.fillHex === b.fillHex && a.outlineHex === b.outlineHex && a.outlineWidthPx === b.outlineWidthPx && a.underlineHex === b.underlineHex && a.highlightHex === b.highlightHex && a.underline === b.underline && a.strike === b.strike && a.baseline === b.baseline && a.smallCaps === b.smallCaps && sameShadow(a.shadow, b.shadow) && sameGlow(a.glow, b.glow) && sameInnerShadow(a.innerShadow, b.innerShadow) && sameReflection(a.reflection, b.reflection) && a.href === b.href && a.hrefTip === b.hrefTip;
 const tspan = (g) => {
+	if (g.isTab) return `<tspan dx="${fmt(g.width)}">&#8203;</tspan>`;
 	const p = g.piece;
 	const sizePx = renderedSizePxOf(p);
 	const attrs = [
@@ -664,15 +1369,21 @@ const tspan = (g) => {
 	];
 	if (p.bold) attrs.push("font-weight=\"700\"");
 	if (p.italic) attrs.push("font-style=\"italic\"");
-	const deco = [];
-	if (p.underline === "single") deco.push("underline");
-	if (p.strike) deco.push("line-through");
-	if (deco.length) attrs.push(`text-decoration="${deco.join(" ")}"`);
+	if (p.kerning !== void 0) attrs.push(`font-kerning="${p.kerning ? "normal" : "none"}"`);
+	if (p.outlineHex !== void 0 && (p.outlineWidthPx ?? 0) > 0) {
+		attrs.push(`stroke="${p.outlineHex}"`);
+		attrs.push(`stroke-width="${fmt(p.outlineWidthPx)}"`);
+		attrs.push("paint-order=\"stroke fill\"");
+	}
+	const decorations = [];
+	if (p.underline === "sng" && p.underlineHex === void 0) decorations.push("underline");
+	if (p.strike === true) decorations.push("line-through");
+	if (decorations.length) attrs.push(`text-decoration="${decorations.join(" ")}"`);
 	if (p.letterSpacingPx !== 0) attrs.push(`letter-spacing="${fmt(p.letterSpacingPx)}"`);
-	if (p.superSub !== 0) attrs.push(`baseline-shift="${fmt(baselineShiftPxOf(p))}"`);
+	if (p.baseline !== 0) attrs.push(`baseline-shift="${fmt(baselineShiftPxOf(p))}"`);
 	return `<tspan ${attrs.join(" ")}>${escapeXml$1(g.text)}</tspan>`;
 };
-const wrapTokens = (tokens, wrap, firstAvail, avail) => {
+const wrapTokens = (tokens, wrap, firstAvail, avail, para, firstOffset) => {
 	const lines = [];
 	let cur = [];
 	let lineW = 0;
@@ -682,19 +1393,41 @@ const wrapTokens = (tokens, wrap, firstAvail, avail) => {
 		while (cur.length > 0 && (cur[cur.length - 1].isSpace || cur[cur.length - 1].isBreak)) cur.pop();
 	};
 	const close = () => {
+		const endingBreak = cur[cur.length - 1];
 		trimTrailing();
+		if (cur.length === 0 && endingBreak?.isBreak) cur.push(endingBreak);
 		lines.push(cur);
 		cur = [];
 		lineW = 0;
 		trailingSpaceW = 0;
 		first = false;
 	};
-	for (const tok of tokens) {
+	const wordWidths = tokens.map((token) => token.width);
+	for (let index = tokens.length - 2; index >= 0; index--) if (tokens[index + 1].continuesSegment) wordWidths[index] += wordWidths[index + 1];
+	for (let index = 0; index < tokens.length; index++) {
+		const tok = tokens[index];
 		if (tok.isBreak) {
 			cur.push(tok);
 			close();
 			continue;
 		}
+		if (tok.isTab) {
+			const position = lineW + (first ? firstOffset : 0);
+			const stops = para.tabStops ?? [];
+			let lo = 0;
+			let hi = stops.length;
+			while (lo < hi) {
+				const mid = lo + hi >>> 1;
+				if (stops[mid].positionPx <= position + .01) lo = mid + 1;
+				else hi = mid;
+			}
+			const stop = stops[lo];
+			const interval = para.defaultTabSizePx ?? 96;
+			const next = stop?.positionPx ?? (interval > 0 ? (Math.floor(position / interval) + 1) * interval : position);
+			const alignment = stop?.alignment ?? "left";
+			const offset = alignment === "center" ? (tok.tabFieldWidth ?? 0) / 2 : alignment === "right" ? tok.tabFieldWidth ?? 0 : alignment === "decimal" ? tok.tabDecimalWidth ?? 0 : 0;
+			tok.width = Math.max(0, next - offset - position);
+		}
 		if (tok.isSpace) {
 			cur.push(tok);
 			lineW += tok.width;
@@ -703,7 +1436,7 @@ const wrapTokens = (tokens, wrap, firstAvail, avail) => {
 		}
 		const limit = first ? firstAvail : avail;
 		const hasContent = lineW - trailingSpaceW > 0;
-		if (wrap && hasContent && lineW + tok.width > limit + .5) {
+		if (wrap && hasContent && !tok.continuesSegment && lineW + wordWidths[index] > limit + .5) {
 			close();
 			cur.push(tok);
 			lineW = tok.width;
@@ -718,7 +1451,46 @@ const wrapTokens = (tokens, wrap, firstAvail, avail) => {
 	return lines;
 };
 //#endregion
+//#region src/browser-measure.ts
+/** Custom tab alignment needs the same font advances as the browser paints. */
+function browserTextMeasurer() {
+	if (typeof document === "undefined") return void 0;
+	const context = document.createElement("canvas").getContext("2d");
+	if (!context) return void 0;
+	return (text, spec) => {
+		context.font = `${spec.italic ? "italic" : "normal"} ${spec.bold ? "bold" : "normal"} ${spec.sizePx}px ${spec.family}`;
+		context.fontKerning = spec.kerning === false ? "none" : "normal";
+		context.letterSpacing = `${spec.letterSpacingPx}px`;
+		const metrics = context.measureText(text);
+		return {
+			widthPx: metrics.width,
+			ascentPx: metrics.fontBoundingBoxAscent,
+			descentPx: metrics.fontBoundingBoxDescent,
+			lineGapPx: 0,
+			inkAscentPx: metrics.actualBoundingBoxAscent,
+			inkDescentPx: metrics.actualBoundingBoxDescent
+		};
+	};
+}
+//#endregion
 //#region src/render-slide.ts
+const clickActionHref = (pres, action) => {
+	if (!action) return void 0;
+	if (action.kind === "url") return action.url;
+	if (action.kind === "customShow") return `#pptx-custom-show?id=${action.id}&return=${action.returnToShow}`;
+	if (action.kind === "endShow") return "#pptx-end-show";
+	if (action.kind === "lastSlideViewed") return "#pptx-last-slide-viewed";
+	if (action.kind === "slide") {
+		const index = getSlideIndex(pres, action.slide);
+		return index >= 0 ? `#slide-${index + 1}` : void 0;
+	}
+	return {
+		nextSlide: "#pptx-next-slide",
+		prevSlide: "#pptx-prev-slide",
+		firstSlide: "#pptx-first-slide",
+		lastSlide: "#pptx-last-slide"
+	}[action.kind];
+};
 const DEFAULT_SIZE = {
 	width: 12192e3,
 	height: 6858e3
@@ -728,6 +1500,7 @@ const PX_PER_PT = 96 / 72;
 const DEFAULT_BODY_PT = 18;
 const DEFAULT_TITLE_PT = 44;
 const DEFAULT_FONT = "Calibri, 'Helvetica Neue', Arial, sans-serif";
+const browserFontFamily = (family) => family ? `${JSON.stringify(family)}, ${DEFAULT_FONT}` : DEFAULT_FONT;
 const DEFAULT_BULLET_FONT = "Arial";
 const DEFAULT_INSET_X = 91440;
 const DEFAULT_INSET_Y = 45720;
@@ -770,7 +1543,7 @@ const mimeFromPartName = (name) => {
 	if (dot < 0) return null;
 	return EXT_TO_MIME[name.slice(dot + 1).toLowerCase()] ?? null;
 };
-const renderPicture = (shape, pres, x, y, w, h, transform, textOverlay, bytes, format) => {
+const renderPicture = (shape, pres, x, y, w, h, transform, textOverlay, bytes, format, outline) => {
 	let mime = null;
 	if (bytes && format) mime = imageMime[format] ?? null;
 	if (bytes && !mime) {
@@ -784,69 +1557,137 @@ const renderPicture = (shape, pres, x, y, w, h, transform, textOverlay, bytes, f
 	if (bytes && mime) {
 		const dataUrl = `data:${mime};base64,${u8ToBase64(bytes)}`;
 		const crop = getShapeImageCrop(shape);
-		let imgX = x, imgY = y, imgW = w, imgH = h;
+		const layout = getShapeImageFillLayout(shape);
+		const stretch = layout?.mode === "stretch" ? layout : null;
+		const fillL = stretch?.left ?? 0;
+		const fillT = stretch?.top ?? 0;
+		const fillR = stretch?.right ?? 0;
+		const fillB = stretch?.bottom ?? 0;
+		const hasFillOffsets = fillL !== 0 || fillT !== 0 || fillR !== 0 || fillB !== 0;
+		let imgX = x + w * fillL, imgY = y + h * fillT, imgW = Math.max(0, w * (1 - fillL - fillR)), imgH = Math.max(0, h * (1 - fillT - fillB));
 		let clipDef = "";
 		let clipAttr = "";
 		const cropL = crop?.left ?? 0;
 		const cropT = crop?.top ?? 0;
 		const cropR = crop?.right ?? 0;
 		const cropB = crop?.bottom ?? 0;
-		if (cropL > 0 || cropT > 0 || cropR > 0 || cropB > 0) {
+		if (cropL !== 0 || cropT !== 0 || cropR !== 0 || cropB !== 0) {
 			const scaleX = 1 / Math.max(.001, 1 - cropL - cropR);
 			const scaleY = 1 / Math.max(.001, 1 - cropT - cropB);
-			imgW = w * scaleX;
-			imgH = h * scaleY;
-			imgX = x - imgW * cropL;
-			imgY = y - imgH * cropT;
+			imgW *= scaleX;
+			imgH *= scaleY;
+			imgX -= imgW * cropL;
+			imgY -= imgH * cropT;
+		}
+		const preset = getShapePreset(shape) ?? "rect";
+		if (crop || hasFillOffsets || preset !== "rect") {
 			const clipId = mintId();
-			clipDef = `<defs><clipPath id="${clipId}"><rect x="${E(x)}" y="${E(y)}" width="${E(w)}" height="${E(h)}"/></clipPath></defs>`;
+			clipDef = `<defs><clipPath id="${clipId}">${pictureClipGeometry(shape, preset, x, y, w, h)}</clipPath></defs>`;
 			clipAttr = ` clip-path="url(#${clipId})"`;
 		}
 		const brightness = getShapeImageBrightness(shape) ?? 0;
-		const contrast = getShapeImageContrast(shape) ?? 1;
+		const contrast = getShapeImageContrast(shape) ?? 0;
 		const opacity = getShapeImageOpacity(shape) ?? 1;
 		const grayscale = isShapeImageGrayscale(shape);
 		const biLevel = getShapeImageBiLevelThreshold(shape);
 		const duotone = getShapeImageDuotone(pres, shape);
 		let filterAttr = "";
-		if (brightness !== 0 || contrast !== 1 || grayscale || biLevel !== null || duotone && (duotone.firstColor || duotone.secondColor)) {
+		if (brightness !== 0 || contrast !== 0 || grayscale || biLevel !== null || duotone && (duotone.firstColor || duotone.secondColor)) {
 			const fid = mintId();
 			const prims = [];
-			if (brightness !== 0 || contrast !== 1) prims.push(`<feComponentTransfer><feFuncR type="linear" slope="${contrast}" intercept="${brightness}"/><feFuncG type="linear" slope="${contrast}" intercept="${brightness}"/><feFuncB type="linear" slope="${contrast}" intercept="${brightness}"/></feComponentTransfer>`);
+			if (brightness !== 0 || contrast !== 0) {
+				const midpoint = 128 / 255;
+				const msoBrightness = Math.max(-1, Math.min(1, brightness));
+				const slope = contrast >= 0 ? 128 / (128 - 127 * Math.min(1, contrast)) : (128 + 127 * Math.max(-1, contrast)) / 128;
+				const intercept = (msoBrightness / 2 - midpoint) * slope + midpoint + msoBrightness / 2;
+				prims.push(`<feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="${slope}" intercept="${intercept}"/><feFuncG type="linear" slope="${slope}" intercept="${intercept}"/><feFuncB type="linear" slope="${slope}" intercept="${intercept}"/></feComponentTransfer>`);
+			}
 			if (grayscale) prims.push(`<feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0  0.2126 0.7152 0.0722 0 0  0.2126 0.7152 0.0722 0 0  0 0 0 1 0"/>`);
 			if (duotone && duotone.firstColor && duotone.secondColor) {
 				const [r1, g1, b1] = hexChannels(duotone.firstColor);
 				const [r2, g2, b2] = hexChannels(duotone.secondColor);
-				const steps = 16;
-				const tR = [];
-				const tG = [];
-				const tB = [];
-				for (let i = 0; i < steps; i++) {
-					const t = i / (steps - 1);
-					tR.push(((r1 + (r2 - r1) * t) / 255).toFixed(4));
-					tG.push(((g1 + (g2 - g1) * t) / 255).toFixed(4));
-					tB.push(((b1 + (b2 - b1) * t) / 255).toFixed(4));
-				}
-				prims.push(`<feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0  0.2126 0.7152 0.0722 0 0  0.2126 0.7152 0.0722 0 0  0 0 0 1 0"/>`, `<feComponentTransfer><feFuncR type="table" tableValues="${tR.join(" ")}"/><feFuncG type="table" tableValues="${tG.join(" ")}"/><feFuncB type="table" tableValues="${tB.join(" ")}"/></feComponentTransfer>`);
+				prims.push(`<feColorMatrix color-interpolation-filters="sRGB" type="matrix" values="0.2126 0.7152 0.0722 0 0  0.2126 0.7152 0.0722 0 0  0.2126 0.7152 0.0722 0 0  0 0 0 1 0"/>`, `<feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="${r1 / 255} ${r2 / 255}"/><feFuncG type="table" tableValues="${g1 / 255} ${g2 / 255}"/><feFuncB type="table" tableValues="${b1 / 255} ${b2 / 255}"/></feComponentTransfer>`);
 			}
 			if (biLevel !== null) {
 				const t = biLevel / 100;
-				const steps = 32;
-				const vals = [];
-				for (let i = 0; i < steps; i++) vals.push(i / (steps - 1) >= t ? "1" : "0");
-				const tableStr = vals.join(" ");
-				prims.push(`<feComponentTransfer><feFuncR type="discrete" tableValues="${tableStr}"/><feFuncG type="discrete" tableValues="${tableStr}"/><feFuncB type="discrete" tableValues="${tableStr}"/></feComponentTransfer>`);
+				prims.push(`<feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0  0.2126 0.7152 0.0722 0 0  0.2126 0.7152 0.0722 0 0  0 0 0 1 0"/>`);
+				const shift = .5 - t;
+				prims.push(`<feComponentTransfer><feFuncR type="linear" slope="1" intercept="${shift}"/><feFuncG type="linear" slope="1" intercept="${shift}"/><feFuncB type="linear" slope="1" intercept="${shift}"/></feComponentTransfer>`, "<feComponentTransfer><feFuncR type=\"discrete\" tableValues=\"0 1\"/><feFuncG type=\"discrete\" tableValues=\"0 1\"/><feFuncB type=\"discrete\" tableValues=\"0 1\"/></feComponentTransfer>");
 			}
 			clipDef += `<defs><filter id="${fid}">${prims.join("")}</filter></defs>`;
 			filterAttr = ` filter="url(#${fid})"`;
 		}
 		const opacityAttr = opacity !== 1 ? ` opacity="${opacity.toFixed(3)}"` : "";
-		return `${clipDef}<g${transform}${clipAttr}><image x="${E(imgX)}" y="${E(imgY)}" width="${E(imgW)}" height="${E(imgH)}" href="${dataUrl}" xlink:href="${dataUrl}" preserveAspectRatio="none"${filterAttr}${opacityAttr}/></g><g${transform}>${textOverlay}</g>`;
+		const border = outline.stroke !== "none" && outline.strokeWidth > 0 ? `<g${transform} fill="none" stroke="${outline.stroke}" stroke-width="${E(outline.strokeWidth)}"${outline.strokeAttrs ? ` ${outline.strokeAttrs}` : ""}>${pictureClipGeometry(shape, preset, x, y, w, h)}</g>` : "";
+		if (layout?.mode === "tile") {
+			const intrinsic = getShapeImageIntrinsicSize(shape);
+			if (intrinsic) {
+				const pattern = imageTilePattern(dataUrl, layout, intrinsic, x, y, w, h, cropL, cropT, cropR, cropB);
+				const geometry = pictureClipGeometry(shape, preset, x, y, w, h);
+				return `${clipDef}${pattern.defs}<g${transform} fill="${pattern.fill}"${filterAttr}${opacityAttr}>${geometry}</g>${border}<g${transform}>${textOverlay}</g>`;
+			}
+		}
+		return `${clipDef}<g${transform}${clipAttr}><image x="${E(imgX)}" y="${E(imgY)}" width="${E(imgW)}" height="${E(imgH)}" href="${dataUrl}" xlink:href="${dataUrl}" preserveAspectRatio="none"${filterAttr}${opacityAttr}/></g>${border}<g${transform}>${textOverlay}</g>`;
 	}
 	const linkUrl = getShapeImageLinkUrl(shape);
 	const label = !bytes ? linkUrl ? `picture (link: ${linkUrl.length > 48 ? linkUrl.slice(0, 45) + "…" : linkUrl})` : "picture (no bytes)" : `picture (${format ?? "unknown"}${bytes ? `, ${bytes.byteLength} B` : ""})`;
 	return `<g data-pptx-fallback="image"${transform}><rect x="${E(x)}" y="${E(y)}" width="${E(w)}" height="${E(h)}" fill="#F3F4F6" stroke="#9CA3AF" stroke-width="${E(9525)}" stroke-dasharray="${E(5e4)},${E(3e4)}"/>${renderPicturePlaceholderLabel(x, y, w, h, label)}${textOverlay}</g>`;
 };
+const imageTilePattern = (dataUrl, layout, intrinsic, x, y, w, h, cropL = 0, cropT = 0, cropR = 0, cropB = 0) => {
+	const sourceW = intrinsic.width * (layout.scaleX ?? 1);
+	const sourceH = intrinsic.height * (layout.scaleY ?? 1);
+	const tileW = sourceW * (1 - cropL - cropR);
+	const tileH = sourceH * (1 - cropT - cropB);
+	if (tileW <= 0 || tileH <= 0) return {
+		defs: "",
+		fill: "none"
+	};
+	const alignment = layout.alignment ?? "tl";
+	const horizontal = [
+		"t",
+		"ctr",
+		"b"
+	].includes(alignment) ? .5 : [
+		"tr",
+		"r",
+		"br"
+	].includes(alignment) ? 1 : 0;
+	const vertical = [
+		"l",
+		"ctr",
+		"r"
+	].includes(alignment) ? .5 : [
+		"bl",
+		"b",
+		"br"
+	].includes(alignment) ? 1 : 0;
+	const tileX = x + (w - tileW) * horizontal + (layout.offsetX ?? 0);
+	const tileY = y + (h - tileH) * vertical + (layout.offsetY ?? 0);
+	const mirrorX = layout.flip === "x" || layout.flip === "xy";
+	const mirrorY = layout.flip === "y" || layout.flip === "xy";
+	const patternId = mintId();
+	const images = [];
+	for (let row = 0; row < (mirrorY ? 2 : 1); row++) for (let col = 0; col < (mirrorX ? 2 : 1); col++) {
+		const reflection = col || row ? ` transform="translate(${E(col * 2 * tileW)} ${E(row * 2 * tileH)}) scale(${col ? -1 : 1} ${row ? -1 : 1})"` : "";
+		images.push(`<g${reflection}><svg width="${E(tileW)}" height="${E(tileH)}" overflow="hidden"><image x="${E(-sourceW * cropL)}" y="${E(-sourceH * cropT)}" width="${E(sourceW)}" height="${E(sourceH)}" href="${dataUrl}" xlink:href="${dataUrl}" preserveAspectRatio="none"/></svg></g>`);
+	}
+	return {
+		defs: `<defs><pattern id="${patternId}" patternUnits="userSpaceOnUse" x="${E(tileX)}" y="${E(tileY)}" width="${E(tileW * (mirrorX ? 2 : 1))}" height="${E(tileH * (mirrorY ? 2 : 1))}">${images.join("")}</pattern></defs>`,
+		fill: `url(#${patternId})`
+	};
+};
+const pictureClipGeometry = (shape, preset, x, y, w, h) => {
+	if (preset === "ellipse") return `<ellipse cx="${E(x + w / 2)}" cy="${E(y + h / 2)}" rx="${E(w / 2)}" ry="${E(h / 2)}"/>`;
+	if (preset === "roundRect") {
+		const radius = E(Math.min(w, h) * Math.max(0, Math.min(.5, (getShapeAdjustValues(shape).adj ?? 16667) / 1e5)));
+		return `<rect x="${E(x)}" y="${E(y)}" width="${E(w)}" height="${E(h)}" rx="${radius}" ry="${radius}"/>`;
+	}
+	const path = PRESET_PATHS[preset];
+	if (path) return `<path d="${path(x / EMU_PER_PX, y / EMU_PER_PX, w / EMU_PER_PX, h / EMU_PER_PX)}" clip-rule="evenodd"/>`;
+	const points = PRESET_POINTS[preset];
+	if (points) return `<polygon points="${points(w / EMU_PER_PX, h / EMU_PER_PX).map(([nx, ny]) => `${E(x + nx * w)},${E(y + ny * h)}`).join(" ")}"/>`;
+	return `<rect x="${E(x)}" y="${E(y)}" width="${E(w)}" height="${E(h)}"/>`;
+};
 const renderPicturePlaceholderLabel = (x, y, w, h, text) => {
 	const cx = x + w / 2;
 	const cy = y + h / 2;
@@ -917,10 +1758,88 @@ let nextDefId = 0;
 const mintId = () => `pkdef-${(nextDefId++).toString(36)}`;
 let activeColorMap = null;
 let activeDeckTextColor = "#000000";
-const gradientDef = (grad, theme) => {
+let activeSlideNumber = "1";
+const gradientDef = (grad, theme, transform = "", box) => {
 	const id = mintId();
+	const units = box ? "userSpaceOnUse" : "objectBoundingBox";
+	if (box) transform = ` gradientTransform="matrix(${[
+		box.w,
+		0,
+		0,
+		box.h,
+		box.x,
+		box.y
+	].map((value) => value.toFixed(4)).join(" ")})"`;
 	const orderedStops = [...grad.stops].sort((a, b) => a.offset - b.offset);
-	const stops = orderedStops.map((s) => `<stop offset="${s.offset.toFixed(4)}" stop-color="${resolveColor(s.color, theme, "#E5E7EB")}"/>`).join("");
+	const stops = orderedStops.map((s) => `<stop offset="${s.offset.toFixed(4)}" stop-color="${s.resolvedColor ?? resolveColor(s.color, theme, "#E5E7EB")}"${s.opacity !== void 0 ? ` stop-opacity="${s.opacity}"` : ""}/>`).join("");
+	if (grad.path === "rect") {
+		const focus = grad.focus ?? {
+			left: .5,
+			top: .5,
+			right: .5,
+			bottom: .5
+		};
+		const tile = grad.tileRect ?? {
+			left: 0,
+			top: 0,
+			right: 0,
+			bottom: 0
+		};
+		const l = tile.left;
+		const t = tile.top;
+		const r = 1 - tile.right;
+		const b = 1 - tile.bottom;
+		const fl = focus.left;
+		const ft = focus.top;
+		const fr = 1 - focus.right;
+		const fb = 1 - focus.bottom;
+		if (l <= fl && fl <= fr && fr <= r && t <= ft && ft <= fb && fb <= b && l < r && t < b) {
+			const sides = [
+				{
+					points: `${l},${t} ${r},${t} ${fr},${ft} ${fl},${ft}`,
+					x1: l,
+					y1: t,
+					x2: l,
+					y2: ft
+				},
+				{
+					points: `${r},${t} ${r},${b} ${fr},${fb} ${fr},${ft}`,
+					x1: r,
+					y1: t,
+					x2: fr,
+					y2: t
+				},
+				{
+					points: `${r},${b} ${l},${b} ${fl},${fb} ${fr},${fb}`,
+					x1: l,
+					y1: b,
+					x2: l,
+					y2: fb
+				},
+				{
+					points: `${l},${b} ${l},${t} ${fl},${ft} ${fl},${fb}`,
+					x1: l,
+					y1: t,
+					x2: fl,
+					y2: t
+				}
+			];
+			let gradients = "";
+			let polygons = "";
+			for (const side of sides) {
+				if (side.x1 === side.x2 && side.y1 === side.y2) continue;
+				const sideId = mintId();
+				gradients += `<linearGradient id="${sideId}" gradientUnits="userSpaceOnUse" x1="${side.x2}" y1="${side.y2}" x2="${side.x1}" y2="${side.y1}">${stops}</linearGradient>`;
+				polygons += `<polygon points="${side.points}" fill="url(#${sideId})"/>`;
+			}
+			const first = orderedStops[0];
+			const center = first && fr > fl && fb > ft ? `<rect x="${fl}" y="${ft}" width="${fr - fl}" height="${fb - ft}" fill="${first.resolvedColor ?? resolveColor(first.color, theme, "#E5E7EB")}"${first.opacity !== void 0 ? ` fill-opacity="${first.opacity}"` : ""}/>` : "";
+			return {
+				defs: `<defs>${gradients}<pattern id="${id}" patternUnits="${units}" patternContentUnits="${units}" x="${l}" y="${t}" width="${r - l}" height="${b - t}"${transform.replace("gradientTransform", "patternTransform")}><g shape-rendering="crispEdges" transform="translate(${-l} ${-t})">${polygons}${center}</g></pattern></defs>`,
+				fillAttr: `url(#${id})`
+			};
+		}
+	}
 	if (grad.path === "circle" || grad.path === "rect" || grad.path === "shape") {
 		const focus = grad.focus ?? {
 			left: .5,
@@ -928,11 +1847,10 @@ const gradientDef = (grad, theme) => {
 			right: .5,
 			bottom: .5
 		};
-		const cx = (focus.left + focus.right) / 2;
-		const cy = (focus.top + focus.bottom) / 2;
-		const reversed = orderedStops.slice().reverse().map((s) => `<stop offset="${(1 - s.offset).toFixed(4)}" stop-color="${resolveColor(s.color, theme, "#E5E7EB")}"/>`).join("");
+		const cx = (focus.left + 1 - focus.right) / 2;
+		const cy = (focus.top + 1 - focus.bottom) / 2;
 		return {
-			defs: `<defs><radialGradient id="${id}" gradientUnits="objectBoundingBox" cx="${cx.toFixed(4)}" cy="${cy.toFixed(4)}" r="${Math.max(.5, Math.max(cx, cy, 1 - cx, 1 - cy)).toFixed(4)}">${reversed}</radialGradient></defs>`,
+			defs: `<defs><radialGradient id="${id}" gradientUnits="${units}"${box ? transform : ""} cx="${cx.toFixed(4)}" cy="${cy.toFixed(4)}" r="${Math.max(.5, Math.max(cx, cy, 1 - cx, 1 - cy)).toFixed(4)}">${stops}</radialGradient></defs>`,
 			fillAttr: `url(#${id})`
 		};
 	}
@@ -944,7 +1862,7 @@ const gradientDef = (grad, theme) => {
 	const x2 = .5 + dx;
 	const y2 = .5 + dy;
 	return {
-		defs: `<defs><linearGradient id="${id}" gradientUnits="objectBoundingBox" x1="${x1.toFixed(4)}" y1="${y1.toFixed(4)}" x2="${x2.toFixed(4)}" y2="${y2.toFixed(4)}">${stops}</linearGradient></defs>`,
+		defs: `<defs><linearGradient id="${id}" gradientUnits="${units}"${transform} x1="${x1.toFixed(4)}" y1="${y1.toFixed(4)}" x2="${x2.toFixed(4)}" y2="${y2.toFixed(4)}">${stops}</linearGradient></defs>`,
 		fillAttr: `url(#${id})`
 	};
 };
@@ -1020,6 +1938,24 @@ const patternDef = (pat) => {
 		fillAttr: `url(#${id})`
 	};
 };
+const textFillPaint = (fill, theme) => (box) => {
+	if (fill.kind === "pattern") {
+		const built = patternDef({
+			preset: fill.preset,
+			foreground: resolveColor(fill.foreground, theme, "#000000"),
+			background: resolveColor(fill.background, theme, "#FFFFFF")
+		});
+		return {
+			defs: built.defs,
+			fill: built.fillAttr
+		};
+	}
+	const built = gradientDef(fill, theme, "", box);
+	return {
+		defs: built.defs,
+		fill: built.fillAttr
+	};
+};
 const DASH_PATTERNS = {
 	solid: "",
 	dot: "1 3",
@@ -1068,13 +2004,39 @@ const paint = (shape, fill, stroke, theme, isPlaceholder, pres) => {
 		let resolved = null;
 		if (shape && pres) resolved = getShapeFillColorResolved(pres, shape);
 		fillColor = resolved ?? resolveColor(fill.color, theme, "#E5E7EB");
-		const opacity = shape ? getShapeFillOpacity(shape) : null;
+		const opacity = shape ? getShapeFillOpacity(shape, pres) : null;
 		if (opacity !== null && opacity < 1) fillAttrs = ` fill-opacity="${opacity.toFixed(3)}"`;
 	} else if (fill.kind === "none") fillColor = "none";
 	else if (fill.kind === "gradient") {
 		const grad = shape ? pres ? getShapeGradientFillEffective(pres, shape) : getShapeGradientFill(shape) : null;
 		if (grad) {
-			const built = gradientDef(grad, theme);
+			let transform = "";
+			const bounds = shape && (pres ? getShapeBoundsResolved(pres, shape) : getShapeBounds(shape));
+			if (grad.rotateWithShape === false && shape && bounds && bounds.w > 0 && bounds.h > 0) {
+				const angle = getShapeRotation(shape) * Math.PI / 180;
+				const cos = Math.cos(angle);
+				const sin = Math.sin(angle);
+				const w = bounds.w;
+				const h = bounds.h;
+				const rotatedW = Math.abs(cos) * w + Math.abs(sin) * h;
+				const rotatedH = Math.abs(sin) * w + Math.abs(cos) * h;
+				const flip = getShapeFlip(shape);
+				const sx = flip?.horizontal ? -1 : 1;
+				const sy = flip?.vertical ? -1 : 1;
+				const a = sx * cos * rotatedW / w;
+				const b = -sy * sin * rotatedW / h;
+				const c = sx * sin * rotatedH / w;
+				const d = sy * cos * rotatedH / h;
+				transform = ` gradientTransform="matrix(${[
+					a,
+					b,
+					c,
+					d,
+					(1 - a - c) / 2,
+					(1 - b - d) / 2
+				].map((value) => value.toFixed(6)).join(" ")})"`;
+			}
+			const built = gradientDef(grad, theme, transform);
 			defs = built.defs;
 			fillColor = built.fillAttr;
 		} else fillColor = (shape && pres ? getShapeFillColorResolved(pres, shape) : null) ?? "none";
@@ -1097,9 +2059,9 @@ const paint = (shape, fill, stroke, theme, isPlaceholder, pres) => {
 		strokeColor = resolved ?? resolveColor(stroke.color, theme, "#9CA3AF");
 		strokeWidth = stroke.widthEmu ?? 9525;
 		if (shape) {
-			const opacity = getShapeStrokeOpacity(shape);
+			const opacity = getShapeStrokeOpacity(shape, pres);
 			if (opacity !== null && opacity < 1) strokeAttrParts.push(`stroke-opacity="${opacity.toFixed(3)}"`);
-			const dash = getShapeStrokeDash(shape);
+			const dash = getShapeStrokeDash(shape, pres);
 			if (dash && dash !== "solid") {
 				const pattern = DASH_PATTERNS[dash];
 				if (pattern) {
@@ -1108,17 +2070,17 @@ const paint = (shape, fill, stroke, theme, isPlaceholder, pres) => {
 					strokeAttrParts.push(`stroke-dasharray="${arr}"`);
 				}
 			}
-			const cap = getShapeStrokeCap(shape);
+			const cap = getShapeStrokeCap(shape, pres);
 			if (cap === "rnd") strokeAttrParts.push("stroke-linecap=\"round\"");
 			else if (cap === "sq") strokeAttrParts.push("stroke-linecap=\"square\"");
 			else if (cap === "flat") strokeAttrParts.push("stroke-linecap=\"butt\"");
-			const join = getShapeStrokeJoin(shape);
+			const join = getShapeStrokeJoin(shape, pres);
 			if (join === "round") strokeAttrParts.push("stroke-linejoin=\"round\"");
 			else if (join === "bevel") strokeAttrParts.push("stroke-linejoin=\"bevel\"");
 			else if (join === "miter") strokeAttrParts.push("stroke-linejoin=\"miter\"");
-			if (getShapeStrokeCompound(shape) === "dbl") strokeWidth = Math.max(strokeWidth, 19050);
-			const head = getShapeStrokeArrow(shape, "head");
-			const tail = getShapeStrokeArrow(shape, "tail");
+			if (getShapeStrokeCompound(shape, pres) === "dbl") strokeWidth = Math.max(strokeWidth, 19050);
+			const head = getShapeStrokeArrow(shape, "head", pres);
+			const tail = getShapeStrokeArrow(shape, "tail", pres);
 			if (head && head.type !== "none") {
 				const m = buildArrowMarker(head.type, head.width, head.length, strokeColor, "auto-start-reverse");
 				defs += m.def;
@@ -2045,116 +3007,86 @@ const ALIGNMENT_TO_CSS = {
 	right: "right",
 	justify: "justify"
 };
-const ANCHOR_TO_CSS = {
-	top: "flex-start",
-	center: "center",
-	bottom: "flex-end"
-};
-const placeholderDefaultPt = (phType) => {
-	if (phType === "title" || phType === "ctrTitle") return DEFAULT_TITLE_PT;
-	if (phType === "subTitle") return 32;
-	if (phType === "ftr" || phType === "dt" || phType === "sldNum") return 12;
-	return DEFAULT_BODY_PT;
-};
-const bulletChar = (level) => level <= 0 ? "•" : level === 1 ? "◦" : "▪";
-const bulletAutoNumType = (style) => {
-	if (style === "number") return "arabicPeriod";
-	if (style !== null && typeof style === "object" && "autoNum" in style) return style.autoNum ?? null;
-	return null;
-};
-const toRoman = (n) => {
-	if (n <= 0) return String(n);
-	const map = [
-		[1e3, "M"],
-		[900, "CM"],
-		[500, "D"],
-		[400, "CD"],
-		[100, "C"],
-		[90, "XC"],
-		[50, "L"],
-		[40, "XL"],
-		[10, "X"],
-		[9, "IX"],
-		[5, "V"],
-		[4, "IV"],
-		[1, "I"]
-	];
-	let out = "";
-	let r = n;
-	for (const [v, s] of map) while (r >= v) {
-		out += s;
-		r -= v;
-	}
-	return out;
-};
-const toAlpha = (n) => {
-	if (n <= 0) return String(n);
-	let r = n;
-	let out = "";
-	while (r > 0) {
-		r -= 1;
-		out = String.fromCharCode(65 + r % 26) + out;
-		r = Math.floor(r / 26);
-	}
-	return out;
-};
-const formatAutoNum = (token, n) => {
-	const arabic = String(n);
-	switch (token) {
-		case "arabicPlain": return arabic;
-		case "arabicPeriod": return `${arabic}.`;
-		case "arabicParenR": return `${arabic})`;
-		case "arabicParenBoth": return `(${arabic})`;
-		case "romanUcPeriod": return `${toRoman(n)}.`;
-		case "romanLcPeriod": return `${toRoman(n).toLowerCase()}.`;
-		case "romanUcParenR": return `${toRoman(n)})`;
-		case "romanLcParenR": return `${toRoman(n).toLowerCase()})`;
-		case "romanUcParenBoth": return `(${toRoman(n)})`;
-		case "romanLcParenBoth": return `(${toRoman(n).toLowerCase()})`;
-		case "alphaUcPeriod": return `${toAlpha(n)}.`;
-		case "alphaLcPeriod": return `${toAlpha(n).toLowerCase()}.`;
-		case "alphaUcParenR": return `${toAlpha(n)})`;
-		case "alphaLcParenR": return `${toAlpha(n).toLowerCase()})`;
-		case "alphaUcParenBoth": return `(${toAlpha(n)})`;
-		case "alphaLcParenBoth": return `(${toAlpha(n).toLowerCase()})`;
-		default: return `${arabic}.`;
-	}
+const ANCHOR_TO_CSS = {
+	top: "flex-start",
+	center: "center",
+	bottom: "flex-end"
+};
+const placeholderDefaultPt = (phType) => {
+	if (phType === "title" || phType === "ctrTitle") return DEFAULT_TITLE_PT;
+	if (phType === "subTitle") return 32;
+	if (phType === "ftr" || phType === "dt" || phType === "sldNum") return 12;
+	return DEFAULT_BODY_PT;
+};
+const bulletChar = (level) => level <= 0 ? "•" : level === 1 ? "◦" : "▪";
+const cssColorWithOpacity = (hex, opacity) => {
+	if (opacity === void 0 || opacity >= 1) return hex;
+	const match = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex);
+	if (!match) return hex;
+	const [r, g, b] = [
+		match[1],
+		match[2],
+		match[3]
+	].map((part) => Number.parseInt(part, 16));
+	return `rgba(${r},${g},${b},${Math.max(0, opacity).toFixed(3)})`;
 };
-const renderRun = (text, format, theme, effectivePt, _wasDefault = false) => {
+const renderRun = (text, format, theme, effectivePt, defaultColor, _wasDefault = false, suppressLineHeight = false, lineHeightOverride = void 0) => {
 	if (text === "") return "";
+	if (format?.textFill) {
+		const { textFill: _fill, outline: _outline, shadow: _shadow, glow: _glow, underline: _underline, strike: _strike, ...layout } = format;
+		return renderRun(text, {
+			...layout,
+			color: "transparent"
+		}, theme, effectivePt, defaultColor, _wasDefault, suppressLineHeight, lineHeightOverride);
+	}
 	const styles = [];
 	styles.push(`font-size:${(effectivePt * PX_PER_PT).toFixed(2)}px`);
-	styles.push(`line-height:1.05`);
+	styles.push(suppressLineHeight ? "line-height:0;vertical-align:top" : lineHeightOverride !== void 0 ? `line-height:${lineHeightOverride}` : "line-height:1.05");
 	if (format?.font) styles.push(`font-family:${escapeXml(format.font)}, ${DEFAULT_FONT}`);
 	if (format?.bold) styles.push("font-weight:700");
 	if (format?.italic) styles.push("font-style:italic");
 	const underline = format?.underline;
 	const strike = format?.strike;
 	const hasUnderline = underline !== void 0 && underline !== false && underline !== "none";
-	const hasStrike = strike !== void 0 && strike !== false && strike !== "noStrike";
-	const isWavyUnderline = typeof underline === "string" && underline.startsWith("wavy");
-	const nestedWavyUnderline = hasUnderline && hasStrike && isWavyUnderline;
-	if (nestedWavyUnderline) styles.push("text-decoration:line-through");
-	else if (hasUnderline && hasStrike) styles.push("text-decoration:underline line-through");
-	else if (hasUnderline) {
-		styles.push("text-decoration:underline");
-		if (isWavyUnderline) styles.push("text-decoration-style:wavy");
-	} else if (hasStrike) styles.push("text-decoration:line-through");
+	if (strike !== void 0 && strike !== false && strike !== "noStrike") styles.push(`text-decoration:line-through${strike === "dblStrike" ? " double" : ""}`);
+	const underlineCss = hasUnderline ? textUnderlineStyle(underline, resolveColor(format?.underlineColor ?? format?.color, theme, defaultColor), format?.underlineColor !== void 0 && format.underlineColor !== null) : "";
 	if (format?.color !== void 0 && format.color !== null) styles.push(`color:${resolveColor(format.color, theme, "#000000")}`);
 	if (format?.spc !== void 0 && format.spc !== 0) {
 		const trackingPx = format.spc / 100 * PX_PER_PT;
 		styles.push(`letter-spacing:${trackingPx.toFixed(3)}px`);
 	}
 	if (format?.baseline !== void 0 && format.baseline !== 0) {
-		const direction = format.baseline > 0 ? "super" : "sub";
-		styles.push(`vertical-align:${direction}`);
-		styles.push("font-size:0.65em");
+		styles.push(`vertical-align:${(format.baseline * effectivePt * PX_PER_PT).toFixed(2)}px`);
+		styles.push(`font-size:${(effectivePt * PX_PER_PT * .65).toFixed(2)}px`);
 	}
 	if (format?.cap === "all") styles.push("text-transform:uppercase");
 	else if (format?.cap === "small") styles.push("font-variant:small-caps");
+	if (format?.kern !== void 0) styles.push(`font-kerning:${format.kern > 0 && effectivePt >= format.kern / 100 ? "normal" : "none"}`);
 	if (format?.highlight !== void 0 && format.highlight !== null) styles.push(`background-color:${resolveColor(format.highlight, theme, "#FFFF00")}`);
+	const outline = format?.outline;
+	if (outline && outline.color) {
+		const widthPx = (outline.widthEmu ?? 9525) / EMU_PER_PX;
+		styles.push(`-webkit-text-stroke:${widthPx.toFixed(2)}px ${resolveColor(outline.color, theme, "#000000")}`);
+		styles.push("paint-order:stroke fill");
+	}
+	const textShadows = [];
+	const glow = format?.glow;
+	if (glow?.color) {
+		const radiusPx = (glow.radiusEmu ?? 63500) / EMU_PER_PX;
+		const color = cssColorWithOpacity(resolveColor(glow.color, theme, "#FFFF00"), glow.opacity);
+		textShadows.push(`0 0 ${radiusPx.toFixed(2)}px ${color}`);
+	}
+	const shadow = format?.shadow;
+	if (shadow) {
+		const distancePx = (shadow.offsetEmu ?? 38100) / EMU_PER_PX;
+		const radians = (shadow.angleDeg ?? 45) * Math.PI / 180;
+		const blurPx = (shadow.blurEmu ?? 50800) / EMU_PER_PX;
+		const color = cssColorWithOpacity(resolveColor(shadow.color ?? "#000000", theme, "#000000"), shadow.opacity);
+		textShadows.push(`${(Math.cos(radians) * distancePx).toFixed(2)}px ${(Math.sin(radians) * distancePx).toFixed(2)}px ${blurPx.toFixed(2)}px ${color}`);
+	}
+	if (textShadows.length) styles.push(`text-shadow:${textShadows.join(",")}`);
 	const html = text.split("\n").map((part) => escapeXml(part)).join("<br/>");
-	const content = nestedWavyUnderline ? `<span style="text-decoration:underline;text-decoration-style:wavy">${html}</span>` : html;
+	const content = !hasUnderline ? html : underline === "words" ? text.split(/(\s+)/u).map((part) => /^\s+$/u.test(part) ? escapeXml(part).replaceAll("\n", "<br/>") : part === "" ? "" : `<span style="${underlineCss}">${escapeXml(part)}</span>`).join("") : `<span style="${underlineCss}">${html}</span>`;
 	return `<span style="${styles.join(";")}">${content}</span>`;
 };
 const LINE_HEIGHT = 1.05;
@@ -2163,13 +3095,33 @@ const AUTOFIT_STEP = .05;
 const underlineStyleOf = (fmt) => {
 	const u = fmt?.underline;
 	if (u === void 0 || u === false || u === "none") return "none";
-	if (typeof u === "string" && u.startsWith("wavy")) return "wavy";
-	return "single";
+	switch (u) {
+		case "words":
+		case "sng":
+		case "dbl":
+		case "heavy":
+		case "dotted":
+		case "dottedHeavy":
+		case "dash":
+		case "dashHeavy":
+		case "dashLong":
+		case "dashLongHeavy":
+		case "dotDash":
+		case "dotDashHeavy":
+		case "dotDotDash":
+		case "dotDotDashHeavy":
+		case "wavy":
+		case "wavyHeavy":
+		case "wavyDbl": return u;
+		default: return "sng";
+	}
 };
-const hasStrikeFmt = (fmt) => {
+const strikeStyleOf = (fmt) => {
 	const s = fmt?.strike;
+	if (s === "dblStrike") return "double";
 	return s !== void 0 && s !== false && s !== "noStrike";
 };
+const hasPaintedTextFill = (run) => !!run.fmt?.textFill && !run.href;
 const alignOf = (a) => a === "center" || a === "right" || a === "justify" ? a : "left";
 const verticalLayoutOf = (vert) => {
 	switch (vert) {
@@ -2182,13 +3134,44 @@ const verticalLayoutOf = (vert) => {
 		case null: return "none";
 	}
 };
+const graphemeSegmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+const graphemesOf = (text) => Array.from(graphemeSegmenter.segment(text), ({ segment }) => segment);
+const isSmallCapsLowercase = (grapheme) => grapheme.toLowerCase() === grapheme && grapheme.toUpperCase() !== grapheme;
+const smallCapsParts = (text, base) => {
+	const parts = [];
+	let current = "";
+	let currentSmall = false;
+	const flush = () => {
+		if (current === "") return;
+		parts.push({
+			...base,
+			text: current,
+			...currentSmall ? { smallCaps: true } : {}
+		});
+		current = "";
+	};
+	for (const grapheme of graphemesOf(text)) {
+		const small = isSmallCapsLowercase(grapheme);
+		if (current !== "" && small !== currentSmall) flush();
+		currentSmall = small;
+		current += grapheme.toUpperCase();
+	}
+	flush();
+	return parts;
+};
 const buildSvgTextInput = (a) => {
 	const scale = a.autoFitScale;
 	const paragraphs = a.paraData.map((para, pi) => {
 		const pieces = [];
 		for (const run of para.runs) {
-			if (run.text === "\n" && run.fmt === null) {
-				pieces.push(breakPiece());
+			if (run.text === "\n") {
+				pieces.push({
+					...breakPiece(),
+					family: (a.resolveFamily ?? substituteFamily)(run.fmt?.font ?? a.themeFace),
+					sizePx: run.sizePt * scale * PX_PER_PT,
+					bold: run.fmt?.bold ?? false,
+					italic: run.fmt?.italic ?? false
+				});
 				continue;
 			}
 			let fmt = run.fmt;
@@ -2203,36 +3186,63 @@ const buildSvgTextInput = (a) => {
 			const family = (a.resolveFamily ?? substituteFamily)(fmt?.font ?? a.themeFace);
 			const sizePx = run.sizePt * scale * PX_PER_PT;
 			const fillHex = fmt?.color !== void 0 && fmt.color !== null ? resolveColor(fmt.color, a.theme, "#000000") : a.defaultColor;
-			const superSub = fmt?.baseline !== void 0 && fmt.baseline !== 0 ? fmt.baseline > 0 ? 1 : -1 : 0;
+			const baseline = fmt?.baseline ?? 0;
 			const letterSpacingPx = fmt?.spc !== void 0 && fmt.spc !== 0 ? fmt.spc / 100 * PX_PER_PT : 0;
-			const caps = fmt?.cap === "all" || fmt?.cap === "small";
+			const kerning = fmt?.kern === void 0 ? true : fmt.kern > 0 && sizePx / PX_PER_PT >= fmt.kern / 100;
+			const cap = fmt?.cap;
+			const caps = cap === "all" || cap === "small";
 			const base = {
 				family,
 				sizePx,
 				bold: fmt?.bold ?? false,
 				italic: fmt?.italic ?? false,
 				letterSpacingPx,
+				kerning,
 				fillHex,
+				...fmt?.textFill && !run.href ? { fillPaint: textFillPaint(fmt.textFill, a.theme) } : {},
+				...fmt?.underlineColor !== void 0 && fmt.underlineColor !== null ? { underlineHex: resolveColor(fmt.underlineColor, a.theme, fillHex) } : {},
 				underline: underlineStyleOf(fmt),
-				strike: hasStrikeFmt(fmt),
-				superSub,
-				href: run.href ?? null
+				strike: strikeStyleOf(fmt),
+				...fmt?.highlight ? { highlightHex: resolveColor(fmt.highlight, a.theme, "#FFFF00") } : {},
+				...fmt?.outline?.color ? {
+					outlineHex: resolveColor(fmt.outline.color, a.theme, "#000000"),
+					outlineWidthPx: (fmt.outline.widthEmu ?? 9525) / EMU_PER_PX
+				} : {},
+				...fmt?.shadow ? { shadow: {
+					...fmt.shadow,
+					...fmt.shadow.color ? { color: resolveColor(fmt.shadow.color, a.theme, "#000000") } : {}
+				} } : {},
+				...fmt?.glow ? { glow: {
+					...fmt.glow,
+					color: resolveColor(fmt.glow.color, a.theme, "#FFFF00")
+				} } : {},
+				baseline,
+				...fmt?.reflection ? { reflection: fmt.reflection } : {},
+				...fmt?.innerShadow ? { innerShadow: {
+					...fmt.innerShadow,
+					...fmt.innerShadow.color ? { color: resolveColor(fmt.innerShadow.color, a.theme, "#000000") } : {}
+				} } : {},
+				href: run.href ?? null,
+				...run.hrefTip !== void 0 ? { hrefTip: run.hrefTip } : {}
 			};
 			const segs = run.text.split("\n");
 			segs.forEach((seg, i) => {
 				const segText = caps ? seg.toUpperCase() : seg;
-				if (a.vert === "upright") for (const g of Array.from(segText)) {
+				const segPieces = cap === "small" ? smallCapsParts(seg, base) : [{
+					...base,
+					text: segText
+				}];
+				if (a.vert === "upright") for (const segPiece of segPieces) for (const g of graphemesOf(segPiece.text)) {
 					const last = pieces[pieces.length - 1];
 					if (last !== void 0 && !last.isBreak) pieces.push(breakPiece());
 					pieces.push({
-						...base,
+						...segPiece,
 						text: g,
 						isBreak: false
 					});
 				}
-				else pieces.push({
-					...base,
-					text: segText,
+				else for (const segPiece of segPieces) pieces.push({
+					...segPiece,
 					isBreak: false
 				});
 				if (i < segs.length - 1) pieces.push(breakPiece());
@@ -2251,7 +3261,13 @@ const buildSvgTextInput = (a) => {
 			px: para.lineSpacing.value * PX_PER_PT * scale
 		} : null;
 		return {
+			latinLineBreak: para.latinLineBreak,
 			align: alignOf(para.align),
+			tabStops: (para.tabStops ?? []).map((stop) => ({
+				positionPx: stop.positionEmu / EMU_PER_PX * scale,
+				alignment: stop.alignment
+			})),
+			defaultTabSizePx: (para.defaultTabSizeEmu ?? 914400) / EMU_PER_PX * scale,
 			marLpx,
 			marRpx,
 			firstIndentPx,
@@ -2261,7 +3277,7 @@ const buildSvgTextInput = (a) => {
 			lineAdvanceScale: a.lineHeightScale,
 			bullet: buildBullet(a, para, pi),
 			pieces,
-			fallbackSizePx: a.defaultPt * scale * PX_PER_PT
+			fallbackSizePx: (para.emptySizePt ?? a.defaultPt) * scale * PX_PER_PT
 		};
 	});
 	return {
@@ -2270,10 +3286,13 @@ const buildSvgTextInput = (a) => {
 		boxWpx: a.innerW / EMU_PER_PX,
 		boxHpx: a.innerH / EMU_PER_PX,
 		anchor: a.anchor,
+		anchorCentered: a.anchorCentered ?? false,
 		wrap: a.wrap,
 		paragraphs,
 		vert: a.vert,
-		columns: a.columns
+		columns: a.columns,
+		...a.effectsOnly ? { effectsOnly: true } : {},
+		...a.effectKind ? { effectKind: a.effectKind } : {}
 	};
 };
 const buildAndLayoutSvgText = (a) => layoutTextSvg(buildSvgTextInput(a), a.measure);
@@ -2287,7 +3306,7 @@ const breakPiece = () => ({
 	fillHex: "#000000",
 	underline: "none",
 	strike: false,
-	superSub: 0,
+	baseline: 0,
 	href: null,
 	isBreak: true
 });
@@ -2299,9 +3318,10 @@ const buildBullet = (a, para, pi) => {
 	const baseSizePx = (para.runs.find((r) => r.text !== "\n" && r.text !== "")?.sizePt ?? a.defaultPt) * PX_PER_PT * a.autoFitScale;
 	const sizePx = para.bulletDetail.sizePct !== null ? baseSizePx * para.bulletDetail.sizePct : para.bulletDetail.sizePts !== null ? para.bulletDetail.sizePts * PX_PER_PT * a.autoFitScale : baseSizePx;
 	const fillHex = bulletFillOf(para, a.theme, a.defaultColor);
+	const bulletFont = para.bulletDetail.fontFollowText ? para.runs.find((r) => r.text !== "\n" && r.text !== "")?.fmt?.font ?? DEFAULT_BULLET_FONT : para.bulletDetail.font ?? DEFAULT_BULLET_FONT;
 	return {
 		text: char,
-		family: (a.resolveFamily ?? substituteFamily)(para.bulletDetail.font ?? DEFAULT_BULLET_FONT),
+		family: (a.resolveFamily ?? substituteFamily)(bulletFont),
 		sizePx,
 		fillHex,
 		...para.bulletImageHref ? { imageHref: para.bulletImageHref } : {}
@@ -2312,42 +3332,7 @@ const bulletFillOf = (para, theme, defaultColor) => {
 	const runColor = para.runs.find((r) => r.text !== "\n" && r.text !== "")?.fmt?.color;
 	return runColor === void 0 || runColor === null ? defaultColor : resolveColor(runColor, theme, defaultColor);
 };
-const presetTextRect = (preset) => {
-	switch (preset) {
-		case "triangle": return {
-			l: .25,
-			t: .5,
-			r: .75,
-			b: 1
-		};
-		case "diamond": return {
-			l: .25,
-			t: .25,
-			r: .75,
-			b: .75
-		};
-		case "pentagon": return {
-			l: .191,
-			t: .236,
-			r: .809,
-			b: 1
-		};
-		case "star5": return {
-			l: .309,
-			t: .382,
-			r: .691,
-			b: .764
-		};
-		case "leftRightArrow": return {
-			l: .18,
-			t: .35,
-			r: .82,
-			b: .65
-		};
-		default: return null;
-	}
-};
-const resolveTextBodyModel = (pres, shape, bounds, theme, phType, measure, defaultColor) => {
+const resolveTextBodyModel = (pres, shape, bounds, theme, phType, measure, defaultColor, useSvgTextRect = false) => {
 	let paragraphCount;
 	try {
 		paragraphCount = getShapeParagraphCount(shape);
@@ -2365,6 +3350,10 @@ const resolveTextBodyModel = (pres, shape, bounds, theme, phType, measure, defau
 	} catch {
 		effectiveBody = {
 			anchor: getShapeTextAnchor(shape),
+			anchorCentered: null,
+			autoFit: getShapeTextAutoFit(shape),
+			autoFitParams: getShapeTextAutoFitParams(shape),
+			columns: getShapeTextColumns(shape),
 			wrap: null,
 			vert: getShapeTextDirection(shape),
 			margins: getShapeTextMargins(shape) ?? {
@@ -2384,32 +3373,23 @@ const resolveTextBodyModel = (pres, shape, bounds, theme, phType, measure, defau
 	const tIns = margins.top ?? DEFAULT_INSET_Y;
 	const rIns = margins.right ?? DEFAULT_INSET_X;
 	const bIns = margins.bottom ?? DEFAULT_INSET_Y;
-	const pRect = presetTextRect(getShapePreset(shape));
-	const rectX = pRect ? bounds.x + pRect.l * bounds.w : bounds.x;
-	const rectY = pRect ? bounds.y + pRect.t * bounds.h : bounds.y;
-	const rectW = pRect ? (pRect.r - pRect.l) * bounds.w : bounds.w;
-	const rectH = pRect ? (pRect.b - pRect.t) * bounds.h : bounds.h;
-	let innerX = rectX + lIns;
-	let innerY = rectY + tIns;
-	let innerW = rectW - lIns - rIns;
-	let innerH = rectH - tIns - bIns;
-	if (pRect && (innerW <= 0 || innerH <= 0)) {
-		innerX = rectX;
-		innerY = rectY;
-		innerW = rectW;
-		innerH = rectH;
-	}
+	const { x: innerX, y: innerY, w: innerW, h: innerH } = resolveTextBodyRect(getShapePreset(shape), bounds, {
+		left: lIns,
+		top: tIns,
+		right: rIns,
+		bottom: bIns
+	}, shapeCustomTextRect(getShapeCustomGeometry(shape), getShapeBounds(shape)));
 	if (innerW <= 0 || innerH <= 0) return null;
-	const svgTextRect = (v) => v === "none" || v === "upright" ? {
-		x: innerX,
-		y: innerY,
-		w: innerW,
-		h: innerH
-	} : {
+	const svgTextRect = (v) => useSvgTextRect && v !== "none" && v !== "upright" ? {
 		x: bounds.x + tIns,
 		y: bounds.y + lIns,
 		w: Math.max(0, bounds.w - tIns - bIns),
 		h: Math.max(0, bounds.h - lIns - rIns)
+	} : {
+		x: innerX,
+		y: innerY,
+		w: innerW,
+		h: innerH
 	};
 	const paraData = [];
 	let hasAnyText = false;
@@ -2434,15 +3414,12 @@ const resolveTextBodyModel = (pres, shape, bounds, theme, phType, measure, defau
 		const align = effective.align ?? defaultAlign;
 		const level = effective.level;
 		const bulletStyle = getParagraphBullet(shape, p) ?? effective.bullet;
-		let bulletDetail = {
-			color: null,
-			sizePct: null,
-			sizePts: null,
-			font: null
+		const bulletDetail = effective.bulletDetail ?? {
+			...getParagraphBulletStyle(pres, shape, p),
+			colorFollowText: false,
+			sizeFollowText: false,
+			fontFollowText: false
 		};
-		try {
-			bulletDetail = getParagraphBulletStyle(pres, shape, p);
-		} catch {}
 		let bulletIsPicture = false;
 		try {
 			bulletIsPicture = isParagraphBulletPicture(shape, p);
@@ -2479,16 +3456,19 @@ const resolveTextBodyModel = (pres, shape, bounds, theme, phType, measure, defau
 			elements = [];
 		}
 		let rIdx = 0;
+		let fieldIndex = 0;
+		let breakIndex = 0;
 		for (const el of elements) {
 			if (el.kind === "br") {
+				const fmt = getShapeRunFormatEffective(pres, shape, p, { breakIndex: breakIndex++ });
 				runs.push({
 					text: "\n",
-					fmt: null,
-					sizePt: defaultPt
+					fmt,
+					sizePt: fmt.size ?? defaultPt
 				});
 				continue;
 			}
-			const txt = el.text;
+			const txt = el.kind === "fld" && el.type === "slidenum" ? activeSlideNumber : el.text;
 			let fmt = el.format;
 			let href;
 			let hrefTip;
@@ -2500,19 +3480,13 @@ const resolveTextBodyModel = (pres, shape, bounds, theme, phType, measure, defau
 				}
 				try {
 					href = getShapeRunHyperlink(shape, p, rIdx) ?? void 0;
-					if (!href) {
-						const act = getShapeRunClickAction(shape, p, rIdx);
-						if (act?.kind === "slide") {
-							const idx = getSlideIndex(pres, act.slide);
-							if (idx >= 0) href = `#slide-${idx + 1}`;
-						} else if (act?.kind === "url") href = act.url;
-					}
+					if (!href) href = clickActionHref(pres, getShapeRunClickAction(shape, p, rIdx));
 					if (href) hrefTip = getShapeRunHyperlinkTooltip(shape, p, rIdx) ?? void 0;
 				} catch {
 					href = void 0;
 				}
 				rIdx++;
-			}
+			} else fmt = getShapeRunFormatEffective(pres, shape, p, { fieldIndex: fieldIndex++ });
 			const sizePt = fmt?.size ?? defaultPt;
 			if (txt) hasAnyText = true;
 			runs.push({
@@ -2524,6 +3498,10 @@ const resolveTextBodyModel = (pres, shape, bounds, theme, phType, measure, defau
 			});
 		}
 		paraData.push({
+			...runs.length === 0 ? { emptySizePt: getShapeRunFormatEffective(pres, shape, p, null).size ?? defaultPt } : {},
+			latinLineBreak: effective.latinLineBreak,
+			tabStops: effective.tabStops,
+			defaultTabSizeEmu: effective.defaultTabSizeEmu,
 			align,
 			level,
 			bulletStyle,
@@ -2538,36 +3516,17 @@ const resolveTextBodyModel = (pres, shape, bounds, theme, phType, measure, defau
 		});
 	}
 	if (!hasAnyText) return null;
-	const authoredAutofit = getShapeTextAutoFitParams(shape);
+	const authoredAutofit = effectiveBody.autoFitParams;
 	let autoFitScale = authoredAutofit?.fontScale ?? 1;
 	const lineHeightScale = 1 - (authoredAutofit?.lnSpcReduction ?? 0);
 	LINE_HEIGHT * lineHeightScale;
-	const numberLabels = Array.from({ length: paraData.length }, () => null);
-	{
-		const counters = [];
-		const types = [];
-		for (let i = 0; i < paraData.length; i++) {
-			const para = paraData[i];
-			const num = bulletAutoNumType(para.bulletStyle);
-			const level = Math.max(0, para.level);
-			for (let l = num === null ? level : level + 1; l < counters.length; l++) {
-				counters[l] = 0;
-				types[l] = null;
-			}
-			if (num === null) continue;
-			if (types[level] !== num) {
-				counters[level] = 1;
-				types[level] = num;
-			} else counters[level] = (counters[level] ?? 0) + 1;
-			numberLabels[i] = formatAutoNum(num, counters[level]);
-		}
-	}
-	if (authoredAutofit && autoFitScale === 1) {
+	const numberLabels = paragraphNumberLabels(paraData);
+	if (authoredAutofit && autoFitScale === 1 && getShapeTextAutoFit(shape) === "normal") {
 		const fitVert = verticalLayoutOf(effectiveBody.vert ?? getShapeTextDirection(shape));
-		const fitCols = getShapeTextColumns(shape);
+		const fitCols = effectiveBody.columns;
 		const fitColumns = fitVert === "none" && fitCols && fitCols.count >= 2 ? {
 			count: fitCols.count,
-			gapPx: fitCols.gapEmu !== void 0 ? fitCols.gapEmu / EMU_PER_PX : 12
+			gapPx: fitCols.gapEmu !== void 0 ? fitCols.gapEmu / EMU_PER_PX : 0
 		} : null;
 		const fitRect = svgTextRect(fitVert);
 		const fitBoxPx = (fitVert === "cw90" || fitVert === "cw270" ? fitRect.w : fitRect.h) / EMU_PER_PX;
@@ -2582,6 +3541,7 @@ const resolveTextBodyModel = (pres, shape, bounds, theme, phType, measure, defau
 			themeFace,
 			defaultColor,
 			anchor: anchor === "center" || anchor === "bottom" ? anchor : "top",
+			anchorCentered: effectiveBody.anchorCentered ?? false,
 			wrap: effectiveBody.wrap !== "none",
 			innerX: fitRect.x,
 			innerY: fitRect.y,
@@ -2601,10 +3561,55 @@ const resolveTextBodyModel = (pres, shape, bounds, theme, phType, measure, defau
 		}
 		autoFitScale = Math.max(AUTOFIT_FLOOR, s);
 	}
+	let anchorOffset = {
+		x: 0,
+		y: 0
+	};
+	if (effectiveBody.anchorCentered) {
+		const vert = verticalLayoutOf(effectiveBody.vert ?? getShapeTextDirection(shape));
+		const rect = svgTextRect(vert);
+		const cols = effectiveBody.columns;
+		const { anchorShift } = layoutCore(buildSvgTextInput({
+			pres,
+			shape,
+			theme,
+			paraData,
+			numberLabels,
+			lineHeightScale,
+			defaultPt,
+			themeFace,
+			defaultColor,
+			anchor,
+			anchorCentered: true,
+			wrap: effectiveBody.wrap !== "none",
+			innerX: rect.x,
+			innerY: rect.y,
+			innerW: rect.w,
+			innerH: rect.h,
+			measure,
+			vert,
+			autoFitScale,
+			columns: vert === "none" && cols && cols.count >= 2 ? {
+				count: cols.count,
+				gapPx: cols.gapEmu !== void 0 ? cols.gapEmu / EMU_PER_PX : 0
+			} : null
+		}), measure);
+		anchorOffset = vert === "cw90" ? {
+			x: 0,
+			y: anchorShift
+		} : vert === "cw270" ? {
+			x: 0,
+			y: -anchorShift
+		} : {
+			x: anchorShift,
+			y: 0
+		};
+	}
 	return {
 		paraData,
 		numberLabels,
 		authoredAutofit,
+		anchorOffset,
 		autoFitScale,
 		lineHeightScale,
 		defaultPt,
@@ -2619,31 +3624,29 @@ const resolveTextBodyModel = (pres, shape, bounds, theme, phType, measure, defau
 		svgTextRect
 	};
 };
-const renderTextBody = (pres, shape, bounds, theme, phType, ctx) => {
-	const model = resolveTextBodyModel(pres, shape, bounds, theme, phType, ctx.measure, activeDeckTextColor);
-	if (model === null) return "";
-	const { paraData, numberLabels, authoredAutofit, autoFitScale, defaultPt, themeFace, effectiveDefaultFont, effectiveBody, anchor, innerX, innerY, innerW, innerH, svgTextRect } = model;
-	const defaultColor = activeDeckTextColor;
+const renderHtmlParagraphs = (paraData, numberLabels, theme, autoFitScale, defaultPt, defaultColor, wrap = true) => {
 	const paragraphs = [];
 	for (let pi = 0; pi < paraData.length; pi++) {
 		const para = paraData[pi];
-		const runHtmls = para.runs.map((run) => {
+		const runHtmls = para.runs.map((run, runIndex) => {
 			let runFmt = run.fmt;
 			if (run.href) {
 				const hlinkColor = theme ? normalizeHex(theme.hyperlink) : "#0563C1";
+				const { textFill: _linkFill, ...linkFmt } = runFmt ?? {};
 				runFmt = {
-					...runFmt,
+					...linkFmt,
 					color: hlinkColor,
 					underline: runFmt?.underline ?? true
 				};
 			}
-			const span = renderRun(run.text, runFmt, theme, run.sizePt * autoFitScale, run.fmt?.size === void 0);
+			const span = renderRun(run.text, runFmt, theme, run.sizePt * autoFitScale, defaultColor, run.fmt?.size === void 0, run.text === "\n" && /[^\n]$/.test(para.runs[runIndex - 1]?.text ?? ""), para.lineSpacing?.kind === "pct" ? para.lineSpacing.value.toFixed(3) : para.lineSpacing?.kind === "pts" ? "0" : void 0);
 			if (!run.href) return span;
 			const targetAttrs = run.href.startsWith("#") ? "" : " target=\"_blank\" rel=\"noopener noreferrer\"";
 			const titleAttr = run.hrefTip ? ` title="${escapeXml(run.hrefTip)}"` : "";
 			return `<a href="${escapeXml(run.href)}"${targetAttrs}${titleAttr} style="color:inherit;text-decoration:inherit">${span}</a>`;
 		});
-		let lineHeightCss = "";
+		const firstRunPt = para.runs.find((run) => run.text !== "\n" && run.text !== "")?.sizePt ?? defaultPt;
+		let lineHeightCss = para.emptySizePt !== void 0 ? `line-height:${LINE_HEIGHT}` : "";
 		if (para.lineSpacing?.kind === "pct") lineHeightCss = `line-height:${para.lineSpacing.value.toFixed(3)}`;
 		else if (para.lineSpacing?.kind === "pts") lineHeightCss = `line-height:${(para.lineSpacing.value * PX_PER_PT * autoFitScale).toFixed(2)}px`;
 		const marginTopCss = para.spcBefPts !== null && para.spcBefPts > 0 ? `margin-top:${(para.spcBefPts * PX_PER_PT * autoFitScale).toFixed(2)}px` : "";
@@ -2652,7 +3655,12 @@ const renderTextBody = (pres, shape, bounds, theme, phType, ctx) => {
 		const rightPx = para.indent.rightEmu !== null ? para.indent.rightEmu / EMU_PER_PX * autoFitScale : 0;
 		const firstLinePx = para.indent.firstLineEmu !== null ? para.indent.firstLineEmu / EMU_PER_PX * autoFitScale : 0;
 		const pStyles = [
-			marginTopCss || (marginBottomCss ? "" : "margin:0"),
+			"margin:0",
+			para.lineSpacing?.kind === "pts" ? `font-size:${(firstRunPt * PX_PER_PT * autoFitScale).toFixed(2)}px` : "font-size:0",
+			...para.lineSpacing?.kind === "pts" && para.runs[0]?.fmt?.font ? [`font-family:${escapeXml(para.runs[0].fmt.font)}, ${DEFAULT_FONT}`] : [],
+			...para.emptySizePt !== void 0 ? [`font-size:${(para.emptySizePt * PX_PER_PT * autoFitScale).toFixed(2)}px`] : [],
+			...para.runs.some((run) => run.text.includes("	")) ? [`white-space:${wrap ? "pre-wrap" : "pre"}`, `tab-size:${((para.defaultTabSizeEmu ?? 914400) / EMU_PER_PX * autoFitScale).toFixed(2)}px`] : [],
+			marginTopCss,
 			marginBottomCss,
 			"padding:0",
 			`text-align:${ALIGNMENT_TO_CSS[para.align] ?? "left"}`,
@@ -2664,8 +3672,8 @@ const renderTextBody = (pres, shape, bounds, theme, phType, ctx) => {
 		let prefix = "";
 		const explicitChar = para.bulletStyle !== null && typeof para.bulletStyle === "object" && "char" in para.bulletStyle ? para.bulletStyle.char : null;
 		const numberLabel = numberLabels[pi];
-		const showBullet = para.bulletStyle === "bullet" || explicitChar !== null || numberLabel !== null || para.bulletIsPicture || para.bulletStyle !== "none" && para.level > 0;
-		const baseBulletPx = (para.runs.find((r) => r.text !== "\n" && r.text !== "")?.sizePt ?? defaultPt) * PX_PER_PT * autoFitScale;
+		const showBullet = para.runs.some((run) => run.text.length > 0) && (para.bulletStyle === "bullet" || explicitChar !== null || numberLabel !== null || para.bulletIsPicture || para.bulletStyle !== "none" && para.level > 0);
+		const baseBulletPx = firstRunPt * PX_PER_PT * autoFitScale;
 		if (showBullet && para.bulletImageHref) {
 			const bulletPx = para.bulletDetail.sizePct !== null ? baseBulletPx * para.bulletDetail.sizePct : para.bulletDetail.sizePts !== null ? para.bulletDetail.sizePts * PX_PER_PT * autoFitScale : baseBulletPx;
 			const imgStyles = [
@@ -2680,22 +3688,32 @@ const renderTextBody = (pres, shape, bounds, theme, phType, ctx) => {
 			const char = para.bulletIsPicture ? "■" : numberLabel ?? explicitChar ?? bulletChar(para.level);
 			const bulletStyles = [`margin-right:${(.4 * defaultPt * PX_PER_PT * autoFitScale).toFixed(2)}px`];
 			bulletStyles.push(`color:${bulletFillOf(para, theme, defaultColor)}`);
-			if (para.bulletDetail.sizePct !== null) bulletStyles.push(`font-size:${(para.bulletDetail.sizePct * 100).toFixed(1)}%`);
+			if (para.bulletDetail.sizePct !== null) bulletStyles.push(`font-size:${(baseBulletPx * para.bulletDetail.sizePct).toFixed(2)}px`);
 			else if (para.bulletDetail.sizePts !== null) bulletStyles.push(`font-size:${(para.bulletDetail.sizePts * PX_PER_PT * autoFitScale).toFixed(2)}px`);
 			else bulletStyles.push(`font-size:${baseBulletPx.toFixed(2)}px`);
-			bulletStyles.push(para.bulletDetail.font ? `font-family:${escapeXml(para.bulletDetail.font)}, ${DEFAULT_FONT}` : `font-family:${DEFAULT_BULLET_FONT}, ${DEFAULT_FONT}`);
+			const bulletFont = para.bulletDetail.fontFollowText ? para.runs.find((r) => r.text !== "\n" && r.text !== "")?.fmt?.font ?? DEFAULT_BULLET_FONT : para.bulletDetail.font ?? DEFAULT_BULLET_FONT;
+			bulletStyles.push(`font-family:${escapeXml(bulletFont)}, ${DEFAULT_FONT}`);
 			prefix = `<span style="${bulletStyles.join(";")}">${escapeXml(char)}</span>`;
 		}
-		paragraphs.push(`<p style="${pStyles.join(";")}">${prefix}${runHtmls.join("") || "&#8203;"}</p>`);
+		paragraphs.push(`<p data-pptx-paragraph="${pi}" style="${pStyles.join(";")}">${prefix}${runHtmls.join("") || "&#8203;"}</p>`);
 	}
+	return paragraphs;
+};
+const renderTextBody = (pres, shape, bounds, theme, phType, ctx, output = "body") => {
+	const model = resolveTextBodyModel(pres, shape, bounds, theme, phType, ctx.measure, activeDeckTextColor, ctx.mode === "svg" && output === "body");
+	if (model === null) return "";
+	const { paraData, numberLabels, authoredAutofit, autoFitScale, defaultPt, themeFace, effectiveDefaultFont, effectiveBody, anchor, innerX, innerY, innerW, innerH, svgTextRect } = model;
+	const defaultColor = activeDeckTextColor;
+	const paragraphs = renderHtmlParagraphs(paraData, numberLabels, theme, autoFitScale, defaultPt, defaultColor, effectiveBody.wrap !== "none");
 	const justify = ANCHOR_TO_CSS[anchor] ?? "flex-start";
-	if (ctx.mode === "svg") {
+	const customTabs = paraData.some((para) => para.tabStops?.length && para.runs.some((run) => run.text.includes("	")));
+	if (ctx.mode === "svg" || customTabs) {
 		const svgLineScale = 1 - (authoredAutofit?.lnSpcReduction ?? 0);
 		const svgVert = verticalLayoutOf(effectiveBody.vert ?? getShapeTextDirection(shape));
-		const svgCols = getShapeTextColumns(shape);
+		const svgCols = effectiveBody.columns;
 		const svgColumns = svgVert === "none" && svgCols && svgCols.count >= 2 ? {
 			count: svgCols.count,
-			gapPx: svgCols.gapEmu !== void 0 ? svgCols.gapEmu / EMU_PER_PX : 12
+			gapPx: svgCols.gapEmu !== void 0 ? svgCols.gapEmu / EMU_PER_PX : 0
 		} : null;
 		const { x: vInnerX, y: vInnerY, w: vInnerW, h: vInnerH } = svgTextRect(svgVert);
 		if (vInnerW <= 0 || vInnerH <= 0) return "";
@@ -2710,15 +3728,46 @@ const renderTextBody = (pres, shape, bounds, theme, phType, ctx) => {
 			themeFace,
 			defaultColor,
 			anchor: anchor === "center" || anchor === "bottom" ? anchor : "top",
+			anchorCentered: effectiveBody.anchorCentered ?? false,
 			wrap: effectiveBody.wrap !== "none",
 			innerX: vInnerX,
 			innerY: vInnerY,
 			innerW: vInnerW,
 			innerH: vInnerH,
-			measure: ctx.measure,
+			measure: ctx.mode === "svg" ? ctx.measure : browserTextMeasurer() ?? ctx.measure,
+			...ctx.mode === "foreignObject" ? { resolveFamily: browserFontFamily } : {},
 			vert: svgVert,
 			columns: svgColumns
 		};
+		if (output === "effects") {
+			const effectArgs = {
+				...svgArgsBase,
+				autoFitScale: authoredAutofit ? autoFitScale : 1,
+				effectsOnly: true,
+				resolveFamily: browserFontFamily
+			};
+			const effects = [
+				paraData.some((para) => para.runs.some((run) => run.fmt?.reflection != null)) ? buildAndLayoutSvgText({
+					...effectArgs,
+					effectKind: "reflection"
+				}) : "",
+				paraData.some((para) => para.runs.some(hasPaintedTextFill)) ? buildAndLayoutSvgText({
+					...effectArgs,
+					effectKind: "fill"
+				}) : "",
+				paraData.some((para) => para.runs.some((run) => run.fmt?.innerShadow != null)) ? buildAndLayoutSvgText({
+					...effectArgs,
+					effectKind: "innerShadow"
+				}) : ""
+			].join("");
+			const bodyRotDegSvg = getShapeTextBodyRotationDeg(shape);
+			if (bodyRotDegSvg !== null && bodyRotDegSvg !== 0) {
+				const pivotX = vInnerX + vInnerW / 2;
+				const pivotY = vInnerY + vInnerH / 2;
+				return `<g transform="rotate(${bodyRotDegSvg} ${E(pivotX)} ${E(pivotY)})">${effects}</g>`;
+			}
+			return effects;
+		}
 		const svgScale = authoredAutofit ? autoFitScale : 1;
 		const svgInner = buildAndLayoutSvgText({
 			...svgArgsBase,
@@ -2732,31 +3781,144 @@ const renderTextBody = (pres, shape, bounds, theme, phType, ctx) => {
 		}
 		return svgInner;
 	}
-	const vert = effectiveBody.vert ?? getShapeTextDirection(shape);
-	let writingMode = "";
-	let extraTransform = "";
-	if (vert === "vert" || vert === "eaVert") writingMode = "writing-mode:vertical-rl";
-	else if (vert === "vert270" || vert === "mongolianVert") {
-		writingMode = "writing-mode:vertical-lr";
-		if (vert === "vert270") extraTransform = ";transform:rotate(180deg)";
-	} else if (vert === "wordArtVert") writingMode = "writing-mode:vertical-rl;text-orientation:upright";
-	else if (vert === "wordArtVertRtl") writingMode = "writing-mode:vertical-rl;text-orientation:upright;direction:rtl";
-	const cols = getShapeTextColumns(shape);
-	let colStyles = "";
-	if (cols && cols.count >= 2) {
-		const gapPx = cols.gapEmu !== void 0 ? (cols.gapEmu / EMU_PER_PX).toFixed(2) : "12";
-		colStyles = `;column-count:${cols.count};column-gap:${gapPx}px`;
-	}
+	const vertical = verticalTextStyle(effectiveBody.vert ?? getShapeTextDirection(shape));
+	const writingMode = vertical.declarations;
+	const extraTransform = vertical.transform ? `;transform:${vertical.transform}` : "";
+	const columns = textColumnsStyle(effectiveBody.columns);
+	const colStyles = columns ? `;${columns}` : "";
 	const vertStyles = (writingMode ? `;${writingMode}${extraTransform}` : "") + colStyles;
-	const body = `<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;flex-direction:column;justify-content:${justify};width:100%;height:100%;box-sizing:border-box;overflow:visible;font-family:${effectiveDefaultFont};color:${defaultColor};${effectiveBody.wrap === "none" ? "white-space:nowrap" : "word-break:break-word"}${vertStyles}">${paragraphs.join("")}</div>`;
+	const wrapStyle = effectiveBody.wrap === "none" ? "white-space:nowrap" : "word-break:break-word";
+	const content = paragraphs.join("");
+	const body = `<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;flex-direction:column;justify-content:${justify};width:100%;height:100%;box-sizing:border-box;overflow:visible;font-family:${effectiveDefaultFont};color:${defaultColor};${`translate:${model.anchorOffset.x}px ${model.anchorOffset.y}px;`}${wrapStyle}${vertStyles}">${content}</div>`;
 	const foreign = `<foreignObject x="${E(innerX)}" y="${E(innerY)}" width="${E(innerW)}" height="${E(innerH)}" overflow="visible">${body}</foreignObject>`;
+	const hasCharacterEffect = paraData.some((para) => para.runs.some((run) => run.fmt?.reflection !== void 0 && run.fmt.reflection !== null || run.fmt?.innerShadow !== void 0 && run.fmt.innerShadow !== null || hasPaintedTextFill(run)));
+	let reflectionOverlay = "";
+	let fillOverlay = "";
+	let innerShadowOverlay = "";
+	if (hasCharacterEffect) {
+		const svgVert = verticalLayoutOf(effectiveBody.vert ?? getShapeTextDirection(shape));
+		const { x: rX, y: rY, w: rW, h: rH } = svgTextRect(svgVert);
+		const effectArgs = {
+			pres,
+			shape,
+			theme,
+			paraData,
+			numberLabels,
+			autoFitScale: authoredAutofit ? autoFitScale : 1,
+			lineHeightScale: 1 - (authoredAutofit?.lnSpcReduction ?? 0),
+			defaultPt,
+			themeFace,
+			defaultColor,
+			anchor: anchor === "center" || anchor === "bottom" ? anchor : "top",
+			anchorCentered: effectiveBody.anchorCentered ?? false,
+			wrap: effectiveBody.wrap !== "none",
+			innerX: rX,
+			innerY: rY,
+			innerW: rW,
+			innerH: rH,
+			measure: browserTextMeasurer() ?? ctx.measure,
+			vert: svgVert,
+			columns: null,
+			effectsOnly: true,
+			resolveFamily: browserFontFamily
+		};
+		const hasCharacterReflection = paraData.some((para) => para.runs.some((run) => run.fmt?.reflection !== void 0 && run.fmt.reflection !== null));
+		const hasCharacterInnerShadow = paraData.some((para) => para.runs.some((run) => run.fmt?.innerShadow !== void 0 && run.fmt.innerShadow !== null));
+		if (hasCharacterReflection) reflectionOverlay = buildAndLayoutSvgText({
+			...effectArgs,
+			effectKind: "reflection"
+		});
+		if (paraData.some((para) => para.runs.some(hasPaintedTextFill))) fillOverlay = buildAndLayoutSvgText({
+			...effectArgs,
+			effectKind: "fill"
+		});
+		if (hasCharacterInnerShadow) innerShadowOverlay = buildAndLayoutSvgText({
+			...effectArgs,
+			effectKind: "innerShadow"
+		});
+	}
 	const bodyRotDeg = getShapeTextBodyRotationDeg(shape);
 	if (bodyRotDeg !== null && bodyRotDeg !== 0) {
 		const pivotX = innerX + innerW / 2;
 		const pivotY = innerY + innerH / 2;
-		return `<g transform="rotate(${bodyRotDeg} ${E(pivotX)} ${E(pivotY)})">${foreign}</g>`;
+		const content = output === "effects" ? `${reflectionOverlay}${fillOverlay}${innerShadowOverlay}` : `${reflectionOverlay}${foreign}${fillOverlay}${innerShadowOverlay}`;
+		return `<g transform="rotate(${bodyRotDeg} ${E(pivotX)} ${E(pivotY)})">${content}</g>`;
 	}
-	return foreign;
+	return output === "effects" ? reflectionOverlay + fillOverlay + innerShadowOverlay : reflectionOverlay + foreign + fillOverlay + innerShadowOverlay;
+};
+/**
+* Paint only character reflection/inner-shadow effects for an editable text
+* body. The caller supplies the local bounds of the editable box in EMUs. For
+* a table, `cell` selects a zero-based row/column and bounds describe that cell.
+* Body rotation and vertical text handling remain canonical here; the editor only
+* supplies the outer shape/group transform around this SVG.
+*/
+const renderTextEffectsSvg = (pres, slide, shape, bounds, opts = {}) => {
+	if (opts.cell) return renderTableCellEffectsSvgInternal(pres, slide, shape, opts.cell, bounds, opts);
+	activeColorMap = getEffectiveColorMap(slide);
+	activeDeckTextColor = resolveDeckBodyTextColor(slide) ?? "#000000";
+	const theme = getPresentationTheme(pres);
+	const localBounds = {
+		x: 0,
+		y: 0,
+		w: bounds.w,
+		h: bounds.h
+	};
+	const ctx = {
+		groupScale: {
+			sx: 1,
+			sy: 1
+		},
+		groupReflected: false,
+		mode: "foreignObject",
+		measure: opts.measureText ?? browserTextMeasurer() ?? defaultMeasurer,
+		ownShapes: true,
+		background: {
+			id: "",
+			width: localBounds.w / EMU_PER_PX,
+			height: localBounds.h / EMU_PER_PX
+		},
+		inverseGroupTransform: ""
+	};
+	const body = renderTextBody(pres, shape, localBounds, theme, getShapePlaceholderType(shape), ctx, "effects");
+	if (!body) return "";
+	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${E(localBounds.w)} ${E(localBounds.h)}" width="100%" height="100%" overflow="visible" aria-hidden="true">${body}</svg>`;
+};
+/** Paint only character effects for an editable table cell. */
+const renderTableCellEffectsSvgInternal = (pres, slide, shape, cellPosition, bounds, opts = {}) => {
+	activeColorMap = getEffectiveColorMap(slide);
+	activeDeckTextColor = resolveDeckBodyTextColor(slide) ?? "#000000";
+	const cell = getTableCells(shape)[cellPosition.row]?.[cellPosition.col];
+	if (!cell) return "";
+	const paragraphs = getTableCellParagraphs(cell);
+	const theme = getPresentationTheme(pres);
+	const margins = getTableCellMargins(cell);
+	const anchor = getTableCellAnchor(cell) ?? "top";
+	const localBounds = {
+		x: 0,
+		y: 0,
+		w: bounds.w,
+		h: bounds.h
+	};
+	const ctx = {
+		groupScale: {
+			sx: 1,
+			sy: 1
+		},
+		groupReflected: false,
+		mode: "foreignObject",
+		measure: opts.measureText ?? browserTextMeasurer() ?? defaultMeasurer,
+		ownShapes: true,
+		background: {
+			id: "",
+			width: localBounds.w / EMU_PER_PX,
+			height: localBounds.h / EMU_PER_PX
+		},
+		inverseGroupTransform: ""
+	};
+	const body = renderTableCellText(cell, paragraphs, 0, 0, localBounds.w, localBounds.h, activeDeckTextColor, pres, shape, theme, getPresentationFonts(pres)?.minorLatin ?? null, ctx, anchor, margins, true);
+	if (!body) return "";
+	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${E(localBounds.w)} ${E(localBounds.h)}" width="100%" height="100%" overflow="visible" aria-hidden="true">${body}</svg>`;
 };
 const E = (n) => (n / EMU_PER_PX).toFixed(2);
 const px = (n) => n.toFixed(2);
@@ -2781,6 +3943,16 @@ const accentSequence = (theme) => {
 	return hexes.length > 0 ? hexes : fallbacks;
 };
 const DEFAULT_CHART_TITLE_PT = 13;
+const chartText = (f, x, y, attrs, content) => {
+	if (f.reflected) {
+		const reflection = `translate(${px(2 * x)} 0) scale(-1 1)`;
+		const rotation = /transform="([^"]*)"/.exec(attrs);
+		attrs = rotation ? attrs.replace(rotation[0], `transform="${rotation[1]} ${reflection}"`) : `${attrs} transform="${reflection}"`;
+		const anchor = /text-anchor="(start|middle|end)"/.exec(attrs);
+		attrs = anchor ? attrs.replace(anchor[0], `text-anchor="${anchor[1] === "start" ? "end" : anchor[1] === "end" ? "start" : "middle"}"`) : `${attrs} text-anchor="end"`;
+	}
+	return `<text x="${px(x)}" y="${px(y)}" ${attrs}>${content}</text>`;
+};
 const layoutChart = (xEmu, yEmu, wEmu, hEmu, hasTitle, hasAxes, titleOverlay = false, legendOverlay = false, hasLegend = true, titlePx = DEFAULT_CHART_TITLE_PT * PX_PER_PT, plotAreaLayout) => {
 	const x = xEmu / EMU_PER_PX;
 	const y = yEmu / EMU_PER_PX;
@@ -2814,14 +3986,25 @@ const niceStep = (range, target = 5) => {
 	const m = rawStep / base;
 	return (m < 1.5 ? 1 : m < 3 ? 2 : m < 7 ? 5 : 10) * base;
 };
+const MAX_AXIS_TICKS = 1e3;
+const intervalTicks = (min, max, step) => {
+	if (!(step > 0) || !Number.isFinite(step)) return [];
+	const start = Math.ceil(min / step) * step;
+	const count = Math.floor((max - start) / step + 1e-9) + 1;
+	if (!Number.isFinite(count) || count <= 0 || count > MAX_AXIS_TICKS) return [];
+	const ticks = [];
+	for (let i = 0; i < count; i++) {
+		const value = start + i * step;
+		if (Number.isFinite(value) && value !== ticks.at(-1)) ticks.push(value);
+	}
+	return ticks;
+};
 const niceTicks = (min, max, target = 5) => {
 	const range = max - min;
 	if (range <= 0) return [min];
 	const step = niceStep(range, target);
-	const start = Math.ceil(min / step) * step;
-	const ticks = [];
-	for (let v = start; v <= max + step / 2; v += step) ticks.push(v);
-	return ticks;
+	const ticks = intervalTicks(min, max + step / 2, step);
+	return ticks.length > 0 ? ticks : [min, max];
 };
 const formatTick = (v) => {
 	if (v === 0) return "0";
@@ -2901,12 +4084,8 @@ const axisTickAttrs = (style) => {
 	return `font-family="sans-serif" font-size="${chartFontPx(sz)}" fill="${fill}"${weight}${italic}`;
 };
 const renderValueAxis = (f, axis) => {
-	const ticks = axis.majorUnit ? (() => {
-		const out = [];
-		const start = Math.ceil(axis.min / axis.majorUnit) * axis.majorUnit;
-		for (let t = start; t <= axis.max + 1e-9; t += axis.majorUnit) out.push(t);
-		return out.length > 0 ? out : niceTicks(axis.min, axis.max);
-	})() : niceTicks(axis.min, axis.max);
+	const authoredTicks = axis.majorUnit ? intervalTicks(axis.min, axis.max, axis.majorUnit) : [];
+	const ticks = authoredTicks.length > 0 ? authoredTicks : niceTicks(axis.min, axis.max);
 	const out = [];
 	const range = axis.max - axis.min || 1;
 	const fmtTick = (t) => axis.percent ? `${Math.round(t * 100)}%` : formatAxisLabel(axis.displayUnits ? t / DISPLAY_UNIT_DIVISOR[axis.displayUnits] : t, axis.numberFormat);
@@ -2915,6 +4094,26 @@ const renderValueAxis = (f, axis) => {
 	const axisColor = axis.lineColor ?? DEFAULT_AXIS_COLOR;
 	const tickMark = axis.majorTickMark ?? "out";
 	const tickLen = AXIS_TICK_LEN;
+	if (axis.minorGridlines) {
+		const automaticMinorUnit = (ticks.length > 1 ? ticks[1] - ticks[0] : range) / 5;
+		const authoredMinorTicks = axis.minorUnit ? intervalTicks(axis.min, axis.max, axis.minorUnit) : [];
+		const minorTicks = authoredMinorTicks.length > 0 ? authoredMinorTicks : intervalTicks(axis.min, axis.max, automaticMinorUnit);
+		const positionKey = (value) => ((value - axis.min) / range).toFixed(10);
+		const majorPositions = new Set(ticks.map(positionKey));
+		const stroke = axis.minorGridlineColor ?? DEFAULT_GRID_COLOR;
+		const width = axis.minorGridlineWidthEmu === void 0 ? .5 : axis.minorGridlineWidthEmu / EMU_PER_PX;
+		for (const t of minorTicks) {
+			if (majorPositions.has(positionKey(t))) continue;
+			const fraction = (t - axis.min) / range;
+			if (axis.orientation === "vertical") {
+				const y = f.plotY + f.plotH - fraction * f.plotH;
+				out.push(`<line data-chart-gridline="minor" x1="${px(f.plotX)}" y1="${px(y)}" x2="${px(f.plotX + f.plotW)}" y2="${px(y)}" stroke="${stroke}" stroke-width="${width}"/>`);
+			} else {
+				const x = f.plotX + fraction * f.plotW;
+				out.push(`<line data-chart-gridline="minor" x1="${px(x)}" y1="${px(f.plotY)}" x2="${px(x)}" y2="${px(f.plotY + f.plotH)}" stroke="${stroke}" stroke-width="${width}"/>`);
+			}
+		}
+	}
 	for (const t of ticks) if (axis.orientation === "vertical") {
 		const yp = f.plotY + f.plotH - (t - axis.min) / range * f.plotH;
 		const onRight = axis.side === "right";
@@ -2930,7 +4129,7 @@ const renderValueAxis = (f, axis) => {
 		const labelX = onRight ? edgeX + 4 : edgeX - 4;
 		const rot = axis.labelRotationDeg ?? 0;
 		const transform = rot ? ` transform="rotate(${rot} ${px(labelX)} ${px(yp)})"` : "";
-		out.push(`<text x="${px(labelX)}" y="${px(yp)}" text-anchor="${onRight ? "start" : "end"}" dominant-baseline="middle" ${axisTickAttrs(axis.labelStyle)}${transform}>${escapeXml(fmtTick(t))}</text>`);
+		out.push(chartText(f, labelX, yp, `text-anchor="${onRight ? "start" : "end"}" dominant-baseline="middle" ${axisTickAttrs(axis.labelStyle)}${transform}`, `${escapeXml(fmtTick(t))}`));
 	} else {
 		const xp = f.plotX + (t - axis.min) / range * f.plotW;
 		if (showGrid) out.push(`<line x1="${px(xp)}" y1="${px(f.plotY)}" x2="${px(xp)}" y2="${px(f.plotY + f.plotH)}" stroke="${gridStroke}" stroke-width="0.5"/>`);
@@ -2943,15 +4142,15 @@ const renderValueAxis = (f, axis) => {
 		const horizLabelY = f.plotY + f.plotH + 12;
 		const rotH = axis.labelRotationDeg ?? 0;
 		const transformH = rotH ? ` transform="rotate(${rotH} ${px(xp)} ${px(horizLabelY)})"` : "";
-		out.push(`<text x="${px(xp)}" y="${px(horizLabelY)}" text-anchor="middle" dominant-baseline="middle" ${axisTickAttrs(axis.labelStyle)}${transformH}>${escapeXml(fmtTick(t))}</text>`);
+		out.push(chartText(f, xp, horizLabelY, `text-anchor="middle" dominant-baseline="middle" ${axisTickAttrs(axis.labelStyle)}${transformH}`, `${escapeXml(fmtTick(t))}`));
 	}
 	if (axis.displayUnits) {
 		const lbl = DISPLAY_UNIT_LABEL[axis.displayUnits];
 		if (axis.orientation === "vertical") {
 			const lblX = f.plotX - 26;
 			const lblY = f.plotY + f.plotH / 2;
-			out.push(`<text x="${px(lblX)}" y="${px(lblY)}" text-anchor="middle" font-family="sans-serif" font-size="9" fill="#6B7280" font-style="italic" transform="rotate(-90 ${px(lblX)} ${px(lblY)})">${escapeXml(lbl)}</text>`);
-		} else out.push(`<text x="${px(f.plotX + f.plotW)}" y="${px(f.plotY + f.plotH + 22)}" text-anchor="end" font-family="sans-serif" font-size="9" fill="#6B7280" font-style="italic">${escapeXml(lbl)}</text>`);
+			out.push(chartText(f, lblX, lblY, `text-anchor="middle" font-family="sans-serif" font-size="9" fill="#6B7280" font-style="italic" transform="rotate(-90 ${px(lblX)} ${px(lblY)})"`, `${escapeXml(lbl)}`));
+		} else out.push(chartText(f, f.plotX + f.plotW, f.plotY + f.plotH + 22, `text-anchor="end" font-family="sans-serif" font-size="9" fill="#6B7280" font-style="italic"`, `${escapeXml(lbl)}`));
 	}
 	if (!axis.lineHidden) if (axis.orientation === "vertical") out.push(`<line x1="${px(f.plotX)}" y1="${px(f.plotY)}" x2="${px(f.plotX)}" y2="${px(f.plotY + f.plotH)}" stroke="${axisColor}" stroke-width="1"/>`);
 	else {
@@ -2975,7 +4174,7 @@ const renderCategoryAxis = (f, orientation, cats, pointCount, skip = 1, labelSty
 			const truncated = labels[i] !== void 0 && labels[i].length > truncLen ? `${labels[i].slice(0, truncLen - 2)}…` : labels[i] ?? "";
 			const transform = labelRotationDeg && labelRotationDeg !== 0 ? ` transform="rotate(${labelRotationDeg} ${px(cx)} ${px(cy)})"` : "";
 			const anchor = labelAlign === "l" ? "start" : labelAlign === "r" ? "end" : labelAlign === "ctr" ? "middle" : labelRotationDeg && labelRotationDeg > 0 ? "end" : labelRotationDeg && labelRotationDeg < 0 ? "start" : "middle";
-			out.push(`<text x="${px(cx)}" y="${px(cy)}" text-anchor="${anchor}" dominant-baseline="middle" ${axisTickAttrs(labelStyle)}${transform}>${escapeXml(truncated)}</text>`);
+			out.push(chartText(f, cx, cy, `text-anchor="${anchor}" dominant-baseline="middle" ${axisTickAttrs(labelStyle)}${transform}`, `${escapeXml(truncated)}`));
 		}
 	} else {
 		const step = pointCount > 0 ? f.plotH / pointCount : 0;
@@ -2986,7 +4185,7 @@ const renderCategoryAxis = (f, orientation, cats, pointCount, skip = 1, labelSty
 			const lx = f.plotX - 4;
 			const truncated = labels[i] !== void 0 && labels[i].length > truncLen ? `${labels[i].slice(0, truncLen - 2)}…` : labels[i] ?? "";
 			const transform = labelRotationDeg && labelRotationDeg !== 0 ? ` transform="rotate(${labelRotationDeg} ${px(lx)} ${px(cy)})"` : "";
-			out.push(`<text x="${px(lx)}" y="${px(cy)}" text-anchor="end" dominant-baseline="middle" ${axisTickAttrs(labelStyle)}${transform}>${escapeXml(truncated)}</text>`);
+			out.push(chartText(f, lx, cy, `text-anchor="end" dominant-baseline="middle" ${axisTickAttrs(labelStyle)}${transform}`, `${escapeXml(truncated)}`));
 		}
 	}
 	const axisColor = lineColor ?? DEFAULT_AXIS_COLOR;
@@ -3060,7 +4259,7 @@ const renderChartTitle = (f, title, style) => {
 	const fill = style?.color ?? "#1F2937";
 	const weight = style?.bold === false ? "400" : "600";
 	const fontStyleAttr = style?.italic ? " font-style=\"italic\"" : "";
-	return `<text x="${px(f.x + f.w / 2)}" y="${px(f.titleY)}" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="${chartFontPx(sz)}" fill="${fill}" font-weight="${weight}"${fontStyleAttr}>${escapeXml(title)}</text>`;
+	return chartText(f, f.x + f.w / 2, f.titleY, `text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="${chartFontPx(sz)}" fill="${fill}" font-weight="${weight}"${fontStyleAttr}`, `${escapeXml(title)}`);
 };
 const FULLWIDTH_CHAR_PATTERN = /[\u1100-\u115F\u2E80-\u303E\u3041-\u33FF\u3400-\u4DBF\u4E00-\u9FFF\uA000-\uA4CF\uAC00-\uD7A3\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFF60\uFFE0-\uFFE6]/u;
 const approxLegendTextPx = (text, fontPx) => {
@@ -3095,7 +4294,7 @@ const renderChartLegend = (f, names, colors, position = "b", textStyle, markers)
 		const rowY = position === "b" ? f.legendY : f.y + 12;
 		let cursor = f.x + Math.max(0, (f.w - naturalTotal * scale) / 2);
 		for (let i = 0; i < names.length; i++) {
-			out.push(swatch(i, cursor, rowY - 4), `<text x="${px(cursor + swatchGapPx * scale)}" y="${px(rowY)}" dominant-baseline="middle" ${effAttrs}>${escapeXml(names[i] ?? `Series ${i + 1}`)}</text>`);
+			out.push(swatch(i, cursor, rowY - 4), chartText(f, cursor + swatchGapPx * scale, rowY, `dominant-baseline="middle" ${effAttrs}`, `${escapeXml(names[i] ?? `Series ${i + 1}`)}`));
 			cursor += (swatchGapPx + (labelWidths[i] ?? 0) + itemGapPx) * scale;
 		}
 		return out.join("");
@@ -3108,7 +4307,7 @@ const renderChartLegend = (f, names, colors, position = "b", textStyle, markers)
 	const xCol = position === "l" ? f.x + 6 : f.x + f.w - rightColW;
 	for (let i = 0; i < names.length; i++) {
 		const yp = yStart + i * lineH;
-		out.push(swatch(i, xCol, yp - 4), `<text x="${px(xCol + 14)}" y="${px(yp + 4)}" dominant-baseline="middle" ${textAttrs}>${escapeXml(names[i] ?? `Series ${i + 1}`)}</text>`);
+		out.push(swatch(i, xCol, yp - 4), chartText(f, xCol + 14, yp + 4, `dominant-baseline="middle" ${textAttrs}`, `${escapeXml(names[i] ?? `Series ${i + 1}`)}`));
 	}
 	return out.join("");
 };
@@ -3120,6 +4319,50 @@ const pointCount = (spec) => {
 };
 const chartFillOpacityAttr = (opacity = 1) => opacity === 1 ? "" : ` fill-opacity="${opacity.toFixed(3)}"`;
 const chartPointBaseColor = (spec, colors, seriesIndex, pointIndex) => spec.series[seriesIndex]?.pointColors?.[pointIndex] ?? (spec.varyColors && spec.series.length === 1 ? colors[pointIndex % colors.length] : spec.series[seriesIndex]?.color ?? colors[seriesIndex % colors.length]);
+const columnLabelLayout = (y, h, v, pos) => {
+	let coordinate;
+	let fill = "#374151";
+	if (pos === "ctr") {
+		coordinate = y + h / 2 + 3;
+		fill = "#FFFFFF";
+	} else if (pos === "inEnd") {
+		coordinate = v >= 0 ? y + 9 : y + h - 3;
+		fill = "#FFFFFF";
+	} else if (pos === "inBase") {
+		coordinate = v >= 0 ? y + h - 3 : y + 9;
+		fill = "#FFFFFF";
+	} else coordinate = v >= 0 ? y - 2 : y + h + 9;
+	return {
+		coordinate,
+		fill
+	};
+};
+const barLabelLayout = (x, w, v, pos) => {
+	let coordinate;
+	let anchor;
+	let fill = "#374151";
+	if (pos === "ctr") {
+		coordinate = x + w / 2;
+		anchor = "middle";
+		fill = "#FFFFFF";
+	} else if (pos === "inEnd") {
+		coordinate = v >= 0 ? x + w - 4 : x + 4;
+		anchor = v >= 0 ? "end" : "start";
+		fill = "#FFFFFF";
+	} else if (pos === "inBase") {
+		coordinate = v >= 0 ? x + 4 : x + w - 4;
+		anchor = v >= 0 ? "start" : "end";
+		fill = "#FFFFFF";
+	} else {
+		coordinate = v >= 0 ? x + w + 2 : x - 2;
+		anchor = v >= 0 ? "start" : "end";
+	}
+	return {
+		coordinate,
+		anchor,
+		fill
+	};
+};
 const renderColumnChart = (f, spec, colors) => {
 	const N = pointCount(spec);
 	if (N === 0 || spec.series.length === 0) return "";
@@ -3135,7 +4378,6 @@ const renderColumnChart = (f, spec, colors) => {
 	const clusterUnitsC = isStacked ? 1 : 1 + (Sc - 1) * (1 - overlapPctC);
 	const barW = groupW / Math.max(.5, clusterUnitsC + gapPctC);
 	const baseY = f.plotY + f.plotH - (0 - min) / range * f.plotH;
-	const showLabelFor = (s) => spec.series[s]?.dataLabels?.showValue ?? spec.dataLabels?.showValue ?? false;
 	const out = [];
 	for (let c = 0; c < N; c++) if (isStacked) {
 		let total = 0;
@@ -3156,10 +4398,10 @@ const renderColumnChart = (f, spec, colors) => {
 			const y1 = f.plotY + f.plotH - (Math.min(stackedTop, stackedBase) - min) / range * f.plotH;
 			const h = Math.abs(y1 - y0);
 			out.push(`<rect x="${px(x0)}" y="${px(y0)}" width="${px(barW)}" height="${px(h)}" fill="${chartPointBaseColor(spec, colors, s, c)}"${chartFillOpacityAttr(spec.series[s]?.fillOpacity)}/>`);
-			if (showLabelFor(s) && Math.abs(v) > 0) {
-				const labelY = (y0 + y1) / 2 + 3;
-				const labelText = isPercent ? `${Math.round(v * 100)}%` : formatDataLabelValue(spec, s, v);
-				out.push(`<text x="${px(x0 + barW / 2)}" y="${px(labelY)}" text-anchor="middle" font-family="sans-serif" font-size="9" fill="#FFFFFF" font-weight="600">${labelText}</text>`);
+			const labelText = cartesianDataLabelText(spec, s, c, spec.series[s]?.values[c] ?? 0);
+			if (labelText) {
+				const { coordinate: labelY, fill } = columnLabelLayout(y0, h, v, chartPointLabelOptions(spec, s, c).position ?? "ctr");
+				out.push(chartText(f, x0 + barW / 2, labelY, `text-anchor="middle" ${dataLabelTextAttrs(spec, s, fill, 9, true, c)}`, `${escapeXml(labelText)}`));
 			}
 			if (v >= 0) posAcc = stackedTop;
 			else negAcc = stackedTop;
@@ -3177,21 +4419,10 @@ const renderColumnChart = (f, spec, colors) => {
 			const baseColor = chartPointBaseColor(spec, colors, s, c);
 			const fillColor = v < 0 && spec.series[s]?.invertIfNegative ? mixHex(baseColor, "#000000", .55) : baseColor;
 			out.push(`<rect x="${px(x0)}" y="${px(y0)}" width="${px(barW)}" height="${px(h)}" fill="${fillColor}"${chartFillOpacityAttr(spec.series[s]?.fillOpacity)}/>`);
-			if (showLabelFor(s)) {
-				const pos = spec.series[s]?.dataLabels?.position ?? spec.dataLabels?.position;
-				let labelY;
-				let fill = "#374151";
-				if (pos === "ctr") {
-					labelY = y0 + h / 2 + 3;
-					fill = "#FFFFFF";
-				} else if (pos === "inEnd") {
-					labelY = v >= 0 ? y0 + 9 : y0 + h - 3;
-					fill = "#FFFFFF";
-				} else if (pos === "inBase") {
-					labelY = v >= 0 ? y0 + h - 3 : y0 + 9;
-					fill = "#FFFFFF";
-				} else labelY = v >= 0 ? y0 - 2 : y0 + h + 9;
-				out.push(`<text x="${px(x0 + barW / 2)}" y="${px(labelY)}" text-anchor="middle" ${dataLabelTextAttrs(spec, s, fill)}>${formatDataLabelValue(spec, s, v)}</text>`);
+			const labelText = cartesianDataLabelText(spec, s, c, v);
+			if (labelText) {
+				const { coordinate: labelY, fill } = columnLabelLayout(y0, h, v, chartPointLabelOptions(spec, s, c).position);
+				out.push(chartText(f, x0 + barW / 2, labelY, `text-anchor="middle" ${dataLabelTextAttrs(spec, s, fill, 9, false, c)}`, `${escapeXml(labelText)}`));
 			}
 		}
 	}
@@ -3212,11 +4443,11 @@ const renderColumnChart = (f, spec, colors) => {
 			ys.push(cy);
 		}
 		if (xs.length < 2) continue;
-		out.push(trendlinePath(xs, ys, series.trendline, tlColor));
+		out.push(trendlinePath(f, xs, ys, series.trendline, tlColor));
 	}
 	return out.join("");
 };
-const trendlinePath = (xs, ys, tl, color) => {
+const trendlinePath = (f, xs, ys, tl, color) => {
 	const n = xs.length;
 	const stepX = n >= 2 ? (xs[n - 1] - xs[0]) / (n - 1) : 0;
 	const extendBefore = (tl.backward ?? 0) * stepX;
@@ -3267,7 +4498,7 @@ const trendlinePath = (xs, ys, tl, color) => {
 	const path = `<path d="${pts.map(([x, y], i) => `${i === 0 ? "M" : "L"}${px(x)},${px(y)}`).join(" ")}" fill="none" stroke="${color}" stroke-width="1.5" stroke-dasharray="6 3" stroke-linecap="round"/>`;
 	if (tl.name !== void 0 && tl.name.length > 0) {
 		const [lx, ly] = pts[pts.length - 1];
-		return path + `<text x="${px(lx + 4)}" y="${px(ly)}" dominant-baseline="middle" font-family="sans-serif" font-size="9" fill="${color}">${escapeXml(tl.name)}</text>`;
+		return path + chartText(f, lx + 4, ly, `dominant-baseline="middle" font-family="sans-serif" font-size="9" fill="${color}"`, `${escapeXml(tl.name)}`);
 	}
 	return path;
 };
@@ -3352,12 +4583,28 @@ const formatChartValue = (v) => {
 	if (abs >= 10) return v.toFixed(1);
 	return v.toFixed(2).replace(/\.?0+$/, "");
 };
-const formatDataLabelValue = (spec, seriesIdx, v) => {
-	const nf = spec.series[seriesIdx]?.dataLabels?.numberFormat ?? spec.dataLabels?.numberFormat;
+const chartPointLabelOptions = (spec, seriesIdx, pointIdx) => ({
+	...spec.dataLabels,
+	...spec.series[seriesIdx]?.dataLabels,
+	...spec.series[seriesIdx]?.pointDataLabels?.[pointIdx]
+});
+const cartesianDataLabelText = (spec, seriesIdx, pointIdx, value) => {
+	const options = chartPointLabelOptions(spec, seriesIdx, pointIdx);
+	if (options.text !== void 0) return options.text;
+	const parts = [];
+	const name = spec.series[seriesIdx]?.name;
+	const category = spec.categories[pointIdx];
+	if (options.showSeriesName && name) parts.push(name);
+	if (options.showCategory && category) parts.push(category);
+	if (options.showValue) parts.push(formatDataLabelValue(spec, seriesIdx, value, pointIdx));
+	return parts.join(options.separator ?? " ");
+};
+const formatDataLabelValue = (spec, seriesIdx, v, pointIdx) => {
+	const nf = (pointIdx === void 0 ? void 0 : spec.series[seriesIdx]?.pointDataLabels?.[pointIdx])?.numberFormat ?? spec.series[seriesIdx]?.dataLabels?.numberFormat ?? spec.dataLabels?.numberFormat;
 	return nf ? formatAxisLabel(v, nf) : formatChartValue(v);
 };
-const dataLabelTextAttrs = (spec, seriesIdx, fallbackFill, fallbackSizePt = 9, fallbackBold = false) => {
-	const style = spec.series[seriesIdx]?.dataLabels?.textStyle ?? spec.dataLabels?.textStyle;
+const dataLabelTextAttrs = (spec, seriesIdx, fallbackFill, fallbackSizePt = 9, fallbackBold = false, pointIdx) => {
+	const style = (pointIdx === void 0 ? void 0 : spec.series[seriesIdx]?.pointDataLabels?.[pointIdx])?.textStyle ?? spec.series[seriesIdx]?.dataLabels?.textStyle ?? spec.dataLabels?.textStyle;
 	const sz = style?.sizePt ?? fallbackSizePt;
 	const fill = style?.color ?? fallbackFill;
 	const weight = style?.bold ?? fallbackBold ? " font-weight=\"600\"" : "";
@@ -3379,7 +4626,6 @@ const renderBarChart = (f, spec, colors) => {
 	const clusterUnitsB = isStacked ? 1 : 1 + (Sb - 1) * (1 - overlapPctB);
 	const barH = groupH / Math.max(.5, clusterUnitsB + gapPctB);
 	const baseX = f.plotX + (0 - min) / range * f.plotW;
-	const showLabelForBar = (s) => spec.series[s]?.dataLabels?.showValue ?? spec.dataLabels?.showValue ?? false;
 	const out = [];
 	for (let c = 0; c < N; c++) if (isStacked) {
 		let total = 0;
@@ -3399,10 +4645,10 @@ const renderBarChart = (f, spec, colors) => {
 			const x1 = f.plotX + (Math.max(base, stackedTop) - min) / range * f.plotW;
 			const w = Math.abs(x1 - x0);
 			out.push(`<rect x="${px(x0)}" y="${px(y0)}" width="${px(w)}" height="${px(barH)}" fill="${chartPointBaseColor(spec, colors, s, c)}"${chartFillOpacityAttr(spec.series[s]?.fillOpacity)}/>`);
-			if (showLabelForBar(s) && Math.abs(v) > 0) {
-				const labelX = (x0 + x1) / 2;
-				const labelText = isPercent ? `${Math.round(v * 100)}%` : formatDataLabelValue(spec, s, v);
-				out.push(`<text x="${px(labelX)}" y="${px(y0 + barH / 2 + 3)}" text-anchor="middle" font-family="sans-serif" font-size="9" fill="#FFFFFF" font-weight="600">${labelText}</text>`);
+			const labelText = cartesianDataLabelText(spec, s, c, spec.series[s]?.values[c] ?? 0);
+			if (labelText) {
+				const { coordinate: labelX, anchor, fill } = barLabelLayout(x0, w, v, chartPointLabelOptions(spec, s, c).position ?? "ctr");
+				out.push(chartText(f, labelX, y0 + barH / 2 + 3, `text-anchor="${anchor}" ${dataLabelTextAttrs(spec, s, fill, 9, true, c)}`, `${escapeXml(labelText)}`));
 			}
 			if (v >= 0) posAcc = stackedTop;
 			else negAcc = stackedTop;
@@ -3420,28 +4666,10 @@ const renderBarChart = (f, spec, colors) => {
 			const baseColor = chartPointBaseColor(spec, colors, s, c);
 			const fillColor = v < 0 && spec.series[s]?.invertIfNegative ? mixHex(baseColor, "#000000", .55) : baseColor;
 			out.push(`<rect x="${px(x0)}" y="${px(y0)}" width="${px(w)}" height="${px(barH)}" fill="${fillColor}"${chartFillOpacityAttr(spec.series[s]?.fillOpacity)}/>`);
-			if (showLabelForBar(s)) {
-				const pos = spec.series[s]?.dataLabels?.position ?? spec.dataLabels?.position;
-				let labelX;
-				let anchor;
-				let fill = "#374151";
-				if (pos === "ctr") {
-					labelX = x0 + w / 2;
-					anchor = "middle";
-					fill = "#FFFFFF";
-				} else if (pos === "inEnd") {
-					labelX = v >= 0 ? x0 + w - 4 : x0 + 4;
-					anchor = v >= 0 ? "end" : "start";
-					fill = "#FFFFFF";
-				} else if (pos === "inBase") {
-					labelX = v >= 0 ? x0 + 4 : x0 + w - 4;
-					anchor = v >= 0 ? "start" : "end";
-					fill = "#FFFFFF";
-				} else {
-					labelX = v >= 0 ? x0 + w + 2 : x0 - 2;
-					anchor = v >= 0 ? "start" : "end";
-				}
-				out.push(`<text x="${px(labelX)}" y="${px(y0 + barH / 2 + 3)}" text-anchor="${anchor}" ${dataLabelTextAttrs(spec, s, fill)}>${formatDataLabelValue(spec, s, v)}</text>`);
+			const labelText = cartesianDataLabelText(spec, s, c, v);
+			if (labelText) {
+				const { coordinate: labelX, anchor, fill } = barLabelLayout(x0, w, v, chartPointLabelOptions(spec, s, c).position);
+				out.push(chartText(f, labelX, y0 + barH / 2 + 3, `text-anchor="${anchor}" ${dataLabelTextAttrs(spec, s, fill, 9, false, c)}`, `${escapeXml(labelText)}`));
 			}
 		}
 	}
@@ -3495,36 +4723,36 @@ const renderLineChart = (f, spec, colors, fill) => {
 			basePtsRaw.push([xp, yBase]);
 			if (isStacked) accumulated[c] = top;
 		}
-		const pts = dba === "span" ? ptsRaw.filter((p) => p !== null) : ptsRaw.filter((p) => p !== null);
-		const basePts = dba === "span" ? basePtsRaw.filter((p) => p !== null) : basePtsRaw.filter((p) => p !== null);
-		const dPath = series.smooth && pts.length > 2 ? smoothPath(pts) : (() => {
-			let path = "";
-			let starting = true;
-			for (const p of ptsRaw) {
-				if (p === null) {
-					if (dba === "gap") starting = true;
-					continue;
-				}
-				path += `${starting ? "M" : "L"}${px(p[0])},${px(p[1])} `;
-				starting = false;
-			}
-			return path.trim();
-		})();
+		const pts = ptsRaw.filter((p) => p !== null);
+		const basePts = basePtsRaw.filter((p) => p !== null);
+		const segments = [];
+		let segment = [];
+		for (const point of ptsRaw) if (point !== null) segment.push(point);
+		else if (dba === "gap" && segment.length > 0) {
+			segments.push(segment);
+			segment = [];
+		}
+		if (segment.length > 0) segments.push(segment);
+		const paths = segments.map((points) => series.smooth && points.length > 2 ? smoothPath(points) : points.map(([x, y], i) => `${i === 0 ? "M" : "L"}${px(x)},${px(y)}`).join(" "));
+		const dPath = paths.join(" ");
+		let offset = 0;
+		const areaPath = fill ? segments.map((points, i) => {
+			const back = basePts.slice(offset, offset + points.length).reverse().map(([x, y]) => `L${px(x)},${px(y)}`).join(" ");
+			offset += points.length;
+			return `${paths[i]} ${back} Z`;
+		}).join(" ") : "";
 		perSeries.push({
 			s,
 			series,
 			color,
 			ptsRaw,
 			pts,
-			basePts,
+			areaPath,
 			dPath
 		});
 	}
 	const paintOrder = fill && !isStacked ? perSeries.slice().reverse() : perSeries;
-	if (fill) for (const { color, basePts, dPath } of paintOrder) {
-		const back = basePts.slice().reverse().map(([xp, yp]) => `L${px(xp)},${px(yp)}`).join(" ");
-		out.push(`<path d="${dPath} ${back} Z" fill="${color}" stroke="none"/>`);
-	}
+	if (fill) for (const { color, areaPath } of paintOrder) out.push(`<path d="${areaPath}" fill="${color}" stroke="none"/>`);
 	for (const { s, series, color, ptsRaw, pts, dPath } of paintOrder) {
 		const lineWPx = series.lineWidthEmu ? Math.max(.3, series.lineWidthEmu / EMU_PER_PX) : 1.5;
 		const dashAttr = series.lineDash ? (() => {
@@ -3534,55 +4762,26 @@ const renderLineChart = (f, spec, colors, fill) => {
 			return ` stroke-dasharray="${pat.split(" ").map((n) => (Number.parseFloat(n) * sw).toFixed(2)).join(" ")}"`;
 		})() : "";
 		out.push(`<path d="${dPath}" fill="none" stroke="${series.lineColor ?? color}" stroke-width="${lineWPx.toFixed(2)}" stroke-linejoin="round" stroke-linecap="round"${dashAttr}/>`);
-		if (!isStacked) {
-			const explicitSymbol = series.markerSymbol !== void 0 && series.markerSymbol !== "auto" && series.markerSymbol !== "none";
-			if (series.markerSymbol !== "none" && !fill && (spec.lineMarkers === true || explicitSymbol)) {
-				const symbol = autoMarkerSymbol(series.markerSymbol, s);
-				const size = series.markerSizePt ?? 5;
-				const r = Math.max(1, size * .5);
-				for (const [xp, yp] of pts) out.push(seriesMarker(symbol, xp, yp, r, ...markerColors(series, color)));
-			}
+		const explicitSymbol = series.markerSymbol !== void 0 && series.markerSymbol !== "auto" && series.markerSymbol !== "none";
+		if (series.markerSymbol !== "none" && !fill && (spec.lineMarkers === true || explicitSymbol)) {
+			const symbol = autoMarkerSymbol(series.markerSymbol, s);
+			const size = series.markerSizePt ?? 5;
+			const r = Math.max(1, size * .5);
+			for (const [xp, yp] of pts) out.push(seriesMarker(symbol, xp, yp, r, ...markerColors(series, color)));
 		}
-		if (series.dataLabels?.showValue ?? spec.dataLabels?.showValue ?? false) {
-			const lblPos = series.dataLabels?.position ?? spec.dataLabels?.position;
-			const computeAttrs = (xp, yp) => {
-				switch (lblPos) {
-					case "ctr": return {
-						x: xp,
-						y: yp + 3,
-						anchor: "middle"
-					};
-					case "b": return {
-						x: xp,
-						y: yp + 13,
-						anchor: "middle"
-					};
-					case "l": return {
-						x: xp - 6,
-						y: yp + 3,
-						anchor: "end"
-					};
-					case "r": return {
-						x: xp + 6,
-						y: yp + 3,
-						anchor: "start"
-					};
-					default: return {
-						x: xp,
-						y: yp - 5,
-						anchor: "middle"
-					};
-				}
-			};
-			for (let c = 0; c < N; c++) {
-				const p = ptsRaw[c];
-				if (p == null) continue;
-				const v = series.values[c];
-				if (v === null || v === void 0 || !Number.isFinite(v)) continue;
-				const [xp, yp] = p;
-				const { x: lx, y: ly, anchor } = computeAttrs(xp, yp);
-				out.push(`<text x="${px(lx)}" y="${px(ly)}" text-anchor="${anchor}" ${dataLabelTextAttrs(spec, s, "#374151")}>${formatDataLabelValue(spec, s, v)}</text>`);
-			}
+		for (let c = 0; c < N; c++) {
+			const p = ptsRaw[c];
+			if (p == null) continue;
+			const v = series.values[c];
+			if (v == null || !Number.isFinite(v)) continue;
+			const labelText = cartesianDataLabelText(spec, s, c, v);
+			if (!labelText) continue;
+			const [xp, yp] = p;
+			const pos = chartPointLabelOptions(spec, s, c).position;
+			const lx = pos === "l" ? xp - 6 : pos === "r" ? xp + 6 : xp;
+			const ly = pos === "b" ? yp + 13 : pos === "ctr" || pos === "l" || pos === "r" ? yp + 3 : yp - 5;
+			const anchor = pos === "l" ? "end" : pos === "r" ? "start" : "middle";
+			out.push(chartText(f, lx, ly, `text-anchor="${anchor}" ${dataLabelTextAttrs(spec, s, "#374151", 9, false, c)}`, `${escapeXml(labelText)}`));
 		}
 		if (!isStacked && series.trendline) {
 			const finiteXs = [];
@@ -3593,7 +4792,7 @@ const renderLineChart = (f, spec, colors, fill) => {
 			}
 			if (finiteXs.length >= 2) {
 				const tlColor = series.trendline.color ?? color;
-				out.push(trendlinePath(finiteXs, finiteYs, series.trendline, tlColor));
+				out.push(trendlinePath(f, finiteXs, finiteYs, series.trendline, tlColor));
 			}
 		}
 	}
@@ -3665,7 +4864,8 @@ const renderPieChart = (f, spec, colors, doughnut) => {
 			out.push(`<path d="${d}" fill="${color}" stroke="#FFFFFF" stroke-width="0.6"/>`);
 		}
 		const labelMid = (start + end) / 2;
-		const pos = spec.series[0]?.dataLabels?.position ?? spec.dataLabels?.position;
+		const labelOptions = chartPointLabelOptions(spec, 0, i);
+		const pos = labelOptions.position;
 		let labelR;
 		let labelFill = "#FFFFFF";
 		if (pos === "inEnd") labelR = radius - 12;
@@ -3676,13 +4876,15 @@ const renderPieChart = (f, spec, colors, doughnut) => {
 		const labelX = sx + labelR * Math.cos(labelMid);
 		const labelY = sy + labelR * Math.sin(labelMid);
 		const labels = [];
-		if (spec.dataLabels?.showCategory) {
+		if (labelOptions.showSeriesName && series.name) labels.push(series.name);
+		if (labelOptions.showCategory) {
 			const catLabel = spec.categories[i];
 			if (catLabel) labels.push(catLabel);
 		}
-		if (spec.dataLabels?.showValue) labels.push(formatDataLabelValue(spec, 0, v));
-		if (spec.dataLabels?.showPercent) labels.push(`${(v / total * 100).toFixed(0)}%`);
-		if (labels.length > 0) out.push(`<text x="${px(labelX)}" y="${px(labelY)}" text-anchor="middle" dominant-baseline="middle" ${dataLabelTextAttrs(spec, 0, labelFill, 10, true)}>${escapeXml(labels.join(spec.series[0]?.dataLabels?.separator ?? spec.dataLabels?.separator ?? " "))}</text>`);
+		if (labelOptions.showValue) labels.push(formatDataLabelValue(spec, 0, v, i));
+		if (labelOptions.showPercent) labels.push(`${(v / total * 100).toFixed(0)}%`);
+		const labelText = labelOptions.text ?? labels.join(labelOptions.separator ?? " ");
+		if (labelText) out.push(chartText(f, labelX, labelY, `text-anchor="middle" dominant-baseline="middle" ${dataLabelTextAttrs(spec, 0, labelFill, 10, true, i)}`, `${escapeXml(labelText)}`));
 	}
 	return out.join("");
 };
@@ -3860,7 +5062,7 @@ const renderRadarChart = (f, spec, colors) => {
 			ring.push(`${px(cx + rr * Math.cos(a))},${px(cy + rr * Math.sin(a))}`);
 		}
 		out.push(`<polygon points="${ring.join(" ")}" fill="none" stroke="#E5E7EB" stroke-width="0.5"/>`);
-		out.push(`<text x="${px(cx + 3)}" y="${px(cy - rr)}" dominant-baseline="middle" font-family="sans-serif" font-size="8" fill="#9CA3AF">${escapeXml(formatTick(t))}</text>`);
+		out.push(chartText(f, cx + 3, cy - rr, `dominant-baseline="middle" font-family="sans-serif" font-size="8" fill="#9CA3AF"`, `${escapeXml(formatTick(t))}`));
 	}
 	for (let i = 0; i < N; i++) {
 		const a = angleAt(i);
@@ -3871,7 +5073,7 @@ const renderRadarChart = (f, spec, colors) => {
 		const cosA = Math.cos(a);
 		const anchor = Math.abs(cosA) < .3 ? "middle" : cosA > 0 ? "start" : "end";
 		const label = cat.length > 12 ? `${cat.slice(0, 11)}…` : cat;
-		out.push(`<text x="${px(lx)}" y="${px(ly)}" text-anchor="${anchor}" dominant-baseline="middle" ${axisTickAttrs(spec.categoryAxisLabelStyle)}>${escapeXml(label)}</text>`);
+		out.push(chartText(f, lx, ly, `text-anchor="${anchor}" dominant-baseline="middle" ${axisTickAttrs(spec.categoryAxisLabelStyle)}`, `${escapeXml(label)}`));
 	}
 	const filled = spec.radarStyle === "filled";
 	const showMarker = spec.radarStyle === "marker";
@@ -3899,7 +5101,7 @@ const renderRadarChart = (f, spec, colors) => {
 	}
 	return out.join("");
 };
-const renderChart = (shape, x, y, w, h, transform, theme) => {
+const renderChart = (shape, x, y, w, h, transform, theme, groupReflected) => {
 	let spec = null;
 	try {
 		spec = getShapeChartSpec(shape);
@@ -3919,7 +5121,11 @@ const renderChart = (shape, x, y, w, h, transform, theme) => {
 	const isCartesian = spec.kind === "column" || spec.kind === "bar" || spec.kind === "line" || spec.kind === "area";
 	const hasAxes = isCartesian || spec.kind === "scatter" || spec.kind === "bubble";
 	const hasLegend = spec.legend !== void 0 && spec.legend.position !== null;
-	const f = layoutChart(x, y, w, h, !!spec.title, hasAxes, spec.titleOverlay ?? false, spec.legend?.overlay ?? false, hasLegend, (spec.titleStyle?.sizePt ?? DEFAULT_CHART_TITLE_PT) * PX_PER_PT, spec.plotAreaLayout);
+	const flip = getShapeFlip(shape);
+	const f = {
+		reflected: groupReflected !== Boolean(flip && flip.horizontal !== flip.vertical),
+		...layoutChart(x, y, w, h, !!spec.title, hasAxes, spec.titleOverlay ?? false, spec.legend?.overlay ?? false, hasLegend, (spec.titleStyle?.sizePt ?? DEFAULT_CHART_TITLE_PT) * PX_PER_PT, spec.plotAreaLayout)
+	};
 	const allNamesForLegend = spec.kind === "pie" || spec.kind === "doughnut" ? Array.from(spec.categories) : spec.series.map((s) => s.name);
 	const allColorsForLegend = spec.kind === "pie" || spec.kind === "doughnut" ? spec.categories.map((_, i) => spec.series[0]?.pointColors?.[i] ?? spec.series[0]?.color ?? colors[i % colors.length] ?? "#888") : spec.series.map((s, i) => s.color ?? colors[i % colors.length] ?? "#888");
 	const hiddenSet = new Set(spec.legend?.hiddenIndices ?? []);
@@ -3954,6 +5160,10 @@ const renderChart = (shape, x, y, w, h, transform, theme) => {
 			min: primaryScale.min,
 			max: primaryScale.max,
 			majorUnit: spec.valueAxis?.majorUnit ?? primaryScale.step,
+			...spec.valueAxis?.minorUnit !== void 0 ? { minorUnit: spec.valueAxis.minorUnit } : {},
+			...spec.valueAxisMinorGridlines !== void 0 ? { minorGridlines: spec.valueAxisMinorGridlines } : {},
+			...spec.valueAxisMinorGridlineColor !== void 0 ? { minorGridlineColor: spec.valueAxisMinorGridlineColor } : {},
+			...spec.valueAxisMinorGridlineWidthEmu !== void 0 ? { minorGridlineWidthEmu: spec.valueAxisMinorGridlineWidthEmu } : {},
 			...spec.valueAxisLineHidden !== void 0 ? { lineHidden: spec.valueAxisLineHidden } : {},
 			...spec.valueAxisLineColor !== void 0 ? { lineColor: spec.valueAxisLineColor } : {},
 			...spec.valueAxisMajorTickMark !== void 0 ? { majorTickMark: spec.valueAxisMajorTickMark } : {},
@@ -4005,6 +5215,10 @@ const renderChart = (shape, x, y, w, h, transform, theme) => {
 		const majorUnit = spec.valueAxis?.majorUnit ?? step;
 		const numberFormat = spec.valueAxis?.numberFormat;
 		const axisExtras = {
+			...spec.valueAxis?.minorUnit !== void 0 ? { minorUnit: spec.valueAxis.minorUnit } : {},
+			...spec.valueAxisMinorGridlines !== void 0 ? { minorGridlines: spec.valueAxisMinorGridlines } : {},
+			...spec.valueAxisMinorGridlineColor !== void 0 ? { minorGridlineColor: spec.valueAxisMinorGridlineColor } : {},
+			...spec.valueAxisMinorGridlineWidthEmu !== void 0 ? { minorGridlineWidthEmu: spec.valueAxisMinorGridlineWidthEmu } : {},
 			...spec.valueAxisLineHidden !== void 0 ? { lineHidden: spec.valueAxisLineHidden } : {},
 			...majorUnit !== void 0 ? { majorUnit } : {},
 			...numberFormat !== void 0 ? { numberFormat } : {},
@@ -4062,7 +5276,7 @@ const renderChart = (shape, x, y, w, h, transform, theme) => {
 			break;
 		default: return null;
 	}
-	const emptyHint = finiteCount === 0 ? `<text x="${px(f.plotX + f.plotW / 2)}" y="${px(f.plotY + f.plotH / 2)}" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="12" fill="#9CA3AF">${escapeXml(`chart (${spec.kind}) — no data`)}</text>` : "";
+	const emptyHint = finiteCount === 0 ? chartText(f, f.plotX + f.plotW / 2, f.plotY + f.plotH / 2, `text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="12" fill="#9CA3AF"`, `${escapeXml(`chart (${spec.kind}) — no data`)}`) : "";
 	const axisTitleAttrs = (style) => {
 		const sz = style?.sizePt ?? 11;
 		const fill = style?.color ?? "#374151";
@@ -4071,12 +5285,12 @@ const renderChart = (shape, x, y, w, h, transform, theme) => {
 		return `font-family="sans-serif" font-size="${chartFontPx(sz)}" fill="${fill}" font-weight="${weight}"${italicAttr}`;
 	};
 	const valueAxisTitleRot = spec.valueAxisTitleRotationDeg ?? -90;
-	const valueAxisTitleSvg = spec.valueAxisTitle ? `<text x="${px(f.plotX - 26)}" y="${px(f.plotY + f.plotH / 2)}" text-anchor="middle" ${axisTitleAttrs(spec.valueAxisTitleStyle)} transform="rotate(${valueAxisTitleRot} ${px(f.plotX - 26)} ${px(f.plotY + f.plotH / 2)})">${escapeXml(spec.valueAxisTitle)}</text>` : "";
+	const valueAxisTitleSvg = spec.valueAxisTitle ? chartText(f, f.plotX - 26, f.plotY + f.plotH / 2, `text-anchor="middle" ${axisTitleAttrs(spec.valueAxisTitleStyle)} transform="rotate(${valueAxisTitleRot} ${px(f.plotX - 26)} ${px(f.plotY + f.plotH / 2)})"`, `${escapeXml(spec.valueAxisTitle)}`) : "";
 	const catTitleRot = spec.categoryAxisTitleRotationDeg ?? 0;
 	const catTitleCx = f.plotX + f.plotW / 2;
 	const catTitleCy = f.plotY + f.plotH + 28;
 	const catTitleTransform = catTitleRot !== 0 ? ` transform="rotate(${catTitleRot} ${px(catTitleCx)} ${px(catTitleCy)})"` : "";
-	const categoryAxisTitleSvg = spec.categoryAxisTitle ? `<text x="${px(catTitleCx)}" y="${px(catTitleCy)}" text-anchor="middle" ${axisTitleAttrs(spec.categoryAxisTitleStyle)}${catTitleTransform}>${escapeXml(spec.categoryAxisTitle)}</text>` : "";
+	const categoryAxisTitleSvg = spec.categoryAxisTitle ? chartText(f, catTitleCx, catTitleCy, `text-anchor="middle" ${axisTitleAttrs(spec.categoryAxisTitleStyle)}${catTitleTransform}`, `${escapeXml(spec.categoryAxisTitle)}`) : "";
 	return [
 		`<g${transform}>`,
 		`<rect x="${px(f.x)}" y="${px(f.y)}" width="${px(f.w)}" height="${px(f.h)}" fill="${spec.chartAreaFill ?? "#FFFFFF"}" stroke="${spec.chartAreaStrokeColor ?? "none"}" stroke-width="0.6"${spec.roundedCorners ? " rx=\"6\" ry=\"6\"" : ""}/>`,
@@ -4091,72 +5305,90 @@ const renderChart = (shape, x, y, w, h, transform, theme) => {
 		"</g>"
 	].join("");
 };
-const cellParaData = (paragraphs) => {
+const cellParaData = (paragraphs, cell, pres) => {
 	let hasText = false;
 	return {
-		paraData: paragraphs.map((para) => {
+		paraData: paragraphs.map((para, index) => {
+			const properties = getParagraphPropertiesEffective(pres, cell, index);
+			const bulletIsPicture = isParagraphBulletPicture(cell, index);
+			const bulletImageBytes = bulletIsPicture ? getParagraphBulletImageBytes(cell, index) : null;
 			const runs = [];
+			let rIdx = 0;
+			let fieldIndex = 0;
+			let breakIndex = 0;
 			for (const el of para.elements) {
 				if (el.kind === "br") {
+					const fmt = getTableCellRunFormatEffective(pres, cell, index, { breakIndex: breakIndex++ });
 					runs.push({
 						text: "\n",
-						fmt: null,
-						sizePt: DEFAULT_BODY_PT
+						fmt,
+						sizePt: fmt.size ?? DEFAULT_BODY_PT
 					});
 					continue;
 				}
 				if (el.text.trim()) hasText = true;
+				const href = el.clickAction ? clickActionHref(pres, el.clickAction) : null;
+				const fmt = getTableCellRunFormatEffective(pres, cell, index, el.kind === "r" ? rIdx++ : { fieldIndex: fieldIndex++ });
 				runs.push({
 					text: el.text,
-					fmt: el.format,
-					sizePt: el.format?.size ?? DEFAULT_BODY_PT
+					fmt,
+					sizePt: fmt?.size ?? DEFAULT_BODY_PT,
+					...href ? {
+						href,
+						...el.tooltip !== void 0 ? { hrefTip: el.tooltip } : {}
+					} : {}
 				});
 			}
 			return {
-				align: para.align ?? "left",
-				level: 0,
-				bulletStyle: null,
-				bulletDetail: {
-					color: null,
-					sizePct: null,
-					sizePts: null,
-					font: null
+				...runs.length === 0 ? { emptySizePt: getTableCellRunFormatEffective(pres, cell, index, null).size ?? DEFAULT_BODY_PT } : {},
+				latinLineBreak: properties.latinLineBreak,
+				tabStops: properties.tabStops,
+				defaultTabSizeEmu: properties.defaultTabSizeEmu,
+				align: properties.align ?? "left",
+				level: properties.level,
+				bulletStyle: properties.bullet,
+				bulletDetail: properties.bulletDetail ?? {
+					...getParagraphBulletStyle(pres, cell, index),
+					colorFollowText: false,
+					sizeFollowText: false,
+					fontFollowText: false
 				},
-				bulletIsPicture: false,
-				bulletImageHref: null,
+				bulletIsPicture,
+				bulletImageHref: bulletImageBytes ? bytesToDataUrl(bulletImageBytes) : null,
 				runs,
-				lineSpacing: null,
-				spcBefPts: null,
-				spcAftPts: null,
+				lineSpacing: properties.lineSpacing,
+				spcBefPts: properties.spcBefPts,
+				spcAftPts: properties.spcAftPts,
 				indent: {
-					leftEmu: null,
-					rightEmu: null,
-					firstLineEmu: null
+					leftEmu: properties.marL,
+					rightEmu: properties.marR,
+					firstLineEmu: properties.indent
 				}
 			};
 		}),
 		hasText
 	};
 };
-const renderTableCellText = (paragraphs, cx, cy, cw, ch, color, pres, shape, theme, themeFace, ctx, vAnchor, margins) => {
-	const { paraData, hasText } = cellParaData(paragraphs);
+const renderTableCellText = (cell, paragraphs, cx, cy, cw, ch, color, pres, shape, theme, themeFace, ctx, vAnchor, margins, effectsOnly = false) => {
+	const { paraData, hasText } = cellParaData(paragraphs, cell, pres);
 	if (!hasText) return "";
-	const defaultPadPx = 4;
-	const padL = margins.left !== null ? margins.left / EMU_PER_PX : defaultPadPx;
-	const padR = margins.right !== null ? margins.right / EMU_PER_PX : defaultPadPx;
-	const padT = margins.top !== null ? margins.top / EMU_PER_PX : defaultPadPx;
-	const padB = margins.bottom !== null ? margins.bottom / EMU_PER_PX : defaultPadPx;
+	const numberLabels = paragraphNumberLabels(paraData);
+	const padL = (margins.left ?? 91440) / EMU_PER_PX;
+	const padR = (margins.right ?? 91440) / EMU_PER_PX;
+	const padT = (margins.top ?? 45720) / EMU_PER_PX;
+	const padB = (margins.bottom ?? 45720) / EMU_PER_PX;
 	const innerX = cx + padL;
 	const innerY = cy + padT;
 	const innerW = Math.max(0, cw - padL - padR);
 	const innerH = Math.max(0, ch - padT - padB);
 	if (innerW <= 0 || innerH <= 0) return "";
-	if (ctx.mode === "svg") return buildAndLayoutSvgText({
+	const customTabs = paraData.some((para) => para.tabStops?.length && para.runs.some((run) => run.text.includes("	")));
+	const svgArgs = {
 		pres,
 		shape,
 		theme,
 		paraData,
-		numberLabels: paraData.map(() => null),
+		numberLabels,
 		autoFitScale: 1,
 		lineHeightScale: 1,
 		defaultPt: DEFAULT_BODY_PT,
@@ -4168,17 +5400,37 @@ const renderTableCellText = (paragraphs, cx, cy, cw, ch, color, pres, shape, the
 		innerY: innerY * EMU_PER_PX,
 		innerW: innerW * EMU_PER_PX,
 		innerH: innerH * EMU_PER_PX,
-		measure: ctx.measure,
-		vert: "none",
-		columns: null
-	});
+		measure: ctx.mode === "svg" ? ctx.measure : browserTextMeasurer() ?? ctx.measure,
+		...ctx.mode === "foreignObject" ? { resolveFamily: browserFontFamily } : {},
+		vert: verticalLayoutOf(getTableCellTextDirection(cell)),
+		columns: null,
+		...effectsOnly ? { effectsOnly: true } : {}
+	};
+	const fillOverlay = () => paraData.some((para) => para.runs.some(hasPaintedTextFill)) ? buildAndLayoutSvgText({
+		...svgArgs,
+		effectsOnly: true,
+		effectKind: "fill"
+	}) : "";
+	if (ctx.mode === "svg" || customTabs || effectsOnly) {
+		if (effectsOnly) {
+			const reflection = paraData.some((para) => para.runs.some((run) => run.fmt?.reflection != null)) ? buildAndLayoutSvgText({
+				...svgArgs,
+				effectKind: "reflection"
+			}) : "";
+			const innerShadow = paraData.some((para) => para.runs.some((run) => run.fmt?.innerShadow != null)) ? buildAndLayoutSvgText({
+				...svgArgs,
+				effectKind: "innerShadow"
+			}) : "";
+			return reflection + fillOverlay() + innerShadow;
+		}
+		return buildAndLayoutSvgText(svgArgs);
+	}
+	const vertical = verticalTextStyle(getTableCellTextDirection(cell));
+	const directionStyle = `${vertical.declarations}${vertical.transform ? `;transform:${vertical.transform}` : ""}`;
 	const justify = vAnchor === "top" ? "flex-start" : vAnchor === "bottom" ? "flex-end" : "center";
 	const familyFont = themeFace ? `${escapeXml(themeFace)}, ${DEFAULT_FONT}` : DEFAULT_FONT;
-	const body = paraData.map((para) => {
-		const runHtml = para.runs.map((run) => renderRun(run.text, run.fmt, theme, run.sizePt, run.fmt?.size === void 0)).join("");
-		return `<p style="margin:0;padding:0;text-align:${ALIGNMENT_TO_CSS[para.align] ?? "left"};line-height:1.2">${runHtml || "&#8203;"}</p>`;
-	}).join("");
-	return `<foreignObject x="${px(innerX)}" y="${px(innerY)}" width="${px(innerW)}" height="${px(innerH)}"><div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;flex-direction:column;justify-content:${justify};width:100%;height:100%;box-sizing:border-box;overflow:hidden;font-family:${familyFont};color:${color};word-break:break-word">${body}</div></foreignObject>`;
+	const body = renderHtmlParagraphs(paraData, numberLabels, theme, 1, DEFAULT_BODY_PT, color).join("");
+	return `<foreignObject x="${px(innerX)}" y="${px(innerY)}" width="${px(innerW)}" height="${px(innerH)}"><div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;flex-direction:column;justify-content:${justify};width:100%;height:100%;box-sizing:border-box;overflow:hidden;line-height:${LINE_HEIGHT};font-family:${familyFont};color:${color};word-break:break-word;${directionStyle}">${body}</div></foreignObject>${fillOverlay()}`;
 };
 const renderTable = (shape, pres, x, y, w, h, transform, theme, ctx) => {
 	let dims;
@@ -4194,6 +5446,8 @@ const renderTable = (shape, pres, x, y, w, h, transform, theme, ctx) => {
 		return null;
 	}
 	if (dims.rows === 0 || dims.cols === 0) return null;
+	const flip = getShapeFlip(shape);
+	const textReflected = ctx.groupReflected !== Boolean(flip && flip.horizontal !== flip.vertical);
 	const xPx = x / EMU_PER_PX;
 	const yPx = y / EMU_PER_PX;
 	const widthsPx = widths.map((w0) => w0 / EMU_PER_PX);
@@ -4206,17 +5460,12 @@ const renderTable = (shape, pres, x, y, w, h, transform, theme, ctx) => {
 	for (let c = 0; c < widthsPx.length; c++) colXs.push((colXs[c] ?? xPx) + (widthsPx[c] ?? 0) * wScale);
 	const rowYs = [yPx];
 	for (let r = 0; r < heightsPx.length; r++) rowYs.push((rowYs[r] ?? yPx) + (heightsPx[r] ?? 0) * hScale);
-	const flags = getTableStyleFlags(shape);
-	const accent = theme ? normalizeHex(theme.accent1) : "#4472C4";
-	const headerFill = accent;
-	const bandFill = mixHex(accent, "#FFFFFF", .12);
-	const bandFill2 = mixHex(accent, "#FFFFFF", .27);
 	const textColor = activeDeckTextColor;
 	const tableThemeFace = getPresentationFonts(pres)?.minorLatin ?? null;
 	const out = [];
 	out.push(`<g${transform}>`);
-	out.push(`<rect x="${px(xPx)}" y="${px(yPx)}" width="${px((colXs[widthsPx.length] ?? xPx) - xPx)}" height="${px((rowYs[heightsPx.length] ?? yPx) - yPx)}" fill="#FFFFFF"/>`);
 	const borderEdges = [];
+	const borderEdgeCandidates = /* @__PURE__ */ new Map();
 	for (let r = 0; r < dims.rows; r++) for (let c = 0; c < dims.cols; c++) {
 		const cell = cells[r]?.[c];
 		if (!cell) continue;
@@ -4229,19 +5478,16 @@ const renderTable = (shape, pres, x, y, w, h, transform, theme, ctx) => {
 		const endRow = Math.min(dims.rows, r + span.rowSpan);
 		const cw = (colXs[endCol] ?? cx) - cx;
 		const ch = (rowYs[endRow] ?? cy) - cy;
-		const fill = getTableCellFill(cell);
+		const appearance = getTableCellAppearanceEffective(pres, typedCell);
+		const fill = appearance.fill;
 		let resolvedFill;
-		if (fill) resolvedFill = resolveColor(fill, theme, "#FFFFFF");
-		else if (flags.firstRow && r === 0) resolvedFill = headerFill;
-		else if (flags.lastRow && r === dims.rows - 1) resolvedFill = headerFill;
-		else if (flags.firstCol && c === 0) resolvedFill = bandFill;
-		else if (flags.lastCol && c === dims.cols - 1) resolvedFill = bandFill;
-		else if (flags.bandRow) resolvedFill = (r - (flags.firstRow ? 1 : 0)) % 2 === 0 ? bandFill : bandFill2;
-		else if (flags.bandCol) resolvedFill = (c - (flags.firstCol ? 1 : 0)) % 2 === 0 ? bandFill : bandFill2;
+		if (fill.kind === "solid") resolvedFill = resolveColor(fill.color, theme, "#FFFFFF");
+		else if (fill.kind === "none") resolvedFill = "none";
+		else if (fill.kind !== "inherit") resolvedFill = "none";
 		else resolvedFill = "none";
-		const cellTextColor = resolvedFill === headerFill ? "#FFFFFF" : textColor;
-		out.push(`<rect x="${px(cx)}" y="${px(cy)}" width="${px(cw)}" height="${px(ch)}" fill="${resolvedFill}"/>`);
-		const borders = getTableCellBorders(pres, typedCell);
+		const cellTextColor = textColor;
+		out.push(`<g data-pptx-cell="${r},${c}"><rect x="${px(cx)}" y="${px(cy)}" width="${px(cw)}" height="${px(ch)}" fill="${resolvedFill}"/>`);
+		const borders = appearance.borders;
 		const dashAttr = (dash, widthPx) => {
 			if (!dash || dash === "solid") return "";
 			const pat = DASH_PATTERNS[dash];
@@ -4251,9 +5497,22 @@ const renderTable = (shape, pres, x, y, w, h, transform, theme, ctx) => {
 		const edge = (side, x1, y1, x2, y2) => {
 			const b = borders[side];
 			if (!b) return;
+			const key = `${Math.round(Math.min(x1, x2) * 100)},${Math.round(Math.min(y1, y2) * 100)},${Math.round(Math.max(x1, x2) * 100)},${Math.round(Math.max(y1, y2) * 100)}`;
 			const sw = b.widthEmu ? Math.max(.4, b.widthEmu / EMU_PER_PX) : .5;
 			const col = b.color ?? "#9CA3AF";
-			borderEdges.push(`<line x1="${px(x1)}" y1="${px(y1)}" x2="${px(x2)}" y2="${px(y2)}" stroke="${col}" stroke-width="${px(sw)}"${dashAttr(b.dash, sw)}/>`);
+			const line = `<line x1="${px(x1)}" y1="${px(y1)}" x2="${px(x2)}" y2="${px(y2)}" stroke="${col}" stroke-width="${px(sw)}"${dashAttr(b.dash, sw)}/>`;
+			const existing = borderEdgeCandidates.get(key);
+			if (existing) {
+				if (sw <= existing.width) return;
+				borderEdges[existing.index] = line;
+				existing.width = sw;
+				return;
+			}
+			borderEdgeCandidates.set(key, {
+				index: borderEdges.length,
+				width: sw
+			});
+			borderEdges.push(line);
 		};
 		edge("left", cx, cy, cx, cy + ch);
 		edge("right", cx + cw, cy, cx + cw, cy + ch);
@@ -4267,15 +5526,8 @@ const renderTable = (shape, pres, x, y, w, h, transform, theme, ctx) => {
 			const sw = borders.blToTr.widthEmu ? Math.max(.4, borders.blToTr.widthEmu / EMU_PER_PX) : .5;
 			borderEdges.push(`<line x1="${px(cx)}" y1="${px(cy + ch)}" x2="${px(cx + cw)}" y2="${px(cy)}" stroke="${borders.blToTr.color ?? "#9CA3AF"}" stroke-width="${px(sw)}"${dashAttr(borders.blToTr.dash, sw)}/>`);
 		}
-		const defaultColor = "#9CA3AF";
-		if (!borders.left) borderEdges.push(`<line x1="${px(cx)}" y1="${px(cy)}" x2="${px(cx)}" y2="${px(cy + ch)}" stroke="${defaultColor}" stroke-width="0.4" opacity="0.6"/>`);
-		if (!borders.right) borderEdges.push(`<line x1="${px(cx + cw)}" y1="${px(cy)}" x2="${px(cx + cw)}" y2="${px(cy + ch)}" stroke="${defaultColor}" stroke-width="0.4" opacity="0.6"/>`);
-		if (!borders.top) borderEdges.push(`<line x1="${px(cx)}" y1="${px(cy)}" x2="${px(cx + cw)}" y2="${px(cy)}" stroke="${defaultColor}" stroke-width="0.4" opacity="0.6"/>`);
-		if (!borders.bottom) borderEdges.push(`<line x1="${px(cx)}" y1="${px(cy + ch)}" x2="${px(cx + cw)}" y2="${px(cy + ch)}" stroke="${defaultColor}" stroke-width="0.4" opacity="0.6"/>`);
-		const cellParagraphs = getTableCellParagraphs(cell);
-		const vAnchor = getTableCellAnchor(typedCell) ?? "top";
-		const cellMargins = getTableCellMargins(typedCell);
-		out.push(renderTableCellText(cellParagraphs, cx, cy, cw, ch, cellTextColor, pres, shape, theme, tableThemeFace, ctx, vAnchor, cellMargins));
+		const cellText = renderTableCellText(typedCell, getTableCellParagraphs(cell), cx, cy, cw, ch, cellTextColor, pres, shape, theme, tableThemeFace, ctx, getTableCellAnchor(typedCell) ?? "top", getTableCellMargins(typedCell));
+		out.push(textReflected && cellText ? `<g transform="translate(${px(2 * cx + cw)} 0) scale(-1 1)">${cellText}</g>` : cellText, "</g>");
 	}
 	out.push(borderEdges.join(""));
 	out.push("</g>");
@@ -4397,7 +5649,7 @@ const customGeometryToSvg = (geom, x, y, w, h, fill, fillExtra, stroke, strokeWi
 	}
 	return out.join("");
 };
-const renderShape = (shape, pres, theme, ctx) => {
+const renderShapeContent = (shape, pres, theme, ctx) => {
 	const bounds = getShapeBoundsResolved(pres, shape);
 	if (!bounds) return "";
 	const x = bounds.x;
@@ -4422,7 +5674,10 @@ const renderShape = (shape, pres, theme, ctx) => {
 	if (flip.vertical) transforms.push(`translate(0 ${E(2 * cy)}) scale(1 -1)`);
 	const transform = transforms.length > 0 ? ` transform="${transforms.join(" ")}"` : "";
 	const textRotation = (flip.vertical ? rotation + 180 : rotation) % 360;
-	const textTransform = textRotation !== 0 ? ` transform="rotate(${textRotation} ${E(cx)} ${E(cy)})"` : "";
+	const textTransforms = [];
+	if (textRotation !== 0) textTransforms.push(`rotate(${textRotation} ${E(cx)} ${E(cy)})`);
+	if (ctx.groupReflected) textTransforms.push(`translate(${E(2 * cx)} 0) scale(-1 1)`);
+	const textTransform = textTransforms.length > 0 ? ` transform="${textTransforms.join(" ")}"` : "";
 	const { sx: gsx, sy: gsy } = ctx.groupScale;
 	const groupScaled = gsx !== 1 || gsy !== 1;
 	const textBounds = groupScaled ? {
@@ -4438,8 +5693,8 @@ const renderShape = (shape, pres, theme, ctx) => {
 	};
 	const rawTextOverlay = kind === "shape" || kind === "graphicFrame" ? renderTextBody(pres, shape, textBounds, theme, phType, ctx) : "";
 	const textOverlay = rawTextOverlay !== "" && groupScaled ? `<g transform="scale(${(1 / gsx).toFixed(6)} ${(1 / gsy).toFixed(6)})">${rawTextOverlay}</g>` : rawTextOverlay;
-	if (kind === "picture") return renderPicture(shape, pres, x, y, w, h, transform, textOverlay, getShapeImageBytes(shape), getShapeImageFormat(shape));
-	if (kind === "shape" && fill.kind === "image") return renderPicture(shape, pres, x, y, w, h, transform, textOverlay, getShapeImageFillBytes(shape), getShapeImageFormat(shape));
+	if (kind === "picture") return renderPicture(shape, pres, x, y, w, h, transform, textOverlay, getShapeImageBytes(shape), getShapeImageFormat(shape), paint(shape, fill, stroke, theme, false, pres));
+	if (kind === "shape" && fill.kind === "image") return renderPicture(shape, pres, x, y, w, h, transform, textOverlay, getShapeImageFillBytes(shape), getShapeImageFormat(shape), paint(shape, fill, stroke, theme, false, pres));
 	if (kind === "connector") {
 		const p = paint(shape, fill, stroke, theme, false, pres);
 		const sw = p.strokeWidth || 19050;
@@ -4494,20 +5749,24 @@ const renderShape = (shape, pres, theme, ctx) => {
 		const children = getGroupChildren(shape);
 		if (children.length === 0) return "";
 		const tParts = [];
+		const inverseParts = [];
 		let groupScaleX = 1;
 		let groupScaleY = 1;
 		if (xform && rotation !== 0) {
 			const cxG = (xform.outer.x + xform.outer.w / 2) / EMU_PER_PX;
 			const cyG = (xform.outer.y + xform.outer.h / 2) / EMU_PER_PX;
 			tParts.push(`rotate(${rotation} ${cxG.toFixed(2)} ${cyG.toFixed(2)})`);
+			inverseParts.unshift(`rotate(${-rotation} ${cxG.toFixed(2)} ${cyG.toFixed(2)})`);
 		}
 		if (xform && flip.horizontal) {
 			const cxG = (xform.outer.x + xform.outer.w / 2) / EMU_PER_PX;
 			tParts.push(`translate(${(2 * cxG).toFixed(2)} 0) scale(-1 1)`);
+			inverseParts.unshift(`translate(${(2 * cxG).toFixed(2)} 0) scale(-1 1)`);
 		}
 		if (xform && flip.vertical) {
 			const cyG = (xform.outer.y + xform.outer.h / 2) / EMU_PER_PX;
 			tParts.push(`translate(0 ${(2 * cyG).toFixed(2)}) scale(1 -1)`);
+			inverseParts.unshift(`translate(0 ${(2 * cyG).toFixed(2)}) scale(1 -1)`);
 		}
 		if (xform) {
 			const ox = xform.outer.x;
@@ -4525,10 +5784,13 @@ const renderShape = (shape, pres, theme, ctx) => {
 			const tx = ((ox - ix * (ow / iw)) / EMU_PER_PX).toFixed(2);
 			const ty = ((oy - iy * (oh / ih)) / EMU_PER_PX).toFixed(2);
 			tParts.push(`translate(${tx} ${ty})`, `scale(${sx} ${sy})`);
+			inverseParts.unshift(`scale(${1 / Number(sx)} ${1 / Number(sy)}) translate(${-Number(tx)} ${-Number(ty)})`);
 		}
 		const groupTransform = tParts.length > 0 ? ` transform="${tParts.join(" ")}"` : "";
-		const childCtx = groupScaleX === 1 && groupScaleY === 1 ? ctx : {
+		const childCtx = tParts.length === 0 ? ctx : {
 			...ctx,
+			inverseGroupTransform: `${inverseParts.join(" ")} ${ctx.inverseGroupTransform}`,
+			groupReflected: ctx.groupReflected !== Boolean(xform && flip.horizontal !== flip.vertical),
 			groupScale: {
 				sx: ctx.groupScale.sx * groupScaleX,
 				sy: ctx.groupScale.sy * groupScaleY
@@ -4537,9 +5799,21 @@ const renderShape = (shape, pres, theme, ctx) => {
 		return `<g${groupTransform}>${children.map((c) => renderShape(c, pres, theme, childCtx)).join("")}</g>`;
 	}
 	const p = paint(shape, fill, stroke, theme, phType !== null, pres);
+	if (fill.kind === "background") {
+		ctx.background.id ||= mintId();
+		const id = mintId();
+		const inverse = [];
+		if (flip.vertical) inverse.push(`translate(0 ${E(2 * cy)}) scale(1 -1)`);
+		if (flip.horizontal) inverse.push(`translate(${E(2 * cx)} 0) scale(-1 1)`);
+		if (rotation !== 0) inverse.push(`rotate(${-rotation} ${E(cx)} ${E(cy)})`);
+		inverse.push(ctx.inverseGroupTransform);
+		p.fill = `url(#${id})`;
+		p.fillAttrs = "";
+		p.defs += `<defs><pattern id="${id}" patternUnits="userSpaceOnUse" width="${ctx.background.width}" height="${ctx.background.height}" patternTransform="${inverse.join(" ")}"><use href="#${ctx.background.id}" xlink:href="#${ctx.background.id}"/></pattern></defs>`;
+	}
 	if (kind === "graphicFrame") {
 		if (isChartShape(shape)) {
-			const chartSvg = renderChart(shape, x, y, w, h, transform, theme);
+			const chartSvg = renderChart(shape, x, y, w, h, transform, theme, ctx.groupReflected);
 			if (chartSvg) return chartSvg;
 		}
 		if (isTableShape(shape)) {
@@ -4594,8 +5868,6 @@ const renderShape = (shape, pres, theme, ctx) => {
 		geomSvg = reflection.svg + geomSvg;
 		fxDefs += reflection.defs;
 	}
-	const url = getShapeHyperlink(shape);
-	const tooltip = getShapeHyperlinkTooltip(shape);
 	const shapeName = (() => {
 		try {
 			return getShapeName(shape);
@@ -4622,22 +5894,39 @@ const renderShape = (shape, pres, theme, ctx) => {
 	const ariaAttr = a11yLabel ? ` role="img" aria-label="${escapeXml(a11yLabel)}"` : "";
 	const placedText = textOverlay ? `<g${textTransform}>${textOverlay}</g>` : "";
 	const custGeomAttr = isCustGeom ? " data-pptx-fallback=\"custGeom\"" : "";
-	const inner = `${p.defs}${fxDefs}<g${nameAttr}${ariaAttr}${custGeomAttr}><g${transform}>${geomSvg}</g>${placedText}</g>`;
+	return `${p.defs}${fxDefs}<g${nameAttr}${ariaAttr}${custGeomAttr}><g${transform}>${geomSvg}</g>${placedText}</g>`;
+};
+const renderShape = (shape, pres, theme, ctx) => {
+	if (isShapeHidden(shape)) return "";
+	const inner = renderShapeContent(shape, pres, theme, ctx);
+	if (!inner) return inner;
+	const href = clickActionHref(pres, getShapeClickAction(shape));
+	const tooltip = href === void 0 ? null : getShapeHyperlinkTooltip(shape);
 	const titleEl = tooltip ? `<title>${escapeXml(tooltip)}</title>` : "";
-	if (url) return `<a href="${escapeXml(url)}" target="_blank" rel="noopener noreferrer">${titleEl}${inner}</a>`;
-	const action = getShapeClickAction(shape);
-	if (action) {
-		let href = null;
-		if (action.kind === "slide") {
-			const idx = getSlideIndex(pres, action.slide);
-			if (idx >= 0) href = `#slide-${idx + 1}`;
-		} else if (action.kind === "url") href = action.url;
-		if (href !== null) {
-			const targetAttrs = href.startsWith("#") ? "" : " target=\"_blank\" rel=\"noopener noreferrer\"";
-			return `<a href="${escapeXml(href)}"${targetAttrs}>${titleEl}${inner}</a>`;
+	const targetAttrs = href === void 0 || href.startsWith("#") ? "" : " target=\"_blank\" rel=\"noopener noreferrer\"";
+	return wrapWithShapeId(shape, href === void 0 ? inner : `<a href="${escapeXml(href)}"${targetAttrs}>${titleEl}${inner}</a>`, ctx);
+};
+/**
+* Names the object the slide's animation timing would target, so a player can
+* find it without knowing how the shape was drawn. One wrapper per object,
+* whatever its kind — a group carries its own id and its children theirs, so a
+* build on a group child is reachable inside a group that is animated itself.
+*
+* The id is the shape's `<p:cNvPr id>`, which is what `<p:spTgt spid>` names.
+* A deck may repeat one (nothing in the schema forbids it), and the attribute
+* repeats with it rather than inventing a unique number the timing could not
+* refer to.
+*/
+const wrapWithShapeId = (shape, svg, ctx) => {
+	if (!ctx.ownShapes) return svg;
+	const id = (() => {
+		try {
+			return getShapeId(shape);
+		} catch {
+			return null;
 		}
-	}
-	return inner;
+	})();
+	return id === null ? svg : `<g data-pptx-shape-id="${id}">${svg}</g>`;
 };
 const buildReflection = (pres, shape, geomRaw, box) => {
 	let effects;
@@ -4672,6 +5961,7 @@ const buildEffectsFilter = (pres, shape) => {
 	const id = mintId();
 	const primitives = [];
 	const layers = [];
+	const innerShadows = [];
 	for (const e of effects) if (e.kind === "outerShdw") {
 		const rad = e.angleDeg * Math.PI / 180;
 		const dx = e.distEmu * Math.cos(rad) / EMU_PER_PX;
@@ -4691,7 +5981,7 @@ const buildEffectsFilter = (pres, shape) => {
 		const opacity = e.opacity ?? 1;
 		const i = primitives.length;
 		primitives.push(`<feGaussianBlur in="SourceAlpha" stdDeviation="${blurPx.toFixed(2)}" result="innerBlur${i}"/>`, `<feOffset in="innerBlur${i}" dx="${dx.toFixed(2)}" dy="${dy.toFixed(2)}" result="innerOff${i}"/>`, `<feComposite in="innerOff${i}" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="innerMask${i}"/>`, `<feFlood flood-color="${color}" flood-opacity="${opacity.toFixed(3)}" result="innerCol${i}"/>`, `<feComposite in="innerCol${i}" in2="innerMask${i}" operator="in" result="innerOut${i}"/>`);
-		layers.push(`innerOut${i}`);
+		innerShadows.push(`innerOut${i}`);
 	} else if (e.kind === "glow") {
 		const radiusPx = e.radiusEmu / EMU_PER_PX;
 		const dilatePx = radiusPx * .5;
@@ -4714,11 +6004,12 @@ const buildEffectsFilter = (pres, shape) => {
 		layers.length = 0;
 		layers.push(`blurOut${i}`);
 	}
-	if (layers.length === 0) return null;
+	if (layers.length === 0 && innerShadows.length === 0) return null;
 	const replacedSource = effects.some((e) => e.kind === "softEdge" || e.kind === "blur");
 	const mergeChildren = layers.map((l) => `<feMergeNode in="${l}"/>`).join("");
 	const sourceMerge = replacedSource ? "" : "<feMergeNode in=\"SourceGraphic\"/>";
-	primitives.push(`<feMerge>${mergeChildren}${sourceMerge}</feMerge>`);
+	const innerMerge = innerShadows.map((layer) => `<feMergeNode in="${layer}"/>`).join("");
+	primitives.push(`<feMerge>${mergeChildren}${sourceMerge}${innerMerge}</feMerge>`);
 	return {
 		id,
 		defs: `<defs><filter id="${id}" x="-25%" y="-25%" width="150%" height="150%">${primitives.join("")}</filter></defs>`
@@ -4752,13 +6043,23 @@ const renderSlideSvg = (pres, slide, opts = {}) => {
 	const theme = getPresentationTheme(pres);
 	activeColorMap = getEffectiveColorMap(slide);
 	activeDeckTextColor = resolveDeckBodyTextColor(slide) ?? "#000000";
+	const position = getSlides(pres).indexOf(slide);
+	activeSlideNumber = String(getPresentationFirstSlideNumber(pres) + (position < 0 ? 0 : position));
 	const ctx = {
 		groupScale: {
 			sx: 1,
 			sy: 1
 		},
+		groupReflected: false,
 		mode: opts.textLayout ?? "foreignObject",
-		measure: opts.measureText ?? defaultMeasurer
+		measure: opts.measureText ?? defaultMeasurer,
+		ownShapes: true,
+		background: {
+			id: "",
+			width: W / EMU_PER_PX,
+			height: H / EMU_PER_PX
+		},
+		inverseGroupTransform: ""
 	};
 	let bg = getSlideBackground(slide);
 	if (bg.kind === "inherit") {
@@ -4773,6 +6074,8 @@ const renderSlideSvg = (pres, slide, opts = {}) => {
 		}
 	}
 	let bgColor = "#FFFFFF";
+	const bgOpacity = bg.kind === "solid" ? bg.opacity : void 0;
+	const bgOpacityAttr = bgOpacity === void 0 ? "" : ` fill-opacity="${bgOpacity}"`;
 	let bgGradient = "";
 	let bgGradientDefs = "";
 	if (bg.kind === "solid") bgColor = resolveColor(bg.color, theme, "#FFFFFF");
@@ -4818,25 +6121,50 @@ const renderSlideSvg = (pres, slide, opts = {}) => {
 		if (bytes) {
 			const fmt = detectImageFormatLocal(bytes);
 			const dataUrl = `data:${fmt ? imageMime[fmt] ?? "image/png" : "image/png"};base64,${u8ToBase64(bytes)}`;
-			bgImage = `<image x="0" y="0" width="${E(W)}" height="${E(H)}" href="${dataUrl}" xlink:href="${dataUrl}" preserveAspectRatio="xMidYMid slice"/>`;
+			const layout = getSlideBackgroundImageFillLayout(slide);
+			const crop = getSlideBackgroundImageCrop(slide);
+			const cropLeft = crop?.left ?? 0, cropTop = crop?.top ?? 0;
+			const cropRight = crop?.right ?? 0, cropBottom = crop?.bottom ?? 0;
+			const opacity = getSlideBackgroundImageOpacity(slide) ?? 1;
+			const intrinsic = layout?.mode === "tile" ? getSlideBackgroundImageIntrinsicSize(slide) : null;
+			if (layout?.mode === "tile" && intrinsic) {
+				const pattern = imageTilePattern(dataUrl, layout, intrinsic, 0, 0, W, H, cropLeft, cropTop, cropRight, cropBottom);
+				bgImage = `${pattern.defs}<rect width="${E(W)}" height="${E(H)}" fill="${pattern.fill}" opacity="${opacity}"/>`;
+			} else {
+				const stretch = layout?.mode === "stretch" ? layout : null;
+				const left = stretch?.left ?? 0;
+				const top = stretch?.top ?? 0;
+				const width = Math.max(0, W * (1 - left - (stretch?.right ?? 0)));
+				const height = Math.max(0, H * (1 - top - (stretch?.bottom ?? 0)));
+				const sourceWidth = 1 - cropLeft - cropRight;
+				const sourceHeight = 1 - cropTop - cropBottom;
+				const imageWidth = sourceWidth > 0 ? width / sourceWidth : 0;
+				const imageHeight = sourceHeight > 0 ? height / sourceHeight : 0;
+				const clipId = mintId();
+				const sourceClipId = mintId();
+				bgImage = `<defs><clipPath id="${clipId}"><rect width="${E(W)}" height="${E(H)}"/></clipPath><clipPath id="${sourceClipId}"><rect x="${E(W * left)}" y="${E(H * top)}" width="${E(width)}" height="${E(height)}"/></clipPath></defs><g clip-path="url(#${clipId})"><g clip-path="url(#${sourceClipId})"><image opacity="${opacity}" x="${E(W * left - imageWidth * cropLeft)}" y="${E(H * top - imageHeight * cropTop)}" width="${E(imageWidth)}" height="${E(imageHeight)}" href="${dataUrl}" xlink:href="${dataUrl}" preserveAspectRatio="none"/></g></g>`;
+			}
 		}
 	}
 	let layoutBgShapes = "";
 	const layoutForBg = getSlideLayout(slide);
-	if (layoutForBg) try {
-		const masterShapes = topLevelShapes(getSlideMasterShapes(pres, layoutForBg), { dropPlaceholders: true });
+	if (layoutForBg && !isSlideBackgroundGraphicsHidden(slide)) try {
+		const masterShapes = topLevelShapes(isSlideLayoutBackgroundGraphicsHidden(layoutForBg) ? [] : getSlideMasterShapes(pres, layoutForBg), { dropPlaceholders: true });
 		const layoutShapes = topLevelShapes(getSlideLayoutShapes(pres, layoutForBg), { dropPlaceholders: true });
-		layoutBgShapes = [...masterShapes, ...layoutShapes].map((s) => renderShape(s, pres, theme, ctx)).join("");
+		const bgCtx = {
+			...ctx,
+			ownShapes: false
+		};
+		layoutBgShapes = [...masterShapes, ...layoutShapes].map((s) => renderShape(s, pres, theme, bgCtx)).join("");
 	} catch {
 		layoutBgShapes = "";
 	}
 	const shapesSvg = topLevelShapes(getSlideShapes(slide), { dropPlaceholders: false }).map((s) => renderShape(s, pres, theme, ctx)).join("");
+	const backgroundSvg = `${bgOpacity === void 0 ? "" : `<rect width="${E(W)}" height="${E(H)}" fill="#FFFFFF"/>`}<rect width="${E(W)}" height="${E(H)}" fill="${bgColor}"${bgOpacityAttr}/>${bgGradient}${bgImage}`;
 	return [
 		`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${E(W)} ${E(H)}" preserveAspectRatio="xMidYMid meet">`,
 		bgGradientDefs,
-		`<rect width="${E(W)}" height="${E(H)}" fill="${bgColor}"/>`,
-		bgGradient,
-		bgImage,
+		ctx.background.id ? `<defs><g id="${ctx.background.id}">${backgroundSvg}</g></defs><use href="#${ctx.background.id}" xlink:href="#${ctx.background.id}"/>` : backgroundSvg,
 		layoutBgShapes,
 		shapesSvg,
 		"</svg>"
@@ -4872,10 +6200,10 @@ const auditShape = (pres, theme, shape, slideIndex, measure, tolerancePx, report
 	}, theme, getShapePlaceholderType(shape), measure, "#000000");
 	if (model === null) return;
 	const vert = verticalLayoutOf(model.effectiveBody.vert ?? getShapeTextDirection(shape));
-	const cols = getShapeTextColumns(shape);
+	const cols = model.effectiveBody.columns;
 	const columns = vert === "none" && cols && cols.count >= 2 ? {
 		count: cols.count,
-		gapPx: cols.gapEmu !== void 0 ? cols.gapEmu / EMU_PER_PX : 12
+		gapPx: cols.gapEmu !== void 0 ? cols.gapEmu / EMU_PER_PX : 0
 	} : null;
 	const rect = model.svgTextRect(vert);
 	if (rect.w <= 0 || rect.h <= 0) return;
@@ -4892,6 +6220,7 @@ const auditShape = (pres, theme, shape, slideIndex, measure, tolerancePx, report
 		themeFace: model.themeFace,
 		defaultColor: "#000000",
 		anchor: model.anchor,
+		anchorCentered: model.effectiveBody.anchorCentered ?? false,
 		wrap: model.effectiveBody.wrap !== "none",
 		innerX: rect.x,
 		innerY: rect.y,
@@ -4968,7 +6297,7 @@ const detectApproximate = (paragraphs, measure) => {
 	const seen = /* @__PURE__ */ new Set();
 	for (const para of paragraphs) for (const piece of para.pieces) {
 		if (piece.isBreak || piece.text === "") continue;
-		const key = `${piece.family}|${piece.sizePx}|${piece.bold}|${piece.italic}|${piece.text}`;
+		const key = `${piece.family}|${piece.sizePx}|${piece.bold}|${piece.italic}|${piece.kerning ?? true}|${piece.text}`;
 		if (seen.has(key)) continue;
 		seen.add(key);
 		const spec = {
@@ -4976,7 +6305,8 @@ const detectApproximate = (paragraphs, measure) => {
 			sizePx: piece.sizePx,
 			bold: piece.bold,
 			italic: piece.italic,
-			letterSpacingPx: piece.letterSpacingPx
+			letterSpacingPx: piece.letterSpacingPx,
+			kerning: piece.kerning ?? true
 		};
 		const r = measure(piece.text, spec);
 		if (r.approximate === true || r.ascentPx === void 0) return true;
@@ -5002,6 +6332,47 @@ const auditTextLayout = (pres, options = {}) => {
 	return issues;
 };
 //#endregion
-export { MONO as a, TIMES as c, substituteFamily as d, AVG_GLYPH_W_RATIO as i, defaultMeasurer as l, renderSlideSvg as n, SANS as o, ARIAL as r, SERIF as s, auditTextLayout as t, isCjk as u };
+//#region src/autofit.ts
+/**
+* How much the preview shrinks `shape`'s text to fit its box: a multiplier on
+* every authored size — font size, line spacing in points, paragraph spacing
+* and indents.
+*
+* `1` for a shape with no `<a:normAutofit>`: `<a:noAutofit>` overflows and
+* `<a:spAutoFit>` grows the box instead, so neither shrinks the text. A shape
+* with a baked `fontScale` reports that, unchanged — it is what PowerPoint
+* itself applied.
+*/
+function shapeAutoFitScale(pres, shape, options = {}) {
+	const bounds = options.bounds ?? getShapeBoundsResolved(pres, shape);
+	if (!bounds) return 1;
+	return resolveTextBodyModel(pres, shape, {
+		x: bounds.x,
+		y: bounds.y,
+		w: bounds.w,
+		h: bounds.h
+	}, getPresentationTheme(pres), getShapePlaceholderType(shape), options.measureText ?? defaultMeasurer, "#000000")?.autoFitScale ?? 1;
+}
+/** Translation in preview pixels applied to the entire text block by centered
+* text anchoring. Paragraph widths and alignment remain unchanged. Editing
+* surfaces must apply the same offset to keep the caret over the preview. */
+function shapeTextAnchorOffset(pres, shape, options = {}) {
+	const bounds = options.bounds ?? getShapeBoundsResolved(pres, shape);
+	if (!bounds) return {
+		x: 0,
+		y: 0
+	};
+	return resolveTextBodyModel(pres, shape, {
+		x: bounds.x,
+		y: bounds.y,
+		w: bounds.w,
+		h: bounds.h
+	}, getPresentationTheme(pres), getShapePlaceholderType(shape), options.measureText ?? defaultMeasurer, "#000000")?.anchorOffset ?? {
+		x: 0,
+		y: 0
+	};
+}
+//#endregion
+export { textColumnsStyle as _, renderTextEffectsSvg as a, shapeCustomTextRect as b, MONO as c, TIMES as d, defaultMeasurer as f, textUnderlineStyle as g, paragraphNumberLabels as h, renderSlideSvg as i, SANS as l, substituteFamily as m, shapeTextAnchorOffset as n, ARIAL as o, isCjk as p, auditTextLayout as r, AVG_GLYPH_W_RATIO as s, shapeAutoFitScale as t, SERIF as u, verticalTextStyle as v, resolveTextBodyRect as y };
 
-//# sourceMappingURL=src-DC6HxO-i.js.map
+//# sourceMappingURL=src-DYfIZIh8.js.map