@quillmark/svelte 0.1.1 → 0.3.0

package/dist/visual/FieldHint.svelte

@@ -1,13 +1,13 @@
 <!--
- The schema `description` as a themed floating surface: the second that is READ
+ The schema `description` as a themed floating surface: the second that is read
  rather than picked from, so it shares {@link FormatPopover}'s translucent recipe
  and portals into the nearest `[data-qm-root]` like every
  other floating surface, so a consumer's dials still reach it.
 
- It replaces the native `title` tooltip, which reached no dial, waited ~1s, could
- not be dismissed, and (the part that made it a hole rather than a blemish)
- DOES NOT EXIST ON TOUCH. Guidance the reference quill puts on nearly every field
- was, on a tablet, reachable only through a screen reader.
+ Not the native `title` tooltip: that reaches no dial, waits ~1s, cannot be
+ dismissed, and (the part that makes it a hole rather than a blemish) does not exist
+ on touch, which leaves guidance the reference quill puts on nearly every field
+ reachable on a tablet only through a screen reader.
 
  Floating rather than inline under the label: the reference quill's descriptions run
  to a median of ~110 characters and past 250 at the tail: permanently in flow that
@@ -15,14 +15,14 @@
  to avoid. Measured, not assumed; a quill whose descriptions are all one short line
  would be better served inline.
 
- THE POPOVER IS CHROME, NOT THE ANNOUNCEMENT. Its content is `aria-hidden`: the
+ The popover is chrome, not the announcement. Its content is `aria-hidden`: the
  description reaches assistive tech through the always-present parked node
  {@link FieldLabel} renders and the `aria-describedby` the control carries, which
  holds whether the surface is open or not. So no reader depends on a hover.
 
  Three ways in, one per input modality: hover (pointer), focus (keyboard), tap
  (touch); wired here rather than taken from `Tooltip`, whose trigger returns early
- on `pointerType === 'touch'` and closes on click (the exact gap being fixed).
+ on `pointerType === 'touch'` and closes on click.
 -->
 <script lang="ts">
 	import { Popover } from 'bits-ui';
@@ -35,65 +35,110 @@
 		 * do not all announce alike. */
 		label: string;
 		/** The parked description node; the trigger points at it too, so a reader
-		 * that lands HERE announces the guidance rather than only the field's own. */
+		 * that lands here announces the guidance rather than only the field's own. */
 		describedBy?: string;
 	}
 	let { description, label, describedBy }: Props = $props();
 
 	let open = $state(false);
 	let triggerEl = $state<HTMLButtonElement | undefined>(undefined);
-	/** The root to portal INTO: `document.body` would escape the consumer's dials
+	/** The root to portal into: `document.body` would escape the consumer's dials
 	 * along with the editor's subtree. `undefined` falls back to bits-ui's default. */
 	const portalTarget = $derived(triggerEl?.closest<HTMLElement>('[data-qm-root]') ?? undefined);
+
+	/** Placement, re-measured on each opening: the surface rides the label rung beside
+	 * the glyph, or stands over the field. */
+	let beside = $state(false);
+
+	/** Whether this description sets one line. Off a probe rather than the surface
+	 * itself, since the side is a prop the surface is positioned from, and a side chosen
+	 * after the fact moves a surface the reader is already looking at. The probe wears
+	 * the surface's own class inside the portal target, so it wraps to the same measure
+	 * under the same dials; `width: max-content` keeps that measure the class's rather
+	 * than the containing block's. Line boxes are counted off a range over the text
+	 * rather than derived from a height, which would need the line rung and the inset
+	 * restated here as numbers. A DOM with no layout yields none, which stands the
+	 * surface over the field. */
+	function ridesTheRung(): boolean {
+		const host = portalTarget ?? document.body;
+		const probe = document.createElement('div');
+		probe.className = 'qm-hint-popover';
+		probe.style.cssText =
+			'position:absolute;width:max-content;visibility:hidden;pointer-events:none';
+		probe.textContent = description;
+		host.appendChild(probe);
+		const range = document.createRange();
+		range.selectNodeContents(probe);
+		const lines = range.getClientRects().length;
+		probe.remove();
+		return lines === 1;
+	}
+
+	function raise(): void {
+		beside = ridesTheRung();
+		open = true;
+	}
 </script>
 
-<!-- The trigger is OURS, not `Popover.Trigger`, and the surface anchors to it:
+<!-- The trigger is ours, not `Popover.Trigger`, and the surface anchors to it:
  the same shape {@link FormatPopover} uses. The primitive's trigger owns a click
- TOGGLE, which fights every one of the three openings below: a mouse click after
+ toggle, which fights every one of the three openings below: a mouse click after
  a hover-open would close, and on touch the focus that precedes the click opens
  it just in time for the click to close it again. -->
 <button
 	bind:this={triggerEl}
 	type="button"
-	class="qm-field-hint qm-icon-btn qm-focus-ring"
+	class="qm-field-hint qm-icon-btn qm-focus-ring qm-tap-floor"
 	aria-label="{label} guidance"
 	aria-expanded={open}
 	aria-describedby={describedBy}
 	onpointerenter={(e) => {
-		if (e.pointerType !== 'touch') open = true;
+		if (e.pointerType !== 'touch') raise();
 	}}
 	onpointerleave={(e) => {
 		if (e.pointerType !== 'touch') open = false;
 	}}
 	onpointerup={(e) => {
-		// Touch only, and a TOGGLE: the one modality with no hover to leave and no
+		// Touch only, and a toggle: the one modality with no hover to leave and no
 		// blur on the way out. A mouse press falls through to hover, which already
 		// has it open and will close it on the way off.
-		if (e.pointerType === 'touch') open = !open;
+		if (e.pointerType === 'touch') {
+			if (open) open = false;
+			else raise();
+		}
 	}}
 	onfocus={(e) => {
 		// Keyboard arrival only. A pointer press focuses the button too, and opening
 		// on that would re-open what the tap just toggled shut; `:focus-visible` is
 		// the UA's own answer to which arrival this was.
-		if (e.currentTarget.matches(':focus-visible')) open = true;
+		if (e.currentTarget.matches(':focus-visible')) raise();
 	}}
 	onblur={() => (open = false)}
 	onkeydown={(e) => {
 		if (e.key === 'Escape' && open) {
-			// Dismissable, which the `title` tooltip never was. Stopped here so the
-			// key does not travel on to a card- or editor-level Escape.
+			// Stopped here so the key does not travel on to a card- or editor-level
+			// Escape.
 			e.stopPropagation();
 			open = false;
 		}
 	}}><Icon name="info" size={13} /></button
 >
 
+<!-- Placement is the description'S height. One line rides the label rung beside its own
+ glyph, where the overhang past the rung's line box falls in the label-to-control gaps.
+ Anything taller stands over the field: beside the glyph it would hang onto the control
+ it describes, the one overlap a reader cannot clear by reaching for what is hidden,
+ since a pointer leaving the trigger closes the surface. Over the field it covers a
+ neighbour's control instead, which reaching for it dismisses. -->
+<!-- `align="center"` for the rung, `"start"` over the field: centred, a surface taller
+ than the glyph's line box would hang half its height onto the field's own control. -->
+
 <Popover.Root bind:open>
 	<Popover.Portal to={portalTarget}>
 		<Popover.Content
 			customAnchor={triggerEl ?? null}
-			side="top"
-			align="start"
+			side={beside ? 'right' : 'top'}
+			align={beside ? 'center' : 'start'}
 			sideOffset={6}
 			trapFocus={false}
 			onOpenAutoFocus={(e: Event) => e.preventDefault()}
@@ -128,18 +173,15 @@
 <style>
 	/* Chrome, type and ring are the glyph-button family's (`.qm-icon-btn` +
 	 `.qm-focus-ring`, controls.css): this trigger is one more glyph button and
-	 assembles none of that itself. What it does NOT take is the family's tap floor
+	 assembles none of that itself. What it does not take is the family's tap floor
 	 and the fill that floor sizes, because this is the one glyph button that sits in
-	 a LINE OF TEXT rather than in a row of its own: the floor is half again the label
+	 a line of text rather than in a row of its own: the floor is half again the label
 	 rung's line box, so a target-sized paint box overhangs the line at each end by
 	 most of the field's label-to-control gap: the hover fill landing on the input's
 	 top border, the focus ring crossing it.
 
-	 So the box is the GLYPH and the target is the `::after` below. A target is a
-	 region of the screen, not a paint box, and separating them is what lets both be
-	 correct at once: the row keeps the line box's height and the press keeps the
-	 floor. Every other glyph button has a row to itself and keeps the floor as its
-	 box.
+	 So the box is the glyph and the target is `.qm-tap-floor`'s (controls.css), which
+	 carries that split and the giving-up of the family floor together.
 
 	 It takes no fill either: the ink step below says hover, and the surface itself
 	 opens on it. */
@@ -148,38 +190,27 @@
 		color: var(--_qm-ink-ghost);
 		/* Not the family's `pointer`: the glyph raises guidance, it does not act. */
 		cursor: help;
-		position: relative;
-		min-width: 0;
-		min-height: 0;
 		padding: 0;
 		background: none;
 	}
-	/* The tap floor, out of flow and centred on the glyph: WCAG 2.5.8 measures the
-	 target, and this is it. Unpainted, so it enlarges the press and not the mark, and
-	 out of the accessibility tree by construction: a pseudo-element has no node. */
-	.qm-field-hint::after {
-		content: '';
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		width: var(--_qm-tap-min);
-		height: var(--_qm-tap-min);
-		transform: translate(-50%, -50%);
-	}
 	.qm-field-hint:hover,
 	.qm-field-hint:focus-visible {
-		color: var(--_qm-ink-meta);
+		color: var(--_qm-ink-label);
 	}
 	/* The lift, the translucency, the blur and the scale-in come from
-	 `.qm-popover-surface` (controls.css). This surface's own is a MEASURE: guidance
+	 `.qm-popover-surface` (controls.css). This surface's own is a measure: guidance
 	 is prose, and prose past ~40 characters a line stops being scannable; plus the
 	 inset and the meta type rung that keep it a note about a field rather than a
-	 second field. */
-	.qm-hint-popover {
+	 second field.
+
+	 Unscoped, because the placement probe wears this class on a node Svelte never
+	 compiled: a scoped rule would leave the probe wrapping to a different measure
+	 than the surface it stands in for, which is the one thing the probe must not do. */
+	:global(.qm-hint-popover) {
 		max-width: 22rem;
 		padding: var(--_qm-space) var(--_qm-space-2);
-		font-size: var(--_qm-text-meta);
+		font-size: var(--_qm-text-label);
 		line-height: var(--_qm-leading-body);
-		color: var(--_qm-ink-meta);
+		color: var(--_qm-ink-label);
 	}
 </style>

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

@@ -5,7 +5,7 @@ interface Props {
      * do not all announce alike. */
     label: string;
     /** The parked description node; the trigger points at it too, so a reader
-     * that lands HERE announces the guidance rather than only the field's own. */
+     * that lands here announces the guidance rather than only the field's own. */
     describedBy?: string;
 }
 declare const FieldHint: import("svelte").Component<Props, {}, "">;

package/dist/visual/FieldLabel.svelte

@@ -1,26 +1,26 @@
 <!--
  A field's label plus its guidance chrome.
 
- IT NAMES THE CONTROL. A real `<label>`, so a click lands the caret in the field:
+ It names the control. A real `<label>`, so a click lands the caret in the field:
  the widest, easiest target in a dense row, and the most conventional affordance a
- form has. `for` reaches a LABELABLE control (the inputs, the enum trigger, the
+ form has. `for` reaches a labelable control (the inputs, the enum trigger, the
  switch) and the browser does the rest; a control `for` cannot reach (the prose
  leaf's `contenteditable`, the date field's segments, an array's N inputs) leaves
  `controlId` unset, points `aria-labelledby` back at this label's own `id`, and
  hands the click to `onActivate`. Both halves are needed: `for` on a non-labelable
- element is inert AND invalid.
+ element is inert and invalid.
 
  Two non-gating label decorations:
  • a persistent required `*` when the field has no `default:`: the
  "Unendorsed"/must_fill set (DOCUMENT_MODEL: no separate `required` axis). 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
+ 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}).
 
- THE DESCRIPTION DESCRIBES, IT DOES NOT NAME. It is parked in an always-present
+ 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
  role then description, which is the announcement the markup visually implies. In
  the name it would instead prepend ~110 characters of guidance (the reference
@@ -77,7 +77,7 @@
 		{/if}
 	</label>
 	{#if description}
-		<!-- OUTSIDE the `<label>`, both of them: a trigger inside it would put its own
+		<!-- Outside the `<label>`, both of them: a trigger inside it would put its own
 		 name in the control's, and the parked copy would put all ~110 characters
 		 there. A `<button>` in a label is at least safe from the other hazard:
 		 the spec makes a label's activation behaviour do nothing for a click
@@ -90,7 +90,7 @@
 
 <style>
 	/* The row, not the label, is the field's grid child: `Field`'s subgrid counts
-	 three tracks and the hint sits beside the label rather than under it.
+	 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
@@ -107,7 +107,7 @@
 		align-items: center;
 		gap: var(--_qm-space-half);
 		font-size: var(--_qm-text-label);
-		font-weight: var(--_qm-weight-label);
+		font-weight: var(--_qm-weight-mid);
 		line-height: var(--_qm-leading-tight);
 		color: var(--_qm-ink-label);
 		min-width: 0;

package/dist/visual/FormatPopover.svelte

@@ -1,6 +1,6 @@
 <!--
- The formatting selection popover (VISUAL_EDITOR §Chrome). ONE popover,
- shell-owned, observing the ACTIVE leaf through
+ The formatting selection popover (VISUAL_EDITOR §Chrome). One popover,
+ 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. A non-empty selection in
  the active leaf raises it over
@@ -11,20 +11,20 @@
  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.
 
- SELECTION OBSERVATION. The view's `dispatchTransaction` is the codec's
+ Selection observation. The view's `dispatchTransaction` is the codec's
  (read-only), so there is no hook to observe transactions from outside.
  Fallback: a document-level `selectionchange` listener, coalesced to one
  `requestAnimationFrame`-deferred check (see `deferredSync` below: a bare
- microtask is NOT late enough; verified a "select all" gesture fires several
+ microtask is not late enough; verified a "select all" gesture fires several
  transient `selectionchange` events first). `focusout` keeps the popover honest
  when focus leaves the leaf.
 
- Nothing here watches SCROLL. `sync` decides whether the surface is up and what
+ Nothing here watches scroll. `sync` decides whether the surface is up and what
  its buttons read, which a scroll changes neither of; where it sits is the
  anchor's own question, and the anchor answers it by measuring when floating-ui
  asks rather than by being handed a rect (`codec/anchor.ts`).
 
- FOCUS DISCIPLINE. Three failure modes a naive Popover.Content invites:
+ Focus discipline. Three failure modes a naive Popover.Content invites:
  (1) its default `trapFocus` (true) redirects any focus landing outside its
  DOM back inside; which would make it impossible to click back into
  the editor to change the selection while the popover is showing. Fixed
@@ -41,7 +41,7 @@
  the viewport off the clicked field. Fixed by `onCloseAutoFocus`
  calling `preventDefault`: the intentional returns after mark toggle
  / link submit go through `view.focus` in `toggle`/`submitLink`.
- A mark button ALSO swallows its own `mousedown` (prosemirror-menu's own
+ A mark button also swallows its own `mousedown` (prosemirror-menu's own
  trick): without it, the browser's default mousedown action focuses the
  button before `click` fires, blurring the editor and collapsing the
  selection the command is supposed to act on.
@@ -53,7 +53,7 @@
 	// off-tree, so this component renders standalone too.
 	const t = wording();
 	import { toggleMark } from 'prosemirror-commands';
-	import { TextSelection } from 'prosemirror-state';
+	import { TextSelection, type Command } from 'prosemirror-state';
 	import type { EditorView } from 'prosemirror-view';
 	import type { MarkType } from 'prosemirror-model';
 	import { Popover } from 'bits-ui';
@@ -65,6 +65,7 @@
 		type LeafViews,
 		type RangeAnchor
 	} from '../core/codec/index.js';
+	import { clearLink, hrefInSelection, normalizeHref, setLink } from './links.js';
 	import './controls.css';
 
 	type LeafWithView = FieldController & Partial<LeafViews>;
@@ -77,7 +78,9 @@
 
 	/** Mark size: the shared control-glyph rule for the popover icons. */
 	const GLYPH = 15;
-	/** The six content formatting marks; `anchor` is a 7th, rendered separately (a decoration toggle, not a PM `toggleMark` (see the button below). Each carries a glyph) the icon *is* the label. */
+	/** 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 MARKS: { name: string; icon: IconName; title: string }[] = $derived([
 		{ name: 'strong', icon: 'bold', title: t.strings.formatBold },
 		{ name: 'em', icon: 'italic', title: t.strings.formatEmphasis },
@@ -89,23 +92,24 @@
 
 	let open = $state(false);
 	let activeMarks = $state<Record<string, boolean>>({});
-	/** Whether the selection is in the FIELD's coordinate space, which an anchor needs
+	/** Whether the selection is in the field's coordinate space, which an anchor needs
 	 *  and a table cell is not (see `sync`). */
 	let anchorAvailable = $state(true);
 	let linkPromptOpen = $state(false);
 	let linkValue = $state('');
+	let linkInputEl = $state<HTMLInputElement | undefined>(undefined);
 	let contentEl = $state<HTMLElement | undefined>(undefined);
-	/** The root to portal INTO: `document.body` escapes the editor's subtree and
+	/** 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.
 	 * Resolved from the active leaf's own DOM, so the popover lands inside whichever
 	 * root raised it; `undefined` falls back to bits-ui's `document.body` for a leaf
 	 * mounted outside any root. */
 	let portalTarget = $state<HTMLElement | undefined>(undefined);
 
-	/** The selection the surface hangs off, live rather than measured (`codec/anchor.ts`): floating-ui re-reads it through every scroll and reflow, so `sync` mints one only when the RANGE moves. A NEW object each time it does, so bits-ui's `watch( => opts.customAnchor.current, …)` sees the change and repositions (a mutated-in-place object would not). */
+	/** The selection the surface hangs off, live rather than measured (`codec/anchor.ts`): floating-ui re-reads it through every scroll and reflow, so `sync` mints one only when the range moves. A new object each time it does, so bits-ui's `watch( => opts.customAnchor.current, …)` sees the change and repositions (a mutated-in-place object would not). */
 	let anchor = $state<RangeAnchor | undefined>(undefined);
 
-	/** The view the caret is actually in: the leaf's own, or the NESTED cell view of a
+	/** 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). */
@@ -114,7 +118,7 @@
 		return leaf?.focusedView?.() ?? leaf?.view;
 	}
 
-	/** Recompute open/anchor/active-marks from the active leaf's CURRENT PM selection. */
+	/** Recompute open/anchor/active-marks from the active leaf's current PM selection. */
 	function sync(): void {
 		const insidePopover =
 			!!contentEl && !!document.activeElement && contentEl.contains(document.activeElement);
@@ -124,7 +128,7 @@
 		if (insidePopover) return;
 		const leaf = getActiveLeaf() as LeafWithView | undefined;
 		const view = leaf?.focusedView?.() ?? leaf?.view;
-		// A non-empty TEXT selection. A NODE selection is non-empty too and has nothing
+		// 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;
@@ -145,7 +149,7 @@
 		// `anchor` is a decoration, not a PM mark (CODEC §Marks): its active state is
 		// whether the selection covers an identity anchor, read off the leaf in USV.
 		//
-		// A selection inside a table CELL is not in that coordinate space at all: the
+		// A selection inside a table cell is not in that 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).
@@ -159,8 +163,8 @@
 	}
 
 	// A burst of DOM events (verified: browser "select all" processing fires
-	// `selectionchange` several times, transiently EMPTY before landing on the
-	// final range) must coalesce to ONE settled check, not one `sync()` per
+	// `selectionchange` several times, transiently empty before landing on the
+	// final range) must coalesce to one settled check, not one `sync()` per
 	// event: reacting to each intermediate state mounts/unmounts
 	// `Popover.Content` repeatedly within a few event-loop turns, which is both
 	// visibly unstable (a moving, momentarily detached click target) and races
@@ -169,7 +173,7 @@
 	// microtask is not late enough: those transient events are themselves
 	// separated by microtasks. `requestAnimationFrame` is: it runs once
 	// per-frame, after the browser has finished dispatching every synchronous
-	// consequence of the user gesture, so it always reads the FINAL, settled
+	// consequence of the user gesture, so it always reads the final, settled
 	// selection. `pending` collapses a burst to a single scheduled callback.
 	let pending = false;
 	let rafHandle = 0;
@@ -202,19 +206,36 @@
 		if (!open) linkPromptOpen = false;
 	});
 
+	// The prompt takes its own focus. Nothing else moves it: open-auto-focus is
+	// prevented (focus discipline above), and the prompt replaces the buttons on a
+	// surface already open, so without this the URL is typed into the document.
+	// Selected rather than merely focused, the input arriving seeded and replacing
+	// that value being what the prompt is usually raised for.
+	$effect(() => {
+		if (linkPromptOpen && linkInputEl) {
+			linkInputEl.focus();
+			linkInputEl.select();
+		}
+	});
+
 	/** Swallow the button's mousedown so focus/selection never leave the leaf. */
 	function keepFocus(e: MouseEvent): void {
 		e.preventDefault();
 	}
 
+	// A link is a value, so its button raises the prompt rather than toggling — one
+	// meaning whether or not the selection carries one, and the seeded prompt is the
+	// only place the document's href is legible. Removal is an arm inside the
+	// prompt, not a second meaning for the button. The five value-less marks keep
+	// the toggle.
 	function toggle(name: string): void {
 		const view = activeLeafView();
 		if (!view) return;
 		const type: MarkType | undefined = view.state.schema.marks[name];
 		if (!type) return;
-		if (name === 'link' && !activeMarks.link) {
+		if (name === 'link') {
+			linkValue = hrefInSelection(view.state);
 			linkPromptOpen = true;
-			linkValue = '';
 			return;
 		}
 		toggleMark(type)(view.state, view.dispatch);
@@ -242,21 +263,31 @@
 		sync();
 	}
 
-	function submitLink(): void {
-		const view = activeLeafView();
-		const type = view?.state.schema.marks.link;
+	/** 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;
-		if (!view || !type) return;
-		const href = linkValue.trim();
-		if (href) toggleMark(type, { href })(view.state, view.dispatch);
-		view.focus();
+		const view = activeLeafView();
+		if (view) {
+			cmd?.(view.state, view.dispatch);
+			view.focus();
+		}
 		sync();
 	}
 
+	/** Apply the typed value, normalized (`links.ts`). A blank value is nothing to
+	 *  apply and only closes the prompt: removal has its own arm, and a second door
+	 *  onto it would be a second thing to keep true. */
+	function submitLink(): void {
+		closePrompt(setLink(normalizeHref(linkValue)));
+	}
+
+	function removeLink(): void {
+		closePrompt(clearLink);
+	}
+
 	function cancelLink(): void {
-		linkPromptOpen = false;
-		activeLeafView()?.focus();
-		sync();
+		closePrompt();
 	}
 </script>
 
@@ -271,7 +302,7 @@
 			onOpenAutoFocus={(e: Event) => e.preventDefault()}
 			onCloseAutoFocus={(e: Event) => e.preventDefault()}
 		>
-			<!-- The `child` snippet, so the surface IS the primitive's content node
+			<!-- The `child` snippet, so the surface is the primitive's content node
 			 rather than a pill inside it: the dismissal is a CSS animation and the
 			 primitive unmounts on the content node's own animations finishing. It
 			 also keeps the recipe reachable from this
@@ -299,12 +330,24 @@
 								}}
 							>
 								<input
+									bind:this={linkInputEl}
 									class="qm-link-input"
 									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>
+								<!-- 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 activeMarks.link}
+									<button
+										type="button"
+										class="qm-icon-btn qm-mark-btn"
+										onmousedown={keepFocus}
+										onclick={removeLink}>{t.strings.linkRemove}</button
+									>
+								{/if}
 								<button
 									type="button"
 									class="qm-icon-btn qm-mark-btn"
@@ -349,7 +392,7 @@
 </Popover.Root>
 
 <style>
-	/* This surface PORTALS out of the leaf's DOM but INTO the nearest `[data-qm-root]`
+	/* This surface portals out of the leaf's DOM but into the nearest `[data-qm-root]`
 	   (the target is resolved in `sync`), so it inherits the consumer's dials like
 	   every other surface. It carries the marker itself too: floating over content is
 	   still a detached subtree for the derivation's purposes, and the marker is what
@@ -385,12 +428,16 @@
 		gap: var(--_qm-space);
 		align-items: center;
 	}
+	/* The box's recipe without `.qm-input`, which adds the `width: 100%` that would
+	   stretch this to the popover. The fill is the box's own rung and there is no
+	   edge, as everywhere else a value is typed (controls.css). */
 	.qm-link-input {
 		font: inherit;
 		font-size: var(--_qm-text-body);
-		padding: var(--_qm-space) var(--_qm-space-2);
-		border: var(--_qm-border-width) solid var(--_qm-border);
+		padding: var(--_qm-inset-control);
+		border: none;
 		border-radius: var(--_qm-radius-inner);
+		background: var(--_qm-surface-well);
 		min-width: 12rem;
 	}
 </style>

package/dist/visual/NumberField.svelte

@@ -1,20 +1,20 @@
 <!--
  A `number` / `integer` field → numeric input (fixture `font_size` = 11.5).
- Commits at `change` (blur/Enter), NOT per keystroke: a partial numeric entry
+ Commits at `change` (blur/Enter), not per keystroke: a partial numeric entry
  (`-`, `1.`, `1e`) 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. A blank entry commits `undefined`: the UNSET rung of the
+ region. A blank entry commits `undefined`: the unset rung of the
  commitment ladder: the parent removes the field and the engine renders the
  ghosted `default:`. Settling at `change` also keeps
  select-all-and-retype from flashing the preview through the default mid-keystroke.
 
- `type="text"`, not `type="number"`: a native number input SANITIZES an
+ `type="text"`, not `type="number"`: a native number input sanitizes an
  invalid string to `""` before the DOM `value` setter even runs (verified:
  `.value = "abc"` on `type="number"` never lands), which would make a
  genuinely bad entry untypeable. The commit-time coercion diagnostic
  (VISUAL_EDITOR §Diagnostics) needs exactly that path reachable through the
- UI, so a non-blank entry that fails to parse forwards the RAW STRING to
+ UI, so a non-blank entry that fails to parse forwards the raw string to
  `onCommit` unchanged: the boundary's own `writer.set` coercion is the judge
  (throws a `QuillmarkError` the parent turns into a field diagnostic), not a
  client-side guess. `inputmode` keeps the numeric mobile keyboard.
@@ -27,7 +27,7 @@
 		value: number | undefined;
 		integer?: boolean;
 		fallback?: number;
-		/** Accessible name for an input NOTHING else names: an object property, whose
+		/** Accessible name for an input nothing else names: an object property, whose
 		 * name is the field label plus the property's. A field's own input takes `id`
 		 * instead and is named by the `<label for>` beside it. */
 		label?: string;

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

@@ -3,7 +3,7 @@ interface Props {
     value: number | undefined;
     integer?: boolean;
     fallback?: number;
-    /** Accessible name for an input NOTHING else names: an object property, whose
+    /** Accessible name for an input nothing else names: an object property, whose
      * name is the field label plus the property's. A field's own input takes `id`
      * instead and is named by the `<label for>` beside it. */
     label?: string;