@quillmark/svelte 0.10.1 → 0.12.0

package/dist/visual/VariantField.svelte

@@ -10,12 +10,16 @@
  container with one cell written — and cells outside the drawn world ride through
  untouched rather than needing to be merged back. A content cell reads at the key it
  declares: the boundary's schema walk unions the worlds, so a dormant cell reads absent
- rather than raising.
+ rather than raising. A cell may be a container of its own, which the subform draws at
+ the next rung.
 -->
 <script lang="ts">
 	import type { Content, PathStep, QuillFieldSchema } from '@quillmark/wasm';
 	import EnumField from './EnumField.svelte';
 	import ObjectField from './ObjectField.svelte';
+	import DiagnosticList from './DiagnosticList.svelte';
+	import type { DeepDiagnostic } from './diagnostics.js';
+	import type { LandingBox } from './leaves.js';
 	import {
 		VARIANT_DISCRIMINANT,
 		commitDiscriminant,
@@ -43,6 +47,10 @@
 		onCommit: (v: Record<string, unknown> | undefined) => void;
 		optionAllowed?: (value: string) => boolean;
 		enumDisallowed?: 'hide' | 'disable';
+		/** The diagnostics routed into this field, each with its steps still to walk: one
+		 * naming a live cell draws under it; the rest — the discriminant's, a dormant
+		 * world's — draw at the field's foot. */
+		diagnostics?: readonly DeepDiagnostic[];
 	}
 	let {
 		value,
@@ -55,12 +63,52 @@
 		contentAt,
 		onCommit,
 		optionAllowed,
-		enumDisallowed
+		enumDisallowed,
+		diagnostics
 	}: Props = $props();
 
 	const member = $derived(variantMember(value, ghostMember));
 	const cells = $derived(variantCells(schema, member));
 	const discriminant = $derived(value?.[VARIANT_DISCRIMINANT] as string | undefined);
+
+	type Subform = {
+		focus: () => void;
+		focusPath: (steps: readonly PathStep[], pos?: number) => LandingBox;
+	};
+	let cellsEl = $state<Subform | undefined>();
+
+	/** Whether a step names a cell the live world draws. The one test the landing and
+	 *  the diagnostics both read, so the cell a caret lands in is the cell a message
+	 *  draws under. The discriminant is the field's own control and no world's cell. */
+	function live(step: PathStep | undefined): boolean {
+		return (
+			typeof step === 'string' &&
+			step !== VARIANT_DISCRIMINANT &&
+			!!cells &&
+			Object.hasOwn(cells, step)
+		);
+	}
+	// The cells' own, and the field's: a diagnostic naming the discriminant or a world
+	// that is not drawn has no cell to sit under, and the subform's foot is inside a box
+	// holding the live world alone. So it draws under the field, where the control it is
+	// about is.
+	const inside = $derived((diagnostics ?? []).filter((d) => live(d.steps[0])));
+	const foot = $derived(
+		(diagnostics ?? []).filter((d) => !live(d.steps[0])).map((d) => d.diagnostic)
+	);
+
+	/** Take the caret: the discriminant's trigger, the field's own control. */
+	export function focus(): void {
+		if (id) document.getElementById(id)?.focus();
+	}
+	/** Land at `steps`: a live cell, and the rest of the walk inside it where the cell is
+	 *  a container; the discriminant, a dormant world's cell and a key no world declares
+	 *  land on the trigger ({@link FieldControl.focusPath}). */
+	export function focusPath(steps: readonly PathStep[], pos?: number): LandingBox {
+		if (live(steps[0]) && cellsEl) return cellsEl.focusPath(steps, pos);
+		focus();
+		return undefined;
+	}
 </script>
 
 <div class="qm-variant">
@@ -81,6 +129,7 @@
 	{#if cells}
 		{#key member}
 			<ObjectField
+				bind:this={cellsEl}
 				value={value ?? {}}
 				properties={cells}
 				{label}
@@ -89,9 +138,13 @@
 				{describedBy}
 				{contentAt}
 				onCommit={(obj) => onCommit(obj)}
+				diagnostics={inside}
 			/>
 		{/key}
 	{/if}
+	<!-- The field's own foot, drawn whether or not a world is: what the live world
+	     cannot hold belongs under the field rather than inside the box its cells sit in. -->
+	<DiagnosticList diagnostics={foot} />
 </div>
 
 <style>

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

@@ -1,4 +1,6 @@
 import type { Content, PathStep, QuillFieldSchema } from '@quillmark/wasm';
+import type { DeepDiagnostic } from './diagnostics.js';
+import type { LandingBox } from './leaves.js';
 interface Props {
     /** The stored container, or undefined while the field is unset. */
     value: Record<string, unknown> | undefined;
@@ -19,7 +21,14 @@ interface Props {
     onCommit: (v: Record<string, unknown> | undefined) => void;
     optionAllowed?: (value: string) => boolean;
     enumDisallowed?: 'hide' | 'disable';
+    /** The diagnostics routed into this field, each with its steps still to walk: one
+     * naming a live cell draws under it; the rest — the discriminant's, a dormant
+     * world's — draw at the field's foot. */
+    diagnostics?: readonly DeepDiagnostic[];
 }
-declare const VariantField: import("svelte").Component<Props, {}, "">;
+declare const VariantField: import("svelte").Component<Props, {
+    focus: () => void;
+    focusPath: (steps: readonly PathStep[], pos?: number) => LandingBox;
+}, "">;
 type VariantField = ReturnType<typeof VariantField>;
 export default VariantField;

package/dist/visual/VisualEditor.svelte

@@ -3,7 +3,7 @@
  `doc` prop remounts the editor under it, so a consumer holding one mount across
  two documents gets a surface that names the live handle.
 
- It is A `{#key}`, not A reseed. The state a swap invalidates is not one field:
+ It is a `{#key}`, not a reseed. The state a swap invalidates is not one field:
  composable cards key on session id, the main card is keyed on nothing, and each
  prose leaf mounts once per stable leaf key with `createField` closing over the
  `doc` it mounted against — so after an in-place swap the main card's leaves

package/dist/visual/VisualEditorInner.svelte

@@ -24,7 +24,7 @@
 	import {
 		addrForFieldPath,
 		cardPath,
-		elementAddrForFieldPath,
+		nestedAddrForFieldPath,
 		fieldPathForAddr,
 		type DocPath,
 		type Landing
@@ -32,7 +32,16 @@
 	import { errorMessage, reportError } from '../core/errors.js';
 	import { bloomInside } from '../core/bloom.js';
 	import { createLifespan } from '../core/teardown.js';
-	import type { Addr, CardAddr, Diagnostic, Resolved, ResolvedField } from '@quillmark/wasm';
+	import type {
+		Addr,
+		CardAddr,
+		Diagnostic,
+		PathStep,
+		PayloadItem,
+		QuillFieldSchema,
+		Resolved,
+		ResolvedField
+	} from '@quillmark/wasm';
 	import type { VisualEditorProps } from './props.js';
 	import { mergeStrings, setWording } from './strings.js';
 	import type { CardId, ChangeSource } from './signals.js';
@@ -40,11 +49,15 @@
 	import {
 		IdSeq,
 		controlKind,
+		isContainer,
+		schemaAt,
 		fieldModels,
 		groupOrder,
 		groupSections,
 		groupLabel,
 		cardTitle,
+		titleFields,
+		fieldValues,
 		bodyEnabled,
 		humanize,
 		provenanceMap,
@@ -66,7 +79,7 @@
 	} from './diagnostics.js';
 	import { fieldDomIds, groupPanelId } from './domid.js';
 	import { createLeafRegistry, type FieldControl } from './leaves.js';
-	import { reorder, reorderTrips } from './motion.js';
+	import { reorder, reorderArm, reorderTrips } from './motion.js';
 	import { tipsChannel } from './tips.js';
 	import { patchEditorExt } from './ext.js';
 	import Card from './Card.svelte';
@@ -144,6 +157,7 @@
 	 */
 	function bump(source: ChangeSource, cardId?: CardId, at?: Addr | number): void {
 		revision++;
+		liveTitles = {};
 		const path =
 			at == null ? undefined : typeof at === 'number' ? cardPath(at, liveKinds()) : pathFor(at);
 		onChange?.({ source, cardId, path });
@@ -154,8 +168,11 @@
 		return cardIds.indexOf(id);
 	}
 	/** The inverse, for the two signals that arrive as an address and nothing else (a
-	 * focus, a prose commit), off the same array the mutation boundary reads. */
-	function cardIdOf(addr: Addr): CardId {
+	 * focus, a prose commit), off the same array the mutation boundary reads.
+	 * `undefined` for an address outside the live card array, as {@link pathFor}: the
+	 * key is a host's only handle on a card, so a stale one is dropped rather than
+	 * reported. */
+	function cardIdOf(addr: Addr): CardId | undefined {
 		return addr.card == null ? 'main' : cardIds[addr.card];
 	}
 
@@ -214,7 +231,9 @@
 		lastCaretField = undefined;
 		lastCaretPos = undefined;
 		const field = pathFor(plain);
-		if (field != null) onActiveLeafChange?.({ field, cardId: activeCardId });
+		// Both halves or neither: a stale addr names no path and no live card.
+		if (field != null && activeCardId != null)
+			onActiveLeafChange?.({ field, cardId: activeCardId });
 	}
 	/** No card kinds are read for a main address; the shared empty stands in so the
 	 *  common case allocates nothing. */
@@ -261,7 +280,35 @@
 	 *  bump `revision` (see {@link bump}). */
 	function proseChanged(addr: Addr): void {
 		const plain = normalize(addr);
-		onChange?.({ source: 'prose', cardId: cardIdOf(plain), path: pathFor(plain) });
+		const cardId = cardIdOf(plain);
+		if (cardId == null) return;
+		refreshTitle(plain, cardId);
+		onChange?.({ source: 'prose', cardId, path: pathFor(plain) });
+	}
+
+	/** A card's header after a prose commit to a field its `{field}` title names: the
+	 *  one piece of the model that lane changes, held beside the model and dropped on
+	 *  the next bump, which rebuilds it from the document. The kind is the derived
+	 *  tree's ({@link liveKinds}), so the document is read only for a title that
+	 *  names the field. */
+	let liveTitles = $state<Record<CardId, string>>({});
+	function refreshTitle(addr: Addr, cardId: CardId): void {
+		const { card: at, field } = addr;
+		if (field == null) return;
+		const shown = at == null ? model.main : model.cards[at];
+		if (!shown) return;
+		const cardSchema = at == null ? quill.schema.main : quill.schema.card_kinds?.[shown.kind];
+		if (!titleFields(cardSchema?.ui?.title).includes(field)) return;
+		const live = at == null ? doc.main : doc.cards[at];
+		if (!live) return;
+		liveTitles = {
+			...liveTitles,
+			[cardId]: cardTitle(cardSchema, shown.kind, fieldValues(live.payloadItems), undefined)
+		};
+	}
+	function titled(c: CardModel): CardModel {
+		const t = liveTitles[c.id];
+		return t == null ? c : { ...c, titlePlaceholder: t };
 	}
 
 	// ── Commit routing ──────────────────────────────────────────────────────────
@@ -381,26 +428,17 @@
 			return undefined;
 		}
 	}
-	// The reorder gesture's arming window: the reconcile that moves a
-	// slot is the trip, and every other reconcile that happens to move one is not. Read
-	// through a getter rather than passed as a value, so the flag stays out of the
-	// template and needs no reactivity for it: `animate:` asks at apply time, which is a
-	// microtask after the mutation and well inside the frame that disarms it.
-	let reordering = false;
-	let reorderFrame = 0;
-	function armReorder(): void {
-		reordering = true;
-		reorderFrame = requestAnimationFrame(() => (reordering = false));
-	}
-	span.onEnd(() => cancelAnimationFrame(reorderFrame));
-	const isReordering = (): boolean => reordering;
+	// The reorder gesture's arming window (`motion.ts`): the reconcile that moves a slot
+	// is the trip, and every other reconcile that happens to move one is not.
+	const arm = reorderArm();
+	span.onEnd(arm.cancel);
 
 	function moveCardById(id: string, dir: -1 | 1): void {
 		const from = cardIndexOf(id);
 		if (from < 0) return;
 		const to = from + dir;
 		if (to < 0 || to >= doc.cardCount) return;
-		armReorder();
+		arm.arm();
 		doc.moveCard(from, to);
 		const w = cardIds.slice();
 		const [x] = w.splice(from, 1);
@@ -423,10 +461,11 @@
 		// Ids are never reused, so an entry keyed to the gone card is unreachable rather
 		// than mis-attributed to whichever card takes this position: it needs dropping
 		// because nothing else will ever clear it.
-		if ([...commitErrors.keys()].some((k) => k.startsWith(`${id}:`)))
-			editCommitErrors((m) => {
-				for (const k of [...m.keys()]) if (k.startsWith(`${id}:`)) m.delete(k);
-			});
+		const prefix = `${id}:`;
+		const stale = [...commitErrors.keys()].filter((k) => k.startsWith(prefix));
+		// Guarded: `editCommitErrors` clones the map, and a removal matching nothing has
+		// nothing to re-derive.
+		if (stale.length) editCommitErrors((m) => stale.forEach((k) => m.delete(k)));
 		// No addr: the removed card has none left and every survivor's shifted. The
 		// stack changed, not a leaf, and the id is the only handle the removal leaves.
 		bump('structure', id);
@@ -435,7 +474,12 @@
 		const i = cardIndexOf(id);
 		if (i < 0) return;
 		try {
-			doc.setCardKind(i, kind);
+			// Insert the retyped card ahead of the original and drop the original after.
+			// `insertCard` validates the whole card before it mutates and `removeCard`
+			// cannot throw, so a refusal leaves the document as it was; the reverse order
+			// would leave it a card short.
+			doc.insertCard({ ...doc.card(i), kind }, i);
+			doc.removeCard(i + 1);
 			bump('structure', id, i);
 		} catch (e) {
 			reportError(onError, {
@@ -536,15 +580,13 @@
 		isMain: boolean,
 		kind: string,
 		card: {
-			payloadItems: { type: string; key?: string; value?: unknown }[];
+			payloadItems: readonly PayloadItem[];
 			ext?: Record<string, unknown>;
 		},
 		cardSchema: Parameters<typeof fieldModels>[0] | undefined,
 		rows: ResolvedCardRows
 	): CardModel {
-		const values: Record<string, unknown> = {};
-		for (const p of card.payloadItems)
-			if (p.type === 'field' && p.key != null) values[p.key] = p.value;
+		const values = fieldValues(card.payloadItems);
 		const fields = cardSchema ? fieldModels(cardSchema) : [];
 		const sections = cardSchema
 			? groupSections(fields, groupOrder(cardSchema), (g) => groupLabel(cardSchema, g))
@@ -588,12 +630,12 @@
 		// chrome, so a resolve failure degrades to no ghosts, never a blank form.
 		let resolved: Resolved | undefined;
 		try {
-			resolved = quill.resolve(doc);
+			resolved = quill.reader(doc).resolve();
 		} catch (e) {
 			reportError(onError, {
 				code: 'resolve-failed',
 				severity: 'error',
-				message: `quill.resolve threw; ghosted defaults fall back to none: ${errorMessage(e)}`,
+				message: `reader.resolve threw; ghosted defaults fall back to none: ${errorMessage(e)}`,
 				cause: e
 			});
 		}
@@ -644,7 +686,8 @@
 		// click is one discrete act, and its commonest target is the leaf already focused
 		// (where landing a caret changes nothing on screen) or one off-screen, where the
 		// browser's focus-scroll moves the page and leaves the caret to be hunted for.
-		bloomInside(land(found, at.granularity === 'segment' ? undefined : at.pos));
+		const box = await land(found, at.granularity === 'segment' ? undefined : at.pos);
+		if (span.alive) bloomInside(box);
 	}
 	/** The active leaf's controller: the formatting popover's observation seam.
 	 *  `undefined` for a focused form control, which holds no marks to toggle. */
@@ -683,20 +726,22 @@
 
 	/**
 	 * Put the caret in a revealed target, at the finest grain it can take: a USV offset
-	 * in a prose leaf or an array element, a bare focus everywhere else. A form control
-	 * has no coordinate to spend an offset in (an `<input type="number">` refuses a
-	 * selection outright), which is also the whole of what a click on plate-placed ink
-	 * can mean. An element is no `createField` leaf, so the offset goes down the element
-	 * lane instead, where what it means is the row control's (`leaves.ts`).
+	 * in a prose leaf or a nested content cell, a bare focus everywhere else. A form
+	 * control has no coordinate to spend an offset in (an `<input type="number">`
+	 * refuses a selection outright), which is also the whole of what a click on
+	 * plate-placed ink can mean. A cell is no `createField` leaf, so the offset goes
+	 * down the container's walk instead, where what it means is the leaf's (`leaves.ts`).
 	 *
 	 * Hands back the box the arrival wash blooms in, which is the landing's own
-	 * granularity rather than the registry's: an element lands in one row and says so
-	 * over that row, and everything else — the field, and a row the document has since
-	 * dropped — over the field's box.
+	 * granularity rather than the registry's: a walk lands in one row and says so over
+	 * the innermost row it opened, and everything else — the field, a property under a
+	 * field-level subform, and a row the document has since dropped — over the field's
+	 * box. Async because a row two closed boxes down exists only once the row above it
+	 * has opened and flushed.
 	 */
-	function land(found: Landed, pos: number | undefined): HTMLElement {
-		if (found.element != null && found.control.focusElement) {
-			return found.control.focusElement(found.element, pos) ?? found.control.el;
+	async function land(found: Landed, pos: number | undefined): Promise<HTMLElement> {
+		if (found.steps && found.control.focusPath) {
+			return (await found.control.focusPath(found.steps, pos)) ?? found.control.el;
 		}
 		if (pos != null) {
 			const prose = leaves.prose(found.key);
@@ -725,7 +770,8 @@
 	export async function focusField(field: DocPath): Promise<void> {
 		const found = await revealLeaf(field);
 		if (!found) return missed(`no mounted field at ${field}`, field);
-		bloomInside(land(found, undefined));
+		const box = await land(found, undefined);
+		if (span.alive) bloomInside(box);
 	}
 	/** Seed a card of `kind` and insert it at `at` (default: the end). Returns the new
 	 *  card's session key, or `undefined` when the quill seeds no card of that kind. */
@@ -755,11 +801,11 @@
 		reportError(onError, { code: 'target-unknown', severity: 'dev', message, path });
 	}
 
-	/** What a `DocPath` resolves to in the mounted tree: a leaf key, and the array
-	 *  element within it when the address names one. */
+	/** What a `DocPath` resolves to in the mounted tree: a leaf key, and the steps from
+	 *  that field to the leaf when the address names one inside it. */
 	interface LeafTarget {
 		key: string;
-		element?: number;
+		steps?: PathStep[];
 	}
 	/** A resolved target with the handle the registry holds for it. */
 	type Landed = LeafTarget & { control: FieldControl };
@@ -769,11 +815,13 @@
 	 * diagnostics take.
 	 *
 	 * Two rungs, because the boundary mints addresses at a finer granularity than
-	 * `Addr` can name: a `richtext[]` element surfaces as `main.keywords[0]`. The
-	 * second rung reads that trailing index segment under a field the schema declares
-	 * an array — which is why the ladder is the editor's (VISUAL_EDITOR.md §Surface):
-	 * the preview carries no schema, and truncating the address there is worse than
-	 * guessing, since `pos` is an offset into the element's own content.
+	 * `Addr` can name: a `richtext[]` element surfaces as `main.keywords[0]`, a nested
+	 * row's cell as `main.vectors[0].tours[2].title`. The second rung reads the steps
+	 * past the field against the schema, rung by rung — an index under a declared
+	 * array, a key under a declared object, variant or matrix — which is why the ladder
+	 * is the editor's (VISUAL_EDITOR.md §Surface): the preview carries no schema, and
+	 * truncating the address there is worse than guessing, since `pos` is an offset
+	 * into the leaf's own content.
 	 */
 	function leafTargetFor(field: DocPath): LeafTarget | undefined {
 		const direct = addrForFieldPath(field);
@@ -781,22 +829,25 @@
 			const resolved = resolveCardKey(direct, cardIds);
 			return resolved ? { key: fieldKeyToString(resolved) } : undefined;
 		}
-		const element = elementAddrForFieldPath(field);
-		if (!element || !isArrayField(element.field)) return undefined;
-		const resolved = resolveCardKey(element.field, cardIds);
-		return resolved ? { key: fieldKeyToString(resolved), element: element.index } : undefined;
+		const nested = nestedAddrForFieldPath(field);
+		if (!nested) return undefined;
+		const declared = declaredField(nested.field);
+		if (!declared || !isContainer(controlKind(declared))) return undefined;
+		if (!schemaAt(declared, nested.steps)) return undefined;
+		const resolved = resolveCardKey(nested.field, cardIds);
+		return resolved ? { key: fieldKeyToString(resolved), steps: nested.steps } : undefined;
 	}
 
-	/** The guard the element rung stands on. Asked of `controlKind`, so what the ladder
-	 *  tests is the control the tree mounted — the one holding a `focusElement` — and
-	 *  not a second reading of the schema beside it. */
-	function isArrayField(addr: Addr): boolean {
-		if (addr.field == null) return false;
+	/** The schema the field at `addr` declares, off the live card's kind: the guard the
+	 *  nested rung stands on. Asked of `controlKind` and `schemaAt`, so what the ladder
+	 *  tests is the control the tree mounted — the one holding a `focusPath` — and not a
+	 *  second reading of the schema beside it. */
+	function declaredField(addr: Addr): QuillFieldSchema | undefined {
+		if (addr.field == null) return undefined;
 		const kind = addr.card == null ? undefined : model.cards[addr.card]?.kind;
 		const schema = quill.schema;
 		const card = addr.card == null ? schema.main : kind ? schema.card_kinds?.[kind] : undefined;
-		const declared = card?.fields?.[addr.field];
-		return !!declared && controlKind(declared) === 'array';
+		return card?.fields?.[addr.field];
 	}
 </script>
 
@@ -807,7 +858,7 @@
 	<div class="qm-primary">
 		<Card
 			bind:this={mainCard}
-			card={model.main}
+			card={titled(model.main)}
 			{doc}
 			{quill}
 			isFirst={true}
@@ -836,10 +887,10 @@
 	 rather than being slid across. It is also the shape `animate:` asks for, being the
 	 keyed block's only child. -->
 	{#each model.cards as c, i (c.id)}
-		<div class="qm-card-slot" bind:this={slotEls[i]} animate:reorder={isReordering}>
+		<div class="qm-card-slot" bind:this={slotEls[i]} animate:reorder={arm.armed}>
 			<Card
 				bind:this={cardRefs[i]}
-				card={c}
+				card={titled(c)}
 				{doc}
 				{quill}
 				isFirst={i === 0}

package/dist/visual/controls.css

@@ -12,9 +12,9 @@
  Every selector here is `:where()`-wrapped, so a recipe computes at specificity zero.
  That is the point twice over: a consumer's stylesheet beats the chrome without
  `!important`, and a component's own scoped block overrides its shared base —
- `.qm-card-delete` recolours a `.qm-chip` under the pointer, `.qm-json` adds the monospace face over
- `.qm-input` — with no specificity fight. Unlayered with it, so a host's own layered
- reset never reaches these rules whatever order the sheets load in (`core/theme.css`). */
+ `.qm-card-delete` recolours a `.qm-chip` under the pointer — with no specificity
+ fight. Unlayered with it, so a host's own layered reset never reaches these rules
+ whatever order the sheets load in (`core/theme.css`). */
 
 /* The themed focus ring in place of the raw UA outline, as a
  rule rather than a pair of rungs each control assembles. `--_qm-ring`
@@ -63,11 +63,10 @@
 }
 
 /* A typed value's box (every scalar control and every prose leaf): the text and
- numeric inputs, the array's JSON textarea, the enum trigger, the date field, and
- the inline richtext leaves. One rule, because a
- leaf that agrees with the input beside it "by construction" has to draw the same
- declarations, not a copy of them: five hand-kept copies agree until one is
- edited, and nothing raises it (no literal is minted, so `check:style` stays
+ numeric inputs, the enum trigger, the date field, and the inline richtext leaves.
+ One rule, because a leaf that agrees with the input beside it "by construction" has
+ to draw the same declarations, not a copy of them: five hand-kept copies agree
+ until one is edited, and nothing raises it (no literal is minted, so `check:style` stays
  green while a control renders subtly the wrong height).
 
  Leading sits on the wide list rather than on the box's own, because a box's
@@ -91,7 +90,7 @@
 	color: var(--_qm-ink);
 	caret-color: currentColor;
 }
-/* The box is A fill and not an edge (ARCHITECTURE §Styling), and the fill is the
+/* The box is a fill and not an edge (ARCHITECTURE §Styling), and the fill is the
  well rung: a field is a hole cut into the card rather than a plane of its own,
  and with no edge to carry it the step is the whole of what says so. */
 :where(.qm-control-box),
@@ -256,6 +255,37 @@
 	transform: translate(-50%, -50%);
 }
 
+/* The capacity ladder: how many tracks a grid of fields steps to, off the width of
+ the query container it stands in. One recipe, because three grids read it — a section's
+ fields (`Card.svelte`), a subform's properties (`ObjectField`), each over its own
+ container, and a compact matrix's members (`MatrixField`) — and a ladder kept in
+ several files agrees until one is retuned. Capacity is
+ the container's, not JavaScript's: nothing measures, so there is no observer to loop
+ and no re-packing to restructure the DOM under a prose leaf.
+
+ It steps 1 → 2 → 4, skipping 3: each rung is the width at which a track still clears
+ the comfortable field minimum, and an even capacity is what lets the half a subform
+ of one takes (`--cols-half`) land on a track boundary. A field ends on its track's
+ own edge, so a rung is `n * 220px + gaps`. A subform three rungs in stands three
+ `--_qm-nest` and three verticals narrower than its section, and steps down where the
+ section does not: the count is the width the tracks actually get. */
+:where(.qm-tracks) {
+	--cols: 1;
+	--cols-half: 1;
+}
+@container (min-width: 28rem) {
+	:where(.qm-tracks) {
+		--cols: 2;
+		--cols-half: 1;
+	}
+}
+@container (min-width: 57rem) {
+	:where(.qm-tracks) {
+		--cols: 4;
+		--cols-half: 2;
+	}
+}
+
 /* A floating list of choices: the enum's listbox and the card stack's kind menu.
  Both portal into the nearest `[data-qm-root]`, and both are picked from, so the
  surface (its edge, its inset, its ink) and the item (its pad, its radius, the

package/dist/visual/diagnostics.d.ts

@@ -1,4 +1,4 @@
-import type { Diagnostic } from '@quillmark/wasm';
+import type { Diagnostic, PathStep } from '@quillmark/wasm';
 /** A field's routing address, and `/core`'s `Addr` structurally: an `Addr` is a
  * positional `FieldKey`, so `nearestAddrForFieldPath` is the path→key walk and
  * routing carries no second copy of the grammar. `card` is `undefined` for the main
@@ -40,10 +40,34 @@ export interface RoutedDiagnostic {
  * Completeness stays a read the host makes on `quill.validate(doc)`.
  */
 export declare function routeAndResolve(diagnostics: Diagnostic[] | undefined, cardIds: readonly string[]): RoutedDiagnostic[];
+/** A diagnostic with the steps still to walk from the control holding it. */
+export interface DeepDiagnostic {
+    steps: readonly PathStep[];
+    diagnostic: Diagnostic;
+}
+/** A field's routed diagnostics, each with its steps past the field: none for a
+ *  diagnostic anchored at the field itself, or one whose path is not a nested one
+ *  (a local commit error carries the field's own path). */
+export declare function deepen(diagnostics: Diagnostic[] | undefined): DeepDiagnostic[];
+/** One rung of the walk: the diagnostics anchored here, and the rest bucketed by the
+ *  step they take next, each with that step consumed. */
+export interface DeepSplit {
+    here: Diagnostic[];
+    below: Map<PathStep, DeepDiagnostic[]>;
+}
+export declare function splitDeep(list: readonly DeepDiagnostic[] | undefined): DeepSplit;
+/** The diagnostics a rung cannot hand down: the ones anchored here, plus every one
+ *  whose next step names nothing in `held`. Drawn at the rung's own foot, so a leaf the
+ *  tree does not draw still has its message read somewhere the user can see. */
+export declare function unrouted(split: DeepSplit, held: (step: PathStep) => boolean): Diagnostic[];
 /**
  * Merge N routed groups into `Map<fieldKeyToString(key), Diagnostic[]>`.
- * Dedupes an identical `(severity, message)` pair landing on the same key from
+ * Dedupes an identical `(path, severity, message)` quad landing on the same key from
  * more than one group (e.g. the same error present in both `validate()` and
  * an external feed). Producer order within a key.
+ *
+ * The key is the field, but the walk past it is the `path`'s ({@link deepen}), so two
+ * cells of one container share a key and differ only there: without `path` in the
+ * quad, one message failing two rows draws on the first row alone.
  */
 export declare function mergeDiagnostics(...groups: RoutedDiagnostic[][]): Map<string, Diagnostic[]>;