svedit 0.12.0 → 0.13.0

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);