@voithos-labs/aragonite 0.10.1

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

@@ -0,0 +1,324 @@
+<script lang="ts">
+	import { getContext, setContext } from 'svelte';
+	import type {
+		BlockEditActions,
+		ContainerEditActions,
+		FocusActions,
+		ListContext
+	} from '../../../action-contracts';
+	import type { BlockComponent } from '../../../block-component';
+	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 { metadataOf } from '../../../core/nodes';
+	import { hidesMarkers } from '../../../presentation-mode';
+	import { displayLength } from '../../../core/lines';
+	import { createBlockListState } from '../../../reactivity/block-list-state.svelte';
+	import { useContainerWindowing } from '../../../reactivity/use-container-windowing.svelte';
+	import { useMountGauge } from '../../../perf/use-mount-gauge.svelte';
+	import {
+		createStandardNestedActions,
+		setNestedActionsContexts,
+		type NodeScope
+	} from '../../../editor-actions/nested/nested-actions';
+	import { createContainerBlockComponent } from '../../../editor-actions/container-block-component';
+	import { buildTaskItemAmbient } from './task-checkbox';
+	import BlockList from '../../BlockList.svelte';
+	import { publishRefSlot, type RefSlots } from '../../../reactivity/publish-ref.svelte';
+	import { eventToChord } from '../../../schema/keybindings';
+	import { dispatchKindCommand } from '../../../schema/block-commands';
+	import type { AnyCommandId } from '../../../schema/command-id';
+	import BlockDragHandle from '../../BlockDragHandle.svelte';
+
+	let {
+		node,
+		index,
+		myPath = [],
+		slots
+	}: {
+		node: NodeView;
+		index: number;
+		myPath?: number[];
+		slots?: RefSlots<BlockComponent>;
+	} = $props();
+
+	const parentBlockEdit = getContext<BlockEditActions>(BLOCK_EDIT_KEY);
+	const parentFocus = getContext<FocusActions>(FOCUS_KEY);
+	const parentContainerEdit = getContext<ContainerEditActions>(CONTAINER_EDIT_KEY);
+	const { stickyColumn, selection, registryView } = getContext<EditorServices>(EDITOR_SERVICES_KEY);
+	const {
+		keybindingOverrides,
+		blockDragHandles: getDragHandles,
+		presentationMode: getPresentationMode
+	} = getContext<EditorPolicies>(EDITOR_POLICIES_KEY);
+	const linkRef = getContext<EditorDoc | undefined>(EDITOR_DOC_KEY)?.linkRef;
+
+	const listContext = getContext<ListContext>(LIST_CONTEXT_KEY);
+	// $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);
+	const presentationMode = $derived(getPresentationMode?.() ?? 'source');
+	const readOnly = $derived(presentationMode === 'reading');
+
+	// The marker-hiding CSS tells bullet/ordered/task apart through this hook and the ambient
+	// span carries no such class. Absent in source, so that DOM stays byte-identical.
+	const presentationMarkerKind = $derived.by(() => {
+		if (!hidesMarkers(presentationMode)) return undefined;
+		const meta = metadataOf(node, 'listItem');
+		if (meta?.taskItem) return 'task';
+		return /^\d/.test(meta?.marker ?? '-') ? 'ordered' : 'bullet';
+	});
+
+	// Wrap getContainingItemIndex so a nested ListBlock inside this item sees
+	// this item's index in the outer list — the coordinate promoteNestedItem needs.
+	const wrappedListContext: ListContext = {
+		...listContext,
+		getContainingItemIndex: () => index
+	};
+	setContext(LIST_CONTEXT_KEY, wrappedListContext);
+
+	const listState = createBlockListState(() => node);
+
+	let boxEl: HTMLElement | undefined = $state();
+	let contentEl: HTMLElement | undefined = $state();
+
+	useMountGauge();
+
+	function toggleTask(): void {
+		// Reading mode keeps checkboxes visible but inert: a toggle rewrites the
+		// document, and reading mode writes no bytes.
+		if (readOnly) return;
+		const meta = metadataOf(node, 'listItem');
+		if (!meta?.taskItem) return;
+
+		if (selection?.isCrossBlock) {
+			selection.clear();
+		}
+
+		const nextChecked = !meta.taskChecked;
+		const nextMarker = nextChecked ? '[x] ' : '[ ] ';
+		parentBlockEdit.updateBlockMetadata(index, {
+			taskChecked: nextChecked,
+			taskMarker: nextMarker
+		});
+	}
+
+	const taskCheckedAttr = $derived.by(() => {
+		const meta = metadataOf(node, 'listItem');
+		if (!meta?.taskItem) return undefined;
+		return meta.taskChecked ? 'true' : 'false';
+	});
+
+	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,
+			parent: {
+				blockEdit: parentBlockEdit,
+				focus: parentFocus,
+				containerEdit: parentContainerEdit
+			}
+		},
+		() => ({
+			blockEdit: {
+				splitBlock: async (innerIndex: number, offset: number): Promise<void> => {
+					if (!node.children) return;
+
+					// Enter-empty. Deliberately shallower than isItemUserEmpty — trailing
+					// structural children stay until exitListAtItem relocates them.
+					const firstChild = node.children[0];
+					const isEmptyItem = firstChild?.kind === 'paragraph' && firstChild.raw.trim() === '';
+					if (isEmptyItem) {
+						await listContext.exitListAtItem(index);
+						return;
+					}
+
+					const lastChild = node.children[node.children.length - 1];
+					const isAtEnd =
+						innerIndex === node.children.length - 1 && offset >= displayLength(lastChild.raw);
+
+					if (isAtEnd) {
+						await listContext.insertItemAfter(index);
+						return;
+					}
+
+					await listContext.splitItemAtOffset(index, innerIndex, offset);
+				}
+				// mergeWithPrevious at innerIndex <= 0 is the factory default — no override needed.
+			}
+		})
+	);
+
+	setNestedActionsContexts(bundle);
+
+	// ── Virtual rendering (nested windowing) ────────────────────────────
+
+	const windowing = useContainerWindowing({
+		getIndex: () => index,
+		getParentPath: () => myPath,
+		getChildren: () => node.children ?? [],
+		getChildIds: () => listState.innerBlockIds,
+		// .block-list is a direct child of .list-item-content, reached through contentEl.
+		getListEl: () => contentEl?.querySelector(':scope > .block-list') ?? null,
+		// An item is NOT wrapped in a BlockHost; its own .list-item-block box is what the
+		// parent ListBlock's item-indexed sink expects (no competing leaf channel).
+		getOwnEl: () => boxEl ?? null,
+		provideLeafChannel: true
+	});
+
+	// ── BlockComponent interface ────────────────────────────────────────
+
+	export const containerApi = createContainerBlockComponent({
+		selection,
+		get innerBlockRefs() {
+			return listState.innerBlockRefs;
+		},
+		refSlots: listState.refSlots,
+		get nodeChildrenLength() {
+			return node.children?.length ?? 0;
+		},
+		get node() {
+			return node;
+		},
+		revealChild: windowing.revealChild,
+		isInWindow: windowing.isInWindow
+	});
+
+	$effect(() => {
+		if (!slots) return;
+		return publishRefSlot(slots, index, containerApi, boxEl);
+	});
+
+	// ── Commands ────────────────────────────────────────────────────────
+
+	// Not on the BlockComponent surface (the published ref is containerApi, not
+	// this instance); the bubble handler below closes over it directly.
+	function runCommand(id: AnyCommandId): boolean {
+		switch (id) {
+			case 'list.indent':
+				listContext.indentItem(index);
+				return true;
+			case 'list.unindent':
+				listContext.unindentItem(index);
+				return true;
+			default:
+				return false;
+		}
+	}
+
+	// Tab/Shift+Tab bubble here from the inner paragraph, whose block.insertTab declines
+	// without preventDefault. Dispatch is kind-only: the contenteditable's async handler
+	// preventDefaults only after an await, so a global tier here would re-fire undo/redo.
+	function handleKeydown(e: KeyboardEvent): void {
+		if (e.defaultPrevented) return;
+		const chord = eventToChord(e);
+		if (!chord) return;
+		if (
+			dispatchKindCommand(
+				chord,
+				{ kind: node.kind, runCommand },
+				{
+					getPresentationMode,
+					isCrossBlockRange: () => selection?.isCrossBlock ?? false,
+					// A container bubble carries no range command: the leaf below it owns the format ids.
+					crossBlockCommands: undefined
+				},
+				keybindingOverrides()
+			)
+		) {
+			e.preventDefault();
+		}
+	}
+</script>
+
+<div
+	class="list-item-block"
+	class:reorder-host={dragHandles}
+	data-task-checked={taskCheckedAttr}
+	data-list-marker={presentationMarkerKind}
+	bind:this={boxEl}
+>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="list-item-content" onkeydown={handleKeydown} bind:this={contentEl}>
+		<BlockList
+			children={node.children ?? []}
+			blockIds={listState.innerBlockIds}
+			slots={listState.refSlots}
+			parentPath={myPath}
+			window={windowing.window}
+			ambientPrefixForFirst={buildTaskItemAmbient(metadataOf(node, 'listItem'), toggleTask)}
+		/>
+	</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}
+		<BlockDragHandle />
+	{/if}
+</div>
+
+<style>
+	.list-item-block {
+		position: relative;
+		display: flex;
+		align-items: flex-start;
+	}
+
+	/* Hover reveal is the shared global `.reorder-host` rule in BlockHost; it reveals
+	   only the innermost hovered unit, so a sub-item's hover never lights the parent. */
+
+	.list-item-content {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.list-item-content :global(.list-block) {
+		padding-left: 1em;
+	}
+
+	:global(.task-checkbox) {
+		cursor: pointer;
+		border-radius: 2px;
+		transition: background-color 60ms ease-out;
+	}
+
+	:global(.task-checkbox:hover) {
+		background-color: var(--md-marker-hover-bg, rgba(128, 128, 128, 0.15));
+	}
+
+	/* :first-child scopes strikethrough to this item's own leading block; :not(.list-block)
+	   avoids cascading into nested sub-lists, which carry their own state per item. */
+	.list-item-block[data-task-checked='true']
+		> .list-item-content
+		> :global(.block-list)
+		> :global(.block-host:first-child)
+		> :global(:not(.list-block)) {
+		text-decoration: line-through;
+		color: var(--syntax-task-done, rgba(128, 128, 128, 0.7));
+	}
+</style>

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

@@ -0,0 +1,14 @@
+import type { BlockComponent } from '../../../block-component';
+import type { NodeView } from '../../../core/node-views';
+import { type RefSlots } from '../../../reactivity/publish-ref.svelte';
+type $$ComponentProps = {
+    node: NodeView;
+    index: number;
+    myPath?: number[];
+    slots?: RefSlots<BlockComponent>;
+};
+declare const ListItemBlock: import("svelte").Component<$$ComponentProps, {
+    containerApi: import("../../../block-component").ContainerBlockComponent;
+}, "">;
+type ListItemBlock = ReturnType<typeof ListItemBlock>;
+export default ListItemBlock;

package/dist/components/blocks/list/task-checkbox.d.ts

@@ -0,0 +1,3 @@
+import type { AmbientPrefix } from '../../../block-component';
+import type { ListItemMetadata } from '../../../core/nodes';
+export declare function buildTaskItemAmbient(metadata: ListItemMetadata | undefined, onToggle: () => void): AmbientPrefix;

package/dist/components/blocks/list/task-checkbox.js

@@ -0,0 +1,33 @@
+import { devWarn } from '../../../dev-warn';
+function isTaskMarkerChecked(taskMarker) {
+    const c = taskMarker[1];
+    return c === 'x' || c === 'X';
+}
+export function buildTaskItemAmbient(metadata, onToggle) {
+    const listMarker = metadata?.marker ?? '- ';
+    const taskMarkerPresent = metadata?.taskMarker != null;
+    if (metadata && metadata.taskItem !== taskMarkerPresent) {
+        devWarn('ListItemBlock', 'taskItem / taskMarker inconsistent — rendering as plain list item', {
+            taskItem: metadata.taskItem,
+            taskMarker: metadata.taskMarker
+        });
+    }
+    if (!metadata?.taskItem || !metadata.taskMarker) {
+        return listMarker;
+    }
+    const boxStart = listMarker.length;
+    return {
+        text: listMarker + metadata.taskMarker,
+        interactive: [
+            {
+                start: boxStart,
+                end: boxStart + 3,
+                className: 'task-checkbox',
+                role: 'checkbox',
+                // single source of truth: derive from the keyed marker (in the render memo key), not parallel taskChecked
+                ariaChecked: isTaskMarkerChecked(metadata.taskMarker),
+                onClick: onToggle
+            }
+        ]
+    };
+}

package/dist/components/blocks/plain-text-backend.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The zero-ambient, widget-free surface backend shared by CodeBlock and the
+ * `editable-leaf` seam: with no ambient marker and no inline widgets, DOM-text space
+ * IS raw space, so the brand mint happens once here rather than at each surface.
+ * Surfaces with an ambient marker (TextEditableBlock) use the ambient IO instead.
+ */
+import type { CursorBackend } from './editable-surface';
+import { type RawOffset } from '../../cursor/coordinate-spaces';
+export interface ContentOffsetBackend {
+    backend: CursorBackend;
+    getFocusOffset: () => RawOffset | null;
+    getTextLen: () => number;
+    readText: () => string;
+}
+export declare function createContentOffsetBackend(getEl: () => HTMLElement | null): ContentOffsetBackend;
+/**
+ * Chromium with `white-space: pre` won't paint a caret on the line after a trailing
+ * `\n` unless something follows it. A `<br>` anchors it without touching `textContent`
+ * (BR has empty textContent, so `textContent === trimTrailingLineEnding(raw)` holds).
+ */
+export declare function anchorTrailingNewline(el: HTMLElement): void;

package/dist/components/blocks/plain-text-backend.js

@@ -0,0 +1,47 @@
+/**
+ * The zero-ambient, widget-free surface backend shared by CodeBlock and the
+ * `editable-leaf` seam: with no ambient marker and no inline widgets, DOM-text space
+ * IS raw space, so the brand mint happens once here rather than at each surface.
+ * Surfaces with an ambient marker (TextEditableBlock) use the ambient IO instead.
+ */
+import { asDomTextOffset, asRawOffset } from '../../cursor/coordinate-spaces';
+import { createRangeFromOffsets, setCursorOffset, getCursorOffset, getSelectionFocusOffset } from '../../cursor/content-offsets';
+export function createContentOffsetBackend(getEl) {
+    return {
+        backend: {
+            getRaw: () => {
+                const el = getEl();
+                const offset = el ? getCursorOffset(el) : null;
+                return offset === null ? null : asRawOffset(offset);
+            },
+            setRaw: (offset) => {
+                const el = getEl();
+                if (el)
+                    setCursorOffset(el, asDomTextOffset(offset));
+            },
+            buildRange: (start, end) => {
+                const el = getEl();
+                return el ? createRangeFromOffsets(el, asDomTextOffset(start), asDomTextOffset(end)) : null;
+            }
+        },
+        getFocusOffset: () => {
+            const el = getEl();
+            const offset = el ? getSelectionFocusOffset(el) : null;
+            return offset === null ? null : asRawOffset(offset);
+        },
+        getTextLen: () => (getEl()?.textContent ?? '').length,
+        readText: () => getEl()?.textContent ?? ''
+    };
+}
+/**
+ * Chromium with `white-space: pre` won't paint a caret on the line after a trailing
+ * `\n` unless something follows it. A `<br>` anchors it without touching `textContent`
+ * (BR has empty textContent, so `textContent === trimTrailingLineEnding(raw)` holds).
+ */
+export function anchorTrailingNewline(el) {
+    if (!el.textContent?.endsWith('\n'))
+        return;
+    const anchor = document.createElement('br');
+    anchor.dataset.caretAnchor = '';
+    el.appendChild(anchor);
+}

package/dist/components/blocks/surface-wiring.svelte.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The context wiring every editable-block component threads identically: one init-time bundle
+ * of the shared `EditableSurfaceDeps` fields, plus chord dispatch built over the same gates and
+ * the shared focus-park teardown. Call during component init — `getContext` requires it, and
+ * `createEditableSurface` itself stays context-free (the jsdom harness constructs it bare).
+ */
+import { type KindCommandTarget } from '../../schema/block-commands';
+import type { EditableSurfaceDeps } from './editable-surface';
+/** The context-threaded half of `EditableSurfaceDeps` — the fields every surface passes verbatim. */
+export type SharedSurfaceDeps = Pick<EditableSurfaceDeps, 'selection' | 'getDoc' | 'getBlockElByPath' | 'focusActions' | 'getEditorRoot' | 'getScrollHost' | 'getEditorLifetime' | 'stickyColumn' | 'edgeAffinity' | 'blockEdit' | 'controller' | 'history' | 'pluginEditor' | 'getKeybindingOverrides' | 'pasteCoordinator' | 'grammar' | 'activePlugins' | 'events' | 'linkRef' | 'onCommandError' | 'crossBlockCommands'>;
+export interface SurfaceWiring {
+    /** Spread first into `createEditableSurface`; per-surface fields follow and may override. */
+    deps: SharedSurfaceDeps;
+    /** Resolve a chord at `target` through the shared gates; consumes the event when spent. */
+    dispatchChord(e: KeyboardEvent, target: KindCommandTarget): boolean;
+}
+export declare function wireSurfaceContexts(): SurfaceWiring;
+export declare function useParkFocusOnUnmount(getEl: () => HTMLElement | null, getEditorRoot: () => HTMLElement | null): void;

package/dist/components/blocks/surface-wiring.svelte.js

@@ -0,0 +1,68 @@
+/**
+ * The context wiring every editable-block component threads identically: one init-time bundle
+ * of the shared `EditableSurfaceDeps` fields, plus chord dispatch built over the same gates and
+ * the shared focus-park teardown. Call during component init — `getContext` requires it, and
+ * `createEditableSurface` itself stays context-free (the jsdom harness constructs it bare).
+ */
+import { getContext } from 'svelte';
+import { BLOCK_EDIT_KEY, EDITOR_DOC_KEY, EDITOR_POLICIES_KEY, EDITOR_SERVICES_KEY, FOCUS_KEY, HISTORY_KEY } from '../../editor-keys';
+import { emitCommandError } from '../../editor-events';
+import { eventToChord } from '../../schema/keybindings';
+import { dispatchKeyCommand } from '../../schema/block-commands';
+import { parkFocusOnEditorRoot } from '../../selection/native-bridge';
+export function wireSurfaceContexts() {
+    const blockEdit = getContext(BLOCK_EDIT_KEY);
+    const focusActions = getContext(FOCUS_KEY);
+    const history = getContext(HISTORY_KEY);
+    const { controller, pasteCoordinator, stickyColumn, edgeAffinity, selection, registryView, activePlugins, events, crossBlockCommands } = getContext(EDITOR_SERVICES_KEY);
+    const { keybindingOverrides, presentationMode: getPresentationMode } = getContext(EDITOR_POLICIES_KEY);
+    const { blockElLookup: getBlockElByPath, doc: getDoc, editorRoot: getEditorRoot, scrollHost: getScrollHost, lifetime: editorLifetime, pluginEditor, linkRef } = getContext(EDITOR_DOC_KEY);
+    const deps = {
+        selection,
+        getDoc,
+        getBlockElByPath,
+        focusActions,
+        getEditorRoot,
+        getScrollHost,
+        getEditorLifetime: () => editorLifetime ?? null,
+        stickyColumn,
+        edgeAffinity,
+        blockEdit,
+        controller,
+        history,
+        pluginEditor,
+        getKeybindingOverrides: keybindingOverrides,
+        pasteCoordinator,
+        grammar: registryView.grammar,
+        activePlugins,
+        events,
+        linkRef,
+        crossBlockCommands,
+        onCommandError: (report) => emitCommandError(events, report)
+    };
+    const dispatchChord = (e, target) => {
+        const chord = eventToChord(e);
+        if (!chord ||
+            !dispatchKeyCommand(chord, target, {
+                history,
+                pluginEditor,
+                activation: activePlugins,
+                getPresentationMode,
+                isCrossBlockRange: () => selection.isCrossBlock,
+                crossBlockCommands: crossBlockCommands
+            }, keybindingOverrides(), deps.onCommandError)) {
+            return false;
+        }
+        e.preventDefault();
+        return true;
+    };
+    return { deps, dispatchChord };
+}
+// Windowed out while focused: hand focus to the editor root so the next keystroke
+// routes through its document-level listener instead of falling to `<body>`.
+export function useParkFocusOnUnmount(getEl, getEditorRoot) {
+    $effect(() => {
+        const blockEl = getEl();
+        return () => parkFocusOnEditorRoot(blockEl, getEditorRoot());
+    });
+}