@memorysmithapp/markdown-renderer 0.7.1 → 0.8.1

package/dist/edit/image-size.js

@@ -1,13 +1,16 @@
 /**
  * The size an image is drawn at, as its notation writes it (#98): the dimensions after the pipe
  * of a Markdown image's description, `![description|300](address)` (`SPEC.md` §3.14), or of the
- * embed of a file the notebook keeps, `![[photo.jpg|300]]` (§5.7). The editor reads them and
- * rewrites them, and no other byte.
+ * embed of a file the notebook keeps, `![[photo.jpg|300]]` (§5.7) — pixels, a width and a height,
+ * or a share of the page (#108). The editor reads them and rewrites them, and the description
+ * before the pipe of a Markdown image (#106), and no other byte.
  */
-import { readDimensions, readImageAlt } from '../image-dimensions.js';
+import { readDimensions, readImageAlt, writeDimensions } from '../image-dimensions.js';
 /** The largest width the notation writes: five digits (`SPEC.md` §3.14). */
 export const MAX_IMAGE_WIDTH = 99999;
-const MARKDOWN_IMAGE = /^!\[([^\]]*)\]\(/;
+const UNSIZED = { width: null, height: null, percent: null };
+/** The alt text of a Markdown image, a bracket escaped inside it included. */
+const MARKDOWN_IMAGE = /^!\[((?:\\.|[^\]\\])*)\]\(/;
 const EMBED = /^!\[\[([^\]]*)\]\]$/;
 /**
  * The size an image's source declares, and where it is written. `null` for a source that is not an
@@ -18,7 +21,10 @@ export function readImageSize(source) {
     // A block's line may be indented, or end in spaces, around its one embed.
     const lead = source.length - source.trimStart().length;
     const size = readTrimmed(source.trim());
-    return size && lead ? { ...size, at: { from: size.at.from + lead, to: size.at.to + lead } } : size;
+    if (!size || !lead)
+        return size;
+    const shift = (span) => ({ ...span, from: span.from + lead, to: span.to + lead });
+    return { ...size, at: shift(size.at), description: size.description && shift(size.description) };
 }
 function readTrimmed(source) {
     const image = MARKDOWN_IMAGE.exec(source);
@@ -26,9 +32,12 @@ function readTrimmed(source) {
         const alt = image[1] ?? '';
         const start = 2;
         const read = readImageAlt(alt);
-        if (read.width === null)
-            return { width: null, height: null, at: { from: start + alt.length, to: start + alt.length }, pipe: '|' };
-        return { width: read.width, height: read.height, at: { from: start + alt.lastIndexOf('|'), to: start + alt.length }, pipe: '|' };
+        if (read.width === null && read.percent === null) {
+            const end = start + alt.length;
+            return { ...UNSIZED, at: { from: end, to: end }, pipe: '|', description: { text: unescape(alt), from: start, to: end } };
+        }
+        const pipe = start + alt.lastIndexOf('|');
+        return { ...read, at: { from: pipe, to: start + alt.length }, pipe: '|', description: { text: unescape(alt.slice(0, pipe - start)), from: start, to: pipe } };
     }
     const embed = EMBED.exec(source);
     if (embed) {
@@ -36,26 +45,52 @@ function readTrimmed(source) {
         const start = 3;
         const pipe = /\\?\|/.exec(inner);
         if (!pipe)
-            return { width: null, height: null, at: { from: start + inner.length, to: start + inner.length }, pipe: '|' };
+            return { ...UNSIZED, at: { from: start + inner.length, to: start + inner.length }, pipe: '|', description: null };
         const measured = readDimensions(inner.slice(pipe.index + pipe[0].length));
         if (!measured)
             return null;
-        return { width: measured.width, height: measured.height, at: { from: start + pipe.index, to: start + inner.length }, pipe: pipe[0] };
+        return { ...measured, at: { from: start + pipe.index, to: start + inner.length }, pipe: pipe[0], description: null };
     }
     return null;
 }
+/** The text of a description as a reader gets it: a backslash escape is the character it escapes. */
+function unescape(text) {
+    return text.replace(/\\([!-/:-@[-`{-~])/g, '$1');
+}
 /**
- * The change that draws the image whose source starts at `from` at `width`, its height following,
- * or at its own size for `null`: the dimensions written, replaced or taken away, and nothing else.
- * Empty when the source is not an image's notation or already says so.
+ * The change that draws the image whose source starts at `from` at the dimensions asked — a width
+ * as a number, its height following, or whole `Dimensions` — or at its own size for `null`: the
+ * dimensions written, replaced or taken away, and nothing else. Empty when the source is not an
+ * image's notation, already says so, or the dimensions asked are none the notation writes: a
+ * value out of its range is refused, never brought into it.
  */
-export function resizeImage(source, from, width) {
+export function resizeImage(source, from, asked) {
     const size = readImageSize(source);
     if (!size)
         return [];
-    const wanted = width === null ? null : Math.min(MAX_IMAGE_WIDTH, Math.max(1, Math.round(width)));
-    if (wanted === size.width && (wanted === null || size.height === null))
+    const wanted = typeof asked === 'number' ? { width: Math.round(asked), height: null, percent: null } : asked;
+    if (wanted !== null && !writable(wanted))
+        return [];
+    const insert = wanted === null ? '' : `${size.pipe}${writeDimensions(wanted)}`;
+    if (insert === source.slice(size.at.from, size.at.to))
         return [];
-    const insert = wanted === null ? '' : `${size.pipe}${wanted}`;
     return [{ from: from + size.at.from, to: from + size.at.to, insert }];
 }
+/** Whether the notation writes these dimensions (§3.14): five digits from 1, or 1% to 100%. */
+function writable({ width, height, percent }) {
+    const pixels = (value) => Number.isInteger(value) && value >= 1 && value <= MAX_IMAGE_WIDTH;
+    if (percent !== null)
+        return width === null && height === null && Number.isInteger(percent) && percent >= 1 && percent <= 100;
+    return width !== null && pixels(width) && (height === null || pixels(height));
+}
+/**
+ * The change that writes `text` as the description of the Markdown image whose source starts at
+ * `from`, before its pipe, which it keeps (§3.14): a bracket and a backslash escaped, so the image
+ * stays one. Empty for an embed, which has no description to write (§5.8), and when nothing changes.
+ */
+export function describeImage(source, from, text) {
+    const size = readImageSize(source);
+    if (!size?.description || size.description.text === text)
+        return [];
+    return [{ from: from + size.description.from, to: from + size.description.to, insert: text.replace(/[\\[\]]/g, '\\$&') }];
+}

package/dist/edit/live.js

@@ -14,7 +14,7 @@ import { createRoot } from 'react-dom/client';
 import { followable } from '../address.js';
 import { highlightTree, languageToLoad, loadGrammar } from '../highlight.js';
 import { HostProvider, resolveHost } from '../host.js';
-import { readImageAlt } from '../image-dimensions.js';
+import { MarkdownImage } from '../Markdown.js';
 import { highlightLanguage } from '../highlight.js';
 import { analyze } from './analyze.js';
 import { DEFAULT_METRICS, estimateHeight, lineHeightOf, measureLines, measuredHeight, rememberHeight, withinReason } from './heights.js';
@@ -256,10 +256,21 @@ class BlockWidget extends WidgetType {
         mount(view, element, this.draw(view), this.source, this.identity, measured, held);
         element.addEventListener('mousedown', (event) => {
             const target = event.target;
-            if (target.closest('[data-ms-control]'))
+            // A control's, or a press in a frame its controls hold busy — a field focused, a handle
+            // dragged, the click a touch on them leaves behind — never shows the source (#107).
+            if (target.closest('[data-ms-control], [data-ms-busy]'))
                 return;
-            if (event.metaKey || event.ctrlKey)
+            // CodeMirror hands the editor no event from inside a drawn block: a link around it is followed here (#112).
+            if (event.metaKey || event.ctrlKey) {
+                followLinkAround(event, view, element);
                 return;
+            }
+            // A picture sized in place, as a table is edited in place, shows its source from its button or
+            // the keyboard, never from a click (#112); kept from placing the caret beside it, which would.
+            if (target.closest('[data-ms-in-place]')) {
+                event.preventDefault();
+                return;
+            }
             const widget = drawing.get(element) ?? this;
             if (!widget.revealsOnClick)
                 return;
@@ -425,15 +436,22 @@ class MathWidget extends WidgetType {
         return false;
     }
 }
-/** A Markdown image's description and address, when its address is one the page follows. */
+/**
+ * A Markdown image's alt text, address and title, when its address is one the page follows: a
+ * bare destination, or one in `<>` that may hold spaces, `<assets/diagram final.png>`.
+ */
 function readImage(source) {
-    const match = /^!\[([^\]]*)\]\(\s*<?([^)\s>]+)>?(?:\s+"[^"]*")?\s*\)$/.exec(source);
-    const address = match ? followable(match[2] ?? '') : '';
-    return match && address ? { alt: readImageAlt(match[1] ?? ''), address } : null;
+    const match = /^!\[((?:\\.|[^\]\\])*)\]\(\s*(?:<([^>\n]*)>|([^\s)]+))(?:\s+(?:"([^"]*)"|'([^']*)'))?\s*\)$/.exec(source);
+    const address = match ? followable(match[2] ?? match[3] ?? '') : '';
+    return match && address ? { alt: match[1] ?? '', address, title: match[4] ?? match[5] } : null;
 }
-/** An image drawn with its description and the dimensions it declares, as the page draws it (`SPEC.md` §3.14). */
-function drawImage({ alt, address }) {
-    return createElement('img', { className: 'cm-ms-image', src: address, alt: alt.description, width: alt.width ?? undefined, height: alt.height ?? undefined });
+/**
+ * An image drawn as the page draws it, by the page's own component: with its description and the
+ * dimensions it declares (`SPEC.md` §3.14), and as the kept file it names when its address names
+ * no host (§5.8, #104), so edit mode asks nothing of a path under the page either.
+ */
+function drawImage({ alt, address, title }) {
+    return createElement(MarkdownImage, { className: 'cm-ms-image', src: address, alt, ...(title === undefined ? {} : { title }) });
 }
 // ── Decorations ──────────────────────────────────────────────────────────────
 const hide = Decoration.replace({});
@@ -863,29 +881,96 @@ const blockKeys = Prec.high(keymap.of([
     { key: 'ArrowDown', run: enterBlock(true) },
     { key: 'ArrowUp', run: enterBlock(false) },
 ]));
-/** Follows a link with a modifier held: a wikilink through the host, an address the page follows in a new tab. */
-const follow = EditorView.domEventHandlers({
+/** Where the first press of a gesture fell in the note, read before the press moved the caret. */
+const firstPress = new WeakMap();
+/** The longest a browser counts two presses as one gesture: Windows' default double-click time. */
+const MULTI_CLICK_MS = 500;
+/**
+ * Selects the word, or the line, a double or a triple click starts on (#114). The first press puts
+ * the caret where it fell, which reveals the markers beside it, or hides the ones it left, and moves
+ * the rest of the line under the pointer by their width: the second press, read where it lands,
+ * would select the marker or the next word. It is read where the first one fell instead.
+ */
+const multiClick = EditorView.domEventHandlers({
     mousedown(event, view) {
-        if (!(event.metaKey || event.ctrlKey))
+        if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
             return false;
-        const target = event.target.closest('[data-target], [data-href]');
-        if (!target)
+        if (event.detail <= 1) {
+            const at = view.posAtCoords({ x: event.clientX, y: event.clientY });
+            if (at === null)
+                firstPress.delete(view);
+            else
+                firstPress.set(view, { at, time: event.timeStamp });
             return false;
-        event.preventDefault();
-        const { host } = view.state.facet(editorEnvironment);
-        const name = target.dataset['target'];
-        if (name !== undefined) {
-            const address = host.resolve(name);
-            if (address !== null)
-                host.navigate(address);
-            return true;
         }
-        const address = followable(target.dataset['href'] ?? '');
-        if (address)
-            window.open(address, '_blank', 'noreferrer');
+        const first = firstPress.get(view);
+        if (!first || event.timeStamp - first.time > MULTI_CLICK_MS * (event.detail - 1))
+            return false;
+        const { state } = view;
+        const line = state.doc.lineAt(first.at);
+        const range = event.detail === 2 ? (state.wordAt(first.at) ?? EditorSelection.cursor(first.at)) : EditorSelection.range(line.from, line.to);
+        event.preventDefault();
+        view.dispatch({ selection: EditorSelection.single(range.from, range.to), userEvent: 'select.pointer' });
         return true;
     },
 });
+/** Follows a link with a modifier held: a wikilink through the host, an address the page follows in a new tab. */
+const follow = EditorView.domEventHandlers({
+    mousedown(event, view) {
+        if (!(event.metaKey || event.ctrlKey))
+            return false;
+        return followLink(event, view);
+    },
+});
+/** Follows the link a press with a modifier fell in, if any: `true` when it did. */
+function followLink(event, view) {
+    const target = event.target.closest('[data-target], [data-href]');
+    if (!target)
+        return false;
+    event.preventDefault();
+    followAddress(view, target.dataset['target'], target.dataset['href']);
+    return true;
+}
+/**
+ * Follows the link a drawn block stands in, pressed with a modifier: CodeMirror draws no mark around
+ * a widget, so the link around an image is found among the marks over its source (#112).
+ */
+function followLinkAround(event, view, element) {
+    if (followLink(event, view))
+        return true;
+    const widget = drawing.get(element);
+    if (!widget)
+        return false;
+    const from = view.posAtDOM(element);
+    const to = from + widget.source.length;
+    const links = [];
+    view.state.field(decorationsField).between(from, to, (start, end, decoration) => {
+        const attributes = decoration.spec.attributes;
+        if (!attributes || start > from || end < to)
+            return;
+        if (attributes['data-target'] !== undefined || attributes['data-href'] !== undefined)
+            links.push({ target: attributes['data-target'], href: attributes['data-href'] });
+    });
+    const link = links[0];
+    if (!link)
+        return false;
+    event.preventDefault();
+    followAddress(view, link.target, link.href);
+    return true;
+}
+/** Goes to a wikilink's note through the host, or opens an address the page follows in a new tab. */
+function followAddress(view, name, href) {
+    const { host } = view.state.facet(editorEnvironment);
+    if (name !== undefined) {
+        const address = host.resolve(name);
+        if (address !== null)
+            host.navigate(address);
+        return;
+    }
+    const address = followable(href ?? '');
+    if (address)
+        window.open(address, '_blank', 'noreferrer');
+}
 /** How long an embed measured ahead of being drawn may take to load before it is let go (#94). */
 const PREMEASURE_TIMEOUT = 8000;
 /**
@@ -1027,5 +1112,6 @@ export function livePage(metrics) {
         embedPremeasure,
         blockKeys,
         follow,
+        multiClick,
     ];
 }

package/dist/host.d.ts

@@ -93,7 +93,7 @@ export interface NoteHost {
     readonly fileOf?: (name: string) => KeptFile | null | PromiseLike<KeptFile | null>;
     /**
      * Draws a file the notebook keeps where a note embeds it: an image, audio, video, or a card. The
-     * dimensions are the ones the embed declared, in CSS pixels, or `null`.
+     * dimensions are the ones the embed declared, in CSS pixels or as a share of the page, or `null`.
      *
      * In edit mode the node may be drawn outside the host's React tree, in the root of a block the
      * editor draws, so it must not depend on the host's context; a node that throws there leaves the
@@ -199,8 +199,22 @@ export interface AttachAttributes {
 }
 export interface AttachmentRequest {
     readonly name: string;
+    /** The width and height the embed declared, in CSS pixels, or `null`. */
     readonly width: number | null;
     readonly height: number | null;
+    /**
+     * The width it declared as a share of the width the note is read at, from 1 to 100, which it is
+     * drawn at most, or `null` (#108). `width` and `height` are then `null`.
+     */
+    readonly percent: number | null;
+    /**
+     * What a Markdown image that names the file wrote before its pipe, `![description](name)`
+     * (`SPEC.md` §5.8, #104): an image's `alt`, a card's text. Absent for an embed, and empty when
+     * the image wrote none, when the file's own description is the one to draw.
+     */
+    readonly description?: string;
+    /** The title that image wrote after its destination, `![…](name "title")`, when it wrote one. */
+    readonly title?: string;
 }
 /** A link to draw through the host's router. */
 export interface LinkRequest {

package/dist/image-dimensions.d.ts

@@ -10,14 +10,26 @@
  * **A value that is neither form is not a dimension.** `![Engelbart|large](…)`
  * keeps `Engelbart|large` as the whole description, because deleting what an
  * author wrote into an accessibility label is the worse of the two failures.
+ * A width may be a share of the page, `![Engelbart|50%](…)`, which it is drawn
+ * at most (#108).
+ *
  * Until the specification declared this form, an imported note displayed the
  * pipe and the digits on screen and mandated the whole string as the label.
  */
-export interface ImageAlt {
+export interface ImageAlt extends Dimensions {
     /** What a reader hears, and sees when the image does not load. */
     readonly description: string;
+}
+/**
+ * What the pipe declares: a width and maybe a height in CSS pixels, or a width as a share of the
+ * page, at most (#108). `percent` and `width` are never both set, and a height goes only with a
+ * width in pixels.
+ */
+export interface Dimensions {
     readonly width: number | null;
     readonly height: number | null;
+    /** The width as a share of the width the note is read at, from 1 to 100, which it is drawn at most. */
+    readonly percent: number | null;
 }
 /**
  * What follows a pipe, when it is a dimension and not text.
@@ -26,8 +38,21 @@ export interface ImageAlt {
  * Markdown image does — `![[engelbart.jpg|100x145]]` and
  * `![Engelbart|100x145](…)` mean one thing — so both read it here.
  */
-export declare function readDimensions(value: string): {
-    width: number;
-    height: number | null;
-} | null;
+export declare function readDimensions(value: string): Dimensions | null;
+/** The dimensions as the notation writes them after the pipe: `300`, `300x180` or `50%`; empty for none. */
+export declare function writeDimensions({ width, height, percent }: Dimensions): string;
+/**
+ * The attributes an element is drawn at for its dimensions: pixels as `width` and `height`, which
+ * reserve the box before the bytes arrive, a height as a style too, since the surface gives an
+ * image `height: auto`, which two numbers overrule; and a share of the page as a `max-width`, so
+ * an image narrower than it keeps its own width and is never blurred (§3.14).
+ */
+export declare function sizedAttributes({ width, height, percent }: Dimensions): {
+    width?: number;
+    height?: number;
+    style?: {
+        height?: string;
+        maxWidth?: string;
+    };
+};
 export declare function readImageAlt(alt: string): ImageAlt;

package/dist/image-dimensions.js

@@ -10,11 +10,16 @@
  * **A value that is neither form is not a dimension.** `![Engelbart|large](…)`
  * keeps `Engelbart|large` as the whole description, because deleting what an
  * author wrote into an accessibility label is the worse of the two failures.
+ * A width may be a share of the page, `![Engelbart|50%](…)`, which it is drawn
+ * at most (#108).
+ *
  * Until the specification declared this form, an imported note displayed the
  * pipe and the digits on screen and mandated the whole string as the label.
  */
 /** `100` or `100x145`, and nothing else. */
 const DIMENSIONS = /^(\d{1,5})(?:x(\d{1,5}))?$/;
+/** `1%` to `100%`, digits and nothing else: no height, no mixed pair, no fraction, no space (§3.14). */
+const PERCENT = /^(\d{1,3})%$/;
 /**
  * What follows a pipe, when it is a dimension and not text.
  *
@@ -23,20 +28,50 @@ const DIMENSIONS = /^(\d{1,5})(?:x(\d{1,5}))?$/;
  * `![Engelbart|100x145](…)` mean one thing — so both read it here.
  */
 export function readDimensions(value) {
-    const measured = DIMENSIONS.exec(value.trim());
+    const trimmed = value.trim();
+    const share = PERCENT.exec(trimmed);
+    if (share) {
+        const percent = Number(share[1]);
+        return percent >= 1 && percent <= 100 ? { width: null, height: null, percent } : null;
+    }
+    const measured = DIMENSIONS.exec(trimmed);
     if (!measured)
         return null;
     return {
         width: Number(measured[1]),
         height: measured[2] === undefined ? null : Number(measured[2]),
+        percent: null,
+    };
+}
+/** The dimensions as the notation writes them after the pipe: `300`, `300x180` or `50%`; empty for none. */
+export function writeDimensions({ width, height, percent }) {
+    if (percent !== null)
+        return `${percent}%`;
+    if (width === null)
+        return '';
+    return height === null ? String(width) : `${width}x${height}`;
+}
+/**
+ * The attributes an element is drawn at for its dimensions: pixels as `width` and `height`, which
+ * reserve the box before the bytes arrive, a height as a style too, since the surface gives an
+ * image `height: auto`, which two numbers overrule; and a share of the page as a `max-width`, so
+ * an image narrower than it keeps its own width and is never blurred (§3.14).
+ */
+export function sizedAttributes({ width, height, percent }) {
+    if (percent !== null)
+        return { style: { maxWidth: `${percent}%` } };
+    return {
+        ...(width === null ? {} : { width }),
+        ...(height === null ? {} : { height, style: { height: `${height}px` } }),
     };
 }
+const UNSIZED = { width: null, height: null, percent: null };
 export function readImageAlt(alt) {
     const at = alt.lastIndexOf('|');
     if (at === -1)
-        return { description: alt, width: null, height: null };
+        return { description: alt, ...UNSIZED };
     const measured = readDimensions(alt.slice(at + 1));
     if (!measured)
-        return { description: alt, width: null, height: null };
-    return { description: alt.slice(0, at).trim(), width: measured.width, height: measured.height };
+        return { description: alt, ...UNSIZED };
+    return { description: alt.slice(0, at).trim(), ...measured };
 }

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export type { AttachAttributes, AttachmentRequest, AttachProgress, AttachRefusal
 export { ENGLISH, type EditorWords, type NoteStrings, type NoteStringsInput } from './strings.js';
 export { customPropertyOf, DEFAULT_THEME, defineTheme, THEME_PROPERTIES, THEME_SLOTS, type BlockquoteSlotProps, type CalloutSlotProps, type CodeBlockSlotProps, type DiagramSlotProps, type EmbedSlotProps, type FootnotesSlotProps, type HeadingSlotProps, type InlineCodeSlotProps, type ModeSwitchSlotProps, type AttachmentSlotProps, type PropertiesSlotProps, type Scheme, type TableSlotProps, type TaskBoxSlotProps, type Theme, type ThemeComponents, type ThemeProperties, type WikilinkSlotProps, } from './theme.js';
 export { followable } from './address.js';
-export { readDimensions, readImageAlt, type ImageAlt } from './image-dimensions.js';
+export { readDimensions, readImageAlt, writeDimensions, type Dimensions, type ImageAlt } from './image-dimensions.js';
 export { codeRegions, fenceRegions, headingKey, remoteImageHosts, resolveWikilinks, splitFrontmatter, tableRegions, toUnixNewlines, type SplitDocument, } from './markdown.js';
 export { ordinalAt, taskBoxes, taskCheckedAt, toggleTaskAt } from './tasklist.js';
 export { readProperties, type NoteProperties, type PropertyEntry, type PropertyShape } from './properties.js';

package/dist/index.js

@@ -4,7 +4,7 @@ export { isAttachRefusal } from './host.js';
 export { ENGLISH } from './strings.js';
 export { customPropertyOf, DEFAULT_THEME, defineTheme, THEME_PROPERTIES, THEME_SLOTS, } from './theme.js';
 export { followable } from './address.js';
-export { readDimensions, readImageAlt } from './image-dimensions.js';
+export { readDimensions, readImageAlt, writeDimensions } from './image-dimensions.js';
 export { codeRegions, fenceRegions, headingKey, remoteImageHosts, resolveWikilinks, splitFrontmatter, tableRegions, toUnixNewlines, } from './markdown.js';
 export { ordinalAt, taskBoxes, taskCheckedAt, toggleTaskAt } from './tasklist.js';
 export { readProperties } from './properties.js';

package/dist/kept-image.d.ts

@@ -0,0 +1,20 @@
+/**
+ * An image whose destination names no host is a file the notebook keeps (`SPEC.md` §5.8, #104):
+ * `![Curva|300](../assets/curva-2026.png)` is the kept file `curva-2026.png`, drawn at 300 pixels,
+ * and never a request to a path under the page. It is the form a vault exported from a desktop
+ * editor writes, so every imported note with pictures has it.
+ *
+ * The page once handed such a destination to `<img>` as it was, and the browser asked for it
+ * relative to the page: a 404, and nothing drawn, while `![[curva-2026.png]]` beside it drew the file.
+ */
+/**
+ * The name of the kept file an image's destination names, or `null` when it names a host or has a
+ * scheme — the remote image of §3.14 and §7.10, or an address the page refuses.
+ *
+ * The name is the last segment of the path, `/` and `\` both separating, after the query and the
+ * fragment are dropped, percent-decoded — an escape that is not one stays as written — and in NFC.
+ * Nothing else is folded: the comparison is case-exact, and no extension is removed, because an
+ * attachment's extension is part of its name. The destination may arrive as the author wrote it or
+ * as the parser normalised it, with its spaces and backslashes encoded; both name the same file.
+ */
+export declare function keptImageName(destination: string): string | null;

package/dist/kept-image.js

@@ -0,0 +1,47 @@
+/**
+ * An image whose destination names no host is a file the notebook keeps (`SPEC.md` §5.8, #104):
+ * `![Curva|300](../assets/curva-2026.png)` is the kept file `curva-2026.png`, drawn at 300 pixels,
+ * and never a request to a path under the page. It is the form a vault exported from a desktop
+ * editor writes, so every imported note with pictures has it.
+ *
+ * The page once handed such a destination to `<img>` as it was, and the browser asked for it
+ * relative to the page: a 404, and nothing drawn, while `![[curva-2026.png]]` beside it drew the file.
+ */
+/** Anything of the shape `word:`, which is what makes an address absolute (§5.2, step 1). */
+const HAS_SCHEME = /^[a-z][a-z0-9+.-]*:/i;
+/**
+ * The name of the kept file an image's destination names, or `null` when it names a host or has a
+ * scheme — the remote image of §3.14 and §7.10, or an address the page refuses.
+ *
+ * The name is the last segment of the path, `/` and `\` both separating, after the query and the
+ * fragment are dropped, percent-decoded — an escape that is not one stays as written — and in NFC.
+ * Nothing else is folded: the comparison is case-exact, and no extension is removed, because an
+ * attachment's extension is part of its name. The destination may arrive as the author wrote it or
+ * as the parser normalised it, with its spaces and backslashes encoded; both name the same file.
+ */
+export function keptImageName(destination) {
+    const trimmed = destination.trim();
+    if (trimmed === '' || HAS_SCHEME.test(trimmed) || trimmed.startsWith('//'))
+        return null;
+    const path = trimmed.split(/[?#]/, 1)[0] ?? '';
+    // A backslash the parser encoded separates segments as one written does.
+    const segments = path.replace(/%5c/gi, '\\').split(/[/\\]/);
+    return decodeLeniently(segments[segments.length - 1] ?? '').normalize('NFC');
+}
+/** Percent-decodes every escape that is one, and leaves the rest as written (§5.2, step 5). */
+function decodeLeniently(text) {
+    try {
+        return decodeURIComponent(text);
+    }
+    catch {
+        // A run of escapes that is not UTF-8, or a `%` that opens nothing: each run is decoded on its own.
+        return text.replace(/(?:%[0-9a-f]{2})+/gi, (run) => {
+            try {
+                return decodeURIComponent(run);
+            }
+            catch {
+                return run;
+            }
+        });
+    }
+}

package/dist/markdown.js

@@ -1,6 +1,6 @@
 // The text helpers of the reading surface: what a note becomes before the parser reads it.
 // Nothing here rewrites the note a host keeps; each function returns a new string for display.
-import { readDimensions } from './image-dimensions.js';
+import { readDimensions, writeDimensions } from './image-dimensions.js';
 /**
  * A note is bytes the notebook wrote, and a notebook written on Windows, or in a
  * desktop editor, or pasted from anywhere, carries CRLF. Every reader in this
@@ -351,9 +351,7 @@ function resolveWikilinksIn(body, resolve, keeps) {
             // Dropping it here is what made `![[picture|120]]` render at full size:
             // the notation was read and then thrown away one line before it was used.
             const measured = label === undefined ? null : readDimensions(label);
-            const sized = measured
-                ? `|${measured.width}${measured.height === null ? '' : `x${measured.height}`}`
-                : '';
+            const sized = measured ? `|${writeDimensions(measured)}` : '';
             return `[${text}](attachment:${encodeURIComponent(clean)}${sized})`;
         }
         const url = resolve(clean.normalize('NFC'));

package/dist/mode-icons.d.ts

@@ -5,3 +5,6 @@ export declare const ICON_COPY: import("react").JSX.Element;
 export declare const ICON_CHECK: import("react").JSX.Element;
 export declare const ICON_CLOSE: import("react").JSX.Element;
 export declare const ICON_OWN_SIZE: import("react").JSX.Element;
+export declare const ICON_RATIO_LOCKED: import("react").JSX.Element;
+export declare const ICON_RATIO_FREE: import("react").JSX.Element;
+export declare const ICON_RESIZE: import("react").JSX.Element;

package/dist/mode-icons.js

@@ -9,5 +9,10 @@ export const ICON_MARKDOWN = svg('M10 12.5 8 15l2 2.5', 'm14 12.5 2 2.5-2 2.5',
 export const ICON_COPY = svg('M10 8h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2z', 'M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2');
 export const ICON_CHECK = svg('M20 6 9 17l-5-5');
 export const ICON_CLOSE = svg('M18 6 6 18', 'm6 6 12 12');
-// The button that draws an image at its own size (#98): Lucide's scaling (ISC).
-export const ICON_OWN_SIZE = svg('M21 3 9 15', 'M12 3H3v18h18v-9', 'M16 3h5v5', 'M14 15H9v-5');
+// The image's controls (#106), Lucide's (ISC): its own size again, rotate-ccw, an undo of the
+// size and not a way out of the page; the lock between width and height, link-2 and unlink-2;
+// and the handle's diagonal arrows, move-diagonal-2.
+export const ICON_OWN_SIZE = svg('M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8', 'M3 3v5h5');
+export const ICON_RATIO_LOCKED = svg('M9 17H7A5 5 0 0 1 7 7h2', 'M15 7h2a5 5 0 1 1 0 10h-2', 'M8 12h8');
+export const ICON_RATIO_FREE = svg('M9 17H7A5 5 0 0 1 7 7', 'M15 7h2a5 5 0 0 1 4 8', 'M8 12h1', 'M2 2l20 20');
+export const ICON_RESIZE = svg('M19 13v6h-6', 'M5 11V5h6', 'm5 5 14 14');

package/dist/strings.d.ts

@@ -158,12 +158,27 @@ export interface EditorWords {
     readonly addItem: string;
     readonly removeItem: string;
     readonly calloutType: string;
-    /** The field of an image's width in edit mode, in pixels (#98). */
+    /** The field of an image's width in edit mode, in the unit beside it (#98, #106). */
     readonly imageWidth: string;
+    /** The field of an image's height in edit mode, in pixels (#106). */
+    readonly imageHeight: string;
+    /** The choice of the width's unit: pixels, or a share of the page (#108). */
+    readonly imageUnit: string;
+    /** The field of a Markdown image's description, the text before its pipe (#106). */
+    readonly imageDescription: string;
+    /** The lock between the width and the height, locked: the height follows the width (#106). */
+    readonly imageKeepRatio: string;
+    /** The same lock, open: the width and the height are written apart (#106). */
+    readonly imageFreeRatio: string;
     /** The button that draws an image at its own size again (#98). */
     readonly imageOwnSize: string;
     /** The handle at an image's corner that drags its size (#98). */
     readonly imageResize: string;
+    /** What the handle does while the proportion is kept, and while it is not (#106). */
+    readonly imageResizeKeep: string;
+    readonly imageResizeFree: string;
+    /** Why a size typed was not written: the range it has to be in, in the unit of its field (#105). */
+    readonly imageOutOfRange: (min: number, max: number, unit: string) => string;
     readonly fold: string;
     readonly foldNone: string;
     readonly foldOpen: string;

package/dist/strings.js

@@ -156,9 +156,17 @@ export const ENGLISH = {
         addItem: 'Add',
         removeItem: 'Remove',
         calloutType: 'Type',
-        imageWidth: 'Width, in pixels',
+        imageWidth: 'Width',
+        imageHeight: 'Height',
+        imageUnit: 'Unit',
+        imageDescription: 'Description',
+        imageKeepRatio: 'Keep the proportion',
+        imageFreeRatio: 'Width and height apart',
         imageOwnSize: 'Its own size',
         imageResize: 'Drag to resize',
+        imageResizeKeep: 'Drag to resize (keeps the proportion)',
+        imageResizeFree: 'Drag to resize (free)',
+        imageOutOfRange: (min, max, unit) => `Between ${min} and ${max} ${unit}`,
         fold: 'Folding',
         foldNone: 'Not foldable',
         foldOpen: 'Folds, open',