@haklex/rich-renderer-codeblock 0.0.4 → 0.0.6

package/dist/CodeBlockCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockCard.d.ts","sourceRoot":"","sources":["../src/CodeBlockCard.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAGrB,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAcrD,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,2CAwFpB"}
+{"version":3,"file":"CodeBlockCard.d.ts","sourceRoot":"","sources":["../src/CodeBlockCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAerD,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,2CAuGpB"}

package/dist/CodeBlockEditRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockEditRenderer.d.ts","sourceRoot":"","sources":["../src/CodeBlockEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAO1C,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,sBAAsB,CA4KvE,CAAA"}
+{"version":3,"file":"CodeBlockEditRenderer.d.ts","sourceRoot":"","sources":["../src/CodeBlockEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAQ1C,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,sBAAsB,CAmLvE,CAAA"}

package/dist/CodeBlockRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockRenderer.d.ts","sourceRoot":"","sources":["../src/CodeBlockRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAO1C,eAAO,MAAM,iBAAiB,EAAE,aAAa,CAAC,sBAAsB,CA8DnE,CAAA;AAED,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"CodeBlockRenderer.d.ts","sourceRoot":"","sources":["../src/CodeBlockRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAQ1C,eAAO,MAAM,iBAAiB,EAAE,aAAa,CAAC,sBAAsB,CAgEnE,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/icons/file.d.ts

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from 'react';
+/** Maps file extension to material-icon-theme icon name. */
+export declare const EXT_TO_ICON: Record<string, string>;
+export interface FileIconProps {
+    filename: string;
+    size?: number;
+    /** Optional class for the wrapper (e.g. consumer styles). */
+    className?: string;
+    /** Fallback when no icon is found. Default "F". */
+    fallback?: ReactNode;
+}
+export declare const FileIcon: FC<FileIconProps>;
+//# sourceMappingURL=file.d.ts.map

package/dist/icons/file.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../../src/icons/file.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAK1C,4DAA4D;AAC5D,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAkD9C,CAAA;AAQD,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAiCtC,CAAA"}

package/dist/icons/index.d.ts

@@ -0,0 +1,5 @@
+export type { FileIconProps } from './file';
+export { FileIcon } from './file';
+export { hasLanguageIcon, LANG_TO_ICON, LanguageIcon } from './language';
+export { getMaterialIconSvg } from './material-icon';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/icons/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,eAAe,EAAE,YAAY,EAAC,YAAY,EAAE,MAAM,YAAY,CAAA;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/icons/language.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+/** Maps normalized language to material-icon-theme icon name. */
+export declare const LANG_TO_ICON: Record<string, string>;
+/** Returns whether a Material icon is available for the given language. */
+export declare function hasLanguageIcon(lang: string): boolean;
+export declare const LanguageIcon: FC<{
+    language: string;
+    size?: number;
+    className?: string;
+}>;
+//# sourceMappingURL=language.d.ts.map

package/dist/icons/language.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"language.d.ts","sourceRoot":"","sources":["../../src/icons/language.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAM/B,iEAAiE;AACjE,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA8C/C,CAAA;AAOD,2EAA2E;AAC3E,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAErD;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAiCA,CAAA"}

package/dist/icons/material-icon.d.ts

@@ -0,0 +1,3 @@
+/** Get SVG markup for a material-icon-theme icon by name. Returns null if not found. */
+export declare function getMaterialIconSvg(iconName: string): string | null;
+//# sourceMappingURL=material-icon.d.ts.map

package/dist/icons/material-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"material-icon.d.ts","sourceRoot":"","sources":["../../src/icons/material-icon.ts"],"names":[],"mappings":"AAGA,wFAAwF;AACxF,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAKlE"}

package/dist/icons.mjs

@@ -0,0 +1,96 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { n as getMaterialIconSvg } from "./language-AfAZN4lZ.js";
+import { o, L, h } from "./language-AfAZN4lZ.js";
+const EXT_TO_ICON = {
+  ts: "typescript",
+  tsx: "react-ts",
+  // TSX → React icon (same as JSX)
+  mts: "typescript",
+  cts: "typescript",
+  js: "javascript",
+  jsx: "react",
+  mjs: "javascript",
+  cjs: "javascript",
+  py: "python",
+  rs: "rust",
+  go: "go",
+  java: "java",
+  html: "html",
+  htm: "html",
+  css: "css",
+  scss: "sass",
+  sass: "sass",
+  less: "sass",
+  json: "json",
+  jsonc: "json",
+  json5: "json",
+  md: "markdown",
+  mdx: "markdown",
+  sh: "console",
+  bash: "console",
+  zsh: "console",
+  yml: "yaml",
+  yaml: "yaml",
+  sql: "database",
+  c: "c",
+  h: "c",
+  cpp: "cpp",
+  cc: "cpp",
+  cxx: "cpp",
+  hpp: "cpp",
+  swift: "swift",
+  kt: "kotlin",
+  kts: "kotlin",
+  rb: "ruby",
+  php: "php",
+  vue: "vue",
+  svelte: "svelte",
+  toml: "toml",
+  xml: "xml",
+  graphql: "graphql",
+  gql: "graphql",
+  dockerfile: "docker",
+  lua: "lua",
+  zig: "zig"
+};
+function getFileIconSvg(filename) {
+  const ext = filename.split(".").pop()?.toLowerCase() ?? "";
+  const iconName = EXT_TO_ICON[ext] ?? "file";
+  return getMaterialIconSvg(iconName);
+}
+const FileIcon = ({
+  filename,
+  size = 16,
+  className,
+  fallback = "F"
+}) => {
+  const html = useMemo(() => getFileIconSvg(filename), [filename]);
+  const wrapperStyle = {
+    width: size,
+    height: size,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    opacity: html ? 1 : 0.5,
+    fontSize: size * 0.6
+  };
+  if (!html) {
+    return /* @__PURE__ */ jsx("span", { className, style: wrapperStyle, children: fallback });
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className,
+      style: { width: size, height: size },
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+};
+export {
+  FileIcon,
+  o as LANG_TO_ICON,
+  L as LanguageIcon,
+  getMaterialIconSvg,
+  h as hasLanguageIcon
+};

package/dist/index.mjs

@@ -2,7 +2,10 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useColorScheme } from "@haklex/rich-editor";
 import { useState, useRef, useEffect, useCallback, useMemo } from "react";
 import { Check, Copy, ChevronDown } from "lucide-react";
-import { normalizeLanguage, languageToIconMap, getLanguageDisplayName, languageToColorMap } from "./constants.mjs";
+import { normalizeLanguage, getLanguageDisplayName, languageToColorMap } from "./constants.mjs";
+import "@iconify/utils";
+import "@iconify-json/material-icon-theme";
+import { c as card, s as semanticClassNames, l as lang, h as hasLanguageIcon, L as LanguageIcon, a as copyButton, b as bodyBackground, e as expandWrap, d as expandButton, f as scroll, g as scrollCollapsed, i as lined, j as linedWithNumbers, k as body, m as bodyReadonly } from "./language-AfAZN4lZ.js";
 import { getHighlighterWithLang, SHIKI_THEMES } from "./shiki.mjs";
 const CopyIcon = /* @__PURE__ */ jsx(Copy, { size: 16 });
 const CheckIcon = /* @__PURE__ */ jsx(Check, { size: 16 });
@@ -39,7 +42,6 @@ function CodeBlockCard({
     }).catch(() => {
     });
   }, [code]);
-  const languageIcon = languageToIconMap[normalizedLanguage] || "";
   const languageLabel = getLanguageDisplayName(normalizedLanguage);
   const accent = languageToColorMap[normalizedLanguage] || "#737373";
   const cardStyle = useMemo(
@@ -47,37 +49,65 @@ function CodeBlockCard({
     [accent]
   );
   const scrollClassName = [
-    "rr-code-scroll",
-    isCollapsed && isOverflow && "rr-code-scroll-collapsed"
+    scroll,
+    semanticClassNames.scroll,
+    isCollapsed && isOverflow && scrollCollapsed,
+    isCollapsed && isOverflow && semanticClassNames.scrollCollapsed
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: "rr-code-card", style: cardStyle, children: [
-    normalizedLanguage !== "text" && /* @__PURE__ */ jsx("div", { className: "rr-code-lang", "aria-hidden": true, children: languageIcon || languageLabel }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "rr-code-copy",
-        onClick: handleCopy,
-        "aria-label": copied ? "Copied" : "Copy code",
-        children: copied ? CheckIcon : CopyIcon
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "rr-code-bg", children: [
-      /* @__PURE__ */ jsx("div", { ref: scrollRef, className: scrollClassName, children }),
-      isOverflow && isCollapsed && /* @__PURE__ */ jsx("div", { className: "rr-code-expand-wrap", children: /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: "rr-code-expand",
-          onClick: () => setIsCollapsed(false),
-          children: [
-            ExpandIcon,
-            /* @__PURE__ */ jsx("span", { children: "展开" })
-          ]
-        }
-      ) })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${card} ${semanticClassNames.card}`,
+      style: cardStyle,
+      children: [
+        normalizedLanguage !== "text" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${lang} ${semanticClassNames.lang}`,
+            "aria-hidden": true,
+            children: hasLanguageIcon(normalizedLanguage) ? /* @__PURE__ */ jsx(LanguageIcon, { language: normalizedLanguage, size: 14 }) : /* @__PURE__ */ jsx("span", { children: languageLabel })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `${copyButton} ${semanticClassNames.copyButton}`,
+            onClick: handleCopy,
+            "aria-label": copied ? "Copied" : "Copy code",
+            children: copied ? CheckIcon : CopyIcon
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `${bodyBackground} ${semanticClassNames.bodyBackground}`,
+            children: [
+              /* @__PURE__ */ jsx("div", { ref: scrollRef, className: scrollClassName, children }),
+              isOverflow && isCollapsed && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `${expandWrap} ${semanticClassNames.expandWrap}`,
+                  children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      className: `${expandButton} ${semanticClassNames.expandButton}`,
+                      onClick: () => setIsCollapsed(false),
+                      children: [
+                        ExpandIcon,
+                        /* @__PURE__ */ jsx("span", { children: "展开" })
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 const CodeBlockEditRenderer = ({
   code,
@@ -121,13 +151,13 @@ const CodeBlockEditRenderer = ({
       if (disposed) return;
       const theme = SHIKI_THEMES[props.colorScheme];
       const loaded2 = highlighter.getLoadedLanguages();
-      const lang = loaded2.includes(props.normalizedLanguage) ? props.normalizedLanguage : "text";
+      const lang2 = loaded2.includes(props.normalizedLanguage) ? props.normalizedLanguage : "text";
       const editor = shikiCode().withOptions({
         readOnly: !props.editable,
         lineNumbers: props.showLineNumbers ? "on" : "off"
       }).create(container, highlighter, {
         value: props.code,
-        language: lang,
+        language: lang2,
         theme
       });
       if (!props.editable) {
@@ -180,10 +210,17 @@ const CodeBlockEditRenderer = ({
   }, [code, normalizedLanguage, colorScheme, showLineNumbers, editable]);
   const fallbackLines = useMemo(() => code.split("\n"), [code]);
   const fallbackClassName = [
-    "rr-code-lined",
-    showLineNumbers && "rr-code-lined-ln"
+    lined,
+    semanticClassNames.lined,
+    showLineNumbers && linedWithNumbers,
+    showLineNumbers && semanticClassNames.linedWithNumbers
+  ].filter(Boolean).join(" ");
+  const bodyClassName = [
+    body,
+    semanticClassNames.body,
+    !editable && bodyReadonly,
+    !editable && semanticClassNames.bodyReadonly
   ].filter(Boolean).join(" ");
-  const bodyClassName = ["rr-code-body", !editable && "rr-code-readonly"].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(CodeBlockCard, { code, language, children: [
     !loaded && /* @__PURE__ */ jsx("pre", { className: fallbackClassName, children: /* @__PURE__ */ jsx("code", { children: fallbackLines.map((line, i) => /* @__PURE__ */ jsx("span", { className: "line", children: line }, i)) }) }),
     /* @__PURE__ */ jsx(
@@ -210,9 +247,9 @@ const CodeBlockRenderer = ({
       const highlighter = await getHighlighterWithLang(normalizedLanguage);
       if (cancelled) return;
       const loaded = highlighter.getLoadedLanguages();
-      const lang = loaded.includes(normalizedLanguage) ? normalizedLanguage : "text";
+      const lang2 = loaded.includes(normalizedLanguage) ? normalizedLanguage : "text";
       const result = highlighter.codeToHtml(code, {
-        lang,
+        lang: lang2,
         theme: SHIKI_THEMES[colorScheme]
       });
       if (!cancelled) setHtml(result);
@@ -223,8 +260,10 @@ const CodeBlockRenderer = ({
   }, [code, normalizedLanguage, colorScheme]);
   const fallbackLines = useMemo(() => code.split("\n"), [code]);
   const linedClassName = [
-    "rr-code-lined",
-    showLineNumbers && "rr-code-lined-ln"
+    lined,
+    semanticClassNames.lined,
+    showLineNumbers && linedWithNumbers,
+    showLineNumbers && semanticClassNames.linedWithNumbers
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(CodeBlockCard, { code, language, children: html ? /* @__PURE__ */ jsx(
     "div",

package/dist/language-AfAZN4lZ.js

@@ -0,0 +1,131 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { getIconData, iconToSVG, iconToHTML } from "@iconify/utils";
+import { icons } from "@iconify-json/material-icon-theme";
+function getMaterialIconSvg(iconName) {
+  const data = getIconData(icons, iconName);
+  if (!data) return null;
+  const svg = iconToSVG(data);
+  return iconToHTML(svg.body, svg.attributes);
+}
+var semanticClassNames = { card: "rr-code-card", lang: "rr-code-lang", langIcon: "rr-code-lang-icon", copyButton: "rr-code-copy", bodyBackground: "rr-code-bg", scroll: "rr-code-scroll", scrollCollapsed: "rr-code-scroll-collapsed", body: "rr-code-body", bodyReadonly: "rr-code-readonly", expandWrap: "rr-code-expand-wrap", expandButton: "rr-code-expand", lined: "rr-code-lined", linedWithNumbers: "rr-code-lined-ln" };
+var card = "_1pn9r4q0";
+var lang = "_1pn9r4q1";
+var langIcon = "_1pn9r4q2";
+var copyButton = "_1pn9r4q3";
+var bodyBackground = "_1pn9r4q4";
+var scroll = "_1pn9r4q5";
+var scrollCollapsed = "_1pn9r4q6";
+var body = "_1pn9r4q7";
+var bodyReadonly = "_1pn9r4q8";
+var expandWrap = "_1pn9r4q9";
+var expandButton = "_1pn9r4qa";
+var lined = "_1pn9r4qb";
+var linedWithNumbers = "_1pn9r4qc";
+const LANG_TO_ICON = {
+  javascript: "javascript",
+  js: "javascript",
+  typescript: "typescript",
+  ts: "typescript",
+  jsx: "react",
+  tsx: "react",
+  // TSX → React icon (same as JSX)
+  html: "html",
+  css: "css",
+  scss: "sass",
+  sass: "sass",
+  less: "sass",
+  json: "json",
+  jsonc: "json",
+  markdown: "markdown",
+  md: "markdown",
+  mdx: "markdown",
+  bash: "console",
+  sh: "console",
+  shell: "console",
+  zsh: "console",
+  python: "python",
+  py: "python",
+  rust: "rust",
+  go: "go",
+  java: "java",
+  c: "c",
+  cpp: "cpp",
+  "c++": "cpp",
+  swift: "swift",
+  kotlin: "kotlin",
+  kt: "kotlin",
+  yaml: "yaml",
+  yml: "yaml",
+  sql: "database",
+  xml: "xml",
+  vue: "vue",
+  svelte: "svelte",
+  php: "php",
+  rb: "ruby",
+  lua: "lua",
+  zig: "zig",
+  toml: "toml",
+  graphql: "graphql",
+  gql: "graphql",
+  dockerfile: "docker"
+};
+function getLanguageIconSvg(lang2) {
+  const iconName = LANG_TO_ICON[lang2] ?? "code";
+  return getMaterialIconSvg(iconName);
+}
+function hasLanguageIcon(lang2) {
+  return getLanguageIconSvg(lang2) !== null;
+}
+const LanguageIcon = ({
+  language,
+  size = 14,
+  className = `${langIcon} ${semanticClassNames.langIcon}`
+}) => {
+  const html = useMemo(() => getLanguageIconSvg(language), [language]);
+  if (!html) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className,
+        style: {
+          width: size,
+          height: size,
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          opacity: 0.6,
+          fontSize: size * 0.6
+        },
+        children: "•"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className,
+      style: { width: size, height: size },
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+};
+export {
+  LanguageIcon as L,
+  copyButton as a,
+  bodyBackground as b,
+  card as c,
+  expandButton as d,
+  expandWrap as e,
+  scroll as f,
+  scrollCollapsed as g,
+  hasLanguageIcon as h,
+  lined as i,
+  linedWithNumbers as j,
+  body as k,
+  lang as l,
+  bodyReadonly as m,
+  getMaterialIconSvg as n,
+  LANG_TO_ICON as o,
+  semanticClassNames as s
+};

package/dist/rich-renderer-codeblock.css

@@ -1,4 +1,4 @@
-.rr-code-card {
+._1pn9r4q0 {
   --rr-code-accent: #737373;
   position: relative;
   margin: 1.5rem 0;
@@ -6,16 +6,27 @@
   overflow: hidden;
   font-size: 14px;
 }
-.rr-code-lang {
+._1pn9r4q1 {
   position: absolute;
   bottom: 0.75rem;
   right: 0.75rem;
   z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
   font-size: 0.875rem;
   opacity: 0.6;
   pointer-events: none;
 }
-.rr-code-copy {
+._1pn9r4q2 {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+._1pn9r4q2 svg {
+  width: 100%;
+  height: 100%;
+}
+._1pn9r4q3 {
   appearance: none;
   position: absolute;
   right: 0.5rem;
@@ -34,36 +45,36 @@
   transition: opacity 0.2s ease;
   backdrop-filter: blur(8px);
 }
-.rr-code-card:hover .rr-code-copy {
+._1pn9r4q0:hover ._1pn9r4q3 {
   opacity: 1;
 }
-.rr-code-bg {
+._1pn9r4q4 {
   position: relative;
   background: color-mix(in srgb, var(--rr-code-accent) 5%, transparent);
   padding: 1rem 0;
 }
-.rr-code-scroll {
+._1pn9r4q5 {
   position: relative;
   width: 100%;
   overflow: auto;
 }
-.rr-code-scroll-collapsed {
+._1pn9r4q6 {
   max-height: 50vh;
   overflow: hidden;
 }
-.rr-code-body {
+._1pn9r4q7 {
   position: relative;
   overflow: auto;
   background-color: transparent !important;
 }
-.rr-code-body > .shikicode.output {
+._1pn9r4q7 > .shikicode.output {
   position: static !important;
   inset: auto !important;
 }
-.rr-code-readonly > textarea.shikicode {
+._1pn9r4q8 > textarea.shikicode {
   display: none;
 }
-.rr-code-expand-wrap {
+._1pn9r4q9 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -74,7 +85,7 @@
   background: linear-gradient(to bottom, transparent 0%, var(--bg, var(--rc-bg-secondary)) 80%);
   pointer-events: none;
 }
-.rr-code-expand {
+._1pn9r4qa {
   appearance: none;
   border: none;
   background: none;
@@ -87,46 +98,47 @@
   opacity: 0.7;
   pointer-events: auto;
 }
-.rr-code-expand:hover {
+._1pn9r4qa:hover {
   opacity: 1;
 }
-.rr-code-card pre {
+._1pn9r4q0 pre {
   margin: 0 !important;
   padding: 0 !important;
   border-radius: 0;
   font-size: min(1em, 16px);
 }
-.rr-code-card pre code {
+._1pn9r4q0 pre code {
   display: flex;
   flex-direction: column;
 }
-.rr-code-card .shiki, .rr-code-card code, .rr-code-card pre {
+._1pn9r4q0 .shiki, ._1pn9r4q0 code, ._1pn9r4q0 pre {
   background: transparent !important;
 }
-.rr-code-card .shikicode.output .line::before {
+._1pn9r4q0 .shikicode.output .line::before {
   background-color: transparent !important;
+  color: color-mix(in srgb, var(--rc-text-secondary) 40%, transparent) !important;
 }
-.rr-code-card .line {
+._1pn9r4q0 .line {
   display: block;
   padding: 0 1.25rem;
 }
-.rr-code-card .shikicode.input.line-numbers {
+._1pn9r4q0 .shikicode.input.line-numbers {
   padding-left: calc(5em + 1.25rem);
 }
-.rr-code-card .shikicode.input:not(.line-numbers) {
+._1pn9r4q0 .shikicode.input:not(.line-numbers) {
   padding-left: 1.25rem;
 }
-.rr-code-card .line > span:last-child {
+._1pn9r4q0 .line > span:last-child {
   margin-right: 1.25rem;
 }
-.rr-code-card .line::after {
+._1pn9r4q0 .line::after {
   content: ' ';
 }
-.rr-code-card .highlighted, .rr-code-card .diff {
+._1pn9r4q0 .highlighted, ._1pn9r4q0 .diff {
   position: relative;
   overflow-wrap: break-word;
 }
-.rr-code-card .highlighted::before, .rr-code-card .diff::before {
+._1pn9r4q0 .highlighted::before, ._1pn9r4q0 .diff::before {
   content: '';
   position: absolute;
   left: 0;
@@ -134,43 +146,43 @@
   height: 100%;
   width: 2px;
 }
-.rr-code-card .highlighted {
+._1pn9r4q0 .highlighted {
   background: color-mix(in srgb, var(--rr-code-accent) 20%, transparent);
 }
-.rr-code-card .highlighted::before {
+._1pn9r4q0 .highlighted::before {
   background: var(--rr-code-accent);
 }
-.rr-code-card .diff.add {
+._1pn9r4q0 .diff.add {
   background: rgba(34, 197, 94, 0.15);
 }
-.rr-code-card .diff.add::before {
+._1pn9r4q0 .diff.add::before {
   background: #22c55e;
 }
-.rr-code-card .diff.add::after {
+._1pn9r4q0 .diff.add::after {
   content: ' +';
   position: absolute;
   left: 0;
   color: #22c55e;
 }
-.rr-code-card .diff.remove {
+._1pn9r4q0 .diff.remove {
   background: rgba(239, 68, 68, 0.15);
 }
-.rr-code-card .diff.remove::before {
+._1pn9r4q0 .diff.remove::before {
   background: #ef4444;
 }
-.rr-code-card .diff.remove::after {
+._1pn9r4q0 .diff.remove::after {
   content: ' -';
   position: absolute;
   left: 0;
   color: #ef4444;
 }
-.rr-code-lined {
+._1pn9r4qb {
   counter-reset: shiki-line 0;
 }
-.rr-code-lined .line {
+._1pn9r4qb .line {
   counter-increment: shiki-line 1;
 }
-.rr-code-lined .line::before {
+._1pn9r4qb .line::before {
   content: counter(shiki-line);
   color: transparent;
   text-align: right;
@@ -180,19 +192,57 @@
   position: sticky;
   left: 0;
 }
-.rr-code-lined-ln .line::before {
+._1pn9r4qc .line::before {
   color: inherit;
   opacity: 0.4;
   width: 5em;
   padding-right: 2em;
 }
-.rr-code-scroll pre::-webkit-scrollbar-track {
+._1pn9r4q5 pre::-webkit-scrollbar-track {
   margin-left: 1rem;
   margin-right: var(--sr-margin, 0);
 }
-.rr-code-scroll pre::-webkit-scrollbar {
+._1pn9r4q5 pre::-webkit-scrollbar {
   background-color: transparent !important;
 }
+._1pn9r4qd {
+  font-family: var(--rc-font-mono);
+  font-size: var(--rc-font-size-small);
+  background-color: var(--rc-code-bg);
+  border-radius: var(--rc-radius-md);
+  overflow: hidden;
+  margin: var(--rc-space-md) 0;
+  border: 1px solid var(--rc-border);
+}
+._1pn9r4qe {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--rc-space-sm) var(--rc-space-md);
+  border-bottom: 1px solid var(--rc-border);
+  font-size: var(--rc-font-size-small);
+  color: var(--rc-text-secondary);
+  user-select: none;
+}
+._1pn9r4qf {
+  font-family: var(--rc-font-mono);
+  font-size: 0.85em;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+._1pn9r4qg {
+  appearance: none;
+  border: none;
+  background: none;
+  color: var(--rc-text-secondary);
+  cursor: pointer;
+  padding: var(--rc-space-xs) var(--rc-space-sm);
+  border-radius: var(--rc-radius-sm);
+  font-family: var(--rc-font-family);
+  font-size: var(--rc-font-size-small);
+  line-height: 1;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
 .rich-code-block {
   font-family: var(--rc-font-mono);
   font-size: var(--rc-font-size-small);
@@ -260,7 +310,7 @@
   width: 2.5em;
   margin-right: var(--rc-space-md);
   text-align: right;
-  color: color-mix(in srgb, var(--rc-text-secondary) 40%, transparent);
+  color: color-mix(in srgb, var(--rc-text-secondary) 40%, transparent) !important;
   opacity: 0.4;
   user-select: none;
   font-size: var(--rc-font-size-small);

package/dist/styles.css.d.ts

@@ -1,2 +1,40 @@
-export {};
+export declare const semanticClassNames: {
+    readonly card: "rr-code-card";
+    readonly lang: "rr-code-lang";
+    readonly langIcon: "rr-code-lang-icon";
+    readonly copyButton: "rr-code-copy";
+    readonly bodyBackground: "rr-code-bg";
+    readonly scroll: "rr-code-scroll";
+    readonly scrollCollapsed: "rr-code-scroll-collapsed";
+    readonly body: "rr-code-body";
+    readonly bodyReadonly: "rr-code-readonly";
+    readonly expandWrap: "rr-code-expand-wrap";
+    readonly expandButton: "rr-code-expand";
+    readonly lined: "rr-code-lined";
+    readonly linedWithNumbers: "rr-code-lined-ln";
+};
+export declare const card: string;
+export declare const lang: string;
+export declare const langIcon: string;
+export declare const copyButton: string;
+export declare const bodyBackground: string;
+export declare const scroll: string;
+export declare const scrollCollapsed: string;
+export declare const body: string;
+export declare const bodyReadonly: string;
+export declare const expandWrap: string;
+export declare const expandButton: string;
+export declare const lined: string;
+export declare const linedWithNumbers: string;
+export declare const contentSemanticClassNames: {
+    readonly root: "rich-code-block";
+    readonly header: "rich-code-block-header";
+    readonly lang: "rich-code-block-lang";
+    readonly copyButton: "rich-code-block-copy";
+    readonly numbered: "rich-code-block-numbered";
+};
+export declare const contentRoot: string;
+export declare const contentHeader: string;
+export declare const contentLang: string;
+export declare const contentCopyButton: string;
 //# sourceMappingURL=styles.css.d.ts.map

package/dist/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":""}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;CAcrB,CAAA;AAGV,eAAO,MAAM,IAAI,QAOf,CAAA;AAGF,eAAO,MAAM,IAAI,QAWf,CAAA;AAEF,eAAO,MAAM,QAAQ,QAGnB,CAAA;AAQF,eAAO,MAAM,UAAU,QAuBrB,CAAA;AAGF,eAAO,MAAM,cAAc,QAIzB,CAAA;AAGF,eAAO,MAAM,MAAM,QAIjB,CAAA;AAEF,eAAO,MAAM,eAAe,QAG1B,CAAA;AAGF,eAAO,MAAM,IAAI,QAIf,CAAA;AAEF,eAAO,MAAM,YAAY,QAAY,CAAA;AAYrC,eAAO,MAAM,UAAU,QAUrB,CAAA;AAEF,eAAO,MAAM,YAAY,QAiBvB,CAAA;AA8FF,eAAO,MAAM,KAAK,QAEhB,CAAA;AAiBF,eAAO,MAAM,gBAAgB,QAAY,CAAA;AAmBzC,eAAO,MAAM,yBAAyB;;;;;;CAM5B,CAAA;AAiFV,eAAO,MAAM,WAAW,QAA2B,CAAA;AACnD,eAAO,MAAM,aAAa,QAA6B,CAAA;AACvD,eAAO,MAAM,WAAW,QAA2B,CAAA;AACnD,eAAO,MAAM,iBAAiB,QAAiC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-renderer-codeblock",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Code block renderer with Shiki syntax highlighting",
   "license": "MIT",
   "type": "module",
@@ -17,18 +17,24 @@
       "import": "./dist/constants.mjs",
       "types": "./dist/constants.d.ts"
     },
-    "./style.css": "./dist/rich-renderer-codeblock.css"
+    "./style.css": "./dist/rich-renderer-codeblock.css",
+    "./icons": {
+      "import": "./dist/icons.mjs",
+      "types": "./dist/icons.d.ts"
+    }
   },
   "main": "./dist/index.mjs",
   "files": [
     "dist"
   ],
   "dependencies": {
+    "@iconify-json/material-icon-theme": "^1.2.22",
+    "@iconify/utils": "^2.3.0",
     "lucide-react": "^0.574.0",
     "shiki": "^3.21.0",
     "shikicode": "*",
-    "@haklex/rich-editor": "0.0.4",
-    "@haklex/rich-style-token": "0.0.4"
+    "@haklex/rich-editor": "0.0.6",
+    "@haklex/rich-style-token": "0.0.6"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",