svedit 0.7.1 → 0.8.0

package/README.md

@@ -1056,6 +1056,82 @@ Further things to consider:
 - Avoid CSS selectors like `:last-child` or `:first-child` on nodes (e.g., `[data-type="node"]:last-child`) because `<NodeGap>` elements are inserted in edit mode and will become the actual first or last child. This can cause unexpected layout shifts (e.g., if you have `.paragraph-node:last-child { margin-bottom: 10px }`, the margin won't apply as expected).
 - Avoid adding css `margin` to nodes inside node arrays when using flex or grid layouts. Use `gap` on the container instead. This ensure `NodeGap` and `NodeGapMarkers` render consistently. If you need to add a margin, add it to child element of Node.
 
+### Node array CSS tokens
+
+`<NodeArrayProperty>` renders a `[data-type="node_array"]` element. Two CSS custom properties control how gaps and carets behave inside it:
+
+**`--row`** — Tell Svedit whether a node array flows horizontally (`1`) or vertically (`0`). Gaps, carets, and markers all switch orientation accordingly. Defaults to `0` on the Svedit canvas. Set it on the node array or an ancestor:
+
+```css
+.my-horizontal-layout :global(.grid-items) {
+  --row: 1;
+  display: flex;
+  flex-wrap: wrap;
+}
+```
+
+**`--node-caret-boundary`** — Edge gaps (before the first node, after the last) extend outward beyond the container to enlarge their click target. If the node array has neighboring elements (e.g. a preceding node or surrounding UI), the outward extension can overlap them:
+
+```
+Without --node-caret-boundary                  With --node-caret-boundary
+
+: . . . . . . . . . . . . . . . :      
+: +---------------------------+ :             +-----------------------------+
+: | Toolbar / UI              | : ← overlap   | Toolbar / UI                |
+: +---------------------------+ :             +-----------------------------+
+:                               :      
+:     edge gap (unbounded)      :   boudary → +-----------------------------+
+: . . . . . . . . . . . . . . . :             | : . . . . . . . . . . . . : |
+                                              | :   edge gap (clamped)    : |
+  +---------------------------+               | : . . . . . . . . . . . . : |
+  |  +---------------------+  |               |  +-----------------------+  |
+  |  | First node          |  |               |  | First node            |  |
+  |  +---------------------+  |               |  +-----------------------+  |
+  |    gap between nodes      |               |    gap between nodes        |
+  |  +---------------------+  |               |  +-----------------------+  |
+  |  | Last node           |  |               |  | Last node             |  |
+  |  +---------------------+  |               |  +-----------------------+  |
+  +---------------------------+               | : . . . . . . . . . . . . : |
+                                              | :   edge gap (clamped)    : |
+: . . . . . . . . . . . . . . . :             | : . . . . . . . . . . . . : |
+:     edge gap (unbounded)      :   boudary → +-----------------------------+
+:                               :      
+: +---------------------------+ :             +-----------------------------+
+: | Footer / UI               | : ← overlap   | Footer / UI                 |
+: +---------------------------+ :             +-----------------------------+
+: . . . . . . . . . . . . . . . : 
+```
+
+Set `--node-caret-boundary` to the `anchor-name` of a parent element to clamp edge gaps to that element's edges:
+
+```css
+.editor-wrapper {
+  anchor-name: --editor-boundary;
+  padding: 24px;
+}
+.editor-wrapper [data-type="node_array"] {
+  --node-caret-boundary: --editor-boundary;
+}
+```
+
+When set, edge gaps clamp to the boundary element's edges instead. When not set, gaps extend to the containing block edge (default).
+
+Since `--node-caret-boundary` inherits to nested node arrays, you may need to unset it on inner containers that should not be clamped:
+
+```css
+.inner-container [data-type="node_array"] {
+  --node-caret-boundary: initial;
+}
+```
+
+For per-axis control, use `--node-caret-boundary-x` (left/right) and `--node-caret-boundary-y` (top/bottom). They take precedence over `--node-caret-boundary` when set:
+
+```css
+.editor-wrapper [data-type="node_array"] {
+  --node-caret-boundary-x: --editor-boundary;
+}
+```
+
 ## Beyond the README
 
 The source code is compact and readable — less than 3000 LOC across a handful of files. We encourage you to explore it. The files in [`src/lib`](./src/lib) are the library code, while the files in [`src/routes`](./src/routes) are example code you can copy and adapt to your needs.
@@ -1080,9 +1156,22 @@ You can preview the production build with `npm run preview`.
 
 ## Contributing
 
-At the very moment, the best way to help is to donate or to sponsor us, so we can buy time to work on this exclusively for a couple of more months. Please get in touch personally.
+Contributions are very welcome! Bug reports, bug fixes, and small PRs (a couple of lines of code) don't need any ceremony — just go for it. What follows applies to larger changes and new features.
+
+I take long-term maintainability very seriously. Much like the SQLite project, I prioritize minimalism and code quality over features. This means I may decline pull requests — even good ones — if they don't fit my vision for Svedit at a given point in time. I'll always try to articulate my reasons, but sometimes it comes down to intuition more than logic. Please don't take it personally — it doesn't mean your idea is bad, just that I don't see it belonging in core right now.
+
+### How to contribute a feature
+
+1. **Start with your requirements.** Open an issue describing what you need and why. Wait for a green light that this is something that belongs in core before writing code.
+2. **Explore approaches.** For non-trivial features, there may be multiple ways to solve the problem. Discuss trade-offs before committing to one direction — I may ask you to explore alternatives first.
+3. **Prove feasibility.** Make a small PR that solves the root of the problem — no optimizations, no UX polish. This lets me evaluate the impact on the library and give you early feedback if your approach conflicts with Svedit's design decisions.
+4. **Plan the finish.** Once feasibility is approved, outline the remaining steps and wait for another green light. Then we iterate together until it's ready to merge.
+
+**Please don't work on a feature for a long time without checking in regularly.** I have a much lower tolerance for complexity than most developers, and I need to be able to digest changes in small pieces. Going off and making a large rewrite without involving me will likely be frustrating for both of us.
+
+### Sponsorship
 
-Find my contact details [here](https://editable.website).
+Another great way to help is to donate or sponsor the project, so I can buy more dedicated development time. Email me at michael@letsken.com.
 
 ## Beta version
 

package/dist/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/dist/Node.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Node.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Node.svelte.js"],"names":[],"mappings":";;;;;AAoDA,yFAAmD"}
+{"version":3,"file":"Node.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Node.svelte.js"],"names":[],"mappings":";;;;;AA8BA,yFAAmD"}

package/dist/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/dist/NodeArrayProperty.svelte.d.ts.map

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

package/dist/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
 			)
 		);

package/dist/NodeGap.svelte.d.ts

@@ -4,17 +4,17 @@ type NodeGap = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const NodeGap: import("svelte").Component<{
-    path: any;
-    type: any;
+    array_path: any;
+    offset: any;
+    count: any;
     empty?: boolean;
-    last?: boolean;
     positioned?: boolean;
 }, {}, "">;
 type $$ComponentProps = {
-    path: any;
-    type: any;
+    array_path: any;
+    offset: any;
+    count: any;
     empty?: boolean;
-    last?: boolean;
     positioned?: boolean;
 };
 //# sourceMappingURL=NodeGap.svelte.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"NodeGap.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NodeGap.svelte.js"],"names":[],"mappings":";;;;;AAyDA;gBA/BgC,GAAG;YAAU,GAAG;WAAS,GAAG;YAAU,OAAO;iBAAe,OAAO;WA+B7C;wBA/BpC;IAAE,UAAU,EAAE,GAAG,CAAC;IAAC,MAAM,EAAE,GAAG,CAAC;IAAC,KAAK,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE"}

package/dist/NodeGapMarkers.svelte

@@ -66,6 +66,12 @@
 	 * --node-caret-blink-duration
 	 * --node-caret-animation
 	 * --node-caret-row-inline-position
+	 * --node-caret-boundary          (anchor-name of a parent element; edge
+	 *                                  gaps clamp to its edges instead of 0px.
+	 *                                  Prevents overlap when the node array has
+	 *                                  neighbors. See NodeGap.svelte for details.)
+	 * --node-caret-boundary-x        (per-axis override; clamps left/right only)
+	 * --node-caret-boundary-y        (per-axis override; clamps top/bottom only)
 	 *
 	 * Row/column detection uses var(--row, 1) with the * 99999 multiplier
 	 * trick throughout. Shorthand:
@@ -262,9 +268,11 @@
 
 	/* Edge first: column = above first node, row = left of first node */
 	.gap-edge.first {
+		--_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);
 		top: min(
 			calc(anchor(var(--_a) top) + var(--_C) * 99999px),
-			calc(max(0px, calc(anchor(var(--_a) top) - var(--_gm))) + var(--_R) * 99999px)
+			calc(max(var(--_b-t), calc(anchor(var(--_a) top) - var(--_gm))) + var(--_R) * 99999px)
 		);
 		bottom: min(
 			calc(anchor(var(--_a) bottom) + var(--_C) * 99999px),
@@ -272,7 +280,7 @@
 		);
 		left: min(
 			calc(anchor(var(--_a) left) + var(--_R) * 99999px),
-			calc(max(0px, calc(anchor(var(--_a) left) - var(--_gm))) + var(--_C) * 99999px)
+			calc(max(var(--_b-l), calc(anchor(var(--_a) left) - var(--_gm))) + var(--_C) * 99999px)
 		);
 		right: min(
 			calc(anchor(var(--_a) right) + var(--_R) * 99999px),
@@ -280,23 +288,40 @@
 		);
 	}
 
-	/* Edge last: column = below last node, row = right of last node */
+	/* Edge last: column = below last node, row = right of last node.
+	   top/left also clamp to boundary - gm so that min-height/min-width
+	   (which win over bottom/right in overconstrained abs-pos) cannot
+	   push the element past the boundary. */
 	.gap-edge.last {
+		--_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);
 		top: min(
 			calc(anchor(var(--_a) top) + var(--_C) * 99999px),
-			calc(anchor(var(--_a) bottom) + var(--_R) * 99999px)
+			calc(
+				min(
+					anchor(var(--_a) bottom),
+					calc(var(--_b-bt) - var(--_gm))
+				) + var(--_R) * 99999px
+			)
 		);
 		bottom: min(
 			calc(anchor(var(--_a) bottom) + var(--_C) * 99999px),
-			calc(anchor(var(--_a) bottom) - var(--_gm) + var(--_R) * 99999px)
+			calc(max(var(--_b-b), calc(anchor(var(--_a) bottom) - var(--_gm))) + var(--_R) * 99999px)
 		);
 		left: min(
 			calc(anchor(var(--_a) left) + var(--_R) * 99999px),
-			calc(anchor(var(--_a) right) + var(--_C) * 99999px),
+			calc(
+				min(
+					anchor(var(--_a) right),
+					calc(var(--_b-rl) - var(--_gm))
+				) + var(--_C) * 99999px
+			),
 			calc(100% - var(--_gm) + var(--_C) * 99999px)
 		);
 		right: max(
-			calc(0px + var(--_C) * -99999px),
+			calc(var(--_b-r) + var(--_C) * -99999px),
 			calc(anchor(var(--_a) right) + var(--_R) * -99999px),
 			calc(anchor(var(--_a) right) - var(--_gm) + var(--_C) * -99999px),
 			calc(anchor(var(--_c) right) + var(--_C) * -99999px)
@@ -314,6 +339,7 @@
 		left: min(
 			calc(anchor(var(--_a) left) + var(--_R) * 99999px),
 			calc(anchor(var(--_a) right) + var(--_C) * 99999px),
+			calc(var(--_b-rl) - var(--_gm) + var(--_C) * 99999px),
 			calc(
 				anchor(var(--_a) right)
 				+ (max(0px, anchor(var(--_s) left) - anchor(var(--_f) right))) / 2
@@ -341,7 +367,7 @@
 		);
 		right: max(
 			calc(anchor(var(--_a) right) + var(--_R) * -99999px),
-			calc(0px + var(--_C) * -99999px),
+			calc(var(--_b-r) + var(--_C) * -99999px),
 			calc(
 				anchor(var(--_a) right)
 				- (
@@ -450,7 +476,7 @@
 		outline: 0.1px solid green;
 	}
 	.gap-marker {
-		outline: 0.1px solid blue;
+		outline: 1px solid blue;
 		outline-offset: 0.5px;
 	} */
-</style>
+</style>

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

@@ -1 +1 @@
-{"version":3,"file":"NodeGapMarkers.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NodeGapMarkers.svelte.js"],"names":[],"mappings":";;;;;AA2CA;UAtB0B,GAAG;WAsBgC;wBAtB3C;IAAE,IAAI,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"NodeGapMarkers.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NodeGapMarkers.svelte.js"],"names":[],"mappings":";;;;;AA0CA;UArB0B,GAAG;WAqBgC;wBArB3C;IAAE,IAAI,EAAE,GAAG,CAAA;CAAE"}