@lobehub/ui 6.0.4 → 6.0.6

package/es/Accordion/style.d.mts

@@ -2,13 +2,13 @@ import "@stylexjs/stylex";
 //#region src/Accordion/style.d.ts
 export declare const accordionStyles: {
   panel: string;
+  header: string;
   action: string;
   content: string;
   trigger: string;
-  header: string;
-  item: string;
   root: string;
   indicator: string;
+  item: string;
   itemOutlined: string;
   rootOutlined: string;
   actionAlwaysVisible: string;

package/es/AutoComplete/style.d.mts

@@ -42,7 +42,7 @@ declare const styleArrays: {
   }> | Readonly<{
     readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
     readonly cursor: stylex.StyleXClassNameFor<"cursor", "default">;
-    readonly display: stylex.StyleXClassNameFor<"display", "flex" | "none">;
+    readonly display: stylex.StyleXClassNameFor<"display", "none" | "flex">;
   }>)[];
   item: Readonly<{
     readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;

package/es/Video/context.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"context.mjs","names":[],"sources":["../../src/Video/context.ts"],"sourcesContent":["'use client';\n\nimport { createContext, use } from 'react';\n\nimport type { VideoStore } from './store';\nimport type { VideoMarker, VideoMediaProps, VideoSection } from './type';\n\nexport interface VideoConfig {\n  fps: number;\n  markers: VideoMarker[];\n  onMarkerClick?: (marker: VideoMarker) => void;\n  onRetry?: () => Promise<unknown> | void;\n  playbackRates?: number[];\n  sections: VideoSection[];\n}\n\nexport interface VideoContextValue {\n  config: VideoConfig;\n  media: VideoMediaProps;\n  store: VideoStore;\n}\n\nexport const VideoContext = createContext<VideoContextValue | null>(null);\n\nexport const useVideoContext = () => {\n  const value = use(VideoContext);\n  if (!value) throw new Error('Video parts must be rendered inside <Video.Root>.');\n  return value;\n};\n\nexport interface FrameContextValue {\n  hold: (held: boolean) => void;\n  overlay: boolean;\n  setOverlay: (overlay: boolean) => void;\n  visible: boolean;\n}\n\nexport const FrameContext = createContext<FrameContextValue | null>(null);\n"],"mappings":";;;AAsBA,MAAa,eAAe,cAAwC,IAAI;AAExE,MAAa,wBAAwB;CACnC,MAAM,QAAQ,IAAI,YAAY;CAC9B,IAAI,CAAC,OAAO,MAAM,IAAI,MAAM,mDAAmD;CAC/E,OAAO;AACT;AASA,MAAa,eAAe,cAAwC,IAAI"}
+{"version":3,"file":"context.mjs","names":[],"sources":["../../src/Video/context.ts"],"sourcesContent":["'use client';\n\nimport { createContext, use } from 'react';\n\nimport type { VideoStore } from './store';\nimport type { VideoMarker, VideoMediaProps, VideoSection } from './type';\n\nexport interface VideoConfig {\n  fps: number;\n  markers: VideoMarker[];\n  maxHeight?: number;\n  onMarkerClick?: (marker: VideoMarker) => void;\n  onRetry?: () => Promise<unknown> | void;\n  playbackRates?: number[];\n  sections: VideoSection[];\n}\n\nexport interface VideoContextValue {\n  config: VideoConfig;\n  media: VideoMediaProps;\n  store: VideoStore;\n}\n\nexport const VideoContext = createContext<VideoContextValue | null>(null);\n\nexport const useVideoContext = () => {\n  const value = use(VideoContext);\n  if (!value) throw new Error('Video parts must be rendered inside <Video.Root>.');\n  return value;\n};\n\nexport interface FrameContextValue {\n  hold: (held: boolean) => void;\n  overlay: boolean;\n  setOverlay: (overlay: boolean) => void;\n  visible: boolean;\n}\n\nexport const FrameContext = createContext<FrameContextValue | null>(null);\n"],"mappings":";;;AAuBA,MAAa,eAAe,cAAwC,IAAI;AAExE,MAAa,wBAAwB;CACnC,MAAM,QAAQ,IAAI,YAAY;CAC9B,IAAI,CAAC,OAAO,MAAM,IAAI,MAAM,mDAAmD;CAC/E,OAAO;AACT;AASA,MAAa,eAAe,cAAwC,IAAI"}

package/es/Video/parts/Frame.mjs

@@ -3,6 +3,8 @@ import { styleProps } from "../../styles/stylex/props.mjs";
 import { FrameContext, useVideoContext } from "../context.mjs";
 import { styles } from "../style.mjs";
 import { useVideo } from "../useVideo.mjs";
+import { useFullscreen } from "../useFullscreen.mjs";
+import { aspectOf, frameWidthOf } from "../sizing.mjs";
 import { useControlsIdle } from "../useControlsIdle.mjs";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -15,7 +17,8 @@ const isFocusVisible = (element) => {
 	}
 };
 const Frame = ({ children, className, style }) => {
-	const { media, store } = useVideoContext();
+	const { config, media, store } = useVideoContext();
+	const fullscreen = useFullscreen(store);
 	const videoRef = useRef(null);
 	const pointerTypeRef = useRef("mouse");
 	const size = useVideo((state) => state.size);
@@ -38,11 +41,16 @@ const Frame = ({ children, className, style }) => {
 		overlay
 	]);
 	const aspectRatio = size?.height ? `${size.width} / ${size.height}` : "16 / 9";
+	const sizing = !(config.maxHeight !== void 0 && !fullscreen && frameWidthOf(config.maxHeight, aspectOf(size)) < 480) ? { aspectRatio } : overlay ? { aspectRatio: `480 / ${config.maxHeight}` } : {
+		aspectRatio,
+		marginInline: "auto",
+		maxWidth: `${frameWidthOf(config.maxHeight, aspectOf(size))}px`
+	};
 	return /* @__PURE__ */ jsx(FrameContext, {
 		value: frame,
 		children: /* @__PURE__ */ jsxs("div", {
 			...styleProps(styles.frame, className, {
-				aspectRatio,
+				...sizing,
 				...style
 			}),
 			onBlur: (event) => {

package/es/Video/parts/Frame.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Frame.mjs","names":[],"sources":["../../../src/Video/parts/Frame.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FrameContext, type FrameContextValue, useVideoContext } from '../context';\nimport { styles } from '../style';\nimport type { VideoFrameProps } from '../type';\nimport { useControlsIdle } from '../useControlsIdle';\nimport { useVideo } from '../useVideo';\n\nconst isFocusVisible = (element: Element) => {\n  try {\n    return element.matches(':focus-visible');\n  } catch {\n    return true;\n  }\n};\n\nconst Frame = ({ children, className, style }: VideoFrameProps) => {\n  const { media, store } = useVideoContext();\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const pointerTypeRef = useRef('mouse');\n  const size = useVideo((state) => state.size);\n  const idleForced = useVideo((state) => state.paused || state.status !== 'ready');\n  const idle = useControlsIdle(idleForced);\n  const [overlay, setOverlay] = useState(false);\n\n  useEffect(() => {\n    const video = videoRef.current;\n    if (!video) return;\n    return store.attach(video);\n  }, [store, media.src]);\n\n  const frame = useMemo<FrameContextValue>(\n    () => ({ hold: idle.hold, overlay, setOverlay, visible: idle.visible }),\n    [idle.hold, idle.visible, overlay],\n  );\n\n  const aspectRatio = size?.height ? `${size.width} / ${size.height}` : '16 / 9';\n\n  return (\n    <FrameContext value={frame}>\n      <div\n        {...styleProps(styles.frame, className, { aspectRatio, ...style })}\n        onBlur={(event) => {\n          if (!event.currentTarget.contains(event.relatedTarget as Node | null))\n            idle.setFocused(false);\n        }}\n        onFocus={(event) => {\n          idle.setFocused(isFocusVisible(event.target));\n        }}\n        onPointerDownCapture={(event) => {\n          pointerTypeRef.current = event.pointerType || 'mouse';\n        }}\n        onPointerLeave={(event) => {\n          if (event.pointerType !== 'touch') idle.sleep();\n        }}\n        onPointerMove={(event) => {\n          if (event.pointerType !== 'touch') idle.wake();\n        }}\n      >\n        <video\n          playsInline\n          autoPlay={media.autoPlay}\n          loop={media.loop}\n          poster={media.poster}\n          preload={media.preload}\n          ref={videoRef}\n          src={media.src}\n          onEnded={media.onEnded}\n          onError={media.onError}\n          onPause={media.onPause}\n          onPlay={media.onPlay}\n          onTimeUpdate={media.onTimeUpdate}\n          {...styleProps(styles.video)}\n        />\n        <div\n          data-video-surface=\"\"\n          {...styleProps(styles.surface)}\n          onDoubleClick={() => store.toggleFullscreen()}\n          onClick={() => {\n            if (pointerTypeRef.current === 'touch' && !idle.visible) {\n              idle.wake();\n              return;\n            }\n            if (pointerTypeRef.current === 'touch') idle.wake();\n            store.toggle();\n          }}\n        />\n        {children}\n      </div>\n    </FrameContext>\n  );\n};\n\nFrame.displayName = 'VideoFrame';\n\nexport default Frame;\n"],"mappings":";;;;;;;;;AAYA,MAAM,kBAAkB,YAAqB;CAC3C,IAAI;EACF,OAAO,QAAQ,QAAQ,gBAAgB;CACzC,QAAQ;EACN,OAAO;CACT;AACF;AAEA,MAAM,SAAS,EAAE,UAAU,WAAW,YAA6B;CACjE,MAAM,EAAE,OAAO,UAAU,gBAAgB;CACzC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,iBAAiB,OAAO,OAAO;CACrC,MAAM,OAAO,UAAU,UAAU,MAAM,IAAI;CAC3C,MAAM,aAAa,UAAU,UAAU,MAAM,UAAU,MAAM,WAAW,OAAO;CAC/E,MAAM,OAAO,gBAAgB,UAAU;CACvC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,gBAAgB;EACd,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,OAAO;EACZ,OAAO,MAAM,OAAO,KAAK;CAC3B,GAAG,CAAC,OAAO,MAAM,GAAG,CAAC;CAErB,MAAM,QAAQ,eACL;EAAE,MAAM,KAAK;EAAM;EAAS;EAAY,SAAS,KAAK;CAAQ,IACrE;EAAC,KAAK;EAAM,KAAK;EAAS;CAAO,CACnC;CAEA,MAAM,cAAc,MAAM,SAAS,GAAG,KAAK,MAAM,KAAK,KAAK,WAAW;CAEtE,OACE,oBAAC,cAAD;EAAc,OAAO;EACnB,UAAA,qBAAC,OAAD;GACE,GAAI,WAAW,OAAO,OAAO,WAAW;IAAE;IAAa,GAAG;GAAM,CAAC;GACjE,SAAS,UAAU;IACjB,IAAI,CAAC,MAAM,cAAc,SAAS,MAAM,aAA4B,GAClE,KAAK,WAAW,KAAK;GACzB;GACA,UAAU,UAAU;IAClB,KAAK,WAAW,eAAe,MAAM,MAAM,CAAC;GAC9C;GACA,uBAAuB,UAAU;IAC/B,eAAe,UAAU,MAAM,eAAe;GAChD;GACA,iBAAiB,UAAU;IACzB,IAAI,MAAM,gBAAgB,SAAS,KAAK,MAAM;GAChD;GACA,gBAAgB,UAAU;IACxB,IAAI,MAAM,gBAAgB,SAAS,KAAK,KAAK;GAC/C;GAjBF,UAAA;IAmBE,oBAAC,SAAD;KACE,aAAA;KACA,UAAU,MAAM;KAChB,MAAM,MAAM;KACZ,QAAQ,MAAM;KACd,SAAS,MAAM;KACf,KAAK;KACL,KAAK,MAAM;KACX,SAAS,MAAM;KACf,SAAS,MAAM;KACf,SAAS,MAAM;KACf,QAAQ,MAAM;KACd,cAAc,MAAM;KACpB,GAAI,WAAW,OAAO,KAAK;IAC5B,CAAA;IACD,oBAAC,OAAD;KACE,sBAAmB;KACnB,GAAI,WAAW,OAAO,OAAO;KAC7B,qBAAqB,MAAM,iBAAiB;KAC5C,eAAe;MACb,IAAI,eAAe,YAAY,WAAW,CAAC,KAAK,SAAS;OACvD,KAAK,KAAK;OACV;MACF;MACA,IAAI,eAAe,YAAY,SAAS,KAAK,KAAK;MAClD,MAAM,OAAO;KACf;IACD,CAAA;IACA;GACE;;CACO,CAAA;AAElB;AAEA,MAAM,cAAc"}
+{"version":3,"file":"Frame.mjs","names":[],"sources":["../../../src/Video/parts/Frame.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FrameContext, type FrameContextValue, useVideoContext } from '../context';\nimport { aspectOf, frameWidthOf, MIN_PLAYER_WIDTH } from '../sizing';\nimport { styles } from '../style';\nimport type { VideoFrameProps } from '../type';\nimport { useControlsIdle } from '../useControlsIdle';\nimport { useFullscreen } from '../useFullscreen';\nimport { useVideo } from '../useVideo';\n\nconst isFocusVisible = (element: Element) => {\n  try {\n    return element.matches(':focus-visible');\n  } catch {\n    return true;\n  }\n};\n\nconst Frame = ({ children, className, style }: VideoFrameProps) => {\n  const { config, media, store } = useVideoContext();\n  const fullscreen = useFullscreen(store);\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const pointerTypeRef = useRef('mouse');\n  const size = useVideo((state) => state.size);\n  const idleForced = useVideo((state) => state.paused || state.status !== 'ready');\n  const idle = useControlsIdle(idleForced);\n  const [overlay, setOverlay] = useState(false);\n\n  useEffect(() => {\n    const video = videoRef.current;\n    if (!video) return;\n    return store.attach(video);\n  }, [store, media.src]);\n\n  const frame = useMemo<FrameContextValue>(\n    () => ({ hold: idle.hold, overlay, setOverlay, visible: idle.visible }),\n    [idle.hold, idle.visible, overlay],\n  );\n\n  const aspectRatio = size?.height ? `${size.width} / ${size.height}` : '16 / 9';\n  const narrow =\n    config.maxHeight !== undefined &&\n    !fullscreen &&\n    frameWidthOf(config.maxHeight, aspectOf(size)) < MIN_PLAYER_WIDTH;\n  // Overlay controls live inside the frame, so it widens and letterboxes the\n  // video; controls below leave the frame at the video's own width, keeping\n  // children positioned in video coordinates aligned.\n  const sizing = !narrow\n    ? { aspectRatio }\n    : overlay\n      ? { aspectRatio: `${MIN_PLAYER_WIDTH} / ${config.maxHeight}` }\n      : {\n          aspectRatio,\n          marginInline: 'auto',\n          maxWidth: `${frameWidthOf(config.maxHeight!, aspectOf(size))}px`,\n        };\n\n  return (\n    <FrameContext value={frame}>\n      <div\n        {...styleProps(styles.frame, className, { ...sizing, ...style })}\n        onBlur={(event) => {\n          if (!event.currentTarget.contains(event.relatedTarget as Node | null))\n            idle.setFocused(false);\n        }}\n        onFocus={(event) => {\n          idle.setFocused(isFocusVisible(event.target));\n        }}\n        onPointerDownCapture={(event) => {\n          pointerTypeRef.current = event.pointerType || 'mouse';\n        }}\n        onPointerLeave={(event) => {\n          if (event.pointerType !== 'touch') idle.sleep();\n        }}\n        onPointerMove={(event) => {\n          if (event.pointerType !== 'touch') idle.wake();\n        }}\n      >\n        <video\n          playsInline\n          autoPlay={media.autoPlay}\n          loop={media.loop}\n          poster={media.poster}\n          preload={media.preload}\n          ref={videoRef}\n          src={media.src}\n          onEnded={media.onEnded}\n          onError={media.onError}\n          onPause={media.onPause}\n          onPlay={media.onPlay}\n          onTimeUpdate={media.onTimeUpdate}\n          {...styleProps(styles.video)}\n        />\n        <div\n          data-video-surface=\"\"\n          {...styleProps(styles.surface)}\n          onDoubleClick={() => store.toggleFullscreen()}\n          onClick={() => {\n            if (pointerTypeRef.current === 'touch' && !idle.visible) {\n              idle.wake();\n              return;\n            }\n            if (pointerTypeRef.current === 'touch') idle.wake();\n            store.toggle();\n          }}\n        />\n        {children}\n      </div>\n    </FrameContext>\n  );\n};\n\nFrame.displayName = 'VideoFrame';\n\nexport default Frame;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,kBAAkB,YAAqB;CAC3C,IAAI;EACF,OAAO,QAAQ,QAAQ,gBAAgB;CACzC,QAAQ;EACN,OAAO;CACT;AACF;AAEA,MAAM,SAAS,EAAE,UAAU,WAAW,YAA6B;CACjE,MAAM,EAAE,QAAQ,OAAO,UAAU,gBAAgB;CACjD,MAAM,aAAa,cAAc,KAAK;CACtC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,iBAAiB,OAAO,OAAO;CACrC,MAAM,OAAO,UAAU,UAAU,MAAM,IAAI;CAC3C,MAAM,aAAa,UAAU,UAAU,MAAM,UAAU,MAAM,WAAW,OAAO;CAC/E,MAAM,OAAO,gBAAgB,UAAU;CACvC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,gBAAgB;EACd,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,OAAO;EACZ,OAAO,MAAM,OAAO,KAAK;CAC3B,GAAG,CAAC,OAAO,MAAM,GAAG,CAAC;CAErB,MAAM,QAAQ,eACL;EAAE,MAAM,KAAK;EAAM;EAAS;EAAY,SAAS,KAAK;CAAQ,IACrE;EAAC,KAAK;EAAM,KAAK;EAAS;CAAO,CACnC;CAEA,MAAM,cAAc,MAAM,SAAS,GAAG,KAAK,MAAM,KAAK,KAAK,WAAW;CAQtE,MAAM,SAAS,EANb,OAAO,cAAc,KAAA,KACrB,CAAC,cACD,aAAa,OAAO,WAAW,SAAS,IAAI,CAAC,IAAA,OAK3C,EAAE,YAAY,IACd,UACE,EAAE,aAAa,SAAyB,OAAO,YAAY,IAC3D;EACE;EACA,cAAc;EACd,UAAU,GAAG,aAAa,OAAO,WAAY,SAAS,IAAI,CAAC,EAAE;CAC/D;CAEN,OACE,oBAAC,cAAD;EAAc,OAAO;EACnB,UAAA,qBAAC,OAAD;GACE,GAAI,WAAW,OAAO,OAAO,WAAW;IAAE,GAAG;IAAQ,GAAG;GAAM,CAAC;GAC/D,SAAS,UAAU;IACjB,IAAI,CAAC,MAAM,cAAc,SAAS,MAAM,aAA4B,GAClE,KAAK,WAAW,KAAK;GACzB;GACA,UAAU,UAAU;IAClB,KAAK,WAAW,eAAe,MAAM,MAAM,CAAC;GAC9C;GACA,uBAAuB,UAAU;IAC/B,eAAe,UAAU,MAAM,eAAe;GAChD;GACA,iBAAiB,UAAU;IACzB,IAAI,MAAM,gBAAgB,SAAS,KAAK,MAAM;GAChD;GACA,gBAAgB,UAAU;IACxB,IAAI,MAAM,gBAAgB,SAAS,KAAK,KAAK;GAC/C;GAjBF,UAAA;IAmBE,oBAAC,SAAD;KACE,aAAA;KACA,UAAU,MAAM;KAChB,MAAM,MAAM;KACZ,QAAQ,MAAM;KACd,SAAS,MAAM;KACf,KAAK;KACL,KAAK,MAAM;KACX,SAAS,MAAM;KACf,SAAS,MAAM;KACf,SAAS,MAAM;KACf,QAAQ,MAAM;KACd,cAAc,MAAM;KACpB,GAAI,WAAW,OAAO,KAAK;IAC5B,CAAA;IACD,oBAAC,OAAD;KACE,sBAAmB;KACnB,GAAI,WAAW,OAAO,OAAO;KAC7B,qBAAqB,MAAM,iBAAiB;KAC5C,eAAe;MACb,IAAI,eAAe,YAAY,WAAW,CAAC,KAAK,SAAS;OACvD,KAAK,KAAK;OACV;MACF;MACA,IAAI,eAAe,YAAY,SAAS,KAAK,KAAK;MAClD,MAAM,OAAO;KACf;IACD,CAAA;IACA;GACE;;CACO,CAAA;AAElB;AAEA,MAAM,cAAc"}

package/es/Video/parts/Root.mjs

@@ -6,6 +6,7 @@ import { sortSections } from "../time.mjs";
 import { createVideoStore } from "../store.mjs";
 import { useVideoState } from "../useVideo.mjs";
 import { handleVideoKey } from "../useKeyboard.mjs";
+import { aspectOf, playerWidthOf } from "../sizing.mjs";
 import { useImperativeHandle, useLayoutEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Video/parts/Root.tsx
@@ -38,18 +39,18 @@ const Root = ({ ref, player, src, poster, autoPlay, loop, preload = "metadata",
 		if (!captions) store.setCaptions(false);
 	}, [store]);
 	const size = useVideoState(store, (state) => state.size);
-	const aspect = size?.height ? size.width / size.height : 16 / 9;
 	const sizing = maxHeight === void 0 ? {
 		height,
 		width
 	} : {
-		maxWidth: `${Math.round(maxHeight * aspect)}px`,
+		maxWidth: `${playerWidthOf(maxHeight, aspectOf(size))}px`,
 		width: "100%"
 	};
 	const value = useMemo(() => ({
 		config: {
 			fps,
 			markers,
+			maxHeight,
 			onMarkerClick,
 			onRetry,
 			playbackRates,
@@ -73,6 +74,7 @@ const Root = ({ ref, player, src, poster, autoPlay, loop, preload = "metadata",
 		fps,
 		loop,
 		markers,
+		maxHeight,
 		onEnded,
 		onError,
 		onMarkerClick,

package/es/Video/parts/Root.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Root.mjs","names":[],"sources":["../../../src/Video/parts/Root.tsx"],"sourcesContent":["'use client';\n\nimport { useImperativeHandle, useLayoutEffect, useMemo, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { VideoContext, type VideoContextValue } from '../context';\nimport { createVideoStore, type VideoStore } from '../store';\nimport { styles } from '../style';\nimport { sortSections } from '../time';\nimport type { VideoMarker, VideoRootProps, VideoSection } from '../type';\nimport { handleVideoKey } from '../useKeyboard';\nimport { useVideoState } from '../useVideo';\n\nconst NO_MARKERS: VideoMarker[] = [];\nconst NO_SECTIONS: VideoSection[] = [];\n\nconst Root = ({\n  ref,\n  player,\n  src,\n  poster,\n  autoPlay,\n  loop,\n  preload = 'metadata',\n  onPlay,\n  onPause,\n  onEnded,\n  onError,\n  onTimeUpdate,\n  sections = NO_SECTIONS,\n  markers = NO_MARKERS,\n  fps = 30,\n  playbackRates,\n  defaultPlaybackRate,\n  muted,\n  onMutedChange,\n  onRateChange,\n  onMarkerClick,\n  onRetry,\n  captions = true,\n  width,\n  height,\n  maxHeight,\n  className,\n  style,\n  children,\n}: VideoRootProps) => {\n  const [ownStore] = useState(createVideoStore);\n  const store = (player as VideoStore | undefined) ?? ownStore;\n\n  // Assigned during render so the store already has them when a child Frame\n  // attaches its <video> in an effect, which runs before this component's own.\n  store.setOptions({ defaultPlaybackRate, muted, onMutedChange, onRateChange });\n\n  useImperativeHandle(ref, () => store, [store]);\n\n  const sorted = useMemo(() => sortSections(sections), [sections]);\n\n  useLayoutEffect(() => {\n    store.setData({ fps, markers, sections: sorted });\n  }, [store, fps, markers, sorted]);\n\n  useLayoutEffect(() => {\n    if (!captions) store.setCaptions(false);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [store]);\n\n  const size = useVideoState(store, (state) => state.size);\n  const aspect = size?.height ? size.width / size.height : 16 / 9;\n  const sizing =\n    maxHeight === undefined\n      ? { height, width }\n      : { maxWidth: `${Math.round(maxHeight * aspect)}px`, width: '100%' };\n\n  const value = useMemo<VideoContextValue>(\n    () => ({\n      config: { fps, markers, onMarkerClick, onRetry, playbackRates, sections: sorted },\n      media: {\n        autoPlay,\n        loop,\n        onEnded,\n        onError,\n        onPause,\n        onPlay,\n        onTimeUpdate,\n        poster,\n        preload,\n        src,\n      },\n      store,\n    }),\n    [\n      autoPlay,\n      fps,\n      loop,\n      markers,\n      onEnded,\n      onError,\n      onMarkerClick,\n      onPause,\n      onPlay,\n      onRetry,\n      onTimeUpdate,\n      playbackRates,\n      poster,\n      preload,\n      sorted,\n      src,\n      store,\n    ],\n  );\n\n  return (\n    <VideoContext value={value}>\n      <div\n        ref={store.attachRoot}\n        tabIndex={0}\n        onKeyDown={(event) => {\n          if (handleVideoKey(event, store, playbackRates)) event.preventDefault();\n        }}\n        {...styleProps(styles.root, className, { ...sizing, ...style })}\n      >\n        {children}\n      </div>\n    </VideoContext>\n  );\n};\n\nRoot.displayName = 'VideoRoot';\n\nexport default Root;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,aAA4B,CAAC;AACnC,MAAM,cAA8B,CAAC;AAErC,MAAM,QAAQ,EACZ,KACA,QACA,KACA,QACA,UACA,MACA,UAAU,YACV,QACA,SACA,SACA,SACA,cACA,WAAW,aACX,UAAU,YACV,MAAM,IACN,eACA,qBACA,OACA,eACA,cACA,eACA,SACA,WAAW,MACX,OACA,QACA,WACA,WACA,OACA,eACoB;CACpB,MAAM,CAAC,YAAY,SAAS,gBAAgB;CAC5C,MAAM,QAAS,UAAqC;CAIpD,MAAM,WAAW;EAAE;EAAqB;EAAO;EAAe;CAAa,CAAC;CAE5E,oBAAoB,WAAW,OAAO,CAAC,KAAK,CAAC;CAE7C,MAAM,SAAS,cAAc,aAAa,QAAQ,GAAG,CAAC,QAAQ,CAAC;CAE/D,sBAAsB;EACpB,MAAM,QAAQ;GAAE;GAAK;GAAS,UAAU;EAAO,CAAC;CAClD,GAAG;EAAC;EAAO;EAAK;EAAS;CAAM,CAAC;CAEhC,sBAAsB;EACpB,IAAI,CAAC,UAAU,MAAM,YAAY,KAAK;CAExC,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,OAAO,cAAc,QAAQ,UAAU,MAAM,IAAI;CACvD,MAAM,SAAS,MAAM,SAAS,KAAK,QAAQ,KAAK,SAAS,KAAK;CAC9D,MAAM,SACJ,cAAc,KAAA,IACV;EAAE;EAAQ;CAAM,IAChB;EAAE,UAAU,GAAG,KAAK,MAAM,YAAY,MAAM,EAAE;EAAK,OAAO;CAAO;CAEvE,MAAM,QAAQ,eACL;EACL,QAAQ;GAAE;GAAK;GAAS;GAAe;GAAS;GAAe,UAAU;EAAO;EAChF,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,oBAAC,cAAD;EAAqB;EACnB,UAAA,oBAAC,OAAD;GACE,KAAK,MAAM;GACX,UAAU;GACV,YAAY,UAAU;IACpB,IAAI,eAAe,OAAO,OAAO,aAAa,GAAG,MAAM,eAAe;GACxE;GACA,GAAI,WAAW,OAAO,MAAM,WAAW;IAAE,GAAG;IAAQ,GAAG;GAAM,CAAC;GAE7D;EACE,CAAA;CACO,CAAA;AAElB;AAEA,KAAK,cAAc"}
+{"version":3,"file":"Root.mjs","names":[],"sources":["../../../src/Video/parts/Root.tsx"],"sourcesContent":["'use client';\n\nimport { useImperativeHandle, useLayoutEffect, useMemo, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { VideoContext, type VideoContextValue } from '../context';\nimport { aspectOf, playerWidthOf } from '../sizing';\nimport { createVideoStore, type VideoStore } from '../store';\nimport { styles } from '../style';\nimport { sortSections } from '../time';\nimport type { VideoMarker, VideoRootProps, VideoSection } from '../type';\nimport { handleVideoKey } from '../useKeyboard';\nimport { useVideoState } from '../useVideo';\n\nconst NO_MARKERS: VideoMarker[] = [];\nconst NO_SECTIONS: VideoSection[] = [];\n\nconst Root = ({\n  ref,\n  player,\n  src,\n  poster,\n  autoPlay,\n  loop,\n  preload = 'metadata',\n  onPlay,\n  onPause,\n  onEnded,\n  onError,\n  onTimeUpdate,\n  sections = NO_SECTIONS,\n  markers = NO_MARKERS,\n  fps = 30,\n  playbackRates,\n  defaultPlaybackRate,\n  muted,\n  onMutedChange,\n  onRateChange,\n  onMarkerClick,\n  onRetry,\n  captions = true,\n  width,\n  height,\n  maxHeight,\n  className,\n  style,\n  children,\n}: VideoRootProps) => {\n  const [ownStore] = useState(createVideoStore);\n  const store = (player as VideoStore | undefined) ?? ownStore;\n\n  // Assigned during render so the store already has them when a child Frame\n  // attaches its <video> in an effect, which runs before this component's own.\n  store.setOptions({ defaultPlaybackRate, muted, onMutedChange, onRateChange });\n\n  useImperativeHandle(ref, () => store, [store]);\n\n  const sorted = useMemo(() => sortSections(sections), [sections]);\n\n  useLayoutEffect(() => {\n    store.setData({ fps, markers, sections: sorted });\n  }, [store, fps, markers, sorted]);\n\n  useLayoutEffect(() => {\n    if (!captions) store.setCaptions(false);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [store]);\n\n  const size = useVideoState(store, (state) => state.size);\n  const sizing =\n    maxHeight === undefined\n      ? { height, width }\n      : { maxWidth: `${playerWidthOf(maxHeight, aspectOf(size))}px`, width: '100%' };\n\n  const value = useMemo<VideoContextValue>(\n    () => ({\n      config: { fps, markers, maxHeight, onMarkerClick, onRetry, playbackRates, sections: sorted },\n      media: {\n        autoPlay,\n        loop,\n        onEnded,\n        onError,\n        onPause,\n        onPlay,\n        onTimeUpdate,\n        poster,\n        preload,\n        src,\n      },\n      store,\n    }),\n    [\n      autoPlay,\n      fps,\n      loop,\n      markers,\n      maxHeight,\n      onEnded,\n      onError,\n      onMarkerClick,\n      onPause,\n      onPlay,\n      onRetry,\n      onTimeUpdate,\n      playbackRates,\n      poster,\n      preload,\n      sorted,\n      src,\n      store,\n    ],\n  );\n\n  return (\n    <VideoContext value={value}>\n      <div\n        ref={store.attachRoot}\n        tabIndex={0}\n        onKeyDown={(event) => {\n          if (handleVideoKey(event, store, playbackRates)) event.preventDefault();\n        }}\n        {...styleProps(styles.root, className, { ...sizing, ...style })}\n      >\n        {children}\n      </div>\n    </VideoContext>\n  );\n};\n\nRoot.displayName = 'VideoRoot';\n\nexport default Root;\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,aAA4B,CAAC;AACnC,MAAM,cAA8B,CAAC;AAErC,MAAM,QAAQ,EACZ,KACA,QACA,KACA,QACA,UACA,MACA,UAAU,YACV,QACA,SACA,SACA,SACA,cACA,WAAW,aACX,UAAU,YACV,MAAM,IACN,eACA,qBACA,OACA,eACA,cACA,eACA,SACA,WAAW,MACX,OACA,QACA,WACA,WACA,OACA,eACoB;CACpB,MAAM,CAAC,YAAY,SAAS,gBAAgB;CAC5C,MAAM,QAAS,UAAqC;CAIpD,MAAM,WAAW;EAAE;EAAqB;EAAO;EAAe;CAAa,CAAC;CAE5E,oBAAoB,WAAW,OAAO,CAAC,KAAK,CAAC;CAE7C,MAAM,SAAS,cAAc,aAAa,QAAQ,GAAG,CAAC,QAAQ,CAAC;CAE/D,sBAAsB;EACpB,MAAM,QAAQ;GAAE;GAAK;GAAS,UAAU;EAAO,CAAC;CAClD,GAAG;EAAC;EAAO;EAAK;EAAS;CAAM,CAAC;CAEhC,sBAAsB;EACpB,IAAI,CAAC,UAAU,MAAM,YAAY,KAAK;CAExC,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,OAAO,cAAc,QAAQ,UAAU,MAAM,IAAI;CACvD,MAAM,SACJ,cAAc,KAAA,IACV;EAAE;EAAQ;CAAM,IAChB;EAAE,UAAU,GAAG,cAAc,WAAW,SAAS,IAAI,CAAC,EAAE;EAAK,OAAO;CAAO;CAEjF,MAAM,QAAQ,eACL;EACL,QAAQ;GAAE;GAAK;GAAS;GAAW;GAAe;GAAS;GAAe,UAAU;EAAO;EAC3F,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,oBAAC,cAAD;EAAqB;EACnB,UAAA,oBAAC,OAAD;GACE,KAAK,MAAM;GACX,UAAU;GACV,YAAY,UAAU;IACpB,IAAI,eAAe,OAAO,OAAO,aAAa,GAAG,MAAM,eAAe;GACxE;GACA,GAAI,WAAW,OAAO,MAAM,WAAW;IAAE,GAAG;IAAQ,GAAG;GAAM,CAAC;GAE7D;EACE,CAAA;CACO,CAAA;AAElB;AAEA,KAAK,cAAc"}

package/es/Video/sizing.mjs

@@ -0,0 +1,7 @@
+const aspectOf = (size) => size?.height ? size.width / size.height : 16 / 9;
+const frameWidthOf = (maxHeight, aspect) => Math.round(maxHeight * aspect);
+const playerWidthOf = (maxHeight, aspect) => Math.max(480, frameWidthOf(maxHeight, aspect));
+//#endregion
+export { aspectOf, frameWidthOf, playerWidthOf };
+
+//# sourceMappingURL=sizing.mjs.map

package/es/Video/sizing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizing.mjs","names":[],"sources":["../../src/Video/sizing.ts"],"sourcesContent":["import type { VideoState } from './type';\n\n// Room for the widest control row (frame stepping, captions, speed, fullscreen),\n// so a portrait recording capped by maxHeight never pushes controls out of view.\nexport const MIN_PLAYER_WIDTH = 480;\n\nexport const aspectOf = (size: VideoState['size']) =>\n  size?.height ? size.width / size.height : 16 / 9;\n\nexport const frameWidthOf = (maxHeight: number, aspect: number) => Math.round(maxHeight * aspect);\n\nexport const playerWidthOf = (maxHeight: number, aspect: number) =>\n  Math.max(MIN_PLAYER_WIDTH, frameWidthOf(maxHeight, aspect));\n"],"mappings":"AAMA,MAAa,YAAY,SACvB,MAAM,SAAS,KAAK,QAAQ,KAAK,SAAS,KAAK;AAEjD,MAAa,gBAAgB,WAAmB,WAAmB,KAAK,MAAM,YAAY,MAAM;AAEhG,MAAa,iBAAiB,WAAmB,WAC/C,KAAK,IAAA,KAAsB,aAAa,WAAW,MAAM,CAAC"}

package/es/awesome/index.d.mts

@@ -58,13 +58,10 @@ import "./LandingSection/index.mjs";
 import { LogoMarqueeItem, LogoMarqueeProps } from "./LogoMarquee/type.mjs";
 import LogoMarquee from "./LogoMarquee/LogoMarquee.mjs";
 import "./LogoMarquee/index.mjs";
-import { SplineProps } from "./Spline/type.mjs";
-import Spline from "./Spline/Spine.mjs";
-import "./Spline/index.mjs";
 import { SpotlightProps } from "./Spotlight/type.mjs";
 import Spotlight from "./Spotlight/Spotlight.mjs";
 import "./Spotlight/index.mjs";
 import { CursorStyle, SegmentMode, TypewriterEffectProps } from "./TypewriterEffect/type.mjs";
 import TypewriterEffect from "./TypewriterEffect/TypewriterEffect.mjs";
 import "./TypewriterEffect/index.mjs";
-export { AgentSkillCard, type AgentSkillCardAgent, type AgentSkillCardMode, type AgentSkillCardPanel, type AgentSkillCardProps, AuroraBackground, type AuroraBackgroundProps, BentoCard, type BentoCardProps, BentoGrid, type BentoGridProps, BottomGradientButton, type BottomGradientButtonProps, CodeShowcase, type CodeShowcaseItem, type CodeShowcaseProps, type CursorStyle, DEFAULT_SKILL_AGENTS, FeatureGrid, type FeatureGridItem, type FeatureGridProps, type FeatureItemType, Features, type FeaturesProps, FluidGradient, type FluidGradientProps, Giscus, type GiscusProps, GradientButton, type GradientButtonProps, Grainient, type GrainientProps, GridBackground, type GridBackgroundProps, GridShowcase, type GridShowcaseProps, Hero, type HeroAction, type HeroProps, InstallBanner, type InstallBannerProps, LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, type LandingAction, LandingHero, type LandingHeroAction, type LandingHeroProps, type LandingLinkProps, type LandingLinkRender, type LandingNavigate, type LandingPalette, LandingSection, type LandingSectionProps, LogoMarquee, type LogoMarqueeItem, type LogoMarqueeProps, type SegmentMode, Spline, type SplineProps, Spotlight, SpotlightCard, type SpotlightCardProps, type SpotlightProps, TypewriterEffect, type TypewriterEffectProps, accentGradient as landingAccentGradient };
+export { AgentSkillCard, type AgentSkillCardAgent, type AgentSkillCardMode, type AgentSkillCardPanel, type AgentSkillCardProps, AuroraBackground, type AuroraBackgroundProps, BentoCard, type BentoCardProps, BentoGrid, type BentoGridProps, BottomGradientButton, type BottomGradientButtonProps, CodeShowcase, type CodeShowcaseItem, type CodeShowcaseProps, type CursorStyle, DEFAULT_SKILL_AGENTS, FeatureGrid, type FeatureGridItem, type FeatureGridProps, type FeatureItemType, Features, type FeaturesProps, FluidGradient, type FluidGradientProps, Giscus, type GiscusProps, GradientButton, type GradientButtonProps, Grainient, type GrainientProps, GridBackground, type GridBackgroundProps, GridShowcase, type GridShowcaseProps, Hero, type HeroAction, type HeroProps, InstallBanner, type InstallBannerProps, LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, type LandingAction, LandingHero, type LandingHeroAction, type LandingHeroProps, type LandingLinkProps, type LandingLinkRender, type LandingNavigate, type LandingPalette, LandingSection, type LandingSectionProps, LogoMarquee, type LogoMarqueeItem, type LogoMarqueeProps, type SegmentMode, Spotlight, SpotlightCard, type SpotlightCardProps, type SpotlightProps, TypewriterEffect, type TypewriterEffectProps, accentGradient as landingAccentGradient };

package/es/awesome/index.mjs

@@ -21,6 +21,5 @@ import InstallBanner from "./InstallBanner/InstallBanner.mjs";
 import LandingHero from "./LandingHero/LandingHero.mjs";
 import LandingSection from "./LandingSection/LandingSection.mjs";
 import LogoMarquee from "./LogoMarquee/LogoMarquee.mjs";
-import Spline from "./Spline/Spine.mjs";
 import TypewriterEffect from "./TypewriterEffect/TypewriterEffect.mjs";
-export { AgentSkillCard, AuroraBackground, BentoCard, BentoGrid, BottomGradientButton, CodeShowcase, DEFAULT_SKILL_AGENTS, FeatureGrid, Features, FluidGradient, Giscus, GradientButton, Grainient, GridBackground, GridShowcase, Hero, InstallBanner, LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, LandingHero, LandingSection, LogoMarquee, Spline, Spotlight, SpotlightCard, TypewriterEffect, accentGradient as landingAccentGradient };
+export { AgentSkillCard, AuroraBackground, BentoCard, BentoGrid, BottomGradientButton, CodeShowcase, DEFAULT_SKILL_AGENTS, FeatureGrid, Features, FluidGradient, Giscus, GradientButton, Grainient, GridBackground, GridShowcase, Hero, InstallBanner, LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, LandingHero, LandingSection, LogoMarquee, Spotlight, SpotlightCard, TypewriterEffect, accentGradient as landingAccentGradient };

package/es/brand/index.d.mts

@@ -6,6 +6,4 @@ import LobeHubText from "./LobeHubText/index.mjs";
 import Logo3d from "./Logo3d/index.mjs";
 import _default from "./LogoFlat/index.mjs";
 import icons_default from "./LogoMono/index.mjs";
-import LogoThree, { LogoThreeProps } from "./LogoThree/index.mjs";
-import LogoSpline, { LogoSplineProps } from "./LogoThree/LogoSpline.mjs";
-export { BrandLoading, type BrandLoadingProps, LobeChat, type LobeChatProps, LobeChatText, LobeHub, type LobeHubProps, LobeHubText, Logo3d, _default as LogoFlat, icons_default as LogoMono, LogoSpline, type LogoSplineProps, LogoThree, type LogoThreeProps };
+export { BrandLoading, type BrandLoadingProps, LobeChat, type LobeChatProps, LobeChatText, LobeHub, type LobeHubProps, LobeHubText, Logo3d, _default as LogoFlat, icons_default as LogoMono };

package/es/brand/index.mjs

@@ -6,6 +6,4 @@ import icons_default from "./LogoMono/index.mjs";
 import LobeChat from "./LobeChat/index.mjs";
 import LobeHubText from "./LobeHubText/index.mjs";
 import LobeHub from "./LobeHub/index.mjs";
-import LogoThree from "./LogoThree/index.mjs";
-import LogoSpline from "./LogoThree/LogoSpline.mjs";
-export { BrandLoading, LobeChat, LobeChatText, LobeHub, LobeHubText, Logo3d, LogoFlat_default as LogoFlat, icons_default as LogoMono, LogoSpline, LogoThree };
+export { BrandLoading, LobeChat, LobeChatText, LobeHub, LobeHubText, Logo3d, LogoFlat_default as LogoFlat, icons_default as LogoMono };

package/es/{brand → spline}/LogoThree/Loading.mjs

@@ -2,7 +2,7 @@ import Icon from "../../Icon/Icon.mjs";
 import Center from "../../Flex/Center.mjs";
 import { jsx } from "react/jsx-runtime";
 import { Loader2 } from "lucide-react";
-//#region src/brand/LogoThree/Loading.tsx
+//#region src/spline/LogoThree/Loading.tsx
 const Loading = ({ size = 32 }) => {
 	return /* @__PURE__ */ jsx(Center, {
 		height: "100%",

package/es/spline/LogoThree/Loading.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.mjs","names":[],"sources":["../../../src/spline/LogoThree/Loading.tsx"],"sourcesContent":["import { Loader2 } from 'lucide-react';\nimport { type FC } from 'react';\n\nimport { Center } from '@/Flex';\nimport Icon from '@/Icon';\n\nconst Loading: FC<{ size?: number }> = ({ size = 32 }) => {\n  return (\n    <Center height={'100%'} justify={'center'} style={{ position: 'absolute' }} width={'100%'}>\n      <Icon spin icon={Loader2} size={size} />\n    </Center>\n  );\n};\n\nexport default Loading;\n"],"mappings":";;;;;AAMA,MAAM,WAAkC,EAAE,OAAO,SAAS;CACxD,OACE,oBAAC,QAAD;EAAQ,QAAQ;EAAQ,SAAS;EAAU,OAAO,EAAE,UAAU,WAAW;EAAG,OAAO;EACjF,UAAA,oBAAC,MAAD;GAAM,MAAA;GAAK,MAAM;GAAe;EAAO,CAAA;CACjC,CAAA;AAEZ"}

package/es/{brand → spline}/LogoThree/LogoSpline.d.mts

@@ -1,7 +1,7 @@
-import { SplineProps } from "../../awesome/Spline/type.mjs";
-import "../../awesome/Spline/index.mjs";
+import { SplineProps } from "../Spline/type.mjs";
+import "../Spline/index.mjs";
 import { CSSProperties } from "react";
-//#region src/brand/LogoThree/LogoSpline.d.ts
+//#region src/spline/LogoThree/LogoSpline.d.ts
 export interface LogoSplineProps extends Partial<SplineProps> {
   className?: string;
   height?: number | string;

package/es/{brand → spline}/LogoThree/LogoSpline.mjs

@@ -1,9 +1,9 @@
 import { useThemeMode } from "../../styles/theme/scope.mjs";
-import Spline from "../../awesome/Spline/Spine.mjs";
+import Spline from "../Spline/Spine.mjs";
 import Loading from "./Loading.mjs";
 import { memo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/brand/LogoThree/LogoSpline.tsx
+//#region src/spline/LogoThree/LogoSpline.tsx
 const LIGHT = "https://hub-apac-1.lobeobjects.space/light.splinecode";
 const DARK = "https://hub-apac-1.lobeobjects.space/dark.splinecode";
 const LogoSpline = memo(({ className, style, width, height, onLoad, ...rest }) => {

package/es/{brand → spline}/LogoThree/LogoSpline.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LogoSpline.mjs","names":[],"sources":["../../../src/brand/LogoThree/LogoSpline.tsx"],"sourcesContent":["import { type CSSProperties, memo, useState } from 'react';\n\nimport Spline, { type SplineProps } from '@/awesome/Spline';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport Loading from './Loading';\n\nconst LIGHT = 'https://hub-apac-1.lobeobjects.space/light.splinecode';\nconst DARK = 'https://hub-apac-1.lobeobjects.space/dark.splinecode';\n\nexport interface LogoSplineProps extends Partial<SplineProps> {\n  className?: string;\n  height?: number | string;\n  style?: CSSProperties;\n  width?: number | string;\n}\n\nconst LogoSpline = memo<LogoSplineProps>(({ className, style, width, height, onLoad, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n  const [loading, setLoading] = useState(true);\n  return (\n    <div className={className} style={{ height, position: 'relative', width, ...style }}>\n      {loading && <Loading />}\n      <Spline\n        scene={isDarkMode ? DARK : LIGHT}\n        onLoad={(splineApp) => {\n          setLoading(false);\n          onLoad?.(splineApp);\n        }}\n        {...rest}\n      />\n    </div>\n  );\n});\n\nexport default LogoSpline;\n"],"mappings":";;;;;;AAOA,MAAM,QAAQ;AACd,MAAM,OAAO;AASb,MAAM,aAAa,MAAuB,EAAE,WAAW,OAAO,OAAO,QAAQ,QAAQ,GAAG,WAAW;CACjG,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAC3C,OACE,qBAAC,OAAD;EAAgB;EAAW,OAAO;GAAE;GAAQ,UAAU;GAAY;GAAO,GAAG;EAAM;EAAlF,UAAA,CACG,WAAW,oBAAC,SAAD,CAAU,CAAA,GACtB,oBAAC,QAAD;GACE,OAAO,aAAa,OAAO;GAC3B,SAAS,cAAc;IACrB,WAAW,KAAK;IAChB,SAAS,SAAS;GACpB;GACA,GAAI;EACL,CAAA,CACE;;AAET,CAAC"}
+{"version":3,"file":"LogoSpline.mjs","names":[],"sources":["../../../src/spline/LogoThree/LogoSpline.tsx"],"sourcesContent":["import { type CSSProperties, memo, useState } from 'react';\n\nimport Spline, { type SplineProps } from '@/spline/Spline';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport Loading from './Loading';\n\nconst LIGHT = 'https://hub-apac-1.lobeobjects.space/light.splinecode';\nconst DARK = 'https://hub-apac-1.lobeobjects.space/dark.splinecode';\n\nexport interface LogoSplineProps extends Partial<SplineProps> {\n  className?: string;\n  height?: number | string;\n  style?: CSSProperties;\n  width?: number | string;\n}\n\nconst LogoSpline = memo<LogoSplineProps>(({ className, style, width, height, onLoad, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n  const [loading, setLoading] = useState(true);\n  return (\n    <div className={className} style={{ height, position: 'relative', width, ...style }}>\n      {loading && <Loading />}\n      <Spline\n        scene={isDarkMode ? DARK : LIGHT}\n        onLoad={(splineApp) => {\n          setLoading(false);\n          onLoad?.(splineApp);\n        }}\n        {...rest}\n      />\n    </div>\n  );\n});\n\nexport default LogoSpline;\n"],"mappings":";;;;;;AAOA,MAAM,QAAQ;AACd,MAAM,OAAO;AASb,MAAM,aAAa,MAAuB,EAAE,WAAW,OAAO,OAAO,QAAQ,QAAQ,GAAG,WAAW;CACjG,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAC3C,OACE,qBAAC,OAAD;EAAgB;EAAW,OAAO;GAAE;GAAQ,UAAU;GAAY;GAAO,GAAG;EAAM;EAAlF,UAAA,CACG,WAAW,oBAAC,SAAD,CAAU,CAAA,GACtB,oBAAC,QAAD;GACE,OAAO,aAAa,OAAO;GAC3B,SAAS,cAAc;IACrB,WAAW,KAAK;IAChB,SAAS,SAAS;GACpB;GACA,GAAI;EACL,CAAA,CACE;;AAET,CAAC"}

package/es/{brand → spline}/LogoThree/index.d.mts

@@ -1,7 +1,7 @@
-import { SplineProps } from "../../awesome/Spline/type.mjs";
-import "../../awesome/Spline/index.mjs";
+import { SplineProps } from "../Spline/type.mjs";
+import "../Spline/index.mjs";
 import { CSSProperties } from "react";
-//#region src/brand/LogoThree/index.d.ts
+//#region src/spline/LogoThree/index.d.ts
 export interface LogoThreeProps extends Partial<SplineProps> {
   className?: string;
   size?: number;

package/es/{brand → spline}/LogoThree/index.mjs

@@ -2,10 +2,10 @@
 import { useCdnFn } from "../../ConfigProvider/index.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import Img from "../../Img/index.mjs";
-import Spline from "../../awesome/Spline/Spine.mjs";
+import Spline from "../Spline/Spine.mjs";
 import { memo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/brand/LogoThree/index.tsx
+//#region src/spline/LogoThree/index.tsx
 const LOGO_3D = {
 	path: "assets/logo-3d.webp",
 	pkg: "@lobehub/assets-logo",

package/es/{brand → spline}/LogoThree/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Flexbox"],"sources":["../../../src/brand/LogoThree/index.tsx"],"sourcesContent":["'use client';\n\nimport { type CSSProperties, memo, useState } from 'react';\n\nimport Spline, { type SplineProps } from '@/awesome/Spline';\nimport { useCdnFn } from '@/ConfigProvider';\nimport { Flexbox } from '@/Flex';\nimport Img from '@/Img';\n\nconst LOGO_3D = {\n  path: 'assets/logo-3d.webp',\n  pkg: '@lobehub/assets-logo',\n  version: '1.2.0',\n};\n\nexport interface LogoThreeProps extends Partial<SplineProps> {\n  className?: string;\n  size?: number;\n  style?: CSSProperties;\n}\n\nconst LogoThree = memo<LogoThreeProps>(({ className, style, size = 128, onLoad, ...rest }) => {\n  const genCdnUrl = useCdnFn();\n  const [loading, setLoading] = useState(true);\n  return (\n    <Flexbox\n      align={'center'}\n      className={className}\n      flex={'none'}\n      justify={'center'}\n      style={{ height: size, overflow: 'hidden', position: 'relative', width: size, ...style }}\n    >\n      {loading && (\n        <Img\n          alt={'logo'}\n          height={size * 0.75}\n          src={genCdnUrl(LOGO_3D)}\n          style={{ position: 'absolute' }}\n          width={size * 0.75}\n        />\n      )}\n      <Spline\n        scene={'https://hub-apac-1.lobeobjects.space/logo.splinecode'}\n        style={{\n          flex: 'none',\n          height: size,\n          width: size,\n        }}\n        onLoad={(splineApp) => {\n          setLoading(false);\n          onLoad?.(splineApp);\n        }}\n        {...rest}\n      />\n    </Flexbox>\n  );\n});\n\nLogoThree.displayName = 'LobeHubLogoThree';\n\nexport default LogoThree;\n"],"mappings":";;;;;;;;AASA,MAAM,UAAU;CACd,MAAM;CACN,KAAK;CACL,SAAS;AACX;AAQA,MAAM,YAAY,MAAsB,EAAE,WAAW,OAAO,OAAO,KAAK,QAAQ,GAAG,WAAW;CAC5F,MAAM,YAAY,SAAS;CAC3B,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAC3C,OACE,qBAACA,mBAAD;EACE,OAAO;EACI;EACX,MAAM;EACN,SAAS;EACT,OAAO;GAAE,QAAQ;GAAM,UAAU;GAAU,UAAU;GAAY,OAAO;GAAM,GAAG;EAAM;EALzF,UAAA,CAOG,WACC,oBAAC,KAAD;GACE,KAAK;GACL,QAAQ,OAAO;GACf,KAAK,UAAU,OAAO;GACtB,OAAO,EAAE,UAAU,WAAW;GAC9B,OAAO,OAAO;EACf,CAAA,GAEH,oBAAC,QAAD;GACE,OAAO;GACP,OAAO;IACL,MAAM;IACN,QAAQ;IACR,OAAO;GACT;GACA,SAAS,cAAc;IACrB,WAAW,KAAK;IAChB,SAAS,SAAS;GACpB;GACA,GAAI;EACL,CAAA,CACM;;AAEb,CAAC;AAED,UAAU,cAAc"}
+{"version":3,"file":"index.mjs","names":["Flexbox"],"sources":["../../../src/spline/LogoThree/index.tsx"],"sourcesContent":["'use client';\n\nimport { type CSSProperties, memo, useState } from 'react';\n\nimport { useCdnFn } from '@/ConfigProvider';\nimport { Flexbox } from '@/Flex';\nimport Img from '@/Img';\nimport Spline, { type SplineProps } from '@/spline/Spline';\n\nconst LOGO_3D = {\n  path: 'assets/logo-3d.webp',\n  pkg: '@lobehub/assets-logo',\n  version: '1.2.0',\n};\n\nexport interface LogoThreeProps extends Partial<SplineProps> {\n  className?: string;\n  size?: number;\n  style?: CSSProperties;\n}\n\nconst LogoThree = memo<LogoThreeProps>(({ className, style, size = 128, onLoad, ...rest }) => {\n  const genCdnUrl = useCdnFn();\n  const [loading, setLoading] = useState(true);\n  return (\n    <Flexbox\n      align={'center'}\n      className={className}\n      flex={'none'}\n      justify={'center'}\n      style={{ height: size, overflow: 'hidden', position: 'relative', width: size, ...style }}\n    >\n      {loading && (\n        <Img\n          alt={'logo'}\n          height={size * 0.75}\n          src={genCdnUrl(LOGO_3D)}\n          style={{ position: 'absolute' }}\n          width={size * 0.75}\n        />\n      )}\n      <Spline\n        scene={'https://hub-apac-1.lobeobjects.space/logo.splinecode'}\n        style={{\n          flex: 'none',\n          height: size,\n          width: size,\n        }}\n        onLoad={(splineApp) => {\n          setLoading(false);\n          onLoad?.(splineApp);\n        }}\n        {...rest}\n      />\n    </Flexbox>\n  );\n});\n\nLogoThree.displayName = 'LobeHubLogoThree';\n\nexport default LogoThree;\n"],"mappings":";;;;;;;;AASA,MAAM,UAAU;CACd,MAAM;CACN,KAAK;CACL,SAAS;AACX;AAQA,MAAM,YAAY,MAAsB,EAAE,WAAW,OAAO,OAAO,KAAK,QAAQ,GAAG,WAAW;CAC5F,MAAM,YAAY,SAAS;CAC3B,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAC3C,OACE,qBAACA,mBAAD;EACE,OAAO;EACI;EACX,MAAM;EACN,SAAS;EACT,OAAO;GAAE,QAAQ;GAAM,UAAU;GAAU,UAAU;GAAY,OAAO;GAAM,GAAG;EAAM;EALzF,UAAA,CAOG,WACC,oBAAC,KAAD;GACE,KAAK;GACL,QAAQ,OAAO;GACf,KAAK,UAAU,OAAO;GACtB,OAAO,EAAE,UAAU,WAAW;GAC9B,OAAO,OAAO;EACf,CAAA,GAEH,oBAAC,QAAD;GACE,OAAO;GACP,OAAO;IACL,MAAM;IACN,QAAQ;IACR,OAAO;GACT;GACA,SAAS,cAAc;IACrB,WAAW,KAAK;IAChB,SAAS,SAAS;GACpB;GACA,GAAI;EACL,CAAA,CACM;;AAEb,CAAC;AAED,UAAU,cAAc"}

package/es/{awesome → spline}/Spline/ParentSize.mjs

@@ -2,7 +2,7 @@ import { mergeRefs } from "../../utils/mergeRefs.mjs";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { debounce } from "es-toolkit/compat";
-//#region src/awesome/Spline/ParentSize.tsx
+//#region src/spline/Spline/ParentSize.tsx
 const defaultIgnoreDimensions = [];
 const defaultParentSizeStyles = {
 	height: "100%",

package/es/spline/Spline/ParentSize.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParentSize.mjs","names":[],"sources":["../../../src/spline/Spline/ParentSize.tsx"],"sourcesContent":["import { debounce } from 'es-toolkit/compat';\nimport {\n  type CSSProperties,\n  memo,\n  type ReactNode,\n  type Ref,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { mergeRefs } from '@/utils/mergeRefs';\n\ninterface ResizeObserverCallback {\n  (entries: ResizeObserverEntry[], observer: ResizeObserver): void;\n}\n\ninterface ResizeObserverPolyfill {\n  new (callback: ResizeObserverCallback): ResizeObserver;\n}\n\n// @TODO remove when upgraded to TS 4 which has its own declaration\ninterface PrivateWindow {\n  ResizeObserver: ResizeObserverPolyfill;\n}\n\nexport interface ParentSizeProps {\n  /** Child render function `({ width, height, top, left, ref, resize }) => ReactNode`. */\n  children: (\n    args: {\n      ref: HTMLDivElement | null;\n      resize: (state: ParentSizeState) => void;\n    } & ParentSizeState,\n  ) => ReactNode;\n  /** Optional `className` to add to the parent `div` wrapper used for size measurement. */\n  className?: string;\n  /** Child render updates upon resize are delayed until `debounceTime` milliseconds _after_ the last resize event is observed. */\n  debounceTime?: number;\n  /** Optional flag to toggle leading debounce calls. When set to true this will ensure that the component always renders immediately. (defaults to true) */\n  enableDebounceLeadingCall?: boolean;\n  /** Optional dimensions provided won't trigger a state change when changed. */\n  ignoreDimensions?: keyof ParentSizeState | (keyof ParentSizeState)[];\n  /** Optional `style` object to apply to the parent `div` wrapper used for size measurement. */\n  parentSizeStyles?: CSSProperties;\n  ref?: Ref<HTMLDivElement>;\n  /** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */\n  resizeObserverPolyfill?: ResizeObserverPolyfill;\n}\n\ntype ParentSizeState = {\n  height: number;\n  left: number;\n  top: number;\n  width: number;\n};\n\nexport type ParentSizeProvidedProps = ParentSizeState;\n\nconst defaultIgnoreDimensions: ParentSizeProps['ignoreDimensions'] = [];\nconst defaultParentSizeStyles = { height: '100%', width: '100%' };\n\nconst ParentSize = memo<ParentSizeProps>(\n  ({\n    ref,\n    className,\n    children,\n    debounceTime = 300,\n    ignoreDimensions = defaultIgnoreDimensions,\n    parentSizeStyles,\n    enableDebounceLeadingCall = true,\n    resizeObserverPolyfill,\n    ...restProps\n  }) => {\n    const target = useRef<HTMLDivElement | null>(null);\n    const animationFrameID = useRef(0);\n\n    const [state, setState] = useState<ParentSizeState>({\n      height: 0,\n      left: 0,\n      top: 0,\n      width: 0,\n    });\n\n    const resize = useMemo(() => {\n      const normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions];\n\n      return debounce(\n        (incoming: ParentSizeState) => {\n          setState((existing) => {\n            const stateKeys = Object.keys(existing) as (keyof ParentSizeState)[];\n            const keysWithChanges = stateKeys.filter((key) => existing[key] !== incoming[key]);\n            const shouldBail = keysWithChanges.every((key) => normalized.includes(key));\n\n            return shouldBail ? existing : incoming;\n          });\n        },\n        debounceTime,\n        { leading: enableDebounceLeadingCall },\n      );\n    }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]);\n\n    useEffect(() => {\n      const LocalResizeObserver =\n        resizeObserverPolyfill || (window as unknown as PrivateWindow).ResizeObserver;\n\n      const observer = new LocalResizeObserver((entries) => {\n        for (const entry of entries) {\n          const { left, top, width, height } = entry?.contentRect ?? {};\n          animationFrameID.current = window.requestAnimationFrame(() => {\n            resize({ height, left, top, width });\n          });\n        }\n      });\n      if (target.current) observer.observe(target.current);\n\n      return () => {\n        window.cancelAnimationFrame(animationFrameID.current);\n        observer.disconnect();\n        resize.cancel();\n      };\n    }, [resize, resizeObserverPolyfill]);\n\n    return (\n      <div\n        className={className}\n        ref={mergeRefs<HTMLDivElement>([ref, target])}\n        style={{ ...defaultParentSizeStyles, ...parentSizeStyles }}\n        {...restProps}\n      >\n        {children({\n          ...state,\n          ref: target.current,\n          resize,\n        })}\n      </div>\n    );\n  },\n);\n\nexport default ParentSize;\n"],"mappings":";;;;;AA2DA,MAAM,0BAA+D,CAAC;AACtE,MAAM,0BAA0B;CAAE,QAAQ;CAAQ,OAAO;AAAO;AAEhE,MAAM,aAAa,MAChB,EACC,KACA,WACA,UACA,eAAe,KACf,mBAAmB,yBACnB,kBACA,4BAA4B,MAC5B,wBACA,GAAG,gBACC;CACJ,MAAM,SAAS,OAA8B,IAAI;CACjD,MAAM,mBAAmB,OAAO,CAAC;CAEjC,MAAM,CAAC,OAAO,YAAY,SAA0B;EAClD,QAAQ;EACR,MAAM;EACN,KAAK;EACL,OAAO;CACT,CAAC;CAED,MAAM,SAAS,cAAc;EAC3B,MAAM,aAAa,MAAM,QAAQ,gBAAgB,IAAI,mBAAmB,CAAC,gBAAgB;EAEzF,OAAO,UACJ,aAA8B;GAC7B,UAAU,aAAa;IAKrB,OAJkB,OAAO,KAAK,QACE,CAAC,CAAC,QAAQ,QAAQ,SAAS,SAAS,SAAS,IAC5C,CAAC,CAAC,OAAO,QAAQ,WAAW,SAAS,GAAG,CAEzD,IAAI,WAAW;GACjC,CAAC;EACH,GACA,cACA,EAAE,SAAS,0BAA0B,CACvC;CACF,GAAG;EAAC;EAAc;EAA2B;CAAgB,CAAC;CAE9D,gBAAgB;EAId,MAAM,WAAW,KAFf,0BAA2B,OAAoC,iBAEvB,YAAY;GACpD,KAAK,MAAM,SAAS,SAAS;IAC3B,MAAM,EAAE,MAAM,KAAK,OAAO,WAAW,OAAO,eAAe,CAAC;IAC5D,iBAAiB,UAAU,OAAO,4BAA4B;KAC5D,OAAO;MAAE;MAAQ;MAAM;MAAK;KAAM,CAAC;IACrC,CAAC;GACH;EACF,CAAC;EACD,IAAI,OAAO,SAAS,SAAS,QAAQ,OAAO,OAAO;EAEnD,aAAa;GACX,OAAO,qBAAqB,iBAAiB,OAAO;GACpD,SAAS,WAAW;GACpB,OAAO,OAAO;EAChB;CACF,GAAG,CAAC,QAAQ,sBAAsB,CAAC;CAEnC,OACE,oBAAC,OAAD;EACa;EACX,KAAK,UAA0B,CAAC,KAAK,MAAM,CAAC;EAC5C,OAAO;GAAE,GAAG;GAAyB,GAAG;EAAiB;EACzD,GAAI;EAEH,UAAA,SAAS;GACR,GAAG;GACH,KAAK,OAAO;GACZ;EACF,CAAC;CACE,CAAA;AAET,CACF"}

package/es/spline/Spline/Spine.d.mts

@@ -0,0 +1,7 @@
+import { SplineProps } from "./type.mjs";
+import { SPEObject, SplineEvent as SplineEvent$1, SplineEventName } from "@splinetool/runtime";
+//#region src/spline/Spline/Spine.d.ts
+declare const Spline: import("react").NamedExoticComponent<SplineProps>;
+//#endregion
+export { type SPEObject, type SplineEvent$1 as SplineEvent, type SplineEventName, Spline as default };
+//# sourceMappingURL=Spine.d.mts.map

package/es/{awesome → spline}/Spline/Spine.mjs

@@ -2,8 +2,7 @@
 import ParentSize from "./ParentSize.mjs";
 import { memo, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Application } from "@splinetool/runtime";
-//#region src/awesome/Spline/Spine.tsx
+//#region src/spline/Spline/Spine.tsx
 const Spline = memo(({ ref, scene, style, onMouseDown, onMouseUp, onMouseHover, onKeyDown, onKeyUp, onStart, onLookAt, onFollow, onWheel, onLoad, renderOnDemand = true, ...props }) => {
 	const canvasRef = useRef(null);
 	const [isLoading, setIsLoading] = useState(true);
@@ -15,6 +14,9 @@ const Spline = memo(({ ref, scene, style, onMouseDown, onMouseUp, onMouseHover,
 	};
 	useEffect(() => {
 		setIsLoading(true);
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+		let disposed = false;
 		let speApp;
 		const events = [
 			{
@@ -54,11 +56,14 @@ const Spline = memo(({ ref, scene, style, onMouseDown, onMouseUp, onMouseHover,
 				name: "scroll"
 			}
 		];
-		if (canvasRef.current) {
-			speApp = new Application(canvasRef.current, { renderOnDemand });
+		import("@splinetool/runtime").then((runtime) => {
+			if (disposed) return;
+			speApp = new runtime.Application(canvas, { renderOnDemand });
 			init(speApp, events);
-		}
+		});
 		return () => {
+			disposed = true;
+			if (!speApp) return;
 			for (const event of events) if (event.cb) speApp.removeEventListener(event.name, event.cb);
 			speApp.dispose();
 		};

package/es/spline/Spline/Spine.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spine.mjs","names":[],"sources":["../../../src/spline/Spline/Spine.tsx"],"sourcesContent":["'use client';\n\nimport type { Application, SplineEvent, SplineEventName } from '@splinetool/runtime';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport ParentSize from './ParentSize';\nimport { type SplineProps } from './type';\n\nconst Spline = memo<SplineProps>(\n  ({\n    ref,\n    scene,\n    style,\n    onMouseDown,\n    onMouseUp,\n    onMouseHover,\n    onKeyDown,\n    onKeyUp,\n    onStart,\n    onLookAt,\n    onFollow,\n    onWheel,\n    onLoad,\n    renderOnDemand = true,\n    ...props\n  }) => {\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const [isLoading, setIsLoading] = useState(true);\n\n    const init = async (\n      speApp: Application,\n      events: {\n        cb?: (e: SplineEvent) => void;\n        name: SplineEventName;\n      }[],\n    ) => {\n      await speApp.load(scene);\n\n      for (const event of events) {\n        if (event.cb) {\n          speApp.addEventListener(event.name, event.cb);\n        }\n      }\n\n      setIsLoading(false);\n      onLoad?.(speApp);\n    };\n\n    // Initialize runtime when component is mounted\n    useEffect(() => {\n      setIsLoading(true);\n\n      const canvas = canvasRef.current;\n      if (!canvas) return;\n\n      let disposed = false;\n      let speApp: Application | undefined;\n      const events: {\n        cb?: (e: SplineEvent) => void;\n        name: SplineEventName;\n      }[] = [\n        {\n          cb: onMouseDown,\n          name: 'mouseDown',\n        },\n        {\n          cb: onMouseUp,\n          name: 'mouseUp',\n        },\n        {\n          cb: onMouseHover,\n          name: 'mouseHover',\n        },\n        {\n          cb: onKeyDown,\n          name: 'keyDown',\n        },\n        {\n          cb: onKeyUp,\n          name: 'keyUp',\n        },\n        {\n          cb: onStart,\n          name: 'start',\n        },\n        {\n          cb: onLookAt,\n          name: 'lookAt',\n        },\n        {\n          cb: onFollow,\n          name: 'follow',\n        },\n        {\n          cb: onWheel,\n          name: 'scroll',\n        },\n      ];\n\n      void import('@splinetool/runtime').then((runtime) => {\n        if (disposed) return;\n        speApp = new runtime.Application(canvas, { renderOnDemand });\n        void init(speApp, events);\n      });\n\n      return () => {\n        disposed = true;\n        if (!speApp) return;\n        for (const event of events) {\n          if (event.cb) {\n            speApp.removeEventListener(event.name, event.cb);\n          }\n        }\n        speApp.dispose();\n      };\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [scene]);\n\n    return (\n      <ParentSize debounceTime={50} parentSizeStyles={style} ref={ref} {...props}>\n        {() => {\n          return (\n            <canvas\n              ref={canvasRef}\n              style={{\n                display: isLoading ? 'none' : 'block',\n              }}\n            />\n          );\n        }}\n      </ParentSize>\n    );\n  },\n);\n\nSpline.displayName = 'Spline';\n\nexport default Spline;\n\nexport type { SPEObject, SplineEvent, SplineEventName } from '@splinetool/runtime';\n"],"mappings":";;;;;AAQA,MAAM,SAAS,MACZ,EACC,KACA,OACA,OACA,aACA,WACA,cACA,WACA,SACA,SACA,UACA,UACA,SACA,QACA,iBAAiB,MACjB,GAAG,YACC;CACJ,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,CAAC,WAAW,gBAAgB,SAAS,IAAI;CAE/C,MAAM,OAAO,OACX,QACA,WAIG;EACH,MAAM,OAAO,KAAK,KAAK;EAEvB,KAAK,MAAM,SAAS,QAClB,IAAI,MAAM,IACR,OAAO,iBAAiB,MAAM,MAAM,MAAM,EAAE;EAIhD,aAAa,KAAK;EAClB,SAAS,MAAM;CACjB;CAGA,gBAAgB;EACd,aAAa,IAAI;EAEjB,MAAM,SAAS,UAAU;EACzB,IAAI,CAAC,QAAQ;EAEb,IAAI,WAAW;EACf,IAAI;EACJ,MAAM,SAGA;GACJ;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;EACF;EAEA,OAAY,sBAAsB,CAAC,MAAM,YAAY;GACnD,IAAI,UAAU;GACd,SAAS,IAAI,QAAQ,YAAY,QAAQ,EAAE,eAAe,CAAC;GAC3D,KAAU,QAAQ,MAAM;EAC1B,CAAC;EAED,aAAa;GACX,WAAW;GACX,IAAI,CAAC,QAAQ;GACb,KAAK,MAAM,SAAS,QAClB,IAAI,MAAM,IACR,OAAO,oBAAoB,MAAM,MAAM,MAAM,EAAE;GAGnD,OAAO,QAAQ;EACjB;CAEF,GAAG,CAAC,KAAK,CAAC;CAEV,OACE,oBAAC,YAAD;EAAY,cAAc;EAAI,kBAAkB;EAAY;EAAK,GAAI;EAC5D,gBAAA;GACL,OACE,oBAAC,UAAD;IACE,KAAK;IACL,OAAO,EACL,SAAS,YAAY,SAAS,QAChC;GACD,CAAA;EAEL;CACU,CAAA;AAEhB,CACF;AAEA,OAAO,cAAc"}

package/es/{awesome → spline}/Spline/type.d.mts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, Ref } from "react";
 import { Application, SplineEvent } from "@splinetool/runtime";
-//#region src/awesome/Spline/type.d.ts
+//#region src/spline/Spline/type.d.ts
 export interface SplineProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoad' | 'onMouseDown' | 'onMouseUp' | 'onMouseHover' | 'onKeyDown' | 'onKeyUp' | 'onWheel'> {
   onFollow?: (e: SplineEvent) => void;
   onKeyDown?: (e: SplineEvent) => void;

package/es/spline/index.d.mts

@@ -0,0 +1,6 @@
+import { SplineProps } from "./Spline/type.mjs";
+import Spline, { SPEObject, SplineEvent, SplineEventName } from "./Spline/Spine.mjs";
+import "./Spline/index.mjs";
+import LogoThree, { LogoThreeProps } from "./LogoThree/index.mjs";
+import LogoSpline, { LogoSplineProps } from "./LogoThree/LogoSpline.mjs";
+export { LogoSpline, type LogoSplineProps, LogoThree, type LogoThreeProps, type SPEObject, Spline, type SplineEvent, type SplineEventName, type SplineProps };

package/es/spline/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/spline/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/spline/index.mjs

@@ -0,0 +1,4 @@
+import Spline from "./Spline/Spine.mjs";
+import LogoThree from "./LogoThree/index.mjs";
+import LogoSpline from "./LogoThree/LogoSpline.mjs";
+export { LogoSpline, LogoThree, Spline };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "6.0.4",
+  "version": "6.0.6",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -49,6 +49,10 @@
       "types": "./es/brand/index.d.mts",
       "import": "./es/brand/index.mjs"
     },
+    "./spline": {
+      "types": "./es/spline/index.d.mts",
+      "import": "./es/spline/index.mjs"
+    },
     "./chat": {
       "types": "./es/chat/index.d.mts",
       "import": "./es/chat/index.mjs"
@@ -149,7 +153,6 @@
     "@shikijs/core": "^4.5.0",
     "@shikijs/stream": "^4.5.0",
     "@shikijs/transformers": "^4.5.0",
-    "@splinetool/runtime": "1.12.98",
     "@stylexjs/stylex": "0.19.1",
     "@tanstack/form-core": "^1.33.5",
     "@tanstack/react-table": "^9.2.8",
@@ -188,10 +191,16 @@
   "peerDependencies": {
     "@lobehub/fluent-emoji": "^5.0.0-beta.1",
     "@lobehub/icons": "^6.0.0-beta.1",
+    "@splinetool/runtime": "^1.12.0",
     "motion": "^13.0.0 || ^14.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
+  "peerDependenciesMeta": {
+    "@splinetool/runtime": {
+      "optional": true
+    }
+  },
   "packageManager": "pnpm@12.3.4+sha512.961aa41fb077da3a04a441d9f8e15ebc0c96da8ef710b2eb67bf9ee7cb0610eabd48f1fd85f51cffe73846785fa0f87c56a3a872a1d893f8446741b5cce45457",
   "engines": {
     "node": ">=22.22.0"

package/es/awesome/Spline/ParentSize.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ParentSize.mjs","names":[],"sources":["../../../src/awesome/Spline/ParentSize.tsx"],"sourcesContent":["import { debounce } from 'es-toolkit/compat';\nimport {\n  type CSSProperties,\n  memo,\n  type ReactNode,\n  type Ref,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { mergeRefs } from '@/utils/mergeRefs';\n\ninterface ResizeObserverCallback {\n  (entries: ResizeObserverEntry[], observer: ResizeObserver): void;\n}\n\ninterface ResizeObserverPolyfill {\n  new (callback: ResizeObserverCallback): ResizeObserver;\n}\n\n// @TODO remove when upgraded to TS 4 which has its own declaration\ninterface PrivateWindow {\n  ResizeObserver: ResizeObserverPolyfill;\n}\n\nexport interface ParentSizeProps {\n  /** Child render function `({ width, height, top, left, ref, resize }) => ReactNode`. */\n  children: (\n    args: {\n      ref: HTMLDivElement | null;\n      resize: (state: ParentSizeState) => void;\n    } & ParentSizeState,\n  ) => ReactNode;\n  /** Optional `className` to add to the parent `div` wrapper used for size measurement. */\n  className?: string;\n  /** Child render updates upon resize are delayed until `debounceTime` milliseconds _after_ the last resize event is observed. */\n  debounceTime?: number;\n  /** Optional flag to toggle leading debounce calls. When set to true this will ensure that the component always renders immediately. (defaults to true) */\n  enableDebounceLeadingCall?: boolean;\n  /** Optional dimensions provided won't trigger a state change when changed. */\n  ignoreDimensions?: keyof ParentSizeState | (keyof ParentSizeState)[];\n  /** Optional `style` object to apply to the parent `div` wrapper used for size measurement. */\n  parentSizeStyles?: CSSProperties;\n  ref?: Ref<HTMLDivElement>;\n  /** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */\n  resizeObserverPolyfill?: ResizeObserverPolyfill;\n}\n\ntype ParentSizeState = {\n  height: number;\n  left: number;\n  top: number;\n  width: number;\n};\n\nexport type ParentSizeProvidedProps = ParentSizeState;\n\nconst defaultIgnoreDimensions: ParentSizeProps['ignoreDimensions'] = [];\nconst defaultParentSizeStyles = { height: '100%', width: '100%' };\n\nconst ParentSize = memo<ParentSizeProps>(\n  ({\n    ref,\n    className,\n    children,\n    debounceTime = 300,\n    ignoreDimensions = defaultIgnoreDimensions,\n    parentSizeStyles,\n    enableDebounceLeadingCall = true,\n    resizeObserverPolyfill,\n    ...restProps\n  }) => {\n    const target = useRef<HTMLDivElement | null>(null);\n    const animationFrameID = useRef(0);\n\n    const [state, setState] = useState<ParentSizeState>({\n      height: 0,\n      left: 0,\n      top: 0,\n      width: 0,\n    });\n\n    const resize = useMemo(() => {\n      const normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions];\n\n      return debounce(\n        (incoming: ParentSizeState) => {\n          setState((existing) => {\n            const stateKeys = Object.keys(existing) as (keyof ParentSizeState)[];\n            const keysWithChanges = stateKeys.filter((key) => existing[key] !== incoming[key]);\n            const shouldBail = keysWithChanges.every((key) => normalized.includes(key));\n\n            return shouldBail ? existing : incoming;\n          });\n        },\n        debounceTime,\n        { leading: enableDebounceLeadingCall },\n      );\n    }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]);\n\n    useEffect(() => {\n      const LocalResizeObserver =\n        resizeObserverPolyfill || (window as unknown as PrivateWindow).ResizeObserver;\n\n      const observer = new LocalResizeObserver((entries) => {\n        for (const entry of entries) {\n          const { left, top, width, height } = entry?.contentRect ?? {};\n          animationFrameID.current = window.requestAnimationFrame(() => {\n            resize({ height, left, top, width });\n          });\n        }\n      });\n      if (target.current) observer.observe(target.current);\n\n      return () => {\n        window.cancelAnimationFrame(animationFrameID.current);\n        observer.disconnect();\n        resize.cancel();\n      };\n    }, [resize, resizeObserverPolyfill]);\n\n    return (\n      <div\n        className={className}\n        ref={mergeRefs<HTMLDivElement>([ref, target])}\n        style={{ ...defaultParentSizeStyles, ...parentSizeStyles }}\n        {...restProps}\n      >\n        {children({\n          ...state,\n          ref: target.current,\n          resize,\n        })}\n      </div>\n    );\n  },\n);\n\nexport default ParentSize;\n"],"mappings":";;;;;AA2DA,MAAM,0BAA+D,CAAC;AACtE,MAAM,0BAA0B;CAAE,QAAQ;CAAQ,OAAO;AAAO;AAEhE,MAAM,aAAa,MAChB,EACC,KACA,WACA,UACA,eAAe,KACf,mBAAmB,yBACnB,kBACA,4BAA4B,MAC5B,wBACA,GAAG,gBACC;CACJ,MAAM,SAAS,OAA8B,IAAI;CACjD,MAAM,mBAAmB,OAAO,CAAC;CAEjC,MAAM,CAAC,OAAO,YAAY,SAA0B;EAClD,QAAQ;EACR,MAAM;EACN,KAAK;EACL,OAAO;CACT,CAAC;CAED,MAAM,SAAS,cAAc;EAC3B,MAAM,aAAa,MAAM,QAAQ,gBAAgB,IAAI,mBAAmB,CAAC,gBAAgB;EAEzF,OAAO,UACJ,aAA8B;GAC7B,UAAU,aAAa;IAKrB,OAJkB,OAAO,KAAK,QACE,CAAC,CAAC,QAAQ,QAAQ,SAAS,SAAS,SAAS,IAC5C,CAAC,CAAC,OAAO,QAAQ,WAAW,SAAS,GAAG,CAEzD,IAAI,WAAW;GACjC,CAAC;EACH,GACA,cACA,EAAE,SAAS,0BAA0B,CACvC;CACF,GAAG;EAAC;EAAc;EAA2B;CAAgB,CAAC;CAE9D,gBAAgB;EAId,MAAM,WAAW,KAFf,0BAA2B,OAAoC,iBAEvB,YAAY;GACpD,KAAK,MAAM,SAAS,SAAS;IAC3B,MAAM,EAAE,MAAM,KAAK,OAAO,WAAW,OAAO,eAAe,CAAC;IAC5D,iBAAiB,UAAU,OAAO,4BAA4B;KAC5D,OAAO;MAAE;MAAQ;MAAM;MAAK;KAAM,CAAC;IACrC,CAAC;GACH;EACF,CAAC;EACD,IAAI,OAAO,SAAS,SAAS,QAAQ,OAAO,OAAO;EAEnD,aAAa;GACX,OAAO,qBAAqB,iBAAiB,OAAO;GACpD,SAAS,WAAW;GACpB,OAAO,OAAO;EAChB;CACF,GAAG,CAAC,QAAQ,sBAAsB,CAAC;CAEnC,OACE,oBAAC,OAAD;EACa;EACX,KAAK,UAA0B,CAAC,KAAK,MAAM,CAAC;EAC5C,OAAO;GAAE,GAAG;GAAyB,GAAG;EAAiB;EACzD,GAAI;EAEH,UAAA,SAAS;GACR,GAAG;GACH,KAAK,OAAO;GACZ;EACF,CAAC;CACE,CAAA;AAET,CACF"}

package/es/awesome/Spline/Spine.d.mts

@@ -1,7 +0,0 @@
-import { SplineProps } from "./type.mjs";
-import "@splinetool/runtime";
-//#region src/awesome/Spline/Spine.d.ts
-declare const Spline: import("react").NamedExoticComponent<SplineProps>;
-//#endregion
-export { Spline as default };
-//# sourceMappingURL=Spine.d.mts.map

package/es/awesome/Spline/Spine.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Spine.mjs","names":[],"sources":["../../../src/awesome/Spline/Spine.tsx"],"sourcesContent":["'use client';\n\nimport { type SplineEvent, type SplineEventName } from '@splinetool/runtime';\nimport { Application } from '@splinetool/runtime';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport ParentSize from './ParentSize';\nimport { type SplineProps } from './type';\n\nconst Spline = memo<SplineProps>(\n  ({\n    ref,\n    scene,\n    style,\n    onMouseDown,\n    onMouseUp,\n    onMouseHover,\n    onKeyDown,\n    onKeyUp,\n    onStart,\n    onLookAt,\n    onFollow,\n    onWheel,\n    onLoad,\n    renderOnDemand = true,\n    ...props\n  }) => {\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const [isLoading, setIsLoading] = useState(true);\n\n    const init = async (\n      speApp: Application,\n      events: {\n        cb?: (e: SplineEvent) => void;\n        name: SplineEventName;\n      }[],\n    ) => {\n      await speApp.load(scene);\n\n      for (const event of events) {\n        if (event.cb) {\n          speApp.addEventListener(event.name, event.cb);\n        }\n      }\n\n      setIsLoading(false);\n      onLoad?.(speApp);\n    };\n\n    // Initialize runtime when component is mounted\n    useEffect(() => {\n      setIsLoading(true);\n\n      let speApp: Application;\n      const events: {\n        cb?: (e: SplineEvent) => void;\n        name: SplineEventName;\n      }[] = [\n        {\n          cb: onMouseDown,\n          name: 'mouseDown',\n        },\n        {\n          cb: onMouseUp,\n          name: 'mouseUp',\n        },\n        {\n          cb: onMouseHover,\n          name: 'mouseHover',\n        },\n        {\n          cb: onKeyDown,\n          name: 'keyDown',\n        },\n        {\n          cb: onKeyUp,\n          name: 'keyUp',\n        },\n        {\n          cb: onStart,\n          name: 'start',\n        },\n        {\n          cb: onLookAt,\n          name: 'lookAt',\n        },\n        {\n          cb: onFollow,\n          name: 'follow',\n        },\n        {\n          cb: onWheel,\n          name: 'scroll',\n        },\n      ];\n\n      if (canvasRef.current) {\n        speApp = new Application(canvasRef.current, { renderOnDemand });\n        init(speApp, events);\n      }\n\n      return () => {\n        for (const event of events) {\n          if (event.cb) {\n            speApp.removeEventListener(event.name, event.cb);\n          }\n        }\n        speApp.dispose();\n      };\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [scene]);\n\n    return (\n      <ParentSize debounceTime={50} parentSizeStyles={style} ref={ref} {...props}>\n        {() => {\n          return (\n            <canvas\n              ref={canvasRef}\n              style={{\n                display: isLoading ? 'none' : 'block',\n              }}\n            />\n          );\n        }}\n      </ParentSize>\n    );\n  },\n);\n\nSpline.displayName = 'Spline';\n\nexport default Spline;\n\nexport { type SPEObject, type SplineEvent, type SplineEventName } from '@splinetool/runtime';\n"],"mappings":";;;;;;AASA,MAAM,SAAS,MACZ,EACC,KACA,OACA,OACA,aACA,WACA,cACA,WACA,SACA,SACA,UACA,UACA,SACA,QACA,iBAAiB,MACjB,GAAG,YACC;CACJ,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,CAAC,WAAW,gBAAgB,SAAS,IAAI;CAE/C,MAAM,OAAO,OACX,QACA,WAIG;EACH,MAAM,OAAO,KAAK,KAAK;EAEvB,KAAK,MAAM,SAAS,QAClB,IAAI,MAAM,IACR,OAAO,iBAAiB,MAAM,MAAM,MAAM,EAAE;EAIhD,aAAa,KAAK;EAClB,SAAS,MAAM;CACjB;CAGA,gBAAgB;EACd,aAAa,IAAI;EAEjB,IAAI;EACJ,MAAM,SAGA;GACJ;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;GACA;IACE,IAAI;IACJ,MAAM;GACR;EACF;EAEA,IAAI,UAAU,SAAS;GACrB,SAAS,IAAI,YAAY,UAAU,SAAS,EAAE,eAAe,CAAC;GAC9D,KAAK,QAAQ,MAAM;EACrB;EAEA,aAAa;GACX,KAAK,MAAM,SAAS,QAClB,IAAI,MAAM,IACR,OAAO,oBAAoB,MAAM,MAAM,MAAM,EAAE;GAGnD,OAAO,QAAQ;EACjB;CAEF,GAAG,CAAC,KAAK,CAAC;CAEV,OACE,oBAAC,YAAD;EAAY,cAAc;EAAI,kBAAkB;EAAY;EAAK,GAAI;EAC5D,gBAAA;GACL,OACE,oBAAC,UAAD;IACE,KAAK;IACL,OAAO,EACL,SAAS,YAAY,SAAS,QAChC;GACD,CAAA;EAEL;CACU,CAAA;AAEhB,CACF;AAEA,OAAO,cAAc"}

package/es/brand/LogoThree/Loading.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Loading.mjs","names":[],"sources":["../../../src/brand/LogoThree/Loading.tsx"],"sourcesContent":["import { Loader2 } from 'lucide-react';\nimport { type FC } from 'react';\n\nimport { Center } from '@/Flex';\nimport Icon from '@/Icon';\n\nconst Loading: FC<{ size?: number }> = ({ size = 32 }) => {\n  return (\n    <Center height={'100%'} justify={'center'} style={{ position: 'absolute' }} width={'100%'}>\n      <Icon spin icon={Loader2} size={size} />\n    </Center>\n  );\n};\n\nexport default Loading;\n"],"mappings":";;;;;AAMA,MAAM,WAAkC,EAAE,OAAO,SAAS;CACxD,OACE,oBAAC,QAAD;EAAQ,QAAQ;EAAQ,SAAS;EAAU,OAAO,EAAE,UAAU,WAAW;EAAG,OAAO;EACjF,UAAA,oBAAC,MAAD;GAAM,MAAA;GAAK,MAAM;GAAe;EAAO,CAAA;CACjC,CAAA;AAEZ"}