rapier-markdown-kit 1.2.11 → 1.2.13

package/dist/spec/md-assets.mjs

@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Pure text and markdown-it tokens: no DOM, no byte decoding, no globalThis.Rapier* (MIT kit; decoders stay in images/assets.mjs).
 import {isWordSidecarBlock} from './word-sidecar.mjs';
+import {sourceFacts, sourceView, sourceEdit} from '../kit/ledger/source.mjs';
 
 export const IMAGE_LIMITS = Object.freeze({bytes: 16 * 1024 * 1024, sourceChars: 64 * 1024 * 1024, dimension: 16384, pixels: 24000000, assets: 1024});
 const parsers = new WeakMap();
@@ -513,17 +514,107 @@ export function retireDeletedImageDefinitions(before, after, splices, factory) {
   } catch (_) { return []; }
 }
 
+const omissionCache = new WeakMap();
+function payloadFacts(text) {
+  let bad = 0, equals = 0;
+  for (let at = 0; at < text.length; at++) {
+    const code = text.charCodeAt(at);
+    if (code === 61) equals++;
+    else if (!(code >= 65 && code <= 90 || code >= 97 && code <= 122 || code >= 48 && code <= 57 || code === 43 || code === 47)) bad++;
+  }
+  return {bad, equals};
+}
+function payloadBytes(length, bad, equals, tail) {
+  return length % 4 === 0 && !bad && equals <= 2 && length > equals && tail === '='.repeat(equals)
+    ? length / 4 * 3 - equals : null;
+}
+function previousOmissions(view, kind) {
+  const changes = [];
+  let cursor = view, held;
+  while (!(held = omissionCache.get(cursor)?.[kind])) {
+    const after = cursor, change = sourceEdit(cursor);
+    if (!change || changes.length === 64 || !(cursor = change.before.deref())) return new Map();
+    changes.push({...change, after});
+  }
+  let rows = [...held.values()];
+  for (const change of changes.reverse()) {
+    const end = change.pos + change.removed, delta = change.inserted - change.removed;
+    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)) {
+        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);
+          next.bad += now.bad - was.bad; next.equals += now.equals - was.equals;
+          next.bytes = payloadBytes(next.end - next.payloadStart, next.bad, next.equals,
+            next.equals <= 2 ? change.after.slice(next.end - next.equals, next.end) : '');
+        }
+        return [next];
+      }
+      if (change.pos > row.end) return [row];
+      if (end < row.start) return [{...row, start: row.start + delta, end: row.end + delta,
+        ...(row.payloadStart === undefined ? {} : {payloadStart: row.payloadStart + delta})}];
+      return [];
+    });
+  }
+  return new Map(rows.map(row => [row.start, row]));
+}
+function dataMatches(source, kind, envelopes = []) {
+  const measured = sourceFacts(source), view = sourceView(source), cached = omissionCache.get(view);
+  if (cached?.[kind]) return cached[kind];
+  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;
+  let end = 0, envelopeIndex = 0;
+  for (const at of measured.markers) {
+    if (kind === 'asset' && at < end) continue;
+    while (envelopeIndex < envelopes.length && envelopes[envelopeIndex].end <= at) envelopeIndex++;
+    if (envelopes[envelopeIndex]?.start <= at) continue;
+    let row = prior.get(at);
+    if (!row) {
+      pattern.lastIndex = at;
+      const match = pattern.exec(source);
+      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) : '');
+        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};
+      } else {
+        const payloadStart = pattern.lastIndex, base64 = /;base64,/i.test(match[0]);
+        let to = payloadStart;
+        const permitted = base64 ? /[A-Za-z0-9+/=\s]/ : /[A-Za-z0-9\-._~!$&*+;=:@/?%]/;
+        while (to < source.length && permitted.test(source[to])) to++;
+        row = {start: at, end: to, payloadStart, type: match[1], chars: to - at, profile: base64 ? 'base64' : 'data'};
+      }
+      Object.freeze(row);
+    }
+    rows.set(at, row); end = row.end;
+  }
+  omissionCache.set(view, {...cached, [kind]: rows});
+  return rows;
+}
 export function assetOmissions(source) {
   if (typeof source !== 'string') return [];
-  const pattern = /data:(image\/[a-z0-9.+-]+);base64,[A-Za-z0-9+/=\\;&%#._~-]*/ig, spans = [];
-  for (let match; (match = pattern.exec(source));) {
-    const value = match[0], payload = value.slice(value.indexOf(',') + 1);
-    const bytes = payload.length % 4 === 0 && /^[A-Za-z0-9+/]+={0,2}$/.test(payload)
-      ? payload.length / 4 * 3 - (payload.endsWith('==') ? 2 : payload.endsWith('=') ? 1 : 0) : null;
-    spans.push({start: match.index, end: pattern.lastIndex, chars: value.length,
-      domain: 'image_bytes', reason: 'embedded_asset', profile: 'embedded', type: match[1].toLowerCase(), bytes});
+  return [...dataMatches(source, 'asset').values()].map(({payloadStart, bad, equals, ...row}) => row);
+}
+
+export function dataOmissions(source) {
+  const envelopes = assetOmissions(source), spans = [...envelopes];
+  let envelopeIndex = 0, end = 0;
+  for (const row of dataMatches(source, 'generic', envelopes).values()) {
+    if (row.start < end) continue;
+    while (envelopeIndex < envelopes.length && envelopes[envelopeIndex].end <= row.start) envelopeIndex++;
+    const envelope = envelopes[envelopeIndex];
+    if (envelope && envelope.start <= row.start) { end = envelope.end; continue; }
+    const {payloadStart, ...span} = row;
+    if (row.end > payloadStart) spans.push(span);
+    end = row.end;
   }
-  return spans;
+  return spans.sort((a, b) => a.start - b.start);
 }
 export function isAssetBlock(raw) {
   if (isWordSidecarBlock(raw)) return true;

package/dist/spec/md-layout.mjs

@@ -1,11 +1,22 @@
 // SPDX-License-Identifier: MIT
 
-export const fields = new Set(['align', 'width', 'lines', 'wrap', 'x', 'y', 'rotate', 'opacity', 'first', 'indent', 'marker', 'lock', 'hyphens', 'caps', 'hanging']);
+export const fields = new Set(['align', 'width', 'lines', 'wrap', 'x', 'y', 'rotate', 'opacity', 'first', 'indent', 'marker', 'lock', 'hyphens', 'caps', 'hanging', 'before', 'after', 'line']);
+export const SPACING_FIELDS = Object.freeze(['before', 'after', 'line']);
 export const alignments = new Set(['left', 'center', 'right', 'justify']);
 export const wraps = new Set(['around', 'box', 'behind', 'front']);
 const has = (value, key) => Object.hasOwn(value, key);
 const percent = value => typeof value === 'number' && Number.isFinite(value) && value >= 0 && value <= 100;
 const lineCount = value => Number.isInteger(value) && value >= 1 && value <= 12;
+const hundredths = value => Math.abs(value * 100 - Math.round(value * 100)) < 1e-9;
+const spaceValue = value => typeof value === 'number' && Number.isFinite(value) && value >= 0 && value <= 720 && hundredths(value);
+const linePoint = value => {
+  if (typeof value !== 'string') return null;
+  const match = /^(?:0|[1-9]\d{0,2})(?:\.\d{1,2})?pt(\+)?$/.exec(value);
+  if (!match) return null;
+  const points = Number(value.slice(0, match[1] ? -3 : -2));
+  return points > 0 && points <= 720 && hundredths(points) && value === decimal(points) + (match[1] ? 'pt+' : 'pt') ? {points, atLeast: !!match[1]} : null;
+};
+const lineValue = value => typeof value === 'number' ? Number.isFinite(value) && value >= .5 && value <= 4 && hundredths(value) : !!linePoint(value);
 export const INDENT_LIMIT = 64;
 export const indentLevel = value => typeof value === 'number' && Number.isFinite(value) && value !== 0 &&
   Math.abs(value) <= INDENT_LIMIT && Number(value.toFixed(6)) === value;
@@ -34,6 +45,8 @@ export function validLayout(value) {
     (!has(value, 'hyphens') || value.hyphens === 'auto') &&
     (!has(value, 'caps') || value.caps === 'small') &&
     (!has(value, 'hanging') || value.hanging === 'on') &&
+    (!has(value, 'before') || spaceValue(value.before)) && (!has(value, 'after') || spaceValue(value.after)) &&
+    (!has(value, 'line') || lineValue(value.line)) &&
     !(has(value, 'align') && (has(value, 'wrap') || has(value, 'x')));
 }
 
@@ -68,6 +81,15 @@ export function parseLayout(comment) {
     } else if (key === 'lines') {
       if (!/^[1-9]\d?$/.test(raw)) return null;
       value.lines = Number(raw);
+    } else if (key === 'before' || key === 'after') {
+      if (!/^(?:0|[1-9]\d{0,2})(?:\.\d{1,2})?pt$/.test(raw)) return null;
+      value[key] = Number(raw.slice(0, -2));
+    } else if (key === 'line') {
+      if (/^[0-4](?:\.\d{1,2})?$/.test(raw)) value.line = Number(raw);
+      else if (/^(?:0|[1-9]\d{0,2})(?:\.\d{1,2})?pt\+?$/.test(raw)) {
+        const plus = raw.endsWith('+');
+        value.line = decimal(Number(raw.slice(0, plus ? -3 : -2))) + (plus ? 'pt+' : 'pt');
+      } else return null;
     } else if (key === 'first' || key === 'indent' || key === 'marker') {
       if (!/^-?(?:0|[1-9]\d?)(?:\.\d{1,6})?$/.test(raw)) return null;
       value[key] = Number(raw);
@@ -94,19 +116,47 @@ export function textStyle(value, {portable = false, pointSize, indentOffset = 0}
         'calc(' + measure + ' * var(--md-text-body))');
     });
   if (portable && value.hyphens === 'auto') css.push('hyphens:auto');
+  if (has(value, 'line')) {
+    const point = linePoint(value.line);
+    const unit = point && 'calc(' + decimal(Number((point.points / 12).toFixed(6))) + ' * var(--md-unit))';
+    css.push('line-height:' + (!point ? decimal(value.line) : portable ? decimal(point.points) + 'pt' : point.atLeast ? 'max(1.2em, ' + unit + ')' : unit));
+  }
+  for (const [key, prop] of [['before', 'margin-top'], ['after', 'margin-bottom']])
+    if (has(value, key)) css.push(portable ? prop + ':' + decimal(value[key]) + 'pt' :
+      '--md-' + key + ':calc(' + decimal(Number((value[key] / 12).toFixed(6))) + ' * var(--md-unit))');
   return css.join(';');
 }
 
 export function textLayout(style, {listMarker = false, pointSize, offset = 0} = {}) {
+  const get = property => (typeof style?.getPropertyValue === 'function' ? style.getPropertyValue(property) :
+    style?.[property] ?? style?.[property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())] ?? '').trim();
   const value = {};
   for (const [key, property] of (listMarker ? [['marker', 'margin-inline-start']] : [['first', 'text-indent'], ['indent', 'margin-inline-start']])) {
-    const raw = style?.getPropertyValue(property).trim() || '';
+    const raw = get(property);
     const match = /^(-?(?:0|[1-9]\d*)(?:\.\d{1,6})?)(em|pt)$/.exec(raw);
     const level = Number(((match ? Number(match[1]) / (match[2] === 'pt' ? pointSize : 1) / 2 : 0) +
       (key === 'first' ? 0 : offset)).toFixed(6));
     if (Number.isFinite(level) && level) value[key] = level;
   }
-  if (!listMarker && style?.getPropertyValue('hyphens').trim() === 'auto') value.hyphens = 'auto';
+  if (!listMarker) {
+    if (get('hyphens') === 'auto') value.hyphens = 'auto';
+    for (const [key, property] of [['before', 'margin-top'], ['after', 'margin-bottom']]) {
+      const raw = get(property);
+      if (/^(?:0|[1-9]\d{0,2})(?:\.\d{1,2})?pt$/i.test(raw)) {
+        const points = Number(raw.slice(0, -2));
+        if (spaceValue(points)) value[key] = points;
+      }
+    }
+    const line = get('line-height');
+    if (/^[0-4](?:\.\d{1,2})?$/.test(line)) {
+      const factor = Number(line);
+      if (lineValue(factor)) value.line = factor;
+    } else if (/^(?:0|[1-9]\d{0,2})(?:\.\d{1,2})?pt\+?$/i.test(line)) {
+      const atLeast = line.endsWith('+'), points = Number(line.slice(0, atLeast ? -3 : -2));
+      const formatted = decimal(points) + (atLeast ? 'pt+' : 'pt');
+      if (lineValue(formatted)) value.line = formatted;
+    }
+  }
   return value;
 }
 
@@ -173,7 +223,8 @@ export function formatLayout(value) {
     if (has(value, key) && !(key === 'y' && value.y === 0) && !(key === 'rotate' && value.rotate === 0) &&
       !(key === 'opacity' && value.opacity === 100)) pairs.push(key + '=' +
       (key === 'width' || key === 'x' || key === 'opacity' ? decimal(value[key]) + '%' : key === 'y' ? decimal(value.y) + 'em' :
-        key === 'rotate' ? decimal(value.rotate) + 'deg' : value[key]));
+        key === 'rotate' ? decimal(value.rotate) + 'deg' : key === 'before' || key === 'after' ? decimal(value[key]) + 'pt' :
+        key === 'line' ? (typeof value.line === 'number' ? decimal(value.line) : value.line) : value[key]));
   }
   return pairs.length ? '<!--md-layout:v1 ' + pairs.join(' ') + '-->' : '';
 }

package/package.json

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

@@ -219,6 +219,30 @@
    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. */
+: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);
+}
 
 /* Radar gives these SVG labels a color declaration; SVG text needs a fill. */
 :where(.md-render) svg.rapier-diagram[aria-roledescription="radar"] :is(.radarTitle,.radarAxisLabel){fill:currentColor}
@@ -276,6 +300,8 @@
 .md-render h6{font-size:var(--md-text-body);font-weight:var(--md-fw-semibold);color:var(--md-heading-muted-color)}
 .md-render p{margin:0 0 var(--md-gap-paragraph)}
 .md-render p[data-md-picture]{margin-bottom:var(--md-gap-block)}
+.md-render :is(p,h1,h2,h3,h4,h5,h6)[data-md-before]{--md-before:0px;margin-top:var(--md-before)}
+.md-render :is(p,h1,h2,h3,h4,h5,h6)[data-md-after]{--md-after:0px;margin-bottom:var(--md-after)}
 .md-render ul,.md-render ol{margin:0 0 var(--md-gap-block);padding-inline-start:var(--md-space-5)}
 .md-render ul{list-style:none}
 .md-render ul>li{position:relative;--md-marker:0px}
@@ -426,11 +452,11 @@
 /* The house focus (rapier-app.css) in the document and on the exported page: the underline thickens, no ring. */
 .md-render a:focus-visible,.md-render ul.rapier-jump-list>li>a:focus-visible,.md-render .footnote-ref a:focus-visible,.md-render summary:focus-visible{outline:none;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.2em}
 
+/* The title over a table of contents ("Contents", "Table of contents", "Jump to"), as written and bigger than its
+   entries. */
 .md-render .rapier-jump-label{
 	margin:0 0 calc(.5 * var(--md-unit));
-	font:var(--md-fw-semibold) calc(.72 * var(--md-unit))/1.4 var(--md-font-mono);
-	letter-spacing:var(--md-track-caps);
-	text-transform:uppercase;
+	font:var(--md-fw-semibold) calc(1.3 * var(--md-unit))/1.3 var(--md-font-sans);
 	color:var(--md-color-text);
 }
 .md-render .rapier-jump-label strong{font:inherit}
@@ -459,20 +485,22 @@
 	top:var(--md-jump-circle-top);
 	width:var(--md-jump-circle);height:var(--md-jump-circle);
 	box-sizing:border-box;
-	border:2px solid var(--md-color-accent-text);
+	border:2px solid var(--md-color-line);
 	background:var(--md-color-bg);
 	border-radius:50%;
 	z-index:1;
 }
-/* The dotted line is a numbered list's (3px, the text's black or white): from below this circle to the next circle's
-   center, which covers its end; none after the last item. --md-item-gap is the gap the spacing settings give. */
+/* The circles and dots wear the text's black or white; only the underline is accent. Three
+   3px dots, evenly spaced, from below this circle to the next circle's top; the line runs on under that circle's
+   center, which covers it. None after the last item. --md-item-gap is the gap the spacing settings give. */
 .md-render ul.rapier-jump-list>li:not(:last-child)::after{
 	content:'';
 	position:absolute;
 	inset-inline-start:calc(var(--md-jump-marker-inline-start) + var(--md-jump-circle) / 2 - 1.5px);
 	top:calc(var(--md-jump-circle-top) + var(--md-jump-circle));
 	bottom:calc(-1 * (var(--md-item-gap, var(--md-jump-gap)) + var(--md-jump-circle-top) + var(--md-jump-circle) / 2));
-	border-inline-start:3px dotted var(--md-color-line);
+	width:3px;
+	background:radial-gradient(circle closest-side,var(--md-color-line) 92%,transparent) top/3px calc((100% - var(--md-jump-circle) / 2) / 3) repeat-y;
 	z-index:0;
 }
 .md-render ul.rapier-jump-list>li>a{