@intlayer/design-system 9.2.0 → 9.3.1

package/dist/esm/components/IDE/CodeBlockShiki.mjs

@@ -1,97 +1,36 @@
 'use client';
 
 import { CodeDefault } from "./CodeBlockClient.mjs";
+import { resolveCodeLanguage } from "./shikiLanguages.mjs";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/IDE/CodeBlockShiki.tsx
 const languageCache = /* @__PURE__ */ new Map();
 const themeCache = /* @__PURE__ */ new Map();
-const loadLanguage = async (lang) => {
-	if (languageCache.has(lang)) return languageCache.get(lang);
-	let languageModule;
-	switch (lang) {
-		case "angular-html":
-			languageModule = await import("shiki/langs/angular-html.mjs");
-			break;
-		case "angular-ts":
-			languageModule = await import("shiki/langs/angular-ts.mjs");
-			break;
-		case "astro":
-			languageModule = await import("shiki/langs/astro.mjs");
-			break;
-		case "typescript":
-		case "ts":
-			languageModule = await import("shiki/langs/typescript.mjs");
-			break;
-		case "javascript":
-		case "js":
-		case "cjs":
-		case "mjs":
-			languageModule = await import("shiki/langs/javascript.mjs");
-			break;
-		case "bash":
-		case "sh":
-		case "shell":
-			languageModule = await import("shiki/langs/bash.mjs");
-			break;
-		case "json":
-			languageModule = await import("shiki/langs/json.mjs");
-			break;
-		case "jsonc":
-		case "json5":
-			languageModule = await import("shiki/langs/json5.mjs");
-			break;
-		case "tsx":
-		case "jsx":
-			languageModule = await import("shiki/langs/tsx.mjs");
-			break;
-		case "vue":
-			languageModule = await import("shiki/langs/vue.mjs");
-			break;
-		case "svelte":
-			languageModule = await import("shiki/langs/svelte.mjs");
-			break;
-		case "markdown":
-		case "md":
-		case "mdx":
-			languageModule = await import("shiki/langs/markdown.mjs");
-			break;
-		case "css":
-			languageModule = await import("shiki/langs/css.mjs");
-			break;
-		case "html":
-			languageModule = await import("shiki/langs/html.mjs");
-			break;
-		case "xml":
-			languageModule = await import("shiki/langs/xml.mjs");
-			break;
-		case "yml":
-		case "yaml":
-			languageModule = await import("shiki/langs/yaml.mjs");
-			break;
-		default:
-			languageModule = await import("shiki/langs/typescript.mjs");
-			break;
-	}
-	const language = languageModule.default;
-	languageCache.set(lang, language);
-	return language;
+/**
+* Lazy load the grammar of an already resolved language.
+*
+* @returns The grammar registrations, or `null` for languages Shiki renders
+* without a grammar (plain text).
+*/
+const loadLanguage = async ({ id, loadGrammar }) => {
+	if (!loadGrammar) return null;
+	const cachedLanguage = languageCache.get(id);
+	if (cachedLanguage) return cachedLanguage;
+	const languagePromise = loadGrammar().then((module) => module.default);
+	languageCache.set(id, languagePromise);
+	return languagePromise;
 };
+/**
+* Lazy load a theme module.
+*/
 const loadTheme = async (themeName) => {
-	if (themeCache.has(themeName)) return themeCache.get(themeName);
-	let themeModule;
-	switch (themeName) {
-		case "github-dark":
-			themeModule = await import("shiki/themes/github-dark.mjs");
-			break;
-		default:
-			themeModule = await import("shiki/themes/github-light.mjs");
-			break;
-	}
-	const theme = themeModule.default;
-	themeCache.set(themeName, theme);
-	return theme;
+	const cachedTheme = themeCache.get(themeName);
+	if (cachedTheme) return cachedTheme;
+	const themePromise = (themeName === "github-dark" ? import("shiki/themes/github-dark.mjs") : import("shiki/themes/github-light.mjs")).then((module) => module.default);
+	themeCache.set(themeName, themePromise);
+	return themePromise;
 };
 let highlighterPromise = null;
 const getHighlighterInstance = async () => {
@@ -101,17 +40,24 @@ const getHighlighterInstance = async () => {
 	}));
 	return highlighterPromise;
 };
+/**
+* Highlight a snippet, lazily loading only the grammar and theme it needs.
+*
+* The language is resolved to a canonical Shiki id first, so that the id passed
+* to `codeToHtml` always matches the grammar that was loaded.
+*/
 const highlightCode = async (code, lang, isDarkMode) => {
 	const themeName = isDarkMode ? "github-dark" : "github-light";
+	const resolvedLanguage = resolveCodeLanguage(lang);
 	const [highlighter, languageModule, themeModule] = await Promise.all([
 		getHighlighterInstance(),
-		loadLanguage(lang),
+		loadLanguage(resolvedLanguage),
 		loadTheme(themeName)
 	]);
-	if (!highlighter.getLoadedLanguages().includes(lang)) await highlighter.loadLanguage(languageModule);
+	if (languageModule && !highlighter.getLoadedLanguages().includes(resolvedLanguage.id)) await highlighter.loadLanguage(languageModule);
 	if (!highlighter.getLoadedThemes().includes(themeName)) await highlighter.loadTheme(themeModule);
 	return highlighter.codeToHtml(String(code), {
-		lang,
+		lang: resolvedLanguage.id,
 		theme: themeName
 	});
 };

package/dist/esm/components/IDE/CodeBlockShiki.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockShiki.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type ReactNode, useEffect, useState } from 'react';\nimport type {\n  BundledLanguage,\n  BundledTheme,\n  HighlighterGeneric,\n} from 'shiki/bundle/web';\nimport { CodeDefault } from './CodeBlockClient';\n\n// Map of loaded modules to avoid re-importing\nconst languageCache = new Map<BundledLanguage, any>();\nconst themeCache = new Map<BundledTheme, any>();\n\n// Lazy load language modules\nconst loadLanguage = async (lang: BundledLanguage): Promise<any> => {\n  if (languageCache.has(lang)) return languageCache.get(lang);\n\n  let languageModule: any;\n  switch (lang) {\n    case 'angular-html':\n      languageModule = await import('shiki/langs/angular-html.mjs');\n      break;\n    case 'angular-ts':\n      languageModule = await import('shiki/langs/angular-ts.mjs');\n      break;\n    case 'astro':\n      languageModule = await import('shiki/langs/astro.mjs');\n      break;\n    case 'typescript':\n    case 'ts':\n      languageModule = await import('shiki/langs/typescript.mjs');\n      break;\n    case 'javascript':\n    case 'js':\n    case 'cjs':\n    case 'mjs':\n      languageModule = await import('shiki/langs/javascript.mjs');\n      break;\n    case 'bash':\n    case 'sh':\n    case 'shell':\n      languageModule = await import('shiki/langs/bash.mjs');\n      break;\n    case 'json':\n      languageModule = await import('shiki/langs/json.mjs');\n      break;\n    case 'jsonc':\n    case 'json5':\n      languageModule = await import('shiki/langs/json5.mjs');\n      break;\n    case 'tsx':\n    case 'jsx':\n      languageModule = await import('shiki/langs/tsx.mjs');\n      break;\n    case 'vue':\n      languageModule = await import('shiki/langs/vue.mjs');\n      break;\n    case 'svelte':\n      languageModule = await import('shiki/langs/svelte.mjs');\n      break;\n    case 'markdown':\n    case 'md':\n    case 'mdx':\n      languageModule = await import('shiki/langs/markdown.mjs');\n      break;\n    case 'css':\n      languageModule = await import('shiki/langs/css.mjs');\n      break;\n    case 'html':\n      languageModule = await import('shiki/langs/html.mjs');\n      break;\n    case 'xml':\n      languageModule = await import('shiki/langs/xml.mjs');\n      break;\n    case 'yml':\n    case 'yaml':\n      languageModule = await import('shiki/langs/yaml.mjs');\n      break;\n    default:\n      languageModule = await import('shiki/langs/typescript.mjs');\n      break;\n  }\n\n  const language = languageModule.default;\n  languageCache.set(lang, language);\n  return language;\n};\n\n// Lazy load theme modules\nconst loadTheme = async (themeName: BundledTheme): Promise<any> => {\n  if (themeCache.has(themeName)) return themeCache.get(themeName);\n\n  let themeModule: any;\n  switch (themeName) {\n    case 'github-dark':\n      themeModule = await import('shiki/themes/github-dark.mjs');\n      break;\n    default:\n      themeModule = await import('shiki/themes/github-light.mjs');\n      break;\n  }\n\n  const theme = themeModule.default;\n  themeCache.set(themeName, theme);\n  return theme;\n};\n\n// Singleton Highlighter Instance\nlet highlighterPromise: Promise<HighlighterGeneric<any, any>> | null = null;\n\nconst getHighlighterInstance = async () => {\n  if (!highlighterPromise) {\n    highlighterPromise = import('shiki/bundle/web').then(\n      ({ createHighlighter }) =>\n        createHighlighter({\n          langs: [],\n          themes: [],\n        })\n    );\n  }\n  return highlighterPromise;\n};\n\n// Create a promise for highlighting\nconst highlightCode = async (\n  code: any,\n  lang: BundledLanguage,\n  isDarkMode?: boolean\n): Promise<string> => {\n  const themeName: BundledTheme = isDarkMode ? 'github-dark' : 'github-light';\n\n  // Load highlighter, language, and theme in parallel\n  const [highlighter, languageModule, themeModule] = await Promise.all([\n    getHighlighterInstance(),\n    loadLanguage(lang),\n    loadTheme(themeName),\n  ]);\n\n  // Load into the singleton instance if not already loaded\n  if (!highlighter.getLoadedLanguages().includes(lang)) {\n    await highlighter.loadLanguage(languageModule);\n  }\n  if (!highlighter.getLoadedThemes().includes(themeName)) {\n    await highlighter.loadTheme(themeModule);\n  }\n\n  return highlighter.codeToHtml(String(code), {\n    lang,\n    theme: themeName,\n  });\n};\n\nexport type CodeBlockShikiProps = {\n  children: ReactNode;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n};\n\nexport const CodeBlockShiki: FC<CodeBlockShikiProps> = ({\n  children,\n  lang,\n  isDarkMode,\n}) => {\n  const [html, setHtml] = useState<string | null>(null);\n\n  useEffect(() => {\n    let isCancelled = false;\n\n    highlightCode(children, lang, isDarkMode)\n      .then((result) => {\n        if (!isCancelled) setHtml(result);\n      })\n      .catch((error) => {\n        console.error('Failed to highlight code:', error);\n        if (!isCancelled && html === null) setHtml('');\n      });\n\n    return () => {\n      isCancelled = true;\n    };\n  }, [children, lang, isDarkMode]);\n\n  return (\n    <div className=\"[&_pre.shiki]:!bg-transparent min-w-0 max-w-full overflow-auto bg-transparent [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_pre.shiki]:max-w-full [&_pre.shiki]:overflow-x-auto [&_pre::-webkit-scrollbar]:hidden [&_pre]:[-ms-overflow-style:none] [&_pre]:[scrollbar-width:none]\">\n      {html ? (\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML for code highlighting\n        <div dangerouslySetInnerHTML={{ __html: html }} />\n      ) : (\n        <CodeDefault>{children}</CodeDefault>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CodeBlockShiki.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type ReactNode, useEffect, useState } from 'react';\nimport type { BundledTheme } from 'shiki/bundle/web';\nimport { CodeDefault } from './CodeBlockClient';\nimport {\n  type CodeLanguage,\n  type LanguageGrammar,\n  type ResolvedCodeLanguage,\n  resolveCodeLanguage,\n} from './shikiLanguages';\n\n/** Theme registration, as default-exported by the `shiki/themes/*` modules. */\ntype ThemeRegistration =\n  typeof import('shiki/themes/github-dark.mjs')['default'];\n\n/** Minimal Shiki highlighter surface used here, with unrestricted language ids. */\ntype CodeHighlighter = {\n  getLoadedLanguages(): string[];\n  getLoadedThemes(): string[];\n  loadLanguage(grammar: LanguageGrammar): Promise<void>;\n  loadTheme(theme: ThemeRegistration): Promise<void>;\n  codeToHtml(code: string, options: { lang: string; theme: string }): string;\n};\n\n// Map of in-flight/loaded modules to avoid re-importing\nconst languageCache = new Map<string, Promise<LanguageGrammar>>();\nconst themeCache = new Map<BundledTheme, Promise<ThemeRegistration>>();\n\n/**\n * Lazy load the grammar of an already resolved language.\n *\n * @returns The grammar registrations, or `null` for languages Shiki renders\n * without a grammar (plain text).\n */\nconst loadLanguage = async ({\n  id,\n  loadGrammar,\n}: ResolvedCodeLanguage): Promise<LanguageGrammar | null> => {\n  if (!loadGrammar) return null;\n\n  const cachedLanguage = languageCache.get(id);\n  if (cachedLanguage) return cachedLanguage;\n\n  const languagePromise = loadGrammar().then((module) => module.default);\n  languageCache.set(id, languagePromise);\n\n  return languagePromise;\n};\n\n/**\n * Lazy load a theme module.\n */\nconst loadTheme = async (\n  themeName: BundledTheme\n): Promise<ThemeRegistration> => {\n  const cachedTheme = themeCache.get(themeName);\n  if (cachedTheme) return cachedTheme;\n\n  const themePromise = (\n    themeName === 'github-dark'\n      ? import('shiki/themes/github-dark.mjs')\n      : import('shiki/themes/github-light.mjs')\n  ).then((module) => module.default);\n\n  themeCache.set(themeName, themePromise);\n\n  return themePromise;\n};\n\n// Singleton Highlighter Instance\nlet highlighterPromise: Promise<CodeHighlighter> | null = null;\n\nconst getHighlighterInstance = async () => {\n  if (!highlighterPromise) {\n    highlighterPromise = import('shiki/bundle/web').then(\n      ({ createHighlighter }) =>\n        createHighlighter({\n          langs: [],\n          themes: [],\n        })\n    );\n  }\n  return highlighterPromise;\n};\n\n/**\n * Highlight a snippet, lazily loading only the grammar and theme it needs.\n *\n * The language is resolved to a canonical Shiki id first, so that the id passed\n * to `codeToHtml` always matches the grammar that was loaded.\n */\nconst highlightCode = async (\n  code: ReactNode,\n  lang: CodeLanguage,\n  isDarkMode?: boolean\n): Promise<string> => {\n  const themeName: BundledTheme = isDarkMode ? 'github-dark' : 'github-light';\n  const resolvedLanguage = resolveCodeLanguage(lang);\n\n  // Load highlighter, language, and theme in parallel\n  const [highlighter, languageModule, themeModule] = await Promise.all([\n    getHighlighterInstance(),\n    loadLanguage(resolvedLanguage),\n    loadTheme(themeName),\n  ]);\n\n  // Load into the singleton instance if not already loaded\n  if (\n    languageModule &&\n    !highlighter.getLoadedLanguages().includes(resolvedLanguage.id)\n  ) {\n    await highlighter.loadLanguage(languageModule);\n  }\n  if (!highlighter.getLoadedThemes().includes(themeName)) {\n    await highlighter.loadTheme(themeModule);\n  }\n\n  return highlighter.codeToHtml(String(code), {\n    lang: resolvedLanguage.id,\n    theme: themeName,\n  });\n};\n\nexport type CodeBlockShikiProps = {\n  children: ReactNode;\n  lang: CodeLanguage;\n  isDarkMode?: boolean;\n};\n\nexport const CodeBlockShiki: FC<CodeBlockShikiProps> = ({\n  children,\n  lang,\n  isDarkMode,\n}) => {\n  const [html, setHtml] = useState<string | null>(null);\n\n  useEffect(() => {\n    let isCancelled = false;\n\n    highlightCode(children, lang, isDarkMode)\n      .then((result) => {\n        if (!isCancelled) setHtml(result);\n      })\n      .catch((error) => {\n        console.error('Failed to highlight code:', error);\n        if (!isCancelled && html === null) setHtml('');\n      });\n\n    return () => {\n      isCancelled = true;\n    };\n  }, [children, lang, isDarkMode]);\n\n  return (\n    <div className=\"[&_pre.shiki]:!bg-transparent min-w-0 max-w-full overflow-auto bg-transparent [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_pre.shiki]:max-w-full [&_pre.shiki]:overflow-x-auto [&_pre::-webkit-scrollbar]:hidden [&_pre]:[-ms-overflow-style:none] [&_pre]:[scrollbar-width:none]\">\n      {html ? (\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML for code highlighting\n        <div dangerouslySetInnerHTML={{ __html: html }} />\n      ) : (\n        <CodeDefault>{children}</CodeDefault>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AA0BA,MAAM,gCAAgB,IAAI,IAAsC;AAChE,MAAM,6BAAa,IAAI,IAA8C;;;;;;;AAQrE,MAAM,eAAe,OAAO,EAC1B,IACA,kBAC2D;CAC3D,IAAI,CAAC,aAAa,OAAO;CAEzB,MAAM,iBAAiB,cAAc,IAAI,EAAE;CAC3C,IAAI,gBAAgB,OAAO;CAE3B,MAAM,kBAAkB,YAAY,CAAC,CAAC,MAAM,WAAW,OAAO,OAAO;CACrE,cAAc,IAAI,IAAI,eAAe;CAErC,OAAO;AACT;;;;AAKA,MAAM,YAAY,OAChB,cAC+B;CAC/B,MAAM,cAAc,WAAW,IAAI,SAAS;CAC5C,IAAI,aAAa,OAAO;CAExB,MAAM,gBACJ,cAAc,gBACV,OAAO,kCACP,OAAO,iCAAgC,CAC3C,MAAM,WAAW,OAAO,OAAO;CAEjC,WAAW,IAAI,WAAW,YAAY;CAEtC,OAAO;AACT;AAGA,IAAI,qBAAsD;AAE1D,MAAM,yBAAyB,YAAY;CACzC,IAAI,CAAC,oBACH,qBAAqB,OAAO,mBAAmB,CAAC,MAC7C,EAAE,wBACD,kBAAkB;EAChB,OAAO,CAAC;EACR,QAAQ,CAAC;CACX,CAAC,CACL;CAEF,OAAO;AACT;;;;;;;AAQA,MAAM,gBAAgB,OACpB,MACA,MACA,eACoB;CACpB,MAAM,YAA0B,aAAa,gBAAgB;CAC7D,MAAM,mBAAmB,oBAAoB,IAAI;CAGjD,MAAM,CAAC,aAAa,gBAAgB,eAAe,MAAM,QAAQ,IAAI;EACnE,uBAAuB;EACvB,aAAa,gBAAgB;EAC7B,UAAU,SAAS;CACrB,CAAC;CAGD,IACE,kBACA,CAAC,YAAY,mBAAmB,CAAC,CAAC,SAAS,iBAAiB,EAAE,GAE9D,MAAM,YAAY,aAAa,cAAc;CAE/C,IAAI,CAAC,YAAY,gBAAgB,CAAC,CAAC,SAAS,SAAS,GACnD,MAAM,YAAY,UAAU,WAAW;CAGzC,OAAO,YAAY,WAAW,OAAO,IAAI,GAAG;EAC1C,MAAM,iBAAiB;EACvB,OAAO;CACT,CAAC;AACH;AAQA,MAAa,kBAA2C,EACtD,UACA,MACA,iBACI;CACJ,MAAM,CAAC,MAAM,WAAW,SAAwB,IAAI;CAEpD,gBAAgB;EACd,IAAI,cAAc;EAElB,cAAc,UAAU,MAAM,UAAU,CAAC,CACtC,MAAM,WAAW;GAChB,IAAI,CAAC,aAAa,QAAQ,MAAM;EAClC,CAAC,CAAC,CACD,OAAO,UAAU;GAChB,QAAQ,MAAM,6BAA6B,KAAK;GAChD,IAAI,CAAC,eAAe,SAAS,MAAM,QAAQ,EAAE;EAC/C,CAAC;EAEH,aAAa;GACX,cAAc;EAChB;CACF,GAAG;EAAC;EAAU;EAAM;CAAU,CAAC;CAE/B,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,OAEC,oBAAC,OAAD,EAAK,yBAAyB,EAAE,QAAQ,KAAK,EAAI,KAEjD,oBAAC,aAAD,EAAc,SAAsB;CAEnC;AAET"}

package/dist/esm/components/IDE/FileTree.mjs

@@ -4,8 +4,8 @@ import { cn } from "../../utils/cn.mjs";
 import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { createFileTree } from "./createFileTree.mjs";
 import { useState } from "react";
-import { ChevronRight } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
 
 //#region src/components/IDE/FileTree.tsx
 const concatFilePath = (paths) => paths.join("/");
@@ -46,9 +46,10 @@ const FileItem = ({ filesPaths, path, subPath, onClickFile, activeFile, prePaths
 	})] });
 };
 const FileTree = ({ filesPaths, activeFile, onClickFile, prePaths = [] }) => {
+	const fileTree = createFileTree(filesPaths);
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex size-full flex-col items-start justify-start py-1 text-neutral",
-		children: createFileTree(filesPaths).map(({ path, subPath, isFile }) => /* @__PURE__ */ jsx(FileItem, {
+		children: fileTree.map(({ path, subPath, isFile }) => /* @__PURE__ */ jsx(FileItem, {
 			isFile,
 			subPath,
 			path,

package/dist/esm/components/IDE/FileTree.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileTree.mjs","names":[],"sources":["../../../../src/components/IDE/FileTree.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { ChevronRight } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { createFileTree, type FilePath } from './createFileTree';\n\ntype FileTreeProps = {\n  filesPaths: string[];\n  activeFile?: string;\n  onClickFile?: (filePath: string) => void;\n  prePaths?: string[];\n};\n\nconst concatFilePath = (paths: string[]) => paths.join('/');\n\ntype FileItemProps = {\n  filesPaths: string[];\n  subPath?: FilePath[];\n  path: string;\n  onClickFile?: (title: string) => void;\n  activeFile?: string;\n  prePaths: string[];\n  isFile: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n  filesPaths,\n  path,\n  subPath,\n  onClickFile,\n  activeFile,\n  prePaths,\n  isFile,\n}) => {\n  const [subPathOpen, setSubPathOpen] = useState(true);\n\n  const level = prePaths.length + 1;\n  const currentPath = concatFilePath([\n    ...prePaths.slice(level - 1, level),\n    path,\n  ]);\n  const totalPath = concatFilePath([...prePaths, path]);\n\n  const filteredFilePaths = filesPaths\n    .map(\n      (path) => path.replace(/^\\/?/, '') // This regex matches the first slash, if it exists, at the start of the string)\n    )\n    .filter((filePath) => filePath.startsWith(currentPath));\n\n  const newPath = filteredFilePaths.map((path) =>\n    path.replace(currentPath, '').replace(/^\\/?/, '')\n  );\n\n  const isActive = totalPath === activeFile;\n\n  const indentation = new Array(level).fill('  ').join('');\n\n  return (\n    <>\n      <button\n        className={cn(\n          'flex w-full items-start justify-start whitespace-pre text-nowrap px-2 py-1 text-xs transition',\n          isActive\n            ? 'bg-neutral-200 dark:bg-neutral-800'\n            : 'cursor-pointer hover:bg-neutral-300 dark:hover:bg-neutral-900'\n        )}\n        key={path}\n        onClick={() => {\n          if (isFile) {\n            onClickFile?.(totalPath);\n          } else {\n            setSubPathOpen(!subPathOpen);\n          }\n        }}\n      >\n        <span className={cn('whitespace-pre', isFile && 'ml-2')}>\n          {indentation}\n        </span>\n\n        {!isFile && (\n          <ChevronRight\n            className={cn(`transition`, subPathOpen && `rotate-90 transform`)}\n            size={16}\n          />\n        )}\n        {path}\n      </button>\n      {subPath && (\n        <MaxHeightSmoother\n          isHidden={!subPathOpen}\n          className=\"overflow-x-hidden\"\n        >\n          <FileTree\n            filesPaths={newPath}\n            activeFile={activeFile}\n            onClickFile={onClickFile}\n            prePaths={[...prePaths, path]}\n          />\n        </MaxHeightSmoother>\n      )}\n    </>\n  );\n};\n\nexport const FileTree: FC<FileTreeProps> = ({\n  filesPaths,\n  activeFile,\n  onClickFile,\n  prePaths = [],\n}) => {\n  const fileTree = createFileTree(filesPaths);\n\n  return (\n    <div className=\"flex size-full flex-col items-start justify-start py-1 text-neutral\">\n      {fileTree.map(({ path, subPath, isFile }) => (\n        <FileItem\n          key={path}\n          isFile={isFile}\n          subPath={subPath}\n          path={path}\n          onClickFile={onClickFile}\n          activeFile={activeFile}\n          prePaths={prePaths}\n          filesPaths={filesPaths}\n        />\n      ))}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAeA,MAAM,kBAAkB,UAAoB,MAAM,KAAK,GAAG;AAY1D,MAAM,YAA+B,EACnC,YACA,MACA,SACA,aACA,YACA,UACA,aACI;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,IAAI;CAEnD,MAAM,QAAQ,SAAS,SAAS;CAChC,MAAM,cAAc,eAAe,CACjC,GAAG,SAAS,MAAM,QAAQ,GAAG,KAAK,GAClC,IACF,CAAC;CACD,MAAM,YAAY,eAAe,CAAC,GAAG,UAAU,IAAI,CAAC;CAQpD,MAAM,UANoB,WACvB,KACE,SAAS,KAAK,QAAQ,QAAQ,EAAE,CACnC,CAAC,CACA,QAAQ,aAAa,SAAS,WAAW,WAAW,CAEvB,CAAC,CAAC,KAAK,SACrC,KAAK,QAAQ,aAAa,EAAE,CAAC,CAAC,QAAQ,QAAQ,EAAE,CAClD;CAEA,MAAM,WAAW,cAAc;CAE/B,MAAM,cAAc,IAAI,MAAM,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,EAAE;CAEvD,OACE,8CACE,qBAAC,UAAD;EACE,WAAW,GACT,iGACA,WACI,uCACA,+DACN;EAEA,eAAe;GACb,IAAI,QACF,cAAc,SAAS;QAEvB,eAAe,CAAC,WAAW;EAE/B;YAdF;GAgBE,oBAAC,QAAD;IAAM,WAAW,GAAG,kBAAkB,UAAU,MAAM;cACnD;GACG;GAEL,CAAC,UACA,oBAAC,cAAD;IACE,WAAW,GAAG,cAAc,eAAe,qBAAqB;IAChE,MAAM;GACP;GAEF;EACK;IApBD,IAoBC,GACP,WACC,oBAAC,mBAAD;EACE,UAAU,CAAC;EACX,WAAU;YAEV,oBAAC,UAAD;GACE,YAAY;GACA;GACC;GACb,UAAU,CAAC,GAAG,UAAU,IAAI;EAC7B;CACgB,EAErB;AAEN;AAEA,MAAa,YAA+B,EAC1C,YACA,YACA,aACA,WAAW,CAAC,QACR;CAGJ,OACE,oBAAC,OAAD;EAAK,WAAU;YAHA,eAAe,UAIpB,CAAC,CAAC,KAAK,EAAE,MAAM,SAAS,aAC9B,oBAAC,UAAD;GAEU;GACC;GACH;GACO;GACD;GACF;GACE;EACb,GARM,IAQN,CACF;CACE;AAET"}
+{"version":3,"file":"FileTree.mjs","names":[],"sources":["../../../../src/components/IDE/FileTree.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { ChevronRight } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { createFileTree, type FilePath } from './createFileTree';\n\ntype FileTreeProps = {\n  filesPaths: string[];\n  activeFile?: string;\n  onClickFile?: (filePath: string) => void;\n  prePaths?: string[];\n};\n\nconst concatFilePath = (paths: string[]) => paths.join('/');\n\ntype FileItemProps = {\n  filesPaths: string[];\n  subPath?: FilePath[];\n  path: string;\n  onClickFile?: (title: string) => void;\n  activeFile?: string;\n  prePaths: string[];\n  isFile: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n  filesPaths,\n  path,\n  subPath,\n  onClickFile,\n  activeFile,\n  prePaths,\n  isFile,\n}) => {\n  const [subPathOpen, setSubPathOpen] = useState(true);\n\n  const level = prePaths.length + 1;\n  const currentPath = concatFilePath([\n    ...prePaths.slice(level - 1, level),\n    path,\n  ]);\n  const totalPath = concatFilePath([...prePaths, path]);\n\n  const filteredFilePaths = filesPaths\n    .map(\n      (path) => path.replace(/^\\/?/, '') // This regex matches the first slash, if it exists, at the start of the string)\n    )\n    .filter((filePath) => filePath.startsWith(currentPath));\n\n  const newPath = filteredFilePaths.map((path) =>\n    path.replace(currentPath, '').replace(/^\\/?/, '')\n  );\n\n  const isActive = totalPath === activeFile;\n\n  const indentation = new Array(level).fill('  ').join('');\n\n  return (\n    <>\n      <button\n        className={cn(\n          'flex w-full items-start justify-start whitespace-pre text-nowrap px-2 py-1 text-xs transition',\n          isActive\n            ? 'bg-neutral-200 dark:bg-neutral-800'\n            : 'cursor-pointer hover:bg-neutral-300 dark:hover:bg-neutral-900'\n        )}\n        key={path}\n        onClick={() => {\n          if (isFile) {\n            onClickFile?.(totalPath);\n          } else {\n            setSubPathOpen(!subPathOpen);\n          }\n        }}\n      >\n        <span className={cn('whitespace-pre', isFile && 'ml-2')}>\n          {indentation}\n        </span>\n\n        {!isFile && (\n          <ChevronRight\n            className={cn(`transition`, subPathOpen && `rotate-90 transform`)}\n            size={16}\n          />\n        )}\n        {path}\n      </button>\n      {subPath && (\n        <MaxHeightSmoother\n          isHidden={!subPathOpen}\n          className=\"overflow-x-hidden\"\n        >\n          <FileTree\n            filesPaths={newPath}\n            activeFile={activeFile}\n            onClickFile={onClickFile}\n            prePaths={[...prePaths, path]}\n          />\n        </MaxHeightSmoother>\n      )}\n    </>\n  );\n};\n\nexport const FileTree: FC<FileTreeProps> = ({\n  filesPaths,\n  activeFile,\n  onClickFile,\n  prePaths = [],\n}) => {\n  const fileTree = createFileTree(filesPaths);\n\n  return (\n    <div className=\"flex size-full flex-col items-start justify-start py-1 text-neutral\">\n      {fileTree.map(({ path, subPath, isFile }) => (\n        <FileItem\n          key={path}\n          isFile={isFile}\n          subPath={subPath}\n          path={path}\n          onClickFile={onClickFile}\n          activeFile={activeFile}\n          prePaths={prePaths}\n          filesPaths={filesPaths}\n        />\n      ))}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAeA,MAAM,kBAAkB,UAAoB,MAAM,KAAK,GAAG;AAY1D,MAAM,YAA+B,EACnC,YACA,MACA,SACA,aACA,YACA,UACA,aACI;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,IAAI;CAEnD,MAAM,QAAQ,SAAS,SAAS;CAChC,MAAM,cAAc,eAAe,CACjC,GAAG,SAAS,MAAM,QAAQ,GAAG,KAAK,GAClC,IACF,CAAC;CACD,MAAM,YAAY,eAAe,CAAC,GAAG,UAAU,IAAI,CAAC;CAQpD,MAAM,UANoB,WACvB,KACE,SAAS,KAAK,QAAQ,QAAQ,EAAE,CACnC,CAAC,CACA,QAAQ,aAAa,SAAS,WAAW,WAAW,CAEvB,CAAC,CAAC,KAAK,SACrC,KAAK,QAAQ,aAAa,EAAE,CAAC,CAAC,QAAQ,QAAQ,EAAE,CAClD;CAEA,MAAM,WAAW,cAAc;CAE/B,MAAM,cAAc,IAAI,MAAM,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,EAAE;CAEvD,OACE,8CACE,qBAAC,UAAD;EACE,WAAW,GACT,iGACA,WACI,uCACA,+DACN;EAEA,eAAe;GACb,IAAI,QACF,cAAc,SAAS;QAEvB,eAAe,CAAC,WAAW;EAE/B;YAdF;GAgBE,oBAAC,QAAD;IAAM,WAAW,GAAG,kBAAkB,UAAU,MAAM;cACnD;GACG;GAEL,CAAC,UACA,oBAAC,cAAD;IACE,WAAW,GAAG,cAAc,eAAe,qBAAqB;IAChE,MAAM;GACP;GAEF;EACK;IApBD,IAoBC,GACP,WACC,oBAAC,mBAAD;EACE,UAAU,CAAC;EACX,WAAU;YAEV,oBAAC,UAAD;GACE,YAAY;GACA;GACC;GACb,UAAU,CAAC,GAAG,UAAU,IAAI;EAC7B;CACgB,EAErB;AAEN;AAEA,MAAa,YAA+B,EAC1C,YACA,YACA,aACA,WAAW,CAAC,QACR;CACJ,MAAM,WAAW,eAAe,UAAU;CAE1C,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,SAAS,KAAK,EAAE,MAAM,SAAS,aAC9B,oBAAC,UAAD;GAEU;GACC;GACH;GACO;GACD;GACF;GACE;EACb,GARM,IAQN,CACF;CACE;AAET"}

package/dist/esm/components/IDE/MarkDownRender.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MarkDownRender.mjs","names":["MarkdownRendererIntlayer"],"sources":["../../../../src/components/IDE/MarkDownRender.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { MarkdownRenderer as MarkdownRendererIntlayer } from 'react-intlayer';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { Code } from './Code';\n\ntype MarkdownRendererProps = {\n  isDarkMode?: boolean;\n  children: string;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n}) => (\n  <MarkdownRendererIntlayer\n    components={{\n      code: (props) => (\n        <Code\n          {...props}\n          isDarkMode={isDarkMode}\n          language={props.className?.replace('lang-', '') as BundledLanguage}\n          showHeader={false}\n          className=\"text-xs leading-5\"\n        >\n          {props.children as string}\n        </Code>\n      ),\n      pre: (props) => props.children,\n    }}\n  >\n    {children ?? ''}\n  </MarkdownRendererIntlayer>\n);\n"],"mappings":";;;;;AAUA,MAAa,oBAA+C,EAC1D,UACA,iBAEA,oBAACA,oBAAD;CACE,YAAY;EACV,OAAO,UACL,oBAAC,MAAD;GACE,GAAI;GACQ;GACZ,UAAU,MAAM,WAAW,QAAQ,SAAS,EAAE;GAC9C,YAAY;GACZ,WAAU;aAET,MAAM;EACH;EAER,MAAM,UAAU,MAAM;CACxB;WAEC,YAAY;AACW"}
+{"version":3,"file":"MarkDownRender.mjs","names":["MarkdownRendererIntlayer"],"sources":["../../../../src/components/IDE/MarkDownRender.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { MarkdownRenderer as MarkdownRendererIntlayer } from 'react-intlayer';\nimport { Code } from './Code';\nimport type { CodeLanguage } from './shikiLanguages';\n\ntype MarkdownRendererProps = {\n  isDarkMode?: boolean;\n  children: string;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n}) => (\n  <MarkdownRendererIntlayer\n    components={{\n      code: (props) => (\n        <Code\n          {...props}\n          isDarkMode={isDarkMode}\n          language={props.className?.replace('lang-', '') as CodeLanguage}\n          showHeader={false}\n          className=\"text-xs leading-5\"\n        >\n          {props.children as string}\n        </Code>\n      ),\n      pre: (props) => props.children,\n    }}\n  >\n    {children ?? ''}\n  </MarkdownRendererIntlayer>\n);\n"],"mappings":";;;;;AAUA,MAAa,oBAA+C,EAC1D,UACA,iBAEA,oBAACA,oBAAD;CACE,YAAY;EACV,OAAO,UACL,oBAAC,MAAD;GACE,GAAI;GACQ;GACZ,UAAU,MAAM,WAAW,QAAQ,SAAS,EAAE;GAC9C,YAAY;GACZ,WAAU;aAET,MAAM;EACH;EAER,MAAM,UAAU,MAAM;CACxB;WAEC,YAAY;AACW"}

package/dist/esm/components/IDE/shikiLanguages.mjs

@@ -0,0 +1,122 @@
+//#region src/components/IDE/shikiLanguages.ts
+/**
+* Shiki grammar loaders, keyed by the canonical Shiki language id.
+*
+* Import specifiers are written as literals (never template strings) so that
+* bundlers can statically analyse them and emit one lazily fetched chunk per
+* grammar instead of bundling every language up front.
+*/
+const grammarLoaders = {
+	"angular-html": () => import("shiki/langs/angular-html.mjs"),
+	"angular-ts": () => import("shiki/langs/angular-ts.mjs"),
+	astro: () => import("shiki/langs/astro.mjs"),
+	bash: () => import("shiki/langs/bash.mjs"),
+	c: () => import("shiki/langs/c.mjs"),
+	cpp: () => import("shiki/langs/cpp.mjs"),
+	csharp: () => import("shiki/langs/csharp.mjs"),
+	css: () => import("shiki/langs/css.mjs"),
+	csv: () => import("shiki/langs/csv.mjs"),
+	dart: () => import("shiki/langs/dart.mjs"),
+	diff: () => import("shiki/langs/diff.mjs"),
+	docker: () => import("shiki/langs/docker.mjs"),
+	go: () => import("shiki/langs/go.mjs"),
+	graphql: () => import("shiki/langs/graphql.mjs"),
+	html: () => import("shiki/langs/html.mjs"),
+	http: () => import("shiki/langs/http.mjs"),
+	ini: () => import("shiki/langs/ini.mjs"),
+	java: () => import("shiki/langs/java.mjs"),
+	javascript: () => import("shiki/langs/javascript.mjs"),
+	json: () => import("shiki/langs/json.mjs"),
+	json5: () => import("shiki/langs/json5.mjs"),
+	kotlin: () => import("shiki/langs/kotlin.mjs"),
+	less: () => import("shiki/langs/less.mjs"),
+	lua: () => import("shiki/langs/lua.mjs"),
+	markdown: () => import("shiki/langs/markdown.mjs"),
+	nginx: () => import("shiki/langs/nginx.mjs"),
+	php: () => import("shiki/langs/php.mjs"),
+	powershell: () => import("shiki/langs/powershell.mjs"),
+	prisma: () => import("shiki/langs/prisma.mjs"),
+	python: () => import("shiki/langs/python.mjs"),
+	ruby: () => import("shiki/langs/ruby.mjs"),
+	rust: () => import("shiki/langs/rust.mjs"),
+	scss: () => import("shiki/langs/scss.mjs"),
+	sql: () => import("shiki/langs/sql.mjs"),
+	svelte: () => import("shiki/langs/svelte.mjs"),
+	swift: () => import("shiki/langs/swift.mjs"),
+	toml: () => import("shiki/langs/toml.mjs"),
+	tsx: () => import("shiki/langs/tsx.mjs"),
+	typescript: () => import("shiki/langs/typescript.mjs"),
+	vue: () => import("shiki/langs/vue.mjs"),
+	xml: () => import("shiki/langs/xml.mjs"),
+	yaml: () => import("shiki/langs/yaml.mjs")
+};
+/** Every canonical language id that ships with a grammar loader. */
+const shikiLanguageIds = Object.keys(grammarLoaders);
+/**
+* Code fence names that are rendered by another grammar, mapped to the
+* canonical id that actually owns the grammar.
+*/
+const grammarAliases = {
+	"c#": "csharp",
+	"c++": "cpp",
+	cjs: "javascript",
+	console: "bash",
+	cs: "csharp",
+	cts: "typescript",
+	dockerfile: "docker",
+	golang: "go",
+	gql: "graphql",
+	htm: "html",
+	js: "javascript",
+	jsonc: "json5",
+	jsx: "tsx",
+	kt: "kotlin",
+	md: "markdown",
+	mdx: "markdown",
+	mjs: "javascript",
+	mts: "typescript",
+	postcss: "css",
+	ps1: "powershell",
+	pwsh: "powershell",
+	py: "python",
+	rb: "ruby",
+	rs: "rust",
+	sh: "bash",
+	shell: "bash",
+	shellscript: "bash",
+	ts: "typescript",
+	yml: "yaml",
+	zsh: "bash"
+};
+const PLAIN_TEXT_LANGUAGE = "plaintext";
+/**
+* Resolve a code fence language name to a canonical Shiki id and its grammar
+* loader.
+*
+* Unknown names resolve to plain text rather than to an arbitrary grammar, so
+* that `codeToHtml` never receives a language it has not loaded.
+*
+* @param language - Language name coming from a code fence or a `lang` prop.
+*
+* @example
+* resolveCodeLanguage('ts'); // { id: 'typescript', loadGrammar: fn }
+* resolveCodeLanguage('toml'); // { id: 'toml', loadGrammar: fn }
+* resolveCodeLanguage('brainfuck'); // { id: 'plaintext', loadGrammar: null }
+*/
+const resolveCodeLanguage = (language) => {
+	const normalizedLanguage = (language ?? "").trim().toLowerCase();
+	const canonicalId = grammarAliases[normalizedLanguage] ?? normalizedLanguage;
+	const loadGrammar = grammarLoaders[canonicalId];
+	if (!loadGrammar) return {
+		id: PLAIN_TEXT_LANGUAGE,
+		loadGrammar: null
+	};
+	return {
+		id: canonicalId,
+		loadGrammar
+	};
+};
+
+//#endregion
+export { resolveCodeLanguage, shikiLanguageIds };
+//# sourceMappingURL=shikiLanguages.mjs.map

package/dist/esm/components/IDE/shikiLanguages.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shikiLanguages.mjs","names":[],"sources":["../../../../src/components/IDE/shikiLanguages.ts"],"sourcesContent":["/**\n * Grammar registrations, as default-exported by the `shiki/langs/*` modules.\n */\nexport type LanguageGrammar =\n  typeof import('shiki/langs/typescript.mjs')['default'];\n\n/**\n * Loads a single Shiki grammar (and its embedded dependencies).\n */\nexport type GrammarLoader = () => Promise<{ default: LanguageGrammar }>;\n\n/**\n * Shiki grammar loaders, keyed by the canonical Shiki language id.\n *\n * Import specifiers are written as literals (never template strings) so that\n * bundlers can statically analyse them and emit one lazily fetched chunk per\n * grammar instead of bundling every language up front.\n */\nconst grammarLoaders = {\n  'angular-html': () => import('shiki/langs/angular-html.mjs'),\n  'angular-ts': () => import('shiki/langs/angular-ts.mjs'),\n  astro: () => import('shiki/langs/astro.mjs'),\n  bash: () => import('shiki/langs/bash.mjs'),\n  c: () => import('shiki/langs/c.mjs'),\n  cpp: () => import('shiki/langs/cpp.mjs'),\n  csharp: () => import('shiki/langs/csharp.mjs'),\n  css: () => import('shiki/langs/css.mjs'),\n  csv: () => import('shiki/langs/csv.mjs'),\n  dart: () => import('shiki/langs/dart.mjs'),\n  diff: () => import('shiki/langs/diff.mjs'),\n  docker: () => import('shiki/langs/docker.mjs'),\n  go: () => import('shiki/langs/go.mjs'),\n  graphql: () => import('shiki/langs/graphql.mjs'),\n  html: () => import('shiki/langs/html.mjs'),\n  http: () => import('shiki/langs/http.mjs'),\n  ini: () => import('shiki/langs/ini.mjs'),\n  java: () => import('shiki/langs/java.mjs'),\n  javascript: () => import('shiki/langs/javascript.mjs'),\n  json: () => import('shiki/langs/json.mjs'),\n  json5: () => import('shiki/langs/json5.mjs'),\n  kotlin: () => import('shiki/langs/kotlin.mjs'),\n  less: () => import('shiki/langs/less.mjs'),\n  lua: () => import('shiki/langs/lua.mjs'),\n  markdown: () => import('shiki/langs/markdown.mjs'),\n  nginx: () => import('shiki/langs/nginx.mjs'),\n  php: () => import('shiki/langs/php.mjs'),\n  powershell: () => import('shiki/langs/powershell.mjs'),\n  prisma: () => import('shiki/langs/prisma.mjs'),\n  python: () => import('shiki/langs/python.mjs'),\n  ruby: () => import('shiki/langs/ruby.mjs'),\n  rust: () => import('shiki/langs/rust.mjs'),\n  scss: () => import('shiki/langs/scss.mjs'),\n  sql: () => import('shiki/langs/sql.mjs'),\n  svelte: () => import('shiki/langs/svelte.mjs'),\n  swift: () => import('shiki/langs/swift.mjs'),\n  toml: () => import('shiki/langs/toml.mjs'),\n  tsx: () => import('shiki/langs/tsx.mjs'),\n  typescript: () => import('shiki/langs/typescript.mjs'),\n  vue: () => import('shiki/langs/vue.mjs'),\n  xml: () => import('shiki/langs/xml.mjs'),\n  yaml: () => import('shiki/langs/yaml.mjs'),\n} satisfies Record<string, GrammarLoader>;\n\n/** Canonical Shiki language ids this package can highlight. */\nexport type ShikiLanguageId = keyof typeof grammarLoaders;\n\n/** Every canonical language id that ships with a grammar loader. */\nexport const shikiLanguageIds = Object.keys(\n  grammarLoaders\n) as ShikiLanguageId[];\n\n/**\n * Code fence names that are rendered by another grammar, mapped to the\n * canonical id that actually owns the grammar.\n */\nconst grammarAliases = {\n  'c#': 'csharp',\n  'c++': 'cpp',\n  cjs: 'javascript',\n  console: 'bash',\n  cs: 'csharp',\n  cts: 'typescript',\n  dockerfile: 'docker',\n  golang: 'go',\n  gql: 'graphql',\n  htm: 'html',\n  js: 'javascript',\n  jsonc: 'json5',\n  jsx: 'tsx',\n  kt: 'kotlin',\n  md: 'markdown',\n  mdx: 'markdown',\n  mjs: 'javascript',\n  mts: 'typescript',\n  postcss: 'css',\n  ps1: 'powershell',\n  pwsh: 'powershell',\n  py: 'python',\n  rb: 'ruby',\n  rs: 'rust',\n  sh: 'bash',\n  shell: 'bash',\n  shellscript: 'bash',\n  ts: 'typescript',\n  yml: 'yaml',\n  zsh: 'bash',\n} satisfies Record<string, ShikiLanguageId>;\n\n/** Code fence names accepted as aliases of a canonical language id. */\nexport type ShikiLanguageAlias = keyof typeof grammarAliases;\n\n/**\n * Languages Shiki renders without any grammar. They are also used as the\n * fallback for languages this package does not ship a grammar for.\n */\nexport type PlainTextLanguage = 'plaintext' | 'text' | 'txt';\n\nconst PLAIN_TEXT_LANGUAGE = 'plaintext' satisfies PlainTextLanguage;\n\n/** Every language name accepted by the code block components. */\nexport type CodeLanguage =\n  | ShikiLanguageId\n  | ShikiLanguageAlias\n  | PlainTextLanguage;\n\n/**\n * A language name resolved to what Shiki actually needs to highlight it.\n */\nexport type ResolvedCodeLanguage = {\n  /** Canonical language id to pass to `codeToHtml` / `codeToHast`. */\n  id: ShikiLanguageId | PlainTextLanguage;\n  /** Grammar loader, or `null` when the language needs no grammar. */\n  loadGrammar: GrammarLoader | null;\n};\n\n/**\n * Resolve a code fence language name to a canonical Shiki id and its grammar\n * loader.\n *\n * Unknown names resolve to plain text rather than to an arbitrary grammar, so\n * that `codeToHtml` never receives a language it has not loaded.\n *\n * @param language - Language name coming from a code fence or a `lang` prop.\n *\n * @example\n * resolveCodeLanguage('ts'); // { id: 'typescript', loadGrammar: fn }\n * resolveCodeLanguage('toml'); // { id: 'toml', loadGrammar: fn }\n * resolveCodeLanguage('brainfuck'); // { id: 'plaintext', loadGrammar: null }\n */\nexport const resolveCodeLanguage = (\n  language: CodeLanguage | string | undefined | null\n): ResolvedCodeLanguage => {\n  const normalizedLanguage = (language ?? '').trim().toLowerCase();\n\n  const canonicalId =\n    grammarAliases[normalizedLanguage as ShikiLanguageAlias] ??\n    (normalizedLanguage as ShikiLanguageId);\n\n  const loadGrammar = grammarLoaders[canonicalId] as GrammarLoader | undefined;\n\n  if (!loadGrammar) {\n    return { id: PLAIN_TEXT_LANGUAGE, loadGrammar: null };\n  }\n\n  return { id: canonicalId, loadGrammar };\n};\n"],"mappings":";;;;;;;;AAkBA,MAAM,iBAAiB;CACrB,sBAAsB,OAAO;CAC7B,oBAAoB,OAAO;CAC3B,aAAa,OAAO;CACpB,YAAY,OAAO;CACnB,SAAS,OAAO;CAChB,WAAW,OAAO;CAClB,cAAc,OAAO;CACrB,WAAW,OAAO;CAClB,WAAW,OAAO;CAClB,YAAY,OAAO;CACnB,YAAY,OAAO;CACnB,cAAc,OAAO;CACrB,UAAU,OAAO;CACjB,eAAe,OAAO;CACtB,YAAY,OAAO;CACnB,YAAY,OAAO;CACnB,WAAW,OAAO;CAClB,YAAY,OAAO;CACnB,kBAAkB,OAAO;CACzB,YAAY,OAAO;CACnB,aAAa,OAAO;CACpB,cAAc,OAAO;CACrB,YAAY,OAAO;CACnB,WAAW,OAAO;CAClB,gBAAgB,OAAO;CACvB,aAAa,OAAO;CACpB,WAAW,OAAO;CAClB,kBAAkB,OAAO;CACzB,cAAc,OAAO;CACrB,cAAc,OAAO;CACrB,YAAY,OAAO;CACnB,YAAY,OAAO;CACnB,YAAY,OAAO;CACnB,WAAW,OAAO;CAClB,cAAc,OAAO;CACrB,aAAa,OAAO;CACpB,YAAY,OAAO;CACnB,WAAW,OAAO;CAClB,kBAAkB,OAAO;CACzB,WAAW,OAAO;CAClB,WAAW,OAAO;CAClB,YAAY,OAAO;AACrB;;AAMA,MAAa,mBAAmB,OAAO,KACrC,cACF;;;;;AAMA,MAAM,iBAAiB;CACrB,MAAM;CACN,OAAO;CACP,KAAK;CACL,SAAS;CACT,IAAI;CACJ,KAAK;CACL,YAAY;CACZ,QAAQ;CACR,KAAK;CACL,KAAK;CACL,IAAI;CACJ,OAAO;CACP,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,KAAK;CACL,KAAK;CACL,KAAK;CACL,SAAS;CACT,KAAK;CACL,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,aAAa;CACb,IAAI;CACJ,KAAK;CACL,KAAK;AACP;AAWA,MAAM,sBAAsB;;;;;;;;;;;;;;;AAgC5B,MAAa,uBACX,aACyB;CACzB,MAAM,sBAAsB,YAAY,GAAE,CAAE,KAAK,CAAC,CAAC,YAAY;CAE/D,MAAM,cACJ,eAAe,uBACd;CAEH,MAAM,cAAc,eAAe;CAEnC,IAAI,CAAC,aACH,OAAO;EAAE,IAAI;EAAqB,aAAa;CAAK;CAGtD,OAAO;EAAE,IAAI;EAAa;CAAY;AACxC"}

package/dist/esm/components/Input/Checkbox.mjs

@@ -1,6 +1,6 @@
 import { cn } from "../../utils/cn.mjs";
-import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
 
 //#region src/components/Input/Checkbox.tsx
 const checkboxVariants = cva([

package/dist/esm/components/Input/Input.mjs

@@ -1,5 +1,5 @@
-import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
 
 //#region src/components/Input/Input.tsx
 const cn = (...classes) => classes.filter(Boolean).join(" ");

package/dist/esm/components/Input/InputPassword.mjs

@@ -2,8 +2,8 @@
 
 import { Input } from "./Input.mjs";
 import { useState } from "react";
-import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
 
 //#region src/components/Input/InputPassword.tsx
 const InputPassword = (props) => {

package/dist/esm/components/Input/OTPInput.mjs

@@ -3,9 +3,9 @@
 import { cn } from "../../utils/cn.mjs";
 import { Button } from "../Button/Button.mjs";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { MinusIcon } from "lucide-react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Input/OTPInput.tsx
 /**
@@ -201,9 +201,10 @@ const OTPInput = ({ value: uncheckedValue, onChange: uncheckedOnChange, maxLengt
 			const finalSelectionStart = calculatedStart !== -1 ? calculatedStart : selectionStart;
 			const finalSelectionEnd = calculatedEnd !== -1 ? calculatedEnd : selectionEnd;
 			const finalDirection = calculatedDirection;
-			if (selectionStart !== null && selectionEnd !== null) if (selectionStart === selectionEnd) setActualCaretPosition(selectionStart);
-			else setActualCaretPosition(finalSelectionStart);
-			else setActualCaretPosition(null);
+			if (selectionStart !== null && selectionEnd !== null) {
+				if (selectionStart === selectionEnd) setActualCaretPosition(selectionStart);
+				else setActualCaretPosition(finalSelectionStart);
+			} else setActualCaretPosition(null);
 			setMirrorSelectionStart(finalSelectionStart);
 			setMirrorSelectionEnd(finalSelectionEnd);
 			inputMetadataRef.current.prev = [