@quillmark/svelte 0.20.1 → 0.22.0

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}
@@ -457,10 +474,8 @@
 	/* 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 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.
+	   `--_qm-border`: this is the stroke that structures (ARCHITECTURE §"A plane is a
+	   tone"), the one the card's edge and the section's vertical read.
 
 	   `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
@@ -516,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;

package/dist/visual/ProseValue.svelte

@@ -1,6 +1,6 @@
 <!--
  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
+ `keywords`) or `text` (`authors`, `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
@@ -19,7 +19,7 @@
 
  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
+ object, a `text` literal, the authored string a transport door left — stops
  being the row's or the cell's business. It is read at mount and again wherever the
  parent's re-derive hands down a `value` that moved, and a read differing from the
  content the leaf last committed or took replaces the view, the gate `createField`
@@ -28,8 +28,8 @@
  it, so the echo replaces nothing and the caret and the history stay.
 
  The schema is the declared type's where the parent has room for it: a subform cell
- declaring no `inline` takes the full row ({@link ObjectField}), a `richtext` one on the
- block schema and a `plaintext` one on the plain schema, paragraphs and hard breaks.
+ declaring `multiline: true` takes the full row ({@link ObjectField}), a `richtext` one
+ on the block schema and a `text` one on the plain schema, paragraphs and hard breaks.
  An array element is one textblock whatever it declares, since Enter there is the
  repeater's. There is no slash menu at either width, and no island view.
 
@@ -80,8 +80,8 @@
 		/** The default an unset leaf holds, where it prints: drawn at the default rung,
 		 * and handed up whole with the first edit in it, as `createField` takes one. */
 		fallback?: Content;
-		/** The mark-free schema (a `plaintext` leaf): literal text, no formatting,
-		 * exactly as the scalar field of that type mounts. */
+		/** The mark-free schema (a `text` leaf): literal text, no formatting, exactly
+		 * as the field of that type mounts. */
 		plaintext?: boolean;
 		/** A multi-block schema, for a cell the parent draws at full width: the block
 		 * schema, or the plain one with `plaintext`. Absent, the leaf is one textblock. */
@@ -96,8 +96,8 @@
 		labelledBy?: string;
 		/** The parked `description` (FieldLabel) → `aria-describedby`. */
 		describedBy?: string;
-		/** The empty leaf's ghost, a subform cell's, until the leaf's first edit: the
-		 *  `none` an optional cell prints unset. Read per decoration pass. */
+		/** The empty leaf's ghost, a subform cell's: the `none` an optional cell prints
+		 *  unset. Read per decoration pass. */
 		placeholder?: string;
 		onChange: (rt: Content) => void;
 		/** Raw keydown, for a container whose own keys run through this leaf: the
@@ -130,9 +130,8 @@
 	/** 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. */
+	 * since PM's focus prevents the scroll a form control 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();
@@ -157,11 +156,18 @@
 		view.dispatch(view.state.tr.setSelection(sel).scrollIntoView());
 	}
 
+	$effect(() => {
+		void [label, labelledBy, describedBy, placeholder];
+		view?.setProps({});
+	});
+
 	function mountView(mount: HTMLDivElement): () => void {
 		return untrack(() => {
 			const inline = !block;
 			const leaf = { inline, plaintext, islands: false };
-			const names = { label, labelledBy, describedBy };
+			// Read per attribute pass, not captured: an element's name carries its index,
+			// which a remove above it moves.
+			const names = () => ({ label, labelledBy, describedBy });
 			const shown = (stored: Content | undefined): Content => stored ?? fallback ?? emptyContent();
 			const stored = content();
 			let seen = value;
@@ -171,8 +177,8 @@
 			// 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.
-			const plainNamed = proseAttributes(names) ?? {};
-			const heldNamed = heldAttributes(names, heldId);
+			const plainNamed = () => proseAttributes(names()) ?? {};
+			const heldNamed = () => heldAttributes(names(), heldId);
 			const build = (rt: Content): EditorState => {
 				// The same keymap and plugin stack a `createField` leaf mounts (shared
 				// `proseLeafPlugins`), minus the anchor-position plugin: anchors are dropped on
@@ -184,8 +190,7 @@
 						? []
 						: proseLeafPlugins(schema, {
 								inline,
-								placeholder: () => placeholder,
-								placeholderUntilEdit: true
+								placeholder: () => placeholder
 							})
 				});
 			};
@@ -195,11 +200,12 @@
 					state: build(reconciler.last),
 					editable: () => !held,
 					attributes: () => {
-						const named = held ? heldNamed : plainNamed;
+						const named = held ? heldNamed() : plainNamed();
 						return defaulted ? { ...named, 'data-default': '' } : named;
 					},
 					dispatchTransaction(tr) {
 						const next = mounted.state.apply(tr);
+						if (next === mounted.state) return;
 						const edit = tr.docChanged && !held;
 						if (edit) defaulted = false;
 						mounted.updateState(next);
@@ -265,8 +271,8 @@
 </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
+ an array of `text` render rows of equal height, and a subform's prose cell measures
+ like the form control 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 class="qm-prose-value qm-control-box qm-focus-ring-within">

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

@@ -12,8 +12,8 @@ interface Props {
     /** The default an unset leaf holds, where it prints: drawn at the default rung,
      * and handed up whole with the first edit in it, as `createField` takes one. */
     fallback?: Content;
-    /** The mark-free schema (a `plaintext` leaf): literal text, no formatting,
-     * exactly as the scalar field of that type mounts. */
+    /** The mark-free schema (a `text` leaf): literal text, no formatting, exactly
+     * as the field of that type mounts. */
     plaintext?: boolean;
     /** A multi-block schema, for a cell the parent draws at full width: the block
      * schema, or the plain one with `plaintext`. Absent, the leaf is one textblock. */
@@ -28,8 +28,8 @@ interface Props {
     labelledBy?: string;
     /** The parked `description` (FieldLabel) → `aria-describedby`. */
     describedBy?: string;
-    /** The empty leaf's ghost, a subform cell's, until the leaf's first edit: the
-     *  `none` an optional cell prints unset. Read per decoration pass. */
+    /** The empty leaf's ghost, a subform cell's: the `none` an optional cell prints
+     *  unset. Read per decoration pass. */
     placeholder?: string;
     onChange: (rt: Content) => void;
     /** Raw keydown, for a container whose own keys run through this leaf: the

package/dist/visual/TextField.svelte

@@ -1,6 +1,7 @@
 <!--
- A `string` field → text input. Commits every edit live (on input) via the parent's
- typed `writer.set`, so the preview tracks typing.
+ A text input: the control a field of a type this build does not know falls to.
+ Commits every edit live (on input) via the parent's typed `writer.set`, so the
+ preview tracks typing.
 
  An unset field whose `default:` prints holds that default as its text, at the
  default rung (theme.css): the value it prints, drawn as one and a step off a written

package/dist/visual/TipsCard.svelte

@@ -31,9 +31,6 @@
 	}
 	let { tips, onDismiss, onError }: Props = $props();
 
-	/** Control-glyph size: the shared rule, as CardControls. */
-	const GLYPH = 14;
-
 	let cursor = $state(0);
 	// Clamped: the channel is consumer-authored and can be re-seeded shorter while
 	// the card is open, which would otherwise index past the end.
@@ -72,7 +69,7 @@
 				{#each tips as _, i (i)}
 					<button
 						type="button"
-						class="qm-tips-dot"
+						class="qm-tips-dot qm-focus-ring"
 						aria-label={t.strings.tipsDot(i + 1, tips.length)}
 						aria-current={i === index}
 						onclick={() => (cursor = i)}
@@ -80,11 +77,11 @@
 				{/each}
 			</div>
 		{/if}
-		<button type="button" class="qm-icon-btn qm-tips-action" onclick={advance}>
+		<button type="button" class="qm-icon-btn qm-tips-action qm-focus-ring" onclick={advance}>
 			{#if isLast}
-				{t.strings.tipsDismiss} <Icon name="trash-2" size={GLYPH} />
+				{t.strings.tipsDismiss} <Icon name="trash-2" />
 			{:else}
-				{t.strings.tipsNext} <Icon name="arrow-right" size={GLYPH} />
+				{t.strings.tipsNext} <Icon name="arrow-right" />
 			{/if}
 		</button>
 	</div>
@@ -196,6 +193,9 @@
 	.qm-tips-dot:hover {
 		opacity: var(--_qm-opacity-muted);
 	}
+	.qm-tips-dot:focus-visible {
+		opacity: 1;
+	}
 	.qm-tips-dot[aria-current='true'] {
 		opacity: 1;
 	}

package/dist/visual/VariantField.svelte

@@ -42,7 +42,7 @@
 		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}). */
+		 * a `text` 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;

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

@@ -16,7 +16,7 @@ interface Props {
     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}). */
+     * a `text` 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;