@fuzdev/fuz_code 0.45.1 → 0.46.1

package/README.md

@@ -116,6 +116,7 @@ Enabled by default in `syntax_styler_global`:
 - [`js`](src/lib/grammar_js.ts)
 - [`json`](src/lib/grammar_json.ts)
 - [`clike`](src/lib/grammar_clike.ts)
+- [`bash`](src/lib/grammar_bash.ts)
 
 ### More
 

package/dist/Code.svelte

@@ -55,7 +55,7 @@
 			 */
 			lang?: string | null;
 			/**
-			 * Optional custom grammar object for syntax tokenization.
+			 * Optional custom `SyntaxGrammar` object for syntax tokenization.
 			 *
 			 * **When to use:**
 			 * - To provide a custom language definition not registered in `syntax_styler.langs`
@@ -100,7 +100,7 @@
 			 */
 			nomargin?: boolean;
 			/**
-			 * Custom SyntaxStyler instance to use for highlighting.
+			 * Custom `SyntaxStyler` instance to use for highlighting.
 			 * Allows using a different styler with custom grammars or configuration.
 			 *
 			 * @default syntax_styler_global

package/dist/Code.svelte.d.ts

@@ -35,7 +35,7 @@ type $$ComponentProps = SvelteHTMLElements['code'] & ({
      */
     lang?: string | null;
     /**
-     * Optional custom grammar object for syntax tokenization.
+     * Optional custom `SyntaxGrammar` object for syntax tokenization.
      *
      * **When to use:**
      * - To provide a custom language definition not registered in `syntax_styler.langs`
@@ -80,7 +80,7 @@ type $$ComponentProps = SvelteHTMLElements['code'] & ({
      */
     nomargin?: boolean;
     /**
-     * Custom SyntaxStyler instance to use for highlighting.
+     * Custom `SyntaxStyler` instance to use for highlighting.
      * Allows using a different styler with custom grammars or configuration.
      *
      * @default syntax_styler_global

package/dist/CodeHighlight.svelte

@@ -3,21 +3,16 @@
 	 * Uses the CSS Custom Highlight API when available --
 	 * https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API
 	 *
-	 * Requires importing theme_highlight.css instead of theme.css.
+	 * 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,
@@ -65,7 +60,7 @@
 		 */
 		mode?: HighlightMode;
 		/**
-		 * Optional custom grammar object for syntax tokenization.
+		 * Optional custom `SyntaxGrammar` object for syntax tokenization.
 		 *
 		 * **When to use:**
 		 * - To provide a custom language definition not registered in `syntax_styler.langs`
@@ -103,7 +98,7 @@
 		 */
 		wrap?: boolean;
 		/**
-		 * Custom SyntaxStyler instance to use for highlighting.
+		 * Custom `SyntaxStyler` instance to use for highlighting.
 		 * Allows using a different styler with custom grammars or configuration.
 		 *
 		 * @default syntax_styler_global
@@ -117,62 +112,31 @@
 		children?: Snippet<[markup: string]>;
 	} = $props();
 
-	let code_element: HTMLElement | undefined = $state();
+	let code_element: HTMLElement | undefined = $state.raw();
 
 	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

@@ -2,9 +2,9 @@
      * Uses the CSS Custom Highlight API when available --
      * https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API
      *
-     * Requires importing theme_highlight.css instead of theme.css.
+     * 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';
@@ -44,7 +44,7 @@ type $$ComponentProps = SvelteHTMLElements['code'] & {
      */
     mode?: HighlightMode;
     /**
-     * Optional custom grammar object for syntax tokenization.
+     * Optional custom `SyntaxGrammar` object for syntax tokenization.
      *
      * **When to use:**
      * - To provide a custom language definition not registered in `syntax_styler.langs`
@@ -82,7 +82,7 @@ type $$ComponentProps = SvelteHTMLElements['code'] & {
      */
     wrap?: boolean;
     /**
-     * Custom SyntaxStyler instance to use for highlighting.
+     * Custom `SyntaxStyler` instance to use for highlighting.
      * Allows using a different styler with custom grammars or configuration.
      *
      * @default syntax_styler_global

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,149 @@
+<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 */
+	.code_textarea_backdrop,
+	.code_textarea textarea {
+		margin: 0;
+		box-sizing: border-box;
+		width: 100%;
+		padding: var(--space_xs3) var(--space_xs);
+		border: 1px solid transparent;
+		border-radius: var(--radius_xs, 2px);
+		font-family: var(--font_family_mono, monospace);
+		font-size: var(--font_size_sm, 0.9rem);
+		line-height: var(--line_height_md, 1.5);
+		letter-spacing: inherit;
+		tab-size: 2;
+		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;
+		color: var(--text_color, currentColor);
+	}
+
+	.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;
+		display: block;
+		background-color: transparent;
+		/* the textarea's own text is invisible; the backdrop shows through */
+		color: transparent;
+		caret-color: var(--text_color, currentColor);
+		border-color: var(--border_color, currentColor);
+		resize: vertical;
+	}
+</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/grammar_markdown.js

@@ -1,5 +1,5 @@
 /**
- * Helper to create fenced code block pattern for a language
+ * Helper to create fenced code block pattern for a language.
  */
 const create_fence_pattern = (backticks, aliases, lang_id, syntax_styler) => {
     const aliases_pattern = aliases.join('|');
@@ -21,7 +21,7 @@ const create_fence_pattern = (backticks, aliases, lang_id, syntax_styler) => {
     };
 };
 /**
- * Helper to create catch-all fence pattern (unknown languages)
+ * Helper to create catch-all fence pattern (unknown languages).
  */
 const create_catchall_fence = (backticks) => {
     const pattern = new RegExp(`^${backticks}[^\\n\\r]*(?:\\r?\\n|\\r)[\\s\\S]*?^${backticks}$`, 'm');
@@ -38,7 +38,7 @@ const create_catchall_fence = (backticks) => {
     };
 };
 /**
- * Helper to create md self-reference placeholder pattern
+ * Helper to create md self-reference placeholder pattern.
  */
 const create_md_placeholder = (backticks) => {
     const pattern = new RegExp(`^${backticks}(?:md|markdown)[^\\n\\r]*(?:\\r?\\n|\\r)[\\s\\S]*?^${backticks}$`, 'm');

package/dist/grammar_markup.d.ts

@@ -13,19 +13,20 @@ export declare const add_grammar_markup: AddSyntaxGrammar;
  *
  * An example of an inlined language is CSS with `<style>` tags.
  *
- * @param tag_name - The name of the tag that contains the inlined language. This name will be treated as
- * case insensitive.
- * @param lang - The language key.
+ * @param syntax_styler - the `SyntaxStyler` instance to modify
+ * @param tag_name - the name of the tag that contains the inlined language, treated as case insensitive
+ * @param lang - the language key
+ * @param inside_lang - the language to insert into, defaults to `'markup'`
  */
 export declare const grammar_markup_add_inlined: (syntax_styler: SyntaxStyler, tag_name: string, lang: string, inside_lang?: string) => void;
 /**
- * Adds an pattern to style languages embedded in HTML attributes.
+ * Adds a pattern to style languages embedded in HTML attributes.
  *
  * An example of an inlined language is CSS with `style` attributes.
  *
- * @param attr_name - The name of the tag that contains the inlined language. This name will be treated as
- * case insensitive.
- * @param lang - The language key.
+ * @param syntax_styler - the `SyntaxStyler` instance to modify
+ * @param attr_name - the name of the attribute that contains the inlined language, treated as case insensitive
+ * @param lang - the language key
  */
 export declare const grammar_markup_add_attribute: (syntax_styler: SyntaxStyler, attr_name: string, lang: string) => void;
 //# sourceMappingURL=grammar_markup.d.ts.map

package/dist/grammar_markup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grammar_markup.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/grammar_markup.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,YAAY,EACZ,gBAAgB,EAIhB,MAAM,oBAAoB,CAAC;AAE5B;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,EAAE,gBA6EhC,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,0BAA0B,GACtC,eAAe,YAAY,EAC3B,UAAU,MAAM,EAChB,MAAM,MAAM,EACZ,oBAAsB,KACpB,IAmCF,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,4BAA4B,GACxC,eAAe,YAAY,EAC3B,WAAW,MAAM,EACjB,MAAM,MAAM,KACV,IAiEF,CAAC"}
+{"version":3,"file":"grammar_markup.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/grammar_markup.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,YAAY,EACZ,gBAAgB,EAIhB,MAAM,oBAAoB,CAAC;AAE5B;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,EAAE,gBA6EhC,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,0BAA0B,GACtC,eAAe,YAAY,EAC3B,UAAU,MAAM,EAChB,MAAM,MAAM,EACZ,oBAAsB,KACpB,IAmCF,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,4BAA4B,GACxC,eAAe,YAAY,EAC3B,WAAW,MAAM,EACjB,MAAM,MAAM,KACV,IAiEF,CAAC"}

package/dist/grammar_markup.js

@@ -86,9 +86,10 @@ export const add_grammar_markup = (syntax_styler) => {
  *
  * An example of an inlined language is CSS with `<style>` tags.
  *
- * @param tag_name - The name of the tag that contains the inlined language. This name will be treated as
- * case insensitive.
- * @param lang - The language key.
+ * @param syntax_styler - the `SyntaxStyler` instance to modify
+ * @param tag_name - the name of the tag that contains the inlined language, treated as case insensitive
+ * @param lang - the language key
+ * @param inside_lang - the language to insert into, defaults to `'markup'`
  */
 export const grammar_markup_add_inlined = (syntax_styler, tag_name, lang, inside_lang = 'markup') => {
     const lang_key = 'lang_' + lang;
@@ -120,13 +121,13 @@ export const grammar_markup_add_inlined = (syntax_styler, tag_name, lang, inside
     });
 };
 /**
- * Adds an pattern to style languages embedded in HTML attributes.
+ * Adds a pattern to style languages embedded in HTML attributes.
  *
  * An example of an inlined language is CSS with `style` attributes.
  *
- * @param attr_name - The name of the tag that contains the inlined language. This name will be treated as
- * case insensitive.
- * @param lang - The language key.
+ * @param syntax_styler - the `SyntaxStyler` instance to modify
+ * @param attr_name - the name of the attribute that contains the inlined language, treated as case insensitive
+ * @param lang - the language key
  */
 export const grammar_markup_add_attribute = (syntax_styler, attr_name, lang) => {
     // After normalization, grammar.tag is an array of SyntaxGrammarToken

package/dist/highlight_manager.d.ts

@@ -1,14 +1,16 @@
 import type { SyntaxTokenStream } from './syntax_token.js';
 export type HighlightMode = 'auto' | 'ranges' | 'html';
 /**
- * Check for CSS Highlights API support.
+ * Checks for CSS Highlights API support.
  */
 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` 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();
     /**
-     * Highlight from syntax styler token stream.
+     * 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;
     /**
-     * Clear 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"}