@fuzdev/fuz_code 0.44.0 → 0.45.0

package/dist/highlight_manager.d.ts

@@ -5,8 +5,16 @@ export type HighlightMode = 'auto' | 'ranges' | 'html';
  */
 export declare const supports_css_highlight_api: () => boolean;
 /**
- * Manages highlights for a single element.
+ * Manages CSS Custom Highlight API ranges for a single element.
  * Tracks ranges per element and only removes its own ranges when clearing.
+ *
+ * **Experimental** — limited browser support. Use `Code` for production.
+ *
+ * @example
+ * ```ts
+ * const manager = new HighlightManager();
+ * manager.highlight_from_syntax_tokens(element, tokens);
+ * ```
  */
 export declare class HighlightManager {
     #private;

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;;;GAGG;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":"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"}

package/dist/highlight_manager.js

@@ -4,8 +4,16 @@ import { highlight_priorities } from './highlight_priorities.js';
  */
 export const supports_css_highlight_api = () => !!(globalThis.CSS?.highlights && globalThis.Highlight); // eslint-disable-line @typescript-eslint/no-unnecessary-condition
 /**
- * Manages highlights for a single element.
+ * Manages CSS Custom Highlight API ranges for a single element.
  * Tracks ranges per element and only removes its own ranges when clearing.
+ *
+ * **Experimental** — limited browser support. Use `Code` for production.
+ *
+ * @example
+ * ```ts
+ * const manager = new HighlightManager();
+ * manager.highlight_from_syntax_tokens(element, tokens);
+ * ```
  */
 export class HighlightManager {
     element_ranges;

package/dist/highlight_priorities.gen.d.ts

@@ -1,4 +1,4 @@
-import type { Gen } from '@ryanatkn/gro';
+import type { Gen } from '@fuzdev/gro';
 /** @nodocs */
 export declare const gen: Gen;
 //# sourceMappingURL=highlight_priorities.gen.d.ts.map

package/dist/highlight_priorities.gen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"highlight_priorities.gen.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/highlight_priorities.gen.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,eAAe,CAAC;AAKvC,cAAc;AACd,eAAO,MAAM,GAAG,EAAE,GAgEjB,CAAC"}
+{"version":3,"file":"highlight_priorities.gen.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/highlight_priorities.gen.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAKrC,cAAc;AACd,eAAO,MAAM,GAAG,EAAE,GAgEjB,CAAC"}

package/dist/svelte_preprocess_fuz_code.d.ts

@@ -1,5 +1,8 @@
 import { type PreprocessorGroup } from 'svelte/compiler';
 import type { SyntaxStyler } from './syntax_styler.js';
+/**
+ * Options for `svelte_preprocess_fuz_code`.
+ */
 export interface PreprocessFuzCodeOptions {
     /** File patterns to exclude. */
     exclude?: Array<string | RegExp>;
@@ -20,5 +23,22 @@ export interface PreprocessFuzCodeOptions {
      */
     on_error?: 'log' | 'throw';
 }
+/**
+ * Svelte preprocessor that compiles static `Code` component content at build time,
+ * replacing runtime syntax highlighting with pre-rendered HTML.
+ *
+ * @param options preprocessor configuration
+ * @returns a Svelte preprocessor group
+ *
+ * @example
+ * ```ts
+ * // svelte.config.js
+ * import {svelte_preprocess_fuz_code} from './svelte_preprocess_fuz_code.js';
+ *
+ * export default {
+ *   preprocess: [svelte_preprocess_fuz_code(), vitePreprocess()],
+ * };
+ * ```
+ */
 export declare const svelte_preprocess_fuz_code: (options?: PreprocessFuzCodeOptions) => PreprocessorGroup;
 //# sourceMappingURL=svelte_preprocess_fuz_code.d.ts.map

package/dist/svelte_preprocess_fuz_code.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"svelte_preprocess_fuz_code.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/svelte_preprocess_fuz_code.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,iBAAiB,EAAW,MAAM,iBAAiB,CAAC;AAexE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,wBAAwB;IACxC,gCAAgC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAEjC,0DAA0D;IAC1D,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAElC;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,0BAA0B,GACtC,UAAS,wBAA6B,KACpC,iBA6DF,CAAC"}
+{"version":3,"file":"svelte_preprocess_fuz_code.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/svelte_preprocess_fuz_code.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,iBAAiB,EAAW,MAAM,iBAAiB,CAAC;AAgBxE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACxC,gCAAgC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAEjC,0DAA0D;IAC1D,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAElC;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,0BAA0B,GACtC,UAAS,wBAA6B,KACpC,iBA6DF,CAAC"}

package/dist/svelte_preprocess_fuz_code.js

@@ -3,8 +3,25 @@ import MagicString from 'magic-string';
 import { walk } from 'zimmerframe';
 import { should_exclude_path } from '@fuzdev/fuz_util/path.js';
 import { escape_js_string } from '@fuzdev/fuz_util/string.js';
-import { find_attribute, evaluate_static_expr, extract_static_string, build_static_bindings, resolve_component_names, } from '@fuzdev/fuz_util/svelte_preprocess_helpers.js';
+import { find_attribute, extract_static_string, try_extract_conditional_chain, build_static_bindings, resolve_component_names, handle_preprocess_error, } from '@fuzdev/fuz_util/svelte_preprocess_helpers.js';
 import { syntax_styler_global } from './syntax_styler_global.js';
+/**
+ * Svelte preprocessor that compiles static `Code` component content at build time,
+ * replacing runtime syntax highlighting with pre-rendered HTML.
+ *
+ * @param options preprocessor configuration
+ * @returns a Svelte preprocessor group
+ *
+ * @example
+ * ```ts
+ * // svelte.config.js
+ * import {svelte_preprocess_fuz_code} from './svelte_preprocess_fuz_code.js';
+ *
+ * export default {
+ *   preprocess: [svelte_preprocess_fuz_code(), vitePreprocess()],
+ * };
+ * ```
+ */
 export const svelte_preprocess_fuz_code = (options = {}) => {
     const { exclude = [], syntax_styler = syntax_styler_global, cache = true, component_imports = ['@fuzdev/fuz_code/Code.svelte'], on_error = process.env.CI === 'true' ? 'throw' : 'log', } = options;
     // In-memory cache: content+lang hash → highlighted HTML
@@ -63,7 +80,7 @@ const try_highlight = (text, lang, syntax_styler, options) => {
             options.cache?.set(cache_key, html);
         }
         catch (error) {
-            handle_error(error, options);
+            handle_preprocess_error(error, '[fuz-code]', options.filename, options.on_error);
             return null;
         }
     }
@@ -117,53 +134,43 @@ const find_code_usages = (ast, syntax_styler, code_names, options) => {
                 });
                 return;
             }
-            // Try conditional expression with static string branches
-            const conditional = try_extract_conditional(content_attr.value, options.source, options.bindings);
-            if (conditional) {
-                const html_a = try_highlight(conditional.consequent, lang_value, syntax_styler, options);
-                const html_b = try_highlight(conditional.alternate, lang_value, syntax_styler, options);
-                if (html_a === null || html_b === null)
-                    return;
-                if (html_a === conditional.consequent && html_b === conditional.alternate)
+            // Try conditional chain (handles both simple and nested ternaries)
+            const chain = try_extract_conditional_chain(content_attr.value, options.source, options.bindings);
+            if (chain) {
+                // Highlight all branches
+                const highlighted = [];
+                let any_changed = false;
+                for (const branch of chain) {
+                    const html = try_highlight(branch.value, lang_value, syntax_styler, options);
+                    if (html === null)
+                        return;
+                    if (html !== branch.value)
+                        any_changed = true;
+                    highlighted.push({ html, original: branch.value });
+                }
+                if (!any_changed)
                     return;
+                // Build nested ternary expression for dangerous_raw_html
+                // chain: [{test_source: 'a', value: ...}, {test_source: 'b', value: ...}, {test_source: null, value: ...}]
+                // → a ? 'html_a' : b ? 'html_b' : 'html_c'
+                let expr = '';
+                for (let i = 0; i < chain.length; i++) {
+                    const branch = chain[i];
+                    const html = highlighted[i].html;
+                    if (branch.test_source !== null) {
+                        expr += `${branch.test_source} ? '${escape_js_string(html)}' : `;
+                    }
+                    else {
+                        expr += `'${escape_js_string(html)}'`;
+                    }
+                }
                 transformations.push({
                     start: content_attr.start,
                     end: content_attr.end,
-                    replacement: `dangerous_raw_html={${conditional.test_source} ? '${escape_js_string(html_a)}' : '${escape_js_string(html_b)}'}`,
+                    replacement: `dangerous_raw_html={${expr}}`,
                 });
             }
         },
     });
     return transformations;
 };
-/**
- * Try to extract a conditional expression where both branches are static strings.
- * Returns the condition source text and both branch values, or `null` if not applicable.
- */
-const try_extract_conditional = (value, source, bindings) => {
-    if (value === true || Array.isArray(value))
-        return null;
-    const expr = value.expression;
-    if (expr.type !== 'ConditionalExpression')
-        return null;
-    const consequent = evaluate_static_expr(expr.consequent, bindings);
-    if (consequent === null)
-        return null;
-    const alternate = evaluate_static_expr(expr.alternate, bindings);
-    if (alternate === null)
-        return null;
-    const test = expr.test;
-    const test_source = source.slice(test.start, test.end);
-    return { test_source, consequent, alternate };
-};
-/**
- * Handle errors during highlighting.
- */
-const handle_error = (error, options) => {
-    const message = `[fuz-code] Highlighting failed${options.filename ? ` in ${options.filename}` : ''}: ${error instanceof Error ? error.message : String(error)}`;
-    if (options.on_error === 'throw') {
-        throw new Error(message);
-    }
-    // eslint-disable-next-line no-console
-    console.error(message);
-};

package/dist/syntax_styler.d.ts

@@ -46,18 +46,24 @@ export declare class SyntaxStyler {
      * @returns HTML string with syntax highlighting using CSS classes (`.token_*`)
      *
      * @example
+     * ```ts
      * // Standard usage - uses registered grammar
      * stylize('var foo = true;', 'ts');
+     * ```
      *
      * @example
+     * ```ts
      * // Custom grammar - overrides registered grammar
      * const customGrammar = { keyword: [...], string: [...] };
      * stylize('var foo = false;', 'ts', customGrammar);
+     * ```
      *
      * @example
+     * ```ts
      * // Extended grammar - builds on existing grammar
      * const extended = this.extend_grammar('ts', { customToken: [...] });
      * stylize('var foo = 42;', 'ts-extended', extended);
+     * ```
      */
     stylize(text: string, lang: string, grammar?: SyntaxGrammar | undefined): string;
     /**

package/dist/syntax_styler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"syntax_styler.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/syntax_styler.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"syntax_styler.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/syntax_styler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,KAAK,iBAAiB,EAAC,MAAM,mBAAmB,CAAC;AAGtE,MAAM,MAAM,gBAAgB,GAAG,CAAC,aAAa,EAAE,YAAY,KAAK,IAAI,CAAC;AAErE;;;;;;;GAOG;AACH,qBAAa,YAAY;;IACxB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,GAAG,SAAS,CAAC,CAE9C;IAkBF,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,IAAI;IAc9E,iBAAiB,CAChB,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,MAAM,EACpB,SAAS,EAAE,gBAAgB,EAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,GACrB,aAAa;IAahB,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,aAAa;IAQnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkDG;IACH,OAAO,CACN,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE,aAAa,GAAG,SAA+B,GACtD,MAAM;IAcT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA0EG;IACH,qBAAqB,CACpB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,gBAAgB,EACxB,IAAI,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAc,GACpC,aAAa;IAmChB;;;;;;;;OAQG;IACH,eAAe,CAAC,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,iBAAiB,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM;IAoDlF;;;;;;;;;;;;;;;;;;OAkBG;IACH,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,GAAG,aAAa;IAiG3E,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAM;IAGlC,qBAAqB,EAAE,KAAK,CAAC,0BAA0B,CAAC,CAAM;IAC9D,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAAC,CAAM;IAC5D,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAM;IAEzC,wBAAwB,CAAC,EAAE,EAAE,0BAA0B,GAAG,IAAI;IAG9D,uBAAuB,CAAC,EAAE,EAAE,yBAAyB,GAAG,IAAI;IAG5D,aAAa,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI;IAIzC,wBAAwB,CAAC,GAAG,EAAE,iCAAiC,GAAG,IAAI;IAKtE,uBAAuB,CAAC,GAAG,EAAE,gCAAgC,GAAG,IAAI;IAKpE,aAAa,CAAC,GAAG,EAAE,uBAAuB,GAAG,IAAI;CAKjD;AAED,MAAM,MAAM,qBAAqB,GAC9B,MAAM,GACN,qBAAqB,GACrB,KAAK,CAAC,MAAM,GAAG,qBAAqB,CAAC,CAAC;AAEzC,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,qBAAqB,GAAG,SAAS,CAAC,GAAG;IAClF,IAAI,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;CACpC,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,qBAAqB;IACrC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CACjC;AAED;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACrB,MAAM,EAAE,aAAa,GAAG,IAAI,CAAC;CAC7B;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAwBtE,MAAM,MAAM,0BAA0B,GAAG,CAAC,GAAG,EAAE,iCAAiC,KAAK,IAAI,CAAC;AAC1F,MAAM,MAAM,yBAAyB,GAAG,CAAC,GAAG,EAAE,gCAAgC,KAAK,IAAI,CAAC;AACxF,MAAM,MAAM,gBAAgB,GAAG,CAAC,GAAG,EAAE,uBAAuB,KAAK,IAAI,CAAC;AAEtE,MAAM,WAAW,iCAAiC;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,aAAa,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,CAAC;CAClB;AACD,MAAM,WAAW,gCAAgC;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,aAAa,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,iBAAiB,CAAC;CAC1B;AACD,MAAM,WAAW,uBAAuB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,IAAI,EAAE,MAAM,CAAC;CACb"}

package/dist/syntax_styler.js

@@ -91,18 +91,24 @@ export class SyntaxStyler {
      * @returns HTML string with syntax highlighting using CSS classes (`.token_*`)
      *
      * @example
+     * ```ts
      * // Standard usage - uses registered grammar
      * stylize('var foo = true;', 'ts');
+     * ```
      *
      * @example
+     * ```ts
      * // Custom grammar - overrides registered grammar
      * const customGrammar = { keyword: [...], string: [...] };
      * stylize('var foo = false;', 'ts', customGrammar);
+     * ```
      *
      * @example
+     * ```ts
      * // Extended grammar - builds on existing grammar
      * const extended = this.extend_grammar('ts', { customToken: [...] });
      * stylize('var foo = 42;', 'ts-extended', extended);
+     * ```
      */
     stylize(text, lang, grammar = this.get_lang(lang)) {
         var ctx = {

package/dist/syntax_styler_global.d.ts

@@ -1,3 +1,13 @@
 import { SyntaxStyler } from './syntax_styler.js';
+/**
+ * Pre-configured `SyntaxStyler` instance with all built-in grammars registered.
+ *
+ * @example
+ * ```ts
+ * import {syntax_styler_global} from './syntax_styler_global.js';
+ *
+ * const html = syntax_styler_global.stylize('const x = 1;', 'ts');
+ * ```
+ */
 export declare const syntax_styler_global: SyntaxStyler;
 //# sourceMappingURL=syntax_styler_global.d.ts.map

package/dist/syntax_styler_global.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"syntax_styler_global.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/syntax_styler_global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAUhD,eAAO,MAAM,oBAAoB,cAAqB,CAAC"}
+{"version":3,"file":"syntax_styler_global.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/syntax_styler_global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAUhD;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB,cAAqB,CAAC"}

package/dist/syntax_styler_global.js

@@ -7,6 +7,16 @@ import { add_grammar_ts } from './grammar_ts.js';
 import { add_grammar_svelte } from './grammar_svelte.js';
 import { add_grammar_json } from './grammar_json.js';
 import { add_grammar_markdown } from './grammar_markdown.js';
+/**
+ * Pre-configured `SyntaxStyler` instance with all built-in grammars registered.
+ *
+ * @example
+ * ```ts
+ * import {syntax_styler_global} from './syntax_styler_global.js';
+ *
+ * const html = syntax_styler_global.stylize('const x = 1;', 'ts');
+ * ```
+ */
 export const syntax_styler_global = new SyntaxStyler();
 add_grammar_markup(syntax_styler_global);
 add_grammar_css(syntax_styler_global);

package/dist/tokenize_syntax.d.ts

@@ -16,6 +16,7 @@ import { type SyntaxTokenStream } from './syntax_token.js';
  * @returns an array of strings and tokens, a token stream
  *
  * @example
+ * ```ts
  * var code = `var foo = 0;`;
  * var tokens = tokenize_syntax(code, SyntaxStyler.langs.js);
  * for (var token of tokens) {
@@ -23,6 +24,7 @@ import { type SyntaxTokenStream } from './syntax_token.js';
  *         console.log(`Found numeric literal: ${token.content}`);
  *     }
  * }
+ * ```
  */
 export declare const tokenize_syntax: (text: string, grammar: SyntaxGrammar) => SyntaxTokenStream;
 //# sourceMappingURL=tokenize_syntax.d.ts.map

package/dist/tokenize_syntax.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokenize_syntax.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/tokenize_syntax.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAc,KAAK,iBAAiB,EAAC,MAAM,mBAAmB,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,EAAE,SAAS,aAAa,KAAG,iBAQtE,CAAC"}
+{"version":3,"file":"tokenize_syntax.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/tokenize_syntax.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAc,KAAK,iBAAiB,EAAC,MAAM,mBAAmB,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,EAAE,SAAS,aAAa,KAAG,iBAQtE,CAAC"}

package/dist/tokenize_syntax.js

@@ -15,6 +15,7 @@ import { SyntaxToken } from './syntax_token.js';
  * @returns an array of strings and tokens, a token stream
  *
  * @example
+ * ```ts
  * var code = `var foo = 0;`;
  * var tokens = tokenize_syntax(code, SyntaxStyler.langs.js);
  * for (var token of tokens) {
@@ -22,6 +23,7 @@ import { SyntaxToken } from './syntax_token.js';
  *         console.log(`Found numeric literal: ${token.content}`);
  *     }
  * }
+ * ```
  */
 export const tokenize_syntax = (text, grammar) => {
     // Grammar is already normalized (rest merged, patterns in arrays, etc.)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuzdev/fuz_code",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "description": "syntax styling utilities and components for TypeScript, Svelte, and Markdown",
   "glyph": "🎨",
   "logo": "logo.svg",
@@ -58,15 +58,18 @@
   },
   "devDependencies": {
     "@changesets/changelog-git": "^0.2.1",
-    "@fuzdev/fuz_css": "^0.47.0",
-    "@fuzdev/fuz_ui": "^0.181.1",
-    "@fuzdev/fuz_util": "^0.49.2",
+    "@fuzdev/fuz_css": "^0.48.0",
+    "@fuzdev/fuz_ui": "^0.182.1",
+    "@fuzdev/fuz_util": "^0.50.1",
+    "@fuzdev/gro": "^0.192.1",
+    "@jridgewell/trace-mapping": "^0.3.31",
     "@ryanatkn/eslint-config": "^0.9.0",
     "@ryanatkn/gro": "^0.191.0",
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.50.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@types/estree": "^1.0.8",
     "@types/node": "^24.10.1",
     "@webref/css": "^8.2.0",
     "eslint": "^9.39.1",
@@ -77,11 +80,13 @@
     "prettier-plugin-svelte": "^3.4.1",
     "svelte": "^5.49.1",
     "svelte-check": "^4.3.6",
+    "svelte2tsx": "^0.7.47",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.48.1",
     "vitest": "^4.0.15",
-    "zimmerframe": "^1.1.4"
+    "zimmerframe": "^1.1.4",
+    "zod": "^4.3.6"
   },
   "prettier": {
     "plugins": [

package/src/lib/highlight_manager.ts

@@ -10,8 +10,16 @@ export const supports_css_highlight_api = (): boolean =>
 	!!(globalThis.CSS?.highlights && globalThis.Highlight); // eslint-disable-line @typescript-eslint/no-unnecessary-condition
 
 /**
- * Manages highlights for a single element.
+ * Manages CSS Custom Highlight API ranges for a single element.
  * Tracks ranges per element and only removes its own ranges when clearing.
+ *
+ * **Experimental** — limited browser support. Use `Code` for production.
+ *
+ * @example
+ * ```ts
+ * const manager = new HighlightManager();
+ * manager.highlight_from_syntax_tokens(element, tokens);
+ * ```
  */
 export class HighlightManager {
 	element_ranges: Map<string, Array<Range>>;

package/src/lib/highlight_priorities.gen.ts

@@ -1,4 +1,4 @@
-import type {Gen} from '@ryanatkn/gro';
+import type {Gen} from '@fuzdev/gro';
 import {readFileSync} from 'node:fs';
 
 const theme_css_path = 'src/lib/theme_highlight.css';

package/src/lib/svelte_preprocess_fuz_code.ts

@@ -5,16 +5,20 @@ import {should_exclude_path} from '@fuzdev/fuz_util/path.js';
 import {escape_js_string} from '@fuzdev/fuz_util/string.js';
 import {
 	find_attribute,
-	evaluate_static_expr,
 	extract_static_string,
+	try_extract_conditional_chain,
 	build_static_bindings,
 	resolve_component_names,
+	handle_preprocess_error,
 	type ResolvedComponentImport,
 } from '@fuzdev/fuz_util/svelte_preprocess_helpers.js';
 
 import {syntax_styler_global} from './syntax_styler_global.js';
 import type {SyntaxStyler} from './syntax_styler.js';
 
+/**
+ * Options for `svelte_preprocess_fuz_code`.
+ */
 export interface PreprocessFuzCodeOptions {
 	/** File patterns to exclude. */
 	exclude?: Array<string | RegExp>;
@@ -40,6 +44,23 @@ export interface PreprocessFuzCodeOptions {
 	on_error?: 'log' | 'throw';
 }
 
+/**
+ * Svelte preprocessor that compiles static `Code` component content at build time,
+ * replacing runtime syntax highlighting with pre-rendered HTML.
+ *
+ * @param options preprocessor configuration
+ * @returns a Svelte preprocessor group
+ *
+ * @example
+ * ```ts
+ * // svelte.config.js
+ * import {svelte_preprocess_fuz_code} from '@fuzdev/fuz_code/svelte_preprocess_fuz_code.js';
+ *
+ * export default {
+ *   preprocess: [svelte_preprocess_fuz_code(), vitePreprocess()],
+ * };
+ * ```
+ */
 export const svelte_preprocess_fuz_code = (
 	options: PreprocessFuzCodeOptions = {},
 ): PreprocessorGroup => {
@@ -136,7 +157,7 @@ const try_highlight = (
 			html = syntax_styler.stylize(text, lang);
 			options.cache?.set(cache_key, html);
 		} catch (error) {
-			handle_error(error, options);
+			handle_preprocess_error(error, '[fuz-code]', options.filename, options.on_error);
 			return null;
 		}
 	}
@@ -165,7 +186,7 @@ const find_code_usages = (
 			if (!code_names.has(node.name)) return;
 
 			// Skip if spread attributes present — can't determine content statically
-			if (node.attributes.some((attr: any) => attr.type === 'SpreadAttribute')) return;
+			if (node.attributes.some((attr) => attr.type === 'SpreadAttribute')) return;
 
 			const content_attr = find_attribute(node, 'content');
 			if (!content_attr) return;
@@ -200,21 +221,42 @@ const find_code_usages = (
 				return;
 			}
 
-			// Try conditional expression with static string branches
-			const conditional = try_extract_conditional(
+			// Try conditional chain (handles both simple and nested ternaries)
+			const chain = try_extract_conditional_chain(
 				content_attr.value,
 				options.source,
 				options.bindings,
 			);
-			if (conditional) {
-				const html_a = try_highlight(conditional.consequent, lang_value, syntax_styler, options);
-				const html_b = try_highlight(conditional.alternate, lang_value, syntax_styler, options);
-				if (html_a === null || html_b === null) return;
-				if (html_a === conditional.consequent && html_b === conditional.alternate) return;
+			if (chain) {
+				// Highlight all branches
+				const highlighted: Array<{html: string; original: string}> = [];
+				let any_changed = false;
+				for (const branch of chain) {
+					const html = try_highlight(branch.value, lang_value, syntax_styler, options);
+					if (html === null) return;
+					if (html !== branch.value) any_changed = true;
+					highlighted.push({html, original: branch.value});
+				}
+				if (!any_changed) return;
+
+				// Build nested ternary expression for dangerous_raw_html
+				// chain: [{test_source: 'a', value: ...}, {test_source: 'b', value: ...}, {test_source: null, value: ...}]
+				// → a ? 'html_a' : b ? 'html_b' : 'html_c'
+				let expr = '';
+				for (let i = 0; i < chain.length; i++) {
+					const branch = chain[i]!;
+					const html = highlighted[i]!.html;
+					if (branch.test_source !== null) {
+						expr += `${branch.test_source} ? '${escape_js_string(html)}' : `;
+					} else {
+						expr += `'${escape_js_string(html)}'`;
+					}
+				}
+
 				transformations.push({
 					start: content_attr.start,
 					end: content_attr.end,
-					replacement: `dangerous_raw_html={${conditional.test_source} ? '${escape_js_string(html_a)}' : '${escape_js_string(html_b)}'}`,
+					replacement: `dangerous_raw_html={${expr}}`,
 				});
 			}
 		},
@@ -222,47 +264,3 @@ const find_code_usages = (
 
 	return transformations;
 };
-
-type AttributeValue = AST.Attribute['value'];
-
-interface ConditionalStaticStrings {
-	test_source: string;
-	consequent: string;
-	alternate: string;
-}
-
-/**
- * Try to extract a conditional expression where both branches are static strings.
- * Returns the condition source text and both branch values, or `null` if not applicable.
- */
-const try_extract_conditional = (
-	value: AttributeValue,
-	source: string,
-	bindings: ReadonlyMap<string, string>,
-): ConditionalStaticStrings | null => {
-	if (value === true || Array.isArray(value)) return null;
-	const expr = value.expression;
-	if (expr.type !== 'ConditionalExpression') return null;
-
-	const consequent = evaluate_static_expr(expr.consequent, bindings);
-	if (consequent === null) return null;
-	const alternate = evaluate_static_expr(expr.alternate, bindings);
-	if (alternate === null) return null;
-
-	const test = expr.test as any;
-	const test_source = source.slice(test.start, test.end);
-	return {test_source, consequent, alternate};
-};
-
-/**
- * Handle errors during highlighting.
- */
-const handle_error = (error: unknown, options: FindCodeUsagesOptions): void => {
-	const message = `[fuz-code] Highlighting failed${options.filename ? ` in ${options.filename}` : ''}: ${error instanceof Error ? error.message : String(error)}`;
-
-	if (options.on_error === 'throw') {
-		throw new Error(message);
-	}
-	// eslint-disable-next-line no-console
-	console.error(message);
-};

package/src/lib/syntax_styler.ts

@@ -104,18 +104,24 @@ export class SyntaxStyler {
 	 * @returns HTML string with syntax highlighting using CSS classes (`.token_*`)
 	 *
 	 * @example
+	 * ```ts
 	 * // Standard usage - uses registered grammar
 	 * stylize('var foo = true;', 'ts');
+	 * ```
 	 *
 	 * @example
+	 * ```ts
 	 * // Custom grammar - overrides registered grammar
 	 * const customGrammar = { keyword: [...], string: [...] };
 	 * stylize('var foo = false;', 'ts', customGrammar);
+	 * ```
 	 *
 	 * @example
+	 * ```ts
 	 * // Extended grammar - builds on existing grammar
 	 * const extended = this.extend_grammar('ts', { customToken: [...] });
 	 * stylize('var foo = 42;', 'ts-extended', extended);
+	 * ```
 	 */
 	stylize(
 		text: string,

package/src/lib/syntax_styler_global.ts

@@ -8,6 +8,16 @@ import {add_grammar_svelte} from './grammar_svelte.js';
 import {add_grammar_json} from './grammar_json.js';
 import {add_grammar_markdown} from './grammar_markdown.js';
 
+/**
+ * Pre-configured `SyntaxStyler` instance with all built-in grammars registered.
+ *
+ * @example
+ * ```ts
+ * import {syntax_styler_global} from '@fuzdev/fuz_code/syntax_styler_global.js';
+ *
+ * const html = syntax_styler_global.stylize('const x = 1;', 'ts');
+ * ```
+ */
 export const syntax_styler_global = new SyntaxStyler();
 
 add_grammar_markup(syntax_styler_global);

package/src/lib/tokenize_syntax.ts

@@ -17,6 +17,7 @@ import {SyntaxToken, type SyntaxTokenStream} from './syntax_token.js';
  * @returns an array of strings and tokens, a token stream
  *
  * @example
+ * ```ts
  * var code = `var foo = 0;`;
  * var tokens = tokenize_syntax(code, SyntaxStyler.langs.js);
  * for (var token of tokens) {
@@ -24,6 +25,7 @@ import {SyntaxToken, type SyntaxTokenStream} from './syntax_token.js';
  *         console.log(`Found numeric literal: ${token.content}`);
  *     }
  * }
+ * ```
  */
 export const tokenize_syntax = (text: string, grammar: SyntaxGrammar): SyntaxTokenStream => {
 	// Grammar is already normalized (rest merged, patterns in arrays, etc.)