@quillmark/svelte 0.20.1 → 0.21.0

package/dist/visual/VisualEditorInner.svelte

@@ -33,6 +33,7 @@
 	import { errorMessage, reportError } from '../core/errors.js';
 	import { bloomInside } from '../core/bloom.js';
 	import { createLifespan } from '../core/teardown.js';
+	import { spacePx } from '../core/rungs.js';
 	import type {
 		Addr,
 		CardAddr,
@@ -80,11 +81,12 @@
 	} from './diagnostics.js';
 	import { fieldDomIds, groupPanelId } from './domid.js';
 	import { createLeafRegistry, type ActiveProse, type FieldControl } from './leaves.js';
-	import { reorder, reorderArm, reorderTrips } from './motion.js';
+	import { reorder, reorderArm, reorderTrips, scrollSettled, slot } from './motion.js';
 	import { tipsChannel } from './tips.js';
 	import { patchEditorExt } from './ext.js';
 	import { raiseGuidance } from './guidance.js';
 	import Card from './Card.svelte';
+	import Icon from './icons/Icon.svelte';
 	import TipsCard from './TipsCard.svelte';
 	import FormatPopover from './FormatPopover.svelte';
 	// The add trigger and the kind menu draw shared recipes; a component carrying a
@@ -194,6 +196,7 @@
 	type CardHandle = {
 		revealLeaf(key: string): void;
 		scrollIntoViewCard(block: ScrollLogicalPosition): void;
+		focusHeader(): void;
 	};
 	let mainCard = $state<CardHandle | undefined>(undefined);
 	let cardRefs = $state<(CardHandle | undefined)[]>([]);
@@ -377,10 +380,10 @@
 	 * naming one id, on different terms — `center` against `nearest`.
 	 */
 	let scrollTicket = 0;
-	async function scrollCardIntoView(id: string, block: ScrollLogicalPosition): Promise<void> {
+	async function scrollCardIntoView(id: string, block: ScrollLogicalPosition): Promise<boolean> {
 		const ticket = ++scrollTicket;
-		if (!(await span.resumes(tick()))) return;
-		if (ticket !== scrollTicket) return;
+		if (!(await span.resumes(tick()))) return false;
+		if (ticket !== scrollTicket) return false;
 		// A reorder is running by this flush and holds the slot at its pre-move position
 		// for the length of the trip (`motion.ts`), so asking now measures the box the
 		// card is leaving — where a `nearest` would take the stack back to for the card
@@ -390,26 +393,33 @@
 		const slot = slotEls[cardIndexOf(id)];
 		const trips = slot ? reorderTrips(slot) : [];
 		if (trips.length) {
-			if (!(await span.resumes(Promise.allSettled(trips.map((trip) => trip.finished))))) return;
-			if (ticket !== scrollTicket) return;
+			if (!(await span.resumes(Promise.allSettled(trips.map((trip) => trip.finished)))))
+				return false;
+			if (ticket !== scrollTicket) return false;
 		}
 		const i = cardIndexOf(id);
-		if (i >= 0) cardRefs[i]?.scrollIntoViewCard(block);
+		if (i < 0) return false;
+		cardRefs[i]?.scrollIntoViewCard(block);
+		return true;
 	}
 	/** Returns the new card's session key, or `undefined` when the kind seeds nothing
-	 *  or the insert threw: what `insertCard` hands a host that wants to track it. */
-	function addCard(atIndex: number, kind: string): CardId | undefined {
+	 *  or the insert threw: what `insertCard` hands a host that wants to track it. The
+	 *  strip's own add `land`s focus in the new card; a host's leaves focus where it is. */
+	function addCard(atIndex: number, kind: string, land = false): CardId | undefined {
 		try {
 			const overlay = doc.seedOverlay(kind);
 			const card = quill.seedCard(kind, overlay);
 			if (!card) return undefined;
+			const from = document.activeElement;
 			doc.insertCard(card, atIndex);
 			const id = seq.next();
+			arm.arm();
 			cardIds = [...cardIds.slice(0, atIndex), id, ...cardIds.slice(atIndex)];
 			bump('structure', id, atIndex);
 			// Centred: the new card is the subject, and the neighbours it landed between
 			// are what say where it went.
-			void scrollCardIntoView(id, 'center');
+			const scrolled = scrollCardIntoView(id, 'center');
+			if (land) void landInCard(id, scrolled, from);
 			return id;
 		} catch (e) {
 			reportError(onError, {
@@ -421,8 +431,39 @@
 			return undefined;
 		}
 	}
-	// The reorder gesture's arming window (`motion.ts`): the reconcile that moves a slot
-	// is the trip, and every other reconcile that happens to move one is not.
+	/**
+	 * Focus the card the strip just added: its first field, else its body, else its title.
+	 *
+	 * After the centring scroll has run rather than beside it: a control's `focus()`
+	 * takes the browser's own scroll, which cuts a smooth one short wherever it had
+	 * reached. A focus that went elsewhere while the scroll ran was the user's, and stays.
+	 */
+	async function landInCard(
+		id: CardId,
+		scrolled: Promise<boolean>,
+		from: Element | null
+	): Promise<void> {
+		if (!(await scrolled) || !(await span.resumes(scrollSettled()))) return;
+		const now = document.activeElement;
+		if (now !== from && now !== document.body) return;
+		const at = cardIndexOf(id);
+		const shown = model.cards[at];
+		if (!shown) return;
+		const first = (shown.sections.find((s) => s.group == null) ?? shown.sections[0])?.fields[0];
+		const path = first || shown.hasBody ? pathFor({ card: at, field: first?.name }) : undefined;
+		const found = path && (await revealLeaf(path));
+		if (found) await land(found, undefined);
+		else cardRefs[cardIndexOf(id)]?.focusHeader();
+	}
+	// A kind picked off the menu lands focus in the card it added, so the menu's close
+	// hands none back to its trigger; an Escape out of the menu still does.
+	let picked = false;
+	function addPicked(atIndex: number, kind: string): void {
+		picked = addCard(atIndex, kind, true) != null;
+	}
+
+	// The list gesture's arming window (`motion.ts`): the reconcile that moves a slot is
+	// the trip, and every other reconcile that happens to move one is not.
 	const arm = reorderArm();
 	span.onEnd(arm.cancel);
 
@@ -445,7 +486,12 @@
 	function removeCardById(id: string): void {
 		const i = cardIndexOf(id);
 		if (i < 0) return;
+		// Held visibly, which a pointer's press on delete is not: some engines focus a
+		// pressed button, and the hand-on is the keyboard's.
+		const focused = document.activeElement;
+		const held = !!focused && !!slotEls[i]?.contains(focused) && focused.matches(':focus-visible');
 		doc.removeCard(i);
+		arm.arm();
 		cardIds = cardIds.filter((_, k) => k !== i);
 		if (activeCardId === id) {
 			activeCardId = undefined;
@@ -460,6 +506,15 @@
 		// 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);
+		if (held) void focusAfterRemove(i);
+	}
+	/** Hand the focus a removed card held to the title of the card before it, else the
+	 *  one that took its place, else the strip that adds one: a focused node the flush
+	 *  drops leaves the focus on the page's body, and the keyboard's place with it. */
+	async function focusAfterRemove(at: number): Promise<void> {
+		if (!(await span.resumes(tick()))) return;
+		if (cardIds.length) cardRefs[Math.max(at - 1, 0)]?.focusHeader();
+		else rootEl?.querySelector<HTMLElement>('.qm-add-btn')?.focus();
 	}
 	function retypeCardById(id: string, kind: string): void {
 		const i = cardIndexOf(id);
@@ -481,7 +536,10 @@
 			});
 		}
 	}
+	/** A title's blur can fire as the surface is torn down, against a document that may be
+	 *  freed. */
 	function renameCardById(id: string, title: string): void {
+		if (!span.alive) return;
 		const i = cardIndexOf(id);
 		if (i < 0) return;
 		patchEditorExt(doc, { card: i }, { title });
@@ -892,7 +950,7 @@
 	 rather than being slid across. It is also the shape `animate:` asks for, being the
 	 keyed block's only child. -->
 	{#each model.cards as c, i (c.id)}
-		<div class="qm-card-slot" bind:this={slotEls[i]} animate:reorder={arm.armed}>
+		<div class="qm-card-slot" bind:this={slotEls[i]} animate:reorder={arm.armed} in:slot out:slot>
 			<Card
 				bind:this={cardRefs[i]}
 				card={titled(c)}
@@ -925,9 +983,10 @@
 {#snippet addAffordance(atIndex: number)}
 	{#if kinds.length}
 		<!-- The strip past the last card is the append point, the one a reader looks for
-		 rather than finds by position, so it alone states itself in words at rest. The
-		 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. -->
+		 rather than finds by position, so it alone states itself in words at rest. A gap
+		 between cards carries a plus where the words would be: the strip is the gap, the
+		 pill it fills on hover is the space the new card takes, and the plus says what a
+		 press there does. -->
 		{@const marked = atIndex === model.cards.length}
 		<div class={['qm-add-card', { 'qm-add-card-marked': marked }]}>
 			<!-- Marked, the words are the accessible name and no `aria-label` doubles
@@ -938,7 +997,8 @@
 					type="button"
 					class="qm-add-btn qm-add-affordance qm-tap-floor"
 					aria-label={marked ? undefined : merged.addCard}
-					onclick={() => addCard(atIndex, kinds[0])}>{marked ? merged.addCard : ''}</button
+					onclick={() => addCard(atIndex, kinds[0], true)}
+					>{#if marked}{merged.addCard}{:else}<Icon name="plus" class="qm-add-glyph" />{/if}</button
 				>
 			{:else}
 				<!-- Multi-kind add: pick the kind, then seed + insert. A menu rather than a
@@ -950,10 +1010,20 @@
 					<DropdownMenu.Trigger
 						class="qm-add-btn qm-add-affordance qm-tap-floor"
 						aria-label={marked ? undefined : merged.addCard}
-						>{marked ? merged.addCard : ''}</DropdownMenu.Trigger
+						>{#if marked}{merged.addCard}{:else}<Icon
+								name="plus"
+								class="qm-add-glyph"
+							/>{/if}</DropdownMenu.Trigger
 					>
 					<DropdownMenu.Portal to={rootEl}>
-						<DropdownMenu.Content collisionBoundary={rootEl ?? []} sideOffset={4}>
+						<DropdownMenu.Content
+							collisionBoundary={rootEl ?? []}
+							sideOffset={spacePx(rootEl)}
+							onCloseAutoFocus={(e) => {
+								if (picked) e.preventDefault();
+								picked = false;
+							}}
+						>
 							<!-- Portalled out of the row but into the stack's root, and carrying the
 						     marker itself: floating is still a detached subtree to the
 						     derivation, like FormatPopover and the enum listbox. The root is the
@@ -961,7 +1031,7 @@
 						     the surface where the consumer scrolls one. -->
 							<div class="qm-menu-surface" data-qm-root>
 								{#each kinds as k (k)}
-									<DropdownMenu.Item class="qm-menu-item" onSelect={() => addCard(atIndex, k)}
+									<DropdownMenu.Item class="qm-menu-item" onSelect={() => addPicked(atIndex, k)}
 										>{kindTitle(quill.schema.card_kinds?.[k], k)}</DropdownMenu.Item
 									>
 								{/each}
@@ -1072,9 +1142,10 @@
 	/* Unboxed, like every button, and not dashed: a dashed edge is the placeholder idiom
 	 ("nothing is here yet"), which on a button reads as disabled or as a drop target. It
 	 stays honest in one place, the un-schemable card (`Card.svelte`), which is a state
-	 rather than a control. A bare trigger rests invisible, so the fill is the whole of
-	 what it shows: the pill fills the strip because the strip is what was pressed, and
-	 the strip is the gap, so the fill is the card-to-be drawn where it will land.
+	 rather than a control. A gap's trigger rests invisible, so the fill and the plus are
+	 the whole of what it shows: the pill fills the strip because the strip is what was
+	 pressed, and the strip is the gap, so the fill is the card-to-be drawn where it will
+	 land.
 
 	 No inset of its own: the pill and the gap are the same rectangle, and a bare strip is
 	 a band of gutter, so its height is a rhythm rung. The press floor the box gives up is
@@ -1097,8 +1168,15 @@
 		color: var(--_qm-ink-label);
 		opacity: 0;
 		transition:
-			opacity var(--_qm-reveal),
-			background-color var(--_qm-reveal);
+			opacity var(--_qm-duration-fast) var(--_qm-ease-reverse),
+			background-color var(--_qm-duration-fast) var(--_qm-ease-reverse);
+	}
+	/* The pill's own height, so a turned-down `--qm-space` shrinks the glyph with the
+	   strip rather than spilling it past the pill. */
+	.qm-add-card :global(.qm-add-glyph) {
+		height: 100%;
+		width: auto;
+		aspect-ratio: 1;
 	}
 	/* The strip that holds words at rest takes the height that centres them, and rests dim
 	   rather than absent, having something to be seen. */
@@ -1111,11 +1189,15 @@
 	/* One arrival, three ways in. Keyboard focus, because the fill is the only thing that
 	   reads as the trigger on a bare strip; and an open menu, because it portals out of
 	   the strip, so a pointer moving onto an item has left the row whose hover was drawing
-	   the pill the menu hangs from. */
+	   the pill the menu hangs from. The arrival takes the long trip and the leave the fast
+	   rung, a transition being the state's it ends in. */
 	.qm-add-card :global(.qm-add-btn:hover),
 	.qm-add-card :global(.qm-add-btn:focus-visible),
 	.qm-add-card :global(.qm-add-btn[data-state='open']) {
 		opacity: 1;
 		background: var(--_qm-add-fill);
+		transition:
+			opacity var(--_qm-reveal),
+			background-color var(--_qm-reveal);
 	}
 </style>

package/dist/visual/controls.css

@@ -233,7 +233,8 @@
 :where(.qm-chip:hover) {
 	color: var(--_qm-ink);
 }
-:where(.qm-chip svg) {
+:where(.qm-chip svg),
+:where(.qm-icon-btn svg) {
 	flex-shrink: 0;
 	width: var(--_qm-glyph-control);
 	height: var(--_qm-glyph-control);

package/dist/visual/icons/Icon.svelte

@@ -9,8 +9,9 @@
 
 	interface Props extends Omit<SVGAttributes<SVGSVGElement>, 'name'> {
 		name: IconName;
-		/** The frame's edge, in px. A chip sizes the glyph from `--_qm-glyph-control`
-		 *  in CSS, which beats this attribute; callers that are not chips pass a size. */
+		/** The frame's edge, in px. A chip or a glyph button sizes the glyph from
+		 *  `--_qm-glyph-control` in CSS, which beats this attribute; other callers pass
+		 *  a size. */
 		size?: number;
 	}
 	let { name, size = 24, ...rest }: Props = $props();

package/dist/visual/icons/Icon.svelte.d.ts

@@ -2,8 +2,9 @@ import { type IconName } from './nodes.js';
 import type { SVGAttributes } from 'svelte/elements';
 interface Props extends Omit<SVGAttributes<SVGSVGElement>, 'name'> {
     name: IconName;
-    /** The frame's edge, in px. A chip sizes the glyph from `--_qm-glyph-control`
-     *  in CSS, which beats this attribute; callers that are not chips pass a size. */
+    /** The frame's edge, in px. A chip or a glyph button sizes the glyph from
+     *  `--_qm-glyph-control` in CSS, which beats this attribute; other callers pass
+     *  a size. */
     size?: number;
 }
 declare const Icon: import("svelte").Component<Props, {}, "">;

package/dist/visual/icons/nodes.d.ts

@@ -15,6 +15,31 @@ export declare const ICONS: {
     readonly 'chevron-up': readonly [readonly ["path", {
         readonly d: "m18 15-6-6-6 6";
     }]];
+    readonly 'grip-vertical': readonly [readonly ["circle", {
+        readonly cx: "9";
+        readonly cy: "12";
+        readonly r: "1";
+    }], readonly ["circle", {
+        readonly cx: "9";
+        readonly cy: "5";
+        readonly r: "1";
+    }], readonly ["circle", {
+        readonly cx: "9";
+        readonly cy: "19";
+        readonly r: "1";
+    }], readonly ["circle", {
+        readonly cx: "15";
+        readonly cy: "12";
+        readonly r: "1";
+    }], readonly ["circle", {
+        readonly cx: "15";
+        readonly cy: "5";
+        readonly r: "1";
+    }], readonly ["circle", {
+        readonly cx: "15";
+        readonly cy: "19";
+        readonly r: "1";
+    }]];
     readonly bold: readonly [readonly ["path", {
         readonly d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8";
     }]];

package/dist/visual/icons/nodes.js

@@ -14,6 +14,14 @@ export const ICONS = {
     ],
     'chevron-down': [['path', { d: 'm6 9 6 6 6-6' }]],
     'chevron-up': [['path', { d: 'm18 15-6-6-6 6' }]],
+    'grip-vertical': [
+        ['circle', { cx: '9', cy: '12', r: '1' }],
+        ['circle', { cx: '9', cy: '5', r: '1' }],
+        ['circle', { cx: '9', cy: '19', r: '1' }],
+        ['circle', { cx: '15', cy: '12', r: '1' }],
+        ['circle', { cx: '15', cy: '5', r: '1' }],
+        ['circle', { cx: '15', cy: '19', r: '1' }]
+    ],
     bold: [['path', { d: 'M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8' }]],
     italic: [
         ['line', { x1: '19', x2: '10', y1: '4', y2: '4' }],

package/dist/visual/motion.d.ts

@@ -1,4 +1,5 @@
 import type { AnimationConfig } from 'svelte/animate';
+import type { TransitionConfig } from 'svelte/transition';
 /** The trips this module is running on `node`. A run holds the slot at its pre-move
  *  position for its whole length, so anything that measures the node's box waits on
  *  these rather than reading the one a transform is holding. */
@@ -23,9 +24,11 @@ export declare function reorderArm(): ReorderArm;
  * `armed` is why this is the reorder and not every reconcile: `animate:` fires wherever
  * a slot's rect moved, and a card growing under the caret moves every slot below it,
  * which is a layout change with no trip in it and one that would draw those slots over
- * the content that displaced them for the length of the run. So the reorder command
- * arms the gesture and the frame it lands in disarms it, which is the admission test
- * read off the endpoints: two positions in the list, not two positions on the page.
+ * the content that displaced them for the length of the run. So a command that moves
+ * slots in the list arms the gesture and the frame it lands in disarms it, which is the
+ * admission test read off the endpoints: two positions in the list, not two positions on
+ * the page. A move is one; so, in the card stack, are an insert and a removal, which move
+ * every slot past them by one.
  *
  * Both endpoints are rest states, so the curve is `--_qm-ease-reverse` (a second click
  * lands mid-slide) and the rung is `slow` (the trip moves the stack around it).
@@ -34,3 +37,22 @@ export declare function reorder(node: HTMLElement, { from, to }: {
     from: DOMRect;
     to: DOMRect;
 }, armed: () => boolean): AnimationConfig;
+/**
+ * A slot entering or leaving the list fades where it stands, while the slots it displaces
+ * take the reorder trip: the stack is what slides, and a card is what appears or goes, under
+ * the slots crossing it. Opacity alone, because a leaving slot is held at its place by a
+ * transform `animate:` writes, which a keyframed transform would override.
+ *
+ * The returned duration is what keeps a leaving slot mounted until its fade has run, and
+ * the fill what keeps it from painting whole in the frame between the two.
+ */
+export declare function slot(node: HTMLElement, _params: unknown, { direction }: {
+    direction: 'in' | 'out' | 'both';
+}): TransitionConfig;
+/**
+ * Resolves once nothing in the document has scrolled for {@link STILL_FRAMES} frames
+ * running. A smooth scroll moves its scroller on every frame until it lands, so stillness
+ * is its end on every engine, whether or not it reports one; a scroll with nowhere to go
+ * is still from the first frame.
+ */
+export declare function scrollSettled(): Promise<void>;

package/dist/visual/motion.js

@@ -1,9 +1,9 @@
-// The card stack's reorder trip: a slot's position ↔ position in a
-// keyed list, the one row of the mechanism table no CSS rule can serve, because the
-// two frames belong to different elements. Svelte's `animate:` supplies the halves CSS
-// cannot see (the rects either side of the reconciliation) and WAAPI paints the trip,
-// the same seam `core/bloom.ts` takes to keep a duration in the derivation while a
-// script runs the animation.
+// The card stack's trips: a slot's position ↔ position in a keyed list, the one row of
+// the mechanism table no CSS rule can serve, because the two frames belong to different
+// elements, and a slot entering or leaving the list. Svelte's `animate:` and `in:`/`out:`
+// supply the halves CSS cannot see (the rects either side of the reconciliation, a node
+// the list no longer holds) and WAAPI paints the trip, the same seam `core/bloom.ts` takes
+// to keep a duration in the derivation while a script runs the animation.
 import { rungMs, rungStyle } from '../core/rungs.js';
 /** Marks this module's runs, so a second reorder cancels the first rather than layering
  *  a second transform over it. */
@@ -34,9 +34,11 @@ export function reorderArm() {
  * `armed` is why this is the reorder and not every reconcile: `animate:` fires wherever
  * a slot's rect moved, and a card growing under the caret moves every slot below it,
  * which is a layout change with no trip in it and one that would draw those slots over
- * the content that displaced them for the length of the run. So the reorder command
- * arms the gesture and the frame it lands in disarms it, which is the admission test
- * read off the endpoints: two positions in the list, not two positions on the page.
+ * the content that displaced them for the length of the run. So a command that moves
+ * slots in the list arms the gesture and the frame it lands in disarms it, which is the
+ * admission test read off the endpoints: two positions in the list, not two positions on
+ * the page. A move is one; so, in the card stack, are an insert and a removal, which move
+ * every slot past them by one.
  *
  * Both endpoints are rest states, so the curve is `--_qm-ease-reverse` (a second click
  * lands mid-slide) and the rung is `slow` (the trip moves the stack around it).
@@ -61,3 +63,50 @@ export function reorder(node, { from, to }, armed) {
     ], { duration, easing, id: RUN_ID });
     return {};
 }
+/**
+ * A slot entering or leaving the list fades where it stands, while the slots it displaces
+ * take the reorder trip: the stack is what slides, and a card is what appears or goes, under
+ * the slots crossing it. Opacity alone, because a leaving slot is held at its place by a
+ * transform `animate:` writes, which a keyframed transform would override.
+ *
+ * The returned duration is what keeps a leaving slot mounted until its fade has run, and
+ * the fill what keeps it from painting whole in the frame between the two.
+ */
+export function slot(node, _params, { direction }) {
+    if (typeof node.animate !== 'function')
+        return {};
+    const style = rungStyle(node);
+    const duration = rungMs(style, '--_qm-duration-slow');
+    const easing = style.getPropertyValue('--_qm-ease-reverse').trim();
+    if (duration === undefined || !easing)
+        return {};
+    const opacity = direction === 'out' ? [1, 0] : [0, 1];
+    node.animate({ opacity }, { duration, easing, fill: direction === 'out' ? 'forwards' : 'none' });
+    return { duration };
+}
+/** Frames nothing may scroll in before a scroll counts as over. More than one, because a
+ *  smooth scroll asked for in this frame takes its first step in a later one. */
+const STILL_FRAMES = 3;
+/** The wait's ceiling, in frames: a scroller a host keeps moving is not a trip that ends. */
+const MAX_FRAMES = 60;
+/**
+ * Resolves once nothing in the document has scrolled for {@link STILL_FRAMES} frames
+ * running. A smooth scroll moves its scroller on every frame until it lands, so stillness
+ * is its end on every engine, whether or not it reports one; a scroll with nowhere to go
+ * is still from the first frame.
+ */
+export function scrollSettled() {
+    return new Promise((resolve) => {
+        let still = 0;
+        let frames = 0;
+        const moved = () => void (still = 0);
+        document.addEventListener('scroll', moved, { capture: true, passive: true });
+        const frame = () => {
+            if (++still < STILL_FRAMES && ++frames < MAX_FRAMES)
+                return void requestAnimationFrame(frame);
+            document.removeEventListener('scroll', moved, { capture: true });
+            resolve();
+        };
+        requestAnimationFrame(frame);
+    });
+}

package/dist/visual/strings.d.ts

@@ -21,9 +21,8 @@ export interface VisualStrings extends TableChromeStrings, SlashStrings {
     addCard: string;
     arrayAdd: string;
     arrayRemove: string;
-    /** The reorder pair on an `object` row, accessible names: the buttons are glyphs. */
-    arrayMoveUp: string;
-    arrayMoveDown: string;
+    /** The drag handle on an `object` row: its tooltip and, with the row, its name. */
+    arrayDrag: string;
     /**
      * A row control's accessible name, the action and the row it acts on: `Remove
      * Authors 2`. The action alone stays the tooltip. Parametric, so word order stays
@@ -42,9 +41,11 @@ export interface VisualStrings extends TableChromeStrings, SlashStrings {
      * word order stays the translator's.
      */
     elementUntitled: (label: string, index: number) => string;
-    /** The tag on the unset sentinel's row, which is what tells it from the member it
-     *  ghosts ({@link EnumField}). */
+    /** The tag on the unset sentinel's row where it ghosts a member, which is what tells
+     *  it from that member ({@link EnumField}). */
     enumUnsetTag: string;
+    /** The same row's tag where it ghosts no member: no `default:`, or a blank one. */
+    enumUnsetTagNone: string;
     /** The count in the matrix's label row: how many of its items are held. */
     matrixHeld: (held: number, total: number) => string;
     /** An open matrix's add box at rest, naming the list it adds to: `Add to Staff…`. The box

package/dist/visual/strings.js

@@ -30,12 +30,12 @@ export const DEFAULT_VISUAL_STRINGS = {
     addCard: '+ Add Card',
     arrayAdd: '+ Add',
     arrayRemove: 'Remove',
-    arrayMoveUp: 'Move up',
-    arrayMoveDown: 'Move down',
+    arrayDrag: 'Drag to move',
     arrayRowAction: (action, row) => `${action} ${row}`,
     arrayCount: (count, max) => `${count} / ${max}`,
     elementUntitled: (label, index) => `${label} ${index}`,
-    enumUnsetTag: 'default',
+    enumUnsetTag: 'Default',
+    enumUnsetTagNone: 'Unset',
     matrixHeld: (held, total) => `${held} of ${total} held`,
     matrixAdd: (list) => (list ? `Add to ${list}…` : 'Add…'),
     matrixItemTitle: (list, index) => `${list ? `${list} item` : 'Item'} ${index}`,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@quillmark/svelte",
-	"version": "0.20.1",
+	"version": "0.21.0",
 	"description": "Editor, live-preview and source surfaces over a Quillmark WASM session.",
 	"repository": {
 		"type": "git",
@@ -69,7 +69,7 @@
 		"check": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings"
 	},
 	"peerDependencies": {
-		"@quillmark/wasm": ">=0.124.0-0",
+		"@quillmark/wasm": ">=0.125.0-0",
 		"svelte": "^5.33.0"
 	},
 	"dependencies": {