@lobehub/ui 6.0.5 → 6.1.0

package/README.md

@@ -141,6 +141,7 @@ Appearance and colors are plain attributes, read by `theme.css`:
 - `setLobeTheme({ appearance, primaryColor, neutralColor })` updates them at runtime; `<LobeThemeScript appearance="system" />` sets them before first paint. With `next-themes`, use `attribute="data-theme"`.
 - `<ThemeScope appearance="dark">` themes a subtree (e.g. a dark island in a light page).
 - Style with `createStaticStyles` / `cssVar` / `cx` from `@lobehub/ui`; `useTheme()` / `useThemeMode()` return the current tokens when JS needs concrete values.
+- Apps that compile StyleX themselves can import the same tokens from `@lobehub/ui/stylex/cssVar.stylex` and `@lobehub/ui/stylex/media.stylex`. Those entries are uncompiled `stylex.defineConsts` modules, so the app compiler has to transform them in the same build.
 
 ### I18n
 

package/es/Text/style.d.mts

@@ -14,13 +14,13 @@ export declare const textStyles: {
   text: string;
   disabled: string;
   danger: string;
+  success: string;
+  warning: string;
+  info: string;
   delete: string;
   ellipsis: string;
   italic: string;
   underline: string;
-  success: string;
-  warning: string;
-  info: string;
   ellipsisMulti: string;
   secondary: 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"}