@lobehub/ui 1.2.0 → 1.3.0

package/lib/DraggablePanel/index.js

@@ -35,183 +35,185 @@ module.exports = __toCommonJS(DraggablePanel_exports);
 var import_ahooks = require("ahooks");
 var import_lucide_react = require("lucide-react");
 var import_re_resizable = require("re-resizable");
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_react_layout_kit = require("react-layout-kit");
 var import_use_merge_value = __toESM(require("use-merge-value"));
 var import_style = require("./style");
 var import_utils = require("./utils");
 var DEFAULT_HEIGHT = 180;
 var DEFAULT_WIDTH = 280;
-var DraggablePanel = ({
-  pin = "true",
-  mode = "fixed",
-  children,
-  placement = "right",
-  resize,
-  style,
-  size,
-  defaultSize: customizeDefaultSize,
-  minWidth,
-  minHeight,
-  onSizeChange,
-  onSizeDragging,
-  expandable = true,
-  expand,
-  defaultExpand = true,
-  onExpandChange,
-  className,
-  showHandlerWhenUnexpand,
-  destroyOnClose,
-  hanlderStyle
-}) => {
-  const ref = (0, import_react.useRef)(null);
-  const isHovering = (0, import_ahooks.useHover)(ref);
-  const isVertical = placement === "top" || placement === "bottom";
-  const { styles, cx } = (0, import_style.useStyle)("draggable-panel");
-  const [isExpand, setIsExpand] = (0, import_use_merge_value.default)(defaultExpand, {
-    value: expand,
-    onChange: onExpandChange
-  });
-  (0, import_react.useEffect)(() => {
-    if (pin)
-      return;
-    if (isHovering && !isExpand) {
-      setIsExpand(true);
-    } else if (!isHovering && isExpand) {
-      setIsExpand(false);
-    }
-  }, [pin, isHovering, isExpand]);
-  const [showExpand, setShowExpand] = (0, import_react.useState)(true);
-  const canResizing = resize !== false && isExpand;
-  const resizeHandleClassNames = (0, import_react.useMemo)(() => {
-    if (!canResizing)
-      return {};
-    return {
-      [(0, import_utils.revesePlacement)(placement)]: styles[`${(0, import_utils.revesePlacement)(placement)}Handle`]
+var DraggablePanel = (0, import_react.memo)(
+  ({
+    pin = "true",
+    mode = "fixed",
+    children,
+    placement = "right",
+    resize,
+    style,
+    size,
+    defaultSize: customizeDefaultSize,
+    minWidth,
+    minHeight,
+    onSizeChange,
+    onSizeDragging,
+    expandable = true,
+    expand,
+    defaultExpand = true,
+    onExpandChange,
+    className,
+    showHandlerWhenUnexpand,
+    destroyOnClose,
+    hanlderStyle
+  }) => {
+    const ref = (0, import_react.useRef)(null);
+    const isHovering = (0, import_ahooks.useHover)(ref);
+    const isVertical = placement === "top" || placement === "bottom";
+    const { styles, cx } = (0, import_style.useStyle)("draggable-panel");
+    const [isExpand, setIsExpand] = (0, import_use_merge_value.default)(defaultExpand, {
+      value: expand,
+      onChange: onExpandChange
+    });
+    (0, import_react.useEffect)(() => {
+      if (pin)
+        return;
+      if (isHovering && !isExpand) {
+        setIsExpand(true);
+      } else if (!isHovering && isExpand) {
+        setIsExpand(false);
+      }
+    }, [pin, isHovering, isExpand]);
+    const [showExpand, setShowExpand] = (0, import_react.useState)(true);
+    const canResizing = resize !== false && isExpand;
+    const resizeHandleClassNames = (0, import_react.useMemo)(() => {
+      if (!canResizing)
+        return {};
+      return {
+        [(0, import_utils.revesePlacement)(placement)]: styles[`${(0, import_utils.revesePlacement)(placement)}Handle`]
+      };
+    }, [canResizing, placement]);
+    const resizing = {
+      top: false,
+      bottom: false,
+      right: false,
+      left: false,
+      topRight: false,
+      bottomRight: false,
+      bottomLeft: false,
+      topLeft: false,
+      [(0, import_utils.revesePlacement)(placement)]: true,
+      ...resize
     };
-  }, [canResizing, placement]);
-  const resizing = {
-    top: false,
-    bottom: false,
-    right: false,
-    left: false,
-    topRight: false,
-    bottomRight: false,
-    bottomLeft: false,
-    topLeft: false,
-    [(0, import_utils.revesePlacement)(placement)]: true,
-    ...resize
-  };
-  const defaultSize = (0, import_react.useMemo)(() => {
-    if (isVertical)
+    const defaultSize = (0, import_react.useMemo)(() => {
+      if (isVertical)
+        return {
+          width: "100%",
+          height: DEFAULT_HEIGHT,
+          ...customizeDefaultSize
+        };
       return {
-        width: "100%",
-        height: DEFAULT_HEIGHT,
+        width: DEFAULT_WIDTH,
+        height: "100%",
         ...customizeDefaultSize
       };
-    return {
-      width: DEFAULT_WIDTH,
-      height: "100%",
-      ...customizeDefaultSize
+    }, [isVertical]);
+    const sizeProps = isExpand ? {
+      minWidth: typeof minWidth === "number" ? Math.max(minWidth, 0) : 280,
+      minHeight: typeof minHeight === "number" ? Math.max(minHeight, 0) : void 0,
+      defaultSize,
+      size
+    } : isVertical ? {
+      minHeight: 0,
+      size: { height: 0 }
+    } : {
+      minWidth: 0,
+      size: { width: 0 }
     };
-  }, [isVertical]);
-  const sizeProps = isExpand ? {
-    minWidth: typeof minWidth === "number" ? Math.max(minWidth, 0) : 280,
-    minHeight: typeof minHeight === "number" ? Math.max(minHeight, 0) : void 0,
-    defaultSize,
-    size
-  } : isVertical ? {
-    minHeight: 0,
-    size: { height: 0 }
-  } : {
-    minWidth: 0,
-    size: { width: 0 }
-  };
-  const { Arrow, className: arrowPlacement } = (0, import_react.useMemo)(() => {
-    switch (placement) {
-      case "top":
-        return { className: "Bottom", Arrow: import_lucide_react.ChevronDown };
-      case "bottom":
-        return { className: "Top", Arrow: import_lucide_react.ChevronUp };
-      case "right":
-        return { className: "Left", Arrow: import_lucide_react.ChevronLeft };
-      case "left":
-        return { className: "Right", Arrow: import_lucide_react.ChevronRight };
-    }
-  }, [styles, placement]);
-  const handler = (
-    // @ts-ignore
-    /* @__PURE__ */ import_react.default.createElement(
-      import_react_layout_kit.Center,
-      {
-        className: cx(styles[`toggle${arrowPlacement}`]),
-        style: { opacity: isExpand ? !pin ? 0 : void 0 : showHandlerWhenUnexpand ? 1 : 0 }
-      },
-      /* @__PURE__ */ import_react.default.createElement(
+    const { Arrow, className: arrowPlacement } = (0, import_react.useMemo)(() => {
+      switch (placement) {
+        case "top":
+          return { className: "Bottom", Arrow: import_lucide_react.ChevronDown };
+        case "bottom":
+          return { className: "Top", Arrow: import_lucide_react.ChevronUp };
+        case "right":
+          return { className: "Left", Arrow: import_lucide_react.ChevronLeft };
+        case "left":
+          return { className: "Right", Arrow: import_lucide_react.ChevronRight };
+      }
+    }, [styles, placement]);
+    const handler = (
+      // @ts-ignore
+      /* @__PURE__ */ React.createElement(
         import_react_layout_kit.Center,
         {
-          style: hanlderStyle,
-          onClick: () => {
-            setIsExpand(!isExpand);
-          }
+          className: cx(styles[`toggle${arrowPlacement}`]),
+          style: { opacity: isExpand ? !pin ? 0 : void 0 : showHandlerWhenUnexpand ? 1 : 0 }
         },
-        /* @__PURE__ */ import_react.default.createElement(
-          "div",
+        /* @__PURE__ */ React.createElement(
+          import_react_layout_kit.Center,
           {
-            className: styles.handlerIcon,
-            style: { transform: `rotate(${isExpand ? 180 : 0}deg)` }
+            style: hanlderStyle,
+            onClick: () => {
+              setIsExpand(!isExpand);
+            }
           },
-          /* @__PURE__ */ import_react.default.createElement(Arrow, { size: 16, strokeWidth: 1.5 })
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: styles.handlerIcon,
+              style: { transform: `rotate(${isExpand ? 180 : 0}deg)` }
+            },
+            /* @__PURE__ */ React.createElement(Arrow, { size: 16, strokeWidth: 1.5 })
+          )
         )
       )
-    )
-  );
-  const inner = (
-    // @ts-ignore
-    /* @__PURE__ */ import_react.default.createElement(
-      import_re_resizable.Resizable,
-      {
-        ...sizeProps,
-        style,
-        className: styles.panel,
-        enable: canResizing ? resizing : void 0,
-        handleClasses: resizeHandleClassNames,
-        onResizeStop: (e, direction, ref2, delta) => {
-          setShowExpand(true);
-          onSizeChange == null ? void 0 : onSizeChange(delta, {
-            width: ref2.style.width,
-            height: ref2.style.height
-          });
-        },
-        onResizeStart: () => {
-          setShowExpand(false);
+    );
+    const inner = (
+      // @ts-ignore
+      /* @__PURE__ */ React.createElement(
+        import_re_resizable.Resizable,
+        {
+          ...sizeProps,
+          style,
+          className: styles.panel,
+          enable: canResizing ? resizing : void 0,
+          handleClasses: resizeHandleClassNames,
+          onResizeStop: (e, direction, ref2, delta) => {
+            setShowExpand(true);
+            onSizeChange == null ? void 0 : onSizeChange(delta, {
+              width: ref2.style.width,
+              height: ref2.style.height
+            });
+          },
+          onResizeStart: () => {
+            setShowExpand(false);
+          },
+          onResize: (_, direction, ref2, delta) => {
+            onSizeDragging == null ? void 0 : onSizeDragging(delta, {
+              width: ref2.style.width,
+              height: ref2.style.height
+            });
+          }
         },
-        onResize: (_, direction, ref2, delta) => {
-          onSizeDragging == null ? void 0 : onSizeDragging(delta, {
-            width: ref2.style.width,
-            height: ref2.style.height
-          });
-        }
+        children
+      )
+    );
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        className: cx(
+          styles.container,
+          // @ts-ignore
+          styles[mode === "fixed" ? "fixed" : `${placement}Float`],
+          className
+        ),
+        style: { [`border${arrowPlacement}Width`]: 1 }
       },
-      children
-    )
-  );
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      ref,
-      className: cx(
-        styles.container,
-        // @ts-ignore
-        styles[mode === "fixed" ? "fixed" : `${placement}Float`],
-        className
-      ),
-      style: { [`border${arrowPlacement}Width`]: 1 }
-    },
-    expandable && showExpand && handler,
-    destroyOnClose ? isExpand && inner : inner
-  );
-};
-var DraggablePanel_default = import_react.default.memo(DraggablePanel);
+      expandable && showExpand && handler,
+      destroyOnClose ? isExpand && inner : inner
+    );
+  }
+);
+var DraggablePanel_default = DraggablePanel;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {});

package/lib/DraggablePanel/style.js

@@ -23,7 +23,7 @@ __export(style_exports, {
 });
 module.exports = __toCommonJS(style_exports);
 var import_antd_style = require("antd-style");
-var offset = 17;
+var offset = 16;
 var toggleLength = 40;
 var toggleShort = 16;
 var useStyle = (0, import_antd_style.createStyles)(({ token }, prefix) => {
@@ -222,7 +222,6 @@ var useStyle = (0, import_antd_style.createStyles)(({ token }, prefix) => {
       `${prefix}-fixed`,
       import_antd_style.css`
         overflow: hidden;
-        background: ${token.colorBgContainer};
         transition: all 0.2s ${token.motionEaseOut};
       `
     ),

package/lib/DraggablePanel/utils.d.ts

@@ -1,2 +1,2 @@
 import { placementType } from './index';
-export declare const revesePlacement: (placement: placementType) => "left" | "right" | "bottom" | "top";
+export declare const revesePlacement: (placement: placementType) => "top" | "left" | "right" | "bottom";

package/lib/EditableText/ControlInput.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { InputProps } from 'antd';
+export interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {
+    onChange?: (value: string) => void;
+    onValueChanging?: (value: string) => void;
+    value?: string;
+    onChangeEnd?: (value: string) => void;
+}
+export declare const ControlInput: import("react").NamedExoticComponent<ControlInputProps>;

package/lib/EditableText/ControlInput.js

@@ -0,0 +1,101 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/EditableText/ControlInput.tsx
+var ControlInput_exports = {};
+__export(ControlInput_exports, {
+  ControlInput: () => ControlInput
+});
+module.exports = __toCommonJS(ControlInput_exports);
+var import_antd = require("antd");
+var import_react = require("react");
+var ControlInput = (0, import_react.memo)(
+  ({ value, onChange, onValueChanging, onChangeEnd, ...props }) => {
+    const [input, setInput] = (0, import_react.useState)(value || "");
+    const inputRef = (0, import_react.useRef)(null);
+    const isChineseInput = (0, import_react.useRef)(false);
+    const isFocusing = (0, import_react.useRef)(false);
+    const updateValue = (0, import_react.useCallback)(() => {
+      onChange == null ? void 0 : onChange(input);
+    }, [input]);
+    (0, import_react.useEffect)(() => {
+      if (typeof value !== "undefined")
+        setInput(value);
+    }, [value]);
+    return /* @__PURE__ */ React.createElement(
+      import_antd.Input,
+      {
+        ref: inputRef,
+        ...props,
+        value: input,
+        onCompositionStart: () => {
+          isChineseInput.current = true;
+        },
+        onCompositionEnd: () => {
+          isChineseInput.current = false;
+        },
+        onFocus: () => {
+          isFocusing.current = true;
+        },
+        onBlur: () => {
+          isFocusing.current = false;
+          onChangeEnd == null ? void 0 : onChangeEnd(input);
+        },
+        onChange: (e) => {
+          setInput(e.target.value);
+          onValueChanging == null ? void 0 : onValueChanging(e.target.value);
+        },
+        onPressEnter: (e) => {
+          if (!e.shiftKey && !isChineseInput.current) {
+            e.preventDefault();
+            updateValue();
+            isFocusing.current = false;
+            onChangeEnd == null ? void 0 : onChangeEnd(input);
+          }
+        },
+        suffix: value === input ? /* @__PURE__ */ React.createElement("span", null) : /* @__PURE__ */ React.createElement(import_antd.ConfigProvider, { theme: { token: { fontSize: 14 } } }, /* @__PURE__ */ React.createElement(
+          import_antd.Button,
+          {
+            type: "link",
+            size: "small",
+            onClick: () => {
+              setInput(value);
+            },
+            style: { padding: 0 }
+          },
+          "重置"
+        ), /* @__PURE__ */ React.createElement(
+          import_antd.Button,
+          {
+            type: "link",
+            size: "small",
+            style: { padding: 0 },
+            onClick: () => {
+              updateValue();
+            }
+          },
+          "保存 ↵"
+        ))
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ControlInput
+});

package/lib/EditableText/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ControlInputProps } from './ControlInput';
+export declare type EditableTextProps = ControlInputProps;
+declare const EditableText: import("react").NamedExoticComponent<ControlInputProps>;
+export default EditableText;

package/lib/EditableText/index.js

@@ -0,0 +1,52 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/EditableText/index.tsx
+var EditableText_exports = {};
+__export(EditableText_exports, {
+  default: () => EditableText_default
+});
+module.exports = __toCommonJS(EditableText_exports);
+var import_icons = require("@ant-design/icons");
+var import_antd = require("antd");
+var import_react = require("react");
+var import_react_layout_kit = require("react-layout-kit");
+var import_ControlInput = require("./ControlInput");
+var EditableText = (0, import_react.memo)(({ value, onChange }) => {
+  const [edited, setEdited] = (0, import_react.useState)(false);
+  return edited ? /* @__PURE__ */ React.createElement(
+    import_ControlInput.ControlInput,
+    {
+      value,
+      onChangeEnd: () => {
+        setEdited(false);
+      },
+      onChange
+    }
+  ) : /* @__PURE__ */ React.createElement(import_react_layout_kit.Flexbox, { horizontal: true, gap: 8 }, value, /* @__PURE__ */ React.createElement(import_antd.Tooltip, { title: "编辑" }, /* @__PURE__ */ React.createElement(
+    import_icons.EditOutlined,
+    {
+      onClick: () => {
+        setEdited(!edited);
+      }
+    }
+  )));
+});
+var EditableText_default = EditableText;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/Highlighter/SyntaxHighlighter/Prism.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface PrismProps {
+    children: string;
+    language: string;
+    isDarkMode: boolean;
+}
+export declare const Prism: import("react").NamedExoticComponent<PrismProps>;

package/lib/Highlighter/SyntaxHighlighter/Prism.js

@@ -0,0 +1,41 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Highlighter/SyntaxHighlighter/Prism.tsx
+var Prism_exports = {};
+__export(Prism_exports, {
+  Prism: () => Prism
+});
+module.exports = __toCommonJS(Prism_exports);
+var import_prism_react_renderer = require("prism-react-renderer");
+var import_react = require("react");
+var Prism = (0, import_react.memo)(({ children, language, isDarkMode }) => {
+  return /* @__PURE__ */ React.createElement(
+    import_prism_react_renderer.Highlight,
+    {
+      theme: isDarkMode ? import_prism_react_renderer.themes.jettwaveDark : import_prism_react_renderer.themes.jettwaveLight,
+      code: children,
+      language
+    },
+    ({ className, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ React.createElement("pre", { className, style }, tokens.map((line, i) => /* @__PURE__ */ React.createElement("div", { key: i, ...getLineProps({ line, key: i }) }, line.map((token, key) => /* @__PURE__ */ React.createElement("span", { key: i, ...getTokenProps({ token, key }) })))))
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Prism
+});

package/lib/Highlighter/SyntaxHighlighter/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { HighlighterProps } from '../index';
+export declare type SyntaxHighlighterProps = Pick<HighlighterProps, 'language' | 'children' | 'theme'>;
+declare const SyntaxHighlighter: import("react").NamedExoticComponent<SyntaxHighlighterProps>;
+export default SyntaxHighlighter;

package/lib/Highlighter/SyntaxHighlighter/index.js

@@ -0,0 +1,55 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Highlighter/SyntaxHighlighter/index.tsx
+var SyntaxHighlighter_exports = {};
+__export(SyntaxHighlighter_exports, {
+  default: () => SyntaxHighlighter_default
+});
+module.exports = __toCommonJS(SyntaxHighlighter_exports);
+var import_useHighlight = require("../../hooks/useHighlight");
+var import_icons = require("@ant-design/icons");
+var import_react = require("react");
+var import_react_layout_kit = require("react-layout-kit");
+var import_shallow = require("zustand/shallow");
+var import_Prism = require("./Prism");
+var import_antd_style = require("antd-style");
+var import_style = require("./style");
+var SyntaxHighlighter = (0, import_react.memo)(
+  ({ children, language, theme: appearance }) => {
+    const { styles, theme } = (0, import_style.useStyles)();
+    const { isDarkMode } = (0, import_antd_style.useThemeMode)();
+    const isDarkTheme = appearance ? appearance === "dark" : isDarkMode;
+    const [codeToHtml, isLoading] = (0, import_useHighlight.useHighlight)((s) => [s.codeToHtml, !s.highlighter], import_shallow.shallow);
+    (0, import_react.useEffect)(() => {
+      import_useHighlight.useHighlight.getState().initHighlighter();
+    }, []);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, isLoading ? /* @__PURE__ */ React.createElement("div", { className: styles.prism }, /* @__PURE__ */ React.createElement(import_Prism.Prism, { language, isDarkMode: isDarkTheme }, children)) : /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        dangerouslySetInnerHTML: {
+          __html: codeToHtml(children, language, isDarkTheme) || ""
+        },
+        className: styles.shiki
+      }
+    ), isLoading && /* @__PURE__ */ React.createElement(import_react_layout_kit.Center, { horizontal: true, gap: 8, className: styles.loading }, /* @__PURE__ */ React.createElement(import_icons.Loading3QuartersOutlined, { spin: true, style: { color: theme.colorTextTertiary } }), "shiki rendering..."));
+  }
+);
+var SyntaxHighlighter_default = SyntaxHighlighter;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/Highlighter/SyntaxHighlighter/style.d.ts

@@ -0,0 +1,5 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    shiki: string;
+    prism: import("antd-style").SerializedStyles;
+    loading: import("antd-style").SerializedStyles;
+}>;