@quillmark/svelte 0.18.0 → 0.20.0

package/dist/visual/FormatPopover.svelte

@@ -2,16 +2,18 @@
  The formatting selection popover (VISUAL_EDITOR §Chrome). One popover,
  shell-owned, observing the active leaf through
  `getActiveLeaf`: the VisualEditor's accessor over its `leaves` registry, and
- the whole of what this surface knows about the editor. A non-empty selection in
- the active leaf raises it over
- that leaf's selection rect; each button dispatches a PM `toggleMark` command
- straight at the leaf's `EditorView`. The codec's own `dispatchTransaction`
- (field.ts, read-only from here) lowers the resulting transaction to
- `markOps` and commits via `applyChange`: this component never touches the
- content. The keymap mirror (Mod-b/i/u) already lives in the codec's keymap
- (field.ts); this is the pointer affordance for all six marks.
+ the whole of what this surface knows about the editor. The active leaf is a
+ field's or a by-value one (an array's element, a subform's cell): its views either
+ way, its controller only for a field's. A non-empty selection in the active leaf
+ raises it over that leaf's selection rect; each button dispatches a PM `toggleMark`
+ command straight at the leaf's `EditorView`, whose own `dispatchTransaction` commits
+ the result as it commits a keystroke: a field's lowers it to `markOps` through
+ `applyChange` (field.ts), a by-value leaf's hands the re-encoded value to its parent
+ (`ProseValue`). This component never touches the content. The keymap mirror
+ (Mod-b/i/u) already lives in the codec's keymap (field.ts); this is the pointer
+ affordance for all six marks.
 
- Selection observation. The view's `dispatchTransaction` is the codec's
+ Selection observation. The view's `dispatchTransaction` is the leaf's
  (read-only), so there is no hook to observe transactions from outside.
  Fallback: a document-level `selectionchange` listener, coalesced to one
  `requestAnimationFrame`-deferred check (see `deferredSync` below: a bare
@@ -65,21 +67,14 @@
 	import { Popover } from 'bits-ui';
 	import Icon from './icons/Icon.svelte';
 	import type { IconName } from './icons/nodes.js';
-	import {
-		hasMarks,
-		rangeAnchor,
-		type FieldController,
-		type LeafViews,
-		type RangeAnchor
-	} from '../core/codec/index.js';
+	import { hasMarks, rangeAnchor, type RangeAnchor } from '../core/codec/index.js';
+	import type { ActiveProse } from './leaves.js';
 	import { clearLink, hrefInSelection, normalizeHref, setLink } from './links.js';
 	import './controls.css';
 
-	type LeafWithView = FieldController & Partial<LeafViews>;
-
 	interface Props {
 		/** The observation seam VisualEditor exposes over its `leaves` registry. */
-		getActiveLeaf: () => FieldController | undefined;
+		getActiveLeaf: () => ActiveProse | undefined;
 	}
 	let { getActiveLeaf }: Props = $props();
 
@@ -99,8 +94,8 @@
 	let open = $state(false);
 	/** A pointer is down outside this surface: the selection is still being made. */
 	let pressed = false;
-	/** Whether the selection is in the field's coordinate space, which an anchor needs
-	 *  and a table cell is not (see `sync`). */
+	/** Whether an anchor can be minted over the selection: in a field's own view, never
+	 *  in a table cell or a by-value leaf (see `sync`). */
 	let anchorAvailable = $state(true);
 	let linkPromptOpen = $state(false);
 	/** Whether the selection carried a link when the prompt was raised. */
@@ -122,8 +117,7 @@
 	 * too, so a selection in a cell raises the same popover and toggles the same
 	 * commands; only `anchor` is withheld (below). */
 	function activeLeafView(): EditorView | undefined {
-		const leaf = getActiveLeaf() as LeafWithView | undefined;
-		return leaf?.focusedView?.() ?? leaf?.view;
+		return getActiveLeaf()?.views.focusedView();
 	}
 
 	function sync(): void {
@@ -134,8 +128,8 @@
 		// returns early, so a surface frozen here still tracks the selection it covers.
 		if (insidePopover) return;
 		if (pressed) return;
-		const leaf = getActiveLeaf() as LeafWithView | undefined;
-		const view = leaf?.focusedView?.() ?? leaf?.view;
+		const leaf = getActiveLeaf();
+		const view = leaf?.views.focusedView();
 		// A non-empty text selection. A node selection is non-empty too and has nothing
 		// to format: it covers a leaf block (an island, a rule), which is exactly where
 		// Escape out of a table cell lands.
@@ -160,11 +154,13 @@
 		portalTarget = view.dom.closest<HTMLElement>('[data-qm-root]') ?? undefined;
 		const { from, to } = view.state.selection;
 		anchor = rangeAnchor(view, from, to);
-		// A selection inside a table cell is not in the field's coordinate space at all:
-		// the field's position map holds one `atom` run for the whole island, so there is
-		// no USV offset to mint an anchor at. The button is withheld rather than
-		// disabled, because what it would toggle does not exist there (CODEC §Islands).
-		anchorAvailable = !!leaf && view === leaf.view;
+		// An anchor is minted through a field's controller, which a by-value leaf has
+		// none of: its anchors are dropped on the parent's value write. A selection inside
+		// a table cell is not in the field's coordinate space at all: the field's position
+		// map holds one `atom` run for the whole island, so there is no USV offset to mint
+		// an anchor at. The button is withheld rather than disabled, because what it would
+		// toggle does not exist there (CODEC §Islands).
+		anchorAvailable = !!leaf?.controller && view === leaf.views.view;
 		open = true;
 	}
 
@@ -283,7 +279,7 @@
 	 * the content, its chrome awaiting comment-thread UX.
 	 */
 	function toggleAnchor(): void {
-		const leaf = getActiveLeaf();
+		const leaf = getActiveLeaf()?.controller;
 		const view = activeLeafView();
 		if (!leaf || !view || view.state.selection.empty) return;
 		const { from, to } = leaf.selectionRange();

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

@@ -1,7 +1,7 @@
-import { type FieldController } from '../core/codec/index.js';
+import type { ActiveProse } from './leaves.js';
 interface Props {
     /** The observation seam VisualEditor exposes over its `leaves` registry. */
-    getActiveLeaf: () => FieldController | undefined;
+    getActiveLeaf: () => ActiveProse | undefined;
 }
 declare const FormatPopover: import("svelte").Component<Props, {}, "">;
 type FormatPopover = ReturnType<typeof FormatPopover>;

package/dist/visual/MatrixAdd.svelte

@@ -1,76 +1,38 @@
 <!--
- An open matrix's add box (VISUAL_EDITOR §"The matrix"): a combobox whose options are
- what the typed words name across the document's checklists, best first, and last the
- item they would add to this one. The list stands in flow under the input rather than
- floating, so a closing group panel clips nothing of it, and it closes while the focus
- is elsewhere. The input keeps the caret throughout and the active option is
- `aria-activedescendant`, the combobox pattern: ↑/↓ walk, Enter picks, Escape clears.
- Unwalked, the active option is the first result the words name outright, else the add
- option: a result named only by abbreviation, which may stand in another card, is
- taken by an arrow or a press and never by Enter alone.
+ An open matrix's add box (VISUAL_EDITOR §"The matrix"): a plain text input. Enter adds
+ what was typed, trimmed, and clears the box; Escape clears it.
 -->
 <script lang="ts">
 	import Icon from './icons/Icon.svelte';
-	import type { AddOption } from './checklists.js';
 	import './controls.css';
 
 	interface Props {
-		/** The input's id, and the base its listbox and options derive theirs from. */
 		id: string;
 		/** The input's accessible name and its words at rest. */
 		placeholder: string;
-		/** The options `query` offers, best first; the add option, where there is one, last. */
-		options: (query: string) => AddOption[];
-		onChoose: (option: AddOption, query: string) => void;
+		/** Add an item titled `title`, never empty. */
+		onAdd: (title: string) => void;
 	}
-	let { id, placeholder, options, onChoose }: Props = $props();
+	let { id, placeholder, onAdd }: Props = $props();
 
-	let query = $state('');
-	/** The walked option, `undefined` until an arrow or the pointer moves it. */
-	let walked = $state<number | undefined>();
-	let focused = $state(false);
+	let typed = $state('');
 	let inputEl = $state<HTMLInputElement | undefined>();
-	const shown = $derived(query.trim() ? options(query.trim()) : []);
-	const open = $derived(focused && shown.length > 0);
-	const active = $derived.by(() => {
-		if (walked !== undefined) return Math.min(walked, shown.length - 1);
-		const strong = shown.findIndex((o) => o.strong);
-		if (strong >= 0) return strong;
-		const add = shown.findIndex((o) => o.add);
-		return add >= 0 ? add : 0;
-	});
-	const listId = $derived(`${id}-list`);
-	const optionId = (k: number): string => `${id}-opt-${k}`;
 
 	export function focus(): void {
 		inputEl?.focus();
 	}
 
-	function choose(k: number): void {
-		const option = shown[k];
-		if (!option) return;
-		const typed = query.trim();
-		query = '';
-		walked = undefined;
-		onChoose(option, typed);
-	}
-
 	function onkeydown(e: KeyboardEvent): void {
 		if (e.isComposing) return;
-		if (e.key === 'ArrowDown' && open) {
-			e.preventDefault();
-			walked = (active + 1) % shown.length;
-		} else if (e.key === 'ArrowUp' && open) {
-			e.preventDefault();
-			walked = (active - 1 + shown.length) % shown.length;
-		} else if (e.key === 'Enter' && open) {
+		if (e.key === 'Enter' && typed.trim()) {
 			e.preventDefault();
-			choose(active);
-		} else if (e.key === 'Escape' && query) {
+			const title = typed.trim();
+			typed = '';
+			onAdd(title);
+		} else if (e.key === 'Escape' && typed) {
 			e.preventDefault();
 			e.stopPropagation();
-			query = '';
-			walked = undefined;
+			typed = '';
 		}
 	}
 </script>
@@ -80,67 +42,21 @@
 		<Icon name="plus" class="qm-matrix-add-glyph" />
 		<input
 			bind:this={inputEl}
+			bind:value={typed}
 			{id}
 			class="qm-input qm-focus-ring"
 			type="text"
-			role="combobox"
 			autocomplete="off"
 			aria-label={placeholder}
-			aria-autocomplete="list"
-			aria-expanded={open}
-			aria-controls={listId}
-			aria-activedescendant={open ? optionId(active) : undefined}
 			{placeholder}
-			value={query}
-			oninput={(e) => {
-				query = e.currentTarget.value;
-				walked = undefined;
-			}}
-			onfocus={() => (focused = true)}
-			onblur={() => (focused = false)}
 			{onkeydown}
 		/>
 	</span>
-	<!-- Always mounted, so `aria-controls` names an element at rest too; empty, it draws
-	     nothing. -->
-	<div
-		class="qm-menu-surface qm-matrix-add-list"
-		role="listbox"
-		id={listId}
-		aria-label={placeholder}
-		hidden={!open}
-	>
-		{#each shown as option, k (option.key)}
-			<!-- The input keeps focus and owns the keys; a press picks without taking it. -->
-			<!-- svelte-ignore a11y_click_events_have_key_events -->
-			<div
-				class={['qm-menu-item qm-matrix-add-option', { add: option.add }]}
-				role="option"
-				id={optionId(k)}
-				tabindex="-1"
-				aria-selected={k === active}
-				data-highlighted={k === active ? '' : undefined}
-				onpointerdown={(e) => e.preventDefault()}
-				onpointermove={() => (walked = k)}
-				onclick={() => choose(k)}
-			>
-				{#if option.add}<Icon name="plus" class="qm-matrix-add-glyph" />{/if}
-				<span class="qm-matrix-add-title">{option.title}</span>
-				{#if option.note}<span class="qm-matrix-add-note">{option.note}</span>{/if}
-			</div>
-		{/each}
-	</div>
 </div>
 
 <style>
-	/* The box's text, and every option's, starts past the glyph slot at its leading edge,
-	 so a result reads in the column the typed words stand in and the add option's `+`
-	 stands under the box's. */
 	.qm-matrix-add {
 		--_slot: calc(var(--_qm-space-2) * 2 + var(--_qm-glyph-control));
-		display: flex;
-		flex-direction: column;
-		gap: var(--_qm-space-half);
 		min-width: 0;
 	}
 	.qm-matrix-add-field {
@@ -172,39 +88,4 @@
 	.qm-matrix-add-field .qm-input:placeholder-shown:not(:focus):hover {
 		background: var(--_qm-surface-hover);
 	}
-	/* The list is a menu, raised over the card rather than cut into it, so its options
-	 read as choices and not as a second field. Its edge and inset come off each
-	 option's, which keeps the column. */
-	.qm-matrix-add-list {
-		display: flex;
-		flex-direction: column;
-	}
-	.qm-matrix-add-list[hidden] {
-		display: none;
-	}
-	.qm-matrix-add-option {
-		position: relative;
-		display: flex;
-		align-items: baseline;
-		justify-content: space-between;
-		gap: var(--_qm-space-2);
-		padding-inline-start: calc(var(--_slot) - var(--_qm-space-half) - var(--_qm-border-width));
-		font-size: var(--_qm-text-body);
-		color: var(--_qm-ink);
-	}
-	.qm-matrix-add-option :global(.qm-matrix-add-glyph) {
-		inset-inline-start: calc(var(--_qm-space-2) - var(--_qm-space-half) - var(--_qm-border-width));
-		inset-block-start: 50%;
-		translate: 0 -50%;
-	}
-	/* The add option reads at the label ink: it offers a new item, where a result names
-	 one the document already knows. */
-	.qm-matrix-add-option.add {
-		color: var(--_qm-ink-label);
-	}
-	.qm-matrix-add-note {
-		flex-shrink: 0;
-		font-size: var(--_qm-text-label);
-		color: var(--_qm-ink-label);
-	}
 </style>

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

@@ -1,12 +1,9 @@
-import type { AddOption } from './checklists.js';
 interface Props {
-    /** The input's id, and the base its listbox and options derive theirs from. */
     id: string;
     /** The input's accessible name and its words at rest. */
     placeholder: string;
-    /** The options `query` offers, best first; the add option, where there is one, last. */
-    options: (query: string) => AddOption[];
-    onChoose: (option: AddOption, query: string) => void;
+    /** Add an item titled `title`, never empty. */
+    onAdd: (title: string) => void;
 }
 declare const MatrixAdd: import("svelte").Component<Props, {
     focus: () => void;

package/dist/visual/MatrixField.svelte

@@ -10,8 +10,9 @@
 
  An open matrix's added items follow the roster in id order, as the plate prints them:
  held by being present, so each draws a fixed tick, its `title` as an input, a remove,
- and the same columns. The add box closes the list ({@link MatrixAdd}): it searches
- every checklist of the document before it offers to add what was typed.
+ and the same columns. The add box closes the list ({@link MatrixAdd}): what is typed
+ there is added under an id minted from it past every id the list holds, so a title the
+ list already carries is a second item.
 
  The control owns its label row, as an array does: the count of held items sits
  where an array's add chip sits, so {@link Field} skips its own label for it.
@@ -48,15 +49,7 @@
 		onRoster,
 		schemaAt
 	} from './structure.js';
-	import {
-		checklists,
-		matrixPrinted,
-		searchChecklists,
-		type AddOption,
-		type Checklist,
-		type ChecklistHit,
-		type Searchable
-	} from './checklists.js';
+	import { matrixPrinted } from './checklists.js';
 	import { splitDeep, unrouted, type DeepDiagnostic } from './diagnostics.js';
 	import type { LandingBox } from './leaves.js';
 	import { propertyDomIds } from './domid.js';
@@ -85,9 +78,6 @@
 		/** The field's control id: the base a member's tick and columns derive their own
 		 *  names from, one `-m-<member id>` segment down. */
 		idBase?: string;
-		/** The field's leaf key, where it is a card's own field: how the add box tells
-		 *  this list from the rest of the document's (`checklists.ts`). */
-		listKey?: string;
 		/** The boundary's nested content read, rooted at this field: a member's content
 		 *  column reads at `[id, column]` (`reader.getContentAt`). */
 		contentAt: (path: PathStep[]) => Content | undefined;
@@ -104,16 +94,11 @@
 		labelId,
 		descriptionId,
 		idBase,
-		listKey,
 		contentAt,
 		onCommit,
 		diagnostics
 	}: Props = $props();
 
-	// A card's own matrix searches the document's lists; one nested in a container is
-	// not indexed, and searches its own items alone.
-	const index = checklists();
-	const others = (): readonly Checklist[] => (listKey != null ? (index?.list() ?? []) : []);
 	const members = $derived(matrixMembers(schema.members));
 	const compact = $derived(!!schema.ui?.compact);
 	const hasColumns = $derived(Object.keys(schema.properties ?? {}).length > 0);
@@ -220,48 +205,6 @@
 	}
 
 	// ── The add box ────────────────────────────────────────────────────────────
-	/** A result's list: this one, or another of the document's. */
-	type Hit = ChecklistHit<Checklist | undefined>;
-	function options(query: string): AddOption[] {
-		const own: Searchable<Checklist | undefined> = { list: undefined, schema, value: map };
-		const lists: Searchable<Checklist | undefined>[] = others()
-			.filter((l) => l.key !== listKey)
-			.map((l) => ({ list: l, schema: l.schema, value: l.value }));
-		const hits = searchChecklists(query, [own, ...lists]);
-		const out: AddOption[] = hits.map((h, k) => ({
-			key: `hit-${k}`,
-			title: h.title,
-			note:
-				[
-					h.list ? t.strings.matrixIn(h.list.label) : undefined,
-					h.held ? t.strings.matrixHeldTag : undefined
-				]
-					.filter(Boolean)
-					.join(' · ') || undefined,
-			strong: h.strong,
-			payload: h
-		}));
-		// Offered last, and not where an item of this list already carries the words.
-		const fold = (s: string) => s.trim().toLowerCase();
-		const dup = hits.some((h) => h.list === undefined && fold(h.title) === fold(query));
-		if (!dup) out.push({ key: 'add', title: t.strings.matrixAddNew(query), add: true });
-		return out;
-	}
-	async function choose(option: AddOption, query: string): Promise<void> {
-		if (option.add) return add(query);
-		const hit = option.payload as Hit;
-		const other = hit.list;
-		if (other) {
-			if (!hit.held) other.commit(commitMember(other.value, hit.id, memberWrite({})));
-			index?.land(`${other.path}.${hit.id}`);
-			return;
-		}
-		if (!hit.held) commit(commitMember(map, hit.id, ticked(hit.id)));
-		await flush();
-		focusPath([hit.id]);
-		const box = ref(memberEls, hit.id);
-		if (box) bloomInside(box);
-	}
 	async function add(title: string): Promise<void> {
 		const taken = (id: string) => onRoster(schema, id) || (map != null && Object.hasOwn(map, id));
 		const id = addedId(title, taken);
@@ -397,8 +340,7 @@
 			bind:this={addEl}
 			id={`${base}-add`}
 			placeholder={t.strings.matrixAdd(label ?? '')}
-			{options}
-			onChoose={choose}
+			onAdd={add}
 		/>
 	{/if}
 	<DiagnosticList diagnostics={foot} />

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

@@ -18,9 +18,6 @@ interface Props {
     /** The field's control id: the base a member's tick and columns derive their own
      *  names from, one `-m-<member id>` segment down. */
     idBase?: string;
-    /** The field's leaf key, where it is a card's own field: how the add box tells
-     *  this list from the rest of the document's (`checklists.ts`). */
-    listKey?: string;
     /** The boundary's nested content read, rooted at this field: a member's content
      *  column reads at `[id, column]` (`reader.getContentAt`). */
     contentAt: (path: PathStep[]) => Content | undefined;

package/dist/visual/ObjectField.svelte

@@ -81,8 +81,10 @@
 		/**
 		 * The parent control's DOM id: the base each property's own three names derive
 		 * from ({@link propertyDomIds}). Absent — a subform mounted with no field around
-		 * it, or a table's row — the properties fall back to `aria-label`, which names
-		 * them without a `for` target to click.
+		 * it — the properties fall back to `aria-label`, which names them without a
+		 * `for` target to click. A table's row takes the table's own and names its
+		 * cells the same fallback way, reading only the description off it: the
+		 * header parks one per column, which every row's cell in it points at.
 		 */
 		idBase?: string;
 		/** Accessible-name prefix used only on the `aria-label` fallback above. */
@@ -268,7 +270,8 @@
 			{@const kind = controlKind(sub)}
 			{@const ids = idBase && !bare ? propertyDomIds(idBase, key) : undefined}
 			{@const named = ids ? undefined : fallbackName(key, sub)}
-			{@const describes = sub.description && ids ? ids.description : undefined}
+			{@const describes =
+				sub.description && idBase ? propertyDomIds(idBase, key).description : undefined}
 			{@const deep = routed.below.get(key)}
 			{@const own = isContainer(kind) ? undefined : deep?.map((d) => d.diagnostic)}
 			<!-- `for` reaches the labelable controls, a variant through its discriminant; the
@@ -359,6 +362,7 @@
 					<ProseValue
 						bind:this={proseEls[key]}
 						content={() => contentAt([key])}
+						value={obj[key]}
 						fallback={contentDefault(sub)}
 						plaintext={baseType(sub) === 'plaintext'}
 						placeholder={noneOf(key, sub)}
@@ -376,7 +380,7 @@
 					     under an open row costs is two rungs of the ladder and one figure. -->
 					<ArrayField
 						bind:this={nestedEls[key]}
-						value={obj[key] as unknown[] | undefined}
+						value={obj[key]}
 						fallback={Array.isArray(sub.default) ? sub.default : undefined}
 						items={sub.items}
 						layout={arrayLayout(sub)}

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

@@ -14,8 +14,10 @@ interface Props {
     /**
      * The parent control's DOM id: the base each property's own three names derive
      * from ({@link propertyDomIds}). Absent — a subform mounted with no field around
-     * it, or a table's row — the properties fall back to `aria-label`, which names
-     * them without a `for` target to click.
+     * it — the properties fall back to `aria-label`, which names them without a
+     * `for` target to click. A table's row takes the table's own and names its
+     * cells the same fallback way, reading only the description off it: the
+     * header parks one per column, which every row's cell in it points at.
      */
     idBase?: string;
     /** Accessible-name prefix used only on the `aria-label` fallback above. */

package/dist/visual/ProseField.svelte

@@ -123,6 +123,7 @@
 				placeholder,
 				placeholderUntilEdit,
 				tableStrings: () => t.strings,
+				slashStrings: () => t.strings,
 				onSlash: (next) => {
 					slash = next;
 				},
@@ -155,7 +156,7 @@
 		controller?.setFallback(fallback);
 	});
 
-	// Only a narrowed or a plain leaf can hold, so only one of them asks.
+	// Only a narrowed or a plain leaf holds by what a re-validation says, so only one of them asks.
 	$effect(() => {
 		void diagnostics;
 		if (inline || plaintext) controller?.applyExternal();