rapier-markdown-kit 1.1.104 → 1.2.5

package/dist/kit/render-print.mjs

@@ -75,7 +75,7 @@ function _rapierPrintWillFont(markers) {
 	const bounds = [0, -400, 10, 0];
 	const outline = cat(u16(1), bounds.map(u16), u16(2), u16(0), [1, 1, 1], u16(0), u16(10), u16(-5), u16(bounds[1]), u16(bounds[3] - bounds[1]), u16((bounds[1] - bounds[3]) / 2), [0]);
 	const utf16 = text => Array.from(text, ch => u16(ch.charCodeAt(0)));
-	const names = [[1, 'RapierWill'], [2, 'Regular'], [4, 'RapierWill Regular'], [6, 'RapierWill-Regular']];
+	const names = [[1, 'RapierWillCarrier'], [2, 'Regular'], [4, 'RapierWillCarrier Regular'], [6, 'RapierWillCarrier-Regular']];
 	let offset = 0;
 	const tables = {
 		'OS/2': cat(u16(4), u16(advance), u16(400), u16(5), u16(0), u16(650), u16(600), u16(0), u16(75), u16(650), u16(600), u16(0), u16(350),
@@ -175,7 +175,7 @@ function _rapierPrintWillPageCss() {
 // The capture's own limits (agent/visual.mjs VISUAL_LIMITS): the longest edge and the most pixels one capture returns.
 const CAPTURE_EDGE = 4096, CAPTURE_PIXELS = 4 * 1024 * 1024;
 
-async function _rapierWritePrintPdf({root, css, fontCss = '', canonical, bom = false, filename, title, settings}, {capture, signal, current, maxBytes = 8 * 1024 * 1024} = {}) {
+async function _rapierWritePrintPdf({root, css, fontCss = '', canonical, bom = false, filename, title, settings}, {capture, signal, current, maxBytes = 8 * 1024 * 1024, film, ink} = {}) {
 	const refuse = code => { throw Object.assign(new Error(code), {code}); };
 	const check = () => {
 		if (signal?.aborted) refuse('cancelled');
@@ -193,7 +193,7 @@ async function _rapierWritePrintPdf({root, css, fontCss = '', canonical, bom = f
 	const bodyHeight = Math.floor((height - margins.top - margins.bottom) * 4 / 3);
 	if (bodyWidth < 1 || bodyHeight < 1 || bodyWidth * bodyHeight > 4 * 1024 * 1024) refuse('pdf_page_geometry_invalid');
 	const frame = document.createElement('iframe');
-	let vectors, nativeGlyphs;
+	let vectors, nativeGlyphs, filmSession;
 	let rejectAbort;
 	const aborted = new Promise((_, reject) => { rejectAbort = reject; });
 	aborted.catch(() => {});
@@ -273,6 +273,8 @@ async function _rapierWritePrintPdf({root, css, fontCss = '', canonical, bom = f
 		globalThis.RapierMath?.fit(main);
 		applyPrintCapitals(main);
 		applyTypography(main, {all: true});
+		// The document's ink marks, drawn on the words where they now stand on the page.
+		ink?.(main);
 		const count = Math.max(1, Math.ceil((main.scrollWidth - 1) / bodyWidth));
 		if (!Number.isSafeInteger(count)) refuse('pdf_page_geometry_invalid');
 		// Captured document font bytes own a same-name family; factory glyphs must
@@ -296,48 +298,59 @@ async function _rapierWritePrintPdf({root, css, fontCss = '', canonical, bom = f
 		}
 		const font = _rapierPrintWillFont(text);
 		strip.style.width = count * bodyWidth + 'px';
-		// A capture costs the whole document, however little of it the clip takes, so the pages that carry no picture share captures: as many to one
-		// as the capture's own limits allow, fewer when the capture refuses its size. A page with a picture is captured alone, so the picture keeps
-		// the capture's byte limit to itself.
-		let share = main.querySelector('img,svg,canvas,video,picture') ? 1
-			: Math.max(1, Math.min(Math.floor(CAPTURE_EDGE / bodyWidth), Math.floor(CAPTURE_PIXELS / (bodyWidth * bodyHeight))));
+		strip.style.transform = 'none';
+		// One styled film is reused for every page window. Batches stay inside the capture edge
+		// and pixel limits. A picture no longer forces its own capture. Pixels are deflated once.
+		if (typeof film !== 'function') refuse('pdf_render_unavailable');
+		// step() can reject after the film resolves (the document changed, or the attempt was
+		// cancelled). The session would otherwise keep its abort listener with no owner.
+		let pendingFilm = null, abandonFilm = false;
+		const trackedFilm = Promise.resolve(film({root: surface, signal, current, frame: {width: count * bodyWidth, height: bodyHeight}})).then(session => {
+			if (abandonFilm) session?.close?.();
+			else pendingFilm = session;
+			return session;
+		});
+		try {
+			filmSession = await step(trackedFilm);
+			pendingFilm = null;
+		} catch (error) {
+			abandonFilm = true;
+			pendingFilm?.close?.();
+			pendingFilm = null;
+			throw error;
+		}
+		let share = Math.max(1, Math.min(Math.floor(CAPTURE_EDGE / bodyWidth), Math.floor(CAPTURE_PIXELS / (bodyWidth * bodyHeight))));
 		const pages = [];
 		let imageBytes = 0;
+		const pack = async rgb => {
+			const packed = new Uint8Array(await step(new Response(new Blob([rgb]).stream().pipeThrough(new CompressionStream('deflate'))).arrayBuffer()));
+			imageBytes += packed.byteLength;
+			if (imageBytes > maxBytes) refuse('export_too_large');
+			pages.push({rgb: packed});
+		};
 		for (let first = 0; first < count;) {
 			check();
 			const span = Math.min(share, count - first);
-			surface.style.width = span * bodyWidth + 'px';
-			strip.style.transform = `translateX(${-first * bodyWidth}px)`;
-			let captured;
-			try { captured = await capture({root: surface, clip: {x: 0, y: 0, width: span * bodyWidth, height: bodyHeight}, signal, current}); }
-			catch (error) {
-				if (error?.code === 'visual_too_large' && span > 1) { share = Math.ceil(span / 2); continue; }
-				throw error;
-			}
-			check();
-			const image = new into.defaultView.Image();
-			image.src = 'data:' + captured.mimeType + ';base64,' + captured.data;
 			try {
-				await step(image.decode());
-				for (let offset = 0; offset < span; offset++) {
-					const canvas = into.createElement('canvas'); canvas.width = bodyWidth; canvas.height = bodyHeight;
-					try {
-						const context = canvas.getContext('2d', {alpha: false});
-						if (!context) refuse('pdf_render_unavailable');
-						context.fillStyle = '#fff'; context.fillRect(0, 0, bodyWidth, bodyHeight);
-						context.drawImage(image, offset * bodyWidth, 0, bodyWidth, bodyHeight, 0, 0, bodyWidth, bodyHeight);
-						// Preserve the capture's exact pixels. A JPEG re-encode changes
-						// glyph edges, pictures and paint even at its highest quality.
-						const rgba = context.getImageData(0, 0, bodyWidth, bodyHeight).data;
+				const shot = await step(filmSession.raster({x: first * bodyWidth, y: 0, width: span * bodyWidth, height: bodyHeight}));
+				if (shot?.width !== span * bodyWidth || shot?.height !== bodyHeight || !(shot.rgb instanceof Uint8Array)) refuse('pdf_render_unavailable');
+				if (span === 1) await pack(shot.rgb);
+				else {
+					const row = bodyWidth * 3;
+					for (let offset = 0; offset < span; offset++) {
 						const rgb = new Uint8Array(bodyWidth * bodyHeight * 3);
-						for (let at = 0, to = 0; at < rgba.length; at += 4) {rgb[to++] = rgba[at]; rgb[to++] = rgba[at + 1]; rgb[to++] = rgba[at + 2];}
-						const packed = new Uint8Array(await step(new Response(new Blob([rgb]).stream().pipeThrough(new CompressionStream('deflate'))).arrayBuffer()));
-						imageBytes += packed.byteLength;
-						if (imageBytes > maxBytes) refuse('export_too_large');
-						pages.push({rgb: packed});
-					} finally { canvas.width = canvas.height = 0; }
+						for (let y = 0; y < bodyHeight; y++) {
+							const from = (y * shot.width + offset * bodyWidth) * 3;
+							rgb.set(shot.rgb.subarray(from, from + row), y * row);
+						}
+						await pack(rgb);
+					}
 				}
-			} finally { image.src = ''; }
+				shot.rgb = null;
+			} catch (error) {
+				if (error?.code === 'visual_too_large' && span > 1) { share = Math.ceil(span / 2); continue; }
+				throw error;
+			}
 			first += span;
 		}
 		check();
@@ -345,7 +358,7 @@ async function _rapierWritePrintPdf({root, css, fontCss = '', canonical, bom = f
 			pixelWidth: bodyWidth, pixelHeight: bodyHeight, pageNumbers: settings?.pagestyle === 'plain', maxBytes, check});
 		check();
 		return {bytes, pages: count};
-	} finally { nativeGlyphs?.restore(); vectors?.restore(); signal?.removeEventListener('abort', abort); frame.remove(); }
+	} finally { filmSession?.close(); nativeGlyphs?.restore(); vectors?.restore(); signal?.removeEventListener('abort', abort); frame.remove(); }
 }
 
 // Ranges locate the actual text fragments after column layout. Splitting a text node at
@@ -355,7 +368,7 @@ async function _rapierPrintTextPages(main, pageWidth, count, check, origin = mai
 	const pages = Array.from({length: count}, () => []), walker = into.createTreeWalker(main, 5);
 	const markerMetrics = _rapierPrintWillMetrics(Array.from(main.querySelectorAll('.rapier-will-carrier'), node => node.textContent));
 	const markerLost = () => { throw _rapierPrintWillLost('a marker has no readable position on the page', 'Try another browser'); };
-	const range = into.createRange();
+	const range = into.createRange(), segmenter = new Intl.Segmenter(undefined, {granularity: 'grapheme'});
 	let nodes = 0, operations = 0;
 	for (let node; (node = walker.nextNode());) {
 		if (++nodes % 128 === 0) { await new Promise(resolve => setTimeout(resolve, 0)); check(); }
@@ -374,6 +387,7 @@ async function _rapierPrintTextPages(main, pageWidth, count, check, origin = mai
 		const preserve = /pre|break-spaces/.test(style.whiteSpace);
 		const block = element.closest('p,h1,h2,h3,h4,h5,h6,li,pre,td,th,figcaption,blockquote,.rapier-will-carrier') || element;
 		const native = nativeNodes?.get(node);
+		let characters = null;
 		const pageOf = x => Math.max(0, Math.min(count - 1, Math.floor((x - origin.left + .01) / pageWidth)));
 		const visit = (start, end) => {
 			if (++operations % 128 === 0) check();
@@ -385,7 +399,8 @@ async function _rapierPrintTextPages(main, pageWidth, count, check, origin = mai
 			const first = rects[0], page = pageOf(first.left);
 			const oneLine = rects.every(rect => pageOf(rect.left) === page && pageOf(rect.width ? rect.right - .02 : rect.left) === page && Math.abs(rect.top - first.top) < .5);
 			let middle = formula ? start : Math.floor((start + end) / 2);
-			if (middle > start && /[\uD800-\uDBFF]/.test(value[middle - 1]) && /[\uDC00-\uDFFF]/.test(value[middle])) middle--;
+			// A line never breaks inside a character: halve between whole ones (a letter and its marks, a conjunct, an emoji).
+			if (middle > start) middle = (characters ||= segmenter.segment(value)).containing(middle).index;
 			const cluster = native?.find(item => item.start < middle && item.end > middle);
 			if (cluster) middle = cluster.start > start ? cluster.start : cluster.end;
 			if (!oneLine && middle > start && middle < end) { visit(start, middle); visit(middle, end); return; }
@@ -398,7 +413,7 @@ async function _rapierPrintTextPages(main, pageWidth, count, check, origin = mai
 			if (carrier && right === x) right += Array.from(text).length * markerMetrics.advance * markerMetrics.size / 1000;
 			const bottom = Math.max(...rects.map(rect => rect.bottom)) - origin.top;
 			const parts = native ? native.filter(item => item.start >= start && item.end <= end && item.text).map(item => ({...item}))
-				: [{text, x, y, width: right - x, height: bottom - y}];
+				: [{text, x, y, width: right - x, height: bottom - y, rtl: style.direction === 'rtl'}];
 			const last = pages[page].at(-1);
 			if (last && !formula && !last.math && last.block === block && last.carrier === carrier && Math.abs(last.y - y) < Math.max(2, Math.min(last.height, bottom - y) * .2)) {
 				if (!preserve && last.text.endsWith(' ') && text.startsWith(' ') && parts.length) {
@@ -416,7 +431,35 @@ async function _rapierPrintTextPages(main, pageWidth, count, check, origin = mai
 		visit(0, value.length);
 	}
 	check();
-	return pages.map(page => page.map(({block, carrier, ...run}) => run));
+	// Trailing-carrier print CSS pulls a last marker up so it stays on the sheet.
+	// Keep that paint; put the searchable object after the preceding words so
+	// reading order matches the source (the marker itself has no visible ink).
+	const pageHeight = origin.height;
+	for (const page of pages) {
+		let prev = null;
+		for (const run of page) {
+			if (run.carrier && prev && run.y + 0.25 < prev.y + prev.height * .8) {
+				const next = Math.min(pageHeight - 0.5, prev.y + prev.height * .85);
+				if (next > run.y) {
+					const dy = next - run.y;
+					run.y += dy;
+					for (const part of run.parts || []) part.y += dy;
+				}
+			}
+			prev = run;
+		}
+	}
+	// Each run carries the tags of its block's structure (outermost first): a PDF reader finds the document's headings, lists and
+	// tables from them rather than from positions.
+	const ROLES = {TABLE: 'Table', TR: 'TR', TD: 'TD', TH: 'TH', UL: 'L', OL: 'L', LI: 'LI', BLOCKQUOTE: 'BlockQuote', P: 'P', PRE: 'Code', FIGCAPTION: 'Caption',
+		H1: 'H1', H2: 'H2', H3: 'H3', H4: 'H4', H5: 'H5', H6: 'H6'};
+	const tags = block => {
+		const chain = [];
+		for (let node = block; node && node !== main; node = node.parentElement)
+			if (ROLES[node.tagName] || node === block && node.matches('.rapier-will-carrier')) chain.unshift({node, role: ROLES[node.tagName] || 'P'});
+		return chain;
+	};
+	return pages.map(page => page.map(({block, ...run}) => ({...run, tags: tags(block)})));
 }
 
 function _rapierPrintLinkPages(main, width, height, count) {
@@ -450,6 +493,28 @@ function _rapierPrintLinkPages(main, width, height, count) {
   return {_rapierWillSentinelPlan, _rapierPrintWillAdmit, _rapierPrintWillFont, _rapierPrintWillMetrics, _rapierPrintWillPlace, _rapierPrintWillLost, _rapierPrintWillPageCss, _rapierWritePrintPdf};
 }
 
+// Where each scalar of an invisible text run stands, in character slots from the run's left edge: a mark shares its letter's
+// slot, a right-to-left word runs from the right, and so do the words of a right-to-left line (strong letters only; one line).
+function _rapierPrintSlots(text, rtl) {
+	const pieces = [];
+	let scalars = 0, count = 0;
+	for (const {segment} of new Intl.Segmenter(undefined, {granularity: 'grapheme'}).segment(text)) {
+		const dir = /[\p{Script=Arabic}\p{Script=Hebrew}\p{Script=Syriac}\p{Script=Thaana}\p{Script=Nko}]/u.test(segment) ? 'r' : /\p{L}/u.test(segment) ? 'l' : '';
+		const cluster = {from: scalars, length: Array.from(segment).length}, last = pieces.at(-1);
+		scalars += cluster.length; count++;
+		if (last && (!dir || !last.dir || last.dir === dir)) { last.clusters.push(cluster); last.dir ||= dir; }
+		else pieces.push({dir, clusters: [cluster]});
+	}
+	const slots = new Array(scalars);
+	let slot = 0;
+	for (const piece of rtl ? pieces.reverse() : pieces) {
+		for (const cluster of (piece.dir || (rtl ? 'r' : 'l')) === 'r' ? piece.clusters.reverse() : piece.clusters) {
+			slots.fill(slot++, cluster.from, cluster.from + cluster.length);
+		}
+	}
+	return {slots, count};
+}
+
 // A standard PDF page tree, image streams, Unicode text and an associated source file.
 // It accepts already-rendered pages, so there is no second document grammar or layout engine.
 async function writeRasterPdf({pages, textPages, linkPages = [], vectorPages = [], canonical, bom = false, filename, title, font, width, height, margins, pixelWidth, pixelHeight, pageNumbers, maxBytes, check}) {
@@ -487,6 +552,9 @@ async function writeRasterPdf({pages, textPages, linkPages = [], vectorPages = [
 	const descriptor = add('<< /Type /FontDescriptor /FontName /RapierText /Flags 4 /FontBBox [' + font.bounds.join(' ') + '] /ItalicAngle 0 /Ascent 500 /Descent -500 /CapHeight 500 /StemV 80 /FontFile2 ' + fontFile + ' 0 R >>');
 	const descendant = add('<< /Type /Font /Subtype /CIDFontType2 /BaseFont /RapierText /CIDSystemInfo << /Registry (Adobe) /Ordering (Identity) /Supplement 0 >> /FontDescriptor ' + descriptor + ' 0 R /DW 500 /CIDToGIDMap /Identity >>');
 	const type = add('<< /Type /Font /Subtype /Type0 /BaseFont /RapierText /Encoding /Identity-H /DescendantFonts [' + descendant + ' 0 R] /ToUnicode ' + mapping + ' 0 R >>');
+	const carrierDescriptor = add('<< /Type /FontDescriptor /FontName /RapierWillCarrier /Flags 4 /FontBBox [' + font.bounds.join(' ') + '] /ItalicAngle 0 /Ascent 500 /Descent -500 /CapHeight 500 /StemV 80 /FontFile2 ' + fontFile + ' 0 R >>');
+	const carrierDescendant = add('<< /Type /Font /Subtype /CIDFontType2 /BaseFont /RapierWillCarrier /CIDSystemInfo << /Registry (Adobe) /Ordering (Identity) /Supplement 0 >> /FontDescriptor ' + carrierDescriptor + ' 0 R /DW 500 /CIDToGIDMap /Identity >>');
+	const carrierType = add('<< /Type /Font /Subtype /Type0 /BaseFont /RapierWillCarrier /Encoding /Identity-H /DescendantFonts [' + carrierDescendant + ' 0 R] /ToUnicode ' + mapping + ' 0 R >>');
 	const numberFont = pageNumbers ? add('<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica >>') : null;
 	const kids = pages.map(() => { objects.push(null); return objects.length - 1; }), decimal = value => Number(value.toFixed(4));
 	const nativeFonts = new Map();
@@ -515,24 +583,45 @@ async function writeRasterPdf({pages, textPages, linkPages = [], vectorPages = [
 		const type = add('<< /Type /Font /Subtype /Type0 /BaseFont /' + name + ' /Encoding /Identity-H /DescendantFonts [' + descendant + ' 0 R] /ToUnicode ' + mapping + ' 0 R >>');
 		nativeResources.push(entry.name + ' ' + type + ' 0 R');
 	}
+	const sharedImages = new Map();
+	// The structure tree (PDF 1.7, 14.7): one element per tagged DOM element, each run marked with its page's next MCID.
+	const structs = new Map(), documentElement = {role: 'Document', kids: []}, parentTree = [];
+	const structOf = tags => {
+		let parent = documentElement;
+		for (const {node, role} of tags) {
+			let element = structs.get(node);
+			if (!element) {element = {role, kids: [], parent}; structs.set(node, element); parent.kids.push(element);}
+			parent = element;
+		}
+		return parent === documentElement ? null : parent;
+	};
 	for (let index = 0; index < pages.length; index++) {
 		check();
-		const picture = stream('/Type /XObject /Subtype /Image /Width ' + pixelWidth + ' /Height ' + pixelHeight + ' /ColorSpace /DeviceRGB /BitsPerComponent 8 /Filter /' + (pages[index].rgb ? 'FlateDecode' : 'DCTDecode'), pages[index].rgb || pages[index]);
-		let commands = 'q\n' + [decimal(pixelWidth * .75), 0, 0, decimal(pixelHeight * .75), decimal(margins.left), decimal(height - margins.top - pixelHeight * .75)].join(' ') + ' cm\n/Im0 Do\nQ\n';
-		const pictures = ['/Im0 ' + picture + ' 0 R'], states = [], rasterCache = new Map();
+		const marked = [];
+		parentTree.push(marked);
+		const held = pages[index], flate = !!held?.rgb;
+		const picture = stream('/Type /XObject /Subtype /Image /Width ' + pixelWidth + ' /Height ' + pixelHeight + ' /ColorSpace /DeviceRGB /BitsPerComponent 8 /Filter /' + (flate ? 'FlateDecode' : 'DCTDecode'), flate ? held.rgb : held);
+		pages[index] = null;
+		// The page's picture is how its tagged text looks, not a figure of its own: an artifact.
+		let commands = '/Artifact BMC\nq\n' + [decimal(pixelWidth * .75), 0, 0, decimal(pixelHeight * .75), decimal(margins.left), decimal(height - margins.top - pixelHeight * .75)].join(' ') + ' cm\n/Im0 Do\nQ\nEMC\n';
+		const pictures = ['/Im0 ' + picture + ' 0 R'], states = [];
 		for (const drawing of vectorPages[index] || []) {
 			commands += `q\n.75 0 0 -.75 ${decimal(margins.left)} ${decimal(height - margins.top)} cm\n0 0 ${pixelWidth} ${pixelHeight} re W n\n1 0 0 1 ${decimal(drawing.x)} 0 cm\n`;
 			commands += [drawing.clip.x, drawing.clip.y, drawing.clip.width, drawing.clip.height].map(decimal).join(' ') + ' re W n\n';
 			for (const piece of drawing.sequence) {
 				if (piece.image) {
-					let name = rasterCache.get(piece.image);
-					if (!name) {
+					let shared = sharedImages.get(piece.image);
+					if (!shared) {
 						const image = piece.image;
 						const mask = stream('/Type /XObject /Subtype /Image /Width ' + image.width + ' /Height ' + image.height + ' /ColorSpace /DeviceGray /BitsPerComponent 8 /Filter /FlateDecode', image.alpha);
 						const object = stream('/Type /XObject /Subtype /Image /Width ' + image.width + ' /Height ' + image.height + ' /ColorSpace /DeviceRGB /BitsPerComponent 8 /SMask ' + mask + ' 0 R /Filter /FlateDecode', image.rgb);
-						name = '/Im' + pictures.length; pictures.push(name + ' ' + object + ' 0 R'); rasterCache.set(image, name);
+						image.alpha = image.rgb = null;
+						const name = '/Im' + (sharedImages.size + 1);
+						shared = {name, resource: name + ' ' + object + ' 0 R'};
+						sharedImages.set(piece.image, shared);
 					}
-					commands += `q\n${[piece.width, 0, 0, -piece.height, piece.x, piece.y + piece.height].map(decimal).join(' ')} cm\n${name} Do\nQ\n`;
+					if (!pictures.includes(shared.resource)) pictures.push(shared.resource);
+					commands += `q\n${[piece.width, 0, 0, -piece.height, piece.x, piece.y + piece.height].map(decimal).join(' ')} cm\n${shared.name} Do\nQ\n`;
 				} else {
 					const state = '/Gs' + states.length;
 					states.push(state + ' ' + add('<< /Type /ExtGState /ca ' + decimal(piece.fillAlpha) + ' /CA ' + decimal(piece.strokeAlpha) + ' >>') + ' 0 R');
@@ -547,6 +636,8 @@ async function writeRasterPdf({pages, textPages, linkPages = [], vectorPages = [
 			// Keep one logical Unicode text object, resetting its font before each scalar's direction
 			// can change. Readers that ignore ActualText otherwise discard earlier words in mixed RTL/LTR.
 			// Express width in the font size: some readers ignore horizontal text scaling when joining.
+			const element = structOf(run.tags || []);
+			if (element) {element.kids.push({page: index, mcid: marked.length}); commands += `/${element.role} << /MCID ${marked.length} >> BDC\n`; marked.push(element);}
 			commands += `q\n/Span << /ActualText <feff${hex(run.text)}> >> BDC\nBT\n100 Tz\n`;
 			for (const part of run.parts || [run]) {
 				if (part.font) {
@@ -556,15 +647,16 @@ async function writeRasterPdf({pages, textPages, linkPages = [], vectorPages = [
 					commands += `${state} gs\n${part.rgba.slice(0, 3).map(decimal).join(' ')} rg\n${entry.name} ${decimal(part.size * .75)} Tf\n0 Tr\n1 0 0 1 ${decimal(margins.left + part.x * .75)} ${decimal(height - margins.top - part.baseline * .75)} Tm\n<${value}> Tj\n`;
 				} else {
 					const characters = Array.from(part.text); if (!characters.length) continue;
-					const advance = part.width * .75 / characters.length, size = Math.max(.1, advance * 2), scaleY = Math.max(.1, part.height * .75) / size;
+					const {slots, count} = _rapierPrintSlots(part.text, part.rtl);
+					const advance = part.width * .75 / count, size = Math.max(.1, advance * 2), scaleY = Math.max(.1, part.height * .75) / size;
 					const baseline = decimal(height - margins.top - (part.y + part.height * .8) * .75);
 					for (let letter = 0; letter < characters.length; letter++) {
 						const value = codes.get(characters[letter].codePointAt(0)).toString(16).padStart(4, '0');
-						commands += `/F1 ${decimal(size)} Tf\n3 Tr\n1 0 0 ${decimal(scaleY)} ${decimal(margins.left + part.x * .75 + letter * advance)} ${baseline} Tm\n<${value}> Tj\n`;
+						commands += `${run.carrier ? '/Fc' : '/F1'} ${decimal(size)} Tf\n3 Tr\n1 0 0 ${decimal(scaleY)} ${decimal(margins.left + part.x * .75 + slots[letter] * advance)} ${baseline} Tm\n<${value}> Tj\n`;
 					}
 				}
 			}
-			commands += 'ET\nEMC\nQ\n';
+			commands += 'ET\nEMC\nQ\n' + (element ? 'EMC\n' : '');
 		}
 		if (numberFont) commands += `BT\n/F2 9 Tf\n0 Tr\n1 0 0 1 ${decimal(width / 2 - String(index + 1).length * 2.5)} ${decimal(margins.bottom / 2)} Tm\n(${index + 1}) Tj\nET\n`;
 		const content = stream('/Filter /FlateDecode', await compressed(encode(commands)));
@@ -575,19 +667,39 @@ async function writeRasterPdf({pages, textPages, linkPages = [], vectorPages = [
 				: '/Dest [' + kids[link.target.page] + ' 0 R /XYZ ' + decimal(margins.left + link.target.x * .75) + ' ' + decimal(height - margins.top - link.target.y * .75) + ' null]';
 			return add('<< /Type /Annot /Subtype /Link /Border [0 0 0] /Rect [' + rect.join(' ') + '] ' + target + ' >>');
 		});
-		put(kids[index], '<< /Type /Page /Parent 2 0 R /MediaBox [0 0 ' + decimal(width) + ' ' + decimal(height) + '] /Resources << /XObject << ' + pictures.join(' ') + ' >> /ExtGState << ' + states.join(' ') + ' >> /Font << /F1 ' + type + ' 0 R' + (numberFont ? ' /F2 ' + numberFont + ' 0 R' : '') + ' ' + nativeResources.join(' ') + ' >> >> /Contents ' + content + ' 0 R' + (annotations.length ? ' /Annots [' + annotations.map(id => id + ' 0 R').join(' ') + ']' : '') + ' >>');
+		put(kids[index], '<< /Type /Page /Parent 2 0 R /StructParents ' + index + ' /MediaBox [0 0 ' + decimal(width) + ' ' + decimal(height) + '] /Resources << /XObject << ' + pictures.join(' ') + ' >> /ExtGState << ' + states.join(' ') + ' >> /Font << /F1 ' + type + ' 0 R /Fc ' + carrierType + ' 0 R' + (numberFont ? ' /F2 ' + numberFont + ' 0 R' : '') + ' ' + nativeResources.join(' ') + ' >> >> /Contents ' + content + ' 0 R' + (annotations.length ? ' /Annots [' + annotations.map(id => id + ' 0 R').join(' ') + ']' : '') + ' >>');
 	}
 	put(2, '<< /Type /Pages /Count ' + kids.length + ' /Kids [' + kids.map(id => id + ' 0 R').join(' ') + '] >>');
-	put(1, '<< /Type /Catalog /Pages 2 0 R /Names << /EmbeddedFiles << /Names [<feff' + hex(filename) + '> ' + file + ' 0 R] >> >> /AF [' + file + ' 0 R] >>');
+	const tree = add(''), ids = new Map([[documentElement, add('')]]);
+	const reserve = element => { for (const kid of element.kids) if (kid.kids) { ids.set(kid, add('')); reserve(kid); } };
+	reserve(documentElement);
+	for (const [element, id] of ids) put(id, '<< /Type /StructElem /S /' + element.role + ' /P ' + (element.parent ? ids.get(element.parent) : tree) + ' 0 R /K [' +
+		element.kids.map(kid => kid.kids ? ids.get(kid) + ' 0 R' : '<< /Type /MCR /Pg ' + kids[kid.page] + ' 0 R /MCID ' + kid.mcid + ' >>').join(' ') + '] >>');
+	const parents = add('<< /Nums [' + parentTree.map((marked, index) => index + ' [' + marked.map(element => ids.get(element) + ' 0 R').join(' ') + ']').join(' ') + '] >>');
+	put(tree, '<< /Type /StructTreeRoot /K [' + ids.get(documentElement) + ' 0 R] /ParentTree ' + parents + ' 0 R /ParentTreeNextKey ' + parentTree.length + ' >>');
+	put(1, '<< /Type /Catalog /Pages 2 0 R /MarkInfo << /Marked true >> /StructTreeRoot ' + tree + ' 0 R /Names << /EmbeddedFiles << /Names [<feff' + hex(filename) + '> ' + file + ' 0 R] >> >> /AF [' + file + ' 0 R] >>');
 	const info = add('<< /Producer (Rapier) /Title <feff' + hex(title || filename.replace(/\.[^.]*$/, '')) + '> >>');
-	const parts = [encode('%PDF-1.7\n%\u00e2\u00e3\u00cf\u00d3\n')], offsets = [0];
-	let length = parts[0].length;
+	const header = encode('%PDF-1.7\n%\u00e2\u00e3\u00cf\u00d3\n'), offsets = new Array(objects.length);
+	let cursor = header.length;
+	for (let id = 1; id < objects.length; id++) {
+		offsets[id] = cursor;
+		cursor += (id + ' 0 obj\n').length + objects[id].length + 8;
+	}
+	const xrefAt = cursor;
+	const xref = encode('xref\n0 ' + objects.length + '\n0000000000 65535 f \n' + offsets.slice(1).map(at => String(at).padStart(10, '0') + ' 00000 n \n').join('') + 'trailer\n<< /Size ' + objects.length + ' /Root 1 0 R /Info ' + info + ' 0 R >>\nstartxref\n' + xrefAt + '\n%%EOF\n');
+	if (cursor + xref.length > maxBytes) fail('export_too_large');
+	const bytes = new Uint8Array(cursor + xref.length);
+	bytes.set(header, 0);
+	let at = header.length;
 	for (let id = 1; id < objects.length; id++) {
-		offsets.push(length);
-		const body = concat([encode(id + ' 0 obj\n'), objects[id], encode('\nendobj\n')]); parts.push(body); length += body.length;
+		const prefix = encode(id + ' 0 obj\n');
+		bytes.set(prefix, at); at += prefix.length;
+		bytes.set(objects[id], at); at += objects[id].length;
+		objects[id] = null;
+		const suffix = encode('\nendobj\n');
+		bytes.set(suffix, at); at += suffix.length;
 	}
-	const xref = length;
-	parts.push(encode('xref\n0 ' + objects.length + '\n0000000000 65535 f \n' + offsets.slice(1).map(at => String(at).padStart(10, '0') + ' 00000 n \n').join('') + 'trailer\n<< /Size ' + objects.length + ' /Root 1 0 R /Info ' + info + ' 0 R >>\nstartxref\n' + xref + '\n%%EOF\n'));
-	const bytes = concat(parts); if (bytes.length > maxBytes) fail('export_too_large'); return bytes;
+	bytes.set(xref, at);
+	return bytes;
 }
 export {createPrintRenderer, applyPrintCapitals, RAPIER_WILL_SENTINEL_MARK as sentinel};

package/dist/kit/render-sanitize.mjs

@@ -7,7 +7,7 @@ const RAPIER_SANITIZE_PROFILES = Object.freeze({
 	htmlTags: Object.freeze(["a","abbr","acronym","address","area","article","aside","audio","b","bdi","bdo","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","content","data","datalist","dd","decorator","del","details","dfn","dialog","dir","div","dl","dt","element","em","fieldset","figcaption","figure","font","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","img","input","ins","kbd","label","legend","li","main","map","mark","marquee","menu","menuitem","meter","nav","nobr","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","search","section","select","shadow","slot","small","source","spacer","span","strike","strong","style","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","tr","track","tt","u","ul","var","video","wbr"]),
 	svgTags: Object.freeze(["svg","a","altglyph","altglyphdef","altglyphitem","animatecolor","animatemotion","animatetransform","circle","clippath","defs","desc","ellipse","enterkeyhint","exportparts","filter","font","g","glyph","glyphref","hkern","image","inputmode","line","lineargradient","marker","mask","metadata","mpath","part","path","pattern","polygon","polyline","radialgradient","rect","stop","style","switch","symbol","text","textpath","title","tref","tspan","view","vkern"]),
 	mathTags: Object.freeze(["math","menclose","merror","mfenced","mfrac","mglyph","mi","mlabeledtr","mmultiscripts","mn","mo","mover","mpadded","mphantom","mroot","mrow","ms","mspace","msqrt","mstyle","msub","msup","msubsup","mtable","mtd","mtext","mtr","munder","munderover","mprescripts"]),
-	htmlAttributes: Object.freeze(["accept","action","align","alt","autocapitalize","autocomplete","autopictureinpicture","autoplay","background","bgcolor","border","capture","cellpadding","cellspacing","checked","cite","class","clear","color","cols","colspan","command","commandfor","controls","controlslist","coords","crossorigin","datetime","decoding","default","dir","disabled","disablepictureinpicture","disableremoteplayback","download","draggable","enctype","enterkeyhint","exportparts","face","for","headers","height","hidden","high","href","hreflang","id","inert","inputmode","integrity","ismap","kind","label","lang","list","loading","loop","low","max","maxlength","media","method","min","minlength","multiple","muted","name","nonce","noshade","novalidate","nowrap","open","optimum","part","pattern","placeholder","playsinline","popover","popovertarget","popovertargetaction","poster","preload","pubdate","radiogroup","readonly","rel","required","rev","reversed","role","rows","rowspan","spellcheck","scope","selected","shape","size","sizes","slot","span","srclang","start","src","srcset","step","style","summary","tabindex","title","translate","type","usemap","valign","value","width","wrap","xmlns"]),
+	htmlAttributes: Object.freeze(["accept","action","align","alt","autocapitalize","autocomplete","autopictureinpicture","autoplay","background","bgcolor","border","capture","cellpadding","cellspacing","checked","cite","class","clear","color","cols","colspan","controls","controlslist","coords","crossorigin","datetime","decoding","default","dir","disabled","disablepictureinpicture","disableremoteplayback","download","draggable","enctype","enterkeyhint","exportparts","face","for","headers","height","hidden","high","href","hreflang","id","inert","inputmode","integrity","ismap","kind","label","lang","list","loading","loop","low","max","maxlength","media","method","min","minlength","multiple","muted","name","nonce","noshade","novalidate","nowrap","open","optimum","part","pattern","placeholder","playsinline","poster","preload","pubdate","radiogroup","readonly","rel","required","rev","reversed","role","rows","rowspan","spellcheck","scope","selected","shape","size","sizes","slot","span","srclang","start","src","srcset","step","style","summary","tabindex","title","translate","type","usemap","valign","value","width","wrap","xmlns"]),
 	svgAttributes: Object.freeze(["accent-height","accumulate","additive","alignment-baseline","amplitude","ascent","attributename","attributetype","azimuth","basefrequency","baseline-shift","begin","bias","by","class","clip","clippathunits","clip-path","clip-rule","color","color-interpolation","color-interpolation-filters","color-profile","color-rendering","cx","cy","d","dx","dy","diffuseconstant","direction","display","divisor","dominant-baseline","dur","edgemode","elevation","end","exponent","fill","fill-opacity","fill-rule","filter","filterunits","flood-color","flood-opacity","font-family","font-size","font-size-adjust","font-stretch","font-style","font-variant","font-weight","fx","fy","g1","g2","glyph-name","glyphref","gradientunits","gradienttransform","height","href","id","image-rendering","in","in2","intercept","k","k1","k2","k3","k4","kerning","keypoints","keysplines","keytimes","lang","lengthadjust","letter-spacing","kernelmatrix","kernelunitlength","lighting-color","local","marker-end","marker-mid","marker-start","markerheight","markerunits","markerwidth","maskcontentunits","maskunits","max","mask","mask-type","media","method","mode","min","name","numoctaves","offset","operator","opacity","order","orient","orientation","origin","overflow","paint-order","path","pathlength","patterncontentunits","patterntransform","patternunits","pointer-events","points","preservealpha","preserveaspectratio","primitiveunits","r","rx","ry","radius","refx","refy","repeatcount","repeatdur","restart","result","rotate","scale","seed","shape-rendering","slope","specularconstant","specularexponent","spreadmethod","startoffset","stddeviation","stitchtiles","stop-color","stop-opacity","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke","stroke-width","style","surfacescale","systemlanguage","tabindex","tablevalues","targetx","targety","transform","transform-origin","text-anchor","text-decoration","text-orientation","text-rendering","textlength","type","u1","u2","unicode","values","vector-effect","viewbox","visibility","version","vert-adv-y","vert-origin-x","vert-origin-y","width","word-spacing","wrap","writing-mode","xchannelselector","ychannelselector","x","x1","x2","xmlns","y","y1","y2","z","zoomandpan"]),
 	mathAttributes: Object.freeze(["accent","accentunder","align","bevelled","close","columnalign","columnlines","columnspacing","columnspan","denomalign","depth","dir","display","displaystyle","encoding","fence","frame","height","href","id","largeop","length","linethickness","lquote","lspace","mathbackground","mathcolor","mathsize","mathvariant","maxsize","minsize","movablelimits","notation","numalign","open","rowalign","rowlines","rowspacing","rowspan","rspace","rquote","scriptlevel","scriptminsize","scriptsizemultiplier","selection","separator","separators","stretchy","subscriptshift","supscriptshift","symmetric","voffset","width","xmlns"]),
 	xmlAttributes: Object.freeze(["xlink:href","xml:id","xlink:title","xml:space","xmlns:xlink"]),
@@ -29,11 +29,6 @@ const RAPIER_SANITIZE_OPTIONS = Object.freeze({
 		FORBID_TAGS: RAPIER_SANITIZE_FORBID_TAGS,
 		FORBID_ATTR: RAPIER_SANITIZE_FORBID_ATTR,
 	}),
-	snippet: Object.freeze({
-		..._rapierSanitizeProfile('html'),
-		FORBID_TAGS: RAPIER_SANITIZE_FORBID_TAGS,
-		FORBID_ATTR: Object.freeze([...'style']),
-	}),
 	diagram: Object.freeze({
 		..._rapierSanitizeProfile('html', 'svg'),
 		FORBID_TAGS: Object.freeze(['form', 'dialog', 'template', 'iframe', 'script', 'foreignobject']),
@@ -59,6 +54,9 @@ const DIAGRAM_LABEL_SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
 const DIAGRAM_LABEL_HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
 const DIAGRAM_LABEL_MATH_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';
 
+// The profile each DOMPurify instance holds (setConfig), shared by every renderer made over it.
+const purifyConfigured = new WeakMap();
+
 function _rapierImageDataAttributeAllowed(tag, attribute, value, verify) {
 	return (tag === 'img' && attribute === 'src' || tag === 'image' && /^(?:href|xlink:href)$/.test(attribute)
 		&& /^data:image\/(?:png|jpeg|webp|jxl);base64,/i.test(value)) && verify(value);
@@ -376,6 +374,8 @@ function _rapierInstallSanitizeHooks() {
 	});
 }
 
+const purifyOptions = new Map();
+
 function sanitizeRapierHtml(value, context = 'render') {
 	return sanitize(value, context, false);
 }
@@ -392,24 +392,31 @@ function sanitize(value, context, fragment) {
 	// (the hook) without an id the chrome owns. 'source' is Markdown source HTML, written and never shown: the render
 	// profile's admission, and the block on remote content stays the reader's (a remote picture's URL is the person's words).
 	const selected = context === 'raw' || context === 'export' || context === 'source' || RAPIER_SANITIZE_OPTIONS[context] ? context : 'render';
-	let options = selected === 'raw' ? { ...RAPIER_SANITIZE_OPTIONS.render, ALLOW_DATA_ATTR: false } : RAPIER_SANITIZE_OPTIONS[selected] || RAPIER_SANITIZE_OPTIONS.render;
-	if (selected === 'source') options = {...options, ADD_DATA_URI_TAGS: ['image']};
-	const labels = selected === 'diagram' || selected === 'export';
-	if (labels) {
+	const labels = selected === 'diagram' || selected === 'export', key = selected + (fragment ? ' fragment' : '');
+	let options = purifyOptions.get(key);
+	if (!options) {
+		options = selected === 'raw' ? { ...RAPIER_SANITIZE_OPTIONS.render, ALLOW_DATA_ATTR: false } : RAPIER_SANITIZE_OPTIONS[selected] || RAPIER_SANITIZE_OPTIONS.render;
+		if (selected === 'source') options = {...options, ADD_DATA_URI_TAGS: ['image']};
 		// DOMPurify's USE_PROFILES replaces explicit allowlists. Add MathML to the
 		// selected profile without discarding its admitted HTML and SVG vocabulary.
-		options = {...options, ALLOWED_TAGS: [...new Set([...options.ALLOWED_TAGS, ...RAPIER_SANITIZE_PROFILES.mathTags])],
+		if (labels) options = {...options, ALLOWED_TAGS: [...new Set([...options.ALLOWED_TAGS, ...RAPIER_SANITIZE_PROFILES.mathTags])],
 			ALLOWED_ATTR: [...new Set([...options.ALLOWED_ATTR, ...RAPIER_SANITIZE_PROFILES.mathAttributes])], ADD_TAGS: ['foreignobject'], ADD_DATA_URI_TAGS: ['image'],
 			HTML_INTEGRATION_POINTS: {foreignobject: true}, FORBID_TAGS: options.FORBID_TAGS.filter(tag => tag !== 'foreignobject')};
+		if (fragment) options = {...options, RETURN_DOM_FRAGMENT: true};
+		purifyOptions.set(key, options);
+	}
+	if (labels) {
 		DOMPurify.addHook('uponSanitizeElement', diagramLabelElement);
 		DOMPurify.addHook('uponSanitizeAttribute', diagramLabelAttribute);
 		DOMPurify.addHook('afterSanitizeAttributes', diagramLabelContained);
 	}
-	if (fragment) options = {...options, RETURN_DOM_FRAGMENT: true};
+	// DOMPurify reparses a per-call configuration on every call (its cache compares its own copy), about 0.45 ms
+	// each in Chrome 155. A profile is set once and kept until another profile is asked for; every caller comes here.
+	if (purifyConfigured.get(DOMPurify) !== options) { DOMPurify.setConfig(options); purifyConfigured.set(DOMPurify, options); }
 	const previous = _rapierSanitizeRuntime.context;
 	_rapierSanitizeRuntime.context = selected;
 	try {
-		return DOMPurify.sanitize(value == null ? '' : String(value), options);
+		return DOMPurify.sanitize(value == null ? '' : String(value));
 	} finally {
 		if (labels) {
 			DOMPurify.removeHook('uponSanitizeElement', diagramLabelElement);
@@ -430,9 +437,11 @@ function escapeRapierHtmlText(value) {
 }
 
 function _rapierChromeOwnsId(id) {
-	// Every id the shell's own markup carries, read once before any document renders (initMarkdownIt primes it).
+	// Every id the shell's own markup carries, read once before any document renders (initMarkdownIt primes it),
+	// and every rapier- id: the chrome makes its dialogs, overlays, parts and plug-in list later, under that prefix
+	// (rapier-anchor- is the renderer's own name for a repeated document anchor, and stays the document's).
 	if (!_rapierSanitizeRuntime.chromeIds) _rapierSanitizeRuntime.chromeIds = new Set(Array.from(typeof document?.querySelectorAll === 'function' ? document.querySelectorAll('[id]') : [], element => element.id));
-	return _rapierSanitizeRuntime.chromeIds.has(String(id));
+	return _rapierSanitizeRuntime.chromeIds.has(String(id)) || /^rapier-(?!anchor-)/.test(id);
 }
 
 function _rapierSafeRasterDataUrl(value) {
@@ -522,6 +531,7 @@ function _rapierVerifyRasterBytes(bytes, mime) {
 	// declaration, doctype or generator/license comment before <svg itself, of whatever length its
 
 	if (mime === 'image/svg+xml') return /<svg[\s>]/i.test(new TextDecoder('utf-8', {fatal: false}).decode(bytes));
+	if (mime === 'image/gif') return bytes.length >= 13 && /^GIF8[79]a$/.test(String.fromCharCode(...bytes.subarray(0, 6)));
 	if (mime === 'image/png') return bytes.length >= 8 && bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4e && bytes[3] === 0x47 && bytes[4] === 0x0d && bytes[5] === 0x0a && bytes[6] === 0x1a && bytes[7] === 0x0a;
 	if (mime === 'image/jpeg') return bytes.length >= 3 && bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff;
 	if (mime === 'image/webp') return bytes.length >= 12 && String.fromCharCode(...bytes.slice(0, 4)) === 'RIFF' && String.fromCharCode(...bytes.slice(8, 12)) === 'WEBP';

package/dist/kit/render-styles.mjs

@@ -103,9 +103,9 @@ function _rapierArtifactStyles(theme, includeFonts, printMode, houseDefaults = f
 	const highlightCss = _rapierStyleText('rapier-highlight-style');
 	parts.push(highlightCss);
 	// A page written for the system theme has no body.light to switch: under a light system
-	// setting it takes the Standard palette's light values from the sheet's own body.light rule.
-	const light = theme === 'system' && /html\[data-highlights="standard"\] body\.light\s*\{([^}]*)\}/.exec(highlightCss);
-	if (light) parts.push('@media (prefers-color-scheme:light){html[data-rapier-theme="system"][data-highlights="standard"] body{' + light[1].trim() + '}}');
+	// setting each palette takes its light values from the sheet's own body.light rule.
+	if (theme === 'system') for (const [, palette, light] of highlightCss.matchAll(/html\[data-highlights="(standard|accent)"\] body\.light\s*\{([^}]*)\}/g))
+		parts.push('@media (prefers-color-scheme:light){html[data-rapier-theme="system"][data-highlights="' + palette + '"] body{' + light.trim() + '}}');
 	if (printMode) parts.push(_rapierArtifactPrintCss());
 	return parts.filter(Boolean).join('\n\n');
 }