@haklex/rich-renderer-codeblock 0.0.37 → 0.0.39

package/dist/CodeBlockCard.d.ts

@@ -2,8 +2,11 @@ import { ReactNode } from 'react';
 interface CodeBlockCardProps {
     code: string;
     language: string;
+    collapsible?: boolean;
+    editable?: boolean;
+    onLanguageChange?: (language: string) => void;
     children: ReactNode;
 }
-export declare function CodeBlockCard({ code, language, children, }: CodeBlockCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeBlockCard({ code, language, collapsible, editable, onLanguageChange, children, }: CodeBlockCardProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=CodeBlockCard.d.ts.map

package/dist/CodeBlockCard.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"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,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,QAAQ,EACR,WAAkB,EAClB,QAAgB,EAChB,gBAAgB,EAChB,QAAQ,GACT,EAAE,kBAAkB,2CAmIpB"}

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;AAQ1C,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,sBAAsB,CAkLvE,CAAA"}
+{"version":3,"file":"CodeBlockEditRenderer.d.ts","sourceRoot":"","sources":["../src/CodeBlockEditRenderer.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAa1C,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,sBAAsB,CA2QvE,CAAA"}

package/dist/icons.mjs

@@ -1,7 +1,7 @@
 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";
+import { o as getMaterialIconSvg } from "./language-V8hnDWn4.js";
+import { p, L, h } from "./language-V8hnDWn4.js";
 const EXT_TO_ICON = {
   ts: "typescript",
   tsx: "react-ts",
@@ -89,7 +89,7 @@ const FileIcon = ({
 };
 export {
   FileIcon,
-  o as LANG_TO_ICON,
+  p as LANG_TO_ICON,
   L as LanguageIcon,
   getMaterialIconSvg,
   h as hasLanguageIcon

package/dist/index.mjs

@@ -1,11 +1,15 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { history, defaultKeymap, historyKeymap, indentWithTab } from "@codemirror/commands";
+import { Compartment, Prec, EditorState, EditorSelection } from "@codemirror/state";
+import { EditorView, keymap, lineNumbers } from "@codemirror/view";
+import { isOnFirstLine, isOnLastLine, getThemeExtensions, loadLanguageExtension } from "@haklex/cm-editor";
 import { useVariant, useColorScheme } from "@haklex/rich-editor";
 import { useState, useRef, useEffect, useCallback, useMemo } from "react";
 import { Check, Copy, ChevronDown } from "lucide-react";
 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 { c as card, s as semanticClassNames, l as lang, h as hasLanguageIcon, L as LanguageIcon, a as langInput, b as copyButton, d as bodyBackground, e as expandWrap, f as expandButton, g as scroll, i as scrollCollapsed, j as lined, k as linedWithNumbers, m as body, n as bodyReadonly } from "./language-V8hnDWn4.js";
 import { getHighlighterWithLang, SHIKI_DUAL_THEMES } from "./shiki.mjs";
 const CopyIcon = /* @__PURE__ */ jsx(Copy, { size: 16 });
 const CheckIcon = /* @__PURE__ */ jsx(Check, { size: 16 });
@@ -13,6 +17,9 @@ const ExpandIcon = /* @__PURE__ */ jsx(ChevronDown, { size: 14 });
 function CodeBlockCard({
   code,
   language,
+  collapsible = true,
+  editable = false,
+  onLanguageChange,
   children
 }) {
   const normalizedLanguage = normalizeLanguage(language);
@@ -22,6 +29,10 @@ function CodeBlockCard({
   const [isOverflow, setIsOverflow] = useState(false);
   const scrollRef = useRef(null);
   useEffect(() => {
+    if (!collapsible) {
+      setIsOverflow(false);
+      return;
+    }
     const el = scrollRef.current;
     if (!el) return;
     const check = () => {
@@ -30,7 +41,7 @@ function CodeBlockCard({
     };
     const raf = requestAnimationFrame(check);
     return () => cancelAnimationFrame(raf);
-  }, [code]);
+  }, [code, collapsible]);
   useEffect(() => {
     return () => clearTimeout(copyTimerRef.current);
   }, []);
@@ -51,8 +62,8 @@ function CodeBlockCard({
   const scrollClassName = [
     scroll,
     semanticClassNames.scroll,
-    isCollapsed && isOverflow && scrollCollapsed,
-    isCollapsed && isOverflow && semanticClassNames.scrollCollapsed
+    collapsible && isCollapsed && isOverflow && scrollCollapsed,
+    collapsible && isCollapsed && isOverflow && semanticClassNames.scrollCollapsed
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(
     "div",
@@ -60,7 +71,24 @@ function CodeBlockCard({
       className: `${card} ${semanticClassNames.card}`,
       style: cardStyle,
       children: [
-        normalizedLanguage !== "text" && /* @__PURE__ */ jsx(
+        editable ? /* @__PURE__ */ jsxs("div", { className: `${lang} ${semanticClassNames.lang}`, children: [
+          hasLanguageIcon(normalizedLanguage) && /* @__PURE__ */ jsx(LanguageIcon, { language: normalizedLanguage, size: 14 }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: langInput,
+              value: language,
+              placeholder: "language",
+              onChange: (e) => onLanguageChange?.(e.target.value),
+              onKeyDown: (e) => {
+                e.stopPropagation();
+                if (e.key === "Escape" || e.key === "Enter") {
+                  e.currentTarget.blur();
+                }
+              }
+            }
+          )
+        ] }) : normalizedLanguage !== "text" && /* @__PURE__ */ jsx(
           "div",
           {
             className: `${lang} ${semanticClassNames.lang}`,
@@ -84,7 +112,7 @@ function CodeBlockCard({
             className: `${bodyBackground} ${semanticClassNames.bodyBackground}`,
             children: [
               /* @__PURE__ */ jsx("div", { ref: scrollRef, className: scrollClassName, children }),
-              isOverflow && isCollapsed && /* @__PURE__ */ jsx(
+              collapsible && isOverflow && isCollapsed && /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: `${expandWrap} ${semanticClassNames.expandWrap}`,
@@ -109,103 +137,190 @@ function CodeBlockCard({
     }
   );
 }
+function stopHandledEvent(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  event.stopImmediatePropagation();
+}
 const CodeBlockEditRenderer = ({
   code,
   language,
   showLineNumbers: showLineNumbersProp,
   editable = false,
-  onCodeChange
+  selected = false,
+  cursorPlacement = "start",
+  onCodeChange,
+  onLanguageChange,
+  onDelete,
+  onExitBlock
 }) => {
   const variant = useVariant();
   const colorScheme = useColorScheme();
   const showLineNumbers = showLineNumbersProp ?? variant !== "comment";
   const normalizedLanguage = normalizeLanguage(language);
-  const [loaded, setLoaded] = useState(false);
+  const [mounted, setMounted] = useState(false);
   const containerRef = useRef(null);
   const editorRef = useRef(null);
+  const suppressChangeRef = useRef(false);
+  const editableRef = useRef(editable);
+  editableRef.current = editable;
   const onCodeChangeRef = useRef(onCodeChange);
   onCodeChangeRef.current = onCodeChange;
-  const latestPropsRef = useRef({
-    code,
-    normalizedLanguage,
-    showLineNumbers,
-    editable
-  });
-  latestPropsRef.current = {
-    code,
-    normalizedLanguage,
-    showLineNumbers,
-    editable
-  };
+  const onDeleteRef = useRef(onDelete);
+  onDeleteRef.current = onDelete;
+  const onExitBlockRef = useRef(onExitBlock);
+  onExitBlockRef.current = onExitBlock;
+  const languageCompartmentRef = useRef(null);
+  const editableCompartmentRef = useRef(null);
+  const lineNumbersCompartmentRef = useRef(null);
+  const themeCompartmentRef = useRef(null);
+  if (!languageCompartmentRef.current)
+    languageCompartmentRef.current = new Compartment();
+  if (!editableCompartmentRef.current)
+    editableCompartmentRef.current = new Compartment();
+  if (!lineNumbersCompartmentRef.current)
+    lineNumbersCompartmentRef.current = new Compartment();
+  if (!themeCompartmentRef.current)
+    themeCompartmentRef.current = new Compartment();
+  const keyboardBoundaryHandler = useMemo(
+    () => Prec.high(
+      EditorView.domEventHandlers({
+        keydown: (event, view) => {
+          if (!editableRef.current) return false;
+          event.stopPropagation();
+          if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            stopHandledEvent(event);
+            onExitBlockRef.current?.("after");
+            return true;
+          }
+          if (event.key === "Backspace" && view.state.doc.length === 0) {
+            stopHandledEvent(event);
+            onDeleteRef.current?.();
+            return true;
+          }
+          if (event.key === "ArrowUp" && isOnFirstLine(view)) {
+            stopHandledEvent(event);
+            onExitBlockRef.current?.("before");
+            return true;
+          }
+          if (event.key === "ArrowDown" && isOnLastLine(view)) {
+            stopHandledEvent(event);
+            onExitBlockRef.current?.("after");
+            return true;
+          }
+          return false;
+        }
+      })
+    ),
+    []
+  );
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
-    let disposed = false;
-    let inputCleanup = null;
-    (async () => {
-      const props = latestPropsRef.current;
-      const [highlighter, { shikiCode }] = await Promise.all([
-        getHighlighterWithLang(props.normalizedLanguage),
-        import("shikicode")
-      ]);
-      if (disposed) return;
-      const loaded2 = highlighter.getLoadedLanguages();
-      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: lang2,
-        theme: SHIKI_DUAL_THEMES[colorScheme]
-      });
-      if (!props.editable) {
-        editor.input.tabIndex = -1;
-      }
-      const handleInput = () => {
-        onCodeChangeRef.current?.(editor.input.value);
-      };
-      editor.input.addEventListener("input", handleInput);
-      inputCleanup = () => editor.input.removeEventListener("input", handleInput);
-      editorRef.current = editor;
-      setLoaded(true);
-    })();
+    const editor = new EditorView({
+      parent: container,
+      state: EditorState.create({
+        doc: code,
+        extensions: [
+          history(),
+          keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
+          EditorView.updateListener.of((update) => {
+            if (!update.docChanged || suppressChangeRef.current) return;
+            onCodeChangeRef.current?.(update.state.doc.toString());
+          }),
+          keyboardBoundaryHandler,
+          editableCompartmentRef.current.of([
+            EditorView.editable.of(editable),
+            EditorState.readOnly.of(!editable)
+          ]),
+          lineNumbersCompartmentRef.current.of(
+            showLineNumbers ? lineNumbers() : []
+          ),
+          themeCompartmentRef.current.of(getThemeExtensions(colorScheme)),
+          languageCompartmentRef.current.of([])
+        ]
+      })
+    });
+    editorRef.current = editor;
+    setMounted(true);
     return () => {
-      disposed = true;
-      inputCleanup?.();
-      editorRef.current?.dispose();
+      editor.destroy();
       editorRef.current = null;
-      setLoaded(false);
+      setMounted(false);
     };
+  }, []);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    editor.dispatch({
+      effects: editableCompartmentRef.current.reconfigure([
+        EditorView.editable.of(editable),
+        EditorState.readOnly.of(!editable)
+      ])
+    });
+  }, [editable]);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    editor.dispatch({
+      effects: lineNumbersCompartmentRef.current.reconfigure(
+        showLineNumbers ? lineNumbers() : []
+      )
+    });
+  }, [showLineNumbers]);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    editor.dispatch({
+      effects: themeCompartmentRef.current.reconfigure(
+        getThemeExtensions(colorScheme)
+      )
+    });
   }, [colorScheme]);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const current = editor.state.doc.toString();
+    if (current === code) return;
+    suppressChangeRef.current = true;
+    editor.dispatch({
+      changes: {
+        from: 0,
+        to: current.length,
+        insert: code
+      }
+    });
+    suppressChangeRef.current = false;
+  }, [code]);
   useEffect(() => {
     const editor = editorRef.current;
     if (!editor) return;
     let cancelled = false;
     (async () => {
-      const { highlighter } = editor;
-      const loaded2 = highlighter.getLoadedLanguages();
-      if (normalizedLanguage !== "text" && normalizedLanguage !== "plaintext" && !loaded2.includes(normalizedLanguage)) {
-        try {
-          await highlighter.loadLanguage(normalizedLanguage);
-        } catch {
-        }
-      }
+      const extension = await loadLanguageExtension(normalizedLanguage);
       if (cancelled) return;
-      const resolvedLang = highlighter.getLoadedLanguages().includes(normalizedLanguage) ? normalizedLanguage : "text";
-      if (editor.input.value !== code) {
-        editor.input.value = code;
-      }
-      editor.updateOptions({
-        language: resolvedLang,
-        lineNumbers: showLineNumbers ? "on" : "off",
-        readOnly: !editable
+      editor.dispatch({
+        effects: languageCompartmentRef.current.reconfigure(extension)
       });
     })();
     return () => {
       cancelled = true;
     };
-  }, [code, normalizedLanguage, showLineNumbers, editable]);
+  }, [normalizedLanguage]);
+  useEffect(() => {
+    if (!editable || !selected) return;
+    const editor = editorRef.current;
+    if (!editor) return;
+    const raf = requestAnimationFrame(() => {
+      const nextCursor = cursorPlacement === "end" ? editor.state.doc.length : 0;
+      editor.focus();
+      editor.dispatch({
+        selection: EditorSelection.cursor(nextCursor),
+        scrollIntoView: true
+      });
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [cursorPlacement, editable, mounted, selected]);
   const fallbackLines = useMemo(() => code.split("\n"), [code]);
   const fallbackClassName = [
     showLineNumbers && lined,
@@ -219,17 +334,27 @@ const CodeBlockEditRenderer = ({
     !editable && bodyReadonly,
     !editable && semanticClassNames.bodyReadonly
   ].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(
-      "div",
-      {
-        ref: containerRef,
-        className: bodyClassName,
-        style: !loaded ? { height: 0, overflow: "hidden", visibility: "hidden" } : void 0
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    CodeBlockCard,
+    {
+      code,
+      language,
+      collapsible: !editable,
+      editable,
+      onLanguageChange,
+      children: [
+        !mounted && /* @__PURE__ */ jsx("pre", { className: fallbackClassName, children: /* @__PURE__ */ jsx("code", { children: fallbackLines.map((line, i) => /* @__PURE__ */ jsx("span", { className: "line", children: line }, `${line}-${i}`)) }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: containerRef,
+            className: bodyClassName,
+            style: !mounted ? { height: 0, overflow: "hidden", visibility: "hidden" } : void 0
+          }
+        )
+      ]
+    }
+  );
 };
 const CodeBlockRenderer = ({
   code,

package/dist/{language-AfAZN4lZ.js → language-V8hnDWn4.js}

@@ -10,18 +10,19 @@ function getMaterialIconSvg(iconName) {
 }
 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";
+var langInput = "_1pn9r4q1";
+var lang = "_1pn9r4q2";
+var langIcon = "_1pn9r4q3";
+var copyButton = "_1pn9r4q4";
+var bodyBackground = "_1pn9r4q5";
+var scroll = "_1pn9r4q6";
+var scrollCollapsed = "_1pn9r4q7";
+var body = "_1pn9r4q8";
+var bodyReadonly = "_1pn9r4q9";
+var expandWrap = "_1pn9r4qa";
+var expandButton = "_1pn9r4qb";
+var lined = "_1pn9r4qc";
+var linedWithNumbers = "_1pn9r4qd";
 const LANG_TO_ICON = {
   javascript: "javascript",
   js: "javascript",
@@ -112,20 +113,21 @@ const LanguageIcon = ({
 };
 export {
   LanguageIcon as L,
-  copyButton as a,
-  bodyBackground as b,
+  langInput as a,
+  copyButton as b,
   card as c,
-  expandButton as d,
+  bodyBackground as d,
   expandWrap as e,
-  scroll as f,
-  scrollCollapsed as g,
+  expandButton as f,
+  scroll as g,
   hasLanguageIcon as h,
-  lined as i,
-  linedWithNumbers as j,
-  body as k,
+  scrollCollapsed as i,
+  lined as j,
+  linedWithNumbers as k,
   lang as l,
-  bodyReadonly as m,
-  getMaterialIconSvg as n,
-  LANG_TO_ICON as o,
+  body as m,
+  bodyReadonly as n,
+  getMaterialIconSvg as o,
+  LANG_TO_ICON as p,
   semanticClassNames as s
 };

package/dist/rich-renderer-codeblock.css

@@ -1 +1 @@
-:root{--rc-text: #000;--rc-text-secondary: #27272a;--rc-text-tertiary: #71717a;--rc-text-quaternary: #a1a1aa;--rc-bg: #ffffff;--rc-bg-secondary: #fafafa;--rc-bg-tertiary: #f4f4f5;--rc-border: #f4f4f5;--rc-accent: #2563eb;--rc-accent-light: #2563eb20;--rc-link: #2563eb;--rc-code-text: #3f3f46;--rc-code-bg: #f4f4f5;--rc-hr-border: #e4e4e7;--rc-quote-border: #2563eb;--rc-quote-bg: #eff6ff;--rc-alert-info: #006bb7;--rc-alert-warning: #cc5500;--rc-alert-tip: #11cc00;--rc-alert-caution: #cc0011;--rc-alert-important: #5500cc;--rc-max-width: 700px;--rc-space-xs: 4px;--rc-space-sm: 8px;--rc-space-md: 16px;--rc-space-lg: 24px;--rc-space-xl: 32px;--rc-font-family-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs: .625em;--rc-font-size-xs: .75em;--rc-font-size-sm: .8125em;--rc-font-size-md: .875em;--rc-font-size-lg: 1.25em;--rc-font-size-base: 16px;--rc-font-size-small: 14px;--rc-line-height: 1.7;--rc-line-height-tight: 1.4;--rc-font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm: 4px;--rc-radius-md: 8px;--rc-radius-lg: 12px}:root.dark{--rc-text: #fafafa;--rc-text-secondary: #a1a1aa;--rc-text-tertiary: #71717a;--rc-text-quaternary: #52525b;--rc-bg: #09090b;--rc-bg-secondary: #18181b;--rc-bg-tertiary: #27272a;--rc-border: #27272a;--rc-accent: #60a5fa;--rc-accent-light: #60a5fa20;--rc-link: #60a5fa;--rc-code-text: #e4e4e7;--rc-code-bg: #27272a;--rc-hr-border: #27272a;--rc-quote-border: #60a5fa;--rc-quote-bg: #1e3a5f;--rc-alert-info: #7db9e5;--rc-alert-warning: #da864a;--rc-alert-tip: #54da48;--rc-alert-caution: #e16973;--rc-alert-important: #9966e0;--rc-max-width: 700px;--rc-space-xs: 4px;--rc-space-sm: 8px;--rc-space-md: 16px;--rc-space-lg: 24px;--rc-space-xl: 32px;--rc-font-family-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs: .625em;--rc-font-size-xs: .75em;--rc-font-size-sm: .8125em;--rc-font-size-md: .875em;--rc-font-size-lg: 1.25em;--rc-font-size-base: 16px;--rc-font-size-small: 14px;--rc-line-height: 1.7;--rc-line-height-tight: 1.4;--rc-font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm: 4px;--rc-radius-md: 8px;--rc-radius-lg: 12px}.axx50{--rc-text: #000;--rc-text-secondary: #27272a;--rc-text-tertiary: #71717a;--rc-text-quaternary: #a1a1aa;--rc-bg: #ffffff;--rc-bg-secondary: #fafafa;--rc-bg-tertiary: #f4f4f5;--rc-border: #f4f4f5;--rc-accent: #2563eb;--rc-accent-light: #2563eb20;--rc-link: #2563eb;--rc-code-text: #3f3f46;--rc-code-bg: #f4f4f5;--rc-hr-border: #e4e4e7;--rc-quote-border: #2563eb;--rc-quote-bg: #eff6ff;--rc-alert-info: #006bb7;--rc-alert-warning: #cc5500;--rc-alert-tip: #11cc00;--rc-alert-caution: #cc0011;--rc-alert-important: #5500cc;--rc-max-width: 700px;--rc-space-xs: 4px;--rc-space-sm: 8px;--rc-space-md: 16px;--rc-space-lg: 24px;--rc-space-xl: 32px;--rc-font-family-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs: .625em;--rc-font-size-xs: .75em;--rc-font-size-sm: .8125em;--rc-font-size-md: .875em;--rc-font-size-lg: 1.25em;--rc-font-size-base: 16px;--rc-font-size-small: 14px;--rc-line-height: 1.7;--rc-line-height-tight: 1.4;--rc-font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm: 4px;--rc-radius-md: 8px;--rc-radius-lg: 12px}.axx51{--rc-text: #000;--rc-text-secondary: #27272a;--rc-text-tertiary: #71717a;--rc-text-quaternary: #a1a1aa;--rc-bg: #ffffff;--rc-bg-secondary: #fafafa;--rc-bg-tertiary: #f4f4f5;--rc-border: #f4f4f5;--rc-accent: #2563eb;--rc-accent-light: #2563eb20;--rc-link: #2563eb;--rc-code-text: #3f3f46;--rc-code-bg: #f4f4f5;--rc-hr-border: #e4e4e7;--rc-quote-border: #2563eb;--rc-quote-bg: #eff6ff;--rc-alert-info: #006bb7;--rc-alert-warning: #cc5500;--rc-alert-tip: #11cc00;--rc-alert-caution: #cc0011;--rc-alert-important: #5500cc;--rc-max-width: 700px;--rc-space-xs: 4px;--rc-space-sm: 8px;--rc-space-md: 16px;--rc-space-lg: 24px;--rc-space-xl: 32px;--rc-font-family-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs: .625em;--rc-font-size-xs: .75em;--rc-font-size-sm: .8125em;--rc-font-size-md: .875em;--rc-font-size-lg: 1.25em;--rc-font-size-base: 16px;--rc-font-size-small: 14px;--rc-line-height: 1.8;--rc-line-height-tight: 1.4;--rc-font-family: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-radius-sm: 4px;--rc-radius-md: 8px;--rc-radius-lg: 12px}.axx52{--rc-text: #000;--rc-text-secondary: #27272a;--rc-text-tertiary: #71717a;--rc-text-quaternary: #a1a1aa;--rc-bg: #ffffff;--rc-bg-secondary: #fafafa;--rc-bg-tertiary: #f4f4f5;--rc-border: #f4f4f5;--rc-accent: #2563eb;--rc-accent-light: #2563eb20;--rc-link: #2563eb;--rc-code-text: #3f3f46;--rc-code-bg: #f4f4f5;--rc-hr-border: #e4e4e7;--rc-quote-border: #a1a1aa;--rc-quote-bg: #fafafa;--rc-alert-info: #006bb7;--rc-alert-warning: #cc5500;--rc-alert-tip: #11cc00;--rc-alert-caution: #cc0011;--rc-alert-important: #5500cc;--rc-max-width: none;--rc-space-xs: 2px;--rc-space-sm: 4px;--rc-space-md: 10px;--rc-space-lg: 16px;--rc-space-xl: 20px;--rc-font-family-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs: .625em;--rc-font-size-xs: .75em;--rc-font-size-sm: .8125em;--rc-font-size-md: .875em;--rc-font-size-lg: 1.25em;--rc-font-size-base: 14px;--rc-font-size-small: 12px;--rc-line-height: 1.5;--rc-line-height-tight: 1.3;--rc-font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm: 3px;--rc-radius-md: 6px;--rc-radius-lg: 8px}.dark .axx50,[data-theme=dark] .axx50,.dark.axx50,[data-theme=dark].axx50,.dark .axx51,[data-theme=dark] .axx51,.dark.axx51,[data-theme=dark].axx51,.dark .axx52,[data-theme=dark] .axx52,.dark.axx52,[data-theme=dark].axx52{--rc-text: #fafafa;--rc-text-secondary: #a1a1aa;--rc-text-tertiary: #71717a;--rc-text-quaternary: #52525b;--rc-bg: #09090b;--rc-bg-secondary: #18181b;--rc-bg-tertiary: #27272a;--rc-border: #27272a;--rc-accent: #60a5fa;--rc-accent-light: #60a5fa20;--rc-link: #60a5fa;--rc-code-text: #e4e4e7;--rc-code-bg: #27272a;--rc-hr-border: #27272a;--rc-quote-border: #60a5fa;--rc-quote-bg: #1e3a5f;--rc-alert-info: #7db9e5;--rc-alert-warning: #da864a;--rc-alert-tip: #54da48;--rc-alert-caution: #e16973;--rc-alert-important: #9966e0}._1pn9r4q0{--rr-code-accent: #737373;position:relative;margin:1.5rem 0;border-radius:.5rem;overflow:hidden;font-size:var(--rc-font-size-md);font-family:var(--rc-font-mono)}._1pn9r4q1{position:absolute;bottom:.75rem;right:.75rem;z-index:1;display:flex;align-items:center;gap:.375rem;font-size:var(--rc-font-size-md);opacity:.6;pointer-events:none}._1pn9r4q2{display:inline-flex;flex-shrink:0}._1pn9r4q2 svg{width:100%;height:100%}._1pn9r4q3{appearance:none;position:absolute;right:.5rem;top:.5rem;z-index:3;display:flex;align-items:center;justify-content:center;padding:.375rem;border-radius:.375rem;border:1px solid color-mix(in srgb,var(--rr-code-accent) 5%,transparent);background:color-mix(in srgb,var(--rr-code-accent) 80%,transparent);color:#fff;cursor:pointer;opacity:0;transition:opacity .2s ease;backdrop-filter:blur(8px)}._1pn9r4q0:hover ._1pn9r4q3{opacity:1}._1pn9r4q4{position:relative;background:color-mix(in srgb,var(--rr-code-accent) 5%,transparent);padding:1rem 0}._1pn9r4q5{position:relative;width:100%;overflow:auto}._1pn9r4q6{max-height:50vh;overflow:hidden}._1pn9r4q7{position:relative;overflow:auto;background-color:transparent!important}._1pn9r4q7>.shikicode.output{position:static!important;inset:auto!important}._1pn9r4q8>textarea.shikicode{display:none}._1pn9r4q9{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;padding:.5rem 0 .75rem;background:linear-gradient(to bottom,transparent 0%,var(--bg, var(--rc-bg-secondary)) 80%);pointer-events:none}._1pn9r4qa{appearance:none;border:none;background:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-size:var(--rc-font-size-xs);color:inherit;opacity:.7;pointer-events:auto}._1pn9r4qa:hover{opacity:1}._1pn9r4q0 .shikicode.input,._1pn9r4q0 .shikicode.output,._1pn9r4q0 .shikicode.output code,._1pn9r4q0 .shikicode.output .line,._1pn9r4q0 .shikicode.output .line span{font-variant-ligatures:none;font-kerning:none}._1pn9r4q0 .shikicode.input,._1pn9r4q0 .shikicode.output,._1pn9r4q7 pre,._1pn9r4q7 code,._1pn9r4q7 .line,._1pn9r4q7 .line span{font-family:var(--rc-font-mono)!important}._1pn9r4q0 pre{margin:0!important;padding:0!important;border-radius:0;font-size:1em}._1pn9r4q0 pre code{display:flex;flex-direction:column;font-family:var(--rc-font-mono)!important}._1pn9r4q0 .shiki,._1pn9r4q0 code,._1pn9r4q0 pre{background:transparent!important}[data-theme=dark] ._1pn9r4q0 .shiki-themes,[data-theme=dark] ._1pn9r4q0 .shiki-themes span{color:var(--shiki-dark)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;text-decoration:var(--shiki-dark-text-decoration)!important}._1pn9r4q7:has(.shikicode.input.line-numbers) .shikicode.output .line:before{background-color:transparent!important;color:color-mix(in srgb,var(--rc-text-secondary) 40%,transparent)!important;width:5em;padding-right:2em}._1pn9r4q7:not(:has(.shikicode.input.line-numbers)) .shikicode.output .line:before{display:none}._1pn9r4q0 .line{display:block;padding:0 1.25rem}._1pn9r4q0 .shikicode.input.line-numbers{padding-left:calc(5em + 1.25rem)}._1pn9r4q0 .shikicode.input:not(.line-numbers){padding-left:1.25rem}._1pn9r4q0 .line>span:last-child{margin-right:1.25rem}._1pn9r4q0 .line:after{content:" "}._1pn9r4q0 .highlighted,._1pn9r4q0 .diff{position:relative;overflow-wrap:break-word}._1pn9r4q0 .highlighted:before,._1pn9r4q0 .diff:before{content:"";position:absolute;left:0;top:0;height:100%;width:2px}._1pn9r4q0 .highlighted{background:color-mix(in srgb,var(--rr-code-accent) 20%,transparent)}._1pn9r4q0 .highlighted:before{background:var(--rr-code-accent)}._1pn9r4q0 .diff.add{background:#22c55e26}._1pn9r4q0 .diff.add:before{background:#22c55e}._1pn9r4q0 .diff.add:after{content:" +";position:absolute;left:0;color:#22c55e}._1pn9r4q0 .diff.remove{background:#ef444426}._1pn9r4q0 .diff.remove:before{background:#ef4444}._1pn9r4q0 .diff.remove:after{content:" -";position:absolute;left:0;color:#ef4444}._1pn9r4qb{counter-reset:shiki-line 0}._1pn9r4qb .line{counter-increment:shiki-line 1}._1pn9r4qb .line:before{content:counter(shiki-line);color:transparent;text-align:right;box-sizing:border-box;width:2em;display:inline-block;position:sticky;left:0}._1pn9r4qc .line:before{color:inherit;opacity:.4;width:5em;padding-right:2em}._1pn9r4q5 pre::-webkit-scrollbar-track{margin-left:1rem;margin-right:var(--sr-margin, 0)}._1pn9r4q5 pre::-webkit-scrollbar{background-color:transparent!important}._1pn9r4qd{font-family:var(--rc-font-mono);font-size:var(--rc-font-size-md);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-md);color:var(--rc-text-secondary);user-select:none}._1pn9r4qf{font-family:var(--rc-font-mono);font-size:.85em;text-transform:uppercase;letter-spacing:.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-md);line-height:1;transition:color .15s ease,background-color .15s ease}.rich-code-block{font-family:var(--rc-font-mono);font-size:var(--rc-font-size-md);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)}.rich-code-block pre{margin:0;padding:var(--rc-space-md);overflow-x:auto}.rich-code-block code{font-family:inherit;font-size:inherit;background:none;border:none;padding:0;color:inherit}.rich-code-block-header{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-md);color:var(--rc-text-secondary);user-select:none}.rich-code-block-lang{font-family:var(--rc-font-mono);font-size:.85em;text-transform:uppercase;letter-spacing:.05em}.rich-code-block-copy{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-md);line-height:1;transition:color .15s ease,background-color .15s ease}.rich-code-block-copy:hover{color:var(--rc-text);background-color:var(--rc-bg-secondary)}.rich-code-block-numbered pre{counter-reset:line}.rich-code-block-numbered .line{counter-increment:line}.rich-code-block-numbered .line:before{content:counter(line);display:inline-block;width:2.5em;margin-right:var(--rc-space-md);text-align:right;color:color-mix(in srgb,var(--rc-text-secondary) 40%,transparent)!important;opacity:.4;user-select:none;font-size:var(--rc-font-size-md)}
+:root{--rc-text: #000;--rc-text-secondary: #27272a;--rc-text-tertiary: #71717a;--rc-text-quaternary: #a1a1aa;--rc-bg: #ffffff;--rc-bg-secondary: #fafafa;--rc-bg-tertiary: #f4f4f5;--rc-border: #f4f4f5;--rc-accent: #2563eb;--rc-accent-light: #2563eb20;--rc-link: #2563eb;--rc-code-text: #3f3f46;--rc-code-bg: #f4f4f5;--rc-hr-border: #e4e4e7;--rc-quote-border: #2563eb;--rc-quote-bg: #eff6ff;--rc-alert-info: #006bb7;--rc-alert-warning: #cc5500;--rc-alert-tip: #11cc00;--rc-alert-caution: #cc0011;--rc-alert-important: #5500cc;--rc-max-width: 700px;--rc-shadow-top-bar: 0 8px 30px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);--rc-shadow-modal: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);--rc-shadow-menu: 0 1px 4px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.08);--rc-space-xs: 4px;--rc-space-sm: 8px;--rc-space-md: 16px;--rc-space-lg: 24px;--rc-space-xl: 32px;--rc-font-family-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs: .625em;--rc-font-size-xs: .75em;--rc-font-size-sm: .8125em;--rc-font-size-md: .875em;--rc-font-size-lg: 1.25em;--rc-font-size-base: 16px;--rc-font-size-small: 14px;--rc-line-height: 1.7;--rc-line-height-tight: 1.4;--rc-font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm: 4px;--rc-radius-md: 8px;--rc-radius-lg: 12px}:root.dark{--rc-text: #fafafa;--rc-text-secondary: #a1a1aa;--rc-text-tertiary: #71717a;--rc-text-quaternary: #52525b;--rc-bg: #09090b;--rc-bg-secondary: #18181b;--rc-bg-tertiary: #27272a;--rc-border: #27272a;--rc-accent: #60a5fa;--rc-accent-light: #60a5fa20;--rc-link: #60a5fa;--rc-code-text: #e4e4e7;--rc-code-bg: #27272a;--rc-hr-border: #27272a;--rc-quote-border: #60a5fa;--rc-quote-bg: #1e3a5f;--rc-alert-info: #7db9e5;--rc-alert-warning: #da864a;--rc-alert-tip: #54da48;--rc-alert-caution: #e16973;--rc-alert-important: #9966e0;--rc-max-width: 700px;--rc-shadow-top-bar: 0 8px 30px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3);--rc-shadow-modal: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.35);--rc-shadow-menu: 0 1px 4px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.4);--rc-space-xs: 4px;--rc-space-sm: 8px;--rc-space-md: 16px;--rc-space-lg: 24px;--rc-space-xl: 32px;--rc-font-family-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs: .625em;--rc-font-size-xs: .75em;--rc-font-size-sm: .8125em;--rc-font-size-md: .875em;--rc-font-size-lg: 1.25em;--rc-font-size-base: 16px;--rc-font-size-small: 14px;--rc-line-height: 1.7;--rc-line-height-tight: 1.4;--rc-font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm: 4px;--rc-radius-md: 8px;--rc-radius-lg: 12px}.axx50{--rc-text: #000;--rc-text-secondary: #27272a;--rc-text-tertiary: #71717a;--rc-text-quaternary: #a1a1aa;--rc-bg: #ffffff;--rc-bg-secondary: #fafafa;--rc-bg-tertiary: #f4f4f5;--rc-border: #f4f4f5;--rc-accent: #2563eb;--rc-accent-light: #2563eb20;--rc-link: #2563eb;--rc-code-text: #3f3f46;--rc-code-bg: #f4f4f5;--rc-hr-border: #e4e4e7;--rc-quote-border: #2563eb;--rc-quote-bg: #eff6ff;--rc-alert-info: #006bb7;--rc-alert-warning: #cc5500;--rc-alert-tip: #11cc00;--rc-alert-caution: #cc0011;--rc-alert-important: #5500cc;--rc-max-width: 700px;--rc-shadow-top-bar: 0 8px 30px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);--rc-shadow-modal: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);--rc-shadow-menu: 0 1px 4px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.08);--rc-space-xs: 4px;--rc-space-sm: 8px;--rc-space-md: 16px;--rc-space-lg: 24px;--rc-space-xl: 32px;--rc-font-family-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs: .625em;--rc-font-size-xs: .75em;--rc-font-size-sm: .8125em;--rc-font-size-md: .875em;--rc-font-size-lg: 1.25em;--rc-font-size-base: 16px;--rc-font-size-small: 14px;--rc-line-height: 1.7;--rc-line-height-tight: 1.4;--rc-font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm: 4px;--rc-radius-md: 8px;--rc-radius-lg: 12px}.axx51{--rc-text: #000;--rc-text-secondary: #27272a;--rc-text-tertiary: #71717a;--rc-text-quaternary: #a1a1aa;--rc-bg: #ffffff;--rc-bg-secondary: #fafafa;--rc-bg-tertiary: #f4f4f5;--rc-border: #f4f4f5;--rc-accent: #2563eb;--rc-accent-light: #2563eb20;--rc-link: #2563eb;--rc-code-text: #3f3f46;--rc-code-bg: #f4f4f5;--rc-hr-border: #e4e4e7;--rc-quote-border: #2563eb;--rc-quote-bg: #eff6ff;--rc-alert-info: #006bb7;--rc-alert-warning: #cc5500;--rc-alert-tip: #11cc00;--rc-alert-caution: #cc0011;--rc-alert-important: #5500cc;--rc-max-width: 700px;--rc-shadow-top-bar: 0 8px 30px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);--rc-shadow-modal: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);--rc-shadow-menu: 0 1px 4px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.08);--rc-space-xs: 4px;--rc-space-sm: 8px;--rc-space-md: 16px;--rc-space-lg: 24px;--rc-space-xl: 32px;--rc-font-family-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs: .625em;--rc-font-size-xs: .75em;--rc-font-size-sm: .8125em;--rc-font-size-md: .875em;--rc-font-size-lg: 1.25em;--rc-font-size-base: 16px;--rc-font-size-small: 14px;--rc-line-height: 1.8;--rc-line-height-tight: 1.4;--rc-font-family: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-radius-sm: 4px;--rc-radius-md: 8px;--rc-radius-lg: 12px}.axx52{--rc-text: #000;--rc-text-secondary: #27272a;--rc-text-tertiary: #71717a;--rc-text-quaternary: #a1a1aa;--rc-bg: #ffffff;--rc-bg-secondary: #fafafa;--rc-bg-tertiary: #f4f4f5;--rc-border: #f4f4f5;--rc-accent: #2563eb;--rc-accent-light: #2563eb20;--rc-link: #2563eb;--rc-code-text: #3f3f46;--rc-code-bg: #f4f4f5;--rc-hr-border: #e4e4e7;--rc-quote-border: #a1a1aa;--rc-quote-bg: #fafafa;--rc-alert-info: #006bb7;--rc-alert-warning: #cc5500;--rc-alert-tip: #11cc00;--rc-alert-caution: #cc0011;--rc-alert-important: #5500cc;--rc-max-width: none;--rc-shadow-top-bar: 0 8px 30px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);--rc-shadow-modal: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);--rc-shadow-menu: 0 1px 4px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.08);--rc-space-xs: 2px;--rc-space-sm: 4px;--rc-space-md: 10px;--rc-space-lg: 16px;--rc-space-xl: 20px;--rc-font-family-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs: .625em;--rc-font-size-xs: .75em;--rc-font-size-sm: .8125em;--rc-font-size-md: .875em;--rc-font-size-lg: 1.25em;--rc-font-size-base: 14px;--rc-font-size-small: 12px;--rc-line-height: 1.5;--rc-line-height-tight: 1.3;--rc-font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm: 3px;--rc-radius-md: 6px;--rc-radius-lg: 8px}.dark .axx50,[data-theme=dark] .axx50,.dark.axx50,[data-theme=dark].axx50,.dark .axx51,[data-theme=dark] .axx51,.dark.axx51,[data-theme=dark].axx51,.dark .axx52,[data-theme=dark] .axx52,.dark.axx52,[data-theme=dark].axx52{--rc-text: #fafafa;--rc-text-secondary: #a1a1aa;--rc-text-tertiary: #71717a;--rc-text-quaternary: #52525b;--rc-bg: #09090b;--rc-bg-secondary: #18181b;--rc-bg-tertiary: #27272a;--rc-border: #27272a;--rc-accent: #60a5fa;--rc-accent-light: #60a5fa20;--rc-link: #60a5fa;--rc-code-text: #e4e4e7;--rc-code-bg: #27272a;--rc-hr-border: #27272a;--rc-quote-border: #60a5fa;--rc-quote-bg: #1e3a5f;--rc-alert-info: #7db9e5;--rc-alert-warning: #da864a;--rc-alert-tip: #54da48;--rc-alert-caution: #e16973;--rc-alert-important: #9966e0;--rc-shadow-top-bar: 0 8px 30px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3);--rc-shadow-modal: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.35);--rc-shadow-menu: 0 1px 4px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.4)}._1pn9r4q0{--rr-code-accent: #737373;position:relative;margin:1.5rem 0;border-radius:.5rem;overflow:hidden;font-size:var(--rc-font-size-md);font-family:var(--rc-font-mono)}._1pn9r4q1{appearance:none;border:none;background:transparent;color:inherit;font:inherit;padding:0;outline:none;width:8em;opacity:1}._1pn9r4q1::placeholder{opacity:.5}._1pn9r4q2{position:absolute;bottom:.75rem;right:.75rem;z-index:1;display:flex;align-items:center;gap:.375rem;font-size:var(--rc-font-size-md);opacity:.6;pointer-events:none}._1pn9r4q2:has(._1pn9r4q1){pointer-events:auto}._1pn9r4q3{display:inline-flex;flex-shrink:0}._1pn9r4q3 svg{width:100%;height:100%}._1pn9r4q4{appearance:none;position:absolute;right:.5rem;top:.5rem;z-index:3;display:flex;align-items:center;justify-content:center;padding:.375rem;border-radius:.375rem;border:1px solid color-mix(in srgb,var(--rr-code-accent) 5%,transparent);background:color-mix(in srgb,var(--rr-code-accent) 80%,transparent);color:#fff;cursor:pointer;opacity:0;transition:opacity .2s ease;backdrop-filter:blur(8px)}._1pn9r4q0:hover ._1pn9r4q4{opacity:1}._1pn9r4q5{position:relative;background:color-mix(in srgb,var(--rr-code-accent) 5%,transparent);padding:1rem 0}._1pn9r4q6{position:relative;width:100%;overflow:auto}._1pn9r4q7{max-height:50vh;overflow:hidden}._1pn9r4q8{position:relative;overflow:auto;background-color:transparent!important}._1pn9r4q8 .cm-editor{background:transparent;color:var(--rc-text);font-family:var(--rc-font-mono)}._1pn9r4q8 .cm-scroller{font-family:var(--rc-font-mono)!important;line-height:1.6}._1pn9r4q8 .cm-content{padding-top:0;padding-bottom:0;padding-left:1.25rem;padding-right:1.25rem;min-height:1.6em}._1pn9r4q8:has(.cm-gutters) .cm-content{padding-left:.5rem;padding-right:1.25rem}._1pn9r4q8 .cm-line{padding:0}._1pn9r4q8 .cm-gutters{background:transparent;border-right:none;padding-left:1.25rem}._1pn9r4q8 .cm-lineNumbers .cm-gutterElement{min-width:3em;text-align:right;padding-right:2em;color:color-mix(in srgb,var(--rc-text-secondary) 40%,transparent)!important}._1pn9r4q8>.shikicode.output{position:static!important;inset:auto!important}._1pn9r4q9>textarea.shikicode{display:none}._1pn9r4qa{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;padding:.5rem 0 .75rem;background:linear-gradient(to bottom,transparent 0%,var(--bg, var(--rc-bg-secondary)) 80%);pointer-events:none}._1pn9r4qb{appearance:none;border:none;background:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-size:var(--rc-font-size-xs);color:inherit;opacity:.7;pointer-events:auto}._1pn9r4qb:hover{opacity:1}._1pn9r4q0 .shikicode.input,._1pn9r4q0 .shikicode.output,._1pn9r4q0 .shikicode.output code,._1pn9r4q0 .shikicode.output .line,._1pn9r4q0 .shikicode.output .line span{font-variant-ligatures:none;font-kerning:none}._1pn9r4q0 .shikicode.input,._1pn9r4q0 .shikicode.output,._1pn9r4q8 pre,._1pn9r4q8 code,._1pn9r4q8 .line,._1pn9r4q8 .line span{font-family:var(--rc-font-mono)!important}._1pn9r4q0 pre{margin:0!important;padding:0!important;border-radius:0;font-size:1em}._1pn9r4q0 pre code{display:flex;flex-direction:column;font-family:var(--rc-font-mono)!important}._1pn9r4q0 .shiki,._1pn9r4q0 code,._1pn9r4q0 pre{background:transparent!important}[data-theme=dark] ._1pn9r4q0 .shiki-themes,[data-theme=dark] ._1pn9r4q0 .shiki-themes span{color:var(--shiki-dark)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;text-decoration:var(--shiki-dark-text-decoration)!important}._1pn9r4q8:has(.shikicode.input.line-numbers) .shikicode.output .line:before{background-color:transparent!important;color:color-mix(in srgb,var(--rc-text-secondary) 40%,transparent)!important;width:5em;padding-right:2em}._1pn9r4q8:not(:has(.shikicode.input.line-numbers)) .shikicode.output .line:before{display:none}._1pn9r4q0 .line{display:block;padding:0 1.25rem}._1pn9r4q0 .shikicode.input.line-numbers{padding-left:calc(5em + 1.25rem)}._1pn9r4q0 .shikicode.input:not(.line-numbers){padding-left:1.25rem}._1pn9r4q0 .line>span:last-child{margin-right:1.25rem}._1pn9r4q0 .line:after{content:" "}._1pn9r4q0 .highlighted,._1pn9r4q0 .diff{position:relative;overflow-wrap:break-word}._1pn9r4q0 .highlighted:before,._1pn9r4q0 .diff:before{content:"";position:absolute;left:0;top:0;height:100%;width:2px}._1pn9r4q0 .highlighted{background:color-mix(in srgb,var(--rr-code-accent) 20%,transparent)}._1pn9r4q0 .highlighted:before{background:var(--rr-code-accent)}._1pn9r4q0 .diff.add{background:#22c55e26}._1pn9r4q0 .diff.add:before{background:#22c55e}._1pn9r4q0 .diff.add:after{content:" +";position:absolute;left:0;color:#22c55e}._1pn9r4q0 .diff.remove{background:#ef444426}._1pn9r4q0 .diff.remove:before{background:#ef4444}._1pn9r4q0 .diff.remove:after{content:" -";position:absolute;left:0;color:#ef4444}._1pn9r4qc{counter-reset:shiki-line 0}._1pn9r4qc .line{counter-increment:shiki-line 1}._1pn9r4qc .line:before{content:counter(shiki-line);color:transparent;text-align:right;box-sizing:border-box;width:2em;display:inline-block;position:sticky;left:0}._1pn9r4qd .line:before{color:inherit;opacity:.4;width:5em;padding-right:2em}._1pn9r4q6 pre::-webkit-scrollbar-track{margin-left:1rem;margin-right:var(--sr-margin, 0)}._1pn9r4q6 pre::-webkit-scrollbar{background-color:transparent!important}._1pn9r4qe{font-family:var(--rc-font-mono);font-size:var(--rc-font-size-md);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)}._1pn9r4qf{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-md);color:var(--rc-text-secondary);user-select:none}._1pn9r4qg{font-family:var(--rc-font-mono);font-size:.85em;text-transform:uppercase;letter-spacing:.05em}._1pn9r4qh{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-md);line-height:1;transition:color .15s ease,background-color .15s ease}.rich-code-block{font-family:var(--rc-font-mono);font-size:var(--rc-font-size-md);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)}.rich-code-block pre{margin:0;padding:var(--rc-space-md);overflow-x:auto}.rich-code-block code{font-family:inherit;font-size:inherit;background:none;border:none;padding:0;color:inherit}.rich-code-block-header{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-md);color:var(--rc-text-secondary);user-select:none}.rich-code-block-lang{font-family:var(--rc-font-mono);font-size:.85em;text-transform:uppercase;letter-spacing:.05em}.rich-code-block-copy{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-md);line-height:1;transition:color .15s ease,background-color .15s ease}.rich-code-block-copy:hover{color:var(--rc-text);background-color:var(--rc-bg-secondary)}.rich-code-block-numbered pre{counter-reset:line}.rich-code-block-numbered .line{counter-increment:line}.rich-code-block-numbered .line:before{content:counter(line);display:inline-block;width:2.5em;margin-right:var(--rc-space-md);text-align:right;color:color-mix(in srgb,var(--rc-text-secondary) 40%,transparent)!important;opacity:.4;user-select:none;font-size:var(--rc-font-size-md)}

package/dist/static.d.ts

@@ -0,0 +1,2 @@
+export { CodeBlockRenderer } from './CodeBlockRenderer';
+//# sourceMappingURL=static.d.ts.map

package/dist/static.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"static.d.ts","sourceRoot":"","sources":["../src/static.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/styles.css.d.ts

@@ -14,6 +14,7 @@ export declare const semanticClassNames: {
     readonly linedWithNumbers: "rr-code-lined-ln";
 };
 export declare const card: string;
+export declare const langInput: string;
 export declare const lang: string;
 export declare const langIcon: string;
 export declare const copyButton: string;

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

@@ -1 +1 @@
-{"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,QAUf,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;AA2IF,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"}
+{"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,QAUf,CAAA;AAGF,eAAO,MAAM,SAAS,QAepB,CAAA;AAGF,eAAO,MAAM,IAAI,QAgBf,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;AAsDrC,eAAO,MAAM,UAAU,QAUrB,CAAA;AAEF,eAAO,MAAM,YAAY,QAiBvB,CAAA;AA2IF,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.37",
+  "version": "0.0.39",
   "description": "Code block renderer with Shiki syntax highlighting",
   "license": "MIT",
   "type": "module",
@@ -9,6 +9,10 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
+    "./static": {
+      "import": "./dist/static.mjs",
+      "types": "./dist/static.d.ts"
+    },
     "./shiki": {
       "import": "./dist/shiki.mjs",
       "types": "./dist/shiki.d.ts"
@@ -28,13 +32,16 @@
     "dist"
   ],
   "dependencies": {
+    "@codemirror/commands": "^6.10.2",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/view": "^6.39.15",
     "@iconify-json/material-icon-theme": "^1.2.52",
     "@iconify/utils": "^2.3.0",
     "lucide-react": "^0.574.0",
     "shiki": "^3.22.0",
-    "shikicode": "^0.0.0",
-    "@haklex/rich-editor": "0.0.37",
-    "@haklex/rich-style-token": "0.0.37"
+    "@haklex/rich-editor": "0.0.39",
+    "@haklex/rich-style-token": "0.0.39",
+    "@haklex/cm-editor": "0.0.39"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",