@quillmark/svelte 0.11.0 → 0.13.0

package/dist/visual/Field.svelte

@@ -1,8 +1,10 @@
 <!--
  Type dispatch (VISUAL_EDITOR §"Structure mirrors the schema"). Given one projected
  {@link FieldModel} and its live value, render the label + the control the type
- maps to. Array controls own their label (paired with the add affordance in
- {@link ArrayField}); other types render the label here. Prose leaves take a
+ maps to. Array and matrix controls own their label (paired with the add affordance in
+ {@link ArrayField}, with the held count in {@link MatrixField}); other types render
+ the label here. A container control also takes the walk a nested address makes into
+ it ({@link FieldControl.focusPath}) and the diagnostics anchored inside it. Prose leaves take a
  parent-built live `addr` (its `card` a getter over the stable-id→index map) so
  a reorder re-targets without a remount; scalars, arrays, and objects commit
  their value up through `onCommitScalar`, which the parent lowers to the typed
@@ -11,7 +13,8 @@
  `diagnostics` is the routed `Diagnostic[]` for this field (VisualEditor's
  `diagByKey`, merging `quill.validate`, local commit errors, and the external
  `diagnostics` prop (VISUAL_EDITOR §Diagnostics)) rendered via the shared
- `DiagnosticList`, non-gating.
+ `DiagnosticList`, non-gating; each set also re-evaluates a prose leaf's hold
+ (`ProseField`).
 -->
 <script lang="ts">
 	import type {
@@ -24,9 +27,22 @@
 		ResolvedField
 	} from '@quillmark/wasm';
 	import type { EditorErrorHandler } from '../core/errors.js';
-	import type { LeafRegistry } from './leaves.js';
+	import type { LandingBox, LeafRegistry } from './leaves.js';
 	import type { FieldModel, FieldSpan } from './structure.js';
-	import { VARIANT_DISCRIMINANT, ghostDefault, stringifyGhost } from './structure.js';
+	import {
+		VARIANT_DISCRIMINANT,
+		arrayLayout,
+		baseType,
+		exampleGhost,
+		ghostDefault,
+		isContainer,
+		optionalCell,
+		printedText,
+		stringifyGhost,
+		titleText
+	} from './structure.js';
+	import { wording } from './strings.js';
+	import { deepen } from './diagnostics.js';
 	import type { FieldDomIds } from './domid.js';
 	import ProseField from './ProseField.svelte';
 	import TextField from './TextField.svelte';
@@ -37,6 +53,7 @@
 	import ArrayField from './ArrayField.svelte';
 	import ObjectField from './ObjectField.svelte';
 	import VariantField from './VariantField.svelte';
+	import MatrixField from './MatrixField.svelte';
 	import DiagnosticList from './DiagnosticList.svelte';
 	import FieldLabel from './FieldLabel.svelte';
 
@@ -94,12 +111,29 @@
 		diagnostics
 	}: Props = $props();
 
-	// The ghost the control shows when unset: the resolved `default:` (provenance,
+	const t = wording();
+
+	// What an unset field shows of its `default:`: the resolved value (provenance,
 	// `source === 'default'`). `ghost` is the raw typed value (enum/number/boolean
-	// fallbacks); `defaultStr` its string form: the text placeholder and the date
-	// control's `YYYY-MM-DD`. An object-valued default does not ghost.
+	// fallbacks, a content leaf's `Content`), `defaultStr` its string form (the date
+	// control's `YYYY-MM-DD`); an object-valued default has none. An array draws its
+	// declared literal instead, which is what a take writes (`ArrayField`).
+	// A default that prints stands in the control as the value it is, at the default
+	// rung, and the first edit takes it (VISUAL_EDITOR §"The commitment ladder"). Where
+	// nothing prints, a control draws words: the `none` an optional cell prints, and
+	// a free-text field's `example:`.
 	const ghost = $derived(ghostDefault(provenance));
-	const defaultStr = $derived(stringifyGhost(ghost));
+	const defaultStr = $derived(
+		field.control === 'prose' ? titleText(ghost) || undefined : stringifyGhost(ghost)
+	);
+	const printed = $derived(printedText(defaultStr));
+	// A text or number control reads its default off the schema, not the resolved row:
+	// the row stops naming a default once the field is written, and emptying a written
+	// field still has to know that the default prints.
+	const declared = $derived(printedText(field.schema.default));
+	const optional = $derived(optionalCell(field.schema));
+	const none = $derived(optional && value == null ? t.strings.optionalGhost : undefined);
+	const example = $derived(value == null ? exampleGhost(field.schema) : undefined);
 	// A variant resolves as one rung whose value is the whole container, so the
 	// discriminant's ghost is that container's own discriminant cell.
 	const ghostMember = $derived(
@@ -123,6 +157,13 @@
 	// reference must vanish with it: `aria-describedby` pointing at nothing describes
 	// nothing, and silently.
 	const describedBy = $derived(field.description ? domIds.description : undefined);
+	// Two controls own their label row, the add chip and the held count sharing it.
+	const ownsLabel = $derived(field.control === 'array' || field.control === 'matrix');
+
+	// A container walks its diagnostics down to the cell each names and draws the rest
+	// at its own foot (`diagnostics.ts`); every other control draws them here, under
+	// itself, there being nothing inside it for a path to name.
+	const deep = $derived(deepen(diagnostics));
 
 	/** The boundary's nested content read with this field's address already bound: an
 	 * array's elements, an object's properties, a variant's cells, and a subform's cells
@@ -145,28 +186,29 @@
 	// restores a selection, a date field lands on its first segment, an array lands on
 	// its first element or on the add affordance that is all an empty one has, an
 	// object on its first property.
+	/** What a container control exports: its focus, and the walk into it. */
+	type Inside = {
+		focus: () => void;
+		focusPath: (steps: readonly PathStep[], pos?: number) => LandingBox;
+		washBox?: () => HTMLElement | undefined;
+	};
 	let proseEl = $state<{ focus: () => void } | undefined>();
 	let dateEl = $state<{ focus: () => void } | undefined>();
-	let arrayEl = $state<
-		| {
-				focus: () => void;
-				focusElement: (k: number, pos?: number) => HTMLElement | undefined;
-				washBox: () => HTMLElement | undefined;
-		  }
-		| undefined
-	>();
-	let objectEl = $state<{ focus: () => void } | undefined>();
+	let arrayEl = $state<Inside | undefined>();
+	let objectEl = $state<Inside | undefined>();
+	let variantEl = $state<Inside | undefined>();
+	let matrixEl = $state<Inside | undefined>();
+	const inside = (): Inside | undefined => arrayEl ?? objectEl ?? variantEl ?? matrixEl;
 	function focusControl(): void {
-		const owner = proseEl ?? dateEl ?? arrayEl ?? objectEl;
+		const owner = proseEl ?? dateEl ?? inside();
 		if (owner) return owner.focus();
 		document.getElementById(domIds.control)?.focus();
 	}
-	/** The array's per-ELEMENT landing, for the addresses the preview mints under an
-	 *  array field (`leaves.ts`); read at the call, so it tracks the mounted repeater.
-	 *  The row it settled in comes back with it, the wash being the landing's own
-	 *  granularity. */
-	function focusElement(k: number, pos?: number): HTMLElement | undefined {
-		return arrayEl?.focusElement(k, pos);
+	/** The landing at depth, for the addresses the boundary mints under a container
+	 *  (`leaves.ts`); read at the call, so it tracks the mounted control. The innermost
+	 *  row it settled in comes back with it, the wash being the landing's own granularity. */
+	function focusPath(steps: readonly PathStep[], pos?: number): LandingBox {
+		return inside()?.focusPath(steps, pos);
 	}
 	// Only where `for` cannot reach; the labelable four are the browser's own, and a
 	// second handler over them would be a focus the label already placed.
@@ -176,17 +218,17 @@
 	 * 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
 	 * label is outside it, and stays out of the wash: an arrival marks where the caret
-	 * landed, which is the control. The one control that owns its label is the array, so
-	 * that one names its own box (`ArrayField.washBox`), read at the bloom the way
-	 * `focusElement` is read at the call.
+	 * 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
+	 * (`washBox`) and the bloom reads that in the wrapper's place.
 	 *
 	 * A prose leaf is absent here — it registers its own controller from inside
 	 * `ProseField`, carrying the codec seam this handle has no half of — and reactive
 	 * rather than mount-once, because a retype can swap the control under a leaf key
 	 * that does not remount.
 	 *
-	 * An array carries the per-element lane as well; no other control has elements for
-	 * an address to name. `el` is the field-wide box, which an element landing does not
+	 * A container carries the walk into it as well; no other control has an inside for
+	 * an address to name. `el` is the field-wide box, which a landing at depth does not
 	 * wash: that lane hands back its own row (`leaves.ts`).
 	 */
 	let controlEl = $state<HTMLElement | undefined>();
@@ -197,9 +239,9 @@
 		const wrapper = controlEl;
 		registry.registerControl(key, {
 			focus: focusControl,
-			focusElement: field.control === 'array' ? focusElement : undefined,
+			focusPath: isContainer(field.control) ? focusPath : undefined,
 			get el() {
-				return arrayEl?.washBox() ?? wrapper;
+				return inside()?.washBox?.() ?? wrapper;
 			}
 		});
 		return () => registry.unregisterControl(key);
@@ -217,7 +259,7 @@
 </script>
 
 <div class="qm-field" class:cell={span === 'cell'}>
-	{#if field.control !== 'array'}
+	{#if !ownsLabel}
 		<FieldLabel
 			label={field.label}
 			controlId={labelable ? domIds.control : undefined}
@@ -242,7 +284,10 @@
 					{addr}
 					inline={field.inline}
 					plaintext={field.plaintext}
-					placeholder={defaultStr}
+					fallback={printed ? (ghost as Content) : undefined}
+					placeholder={none}
+					placeholderUntilEdit
+					{example}
 					labelledBy={domIds.label}
 					{describedBy}
 					{leafKey}
@@ -251,12 +296,15 @@
 					{onChange}
 					{onError}
 					{leaves}
+					{diagnostics}
 				/>
 			{:else if field.control === 'enum'}
 				<EnumField
 					value={value as string | undefined}
 					values={field.schema.values ?? []}
 					fallback={ghost as string | undefined}
+					blankTitle={field.schema.ui?.blank_title}
+					{optional}
 					id={domIds.control}
 					{describedBy}
 					onCommit={onCommitScalar}
@@ -265,6 +313,7 @@
 				/>
 			{:else if field.control === 'variant'}
 				<VariantField
+					bind:this={variantEl}
 					value={value as Record<string, unknown> | undefined}
 					schema={field.schema}
 					{ghostMember}
@@ -276,12 +325,14 @@
 					onCommit={onCommitScalar}
 					{optionAllowed}
 					{enumDisallowed}
+					diagnostics={deep}
 				/>
 			{:else if field.control === 'number'}
 				<NumberField
 					value={value as number | undefined}
-					integer={field.schema.type === 'integer'}
-					fallback={ghost as number | undefined}
+					integer={baseType(field.schema) === 'integer'}
+					fallback={declared}
+					placeholder={none}
 					id={domIds.control}
 					{describedBy}
 					onCommit={onCommitScalar}
@@ -290,6 +341,7 @@
 				<BooleanField
 					value={value as boolean | undefined}
 					fallback={ghost as boolean | undefined}
+					{optional}
 					id={domIds.control}
 					{describedBy}
 					onCommit={onCommitScalar}
@@ -307,7 +359,10 @@
 				<ArrayField
 					bind:this={arrayEl}
 					value={value as unknown[] | undefined}
+					fallback={Array.isArray(field.schema.default) ? field.schema.default : undefined}
 					items={field.schema.items}
+					layout={arrayLayout(field.schema)}
+					max={field.schema.max}
 					label={field.label}
 					required={field.required}
 					description={field.description}
@@ -316,6 +371,7 @@
 					idBase={domIds.control}
 					{contentAt}
 					onCommit={onCommitScalar}
+					diagnostics={deep}
 				/>
 			{:else if field.control === 'object'}
 				<ObjectField
@@ -328,11 +384,28 @@
 					{describedBy}
 					{contentAt}
 					onCommit={onCommitScalar}
+					diagnostics={deep}
+				/>
+			{:else if field.control === 'matrix'}
+				<MatrixField
+					bind:this={matrixEl}
+					value={value as Record<string, unknown> | undefined}
+					schema={field.schema}
+					label={field.label}
+					description={field.description}
+					labelId={domIds.label}
+					descriptionId={domIds.description}
+					idBase={domIds.control}
+					{contentAt}
+					onCommit={onCommitScalar}
+					diagnostics={deep}
 				/>
 			{:else}
 				<TextField
 					value={value as string | undefined}
-					placeholder={defaultStr}
+					fallback={declared}
+					placeholder={none}
+					{example}
 					id={domIds.control}
 					{describedBy}
 					onCommit={onCommitScalar}
@@ -340,7 +413,9 @@
 			{/if}
 		</div>
 
-		<DiagnosticList {diagnostics} />
+		{#if !isContainer(field.control)}
+			<DiagnosticList {diagnostics} />
+		{/if}
 	</div>
 </div>
 

package/dist/visual/FormatPopover.svelte

@@ -142,9 +142,10 @@
 		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`), 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.
+		// 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.
 		if (
 			!view ||
 			!view.hasFocus() ||

package/dist/visual/MatrixField.svelte

@@ -0,0 +1,353 @@
+<!--
+ A `matrix` field → ticks over the roster, columns unfolding under a held member
+ (VISUAL_EDITOR §"Structure mirrors the schema", canon `SCHEMAS.md` §Matrix). The
+ roster is one flat list, one member to a row, or abreast on the section's track ladder
+ under `ui.compact`; each member is a real checkbox bound to its `held` cell with
+ its title as the `<label for>`, an unheld member reading at the label ink and a held
+ one at the value ink. A held member unfolds its columns beneath its title, drawn by
+ {@link ObjectField} over the matrix's `properties` at the member's key, the way a
+ variant unfolds its cells; zero columns is a checklist and unfolds nothing. An unheld
+ member's retained columns are held but undrawn, the variant rule: in the document and
+ not on the page.
+
+ The control owns its label row, as an array does: the count of held members sits
+ where an array's add chip sits, one piece of chrome with one answer, so {@link Field}
+ skips its own label for it.
+
+ Commit is whole: the sparse map, one `writer.set`. A tick writes the member object
+ with an explicit `held`, an untick keeps the columns under `held: false`, and a member
+ unheld with no columns leaves the map (`memberWrite`). What is blank per column is the
+ engine's rule and not restated: a column control that clears to unset drops its key,
+ so the editor drops a member it has emptied rather than deciding skippability for
+ itself; one whose default prints clears to the empty answer, which the member holds.
+ The read takes both rest forms — a bare tick and `{held?, …columns}`, whose `held` rests
+ at `false` where the mapping names none — and the write lands one, on the member edited
+ alone; every other member rides through as the document spelled it.
+-->
+<script lang="ts">
+	import { tick as flush } from 'svelte';
+	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 type { Content, PathStep, QuillFieldSchema } from '@quillmark/wasm';
+	import {
+		MATRIX_HELD,
+		commitMember,
+		matrixColumns,
+		matrixDeclares,
+		matrixHeld,
+		matrixMembers,
+		memberValue,
+		memberWrite
+	} from './structure.js';
+	import { splitDeep, unrouted, type DeepDiagnostic } from './diagnostics.js';
+	import type { LandingBox } from './leaves.js';
+	import { propertyDomIds } from './domid.js';
+	import Icon from './icons/Icon.svelte';
+	import FieldLabel from './FieldLabel.svelte';
+	import ObjectField from './ObjectField.svelte';
+	import DiagnosticList from './DiagnosticList.svelte';
+	import './controls.css';
+
+	interface Props {
+		/** The stored sparse map, or undefined while the field is unset. */
+		value: Record<string, unknown> | undefined;
+		/** The field's own schema: `members` is the roster, `properties` the columns. */
+		schema: QuillFieldSchema;
+		/** Field label, the naming prefix a member's columns compose with. */
+		label?: string;
+		/** Schema `description`: the label's help affordance. */
+		description?: string;
+		/** The label's own DOM id: the group's name, each tick keeping its own `<label>`. */
+		labelId?: string;
+		/** Where the description parks, for the group's `aria-describedby`. */
+		descriptionId?: string;
+		/** 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 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;
+		onCommit: (v: Record<string, unknown> | undefined) => void;
+		/** The diagnostics routed into this field, each with its steps still to walk: one
+		 * naming a member draws under that member, one naming nothing on the roster at the
+		 * field's foot. */
+		diagnostics?: readonly DeepDiagnostic[];
+	}
+	let {
+		value,
+		schema,
+		label,
+		description,
+		labelId,
+		descriptionId,
+		idBase,
+		contentAt,
+		onCommit,
+		diagnostics
+	}: Props = $props();
+
+	const members = $derived(matrixMembers(schema.members));
+	const compact = $derived(!!schema.ui?.compact);
+	const hasColumns = $derived(Object.keys(schema.properties ?? {}).length > 0);
+	const held = (id: string): boolean => matrixHeld(memberValue(value, id));
+	const heldCount = $derived(members.filter((m) => held(m.id)).length);
+	const routed = $derived(splitDeep(diagnostics));
+	const foot = $derived(
+		unrouted(routed, (step) => typeof step === 'string' && matrixDeclares(schema, step))
+	);
+
+	// A member with no field id space around it still needs an id: the tick is what its
+	// title's `for` names. Stable across SSR and hydration, which a counter is not.
+	const uid = $props.id();
+	const memberBase = (id: string): string =>
+		idBase != null ? `${idBase}-m-${id}` : `qm-${uid}-${id}`;
+	/** The tick is the member's `held` cell, so its id is the one that cell's label
+	 *  would take: the column subform below it derives its own names from the same base. */
+	const tickId = (id: string): string => propertyDomIds(memberBase(id), MATRIX_HELD).control;
+	const titleId = (id: string): string => propertyDomIds(memberBase(id), MATRIX_HELD).label;
+
+	// The member boxes, the ticks and the column subforms, keyed by member id — the
+	// roster's own key, stable for the schema's life. `$state` for the binding's sake
+	// (`ArrayField` keeps its element refs the same way).
+	type Subform = {
+		focus: () => void;
+		focusPath: (steps: readonly PathStep[], pos?: number) => LandingBox;
+	};
+	const memberEls: Record<string, HTMLElement | undefined> = $state({});
+	const tickEls: Record<string, HTMLInputElement | undefined> = $state({});
+	const colEls: Record<string, Subform | undefined> = $state({});
+	let rosterEl = $state<HTMLElement | undefined>();
+	/** A ref by member id, own keys only: an id can be spelled `constructor`. */
+	const ref = <T,>(map: Record<string, T | undefined>, id: string): T | undefined =>
+		Object.hasOwn(map, id) ? map[id] : undefined;
+
+	/** A native checkbox carries its own state, so a commit the document declines leaves
+	 *  the face ticked over a map that says otherwise, `checked={held(id)}` having nothing
+	 *  new to write. The reassert after the flush is what the styled controls get from
+	 *  their synced local (`synced.svelte.ts`): the document is what the face reads. */
+	async function tick(id: string, on: boolean, el: HTMLInputElement): Promise<void> {
+		onCommit(commitMember(value, id, memberWrite(on, matrixColumns(memberValue(value, id)))));
+		await flush();
+		if (el.isConnected) el.checked = held(id);
+	}
+	/** A column edit lands on a held member: the subform draws under a tick alone. */
+	function commitColumns(id: string, columns: Record<string, unknown>): void {
+		onCommit(commitMember(value, id, memberWrite(true, columns)));
+	}
+
+	/** Take the caret: the first member's tick. Reached by a label click and by the
+	 *  editor's landing verbs, which ask one function so they cannot disagree. */
+	export function focus(): void {
+		const first = members[0];
+		if (first) ref(tickEls, first.id)?.focus();
+	}
+	/** The box an arrival wash blooms in: the roster, not the label row above it, this
+	 *  component owning the field's label as an array does. */
+	export function washBox(): HTMLElement | undefined {
+		return rosterEl;
+	}
+	/**
+	 * Land at `steps`: a member, or a column under it ({@link FieldControl.focusPath}).
+	 * A member address and its `held` cell focus the tick; a column address focuses
+	 * that column where the member is held and its columns are drawn, and the tick
+	 * where they are not — the address names the column, and what is drawn for it is
+	 * the tick that would open it. One rule keyed on the address, never on the
+	 * document, so one address lands in one place. A member off the roster falls back
+	 * to {@link focus}. The innermost row the walk opened comes back, else the member's
+	 * box: the member is the row the address named.
+	 */
+	export function focusPath(steps: readonly PathStep[], pos?: number): LandingBox {
+		const [id, ...rest] = steps;
+		if (typeof id !== 'string' || !matrixDeclares(schema, id)) {
+			focus();
+			return undefined;
+		}
+		const column = rest[0];
+		const cells = ref(colEls, id);
+		const member = ref(memberEls, id);
+		if (column !== undefined && column !== MATRIX_HELD && cells) {
+			const inner = cells.focusPath(rest, pos);
+			return inner instanceof Promise ? inner.then((box) => box ?? member) : (inner ?? member);
+		}
+		ref(tickEls, id)?.focus();
+		return member;
+	}
+</script>
+
+<div
+	class="qm-matrix"
+	role="group"
+	aria-labelledby={label != null ? labelId : undefined}
+	aria-describedby={description ? descriptionId : undefined}
+>
+	<div class="qm-matrix-header">
+		{#if label != null}
+			<FieldLabel {label} id={labelId} {descriptionId} onActivate={focus} {description} />
+		{:else}
+			<span></span>
+		{/if}
+		<span class="qm-matrix-count">{t.strings.matrixHeld(heldCount, members.length)}</span>
+	</div>
+	<div class="qm-matrix-roster" class:qm-tracks={compact} class:compact bind:this={rosterEl}>
+		{#each members as m (m.id)}
+			{@const on = held(m.id)}
+			{@const deep = routed.below.get(m.id)}
+			<div class="qm-member" class:held={on} 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
+					     mark beside it read the rungs. The mark is the surface's one check
+					     glyph, shown by the input's own state. -->
+					<span class="qm-tick">
+						<input
+							type="checkbox"
+							class="qm-tick-input qm-focus-ring"
+							id={tickId(m.id)}
+							checked={on}
+							bind:this={tickEls[m.id]}
+							onchange={(e) => tick(m.id, e.currentTarget.checked, e.currentTarget)}
+						/>
+						<Icon name="check" class="qm-tick-mark" />
+					</span>
+					<label class="qm-member-title" id={titleId(m.id)} for={tickId(m.id)}>{m.title}</label>
+				</div>
+				{#if on && hasColumns}
+					<!-- The columns, one rung in, the way a variant's cells unfold under the
+					     discriminant. Keyed by member id above, so a tick elsewhere leaves this
+					     subform mounted and the caret in it. -->
+					<ObjectField
+						bind:this={colEls[m.id]}
+						value={matrixColumns(memberValue(value, m.id))}
+						properties={schema.properties}
+						label={`${label ?? ''} ${m.title}`.trim()}
+						idBase={memberBase(m.id)}
+						labelledBy={titleId(m.id)}
+						contentAt={(path) => contentAt([m.id, ...path])}
+						onCommit={(columns) => commitColumns(m.id, columns)}
+						diagnostics={deep}
+					/>
+				{:else}
+					<DiagnosticList diagnostics={deep?.map((d) => d.diagnostic)} />
+				{/if}
+			</div>
+		{/each}
+	</div>
+	<DiagnosticList diagnostics={foot} />
+</div>
+
+<style>
+	.qm-matrix {
+		display: flex;
+		flex-direction: column;
+		gap: var(--_qm-space);
+	}
+	/* The label row, the array's own shape: this component owns the label track
+	 (`Field.svelte`), and the count stands where the add chip would. */
+	.qm-matrix-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--_qm-space-2);
+	}
+	/* The count reads at the label rung: a fact about the field, never a value. */
+	.qm-matrix-count {
+		font-size: var(--_qm-text-label);
+		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. */
+	.qm-matrix-roster {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		gap: var(--_qm-space);
+		min-width: 0;
+		border-radius: var(--_qm-radius-inner);
+	}
+	/* Compact, the members stand abreast in reading order at the count the ladder gives
+	 the width (`.qm-tracks`, controls.css), a held member's columns unfolding inside its
+	 own track. */
+	.qm-matrix-roster.compact {
+		display: grid;
+		grid-template-columns: repeat(var(--cols), 1fr);
+		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. */
+	.qm-member {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		gap: var(--_qm-space);
+		border-radius: var(--_qm-radius-inner);
+	}
+	/* The tick and its title on one line, the line holding the tap floor a tick alone
+	 would not reach: the title is the target, the `for` carrying its press to the input. */
+	.qm-member-head {
+		display: flex;
+		align-items: center;
+		gap: var(--_qm-space-2);
+		min-height: var(--_qm-tap-min);
+	}
+	.qm-tick {
+		position: relative;
+		display: inline-flex;
+		flex-shrink: 0;
+		width: var(--_qm-glyph-control);
+		height: var(--_qm-glyph-control);
+	}
+	/* The box: a well, edged, since a mark this small has no plane under it to step off
+	 by tone alone; held, it takes the accent the switch's track takes when checked. */
+	.qm-tick-input {
+		appearance: none;
+		margin: 0;
+		width: 100%;
+		height: 100%;
+		border: var(--_qm-border-width) solid var(--_qm-border);
+		border-radius: calc(var(--_qm-radius-inner) / 2);
+		background: var(--_qm-surface-well);
+		cursor: pointer;
+		transition:
+			background-color var(--_qm-duration-fast) var(--_qm-ease-reverse),
+			border-color var(--_qm-duration-fast) var(--_qm-ease-reverse);
+	}
+	.qm-tick-input:checked {
+		background: var(--_qm-accent);
+		border-color: var(--_qm-accent);
+	}
+	/* The mark rides over the input and takes no press of its own; it is drawn by the
+	 input's state, in the ink the surface reads over the accent. */
+	.qm-tick :global(.qm-tick-mark) {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+		color: var(--_qm-surface);
+		opacity: 0;
+		transition: opacity var(--_qm-duration-fast) var(--_qm-ease-reverse);
+	}
+	.qm-tick:has(:checked) :global(.qm-tick-mark) {
+		opacity: 1;
+	}
+	/* Unheld reads at the label ink, held at the value ink: the title is what the
+	 document says once it is ticked, and until then it is the vocabulary. */
+	.qm-member-title {
+		font-size: var(--_qm-text-body);
+		line-height: var(--_qm-leading-tight);
+		color: var(--_qm-ink-label);
+		cursor: pointer;
+		min-width: 0;
+		transition: color var(--_qm-duration-fast) var(--_qm-ease-reverse);
+	}
+	.qm-member.held .qm-member-title,
+	.qm-member-title:hover {
+		color: var(--_qm-ink);
+	}
+</style>