@quillmark/svelte 0.0.0

package/dist/preview/paint.js

@@ -0,0 +1,262 @@
+// Vertical breathing room between stacked pages; cosmetic only, and a rung like
+// any other gap: the stack breathes on the same rhythm the cards do.
+const PAGE_GAP = 'var(--_qm-space-4)';
+export function createPaintLoop(session, container, margin, 
+// Notified when a slot's `session.paint` throws: the loop swallows the throw
+// (see `paintSlot`) so one bad page never aborts the band sweep; the caller
+// decides how to surface it.
+onPaintError) {
+    // The IntersectionObserver root must be a scrollable ancestor of the slots;
+    // respect a consumer's own choice if they already set one (computed style, so
+    // a stylesheet rule counts as a choice, not just an inline style).
+    const computed = getComputedStyle(container);
+    if (computed.overflowY === 'visible')
+        container.style.overflowY = 'auto';
+    if (computed.position === 'static')
+        container.style.position = 'relative';
+    const slots = [];
+    const pageByEl = new Map();
+    const canvases = new Map();
+    const visible = new Set();
+    let zoom = 1;
+    const observer = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+            const idx = pageByEl.get(entry.target);
+            if (idx === undefined)
+                continue;
+            if (entry.isIntersecting)
+                visible.add(idx);
+            else
+                visible.delete(idx);
+        }
+        updateBand();
+    }, { root: container, threshold: 0 });
+    function makeSlot(page) {
+        const size = session.pageSize(page);
+        // The sheet's own edge, and the only thing separating it from the desk: the
+        // page is at `--_qm-surface`, and the tone behind it is the host's, which
+        // THEMING permits to be plain `--qm-bg` (the same value). A hairline holds at
+        // both poles where a shadow's offset does not, and the
+        // boundary of the paper is not a mark on it, so the overlay's no-ink-at-rest
+        // rule is untouched (PREVIEW §Overlay). `border-box`, so the stroke lands
+        // inside the width the container gives and `clientWidth` below still measures
+        // the paper.
+        const el = document.createElement('div');
+        el.className = 'qm-page';
+        Object.assign(el.style, {
+            position: 'relative',
+            boxSizing: 'border-box',
+            width: '100%',
+            aspectRatio: `${size.widthPt} / ${size.heightPt}`,
+            background: 'var(--_qm-surface)',
+            border: 'var(--_qm-border-width) solid var(--_qm-border)'
+        });
+        if (page > 0)
+            el.style.marginTop = PAGE_GAP;
+        container.appendChild(el);
+        pageByEl.set(el, page);
+        observer.observe(el);
+        return { page, size, el };
+    }
+    // Rasterize `slot` into its canvas (creating the canvas if this is its first
+    // paint since mounting). `layoutScale` is derived from the slot's OWN current
+    // CSS width, so layout width tracks the container per the zoom settled
+    // decision; `canvas.style.*` is then set from the authoritative PaintResult,
+    // never guessed.
+    function paintSlot(slot) {
+        let canvas = canvases.get(slot.page);
+        if (!canvas) {
+            canvas = document.createElement('canvas');
+            canvas.className = 'qm-page-canvas';
+            Object.assign(canvas.style, { position: 'absolute', inset: '0', display: 'block' });
+        }
+        // Contextless canvas: bail BEFORE registering, so `updateBand` still sees
+        // the page as unmounted and retries instead of keeping a blank page.
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        if (!canvases.has(slot.page)) {
+            slot.el.insertBefore(canvas, slot.el.firstChild);
+            canvases.set(slot.page, canvas);
+        }
+        const layoutScale = (slot.el.clientWidth || slot.size.widthPt) / slot.size.widthPt;
+        const densityScale = (window.devicePixelRatio || 1) * zoom;
+        try {
+            const result = session.paint(ctx, slot.page, { layoutScale, densityScale });
+            canvas.style.width = `${result.layoutWidth}px`;
+            canvas.style.height = `${result.layoutHeight}px`;
+        }
+        catch (err) {
+            // A paint that throws must not abort the band loop; `updateBand` runs in
+            // the IntersectionObserver callback and sweeps every entry, so an
+            // uncaught throw would strand the rest of the band unpainted. Unmount the
+            // half-mounted canvas (so the page is a retryable unmounted slot, not a
+            // blank registered one) and surface the failure; the sweep moves on.
+            unmountPage(slot.page);
+            onPaintError?.(slot.page, err);
+        }
+    }
+    function unmountPage(page) {
+        const canvas = canvases.get(page);
+        if (!canvas)
+            return;
+        canvas.remove();
+        canvases.delete(page);
+    }
+    // Mount pages newly inside [min(visible)-margin, max(visible)+margin], unmount
+    // pages that fell outside it. Only touches pages CHANGING band membership;
+    // an already-mounted page in the band is left alone (paint contract: an idle
+    // canvas keeps its pixels for free; repainting it here would be pure waste).
+    function updateBand() {
+        const painted = new Set();
+        if (visible.size === 0 || slots.length === 0)
+            return painted;
+        const min = Math.min(...visible);
+        const max = Math.max(...visible);
+        const lo = Math.max(0, min - margin);
+        const hi = Math.min(slots.length - 1, max + margin);
+        for (const slot of slots) {
+            const inBand = slot.page >= lo && slot.page <= hi;
+            if (inBand && !canvases.has(slot.page)) {
+                paintSlot(slot);
+                painted.add(slot.page);
+            }
+            else if (!inBand && canvases.has(slot.page))
+                unmountPage(slot.page);
+        }
+        return painted;
+    }
+    // Grow/shrink the slot array to `pageCount` (trailing add/remove; a recompile
+    // reports the new count, and dirtyPages already covers any reflow), then
+    // re-cache every page's geometry (cheap report-only reads; simplest way to
+    // stay correct across any recompile, not just a count change).
+    function reconcile(pageCount) {
+        while (slots.length > pageCount) {
+            const slot = slots.pop();
+            if (!slot)
+                break;
+            observer.unobserve(slot.el);
+            pageByEl.delete(slot.el);
+            unmountPage(slot.page);
+            visible.delete(slot.page);
+            slot.el.remove();
+        }
+        while (slots.length < pageCount) {
+            slots.push(makeSlot(slots.length));
+        }
+        for (let i = 0; i < slots.length; i++) {
+            const size = session.pageSize(i);
+            slots[i] = { ...slots[i], size };
+            // Keep the page box's shape in step with the re-read size: a recompile
+            // can change a page's dimensions without changing the count, and every
+            // %-space overlay/click transform assumes box shape matches PageSize.
+            slots[i].el.style.aspectRatio = `${size.widthPt} / ${size.heightPt}`;
+        }
+    }
+    // Slots are built on the first `refresh` (the controller calls it immediately),
+    // NOT here: reconcile → `session.pageSize` must run AFTER the controller's
+    // `supportsCanvas`/`pageCount` gate, since a `supportsCanvas: false` compile with
+    // pages would throw on `pageSize` (runtime.d.ts: it succeeds iff `supportsCanvas`)
+    // before the controller can surface its "unsupported" message.
+    // ── Keep mounted rasters in step with the display ───────────────────────────
+    // Every paint freezes `canvas.style.width/height` to the box width AT THAT
+    // PAINT (paintSlot). A page that stays mounted while the container's CSS width
+    // or `devicePixelRatio` shifts would otherwise keep a stale raster the %-space
+    // overlay/click math silently drifts off of: the box tracks the container, the
+    // ink does not. Two observers close the gap by repainting mounted pages from
+    // their current box; canvases are `position:absolute`, so a repaint can't feed
+    // back into layout (and thus can't re-trigger the resize observer).
+    // Repaint mounted pages (all, or a given subset) from their live geometry: the
+    // one path resize, DPR, and zoom share; each `paintSlot` re-reads the slot's
+    // current `clientWidth`. A no-op for an unmounted page.
+    function repaint(pages) {
+        for (const page of pages ?? canvases.keys()) {
+            const slot = slots[page];
+            if (slot && canvases.has(page))
+                paintSlot(slot);
+        }
+    }
+    // Coalesce a burst of observer callbacks into one repaint on the next frame.
+    // `force` (a DPR change) bypasses the width guard, since a DPR change moves no
+    // CSS-px width; a plain resize repaints only when the width actually moved, so
+    // a height-only or no-op tick costs nothing.
+    let rafId = 0;
+    let lastWidth = container.clientWidth;
+    let forcePending = false;
+    function scheduleRepaint(force) {
+        if (force)
+            forcePending = true;
+        if (rafId)
+            return;
+        rafId = requestAnimationFrame(() => {
+            rafId = 0;
+            const forced = forcePending;
+            forcePending = false;
+            const width = container.clientWidth;
+            if (!forced && width === lastWidth)
+                return;
+            lastWidth = width;
+            repaint();
+        });
+    }
+    // Container CSS-width changes (drag the pane wider, resize the window). Guarded
+    // for jsdom, which ships no ResizeObserver; the unit suite drives no resize, so
+    // skipping it there is correct; a real browser takes the observed path.
+    const resizeObserver = typeof ResizeObserver === 'undefined'
+        ? undefined
+        : new ResizeObserver(() => scheduleRepaint(false));
+    resizeObserver?.observe(container);
+    // `devicePixelRatio` changes (window dragged to a different-DPI monitor, browser
+    // zoom) leave CSS-px width untouched, so the ResizeObserver never sees them;
+    // watch DPR directly. A `(resolution: …dppx)` query pins the CURRENT ratio and
+    // is therefore one-shot: re-arm it against the new ratio on each change. Guarded
+    // for environments (jsdom) without `matchMedia`.
+    let dprQuery;
+    function onDprChange() {
+        scheduleRepaint(true);
+        armDprListener();
+    }
+    function armDprListener() {
+        if (typeof matchMedia === 'undefined')
+            return;
+        dprQuery = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+        dprQuery.addEventListener('change', onDprChange, { once: true });
+    }
+    armDprListener();
+    return {
+        get slots() {
+            return slots;
+        },
+        refresh(dirtyPages, pageCount) {
+            reconcile(pageCount);
+            // Slot count may have moved the band (pages added/removed); a page the
+            // band just painted is already post-apply, so a second full
+            // rasterization from the dirty loop would add nothing.
+            const painted = updateBand();
+            for (const page of dirtyPages) {
+                if (painted.has(page))
+                    continue;
+                const slot = slots[page];
+                if (slot && canvases.has(page))
+                    paintSlot(slot);
+            }
+        },
+        setDensityZoom(z) {
+            zoom = z;
+            repaint();
+        },
+        destroy() {
+            if (rafId)
+                cancelAnimationFrame(rafId);
+            resizeObserver?.disconnect();
+            dprQuery?.removeEventListener('change', onDprChange);
+            observer.disconnect();
+            for (const page of [...canvases.keys()])
+                unmountPage(page);
+            for (const slot of slots)
+                slot.el.remove();
+            slots.length = 0;
+            pageByEl.clear();
+        }
+    };
+}

package/dist/preview/strings.d.ts

@@ -0,0 +1,14 @@
+export interface PreviewStrings {
+    /** A page the backend refused to raster. */
+    renderFailed: string;
+    /** A compile with zero pages: recoverable, and the commonest state of a fresh seed. */
+    noPages: string;
+    /** A compile whose pages this backend cannot raster at all. */
+    unsupported: string;
+}
+/** The package's English. Every key, so the merge below is total. */
+export declare const DEFAULT_PREVIEW_STRINGS: PreviewStrings;
+/** A consumer's wording: any subset, the rest the package's. */
+export type PreviewStringsInput = Partial<PreviewStrings>;
+/** Fill a partial override to the whole key set. */
+export declare function mergePreviewStrings(custom: PreviewStringsInput | undefined): PreviewStrings;

package/dist/preview/strings.js

@@ -0,0 +1,22 @@
+// Every word the preview says. Three, because the surface is a canvas and its
+// only prose is the message states that stand in when there is nothing to paint.
+//
+// Separate from the visual surface's set rather than pooled with it: `/preview`
+// reaches `/core` and nothing editor-side, which is what lets it promote to its own
+// package, and a shared strings module would be an edge back across that line. The
+// shape is the same, so a consumer wording both writes the same kind of object
+// twice rather than learning two idioms.
+//
+// A plain options field rather than a context channel, unlike the visual surface's:
+// these three are read in one module by one function, so there is no tree to make
+// them ambient for.
+/** The package's English. Every key, so the merge below is total. */
+export const DEFAULT_PREVIEW_STRINGS = {
+    renderFailed: 'Preview failed to render.',
+    noPages: 'No pages to preview.',
+    unsupported: 'Preview is not available for this document.'
+};
+/** Fill a partial override to the whole key set. */
+export function mergePreviewStrings(custom) {
+    return custom ? { ...DEFAULT_PREVIEW_STRINGS, ...custom } : DEFAULT_PREVIEW_STRINGS;
+}

package/dist/visual/ArrayField.svelte

@@ -0,0 +1,362 @@
+<!--
+ An `array` field → an add/remove repeater. Elements commit by VALUE: every
+ edit / add / remove rebuilds the whole array and hands it to the parent's typed
+ `writer.set(field, wholeArray)` (arrays are not op-addressed). Element control
+ by `items.type`: `string` → text input, `richtext` → a prose element
+ ({@link ProseArrayElement}), `object` → a minimal JSON editor, keeping the prior
+ element value on an entry that does not parse. The add affordance sits in the
+ label header row (space-between with the field label); {@link Field} skips its
+ own label for array controls and hands this component the label track with it.
+
+ A row ends in the reserved action column (`--action-col`), which the field insets
+ and this reaches back across: the element controls stop where a scalar's does and
+ the remove sits beyond them, on the right edge the field's track keeps.
+
+ Keys carry the list without the mouse: Enter inserts a
+ sibling below and takes the caret there, Backspace on an EMPTY element removes it
+ and hands focus back up the list.
+
+ No reorder: an array's order is fixed at declaration/entry order. Elements
+ carry a parallel session-id list, spliced with the values as one operation at
+ whatever index a mutation names; so an element holds its id for life and the
+ surviving order never permutes, which is what lets a keyed prose element survive an
+ insert or a remove ABOVE it rather than remounting.
+-->
+<script lang="ts">
+	import { wording } from './strings.js';
+
+	// The surface's words, ambient from the editor root; the package's English
+	// off-tree, so this component renders standalone too.
+	const t = wording();
+	import { onDestroy, tick } from 'svelte';
+	import type { Content, QuillFieldSchema } from '@quillmark/wasm';
+	import { emptyContent } from '../core/codec/index.js';
+	import { createLifespan } from '../core/teardown.js';
+	import { IdSeq, controlKind } from './structure.js';
+	import Icon from './icons/Icon.svelte';
+	import TextField from './TextField.svelte';
+	import ProseArrayElement from './ProseArrayElement.svelte';
+	import FieldLabel from './FieldLabel.svelte';
+	import './controls.css';
+
+	interface Props {
+		value: unknown[] | undefined;
+		items: QuillFieldSchema | undefined;
+		/** Accessible-name prefix for the element controls (`label` + 1-based index). */
+		label?: string;
+		/** No-default field → a persistent required `*` on the label. */
+		required?: boolean;
+		/** Schema `description`: the label's help affordance. */
+		description?: string;
+		/** The label's own DOM id. An array is a GROUP (N inputs, no single `for`
+		 * target) so the label names the set and each element keeps its indexed
+		 * `aria-label`. */
+		labelId?: string;
+		/** Where the description parks, for the group's `aria-describedby`. */
+		descriptionId?: string;
+		onCommit: (arr: unknown[]) => void;
+		/** A prose element gained focus: joins the field in the focus federation. */
+		onFocusEl?: () => void;
+	}
+	let {
+		value,
+		items,
+		label,
+		required,
+		description,
+		labelId,
+		descriptionId,
+		onCommit,
+		onFocusEl
+	}: Props = $props();
+
+	// The ELEMENT control is the item schema's own; an array declaring no `items`
+	// has text elements.
+	const control = $derived(items ? controlKind(items) : 'text');
+	const plaintext = $derived(items?.type === 'plaintext');
+	const arr = $derived((value ?? []) as unknown[]);
+
+	// Parallel stable ids, one per element, kept in lockstep with the data below.
+	// Seeded eagerly so a non-empty array renders its rows on the FIRST pass:
+	// an effect-only seed mounts every element editor in a second render.
+	const seq = new IdSeq();
+	// svelte-ignore state_referenced_locally
+	let ids = $state<string[]>(seq.take((value ?? []).length));
+	// Length reconcile (defend against an out-of-band length change);
+	// order is maintained by the mutators, not here.
+	$effect(() => {
+		const n = arr.length;
+		if (ids.length === n) return;
+		if (ids.length < n) ids = [...ids, ...seq.take(n - ids.length)];
+		else {
+			for (const id of ids.slice(n)) delete els[id];
+			ids = ids.slice(0, n);
+		}
+	});
+
+	// The focus targets, keyed by element ID rather than index: an index goes stale on
+	// the splice that focus is chasing. An element control exposes `focus()` because a
+	// text element and a prose element disagree on what focusing is: the difference
+	// is stated on `ProseArrayElement.focus`, which owns it.
+	//
+	// Every path that drops an id deletes its entry: `bind:this` teardown nulls the
+	// VALUE on unmount and leaves the key, so a card that outlives its elements
+	// accumulates one dead key per element ever created.
+	const els: Record<string, { focus: () => void } | undefined> = {};
+	let addEl: HTMLButtonElement | undefined = $state();
+	let rootEl: HTMLElement | undefined = $state();
+
+	// The awaited flush below is the only work that outlives a gesture here, so the
+	// span carries no cancellers: it is the liveness `focusAfterFlush` asks for.
+	const span = createLifespan();
+	onDestroy(() => span.end());
+
+	function emptyElement(): unknown {
+		if (control === 'prose') return emptyContent();
+		if (control === 'object') return {};
+		return '';
+	}
+
+	function commitElement(k: number, next: unknown): void {
+		const copy = arr.slice();
+		// A cleared element control commits `undefined` (the unset rung), but an
+		// array slot is positional: an array defaults as a whole (`[]`), no
+		// per-element `default:` to fall back to. Keep the slot as the type's empty
+		// element, not an array hole.
+		copy[k] = next === undefined ? emptyElement() : next;
+		onCommit(copy);
+	}
+	/** Insert an empty element after `k` (`-1` prepends) and take focus to it. */
+	function insertAfter(k: number): void {
+		const id = seq.next();
+		const at = k + 1;
+		ids = [...ids.slice(0, at), id, ...ids.slice(at)];
+		const next = arr.slice();
+		next.splice(at, 0, emptyElement());
+		onCommit(next);
+		focusAfterFlush(id);
+	}
+	function add(): void {
+		insertAfter(ids.length - 1);
+	}
+	function remove(k: number): void {
+		const dropped = ids[k];
+		const next = ids.filter((_, i) => i !== k);
+		ids = next;
+		delete els[dropped];
+		onCommit(arr.filter((_, i) => i !== k));
+		// Focus lands on the element before the removed one, or on the one that slid
+		// into its place; on the add affordance once the list is empty, which is then
+		// the only thing left to hold it. Clicking the remove needs this as much as the
+		// key does: the button under the pointer is part of what it destroys.
+		focusAfterFlush(next[Math.max(k - 1, 0)]);
+	}
+	/** A label click on an array, resolved rather than left to dangle: the FIRST
+	 * element, or the add affordance when the list is empty; which is then the only
+	 * thing there is to land on, and the next thing the user wants anyway. */
+	function activate(): void {
+		if (ids.length === 0) return void addEl?.focus();
+		const first = els[ids[0]];
+		if (first) return first.focus();
+		// The JSON element registers no controller: it is a plain textarea, with
+		// nothing about focusing it that the DOM does not already know.
+		rootEl?.querySelector<HTMLTextAreaElement>('.qm-array-row textarea')?.focus();
+	}
+	/** Focus element `id` after the flush, never in the same tick: a mutation commits
+	 * the array BY VALUE, so the parent re-derives and the row does not exist until
+	 * then. `undefined` is the empty list: the add affordance.
+	 *
+	 * The commit that schedules this can also remove the CARD holding the field, which
+	 * unmounts this component inside the window (core/teardown.ts). */
+	async function focusAfterFlush(id: string | undefined): Promise<void> {
+		if (!(await span.resumes(tick()))) return;
+		if (id === undefined) addEl?.focus();
+		else els[id]?.focus();
+	}
+	/** Whether element `k` reads empty to the user. A text element's committed value
+	 * LAGS the input: a cleared field commits at `change`, not per keystroke
+	 * ({@link TextField}); so the input's own value is the truth; a prose element
+	 * commits every edit, so the committed `Content` is. */
+	function elementEmpty(k: number, target: EventTarget | null): boolean {
+		if (control === 'prose') return !(arr[k] as Content | undefined)?.text;
+		return target instanceof HTMLInputElement && !target.value;
+	}
+	/**
+	 * The element keyboard contract. Both keys ride the element control's own keydown
+	 * (the input's, or the PM view's through `handleDOMEvents`) since neither
+	 * surface is a place a keymap of this component's could sit. The JSON element is
+	 * out: Enter is a newline in a textarea.
+	 */
+	function onElementKey(e: KeyboardEvent, k: number): void {
+		if (control === 'object' || e.isComposing) return;
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			insertAfter(k);
+		} else if (e.key === 'Backspace' && !e.repeat && elementEmpty(k, e.target)) {
+			// Destructive with nothing to undo it, so it takes a deliberate press:
+			// `repeat` is a held key running on past the character it just cleared, and
+			// the emptiness test reads the state BEFORE this keystroke applies; so the
+			// press that empties an element never also removes it.
+			e.preventDefault();
+			remove(k);
+		}
+	}
+</script>
+
+<div
+	bind:this={rootEl}
+	class="qm-array"
+	role="group"
+	aria-labelledby={label != null ? labelId : undefined}
+	aria-describedby={description ? descriptionId : undefined}
+>
+	<div class="qm-array-header">
+		{#if label != null}
+			<FieldLabel
+				{label}
+				id={labelId}
+				{descriptionId}
+				onActivate={activate}
+				{required}
+				{description}
+			/>
+		{:else}
+			<span></span>
+		{/if}
+		<button type="button" class="qm-add-el qm-add-affordance" bind:this={addEl} onclick={add}
+			>{t.strings.arrayAdd}</button
+		>
+	</div>
+	{#each ids as id, k (id)}
+		<div class="qm-array-row">
+			{#if control === 'prose'}
+				<ProseArrayElement
+					bind:this={els[id]}
+					value={(arr[k] ?? emptyElement()) as Content}
+					{plaintext}
+					label={label != null ? `${label} ${k + 1}` : undefined}
+					onChange={(rt) => commitElement(k, rt)}
+					onKey={(e) => onElementKey(e, k)}
+					{onFocusEl}
+				/>
+			{:else if control === 'object'}
+				<textarea
+					class="qm-input qm-json qm-focus-ring"
+					aria-label={label != null ? `${label} ${k + 1}` : undefined}
+					value={JSON.stringify(arr[k] ?? {})}
+					onchange={(e) => {
+						try {
+							commitElement(k, JSON.parse((e.currentTarget as HTMLTextAreaElement).value));
+						} catch {
+							/* keep prior value on invalid JSON */
+						}
+					}}
+				></textarea>
+			{:else}
+				<TextField
+					bind:this={els[id]}
+					value={String(arr[k] ?? '')}
+					label={label != null ? `${label} ${k + 1}` : undefined}
+					onCommit={(v) => commitElement(k, v)}
+					onKey={(e) => onElementKey(e, k)}
+				/>
+			{/if}
+			<button
+				type="button"
+				class="qm-icon-btn qm-remove"
+				title={t.strings.arrayRemove}
+				onclick={() => remove(k)}><Icon name="x" size={14} /></button
+			>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.qm-array {
+		display: flex;
+		flex-direction: column;
+		gap: var(--_qm-space);
+		/* The one field that reaches across the reserved action column: its rows END in
+		   that column, so an element control stops exactly where the scalar beside it
+		   does and the remove never sits over a long value. The reservation is the
+		   FIELD's inset (Field.svelte), so this cancels it wherever the field landed:
+		   its own row, or one track of a shared one. */
+		margin-right: calc(-1 * var(--action-col));
+	}
+	/* The array's first line IS the row's label line: this component owns the label
+	 track (Field.svelte), so the header has to measure what a `.qm-field-label-row`
+	 measures or an array shares a row with a scalar and their labels sit apart. The
+	 label is the same component; what had to give was the add affordance's height,
+	 below. */
+	.qm-array-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--_qm-space-2);
+	}
+	/* The element takes the section's tracks, the remove takes the action column, and
+	 the gutter between them is the section's own: the row is that column's only
+	 occupant, so it reads as one more column of the grid rather than a nested layout.
+	 `minmax(0, …)` because an element control must be allowed to be narrower than its
+	 content: a long unbroken value grows the track otherwise, and the edge with it. */
+	.qm-array-row {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) var(--_qm-tap-min);
+		column-gap: var(--_qm-space-2);
+		align-items: start;
+	}
+	.qm-remove {
+		align-self: center;
+	}
+	/* The JSON element is a `.qm-input` (controls.css): box, focus ring, and all;
+	 what a textarea adds over an input is the face and a floor on its height. */
+	.qm-json {
+		font-family: var(--_qm-font-mono);
+		min-height: 2.5rem;
+	}
+	/* Chrome, hover fill and target come from `.qm-add-affordance` (controls.css);
+	 what is here is this trigger's own type, box and recede ladder. It rests dim like
+	 the card stack's gap triggers and comes up on hover of the FIELD or on focus: one
+	 trigger at the head of a row of controls is found by looking at the array, not by
+	 grazing its first line.
+
+	 THE BOX IS THE LABEL'S LINE BOX, and the target is the `::after`: the same split
+	 the field label's guidance marker takes, for the same reason and one row over.
+	 This is the other affordance that sits IN a line of text rather than in a row of
+	 its own, and the line is a label's, so a
+	 target-sized box would stand the header 8px taller than the `.qm-field-label-row`
+	 beside it in a shared row and put the two labels on different lines. So the family's
+	 floor comes off the box and goes out of flow, unpainted and centred on it: the row
+	 keeps the label's line box, the press keeps the floor. The horizontal edges are the
+	 button's own, the word being already wider than the threshold.
+
+	 The type is the LABEL rung in place of the family's body rung, which the family
+	 invites (controls.css: a caller whose button carries a label restates the rung it
+	 wants). It reads as one more thing on the label line rather than as a control that
+	 wandered up from the row below. */
+	.qm-add-el {
+		position: relative;
+		min-height: 0;
+		padding: 0 var(--_qm-space);
+		font-size: var(--_qm-text-label);
+		opacity: var(--_qm-opacity-idle);
+	}
+	.qm-add-el::after {
+		content: '';
+		position: absolute;
+		inset-inline: 0;
+		top: 50%;
+		height: var(--_qm-tap-min);
+		transform: translateY(-50%);
+	}
+	.qm-array:hover .qm-add-el,
+	.qm-add-el:focus-visible {
+		opacity: 1;
+	}
+	/* Touch has no hover: keep a faint always-on affordance so add stays reachable. */
+	@media (hover: none) {
+		.qm-add-el {
+			opacity: var(--_qm-opacity-muted);
+		}
+	}
+</style>

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

@@ -0,0 +1,24 @@
+import type { QuillFieldSchema } from '@quillmark/wasm';
+import './controls.css';
+interface Props {
+    value: unknown[] | undefined;
+    items: QuillFieldSchema | undefined;
+    /** Accessible-name prefix for the element controls (`label` + 1-based index). */
+    label?: string;
+    /** No-default field → a persistent required `*` on the label. */
+    required?: boolean;
+    /** Schema `description`: the label's help affordance. */
+    description?: string;
+    /** The label's own DOM id. An array is a GROUP (N inputs, no single `for`
+     * target) so the label names the set and each element keeps its indexed
+     * `aria-label`. */
+    labelId?: string;
+    /** Where the description parks, for the group's `aria-describedby`. */
+    descriptionId?: string;
+    onCommit: (arr: unknown[]) => void;
+    /** A prose element gained focus: joins the field in the focus federation. */
+    onFocusEl?: () => void;
+}
+declare const ArrayField: import("svelte").Component<Props, {}, "">;
+type ArrayField = ReturnType<typeof ArrayField>;
+export default ArrayField;