@fuzdev/fuz_code 0.46.0 → 0.46.2

package/dist/CodeHighlight.svelte

@@ -6,18 +6,13 @@
 	 * Requires importing `theme_highlight.css` instead of `theme.css`.
 	 */
 
-	import {onDestroy, type Snippet} from 'svelte';
-	import {DEV} from 'esm-env';
+	import type {Snippet} from 'svelte';
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
 	import {syntax_styler_global} from './syntax_styler_global.js';
 	import type {SyntaxStyler, SyntaxGrammar} from './syntax_styler.js';
-	import {tokenize_syntax} from './tokenize_syntax.js';
-	import {
-		HighlightManager,
-		supports_css_highlight_api,
-		type HighlightMode,
-	} from './highlight_manager.js';
+	import {supports_css_highlight_api, type HighlightMode} from './highlight_manager.js';
+	import {create_range_highlighting} from './range_highlighting.svelte.js';
 
 	const {
 		content,
@@ -121,58 +116,27 @@
 
 	const supports_ranges = supports_css_highlight_api();
 
-	const highlight_manager = supports_ranges ? new HighlightManager() : null;
-
 	const use_ranges = $derived(supports_ranges && (mode === 'ranges' || mode === 'auto'));
 
-	const language_supported = $derived(lang !== null && !!syntax_styler.langs[lang]);
-
-	const highlighting_disabled = $derived(lang === null || (!language_supported && !grammar));
-
-	// DEV-only validation warnings
-	if (DEV) {
-		$effect(() => {
-			if (lang && !language_supported && !grammar) {
-				const langs = Object.keys(syntax_styler.langs).join(', ');
-				// eslint-disable-next-line no-console
-				console.error(
-					`[CodeHighlight] Language "${lang}" is not supported and no custom grammar provided. ` +
-						`Highlighting disabled. Supported: ${langs}`,
-				);
-			}
-		});
-	}
+	const rh = create_range_highlighting({
+		element: () => code_element,
+		text: () => content,
+		enabled: () => use_ranges,
+		lang: () => lang,
+		grammar: () => grammar,
+		syntax_styler: () => syntax_styler,
+		dev_label: 'CodeHighlight',
+	});
 
 	// Generate HTML markup for syntax highlighting in non-range mode
 	const html_content = $derived.by(() => {
-		if (use_ranges || !content || highlighting_disabled) {
+		if (use_ranges || !content || rh.highlighting_disabled) {
 			return '';
 		}
 
 		return syntax_styler.stylize(content, lang!, grammar); // ! is safe bc of the `highlighting_disabled` calculation
 	});
 
-	// Apply highlights for range mode
-	if (highlight_manager) {
-		$effect(() => {
-			if (!code_element || !content || !use_ranges || highlighting_disabled) {
-				highlight_manager.clear_element_ranges();
-				return;
-			}
-
-			// Get tokens from syntax styler
-			const tokens = tokenize_syntax(content, grammar || syntax_styler.get_lang(lang!)); // ! is safe bc of the `highlighting_disabled` calculation
-
-			// Apply highlights
-			highlight_manager.highlight_from_syntax_tokens(code_element, tokens);
-		});
-	}
-
-	onDestroy(() => {
-		highlight_manager?.destroy();
-	});
-
-	// TODO use intersect attachment from fuz_ui to optimize ranges
 	// TODO do syntax styling at compile-time in the normal case, and don't import these at runtime
 	// TODO @html making me nervous
 </script>
@@ -182,7 +146,7 @@
 <code {...rest} class:inline class:wrap data-lang={lang} bind:this={code_element}
 	>{#if use_ranges && children}{@render children(
 			content,
-		)}{:else if use_ranges || highlighting_disabled}{content}{:else if children}{@render children(
+		)}{:else if use_ranges || rh.highlighting_disabled}{content}{:else if children}{@render children(
 			html_content,
 		)}{:else}{@html html_content}{/if}</code
 >

package/dist/CodeHighlight.svelte.d.ts

@@ -4,7 +4,7 @@
      *
      * Requires importing `theme_highlight.css` instead of `theme.css`.
      */
-import { type Snippet } from 'svelte';
+import type { Snippet } from 'svelte';
 import type { SvelteHTMLElements } from 'svelte/elements';
 import type { SyntaxStyler, SyntaxGrammar } from './syntax_styler.js';
 import { type HighlightMode } from './highlight_manager.js';

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

@@ -1 +1 @@
-{"version":3,"file":"CodeHighlight.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/CodeHighlight.svelte"],"names":[],"mappings":"AAGA;;;;;OAKI;AACJ,OAAO,EAAY,KAAK,OAAO,EAAC,MAAM,QAAQ,CAAC;AAE/C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAGxD,OAAO,KAAK,EAAC,YAAY,EAAE,aAAa,EAAC,MAAM,oBAAoB,CAAC;AAEpE,OAAO,EAGL,KAAK,aAAa,EAClB,MAAM,wBAAwB,CAAC;AAEhC,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,MAAM,CAAC,GAAG;IACrD,2CAA2C;IAC3C,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;;;;;;;;;;;;OAgBG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;;;;;;;;;;;;OAeG;IACH,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CACrC,CAAC;AAiGH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CodeHighlight.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/CodeHighlight.svelte"],"names":[],"mappings":"AAGA;;;;;OAKI;AACJ,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAGxD,OAAO,KAAK,EAAC,YAAY,EAAE,aAAa,EAAC,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAA6B,KAAK,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAGrF,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,MAAM,CAAC,GAAG;IACrD,2CAA2C;IAC3C,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;;;;;;;;;;;;OAgBG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;;;;;;;;;;;;OAeG;IACH,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CACrC,CAAC;AAiEH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/CodeTextarea.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+	/**
+	 * A `<textarea>` with live syntax highlighting via the CSS Custom Highlight API.
+	 *
+	 * The text is rendered twice: an editable, visually-transparent `<textarea>`
+	 * on top, and a backdrop `<pre>` mirror underneath whose text node receives
+	 * the highlight ranges. The two share identical box metrics so characters line
+	 * up exactly, and the backdrop is scroll-synced to the textarea.
+	 *
+	 * **Minimal by design**: this is a highlighted input, not a full editor. It
+	 * does not provide line numbers, tab-to-indent, auto-resize, or undo handling
+	 * — compose those on top via the spread `...rest` props and `bind:value`.
+	 *
+	 * **Experimental** — the Highlight API has limited browser support and cannot
+	 * render font-weight/font-style. Requires importing `theme_highlight.css`.
+	 */
+
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	import {syntax_styler_global} from './syntax_styler_global.js';
+	import type {SyntaxStyler, SyntaxGrammar} from './syntax_styler.js';
+	import {create_range_highlighting} from './range_highlighting.svelte.js';
+
+	let {
+		value = $bindable(''),
+		lang = 'svelte',
+		grammar,
+		syntax_styler = syntax_styler_global,
+		wrapper_attrs,
+		...rest
+	}: SvelteHTMLElements['textarea'] & {
+		/** The editable source code. Bindable. */
+		value?: string;
+		/**
+		 * Language identifier (e.g. 'ts', 'css', 'svelte'). `null` disables
+		 * highlighting; `undefined` falls back to the default ('svelte').
+		 */
+		lang?: string | null;
+		/** Optional custom grammar; takes precedence over `lang` for tokenization. */
+		grammar?: SyntaxGrammar | undefined;
+		/** Custom `SyntaxStyler` instance (defaults to the global one). */
+		syntax_styler?: SyntaxStyler;
+		/**
+		 * Attributes for the wrapper `<div>` — the layout box that the textarea
+		 * fills and `resize` grows. Use it for sizing/layout classes, `style`,
+		 * `id`, or container-level handlers. Its `class` is merged with the
+		 * internal `code_textarea` class; `data-lang` stays component-controlled.
+		 * (`...rest` spreads onto the `<textarea>`; the backdrop `<pre>` is
+		 * internal and intentionally not exposed.)
+		 */
+		wrapper_attrs?: SvelteHTMLElements['div'];
+	} = $props();
+
+	// the backdrop <pre> holds the text node that gets highlighted *and* is the
+	// scroll container kept in sync with the textarea
+	let backdrop: HTMLElement | undefined = $state.raw();
+	let textarea: HTMLTextAreaElement | undefined = $state.raw();
+
+	// A trailing newline keeps the backdrop's last line aligned with the textarea:
+	// a textarea shows an empty final line after a trailing "\n", which a <pre>
+	// would otherwise collapse. Rendered as a single expression -> one text node,
+	// and tokenized as-is so range positions match the text node exactly.
+	const display_text = $derived(value + '\n');
+
+	create_range_highlighting({
+		element: () => backdrop,
+		text: () => display_text,
+		lang: () => lang,
+		grammar: () => grammar,
+		syntax_styler: () => syntax_styler,
+		dev_label: 'CodeTextarea',
+	});
+
+	// keep the (overflow-hidden) backdrop aligned with the textarea's scroll position
+	const sync_scroll = () => {
+		if (!backdrop || !textarea) return;
+		backdrop.scrollTop = textarea.scrollTop;
+		backdrop.scrollLeft = textarea.scrollLeft;
+	};
+</script>
+
+<div {...wrapper_attrs} class={['code_textarea', wrapper_attrs?.class]} data-lang={lang}>
+	<pre class="code_textarea_backdrop" aria-hidden="true" bind:this={backdrop}>{display_text}</pre>
+	<textarea
+		bind:this={textarea}
+		spellcheck="false"
+		{...rest}
+		bind:value
+		onscroll={(e) => {
+			sync_scroll();
+			rest.onscroll?.(e); // preserve a consumer-supplied handler
+		}}
+	></textarea>
+</div>
+
+<style>
+	.code_textarea {
+		position: relative;
+		width: 100%;
+	}
+
+	/* Metrics shared by both layers so characters align exactly. fuz_css styles
+	   `pre` and `textarea` differently, so each declaration here equalizes them;
+	   anything fuz_css already applies identically (box-sizing, the reset margin,
+	   colors) is left to it. */
+	.code_textarea_backdrop,
+	.code_textarea textarea {
+		/* the backdrop `pre` isn't the last child, so fuz_css's flow rule would give
+		   it a bottom margin that shrinks its absolute box and drifts the last line */
+		margin: 0;
+		width: 100%;
+		/* fuz_css pads the textarea but not `pre` — pin both the same */
+		padding: var(--space_xs3) var(--space_xs);
+		/* fuz_css borders the textarea but not `pre`; a transparent border on both
+		   keeps the box metrics identical (the textarea's is colored below) */
+		border: 1px solid transparent;
+		border-radius: var(--radius_xs, 2px);
+		/* the textarea would otherwise inherit the page's proportional font and
+		   `line-height: normal`; the backdrop `pre` is already mono */
+		font-family: var(--font_family_mono);
+		font-size: var(--font_size_sm);
+		line-height: var(--line_height_md);
+		tab-size: 2;
+		/* fuz_css sets `pre` to `white-space: pre`; both must wrap to stay aligned */
+		white-space: pre-wrap;
+		overflow-wrap: break-word;
+		overflow: auto;
+		/* reserve gutter on both layers so the textarea's scrollbar doesn't shrink
+		   its wrap width relative to the backdrop, which would drift highlights */
+		scrollbar-gutter: stable;
+	}
+
+	/* the backdrop is taken out of flow so the in-flow textarea (its `rows`/resize)
+	   defines the box; `inset: 0` makes the backdrop fill and clip to that box,
+	   scrolled programmatically to match the textarea */
+	.code_textarea_backdrop {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		user-select: none;
+		overflow: hidden;
+	}
+
+	.code_textarea textarea {
+		/* sits above the backdrop so the caret and selection are visible; the
+		   textarea is the only in-flow layer, so it sizes the container */
+		position: relative;
+		z-index: 1;
+		/* the textarea's own text is invisible; the backdrop (a styled `pre`) shows
+		   through, so restore a visible caret and border over the transparent ones */
+		background-color: transparent;
+		color: transparent;
+		caret-color: var(--text_color);
+		border-color: var(--border_color);
+	}
+</style>

package/dist/CodeTextarea.svelte.d.ts

@@ -0,0 +1,43 @@
+/**
+     * A `<textarea>` with live syntax highlighting via the CSS Custom Highlight API.
+     *
+     * The text is rendered twice: an editable, visually-transparent `<textarea>`
+     * on top, and a backdrop `<pre>` mirror underneath whose text node receives
+     * the highlight ranges. The two share identical box metrics so characters line
+     * up exactly, and the backdrop is scroll-synced to the textarea.
+     *
+     * **Minimal by design**: this is a highlighted input, not a full editor. It
+     * does not provide line numbers, tab-to-indent, auto-resize, or undo handling
+     * — compose those on top via the spread `...rest` props and `bind:value`.
+     *
+     * **Experimental** — the Highlight API has limited browser support and cannot
+     * render font-weight/font-style. Requires importing `theme_highlight.css`.
+     */
+import type { SvelteHTMLElements } from 'svelte/elements';
+import type { SyntaxStyler, SyntaxGrammar } from './syntax_styler.js';
+type $$ComponentProps = SvelteHTMLElements['textarea'] & {
+    /** The editable source code. Bindable. */
+    value?: string;
+    /**
+     * Language identifier (e.g. 'ts', 'css', 'svelte'). `null` disables
+     * highlighting; `undefined` falls back to the default ('svelte').
+     */
+    lang?: string | null;
+    /** Optional custom grammar; takes precedence over `lang` for tokenization. */
+    grammar?: SyntaxGrammar | undefined;
+    /** Custom `SyntaxStyler` instance (defaults to the global one). */
+    syntax_styler?: SyntaxStyler;
+    /**
+     * Attributes for the wrapper `<div>` — the layout box that the textarea
+     * fills and `resize` grows. Use it for sizing/layout classes, `style`,
+     * `id`, or container-level handlers. Its `class` is merged with the
+     * internal `code_textarea` class; `data-lang` stays component-controlled.
+     * (`...rest` spreads onto the `<textarea>`; the backdrop `<pre>` is
+     * internal and intentionally not exposed.)
+     */
+    wrapper_attrs?: SvelteHTMLElements['div'];
+};
+declare const CodeTextarea: import("svelte").Component<$$ComponentProps, {}, "value">;
+type CodeTextarea = ReturnType<typeof CodeTextarea>;
+export default CodeTextarea;
+//# sourceMappingURL=CodeTextarea.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeTextarea.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/CodeTextarea.svelte"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;OAcI;AACJ,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAGxD,OAAO,KAAK,EAAC,YAAY,EAAE,aAAa,EAAC,MAAM,oBAAoB,CAAC;AAGnE,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,UAAU,CAAC,GAAG;IACzD,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC,mEAAmE;IACnE,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;CAC1C,CAAC;AA2DH,QAAA,MAAM,YAAY,2DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/highlight_manager.d.ts

@@ -5,10 +5,12 @@ export type HighlightMode = 'auto' | 'ranges' | 'html';
  */
 export declare const supports_css_highlight_api: () => boolean;
 /**
- * Manages CSS Custom Highlight API ranges for a single element.
- * Tracks ranges per element and only removes its own ranges when clearing.
+ * Manages CSS Custom Highlight API ranges for a single element's text node.
+ * Tracks ranges per element and only removes its own ranges when clearing,
+ * cooperating with other managers that share the global `CSS.highlights` registry.
  *
- * **Experimental** — limited browser support. Use `Code.svelte` for production.
+ * **Experimental** — limited browser support. Use `Code.svelte` for production
+ * block code; this powers the experimental `CodeHighlight` and `CodeTextarea`.
  *
  * @example
  * ```ts
@@ -18,14 +20,26 @@ export declare const supports_css_highlight_api: () => boolean;
  */
 export declare class HighlightManager {
     #private;
-    element_ranges: Map<string, Array<Range>>;
+    /**
+     * This manager's ranges, keyed by prefixed highlight name (e.g. `token_keyword`).
+     * A single range object may be shared across several names (a token type plus
+     * its aliases), since one range can belong to multiple `Highlight` sets.
+     */
+    element_ranges: Map<string, Array<AbstractRange>>;
     constructor();
     /**
-     * Highlights from a `SyntaxTokenStream` produced by `tokenize_syntax`.
+     * Highlights `element`'s text node from a `SyntaxTokenStream` produced by
+     * `tokenize_syntax`. Clears this manager's previous ranges first.
+     *
+     * In production this never throws on a tokenizer/DOM mismatch: out-of-bounds
+     * tokens are clamped and a missing text node is a no-op. In DEV the same
+     * conditions throw loudly to surface grammar bugs.
      */
     highlight_from_syntax_tokens(element: Element, tokens: SyntaxTokenStream): void;
     /**
-     * Clears only this element's ranges from highlights.
+     * Clears only this manager's ranges from the shared highlights. Defensive:
+     * a highlight may already be gone (e.g. another manager removed the last
+     * range, or HMR reset the registry), which is a valid state, not an error.
      */
     clear_element_ranges(): void;
     destroy(): void;

package/dist/highlight_manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"highlight_manager.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/highlight_manager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,mBAAmB,CAAC;AAGzD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEvD;;GAEG;AACH,eAAO,MAAM,0BAA0B,QAAO,OACS,CAAC;AAExD;;;;;;;;;;;GAWG;AACH,qBAAa,gBAAgB;;IAC5B,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;;IAS1C;;OAEG;IACH,4BAA4B,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAkD/E;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAmB5B,OAAO,IAAI,IAAI;CAiFf"}
+{"version":3,"file":"highlight_manager.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/highlight_manager.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,mBAAmB,CAAC;AAGzD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEvD;;GAEG;AACH,eAAO,MAAM,0BAA0B,QAAO,OACS,CAAC;AA6CxD;;;;;;;;;;;;;GAaG;AACH,qBAAa,gBAAgB;;IAC5B;;;;OAIG;IACH,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;;IAYlD;;;;;;;OAOG;IACH,4BAA4B,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAqE/E;;;;OAIG;IACH,oBAAoB,IAAI,IAAI;IAiB5B,OAAO,IAAI,IAAI;CAwEf"}

package/dist/highlight_manager.js

@@ -1,13 +1,40 @@
+import { DEV } from 'esm-env';
 import { highlight_priorities } from './highlight_priorities.js';
 /**
  * Checks for CSS Highlights API support.
  */
 export const supports_css_highlight_api = () => !!(globalThis.CSS?.highlights && globalThis.Highlight);
+const detect_range_kind = () => typeof globalThis.StaticRange === 'function' ? 'static' : 'live';
 /**
- * Manages CSS Custom Highlight API ranges for a single element.
- * Tracks ranges per element and only removes its own ranges when clearing.
+ * Finds the first text node child of `element`, or `null` if there is none.
  *
- * **Experimental** — limited browser support. Use `Code.svelte` for production.
+ * The text node might not be `firstChild` because frameworks (e.g. Svelte) can
+ * insert comment/anchor nodes around it.
+ */
+const find_text_node = (element) => {
+    for (const node of element.childNodes) {
+        if (node.nodeType === Node.TEXT_NODE)
+            return node;
+    }
+    return null;
+};
+const has_tokens = (tokens) => tokens.some((t) => typeof t !== 'string');
+const push_range = (ranges_by_name, name, range) => {
+    const existing = ranges_by_name.get(name);
+    if (existing) {
+        existing.push(range);
+    }
+    else {
+        ranges_by_name.set(name, [range]);
+    }
+};
+/**
+ * Manages CSS Custom Highlight API ranges for a single element's text node.
+ * Tracks ranges per element and only removes its own ranges when clearing,
+ * cooperating with other managers that share the global `CSS.highlights` registry.
+ *
+ * **Experimental** — limited browser support. Use `Code.svelte` for production
+ * block code; this powers the experimental `CodeHighlight` and `CodeTextarea`.
  *
  * @example
  * ```ts
@@ -16,65 +43,100 @@ export const supports_css_highlight_api = () => !!(globalThis.CSS?.highlights &&
  * ```
  */
 export class HighlightManager {
+    /**
+     * This manager's ranges, keyed by prefixed highlight name (e.g. `token_keyword`).
+     * A single range object may be shared across several names (a token type plus
+     * its aliases), since one range can belong to multiple `Highlight` sets.
+     */
     element_ranges;
+    #range_kind;
     constructor() {
         if (!supports_css_highlight_api()) {
             throw Error('CSS Highlights API not supported');
         }
         this.element_ranges = new Map();
+        this.#range_kind = detect_range_kind();
     }
     /**
-     * Highlights from a `SyntaxTokenStream` produced by `tokenize_syntax`.
+     * Highlights `element`'s text node from a `SyntaxTokenStream` produced by
+     * `tokenize_syntax`. Clears this manager's previous ranges first.
+     *
+     * In production this never throws on a tokenizer/DOM mismatch: out-of-bounds
+     * tokens are clamped and a missing text node is a no-op. In DEV the same
+     * conditions throw loudly to surface grammar bugs.
      */
     highlight_from_syntax_tokens(element, tokens) {
-        // Find the text node (it might not be firstChild due to Svelte comment nodes)
-        let text_node = null;
-        for (const node of element.childNodes) {
-            if (node.nodeType === Node.TEXT_NODE) {
-                text_node = node;
-                break;
+        this.clear_element_ranges();
+        const text_node = find_text_node(element);
+        if (!text_node) {
+            if (has_tokens(tokens)) {
+                if (DEV) {
+                    throw new Error('no text node to highlight');
+                }
+                else {
+                    // eslint-disable-next-line no-console
+                    console.error('[HighlightManager] tokens present but no text node to highlight');
+                }
             }
+            return;
         }
-        if (!text_node) {
-            throw new Error('no text node to highlight');
+        try {
+            this.#apply(text_node, tokens);
         }
-        this.clear_element_ranges();
-        const ranges_by_type = new Map();
-        const final_pos = this.#create_all_ranges(tokens, text_node, ranges_by_type, 0);
-        // Validate that token positions matched text node length
-        const text_length = text_node.textContent?.length ?? 0;
-        if (final_pos !== text_length) {
-            throw new Error(`Token stream length mismatch: tokens covered ${final_pos} chars but text node has ${text_length} chars`);
+        catch (err) {
+            // some engines may reject `StaticRange` in `Highlight.add` -- fall back to
+            // live `Range` once rather than letting the throw escape into the effect
+            if (this.#range_kind === 'static') {
+                this.#range_kind = 'live';
+                this.clear_element_ranges(); // undo any partial application
+                this.#apply(text_node, tokens);
+            }
+            else {
+                throw err;
+            }
+        }
+    }
+    #apply(text_node, tokens) {
+        const ranges_by_name = new Map();
+        const final_pos = this.#collect_ranges(tokens, text_node, ranges_by_name, 0);
+        if (DEV) {
+            const text_length = text_node.textContent?.length ?? 0;
+            if (final_pos !== text_length) {
+                throw new Error(`Token stream length mismatch: tokens covered ${final_pos} chars but text node has ${text_length} chars`);
+            }
         }
-        // Apply highlights
-        for (const [type, ranges] of ranges_by_type) {
-            const prefixed_type = `token_${type}`;
-            // Track ranges for this element
-            this.element_ranges.set(prefixed_type, ranges);
-            // Get or create the shared highlight
-            let highlight = CSS.highlights.get(prefixed_type);
+        // TODO: cross-instance coupling -- all managers share one global `Highlight`
+        // per token type, so re-highlighting one element (e.g. a textarea on every
+        // keystroke) mutates highlights that also hold ranges from every other code
+        // block on the page, forcing the browser to re-evaluate the shared set.
+        // Isolating per-instance needs unique highlight names + runtime-injected
+        // `::highlight()` CSS (≈50 token types × N instances), trading the static
+        // theme file for generated CSS. Only worth it with many concurrently-updating
+        // instances; revisit if profiling shows it.
+        for (const [name, ranges] of ranges_by_name) {
+            this.element_ranges.set(name, ranges);
+            let highlight = CSS.highlights.get(name);
             if (!highlight) {
                 highlight = new Highlight();
-                // Set priority based on CSS cascade order (higher = later in CSS = wins)
-                highlight.priority =
-                    highlight_priorities[prefixed_type] ?? 0;
-                CSS.highlights.set(prefixed_type, highlight);
+                // priority follows CSS cascade order (higher = later in CSS = wins)
+                highlight.priority = highlight_priorities[name] ?? 0;
+                CSS.highlights.set(name, highlight);
             }
-            // Add all ranges to the highlight
             for (const range of ranges) {
                 highlight.add(range);
             }
         }
     }
     /**
-     * Clears only this element's ranges from highlights.
+     * Clears only this manager's ranges from the shared highlights. Defensive:
+     * a highlight may already be gone (e.g. another manager removed the last
+     * range, or HMR reset the registry), which is a valid state, not an error.
      */
     clear_element_ranges() {
         for (const [name, ranges] of this.element_ranges) {
             const highlight = CSS.highlights.get(name);
-            if (!highlight) {
-                throw new Error('Expected to find CSS highlight: ' + name);
-            }
+            if (!highlight)
+                continue;
             for (const range of ranges) {
                 highlight.delete(range);
             }
@@ -87,10 +149,25 @@ export class HighlightManager {
     destroy() {
         this.clear_element_ranges();
     }
+    #make_range(text_node, start, end) {
+        if (this.#range_kind === 'static') {
+            return new StaticRange({
+                startContainer: text_node,
+                startOffset: start,
+                endContainer: text_node,
+                endOffset: end,
+            });
+        }
+        const range = new Range();
+        range.setStart(text_node, start);
+        range.setEnd(text_node, end);
+        return range;
+    }
     /**
-     * Creates ranges for all tokens in the tree.
+     * Walks the token tree, collecting one range per non-empty token (shared
+     * across its type and aliases). Returns the end position covered.
      */
-    #create_all_ranges(tokens, text_node, ranges_by_type, offset) {
+    #collect_ranges(tokens, text_node, ranges_by_name, offset) {
         const text_length = text_node.textContent?.length ?? 0;
         let pos = offset;
         for (const token of tokens) {
@@ -98,49 +175,28 @@ export class HighlightManager {
                 pos += token.length;
                 continue;
             }
-            const length = token.length;
-            const end_pos = pos + length;
-            // Validate positions are within text node bounds before creating ranges
-            if (end_pos > text_length) {
+            const end_pos = pos + token.length;
+            if (DEV && end_pos > text_length) {
                 throw new Error(`Token ${token.type} extends beyond text node: position ${end_pos} > length ${text_length}`);
             }
-            try {
-                const range = new Range();
-                range.setStart(text_node, pos);
-                range.setEnd(text_node, end_pos);
-                // Add range for the token type
-                const type = token.type;
-                if (!ranges_by_type.has(type)) {
-                    ranges_by_type.set(type, []);
-                }
-                ranges_by_type.get(type).push(range);
-                // Also add range for any aliases (alias is always an array)
+            // production-safe: clamp rather than throw on a tokenizer edge case
+            const safe_end = end_pos > text_length ? text_length : end_pos;
+            if (safe_end > pos) {
+                // one range shared across the token type and all its aliases --
+                // the same range object can belong to multiple `Highlight` sets
+                const range = this.#make_range(text_node, pos, safe_end);
+                push_range(ranges_by_name, `token_${token.type}`, range);
                 for (const alias of token.alias) {
-                    if (!ranges_by_type.has(alias)) {
-                        ranges_by_type.set(alias, []);
-                    }
-                    // Create a new range for each alias (ranges can't be reused)
-                    const alias_range = new Range();
-                    alias_range.setStart(text_node, pos);
-                    alias_range.setEnd(text_node, end_pos);
-                    ranges_by_type.get(alias).push(alias_range);
+                    push_range(ranges_by_name, `token_${alias}`, range);
                 }
             }
-            catch (e) {
-                throw new Error(`Failed to create range for ${token.type}: ${e}`);
-            }
-            // Process nested tokens
             if (Array.isArray(token.content)) {
-                const actual_end_pos = this.#create_all_ranges(token.content, text_node, ranges_by_type, pos);
-                // Validate that nested tokens match the parent token's claimed length
-                if (actual_end_pos !== end_pos) {
-                    throw new Error(`Token ${token.type} length mismatch: claimed ${length} chars (${pos}-${end_pos}) but nested content covered ${actual_end_pos - pos} chars (${pos}-${actual_end_pos})`);
+                const nested_end = this.#collect_ranges(token.content, text_node, ranges_by_name, pos);
+                if (DEV && nested_end !== end_pos) {
+                    throw new Error(`Token ${token.type} length mismatch: claimed ${token.length} chars (${pos}-${end_pos}) but nested content covered ${nested_end - pos} chars (${pos}-${nested_end})`);
                 }
-                pos = actual_end_pos;
-            }
-            else {
-                pos = end_pos;
             }
+            pos = end_pos;
         }
         return pos;
     }