@quillmark/svelte 0.19.0 → 0.20.1

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

@@ -1,7 +1,7 @@
-import { type FieldController } from '../core/codec/index.js';
+import type { ActiveProse } from './leaves.js';
 interface Props {
     /** The observation seam VisualEditor exposes over its `leaves` registry. */
-    getActiveLeaf: () => FieldController | undefined;
+    getActiveLeaf: () => ActiveProse | undefined;
 }
 declare const FormatPopover: import("svelte").Component<Props, {}, "">;
 type FormatPopover = ReturnType<typeof FormatPopover>;

package/dist/visual/MatrixAdd.svelte

@@ -1,76 +1,38 @@
 <!--
- An open matrix's add box (VISUAL_EDITOR §"The matrix"): a combobox whose options are
- what the typed words name across the document's checklists, best first, and last the
- item they would add to this one. The list stands in flow under the input rather than
- floating, so a closing group panel clips nothing of it, and it closes while the focus
- is elsewhere. The input keeps the caret throughout and the active option is
- `aria-activedescendant`, the combobox pattern: ↑/↓ walk, Enter picks, Escape clears.
- Unwalked, the active option is the first result the words name outright, else the add
- option: a result named only by abbreviation, which may stand in another card, is
- taken by an arrow or a press and never by Enter alone.
+ An open matrix's add box (VISUAL_EDITOR §"The matrix"): a plain text input. Enter adds
+ what was typed, trimmed, and clears the box; Escape clears it.
 -->
 <script lang="ts">
 	import Icon from './icons/Icon.svelte';
-	import type { AddOption } from './checklists.js';
 	import './controls.css';
 
 	interface Props {
-		/** The input's id, and the base its listbox and options derive theirs from. */
 		id: string;
 		/** The input's accessible name and its words at rest. */
 		placeholder: string;
-		/** The options `query` offers, best first; the add option, where there is one, last. */
-		options: (query: string) => AddOption[];
-		onChoose: (option: AddOption, query: string) => void;
+		/** Add an item titled `title`, never empty. */
+		onAdd: (title: string) => void;
 	}
-	let { id, placeholder, options, onChoose }: Props = $props();
+	let { id, placeholder, onAdd }: Props = $props();
 
-	let query = $state('');
-	/** The walked option, `undefined` until an arrow or the pointer moves it. */
-	let walked = $state<number | undefined>();
-	let focused = $state(false);
+	let typed = $state('');
 	let inputEl = $state<HTMLInputElement | undefined>();
-	const shown = $derived(query.trim() ? options(query.trim()) : []);
-	const open = $derived(focused && shown.length > 0);
-	const active = $derived.by(() => {
-		if (walked !== undefined) return Math.min(walked, shown.length - 1);
-		const strong = shown.findIndex((o) => o.strong);
-		if (strong >= 0) return strong;
-		const add = shown.findIndex((o) => o.add);
-		return add >= 0 ? add : 0;
-	});
-	const listId = $derived(`${id}-list`);
-	const optionId = (k: number): string => `${id}-opt-${k}`;
 
 	export function focus(): void {
 		inputEl?.focus();
 	}
 
-	function choose(k: number): void {
-		const option = shown[k];
-		if (!option) return;
-		const typed = query.trim();
-		query = '';
-		walked = undefined;
-		onChoose(option, typed);
-	}
-
 	function onkeydown(e: KeyboardEvent): void {
 		if (e.isComposing) return;
-		if (e.key === 'ArrowDown' && open) {
-			e.preventDefault();
-			walked = (active + 1) % shown.length;
-		} else if (e.key === 'ArrowUp' && open) {
-			e.preventDefault();
-			walked = (active - 1 + shown.length) % shown.length;
-		} else if (e.key === 'Enter' && open) {
+		if (e.key === 'Enter' && typed.trim()) {
 			e.preventDefault();
-			choose(active);
-		} else if (e.key === 'Escape' && query) {
+			const title = typed.trim();
+			typed = '';
+			onAdd(title);
+		} else if (e.key === 'Escape' && typed) {
 			e.preventDefault();
 			e.stopPropagation();
-			query = '';
-			walked = undefined;
+			typed = '';
 		}
 	}
 </script>
@@ -80,67 +42,21 @@
 		<Icon name="plus" class="qm-matrix-add-glyph" />
 		<input
 			bind:this={inputEl}
+			bind:value={typed}
 			{id}
 			class="qm-input qm-focus-ring"
 			type="text"
-			role="combobox"
 			autocomplete="off"
 			aria-label={placeholder}
-			aria-autocomplete="list"
-			aria-expanded={open}
-			aria-controls={listId}
-			aria-activedescendant={open ? optionId(active) : undefined}
 			{placeholder}
-			value={query}
-			oninput={(e) => {
-				query = e.currentTarget.value;
-				walked = undefined;
-			}}
-			onfocus={() => (focused = true)}
-			onblur={() => (focused = false)}
 			{onkeydown}
 		/>
 	</span>
-	<!-- Always mounted, so `aria-controls` names an element at rest too; empty, it draws
-	     nothing. -->
-	<div
-		class="qm-menu-surface qm-matrix-add-list"
-		role="listbox"
-		id={listId}
-		aria-label={placeholder}
-		hidden={!open}
-	>
-		{#each shown as option, k (option.key)}
-			<!-- The input keeps focus and owns the keys; a press picks without taking it. -->
-			<!-- svelte-ignore a11y_click_events_have_key_events -->
-			<div
-				class={['qm-menu-item qm-matrix-add-option', { add: option.add }]}
-				role="option"
-				id={optionId(k)}
-				tabindex="-1"
-				aria-selected={k === active}
-				data-highlighted={k === active ? '' : undefined}
-				onpointerdown={(e) => e.preventDefault()}
-				onpointermove={() => (walked = k)}
-				onclick={() => choose(k)}
-			>
-				{#if option.add}<Icon name="plus" class="qm-matrix-add-glyph" />{/if}
-				<span class="qm-matrix-add-title">{option.title}</span>
-				{#if option.note}<span class="qm-matrix-add-note">{option.note}</span>{/if}
-			</div>
-		{/each}
-	</div>
 </div>
 
 <style>
-	/* The box's text, and every option's, starts past the glyph slot at its leading edge,
-	 so a result reads in the column the typed words stand in and the add option's `+`
-	 stands under the box's. */
 	.qm-matrix-add {
 		--_slot: calc(var(--_qm-space-2) * 2 + var(--_qm-glyph-control));
-		display: flex;
-		flex-direction: column;
-		gap: var(--_qm-space-half);
 		min-width: 0;
 	}
 	.qm-matrix-add-field {
@@ -172,39 +88,4 @@
 	.qm-matrix-add-field .qm-input:placeholder-shown:not(:focus):hover {
 		background: var(--_qm-surface-hover);
 	}
-	/* The list is a menu, raised over the card rather than cut into it, so its options
-	 read as choices and not as a second field. Its edge and inset come off each
-	 option's, which keeps the column. */
-	.qm-matrix-add-list {
-		display: flex;
-		flex-direction: column;
-	}
-	.qm-matrix-add-list[hidden] {
-		display: none;
-	}
-	.qm-matrix-add-option {
-		position: relative;
-		display: flex;
-		align-items: baseline;
-		justify-content: space-between;
-		gap: var(--_qm-space-2);
-		padding-inline-start: calc(var(--_slot) - var(--_qm-space-half) - var(--_qm-border-width));
-		font-size: var(--_qm-text-body);
-		color: var(--_qm-ink);
-	}
-	.qm-matrix-add-option :global(.qm-matrix-add-glyph) {
-		inset-inline-start: calc(var(--_qm-space-2) - var(--_qm-space-half) - var(--_qm-border-width));
-		inset-block-start: 50%;
-		translate: 0 -50%;
-	}
-	/* The add option reads at the label ink: it offers a new item, where a result names
-	 one the document already knows. */
-	.qm-matrix-add-option.add {
-		color: var(--_qm-ink-label);
-	}
-	.qm-matrix-add-note {
-		flex-shrink: 0;
-		font-size: var(--_qm-text-label);
-		color: var(--_qm-ink-label);
-	}
 </style>

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

@@ -1,12 +1,9 @@
-import type { AddOption } from './checklists.js';
 interface Props {
-    /** The input's id, and the base its listbox and options derive theirs from. */
     id: string;
     /** The input's accessible name and its words at rest. */
     placeholder: string;
-    /** The options `query` offers, best first; the add option, where there is one, last. */
-    options: (query: string) => AddOption[];
-    onChoose: (option: AddOption, query: string) => void;
+    /** Add an item titled `title`, never empty. */
+    onAdd: (title: string) => void;
 }
 declare const MatrixAdd: import("svelte").Component<Props, {
     focus: () => void;

package/dist/visual/MatrixField.svelte

@@ -10,8 +10,9 @@
 
  An open matrix's added items follow the roster in id order, as the plate prints them:
  held by being present, so each draws a fixed tick, its `title` as an input, a remove,
- and the same columns. The add box closes the list ({@link MatrixAdd}): it searches
- every checklist of the document before it offers to add what was typed.
+ and the same columns. The add box closes the list ({@link MatrixAdd}): what is typed
+ there is added under an id minted from it past every id the list holds, so a title the
+ list already carries is a second item.
 
  The control owns its label row, as an array does: the count of held items sits
  where an array's add chip sits, so {@link Field} skips its own label for it.
@@ -48,15 +49,7 @@
 		onRoster,
 		schemaAt
 	} from './structure.js';
-	import {
-		checklists,
-		matrixPrinted,
-		searchChecklists,
-		type AddOption,
-		type Checklist,
-		type ChecklistHit,
-		type Searchable
-	} from './checklists.js';
+	import { matrixPrinted } from './checklists.js';
 	import { splitDeep, unrouted, type DeepDiagnostic } from './diagnostics.js';
 	import type { LandingBox } from './leaves.js';
 	import { propertyDomIds } from './domid.js';
@@ -85,9 +78,6 @@
 		/** The field's control id: the base a member's tick and columns derive their own
 		 *  names from, one `-m-<member id>` segment down. */
 		idBase?: string;
-		/** The field's leaf key, where it is a card's own field: how the add box tells
-		 *  this list from the rest of the document's (`checklists.ts`). */
-		listKey?: string;
 		/** The boundary's nested content read, rooted at this field: a member's content
 		 *  column reads at `[id, column]` (`reader.getContentAt`). */
 		contentAt: (path: PathStep[]) => Content | undefined;
@@ -104,16 +94,11 @@
 		labelId,
 		descriptionId,
 		idBase,
-		listKey,
 		contentAt,
 		onCommit,
 		diagnostics
 	}: Props = $props();
 
-	// A card's own matrix searches the document's lists; one nested in a container is
-	// not indexed, and searches its own items alone.
-	const index = checklists();
-	const others = (): readonly Checklist[] => (listKey != null ? (index?.list() ?? []) : []);
 	const members = $derived(matrixMembers(schema.members));
 	const compact = $derived(!!schema.ui?.compact);
 	const hasColumns = $derived(Object.keys(schema.properties ?? {}).length > 0);
@@ -220,48 +205,6 @@
 	}
 
 	// ── The add box ────────────────────────────────────────────────────────────
-	/** A result's list: this one, or another of the document's. */
-	type Hit = ChecklistHit<Checklist | undefined>;
-	function options(query: string): AddOption[] {
-		const own: Searchable<Checklist | undefined> = { list: undefined, schema, value: map };
-		const lists: Searchable<Checklist | undefined>[] = others()
-			.filter((l) => l.key !== listKey)
-			.map((l) => ({ list: l, schema: l.schema, value: l.value }));
-		const hits = searchChecklists(query, [own, ...lists]);
-		const out: AddOption[] = hits.map((h, k) => ({
-			key: `hit-${k}`,
-			title: h.title,
-			note:
-				[
-					h.list ? t.strings.matrixIn(h.list.label) : undefined,
-					h.held ? t.strings.matrixHeldTag : undefined
-				]
-					.filter(Boolean)
-					.join(' · ') || undefined,
-			strong: h.strong,
-			payload: h
-		}));
-		// Offered last, and not where an item of this list already carries the words.
-		const fold = (s: string) => s.trim().toLowerCase();
-		const dup = hits.some((h) => h.list === undefined && fold(h.title) === fold(query));
-		if (!dup) out.push({ key: 'add', title: t.strings.matrixAddNew(query), add: true });
-		return out;
-	}
-	async function choose(option: AddOption, query: string): Promise<void> {
-		if (option.add) return add(query);
-		const hit = option.payload as Hit;
-		const other = hit.list;
-		if (other) {
-			if (!hit.held) other.commit(commitMember(other.value, hit.id, memberWrite({})));
-			index?.land(`${other.path}.${hit.id}`);
-			return;
-		}
-		if (!hit.held) commit(commitMember(map, hit.id, ticked(hit.id)));
-		await flush();
-		focusPath([hit.id]);
-		const box = ref(memberEls, hit.id);
-		if (box) bloomInside(box);
-	}
 	async function add(title: string): Promise<void> {
 		const taken = (id: string) => onRoster(schema, id) || (map != null && Object.hasOwn(map, id));
 		const id = addedId(title, taken);
@@ -397,8 +340,7 @@
 			bind:this={addEl}
 			id={`${base}-add`}
 			placeholder={t.strings.matrixAdd(label ?? '')}
-			{options}
-			onChoose={choose}
+			onAdd={add}
 		/>
 	{/if}
 	<DiagnosticList diagnostics={foot} />

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

@@ -18,9 +18,6 @@ interface Props {
     /** The field's control id: the base a member's tick and columns derive their own
      *  names from, one `-m-<member id>` segment down. */
     idBase?: string;
-    /** The field's leaf key, where it is a card's own field: how the add box tells
-     *  this list from the rest of the document's (`checklists.ts`). */
-    listKey?: string;
     /** The boundary's nested content read, rooted at this field: a member's content
      *  column reads at `[id, column]` (`reader.getContentAt`). */
     contentAt: (path: PathStep[]) => Content | undefined;

package/dist/visual/ObjectField.svelte

@@ -81,8 +81,10 @@
 		/**
 		 * The parent control's DOM id: the base each property's own three names derive
 		 * from ({@link propertyDomIds}). Absent — a subform mounted with no field around
-		 * it, or a table's row — the properties fall back to `aria-label`, which names
-		 * them without a `for` target to click.
+		 * it — the properties fall back to `aria-label`, which names them without a
+		 * `for` target to click. A table's row takes the table's own and names its
+		 * cells the same fallback way, reading only the description off it: the
+		 * header parks one per column, which every row's cell in it points at.
 		 */
 		idBase?: string;
 		/** Accessible-name prefix used only on the `aria-label` fallback above. */
@@ -268,7 +270,8 @@
 			{@const kind = controlKind(sub)}
 			{@const ids = idBase && !bare ? propertyDomIds(idBase, key) : undefined}
 			{@const named = ids ? undefined : fallbackName(key, sub)}
-			{@const describes = sub.description && ids ? ids.description : undefined}
+			{@const describes =
+				sub.description && idBase ? propertyDomIds(idBase, key).description : undefined}
 			{@const deep = routed.below.get(key)}
 			{@const own = isContainer(kind) ? undefined : deep?.map((d) => d.diagnostic)}
 			<!-- `for` reaches the labelable controls, a variant through its discriminant; the
@@ -359,6 +362,7 @@
 					<ProseValue
 						bind:this={proseEls[key]}
 						content={() => contentAt([key])}
+						value={obj[key]}
 						fallback={contentDefault(sub)}
 						plaintext={baseType(sub) === 'plaintext'}
 						placeholder={noneOf(key, sub)}

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

@@ -14,8 +14,10 @@ interface Props {
     /**
      * The parent control's DOM id: the base each property's own three names derive
      * from ({@link propertyDomIds}). Absent — a subform mounted with no field around
-     * it, or a table's row — the properties fall back to `aria-label`, which names
-     * them without a `for` target to click.
+     * it — the properties fall back to `aria-label`, which names them without a
+     * `for` target to click. A table's row takes the table's own and names its
+     * cells the same fallback way, reading only the description off it: the
+     * header parks one per column, which every row's cell in it points at.
      */
     idBase?: string;
     /** Accessible-name prefix used only on the `aria-label` fallback above. */

package/dist/visual/ProseField.svelte

@@ -123,6 +123,7 @@
 				placeholder,
 				placeholderUntilEdit,
 				tableStrings: () => t.strings,
+				slashStrings: () => t.strings,
 				onSlash: (next) => {
 					slash = next;
 				},
@@ -155,7 +156,7 @@
 		controller?.setFallback(fallback);
 	});
 
-	// Only a narrowed or a plain leaf can hold, so only one of them asks.
+	// Only a narrowed or a plain leaf holds by what a re-validation says, so only one of them asks.
 	$effect(() => {
 		void diagnostics;
 		if (inline || plaintext) controller?.applyExternal();

package/dist/visual/ProseValue.svelte

@@ -11,24 +11,35 @@
  Mounts once per stable key (an element's session id, a property's name), so the
  parent's re-derive leaves the caret where it is.
 
+ Having no address, it registers no controller: it announces its views into the
+ registry's by-value lane under the field it stands in (`leaves.ts`), the formatting
+ popover's door to it. A focus on an editable leaf announces them, and so does a write
+ releasing the leaf under the caret; a hold and an unmount withdraw them, and a blur
+ does not, the popover's link prompt taking the focus from the view it writes to.
+
  The content is read, not passed: `reader.getContentAt(addr, path)` decodes through
  the codec the leaf's own declared type names, so what it rests as — the content
  object, a `plaintext` literal, the authored string a transport door left — stops
- being the row's or the cell's business. Read once, at mount, since that is when this
- leaf takes its state.
+ being the row's or the cell's business. It is read at mount and again wherever the
+ parent's re-derive hands down a `value` that moved, and a read differing from the
+ content the leaf last committed or took replaces the view, the gate `createField`
+ re-hydrates through (`reconcile.ts`): a write that lands in the store under a mounted
+ leaf is what its next keystroke edits. Its own commit is read back as the store took
+ it, so the echo replaces nothing and the caret and the history stay.
 
  The schema is the declared type's where the parent has room for it: a subform cell
  declaring no `inline` takes the full row ({@link ObjectField}), a `richtext` one on the
  block schema and a `plaintext` one on the plain schema, paragraphs and hard breaks.
  An array element is one textblock whatever it declares, since Enter there is the
- repeater's. There is no slash menu at either width, and an island draws as its
- placeholder: an atom a keystroke can delete and no view edits.
+ repeater's. There is no slash menu at either width, and no island view.
 
- A leaf over content its schema cannot hold is held: a narrowed one over anything but
- one plain paragraph (`fitsInline`), a plain one over anything but plain lines
- (`fitsPlain`). Its decode would join or drop what is left over, and the first
- keystroke would write that loss back, so a held leaf draws its content on the block
- schema, read-only, with a note inside its box, and commits nothing.
+ A leaf over content it cannot edit is held (`fitsLeaf`): a narrowed one over anything
+ but one plain paragraph, a plain one over anything but plain lines, where the decode
+ would join or drop what is left over for the first keystroke to write back, and a block
+ one over an island, which draws as its placeholder tag, an atom a keystroke deletes
+ unseen. A held leaf draws its content on the block schema, read-only, with a note
+ inside its box, and commits nothing. The hold is judged of what each mount and each
+ replacement reads, so a write moving the value takes it or releases it.
 -->
 <script lang="ts">
 	import { untrack } from 'svelte';
@@ -36,6 +47,7 @@
 	import { EditorView } from 'prosemirror-view';
 	import {
 		blockSchema,
+		createReconciler,
 		decode,
 		emptyContent,
 		fitsLeaf,
@@ -45,18 +57,26 @@
 		proseAttributes,
 		proseLeafPlugins,
 		buildLineIndex,
-		usvToPM
+		pmToUsv,
+		usvToPM,
+		valueEqual,
+		type LeafViews
 	} from '../core/codec/index.js';
+	import { valueLeafSeat } from './leaves.js';
 	import { wording } from './strings.js';
 	import './controls.css';
 	import type { Content } from '@quillmark/wasm';
 
 	interface Props {
-		/** This leaf's content, read at mount (the parent's boundary read), `undefined`
-		 * where nothing is stored. A thunk rather than a value: the parent re-derives
-		 * per revision and this leaf takes its state once, so a value prop would be a
-		 * boundary read per leaf per render, all but one of them discarded. */
+		/** This leaf's content (the parent's boundary read), `undefined` where nothing is
+		 * stored: read at mount and wherever {@link value} moves. A thunk rather than a
+		 * value: the parent re-derives per revision, and a value prop would be a
+		 * boundary read per leaf per render, all but the moved one discarded. */
 		content: () => Content | undefined;
+		/** This leaf's value as the parent's re-derive delivers it, stored form and all:
+		 * compared with the last one delivered, never drawn, so a move is what re-reads
+		 * {@link content}. */
+		value?: unknown;
 		/** The default an unset leaf holds, where it prints: drawn at the default rung,
 		 * and handed up whole with the first edit in it, as `createField` takes one. */
 		fallback?: Content;
@@ -87,6 +107,7 @@
 	}
 	let {
 		content,
+		value,
 		fallback,
 		plaintext = false,
 		block = false,
@@ -99,10 +120,13 @@
 	}: Props = $props();
 
 	const t = wording();
+	const seat = valueLeafSeat();
 	const uid = $props.id();
 	const heldId = `${uid}-held`;
 	let held = $state(false);
 	let view: EditorView | undefined;
+	/** What the mounted view does with a value the parent's re-derive delivers. */
+	let follow: ((next: unknown) => void) | undefined;
 	/** Take the caret: what a parent placing focus on this leaf calls. The view's
 	 * focus, not the element's: a PM view restores its selection, where a bare DOM
 	 * focus on a contenteditable leaves the caret unplaced. And the reveal beside it,
@@ -135,46 +159,61 @@
 
 	function mountView(mount: HTMLDivElement): () => void {
 		return untrack(() => {
-			// The same keymap and plugin stack a `createField` leaf mounts (shared
-			// `proseLeafPlugins`), minus the anchor-position plugin: anchors are dropped on
-			// the parent's value write, per the header.
 			const inline = !block;
+			const leaf = { inline, plaintext, islands: false };
+			const names = { label, labelledBy, describedBy };
+			const shown = (stored: Content | undefined): Content => stored ?? fallback ?? emptyContent();
 			const stored = content();
-			const rt = stored ?? fallback ?? emptyContent();
+			let seen = value;
 			let defaulted = stored === undefined && !!fallback;
-			held = !fitsLeaf(rt, { inline, plaintext });
-			const named = held
-				? heldAttributes({ label, labelledBy, describedBy }, heldId)
-				: (proseAttributes({ label, labelledBy, describedBy }) ?? {});
-			const defaultNamed = { ...named, 'data-default': '' };
-			const schema = held ? blockSchema : leafSchema({ plaintext, inline });
-			const state = EditorState.create({
-				doc: decode(rt, schema),
-				plugins: held
-					? []
-					: proseLeafPlugins(schema, {
-							inline,
-							placeholder: () => placeholder,
-							placeholderUntilEdit: true
-						})
-			});
+			const reconciler = createReconciler(shown(stored));
+			held = !fitsLeaf(reconciler.last, leaf);
+			// Which of `aria-label` / `aria-labelledby` wins is the codec's one answer
+			// (`proseAttributes`), so a cell carrying a label element and a row carrying
+			// none cannot name their regions by different rules.
+			const plainNamed = proseAttributes(names) ?? {};
+			const heldNamed = heldAttributes(names, heldId);
+			const build = (rt: Content): EditorState => {
+				// The same keymap and plugin stack a `createField` leaf mounts (shared
+				// `proseLeafPlugins`), minus the anchor-position plugin: anchors are dropped on
+				// the parent's value write, per the header.
+				const schema = held ? blockSchema : leafSchema({ plaintext, inline });
+				return EditorState.create({
+					doc: decode(rt, schema),
+					plugins: held
+						? []
+						: proseLeafPlugins(schema, {
+								inline,
+								placeholder: () => placeholder,
+								placeholderUntilEdit: true
+							})
+				});
+			};
 			const mounted = new EditorView(
 				{ mount },
 				{
-					state,
+					state: build(reconciler.last),
 					editable: () => !held,
-					// Which of `aria-label` / `aria-labelledby` wins is the codec's one answer
-					// (`proseAttributes`), so a cell carrying a label element and a row carrying
-					// none cannot name their regions by different rules.
-					attributes: () => (defaulted ? defaultNamed : named),
+					attributes: () => {
+						const named = held ? heldNamed : plainNamed;
+						return defaulted ? { ...named, 'data-default': '' } : named;
+					},
 					dispatchTransaction(tr) {
 						const next = mounted.state.apply(tr);
 						const edit = tr.docChanged && !held;
 						if (edit) defaulted = false;
 						mounted.updateState(next);
-						if (edit) onChange(pmToContent(next.doc));
+						if (!edit) return;
+						onChange(pmToContent(next.doc));
+						// The commit as the store took it, so its echo through the re-derive is no move.
+						seen = value;
+						reconciler.commit(shown(content()));
 					},
 					handleDOMEvents: {
+						focus: () => {
+							if (!held) seat?.focus(views);
+							return false;
+						},
 						keydown: (_v, e) => {
 							onKey?.(e);
 							return false;
@@ -182,13 +221,47 @@
 					}
 				}
 			);
+			const views: LeafViews = {
+				view: mounted,
+				focusedView: () => mounted,
+				nestedViews: () => []
+			};
 			view = mounted;
+			follow = (next) => {
+				if (valueEqual(next, seen)) return;
+				seen = next;
+				const read = content();
+				const current = shown(read);
+				const holds = !fitsLeaf(current, leaf);
+				const wasDefaulted = defaulted;
+				defaulted = read === undefined && !!fallback;
+				if (holds === held && !reconciler.shouldRehydrate(current)) {
+					if (defaulted !== wasDefaulted) mounted.setProps({});
+					return;
+				}
+				held = holds;
+				if (held) seat?.release(views);
+				else if (mounted.hasFocus()) seat?.focus(views);
+				// The caret keeps its offset, clamped, as a field's re-hydrate keeps it.
+				const caret = pmToUsv(buildLineIndex(mounted.state.doc), mounted.state.selection.head);
+				const fresh = build(current);
+				const sel = Selection.near(fresh.doc.resolve(usvToPM(buildLineIndex(fresh.doc), caret)));
+				mounted.updateState(fresh.apply(fresh.tr.setSelection(sel)));
+				reconciler.commit(current);
+			};
 			return () => {
+				seat?.release(views);
+				follow = undefined;
 				view = undefined;
 				mounted.destroy();
 			};
 		});
 	}
+
+	$effect(() => {
+		const next = value;
+		untrack(() => follow?.(next));
+	});
 </script>
 
 <!-- `.qm-control-box` (controls.css) is the whole box, so an array of `richtext` and