@quillmark/svelte 0.20.1 → 0.22.0

package/dist/visual/FieldLabel.svelte

@@ -10,15 +10,8 @@
  hands the click to `onActivate`. Both halves are needed: `for` on a non-labelable
  element is inert and invalid.
 
- Two non-gating label decorations:
- • a persistent required `*` for a field the schema obliges — one that declares no
- `default:` (DOCUMENT_MODEL). Its
- accessible name is "required", so a screen reader announces the word, not the
- glyph; inside the `<label>`, so it names the control along with the text
- ("Subject required") rather than announcing as a node adjacent to it;
-
- • the `description` as an info marker raising a themed popover
- ({@link FieldHint}).
+ One non-gating label decoration: the `description` as an info marker raising a
+ themed popover ({@link FieldHint}).
 
  The description describes, it does not name. It is parked in an always-present
  visually-hidden node here and the control carries `aria-describedby`: name then
@@ -32,11 +25,6 @@
  control's label decorates the same way.
 -->
 <script lang="ts">
-	import { wording } from './strings.js';
-
-	// The surface's words, ambient from the editor root; the package's English
-	// off-tree, so this component renders standalone too.
-	const t = wording();
 	import FieldHint from './FieldHint.svelte';
 
 	interface Props {
@@ -50,12 +38,10 @@
 		descriptionId?: string;
 		/** Focus handoff for a control `for` cannot reach; a label click calls it. */
 		onActivate?: () => void;
-		/** No-default field → a persistent required `*`. */
-		required?: boolean;
 		/** Schema `description`, or undefined: the affordance renders only when set. */
 		description?: string;
 	}
-	let { label, controlId, id, descriptionId, onActivate, required, description }: Props = $props();
+	let { label, controlId, id, descriptionId, onActivate, description }: Props = $props();
 </script>
 
 <div class="qm-field-label-row">
@@ -71,9 +57,6 @@
 		onclick={onActivate}
 	>
 		<span>{label}</span>
-		{#if required}
-			<span class="qm-field-required" aria-label={t.strings.fieldRequired}>*</span>
-		{/if}
 	</label>
 	{#if description}
 		<!-- Outside the `<label>`, both of them: a trigger inside it would put its own
@@ -91,10 +74,8 @@
 	/* The row, not the label, is the field's grid child: `Field`'s subgrid counts
 	 two tracks and the hint sits beside the label rather than under it.
 
-	 A rung wider than the label's own gap below, so the two separations rank: the
-	 required glyph is part of the name and sits at the tighter one, the guidance
-	 marker is a second affordance beside it. The marker's box is its glyph
-	 (`FieldHint`), so this gap is the whole of what stands between them. */
+	 The marker's box is its glyph (`FieldHint`), so this gap is the whole of what
+	 stands between it and the label. */
 	.qm-field-label-row {
 		display: flex;
 		align-items: center;
@@ -104,7 +85,6 @@
 	.qm-field-label {
 		display: inline-flex;
 		align-items: center;
-		gap: var(--_qm-space-half);
 		font-size: var(--_qm-text-label);
 		font-weight: var(--_qm-weight-mid);
 		line-height: var(--_qm-leading-tight);
@@ -116,14 +96,6 @@
 	.qm-field-label.targeted {
 		cursor: pointer;
 	}
-	/* Required marker: a quiet accent glyph, not an alarm; required-ness is guidance,
-	 the document still edits and renders unmet. */
-	.qm-field-required {
-		display: inline-flex;
-		align-items: center;
-		color: var(--_qm-danger);
-		line-height: 1;
-	}
 	/* The parked description: in the accessibility tree, out of the layout, and never
 	 a focus stop. Clipped rather than `display: none` / `hidden`, which take a node
 	 out of the tree entirely and would make the `aria-describedby` dangle. Out of

package/dist/visual/FieldLabel.svelte.d.ts

@@ -9,8 +9,6 @@ interface Props {
     descriptionId?: string;
     /** Focus handoff for a control `for` cannot reach; a label click calls it. */
     onActivate?: () => void;
-    /** No-default field → a persistent required `*`. */
-    required?: boolean;
     /** Schema `description`, or undefined: the affordance renders only when set. */
     description?: string;
 }

package/dist/visual/FormatPopover.svelte

@@ -3,15 +3,16 @@
  shell-owned, observing the active leaf through
  `getActiveLeaf`: the VisualEditor's accessor over its `leaves` registry, and
  the whole of what this surface knows about the editor. The active leaf is a
- field's or a by-value one (an array's element, a subform's cell): its views either
- way, its controller only for a field's. A non-empty selection in the active leaf
+ field's or a by-value one (an array's element, a subform's cell), reached through
+ its views. A non-empty selection in the active leaf
  raises it over that leaf's selection rect; each button dispatches a PM `toggleMark`
  command straight at the leaf's `EditorView`, whose own `dispatchTransaction` commits
  the result as it commits a keystroke: a field's lowers it to `markOps` through
  `applyChange` (field.ts), a by-value leaf's hands the re-encoded value to its parent
  (`ProseValue`). This component never touches the content. The keymap mirror
- (Mod-b/i/u) already lives in the codec's keymap (field.ts); this is the pointer
- affordance for all six marks.
+ (Mod-b/i/u) lives in the codec's keymap (field.ts); this is the pointer
+ affordance for all six marks. Mod-K is this surface's own key, the prompt it raises
+ being this surface's: a document `keydown` the leaf's keymap left unclaimed.
 
  Selection observation. The view's `dispatchTransaction` is the leaf's
  (read-only), so there is no hook to observe transactions from outside.
@@ -24,7 +25,10 @@
  A press holds it down, which is what makes the surface answer a selection rather
  than a pointer: a drag fires `selectionchange` on every frame, so a surface driven
  by that alone rises on the first character and rides the cursor across the text it
- is covering. Keyboard selection holds nothing, so a Shift-arrow syncs as it fires.
+ is covering. Keyboard selection holds nothing, so it waits instead: a rise with no
+ release behind it comes once the selection has stood still for `SETTLE_MS`, so a
+ Shift-arrow run, or a select-all on its way to a cut, raises nothing until it stops.
+ A lowering never waits, and an open surface follows each step.
 
  Nothing here watches scroll. `sync` decides whether the surface is up, which a
  scroll does not change; where it sits is the anchor's own question, and the anchor
@@ -61,6 +65,7 @@
 	// off-tree, so this component renders standalone too.
 	const t = wording();
 	import { toggleMark } from 'prosemirror-commands';
+	import { keydownHandler } from 'prosemirror-keymap';
 	import { TextSelection, type Command } from 'prosemirror-state';
 	import type { EditorView } from 'prosemirror-view';
 	import type { MarkType } from 'prosemirror-model';
@@ -70,6 +75,7 @@
 	import { hasMarks, rangeAnchor, type RangeAnchor } from '../core/codec/index.js';
 	import type { ActiveProse } from './leaves.js';
 	import { clearLink, hrefInSelection, normalizeHref, setLink } from './links.js';
+	import { spacePx } from '../core/rungs.js';
 	import './controls.css';
 
 	interface Props {
@@ -78,10 +84,9 @@
 	}
 	let { getActiveLeaf }: Props = $props();
 
-	const GLYPH = 15;
-	/** The six content formatting marks. `anchor` is a seventh, drawn separately below:
-	 *  a decoration toggle rather than a PM `toggleMark`. One string per mark carries both
-	 *  the tooltip and the accessible name; the anchor button spells the two separately. */
+	const SETTLE_MS = 450;
+	/** The six content formatting marks. `anchor` is withheld: it draws nothing until
+	 *  comments do. One string per mark carries both the tooltip and the accessible name. */
 	const MARKS: { name: string; icon: IconName; title: string }[] = $derived([
 		{ name: 'strong', icon: 'bold', title: t.strings.formatBold },
 		{ name: 'em', icon: 'italic', title: t.strings.formatEmphasis },
@@ -94,13 +99,14 @@
 	let open = $state(false);
 	/** A pointer is down outside this surface: the selection is still being made. */
 	let pressed = false;
-	/** Whether an anchor can be minted over the selection: in a field's own view, never
-	 *  in a table cell or a by-value leaf (see `sync`). */
-	let anchorAvailable = $state(true);
 	let linkPromptOpen = $state(false);
 	/** Whether the selection carried a link when the prompt was raised. */
 	let linkPresent = $state(false);
 	let linkValue = $state('');
+	/** The view the prompt was raised over. The prompt takes the focus, and a cell view
+	 *  without it is no longer the leaf's `focusedView`. */
+	let promptView: EditorView | undefined;
+	let promptInput = $state<HTMLInputElement | undefined>(undefined);
 	let contentEl = $state<HTMLElement | undefined>(undefined);
 	/** The root to portal into: `document.body` escapes the editor's subtree and
 	 * the consumer's dials with it, so a pane-scoped palette misses this surface.
@@ -115,12 +121,13 @@
 	/** The view the caret is actually in: the leaf's own, or the nested cell view of a
 	 * table island (`codec/table-view.ts`). The six marks are the inline schema's
 	 * too, so a selection in a cell raises the same popover and toggles the same
-	 * commands; only `anchor` is withheld (below). */
+	 * commands. */
 	function activeLeafView(): EditorView | undefined {
 		return getActiveLeaf()?.views.focusedView();
 	}
 
-	function sync(): void {
+	function sync(wait = false): void {
+		clearTimeout(settling);
 		const insidePopover =
 			!!contentEl && !!document.activeElement && contentEl.contains(document.activeElement);
 		// Interacting with the popover itself (e.g. the link input): leave state as-is.
@@ -128,18 +135,16 @@
 		// returns early, so a surface frozen here still tracks the selection it covers.
 		if (insidePopover) return;
 		if (pressed) return;
-		const leaf = getActiveLeaf();
-		const view = leaf?.views.focusedView();
+		const view = activeLeafView();
 		// A non-empty text selection. A node selection is non-empty too and has nothing
 		// to format: it covers a leaf block (an island, a rule), which is exactly where
 		// Escape out of a table cell lands.
 		const selection = view?.state.selection;
 		const formattable = selection instanceof TextSelection && !selection.empty;
-		// …in a leaf that has formatting at all. A `plaintext` leaf declares no mark
-		// types (`plaintextSchema`, `plainSchema`), so this surface withholds itself over
-		// one entirely, the way it never rises over the text input a `string` field draws:
-		// the value is literal text, and a mark on it is a value the boundary refuses to
-		// coerce back.
+		// …in a leaf that has formatting at all. A `text` leaf declares no mark types
+		// (`plaintextSchema`, `plainSchema`), so this surface withholds itself over one
+		// entirely, the way it never rises over a form control: the value is literal
+		// text, and a mark on it is a value the boundary refuses to coerce back.
 		if (
 			!view ||
 			!view.hasFocus() ||
@@ -151,16 +156,13 @@
 			linkPromptOpen = false;
 			return;
 		}
+		if (wait && !open) {
+			settling = setTimeout(() => sync(), SETTLE_MS);
+			return;
+		}
 		portalTarget = view.dom.closest<HTMLElement>('[data-qm-root]') ?? undefined;
 		const { from, to } = view.state.selection;
 		anchor = rangeAnchor(view, from, to);
-		// An anchor is minted through a field's controller, which a by-value leaf has
-		// none of: its anchors are dropped on the parent's value write. A selection inside
-		// a table cell is not in the field's coordinate space at all: the field's position
-		// map holds one `atom` run for the whole island, so there is no USV offset to mint
-		// an anchor at. The button is withheld rather than disabled, because what it would
-		// toggle does not exist there (CODEC §Islands).
-		anchorAvailable = !!leaf?.controller && view === leaf.views.view;
 		open = true;
 	}
 
@@ -186,12 +188,17 @@
 	// selection. `pending` collapses a burst to a single scheduled callback.
 	let pending = false;
 	let rafHandle = 0;
+	/** The check in flight answers a pointer's release, which raises at once. */
+	let released = false;
+	let settling: ReturnType<typeof setTimeout> | undefined;
 	function deferredSync(): void {
 		if (pending) return;
 		pending = true;
 		rafHandle = requestAnimationFrame(() => {
 			pending = false;
-			sync();
+			const wait = !released;
+			released = false;
+			sync(wait);
 		});
 	}
 
@@ -205,14 +212,16 @@
 	function onPointerUp(): void {
 		if (!pressed) return;
 		pressed = false;
+		released = true;
 		deferredSync();
 	}
 
-	// A burst-coalescing rAF may still be in flight at teardown; cancel it so
-	// `sync()` never runs against the destroyed component.
+	// A burst-coalescing rAF or a settling rise may still be in flight at teardown;
+	// cancel both so `sync()` never runs against the destroyed component.
 	onDestroy(() => {
 		if (pending) cancelAnimationFrame(rafHandle);
 		pending = false;
+		clearTimeout(settling);
 	});
 
 	// Any close path that bypasses `sync` (e.g. Escape while the link input holds
@@ -250,6 +259,7 @@
 		if (name === 'link') {
 			linkValue = hrefInSelection(view.state);
 			linkPresent = linkValue.length > 0;
+			promptView = view;
 			linkPromptOpen = true;
 			return;
 		}
@@ -258,43 +268,12 @@
 		sync();
 	}
 
-	/**
-	 * A fresh anchor id: 128 random bits as hex, the id being opaque to the
-	 * boundary and needing only to be unique. `crypto.randomUUID` is
-	 * secure-context-only, and absent on a page served over plain `http` to
-	 * something other than localhost; `getRandomValues` is there either way.
-	 */
-	function mintAnchorId(): string {
-		return [...crypto.getRandomValues(new Uint8Array(16))]
-			.map((b) => b.toString(16).padStart(2, '0'))
-			.join('');
-	}
-
-	/**
-	 * Toggle an identity anchor over the selection: the `anchor`
-	 * button's answer to a formatting toggle. If the selection already covers
-	 * anchors, remove them; else insert one at its start with a freshly-minted
-	 * unique id (the caller-supplied, invariant id the 0.97 policy settles).
-	 * Zero-width and glyph-less (CODEC §Marks): the identity handle persists in
-	 * the content, its chrome awaiting comment-thread UX.
-	 */
-	function toggleAnchor(): void {
-		const leaf = getActiveLeaf()?.controller;
-		const view = activeLeafView();
-		if (!leaf || !view || view.state.selection.empty) return;
-		const { from, to } = leaf.selectionRange();
-		const covered = leaf.anchorsInRange(from, to);
-		if (covered.length) covered.forEach((id) => leaf.removeAnchor(id));
-		else leaf.insertAnchor(mintAnchorId(), from);
-		view.focus();
-		sync();
-	}
-
 	/** Every exit from the prompt: lower it, run `cmd` if there is one, and hand the
 	 *  leaf back its focus and the surface its buttons. */
 	function closePrompt(cmd?: Command): void {
 		linkPromptOpen = false;
-		const view = activeLeafView();
+		const view = promptView && !promptView.isDestroyed ? promptView : activeLeafView();
+		promptView = undefined;
 		if (view) {
 			cmd?.(view.state, view.dispatch);
 			view.focus();
@@ -309,6 +288,30 @@
 		closePrompt(setLink(normalizeHref(linkValue)));
 	}
 
+	/** Mod-K is a press of the Link button: claimed only where the surface would stand
+	 *  over the selection, and a second press while the prompt is up hands it the focus. */
+	function raiseLink(view: EditorView): boolean {
+		const inside = !!contentEl?.contains(document.activeElement);
+		if (inside && linkPromptOpen) return true;
+		if (!inside && !view.hasFocus()) return false;
+		sync();
+		if (!open) return false;
+		const reraised = linkPromptOpen;
+		toggle('link');
+		if (reraised && promptInput) focusPrompt(promptInput);
+		return true;
+	}
+
+	const linkKey = keydownHandler({
+		'Mod-k': (_state, _dispatch, view) => !!view && raiseLink(view)
+	});
+
+	function onKeyDown(e: KeyboardEvent): void {
+		if (e.defaultPrevented) return;
+		const view = activeLeafView();
+		if (view && linkKey(view, e)) e.preventDefault();
+	}
+
 	function removeLink(): void {
 		closePrompt(clearLink);
 	}
@@ -322,6 +325,7 @@
      it does with the event. `pointercancel` is the release a gesture the browser takes
      over gets. -->
 <svelte:document
+	onkeydown={onKeyDown}
 	onselectionchange={deferredSync}
 	onfocusout={deferredSync}
 	onpointerdowncapture={onPointerDown}
@@ -342,7 +346,7 @@
 			side="top"
 			align="center"
 			trapFocus={false}
-			sideOffset={8}
+			sideOffset={spacePx(portalTarget, 2)}
 			onOpenAutoFocus={(e: Event) => e.preventDefault()}
 			onCloseAutoFocus={(e: Event) => e.preventDefault()}
 		>
@@ -375,26 +379,29 @@
 							>
 								<input
 									{@attach focusPrompt}
-									class="qm-link-input"
+									bind:this={promptInput}
+									class="qm-link-input qm-focus-ring"
 									type="text"
 									placeholder={t.strings.linkPlaceholder}
 									aria-label={t.strings.formatLink}
 									bind:value={linkValue}
 								/>
-								<button type="submit" class="qm-icon-btn qm-mark-btn">{t.strings.linkApply}</button>
+								<button type="submit" class="qm-icon-btn qm-mark-btn qm-focus-ring"
+									>{t.strings.linkApply}</button
+								>
 								<!-- Only where there is a link to remove: an arm that does nothing is
 								     an arm to read past on every other visit to the prompt. -->
 								{#if linkPresent}
 									<button
 										type="button"
-										class="qm-icon-btn qm-mark-btn"
+										class="qm-icon-btn qm-mark-btn qm-focus-ring"
 										onmousedown={keepFocus}
 										onclick={removeLink}>{t.strings.linkRemove}</button
 									>
 								{/if}
 								<button
 									type="button"
-									class="qm-icon-btn qm-mark-btn"
+									class="qm-icon-btn qm-mark-btn qm-focus-ring"
 									onmousedown={keepFocus}
 									onclick={cancelLink}>{t.strings.linkCancel}</button
 								>
@@ -407,23 +414,13 @@
 								{#each MARKS as m (m.name)}
 									<button
 										type="button"
-										class="qm-icon-btn qm-mark-btn"
+										class="qm-icon-btn qm-mark-btn qm-focus-ring"
 										title={m.title}
 										aria-label={m.title}
 										onmousedown={keepFocus}
-										onclick={() => toggle(m.name)}><Icon name={m.icon} size={GLYPH} /></button
+										onclick={() => toggle(m.name)}><Icon name={m.icon} /></button
 									>
 								{/each}
-								{#if anchorAvailable}
-									<button
-										type="button"
-										class="qm-icon-btn qm-mark-btn"
-										title={t.strings.formatAnchorTitle}
-										aria-label={t.strings.formatAnchor}
-										onmousedown={keepFocus}
-										onclick={toggleAnchor}><Icon name="hash" size={GLYPH} /></button
-									>
-								{/if}
 							</div>
 						{/if}
 					</div>

package/dist/visual/MatrixField.svelte

@@ -53,7 +53,7 @@
 	import { splitDeep, unrouted, type DeepDiagnostic } from './diagnostics.js';
 	import type { LandingBox } from './leaves.js';
 	import { propertyDomIds } from './domid.js';
-	import { bloomInside } from '../core/bloom.js';
+	import { bloom } from '../core/bloom.js';
 	import Icon from './icons/Icon.svelte';
 	import FieldLabel from './FieldLabel.svelte';
 	import ObjectField from './ObjectField.svelte';
@@ -215,7 +215,7 @@
 		// the box stays where the next item is typed.
 		const first = Object.keys(schema.properties ?? {})[0];
 		if (first !== undefined) ref(colEls, id)?.focusPath([first]);
-		if (box) bloomInside(box);
+		if (box) bloom(box);
 	}
 
 	/** Take the caret: the first item's control, else the add box. */
@@ -276,13 +276,17 @@
 		</span>
 	</div>
 	<div
-		class={['qm-matrix-roster', { 'qm-tracks': compact, compact }]}
+		class={['qm-matrix-roster qm-wash', { 'qm-tracks': compact, compact }]}
 		data-default={defaulted ? '' : undefined}
 		bind:this={rosterEl}
 	>
 		{#each members as m (m.id)}
 			{@const on = held(m.id)}
-			<div class={['qm-member', { held: on }]} bind:this={memberEls[m.id]}>
+			<div
+				class={['qm-member qm-wash', { held: on }]}
+				data-qm-prop={m.id}
+				bind:this={memberEls[m.id]}
+			>
 				<div class="qm-member-head">
 					<!-- A real checkbox with its face drawn here: the UA's face is shadow DOM no
 					     dial reaches, so the input is `appearance: none` and the box and the
@@ -306,7 +310,11 @@
 		{/each}
 		{#each added as item, k (item.id)}
 			{@const name = item.title || t.strings.matrixItemTitle(label ?? '', k + 1)}
-			<div class="qm-member held added" bind:this={memberEls[item.id]}>
+			<div
+				class="qm-member qm-wash held added"
+				data-qm-prop={item.id}
+				bind:this={memberEls[item.id]}
+			>
 				<div class="qm-member-head">
 					<!-- Held by being present: the tick is fixed, and the remove is its untick. -->
 					<span class="qm-tick" aria-hidden="true">
@@ -317,6 +325,7 @@
 						class="qm-input qm-focus-ring qm-member-title-input"
 						type="text"
 						id={itemTitleId(item.id)}
+						data-qm-prop={MATRIX_TITLE}
 						aria-label={t.strings.matrixItemTitle(label ?? '', k + 1)}
 						value={item.title}
 						bind:this={titleEls[item.id]}
@@ -391,11 +400,9 @@
 		color: var(--_qm-ink-label);
 		font-variant-numeric: tabular-nums;
 	}
-	/* The roster, one member to a row in declaration order. Positioned for the wash's
-	 inset child (`washBox`), and rounded to the rung a row's box draws, as an array's
-	 rows are. */
+	/* The roster, one member to a row in declaration order, rounded for the wash
+	 (`washBox`) to the rung a row's box draws, as an array's rows are. */
 	.qm-matrix-roster {
-		position: relative;
 		display: flex;
 		flex-direction: column;
 		gap: var(--_qm-space);
@@ -411,10 +418,9 @@
 		align-items: start;
 		column-gap: var(--_qm-space-2);
 	}
-	/* A member is a row: positioned for the wash a landing on it blooms, rounded to the
-	 rung the rows around it draw. */
+	/* A member is a row, rounded for the wash a landing on it blooms to the rung the
+	 rows around it draw. */
 	.qm-member {
-		position: relative;
 		display: flex;
 		flex-direction: column;
 		gap: var(--_qm-space);
@@ -525,16 +531,19 @@
 		background: var(--_qm-danger-tint);
 		color: var(--_qm-danger);
 	}
-	.qm-member-remove :global(svg) {
-		width: var(--_qm-glyph-control);
-		height: var(--_qm-glyph-control);
-	}
-	/* The default's set is what prints and nothing written: its titles and every value
-	 its columns draw take the default rung (theme.css), and the first gesture, writing
-	 it, takes it off. */
+	/* The default's set is what prints and nothing written: its titles, its ticks and
+	 every value its columns draw take the default rung (theme.css), and the first
+	 gesture, writing it, takes it off. */
 	.qm-matrix-roster[data-default] :global(:is(.qm-input, .ProseMirror, .qm-date)),
 	.qm-matrix-roster[data-default] :global(.qm-select:not([data-ghosted])),
 	.qm-matrix-roster[data-default] .qm-member.held .qm-member-title {
 		color: var(--_qm-ink-default);
 	}
+	.qm-matrix-roster[data-default] :is(.qm-tick-input:checked, .qm-tick-fixed) {
+		background: var(--_qm-accent-default);
+		border-color: var(--_qm-accent-default);
+	}
+	.qm-matrix-roster[data-default] :global(.qm-toggle[data-state='checked']) {
+		background: var(--_qm-accent-default);
+	}
 </style>

package/dist/visual/NumberField.svelte

@@ -4,7 +4,8 @@
  (`-`, `1.`) is never a document state worth a boundary round-trip, and
  committing it live flashes a coercion diagnostic + `console.error` on every
  intermediate prefix, announced by `DiagnosticList`'s `role="status"` live
- region.
+ region. Escape takes a pending entry back to what the field holds, as it takes a
+ card rename back, and the focus stays; with nothing pending the key is not claimed.
 
  An unset field holds its resolved `default:` as its text, at the default rung
  (theme.css), and an edit that settles writes it as authored, as `TextField` takes
@@ -52,7 +53,8 @@
 	}
 	let { value, integer, fallback, placeholder, label, id, describedBy, onCommit }: Props = $props();
 
-	let local = $derived(value != null ? String(value) : (fallback ?? ''));
+	const resting = $derived(value != null ? String(value) : (fallback ?? ''));
+	let local = $derived(resting);
 	const defaulted = $derived(value == null && !!fallback && local === fallback);
 
 	const partial = $derived(
@@ -76,13 +78,37 @@
 		local = el.value;
 	}
 
+	// Where the reverted text differs from the last settled one, a browser fires `change`
+	// on leaving; that one commits nothing. An entry that settled outside the grammar was
+	// handed up as a string and refused, so taking it back settles the held value again,
+	// which clears the refusal drawn on the field.
+	let reverted = false;
+	let offered = false;
+	function revert(e: KeyboardEvent): void {
+		if (e.key !== 'Escape' || e.isComposing) return;
+		const el = e.currentTarget as HTMLInputElement;
+		if (el.value === resting) return;
+		e.preventDefault();
+		local = el.value = resting;
+		reverted = true;
+		if (offered) {
+			offered = false;
+			onCommit(value);
+		}
+	}
+
 	// Parse a settled entry and emit it; `local` is owned by `oninput`. Blank →
 	// `undefined`, and the input takes the default back: nothing else reconciles it, the
 	// projection having read the default throughout. Onto the element as well, since the
 	// attribute Svelte last wrote may already be the default, and it writes no repeat.
 	function commit(el: HTMLInputElement): void {
+		if (reverted) {
+			reverted = false;
+			return;
+		}
 		const raw = el.value;
 		const entry = raw.trim();
+		offered = false;
 		if (entry === '') {
 			onCommit(undefined);
 			local = el.value = fallback ?? '';
@@ -90,7 +116,8 @@
 		}
 		// Finite as well: a digit run past `Number.MAX_VALUE` reads as `Infinity`.
 		const n = whole.test(entry) ? Number(entry) : NaN;
-		onCommit(Number.isFinite(n) ? n : raw);
+		offered = !Number.isFinite(n);
+		onCommit(offered ? raw : n);
 	}
 </script>
 
@@ -107,6 +134,8 @@
 	onbeforeinput={filter}
 	oninput={(e) => {
 		local = (e.currentTarget as HTMLInputElement).value;
+		reverted = false;
 	}}
+	onkeydown={revert}
 	onchange={(e) => commit(e.currentTarget as HTMLInputElement)}
 />