@quillmark/svelte 0.17.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
 

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/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}
 		>
@@ -592,9 +586,10 @@
 				<div class="qm-array-table-head">
 					{#each columns as [key, sub] (key)}
 						<div
-							class="qm-array-table-col"
-							class:mark={controlKind(sub) === 'boolean'}
-							class:prose={controlKind(sub) === 'prose'}
+							class={[
+								'qm-array-table-col',
+								{ mark: controlKind(sub) === 'boolean', prose: controlKind(sub) === 'prose' }
+							]}
 						>
 							<FieldLabel
 								label={columnTitle(key, sub)}
@@ -625,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}
 		>
@@ -635,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)}
@@ -649,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
@@ -666,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)}
@@ -687,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}
 		>

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);
 		}}
 	>

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

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

package/dist/visual/Card.svelte

@@ -9,7 +9,6 @@
 	// Ambient from the editor root, with the package's English off-tree, so this
 	// component renders standalone too.
 	const t = wording();
-	import { untrack } from 'svelte';
 	import Icon from './icons/Icon.svelte';
 	import type { Document, Quill, Addr, Diagnostic } from '@quillmark/wasm';
 	import type { EditorErrorHandler } from '../core/errors.js';
@@ -73,15 +72,7 @@
 		leaves
 	}: Props = $props();
 
-	// Local title reconcile (external change only), like the scalar controls.
-	// svelte-ignore state_referenced_locally
-	let localTitle = $state(card.titleOverride);
-	$effect(() => {
-		const incoming = card.titleOverride;
-		untrack(() => {
-			if (incoming !== localTitle) localTitle = incoming;
-		});
-	});
+	let localTitle = $derived(card.titleOverride);
 
 	// The pre-edit value Escape rolls back to; the rename itself stays live on input.
 	let titleAtFocus = '';
@@ -209,10 +200,8 @@
  ancestor and nothing else marks the box its guidance belongs in. -->
 <section
 	bind:this={el}
-	class="qm-card"
+	class={['qm-card', { 'qm-main': card.isMain, 'qm-unschemable': card.unschemable }]}
 	data-qm-card
-	class:qm-main={card.isMain}
-	class:qm-unschemable={card.unschemable}
 >
 	{#if card.unschemable}
 		{@render recoveryShell()}
@@ -253,9 +242,7 @@
 		<div class="qm-card-body">
 			{#if hasMeta}
 				<div
-					class="qm-card-meta"
-					class:qm-meta-top={!card.isMain}
-					class:qm-meta-bottom={card.hasBody}
+					class={['qm-card-meta', { 'qm-meta-top': !card.isMain, 'qm-meta-bottom': card.hasBody }]}
 				>
 					{#each ungrouped as section (section.group ?? '_ungrouped')}
 						<div class="qm-section">
@@ -266,14 +253,14 @@
 					<!-- One open at a time. Rendered only when a card has groups, so an empty
 				     accordion does not stand a gap under the ungrouped fields. -->
 					{#if grouped.length}
-						<div class="qm-groups" class:qm-instant={!animate}>
+						<div class={['qm-groups', { 'qm-instant': !animate }]}>
 							{#each grouped as section (section.group)}
 								{@const group = section.group as string}
 								{@const isOpen = expanded === group}
 								{@const panelId = ops.panelId(group)}
 								{@const headIds = section.head ? ops.domIds(section.head.name) : undefined}
 								{@const headHint = section.head?.description}
-								<div class="qm-group" class:qm-open={isOpen}>
+								<div class={['qm-group', { 'qm-open': isOpen }]}>
 									<!-- A flat field alone in its section is named by the header, which
 								     takes its label id and parks its description: the field draws no
 								     label of its own to say the section's name twice. -->

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

@@ -1,4 +1,3 @@
-import './controls.css';
 interface Props {
     isFirst: boolean;
     isLast: boolean;

package/dist/visual/DateField.svelte

@@ -25,9 +25,9 @@
  values are data, not input: `parseDate` throws on anything malformed, so a bad
  string degrades to an empty field rather than taking the editor down with it.
 
- `syncedLocal` reconciles by identity, so the local must hold the string, not the
- parsed value: a fresh `CalendarDate` is never `===` the last one, which would
- make every reconcile fire and re-render all seven segments on each commit.
+ The local is a `$derived`, which compares by identity, so it holds the string, not
+ the parsed value: a fresh `CalendarDate` is never `===` the last one, so the
+ re-derivation each commit causes would re-render all seven segments.
 
  The ghost is the default's digits, not a format hint. An unset field
  carrying a `default:` prints the default's digits in the segments at the default
@@ -51,7 +51,6 @@
 	import { getLocalTimeZone, parseDate, today, type DateValue } from '@internationalized/date';
 	import Icon from './icons/Icon.svelte';
 	import { wording } from './strings.js';
-	import { syncedLocal } from './synced.svelte.js';
 	import './controls.css';
 
 	const t = wording();
@@ -109,31 +108,29 @@
 
 	const fallbackDate = $derived(toDateValue(fallback?.slice(0, 10) ?? ''));
 	/** The default is the primitive's value: from entering an unset field until an
-	 *  edit, a cleared segment or leaving. Part of the projection, so a reconcile
+	 *  edit, a cleared segment or leaving. Part of the projection, so a re-derivation
 	 *  neither drops a seat nor restores one over the segments a clear left. */
 	let seat = $state(false);
-	// Local value synced to `value` as a string (see the identity note above);
-	// own-edits stay local, only an external change reconciles back in. Driven
-	// controlled (`value` + `onValueChange`, never `bind:`) so reconciliation stays
-	// the package's.
-	const local = syncedLocal(
-		() => value?.slice(0, 10) ?? (seat && fallbackDate ? fallbackDate.toString() : '')
+	// Driven controlled (`value` + `onValueChange`, never `bind:`) so reconciliation
+	// stays the package's.
+	let local = $derived(
+		value?.slice(0, 10) ?? (seat && fallbackDate ? fallbackDate.toString() : '')
 	);
-	const parsed = $derived(toDateValue(local.value));
+	const parsed = $derived(toDateValue(local));
 	// The date the empty segments ghost, or undefined when there is nothing to ghost:
 	// the field is unset and the default has a date form. A non-blank local that
 	// fails to parse is AUTHORED-but-malformed, which the empty field states
 	// honestly: the ghost would claim it unset. Held as the parsed value rather than
 	// a boolean so the substitution below narrows on the one fact it needs.
-	const ghost = $derived(local.value === '' ? fallbackDate : undefined);
-	const seated = $derived(value == null && seat && local.value !== '');
+	const ghost = $derived(local === '' ? fallbackDate : undefined);
+	const seated = $derived(value == null && seat && local !== '');
 	/** Who put `today` here, while the field follows the render date. */
 	const follows = $derived(
-		local.value === TODAY ? 'authored' : value == null && fallback === TODAY ? 'default' : undefined
+		local === TODAY ? 'authored' : value == null && fallback === TODAY ? 'default' : undefined
 	);
 
 	function write(next: string): void {
-		local.value = next;
+		local = next;
 		seat = false;
 		onCommit(next);
 	}
@@ -207,7 +204,7 @@
 			// seated default or `today` would write it.
 			const next = d?.toString() ?? '';
 			if (next === (parsed?.toString() ?? '')) return;
-			local.value = next;
+			local = next;
 			if (!d) seat = false;
 			onCommit(d?.toString());
 		}}

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

@@ -1,4 +1,3 @@
-import './controls.css';
 interface Props {
     value: string | undefined;
     /** The declared `default:` (`YYYY-MM-DD` or `today`): parsed for display only,

package/dist/visual/EnumField.svelte

@@ -15,7 +15,6 @@
 <script lang="ts">
 	import { Select } from 'bits-ui';
 	import Icon from './icons/Icon.svelte';
-	import { syncedLocal } from './synced.svelte.js';
 	import { wording } from './strings.js';
 	import './controls.css';
 
@@ -67,23 +66,21 @@
 	// the like), so it never collides with a real option.
 	const UNSET = '__qm_unset__';
 
-	// Local selection synced to `value` (sentinel when unauthored); own-picks stay
-	// local, only an external change reconciles back in (see `syncedLocal`). Driven
-	// controlled (`value` + `onValueChange`, never `bind:`) so reconciliation stays
-	// the package's rather than the primitive's.
-	const local = syncedLocal(() => value ?? UNSET);
+	// Driven controlled (`value` + `onValueChange`, never `bind:`) so reconciliation
+	// stays the package's rather than the primitive's.
+	let local = $derived(value ?? UNSET);
 
 	/** The blank has no glyph of its own: the quill's `ui.blank_title` stands in for
 	 * it, else an em dash. */
 	const dash = (v: string | undefined) => v || blankTitle || '—';
 
-	const unset = $derived(local.value === UNSET);
+	const unset = $derived(local === UNSET);
 	/** The ghost is a member the render prints, rather than a word for the blank or for
 	 *  `none`: it draws at the default rung (theme.css). */
 	const ghostsMember = $derived(!optional && !!fallback);
 	const ghostText = $derived(optional ? t.strings.optionalGhost : dash(fallback));
 	/** What the closed trigger shows: the pick, or the ghosted default while unset. */
-	const shown = $derived(unset ? ghostText : dash(local.value));
+	const shown = $derived(unset ? ghostText : dash(local));
 
 	/** The root to portal into: `document.body` would escape the consumer's dials
 	 * along with the editor's subtree. `undefined` falls back to bits-ui's default. */
@@ -99,10 +96,10 @@
 	<Select.Root
 		type="single"
 		allowDeselect={false}
-		value={local.value}
+		value={local}
 		onValueChange={(v) => {
 			if (v == null) return;
-			local.value = v;
+			local = v;
 			// Sentinel → unset (parent `removeField`, default renders); any real pick
 			// (incl. the default value) → a genuine write.
 			onCommit(v === UNSET ? undefined : v);
@@ -152,12 +149,12 @@
 						     policy when it is the one selected: a listbox whose selected value
 						     has no row shows nothing for what the document says, and offers none
 						     for the primitive to mark, type-ahead to, or key onto
-						     (VISUAL_EDITOR §"Enum policy"). Off `local.value`, not `value`: the
+						     (VISUAL_EDITOR §"Enum policy"). Off `local`, not `value`: the
 						     row that exists is the row the control has selected, through the
 						     window where an own pick has not reconciled back. -->
 						{#each values as v (v)}
 							{@const allowed = optionAllowed?.(v) !== false}
-							{#if allowed || enumDisallowed === 'disable' || v === local.value}
+							{#if allowed || enumDisallowed === 'disable' || v === local}
 								<Select.Item
 									class="qm-menu-item qm-select-item"
 									value={v}

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

@@ -1,4 +1,3 @@
-import './controls.css';
 interface Props {
     value: string | undefined;
     values: string[];