svedit 0.6.3 → 0.7.0

package/dist/NodeArrayProperty.svelte

@@ -1,24 +1,39 @@
 <script>
-	import { getContext } from 'svelte';
+	import { getContext, setContext } from 'svelte';
 	import UnknownNode from './UnknownNode.svelte';
 	import { snake_to_pascal } from './utils.js';
+	import DefaultNodeGap from './NodeGap.svelte';
+	import DefaultNodeGapMarkers from './NodeGapMarkers.svelte';
 
 	/** @import { NodeArrayPropertyProps } from './types.d.ts'; */
 
 	const svedit = getContext('svedit');
-	let NodeCursorTrap = $derived(svedit.session.config.system_components.NodeCursorTrap);
+	let NodeGap = $derived(svedit.session.config.system_components?.NodeGap ?? DefaultNodeGap);
+	let NodeGapMarkers = $derived(svedit.session.config.system_components?.NodeGapMarkers ?? DefaultNodeGapMarkers);
 
 	/** @type {NodeArrayPropertyProps} */
-	let { path, tag = 'div', class: css_class } = $props();
+	let { path, tag = 'div', class: css_class, style = '', ...rest } = $props();
 
 	let nodes = $derived(
 		svedit.session
 			.get(path)
 			.map(/** @param {string} node_id */ (node_id) => svedit.session.get(node_id))
 	);
-</script>
 
-<svelte:element this={tag} class={css_class} data-type="node_array" data-path={path.join('.')}>
+	// Expose array metadata to child Node.svelte instances via context,
+	// avoiding expensive session.inspect() / session.get() calls per node.
+	setContext('node_array_meta', {
+		get length() { return nodes.length; }
+	});
+</script>
+<!-- we use the anchor of node_array in Overlays.svelte to position the last insertion point in a horizontal layout based on the right edge of the container -->
+<svelte:element 
+	this={tag} 
+	class={css_class} 
+	data-type="node_array" 
+	data-path={path.join('.')} 
+	style="anchor-name: --{path.join('-')};{style ? ` ${style}` : ''}" {...rest}
+>
 	{#if nodes.length === 0 && svedit.editable}
 		<!--
 		Experimental: We'll let .empty-node-array act like a node, so the existing
@@ -32,10 +47,12 @@
 			data-type="node"
 			style="anchor-name: --{[...path, 0].join(
 				'-'
-			)}; position: relative; min-height: 40px; min-width: 40px;"
-		>
-			<NodeCursorTrap path={[...path, 0]} type="position-zero-cursor-trap" />
-		</div>
+			)}; min-height: 40px; min-width: 24px;"
+		></div>
+		<!-- Sibling (not child) of .empty-node-array so its .svedit-selectable
+		     resolves anchor positioning against the shared containing block,
+		     not the placeholder which inherits .node positioning styles. -->
+		<NodeGap path={[...path, 0]} type="gap-before" empty />
 	{/if}
 	{#each nodes as node, index (index)}
 		{@const Component = svedit.session.config.node_components[snake_to_pascal(node.type)]}
@@ -45,4 +62,7 @@
 			<UnknownNode path={[...path, index]} />
 		{/if}
 	{/each}
+	{#if svedit.editable && NodeGapMarkers}
+		<NodeGapMarkers {path} />
+	{/if}
 </svelte:element>

package/dist/NodeArrayProperty.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeArrayProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NodeArrayProperty.svelte.js"],"names":[],"mappings":";;;;;AAgDA,mHAAgE"}
+{"version":3,"file":"NodeArrayProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NodeArrayProperty.svelte.js"],"names":[],"mappings":";;;;;AA8DA,mHAAgE"}

package/dist/NodeCaret.svelte

@@ -0,0 +1,71 @@
+<script>
+	/**
+	 * Visual insertion caret rendered inside the active insertion marker.
+	 *
+	 * This component is presentation-only. It reads styling tokens for
+	 * color/shape/animation and switches orientation via var(--row, 1)
+	 * with the * 99999 multiplier trick — works in all browsers.
+	 */
+</script>
+
+<div class="caret" role="none"></div>
+
+<style>
+	@keyframes node-caret-blink {
+		0%, 60% { opacity: 1; }
+		68% { opacity: 0; }
+		88% { opacity: 0; }
+		100% { opacity: 1; }
+	}
+
+	.caret {
+		--_R: var(--row, 1);
+		--_C: calc(1 - var(--row, 1));
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		z-index: var(--node-caret-z-index, 20);
+		animation: var(
+			--node-caret-animation,
+			node-caret-blink var(--node-caret-blink-duration, 1.1s) ease-in-out infinite
+		);
+	}
+
+	.caret::before {
+		--_ci: var(--node-caret-inset, var(--node-caret-marker-inset, 2px));
+		--_ct: var(--node-caret-thickness, 2px);
+		--_cp: var(--node-caret-row-inline-position, 50%);
+		content: '';
+		position: absolute;
+		background: var(--node-caret-bg, var(--svedit-editing-stroke));
+		/* Increase the visibility of the caret by contrasting it with a box shadow that's the inverted brightness of the current text color. */
+		/* Component developers must set their background color and text color on the node itself, not a child element, for this to work. */
+		box-shadow: var(--node-caret-shadow, 0 0 0 0.5px oklch(from currentColor calc(1 - l) c h));
+		border: var(--node-caret-border, none);
+		border-radius: var(--node-caret-radius, 1px);
+		/*
+		 * Column: horizontal line at 50% — top=50%, bottom=50%-thickness.
+		 * Row: vertical line at --_cp — left=cp, right=100%-cp-thickness.
+		 * No explicit height/width — inset pairs control dimensions.
+		 */
+		top: min(
+			calc(50% + var(--_R) * 99999px),
+			calc(var(--_ci) + var(--_C) * 99999px)
+		);
+		bottom: min(
+			calc(50% - var(--_ct) + var(--_R) * 99999px),
+			calc(var(--_ci) + var(--_C) * 99999px)
+		);
+		left: min(
+			calc(var(--_ci) + var(--_R) * 99999px),
+			calc(var(--_cp) + var(--_C) * 99999px)
+		);
+		right: min(
+			calc(var(--_ci) + var(--_R) * 99999px),
+			calc(100% - var(--_cp) - var(--_ct) + var(--_C) * 99999px)
+		);
+		transform:
+			translateY(calc(var(--_C) * -0.5px))
+			translateX(calc(var(--_R) * -0.5px));
+	}
+</style>

package/dist/NodeCaret.svelte.d.ts

@@ -0,0 +1,27 @@
+export default NodeCaret;
+type NodeCaret = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const NodeCaret: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=NodeCaret.svelte.d.ts.map

package/dist/NodeCaret.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeCaret.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NodeCaret.svelte.js"],"names":[],"mappings":";;;;;;;;AA4BA;;;;mBAAqH;6CATxE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/NodeGap.svelte

@@ -0,0 +1,249 @@
+<script>
+	/**
+	 * Invisible keyboard caret selectable and gap hit area.
+	 *
+	 * Always present in the DOM when editable (stable structure for
+	 * selection anchoring, scrollTo, etc.). Anchor positioning is
+	 * activated lazily via the `positioned` prop — only gaps near the
+	 * viewport pay the layout cost of anchor() resolution. Off-screen
+	 * gaps are zero-size static elements with no layout cost.
+	 *
+	 * `position-visibility: anchors-visible` does NOT skip anchor
+	 * resolution — the browser resolves all anchor() then hides the
+	 * result. The `.positioned` class toggle is required to prevent
+	 * O(N) anchor resolution on every layout pass.
+	 *
+	 * Row/column detection uses var(--row, 1) with the * 99999 multiplier
+	 * trick — no @container style() queries, works in all browsers.
+	 *
+	 * Node.svelte does NOT set position: relative, so the selectable's
+	 * containing block is a higher ancestor that contains all sibling
+	 * nodes, making cross-sibling anchor references valid.
+	 */
+	let { path, type, empty = false, last = false, positioned = true } = $props();
+
+	let gap_style = $derived.by(() => {
+		const p = path.join('-');
+		const arr = path.slice(0, -1).join('-');
+		const idx = parseInt(String(path.at(-1)), 10);
+		return `--_pa:--${p};--_next:--${arr}-${idx + 1};--_container:--${arr}`;
+	});
+
+	let anchor_name = $derived(`--g-${path.join('-')}-${type}`);
+</script>
+
+<div
+	class="node-gap {type}"
+	class:empty
+	class:last
+	class:positioned
+	data-type={type}
+	style={gap_style}
+>
+	<div class="svedit-selectable" style="anchor-name:{anchor_name}"><br /></div>
+</div>
+
+
+<style>
+	.node-gap {
+		height: 0;
+		overflow: visible;
+		outline: none;
+		pointer-events: none;
+		caret-color: transparent;
+	}
+
+	/* ------------------------------------------------------------------ */
+	/* Un-positioned: minimal in-DOM presence, no anchor resolution        */
+	/* ------------------------------------------------------------------ */
+
+	.node-gap:not(.positioned) .svedit-selectable {
+		content-visibility: hidden;
+	  contain-intrinsic-size: 0 0;
+		position: static;
+		pointer-events: none;
+		width: 0;
+		height: 0;
+		overflow: clip;
+	}
+
+	/* ------------------------------------------------------------------ */
+	/* Positioned: full anchor layout                                      */
+	/* ------------------------------------------------------------------ */
+
+	/*
+	 * Anchor references resolved from CSS variable names passed via
+	 * inline style (--_pa, --_next, --_container). Same pattern as
+	 * NodeGapMarkers — keeps JS minimal and anchor() in CSS.
+	 */
+	.node-gap.positioned {
+		--_s-t: anchor(var(--_pa) top);
+		--_s-b: anchor(var(--_pa) bottom);
+		--_s-l: anchor(var(--_pa) left);
+		--_s-r: anchor(var(--_pa) right);
+	}
+	.positioned.gap-after:not(.last) {
+		--_n-t: anchor(var(--_next) top);
+		--_n-l: anchor(var(--_next) left);
+		--_c-r: anchor(var(--_container) right);
+	}
+	.positioned.gap-after.last,
+	.positioned.gap-before.empty {
+		--_c-t: anchor(var(--_container) top);
+		--_c-b: anchor(var(--_container) bottom);
+		--_c-l: anchor(var(--_container) left);
+		--_c-r: anchor(var(--_container) right);
+	}
+
+	.positioned .svedit-selectable {
+		--_eg: var(--node-caret-edge-gap, 24px);
+		--_gm: var(--node-caret-gap-min-size, 16px);
+		--_R: var(--row, 1);
+		--_C: calc(1 - var(--row, 1));
+		user-select: none;
+		pointer-events: auto;
+		position: absolute;
+		position-anchor: var(--_pa);
+		position-visibility: anchors-visible;
+		z-index: var(--node-caret-gap-z-index, 1);
+		cursor: pointer;
+	}
+
+	/* ------------------------------------------------------------------ */
+	/* Merged column / row layout positioning                              */
+	/*                                                                    */
+	/* Uses var(--row, 1) with the * 99999 multiplier trick:              */
+	/*   --_R = var(--row, 1)          → 1 in row, 0 in column           */
+	/*   --_C = calc(1 - var(--row, 1))→ 1 in column, 0 in row           */
+	/* Inside min(), + var(--_R) * 99999px disables a col branch in row,  */
+	/* + var(--_C) * 99999px disables a row branch in column.             */
+	/* ------------------------------------------------------------------ */
+
+	/* Between two siblings: col centers vertically, row centers horizontally */
+	.positioned.gap-after:not(.last) .svedit-selectable {
+		--_mid: calc((var(--_s-b) + var(--_n-t)) / 2 - var(--_gm) / 2);
+		top: min(
+			calc(var(--_s-b) + var(--_R) * 99999px),
+			calc(var(--_mid) + var(--_R) * 99999px),
+			calc(var(--_s-t) + var(--_C) * 99999px)
+		);
+		bottom: min(
+			calc(var(--_n-t) + var(--_R) * 99999px),
+			calc(var(--_mid) + var(--_R) * 99999px),
+			calc(var(--_s-b) + var(--_C) * 99999px)
+		);
+		left: min(
+			calc(var(--_s-l) + var(--_R) * 99999px),
+			calc(var(--_s-r) + var(--_C) * 99999px),
+			calc(
+				(var(--_s-r) + var(--_n-l)) / 2
+				- var(--_gm) / 2
+				+ max(0px, var(--_s-r) - var(--_n-l)) * 999
+				+ var(--_C) * 99999px
+			),
+			calc(100% - var(--_eg) + var(--_C) * 99999px)
+		);
+		right: min(
+			calc(var(--_s-r) + var(--_R) * 99999px),
+			calc(
+				max(
+					0px,
+					min(
+						var(--_n-l),
+						calc(
+							(var(--_s-r) + var(--_n-l)) / 2
+							- var(--_gm) / 2
+						),
+						max(
+							min(
+								calc(var(--_c-r) - var(--_eg)),
+								calc(var(--_s-r) - var(--_eg))
+							),
+							calc(
+								var(--_s-r)
+								- (var(--_n-l) - var(--_s-r)) * 999
+							)
+						)
+					)
+				)
+				+ var(--_C) * 99999px
+			)
+		);
+		min-height: calc(var(--_gm) * var(--_C));
+		min-width: calc(var(--_gm) * var(--_R));
+	}
+
+	/* After last node: col extends down, row extends right */
+	.positioned.gap-after.last .svedit-selectable {
+		top: min(
+			calc(var(--_s-b) + var(--_R) * 99999px),
+			calc(var(--_s-t) + var(--_C) * 99999px)
+		);
+		bottom: min(
+			calc(var(--_s-b) - var(--_eg) + var(--_R) * 99999px),
+			calc(var(--_s-b) + var(--_C) * 99999px)
+		);
+		left: min(
+			calc(var(--_s-l) + var(--_R) * 99999px),
+			calc(var(--_s-r) + var(--_C) * 99999px),
+			calc(100% - var(--_eg) + var(--_C) * 99999px)
+		);
+		right: min(
+			calc(var(--_s-r) + var(--_R) * 99999px),
+			calc(
+				max(
+					0px,
+					min(
+						calc(var(--_c-r) - var(--_eg)),
+						calc(var(--_s-r) - var(--_eg))
+					)
+				)
+				+ var(--_C) * 99999px
+			)
+		);
+		min-height: calc(var(--_eg) * var(--_C));
+		min-width: calc(var(--_eg) * var(--_R));
+	}
+
+	/* Before first node: col extends up, row extends left */
+	.positioned.gap-before:not(.empty) .svedit-selectable {
+		top: min(
+			calc(
+				max(0px, var(--_s-t) - var(--_eg))
+				+ var(--_R) * 99999px
+			),
+			calc(var(--_s-t) + var(--_C) * 99999px)
+		);
+		bottom: min(
+			calc(var(--_s-t) + var(--_R) * 99999px),
+			calc(var(--_s-b) + var(--_C) * 99999px)
+		);
+		left: min(
+			calc(var(--_s-l) + var(--_R) * 99999px),
+			calc(
+				max(0px, var(--_s-l) - var(--_eg))
+				+ var(--_C) * 99999px
+			)
+		);
+		right: min(
+			calc(var(--_s-r) + var(--_R) * 99999px),
+			calc(var(--_s-l) + var(--_C) * 99999px)
+		);
+		min-height: calc(var(--_eg) * var(--_C));
+		min-width: calc(var(--_eg) * var(--_R));
+	}
+
+	/* Empty array: spans the outermost edges of placeholder and container. */
+	.positioned.gap-before.empty .svedit-selectable {
+		top: min(var(--_s-t), var(--_c-t));
+		bottom: min(var(--_s-b), var(--_c-b));
+		left: min(var(--_s-l), var(--_c-l));
+		right: min(var(--_s-r), var(--_c-r));
+	}
+
+	/* Debugging styles  */
+	/* .positioned .svedit-selectable {
+		outline: 0.1px solid rgba(238, 0, 255, 0.5);
+		outline-offset: -0.5px;
+	} */
+</style>

package/dist/NodeGap.svelte.d.ts

@@ -0,0 +1,20 @@
+export default NodeGap;
+type NodeGap = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const NodeGap: import("svelte").Component<{
+    path: any;
+    type: any;
+    empty?: boolean;
+    last?: boolean;
+    positioned?: boolean;
+}, {}, "">;
+type $$ComponentProps = {
+    path: any;
+    type: any;
+    empty?: boolean;
+    last?: boolean;
+    positioned?: boolean;
+};
+//# sourceMappingURL=NodeGap.svelte.d.ts.map

package/dist/NodeGap.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeGap.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NodeGap.svelte.js"],"names":[],"mappings":";;;;;AA8CA;UArB0B,GAAG;UAAQ,GAAG;YAAU,OAAO;WAAS,OAAO;iBAAe,OAAO;WAqBzC;wBArBpC;IAAE,IAAI,EAAE,GAAG,CAAC;IAAC,IAAI,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE"}