@quillmark/svelte 0.9.0 → 0.10.1

package/THEMING.md

@@ -24,6 +24,8 @@ Nothing to import and nothing to set. The package pulls its own stylesheet, and
 
 **Placing and sizing**: each surface carries a stable root class (`.qm-editor`, `.qm-preview`), so you can place it from your own stylesheet without a wrapper. Each also takes a `class` prop that merges onto the same element, which is the better handle when you have one to give.
 
+A surface's width is the one you give it. Each contains its own inline size, so what a document holds — a table is as wide as its columns — scrolls inside the mount rather than widening the column the mount stands in.
+
 **Taking the column back**: our selectors compute at specificity zero (below), so `padding: 0` or a `background` of your own on `.qm-editor` wins outright. Nothing is locked.
 
 ## Make it yours

package/dist/core/codec/decode.js

@@ -103,8 +103,7 @@ function groupBlocks(schema, leaves, depth, marks, cursor) {
         if (isListItemContainer(here)) {
             // Gather the maximal run of sibling `list_item` leaves at this depth
             // (same ordered/start), then split it into items by `ordinal`.
-            const { ordered, start } = here;
-            const instance = here.instance ?? 0;
+            const { ordered, start, instance } = here;
             let j = i + 1;
             while (j < leaves.length) {
                 const c = atDepth(leaves[j], depth);
@@ -112,7 +111,7 @@ function groupBlocks(schema, leaves, depth, marks, cursor) {
                     break;
                 // `instance` is the boundary between two adjacent lists; the normalizer
                 // numbers a run's `ordinal`s gaplessly from 0, so a reset carries none.
-                if ((c.instance ?? 0) !== instance)
+                if (c.instance !== instance)
                     break;
                 j++;
             }
@@ -166,7 +165,7 @@ function ordinalAt(leaf, depth) {
  * shape, which contiguity alone reads as one. Every arm but `list_item` (which has its
  * own run rule) keys here. */
 function containerKey(c) {
-    const id = `${c.container}\u0000${c.instance ?? 0}`;
+    const id = `${c.container}\u0000${c.instance}`;
     return 'attrs' in c ? `${id}\u0000${JSON.stringify(c.attrs)}` : id;
 }
 /** A single leaf block node (para/heading/code/rule/island, or an unknown kind

package/dist/core/codec/encode.js

@@ -69,11 +69,6 @@ function runShape(node) {
             return null;
     }
 }
-/** `instance` where it tells a container from an identical adjacent sibling. The
- * canonical form omits a zero, so emitting one would diff against every store read. */
-function discriminate(container, instance) {
-    return instance ? { ...container, instance } : container;
-}
 function scanBlock(acc, node, nodePos, containers, instance) {
     const name = node.type.name;
     const contentStart = nodePos + 1;
@@ -115,15 +110,12 @@ function scanBlock(acc, node, nodePos, containers, instance) {
             acc.lastContentEndPm = nodePos + 1;
             break;
         case 'blockquote':
-            scanBlocks(acc, node, contentStart, [
-                ...containers,
-                discriminate({ container: 'quote' }, instance)
-            ]);
+            scanBlocks(acc, node, contentStart, [...containers, { container: 'quote', instance }]);
             break;
         case 'unknown_container':
             scanBlocks(acc, node, contentStart, [
                 ...containers,
-                discriminate({ container: node.attrs.container, attrs: node.attrs.attrs }, instance)
+                { container: node.attrs.container, attrs: node.attrs.attrs, instance }
             ]);
             break;
         case 'bullet_list':
@@ -132,7 +124,13 @@ function scanBlock(acc, node, nodePos, containers, instance) {
             const start = ordered ? node.attrs.start : 1;
             let itemPos = contentStart;
             node.forEach((item, _off, index) => {
-                const container = discriminate({ container: 'list_item', ordered, start, ordinal: index }, instance);
+                const container = {
+                    container: 'list_item',
+                    ordered,
+                    start,
+                    ordinal: index,
+                    instance
+                };
                 scanBlocks(acc, item, itemPos + 1, [...containers, container]);
                 itemPos += item.nodeSize;
             });

package/dist/core/codec/prose.css

@@ -228,6 +228,16 @@ li.ProseMirror-selectednode::after {
 .ProseMirror > .qm-table-island + * {
 	margin-top: 0;
 }
+/* Width from above, never from the columns. The scroller below caps at `100%` of this
+   box, and a percentage is no cap while an ancestor is being sized to what it holds: a
+   leaf taking its width from its own contents is asked for the table's max-content width
+   and the cap never applies. The surface closes the same question at its edge
+   (`visual/VisualEditorInner.svelte` §`.qm-editor`); this end of it is what makes the cap
+   below true wherever the island lands. `inline-size`, not `size`: an island is as tall
+   as its rows. */
+.qm-table-island {
+	contain: inline-size;
+}
 .qm-table-scroller {
 	/* The one horizontally scrolling box in a leaf: a table is as wide as its
 	   columns, and a wide one must not push the card's own layout. `overflow-y` is

package/dist/preview/Preview.svelte

@@ -108,6 +108,12 @@
 		box-sizing: border-box;
 		position: relative;
 		width: 100%;
+		/* The width is the host's, never the document's, which is the same boundary the
+		   editor states (`visual/VisualEditorInner.svelte` §`.qm-editor`): a mount standing
+		   in a column that floors at what it holds is asked for nothing the sheets in it
+		   are. `inline-size`, not `size`: the column is as tall as the pages painted in
+		   it. */
+		contain: inline-size;
 		height: 100%;
 		overflow-y: auto;
 		padding: var(--_qm-space-4);

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. */
@@ -935,6 +942,14 @@
 		box-sizing: border-box;
 		display: flex;
 		flex-direction: column;
+		/* The width is the host's, never the document's. A mount standing in a column that
+		   floors at what it holds — a flex or grid track with no minimum of its own — is
+		   otherwise asked for the widest thing in the document, and a table is as wide as
+		   its columns. The island holds its own end of that (`codec/prose.css` §"The table
+		   island"); this is the boundary, so a construct a leaf gains later cannot reach
+		   past it either. `inline-size`, not `size`: a surface is as tall as its cards, or
+		   the pane's under `.qm-pane`. */
+		contain: inline-size;
 		gap: var(--_qm-space-2);
 		padding: var(--_qm-space-5);
 		background: var(--_qm-surface-sunken);

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.9.0",
+	"version": "0.10.1",
 	"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.109.0-0",
+		"@quillmark/wasm": ">=0.110.0-0",
 		"svelte": "^5.0.0"
 	},
 	"dependencies": {