@voithos-labs/aragonite 0.10.3 → 0.10.4

package/dist/a11y-strings.d.ts

@@ -26,6 +26,7 @@ export declare const CODE_COPIED_LABEL = "Code copied";
 export declare const CODE_MENU_LABEL = "Code block actions";
 export declare const CODE_RAIL_LABEL = "Code block controls";
 export declare const CODE_LANGUAGE_LIST = "Code block languages";
+export declare const SELECTION_TOOLBAR_LABEL = "Selection formatting";
 /** Chrome, not an announcement: the language chip's accessible name. */
 export declare function codeLanguageLabel(language: string): string;
 export declare const SEARCH_TOGGLE_REPLACE = "Toggle replace";

package/dist/a11y-strings.js

@@ -26,6 +26,7 @@ export const CODE_COPIED_LABEL = 'Code copied';
 export const CODE_MENU_LABEL = 'Code block actions';
 export const CODE_RAIL_LABEL = 'Code block controls';
 export const CODE_LANGUAGE_LIST = 'Code block languages';
+export const SELECTION_TOOLBAR_LABEL = 'Selection formatting';
 /** Chrome, not an announcement: the language chip's accessible name. */
 export function codeLanguageLabel(language) {
     return `Code language: ${language}`;

package/dist/components/BlockDragHandle.svelte

@@ -48,6 +48,8 @@
 		left: 0;
 		width: 100%;
 		height: 1.25rem;
+		/* the em line is the same first-line centre for engines without lh (Safari before 16.4) */
+		top: 0.75em;
 		top: 0.5lh;
 		transform: translateY(-50%);
 		display: flex;

package/dist/components/BlockHost.svelte

@@ -80,8 +80,8 @@
 
 	let descriptor = $derived(registryView.descriptor(node.kind));
 	let isContainer = $derived(descriptor.isContainer);
-	// Who paints this block's rects, decided ONCE here and handed to both overlays —
-	// duplicated, the two drift and a container paints over its own children. Delegation
+	// Who measures this block's rects, decided ONCE here and handed to both overlays —
+	// duplicated, the two drift and a container measures over its own children. Delegation
 	// needs children with hosts: a childless container and a grid have none.
 	let delegatesPainting = $derived(
 		isContainer && (node.children?.length ?? 0) > 0 && descriptor.containerContract !== 'grid'

package/dist/components/Editor.svelte

@@ -38,6 +38,9 @@
 	import { createDeadSpaceCaret } from '../selection/dead-space-caret';
 	import { resetForPointerDown } from '../selection/cross-block/pointer';
 	import { installDragListener } from '../selection/drag-pointer';
+	import { installMultiClickSelect } from '../selection/multi-click';
+	import { claimsPointerGesture } from '../selection/pointer-gesture';
+	import { installSelectionDrop } from '../selection/selection-drop';
 	import { createContentVersion } from '../reactivity/content-version.svelte';
 	import { useContainerWindowing } from '../reactivity/use-container-windowing.svelte';
 	import { refSlotsOver, replaceRefs, revealChildOrWait } from '../reactivity/publish-ref.svelte';
@@ -112,7 +115,6 @@
 		installWidthWatcher
 	} from './editor-root-geometry';
 	import {
-		installDoubleClickWordSelect,
 		installEditorBlurAnnouncer,
 		installModActiveTracker,
 		installSelectionChangeBridge,
@@ -146,6 +148,7 @@
 	import { bothEnable, createRegistryView, type KindEnablement } from '../schema/registry-view';
 	import BlockList from './BlockList.svelte';
 	import SearchBar from './SearchBar.svelte';
+	import SelectionToolbar from './menu/SelectionToolbar.svelte';
 	import ImageOverlayHost from './image/ImageOverlayHost.svelte';
 	import LinkCardHost from './link-card/LinkCardHost.svelte';
 	import { createLinkCardState } from './link-card/link-card-state.svelte';
@@ -176,6 +179,7 @@
 		blockDragHandles = true,
 		searchBar = true,
 		searchBarAnchor,
+		selectionToolbar = true,
 		keybindings,
 		theme = 'dark',
 		presentationMode = 'source',
@@ -717,6 +721,11 @@
 			// press and release targets meet at the root); with a range just painted, it is no
 			// click to answer.
 			if (!anchor) {
+				// A multi-click places no caret: the ladder painted its range over this press.
+				if (e.detail >= 2) {
+					marginDrag = false;
+					return;
+				}
 				const pressed = marginDrag;
 				const dragged =
 					pressed &&
@@ -761,6 +770,7 @@
 			'a, summary, [role="checkbox"], ' +
 			'.code-rail, .table-add-zone, .editor-tail, .md-menu, .block-drag-handle';
 		const dragStartsHere = (rootEl: HTMLElement, target: EventTarget | null): boolean => {
+			if (claimsPointerGesture(target)) return false;
 			if (deadSpaceCaret.isDeadSpaceTarget(rootEl, target)) return true;
 			if (!(target instanceof Element) || !rootEl.contains(target)) return false;
 			return target.closest(NOT_A_DRAG_START) === null;
@@ -771,6 +781,7 @@
 		// starts no selection of its own to fight it; `click` still fires for the caret placement.
 		let marginDrag = false;
 		let marginDown = { x: 0, y: 0 };
+		let marginSession: { dispose(): void } | null = null;
 		const startMarginDrag = (e: PointerEvent) => {
 			marginDrag = false;
 			marginDown = { x: e.clientX, y: e.clientY };
@@ -786,7 +797,7 @@
 				const component = getBlockComponent(anchor.path);
 				if (component?.startDragAtPoint?.(e.clientX, e.clientY, e)) return;
 			}
-			installDragListener(
+			marginSession = installDragListener(
 				{
 					editorRoot: root,
 					scrollContainer: getScrollHost() ?? root,
@@ -801,10 +812,38 @@
 		};
 		return removeAll(
 			onRoot(root, 'click', handleClick),
-			installDoubleClickWordSelect(root),
+			installMultiClickSelect({
+				editorRoot: root,
+				selection: selectionState,
+				getBlockElByPath,
+				getScrollContainer: () => getScrollHost() ?? root,
+				lifetimeSignal: lifetimeController.signal,
+				marginBlockAt: (target, x, y) =>
+					effectiveMode !== 'reading' && dragStartsHere(root, target)
+						? deadSpaceCaret.blockPathNearPoint(root, x, y)
+						: null
+			}),
+			installSelectionDrop({
+				editorRoot: root,
+				getDoc: () => doc,
+				controller,
+				coordinator: pasteCoordinator,
+				getPresentationMode: () => effectiveMode,
+				linkRef: linkRefView,
+				grammar: registryView.grammar,
+				activePlugins,
+				events,
+				isReadOnly: () => effectiveMode === 'reading'
+			}),
 			onRoot(root, 'pointerdown', startMarginDrag),
 			onRoot(root, 'mousedown', (e: MouseEvent) => {
 				deadSpaceCaret.notePress(root, e);
+				// The second press of a click run is the ladder's, which runs its own drag.
+				if (marginDrag && e.detail >= 2) {
+					marginSession?.dispose();
+					marginSession = null;
+					marginDrag = false;
+				}
 				if (marginDrag) e.preventDefault();
 			})
 		);
@@ -1845,6 +1884,20 @@
 			onClose={() => (blockMenu = null)}
 		/>
 	{/if}
+	{#if selectionToolbar && effectiveMode !== 'reading'}
+		<SelectionToolbar
+			editor={{
+				getSelection,
+				getRects,
+				getBlockKindAt,
+				runCommand,
+				canRunCommand,
+				isCommandActive,
+				getEvents
+			}}
+			root={editorEl}
+		/>
+	{/if}
 	<ImageOverlayHost
 		{widgetSelection}
 		{controller}

package/dist/components/SelectionOverlay.svelte

@@ -9,13 +9,13 @@
 	} from '../editor-keys';
 	import {
 		normalize,
+		blockPaintsWholeBox,
 		classifyBlockForSelection,
 		charOffsetOf,
 		cellIndexOf,
-		type BlockSelectionClass
+		type EditorSelection
 	} from '../selection/primitives';
 	import { snapCrossBlockTableEndpoints } from '../selection/table-endpoint-snap';
-	import { pathsEqual } from '../selection/path-math';
 	import { wireOverlayRemeasure } from '../cursor/overlay-remeasure';
 
 	let {
@@ -28,7 +28,7 @@
 		path: number[];
 		blockRef: BlockComponent | undefined;
 		blockEl: HTMLElement | null | undefined;
-		/** This container's children paint their own overlays, so it paints none. */
+		/** This container's children paint the range's endpoint rects, so it measures none. */
 		delegatesPainting?: boolean;
 		/** This container measures its own rects instead of delegating. Both are decided
 		 *  at BlockHost, which hands the same pair to DecorationOverlay. */
@@ -42,32 +42,26 @@
 	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
-		});
+	const range = $derived.by<EditorSelection | null>(() => {
+		if (!selection?.isCustomRendered || !selection.anchor || !selection.focus) return null;
+		return { anchor: selection.anchor, focus: selection.focus };
 	});
 
-	// 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);
-	});
+	const classification = $derived(range ? classifyBlockForSelection(path, range) : 'outside');
+
+	// Delegation-blind on purpose: a block the range holds whole paints one box over everything it
+	// renders, chrome included, and the seam already keeps its children from painting under it.
+	const paintsWholeBox = $derived(
+		range !== null && blockPaintsWholeBox(path, range, selection?.wholeUnitPath ?? null)
+	);
 
 	// 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)
+		!delegatesPainting &&
+			(classification === 'start' ||
+				classification === 'end' ||
+				(classification === 'single-block' && containerPaintsRects))
 	);
 
 	interface LocalRect {

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

@@ -3,7 +3,7 @@ type $$ComponentProps = {
     path: number[];
     blockRef: BlockComponent | undefined;
     blockEl: HTMLElement | null | undefined;
-    /** This container's children paint their own overlays, so it paints none. */
+    /** This container's children paint the range's endpoint rects, so it measures none. */
     delegatesPainting?: boolean;
     /** This container measures its own rects instead of delegating. Both are decided
      *  at BlockHost, which hands the same pair to DecorationOverlay. */

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

@@ -10,7 +10,7 @@
 		codeLanguageLabel
 	} from '../../../a11y-strings';
 	import type { CodeMenuItem } from '../../../editor-keys';
-	import { listLanguages } from './code-languages';
+	import { getLanguageAliases, getLanguageGrammar, listLanguages } from './code-languages';
 
 	// The chrome for the modes that paint no fence: the language door plus whatever action
 	// affordances the host has earned by installing a hook. Drafts live here and only a
@@ -49,15 +49,12 @@
 
 	let editing = $state(false);
 	let draft = $state('');
-	// The draft SEEDS with the current language, so filtering on it from the start would open
-	// the picker onto a list of one. Filtering waits for a keystroke; until then the full list
-	// shows with the current language highlighted, which is also what Enter would re-commit.
+	// Filtering waits for a keystroke: the field opens empty, and until then the whole list
+	// shows with the block's own language leading it, which is what a bare Enter re-commits.
 	let filtering = $state(false);
-	// Whether the LIST is what Enter should take. Until the user types or arrows, it is not:
-	// the highlight is only a where-you-stand marker, and a language the registry does not
-	// carry (an unregistered grammar, or a bare mount that registered none) would otherwise
-	// have no entry to seat on, so a bare Enter would rewrite it to the list's first row.
 	let activeIndex = $state(0);
+	/** The user moved the highlight, so the row it sits on outranks whatever they typed. */
+	let highlightMoved = false;
 	let copied = $state(false);
 	let menuOpen = $state(false);
 	let openMenuItems = $state<readonly CodeMenuItem[]>([]);
@@ -77,18 +74,31 @@
 		const all = ['text', ...listLanguages().filter((name) => name !== 'text')];
 		const needle = filtering ? draft.trim().toLowerCase() : '';
 		if (needle.length > 0) {
-			const starts = all.filter((name) => name.startsWith(needle));
-			const contains = all.filter((name) => !name.startsWith(needle) && name.includes(needle));
+			// An alias is a search key, never a row of its own: `rs` finds `rust`, and the list
+			// still carries one entry per language.
+			const spellings = (name: string) => [name, ...getLanguageAliases(name)];
+			const starts = all.filter((name) => spellings(name).some((s) => s.startsWith(needle)));
+			const seated = new Set(starts);
+			const contains = all.filter(
+				(name) => !seated.has(name) && spellings(name).some((s) => s.includes(needle))
+			);
 			return [...starts, ...contains];
 		}
-		// Unfiltered, the block's own language leads. This menu is ours to order, so the row
-		// that matters goes where the eye already is rather than somewhere the list has to be
-		// scrolled to — which is why nothing here scrolls itself on open.
+		// Unfiltered, the block's own language leads, in the spelling the fence uses — so the
+		// row that matters is where the eye already is, and its canonical twin is not below it.
 		const current = language;
-		const rest = all.filter((name) => name !== current);
-		return all.includes(current) ? [current, ...rest] : [current, ...rest];
+		const rest = all.filter((name) => name !== current && !isCurrentLanguage(name));
+		return [current, ...rest];
 	});
 
+	/** One language in two spellings is still the block's own, so the mark comparing them asks
+	 *  the registry rather than the text. */
+	function isCurrentLanguage(name: string): boolean {
+		const canonical = (spelling: string) =>
+			getLanguageGrammar(spelling)?.name ?? spelling.toLowerCase();
+		return canonical(name) === canonical(language);
+	}
+
 	// The highlight cannot outrun a filter that shortened the list under it.
 	$effect(() => {
 		if (activeIndex >= suggestions.length) activeIndex = 0;
@@ -107,6 +117,7 @@
 		if (!editable) return;
 		draft = '';
 		filtering = false;
+		highlightMoved = false;
 		menuOpen = false;
 		editing = true;
 		// Row 0 is the block's own language (see `suggestions`), so the highlight starts where
@@ -148,22 +159,25 @@
 		if (e.isComposing) return;
 		if (e.key === 'Enter') {
 			e.preventDefault();
-			// The highlighted row is what Enter takes once the user has engaged the list; the
-			// raw draft stands otherwise, and whenever the filter matched nothing, so an
-			// unregistered language survives both opening the field and typing it in.
-			// The highlighted row wins; a typed string the list never matched still commits, so
-			// an unregistered language stays authorable.
-			commit(suggestions[activeIndex] ?? (draft.trim() === '' ? language : draft));
+			// A spelling the registry resolves is a name, not a query: it commits as typed, so
+			// `js` survives a picker whose rows are canonical. A moved highlight takes the row.
+			const typed = draft.trim();
+			const namesLanguage = !highlightMoved && typed !== '' && getLanguageGrammar(typed) !== null;
+			commit(
+				namesLanguage ? typed : (suggestions[activeIndex] ?? (typed === '' ? language : typed))
+			);
 		} else if (e.key === 'Escape') {
 			e.preventDefault();
 			close();
 			onCancel(true);
 		} else if (e.key === 'ArrowDown') {
 			e.preventDefault();
+			highlightMoved = true;
 			activeIndex = suggestions.length === 0 ? 0 : (activeIndex + 1) % suggestions.length;
 			scrollActiveIntoView();
 		} else if (e.key === 'ArrowUp') {
 			e.preventDefault();
+			highlightMoved = true;
 			activeIndex =
 				suggestions.length === 0 ? 0 : (activeIndex - 1 + suggestions.length) % suggestions.length;
 			scrollActiveIntoView();
@@ -431,6 +445,7 @@
 				placeholder="Search for a language…"
 				oninput={() => {
 					filtering = true;
+					highlightMoved = false;
 					activeIndex = 0;
 				}}
 				onkeydown={onFieldKeyDown}
@@ -444,10 +459,13 @@
 						<button
 							type="button"
 							role="option"
-							aria-selected={name === language}
+							aria-selected={isCurrentLanguage(name)}
 							data-active={i === activeIndex}
 							tabindex="-1"
-							onmouseenter={() => (activeIndex = i)}
+							onmouseenter={() => {
+								highlightMoved = true;
+								activeIndex = i;
+							}}
 							onmousedown={(e) => {
 								// mousedown, not click: the field's blur would otherwise cancel the edit
 								// before a click ever landed.
@@ -456,7 +474,7 @@
 							}}
 						>
 							<span class="code-lang-name">{name}</span>
-							{#if name === language}
+							{#if isCurrentLanguage(name)}
 								<span class="code-lang-check">
 									{@render icon('<path d="M20 6 9 17l-5-5"/>')}
 								</span>

package/dist/components/blocks/code/code-bootstrap.js

@@ -24,6 +24,12 @@ import ruby from 'highlight.js/lib/languages/ruby';
 import markdown from 'highlight.js/lib/languages/markdown';
 import diff from 'highlight.js/lib/languages/diff';
 import latex from 'highlight.js/lib/languages/latex';
+import csharp from 'highlight.js/lib/languages/csharp';
+import kotlin from 'highlight.js/lib/languages/kotlin';
+import swift from 'highlight.js/lib/languages/swift';
+import php from 'highlight.js/lib/languages/php';
+import powershell from 'highlight.js/lib/languages/powershell';
+import dockerfile from 'highlight.js/lib/languages/dockerfile';
 let booted = false;
 export function bootstrapCodeLanguages() {
     if (booted)
@@ -47,6 +53,12 @@ export function bootstrapCodeLanguages() {
     registerLanguage('markdown', markdown, ['md']);
     registerLanguage('diff', diff);
     registerLanguage('latex', latex, ['tex']);
+    registerLanguage('csharp', csharp, ['cs', 'c#']);
+    registerLanguage('kotlin', kotlin, ['kt']);
+    registerLanguage('swift', swift);
+    registerLanguage('php', php);
+    registerLanguage('powershell', powershell, ['ps1']);
+    registerLanguage('dockerfile', dockerfile, ['docker']);
     registerPasteSurface(codePasteSurface);
     registerCodeContextActions();
 }

package/dist/components/blocks/code/code-languages.d.ts

@@ -1,6 +1,7 @@
 /**
  * Language registry for code-block tokenization. Nothing outside this directory
  * imports highlight.js directly; static vs. dynamic loading is a policy on top.
+ * Aliases fold to their canonical name here, so no caller carries its own table.
  */
 import type { LanguageFn } from 'highlight.js';
 export interface LanguageGrammar {
@@ -11,11 +12,10 @@ export interface LanguageGrammar {
 export declare function registerLanguage(name: string, definition: LanguageFn, aliasList?: readonly string[]): void;
 /** Info strings with trailing attributes (`js {1-3}`) resolve on the first token. */
 export declare function getLanguageGrammar(infoString: string): LanguageGrammar | null;
-/**
- * Every registered grammar name, plus every alias, sorted — what the language picker
- * offers. Aliases are listed as their own entries: a user typing `js` should find it
- * rather than having to know it resolves to `javascript`.
- */
+/** Every registered language once, under its canonical name, sorted — the picker's rows. */
 export declare function listLanguages(): string[];
+/** The alternate spellings a language answers to, from any spelling of it — a picker's filter
+ *  matches `rs` to `rust` without a table of its own. */
+export declare function getLanguageAliases(name: string): readonly string[];
 /** Test-only: clear all registered languages. */
 export declare function __resetRegistryForTests(): void;

package/dist/components/blocks/code/code-languages.js

@@ -1,6 +1,7 @@
 /**
  * Language registry for code-block tokenization. Nothing outside this directory
  * imports highlight.js directly; static vs. dynamic loading is a policy on top.
+ * Aliases fold to their canonical name here, so no caller carries its own table.
  */
 const grammars = new Map();
 const aliases = new Map();
@@ -14,25 +15,32 @@ export function registerLanguage(name, definition, aliasList = []) {
         aliases.set(alias.toLowerCase(), key);
     }
 }
+/** The fold: any spelling of a language to the one name it is registered under. A name of its
+ *  own beats another language's alias, so no grammar is shadowed by somebody's nickname. */
+function canonicalName(spelling) {
+    const key = spelling.toLowerCase();
+    if (grammars.has(key))
+        return key;
+    return aliases.get(key) ?? key;
+}
 /** Info strings with trailing attributes (`js {1-3}`) resolve on the first token. */
 export function getLanguageGrammar(infoString) {
     const trimmed = infoString.trim();
     if (trimmed.length === 0)
         return null;
-    const firstToken = trimmed.split(/\s+/)[0].toLowerCase();
-    const resolvedName = aliases.get(firstToken) ?? firstToken;
-    return grammars.get(resolvedName) ?? null;
+    return grammars.get(canonicalName(trimmed.split(/\s+/)[0])) ?? null;
 }
-/**
- * Every registered grammar name, plus every alias, sorted — what the language picker
- * offers. Aliases are listed as their own entries: a user typing `js` should find it
- * rather than having to know it resolves to `javascript`.
- */
+/** Every registered language once, under its canonical name, sorted — the picker's rows. */
 export function listLanguages() {
-    const names = new Set(grammars.keys());
-    for (const alias of aliases.keys())
-        names.add(alias);
-    return [...names].sort();
+    return [...grammars.keys()].sort();
+}
+/** The alternate spellings a language answers to, from any spelling of it — a picker's filter
+ *  matches `rs` to `rust` without a table of its own. */
+export function getLanguageAliases(name) {
+    const key = canonicalName(name);
+    if (!grammars.has(key))
+        return [];
+    return [...aliases].filter(([, target]) => target === key).map(([alias]) => alias);
 }
 /** Test-only: clear all registered languages. */
 export function __resetRegistryForTests() {

package/dist/components/blocks/editable-leaf.d.ts

@@ -52,9 +52,9 @@ export interface EditableLeafDeps {
     onSourceEdit?(text: string): void;
     /**
      * A source that is only its own chrome (a `$$$$` with no body line), completed to the shape
-     * a caret can sit in, with where the caret goes. Applied as the source is revealed, so the
-     * block the user just entered is one they can type into and delete; null leaves the bytes
-     * alone. The edit is the reveal's own, committed on blur like any other.
+     * a caret can sit in, with where the caret goes. Applied as the source is revealed AND after
+     * any edit that empties it, so the block is one the user can type into and delete however it
+     * got there; null leaves the bytes alone. The edit is the reveal's own, committed on blur.
      */
     completeBareSource?(text: string): {
         text: string;

package/dist/components/blocks/editable-leaf.js

@@ -325,11 +325,15 @@ export function createEditableLeaf(deps) {
         const keystroke = end - start <= 1 && insert.length <= 1 && insert !== '\n';
         if (deps.renderSource)
             recordSourceEdit(text, getCursorOffset(el) ?? start, keystroke);
-        const next = text.slice(0, start) + insert + text.slice(end);
+        const spliced = text.slice(0, start) + insert + text.slice(end);
+        // An edit that empties the body leaves the same chrome-only source a bare block arrives
+        // as, so the edit door owes the completion the reveal door applies.
+        const completed = deps.completeBareSource?.(spliced) ?? null;
+        const next = completed?.text ?? spliced;
         paintSource(el, next);
         deps.onSourceEdit?.(next);
         preEditOffset = start;
-        setCursorOffset(el, asDomTextOffset(start + insert.length));
+        setCursorOffset(el, asDomTextOffset(completed?.caret ?? start + insert.length));
         // Armed once the edit has settled, so the window measures the gap the user leaves.
         if (deps.renderSource && keystroke)
             sourceBatch.armPause();

package/dist/components/blocks/list/ListBlock.svelte

@@ -147,6 +147,7 @@
 			node={item}
 			index={absoluteIndex}
 			myPath={[...myPath, absoluteIndex]}
+			itemCount={(node.children ?? []).length}
 			slots={listState.refSlots}
 		/>
 	{/each}

package/dist/components/blocks/list/ListItemBlock.svelte

@@ -39,16 +39,20 @@
 	import { dispatchKindCommand } from '../../../schema/block-commands';
 	import type { AnyCommandId } from '../../../schema/command-id';
 	import BlockDragHandle from '../../BlockDragHandle.svelte';
+	import { showsListItemDragHandle } from '../../drag-handle';
 
 	let {
 		node,
 		index,
 		myPath = [],
+		itemCount,
 		slots
 	}: {
 		node: NodeView;
 		index: number;
 		myPath?: number[];
+		/** How many items the enclosing list holds; a lone item has no sibling to reorder past. */
+		itemCount: number;
 		slots?: RefSlots<BlockComponent>;
 	} = $props();
 
@@ -67,6 +71,10 @@
 	// $derived, not a mount-time snapshot: a runtime prop toggle must reach blocks
 	// that window in and out after the change, not just those mounted at mount.
 	const dragHandles = $derived(getDragHandles?.() ?? false);
+	// The grip is the only pointer road into a reorder, and a reorder needs a sibling: a lone
+	// item stays a reorder host (a dragged sibling never arrives, but the class costs nothing)
+	// and simply shows nothing to grab.
+	const showsHandle = $derived(showsListItemDragHandle(itemCount, dragHandles));
 	const presentationMode = $derived(getPresentationMode?.() ?? 'source');
 	const readOnly = $derived(presentationMode === 'reading');
 
@@ -260,7 +268,7 @@
 <div
 	class="list-item-block"
 	class:reorder-host={dragHandles}
-	class:handle-host={dragHandles}
+	class:handle-host={showsHandle}
 	data-task-checked={taskCheckedAttr}
 	data-list-marker={presentationMarkerKind}
 	bind:this={boxEl}
@@ -277,8 +285,9 @@
 		/>
 	</div>
 	<!-- A list item IS a reorder unit; its inner content BlockList passes the
-		 default reorderable={false}, so the paragraph inside gets no handle. -->
-	{#if dragHandles}
+		 default reorderable={false}, so the paragraph inside gets no handle. A lone item
+		 renders none either: its drag is list-scoped and there is no sibling to pass. -->
+	{#if showsHandle}
 		<BlockDragHandle />
 	{/if}
 </div>

package/dist/components/blocks/list/ListItemBlock.svelte.d.ts

@@ -5,6 +5,8 @@ type $$ComponentProps = {
     node: NodeView;
     index: number;
     myPath?: number[];
+    /** How many items the enclosing list holds; a lone item has no sibling to reorder past. */
+    itemCount: number;
     slots?: RefSlots<BlockComponent>;
 };
 declare const ListItemBlock: import("svelte").Component<$$ComponentProps, {

package/dist/components/blocks/text/click-snap-guard.d.ts

@@ -2,6 +2,9 @@
 /** Caret in a real text node the reader can see: the native caret renders there, so the
  *  synthetic indicator stands down. Hidden marker text renders nothing, so it does not count. */
 export declare function caretIsInTextContent(el: HTMLElement, sel: Selection | null): boolean;
+/** A ranged selection this surface holds — the click ladder's rungs, a shift-click, a
+ *  drag-select. It is the gesture's own paint, so a click-time caret seat stands down for it. */
+export declare function surfaceHoldsRange(el: HTMLElement, sel: Selection | null): boolean;
 /** Ctrl/meta/alt held — a platform command, never an edit of the byte beside the caret. */
 export declare function hasModifier(e: KeyboardEvent): boolean;
 /** A typed character: no modifier chord, one code point. A chord is a command instead. */

package/dist/components/blocks/text/click-snap-guard.js

@@ -9,6 +9,14 @@ export function caretIsInTextContent(el, sel) {
     const node = sel.getRangeAt(0).startContainer;
     return node.nodeType === Node.TEXT_NODE && el.contains(node) && !isHiddenMarkerText(node, el);
 }
+/** A ranged selection this surface holds — the click ladder's rungs, a shift-click, a
+ *  drag-select. It is the gesture's own paint, so a click-time caret seat stands down for it. */
+export function surfaceHoldsRange(el, sel) {
+    if (!sel || sel.isCollapsed || sel.rangeCount === 0)
+        return false;
+    const range = sel.getRangeAt(0);
+    return el.contains(range.startContainer) || el.contains(range.endContainer);
+}
 /** Ctrl/meta/alt held — a platform command, never an edit of the byte beside the caret. */
 export function hasModifier(e) {
     return e.ctrlKey || e.metaKey || e.altKey;