svedit 0.11.1 → 0.13.0

package/src/lib/NodeArrayProperty.svelte

@@ -1,29 +1,121 @@
-<script>
+<script lang="ts">
 	import { getContext, setContext } from 'svelte';
 	import UnknownNode from './UnknownNode.svelte';
-	import { serialize_path } from './utils.js';
+	import { serialize_path, calculate_fragment_ranges } from './utils.js';
 	import DefaultNodeGap from './NodeGap.svelte';
 	import DefaultNodeGapMarkers from './NodeGapMarkers.svelte';
+	import type {
+		NodeArrayPropertyProps,
+		NodeArrayAttachmentContext,
+		NodeArrayFragment,
+		NodeId,
+		Attachment,
+		Mark,
+		NodeArrayRenderContext,
+		SveditRenderContext
+	} from './types.js';
 
-	/** @import { NodeArrayPropertyProps } from './types.d.ts'; */
-
-	const svedit = getContext('svedit');
+	const svedit = getContext<SveditRenderContext>('svedit');
 	let NodeGap = $derived(svedit.session.config.system_components?.node_gap ?? DefaultNodeGap);
 	let NodeGapMarkers = $derived(
 		svedit.session.config.system_components?.node_gap_markers ?? DefaultNodeGapMarkers
 	);
 
-	/** @type {NodeArrayPropertyProps} */
-	let { path, tag = 'div', class: css_class, style = '', ...rest } = $props();
+	let {
+		path,
+		tag = 'div',
+		class: css_class,
+		style = '',
+		...rest
+	}: NodeArrayPropertyProps = $props();
 
 	// Pre-joined once per path change; reused by data-path and by every
 	// NodeGap's should_position_gap call to avoid N+1 joins per render.
 	let path_str = $derived(serialize_path(path));
 
-	let node_ids = $derived(svedit.session.get(path));
-	let nodes = $derived(node_ids.map((id) => svedit.session.get(id)));
+	let raw_value = $derived(svedit.session.get(path));
+	let node_ids = $derived(raw_value.nodes);
+	let marks = $derived(raw_value.marks);
+	let annotations = $derived(raw_value.annotations);
+
+	let fragments = $derived(get_fragments(node_ids, marks));
+
+	function get_fragments(node_ids: NodeId[], marks: Mark[]): NodeArrayFragment[] {
+		const ranges = calculate_fragment_ranges(node_ids.length, marks);
+		const fragments: NodeArrayFragment[] = [];
+
+		for (const range of ranges) {
+			const nodes_slice = node_ids.slice(range.start_offset, range.end_offset);
+
+			if (range.type === 'mark') {
+				const node = svedit.session.get(range.node_id);
+				fragments.push({
+					type: 'mark',
+					node,
+					nodes: nodes_slice,
+					start_index: range.start_offset,
+					mark_index: range.mark_index!
+				});
+			} else if (range.type === 'content') {
+				fragments.push({
+					type: 'nodes',
+					nodes: nodes_slice,
+					start_index: range.start_offset
+				});
+			}
+		}
+		return fragments;
+	}
+
+	function get_node_key(node_id: NodeId, index: number): string {
+		let occurrence = 0;
+		for (let current_index = 0; current_index < index; current_index++) {
+			if (node_ids[current_index] === node_id) occurrence += 1;
+		}
+		return `${node_id}:${occurrence}`;
+	}
+
+	function get_range_context(
+		range: Attachment,
+		index: number,
+		node_index: number
+	): NodeArrayAttachmentContext {
+		const node = svedit.session.get(range.node_id);
+		const is_start = node_index === range.start_offset;
+		const is_end = node_index === range.end_offset - 1;
+
+		return {
+			...range,
+			index,
+			node,
+			is_start,
+			is_middle: !is_start && !is_end,
+			is_end
+		};
+	}
+
+	function get_covering_ranges(
+		ranges: Attachment[],
+		node_index: number
+	): NodeArrayAttachmentContext[] {
+		return ranges
+			.map((range, index) => ({ range, index }))
+			.filter(({ range }) => range.start_offset <= node_index && node_index < range.end_offset)
+			.map(({ range, index }) => get_range_context(range, index, node_index));
+	}
+
+	function get_annotation_contexts(node_index: number): NodeArrayAttachmentContext[] {
+		return get_covering_ranges(annotations, node_index);
+	}
 
-	// Mirrors the AnnotatedTextProperty pattern: a `focused` class follows
+	function get_mark(node_index: number): NodeArrayAttachmentContext | null {
+		// The single mark wrapping this node, or null. Mark exclusivity
+		// guarantees at most one. Annotations never wrap and are exposed via
+		// `annotations` instead.
+		return get_covering_ranges(marks, node_index)[0] ?? null;
+	}
+
+	// Mirrors the TextProperty pattern: a `focused` class follows
 	// the model selection. Used by the CSS rule below to hide the empty-array
 	// NodeGap while the caret is in the placeholder, so its <br> isn't a
 	// second arrow-key stop (issue #260).
@@ -32,9 +124,18 @@
 			serialize_path(svedit.session.selection.path) === path_str
 	);
 
-	setContext('node_array_meta', {
+	setContext<NodeArrayRenderContext>('node_array_meta', {
 		get length() {
 			return node_ids.length;
+		},
+		// Lets Node self-serve the marks and annotations covering a child, so
+		// node wrappers can carry range classes without every node component
+		// having to thread the `mark`/`annotations` props through.
+		mark_for(node_index: number) {
+			return get_mark(node_index);
+		},
+		annotations_for(node_index: number) {
+			return get_annotation_contexts(node_index);
 		}
 	});
 </script>
@@ -48,6 +149,7 @@
 	data-path={path_str}
 	style="anchor-name: --{path_str};{style ? ` ${style}` : ''}"
 	{...rest}
+	{@attach svedit.visibility_registry.track_array(path_str)}
 >
 	{#if node_ids.length === 0 && svedit.editable}
 		<div
@@ -55,17 +157,39 @@
 			data-path={serialize_path([...path, 0])}
 			data-type="node"
 			style="anchor-name: --{serialize_path([...path, 0])};"
+			{@attach svedit.visibility_registry.track_node(serialize_path([...path, 0]))}
 		>
 			<NodeGap array_path={path} offset={0} count={0} empty />
 		</div>
 	{/if}
-	{#each nodes as node, index (index)}
-		<NodeGap array_path={path} offset={index} count={nodes.length} />
-		{@const Component = svedit.session.config.node_components[node.type]}
-		{#if Component}
-			<Component path={[...path, index]} />
-		{:else}
-			<UnknownNode path={[...path, index]} />
+	{#snippet render_nodes(nodes_slice: NodeId[], start_index: number)}
+		{#each nodes_slice as id, slice_index (get_node_key(id, start_index + slice_index))}
+			{@const index = start_index + slice_index}
+			{@const node = svedit.session.get(id)}
+			{@const mark = get_mark(index)}
+			{@const annotations = get_annotation_contexts(index)}
+			<NodeGap array_path={path} offset={index} count={node_ids.length} />
+			{@const Component = svedit.session.config.node_components[node.type]}
+			{#if Component}
+				<Component path={[...path, index]} {mark} {annotations} />
+			{:else}
+				<UnknownNode path={[...path, index]} />
+			{/if}
+		{/each}
+	{/snippet}
+
+	{#each fragments as fragment, fragment_index (fragment_index)}
+		{#if fragment.type === 'nodes'}
+			{@render render_nodes(fragment.nodes, fragment.start_index)}
+		{:else if fragment.type === 'mark'}
+			{@const MarkComponent = svedit.session.config.node_components[fragment.node.type]}
+			{#if MarkComponent}
+				<MarkComponent path={[...path, 'marks', fragment.mark_index, 'node_id']}>
+					{@render render_nodes(fragment.nodes, fragment.start_index)}
+				</MarkComponent>
+			{:else}
+				{@render render_nodes(fragment.nodes, fragment.start_index)}
+			{/if}
 		{/if}
 	{/each}
 	{#if node_ids.length > 0}

package/src/lib/NodeCaret.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	/**
 	 * Visual insertion caret rendered inside the active insertion marker.
 	 *

package/src/lib/NodeGap.svelte

@@ -1,6 +1,6 @@
-<script module>
-	function cycle_z_index(/** @type {MouseEvent} */ e) {
-		const el = /** @type {HTMLElement} */ (e.currentTarget);
+<script module lang="ts">
+	function cycle_z_index(e: MouseEvent) {
+		const el = e.currentTarget as HTMLElement;
 		if (el.hasAttribute('data-sent-to-back')) {
 			document.querySelectorAll('.svedit-selectable[data-sent-to-back]').forEach((prev) => {
 				prev.removeAttribute('data-sent-to-back');
@@ -10,9 +10,11 @@
 	}
 </script>
 
-<script>
+<script lang="ts">
 	import { serialize_path } from './utils.js';
 	import { getContext } from 'svelte';
+	import { should_position_gap } from './node_visibility.svelte.js';
+	import type { DocumentPath, SveditRenderContext } from './types.js';
 
 	/**
 	 * ┌─────────────────────────────────────────────────────────────────┐
@@ -37,10 +39,13 @@
 	 *
 	 * Always present in the DOM when editable (stable structure for
 	 * selection anchoring, scrollTo, etc.). Anchor positioning is
-	 * activated lazily via the `.positioned` class, toggled imperatively
-	 * by the IO callback / MO / bootstrap in node_visibility — keeps
-	 * NodeGap allocation-free of per-instance Svelte signals, which
-	 * matters at 1000+ NodeGaps per scroll frame.
+	 * activated lazily via the `.positioned` class, derived reactively
+	 * from the visibility registry's array_indices / edge_map. Svelte's
+	 * reactive collections track reads at per-key granularity, so a
+	 * registry write only
+	 * re-evaluates the adjacent gaps. Applying the class declaratively
+	 * (instead of imperative classList toggles) means it survives DOM
+	 * recreation without a document change (e.g. dev-mode HMR).
 	 *
 	 * `position-visibility: anchors-visible` does NOT skip anchor
 	 * resolution — the browser resolves all anchor() then hides the
@@ -54,14 +59,35 @@
 	 * sure your custom component also handles read-only mode by rendering a
 	 * plain `.node-gap` placeholder without editable internals.
 	 */
-	const svedit = getContext('svedit');
-	let { array_path, offset, count, empty = false } = $props();
+	const svedit = getContext<SveditRenderContext>('svedit');
+	let {
+		array_path,
+		offset,
+		count,
+		empty = false
+	}: { array_path: DocumentPath; offset: number; count: number; empty?: boolean } = $props();
 	let is_editable = $derived(svedit.editable);
 
 	let is_first = $derived(offset === 0);
 	let is_last = $derived(offset === count);
 	let type = $derived(is_first ? 'gap-before' : 'gap-after');
 
+	let path_str = $derived(serialize_path(array_path));
+	// Two-derived split is load-bearing: get_array_indices lazily
+	// creates the set, and Svelte doesn't track deps on state created
+	// inside the reading derived — so acquire here, read in `positioned`.
+	let near_indices = $derived(svedit.visibility_registry.get_array_indices(path_str));
+	let positioned = $derived(
+		is_editable &&
+			should_position_gap(
+				near_indices,
+				svedit.visibility_registry.edge_map.get(path_str),
+				offset,
+				is_last,
+				empty
+			)
+	);
+
 	let gap_style = $derived.by(() => {
 		if (!is_editable) return '';
 		const prev_idx = offset - 1;
@@ -87,8 +113,9 @@
 		class:gap-after={!is_first}
 		class:empty
 		class:last={is_last}
+		class:positioned
 		data-type={type}
-		data-gap-array-path={serialize_path(array_path)}
+		data-gap-array-path={path_str}
 		data-gap-offset={offset}
 		style={gap_style}
 	>
@@ -111,9 +138,30 @@
 	}
 
 	/* ------------------------------------------------------------------ */
-	/* Un-positioned: minimal in-DOM presence, no anchor resolution        */
+	/* Un-positioned: no layout box at all                                 */
 	/* ------------------------------------------------------------------ */
 
+	/*
+	 * display: none is load-bearing for large documents. A zero-size
+	 * absolutely-positioned selectable still belongs to the containing
+	 * block's out-of-flow list, and the browser lays out EVERY such box
+	 * on EVERY layout pass — measured ~430ms per pass at 2000 nodes
+	 * (~3500 gaps) in Chrome vs ~23ms with the boxes removed. That cost
+	 * hits every keystroke (the per-change reconcile reads a rect for
+	 * every node, and selection rendering forces layout), every window
+	 * resize frame, and every scroll-triggered layout.
+	 *
+	 * Off-screen gaps therefore contribute no layout box. DOM structure
+	 * stays stable (the .node-gap wrapper and selectable elements remain),
+	 * and DOM Ranges may still point into display:none elements, so
+	 * programmatic node selections targeting off-screen gaps keep working.
+	 * Empty-array gaps are excluded: they must stay clickable/visible even
+	 * before reconcile positions them.
+	 */
+	:global(.node-gap:not(.positioned):not(.empty) .svedit-selectable) {
+		display: none;
+	}
+
 	:global(.node-gap:not(.positioned) .svedit-selectable) {
 		position: absolute;
 		pointer-events: none;

package/src/lib/NodeGapMarkers.svelte

@@ -1,7 +1,8 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte';
 	import NodeCaret from './NodeCaret.svelte';
 	import { PATH_SEPARATOR, serialize_path } from './utils.js';
+	import type { DocumentPath, SveditRenderContext } from './types.js';
 
 	/**
 	 * ┌─────────────────────────────────────────────────────────────────┐
@@ -28,9 +29,9 @@
 	 * re-evaluates when THIS array's visible-index set changes.
 	 */
 
-	let { path, count } = $props();
+	let { path, count }: { path: DocumentPath; count: number } = $props();
 
-	const svedit = getContext('svedit');
+	const svedit = getContext<SveditRenderContext>('svedit');
 	let path_str = $derived(serialize_path(path));
 	let visible = $derived(svedit.visibility_registry.get_array_indices(path_str));
 
@@ -51,8 +52,16 @@
 			? `;--_f:${anchor_prefix}${PATH_SEPARATOR}0;--_s:${anchor_prefix}${PATH_SEPARATOR}1`
 			: '';
 
-		/** @type {Array<{key:string,offset:number,type:string,vars:string,is_first:boolean,is_last:boolean,has_pair:boolean}>} */
-		const result = [];
+		type GapMarker = {
+			key: string;
+			offset: number;
+			type: string;
+			vars: string;
+			is_first: boolean;
+			is_last: boolean;
+			has_pair: boolean;
+		};
+		const result: GapMarker[] = [];
 
 		if (count === 0) {
 			if (visible.has(0)) {
@@ -73,15 +82,15 @@
 		// 1000 nodes with ~30 visible, this drops 1001 SvelteSet/SvelteMap
 		// reads per re-derivation to ~30. Filter stale indices >= count
 		// that may briefly remain after a node delete (until MO fires).
-		const sorted = [];
+		const sorted: number[] = [];
 		for (const i of visible) {
 			if (i >= 0 && i < count) sorted.push(i);
 		}
 		sorted.sort((a, b) => a - b);
 		if (sorted.length === 0) return result;
 
-		const offsets = [];
-		function add_offset(offset) {
+		const offsets: number[] = [];
+		function add_offset(offset: number) {
 			if (!offsets.includes(offset)) offsets.push(offset);
 		}
 
@@ -112,7 +121,7 @@
 				? `${g_prefix}${PATH_SEPARATOR}0-gap-before`
 				: `${g_prefix}${PATH_SEPARATOR}${offset - 1}-gap-after`;
 
-			let type, vars;
+			let type: string, vars: string;
 			if (is_first || is_last) {
 				type = 'gap-edge';
 				const adjacent = is_first
@@ -646,4 +655,4 @@
 		outline: 1px solid blue;
 		outline-offset: 0.5px;
 	} */
-</style>
+</style>

package/src/lib/NodeSelectionMarkers.svelte

@@ -1,12 +1,13 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte';
 	import { serialize_path } from './utils.js';
+	import type { DocumentPath, SveditContext } from './types.js';
 
-	const svedit = getContext('svedit');
+	const svedit = getContext<SveditContext>('svedit');
 	let selected_node_paths = $derived(get_selected_node_paths());
 
-	function get_selected_node_paths() {
-		const paths = [];
+	function get_selected_node_paths(): DocumentPath[] | undefined {
+		const paths: DocumentPath[] = [];
 		const selection = svedit.session.selection;
 		if (!selection) return;
 		if (selection.type !== 'node' || selection.anchor_offset === selection.focus_offset) return;
@@ -36,10 +37,23 @@
 <style>
 	.selected-node-overlay,
 	.selected-property-overlay {
+		/* Selection frame: a single 1px outline, offset -0.5px so the
+		   hairline centers on the node's edge and neighboring frames merge
+		   into one shared line. Alternatives tried and rejected:
+		   - Plain 1px border: adjacent selected nodes stack their borders
+		     into a 2px seam between them, which looks ugly.
+		   - Thick translucent frame (8px border) plus an inner hairline
+		     outline: multiple nested lines take more cognitive effort to
+		     parse than a single line.
+		   - Inset box-shadow rings (1px stroke + 8px translucent): same
+		     layered-frame look, same objection.
+		   Performance note: outlines don't participate in layout, so
+		   selection changes can't trigger reflows. */
 		position: absolute;
 		background: var(--svedit-editing-fill);
-		border: 1px solid var(--svedit-editing-stroke);
-		border-radius: 2px;
+		outline: 1px solid var(--svedit-editing-stroke);
+		outline-offset: -0.5px;
+		border-radius: 1px;
 		top: anchor(top);
 		left: anchor(left);
 		bottom: anchor(bottom);