@quillmark/svelte 0.16.0 → 0.18.0

package/README.md

@@ -8,7 +8,7 @@ Editor + live-preview components for [Quillmark](https://github.com/borb-sh/quil
 npm install @quillmark/svelte
 ```
 
-`svelte@^5` and `@quillmark/wasm` are peer dependencies: the session's handles cross the package boundary, so the consumer supplies the one copy both sides mint them from.
+`svelte@^5.33` and `@quillmark/wasm` are peer dependencies: the session's handles cross the package boundary, so the consumer supplies the one copy both sides mint them from.
 
 ## Subpaths
 
@@ -46,6 +46,8 @@ const session = await new Engine().open(quill, doc);
 // free() on teardown the handles you MINTED: this quill, this doc, this session.
 ```
 
+`<VisualEditor>` needs no session, and the first `open` loads the render build, so a host that mounts the editor over `doc` and `quill` first shows it without waiting on that load. The session opens behind it: `await engine.load(quill)`, then `engine.open(quill, doc)`, so its first compile reads what was typed meanwhile ([HOSTING.md](prose/canon/HOSTING.md)).
+
 ## The quill resolves from the document
 
 A stored document carries none of its quill's bytes, only a reference: `doc.quillRef` is `name@version`, persisted in the markdown itself. Resolution is **host code**: read the ref, map it to a `Quill`, open. No surface resolves, so one resolution per document holds by construction.
@@ -58,7 +60,7 @@ const session = await new Engine().open(quill, doc);
 
 `@quillmark/quiver` is one such registry, and the quill it hands back is **borrowed**: it is cached per ref and shared with every caller, so freeing it strands the next one.
 
-Opening a document that names a **different** quill is the same sequence, in order: resolve the new ref, `engine.open(quill, next)`, swap the props, then free the replaced handles that were yours to free. `<VisualEditor>` re-keys itself on the new `doc` (see below); `<Preview>` swaps by remount (`{#key session}`).
+Opening a document that names a **different** quill is the same sequence, in order: resolve the new ref, swap the editor's props, free the replaced handles that were yours to free, then open the next session behind the editor. `<VisualEditor>` re-keys itself on the new `doc` (see below); `<Preview>` swaps by remount (`{#key session}`).
 
 ## What a document is trusted to be
 

package/dist/core/codec/index.d.ts

@@ -1,6 +1,3 @@
-import 'prosemirror-view/style/prosemirror.css';
-import 'prosemirror-gapcursor/style/gapcursor.css';
-import './prose.css';
 export { rangeAnchor } from './anchor.js';
 export type { RangeAnchor } from './anchor.js';
 export { createField, emptyContent, heldAttributes, proseAttributes, proseLeafPlugins } from './field.js';

package/dist/core/rebind.svelte.js

@@ -1,16 +1,13 @@
-// The remount contract, enforced. `Preview` binds its props once, in `onMount`, and
-// observes nothing after: the vanilla core below it owns scroll position, mounted
-// slots and observer sets that a remount would discard on every apply. So a prop
-// swapped in place is reported, not dropped in silence, and thrown in a dev build.
+// The remount contract, enforced. `Preview` binds its props once, when its container
+// mounts, and observes nothing after: the vanilla core below it owns scroll position,
+// mounted slots and observer sets that a remount would discard on every apply. So a
+// prop swapped in place is reported, not dropped in silence, and thrown in a dev build.
 //
 // A guard over one prop of a set is worse than none: a consumer who learns the
 // surface complains when it ignores a prop reads silence on the rest as reactivity.
 // The snapshot is every once-bound prop, and one report names whichever went stale.
+import { DEV } from 'esm-env';
 import { reportError } from './errors.js';
-// True in a dev build whose bundler injects `import.meta.env`. Cast, since the package
-// declares no bundler's ambient types; false where nothing injects it, so a toolchain
-// that does not answer gets the report alone.
-const DEV = import.meta.env?.DEV === true;
 /**
  * Report the violation, then throw it in a dev build. Both surfaces raise it here; the
  * guards themselves stay separate, since the preview snapshots its props once and the

package/dist/core/theme.css

@@ -316,7 +316,14 @@
 	   for the type half. Asymmetric because the vertical is what leading leaves once
 	   it has taken the line box, and the horizontal is how far in the text starts,
 	   which nothing else fixes. */
-	--_qm-inset-control: var(--_qm-space) var(--_qm-space-3);
+	--_qm-inset-control-block: var(--_qm-space);
+	--_qm-inset-control: var(--_qm-inset-control-block) var(--_qm-space-3);
+	/* A box's first line, drawn: its line box and the inset over and under it. What a
+	   row of boxes lines up on however far one of them wraps, and so what a mark with no
+	   line of its own centres on to stand in that row (`BooleanField`). */
+	--_qm-box-line: calc(
+		var(--_qm-text-body) * var(--_qm-leading-body) + 2 * var(--_qm-inset-control-block)
+	);
 	/* The nesting step: the distance from one structural stroke to the next, and what
 	   makes the depths read as a ladder rather than as indents that happen to look
 	   alike. A rung because the boxes holding that distance are in two components and
@@ -349,6 +356,10 @@
 	   name it and no label of its own to fit. A threshold rather than a rhythm choice,
 	   so it does not move with `--qm-space`. */
 	--_qm-track-min: 7rem;
+	/* A prose column's floor: its cell wraps, and at `--_qm-track-min` a line holds a
+	   word, standing the row many lines tall beside cells one line tall. A multiple of
+	   the floor, so the two move together. */
+	--_qm-track-prose: calc(var(--_qm-track-min) * 2);
 
 	/* ── Type ────────────────────────────────────────────────────────────────
 	   `--qm-font-size` anchors the chrome rung; 1.125 is the ratio between adjacent

package/dist/preset/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/preview/Preview.svelte

@@ -7,7 +7,7 @@
   imperatively (e.g. after `session.apply` elsewhere).
 -->
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { untrack } from 'svelte';
 	import { createPreview, type PreviewController } from './controller.js';
 	import { guardRebind } from '../core/rebind.svelte.js';
 	import type { PreviewStringsInput } from './strings.js';
@@ -16,9 +16,9 @@
 	import type { EditorErrorHandler } from '../core/errors.js';
 
 	/**
-	 * Remount contract. `createPreview` binds once in `onMount`; a later change to any
-	 * prop it closed over (`session`, `margin`, `onPick`, `onError`, `strings`) is not
-	 * observed, and each reports `rebind-ignored` when swapped. Swap
+	 * Remount contract. `createPreview` binds once, when its container mounts; a later
+	 * change to any prop it closed over (`session`, `margin`, `onPick`, `onError`,
+	 * `strings`) is not observed, and each reports `rebind-ignored` when swapped. Swap
 	 * the session by remounting (`{#key session}`, as the playground does); drive
 	 * in-place edits through the `refresh(change)` method, not a prop change.
 	 *
@@ -44,7 +44,6 @@
 
 	let { session, margin, onPick, onError, strings, class: className, style }: Props = $props();
 
-	let containerEl: HTMLDivElement | undefined = $state();
 	let controller: PreviewController | undefined;
 
 	guardRebind(
@@ -52,20 +51,16 @@
 		'Remount the preview ({#key session}) to rebind.'
 	);
 
-	onMount(() => {
-		if (!containerEl) return;
-		controller = createPreview(session, {
-			container: containerEl,
-			margin,
-			onPick,
-			onError,
-			strings
+	function mountPreview(container: HTMLDivElement): () => void {
+		return untrack(() => {
+			const mounted = createPreview(session, { container, margin, onPick, onError, strings });
+			controller = mounted;
+			return () => {
+				mounted.destroy();
+				controller = undefined;
+			};
 		});
-		return () => {
-			controller?.destroy();
-			controller = undefined;
-		};
-	});
+	}
 
 	export function refresh(change: ChangeSet): void {
 		controller?.refresh(change);
@@ -88,7 +83,7 @@
 	}
 </script>
 
-<div bind:this={containerEl} class="qm-preview {className ?? ''}" {style} data-qm-root></div>
+<div {@attach mountPreview} class="qm-preview {className ?? ''}" {style} data-qm-root></div>
 
 <style>
 	/* A detached root: the preview is not a descendant of the editor, so it carries

package/dist/preview/Preview.svelte.d.ts

@@ -3,9 +3,9 @@ import type { LiveSession, ChangeSet } from '@quillmark/wasm';
 import type { DocPath, Landing, Place } from '../core/address.js';
 import type { EditorErrorHandler } from '../core/errors.js';
 /**
- * Remount contract. `createPreview` binds once in `onMount`; a later change to any
- * prop it closed over (`session`, `margin`, `onPick`, `onError`, `strings`) is not
- * observed, and each reports `rebind-ignored` when swapped. Swap
+ * Remount contract. `createPreview` binds once, when its container mounts; a later
+ * change to any prop it closed over (`session`, `margin`, `onPick`, `onError`,
+ * `strings`) is not observed, and each reports `rebind-ignored` when swapped. Swap
  * the session by remounting (`{#key session}`, as the playground does); drive
  * in-place edits through the `refresh(change)` method, not a prop change.
  *

package/dist/preview/index.d.ts

@@ -1,4 +1,3 @@
-import '../core/theme.css';
 export { createPreview } from './controller.js';
 export type { PreviewOptions, PreviewController } from './controller.js';
 export { default as Preview } from './Preview.svelte';

package/dist/visual/ArrayField.svelte

@@ -12,12 +12,12 @@
  neither a screen reader nor a touch user, and the count is the carrier.
 
  An `object` element collapses: the row is its own summary — a box, titled by the
- row's first short text cell ({@link rowSummary}) — and opens onto {@link ObjectField},
- one at a time. Stacking the subforms instead would nest a field one level past the
- depth the subform's own vertical draws, once per row.
- Opening is therefore part of a landing rather than something the user does first:
+ row's first short text cell ({@link rowSummary}) — and opens onto {@link ObjectField}.
+ Each row opens and closes on its own: a press on a summary toggles that row, and
+ opening one leaves every other where it stands, so a landing never folds the row the
+ author was in. Opening is part of a landing rather than something the user does first:
  `focusPath` opens the row it is aimed at before it focuses, and hands the rest of the
- walk to the subform it opened, which is how a row two closed boxes down is reached.
+ walk to that row's subform, which is how a row two closed boxes down is reached.
 
  The table (`layout: 'table'`, VISUAL_EDITOR §"Structure mirrors the schema") is the
  same row machine in another presentation: the same ids, the same splices, the same
@@ -54,6 +54,7 @@
  Removing the last row commits `[]`, the empty answer.
 -->
 <script lang="ts">
+	import { SvelteSet } from 'svelte/reactivity';
 	import { wording } from './strings.js';
 
 	// The surface's words, ambient from the editor root; the package's English
@@ -76,7 +77,6 @@
 	} from './structure.js';
 	import { splitDeep, unrouted, type DeepDiagnostic } from './diagnostics.js';
 	import type { LandingBox } from './leaves.js';
-	import { holdInView } from './hold.js';
 	import { reorder, reorderArm } from './motion.js';
 	import Icon from './icons/Icon.svelte';
 	import TextField from './TextField.svelte';
@@ -214,7 +214,7 @@
 	const rowEls: Record<string, HTMLElement | undefined> = $state({});
 	// A table row's cells, on the same key: the subform a landing and the column-keeping
 	// Enter hop reach into. Every table row is open, so there is one per row where the
-	// list holds one for the open row alone.
+	// list holds one per open row.
 	type Subform = {
 		focus: () => void;
 		focusPath: (steps: readonly PathStep[], pos?: number) => LandingBox;
@@ -226,14 +226,14 @@
 		delete els[id];
 		delete rowEls[id];
 		delete cellEls[id];
+		delete objEls[id];
+		open.delete(id);
 	}
 
-	// ── Object elements: one open at a time ──────────────────────────────────────
-	// So an array of ten records is ten lines and one figure, whatever its length.
-	let openId = $state<string | undefined>(undefined);
-	// The open row's subform, for the landing below. One entry, never a map: only one
-	// row is open, so the ref is singular by the same rule the state is.
-	let openObjEl = $state<Subform | undefined>();
+	// ── Object elements: each row open on its own ────────────────────────────────
+	const open = new SvelteSet<string>();
+	// An open row's subform, on the row's id: the landing below walks into it.
+	const objEls: Record<string, Subform | undefined> = $state({});
 
 	/** A collapsed row's own words, or `undefined` while it has none. */
 	function elementTitle(k: number): string | undefined {
@@ -244,12 +244,9 @@
 	function untitled(k: number): string {
 		return label != null ? t.strings.elementUntitled(label, k + 1) : String(k + 1);
 	}
-	/** The summary is the anchor: a row closing above it is what would carry it off the fold,
-	 *  and a row's subform hangs under its own summary (`hold.ts`). */
-	function toggleRow(id: string, summary: HTMLElement): void {
-		holdInView(summary, () => {
-			openId = openId === id ? undefined : id;
-		});
+	function toggleRow(id: string): void {
+		if (open.has(id)) open.delete(id);
+		else open.add(id);
 	}
 	const rowName = (k: number): string | undefined =>
 		label != null ? `${label} ${k + 1}` : undefined;
@@ -300,7 +297,7 @@
 		onCommit(next);
 		// A row added is a row to fill in, so an object element arrives open: landing on
 		// a collapsed empty summary would make adding one a two-press gesture.
-		if (control === 'object' && !table) openId = id;
+		if (control === 'object' && !table) open.add(id);
 		void focusAfterFlush(id, column);
 	}
 	function add(): void {
@@ -319,9 +316,6 @@
 		const next = ids.filter((_, i) => i !== k);
 		ids = next;
 		drop(dropped);
-		// The open row can be the one removed; `openId` is cleared with it rather than
-		// left naming an element that has gone.
-		if (openId === dropped) openId = undefined;
 		onCommit(arr.filter((_, i) => i !== k));
 		void focusAfterFlush(next[Math.max(k - 1, 0)], column, fromRemove);
 	}
@@ -370,7 +364,8 @@
 	/** An object row's landing: inside the subform when that row is the open one, on
 	 *  the row's own summary otherwise — a collapsed row's control is its summary. */
 	function focusObjectRow(id: string): void {
-		if (id === openId && openObjEl) return openObjEl.focus();
+		const sub = objEls[id];
+		if (open.has(id) && sub) return sub.focus();
 		rowEls[id]?.querySelector<HTMLElement>('.qm-element-summary')?.focus();
 	}
 	/** The box an arrival wash blooms in (`leaves.ts`, `core/bloom.ts`): the elements,
@@ -413,10 +408,11 @@
 			return rowEls[id];
 		}
 		if (control === 'object') {
-			openId = id;
+			open.add(id);
 			return (async () => {
 				if (!(await span.resumes(tick()))) return undefined;
-				if (rest.length && openObjEl) return (await openObjEl.focusPath(rest, pos)) ?? rowEls[id];
+				const sub = objEls[id];
+				if (rest.length && sub) return (await sub.focusPath(rest, pos)) ?? rowEls[id];
 				focusObjectRow(id);
 				return rowEls[id];
 			})();
@@ -539,8 +535,7 @@
 </script>
 
 <div
-	class="qm-array"
-	class:empty={ids.length === 0}
+	class={['qm-array', { empty: ids.length === 0 }]}
 	role="group"
 	aria-labelledby={label != null ? labelId : undefined}
 	aria-describedby={description ? descriptionId : undefined}
@@ -579,8 +574,7 @@
 	     each block's one child: a branch inside the block would stand between them. -->
 	{#if table}
 		<div
-			class="qm-array-rows qm-array-table"
-			class:empty={ids.length === 0}
+			class={['qm-array-rows qm-array-table', { empty: ids.length === 0 }]}
 			data-default={defaulted ? '' : undefined}
 			bind:this={rowsEl}
 		>
@@ -591,7 +585,12 @@
 				     column's rather than any one cell's. -->
 				<div class="qm-array-table-head">
 					{#each columns as [key, sub] (key)}
-						<div class="qm-array-table-col" class:mark={controlKind(sub) === 'boolean'}>
+						<div
+							class={[
+								'qm-array-table-col',
+								{ mark: controlKind(sub) === 'boolean', prose: controlKind(sub) === 'prose' }
+							]}
+						>
 							<FieldLabel
 								label={columnTitle(key, sub)}
 								required={obliged(sub)}
@@ -621,8 +620,7 @@
 		</div>
 	{:else if control === 'object'}
 		<div
-			class="qm-array-rows"
-			class:empty={ids.length === 0}
+			class={['qm-array-rows', { empty: ids.length === 0 }]}
 			data-default={defaulted ? '' : undefined}
 			bind:this={rowsEl}
 		>
@@ -631,8 +629,7 @@
 				<!-- The handler catches a key from the controls inside the row and adds no
 				     interaction of the row's own: the row is no tab stop. -->
 				<div
-					class="qm-array-row qm-element"
-					class:open={openId === id}
+					class={['qm-array-row qm-element', { open: open.has(id) }]}
 					bind:this={rowEls[id]}
 					animate:reorder={arm.armed}
 					onkeydown={(e) => onRowKey(e, k)}
@@ -645,8 +642,8 @@
 						<button
 							type="button"
 							class="qm-control-box qm-focus-ring qm-element-summary"
-							aria-expanded={openId === id}
-							onclick={(e) => toggleRow(id, e.currentTarget)}
+							aria-expanded={open.has(id)}
+							onclick={() => toggleRow(id)}
 						>
 							<!-- Leading, and it rotates: trailing is the figure for pushing a new
 							     screen, where this unfolds in place. Same glyph, same rotation and
@@ -662,9 +659,9 @@
 							{@render rowActions(k)}
 						</div>
 					</div>
-					{#if openId === id}
+					{#if open.has(id)}
 						<ObjectField
-							bind:this={openObjEl}
+							bind:this={objEls[id]}
 							value={(arr[k] ?? {}) as Record<string, unknown>}
 							properties={items?.properties}
 							label={rowName(k)}
@@ -683,8 +680,7 @@
 		</div>
 	{:else}
 		<div
-			class="qm-array-rows"
-			class:empty={ids.length === 0}
+			class={['qm-array-rows', { empty: ids.length === 0 }]}
 			data-default={defaulted ? '' : undefined}
 			bind:this={rowsEl}
 		>
@@ -1044,6 +1040,9 @@
 	.qm-array-table-col.mark {
 		min-width: 0;
 	}
+	.qm-array-table-col.prose {
+		min-width: var(--_qm-track-prose);
+	}
 	/* The remove is the row's last track, pinned to the end edge of the box the table
 	 scrolls in: sticky, so it rests in its track while the table fits and rides over
 	 the cells once the box scrolls, on the card's plane so what passes under it is
@@ -1066,8 +1065,12 @@
 		background: var(--_qm-surface);
 		box-shadow: 0 0 0 var(--_qm-ring-reach) var(--_qm-surface);
 	}
+	/* The glyph stands on the row's first line with the cells, however far the slab
+	 stretches under it. */
 	.qm-array-table-row > .qm-remove {
 		align-self: stretch;
+		align-items: start;
+		padding-block-start: calc((var(--_qm-box-line) - var(--_qm-glyph-control)) / 2);
 		height: auto;
 		border-radius: var(--_qm-radius-inner);
 		color: var(--_qm-ink-label);

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

@@ -2,7 +2,6 @@ import type { Content, PathStep, QuillFieldSchema } from '@quillmark/wasm';
 import { type ArrayLayout } from './structure.js';
 import { type DeepDiagnostic } from './diagnostics.js';
 import type { LandingBox } from './leaves.js';
-import './controls.css';
 interface Props {
     value: unknown[] | undefined;
     /** The declared `default:`: the rows an unset array draws, which a gesture takes. */

package/dist/visual/BooleanField.svelte

@@ -13,7 +13,6 @@
 -->
 <script lang="ts">
 	import { Switch } from 'bits-ui';
-	import { syncedLocal } from './synced.svelte.js';
 	import './controls.css';
 
 	interface Props {
@@ -36,18 +35,14 @@
 	}
 	let { value, fallback, optional = false, label, id, describedBy, onCommit }: Props = $props();
 
-	// Local toggle state synced to `value`; own-toggles stay local, only an external
-	// change reconciles back in (see `syncedLocal`). The primitive is driven
-	// controlled (`checked` + `onCheckedChange`, never `bind:`) so reconciliation
-	// stays the package's: a two-way bind hands the primitive a lane around it,
-	// which repeats the reconciliation hazard in miniature. `undefined` is the unset
-	// optional cell, the one state with no default to stand in for it.
-	const local = syncedLocal<boolean | undefined>(
-		() => value ?? fallback ?? (optional ? undefined : false)
-	);
-	const unset = $derived(local.value === undefined);
+	// The primitive is driven controlled (`checked` + `onCheckedChange`, never `bind:`)
+	// so reconciliation stays the package's: a two-way bind hands the primitive a lane
+	// around it, which repeats the reconciliation hazard in miniature. `undefined` is
+	// the unset optional cell, the one state with no default to stand in for it.
+	let local = $derived<boolean | undefined>(value ?? fallback ?? (optional ? undefined : false));
+	const unset = $derived(local === undefined);
 	const tristate = $derived(
-		optional ? { role: 'checkbox', 'aria-checked': unset ? ('mixed' as const) : !!local.value } : {}
+		optional ? { role: 'checkbox', 'aria-checked': unset ? ('mixed' as const) : !!local } : {}
 	);
 </script>
 
@@ -57,13 +52,13 @@
 <span class="qm-toggle-wrap" data-unset={unset ? '' : undefined}>
 	<Switch.Root
 		class="qm-toggle qm-focus-ring qm-tap-floor"
-		checked={!!local.value}
+		checked={!!local}
 		{id}
 		aria-label={id ? undefined : label}
 		aria-describedby={describedBy}
 		onCheckedChange={(v) => {
 			// From unset the primitive reads the unchecked face, so its toggle is `true`.
-			local.value = v;
+			local = v;
 			onCommit(v);
 		}}
 	>
@@ -74,6 +69,13 @@
 </span>
 
 <style>
+	/* The switch stands on the first line of the boxes beside it: a row of controls tops
+	 out together, and a mark carries no line of its own to sit on. */
+	.qm-toggle-wrap {
+		display: flex;
+		align-items: center;
+		min-height: var(--_qm-box-line);
+	}
 	/* A primitive renders its own element, which a scoped selector cannot reach:
 	 styled through the wrapper with `:global`. */
 	/* The track is the drawn box and the target is `.qm-tap-floor`'s (controls.css): a

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

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