@quillmark/svelte 0.16.0 → 0.18.0

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

@@ -1,4 +1,3 @@
-import './controls.css';
 interface Props {
     value: number | undefined;
     integer?: boolean;

package/dist/visual/ObjectField.svelte

@@ -5,8 +5,8 @@
  ProseValue}) over the boundary's nested read, and a container property — an `array`,
  an `object`, a `matrix`, a variant — mounts its own control here, at the next rung of
  the same figure. Depth is bounded by what is open, not by the schema: a repeater inside
- a subform is collapsed rows again, one open at a time, so an open row under an open
- row is one figure two rungs in.
+ a subform is collapsed rows again, so an open row under an open row is one figure two
+ rungs in.
 
  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
@@ -30,7 +30,9 @@
  member's id. So a cell reads at whatever depth it sits, which nothing here knows.
 
  `bare` is the table's row: the same cells with no labels and no figure of their own,
- laid onto the tracks the table's header names ({@link ArrayField}).
+ laid onto the tracks the table's header names ({@link ArrayField}). `flat` is
+ `ui.layout: flat`: the cells keep their labels and lose the figure, standing at the
+ depth of whatever holds the subform.
 -->
 <script lang="ts">
 	import type { Content, PathStep, QuillFieldSchema } from '@quillmark/wasm';
@@ -39,12 +41,14 @@
 		baseType,
 		controlKind,
 		declaredContent,
+		flatObject,
 		humanize,
 		isContainer,
 		mountKey,
 		obliged,
 		optionalCell,
 		printedText,
+		renderedBoolean,
 		shortCell
 	} from './structure.js';
 	import { splitDeep, unrouted, type DeepDiagnostic } from './diagnostics.js';
@@ -93,6 +97,9 @@
 		/** A table's row: the cells alone, on the tracks the table's header names, with
 		 * no labels and no vertical of their own. */
 		bare?: boolean;
+		/** `ui.layout: flat`: no vertical and no rung, the properties at the depth of the
+		 * list the subform stands in. */
+		flat?: 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;
@@ -111,6 +118,7 @@
 		contentAt,
 		onCommit,
 		bare = false,
+		flat = false,
 		onCellKey,
 		diagnostics
 	}: Props = $props();
@@ -248,8 +256,7 @@
 
 <div
 	bind:this={rootEl}
-	class="qm-object"
-	class:qm-object-bare={bare}
+	class={['qm-object', { 'qm-object-bare': bare, 'qm-object-flat': flat }]}
 	role="group"
 	aria-labelledby={labelledBy}
 	aria-describedby={describedBy}
@@ -278,9 +285,7 @@
 			     (`packable`). A block prose cell spans it too, and keeps its label row. -->
 			{@const block = kind === 'prose' && !shortCell(sub)}
 			<div
-				class="qm-object-prop"
-				class:qm-prop-full={isContainer(kind)}
-				class:qm-prop-wide={block}
+				class={['qm-object-prop', { 'qm-prop-full': isContainer(kind), 'qm-prop-wide': block }]}
 				data-qm-prop={key}
 			>
 				{#if ids && kind !== 'array' && kind !== 'matrix'}
@@ -322,7 +327,7 @@
 						label={named}
 						id={ids?.control}
 						describedBy={describes}
-						value={obj[key] as boolean | undefined}
+						value={renderedBoolean(obj[key])}
 						fallback={sub.default as boolean | undefined}
 						optional={optionalCell(sub)}
 						onCommit={(v) => commitProp(key, v)}
@@ -367,9 +372,8 @@
 				{:else if kind === 'array'}
 					<!-- The repeater owns its label row, the add chip sharing it (`Field` skips
 					     its own label for one too), so the names are handed down rather than
-					     drawn here. Its rows are collapsed rows again, one open at a time: the
-					     depth an open row under an open row costs is two rungs of the ladder
-					     and one figure. -->
+					     drawn here. Its rows are collapsed rows again: the depth an open row
+					     under an open row costs is two rungs of the ladder and one figure. -->
 					<ArrayField
 						bind:this={nestedEls[key]}
 						value={obj[key] as unknown[] | undefined}
@@ -392,6 +396,7 @@
 						bind:this={nestedEls[key]}
 						value={obj[key] as Record<string, unknown> | undefined}
 						properties={sub.properties}
+						flat={flatObject(sub)}
 						label={ids ? undefined : fallbackName(key, sub)}
 						idBase={ids?.control}
 						labelledBy={ids?.label}
@@ -471,6 +476,8 @@
 	}
 	.qm-object:not(.qm-object-bare) {
 		container-type: inline-size;
+	}
+	.qm-object:not(.qm-object-bare, .qm-object-flat) {
 		border-inline-start: var(--_qm-vertical-width) solid var(--_qm-border);
 		padding-inline-start: var(--_qm-nest);
 		padding-block: var(--_qm-space);
@@ -481,7 +488,14 @@
 	.qm-object-grid {
 		display: grid;
 		grid-template-columns: repeat(var(--cols), 1fr);
-		gap: var(--_qm-space-2);
+		column-gap: var(--_qm-space-2);
+		--row-gap: var(--_qm-space-2);
+		row-gap: var(--row-gap);
+	}
+	/* Flat, the rows keep the rhythm of the list the subform stands in: a section's
+	   (`Card.svelte`) or an enclosing subform's, inherited rather than restated. */
+	.qm-object-flat > .qm-object-grid {
+		--row-gap: inherit;
 	}
 	/* 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
@@ -546,10 +560,9 @@
 		grid-row: auto;
 		grid-template-rows: none;
 		row-gap: var(--_qm-space-half);
-		/* A row is one line of controls, so a cell shorter than the box beside it stands
-		   on that line: a switch held at the top of a row a text box set the height of
-		   reads as a cell that slipped its track. */
-		align-items: center;
+		/* A row reads along its first line: a prose cell that wraps grows downward, and
+		   the cells beside it stay on the line it started on. */
+		align-items: start;
 	}
 	/* What the row could not hand down stands across it: a diagnostic in the first
 	   column alone would read as that column's. */

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

@@ -2,7 +2,6 @@ import type { Content, PathStep, QuillFieldSchema } from '@quillmark/wasm';
 import { type DeepDiagnostic } from './diagnostics.js';
 import type { LandingBox } from './leaves.js';
 import ObjectField from './ObjectField.svelte';
-import './controls.css';
 interface Props {
     value: Record<string, unknown> | undefined;
     properties: Record<string, QuillFieldSchema> | undefined;
@@ -31,6 +30,9 @@ interface Props {
     /** A table's row: the cells alone, on the tracks the table's header names, with
      * no labels and no vertical of their own. */
     bare?: boolean;
+    /** `ui.layout: flat`: no vertical and no rung, the properties at the depth of the
+     * list the subform stands in. */
+    flat?: 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

@@ -5,7 +5,7 @@
  this leaf's commits with the caret riding the untouched view.
 -->
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { untrack } from 'svelte';
 	import { createField, type FieldController, type SlashState } from '../core/codec/index.js';
 	import type { LeafRegistry } from './leaves.js';
 	import SlashMenu from './SlashMenu.svelte';
@@ -82,7 +82,6 @@
 		diagnostics
 	}: Props = $props();
 
-	let containerEl: HTMLDivElement | undefined = $state();
 	let held = $state(false);
 	const uid = $props.id();
 	const heldId = `${uid}-held`;
@@ -108,41 +107,43 @@
 		controller?.focus();
 	}
 
-	onMount(() => {
-		if (!containerEl) return;
-		controller = createField({
-			doc,
-			quill,
-			addr,
-			container: containerEl,
-			inline,
-			plaintext,
-			label,
-			labelledBy,
-			describedBy,
-			fallback,
-			placeholder,
-			placeholderUntilEdit,
-			tableStrings: () => t.strings,
-			onSlash: (next) => {
-				slash = next;
-			},
-			onFocus,
-			onCaretMove,
-			onChange,
-			onError,
-			heldNoteId: heldId,
-			onHold: (next) => {
-				held = next;
-			}
+	function mountField(container: HTMLDivElement): () => void {
+		return untrack(() => {
+			const mounted = createField({
+				doc,
+				quill,
+				addr,
+				container,
+				inline,
+				plaintext,
+				label,
+				labelledBy,
+				describedBy,
+				fallback,
+				placeholder,
+				placeholderUntilEdit,
+				tableStrings: () => t.strings,
+				onSlash: (next) => {
+					slash = next;
+				},
+				onFocus,
+				onCaretMove,
+				onChange,
+				onError,
+				heldNoteId: heldId,
+				onHold: (next) => {
+					held = next;
+				}
+			});
+			controller = mounted;
+			leaves?.registerProse(leafKey, mounted);
+			return () => {
+				leaves?.unregisterProse(leafKey);
+				mounted.destroy();
+				controller = undefined;
+			};
 		});
-		leaves?.registerProse(leafKey, controller);
-		return () => {
-			leaves?.unregisterProse(leafKey);
-			controller?.destroy();
-			controller = undefined;
-		};
-	});
+	}
 
 	// A retype does not remount the leaf (its key is the card's session id), so the new
 	// kind's ghost and default are pushed into the live view rather than paid for with
@@ -162,11 +163,11 @@
 </script>
 
 <div
-	bind:this={containerEl}
-	class="qm-prose"
-	class:qm-control-box={!unframed}
-	class:qm-focus-ring-within={!unframed}
-	class:qm-prose-block={block}
+	{@attach mountField}
+	class={[
+		'qm-prose',
+		{ 'qm-control-box': !unframed, 'qm-focus-ring-within': !unframed, 'qm-prose-block': block }
+	]}
 	data-leaf-key={leafKey}
 >
 	{#if held}

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

@@ -1,5 +1,4 @@
 import type { LeafRegistry } from './leaves.js';
-import './controls.css';
 import type { Document, Quill, Addr, Content, Diagnostic } from '@quillmark/wasm';
 import type { EditorErrorHandler } from '../core/errors.js';
 interface Props {

package/dist/visual/ProseValue.svelte

@@ -31,7 +31,7 @@
  schema, read-only, with a note inside its box, and commits nothing.
 -->
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { untrack } from 'svelte';
 	import { EditorState, Selection } from 'prosemirror-state';
 	import { EditorView } from 'prosemirror-view';
 	import {
@@ -101,7 +101,6 @@
 	const t = wording();
 	const uid = $props.id();
 	const heldId = `${uid}-held`;
-	let editorEl: HTMLDivElement | undefined = $state();
 	let held = $state(false);
 	let view: EditorView | undefined;
 	/** Take the caret: what a parent placing focus on this leaf calls. The view's
@@ -134,61 +133,62 @@
 		view.dispatch(view.state.tr.setSelection(sel).scrollIntoView());
 	}
 
-	onMount(() => {
-		if (!editorEl) return;
-		// 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.
-		const inline = !block;
-		const stored = content();
-		const rt = stored ?? fallback ?? emptyContent();
-		let defaulted = stored === undefined && !!fallback;
-		held = !fitsLeaf(rt, { inline, plaintext });
-		const named = held
-			? heldAttributes({ label, labelledBy, describedBy }, heldId)
-			: (proseAttributes({ label, labelledBy, describedBy }) ?? {});
-		const defaultNamed = { ...named, 'data-default': '' };
-		const schema = held ? blockSchema : leafSchema({ plaintext, inline });
-		const state = EditorState.create({
-			doc: decode(rt, schema),
-			plugins: held
-				? []
-				: proseLeafPlugins(schema, {
-						inline,
-						placeholder: () => placeholder,
-						placeholderUntilEdit: true
-					})
-		});
-		const mounted = new EditorView(
-			{ mount: editorEl },
-			{
-				state,
-				editable: () => !held,
-				// 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: () => (defaulted ? defaultNamed : named),
-				dispatchTransaction(tr) {
-					const next = mounted.state.apply(tr);
-					const edit = tr.docChanged && !held;
-					if (edit) defaulted = false;
-					mounted.updateState(next);
-					if (edit) onChange(pmToContent(next.doc));
-				},
-				handleDOMEvents: {
-					keydown: (_v, e) => {
-						onKey?.(e);
-						return false;
+	function mountView(mount: HTMLDivElement): () => void {
+		return untrack(() => {
+			// 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.
+			const inline = !block;
+			const stored = content();
+			const rt = stored ?? fallback ?? emptyContent();
+			let defaulted = stored === undefined && !!fallback;
+			held = !fitsLeaf(rt, { inline, plaintext });
+			const named = held
+				? heldAttributes({ label, labelledBy, describedBy }, heldId)
+				: (proseAttributes({ label, labelledBy, describedBy }) ?? {});
+			const defaultNamed = { ...named, 'data-default': '' };
+			const schema = held ? blockSchema : leafSchema({ plaintext, inline });
+			const state = EditorState.create({
+				doc: decode(rt, schema),
+				plugins: held
+					? []
+					: proseLeafPlugins(schema, {
+							inline,
+							placeholder: () => placeholder,
+							placeholderUntilEdit: true
+						})
+			});
+			const mounted = new EditorView(
+				{ mount },
+				{
+					state,
+					editable: () => !held,
+					// 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: () => (defaulted ? defaultNamed : named),
+					dispatchTransaction(tr) {
+						const next = mounted.state.apply(tr);
+						const edit = tr.docChanged && !held;
+						if (edit) defaulted = false;
+						mounted.updateState(next);
+						if (edit) onChange(pmToContent(next.doc));
+					},
+					handleDOMEvents: {
+						keydown: (_v, e) => {
+							onKey?.(e);
+							return false;
+						}
 					}
 				}
-			}
-		);
-		view = mounted;
-		return () => {
-			view = undefined;
-			mounted.destroy();
-		};
-	});
+			);
+			view = mounted;
+			return () => {
+				view = undefined;
+				mounted.destroy();
+			};
+		});
+	}
 </script>
 
 <!-- `.qm-control-box` (controls.css) is the whole box, so an array of `richtext` and
@@ -197,7 +197,7 @@
  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">
-	<div bind:this={editorEl}></div>
+	<div {@attach mountView}></div>
 	<!-- Inside the box, so the cell or row holds one child either way: a subform cell's
 	     subgrid has a row for the label and one for the box, and an array row's slabs
 	     stand the box's height. -->

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

@@ -1,4 +1,3 @@
-import './controls.css';
 import type { Content } from '@quillmark/wasm';
 interface Props {
     /** This leaf's content, read at mount (the parent's boundary read), `undefined`

package/dist/visual/SlashMenu.svelte

@@ -33,30 +33,20 @@
 	}
 	let { menu, leaf, label }: Props = $props();
 
-	/** Raised whenever the codec reports offers. Mirrored into local state rather than
-	 * derived, because the primitive owns this prop: its own dismissal layer (an
-	 * outside press) writes it, and a derived it cannot write to is an error rather
-	 * than a dismissal. The next report re-syncs, so the codec stays the authority on
-	 * whether a run is live. */
-	let open = $state(false);
-	$effect(() => {
-		open = !!menu && menu.items.length > 0;
-	});
+	let open = $derived(!!menu && menu.items.length > 0);
 
 	/** The root to portal into, resolved from the leaf's own DOM so the menu lands
 	 * inside whichever `[data-qm-root]` raised it and inherits the consumer's dials;
 	 * `undefined` falls back to bits-ui's `document.body`. */
 	const portalTarget = $derived(leaf()?.el.closest<HTMLElement>('[data-qm-root]') ?? undefined);
 
-	let surface = $state<HTMLElement | undefined>();
-
 	/** Keep the keyboard's cursor in the port: the arrows move an index rather than a
 	 *  focus, so a row the list scrolled past has nothing bringing it back. `nearest`
 	 *  scrolls the least that works, and no ancestor the row is already visible in. */
-	$effect(() => {
+	function followHighlight(surface: HTMLElement): void {
 		void menu?.index;
-		surface?.querySelector('[data-highlighted]')?.scrollIntoView({ block: 'nearest' });
-	});
+		surface.querySelector('[data-highlighted]')?.scrollIntoView({ block: 'nearest' });
+	}
 
 	/** Swallow the item's own mousedown: without it the browser focuses the item and
 	 *  blurs the leaf, taking the trigger run's caret with it. */
@@ -98,7 +88,7 @@
 					     a thing to click, tab into, or read. -->
 					<div
 						{...props}
-						bind:this={surface}
+						{@attach followHighlight}
 						class="qm-slash-menu qm-menu-surface"
 						data-qm-root
 						role="group"

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

@@ -1,5 +1,4 @@
 import type { FieldController, SlashState } from '../core/codec/index.js';
-import './controls.css';
 interface Props {
     /** The live menu, or `undefined` when closed: the codec's report channel. Named
      *  `menu` rather than `state`, which is the rune's word in this file. */

package/dist/visual/TextField.svelte

@@ -14,7 +14,6 @@
  unanswered, and an optional cell returns to `none`.
 -->
 <script lang="ts">
-	import { syncedLocal } from './synced.svelte.js';
 	import './controls.css';
 
 	interface Props {
@@ -40,11 +39,8 @@
 	}
 	let { value, fallback, placeholder, label, id, describedBy, onCommit, onKey }: Props = $props();
 
-	// Local input state synced to `value`, or to the default an unset field holds:
-	// own-typing stays local, only an external change reconciles back in (see
-	// `syncedLocal`).
-	const local = syncedLocal(() => value ?? fallback ?? '');
-	const defaulted = $derived(value == null && !!fallback && local.value === fallback);
+	let local = $derived(value ?? fallback ?? '');
+	const defaulted = $derived(value == null && !!fallback && local === fallback);
 
 	let inputEl: HTMLInputElement | undefined = $state();
 	/** Take the caret: what a parent placing focus on this control calls. */
@@ -57,7 +53,7 @@
 	bind:this={inputEl}
 	class="qm-input qm-focus-ring"
 	type="text"
-	value={local.value}
+	value={local}
 	{id}
 	{placeholder}
 	data-default={defaulted ? '' : undefined}
@@ -65,7 +61,7 @@
 	aria-describedby={describedBy}
 	onkeydown={onKey}
 	oninput={(e) => {
-		local.value = (e.currentTarget as HTMLInputElement).value;
-		onCommit(local.value !== '' ? local.value : fallback ? '' : undefined);
+		local = (e.currentTarget as HTMLInputElement).value;
+		onCommit(local !== '' ? local : fallback ? '' : undefined);
 	}}
 />

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

@@ -1,4 +1,3 @@
-import './controls.css';
 interface Props {
     value: string | undefined;
     /** The resolved `default:` where it prints: the text an unset field holds. */

package/dist/visual/TipsCard.svelte

@@ -40,20 +40,19 @@
 	const index = $derived(Math.min(cursor, tips.length - 1));
 	const isLast = $derived(index >= tips.length - 1);
 
-	// The tip string is derived before the effect reads it, and that is load-bearing.
-	// Reading `tips[index]` inside the effect makes the parent's `model` derive the
-	// dependency (a fresh object every `revision` bump) so the effect would re-run
-	// on every unrelated commit, re-crossing the WASM boundary and rebuilding this
-	// `aria-live` region per keystroke. A derived string short-circuits on `===`.
+	// The tip string is derived before the attachment reads it, and that is
+	// load-bearing. Reading `tips[index]` inside the attachment makes the parent's
+	// `model` derive the dependency (a fresh object every `revision` bump) so the
+	// attachment would re-run on every unrelated commit, re-crossing the WASM boundary
+	// and rebuilding this `aria-live` region per keystroke. A derived string
+	// short-circuits on `===`.
 	const tip = $derived(tips[index] ?? '');
 
 	// The tip is DOM, not text: `renderTip` returns a fragment the codec's own
 	// `toDOM` built, so it is written in rather than interpolated.
-	let bodyEl: HTMLDivElement | undefined = $state();
-	$effect(() => {
-		const el = bodyEl;
-		if (el) el.replaceChildren(renderTip(tip, onError));
-	});
+	function paintTip(body: HTMLDivElement): void {
+		body.replaceChildren(renderTip(tip, onError));
+	}
 
 	function advance(): void {
 		if (isLast) onDismiss();
@@ -64,7 +63,7 @@
 <aside class="qm-tips" aria-label={t.strings.tipsLabel}>
 	<!-- Advancing swaps the text under a button that keeps focus, so the region
 	     announces rather than the change passing silently. -->
-	<div class="qm-tips-body" aria-live="polite" bind:this={bodyEl}></div>
+	<div class="qm-tips-body" aria-live="polite" {@attach paintTip}></div>
 	<div class="qm-tips-foot">
 		<!-- One tip is its own whole set, so a lone dot reports nothing the card does
 		     not already show. -->

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

@@ -1,5 +1,4 @@
 import type { EditorErrorHandler } from '../core/errors.js';
-import './controls.css';
 interface Props {
     /** The narrowed channel (`tipsChannel`); never empty; the parent gates on length. */
     tips: string[];