svedit 0.7.1 → 0.8.0

package/dist/Svedit.svelte

@@ -269,6 +269,10 @@
 		if (!canvas_el?.contains(range.commonAncestorContainer)) return;
 		let selection = __get_selection_from_dom();
 		if (selection) {
+			// Avoid assigning a new object reference when the selection is
+			// structurally identical — prevents a redundant $effect cycle
+			// (render_selection → scrollIntoView) on every DOM layout change.
+			if (JSON.stringify(selection) === JSON.stringify(session.selection)) return;
 			session.selection = selection;
 		}
 	}
@@ -764,6 +768,23 @@ ${fallback_html}`;
 		canvas_el?.focus();
 	}
 
+	/**
+	 * When a DOM selection endpoint lands in a sibling NodeGap (not inside
+	 * a node), resolves the adjacent node element for the walk-up algorithm.
+	 * @param {HTMLElement} el
+	 * @returns {HTMLElement | null}
+	 */
+	function __resolve_node_from_gap(el) {
+		const gap = /** @type {HTMLElement | null} */ (el.closest('[data-gap-array-path]'));
+		if (!gap) return null;
+		const array_path = gap.dataset.gapArrayPath;
+		const offset = parseInt(gap.dataset.gapOffset, 10);
+		const node_idx = offset > 0 ? offset - 1 : 0;
+		return /** @type {HTMLElement | null} */ (
+			canvas_el.querySelector(`[data-path="${array_path}.${node_idx}"][data-type="node"]`)
+		);
+	}
+
 	/**
 	 * Extracts a NodeSelection from the current DOM selection.
 	 *
@@ -783,56 +804,30 @@ ${fallback_html}`;
 		if (focus_node.nodeType !== Node.ELEMENT_NODE) focus_node = focus_node.parentElement;
 		if (anchor_node.nodeType !== Node.ELEMENT_NODE) anchor_node = anchor_node.parentElement;
 
-		// EDGE CASE: Let's first check if we are in a node gap for node carets
-		let gap_after_el =
-			focus_node && focus_node?.closest('[data-type="gap-after"]');
-		if (gap_after_el && focus_node === anchor_node) {
-			// Find the node that this gap belongs to
-			let node = /** @type {HTMLElement} */ (gap_after_el.closest('[data-type="node"]'));
-			if (!node) {
-				console.log('No corresponding node found for gap-after');
-				return null;
-			}
-			const node_path = /** @type {DocumentPath} */ (node.dataset.path.split('.'));
-			const node_index = parseInt(String(node_path.at(-1)), 10);
-
-			return {
-				type: 'node',
-				path: node_path.slice(0, -1),
-				anchor_offset: node_index + 1,
-				focus_offset: node_index + 1
-			};
-		}
-
-		// EDGE CASE: Let's check if we are in a gap-before for node_arrays.
-		let gap_before_el = focus_node.closest('[data-type="gap-before"]');
-		if (gap_before_el && focus_node === anchor_node) {
-			const node_array_el = /** @type {HTMLElement} */ (
-				gap_before_el.closest('[data-type="node_array"]')
-			);
-			const node_array_path = node_array_el.dataset.path.split('.');
+		// EDGE CASE: Collapsed selection inside a node gap (gap-after or gap-before).
+		// Gaps are siblings of nodes with data-gap-array-path and data-gap-offset.
+		const gap_el = /** @type {HTMLElement | null} */ (
+			focus_node.closest('[data-gap-array-path]')
+		);
+		if (gap_el && focus_node === anchor_node) {
+			const array_path = gap_el.dataset.gapArrayPath.split('.');
+			const gap_offset = parseInt(gap_el.dataset.gapOffset, 10);
 			return {
 				type: 'node',
-				path: node_array_path,
-				anchor_offset: 0,
-				focus_offset: 0
+				path: array_path,
+				anchor_offset: gap_offset,
+				focus_offset: gap_offset
 			};
 		}
 
-		let focus_root = /** @type {HTMLElement} */ (
-			focus_node.closest('[data-path][data-type="node"]')
-		);
+		let focus_root = __resolve_node_from_gap(focus_node)
+			?? /** @type {HTMLElement} */ (focus_node.closest('[data-path][data-type="node"]'));
 		if (!focus_root) return null;
 
-		let anchor_root = /** @type {HTMLElement} */ (
-			anchor_node.closest('[data-path][data-type="node"]')
-		);
+		let anchor_root = __resolve_node_from_gap(anchor_node)
+			?? /** @type {HTMLElement} */ (anchor_node.closest('[data-path][data-type="node"]'));
 		if (!anchor_root) return null;
 
-		if (!(focus_root && anchor_root)) {
-			return null;
-		}
-
 		let focus_root_path = focus_root.dataset.path.split('.');
 		let anchor_root_path = anchor_root.dataset.path.split('.');
 		let focus_node_depth = focus_root_path.length;
@@ -872,6 +867,10 @@ ${fallback_html}`;
 			}
 		}
 
+		// If both paths walked up to the root node, there's no common parent node_array
+		// (e.g. selecting between nav and page body). The resulting path would be empty.
+		if (anchor_root_path.length <= 1) return null;
+
 		let anchor_offset = parseInt(anchor_root_path.at(-1));
 		let focus_offset = parseInt(focus_root_path.at(-1));
 
@@ -1094,106 +1093,68 @@ ${fallback_html}`;
 	}
 
 	function __get_node_element(node_array_path, node_offset) {
-		const node_array_el = canvas_el.querySelector(
-			`[data-path="${node_array_path}"][data-type="node_array"]`
+		return canvas_el.querySelector(
+			`[data-path="${node_array_path}.${node_offset}"][data-type="node"]`
 		);
-		if (!node_array_el) return null;
-
-		const node_elements = node_array_el.children;
-		if (node_elements.length === 0) return null;
-
-		return node_elements[node_offset];
 	}
 
 	function __render_node_selection() {
 		const selection = /** @type {NodeSelection} */ (session.selection);
 		const node_array_path = selection.path.join('.');
-		let is_collapsed = selection.anchor_offset === selection.focus_offset;
-		let is_backward = !is_collapsed && selection.anchor_offset > selection.focus_offset;
-
-		// We need to translate the cusor offset to node offsets now
-		let anchor_node_offset, focus_node_offset;
+		const is_collapsed = selection.anchor_offset === selection.focus_offset;
+		const is_backward = !is_collapsed && selection.anchor_offset > selection.focus_offset;
 
-		if (is_collapsed) {
-			anchor_node_offset = Math.max(0, selection.anchor_offset - 1);
-			focus_node_offset = Math.max(0, selection.focus_offset - 1);
-		} else if (is_backward) {
-			anchor_node_offset = selection.anchor_offset - 1;
-			focus_node_offset = selection.focus_offset;
-		} else {
-			anchor_node_offset = selection.anchor_offset;
-			focus_node_offset = selection.focus_offset - 1;
-		}
-
-		const anchor_node = __get_node_element(node_array_path, anchor_node_offset);
-		const focus_node = __get_node_element(node_array_path, focus_node_offset);
+		const node_array_el = canvas_el.querySelector(
+			`[data-path="${node_array_path}"][data-type="node_array"]`
+		);
+		if (!node_array_el) return;
 
-		if (!anchor_node || !focus_node) return;
 		const dom_selection = window.getSelection();
 		const range = window.document.createRange();
 
-		if (is_collapsed) {
-			// Caret position in between two nodes or at the very beginning/end of a node_array
-			// IMPORTANT: We need to look for direct children of anchor_node to find the right node gap.
-			const gap_selector = selection.anchor_offset === 0
-				? '.gap-before'
-				: '.gap-after';
-			// In empty arrays the node gap is a sibling of the placeholder, not a child
-			const gap_el =
-				anchor_node.querySelector(`:scope > ${gap_selector}`) ??
-				anchor_node.parentElement?.querySelector(`:scope > ${gap_selector}`);
+		const gap_selector = (offset) =>
+			`[data-gap-array-path="${node_array_path}"][data-gap-offset="${offset}"]`;
 
+		if (is_collapsed) {
+			const gap_el = node_array_el.querySelector(gap_selector(selection.anchor_offset));
 			if (!gap_el) return;
-			range.setStart(gap_el, 1);
-			range.setEnd(gap_el, 1);
+			// Target .svedit-selectable (has a box), not gap_el which is
+			// display:contents and would cause the browser to normalize
+			// the range into the parent, breaking read-back.
+			const selectable = gap_el.querySelector('.svedit-selectable');
+			if (!selectable) return;
+			range.setStart(selectable, 1);
+			range.setEnd(selectable, 1);
 			dom_selection.removeAllRanges();
 			dom_selection.addRange(range);
 		} else {
-			// Expanded selection (one or more nodes are fully selectd)
+			const anchor_gap = node_array_el.querySelector(gap_selector(selection.anchor_offset));
+			const focus_gap = node_array_el.querySelector(gap_selector(selection.focus_offset));
+			if (!anchor_gap || !focus_gap) return;
+			const anchor_sel = anchor_gap.querySelector('.svedit-selectable');
+			const focus_sel = focus_gap.querySelector('.svedit-selectable');
+			if (!anchor_sel || !focus_sel) return;
+
 			if (is_backward) {
-				// Use the last selectable you find
-				const anchor_node_selectable = [...anchor_node.querySelectorAll('.svedit-selectable')].at(
-					-1
-				);
-				// Use the first selectable you find
-				const focus_node_selectable = [...focus_node.querySelectorAll('.svedit-selectable')].at(0);
-
-				range.setStart(focus_node_selectable, 1);
-				range.setEnd(anchor_node_selectable, 1);
 				dom_selection.removeAllRanges();
-				dom_selection.addRange(range);
-				// Phew, this was a hard nut to crack. But with that code the direction can be reversed.
-				dom_selection.setBaseAndExtent(anchor_node_selectable, 1, focus_node_selectable, 1);
+				dom_selection.setBaseAndExtent(anchor_sel, 1, focus_sel, 1);
 			} else {
-				// Use the first selectable you find
-				const anchor_node_selectable = [...anchor_node.querySelectorAll('.svedit-selectable')].at(
-					0
-				);
-				// Use the last selectable you find
-				const focus_node_selectable = [...focus_node.querySelectorAll('.svedit-selectable')].at(-1);
-
-				range.setStart(anchor_node_selectable, 1);
-				range.setEnd(focus_node_selectable, 1);
+				range.setStart(anchor_sel, 1);
+				range.setEnd(focus_sel, 1);
 				dom_selection.removeAllRanges();
 				dom_selection.addRange(range);
 			}
 		}
 
-		// Ensure the node_array is focused
-		const node_array_el = canvas_el.querySelector(
-			`[data-path="${node_array_path}"][data-type="node_array"]`
-		);
-		if (node_array_el) {
-			node_array_el.focus();
-			// Scroll the selection into view
+		node_array_el.focus();
+		const scroll_node_offset = is_collapsed
+			? Math.max(0, selection.anchor_offset - 1)
+			: (is_backward ? selection.focus_offset : selection.anchor_offset);
+		const scroll_node = __get_node_element(node_array_path, scroll_node_offset);
+		if (scroll_node) {
 			setTimeout(() => {
-				(is_backward ? focus_node : anchor_node).scrollIntoView({
-					block: 'nearest',
-					inline: 'nearest'
-				});
+				scroll_node.scrollIntoView({ block: 'nearest', inline: 'nearest' });
 			}, 0);
-		} else {
-			console.log('No container element found!');
 		}
 	}
 

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

@@ -1 +1 @@
-{"version":3,"file":"Svedit.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Svedit.svelte.js"],"names":[],"mappings":";;;;;;;AAo3CA;;eAAqD;iCAv1C1C,cAAc"}
+{"version":3,"file":"Svedit.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Svedit.svelte.js"],"names":[],"mappings":";;;;;;;AA60CA;;eAAqD;iCAhzC1C,cAAc"}

package/dist/node_gap_computation.svelte.js

@@ -26,7 +26,7 @@
  *
  * The viewport tracker drives **lazy positioning**: only near-viewport
  * gaps receive CSS anchor positioning (via NodeGap's `positioned`
- * prop). Off-viewport gaps remain as zero-size static elements with
+ * prop). Off-viewport gaps remain as zero-size absolute elements with
  * no layout cost. Gap markers (NodeGapMarkers) are only computed for
  * visible indices.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svedit",
-	"version": "0.7.1",
+	"version": "0.8.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/Node.svelte

@@ -1,53 +1,32 @@
 <script>
 	import { getContext } from 'svelte';
-	import DefaultNodeGap from './NodeGap.svelte';
 
 	/** @import { NodeProps } from './types.d.ts'; */
 
 	const svedit = getContext('svedit');
-	let NodeGap = $derived(svedit.session.config.system_components?.NodeGap ?? DefaultNodeGap);
 
 	/** @type {NodeProps} */
 	let { path, children, tag = 'div', class: css_class, style = '', ...rest } = $props();
 
 	let node = $derived(svedit.session.get(path));
 
-	// NodeArrayProperty sets this context — its presence means we're in a node_array.
-	// Using context avoids expensive session.inspect() and session.get() calls
-	// that would create O(N) reactive subscriptions to the parent array.
 	const node_array_meta = getContext('node_array_meta');
-	const is_inside_node_array = !!node_array_meta;
-	let child_index = $derived(parseInt(String(path.at(-1)), 10));
-	let is_first_node_array_child = $derived(is_inside_node_array && child_index === 0);
-	let is_last_node_array_child = $derived(
-		is_inside_node_array && child_index === node_array_meta.length - 1
-	);
-
-	// Drives lazy anchor positioning for node gaps. Gaps are always in the
-	// DOM (stable structure for selection), but only anchor-positioned when
-	// near the viewport to avoid O(N) layout cost.
-	let is_near_viewport = $derived(
-		svedit.is_near_viewport?.(path) ?? true
-	);
+	let child_index = $derived(node_array_meta ? parseInt(String(path.at(-1)), 10) : -1);
+	let is_first = $derived(node_array_meta && child_index === 0);
+	let is_last = $derived(node_array_meta && child_index === node_array_meta.length - 1);
 </script>
 
 <svelte:element
 	id={node.id}
 	this={tag}
-	class={css_class}
+	class="{css_class}{is_first ? ' first' : ''}{is_last ? ' last' : ''}"
 	data-node-id={node.id}
 	data-path={path.join('.')}
 	data-type="node"
 	style="anchor-name: --{path.join('-')};{style}"
 	{...rest}
 >
-	{#if svedit.editable && is_first_node_array_child}
-		<NodeGap {path} type="gap-before" positioned={is_near_viewport} />
-	{/if}
 	{@render children()}
-	{#if svedit.editable && is_inside_node_array}
-		<NodeGap {path} type="gap-after" last={is_last_node_array_child} positioned={is_near_viewport} />
-	{/if}
 </svelte:element>
 
 <style>

package/src/lib/NodeArrayProperty.svelte

@@ -20,8 +20,6 @@
 			.map(/** @param {string} node_id */ (node_id) => svedit.session.get(node_id))
 	);
 
-	// 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; }
 	});
@@ -52,9 +50,17 @@
 		<!-- 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 />
+		<NodeGap array_path={path} offset={0} count={0} empty />
 	{/if}
 	{#each nodes as node, index (index)}
+		{#if svedit.editable}
+			<NodeGap
+				array_path={path}
+				offset={index}
+				count={nodes.length}
+				positioned={svedit.is_near_viewport?.([...path, index]) ?? true}
+			/>
+		{/if}
 		{@const Component = svedit.session.config.node_components[snake_to_pascal(node.type)]}
 		{#if Component}
 			<Component path={[...path, index]} />
@@ -62,6 +68,14 @@
 			<UnknownNode path={[...path, index]} />
 		{/if}
 	{/each}
+	{#if svedit.editable && nodes.length > 0}
+		<NodeGap
+			array_path={path}
+			offset={nodes.length}
+			count={nodes.length}
+			positioned={svedit.is_near_viewport?.([...path, nodes.length - 1]) ?? true}
+		/>
+	{/if}
 	{#if svedit.editable && NodeGapMarkers}
 		<NodeGapMarkers {path} />
 	{/if}

package/src/lib/NodeGap.svelte

@@ -2,6 +2,11 @@
 	/**
 	 * Invisible keyboard caret selectable and gap hit area.
 	 *
+	 * Rendered as a sibling of Node elements inside NodeArrayProperty,
+	 * interleaved between nodes in DOM order. This ensures:
+	 * - Correct DOM order for native drag-to-select across nodes
+	 * - No containing-block issues from transform/filter/will-change on nodes
+	 *
 	 * 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
@@ -15,29 +20,37 @@
 	 *
 	 * 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 { array_path, offset, count, empty = false, positioned = true } = $props();
+
+	let is_first = $derived(offset === 0);
+	let is_last = $derived(offset === count);
+	let type = $derived(is_first ? 'gap-before' : 'gap-after');
 
 	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}`;
+		const arr = array_path.join('-');
+		const prev_idx = offset - 1;
+		const pa = is_first ? `--${arr}-0` : `--${arr}-${prev_idx}`;
+		const next = `--${arr}-${offset}`;
+		const container = `--${arr}`;
+		return `--_pa:${pa};--_next:${next};--_container:${container}`;
 	});
 
-	let anchor_name = $derived(`--g-${path.join('-')}-${type}`);
+	let anchor_name = $derived.by(() => {
+		const arr = array_path.join('-');
+		if (is_first) return `--g-${arr}-0-gap-before`;
+		return `--g-${arr}-${offset - 1}-gap-after`;
+	});
 </script>
 
 <div
 	class="node-gap {type}"
 	class:empty
-	class:last
+	class:last={is_last}
 	class:positioned
 	data-type={type}
+	data-gap-array-path={array_path.join('.')}
+	data-gap-offset={offset}
 	style={gap_style}
 >
 	<div class="svedit-selectable" style="anchor-name:{anchor_name}"><br /></div>
@@ -46,10 +59,10 @@
 
 <style>
 	.node-gap {
-		height: 0;
-		overflow: visible;
-		outline: none;
-		pointer-events: none;
+		display: contents;
+		/* The native browser caret briefly appears inside .svedit-selectable for one frame 
+		before the model-driven NodeCaret renders at the correct edge position. 
+		Suppressing it here avoids a flash of the native caret. */
 		caret-color: transparent;
 	}
 
@@ -58,9 +71,7 @@
 	/* ------------------------------------------------------------------ */
 
 	.node-gap:not(.positioned) .svedit-selectable {
-		content-visibility: hidden;
-	  contain-intrinsic-size: 0 0;
-		position: static;
+		position: absolute;
 		pointer-events: none;
 		width: 0;
 		height: 0;
@@ -73,8 +84,21 @@
 
 	/*
 	 * 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.
+	 * inline style (--_pa = parent anchor, --_next, --_container).
+	 * Same pattern as NodeGapMarkers — keeps JS minimal and anchor() in CSS.
+	 *
+	 * --_pa references the anchor-name of the node this gap belongs to,
+	 * allowing us to position relative to that node's edges.
+	 *
+	 * Edge gaps extend outward and clamp to the containing block edge
+	 * (0px floor). This can overlap neighboring elements when the node
+	 * array isn't alone in its parent. anchor() only sees the border
+	 * box, so it can't detect margin, gap, or parent padding around
+	 * the container. --node-caret-boundary lets consumers set an
+	 * explicit clamp target (a parent element's anchor-name) so edge
+	 * gaps stop at that boundary instead. --node-caret-boundary-x and
+	 * --node-caret-boundary-y override per-axis, falling back to
+	 * --node-caret-boundary when unset.
 	 */
 	.node-gap.positioned {
 		--_s-t: anchor(var(--_pa) top);
@@ -82,6 +106,10 @@
 		--_s-l: anchor(var(--_pa) left);
 		--_s-r: anchor(var(--_pa) right);
 	}
+	.positioned.gap-before:not(.empty) {
+		--_b-t: anchor(var(--node-caret-boundary-y, var(--node-caret-boundary, --_no-boundary)) top, 0px);
+		--_b-l: anchor(var(--node-caret-boundary-x, var(--node-caret-boundary, --_no-boundary)) left, 0px);
+	}
 	.positioned.gap-after:not(.last) {
 		--_n-t: anchor(var(--_next) top);
 		--_n-l: anchor(var(--_next) left);
@@ -93,6 +121,10 @@
 		--_c-b: anchor(var(--_container) bottom);
 		--_c-l: anchor(var(--_container) left);
 		--_c-r: anchor(var(--_container) right);
+		--_b-b: anchor(var(--node-caret-boundary-y, var(--node-caret-boundary, --_no-boundary)) bottom, 0px);
+		--_b-r: anchor(var(--node-caret-boundary-x, var(--node-caret-boundary, --_no-boundary)) right, 0px);
+		--_b-bt: anchor(var(--node-caret-boundary-y, var(--node-caret-boundary, --_no-boundary)) bottom, 99999px);
+		--_b-rl: anchor(var(--node-caret-boundary-x, var(--node-caret-boundary, --_no-boundary)) right, 99999px);
 	}
 
 	.positioned .svedit-selectable {
@@ -171,28 +203,33 @@
 		);
 		min-height: calc(var(--_gm) * var(--_C));
 		min-width: calc(var(--_gm) * var(--_R));
+		/* min-height: max(calc(var(--_gm) * var(--_C)), calc(anchor-size(var(--_pa) height, 100%) * var(--_R)));
+		min-width: max(calc(var(--_gm) * var(--_R)), calc(anchor-size(var(--_pa) width, 100%) * var(--_C))); */
 	}
 
-	/* After last node: col extends down, row extends right */
+	/* After last node: col extends down, row extends right.
+	   top also clamps to boundary_bottom - eg so that min-height
+	   (which wins over bottom in overconstrained abs-pos) cannot
+	   push the element past the boundary. */
 	.positioned.gap-after.last .svedit-selectable {
 		top: min(
-			calc(var(--_s-b) + var(--_R) * 99999px),
+			calc(min(var(--_s-b), calc(var(--_b-bt) - var(--_eg))) + var(--_R) * 99999px),
 			calc(var(--_s-t) + var(--_C) * 99999px)
 		);
 		bottom: min(
-			calc(var(--_s-b) - var(--_eg) + var(--_R) * 99999px),
+			calc(max(var(--_b-b), 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(min(var(--_s-r), calc(var(--_b-rl) - var(--_eg))) + var(--_C) * 99999px),
 			calc(100% - var(--_eg) + var(--_C) * 99999px)
 		);
 		right: min(
 			calc(var(--_s-r) + var(--_R) * 99999px),
 			calc(
 				max(
-					0px,
+					var(--_b-r),
 					min(
 						calc(var(--_c-r) - var(--_eg)),
 						calc(var(--_s-r) - var(--_eg))
@@ -209,7 +246,7 @@
 	.positioned.gap-before:not(.empty) .svedit-selectable {
 		top: min(
 			calc(
-				max(0px, var(--_s-t) - var(--_eg))
+				max(var(--_b-t), var(--_s-t) - var(--_eg))
 				+ var(--_R) * 99999px
 			),
 			calc(var(--_s-t) + var(--_C) * 99999px)
@@ -221,7 +258,7 @@
 		left: min(
 			calc(var(--_s-l) + var(--_R) * 99999px),
 			calc(
-				max(0px, var(--_s-l) - var(--_eg))
+				max(var(--_b-l), var(--_s-l) - var(--_eg))
 				+ var(--_C) * 99999px
 			)
 		);