@krak-stack/registry 0.1.19 → 0.1.21

package/dist/components/ui/code-block.d.ts

@@ -1,4 +1,3 @@
-import type { HighlighterCore } from "shiki/core";
 type CodeBlockMessages = {
     copy?: string;
     copied?: string;
@@ -6,9 +5,8 @@ type CodeBlockMessages = {
 };
 type CodeBlockProps = {
     code: string;
-    highlighter: HighlighterCore;
     language?: string;
     messages?: CodeBlockMessages;
 };
-export declare function CodeBlock({ code, highlighter, language, messages, }: CodeBlockProps): import("react").JSX.Element;
+export declare function CodeBlock({ code, language, messages, }: CodeBlockProps): import("react").JSX.Element;
 export {};

package/dist/components/ui/code-block.js

@@ -130,44 +130,34 @@ function CopyButton({
 }
 
 // ../../src/components/ui/code-block.tsx
-import { Fragment, useEffect as useEffect2, useState as useState2 } from "react";
+import { highlight } from "@tanstack/highlight";
+import { createThemeCss } from "@tanstack/highlight/theme";
+import { githubDarkTheme } from "@tanstack/highlight/themes/github-dark";
+import { githubLightTheme } from "@tanstack/highlight/themes/github-light";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var codeBodyClassName = "font-mono text-[0.875rem] leading-[1.625] break-all whitespace-pre-wrap [&_code]:block [&_code]:font-mono [&_code]:text-[inherit] [&_code]:leading-[inherit] [&_code]:whitespace-pre-wrap [&_span]:break-all";
-var getTokenStyle = (token) => {
-  const style = {};
-  if (token.variants.light?.color) {
-    style["--shiki-light"] = token.variants.light.color;
-  }
-  if (token.variants.dark?.color) {
-    style["--shiki-dark"] = token.variants.dark.color;
-  }
-  return style;
-};
+var themeCss = `${createThemeCss({
+  light: githubLightTheme,
+  dark: githubDarkTheme,
+  lightSelector: "[data-code-theme]",
+  darkSelector: ".dark [data-code-theme]",
+  codeBlockSelector: "[data-code-theme] pre.th-code",
+  lineNumbersSelector: "[data-code-theme] .th-code--line-numbers"
+})}
+[data-code-theme] pre.th-code {
+  margin: 0;
+  overflow: visible;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+}
+[data-code-theme] pre.th-code code { font: inherit; }`;
 function CodeBlock({
   code,
-  highlighter,
   language = "text",
   messages
 }) {
-  const [tokens, setTokens] = useState2();
-  useEffect2(() => {
-    let active = true;
-    setTokens(undefined);
-    try {
-      const result = highlighter.codeToTokensWithThemes(code, {
-        lang: language.toLowerCase() || "text",
-        themes: {
-          light: "vitesse-light",
-          dark: "vitesse-dark"
-        }
-      });
-      if (active)
-        setTokens(result);
-    } catch {}
-    return () => {
-      active = false;
-    };
-  }, [code, highlighter, language]);
+  const normalizedLanguage = language.toLowerCase() || "text";
+  const highlighted = highlight(code, { lang: normalizedLanguage });
   const copyMessages = {};
   if (messages?.copy !== undefined)
     copyMessages.copy = messages.copy;
@@ -177,48 +167,30 @@ function CodeBlock({
     copyMessages.copyFailed = messages.copyFailed;
   }
   return /* @__PURE__ */ jsxs2("div", {
-    className: "overflow-hidden rounded-md border",
+    className: "not-prose bg-muted overflow-hidden rounded-md border text-[var(--th-token)]",
+    "data-code-theme": true,
     children: [
+      /* @__PURE__ */ jsx3("style", {
+        children: themeCss
+      }),
       /* @__PURE__ */ jsxs2("div", {
-        className: "border-border/60 flex items-center justify-between border-b px-3 py-2",
+        className: "bg-background border-border/60 flex items-center justify-between border-b px-3 py-2",
         children: [
           /* @__PURE__ */ jsx3("span", {
             className: "text-muted-foreground font-mono text-xs",
-            children: language.toLowerCase()
+            children: highlighted.lang
           }),
           /* @__PURE__ */ jsx3(CopyButton, {
             value: code,
-            valueDescription: `${language.toLowerCase()} code`,
+            valueDescription: `${highlighted.lang} code`,
             variant: "secondary",
             messages: copyMessages
           })
         ]
       }),
       /* @__PURE__ */ jsx3("div", {
-        className: "bg-muted max-h-full overflow-auto p-3",
-        children: tokens ? /* @__PURE__ */ jsx3("div", {
-          className: codeBodyClassName,
-          children: /* @__PURE__ */ jsx3("code", {
-            className: `language-${language}`,
-            children: tokens.map((line, lineIndex) => /* @__PURE__ */ jsxs2(Fragment, {
-              children: [
-                line.map((token) => /* @__PURE__ */ jsx3("span", {
-                  className: "text-[var(--shiki-light)] dark:text-[var(--shiki-dark)]",
-                  style: getTokenStyle(token),
-                  children: token.content
-                }, token.offset)),
-                lineIndex < tokens.length - 1 ? `
-` : null
-              ]
-            }, lineIndex))
-          })
-        }) : /* @__PURE__ */ jsx3("div", {
-          className: `max-w-full ${codeBodyClassName}`,
-          children: /* @__PURE__ */ jsx3("code", {
-            className: `language-${language}`,
-            children: code
-          })
-        })
+        className: "max-h-full overflow-auto font-mono text-[0.875rem] leading-[1.625]",
+        dangerouslySetInnerHTML: { __html: highlighted.html }
       })
     ]
   });