svedit 0.12.0 → 0.14.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';
 
 	/**
 	 * ┌─────────────────────────────────────────────────────────────────┐
@@ -26,11 +27,20 @@
 	 * Reads visibility state directly from the registry. SvelteSet's per-key
 	 * tracking on `.has()` and iteration means this component only
 	 * re-evaluates when THIS array's visible-index set changes.
+	 *
+	 * The active marker (the one carrying the caret) additionally renders the
+	 * consumer's `system_components.node_gap_tools` component when configured
+	 * — an extension point for gap-scoped tools (e.g. an insert button).
+	 * Rendering inside the marker means the tool inherits --row for
+	 * orientation-aware styling and shows/hides together with the caret.
+	 * The marker has pointer-events: none — interactive tools must set
+	 * pointer-events: auto themselves.
 	 */
 
-	let { path, count } = $props();
+	let { path, count }: { path: DocumentPath; count: number } = $props();
 
-	const svedit = getContext('svedit');
+	const svedit = getContext<SveditRenderContext>('svedit');
+	let NodeGapTools = $derived(svedit.session.config.system_components?.node_gap_tools);
 	let path_str = $derived(serialize_path(path));
 	let visible = $derived(svedit.visibility_registry.get_array_indices(path_str));
 
@@ -51,8 +61,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 +91,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 +130,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
@@ -154,6 +172,9 @@
 	>
 		{#if gap.key === caret_gap_key}
 			<NodeCaret />
+			{#if NodeGapTools}
+				<NodeGapTools {path} offset={gap.offset} is_first={gap.is_first} is_last={gap.is_last} />
+			{/if}
 		{/if}
 	</div>
 {/each}
@@ -161,6 +182,7 @@
 <style>
 	/*
 	 * Public customization tokens (set on an ancestor or this component):
+	 * --editing-stroke
 	 * --node-caret-gap-color
 	 * --node-caret-symbol-size
 	 * --node-caret-symbol-stroke
@@ -602,8 +624,8 @@
 				calc(var(--_mi) + var(--_R) * 9999999px),
 				calc(50% + var(--_C) * 9999999px)
 			);
-			border-top: calc(var(--_C) * 1px) dashed var(--node-caret-gap-color, var(--svedit-canvas-stroke));
-			border-left: calc(var(--_R) * 1px) dashed var(--node-caret-gap-color, var(--svedit-canvas-stroke));
+			border-top: calc(var(--_C) * 1px) dashed var(--node-caret-gap-color, var(--editing-stroke));
+			border-left: calc(var(--_R) * 1px) dashed var(--node-caret-gap-color, var(--editing-stroke));
 			transform:
 				translateY(calc(var(--_C) * -0.5px))
 				translateX(calc(var(--_R) * -0.5px));
@@ -617,7 +639,7 @@
 		/* Empty array marker (dashed outline for discoverability). */
 		&.gap-empty::before {
 			inset: 0px;
-			border: var(--node-caret-empty-border, 1px dashed var(--node-caret-gap-color, var(--svedit-canvas-stroke)));
+			border: var(--node-caret-empty-border, 1px dashed var(--node-caret-gap-color, var(--editing-stroke)));
 			border-radius: var(--node-caret-empty-border-radius, 3px);
 		}
 
@@ -630,7 +652,7 @@
 			top: 50%;
 			left: 50%;
 			transform: translate(-50%, -50%);
-			background: var(--node-caret-symbol-bg, var(--node-caret-gap-color, var(--svedit-canvas-stroke)));
+			background: var(--node-caret-symbol-bg, var(--node-caret-gap-color, var(--editing-stroke)));
 			mask: var(--node-caret-symbol-mask,
 				linear-gradient(black, black) center / 100% var(--node-caret-symbol-stroke, 1px) no-repeat,
 				linear-gradient(black, black) center / var(--node-caret-symbol-stroke, 1px) 100% no-repeat
@@ -646,4 +668,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;
+		background: var(--editing-muted);
+		outline: 1px solid var(--editing);
+		outline-offset: -0.5px;
+		border-radius: 1px;
 		top: anchor(top);
 		left: anchor(left);
 		bottom: anchor(bottom);