tosijs-ui 1.16.0 → 1.16.1

package/CHANGELOG.md

@@ -1,5 +1,78 @@
 # Changelog
 
+## 1.16.1
+
+A patch: everything here is additive. Two features, a search field that suggests refinements
+and pluggable live-example dialects, and nothing that changes how existing code behaves.
+`dist/iife.js` grows by 2.9 kB gzip (469.9 → 472.8 kB), which is both features going through
+the batteries-included bundle; the ESM path pays only for what it imports.
+
+### `<tosi-search-field>`: a search box that suggests refinements (snowfox, virta #2459)
+
+A new component in the spirit of Finder's search field. As you type, it lists **hints** from
+rules you supply: type `doc` and it can offer *name contains "doc"* or *Word documents*.
+Picking one turns it into a **tag** in the query and consumes the text, and you can keep
+typing. `value` is `{ tags, text }`.
+
+- A tag is `{ caption, background?, color?, …your data }`, with chips coloured like
+  `<tosi-tag-list>`'s.
+- It fires `change` when the tags change, and `action` on Enter when no hint is highlighted.
+- It is a real combobox: focus stays in the field, ↓/↑ move through the hints, Escape closes
+  them, and Backspace in an empty field removes the last tag. The hints close only for a
+  scroll that moves the field itself, so a table re-filtering on every keystroke (which
+  scrolls it) doesn't close them the instant they open, and scrolling past the end of the list
+  doesn't scroll the page.
+- A clear (✕) button, shown when there's anything to clear, removes the tags and the text
+  (also `clear()`).
+- **As a filter:** give each tag a `test(item)` and the field a `textTest(item, text)`, and
+  `field.filter` is an array filter to hand straight to `<tosi-table>.filter`. The docs filter
+  the 3,655-row emoji table this way. `hints` and `textTest` can be passed to the element
+  creator like any other property; `textTest` defaults to `null`, because tosijs sets a creator
+  prop as a property only when its default is not `undefined` (otherwise it was stored as an
+  attribute, a stringified function). `filter` returns the same function until the query
+  changes, so a table's filter memo holds.
+- Importing it on its own (`tosijs-ui/search-field`) costs 25.5 kB gzip: `<tosi-tag>` moved
+  into its own module (still exported from `tag-list`), so it no longer pulls in the menu
+  system.
+
+### Pluggable dialects for live examples (#184)
+
+Live examples can now be written in languages tosijs-ui doesn't know about. `registerDialect`
+from `tosijs-ui/live-example` adds one, and a fence in that language becomes a live example
+like `js`, `tjs` and `ts`: it groups with `html`/`css`/`test` blocks, honours `:static` and the
+site's example policy, and saves back to source. `js`, `tjs` and `ts` are now built-in entries
+of the same registry.
+
+A dialect either **transforms** its source to JavaScript that the example runs as usual, or
+**runs** it itself — given the example's preview, its options, the page's modules, an
+`AbortSignal` for when the example re-runs, and `report()` for showing a result. Registering
+over a built-in (`registerDialect('tjs', { transform })`) swaps in your own tjs-lang build.
+This is what tjs-lang asked for to move AJS into doc pages; see the live-example page, "Adding
+a dialect".
+
+If your dialect's name is also a syntax-highlighting grammar, call `registerLiveLanguage` from
+`tosijs-ui/site` in your site config too: the build-time highlighter never sees page
+registrations, and would otherwise tokenize the source the example reads.
+
+A replaced built-in is what runs in the browser, in dev and on the deployed site alike: the
+build pre-transpiles `tjs` examples with the installed tjs-lang (so readers don't load the
+transpiler), and the page skips that pre-transpiled code once the site registers its own `tjs`.
+The build-time example check still transpiles `tjs` fences with the installed tjs-lang, so an
+override that accepts newer syntax can fail that check; `checkExamples: false` is the escape
+until the site config can say `tjs` is overridden.
+
+Fence languages are case-sensitive, as they were in 1.16.0: ```` ```JS ```` is not a live
+example. One visible difference: 1.16.0 also left such a fence unhighlighted, and it is now
+highlighted as ordinary static code, on the page and in the ePub.
+
+**Fence options.** Any fence can carry a JSON object after its language,
+`` ```tjs {"runTests": "report"} ``, passed to its dialect as `options`. Malformed options are
+reported in the console with the example they belong to.
+
+Two more copies of "which languages run" were found while doing this, a hard-coded selector in
+`insertExamples` and a private fence parser in the example checker, which would have read
+`{"debug":true}` as the mode `true`. Both now use the shared rule.
+
 ## 1.16.0
 
 ### `<tosi-md>` sanitizes by default (#179)

package/dist/doc-system/example-policy.d.ts

@@ -1,5 +1,37 @@
 /** Fence languages that EXECUTE. Everything else is display-only. */
 export declare const EXECUTABLE_LANGS: Set<string>;
+/**
+ * Make fences in `lang` live examples, as an example's source block.
+ *
+ * You normally call `registerDialect` (which calls this). Call it directly only in a BUILD
+ * process that must agree with the page: the static highlighter runs at build time, where the
+ * page's `registerDialect` calls never happen, so a dialect named like a highlighter grammar
+ * (`python`, say) would be tokenized there and the example would read markup instead of code.
+ * Registering the name in your site config avoids that.
+ */
+export declare function registerLiveLanguage(lang: string): void;
+/** Is `lang` an example's source language — `js`, `tjs`, `ts`, or a registered dialect? */
+export declare function isDialectLanguage(lang: string): boolean;
+/**
+ * THE `language-*` class pattern, and the only place it is written.
+ *
+ * It was spelled `[A-Za-z0-9_+#-]+` four times in `highlight.ts` and `[\w-]+` once in
+ * `epub.ts`, so a `c++` or `c#` fence was read as a language by one and as `c` by the other.
+ * `+` and `#` are in the class deliberately: they are real language names. It lives here, not
+ * in `highlight.ts`, because live examples need it too and must not import the highlighter's
+ * grammar map to get it.
+ */
+export declare const LANGUAGE_NAME = "[A-Za-z0-9_+#-]+";
+/**
+ * The fence language of a `<code class="language-…">`, **as written** (case preserved), or `''`.
+ *
+ * Case matters: fence languages are lowercase (`parseFenceInfo` reads `[a-z]+`), so ```` ```JS ````
+ * is not a live example. 1.16.1's first cut matched classes case-insensitively in one place
+ * and not the others, and an uppercase fence became live in `insertExamples` but not in
+ * save-to-source's scan — its content vanished from the page and every later save landed
+ * on the wrong block. Use `langOfClass` (lowercased) only for grammar lookups.
+ */
+export declare function languageOfClass(className: string | null | undefined): string;
 /**
  * - `'auto'` — the six executable languages become live examples (the web default).
  * - `'opt-in'` — only a fence that asks, via `:inline` / `:iframe` / `:ide`.
@@ -13,24 +45,30 @@ export type ExamplePolicy = 'auto' | 'opt-in' | 'none';
 /**
  * Will this fence become a live example?
  *
- * @param lang  the fence language, lowercased (`js`, `html`, `typescript`, …)
+ * @param lang  the fence language as written (`js`, `html`, `typescript`, …); case-sensitive
  * @param mode  the `:<mode>` suffix, if any (`inline` | `iframe` | `ide` | `static`)
  * @param policy `'auto'` (executables run) or `'opt-in'` (only fences that ask)
  */
 export declare function isLiveFence(lang: string, mode: string | undefined, policy?: ExamplePolicy): boolean;
 /**
- * THE fence-info parser. `js`, `css#anchor`, `js:iframe`, `ts:ide#demo`, `ts#demo:ide`.
+ * THE fence-info parser. `js`, `css#anchor`, `js:iframe`, `ts:ide#demo`, `ts#demo:ide`,
+ * `tjs {"runTests": "report"}`.
  *
  * `:mode` (inline | iframe | ide | static) sets the live example's execution mode; `#id` gives
  * it a stable anchor. `#id` is `[A-Za-z0-9_-]+` and `:mode` is `[a-z]+`, so the two cannot
  * overlap and each is parsed independently, order-free.
  *
+ * A JSON object after the head is the example's **options**, passed to its dialect (#184). It
+ * is split off FIRST: `{"debug":true}` contains `:true`, which the mode pattern would
+ * otherwise read as a mode. Options that are not a JSON object are reported in
+ * `optionsError` rather than dropped, so an author sees why their options did nothing.
+ *
  * Extracted because a SECOND, worse copy existed in `save-to-source.ts` — a regex that
  * captured the language as `[\w-]*` and therefore stopped dead at the colon, so it could not
  * see `:static` at all. With a `:static` fence in a document, its example ordinals diverged
  * from the ones `insert-examples` assigns, and an edit saved over a DIFFERENT block than the
  * one edited. Silently: the "couldn't locate this example" guard only fires when the ordinal
- * is out of range, and here a group existed at that index — the wrong one.
+ * is out of range, and here a group existed at that index.
  *
  * This is the same failure the `isLiveFence` docblock above describes, one layer down: the
  * rule was stated twice and the copies disagreed. Parse fence info here or not at all.
@@ -39,4 +77,6 @@ export declare function parseFenceInfo(info: string): {
     lang: string;
     mode?: string;
     id?: string;
+    options?: Record<string, unknown>;
+    optionsError?: string;
 };

package/dist/doc-system/example-policy.js

@@ -25,10 +25,66 @@ export const EXECUTABLE_LANGS = new Set([
     'css',
     'test',
 ]);
+/**
+ * The languages that are an example's SOURCE block (its one executable slot). `js`, `tjs` and
+ * `ts` are built in; `registerLiveLanguage` adds more (`registerDialect` in
+ * `tosijs-ui/live-example` calls it, so a registered dialect's fences run).
+ *
+ * Kept here, beside `EXECUTABLE_LANGS`, because the same fence is judged in four places
+ * (grouping, save-to-source, the highlighter, the ePub) and they must all see a registered
+ * dialect or none of them may.
+ */
+const SOURCE_LANGS = new Set(['js', 'ts', 'tjs']);
+/**
+ * Make fences in `lang` live examples, as an example's source block.
+ *
+ * You normally call `registerDialect` (which calls this). Call it directly only in a BUILD
+ * process that must agree with the page: the static highlighter runs at build time, where the
+ * page's `registerDialect` calls never happen, so a dialect named like a highlighter grammar
+ * (`python`, say) would be tokenized there and the example would read markup instead of code.
+ * Registering the name in your site config avoids that.
+ */
+export function registerLiveLanguage(lang) {
+    const name = lang.toLowerCase();
+    if (!/^[a-z]+$/.test(name)) {
+        throw new Error(`registerLiveLanguage: "${lang}" is not a fence language (lowercase letters only, since the fence parser reads \`[a-z]+\`)`);
+    }
+    if (EXECUTABLE_LANGS.has(name) && !SOURCE_LANGS.has(name)) {
+        throw new Error(`registerLiveLanguage: "${name}" is already an example block (html/css/test) and cannot be a dialect`);
+    }
+    SOURCE_LANGS.add(name);
+}
+/** Is `lang` an example's source language — `js`, `tjs`, `ts`, or a registered dialect? */
+export function isDialectLanguage(lang) {
+    return SOURCE_LANGS.has(lang);
+}
+/**
+ * THE `language-*` class pattern, and the only place it is written.
+ *
+ * It was spelled `[A-Za-z0-9_+#-]+` four times in `highlight.ts` and `[\w-]+` once in
+ * `epub.ts`, so a `c++` or `c#` fence was read as a language by one and as `c` by the other.
+ * `+` and `#` are in the class deliberately: they are real language names. It lives here, not
+ * in `highlight.ts`, because live examples need it too and must not import the highlighter's
+ * grammar map to get it.
+ */
+export const LANGUAGE_NAME = '[A-Za-z0-9_+#-]+';
+const LANGUAGE_CLASS = new RegExp(`language-(${LANGUAGE_NAME})`);
+/**
+ * The fence language of a `<code class="language-…">`, **as written** (case preserved), or `''`.
+ *
+ * Case matters: fence languages are lowercase (`parseFenceInfo` reads `[a-z]+`), so ```` ```JS ````
+ * is not a live example. 1.16.1's first cut matched classes case-insensitively in one place
+ * and not the others, and an uppercase fence became live in `insertExamples` but not in
+ * save-to-source's scan — its content vanished from the page and every later save landed
+ * on the wrong block. Use `langOfClass` (lowercased) only for grammar lookups.
+ */
+export function languageOfClass(className) {
+    return String(className ?? '').match(LANGUAGE_CLASS)?.[1] ?? '';
+}
 /**
  * Will this fence become a live example?
  *
- * @param lang  the fence language, lowercased (`js`, `html`, `typescript`, …)
+ * @param lang  the fence language as written (`js`, `html`, `typescript`, …); case-sensitive
  * @param mode  the `:<mode>` suffix, if any (`inline` | `iframe` | `ide` | `static`)
  * @param policy `'auto'` (executables run) or `'opt-in'` (only fences that ask)
  */
@@ -37,7 +93,8 @@ export function isLiveFence(lang, mode, policy = 'auto') {
     // costs the reader the highlighting.
     if (policy === 'none')
         return false;
-    if (!EXECUTABLE_LANGS.has(lang.toLowerCase()))
+    // Case-sensitive, like `parseFenceInfo`: see `languageOfClass`.
+    if (!EXECUTABLE_LANGS.has(lang) && !SOURCE_LANGS.has(lang))
         return false;
     // `:static` opts out under any policy, so one corpus can target all of them.
     if (mode === 'static')
@@ -45,27 +102,51 @@ export function isLiveFence(lang, mode, policy = 'auto') {
     return policy === 'opt-in' ? mode !== undefined : true;
 }
 /**
- * THE fence-info parser. `js`, `css#anchor`, `js:iframe`, `ts:ide#demo`, `ts#demo:ide`.
+ * THE fence-info parser. `js`, `css#anchor`, `js:iframe`, `ts:ide#demo`, `ts#demo:ide`,
+ * `tjs {"runTests": "report"}`.
  *
  * `:mode` (inline | iframe | ide | static) sets the live example's execution mode; `#id` gives
  * it a stable anchor. `#id` is `[A-Za-z0-9_-]+` and `:mode` is `[a-z]+`, so the two cannot
  * overlap and each is parsed independently, order-free.
  *
+ * A JSON object after the head is the example's **options**, passed to its dialect (#184). It
+ * is split off FIRST: `{"debug":true}` contains `:true`, which the mode pattern would
+ * otherwise read as a mode. Options that are not a JSON object are reported in
+ * `optionsError` rather than dropped, so an author sees why their options did nothing.
+ *
  * Extracted because a SECOND, worse copy existed in `save-to-source.ts` — a regex that
  * captured the language as `[\w-]*` and therefore stopped dead at the colon, so it could not
  * see `:static` at all. With a `:static` fence in a document, its example ordinals diverged
  * from the ones `insert-examples` assigns, and an edit saved over a DIFFERENT block than the
  * one edited. Silently: the "couldn't locate this example" guard only fires when the ordinal
- * is out of range, and here a group existed at that index — the wrong one.
+ * is out of range, and here a group existed at that index.
  *
  * This is the same failure the `isLiveFence` docblock above describes, one layer down: the
  * rule was stated twice and the copies disagreed. Parse fence info here or not at all.
  */
 export function parseFenceInfo(info) {
     const text = String(info || '');
-    return {
-        lang: text.match(/^[a-z]+/)?.[0] ?? '',
-        mode: text.match(/:([a-z]+)/)?.[1],
-        id: text.match(/#([A-Za-z0-9_-]+)/)?.[1],
+    const brace = text.indexOf('{');
+    const head = brace === -1 ? text : text.slice(0, brace);
+    const parsed = {
+        lang: head.match(/^[a-z]+/)?.[0] ?? '',
+        mode: head.match(/:([a-z]+)/)?.[1],
+        id: head.match(/#([A-Za-z0-9_-]+)/)?.[1],
     };
+    if (brace !== -1) {
+        const json = text.slice(brace).trim();
+        try {
+            const value = JSON.parse(json);
+            if (value && typeof value === 'object' && !Array.isArray(value)) {
+                parsed.options = value;
+            }
+            else {
+                parsed.optionsError = `fence options must be a JSON object, got ${json}`;
+            }
+        }
+        catch (error) {
+            parsed.optionsError = `fence options are not valid JSON (${error.message}): ${json}`;
+        }
+    }
+    return parsed;
 }

package/dist/doc-system/highlight.d.ts

@@ -21,7 +21,11 @@ export declare function registeredGrammars(): string[];
 export declare function grammarFor(fenceLang: string): string;
 /** Grammars this build can load — for tests, diagnostics, and the docs. */
 export declare function loadableGrammars(): string[];
-/** The fence language of a `<code class="language-…">`, lowercased, or `''`. */
+/**
+ * The fence language of a `<code class="language-…">`, lowercased, or `''` — for GRAMMAR
+ * lookups. The pattern itself is `languageOfClass` in `example-policy.ts`, the only place it
+ * is written; ask `isLiveFence` with the case-preserved `languageOfClass`, not with this.
+ */
 export declare function langOfClass(className: string | null | undefined): string;
 export declare function ensureGrammar(lang: string): Promise<boolean>;
 /**

package/dist/doc-system/highlight.js

@@ -24,7 +24,7 @@ it would deepen exactly the dependency that issue wants to escape. Prism's core
 grammars load per language, which also covers the languages a prose or book corpus uses and
 CodeMirror does not bundle (shell, python, rust, json, yaml, diff).
 */
-import { isLiveFence } from './example-policy.js';
+import { isLiveFence, languageOfClass, LANGUAGE_NAME, } from './example-policy.js';
 /** Languages Prism has built in — no grammar file to load. */
 const BUILTIN = new Set([
     'markup',
@@ -185,17 +185,12 @@ export function loadableGrammars() {
     return Object.keys(GRAMMARS).sort();
 }
 /**
- * THE `language-*` class pattern, and the only place it is written.
- *
- * It was spelled `[A-Za-z0-9_+#-]+` four times here and `[\w-]+` once in `epub.ts`, so a
- * `c++` or `c#` fence was read as a language by one and as `c` by the other — the same block
- * classified two ways by two passes over the same document. `+` and `#` are in the class
- * deliberately: they are real language names, not stray punctuation.
+ * The fence language of a `<code class="language-…">`, lowercased, or `''` — for GRAMMAR
+ * lookups. The pattern itself is `languageOfClass` in `example-policy.ts`, the only place it
+ * is written; ask `isLiveFence` with the case-preserved `languageOfClass`, not with this.
  */
-const LANGUAGE_CLASS = /language-([A-Za-z0-9_+#-]+)/;
-/** The fence language of a `<code class="language-…">`, lowercased, or `''`. */
 export function langOfClass(className) {
-    return (String(className ?? '').match(LANGUAGE_CLASS)?.[1] ?? '').toLowerCase();
+    return languageOfClass(className).toLowerCase();
 }
 let prism;
 let warnedNoPrism = false;
@@ -449,7 +444,7 @@ export async function highlightBlocks(root, opts = {}) {
         .filter((code) => {
         const el = code;
         const mode = el.parentElement?.getAttribute('data-example-mode') ?? undefined;
-        return !isLiveFence(langOfClass(el.className), mode, policy);
+        return !isLiveFence(languageOfClass(el.className), mode, policy);
     });
     if (blocks.length === 0)
         return 0;
@@ -499,7 +494,9 @@ function decodeEntities(s) {
 /** Every fence language present in rendered markdown — what grammars a page needs. */
 export function languagesIn(html) {
     return [
-        ...new Set([...html.matchAll(/<code class="language-([A-Za-z0-9_+#-]+)"/g)].map((m) => m[1].toLowerCase())),
+        ...new Set([
+            ...html.matchAll(new RegExp(`<code class="language-(${LANGUAGE_NAME})"`, 'g')),
+        ].map((m) => m[1].toLowerCase())),
     ];
 }
 /**
@@ -526,10 +523,10 @@ export async function highlightHtml(html, policy = 'auto') {
     example reads its SOURCE out of this element, and tokenizing it hands the example markup
     where it expected code.
     */
-    return html.replace(/(<pre([^>]*)>)<code class="language-([A-Za-z0-9_+#-]+)">([\s\S]*?)<\/code>/g, (whole, preTag, preAttrs, lang, body) => {
+    return html.replace(new RegExp(`(<pre([^>]*)>)<code class="language-(${LANGUAGE_NAME})">([\\s\\S]*?)</code>`, 'g'), (whole, preTag, preAttrs, lang, body) => {
         const l = lang.toLowerCase();
         const mode = preAttrs.match(/data-example-mode="([a-z]+)"/)?.[1];
-        if (isLiveFence(l, mode, policy))
+        if (isLiveFence(lang, mode, policy))
             return whole;
         if (!available.has(l))
             return whole;

package/dist/doc-system/render.js

@@ -29,12 +29,18 @@ docMarked.use({
             const id = parsed.id ?? '';
             const mode = parsed.mode ?? '';
             const bake = currentBakes?.get(token.text);
-            if (!id && !mode && !bake)
+            // Fence options (#184) ride to the page as JSON in an attribute; a parse error rides
+            // too, so the page can say which example it belongs to (the build does not know).
+            const options = parsed.options && escapeAttr(JSON.stringify(parsed.options));
+            const optionsError = parsed.optionsError && escapeAttr(parsed.optionsError);
+            if (!id && !mode && !bake && !options && !optionsError)
                 return false; // default rendering — byte-identical
             let html = baseRenderer.code({ ...token, lang });
             const attrs = [
                 id && `data-example-id="${id}"`,
                 mode && `data-example-mode="${mode}"`,
+                options && `data-example-options="${options}"`,
+                optionsError && `data-example-options-error="${optionsError}"`,
             ]
                 .filter(Boolean)
                 .join(' ');
@@ -63,6 +69,9 @@ function slugify(s) {
 function escapeHtml(s) {
     return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
+function escapeAttr(s) {
+    return escapeHtml(s).replace(/"/g, '&quot;');
+}
 // Per-parse footnote state. `parse()` is synchronous and Marked tokenizes fully
 // before rendering, so a module-level object is safe: preprocess resets it, the
 // tokenizers fill it (defs during the block pass, refs during inline — refs set

package/dist/doc-system/site/check-examples.js

@@ -23,7 +23,7 @@ Build-time only (bun). Never import from browser code.
 */
 import { marked } from 'marked';
 import { rewriteImports, AsyncFunction, loadTransform, transformAvailable, UnsupportedImportError, } from '../../live-example/code-transform.js';
-import { isLiveFence } from '../example-policy.js';
+import { isLiveFence, parseFenceInfo, } from '../example-policy.js';
 // The default live-example context (matches the IIFE globals the pages provide).
 // A project that sets a custom `context` on its <tosi-doc-system> can pass its
 // own keys; these are the tosijs-ui defaults.
@@ -54,15 +54,11 @@ const EXECUTABLE = new Set(['js', 'tjs', 'ts', 'test']);
 // scope is the difference between "once" and "once per rebuild". Lazily created, so a
 // corpus with no `ts` examples never makes one at all.
 let tsTranspiler;
-/** The bare dialect from a fence info string ('js#my-id' → 'js'); '' if none. */
-function dialectOf(info) {
-    return (info ?? '').match(/^[a-z]+/)?.[0] ?? '';
-}
-/** Collect every fenced code block in a doc (recursing into lists/quotes). */
-/** The `:<mode>` suffix of a fence info string, if any — `js:static` -> `static`. */
-function modeOf(info) {
-    return String(info ?? '').match(/:([a-z]+)/)?.[1];
-}
+/*
+Fence info is parsed by `parseFenceInfo`, the one copy of that grammar. This file had its own
+`dialectOf`/`modeOf` pair; once fences could carry JSON options (#184) `modeOf` would have read
+`{"debug":true}` as the mode `true`.
+*/
 function collectCodeTokens(text) {
     const out = [];
     const walk = (tokens) => {
@@ -75,9 +71,9 @@ function collectCodeTokens(text) {
             */
             if (t.type === 'code')
                 out.push({
-                    lang: dialectOf(t.lang),
+                    lang: parseFenceInfo(t.lang ?? '').lang,
                     text: t.text,
-                    mode: modeOf(t.lang),
+                    mode: parseFenceInfo(t.lang ?? '').mode,
                 });
             if (Array.isArray(t.tokens))
                 walk(t.tokens);

package/dist/doc-system/site/epub.js

@@ -17,12 +17,12 @@ Build-time only (Bun APIs + the `zip` CLI); never import from browser code.
 import * as fs from 'fs';
 import * as path from 'path';
 import { renderDocMarkdown } from '../render.js';
-import { highlightHtml, langOfClass } from '../highlight.js';
+import { highlightHtml } from '../highlight.js';
 import { buildSlugMap, pathForSlug, slugForPath, withBase } from '../routing.js';
 import { buildNavTree } from '../nav-tree.js';
 import { partitionByBook, DEFAULT_BOOK } from '../book-target.js';
 import { epubVolumeIdentity } from './epub-volumes.js';
-import { isLiveFence } from '../example-policy.js';
+import { isLiveFence, languageOfClass } from '../example-policy.js';
 import { DEFAULT_BOOK_CSS, stripDocMeta, flatten, slugify, } from '../book-html.js';
 import { selectBookDocs } from '../book-manifest.js';
 // Re-exported for back-compat (tosijs-ui/site's public surface + tests).
@@ -159,9 +159,10 @@ function exampleLangOf(pre, policy) {
         }
     }
     const cls = (code && code.getAttribute('class')) || '';
-    // `langOfClass` is THE pattern — this file used to spell it `[\w-]+`, so a `c++` / `c#`
-    // fence was read as `c` here and correctly there, classifying one block two ways.
-    const lang = langOfClass(cls);
+    // `languageOfClass` is THE pattern — this file used to spell it `[\w-]+`, so a `c++` / `c#`
+    // fence was read as `c` here and correctly there, classifying one block two ways. Case
+    // preserved, because the live-fence rule is case-sensitive.
+    const lang = languageOfClass(cls);
     if (!lang)
         return null;
     // The `:mode` suffix rides on the <pre> as `data-example-mode` — the same place

package/dist/doc-system/site/index.d.ts

@@ -19,3 +19,4 @@ export { listEpubVolumes, epubVolumeIdentity, renderEpubDownloads, type EpubVolu
 export { currentHolder, describeHolder, lockPathFor, lockDecision, isProcessAlive, } from './build-lock.js';
 export type { LockHolder, LockDecision } from './build-lock.js';
 export { registerGrammar, registeredGrammars, highlightHtml, highlightBlocks, grammarFor, } from '../highlight.js';
+export { registerLiveLanguage } from '../example-policy.js';

package/dist/doc-system/site/index.js

@@ -38,3 +38,6 @@ the ePub and print — not just a hydrated browser tab. That matters more than u
 wrong token colour is cosmetic on the web and permanent in a printed book.
 */
 export { registerGrammar, registeredGrammars, highlightHtml, highlightBlocks, grammarFor, } from '../highlight.js';
+// For a site whose registered dialect (#184) shares its name with a highlighter grammar: call
+// this in the site config so the build treats those fences as live examples too.
+export { registerLiveLanguage } from '../example-policy.js';