@quillmark/svelte 0.27.0 → 0.28.0

package/dist/visual/DateField.svelte

@@ -307,12 +307,19 @@
 	}
 	/* The ring rides `.qm-focus-ring-within` (controls.css) rather than the plain
 	   marker: focus lives on the segment, so it rings the field, not the segment
-	   the caret happens to be in. */
+	   the caret happens to be in. Tabular figures, so a segment keeps its width as its
+	   digits change. */
 	.qm-date-wrap :global(.qm-date-segment) {
 		padding: 0 var(--_qm-space-half);
+		font-variant-numeric: tabular-nums;
 		border-radius: var(--_qm-radius-inner);
 		outline: none;
 	}
+	/* The first segment's pad sits inside the box's inset rather than after it, so its
+	   digits start on the column every other box's text starts on. */
+	.qm-date-wrap :global(.qm-date-segment:first-child) {
+		margin-inline-start: calc(-1 * var(--_qm-space-half));
+	}
 	.qm-date-wrap :global(.qm-date-segment:focus) {
 		background: var(--_qm-surface-hover);
 	}
@@ -329,12 +336,21 @@
 	.qm-date-wrap :global(.qm-date[data-default] .qm-date-segment) {
 		color: var(--_qm-ink-default);
 	}
+	/* A separator is punctuation between the parts rather than part of the value, so it
+	 takes the label rung whatever the parts beside it hold: at `ink` it stood darker than
+	 the hint or the default digits either side of it. */
+	.qm-date-wrap :global(.qm-date .qm-date-segment[data-segment='literal']) {
+		color: var(--_qm-ink-label);
+	}
 	/* The toggle's state is its fill and its glyph, never the pointer: a hover fill
 	 would read as pressed. Off, it rests hidden where a pointer can reveal it, still
 	 holding its width so the digits never shift. It sits inside the box's line, so
-	 the box stands as tall as the inputs beside it. */
+	 the box stands as tall as the inputs beside it. Its pad sits inside the box's
+	 inset, so its label ends on the column the digits start on from the other side,
+	 and its fill stands about as far off the box's end as off its top and bottom. */
 	.qm-date-today {
 		margin-inline-start: auto;
+		margin-inline-end: calc(-1 * var(--_qm-space-2));
 		padding-block: var(--_qm-space-half);
 		line-height: 1;
 		border-radius: var(--_qm-radius-inner);
@@ -347,9 +363,9 @@
 		background: var(--_qm-accent-tint);
 		color: var(--_qm-ink);
 	}
+	/* A default-supplied today keeps the pressed fill: the default ink alone says it is
+	 shown and not written, as it does for the digits beside it. */
 	.qm-date-today[data-default] {
-		background: transparent;
-		box-shadow: inset 0 0 0 var(--_qm-border-width) var(--_qm-border);
 		color: var(--_qm-ink-default);
 	}
 	@media (hover: hover) {

package/dist/visual/EnumField.svelte

@@ -203,8 +203,11 @@
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
+	/* The chevron is chrome, so it takes the label rung the other chrome glyphs take: at
+	   `ink` beside a written value it read as part of the value. */
 	.qm-select-wrap :global(.qm-select-chevron) {
 		flex-shrink: 0;
+		color: var(--_qm-ink-label);
 		width: var(--_qm-glyph-control);
 		height: var(--_qm-glyph-control);
 	}

package/dist/visual/FieldHint.svelte

@@ -31,6 +31,7 @@
 <script lang="ts">
 	import { Popover } from 'bits-ui';
 	import Icon from './icons/Icon.svelte';
+	import { spacePx } from '../core/rungs.js';
 	import './controls.css';
 
 	interface Props {
@@ -205,7 +206,7 @@
 			collisionBoundary={bounds}
 			side={beside ? 'right' : 'top'}
 			align={beside ? 'center' : 'start'}
-			sideOffset={6 + reach}
+			sideOffset={(spacePx(triggerEl) ?? 0) + reach}
 			trapFocus={false}
 			onOpenAutoFocus={(e: Event) => e.preventDefault()}
 			onCloseAutoFocus={(e: Event) => e.preventDefault()}

package/dist/visual/FormatPopover.svelte

@@ -10,12 +10,14 @@
  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) lives in the codec's keymap (field.ts); this is the pointer
- affordance for all six marks. Mod-K is this surface's own key, the prompt it raises
- being this surface's: a document `keydown` the leaf's keymap left unclaimed. Over a
- leaf that holds lists, two more buttons number or bullet every selected line, or take
- the marker off where every one carries it: the codec's `toggleList`, whose keys
- (Mod-Shift-7/8) the leaf's keymap binds.
+ (Mod-b/i/u, Mod-Shift-x, Mod-e) lives in the codec's keymap (field.ts); this is
+ the pointer affordance for all six marks. Mod-K is this surface's own key, the
+ prompt it raises being this surface's: a document `keydown` the leaf's keymap left
+ unclaimed. Over a leaf that holds lists, two more buttons number or bullet every
+ selected line, or take the marker off where every one carries it: the codec's
+ `toggleList`, whose keys (Mod-Shift-7/8) the leaf's keymap binds. Where the host
+ handed the editor a font library, or the selection already sets a family, a picker
+ sets the selection's family or takes it back to the surrounding face (`fonts.ts`).
 
  Selection observation. The view's `dispatchTransaction` is the leaf's
  (read-only), so there is no hook to observe transactions from outside.
@@ -69,7 +71,7 @@
 	const t = wording();
 	import { toggleMark } from 'prosemirror-commands';
 	import { keydownHandler } from 'prosemirror-keymap';
-	import { TextSelection, type Command } from 'prosemirror-state';
+	import { NodeSelection, type Command } from 'prosemirror-state';
 	import type { EditorView } from 'prosemirror-view';
 	import type { MarkType } from 'prosemirror-model';
 	import { Popover } from 'bits-ui';
@@ -78,14 +80,19 @@
 	import { hasMarks, rangeAnchor, toggleList, type RangeAnchor } from '../core/codec/index.js';
 	import type { ActiveProse } from './leaves.js';
 	import { clearLink, hrefInSelection, normalizeHref, setLink } from './links.js';
+	import { familyInSelection, setFamily } from './fonts.js';
 	import { spacePx } from '../core/rungs.js';
 	import './controls.css';
 
 	interface Props {
 		/** The observation seam VisualEditor exposes over its `leaves` registry. */
 		getActiveLeaf: () => ActiveProse | undefined;
+		/** The families the host's font library offers, in its order. */
+		families?: string[];
+		/** The name the picker shows for a family, where it is not the family itself. */
+		fontLabels?: Readonly<Record<string, string>>;
 	}
-	let { getActiveLeaf }: Props = $props();
+	let { getActiveLeaf, families = [], fontLabels = {} }: Props = $props();
 
 	const SETTLE_MS = 450;
 	/** The six content formatting marks. `anchor` is withheld: it draws nothing until
@@ -108,6 +115,23 @@
 	/** Whether the leaf under the selection holds lists: a body does, a one-line field
 	 *  and a table cell do not. */
 	let listable = $state(false);
+	/** Whether the leaf under the selection declares `font_family`: a `text` leaf does not. */
+	let markable = $state(false);
+	/** The family the selection is set in, `''` for none and `null` for several. */
+	let family = $state<string | null>('');
+	/** Whether the picker draws: the leaf declares the mark, and there is a family to
+	 *  offer or one under the selection to clear, mixed with others or with none. */
+	const fontable = $derived(markable && (families.length > 0 || family !== ''));
+	/** The picker's options: the library's families, and the selection's own where the
+	 *  library lacks it, so the picker always shows what the document says. */
+	const familyOptions = $derived(
+		family && !families.includes(family) ? [...families, family] : families
+	);
+	/** The picker's value over a selection setting several families: no family's. */
+	const MIXED = '\u0000';
+	/** The view the surface rose over. The picker takes the focus, and a cell view
+	 *  without it is no longer the leaf's `focusedView`. */
+	let surfaceView: EditorView | undefined;
 	/** A pointer is down outside this surface: the selection is still being made. */
 	let pressed = false;
 	let linkPromptOpen = $state(false);
@@ -147,11 +171,12 @@
 		if (insidePopover) return;
 		if (pressed) return;
 		const view = activeLeafView();
-		// 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.
+		// A non-empty selection that is not a node's. Select-all is one: an `AllSelection`,
+		// which spans text like any range. A node selection covers a leaf block (an island,
+		// a rule), which has nothing to format and is exactly where Escape out of a table
+		// cell lands.
 		const selection = view?.state.selection;
-		const formattable = selection instanceof TextSelection && !selection.empty;
+		const formattable = !!selection && !selection.empty && !(selection instanceof NodeSelection);
 		// …in a leaf that has formatting at all. A `text` leaf declares no mark types
 		// (`plaintextSchema`, `plainSchema`), so this surface withholds itself over one
 		// entirely, the way it never rises over a form control: the value is literal
@@ -173,6 +198,9 @@
 		}
 		portalTarget = view.dom.closest<HTMLElement>('[data-qm-root]') ?? undefined;
 		listable = !!view.state.schema.nodes.list_item;
+		markable = !!view.state.schema.marks.font_family;
+		family = familyInSelection(view.state);
+		surfaceView = view;
 		const { from, to } = view.state.selection;
 		anchor = rangeAnchor(view, from, to);
 		open = true;
@@ -280,6 +308,14 @@
 		sync();
 	}
 
+	function pickFamily(name: string): void {
+		const view = surfaceView && !surfaceView.isDestroyed ? surfaceView : activeLeafView();
+		if (!view) return;
+		setFamily(name)(view.state, view.dispatch);
+		view.focus();
+		sync();
+	}
+
 	function toggleLines(ordered: boolean): void {
 		const view = activeLeafView();
 		if (!view) return;
@@ -441,6 +477,24 @@
 										onclick={() => toggle(m.name)}><Icon name={m.icon} /></button
 									>
 								{/each}
+								{#if fontable}
+									<span class="qm-format-divider" aria-hidden="true"></span>
+									<select
+										class="qm-font-select qm-focus-ring"
+										title={t.strings.formatFont}
+										aria-label={t.strings.formatFont}
+										value={family ?? MIXED}
+										onchange={(e) => pickFamily(e.currentTarget.value)}
+									>
+										{#if family === null}
+											<option value={MIXED} disabled hidden>{t.strings.fontMixed}</option>
+										{/if}
+										<option value="">{t.strings.fontDefault}</option>
+										{#each familyOptions as name (name)}
+											<option value={name}>{fontLabels[name] ?? name}</option>
+										{/each}
+									</select>
+								{/if}
 								{#if listable}
 									<span class="qm-format-divider" aria-hidden="true"></span>
 									{#each LISTS as l (l.icon)}
@@ -487,18 +541,31 @@
 	 itself, which a two-state button has no third face for. */
 	.qm-format-divider {
 		align-self: stretch;
-		width: 1px;
+		width: var(--_qm-border-width);
 		margin: var(--_qm-space-half) 0;
-		background: var(--_qm-rule);
+		background: var(--_qm-border);
 	}
 	.qm-mark-btn {
 		padding: var(--_qm-space) var(--_qm-space-2);
 		color: var(--_qm-ink);
 	}
+	/* The link input's box, a pick rather than a typed value. */
+	.qm-font-select {
+		font: inherit;
+		font-size: var(--_qm-text-body);
+		padding: var(--_qm-inset-control);
+		border: none;
+		border-radius: var(--_qm-radius-inner);
+		background: var(--_qm-surface-well);
+		color: var(--_qm-ink);
+		max-width: 12rem;
+	}
+	/* Stretched, so the prompt's buttons stand the input's box line and the face is one
+	   row height rather than a box between two shorter buttons. */
 	.qm-link-prompt {
 		display: flex;
 		gap: var(--_qm-space);
-		align-items: center;
+		align-items: stretch;
 	}
 	/* The box's recipe without `.qm-input`, which adds the `width: 100%` that would
 	   stretch this to the popover. The fill is the box's own rung and there is no

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

@@ -2,6 +2,10 @@ import type { ActiveProse } from './leaves.js';
 interface Props {
     /** The observation seam VisualEditor exposes over its `leaves` registry. */
     getActiveLeaf: () => ActiveProse | undefined;
+    /** The families the host's font library offers, in its order. */
+    families?: string[];
+    /** The name the picker shows for a family, where it is not the family itself. */
+    fontLabels?: Readonly<Record<string, string>>;
 }
 declare const FormatPopover: import("svelte").Component<Props, {}, "">;
 type FormatPopover = ReturnType<typeof FormatPopover>;

package/dist/visual/MatrixAdd.svelte

@@ -1,6 +1,7 @@
 <!--
  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.
+ what was typed, trimmed, and clears the box; Escape clears it. It is drawn as the item
+ it adds, unwritten: the plus in the tick's column and the words in the title's.
 -->
 <script lang="ts">
 	import Icon from './icons/Icon.svelte';
@@ -38,7 +39,7 @@
 </script>
 
 <div class="qm-matrix-add">
-	<span class="qm-matrix-add-field">
+	<label class="qm-matrix-add-field">
 		<Icon name="plus" class="qm-matrix-add-glyph" />
 		<input
 			bind:this={inputEl}
@@ -51,41 +52,58 @@
 			{placeholder}
 			{onkeydown}
 		/>
-	</span>
+	</label>
 </div>
 
 <style>
 	.qm-matrix-add {
-		--_slot: calc(var(--_qm-space-2) * 2 + var(--_qm-glyph-control));
 		min-width: 0;
 	}
+	/* An added item's head (`MatrixField.svelte`): the glyph a tick's width at the
+	 tick's place, the gap after it the head's, and the input pulled back over that gap
+	 by its own inset, so its words start where the titles above them do. A `<label>`,
+	 so a press on the glyph lands in the box. */
 	.qm-matrix-add-field {
-		position: relative;
 		display: flex;
 		align-items: center;
+		gap: var(--_qm-space-2);
 		min-width: 0;
 	}
 	.qm-matrix-add :global(.qm-matrix-add-glyph) {
-		position: absolute;
-		inset-inline-start: var(--_qm-space-2);
+		flex-shrink: 0;
 		width: var(--_qm-glyph-control);
 		height: var(--_qm-glyph-control);
 		color: var(--_qm-ink-label);
-		pointer-events: none;
 	}
 	/* At rest the box is the add chip it stands in for: no well, its words at the label
-	 ink. The well comes up under the pointer, and stays while it holds the focus or
-	 typed words. */
+	 ink, and the line at the chip's idle rung. The line comes up under the pointer with
+	 the well, and both stay while the box holds the focus or typed words. */
+	.qm-matrix-add-field {
+		opacity: var(--_qm-opacity-idle);
+		transition: opacity var(--_qm-duration-fast) var(--_qm-ease-reverse);
+	}
+	.qm-matrix-add-field:hover,
+	.qm-matrix-add-field:focus-within,
+	.qm-matrix-add-field:has(.qm-input:not(:placeholder-shown)) {
+		opacity: 1;
+	}
 	.qm-matrix-add-field .qm-input {
 		flex: 1;
 		min-width: 0;
-		padding-inline-start: var(--_slot);
+		margin-inline-start: calc(-1 * var(--_qm-space-2));
+		padding-inline-start: var(--_qm-space-2);
 		transition: background-color var(--_qm-duration-fast) var(--_qm-ease-reverse);
 	}
 	.qm-matrix-add-field .qm-input:placeholder-shown:not(:focus) {
 		background: transparent;
 	}
-	.qm-matrix-add-field .qm-input:placeholder-shown:not(:focus):hover {
+	.qm-matrix-add-field:hover .qm-input:placeholder-shown:not(:focus) {
 		background: var(--_qm-surface-hover);
 	}
+	/* No hover to come up on: the line stands at the muted rung, as the chip does. */
+	@media (hover: none) {
+		.qm-matrix-add-field {
+			opacity: var(--_qm-opacity-muted);
+		}
+	}
 </style>

package/dist/visual/MatrixField.svelte

@@ -283,7 +283,7 @@
 		{#each members as m (m.id)}
 			{@const on = held(m.id)}
 			<div
-				class={['qm-member qm-wash', { held: on }]}
+				class={['qm-member qm-wash', { held: on, open: on && hasColumns }]}
 				data-qm-prop={m.id}
 				bind:this={memberEls[m.id]}
 			>
@@ -311,7 +311,7 @@
 		{#each added as item, k (item.id)}
 			{@const name = item.title || t.strings.matrixItemTitle(label ?? '', k + 1)}
 			<div
-				class="qm-member qm-wash held added"
+				class={['qm-member qm-wash held added', { open: hasColumns }]}
 				data-qm-prop={item.id}
 				bind:this={memberEls[item.id]}
 			>
@@ -337,7 +337,7 @@
 						class="qm-icon-btn qm-focus-ring qm-member-remove"
 						title={t.strings.matrixRemove(name)}
 						aria-label={t.strings.matrixRemove(name)}
-						onclick={() => removeItem(item.id)}><Icon name="x" /></button
+						onclick={() => removeItem(item.id)}><Icon name="minus" /></button
 					>
 				</div>
 				{@render columns(item.id, name, true)}
@@ -426,6 +426,13 @@
 		gap: var(--_qm-space);
 		border-radius: var(--_qm-radius-inner);
 	}
+	/* An open array row's guard (`ArrayField`): a member whose columns are unfolded takes
+	 a rung of air from the members either side of it, so its columns stand nearer its own
+	 head than the next member's. Abreast, a margin would set the member below the heads
+	 its row of tracks shares, and each track holds one member's columns alone. */
+	.qm-matrix-roster:not(.compact) > .qm-member.open {
+		margin-block: var(--_qm-space);
+	}
 	/* The tick and its title on one line, the line holding the tap floor a tick alone
 	 would not reach: the title is the target, the `for` carrying its press to the input. */
 	.qm-member-head {
@@ -441,28 +448,25 @@
 		width: var(--_qm-glyph-control);
 		height: var(--_qm-glyph-control);
 	}
-	/* The box: a well, edged, since a mark this small has no plane under it to step off
-	 by tone alone; held, it takes the accent the switch's track takes when checked. */
+	/* The box is the switch's track (`BooleanField.svelte`): a fill and nothing else,
+	 which held swaps for the accent, so the surface's two marks for one boolean decode
+	 alike. */
 	.qm-tick-input {
 		appearance: none;
 		margin: 0;
 		width: 100%;
 		height: 100%;
-		border: var(--_qm-border-width) solid var(--_qm-border);
-		border-radius: calc(var(--_qm-radius-inner) / 2);
-		background: var(--_qm-surface-well);
+		border: none;
+		border-radius: var(--_qm-radius-inner);
+		background: var(--_qm-surface-band);
 		cursor: pointer;
-		transition:
-			background-color var(--_qm-duration-fast) var(--_qm-ease-reverse),
-			border-color var(--_qm-duration-fast) var(--_qm-ease-reverse);
+		transition: background-color var(--_qm-duration-fast) var(--_qm-ease-reverse);
 	}
 	.qm-tick-input:checked,
 	.qm-tick-fixed {
 		background: var(--_qm-accent);
-		border-color: var(--_qm-accent);
 	}
 	.qm-tick-fixed {
-		box-sizing: border-box;
 		cursor: default;
 	}
 	/* The mark rides over the input and takes no press of its own; it is drawn by the
@@ -512,8 +516,8 @@
 	.qm-member-title-input:focus {
 		background: var(--_qm-surface-well);
 	}
-	/* The remove is offered by the row the pointer or the focus is in, as an array row's
-	 is, and says destructive under the pointer. */
+	/* The remove is an array row's, the minus to the add box's plus: offered by the row
+	 the pointer or the focus is in, and destructive under the pointer. */
 	.qm-member-remove {
 		flex-shrink: 0;
 		color: var(--_qm-ink-label);
@@ -531,6 +535,11 @@
 		background: var(--_qm-danger-tint);
 		color: var(--_qm-danger);
 	}
+	@media (hover: none) {
+		.qm-member-remove {
+			opacity: var(--_qm-opacity-muted);
+		}
+	}
 	/* The default's set is what prints and nothing written: its titles, its ticks and
 	 every value its columns draw take the default rung (theme.css), and the first
 	 gesture, writing it, takes it off. */
@@ -541,7 +550,6 @@
 	}
 	.qm-matrix-roster[data-default] :is(.qm-tick-input:checked, .qm-tick-fixed) {
 		background: var(--_qm-accent-default);
-		border-color: var(--_qm-accent-default);
 	}
 	.qm-matrix-roster[data-default] :global(.qm-toggle[data-state='checked']) {
 		background: var(--_qm-accent-default);

package/dist/visual/NumberField.svelte

@@ -139,3 +139,10 @@
 	onkeydown={revert}
 	onchange={(e) => commit(e.currentTarget as HTMLInputElement)}
 />
+
+<style>
+	/* Tabular figures, so numbers stacked in a column line up digit for digit. */
+	.qm-input {
+		font-variant-numeric: tabular-nums;
+	}
+</style>

package/dist/visual/ObjectField.svelte

@@ -8,9 +8,9 @@
  a subform is collapsed rows again, so an open row under an open row is one figure two
  rungs in.
 
- The nesting is a vertical at `--_qm-border`, the ladder's last stroke: the card's edge,
- an open section's vertical one `--_qm-nest` in where the field is in one, this one a rung
- further, the properties a rung inside it (ARCHITECTURE §"A plane is a tone").
+ The nesting is a vertical at `--_qm-border`, the ladder's last stroke: an open section's
+ vertical one `--_qm-nest` in from the card's edge where the field is in one, this one a
+ rung further, the properties a rung inside it (ARCHITECTURE §"A plane is a tone").
 
  One figure wherever it mounts, and where its stroke lands is the stacker's. A
  variant's cells and a matrix member's columns sit at the depth a field-level subform
@@ -482,7 +482,7 @@
 	   the card and the section hold too.
 
 	   `--_qm-border`: this is the stroke that structures (ARCHITECTURE §"A plane is a
-	   tone"), the one the card's edge and the section's vertical read.
+	   tone"), the one the section's vertical reads.
 
 	   `padding-block` is the stroke's end caps, the same rung and the same reason as a
 	   section's (`Card.svelte`). A cap and not a leading gap: what stands the subform off

package/dist/visual/ProseField.svelte

@@ -208,11 +208,6 @@
 	.qm-prose-block:not(.qm-control-box) {
 		font-size: var(--_qm-text-paper);
 	}
-	/* Paper's margin, which a field has none of. On the editable, so a press in the strip
-	 lands a caret; carried by the card's inset it would be dead width. */
-	.qm-prose-block:not(.qm-control-box) :global(.ProseMirror) {
-		padding-inline: var(--_qm-space-2);
-	}
 	/* The caret is the body's focus indicator: a ring around the one surface in a card
 	 that is paper reads as form chrome. So the contenteditable's own outline is dropped
 	 everywhere, and a boxed leaf takes the shared ring on its wrapper instead

package/dist/visual/TipsCard.svelte

@@ -93,12 +93,12 @@
 	 paints over the rest. The two read as one block, which is what document-level
 	 guidance is: the main card's, not a card of its own. Still in-flow, no lift.
 
-	 No stroke of its own. A tint below the card reads as a slip; the same tint inside an
-	 outline reads as a second card, which is the one thing the tuck exists to deny. What
-	 shows below the seam is fill, and `main`'s hairline is the pair's only edge.
+	 No stroke, as `main` draws none: the pair's edge is where the two fills meet the
+	 ground. What shows below the seam is the slip's tint, a step off `main`'s plane, so it
+	 reads as a slip of the card rather than as a second card.
 
-	 The bottom corners take the inner rung where the card above takes the outer: a slip
-	 is cut crisper than the thing it is tucked under, at every setting of the dial.
+	 The bottom corners are the card's own, so the pair stands in the stack with the same
+	 silhouette as every island beside it: the tint is what says slip, once.
 
 	 Down, the insets are the document's own rhythm and they are measured to the ink, not
 	 to the boxes. The top is a block gap below the seam, what two of the body's paragraphs
@@ -109,14 +109,15 @@
 	 slack at each edge, and spent inside the gap that is enough to make the tightest space
 	 in the card measure as the widest.
 
-	 Across, the inset is `main`'s stroke and the two nested insets under it, the card's
-	 own and the prose control's, so the tip starts on the prose's edge rather than short
-	 of it. */
+	 Across, the inset is the card's inline one and then its text column, so the tip starts
+	 on the edge the body's lines do and the foot's label ends where a card's delete glyph
+	 does: the face and the tint already set the tip apart, and an indent would say it a
+	 third time. */
 	.qm-tips {
 		margin-top: calc(var(--_qm-radius) * -1);
-		border-radius: 0 0 var(--_qm-radius-inner) var(--_qm-radius-inner);
+		border-radius: 0 0 var(--_qm-radius) var(--_qm-radius);
 		padding: calc(var(--_qm-space-3) + var(--_qm-radius))
-			calc(var(--_qm-border-width) + var(--_qm-space-3) * 2) var(--_qm-space-3);
+			calc(var(--_qm-space-2) + var(--_qm-column)) var(--_qm-space-3);
 		background: var(--_qm-tips-surface);
 		display: flex;
 		flex-direction: column;

package/dist/visual/VariantField.svelte

@@ -149,9 +149,11 @@
 </div>
 
 <style>
+	/* The distance from the discriminant to the cells it unfolds is the one an array row
+	 and a matrix member keep from what they unfold. */
 	.qm-variant {
 		display: flex;
 		flex-direction: column;
-		gap: var(--_qm-space-2);
+		gap: var(--_qm-space);
 	}
 </style>

package/dist/visual/VisualEditorInner.svelte

@@ -82,6 +82,7 @@
 	import { tipsChannel } from './tips.js';
 	import { patchEditorExt } from './ext.js';
 	import { raiseGuidance } from './guidance.js';
+	import { familiesOf, registerFaces } from './fonts.js';
 	import Card from './Card.svelte';
 	import Icon from './icons/Icon.svelte';
 	import TipsCard from './TipsCard.svelte';
@@ -100,6 +101,8 @@
 		diagnostics,
 		enumOptionAllowed,
 		enumDisallowed = 'disable',
+		fonts,
+		fontLabels,
 		strings,
 		formatDiagnostic,
 		class: className,
@@ -119,6 +122,11 @@
 		}
 	});
 
+	// The host's font library: registered with the page while mounted, so a run draws in
+	// the face the preview sets it in, and offered family by family to the popover.
+	const fontFamilies = $derived(familiesOf(fonts ?? []));
+	$effect(() => registerFaces(fonts ?? []));
+
 	// ── Reactivity + session identity ───────────────────────────────────────────
 	let revision = $state(0);
 	// This editor's own id, prefixed onto every field's DOM ids (`domid.ts`). The
@@ -966,7 +974,7 @@
 	{/each}
 </div>
 
-<FormatPopover {getActiveLeaf} />
+<FormatPopover {getActiveLeaf} families={fontFamilies} {fontLabels} />
 
 <!-- The add affordance is gated on the schema declaring `card_kinds`, there being
  nothing to seed otherwise. Cards render regardless: a kind with no schema degrades to
@@ -1057,7 +1065,8 @@
 	   than as more card (ARCHITECTURE §Styling). The inset is the widest rung on the
 	   ramp, which is what gives the ground enough of itself to read as ground: at a
 	   narrower one the stack meets whatever frames the surface and the islands are
-	   back to being one block clipped at its edges. */
+	   back to being one block clipped at its edges. That is the page form; a pane's
+	   frame is the host's, and it spends less (`.qm-pane` below). */
 	:global(:where(.qm-editor)) {
 		box-sizing: border-box;
 		display: flex;
@@ -1090,11 +1099,18 @@
 	   `.qm-pane` claims (THEMING §"Drop it in"), and it resolves to `auto` on a mounting
 	   site with no height of its own, which is the page form kept. The cards do not
 	   shrink to fit: a flex item's automatic minimum floors each at its own height, so
-	   the stack overflows and scrolls rather than squashing. */
+	   the stack overflows and scrolls rather than squashing.
+
+	   A pane is where the host has already framed the surface, so the ground needs less
+	   of itself to read as ground: the frame is what the stack would otherwise meet. So
+	   the gutter steps in to the seam the add strip holds between cards, the ground
+	   being one width all round the stack, and the width it gives back goes to what is
+	   written. */
 	:global(:where(.qm-editor.qm-pane)) {
 		height: 100%;
 		overflow: auto;
 		overscroll-behavior: contain;
+		padding: var(--_qm-space-4);
 		padding-block-end: var(--_qm-tail);
 	}
 	/* The stack's one gapless seam, which `TipsCard` draws and this holds the two

package/dist/visual/controls.css

@@ -339,9 +339,14 @@
  over content the surface did not choose, so there is no plane under it for a
  tone to step off (ARCHITECTURE §Styling). The edge and `--_qm-lift` carry it
  there, and the raised rung joins them in dark, where a tone still has somewhere
- to go. */
+ to go.
+
+ The inset is the difference between the two radii, `--_qm-space` between the
+ surface's `--_qm-radius` and the item's `--_qm-radius-inner`, so a highlighted
+ item's corners run concentric with the surface's. It is the format popover's inset
+ too: every floating surface holds its contents one rung in. */
 :where(.qm-menu-surface) {
-	padding: var(--_qm-space-half);
+	padding: var(--_qm-space);
 	border: var(--_qm-border-width) solid var(--_qm-border);
 	border-radius: var(--_qm-radius);
 	background: var(--_qm-surface-raised);