@memorysmithapp/markdown-renderer 0.7.1 → 0.8.0

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,7 +256,9 @@ 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)
                 return;
@@ -425,15 +427,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({});

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',

package/dist/theme.d.ts

@@ -268,7 +268,10 @@ export interface ModeSwitchSlotProps {
 export interface AttachmentSlotProps {
     /** The name it is kept under, as the embed wrote it. */
     readonly name: string;
-    /** What the host said of it, its addresses already through the package's filter. */
+    /**
+     * What the host said of it, its addresses already through the package's filter, and its
+     * description the one a Markdown image that names it wrote, when it wrote one (#104).
+     */
     readonly file: KeptFile;
     /** The shape its media type is drawn in: `image`, `audio`, `video` or `card`. */
     readonly shape: FileShape;
@@ -281,6 +284,10 @@ export interface AttachmentSlotProps {
     /** The dimensions the embed declared (§3.14), in CSS pixels, or `null`. */
     readonly width: number | null;
     readonly height: number | null;
+    /** The width it declared as a share of the page, from 1 to 100, which it is drawn at most, or `null` (#108). */
+    readonly percent: number | null;
+    /** The title a Markdown image that names it wrote after its destination, or `null` (#104). */
+    readonly title: string | null;
 }
 /** The slots a theme may fill. Each one left out is drawn as the default theme draws it. */
 export interface ThemeComponents {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memorysmithapp/markdown-renderer",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "A React component that draws a MemorySmith note exactly as MemorySmith's reading page does.",
   "keywords": [
     "markdown",
@@ -79,7 +79,7 @@
     "unified": "11.0.5"
   },
   "devDependencies": {
-    "@memorysmithapp/markdown-spec": "0.7.1",
+    "@memorysmithapp/markdown-spec": "0.8.0",
     "@types/hast": "3.0.5",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",

package/structure.css

@@ -459,8 +459,10 @@
   max-width: 100%;
   vertical-align: middle;
 }
-/* An image in edit mode carries its size's controls over its top right and a
-   handle at its bottom right corner that drags it (#98). */
+/* An image in edit mode carries its controls under it, never over the picture,
+   whose top left is often its subject, and a handle at its bottom right corner
+   that drags it (#98, #106). The controls hang from the image's bottom edge with
+   no gap, so the pointer travels from the picture to them without leaving it. */
 .markdown .edit-image {
   position: relative;
   display: inline-block;
@@ -468,19 +470,55 @@
   vertical-align: middle;
 }
 .markdown .edit-image-controls {
+  position: absolute;
+  top: var(--edit-image-bottom, 100%);
+  left: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  width: max-content;
+  min-width: 100%;
+  max-width: min(26rem, calc(100vw - 2rem));
+  box-sizing: border-box;
+}
+.markdown .edit-image-size {
+  display: inline-flex;
   align-items: center;
+  gap: 0.15rem;
   white-space: nowrap;
 }
-.markdown .edit-image-width {
-  width: 5em;
+.markdown .edit-image-width,
+.markdown .edit-image-height {
+  width: 4.2em;
 }
+.markdown .edit-image-description {
+  flex: 1 1 10rem;
+  min-width: 0;
+}
+.markdown .edit-image-refused {
+  flex-basis: 100%;
+}
+/* The handle is a touch target of at least 24px at the picture's corner, whose arrows say it resizes. */
 .markdown .edit-image-handle {
   position: absolute;
-  right: 0;
-  bottom: 0;
+  top: calc(var(--edit-image-bottom, 100%) - 24px);
+  left: calc(var(--edit-image-right, 100%) - 24px);
   z-index: 1;
-  width: 0.9rem;
-  height: 0.9rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
   cursor: nwse-resize;
   touch-action: none;
 }
+/* Where nothing hovers, the controls stand in the flow under the image, so
+   they never lie over the text that follows it. */
+@media (hover: none) {
+  .markdown .edit-image-controls {
+    position: static;
+    min-width: 0;
+  }
+}

package/theme-default.css

@@ -1950,38 +1950,79 @@
   opacity: 1;
 }
 .markdown .edit-image-controls {
+  opacity: 0;
+  padding: 0.2rem;
+  border: 1px solid var(--ms-border);
+  border-radius: var(--ms-radius);
+  background: var(--ms-surface);
   font-size: 0.8rem;
   line-height: 1.2;
+  transition: opacity 0.12s;
+  pointer-events: none;
 }
-.markdown .edit-image-width.edit-field {
+.markdown .edit-image:hover .edit-image-controls,
+.markdown .edit-image:focus-within .edit-image-controls,
+.markdown .edit-image[data-ms-busy] .edit-image-controls,
+.markdown .edit-image[data-resizing] .edit-image-controls {
+  opacity: 1;
+  pointer-events: auto;
+}
+.markdown .edit-image-controls .edit-field {
   height: 1.9rem;
   border-color: var(--ms-border);
   background: var(--ms-surface);
   color: var(--ms-text);
   font-size: 0.8rem;
 }
+.markdown .edit-image-controls .edit-image-width,
+.markdown .edit-image-controls .edit-image-height {
+  flex: none;
+  width: 4.2em;
+}
+.markdown .edit-image-controls .edit-field[aria-invalid='true'] {
+  border-color: rgb(var(--ms-callout-stop));
+  outline: 1px solid rgb(var(--ms-callout-stop));
+}
+.markdown .edit-image-controls .edit-field:disabled {
+  opacity: 0.5;
+}
 .markdown .edit-image-unit {
-  padding-inline-end: 0.2rem;
+  height: 1.9rem;
+  border: 1px solid var(--ms-border);
+  border-radius: var(--ms-radius);
+  background: var(--ms-surface);
+  color: var(--ms-text-soft);
+  font-size: 0.8rem;
+}
+.markdown .edit-image-unit-label {
+  padding-inline: 0.1rem 0.2rem;
   color: var(--ms-text-soft);
   font-size: 0.8rem;
 }
-/* The handle is a corner of the accent's colour, shown with the controls. */
+.markdown .edit-image-refused {
+  color: rgb(var(--ms-callout-stop));
+  font-size: 0.75rem;
+}
+/* The handle is the accent's diagonal arrows on the surface, shown with the controls. */
 .markdown .edit-image-handle {
   opacity: 0;
-  border-right: 3px solid var(--ms-accent);
-  border-bottom: 3px solid var(--ms-accent);
-  border-bottom-right-radius: 3px;
+  border-top-left-radius: var(--ms-radius);
+  background: var(--ms-surface);
+  color: var(--ms-accent);
+  font-size: 16px;
   transition: opacity 0.12s;
 }
 .markdown .edit-image:hover .edit-image-handle,
+.markdown .edit-image[data-ms-busy] .edit-image-handle,
 .markdown .edit-image[data-resizing] .edit-image-handle {
   opacity: 1;
 }
 /* Where nothing hovers, as on a phone, an image's size is always at hand. */
 @media (hover: none) {
-  .markdown .edit-image .edit-block-controls,
+  .markdown .edit-image .edit-image-controls,
   .markdown .edit-image .edit-image-handle {
     opacity: 1;
+    pointer-events: auto;
   }
 }
 .markdown .edit-image[data-resizing] .cm-ms-image,