@voithos-labs/aragonite 0.10.2 → 0.10.3

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

@@ -18,7 +18,7 @@ declare const Editor: import("svelte").Component<$$ComponentProps, {
     setSelection: (selection: EditorSelection) => Promise<boolean>;
     placeCaretAtPoint: (x: number, y: number) => boolean;
     insertMarkdown: (md: string) => boolean;
-    runCommand: (commandId: string) => boolean;
+    runCommand: (commandId: string, arg?: unknown) => boolean;
     canRunCommand: (commandId: string) => boolean;
     isCommandActive: (commandId: string) => boolean;
     getEvents: () => EditorEvents;

package/dist/components/SelectionOverlay.svelte

@@ -15,6 +15,7 @@
 		type BlockSelectionClass
 	} from '../selection/primitives';
 	import { snapCrossBlockTableEndpoints } from '../selection/table-endpoint-snap';
+	import { pathsEqual } from '../selection/path-math';
 	import { wireOverlayRemeasure } from '../cursor/overlay-remeasure';
 
 	let {
@@ -52,6 +53,15 @@
 		});
 	});
 
+	// A whole unit (one surface-less block taken as the entire range) paints as a middle block
+	// does: its full box, no measuring.
+	const paintsWholeBox = $derived.by(() => {
+		if (classification === 'middle') return true;
+		if (classification !== 'single-block') return false;
+		const unit = selection?.wholeUnitPath ?? null;
+		return unit !== null && pathsEqual(unit, path);
+	});
+
 	// The measuring effect and the template read this one predicate, so a rendered
 	// rect is always one the effect measured; two predicates render a stale box.
 	const paintsEndpoints = $derived(
@@ -67,7 +77,9 @@
 		height: number;
 	}
 
-	/** Merge rects on the same visual line into a single rect to prevent double-highlight. */
+	/** Merge rects on the same visual line into a single rect to prevent double-highlight. Same
+	 *  line means vertically overlapping, not equal tops: an inline widget (a KaTeX box) stands
+	 *  taller than the text beside it, and two rects painted over one span read twice as dark. */
 	function mergeRectsPerLine(rects: LocalRect[]): LocalRect[] {
 		if (rects.length <= 1) return rects;
 		const sorted = [...rects].sort((a, b) => a.top - b.top);
@@ -76,7 +88,9 @@
 
 		for (let i = 1; i < sorted.length; i++) {
 			const r = sorted[i];
-			if (Math.abs(r.top - current.top) < 2) {
+			const overlap =
+				Math.min(current.top + current.height, r.top + r.height) - Math.max(current.top, r.top);
+			if (overlap > Math.min(current.height, r.height) * 0.5) {
 				const left = Math.min(current.left, r.left);
 				const right = Math.max(current.left + current.width, r.left + r.width);
 				const top = Math.min(current.top, r.top);
@@ -146,7 +160,7 @@
 	});
 </script>
 
-{#if classification === 'middle'}
+{#if paintsWholeBox}
 	<div class="selection-overlay selection-overlay-middle" contenteditable="false"></div>
 {:else if paintsEndpoints}
 	{#each endpointRects as rect, i (i)}

package/dist/components/TailInsert.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	/**
+	 * The row below the last block: a full-width strip that adds an empty paragraph at the end
+	 * of the document and lands the caret in it, with a `+` in the left gutter that does the
+	 * same — so there is always a way to write below whatever the last block is (a table, a
+	 * fence, an equation), and a place to add the next block from.
+	 */
+	import type { BlockEditActions } from '../action-contracts';
+	import { TAIL_ADD_BLOCK, TAIL_ADD_ROW } from '../a11y-strings';
+	import MenuIcon from './menu/MenuIcon.svelte';
+
+	let {
+		blockEdit,
+		childCount,
+		readOnly,
+		onPlus
+	}: {
+		blockEdit: BlockEditActions | undefined;
+		childCount: number;
+		readOnly: boolean;
+		/** The `+`: the editor appends the paragraph and opens the block menu over it. */
+		onPlus: (button: HTMLElement) => void;
+	} = $props();
+
+	// The mint's own focus lands the caret; the mousedown is swallowed so nothing else seats one.
+	function append(): void {
+		if (readOnly) return;
+		void blockEdit?.insertParagraph(childCount, '');
+	}
+</script>
+
+{#if !readOnly}
+	<div class="editor-tail">
+		<button
+			type="button"
+			class="editor-tail-plus"
+			aria-label={TAIL_ADD_BLOCK}
+			title={TAIL_ADD_BLOCK}
+			onmousedown={(e) => e.preventDefault()}
+			onclick={(e) => onPlus(e.currentTarget)}><MenuIcon name="plus" size={14} /></button
+		>
+		<button
+			type="button"
+			class="editor-tail-row"
+			aria-label={TAIL_ADD_ROW}
+			onmousedown={(e) => e.preventDefault()}
+			onclick={append}
+		></button>
+	</div>
+{/if}
+
+<style>
+	.editor-tail {
+		position: relative;
+		display: flex;
+		align-items: center;
+		height: 34px;
+		margin-top: 2px;
+	}
+	.editor-tail-row {
+		flex: 1;
+		height: 100%;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		cursor: text;
+	}
+	.editor-tail-row:focus-visible {
+		outline: 1px solid var(--color-border, #3e3e3b);
+		outline-offset: -1px;
+		border-radius: 4px;
+	}
+	/* In the editor's gutter, exactly where a block's drag handle sits (`BlockDragHandle`): the
+	   root's 1rem padding holds a 0.85rem slot, and this is the handle of the imaginary last line. */
+	.editor-tail-plus {
+		position: absolute;
+		left: -1rem;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 1rem;
+		height: 1rem;
+		padding: 0;
+		border: 0;
+		border-radius: 3px;
+		background: transparent;
+		color: var(--color-ui-muted, #8f8f89);
+		cursor: pointer;
+		opacity: 0;
+		transition: opacity 120ms ease-out;
+	}
+	.editor-tail:hover .editor-tail-plus,
+	.editor-tail-plus:focus-visible {
+		opacity: 1;
+	}
+	.editor-tail-plus:hover {
+		background: var(--color-ui-faint, rgba(255, 255, 255, 0.07));
+		color: var(--color-text-primary, #e8e8e5);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.editor-tail-plus {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,17 @@
+/**
+     * The row below the last block: a full-width strip that adds an empty paragraph at the end
+     * of the document and lands the caret in it, with a `+` in the left gutter that does the
+     * same — so there is always a way to write below whatever the last block is (a table, a
+     * fence, an equation), and a place to add the next block from.
+     */
+import type { BlockEditActions } from '../action-contracts';
+type $$ComponentProps = {
+    blockEdit: BlockEditActions | undefined;
+    childCount: number;
+    readOnly: boolean;
+    /** The `+`: the editor appends the paragraph and opens the block menu over it. */
+    onPlus: (button: HTMLElement) => void;
+};
+declare const TailInsert: import("svelte").Component<$$ComponentProps, {}, "">;
+type TailInsert = ReturnType<typeof TailInsert>;
+export default TailInsert;

package/dist/components/block-content-selector.d.ts

@@ -1,6 +1,6 @@
 /**
  * A block's content element is the first child of its `data-block-path` wrapper that is not chrome
- * wrapped around it (child order: badges, content, the code block's language chip, selection
+ * wrapped around it (child order: badges, content, the code block's rail, selection
  * overlay, decoration overlays, drag handle). One definition, shared by the runtime and the e2e
  * page-object.
  */
@@ -9,4 +9,8 @@
 export declare const BLOCK_CONTENT_SELECTOR = ":scope > :not(.selection-overlay):not(.decoration-badge)";
 /** For a Playwright `locator`, which enumerates ALL matches, so every chrome child
  *  must be named — the decoration overlay is one per painted mark, not per block. */
-export declare const BLOCK_CONTENT_LOCATOR_SELECTOR = ":scope > *:not(.selection-overlay):not(.decoration-overlay):not(.block-drag-handle):not(.decoration-badge):not(.code-lang-chip)";
+export declare const BLOCK_CONTENT_LOCATOR_SELECTOR = ":scope > *:not(.selection-overlay):not(.decoration-overlay):not(.block-drag-handle):not(.decoration-badge):not(.code-rail)";
+/** Marks the element a block's drag grip centres on (`drag-handle.ts`); absent, the block's
+ *  first line of text is it. Here rather than beside the handle so the ambient-prefix DOM
+ *  builder can set it without reaching into the components layer. */
+export declare const DRAG_ANCHOR_ATTR = "data-drag-anchor";

package/dist/components/block-content-selector.js

@@ -1,6 +1,6 @@
 /**
  * A block's content element is the first child of its `data-block-path` wrapper that is not chrome
- * wrapped around it (child order: badges, content, the code block's language chip, selection
+ * wrapped around it (child order: badges, content, the code block's rail, selection
  * overlay, decoration overlays, drag handle). One definition, shared by the runtime and the e2e
  * page-object.
  */
@@ -9,4 +9,8 @@
 export const BLOCK_CONTENT_SELECTOR = ':scope > :not(.selection-overlay):not(.decoration-badge)';
 /** For a Playwright `locator`, which enumerates ALL matches, so every chrome child
  *  must be named — the decoration overlay is one per painted mark, not per block. */
-export const BLOCK_CONTENT_LOCATOR_SELECTOR = ':scope > *:not(.selection-overlay):not(.decoration-overlay):not(.block-drag-handle):not(.decoration-badge):not(.code-lang-chip)';
+export const BLOCK_CONTENT_LOCATOR_SELECTOR = ':scope > *:not(.selection-overlay):not(.decoration-overlay):not(.block-drag-handle):not(.decoration-badge):not(.code-rail)';
+/** Marks the element a block's drag grip centres on (`drag-handle.ts`); absent, the block's
+ *  first line of text is it. Here rather than beside the handle so the ambient-prefix DOM
+ *  builder can set it without reaching into the components layer. */
+export const DRAG_ANCHOR_ATTR = 'data-drag-anchor';

package/dist/components/blocks/ThematicBreakBlock.svelte

@@ -72,13 +72,21 @@
 	export function runCommand(id: CommandId): boolean {
 		return reorderRunCommand(id, reorder, () => myPath);
 	}
+
+	// The rule has no text to measure, so any non-empty range over it is its whole box — what a
+	// range ending on it, or the rule taken as a unit, paints.
+	export function measurePartialRects(startOffset: number, endOffset: number): DOMRect[] {
+		if (endOffset <= startOffset || !boxEl) return [];
+		return [boxEl.getBoundingClientRect()];
+	}
 	void ({
 		editable,
 		focusable,
 		focus,
 		parkCaret,
 		getCursorOffset,
-		runCommand
+		runCommand,
+		measurePartialRects
 	} satisfies BlockComponent);
 
 	// ── Event Handlers ──────────────────────────────────────────────────
@@ -136,21 +144,26 @@
 		position: relative;
 	}
 
+	/* The rule is a hairline, so the SPACE around it is what reads as a division. Cramped
+	   padding on a heavy line reads as a border instead. */
 	.thematic-break-rule {
 		outline: none;
-		padding: 8px 0;
+		padding: 14px 0;
 	}
 
-	/* `:focus-within`: whole-block focus lands on the host, not the separator. */
+	/* `:focus-within`: whole-block focus lands on the host, not the separator. Painted as the
+	   SAME wash the selection overlay uses, not an accent ring: a rule that showed focus one
+	   way and selection another read as two different states of the same block. */
 	.thematic-break-block:focus-within .thematic-break-rule {
-		outline: 2px solid var(--color-accent, #567b67);
-		outline-offset: 2px;
+		background: var(--selection-overlay-bg, rgba(100, 150, 255, 0.3));
 		border-radius: 2px;
 	}
 
 	hr {
 		border: none;
-		border-top: 2px solid var(--color-ui-muted, #a4a4a4);
+		/* A hairline on the BORDER token, not the muted-UI one: a divider separates, and at
+		   2px of mid-grey it competed with the text it sits between. */
+		border-top: 1px solid var(--color-border, #3e3e3b);
 		margin: 0;
 	}
 </style>

package/dist/components/blocks/ThematicBreakBlock.svelte.d.ts

@@ -12,6 +12,7 @@ declare const ThematicBreakBlock: import("svelte").Component<$$ComponentProps, {
     parkCaret: (_offset: number) => void;
     getCursorOffset: () => number | null;
     runCommand: (id: CommandId) => boolean;
+    measurePartialRects: (startOffset: number, endOffset: number) => DOMRect[];
 }, "">;
 type ThematicBreakBlock = ReturnType<typeof ThematicBreakBlock>;
 export default ThematicBreakBlock;

package/dist/components/blocks/code/CodeBlock.svelte

@@ -5,6 +5,7 @@
 	import {
 		EDITOR_POLICIES_KEY,
 		EDITOR_SERVICES_KEY,
+		type CodeRunRequest,
 		type EditorPolicies,
 		type EditorServices
 	} from '../../../editor-keys';
@@ -21,11 +22,12 @@
 	import {
 		createEditableSurface,
 		createClipboardHandlers,
-		consumePendingRestore
+		consumePendingRestore,
+		withKeydownVerdict
 	} from '../editable-surface';
 	import { wireSurfaceContexts, useParkFocusOnUnmount } from '../surface-wiring.svelte';
 	import { createContentOffsetBackend, anchorTrailingNewline } from '../plain-text-backend';
-	import { renderCodeBlock } from './code-renderer';
+	import { renderCodeBlock, sliceFencedCode } from './code-renderer';
 	import {
 		getLineLeadingWhitespace,
 		isBetweenEmptyPair,
@@ -40,8 +42,8 @@
 		writeFenceInfo
 	} from '../../../schema/fenced-code-raw';
 	import { hidesMarkers } from '../../../presentation-mode';
-	import CodeLanguageChip from './CodeLanguageChip.svelte';
-	import { computeFenceExit } from './code-fence-exit';
+	import CodeBlockRail from './CodeBlockRail.svelte';
+	import { computeFenceExit, computeTypedFenceExit } from './code-fence-exit';
 	import {
 		classifyFenceBoundary,
 		clampCaretToBody,
@@ -80,15 +82,16 @@
 		events: editorEvents
 	} = wiring.deps;
 	const { reorder } = getContext<EditorServices>(EDITOR_SERVICES_KEY);
-	const { presentationMode: getPresentationMode, onPasteImage } =
-		getContext<EditorPolicies>(EDITOR_POLICIES_KEY);
+	const {
+		presentationMode: getPresentationMode,
+		onPasteImage,
+		onRunCode,
+		codeMenuItems
+	} = getContext<EditorPolicies>(EDITOR_POLICIES_KEY);
 	const presentationMode = $derived(getPresentationMode?.() ?? 'source');
 	const readOnly = $derived(presentationMode === 'reading');
 	let el: HTMLDivElement | undefined = $state();
 	let composing = $state(false);
-	// The walk container's own stamp, kept as state rather than re-derived: it is what
-	// decides whether this block paints its fence chrome, and so whether it needs a chip.
-	let contentEmpty = $state(false);
 	let pendingCursorOffset = $state<number | null>(null);
 	let pendingSelection = $state<{ start: number; end: number } | null>(null);
 	let lastRenderedRaw = '';
@@ -192,9 +195,10 @@
 
 		el.replaceChildren(renderCodeBlock(node));
 		anchorTrailingNewline(el);
-		const chromeOnly = holdsOnlyMarkerChrome(el);
-		el.toggleAttribute(CONTENT_EMPTY_ATTR, chromeOnly);
-		contentEmpty = chromeOnly;
+		// The walk container's own stamp, and the only surviving consumer of the emptiness
+		// read: both the marker-hiding CSS and the caret walk key off this attribute. The
+		// rail no longer gates on it — a content-empty fence gets one either way.
+		el.toggleAttribute(CONTENT_EMPTY_ATTR, holdsOnlyMarkerChrome(el));
 		lastRenderedRaw = node.raw;
 
 		// Restore only while this block still holds focus: an edit reparsing to multiple
@@ -224,13 +228,99 @@
 
 	useParkFocusOnUnmount(() => el ?? null, getEditorRoot);
 
-	// ── The language chip ─────────────────────────────────────────────────────
+	// ── The rail ──────────────────────────────────────────────────────────────
 
-	// The chip stands in for fence chrome the mode paints nothing for, so it shows exactly
-	// where that chrome is missing: never in source, never on a block painting its own.
-	const showChip = $derived(hidesMarkers(presentationMode) && !contentEmpty);
+	// The rail stands in for fence chrome the mode paints nothing for: never in source, which
+	// paints its own always. A content-empty block DOES paint dimmed markers of its own and
+	// still gets the rail — the picker is the authoring path now, and a fence with no language
+	// is exactly where it is wanted. The two overlapping is the same accepted redundancy as a
+	// focused preview block showing fence and rail together.
+	const showRail = $derived(hidesMarkers(presentationMode));
 	const infoString = $derived(metadataOf(node, 'fencedCode').info);
 
+	/** The fence body alone, which is what a host executes or a copy writes — never the
+	 *  opener and closer lines, which are this block's syntax rather than its content. */
+	function bodyText(): string {
+		return sliceFencedCode(node).body;
+	}
+
+	function runRequest(): CodeRunRequest {
+		return { code: bodyText(), info: infoString, path: myPath };
+	}
+
+	/**
+	 * A fence with no language and no body, the moment it takes focus. Gated on FIRST focus
+	 * per mount, not on the creating edit: a block made by an insert command mounts AFTER the
+	 * commit that made it and never hears that edit, so the caret arriving is the only signal
+	 * every creation path shares. Loading a document focuses nothing and opens no pickers.
+	 */
+	let autoOpenLanguage = $state(false);
+	let languageOffered = false;
+	function onSurfaceFocus(): void {
+		if (languageOffered || readOnly || !showRail) return;
+		languageOffered = true;
+		// A caret that STEPPED into an existing fence is passing through, and a picker taking
+		// focus there traps the walk. A typed opener is still open, and a click or an insert
+		// command seats the caret with no arrival key noted: those are the authoring moments.
+		const steppedIn = metadataOf(node, 'fencedCode').closed && edgeAffinity.get() !== null;
+		const offerLanguage = infoString === '' && bodyText().trim() === '' && !steppedIn;
+		// Deferred past the commit's OWN focus work. Creating a fence focuses this surface
+		// twice — once as it mounts, once when the commit seats its caret — and opening on the
+		// first would put the field up only for the second to blur it straight back down. A
+		// fence that is still bare is completed first (language or not), so the picker opens
+		// over a real block.
+		void tick().then(() => {
+			const completed = completeBareFence();
+			if (!offerLanguage) return;
+			if (completed) {
+				void tick().then(() => {
+					autoOpenLanguage = true;
+				});
+			} else {
+				autoOpenLanguage = true;
+			}
+		});
+	}
+
+	/**
+	 * A fence with no body line — a just-typed opener, or an opener glued to its closer — is a
+	 * block whose only bytes are its own chrome: nowhere for a caret, so the markers must paint.
+	 * Writes opener, one empty body line, closer, with the caret on that line. Block math gets
+	 * this from the Enter-completion seam, which a fence cannot use: ``` parses as an (unclosed)
+	 * fence the moment it is typed, so no paragraph is left for that seam to claim.
+	 */
+	function completeBareFence(): boolean {
+		if (!el) return false;
+		const meta = metadataOf(node, 'fencedCode');
+		const slice = sliceFencedCode(node);
+		const text = getDisplayText();
+		const ending = trailingLineEnding(node.raw);
+		const offset = backend.getRaw() ?? 0;
+		if (!meta.closed) {
+			if (slice.body.trim() !== '') return false;
+			const closer = meta.fenceMarker.repeat(meta.fenceLength);
+			const completed = text + ending + ending + closer;
+			pendingCursorOffset = commitDisplay(completed, offset, text.length + ending.length);
+			return true;
+		}
+		if (slice.body !== '') return false;
+		const openerLength = slice.openerLine.length;
+		const completed = text.slice(0, openerLength) + ending + text.slice(openerLength);
+		pendingCursorOffset = commitDisplay(completed, offset, openerLength);
+		return true;
+	}
+
+	async function copyBody(): Promise<boolean> {
+		try {
+			await navigator.clipboard.writeText(bodyText());
+			return true;
+		} catch {
+			// A denied or absent clipboard is the host's business, not an editor error: the
+			// affordance simply reports nothing copied.
+			return false;
+		}
+	}
+
 	// The chip's write: the opener's info span, through the display funnel so the fence rule
 	// runs over it, isolated so no typing burst on either side joins its undo entry.
 	function commitLanguage(info: string): void {
@@ -249,10 +339,26 @@
 		returnCaretToBody();
 	}
 
-	// This block's own door, not `moveFocus`: the chip is chrome over one block, and a
-	// traversal to it stops at the gap above instead. The seat waits for the commit's render.
+	/**
+	 * This block's own door, not `moveFocus`: the rail is chrome over one block. Offset 0 is
+	 * NOT the body — on an UNCLOSED fence the opener run counts as content by design (that is
+	 * what lets a just-typed ` ``` ` be deleted back out), so `focus(0)` parks the caret BEFORE
+	 * the backticks and the next keystroke rewrites the opener. `clampRangeToBody` clamps
+	 * unconditionally, which is the "wherever the body starts" this needs.
+	 */
 	function returnCaretToBody(): void {
-		void tick().then(() => focus(0));
+		// Focus first and SEAT through the pending-caret channel the render effect drains. A
+		// bare `focus()` after a tick raced the commit's own re-render, which replaces every
+		// child of the walk container and dropped the seat on the floor.
+		el?.focus({ preventScroll: true });
+		void tick().then(() => {
+			// Read the body AFTER the commit lands. Writing a language lengthens the opener, so
+			// an offset measured against the pre-commit node points into the info string that
+			// just grew — the caret arrived inside `js` and typing split it.
+			const at = clampRangeToBody(node, { start: 0, end: 0 }).start;
+			pendingCursorOffset = at;
+			focus(at);
+		});
 	}
 
 	// ── Event handlers ────────────────────────────────────────────────────────
@@ -299,6 +405,17 @@
 		const offset = selOffsets ? selOffsets.start : (backend.getRaw() ?? 0);
 
 		const meta = metadataOf(node, 'fencedCode');
+		const collapsed = !selOffsets || selOffsets.start === selOffsets.end;
+		const typedExit = collapsed
+			? computeTypedFenceExit({ text, offset, meta, typed: data })
+			: { kind: 'none' as const };
+		if (typedExit.kind === 'exitWithEdit') {
+			e.preventDefault();
+			commitDisplay(typedExit.newText, offset, offset);
+			exitDownward();
+			return;
+		}
+
 		const result = computeAutoPair({
 			text,
 			selection: selOffsets ?? { start: offset, end: offset },
@@ -344,7 +461,8 @@
 	function guardFenceRangedEdit(e: InputEvent): boolean {
 		if (composing || !el) return false;
 		const range = pendingEditRange(e, el);
-		if (!range || !crossesFenceBoundary(node, range)) return false;
+		if (!range) return false;
+		if (!crossesFenceBoundary(node, range)) return guardHiddenFenceDelete(e, range);
 
 		e.preventDefault();
 		const insert = rangedEditInsertion(e, fenceEditSpan(node, range));
@@ -357,6 +475,27 @@
 		return true;
 	}
 
+	/**
+	 * A delete while the fence lines hide is applied here, whatever range the engine reports:
+	 * Chromium, deleting the last visible character of a line, also removes the unrendered nodes
+	 * beside it — the opener's whole fence line — so a Backspace on the last body character
+	 * left `\n\`\`\`` and reparsed the block into a fresh fence. The span is clamped to the body.
+	 */
+	function guardHiddenFenceDelete(e: InputEvent, range: CodeRange): boolean {
+		if (!showRail || !/^delete(?!By)/.test(e.inputType)) return false;
+		e.preventDefault();
+		const span = clampRangeToBody(node, range);
+		if (span.end > span.start) {
+			const text = getDisplayText();
+			pendingCursorOffset = commitDisplay(
+				text.slice(0, span.start) + text.slice(span.end),
+				backend.getRaw() ?? 0,
+				span.start
+			);
+		}
+		return true;
+	}
+
 	/**
 	 * What the pending edit will rewrite. `getTargetRanges()` is the authority — a word
 	 * delete at a collapsed caret reports the word, not the caret — and is
@@ -406,6 +545,8 @@
 		if (wiring.dispatchChord(e, { kind: node.kind, runCommand })) return;
 	}
 
+	const onKeyDownTraced = withKeydownVerdict(onKeyDown);
+
 	// ── Commands ────────────────────────────────────────────────────────
 
 	export function runCommand(id: CommandId): boolean {
@@ -443,6 +584,15 @@
 			offset === 0 ||
 			classifyFenceBoundary({ node, offset, forward: false }).kind === 'exitPrev'
 		) {
+			// At the top of an EMPTY fence the block is the only thing the press could mean:
+			// there is no text to delete and nothing to merge, and stepping the caret out
+			// leaves a block the user just asked to be rid of. A fence with a body keeps the
+			// step-out — one press must never take code with it.
+			if (bodyText().trim() === '') {
+				void blockEdit.deleteBlock(index);
+				focusActions.moveFocus(index - 1, 'end');
+				return true;
+			}
 			focusActions.moveFocus(index - 1, 'end');
 			return true;
 		}
@@ -481,6 +631,18 @@
 		const text = getDisplayText();
 		const meta = metadataOf(node, 'fencedCode');
 
+		// Source mode paints the markers and never completes a bare fence on focus, so Enter is
+		// where it happens there; the marker-hiding rungs already did it as the caret arrived.
+		if (completeBareFence()) {
+			if (infoString === '' && !readOnly && !languageOffered) {
+				languageOffered = true;
+				void tick().then(() => {
+					autoOpenLanguage = true;
+				});
+			}
+			return true;
+		}
+
 		const exit = computeFenceExit({ text, offset, meta });
 		if (exit.kind === 'closeAndExit') {
 			closeUnclosedFenceAndDescend(exit.newText);
@@ -671,7 +833,8 @@
 	role="textbox"
 	spellcheck="false"
 	oninput={onInput}
-	onkeydown={onKeyDown}
+	onfocus={onSurfaceFocus}
+	onkeydown={onKeyDownTraced}
 	onbeforeinput={onBeforeInput}
 	oncopy={onCopy}
 	oncut={onCut}
@@ -682,26 +845,32 @@
 ></div>
 <!-- Beside the walk container, never inside it: the render effect replaces that element's
 	children on every commit, and the offset walk counts everything that survives there. -->
-{#if showChip}
-	<CodeLanguageChip
+{#if showRail}
+	<CodeBlockRail
 		info={infoString}
 		editable={!readOnly}
+		autoOpen={autoOpenLanguage}
 		onCommit={commitLanguage}
 		onCancel={(returnCaret) => returnCaret && returnCaretToBody()}
+		onRun={onRunCode ? () => onRunCode(runRequest()) : undefined}
+		onCopy={copyBody}
+		menuItems={codeMenuItems ? () => codeMenuItems(runRequest()) : undefined}
 	/>
 {/if}
 
 <style>
+	/* A recessed slab rather than an outlined field: the fill carries the block and the
+	   border only closes its edge, so a page of prose reads code as a surface it sits on. */
 	.code-block {
 		width: 100%;
 		outline: none;
-		padding: 12px;
-		font-family: var(--font-editor, ui-monospace, monospace);
+		padding: 14px 16px;
+		font-family: var(--font-code, ui-monospace, monospace);
 		font-size: 0.9em;
-		line-height: 1.5;
+		line-height: 1.55;
 		background: var(--color-bg-secondary, rgba(128, 128, 128, 0.12));
-		border: 1px solid var(--color-ui-muted, #a4a4a4);
-		border-radius: 4px;
+		border: 1px solid transparent;
+		border-radius: var(--radius-surface, 8px);
 		color: inherit;
 		white-space: pre;
 		overflow-x: auto;
@@ -709,10 +878,22 @@
 		tab-size: 4;
 		box-sizing: border-box;
 		min-height: 1.4em;
+		transition: border-color 120ms ease-out;
 	}
 
-	.code-block:focus {
-		border-color: var(--color-accent, #567b67);
+	/* The caret is the primary focus signal inside the box; the border only warms, so a
+	   click into code does not flash a heavy ring across the page. */
+	/* Focus lives in the rail's search field while the picker is open — outside this element —
+	   so the block would otherwise drop its focused look mid-interaction. */
+	.code-block:focus,
+	.code-block:has(~ :global(.code-rail-open)) {
+		border-color: var(--color-border, #3d4047);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.code-block {
+			transition: none;
+		}
 	}
 
 	.code-block :global(.md-marker) {