rapier-markdown-kit 1.2.32 → 1.2.40

package/dist/layout/typography.mjs

@@ -464,6 +464,7 @@ export function createTypography() {
   function updateProjection(projection, plan) {
     for (const {node,property,line,sign} of projection.bindings) {
       const value = sign * plan.lines[line][property] + 'px';
+      if (node.hasAttribute(boundary)) { if (node.style.getPropertyValue('--md-fit-protrude') !== value) node.style.setProperty('--md-fit-protrude', value); continue; }
       const name = property === 'opening' ? 'marginInlineStart' : property === 'closing' ? 'marginInlineEnd' : 'wordSpacing';
       if (node.style[name] !== value) node.style[name] = value;
     }
@@ -487,7 +488,7 @@ export function createTypography() {
         add(line.end);
       }
       if (line.kind === 'space') operations.push({start:line.end,end:line.next,boundary:true});
-      else if (line.kind !== 'end') inserts.push({offset:line.end,glyph:line.glyph});
+      else if (line.kind !== 'end') inserts.push({offset:line.end,glyph:line.glyph,line:lineIndex,protrudes:line.closing>0});
       const first = words[line.firstWord], last = words[line.lastWord];
       if (first.opening && line.start === first.start) operations.push({start:first.start,end:first.openEnd,opening:true,line:lineIndex});
       if (last.closing && line.end === last.end) operations.push({start:last.closeStart,end:last.end,closing:true,line:lineIndex});
@@ -538,6 +539,7 @@ export function createTypography() {
       const at=ends.get(insert.offset);
       const marker=paragraph.ownerDocument.createElement('span');marker.setAttribute(boundary,insert.glyph?'hyphen':'');
       if (insert.glyph) marker.style.setProperty('--md-fit-hyphen',JSON.stringify(insert.glyph));
+      if (insert.protrudes) bindings.push({node:marker,property:'closing',line:insert.line,sign:-1});
       at.after(marker);
     }
     const projection = {bindings,topology:topology(plan)};
@@ -689,77 +691,69 @@ export function createTypography() {
     slotPlans.set(paragraph, {key, plan});
     return plan;
   }
-  function slotLines(paragraph, items, options, {width, top, obstacles, lineHeight, minWidth, slotsForBand, justify, hyphenate}) {
+  function slotLines(paragraph, items, options, {width, top, obstacles, lineHeight, minWidth, slotsForBand, slotSequence, columnsFilled, 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;
+    const build = order => {
+      const found = slotSequence(width, top, obstacles, lineHeight, minWidth, slotsForBand, 'ltr', order);
+      if (!found?.multiple) return null;
+      const sequence = found.slots, y = found.end;
+      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;
       }
-      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;
+      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};
         }
-        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});
       }
-      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};
+      return {plan: {lines, height: Math.max(lineHeight, ...lines.map(line => line.y + lineHeight))}, filled: columnsFilled(slots, slots.slice(0, plan.lines.length))};
+    };
+    const columns = build('columns');
+    if (!columns || columns.filled) return columns?.plan || null;
+    return build('rows')?.plan || columns.plan;
   }
 
   function retire(root, {documentChanged=false}={}) {

package/dist/spec/document-fonts.mjs

@@ -211,6 +211,7 @@ export function documentFontUsage(markdown, parser, defaultFont) {
 	const inherited = defaultFont === undefined ? settings.defaultfont : documentFont(defaultFont);
 	const main = family(settings.mainfont || inherited || settings.sansfont), sans = family(settings.sansfont || settings.mainfont || inherited), mono = family(settings.monofont);
 	const add = (name, text) => { if (name && !Object.hasOwn(FONT_STACKS, name.toLowerCase()) && text) use.set(name, (use.get(name) || '') + text + '\n'); };
+	if (!main && !sans && !mono && !source.includes('<')) return use;
 	const plain = html => md.utils.unescapeAll(String(html).replace(/<!--[^]*?-->/g, '').replace(/<(script|style)\b[^>]*>[^]*?<\/\1\s*>/gi, '').replace(/<[^>]*>/g, '').replace(/\\/g, '\\\\'));
 	let blockFamily = main;
 	for (const token of md.parse(splitOpeningFrontmatter(source).body, {})) {

package/dist/spec/document-settings.mjs

@@ -129,6 +129,7 @@ function paperOf(value) {
 	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 paperForLanguage = language => /(?:^|[-_])(?:US|CA|MX|PH|CL|CO|VE|CR|GT)$/i.test(String(language || '')) ? PAPERS.letter : PAPERS.a4;
 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,

package/dist/spec/html-blocks.mjs

@@ -425,7 +425,7 @@ export function mountHtmlBlocks(doc, options = {}) {
           const name = attr.name.toLowerCase(), value = attr.value;
           if (name.startsWith('on') || name.startsWith('data-rapier-') || ['nonce','srcdoc','is','autofocus','form','formaction','action','target','download','ping','xmlns:xlink'].includes(name)) el.removeAttribute(attr.name);
           if (['src','srcset','href'].includes(attr.localName.toLowerCase()) && !(name.endsWith('href') && /^#[A-Za-z][\w.-]*$/.test(value) ||
-              (name === 'src' && tag === 'img' || name.endsWith('href') && tag === 'image') && /^data:image\/(?:png|jpeg|webp|gif|jxl|svg\+xml);/i.test(value))) el.removeAttribute(attr.name);
+              (name === 'src' && tag === 'img' || name.endsWith('href') && tag === 'image') && /^data:image\/(?:(?:png|jpeg|webp|gif|jxl|svg\+xml);|svg\+xml,)/i.test(value))) el.removeAttribute(attr.name);
         }
         if (tag.startsWith('animate') || tag === 'set') {
           const attribute = (el.getAttribute('attributeName') || '').trim().toLowerCase().split(':').pop();
@@ -437,13 +437,16 @@ export function mountHtmlBlocks(doc, options = {}) {
           const name = tag === 'img' ? 'src' : el.hasAttribute('href') ? 'href' : 'xlink:href', original = el.getAttribute(name);
           if (original) {
             const match = /^data:(image\/(?:png|jpeg|webp|gif|jxl|svg\+xml));(?:charset=[^;,]+;)?base64,([A-Za-z0-9+/]+={0,2})$/i.exec(original);
-            if (!match || original.length > 24 * 1024 * 1024) throw new Error('Image requires a bounded base64 data URL');
-            const url = 'data:' + match[1].toLowerCase() + ';base64,' + match[2];
-            const bytes = Uint8Array.from(win.atob(match[2]), c => c.charCodeAt(0));
-            const info = match[1].toLowerCase() === 'image/gif' ? media.inspectGIF(bytes) : imageInfo(url) || admitted[url];
-            if (!info && match[1].toLowerCase() !== 'image/svg+xml') {el.removeAttribute(name); continue;}
+            const percent = /^data:image\/svg\+xml,/i.test(original);
+            if ((!match && !percent) || original.length > 24 * 1024 * 1024) throw new Error('Image requires a bounded base64 data URL');
+            const mime = percent ? 'image/svg+xml' : match[1].toLowerCase();
+            const url = percent ? original : 'data:' + mime + ';base64,' + match[2];
+            const bytes = percent ? new win.TextEncoder().encode(decodeURIComponent(original.slice(19)))
+              : Uint8Array.from(win.atob(match[2]), c => c.charCodeAt(0));
+            const info = mime === 'image/gif' ? media.inspectGIF(bytes) : imageInfo(url) || admitted[url];
+            if (!info && mime !== 'image/svg+xml') {el.removeAttribute(name); continue;}
             if (info) {pixels += info.width * info.height; if (pixels > 24000000) throw new Error('HTML image pixel budget'); admitted[url] = {width: info.width, height: info.height, animated: !!info.animated};}
-            if (match[1].toLowerCase() === 'image/svg+xml') {
+            if (mime === 'image/svg+xml') {
               const svgText = new win.TextDecoder('utf-8', {fatal: true}).decode(bytes);
               if (/<!\s*(?:DOCTYPE|ENTITY)\b/i.test(svgText)) throw new Error('SVG declarations are unsupported');
               const parsed = new win.DOMParser().parseFromString(svgText, 'image/svg+xml');

package/dist/spec/md-assets.mjs

@@ -17,9 +17,9 @@ export function installMarkdownImages(md) {
   if (md.__rapierImagesInstalled) return md;
   md.__rapierImagesInstalled = true;
   const validate = md.validateLink;
-  md.validateLink = url => /^data:image\/(?:jxl|svg\+xml);base64,[A-Za-z0-9+/]+={0,2}$/i.test(url) || validate(url);
+  md.validateLink = url => !!dataImage(url) || validate(url);
   const normalize = md.normalizeLink;
-  md.normalizeLink = url => /^data:image\/(?:jxl|png|jpeg|webp|gif|svg\+xml);base64,[A-Za-z0-9+/]+={0,2}$/i.test(url) ? url : normalize(url);
+  md.normalizeLink = url => dataImage(url) ? url : normalize(url);
   const reference = md.block.ruler.__rules__.find(row => row.name === 'reference').fn;
   md.block.ruler.at('reference', (state, start, end, silent) => {
     if (silent) return reference(state, start, end, silent);
@@ -179,10 +179,35 @@ export function* blockWindows(source, bodyOffset, parser, env, keepNul = false)
   }
 }
 
+const PERCENT_PAYLOAD = Array.from({length: 128}, (_, code) => code >= 48 && code <= 57 || code >= 65 && code <= 90 ||
+  code >= 97 && code <= 122 || '-._~:/?@+$,;='.includes(String.fromCharCode(code)));
+const isHexUnit = code => code >= 48 && code <= 57 || code >= 65 && code <= 70 || code >= 97 && code <= 102;
+let lastScan = null;
 export function dataImage(url) {
   if (typeof url !== 'string' || url.length > IMAGE_LIMITS.sourceChars) return null;
+  if (url.length > 4096) {
+    if (lastScan?.url !== url) lastScan = {url, image: scanDataImage(url)};
+    return lastScan.image && {...lastScan.image};
+  }
+  return scanDataImage(url);
+}
+function scanDataImage(url) {
   const prepared = preparedDefinitions.find(row => row.image.url === url)?.image;
-  if (prepared) return {codec: prepared.codec, byteLength: prepared.byteLength, payloadStart: url.indexOf(',') + 1};
+  if (prepared) return {codec: prepared.codec, byteLength: prepared.byteLength, payloadStart: url.indexOf(',') + 1,
+    ...(prepared.encoding ? {encoding: prepared.encoding} : {})};
+  if (/^data:image\/svg\+xml,/i.test(url)) {
+    const payloadStart = 19;
+    let byteLength = 0;
+    for (let at = payloadStart; at < url.length; at++, byteLength++) {
+      const code = url.charCodeAt(at);
+      if (code === 37) {
+        if (!isHexUnit(url.charCodeAt(at + 1)) || !isHexUnit(url.charCodeAt(at + 2))) return null;
+        at += 2;
+      } else if (!(code < 128 && PERCENT_PAYLOAD[code])) return null;
+    }
+    return byteLength && byteLength <= IMAGE_LIMITS.bytes
+      ? {codec: 'image/svg+xml', byteLength, payloadStart, encoding: 'percent'} : null;
+  }
   const match = /^data:(image\/(?:jxl|png|jpeg|webp|gif|svg\+xml));base64,([A-Za-z0-9+/]+={0,2})$/i.exec(url);
   if (!match || match[2].length % 4) return null;
   const padding = match[2].endsWith('==') ? 2 : match[2].endsWith('=') ? 1 : 0;
@@ -291,7 +316,8 @@ export function restoreAssetIndex(source, packet, {offset = 0, bodyOffset = 0, f
   preparedDefinitions = blocks.filter(row => row.topLevel).map(row => {
     const local = {...row, start: 0, end: row.source.length, active: true, status: 'unverified'};
     for (const key of positions.slice(2)) if (Number.isSafeInteger(local[key])) local[key] -= row.start;
-    const image = Object.freeze({url: row.url, codec: row.codec, byteLength: row.byteLength});
+    const image = Object.freeze({url: row.url, codec: row.codec, byteLength: row.byteLength,
+      ...(row.encoding ? {encoding: row.encoding} : {})});
     return {source: row.source, factory, image, index: {assets: new Map([[row.id, local]]), blocks: [local],
       references: Object.assign(Object.create(null), {[row.id]: {href: row.url, title: row.title}}),
       duplicateLabels: new Set(), appendixStart: 0}};
@@ -314,7 +340,7 @@ export function projectImageDefinitions(source, index) {
   const references = Object.create(null);
   for (const [label, definition] of Object.entries(index.references)) {
     const image = index.assets.get(label);
-    references[label] = {href: image?.url === definition.href ? 'data:' + image.codec + ';base64,AA==' : definition.href,
+    references[label] = {href: image?.url === definition.href ? image.url.slice(0, image.url.indexOf(',') + 1) + 'AA==' : definition.href,
       title: definition.title};
   }
   return {source: records.length ? parts.join('') : source, records, references};
@@ -513,12 +539,17 @@ export function retireDeletedImageDefinitions(before, after, splices, factory) {
         !remaining.includes('[' + row.id) && !now.html.includes(row.id) && !now.html.includes(row.url.toUpperCase());
     });
     return retired.sort((a, b) => b.start - a.start).map(row => {
-      const gap = /(?:\r\n\r\n|\n\n|\r\r)$/.exec(after.slice(Math.max(0, row.start - 4), row.start));
+      const gap = /(?:\r\n|\r(?!\n)|(?<!\r)\n){2}$/.exec(after.slice(Math.max(0, row.start - 5), row.start));
       let tail = after.slice(row.end);
       const last = /^(?:\r\n|\n|\r)?$/.test(tail);
       for (const other of retired) if (other.start >= row.end) tail = tail.replace(other.source, '');
       const whole = gap && !/\S/.test(tail) && row.start - gap[0].length > markdownBodyOffset(after);
-      return whole ? {pos: row.start - gap[0].length, removed: gap[0] + row.source + (last ? after.slice(row.end) : ''), inserted: ''} : {pos: row.start, removed: row.source, inserted: ''};
+      if (whole) {
+        const [first, second] = gap[0].match(/\r\n|\r|\n/g), padding = first === second ? gap[0] : second;
+        return {pos: row.start - padding.length, removed: padding + row.source + (last ? after.slice(row.end) : ''), inserted: ''};
+      }
+      const between = gap && /^(?:\r\n|\r(?!\n)|(?<!\r)\n){2}/.test(tail) && row.start - gap[0].length >= markdownBodyOffset(after);
+      return between ? {pos: row.start - gap[0].length, removed: gap[0] + row.source, inserted: ''} : {pos: row.start, removed: row.source, inserted: ''};
     });
   } catch (_) { return []; }
 }
@@ -551,7 +582,7 @@ function previousOmissions(view, kind) {
     rows = rows.flatMap(row => {
       const permitted = kind === 'asset' ? /^[A-Za-z0-9+/=\\;&%#._~-]*$/
         : row.profile === 'base64' ? /^[A-Za-z0-9+/=\s]*$/ : /^[A-Za-z0-9\-._~!$&*+;=:@/?%]*$/;
-      if (change.pos >= row.payloadStart && end <= row.end && permitted.test(change.text)) {
+      if (!row.percent && change.pos >= row.payloadStart && end <= row.end && permitted.test(change.text)) {
         const next = {...row, end: row.end + delta, chars: row.chars + delta};
         if (kind === 'asset') {
           const was = payloadFacts(change.before.deref().slice(change.pos, end)), now = payloadFacts(change.text);
@@ -575,6 +606,7 @@ function dataMatches(source, kind, envelopes = []) {
   const prior = previousOmissions(view, kind), rows = new Map();
   const pattern = kind === 'asset' ? /data:(image\/[a-z0-9.+-]+);base64,[A-Za-z0-9+/=\\;&%#._~-]*/iy
     : /data:([a-z0-9!#$&^_.+-]+\/[a-z0-9!#$&^_.+-]+)(?:;[^,\s"'<>)]*)?,/iy;
+  const svgPattern = /data:(image\/svg\+xml),[A-Za-z0-9%\-._~:/?@+$,;=]*/iy;
   let end = 0, envelopeIndex = 0;
   for (const at of measured.markers) {
     if (kind === 'asset' && at < end) continue;
@@ -583,15 +615,21 @@ function dataMatches(source, kind, envelopes = []) {
     let row = prior.get(at);
     if (!row) {
       pattern.lastIndex = at;
-      const match = pattern.exec(source);
+      let match = pattern.exec(source), percent = false;
+      if (!match && kind === 'asset') {
+        svgPattern.lastIndex = at; match = svgPattern.exec(source);
+        if (match && !dataImage(match[0])) match = null;
+        percent = !!match;
+        if (percent) pattern.lastIndex = svgPattern.lastIndex;
+      }
       if (!match) continue;
       if (kind === 'asset') {
         const value = match[0], payload = value.slice(value.indexOf(',') + 1);
         const {bad, equals} = payloadFacts(payload);
-        const bytes = payloadBytes(payload.length, bad, equals, equals <= 2 ? payload.slice(payload.length - equals) : '');
+        const bytes = percent ? dataImage(value)?.byteLength ?? null : payloadBytes(payload.length, bad, equals, equals <= 2 ? payload.slice(payload.length - equals) : '');
         row = {start: at, end: pattern.lastIndex, chars: value.length,
           domain: 'image_bytes', reason: 'embedded_asset', profile: 'embedded', type: match[1].toLowerCase(), bytes,
-          payloadStart: pattern.lastIndex - payload.length, bad, equals};
+          payloadStart: pattern.lastIndex - payload.length, bad, equals, ...(percent ? {percent} : {})};
       } else {
         const payloadStart = pattern.lastIndex, base64 = /;base64,/i.test(match[0]);
         let to = payloadStart;
@@ -608,7 +646,7 @@ function dataMatches(source, kind, envelopes = []) {
 }
 export function assetOmissions(source) {
   if (typeof source !== 'string') return [];
-  return [...dataMatches(source, 'asset').values()].map(({payloadStart, bad, equals, ...row}) => row);
+  return [...dataMatches(source, 'asset').values()].map(({payloadStart, bad, equals, percent, ...row}) => row);
 }
 
 export function dataOmissions(source) {
@@ -667,3 +705,5 @@ export function appendAssetText(source, asset, lineEnding, {preserveLabel = fals
   return {source: nextSource, id: asset.id, reference: asset.label, added: true, suffix};
 }
 export async function appendAsset(source, asset) { return appendAssetText(source, asset); }
+
+export const imageOnlySourceBlock = source => /^(?:!\[[^\]\n]*\]\(data:image\/(?:(?:png|jpeg|webp|gif|jxl|svg\+xml);base64,[A-Za-z0-9+\/=]+|svg\+xml,[A-Za-z0-9%\-._~:/?@+$,;=]+)(?: "[^"\n]*")?\)(?:[ \t]*<!--md-layout:v1 [^>\r\n]{1,180}-->)?\s*)+$/.test(source);

package/package.json

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

@@ -142,7 +142,7 @@
 .md-render p[data-rapier-typography-fit]{text-align:justify!important;text-align-last:start;text-wrap:nowrap;hyphens:none;hanging-punctuation:none}
 .md-render p[data-rapier-typography-fit] :is(a,span,em,i,strong,b,del,s,mark,code,kbd,samp,u,ins,abbr){text-wrap:nowrap;hyphens:none;hanging-punctuation:none}
 .md-render [data-rapier-typography-separator]{font-size:0;line-height:0;word-spacing:0!important;letter-spacing:0!important}
-.md-render [data-rapier-typography-break="hyphen"]::before{content:var(--md-fit-hyphen,'-')}
+.md-render [data-rapier-typography-break="hyphen"]::before{content:var(--md-fit-hyphen,'-');margin-inline-end:var(--md-fit-protrude,0px)}
 .md-render p[data-rapier-typography-ragged]{text-align:start!important}
 .md-render p[data-md-lines]:not([data-rapier-typography-protected-initial])::first-letter{
 	initial-letter:var(--md-drop-lines,normal);
@@ -219,29 +219,31 @@
    at admission; only renderer paint omissions are corrected here. */
 :where(.md-render) svg.rapier-native-flowchart{display:block;margin-inline:auto;height:auto}
 :where(.md-render) svg.rapier-diagram{display:block;margin-inline:auto;height:auto;text-rendering:optimizeLegibility}
-/* The same token bridge serves the document, live preview and portable page. */
+/* The same token bridge serves the document, live preview and portable page. Pele reads --pele-* names; the
+   adapter (_presentPele in shell/plugin-loader.js) points them at these --md-pele-* names, and the app's own sheet
+   lets its theme (--color-*, --font-*) lead them in the editor. */
 :where(.md-render) :is(.diagram-block,.diagram-live-preview){
- --pele-bg:transparent;
- --pele-fg:var(--color-text,var(--md-color-text));
- --pele-line:var(--color-text,var(--md-color-text));
- --pele-muted:var(--color-text-secondary,var(--md-color-text-secondary));
- --pele-surface:var(--color-surface-2,var(--md-color-surface-2));
- --pele-surface-alt:var(--color-surface-hover,var(--md-color-border-focus));
- --pele-border:var(--color-border,var(--color-surface-hover,var(--md-color-border)));
- --pele-accent:var(--color-accent,var(--md-color-accent));
- --pele-font:var(--font-sans,var(--md-font-sans));
- --pele-font-mono:var(--font-mono,var(--md-font-mono));
- --pele-radius:0;
- --pele-heading-weight:var(--md-fw-semibold);
- --pele-title-weight:var(--md-fw-semibold);
- --pele-series-1:var(--pele-accent);
- --pele-series-2:#4f91f7;
- --pele-series-3:#35c57a;
- --pele-series-4:#e6b91e;
- --pele-series-5:#9b6dea;
- --pele-series-6:#f05a62;
- --pele-series-7:color-mix(in srgb,var(--pele-accent) 50%,#4f91f7);
- --pele-series-8:color-mix(in srgb,#9b6dea 50%,#f05a62);
+ --md-pele-bg:transparent;
+ --md-pele-fg:var(--md-color-text);
+ --md-pele-line:var(--md-color-text);
+ --md-pele-muted:var(--md-color-text-secondary);
+ --md-pele-surface:var(--md-color-surface-2);
+ --md-pele-surface-alt:var(--md-color-border-focus);
+ --md-pele-border:var(--md-color-border);
+ --md-pele-accent:var(--md-color-accent);
+ --md-pele-font:var(--md-font-sans);
+ --md-pele-font-mono:var(--md-font-mono);
+ --md-pele-radius:0;
+ --md-pele-heading-weight:var(--md-fw-semibold);
+ --md-pele-title-weight:var(--md-fw-semibold);
+ --md-pele-series-1:var(--md-pele-accent);
+ --md-pele-series-2:#4f91f7;
+ --md-pele-series-3:#35c57a;
+ --md-pele-series-4:#e6b91e;
+ --md-pele-series-5:#9b6dea;
+ --md-pele-series-6:#f05a62;
+ --md-pele-series-7:color-mix(in srgb,var(--md-pele-accent) 50%,#4f91f7);
+ --md-pele-series-8:color-mix(in srgb,#9b6dea 50%,#f05a62);
 }
 
 /* Radar gives these SVG labels a color declaration; SVG text needs a fill. */
@@ -418,6 +420,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;
@@ -441,16 +444,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))}
@@ -460,7 +468,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)}