llm-message-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 TODO: copyright holder
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,223 @@
+# llm-message-react
+
+A single React component that renders LLM markdown output the way a polished chat UI does:
+
+- GitHub Flavored Markdown (tables, task lists, strikethrough, autolinks)
+- Math via KaTeX (inline `$...$` and block `$$...$$`, plus `\(...\)` / `\[...\]`)
+- Code blocks with a language label and a copy button, plus **opt-in** [Shiki](https://shiki.style) syntax highlighting (you choose the bundle, so it tree-shakes away when unused)
+- Streaming-aware: partial markdown/LaTeX tokens are repaired so half-streamed responses don't flash raw delimiter junk
+- A built-in light/dark theme you can opt into, with full per-element class **and** component overrides
+
+## Install
+
+```bash
+npm install llm-message-react
+```
+
+`react` and `react-dom` (>=18) are peer dependencies.
+
+## Usage
+
+```tsx
+import { LLMMessage } from "llm-message-react";
+import "llm-message-react/styles.css"; // built-in theme (optional)
+
+export function Message({ content }: { content: string }) {
+  return <LLMMessage>{content}</LLMMessage>;
+}
+```
+
+`content` can be passed as children or via the `content` prop:
+
+```tsx
+<LLMMessage content={content} />
+```
+
+### Dark mode
+
+The built-in theme switches automatically when an ancestor has the `dark` class (the convention used by Tailwind / shadcn), or when you put `dark` directly on the component:
+
+```tsx
+<LLMMessage className="dark">{content}</LLMMessage>
+```
+
+## Syntax highlighting
+
+Highlighting is **off by default**: fenced code blocks still render with a language label and copy button, but the code body is plain text. Because the default path never imports Shiki, it tree-shakes out of your bundle entirely. You opt in by passing a `highlighter`, and you choose which Shiki bundle you pay for.
+
+### 1. No highlighting (default)
+
+```tsx
+import { LLMMessage } from "llm-message-react";
+import "llm-message-react/styles.css";
+
+<LLMMessage>{content}</LLMMessage>;
+```
+
+### 2. Web bundle (smaller — common web languages)
+
+Install `shiki` (an optional peer dependency) and import the ready-made highlighter from the `/shiki-web` subpath:
+
+```tsx
+import { LLMMessage } from "llm-message-react";
+import { ShikiWebHighlighter } from "llm-message-react/shiki-web";
+import "llm-message-react/styles.css";
+
+<LLMMessage highlighter={ShikiWebHighlighter}>{content}</LLMMessage>;
+```
+
+### 3. Full bundle (all languages and themes)
+
+```tsx
+import { LLMMessage } from "llm-message-react";
+import { ShikiHighlighter } from "llm-message-react/shiki";
+import "llm-message-react/styles.css";
+
+<LLMMessage highlighter={ShikiHighlighter}>{content}</LLMMessage>;
+```
+
+### 4. Custom languages / themes (smallest bundle)
+
+Build a minimal Shiki core highlighter with only the grammars and themes you need, then wrap its `codeToHtml` with `createShikiHighlighter`. The factory itself imports no Shiki, so nothing extra is pulled in:
+
+```tsx
+import { LLMMessage, createShikiHighlighter } from "llm-message-react";
+import "llm-message-react/styles.css";
+
+import { createHighlighterCore } from "shiki/core";
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
+
+const core = await createHighlighterCore({
+  langs: [
+    import("shiki/langs/typescript.mjs"),
+    import("shiki/langs/python.mjs"),
+  ],
+  themes: [
+    import("shiki/themes/github-light.mjs"),
+    import("shiki/themes/github-dark.mjs"),
+  ],
+  engine: createOnigurumaEngine(import("shiki/wasm")),
+});
+
+const MyHighlighter = createShikiHighlighter(core.codeToHtml);
+
+<LLMMessage highlighter={MyHighlighter}>{content}</LLMMessage>;
+```
+
+Notes:
+
+- `createShikiHighlighter(codeToHtml, options?)` accepts any function with the signature `(code, { lang, themes: { light, dark } }) => string | Promise<string>`, so a synchronous core `codeToHtml` works too.
+- Themes default to `github-light` / `github-dark`; override them with the second argument: `createShikiHighlighter(fn, { themes: { light: "vitesse-light", dark: "vitesse-dark" } })` (and load the matching themes in your core highlighter).
+- If a streamed language isn't loaded, the highlighter falls back to plain code (same as on any highlight error).
+
+## Streaming
+
+`LLMMessage` repairs partially-streamed markdown/LaTeX by default, so unterminated tokens (`**bold`, `` `code ``, `[label](http`, `$E = mc^2`, `\[ ... `) don't flash as raw delimiters while a response streams in. Disable it with `completePartialTokens={false}`.
+
+### Unfinished block math
+
+By default, unterminated **block** math (`\[ ... `, `$$ ... `) is rendered _progressively_: the open environments/braces are closed and the largest prefix KaTeX accepts is shown, so a long aligned block reveals itself row by row instead of popping in only once the closing delimiter arrives.
+
+This convenience has a cost: it runs a synchronous KaTeX parse on every streamed chunk that contains an open block. If you stream many large math blocks and want to avoid that work, set `showUnfinishedLatexBlocks={false}`. Unfinished blocks are then hidden until their closing delimiter arrives (no KaTeX parsing happens for them mid-stream):
+
+```tsx
+<LLMMessage showUnfinishedLatexBlocks={false}>{content}</LLMMessage>
+```
+
+The repair function is also exported if you need it directly, alongside the LaTeX preprocessing helpers:
+
+```ts
+import {
+  completePartialTokens,
+  preprocessLaTeX,
+  escapeBrackets,
+  escapeMhchem,
+} from "llm-message-react";
+```
+
+## Theming
+
+You have three independent ways to control the look, from lightest to fullest:
+
+### 1. Built-in theme
+
+Import the stylesheet once and you're done:
+
+```ts
+import "llm-message-react/styles.css";
+```
+
+It targets stable semantic class names (`llm-message`, `llm-p`, `llm-code`, `llm-code-block`, `llm-table`, `llm-blockquote`, `llm-a`, `llm-checkbox`, ...) and exposes CSS custom properties you can override:
+
+```css
+.llm-message {
+  --llm-foreground: #1a1a1a;
+  --llm-primary: #2563eb;
+  --llm-muted: #f4f4f5;
+  --llm-border: #e4e4e7;
+  --llm-radius: 0.5rem;
+}
+```
+
+### 2. `classNames` — restyle while keeping native elements
+
+Pass per-element classes (Tailwind or your own). They are merged with the built-in class names, so you can extend or override:
+
+```tsx
+<LLMMessage
+  className="prose"
+  classNames={{
+    p: "text-lg",
+    codeBlock: "rounded-2xl shadow",
+    a: "text-blue-500",
+  }}
+>
+  {content}
+</LLMMessage>
+```
+
+If you only use `classNames` / your own CSS, you can skip importing `styles.css` entirely.
+
+### 3. `components` — replace the markup entirely
+
+Override how any element is rendered with your own component. Everything not overridden falls back to the built-in native renderer.
+
+```tsx
+import { LLMMessage } from "llm-message-react";
+import { MyCheckbox, MyCodeBlock, MyLink } from "./ui";
+
+<LLMMessage
+  components={{
+    checkbox: ({ checked }) => <MyCheckbox checked={checked} />,
+    codeBlock: ({ code, language }) => (
+      <MyCodeBlock language={language}>{code}</MyCodeBlock>
+    ),
+    a: ({ href, children }) => <MyLink href={href}>{children}</MyLink>,
+  }}
+>
+  {content}
+</LLMMessage>;
+```
+
+## Props
+
+- `children?: string` — the markdown content.
+- `content?: string` — alias for `children`.
+- `className?: string` — class for the root element (merged with `llm-message`).
+- `classNames?: LLMMessageClassNames` — per-element class overrides (look only).
+- `components?: LLMMessageComponents` — per-element component overrides (full markup control).
+- `highlighter?: CodeHighlighter` — opt-in syntax highlighter for fenced code blocks (see [Syntax highlighting](#syntax-highlighting)). Omitted by default, so no highlighter bundle is pulled in.
+- `completePartialTokens?: boolean` — repair partially-streamed markdown/LaTeX. Defaults to `true`.
+- `showUnfinishedLatexBlocks?: boolean` — progressively render unterminated block math while it streams (costs a synchronous KaTeX parse per chunk); set to `false` to hide unfinished blocks until they close and skip that work. Defaults to `true`. Only relevant while `completePartialTokens` is enabled.
+- All other `div` props are spread onto the root element.
+
+> Pass stable references for `classNames`, `components`, and `highlighter` (define them outside render or memoize them). They are dependencies of an internal `useMemo`, so new object/identity on every render defeats it.
+
+## Known limitations
+
+- **Currency vs. inline math with a leading digit.** A `$` directly before a digit is treated as currency and escaped (so `$5` renders literally). This means inline math that starts with a digit, e.g. `$5x$`, is ambiguous and may be escaped rather than rendered as math. Use `\( ... \)` (or `$$ ... $$`) for such expressions.
+- **KaTeX stylesheet import.** `llm-message-react/styles.css` starts with `@import "katex/dist/katex.min.css";`. This resolves automatically with bundlers that handle bare CSS imports (Vite, webpack + css-loader, etc.). If you load the stylesheet via a plain `<link>` instead, import KaTeX's CSS separately.
+
+## License
+
+MIT

package/dist/chunk-S3LNINQ5.js

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/createShikiHighlighter.tsx
+var DEFAULT_THEMES = { light: "github-light", dark: "github-dark" };
+function createShikiHighlighter(codeToHtml, options) {
+  const themes = options?.themes ?? DEFAULT_THEMES;
+  return function ShikiHighlighter({ code, language, className }) {
+    const [html, setHtml] = useState(null);
+    useEffect(() => {
+      let cancelled = false;
+      Promise.resolve(codeToHtml(code, { lang: language, themes })).then((result) => {
+        if (!cancelled) setHtml(result);
+      }).catch(() => {
+        if (!cancelled) setHtml(null);
+      });
+      return () => {
+        cancelled = true;
+      };
+    }, [code, language]);
+    if (html) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: className ?? "llm-shiki",
+          dangerouslySetInnerHTML: { __html: html }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("code", { className: "llm-code-plain", children: code });
+  };
+}
+
+export { createShikiHighlighter };
+//# sourceMappingURL=chunk-S3LNINQ5.js.map
+//# sourceMappingURL=chunk-S3LNINQ5.js.map

package/dist/chunk-S3LNINQ5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/createShikiHighlighter.tsx"],"names":[],"mappings":";;;;AASA,IAAM,cAAA,GAAiB,EAAE,KAAA,EAAO,cAAA,EAAgB,MAAM,aAAA,EAAc;AAe7D,SAAS,sBAAA,CACd,YACA,OAAA,EACiB;AACjB,EAAA,MAAM,MAAA,GAAS,SAAS,MAAA,IAAU,cAAA;AAElC,EAAA,OAAO,SAAS,gBAAA,CAAiB,EAAE,IAAA,EAAM,QAAA,EAAU,WAAU,EAAG;AAC9D,IAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAwB,IAAI,CAAA;AAEpD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,SAAA,GAAY,KAAA;AAChB,MAAA,OAAA,CAAQ,OAAA,CAAQ,UAAA,CAAW,IAAA,EAAM,EAAE,IAAA,EAAM,QAAA,EAAU,MAAA,EAAQ,CAAC,CAAA,CACzD,IAAA,CAAK,CAAC,MAAA,KAAW;AAChB,QAAA,IAAI,CAAC,SAAA,EAAW,OAAA,CAAQ,MAAM,CAAA;AAAA,MAChC,CAAC,CAAA,CACA,KAAA,CAAM,MAAM;AAEX,QAAA,IAAI,CAAC,SAAA,EAAW,OAAA,CAAQ,IAAI,CAAA;AAAA,MAC9B,CAAC,CAAA;AACH,MAAA,OAAO,MAAM;AACX,QAAA,SAAA,GAAY,IAAA;AAAA,MACd,CAAA;AAAA,IAIF,CAAA,EAAG,CAAC,IAAA,EAAM,QAAQ,CAAC,CAAA;AAEnB,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,uBACE,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,WAAW,SAAA,IAAa,WAAA;AAAA,UAExB,uBAAA,EAAyB,EAAE,MAAA,EAAQ,IAAA;AAAK;AAAA,OAC1C;AAAA,IAEJ;AAEA,IAAA,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAA,EAAkB,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,EAChD,CAAA;AACF","file":"chunk-S3LNINQ5.js","sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport type { CodeHighlighter, CodeToHtml } from \"./types\";\n\ninterface CreateShikiHighlighterOptions {\n  /** Theme pair forwarded to `codeToHtml`. Defaults to GitHub light/dark. */\n  themes?: { light: string; dark: string };\n}\n\nconst DEFAULT_THEMES = { light: \"github-light\", dark: \"github-dark\" };\n\n/**\n * Builds a {@link CodeHighlighter} from any `codeToHtml`-compatible function.\n *\n * This factory imports no Shiki bundle itself, so importing it never drags\n * highlighting code into your app. You decide which bundle to pay for by\n * passing the `codeToHtml` from `shiki` (full), `shiki/bundle/web` (web), or a\n * minimal `createHighlighterCore` instance.\n *\n * @example\n * import { codeToHtml } from \"shiki/bundle/web\";\n * const Highlighter = createShikiHighlighter(codeToHtml);\n * <LLMMessage highlighter={Highlighter}>{content}</LLMMessage>\n */\nexport function createShikiHighlighter(\n  codeToHtml: CodeToHtml,\n  options?: CreateShikiHighlighterOptions,\n): CodeHighlighter {\n  const themes = options?.themes ?? DEFAULT_THEMES;\n\n  return function ShikiHighlighter({ code, language, className }) {\n    const [html, setHtml] = useState<string | null>(null);\n\n    useEffect(() => {\n      let cancelled = false;\n      Promise.resolve(codeToHtml(code, { lang: language, themes }))\n        .then((result) => {\n          if (!cancelled) setHtml(result);\n        })\n        .catch(() => {\n          // Fallback: if the language is unsupported, just show plain code.\n          if (!cancelled) setHtml(null);\n        });\n      return () => {\n        cancelled = true;\n      };\n      // `codeToHtml` and `themes` are fixed for the lifetime of a highlighter\n      // instance (captured from the factory closure), so they are intentionally\n      // not listed: they never change between renders of this component.\n    }, [code, language]);\n\n    if (html) {\n      return (\n        <div\n          className={className ?? \"llm-shiki\"}\n          // The HTML is generated by Shiki, which is safe.\n          dangerouslySetInnerHTML={{ __html: html }}\n        />\n      );\n    }\n\n    return <code className=\"llm-code-plain\">{code}</code>;\n  };\n}\n"]}

package/dist/highlighters/shiki.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+var shiki = require('shiki');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/highlighters/shiki.tsx
+var DEFAULT_THEMES = { light: "github-light", dark: "github-dark" };
+function createShikiHighlighter(codeToHtml2, options) {
+  const themes = DEFAULT_THEMES;
+  return function ShikiHighlighter2({ code, language, className }) {
+    const [html, setHtml] = react.useState(null);
+    react.useEffect(() => {
+      let cancelled = false;
+      Promise.resolve(codeToHtml2(code, { lang: language, themes })).then((result) => {
+        if (!cancelled) setHtml(result);
+      }).catch(() => {
+        if (!cancelled) setHtml(null);
+      });
+      return () => {
+        cancelled = true;
+      };
+    }, [code, language]);
+    if (html) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: className ?? "llm-shiki",
+          dangerouslySetInnerHTML: { __html: html }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("code", { className: "llm-code-plain", children: code });
+  };
+}
+
+// src/highlighters/shiki.tsx
+var ShikiHighlighter = createShikiHighlighter(shiki.codeToHtml);
+
+exports.ShikiHighlighter = ShikiHighlighter;
+//# sourceMappingURL=shiki.cjs.map
+//# sourceMappingURL=shiki.cjs.map

package/dist/highlighters/shiki.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/createShikiHighlighter.tsx","../../src/highlighters/shiki.tsx"],"names":["codeToHtml","ShikiHighlighter","useState","useEffect","jsx"],"mappings":";;;;;;;AASA,IAAM,cAAA,GAAiB,EAAE,KAAA,EAAO,cAAA,EAAgB,MAAM,aAAA,EAAc;AAe7D,SAAS,sBAAA,CACdA,aACA,OAAA,EACiB;AACjB,EAAA,MAAM,MAAA,GAA4B,cAAA;AAElC,EAAA,OAAO,SAASC,iBAAAA,CAAiB,EAAE,IAAA,EAAM,QAAA,EAAU,WAAU,EAAG;AAC9D,IAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAAwB,IAAI,CAAA;AAEpD,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,SAAA,GAAY,KAAA;AAChB,MAAA,OAAA,CAAQ,OAAA,CAAQH,WAAAA,CAAW,IAAA,EAAM,EAAE,IAAA,EAAM,QAAA,EAAU,MAAA,EAAQ,CAAC,CAAA,CACzD,IAAA,CAAK,CAAC,MAAA,KAAW;AAChB,QAAA,IAAI,CAAC,SAAA,EAAW,OAAA,CAAQ,MAAM,CAAA;AAAA,MAChC,CAAC,CAAA,CACA,KAAA,CAAM,MAAM;AAEX,QAAA,IAAI,CAAC,SAAA,EAAW,OAAA,CAAQ,IAAI,CAAA;AAAA,MAC9B,CAAC,CAAA;AACH,MAAA,OAAO,MAAM;AACX,QAAA,SAAA,GAAY,IAAA;AAAA,MACd,CAAA;AAAA,IAIF,CAAA,EAAG,CAAC,IAAA,EAAM,QAAQ,CAAC,CAAA;AAEnB,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,uBACEI,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,WAAW,SAAA,IAAa,WAAA;AAAA,UAExB,uBAAA,EAAyB,EAAE,MAAA,EAAQ,IAAA;AAAK;AAAA,OAC1C;AAAA,IAEJ;AAEA,IAAA,uBAAOA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAA,EAAkB,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,EAChD,CAAA;AACF;;;ACnDO,IAAM,gBAAA,GAAmB,uBAAuBJ,gBAAU","file":"shiki.cjs","sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport type { CodeHighlighter, CodeToHtml } from \"./types\";\n\ninterface CreateShikiHighlighterOptions {\n  /** Theme pair forwarded to `codeToHtml`. Defaults to GitHub light/dark. */\n  themes?: { light: string; dark: string };\n}\n\nconst DEFAULT_THEMES = { light: \"github-light\", dark: \"github-dark\" };\n\n/**\n * Builds a {@link CodeHighlighter} from any `codeToHtml`-compatible function.\n *\n * This factory imports no Shiki bundle itself, so importing it never drags\n * highlighting code into your app. You decide which bundle to pay for by\n * passing the `codeToHtml` from `shiki` (full), `shiki/bundle/web` (web), or a\n * minimal `createHighlighterCore` instance.\n *\n * @example\n * import { codeToHtml } from \"shiki/bundle/web\";\n * const Highlighter = createShikiHighlighter(codeToHtml);\n * <LLMMessage highlighter={Highlighter}>{content}</LLMMessage>\n */\nexport function createShikiHighlighter(\n  codeToHtml: CodeToHtml,\n  options?: CreateShikiHighlighterOptions,\n): CodeHighlighter {\n  const themes = options?.themes ?? DEFAULT_THEMES;\n\n  return function ShikiHighlighter({ code, language, className }) {\n    const [html, setHtml] = useState<string | null>(null);\n\n    useEffect(() => {\n      let cancelled = false;\n      Promise.resolve(codeToHtml(code, { lang: language, themes }))\n        .then((result) => {\n          if (!cancelled) setHtml(result);\n        })\n        .catch(() => {\n          // Fallback: if the language is unsupported, just show plain code.\n          if (!cancelled) setHtml(null);\n        });\n      return () => {\n        cancelled = true;\n      };\n      // `codeToHtml` and `themes` are fixed for the lifetime of a highlighter\n      // instance (captured from the factory closure), so they are intentionally\n      // not listed: they never change between renders of this component.\n    }, [code, language]);\n\n    if (html) {\n      return (\n        <div\n          className={className ?? \"llm-shiki\"}\n          // The HTML is generated by Shiki, which is safe.\n          dangerouslySetInnerHTML={{ __html: html }}\n        />\n      );\n    }\n\n    return <code className=\"llm-code-plain\">{code}</code>;\n  };\n}\n","import { codeToHtml } from \"shiki\";\n\nimport { createShikiHighlighter } from \"../createShikiHighlighter\";\n\n/**\n * A ready-to-use highlighter backed by the full Shiki bundle (all languages\n * and themes). Importing this entry opts the full bundle into your build.\n *\n * @example\n * import { ShikiHighlighter } from \"llm-message-react/shiki\";\n * <LLMMessage highlighter={ShikiHighlighter}>{content}</LLMMessage>\n */\nexport const ShikiHighlighter = createShikiHighlighter(codeToHtml);\n"]}

package/dist/highlighters/shiki.d.cts

@@ -0,0 +1,14 @@
+import { C as CodeHighlighter } from '../types-Dz7GupgB.cjs';
+import 'react';
+
+/**
+ * A ready-to-use highlighter backed by the full Shiki bundle (all languages
+ * and themes). Importing this entry opts the full bundle into your build.
+ *
+ * @example
+ * import { ShikiHighlighter } from "llm-message-react/shiki";
+ * <LLMMessage highlighter={ShikiHighlighter}>{content}</LLMMessage>
+ */
+declare const ShikiHighlighter: CodeHighlighter;
+
+export { ShikiHighlighter };

package/dist/highlighters/shiki.d.ts

@@ -0,0 +1,14 @@
+import { C as CodeHighlighter } from '../types-Dz7GupgB.js';
+import 'react';
+
+/**
+ * A ready-to-use highlighter backed by the full Shiki bundle (all languages
+ * and themes). Importing this entry opts the full bundle into your build.
+ *
+ * @example
+ * import { ShikiHighlighter } from "llm-message-react/shiki";
+ * <LLMMessage highlighter={ShikiHighlighter}>{content}</LLMMessage>
+ */
+declare const ShikiHighlighter: CodeHighlighter;
+
+export { ShikiHighlighter };

package/dist/highlighters/shiki.js

@@ -0,0 +1,8 @@
+import { createShikiHighlighter } from '../chunk-S3LNINQ5.js';
+import { codeToHtml } from 'shiki';
+
+var ShikiHighlighter = createShikiHighlighter(codeToHtml);
+
+export { ShikiHighlighter };
+//# sourceMappingURL=shiki.js.map
+//# sourceMappingURL=shiki.js.map

package/dist/highlighters/shiki.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/highlighters/shiki.tsx"],"names":[],"mappings":";;;AAYO,IAAM,gBAAA,GAAmB,uBAAuB,UAAU","file":"shiki.js","sourcesContent":["import { codeToHtml } from \"shiki\";\n\nimport { createShikiHighlighter } from \"../createShikiHighlighter\";\n\n/**\n * A ready-to-use highlighter backed by the full Shiki bundle (all languages\n * and themes). Importing this entry opts the full bundle into your build.\n *\n * @example\n * import { ShikiHighlighter } from \"llm-message-react/shiki\";\n * <LLMMessage highlighter={ShikiHighlighter}>{content}</LLMMessage>\n */\nexport const ShikiHighlighter = createShikiHighlighter(codeToHtml);\n"]}

package/dist/highlighters/shikiWeb.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+var web = require('shiki/bundle/web');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/highlighters/shikiWeb.tsx
+var DEFAULT_THEMES = { light: "github-light", dark: "github-dark" };
+function createShikiHighlighter(codeToHtml2, options) {
+  const themes = DEFAULT_THEMES;
+  return function ShikiHighlighter({ code, language, className }) {
+    const [html, setHtml] = react.useState(null);
+    react.useEffect(() => {
+      let cancelled = false;
+      Promise.resolve(codeToHtml2(code, { lang: language, themes })).then((result) => {
+        if (!cancelled) setHtml(result);
+      }).catch(() => {
+        if (!cancelled) setHtml(null);
+      });
+      return () => {
+        cancelled = true;
+      };
+    }, [code, language]);
+    if (html) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: className ?? "llm-shiki",
+          dangerouslySetInnerHTML: { __html: html }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("code", { className: "llm-code-plain", children: code });
+  };
+}
+
+// src/highlighters/shikiWeb.tsx
+var ShikiWebHighlighter = createShikiHighlighter(web.codeToHtml);
+
+exports.ShikiWebHighlighter = ShikiWebHighlighter;
+//# sourceMappingURL=shikiWeb.cjs.map
+//# sourceMappingURL=shikiWeb.cjs.map

package/dist/highlighters/shikiWeb.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/createShikiHighlighter.tsx","../../src/highlighters/shikiWeb.tsx"],"names":["codeToHtml","useState","useEffect","jsx"],"mappings":";;;;;;;AASA,IAAM,cAAA,GAAiB,EAAE,KAAA,EAAO,cAAA,EAAgB,MAAM,aAAA,EAAc;AAe7D,SAAS,sBAAA,CACdA,aACA,OAAA,EACiB;AACjB,EAAA,MAAM,MAAA,GAA4B,cAAA;AAElC,EAAA,OAAO,SAAS,gBAAA,CAAiB,EAAE,IAAA,EAAM,QAAA,EAAU,WAAU,EAAG;AAC9D,IAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAAwB,IAAI,CAAA;AAEpD,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,SAAA,GAAY,KAAA;AAChB,MAAA,OAAA,CAAQ,OAAA,CAAQF,WAAAA,CAAW,IAAA,EAAM,EAAE,IAAA,EAAM,QAAA,EAAU,MAAA,EAAQ,CAAC,CAAA,CACzD,IAAA,CAAK,CAAC,MAAA,KAAW;AAChB,QAAA,IAAI,CAAC,SAAA,EAAW,OAAA,CAAQ,MAAM,CAAA;AAAA,MAChC,CAAC,CAAA,CACA,KAAA,CAAM,MAAM;AAEX,QAAA,IAAI,CAAC,SAAA,EAAW,OAAA,CAAQ,IAAI,CAAA;AAAA,MAC9B,CAAC,CAAA;AACH,MAAA,OAAO,MAAM;AACX,QAAA,SAAA,GAAY,IAAA;AAAA,MACd,CAAA;AAAA,IAIF,CAAA,EAAG,CAAC,IAAA,EAAM,QAAQ,CAAC,CAAA;AAEnB,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,uBACEG,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,WAAW,SAAA,IAAa,WAAA;AAAA,UAExB,uBAAA,EAAyB,EAAE,MAAA,EAAQ,IAAA;AAAK;AAAA,OAC1C;AAAA,IAEJ;AAEA,IAAA,uBAAOA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAA,EAAkB,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,EAChD,CAAA;AACF;;;AClDO,IAAM,mBAAA,GAAsB,uBAAuBH,cAAU","file":"shikiWeb.cjs","sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport type { CodeHighlighter, CodeToHtml } from \"./types\";\n\ninterface CreateShikiHighlighterOptions {\n  /** Theme pair forwarded to `codeToHtml`. Defaults to GitHub light/dark. */\n  themes?: { light: string; dark: string };\n}\n\nconst DEFAULT_THEMES = { light: \"github-light\", dark: \"github-dark\" };\n\n/**\n * Builds a {@link CodeHighlighter} from any `codeToHtml`-compatible function.\n *\n * This factory imports no Shiki bundle itself, so importing it never drags\n * highlighting code into your app. You decide which bundle to pay for by\n * passing the `codeToHtml` from `shiki` (full), `shiki/bundle/web` (web), or a\n * minimal `createHighlighterCore` instance.\n *\n * @example\n * import { codeToHtml } from \"shiki/bundle/web\";\n * const Highlighter = createShikiHighlighter(codeToHtml);\n * <LLMMessage highlighter={Highlighter}>{content}</LLMMessage>\n */\nexport function createShikiHighlighter(\n  codeToHtml: CodeToHtml,\n  options?: CreateShikiHighlighterOptions,\n): CodeHighlighter {\n  const themes = options?.themes ?? DEFAULT_THEMES;\n\n  return function ShikiHighlighter({ code, language, className }) {\n    const [html, setHtml] = useState<string | null>(null);\n\n    useEffect(() => {\n      let cancelled = false;\n      Promise.resolve(codeToHtml(code, { lang: language, themes }))\n        .then((result) => {\n          if (!cancelled) setHtml(result);\n        })\n        .catch(() => {\n          // Fallback: if the language is unsupported, just show plain code.\n          if (!cancelled) setHtml(null);\n        });\n      return () => {\n        cancelled = true;\n      };\n      // `codeToHtml` and `themes` are fixed for the lifetime of a highlighter\n      // instance (captured from the factory closure), so they are intentionally\n      // not listed: they never change between renders of this component.\n    }, [code, language]);\n\n    if (html) {\n      return (\n        <div\n          className={className ?? \"llm-shiki\"}\n          // The HTML is generated by Shiki, which is safe.\n          dangerouslySetInnerHTML={{ __html: html }}\n        />\n      );\n    }\n\n    return <code className=\"llm-code-plain\">{code}</code>;\n  };\n}\n","import { codeToHtml } from \"shiki/bundle/web\";\n\nimport { createShikiHighlighter } from \"../createShikiHighlighter\";\n\n/**\n * A ready-to-use highlighter backed by the smaller Shiki \"web\" bundle, which\n * covers the common web languages. Importing this entry opts the web bundle\n * into your build.\n *\n * @example\n * import { ShikiWebHighlighter } from \"llm-message-react/shiki-web\";\n * <LLMMessage highlighter={ShikiWebHighlighter}>{content}</LLMMessage>\n */\nexport const ShikiWebHighlighter = createShikiHighlighter(codeToHtml);\n"]}

package/dist/highlighters/shikiWeb.d.cts

@@ -0,0 +1,15 @@
+import { C as CodeHighlighter } from '../types-Dz7GupgB.cjs';
+import 'react';
+
+/**
+ * A ready-to-use highlighter backed by the smaller Shiki "web" bundle, which
+ * covers the common web languages. Importing this entry opts the web bundle
+ * into your build.
+ *
+ * @example
+ * import { ShikiWebHighlighter } from "llm-message-react/shiki-web";
+ * <LLMMessage highlighter={ShikiWebHighlighter}>{content}</LLMMessage>
+ */
+declare const ShikiWebHighlighter: CodeHighlighter;
+
+export { ShikiWebHighlighter };

package/dist/highlighters/shikiWeb.d.ts

@@ -0,0 +1,15 @@
+import { C as CodeHighlighter } from '../types-Dz7GupgB.js';
+import 'react';
+
+/**
+ * A ready-to-use highlighter backed by the smaller Shiki "web" bundle, which
+ * covers the common web languages. Importing this entry opts the web bundle
+ * into your build.
+ *
+ * @example
+ * import { ShikiWebHighlighter } from "llm-message-react/shiki-web";
+ * <LLMMessage highlighter={ShikiWebHighlighter}>{content}</LLMMessage>
+ */
+declare const ShikiWebHighlighter: CodeHighlighter;
+
+export { ShikiWebHighlighter };

package/dist/highlighters/shikiWeb.js

@@ -0,0 +1,8 @@
+import { createShikiHighlighter } from '../chunk-S3LNINQ5.js';
+import { codeToHtml } from 'shiki/bundle/web';
+
+var ShikiWebHighlighter = createShikiHighlighter(codeToHtml);
+
+export { ShikiWebHighlighter };
+//# sourceMappingURL=shikiWeb.js.map
+//# sourceMappingURL=shikiWeb.js.map

package/dist/highlighters/shikiWeb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/highlighters/shikiWeb.tsx"],"names":[],"mappings":";;;AAaO,IAAM,mBAAA,GAAsB,uBAAuB,UAAU","file":"shikiWeb.js","sourcesContent":["import { codeToHtml } from \"shiki/bundle/web\";\n\nimport { createShikiHighlighter } from \"../createShikiHighlighter\";\n\n/**\n * A ready-to-use highlighter backed by the smaller Shiki \"web\" bundle, which\n * covers the common web languages. Importing this entry opts the web bundle\n * into your build.\n *\n * @example\n * import { ShikiWebHighlighter } from \"llm-message-react/shiki-web\";\n * <LLMMessage highlighter={ShikiWebHighlighter}>{content}</LLMMessage>\n */\nexport const ShikiWebHighlighter = createShikiHighlighter(codeToHtml);\n"]}