@quillmark/svelte 0.21.0 → 0.23.0

package/dist/visual/Field.svelte

@@ -27,7 +27,7 @@
 		ResolvedField
 	} from '@quillmark/wasm';
 	import type { EditorErrorHandler } from '../core/errors.js';
-	import { seatValueLeaves, type LandingBox, type LeafRegistry } from './leaves.js';
+	import { seatValueLeaves, stepsTo, type LandingBox, type LeafRegistry } from './leaves.js';
 	import type { FieldModel, FieldSpan } from './structure.js';
 	import {
 		VARIANT_DISCRIMINANT,
@@ -40,6 +40,7 @@
 		printedText,
 		renderedBoolean,
 		stringifyGhost,
+		textCap,
 		titleText
 	} from './structure.js';
 	import { wording } from './strings.js';
@@ -82,7 +83,9 @@
 		optionAllowed?: (value: string) => boolean;
 		/** How a refused option draws: greyed (default) or left out. */
 		enumDisallowed?: 'hide' | 'disable';
-		onFocus?: (addr: Addr) => void;
+		/** A focus inside the field: its address, and the steps down to the cell holding
+		 *  the focus ({@link stepsTo}), `[]` on the field's own control. */
+		onFocus?: (addr: Addr, steps?: readonly PathStep[]) => void;
 		onCaretMove?: (addr: Addr, pos: number) => void;
 		onChange?: (addr: Addr) => void;
 		onError?: EditorErrorHandler;
@@ -161,6 +164,14 @@
 	// reference must vanish with it: `aria-describedby` pointing at nothing describes
 	// nothing, and silently.
 	const describedBy = $derived(field.description ? domIds.description : undefined);
+	// A capped prose leaf reports its count, and the count describes it too: a keystroke
+	// the cap refuses changes nothing else a reader can perceive.
+	let chars = $state<number>();
+	const cap = $derived(field.control === 'prose' ? textCap(field.schema) : undefined);
+	const countId = $derived(`${domIds.control}-count`);
+	const proseDescribedBy = $derived(
+		cap ? [describedBy, countId].filter(Boolean).join(' ') : describedBy
+	);
 	// Two controls own their label row, the add chip and the held count sharing it.
 	const ownsLabel = $derived(field.control === 'array' || field.control === 'matrix');
 	const flat = $derived(flatObject(field.schema));
@@ -221,7 +232,7 @@
 
 	/**
 	 * This field's landing handle. The wrapper is the bloom host rather than the
-	 * control: `bloomInside` appends an inset child and an `<input>` holds none. The
+	 * control: the wash is a box's `::after`, which an `<input>` draws none of. The
 	 * label is outside it, and stays out of the wash: an arrival marks where the caret
 	 * landed, which is the control. A control that owns its label (`ownsLabel`: the array
 	 * and the matrix) holds that row inside itself, so it names its own box
@@ -251,7 +262,8 @@
 	}
 
 	// A by-value prose leaf anywhere inside this field's containers is reached under
-	// this field's key: the active address names the field, never the element or cell.
+	// this field's key: the registry and the active address name the field, never the
+	// element or cell.
 	seatValueLeaves({
 		focus: (leaf) => leaves?.focusValue(leafKey, leaf),
 		release: (leaf) => leaves?.releaseValue(leafKey, leaf)
@@ -261,11 +273,16 @@
 	 * A form control has no controller to report its focus through, so the wrapper
 	 * reports: `focusin` bubbles, so one handler covers a plain input, an array's N
 	 * elements and an object's properties alike, and the active leaf names a scalar
-	 * field the way it names a prose one. A prose leaf reports through its own
+	 * field the way it names a prose one, down to the element or cell the focus is in. A prose leaf reports through its own
 	 * controller — the source that drives its caret signals too — and is excluded here
 	 * rather than counted twice.
 	 */
-	const reportFocus = $derived(field.control === 'prose' ? undefined : () => onFocus?.(addr));
+	const reportFocus = $derived(
+		field.control === 'prose'
+			? undefined
+			: (e: FocusEvent & { currentTarget: HTMLElement }) =>
+					onFocus?.(addr, stepsTo(e.target, e.currentTarget))
+	);
 </script>
 
 <div class={['qm-field', { cell: span === 'cell' }]}>
@@ -276,8 +293,9 @@
 			id={domIds.label}
 			descriptionId={domIds.description}
 			{onActivate}
-			required={field.required}
 			description={field.description}
+			count={cap && chars != null ? t.strings.textCount(chars, cap.max) : undefined}
+			{countId}
 		/>
 	{/if}
 	<!-- The control and what hangs under it, in one grid cell: the diagnostics stack
@@ -285,7 +303,7 @@
 	 rule below holds why). One markup for both spans; a field owning its row nests a
 	 level and measures the same. -->
 	<div class="qm-field-stack">
-		<div class="qm-field-control" {@attach registerControl} onfocusin={reportFocus}>
+		<div class="qm-field-control qm-wash" {@attach registerControl} onfocusin={reportFocus}>
 			{#if field.control === 'prose'}
 				<ProseField
 					{quill}
@@ -296,9 +314,10 @@
 					plaintext={field.plaintext}
 					fallback={printed ? (ghost as Content) : undefined}
 					placeholder={none}
-					placeholderUntilEdit
+					emptyUnsets={optional}
 					labelledBy={domIds.label}
-					{describedBy}
+					describedBy={proseDescribedBy}
+					cap={cap && { ...cap, onCount: (n) => (chars = n) }}
 					{leafKey}
 					{onFocus}
 					{onCaretMove}
@@ -374,7 +393,6 @@
 					layout={arrayLayout(field.schema)}
 					max={field.schema.max}
 					label={field.label}
-					required={field.required}
 					description={field.description}
 					labelId={domIds.label}
 					descriptionId={domIds.description}
@@ -389,6 +407,7 @@
 					value={value as Record<string, unknown> | undefined}
 					properties={field.schema.properties}
 					{flat}
+					placed
 					label={field.label}
 					idBase={domIds.control}
 					labelledBy={domIds.label}
@@ -476,13 +495,10 @@
 		gap: var(--_qm-space);
 		min-width: 0;
 	}
-	/* Positioned for the arrival wash a landing inserts (`core/bloom.ts`), the way
-	   `.qm-prose` is: an inset child over the control, since an `<input>` takes none.
-	   The radius is the control's own, so the wash's corners are the box's rather than
-	   square over a rounded one; on an array or a subform it bounds a group, where
-	   there is no single box for it to disagree with. */
+	/* The arrival wash's host (`.qm-wash`). The radius is the control's own, so the
+	   wash's corners are the box's rather than square over a rounded one; on an array or
+	   a subform it bounds a group, where there is no single box for it to disagree with. */
 	.qm-field-control {
-		position: relative;
 		border-radius: var(--_qm-radius-inner);
 	}
 </style>

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

@@ -1,4 +1,4 @@
-import type { Document, Quill, Addr, Diagnostic, ResolvedField } from '@quillmark/wasm';
+import type { Document, Quill, Addr, Diagnostic, PathStep, ResolvedField } from '@quillmark/wasm';
 import type { EditorErrorHandler } from '../core/errors.js';
 import { type LeafRegistry } from './leaves.js';
 import type { FieldModel, FieldSpan } from './structure.js';
@@ -27,7 +27,9 @@ interface Props {
     optionAllowed?: (value: string) => boolean;
     /** How a refused option draws: greyed (default) or left out. */
     enumDisallowed?: 'hide' | 'disable';
-    onFocus?: (addr: Addr) => void;
+    /** A focus inside the field: its address, and the steps down to the cell holding
+     *  the focus ({@link stepsTo}), `[]` on the field's own control. */
+    onFocus?: (addr: Addr, steps?: readonly PathStep[]) => void;
     onCaretMove?: (addr: Addr, pos: number) => void;
     onChange?: (addr: Addr) => void;
     onError?: EditorErrorHandler;

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,15 @@
 		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;
+		/** A capped field's character count, drawn at the row's end. */
+		count?: string;
+		/** The count's own id, for the control's `aria-describedby`. */
+		countId?: string;
 	}
-	let { label, controlId, id, descriptionId, onActivate, required, description }: Props = $props();
+	let { label, controlId, id, descriptionId, onActivate, description, count, countId }: Props =
+		$props();
 </script>
 
 <div class="qm-field-label-row">
@@ -71,9 +62,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
@@ -85,16 +73,17 @@
 		<FieldHint {description} {label} describedBy={descriptionId} />
 		<span class="qm-visually-hidden" id={descriptionId}>{description}</span>
 	{/if}
+	{#if count != null}
+		<span class="qm-field-count" id={countId}>{count}</span>
+	{/if}
 </div>
 
 <style>
 	/* 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,26 +93,23 @@
 	.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);
 		color: var(--_qm-ink-label);
 		min-width: 0;
 	}
+	.qm-field-count {
+		margin-inline-start: auto;
+		font-size: var(--_qm-text-label);
+		color: var(--_qm-ink-label);
+		font-variant-numeric: tabular-nums;
+	}
 	/* A label that lands focus says so. Only when it has somewhere to land: an
 	   `ObjectField` property's label names a subform, not one control. */
 	.qm-field-label.targeted {
 		cursor: pointer;
 	}
-	/* Required marker: the label's own ink, not an alarm; required-ness is guidance,
-	 the document still edits and renders unmet, and the danger hue is a diagnostic's. */
-	.qm-field-required {
-		display: inline-flex;
-		align-items: center;
-		color: var(--_qm-ink-label);
-		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,10 +9,12 @@ 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;
+    /** A capped field's character count, drawn at the row's end. */
+    count?: string;
+    /** The count's own id, for the control's `aria-describedby`. */
+    countId?: string;
 }
 declare const FieldLabel: import("svelte").Component<Props, {}, "">;
 type FieldLabel = ReturnType<typeof FieldLabel>;

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.
@@ -64,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';
@@ -83,9 +85,8 @@
 	let { getActiveLeaf }: Props = $props();
 
 	const SETTLE_MS = 450;
-	/** 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. */
+	/** 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 },
@@ -98,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.
@@ -119,7 +121,7 @@
 	/** 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();
 	}
@@ -133,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() ||
@@ -163,13 +163,6 @@
 		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;
 	}
 
@@ -266,6 +259,7 @@
 		if (name === 'link') {
 			linkValue = hrefInSelection(view.state);
 			linkPresent = linkValue.length > 0;
+			promptView = view;
 			linkPromptOpen = true;
 			return;
 		}
@@ -274,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();
@@ -325,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);
 	}
@@ -338,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}
@@ -391,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
 								>
@@ -423,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} /></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" /></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);