@cbcruk/highlight-kit 0.1.0 → 0.2.0

package/dist/value-range-CH2vegQi.js

@@ -0,0 +1,707 @@
+//#region src/pattern.ts
+/**
+* Shared helpers for turning literal string patterns into RegExp sources.
+*/
+/** Escape every RegExp metacharacter in `literal` so it matches itself. */
+function escapeRegExp(literal) {
+	return literal.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+/**
+* Build a RegExp source matching `literal` verbatim.
+*
+* @param literal - Text to match
+* @param wholeWord - Wrap the source in `\b` so it only matches whole words
+*/
+function literalSource(literal, wholeWord = false) {
+	const escaped = escapeRegExp(literal);
+	return wholeWord ? `\\b${escaped}\\b` : escaped;
+}
+/** Drop a flag from a RegExp flag string. */
+function withoutFlag(flags, flag) {
+	return flags.replace(flag, "");
+}
+//#endregion
+//#region src/core.ts
+/** Stable empty snapshot — referentially constant for useSyncExternalStore */
+const EMPTY_SNAPSHOT = Object.freeze({
+	active: false,
+	count: 0
+});
+/** Whether the CSS Custom Highlight API (`CSS.highlights` and `Highlight`) is available. */
+function isHighlightSupported() {
+	return typeof CSS !== "undefined" && "highlights" in CSS && typeof Highlight !== "undefined";
+}
+/**
+* Collect the text nodes under an element that contain non-whitespace text.
+*
+* Whitespace-only nodes (newlines, indentation between elements) are skipped,
+* so this is suited to pattern matching, not to offset math against `textContent`.
+*/
+function getTextNodes(root) {
+	const nodes = [];
+	const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
+	let node;
+	while (node = walker.nextNode()) if (node.textContent && node.textContent.trim()) nodes.push(node);
+	return nodes;
+}
+function toRegExp(pattern, options) {
+	if (pattern instanceof RegExp) return pattern.flags.includes("g") ? pattern : new RegExp(pattern.source, pattern.flags + "g");
+	return new RegExp(literalSource(pattern, options.wholeWord), options.caseSensitive ? "g" : "gi");
+}
+/**
+* Compute Range objects for every match of `pattern` within `root`.
+* Pure: returns ranges, does not touch the registry.
+*/
+function computeRanges(root, pattern, options = {}) {
+	if (!pattern) return [];
+	const regex = toRegExp(pattern, options);
+	const ranges = [];
+	for (const textNode of getTextNodes(root)) {
+		const text = textNode.textContent ?? "";
+		regex.lastIndex = 0;
+		let m;
+		while ((m = regex.exec(text)) !== null) {
+			if (m[0].length === 0) {
+				regex.lastIndex++;
+				continue;
+			}
+			try {
+				const range = new Range();
+				range.setStart(textNode, m.index);
+				range.setEnd(textNode, m.index + m[0].length);
+				ranges.push(range);
+			} catch {}
+		}
+	}
+	return ranges;
+}
+/** Collect every text node under `root`, whitespace-only ones included. */
+function getAllTextNodes(root) {
+	const nodes = [];
+	const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
+	let node;
+	while (node = walker.nextNode()) nodes.push(node);
+	return nodes;
+}
+/**
+* Map flat character offsets onto Range objects. Useful when you already know positions.
+*
+* Offsets count over `root.textContent`, whitespace-only text nodes (newlines,
+* indentation between elements) included, so positions computed from
+* `textContent` or on a server against the same text line up. Unlike
+* {@link computeRanges}, a span may cross text node boundaries; it yields one
+* range per text node it touches. Out-of-bounds parts are ignored.
+*
+* @example
+* ```ts
+* import { rangesFromOffsets } from '@cbcruk/highlight-kit'
+*
+* const el = document.querySelector('#article')!
+* const start = el.textContent!.indexOf('wisdom')
+* rangesFromOffsets(el, [{ start, end: start + 'wisdom'.length }])
+* ```
+*/
+function rangesFromOffsets(root, spans) {
+	const nodes = getAllTextNodes(root);
+	const layout = [];
+	let offset = 0;
+	for (const node of nodes) {
+		const len = node.textContent?.length ?? 0;
+		if (len === 0) continue;
+		layout.push({
+			node,
+			start: offset,
+			end: offset + len
+		});
+		offset += len;
+	}
+	const ranges = [];
+	for (const { start, end } of spans) for (const { node, start: ns, end: ne } of layout) if (ns < end && ne > start) try {
+		const range = new Range();
+		range.setStart(node, Math.max(0, start - ns));
+		range.setEnd(node, Math.min(node.textContent?.length ?? 0, end - ns));
+		ranges.push(range);
+	} catch {}
+	return ranges;
+}
+/** Sink that writes to the document-global `CSS.highlights` registry. */
+function createCssHighlightSink() {
+	return {
+		commit(name, ranges, priority) {
+			if (!isHighlightSupported()) return;
+			const highlight = new Highlight(...ranges);
+			highlight.priority = priority;
+			CSS.highlights.set(name, highlight);
+		},
+		remove(name) {
+			if (!isHighlightSupported()) return;
+			CSS.highlights.delete(name);
+		},
+		isSupported: isHighlightSupported
+	};
+}
+/** Side-effect-free sink: bookkeeping still runs, nothing is painted. */
+function createNoopSink() {
+	return {
+		commit() {},
+		remove() {}
+	};
+}
+const EMPTY_SNAPSHOTS = Object.freeze({});
+/**
+* Tracks ranges per highlight name and source, and writes their union to a sink.
+*
+* Multiple sources may contribute to one name; each change reconciles the name
+* into a single highlight and notifies `subscribe` listeners. Create instances
+* with {@link createHighlightController} or use the shared {@link highlights}.
+*
+* @example
+* ```ts
+* import { computeRanges, highlights } from '@cbcruk/highlight-kit'
+*
+* const el = document.querySelector('#article')!
+* highlights.set('search', 'my-source', computeRanges(el, 'wisdom'))
+* highlights.getSnapshot('search') // { active: true, count: ... }
+* highlights.remove('search', 'my-source')
+* ```
+*/
+var HighlightController = class {
+	#sink;
+	/** name -> (sourceId -> ranges). Multiple sources may share a name. */
+	#entries = /* @__PURE__ */ new Map();
+	/** Cached per-name snapshots; refs are stable until that name changes. */
+	#snapshots = /* @__PURE__ */ new Map();
+	/** Cached name -> snapshot record; rebuilt on every emit. */
+	#allSnapshots = EMPTY_SNAPSHOTS;
+	/** External-store listeners. */
+	#listeners = /* @__PURE__ */ new Set();
+	/** Create a controller that writes to `sink` (the CSS registry sink by default). */
+	constructor({ sink = createCssHighlightSink() } = {}) {
+		this.#sink = sink;
+	}
+	/**
+	* Whether the sink reports support. `true` when the sink has no `isSupported`.
+	* When `false`, {@link HighlightController.set} is a no-op.
+	*/
+	get supported() {
+		return this.#sink.isSupported?.() ?? true;
+	}
+	/** useSyncExternalStore: stable identity (arrow field on the instance). */
+	subscribe = (listener) => {
+		this.#listeners.add(listener);
+		return () => this.#listeners.delete(listener);
+	};
+	/** Snapshot for a given highlight name (referentially stable). */
+	getSnapshot = (name) => {
+		return this.#snapshots.get(name) ?? EMPTY_SNAPSHOT;
+	};
+	/** Snapshots of every active name (referentially stable between changes). */
+	getSnapshots = () => {
+		return this.#allSnapshots;
+	};
+	/** SSR / unsupported: constant empty snapshot. */
+	getServerSnapshot = () => EMPTY_SNAPSHOT;
+	/** SSR / unsupported: constant empty record. */
+	getServerSnapshots = () => EMPTY_SNAPSHOTS;
+	/** Union of every source's ranges currently registered under `name`. */
+	getRanges(name) {
+		const entry = this.#entries.get(name);
+		return entry ? this.#merge(entry) : [];
+	}
+	/**
+	* Register/replace a source's ranges under a name, then reconcile.
+	* `priority` applies to the whole name; the most recent call wins.
+	*/
+	set(name, sourceId, ranges, priority = 0) {
+		if (!this.supported) return;
+		let entry = this.#entries.get(name);
+		if (!entry) {
+			entry = {
+				priority,
+				sources: /* @__PURE__ */ new Map()
+			};
+			this.#entries.set(name, entry);
+		} else entry.priority = priority;
+		entry.sources.set(sourceId, ranges);
+		this.#reconcile(name);
+		this.#emit();
+	}
+	/** Remove a single source's contribution to a name. */
+	remove(name, sourceId) {
+		const entry = this.#entries.get(name);
+		if (!entry || !entry.sources.delete(sourceId)) return;
+		if (entry.sources.size === 0) this.#entries.delete(name);
+		this.#reconcile(name);
+		this.#emit();
+	}
+	/** Drop a name entirely, regardless of sources. */
+	clear(name) {
+		if (!this.#entries.delete(name)) return;
+		this.#reconcile(name);
+		this.#emit();
+	}
+	/** Drop everything this controller manages. */
+	clearAll() {
+		const names = [...this.#entries.keys()];
+		this.#entries.clear();
+		for (const name of names) this.#sink.remove(name);
+		this.#snapshots.clear();
+		this.#emit();
+	}
+	#merge(entry) {
+		const all = [];
+		for (const ranges of entry.sources.values()) all.push(...ranges);
+		return all;
+	}
+	/** Union all sources for `name` into one highlight and update the snapshot. */
+	#reconcile(name) {
+		const entry = this.#entries.get(name);
+		const all = entry ? this.#merge(entry) : [];
+		if (!entry || all.length === 0) {
+			this.#sink.remove(name);
+			this.#snapshots.set(name, EMPTY_SNAPSHOT);
+			return;
+		}
+		this.#sink.commit(name, all, entry.priority);
+		this.#snapshots.set(name, {
+			active: true,
+			count: all.length
+		});
+	}
+	#emit() {
+		const next = {};
+		for (const [name, snapshot] of this.#snapshots) if (snapshot.active) next[name] = snapshot;
+		this.#allSnapshots = next;
+		for (const listener of this.#listeners) listener();
+	}
+};
+/**
+* Create an isolated controller. Useful for tests (with {@link createNoopSink})
+* or for scoping subscriptions via the React `HighlightProvider`. Highlight
+* *names* are still document-global once painted by a CSS sink.
+*/
+function createHighlightController(options) {
+	return new HighlightController(options);
+}
+/** The shared singleton. */
+const highlights = createHighlightController();
+/**
+* Build `::highlight(name)` CSS rules from a style map without injecting them.
+*
+* camelCase property names are converted to kebab-case; values are written as is.
+*
+* @example
+* ```ts
+* import { generateHighlightCSS } from '@cbcruk/highlight-kit'
+*
+* generateHighlightCSS({ search: { backgroundColor: 'yellow' } })
+* // '::highlight(search) {\n  background-color: yellow;\n}'
+* ```
+*/
+function generateHighlightCSS(styles) {
+	return Object.entries(styles).map(([name, style]) => {
+		return `::highlight(${name}) {\n${Object.entries(style).map(([prop, value]) => {
+			return `  ${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${value};`;
+		}).join("\n")}\n}`;
+	}).join("\n\n");
+}
+/**
+* Append a `<style>` element with `::highlight()` rules to `document.head`.
+*
+* An existing element with the same `id` is removed first, so calling it again
+* replaces the previous rules.
+*
+* @param styles - Style declarations keyed by highlight name
+* @param id - `id` of the `<style>` element
+* @returns The inserted `<style>` element
+*/
+function injectHighlightStyles(styles, id = "highlight-kit-styles") {
+	document.getElementById(id)?.remove();
+	const el = document.createElement("style");
+	el.id = id;
+	el.textContent = generateHighlightCSS(styles);
+	document.head.appendChild(el);
+	return el;
+}
+//#endregion
+//#region src/tokenize.ts
+/**
+* Pure tokenizer: a string plus an ordered rule list in, character spans out.
+*
+* Nothing here touches the DOM, the `CSS.highlights` registry, or the
+* `OpaqueRange` API, so the overlap rules — the part that is easy to get wrong —
+* are testable without a browser. {@link ./value-range.ts} turns the spans this
+* produces into live ranges inside an `<input>` or `<textarea>`.
+*/
+/**
+* Compile a rule to a fresh RegExp carrying `flag`.
+*
+* Always clones, so a module-level `RegExp` literal passed as a pattern never
+* has its `lastIndex` mutated by tokenizing.
+*/
+function compile(rule, flag) {
+	const { pattern, caseSensitive, wholeWord } = rule;
+	if (pattern instanceof RegExp) {
+		const flags = withoutFlag(withoutFlag(pattern.flags, "y"), "g");
+		return new RegExp(pattern.source, flags + flag);
+	}
+	return new RegExp(literalSource(pattern, wholeWord), caseSensitive ? flag : `i${flag}`);
+}
+/**
+* Left-to-right scan. At each position the first rule that matches there wins
+* and the scan continues after its match, so tokens never overlap.
+*/
+function tokenizeFirst(value, rules) {
+	const regexps = rules.map((rule) => compile(rule, "y"));
+	const tokens = [];
+	let position = 0;
+	while (position < value.length) {
+		let width = 0;
+		for (let i = 0; i < regexps.length; i++) {
+			const regex = regexps[i];
+			regex.lastIndex = position;
+			const match = regex.exec(value);
+			if (match && match[0].length > 0) {
+				width = match[0].length;
+				tokens.push({
+					name: rules[i].name,
+					start: position,
+					end: position + width,
+					rule: i
+				});
+				break;
+			}
+		}
+		position += width || 1;
+	}
+	return tokens;
+}
+/** Every rule scans the whole string; overlaps are kept. */
+function tokenizeAll(value, rules) {
+	const tokens = [];
+	rules.forEach((rule, i) => {
+		const regex = compile(rule, "g");
+		let match;
+		while ((match = regex.exec(value)) !== null) {
+			if (match[0].length === 0) {
+				regex.lastIndex++;
+				continue;
+			}
+			tokens.push({
+				name: rule.name,
+				start: match.index,
+				end: match.index + match[0].length,
+				rule: i
+			});
+		}
+	});
+	return tokens.sort((a, b) => a.start - b.start || a.rule - b.rule);
+}
+/**
+* Match `rules` against `value` and return the character spans of every match.
+*
+* Offsets are UTF-16 code unit indices into `value`, the same units
+* `selectionStart` uses, so they can be handed straight to
+* `createValueRange()` when `value` came from `element.value`.
+*
+* Rule order is precedence: see {@link TokenizeOptions.overlap}.
+*
+* @param value - Text to scan, typically `element.value`
+* @param rules - Ordered rules; earlier rules win under `'first'`
+* @returns Tokens sorted by start offset. Empty when `value` or `rules` is empty
+*
+* @example A comment rule swallowing keywords inside it
+* ```ts
+* import { tokenizeValue } from '@cbcruk/highlight-kit'
+*
+* tokenizeValue('// return 1', [
+*   { name: 'comment', pattern: /\/\/.*$/m },
+*   { name: 'keyword', pattern: /\breturn\b/ },
+* ])
+* // [{ name: 'comment', start: 0, end: 11, rule: 0 }]
+* ```
+*
+* @example Independent patterns, overlaps kept
+* ```ts
+* import { tokenizeValue } from '@cbcruk/highlight-kit'
+*
+* tokenizeValue('status:open', [
+*   { name: 'field', pattern: /\w+:/ },
+*   { name: 'all', pattern: /\w+/ },
+* ], { overlap: 'all' })
+* ```
+*/
+function tokenizeValue(value, rules, options = {}) {
+	if (!value || rules.length === 0) return [];
+	return options.overlap === "all" ? tokenizeAll(value, rules) : tokenizeFirst(value, rules);
+}
+/**
+* Collapse tokens into one entry per highlight name.
+*
+* Several rules may share a name; the resulting `priority` is the highest one
+* any contributing rule declared, since a controller tracks a single priority
+* per name.
+*
+* @param tokens - Tokens from {@link tokenizeValue}
+* @param rules - The same rule list those tokens were produced from
+* @returns One entry per name that matched at least once, in first-match order
+*/
+function groupTokens(tokens, rules) {
+	const grouped = /* @__PURE__ */ new Map();
+	for (const token of tokens) {
+		const priority = rules[token.rule]?.priority ?? 0;
+		const span = {
+			start: token.start,
+			end: token.end
+		};
+		const entry = grouped.get(token.name);
+		if (entry) {
+			entry.priority = Math.max(entry.priority, priority);
+			entry.spans.push(span);
+		} else grouped.set(token.name, {
+			name: token.name,
+			priority,
+			spans: [span]
+		});
+	}
+	return [...grouped.values()];
+}
+//#endregion
+//#region src/value-range.ts
+/**
+* `OpaqueRange` adapter — highlighting text *inside* `<input>` and `<textarea>`.
+*
+* A DOM `Range` cannot point into a form control's value, so the rest of this
+* package (`computeRanges`, `getTextNodes`) does nothing for one. Chromium 152
+* added `element.createValueRange(start, end)`, which returns an `OpaqueRange`
+* over the control's value. `Highlight` is setlike over `AbstractRange`, so
+* those ranges can go into the same highlight as ordinary DOM ranges.
+*
+* The lifecycle is the part worth wrapping. Value ranges are *live*: the control
+* keeps every range `createValueRange()` ever handed out and shifts all of their
+* offsets on every edit. Re-matching a pattern after each keystroke therefore
+* leaks a fresh generation of live ranges per keystroke unless the previous
+* generation is explicitly released, which is what {@link ValueHighlighter}
+* does and what hand-rolled `highlight.clear()` loops usually miss.
+*/
+/**
+* `input` types for which `createValueRange()` applies. Every other type throws
+* `NotSupportedError`. Matches the types the Selection API applies to.
+*/
+const SUPPORTED_INPUT_TYPES = /* @__PURE__ */ new Set([
+	"text",
+	"search",
+	"tel",
+	"url",
+	"password"
+]);
+/**
+* Whether this browser implements `createValueRange()`.
+*
+* True only says the *engine* supports the API. It does not say a given element
+* does — the method exists on `HTMLInputElement.prototype` for every input
+* type and throws at call time for unsupported ones. Use
+* {@link supportsValueRange} for a specific element.
+*/
+function isValueRangeSupported() {
+	return typeof HTMLInputElement !== "undefined" && typeof HTMLInputElement.prototype.createValueRange === "function";
+}
+/**
+* Whether `element` can produce value ranges: a `<textarea>`, or an `<input>`
+* whose `type` is `text`, `search`, `tel`, `url`, or `password`.
+*
+* @param element - Element to test; `null`/`undefined` returns false
+*/
+function supportsValueRange(element) {
+	if (!element || !isValueRangeSupported()) return false;
+	if (element instanceof HTMLTextAreaElement) return true;
+	return element instanceof HTMLInputElement && SUPPORTED_INPUT_TYPES.has(element.type);
+}
+/**
+* Narrow a highlight range to a value range.
+*
+* Tests for "not a DOM `Range`", so it also answers whether reading
+* `startContainer` is safe — on a value range it is `undefined`.
+*/
+function isValueRange(range) {
+	return !(range instanceof Range);
+}
+/**
+* Create live ranges over `element`'s value for each of `spans`.
+*
+* Offsets are clamped into `[0, element.value.length]` rather than throwing the
+* `IndexSizeError` the API raises for out-of-range offsets, and spans that
+* clamp to nothing are dropped — a collapsed range is never painted.
+*
+* Every returned range holds a reference from `element` until
+* {@link disconnectValueRanges} releases it.
+*
+* @param element - A control {@link supportsValueRange} accepts
+* @param spans - Half-open `[start, end)` character spans
+* @returns One range per non-empty span. Empty when the element is unsupported
+*
+* @example
+* ```ts
+* import { createValueRanges, highlights } from '@cbcruk/highlight-kit'
+*
+* const textarea = document.querySelector('textarea')!
+* const ranges = createValueRanges(textarea, [{ start: 0, end: 5 }])
+* highlights.set('note', 'my-source', ranges)
+* ```
+*/
+function createValueRanges(element, spans) {
+	if (!supportsValueRange(element)) return [];
+	const length = element.value.length;
+	const host = element;
+	const ranges = [];
+	for (const { start, end } of spans) {
+		const from = Math.max(0, Math.min(start, length));
+		const to = Math.max(from, Math.min(end, length));
+		if (from === to) continue;
+		try {
+			ranges.push(host.createValueRange(from, to));
+		} catch {}
+	}
+	return ranges;
+}
+/**
+* Release `ranges` so their control stops tracking them.
+*
+* Safe to call twice, and on ranges already auto-disconnected by the element
+* being removed or its `type` changing.
+*/
+function disconnectValueRanges(ranges) {
+	for (const range of ranges) try {
+		range.disconnect?.();
+	} catch {}
+}
+/**
+* Create a registry that keeps one generation of value ranges on `element`.
+*
+* Use it when you compute spans yourself; {@link createValueHighlighter} layers
+* the tokenizer and an `input` listener on top.
+*
+* @example Marking a single span and replacing it later
+* ```ts
+* import { createValueRangeRegistry } from '@cbcruk/highlight-kit'
+*
+* const registry = createValueRangeRegistry({ element: textarea })
+* registry.commit([{ name: 'note', priority: 0, spans: [{ start: 0, end: 4 }] }])
+* registry.commit([{ name: 'note', priority: 0, spans: [{ start: 6, end: 9 }] }])
+* registry.dispose()
+* ```
+*/
+function createValueRangeRegistry({ element, controller = highlights, sourceId = Symbol("value-range-registry") }) {
+	const supported = supportsValueRange(element);
+	let owned = [];
+	let names = [];
+	let disposed = false;
+	return {
+		supported,
+		get names() {
+			return names;
+		},
+		commit(groups) {
+			if (disposed || !supported) return;
+			const previous = owned;
+			const next = [];
+			const nextNames = [];
+			for (const group of groups) {
+				const ranges = createValueRanges(element, group.spans);
+				if (ranges.length === 0) continue;
+				controller.set(group.name, sourceId, ranges, group.priority);
+				next.push(...ranges);
+				nextNames.push(group.name);
+			}
+			for (const name of names) if (!nextNames.includes(name)) controller.remove(name, sourceId);
+			owned = next;
+			names = nextNames;
+			disconnectValueRanges(previous);
+		},
+		dispose() {
+			if (disposed) return;
+			disposed = true;
+			for (const name of names) controller.remove(name, sourceId);
+			disconnectValueRanges(owned);
+			owned = [];
+			names = [];
+		}
+	};
+}
+/**
+* Keep a form control's value tokenized and highlighted.
+*
+* Tokenizes once on creation and then on every `input` event, registering one
+* highlight name per rule name and releasing the previous generation of ranges.
+*
+* Does nothing when the browser or the element is unsupported, so calling it
+* unconditionally is safe — read {@link ValueHighlighter.supported} to decide
+* whether to render a fallback.
+*
+* @example Search-query syntax in a text input
+* ```ts
+* import {
+*   createValueHighlighter,
+*   injectHighlightStyles,
+* } from '@cbcruk/highlight-kit'
+*
+* injectHighlightStyles({
+*   field: { color: '#2563eb' },
+*   quoted: { backgroundColor: '#dbeafe' },
+* })
+*
+* const input = document.querySelector('input')!
+* const highlighter = createValueHighlighter({
+*   element: input,
+*   rules: [
+*     { name: 'quoted', pattern: /"[^"]*"/ },
+*     { name: 'field', pattern: /\b\w+:/ },
+*   ],
+* })
+*
+* highlighter.dispose()
+* ```
+*/
+function createValueHighlighter({ rules, overlap, observe = true, ...binding }) {
+	const registry = createValueRangeRegistry(binding);
+	const { element } = binding;
+	function refresh() {
+		const tokens = tokenizeValue(element.value, rules, { overlap });
+		registry.commit(groupTokens(tokens, rules));
+	}
+	const onInput = () => refresh();
+	refresh();
+	if (registry.supported && observe) element.addEventListener("input", onInput);
+	return {
+		supported: registry.supported,
+		get names() {
+			return registry.names;
+		},
+		refresh,
+		dispose() {
+			element.removeEventListener("input", onInput);
+			registry.dispose();
+		}
+	};
+}
+/**
+* Scroll `element` just far enough for `range` to be visible inside it.
+*
+* `scrollIntoView()` is not an option: a value range has no node to call it on.
+* This adjusts the control's own `scrollTop`/`scrollLeft` from the range's
+* client rect, and unlike `setSelectionRange()` it leaves the user's selection
+* and focus alone.
+*
+* No-op for a collapsed or disconnected range, whose rect is empty.
+*/
+function scrollValueRangeIntoView(element, range) {
+	const target = range.getBoundingClientRect();
+	if (target.width === 0 && target.height === 0) return;
+	const host = element.getBoundingClientRect();
+	if (target.top < host.top) element.scrollTop -= host.top - target.top;
+	else if (target.bottom > host.bottom) element.scrollTop += target.bottom - host.bottom;
+	if (target.left < host.left) element.scrollLeft -= host.left - target.left;
+	else if (target.right > host.right) element.scrollLeft += target.right - host.right;
+}
+//#endregion
+export { highlights as _, isValueRange as a, rangesFromOffsets as b, supportsValueRange as c, computeRanges as d, createCssHighlightSink as f, getTextNodes as g, generateHighlightCSS as h, disconnectValueRanges as i, groupTokens as l, createNoopSink as m, createValueRangeRegistry as n, isValueRangeSupported as o, createHighlightController as p, createValueRanges as r, scrollValueRangeIntoView as s, createValueHighlighter as t, tokenizeValue as u, injectHighlightStyles as v, isHighlightSupported as y };