@quillmark/svelte 0.7.0 → 0.7.1

package/dist/core/codec/field.d.ts

@@ -135,13 +135,24 @@ export interface LeafViews {
 /** The canonical empty `Content`: one empty `para` line. The empty a prose
  * leaf (or an array's prose element) seeds from. */
 export declare function emptyContent(): Content;
+/** The naming attributes for the `contenteditable`, shared by every prose leaf
+ * (`ProseValue` takes it too, so an addressed leaf and a by-value one name their
+ * regions by one rule). `aria-labelledby` supersedes `aria-label`: a leaf carrying
+ * both is the ambiguity where implementations disagree about which wins, and
+ * `undefined` is returned whole when a leaf takes neither, since ProseMirror reads
+ * the absence, not an empty object. */
+export declare function proseAttributes(opts: {
+    label?: string;
+    labelledBy?: string;
+    describedBy?: string;
+}): Record<string, string> | undefined;
 export declare function createField(opts: CreateFieldOpts): FieldController;
 /**
  * The prose-leaf plugin stack (VISUAL_EDITOR §Surface): shared by
- * {@link createField} and the array-element inline editor (`ProseArrayElement`),
- * so the two never fork the keymap/plugin ordering. History first, then any
- * leaf-specific plugins (`afterHistory`: the addressed leaf passes its
- * anchor-position plugin; a by-value array element passes none), the
+ * {@link createField} and the by-value inline editor (`ProseValue`), so the two
+ * never fork the keymap/plugin ordering. History first, then any leaf-specific
+ * plugins (`afterHistory`: the addressed leaf passes its anchor-position plugin;
+ * a by-value leaf passes none), the
  * markdown-shorthand input rules, then the field keymap over the base keymap, and
  * last the two that answer to a caret or a selection beside a block: the gap cursor
  * and {@link pastAtomPlugin}.

package/dist/core/codec/field.js

@@ -89,11 +89,13 @@ function opsCommittable(doc, addr) {
     const stored = doc.getStored(addr);
     return stored !== null && typeof stored === 'object';
 }
-/** The naming attributes for the `contenteditable`. `aria-labelledby` supersedes
- * `aria-label`: a leaf carrying both is the ambiguity where implementations
- * disagree about which wins, and `undefined` is returned whole when a leaf takes
- * neither, since ProseMirror reads the absence, not an empty object. */
-function proseAttributes(opts) {
+/** The naming attributes for the `contenteditable`, shared by every prose leaf
+ * (`ProseValue` takes it too, so an addressed leaf and a by-value one name their
+ * regions by one rule). `aria-labelledby` supersedes `aria-label`: a leaf carrying
+ * both is the ambiguity where implementations disagree about which wins, and
+ * `undefined` is returned whole when a leaf takes neither, since ProseMirror reads
+ * the absence, not an empty object. */
+export function proseAttributes(opts) {
     const attrs = {};
     if (opts.labelledBy)
         attrs['aria-labelledby'] = opts.labelledBy;
@@ -386,10 +388,10 @@ export function createField(opts) {
 }
 /**
  * The prose-leaf plugin stack (VISUAL_EDITOR §Surface): shared by
- * {@link createField} and the array-element inline editor (`ProseArrayElement`),
- * so the two never fork the keymap/plugin ordering. History first, then any
- * leaf-specific plugins (`afterHistory`: the addressed leaf passes its
- * anchor-position plugin; a by-value array element passes none), the
+ * {@link createField} and the by-value inline editor (`ProseValue`), so the two
+ * never fork the keymap/plugin ordering. History first, then any leaf-specific
+ * plugins (`afterHistory`: the addressed leaf passes its anchor-position plugin;
+ * a by-value leaf passes none), the
  * markdown-shorthand input rules, then the field keymap over the base keymap, and
  * last the two that answer to a caret or a selection beside a block: the gap cursor
  * and {@link pastAtomPlugin}.

package/dist/core/codec/index.d.ts

@@ -3,7 +3,7 @@ import 'prosemirror-gapcursor/style/gapcursor.css';
 import './prose.css';
 export { rangeAnchor } from './anchor.js';
 export type { RangeAnchor } from './anchor.js';
-export { createField, emptyContent, proseLeafPlugins } from './field.js';
+export { createField, emptyContent, proseAttributes, proseLeafPlugins } from './field.js';
 export type { CreateFieldOpts, FieldController, LeafViews } from './field.js';
 export { DEFAULT_TABLE_STRINGS } from './table-view.js';
 export type { TableChromeStrings } from './table-view.js';

package/dist/core/codec/index.js

@@ -13,7 +13,7 @@ import './prose.css';
 // selection (`visual/FormatPopover.svelte`), so it is reached off-barrel.
 export { rangeAnchor } from './anchor.js';
 // The prose leaf.
-export { createField, emptyContent, proseLeafPlugins } from './field.js';
+export { createField, emptyContent, proseAttributes, proseLeafPlugins } from './field.js';
 // The table island's chrome vocabulary: the visual tier's `strings` set extends it,
 // so the island's wording is overridden beside every other key.
 export { DEFAULT_TABLE_STRINGS } from './table-view.js';

package/dist/visual/ArrayField.svelte

@@ -3,7 +3,7 @@
  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`: `richtext` / `plaintext` → a prose element
- ({@link ProseArrayElement}), `object` → a summary row that opens onto a subform,
+ ({@link ProseValue}), `object` → a summary row that opens onto a subform,
  everything else → a text input. 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
@@ -38,7 +38,7 @@
 	// off-tree, so this component renders standalone too.
 	const t = wording();
 	import { onDestroy, tick } from 'svelte';
-	import type { Content, QuillFieldSchema } from '@quillmark/wasm';
+	import type { Content, PathStep, QuillFieldSchema } from '@quillmark/wasm';
 	import { emptyContent } from '../core/codec/index.js';
 	import { createLifespan } from '../core/teardown.js';
 	import { IdSeq, controlKind } from './structure.js';
@@ -46,7 +46,7 @@
 	import Icon from './icons/Icon.svelte';
 	import TextField from './TextField.svelte';
 	import ObjectField from './ObjectField.svelte';
-	import ProseArrayElement from './ProseArrayElement.svelte';
+	import ProseValue from './ProseValue.svelte';
 	import FieldLabel from './FieldLabel.svelte';
 	import './controls.css';
 
@@ -73,12 +73,14 @@
 		 * properties' own names from, one `-e-<element id>` segment down, so each open
 		 * record's cells carry real `<label for>` pairs like every other control. */
 		idBase?: string;
-		/** Element `i`'s content, decoded by the boundary through the codec `items`
-		 * names (`Field`, `reader.getContentAt`). Asked only for a content-typed
-		 * element: on any other the read is not content and throws. `undefined` for a
-		 * row the stored value does not reach — a slot this control has spliced in and
-		 * whose commit has yet to land, or was refused. */
-		elementContent: (i: number) => Content | undefined;
+		/** The boundary's nested content read, rooted at this field: `path` is a
+		 * `PathStep[]` from the field to the leaf, so `[i]` is element `i` and
+		 * `[i, key]` a content cell of an `object` element's subform (`Field`,
+		 * `reader.getContentAt`). The codec is the leaf's own declared type's. Asked
+		 * only for a content-typed leaf: on any other the read is not content and
+		 * throws. `undefined` for a leaf the stored value does not reach — a slot this
+		 * control has spliced in and whose commit has yet to land, or was refused. */
+		contentAt: (path: PathStep[]) => Content | undefined;
 		onCommit: (arr: unknown[]) => void;
 	}
 	let {
@@ -90,13 +92,13 @@
 		labelId,
 		descriptionId,
 		idBase,
-		elementContent,
+		contentAt,
 		onCommit
 	}: Props = $props();
 
 	// The element control is the item schema's own, with no departure: a content-typed
 	// element mounts the prose leaf its scalar field mounts, reading through
-	// `elementContent` whatever the element rests as. An array declaring no `items`
+	// `contentAt` whatever the element rests as. An array declaring no `items`
 	// has text elements.
 	const control = $derived(items ? controlKind(items) : 'text');
 	const arr = $derived((value ?? []) as unknown[]);
@@ -122,7 +124,7 @@
 	// 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.
+	// is stated on `ProseValue.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
@@ -396,6 +398,7 @@
 							properties={items?.properties}
 							label={label != null ? `${label} ${k + 1}` : undefined}
 							idBase={idBase != null ? `${idBase}-e-${id}` : undefined}
+							contentAt={(path) => contentAt([k, ...path])}
 							onCommit={(obj) => commitElement(k, obj)}
 						/>
 					{/if}
@@ -403,9 +406,9 @@
 			{:else}
 				<div class="qm-array-row">
 					{#if control === 'prose'}
-						<ProseArrayElement
+						<ProseValue
 							bind:this={els[id]}
-							content={() => elementContent(k) ?? emptyContent()}
+							content={() => contentAt([k]) ?? emptyContent()}
 							plaintext={items?.type === 'plaintext'}
 							label={label != null ? `${label} ${k + 1}` : undefined}
 							onChange={(rt) => commitElement(k, rt)}

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

@@ -1,4 +1,4 @@
-import type { Content, QuillFieldSchema } from '@quillmark/wasm';
+import type { Content, PathStep, QuillFieldSchema } from '@quillmark/wasm';
 import './controls.css';
 interface Props {
     value: unknown[] | undefined;
@@ -19,12 +19,14 @@ interface Props {
      * properties' own names from, one `-e-<element id>` segment down, so each open
      * record's cells carry real `<label for>` pairs like every other control. */
     idBase?: string;
-    /** Element `i`'s content, decoded by the boundary through the codec `items`
-     * names (`Field`, `reader.getContentAt`). Asked only for a content-typed
-     * element: on any other the read is not content and throws. `undefined` for a
-     * row the stored value does not reach — a slot this control has spliced in and
-     * whose commit has yet to land, or was refused. */
-    elementContent: (i: number) => Content | undefined;
+    /** The boundary's nested content read, rooted at this field: `path` is a
+     * `PathStep[]` from the field to the leaf, so `[i]` is element `i` and
+     * `[i, key]` a content cell of an `object` element's subform (`Field`,
+     * `reader.getContentAt`). The codec is the leaf's own declared type's. Asked
+     * only for a content-typed leaf: on any other the read is not content and
+     * throws. `undefined` for a leaf the stored value does not reach — a slot this
+     * control has spliced in and whose commit has yet to land, or was refused. */
+    contentAt: (path: PathStep[]) => Content | undefined;
     onCommit: (arr: unknown[]) => void;
 }
 declare const ArrayField: import("svelte").Component<Props, {

package/dist/visual/Card.svelte

@@ -128,9 +128,9 @@
 	const ungrouped = $derived(card.sections.filter((s) => s.group == null));
 	const grouped = $derived(card.sections.filter((s) => s.group != null));
 
-	// A schema that declares no fields still gets a body, and an empty metadata block
-	// draws nothing while the card's gap still counts it twice, standing a rung of dead
-	// space over the body.
+	// A schema that declares no fields still gets a body, and an empty payload block is
+	// worse than none: its two rules land on one y and paint as a single stroke of twice
+	// the width, and the card's gap counts the block twice besides.
 	const hasMeta = $derived(ungrouped.length > 0 || grouped.length > 0);
 
 	// Seeded once from the card's shape. Card is keyed by stable id, so this survives the
@@ -251,7 +251,11 @@
 
 		<div class="qm-card-body">
 			{#if hasMeta}
-				<div class="qm-card-meta" class:qm-meta-bottom={card.hasBody}>
+				<div
+					class="qm-card-meta"
+					class:qm-meta-top={!card.isMain}
+					class:qm-meta-bottom={card.hasBody}
+				>
 					{#each ungrouped as section (section.group ?? '_ungrouped')}
 						<div class="qm-section">
 							{@render sectionFields(section.fields)}
@@ -511,17 +515,31 @@
 		flex-direction: column;
 		gap: var(--_qm-space);
 	}
-	/* The one horizontal the card draws, and it is the one thing a horizontal is for: it
-	 ranks the payload against the body rather than saying what is inside what, which is
-	 the verticals' job (ARCHITECTURE §"A plane is a tone"). Conditional on a body, since
-	 with none it would divide the payload from the card's own edge a rung below it.
+	/* One rung in two places: what a rule insets its own edge by, and what a vertical
+	 reaches past the box it is drawn on. `--_qm-nest` is the distance a stroke stands off
+	 the content it holds — the same one the fields keep off the vertical inline — and a
+	 section's box already spends `--_qm-space` of it capping its own ends, so both spend
+	 the difference. That is what squares the corner: the field stands the same rung off
+	 the rule above it as off the vertical beside it. */
+	.qm-card-meta {
+		--stroke-reach: calc(var(--_qm-nest) - var(--_qm-space));
+	}
+	/* The card's two horizontals, and ranking is the one thing a horizontal is for: they
+	 stand the payload against the title above it and the body below it, where saying what
+	 sits inside what is the verticals' (ARCHITECTURE §"A plane is a tone"). Each is
+	 conditional on what it ranks against: `main` is headerless, and a card with no body
+	 has nothing under the payload to divide it from.
 
-	 The inset stands the rule off the last control at the rung the body sits under it by,
-	 taking the section's own end cap into account: `--_qm-space-2` here, plus that cap,
-	 is the `--_qm-space-3` the card spends between its blocks. */
+	 The inset is the rule's own, so it goes with it: a card drawing one horizontal insets
+	 that end and not the other. The air outside the pair is the `--_qm-space-3` the card
+	 spends between its blocks. */
+	.qm-meta-top {
+		border-top: var(--_qm-border-width) solid var(--_qm-border);
+		padding-top: var(--stroke-reach);
+	}
 	.qm-meta-bottom {
 		border-bottom: var(--_qm-border-width) solid var(--_qm-border);
-		padding-bottom: var(--_qm-space-2);
+		padding-bottom: var(--stroke-reach);
 	}
 	/* A section's share of the boundary between sections: one rung at each end, so two of
 	 them stand three of it apart whichever kind they are (above). The accordion spends the
@@ -577,12 +595,22 @@
 	 On the group rather than on its panel: what the stroke marks is the section, and a
 	 section is its header and what hangs under it. Drawn transparent when closed rather
 	 than absent, so a toggle moves no text — and closed, there is nothing under the header
-	 for it to gather. Its caps are the header's block padding above and the panel's below,
-	 at the rung the ungrouped section spends on both of its own ends. */
+	 for it to gather.
+
+	 The stroke caps at `--_qm-nest`, at both ends and on every section alike. Its box
+	 already spends `--_qm-space` of that — the header's block padding above, the panel's
+	 below, the rung the ungrouped section spends on its own two ends — so the rest is
+	 grown here and handed straight back as margin: the stroke lengthens, and a section
+	 boundary keeps the three rungs it stood at. What the stroke reaches into is the air of
+	 that boundary, or, where the section is the payload's first or last, exactly the inset
+	 its rule took — so it lands on the rule at a corner with nothing drawn longer for it.
+	 One section open at a time, so no two strokes are ever visible to meet in between. */
 	.qm-group {
 		display: flex;
 		flex-direction: column;
 		border-left: var(--_qm-border-width) solid transparent;
+		padding-block: var(--stroke-reach);
+		margin-block: calc(-1 * var(--stroke-reach));
 		transition: border-color var(--_qm-duration-slow) var(--_qm-ease-reverse);
 	}
 	.qm-group.qm-open {
@@ -590,13 +618,13 @@
 	}
 	/* Symmetric vertical padding at the tightest rung that still clears WCAG 2.5.8's
 	 24×24 floor: the header is the whole row, so adjacent labels share one rhythm with no
-	 dead strip outside the button. Horizontal is one rung left and zero right — left,
-	 because at zero the chevron stands on the section's vertical with only the icon box's
-	 own bearing between them, and the glyph's rotation swaps which bearing faces the
-	 stroke; right, because the row is the target and an inset there is target given back.
-	 The rung is the glyph's own and not the nesting step the fields under it take: what
-	 the heading names is the section, so it rides the vertical rather than the column its
-	 fields start on.
+	 dead strip outside the button. Horizontal is the nesting step left and zero right —
+	 left, because the chevron opening the heading starts where the fields under it start,
+	 so everything the section holds stands off its vertical by one rung and the corner the
+	 stroke closes against a rule reads square; right, because the row is the target and an
+	 inset there is target given back. What the glyph gives up by taking the step is the
+	 gutter: at a tighter rung it stands in the clearance itself, with only its own bearing
+	 between ink and stroke, and the rotation swaps which bearing faces which.
 
 	 `font: inherit` because a UA button inherits no face, then the body rung, one step
 	 over the field labels beneath it: at the label rung the two read as one register and
@@ -609,7 +637,7 @@
 		width: 100%;
 		border: none;
 		background: transparent;
-		padding: var(--_qm-space) 0 var(--_qm-space) var(--_qm-space);
+		padding: var(--_qm-space) 0 var(--_qm-space) var(--_qm-nest);
 		font: inherit;
 		font-size: var(--_qm-text-body);
 		font-weight: var(--_qm-weight-mid);

package/dist/visual/Field.svelte

@@ -14,7 +14,15 @@
  `DiagnosticList`, non-gating.
 -->
 <script lang="ts">
-	import type { Document, Quill, Addr, Diagnostic, ResolvedField } from '@quillmark/wasm';
+	import type {
+		Document,
+		Quill,
+		Addr,
+		Content,
+		Diagnostic,
+		PathStep,
+		ResolvedField
+	} from '@quillmark/wasm';
 	import type { EditorErrorHandler } from '../core/errors.js';
 	import type { LeafRegistry } from './leaves.js';
 	import type { FieldModel, FieldSpan } from './structure.js';
@@ -116,6 +124,16 @@
 	// nothing, and silently.
 	const describedBy = $derived(field.description ? domIds.description : undefined);
 
+	/** 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
+	 * under an open element. One door rather than one per depth, since `getContentAt`
+	 * takes the whole path and the walk down is each container prefixing its own step.
+	 * Read per call and never held: a leaf takes its state at mount, and a control asks
+	 * once. */
+	function contentAt(path: PathStep[]): Content | undefined {
+		return quill.reader(doc).getContentAt(addr, path);
+	}
+
 	// ── Focus: one answer, two callers (`leaves.ts`) ─────────────────────────────
 	// A label click and the editor's `focusField`/`setCaret` ask the same question, so
 	// they read the same function and cannot land in different places. The four
@@ -247,6 +265,7 @@
 					id={domIds.control}
 					labelledBy={domIds.label}
 					{describedBy}
+					{contentAt}
 					onCommit={onCommitScalar}
 					{optionAllowed}
 					{enumDisallowed}
@@ -288,7 +307,7 @@
 					labelId={domIds.label}
 					descriptionId={domIds.description}
 					idBase={domIds.control}
-					elementContent={(i) => quill.reader(doc).getContentAt(addr, [i])}
+					{contentAt}
 					onCommit={onCommitScalar}
 				/>
 			{:else if field.control === 'object'}
@@ -300,6 +319,7 @@
 					idBase={domIds.control}
 					labelledBy={domIds.label}
 					{describedBy}
+					{contentAt}
 					onCommit={onCommitScalar}
 				/>
 			{:else}

package/dist/visual/ObjectField.svelte

@@ -1,8 +1,9 @@
 <!--
  An `object` field → a nested subform over `properties` (declaration order),
- committing the whole object by value on any nested change. Scalar properties
- only: a nested prose/array/object property renders a placeholder instead of
- recursing.
+ committing the whole object by value on any nested change. Leaf properties: a
+ scalar draws its own control, a content property mounts the by-value prose leaf
+ ({@link ProseValue}) over the boundary's nested read, and a nested `array`/`object`
+ property renders a placeholder instead of recursing.
 
  The nesting is a vertical at `--_qm-border`, the ladder's last stroke: the card's edge,
  an open section's vertical one `--_qm-nest` in where the field is in one, this one a rung
@@ -16,9 +17,15 @@
  resolved provenance the top-level ghosts read (FIELD_PROVENANCE): `resolve`
  carries no per-property row (an object field resolves as one row whose value is
  the whole object).
+
+ Every caller hands down `contentAt`, which is `reader.getContentAt` with the field
+ already bound: a field-level subform passes the property key through untouched, a
+ variant passes its cell's, and an array's open row prefixes its index. So a cell
+ reads at whatever depth it sits, which nothing here knows.
 -->
 <script lang="ts">
-	import type { QuillFieldSchema } from '@quillmark/wasm';
+	import type { Content, PathStep, QuillFieldSchema } from '@quillmark/wasm';
+	import { emptyContent } from '../core/codec/index.js';
 	import { controlKind, humanize, obliged } from './structure.js';
 	import { wording } from './strings.js';
 	import { propertyDomIds } from './domid.js';
@@ -28,6 +35,7 @@
 	import NumberField from './NumberField.svelte';
 	import BooleanField from './BooleanField.svelte';
 	import DateField from './DateField.svelte';
+	import ProseValue from './ProseValue.svelte';
 
 	interface Props {
 		value: Record<string, unknown> | undefined;
@@ -47,9 +55,16 @@
 		idBase?: string;
 		/** Accessible-name prefix used only on the `aria-label` fallback above. */
 		label?: string;
+		/** The boundary's nested content read, rooted at this subform: `path` is a
+		 * `PathStep[]` from here to the leaf, which the caller prefixes with whatever
+		 * stands between this subform and the field (`reader.getContentAt`). Asked only
+		 * for a content-typed property: on any other the read is not content and throws.
+		 * `undefined` for a property the stored value does not reach. */
+		contentAt: (path: PathStep[]) => Content | undefined;
 		onCommit: (obj: Record<string, unknown>) => void;
 	}
-	let { value, properties, labelledBy, describedBy, idBase, label, onCommit }: Props = $props();
+	let { value, properties, labelledBy, describedBy, idBase, label, contentAt, onCommit }: Props =
+		$props();
 
 	const t = wording();
 	const entries = $derived(Object.entries(properties ?? {}));
@@ -68,26 +83,48 @@
 		`${label != null ? `${label} ` : ''}${title(key, sub)}` +
 		(required(sub) ? ` ${t.strings.fieldRequired}` : '');
 
-	/** Take the caret: the first property's control, a subform having no single control
-	 * of its own to land on. Resolved off the DOM rather than a ref per property: every
-	 * property is a scalar control the DOM already knows how to focus (the date field's
-	 * segments carry `tabindex`, the `literal` separators between them do not), so a
-	 * handle each would be five refs restating document order. An empty or wholly
-	 * unsupported subform lands nothing. */
+	/** The prose cells' handles, keyed by property name — which is stable, a subform
+	 *  drawing its properties by declaration and never by position. A ref only where
+	 *  the DOM cannot answer: a `contenteditable` matches no focusable selector, and
+	 *  focusing the node is not focusing the view ({@link ProseValue.focus}). A scalar
+	 *  control is resolved off the markup, so a handle each would be five refs
+	 *  restating document order.
+	 *
+	 *  `$state` for the binding's sake: `bind:this` into a property of a plain object
+	 *  is a write Svelte cannot track, and it says so once per cell per render
+	 *  (`ArrayField` keeps its element refs the same way). */
+	const proseEls: Record<string, { focus: () => void } | undefined> = $state({});
 	let rootEl = $state<HTMLElement | undefined>();
 	const FOCUSABLE = 'input, select, button, [tabindex]:not([tabindex="-1"])';
+	/** Take the caret: the first property that has somewhere to put it, in document
+	 * order — a subform has no single control of its own to land on, and a property
+	 * standing the unsupported line has none either, so the walk steps past it. An
+	 * empty or wholly unsupported subform lands nothing. */
 	export function focus(): void {
-		rootEl?.querySelector<HTMLElement>(FOCUSABLE)?.focus();
+		for (const cell of propCells()) if (landOn(cell)) return;
 	}
-	/** A label click for the one property `for` cannot reach: the date control, whose
-	 *  focus lives on a segment. Scoped to that property's own cell, so the click lands
-	 *  where the label is rather than on the subform's first control. */
+	/** A label click for the properties `for` cannot reach: the date control, whose
+	 *  focus lives on a segment, and a prose cell, which is a `contenteditable`. Scoped
+	 *  to that property's own cell, so the click lands where the label is rather than on
+	 *  the subform's first control. */
 	function focusProp(key: string): void {
-		// Matched on the dataset: a key is the schema's own string, and spelling one into
-		// a selector needs `CSS.escape`, which the test DOM does not carry.
-		for (const cell of rootEl?.querySelectorAll<HTMLElement>('[data-qm-prop]') ?? []) {
-			if (cell.dataset.qmProp === key) return cell.querySelector<HTMLElement>(FOCUSABLE)?.focus();
+		for (const cell of propCells()) if (cell.dataset.qmProp === key) return void landOn(cell);
+	}
+	// Matched on the dataset: a key is the schema's own string, and spelling one into a
+	// selector needs `CSS.escape`, which the test DOM does not carry.
+	function propCells(): HTMLElement[] {
+		return [...(rootEl?.querySelectorAll<HTMLElement>('[data-qm-prop]') ?? [])];
+	}
+	/** Land in one property's cell, answering whether it took the caret. */
+	function landOn(cell: HTMLElement): boolean {
+		const prose = proseEls[cell.dataset.qmProp ?? ''];
+		if (prose) {
+			prose.focus();
+			return true;
 		}
+		const el = cell.querySelector<HTMLElement>(FOCUSABLE);
+		el?.focus();
+		return !!el;
 	}
 
 	function commitProp(key: string, v: unknown): void {
@@ -117,8 +154,8 @@
 		{@const named = ids ? undefined : fallbackName(key, sub)}
 		{@const describes = sub.description && ids ? ids.description : undefined}
 		<!-- `for` reaches the four labelable controls; the date field's focus lives on a
-		     segment, so it takes the click handoff instead, exactly as `Field` does one
-		     level up. -->
+		     segment and a prose cell is a `contenteditable`, so those take the click
+		     handoff instead, exactly as `Field` does one level up. -->
 		{@const labelable =
 			kind === 'text' || kind === 'enum' || kind === 'number' || kind === 'boolean'}
 		<div class="qm-object-prop" data-qm-prop={key}>
@@ -179,6 +216,18 @@
 					placeholder={sub.default != null ? String(sub.default) : undefined}
 					onCommit={(v) => commitProp(key, v)}
 				/>
+			{:else if kind === 'prose'}
+				<!-- Keyed by name, so a re-derive of the container this cell commits whole
+				     leaves the leaf mounted and the caret in it. -->
+				<ProseValue
+					bind:this={proseEls[key]}
+					content={() => contentAt([key]) ?? emptyContent()}
+					plaintext={sub.type === 'plaintext'}
+					label={named}
+					labelledBy={ids?.label}
+					describedBy={describes}
+					onChange={(rt) => commitProp(key, rt)}
+				/>
 			{:else}
 				<!-- A property the subform does not recurse into. What it says is what the
 				     user can do about it, which is edit the field from the source surface;

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

@@ -1,4 +1,4 @@
-import type { QuillFieldSchema } from '@quillmark/wasm';
+import type { Content, PathStep, QuillFieldSchema } from '@quillmark/wasm';
 interface Props {
     value: Record<string, unknown> | undefined;
     properties: Record<string, QuillFieldSchema> | undefined;
@@ -17,6 +17,12 @@ interface Props {
     idBase?: string;
     /** Accessible-name prefix used only on the `aria-label` fallback above. */
     label?: string;
+    /** The boundary's nested content read, rooted at this subform: `path` is a
+     * `PathStep[]` from here to the leaf, which the caller prefixes with whatever
+     * stands between this subform and the field (`reader.getContentAt`). Asked only
+     * for a content-typed property: on any other the read is not content and throws.
+     * `undefined` for a property the stored value does not reach. */
+    contentAt: (path: PathStep[]) => Content | undefined;
     onCommit: (obj: Record<string, unknown>) => void;
 }
 declare const ObjectField: import("svelte").Component<Props, {

package/dist/visual/ProseValue.svelte

@@ -0,0 +1,165 @@
+<!--
+ A prose leaf the parent commits by value: an element of a `richtext` (fixture
+ `keywords`) or `plaintext` (`errata`) array, and a content cell of a subform — an
+ `object`'s property, a variant's cell ({@link ObjectField}). None of them is
+ `applyChange`-addressable: `Addr.field` is a flat name, so `keywords[0]` and
+ `contact.note` have no op address. So this is not a `createField` leaf: it mounts a
+ minimal PM view over the codec's decode/encode + inline schema, and on every edit
+ hands the re-encoded `Content` up to the parent — {@link ArrayField}, which commits
+ the whole array, or {@link ObjectField}, which commits the whole container
+ (`writer.set(field, next)`). Anchors inside a value are dropped on that write:
+ acceptable for inline refs. Mounts once per stable key (an element's session id, a
+ property's name), so the parent's re-derive leaves the caret where it is.
+
+ The content is read, not passed: `reader.getContentAt(addr, path)` decodes through
+ the codec the leaf's own declared type names, so what it rests as — the content
+ object, a `plaintext` literal, the authored string a transport door left — stops
+ being the row's or the cell's business. Read once, at mount, since that is when this
+ leaf takes its state.
+
+ One textblock wherever it mounts, no islands and no slash menu. `plaintext` is
+ inline at the codec, so that is the declared shape for every plaintext leaf; a block
+ `richtext` is held one rung narrower than it declares, having no room for a second
+ paragraph in the figure a repeater row and a subform cell draw.
+-->
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { EditorState, Selection } from 'prosemirror-state';
+	import { EditorView } from 'prosemirror-view';
+	import {
+		decode,
+		pmToContent,
+		inlineSchema,
+		plaintextSchema,
+		proseAttributes,
+		proseLeafPlugins,
+		buildLineIndex,
+		usvToPM
+	} from '../core/codec/index.js';
+	import './controls.css';
+	import type { Content } from '@quillmark/wasm';
+
+	interface Props {
+		/** This leaf's content, read at mount (the parent's boundary read). A thunk
+		 * rather than a value: the parent re-derives per revision and this leaf takes
+		 * its state once, so a value prop would be a boundary read per leaf per render,
+		 * all but one of them discarded. */
+		content: () => Content;
+		/** The mark-free schema (a `plaintext` leaf): literal text, no formatting,
+		 * exactly as the scalar field of that type mounts. */
+		plaintext?: boolean;
+		/** Accessible name for the editable region, where nothing else names it: an
+		 * array has no per-element label. A cell with a label element takes
+		 * `labelledBy`. */
+		label?: string;
+		/** The label's own id → `aria-labelledby`. `for` cannot reach a
+		 * `contenteditable`, so a subform cell's label associates the other way and
+		 * hands its click back through {@link focus}. */
+		labelledBy?: string;
+		/** The parked `description` (FieldLabel) → `aria-describedby`. */
+		describedBy?: string;
+		onChange: (rt: Content) => void;
+		/** Raw keydown, for a container whose own keys run through this leaf: the
+		 * array repeater's Enter/Backspace (`ArrayField`). Fires before the view's own
+		 * keymap, so the state it reads is the one this keystroke has yet to change. */
+		onKey?: (e: KeyboardEvent) => void;
+	}
+	let {
+		content,
+		plaintext = false,
+		label,
+		labelledBy,
+		describedBy,
+		onChange,
+		onKey
+	}: Props = $props();
+
+	let containerEl: HTMLDivElement | undefined = $state();
+	let view: EditorView | undefined;
+	/** Take the caret: what a parent placing focus on this leaf calls. The view's
+	 * focus, not the element's: a PM view restores its selection, where a bare DOM
+	 * focus on a contenteditable leaves the caret unplaced. And the reveal beside it,
+	 * since PM's focus prevents the scroll a `string` element's input takes by
+	 * default — an array whose two item types revealed differently is one row of it
+	 * landing off screen. */
+	export function focus(): void {
+		if (!view) return;
+		view.focus();
+		view.dom.scrollIntoView({ block: 'nearest' });
+	}
+	/** Take the caret to USV `pos` in this leaf's own content: what a landing on an
+	 * element address resolves to when the compile answered a cluster-exact offset
+	 * (`leaves.ts`). `createField`'s body over the view this component owns.
+	 *
+	 * The index is built here rather than held: a landing is a discrete act, and one
+	 * doc walk per click is cheaper than a cache to invalidate per keystroke. `usvToPM`
+	 * clamps, so an offset past a value the compile has moved on from lands the end.
+	 *
+	 * `Selection.near`, not `TextSelection.create`: the mapped position can be
+	 * non-inline. Focus first, then the caret, flagged for scroll — the order and the
+	 * reasons are `FieldController.setCaret`'s (`codec/field.ts`). */
+	export function setCaret(pos: number): void {
+		if (!view) return;
+		const pm = usvToPM(buildLineIndex(view.state.doc), pos);
+		const sel = Selection.near(view.state.doc.resolve(pm));
+		view.focus();
+		view.dispatch(view.state.tr.setSelection(sel).scrollIntoView());
+	}
+
+	onMount(() => {
+		if (!containerEl) return;
+		// An inline, value-by-value leaf: the same keymap and plugin stack a
+		// `createField` leaf mounts (shared `proseLeafPlugins`), minus the
+		// anchor-position plugin (anchors are dropped on the parent's value write, per
+		// the header). Its own `dispatchTransaction` hands `Content` up.
+		//
+		// The schema is the declared type's, as `createField` picks it: `plaintext`
+		// declares no mark types, so there is nothing to toggle, to paste in, or to
+		// mint a shorthand with.
+		const schema = plaintext ? plaintextSchema : inlineSchema;
+		const pmDoc = decode(content(), schema);
+		const state = EditorState.create({
+			doc: pmDoc,
+			plugins: proseLeafPlugins(schema, { inline: true })
+		});
+		const mounted = new EditorView(containerEl, {
+			state,
+			// Which of `aria-label` / `aria-labelledby` wins is the codec's one answer
+			// (`proseAttributes`), so a cell carrying a label element and a row carrying
+			// none cannot name their regions by different rules.
+			attributes: proseAttributes({ label, labelledBy, describedBy }),
+			dispatchTransaction(tr) {
+				const next = mounted.state.apply(tr);
+				mounted.updateState(next);
+				if (tr.docChanged) onChange(pmToContent(next.doc));
+			},
+			handleDOMEvents: {
+				keydown: (_v, e) => {
+					onKey?.(e);
+					return false;
+				}
+			}
+		});
+		view = mounted;
+		return () => {
+			view = undefined;
+			mounted.destroy();
+		};
+	});
+</script>
+
+<!-- `.qm-control-box` (controls.css) is the whole box, so an array of `richtext` and
+ an array of `string` render rows of equal height, and a subform's prose cell measures
+ like the text cell beside it. No floor: the reset in `core/codec/prose.css` makes one
+ line of prose measure one line. Width is the row's or the cell's to give: the leaf
+ fills the track it is placed in. -->
+<div bind:this={containerEl} class="qm-prose-value qm-control-box qm-focus-ring-within"></div>
+
+<style>
+	/* Caret-primary, matching ProseField: the contenteditable's own outline is
+	   dropped and the ring rides the wrapper (`qm-focus-ring-within`,
+	   controls.css), which is where the box is. */
+	.qm-prose-value :global(.ProseMirror) {
+		outline: none;
+	}
+</style>

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

@@ -0,0 +1,33 @@
+import './controls.css';
+import type { Content } from '@quillmark/wasm';
+interface Props {
+    /** This leaf's content, read at mount (the parent's boundary read). A thunk
+     * rather than a value: the parent re-derives per revision and this leaf takes
+     * its state once, so a value prop would be a boundary read per leaf per render,
+     * all but one of them discarded. */
+    content: () => Content;
+    /** The mark-free schema (a `plaintext` leaf): literal text, no formatting,
+     * exactly as the scalar field of that type mounts. */
+    plaintext?: boolean;
+    /** Accessible name for the editable region, where nothing else names it: an
+     * array has no per-element label. A cell with a label element takes
+     * `labelledBy`. */
+    label?: string;
+    /** The label's own id → `aria-labelledby`. `for` cannot reach a
+     * `contenteditable`, so a subform cell's label associates the other way and
+     * hands its click back through {@link focus}. */
+    labelledBy?: string;
+    /** The parked `description` (FieldLabel) → `aria-describedby`. */
+    describedBy?: string;
+    onChange: (rt: Content) => void;
+    /** Raw keydown, for a container whose own keys run through this leaf: the
+     * array repeater's Enter/Backspace (`ArrayField`). Fires before the view's own
+     * keymap, so the state it reads is the one this keystroke has yet to change. */
+    onKey?: (e: KeyboardEvent) => void;
+}
+declare const ProseValue: import("svelte").Component<Props, {
+    focus: () => void;
+    setCaret: (pos: number) => void;
+}, "">;
+type ProseValue = ReturnType<typeof ProseValue>;
+export default ProseValue;

package/dist/visual/VariantField.svelte

@@ -4,14 +4,16 @@
  a container, `{value: <member>, …that member's fields}`, and commits whole: it is one
  cell to `Addr`, so there is no per-cell write address.
 
- The cells are {@link ObjectField}, which already draws a scalar field set keyed by
+ The cells are {@link ObjectField}, which already draws a leaf field set keyed by
  name over a container its parent commits by value. It takes the whole container as its
  `value` and the world's declaration as its `properties`, so what it hands back is the
  container with one cell written — and cells outside the drawn world ride through
- untouched rather than needing to be merged back.
+ 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.
 -->
 <script lang="ts">
-	import type { QuillFieldSchema } from '@quillmark/wasm';
+	import type { Content, PathStep, QuillFieldSchema } from '@quillmark/wasm';
 	import EnumField from './EnumField.svelte';
 	import ObjectField from './ObjectField.svelte';
 	import {
@@ -34,6 +36,10 @@
 		id?: string;
 		labelledBy?: string;
 		describedBy?: string;
+		/** The boundary's nested content read for this field, which the cells take
+		 * unprefixed: a variant's cell is one key in from the container it rests as, so
+		 * a `plaintext` cell's path is its own name ({@link ObjectField}). */
+		contentAt: (path: PathStep[]) => Content | undefined;
 		onCommit: (v: Record<string, unknown> | undefined) => void;
 		optionAllowed?: (value: string) => boolean;
 		enumDisallowed?: 'hide' | 'disable';
@@ -46,6 +52,7 @@
 		id,
 		labelledBy,
 		describedBy,
+		contentAt,
 		onCommit,
 		optionAllowed,
 		enumDisallowed
@@ -80,6 +87,7 @@
 				idBase={id}
 				{labelledBy}
 				{describedBy}
+				{contentAt}
 				onCommit={(obj) => onCommit(obj)}
 			/>
 		{/key}

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

@@ -1,4 +1,4 @@
-import type { QuillFieldSchema } from '@quillmark/wasm';
+import type { Content, PathStep, QuillFieldSchema } from '@quillmark/wasm';
 interface Props {
     /** The stored container, or undefined while the field is unset. */
     value: Record<string, unknown> | undefined;
@@ -12,6 +12,10 @@ interface Props {
     id?: string;
     labelledBy?: string;
     describedBy?: string;
+    /** The boundary's nested content read for this field, which the cells take
+     * unprefixed: a variant's cell is one key in from the container it rests as, so
+     * a `plaintext` cell's path is its own name ({@link ObjectField}). */
+    contentAt: (path: PathStep[]) => Content | undefined;
     onCommit: (v: Record<string, unknown> | undefined) => void;
     optionAllowed?: (value: string) => boolean;
     enumDisallowed?: 'hide' | 'disable';

package/dist/visual/strings.d.ts

@@ -25,9 +25,10 @@ export interface VisualStrings extends TableChromeStrings, SlashStrings {
      *  ghosts ({@link EnumField}). */
     enumUnsetTag: string;
     /**
-     * What stands where a subform declines to recurse (a nested prose / array /
-     * object property), and where to edit that property instead. The whole sentence,
-     * since a translator orders the kind within it.
+     * What stands where a subform declines to recurse — a nested `array` or `object`
+     * property, whose own figure would nest a field past the depth this one draws —
+     * and where to edit that property instead. The whole sentence, since a translator
+     * orders the kind within it.
      */
     nestedUnsupported: (kind: string) => string;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@quillmark/svelte",
-	"version": "0.7.0",
+	"version": "0.7.1",
 	"description": "Editor, live-preview and source surfaces over a Quillmark WASM session.",
 	"repository": {
 		"type": "git",
@@ -66,7 +66,7 @@
 		"check": "svelte-check --tsconfig ./tsconfig.json"
 	},
 	"peerDependencies": {
-		"@quillmark/wasm": ">=0.108.0-0",
+		"@quillmark/wasm": ">=0.108.1-0",
 		"svelte": "^5.0.0"
 	},
 	"dependencies": {

package/dist/visual/ProseArrayElement.svelte

@@ -1,139 +0,0 @@
-<!--
- One element of an array of `richtext` (fixture `keywords`) or `plaintext`
- (`errata`). Array elements are not `applyChange`-addressable: `Addr.field` is a
- flat name, so `keywords[0]` has no op address. So
- this is not a `createField` leaf: it mounts a minimal PM view over the codec's
- decode/encode + inline schema, and on every edit hands the re-encoded
- `Content` up to the parent {@link ArrayField}, which commits the whole array
- by value (`writer.set(field, arrayWithElementReplaced)`). Anchors within an
- element are dropped on that value write: acceptable for inline refs. Mounts
- once per stable element id (no reset on the parent's re-derive).
-
- The content is read, not passed: `reader.getContentAt(addr, [k])` decodes an
- element through the codec its `items` type declares, so what the element rests
- as — the content object, a `plaintext` literal, the authored string a transport
- door left — stops being this row's business. Read once, at mount, since that is
- when this leaf takes its state.
--->
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { EditorState, Selection } from 'prosemirror-state';
-	import { EditorView } from 'prosemirror-view';
-	import {
-		decode,
-		pmToContent,
-		inlineSchema,
-		plaintextSchema,
-		proseLeafPlugins,
-		buildLineIndex,
-		usvToPM
-	} from '../core/codec/index.js';
-	import './controls.css';
-	import type { Content } from '@quillmark/wasm';
-
-	interface Props {
-		/** This element's content, read at mount (`ArrayField`, through the boundary's
-		 * element read). A thunk rather than a value: the parent re-derives per
-		 * revision and this leaf takes its state once, so a value prop would be a
-		 * boundary read per row per render, all but one of them discarded. */
-		content: () => Content;
-		/** The mark-free schema (a `plaintext` item): literal text, no formatting,
-		 * exactly as the scalar field of that type mounts. */
-		plaintext?: boolean;
-		/** Accessible name for the editable region (the array has no per-element label). */
-		label?: string;
-		onChange: (rt: Content) => void;
-		/** Raw keydown, for a container whose own keys run through this element: the
-		 * array repeater's Enter/Backspace (`ArrayField`). Fires before the view's own
-		 * keymap, so the state it reads is the one this keystroke has yet to change. */
-		onKey?: (e: KeyboardEvent) => void;
-	}
-	let { content, plaintext = false, label, onChange, onKey }: Props = $props();
-
-	let containerEl: HTMLDivElement | undefined = $state();
-	let view: EditorView | undefined;
-	/** Take the caret: what a parent placing focus on this element calls. The view's
-	 * focus, not the element's: a PM view restores its selection, where a bare DOM
-	 * focus on a contenteditable leaves the caret unplaced. And the reveal beside it,
-	 * since PM's focus prevents the scroll a `string` element's input takes by
-	 * default — an array whose two item types revealed differently is one row of it
-	 * landing off screen. */
-	export function focus(): void {
-		if (!view) return;
-		view.focus();
-		view.dom.scrollIntoView({ block: 'nearest' });
-	}
-	/** Take the caret to USV `pos` in this element's own content: what a landing on an
-	 * element address resolves to when the compile answered a cluster-exact offset
-	 * (`leaves.ts`). `createField`'s body over the view this component owns.
-	 *
-	 * The index is built here rather than held: a landing is a discrete act, and one
-	 * doc walk per click is cheaper than a cache to invalidate per keystroke. `usvToPM`
-	 * clamps, so an offset past a value the compile has moved on from lands the end.
-	 *
-	 * `Selection.near`, not `TextSelection.create`: the mapped position can be
-	 * non-inline. Focus first, then the caret, flagged for scroll — the order and the
-	 * reasons are `FieldController.setCaret`'s (`codec/field.ts`). */
-	export function setCaret(pos: number): void {
-		if (!view) return;
-		const pm = usvToPM(buildLineIndex(view.state.doc), pos);
-		const sel = Selection.near(view.state.doc.resolve(pm));
-		view.focus();
-		view.dispatch(view.state.tr.setSelection(sel).scrollIntoView());
-	}
-
-	onMount(() => {
-		if (!containerEl) return;
-		// An array element is an inline, value-by-value leaf: the same keymap and
-		// plugin stack a `createField` leaf mounts (shared `proseLeafPlugins`), minus
-		// the anchor-position plugin (element anchors are dropped on the array's value
-		// write, per the header). Its own `dispatchTransaction` hands `Content` up.
-		//
-		// The schema is the declared type's, as `createField` picks it: `plaintext`
-		// declares no mark types, so there is nothing to toggle, to paste in, or to
-		// mint a shorthand with.
-		const schema = plaintext ? plaintextSchema : inlineSchema;
-		const pmDoc = decode(content(), schema);
-		const state = EditorState.create({
-			doc: pmDoc,
-			plugins: proseLeafPlugins(schema, { inline: true })
-		});
-		const mounted = new EditorView(containerEl, {
-			state,
-			// Names the `contenteditable` for assistive tech (the array row has no
-			// label element to associate).
-			attributes: label ? { 'aria-label': label } : undefined,
-			dispatchTransaction(tr) {
-				const next = mounted.state.apply(tr);
-				mounted.updateState(next);
-				if (tr.docChanged) onChange(pmToContent(next.doc));
-			},
-			handleDOMEvents: {
-				keydown: (_v, e) => {
-					onKey?.(e);
-					return false;
-				}
-			}
-		});
-		view = mounted;
-		return () => {
-			view = undefined;
-			mounted.destroy();
-		};
-	});
-</script>
-
-<!-- `.qm-control-box` (controls.css) is the whole box, so an array of `richtext` and
- an array of `string` render rows of equal height. No floor: the reset in
- `core/codec/prose.css` makes one line of prose measure one line. Width is the
- row's to give: the element fills the track it is placed in (`ArrayField`). -->
-<div bind:this={containerEl} class="qm-array-prose qm-control-box qm-focus-ring-within"></div>
-
-<style>
-	/* Caret-primary, matching ProseField: the contenteditable's own outline is
-	   dropped and the ring rides the wrapper (`qm-focus-ring-within`,
-	   controls.css), which is where the box is. */
-	.qm-array-prose :global(.ProseMirror) {
-		outline: none;
-	}
-</style>

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

@@ -1,25 +0,0 @@
-import './controls.css';
-import type { Content } from '@quillmark/wasm';
-interface Props {
-    /** This element's content, read at mount (`ArrayField`, through the boundary's
-     * element read). A thunk rather than a value: the parent re-derives per
-     * revision and this leaf takes its state once, so a value prop would be a
-     * boundary read per row per render, all but one of them discarded. */
-    content: () => Content;
-    /** The mark-free schema (a `plaintext` item): literal text, no formatting,
-     * exactly as the scalar field of that type mounts. */
-    plaintext?: boolean;
-    /** Accessible name for the editable region (the array has no per-element label). */
-    label?: string;
-    onChange: (rt: Content) => void;
-    /** Raw keydown, for a container whose own keys run through this element: the
-     * array repeater's Enter/Backspace (`ArrayField`). Fires before the view's own
-     * keymap, so the state it reads is the one this keystroke has yet to change. */
-    onKey?: (e: KeyboardEvent) => void;
-}
-declare const ProseArrayElement: import("svelte").Component<Props, {
-    focus: () => void;
-    setCaret: (pos: number) => void;
-}, "">;
-type ProseArrayElement = ReturnType<typeof ProseArrayElement>;
-export default ProseArrayElement;