@eventuras/ratio-ui-shiki 0.1.0 → 0.2.0

package/README.md

@@ -63,6 +63,40 @@ const hl = await createRatioHighlighter();
 array of React nodes (not an HTML string), this path never uses
 `dangerouslySetInnerHTML` — it is injection-safe by construction.
 
+### Precomputed tokens: highlight at build time, render without Shiki
+
+When the page re-renders on the client (SPA, or React Router's `ssr: false` +
+prerender), `shikiToDualLines` isn't enough — whatever produces the lines must
+also run in the browser. Split it in two instead: tokenize in a **build
+script** with `codeToDualTokens`, ship the result as JSON, and render it with
+`tokensToLines` from the Shiki-free `tokens` entrypoint. The client then
+bundles ~1 kB — no grammars, no engine — and code is highlighted from the very
+first paint.
+
+```ts
+// build script (Node) — runs once per build
+import { createRatioHighlighter, codeToDualTokens } from '@eventuras/ratio-ui-shiki';
+
+const hl = await createRatioHighlighter();
+const tokens = codeToDualTokens(hl, source, 'tsx');
+await fs.writeFile('tokens.json', JSON.stringify(tokens));
+```
+
+```tsx
+// client — imports only the tiny tokens module, never Shiki
+import { CodeBlock } from '@eventuras/ratio-ui/core/CodeBlock';
+import { tokensToLines, DualThemeStyles } from '@eventuras/ratio-ui-shiki/tokens';
+import tokens from './tokens.json';
+
+<DualThemeStyles />
+<CodeBlock code={source} language="tsx" highlightedLines={tokensToLines(tokens)} />;
+```
+
+`shikiToDualLines(hl, code, lang)` is exactly
+`tokensToLines(codeToDualTokens(hl, code, lang))` — the two paths render
+byte-identical markup (unit-tested), so you can start client-side and move to
+precomputed tokens later without visual change.
+
 ### Advanced: `useShikiHighlighter`
 
 The hook the `<CodeBlock>` wrapper is built on. It loads (and shares) the
@@ -106,4 +140,7 @@ const hl = await createRatioHighlighter({
   hoisting); include it manually only when you render dual-theme lines by hand.
 - Entrypoints are split for RSC: the root (`.`) is server-safe (highlighter
   helpers + `DUAL_THEME_CSS` + types); the client component and hook live at
-  `@eventuras/ratio-ui-shiki/CodeBlock` and `.../useShikiHighlighter`.
+  `@eventuras/ratio-ui-shiki/CodeBlock` and `.../useShikiHighlighter`; the
+  Shiki-free precomputed-token renderer lives at
+  `@eventuras/ratio-ui-shiki/tokens` (`tokensToLines`, `DualThemeStyles`,
+  `DUAL_THEME_CSS`, types — imports nothing from Shiki).

package/dist/CodeBlock/CodeBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAEL,KAAK,cAAc,IAAI,kBAAkB,EAC1C,MAAM,oCAAoC,CAAC;AAC5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EAAoD,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGnG,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;IAClF;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAQ,EACR,MAAuB,EACvB,WAAW,EACX,GAAG,IAAI,EACR,EAAE,QAAQ,CAAC,cAAc,CAAC,qBA+B1B;yBArCe,SAAS;;;AAwCzB,eAAe,SAAS,CAAC"}
+{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAEL,KAAK,cAAc,IAAI,kBAAkB,EAC1C,MAAM,oCAAoC,CAAC;AAC5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EAAoC,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAInF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;IAClF;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAQ,EACR,MAAuB,EACvB,WAAW,EACX,GAAG,IAAI,EACR,EAAE,QAAQ,CAAC,cAAc,CAAC,qBA6B1B;yBAnCe,SAAS;;;AAsCzB,eAAe,SAAS,CAAC"}

package/dist/CodeBlock/CodeBlock.js

@@ -1,6 +1,7 @@
 /*! @eventuras/ratio-ui-shiki · Shiki syntax highlighting for ratio-ui · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
 "use client";
-import { DEFAULT_THEMES, DUAL_THEME_CSS, shikiToDualLines } from "../highlighter.js";
+import { DualThemeStyles } from "../tokens/index.js";
+import { DEFAULT_THEMES, shikiToDualLines } from "../highlighter.js";
 import { useShikiHighlighter } from "../useShikiHighlighter/index.js";
 import { useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -40,11 +41,7 @@ function CodeBlock$1({ code, language, themes = DEFAULT_THEMES, highlighter, ...
 		light,
 		dark
 	]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("style", {
-		href: "ratio-ui-shiki-dual",
-		precedence: "medium",
-		children: DUAL_THEME_CSS
-	}), /* @__PURE__ */ jsx(CodeBlock, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DualThemeStyles, {}), /* @__PURE__ */ jsx(CodeBlock, {
 		code,
 		language,
 		highlightedLines,

package/dist/CodeBlock/CodeBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.js","names":[],"sources":["../../src/CodeBlock/CodeBlock.tsx"],"sourcesContent":["// ratio-ui · design system for knowledge sharing\n// SPDX-FileCopyrightText: 2026 Losol AS\n// SPDX-License-Identifier: MPL-2.0\n\n'use client';\n\nimport React, { useMemo } from 'react';\nimport {\n  CodeBlock as CoreCodeBlock,\n  type CodeBlockProps as CoreCodeBlockProps,\n} from '@eventuras/ratio-ui/core/CodeBlock';\nimport type { HighlighterCore } from 'shiki/core';\nimport { shikiToDualLines, DEFAULT_THEMES, DUAL_THEME_CSS, type DualThemes } from '../highlighter';\nimport { useShikiHighlighter } from '../useShikiHighlighter';\n\nexport interface CodeBlockProps extends Omit<CoreCodeBlockProps, 'highlightedLines'> {\n  /**\n   * Light + dark Shiki theme pair to render with. The colors follow the app's\n   * mode (`data-theme` / `data-color-scheme`), like the rest of ratio-ui.\n   *\n   * The built-in highlighter only loads `github-light` / `github-dark`; to\n   * render a different pair, also pass a `highlighter` that has those themes\n   * loaded — otherwise the block falls back to un-highlighted code.\n   * @default { light: 'github-light', dark: 'github-dark' }\n   */\n  themes?: DualThemes;\n  /**\n   * Reuse an existing highlighter — e.g. one shared singleton from\n   * `createRatioHighlighter` preloaded with your languages — instead of letting\n   * this component lazily create its own. Ensure it has `language` and both\n   * themes loaded; otherwise the block falls back to un-highlighted code.\n   */\n  highlighter?: HighlighterCore;\n}\n\n/**\n * `CodeBlock`, wired to Shiki — a drop-in for `@eventuras/ratio-ui/core/CodeBlock`\n * that highlights `code` for the given `language`. It loads a highlighter\n * asynchronously (via `useShikiHighlighter`) and renders raw code until it is\n * ready, so there is no flash of missing content (graceful degradation). Token\n * colors follow the app's light/dark mode automatically.\n *\n * For static or server-rendered content, prefer the core `CodeBlock` with\n * pre-computed `highlightedLines` (build them with `shikiToDualLines` +\n * `DUAL_THEME_CSS`) so no highlighter ships to the client.\n */\nexport function CodeBlock({\n  code,\n  language,\n  themes = DEFAULT_THEMES,\n  highlighter,\n  ...rest\n}: Readonly<CodeBlockProps>) {\n  const { light, dark } = themes;\n  const activeHighlighter = useShikiHighlighter(highlighter);\n\n  const highlightedLines = useMemo(() => {\n    const hl = activeHighlighter;\n    if (!hl || !language) return undefined;\n    const loadedThemes = hl.getLoadedThemes();\n    if (\n      !hl.getLoadedLanguages().includes(language) ||\n      !loadedThemes.includes(light) ||\n      !loadedThemes.includes(dark)\n    ) {\n      return undefined;\n    }\n    try {\n      return shikiToDualLines(hl, code, language, { light, dark });\n    } catch {\n      return undefined; // unknown grammar/theme → raw code fallback\n    }\n  }, [activeHighlighter, code, language, light, dark]);\n\n  return (\n    <>\n      {/* Injection-safe theme switch; React hoists + dedupes by href. */}\n      <style href=\"ratio-ui-shiki-dual\" precedence=\"medium\">\n        {DUAL_THEME_CSS}\n      </style>\n      <CoreCodeBlock code={code} language={language} highlightedLines={highlightedLines} {...rest} />\n    </>\n  );\n}\n\nCodeBlock.displayName = 'ShikiCodeBlock';\nexport default CodeBlock;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA8CA,SAAgB,YAAU,EACxB,MACA,UACA,SAAS,gBACT,aACA,GAAG,QACwB;CAC3B,MAAM,EAAE,OAAO,SAAS;CACxB,MAAM,oBAAoB,oBAAoB,WAAW;CAEzD,MAAM,mBAAmB,cAAc;EACrC,MAAM,KAAK;EACX,IAAI,CAAC,MAAM,CAAC,UAAU,OAAO,KAAA;EAC7B,MAAM,eAAe,GAAG,gBAAgB;EACxC,IACE,CAAC,GAAG,mBAAmB,CAAC,CAAC,SAAS,QAAQ,KAC1C,CAAC,aAAa,SAAS,KAAK,KAC5B,CAAC,aAAa,SAAS,IAAI,GAE3B;EAEF,IAAI;GACF,OAAO,iBAAiB,IAAI,MAAM,UAAU;IAAE;IAAO;GAAK,CAAC;EAC7D,QAAQ;GACN;EACF;CACF,GAAG;EAAC;EAAmB;EAAM;EAAU;EAAO;CAAI,CAAC;CAEnD,OACE,qBAAA,YAAA,EAAA,UAAA,CAEE,oBAAC,SAAD;EAAO,MAAK;EAAsB,YAAW;YAC1C;CACI,CAAA,GACP,oBAAC,WAAD;EAAqB;EAAgB;EAA4B;EAAkB,GAAI;CAAO,CAAA,CAC9F,EAAA,CAAA;AAEN;AAEA,YAAU,cAAc"}
+{"version":3,"file":"CodeBlock.js","names":[],"sources":["../../src/CodeBlock/CodeBlock.tsx"],"sourcesContent":["// ratio-ui · design system for knowledge sharing\n// SPDX-FileCopyrightText: 2026 Losol AS\n// SPDX-License-Identifier: MPL-2.0\n\n'use client';\n\nimport React, { useMemo } from 'react';\nimport {\n  CodeBlock as CoreCodeBlock,\n  type CodeBlockProps as CoreCodeBlockProps,\n} from '@eventuras/ratio-ui/core/CodeBlock';\nimport type { HighlighterCore } from 'shiki/core';\nimport { shikiToDualLines, DEFAULT_THEMES, type DualThemes } from '../highlighter';\nimport { DualThemeStyles } from '../tokens';\nimport { useShikiHighlighter } from '../useShikiHighlighter';\n\nexport interface CodeBlockProps extends Omit<CoreCodeBlockProps, 'highlightedLines'> {\n  /**\n   * Light + dark Shiki theme pair to render with. The colors follow the app's\n   * mode (`data-theme` / `data-color-scheme`), like the rest of ratio-ui.\n   *\n   * The built-in highlighter only loads `github-light` / `github-dark`; to\n   * render a different pair, also pass a `highlighter` that has those themes\n   * loaded — otherwise the block falls back to un-highlighted code.\n   * @default { light: 'github-light', dark: 'github-dark' }\n   */\n  themes?: DualThemes;\n  /**\n   * Reuse an existing highlighter — e.g. one shared singleton from\n   * `createRatioHighlighter` preloaded with your languages — instead of letting\n   * this component lazily create its own. Ensure it has `language` and both\n   * themes loaded; otherwise the block falls back to un-highlighted code.\n   */\n  highlighter?: HighlighterCore;\n}\n\n/**\n * `CodeBlock`, wired to Shiki — a drop-in for `@eventuras/ratio-ui/core/CodeBlock`\n * that highlights `code` for the given `language`. It loads a highlighter\n * asynchronously (via `useShikiHighlighter`) and renders raw code until it is\n * ready, so there is no flash of missing content (graceful degradation). Token\n * colors follow the app's light/dark mode automatically.\n *\n * For static or server-rendered content, prefer the core `CodeBlock` with\n * pre-computed `highlightedLines` (build them with `shikiToDualLines` +\n * `DUAL_THEME_CSS`) so no highlighter ships to the client.\n */\nexport function CodeBlock({\n  code,\n  language,\n  themes = DEFAULT_THEMES,\n  highlighter,\n  ...rest\n}: Readonly<CodeBlockProps>) {\n  const { light, dark } = themes;\n  const activeHighlighter = useShikiHighlighter(highlighter);\n\n  const highlightedLines = useMemo(() => {\n    const hl = activeHighlighter;\n    if (!hl || !language) return undefined;\n    const loadedThemes = hl.getLoadedThemes();\n    if (\n      !hl.getLoadedLanguages().includes(language) ||\n      !loadedThemes.includes(light) ||\n      !loadedThemes.includes(dark)\n    ) {\n      return undefined;\n    }\n    try {\n      return shikiToDualLines(hl, code, language, { light, dark });\n    } catch {\n      return undefined; // unknown grammar/theme → raw code fallback\n    }\n  }, [activeHighlighter, code, language, light, dark]);\n\n  return (\n    <>\n      {/* Injection-safe theme switch; React hoists + dedupes by href. */}\n      <DualThemeStyles />\n      <CoreCodeBlock code={code} language={language} highlightedLines={highlightedLines} {...rest} />\n    </>\n  );\n}\n\nCodeBlock.displayName = 'ShikiCodeBlock';\nexport default CodeBlock;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+CA,SAAgB,YAAU,EACxB,MACA,UACA,SAAS,gBACT,aACA,GAAG,QACwB;CAC3B,MAAM,EAAE,OAAO,SAAS;CACxB,MAAM,oBAAoB,oBAAoB,WAAW;CAEzD,MAAM,mBAAmB,cAAc;EACrC,MAAM,KAAK;EACX,IAAI,CAAC,MAAM,CAAC,UAAU,OAAO,KAAA;EAC7B,MAAM,eAAe,GAAG,gBAAgB;EACxC,IACE,CAAC,GAAG,mBAAmB,CAAC,CAAC,SAAS,QAAQ,KAC1C,CAAC,aAAa,SAAS,KAAK,KAC5B,CAAC,aAAa,SAAS,IAAI,GAE3B;EAEF,IAAI;GACF,OAAO,iBAAiB,IAAI,MAAM,UAAU;IAAE;IAAO;GAAK,CAAC;EAC7D,QAAQ;GACN;EACF;CACF,GAAG;EAAC;EAAmB;EAAM;EAAU;EAAO;CAAI,CAAC;CAEnD,OACE,qBAAA,YAAA,EAAA,UAAA,CAEE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,WAAD;EAAqB;EAAgB;EAA4B;EAAkB,GAAI;CAAO,CAAA,CAC9F,EAAA,CAAA;AAEN;AAEA,YAAU,cAAc"}

package/dist/highlighter.d.ts

@@ -1,6 +1,8 @@
 import { default as React } from 'react';
 import { HighlighterCore } from 'shiki/core';
 import { BundledLanguage, BundledTheme, LanguageInput, ThemeInput } from 'shiki';
+import { DualTokenLine } from './tokens';
+export { SHIKI_TOKEN_CLASS, DUAL_THEME_CSS } from './tokens';
 /**
  * Languages preloaded when you don't pass your own to {@link createRatioHighlighter}.
  * Kept in sync with the fine-grained `@shikijs/langs/*` imports below.
@@ -13,17 +15,6 @@ export interface DualThemes {
 }
 /** Default light/dark theme pair — the code surface follows the app's mode. */
 export declare const DEFAULT_THEMES: DualThemes;
-/** Class set on every dual-theme token span; the CSS below switches its color. */
-export declare const SHIKI_TOKEN_CLASS = "ratio-shiki-token";
-/**
- * CSS that flips token colors with the app's mode. Shiki writes each token's
- * light/dark colors into the `--shiki-light` / `--shiki-dark` custom properties;
- * this reads the right one per `data-theme` / `data-color-scheme` — the same
- * dark selectors ratio-ui's own tokens use. The `<CodeBlock>` wrapper injects
- * this automatically (React style hoisting); include it yourself only if you
- * render dual-theme lines by hand.
- */
-export declare const DUAL_THEME_CSS = ".ratio-shiki-token{color:var(--shiki-light)}\n:root[data-theme=\"dark\"] .ratio-shiki-token,\n:root[data-color-scheme=\"dark\"] .ratio-shiki-token{color:var(--shiki-dark)}";
 export interface RatioHighlighterOptions {
     /**
      * Languages to preload, as Shiki language *inputs* (dynamic imports) — e.g.
@@ -52,12 +43,26 @@ export declare function createRatioHighlighter(options?: RatioHighlighterOptions
  * HTML string). `lang`/`theme` must already be loaded in `highlighter`.
  */
 export declare function shikiToLines(highlighter: HighlighterCore, code: string, lang: BundledLanguage | string, theme?: BundledTheme | string): React.ReactNode[];
+/**
+ * Tokenize `code` for a **light + dark** theme pair into plain, serializable
+ * data ({@link DualTokenLine}) — each token carries both colors as
+ * `--shiki-light` / `--shiki-dark` custom properties. This is the build-time
+ * half of the precomputed pipeline: run it in a build script (Node), ship the
+ * result as JSON, and render it with `tokensToLines` from
+ * `@eventuras/ratio-ui-shiki/tokens` — the client then needs no highlighter,
+ * grammars, or engine at all. `lang` and both themes must already be loaded
+ * in `highlighter`.
+ */
+export declare function codeToDualTokens(highlighter: HighlighterCore, code: string, lang: BundledLanguage | string, themes?: DualThemes): DualTokenLine[];
 /**
  * Turn `code` into one React node per line for a **light + dark** theme pair.
  * Each token span carries both colors as `--shiki-light` / `--shiki-dark` custom
  * properties and the {@link SHIKI_TOKEN_CLASS} class; pair it with
  * {@link DUAL_THEME_CSS} so the color follows the app's mode. Injection-safe.
  * `lang` and both themes must already be loaded in `highlighter`.
+ *
+ * Shorthand for `tokensToLines(codeToDualTokens(...))` — split the two halves
+ * yourself to highlight at build time and render without Shiki on the client.
  */
 export declare function shikiToDualLines(highlighter: HighlighterCore, code: string, lang: BundledLanguage | string, themes?: DualThemes): React.ReactNode[];
 //# sourceMappingURL=highlighter.d.ts.map

package/dist/highlighter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"highlighter.d.ts","sourceRoot":"","sources":["../src/highlighter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAyB,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAEzE,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEtF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,eAAe,EAc1C,CAAC;AAEF,uCAAuC;AACvC,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,+EAA+E;AAC/E,eAAO,MAAM,cAAc,EAAE,UAA2D,CAAC;AAEzF,kFAAkF;AAClF,eAAO,MAAM,iBAAiB,sBAAsB,CAAC;AAErD;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,gLAEoD,CAAC;AAEhF,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;CACvB;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,GAAE,uBAA4B,GAAG,OAAO,CAAC,eAAe,CAAC,CAuBtG;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,WAAW,EAAE,eAAe,EAC5B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,eAAe,GAAG,MAAM,EAC9B,KAAK,GAAE,YAAY,GAAG,MAA4B,GACjD,KAAK,CAAC,SAAS,EAAE,CA0BnB;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,eAAe,EAC5B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,eAAe,GAAG,MAAM,EAC9B,MAAM,GAAE,UAA2B,GAClC,KAAK,CAAC,SAAS,EAAE,CAgBnB"}
+{"version":3,"file":"highlighter.d.ts","sourceRoot":"","sources":["../src/highlighter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAyB,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAEzE,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtF,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AAI7D,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE7D;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,eAAe,EAc1C,CAAC;AAEF,uCAAuC;AACvC,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,+EAA+E;AAC/E,eAAO,MAAM,cAAc,EAAE,UAA2D,CAAC;AAEzF,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;CACvB;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,GAAE,uBAA4B,GAAG,OAAO,CAAC,eAAe,CAAC,CAuBtG;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,WAAW,EAAE,eAAe,EAC5B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,eAAe,GAAG,MAAM,EAC9B,KAAK,GAAE,YAAY,GAAG,MAA4B,GACjD,KAAK,CAAC,SAAS,EAAE,CA0BnB;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,eAAe,EAC5B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,eAAe,GAAG,MAAM,EAC9B,MAAM,GAAE,UAA2B,GAClC,aAAa,EAAE,CAiBjB;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,eAAe,EAC5B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,eAAe,GAAG,MAAM,EAC9B,MAAM,GAAE,UAA2B,GAClC,KAAK,CAAC,SAAS,EAAE,CAEnB"}

package/dist/highlighter.js

@@ -1,4 +1,5 @@
 /*! @eventuras/ratio-ui-shiki · Shiki syntax highlighting for ratio-ui · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
+import { tokensToLines } from "./tokens/index.js";
 import { Fragment } from "react";
 import { createHighlighterCore } from "shiki/core";
 import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
@@ -28,19 +29,6 @@ var DEFAULT_THEMES = {
 	light: "github-light",
 	dark: "github-dark"
 };
-/** Class set on every dual-theme token span; the CSS below switches its color. */
-var SHIKI_TOKEN_CLASS = "ratio-shiki-token";
-/**
-* CSS that flips token colors with the app's mode. Shiki writes each token's
-* light/dark colors into the `--shiki-light` / `--shiki-dark` custom properties;
-* this reads the right one per `data-theme` / `data-color-scheme` — the same
-* dark selectors ratio-ui's own tokens use. The `<CodeBlock>` wrapper injects
-* this automatically (React style hoisting); include it yourself only if you
-* render dual-theme lines by hand.
-*/
-var DUAL_THEME_CSS = `.${SHIKI_TOKEN_CLASS}{color:var(--shiki-light)}
-:root[data-theme="dark"] .${SHIKI_TOKEN_CLASS},
-:root[data-color-scheme="dark"] .${SHIKI_TOKEN_CLASS}{color:var(--shiki-dark)}`;
 /**
 * Create a Shiki highlighter preconfigured for ratio-ui. Built on `shiki/core`
 * (`createHighlighterCore`) with the WASM-free JavaScript regex engine and a
@@ -93,25 +81,40 @@ function shikiToLines(highlighter, code, lang, theme = DEFAULT_THEMES.dark) {
 	}) }, i));
 }
 /**
+* Tokenize `code` for a **light + dark** theme pair into plain, serializable
+* data ({@link DualTokenLine}) — each token carries both colors as
+* `--shiki-light` / `--shiki-dark` custom properties. This is the build-time
+* half of the precomputed pipeline: run it in a build script (Node), ship the
+* result as JSON, and render it with `tokensToLines` from
+* `@eventuras/ratio-ui-shiki/tokens` — the client then needs no highlighter,
+* grammars, or engine at all. `lang` and both themes must already be loaded
+* in `highlighter`.
+*/
+function codeToDualTokens(highlighter, code, lang, themes = DEFAULT_THEMES) {
+	const { tokens } = highlighter.codeToTokens(code, {
+		lang,
+		themes,
+		defaultColor: false
+	});
+	return tokens.map((line) => line.map((token) => ({
+		content: token.content,
+		...token.htmlStyle ? { htmlStyle: { ...token.htmlStyle } } : {}
+	})));
+}
+/**
 * Turn `code` into one React node per line for a **light + dark** theme pair.
 * Each token span carries both colors as `--shiki-light` / `--shiki-dark` custom
 * properties and the {@link SHIKI_TOKEN_CLASS} class; pair it with
 * {@link DUAL_THEME_CSS} so the color follows the app's mode. Injection-safe.
 * `lang` and both themes must already be loaded in `highlighter`.
+*
+* Shorthand for `tokensToLines(codeToDualTokens(...))` — split the two halves
+* yourself to highlight at build time and render without Shiki on the client.
 */
 function shikiToDualLines(highlighter, code, lang, themes = DEFAULT_THEMES) {
-	const { tokens } = highlighter.codeToTokens(code, {
-		lang,
-		themes,
-		defaultColor: false
-	});
-	return tokens.map((line, i) => /* @__PURE__ */ jsx(Fragment, { children: line.map((token, j) => /* @__PURE__ */ jsx("span", {
-		className: SHIKI_TOKEN_CLASS,
-		style: token.htmlStyle,
-		children: token.content
-	}, j)) }, i));
+	return tokensToLines(codeToDualTokens(highlighter, code, lang, themes));
 }
 //#endregion
-export { DEFAULT_LANGS, DEFAULT_THEMES, DUAL_THEME_CSS, SHIKI_TOKEN_CLASS, createRatioHighlighter, shikiToDualLines, shikiToLines };
+export { DEFAULT_LANGS, DEFAULT_THEMES, codeToDualTokens, createRatioHighlighter, shikiToDualLines, shikiToLines };
 
 //# sourceMappingURL=highlighter.js.map

package/dist/highlighter.js.map

@@ -1 +1 @@
-{"version":3,"file":"highlighter.js","names":[],"sources":["../src/highlighter.tsx"],"sourcesContent":["// ratio-ui · design system for knowledge sharing\n// SPDX-FileCopyrightText: 2026 Losol AS\n// SPDX-License-Identifier: MPL-2.0\n\nimport React, { Fragment } from 'react';\nimport { createHighlighterCore, type HighlighterCore } from 'shiki/core';\nimport { createJavaScriptRegexEngine } from 'shiki/engine/javascript';\nimport type { BundledLanguage, BundledTheme, LanguageInput, ThemeInput } from 'shiki';\n\n/**\n * Languages preloaded when you don't pass your own to {@link createRatioHighlighter}.\n * Kept in sync with the fine-grained `@shikijs/langs/*` imports below.\n */\nexport const DEFAULT_LANGS: BundledLanguage[] = [\n  'tsx',\n  'ts',\n  'jsx',\n  'js',\n  'json',\n  'bash',\n  'css',\n  'html',\n  'markdown',\n  'yaml',\n  'xml',\n  'python',\n  'csharp',\n];\n\n/** A light + dark Shiki theme pair. */\nexport interface DualThemes {\n  light: BundledTheme;\n  dark: BundledTheme;\n}\n\n/** Default light/dark theme pair — the code surface follows the app's mode. */\nexport const DEFAULT_THEMES: DualThemes = { light: 'github-light', dark: 'github-dark' };\n\n/** Class set on every dual-theme token span; the CSS below switches its color. */\nexport const SHIKI_TOKEN_CLASS = 'ratio-shiki-token';\n\n/**\n * CSS that flips token colors with the app's mode. Shiki writes each token's\n * light/dark colors into the `--shiki-light` / `--shiki-dark` custom properties;\n * this reads the right one per `data-theme` / `data-color-scheme` — the same\n * dark selectors ratio-ui's own tokens use. The `<CodeBlock>` wrapper injects\n * this automatically (React style hoisting); include it yourself only if you\n * render dual-theme lines by hand.\n */\nexport const DUAL_THEME_CSS = `.${SHIKI_TOKEN_CLASS}{color:var(--shiki-light)}\n:root[data-theme=\"dark\"] .${SHIKI_TOKEN_CLASS},\n:root[data-color-scheme=\"dark\"] .${SHIKI_TOKEN_CLASS}{color:var(--shiki-dark)}`;\n\nexport interface RatioHighlighterOptions {\n  /**\n   * Languages to preload, as Shiki language *inputs* (dynamic imports) — e.g.\n   * `import('@shikijs/langs/python')`, not the string names. Defaults to inputs\n   * for the {@link DEFAULT_LANGS} languages. Replaces the default set when set.\n   */\n  langs?: LanguageInput[];\n  /**\n   * Themes to preload, as Shiki theme inputs — e.g.\n   * `import('@shikijs/themes/nord')`. Defaults to the `github-light` /\n   * `github-dark` pair.\n   */\n  themes?: ThemeInput[];\n}\n\n/**\n * Create a Shiki highlighter preconfigured for ratio-ui. Built on `shiki/core`\n * (`createHighlighterCore`) with the WASM-free JavaScript regex engine and a\n * curated, individually-imported language/theme set — so consumers bundle only\n * these grammars, not Shiki's full bundled registry. The call is async and\n * relatively heavy — create one and share it (the `<CodeBlock>` wrapper does).\n */\nexport function createRatioHighlighter(options: RatioHighlighterOptions = {}): Promise<HighlighterCore> {\n  return createHighlighterCore({\n    engine: createJavaScriptRegexEngine(),\n    langs: options.langs ?? [\n      import('@shikijs/langs/tsx'),\n      import('@shikijs/langs/ts'),\n      import('@shikijs/langs/jsx'),\n      import('@shikijs/langs/js'),\n      import('@shikijs/langs/json'),\n      import('@shikijs/langs/bash'),\n      import('@shikijs/langs/css'),\n      import('@shikijs/langs/html'),\n      import('@shikijs/langs/markdown'),\n      import('@shikijs/langs/yaml'),\n      import('@shikijs/langs/xml'),\n      import('@shikijs/langs/python'),\n      import('@shikijs/langs/csharp'),\n    ],\n    themes: options.themes ?? [\n      import('@shikijs/themes/github-light'),\n      import('@shikijs/themes/github-dark'),\n    ],\n  });\n}\n\n/**\n * Turn `code` into one React node per line for a **single** theme — each a run\n * of `<span>`s carrying Shiki's token colors. Injection-safe (real elements, no\n * HTML string). `lang`/`theme` must already be loaded in `highlighter`.\n */\nexport function shikiToLines(\n  highlighter: HighlighterCore,\n  code: string,\n  lang: BundledLanguage | string,\n  theme: BundledTheme | string = DEFAULT_THEMES.dark,\n): React.ReactNode[] {\n  const { tokens } = highlighter.codeToTokens(code, {\n    lang: lang as BundledLanguage,\n    theme: theme as BundledTheme,\n  });\n\n  return tokens.map((line, i) => (\n    <Fragment key={i}>\n      {line.map((token, j) => {\n        const fontStyle = token.fontStyle ?? 0;\n        return (\n          <span\n            key={j}\n            style={{\n              color: token.color,\n              fontStyle: fontStyle & 1 ? 'italic' : undefined,\n              fontWeight: fontStyle & 2 ? 'bold' : undefined,\n              textDecoration: fontStyle & 4 ? 'underline' : undefined,\n            }}\n          >\n            {token.content}\n          </span>\n        );\n      })}\n    </Fragment>\n  ));\n}\n\n/**\n * Turn `code` into one React node per line for a **light + dark** theme pair.\n * Each token span carries both colors as `--shiki-light` / `--shiki-dark` custom\n * properties and the {@link SHIKI_TOKEN_CLASS} class; pair it with\n * {@link DUAL_THEME_CSS} so the color follows the app's mode. Injection-safe.\n * `lang` and both themes must already be loaded in `highlighter`.\n */\nexport function shikiToDualLines(\n  highlighter: HighlighterCore,\n  code: string,\n  lang: BundledLanguage | string,\n  themes: DualThemes = DEFAULT_THEMES,\n): React.ReactNode[] {\n  const { tokens } = highlighter.codeToTokens(code, {\n    lang: lang as BundledLanguage,\n    themes: themes as unknown as Record<string, BundledTheme>,\n    defaultColor: false,\n  });\n\n  return tokens.map((line, i) => (\n    <Fragment key={i}>\n      {line.map((token, j) => (\n        <span key={j} className={SHIKI_TOKEN_CLASS} style={token.htmlStyle as React.CSSProperties}>\n          {token.content}\n        </span>\n      ))}\n    </Fragment>\n  ));\n}\n"],"mappings":";;;;;;;;;;AAaA,IAAa,gBAAmC;CAC9C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;AASA,IAAa,iBAA6B;CAAE,OAAO;CAAgB,MAAM;AAAc;;AAGvF,IAAa,oBAAoB;;;;;;;;;AAUjC,IAAa,iBAAiB,IAAI,kBAAkB;4BACxB,kBAAkB;mCACX,kBAAkB;;;;;;;;AAwBrD,SAAgB,uBAAuB,UAAmC,CAAC,GAA6B;CACtG,OAAO,sBAAsB;EAC3B,QAAQ,4BAA4B;EACpC,OAAO,QAAQ,SAAS;GACtB,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;EACT;EACA,QAAQ,QAAQ,UAAU,CACxB,OAAO,iCACP,OAAO,8BACT;CACF,CAAC;AACH;;;;;;AAOA,SAAgB,aACd,aACA,MACA,MACA,QAA+B,eAAe,MAC3B;CACnB,MAAM,EAAE,WAAW,YAAY,aAAa,MAAM;EAC1C;EACC;CACT,CAAC;CAED,OAAO,OAAO,KAAK,MAAM,MACvB,oBAAC,UAAD,EAAA,UACG,KAAK,KAAK,OAAO,MAAM;EACtB,MAAM,YAAY,MAAM,aAAa;EACrC,OACE,oBAAC,QAAD;GAEE,OAAO;IACL,OAAO,MAAM;IACb,WAAW,YAAY,IAAI,WAAW,KAAA;IACtC,YAAY,YAAY,IAAI,SAAS,KAAA;IACrC,gBAAgB,YAAY,IAAI,cAAc,KAAA;GAChD;aAEC,MAAM;EACH,GATC,CASD;CAEV,CAAC,EACO,GAjBK,CAiBL,CACX;AACH;;;;;;;;AASA,SAAgB,iBACd,aACA,MACA,MACA,SAAqB,gBACF;CACnB,MAAM,EAAE,WAAW,YAAY,aAAa,MAAM;EAC1C;EACE;EACR,cAAc;CAChB,CAAC;CAED,OAAO,OAAO,KAAK,MAAM,MACvB,oBAAC,UAAD,EAAA,UACG,KAAK,KAAK,OAAO,MAChB,oBAAC,QAAD;EAAc,WAAW;EAAmB,OAAO,MAAM;YACtD,MAAM;CACH,GAFK,CAEL,CACP,EACO,GANK,CAML,CACX;AACH"}
+{"version":3,"file":"highlighter.js","names":[],"sources":["../src/highlighter.tsx"],"sourcesContent":["// ratio-ui · design system for knowledge sharing\n// SPDX-FileCopyrightText: 2026 Losol AS\n// SPDX-License-Identifier: MPL-2.0\n\nimport React, { Fragment } from 'react';\nimport { createHighlighterCore, type HighlighterCore } from 'shiki/core';\nimport { createJavaScriptRegexEngine } from 'shiki/engine/javascript';\nimport type { BundledLanguage, BundledTheme, LanguageInput, ThemeInput } from 'shiki';\nimport { tokensToLines, type DualTokenLine } from './tokens';\n\n// Re-exported so existing imports keep working; they live in `./tokens` (the\n// Shiki-free module) so precomputed-token consumers don't pull this file in.\nexport { SHIKI_TOKEN_CLASS, DUAL_THEME_CSS } from './tokens';\n\n/**\n * Languages preloaded when you don't pass your own to {@link createRatioHighlighter}.\n * Kept in sync with the fine-grained `@shikijs/langs/*` imports below.\n */\nexport const DEFAULT_LANGS: BundledLanguage[] = [\n  'tsx',\n  'ts',\n  'jsx',\n  'js',\n  'json',\n  'bash',\n  'css',\n  'html',\n  'markdown',\n  'yaml',\n  'xml',\n  'python',\n  'csharp',\n];\n\n/** A light + dark Shiki theme pair. */\nexport interface DualThemes {\n  light: BundledTheme;\n  dark: BundledTheme;\n}\n\n/** Default light/dark theme pair — the code surface follows the app's mode. */\nexport const DEFAULT_THEMES: DualThemes = { light: 'github-light', dark: 'github-dark' };\n\nexport interface RatioHighlighterOptions {\n  /**\n   * Languages to preload, as Shiki language *inputs* (dynamic imports) — e.g.\n   * `import('@shikijs/langs/python')`, not the string names. Defaults to inputs\n   * for the {@link DEFAULT_LANGS} languages. Replaces the default set when set.\n   */\n  langs?: LanguageInput[];\n  /**\n   * Themes to preload, as Shiki theme inputs — e.g.\n   * `import('@shikijs/themes/nord')`. Defaults to the `github-light` /\n   * `github-dark` pair.\n   */\n  themes?: ThemeInput[];\n}\n\n/**\n * Create a Shiki highlighter preconfigured for ratio-ui. Built on `shiki/core`\n * (`createHighlighterCore`) with the WASM-free JavaScript regex engine and a\n * curated, individually-imported language/theme set — so consumers bundle only\n * these grammars, not Shiki's full bundled registry. The call is async and\n * relatively heavy — create one and share it (the `<CodeBlock>` wrapper does).\n */\nexport function createRatioHighlighter(options: RatioHighlighterOptions = {}): Promise<HighlighterCore> {\n  return createHighlighterCore({\n    engine: createJavaScriptRegexEngine(),\n    langs: options.langs ?? [\n      import('@shikijs/langs/tsx'),\n      import('@shikijs/langs/ts'),\n      import('@shikijs/langs/jsx'),\n      import('@shikijs/langs/js'),\n      import('@shikijs/langs/json'),\n      import('@shikijs/langs/bash'),\n      import('@shikijs/langs/css'),\n      import('@shikijs/langs/html'),\n      import('@shikijs/langs/markdown'),\n      import('@shikijs/langs/yaml'),\n      import('@shikijs/langs/xml'),\n      import('@shikijs/langs/python'),\n      import('@shikijs/langs/csharp'),\n    ],\n    themes: options.themes ?? [\n      import('@shikijs/themes/github-light'),\n      import('@shikijs/themes/github-dark'),\n    ],\n  });\n}\n\n/**\n * Turn `code` into one React node per line for a **single** theme — each a run\n * of `<span>`s carrying Shiki's token colors. Injection-safe (real elements, no\n * HTML string). `lang`/`theme` must already be loaded in `highlighter`.\n */\nexport function shikiToLines(\n  highlighter: HighlighterCore,\n  code: string,\n  lang: BundledLanguage | string,\n  theme: BundledTheme | string = DEFAULT_THEMES.dark,\n): React.ReactNode[] {\n  const { tokens } = highlighter.codeToTokens(code, {\n    lang: lang as BundledLanguage,\n    theme: theme as BundledTheme,\n  });\n\n  return tokens.map((line, i) => (\n    <Fragment key={i}>\n      {line.map((token, j) => {\n        const fontStyle = token.fontStyle ?? 0;\n        return (\n          <span\n            key={j}\n            style={{\n              color: token.color,\n              fontStyle: fontStyle & 1 ? 'italic' : undefined,\n              fontWeight: fontStyle & 2 ? 'bold' : undefined,\n              textDecoration: fontStyle & 4 ? 'underline' : undefined,\n            }}\n          >\n            {token.content}\n          </span>\n        );\n      })}\n    </Fragment>\n  ));\n}\n\n/**\n * Tokenize `code` for a **light + dark** theme pair into plain, serializable\n * data ({@link DualTokenLine}) — each token carries both colors as\n * `--shiki-light` / `--shiki-dark` custom properties. This is the build-time\n * half of the precomputed pipeline: run it in a build script (Node), ship the\n * result as JSON, and render it with `tokensToLines` from\n * `@eventuras/ratio-ui-shiki/tokens` — the client then needs no highlighter,\n * grammars, or engine at all. `lang` and both themes must already be loaded\n * in `highlighter`.\n */\nexport function codeToDualTokens(\n  highlighter: HighlighterCore,\n  code: string,\n  lang: BundledLanguage | string,\n  themes: DualThemes = DEFAULT_THEMES,\n): DualTokenLine[] {\n  const { tokens } = highlighter.codeToTokens(code, {\n    lang: lang as BundledLanguage,\n    themes: themes as unknown as Record<string, BundledTheme>,\n    defaultColor: false,\n  });\n\n  return tokens.map((line) =>\n    line.map((token) => ({\n      content: token.content,\n      // Copied into a fresh plain object so the result is JSON-clean no\n      // matter what Shiki hands back.\n      ...(token.htmlStyle\n        ? { htmlStyle: { ...(token.htmlStyle as Record<string, string>) } }\n        : {}),\n    })),\n  );\n}\n\n/**\n * Turn `code` into one React node per line for a **light + dark** theme pair.\n * Each token span carries both colors as `--shiki-light` / `--shiki-dark` custom\n * properties and the {@link SHIKI_TOKEN_CLASS} class; pair it with\n * {@link DUAL_THEME_CSS} so the color follows the app's mode. Injection-safe.\n * `lang` and both themes must already be loaded in `highlighter`.\n *\n * Shorthand for `tokensToLines(codeToDualTokens(...))` — split the two halves\n * yourself to highlight at build time and render without Shiki on the client.\n */\nexport function shikiToDualLines(\n  highlighter: HighlighterCore,\n  code: string,\n  lang: BundledLanguage | string,\n  themes: DualThemes = DEFAULT_THEMES,\n): React.ReactNode[] {\n  return tokensToLines(codeToDualTokens(highlighter, code, lang, themes));\n}\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,gBAAmC;CAC9C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;AASA,IAAa,iBAA6B;CAAE,OAAO;CAAgB,MAAM;AAAc;;;;;;;;AAwBvF,SAAgB,uBAAuB,UAAmC,CAAC,GAA6B;CACtG,OAAO,sBAAsB;EAC3B,QAAQ,4BAA4B;EACpC,OAAO,QAAQ,SAAS;GACtB,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;EACT;EACA,QAAQ,QAAQ,UAAU,CACxB,OAAO,iCACP,OAAO,8BACT;CACF,CAAC;AACH;;;;;;AAOA,SAAgB,aACd,aACA,MACA,MACA,QAA+B,eAAe,MAC3B;CACnB,MAAM,EAAE,WAAW,YAAY,aAAa,MAAM;EAC1C;EACC;CACT,CAAC;CAED,OAAO,OAAO,KAAK,MAAM,MACvB,oBAAC,UAAD,EAAA,UACG,KAAK,KAAK,OAAO,MAAM;EACtB,MAAM,YAAY,MAAM,aAAa;EACrC,OACE,oBAAC,QAAD;GAEE,OAAO;IACL,OAAO,MAAM;IACb,WAAW,YAAY,IAAI,WAAW,KAAA;IACtC,YAAY,YAAY,IAAI,SAAS,KAAA;IACrC,gBAAgB,YAAY,IAAI,cAAc,KAAA;GAChD;GAEC,UAAA,MAAM;EACH,GATC,CASD;CAEV,CAAC,EACO,GAjBK,CAiBL,CACX;AACH;;;;;;;;;;;AAYA,SAAgB,iBACd,aACA,MACA,MACA,SAAqB,gBACJ;CACjB,MAAM,EAAE,WAAW,YAAY,aAAa,MAAM;EAC1C;EACE;EACR,cAAc;CAChB,CAAC;CAED,OAAO,OAAO,KAAK,SACjB,KAAK,KAAK,WAAW;EACnB,SAAS,MAAM;EAGf,GAAI,MAAM,YACN,EAAE,WAAW,EAAE,GAAI,MAAM,UAAqC,EAAE,IAChE,CAAC;CACP,EAAE,CACJ;AACF;;;;;;;;;;;AAYA,SAAgB,iBACd,aACA,MACA,MACA,SAAqB,gBACF;CACnB,OAAO,cAAc,iBAAiB,aAAa,MAAM,MAAM,MAAM,CAAC;AACxE"}

package/dist/index.d.ts

@@ -1,2 +1,3 @@
-export { createRatioHighlighter, shikiToLines, shikiToDualLines, DEFAULT_LANGS, DEFAULT_THEMES, SHIKI_TOKEN_CLASS, DUAL_THEME_CSS, type RatioHighlighterOptions, type DualThemes, } from './highlighter';
+export { createRatioHighlighter, shikiToLines, shikiToDualLines, codeToDualTokens, DEFAULT_LANGS, DEFAULT_THEMES, type RatioHighlighterOptions, type DualThemes, } from './highlighter';
+export { tokensToLines, DualThemeStyles, SHIKI_TOKEN_CLASS, DUAL_THEME_CSS, type DualToken, type DualTokenLine, } from './tokens';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,sBAAsB,EACtB,YAAY,EACZ,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,KAAK,uBAAuB,EAC5B,KAAK,UAAU,GAChB,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,sBAAsB,EACtB,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,KAAK,uBAAuB,EAC5B,KAAK,UAAU,GAChB,MAAM,eAAe,CAAC;AAIvB,OAAO,EACL,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,KAAK,SAAS,EACd,KAAK,aAAa,GACnB,MAAM,UAAU,CAAC"}

package/dist/index.js

@@ -1,3 +1,4 @@
 /*! @eventuras/ratio-ui-shiki · Shiki syntax highlighting for ratio-ui · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
-import { DEFAULT_LANGS, DEFAULT_THEMES, DUAL_THEME_CSS, SHIKI_TOKEN_CLASS, createRatioHighlighter, shikiToDualLines, shikiToLines } from "./highlighter.js";
-export { DEFAULT_LANGS, DEFAULT_THEMES, DUAL_THEME_CSS, SHIKI_TOKEN_CLASS, createRatioHighlighter, shikiToDualLines, shikiToLines };
+import { DUAL_THEME_CSS, DualThemeStyles, SHIKI_TOKEN_CLASS, tokensToLines } from "./tokens/index.js";
+import { DEFAULT_LANGS, DEFAULT_THEMES, codeToDualTokens, createRatioHighlighter, shikiToDualLines, shikiToLines } from "./highlighter.js";
+export { DEFAULT_LANGS, DEFAULT_THEMES, DUAL_THEME_CSS, DualThemeStyles, SHIKI_TOKEN_CLASS, codeToDualTokens, createRatioHighlighter, shikiToDualLines, shikiToLines, tokensToLines };

package/dist/tokens/index.d.ts

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+/** Class set on every dual-theme token span; {@link DUAL_THEME_CSS} switches its color. */
+export declare const SHIKI_TOKEN_CLASS = "ratio-shiki-token";
+/**
+ * CSS that flips token colors with the mode of the nearest scope. Shiki writes
+ * each token's light/dark colors into `--shiki-light` / `--shiki-dark`; a
+ * switch set on the scope — `:root` and its `data-theme` / `data-color-scheme`
+ * arms, `.surface-light` and `.surface-dark` — is inherited down to the token,
+ * which reads the dark color while the switch is on and falls back to light.
+ * The same scopes and the same inheritance as ratio-ui's own code-surface
+ * tokens, so a band inside a band resolves to the inner one. Rendered for you
+ * by {@link DualThemeStyles} and by the `<CodeBlock>` wrapper; include it
+ * yourself only if you render dual-theme lines by hand.
+ *
+ * The switch: `initial` is a custom property's guaranteed-invalid value, so
+ * `var()` of it voids `--shiki-color` and `color` takes its fallback. A lone
+ * space is a valid, empty value that leaves `--shiki-color` whole.
+ */
+export declare const DUAL_THEME_CSS = ":root,.surface-light{--shiki-dark-on:initial}\n:root[data-theme=\"dark\"],:root[data-color-scheme=\"dark\"],.surface-dark{--shiki-dark-on: }\n.ratio-shiki-token{--shiki-color:var(--shiki-dark-on) var(--shiki-dark);color:var(--shiki-color,var(--shiki-light))}";
+/**
+ * One Shiki token in serializable form: its text plus the inline style
+ * carrying the `--shiki-light` / `--shiki-dark` colors. Plain data — it
+ * survives `JSON.stringify`/`parse`, so tokens can be computed once at build
+ * time and shipped to the client instead of grammars.
+ */
+export interface DualToken {
+    content: string;
+    htmlStyle?: Record<string, string>;
+}
+/** One line of code as dual-theme tokens. */
+export type DualTokenLine = DualToken[];
+/**
+ * Renders {@link DUAL_THEME_CSS} as a hoisted `<style>` tag. React dedupes it
+ * by `href`, so rendering this next to Shiki `<CodeBlock>`s (which inject the
+ * same tag) adds nothing. Drop it once anywhere precomputed lines render.
+ */
+export declare function DualThemeStyles(): React.JSX.Element;
+/**
+ * Turn dual-theme tokens back into one React node per line — the shape core
+ * CodeBlock's `highlightedLines` takes. This is the runtime half of the
+ * precomputed pipeline: `codeToDualTokens` at build time, this at render.
+ * Injection-safe (real elements, no HTML string). Pair with
+ * {@link DualThemeStyles} so the colors follow the app's mode.
+ */
+export declare function tokensToLines(lines: DualTokenLine[]): React.ReactNode[];
+//# sourceMappingURL=index.d.ts.map

package/dist/tokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,2FAA2F;AAC3F,eAAO,MAAM,iBAAiB,sBAAsB,CAAC;AAErD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,cAAc,uQAE6F,CAAC;AAEzH;;;;;GAKG;AACH,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAED,6CAA6C;AAC7C,MAAM,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC;AAExC;;;;GAIG;AACH,wBAAgB,eAAe,sBAM9B;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC,SAAS,EAAE,CAcvE"}

package/dist/tokens/index.js

@@ -0,0 +1,60 @@
+/*! @eventuras/ratio-ui-shiki · Shiki syntax highlighting for ratio-ui · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
+import { Fragment } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/tokens/index.tsx
+/**
+* The Shiki-free half of the precomputed-highlighting pipeline. Everything in
+* this module is plain data + tiny renderers with **no shiki import**, so a
+* client that renders precomputed tokens (built with `codeToDualTokens` at
+* build time) bundles about a kilobyte from here — no grammars, no engine.
+*/
+/** Class set on every dual-theme token span; {@link DUAL_THEME_CSS} switches its color. */
+var SHIKI_TOKEN_CLASS = "ratio-shiki-token";
+/**
+* CSS that flips token colors with the mode of the nearest scope. Shiki writes
+* each token's light/dark colors into `--shiki-light` / `--shiki-dark`; a
+* switch set on the scope — `:root` and its `data-theme` / `data-color-scheme`
+* arms, `.surface-light` and `.surface-dark` — is inherited down to the token,
+* which reads the dark color while the switch is on and falls back to light.
+* The same scopes and the same inheritance as ratio-ui's own code-surface
+* tokens, so a band inside a band resolves to the inner one. Rendered for you
+* by {@link DualThemeStyles} and by the `<CodeBlock>` wrapper; include it
+* yourself only if you render dual-theme lines by hand.
+*
+* The switch: `initial` is a custom property's guaranteed-invalid value, so
+* `var()` of it voids `--shiki-color` and `color` takes its fallback. A lone
+* space is a valid, empty value that leaves `--shiki-color` whole.
+*/
+var DUAL_THEME_CSS = `:root,.surface-light{--shiki-dark-on:initial}
+:root[data-theme="dark"],:root[data-color-scheme="dark"],.surface-dark{--shiki-dark-on: }
+.${SHIKI_TOKEN_CLASS}{--shiki-color:var(--shiki-dark-on) var(--shiki-dark);color:var(--shiki-color,var(--shiki-light))}`;
+/**
+* Renders {@link DUAL_THEME_CSS} as a hoisted `<style>` tag. React dedupes it
+* by `href`, so rendering this next to Shiki `<CodeBlock>`s (which inject the
+* same tag) adds nothing. Drop it once anywhere precomputed lines render.
+*/
+function DualThemeStyles() {
+	return /* @__PURE__ */ jsx("style", {
+		href: "ratio-ui-shiki-dual",
+		precedence: "medium",
+		children: DUAL_THEME_CSS
+	});
+}
+/**
+* Turn dual-theme tokens back into one React node per line — the shape core
+* CodeBlock's `highlightedLines` takes. This is the runtime half of the
+* precomputed pipeline: `codeToDualTokens` at build time, this at render.
+* Injection-safe (real elements, no HTML string). Pair with
+* {@link DualThemeStyles} so the colors follow the app's mode.
+*/
+function tokensToLines(lines) {
+	return lines.map((line, i) => /* @__PURE__ */ jsx(Fragment, { children: line.map((token, j) => /* @__PURE__ */ jsx("span", {
+		className: SHIKI_TOKEN_CLASS,
+		style: token.htmlStyle,
+		children: token.content
+	}, j)) }, i));
+}
+//#endregion
+export { DUAL_THEME_CSS, DualThemeStyles, SHIKI_TOKEN_CLASS, tokensToLines };
+
+//# sourceMappingURL=index.js.map

package/dist/tokens/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/tokens/index.tsx"],"sourcesContent":["// ratio-ui · design system for knowledge sharing\n// SPDX-FileCopyrightText: 2026 Losol AS\n// SPDX-License-Identifier: MPL-2.0\n\n/**\n * The Shiki-free half of the precomputed-highlighting pipeline. Everything in\n * this module is plain data + tiny renderers with **no shiki import**, so a\n * client that renders precomputed tokens (built with `codeToDualTokens` at\n * build time) bundles about a kilobyte from here — no grammars, no engine.\n */\n\nimport React, { Fragment } from 'react';\n\n/** Class set on every dual-theme token span; {@link DUAL_THEME_CSS} switches its color. */\nexport const SHIKI_TOKEN_CLASS = 'ratio-shiki-token';\n\n/**\n * CSS that flips token colors with the mode of the nearest scope. Shiki writes\n * each token's light/dark colors into `--shiki-light` / `--shiki-dark`; a\n * switch set on the scope — `:root` and its `data-theme` / `data-color-scheme`\n * arms, `.surface-light` and `.surface-dark` — is inherited down to the token,\n * which reads the dark color while the switch is on and falls back to light.\n * The same scopes and the same inheritance as ratio-ui's own code-surface\n * tokens, so a band inside a band resolves to the inner one. Rendered for you\n * by {@link DualThemeStyles} and by the `<CodeBlock>` wrapper; include it\n * yourself only if you render dual-theme lines by hand.\n *\n * The switch: `initial` is a custom property's guaranteed-invalid value, so\n * `var()` of it voids `--shiki-color` and `color` takes its fallback. A lone\n * space is a valid, empty value that leaves `--shiki-color` whole.\n */\nexport const DUAL_THEME_CSS = `:root,.surface-light{--shiki-dark-on:initial}\n:root[data-theme=\"dark\"],:root[data-color-scheme=\"dark\"],.surface-dark{--shiki-dark-on: }\n.${SHIKI_TOKEN_CLASS}{--shiki-color:var(--shiki-dark-on) var(--shiki-dark);color:var(--shiki-color,var(--shiki-light))}`;\n\n/**\n * One Shiki token in serializable form: its text plus the inline style\n * carrying the `--shiki-light` / `--shiki-dark` colors. Plain data — it\n * survives `JSON.stringify`/`parse`, so tokens can be computed once at build\n * time and shipped to the client instead of grammars.\n */\nexport interface DualToken {\n  content: string;\n  htmlStyle?: Record<string, string>;\n}\n\n/** One line of code as dual-theme tokens. */\nexport type DualTokenLine = DualToken[];\n\n/**\n * Renders {@link DUAL_THEME_CSS} as a hoisted `<style>` tag. React dedupes it\n * by `href`, so rendering this next to Shiki `<CodeBlock>`s (which inject the\n * same tag) adds nothing. Drop it once anywhere precomputed lines render.\n */\nexport function DualThemeStyles() {\n  return (\n    <style href=\"ratio-ui-shiki-dual\" precedence=\"medium\">\n      {DUAL_THEME_CSS}\n    </style>\n  );\n}\n\n/**\n * Turn dual-theme tokens back into one React node per line — the shape core\n * CodeBlock's `highlightedLines` takes. This is the runtime half of the\n * precomputed pipeline: `codeToDualTokens` at build time, this at render.\n * Injection-safe (real elements, no HTML string). Pair with\n * {@link DualThemeStyles} so the colors follow the app's mode.\n */\nexport function tokensToLines(lines: DualTokenLine[]): React.ReactNode[] {\n  return lines.map((line, i) => (\n    <Fragment key={i}>\n      {line.map((token, j) => (\n        <span\n          key={j}\n          className={SHIKI_TOKEN_CLASS}\n          style={token.htmlStyle as React.CSSProperties}\n        >\n          {token.content}\n        </span>\n      ))}\n    </Fragment>\n  ));\n}\n"],"mappings":";;;;;;;;;;;AAcA,IAAa,oBAAoB;;;;;;;;;;;;;;;;AAiBjC,IAAa,iBAAiB;;GAE3B,kBAAkB;;;;;;AAqBrB,SAAgB,kBAAkB;CAChC,OACE,oBAAC,SAAD;EAAO,MAAK;EAAsB,YAAW;EAC1C,UAAA;CACI,CAAA;AAEX;;;;;;;;AASA,SAAgB,cAAc,OAA2C;CACvE,OAAO,MAAM,KAAK,MAAM,MACtB,oBAAC,UAAD,EAAA,UACG,KAAK,KAAK,OAAO,MAChB,oBAAC,QAAD;EAEE,WAAW;EACX,OAAO,MAAM;EAEZ,UAAA,MAAM;CACH,GALC,CAKD,CACP,EACO,GAVK,CAUL,CACX;AACH"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventuras/ratio-ui-shiki",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Alpha — Shiki syntax highlighting for Ratio UI's CodeBlock",
   "license": "MPL-2.0",
   "homepage": "https://github.com/losol/ratio-ui/tree/main/packages/ratio-ui-shiki#readme",
@@ -32,6 +32,10 @@
     "./useShikiHighlighter": {
       "types": "./dist/useShikiHighlighter/index.d.ts",
       "import": "./dist/useShikiHighlighter/index.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "import": "./dist/tokens/index.js"
     }
   },
   "main": "./dist/index.js",
@@ -45,26 +49,28 @@
     "tag": "alpha"
   },
   "devDependencies": {
-    "@shikijs/langs": "^3.0.0",
-    "@shikijs/themes": "^3.0.0",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "shiki": "^3.0.0",
+    "@eventuras/eslint-config": "^1.0.4",
+    "@eventuras/typescript-config": "^1.0.0",
+    "@eventuras/vite-config": "^0.3.1",
+    "@shikijs/langs": "^4.4.3",
+    "@shikijs/themes": "^4.4.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "shiki": "^4.4.3",
     "typescript": "6.0.3",
-    "vite": "8.1.3",
-    "@eventuras/ratio-ui": "2.14.0",
-    "@ratio-ui/vite-config": "0.2.2",
-    "@ratio-ui/typescript-config": "1.0.0",
-    "@ratio-ui/eslint-config": "1.0.3"
+    "vite": "8.3.0",
+    "vitest": "4.1.11",
+    "@eventuras/ratio-ui": "2.31.1"
   },
   "peerDependencies": {
     "@eventuras/ratio-ui": "^2.13.0",
-    "@shikijs/langs": "^3.0.0",
-    "@shikijs/themes": "^3.0.0",
-    "shiki": "^3.0.0"
+    "@shikijs/langs": "^4.4.3",
+    "@shikijs/themes": "^4.4.3",
+    "shiki": "^4.4.3"
   },
   "scripts": {
     "build": "tsc && vite build",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "test": "vitest run"
   }
 }