rapier-markdown-kit 1.2.31 → 1.2.33

package/dist/layout/typography.mjs

@@ -308,10 +308,27 @@ export function createTypography() {
     return {key: keys.join('\u0000'), generation:keys[0], styles, parents, supported};
   }
 
+  function smallCapsAsPlanned(paragraph, text, inspection) {
+    if (paragraph.getAttribute('data-md-caps') !== 'small') return true;
+    const doc = paragraph.ownerDocument, style = inspection.styles.get(paragraph);
+    if (!style || !doc.body) return false;
+    const probe = caps => {
+      const span = doc.createElement('span');
+      span.style.cssText = 'position:absolute;visibility:hidden;white-space:pre;left:0;top:0;font-synthesis-small-caps:none;font-variant-caps:' + caps;
+      for (const name of ['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'fontStretch', 'letterSpacing', 'fontKerning', 'fontFeatureSettings'])
+        span.style[name] = style[name];
+      span.textContent = text.trim().slice(0, 80);
+      doc.body.append(span);
+      const width = span.getBoundingClientRect().width;
+      span.remove();
+      return width;
+    };
+    return Math.abs(probe('small-caps') - probe('normal')) < .01;
+  }
+
   function snapshot(paragraph, inspection) {
     const text = paragraph.textContent, language = paragraph.closest('[lang]')?.getAttribute('lang') ?? '';
-    if (!inspection.supported || !text.trim() || paragraph.hasAttribute('data-md-lines') ||
-        paragraph.getAttribute('data-md-caps') === 'small' || paragraph.closest('[data-rapier-published-ink]') ||
+    if (!inspection.supported || !text.trim() || !smallCapsAsPlanned(paragraph, text, inspection) || paragraph.closest('[data-rapier-published-ink]') ||
         /[^\p{Script=Latin}\p{Script=Greek}\p{Script=Cyrillic}\p{Script=Common}\p{Script=Inherited}]/u.test(text) ||
         /[\u061c\u200e\u200f\u2028-\u202e\u2066-\u2069]/u.test(text)) return null;
     const hard = [], items = runs(paragraph, hard), atoms = [];
@@ -425,6 +442,24 @@ export function createTypography() {
       shape.box.height, shape.points.join(' ')].join(':')).join('|')};
   }
 
+  function dropMeasure(paragraph, view, width) {
+    if (!paragraph.hasAttribute('data-md-lines')) return null;
+    const letter = view.getComputedStyle(paragraph, '::first-letter');
+    const lines = Math.ceil(parseFloat(letter.initialLetter)), initial = initialRange(paragraph);
+    const advance = ['width', 'marginLeft', 'marginRight', 'paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth']
+      .reduce((sum, name) => sum + (parseFloat(letter[name]) || 0), 0);
+    const at = initial && point(runs(paragraph), initial.start);
+    if (!letter.initialLetter) return {refuse: true};
+    if (!(lines > 1)) return null;
+    if (!(advance > 0 && advance < width) || !at?.node.parentElement) return {refuse: true};
+    const style = view.getComputedStyle(at.node.parentElement), context = paragraph.ownerDocument.createElement('canvas').getContext('2d');
+    context.font = style.fontStyle + ' ' + style.fontWeight + ' ' + style.fontSize + ' ' + style.fontFamily;
+    context.letterSpacing = style.letterSpacing;
+    const text = paragraph.textContent, word = text.slice(initial.start, initial.start + (/\s/u.exec(text.slice(initial.start))?.index ?? text.length));
+    const lead = context.measureText(word).width - context.measureText(word.slice(initial.text.length)).width;
+    return {lines, advance, lead};
+  }
+
   const topology = plan => plan && plan.lines.map(line => [line.start,line.end,line.next,line.kind,line.glyph].join(':')).join('|');
   function updateProjection(projection, plan) {
     for (const {node,property,line,sign} of projection.bindings) {
@@ -517,13 +552,6 @@ export function createTypography() {
     return Math.abs(inner - job.plan.lines.length * job.beside.lineHeight) < 1;
   }
 
-  function editKey(paragraph, generation) {
-    const page = paragraph.ownerDocument.documentElement;
-    return [generation, paragraph.innerHTML, ...[...paragraph.attributes].map(item => item.name + '=' + item.value),
-      ...[...page.attributes].map(item => item.name + '=' + item.value), paragraph.ownerDocument.body?.className,
-      paragraph.ownerDocument.defaultView.innerWidth].join('\u0000');
-  }
-
   function apply(root, {all=false, editing=false}={}) {
     const started = performance.now();
     const generation = captureFontAuthority(root?.ownerDocument || globalThis.document);
@@ -533,31 +561,40 @@ export function createTypography() {
     }
     const jobs=[];let pending=false,changed=0,released=0,preparedCount=0;
     for (const paragraph of paragraphs(root)) {
+      if (paragraph.dataset.rapierFlow==='true') continue;
       if (paragraph.closest('table,pre,code,h1,h2,h3,h4,h5,h6')) {clear(paragraph);continue;}
       if (paragraph.closest('.block-edit')) {
         if (!editing) continue;
-        if (paragraph.getAttribute('data-md-align')!=='justify' || paragraph.getAttribute('data-md-hyphens')!=='auto') {
-          if (paragraph.hasAttribute(mark)) clear(paragraph);
-          protectInitial(paragraph);continue;
-        }
+        if (paragraph.hasAttribute(mark)) clear(paragraph);
+        protectInitial(paragraph);
+        continue;
       }
       else if (paragraph.isContentEditable && !paragraph.closest('.block-read')) {clear(paragraph);continue;}
       if (!paragraph.isConnected || !all && paragraph.checkVisibility && !paragraph.checkVisibility({contentVisibilityAuto:true})) continue;
       const view=paragraph.ownerDocument.defaultView;
       if (!view || !paragraph.getClientRects().length) continue;
-      if (editing && states.get(paragraph)?.editKey===editKey(paragraph,generation)) continue;
       const style=view.getComputedStyle(paragraph),box=paragraph.getBoundingClientRect(),prior=states.get(paragraph);
       if (!all && (box.bottom < -100 || box.top > view.innerHeight+100)) continue;
       const hanging=paragraph.getAttribute('data-md-hanging')==='on',size=dimensions(paragraph,style,box,hanging);
       if (!(size.width>0)) continue;
+      if (paragraph.getAttribute('data-md-align')!=='justify') {size.shrink=0;size.stretch=0;}
       const beside=floatMeasures(paragraph,style,box,size.width);
       if (beside?.refuse) {clear(paragraph);continue;}
       if (beside?.widths.some(width=>!(width>0))) {clear(paragraph);continue;}
       if (beside) size.widths=beside.widths;
+      const drop=dropMeasure(paragraph,view,size.width);
+      if (drop?.refuse) {clear(paragraph);continue;}
+      if (drop) {
+        const widths=[...(size.widths||[])];
+        while (widths.length<drop.lines) widths.push(size.width);
+        for (let line=0;line<drop.lines;line++) widths[line]=Math.floor((widths[line]-drop.advance+(line?0:drop.lead))*64)/64;
+        if (widths.some(value=>!(value>0))) {clear(paragraph);continue;}
+        size.widths=widths;
+      }
       const parents=prior?.parents || own(paragraph);
       const inspection=inspect(paragraph,parents,prior,style);
       const reusable=prior?.html===paragraph.innerHTML && prior.key===inspection.key && (!prior.geometry || scope(paragraph.ownerDocument).current(prior.geometry));
-      const sizeKey=[size.width,size.indent,size.left,size.right,beside?.key||''].join('|');
+      const sizeKey=[size.width,size.indent,size.left,size.right,beside?.key||'',drop?drop.lines+'/'+drop.advance+'/'+drop.lead:''].join('|');
       if (refused.get(paragraph)===sizeKey+'\u0000'+paragraph.textContent) {if (paragraph.hasAttribute(mark)) clear(paragraph);continue;}
       if (reusable && !prior.pending && prior.sizeKey===sizeKey) continue;
       const fitWork=reusable && prior.sizeKey===sizeKey?prior.fitWork:null;
@@ -565,12 +602,12 @@ export function createTypography() {
       if (!all && jobs.length===4) {if (!reusable) clear(paragraph);pending=true;continue;}
       jobs.push({paragraph,view,style,inspection,size,sizeKey,hanging,beside,selected:selectionBefore(paragraph),
         cap:paragraph.hasAttribute('data-md-lines'),justified:paragraph.getAttribute('data-md-align')==='justify' && paragraph.getAttribute('data-md-hyphens')==='auto',
+        ragged:paragraph.getAttribute('data-md-align')!=='justify' && paragraph.getAttribute('data-md-hyphens')==='auto' && /^(start|left)$/.test(style.textAlign),
         saved:reusable?prior.saved:null,geometry:reusable?prior.geometry:null,prepared:reusable?prior.prepared:null,
         work:reusable?prior.work:null,fitWork,
         prior,reusable,needsClear:paragraph.hasAttribute(mark)});
     }
-    if (editing && jobs.some(job=>job.selected && !job.reusable)) root.ownerDocument.getSelection()?.removeAllRanges();
-    for (const job of jobs) if (job.needsClear && !job.saved) clear(job.paragraph,{keepSelection:!editing});
+    for (const job of jobs) if (job.needsClear && !job.saved) clear(job.paragraph);
     function stateFor(job) {
       return {properties:new Map(),moves:[],saved:job.saved,geometry:job.geometry,prepared:job.prepared,plan:job.plan,
         work:job.work,fitWork:job.fitWork,parents:job.inspection.parents,key:job.inspection.key,generation:job.inspection.generation,sizeKey:job.sizeKey};
@@ -584,12 +621,8 @@ export function createTypography() {
     for (let jobIndex = 0; jobIndex < jobs.length; jobIndex++) {
       if (!all && jobIndex && performance.now() - started >= 8) {pending=true;break;}
       const job = jobs[jobIndex];
-      if (!job.saved && job.justified) {
-        if (job.needsClear) {
-          const elements=own(job.paragraph),parents=job.inspection.parents;
-          if (!editing || !job.prior?.saved || elements.length!==parents.length || elements.some((element,index)=>element!==parents[index]))
-            job.inspection=inspect(job.paragraph,elements,null,job.view.getComputedStyle(job.paragraph));
-        }
+      if (!job.saved && (job.justified || job.ragged)) {
+        if (job.needsClear) job.inspection=inspect(job.paragraph,own(job.paragraph),null,job.view.getComputedStyle(job.paragraph));
         job.saved=snapshot(job.paragraph,job.inspection);
         if (job.saved) {
           job.work=scope(job.paragraph.ownerDocument).prepareSteps(job.paragraph,job.saved.inline,{policy:'paragraph',language:job.saved.language,
@@ -611,15 +644,15 @@ export function createTypography() {
       if (job.fitWork) {
         for (;;) {
           const step=job.fitWork.next();
-          if (step.done) {job.plan=step.value;job.fitWork=null;break;}
+          if (step.done) {job.plan=job.ragged && step.value ? Object.freeze({...step.value,lines:Object.freeze(step.value.lines.map(line=>Object.freeze({...line,wordSpacing:0})))}) : step.value;job.fitWork=null;break;}
           if (!all && performance.now()-started>=8) break;
         }
         if (job.fitWork) {suspend(job);continue;}
       }
       job.projection=job.reusable && job.plan && job.prior?.projection?.topology===topology(job.plan) ? job.prior.projection : null;
-      if (job.needsClear && job.saved && !job.projection) clear(job.paragraph,{forget:false,keepSelection:!editing});
-      const {paragraph,view,hanging,cap,justified}=job;
-      if (!cap && !hanging && !justified) {restoreSelection(paragraph,job.selected);continue;}
+      if (job.needsClear && job.saved && !job.projection) clear(job.paragraph,{forget:false});
+      const {paragraph,view,hanging,cap,justified,ragged}=job;
+      if (!cap && !hanging && !justified && !ragged) {restoreSelection(paragraph,job.selected);continue;}
       const state=stateFor(job);
       states.set(paragraph,state);live.add(paragraph);paragraph.setAttribute(mark,'');
       if (cap || hanging) protectInitial(paragraph);
@@ -631,6 +664,7 @@ export function createTypography() {
       }
       if (job.projection) {updateProjection(job.projection,job.plan);state.projection=job.projection;}
       else if (job.plan) state.projection=project(paragraph,job.saved,job.geometry,job.plan);
+      paragraph.toggleAttribute(mark+'-ragged',!!ragged && !!state.projection);
       if (state.projection && job.beside && !laidAsPlanned(paragraph,job)) {
         refused.set(paragraph,job.sizeKey+'\u0000'+paragraph.textContent);clear(paragraph);restoreSelection(paragraph,job.selected);continue;
       }
@@ -638,18 +672,103 @@ export function createTypography() {
       else if (hanging) hangPunctuation(paragraph,state,job.style,hangingEdge(paragraph,job.style,paragraph.getBoundingClientRect()));
       state.html=paragraph.innerHTML;
       restoreSelection(paragraph,job.selected);changed++;
-      if (editing) state.editKey=editKey(paragraph,generation);
     }
     return {changed,released,pending,prepared:preparedCount};
   }
 
+  const slotPlans = new WeakMap();
+  function slotPlan(paragraph, items, options, input) {
+    const {width, top, obstacles, lineHeight, minWidth, justify, hyphenate} = input;
+    const round = value => Math.round(value * 100) / 100;
+    const key = [captureFontAuthority(paragraph.ownerDocument), width, lineHeight, minWidth, justify, hyphenate, options.language, options.wordBreak,
+      items.map(item => [item.text, item.font, item.letterSpacing, item.break, item.extraWidth].join('\u0001')).join('\u0002'),
+      obstacles.map(item => [item.x, item.y - top, item.width, item.height].map(round).join(',')).join(';')].join('\u0000');
+    const known = slotPlans.get(paragraph);
+    if (known?.key === key) return known.plan;
+    const plan = slotLines(paragraph, items, options, input);
+    slotPlans.set(paragraph, {key, plan});
+    return plan;
+  }
+  function slotLines(paragraph, items, options, {width, top, obstacles, lineHeight, minWidth, slotsForBand, justify, hyphenate}) {
+    if (!obstacles.length) return null;
+    const doc = paragraph.ownerDocument, words = scope(doc);
+    const source = items.map(item => ({...item, hyphenate}));
+    const geometry = words.prepare(paragraph, source, {policy: 'paragraph', language: options.language, whiteSpace: 'normal',
+      wordBreak: options.wordBreak, hanging: false, paragraphBreaks: [0, source.length]});
+    if (!geometry) return null;
+    const sequence = [], bottom = Math.max(...obstacles.map(item => item.y + item.height)) - top;
+    let y = 0, rows = 0;
+    while (y < bottom && rows < 512 && sequence.length < 1024) {
+      const bands = slotsForBand(width, obstacles, top + y, lineHeight, Math.min(minWidth, width));
+      if (!bands) return null;
+      if (bands.length) {
+        for (const band of bands) sequence.push({x: band.x, y, width: band.width});
+        y += lineHeight; rows++; continue;
+      }
+      let next = Infinity;
+      for (const obstacle of obstacles) if (obstacle.x < width && obstacle.x + obstacle.width > 0 &&
+          obstacle.y < top + y + lineHeight && obstacle.y + obstacle.height > top + y) next = Math.min(next, obstacle.y + obstacle.height - top);
+      if (!Number.isFinite(next) || next <= y) return null;
+      y = next;
+    }
+    const prepared = fitter.prepare(geometry);
+    let slots = sequence, plan = null;
+    for (let pass = 0; prepared && pass < 8; pass++) {
+      const measures = slots.map(slot => Math.floor(slot.width * 64) / 64);
+      if (!measures.length) return null;
+      plan = words.fit(paragraph, geometry, known => fitter.solveSteps(prepared, width, {widths: measures, shrink: justify ? undefined : 0}, known));
+      if (!plan) return null;
+      const wide = new Set();
+      plan.lines.forEach((line, index) => {
+        if (index >= slots.length || line.firstWord !== line.lastWord || line.kind === 'soft' || line.kind === 'auto') return;
+        const word = geometry.segments[line.segment].words[line.firstWord];
+        if (line.start === word.start && line.end === word.end && word.width > measures[index] + .5) wide.add(slots[index]);
+      });
+      if (!wide.size) break;
+      slots = slots.filter(slot => !wide.has(slot)); plan = null;
+    }
+    const perRow = new Map();
+    for (const slot of slots) perRow.set(slot.y, (perRow.get(slot.y) || 0) + 1);
+    if (!plan || ![...perRow.values()].some(count => count > 1)) return null;
+    const lines = [], text = geometry.text, offsets = geometry.offsets, space = /^[\t\n\f\r ]*$/;
+    for (let index = 0; index < plan.lines.length; index++) {
+      const line = plan.lines[index], slot = sequence[index] || {x: 0, y: y + (index - sequence.length) * lineHeight, width};
+      const spacing = justify ? line.wordSpacing : 0, fragments = [];
+      const segment = geometry.segments[line.segment].words.slice(line.firstWord, line.lastWord + 1);
+      let at = 0, previous = null;
+      while (at < source.length - 1 && offsets[at + 1] <= line.start) at++;
+      for (; at < source.length && offsets[at] < line.end; at++) {
+        let from = Math.max(line.start, offsets[at]), to = Math.min(line.end, offsets[at + 1]);
+        if (previous) while (from < to && /[\t\n\f\r ]/.test(text[from])) from++;
+        if (offsets[at + 1] < line.end) while (to > from && /[\t\n\f\r ]/.test(text[to - 1])) to--;
+        if (to <= from) continue;
+        const fragment = {itemIndex: at, sourceStart: from - offsets[at], sourceEnd: to - offsets[at], derive: true, occupiedWidth: 0, gapItemIndex: at, gapBefore: 0};
+        if (previous) {
+          fragment.gapItemIndex = previous.itemIndex;
+          if (previous.end < from) {
+            if (!space.test(text.slice(previous.end, from))) return null;
+            const before = segment.find(word => word.end === previous.end);
+            if (!before?.gap) return null;
+            fragment.gapBefore = before.gap.width + spacing;
+          } else fragment.gapBefore = 0;
+        }
+        fragments.push(fragment); previous = {itemIndex: at, end: to};
+      }
+      if (!fragments.length) return null;
+      if (line.kind === 'soft' || line.kind === 'auto') fragments.at(-1).glyph = line.glyph || '-';
+      lines.push({x: slot.x, y: slot.y, width: slot.width, fragments, wordSpacing: spacing});
+    }
+    const last = lines.at(-1);
+    return {lines, height: last ? Math.max(lineHeight, last.y + lineHeight) : lineHeight};
+  }
+
   function retire(root, {documentChanged=false}={}) {
     clear(root);
     for (const paragraph of live) if (!paragraph.isConnected) clear(paragraph);
     scope(root?.ownerDocument || root || globalThis.document).retire({documentChanged});
   }
   const invalidateFonts = document => scope(document || globalThis.document).invalidateFonts();
-  return {apply,clear,clearSelection,firstLineEnd,initialRange,protectInitial,invalidateFonts,retire};
+  return {apply,clear,clearSelection,firstLineEnd,initialRange,protectInitial,invalidateFonts,retire,slotPlan};
 }
 
 const typography = createTypography();
@@ -661,3 +780,4 @@ export const initialRange = typography.initialRange;
 export const protectInitial = typography.protectInitial;
 export const invalidateFonts = typography.invalidateFonts;
 export const retire = typography.retire;
+export const slotPlan = typography.slotPlan;

package/dist/spec/document-fonts.mjs

@@ -216,6 +216,11 @@ export function documentFontUsage(markdown, parser, defaultFont) {
 	for (const token of md.parse(splitOpeningFrontmatter(source).body, {})) {
 		if (token.type === 'heading_open') blockFamily = sans;
 		else if (token.type === 'heading_close' || token.type === 'paragraph_open') blockFamily = main;
+		else if (token.type === 'fence' && /^html(?:\s+\{[^{}]*\})?\s*$/i.test(token.info)) {
+			const text = plain(token.content);
+			add(blockFamily, text);
+			for (const name of htmlFontFamilies(token.content, md)) add(name, text);
+		}
 		else if (token.type === 'fence' || token.type === 'code_block') add(mono, token.content);
 		else if (token.type === 'html_block') {
 			const text = plain(token.content);

package/dist/spec/document-settings.mjs

@@ -128,10 +128,11 @@ function paperOf(value) {
 	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 pageSizeOf = settings => settings?.papersize || PAPERS.letter;
 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,
+	papersize: null, geometry: null, pagestyle: null, spacing: null, template: null,
 });
 
 function unquote(value) {
@@ -351,6 +352,7 @@ export function readDocumentSettings(markdown) {
 		fontsize, mainfont, sansfont, monofont, defaultfont, linestretch, papersize, geometry,
 		spacing: normalizeDocumentSpacing(take('spacing')),
 		pagestyle: page === 'plain' || page === 'empty' ? page : null,
+		template: String(take('template') || '').toLowerCase() === 'page' ? 'page' : null,
 	});
 }
 
@@ -368,14 +370,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', 'geometry', 'papersize'].includes(key)) throw new TypeError('Unknown document setting: ' + key);
+		if (!font && !['fontsize', 'linestretch', 'spacing', 'geometry', 'papersize', 'pagestyle'].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) : key === 'geometry' ? marginOf(supplied) : key === 'papersize' ? paperOf(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) : key === 'pagestyle' ? (['plain', 'empty'].includes(supplied) ? {name: supplied} : null) : 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) : 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;
+		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' || key === 'pagestyle' ? 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 : key === 'pagestyle' ? before.pagestyle === 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/dist/spec/html-blocks.mjs

@@ -53,7 +53,7 @@ export function htmlFence(raw) {
   const tail = raw.slice(end), attached = /^(\r?\n)(<!--md-layout:v1[^\r\n]*-->)(?:\r?\n)?$/.exec(tail);
   const layout = attached && parseLayout(attached[2]);
   if (tail.trim() && !layout) return null;
-  if (layout && ['align', 'first', 'indent', 'marker', 'hyphens', 'caps', 'hanging'].some(key => key in layout)) return null;
+  if (layout && ['align', 'first', 'indent', 'marker', 'hyphens', 'caps', 'hanging', 'lines', 'before', 'after', 'line'].some(key => key in layout)) return null;
   return {attrs, info: opening[3].trim(), body: rest.slice(0, found.index), infoStart: opening[1].length + mark.length,
     infoEnd: opening[0].replace(/\r?\n$/, '').length, source: raw, start: 0, end: raw.length, fenceEnd: end,
     layout: layout || HTML_FLOW, marker: attached ? {start: end + attached[1].length, end: end + attached[1].length + attached[2].length, text: attached[2]} : null};
@@ -545,24 +545,43 @@ export function mountHtmlBlocks(doc, options = {}) {
         value.width < 1 || value.viewportHeight < 1 || value.width > 4096 || value.viewportHeight > 4096) return;
     if (Math.abs(row.frame.clientWidth - value.width) > 1 || Math.abs(row.frame.clientHeight - value.viewportHeight) > 1) {message(row, 'snapshot'); return;}
     const stamp = ++row.generation, scale = Math.min(1, 1024 / Math.max(value.width, value.viewportHeight));
-    const canvas = doc.createElement('canvas'); canvas.width = Math.max(1, Math.ceil(value.width * scale)); canvas.height = Math.max(1, Math.ceil(value.viewportHeight * scale));
-    const snapshot = new win.Image();
+    const ratio = win.devicePixelRatio || 1, sharp = Math.min(ratio, 4096 / Math.max(value.width, value.viewportHeight), Math.sqrt(16777216 / (value.width * value.viewportHeight)));
+    const current = () => !dead && owned.get(row.image) === row && stamp === row.generation && keyOf(row.image) === row.key;
+    const draw = async factor => {
+      const canvas = doc.createElement('canvas'), snapshot = new win.Image();
+      canvas.width = Math.max(1, Math.ceil(value.width * factor)); canvas.height = Math.max(1, Math.ceil(value.viewportHeight * factor));
+      try {
+        snapshot.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="' + canvas.width + '" height="' + canvas.height + '" viewBox="0 0 ' + value.width + ' ' + value.viewportHeight + '"><foreignObject width="100%" height="100%">' + value.markup + '</foreignObject></svg>');
+        await Promise.race([snapshot.decode(), new Promise((_, reject) => win.setTimeout(() => reject(new Error('Snapshot decode timeout')), 2000))]);
+        if (!current()) return null;
+        const ctx = canvas.getContext('2d'); ctx.drawImage(snapshot, 0, 0); ctx.getImageData(0, 0, 1, 1);
+        return canvas.toDataURL('image/png');
+      } finally {snapshot.removeAttribute('src'); canvas.width = canvas.height = 0;}
+    };
     try {
-      snapshot.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="' + canvas.width + '" height="' + canvas.height + '" viewBox="0 0 ' + value.width + ' ' + value.viewportHeight + '"><foreignObject width="100%" height="100%">' + value.markup + '</foreignObject></svg>');
-      await Promise.race([snapshot.decode(), new Promise((_, reject) => win.setTimeout(() => reject(new Error('Snapshot decode timeout')), 2000))]);
-      if (dead || owned.get(row.image) !== row || stamp !== row.generation || keyOf(row.image) !== row.key) return;
+      const first = await draw(scale);
+      if (first == null) return;
       if (Math.abs(row.frame.clientWidth - value.width) > 1 || Math.abs(row.frame.clientHeight - value.viewportHeight) > 1) {message(row, 'snapshot'); return;}
-      const ctx = canvas.getContext('2d'); ctx.drawImage(snapshot, 0, 0); ctx.getImageData(0, 0, 1, 1);
-      const first = canvas.toDataURL('image/png'); if (first.length > 4 * 1024 * 1024) throw new Error('Snapshot byte budget');
-      row.image.dataset.rapierFirstFrame = first; row.image.src = first;
+      if (first.length > 4 * 1024 * 1024) throw new Error('Snapshot byte budget');
+      const shown = sharp > scale ? await draw(sharp).catch(() => first) : first;
+      if (shown == null) return;
+      row.ratio = ratio;
+      row.image.dataset.rapierFirstFrame = first; row.image.src = shown;
       row.snapshot = true;
       row.image.dataset.rapierLiveSurface = '';
       row.image.dataset.rapierContour = row.animated ? 'animation-box' : value.snapshotStatus === 'sampled' ? 'sampled' : 'unavailable-box';
       row.image.dataset.rapierNaturalWidth = String(value.width); row.image.dataset.rapierNaturalHeight = String(value.viewportHeight);
       row.image.dispatchEvent(new win.Event('rapier-html-resize', {bubbles: true})); schedule();
     } catch {if (owned.get(row.image) === row) {row.image.dataset.rapierContour = 'unavailable-box'; row.image.dataset.rapierSnapshot = 'unavailable';}}
-    finally {snapshot.removeAttribute('src'); canvas.width = canvas.height = 0;}
   }
+  let density = null;
+  const redraw = () => {
+    density?.removeEventListener('change', redraw);
+    if (dead) return;
+    density = win.matchMedia('(resolution: ' + (win.devicePixelRatio || 1) + 'dppx)'); density.addEventListener('change', redraw);
+    for (const row of owned.values()) if (row.snapshot && row.ratio !== (win.devicePixelRatio || 1)) {row.generation++; message(row, 'snapshot');}
+  };
+  redraw();
   const changedVisibility = () => {for (const row of owned.values()) applyPlayback(row);};
   const hidden = event => {if (!event.persisted) {api.close(); return;} for (const row of owned.values()) {row.visible = false; applyPlayback(row);}};
   const shown = () => {scan(); for (const row of owned.values()) {const box = row.image.getBoundingClientRect();
@@ -580,7 +599,7 @@ export function mountHtmlBlocks(doc, options = {}) {
       snapshot: image.dataset.rapierSnapshot || null, contour: image.dataset.rapierContour || null, status: image.dataset.rapierPlayback || 'ready'} : null;},
     close() {dead = true; win.cancelAnimationFrame(pending); observer.disconnect(); resize.disconnect(); visibility?.disconnect();
       win.removeEventListener('message', receive); win.removeEventListener('resize', schedule); doc.removeEventListener('scroll', schedule, true);
-      doc.removeEventListener('visibilitychange', changedVisibility); reduced.removeEventListener('change', changedMotion);
+      doc.removeEventListener('visibilitychange', changedVisibility); reduced.removeEventListener('change', changedMotion); density?.removeEventListener('change', redraw);
       for (const row of [...owned.values()]) release(row); sheet.remove(); local.clear();
       win.removeEventListener('pagehide', hidden); win.removeEventListener('pageshow', shown); if (doc.rapierObjects === api) delete doc.rapierObjects;}};
   win.addEventListener('pagehide', hidden); win.addEventListener('pageshow', shown); if (!options.root) doc.rapierObjects = api; scan(); return api;

package/dist/spec/template-page.mjs

@@ -1,6 +1,4 @@
 // SPDX-License-Identifier: MIT
-export function isTemplatePage(source) {
-  const match = /^(?:)?---[ \t]*\r?\n([\s\S]*?)\r?\n---[ \t]*(?:\r?\n|$)/.exec(String(source).slice(0, 65536));
-  return !!match && /^template:[ \t]*page[ \t]*(?:#.*)?$/m.test(match[1]);
-}
+import {readDocumentSettings} from './document-settings.mjs';
+export const isTemplatePage = source => readDocumentSettings(source).template === 'page';
 export const isPageBorderLayout = layout => layout?.wrap === 'behind' && layout.lock === 'on';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rapier-markdown-kit",
-  "version": "1.2.31",
+  "version": "1.2.33",
   "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",

package/style.css

@@ -326,6 +326,23 @@
 	position: relative;
 }
 
+/* The line that holds the box hangs: its later lines start under the first line's words, not under the box. The box takes
+   16px and a space of the first line (the 48px target less its overhangs), which the hang gives back. */
+.md-render .task-list-item > p:has(> input[type="checkbox"]:first-child),
+.md-render .task-list-item:has(> input[type="checkbox"]:first-child) {
+	/* The space the source keeps between the box and the words (`- [ ] words`), so the later lines meet the words. */
+	--md-task-space: .24em;
+	padding-inline-start: calc(16px + var(--md-space-1) + var(--md-task-space));
+	text-indent: calc(-16px - var(--md-space-1) - var(--md-task-space));
+}
+/* The hang is the line's alone: nothing inside it (a formula, a code chip) or after it takes the indent, and a tight item's
+   later blocks (a nested list, a paragraph) keep their own place. */
+.md-render .task-list-item > p:has(> input[type="checkbox"]:first-child) *,
+.md-render .task-list-item:has(> input[type="checkbox"]:first-child) * { text-indent: 0; }
+.md-render .task-list-item:has(> input[type="checkbox"]:first-child) > :is(p, ul, ol, pre, blockquote, table, div, dl, details, figure, hr) {
+	margin-inline-start: calc(-16px - var(--md-space-1) - var(--md-task-space));
+}
+
 .md-render .task-list-item input[type="checkbox"] {
 	--md-task-box: clamp(14px, .92em, 24px);
 	/* A form control does not inherit color on its own; the shell's own app sheet gives it one
@@ -401,6 +418,7 @@
 	min-height:var(--md-ol-circle);
 	padding-top:min(0.15 * var(--md-unit), 0.6 * max(0px, var(--md-ol-circle) - var(--md-item-line)));
 }
+.md-render{--md-ol-dot-line:radial-gradient(circle closest-side, var(--md-color-line) calc(100% - 0.5px), transparent 100%) center top / 3px 6px repeat-y}
 .md-render ol>li::before{
 	content:counter(rapier-ol);
 	position:absolute;
@@ -424,16 +442,21 @@
 
 	inset-inline-start:calc(calc(-1.75 * var(--md-unit)) - 1.5px + var(--md-marker, 0px));
 	/* From just below this circle into the next one: at least to the next item's top (--md-item-gap is the gap between
-	   items the spacing settings give), and at least a quarter line, which the next circle covers. */
+	   items the spacing settings give), and at least a quarter line, which the next circle covers. Where the circles
+	   nearly touch (one-line items) there is no room for dots, so none are drawn: the line shows only when it spans at
+	   least half a line (100% is this item's height). */
 	top:calc(var(--md-ol-top) + 1.0875 * var(--md-ol-circle));
-	bottom:calc(-1 * max(var(--md-item-gap, 0px), var(--md-line) / 4));
-	border-inline-start:3px dotted var(--md-color-line);
+	--md-ol-dots:calc(100% - var(--md-ol-top) - 1.0875 * var(--md-ol-circle) + max(var(--md-item-gap, 0px), var(--md-line) / 4));
+	height:clamp(0px, (var(--md-ol-dots) - var(--md-line) / 2) * 9999, var(--md-ol-dots));
+	/* Round dots, 3px across every 6px: a dotted border draws squares in Chrome. */
+	width:3px;
+	background:var(--md-ol-dot-line);
 	z-index:0;
 }
 /* A heading between two parts of one numbered list (the second part's start follows the first's last number;
    _rapierMarkListContinuations marks them): the heading stands on the margin the item text stands on, and the dotted
    line runs on, out of the first part's last item, down the heading's own height, to the next circle. */
-.md-render ol[data-rapier-list-continues]>li:last-child::after{bottom:calc(-1 * var(--md-list-heading-before,var(--md-gap-heading-before)))}
+.md-render ol[data-rapier-list-continues]>li:last-child::after{height:auto;bottom:calc(-1 * var(--md-list-heading-before,var(--md-gap-heading-before)))}
 /* A wrapped picture set the next circle aside: the dotted line ends with this item, as at a list's last. */
 .md-render ol>li[data-rapier-wrap-step]::after{content:none!important}
 .md-render :is(h1,h2,h3,h4,h5,h6)[data-rapier-list-through]{position:relative;padding-inline-start:calc(2.75 * var(--md-unit))}
@@ -443,7 +466,8 @@
 	inset-inline-start:calc(calc(1 * var(--md-unit)) - 1.5px);
 	top:0;
 	bottom:calc(-1 * var(--md-list-heading-after,var(--md-gap-heading-after)));
-	border-inline-start:3px dotted var(--md-color-line);
+	width:3px;
+	background:var(--md-ol-dot-line);
 	z-index:0;
 }
 .md-render :is(h1,h2,h3,h4,h5,h6)[data-rapier-list-through]:has(+:is(h1,h2,h3,h4,h5,h6)){--md-list-heading-after:var(--md-gap-heading-before)}