@voithos-labs/aragonite 0.10.4 → 0.10.7

package/dist/components/image/image-resize.d.ts

@@ -3,9 +3,6 @@ export declare function clampWidth(width: number, maxWidth: number): number;
 export declare const KEYBOARD_MIN_WIDTH = 32;
 export declare function keyboardResizeWidth(currentWidth: number, delta: number, maxWidth: number): number;
 export declare function snapWidth(width: number, maxWidth: number, snapThresholdPx: number): number;
-/**
- * The height a release persists — the one the drag showed. An aspect-locked drag lets the height
- * follow the width, so it persists `|N` and leaves the derivation to the renderer; an unlocked
- * drag holds the height the image already had, which only the explicit `|NxM` form can carry.
- */
+/** The height the drag showed: none for an aspect-locked drag (`|N`, the renderer derives it),
+ *  the existing height for an unlocked one, which needs the `|NxM` form. */
 export declare function resolveDraggedHeight(aspectLocked: boolean, previewHeight: number): number | undefined;

package/dist/components/image/image-resize.js

@@ -1,5 +1,5 @@
 // Pure math for image drag-to-resize: clamp, snap-to-percentage, aspect lock.
-// No DOM — the handles component owns pointer events and calls these.
+// No DOM: the handles component owns pointer events and calls these.
 export const MIN_WIDTH = 16;
 const SNAP_PERCENTAGES = [25, 50, 75, 100];
 export function clampWidth(width, maxWidth) {
@@ -25,11 +25,8 @@ export function snapWidth(width, maxWidth, snapThresholdPx) {
     }
     return rounded;
 }
-/**
- * The height a release persists — the one the drag showed. An aspect-locked drag lets the height
- * follow the width, so it persists `|N` and leaves the derivation to the renderer; an unlocked
- * drag holds the height the image already had, which only the explicit `|NxM` form can carry.
- */
+/** The height the drag showed: none for an aspect-locked drag (`|N`, the renderer derives it),
+ *  the existing height for an unlocked one, which needs the `|NxM` form. */
 export function resolveDraggedHeight(aspectLocked, previewHeight) {
     // A widget that never laid out reports 0; `|Nx0` is worse than no hint at all.
     if (aspectLocked || previewHeight < 1)

package/dist/components/image/image-widget-editing.d.ts

@@ -1,7 +1,7 @@
 /**
- * The image widget's selected-key behavior: Shift+Arrow keyboard resize. Attached as
- * the image kind's `onSelectedKey` at mount (built-in-blocks.ts), so the generic
- * selected-widget keydown path stays kind-agnostic.
+ * What a key does while an image widget is selected: Shift+Arrow resizes it. Registered as
+ * the image kind's `onSelectedKey` at mount (built-in-blocks.ts), so the shared
+ * selected-widget keydown path stays the same for every kind.
  */
 import type { InlineWidgetEditingContext } from '../../core/inline/inline-widgets';
 export declare function imageWidgetOnSelectedKey(e: KeyboardEvent, ctx: InlineWidgetEditingContext): boolean;

package/dist/components/image/image-widget-editing.js

@@ -1,14 +1,14 @@
 /**
- * The image widget's selected-key behavior: Shift+Arrow keyboard resize. Attached as
- * the image kind's `onSelectedKey` at mount (built-in-blocks.ts), so the generic
- * selected-widget keydown path stays kind-agnostic.
+ * What a key does while an image widget is selected: Shift+Arrow resizes it. Registered as
+ * the image kind's `onSelectedKey` at mount (built-in-blocks.ts), so the shared
+ * selected-widget keydown path stays the same for every kind.
  */
-import { buildImageEditBytes } from './image-source-bytes';
+import { buildImageEditBytes } from '../../core/inline/image-source-bytes';
 import { keyboardResizeWidth } from './image-resize';
 const KEYBOARD_STEP = 20;
 const FALLBACK_DEFAULT_WIDTH = 400;
 export function imageWidgetOnSelectedKey(e, ctx) {
-    // A resize is an edit; declining lets the caller's generic swallow keep the key inert.
+    // A resize is an edit; refusing here lets the caller swallow the key and do nothing.
     if (ctx.presentationMode === 'reading')
         return false;
     if (!(e.shiftKey && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')))
@@ -18,8 +18,8 @@ export function imageWidgetOnSelectedKey(e, ctx) {
     const delta = e.key === 'ArrowRight' ? KEYBOARD_STEP : -KEYBOARD_STEP;
     const currentWidth = inline.width ?? FALLBACK_DEFAULT_WIDTH;
     const newWidth = keyboardResizeWidth(currentWidth, delta, ctx.editorContentWidth);
-    // url and title are untouched, so carry the label through and preserve the
-    // `![alt][label]` form rather than inlining the LRD-resolved url.
+    // The url and title are untouched, so keep the label and the `![alt][label]` form
+    // rather than writing the resolved url inline.
     const newFields = {
         alt: inline.alt ?? '',
         url: inline.url ?? '',
@@ -32,8 +32,8 @@ export function imageWidgetOnSelectedKey(e, ctx) {
         ...(inline.label !== undefined ? { label: inline.label } : {})
     };
     const newBytes = buildImageEditBytes(inline, node.raw, newFields);
-    // The rung owning these bytes cannot express the resize, but consume the key
-    // anyway: handing a Shift+Arrow on would extend the selection out of the image.
+    // The inline syntax handler that owns these bytes cannot express the resize, but take
+    // the key anyway: passing a Shift+Arrow on would extend the selection out of the image.
     if (newBytes === null)
         return true;
     const newRaw = node.raw.slice(0, ctx.widgetStart) + newBytes + node.raw.slice(ctx.widgetEnd);

package/dist/components/image/widget-dom.d.ts

@@ -3,9 +3,8 @@ import type { ImageLoadPolicy } from '../../core/inline-render';
 export interface BuildImageWidgetOpts {
     resolveImageUrl: (rawUrl: string) => string;
     imageLoadPolicy?: ImageLoadPolicy;
-    /** Resolved URLs that failed to load this session, per editor instance. Inline
-     *  rebuild creates a fresh <img> per keystroke, which without this renders
-     *  unbroken until the async `error` re-fires — a flicker on every keystroke. */
+    /** URLs that failed to load this session, so a rebuilt <img> renders broken at once instead
+     *  of flickering until its `error` fires again. */
     brokenUrlCache: Set<string>;
 }
 export declare function buildImageWidget(node: InlineNode, _raw: string, opts: BuildImageWidgetOpts): HTMLSpanElement;

package/dist/components/image/widget-dom.js

@@ -1,6 +1,6 @@
-// The widget contributes its raw bytes via data-source-start/end, which
-// `cursor/widget-offset.ts` reads; textContent stays empty so prose
-// `textContent === ambientPrefix + raw` still holds.
+// The widget reports its raw bytes through data-source-start and data-source-end, which
+// `cursor/widget-offset.ts` reads; its textContent stays empty so a prose block's
+// `textContent === marker prefix + raw` still holds.
 import { isAllowedImageSrcScheme } from '../../core/url-policy';
 import { findSurfacePathForElement } from '../../selection/path-lookup';
 import { devWarn } from '../../dev-warn';
@@ -8,28 +8,25 @@ import { applyCropToWidget } from './image-crop';
 export function buildImageWidget(node, _raw, opts) {
     const widget = document.createElement('span');
     widget.className = 'md-image-widget';
-    // `data-inline-widget` is the shared atomic-widget marker read by the cursor
-    // walker, selection painter and raw reader; `data-image-widget` is image-specific.
+    // `data-inline-widget` marks any widget the caret cannot enter, and is read by the
+    // caret code, the selection painter and the raw reader; `data-image-widget` is this one.
     widget.dataset.inlineWidget = '';
     widget.dataset.imageWidget = '';
     widget.dataset.sourceStart = String(node.start);
     widget.dataset.sourceEnd = String(node.end);
     widget.setAttribute('contenteditable', 'false');
-    // Select on `click`, never `pointerdown`: a pointerdown listener hijacks a gesture
-    // STARTING on the image, so no cross-block drag could originate here. Shift-click
-    // is a cross-block extension the block owns, so decline it.
+    // On `click`, not `pointerdown`, so a drag can still start on the image; a Shift-click
+    // extends the block's own selection.
     widget.addEventListener('click', (e) => {
         if (e.shiftKey)
             return;
-        // Resolve the path live rather than baking it at build time: content inserted
-        // above shifts the block's path without touching its `raw`, so the render memo
-        // skips a rebuild and a baked path resolves the wrong CST node. The SURFACE door:
-        // inside a cell the block path stops at the table, whose offsets are cell indices.
+        // Resolved at the click: content inserted above moves the block's path without a
+        // rebuild of this widget, so a path stored at build time would go stale.
         const paragraphPath = findSurfacePathForElement(widget);
         if (!paragraphPath)
             return;
-        // Match TextEditableBlock.snapClickToWidgetEdge, which lands the caret at the
-        // widget's right edge, so Ctrl+Z restores the click's visual landing.
+        // Match TextEditableBlock.snapClickToWidgetEdge, which puts the caret at the
+        // widget's right edge, so Ctrl+Z restores the caret where the click left it.
         const event = new CustomEvent('image-widget-select', {
             bubbles: true,
             detail: {
@@ -62,9 +59,8 @@ export function buildImageWidget(node, _raw, opts) {
         img.setAttribute('width', String(node.width));
     if (node.height !== undefined)
         img.setAttribute('height', String(node.height));
-    // A declared `|WxH` box belongs to the author, so it both reserves space before the bytes
-    // arrive and survives the decode: the attribute pair alone loses to the natural ratio the
-    // moment `height: auto` has one to read. With a crop the box is a frame the image pans in.
+    // A `|WxH` box reserves space before the bytes arrive and survives the decode, where the
+    // attributes alone lose to the natural ratio; with a crop it is the frame.
     if (node.width !== undefined && node.height !== undefined) {
         img.style.aspectRatio = `${node.width} / ${node.height}`;
         if (node.crop) {
@@ -75,18 +71,17 @@ export function buildImageWidget(node, _raw, opts) {
         opts.brokenUrlCache.add(resolvedUrl);
         widget.classList.add('md-image-broken');
     };
-    // Broken means the request finished and produced nothing to lay out, so each site
-    // establishes completion itself: `complete` here, by definition in the load listener.
+    // Broken means the request finished and produced nothing to lay out, so each place
+    // below checks that it finished: `complete` here, and the load event itself below.
     const hasNoIntrinsicSize = () => img.naturalWidth === 0;
-    // Only a loaded image can be broken: a blocked/placeholder widget leaves src unset,
-    // and an unset <img> reports complete && naturalWidth === 0 in a real browser.
+    // Only a loaded image can be broken: a blocked or placeholder widget leaves src unset,
+    // and an unset <img> reports complete with naturalWidth 0 in a real browser.
     if (img.src && (opts.brokenUrlCache.has(resolvedUrl) || (img.complete && hasNoIntrinsicSize()))) {
         markBroken();
     }
     img.addEventListener('error', markBroken);
-    // A load event is not proof of success: a 200 the decoder cannot size (truncated
-    // body, an SVG with no intrinsic dimensions) fires `load` with naturalWidth 0, and
-    // deferring that to the next rebuild leaves the placeholder a render behind.
+    // `load` can fire with no size (a truncated body, an SVG without dimensions), so it is
+    // checked here rather than a render later.
     img.addEventListener('load', () => {
         if (hasNoIntrinsicSize()) {
             markBroken();

package/dist/components/image/widget-selection-state.svelte.d.ts

@@ -1,18 +1,17 @@
-/** What an outside-press dismiss handler must NOT treat as outside: the widget itself and
- *  the overlay chrome anchored to it. One string, because both handlers must move together. */
+import type { WidgetTarget } from '../../selection/primitives';
+import type { SelectionState } from '../../selection/selection-state.svelte';
+/** What a click-outside handler must not count as outside: the widget itself and the overlay
+ *  controls attached to it. */
 export declare const IMAGE_CHROME_SELECTOR = "[data-image-widget], [data-image-overlay]";
-export interface WidgetTarget {
-    paragraphPath: number[];
-    sourceStart: number;
-    preSelectOffset: number;
-}
+/** Whether a press should end the image selection, for both click-outside handlers. A Shift-press
+ *  on this editor's text is left to that block, which grows a range from the image and ends it. */
+export declare function pressLeavesImage(press: PointerEvent, editorRoot: Element | null): boolean;
 export interface WidgetSelectionState {
     getSelected(): WidgetTarget | null;
     select(target: WidgetTarget): void;
+    /** Ends a selected widget; with none selected, touches nothing else the store holds. */
     clear(): void;
+    followEdit(paragraphPath: number[], editEnd: number, delta: number): void;
     isSelected(paragraphPath: number[], sourceStart: number): boolean;
 }
-export interface CreateWidgetSelectionOpts {
-    onSelect: () => void;
-}
-export declare function createWidgetSelectionState(opts: CreateWidgetSelectionOpts): WidgetSelectionState;
+export declare function createWidgetSelectionState(selection: SelectionState): WidgetSelectionState;

package/dist/components/image/widget-selection-state.svelte.js

@@ -1,26 +1,33 @@
-// Image-widget selection is mutually exclusive with caret and cross-block
-// selection; `select` fires `onSelect` so the editor shell can clear the others.
+// The image and text-block readers' view of the widget the selection state holds. It keeps no state
+// of its own, so it can't disagree with the store. Interim: it goes once those readers read the
+// selection state themselves.
+import { selectWidgetWhole } from '../../selection/caret-doors';
 import { pathsEqual } from '../../selection/path-math';
-/** What an outside-press dismiss handler must NOT treat as outside: the widget itself and
- *  the overlay chrome anchored to it. One string, because both handlers must move together. */
+import { findSurfacePathForElement } from '../../selection/path-lookup';
+/** What a click-outside handler must not count as outside: the widget itself and the overlay
+ *  controls attached to it. */
 export const IMAGE_CHROME_SELECTOR = '[data-image-widget], [data-image-overlay]';
-export function createWidgetSelectionState(opts) {
-    let selected = $state(null);
+/** Whether a press should end the image selection, for both click-outside handlers. A Shift-press
+ *  on this editor's text is left to that block, which grows a range from the image and ends it. */
+export function pressLeavesImage(press, editorRoot) {
+    const target = press.target instanceof Element ? press.target : null;
+    if (target?.closest(IMAGE_CHROME_SELECTOR))
+        return false;
+    const ownedByBlock = press.shiftKey && !!editorRoot?.contains(target) && findSurfacePathForElement(target) !== null;
+    return !ownedByBlock;
+}
+export function createWidgetSelectionState(selection) {
     return {
-        getSelected: () => selected,
-        select: (target) => {
-            selected = {
-                paragraphPath: [...target.paragraphPath],
-                sourceStart: target.sourceStart,
-                preSelectOffset: target.preSelectOffset
-            };
-            opts.onSelect();
-        },
+        getSelected: () => selection.widget,
+        select: (target) => selectWidgetWhole(selection, target),
         clear: () => {
-            selected = null;
+            if (selection.widget !== null)
+                selection.clear();
         },
-        isSelected: (path, start) => selected !== null &&
-            selected.sourceStart === start &&
-            pathsEqual(selected.paragraphPath, path)
+        followEdit: (path, editEnd, delta) => selection.followWidgetEdit(path, editEnd, delta),
+        isSelected: (path, start) => {
+            const widget = selection.widget;
+            return (widget !== null && widget.sourceStart === start && pathsEqual(widget.paragraphPath, path));
+        }
     };
 }

package/dist/components/kind-cue.svelte.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The kind cue: in a mode that hides markers, a keystroke that turns its block into another kind
+ * leaves the new kind's name at the block's corner for a moment and says it once to a screen
+ * reader, so the change has a visible cause. Only typed text reports here, never a command.
+ */
+import type { AnyBlockKind } from '../core/nodes';
+import type { DocumentView } from '../core/node-views';
+import { type PresentationMode } from '../presentation-mode';
+export interface KindCue {
+    /** Once `write` settles, cue the block at `path` if its shown kind differs from `before`. */
+    afterTypedWrite(write: Promise<unknown>, path: readonly number[], before: AnyBlockKind): Promise<void>;
+    /** The label the block at `path` shows, until its fade ends or the block there loses that name. */
+    labelAt(path: readonly number[]): string | undefined;
+    dismiss(path: readonly number[]): void;
+}
+export interface KindCueDeps {
+    getDoc: () => DocumentView;
+    getPresentationMode: () => PresentationMode;
+    announce: (label: string) => void;
+}
+export declare function createKindCue(deps: KindCueDeps): KindCue;

package/dist/components/kind-cue.svelte.js

@@ -0,0 +1,35 @@
+/**
+ * The kind cue: in a mode that hides markers, a keystroke that turns its block into another kind
+ * leaves the new kind's name at the block's corner for a moment and says it once to a screen
+ * reader, so the change has a visible cause. Only typed text reports here, never a command.
+ */
+import { SvelteMap } from 'svelte/reactivity';
+import { shownKind } from '../core/parsers/heading';
+import { blockAccessibleName } from '../a11y-strings';
+import { hidesMarkers } from '../presentation-mode';
+import { blockNodeAt } from '../tree-operations/node-primitives';
+export function createKindCue(deps) {
+    const labels = new SvelteMap();
+    const keyOf = (path) => path.join(',');
+    return {
+        async afterTypedWrite(write, path, before) {
+            await write;
+            // Source mode draws the markers that explain the change; reading mode cannot type.
+            if (!hidesMarkers(deps.getPresentationMode()))
+                return;
+            const after = blockNodeAt(deps.getDoc(), [...path]);
+            if (!after || shownKind(after) === before)
+                return;
+            const label = blockAccessibleName(after);
+            labels.set(keyOf(path), label);
+            deps.announce(label);
+        },
+        // Keyed by path, so the label shows only while the block there still carries that name.
+        labelAt(path) {
+            const label = labels.get(keyOf(path));
+            const node = label === undefined ? undefined : blockNodeAt(deps.getDoc(), [...path]);
+            return node && blockAccessibleName(node) === label ? label : undefined;
+        },
+        dismiss: (path) => void labels.delete(keyOf(path))
+    };
+}

package/dist/components/link-card/LinkCard.svelte

@@ -1,19 +1,15 @@
 <script lang="ts">
-	import { untrack } from 'svelte';
+	import { tick, untrack } from 'svelte';
 	import {
 		LINK_CARD_LABEL,
 		LINK_CARD_OPEN,
 		LINK_CARD_REMOVE,
 		LINK_CARD_URL
 	} from '../../a11y-strings';
+	import MenuIcon from '../menu/MenuIcon.svelte';
 
-	// Anchored chrome over one link construct. Enter commits; Escape is the host's, since it must
-	// also close a card the document still has the caret for.
-	//
-	// `role="dialog"` WITHOUT `aria-modal`: a click leaves the card beside a live caret and the
-	// document behind stays the user's to type in, which is what aria-modal would tell a screen
-	// reader is false. The trap engages on ENTRY (Mod+K, or focus reaching the field), where the
-	// claim is true, and Escape returns the caret it borrowed.
+	// The URL panel over one link. Enter commits; Escape is the host's. Not `aria-modal`: a
+	// clicked card sits beside a live caret, and its focus trap starts only once focus enters.
 	let {
 		url,
 		canWrite,
@@ -21,46 +17,50 @@
 		onCommit,
 		onOpenLink,
 		onRemove,
+		opensCard,
 		resolveHref
 	}: {
 		url: string;
 		/** Bumped by each keyboard entry; the field takes focus when it changes. */
 		focusEpoch: number;
-		/** False when the write seam declines this construct outright — a rung-claimed link, which
-		 *  no url makes writable. Enter then does nothing rather than silently dropping the edit. */
+		/** False when the write path refuses this construct outright: a link owned by an inline
+		 *  syntax handler. Enter then does nothing rather than silently dropping the edit. */
 		canWrite: boolean;
 		onCommit: (url: string) => void;
 		onOpenLink: (url: string, event: MouseEvent) => void;
-		/** Absent in create mode: there is no construct to remove until Enter mints one. */
+		/** Absent in create mode: there is no construct to remove until Enter writes one. */
 		onRemove?: () => void;
-		/** The render path's own href funnel — a consumer rewrite, then the scheme allowlist.
-		 *  Undefined is a blocked scheme, and Open is the sink that must not receive one. */
+		/** Whether a keypress is a chord the keymap binds to opening this card. */
+		opensCard: (e: KeyboardEvent) => boolean;
+		/** The href as the render path resolves it: a consumer rewrite, then the scheme
+		 *  allowlist. Undefined means a blocked scheme, which Open must never be handed. */
 		resolveHref: (url: string) => string | undefined;
 	} = $props();
 
 	let draft = $state(untrack(() => url));
-	// The card OPENS on a blocked link so the URL can be repaired, but may not hand that URL
-	// onward: `onLinkActivate` reaches a shell's own opener, and this is the only door into it
-	// carrying a URL the user typed rather than the document's. An empty draft resolves as a
-	// relative URL, so it declines too.
+	// Open hands a typed URL to the host's opener, so it gets the render path's scheme check;
+	// an empty draft would resolve as a relative URL, so it is refused too.
 	const openable = $derived(draft.trim() === '' ? undefined : resolveHref(draft));
 	let seed = $state(untrack(() => url));
 	let cardEl: HTMLDivElement | undefined = $state();
 	let urlInput: HTMLInputElement | undefined = $state();
-	// Starts at the click's zero rather than at the prop: a card MOUNTED by the chord has a
-	// non-zero epoch already, and seeding from the prop would read that as "nothing to do".
+	// Starts at the click's zero rather than at the prop: a card mounted by the chord already
+	// has a non-zero counter, and starting from the prop would read that as "nothing to do".
 	let focusedEpoch = 0;
 
 	$effect(() => {
 		if (focusEpoch === focusedEpoch) return;
 		focusedEpoch = focusEpoch;
-		urlInput?.focus();
-		urlInput?.select();
+		// After the tick, not now: focusing the field before the host has placed the card, while it
+		// still sits at the editor's origin, scrolls the viewport to the top of the document.
+		void tick().then(() => {
+			urlInput?.focus();
+			urlInput?.select();
+		});
 	});
 
-	// The card follows the document while it is open: an undo — or any write landing from outside
-	// this gesture — moves the destination past the draft, and Enter would put the old bytes back.
-	// The in-flight draft is discarded rather than a committed change reverted.
+	// A write from outside the card (an undo) discards the draft, or Enter would put the earlier
+	// bytes back.
 	$effect(() => {
 		if (url === seed) return;
 		seed = url;
@@ -91,12 +91,9 @@
 			stepTrap(e.shiftKey);
 			return;
 		}
-		// The entry chord re-asserts the card the focus is already inside, so it is a no-op here —
-		// but a consumed one: no surface the editor owns hands `Mod+K` back to the browser.
-		// CapsLock uppercases the key without a Shift modifier, which is still the plain chord.
-		if ((e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey && (e.key === 'k' || e.key === 'K')) {
-			e.preventDefault();
-		}
+		// The chord that opens the card does nothing inside it, but is still consumed so the
+		// browser never runs its own action for that chord.
+		if (opensCard(e)) e.preventDefault();
 	}
 
 	function handleUrlKeyDown(e: KeyboardEvent): void {
@@ -117,74 +114,128 @@
 	tabindex="-1"
 	onkeydown={handleKeyDown}
 >
-	<label>
-		<span>URL</span>
+	<label class="md-link-card-field">
+		<span class="md-link-card-caption">URL</span>
 		<input
 			bind:this={urlInput}
 			bind:value={draft}
 			type="text"
 			aria-label={LINK_CARD_URL}
+			placeholder="https://"
 			onkeydown={handleUrlKeyDown}
 		/>
 	</label>
 	<div class="md-link-card-actions">
 		<button
 			type="button"
+			class="md-link-card-btn"
+			aria-label={LINK_CARD_OPEN}
+			title={LINK_CARD_OPEN}
 			disabled={openable === undefined}
-			onclick={(e) => openable !== undefined && onOpenLink(openable, e)}>{LINK_CARD_OPEN}</button
+			onclick={(e) => openable !== undefined && onOpenLink(openable, e)}
 		>
+			<MenuIcon name="external-link" />
+		</button>
 		{#if onRemove}
-			<button type="button" onclick={onRemove}>{LINK_CARD_REMOVE}</button>
+			<button
+				type="button"
+				class="md-link-card-btn"
+				aria-label={LINK_CARD_REMOVE}
+				title={LINK_CARD_REMOVE}
+				onclick={onRemove}
+			>
+				<MenuIcon name="unlink" />
+			</button>
 		{/if}
 	</div>
 </div>
 
 <style>
+	/* Styled like the editor's menus (`.md-menu`, editor.css) and the image alt field, so the card
+	   reads as one of the editor's popovers rather than a form. */
 	.md-link-card {
 		position: absolute;
 		top: 0;
 		left: 0;
 		z-index: 100;
-		display: grid;
+		display: flex;
+		align-items: flex-end;
 		gap: 6px;
-		min-width: 280px;
-		padding: 8px;
-		border: 1px solid var(--color-ui-muted, #a4a4a4);
-		border-radius: 4px;
-		background: var(--color-bg-elevated, #2a2a2a);
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+		width: 300px;
+		padding: 8px 8px 8px 10px;
+		box-sizing: border-box;
+		background: var(--color-bg, #2c2c2a);
+		border: 1px solid var(--color-border, #3e3e3b);
+		border-radius: 8px;
+		box-shadow: var(--menu-shadow, 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35));
+		font-family: var(--font-ui, system-ui, sans-serif);
+		font-size: 13px;
+		line-height: 1.4;
+		color: var(--color-text-primary, #e8e8e5);
 	}
-	label {
-		display: grid;
-		grid-template-columns: 40px 1fr;
-		align-items: center;
-		gap: 8px;
+	.md-link-card-field {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+	}
+	.md-link-card-caption {
+		font-size: 10.5px;
+		font-weight: 600;
+		letter-spacing: 0.06em;
+		text-transform: uppercase;
+		color: var(--color-text-muted, #aaaaaa);
 	}
-	input {
-		padding: 4px 6px;
-		border: 1px solid var(--color-ui-muted, #a4a4a4);
-		border-radius: var(--radius-ui, 3px);
-		background: var(--color-surface, #2d3033);
-		color: var(--color-text-secondary, #eee);
+	/* Underlined, not boxed: a box inside the rounded card would read as a frame in a frame. */
+	.md-link-card-field input {
+		width: 100%;
+		box-sizing: border-box;
+		background: transparent;
+		color: var(--color-text-primary, #e8e8e5);
+		border: none;
+		border-bottom: 1px solid var(--color-border, #3e3e3b);
+		border-radius: 0;
+		padding: 3px 1px 5px;
 		font-family: inherit;
-		font-size: 12px;
+		font-size: 13px;
+		line-height: 1.4;
+		outline: none;
+		transition: border-color 120ms ease-out;
+	}
+	.md-link-card-field input:focus {
+		border-bottom-color: var(--color-accent, #567b67);
+	}
+	.md-link-card-field input::placeholder {
+		color: var(--color-text-muted, #aaaaaa);
 	}
 	.md-link-card-actions {
 		display: flex;
-		gap: 6px;
-		justify-content: flex-end;
+		gap: 2px;
+		/* The buttons sit level with the input's rule, not with the caption. */
+		padding-bottom: 1px;
 	}
-	button {
-		padding: 3px 8px;
-		border: 1px solid var(--color-ui-muted, #a4a4a4);
-		border-radius: var(--radius-ui, 3px);
+	.md-link-card-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 26px;
+		height: 26px;
+		padding: 0;
+		border: none;
+		border-radius: 6px;
 		background: transparent;
-		color: var(--color-text-secondary, #eee);
-		font: inherit;
-		font-size: 12px;
+		color: var(--color-ui-muted, #93938d);
 		cursor: pointer;
 	}
-	button:hover {
-		background: var(--color-ui-faint, rgba(255, 255, 255, 0.07));
+	.md-link-card-btn:hover:not(:disabled),
+	.md-link-card-btn:focus-visible {
+		background: var(--menu-item-hover, rgba(255, 255, 255, 0.07));
+		color: var(--color-text-primary, #e8e8e5);
+		outline: none;
+	}
+	.md-link-card-btn:disabled {
+		opacity: 0.4;
+		cursor: default;
 	}
 </style>

package/dist/components/link-card/LinkCard.svelte.d.ts

@@ -2,15 +2,17 @@ type $$ComponentProps = {
     url: string;
     /** Bumped by each keyboard entry; the field takes focus when it changes. */
     focusEpoch: number;
-    /** False when the write seam declines this construct outright — a rung-claimed link, which
-     *  no url makes writable. Enter then does nothing rather than silently dropping the edit. */
+    /** False when the write path refuses this construct outright: a link owned by an inline
+     *  syntax handler. Enter then does nothing rather than silently dropping the edit. */
     canWrite: boolean;
     onCommit: (url: string) => void;
     onOpenLink: (url: string, event: MouseEvent) => void;
-    /** Absent in create mode: there is no construct to remove until Enter mints one. */
+    /** Absent in create mode: there is no construct to remove until Enter writes one. */
     onRemove?: () => void;
-    /** The render path's own href funnel — a consumer rewrite, then the scheme allowlist.
-     *  Undefined is a blocked scheme, and Open is the sink that must not receive one. */
+    /** Whether a keypress is a chord the keymap binds to opening this card. */
+    opensCard: (e: KeyboardEvent) => boolean;
+    /** The href as the render path resolves it: a consumer rewrite, then the scheme
+     *  allowlist. Undefined means a blocked scheme, which Open must never be handed. */
     resolveHref: (url: string) => string | undefined;
 };
 declare const LinkCard: import("svelte").Component<$$ComponentProps, {}, "">;