react-shiki 0.9.2 → 0.10.0

package/README.md

@@ -1,4 +1,4 @@
-# 🎨 [react-shiki](https://npmjs.com/react-shiki)
+# 🎨 react-shiki
 
 
 A performant client-side syntax highlighting component and hook for React, built with [Shiki](https://shiki.matsu.io/).
@@ -6,7 +6,7 @@ A performant client-side syntax highlighting component and hook for React, built
 [See the demo page with highlighted code blocks showcasing several Shiki themes!](https://react-shiki.vercel.app/)
 
 <!--toc:start-->
-- 🎨 [react-shiki](https://npmjs.com/react-shiki)
+- [🎨 react-shiki](#🎨-react-shiki)
   - [Features](#features)
   - [Installation](#installation)
   - [Usage](#usage)
@@ -15,9 +15,13 @@ A performant client-side syntax highlighting component and hook for React, built
     - [`react-shiki/web` (Web Bundle)](#react-shikiweb-web-bundle)
     - [`react-shiki/core` (Minimal Bundle)](#react-shikicore-minimal-bundle)
     - [RegExp Engines](#regexp-engines)
+      - [Using Engines with Full and Web Bundles](#using-engines-with-full-and-web-bundles)
+      - [Using Engines with Core Bundle](#using-engines-with-core-bundle)
+      - [Engine Options](#engine-options)
   - [Configuration](#configuration)
     - [Common Configuration Options](#common-configuration-options)
     - [Component-specific Props](#component-specific-props)
+    - [Embedded Language Highlighting](#embedded-language-highlighting)
     - [Multi-theme Support](#multi-theme-support)
       - [Making Themes Reactive](#making-themes-reactive)
         - [Option 1: Using `light-dark()` Function (Recommended)](#option-1-using-light-dark-function-recommended)
@@ -34,7 +38,6 @@ A performant client-side syntax highlighting component and hook for React, built
   - [Performance](#performance)
     - [Throttling Real-time Highlighting](#throttling-real-time-highlighting)
     - [Output Format Optimization](#output-format-optimization)
-    - [Streaming and LLM Chat UI](#streaming-and-llm-chat-ui)
 <!--toc:end-->
 
 ## Features
@@ -43,6 +46,7 @@ A performant client-side syntax highlighting component and hook for React, built
 - 🔐 Flexible output: Choose between React elements (no `dangerouslySetInnerHTML`) or HTML strings for better performance
 - 📦 Multiple bundle options: Full bundle (~1.2MB gz), web bundle (~695KB gz), or minimal core bundle for fine-grained bundle control
 - 🖌️ Full support for custom TextMate themes and languages
+- 🧬 Automatic highlighting of embedded languages (e.g. TypeScript fenced inside Markdown) via Shiki's `guessEmbeddedLanguages`
 - 🔧 Supports passing custom Shiki transformers to the highlighter, in addition to all other options supported by `codeToHast`
 - 🚰 Performant highlighting of streamed code, with optional throttling
 - 📚 Includes minimal default styles for code blocks
@@ -234,12 +238,16 @@ The `ShikiHighlighter` component offers minimal built-in styling and customizati
 | ------------------ | --------- | ------- | ---------------------------------------------------------- |
 | `showLanguage`     | `boolean` | `true`  | Displays language label in top-right corner                |
 | `addDefaultStyles` | `boolean` | `true`  | Adds minimal default styling to the highlighted code block |
-| `as`               | `string`  | `'pre'` | Component's Root HTML element                              |
+| `as`               | `string`  | `'div'` | Component's Root HTML element                              |
 | `className`        | `string`  | -       | Custom class name for the code block                       |
 | `langClassName`    | `string`  | -       | Class name for styling the language label                  |
 | `style`            | `object`  | -       | Inline style object for the code block                     |
 | `langStyle`        | `object`  | -       | Inline style object for the language label                 |
 
+### Embedded Language Highlighting
+
+react-shiki uses Shiki's [`guessEmbeddedLanguages`](https://shiki.style) to automatically detect, load, and highlight languages nested inside other languages — for example, a TypeScript fenced code block inside a Markdown document will be highlighted as TypeScript without any extra configuration. Embedded languages are dynamically loaded on demand, as long as they exist in your bundle.
+
 ### Multi-theme Support
 
 To use multiple theme modes, pass an object with your multi-theme configuration to the `theme` prop in the `ShikiHighlighter` component:
@@ -346,7 +354,6 @@ const highlightedCode = useShikiHighlighter(code, "tsx", tokyoNight);
 ### Custom Languages
 
 Custom languages should be passed as a TextMate grammar in JavaScript object. For example, [it should look like this](https://github.com/shikijs/textmate-grammars-themes/blob/main/packages/tm-grammars/grammars/typescript.json)
-
 ```tsx
 import mcfunction from "../langs/mcfunction.tmLanguage.json";
 
@@ -361,8 +368,7 @@ const highlightedCode = useShikiHighlighter(code, mcfunction, "github-dark");
 
 #### Preloading Languages
 
-For dynamic highlighting scenarios where language selection happens at runtime:
-`preloadLanguages` can also preload bundled language IDs, not just custom grammars.
+If highlighting is dynamic at runtime, preload custom languages. 
 
 ```tsx
 import mcfunction from "../langs/mcfunction.tmLanguage.json";
@@ -383,9 +389,12 @@ const highlightedCode = useShikiHighlighter(code, "typescript", "github-dark", {
 });
 ```
 
+> [!NOTE] 
+> Bundled language are dynamically loaded as needed, and do not need to be preloaded as long as they exist in your bundle.
+
 ### Language Aliases
 
-You can define custom aliases for languages using the `langAlias` option. This is useful when you want to use alternative names for languages:
+You can define custom aliases for languages using the `langAlias` option. This is useful when you need to support alternative names for languages:
 
 ```tsx
 // Component
@@ -452,21 +461,26 @@ const highlightedCode = useShikiHighlighter(code, "javascript", "github-dark", {
 ```
 
 > [!NOTE]
-> When using the hook with line numbers, import the CSS file for the line numbers to work:
+> When using the hook with line numbers, import the CSS file or provide your own CSS 
+> for `.rs-line-number` (line `span`) and `.rs-has-line-numbers` (container `code` element). <!-- TODO: The CSS vars/classes/selectors are poorly documented -->
 > ```tsx
 > import 'react-shiki/css';
 > ```
-> Or provide your own CSS counter implementation and styles for `.line-numbers` (line `span`) and `.has-line-numbers` (container `code` element)
+
+> [!WARNING]
+> Legacy `.line-numbers` / `.has-line-numbers` selectors and unprefixed line-number CSS variables are still supported for this release cycle, but are deprecated and will be removed in the next major.
+
+Component-internal default classes are namespaced under `rs-*` and shipped inside `@layer base` so app-level utilities can override them more predictably.
 
 Available CSS variables for customization:
 ```css
---line-numbers-foreground: rgba(107, 114, 128, 0.5);
---line-numbers-width: 2ch;
---line-numbers-padding-left: 0ch;
---line-numbers-padding-right: 2ch;
---line-numbers-font-size: inherit;
---line-numbers-font-weight: inherit;
---line-numbers-opacity: 1;
+--rs-line-numbers-foreground: rgba(107, 114, 128, 0.5);
+--rs-line-numbers-width: 2ch;
+--rs-line-numbers-padding-left: 0ch;
+--rs-line-numbers-padding-right: 2ch;
+--rs-line-numbers-font-size: inherit;
+--rs-line-numbers-font-weight: inherit;
+--rs-line-numbers-opacity: 1;
 ```
 
 You can customize them in your own CSS or by using the style prop on the component:
@@ -476,8 +490,8 @@ You can customize them in your own CSS or by using the style prop on the compone
   theme="github-dark"
   showLineNumbers
   style={{
-    '--line-numbers-foreground': '#60a5fa',
-    '--line-numbers-width': '3ch'
+    '--rs-line-numbers-foreground': '#60a5fa',
+    '--rs-line-numbers-width': '3ch'
   }}
 >
   {code}

package/dist/component-C5lsWZSq.mjs

@@ -0,0 +1,345 @@
+import './style.css';
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+import { dequal } from "dequal";
+import { guessEmbeddedLanguages, isSpecialLang } from "shiki/core";
+import { visit } from "unist-util-visit";
+import { clsx } from "clsx";
+//#region src/lib/utils.ts
+/**
+* Returns a referentially stable version of `value` that only updates when content changes.
+* Uses reference equality as a fast path and deep comparison to prevent unnecessary updates.
+*/
+const useStableValue = (value) => {
+	const ref = useRef(value);
+	if (value !== ref.current && !dequal(value, ref.current)) ref.current = value;
+	return ref.current;
+};
+/**
+* Optionally throttles rapid sequential highlighting operations
+*
+* @example
+* const timeoutControl = useRef<TimeoutState>({
+*   nextAllowedTime: 0,
+*   timeoutId: undefined
+* });
+*
+* throttleHighlighting(highlightCode, timeoutControl, 1000);
+*/
+const throttleHighlighting = (performHighlight, timeoutControl, throttleMs) => {
+	clearTimeout(timeoutControl.current.timeoutId);
+	const delay = Math.max(0, timeoutControl.current.nextAllowedTime - Date.now());
+	timeoutControl.current.timeoutId = setTimeout(() => {
+		performHighlight();
+		timeoutControl.current.nextAllowedTime = Date.now() + throttleMs;
+	}, delay);
+};
+//#endregion
+//#region src/lib/language.ts
+const FALLBACK_LANGUAGE = "plaintext";
+const getEmbeddedLanguages = (code, languageId, highlighter) => {
+	const bundled = highlighter.getBundledLanguages();
+	return guessEmbeddedLanguages(code, languageId).flatMap((language) => bundled[language] ?? []);
+};
+const toArray = (value) => value == null ? [] : Array.isArray(value) ? value : [value];
+const languageKey = (lang) => {
+	if (lang == null) return null;
+	if (typeof lang === "string") return `s:${lang}`;
+	return `o:${lang.name}::${lang.scopeName}`;
+};
+const dedupeLanguages = (langs) => {
+	const seen = /* @__PURE__ */ new Set();
+	const deduped = [];
+	for (const lang of langs) {
+		const key = languageKey(lang);
+		if (key == null || seen.has(key)) continue;
+		seen.add(key);
+		deduped.push(lang);
+	}
+	return deduped;
+};
+/**
+* Used in factories to check if language is supported.
+* Objects are validated as grammar registrations (name + scopeName).
+*/
+const isLoadableLanguage = (lang, bundledLanguages) => {
+	if (lang == null) return false;
+	if (typeof lang === "string") return lang in bundledLanguages;
+	return typeof lang.name === "string" && typeof lang.scopeName === "string";
+};
+/**
+* Used in hook to resolve loaded language for highlighting.
+* Falls back to "plaintext" if not supported.
+*/
+const resolveLoadedLanguage = (languageId, loadedLanguages) => isSpecialLang(languageId) || loadedLanguages.includes(languageId) ? languageId : FALLBACK_LANGUAGE;
+/**
+* Resolves the language input to standardized IDs and objects for Shiki
+* @param lang The language input from props
+* @param customLanguages An array of custom textmate grammar objects or a single grammar object
+* @returns A LanguageResult object containing:
+*   - languageId: The resolved language ID
+*   - langsToLoad: The language objects/string ids to load
+*/
+const resolveLanguage = (lang, customLanguages, langAliases, preloadLanguages) => {
+	const customLangs = toArray(customLanguages);
+	const preloadLangs = toArray(preloadLanguages);
+	const customMatchPool = [...customLangs, ...preloadLangs];
+	let languageId = FALLBACK_LANGUAGE;
+	let primaryLang;
+	if (lang == null || typeof lang === "string" && !lang.trim()) return {
+		languageId,
+		langsToLoad: dedupeLanguages([...preloadLangs, ...customLangs])
+	};
+	if (typeof lang === "object") {
+		languageId = lang.name;
+		primaryLang = lang;
+	} else {
+		const lowerLang = lang.toLowerCase();
+		const matches = (str) => str?.toLowerCase() === lowerLang;
+		const customMatch = customMatchPool.find((candidate) => typeof candidate === "object" && candidate != null && !!(matches(candidate.name) || matches(candidate.scopeName) || matches(candidate.scopeName?.split(".").pop()) || candidate.aliases?.some(matches) || candidate.fileTypes?.some(matches)));
+		if (customMatch) {
+			languageId = customMatch.name || lang;
+			primaryLang = customMatch;
+		} else if (langAliases?.[lang]) {
+			languageId = langAliases[lang];
+			primaryLang = langAliases[lang];
+		} else {
+			languageId = lang;
+			primaryLang = lang;
+		}
+	}
+	return {
+		languageId,
+		langsToLoad: dedupeLanguages([
+			primaryLang,
+			...preloadLangs,
+			...customLangs
+		])
+	};
+};
+//#endregion
+//#region src/lib/theme.ts
+const DEFAULT_THEMES = {
+	light: "github-light",
+	dark: "github-dark"
+};
+const isTextmateTheme = (value) => {
+	if (typeof value !== "object" || value === null) return false;
+	const v = value;
+	const hasTokens = Array.isArray(v.tokenColors) || Array.isArray(v.settings);
+	const hasIdentity = typeof v.name === "string" || typeof v.type === "string";
+	return hasTokens && hasIdentity;
+};
+function resolveTheme(themeInput) {
+	if (typeof themeInput !== "object" || themeInput === null || isTextmateTheme(themeInput)) return {
+		isMulti: false,
+		theme: themeInput,
+		themesToLoad: [themeInput]
+	};
+	const validEntries = Object.entries(themeInput).filter(([key, value]) => key.trim() !== "" && (typeof value === "string" && value.trim() !== "" || isTextmateTheme(value)));
+	if (validEntries.length === 0) {
+		console.warn("[react-shiki] invalid multi-theme config, falling back to defaults");
+		return {
+			isMulti: true,
+			themes: DEFAULT_THEMES,
+			themesToLoad: Object.values(DEFAULT_THEMES)
+		};
+	}
+	if (validEntries.length !== Object.keys(themeInput).length) console.warn("[react-shiki] multi-theme config contained invalid entries; they were dropped");
+	return {
+		isMulti: true,
+		themes: Object.fromEntries(validEntries),
+		themesToLoad: validEntries.map(([, value]) => value)
+	};
+}
+//#endregion
+//#region src/lib/transformers.ts
+/**
+* Creates a transformer that enables line numbers display
+* @param startLine - The starting line number (defaults to 1)
+*/
+function lineNumbersTransformer(startLine = 1) {
+	return {
+		name: "react-shiki:line-numbers",
+		code(node) {
+			this.addClassToHast(node, "has-line-numbers");
+			this.addClassToHast(node, "rs-has-line-numbers");
+			if (startLine !== 1) {
+				const existingStyle = node.properties?.style || "";
+				const newStyle = existingStyle ? `${existingStyle}; --line-start: ${startLine}` : `--line-start: ${startLine}`;
+				node.properties = {
+					...node.properties,
+					style: newStyle
+				};
+			}
+		},
+		line(node) {
+			this.addClassToHast(node, "line-numbers");
+			this.addClassToHast(node, "rs-line-number");
+			return node;
+		}
+	};
+}
+//#endregion
+//#region src/lib/options.ts
+const buildThemeOptions = (resolvedTheme, defaultColor, cssVariablePrefix) => {
+	if (resolvedTheme.isMulti) return {
+		themes: resolvedTheme.themes,
+		defaultColor,
+		cssVariablePrefix
+	};
+	return { theme: resolvedTheme.theme };
+};
+const buildShikiOptions = (languageId, resolvedTheme, options) => {
+	const { delay, customLanguages, preloadLanguages, outputFormat, highlighter, langAlias, engine, defaultColor, cssVariablePrefix, showLineNumbers, startingLineNumber, transformers: userTransformers, ...shikiPassthrough } = options;
+	const transformers = [...userTransformers || []];
+	if (showLineNumbers) transformers.push(lineNumbersTransformer(startingLineNumber));
+	return {
+		lang: languageId,
+		...buildThemeOptions(resolvedTheme, defaultColor, cssVariablePrefix),
+		...shikiPassthrough,
+		transformers
+	};
+};
+//#endregion
+//#region src/lib/hook.ts
+async function highlight(code, resolved, opts, factory) {
+	const { languageId, langsToLoad, themesToLoad, shikiOptions } = resolved;
+	const highlighter = opts.highlighter ?? await (async () => {
+		const hl = await factory(langsToLoad, themesToLoad, opts.engine);
+		await hl.loadLanguage(...getEmbeddedLanguages(code, languageId, hl));
+		return hl;
+	})();
+	const language = resolveLoadedLanguage(languageId, highlighter.getLoadedLanguages());
+	const options = {
+		...shikiOptions,
+		lang: language
+	};
+	return opts.outputFormat === "html" ? highlighter.codeToHtml(code, options) : toJsxRuntime(highlighter.codeToHast(code, options), {
+		jsx,
+		jsxs,
+		Fragment
+	});
+}
+const useHighlight = (code, lang, themeInput, options = {}, highlighterFactory) => {
+	const [highlightedCode, setHighlightedCode] = useState(null);
+	const stableLang = useStableValue(lang);
+	const stableTheme = useStableValue(themeInput);
+	const stableOpts = useStableValue(options);
+	const resolved = useMemo(() => {
+		const { languageId, langsToLoad } = resolveLanguage(stableLang, stableOpts.customLanguages, stableOpts.langAlias, stableOpts.preloadLanguages);
+		const theme = resolveTheme(stableTheme);
+		const shikiOptions = buildShikiOptions(languageId, theme, stableOpts);
+		return {
+			languageId,
+			langsToLoad,
+			themesToLoad: theme.themesToLoad,
+			shikiOptions
+		};
+	}, [
+		stableLang,
+		stableTheme,
+		stableOpts
+	]);
+	const requestIdRef = useRef(0);
+	const timeoutControl = useRef({
+		nextAllowedTime: 0,
+		timeoutId: void 0
+	});
+	useEffect(() => {
+		const requestId = ++requestIdRef.current;
+		if (!resolved.languageId) return;
+		const run = async () => {
+			try {
+				const result = await highlight(code, resolved, stableOpts, highlighterFactory);
+				if (requestId === requestIdRef.current) setHighlightedCode(result);
+			} catch (error) {
+				console.error("[react-shiki] highlight failed", error);
+			}
+		};
+		if (stableOpts.delay) throttleHighlighting(run, timeoutControl, stableOpts.delay);
+		else run();
+		return () => {
+			clearTimeout(timeoutControl.current.timeoutId);
+		};
+	}, [
+		code,
+		resolved,
+		stableOpts,
+		highlighterFactory
+	]);
+	return highlightedCode;
+};
+//#endregion
+//#region src/lib/plugins.ts
+/**
+* Rehype plugin to add an 'inline' property to <code> elements
+* Sets 'inline' property to true if the <code> is not within a <pre> tag
+*
+* Pass this plugin to the `rehypePlugins` prop of react-markdown
+* You can then access `inline` as a prop in components passed to react-markdown
+*
+* @example
+* <ReactMarkdown rehypePlugins={[rehypeInlineCodeProperty]} />
+*/
+function rehypeInlineCodeProperty() {
+	return (tree) => {
+		visit(tree, "element", (node, _index, parent) => {
+			if (node.tagName === "code" && parent?.type === "element" && parent.tagName !== "pre") node.properties.inline = true;
+		});
+	};
+}
+/**
+* Function to determine if code is inline based on the presence of line breaks
+*
+* @example
+* const isInline = node && isInlineCode(node: Element)
+*/
+const isInlineCode = (node) => {
+	return !(node.children || []).filter((child) => child.type === "text").map((child) => child.value).join("").includes("\n");
+};
+//#endregion
+//#region src/lib/component.tsx
+/**
+* Base ShikiHighlighter component factory.
+* This creates a component that uses the provided hook implementation.
+*/
+const createShikiHighlighterComponent = (useShikiHighlighterImpl) => {
+	return forwardRef(({ language, theme, delay, transformers, defaultColor, cssVariablePrefix, addDefaultStyles = true, style, langStyle, className, langClassName, showLanguage = true, showLineNumbers = false, startingLineNumber = 1, children: code, as: Element = "div", customLanguages, preloadLanguages, ...shikiOptions }, ref) => {
+		const options = {
+			delay,
+			transformers,
+			customLanguages,
+			preloadLanguages,
+			showLineNumbers,
+			defaultColor,
+			cssVariablePrefix,
+			startingLineNumber,
+			...shikiOptions
+		};
+		const displayLanguageId = typeof language === "object" ? language.name || null : language?.trim() || null;
+		const highlightedCode = useShikiHighlighterImpl(code, language, theme, options);
+		return /* @__PURE__ */ jsxs(Element, {
+			ref,
+			"data-testid": "shiki-container",
+			"data-slot": "container",
+			className: clsx("rs-root", "not-prose", addDefaultStyles && "rs-default-styles", className),
+			style,
+			children: [showLanguage && displayLanguageId ? /* @__PURE__ */ jsx("span", {
+				id: "language-label",
+				"data-slot": "language-label",
+				className: clsx("rs-language-label", langClassName),
+				style: langStyle,
+				children: displayLanguageId
+			}) : null, typeof highlightedCode === "string" ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "content",
+				dangerouslySetInnerHTML: { __html: highlightedCode }
+			}) : highlightedCode]
+		});
+	});
+};
+//#endregion
+export { isLoadableLanguage as a, useHighlight as i, isInlineCode as n, rehypeInlineCodeProperty as r, createShikiHighlighterComponent as t };
+
+//# sourceMappingURL=component-C5lsWZSq.mjs.map

package/dist/component-C5lsWZSq.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-C5lsWZSq.mjs","names":[],"sources":["../src/lib/utils.ts","../src/lib/language.ts","../src/lib/theme.ts","../src/lib/transformers.ts","../src/lib/options.ts","../src/lib/hook.ts","../src/lib/plugins.ts","../src/lib/component.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { dequal } from 'dequal';\n\nimport type { TimeoutState } from './types';\n\n/**\n * Returns a referentially stable version of `value` that only updates when content changes.\n * Uses reference equality as a fast path and deep comparison to prevent unnecessary updates.\n */\nexport const useStableValue = <T>(value: T): T => {\n  const ref = useRef(value);\n\n  if (value !== ref.current && !dequal(value, ref.current)) {\n    ref.current = value;\n  }\n\n  return ref.current;\n};\n\n/**\n * Optionally throttles rapid sequential highlighting operations\n *\n * @example\n * const timeoutControl = useRef<TimeoutState>({\n *   nextAllowedTime: 0,\n *   timeoutId: undefined\n * });\n *\n * throttleHighlighting(highlightCode, timeoutControl, 1000);\n */\nexport const throttleHighlighting = (\n  performHighlight: () => Promise<void>,\n  timeoutControl: React.RefObject<TimeoutState>,\n  throttleMs: number\n) => {\n  clearTimeout(timeoutControl.current.timeoutId);\n\n  const delay = Math.max(\n    0,\n    timeoutControl.current.nextAllowedTime - Date.now()\n  );\n  timeoutControl.current.timeoutId = setTimeout(() => {\n    performHighlight();\n    timeoutControl.current.nextAllowedTime = Date.now() + throttleMs;\n  }, delay);\n};\n","import type { Language } from './types';\nimport { guessEmbeddedLanguages, isSpecialLang } from 'shiki/core';\nimport type {\n  DynamicImportLanguageRegistration,\n  Highlighter,\n  HighlighterCore,\n  LanguageInput,\n  LanguageRegistration,\n} from 'shiki';\n\nexport const FALLBACK_LANGUAGE = 'plaintext';\n\nexport const getEmbeddedLanguages = (\n  code: string,\n  languageId: string,\n  highlighter: Highlighter | HighlighterCore\n): LanguageInput[] => {\n  const bundled: Record<string, LanguageInput> =\n    highlighter.getBundledLanguages();\n  return guessEmbeddedLanguages(code, languageId).flatMap(\n    (language) => bundled[language] ?? []\n  );\n};\n\n/**\n * Resolved languages and metadata\n */\ntype LanguageResult = {\n  languageId: string;\n  langsToLoad: Language[];\n};\n\nconst toArray = <T>(value?: T | T[]): T[] =>\n  value == null ? [] : Array.isArray(value) ? value : [value];\n\nconst languageKey = (lang: Language): string | null => {\n  if (lang == null) return null;\n  if (typeof lang === 'string') return `s:${lang}`;\n  return `o:${lang.name}::${lang.scopeName}`;\n};\n\nconst dedupeLanguages = (langs: Language[]): Language[] => {\n  const seen = new Set<string>();\n  const deduped: Language[] = [];\n\n  for (const lang of langs) {\n    const key = languageKey(lang);\n    if (key == null || seen.has(key)) continue;\n    seen.add(key);\n    deduped.push(lang);\n  }\n\n  return deduped;\n};\n\n/**\n * Used in factories to check if language is supported.\n * Objects are validated as grammar registrations (name + scopeName).\n */\nexport const isLoadableLanguage = <T extends string>(\n  lang: Language,\n  bundledLanguages: Record<T, DynamicImportLanguageRegistration>\n): lang is NonNullable<Language> => {\n  if (lang == null) return false;\n  if (typeof lang === 'string') return lang in bundledLanguages;\n  return (\n    typeof lang.name === 'string' && typeof lang.scopeName === 'string'\n  );\n};\n\n/**\n * Used in hook to resolve loaded language for highlighting.\n * Falls back to \"plaintext\" if not supported.\n */\nexport const resolveLoadedLanguage = (\n  languageId: string,\n  loadedLanguages: string[]\n): string =>\n  isSpecialLang(languageId) || loadedLanguages.includes(languageId)\n    ? languageId\n    : FALLBACK_LANGUAGE;\n\n/**\n * Resolves the language input to standardized IDs and objects for Shiki\n * @param lang The language input from props\n * @param customLanguages An array of custom textmate grammar objects or a single grammar object\n * @returns A LanguageResult object containing:\n *   - languageId: The resolved language ID\n *   - langsToLoad: The language objects/string ids to load\n */\nexport const resolveLanguage = (\n  lang: Language,\n  customLanguages?: LanguageRegistration | LanguageRegistration[],\n  langAliases?: Record<string, string>,\n  preloadLanguages?: Language | Language[]\n): LanguageResult => {\n  const customLangs = toArray(customLanguages);\n  const preloadLangs = toArray(preloadLanguages);\n  const customMatchPool = [...customLangs, ...preloadLangs];\n  let languageId = FALLBACK_LANGUAGE;\n  let primaryLang: Language;\n\n  // Language is null or empty string\n  if (lang == null || (typeof lang === 'string' && !lang.trim())) {\n    return {\n      languageId,\n      langsToLoad: dedupeLanguages([...preloadLangs, ...customLangs]),\n    };\n  }\n\n  // Language is custom object\n  if (typeof lang === 'object') {\n    languageId = lang.name;\n    primaryLang = lang;\n  } else {\n    // Language is string\n    const lowerLang = lang.toLowerCase();\n    const matches = (str: string | undefined): boolean =>\n      str?.toLowerCase() === lowerLang;\n\n    // Check custom registrations (from both customLanguages and preloadLanguages)\n    const customMatch = customMatchPool.find(\n      (candidate): candidate is LanguageRegistration =>\n        typeof candidate === 'object' &&\n        candidate != null &&\n        !!(\n          matches(candidate.name) ||\n          matches(candidate.scopeName) ||\n          matches(candidate.scopeName?.split('.').pop()) ||\n          candidate.aliases?.some(matches) ||\n          candidate.fileTypes?.some(matches)\n        )\n    );\n\n    if (customMatch) {\n      languageId = customMatch.name || lang;\n      primaryLang = customMatch;\n    } else if (langAliases?.[lang]) {\n      // Language is aliased\n      languageId = langAliases[lang];\n      primaryLang = langAliases[lang];\n    } else {\n      // For any other string, pass it through to the factory\n      languageId = lang;\n      primaryLang = lang;\n    }\n  }\n\n  return {\n    languageId,\n    langsToLoad: dedupeLanguages([\n      primaryLang,\n      ...preloadLangs,\n      ...customLangs,\n    ]),\n  };\n};\n","import type { Theme, Themes } from './types';\nimport type { ThemeRegistrationAny } from 'shiki/core';\n\nexport const DEFAULT_THEMES: Themes = {\n  light: 'github-light',\n  dark: 'github-dark',\n};\n\nexport type ResolvedTheme =\n  | { isMulti: true; themes: Themes; themesToLoad: Theme[] }\n  | { isMulti: false; theme: Theme; themesToLoad: Theme[] };\n\nconst isTextmateTheme = (\n  value: unknown\n): value is ThemeRegistrationAny => {\n  if (typeof value !== 'object' || value === null) return false;\n  const v = value as Partial<ThemeRegistrationAny> & {\n    settings?: unknown;\n  };\n  const hasTokens =\n    Array.isArray(v.tokenColors) || Array.isArray(v.settings);\n  const hasIdentity =\n    typeof v.name === 'string' || typeof v.type === 'string';\n  return hasTokens && hasIdentity;\n};\n\nexport function resolveTheme(themeInput: Theme | Themes): ResolvedTheme {\n  if (\n    typeof themeInput !== 'object' ||\n    themeInput === null ||\n    isTextmateTheme(themeInput)\n  ) {\n    return {\n      isMulti: false,\n      theme: themeInput,\n      themesToLoad: [themeInput],\n    };\n  }\n\n  const validEntries = Object.entries(themeInput).filter(\n    ([key, value]) =>\n      key.trim() !== '' &&\n      ((typeof value === 'string' && value.trim() !== '') ||\n        isTextmateTheme(value))\n  );\n\n  if (validEntries.length === 0) {\n    console.warn(\n      '[react-shiki] invalid multi-theme config, falling back to defaults'\n    );\n    return {\n      isMulti: true,\n      themes: DEFAULT_THEMES,\n      themesToLoad: Object.values(DEFAULT_THEMES),\n    };\n  }\n\n  if (validEntries.length !== Object.keys(themeInput).length) {\n    console.warn(\n      '[react-shiki] multi-theme config contained invalid entries; they were dropped'\n    );\n  }\n\n  const themes = Object.fromEntries(validEntries) as Themes;\n  return {\n    isMulti: true,\n    themes,\n    themesToLoad: validEntries.map(([, value]) => value as Theme),\n  };\n}\n","import type { ShikiTransformer } from 'shiki/core';\n\n/**\n * Creates a transformer that enables line numbers display\n * @param startLine - The starting line number (defaults to 1)\n */\nexport function lineNumbersTransformer(startLine = 1): ShikiTransformer {\n  return {\n    name: 'react-shiki:line-numbers',\n    code(node) {\n      this.addClassToHast(node, 'has-line-numbers');\n      this.addClassToHast(node, 'rs-has-line-numbers');\n      if (startLine !== 1) {\n        const existingStyle = (node.properties?.style as string) || '';\n        const newStyle = existingStyle\n          ? `${existingStyle}; --line-start: ${startLine}`\n          : `--line-start: ${startLine}`;\n        node.properties = {\n          ...node.properties,\n          style: newStyle,\n        };\n      }\n    },\n    line(node) {\n      this.addClassToHast(node, 'line-numbers');\n      this.addClassToHast(node, 'rs-line-number');\n      return node;\n    },\n  };\n}\n","import type {\n  BundledTheme,\n  CodeOptionsMultipleThemes,\n  CodeOptionsSingleTheme,\n  CodeToHastOptions,\n} from 'shiki';\n\nimport type { HighlighterOptions } from './types';\nimport type { ResolvedTheme } from './theme';\nimport { lineNumbersTransformer } from './transformers';\n\nconst buildThemeOptions = (\n  resolvedTheme: ResolvedTheme,\n  defaultColor: HighlighterOptions['defaultColor'],\n  cssVariablePrefix: HighlighterOptions['cssVariablePrefix']\n):\n  | CodeOptionsMultipleThemes<BundledTheme>\n  | CodeOptionsSingleTheme<BundledTheme> => {\n  if (resolvedTheme.isMulti) {\n    return {\n      themes: resolvedTheme.themes,\n      defaultColor,\n      cssVariablePrefix,\n    };\n  }\n\n  return {\n    theme: resolvedTheme.theme,\n  };\n};\n\nexport const buildShikiOptions = (\n  languageId: string,\n  resolvedTheme: ResolvedTheme,\n  options: HighlighterOptions\n): CodeToHastOptions => {\n  const {\n    delay,\n    customLanguages,\n    preloadLanguages,\n    outputFormat,\n    highlighter,\n    langAlias,\n    engine,\n    defaultColor,\n    cssVariablePrefix,\n    showLineNumbers,\n    startingLineNumber,\n    transformers: userTransformers,\n    ...shikiPassthrough\n  } = options;\n\n  const transformers = [...(userTransformers || [])];\n  if (showLineNumbers) {\n    transformers.push(lineNumbersTransformer(startingLineNumber));\n  }\n\n  return {\n    lang: languageId,\n    ...buildThemeOptions(resolvedTheme, defaultColor, cssVariablePrefix),\n    ...shikiPassthrough,\n    transformers,\n  };\n};\n","import { useEffect, useMemo, useRef, useState } from 'react';\nimport { jsx, jsxs, Fragment } from 'react/jsx-runtime';\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime';\nimport type { CodeToHastOptions } from 'shiki';\n\nimport type {\n  HighlightedCode,\n  HighlighterFactory,\n  HighlighterOptions,\n  Language,\n  Theme,\n  Themes,\n  TimeoutState,\n} from './types';\n\nimport { throttleHighlighting, useStableValue } from './utils';\nimport {\n  getEmbeddedLanguages,\n  resolveLanguage,\n  resolveLoadedLanguage,\n} from './language';\nimport { resolveTheme } from './theme';\nimport { buildShikiOptions } from './options';\n\nexport async function highlight(\n  code: string,\n  resolved: {\n    languageId: string;\n    langsToLoad: Language[];\n    themesToLoad: Theme[];\n    shikiOptions: CodeToHastOptions;\n  },\n  opts: Pick<\n    HighlighterOptions,\n    'highlighter' | 'outputFormat' | 'engine'\n  >,\n  factory: HighlighterFactory\n) {\n  const { languageId, langsToLoad, themesToLoad, shikiOptions } =\n    resolved;\n\n  const highlighter =\n    opts.highlighter ??\n    (await (async () => {\n      const hl = await factory(langsToLoad, themesToLoad, opts.engine);\n      await hl.loadLanguage(\n        ...getEmbeddedLanguages(code, languageId, hl)\n      );\n      return hl;\n    })());\n\n  const language = resolveLoadedLanguage(\n    languageId,\n    highlighter.getLoadedLanguages()\n  );\n  const options = { ...shikiOptions, lang: language };\n\n  return opts.outputFormat === 'html'\n    ? highlighter.codeToHtml(code, options)\n    : toJsxRuntime(highlighter.codeToHast(code, options), {\n        jsx,\n        jsxs,\n        Fragment,\n      });\n}\n\nexport const useHighlight = (\n  code: string,\n  lang: Language,\n  themeInput: Theme | Themes,\n  options: HighlighterOptions = {},\n  highlighterFactory: HighlighterFactory\n) => {\n  const [highlightedCode, setHighlightedCode] =\n    useState<HighlightedCode>(null);\n\n  const stableLang = useStableValue(lang);\n  const stableTheme = useStableValue(themeInput);\n  const stableOpts = useStableValue(options);\n\n  const resolved = useMemo(() => {\n    const { languageId, langsToLoad } = resolveLanguage(\n      stableLang,\n      stableOpts.customLanguages,\n      stableOpts.langAlias,\n      stableOpts.preloadLanguages\n    );\n\n    const theme = resolveTheme(stableTheme);\n\n    const shikiOptions = buildShikiOptions(languageId, theme, stableOpts);\n    return {\n      languageId,\n      langsToLoad,\n      themesToLoad: theme.themesToLoad,\n      shikiOptions,\n    };\n  }, [stableLang, stableTheme, stableOpts]);\n\n  const requestIdRef = useRef(0);\n\n  const timeoutControl = useRef<TimeoutState>({\n    nextAllowedTime: 0,\n    timeoutId: undefined,\n  });\n\n  useEffect(() => {\n    const requestId = ++requestIdRef.current;\n\n    if (!resolved.languageId) return;\n\n    const run = async () => {\n      try {\n        const result = await highlight(\n          code,\n          resolved,\n          stableOpts,\n          highlighterFactory\n        );\n        if (requestId === requestIdRef.current) {\n          setHighlightedCode(result);\n        }\n      } catch (error) {\n        console.error('[react-shiki] highlight failed', error);\n      }\n    };\n\n    if (stableOpts.delay) {\n      throttleHighlighting(run, timeoutControl, stableOpts.delay);\n    } else {\n      run();\n    }\n\n    return () => {\n      clearTimeout(timeoutControl.current.timeoutId);\n    };\n  }, [code, resolved, stableOpts, highlighterFactory]);\n\n  return highlightedCode;\n};\n","import { visit } from 'unist-util-visit';\nimport type { Root } from 'hast';\nimport type { Element } from './types';\n\n/**\n * Rehype plugin to add an 'inline' property to <code> elements\n * Sets 'inline' property to true if the <code> is not within a <pre> tag\n *\n * Pass this plugin to the `rehypePlugins` prop of react-markdown\n * You can then access `inline` as a prop in components passed to react-markdown\n *\n * @example\n * <ReactMarkdown rehypePlugins={[rehypeInlineCodeProperty]} />\n */\nexport function rehypeInlineCodeProperty() {\n  return (tree: Root): undefined => {\n    visit(tree, 'element', (node: Element, _index, parent) => {\n      if (\n        node.tagName === 'code' &&\n        parent?.type === 'element' &&\n        parent.tagName !== 'pre'\n      ) {\n        node.properties.inline = true;\n      }\n    });\n  };\n}\n\n/**\n * Function to determine if code is inline based on the presence of line breaks\n *\n * @example\n * const isInline = node && isInlineCode(node: Element)\n */\nexport const isInlineCode = (node: Element): boolean => {\n  const textContent = (node.children || [])\n    .filter((child) => child.type === 'text')\n    .map((child) => child.value)\n    .join('');\n\n  return !textContent.includes('\\n');\n};\n","import '../styles/component.css';\nimport '../styles/features.css';\nimport { clsx } from 'clsx';\n\nimport type {\n  HighlighterOptions,\n  Language,\n  Theme,\n  Themes,\n  UseShikiHighlighter,\n} from './types';\nimport { forwardRef } from 'react';\n\n/**\n * Props for the ShikiHighlighter component\n */\nexport interface ShikiHighlighterProps extends HighlighterOptions {\n  /**\n   * The programming language for syntax highlighting\n   * Supports custom textmate grammar objects in addition to Shiki's bundled languages\n   * @see https://shiki.style/languages\n   */\n  language: Language;\n\n  /**\n   * The code to be highlighted\n   */\n  children: string;\n\n  /**\n   * The color theme or themes for syntax highlighting\n   * Supports single, dual, or multiple themes\n   * Supports custom textmate theme objects in addition to Shiki's bundled themes\n   *\n   * @example\n   * theme='github-dark' // single theme\n   * theme={{ light: 'github-light', dark: 'github-dark' }} // multi-theme\n   *\n   * @see https://shiki.style/themes\n   */\n  theme: Theme | Themes;\n\n  /**\n   * Controls the application of default styles to the generated code blocks\n   *\n   * Default styles include padding, overflow handling, border radius, language label styling, and font settings\n   * @default true\n   */\n  addDefaultStyles?: boolean;\n\n  /**\n   * Add custom inline styles to the generated code block\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Add custom inline styles to the language label\n   */\n  langStyle?: React.CSSProperties;\n\n  /**\n   * Add custom CSS class names to the generated code block\n   */\n  className?: string;\n\n  /**\n   * Add custom CSS class names to the language label\n   */\n  langClassName?: string;\n\n  /**\n   * Whether to show the language label\n   * @default true\n   */\n  showLanguage?: boolean;\n\n  /**\n   * Whether to show line numbers\n   * @default false\n   */\n  showLineNumbers?: boolean;\n\n  /**\n   * Starting line number (when showLineNumbers is true)\n   * @default 1\n   */\n  startingLineNumber?: number;\n\n  /**\n   * The HTML element that wraps the generated code block.\n   * @default 'div'\n   */\n  as?: React.ElementType;\n}\n\n/**\n * Base ShikiHighlighter component factory.\n * This creates a component that uses the provided hook implementation.\n */\nexport const createShikiHighlighterComponent = (\n  useShikiHighlighterImpl: UseShikiHighlighter\n) => {\n  return forwardRef<HTMLElement, ShikiHighlighterProps>(\n    (\n      {\n        language,\n        theme,\n        delay,\n        transformers,\n        defaultColor,\n        cssVariablePrefix,\n        addDefaultStyles = true,\n        style,\n        langStyle,\n        className,\n        langClassName,\n        showLanguage = true,\n        showLineNumbers = false,\n        startingLineNumber = 1,\n        children: code,\n        as: Element = 'div',\n        customLanguages,\n        preloadLanguages,\n        ...shikiOptions\n      },\n      ref\n    ) => {\n      // Destructure some options for use in hook\n      const options: HighlighterOptions = {\n        delay,\n        transformers,\n        customLanguages,\n        preloadLanguages,\n        showLineNumbers,\n        defaultColor,\n        cssVariablePrefix,\n        startingLineNumber,\n        ...shikiOptions,\n      };\n\n      const displayLanguageId =\n        typeof language === 'object'\n          ? language.name || null\n          : language?.trim() || null;\n\n      const highlightedCode = useShikiHighlighterImpl(\n        code,\n        language,\n        theme,\n        options\n      );\n\n      return (\n        <Element\n          ref={ref}\n          data-testid=\"shiki-container\"\n          data-slot=\"container\"\n          className={clsx(\n            'rs-root',\n            'not-prose',\n            addDefaultStyles && 'rs-default-styles',\n            className\n          )}\n          style={style}\n        >\n          {showLanguage && displayLanguageId ? (\n            <span\n              id=\"language-label\"\n              data-slot=\"language-label\"\n              className={clsx('rs-language-label', langClassName)}\n              style={langStyle}\n            >\n              {displayLanguageId}\n            </span>\n          ) : null}\n          {typeof highlightedCode === 'string' ? (\n            <div\n              data-slot=\"content\"\n              dangerouslySetInnerHTML={{ __html: highlightedCode }}\n            />\n          ) : (\n            highlightedCode\n          )}\n        </Element>\n      );\n    }\n  );\n};\n"],"mappings":";;;;;;;;;;;;AASA,MAAa,kBAAqB,UAAgB;CAChD,MAAM,MAAM,OAAO,MAAM;AAEzB,KAAI,UAAU,IAAI,WAAW,CAAC,OAAO,OAAO,IAAI,QAAQ,CACtD,KAAI,UAAU;AAGhB,QAAO,IAAI;;;;;;;;;;;;;AAcb,MAAa,wBACX,kBACA,gBACA,eACG;AACH,cAAa,eAAe,QAAQ,UAAU;CAE9C,MAAM,QAAQ,KAAK,IACjB,GACA,eAAe,QAAQ,kBAAkB,KAAK,KAAK,CACpD;AACD,gBAAe,QAAQ,YAAY,iBAAiB;AAClD,oBAAkB;AAClB,iBAAe,QAAQ,kBAAkB,KAAK,KAAK,GAAG;IACrD,MAAM;;;;AClCX,MAAa,oBAAoB;AAEjC,MAAa,wBACX,MACA,YACA,gBACoB;CACpB,MAAM,UACJ,YAAY,qBAAqB;AACnC,QAAO,uBAAuB,MAAM,WAAW,CAAC,SAC7C,aAAa,QAAQ,aAAa,EAAE,CACtC;;AAWH,MAAM,WAAc,UAClB,SAAS,OAAO,EAAE,GAAG,MAAM,QAAQ,MAAM,GAAG,QAAQ,CAAC,MAAM;AAE7D,MAAM,eAAe,SAAkC;AACrD,KAAI,QAAQ,KAAM,QAAO;AACzB,KAAI,OAAO,SAAS,SAAU,QAAO,KAAK;AAC1C,QAAO,KAAK,KAAK,KAAK,IAAI,KAAK;;AAGjC,MAAM,mBAAmB,UAAkC;CACzD,MAAM,uBAAO,IAAI,KAAa;CAC9B,MAAM,UAAsB,EAAE;AAE9B,MAAK,MAAM,QAAQ,OAAO;EACxB,MAAM,MAAM,YAAY,KAAK;AAC7B,MAAI,OAAO,QAAQ,KAAK,IAAI,IAAI,CAAE;AAClC,OAAK,IAAI,IAAI;AACb,UAAQ,KAAK,KAAK;;AAGpB,QAAO;;;;;;AAOT,MAAa,sBACX,MACA,qBACkC;AAClC,KAAI,QAAQ,KAAM,QAAO;AACzB,KAAI,OAAO,SAAS,SAAU,QAAO,QAAQ;AAC7C,QACE,OAAO,KAAK,SAAS,YAAY,OAAO,KAAK,cAAc;;;;;;AAQ/D,MAAa,yBACX,YACA,oBAEA,cAAc,WAAW,IAAI,gBAAgB,SAAS,WAAW,GAC7D,aACA;;;;;;;;;AAUN,MAAa,mBACX,MACA,iBACA,aACA,qBACmB;CACnB,MAAM,cAAc,QAAQ,gBAAgB;CAC5C,MAAM,eAAe,QAAQ,iBAAiB;CAC9C,MAAM,kBAAkB,CAAC,GAAG,aAAa,GAAG,aAAa;CACzD,IAAI,aAAa;CACjB,IAAI;AAGJ,KAAI,QAAQ,QAAS,OAAO,SAAS,YAAY,CAAC,KAAK,MAAM,CAC3D,QAAO;EACL;EACA,aAAa,gBAAgB,CAAC,GAAG,cAAc,GAAG,YAAY,CAAC;EAChE;AAIH,KAAI,OAAO,SAAS,UAAU;AAC5B,eAAa,KAAK;AAClB,gBAAc;QACT;EAEL,MAAM,YAAY,KAAK,aAAa;EACpC,MAAM,WAAW,QACf,KAAK,aAAa,KAAK;EAGzB,MAAM,cAAc,gBAAgB,MACjC,cACC,OAAO,cAAc,YACrB,aAAa,QACb,CAAC,EACC,QAAQ,UAAU,KAAK,IACvB,QAAQ,UAAU,UAAU,IAC5B,QAAQ,UAAU,WAAW,MAAM,IAAI,CAAC,KAAK,CAAC,IAC9C,UAAU,SAAS,KAAK,QAAQ,IAChC,UAAU,WAAW,KAAK,QAAQ,EAEvC;AAED,MAAI,aAAa;AACf,gBAAa,YAAY,QAAQ;AACjC,iBAAc;aACL,cAAc,OAAO;AAE9B,gBAAa,YAAY;AACzB,iBAAc,YAAY;SACrB;AAEL,gBAAa;AACb,iBAAc;;;AAIlB,QAAO;EACL;EACA,aAAa,gBAAgB;GAC3B;GACA,GAAG;GACH,GAAG;GACJ,CAAC;EACH;;;;ACxJH,MAAa,iBAAyB;CACpC,OAAO;CACP,MAAM;CACP;AAMD,MAAM,mBACJ,UACkC;AAClC,KAAI,OAAO,UAAU,YAAY,UAAU,KAAM,QAAO;CACxD,MAAM,IAAI;CAGV,MAAM,YACJ,MAAM,QAAQ,EAAE,YAAY,IAAI,MAAM,QAAQ,EAAE,SAAS;CAC3D,MAAM,cACJ,OAAO,EAAE,SAAS,YAAY,OAAO,EAAE,SAAS;AAClD,QAAO,aAAa;;AAGtB,SAAgB,aAAa,YAA2C;AACtE,KACE,OAAO,eAAe,YACtB,eAAe,QACf,gBAAgB,WAAW,CAE3B,QAAO;EACL,SAAS;EACT,OAAO;EACP,cAAc,CAAC,WAAW;EAC3B;CAGH,MAAM,eAAe,OAAO,QAAQ,WAAW,CAAC,QAC7C,CAAC,KAAK,WACL,IAAI,MAAM,KAAK,OACb,OAAO,UAAU,YAAY,MAAM,MAAM,KAAK,MAC9C,gBAAgB,MAAM,EAC3B;AAED,KAAI,aAAa,WAAW,GAAG;AAC7B,UAAQ,KACN,qEACD;AACD,SAAO;GACL,SAAS;GACT,QAAQ;GACR,cAAc,OAAO,OAAO,eAAe;GAC5C;;AAGH,KAAI,aAAa,WAAW,OAAO,KAAK,WAAW,CAAC,OAClD,SAAQ,KACN,gFACD;AAIH,QAAO;EACL,SAAS;EACT,QAHa,OAAO,YAAY,aAG1B;EACN,cAAc,aAAa,KAAK,GAAG,WAAW,MAAe;EAC9D;;;;;;;;AC9DH,SAAgB,uBAAuB,YAAY,GAAqB;AACtE,QAAO;EACL,MAAM;EACN,KAAK,MAAM;AACT,QAAK,eAAe,MAAM,mBAAmB;AAC7C,QAAK,eAAe,MAAM,sBAAsB;AAChD,OAAI,cAAc,GAAG;IACnB,MAAM,gBAAiB,KAAK,YAAY,SAAoB;IAC5D,MAAM,WAAW,gBACb,GAAG,cAAc,kBAAkB,cACnC,iBAAiB;AACrB,SAAK,aAAa;KAChB,GAAG,KAAK;KACR,OAAO;KACR;;;EAGL,KAAK,MAAM;AACT,QAAK,eAAe,MAAM,eAAe;AACzC,QAAK,eAAe,MAAM,iBAAiB;AAC3C,UAAO;;EAEV;;;;ACjBH,MAAM,qBACJ,eACA,cACA,sBAG0C;AAC1C,KAAI,cAAc,QAChB,QAAO;EACL,QAAQ,cAAc;EACtB;EACA;EACD;AAGH,QAAO,EACL,OAAO,cAAc,OACtB;;AAGH,MAAa,qBACX,YACA,eACA,YACsB;CACtB,MAAM,EACJ,OACA,iBACA,kBACA,cACA,aACA,WACA,QACA,cACA,mBACA,iBACA,oBACA,cAAc,kBACd,GAAG,qBACD;CAEJ,MAAM,eAAe,CAAC,GAAI,oBAAoB,EAAE,CAAE;AAClD,KAAI,gBACF,cAAa,KAAK,uBAAuB,mBAAmB,CAAC;AAG/D,QAAO;EACL,MAAM;EACN,GAAG,kBAAkB,eAAe,cAAc,kBAAkB;EACpE,GAAG;EACH;EACD;;;;ACtCH,eAAsB,UACpB,MACA,UAMA,MAIA,SACA;CACA,MAAM,EAAE,YAAY,aAAa,cAAc,iBAC7C;CAEF,MAAM,cACJ,KAAK,eACJ,OAAO,YAAY;EAClB,MAAM,KAAK,MAAM,QAAQ,aAAa,cAAc,KAAK,OAAO;AAChE,QAAM,GAAG,aACP,GAAG,qBAAqB,MAAM,YAAY,GAAG,CAC9C;AACD,SAAO;KACL;CAEN,MAAM,WAAW,sBACf,YACA,YAAY,oBAAoB,CACjC;CACD,MAAM,UAAU;EAAE,GAAG;EAAc,MAAM;EAAU;AAEnD,QAAO,KAAK,iBAAiB,SACzB,YAAY,WAAW,MAAM,QAAQ,GACrC,aAAa,YAAY,WAAW,MAAM,QAAQ,EAAE;EAClD;EACA;EACA;EACD,CAAC;;AAGR,MAAa,gBACX,MACA,MACA,YACA,UAA8B,EAAE,EAChC,uBACG;CACH,MAAM,CAAC,iBAAiB,sBACtB,SAA0B,KAAK;CAEjC,MAAM,aAAa,eAAe,KAAK;CACvC,MAAM,cAAc,eAAe,WAAW;CAC9C,MAAM,aAAa,eAAe,QAAQ;CAE1C,MAAM,WAAW,cAAc;EAC7B,MAAM,EAAE,YAAY,gBAAgB,gBAClC,YACA,WAAW,iBACX,WAAW,WACX,WAAW,iBACZ;EAED,MAAM,QAAQ,aAAa,YAAY;EAEvC,MAAM,eAAe,kBAAkB,YAAY,OAAO,WAAW;AACrE,SAAO;GACL;GACA;GACA,cAAc,MAAM;GACpB;GACD;IACA;EAAC;EAAY;EAAa;EAAW,CAAC;CAEzC,MAAM,eAAe,OAAO,EAAE;CAE9B,MAAM,iBAAiB,OAAqB;EAC1C,iBAAiB;EACjB,WAAW,KAAA;EACZ,CAAC;AAEF,iBAAgB;EACd,MAAM,YAAY,EAAE,aAAa;AAEjC,MAAI,CAAC,SAAS,WAAY;EAE1B,MAAM,MAAM,YAAY;AACtB,OAAI;IACF,MAAM,SAAS,MAAM,UACnB,MACA,UACA,YACA,mBACD;AACD,QAAI,cAAc,aAAa,QAC7B,oBAAmB,OAAO;YAErB,OAAO;AACd,YAAQ,MAAM,kCAAkC,MAAM;;;AAI1D,MAAI,WAAW,MACb,sBAAqB,KAAK,gBAAgB,WAAW,MAAM;MAE3D,MAAK;AAGP,eAAa;AACX,gBAAa,eAAe,QAAQ,UAAU;;IAE/C;EAAC;EAAM;EAAU;EAAY;EAAmB,CAAC;AAEpD,QAAO;;;;;;;;;;;;;;AC5HT,SAAgB,2BAA2B;AACzC,SAAQ,SAA0B;AAChC,QAAM,MAAM,YAAY,MAAe,QAAQ,WAAW;AACxD,OACE,KAAK,YAAY,UACjB,QAAQ,SAAS,aACjB,OAAO,YAAY,MAEnB,MAAK,WAAW,SAAS;IAE3B;;;;;;;;;AAUN,MAAa,gBAAgB,SAA2B;AAMtD,QAAO,EALc,KAAK,YAAY,EAAE,EACrC,QAAQ,UAAU,MAAM,SAAS,OAAO,CACxC,KAAK,UAAU,MAAM,MAAM,CAC3B,KAAK,GAEW,CAAC,SAAS,KAAK;;;;;;;;AC2DpC,MAAa,mCACX,4BACG;AACH,QAAO,YAEH,EACE,UACA,OACA,OACA,cACA,cACA,mBACA,mBAAmB,MACnB,OACA,WACA,WACA,eACA,eAAe,MACf,kBAAkB,OAClB,qBAAqB,GACrB,UAAU,MACV,IAAI,UAAU,OACd,iBACA,kBACA,GAAG,gBAEL,QACG;EAEH,MAAM,UAA8B;GAClC;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,GAAG;GACJ;EAED,MAAM,oBACJ,OAAO,aAAa,WAChB,SAAS,QAAQ,OACjB,UAAU,MAAM,IAAI;EAE1B,MAAM,kBAAkB,wBACtB,MACA,UACA,OACA,QACD;AAED,SACE,qBAAC,SAAD;GACO;GACL,eAAY;GACZ,aAAU;GACV,WAAW,KACT,WACA,aACA,oBAAoB,qBACpB,UACD;GACM;aAVT,CAYG,gBAAgB,oBACf,oBAAC,QAAD;IACE,IAAG;IACH,aAAU;IACV,WAAW,KAAK,qBAAqB,cAAc;IACnD,OAAO;cAEN;IACI,CAAA,GACL,MACH,OAAO,oBAAoB,WAC1B,oBAAC,OAAD;IACE,aAAU;IACV,yBAAyB,EAAE,QAAQ,iBAAiB;IACpD,CAAA,GAEF,gBAEM;;GAGf"}