@quillmark/svelte 0.21.0 → 0.22.0

package/dist/visual/FormatPopover.svelte

@@ -3,15 +3,16 @@
  shell-owned, observing the active leaf through
  `getActiveLeaf`: the VisualEditor's accessor over its `leaves` registry, and
  the whole of what this surface knows about the editor. The active leaf is a
- field's or a by-value one (an array's element, a subform's cell): its views either
- way, its controller only for a field's. A non-empty selection in the active leaf
+ field's or a by-value one (an array's element, a subform's cell), reached through
+ its views. A non-empty selection in the active leaf
  raises it over that leaf's selection rect; each button dispatches a PM `toggleMark`
  command straight at the leaf's `EditorView`, whose own `dispatchTransaction` commits
  the result as it commits a keystroke: a field's lowers it to `markOps` through
  `applyChange` (field.ts), a by-value leaf's hands the re-encoded value to its parent
  (`ProseValue`). This component never touches the content. The keymap mirror
- (Mod-b/i/u) already lives in the codec's keymap (field.ts); this is the pointer
- affordance for all six marks.
+ (Mod-b/i/u) lives in the codec's keymap (field.ts); this is the pointer
+ affordance for all six marks. Mod-K is this surface's own key, the prompt it raises
+ being this surface's: a document `keydown` the leaf's keymap left unclaimed.
 
  Selection observation. The view's `dispatchTransaction` is the leaf's
  (read-only), so there is no hook to observe transactions from outside.
@@ -64,6 +65,7 @@
 	// off-tree, so this component renders standalone too.
 	const t = wording();
 	import { toggleMark } from 'prosemirror-commands';
+	import { keydownHandler } from 'prosemirror-keymap';
 	import { TextSelection, type Command } from 'prosemirror-state';
 	import type { EditorView } from 'prosemirror-view';
 	import type { MarkType } from 'prosemirror-model';
@@ -83,9 +85,8 @@
 	let { getActiveLeaf }: Props = $props();
 
 	const SETTLE_MS = 450;
-	/** The six content formatting marks. `anchor` is a seventh, drawn separately below:
-	 *  a decoration toggle rather than a PM `toggleMark`. One string per mark carries both
-	 *  the tooltip and the accessible name; the anchor button spells the two separately. */
+	/** The six content formatting marks. `anchor` is withheld: it draws nothing until
+	 *  comments do. One string per mark carries both the tooltip and the accessible name. */
 	const MARKS: { name: string; icon: IconName; title: string }[] = $derived([
 		{ name: 'strong', icon: 'bold', title: t.strings.formatBold },
 		{ name: 'em', icon: 'italic', title: t.strings.formatEmphasis },
@@ -98,13 +99,14 @@
 	let open = $state(false);
 	/** A pointer is down outside this surface: the selection is still being made. */
 	let pressed = false;
-	/** Whether an anchor can be minted over the selection: in a field's own view, never
-	 *  in a table cell or a by-value leaf (see `sync`). */
-	let anchorAvailable = $state(true);
 	let linkPromptOpen = $state(false);
 	/** Whether the selection carried a link when the prompt was raised. */
 	let linkPresent = $state(false);
 	let linkValue = $state('');
+	/** The view the prompt was raised over. The prompt takes the focus, and a cell view
+	 *  without it is no longer the leaf's `focusedView`. */
+	let promptView: EditorView | undefined;
+	let promptInput = $state<HTMLInputElement | undefined>(undefined);
 	let contentEl = $state<HTMLElement | undefined>(undefined);
 	/** The root to portal into: `document.body` escapes the editor's subtree and
 	 * the consumer's dials with it, so a pane-scoped palette misses this surface.
@@ -119,7 +121,7 @@
 	/** The view the caret is actually in: the leaf's own, or the nested cell view of a
 	 * table island (`codec/table-view.ts`). The six marks are the inline schema's
 	 * too, so a selection in a cell raises the same popover and toggles the same
-	 * commands; only `anchor` is withheld (below). */
+	 * commands. */
 	function activeLeafView(): EditorView | undefined {
 		return getActiveLeaf()?.views.focusedView();
 	}
@@ -133,18 +135,16 @@
 		// returns early, so a surface frozen here still tracks the selection it covers.
 		if (insidePopover) return;
 		if (pressed) return;
-		const leaf = getActiveLeaf();
-		const view = leaf?.views.focusedView();
+		const view = activeLeafView();
 		// A non-empty text selection. A node selection is non-empty too and has nothing
 		// to format: it covers a leaf block (an island, a rule), which is exactly where
 		// Escape out of a table cell lands.
 		const selection = view?.state.selection;
 		const formattable = selection instanceof TextSelection && !selection.empty;
-		// …in a leaf that has formatting at all. A `plaintext` leaf declares no mark
-		// types (`plaintextSchema`, `plainSchema`), so this surface withholds itself over
-		// one entirely, the way it never rises over the text input a `string` field draws:
-		// the value is literal text, and a mark on it is a value the boundary refuses to
-		// coerce back.
+		// …in a leaf that has formatting at all. A `text` leaf declares no mark types
+		// (`plaintextSchema`, `plainSchema`), so this surface withholds itself over one
+		// entirely, the way it never rises over a form control: the value is literal
+		// text, and a mark on it is a value the boundary refuses to coerce back.
 		if (
 			!view ||
 			!view.hasFocus() ||
@@ -163,13 +163,6 @@
 		portalTarget = view.dom.closest<HTMLElement>('[data-qm-root]') ?? undefined;
 		const { from, to } = view.state.selection;
 		anchor = rangeAnchor(view, from, to);
-		// An anchor is minted through a field's controller, which a by-value leaf has
-		// none of: its anchors are dropped on the parent's value write. A selection inside
-		// a table cell is not in the field's coordinate space at all: the field's position
-		// map holds one `atom` run for the whole island, so there is no USV offset to mint
-		// an anchor at. The button is withheld rather than disabled, because what it would
-		// toggle does not exist there (CODEC §Islands).
-		anchorAvailable = !!leaf?.controller && view === leaf.views.view;
 		open = true;
 	}
 
@@ -266,6 +259,7 @@
 		if (name === 'link') {
 			linkValue = hrefInSelection(view.state);
 			linkPresent = linkValue.length > 0;
+			promptView = view;
 			linkPromptOpen = true;
 			return;
 		}
@@ -274,43 +268,12 @@
 		sync();
 	}
 
-	/**
-	 * A fresh anchor id: 128 random bits as hex, the id being opaque to the
-	 * boundary and needing only to be unique. `crypto.randomUUID` is
-	 * secure-context-only, and absent on a page served over plain `http` to
-	 * something other than localhost; `getRandomValues` is there either way.
-	 */
-	function mintAnchorId(): string {
-		return [...crypto.getRandomValues(new Uint8Array(16))]
-			.map((b) => b.toString(16).padStart(2, '0'))
-			.join('');
-	}
-
-	/**
-	 * Toggle an identity anchor over the selection: the `anchor`
-	 * button's answer to a formatting toggle. If the selection already covers
-	 * anchors, remove them; else insert one at its start with a freshly-minted
-	 * unique id (the caller-supplied, invariant id the 0.97 policy settles).
-	 * Zero-width and glyph-less (CODEC §Marks): the identity handle persists in
-	 * the content, its chrome awaiting comment-thread UX.
-	 */
-	function toggleAnchor(): void {
-		const leaf = getActiveLeaf()?.controller;
-		const view = activeLeafView();
-		if (!leaf || !view || view.state.selection.empty) return;
-		const { from, to } = leaf.selectionRange();
-		const covered = leaf.anchorsInRange(from, to);
-		if (covered.length) covered.forEach((id) => leaf.removeAnchor(id));
-		else leaf.insertAnchor(mintAnchorId(), from);
-		view.focus();
-		sync();
-	}
-
 	/** Every exit from the prompt: lower it, run `cmd` if there is one, and hand the
 	 *  leaf back its focus and the surface its buttons. */
 	function closePrompt(cmd?: Command): void {
 		linkPromptOpen = false;
-		const view = activeLeafView();
+		const view = promptView && !promptView.isDestroyed ? promptView : activeLeafView();
+		promptView = undefined;
 		if (view) {
 			cmd?.(view.state, view.dispatch);
 			view.focus();
@@ -325,6 +288,30 @@
 		closePrompt(setLink(normalizeHref(linkValue)));
 	}
 
+	/** Mod-K is a press of the Link button: claimed only where the surface would stand
+	 *  over the selection, and a second press while the prompt is up hands it the focus. */
+	function raiseLink(view: EditorView): boolean {
+		const inside = !!contentEl?.contains(document.activeElement);
+		if (inside && linkPromptOpen) return true;
+		if (!inside && !view.hasFocus()) return false;
+		sync();
+		if (!open) return false;
+		const reraised = linkPromptOpen;
+		toggle('link');
+		if (reraised && promptInput) focusPrompt(promptInput);
+		return true;
+	}
+
+	const linkKey = keydownHandler({
+		'Mod-k': (_state, _dispatch, view) => !!view && raiseLink(view)
+	});
+
+	function onKeyDown(e: KeyboardEvent): void {
+		if (e.defaultPrevented) return;
+		const view = activeLeafView();
+		if (view && linkKey(view, e)) e.preventDefault();
+	}
+
 	function removeLink(): void {
 		closePrompt(clearLink);
 	}
@@ -338,6 +325,7 @@
      it does with the event. `pointercancel` is the release a gesture the browser takes
      over gets. -->
 <svelte:document
+	onkeydown={onKeyDown}
 	onselectionchange={deferredSync}
 	onfocusout={deferredSync}
 	onpointerdowncapture={onPointerDown}
@@ -391,26 +379,29 @@
 							>
 								<input
 									{@attach focusPrompt}
-									class="qm-link-input"
+									bind:this={promptInput}
+									class="qm-link-input qm-focus-ring"
 									type="text"
 									placeholder={t.strings.linkPlaceholder}
 									aria-label={t.strings.formatLink}
 									bind:value={linkValue}
 								/>
-								<button type="submit" class="qm-icon-btn qm-mark-btn">{t.strings.linkApply}</button>
+								<button type="submit" class="qm-icon-btn qm-mark-btn qm-focus-ring"
+									>{t.strings.linkApply}</button
+								>
 								<!-- Only where there is a link to remove: an arm that does nothing is
 								     an arm to read past on every other visit to the prompt. -->
 								{#if linkPresent}
 									<button
 										type="button"
-										class="qm-icon-btn qm-mark-btn"
+										class="qm-icon-btn qm-mark-btn qm-focus-ring"
 										onmousedown={keepFocus}
 										onclick={removeLink}>{t.strings.linkRemove}</button
 									>
 								{/if}
 								<button
 									type="button"
-									class="qm-icon-btn qm-mark-btn"
+									class="qm-icon-btn qm-mark-btn qm-focus-ring"
 									onmousedown={keepFocus}
 									onclick={cancelLink}>{t.strings.linkCancel}</button
 								>
@@ -423,23 +414,13 @@
 								{#each MARKS as m (m.name)}
 									<button
 										type="button"
-										class="qm-icon-btn qm-mark-btn"
+										class="qm-icon-btn qm-mark-btn qm-focus-ring"
 										title={m.title}
 										aria-label={m.title}
 										onmousedown={keepFocus}
 										onclick={() => toggle(m.name)}><Icon name={m.icon} /></button
 									>
 								{/each}
-								{#if anchorAvailable}
-									<button
-										type="button"
-										class="qm-icon-btn qm-mark-btn"
-										title={t.strings.formatAnchorTitle}
-										aria-label={t.strings.formatAnchor}
-										onmousedown={keepFocus}
-										onclick={toggleAnchor}><Icon name="hash" /></button
-									>
-								{/if}
 							</div>
 						{/if}
 					</div>

package/dist/visual/MatrixField.svelte

@@ -53,7 +53,7 @@
 	import { splitDeep, unrouted, type DeepDiagnostic } from './diagnostics.js';
 	import type { LandingBox } from './leaves.js';
 	import { propertyDomIds } from './domid.js';
-	import { bloomInside } from '../core/bloom.js';
+	import { bloom } from '../core/bloom.js';
 	import Icon from './icons/Icon.svelte';
 	import FieldLabel from './FieldLabel.svelte';
 	import ObjectField from './ObjectField.svelte';
@@ -215,7 +215,7 @@
 		// the box stays where the next item is typed.
 		const first = Object.keys(schema.properties ?? {})[0];
 		if (first !== undefined) ref(colEls, id)?.focusPath([first]);
-		if (box) bloomInside(box);
+		if (box) bloom(box);
 	}
 
 	/** Take the caret: the first item's control, else the add box. */
@@ -276,13 +276,17 @@
 		</span>
 	</div>
 	<div
-		class={['qm-matrix-roster', { 'qm-tracks': compact, compact }]}
+		class={['qm-matrix-roster qm-wash', { 'qm-tracks': compact, compact }]}
 		data-default={defaulted ? '' : undefined}
 		bind:this={rosterEl}
 	>
 		{#each members as m (m.id)}
 			{@const on = held(m.id)}
-			<div class={['qm-member', { held: on }]} bind:this={memberEls[m.id]}>
+			<div
+				class={['qm-member qm-wash', { held: on }]}
+				data-qm-prop={m.id}
+				bind:this={memberEls[m.id]}
+			>
 				<div class="qm-member-head">
 					<!-- A real checkbox with its face drawn here: the UA's face is shadow DOM no
 					     dial reaches, so the input is `appearance: none` and the box and the
@@ -306,7 +310,11 @@
 		{/each}
 		{#each added as item, k (item.id)}
 			{@const name = item.title || t.strings.matrixItemTitle(label ?? '', k + 1)}
-			<div class="qm-member held added" bind:this={memberEls[item.id]}>
+			<div
+				class="qm-member qm-wash held added"
+				data-qm-prop={item.id}
+				bind:this={memberEls[item.id]}
+			>
 				<div class="qm-member-head">
 					<!-- Held by being present: the tick is fixed, and the remove is its untick. -->
 					<span class="qm-tick" aria-hidden="true">
@@ -317,6 +325,7 @@
 						class="qm-input qm-focus-ring qm-member-title-input"
 						type="text"
 						id={itemTitleId(item.id)}
+						data-qm-prop={MATRIX_TITLE}
 						aria-label={t.strings.matrixItemTitle(label ?? '', k + 1)}
 						value={item.title}
 						bind:this={titleEls[item.id]}
@@ -391,11 +400,9 @@
 		color: var(--_qm-ink-label);
 		font-variant-numeric: tabular-nums;
 	}
-	/* The roster, one member to a row in declaration order. Positioned for the wash's
-	 inset child (`washBox`), and rounded to the rung a row's box draws, as an array's
-	 rows are. */
+	/* The roster, one member to a row in declaration order, rounded for the wash
+	 (`washBox`) to the rung a row's box draws, as an array's rows are. */
 	.qm-matrix-roster {
-		position: relative;
 		display: flex;
 		flex-direction: column;
 		gap: var(--_qm-space);
@@ -411,10 +418,9 @@
 		align-items: start;
 		column-gap: var(--_qm-space-2);
 	}
-	/* A member is a row: positioned for the wash a landing on it blooms, rounded to the
-	 rung the rows around it draw. */
+	/* A member is a row, rounded for the wash a landing on it blooms to the rung the
+	 rows around it draw. */
 	.qm-member {
-		position: relative;
 		display: flex;
 		flex-direction: column;
 		gap: var(--_qm-space);

package/dist/visual/NumberField.svelte

@@ -4,7 +4,8 @@
  (`-`, `1.`) is never a document state worth a boundary round-trip, and
  committing it live flashes a coercion diagnostic + `console.error` on every
  intermediate prefix, announced by `DiagnosticList`'s `role="status"` live
- region.
+ region. Escape takes a pending entry back to what the field holds, as it takes a
+ card rename back, and the focus stays; with nothing pending the key is not claimed.
 
  An unset field holds its resolved `default:` as its text, at the default rung
  (theme.css), and an edit that settles writes it as authored, as `TextField` takes
@@ -52,7 +53,8 @@
 	}
 	let { value, integer, fallback, placeholder, label, id, describedBy, onCommit }: Props = $props();
 
-	let local = $derived(value != null ? String(value) : (fallback ?? ''));
+	const resting = $derived(value != null ? String(value) : (fallback ?? ''));
+	let local = $derived(resting);
 	const defaulted = $derived(value == null && !!fallback && local === fallback);
 
 	const partial = $derived(
@@ -76,13 +78,37 @@
 		local = el.value;
 	}
 
+	// Where the reverted text differs from the last settled one, a browser fires `change`
+	// on leaving; that one commits nothing. An entry that settled outside the grammar was
+	// handed up as a string and refused, so taking it back settles the held value again,
+	// which clears the refusal drawn on the field.
+	let reverted = false;
+	let offered = false;
+	function revert(e: KeyboardEvent): void {
+		if (e.key !== 'Escape' || e.isComposing) return;
+		const el = e.currentTarget as HTMLInputElement;
+		if (el.value === resting) return;
+		e.preventDefault();
+		local = el.value = resting;
+		reverted = true;
+		if (offered) {
+			offered = false;
+			onCommit(value);
+		}
+	}
+
 	// Parse a settled entry and emit it; `local` is owned by `oninput`. Blank →
 	// `undefined`, and the input takes the default back: nothing else reconciles it, the
 	// projection having read the default throughout. Onto the element as well, since the
 	// attribute Svelte last wrote may already be the default, and it writes no repeat.
 	function commit(el: HTMLInputElement): void {
+		if (reverted) {
+			reverted = false;
+			return;
+		}
 		const raw = el.value;
 		const entry = raw.trim();
+		offered = false;
 		if (entry === '') {
 			onCommit(undefined);
 			local = el.value = fallback ?? '';
@@ -90,7 +116,8 @@
 		}
 		// Finite as well: a digit run past `Number.MAX_VALUE` reads as `Infinity`.
 		const n = whole.test(entry) ? Number(entry) : NaN;
-		onCommit(Number.isFinite(n) ? n : raw);
+		offered = !Number.isFinite(n);
+		onCommit(offered ? raw : n);
 	}
 </script>
 
@@ -107,6 +134,8 @@
 	onbeforeinput={filter}
 	oninput={(e) => {
 		local = (e.currentTarget as HTMLInputElement).value;
+		reverted = false;
 	}}
+	onkeydown={revert}
 	onchange={(e) => commit(e.currentTarget as HTMLInputElement)}
 />

package/dist/visual/ObjectField.svelte

@@ -41,18 +41,21 @@
 		baseType,
 		controlKind,
 		declaredContent,
+		fieldModels,
 		flatObject,
 		humanize,
 		isContainer,
+		literalText,
 		mountKey,
-		obliged,
 		optionalCell,
+		placeFields,
 		printedText,
 		renderedBoolean,
 		shortCell
 	} from './structure.js';
 	import { splitDeep, unrouted, type DeepDiagnostic } from './diagnostics.js';
 	import type { LandingBox } from './leaves.js';
+	import { isEmptyContent } from '../core/codec/index.js';
 	import { wording } from './strings.js';
 	import { propertyDomIds } from './domid.js';
 	import FieldLabel from './FieldLabel.svelte';
@@ -102,6 +105,12 @@
 		/** `ui.layout: flat`: no vertical and no rung, the properties at the depth of the
 		 * list the subform stands in. */
 		flat?: boolean;
+		/** A card-level object, or one nested in it: its properties are placed as a
+		 * card's fields are (`placeFields`), so moving a field into a group leaves its row
+		 * as it was. Unset,
+		 * every short cell packs: an array's record, a variant's world and a matrix
+		 * member's columns are one record's cells, not a card's fields. */
+		placed?: boolean;
 		/** Raw keydown off a text or prose cell, for a row whose own keys run through its
 		 * cells: the table's Enter and Backspace ({@link ArrayField}). */
 		onCellKey?: (e: KeyboardEvent, key: string) => void;
@@ -121,6 +130,7 @@
 		onCommit,
 		bare = false,
 		flat = false,
+		placed = false,
 		onCellKey,
 		diagnostics
 	}: Props = $props();
@@ -129,15 +139,16 @@
 	const entries = $derived(Object.entries(properties ?? {}));
 	const obj = $derived((value ?? {}) as Record<string, unknown>);
 	const has = (key: string): boolean => Object.hasOwn(properties ?? {}, key);
+	const spans = $derived(
+		placed
+			? new Map(
+					placeFields(fieldModels({ fields: properties ?? {} })).map((p) => [p.field.name, p.span])
+				)
+			: undefined
+	);
 	const routed = $derived(splitDeep(diagnostics));
 	const foot = $derived(unrouted(routed, (step) => typeof step === 'string' && has(step)));
 
-	/** Obligation, read off the cell exactly as `fieldModels` reads it off a field
-	 *  ({@link obliged}). `validate` anchors it per leaf, so a property with no
-	 *  `default:` is obliged in its own right and the container around it holds none
-	 *  (VISUAL_EDITOR §"Enum variants"). */
-	const required = obliged;
-
 	const title = (key: string, sub: QuillFieldSchema): string => sub.title ?? humanize(key);
 	/** What an unset optional cell ghosts, which is what it prints: `none`. An answered
 	 *  cell ghosts nothing, an empty answer printing empty. */
@@ -151,8 +162,7 @@
 	/** The `aria-label` fallback, for a subform mounted without a field's id space:
 	 *  the field's name and the property's, since nothing else names the control. */
 	const fallbackName = (key: string, sub: QuillFieldSchema): string =>
-		`${label != null ? `${label} ` : ''}${title(key, sub)}` +
-		(required(sub) ? ` ${t.strings.fieldRequired}` : '');
+		`${label != null ? `${label} ` : ''}${title(key, sub)}`;
 
 	/** The handles of the cells the DOM cannot answer for, keyed by property name —
 	 *  which is stable, a subform drawing its properties by declaration and never by
@@ -285,10 +295,17 @@
 				kind === 'boolean'}
 			<!-- A container takes the full span at every depth: its rows are the document's
 			     to count, and a track beside it would stand in a column of whitespace
-			     (`packable`). A block prose cell spans it too, and keeps its label row. -->
+			     (`packable`). A block prose cell spans it too, and keeps its label row, as
+			     does a placed cell `placeFields` gives the whole row. -->
 			{@const block = kind === 'prose' && !shortCell(sub)}
 			<div
-				class={['qm-object-prop', { 'qm-prop-full': isContainer(kind), 'qm-prop-wide': block }]}
+				class={[
+					'qm-object-prop',
+					{
+						'qm-prop-full': isContainer(kind),
+						'qm-prop-wide': block || (!isContainer(kind) && spans?.get(key) === 'full')
+					}
+				]}
 				data-qm-prop={key}
 			>
 				{#if ids && kind !== 'array' && kind !== 'matrix'}
@@ -298,7 +315,6 @@
 						id={ids.label}
 						descriptionId={describes}
 						onActivate={labelable ? undefined : () => focusProp(key)}
-						required={required(sub)}
 						description={sub.description}
 					/>
 				{/if}
@@ -364,13 +380,14 @@
 						content={() => contentAt([key])}
 						value={obj[key]}
 						fallback={contentDefault(sub)}
-						plaintext={baseType(sub) === 'plaintext'}
+						plaintext={literalText(sub)}
 						placeholder={noneOf(key, sub)}
 						{block}
 						label={named}
 						labelledBy={ids?.label}
 						describedBy={describes}
-						onChange={(rt) => commitProp(key, rt)}
+						onChange={(rt) =>
+							commitProp(key, optionalCell(sub) && isEmptyContent(rt) ? undefined : rt)}
 						onKey={onCellKey ? (e) => onCellKey(e, key) : undefined}
 					/>
 				{:else if kind === 'array'}
@@ -386,7 +403,6 @@
 						layout={arrayLayout(sub)}
 						max={sub.max}
 						label={title(key, sub)}
-						required={required(sub)}
 						description={sub.description}
 						labelId={ids?.label}
 						descriptionId={describes}
@@ -401,6 +417,7 @@
 						value={obj[key] as Record<string, unknown> | undefined}
 						properties={sub.properties}
 						flat={flatObject(sub)}
+						{placed}
 						label={ids ? undefined : fallbackName(key, sub)}
 						idBase={ids?.control}
 						labelledBy={ids?.label}
@@ -514,15 +531,16 @@
 		align-items: start;
 		min-width: 0;
 	}
-	/* A subform of one takes half the capacity: at full capacity a single track reads as
-	   truncated, and there are no sibling properties for it to line up with. A stranded
-	   field takes the whole row instead (`placeFields`): the width it would leave empty is
-	   the card's, where this one sits inside a figure the nesting has already narrowed. */
+	/* A record of one cell takes half the capacity: at full capacity a single track reads
+	   as truncated, and there are no sibling properties for it to line up with. A placed
+	   property's span is `placeFields`', which strands a lone one to the whole row as it
+	   does a card's field. */
 	.qm-object-prop:only-child {
 		grid-column: span var(--cols-half);
 	}
 	/* A block prose property holds paragraphs, so a track beside it stands in whitespace
-	   once it grows (`packable`); its label still rides the row above it. */
+	   once it grows (`packable`); its label still rides the row above it. A placed
+	   property `placeFields` gives the whole row spans it the same way. */
 	.qm-object-prop.qm-prop-wide,
 	.qm-object-prop.qm-prop-wide:only-child {
 		grid-column: 1 / -1;

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

@@ -35,6 +35,12 @@ interface Props {
     /** `ui.layout: flat`: no vertical and no rung, the properties at the depth of the
      * list the subform stands in. */
     flat?: boolean;
+    /** A card-level object, or one nested in it: its properties are placed as a
+     * card's fields are (`placeFields`), so moving a field into a group leaves its row
+     * as it was. Unset,
+     * every short cell packs: an array's record, a variant's world and a matrix
+     * member's columns are one record's cells, not a card's fields. */
+    placed?: boolean;
     /** Raw keydown off a text or prose cell, for a row whose own keys run through its
      * cells: the table's Enter and Backspace ({@link ArrayField}). */
     onCellKey?: (e: KeyboardEvent, key: string) => void;

package/dist/visual/ProseField.svelte

@@ -24,8 +24,9 @@
 		plaintext?: boolean;
 		/**
 		 * Draw no box: the card body's leaf, and nothing else. Not `block`, which is a
-		 * different predicate: a `richtext` field without `inline` is block prose and
-		 * still a control in a row of controls, so only the caller knows what is paper.
+		 * different predicate: a `richtext` field declaring `multiline: true` is block
+		 * prose and still a control in a row of controls, so only the caller knows what
+		 * is paper.
 		 */
 		unframed?: boolean;
 		/** Accessible name for a leaf nothing else names: an array element, or the
@@ -45,6 +46,8 @@
 		placeholder?: string;
 		/** The placeholder goes at the leaf's first edit (`createField`). */
 		placeholderUntilEdit?: boolean;
+		/** An emptied leaf removes the field (`createField`). */
+		emptyUnsets?: boolean;
 		/** Registry identity, stamped on the DOM node so a remount is visible as one. */
 		leafKey: string;
 		onFocus?: (addr: Addr) => void;
@@ -73,6 +76,7 @@
 		fallback,
 		placeholder,
 		placeholderUntilEdit,
+		emptyUnsets,
 		leafKey,
 		onFocus,
 		onCaretMove,
@@ -122,6 +126,7 @@
 				fallback,
 				placeholder,
 				placeholderUntilEdit,
+				emptyUnsets,
 				tableStrings: () => t.strings,
 				slashStrings: () => t.strings,
 				onSlash: (next) => {
@@ -166,7 +171,7 @@
 <div
 	{@attach mountField}
 	class={[
-		'qm-prose',
+		'qm-prose qm-wash',
 		{ 'qm-control-box': !unframed, 'qm-focus-ring-within': !unframed, 'qm-prose-block': block }
 	]}
 	data-leaf-key={leafKey}
@@ -178,14 +183,6 @@
 <SlashMenu menu={slash} leaf={() => controller} label={t.strings.slashLabel} />
 
 <style>
-	/* The box is `.qm-control-box` (controls.css), the same rule the input beside it
-	 draws, so the two agree on height by construction. No `min-height` with it:
-	 `core/codec/prose.css` resets the paragraph box, so one line of prose in this box
-	 measures one line of text in that one. */
-	.qm-prose {
-		/* Containing block for the arrival wash's inset child (`core/bloom.ts`). */
-		position: relative;
-	}
 	/* A leaf the inline schema does not constrain grows, and opens at one line box: the
 	 empty leaf is the height its first line will take, so the first keystroke displaces
 	 nothing below it. `1em`, not a size rung, which is the rule below's to name.
@@ -196,8 +193,8 @@
 	.qm-prose-block :global(.ProseMirror) {
 		min-height: calc(1em * var(--_qm-leading-body));
 	}
-	/* Paper, and the withheld box is what says so. Not `block` alone: `inline` is the
-	 quill's to declare, so a schema omitting it on a richtext field puts a block leaf in
+	/* Paper, and the withheld box is what says so. Not `block` alone: `multiline` is the
+	 quill's to declare, so a schema spelling it on a richtext field puts a block leaf in
 	 a field row, where this rung would break the height agreement above. */
 	.qm-prose-block:not(.qm-control-box) {
 		font-size: var(--_qm-text-paper);

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

@@ -11,8 +11,9 @@ interface Props {
     plaintext?: boolean;
     /**
      * Draw no box: the card body's leaf, and nothing else. Not `block`, which is a
-     * different predicate: a `richtext` field without `inline` is block prose and
-     * still a control in a row of controls, so only the caller knows what is paper.
+     * different predicate: a `richtext` field declaring `multiline: true` is block
+     * prose and still a control in a row of controls, so only the caller knows what
+     * is paper.
      */
     unframed?: boolean;
     /** Accessible name for a leaf nothing else names: an array element, or the
@@ -32,6 +33,8 @@ interface Props {
     placeholder?: string;
     /** The placeholder goes at the leaf's first edit (`createField`). */
     placeholderUntilEdit?: boolean;
+    /** An emptied leaf removes the field (`createField`). */
+    emptyUnsets?: boolean;
     /** Registry identity, stamped on the DOM node so a remount is visible as one. */
     leafKey: string;
     onFocus?: (addr: Addr) => void;