@videojs/react 10.0.0-alpha.7 → 10.0.0-beta.1

package/dist/dev/ui/hooks/use-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"sourcesContent":["'use client';\n\nimport type { SliderInput, SliderState } from '@videojs/core';\nimport {\n  createSlider,\n  type SliderApi,\n  type SliderOptions,\n  type SliderRootProps,\n  type SliderThumbProps,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isRTL } from '@videojs/utils/dom';\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { useForceRender } from '../../utils/use-force-render';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseSliderOptions<State extends SliderState = SliderState>\n  extends Pick<\n    SliderOptions,\n    | 'getPercent'\n    | 'getStepPercent'\n    | 'getLargeStepPercent'\n    | 'commitThrottle'\n    | 'onValueChange'\n    | 'onValueCommit'\n    | 'onDragStart'\n    | 'onDragEnd'\n  > {\n  computeState: (input: SliderInput) => State;\n  orientation?: 'horizontal' | 'vertical' | undefined;\n  disabled?: boolean | undefined;\n  /** Adjust a raw 0–100 percent for thumb alignment. Called for fill and pointer percents. */\n  adjustPercent?: ((rawPercent: number, thumbSize: number, trackSize: number) => number) | undefined;\n  /** Compute CSS variable map from the (possibly alignment-adjusted) state. */\n  getCSSVars: (state: State) => Record<string, string>;\n}\n\nexport interface UseSliderReturnValue<State extends SliderState = SliderState> {\n  state: State;\n  cssVars: Record<string, string>;\n  rootRef: React.RefCallback<HTMLElement>;\n  thumbRef: React.RefCallback<HTMLElement>;\n  rootProps: SliderRootProps;\n  thumbProps: SliderThumbProps;\n}\n\n/**\n * Manages slider input lifecycle for React.\n *\n * Wraps `createSlider()` from `@videojs/core/dom` and subscribes to its\n * input state via `useSnapshot`. Returns split props for the root\n * (pointer events) and thumb (keyboard/focus) elements.\n */\nexport function useSlider<State extends SliderState = SliderState>(\n  options: UseSliderOptions<State>\n): UseSliderReturnValue<State> {\n  const optionsRef = useLatestRef(options);\n\n  const rootElementRef = useRef<HTMLElement | null>(null);\n  const thumbElementRef = useRef<HTMLElement | null>(null);\n  const forceRender = useForceRender();\n\n  // Lazy-init the slider handle. Stable across re-renders.\n  const [slider] = useState<SliderApi>(() => {\n    const stableOptions: SliderOptions = {\n      getElement: () => rootElementRef.current!,\n      getThumbElement: () => thumbElementRef.current,\n      getOrientation: () => optionsRef.current.orientation ?? 'horizontal',\n      isRTL: () => (rootElementRef.current ? isRTL(rootElementRef.current) : false),\n      isDisabled: () => optionsRef.current.disabled ?? false,\n      getPercent: () => optionsRef.current.getPercent(),\n      getStepPercent: () => optionsRef.current.getStepPercent(),\n      getLargeStepPercent: () => optionsRef.current.getLargeStepPercent(),\n      commitThrottle: optionsRef.current.commitThrottle,\n      onValueChange: (percent) => optionsRef.current.onValueChange?.(percent),\n      onValueCommit: (percent) => optionsRef.current.onValueCommit?.(percent),\n      onDragStart: () => optionsRef.current.onDragStart?.(),\n      onDragEnd: () => optionsRef.current.onDragEnd?.(),\n    };\n\n    return createSlider(stableOptions);\n  });\n\n  // Cleanup on unmount.\n  useEffect(() => () => slider.destroy(), [slider]);\n\n  // Subscribe to slider input state.\n  const input = useSnapshot(slider.input);\n\n  // Compute derived state from input + caller-provided projection.\n  const state = options.computeState(input);\n\n  // Force a synchronous re-render after mount so edge thumb alignment\n  // can read DOM measurements from the now-populated element refs.\n  useLayoutEffect(() => {\n    if (state.thumbAlignment === 'edge' && rootElementRef.current && thumbElementRef.current) {\n      forceRender();\n    }\n  }, [state.thumbAlignment]);\n\n  // Adjust CSS var percents for edge thumb alignment when DOM elements are available.\n  const rootEl = rootElementRef.current;\n  const thumbEl = thumbElementRef.current;\n  let cssState = state;\n\n  if (state.thumbAlignment === 'edge' && rootEl && thumbEl && options.adjustPercent) {\n    const isHorizontal = state.orientation === 'horizontal';\n    const thumbSize = isHorizontal ? thumbEl.offsetWidth : thumbEl.offsetHeight;\n    const trackSize = isHorizontal ? rootEl.offsetWidth : rootEl.offsetHeight;\n    cssState = {\n      ...state,\n      fillPercent: options.adjustPercent(state.fillPercent, thumbSize, trackSize),\n      pointerPercent: options.adjustPercent(state.pointerPercent, thumbSize, trackSize),\n    };\n  }\n\n  const cssVars = options.getCSSVars(cssState);\n\n  // Ref callbacks for root and thumb elements.\n  const rootRef = useCallback((element: HTMLElement | null) => {\n    rootElementRef.current = element;\n  }, []);\n\n  const thumbRef = useCallback((element: HTMLElement | null) => {\n    thumbElementRef.current = element;\n  }, []);\n\n  return {\n    state,\n    cssVars,\n    rootRef,\n    thumbRef,\n    rootProps: slider.rootProps,\n    thumbProps: slider.thumbProps,\n  };\n}\n\nexport namespace useSlider {\n  export type Options = UseSliderOptions;\n  export type ReturnValue = UseSliderReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAqDA,SAAgB,UACd,SAC6B;CAC7B,MAAM,aAAa,aAAa,QAAQ;CAExC,MAAM,iBAAiB,OAA2B,KAAK;CACvD,MAAM,kBAAkB,OAA2B,KAAK;CACxD,MAAM,cAAc,gBAAgB;CAGpC,MAAM,CAAC,UAAU,eAA0B;AAiBzC,SAAO,aAhB8B;GACnC,kBAAkB,eAAe;GACjC,uBAAuB,gBAAgB;GACvC,sBAAsB,WAAW,QAAQ,eAAe;GACxD,aAAc,eAAe,UAAU,MAAM,eAAe,QAAQ,GAAG;GACvE,kBAAkB,WAAW,QAAQ,YAAY;GACjD,kBAAkB,WAAW,QAAQ,YAAY;GACjD,sBAAsB,WAAW,QAAQ,gBAAgB;GACzD,2BAA2B,WAAW,QAAQ,qBAAqB;GACnE,gBAAgB,WAAW,QAAQ;GACnC,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,QAAQ;GACvE,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,QAAQ;GACvE,mBAAmB,WAAW,QAAQ,eAAe;GACrD,iBAAiB,WAAW,QAAQ,aAAa;GAClD,CAEiC;GAClC;AAGF,uBAAsB,OAAO,SAAS,EAAE,CAAC,OAAO,CAAC;CAGjD,MAAM,QAAQ,YAAY,OAAO,MAAM;CAGvC,MAAM,QAAQ,QAAQ,aAAa,MAAM;AAIzC,uBAAsB;AACpB,MAAI,MAAM,mBAAmB,UAAU,eAAe,WAAW,gBAAgB,QAC/E,cAAa;IAEd,CAAC,MAAM,eAAe,CAAC;CAG1B,MAAM,SAAS,eAAe;CAC9B,MAAM,UAAU,gBAAgB;CAChC,IAAI,WAAW;AAEf,KAAI,MAAM,mBAAmB,UAAU,UAAU,WAAW,QAAQ,eAAe;EACjF,MAAM,eAAe,MAAM,gBAAgB;EAC3C,MAAM,YAAY,eAAe,QAAQ,cAAc,QAAQ;EAC/D,MAAM,YAAY,eAAe,OAAO,cAAc,OAAO;AAC7D,aAAW;GACT,GAAG;GACH,aAAa,QAAQ,cAAc,MAAM,aAAa,WAAW,UAAU;GAC3E,gBAAgB,QAAQ,cAAc,MAAM,gBAAgB,WAAW,UAAU;GAClF;;AAcH,QAAO;EACL;EACA,SAbc,QAAQ,WAAW,SAAS;EAc1C,SAXc,aAAa,YAAgC;AAC3D,kBAAe,UAAU;KACxB,EAAE,CAAC;EAUJ,UARe,aAAa,YAAgC;AAC5D,mBAAgB,UAAU;KACzB,EAAE,CAAC;EAOJ,WAAW,OAAO;EAClB,YAAY,OAAO;EACpB"}
+{"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"sourcesContent":["'use client';\n\nimport type { SliderInput, SliderState } from '@videojs/core';\nimport {\n  createSlider,\n  type SliderApi,\n  type SliderOptions,\n  type SliderRootProps,\n  type SliderRootStyle,\n  type SliderThumbProps,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isRTL } from '@videojs/utils/dom';\nimport { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useForceRender } from '../../utils/use-force-render';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseSliderOptions<State extends SliderState = SliderState>\n  extends Pick<\n    SliderOptions,\n    | 'getPercent'\n    | 'getStepPercent'\n    | 'getLargeStepPercent'\n    | 'commitThrottle'\n    | 'onValueChange'\n    | 'onValueCommit'\n    | 'onDragStart'\n    | 'onDragEnd'\n  > {\n  computeState: (input: SliderInput) => State;\n  orientation?: 'horizontal' | 'vertical' | undefined;\n  disabled?: boolean | undefined;\n  /** Adjust a raw 0–100 percent for thumb alignment. Called for fill and pointer percents. */\n  adjustPercent?: ((rawPercent: number, thumbSize: number, trackSize: number) => number) | undefined;\n  /** Compute CSS variable map from the (possibly alignment-adjusted) state. */\n  getCSSVars: (state: State) => Record<string, string>;\n}\n\nexport interface UseSliderReturnValue<State extends SliderState = SliderState> {\n  state: State;\n  cssVars: Record<string, string>;\n  rootRef: React.RefCallback<HTMLElement>;\n  thumbRef: React.RefCallback<HTMLElement>;\n  rootProps: SliderRootProps;\n  rootStyle: SliderRootStyle;\n  thumbProps: SliderThumbProps;\n}\n\n/**\n * Manages slider input lifecycle for React.\n *\n * Wraps `createSlider()` from `@videojs/core/dom` and subscribes to its\n * input state via `useSnapshot`. Returns split props for the root\n * (pointer events) and thumb (keyboard/focus) elements.\n */\nexport function useSlider<State extends SliderState = SliderState>(\n  options: UseSliderOptions<State>\n): UseSliderReturnValue<State> {\n  const optionsRef = useLatestRef(options);\n\n  const rootElementRef = useRef<HTMLElement | null>(null);\n  const thumbElementRef = useRef<HTMLElement | null>(null);\n  const forceRender = useForceRender();\n\n  // Lazy-init the slider handle. Stable across re-renders.\n  const [slider] = useState<SliderApi>(() => {\n    const stableOptions: SliderOptions = {\n      getElement: () => rootElementRef.current!,\n      getThumbElement: () => thumbElementRef.current,\n      getOrientation: () => optionsRef.current.orientation ?? 'horizontal',\n      isRTL: () => (rootElementRef.current ? isRTL(rootElementRef.current) : false),\n      isDisabled: () => optionsRef.current.disabled ?? false,\n      getPercent: () => optionsRef.current.getPercent(),\n      getStepPercent: () => optionsRef.current.getStepPercent(),\n      getLargeStepPercent: () => optionsRef.current.getLargeStepPercent(),\n      commitThrottle: optionsRef.current.commitThrottle,\n      adjustPercent: optionsRef.current.adjustPercent,\n      onValueChange: (percent) => optionsRef.current.onValueChange?.(percent),\n      onValueCommit: (percent) => optionsRef.current.onValueCommit?.(percent),\n      onDragStart: () => optionsRef.current.onDragStart?.(),\n      onDragEnd: () => optionsRef.current.onDragEnd?.(),\n    };\n\n    return createSlider(stableOptions);\n  });\n\n  useDestroy(slider);\n\n  // Subscribe to slider input state.\n  const input = useSnapshot(slider.input);\n\n  // Compute derived state from input + caller-provided projection.\n  const state = options.computeState(input);\n\n  // Force a synchronous re-render after mount so edge thumb alignment\n  // can read DOM measurements from the now-populated element refs.\n  useLayoutEffect(() => {\n    if (state.thumbAlignment === 'edge' && rootElementRef.current && thumbElementRef.current) {\n      forceRender();\n    }\n  }, [state.thumbAlignment]);\n\n  // Adjust CSS var percents for edge thumb alignment using live DOM measurements.\n  const cssVars = options.getCSSVars(slider.adjustForAlignment(state));\n\n  // Ref callbacks for root and thumb elements.\n  const rootRef = useCallback((element: HTMLElement | null) => {\n    rootElementRef.current = element;\n  }, []);\n\n  const thumbRef = useCallback((element: HTMLElement | null) => {\n    thumbElementRef.current = element;\n  }, []);\n\n  return {\n    state,\n    cssVars,\n    rootRef,\n    thumbRef,\n    rootProps: slider.rootProps,\n    rootStyle: slider.rootStyle,\n    thumbProps: slider.thumbProps,\n  };\n}\n\nexport namespace useSlider {\n  export type Options = UseSliderOptions;\n  export type ReturnValue = UseSliderReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAwDA,SAAgB,UACd,SAC6B;CAC7B,MAAM,aAAa,aAAa,QAAQ;CAExC,MAAM,iBAAiB,OAA2B,KAAK;CACvD,MAAM,kBAAkB,OAA2B,KAAK;CACxD,MAAM,cAAc,gBAAgB;CAGpC,MAAM,CAAC,UAAU,eAA0B;AAkBzC,SAAO,aAjB8B;GACnC,kBAAkB,eAAe;GACjC,uBAAuB,gBAAgB;GACvC,sBAAsB,WAAW,QAAQ,eAAe;GACxD,aAAc,eAAe,UAAU,MAAM,eAAe,QAAQ,GAAG;GACvE,kBAAkB,WAAW,QAAQ,YAAY;GACjD,kBAAkB,WAAW,QAAQ,YAAY;GACjD,sBAAsB,WAAW,QAAQ,gBAAgB;GACzD,2BAA2B,WAAW,QAAQ,qBAAqB;GACnE,gBAAgB,WAAW,QAAQ;GACnC,eAAe,WAAW,QAAQ;GAClC,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,QAAQ;GACvE,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,QAAQ;GACvE,mBAAmB,WAAW,QAAQ,eAAe;GACrD,iBAAiB,WAAW,QAAQ,aAAa;GAClD,CAEiC;GAClC;AAEF,YAAW,OAAO;CAGlB,MAAM,QAAQ,YAAY,OAAO,MAAM;CAGvC,MAAM,QAAQ,QAAQ,aAAa,MAAM;AAIzC,uBAAsB;AACpB,MAAI,MAAM,mBAAmB,UAAU,eAAe,WAAW,gBAAgB,QAC/E,cAAa;IAEd,CAAC,MAAM,eAAe,CAAC;AAc1B,QAAO;EACL;EACA,SAbc,QAAQ,WAAW,OAAO,mBAAmB,MAAM,CAAC;EAclE,SAXc,aAAa,YAAgC;AAC3D,kBAAe,UAAU;KACxB,EAAE,CAAC;EAUJ,UARe,aAAa,YAAgC;AAC5D,mBAAgB,UAAU;KACzB,EAAE,CAAC;EAOJ,WAAW,OAAO;EAClB,WAAW,OAAO;EAClB,YAAY,OAAO;EACpB"}

package/dist/dev/ui/popover/context.d.ts

@@ -1,5 +1,4 @@
 import { PopoverApi } from "@videojs/core/dom";
-import "react";
 import { PopoverCore, StateAttrMap as StateAttrMap$1 } from "@videojs/core";
 
 //#region src/ui/popover/context.d.ts

package/dist/dev/ui/popover/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/popover/context.tsx"],"mappings":";;;;;UAMiB,mBAAA;EACf,IAAA,EAAM,WAAA;EACN,OAAA,EAAS,UAAA;EACT,KAAA,EAAO,WAAA,CAAY,KAAA;EACnB,YAAA,EAAc,cAAA,CAAa,WAAA,CAAY,KAAA;EACvC,UAAA;EACA,OAAA;AAAA;AAAA,iBAOc,iBAAA,CAAA,GAAqB,mBAAA"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/popover/context.tsx"],"mappings":";;;;UAMiB,mBAAA;EACf,IAAA,EAAM,WAAA;EACN,OAAA,EAAS,UAAA;EACT,KAAA,EAAO,WAAA,CAAY,KAAA;EACnB,YAAA,EAAc,cAAA,CAAa,WAAA,CAAY,KAAA;EACvC,UAAA;EACA,OAAA;AAAA;AAAA,iBAOc,iBAAA,CAAA,GAAqB,mBAAA"}

package/dist/dev/ui/popover/popover-arrow.js

@@ -1,7 +1,7 @@
 'use client';
 
-import { usePopoverContext } from "./context.js";
 import { createContextPart } from "../create-context-part.js";
+import { usePopoverContext } from "./context.js";
 
 //#region src/ui/popover/popover-arrow.tsx
 /** Decorative arrow pointing from the popup toward the trigger. Hidden from assistive technology. */

package/dist/dev/ui/popover/popover-popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover-popup.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"mappings":";;;;;UAaiB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA;;cAKtD,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAyGR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}
+{"version":3,"file":"popover-popup.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"mappings":";;;;;UAaiB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA;;cAKtD,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBA6GR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}

package/dist/dev/ui/popover/popover-popup.js

@@ -19,14 +19,16 @@ const PopoverPopup = forwardRef(function PopoverPopup({ render, className, style
 	const internalRef = useRef(null);
 	const composedRef = useComposedRefs(forwardedRef, useCallback((el) => {
 		popover.setPopupElement(el);
-	}, [popover]), internalRef);
+		if (el && supportsAnchorPositioning()) el.style.setProperty("position-anchor", `--${anchorName}`);
+	}, [popover, anchorName]), internalRef);
 	const posOpts = useMemo(() => ({
 		side: state.side,
 		align: state.align
 	}), [state.side, state.align]);
 	const anchorStyle = useMemo(() => {
 		if (!supportsAnchorPositioning()) return null;
-		return getAnchorPositionStyle(anchorName, posOpts);
+		const { positionAnchor: _, ...rest } = getAnchorPositionStyle(anchorName, posOpts);
+		return rest;
 	}, [anchorName, posOpts]);
 	const [manualStyle, setManualStyle] = useState(null);
 	useLayoutEffect(() => {

package/dist/dev/ui/popover/popover-popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-popup.js","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport { getAnchorPositionStyle, resolveOffsets } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}\n\nconst POPOVER_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();\n  const internalRef = useRef<HTMLDivElement>(null);\n\n  const popupRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      popover.setPopupElement(el);\n    },\n    [popover]\n  );\n\n  const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n  // --- Positioning ---\n\n  const posOpts = useMemo(() => ({ side: state.side, align: state.align }), [state.side, state.align]);\n\n  // CSS Anchor Positioning — computed from state, no measurement needed.\n  // getAnchorPositionStyle returns camelCase keys, directly compatible\n  // with React's style prop.\n  const anchorStyle = useMemo(() => {\n    if (!supportsAnchorPositioning()) return null;\n    return getAnchorPositionStyle(anchorName, posOpts) as CSSProperties;\n  }, [anchorName, posOpts]);\n\n  // Manual fallback — measure rects after layout, before paint.\n  const [manualStyle, setManualStyle] = useState<CSSProperties | null>(null);\n\n  useLayoutEffect(() => {\n    if (supportsAnchorPositioning()) return;\n    if (!state.open) {\n      setManualStyle(null);\n      return;\n    }\n\n    function measure(): void {\n      const triggerEl = popover.triggerElement;\n      const popupEl = internalRef.current;\n      if (!triggerEl || !popupEl) return;\n\n      const triggerRect = triggerEl.getBoundingClientRect();\n      const popupRect = popupEl.getBoundingClientRect();\n      const boundaryRect = document.documentElement.getBoundingClientRect();\n      const offsets = resolveOffsets(popupEl);\n\n      setManualStyle(\n        getAnchorPositionStyle(anchorName, posOpts, triggerRect, popupRect, boundaryRect, offsets) as CSSProperties\n      );\n    }\n\n    measure();\n\n    // Recompute on scroll/resize so the popover tracks its trigger.\n    let rafId = 0;\n    function reposition(): void {\n      cancelAnimationFrame(rafId);\n      rafId = requestAnimationFrame(measure);\n    }\n\n    window.addEventListener('scroll', reposition, { capture: true, passive: true });\n    window.addEventListener('resize', reposition);\n\n    return () => {\n      cancelAnimationFrame(rafId);\n      window.removeEventListener('scroll', reposition, true);\n      window.removeEventListener('resize', reposition);\n    };\n  }, [state.open, anchorName, posOpts, popover]);\n\n  // Anchor path uses computed styles; manual path uses measured styles;\n  // fallback resets UA [popover] defaults until positioning is computed.\n  const positioningStyle = anchorStyle ?? manualStyle ?? POPOVER_RESET;\n\n  // --- Visibility ---\n\n  if (!state.open) {\n    return null;\n  }\n\n  // Remap DOM focus events to React synthetic event names.\n  const { onFocusOut, ...restPopupProps } = popover.popupProps;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: composedRef,\n      props: [\n        {\n          id: popupId,\n          style: positioningStyle,\n          ...core.getPopupAttrs(state),\n        },\n        { ...restPopupProps, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace PopoverPopup {\n  export type Props = PopoverPopupProps;\n  export type State = PopoverState;\n}\n"],"mappings":";;;;;;;;;;AAeA,MAAM,gBAA+B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGpF,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CACvF,MAAM,cAAc,OAAuB,KAAK;CAShD,MAAM,cAAc,gBAAgB,cAPnB,aACd,OAA8B;AAC7B,UAAQ,gBAAgB,GAAG;IAE7B,CAAC,QAAQ,CACV,EAE2D,YAAY;CAIxE,MAAM,UAAU,eAAe;EAAE,MAAM,MAAM;EAAM,OAAO,MAAM;EAAO,GAAG,CAAC,MAAM,MAAM,MAAM,MAAM,CAAC;CAKpG,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,2BAA2B,CAAE,QAAO;AACzC,SAAO,uBAAuB,YAAY,QAAQ;IACjD,CAAC,YAAY,QAAQ,CAAC;CAGzB,MAAM,CAAC,aAAa,kBAAkB,SAA+B,KAAK;AAE1E,uBAAsB;AACpB,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,MAAM,MAAM;AACf,kBAAe,KAAK;AACpB;;EAGF,SAAS,UAAgB;GACvB,MAAM,YAAY,QAAQ;GAC1B,MAAM,UAAU,YAAY;AAC5B,OAAI,CAAC,aAAa,CAAC,QAAS;AAO5B,kBACE,uBAAuB,YAAY,SANjB,UAAU,uBAAuB,EACnC,QAAQ,uBAAuB,EAC5B,SAAS,gBAAgB,uBAAuB,EACrD,eAAe,QAAQ,CAGqD,CAC3F;;AAGH,WAAS;EAGT,IAAI,QAAQ;EACZ,SAAS,aAAmB;AAC1B,wBAAqB,MAAM;AAC3B,WAAQ,sBAAsB,QAAQ;;AAGxC,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,MAAM;AAC3B,UAAO,oBAAoB,UAAU,YAAY,KAAK;AACtD,UAAO,oBAAoB,UAAU,WAAW;;IAEjD;EAAC,MAAM;EAAM;EAAY;EAAS;EAAQ,CAAC;CAI9C,MAAM,mBAAmB,eAAe,eAAe;AAIvD,KAAI,CAAC,MAAM,KACT,QAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;AAElD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,MAAM;IAC7B;GACD;IAAE,GAAG;IAAgB,QAAQ;IAAY;GACzC;GACD;EACF,CACF;EACD"}
+{"version":3,"file":"popover-popup.js","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport { getAnchorPositionStyle, resolveOffsets } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}\n\nconst POPOVER_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();\n  const internalRef = useRef<HTMLDivElement>(null);\n\n  const popupRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      popover.setPopupElement(el);\n      if (el && supportsAnchorPositioning()) {\n        el.style.setProperty('position-anchor', `--${anchorName}`);\n      }\n    },\n    [popover, anchorName]\n  );\n\n  const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n  // --- Positioning ---\n\n  const posOpts = useMemo(() => ({ side: state.side, align: state.align }), [state.side, state.align]);\n\n  // CSS Anchor Positioning — computed from state, no measurement needed.\n  // `position-anchor` is set imperatively in the ref callback above\n  // because React's style prop silently drops unrecognised CSS properties.\n  const anchorStyle = useMemo(() => {\n    if (!supportsAnchorPositioning()) return null;\n    const { positionAnchor: _, ...rest } = getAnchorPositionStyle(anchorName, posOpts);\n    return rest as CSSProperties;\n  }, [anchorName, posOpts]);\n\n  // Manual fallback — measure rects after layout, before paint.\n  const [manualStyle, setManualStyle] = useState<CSSProperties | null>(null);\n\n  useLayoutEffect(() => {\n    if (supportsAnchorPositioning()) return;\n    if (!state.open) {\n      setManualStyle(null);\n      return;\n    }\n\n    function measure(): void {\n      const triggerEl = popover.triggerElement;\n      const popupEl = internalRef.current;\n      if (!triggerEl || !popupEl) return;\n\n      const triggerRect = triggerEl.getBoundingClientRect();\n      const popupRect = popupEl.getBoundingClientRect();\n      const boundaryRect = document.documentElement.getBoundingClientRect();\n      const offsets = resolveOffsets(popupEl);\n\n      setManualStyle(\n        getAnchorPositionStyle(anchorName, posOpts, triggerRect, popupRect, boundaryRect, offsets) as CSSProperties\n      );\n    }\n\n    measure();\n\n    // Recompute on scroll/resize so the popover tracks its trigger.\n    let rafId = 0;\n    function reposition(): void {\n      cancelAnimationFrame(rafId);\n      rafId = requestAnimationFrame(measure);\n    }\n\n    window.addEventListener('scroll', reposition, { capture: true, passive: true });\n    window.addEventListener('resize', reposition);\n\n    return () => {\n      cancelAnimationFrame(rafId);\n      window.removeEventListener('scroll', reposition, true);\n      window.removeEventListener('resize', reposition);\n    };\n  }, [state.open, anchorName, posOpts, popover]);\n\n  // Anchor path uses computed styles; manual path uses measured styles;\n  // fallback resets UA [popover] defaults until positioning is computed.\n  const positioningStyle = anchorStyle ?? manualStyle ?? POPOVER_RESET;\n\n  // --- Visibility ---\n\n  if (!state.open) {\n    return null;\n  }\n\n  // Remap DOM focus events to React synthetic event names.\n  const { onFocusOut, ...restPopupProps } = popover.popupProps;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: composedRef,\n      props: [\n        {\n          id: popupId,\n          style: positioningStyle,\n          ...core.getPopupAttrs(state),\n        },\n        { ...restPopupProps, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace PopoverPopup {\n  export type Props = PopoverPopupProps;\n  export type State = PopoverState;\n}\n"],"mappings":";;;;;;;;;;AAeA,MAAM,gBAA+B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGpF,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CACvF,MAAM,cAAc,OAAuB,KAAK;CAYhD,MAAM,cAAc,gBAAgB,cAVnB,aACd,OAA8B;AAC7B,UAAQ,gBAAgB,GAAG;AAC3B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,mBAAmB,KAAK,aAAa;IAG9D,CAAC,SAAS,WAAW,CACtB,EAE2D,YAAY;CAIxE,MAAM,UAAU,eAAe;EAAE,MAAM,MAAM;EAAM,OAAO,MAAM;EAAO,GAAG,CAAC,MAAM,MAAM,MAAM,MAAM,CAAC;CAKpG,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,2BAA2B,CAAE,QAAO;EACzC,MAAM,EAAE,gBAAgB,GAAG,GAAG,SAAS,uBAAuB,YAAY,QAAQ;AAClF,SAAO;IACN,CAAC,YAAY,QAAQ,CAAC;CAGzB,MAAM,CAAC,aAAa,kBAAkB,SAA+B,KAAK;AAE1E,uBAAsB;AACpB,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,MAAM,MAAM;AACf,kBAAe,KAAK;AACpB;;EAGF,SAAS,UAAgB;GACvB,MAAM,YAAY,QAAQ;GAC1B,MAAM,UAAU,YAAY;AAC5B,OAAI,CAAC,aAAa,CAAC,QAAS;AAO5B,kBACE,uBAAuB,YAAY,SANjB,UAAU,uBAAuB,EACnC,QAAQ,uBAAuB,EAC5B,SAAS,gBAAgB,uBAAuB,EACrD,eAAe,QAAQ,CAGqD,CAC3F;;AAGH,WAAS;EAGT,IAAI,QAAQ;EACZ,SAAS,aAAmB;AAC1B,wBAAqB,MAAM;AAC3B,WAAQ,sBAAsB,QAAQ;;AAGxC,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,MAAM;AAC3B,UAAO,oBAAoB,UAAU,YAAY,KAAK;AACtD,UAAO,oBAAoB,UAAU,WAAW;;IAEjD;EAAC,MAAM;EAAM;EAAY;EAAS;EAAQ,CAAC;CAI9C,MAAM,mBAAmB,eAAe,eAAe;AAIvD,KAAI,CAAC,MAAM,KACT,QAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;AAElD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,MAAM;IAC7B;GACD;IAAE,GAAG;IAAgB,QAAQ;IAAY;GACzC;GACD;EACF,CACF;EACD"}

package/dist/dev/ui/popover/popover-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover-root.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-root.tsx"],"mappings":";;;;;UAYiB,gBAAA,SAAyB,YAAA;;EAExC,YAAA,IAAgB,IAAA,WAAe,OAAA,EAAS,oBAAA;EAFR;EAIhC,oBAAA,IAAwB,IAAA;EACxB,QAAA,GAAW,SAAA;AAAA;AAAA,iBAGG,WAAA,CAAA;EACd,IAAA,EAAM,cAAA;EACN,WAAA;EACA,YAAA,EAAc,gBAAA;EACd,oBAAA,EAAsB,wBAAA;EACtB,WAAA;EACA,KAAA;EACA,UAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,gBAAA,GAAmB,SAAA;AAAA,kBAuEL,WAAA;EAAA,KACH,KAAA,GAAQ,gBAAA;AAAA"}
+{"version":3,"file":"popover-root.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-root.tsx"],"mappings":";;;;;UAaiB,gBAAA,SAAyB,YAAA;;EAExC,YAAA,IAAgB,IAAA,WAAe,OAAA,EAAS,oBAAA;EAFR;EAIhC,oBAAA,IAAwB,IAAA;EACxB,QAAA,GAAW,SAAA;AAAA;AAAA,iBAGG,WAAA,CAAA;EACd,IAAA,EAAM,cAAA;EACN,WAAA;EACA,YAAA,EAAc,gBAAA;EACd,oBAAA,EAAsB,wBAAA;EACtB,WAAA;EACA,KAAA;EACA,UAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,gBAAA,GAAmB,SAAA;AAAA,kBAsEL,WAAA;EAAA,KACH,KAAA,GAAQ,gBAAA;AAAA"}

package/dist/dev/ui/popover/popover-root.js

@@ -1,8 +1,9 @@
 'use client';
 
+import { useDestroy } from "../../utils/use-destroy.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
-import { PopoverContextProvider } from "./context.js";
 import { useSafeId } from "../../utils/use-safe-id.js";
+import { PopoverContextProvider } from "./context.js";
 import { createPopover, createTransition } from "@videojs/core/dom";
 import { useSnapshot } from "@videojs/store/react";
 import { useEffect, useState } from "react";
@@ -48,7 +49,7 @@ function PopoverRoot({ open: controlledOpen, defaultOpen = PopoverCore.defaultPr
 		if (controlledOpen) popover.open("click");
 		else popover.close("click");
 	}, [controlledOpen, popover]);
-	useEffect(() => () => popover.destroy(), [popover]);
+	useDestroy(popover);
 	const input = useSnapshot(popover.input);
 	core.setInput(input);
 	return /* @__PURE__ */ jsx(PopoverContextProvider, {

package/dist/dev/ui/popover/popover-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-root.js","names":[],"sources":["../../../../src/ui/popover/popover-root.tsx"],"sourcesContent":["'use client';\n\nimport { type PopoverProps as CorePopoverProps, PopoverCore, PopoverDataAttrs } from '@videojs/core';\nimport { createPopover, createTransition, type PopoverChangeDetails } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { PopoverContextProvider } from './context';\n\nexport interface PopoverRootProps extends CorePopoverProps {\n  /** Called when the popover open state changes (fires immediately, before animations). */\n  onOpenChange?: (open: boolean, details: PopoverChangeDetails) => void;\n  /** Called after open/close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function PopoverRoot({\n  open: controlledOpen,\n  defaultOpen = PopoverCore.defaultProps.defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  openOnHover = PopoverCore.defaultProps.openOnHover,\n  delay = PopoverCore.defaultProps.delay,\n  closeDelay = PopoverCore.defaultProps.closeDelay,\n  children,\n  ...coreProps\n}: PopoverRootProps): ReactNode {\n  const [core] = useState(() => new PopoverCore(coreProps));\n  core.setProps(coreProps);\n\n  const isControlled = controlledOpen !== undefined;\n\n  // Keep refs that always point to the latest values so the\n  // createPopover closure never reads stale props.\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n  const closeOnEscapeRef = useLatestRef(coreProps.closeOnEscape);\n  const closeOnOutsideClickRef = useLatestRef(coreProps.closeOnOutsideClick);\n  const openOnHoverRef = useLatestRef(openOnHover);\n  const delayRef = useLatestRef(delay);\n  const closeDelayRef = useLatestRef(closeDelay);\n\n  const [popover] = useState(() => {\n    const instance = createPopover({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: PopoverChangeDetails) => {\n        onOpenChangeRef.current?.(nextOpen, details);\n      },\n      onOpenChangeComplete: (nextOpen: boolean) => {\n        onOpenChangeCompleteRef.current?.(nextOpen);\n      },\n      closeOnEscape: () => closeOnEscapeRef.current ?? PopoverCore.defaultProps.closeOnEscape,\n      closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? PopoverCore.defaultProps.closeOnOutsideClick,\n      openOnHover: () => openOnHoverRef.current,\n      delay: () => delayRef.current,\n      closeDelay: () => closeDelayRef.current,\n    });\n\n    // Apply defaultOpen on creation (uncontrolled only)\n    if (!isControlled && defaultOpen) {\n      instance.open('click');\n    }\n\n    return instance;\n  });\n\n  const anchorName = useSafeId();\n  const popupId = useSafeId('popup-');\n\n  // Sync controlled open prop -> internal input state.\n  useEffect(() => {\n    if (controlledOpen === undefined) return;\n\n    const { active: inputOpen } = popover.input.current;\n    if (controlledOpen === inputOpen) return;\n\n    if (controlledOpen) {\n      popover.open('click');\n    } else {\n      popover.close('click');\n    }\n  }, [controlledOpen, popover]);\n\n  // Cleanup on unmount\n  useEffect(() => () => popover.destroy(), [popover]);\n\n  const input = useSnapshot(popover.input);\n  core.setInput(input);\n  const state = core.getState();\n\n  return (\n    <PopoverContextProvider value={{ core, popover, state, stateAttrMap: PopoverDataAttrs, anchorName, popupId }}>\n      {children}\n    </PopoverContextProvider>\n  );\n}\n\nexport namespace PopoverRoot {\n  export type Props = PopoverRootProps;\n}\n"],"mappings":";;;;;;;;;;;;AAoBA,SAAgB,YAAY,EAC1B,MAAM,gBACN,cAAc,YAAY,aAAa,aACvC,cAAc,kBACd,sBAAsB,0BACtB,cAAc,YAAY,aAAa,aACvC,QAAQ,YAAY,aAAa,OACjC,aAAa,YAAY,aAAa,YACtC,UACA,GAAG,aAC2B;CAC9B,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,UAAU,CAAC;AACzD,MAAK,SAAS,UAAU;CAExB,MAAM,eAAe,mBAAmB;CAIxC,MAAM,kBAAkB,aAAa,iBAAiB;CACtD,MAAM,0BAA0B,aAAa,yBAAyB;CACtE,MAAM,mBAAmB,aAAa,UAAU,cAAc;CAC9D,MAAM,yBAAyB,aAAa,UAAU,oBAAoB;CAC1E,MAAM,iBAAiB,aAAa,YAAY;CAChD,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,gBAAgB,aAAa,WAAW;CAE9C,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,kBAAkB;GAC9B,eAAe,UAAmB,YAAkC;AAClE,oBAAgB,UAAU,UAAU,QAAQ;;GAE9C,uBAAuB,aAAsB;AAC3C,4BAAwB,UAAU,SAAS;;GAE7C,qBAAqB,iBAAiB,WAAW,YAAY,aAAa;GAC1E,2BAA2B,uBAAuB,WAAW,YAAY,aAAa;GACtF,mBAAmB,eAAe;GAClC,aAAa,SAAS;GACtB,kBAAkB,cAAc;GACjC,CAAC;AAGF,MAAI,CAAC,gBAAgB,YACnB,UAAS,KAAK,QAAQ;AAGxB,SAAO;GACP;CAEF,MAAM,aAAa,WAAW;CAC9B,MAAM,UAAU,UAAU,SAAS;AAGnC,iBAAgB;AACd,MAAI,mBAAmB,OAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;AAC5C,MAAI,mBAAmB,UAAW;AAElC,MAAI,eACF,SAAQ,KAAK,QAAQ;MAErB,SAAQ,MAAM,QAAQ;IAEvB,CAAC,gBAAgB,QAAQ,CAAC;AAG7B,uBAAsB,QAAQ,SAAS,EAAE,CAAC,QAAQ,CAAC;CAEnD,MAAM,QAAQ,YAAY,QAAQ,MAAM;AACxC,MAAK,SAAS,MAAM;AAGpB,QACE,oBAAC;EAAuB,OAAO;GAAE;GAAM;GAAS,OAHpC,KAAK,UAAU;GAG4B,cAAc;GAAkB;GAAY;GAAS;EACzG;GACsB"}
+{"version":3,"file":"popover-root.js","names":[],"sources":["../../../../src/ui/popover/popover-root.tsx"],"sourcesContent":["'use client';\n\nimport { type PopoverProps as CorePopoverProps, PopoverCore, PopoverDataAttrs } from '@videojs/core';\nimport { createPopover, createTransition, type PopoverChangeDetails } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { PopoverContextProvider } from './context';\n\nexport interface PopoverRootProps extends CorePopoverProps {\n  /** Called when the popover open state changes (fires immediately, before animations). */\n  onOpenChange?: (open: boolean, details: PopoverChangeDetails) => void;\n  /** Called after open/close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function PopoverRoot({\n  open: controlledOpen,\n  defaultOpen = PopoverCore.defaultProps.defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  openOnHover = PopoverCore.defaultProps.openOnHover,\n  delay = PopoverCore.defaultProps.delay,\n  closeDelay = PopoverCore.defaultProps.closeDelay,\n  children,\n  ...coreProps\n}: PopoverRootProps): ReactNode {\n  const [core] = useState(() => new PopoverCore(coreProps));\n  core.setProps(coreProps);\n\n  const isControlled = controlledOpen !== undefined;\n\n  // Keep refs that always point to the latest values so the\n  // createPopover closure never reads stale props.\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n  const closeOnEscapeRef = useLatestRef(coreProps.closeOnEscape);\n  const closeOnOutsideClickRef = useLatestRef(coreProps.closeOnOutsideClick);\n  const openOnHoverRef = useLatestRef(openOnHover);\n  const delayRef = useLatestRef(delay);\n  const closeDelayRef = useLatestRef(closeDelay);\n\n  const [popover] = useState(() => {\n    const instance = createPopover({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: PopoverChangeDetails) => {\n        onOpenChangeRef.current?.(nextOpen, details);\n      },\n      onOpenChangeComplete: (nextOpen: boolean) => {\n        onOpenChangeCompleteRef.current?.(nextOpen);\n      },\n      closeOnEscape: () => closeOnEscapeRef.current ?? PopoverCore.defaultProps.closeOnEscape,\n      closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? PopoverCore.defaultProps.closeOnOutsideClick,\n      openOnHover: () => openOnHoverRef.current,\n      delay: () => delayRef.current,\n      closeDelay: () => closeDelayRef.current,\n    });\n\n    // Apply defaultOpen on creation (uncontrolled only)\n    if (!isControlled && defaultOpen) {\n      instance.open('click');\n    }\n\n    return instance;\n  });\n\n  const anchorName = useSafeId();\n  const popupId = useSafeId('popup-');\n\n  // Sync controlled open prop -> internal input state.\n  useEffect(() => {\n    if (controlledOpen === undefined) return;\n\n    const { active: inputOpen } = popover.input.current;\n    if (controlledOpen === inputOpen) return;\n\n    if (controlledOpen) {\n      popover.open('click');\n    } else {\n      popover.close('click');\n    }\n  }, [controlledOpen, popover]);\n\n  useDestroy(popover);\n\n  const input = useSnapshot(popover.input);\n  core.setInput(input);\n  const state = core.getState();\n\n  return (\n    <PopoverContextProvider value={{ core, popover, state, stateAttrMap: PopoverDataAttrs, anchorName, popupId }}>\n      {children}\n    </PopoverContextProvider>\n  );\n}\n\nexport namespace PopoverRoot {\n  export type Props = PopoverRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;AAqBA,SAAgB,YAAY,EAC1B,MAAM,gBACN,cAAc,YAAY,aAAa,aACvC,cAAc,kBACd,sBAAsB,0BACtB,cAAc,YAAY,aAAa,aACvC,QAAQ,YAAY,aAAa,OACjC,aAAa,YAAY,aAAa,YACtC,UACA,GAAG,aAC2B;CAC9B,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,UAAU,CAAC;AACzD,MAAK,SAAS,UAAU;CAExB,MAAM,eAAe,mBAAmB;CAIxC,MAAM,kBAAkB,aAAa,iBAAiB;CACtD,MAAM,0BAA0B,aAAa,yBAAyB;CACtE,MAAM,mBAAmB,aAAa,UAAU,cAAc;CAC9D,MAAM,yBAAyB,aAAa,UAAU,oBAAoB;CAC1E,MAAM,iBAAiB,aAAa,YAAY;CAChD,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,gBAAgB,aAAa,WAAW;CAE9C,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,kBAAkB;GAC9B,eAAe,UAAmB,YAAkC;AAClE,oBAAgB,UAAU,UAAU,QAAQ;;GAE9C,uBAAuB,aAAsB;AAC3C,4BAAwB,UAAU,SAAS;;GAE7C,qBAAqB,iBAAiB,WAAW,YAAY,aAAa;GAC1E,2BAA2B,uBAAuB,WAAW,YAAY,aAAa;GACtF,mBAAmB,eAAe;GAClC,aAAa,SAAS;GACtB,kBAAkB,cAAc;GACjC,CAAC;AAGF,MAAI,CAAC,gBAAgB,YACnB,UAAS,KAAK,QAAQ;AAGxB,SAAO;GACP;CAEF,MAAM,aAAa,WAAW;CAC9B,MAAM,UAAU,UAAU,SAAS;AAGnC,iBAAgB;AACd,MAAI,mBAAmB,OAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;AAC5C,MAAI,mBAAmB,UAAW;AAElC,MAAI,eACF,SAAQ,KAAK,QAAQ;MAErB,SAAQ,MAAM,QAAQ;IAEvB,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,YAAW,QAAQ;CAEnB,MAAM,QAAQ,YAAY,QAAQ,MAAM;AACxC,MAAK,SAAS,MAAM;AAGpB,QACE,oBAAC;EAAuB,OAAO;GAAE;GAAM;GAAS,OAHpC,KAAK,UAAU;GAG4B,cAAc;GAAkB;GAAY;GAAS;EACzG;GACsB"}

package/dist/dev/ui/popover/popover-trigger.js

@@ -2,8 +2,8 @@
 
 import { renderElement } from "../../utils/use-render.js";
 import { usePopoverContext } from "./context.js";
-import { getAnchorNameStyle } from "@videojs/core/dom";
-import { forwardRef, useCallback, useMemo } from "react";
+import { forwardRef, useCallback } from "react";
+import { supportsAnchorPositioning } from "@videojs/utils/dom";
 
 //#region src/ui/popover/popover-trigger.tsx
 /** Button that toggles the popover visibility. Renders a `<button>` element. */
@@ -11,8 +11,8 @@ const PopoverTrigger = forwardRef(function PopoverTrigger({ render, className, s
 	const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();
 	const triggerRef = useCallback((el) => {
 		popover.setTriggerElement(el);
-	}, [popover]);
-	const anchorStyle = useMemo(() => getAnchorNameStyle(anchorName), [anchorName]);
+		if (el && supportsAnchorPositioning()) el.style.setProperty("anchor-name", `--${anchorName}`);
+	}, [popover, anchorName]);
 	const { onFocusIn, onFocusOut, ...restTriggerProps } = popover.triggerProps;
 	return renderElement("button", {
 		render,
@@ -25,7 +25,6 @@ const PopoverTrigger = forwardRef(function PopoverTrigger({ render, className, s
 		props: [
 			{
 				type: "button",
-				style: anchorStyle,
 				...core.getTriggerAttrs(state, popupId)
 			},
 			{

package/dist/dev/ui/popover/popover-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-trigger.js","names":[],"sources":["../../../../src/ui/popover/popover-trigger.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport { getAnchorNameStyle } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useMemo } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverTriggerProps extends UIComponentProps<'button', PopoverState> {}\n\n/** Button that toggles the popover visibility. Renders a `<button>` element. */\nexport const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>(function PopoverTrigger(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();\n\n  const triggerRef = useCallback(\n    (el: HTMLButtonElement | null) => {\n      popover.setTriggerElement(el);\n    },\n    [popover]\n  );\n\n  const anchorStyle = useMemo(() => getAnchorNameStyle(anchorName), [anchorName]);\n\n  // Remap DOM focus events to React synthetic event names.\n  // createPopover() uses onFocusIn/onFocusOut (matching DOM focusin/focusout),\n  // but React maps those to onFocus/onBlur.\n  const { onFocusIn, onFocusOut, ...restTriggerProps } = popover.triggerProps;\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef, triggerRef],\n      props: [\n        {\n          type: 'button' as const,\n          style: anchorStyle,\n          ...core.getTriggerAttrs(state, popupId),\n        },\n        { ...restTriggerProps, onFocus: onFocusIn, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace PopoverTrigger {\n  export type Props = PopoverTriggerProps;\n  export type State = PopoverState;\n}\n"],"mappings":";;;;;;;;;AAaA,MAAa,iBAAiB,WAAmD,SAAS,eACxF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CAEvF,MAAM,aAAa,aAChB,OAAiC;AAChC,UAAQ,kBAAkB,GAAG;IAE/B,CAAC,QAAQ,CACV;CAED,MAAM,cAAc,cAAc,mBAAmB,WAAW,EAAE,CAAC,WAAW,CAAC;CAK/E,MAAM,EAAE,WAAW,YAAY,GAAG,qBAAqB,QAAQ;AAE/D,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK,CAAC,cAAc,WAAW;EAC/B,OAAO;GACL;IACE,MAAM;IACN,OAAO;IACP,GAAG,KAAK,gBAAgB,OAAO,QAAQ;IACxC;GACD;IAAE,GAAG;IAAkB,SAAS;IAAW,QAAQ;IAAY;GAC/D;GACD;EACF,CACF;EACD"}
+{"version":3,"file":"popover-trigger.js","names":[],"sources":["../../../../src/ui/popover/popover-trigger.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverTriggerProps extends UIComponentProps<'button', PopoverState> {}\n\n/** Button that toggles the popover visibility. Renders a `<button>` element. */\nexport const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>(function PopoverTrigger(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();\n\n  const triggerRef = useCallback(\n    (el: HTMLButtonElement | null) => {\n      popover.setTriggerElement(el);\n      if (el && supportsAnchorPositioning()) {\n        el.style.setProperty('anchor-name', `--${anchorName}`);\n      }\n    },\n    [popover, anchorName]\n  );\n\n  // Remap DOM focus events to React synthetic event names.\n  // createPopover() uses onFocusIn/onFocusOut (matching DOM focusin/focusout),\n  // but React maps those to onFocus/onBlur.\n  const { onFocusIn, onFocusOut, ...restTriggerProps } = popover.triggerProps;\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef, triggerRef],\n      props: [\n        {\n          type: 'button' as const,\n          ...core.getTriggerAttrs(state, popupId),\n        },\n        { ...restTriggerProps, onFocus: onFocusIn, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace PopoverTrigger {\n  export type Props = PopoverTriggerProps;\n  export type State = PopoverState;\n}\n"],"mappings":";;;;;;;;;AAaA,MAAa,iBAAiB,WAAmD,SAAS,eACxF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CAEvF,MAAM,aAAa,aAChB,OAAiC;AAChC,UAAQ,kBAAkB,GAAG;AAC7B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,eAAe,KAAK,aAAa;IAG1D,CAAC,SAAS,WAAW,CACtB;CAKD,MAAM,EAAE,WAAW,YAAY,GAAG,qBAAqB,QAAQ;AAE/D,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK,CAAC,cAAc,WAAW;EAC/B,OAAO;GACL;IACE,MAAM;IACN,GAAG,KAAK,gBAAgB,OAAO,QAAQ;IACxC;GACD;IAAE,GAAG;IAAkB,SAAS;IAAW,QAAQ;IAAY;GAC/D;GACD;EACF,CACF;EACD"}

package/dist/dev/ui/slider/index.parts.d.ts

@@ -1,13 +1,15 @@
 import { SliderBuffer, SliderBufferProps } from "./slider-buffer.js";
 import { SliderFill, SliderFillProps } from "./slider-fill.js";
+import { SliderPreview, SliderPreviewProps } from "./slider-preview.js";
 import { SliderRoot, SliderRootProps } from "./slider-root.js";
 import { SliderThumb, SliderThumbProps } from "./slider-thumb.js";
+import { SliderThumbnail, SliderThumbnailProps } from "./slider-thumbnail.js";
 import { SliderTrack, SliderTrackProps } from "./slider-track.js";
 import { SliderValue, SliderValueProps } from "./slider-value.js";
 
 //#region src/ui/slider/index.parts.d.ts
 declare namespace index_parts_d_exports {
-  export { SliderBuffer as Buffer, SliderBufferProps as BufferProps, SliderFill as Fill, SliderFillProps as FillProps, SliderRoot as Root, SliderRootProps as RootProps, SliderThumb as Thumb, SliderThumbProps as ThumbProps, SliderTrack as Track, SliderTrackProps as TrackProps, SliderValue as Value, SliderValueProps as ValueProps };
+  export { SliderBuffer as Buffer, SliderBufferProps as BufferProps, SliderFill as Fill, SliderFillProps as FillProps, SliderPreview as Preview, SliderPreviewProps as PreviewProps, SliderRoot as Root, SliderRootProps as RootProps, SliderThumb as Thumb, SliderThumbProps as ThumbProps, SliderThumbnail as Thumbnail, SliderThumbnailProps as ThumbnailProps, SliderTrack as Track, SliderTrackProps as TrackProps, SliderValue as Value, SliderValueProps as ValueProps };
 }
 //#endregion
 export { index_parts_d_exports };

package/dist/dev/ui/slider/index.parts.js

@@ -1,8 +1,10 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { SliderBuffer } from "./slider-buffer.js";
 import { SliderFill } from "./slider-fill.js";
+import { SliderPreview } from "./slider-preview.js";
 import { SliderRoot } from "./slider-root.js";
 import { SliderThumb } from "./slider-thumb.js";
+import { SliderThumbnail } from "./slider-thumbnail.js";
 import { SliderTrack } from "./slider-track.js";
 import { SliderValue } from "./slider-value.js";
 
@@ -10,8 +12,10 @@ import { SliderValue } from "./slider-value.js";
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Buffer: () => SliderBuffer,
 	Fill: () => SliderFill,
+	Preview: () => SliderPreview,
 	Root: () => SliderRoot,
 	Thumb: () => SliderThumb,
+	Thumbnail: () => SliderThumbnail,
 	Track: () => SliderTrack,
 	Value: () => SliderValue
 });

package/dist/dev/ui/slider/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/slider/index.parts.ts"],"sourcesContent":["export { SliderBuffer as Buffer, type SliderBufferProps as BufferProps } from './slider-buffer';\nexport { SliderFill as Fill, type SliderFillProps as FillProps } from './slider-fill';\nexport { SliderRoot as Root, type SliderRootProps as RootProps } from './slider-root';\nexport { SliderThumb as Thumb, type SliderThumbProps as ThumbProps } from './slider-thumb';\nexport { SliderTrack as Track, type SliderTrackProps as TrackProps } from './slider-track';\nexport { SliderValue as Value, type SliderValueProps as ValueProps } from './slider-value';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/slider/index.parts.ts"],"sourcesContent":["export { SliderBuffer as Buffer, type SliderBufferProps as BufferProps } from './slider-buffer';\nexport { SliderFill as Fill, type SliderFillProps as FillProps } from './slider-fill';\nexport { SliderPreview as Preview, type SliderPreviewProps as PreviewProps } from './slider-preview';\nexport { SliderRoot as Root, type SliderRootProps as RootProps } from './slider-root';\nexport { SliderThumb as Thumb, type SliderThumbProps as ThumbProps } from './slider-thumb';\nexport { SliderThumbnail as Thumbnail, type SliderThumbnailProps as ThumbnailProps } from './slider-thumbnail';\nexport { SliderTrack as Track, type SliderTrackProps as TrackProps } from './slider-track';\nexport { SliderValue as Value, type SliderValueProps as ValueProps } from './slider-value';\n"],"mappings":""}

package/dist/dev/ui/slider/slider-preview.d.ts

@@ -0,0 +1,18 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { SliderPreviewOverflow } from "@videojs/core/dom";
+import * as react from "react";
+import { SliderState } from "@videojs/core";
+
+//#region src/ui/slider/slider-preview.d.ts
+interface SliderPreviewProps extends UIComponentProps<'div', SliderState> {
+  /** How the preview handles the slider boundaries. `'clamp'` keeps the preview within bounds, `'visible'` allows it to extend beyond the edges. */
+  overflow?: SliderPreviewOverflow | undefined;
+}
+/** Positioning container for preview content that tracks the pointer along the slider. */
+declare const SliderPreview: react.ForwardRefExoticComponent<Omit<SliderPreviewProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare namespace SliderPreview {
+  type Props = SliderPreviewProps;
+}
+//#endregion
+export { SliderPreview, SliderPreviewProps };
+//# sourceMappingURL=slider-preview.d.ts.map

package/dist/dev/ui/slider/slider-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-preview.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-preview.tsx"],"mappings":";;;;;;UAYiB,kBAAA,SAA2B,gBAAA,QAAwB,WAAA;;EAElE,QAAA,GAAW,qBAAA;AAAA;;cAIA,aAAA,EAAa,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,kBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAsCT,aAAA;EAAA,KACH,KAAA,GAAQ,kBAAA;AAAA"}

package/dist/dev/ui/slider/slider-preview.js

@@ -0,0 +1,40 @@
+'use client';
+
+import { renderElement } from "../../utils/use-render.js";
+import { useSliderContext } from "./context.js";
+import { getSliderPreviewStyle } from "@videojs/core/dom";
+import { forwardRef, useEffect, useRef, useState } from "react";
+
+//#region src/ui/slider/slider-preview.tsx
+/** Positioning container for preview content that tracks the pointer along the slider. */
+const SliderPreview = forwardRef(function SliderPreview(componentProps, forwardedRef) {
+	const { render, className, style, overflow = "clamp", ...elementProps } = componentProps;
+	const context = useSliderContext();
+	const { state } = context;
+	const measureRef = useRef(null);
+	const [width, setWidth] = useState(0);
+	useEffect(() => {
+		const el = measureRef.current;
+		if (!el) return;
+		const observer = new ResizeObserver(([entry]) => {
+			setWidth(entry.contentRect.width);
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+	const positionStyle = getSliderPreviewStyle(width, overflow);
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: context.stateAttrMap,
+		ref: [forwardedRef, measureRef],
+		props: [{ style: positionStyle }, elementProps]
+	});
+});
+
+//#endregion
+export { SliderPreview };
+//# sourceMappingURL=slider-preview.js.map

package/dist/dev/ui/slider/slider-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-preview.js","names":[],"sources":["../../../../src/ui/slider/slider-preview.tsx"],"sourcesContent":["'use client';\n\nimport type { SliderState } from '@videojs/core';\nimport type { SliderPreviewOverflow } from '@videojs/core/dom';\nimport { getSliderPreviewStyle } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useEffect, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSliderContext } from './context';\n\nexport interface SliderPreviewProps extends UIComponentProps<'div', SliderState> {\n  /** How the preview handles the slider boundaries. `'clamp'` keeps the preview within bounds, `'visible'` allows it to extend beyond the edges. */\n  overflow?: SliderPreviewOverflow | undefined;\n}\n\n/** Positioning container for preview content that tracks the pointer along the slider. */\nexport const SliderPreview = forwardRef(function SliderPreview(\n  componentProps: SliderPreviewProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, overflow = 'clamp', ...elementProps } = componentProps;\n\n  const context = useSliderContext();\n  const { state } = context;\n\n  const measureRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n\n  useEffect(() => {\n    const el = measureRef.current;\n    if (!el) return;\n\n    const observer = new ResizeObserver(([entry]) => {\n      setWidth(entry!.contentRect.width);\n    });\n\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, []);\n\n  const positionStyle = getSliderPreviewStyle(width, overflow);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: context.stateAttrMap,\n      ref: [forwardedRef, measureRef],\n      props: [{ style: positionStyle }, elementProps],\n    }\n  );\n});\n\nexport namespace SliderPreview {\n  export type Props = SliderPreviewProps;\n}\n"],"mappings":";;;;;;;;;AAkBA,MAAa,gBAAgB,WAAW,SAAS,cAC/C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,WAAW,SAAS,GAAG,iBAAiB;CAE1E,MAAM,UAAU,kBAAkB;CAClC,MAAM,EAAE,UAAU;CAElB,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;AAErC,iBAAgB;EACd,MAAM,KAAK,WAAW;AACtB,MAAI,CAAC,GAAI;EAET,MAAM,WAAW,IAAI,gBAAgB,CAAC,WAAW;AAC/C,YAAS,MAAO,YAAY,MAAM;IAClC;AAEF,WAAS,QAAQ,GAAG;AACpB,eAAa,SAAS,YAAY;IACjC,EAAE,CAAC;CAEN,MAAM,gBAAgB,sBAAsB,OAAO,SAAS;AAE5D,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc,QAAQ;EACtB,KAAK,CAAC,cAAc,WAAW;EAC/B,OAAO,CAAC,EAAE,OAAO,eAAe,EAAE,aAAa;EAChD,CACF;EACD"}

package/dist/dev/ui/slider/slider-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider-root.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-root.tsx"],"mappings":";;;;;UAYiB,eAAA,SAAwB,gBAAA,QAAwB,UAAA,CAAW,KAAA,GAAQ,UAAA,CAAW,KAAA;EAC7F,aAAA,KAAkB,KAAA;EAClB,aAAA,KAAkB,KAAA;EAClB,WAAA;EACA,SAAA;AAAA;AAAA,cAGW,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,eAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBA+EN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,UAAA,CAAW,KAAA;AAAA"}
+{"version":3,"file":"slider-root.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-root.tsx"],"mappings":";;;;;UAYiB,eAAA,SAAwB,gBAAA,QAAwB,UAAA,CAAW,KAAA,GAAQ,UAAA,CAAW,KAAA;EAC7F,aAAA,KAAkB,KAAA;EAClB,aAAA,KAAkB,KAAA;EAClB,WAAA;EACA,SAAA;AAAA;AAAA,cAGW,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,eAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAgFN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,UAAA,CAAW,KAAA;AAAA"}

package/dist/dev/ui/slider/slider-root.js

@@ -22,7 +22,7 @@ const SliderRoot = forwardRef(function SliderRoot(componentProps, forwardedRef)
 		disabled,
 		thumbAlignment
 	});
-	const { state, cssVars, rootRef, thumbRef: sliderThumbRef, rootProps, thumbProps } = useSlider({
+	const { state, cssVars, rootRef, thumbRef: sliderThumbRef, rootProps, rootStyle, thumbProps } = useSlider({
 		computeState: (input) => {
 			core.setInput(input);
 			return core.getSliderState(value);
@@ -58,7 +58,10 @@ const SliderRoot = forwardRef(function SliderRoot(componentProps, forwardedRef)
 			stateAttrMap: SliderDataAttrs,
 			ref: [forwardedRef, rootRef],
 			props: [
-				{ style: cssVars },
+				{ style: {
+					...cssVars,
+					...rootStyle
+				} },
 				rootProps,
 				elementProps
 			]

package/dist/dev/ui/slider/slider-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-root.js","names":[],"sources":["../../../../src/ui/slider/slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { SliderCore, SliderDataAttrs } from '@videojs/core';\nimport { getSliderCSSVars } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from './context';\n\nexport interface SliderRootProps extends UIComponentProps<'div', SliderCore.State>, SliderCore.Props {\n  onValueChange?: ((value: number) => void) | undefined;\n  onValueCommit?: ((value: number) => void) | undefined;\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const SliderRoot = forwardRef(function SliderRoot(\n  componentProps: SliderRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    render,\n    className,\n    style,\n    label,\n    min,\n    max,\n    step,\n    largeStep,\n    orientation,\n    disabled,\n    thumbAlignment,\n    value = 0,\n    onValueChange,\n    onValueCommit,\n    onDragStart,\n    onDragEnd,\n    ...elementProps\n  } = componentProps;\n\n  const [core] = useState(() => new SliderCore());\n  core.setProps({ label, min, max, step, largeStep, orientation, disabled, thumbAlignment });\n\n  const {\n    state,\n    cssVars,\n    rootRef,\n    thumbRef: sliderThumbRef,\n    rootProps,\n    thumbProps,\n  } = useSlider({\n    computeState: (input) => {\n      core.setInput(input);\n      return core.getSliderState(value);\n    },\n    getPercent: () => core.percentFromValue(value),\n    getStepPercent: () => core.getStepPercent(),\n    getLargeStepPercent: () => core.getLargeStepPercent(),\n    orientation,\n    disabled,\n    adjustPercent: (rawPercent, thumbSize, trackSize) =>\n      core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n    getCSSVars: getSliderCSSVars,\n    onValueChange: (percent) => onValueChange?.(core.valueFromPercent(percent)),\n    onValueCommit: (percent) => onValueCommit?.(core.valueFromPercent(percent)),\n    onDragStart,\n    onDragEnd,\n  });\n\n  return (\n    <SliderProvider\n      value={{\n        state,\n        pointerValue: core.valueFromPercent(state.pointerPercent),\n        thumbRef: sliderThumbRef,\n        thumbProps,\n        stateAttrMap: SliderDataAttrs,\n        getAttrs: (sliderState) => core.getAttrs(sliderState),\n        formatValue: undefined,\n      }}\n    >\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: SliderDataAttrs,\n          ref: [forwardedRef, rootRef],\n          props: [{ style: cssVars }, rootProps, elementProps],\n        }\n      )}\n    </SliderProvider>\n  );\n});\n\nexport namespace SliderRoot {\n  export type Props = SliderRootProps;\n  export type State = SliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EACJ,QACA,WACA,OACA,OACA,KACA,KACA,MACA,WACA,aACA,UACA,gBACA,QAAQ,GACR,eACA,eACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,CAAC;AAC/C,MAAK,SAAS;EAAE;EAAO;EAAK;EAAK;EAAM;EAAW;EAAa;EAAU;EAAgB,CAAC;CAE1F,MAAM,EACJ,OACA,SACA,SACA,UAAU,gBACV,WACA,eACE,UAAU;EACZ,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,UAAO,KAAK,eAAe,MAAM;;EAEnC,kBAAkB,KAAK,iBAAiB,MAAM;EAC9C,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY,gBAAgB,KAAK,iBAAiB,QAAQ,CAAC;EAC3E,gBAAgB,YAAY,gBAAgB,KAAK,iBAAiB,QAAQ,CAAC;EAC3E;EACA;EACD,CAAC;AAEF,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD,UAAU;GACV;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAY;GACrD,aAAa;GACd;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO,SAAS;IAAE;IAAW;IAAa;GACrD,CACF;GACc;EAEnB"}
+{"version":3,"file":"slider-root.js","names":[],"sources":["../../../../src/ui/slider/slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { SliderCore, SliderDataAttrs } from '@videojs/core';\nimport { getSliderCSSVars } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from './context';\n\nexport interface SliderRootProps extends UIComponentProps<'div', SliderCore.State>, SliderCore.Props {\n  onValueChange?: ((value: number) => void) | undefined;\n  onValueCommit?: ((value: number) => void) | undefined;\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const SliderRoot = forwardRef(function SliderRoot(\n  componentProps: SliderRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    render,\n    className,\n    style,\n    label,\n    min,\n    max,\n    step,\n    largeStep,\n    orientation,\n    disabled,\n    thumbAlignment,\n    value = 0,\n    onValueChange,\n    onValueCommit,\n    onDragStart,\n    onDragEnd,\n    ...elementProps\n  } = componentProps;\n\n  const [core] = useState(() => new SliderCore());\n  core.setProps({ label, min, max, step, largeStep, orientation, disabled, thumbAlignment });\n\n  const {\n    state,\n    cssVars,\n    rootRef,\n    thumbRef: sliderThumbRef,\n    rootProps,\n    rootStyle,\n    thumbProps,\n  } = useSlider({\n    computeState: (input) => {\n      core.setInput(input);\n      return core.getSliderState(value);\n    },\n    getPercent: () => core.percentFromValue(value),\n    getStepPercent: () => core.getStepPercent(),\n    getLargeStepPercent: () => core.getLargeStepPercent(),\n    orientation,\n    disabled,\n    adjustPercent: (rawPercent, thumbSize, trackSize) =>\n      core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n    getCSSVars: getSliderCSSVars,\n    onValueChange: (percent) => onValueChange?.(core.valueFromPercent(percent)),\n    onValueCommit: (percent) => onValueCommit?.(core.valueFromPercent(percent)),\n    onDragStart,\n    onDragEnd,\n  });\n\n  return (\n    <SliderProvider\n      value={{\n        state,\n        pointerValue: core.valueFromPercent(state.pointerPercent),\n        thumbRef: sliderThumbRef,\n        thumbProps,\n        stateAttrMap: SliderDataAttrs,\n        getAttrs: (sliderState) => core.getAttrs(sliderState),\n        formatValue: undefined,\n      }}\n    >\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: SliderDataAttrs,\n          ref: [forwardedRef, rootRef],\n          props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n        }\n      )}\n    </SliderProvider>\n  );\n});\n\nexport namespace SliderRoot {\n  export type Props = SliderRootProps;\n  export type State = SliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EACJ,QACA,WACA,OACA,OACA,KACA,KACA,MACA,WACA,aACA,UACA,gBACA,QAAQ,GACR,eACA,eACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,CAAC;AAC/C,MAAK,SAAS;EAAE;EAAO;EAAK;EAAK;EAAM;EAAW;EAAa;EAAU;EAAgB,CAAC;CAE1F,MAAM,EACJ,OACA,SACA,SACA,UAAU,gBACV,WACA,WACA,eACE,UAAU;EACZ,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,UAAO,KAAK,eAAe,MAAM;;EAEnC,kBAAkB,KAAK,iBAAiB,MAAM;EAC9C,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY,gBAAgB,KAAK,iBAAiB,QAAQ,CAAC;EAC3E,gBAAgB,YAAY,gBAAgB,KAAK,iBAAiB,QAAQ,CAAC;EAC3E;EACA;EACD,CAAC;AAEF,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD,UAAU;GACV;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAY;GACrD,aAAa;GACd;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;GACc;EAEnB"}

package/dist/dev/ui/slider/slider-thumbnail.d.ts

@@ -0,0 +1,14 @@
+import { ThumbnailProps } from "../thumbnail/thumbnail.js";
+import * as react from "react";
+import { ThumbnailCore } from "@videojs/core";
+
+//#region src/ui/slider/slider-thumbnail.d.ts
+interface SliderThumbnailProps extends Omit<ThumbnailProps, 'time'> {}
+declare const SliderThumbnail: react.ForwardRefExoticComponent<Omit<SliderThumbnailProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare namespace SliderThumbnail {
+  type Props = SliderThumbnailProps;
+  type State = ThumbnailCore.State;
+}
+//#endregion
+export { SliderThumbnail, SliderThumbnailProps };
+//# sourceMappingURL=slider-thumbnail.d.ts.map

package/dist/dev/ui/slider/slider-thumbnail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-thumbnail.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-thumbnail.tsx"],"mappings":";;;;;UAQiB,oBAAA,SAA6B,IAAA,CAAK,cAAA;AAAA,cAEtC,eAAA,EAAe,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,oBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAOX,eAAA;EAAA,KACH,KAAA,GAAQ,oBAAA;EAAA,KACR,KAAA,GAAQ,aAAA,CAAc,KAAA;AAAA"}

package/dist/dev/ui/slider/slider-thumbnail.js

@@ -0,0 +1,20 @@
+'use client';
+
+import { useSliderContext } from "./context.js";
+import { Thumbnail } from "../thumbnail/thumbnail.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/ui/slider/slider-thumbnail.tsx
+const SliderThumbnail = forwardRef(function SliderThumbnail(componentProps, forwardedRef) {
+	const { pointerValue } = useSliderContext();
+	return /* @__PURE__ */ jsx(Thumbnail, {
+		ref: forwardedRef,
+		...componentProps,
+		time: pointerValue
+	});
+});
+
+//#endregion
+export { SliderThumbnail };
+//# sourceMappingURL=slider-thumbnail.js.map

package/dist/dev/ui/slider/slider-thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-thumbnail.js","names":[],"sources":["../../../../src/ui/slider/slider-thumbnail.tsx"],"sourcesContent":["'use client';\n\nimport type { ThumbnailCore } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport { Thumbnail, type ThumbnailProps } from '../thumbnail/thumbnail';\nimport { useSliderContext } from './context';\n\nexport interface SliderThumbnailProps extends Omit<ThumbnailProps, 'time'> {}\n\nexport const SliderThumbnail = forwardRef<HTMLDivElement, SliderThumbnailProps>(\n  function SliderThumbnail(componentProps, forwardedRef) {\n    const { pointerValue } = useSliderContext();\n    return <Thumbnail ref={forwardedRef} {...componentProps} time={pointerValue} />;\n  }\n);\n\nexport namespace SliderThumbnail {\n  export type Props = SliderThumbnailProps;\n  export type State = ThumbnailCore.State;\n}\n"],"mappings":";;;;;;;;AAUA,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,gBAAgB,cAAc;CACrD,MAAM,EAAE,iBAAiB,kBAAkB;AAC3C,QAAO,oBAAC;EAAU,KAAK;EAAc,GAAI;EAAgB,MAAM;GAAgB;EAElF"}

package/dist/dev/ui/thumbnail/thumbnail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thumbnail.d.ts","names":[],"sources":["../../../../src/ui/thumbnail/thumbnail.tsx"],"mappings":";;;;;UAiBiB,cAAA,SAAuB,gBAAA,QAAwB,aAAA,CAAc,KAAA,GAAQ,aAAA,CAAc,KAAA;;EAElG,UAAA,GAAa,cAAA;AAAA;AAAA,cAGF,SAAA,EAAS,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,cAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAwGL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;EAAA,KACR,KAAA,GAAQ,aAAA,CAAc,KAAA;AAAA"}
+{"version":3,"file":"thumbnail.d.ts","names":[],"sources":["../../../../src/ui/thumbnail/thumbnail.tsx"],"mappings":";;;;;UAkBiB,cAAA,SAAuB,gBAAA,QAAwB,aAAA,CAAc,KAAA,GAAQ,aAAA,CAAc,KAAA;;EAElG,UAAA,GAAa,cAAA;AAAA;AAAA,cAGF,SAAA,EAAS,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,cAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAqGL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;EAAA,KACR,KAAA,GAAQ,aAAA,CAAc,KAAA;AAAA"}

package/dist/dev/ui/thumbnail/thumbnail.js

@@ -1,9 +1,10 @@
 'use client';
 
 import { useOptionalPlayer } from "../../player/context.js";
+import { useDestroy } from "../../utils/use-destroy.js";
 import { renderElement } from "../../utils/use-render.js";
 import { createThumbnail, selectTextTrack } from "@videojs/core/dom";
-import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { forwardRef, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { ThumbnailCore, ThumbnailDataAttrs, mapCuesToThumbnails } from "@videojs/core";
 
@@ -20,10 +21,7 @@ const Thumbnail = forwardRef(function Thumbnail(componentProps, forwardedRef) {
 		getImg: () => imgRef.current,
 		onStateChange: () => setRenderToken((n) => n + 1)
 	}));
-	useEffect(() => {
-		handle.connect();
-		return () => handle.destroy();
-	}, [handle]);
+	useDestroy(handle, () => handle.connect());
 	const thumbnails = useMemo(() => {
 		if (externalThumbnails && externalThumbnails.length > 0) return externalThumbnails;
 		if (!textTrack?.thumbnailCues.length) return [];

package/dist/dev/ui/thumbnail/thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"thumbnail.js","names":[],"sources":["../../../../src/ui/thumbnail/thumbnail.tsx"],"sourcesContent":["'use client';\n\nimport {\n  mapCuesToThumbnails,\n  ThumbnailCore,\n  ThumbnailDataAttrs,\n  type ThumbnailFetchPriority,\n  type ThumbnailImage,\n} from '@videojs/core';\nimport { createThumbnail, selectTextTrack } from '@videojs/core/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useOptionalPlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface ThumbnailProps extends UIComponentProps<'div', ThumbnailCore.State>, ThumbnailCore.Props {\n  /** Pre-parsed thumbnail images — bypasses the automatic `<track>` detection. */\n  thumbnails?: ThumbnailImage[] | undefined;\n}\n\nexport const Thumbnail = forwardRef<HTMLDivElement, ThumbnailProps>(function Thumbnail(componentProps, forwardedRef) {\n  const {\n    render,\n    className,\n    style,\n    time = 0,\n    thumbnails: externalThumbnails,\n    crossOrigin,\n    loading,\n    fetchPriority,\n    ...elementProps\n  } = componentProps;\n\n  const [core] = useState(() => new ThumbnailCore());\n  const divRef = useRef<HTMLDivElement>(null);\n  const imgRef = useRef<HTMLImageElement>(null);\n  const textTrack = useOptionalPlayer(selectTextTrack);\n\n  // Force re-render when the handle's state changes (img load/error, resize).\n  const [, setRenderToken] = useState(0);\n\n  const [handle] = useState(() =>\n    createThumbnail({\n      getContainer: () => divRef.current,\n      getImg: () => imgRef.current,\n      onStateChange: () => setRenderToken((n) => n + 1),\n    })\n  );\n\n  useEffect(() => {\n    handle.connect();\n    return () => handle.destroy();\n  }, [handle]);\n\n  // Resolve thumbnails: external prop takes priority over auto <track> path.\n  const thumbnails = useMemo(() => {\n    if (externalThumbnails && externalThumbnails.length > 0) return externalThumbnails;\n    if (!textTrack?.thumbnailCues.length) return [];\n    return mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? undefined);\n  }, [externalThumbnails, textTrack]);\n\n  const thumbnail = useMemo(() => core.findActiveThumbnail(thumbnails, time), [core, thumbnails, time]);\n\n  // Track src changes via the handle.\n  handle.updateSrc(thumbnail?.url);\n\n  const state = core.getState(handle.loading, handle.error, thumbnail);\n\n  // Compute styles declaratively from resize result.\n  let containerStyle: CSSProperties = { overflow: 'hidden' };\n  let imgStyle: CSSProperties | undefined;\n\n  if (thumbnail && handle.naturalWidth && handle.naturalHeight) {\n    const constraints = handle.readConstraints();\n    const result = core.resize(thumbnail, handle.naturalWidth, handle.naturalHeight, constraints);\n\n    if (result) {\n      containerStyle = {\n        overflow: 'hidden',\n        width: result.containerWidth,\n        height: result.containerHeight,\n      };\n      imgStyle = {\n        width: result.imageWidth,\n        height: result.imageHeight,\n        maxWidth: 'none',\n        transform:\n          result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : undefined,\n      };\n    }\n  }\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: ThumbnailDataAttrs,\n      ref: [forwardedRef, divRef],\n      props: [\n        core.getAttrs(state),\n        { style: containerStyle },\n        elementProps,\n        {\n          children: (\n            <img\n              ref={imgRef}\n              alt=\"\"\n              aria-hidden=\"true\"\n              decoding=\"async\"\n              src={thumbnail?.url}\n              crossOrigin={crossOrigin === '' || crossOrigin === null ? undefined : crossOrigin}\n              loading={loading}\n              style={imgStyle}\n              // React's types omit `| undefined` from fetchPriority — cast to satisfy exactOptionalPropertyTypes.\n              fetchPriority={fetchPriority as ThumbnailFetchPriority}\n            />\n          ),\n        },\n      ],\n    }\n  );\n});\n\nexport namespace Thumbnail {\n  export type Props = ThumbnailProps;\n  export type State = ThumbnailCore.State;\n}\n"],"mappings":";;;;;;;;;;AAsBA,MAAa,YAAY,WAA2C,SAAS,UAAU,gBAAgB,cAAc;CACnH,MAAM,EACJ,QACA,WACA,OACA,OAAO,GACP,YAAY,oBACZ,aACA,SACA,eACA,GAAG,iBACD;CAEJ,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;CAClD,MAAM,SAAS,OAAuB,KAAK;CAC3C,MAAM,SAAS,OAAyB,KAAK;CAC7C,MAAM,YAAY,kBAAkB,gBAAgB;CAGpD,MAAM,GAAG,kBAAkB,SAAS,EAAE;CAEtC,MAAM,CAAC,UAAU,eACf,gBAAgB;EACd,oBAAoB,OAAO;EAC3B,cAAc,OAAO;EACrB,qBAAqB,gBAAgB,MAAM,IAAI,EAAE;EAClD,CAAC,CACH;AAED,iBAAgB;AACd,SAAO,SAAS;AAChB,eAAa,OAAO,SAAS;IAC5B,CAAC,OAAO,CAAC;CAGZ,MAAM,aAAa,cAAc;AAC/B,MAAI,sBAAsB,mBAAmB,SAAS,EAAG,QAAO;AAChE,MAAI,CAAC,WAAW,cAAc,OAAQ,QAAO,EAAE;AAC/C,SAAO,oBAAoB,UAAU,eAAe,UAAU,qBAAqB,OAAU;IAC5F,CAAC,oBAAoB,UAAU,CAAC;CAEnC,MAAM,YAAY,cAAc,KAAK,oBAAoB,YAAY,KAAK,EAAE;EAAC;EAAM;EAAY;EAAK,CAAC;AAGrG,QAAO,UAAU,WAAW,IAAI;CAEhC,MAAM,QAAQ,KAAK,SAAS,OAAO,SAAS,OAAO,OAAO,UAAU;CAGpE,IAAI,iBAAgC,EAAE,UAAU,UAAU;CAC1D,IAAI;AAEJ,KAAI,aAAa,OAAO,gBAAgB,OAAO,eAAe;EAC5D,MAAM,cAAc,OAAO,iBAAiB;EAC5C,MAAM,SAAS,KAAK,OAAO,WAAW,OAAO,cAAc,OAAO,eAAe,YAAY;AAE7F,MAAI,QAAQ;AACV,oBAAiB;IACf,UAAU;IACV,OAAO,OAAO;IACd,QAAQ,OAAO;IAChB;AACD,cAAW;IACT,OAAO,OAAO;IACd,QAAQ,OAAO;IACf,UAAU;IACV,WACE,OAAO,WAAW,OAAO,UAAU,cAAc,OAAO,QAAQ,OAAO,OAAO,QAAQ,OAAO;IAChG;;;AAIL,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,OAAO;EAC3B,OAAO;GACL,KAAK,SAAS,MAAM;GACpB,EAAE,OAAO,gBAAgB;GACzB;GACA,EACE,UACE,oBAAC;IACC,KAAK;IACL,KAAI;IACJ,eAAY;IACZ,UAAS;IACT,KAAK,WAAW;IAChB,aAAa,gBAAgB,MAAM,gBAAgB,OAAO,SAAY;IAC7D;IACT,OAAO;IAEQ;KACf,EAEL;GACF;EACF,CACF;EACD"}
+{"version":3,"file":"thumbnail.js","names":[],"sources":["../../../../src/ui/thumbnail/thumbnail.tsx"],"sourcesContent":["'use client';\n\nimport {\n  mapCuesToThumbnails,\n  ThumbnailCore,\n  ThumbnailDataAttrs,\n  type ThumbnailFetchPriority,\n  type ThumbnailImage,\n} from '@videojs/core';\nimport { createThumbnail, selectTextTrack } from '@videojs/core/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useMemo, useRef, useState } from 'react';\n\nimport { useOptionalPlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface ThumbnailProps extends UIComponentProps<'div', ThumbnailCore.State>, ThumbnailCore.Props {\n  /** Pre-parsed thumbnail images — bypasses the automatic `<track>` detection. */\n  thumbnails?: ThumbnailImage[] | undefined;\n}\n\nexport const Thumbnail = forwardRef<HTMLDivElement, ThumbnailProps>(function Thumbnail(componentProps, forwardedRef) {\n  const {\n    render,\n    className,\n    style,\n    time = 0,\n    thumbnails: externalThumbnails,\n    crossOrigin,\n    loading,\n    fetchPriority,\n    ...elementProps\n  } = componentProps;\n\n  const [core] = useState(() => new ThumbnailCore());\n  const divRef = useRef<HTMLDivElement>(null);\n  const imgRef = useRef<HTMLImageElement>(null);\n  const textTrack = useOptionalPlayer(selectTextTrack);\n\n  // Force re-render when the handle's state changes (img load/error, resize).\n  const [, setRenderToken] = useState(0);\n\n  const [handle] = useState(() =>\n    createThumbnail({\n      getContainer: () => divRef.current,\n      getImg: () => imgRef.current,\n      onStateChange: () => setRenderToken((n) => n + 1),\n    })\n  );\n\n  useDestroy(handle, () => handle.connect());\n\n  // Resolve thumbnails: external prop takes priority over auto <track> path.\n  const thumbnails = useMemo(() => {\n    if (externalThumbnails && externalThumbnails.length > 0) return externalThumbnails;\n    if (!textTrack?.thumbnailCues.length) return [];\n    return mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? undefined);\n  }, [externalThumbnails, textTrack]);\n\n  const thumbnail = useMemo(() => core.findActiveThumbnail(thumbnails, time), [core, thumbnails, time]);\n\n  // Track src changes via the handle.\n  handle.updateSrc(thumbnail?.url);\n\n  const state = core.getState(handle.loading, handle.error, thumbnail);\n\n  // Compute styles declaratively from resize result.\n  let containerStyle: CSSProperties = { overflow: 'hidden' };\n  let imgStyle: CSSProperties | undefined;\n\n  if (thumbnail && handle.naturalWidth && handle.naturalHeight) {\n    const constraints = handle.readConstraints();\n    const result = core.resize(thumbnail, handle.naturalWidth, handle.naturalHeight, constraints);\n\n    if (result) {\n      containerStyle = {\n        overflow: 'hidden',\n        width: result.containerWidth,\n        height: result.containerHeight,\n      };\n      imgStyle = {\n        width: result.imageWidth,\n        height: result.imageHeight,\n        maxWidth: 'none',\n        transform:\n          result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : undefined,\n      };\n    }\n  }\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: ThumbnailDataAttrs,\n      ref: [forwardedRef, divRef],\n      props: [\n        core.getAttrs(state),\n        { style: containerStyle },\n        elementProps,\n        {\n          children: (\n            <img\n              ref={imgRef}\n              alt=\"\"\n              aria-hidden=\"true\"\n              decoding=\"async\"\n              src={thumbnail?.url}\n              crossOrigin={crossOrigin === '' || crossOrigin === null ? undefined : crossOrigin}\n              loading={loading}\n              style={imgStyle}\n              // React's types omit `| undefined` from fetchPriority — cast to satisfy exactOptionalPropertyTypes.\n              fetchPriority={fetchPriority as ThumbnailFetchPriority}\n            />\n          ),\n        },\n      ],\n    }\n  );\n});\n\nexport namespace Thumbnail {\n  export type Props = ThumbnailProps;\n  export type State = ThumbnailCore.State;\n}\n"],"mappings":";;;;;;;;;;;AAuBA,MAAa,YAAY,WAA2C,SAAS,UAAU,gBAAgB,cAAc;CACnH,MAAM,EACJ,QACA,WACA,OACA,OAAO,GACP,YAAY,oBACZ,aACA,SACA,eACA,GAAG,iBACD;CAEJ,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;CAClD,MAAM,SAAS,OAAuB,KAAK;CAC3C,MAAM,SAAS,OAAyB,KAAK;CAC7C,MAAM,YAAY,kBAAkB,gBAAgB;CAGpD,MAAM,GAAG,kBAAkB,SAAS,EAAE;CAEtC,MAAM,CAAC,UAAU,eACf,gBAAgB;EACd,oBAAoB,OAAO;EAC3B,cAAc,OAAO;EACrB,qBAAqB,gBAAgB,MAAM,IAAI,EAAE;EAClD,CAAC,CACH;AAED,YAAW,cAAc,OAAO,SAAS,CAAC;CAG1C,MAAM,aAAa,cAAc;AAC/B,MAAI,sBAAsB,mBAAmB,SAAS,EAAG,QAAO;AAChE,MAAI,CAAC,WAAW,cAAc,OAAQ,QAAO,EAAE;AAC/C,SAAO,oBAAoB,UAAU,eAAe,UAAU,qBAAqB,OAAU;IAC5F,CAAC,oBAAoB,UAAU,CAAC;CAEnC,MAAM,YAAY,cAAc,KAAK,oBAAoB,YAAY,KAAK,EAAE;EAAC;EAAM;EAAY;EAAK,CAAC;AAGrG,QAAO,UAAU,WAAW,IAAI;CAEhC,MAAM,QAAQ,KAAK,SAAS,OAAO,SAAS,OAAO,OAAO,UAAU;CAGpE,IAAI,iBAAgC,EAAE,UAAU,UAAU;CAC1D,IAAI;AAEJ,KAAI,aAAa,OAAO,gBAAgB,OAAO,eAAe;EAC5D,MAAM,cAAc,OAAO,iBAAiB;EAC5C,MAAM,SAAS,KAAK,OAAO,WAAW,OAAO,cAAc,OAAO,eAAe,YAAY;AAE7F,MAAI,QAAQ;AACV,oBAAiB;IACf,UAAU;IACV,OAAO,OAAO;IACd,QAAQ,OAAO;IAChB;AACD,cAAW;IACT,OAAO,OAAO;IACd,QAAQ,OAAO;IACf,UAAU;IACV,WACE,OAAO,WAAW,OAAO,UAAU,cAAc,OAAO,QAAQ,OAAO,OAAO,QAAQ,OAAO;IAChG;;;AAIL,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,OAAO;EAC3B,OAAO;GACL,KAAK,SAAS,MAAM;GACpB,EAAE,OAAO,gBAAgB;GACzB;GACA,EACE,UACE,oBAAC;IACC,KAAK;IACL,KAAI;IACJ,eAAY;IACZ,UAAS;IACT,KAAK,WAAW;IAChB,aAAa,gBAAgB,MAAM,gBAAgB,OAAO,SAAY;IAC7D;IACT,OAAO;IAEQ;KACf,EAEL;GACF;EACF,CACF;EACD"}

package/dist/dev/ui/time-slider/index.parts.d.ts

@@ -1,14 +1,14 @@
 import { SliderBuffer, SliderBufferProps } from "../slider/slider-buffer.js";
 import { SliderFill, SliderFillProps } from "../slider/slider-fill.js";
+import { SliderPreview, SliderPreviewProps } from "../slider/slider-preview.js";
 import { SliderThumb, SliderThumbProps } from "../slider/slider-thumb.js";
 import { SliderTrack, SliderTrackProps } from "../slider/slider-track.js";
 import { SliderValue, SliderValueProps } from "../slider/slider-value.js";
-import "../slider/index.parts.js";
 import { TimeSliderRoot, TimeSliderRootProps } from "./time-slider-root.js";
 
 //#region src/ui/time-slider/index.parts.d.ts
 declare namespace index_parts_d_exports {
-  export { SliderBuffer as Buffer, SliderBufferProps as BufferProps, SliderFill as Fill, SliderFillProps as FillProps, TimeSliderRoot as Root, TimeSliderRootProps as RootProps, SliderThumb as Thumb, SliderThumbProps as ThumbProps, SliderTrack as Track, SliderTrackProps as TrackProps, SliderValue as Value, SliderValueProps as ValueProps };
+  export { SliderBuffer as Buffer, SliderBufferProps as BufferProps, SliderFill as Fill, SliderFillProps as FillProps, SliderPreview as Preview, SliderPreviewProps as PreviewProps, TimeSliderRoot as Root, TimeSliderRootProps as RootProps, SliderThumb as Thumb, SliderThumbProps as ThumbProps, SliderTrack as Track, SliderTrackProps as TrackProps, SliderValue as Value, SliderValueProps as ValueProps };
 }
 //#endregion
 export { index_parts_d_exports };

package/dist/dev/ui/time-slider/index.parts.js

@@ -1,6 +1,7 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { SliderBuffer } from "../slider/slider-buffer.js";
 import { SliderFill } from "../slider/slider-fill.js";
+import { SliderPreview } from "../slider/slider-preview.js";
 import { SliderThumb } from "../slider/slider-thumb.js";
 import { SliderTrack } from "../slider/slider-track.js";
 import { SliderValue } from "../slider/slider-value.js";
@@ -10,6 +11,7 @@ import { TimeSliderRoot } from "./time-slider-root.js";
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Buffer: () => SliderBuffer,
 	Fill: () => SliderFill,
+	Preview: () => SliderPreview,
 	Root: () => TimeSliderRoot,
 	Thumb: () => SliderThumb,
 	Track: () => SliderTrack,

package/dist/dev/ui/time-slider/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/time-slider/index.parts.ts"],"sourcesContent":["export {\n  Buffer,\n  type BufferProps,\n  Fill,\n  type FillProps,\n  Thumb,\n  type ThumbProps,\n  Track,\n  type TrackProps,\n  Value,\n  type ValueProps,\n} from '../slider/index.parts';\nexport { TimeSliderRoot as Root, type TimeSliderRootProps as RootProps } from './time-slider-root';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/time-slider/index.parts.ts"],"sourcesContent":["export {\n  Buffer,\n  type BufferProps,\n  Fill,\n  type FillProps,\n  Preview,\n  type PreviewProps,\n  Thumb,\n  type ThumbProps,\n  Track,\n  type TrackProps,\n  Value,\n  type ValueProps,\n} from '../slider/index.parts';\nexport { TimeSliderRoot as Root, type TimeSliderRootProps as RootProps } from './time-slider-root';\n"],"mappings":""}

package/dist/dev/ui/time-slider/time-slider-root.js

@@ -31,7 +31,7 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 		...buffer
 	} : null);
 	const duration = time?.duration ?? 0;
-	const { state, cssVars, rootRef, thumbRef, rootProps, thumbProps } = useSlider({
+	const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
 		computeState: (input) => {
 			core.setInput(input);
 			if (!time || !buffer) core.setMedia({
@@ -86,7 +86,10 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 			stateAttrMap: TimeSliderDataAttrs,
 			ref: [forwardedRef, rootRef],
 			props: [
-				{ style: cssVars },
+				{ style: {
+					...cssVars,
+					...rootStyle
+				} },
 				rootProps,
 				elementProps
 			]

package/dist/dev/ui/time-slider/time-slider-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slider-root.js","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectTime } from '@videojs/core/dom';\nimport { formatTime } from '@videojs/utils/time';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopSeek = (): Promise<number> => Promise.resolve(0);\n\nexport interface TimeSliderRootProps extends UIComponentProps<'div', TimeSliderCore.State>, TimeSliderCore.Props {\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const TimeSliderRoot = forwardRef<HTMLDivElement, TimeSliderRootProps>(\n  function TimeSliderRoot(componentProps, forwardedRef) {\n    const {\n      render,\n      className,\n      style,\n      label,\n      commitThrottle = TimeSliderCore.defaultProps.commitThrottle,\n      step = TimeSliderCore.defaultProps.step,\n      largeStep = TimeSliderCore.defaultProps.largeStep,\n      orientation,\n      disabled,\n      thumbAlignment,\n      onDragStart,\n      onDragEnd,\n      ...elementProps\n    } = componentProps;\n\n    const time = usePlayer(selectTime);\n    const buffer = usePlayer(selectBuffer);\n\n    const [core] = useState(() => new TimeSliderCore());\n    core.setProps({ label, step, largeStep, orientation, disabled, thumbAlignment });\n\n    // Keep a ref to the latest media state for callbacks that fire outside the render cycle.\n    const mediaRef = useLatestRef(time && buffer ? { ...time, ...buffer } : null);\n\n    const duration = time?.duration ?? 0;\n\n    const { state, cssVars, rootRef, thumbRef, rootProps, thumbProps } = useSlider<TimeSliderCore.State>({\n      computeState: (input) => {\n        core.setInput(input);\n        if (!time || !buffer) {\n          core.setMedia({\n            currentTime: 0,\n            duration: 0,\n            seeking: false,\n            seek: noopSeek,\n            buffered: [],\n            seekable: [],\n          });\n        } else {\n          core.setMedia({ ...time, ...buffer });\n        }\n\n        return core.getState();\n      },\n      getPercent: () => (duration > 0 ? ((time?.currentTime ?? 0) / duration) * 100 : 0),\n      getStepPercent: () => core.getStepPercent(),\n      getLargeStepPercent: () => core.getLargeStepPercent(),\n      orientation,\n      disabled,\n      commitThrottle,\n      adjustPercent: (rawPercent, thumbSize, trackSize) =>\n        core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n      getCSSVars: getTimeSliderCSSVars,\n      onValueCommit: (percent) => {\n        const media = mediaRef.current;\n        if (media) media.seek(core.valueFromPercent(percent));\n      },\n      onDragStart,\n      onDragEnd,\n    });\n\n    if (!time) {\n      if (__DEV__) logMissingFeature('TimeSlider', 'time');\n      return null;\n    }\n\n    return (\n      <SliderProvider\n        value={{\n          state,\n          pointerValue: core.valueFromPercent(state.pointerPercent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: TimeSliderDataAttrs,\n          getAttrs: (sliderState) => core.getAttrs(sliderState as TimeSliderCore.State),\n          formatValue: (value) => formatTime(value, duration),\n        }}\n      >\n        {renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            stateAttrMap: TimeSliderDataAttrs,\n            ref: [forwardedRef, rootRef],\n            props: [{ style: cssVars }, rootProps, elementProps],\n          }\n        )}\n      </SliderProvider>\n    );\n  }\n);\n\nexport namespace TimeSliderRoot {\n  export type Props = TimeSliderRootProps;\n  export type State = TimeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,iBAAkC,QAAQ,QAAQ,EAAE;AAO1D,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,cAAc;CACpD,MAAM,EACJ,QACA,WACA,OACA,OACA,iBAAiB,eAAe,aAAa,gBAC7C,OAAO,eAAe,aAAa,MACnC,YAAY,eAAe,aAAa,WACxC,aACA,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,OAAO,UAAU,WAAW;CAClC,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAM;EAAW;EAAa;EAAU;EAAgB,CAAC;CAGhF,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;EAAQ,GAAG,KAAK;CAE7E,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,eAAe,UAAgC;EACnG,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,OAAI,CAAC,QAAQ,CAAC,OACZ,MAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,EAAE;IACZ,UAAU,EAAE;IACb,CAAC;OAEF,MAAK,SAAS;IAAE,GAAG;IAAM,GAAG;IAAQ,CAAC;AAGvC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,WAAW,KAAM,MAAM,eAAe,KAAK,WAAY,MAAM;EAChF,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;AACvB,OAAI,MAAO,OAAM,KAAK,KAAK,iBAAiB,QAAQ,CAAC;;EAEvD;EACA;EACD,CAAC;AAEF,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;AAGT,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAoC;GAC7E,cAAc,UAAU,WAAW,OAAO,SAAS;GACpD;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO,SAAS;IAAE;IAAW;IAAa;GACrD,CACF;GACc;EAGtB"}
+{"version":3,"file":"time-slider-root.js","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectTime } from '@videojs/core/dom';\nimport { formatTime } from '@videojs/utils/time';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopSeek = (): Promise<number> => Promise.resolve(0);\n\nexport interface TimeSliderRootProps extends UIComponentProps<'div', TimeSliderCore.State>, TimeSliderCore.Props {\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const TimeSliderRoot = forwardRef<HTMLDivElement, TimeSliderRootProps>(\n  function TimeSliderRoot(componentProps, forwardedRef) {\n    const {\n      render,\n      className,\n      style,\n      label,\n      commitThrottle = TimeSliderCore.defaultProps.commitThrottle,\n      step = TimeSliderCore.defaultProps.step,\n      largeStep = TimeSliderCore.defaultProps.largeStep,\n      orientation,\n      disabled,\n      thumbAlignment,\n      onDragStart,\n      onDragEnd,\n      ...elementProps\n    } = componentProps;\n\n    const time = usePlayer(selectTime);\n    const buffer = usePlayer(selectBuffer);\n\n    const [core] = useState(() => new TimeSliderCore());\n    core.setProps({ label, step, largeStep, orientation, disabled, thumbAlignment });\n\n    // Keep a ref to the latest media state for callbacks that fire outside the render cycle.\n    const mediaRef = useLatestRef(time && buffer ? { ...time, ...buffer } : null);\n\n    const duration = time?.duration ?? 0;\n\n    const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider<TimeSliderCore.State>({\n      computeState: (input) => {\n        core.setInput(input);\n        if (!time || !buffer) {\n          core.setMedia({\n            currentTime: 0,\n            duration: 0,\n            seeking: false,\n            seek: noopSeek,\n            buffered: [],\n            seekable: [],\n          });\n        } else {\n          core.setMedia({ ...time, ...buffer });\n        }\n\n        return core.getState();\n      },\n      getPercent: () => (duration > 0 ? ((time?.currentTime ?? 0) / duration) * 100 : 0),\n      getStepPercent: () => core.getStepPercent(),\n      getLargeStepPercent: () => core.getLargeStepPercent(),\n      orientation,\n      disabled,\n      commitThrottle,\n      adjustPercent: (rawPercent, thumbSize, trackSize) =>\n        core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n      getCSSVars: getTimeSliderCSSVars,\n      onValueCommit: (percent) => {\n        const media = mediaRef.current;\n        if (media) media.seek(core.valueFromPercent(percent));\n      },\n      onDragStart,\n      onDragEnd,\n    });\n\n    if (!time) {\n      if (__DEV__) logMissingFeature('TimeSlider', 'time');\n      return null;\n    }\n\n    return (\n      <SliderProvider\n        value={{\n          state,\n          pointerValue: core.valueFromPercent(state.pointerPercent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: TimeSliderDataAttrs,\n          getAttrs: (sliderState) => core.getAttrs(sliderState as TimeSliderCore.State),\n          formatValue: (value) => formatTime(value, duration),\n        }}\n      >\n        {renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            stateAttrMap: TimeSliderDataAttrs,\n            ref: [forwardedRef, rootRef],\n            props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n          }\n        )}\n      </SliderProvider>\n    );\n  }\n);\n\nexport namespace TimeSliderRoot {\n  export type Props = TimeSliderRootProps;\n  export type State = TimeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,iBAAkC,QAAQ,QAAQ,EAAE;AAO1D,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,cAAc;CACpD,MAAM,EACJ,QACA,WACA,OACA,OACA,iBAAiB,eAAe,aAAa,gBAC7C,OAAO,eAAe,aAAa,MACnC,YAAY,eAAe,aAAa,WACxC,aACA,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,OAAO,UAAU,WAAW;CAClC,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAM;EAAW;EAAa;EAAU;EAAgB,CAAC;CAGhF,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;EAAQ,GAAG,KAAK;CAE7E,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eAAe,UAAgC;EAC9G,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,OAAI,CAAC,QAAQ,CAAC,OACZ,MAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,EAAE;IACZ,UAAU,EAAE;IACb,CAAC;OAEF,MAAK,SAAS;IAAE,GAAG;IAAM,GAAG;IAAQ,CAAC;AAGvC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,WAAW,KAAM,MAAM,eAAe,KAAK,WAAY,MAAM;EAChF,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;AACvB,OAAI,MAAO,OAAM,KAAK,KAAK,iBAAiB,QAAQ,CAAC;;EAEvD;EACA;EACD,CAAC;AAEF,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;AAGT,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAoC;GAC7E,cAAc,UAAU,WAAW,OAAO,SAAS;GACpD;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;GACc;EAGtB"}