@lobehub/ui 1.71.0 → 1.72.1

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -3,7 +3,6 @@ import { useThemeMode } from 'antd-style';
 import { Loader2 } from 'lucide-react';
 import { memo, useEffect } from 'react';
 import { Center } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 import Icon from "../../Icon";
 import { useHighlight } from "../../hooks/useHighlight";
 import { useStyles } from "./style";
@@ -20,7 +19,7 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
     isDarkMode = _useThemeMode.isDarkMode;
   var _useHighlight = useHighlight(function (s) {
       return [s.codeToHtml, !s.highlighter];
-    }, shallow),
+    }),
     _useHighlight2 = _slicedToArray(_useHighlight, 2),
     codeToHtml = _useHighlight2[0],
     isLoading = _useHighlight2[1];

package/es/LogoThree/Logo.js

@@ -1,10 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { a, config, useSpring } from '@react-spring/three';
 import { useGLTF } from '@react-three/drei';
 import { useFrame } from '@react-three/fiber';
-import { memo, useRef } from 'react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 var NUM = 10;
 var Logo = /*#__PURE__*/memo(function (_ref) {
@@ -12,6 +14,37 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
   var ref = useRef(null);
   var _useGLTF = useGLTF('https://gw.alipayobjects.com/os/kitchen/ygwdCZyaMZ/lobehub.gltf'),
     scene = _useGLTF.scene;
+  // Hover state
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hovered = _useState2[0],
+    setHover = _useState2[1];
+  useEffect(function () {
+    return void (document.body.style.cursor = hovered ? 'pointer' : 'auto');
+  }, [hovered]);
+  // Events
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    toggle = _useState4[0],
+    set = _useState4[1];
+  var _useSpring = useSpring({
+      config: config.wobbly,
+      x: toggle
+    }, [toggle]),
+    _useSpring2 = _slicedToArray(_useSpring, 1),
+    x = _useSpring2[0].x;
+  var onPointerOver = useCallback(function () {
+    return setHover(true);
+  }, []);
+  var onPointerOut = useCallback(function () {
+    return setHover(false);
+  }, []);
+  var onClick = useCallback(function () {
+    return set(function (toggle) {
+      return Number(!toggle);
+    });
+  }, [set]);
+  var rotation = x.to([0, 1], [0, Math.PI * 2]);
   useFrame(function (state) {
     var t = state.clock.getElapsedTime();
     ref.current.rotation.set(Math.cos(t / 4) / NUM, Math.sin(t / 3) / NUM / 2, 0.15 + Math.sin(t / 2) / NUM);
@@ -19,9 +52,15 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
   });
   return /*#__PURE__*/_jsx("group", {
     ref: ref,
-    children: /*#__PURE__*/_jsx("primitive", _objectSpread({
-      object: scene
-    }, props))
+    children: /*#__PURE__*/_jsx(a.group, {
+      onClick: onClick,
+      onPointerOut: onPointerOut,
+      onPointerOver: onPointerOver,
+      "rotation-y": rotation,
+      children: /*#__PURE__*/_jsx("primitive", _objectSpread({
+        object: scene
+      }, props))
+    })
   });
 });
 export default Logo;

package/es/hooks/useHighlight.d.ts

@@ -22,5 +22,5 @@ interface Store {
      */
     initHighlighter: (options?: HighlighterOptions) => Promise<void>;
 }
-export declare const useHighlight: import("zustand").UseBoundStore<import("zustand").StoreApi<Store>>;
+export declare const useHighlight: import("zustand/traditional").UseBoundStoreWithEqualityFn<import("zustand/vanilla").StoreApi<Store>>;
 export {};

package/es/hooks/useHighlight.js

@@ -1,7 +1,8 @@
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { getHighlighter } from 'shiki-es';
-import { create } from 'zustand';
+import { shallow } from 'zustand/shallow';
+import { createWithEqualityFn } from 'zustand/traditional';
 import { themeConfig } from "../Highlighter/theme";
 export var languageMap = ['javascript', 'js', 'jsx', 'json', 'markdown', 'md', 'less', 'css', 'typescript', 'ts', 'tsx', 'diff', 'bash'];
 
@@ -9,7 +10,7 @@ export var languageMap = ['javascript', 'js', 'jsx', 'json', 'markdown', 'md', '
  * @title 代码高亮的存储对象
  */
 
-export var useHighlight = create(function (set, get) {
+export var useHighlight = createWithEqualityFn(function (set, get) {
   return {
     codeToHtml: function codeToHtml(text, language, isDarkMode) {
       var _get = get(),
@@ -57,4 +58,4 @@ export var useHighlight = create(function (set, get) {
       return initHighlighter;
     }()
   };
-});
+}, shallow);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.71.0",
+  "version": "1.72.1",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -75,6 +75,7 @@
     "@floating-ui/react": "^0",
     "@giscus/react": "^2",
     "@lobehub/emojilib": "latest",
+    "@react-spring/three": "^9",
     "@react-spring/web": "^9",
     "@react-three/drei": "^9",
     "@react-three/fiber": "^8",
@@ -104,8 +105,8 @@
     "three": "^0.150",
     "ts-md5": "^1",
     "use-merge-value": "^1",
-    "zustand": "^4",
-    "zustand-utils": "^1"
+    "zustand": "^4.4.1",
+    "zustand-utils": "^1.3.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^17",