@joewinke/jatui 0.23.0 → 0.24.0

package/dist/components/BulkActionBar.svelte.d.ts

@@ -3,6 +3,11 @@ export interface BulkAction {
     label: string;
     /** Optional SVG path string for a 24×24 icon. */
     icon?: string;
+    /** Optional single-key hotkey (e.g. `'c'`) — fires `onSelect` while the
+     * bar is visible and not loading. Ignored while typing (isTypingTarget),
+     * for modifier combos and for non-printable keys. Rendered as a <kbd>
+     * hint on the button. */
+    key?: string;
     /** Called when the action is clicked. */
     onSelect: () => void;
     /** Renders in the danger variant. Default false. */
@@ -37,6 +42,10 @@ interface Props {
     onClear?: () => void;
     /** Loading state — disables all actions and shows a spinner. */
     loading?: boolean;
+    /** When set, replaces the action buttons with a spinner + this message
+     * (role="status", aria-live="polite") — the "bulk action in flight"
+     * presentation from the IDE's fork. */
+    loadingMessage?: string | null;
     /** Label for the count. Default "selected". */
     countLabel?: string;
 }

package/dist/components/ConfirmDialog.svelte

@@ -151,10 +151,15 @@
 {/if}
 
 <style>
+	/* Theme tokens (jatui-is2ow.3): every colour derives from var(--color-*) —
+	   relative-color `oklch(from var(--x) l c h / a)` keeps the token's hue/chroma
+	   and only swaps alpha, so light and dark themes both render correctly.
+	   --n-00 (pure black) is a jat-IDE neutral; the inline fallback keeps
+	   standalone consumers (no app.css) rendering the same value. */
 	.cd-scrim {
 		position: fixed;
 		inset: 0;
-		background: oklch(0 0 0 / 0.45);
+		background: oklch(from var(--n-00, oklch(0 0 0)) l c h / 0.45);
 		z-index: 9990;
 		backdrop-filter: blur(2px);
 	}
@@ -175,21 +180,21 @@
 		flex-direction: column;
 		gap: 0.625rem;
 		padding: 1rem 1.125rem 0.625rem;
-		background: color-mix(in oklch, var(--color-base-100) 98%, transparent);
-		border: 1px solid var(--color-base-300);
+		background: oklch(from var(--color-base-200) l c h / 98%);
+		border: 1px solid var(--color-base-100);
 		border-radius: 0.875rem;
 		box-shadow:
-			0 20px 60px oklch(0 0 0 / 0.55),
-			0 0 0 1px color-mix(in oklch, var(--color-base-300) 50%, transparent);
+			0 20px 60px oklch(from var(--n-00, oklch(0 0 0)) l c h / 0.55),
+			0 0 0 1px oklch(from var(--color-base-100) l c h / 50%);
 		backdrop-filter: blur(16px);
 	}
 
 	.cd-box.cd-danger {
-		border-color: color-mix(in oklch, var(--color-error) 55%, transparent);
+		border-color: oklch(from var(--color-error) l c h / 55%);
 		box-shadow:
-			0 20px 60px oklch(0 0 0 / 0.6),
-			0 0 0 1px color-mix(in oklch, var(--color-error) 25%, transparent),
-			0 0 30px color-mix(in oklch, var(--color-error) 12%, transparent);
+			0 20px 60px oklch(from var(--n-00, oklch(0 0 0)) l c h / 0.6),
+			0 0 0 1px oklch(from var(--color-error) l c h / 25%),
+			0 0 30px oklch(from var(--color-error) l c h / 12%);
 	}
 
 	.cd-header {
@@ -206,7 +211,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background: color-mix(in oklch, var(--color-info) 35%, transparent);
+		background: color-mix(in oklch, var(--color-info) 20%, transparent);
 		border: 1px solid color-mix(in oklch, var(--color-info) 40%, transparent);
 		color: var(--color-info);
 	}
@@ -217,9 +222,9 @@
 	}
 
 	.cd-icon.cd-icon-danger {
-		background: color-mix(in oklch, var(--color-error) 35%, transparent);
-		border-color: color-mix(in oklch, var(--color-error) 40%, transparent);
-		color: var(--color-error-content);
+		background: color-mix(in oklch, var(--color-error) 20%, transparent);
+		border-color: oklch(from var(--color-error) l c h / 40%);
+		color: var(--color-error);
 	}
 
 	.cd-title-group {
@@ -241,13 +246,12 @@
 	.cd-body {
 		margin: 0;
 		font-size: 0.8rem;
-		color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
+		color: oklch(from var(--color-base-content) l c h / 70%);
 		line-height: 1.5;
 	}
 
 	.cd-actions {
 		display: flex;
-		justify-content: flex-end;
 		align-items: center;
 		gap: 0.375rem;
 		padding-top: 0.125rem;
@@ -263,15 +267,15 @@
 		border-radius: 0.5rem;
 		border: 1px solid transparent;
 		background: transparent;
-		color: color-mix(in oklch, var(--color-base-content) 85%, transparent);
+		color: oklch(from var(--color-base-content) l c h / 95%);
 		cursor: pointer;
 		transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
 		white-space: nowrap;
 	}
 
 	.cd-btn:hover {
-		background: var(--color-base-200);
-		border-color: var(--color-base-300);
+		background: var(--color-base-100);
+		border-color: var(--color-base-100);
 	}
 
 	.cd-btn-cancel:focus-visible {
@@ -280,25 +284,25 @@
 	}
 
 	.cd-btn-confirm {
-		background: color-mix(in oklch, var(--color-base-300) 60%, transparent);
-		border-color: var(--color-base-300);
+		background: oklch(from var(--color-base-100) l c h / 60%);
+		border-color: color-mix(in oklch, var(--color-primary) 40%, transparent);
 	}
 
 	.cd-btn-confirm:hover {
-		background: var(--color-base-200);
-		border-color: color-mix(in oklch, var(--color-base-content) 30%, transparent);
+		background: color-mix(in oklch, var(--color-primary) 20%, var(--color-base-200));
+		border-color: color-mix(in oklch, var(--color-primary) 50%, transparent);
 	}
 
 	.cd-btn-danger {
-		background: color-mix(in oklch, var(--color-error) 45%, transparent);
-		border-color: color-mix(in oklch, var(--color-error) 55%, transparent);
-		color: var(--color-error-content);
+		background: color-mix(in oklch, var(--color-error) 30%, transparent);
+		border-color: oklch(from var(--color-error) l c h / 55%);
+		color: oklch(from var(--color-error) calc(l + 0.2) c h);
 	}
 
 	.cd-btn-danger:hover {
-		background: color-mix(in oklch, var(--color-error) 65%, transparent);
-		border-color: color-mix(in oklch, var(--color-error) 70%, transparent);
-		color: var(--color-error-content);
+		background: color-mix(in oklch, var(--color-error) 45%, transparent);
+		border-color: oklch(from var(--color-error) l c h / 70%);
+		color: oklch(from var(--color-error) calc(l + 0.25) c h);
 	}
 
 	.cd-btn-confirm:focus-visible,
@@ -311,11 +315,11 @@
 		font-family: ui-monospace, monospace;
 		font-size: 0.65rem;
 		padding: 0.0625rem 0.3125rem;
-		background: var(--color-base-200);
-		border: 1px solid var(--color-base-300);
+		background: var(--color-base-100);
+		border: 1px solid var(--color-base-100);
 		border-bottom-width: 2px;
 		border-radius: 0.25rem;
-		color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
+		color: oklch(from var(--color-base-content) l c h / 85%);
 		line-height: 1.6;
 	}
 
@@ -323,7 +327,7 @@
 		margin-left: auto;
 		font-family: ui-monospace, monospace;
 		font-size: 0.7rem;
-		color: color-mix(in oklch, var(--color-base-content) 45%, transparent);
+		color: oklch(from var(--color-base-content) l c h / 55%);
 		font-variant-numeric: tabular-nums;
 		min-width: 2ch;
 		text-align: right;
@@ -331,20 +335,20 @@
 
 	.cd-progress {
 		height: 2px;
-		background: var(--color-base-200);
+		background: var(--color-base-100);
 		border-radius: 999px;
 		overflow: hidden;
 	}
 
 	.cd-progress-fill {
 		height: 100%;
-		background: linear-gradient(90deg, var(--color-info), var(--color-info));
+		background: linear-gradient(90deg, var(--color-primary), var(--color-info));
 		border-radius: 999px;
 		transition: width 60ms linear;
 	}
 
 	.cd-progress-fill.cd-progress-danger {
-		background: linear-gradient(90deg, var(--color-error), var(--color-error));
+		background: linear-gradient(90deg, var(--color-error), var(--color-warning));
 	}
 
 	@media (prefers-reduced-motion: reduce) {

package/dist/components/CopyButton.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { copyText } from '../utils/clipboard';
+
 	interface Props {
 		text?: string;
 		getText?: () => string | Promise<string>;
@@ -42,14 +44,15 @@
 		if (copied) return;
 		try {
 			const value = getText ? await getText() : (text ?? '');
-			await navigator.clipboard.writeText(value);
+			const ok = await copyText(value);
+			if (!ok) return;
 			copied = true;
 			clearTimeout(timer);
 			timer = setTimeout(() => {
 				copied = false;
 			}, 1400);
 		} catch {
-			// clipboard not available — no-op
+			// clipboard unavailable — no-op
 		}
 	}
 </script>

package/dist/components/FloatingActionBar.svelte

@@ -11,6 +11,11 @@
 	 *     loading={bulkActionLoading}
 	 *     onClear={clearSelection}
 	 *   />
+	 *
+	 * Per-action `key` renders a <kbd> hotkey hint on the button (advisory —
+	 * the matching keydown handling lives in the host/BulkActionBar). While
+	 * `loading` with a `loadingMessage` set, the buttons are replaced by a
+	 * spinner + message row (matching the IDE's fork, audit jat-1alfp #15).
 	 */
 
 	import { fade } from 'svelte/transition';
@@ -24,6 +29,8 @@
 		icon?: string;
 		/** Color variant */
 		variant?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
+		/** Single-key hotkey hint rendered as a <kbd> chip (advisory only). */
+		key?: string;
 		/** Called when clicked */
 		onclick: () => void;
 	}
@@ -59,8 +66,13 @@
 		actions?: ActionButton[];
 		/** Dropdown menus (open upward from the bar) */
 		dropdowns?: ActionDropdown[];
-		/** Disables all buttons while true and shows a spinner */
+		/** While loading, disables all buttons. With `loadingMessage` also set,
+		 * the buttons are replaced by a spinner + message row. */
 		loading?: boolean;
+		/** When set, replaces the action buttons with a spinner + this message
+		 * (role="status", aria-live="polite") — matching the IDE's fork, where
+		 * this alone signals the in-flight state. */
+		loadingMessage?: string | null;
 		/** Called when the "Clear" button is clicked */
 		onClear?: () => void;
 		/** Label for the selection count (default: "selected") */
@@ -72,6 +84,7 @@
 		actions = [],
 		dropdowns = [],
 		loading = false,
+		loadingMessage = null,
 		onClear,
 		countLabel = 'selected',
 	}: Props = $props();
@@ -110,6 +123,12 @@
 	<div class="fab" transition:fade={{ duration: 150 }}>
 		<span class="fab-count">{count} {countLabel}</span>
 
+		{#if loadingMessage}
+			<div class="fab-loading" role="status" aria-live="polite">
+				<span class="fab-spinner"></span>
+				<span class="fab-loading-msg">{loadingMessage}</span>
+			</div>
+		{:else}
 		{#if actions.length > 0}
 			<div class="fab-divider"></div>
 			{#each actions as action}
@@ -118,6 +137,7 @@
 					class="fab-btn {variantClass(action.variant)}"
 					onclick={action.onclick}
 					disabled={loading}
+					title={action.key ? `${action.label} (${action.key})` : undefined}
 				>
 					{#if action.icon}
 						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
@@ -126,6 +146,9 @@
 						</svg>
 					{/if}
 					{action.label}
+					{#if action.key}
+						<kbd class="fab-key">{action.key}</kbd>
+					{/if}
 				</button>
 			{/each}
 		{/if}
@@ -175,6 +198,7 @@
 				</div>
 			{/each}
 		{/if}
+		{/if}
 
 		{#if onClear}
 			<div class="fab-divider"></div>
@@ -310,6 +334,36 @@
 		to { transform: rotate(360deg); }
 	}
 
+	.fab-key {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 1.125rem;
+		height: 1.125rem;
+		padding: 0 0.25rem;
+		background: var(--color-base-100);
+		border: 1px solid oklch(from var(--color-base-content) l c h / 35%);
+		border-radius: 0.25rem;
+		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+		font-size: 0.6875rem;
+		font-weight: 600;
+		line-height: 1;
+		color: oklch(from var(--color-base-content) l c h / 80%);
+	}
+
+	.fab-loading {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.125rem 0.375rem;
+	}
+
+	.fab-loading-msg {
+		font-size: 0.8125rem;
+		color: var(--color-primary);
+		white-space: nowrap;
+	}
+
 	/* Dropdown */
 	.fab-dropdown-wrapper {
 		position: relative;

package/dist/components/FloatingActionBar.svelte.d.ts

@@ -7,6 +7,8 @@ export interface ActionButton {
     icon?: string;
     /** Color variant */
     variant?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
+    /** Single-key hotkey hint rendered as a <kbd> chip (advisory only). */
+    key?: string;
     /** Called when clicked */
     onclick: () => void;
 }
@@ -39,8 +41,13 @@ interface Props {
     actions?: ActionButton[];
     /** Dropdown menus (open upward from the bar) */
     dropdowns?: ActionDropdown[];
-    /** Disables all buttons while true and shows a spinner */
+    /** While loading, disables all buttons. With `loadingMessage` also set,
+     * the buttons are replaced by a spinner + message row. */
     loading?: boolean;
+    /** When set, replaces the action buttons with a spinner + this message
+     * (role="status", aria-live="polite") — matching the IDE's fork, where
+     * this alone signals the in-flight state. */
+    loadingMessage?: string | null;
     /** Called when the "Clear" button is clicked */
     onClear?: () => void;
     /** Label for the selection count (default: "selected") */

package/dist/components/InputDialog.svelte

@@ -23,7 +23,10 @@
 	function handleSubmit() {
 		if (opts?.validate) {
 			const msg = opts.validate(value);
-			if (msg !== null) { error = msg; return; }
+			if (msg !== null) {
+				error = msg;
+				return;
+			}
 		}
 		error = null;
 		submitInput(value);
@@ -80,7 +83,6 @@
 			<input
 				bind:this={inputRef}
 				bind:value
-				oninput={() => { if (error) error = null; }}
 				type="text"
 				class="id-input"
 				class:id-input-error={error !== null}
@@ -88,7 +90,10 @@
 				maxlength={opts.maxLength}
 				autocomplete="off"
 				spellcheck="false"
+				oninput={() => { if (error) error = null; }}
 			/>
+
+			<!-- Error / char count -->
 			{#if error !== null || opts.maxLength}
 				<div class="id-field-footer">
 					{#if error !== null}
@@ -127,10 +132,15 @@
 {/if}
 
 <style>
+	/* Theme tokens (jatui-is2ow.3): every colour derives from var(--color-*) —
+	   relative-color `oklch(from var(--x) l c h / a)` keeps the token's hue/chroma
+	   and only swaps alpha, so light and dark themes both render correctly.
+	   --n-00 (pure black) is a jat-IDE neutral; the inline fallback keeps
+	   standalone consumers (no app.css) rendering the same value. */
 	.id-scrim {
 		position: fixed;
 		inset: 0;
-		background: oklch(0 0 0 / 0.45);
+		background: oklch(from var(--n-00, oklch(0 0 0)) l c h / 0.45);
 		z-index: 9991;
 		backdrop-filter: blur(2px);
 	}
@@ -151,12 +161,12 @@
 		flex-direction: column;
 		gap: 0.625rem;
 		padding: 1rem 1.125rem 0.625rem;
-		background: oklch(0.17 0.02 250 / 0.98);
-		border: 1px solid oklch(0.32 0.03 250);
+		background: oklch(from var(--color-base-200) l c h / 98%);
+		border: 1px solid var(--color-base-100);
 		border-radius: 0.875rem;
 		box-shadow:
-			0 20px 60px oklch(0 0 0 / 0.55),
-			0 0 0 1px oklch(0.28 0.03 250 / 0.5);
+			0 20px 60px oklch(from var(--n-00, oklch(0 0 0)) l c h / 0.55),
+			0 0 0 1px oklch(from var(--color-base-100) l c h / 50%);
 		backdrop-filter: blur(16px);
 	}
 
@@ -174,9 +184,9 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background: oklch(0.30 0.06 200 / 0.35);
-		border: 1px solid oklch(0.45 0.10 200 / 0.4);
-		color: oklch(0.75 0.12 200);
+		background: color-mix(in oklch, var(--color-info) 20%, transparent);
+		border: 1px solid color-mix(in oklch, var(--color-info) 30%, transparent);
+		color: var(--color-info);
 	}
 
 	.id-icon svg {
@@ -196,14 +206,14 @@
 		margin: 0;
 		font-size: 0.9375rem;
 		font-weight: 600;
-		color: oklch(0.92 0.04 250);
+		color: var(--color-base-content);
 		line-height: 1.3;
 	}
 
 	.id-body {
 		margin: 0;
 		font-size: 0.8rem;
-		color: oklch(0.60 0.03 250);
+		color: oklch(from var(--color-base-content) l c h / 70%);
 		line-height: 1.5;
 	}
 
@@ -211,51 +221,52 @@
 		width: 100%;
 		padding: 0.4375rem 0.75rem;
 		font-size: 0.875rem;
-		background: oklch(0.13 0.02 250);
-		border: 1px solid oklch(0.32 0.03 250);
+		background: var(--color-base-300);
+		border: 1px solid var(--color-base-100);
 		border-radius: 0.5rem;
-		color: oklch(0.92 0.04 250);
+		color: var(--color-base-content);
 		outline: none;
 		transition: border-color 0.1s ease;
 		box-sizing: border-box;
 	}
 
 	.id-input::placeholder {
-		color: oklch(0.45 0.03 250);
+		color: oklch(from var(--color-base-content) l c h / 50%);
 	}
 
 	.id-input:focus {
-		border-color: oklch(0.55 0.12 250);
-		box-shadow: 0 0 0 2px oklch(0.55 0.12 250 / 0.2);
+		border-color: var(--color-primary);
+		box-shadow: 0 0 0 2px oklch(from var(--color-primary) l c h / 20%);
+	}
+
+	.id-input-error {
+		border-color: var(--color-error);
 	}
 
-	.id-input-error,
 	.id-input-error:focus {
-		border-color: oklch(0.55 0.20 25);
-		box-shadow: 0 0 0 2px oklch(0.55 0.20 25 / 0.2);
+		border-color: var(--color-error);
+		box-shadow: 0 0 0 2px oklch(from var(--color-error) l c h / 20%);
 	}
 
 	.id-field-footer {
 		display: flex;
-		align-items: center;
 		justify-content: space-between;
+		align-items: flex-start;
 		gap: 0.5rem;
 		margin-top: -0.125rem;
-		min-height: 1rem;
 	}
 
 	.id-error {
 		margin: 0;
 		font-size: 0.75rem;
-		color: oklch(0.65 0.18 25);
+		color: var(--color-error);
 		line-height: 1.4;
 	}
 
 	.id-char-count {
 		margin-left: auto;
 		font-size: 0.75rem;
-		color: oklch(0.50 0.03 250);
-		font-variant-numeric: tabular-nums;
+		color: oklch(from var(--color-base-content) l c h / 55%);
 		white-space: nowrap;
 		flex-shrink: 0;
 	}
@@ -277,34 +288,34 @@
 		border-radius: 0.5rem;
 		border: 1px solid transparent;
 		background: transparent;
-		color: oklch(0.80 0.04 250);
+		color: oklch(from var(--color-base-content) l c h / 95%);
 		cursor: pointer;
 		transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
 		white-space: nowrap;
 	}
 
 	.id-btn:hover {
-		background: oklch(0.24 0.03 250);
-		border-color: oklch(0.32 0.04 250);
+		background: var(--color-base-100);
+		border-color: var(--color-base-100);
 	}
 
 	.id-btn-cancel:focus-visible {
-		outline: 2px solid oklch(0.60 0.10 250);
+		outline: 2px solid var(--color-primary);
 		outline-offset: 2px;
 	}
 
 	.id-btn-confirm {
-		background: oklch(0.28 0.04 250 / 0.6);
-		border-color: oklch(0.40 0.05 250);
+		background: oklch(from var(--color-base-100) l c h / 60%);
+		border-color: oklch(from var(--color-base-content) l c h / 25%);
 	}
 
 	.id-btn-confirm:hover {
-		background: oklch(0.34 0.06 250);
-		border-color: oklch(0.50 0.08 250);
+		background: color-mix(in oklch, var(--color-primary) 20%, var(--color-base-300));
+		border-color: color-mix(in oklch, var(--color-primary) 40%, transparent);
 	}
 
 	.id-btn-confirm:focus-visible {
-		outline: 2px solid oklch(0.60 0.10 250);
+		outline: 2px solid var(--color-primary);
 		outline-offset: 2px;
 	}
 
@@ -312,11 +323,11 @@
 		font-family: ui-monospace, monospace;
 		font-size: 0.65rem;
 		padding: 0.0625rem 0.3125rem;
-		background: oklch(0.22 0.02 250);
-		border: 1px solid oklch(0.30 0.03 250);
+		background: var(--color-base-100);
+		border: 1px solid var(--color-base-100);
 		border-bottom-width: 2px;
 		border-radius: 0.25rem;
-		color: oklch(0.75 0.04 250);
+		color: oklch(from var(--color-base-content) l c h / 85%);
 		line-height: 1.6;
 	}
 

package/dist/components/KeyboardShortcutsOverlay.svelte

@@ -24,7 +24,23 @@
 	 *
 	 * Precedence: `sections` > `registry` > `shortcuts`. The overlay owns `?` —
 	 * don't register it in the registry too.
+	 *
+	 * App-specific sections (marks, list motions, cockpit panels…) that the
+	 * overlay itself doesn't know about come in via `extraSections` — they
+	 * render after the primary content, before the meta rows, in EVERY mode:
+	 *
+	 *   <KeyboardShortcutsOverlay {registry} extraSections={[
+	 *     { title: 'Marks & jumps (Vim)', shortcuts: [{ key: "m{a-z}", description: 'Drop a mark' }] },
+	 *   ]} />
+	 *
+	 * For content the section renderer can't express, an `extra` snippet is
+	 * rendered last (just above the meta rows):
+	 *
+	 *   <KeyboardShortcutsOverlay {registry}>
+	 *     {#snippet extra()}<div>…custom footer…</div>{/snippet}
+	 *   </KeyboardShortcutsOverlay>
 	 */
+	import type { Snippet } from 'svelte';
 	import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
 
 	export interface KeyboardShortcut {
@@ -48,6 +64,8 @@
 		shortcuts = [],
 		sections,
 		registry,
+		extraSections,
+		extra,
 		title = 'Keyboard Shortcuts',
 		open = $bindable(false)
 	}: {
@@ -63,6 +81,20 @@
 		 * the stack first). Ignored when `sections` is given.
 		 */
 		registry?: ShortcutRegistry;
+		/**
+		 * Extra app-provided sections (e.g. marks, list motions, cockpit
+		 * panels) appended after the primary content and before the meta
+		 * rows, regardless of whether the primary content came from
+		 * `sections`, `registry` or the flat `shortcuts` list. Same shape
+		 * as `sections`, with per-key `color` tinting supported.
+		 */
+		extraSections?: ShortcutSection[];
+		/**
+		 * Fully custom footer content, rendered after `extraSections` and
+		 * just above the built-in meta rows. Use when the section renderer
+		 * (title + key/description rows) can't express the markup.
+		 */
+		extra?: Snippet;
 		title?: string;
 		open?: boolean;
 	} = $props();
@@ -209,6 +241,28 @@
 						</div>
 					{/each}
 				{/if}
+				{#if extraSections}
+					{#each extraSections as section, sIdx (section.title + '::extra::' + sIdx)}
+						<div class="kso-section-title">{section.title}</div>
+						{#each section.shortcuts as { key, description, color }, i (section.title + '::extra::' + key + '::' + i)}
+							<div class="kso-row">
+								<kbd
+									class="kso-key"
+									class:kso-key-pressed={keyMatchesPressed(key, depressedKey)}
+									style={color
+										? `color:${color};border-color:color-mix(in oklch,${color} 50%,oklch(0.35 0.02 250));background:color-mix(in oklch,${color} 12%,oklch(0.25 0.02 250))`
+										: ''}
+								>
+									{key}
+								</kbd>
+								<span class="kso-description">{description}</span>
+							</div>
+						{/each}
+					{/each}
+				{/if}
+				{#if extra}
+					{@render extra()}
+				{/if}
 				<div class="kso-row kso-row-meta">
 					<kbd class="kso-key" class:kso-key-pressed={keyMatchesPressed('?', depressedKey)}>?</kbd>
 					<span class="kso-description">Toggle this overlay</span>