@voithos-labs/aragonite 0.10.3 → 0.10.7

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

@@ -1,31 +1,28 @@
 /**
- * Shared editable-surface plumbing for the core contenteditable blocks (TextEditableBlock,
- * CodeBlock, TableCellBlock) and the `editable-leaf` seam: cross-block wiring, the
- * SharedKeydownContext, the BlockComponent surface methods, the input/composition + clipboard
- * skeletons. Each consumer supplies a CursorBackend for its own coordinate system plus the input
- * commit; mutable block state crosses the seam as live thunks, never as snapshots.
+ * What every contenteditable block and the `editable-leaf` factory share: cross-block wiring,
+ * the shared keydown context, the BlockComponent caret methods, input, composition and clipboard
+ * handling. Each block supplies a CursorBackend for its own offsets plus its input commit; state
+ * that changes is passed as functions, never as captured values.
  */
 import { tick } from 'svelte';
 import { CURSOR_EXACT_START, CURSOR_START } from '../../block-component';
 import { emitClipboardError } from '../../editor-events';
-import { placeCaret } from '../../selection/caret-doors';
-import { asEditorX, asRawOffset, toClampedRawOffset, toDomTextOffset } from '../../cursor/coordinate-spaces';
+import { blockAccessibleName } from '../../a11y-strings';
+import { placeCaret, selectInBlock } from '../../selection/caret-doors';
+import { asEditorX, asRawOffset } from '../../cursor/coordinate-spaces';
 import { findOffsetNearestX } from '../../cursor/sticky-measure';
 import { measurePartialRectsInContentEditable } from '../../cursor/overlay-rects';
 import { normalizeLineEndings } from '../../core/lines';
 import { createCrossBlockHandlers } from '../../selection/cross-block/dispatch';
 import { writeCrossBlockCopy, writeCrossBlockCut } from '../../selection/cross-block/clipboard';
 import { createImagePasteArm } from '../paste-image-arm';
-import { clampToLandableRaw, revealsNoMarkers } from '../../cursor/widget-offset';
+import { rawOfWalkOffset, revealsNoMarkers, selectRawRange, walkOffsetOfRaw } from '../../cursor/widget-offset';
 import { isInteractionTraceEnabled, traceCompositionEnd, traceCompositionStart, traceKeydownVerdict } from '../../debug/interaction-trace';
 import { assertInvariant } from '../../assert';
 import { checkCompositionEndPaired } from '../../invariants/inline-transitions';
 // ── Keydown verdict ─────────────────────────────────────────────────────────
-/**
- * Binds a surface's keydown handler so the interaction trace records ONE verdict per event,
- * after the handler's own await chain settles. That record is the e2e harness's only positive
- * signal that a gesture which must change nothing has finished. Disabled, one boolean read.
- */
+/** Records one trace decision per keydown once the handler's awaits finish: the e2e harness's
+ *  only sign that a gesture which must change nothing is done. Disabled, one boolean read. */
 export function withKeydownVerdict(handle) {
     return (e) => {
         if (!isInteractionTraceEnabled()) {
@@ -35,11 +32,20 @@ export function withKeydownVerdict(handle) {
         void handle(e).then(() => traceKeydownVerdict(e.key, e.defaultPrevented));
     };
 }
-/**
- * Guarded pending-caret restore. Applies only while `el` still holds focus, so a blur
- * between arming the restore and the render drops it instead of yanking the global
- * selection back. Callers clear their pending field unconditionally regardless.
- */
+/** The role is `combobox` only while inline menu rows show: `textbox` carries no
+ *  `aria-expanded`, so a screen reader would hear nothing about the list. */
+export function editableSurfaceAttributes(node, combobox) {
+    return {
+        role: combobox ? 'combobox' : 'textbox',
+        'aria-label': blockAccessibleName(node),
+        'aria-expanded': combobox ? 'true' : undefined,
+        'aria-controls': combobox?.listboxId,
+        'aria-activedescendant': combobox?.activeOptionId,
+        'aria-autocomplete': combobox ? 'list' : undefined
+    };
+}
+/** Applies `pending` only while `el` still holds focus, so a blur before the render drops it
+ *  rather than pulling the selection back. The caller clears its pending field either way. */
 export function consumePendingRestore(el, pending, apply) {
     if (pending === null)
         return false;
@@ -52,30 +58,24 @@ export function createEditableSurface(deps) {
     const crossBlock = createCrossBlockHandlers({
         getEl: () => deps.getEl(),
         getMyPath: deps.getMyPath,
-        getIndex: deps.getIndex,
         selection: deps.selection,
         getDoc: deps.getDoc,
         getBlockElByPath: deps.getBlockElByPath,
-        revealPath: deps.focusActions.revealPath,
+        caretLanding: deps.caretLanding,
+        revealPath: (path) => deps.caretLanding.mount(path),
         getEditorRoot: deps.getEditorRoot,
         getScrollHost: deps.getScrollHost,
+        scrollOwner: deps.scrollOwner,
         getEditorLifetime: deps.getEditorLifetime,
-        stickyColumn: deps.stickyColumn,
-        edgeAffinity: deps.edgeAffinity,
+        caretMemory: deps.caretMemory,
         blockEdit: deps.blockEdit,
         controller: deps.controller,
-        history: deps.history,
-        pluginEditor: deps.pluginEditor,
-        getPresentationMode: deps.getPresentationMode,
-        linkRef: deps.linkRef,
-        onCommandError: deps.onCommandError,
-        crossBlockCommands: deps.crossBlockCommands,
-        getKeybindingOverrides: deps.getKeybindingOverrides,
+        reading: deps.reading,
+        commands: deps.commands,
         pasteCoordinator: deps.pasteCoordinator,
-        grammar: deps.grammar,
         activePlugins: deps.activePlugins,
         events: deps.events,
-        getCursorOffset: () => deps.backend.getRaw(),
+        selectedWidget: deps.selectedWidget,
         afterReactivity: () => tick()
     });
     const sharedCtx = {
@@ -83,53 +83,52 @@ export function createEditableSurface(deps) {
         getCursorOffset: () => deps.backend.getRaw(),
         getFocusOffset: deps.getFocusOffset,
         getTextLen: deps.getTextLen,
-        getAmbientLength: deps.getAmbientLength,
         getMyPath: deps.getMyPath,
         getIndex: deps.getIndex,
         crossBlock,
         selection: deps.selection,
-        stickyColumn: deps.stickyColumn,
-        edgeAffinity: deps.edgeAffinity,
+        caretMemory: deps.caretMemory,
         history: deps.history,
         focus: deps.focusActions,
         getDoc: deps.getDoc,
-        getBlockElByPath: deps.getBlockElByPath,
-        activePlugins: deps.activePlugins
+        scrollOwner: deps.scrollOwner,
+        commands: deps.commands,
+        reading: deps.reading
     };
-    // ── BlockComponent surface ────────────────────────────────────────────────
-    /**
-     * Every caret door lands here, so every offset — sentinel or numeric — clamps into the landable
-     * range: a seat behind a hidden marker run is a position no arrow walk produces, where the next
-     * byte joins a construct the arrival was outside of (live-mode.md § 4.2). Where the markers
-     * paint, the clamp is identity; CURSOR_EXACT_START is the one exception.
-     */
+    // ── BlockComponent methods ────────────────────────────────────────────────
+    /** Every caret placement from outside the block comes here, so offsets clamp to where a caret
+     *  can sit (`docs/design/live-mode.md` § 4.2 Typing at a hidden edge). */
     function parkCaret(offset) {
         const el = deps.getEl();
         if (!el)
             return;
-        // `preventScroll`: seating a caret must not move the page — the reveal path scrolls when a
-        // target is off-screen; an implicit focus scroll jumped the document on every table edit.
+        // Placing a caret never scrolls; the caller that brings an off-screen target into view
+        // does that itself.
         el.focus({ preventScroll: true });
-        if (offset === CURSOR_EXACT_START) {
-            deps.backend.setRaw(asRawOffset(0));
+        const landed = deps.clampLanding?.(offset) ?? offset;
+        if (landed === CURSOR_EXACT_START) {
+            deps.backend.setRaw(asRawOffset(0), { clamp: 'exact' });
             return;
         }
-        const requested = offset === CURSOR_START ? 0 : Math.max(0, offset);
-        deps.backend.setRaw(asRawOffset(clampToLandableRaw(el, requested, deps.getAmbientLength())));
+        const requested = landed === CURSOR_START ? 0 : Math.max(0, landed);
+        deps.backend.setRaw(asRawOffset(requested), { clamp: 'reachable' });
     }
     const focus = placeCaret(deps.selection, parkCaret);
-    // The vertical door resolves by PIXEL and reaches `setRaw` on its own path, so it does NOT
-    // inherit parkCaret's sentinel rule: a column landing already stops on a painted glyph.
+    // A column placement stops on a painted glyph by measuring, so it writes its offset exact.
     function focusAtColumn(x, from) {
         const el = deps.getEl();
         if (!el)
             return;
         el.focus({ preventScroll: true });
-        const ambientLength = deps.getAmbientLength();
-        // minOffset = the walk position of raw 0 keeps the scan out of the marker region.
-        const minOffset = toDomTextOffset(asRawOffset(0), ambientLength);
-        const walkOffset = findOffsetNearestX(el, asEditorX(x), from, minOffset);
-        deps.backend.setRaw(toClampedRawOffset(walkOffset, ambientLength));
+        const within = deps.columnWindow?.();
+        // The default floor of raw 0 keeps the scan out of the container's marker prefix.
+        const min = walkOffsetOfRaw(el, within?.start ?? 0);
+        const max = within ? walkOffsetOfRaw(el, within.end) : undefined;
+        const walkOffset = findOffsetNearestX(el, asEditorX(x), from, min, max);
+        deps.backend.setRaw(rawOfWalkOffset(el, walkOffset), { clamp: 'exact' });
+        // Announced like every other placement, but without `placeCaret`'s range clear: the
+        // vertical move that gets here has already collapsed whatever range it left.
+        deps.selection.announceSelection();
     }
     function getCursorOffset() {
         return deps.backend.getRaw();
@@ -143,21 +142,15 @@ export function createEditableSurface(deps) {
         return sel.toString();
     }
     function setSelection(start, end) {
-        if (!deps.getEl())
-            return;
-        const range = deps.backend.buildRange(asRawOffset(start), asRawOffset(end));
-        if (!range)
-            return;
-        const sel = window.getSelection();
-        sel?.removeAllRanges();
-        sel?.addRange(range);
+        const el = deps.getEl();
+        if (el)
+            selectInBlock(deps.selection, () => selectRawRange(el, start, end));
     }
     function measurePartialRects(startOffset, endOffset) {
         const el = deps.getEl();
         if (!el)
             return [];
-        const ambientLength = deps.getAmbientLength();
-        return measurePartialRectsInContentEditable(el, toDomTextOffset(asRawOffset(startOffset), ambientLength), toDomTextOffset(asRawOffset(endOffset), ambientLength));
+        return measurePartialRectsInContentEditable(el, walkOffsetOfRaw(el, startOffset), walkOffsetOfRaw(el, endOffset));
     }
     const surface = {
         focus,
@@ -168,7 +161,15 @@ export function createEditableSurface(deps) {
         setSelection,
         measurePartialRects
     };
-    // ── Input / composition skeleton ──────────────────────────────────────────
+    // ── Input and composition ─────────────────────────────────────────────────
+    // The caret before the edit, so undo puts it back there. A composition keeps the one read at
+    // its start: Chromium fires the composition's own beforeinput events after that.
+    let preEditOffset = 0;
+    function onBeforeInput(e) {
+        if (!deps.getComposing() && !e.isComposing)
+            preEditOffset = deps.backend.getRaw() ?? 0;
+        void deps.handleBeforeInput?.(e);
+    }
     /** The DOM `input` handler. Arity zero on purpose: it is bound straight to the event, so a
      *  parameter here would be the InputEvent. */
     function onInput() {
@@ -178,38 +179,36 @@ export function createEditableSurface(deps) {
         if (deps.isInputSuppressed?.())
             return;
         deps.inputPrelude?.();
-        deps.stickyColumn.reset();
-        // The committed bytes belong to the content, whatever arrival seated the caret.
-        deps.edgeAffinity.noteTyping();
+        deps.caretMemory.noteTyping();
         const el = deps.getEl();
         if (deps.getComposing() || !el)
             return;
         const text = deps.readText();
         const savedOffset = deps.backend.getRaw() ?? 0;
-        // Same mode gate as the keydown seat's dispatch arms: a surface painting its delimiters
-        // keeps the read verbatim — the caret sat beside a byte the user could see.
+        // The same mode check the keydown branches make: a block that draws its delimiters
+        // keeps the reading verbatim, since the caret sat beside a byte the user could see.
         const seated = fromComposition && revealsNoMarkers(el)
-            ? (deps.relocateComposedText?.(text, deps.getPreEditOffset()) ?? null)
+            ? (deps.relocateComposedText?.(text, preEditOffset) ?? null)
             : null;
         const caret = seated?.caret ?? savedOffset;
         // preEdit anchors the undo snapshot; caret drives focus when a kind change remounts the
         // block. A commit that rewrites bytes reports the post-rewrite caret.
-        const committedCaret = deps.commitInput(seated?.raw ?? text, deps.getPreEditOffset(), caret);
-        deps.setPendingCursor(committedCaret ?? caret);
+        const committedCaret = deps.commitInput(seated?.raw ?? text, preEditOffset, caret);
+        if (committedCaret !== null)
+            deps.setPendingCursor(committedCaret ?? caret);
     }
     function onCompositionStart() {
         if (!deps.getEl())
             return;
         traceCompositionStart();
-        // Capture before crossBlock.handleCompositionStart() — sync delete moves the caret.
-        deps.setPreEditOffset(deps.backend.getRaw() ?? 0);
+        // Capture before `crossBlock.handleCompositionStart()`, whose delete moves the caret.
+        preEditOffset = deps.backend.getRaw() ?? 0;
         crossBlock.handleCompositionStart();
         deps.setComposing(true);
     }
     function onCompositionEnd() {
-        // onCompositionStart always arms the flag, so an unpaired end means a consumer
+        // `onCompositionStart` always sets the flag, so an unpaired end means a consumer
         // wired compositionend without compositionstart (G1.27).
-        // TODO(#37): relax to once-per-focus if Safari's duplicate compositionend fires reach here.
         assertInvariant('composition-window', () => checkCompositionEndPaired(deps.getComposing()));
         traceCompositionEnd();
         deps.setComposing(false);
@@ -225,9 +224,14 @@ export function createEditableSurface(deps) {
         surface,
         caret,
         isDetached,
+        onBeforeInput,
         onInput,
         onCompositionStart,
-        onCompositionEnd
+        onCompositionEnd,
+        getPreEditOffset: () => preEditOffset,
+        notePreEditOffset: (offset) => {
+            preEditOffset = offset;
+        }
     };
 }
 export function createClipboardHandlers(deps) {
@@ -237,14 +241,13 @@ export function createClipboardHandlers(deps) {
         events: deps.events,
         crossBlock: deps.crossBlock
     });
-    // Reading mode / plain-text surfaces copy what the reader sees — the native
-    // selection string, which drops the CSS-hidden markers — not a raw slice.
+    // Reading mode and plain-text blocks copy what the user sees, which is the browser's
+    // selection string with the CSS-hidden markers dropped, not a slice of the raw.
     const writeVisibleSelection = (e) => {
         e.clipboardData?.setData('text/plain', window.getSelection()?.toString() ?? '');
     };
     function onCopy(e) {
-        deps.stickyColumn.reset();
-        deps.edgeAffinity.reset();
+        deps.caretMemory.forget();
         if (deps.isReadOnly()) {
             e.preventDefault();
             writeVisibleSelection(e);
@@ -262,8 +265,7 @@ export function createClipboardHandlers(deps) {
         writeVisibleSelection(e);
     }
     async function onCut(e) {
-        deps.stickyColumn.reset();
-        deps.edgeAffinity.reset();
+        deps.caretMemory.forget();
         e.preventDefault();
         if (deps.isReadOnly()) {
             onCopy(e);
@@ -280,7 +282,7 @@ export function createClipboardHandlers(deps) {
         e.preventDefault();
         if (deps.isReadOnly())
             return;
-        // Both reads stay above the fold's settle — see the discipline above.
+        // Read `clipboardData` before the first await, while the event still holds it.
         const images = imageArm.filesOf(e.clipboardData);
         if (images.length === 0) {
             await insertPastedText(normalizeLineEndings(e.clipboardData?.getData('text/plain') ?? ''), e);
@@ -288,15 +290,11 @@ export function createClipboardHandlers(deps) {
         }
         const fold = deps.foldReveal?.() ?? null;
         await fold?.settled;
-        deps.stickyColumn.reset();
-        deps.edgeAffinity.reset();
+        deps.caretMemory.forget();
         await pasteImages(deps, imageArm, e, images, fold?.caret ?? null);
     }
-    /**
-     * Everything a paste does once its payload is plain text, so the gesture and the
-     * programmatic door carry the fold, the cross-block replace and the surface splice from
-     * one place. `e` is null when there is no gesture to consume.
-     */
+    /** Everything a plain-text paste does, shared by the gesture and the API call; `e` is null
+     *  when there is no gesture to consume. */
     async function insertPastedText(text, e) {
         const fold = deps.foldReveal?.() ?? null;
         await fold?.settled;
@@ -304,46 +302,40 @@ export function createClipboardHandlers(deps) {
             return;
         if (await deps.crossBlock.handlePaste(e, text))
             return;
-        deps.stickyColumn.reset();
-        deps.edgeAffinity.reset();
+        deps.caretMemory.forget();
         if (!text)
             return;
         await deps.pasteTail(text, fold?.caret ?? null);
     }
-    function insertMarkdown(md) {
+    async function insertMarkdown(md) {
         if (deps.isReadOnly())
             return false;
         const text = normalizeLineEndings(md);
         if (!text)
             return false;
-        void insertPastedText(text, null);
+        await insertPastedText(text, null);
         return true;
     }
     return { onCopy, onCut, onPaste, insertMarkdown };
 }
-// ── Image-paste arm ─────────────────────────────────────────────────────────
-/**
- * The surface's half of the image arm — what the shared seam
- * (`components/paste-image-arm.ts`) cannot do, because it needs a caret. The anchor is
- * captured before the first await, so a slow import cannot follow a caret the user
- * moved meanwhile.
- */
+// ── Pasting an image ────────────────────────────────────────────────────────
+/** The part of an image paste that needs a caret. The anchor is read before the first await, so
+ *  a slow import cannot follow a caret the user moved meanwhile. */
 async function pasteImages(deps, imageArm, e, images, foldedCaret) {
     const anchor = deps.caret.getCursorOffset() ?? foldedCaret ?? 0;
     const text = await imageArm.run(e, images);
     if (text === null)
         return;
     // A hook slow enough to outlive its block leaves nothing to insert into, and the
-    // surface tails would fall back to offset 0. Decline, loudly.
+    // paste tails would fall back to offset 0. Decline, loudly.
     if (!deps.caret.getEl()) {
         emitClipboardError(deps.events, {
             error: new Error('onPasteImage resolved after its block was gone; insertion declined')
         });
         return;
     }
-    // Re-seat ONLY when the caret actually drifted: seating collapses the DOM range that
-    // every surface tail derives its replaced span from, so seating unconditionally would
-    // make this the one paste route that doesn't replace the selection it landed on.
+    // Move the caret only if it drifted: placing one collapses the DOM range the block reads its
+    // replaced span from, and this paste would stop replacing the selection.
     if (deps.caret.getCursorOffset() !== anchor)
         deps.caret.focus(anchor);
     await deps.pasteTail(text, foldedCaret);

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

@@ -1,98 +1,51 @@
 <script lang="ts">
 	import { getContext, setContext } from 'svelte';
-	import type {
-		BlockEditActions,
-		ContainerEditActions,
-		FocusActions,
-		ListContext
-	} from '../../../action-contracts';
+	import type { ListContext } from '../../../action-contracts';
 	import type { NodeView } from '../../../core/node-views';
-	import {
-		BLOCK_EDIT_KEY,
-		CONTAINER_EDIT_KEY,
-		EDITOR_DOC_KEY,
-		EDITOR_POLICIES_KEY,
-		EDITOR_SERVICES_KEY,
-		FOCUS_KEY,
-		LIST_CONTEXT_KEY,
-		type EditorDoc,
-		type EditorPolicies,
-		type EditorServices
-	} from '../../../editor-keys';
+	import { EDITOR_SERVICES_KEY, LIST_CONTEXT_KEY, type EditorServices } from '../../../editor-keys';
 	import { createListContext } from '../../../editor-actions/list-context';
 	import { createListOverrides } from '../../../editor-actions/list-overrides';
-	import { createBlockListState } from '../../../reactivity/block-list-state.svelte';
 	import { useContainerWindowing } from '../../../reactivity/use-container-windowing.svelte';
 	import { sliceWindow } from '../../../reactivity/window-slice';
-	import {
-		createStandardNestedActions,
-		setNestedActionsContexts,
-		type NodeScope
-	} from '../../../editor-actions/nested/nested-actions';
+	import { useWindowFloor } from '../../../reactivity/use-window-floor.svelte';
+	import { createContainerActions } from '../../../editor-actions/nested/container-actions';
 	import { createContainerBlockComponent } from '../../../editor-actions/container-block-component';
 	import ListItemBlock from './ListItemBlock.svelte';
+	import type { ChildList } from '../../../reactivity/child-list';
 
 	let { node, index, myPath = [] }: { node: NodeView; index: number; myPath?: number[] } = $props();
 
-	const parentBlockEdit = getContext<BlockEditActions>(BLOCK_EDIT_KEY);
-	const parentFocus = getContext<FocusActions>(FOCUS_KEY);
-	const parentContainerEdit = getContext<ContainerEditActions>(CONTAINER_EDIT_KEY);
-	const { controller, stickyColumn, selection, registryView } =
-		getContext<EditorServices>(EDITOR_SERVICES_KEY);
-	const getPresentationMode = getContext<EditorPolicies | undefined>(
-		EDITOR_POLICIES_KEY
-	)?.presentationMode;
-	const linkRef = getContext<EditorDoc | undefined>(EDITOR_DOC_KEY)?.linkRef;
-
-	const listState = createBlockListState(() => node);
+	const { controller, selection } = getContext<EditorServices>(EDITOR_SERVICES_KEY);
 
 	let boxEl: HTMLElement | undefined = $state();
 
-	// Read parent context before the setContext below shadows it.
+	// Read before this list provides its own below.
 	const parentListContext = getContext<ListContext | undefined>(LIST_CONTEXT_KEY);
 
-	// Minted once, passed by reference to every factory below — never spread.
-	const scope: NodeScope = {
-		get index() {
-			return index;
-		},
-		get node() {
-			return node;
-		},
-		get path() {
-			return myPath;
-		}
-	};
-
-	const bundle = createStandardNestedActions(
-		listState,
-		{
-			scope,
-			stickyColumn,
-			grammar: registryView.grammar,
-			getPresentationMode,
-			linkRef,
-			parentListContext,
-			parent: {
-				blockEdit: parentBlockEdit,
-				focus: parentFocus,
-				containerEdit: parentContainerEdit
-			}
-		},
-		createListOverrides({ scope, parentBlockEdit })
-	);
-
-	setNestedActionsContexts(bundle);
+	const {
+		scope,
+		state: listState,
+		parent,
+		reading
+	} = createContainerActions({
+		getNode: () => node,
+		getIndex: () => index,
+		getPath: () => myPath,
+		parentListContext,
+		overrides: ({ scope, parent }) =>
+			createListOverrides({ scope, parentBlockEdit: parent.blockEdit }),
+		childList: () => childList
+	});
 
 	const listContext = createListContext({
 		scope,
+		getLineEnding: () => parent.containerEdit.lineEnding(),
 		state: listState,
-		parentBlockEdit,
-		parentFocus,
+		parentBlockEdit: parent.blockEdit,
+		parentFocus: parent.focus,
 		parentListContext,
 		controller,
-		getPresentationMode,
-		linkRef
+		reading
 	});
 
 	setContext(LIST_CONTEXT_KEY, listContext);
@@ -100,53 +53,56 @@
 	// ── Virtual rendering (item windowing) ──────────────────────────────
 
 	const windowing = useContainerWindowing({
-		getIndex: () => index,
 		getParentPath: () => myPath,
 		getChildren: () => node.children ?? [],
 		getChildIds: () => listState.innerBlockIds,
-		// The .list-block IS the content origin — it holds the spacers and items.
-		getListEl: () => boxEl ?? null,
-		// A list is itself a BlockHost block; match the leaf channel the parent
-		// measured for it, so the subtotal we report up doesn't fight that slot.
-		getOwnEl: () => boxEl?.closest('.block-host') ?? null,
-		provideLeafChannel: false
+		// The .list-block is the content origin: it holds the spacers and the items.
+		getListEl: () => boxEl ?? null
 	});
 
 	let win = $derived(windowing.window);
+	useWindowFloor(
+		() => boxEl,
+		() => win
+	);
 	let bounds = $derived(sliceWindow((node.children ?? []).length, win));
 
+	const childList: ChildList = {
+		count: () => node.children?.length ?? 0,
+		refs: listState.refSlots,
+		windowing
+	};
+
 	// ── BlockComponent interface ────────────────────────────────────────
 
 	export const containerApi = createContainerBlockComponent({
 		selection,
+		reading,
 		get innerBlockRefs() {
 			return listState.innerBlockRefs;
 		},
-		refSlots: listState.refSlots,
-		get nodeChildrenLength() {
-			return node.children?.length ?? 0;
-		},
+		childList,
 		get node() {
 			return node;
-		},
-		revealChild: windowing.revealChild,
-		isInWindow: windowing.isInWindow
+		}
 	});
 </script>
 
-<div class="list-block" bind:this={boxEl}>
+<!-- The items reorder among themselves, which the drag reads off this mark. -->
+<div class="list-block" data-reorder-scope bind:this={boxEl}>
 	{#if win.active}
 		<div class="vr-spacer" style="height: {win.topSpacerPx}px"></div>
 	{/if}
-	<!-- ABSOLUTE-INDEX INVARIANT: index/myPath/key are the absolute item index
-	     (bounds.start + localIndex), never the local loop index — paths and
-	     structural ops key off it. -->
+	<!-- `index`, `myPath` and the key all use the absolute item index, never the loop index:
+	     paths and structural ops key off it. -->
 	{#each (node.children ?? []).slice(bounds.start, bounds.end) as item, localIndex (listState.innerBlockIds[bounds.start + localIndex])}
 		{@const absoluteIndex = bounds.start + localIndex}
 		<ListItemBlock
 			node={item}
 			index={absoluteIndex}
+			id={listState.innerBlockIds[absoluteIndex]}
 			myPath={[...myPath, absoluteIndex]}
+			itemCount={(node.children ?? []).length}
 			slots={listState.refSlots}
 		/>
 	{/each}