rapier-markdown-kit 1.1.59 → 1.1.63

package/dist/kit/ledger/carried.mjs

@@ -1,5 +1,6 @@
 // SPDX-License-Identifier: MIT
 import {readLedger} from './format.mjs';
+import {sha256} from './hash.mjs';
 import {authorship as projectAuthorship, readAuthorship} from './authorship.mjs';
 import {canonicalJSON, fault} from './data.mjs';
 export function encodeCarried(text) {
@@ -67,3 +68,53 @@ export function readDocument(source) {
   const text = source.slice(0, at);
   return {text, ...validateParts(text, parts)};
 }
+
+// One portable baseline. A digest is integrity evidence, not authentication of the named proposer.
+export function readBase(value) {
+  if (!value || typeof value !== 'object' || typeof value.text !== 'string' ||
+      typeof value.sha256 !== 'string' || !/^[a-f0-9]{64}$/.test(value.sha256) || sha256(value.text) !== value.sha256)
+    throw fault('proposal base SHA-256 differs from its text');
+  if (typeof value.revision !== 'string' || !value.revision || value.revision.length > 256 || /[\u0000-\u001f\u007f]/.test(value.revision))
+    throw fault('invalid proposal base revision');
+  if (typeof value.name !== 'string' || !value.name || value.name.length > 255 || /[\\/\u0000-\u001f\u007f]/.test(value.name))
+    throw fault('invalid proposal base name');
+  if (typeof value.by !== 'string' || !value.by.trim() || value.by.length > 96 || /[\u0000-\u001f\u007f]/.test(value.by))
+    throw fault('a proposal needs its proposer name');
+  if (typeof value.at !== 'string' || !/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d{1,3})?Z$/.test(value.at) || !Number.isFinite(Date.parse(value.at)))
+    throw fault('the time of a proposal is an ISO 8601 UTC timestamp');
+  return {text: value.text, sha256: value.sha256, revision: value.revision, name: value.name, by: value.by, at: value.at};
+}
+const escapeAttribute = value => value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+const readAttribute = value => value.replace(/&(quot|lt|gt|amp);/g, (_, name) => ({quot: '"', lt: '<', gt: '>', amp: '&'})[name]);
+export function writeBase(text, value) {
+  if (value == null) return '';
+  const base = readBase(value);
+  if (base.text === text) return '';
+  return '<script type="text/markdown" id="rapier-base"' + ['name', 'sha256', 'revision', 'by', 'at']
+    .map(key => ' data-' + key + '="' + escapeAttribute(base[key]) + '"').join('') + '>' + encodeCarried(base.text) + '</script>';
+}
+export function readBaseElements(elements) {
+  const rows = [...elements].filter(element => element.id === 'rapier-base');
+  if (!rows.length) return null;
+  const row = rows[0];
+  if (rows.length !== 1 || row.type !== 'text/markdown' || (row.tagName && row.tagName.toLowerCase() !== 'script'))
+    throw fault('duplicate or executable proposal base');
+  const get = name => row.getAttribute ? row.getAttribute('data-' + name) : row[name];
+  return readBase({text: decodeCarried(row.textContent), ...Object.fromEntries(['name', 'sha256', 'revision', 'by', 'at'].map(key => [key, get(key)]))});
+}
+export function takeBase(html) {
+  const elements = [];
+  const stripped = html.replace(/<script\b([^>]*)>([\s\S]*?)<\/script\s*>/gi, (whole, attrs, content) => {
+    const pairs = [...attrs.matchAll(/(?:^|\s)([\w-]+)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/g)].map(m => [m[1].toLowerCase(), readAttribute(m[2] ?? m[3] ?? m[4])]);
+    if (!pairs.some(([key, value]) => key === 'id' && value === 'rapier-base')) return whole;
+    const seen = new Set(), values = {};
+    for (const [key, value] of pairs) {
+      if (seen.has(key)) throw fault('ambiguous proposal base');
+      seen.add(key); values[key] = value;
+    }
+    elements.push({id: values.id, type: values.type, textContent: content,
+      ...Object.fromEntries(['name', 'sha256', 'revision', 'by', 'at'].map(key => [key, values['data-' + key]]))});
+    return '';
+  });
+  return {html: stripped, base: readBaseElements(elements)};
+}

package/dist/kit/render.mjs

@@ -406,7 +406,8 @@ async function _rapierSharedSourceCarrier(context, root) {
 		(forms.definitions.length ? ' data-image-definitions="' + forms.definitions.map(encodeURIComponent).join(' ') + '"' : '') + '>\n' +
 		forms.carried + '\n</script>\n' +
 		// The optional edit ledger (W/4): carried only when the host binds its owner; a host without one writes none.
-		(RapierLedgerCarried ? RapierLedgerCarried.writeParts(forms.resolved, _rapierLedgerParts(forms.resolved, context.ledger, context.carried)) : '');
+		(RapierLedgerCarried ? RapierLedgerCarried.writeParts(forms.resolved, _rapierLedgerParts(forms.resolved, context.ledger, context.carried)) +
+			RapierLedgerCarried.writeBase(forms.resolved, context.proposalBase) : '');
 }
 
 function _rapierSharedResolve(text, ids, images, definitions) {
@@ -438,7 +439,7 @@ async function _rapierReadSharedDocument(text, filename) {
 	const template = document.createElement('template');
 	template.innerHTML = html;
 	const invalid = () => { throw new Error('The editable source in this web page is incomplete or changed'); };
-	const carriers = template.content.querySelectorAll('script[type="' + _RAPIER_SHARED_SOURCE_TYPE + '"]');
+	const carriers = Array.from(template.content.querySelectorAll('script[type="' + _RAPIER_SHARED_SOURCE_TYPE + '"]')).filter(row => row.id !== 'rapier-base');
 	if (carriers.length !== 1) return invalid();
 	const carrier = carriers[0];
 	const name = carrier.getAttribute('data-filename') || '', kind = carrier.getAttribute('data-kind'), sha256 = carrier.getAttribute('data-sha256') || '';
@@ -463,7 +464,8 @@ async function _rapierReadSharedDocument(text, filename) {
 	const bom = source.charCodeAt(0) === 0xFEFF;
 	if (RapierTextCodec.normalizeDocument(source) !== (bom ? source.slice(1) : source)) return invalid();
 	const parts = RapierLedgerCarried ? RapierLedgerCarried.readParts(source, Array.from(template.content.querySelectorAll('#rapier-ledger, #rapier-authorship'))) : {};
-	return {source, filename: name, kind, bom, ...parts};
+	const proposalBase = RapierLedgerCarried?.readBaseElements(Array.from(template.content.querySelectorAll('#rapier-base'))) || null;
+	return {source, filename: name, kind, bom, ...parts, proposalBase};
 }
 
 function _rapierSharedPageFallbackCss() {
@@ -577,6 +579,10 @@ function _rapierSharedPageLayout(root) {
 				image.style.width = naturalWidth + 'px';
 				image.style.marginLeft = image.style.marginRight = ((bounds.width - naturalWidth) / 2) + 'px';
 			}
+		} else if (layout.lines != null) {
+			// Sized in lines: the float shrinks to the picture, whose height is the lines (spec/md-layout.mjs imageStyle).
+			image.style.width = 'auto';
+			image.style.height = globalThis.RapierMarkdownLayout.linesHeightCss(layout.lines);
 		} else {
 			if (layout.width != null) paragraph.style.width = layout.width + '%';
 			else if (image.getAttribute('width')) paragraph.style.width = image.getAttribute('width') + 'px';
@@ -697,7 +703,7 @@ async function _rapierRequireOfflinePageImages(root) {
 }
 
 async function _rapierBuildSharedPage(captured) {
-	const context = await _rapierPrepareInterchangeContext({kind: 'share'}, captured);
+	const context = await _rapierPrepareInterchangeContext({kind: 'share'}, captured?.proposalText == null ? captured : {...captured, canonical: captured.proposalText});
 	// One owner for every HTML file Rapier writes, including offline-image admission and CSP.
 	// Share adds only the nearest-side no-script float and the long-code treatment.
 	const artifact = await _rapierBuildArtifact({
@@ -1306,7 +1312,9 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
 
         let ownerLed = false;
         for (const {element: source, image, layout, width: imageWidth} of anchors.get(element) || []) {
-          const unrotated = geometry.imageBox(width, image.naturalWidth, image.naturalHeight, layout, imageWidth);
+          // A picture sized in lines (`lines`) reads its anchor's line and stands on the first line's cap height, as the live editor.
+          const lines = layout.lines != null ? geometry.lineMetrics(element) : null;
+          const unrotated = geometry.imageBox(width, image.naturalWidth, image.naturalHeight, layout, imageWidth, lines);
           if (!unrotated) { restore(); return; }
           // rasterReserved (layout/model.mjs).
           const rasterRad = (layout.rotate || 0) * Math.PI / 180;
@@ -1317,7 +1325,7 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
           const em = parseFloat(computed.fontSize) || 16;
           const topInset = (parseFloat(computed.paddingTop) || 0) + (parseFloat(computed.borderTopWidth) || 0);
           const height = Math.max(0, bounds.height - topInset - (parseFloat(computed.paddingBottom) || 0) - (parseFloat(computed.borderBottomWidth) || 0));
-          let y = bounds.top - origin + topInset + Math.min(layout.y || 0, height / em) * em;
+          let y = bounds.top - origin + topInset + geometry.linesTop(layout, lines) + Math.min(layout.y || 0, height / em) * em;
           if (!outOfFlow(layout)) {
             for (const obstacle of [...obstacles].sort((left, right) => left.y - right.y)) {
               if (obstacle.x < left + rectangle.width + 10 && obstacle.x + obstacle.width > left - 10 &&
@@ -1325,14 +1333,14 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
                 y = obstacle.y + obstacle.height + 10;
             }
             // R87k: a picture pushed down by an earlier one takes its owner with it. A deliberate `y` stays; only the collision push moves the paragraph.
-            const ownerTop = bounds.top - origin + topInset + Math.min(layout.y || 0, height / em) * em;
+            const ownerTop = bounds.top - origin + topInset + geometry.linesTop(layout, lines) + Math.min(layout.y || 0, height / em) * em;
             // Only the first picture of an owner takes it down.
             if (!ownerLed && y > ownerTop + 0.5) {
               clearTo(element, (bounds.top - origin) + (y - ownerTop), origin, source);
               bounds = box(element);
             }
             ownerLed = true;
-            obstacles.push(...geometry.pictureSlices(profile(image, layout), left, y, rectangle.width, rectangle.height));
+            obstacles.push(...geometry.linesSlices(geometry.pictureSlices(profile(image, layout), left, y, rectangle.width, rectangle.height), layout, lines, y, rectangle.height));
           }
           placed.push({source, image, rectangle, left, y, wrap: layout.wrap,
             visualLeft: left + visualDeltaX, visualTop: y + visualDeltaY, visualWidth: fit.fit.width, visualHeight: fit.fit.height,

package/dist/layout/model.mjs

@@ -82,10 +82,54 @@ export function mapFragment(run, fragment) {
   return {text: fragment.text, offsets, start: run.offsets[from], end: run.offsets[to]};
 }
 
-export function imageBox(columnWidth, naturalWidth, naturalHeight, layout = {}, defaultWidth = naturalWidth) {
+// The line a picture is measured in (`lines`, spec/md-layout.mjs): the anchor's line box, its type's cap height, and where that
+// cap height stands in the first line box (the half-leading model: the baseline sits half the leading below the box's top plus
+// the ascent). Read from the font as the page lays it out, so a text size or a line spacing moves the picture with the words.
+const fontMetrics = new Map(), measurers = new WeakMap();
+export function lineMetrics(element) {
+  const view = element?.ownerDocument?.defaultView;
+  if (!view) return null;
+  const computed = view.getComputedStyle(element), size = parseFloat(computed.fontSize) || 16;
+  const font = computed.fontStyle + ' ' + computed.fontWeight + ' ' + size + 'px ' + computed.fontFamily;
+  let metrics = fontMetrics.get(font);
+  if (!metrics) {
+    let context = measurers.get(element.ownerDocument);
+    if (!context) measurers.set(element.ownerDocument, context = element.ownerDocument.createElement('canvas').getContext('2d'));
+    if (!context) return null;
+    context.font = font;
+    const capital = context.measureText('H');
+    metrics = {ascent: capital.fontBoundingBoxAscent, descent: capital.fontBoundingBoxDescent, cap: capital.actualBoundingBoxAscent};
+    if (![metrics.ascent, metrics.descent, metrics.cap].every(finite) || !(metrics.cap > 0)) return null;
+    // A face still loading measures as its fallback: keep the answer only once the face is in.
+    if (element.ownerDocument.fonts?.check?.(font) !== false && element.ownerDocument.fonts?.status !== 'loading') fontMetrics.set(font, metrics);
+  }
+  const line = parseFloat(computed.lineHeight) || metrics.ascent + metrics.descent;
+  return {line, cap: metrics.cap, capTop: (line - metrics.ascent - metrics.descent) / 2 + metrics.ascent - metrics.cap};
+}
+
+// `lines` tall: from the first line's cap height to the Nth line's baseline, N - 1 lines and one cap.
+export function linesHeight(lines, metrics) {
+  const height = Number.isInteger(lines) && lines > 0 && metrics && finite(metrics.line) && finite(metrics.cap)
+    ? (lines - 1) * metrics.line + metrics.cap : NaN;
+  return height > 0 ? height : null;
+}
+
+// A picture sized in lines keeps its standoff off the line after its last: below its foot (the Nth baseline) the gap stops
+// at that line's bottom, so exactly N lines stand beside it.
+export function linesSlices(slices, layout, metrics, y, height) {
+  if (layout?.lines == null || !metrics || !(slices?.length)) return slices;
+  const floor = y + height + Math.max(0, metrics.line - metrics.capTop - metrics.cap) - .5;
+  return slices.filter(slice => slice.y < floor).map(slice => slice.y + slice.height > floor ? {...slice, height: floor - slice.y} : slice);
+}
+
+// Where a picture's top stands in its anchor before `y`: a picture sized in lines stands on the first line's cap height.
+export const linesTop = (layout, metrics) => layout?.lines != null && finite(metrics?.capTop) ? metrics.capTop : 0;
+
+export function imageBox(columnWidth, naturalWidth, naturalHeight, layout = {}, defaultWidth = naturalWidth, metrics = null) {
   if (![columnWidth, naturalWidth, naturalHeight, defaultWidth].every(value => finite(value) && value > 0) ||
       !validLayout(layout) || layout.align === 'justify') return null;
-  const requestedWidth = layout.width == null ? defaultWidth : columnWidth * layout.width / 100;
+  const tall = layout.lines == null ? null : linesHeight(layout.lines, metrics);
+  const requestedWidth = tall ? tall * naturalWidth / naturalHeight : layout.width == null ? defaultWidth : columnWidth * layout.width / 100;
   if (!finite(requestedWidth) || requestedWidth <= 0) return null;
   const width = Math.min(columnWidth, requestedWidth), height = width * naturalHeight / naturalWidth;
   const center = layout.x == null ? width / 2 : columnWidth * layout.x / 100;

package/dist/spec/md-layout.mjs

@@ -2,13 +2,16 @@
 
 // `rotate`: degrees in (-180, 180], one decimal, omitted when 0; never written for a Rapier drawing (its turn lives in its SVG).
 // `opacity`: a picture's fade, a whole percent from 5 to 100, omitted at 100; the picture's bytes never change.
+// `lines`: a picture's height in lines of the text beside it, set as a drop cap is (CSS `initial-letter`): its top on the first
+// line's cap height, its foot on the Nth line's baseline, its width from its own aspect. A whole number 1 to 12; never with `width`.
 // `first`/`indent`: a paragraph's first-line indent and its whole-block indent, in levels of one step (2em), a whole number from 1 to 4, omitted when 0; text only.
-export const fields = new Set(['align', 'width', 'wrap', 'x', 'y', 'rotate', 'opacity', 'first', 'indent']);
+export const fields = new Set(['align', 'width', 'lines', 'wrap', 'x', 'y', 'rotate', 'opacity', 'first', 'indent']);
 export const alignments = new Set(['left', 'center', 'right', 'justify']);
 // `behind`/`front`: out of flow; the paragraph lays out as though the picture were absent.
 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 level = value => Number.isInteger(value) && value >= 1 && value <= 4;
 const oneDecimalDegrees = value => typeof value === 'number' && Number.isFinite(value) &&
   value > -180 && value <= 180 && Math.abs(value * 10 - Math.round(value * 10)) < 1e-9;
@@ -19,6 +22,7 @@ export function validLayout(value) {
       Object.keys(value).some(key => !fields.has(key))) return false;
   return (!has(value, 'align') || alignments.has(value.align)) &&
     (!has(value, 'width') || percent(value.width) && value.width > 0) &&
+    (!has(value, 'lines') || lineCount(value.lines) && !has(value, 'width')) &&
     (!has(value, 'wrap') || wraps.has(value.wrap)) &&
     (!has(value, 'x') || percent(value.x) && (has(value, 'wrap') || has(value, 'width'))) &&
     (!has(value, 'y') || typeof value.y === 'number' && Number.isFinite(value.y) && value.y >= -50 && has(value, 'wrap')) &&
@@ -59,6 +63,9 @@ export function parseLayout(comment) {
     } else if (key === 'opacity') {
       if (!/^[1-9]\d{0,2}%$/.test(raw)) return null;
       value.opacity = Number(raw.slice(0, -1));
+    } else if (key === 'lines') {
+      if (!/^[1-9]\d?$/.test(raw)) return null;
+      value.lines = Number(raw);
     } else if (key === 'first' || key === 'indent') {
       if (!/^[1-4]$/.test(raw)) return null;
       value[key] = Number(raw);
@@ -75,7 +82,8 @@ export function decodeLayoutAttribute(value) {
 
 export const parseLayoutAttribute = value => parseLayout(decodeLayoutAttribute(value));
 
-// The picture's own CSS: its normal-flow width and x, and its fade.
+// The picture's own CSS: its normal-flow width and x, its height in lines, and its fade. `1cap` is the cap height of the
+// picture's own text; a renderer that sets the picture beside its anchor measures that paragraph's line and cap instead.
 export function imageStyle(value) {
   if (!validLayout(value)) return '';
   const parts = [];
@@ -85,10 +93,13 @@ export function imageStyle(value) {
       decimal(Number(Math.max(0, Math.min(100 - width, value.x - width / 2)).toFixed(6))) + '%;margin-right:0';
     parts.push('width:' + decimal(width) + '%;height:auto' + left);
   }
+  if (value.lines != null) parts.push('width:auto;max-width:100%;height:' + linesHeightCss(value.lines));
   if (value.opacity != null && value.opacity < 100) parts.push('opacity:' + decimal(value.opacity / 100));
   return parts.join(';');
 }
 
+export const linesHeightCss = lines => lines === 1 ? '1cap' : 'calc(' + (lines - 1) + ' * var(--md-line, 1.6em) + 1cap)';
+
 // Controls remain real DOM nodes while their surrounding text flows. A checkbox, link or
 // disclosure is not a reason to exclude its entire block from picture placement.
 export function wrapTextBlock(element) {

package/dist/spec/md-marks.mjs

@@ -11,11 +11,12 @@ const inkReader = () => {
 
 	// Ink (docs/markdown-standard.md, "Ink"; the design docs/briefs/ink.md): a pen stroke that stays with the words it
 	// marks, a paired comment with the colour span's shape. The opener holds the stroke:
-	//   <!--ink KIND [NUMBER] [COLOUR] [box=W,H] [at=X,Y] [PATH]-->words<!--/ink-->
+	//   <!--ink KIND [NUMBER] [COLOUR] [w=N] [box=W,H] [at=X,Y] [PATH]-->words<!--/ink-->
 	// KIND is the stroke's kind, decided once when it was lifted; COLOUR is exactly the colour span's value, red when
 	// absent; box is the frame's size when the stroke was drawn and at the frame's offset from the words' box, both in
-	// hundredths of an em; PATH is the stroke, its first point absolute in the frame and the rest as moves, hundredths of an
-	// em. One spelling: the fields in this order, one space between, integers only. A comment that does not read this way
+	// hundredths of an em; w is the pen's width as Draw counts a nib (2 to 24; 9 is the default and is never written): the stroke is drawn 0.11 em
+	// wide at 9 and in proportion to w otherwise; PATH is the stroke, its first point absolute in the frame and the rest as
+	// moves, hundredths of an em. One spelling: the fields in this order, one space between, integers only. A comment that does not read this way
 	// is ordinary comment text and marks nothing. Ink pairs do not nest in each other. Arrow/end alone take a pairing
 	// number, an end takes no other data; under, strike and arrow may omit a path for a line derived from their words.
 	const INK_KINDS = Object.freeze(['under', 'strike', 'ring', 'bracket', 'free', 'arrow', 'end']);
@@ -23,7 +24,7 @@ const inkReader = () => {
 	const INK_PATH_MAX = 160;
 	const INK_INT_MAX = 999999;
 	const INK_INT = '-?\\d{1,6}';
-	const INK_OPEN_BODY = '(' + INK_KINDS.join('|') + ')(?: ([1-9]\\d{0,5}))?(?: (' + COLOR_VALUE + '))?(?: box=(\\d{1,6}),(\\d{1,6}))?(?: at=(' + INK_INT + '),(' + INK_INT + '))?'
+	const INK_OPEN_BODY = '(' + INK_KINDS.join('|') + ')(?: ([1-9]\\d{0,5}))?(?: (' + COLOR_VALUE + '))?(?: w=([1-9]\\d?))?(?: box=(\\d{1,6}),(\\d{1,6}))?(?: at=(' + INK_INT + '),(' + INK_INT + '))?'
 		+ '(?: (' + INK_INT + ',' + INK_INT + '(?: ' + INK_INT + ',' + INK_INT + ')*))?';
 	const INK_OPEN_PATTERN = '<!--ink ' + INK_OPEN_BODY + '-->';
 
@@ -32,9 +33,11 @@ const inkReader = () => {
 	// INK_OPEN_PATTERN and this function; isInkClose reads INK_CLOSE.
 	function readInkMatch(match) {
 		const linked = match[1] === 'arrow' || match[1] === 'end';
-		if (linked !== (match[2] != null) || (!linked && match[1] !== 'under' && match[1] !== 'strike' && match[8] == null)) return null;
-		if (match[1] === 'end' && match.slice(3, 9).some(value => value != null)) return null;
-		const moves = match[8] == null ? [] : match[8].split(' ').map(pair => pair.split(',').map(Number));
+		if (linked !== (match[2] != null) || (!linked && match[1] !== 'under' && match[1] !== 'strike' && match[9] == null)) return null;
+		if (match[1] === 'end' && match.slice(3, 10).some(value => value != null)) return null;
+		const width = match[4] == null ? null : Number(match[4]);
+		if (width != null && (width < 2 || width > 24 || width === 9)) return null;
+		const moves = match[9] == null ? [] : match[9].split(' ').map(pair => pair.split(',').map(Number));
 		if (moves.length > INK_PATH_MAX) return null;
 		const path = moves.length ? [moves[0]] : [];
 		for (let i = 1; i < moves.length; i++) {
@@ -47,8 +50,9 @@ const inkReader = () => {
 			kind: match[1],
 			...(linked ? { id: Number(match[2]) } : {}),
 			hex: colour == null ? null : (colour.charCodeAt(0) === 0x23 ? colour : TEXT_COLOR_NAMES[colour]),
-			box: match[4] == null ? null : [Number(match[4]), Number(match[5])],
-			at: match[6] == null ? null : [Number(match[6]), Number(match[7])],
+			...(width == null ? {} : { width }),
+			box: match[5] == null ? null : [Number(match[5]), Number(match[6])],
+			at: match[7] == null ? null : [Number(match[7]), Number(match[8])],
 			path,
 		});
 	}
@@ -144,7 +148,7 @@ const inkPair = (value, name, nonNegative = false) => {
 	return pair;
 };
 
-// {kind, id?, hex?, box?, at?, path?} to the opener; the path's points are absolute in the frame and become moves after the
+// {kind, id?, hex?, width?, box?, at?, path?} to the opener; the path's points are absolute in the frame and become moves after the
 // first. Refuses with a TypeError rather than writing a spelling the reader would not read.
 export function formatInkOpen(mark) {
 	if (!mark || typeof mark !== 'object') throw new TypeError('ink: a mark is an object');
@@ -153,7 +157,7 @@ export function formatInkOpen(mark) {
 	if (linked ? !Number.isInteger(mark.id) || mark.id <= 0 || mark.id > INK_INT_MAX : mark.id != null) throw new TypeError('ink: only an arrow or its end has a positive pairing number');
 	const id = linked ? ' ' + mark.id : '';
 	if (mark.kind === 'end') {
-		if (mark.hex != null || mark.box != null || mark.at != null || (mark.path != null && (!Array.isArray(mark.path) || mark.path.length))) throw new TypeError('ink: an arrow end holds only its pairing number');
+		if (mark.hex != null || mark.width != null || mark.box != null || mark.at != null || (mark.path != null && (!Array.isArray(mark.path) || mark.path.length))) throw new TypeError('ink: an arrow end holds only its pairing number');
 		return '<!--ink end' + id + '-->';
 	}
 	let colour = '';
@@ -162,6 +166,8 @@ export function formatInkOpen(mark) {
 		if (!new RegExp('^' + COLOR_VALUE + '$').test(value)) throw new TypeError('ink: the colour is the colour span\'s value');
 		colour = ' ' + value;
 	}
+	if (mark.width != null && (!Number.isInteger(mark.width) || mark.width < 2 || mark.width > 24)) throw new TypeError('ink: the width is an integer from 2 to 24, and 9 is spelled by leaving it out');
+	const width = mark.width == null || mark.width === 9 ? '' : ' w=' + mark.width;
 	const box = mark.box == null ? '' : ' box=' + inkPair(mark.box, 'box', true).join(',');
 	const at = mark.at == null ? '' : ' at=' + inkPair(mark.at, 'at').join(',');
 	const optionalPath = linked || mark.kind === 'under' || mark.kind === 'strike';
@@ -170,7 +176,7 @@ export function formatInkOpen(mark) {
 	const points = path.map(point => inkPair(point, 'path'));
 	const moves = points.length ? [points[0].join(',')] : [];
 	for (let i = 1; i < points.length; i++) moves.push([inkInt(points[i][0] - points[i - 1][0], 'path move'), inkInt(points[i][1] - points[i - 1][1], 'path move')].join(','));
-	return '<!--ink ' + mark.kind + id + colour + box + at + (moves.length ? ' ' + moves.join(' ') : '') + '-->';
+	return '<!--ink ' + mark.kind + id + colour + width + box + at + (moves.length ? ' ' + moves.join(' ') : '') + '-->';
 }
 
 export function formatInkRun(mark, content) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rapier-markdown-kit",
-  "version": "1.1.59",
+  "version": "1.1.63",
   "description": "Read, render, write and style Self-contained Markdown, and carry its optional edit ledger: the shared HTML writer, semantic renderer, stylesheet, layout, marks, pictures, Will/1, replay, authorship and offline merge. MIT, no npm dependencies.",
   "keywords": [
     "markdown",