@voithos-labs/aragonite 0.10.1

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

@@ -0,0 +1,49 @@
+import '../styles/editor.css';
+import type { BlockComponent } from '../block-component';
+import type { AnyBlockKind, Document } from '../core/nodes';
+import type { EditorProps, EditorDiagnostics } from '../editor-props';
+import type { EditorEvents } from '../editor-events';
+import type { EditorSelection } from '../selection/primitives';
+import { type SearchState } from '../search/search-state.svelte';
+import type { DecorationRegistry } from '../decorations/types';
+import { type EditorRects } from '../editor-rects';
+import { type KindEnablement } from '../schema/registry-view';
+type $$ComponentProps = EditorProps & {
+    __registryEnablement?: KindEnablement;
+};
+declare const Editor: import("svelte").Component<$$ComponentProps, {
+    getSource: () => string;
+    getBlockKindAt: (path: number[]) => AnyBlockKind | null;
+    getSelection: () => EditorSelection | null;
+    setSelection: (selection: EditorSelection) => Promise<boolean>;
+    placeCaretAtPoint: (x: number, y: number) => boolean;
+    insertMarkdown: (md: string) => boolean;
+    runCommand: (commandId: string) => boolean;
+    canRunCommand: (commandId: string) => boolean;
+    isCommandActive: (commandId: string) => boolean;
+    getEvents: () => EditorEvents;
+    getSearch: () => SearchState;
+    getDecorations: () => DecorationRegistry;
+    getRects: () => EditorRects;
+    reservedChords: () => ReadonlySet<string>;
+    claimsChord: (event: KeyboardEvent) => boolean;
+    getDiagnostics: () => EditorDiagnostics;
+    __test: {
+        getDocument: () => Document;
+        getContentVersion: () => number;
+        getBlockComponent: (path: number[]) => BlockComponent | null;
+        getUndoStack: () => {
+            undo: import("../undo/types").UndoEntry[];
+            redo: import("../undo/types").UndoEntry[];
+        };
+        getOperationsLog: () => import("../debug/operations-log").OperationsLog;
+        isCrossBlockActive: () => boolean;
+        getGapCaret: () => import("../selection/gap-caret").GapCaretPosition | null;
+        getDecorationEngine: () => import("../decorations/decoration-state.svelte").DecorationEngine;
+        getHeightOracle: () => import("../cursor/height-oracle").HeightOracle;
+        getWidthVersion: () => number;
+        setBlockRefSlot: (index: number, ref: BlockComponent | undefined) => void;
+    };
+}, "">;
+type Editor = ReturnType<typeof Editor>;
+export default Editor;

package/dist/components/GapCaret.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+	/**
+	 * The between-blocks caret's own surface: a zero-height proxy that takes DOM focus while the
+	 * gap is live. It lives in the BlockList, outside every block's surface, so it contributes
+	 * nothing to any block's textContent walk. Text and Enter mint a paragraph at the boundary;
+	 * every other input is refused at `beforeinput`.
+	 */
+	import { getContext } from 'svelte';
+	import type { BlockEditActions, FocusActions, HistoryActions } from '../action-contracts';
+	import { GAP_CARET_LABEL } from '../a11y-strings';
+	import {
+		EDITOR_DOC_KEY,
+		EDITOR_POLICIES_KEY,
+		EDITOR_SERVICES_KEY,
+		HISTORY_KEY,
+		type EditorDoc,
+		type EditorPolicies,
+		type EditorServices
+	} from '../editor-keys';
+	import { emitCommandError } from '../editor-events';
+	import { runGlobalChord } from '../schema/commands';
+	import { eventToChord } from '../schema/keybindings';
+	import { isReadingMode } from '../presentation-mode';
+
+	let {
+		index,
+		focusActions,
+		blockEdit
+	}: {
+		index: number;
+		focusActions: FocusActions | undefined;
+		blockEdit: BlockEditActions | undefined;
+	} = $props();
+
+	// Root-provided facets, read here rather than threaded through BlockList: only the
+	// scope-local action bundles depend on where this list sits.
+	const services = getContext<EditorServices | undefined>(EDITOR_SERVICES_KEY);
+	const selection = services?.selection;
+	const policies = getContext<EditorPolicies | undefined>(EDITOR_POLICIES_KEY);
+	const editorDoc = getContext<EditorDoc | undefined>(EDITOR_DOC_KEY);
+	const history = getContext<HistoryActions | undefined>(HISTORY_KEY);
+
+	let proxyEl: HTMLElement | undefined = $state();
+	let composing = false;
+
+	const isReading = $derived(isReadingMode(policies?.presentationMode));
+
+	// Rendering, not sequencing: the component exists only while it IS the live gap.
+	// Focusing the contenteditable seats a caret in it (Chromium); no manual range needed.
+	$effect(() => {
+		if (!proxyEl) return;
+		proxyEl.focus();
+	});
+
+	// The move that leaves must not be re-captured by the boundary it is leaving.
+	const EXIT = { skipGapStop: true } as const;
+
+	function leaveForward(): void {
+		void focusActions?.moveFocus(index, 'start', EXIT);
+	}
+
+	function leaveBackward(): void {
+		void focusActions?.moveFocus(index - 1, 'end', EXIT);
+	}
+
+	/** The mint's own `afterTick` focuses the new block, and that door ends the gap. */
+	function mint(text: string): void {
+		void blockEdit?.insertParagraph(index, text);
+	}
+
+	/**
+	 * Undo/redo and plugin globals resolve HERE, at the target: no block holds focus, and the
+	 * root's own arm answers only a caret with no focused element at all. Reading mode still
+	 * consumes the chord, or the browser's native history runs on the proxy.
+	 */
+	function handleGlobalChord(
+		event: KeyboardEvent,
+		deps: {
+			history: HistoryActions;
+			doc: EditorDoc;
+			events: EditorServices['events'];
+			activation: EditorServices['activePlugins'];
+		}
+	): boolean {
+		const chord = eventToChord(event);
+		if (!chord) return false;
+		const consumed = runGlobalChord(chord, policies?.keybindingOverrides(), {
+			isReading,
+			history: deps.history,
+			pluginEditor: deps.doc.pluginEditor,
+			activation: deps.activation,
+			onCommandError: (report) => emitCommandError(deps.events, report)
+		});
+		if (consumed) event.preventDefault();
+		return consumed;
+	}
+
+	function onKeyDown(event: KeyboardEvent): void {
+		if (history && editorDoc && services) {
+			const deps = {
+				history,
+				doc: editorDoc,
+				events: services.events,
+				activation: services.activePlugins
+			};
+			if (handleGlobalChord(event, deps)) return;
+		}
+		// Any other modified chord belongs to whatever the root or the host does with it.
+		if (event.ctrlKey || event.metaKey || event.altKey) return;
+		switch (event.key) {
+			case 'Enter':
+				event.preventDefault();
+				return mint('');
+			// Shift+Arrow is deliberately the plain arrow here: a single block selected whole
+			// is not a representable cross-block state (docs/design/editor.md § The gap caret).
+			case 'ArrowDown':
+			case 'ArrowRight':
+			case 'Delete':
+				event.preventDefault();
+				return leaveForward();
+			case 'ArrowUp':
+			case 'ArrowLeft':
+			case 'Backspace':
+				event.preventDefault();
+				return leaveBackward();
+			case 'Escape':
+				event.preventDefault();
+				return index === 0 ? leaveForward() : leaveBackward();
+		}
+	}
+
+	function onBeforeInput(event: InputEvent): void {
+		// The browser owns the proxy between compositionstart and compositionend (the editor's
+		// standing IME stance) — refusing here swallows the composition.
+		if (composing) return;
+		event.preventDefault();
+		if (event.inputType === 'insertText' && event.data) mint(event.data);
+	}
+
+	function onCompositionEnd(): void {
+		composing = false;
+		const composed = proxyEl?.textContent ?? '';
+		// The proxy is a caret host, never a surface a serializer reads: whatever the IME left
+		// belongs to the minted paragraph, and the proxy goes back to empty either way.
+		if (proxyEl) proxyEl.textContent = '';
+		if (composed) mint(composed);
+	}
+
+	function onFocusOut(event: FocusEvent): void {
+		const next = event.relatedTarget;
+		// A null relatedTarget is the window losing focus, which a native caret survives too.
+		// Anything landing inside the editor claimed the caret through a door of its own.
+		if (next === null) return;
+		if (next instanceof Node && editorDoc?.editorRoot()?.contains(next)) return;
+		selection?.clearGapCaret();
+	}
+</script>
+
+<div class="gap-caret" data-gap-caret>
+	<div class="gap-caret-line" aria-hidden="true"></div>
+	<div
+		bind:this={proxyEl}
+		class="gap-caret-proxy"
+		contenteditable={isReading ? 'false' : 'true'}
+		role="textbox"
+		tabindex="0"
+		aria-label={GAP_CARET_LABEL}
+		spellcheck="false"
+		onkeydown={onKeyDown}
+		onbeforeinput={onBeforeInput}
+		oncompositionstart={() => (composing = true)}
+		oncompositionend={onCompositionEnd}
+		onfocusout={onFocusOut}
+	></div>
+</div>
+
+<style>
+	/* Out of flow entirely: the boundary it marks must keep the layout it had without it. */
+	.gap-caret {
+		position: relative;
+		flex: 0 0 auto;
+		height: 0;
+		overflow: visible;
+	}
+	/* Centred on the boundary, so neither neighbour appears to own it. */
+	.gap-caret-line {
+		position: absolute;
+		top: -1px;
+		left: 0;
+		right: 0;
+		height: 2px;
+		background-color: var(--color-text-secondary, #d6d9e0);
+		border-radius: 1px;
+		pointer-events: none;
+		animation: gap-caret-blink 1s step-end infinite;
+	}
+	/**
+	 * Absolutely positioned, so the zero-height wrapper keeps the boundary's layout, and a
+	 * REAL box: Chromium fires no `beforeinput` on a zero-height editing host, which silently
+	 * costs the proxy every keystroke. Click-through, or the band would steal edge clicks
+	 * from both neighbours; the painted line is the caret, so this one never shows.
+	 */
+	.gap-caret-proxy {
+		position: absolute;
+		top: -0.6em;
+		left: 0;
+		right: 0;
+		height: 1.2em;
+		overflow: hidden;
+		outline: none;
+		pointer-events: none;
+		caret-color: transparent;
+	}
+
+	@keyframes gap-caret-blink {
+		50% {
+			opacity: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.gap-caret-line {
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { BlockEditActions, FocusActions } from '../action-contracts';
+type $$ComponentProps = {
+    index: number;
+    focusActions: FocusActions | undefined;
+    blockEdit: BlockEditActions | undefined;
+};
+declare const GapCaret: import("svelte").Component<$$ComponentProps, {}, "">;
+type GapCaret = ReturnType<typeof GapCaret>;
+export default GapCaret;

package/dist/components/SearchBar.svelte

@@ -0,0 +1,243 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import { EDITOR_SERVICES_KEY, type EditorServices } from '../editor-keys';
+	import {
+		SEARCH_CLOSE_LABEL,
+		SEARCH_CLOSE_TITLE,
+		SEARCH_FIND,
+		SEARCH_MATCH_CASE,
+		SEARCH_NEXT_LABEL,
+		SEARCH_NEXT_TITLE,
+		SEARCH_PREVIOUS_LABEL,
+		SEARCH_PREVIOUS_TITLE,
+		SEARCH_REGEX,
+		SEARCH_REPLACE,
+		SEARCH_TOGGLE_REPLACE,
+		SEARCH_WHOLE_WORD
+	} from '../a11y-strings';
+
+	// `replaceExpanded` is owned by Editor so the root Ctrl+H shortcut and the
+	// chevron share one source of truth; the chevron reports toggles back up.
+	let {
+		replaceExpanded = false,
+		onToggleReplace
+	}: {
+		replaceExpanded?: boolean;
+		onToggleReplace?: () => void;
+	} = $props();
+
+	const { search } = getContext<EditorServices>(EDITOR_SERVICES_KEY);
+
+	const OPTION_TOGGLES = [
+		{ key: 'caseSensitive', glyph: 'Aa', text: SEARCH_MATCH_CASE },
+		{ key: 'wholeWord', glyph: 'W', text: SEARCH_WHOLE_WORD },
+		{ key: 'regex', glyph: '.*', text: SEARCH_REGEX }
+	] as const;
+
+	let findInput = $state<HTMLInputElement>();
+	$effect(() => {
+		if (search.isOpen) findInput?.focus();
+	});
+
+	function onFindKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			e.shiftKey ? search.prev() : search.next();
+		} else if (e.key === 'Escape') {
+			e.preventDefault();
+			search.close();
+		}
+	}
+
+	function onReplaceKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			search.replaceCurrent();
+		} else if (e.key === 'Escape') {
+			e.preventDefault();
+			search.close();
+		}
+	}
+</script>
+
+{#if search.isOpen}
+	<div class="search-bar" role="search">
+		<div class="search-row">
+			<button
+				type="button"
+				class="search-chevron"
+				class:on={replaceExpanded}
+				title={SEARCH_TOGGLE_REPLACE}
+				aria-label={SEARCH_TOGGLE_REPLACE}
+				aria-expanded={replaceExpanded}
+				onclick={() => onToggleReplace?.()}>›</button
+			>
+			<input
+				bind:this={findInput}
+				class="search-input"
+				placeholder={SEARCH_FIND}
+				value={search.query}
+				oninput={(e) => search.setQuery(e.currentTarget.value)}
+				onkeydown={onFindKeydown}
+				aria-label={SEARCH_FIND}
+			/>
+			{#each OPTION_TOGGLES as toggle (toggle.key)}
+				<button
+					type="button"
+					class="search-tog"
+					class:on={search.options[toggle.key]}
+					title={toggle.text}
+					aria-label={toggle.text}
+					aria-pressed={search.options[toggle.key]}
+					onclick={() => search.setOptions({ [toggle.key]: !search.options[toggle.key] })}
+					>{toggle.glyph}</button
+				>
+			{/each}
+			<span class="search-count" class:error={!!search.error}>
+				{#if search.error}
+					{search.error}
+				{:else if search.isScanning}
+					Searching…
+				{:else if search.matches.length}
+					{search.activeIndex + 1} / {search.matches.length}
+				{:else if search.replacedCount != null}
+					{search.replacedCount} replaced
+				{:else}
+					No results
+				{/if}
+			</span>
+			<button
+				type="button"
+				class="search-nav"
+				title={SEARCH_PREVIOUS_TITLE}
+				aria-label={SEARCH_PREVIOUS_LABEL}
+				onclick={() => search.prev()}>‹</button
+			>
+			<button
+				type="button"
+				class="search-nav"
+				title={SEARCH_NEXT_TITLE}
+				aria-label={SEARCH_NEXT_LABEL}
+				onclick={() => search.next()}>›</button
+			>
+			<button
+				type="button"
+				class="search-x"
+				title={SEARCH_CLOSE_TITLE}
+				aria-label={SEARCH_CLOSE_LABEL}
+				onclick={() => search.close()}>✕</button
+			>
+		</div>
+		{#if replaceExpanded}
+			<div class="search-row">
+				<input
+					class="search-input"
+					placeholder={SEARCH_REPLACE}
+					value={search.replacement}
+					oninput={(e) => search.setReplacement(e.currentTarget.value)}
+					onkeydown={onReplaceKeydown}
+					aria-label={SEARCH_REPLACE}
+				/>
+				<button type="button" class="search-btn" onclick={() => search.replaceCurrent()}
+					>Replace</button
+				>
+				<button type="button" class="search-btn" onclick={() => search.replaceAll()}>All</button>
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.search-bar {
+		position: absolute;
+		top: 10px;
+		right: 10px;
+		/* Content-sized off the right edge, so without the cap a narrow host puts the bar's
+		   left half (the find field) off screen instead of shrinking it. */
+		max-width: calc(100% - 20px);
+		z-index: 5;
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		padding: 7px 8px;
+		border-radius: 7px;
+		background: var(--color-bg-elevated, #2a2c33);
+		border: 1px solid var(--color-border, #3d4047);
+		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+	}
+	.search-row {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 6px;
+	}
+	.search-input {
+		background: var(--color-surface, #1b1c21);
+		border: 1px solid var(--color-border, #44474f);
+		border-radius: 4px;
+		color: var(--color-text-secondary, #d6d9e0);
+		padding: 3px 7px;
+		height: 22px;
+		/* A floor, not a width: `min-width: auto` on a flex item is its intrinsic size, which
+		   is what stops the field shrinking before the row wraps. */
+		min-width: 6ch;
+	}
+	.search-tog,
+	.search-nav,
+	.search-x,
+	.search-btn,
+	.search-chevron {
+		color: var(--color-text-secondary, #d6d9e0);
+		background: transparent;
+		border: 1px solid var(--color-border, #44474f);
+		border-radius: var(--radius-ui, 3px);
+		cursor: pointer;
+	}
+	.search-tog {
+		font: 600 11px monospace;
+		padding: 1px 5px;
+	}
+	.search-tog.on,
+	.search-chevron.on {
+		color: var(--color-surface, #1e1f24);
+		background: var(--color-accent, #567b67);
+	}
+	.search-nav,
+	.search-x {
+		border-color: transparent;
+		padding: 1px 5px;
+		font-size: 13px;
+	}
+	.search-btn {
+		font-size: 11px;
+		padding: 2px 7px;
+	}
+	.search-chevron {
+		border-color: transparent;
+		padding: 1px 4px;
+		transition: transform 0.1s;
+	}
+	.search-chevron.on {
+		transform: rotate(90deg);
+	}
+	.search-count {
+		font-size: 11px;
+		white-space: nowrap;
+	}
+	.search-count.error {
+		color: var(--color-error, #e06c75);
+	}
+
+	/* A pointer with no hover is a thumb: the glyph buttons are ~16px boxes, under the WCAG
+	   2.5.8 minimum, and the row wraps rather than crowding once they grow. */
+	@media (pointer: coarse) {
+		.search-tog,
+		.search-nav,
+		.search-x,
+		.search-btn,
+		.search-chevron {
+			min-width: 24px;
+			min-height: 24px;
+		}
+	}
+</style>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    replaceExpanded?: boolean;
+    onToggleReplace?: () => void;
+};
+declare const SearchBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type SearchBar = ReturnType<typeof SearchBar>;
+export default SearchBar;

package/dist/components/SelectionOverlay.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import { SELECTION_END, type BlockComponent } from '../block-component';
+	import {
+		EDITOR_DOC_KEY,
+		EDITOR_SERVICES_KEY,
+		type EditorDoc,
+		type EditorServices
+	} from '../editor-keys';
+	import {
+		normalize,
+		classifyBlockForSelection,
+		charOffsetOf,
+		cellIndexOf,
+		type BlockSelectionClass
+	} from '../selection/primitives';
+	import { snapCrossBlockTableEndpoints } from '../selection/table-endpoint-snap';
+	import { wireOverlayRemeasure } from '../cursor/overlay-remeasure';
+
+	let {
+		path,
+		blockRef,
+		blockEl,
+		delegatesPainting = false,
+		containerPaintsRects = false
+	}: {
+		path: number[];
+		blockRef: BlockComponent | undefined;
+		blockEl: HTMLElement | null | undefined;
+		/** This container's children paint their own overlays, so it paints none. */
+		delegatesPainting?: boolean;
+		/** This container measures its own rects instead of delegating. Both are decided
+		 *  at BlockHost, which hands the same pair to DecorationOverlay. */
+		containerPaintsRects?: boolean;
+	} = $props();
+
+	// Optional, like every context BlockHost reads: a bare mount provides no shell,
+	// and every use below is written for absence. Destructuring these threw first.
+	const selection = getContext<EditorServices | undefined>(EDITOR_SERVICES_KEY)?.selection;
+	const editorDoc = getContext<EditorDoc | undefined>(EDITOR_DOC_KEY);
+	const getEditorRoot = editorDoc?.editorRoot;
+	const getDoc = editorDoc?.doc;
+
+	const classification = $derived.by<BlockSelectionClass>(() => {
+		if (delegatesPainting) return 'outside';
+		if (!selection?.isCustomRendered || !selection.anchor || !selection.focus) {
+			return 'outside';
+		}
+		return classifyBlockForSelection(path, {
+			anchor: selection.anchor,
+			focus: selection.focus
+		});
+	});
+
+	// 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(
+		classification === 'start' ||
+			classification === 'end' ||
+			(classification === 'single-block' && containerPaintsRects)
+	);
+
+	interface LocalRect {
+		left: number;
+		top: number;
+		width: number;
+		height: number;
+	}
+
+	/** Merge rects on the same visual line into a single rect to prevent double-highlight. */
+	function mergeRectsPerLine(rects: LocalRect[]): LocalRect[] {
+		if (rects.length <= 1) return rects;
+		const sorted = [...rects].sort((a, b) => a.top - b.top);
+		const merged: LocalRect[] = [];
+		let current = { ...sorted[0] };
+
+		for (let i = 1; i < sorted.length; i++) {
+			const r = sorted[i];
+			if (Math.abs(r.top - current.top) < 2) {
+				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);
+				const bottom = Math.max(current.top + current.height, r.top + r.height);
+				current = { left, top, width: right - left, height: bottom - top };
+			} else {
+				merged.push(current);
+				current = { ...r };
+			}
+		}
+		merged.push(current);
+		return merged;
+	}
+
+	let endpointRects: LocalRect[] = $state([]);
+
+	$effect(() => {
+		if (!paintsEndpoints) {
+			endpointRects = [];
+			return;
+		}
+		if (!blockRef?.measurePartialRects || !blockEl || !selection?.anchor || !selection?.focus) {
+			endpointRects = [];
+			return;
+		}
+
+		const ref = blockRef;
+		const el = blockEl;
+		const sel = selection;
+
+		function measure(): void {
+			if (!sel.anchor || !sel.focus || !ref.measurePartialRects) return;
+			const normalized = normalize({ anchor: sel.anchor, focus: sel.focus });
+			const doc = getDoc?.();
+			const { start, end } = doc
+				? snapCrossBlockTableEndpoints(doc, normalized.start, normalized.end)
+				: normalized;
+			const startOffset =
+				classification === 'end'
+					? 0
+					: start.cellCoordinate
+						? cellIndexOf(start, 'SelectionOverlay:start')
+						: charOffsetOf(start, 'SelectionOverlay:start');
+			// measurePartialRects paints [start, end) exclusive, so the +1 turning a
+			// snapped table end (inclusive last cell) into an exclusive whole-row bound
+			// belongs to the cell branch only.
+			const endOffset =
+				classification === 'start'
+					? SELECTION_END
+					: end.cellCoordinate
+						? cellIndexOf(end, 'SelectionOverlay:end') + 1
+						: charOffsetOf(end, 'SelectionOverlay:end');
+			const viewportRects: DOMRect[] = ref.measurePartialRects(startOffset, endOffset);
+			const blockRect = el.getBoundingClientRect();
+			endpointRects = mergeRectsPerLine(
+				viewportRects.map((r) => ({
+					left: r.left - blockRect.left,
+					top: r.top - blockRect.top,
+					width: r.width,
+					height: r.height
+				}))
+			);
+		}
+
+		const editorRoot = getEditorRoot?.() ?? null;
+		return wireOverlayRemeasure({ el, editorRoot, blockRef: ref, measure });
+	});
+</script>
+
+{#if classification === 'middle'}
+	<div class="selection-overlay selection-overlay-middle" contenteditable="false"></div>
+{:else if paintsEndpoints}
+	{#each endpointRects as rect, i (i)}
+		<div
+			class="selection-overlay selection-overlay-endpoint"
+			contenteditable="false"
+			style="left: {rect.left}px; top: {rect.top}px; width: {rect.width}px; height: {rect.height}px;"
+		></div>
+	{/each}
+{/if}
+
+<style>
+	.selection-overlay {
+		position: absolute;
+		pointer-events: none;
+		background-color: var(--selection-overlay-bg, rgba(100, 150, 255, 0.3));
+		z-index: 1;
+	}
+	.selection-overlay-middle {
+		inset: 0;
+	}
+</style>