@lobehub/ui 2.13.8 → 2.15.0

package/es/DraggableSideNav/style.js

@@ -0,0 +1,33 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { createStyles } from 'antd-style';
+
+// Layout constants (aligned with DraggablePanel)
+var LAYOUT = {
+  offset: 16,
+  toggleLength: 40,
+  toggleShort: 16
+};
+export var useStyles = createStyles(function (_ref, _ref2) {
+  var css = _ref.css,
+    token = _ref.token,
+    stylish = _ref.stylish,
+    prefixCls = _ref.prefixCls;
+  var showBorder = _ref2.showBorder;
+  return {
+    body: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n      /* Smooth scroll behavior */\n      scroll-behavior: smooth;\n      overflow: hidden auto;\n      flex: 1;\n\n      /* Better scrollbar styling */\n      &::-webkit-scrollbar {\n        width: 6px;\n      }\n\n      &::-webkit-scrollbar-track {\n        background: transparent;\n      }\n\n      &::-webkit-scrollbar-thumb {\n        border-radius: 3px;\n        background: ", ";\n\n        &:hover {\n          background: ", ";\n        }\n      }\n    "])), token.colorBorderSecondary, token.colorBorder),
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\n      /* Width transition controlled by inline style */\n\n      /* Ensure smooth animations */\n      will-change: width;\n\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n\n      height: 100%;\n    "]))),
+    contentContainer: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n\n      height: 100%;\n      border-inline-end: ", " solid ", ";\n\n      background: ", ";\n    "])), showBorder ? '1px' : '0', token.colorBorderSecondary, token.colorBgLayout),
+    footer: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      flex-shrink: 0;\n    "]))),
+    handlerIcon: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      /* Icon transitions are now handled by framer-motion */\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    "]))),
+    header: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      flex-shrink: 0;\n    "]))),
+    menuOverride: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      .", "-menu {\n        .", "-menu-item {\n          display: flex;\n          gap: 8px;\n          align-items: center;\n          justify-content: center;\n\n          height: unset;\n          min-height: 36px;\n          padding-block: 4px;\n          padding-inline: 8px !important;\n        }\n\n        .", "-menu-item-group-title {\n          overflow: hidden;\n          padding-inline: 8px;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n\n        .", "-menu-item-icon {\n          position: absolute;\n          inset-inline-start: 0;\n\n          display: flex !important;\n          flex: none;\n          align-items: center;\n          justify-content: center;\n\n          width: 36px;\n          height: 36px;\n        }\n\n        .", "-menu-title-content {\n          overflow: hidden;\n          flex: 1;\n\n          margin: 0 !important;\n          padding-inline-start: 36px;\n\n          line-height: 1.5;\n        }\n\n        &.", "-menu-inline-collapsed {\n          .ant-menu-title-content {\n            display: none;\n            width: 0;\n            opacity: 0;\n          }\n\n          .", "-menu-item {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n\n            width: 36px !important;\n            height: 36px !important;\n          }\n        }\n      }\n    "])), prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls),
+    resizeHandle: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      cursor: col-resize;\n\n      position: absolute;\n      z-index: 1;\n      inset-block: 0 0;\n\n      width: 8px;\n\n      transition: background-color 0.2s ease;\n\n      &::after {\n        content: '';\n\n        position: absolute;\n        inset-block: 0;\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n\n        width: 2px;\n\n        background: transparent;\n\n        transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n      }\n    "]))),
+    resizeHandleHighlight: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      &:hover {\n        &::after {\n          width: 3px;\n          background: ", ";\n          box-shadow: 0 0 8px ", "40;\n        }\n      }\n\n      &:active {\n        &::after {\n          background: ", ";\n        }\n      }\n    "])), token.colorPrimary, token.colorPrimary, token.colorPrimaryActive),
+    resizeHandleLeft: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      inset-inline-end: -4px;\n    "]))),
+    resizeHandleRight: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      inset-inline-start: -4px;\n    "]))),
+    toggleLeft: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      inset-inline-end: -", "px;\n      width: ", "px;\n      height: 100%;\n\n      > div {\n        inset-block-start: 50%;\n\n        width: ", "px;\n        height: ", "px;\n        margin-block-start: -", "px;\n        border-radius: 0 4px 4px 0; /* \u5DE6\u4FA7\u9762\u677F\uFF0Chandle \u5728\u53F3\u8FB9\uFF0C\u53F3\u4FA7\u5706\u89D2 */\n      }\n    "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleShort, LAYOUT.toggleLength, LAYOUT.toggleLength / 2),
+    toggleRight: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      inset-inline-start: -", "px;\n      width: ", "px;\n      height: 100%;\n\n      > div {\n        inset-block-start: 50%;\n\n        width: ", "px;\n        height: ", "px;\n        margin-block-start: -", "px;\n        border-radius: 4px 0 0 4px; /* \u53F3\u4FA7\u9762\u677F\uFF0Chandle \u5728\u5DE6\u8FB9\uFF0C\u5DE6\u4FA7\u5706\u89D2 */\n      }\n    "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleShort, LAYOUT.toggleLength, LAYOUT.toggleLength / 2),
+    toggleRoot: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      pointer-events: none;\n      position: absolute;\n\n      /* Smooth transitions for all states */\n      transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n\n      &:has(> div) {\n        pointer-events: all;\n      }\n\n      > div {\n        ", ";\n        pointer-events: all;\n        cursor: pointer;\n\n        position: absolute;\n\n        color: ", ";\n\n        /* Enhanced transitions with backdrop blur */\n        transition:\n          color 0.2s ", ",\n          transform 0.2s ", ",\n          box-shadow 0.2s ", ";\n\n        backdrop-filter: blur(8px);\n\n        &:hover {\n          color: ", ";\n          box-shadow:\n            0 2px 8px rgba(0, 0, 0, 8%),\n            0 0 0 1px ", ";\n        }\n\n        &:active {\n          transform: scale(0.95);\n          color: ", ";\n        }\n      }\n    "])), stylish.variantFilled, token.colorTextTertiary, token.motionEaseOut, token.motionEaseOut, token.motionEaseOut, token.colorTextSecondary, token.colorBorderSecondary, token.colorText)
+  };
+});

package/es/DraggableSideNav/type.d.ts

@@ -0,0 +1,141 @@
+import type { NumberSize, Size } from 're-resizable';
+import type { CSSProperties, ReactNode } from 'react';
+import type { DivProps } from "../types";
+export interface DraggableSideNavProps extends Omit<DivProps, 'children' | 'onSelect'> {
+    /**
+     * Animation configuration for content transitions
+     * @default { fade: true, blur: false, header: false, body: false, footer: false }
+     */
+    animation?: {
+        /**
+         * Enable blur effect during transitions
+         * @default false
+         */
+        blur?: boolean;
+        /**
+         * Enable animation for body section
+         * @default false
+         */
+        body?: boolean;
+        /**
+         * Enable fade effect during transitions
+         * @default true
+         */
+        fade?: boolean;
+        /**
+         * Enable animation for footer section
+         * @default false
+         */
+        footer?: boolean;
+        /**
+         * Enable animation for header section
+         * @default false
+         */
+        header?: boolean;
+    };
+    /**
+     * Body content (main content area)
+     * Can be a static element or a function that receives collapsed state
+     */
+    children: ReactNode | ((collapsed: boolean) => ReactNode);
+    /**
+     * Classnames for internal components
+     */
+    classNames?: {
+        body?: string;
+        container?: string;
+        content?: string;
+        footer?: string;
+        handle?: string;
+        header?: string;
+    };
+    /**
+     * Whether the panel is collapsed (controlled)
+     */
+    collapsed?: boolean;
+    /**
+     * Whether the panel is collapsed by default
+     * @default false
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Default width when expanded
+     */
+    defaultSize?: Partial<Size>;
+    /**
+     * Footer content
+     * Can be a static element or a function that receives collapsed state
+     */
+    footer?: ReactNode | ((collapsed: boolean) => ReactNode);
+    /**
+     * Header content
+     * Can be a static element or a function that receives collapsed state
+     */
+    header?: ReactNode | ((collapsed: boolean) => ReactNode);
+    /**
+     * Maximum width
+     */
+    maxWidth?: number;
+    /**
+     * Minimum width (also the collapsed width)
+     * @default 64
+     */
+    minWidth?: number;
+    /**
+     * Callback when collapse state changes
+     */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Callback when menu item is selected
+     */
+    onSelect?: (key: string) => void;
+    /**
+     * Callback when size changes
+     */
+    onSizeChange?: (delta: NumberSize, size?: Size) => void;
+    /**
+     * Callback when actively resizing
+     */
+    onSizeDragging?: (delta: NumberSize, size?: Size) => void;
+    /**
+     * Placement of the side nav
+     * @default 'left'
+     */
+    placement?: 'left' | 'right';
+    /**
+     * Whether to enable resizing
+     * @default true
+     */
+    resizable?: boolean;
+    /**
+     * Whether to show border
+     * @default true
+     */
+    showBorder?: boolean;
+    /**
+     * Whether to show handle for toggling
+     * @default true
+     */
+    showHandle?: boolean;
+    showHandleHighlight?: boolean;
+    /**
+     * Whether to show handle when collapsed
+     * @default false
+     */
+    showHandleWhenCollapsed?: boolean;
+    /**
+     * Current size (controlled)
+     */
+    size?: Partial<Size>;
+    /**
+     * Custom styles
+     */
+    styles?: {
+        body?: CSSProperties;
+        container?: CSSProperties;
+        content?: CSSProperties;
+        footer?: CSSProperties;
+        handle?: CSSProperties;
+        header?: CSSProperties;
+    };
+}

package/es/DraggableSideNav/type.js

@@ -0,0 +1 @@
+export {};

package/es/index.d.ts

@@ -1,3 +1,4 @@
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, } from './Accordion';
 export { default as ActionIcon, type ActionIconProps, type ActionIconSize } from './ActionIcon';
 export { default as ActionIconGroup, type ActionIconGroupEvent, type ActionIconGroupItemType, type ActionIconGroupProps, } from './ActionIconGroup';
 export { default as Alert, type AlertProps } from './Alert';
@@ -14,6 +15,7 @@ export { default as CopyButton, type CopyButtonProps } from './CopyButton';
 export { default as DatePicker, type DatePickerProps } from './DatePicker';
 export { default as DownloadButton, type DownloadButtonProps } from './DownloadButton';
 export { default as DraggablePanel, DraggablePanelBody, type DraggablePanelBodyProps, DraggablePanelContainer, type DraggablePanelContainerProps, DraggablePanelFooter, type DraggablePanelFooterProps, DraggablePanelHeader, type DraggablePanelHeaderProps, type DraggablePanelProps, } from './DraggablePanel';
+export { default as DraggableSideNav, type DraggableSideNavProps } from './DraggableSideNav';
 export { default as Drawer, type DrawerProps } from './Drawer';
 export { default as Dropdown, type DropdownMenuItemType, type DropdownProps } from './Dropdown';
 export { default as EditableText, type EditableTextProps } from './EditableText';

package/es/index.js

@@ -1,3 +1,4 @@
+export { Accordion, AccordionItem } from "./Accordion";
 export { default as ActionIcon } from "./ActionIcon";
 export { default as ActionIconGroup } from "./ActionIconGroup";
 export { default as Alert } from "./Alert";
@@ -14,6 +15,7 @@ export { default as CopyButton } from "./CopyButton";
 export { default as DatePicker } from "./DatePicker";
 export { default as DownloadButton } from "./DownloadButton";
 export { default as DraggablePanel, DraggablePanelBody, DraggablePanelContainer, DraggablePanelFooter, DraggablePanelHeader } from "./DraggablePanel";
+export { default as DraggableSideNav } from "./DraggableSideNav";
 export { default as Drawer } from "./Drawer";
 export { default as Dropdown } from "./Dropdown";
 export { default as EditableText } from "./EditableText";

package/es/styles/theme/customStylish.js

@@ -7,23 +7,23 @@ export var generateCustomStylish = function generateCustomStylish(_ref) {
     isDarkMode = _ref.isDarkMode;
   var gradient = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% {\n      background-position: 0% 50%;\n    }\n    50% {\n      background-position: 100% 50%;\n    }\n    100% {\n      background-position: 0% 50%;\n    }\n  "])));
   return {
-    active: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      color: ", ";\n      background: ", ";\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:active {\n        color: ", ";\n        background: ", ";\n      }\n    "])), token.colorText, token.colorFillSecondary, token.colorText, token.colorFill, token.colorText, isDarkMode ? token.colorFillSecondary : token.colorFill),
+    active: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      color: ", ";\n      background: ", ";\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n    "])), token.colorText, token.colorFillSecondary, token.colorText, token.colorFill),
     blur: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      backdrop-filter: saturate(150%) blur(10px);\n    "]))),
     blurStrong: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      backdrop-filter: saturate(150%) blur(36px);\n    "]))),
-    bottomScrollbar: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        width: 0;\n        height: 4px;\n        background-color: transparent;\n\n        &-thumb {\n          background-color: ", ";\n          border-radius: 4px;\n          transition: background-color 500ms ", ";\n        }\n\n        &-corner {\n          display: none;\n          width: 0;\n          height: 0;\n        }\n      }\n    "])), token.colorFill, token.motionEaseOut),
+    bottomScrollbar: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        width: 0;\n        height: 4px;\n        background-color: transparent;\n\n        &-thumb {\n          border-radius: 4px;\n          background-color: ", ";\n          transition: background-color 500ms ", ";\n        }\n\n        &-corner {\n          display: none;\n          width: 0;\n          height: 0;\n        }\n      }\n    "])), token.colorFill, token.motionEaseOut),
     disabled: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      cursor: not-allowed;\n      opacity: 0.5;\n    "]))),
-    gradientAnimation: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      background-image: linear-gradient(\n        -45deg,\n        ", ",\n        ", ",\n        ", ",\n        ", "\n      );\n      background-size: 400% 400%;\n      border-radius: inherit;\n      animation: 5s ", " 5s ease infinite;\n    "])), token.gold, token.magenta, token.geekblue, token.cyan, gradient),
+    gradientAnimation: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      border-radius: inherit;\n      background-image: linear-gradient(\n        -45deg,\n        ", ",\n        ", ",\n        ", ",\n        ", "\n      );\n      background-size: 400% 400%;\n      animation: 5s ", " 5s ease infinite;\n    "])), token.gold, token.magenta, token.geekblue, token.cyan, gradient),
     noScrollbar: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        display: none;\n        width: 0;\n        height: 0;\n        background-color: transparent;\n      }\n    "]))),
     resetLinkColor: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), token.colorTextSecondary, token.colorText),
     shadow: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      box-shadow:\n        0 1px 0 -1px ", ",\n        0 1px 2px -0.5px ", ",\n        0 2px 2px -1px ", ",\n        0 3px 6px -4px ", ";\n    "])), isDarkMode ? token.colorBgLayout : token.colorBorder, isDarkMode ? token.colorBgLayout : token.colorBorder, isDarkMode ? token.colorBgLayout : token.colorBorderSecondary, isDarkMode ? token.colorBgLayout : token.colorBorderSecondary),
-    variantBorderless: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      background: none;\n      border: none;\n      box-shadow: none;\n\n      &:hover {\n        background: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "])), token.colorFillTertiary, isDarkMode ? token.colorFillQuaternary : token.colorFillSecondary),
-    variantBorderlessDanger: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      background: none;\n      border: none;\n      box-shadow: none;\n\n      &:hover {\n        background: ", ";\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n\n      &:active {\n        background: ", ";\n        box-shadow: inset 0 0 0 1px\n          ", ";\n      }\n    "])), token.colorErrorFillTertiary, token.colorErrorFillTertiary, isDarkMode ? token.colorErrorFillQuaternary : token.colorErrorFillSecondary, isDarkMode ? token.colorErrorFillQuaternary : token.colorErrorFillSecondary),
-    variantBorderlessWithoutHover: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      background: none;\n      border: none;\n      box-shadow: none;\n    "]))),
-    variantFilled: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      background: ", ";\n\n      &:hover {\n        background: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "])), token.colorFillTertiary, token.colorFillSecondary, isDarkMode ? token.colorFillTertiary : token.colorFill),
-    variantFilledDanger: css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n      background: ", ";\n\n      &:hover {\n        background: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "])), token.colorErrorFillTertiary, token.colorErrorFillSecondary, isDarkMode ? token.colorErrorFillTertiary : token.colorErrorFill),
+    variantBorderless: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      border: none;\n      background: none;\n      box-shadow: none;\n\n      &:hover {\n        background: ", ";\n      }\n    "])), token.colorFillTertiary),
+    variantBorderlessDanger: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      border: none;\n      background: none;\n      box-shadow: none;\n\n      &:hover {\n        background: ", ";\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n    "])), token.colorErrorFillTertiary, token.colorErrorFillTertiary),
+    variantBorderlessWithoutHover: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      border: none;\n      background: none;\n      box-shadow: none;\n    "]))),
+    variantFilled: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      background: ", ";\n\n      &:hover {\n        background: ", ";\n      }\n    "])), token.colorFillTertiary, token.colorFillSecondary),
+    variantFilledDanger: css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n      background: ", ";\n\n      &:hover {\n        background: ", ";\n      }\n    "])), token.colorErrorFillTertiary, token.colorErrorFillSecondary),
     variantFilledWithoutHover: css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n      background: ", ";\n    "])), token.colorFillTertiary),
-    variantOutlined: css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n      background: ", ";\n      border: 1px solid ", ";\n\n      &:hover {\n        background: ", ";\n        border: 1px solid ", ";\n      }\n\n      &:active {\n        background: ", ";\n        border: 1px solid ", ";\n      }\n    "])), token.colorBgContainer, token.colorBorderSecondary, token.colorBgContainer, token.colorBorder, token.colorBgContainer, token.colorBorder),
-    variantOutlinedDanger: css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n      border: 1px solid ", ";\n\n      &:hover {\n        border: 1px solid ", ";\n      }\n\n      &:active {\n        border: 1px solid ", ";\n      }\n    "])), token.colorErrorBorder, token.colorErrorBorder, token.colorErrorBorder),
-    variantOutlinedWithoutHover: css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n      background: ", ";\n      border: 1px solid ", ";\n    "])), token.colorBgContainer, token.colorBorderSecondary)
+    variantOutlined: css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n      border: 1px solid ", ";\n      background: ", ";\n\n      &:hover {\n        border: 1px solid ", ";\n        background: ", ";\n      }\n    "])), token.colorBorderSecondary, token.colorBgContainer, token.colorBorder, token.colorBgContainer),
+    variantOutlinedDanger: css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n      border: 1px solid ", ";\n\n      &:hover {\n        border: 1px solid ", ";\n      }\n    "])), token.colorErrorBorder, token.colorErrorBorder),
+    variantOutlinedWithoutHover: css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n      border: 1px solid ", ";\n      background: ", ";\n    "])), token.colorBorderSecondary, token.colorBgContainer)
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "2.13.8",
+  "version": "2.15.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",