@quillmark/svelte 0.17.0 → 0.18.0

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[];

package/dist/visual/VisualEditorInner.svelte

@@ -19,6 +19,7 @@
 -->
 <script lang="ts">
 	import { onDestroy, tick } from 'svelte';
+	import { SvelteMap } from 'svelte/reactivity';
 	import { DropdownMenu } from 'bits-ui';
 	import { isQuillmarkError, MAIN_CARD_ADDR } from '@quillmark/wasm';
 	import {
@@ -135,14 +136,7 @@
 	// Local commit-error diagnostics (VISUAL_EDITOR §Diagnostics, producer #2),
 	// id-keyed rather than positional so an error stays pinned to its field across a
 	// card reorder.
-	let commitErrors = $state(new Map<string, RoutedDiagnostic>());
-	/** Edit the commit-error map copy-on-write: a `$state` Map is not deeply
-	 * reactive, so a mutation in place re-derives nothing. */
-	function editCommitErrors(edit: (m: Map<string, RoutedDiagnostic>) => void): void {
-		const next = new Map(commitErrors);
-		edit(next);
-		commitErrors = next;
-	}
+	const commitErrors = new SvelteMap<string, RoutedDiagnostic>();
 
 	const kinds = $derived(Object.keys(quill.schema.card_kinds ?? {}));
 
@@ -350,14 +344,14 @@
 					w.card(i).set(name, value);
 				}
 			}
-			if (commitErrors.has(keyStr)) editCommitErrors((m) => m.delete(keyStr));
+			commitErrors.delete(keyStr);
 			bump('field', id, makeAddr(id, isMain, name));
 		} catch (e) {
 			const diagnostic: Diagnostic = (isQuillmarkError(e) ? e.diagnostics[0] : undefined) ?? {
 				severity: 'error',
 				message: errorMessage(e)
 			};
-			editCommitErrors((m) => m.set(keyStr, { key, diagnostic }));
+			commitErrors.set(keyStr, { key, diagnostic });
 			// Both channels, deliberately: the diagnostic pins to the field on
 			// screen, the error reaches the app's sink (core/errors.ts).
 			reportError(onError, {
@@ -462,9 +456,7 @@
 		// because nothing else will ever clear it.
 		const prefix = `${id}:`;
 		const stale = [...commitErrors.keys()].filter((k) => k.startsWith(prefix));
-		// Guarded: `editCommitErrors` clones the map, and a removal matching nothing has
-		// nothing to re-derive.
-		if (stale.length) editCommitErrors((m) => stale.forEach((k) => m.delete(k)));
+		for (const k of stale) commitErrors.delete(k);
 		// No addr: the removed card has none left and every survivor's shifted. The
 		// stack changed, not a leaf, and the id is the only handle the removal leaves.
 		bump('structure', id);
@@ -937,7 +929,7 @@
 		 gaps between cards stay bare: the strip is the gap, and the pill each fills on
 		 hover draws what a label would state, the space the new card takes. -->
 		{@const marked = atIndex === model.cards.length}
-		<div class="qm-add-card" class:qm-add-card-marked={marked}>
+		<div class={['qm-add-card', { 'qm-add-card-marked': marked }]}>
 			<!-- Marked, the words are the accessible name and no `aria-label` doubles
 			 them; bare, the same words land as the label, the strip having no
 			 geometry to carry them. -->

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

@@ -2,7 +2,6 @@ import { type DocPath, type Landing } from '../core/address.js';
 import type { VisualEditorProps } from './props.js';
 import type { CardId } from './signals.js';
 import type { FieldController } from '../core/codec/index.js';
-import './controls.css';
 declare const VisualEditorInner: import("svelte").Component<VisualEditorProps, {
     setCaret: (at: Landing) => Promise<void>;
     getActiveLeaf: () => FieldController | undefined;

package/dist/visual/index.d.ts

@@ -1,4 +1,3 @@
-import '../core/theme.css';
 export { default as VisualEditor } from './VisualEditor.svelte';
 export type { VisualEditorProps } from './props.js';
 export { createField } from '../core/codec/index.js';

package/dist/visual/structure.d.ts

@@ -114,6 +114,10 @@ export declare function resolvedByCardIndex(resolved: Resolved | undefined): Map
  * use (`source === 'default'`), else undefined: an `authored` field shows its value,
  * a `blank` field has no default to show. */
 export declare function ghostDefault(row: ResolvedField | undefined): unknown;
+/** A stored `boolean` cell as the render reads it: a boolean, `true` or `false` in any
+ * case, or a number by whether it is non-zero; undefined where the render refuses the
+ * value. The engine's coercion, restated, so the suite holds it to `reader.resolve()`. */
+export declare function renderedBoolean(value: unknown): boolean | undefined;
 /** A ghost value's string form, or undefined for null/object (only text ghosts
  * render a placeholder). A scalar's resolved default reads through it; a content
  * field's resolves as `Content`, which a prose leaf reads by its text instead

package/dist/visual/structure.js

@@ -45,6 +45,18 @@ export function resolvedByCardIndex(resolved) {
 export function ghostDefault(row) {
     return row?.source === 'default' ? row.value : undefined;
 }
+/** A stored `boolean` cell as the render reads it: a boolean, `true` or `false` in any
+ * case, or a number by whether it is non-zero; undefined where the render refuses the
+ * value. The engine's coercion, restated, so the suite holds it to `reader.resolve()`. */
+export function renderedBoolean(value) {
+    if (typeof value === 'boolean')
+        return value;
+    if (typeof value === 'number')
+        return value !== 0;
+    if (typeof value === 'string' && /^(true|false)$/i.test(value))
+        return value.toLowerCase() === 'true';
+    return undefined;
+}
 /** A ghost value's string form, or undefined for null/object (only text ghosts
  * render a placeholder). A scalar's resolved default reads through it; a content
  * field's resolves as `Content`, which a prose leaf reads by its text instead

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@quillmark/svelte",
-	"version": "0.17.0",
+	"version": "0.18.0",
 	"description": "Editor, live-preview and source surfaces over a Quillmark WASM session.",
 	"repository": {
 		"type": "git",
@@ -48,7 +48,10 @@
 			"svelte": "./dist/visual/index.js",
 			"default": "./dist/visual/index.js"
 		},
-		"./preset": "./dist/preset/index.css"
+		"./preset": {
+			"types": "./dist/preset/index.d.ts",
+			"default": "./dist/preset/index.css"
+		}
 	},
 	"files": [
 		"dist",
@@ -57,21 +60,22 @@
 	],
 	"sideEffects": true,
 	"scripts": {
-		"build": "svelte-package",
+		"build": "svelte-package && node scripts/strip-dts-css.mjs",
 		"prepare": "npm run build",
 		"prepack": "rm -rf dist && npm run build",
 		"check:pack": "publint",
 		"test": "vitest run",
 		"test:watch": "vitest",
-		"check": "svelte-check --tsconfig ./tsconfig.json"
+		"check": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings"
 	},
 	"peerDependencies": {
-		"@quillmark/wasm": ">=0.121.0-0",
-		"svelte": "^5.0.0"
+		"@quillmark/wasm": ">=0.122.0-0",
+		"svelte": "^5.33.0"
 	},
 	"dependencies": {
 		"@internationalized/date": "^3.12.2",
-		"bits-ui": "^2.0.0",
+		"bits-ui": "^2.19.0",
+		"esm-env": "^1.2.2",
 		"prosemirror-commands": "1.7.1",
 		"prosemirror-gapcursor": "1.3.2",
 		"prosemirror-history": "1.5.0",
@@ -84,15 +88,15 @@
 		"prosemirror-view": "1.42.1"
 	},
 	"devDependencies": {
-		"@sveltejs/package": "^2.5.0",
-		"@sveltejs/vite-plugin-svelte": "^6.0.0",
-		"@types/node": "^26.1.1",
-		"jsdom": "^29.1.1",
-		"publint": "^0.3.0",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.1.0",
-		"typescript": "^5.7.0",
-		"vitest": "^4.1.10"
+		"@sveltejs/package": "^3.0.0",
+		"@sveltejs/vite-plugin-svelte": "^7.3.0",
+		"@types/node": "^24.19.1",
+		"jsdom": "^30.1.0",
+		"publint": "^0.3.25",
+		"svelte": "^5.54.0",
+		"svelte-check": "^4.7.6",
+		"typescript": "^6.0.0",
+		"vitest": "^5.0.0"
 	},
 	"publishConfig": {
 		"access": "public"

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

@@ -1,15 +0,0 @@
-/** A settable local synced to an external projection. Bind `.value` in the
- * template; assign `.value` on input. */
-export interface SyncedLocal<T> {
-    value: T;
-}
-/**
- * Seed a local from `project` and reconcile only an external change into it.
- * `project` reads the reactive source (a prop) and maps it to the local's type:
- * ` => value ?? ''`, ` => (value != null ? String(value) : '')`, etc. The
- * seed is `untrack`ed (the ongoing sync is the `$effect`, not the initializer),
- * and each reconcile is `untrack`ed so an own-edit write never re-triggers it.
- * Reassignment through the `value` setter is a plain local write; only a changed
- * `project` result flows the other way.
- */
-export declare function syncedLocal<T>(project: () => T): SyncedLocal<T>;

package/dist/visual/synced.svelte.js

@@ -1,34 +0,0 @@
-// The controlled-local reconcile shared by the scalar controls (TextField /
-// NumberField / DateField / BooleanField / EnumField). Each seeds a local from a
-// projection of its `value` prop and reconciles only an external change back into
-// the local: own edits stay `untrack`ed, so typing never re-runs the sync and
-// resets the caret. One copy for all five, rather than a character-identical block
-// in each (VISUAL_EDITOR §Surface).
-import { untrack } from 'svelte';
-/**
- * Seed a local from `project` and reconcile only an external change into it.
- * `project` reads the reactive source (a prop) and maps it to the local's type:
- * ` => value ?? ''`, ` => (value != null ? String(value) : '')`, etc. The
- * seed is `untrack`ed (the ongoing sync is the `$effect`, not the initializer),
- * and each reconcile is `untrack`ed so an own-edit write never re-triggers it.
- * Reassignment through the `value` setter is a plain local write; only a changed
- * `project` result flows the other way.
- */
-export function syncedLocal(project) {
-    let local = $state(untrack(project));
-    $effect(() => {
-        const incoming = project();
-        untrack(() => {
-            if (incoming !== local)
-                local = incoming;
-        });
-    });
-    return {
-        get value() {
-            return local;
-        },
-        set value(v) {
-            local = v;
-        }
-    };
-}