@quillmark/svelte 0.11.0 → 0.12.0

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

@@ -1,8 +1,17 @@
 import type { Content, PathStep, QuillFieldSchema } from '@quillmark/wasm';
+import { type ArrayLayout } from './structure.js';
+import { type DeepDiagnostic } from './diagnostics.js';
+import type { LandingBox } from './leaves.js';
 import './controls.css';
 interface Props {
     value: unknown[] | undefined;
     items: QuillFieldSchema | undefined;
+    /** How the elements draw: the record list, or the table an `array<object>` of
+     * short cells asks for (`arrayLayout`). */
+    layout?: ArrayLayout;
+    /** The schema's `max:`, past which the add chip disables and Enter stops
+     * inserting; `undefined` is no cap. */
+    max?: number;
     /** Accessible-name prefix for the element controls (`label` + 1-based index). */
     label?: string;
     /** No-default field → a persistent required `*` on the label. */
@@ -28,11 +37,15 @@ interface Props {
      * control has spliced in and whose commit has yet to land, or was refused. */
     contentAt: (path: PathStep[]) => Content | undefined;
     onCommit: (arr: unknown[]) => void;
+    /** The diagnostics routed into this array, each with its steps still to walk: one
+     * naming a row draws under that row — under its head while it is collapsed, under
+     * the cell once it is open — and one naming no row draws at the list's foot. */
+    diagnostics?: readonly DeepDiagnostic[];
 }
 declare const ArrayField: import("svelte").Component<Props, {
     focus: () => void;
     washBox: () => HTMLElement | undefined;
-    focusElement: (k: number, pos?: number) => HTMLElement | undefined;
+    focusPath: (steps: readonly PathStep[], pos?: number) => LandingBox;
 }, "">;
 type ArrayField = ReturnType<typeof ArrayField>;
 export default ArrayField;

package/dist/visual/BooleanField.svelte

@@ -36,9 +36,12 @@
 	const local = syncedLocal(() => value ?? fallback ?? false);
 </script>
 
-<span class="qm-switch-wrap">
+<!-- Not `.qm-switch`: that name is the preset's pane band, whose narrow-viewport rule
+ stands every child of it at `--qmh-tap`, so a track wearing it grows a thumb three times
+ its own height over the labels around it (`preset/recipes.css`, held by `check:style`). -->
+<span class="qm-toggle-wrap">
 	<Switch.Root
-		class="qm-switch qm-focus-ring qm-tap-floor"
+		class="qm-toggle qm-focus-ring qm-tap-floor"
 		checked={local.value}
 		{id}
 		aria-label={id ? undefined : label}
@@ -48,7 +51,7 @@
 			onCommit(v);
 		}}
 	>
-		<Switch.Thumb class="qm-switch-thumb" />
+		<Switch.Thumb class="qm-toggle-thumb" />
 	</Switch.Root>
 </span>
 
@@ -60,7 +63,7 @@
 	 2.5.8's floor is half again that. The `<label for>` beside it forwards a press but
 	 stands at the label rung, so it is no taller: without the floor no region on the
 	 surface reaches this control at the size every other control on it holds. */
-	.qm-switch-wrap :global(.qm-switch) {
+	.qm-toggle-wrap :global(.qm-toggle) {
 		display: inline-flex;
 		align-items: center;
 		width: 1.75rem;
@@ -75,21 +78,21 @@
 		cursor: pointer;
 		transition: background var(--_qm-duration-fast) var(--_qm-ease-reverse);
 	}
-	.qm-switch-wrap :global(.qm-switch[data-state='checked']) {
+	.qm-toggle-wrap :global(.qm-toggle[data-state='checked']) {
 		background: var(--_qm-accent);
 	}
 	/* The focus ring rides `.qm-focus-ring` on the switch (controls.css). */
 	/* The thumb reads on tone alone: the base surface over the track's `hover` rung
 	 unchecked, and over `--_qm-accent` checked. No edge of its own: a hairline around
 	 a 12px pill is a second box inside the track's. */
-	.qm-switch-wrap :global(.qm-switch-thumb) {
+	.qm-toggle-wrap :global(.qm-toggle-thumb) {
 		width: 0.75rem;
 		height: 0.75rem;
 		border-radius: var(--_qm-radius-pill);
 		background: var(--_qm-surface);
 		transition: translate var(--_qm-duration-fast) var(--_qm-ease-reverse);
 	}
-	.qm-switch-wrap :global(.qm-switch-thumb[data-state='checked']) {
+	.qm-toggle-wrap :global(.qm-toggle-thumb[data-state='checked']) {
 		translate: 0.75rem;
 	}
 </style>

package/dist/visual/Card.svelte

@@ -332,7 +332,7 @@
 </section>
 
 {#snippet sectionFields(fields: FieldModel[])}
-	<div class="qm-fields">
+	<div class="qm-fields qm-tracks">
 		{#each placeFields(fields) as { field: f, span } (f.name)}
 			<Field
 				field={f}
@@ -584,33 +584,14 @@
 	.qm-group-panel-inner {
 		container-type: inline-size;
 	}
-	/* 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`, `ObjectField`) land on a track boundary. A field ends on
-	 its track's own edge, so a rung is `n * 220px + gaps`. */
+	/* The count is the ladder's (`.qm-tracks`, controls.css), stepped by the container
+	 above; what this block owns is the grid the count fills. */
 	.qm-fields {
-		--cols: 1;
-		--cols-half: 1;
 		display: grid;
 		grid-template-columns: repeat(var(--cols), 1fr);
 		column-gap: var(--_qm-space-2);
 		row-gap: var(--_qm-space-3);
 	}
-	@container (min-width: 28rem) {
-		.qm-fields {
-			--cols: 2;
-			--cols-half: 1;
-		}
-	}
-	@container (min-width: 57rem) {
-		.qm-fields {
-			--cols: 4;
-			--cols-half: 2;
-		}
-	}
 	/* The nesting vertical, one `--_qm-nest` in from the card's edge with the panel's
 	 fields the same rung off it (ARCHITECTURE §"A plane is a tone"). `--_qm-border` and
 	 not `--_qm-accent`: a card's edge and the verticals inside it are one stroke at three

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
@@ -24,9 +26,16 @@
 		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,
+		ghostDefault,
+		isContainer,
+		stringifyGhost
+	} from './structure.js';
+	import { deepen } from './diagnostics.js';
 	import type { FieldDomIds } from './domid.js';
 	import ProseField from './ProseField.svelte';
 	import TextField from './TextField.svelte';
@@ -37,6 +46,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';
 
@@ -123,6 +133,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 +162,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 +194,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 +215,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 +235,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}
@@ -265,6 +283,7 @@
 				/>
 			{:else if field.control === 'variant'}
 				<VariantField
+					bind:this={variantEl}
 					value={value as Record<string, unknown> | undefined}
 					schema={field.schema}
 					{ghostMember}
@@ -276,6 +295,7 @@
 					onCommit={onCommitScalar}
 					{optionAllowed}
 					{enumDisallowed}
+					diagnostics={deep}
 				/>
 			{:else if field.control === 'number'}
 				<NumberField
@@ -308,6 +328,8 @@
 					bind:this={arrayEl}
 					value={value as unknown[] | undefined}
 					items={field.schema.items}
+					layout={arrayLayout(field.schema)}
+					max={field.schema.max}
 					label={field.label}
 					required={field.required}
 					description={field.description}
@@ -316,6 +338,7 @@
 					idBase={domIds.control}
 					{contentAt}
 					onCommit={onCommitScalar}
+					diagnostics={deep}
 				/>
 			{:else if field.control === 'object'}
 				<ObjectField
@@ -328,6 +351,21 @@
 					{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
@@ -340,7 +378,9 @@
 			{/if}
 		</div>
 
-		<DiagnosticList {diagnostics} />
+		{#if !isContainer(field.control)}
+			<DiagnosticList {diagnostics} />
+		{/if}
 	</div>
 </div>