@quillmark/svelte 0.8.0 → 0.10.0

package/dist/visual/ArrayField.svelte

@@ -116,7 +116,10 @@
 		if (ids.length === n) return;
 		if (ids.length < n) ids = [...ids, ...seq.take(n - ids.length)];
 		else {
-			for (const id of ids.slice(n)) delete els[id];
+			for (const id of ids.slice(n)) {
+				delete els[id];
+				delete rowEls[id];
+			}
 			ids = ids.slice(0, n);
 		}
 	});
@@ -138,6 +141,11 @@
 	// {@link Card} keeps its header/panel refs in.
 	const els: Record<string, { focus: () => void; setCaret?: (pos: number) => void } | undefined> =
 		$state({});
+	// The rows' own boxes, on the same key and dropped on the same paths: what an
+	// element landing blooms in ({@link focusElement}), and what an object row's
+	// summary is found through. A row is a box whatever its element type, so the two
+	// element shapes register alike.
+	const rowEls: Record<string, HTMLElement | undefined> = $state({});
 	let addEl: HTMLButtonElement | undefined = $state();
 	let rootEl: HTMLElement | undefined = $state();
 	let rowsEl: HTMLElement | undefined = $state();
@@ -218,6 +226,7 @@
 		const next = ids.filter((_, i) => i !== k);
 		ids = next;
 		delete els[dropped];
+		delete rowEls[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;
@@ -241,13 +250,7 @@
 	 *  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();
-		// Matched on the dataset: spelling an id into a selector needs `CSS.escape`,
-		// which the test DOM does not carry.
-		const rows = rowsEl?.querySelectorAll<HTMLElement>('[data-qm-el]') ?? [];
-		for (const row of rows) {
-			if (row.dataset.qmEl === id)
-				return row.querySelector<HTMLElement>('.qm-element-summary')?.focus();
-		}
+		rowEls[id]?.querySelector<HTMLElement>('.qm-element-summary')?.focus();
 	}
 	/** The box an arrival wash blooms in (`leaves.ts`, `core/bloom.ts`): the elements,
 	 * not the header above them. This component owns the field's label, so the wrapper
@@ -266,21 +269,33 @@
 	 *
 	 * An absent `pos` is the placement rung, exactly as on `Landing`. A row that takes
 	 * no offset gets the bare focus: the JSON element, whose textarea has no coordinate
-	 * to spend one in, and a `string` element, which the compile never addresses. */
-	export function focusElement(k: number, pos?: number): void {
+	 * to spend one in, and a `string` element, which the compile never addresses.
+	 *
+	 * The row's box comes back with the landing: the arrival wash is the address's own
+	 * granularity, and one row is what an element address named. A fallback to the
+	 * field answers `undefined`, which is the field's box again (`leaves.ts`). */
+	export function focusElement(k: number, pos?: number): HTMLElement | undefined {
+		const id = ids[k];
 		// A collapsed row holds no control for a caret to land in, so opening it is part
 		// of the landing rather than something the user does first: a preview click that
 		// resolves into an element has to arrive somewhere the caret can sit.
 		if (control === 'object') {
-			const id = ids[k];
-			if (id === undefined) return focus();
+			if (id === undefined) {
+				focus();
+				return undefined;
+			}
 			openId = id;
-			return void focusAfterFlush(id);
+			void focusAfterFlush(id);
+			return rowEls[id];
 		}
-		const el = els[ids[k]];
-		if (!el) return focus();
-		if (pos != null && el.setCaret) return el.setCaret(pos);
-		el.focus();
+		const el = id === undefined ? undefined : els[id];
+		if (!el) {
+			focus();
+			return undefined;
+		}
+		if (pos != null && el.setCaret) el.setCaret(pos);
+		else el.focus();
+		return rowEls[id];
 	}
 	/** Focus element `id` after the flush, never in the same tick: a mutation commits
 	 * the array by value, so the parent re-derives and the row does not exist until
@@ -362,7 +377,7 @@
 			{#if control === 'object'}
 				{@const open = openId === id}
 				{@const shown = elementTitle(k)}
-				<div class="qm-array-row qm-element" class:open data-qm-el={id}>
+				<div class="qm-array-row qm-element" class:open bind:this={rowEls[id]}>
 					<!-- The head is the row in collapsed form, and it is a box: the element IS
 					     a value, the way the enum trigger is, and the remove slab's grammar
 					     (the box's two end-side corners) needs corners to take. So a list of
@@ -404,7 +419,7 @@
 					{/if}
 				</div>
 			{:else}
-				<div class="qm-array-row">
+				<div class="qm-array-row" bind:this={rowEls[id]}>
 					{#if control === 'prose'}
 						<ProseValue
 							bind:this={els[id]}
@@ -477,6 +492,10 @@
 		position: relative;
 		display: grid;
 		grid-template-columns: minmax(0, 1fr);
+		/* The corners the row's wash takes, an element landing blooming here rather than
+		 over the whole list (`focusElement`): the row draws no box of its own, so the
+		 radius it lends the wash is the one its element's box draws. */
+		border-radius: var(--_qm-radius-inner);
 	}
 	/* The end inset the slab stands in, taken off whichever box the element drew:
 	 `.qm-input` is the text element and the JSON textarea, `.qm-control-box` the prose

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

@@ -32,7 +32,7 @@ interface Props {
 declare const ArrayField: import("svelte").Component<Props, {
     focus: () => void;
     washBox: () => HTMLElement | undefined;
-    focusElement: (k: number, pos?: number) => void;
+    focusElement: (k: number, pos?: number) => HTMLElement | undefined;
 }, "">;
 type ArrayField = ReturnType<typeof ArrayField>;
 export default ArrayField;

package/dist/visual/Field.svelte

@@ -147,7 +147,7 @@
 	let arrayEl = $state<
 		| {
 				focus: () => void;
-				focusElement: (k: number, pos?: number) => void;
+				focusElement: (k: number, pos?: number) => HTMLElement | undefined;
 				washBox: () => HTMLElement | undefined;
 		  }
 		| undefined
@@ -159,9 +159,11 @@
 		document.getElementById(domIds.control)?.focus();
 	}
 	/** The array's per-ELEMENT landing, for the addresses the preview mints under an
-	 *  array field (`leaves.ts`); read at the call, so it tracks the mounted repeater. */
-	function focusElement(k: number, pos?: number): void {
-		arrayEl?.focusElement(k, pos);
+	 *  array field (`leaves.ts`); read at the call, so it tracks the mounted repeater.
+	 *  The row it settled in comes back with it, the wash being the landing's own
+	 *  granularity. */
+	function focusElement(k: number, pos?: number): HTMLElement | undefined {
+		return arrayEl?.focusElement(k, pos);
 	}
 	// Only where `for` cannot reach; the labelable four are the browser's own, and a
 	// second handler over them would be a focus the label already placed.
@@ -181,7 +183,8 @@
 	 * that does not remount.
 	 *
 	 * An array carries the per-element lane as well; no other control has elements for
-	 * an address to name.
+	 * an address to name. `el` is the field-wide box, which an element landing does not
+	 * wash: that lane hands back its own row (`leaves.ts`).
 	 */
 	let controlEl = $state<HTMLElement | undefined>();
 	$effect(() => {

package/dist/visual/VisualEditorInner.svelte

@@ -640,12 +640,11 @@
 		// did not resolve. `'cluster'` (and an absent granularity: the backend did not
 		// report it, treat as exact) places the caret. An absent `pos` is the placement
 		// rung and reaches the same floor.
-		land(found, at.granularity === 'segment' ? undefined : at.pos);
-		// Unconditional: a preview click is one discrete act, and its commonest target
-		// is the leaf already focused (where landing a caret changes nothing on screen)
-		// or one off-screen, where the browser's focus-scroll moves the page and leaves
-		// the caret to be hunted for.
-		bloomInside(found.control.el);
+		// The wash is unconditional, and takes the box the landing settled in: a preview
+		// click is one discrete act, and its commonest target is the leaf already focused
+		// (where landing a caret changes nothing on screen) or one off-screen, where the
+		// browser's focus-scroll moves the page and leaves the caret to be hunted for.
+		bloomInside(land(found, at.granularity === 'segment' ? undefined : at.pos));
 	}
 	/** The active leaf's controller: the formatting popover's observation seam.
 	 *  `undefined` for a focused form control, which holds no marks to toggle. */
@@ -689,16 +688,25 @@
 	 * selection outright), which is also the whole of what a click on plate-placed ink
 	 * can mean. An element is no `createField` leaf, so the offset goes down the element
 	 * lane instead, where what it means is the row control's (`leaves.ts`).
+	 *
+	 * Hands back the box the arrival wash blooms in, which is the landing's own
+	 * granularity rather than the registry's: an element lands in one row and says so
+	 * over that row, and everything else — the field, and a row the document has since
+	 * dropped — over the field's box.
 	 */
-	function land(found: Landed, pos: number | undefined): void {
+	function land(found: Landed, pos: number | undefined): HTMLElement {
 		if (found.element != null && found.control.focusElement) {
-			return found.control.focusElement(found.element, pos);
+			return found.control.focusElement(found.element, pos) ?? found.control.el;
 		}
 		if (pos != null) {
 			const prose = leaves.prose(found.key);
-			if (prose) return prose.setCaret(pos);
+			if (prose) {
+				prose.setCaret(pos);
+				return found.control.el;
+			}
 		}
 		found.control.focus();
+		return found.control.el;
 	}
 
 	// ── The verbs, as instance exports ──────────────────────────────────────────
@@ -717,8 +725,7 @@
 	export async function focusField(field: DocPath): Promise<void> {
 		const found = await revealLeaf(field);
 		if (!found) return missed(`no mounted field at ${field}`, field);
-		land(found, undefined);
-		bloomInside(found.control.el);
+		bloomInside(land(found, undefined));
 	}
 	/** Seed a card of `kind` and insert it at `at` (default: the end). Returns the new
 	 *  card's session key, or `undefined` when the quill seeds no card of that kind. */

package/dist/visual/leaves.d.ts

@@ -19,8 +19,13 @@ export interface FieldControl {
      * `Landing`, and what a `pos` means is the row control's, the same way focusing is.
      * The place rides the call because the registry stays parent-keyed: a per-element
      * key is positional, in a registry whose doctrine is dodging positional churn.
+     *
+     * Returns the element's own box, which is what the wash blooms in: the address
+     * named one row, and a wash over the whole repeater says the field where the click
+     * said the row. `undefined` is the fallback the index past the live list took, and
+     * reads as {@link el}.
      */
-    focusElement?(index: number, pos?: number): void;
+    focusElement?(index: number, pos?: number): HTMLElement | undefined;
     readonly el: HTMLElement;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@quillmark/svelte",
-	"version": "0.8.0",
+	"version": "0.10.0",
 	"description": "Editor, live-preview and source surfaces over a Quillmark WASM session.",
 	"repository": {
 		"type": "git",
@@ -66,7 +66,7 @@
 		"check": "svelte-check --tsconfig ./tsconfig.json"
 	},
 	"peerDependencies": {
-		"@quillmark/wasm": ">=0.108.3-0",
+		"@quillmark/wasm": ">=0.110.0-0",
 		"svelte": "^5.0.0"
 	},
 	"dependencies": {