rapier-markdown-kit 1.2.18 → 1.2.20

package/README.md

@@ -59,7 +59,7 @@ import {parseAssets} from 'rapier-markdown-kit/assets';   // the picture appendi
 Rapier is a phone-first Markdown editor for notes, diagrams, drawing and watercolor painting. It runs offline
 as one HTML file on Android, Web and Windows.
 
-1. **Work together live.** Connect to `https://mcp.rapier.website/mcp`, then call `open` to share one document with the person.
+1. **Work together live.** Connect to `https://mcp.rapier.website/door/mcp`, then call `open` to share one document with the person.
 2. **Deliver an offline editor.** Run `npx rapier-html notes.md` to put the document and editor in one HTML file ([rapier-html](https://github.com/jackskip22/rapier-plugins/tree/main/npm/rapier-html)).
 3. **Embed in your app.** Install [rapier-embed](https://github.com/jackskip22/rapier-plugins/tree/main/npm/rapier-embed); mount the editor or reader, with your app's agent over WebMCP in the editor.
 4. **Keep portable Markdown.** Use [rapier-markdown-kit](https://github.com/jackskip22/rapier-plugins/tree/main/npm/rapier-markdown-kit) for pictures, editable SVG drawings and layout in one `.md` file. Respect [Will/1](https://github.com/jackskip22/will) `keep`, `append` and `edit` regions.

package/dist/images/playback.mjs

@@ -1,5 +1,6 @@
 // SPDX-License-Identifier: MIT
 export function createMediaPlayback(win, inspectGIF) {
+  const FRAMES = 3600, LOOP_MS = 3600000;
   const active = new Map(), encode = bytes => bytes.toBase64();
   const bytes = async url => {
     const text = url.slice(url.indexOf(',') + 1), slice = 1 << 20;
@@ -14,7 +15,7 @@ export function createMediaPlayback(win, inspectGIF) {
   function raster(url, canvas, changed = () => {}, dimensions = null) {
     if (url.length > 24 * 1024 * 1024 || !/^data:image\/(gif|jxl);base64,/i.test(url) || (url.length - url.indexOf(',') - 1) % 4) throw new Error('Unsupported animation source');
     const type = url.slice(5, url.indexOf(';')).toLowerCase();
-    let data = null, info = null, size = null, decoder = null, timer = 0, closed = false, paused = true, ticket = 0, next = 0, loops = 0, duration = 0, single = false, held = false;
+    let data = null, info = null, size = null, decoder = null, timer = 0, closed = false, paused = true, ticket = 0, next = 0, loops = 0, duration = 0, single = false, held = false, due = 0;
     const state = {animated: true, status: 'loading', first: '', frames: 0};
     const admitted = (async () => {
       const buffer = await bytes(url); info = type === 'image/gif' ? inspectGIF(buffer) : null;
@@ -47,11 +48,12 @@ export function createMediaPlayback(win, inspectGIF) {
             state.status = 'playback-budget'; paused = true; changed(state); return;
           }
           active.set(canvas, size.width * size.height);
+          next = 0; duration = 0; due = 0;
           decoder = new win.ImageDecoder({data, type, preferAnimation: true});
           const current = decoder; await settle(current.tracks.ready);
           if (closed || paused || stamp !== ticket || decoder !== current) return;
           const track = current.tracks.selectedTrack;
-          if (!track || track.frameCount < 1 || track.frameCount > 240 || info && track.frameCount !== info.frames) throw new Error('Animation frame budget or container mismatch');
+          if (!track || track.frameCount < 1 || track.frameCount > FRAMES || info && track.frameCount !== info.frames) throw new Error('Animation frame budget or container mismatch');
           state.frames = track.frameCount; state.animated = track.animated;
         }
         const current = decoder, decoding = current.decode({frameIndex: next, completeFramesOnly: true});
@@ -62,13 +64,13 @@ export function createMediaPlayback(win, inspectGIF) {
         try {
           if (closed || paused || stamp !== ticket || decoder !== current) return;
           const w = frame.displayWidth, h = frame.displayHeight;
-          if (!result.complete || w !== size.width || h !== size.height || w * h * state.frames > 96000000) throw new Error('Decoded animation exceeds the image budget');
+          if (!result.complete || w !== size.width || h !== size.height) throw new Error('Decoded animation exceeds the image budget');
           if (canvas.width !== w) canvas.width = w;
           if (canvas.height !== h) canvas.height = h;
           const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, w, h); ctx.drawImage(frame, 0, 0);
           if (!state.first && next === 0) state.first = canvas.toDataURL('image/png');
           const delay = type !== 'image/gif' ? Math.max(8, frame.duration / 1000) : frame.duration > 10000 ? Math.max(20, frame.duration / 1000) : 100;
-          duration += delay; if (duration > 120000) throw new Error('Animation exceeds the duration budget');
+          duration += delay; if (duration > LOOP_MS) throw new Error('Animation exceeds the duration budget');
           state.status = 'ready'; state.frame = next; changed(state);
           if (single) {paused = true; closeDecoder(); return;}
           next++;
@@ -76,7 +78,8 @@ export function createMediaPlayback(win, inspectGIF) {
             next = 0; duration = 0; loops++;
             if (!state.animated || Number.isFinite(current.tracks.selectedTrack.repetitionCount) && loops > current.tracks.selectedTrack.repetitionCount) {paused = true; closeDecoder(); return;}
           }
-          timer = win.setTimeout(step, delay);
+          const now = win.performance.now(); due = due && now - due < 1000 ? due + delay : now + delay;
+          timer = win.setTimeout(step, Math.max(0, due - now));
         } finally {frame.close();}
       } catch (error) {
         if (closed || stamp !== ticket) return;
@@ -85,7 +88,7 @@ export function createMediaPlayback(win, inspectGIF) {
     }
     return {state, play() {if (!closed && paused && !['decode-failed', 'admission-failed'].includes(state.status)) {paused = false; void step();}},
       async first() {if (!state.first && !closed) {single = true; next = 0; paused = false; try {await step();} finally {single = false; paused = true; closeDecoder(); if (held) {held = false; this.suspend();}}} return state.first;},
-      pause() {paused = true; ticket++; win.clearTimeout(timer); timer = 0;},
+      pause() {paused = true; ticket++; win.clearTimeout(timer); timer = 0; due = 0;},
       suspend() {if (single) {held = true; return;} paused = true; closeDecoder(); canvas.width = canvas.height = 0; state.status = 'suspended'; changed(state);},
       close() {closed = true; paused = true; closeDecoder(); canvas.width = canvas.height = 0;},
       get paused() {return paused;}};

package/dist/kit/export-fonts.mjs

@@ -403,7 +403,7 @@ export async function waitForFonts(root, {settings, css = '', fontCss = '', inst
     for (const [css, name] of [['font-style', 'style'], ['font-weight', 'weight'], ['font-stretch', 'stretch'], ['unicode-range', 'unicodeRange']])
       if (record.properties[css]) descriptor[name] = record.properties[css];
     const bytes = Uint8Array.from(atob(record.source.slice(record.source.indexOf(',') + 1)), character => character.charCodeAt(0));
-    try { return await new Font(record.properties['font-family'], bytes, descriptor).load(); }
+    try { return await new Font(family, bytes, descriptor).load(); }
     catch (cause) { throw Object.assign(new Error('The embedded font could not be loaded: ' + family, {cause}), {code: 'export_font_unavailable'}); }
   }));
   if (install) for (const face of loaded) doc.fonts.add(face);

package/dist/kit/render-print.mjs

@@ -180,12 +180,12 @@ async function _rapierWritePrintPdf({root, css, fontCss = '', canonical, bom = f
 	if (!root?.ownerDocument || typeof capture !== 'function') refuse('pdf_render_unavailable');
 	const paper = settings?.papersize || {width: 11906, height: 16838};
 	const width = paper.width / 20, height = paper.height / 20;
-	const margin = settings?.geometry ? settings.geometry.twips / 20 : null;
-	const margins = {top: margin ?? 12 * 72 / 25.4, right: margin ?? 14 * 72 / 25.4,
-		bottom: margin ?? 14 * 72 / 25.4, left: margin ?? 14 * 72 / 25.4};
+	const margins = Object.fromEntries(['top', 'right', 'bottom', 'left'].map(side =>
+		[side, settings?.geometry ? settings.geometry[side] / 20 : (side === 'top' ? 12 : 14) * 72 / 25.4]));
 	const bodyWidth = Math.floor((width - margins.left - margins.right) * 4 / 3);
 	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');
+	if (bodyWidth < 1 || bodyHeight < 1) refuse('pdf_page_geometry_invalid');
+	const tiled = bodyWidth > CAPTURE_EDGE || bodyHeight > CAPTURE_EDGE || bodyWidth * bodyHeight > CAPTURE_PIXELS;
 	const frame = document.createElement('iframe');
 	let vectors, backdrop = null, nativeGlyphs, filmSession;
 	let rejectAbort;
@@ -320,7 +320,21 @@ async function _rapierWritePrintPdf({root, css, fontCss = '', canonical, bom = f
 			if (imageBytes > maxBytes) refuse('export_too_large');
 			pages.push({rgb: packed});
 		};
-		for (let first = 0; first < count;) {
+		const tileWidth = Math.min(bodyWidth, CAPTURE_EDGE), tileHeight = Math.min(bodyHeight, CAPTURE_EDGE, Math.floor(CAPTURE_PIXELS / tileWidth));
+		for (let index = 0; tiled && index < count; index++) {
+			const tiles = [];
+			for (let y = 0; y < bodyHeight; y += tileHeight) for (let x = 0; x < bodyWidth; x += tileWidth) {
+				check();
+				const width = Math.min(tileWidth, bodyWidth - x), height = Math.min(tileHeight, bodyHeight - y);
+				const shot = await step(filmSession.raster({x: index * bodyWidth + x, y, width, height}));
+				if (shot?.width !== width || shot?.height !== height || !(shot.rgb instanceof Uint8Array)) refuse('pdf_render_unavailable');
+				await pack(shot.rgb);
+				shot.rgb = null;
+				tiles.push({...pages.pop(), x, y, width, height});
+			}
+			pages.push({tiles});
+		}
+		for (let first = 0; !tiled && first < count;) {
 			check();
 			const span = Math.min(share, count - first);
 			try {
@@ -699,9 +713,10 @@ async function writeRasterPdf({pages, textPages, linkPages = [], vectorPages = [
 		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);
+		const tiles = held?.tiles || [{...(flate ? held : {jpeg: held}), x: 0, y: 0, width: pixelWidth, height: pixelHeight}];
+		const pictures = tiles.map((tile, at) => '/Im0_' + at + ' ' + stream('/Type /XObject /Subtype /Image /Width ' + tile.width + ' /Height ' + tile.height +
+			' /ColorSpace /DeviceRGB /BitsPerComponent 8 /Filter /' + (tile.rgb ? 'FlateDecode' : 'DCTDecode'), tile.rgb || tile.jpeg) + ' 0 R'), states = [];
 		pages[index] = null;
-		const pictures = ['/Im0 ' + picture + ' 0 R'], states = [];
 		const emit = (drawing, left, top, clipWidth, clipHeight) => {
 			let out = `q\n.75 0 0 -.75 ${decimal(left)} ${decimal(top)} cm\n0 0 ${clipWidth} ${clipHeight} re W n\n1 0 0 1 ${decimal(drawing.x)} 0 cm\n`;
 			out += [drawing.clip.x, drawing.clip.y, drawing.clip.width, drawing.clip.height].map(decimal).join(' ') + ' re W n\n';
@@ -729,7 +744,8 @@ async function writeRasterPdf({pages, textPages, linkPages = [], vectorPages = [
 		};
 		let commands = '';
 		for (const drawing of backdrop || []) commands += emit(drawing, 0, height, Math.round(width * 4 / 3), Math.round(height * 4 / 3));
-		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';
+		commands += '/Artifact BMC\n' + tiles.map((tile, at) => 'q\n' + [decimal(tile.width * .75), 0, 0, decimal(tile.height * .75), decimal(margins.left + tile.x * .75),
+			decimal(height - margins.top - (tile.y + tile.height) * .75)].join(' ') + ' cm\n/Im0_' + at + ' Do\nQ\n').join('') + 'EMC\n';
 		for (const drawing of vectorPages[index] || []) commands += emit(drawing, margins.left, height - margins.top, pixelWidth, pixelHeight);
 		const textAlphas = new Map();
 		for (const run of textPages[index]) {

package/dist/kit/render-styles.mjs

@@ -33,7 +33,7 @@ function _rapierArtifactPrintCss() {
 	html,body{
 		width:auto!important;height:auto!important;min-height:0!important;max-height:none!important;
 		margin:0!important;padding:0!important;overflow:visible!important;position:static!important;
-		background:#fff!important;color:#111!important;color-scheme:light
+		background:#fff!important;color:#111!important;color-scheme:light!important
 	}
 	.rapier-page{
 		display:block!important;width:100%!important;max-width:none!important;height:auto!important;
@@ -49,7 +49,7 @@ function _rapierDocumentPrintCss(hostSelector) {
 	return `
 @page{size:auto;margin:12mm 14mm 14mm}
 @media print{
-	${p('.md-render')}{--md-color-line:#000000!important}
+	${p('.md-render')}{color-scheme:light!important;--md-color-line:#000000!important}
 	${list('.md-render h1','.md-render h2','.md-render h3','.md-render h4','.md-render h5','.md-render h6')}{page-break-after:avoid;break-after:avoid-page;color:#111}
 	${list('.md-render p','.md-render li','.md-render blockquote')}{orphans:3;widows:3}
 	${p('.md-render img')}{max-width:100%!important;height:auto!important;break-inside:avoid-page}
@@ -97,8 +97,10 @@ function _rapierArtifactStyles(theme, includeFonts, printMode, houseDefaults = f
 :root,.md-render{--md-font-sans:'Geist','Geist/Roboto','Geist/Helvetica Neue','Geist/Segoe UI','Geist/Arial','Geist/Noto Sans','Geist/Ubuntu','Geist/Liberation Sans','Geist/DejaVu Sans',system-ui,sans-serif}`);
 	const highlightCss = _rapierStyleText('rapier-highlight-style');
 	parts.push(highlightCss);
-	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() + '}}');
+	for (const [, palette, light] of highlightCss.matchAll(/html\[data-highlights="(standard|accent)"\] body\.light\s*\{([^}]*)\}/g)) {
+		if (theme === 'system') parts.push('@media (prefers-color-scheme:light){html[data-rapier-theme="system"][data-highlights="' + palette + '"] body{' + light.trim() + '}}');
+		if (printMode) parts.push('@media print{html[data-highlights="' + palette + '"] body{' + light.trim() + '}}');
+	}
 	if (printMode) parts.push(_rapierArtifactPrintCss());
 	return parts.filter(Boolean).join('\n\n');
 }

package/dist/kit/render.mjs

@@ -48,6 +48,9 @@ function createRenderer(runtime) {
 async function _rapierBuildArtifact(options, providedContext) {
 	const opts = options || {};
 	const context = providedContext || _rapierBuildInterchangeContext(opts);
+	const preference = _rapierArtifactPreference('theme', ['system', 'light', 'dark']);
+	const theme = opts.print ? 'light' : preference === 'system'
+		? (globalThis.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : preference;
 	const metadata = context.metadata;
 	const base = context.baseName;
 	const work = context.work || opts.work;
@@ -110,7 +113,8 @@ async function _rapierBuildArtifact(options, providedContext) {
 	const styledRoot = work ? await _rapierProjectStyledRootAsync(context.semanticRoot, styledOptions)
 		: _rapierProjectStyledRoot(context.semanticRoot, styledOptions);
 	styledRoot.setAttribute('lang', language);
-	const templatePage = _rapierTemplatePage(context.canonical, settings, styledRoot);
+	const darkPaper = theme === 'dark' && _rapierArtifactPreference('invertImageAlpha', ['true', 'false']) !== 'false';
+	const templatePage = _rapierTemplatePage(context.canonical, settings, styledRoot, darkPaper);
 	if (completePage && typeof _rapierFinalizeExportCode === 'function') await _rapierFinalizeExportCode(styledRoot);
 	if (!opts.print) _rapierAnnotateExportBoxPolygons(styledRoot);
 	if (completePage || opts.print) {
@@ -123,9 +127,6 @@ async function _rapierBuildArtifact(options, providedContext) {
 	}
 	if (typeof opts.afterRoot === 'function') await opts.afterRoot(styledRoot);
 	markPrintCapitals(styledRoot);
-	const theme = opts.print || templatePage
-		? 'light'
-		: _rapierArtifactPreference('theme', ['system', 'light', 'dark']);
 	const highlights = _rapierArtifactPreference('highlights', ['accent', 'standard']);
 	const invertImageAlpha = _rapierArtifactPreference('invertImageAlpha', ['true', 'false']) !== 'false';
 	const versionMeta = document.querySelector('meta[name="rapier-version"]');
@@ -138,9 +139,10 @@ async function _rapierBuildArtifact(options, providedContext) {
 	const willFont = opts.print && opts.willFont ? opts.willFont : null;
 	const settingsCss = _rapierDocumentSettingsCss(settings);
 	const refined = styledRoot.querySelector('p[data-md-hyphens="auto"],p[data-md-lines],p[data-md-caps="small"],p[data-md-hanging="on"],img[data-rapier-print-lines]');
-	const printMargin = settings?.geometry ? settings.geometry.twips / 15 : 14 * 96 / 25.4;
-	const printWidth = settings?.papersize ? settings.papersize.width / 15 - 2 * printMargin : null;
-	const typographyPrintCss = refined ? '@media print{.md-render{--rapier-print-margin-left:' + printMargin + 'px;--rapier-print-margin-right:' + printMargin + 'px'
+	const printLeft = settings?.geometry ? settings.geometry.left / 15 : 14 * 96 / 25.4;
+	const printRight = settings?.geometry ? settings.geometry.right / 15 : 14 * 96 / 25.4;
+	const printWidth = settings?.papersize ? settings.papersize.width / 15 - printLeft - printRight : null;
+	const typographyPrintCss = refined ? '@media print{.md-render{--rapier-print-margin-left:' + printLeft + 'px;--rapier-print-margin-right:' + printRight + 'px'
 		+ (printWidth > 0 ? ';--rapier-print-width:' + printWidth + 'px' : '') + '}'
 		+ (printWidth > 0 ? '.rapier-page.md-render{width:' + printWidth + 'px!important}' : '') + '}' : '';
 	const pageTitle = settings && settings.title ? globalThis.RapierMarkdownSpec.documentTitle(settings) : metadata.filename;
@@ -194,7 +196,7 @@ async function _rapierBuildArtifact(options, providedContext) {
 		fontCss,
 		fontRequests: fontCss ? fontRequests(styledRoot, {settings, css, fontCss}) : [],
 		settings,
-		templatePage: templatePage && {url: templatePage.url, width: templatePage.width, height: templatePage.height, margin: templatePage.margin},
+		templatePage: templatePage && {url: templatePage.url, width: templatePage.width, height: templatePage.height, margins: templatePage.margins},
 		docClass,
 		language,
 		metadata,
@@ -202,7 +204,7 @@ async function _rapierBuildArtifact(options, providedContext) {
 	};
 }
 
-function _rapierTemplatePage(canonical, settings, root) {
+function _rapierTemplatePage(canonical, settings, root, darkPaper = false) {
 	if (!isTemplatePage(canonical) || !settings?.papersize) return null;
 	let url = '';
 	for (const paragraph of root.querySelectorAll(':scope > p[data-md-layout]')) {
@@ -212,15 +214,31 @@ function _rapierTemplatePage(canonical, settings, root) {
 		if (isPageBorderLayout(layout) && /^data:image\/svg\+xml;base64,[A-Za-z0-9+/=]+$/.test(source)) { url = source; paragraph.remove(); break; }
 	}
 	if (!url) return null;
-	const width = settings.papersize.width / 15, height = settings.papersize.height / 15, margin = (settings.geometry?.twips ?? 1440) / 15;
+	const width = settings.papersize.width / 15, height = settings.papersize.height / 15;
+	const margins = ['top', 'right', 'bottom', 'left'].map(side => (settings.geometry?.[side] ?? 1440) / 15);
+	const padding = margins.map(value => value + 'px').join(' ');
 	const ground = 'background:var(--rapier-template-border) 0 0/100% 100% no-repeat';
+	const shown = darkPaper ? _rapierDarkPaperSvgUrl(url, '#fafafa') : url;
 	const css = ':root{--rapier-template-border:url("' + url + '")}\n'
-		+ '@media screen{.rapier-template-border{display:none}body{background:#e8e8e8}.rapier-page{box-sizing:border-box;width:min(100%,' + width + 'px);min-height:' + height + 'px;margin:0 auto;padding:' + margin
-		+ 'px;background:var(--rapier-template-border) 0 0/100% ' + height + 'px repeat-y,#fff;color:#111}}\n'
+		+ '@media screen{' + (shown !== url ? ':root{--rapier-template-border:url("' + shown + '")}' : '') + '.rapier-template-border{display:none}body{background:var(--md-color-inset)}.rapier-page{box-sizing:border-box;width:min(100%,' + width + 'px);min-height:' + height + 'px;margin:0 auto;padding:' + padding
+		+ ';background:var(--rapier-template-border) 0 0/100% ' + height + 'px repeat-y,var(--md-color-bg);color:var(--md-color-text)}}\n'
 		+ '@media print{@page{size:' + width + 'px ' + height + 'px;margin:0}html,body{margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}'
-		+ '.rapier-page{box-sizing:border-box;width:auto;max-width:none;margin:0;padding:' + margin + 'px!important;position:relative!important;z-index:1;box-decoration-break:clone;-webkit-box-decoration-break:clone}'
+		+ '.rapier-page{box-sizing:border-box;width:auto;max-width:none;margin:0;padding:' + padding + '!important;position:relative!important;z-index:1;box-decoration-break:clone;-webkit-box-decoration-break:clone}'
 		+ '.rapier-template-border{display:block;position:fixed;left:0;top:0;width:' + width + 'px;height:' + height + 'px;z-index:0;' + ground + '}}';
-	return {url, width, height, margin, css};
+	return {url, width, height, margins, css};
+}
+
+function _rapierDarkPaperSvgUrl(url, paperInk) {
+	const ink = globalThis.RapierImageInspection?.inkForPaper;
+	if (typeof ink !== 'function') return url;
+	let text;
+	try { text = new TextDecoder('utf-8', {fatal: true}).decode(Uint8Array.from(atob(url.slice(26)), c => c.charCodeAt(0))); }
+	catch (_) { return url; }
+	const inked = ink(text, {dark: true, paperInk});
+	if (inked === text) return url;
+	let binary = '';
+	for (const byte of new TextEncoder().encode(inked)) binary += String.fromCharCode(byte);
+	return 'data:image/svg+xml;base64,' + btoa(binary);
 }
 
 function _rapierPagePreviewMeta(root, fallbackTitle) {
@@ -346,7 +364,8 @@ function _rapierDocxRenderStyles(root) {
 		const sheet = into.createElement('style');
 		sheet.textContent = _rapierArtifactStyles('light', false, false);
 		into.head.appendChild(sheet);
-		const surface = into.createElement('div'); surface.className = 'md-render'; into.body.appendChild(surface);
+		const surface = into.createElement('div'); surface.className = 'md-render';
+		surface.setAttribute('data-md-theme', 'light'); into.body.appendChild(surface);
 		const canvas = into.createElement('canvas'); canvas.width = canvas.height = 1;
 		const paint = canvas.getContext('2d'), colours = new Map();
 		if (!paint) throw new Error('Word text colors could not be read.');

package/dist/spec/document-settings.mjs

@@ -119,7 +119,16 @@ const PAPERS = Object.freeze({
 	a4: Object.freeze({name: 'a4', width: 11906, height: 16838, css: 'A4'}),
 	a5: Object.freeze({name: 'a5', width: 8391, height: 11906, css: 'A5'}),
 	legal: Object.freeze({name: 'legal', width: 12240, height: 20160, css: 'legal'}),
+	tabloid: Object.freeze({name: 'tabloid', width: 15840, height: 24480, css: '11in 17in'}),
+	a3: Object.freeze({name: 'a3', width: 16838, height: 23811, css: 'A3'}),
 });
+function paperOf(value) {
+	const name = String(value || '').toLowerCase(), named = Object.hasOwn(PAPERS, name) ? PAPERS[name] : null;
+	if (named) return named;
+	const pixels = /^(\d{3,5})x(\d{3,5})px$/.exec(name), width = Number(pixels?.[1]), height = Number(pixels?.[2]);
+	return pixels && width <= 10000 && height <= 10000 ? Object.freeze({name, width: width * 15, height: height * 15, css: width + 'px ' + height + 'px'}) : null;
+}
+export const PAGE_SIZES = Object.freeze(['letter', 'legal', 'tabloid', 'a3', 'a4', 'a5', '1080x1080px', '1080x1350px', '1920x1080px', '1200x630px']);
 const EMPTY = Object.freeze({
 	title: null, subtitle: null, lang: null, fontsize: null, mainfont: null, sansfont: null, monofont: null, defaultfont: null, linestretch: null,
 	papersize: null, geometry: null, pagestyle: null, spacing: null,
@@ -131,14 +140,21 @@ function unquote(value) {
 }
 
 function marginOf(value) {
-	const match = /^margin\s*=\s*(\d+(?:\.\d+)?)(cm|mm|in|pt)$/i.exec(unquote(value));
-	if (!match) return null;
-	const number = Number(match[1]);
-	if (!Number.isFinite(number) || number < 0) return null;
-	const unit = match[2].toLowerCase();
-	const twips = Math.round(unit === 'in' ? number * 1440 : unit === 'pt' ? number * 20 : unit === 'cm' ? number * 1440 / 2.54 : number * 1440 / 25.4);
-	if (!Number.isSafeInteger(twips) || twips < 0 || twips > 1440 * 6) return null;
-	return Object.freeze({margin: match[1] + unit, twips});
+	const lengths = new Map();
+	for (const part of unquote(value).split(',')) {
+		const match = /^\s*(margin|top|right|bottom|left)\s*=\s*(\d+(?:\.\d+)?)(cm|mm|in|pt)\s*$/i.exec(part);
+		if (!match) return null;
+		const key = match[1].toLowerCase(), number = Number(match[2]), unit = match[3].toLowerCase();
+		const twips = Math.round(unit === 'in' ? number * 1440 : unit === 'pt' ? number * 20 : unit === 'cm' ? number * 1440 / 2.54 : number * 1440 / 25.4);
+		if (lengths.has(key) || !Number.isSafeInteger(twips) || twips < 0 || twips > 1440 * 6) return null;
+		lengths.set(key, {css: match[2] + unit, twips});
+	}
+	const sides = ['top', 'right', 'bottom', 'left'].map(key => lengths.get(key) || lengths.get('margin'));
+	if (sides.some(side => !side)) return null;
+	const [top, right, bottom, left] = sides.map(side => side.twips);
+	const uniform = sides.every(side => side.twips === top);
+	return Object.freeze({margin: uniform ? sides[0].css : sides.map(side => side.css).join(' '),
+		twips: uniform ? top : null, top, right, bottom, left});
 }
 
 function quotedEnd(text, start = 0, limit = text.length) {
@@ -327,7 +343,7 @@ export function readDocumentSettings(markdown) {
 	const monofont = documentFont(take('monofont'));
 	const defaultfont = documentFont(take('defaultfont'));
 	const linestretch = leading(take('linestretch'));
-	const papersize = PAPERS[String(take('papersize') || '').toLowerCase()] || null;
+	const papersize = paperOf(take('papersize'));
 	const geometry = take('geometry') != null ? marginOf(take('geometry')) : null;
 	const page = String(take('pagestyle') || '').toLowerCase();
 	return Object.freeze({
@@ -352,14 +368,14 @@ export function updateDocumentSettings(markdown, patch) {
 		text: (source[field.start - 1] === ':' ? ' ' : '') + text + (source[field.end] === '#' ? ' ' : '')});
 	for (const [key, supplied] of Object.entries(patch || {})) {
 		const font = ['mainfont', 'sansfont', 'monofont', 'defaultfont'].includes(key);
-		if (!font && !['fontsize', 'linestretch', 'spacing'].includes(key)) throw new TypeError('Unknown document setting: ' + key);
+		if (!font && !['fontsize', 'linestretch', 'spacing', 'geometry', 'papersize'].includes(key)) throw new TypeError('Unknown document setting: ' + key);
 		const matches = fields.filter(item => item.key === key);
 		if (matches.length > 1) throw new RangeError('Duplicate document setting: ' + key);
 		const field = matches[0];
-		const value = supplied === null ? null : font ? documentFont(supplied) : key === 'fontsize' ? fontSize(supplied) : key === 'spacing' ? normalizeDocumentSpacing(supplied) : leading(supplied);
+		const value = supplied === null ? null : font ? documentFont(supplied) : key === 'fontsize' ? fontSize(supplied) : key === 'spacing' ? normalizeDocumentSpacing(supplied) : key === 'geometry' ? marginOf(supplied) : key === 'papersize' ? paperOf(supplied) : leading(supplied);
 		if (supplied !== null && !value) throw new TypeError('Invalid document setting: ' + key);
-		const encoded = value === null ? '' : font ? JSON.stringify(value.family) : key === 'fontsize' ? value.step : key === 'spacing' ? JSON.stringify(value) : String(value.factor);
-		if (value !== null && before[key] && (font ? before[key].family === value.family : key === 'fontsize' ? same(before.fontsize.unit, value.unit) : key === 'spacing' ? JSON.stringify(before.spacing) === encoded : before.linestretch.factor === value.factor)) continue;
+		const encoded = value === null ? '' : font ? JSON.stringify(value.family) : key === 'fontsize' ? value.step : key === 'spacing' ? JSON.stringify(value) : key === 'geometry' ? unquote(supplied).trim() : key === 'papersize' ? value.name : String(value.factor);
+		if (value !== null && before[key] && (font ? before[key].family === value.family : key === 'fontsize' ? same(before.fontsize.unit, value.unit) : key === 'spacing' ? JSON.stringify(before.spacing) === encoded : key === 'geometry' ? ['top', 'right', 'bottom', 'left'].every(side => before.geometry[side] === value[side]) : key === 'papersize' ? before.papersize.name === value.name : before.linestretch.factor === value.factor)) continue;
 		if (key === 'fontsize' && value !== null && fontSize(encoded)?.unit !== value.unit) refuse(key);
 		if (!field) { if (value !== null) append.push(key + ': ' + encoded + eol); continue; }
 		if (field.opaque || field.invalid || field.multiline || field.block) refuse(key);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rapier-markdown-kit",
-  "version": "1.2.18",
+  "version": "1.2.20",
   "description": "Read, render and write Self-contained Markdown: one .md file that carries its pictures, drawings and layout, and that any Markdown app can read. HTML renderer, stylesheet, text layout, Will/1 agent permissions, and an edit history with authorship and offline merge. MIT, no dependencies.",
   "keywords": [
     "markdown",