@quillmark/svelte 0.6.0 → 0.7.1

package/dist/visual/ObjectField.svelte

@@ -1,33 +1,31 @@
 <!--
  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 band: two full-width horizontals at `--_qm-border`, the figure the
- card draws around its own metadata (`.qm-meta-top` / `.qm-meta-bottom`) one octave
- down. Nothing insets, so a property's control keeps the card's left and right columns
- exactly as a field's does, and the field's own label caps the band from outside it —
- name, rule under the name, content, closing rule.
+ 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
+ further, the properties a rung inside it (ARCHITECTURE §"A plane is a tone").
 
- That absent inset is also what puts the properties on the section's own column tracks
- (below), so a subform's cells share edges with the fields above them rather than
- keeping a rhythm of their own.
-
- Which edges draw is {@link Props.edges}, and the rule is that a boundary is stated
- once: where a box already sits against the subform, that box IS the boundary and a
- stroke under it would say so twice. So a field-level subform takes the band, and a
- subform hanging off a control — a variant's cells under their discriminant, an
- array element's properties under its summary row — takes the closing rule alone.
- Sometimes two strokes and sometimes one: the open figure the card's bracket is.
+ One figure wherever it mounts: a variant's cells under their discriminant and an array
+ element's properties under its summary row sit at the depth a field-level subform sits
+ at, and the box above them states position rather than depth.
 
  A property's ghosted `default:` is the static schema `sub.default`, not the
  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';
@@ -37,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;
@@ -56,20 +55,16 @@
 		idBase?: string;
 		/** Accessible-name prefix used only on the `aria-label` fallback above. */
 		label?: string;
-		/** Which strokes the subform draws; see the note above. */
-		edges?: 'band' | 'close';
+		/** 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,
-		edges = 'band',
-		onCommit
-	}: Props = $props();
+	let { value, properties, labelledBy, describedBy, idBase, label, contentAt, onCommit }: Props =
+		$props();
 
 	const t = wording();
 	const entries = $derived(Object.entries(properties ?? {}));
@@ -88,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 {
@@ -127,7 +144,6 @@
 <div
 	bind:this={rootEl}
 	class="qm-object"
-	class:close={edges === 'close'}
 	role="group"
 	aria-labelledby={labelledBy}
 	aria-describedby={describedBy}
@@ -138,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}>
@@ -200,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;
@@ -211,46 +239,38 @@
 </div>
 
 <style>
-	/* The band. `border-block` draws both strokes as one declaration, which is what
-	   makes the figure symmetric by construction rather than by two lines agreeing;
-	   `padding-block` at the same rung on both sides is the other half of that.
+	/* The vertical and the rung between it and the properties, `--_qm-nest` being the step
+	   the card and the section hold too.
 
 	   `--_qm-border` and not `--_qm-border-faint`: this is the stroke that structures
-	   (ARCHITECTURE §"A plane is a tone"), the one the metadata bracket and the open
-	   section's vertical read. `faint` separates without structuring — a table's
-	   interior lines under a frame that is doing the structuring — which is the other
-	   job.
+	   (ARCHITECTURE §"A plane is a tone"), the one the card's edge and the section's
+	   vertical read. `faint` separates without structuring — a table's interior lines
+	   under a frame that is doing the structuring — which is the other job.
 
-	   The columns are the section's, arrived at by arithmetic rather than by `subgrid`:
-	   the band insets nothing horizontally, so this box spans exactly what `.qm-fields`
-	   spans, and equal tracks at the same count over the same width with the same column
-	   gap fall on the same edges. `subgrid` would want the tracks chained through the
-	   three wrappers between the section grid and here (`Field.svelte`), none of which is
-	   a grid. `--cols` inherits instead, so the container query stepping the section's
-	   capacity steps the subform's with it — no second query container, no second set of
-	   rungs, nothing measured. */
+	   `padding-block` is the stroke's end caps, the same rung and the same reason as a
+	   section's (`Card.svelte`). A cap and not a leading gap: what stands the subform off
+	   the label or the box above it is still that stacker's own.
+
+	   The tracks are the section's count over the subform's own width — `--cols` inherits,
+	   so the container query stepping the section's capacity steps this with it, and there
+	   is no second query container and nothing measured. The edges are not the section's:
+	   the inset is the nesting, and a cell lining up with the field above it would claim a
+	   depth it is not at. */
 	.qm-object {
 		display: grid;
 		grid-template-columns: repeat(var(--cols), 1fr);
 		gap: var(--_qm-space-2);
-		border-block: var(--_qm-border-width) solid var(--_qm-border);
-		padding-block: var(--_qm-space-2);
-	}
-	/* Hanging off a control (a variant's discriminant, an array element's summary row):
-	   that box is the top boundary already, and a stroke under it would state the
-	   boundary twice. The closing rule is not optional in the same breath — without it
-	   the properties float between the box above and whatever follows. */
-	.qm-object.close {
-		border-block-start: none;
-		padding-block-start: 0;
+		border-inline-start: var(--_qm-border-width) solid var(--_qm-border);
+		padding-inline-start: var(--_qm-nest);
+		padding-block: var(--_qm-space);
 	}
 	/* A property measures like a field: two tracks over the subform's own rows, so a
 	   label wrapping in one column leaves its control on the row's baseline rather than a
 	   line below it — `Field.svelte`'s rule for a row-sharing field, one level in. The
 	   tracks are this grid's own; the section's belong to the fields.
 
-	   `min-width: 0` is what holds the arithmetic above: a property overflowing its `1fr`
-	   grows the track, and the subform's edges leave the section's with it. */
+	   `min-width: 0` because a property overflowing its `1fr` grows the track, and the
+	   subform with it, past the field that holds it. */
 	.qm-object-prop {
 		display: grid;
 		grid-row: span 2;

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,8 +17,12 @@ interface Props {
     idBase?: string;
     /** Accessible-name prefix used only on the `aria-label` fallback above. */
     label?: string;
-    /** Which strokes the subform draws; see the note above. */
-    edges?: 'band' | 'close';
+    /** 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/SlashMenu.svelte

@@ -72,8 +72,15 @@
 		     edge under the character that opened the menu, and stays there as the query is
 		     typed. Zero offset, because a gap reads as a surface floating near the caret
 		     rather than one growing out of it. -->
+		<!-- The boundary is the root the surface portals into, the box that clips it where
+		     the consumer scrolls one ({@link FormatPopover} states it in full). It is also
+		     what keeps the row scroll above inside the list: `nearest` scrolls any ancestor
+		     the row is not visible in, and a surface raised into room the pane clips leaves
+		     the pane one of them — so the scroll moves the pane, and with it the caret this
+		     menu is anchored to. -->
 		<Popover.Content
 			customAnchor={menu?.anchor ?? null}
+			collisionBoundary={portalTarget ?? []}
 			side="bottom"
 			align="start"
 			trapFocus={false}

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
@@ -73,8 +80,6 @@
 	     flip would carry it between them. -->
 	{#if cells}
 		{#key member}
-			<!-- `close`: the discriminant's box directly above IS the cells' top boundary,
-			     so the band's opening stroke would state it twice. -->
 			<ObjectField
 				value={value ?? {}}
 				properties={cells}
@@ -82,7 +87,7 @@
 				idBase={id}
 				{labelledBy}
 				{describedBy}
-				edges="close"
+				{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/VisualEditorInner.svelte

@@ -66,7 +66,7 @@
 	} from './diagnostics.js';
 	import { fieldDomIds, groupPanelId } from './domid.js';
 	import { createLeafRegistry, type FieldControl } from './leaves.js';
-	import { reorder } from './motion.js';
+	import { reorder, reorderTrips } from './motion.js';
 	import { tipsChannel } from './tips.js';
 	import { patchEditorExt } from './ext.js';
 	import Card from './Card.svelte';
@@ -185,6 +185,9 @@
 	};
 	let mainCard = $state<CardHandle | undefined>(undefined);
 	let cardRefs = $state<(CardHandle | undefined)[]>([]);
+	/** The slot each card sits in: what a reorder animates, and so what the post-mutation
+	 *  scroll waits on before it measures anything. */
+	let slotEls = $state<(HTMLElement | undefined)[]>([]);
 	/** The stack's own element: it carries `data-qm-root`, so it is what the kind
 	 * menu portals into, the way each leaf's surface resolves its nearest root. */
 	let rootEl = $state<HTMLElement | undefined>(undefined);
@@ -327,16 +330,29 @@
 	 * on a document of any length an insert lands off-screen, and a
 	 * viewport that does not follow reads as nothing happening.
 	 *
-	 * Coalesced on a single pending id: two quick adds resolve their `tick()` in
-	 * order, the earlier one sees a newer pending id and drops out, so one smooth
-	 * scroll runs to the last card rather than two fighting over the same scroller.
+	 * Coalesced on the last call: each takes a ticket and a continuation holding a stale
+	 * one drops out, so two mutations inside a tick run one smooth scroll to the last of
+	 * them rather than two fighting over the same scroller. A ticket rather than the id
+	 * being scrolled to, because an insert and a move of the *same* card are two calls
+	 * naming one id, on different terms — `center` against `nearest`.
 	 */
-	let pendingScrollId: string | null = null;
+	let scrollTicket = 0;
 	async function scrollCardIntoView(id: string, block: ScrollLogicalPosition): Promise<void> {
-		pendingScrollId = id;
+		const ticket = ++scrollTicket;
 		if (!(await span.resumes(tick()))) return;
-		if (pendingScrollId !== id) return;
-		pendingScrollId = null;
+		if (ticket !== scrollTicket) return;
+		// A reorder is running by this flush and holds the slot at its pre-move position
+		// for the length of the trip (`motion.ts`), so asking now measures the box the
+		// card is leaving — where a `nearest` would take the stack back to for the card
+		// that moved in from off screen. The trip says the card moved; the scroll follows
+		// it to where it landed. `allSettled`, because a second reorder cancels the first
+		// and a cancelled run rejects.
+		const slot = slotEls[cardIndexOf(id)];
+		const trips = slot ? reorderTrips(slot) : [];
+		if (trips.length) {
+			if (!(await span.resumes(Promise.allSettled(trips.map((trip) => trip.finished))))) return;
+			if (ticket !== scrollTicket) return;
+		}
 		const i = cardIndexOf(id);
 		if (i >= 0) cardRefs[i]?.scrollIntoViewCard(block);
 	}
@@ -813,7 +829,7 @@
 	 rather than being slid across. It is also the shape `animate:` asks for, being the
 	 keyed block's only child. -->
 	{#each model.cards as c, i (c.id)}
-		<div class="qm-card-slot" animate:reorder={isReordering}>
+		<div class="qm-card-slot" bind:this={slotEls[i]} animate:reorder={isReordering}>
 			<Card
 				bind:this={cardRefs[i]}
 				card={c}
@@ -874,10 +890,12 @@
 						>{marked ? merged.addCard : ''}</DropdownMenu.Trigger
 					>
 					<DropdownMenu.Portal to={rootEl}>
-						<DropdownMenu.Content sideOffset={4}>
+						<DropdownMenu.Content collisionBoundary={rootEl ?? []} sideOffset={4}>
 							<!-- Portalled out of the row but into the stack's root, and carrying the
 						     marker itself: floating is still a detached subtree to the
-						     derivation, like FormatPopover and the enum listbox. -->
+						     derivation, like FormatPopover and the enum listbox. The root is the
+						     flip's boundary for the reason it is theirs: it is the box that clips
+						     the surface where the consumer scrolls one. -->
 							<div class="qm-menu-surface" data-qm-root>
 								{#each kinds as k (k)}
 									<DropdownMenu.Item class="qm-menu-item" onSelect={() => addCard(atIndex, k)}