@quillmark/svelte 0.17.0 → 0.18.0

package/dist/visual/Field.svelte

@@ -38,6 +38,7 @@
 		isContainer,
 		optionalCell,
 		printedText,
+		renderedBoolean,
 		stringifyGhost,
 		titleText
 	} from './structure.js';
@@ -235,12 +236,10 @@
 	 * an address to name. `el` is the field-wide box, which a landing at depth does not
 	 * wash: that lane hands back its own row (`leaves.ts`).
 	 */
-	let controlEl = $state<HTMLElement | undefined>();
-	$effect(() => {
-		if (field.control === 'prose' || !controlEl || !leaves) return;
+	function registerControl(wrapper: HTMLElement): (() => void) | undefined {
+		if (field.control === 'prose' || !leaves) return;
 		const key = leafKey;
 		const registry = leaves;
-		const wrapper = controlEl;
 		registry.registerControl(key, {
 			focus: focusControl,
 			focusPath: isContainer(field.control) ? focusPath : undefined,
@@ -249,7 +248,7 @@
 			}
 		});
 		return () => registry.unregisterControl(key);
-	});
+	}
 
 	/**
 	 * A form control has no controller to report its focus through, so the wrapper
@@ -262,7 +261,7 @@
 	const reportFocus = $derived(field.control === 'prose' ? undefined : () => onFocus?.(addr));
 </script>
 
-<div class="qm-field" class:cell={span === 'cell'}>
+<div class={['qm-field', { cell: span === 'cell' }]}>
 	{#if !ownsLabel && !headed}
 		<FieldLabel
 			label={field.label}
@@ -279,7 +278,7 @@
 	 rule below holds why). One markup for both spans; a field owning its row nests a
 	 level and measures the same. -->
 	<div class="qm-field-stack">
-		<div class="qm-field-control" bind:this={controlEl} onfocusin={reportFocus}>
+		<div class="qm-field-control" {@attach registerControl} onfocusin={reportFocus}>
 			{#if field.control === 'prose'}
 				<ProseField
 					{quill}
@@ -342,7 +341,7 @@
 				/>
 			{:else if field.control === 'boolean'}
 				<BooleanField
-					value={value as boolean | undefined}
+					value={renderedBoolean(value)}
 					fallback={ghost as boolean | undefined}
 					{optional}
 					id={domIds.control}

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

@@ -1,4 +1,3 @@
-import './controls.css';
 interface Props {
     description: string;
     /** The field's label: the trigger's own name, so 30 info buttons on a card

package/dist/visual/FieldLabel.svelte

@@ -65,8 +65,7 @@
 	     label is not a tab stop, and the control it hands focus to is already the
 	     keyboard's own way in. -->
 	<label
-		class="qm-field-label"
-		class:targeted={controlId != null || onActivate != null}
+		class={['qm-field-label', { targeted: controlId != null || onActivate != null }]}
 		{id}
 		for={controlId}
 		onclick={onActivate}

package/dist/visual/FormatPopover.svelte

@@ -52,6 +52,7 @@
  selection the command is supposed to act on.
 -->
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import { wording } from './strings.js';
 
 	// The surface's words, ambient from the editor root; the package's English
@@ -105,7 +106,6 @@
 	/** Whether the selection carried a link when the prompt was raised. */
 	let linkPresent = $state(false);
 	let linkValue = $state('');
-	let linkInputEl = $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.
@@ -212,25 +212,11 @@
 		deferredSync();
 	}
 
-	$effect(() => {
-		document.addEventListener('selectionchange', deferredSync);
-		document.addEventListener('focusout', deferredSync);
-		// Capture, so the gesture is seen whatever a view in the middle of it does with
-		// the event. `pointercancel` is the release a gesture the browser takes over gets.
-		document.addEventListener('pointerdown', onPointerDown, true);
-		document.addEventListener('pointerup', onPointerUp, true);
-		document.addEventListener('pointercancel', onPointerUp, true);
-		return () => {
-			document.removeEventListener('selectionchange', deferredSync);
-			document.removeEventListener('focusout', deferredSync);
-			document.removeEventListener('pointerdown', onPointerDown, true);
-			document.removeEventListener('pointerup', onPointerUp, true);
-			document.removeEventListener('pointercancel', onPointerUp, true);
-			// A burst-coalescing rAF may still be in flight at teardown; cancel it so
-			// `sync()` never runs against the destroyed component.
-			if (pending) cancelAnimationFrame(rafHandle);
-			pending = false;
-		};
+	// A burst-coalescing rAF may still be in flight at teardown; cancel it so
+	// `sync()` never runs against the destroyed component.
+	onDestroy(() => {
+		if (pending) cancelAnimationFrame(rafHandle);
+		pending = false;
 	});
 
 	// Any close path that bypasses `sync` (e.g. Escape while the link input holds
@@ -245,12 +231,10 @@
 	// surface already open, so without this the URL is typed into the document.
 	// Selected rather than merely focused, the input arriving seeded and replacing
 	// that value being what the prompt is usually raised for.
-	$effect(() => {
-		if (linkPromptOpen && linkInputEl) {
-			linkInputEl.focus();
-			linkInputEl.select();
-		}
-	});
+	function focusPrompt(input: HTMLInputElement): void {
+		input.focus();
+		input.select();
+	}
 
 	/** Swallow the button's mousedown so focus/selection never leave the leaf. */
 	function keepFocus(e: MouseEvent): void {
@@ -338,6 +322,17 @@
 	}
 </script>
 
+<!-- The pointer handlers capture, so the gesture is seen whatever a view in the middle of
+     it does with the event. `pointercancel` is the release a gesture the browser takes
+     over gets. -->
+<svelte:document
+	onselectionchange={deferredSync}
+	onfocusout={deferredSync}
+	onpointerdowncapture={onPointerDown}
+	onpointerupcapture={onPointerUp}
+	onpointercancelcapture={onPointerUp}
+/>
+
 <Popover.Root bind:open>
 	<Popover.Portal to={portalTarget}>
 		<!-- A flip is measured against the root the surface portals into, which is the box
@@ -383,7 +378,7 @@
 								}}
 							>
 								<input
-									bind:this={linkInputEl}
+									{@attach focusPrompt}
 									class="qm-link-input"
 									type="text"
 									placeholder={t.strings.linkPlaceholder}

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

@@ -1,5 +1,4 @@
 import { type FieldController } from '../core/codec/index.js';
-import './controls.css';
 interface Props {
     /** The observation seam VisualEditor exposes over its `leaves` registry. */
     getActiveLeaf: () => FieldController | undefined;

package/dist/visual/MatrixAdd.svelte

@@ -114,8 +114,7 @@
 			<!-- The input keeps focus and owns the keys; a press picks without taking it. -->
 			<!-- svelte-ignore a11y_click_events_have_key_events -->
 			<div
-				class="qm-menu-item qm-matrix-add-option"
-				class:add={option.add}
+				class={['qm-menu-item qm-matrix-add-option', { add: option.add }]}
 				role="option"
 				id={optionId(k)}
 				tabindex="-1"

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

@@ -1,5 +1,4 @@
 import type { AddOption } from './checklists.js';
-import './controls.css';
 interface Props {
     /** The input's id, and the base its listbox and options derive theirs from. */
     id: string;

package/dist/visual/MatrixField.svelte

@@ -191,7 +191,7 @@
 	/** A native checkbox carries its own state, so a commit the document declines leaves
 	 *  the face ticked over a map that says otherwise, `checked={held(id)}` having nothing
 	 *  new to write. The reassert after the flush is what the styled controls get from
-	 *  their synced local (`synced.svelte.ts`): the document is what the face reads. */
+	 *  their local, a `$derived` of the value: the document is what the face reads. */
 	async function tick(id: string, on: boolean, el: HTMLInputElement): Promise<void> {
 		commit(on ? commitMember(map, id, ticked(id)) : unticked(id));
 		await flush();
@@ -333,15 +333,13 @@
 		</span>
 	</div>
 	<div
-		class="qm-matrix-roster"
-		class:qm-tracks={compact}
-		class:compact
+		class={['qm-matrix-roster', { '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" class:held={on} bind:this={memberEls[m.id]}>
+			<div class={['qm-member', { held: on }]} 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

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

@@ -1,7 +1,6 @@
 import type { Content, PathStep, QuillFieldSchema } from '@quillmark/wasm';
 import { type DeepDiagnostic } from './diagnostics.js';
 import type { LandingBox } from './leaves.js';
-import './controls.css';
 interface Props {
     /** The stored sparse map, or undefined while the field is unset. */
     value: Record<string, unknown> | undefined;

package/dist/visual/NumberField.svelte

@@ -29,7 +29,6 @@
  numbers, and `1.000` as a whole one.
 -->
 <script lang="ts">
-	import { syncedLocal } from './synced.svelte.js';
 	import './controls.css';
 
 	interface Props {
@@ -53,11 +52,8 @@
 	}
 	let { value, integer, fallback, placeholder, label, id, describedBy, onCommit }: Props = $props();
 
-	// Local input state synced to `value` (as a string projection), 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 != null ? String(value) : (fallback ?? '')));
-	const defaulted = $derived(value == null && !!fallback && local.value === fallback);
+	let local = $derived(value != null ? String(value) : (fallback ?? ''));
+	const defaulted = $derived(value == null && !!fallback && local === fallback);
 
 	const partial = $derived(
 		integer ? /^\s*[+-]?\d*\s*$/ : /^\s*[+-]?\d*\.?\d*(?:[eE][+-]?\d*)?\s*$/
@@ -77,7 +73,7 @@
 		// `insertText` lands on the undo stack and fires `input`; `setRangeText` does neither.
 		if (document.execCommand?.('insertText', false, data)) return;
 		el.setRangeText(data, from, to, 'end');
-		local.value = el.value;
+		local = el.value;
 	}
 
 	// Parse a settled entry and emit it; `local` is owned by `oninput`. Blank →
@@ -89,7 +85,7 @@
 		const entry = raw.trim();
 		if (entry === '') {
 			onCommit(undefined);
-			local.value = el.value = fallback ?? '';
+			local = el.value = fallback ?? '';
 			return;
 		}
 		// Finite as well: a digit run past `Number.MAX_VALUE` reads as `Infinity`.
@@ -102,7 +98,7 @@
 	class="qm-input qm-focus-ring"
 	type="text"
 	inputmode={integer ? 'numeric' : 'decimal'}
-	value={local.value}
+	value={local}
 	{id}
 	{placeholder}
 	data-default={defaulted ? '' : undefined}
@@ -110,7 +106,7 @@
 	aria-describedby={describedBy}
 	onbeforeinput={filter}
 	oninput={(e) => {
-		local.value = (e.currentTarget as HTMLInputElement).value;
+		local = (e.currentTarget as HTMLInputElement).value;
 	}}
 	onchange={(e) => commit(e.currentTarget as HTMLInputElement)}
 />

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
@@ -48,6 +48,7 @@
 		obliged,
 		optionalCell,
 		printedText,
+		renderedBoolean,
 		shortCell
 	} from './structure.js';
 	import { splitDeep, unrouted, type DeepDiagnostic } from './diagnostics.js';
@@ -255,9 +256,7 @@
 
 <div
 	bind:this={rootEl}
-	class="qm-object"
-	class:qm-object-bare={bare}
-	class:qm-object-flat={flat}
+	class={['qm-object', { 'qm-object-bare': bare, 'qm-object-flat': flat }]}
 	role="group"
 	aria-labelledby={labelledBy}
 	aria-describedby={describedBy}
@@ -286,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'}
@@ -330,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)}
@@ -375,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}

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;

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`