@quillmark/svelte 0.21.0 → 0.22.0

package/dist/visual/ProseValue.svelte

@@ -1,6 +1,6 @@
 <!--
  A prose leaf the parent commits by value: an element of a `richtext` (fixture
- `keywords`) or `plaintext` (`errata`) array, and a content cell of a subform — an
+ `keywords`) or `text` (`authors`, `errata`) array, and a content cell of a subform — an
  `object`'s property, a variant's cell ({@link ObjectField}). None of them is
  `applyChange`-addressable: `Addr.field` is a flat name, so `keywords[0]` and
  `contact.note` have no op address. So this is not a `createField` leaf: it mounts a
@@ -19,7 +19,7 @@
 
  The content is read, not passed: `reader.getContentAt(addr, path)` decodes through
  the codec the leaf's own declared type names, so what it rests as — the content
- object, a `plaintext` literal, the authored string a transport door left — stops
+ object, a `text` literal, the authored string a transport door left — stops
  being the row's or the cell's business. It is read at mount and again wherever the
  parent's re-derive hands down a `value` that moved, and a read differing from the
  content the leaf last committed or took replaces the view, the gate `createField`
@@ -28,8 +28,8 @@
  it, so the echo replaces nothing and the caret and the history stay.
 
  The schema is the declared type's where the parent has room for it: a subform cell
- declaring no `inline` takes the full row ({@link ObjectField}), a `richtext` one on the
- block schema and a `plaintext` one on the plain schema, paragraphs and hard breaks.
+ declaring `multiline: true` takes the full row ({@link ObjectField}), a `richtext` one
+ on the block schema and a `text` one on the plain schema, paragraphs and hard breaks.
  An array element is one textblock whatever it declares, since Enter there is the
  repeater's. There is no slash menu at either width, and no island view.
 
@@ -80,8 +80,8 @@
 		/** The default an unset leaf holds, where it prints: drawn at the default rung,
 		 * and handed up whole with the first edit in it, as `createField` takes one. */
 		fallback?: Content;
-		/** The mark-free schema (a `plaintext` leaf): literal text, no formatting,
-		 * exactly as the scalar field of that type mounts. */
+		/** The mark-free schema (a `text` leaf): literal text, no formatting, exactly
+		 * as the field of that type mounts. */
 		plaintext?: boolean;
 		/** A multi-block schema, for a cell the parent draws at full width: the block
 		 * schema, or the plain one with `plaintext`. Absent, the leaf is one textblock. */
@@ -96,8 +96,8 @@
 		labelledBy?: string;
 		/** The parked `description` (FieldLabel) → `aria-describedby`. */
 		describedBy?: string;
-		/** The empty leaf's ghost, a subform cell's, until the leaf's first edit: the
-		 *  `none` an optional cell prints unset. Read per decoration pass. */
+		/** The empty leaf's ghost, a subform cell's: the `none` an optional cell prints
+		 *  unset. Read per decoration pass. */
 		placeholder?: string;
 		onChange: (rt: Content) => void;
 		/** Raw keydown, for a container whose own keys run through this leaf: the
@@ -130,9 +130,8 @@
 	/** Take the caret: what a parent placing focus on this leaf calls. The view's
 	 * focus, not the element's: a PM view restores its selection, where a bare DOM
 	 * focus on a contenteditable leaves the caret unplaced. And the reveal beside it,
-	 * since PM's focus prevents the scroll a `string` element's input takes by
-	 * default — an array whose two item types revealed differently is one row of it
-	 * landing off screen. */
+	 * since PM's focus prevents the scroll a form control takes by default — an array
+	 * whose two item types revealed differently is one row of it landing off screen. */
 	export function focus(): void {
 		if (!view) return;
 		view.focus();
@@ -157,11 +156,18 @@
 		view.dispatch(view.state.tr.setSelection(sel).scrollIntoView());
 	}
 
+	$effect(() => {
+		void [label, labelledBy, describedBy, placeholder];
+		view?.setProps({});
+	});
+
 	function mountView(mount: HTMLDivElement): () => void {
 		return untrack(() => {
 			const inline = !block;
 			const leaf = { inline, plaintext, islands: false };
-			const names = { label, labelledBy, describedBy };
+			// Read per attribute pass, not captured: an element's name carries its index,
+			// which a remove above it moves.
+			const names = () => ({ label, labelledBy, describedBy });
 			const shown = (stored: Content | undefined): Content => stored ?? fallback ?? emptyContent();
 			const stored = content();
 			let seen = value;
@@ -171,8 +177,8 @@
 			// Which of `aria-label` / `aria-labelledby` wins is the codec's one answer
 			// (`proseAttributes`), so a cell carrying a label element and a row carrying
 			// none cannot name their regions by different rules.
-			const plainNamed = proseAttributes(names) ?? {};
-			const heldNamed = heldAttributes(names, heldId);
+			const plainNamed = () => proseAttributes(names()) ?? {};
+			const heldNamed = () => heldAttributes(names(), heldId);
 			const build = (rt: Content): EditorState => {
 				// The same keymap and plugin stack a `createField` leaf mounts (shared
 				// `proseLeafPlugins`), minus the anchor-position plugin: anchors are dropped on
@@ -184,8 +190,7 @@
 						? []
 						: proseLeafPlugins(schema, {
 								inline,
-								placeholder: () => placeholder,
-								placeholderUntilEdit: true
+								placeholder: () => placeholder
 							})
 				});
 			};
@@ -195,11 +200,12 @@
 					state: build(reconciler.last),
 					editable: () => !held,
 					attributes: () => {
-						const named = held ? heldNamed : plainNamed;
+						const named = held ? heldNamed() : plainNamed();
 						return defaulted ? { ...named, 'data-default': '' } : named;
 					},
 					dispatchTransaction(tr) {
 						const next = mounted.state.apply(tr);
+						if (next === mounted.state) return;
 						const edit = tr.docChanged && !held;
 						if (edit) defaulted = false;
 						mounted.updateState(next);
@@ -265,8 +271,8 @@
 </script>
 
 <!-- `.qm-control-box` (controls.css) is the whole box, so an array of `richtext` and
- an array of `string` render rows of equal height, and a subform's prose cell measures
- like the text cell beside it. No floor: the reset in `core/codec/prose.css` makes one
+ an array of `text` render rows of equal height, and a subform's prose cell measures
+ like the form control beside it. No floor: the reset in `core/codec/prose.css` makes one
  line of prose measure one line. Width is the row's or the cell's to give: the leaf
  fills the track it is placed in. -->
 <div class="qm-prose-value qm-control-box qm-focus-ring-within">

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

@@ -12,8 +12,8 @@ interface Props {
     /** The default an unset leaf holds, where it prints: drawn at the default rung,
      * and handed up whole with the first edit in it, as `createField` takes one. */
     fallback?: Content;
-    /** The mark-free schema (a `plaintext` leaf): literal text, no formatting,
-     * exactly as the scalar field of that type mounts. */
+    /** The mark-free schema (a `text` leaf): literal text, no formatting, exactly
+     * as the field of that type mounts. */
     plaintext?: boolean;
     /** A multi-block schema, for a cell the parent draws at full width: the block
      * schema, or the plain one with `plaintext`. Absent, the leaf is one textblock. */
@@ -28,8 +28,8 @@ interface Props {
     labelledBy?: string;
     /** The parked `description` (FieldLabel) → `aria-describedby`. */
     describedBy?: string;
-    /** The empty leaf's ghost, a subform cell's, until the leaf's first edit: the
-     *  `none` an optional cell prints unset. Read per decoration pass. */
+    /** The empty leaf's ghost, a subform cell's: the `none` an optional cell prints
+     *  unset. Read per decoration pass. */
     placeholder?: string;
     onChange: (rt: Content) => void;
     /** Raw keydown, for a container whose own keys run through this leaf: the

package/dist/visual/TextField.svelte

@@ -1,6 +1,7 @@
 <!--
- A `string` field → text input. Commits every edit live (on input) via the parent's
- typed `writer.set`, so the preview tracks typing.
+ A text input: the control a field of a type this build does not know falls to.
+ Commits every edit live (on input) via the parent's typed `writer.set`, so the
+ preview tracks typing.
 
  An unset field whose `default:` prints holds that default as its text, at the
  default rung (theme.css): the value it prints, drawn as one and a step off a written

package/dist/visual/TipsCard.svelte

@@ -69,7 +69,7 @@
 				{#each tips as _, i (i)}
 					<button
 						type="button"
-						class="qm-tips-dot"
+						class="qm-tips-dot qm-focus-ring"
 						aria-label={t.strings.tipsDot(i + 1, tips.length)}
 						aria-current={i === index}
 						onclick={() => (cursor = i)}
@@ -77,7 +77,7 @@
 				{/each}
 			</div>
 		{/if}
-		<button type="button" class="qm-icon-btn qm-tips-action" onclick={advance}>
+		<button type="button" class="qm-icon-btn qm-tips-action qm-focus-ring" onclick={advance}>
 			{#if isLast}
 				{t.strings.tipsDismiss} <Icon name="trash-2" />
 			{:else}
@@ -193,6 +193,9 @@
 	.qm-tips-dot:hover {
 		opacity: var(--_qm-opacity-muted);
 	}
+	.qm-tips-dot:focus-visible {
+		opacity: 1;
+	}
 	.qm-tips-dot[aria-current='true'] {
 		opacity: 1;
 	}

package/dist/visual/VariantField.svelte

@@ -42,7 +42,7 @@
 		describedBy?: string;
 		/** The boundary's nested content read for this field, which the cells take
 		 * unprefixed: a variant's cell is one key in from the container it rests as, so
-		 * a `plaintext` cell's path is its own name ({@link ObjectField}). */
+		 * a `text` cell's path is its own name ({@link ObjectField}). */
 		contentAt: (path: PathStep[]) => Content | undefined;
 		onCommit: (v: Record<string, unknown> | undefined) => void;
 		optionAllowed?: (value: string) => boolean;

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

@@ -16,7 +16,7 @@ interface Props {
     describedBy?: string;
     /** The boundary's nested content read for this field, which the cells take
      * unprefixed: a variant's cell is one key in from the container it rests as, so
-     * a `plaintext` cell's path is its own name ({@link ObjectField}). */
+     * a `text` cell's path is its own name ({@link ObjectField}). */
     contentAt: (path: PathStep[]) => Content | undefined;
     onCommit: (v: Record<string, unknown> | undefined) => void;
     optionAllowed?: (value: string) => boolean;

package/dist/visual/VisualEditorInner.svelte

@@ -31,7 +31,7 @@
 		type Landing
 	} from '../core/address.js';
 	import { errorMessage, reportError } from '../core/errors.js';
-	import { bloomInside } from '../core/bloom.js';
+	import { bloom } from '../core/bloom.js';
 	import { createLifespan } from '../core/teardown.js';
 	import { spacePx } from '../core/rungs.js';
 	import type {
@@ -220,7 +220,7 @@
 		const card = addr.card;
 		return card != null ? { card, field: addr.field } : { field: addr.field };
 	}
-	function handleFocus(addr: Addr): void {
+	function handleFocus(addr: Addr, steps: readonly PathStep[] = []): void {
 		const plain = normalize(addr);
 		activeAddr = plain;
 		activeCardId = cardIdOf(plain);
@@ -228,7 +228,7 @@
 		// to at the offset it still names has to report again.
 		lastCaretField = undefined;
 		lastCaretPos = undefined;
-		const field = pathFor(plain);
+		const field = pathFor(plain, steps);
 		// Both halves or neither: a stale addr names no path and no live card.
 		if (field != null && activeCardId != null)
 			onActiveLeafChange?.({ field, cardId: activeCardId });
@@ -245,11 +245,11 @@
 		return model.cards.map((c) => c.kind);
 	}
 	/**
-	 * A leaf's canonical `DocPath`. `undefined` for an address outside the live card
-	 * array (a stale addr: drop rather than mis-target).
+	 * A leaf's canonical `DocPath`, `steps` down from the field. `undefined` for an
+	 * address outside the live card array (a stale addr: drop rather than mis-target).
 	 */
-	function pathFor(addr: Addr): DocPath | undefined {
-		return fieldPathForAddr(addr, addr.card == null ? NO_KINDS : liveKinds());
+	function pathFor(addr: Addr, steps: readonly PathStep[] = []): DocPath | undefined {
+		return fieldPathForAddr(addr, addr.card == null ? NO_KINDS : liveKinds(), steps);
 	}
 	// The last place reported, so a caret that did not move is not news. A leaf fires
 	// one caret signal per transaction, and a transaction need not have moved the
@@ -736,10 +736,10 @@
 		// (where landing a caret changes nothing on screen) or one off-screen, where the
 		// browser's focus-scroll moves the page and leaves the caret to be hunted for.
 		const box = await land(found, at.granularity === 'segment' ? undefined : at.pos);
-		if (span.alive) bloomInside(box);
+		if (span.alive) bloom(box);
 	}
 	/** The active prose leaf: the formatting popover's observation seam. The active
-	 *  field's controller where it registered one, else the by-value leaf focused last
+	 *  field's own leaf where it registered one, else the by-value leaf focused last
 	 *  under it (`leaves.ts`); `undefined` for a form control, which holds no marks to
 	 *  toggle. */
 	export function getActiveLeaf(): ActiveProse | undefined {
@@ -747,7 +747,7 @@
 		const card = activeAddr.card != null ? activeCardId : undefined;
 		const key = fieldKeyToString({ card, field: activeAddr.field });
 		const controller = leaves.prose(key);
-		if (controller) return { views: controller as FieldController & LeafViews, controller };
+		if (controller) return { views: controller as FieldController & LeafViews };
 		const views = leaves.value(key);
 		return views && { views };
 	}
@@ -826,7 +826,7 @@
 		const found = await revealLeaf(field);
 		if (!found) return missed(`no mounted field at ${field}`, field);
 		const box = await land(found, undefined);
-		if (span.alive) bloomInside(box);
+		if (span.alive) bloom(box);
 	}
 	/** Seed a card of `kind` and insert it at `at` (default: the end). Returns the new
 	 *  card's session key, or `undefined` when the quill seeds no card of that kind. */
@@ -995,7 +995,7 @@
 			{#if kinds.length === 1}
 				<button
 					type="button"
-					class="qm-add-btn qm-add-affordance qm-tap-floor"
+					class="qm-add-btn qm-add-affordance qm-tap-floor qm-focus-ring"
 					aria-label={marked ? undefined : merged.addCard}
 					onclick={() => addCard(atIndex, kinds[0], true)}
 					>{#if marked}{merged.addCard}{:else}<Icon name="plus" class="qm-add-glyph" />{/if}</button
@@ -1008,7 +1008,7 @@
 			 rules below reach it through `:global`. -->
 				<DropdownMenu.Root>
 					<DropdownMenu.Trigger
-						class="qm-add-btn qm-add-affordance qm-tap-floor"
+						class="qm-add-btn qm-add-affordance qm-tap-floor qm-focus-ring"
 						aria-label={marked ? undefined : merged.addCard}
 						>{#if marked}{merged.addCard}{:else}<Icon
 								name="plus"

package/dist/visual/controls.css

@@ -267,6 +267,22 @@
 	transform: translate(-50%, -50%);
 }
 
+/* The arrival wash: a plane over the host's box at rest, which a landing plays
+ (`core/bloom.ts`). On the host from mount, because WebKit resizes a laid-out subgrid's
+ tracks when an out-of-flow box is added to it. */
+:where(.qm-wash) {
+	position: relative;
+}
+:where(.qm-wash)::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+	background: var(--_qm-accent-wash);
+	opacity: 0;
+	pointer-events: none;
+}
+
 /* The capacity ladder: how many tracks a grid of fields steps to, off the width of
  the query container it stands in. One recipe, because three grids read it — a section's
  fields (`Card.svelte`), a subform's properties (`ObjectField`), each over its own
@@ -311,7 +327,8 @@
  highlight the keyboard cannot reach. It fills with the accent held rather than
  the hover rung: the mark is a cursor a keyboard drives, so it has to read at a
  glance from across the list, where a hover only has to confirm the pointer
- already under it.
+ already under it. So the mark is the item's whole focus indicator, and the
+ outline a focused item would draw beside it is taken off.
 
  The resting fill is the recipe's too: an item drawn on a `<button>` carries a UA
  fill to take back, and a scoped block outranks this file, so a caller taking it
@@ -338,6 +355,7 @@
 	background: transparent;
 	cursor: pointer;
 	user-select: none;
+	outline: none;
 }
 :where(.qm-menu-item[data-highlighted]) {
 	background: var(--_qm-accent-tint);

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

@@ -87,27 +87,6 @@ export declare const ICONS: {
     }], readonly ["path", {
         readonly d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71";
     }]];
-    readonly hash: readonly [readonly ["line", {
-        readonly x1: "4";
-        readonly x2: "20";
-        readonly y1: "9";
-        readonly y2: "9";
-    }], readonly ["line", {
-        readonly x1: "4";
-        readonly x2: "20";
-        readonly y1: "15";
-        readonly y2: "15";
-    }], readonly ["line", {
-        readonly x1: "10";
-        readonly x2: "8";
-        readonly y1: "3";
-        readonly y2: "21";
-    }], readonly ["line", {
-        readonly x1: "16";
-        readonly x2: "14";
-        readonly y1: "3";
-        readonly y2: "21";
-    }]];
     readonly info: readonly [readonly ["circle", {
         readonly cx: "12";
         readonly cy: "12";

package/dist/visual/icons/nodes.js

@@ -5,7 +5,7 @@
 //
 // Verbatim from lucide 1.28.0 — the version is stated because a glyph that drifts
 // from upstream is otherwise invisible, and because the notices in `NOTICE` are the
-// ones that release carries (ISC, and MIT for the Feather-derived ten).
+// ones that release carries (ISC, and MIT for the Feather-derived glyphs).
 export const ICONS = {
     'chevron-right': [['path', { d: 'm9 18 6-6-6-6' }]],
     'arrow-right': [
@@ -45,12 +45,6 @@ export const ICONS = {
         ['path', { d: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71' }],
         ['path', { d: 'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71' }]
     ],
-    hash: [
-        ['line', { x1: '4', x2: '20', y1: '9', y2: '9' }],
-        ['line', { x1: '4', x2: '20', y1: '15', y2: '15' }],
-        ['line', { x1: '10', x2: '8', y1: '3', y2: '21' }],
-        ['line', { x1: '16', x2: '14', y1: '3', y2: '21' }]
-    ],
     info: [
         ['circle', { cx: '12', cy: '12', r: '10' }],
         ['path', { d: 'M12 16v-4' }],

package/dist/visual/leaves.d.ts

@@ -8,8 +8,8 @@ import type { FieldController, LeafViews } from '../core/codec/index.js';
  */
 export type LandingBox = HTMLElement | undefined | Promise<HTMLElement | undefined>;
 /**
- * A mounted field's landing handle: focus it, and the element the arrival wash blooms
- * inside ({@link import('../core/bloom.js').bloomInside}).
+ * A mounted field's landing handle: focus it, and the `.qm-wash` box the arrival wash
+ * plays over ({@link import('../core/bloom.js').bloom}).
  *
  * A `FieldController` is one, which is what lets the two lanes share a lookup; `Field`
  * builds the same shape over a form control off the handoff a label click already
@@ -71,16 +71,19 @@ export interface LeafRegistry {
     clear(): void;
 }
 export declare function createLeafRegistry(): LeafRegistry;
-/**
- * The active prose leaf as the formatting popover reaches it: the views a selection is
- * read from and a mark toggled at, and the controller where the leaf is a field's. A
- * by-value leaf has none, its anchors being dropped on the parent's value write, so the
- * anchor verbs the controller carries have nothing to act on there.
- */
+/** The active prose leaf as the formatting popover reaches it: the views a selection is
+ *  read from and a mark toggled at. */
 export interface ActiveProse {
     views: LeafViews;
-    controller?: FieldController;
 }
+/**
+ * The steps from a field's control box `root` down to the cell holding `target`, the
+ * reverse of {@link FieldControl.focusPath}: read off the marker each container rung
+ * stamps on the cell it draws, `data-qm-index` on an array's row and `data-qm-prop` on a
+ * key step (an object's property, a variant's cell, a matrix's member and an added
+ * item's title). `[]` for a target on the field's own control.
+ */
+export declare function stepsTo(target: EventTarget | null, root: Element): PathStep[];
 /** The by-value lane with a field's key bound: what a leaf under that field announces
  *  itself through, knowing no key of its own. */
 export interface ValueLeafSeat {

package/dist/visual/leaves.js

@@ -66,6 +66,25 @@ export function createLeafRegistry() {
         }
     };
 }
+/**
+ * The steps from a field's control box `root` down to the cell holding `target`, the
+ * reverse of {@link FieldControl.focusPath}: read off the marker each container rung
+ * stamps on the cell it draws, `data-qm-index` on an array's row and `data-qm-prop` on a
+ * key step (an object's property, a variant's cell, a matrix's member and an added
+ * item's title). `[]` for a target on the field's own control.
+ */
+export function stepsTo(target, root) {
+    const steps = [];
+    for (let el = target instanceof Element ? target : null; el && el !== root; el = el.parentElement) {
+        const index = el.getAttribute('data-qm-index');
+        const key = el.getAttribute('data-qm-prop');
+        if (index != null)
+            steps.push(Number(index));
+        else if (key != null)
+            steps.push(key);
+    }
+    return steps.reverse();
+}
 const SEAT = Symbol('qm-value-leaf');
 /** Seat every by-value leaf under the calling field, at any depth of its containers. */
 export function seatValueLeaves(seat) {

package/dist/visual/strings.d.ts

@@ -15,13 +15,13 @@ export interface VisualStrings extends TableChromeStrings, SlashStrings {
     /** The card-title input's accessible name. */
     cardTitle: string;
     /** The trailing strip's visible words, which are also every strip's accessible
-     * name; the plus rides the wording. One string over
+     * name. One string over
      * one kind and many: the trigger seeds a card, and which kind is the menu's word
      * to say or the schema's to have already settled. */
     addCard: string;
     arrayAdd: string;
     arrayRemove: string;
-    /** The drag handle on an `object` row: its tooltip and, with the row, its name. */
+    /** The drag handle on an `object` row: its tooltip. */
     arrayDrag: string;
     /**
      * A row control's accessible name, the action and the row it acts on: `Remove
@@ -59,8 +59,6 @@ export interface VisualStrings extends TableChromeStrings, SlashStrings {
     /** The date field's toggle, pressed while the field holds `today`: the render
      *  date rather than a written one. */
     dateToday: string;
-    /** The required marker's accessible name; the glyph itself is a `*`. */
-    fieldRequired: string;
     /** What an unset optional cell (`t?`) ghosts at rest: the `none` it prints
      *  unanswered, in the product's words. */
     optionalGhost: string;
@@ -75,7 +73,8 @@ export interface VisualStrings extends TableChromeStrings, SlashStrings {
     formatStrikethrough: string;
     formatCode: string;
     formatLink: string;
-    /** The anchor button's accessible name. */
+    /** The anchor button's accessible name. The popover withholds the button, so
+     *  nothing draws this or the title below. */
     formatAnchor: string;
     /** Its hover title, which says what an anchor is; the name above only says what. */
     formatAnchorTitle: string;
@@ -138,6 +137,12 @@ export interface VisualStrings extends TableChromeStrings, SlashStrings {
  * diagnostic.
  */
 export type FormatDiagnostic = (d: Diagnostic) => string | undefined;
+/**
+ * A `Mod` chord as the writer's platform prints it: `⌘B` on Apple's, `Ctrl+B`
+ * elsewhere. The platform test is the one `prosemirror-keymap` resolves `Mod` by, so a
+ * tooltip names the chord the keymap binds.
+ */
+export declare function chord(key: string, platform?: string): string;
 /** The package's English. Every key, so the merge below is total. */
 export declare const DEFAULT_VISUAL_STRINGS: VisualStrings;
 /** A consumer's wording: any subset, the rest the package's. */

package/dist/visual/strings.js

@@ -4,7 +4,7 @@
 // makes wording an override rather than a fork.
 //
 // Several of these are accessible names rather than decoration — the card
-// controls, the add trigger, the required marker — so an untranslated surface is
+// controls, the add trigger — so an untranslated surface is
 // not merely inconsistent, it reads the wrong language to a screen reader. That is
 // why this exists as a seam and not as a list of literals to grep for.
 //
@@ -14,11 +14,19 @@
 //
 // The strings reach the tree through context, not props. They are ambient,
 // read-only, and wanted eight components deep (a card's controls, a field's
-// required marker, the formatting popover, the tips card); threading them by hand
+// optional ghost, the formatting popover, the tips card); threading them by hand
 // would put a `strings` prop on every component between the root and each leaf,
 // which is a prop that means nothing to any of them.
 import { getContext, setContext } from 'svelte';
 import { DEFAULT_SLASH_STRINGS, DEFAULT_TABLE_STRINGS } from '../core/codec/index.js';
+/**
+ * A `Mod` chord as the writer's platform prints it: `⌘B` on Apple's, `Ctrl+B`
+ * elsewhere. The platform test is the one `prosemirror-keymap` resolves `Mod` by, so a
+ * tooltip names the chord the keymap binds.
+ */
+export function chord(key, platform = typeof navigator === 'undefined' ? '' : navigator.platform) {
+    return /Mac|iP(hone|[oa]d)/.test(platform) ? `⌘${key}` : `Ctrl+${key}`;
+}
 /** The package's English. Every key, so the merge below is total. */
 export const DEFAULT_VISUAL_STRINGS = {
     ...DEFAULT_TABLE_STRINGS,
@@ -27,7 +35,7 @@ export const DEFAULT_VISUAL_STRINGS = {
     cardMoveDown: 'Move down',
     cardDelete: 'Delete card',
     cardTitle: 'Card title',
-    addCard: '+ Add Card',
+    addCard: 'Add card',
     arrayAdd: '+ Add',
     arrayRemove: 'Remove',
     arrayDrag: 'Drag to move',
@@ -41,16 +49,15 @@ export const DEFAULT_VISUAL_STRINGS = {
     matrixItemTitle: (list, index) => `${list ? `${list} item` : 'Item'} ${index}`,
     matrixRemove: (title) => `Remove ${title}`,
     dateToday: 'Today',
-    fieldRequired: 'required',
     optionalGhost: 'None',
     proseHeld: 'Holds more than this field can edit here.',
     formatGroup: 'Formatting',
-    formatBold: 'Bold (Mod-B)',
-    formatEmphasis: 'Emphasis (Mod-I)',
-    formatUnderline: 'Underline (Mod-U)',
+    formatBold: `Bold (${chord('B')})`,
+    formatEmphasis: `Italic (${chord('I')})`,
+    formatUnderline: `Underline (${chord('U')})`,
     formatStrikethrough: 'Strikethrough',
     formatCode: 'Code',
-    formatLink: 'Link',
+    formatLink: `Link (${chord('K')})`,
     formatAnchor: 'Anchor',
     formatAnchorTitle: 'Anchor — an identity handle over the selection',
     linkPlaceholder: 'https://…',
@@ -61,7 +68,7 @@ export const DEFAULT_VISUAL_STRINGS = {
     tipsDismiss: 'Dismiss',
     tipsNext: 'Next',
     tipsDot: (index, count) => `Tip ${index} of ${count}`,
-    unknownKind: (kind) => `Unrecognized card type ${kind}. Its content is preserved.`,
+    unknownKind: (kind) => `Unknown card type ${kind}. Its content is kept.`,
     retypeLabel: 'Change to',
     retypePlaceholder: 'Choose a type…',
     noCardKinds: 'This document declares no card types — delete this card to remove it.',