@quillmark/svelte 0.20.0 → 0.21.0

package/dist/core/theme.css

@@ -117,9 +117,9 @@
 
 	   Two planes sink. `sunken` is the ground — the column behind the cards, the
 	   desk behind the sheets — and lifting the plane above it takes very little
-	   at the light pole. `well` is the hole cut into a card: a field, a table's
-	   header band, the one native select, none of which draw an edge, so the
-	   step is the whole of what says a value is typed there. The order at the
+	   at the light pole. `well` is the hole cut into a card: a field, the one
+	   native select, neither of which draws an edge, so the step is the whole of
+	   what says a value is typed there. The order at the
 	   light pole is card, ground, well; at the dark pole the two sink to within
 	   a channel of each other, which is where a card with little light left to
 	   give up leaves them.
@@ -148,6 +148,10 @@
 	   dark. */
 	--_qm-surface-raised: color-mix(in oklab, var(--_qm-bg), #fff 8%);
 	--_qm-surface-hover: color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 8%);
+	/* A band laid on the card rather than cut into it: a table's header, and the pill a
+	   grip draws. It steps toward the ink at both poles, a shade under white in light
+	   and a shade over the card in dark, where `well` sinks to a black stripe. */
+	--_qm-surface-band: color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 6%);
 	/* The one rung whose arms are not a single ratio: a stroke is read against what it
 	   separates, and the mix that reads as a hairline on the dark default draws the
 	   light card in a line heavier than the type it frames. The light arm is
@@ -157,12 +161,11 @@
 		color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 6%),
 		color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 17%)
 	);
-	/* A rule that separates without structuring: the lines between a table's cells,
-	   where the frame around them is the structure. Half the border, and read off
-	   it rather than restated as a percentage of its own, so the two hold their
-	   relationship at any mix: a stroke against the surface behind it, not a fill
-	   stacked on one. */
-	--_qm-border-faint: color-mix(in oklab, var(--_qm-bg), var(--_qm-border) 50%);
+	/* A stroke ruled through content rather than round it: a table's frame and every
+	   line between its cells. The light arm of `border` is a card's edge against the
+	   ground, and drawn between lines of type it vanishes, so a grid takes one ratio at
+	   both poles, which lands within a few points of `border` in dark. */
+	--_qm-rule: color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 14%);
 	/* Three rungs, and nothing under the last: a step below `label` lands under 3:1 on
 	   the well a field draws it against, and what would take it — an unset value's word,
 	   an invitation — is content a reader has to read (WCAG 1.4.3), not decoration.
@@ -186,6 +189,11 @@
 	   stacks over whichever surface rung the cell already draws instead of replacing
 	   it. */
 	--_qm-accent-tint: color-mix(in oklab, var(--_qm-accent) 12%, transparent);
+	/* The accent at the default rung: a mark's fill where the `default:` supplies it, a
+	   switch's checked track and a held tick's box, stepped toward the card by the
+	   ratio `default` steps the ink. What is drawn over it in the card's colour, the
+	   thumb and the check, holds 3:1 at both poles, at 3.3:1 and 4.2:1. */
+	--_qm-accent-default: color-mix(in oklab, var(--_qm-accent), var(--_qm-bg) 20%);
 	/* The danger hue held: what a destructive control fills with where the family's
 	   neutral hover rung would read as one more button. Mixed at the accent tint's
 	   strength, so a held tint is a held tint whichever hue it carries. */
@@ -281,6 +289,10 @@
 	   arrival settles into its rest instead of stopping at it, and long enough that a
 	   control resting at nothing reads as arriving rather than as switching. */
 	--_qm-reveal: 500ms cubic-bezier(0.4, 0, 0.2, 1);
+	/* A wait rather than a trip: how long a caret rests on an empty line before the
+	   slash hint comes up. Longer than the gap between two keystrokes, so typing on
+	   through an Enter never draws it. */
+	--_qm-hint-wait: 500ms;
 
 	/* ── Geometry ──────────────────────────────────────────────────────────*/
 	/* One stroke width for every edge the chrome draws and every rule it ranks
@@ -342,9 +354,9 @@
 	   it does not move when `--qm-space` does. Every button family reads it, so the
 	   floor is one number instead of one expression per control. */
 	--_qm-tap-min: 24px;
-	/* The chrome glyph: a chip's, and the in-well remove's. Sized in CSS rather than
-	   through the icon's `size`, so a stylesheet beats the SVG presentation attribute
-	   and one rung is the whole of what a control draws. */
+	/* The chrome glyph: a chip's, a glyph button's, the enum's chevron. Sized in CSS
+	   rather than through the icon's `size`, so a stylesheet beats the SVG presentation
+	   attribute and one rung is the whole of what a control draws. */
 	--_qm-glyph-control: 14px;
 	/* The narrowest track a control that fills its width stays usable in: a table's
 	   column floors at it, rises no further than its content, and a row of them scrolls

package/dist/visual/ArrayField.svelte

@@ -29,8 +29,8 @@
  container or a block prose cell.
 
  The row's controls are inside the element: a slab over the end of the element's own
- box, taking its two end-side corners — the remove, and on an `object` row the reorder
- pair before it. So a row's box is the element's box, and an array's rows end where
+ box, taking its two end-side corners: the remove. An `object` row's drag handle hangs
+ off its start edge instead, as a table grip does. So a row's box is the element's box, and an array's rows end where
  every other field's control does. On an object element that box is the summary rather
  than the open row: a destructive control belongs to the line it sits on, not to
  everything that line has unfolded. A table's row carries the remove alone, in its last
@@ -41,7 +41,8 @@
  Keys carry the list without the mouse: Enter inserts a sibling below and takes the
  caret there, Backspace on an empty element removes it and hands focus back up the
  list, Alt+↑/↓ anywhere in an `object` row of the list moves it, the nearest row
- answering and never the record around a nested one. A move is one splice of the ids
+ answering and never the record around a nested one, and is the twin of the handle's
+ drag. A move is one splice of the ids
  and of the values together, the mechanism insert and remove use, so an element keeps
  its id for life and no prose leaf inside it remounts; the open row stays open across
  its own move, and `animate:reorder` holds the moving row as it holds a card.
@@ -328,15 +329,13 @@
 		void focusAfterFlush(next[Math.max(k - 1, 0)], column, fromRemove);
 	}
 	/**
-	 * Move element `k` one slot: one splice of the ids and of the values together, so
-	 * the element keeps its id and everything mounted under it. A no-op at either edge.
-	 * The control that was pressed rides with the row, so it is focused again once the
-	 * flush has moved it: a node moved in the DOM is a node the browser blurred. An arrow
-	 * the move carried to its edge is disabled and takes no focus, so its twin does.
+	 * Move element `k` to slot `to`: one splice of the ids and of the values together, so
+	 * the element keeps its id and everything mounted under it. A no-op outside the list.
+	 * The control that held the focus rides with the row, so it is focused again once the
+	 * flush has moved it: a node moved in the DOM is a node the browser blurred.
 	 */
-	function move(k: number, dir: -1 | 1): void {
-		const to = k + dir;
-		if (to < 0 || to >= ids.length) return;
+	function move(k: number, to: number): void {
+		if (to === k || to < 0 || to >= ids.length) return;
 		const pressed = document.activeElement;
 		arm.arm();
 		const nextIds = ids.slice();
@@ -349,14 +348,8 @@
 		onCommit(next);
 		void (async () => {
 			if (!(await span.resumes(tick()))) return;
-			if (!(pressed instanceof HTMLElement) || !pressed.isConnected) return;
-			const target =
-				pressed instanceof HTMLButtonElement && pressed.disabled
-					? [pressed.previousElementSibling, pressed.nextElementSibling].find(
-							(b) => b instanceof HTMLButtonElement && !b.disabled
-						)
-					: pressed;
-			if (target instanceof HTMLElement) target.focus();
+			if (pressed instanceof HTMLElement && pressed.isConnected && rowEls[id]?.contains(pressed))
+				pressed.focus();
 		})();
 	}
 	/** Take the caret: the first element, or the add affordance when the list is empty;
@@ -538,7 +531,64 @@
 		const dir = e.key === 'ArrowUp' ? -1 : 1;
 		if (k + dir < 0 || k + dir >= ids.length) return;
 		e.preventDefault();
-		move(k, dir);
+		move(k, k + dir);
+	}
+
+	// ── The drag handle ──────────────────────────────────────────────────────────
+	// Press-and-drag the handle moves its row; a press that does not travel past the dead
+	// zone does nothing. The rows are measured once the drag engages, nothing reflowing
+	// until the release (the lift is a tone and the drop rule is out of flow), and the
+	// release is the one splice `move` makes.
+	const DEAD_ZONE = 3;
+	type RowDrag = {
+		k: number;
+		origin: number;
+		engaged: boolean;
+		drop: number;
+		heads: { start: number; end: number }[];
+	};
+	let drag = $state<RowDrag | undefined>();
+	function onHandleDown(e: PointerEvent, k: number): void {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
+		drag = { k, origin: e.clientY, engaged: false, drop: k, heads: [] };
+	}
+	function onHandleMove(e: PointerEvent): void {
+		if (!drag) return;
+		if (!drag.engaged) {
+			if (Math.abs(e.clientY - drag.origin) < DEAD_ZONE) return;
+			drag.engaged = true;
+			drag.heads = ids.map((id) => {
+				const box = rowEls[id]?.getBoundingClientRect();
+				return { start: box?.top ?? 0, end: box?.bottom ?? 0 };
+			});
+		}
+		drag.drop = dropIndex(drag, e.clientY);
+	}
+	/** The row the pointer is over, or the nearest one past either end. */
+	function dropIndex(d: RowDrag, y: number): number {
+		let best = d.k;
+		let nearest = Infinity;
+		d.heads.forEach((head, i) => {
+			const gap = y < head.start ? head.start - y : y > head.end ? y - head.end : 0;
+			if (gap < nearest) {
+				nearest = gap;
+				best = i;
+			}
+		});
+		return best;
+	}
+	function onHandleUp(e: PointerEvent): void {
+		const done = drag;
+		drag = undefined;
+		if (!done?.engaged || e.type !== 'pointerup') return;
+		move(done.k, done.drop);
+	}
+	/** Where the drop rule draws on row `k`, while a drag would land the row there. */
+	function dropSide(k: number): 'before' | 'after' | undefined {
+		if (!drag?.engaged || drag.drop !== k || drag.drop === drag.k) return undefined;
+		return drag.drop > drag.k ? 'after' : 'before';
 	}
 </script>
 
@@ -639,7 +689,11 @@
 				<!-- The handler catches a key from the controls inside the row and adds no
 				     interaction of the row's own: the row is no tab stop. -->
 				<div
-					class={['qm-array-row qm-element', { open: open.has(id) }]}
+					class={[
+						'qm-array-row qm-element',
+						{ open: open.has(id), lifted: drag?.engaged && drag.k === k }
+					]}
+					data-drop={dropSide(k)}
 					bind:this={rowEls[id]}
 					animate:reorder={arm.armed}
 					onkeydown={(e) => onRowKey(e, k)}
@@ -649,6 +703,7 @@
 					     end-side corners) needs corners to take. So a list of records measures
 					     like a list of inputs whatever the element type. -->
 					<div class="qm-element-head">
+						{@render handle(k)}
 						<button
 							type="button"
 							class="qm-control-box qm-focus-ring qm-element-summary"
@@ -666,7 +721,7 @@
 							{/if}
 						</button>
 						<div class="qm-row-actions">
-							{@render rowActions(k)}
+							{@render removeButton(k)}
 						</div>
 					</div>
 					{#if open.has(id)}
@@ -738,26 +793,22 @@
 	>
 {/snippet}
 
-<!-- An `object` row's controls: the reorder pair, disabled at its edge as the card
-     header's is, then the remove. -->
-{#snippet rowActions(k: number)}
+<!-- An `object` row's drag handle, a table grip's twin hung off the row's start edge.
+     It holds no focus, as a grip does not: its keyboard twin is Alt+↑/↓ from anywhere in
+     the row. -->
+{#snippet handle(k: number)}
 	<button
 		type="button"
-		class="qm-icon-btn qm-row-btn qm-focus-ring"
-		title={t.strings.arrayMoveUp}
-		aria-label={rowAction(t.strings.arrayMoveUp, k)}
-		disabled={k === 0}
-		onclick={() => move(k, -1)}><Icon name="chevron-up" /></button
+		class="qm-row-handle"
+		tabindex="-1"
+		title={t.strings.arrayDrag}
+		aria-label={rowAction(t.strings.arrayDrag, k)}
+		onpointerdown={(e) => onHandleDown(e, k)}
+		onpointermove={onHandleMove}
+		onpointerup={onHandleUp}
+		onpointercancel={onHandleUp}
+		><span class="qm-row-handle-bar"><Icon name="grip-vertical" /></span></button
 	>
-	<button
-		type="button"
-		class="qm-icon-btn qm-row-btn qm-focus-ring"
-		title={t.strings.arrayMoveDown}
-		aria-label={rowAction(t.strings.arrayMoveDown, k)}
-		disabled={k === ids.length - 1}
-		onclick={() => move(k, 1)}><Icon name="chevron-down" /></button
-	>
-	{@render removeButton(k)}
 {/snippet}
 
 <style>
@@ -807,12 +858,16 @@
 		display: none;
 	}
 	/* The default's rows are what prints and nothing written: every value they draw takes
-	   the default rung (theme.css), and the first gesture, writing them, takes it off. */
+	   the default rung (theme.css), a checked switch's track included, and the first
+	   gesture, writing them, takes it off. */
 	.qm-array-rows[data-default] :global(:is(.qm-input, .ProseMirror, .qm-date)),
 	.qm-array-rows[data-default] :global(.qm-select:not([data-ghosted])),
 	.qm-array-rows[data-default] .qm-element-title:not(.untitled) {
 		color: var(--_qm-ink-default);
 	}
+	.qm-array-rows[data-default] :global(.qm-toggle[data-state='checked']) {
+		background: var(--_qm-accent-default);
+	}
 	/* A grid rather than a block: an `<input>` is inline-level and would sit on a
 	 baseline, standing the row a descender taller than the box the slab measures itself
 	 against. `minmax(0, …)` because a long unbroken value grows an `auto` track, and the
@@ -830,7 +885,7 @@
 	/* The end inset the slabs stand in, taken off whichever box the element drew:
 	 `.qm-input` is the text element, `.qm-control-box` the prose one — the row's own
 	 child, so a table's cells, which are boxes too, keep their inset — and an object
-	 row's summary, which stands three slabs off its end. `:global`, because the box
+	 row's summary, which stands one slab off its end. `:global`, because the box
 	 belongs to the child component's markup and the scope class stops at this
 	 component's. The longhand beats the family's `padding` shorthand without a
 	 specificity fight: `controls.css` ranks the family at zero inside `:where()`. */
@@ -839,7 +894,7 @@
 		padding-inline-end: var(--_qm-tap-min);
 	}
 	.qm-element-summary {
-		padding-inline-end: calc(3 * var(--_qm-tap-min));
+		padding-inline-end: var(--_qm-tap-min);
 	}
 	/* The box's end wall, floor to ceiling: a height of its own would leave a sliver of
 	 well above or below, and the corners it takes are the box's — the end-side pair keeps
@@ -847,8 +902,7 @@
 	 another gives up its corners on both sides.
 
 	 It comes up on its own row rather than on the field: a destructive control is offered
-	 by the row the pointer is on, not by every row at once, and the reorder pair beside
-	 it comes up with it. Hover is where the remove says destructive, ink with fill, a
+	 by the row the pointer is on, not by every row at once. Hover is where the remove says destructive, ink with fill, a
 	 tint alone being a wash under a label-toned glyph. */
 	.qm-row-actions {
 		position: absolute;
@@ -872,10 +926,6 @@
 		border-start-end-radius: var(--_qm-radius-inner);
 		border-end-end-radius: var(--_qm-radius-inner);
 	}
-	.qm-row-btn :global(svg) {
-		width: var(--_qm-glyph-control);
-		height: var(--_qm-glyph-control);
-	}
 	/* Child combinators: a nested array shares this scope, and a row's hover is not its
 	 open subform's rows'. */
 	.qm-array-row:hover > .qm-row-actions,
@@ -888,6 +938,71 @@
 		background: var(--_qm-danger-tint);
 		color: var(--_qm-danger);
 	}
+	/* The handle is a table grip's twin (prose.css §"One grip per line"): a pill carrying
+	 the grip's marks, hung off the row's start edge in the `--_qm-nest` every row stands
+	 in from the stroke outside it, which a group's panel clips at. It rests
+	 at nothing, where the remove rests faint, and comes up with the row the pointer is
+	 on, staying up through the drag it carries; a band flush with the row keeps the
+	 pointer on the row all the way to it. The pointer owns the gesture, not the page's
+	 scroll. */
+	.qm-row-handle {
+		position: absolute;
+		inset-block: 0;
+		inset-inline-end: 100%;
+		width: var(--_qm-nest);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0;
+		border: none;
+		background: none;
+		color: var(--_qm-ink-label);
+		cursor: grab;
+		touch-action: none;
+		opacity: 0;
+		transition: opacity var(--_qm-duration-fast) var(--_qm-ease-reverse);
+	}
+	.qm-row-handle-bar {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: var(--_qm-tap-min);
+		border-radius: var(--_qm-radius-pill);
+		background: var(--_qm-surface-band);
+	}
+	.qm-row-handle-bar :global(svg) {
+		width: var(--_qm-space-3);
+		height: var(--_qm-space-3);
+	}
+	.qm-array-row:hover > .qm-element-head > .qm-row-handle,
+	.qm-element.lifted > .qm-element-head > .qm-row-handle {
+		opacity: 1;
+	}
+	.qm-element.lifted > .qm-element-head > .qm-row-handle {
+		cursor: grabbing;
+	}
+	/* The lifted row is a tone, and the drop is one rule on the edge it would land
+	 against, drawn out of flow so nothing reflows under the drag: the table island's
+	 own pair. */
+	.qm-element.lifted > .qm-element-head > .qm-element-summary {
+		opacity: var(--_qm-opacity-muted);
+	}
+	.qm-element[data-drop]::after {
+		content: '';
+		position: absolute;
+		inset-inline: 0;
+		height: var(--_qm-ring-width);
+		background: var(--_qm-accent);
+		border-radius: var(--_qm-radius-pill);
+		pointer-events: none;
+	}
+	.qm-element[data-drop='before']::after {
+		top: calc(-0.5 * (var(--_qm-space) + var(--_qm-ring-width)));
+	}
+	.qm-element[data-drop='after']::after {
+		bottom: calc(-0.5 * (var(--_qm-space) + var(--_qm-ring-width)));
+	}
 	/* ── An object element ──────────────────────────────────────────────────────
 	 The row is a summary and the subform hangs under it. `row-gap` rather than a margin
 	 on the subform, because the distance between a control and what it has unfolded
@@ -1106,10 +1221,15 @@
 	.qm-array.empty .qm-add-el {
 		opacity: 1;
 	}
+	/* No hover to come up on: the controls stand at the muted rung, the handle with
+	 them. */
 	@media (hover: none) {
 		.qm-add-el,
 		.qm-row-actions {
 			opacity: var(--_qm-opacity-muted);
 		}
+		.qm-row-handle {
+			opacity: 1;
+		}
 	}
 </style>

package/dist/visual/BooleanField.svelte

@@ -10,6 +10,9 @@
  `mixed` there reads as false), so an optional boolean's control is a `checkbox`, the
  toggle role that does, announcing `mixed` while unset. A press from unset writes
  `true`; nothing here returns the cell to unset.
+
+ An unset switch draws its `default:` at the default rung, as every control draws a
+ printed default: a checked track takes the accent's default rung.
 -->
 <script lang="ts">
 	import { Switch } from 'bits-ui';
@@ -41,6 +44,7 @@
 	// the unset optional cell, the one state with no default to stand in for it.
 	let local = $derived<boolean | undefined>(value ?? fallback ?? (optional ? undefined : false));
 	const unset = $derived(local === undefined);
+	const defaulted = $derived(value === undefined && fallback !== undefined);
 	const tristate = $derived(
 		optional ? { role: 'checkbox', 'aria-checked': unset ? ('mixed' as const) : !!local } : {}
 	);
@@ -49,7 +53,11 @@
 <!-- Not `.qm-switch`: that name is the preset's pane band, whose narrow-viewport rule
  stands every child of it at `--qmh-tap`, so a track wearing it grows a thumb three times
  its own height over the labels around it (`preset/recipes.css`, held by `check:style`). -->
-<span class="qm-toggle-wrap" data-unset={unset ? '' : undefined}>
+<span
+	class="qm-toggle-wrap"
+	data-unset={unset ? '' : undefined}
+	data-default={defaulted ? '' : undefined}
+>
 	<Switch.Root
 		class="qm-toggle qm-focus-ring qm-tap-floor"
 		checked={!!local}
@@ -101,6 +109,9 @@
 	.qm-toggle-wrap :global(.qm-toggle[data-state='checked']) {
 		background: var(--_qm-accent);
 	}
+	.qm-toggle-wrap[data-default] :global(.qm-toggle[data-state='checked']) {
+		background: var(--_qm-accent-default);
+	}
 	/* The focus ring rides `.qm-focus-ring` on the switch (controls.css). */
 	/* The thumb reads on tone alone: the base surface over the track's `hover` rung
 	 unchecked, and over `--_qm-accent` checked. No edge of its own: a hairline around

package/dist/visual/Card.svelte

@@ -72,13 +72,23 @@
 		leaves
 	}: Props = $props();
 
-	let localTitle = $derived(card.titleOverride);
+	// The rename in flight, written once on blur or Enter. Held apart from the stored
+	// title because a re-derive mid-edit hands `card` back with the title it stored.
+	let draft = $state<string | undefined>(undefined);
+	const shownTitle = $derived(draft ?? card.titleOverride);
 
-	// The pre-edit value Escape rolls back to; the rename itself stays live on input.
-	let titleAtFocus = '';
+	// A focus the shell hands over (`focusHeader`) is not armed for replacement: the key
+	// that pressed a delete, pressed again, would retitle the card it landed on.
+	let handed = false;
 	function onTitleFocus(e: FocusEvent): void {
-		titleAtFocus = localTitle;
-		(e.currentTarget as HTMLInputElement).select();
+		draft = card.titleOverride;
+		const input = e.currentTarget as HTMLInputElement;
+		if (handed) input.setSelectionRange(input.value.length, input.value.length);
+		else input.select();
+	}
+	function onTitleBlur(): void {
+		if (draft !== undefined && draft !== card.titleOverride) ops.rename(draft);
+		draft = undefined;
 	}
 	// A press on an unfocused title would place a caret on mouseup, collapsing the
 	// focus-time select-all. A press while already focused stays normal, so clicking
@@ -102,13 +112,10 @@
 		const el = e.currentTarget as HTMLInputElement;
 		if (e.key === 'Enter') {
 			e.preventDefault();
-			el.blur(); // commit: the live value already persisted on input
+			el.blur();
 		} else if (e.key === 'Escape') {
 			e.preventDefault();
-			if (localTitle !== titleAtFocus) {
-				localTitle = titleAtFocus;
-				ops.rename(titleAtFocus); // roll back the live edits
-			}
+			draft = undefined;
 			el.blur();
 		}
 	}
@@ -193,6 +200,13 @@
 		const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
 		el?.scrollIntoView({ behavior: reduce ? 'auto' : 'smooth', block });
 	}
+	/** Focus the title with the caret at its end, or the header's first live control on a
+	 *  recovery shell, which has no title to focus. */
+	export function focusHeader(): void {
+		handed = true;
+		el?.querySelector<HTMLElement>('.qm-card-header :is(input, button:not(:disabled))')?.focus();
+		handed = false;
+	}
 </script>
 
 <!-- `data-qm-card` names the island for a floating surface that has to stay inside one
@@ -210,20 +224,18 @@
 			<header class="qm-card-header">
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div class="qm-card-rename" onmousedown={onRenameMousedown}>
-					<span class="qm-card-title-sizer" data-value={localTitle || card.titlePlaceholder}>
+					<span class="qm-card-title-sizer" data-value={shownTitle || card.titlePlaceholder}>
 						<input
 							class="qm-card-title qm-focus-ring"
-							value={localTitle}
+							value={shownTitle}
 							placeholder={card.titlePlaceholder}
 							aria-label={t.strings.cardTitle}
 							size="1"
 							onmousedown={onTitleMousedown}
 							onfocus={onTitleFocus}
+							onblur={onTitleBlur}
 							onkeydown={onTitleKeydown}
-							oninput={(e) => {
-								localTitle = (e.currentTarget as HTMLInputElement).value;
-								ops.rename(localTitle);
-							}}
+							oninput={(e) => (draft = (e.currentTarget as HTMLInputElement).value)}
 						/>
 					</span>
 				</div>
@@ -463,10 +475,10 @@
 		 what crosses the line. */
 		margin-inline-end: calc(-1 * (var(--_qm-tap-min) - var(--_qm-glyph-control)) / 2);
 	}
-	/* Focus as well as hover, so a caret in any leaf, the title, or a chevron holds the
-	 reveal: hover alone would strand the pair on keyboard and touch. */
-	.qm-card:hover :global(.qm-card-reorder),
-	.qm-card:focus-within :global(.qm-card-reorder) {
+	/* Focus as well as hover, so a caret in any leaf, the title, or a control holds the
+	 reveal: hover alone would strand the row on the keyboard. */
+	.qm-card:hover :global(.qm-card-controls),
+	.qm-card:focus-within :global(.qm-card-controls) {
 		opacity: 1;
 	}
 	/* The rename hit region is the header's free width at full height, so a press

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

@@ -38,6 +38,7 @@ interface Props {
 declare const Card: import("svelte").Component<Props, {
     revealLeaf: (key: string) => void;
     scrollIntoViewCard: (block: ScrollLogicalPosition) => void;
+    focusHeader: () => void;
 }, "">;
 type Card = ReturnType<typeof Card>;
 export default Card;

package/dist/visual/CardControls.svelte

@@ -1,11 +1,11 @@
 <!--
   Card controls, composable cards only.
-  Right-aligned in the header: a move-up/move-down chevron pair revealed while the
-  pointer or the caret is in the card (each disabled at its edge), then delete.
+  Right-aligned in the header: a move-up/move-down chevron pair (each disabled at its
+  edge), then delete, the row revealed while the pointer or the caret is in the card.
   Reorder is buttons, not drag (V1). All three are chips (controls.css): fill arrives
-  on hover, and delete rests faded danger, full under the pointer. The card scopes
-  that reveal, so its condition lives in the parent's CSS; the pair keeps the narrower
-  guarantee here, that a focused chevron is a visible one.
+  on hover, and delete draws faded danger, full under the pointer. The card scopes
+  that reveal, so its condition lives in the parent's CSS; the row keeps the narrower
+  guarantee here, that a focused control is a visible one.
 -->
 <script lang="ts">
 	import { wording } from './strings.js';
@@ -56,21 +56,21 @@
 		display: flex;
 		align-items: center;
 		gap: var(--_qm-space-half);
-		/* One compositor layer for the row. Opacity on the pair otherwise snaps
-		   that box off the header's half-pixel, against delete which never leaves
-		   the document paint. */
+		opacity: 0;
+		transition: opacity var(--_qm-duration-fast) var(--_qm-ease-reverse);
+		/* One compositor layer for the row at rest as well as mid-fade: a box handed
+		   back to the document paint when its fade ends snaps off the header's
+		   half-pixel as it lands. */
 		transform: translateZ(0);
 	}
 	.qm-card-reorder {
 		display: flex;
-		opacity: 0;
-		transition: opacity var(--_qm-duration-fast) var(--_qm-ease-reverse);
 	}
-	/* Opacity hides the pair without taking it out of the tab order, so the
-	   component holds its own floor: a chevron that has focus is drawn, and its ring
-	   with it. The card's reveal already covers this; the rule is here because the
-	   hidden state is. */
-	.qm-card-reorder:focus-within {
+	/* Opacity hides the row without taking it out of the tab order, which keeps
+	   delete the keyboard's way to remove a card, so the component holds its own
+	   floor: a control that has focus is drawn, and its ring with it. The card's
+	   reveal already covers this; the rule is here because the hidden state is. */
+	.qm-card-controls:focus-within {
 		opacity: 1;
 	}
 	/* Squares: the chip's inline pad is for a label. Width and height are one rung