@videojs/react 10.0.0-alpha.9 → 10.0.0-beta.10

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

@@ -3,7 +3,7 @@
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useTooltipContext } from "./context.js";
-import { getAnchorPositionStyle, resolveOffsets } from "@videojs/core/dom";
+import { getAnchorPositionStyle, getPopupPositionRect, resolveOffsets } from "@videojs/core/dom";
 import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { TooltipCSSVars } from "@videojs/core";
 import { supportsAnchorPositioning } from "@videojs/utils/dom";
@@ -42,14 +42,22 @@ const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style
 			const triggerEl = tooltip.triggerElement;
 			const popupEl = internalRef.current;
 			if (!triggerEl || !popupEl) return;
-			setManualStyle(getAnchorPositionStyle(anchorName, posOpts, triggerEl.getBoundingClientRect(), popupEl.getBoundingClientRect(), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl, TooltipCSSVars), TooltipCSSVars));
+			setManualStyle(getAnchorPositionStyle(anchorName, posOpts, triggerEl.getBoundingClientRect(), getPopupPositionRect(popupEl), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl, TooltipCSSVars), TooltipCSSVars));
 		}
 		measure();
+		const triggerEl = tooltip.triggerElement;
+		const popupEl = internalRef.current;
 		let rafId = 0;
 		function reposition() {
 			cancelAnimationFrame(rafId);
 			rafId = requestAnimationFrame(measure);
 		}
+		reposition();
+		const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(() => {
+			reposition();
+		}) : null;
+		if (triggerEl && resizeObserver) resizeObserver.observe(triggerEl);
+		if (popupEl && resizeObserver) resizeObserver.observe(popupEl);
 		window.addEventListener("scroll", reposition, {
 			capture: true,
 			passive: true
@@ -57,6 +65,7 @@ const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style
 		window.addEventListener("resize", reposition);
 		return () => {
 			cancelAnimationFrame(rafId);
+			resizeObserver?.disconnect();
 			window.removeEventListener("scroll", reposition, true);
 			window.removeEventListener("resize", reposition);
 		};

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip-popup.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { TooltipState } from '@videojs/core';\nimport { TooltipCSSVars } 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 { useTooltipContext } from './context';\n\nexport interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}\n\nconst POPUP_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopupProps>(function TooltipPopup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, tooltip, state, stateAttrMap, anchorName, popupId } = useTooltipContext();\n  const internalRef = useRef<HTMLDivElement>(null);\n\n  const popupRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      tooltip.setPopupElement(el);\n      if (el && supportsAnchorPositioning()) {\n        el.style.setProperty('position-anchor', `--${anchorName}`);\n      }\n    },\n    [tooltip, 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(\n      anchorName,\n      posOpts,\n      undefined,\n      undefined,\n      undefined,\n      undefined,\n      TooltipCSSVars\n    );\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 = tooltip.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, TooltipCSSVars);\n\n      setManualStyle(\n        getAnchorPositionStyle(\n          anchorName,\n          posOpts,\n          triggerRect,\n          popupRect,\n          boundaryRect,\n          offsets,\n          TooltipCSSVars\n        ) as CSSProperties\n      );\n    }\n\n    measure();\n\n    // Recompute on scroll/resize so the tooltip 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, tooltip]);\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 ?? POPUP_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 } = tooltip.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 TooltipPopup {\n  export type Props = TooltipPopupProps;\n  export type State = TooltipState;\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAM,cAA6B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGlF,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,uBACrC,YACA,SACA,QACA,QACA,QACA,QACA,eACD;AACD,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,uBACE,YACA,SARgB,UAAU,uBAAuB,EACnC,QAAQ,uBAAuB,EAC5B,SAAS,gBAAgB,uBAAuB,EACrD,eAAe,SAAS,eAAe,EAUnD,eACD,CACF;;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":"tooltip-popup.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { TooltipState } from '@videojs/core';\nimport { TooltipCSSVars } from '@videojs/core';\nimport { getAnchorPositionStyle, getPopupPositionRect, 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 { useTooltipContext } from './context';\n\nexport interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}\n\nconst POPUP_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopupProps>(function TooltipPopup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, tooltip, state, stateAttrMap, anchorName, popupId } = useTooltipContext();\n  const internalRef = useRef<HTMLDivElement>(null);\n\n  const popupRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      tooltip.setPopupElement(el);\n      if (el && supportsAnchorPositioning()) {\n        el.style.setProperty('position-anchor', `--${anchorName}`);\n      }\n    },\n    [tooltip, 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(\n      anchorName,\n      posOpts,\n      undefined,\n      undefined,\n      undefined,\n      undefined,\n      TooltipCSSVars\n    );\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 = tooltip.triggerElement;\n      const popupEl = internalRef.current;\n      if (!triggerEl || !popupEl) return;\n\n      const triggerRect = triggerEl.getBoundingClientRect();\n      const popupRect = getPopupPositionRect(popupEl);\n      const boundaryRect = document.documentElement.getBoundingClientRect();\n      const offsets = resolveOffsets(popupEl, TooltipCSSVars);\n\n      setManualStyle(\n        getAnchorPositionStyle(\n          anchorName,\n          posOpts,\n          triggerRect,\n          popupRect,\n          boundaryRect,\n          offsets,\n          TooltipCSSVars\n        ) as CSSProperties\n      );\n    }\n\n    measure();\n    const triggerEl = tooltip.triggerElement;\n    const popupEl = internalRef.current;\n\n    let rafId = 0;\n    function reposition(): void {\n      cancelAnimationFrame(rafId);\n      rafId = requestAnimationFrame(measure);\n    }\n\n    // Re-measure after the tooltip has entered the top layer and whenever\n    // its own size or the trigger size changes.\n    reposition();\n\n    const resizeObserver =\n      typeof ResizeObserver === 'function'\n        ? new ResizeObserver(() => {\n            reposition();\n          })\n        : null;\n\n    if (triggerEl && resizeObserver) {\n      resizeObserver.observe(triggerEl);\n    }\n\n    if (popupEl && resizeObserver) {\n      resizeObserver.observe(popupEl);\n    }\n\n    window.addEventListener('scroll', reposition, { capture: true, passive: true });\n    window.addEventListener('resize', reposition);\n\n    return () => {\n      cancelAnimationFrame(rafId);\n      resizeObserver?.disconnect();\n      window.removeEventListener('scroll', reposition, true);\n      window.removeEventListener('resize', reposition);\n    };\n  }, [state.open, anchorName, posOpts, tooltip]);\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 ?? POPUP_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 } = tooltip.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 TooltipPopup {\n  export type Props = TooltipPopupProps;\n  export type State = TooltipState;\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAM,cAA6B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGlF,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,uBACrC,YACA,SACA,QACA,QACA,QACA,QACA,eACD;AACD,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,uBACE,YACA,SARgB,UAAU,uBAAuB,EACnC,qBAAqB,QAAQ,EAC1B,SAAS,gBAAgB,uBAAuB,EACrD,eAAe,SAAS,eAAe,EAUnD,eACD,CACF;;AAGH,WAAS;EACT,MAAM,YAAY,QAAQ;EAC1B,MAAM,UAAU,YAAY;EAE5B,IAAI,QAAQ;EACZ,SAAS,aAAmB;AAC1B,wBAAqB,MAAM;AAC3B,WAAQ,sBAAsB,QAAQ;;AAKxC,cAAY;EAEZ,MAAM,iBACJ,OAAO,mBAAmB,aACtB,IAAI,qBAAqB;AACvB,eAAY;IACZ,GACF;AAEN,MAAI,aAAa,eACf,gBAAe,QAAQ,UAAU;AAGnC,MAAI,WAAW,eACb,gBAAe,QAAQ,QAAQ;AAGjC,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,MAAM;AAC3B,mBAAgB,YAAY;AAC5B,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/tooltip/tooltip-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-root.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-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,KAAA;EACA,UAAA;EACA,qBAAA;EACA,QAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,gBAAA,GAAmB,SAAA;AAAA,kBAyEL,WAAA;EAAA,KACH,KAAA,GAAQ,gBAAA;AAAA"}
+{"version":3,"file":"tooltip-root.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-root.tsx"],"mappings":";;;;;UAciB,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,KAAA;EACA,UAAA;EACA,qBAAA;EACA,QAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,gBAAA,GAAmB,SAAA;AAAA,kBAwEL,WAAA;EAAA,KACH,KAAA,GAAQ,gBAAA;AAAA"}

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useDestroy } from "../../utils/use-destroy.js";
 import { useSafeId } from "../../utils/use-safe-id.js";
 import { TooltipContextProvider } from "./context.js";
 import { useTooltipGroup } from "./group-context.js";
@@ -50,7 +51,7 @@ function TooltipRoot({ open: controlledOpen, defaultOpen = TooltipCore.defaultPr
 		if (controlledOpen) tooltip.open();
 		else tooltip.close();
 	}, [controlledOpen, tooltip]);
-	useEffect(() => () => tooltip.destroy(), [tooltip]);
+	useDestroy(tooltip);
 	const input = useSnapshot(tooltip.input);
 	core.setInput(input);
 	return /* @__PURE__ */ jsx(TooltipContextProvider, {

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip-root.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-root.tsx"],"sourcesContent":["'use client';\n\nimport { type TooltipProps as CoreTooltipProps, TooltipCore, TooltipDataAttrs } from '@videojs/core';\nimport { createTooltip, createTransition, type TooltipChangeDetails } 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 { TooltipContextProvider } from './context';\nimport { useTooltipGroup } from './group-context';\n\nexport interface TooltipRootProps extends CoreTooltipProps {\n  /** Called when the tooltip open state changes (fires immediately, before animations). */\n  onOpenChange?: (open: boolean, details: TooltipChangeDetails) => void;\n  /** Called after open/close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function TooltipRoot({\n  open: controlledOpen,\n  defaultOpen = TooltipCore.defaultProps.defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  delay = TooltipCore.defaultProps.delay,\n  closeDelay = TooltipCore.defaultProps.closeDelay,\n  disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup,\n  disabled = TooltipCore.defaultProps.disabled,\n  children,\n  ...coreProps\n}: TooltipRootProps): ReactNode {\n  const [core] = useState(() => new TooltipCore(coreProps));\n  core.setProps(coreProps);\n\n  const isControlled = controlledOpen !== undefined;\n\n  const groupFromContext = useTooltipGroup();\n\n  // Keep refs that always point to the latest values so the\n  // createTooltip closure never reads stale props.\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n  const delayRef = useLatestRef(delay);\n  const closeDelayRef = useLatestRef(closeDelay);\n  const disableHoverablePopupRef = useLatestRef(disableHoverablePopup);\n  const disabledRef = useLatestRef(disabled);\n  const groupRef = useLatestRef(groupFromContext);\n\n  const [tooltip] = useState(() => {\n    const instance = createTooltip({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n        onOpenChangeRef.current?.(nextOpen, details);\n      },\n      onOpenChangeComplete: (nextOpen: boolean) => {\n        onOpenChangeCompleteRef.current?.(nextOpen);\n      },\n      delay: () => delayRef.current,\n      closeDelay: () => closeDelayRef.current,\n      disableHoverablePopup: () => disableHoverablePopupRef.current,\n      disabled: () => disabledRef.current,\n      group: () => groupRef.current,\n    });\n\n    // Apply defaultOpen on creation (uncontrolled only)\n    if (!isControlled && defaultOpen) {\n      instance.open();\n    }\n\n    return instance;\n  });\n\n  const anchorName = useSafeId();\n  const popupId = useSafeId('tooltip-');\n\n  // Sync controlled open prop -> internal input state.\n  useEffect(() => {\n    if (controlledOpen === undefined) return;\n\n    const { active: inputOpen } = tooltip.input.current;\n    if (controlledOpen === inputOpen) return;\n\n    if (controlledOpen) {\n      tooltip.open();\n    } else {\n      tooltip.close();\n    }\n  }, [controlledOpen, tooltip]);\n\n  // Cleanup on unmount\n  useEffect(() => () => tooltip.destroy(), [tooltip]);\n\n  const input = useSnapshot(tooltip.input);\n  core.setInput(input);\n  const state = core.getState();\n\n  return (\n    <TooltipContextProvider value={{ core, tooltip, state, stateAttrMap: TooltipDataAttrs, anchorName, popupId }}>\n      {children}\n    </TooltipContextProvider>\n  );\n}\n\nexport namespace TooltipRoot {\n  export type Props = TooltipRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;AAqBA,SAAgB,YAAY,EAC1B,MAAM,gBACN,cAAc,YAAY,aAAa,aACvC,cAAc,kBACd,sBAAsB,0BACtB,QAAQ,YAAY,aAAa,OACjC,aAAa,YAAY,aAAa,YACtC,wBAAwB,YAAY,aAAa,uBACjD,WAAW,YAAY,aAAa,UACpC,UACA,GAAG,aAC2B;CAC9B,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,UAAU,CAAC;AACzD,MAAK,SAAS,UAAU;CAExB,MAAM,eAAe,mBAAmB;CAExC,MAAM,mBAAmB,iBAAiB;CAI1C,MAAM,kBAAkB,aAAa,iBAAiB;CACtD,MAAM,0BAA0B,aAAa,yBAAyB;CACtE,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,gBAAgB,aAAa,WAAW;CAC9C,MAAM,2BAA2B,aAAa,sBAAsB;CACpE,MAAM,cAAc,aAAa,SAAS;CAC1C,MAAM,WAAW,aAAa,iBAAiB;CAE/C,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,aAAa,SAAS;GACtB,kBAAkB,cAAc;GAChC,6BAA6B,yBAAyB;GACtD,gBAAgB,YAAY;GAC5B,aAAa,SAAS;GACvB,CAAC;AAGF,MAAI,CAAC,gBAAgB,YACnB,UAAS,MAAM;AAGjB,SAAO;GACP;CAEF,MAAM,aAAa,WAAW;CAC9B,MAAM,UAAU,UAAU,WAAW;AAGrC,iBAAgB;AACd,MAAI,mBAAmB,OAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;AAC5C,MAAI,mBAAmB,UAAW;AAElC,MAAI,eACF,SAAQ,MAAM;MAEd,SAAQ,OAAO;IAEhB,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":"tooltip-root.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-root.tsx"],"sourcesContent":["'use client';\n\nimport { type TooltipProps as CoreTooltipProps, TooltipCore, TooltipDataAttrs } from '@videojs/core';\nimport { createTooltip, createTransition, type TooltipChangeDetails } 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 { TooltipContextProvider } from './context';\nimport { useTooltipGroup } from './group-context';\n\nexport interface TooltipRootProps extends CoreTooltipProps {\n  /** Called when the tooltip open state changes (fires immediately, before animations). */\n  onOpenChange?: (open: boolean, details: TooltipChangeDetails) => void;\n  /** Called after open/close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function TooltipRoot({\n  open: controlledOpen,\n  defaultOpen = TooltipCore.defaultProps.defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  delay = TooltipCore.defaultProps.delay,\n  closeDelay = TooltipCore.defaultProps.closeDelay,\n  disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup,\n  disabled = TooltipCore.defaultProps.disabled,\n  children,\n  ...coreProps\n}: TooltipRootProps): ReactNode {\n  const [core] = useState(() => new TooltipCore(coreProps));\n  core.setProps(coreProps);\n\n  const isControlled = controlledOpen !== undefined;\n\n  const groupFromContext = useTooltipGroup();\n\n  // Keep refs that always point to the latest values so the\n  // createTooltip closure never reads stale props.\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n  const delayRef = useLatestRef(delay);\n  const closeDelayRef = useLatestRef(closeDelay);\n  const disableHoverablePopupRef = useLatestRef(disableHoverablePopup);\n  const disabledRef = useLatestRef(disabled);\n  const groupRef = useLatestRef(groupFromContext);\n\n  const [tooltip] = useState(() => {\n    const instance = createTooltip({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n        onOpenChangeRef.current?.(nextOpen, details);\n      },\n      onOpenChangeComplete: (nextOpen: boolean) => {\n        onOpenChangeCompleteRef.current?.(nextOpen);\n      },\n      delay: () => delayRef.current,\n      closeDelay: () => closeDelayRef.current,\n      disableHoverablePopup: () => disableHoverablePopupRef.current,\n      disabled: () => disabledRef.current,\n      group: () => groupRef.current,\n    });\n\n    // Apply defaultOpen on creation (uncontrolled only)\n    if (!isControlled && defaultOpen) {\n      instance.open();\n    }\n\n    return instance;\n  });\n\n  const anchorName = useSafeId();\n  const popupId = useSafeId('tooltip-');\n\n  // Sync controlled open prop -> internal input state.\n  useEffect(() => {\n    if (controlledOpen === undefined) return;\n\n    const { active: inputOpen } = tooltip.input.current;\n    if (controlledOpen === inputOpen) return;\n\n    if (controlledOpen) {\n      tooltip.open();\n    } else {\n      tooltip.close();\n    }\n  }, [controlledOpen, tooltip]);\n\n  useDestroy(tooltip);\n\n  const input = useSnapshot(tooltip.input);\n  core.setInput(input);\n  const state = core.getState();\n\n  return (\n    <TooltipContextProvider value={{ core, tooltip, state, stateAttrMap: TooltipDataAttrs, anchorName, popupId }}>\n      {children}\n    </TooltipContextProvider>\n  );\n}\n\nexport namespace TooltipRoot {\n  export type Props = TooltipRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;AAsBA,SAAgB,YAAY,EAC1B,MAAM,gBACN,cAAc,YAAY,aAAa,aACvC,cAAc,kBACd,sBAAsB,0BACtB,QAAQ,YAAY,aAAa,OACjC,aAAa,YAAY,aAAa,YACtC,wBAAwB,YAAY,aAAa,uBACjD,WAAW,YAAY,aAAa,UACpC,UACA,GAAG,aAC2B;CAC9B,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,UAAU,CAAC;AACzD,MAAK,SAAS,UAAU;CAExB,MAAM,eAAe,mBAAmB;CAExC,MAAM,mBAAmB,iBAAiB;CAI1C,MAAM,kBAAkB,aAAa,iBAAiB;CACtD,MAAM,0BAA0B,aAAa,yBAAyB;CACtE,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,gBAAgB,aAAa,WAAW;CAC9C,MAAM,2BAA2B,aAAa,sBAAsB;CACpE,MAAM,cAAc,aAAa,SAAS;CAC1C,MAAM,WAAW,aAAa,iBAAiB;CAE/C,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,aAAa,SAAS;GACtB,kBAAkB,cAAc;GAChC,6BAA6B,yBAAyB;GACtD,gBAAgB,YAAY;GAC5B,aAAa,SAAS;GACvB,CAAC;AAGF,MAAI,CAAC,gBAAgB,YACnB,UAAS,MAAM;AAGjB,SAAO;GACP;CAEF,MAAM,aAAa,WAAW;CAC9B,MAAM,UAAU,UAAU,WAAW;AAGrC,iBAAgB;AACd,MAAI,mBAAmB,OAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;AAC5C,MAAI,mBAAmB,UAAW;AAElC,MAAI,eACF,SAAQ,MAAM;MAEd,SAAQ,OAAO;IAEhB,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/volume-slider/index.parts.d.ts

@@ -3,7 +3,6 @@ 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 { VolumeSliderRoot, VolumeSliderRootProps } from "./volume-slider-root.js";
 
 //#region src/ui/volume-slider/index.parts.d.ts

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

@@ -1,14 +1,14 @@
 'use client';
 
 import { usePlayer } from "../../player/context.js";
-import { renderElement } from "../../utils/use-render.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { renderElement } from "../../utils/use-render.js";
 import { useSlider } from "../hooks/use-slider.js";
 import { SliderProvider } from "../slider/context.js";
 import { getSliderCSSVars, logMissingFeature, selectVolume } from "@videojs/core/dom";
 import { forwardRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { SliderDataAttrs, VolumeSliderCore } from "@videojs/core";
+import { VolumeSliderCore, VolumeSliderDataAttrs } from "@videojs/core";
 
 //#region src/ui/volume-slider/volume-slider-root.tsx
 const noopVolume = {
@@ -31,7 +31,7 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 		thumbAlignment
 	});
 	const volumeRef = useLatestRef(volume);
-	const { state, cssVars, rootRef, thumbRef, rootProps, thumbProps } = useSlider({
+	const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
 		computeState: (input) => {
 			core.setInput(input);
 			core.setMedia(volume ?? noopVolume);
@@ -63,7 +63,7 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 			pointerValue: core.valueFromPercent(state.pointerPercent),
 			thumbRef,
 			thumbProps,
-			stateAttrMap: SliderDataAttrs,
+			stateAttrMap: VolumeSliderDataAttrs,
 			getAttrs: (sliderState) => core.getAttrs(sliderState),
 			formatValue: (value) => `${Math.round(value)}%`
 		},
@@ -73,10 +73,13 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 			style
 		}, {
 			state,
-			stateAttrMap: SliderDataAttrs,
+			stateAttrMap: VolumeSliderDataAttrs,
 			ref: [forwardedRef, rootRef],
 			props: [
-				{ style: cssVars },
+				{ style: {
+					...cssVars,
+					...rootStyle
+				} },
 				rootProps,
 				elementProps
 			]

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

@@ -1 +1 @@
-{"version":3,"file":"volume-slider-root.js","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { SliderDataAttrs, VolumeSliderCore } from '@videojs/core';\nimport { getSliderCSSVars, logMissingFeature, selectVolume } from '@videojs/core/dom';\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 noopVolume = {\n  volume: 0,\n  muted: false,\n  volumeAvailability: 'unsupported' as const,\n  setVolume: () => 0,\n  toggleMuted: () => false,\n};\n\nexport interface VolumeSliderRootProps extends UIComponentProps<'div', VolumeSliderCore.State>, VolumeSliderCore.Props {\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const VolumeSliderRoot = forwardRef<HTMLDivElement, VolumeSliderRootProps>(\n  function VolumeSliderRoot(componentProps, forwardedRef) {\n    const {\n      render,\n      className,\n      style,\n      label,\n      orientation,\n      step = VolumeSliderCore.defaultProps.step,\n      largeStep = VolumeSliderCore.defaultProps.largeStep,\n      disabled,\n      thumbAlignment,\n      onDragStart,\n      onDragEnd,\n      ...elementProps\n    } = componentProps;\n\n    const volume = usePlayer(selectVolume);\n\n    const [core] = useState(() => new VolumeSliderCore());\n    core.setProps({ label, orientation, step, largeStep, disabled, thumbAlignment });\n\n    // Keep a ref to the latest volume state for callbacks.\n    const volumeRef = useLatestRef(volume);\n\n    const { state, cssVars, rootRef, thumbRef, rootProps, thumbProps } = useSlider<VolumeSliderCore.State>({\n      computeState: (input) => {\n        core.setInput(input);\n        core.setMedia(volume ?? noopVolume);\n        return core.getState();\n      },\n      getPercent: () => (volume ? volume.volume * 100 : 0),\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) => {\n        volumeRef.current?.setVolume(percent / 100);\n      },\n      onValueCommit: (percent) => {\n        volumeRef.current?.setVolume(percent / 100);\n      },\n      onDragStart,\n      onDragEnd,\n    });\n\n    if (!volume) {\n      if (__DEV__) logMissingFeature('VolumeSlider', 'volume');\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: SliderDataAttrs,\n          getAttrs: (sliderState) => core.getAttrs(sliderState as VolumeSliderCore.State),\n          formatValue: (value) => `${Math.round(value)}%`,\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);\n\nexport namespace VolumeSliderRoot {\n  export type Props = VolumeSliderRootProps;\n  export type State = VolumeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,aAAa;CACjB,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,iBAAiB;CACjB,mBAAmB;CACpB;AAOD,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,gBAAgB,cAAc;CACtD,MAAM,EACJ,QACA,WACA,OACA,OACA,aACA,OAAO,iBAAiB,aAAa,MACrC,YAAY,iBAAiB,aAAa,WAC1C,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,kBAAkB,CAAC;AACrD,MAAK,SAAS;EAAE;EAAO;EAAa;EAAM;EAAW;EAAU;EAAgB,CAAC;CAGhF,MAAM,YAAY,aAAa,OAAO;CAEtC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,eAAe,UAAkC;EACrG,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,QAAK,SAAS,UAAU,WAAW;AACnC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,SAAS,OAAO,SAAS,MAAM;EAClD,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;AAC1B,aAAU,SAAS,UAAU,UAAU,IAAI;;EAE7C,gBAAgB,YAAY;AAC1B,aAAU,SAAS,UAAU,UAAU,IAAI;;EAE7C;EACA;EACD,CAAC;AAEF,KAAI,CAAC,QAAQ;AACE,oBAAkB,gBAAgB,SAAS;AACxD,SAAO;;AAGT,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAsC;GAC/E,cAAc,UAAU,GAAG,KAAK,MAAM,MAAM,CAAC;GAC9C;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":"volume-slider-root.js","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { VolumeSliderCore, VolumeSliderDataAttrs } from '@videojs/core';\nimport { getSliderCSSVars, logMissingFeature, selectVolume } from '@videojs/core/dom';\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 noopVolume = {\n  volume: 0,\n  muted: false,\n  volumeAvailability: 'unsupported' as const,\n  setVolume: () => 0,\n  toggleMuted: () => false,\n};\n\nexport interface VolumeSliderRootProps extends UIComponentProps<'div', VolumeSliderCore.State>, VolumeSliderCore.Props {\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const VolumeSliderRoot = forwardRef<HTMLDivElement, VolumeSliderRootProps>(\n  function VolumeSliderRoot(componentProps, forwardedRef) {\n    const {\n      render,\n      className,\n      style,\n      label,\n      orientation,\n      step = VolumeSliderCore.defaultProps.step,\n      largeStep = VolumeSliderCore.defaultProps.largeStep,\n      disabled,\n      thumbAlignment,\n      onDragStart,\n      onDragEnd,\n      ...elementProps\n    } = componentProps;\n\n    const volume = usePlayer(selectVolume);\n\n    const [core] = useState(() => new VolumeSliderCore());\n    core.setProps({ label, orientation, step, largeStep, disabled, thumbAlignment });\n\n    // Keep a ref to the latest volume state for callbacks.\n    const volumeRef = useLatestRef(volume);\n\n    const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider<VolumeSliderCore.State>({\n      computeState: (input) => {\n        core.setInput(input);\n        core.setMedia(volume ?? noopVolume);\n        return core.getState();\n      },\n      getPercent: () => (volume ? volume.volume * 100 : 0),\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) => {\n        volumeRef.current?.setVolume(percent / 100);\n      },\n      onValueCommit: (percent) => {\n        volumeRef.current?.setVolume(percent / 100);\n      },\n      onDragStart,\n      onDragEnd,\n    });\n\n    if (!volume) {\n      if (__DEV__) logMissingFeature('VolumeSlider', 'volume');\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: VolumeSliderDataAttrs,\n          getAttrs: (sliderState) => core.getAttrs(sliderState as VolumeSliderCore.State),\n          formatValue: (value) => `${Math.round(value)}%`,\n        }}\n      >\n        {renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            stateAttrMap: VolumeSliderDataAttrs,\n            ref: [forwardedRef, rootRef],\n            props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n          }\n        )}\n      </SliderProvider>\n    );\n  }\n);\n\nexport namespace VolumeSliderRoot {\n  export type Props = VolumeSliderRootProps;\n  export type State = VolumeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,aAAa;CACjB,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,iBAAiB;CACjB,mBAAmB;CACpB;AAOD,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,gBAAgB,cAAc;CACtD,MAAM,EACJ,QACA,WACA,OACA,OACA,aACA,OAAO,iBAAiB,aAAa,MACrC,YAAY,iBAAiB,aAAa,WAC1C,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,kBAAkB,CAAC;AACrD,MAAK,SAAS;EAAE;EAAO;EAAa;EAAM;EAAW;EAAU;EAAgB,CAAC;CAGhF,MAAM,YAAY,aAAa,OAAO;CAEtC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eAAe,UAAkC;EAChH,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,QAAK,SAAS,UAAU,WAAW;AACnC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,SAAS,OAAO,SAAS,MAAM;EAClD,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;AAC1B,aAAU,SAAS,UAAU,UAAU,IAAI;;EAE7C,gBAAgB,YAAY;AAC1B,aAAU,SAAS,UAAU,UAAU,IAAI;;EAE7C;EACA;EACD,CAAC;AAEF,KAAI,CAAC,QAAQ;AACE,oBAAkB,gBAAgB,SAAS;AACxD,SAAO;;AAGT,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAsC;GAC/E,cAAc,UAAU,GAAG,KAAK,MAAM,MAAM,CAAC;GAC9C;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"}

package/dist/dev/utils/use-destroy.js

@@ -1,5 +1,6 @@
 'use client';
 
+import { useLatestRef } from "./use-latest-ref.js";
 import { useEffect, useRef } from "react";
 
 //#region src/utils/use-destroy.ts
@@ -14,18 +15,25 @@ import { useEffect, useRef } from "react";
 * @param instance - Object with a `destroy()` method.
 * @param setup - Optional setup called on first mount. Skipped on StrictMode
 *   re-mount since the previous setup was never torn down.
+* @param teardown - Optional teardown called right before `destroy()` on real
+*   unmount. Skipped on StrictMode simulated unmount.
 */
-function useDestroy(instance, setup) {
+function useDestroy(instance, setup, teardown) {
 	const pendingRef = useRef(null);
+	const setupRef = useLatestRef(setup);
+	const teardownRef = useLatestRef(teardown);
 	useEffect(() => {
 		if (pendingRef.current !== null) {
 			clearTimeout(pendingRef.current);
 			pendingRef.current = null;
-		} else setup?.();
+		} else setupRef.current?.();
 		return () => {
-			pendingRef.current = setTimeout(() => instance.destroy(), 0);
+			pendingRef.current = setTimeout(() => {
+				teardownRef.current?.();
+				instance.destroy();
+			}, 0);
 		};
-	}, [instance, setup]);
+	}, [instance]);
 }
 
 //#endregion

package/dist/dev/utils/use-destroy.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-destroy.js","names":[],"sources":["../../../src/utils/use-destroy.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\n\ninterface Destroyable {\n  destroy(): void;\n}\n\n/**\n * Destroy an instance on unmount, deferring destruction to survive React\n * StrictMode's simulated unmount/re-mount cycle.\n *\n * StrictMode runs effects, then immediately runs cleanup, then re-runs\n * effects — all synchronously. By deferring `destroy()` to a macrotask,\n * the re-mount effect can cancel it before it fires.\n *\n * @param instance - Object with a `destroy()` method.\n * @param setup - Optional setup called on first mount. Skipped on StrictMode\n *   re-mount since the previous setup was never torn down.\n */\nexport function useDestroy(instance: Destroyable, setup?: () => void): void {\n  const pendingRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (pendingRef.current !== null) {\n      clearTimeout(pendingRef.current);\n      pendingRef.current = null;\n    } else {\n      setup?.();\n    }\n\n    return () => {\n      pendingRef.current = setTimeout(() => instance.destroy(), 0);\n    };\n  }, [instance, setup]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,SAAgB,WAAW,UAAuB,OAA0B;CAC1E,MAAM,aAAa,OAA6C,KAAK;AAErE,iBAAgB;AACd,MAAI,WAAW,YAAY,MAAM;AAC/B,gBAAa,WAAW,QAAQ;AAChC,cAAW,UAAU;QAErB,UAAS;AAGX,eAAa;AACX,cAAW,UAAU,iBAAiB,SAAS,SAAS,EAAE,EAAE;;IAE7D,CAAC,UAAU,MAAM,CAAC"}
+{"version":3,"file":"use-destroy.js","names":[],"sources":["../../../src/utils/use-destroy.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\n\nimport { useLatestRef } from './use-latest-ref';\n\ninterface Destroyable {\n  destroy(): void;\n}\n\n/**\n * Destroy an instance on unmount, deferring destruction to survive React\n * StrictMode's simulated unmount/re-mount cycle.\n *\n * StrictMode runs effects, then immediately runs cleanup, then re-runs\n * effects — all synchronously. By deferring `destroy()` to a macrotask,\n * the re-mount effect can cancel it before it fires.\n *\n * @param instance - Object with a `destroy()` method.\n * @param setup - Optional setup called on first mount. Skipped on StrictMode\n *   re-mount since the previous setup was never torn down.\n * @param teardown - Optional teardown called right before `destroy()` on real\n *   unmount. Skipped on StrictMode simulated unmount.\n */\nexport function useDestroy(instance: Destroyable, setup?: () => void, teardown?: () => void): void {\n  const pendingRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const setupRef = useLatestRef(setup);\n  const teardownRef = useLatestRef(teardown);\n\n  useEffect(() => {\n    if (pendingRef.current !== null) {\n      clearTimeout(pendingRef.current);\n      pendingRef.current = null;\n    } else {\n      setupRef.current?.();\n    }\n\n    return () => {\n      pendingRef.current = setTimeout(() => {\n        teardownRef.current?.();\n        instance.destroy();\n      }, 0);\n    };\n  }, [instance]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwBA,SAAgB,WAAW,UAAuB,OAAoB,UAA6B;CACjG,MAAM,aAAa,OAA6C,KAAK;CACrE,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,cAAc,aAAa,SAAS;AAE1C,iBAAgB;AACd,MAAI,WAAW,YAAY,MAAM;AAC/B,gBAAa,WAAW,QAAQ;AAChC,cAAW,UAAU;QAErB,UAAS,WAAW;AAGtB,eAAa;AACX,cAAW,UAAU,iBAAiB;AACpC,gBAAY,WAAW;AACvB,aAAS,SAAS;MACjB,EAAE;;IAEN,CAAC,SAAS,CAAC"}

package/dist/dev/utils/use-media-instance.js

@@ -0,0 +1,24 @@
+'use client';
+
+import { useMediaAttach } from "../player/context.js";
+import { useDestroy } from "./use-destroy.js";
+import { useState } from "react";
+
+//#region src/utils/use-media-instance.ts
+/**
+* Create and manage a media instance lifecycle within a player context.
+*
+* Instantiates the media class once, attaches it to the player on mount,
+* and safely detaches on unmount using a functional updater to avoid race
+* conditions when swapping media components (e.g. DashVideo → HlsVideo).
+*/
+function useMediaInstance(MediaClass) {
+	const [instance] = useState(() => new MediaClass());
+	const setMedia = useMediaAttach();
+	useDestroy(instance, () => setMedia?.(instance), () => setMedia?.((prev) => prev === instance ? null : prev));
+	return instance;
+}
+
+//#endregion
+export { useMediaInstance };
+//# sourceMappingURL=use-media-instance.js.map

package/dist/dev/utils/use-media-instance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-instance.js","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"sourcesContent":["'use client';\n\nimport type { Media } from '@videojs/core/dom';\nimport { useState } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useDestroy } from './use-destroy';\n\n/**\n * Create and manage a media instance lifecycle within a player context.\n *\n * Instantiates the media class once, attaches it to the player on mount,\n * and safely detaches on unmount using a functional updater to avoid race\n * conditions when swapping media components (e.g. DashVideo → HlsVideo).\n */\nexport function useMediaInstance<Instance extends Media & { destroy(): void }>(\n  MediaClass: new () => Instance\n): Instance {\n  const [instance] = useState(() => new MediaClass());\n  const setMedia = useMediaAttach();\n\n  useDestroy(\n    instance,\n    () => setMedia?.(instance),\n    () => setMedia?.((prev) => (prev === instance ? null : prev))\n  );\n\n  return instance;\n}\n"],"mappings":";;;;;;;;;;;;;;AAeA,SAAgB,iBACd,YACU;CACV,MAAM,CAAC,YAAY,eAAe,IAAI,YAAY,CAAC;CACnD,MAAM,WAAW,gBAAgB;AAEjC,YACE,gBACM,WAAW,SAAS,QACpB,YAAY,SAAU,SAAS,WAAW,OAAO,KAAM,CAC9D;AAED,QAAO"}

package/dist/dev/utils/use-render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-render.d.ts","names":[],"sources":["../../../src/utils/use-render.tsx"],"mappings":";;;;;KAUK,gBAAA,SAAyB,KAAA,CAAM,GAAA,CAAI,iBAAA;AAAA,UAEvB,uBAAA;EACf,SAAA,cAAuB,KAAA,EAAO,KAAA;EAC9B,KAAA,GAAQ,aAAA,KAAkB,KAAA,EAAO,KAAA,KAAU,aAAA;EAC3C,MAAA,GAAS,UAAA,CAAW,KAAA;AAAA;AAAA,UAGL,mBAAA,oCAAuD,OAAA;EACtE,KAAA,EAAO,KAAA;EACP,GAAA,GAAM,GAAA,CAAI,mBAAA,IAAuB,GAAA,CAAI,mBAAA;EACrC,KAAA;EACA,YAAA,GAAe,YAAA,CAAa,KAAA;AAAA;;;;;;;;;;;;;;;;;;;;;iBA4Cd,aAAA,mDAEc,OAAA,kBACZ,gBAAA,CAAA,CAEhB,OAAA,EAAS,OAAA,EACT,cAAA,EAAgB,uBAAA,CAAwB,KAAA,GACxC,MAAA,EAAQ,mBAAA,CAAoB,KAAA,EAAO,mBAAA,IAClC,YAAA;AAAA,kBAgDc,aAAA;EAAA,KACH,cAAA,UAAwB,uBAAA,CAAwB,KAAA;EAAA,KAChD,UAAA,oCAA8C,OAAA,IAAW,mBAAA,CAAoB,KAAA,EAAO,mBAAA;AAAA"}
+{"version":3,"file":"use-render.d.ts","names":[],"sources":["../../../src/utils/use-render.tsx"],"mappings":";;;;;KAeK,gBAAA,SAAyB,KAAA,CAAM,GAAA,CAAI,iBAAA;AAAA,UAEvB,uBAAA;EACf,SAAA,cAAuB,KAAA,EAAO,KAAA;EAC9B,KAAA,GAAQ,aAAA,KAAkB,KAAA,EAAO,KAAA,KAAU,aAAA;EAC3C,MAAA,GAAS,UAAA,CAAW,KAAA;AAAA;AAAA,UAGL,mBAAA,oCAAuD,OAAA;EACtE,KAAA,EAAO,KAAA;EACP,GAAA,GAAM,GAAA,CAAI,mBAAA,IAAuB,GAAA,CAAI,mBAAA;EACrC,KAAA;EACA,YAAA,GAAe,YAAA,CAAa,KAAA;AAAA;;;;;;;;;;;;;;;;;;;;;iBA4Cd,aAAA,mDAEc,OAAA,kBACZ,gBAAA,CAAA,CAEhB,OAAA,EAAS,OAAA,EACT,cAAA,EAAgB,uBAAA,CAAwB,KAAA,GACxC,MAAA,EAAQ,mBAAA,CAAoB,KAAA,EAAO,mBAAA,IAClC,YAAA;AAAA,kBAgDc,aAAA;EAAA,KACH,cAAA,UAAwB,uBAAA,CAAwB,KAAA;EAAA,KAChD,UAAA,oCAA8C,OAAA,IAAW,mBAAA,CAAoB,KAAA,EAAO,mBAAA;AAAA"}

package/dist/dev/utils/use-render.js

@@ -7,6 +7,10 @@ import { cloneElement, createElement, isValidElement } from "react";
 import { isFunction } from "@videojs/utils/predicate";
 
 //#region src/utils/use-render.tsx
+/** Check if a value is a render prop (function or React element). */
+function isRenderProp(value) {
+	return isFunction(value) || isValidElement(value);
+}
 function resolveClassName(className, state) {
 	return isFunction(className) ? className(state) : className;
 }
@@ -67,5 +71,5 @@ function renderElement(element, componentProps, params) {
 }
 
 //#endregion
-export { renderElement };
+export { isRenderProp, renderElement };
 //# sourceMappingURL=use-render.js.map

package/dist/dev/utils/use-render.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-render.js","names":[],"sources":["../../../src/utils/use-render.tsx"],"sourcesContent":["'use client';\n\nimport { getStateDataAttrs, type StateAttrMap } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ReactElement, Ref } from 'react';\nimport { cloneElement, createElement, isValidElement } from 'react';\nimport { mergeProps } from './merge-props';\nimport type { HTMLProps, RenderProp } from './types';\nimport { composeRefs } from './use-composed-refs';\n\ntype IntrinsicTagName = keyof React.JSX.IntrinsicElements;\n\nexport interface UseRenderComponentProps<State> {\n  className?: string | ((state: State) => string | undefined) | undefined;\n  style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined;\n  render?: RenderProp<State> | undefined;\n}\n\nexport interface UseRenderParameters<State, RenderedElementType extends Element> {\n  state: State;\n  ref?: Ref<RenderedElementType> | Ref<RenderedElementType>[] | undefined;\n  props?: object | object[] | undefined;\n  stateAttrMap?: StateAttrMap<State> | undefined;\n}\n\nfunction resolveClassName<State>(\n  className: string | ((state: State) => string | undefined) | undefined,\n  state: State\n): string | undefined {\n  return isFunction(className) ? className(state) : className;\n}\n\nfunction resolveStyle<State>(\n  style: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined,\n  state: State\n): CSSProperties | undefined {\n  return isFunction(style) ? style(state) : style;\n}\n\nfunction getElementRef(element: ReactElement): Ref<unknown> | undefined {\n  // React 19+ uses element.props.ref, older versions use element.ref\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const elementAny = element as any;\n  return elementAny.ref ?? elementAny.props?.ref;\n}\n\n/**\n * Render a UI component element.\n *\n * Handles:\n * - Default tag rendering\n * - Render prop (element or function)\n * - Props merging (event handlers chained, className concatenated, style merged)\n * - Ref composition\n * - className/style as functions of state\n *\n * @public\n * @example\n * ```tsx\n * return renderElement('button', componentProps, {\n *   state,\n *   ref: [forwardedRef, buttonRef],\n *   props: [{ type: 'button' }, elementProps, getButtonProps],\n * });\n * ```\n */\nexport function renderElement<\n  State extends object,\n  RenderedElementType extends Element,\n  TagName extends IntrinsicTagName,\n>(\n  element: TagName,\n  componentProps: UseRenderComponentProps<State>,\n  params: UseRenderParameters<State, RenderedElementType>\n): ReactElement | null {\n  const { className: classNameProp, style: styleProp, render } = componentProps;\n  const { state, ref, props, stateAttrMap } = params;\n\n  // Resolve className and style if they're functions\n  const className = resolveClassName(classNameProp, state);\n  const style = resolveStyle(styleProp, state);\n\n  // Generate data attributes from state\n  const stateDataAttrs = getStateDataAttrs(state, stateAttrMap);\n\n  // Merge: state data attrs first, then props (so props can override)\n  const propsArray = Array.isArray(props) ? props : props ? [props] : [];\n  const mergedProps = mergeProps(stateDataAttrs, ...(propsArray as Record<string, unknown>[]));\n\n  if (className !== undefined) {\n    // Add resolved className and style\n    mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;\n  }\n\n  if (style !== undefined) {\n    mergedProps.style = mergedProps.style ? { ...(mergedProps.style as CSSProperties), ...style } : style;\n  }\n\n  if (isFunction(render)) {\n    // Render function: call with props and state\n    const mergedRef = composeRefs(ref, mergedProps.ref);\n    return render({ ...mergedProps, ref: mergedRef } as HTMLProps, state);\n  }\n\n  if (isValidElement(render)) {\n    const elementRef = getElementRef(render);\n\n    const mergedRef = composeRefs(ref, mergedProps.ref, elementRef);\n\n    const elementProps = mergeProps(mergedProps, render.props as Record<string, unknown>);\n    elementProps.ref = mergedRef;\n\n    return cloneElement(render, elementProps);\n  }\n\n  // Default tag\n  const mergedRef = composeRefs(ref, mergedProps.ref);\n  mergedProps.ref = mergedRef;\n\n  return createElement(element, mergedProps);\n}\n\nexport namespace renderElement {\n  export type ComponentProps<State> = UseRenderComponentProps<State>;\n  export type Parameters<State, RenderedElementType extends Element> = UseRenderParameters<State, RenderedElementType>;\n}\n"],"mappings":";;;;;;;;;AAyBA,SAAS,iBACP,WACA,OACoB;AACpB,QAAO,WAAW,UAAU,GAAG,UAAU,MAAM,GAAG;;AAGpD,SAAS,aACP,OACA,OAC2B;AAC3B,QAAO,WAAW,MAAM,GAAG,MAAM,MAAM,GAAG;;AAG5C,SAAS,cAAc,SAAiD;CAGtE,MAAM,aAAa;AACnB,QAAO,WAAW,OAAO,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;AAuB7C,SAAgB,cAKd,SACA,gBACA,QACqB;CACrB,MAAM,EAAE,WAAW,eAAe,OAAO,WAAW,WAAW;CAC/D,MAAM,EAAE,OAAO,KAAK,OAAO,iBAAiB;CAG5C,MAAM,YAAY,iBAAiB,eAAe,MAAM;CACxD,MAAM,QAAQ,aAAa,WAAW,MAAM;CAO5C,MAAM,cAAc,WAJG,kBAAkB,OAAO,aAAa,EAId,GAD5B,MAAM,QAAQ,MAAM,GAAG,QAAQ,QAAQ,CAAC,MAAM,GAAG,EAAE,CACsB;AAE5F,KAAI,cAAc,OAEhB,aAAY,YAAY,YAAY,YAAY,GAAG,YAAY,UAAU,GAAG,cAAc;AAG5F,KAAI,UAAU,OACZ,aAAY,QAAQ,YAAY,QAAQ;EAAE,GAAI,YAAY;EAAyB,GAAG;EAAO,GAAG;AAGlG,KAAI,WAAW,OAAO,EAAE;EAEtB,MAAM,YAAY,YAAY,KAAK,YAAY,IAAI;AACnD,SAAO,OAAO;GAAE,GAAG;GAAa,KAAK;GAAW,EAAe,MAAM;;AAGvE,KAAI,eAAe,OAAO,EAAE;EAC1B,MAAM,aAAa,cAAc,OAAO;EAExC,MAAM,YAAY,YAAY,KAAK,YAAY,KAAK,WAAW;EAE/D,MAAM,eAAe,WAAW,aAAa,OAAO,MAAiC;AACrF,eAAa,MAAM;AAEnB,SAAO,aAAa,QAAQ,aAAa;;AAK3C,aAAY,MADM,YAAY,KAAK,YAAY,IAAI;AAGnD,QAAO,cAAc,SAAS,YAAY"}
+{"version":3,"file":"use-render.js","names":[],"sources":["../../../src/utils/use-render.tsx"],"sourcesContent":["'use client';\n\nimport { getStateDataAttrs, type StateAttrMap } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ReactElement, Ref } from 'react';\nimport { cloneElement, createElement, isValidElement } from 'react';\nimport { mergeProps } from './merge-props';\nimport type { HTMLProps, RenderProp } from './types';\nimport { composeRefs } from './use-composed-refs';\n\n/** Check if a value is a render prop (function or React element). */\nexport function isRenderProp(value: unknown): value is RenderProp<any> {\n  return isFunction(value) || isValidElement(value);\n}\n\ntype IntrinsicTagName = keyof React.JSX.IntrinsicElements;\n\nexport interface UseRenderComponentProps<State> {\n  className?: string | ((state: State) => string | undefined) | undefined;\n  style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined;\n  render?: RenderProp<State> | undefined;\n}\n\nexport interface UseRenderParameters<State, RenderedElementType extends Element> {\n  state: State;\n  ref?: Ref<RenderedElementType> | Ref<RenderedElementType>[] | undefined;\n  props?: object | object[] | undefined;\n  stateAttrMap?: StateAttrMap<State> | undefined;\n}\n\nfunction resolveClassName<State>(\n  className: string | ((state: State) => string | undefined) | undefined,\n  state: State\n): string | undefined {\n  return isFunction(className) ? className(state) : className;\n}\n\nfunction resolveStyle<State>(\n  style: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined,\n  state: State\n): CSSProperties | undefined {\n  return isFunction(style) ? style(state) : style;\n}\n\nfunction getElementRef(element: ReactElement): Ref<unknown> | undefined {\n  // React 19+ uses element.props.ref, older versions use element.ref\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const elementAny = element as any;\n  return elementAny.ref ?? elementAny.props?.ref;\n}\n\n/**\n * Render a UI component element.\n *\n * Handles:\n * - Default tag rendering\n * - Render prop (element or function)\n * - Props merging (event handlers chained, className concatenated, style merged)\n * - Ref composition\n * - className/style as functions of state\n *\n * @public\n * @example\n * ```tsx\n * return renderElement('button', componentProps, {\n *   state,\n *   ref: [forwardedRef, buttonRef],\n *   props: [{ type: 'button' }, elementProps, getButtonProps],\n * });\n * ```\n */\nexport function renderElement<\n  State extends object,\n  RenderedElementType extends Element,\n  TagName extends IntrinsicTagName,\n>(\n  element: TagName,\n  componentProps: UseRenderComponentProps<State>,\n  params: UseRenderParameters<State, RenderedElementType>\n): ReactElement | null {\n  const { className: classNameProp, style: styleProp, render } = componentProps;\n  const { state, ref, props, stateAttrMap } = params;\n\n  // Resolve className and style if they're functions\n  const className = resolveClassName(classNameProp, state);\n  const style = resolveStyle(styleProp, state);\n\n  // Generate data attributes from state\n  const stateDataAttrs = getStateDataAttrs(state, stateAttrMap);\n\n  // Merge: state data attrs first, then props (so props can override)\n  const propsArray = Array.isArray(props) ? props : props ? [props] : [];\n  const mergedProps = mergeProps(stateDataAttrs, ...(propsArray as Record<string, unknown>[]));\n\n  if (className !== undefined) {\n    // Add resolved className and style\n    mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;\n  }\n\n  if (style !== undefined) {\n    mergedProps.style = mergedProps.style ? { ...(mergedProps.style as CSSProperties), ...style } : style;\n  }\n\n  if (isFunction(render)) {\n    // Render function: call with props and state\n    const mergedRef = composeRefs(ref, mergedProps.ref);\n    return render({ ...mergedProps, ref: mergedRef } as HTMLProps, state);\n  }\n\n  if (isValidElement(render)) {\n    const elementRef = getElementRef(render);\n\n    const mergedRef = composeRefs(ref, mergedProps.ref, elementRef);\n\n    const elementProps = mergeProps(mergedProps, render.props as Record<string, unknown>);\n    elementProps.ref = mergedRef;\n\n    return cloneElement(render, elementProps);\n  }\n\n  // Default tag\n  const mergedRef = composeRefs(ref, mergedProps.ref);\n  mergedProps.ref = mergedRef;\n\n  return createElement(element, mergedProps);\n}\n\nexport namespace renderElement {\n  export type ComponentProps<State> = UseRenderComponentProps<State>;\n  export type Parameters<State, RenderedElementType extends Element> = UseRenderParameters<State, RenderedElementType>;\n}\n"],"mappings":";;;;;;;;;;AAWA,SAAgB,aAAa,OAA0C;AACrE,QAAO,WAAW,MAAM,IAAI,eAAe,MAAM;;AAkBnD,SAAS,iBACP,WACA,OACoB;AACpB,QAAO,WAAW,UAAU,GAAG,UAAU,MAAM,GAAG;;AAGpD,SAAS,aACP,OACA,OAC2B;AAC3B,QAAO,WAAW,MAAM,GAAG,MAAM,MAAM,GAAG;;AAG5C,SAAS,cAAc,SAAiD;CAGtE,MAAM,aAAa;AACnB,QAAO,WAAW,OAAO,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;AAuB7C,SAAgB,cAKd,SACA,gBACA,QACqB;CACrB,MAAM,EAAE,WAAW,eAAe,OAAO,WAAW,WAAW;CAC/D,MAAM,EAAE,OAAO,KAAK,OAAO,iBAAiB;CAG5C,MAAM,YAAY,iBAAiB,eAAe,MAAM;CACxD,MAAM,QAAQ,aAAa,WAAW,MAAM;CAO5C,MAAM,cAAc,WAJG,kBAAkB,OAAO,aAAa,EAId,GAD5B,MAAM,QAAQ,MAAM,GAAG,QAAQ,QAAQ,CAAC,MAAM,GAAG,EAAE,CACsB;AAE5F,KAAI,cAAc,OAEhB,aAAY,YAAY,YAAY,YAAY,GAAG,YAAY,UAAU,GAAG,cAAc;AAG5F,KAAI,UAAU,OACZ,aAAY,QAAQ,YAAY,QAAQ;EAAE,GAAI,YAAY;EAAyB,GAAG;EAAO,GAAG;AAGlG,KAAI,WAAW,OAAO,EAAE;EAEtB,MAAM,YAAY,YAAY,KAAK,YAAY,IAAI;AACnD,SAAO,OAAO;GAAE,GAAG;GAAa,KAAK;GAAW,EAAe,MAAM;;AAGvE,KAAI,eAAe,OAAO,EAAE;EAC1B,MAAM,aAAa,cAAc,OAAO;EAExC,MAAM,YAAY,YAAY,KAAK,YAAY,KAAK,WAAW;EAE/D,MAAM,eAAe,WAAW,aAAa,OAAO,MAAiC;AACrF,eAAa,MAAM;AAEnB,SAAO,aAAa,QAAQ,aAAa;;AAK3C,aAAY,MADM,YAAY,KAAK,YAAY,IAAI;AAGnD,QAAO,cAAc,SAAS,YAAY"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/react",
   "type": "module",
-  "version": "10.0.0-alpha.9",
+  "version": "10.0.0-beta.10",
   "description": "React library for building media players",
   "license": "Apache-2.0",
   "repository": {
@@ -65,9 +65,10 @@
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "@videojs/core": "10.0.0-alpha.9",
-    "@videojs/utils": "10.0.0-alpha.9",
-    "@videojs/store": "10.0.0-alpha.9"
+    "@videojs/core": "10.0.0-beta.10",
+    "@videojs/spf": "10.0.0-beta.10",
+    "@videojs/store": "10.0.0-beta.10",
+    "@videojs/utils": "10.0.0-beta.10"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
@@ -78,8 +79,8 @@
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
     "vitest": "^3.2.4",
-    "@videojs/skins": "10.0.0-alpha.4",
-    "@videojs/icons": "10.0.0-alpha.9"
+    "@videojs/icons": "10.0.0-beta.10",
+    "@videojs/skins": "10.0.0-beta.10"
   },
   "publishConfig": {
     "access": "public"

package/dist/default/icons/dist/react/default/pip.js

@@ -1,26 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region ../icons/dist/react/default/pip.js
-const PipIcon = (props) => /* @__PURE__ */ jsxs("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: 18,
-	height: 18,
-	fill: "none",
-	viewBox: "0 0 18 18",
-	...props,
-	children: [/* @__PURE__ */ jsx("path", {
-		fill: "currentColor",
-		d: "M13 2a4 4 0 0 1 4 4v2.035A3.5 3.5 0 0 0 16.5 8H15V6.273C15 5.018 13.96 4 12.679 4H4.32C3.04 4 2 5.018 2 6.273v5.454C2 12.982 3.04 14 4.321 14H6v1.5q0 .255.035.5H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z"
-	}), /* @__PURE__ */ jsx("rect", {
-		width: 10,
-		height: 7,
-		x: 8,
-		y: 10,
-		fill: "currentColor",
-		rx: 2
-	})]
-});
-
-//#endregion
-export { PipIcon as default };
-//# sourceMappingURL=pip.js.map

package/dist/default/icons/dist/react/default/pip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pip.js","names":[],"sources":["../../../../../../../icons/dist/react/default/pip.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst PipIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", viewBox: \"0 0 18 18\", ...props, children: [\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M13 2a4 4 0 0 1 4 4v2.035A3.5 3.5 0 0 0 16.5 8H15V6.273C15 5.018 13.96 4 12.679 4H4.32C3.04 4 2 5.018 2 6.273v5.454C2 12.982 3.04 14 4.321 14H6v1.5q0 .255.035.5H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z\" }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 10, height: 7, x: 8, y: 10, fill: \"currentColor\", rx: 2 })\n] });\nexport default PipIcon;\n"],"mappings":";;;AACA,MAAM,WAAW,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,SAAS;CAAa,GAAG;CAAO,UAAU,CAC3J,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAqM,CAAC,EAC7O,oBAAI,QAAQ;EAAE,OAAO;EAAI,QAAQ;EAAG,GAAG;EAAG,GAAG;EAAI,MAAM;EAAgB,IAAI;EAAG,CAAC,CAChG;CAAE,CAAC"}

package/dist/default/icons/dist/react/minimal/pip.js

@@ -1,26 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region ../icons/dist/react/minimal/pip.js
-const PipIcon = (props) => /* @__PURE__ */ jsxs("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: 18,
-	height: 18,
-	fill: "none",
-	viewBox: "0 0 18 18",
-	...props,
-	children: [/* @__PURE__ */ jsx("path", {
-		fill: "currentColor",
-		d: "M13 2a4 4 0 0 1 4 4v2.645a3.5 3.5 0 0 0-1-.145h-.5V6A2.5 2.5 0 0 0 13 3.5H4A2.5 2.5 0 0 0 1.5 6v6A2.5 2.5 0 0 0 4 14.5h2.5v.5c0 .347.05.683.145 1H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z"
-	}), /* @__PURE__ */ jsx("rect", {
-		width: 10,
-		height: 7,
-		x: 8,
-		y: 10,
-		fill: "currentColor",
-		rx: 2
-	})]
-});
-
-//#endregion
-export { PipIcon as default };
-//# sourceMappingURL=pip.js.map

package/dist/default/icons/dist/react/minimal/pip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pip.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/pip.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst PipIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", viewBox: \"0 0 18 18\", ...props, children: [\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M13 2a4 4 0 0 1 4 4v2.645a3.5 3.5 0 0 0-1-.145h-.5V6A2.5 2.5 0 0 0 13 3.5H4A2.5 2.5 0 0 0 1.5 6v6A2.5 2.5 0 0 0 4 14.5h2.5v.5c0 .347.05.683.145 1H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z\" }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 10, height: 7, x: 8, y: 10, fill: \"currentColor\", rx: 2 })\n] });\nexport default PipIcon;\n"],"mappings":";;;AACA,MAAM,WAAW,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,SAAS;CAAa,GAAG;CAAO,UAAU,CAC3J,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAsL,CAAC,EAC9N,oBAAI,QAAQ;EAAE,OAAO;EAAI,QAAQ;EAAG,GAAG;EAAG,GAAG;EAAI,MAAM;EAAgB,IAAI;EAAG,CAAC,CAChG;CAAE,CAAC"}

package/dist/default/presets/video/error-dialog.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"error-dialog.js","names":["AlertDialog.Root","AlertDialog.Popup","AlertDialog.Title","AlertDialog.Description","AlertDialog.Close"],"sources":["../../../../src/presets/video/error-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { selectError } from '@videojs/core/dom';\nimport { type ReactNode, useRef } from 'react';\nimport { usePlayer } from '@/player/context';\nimport { AlertDialog } from '@/ui/alert-dialog';\n\nexport interface ErrorDialogClasses {\n  root?: string;\n  dialog?: string;\n  content?: string;\n  title?: string;\n  description?: string;\n  actions?: string;\n  close?: string;\n}\n\nexport function ErrorDialog({ classes }: { classes?: ErrorDialogClasses }): ReactNode {\n  const errorState = usePlayer(selectError);\n  const lastError = useRef(errorState?.error);\n  if (errorState?.error) lastError.current = errorState.error;\n\n  if (!errorState) return null;\n\n  return (\n    <AlertDialog.Root\n      open={!!errorState.error}\n      onOpenChange={(open) => {\n        if (!open) errorState.dismissError();\n      }}\n    >\n      <AlertDialog.Popup className={classes?.root}>\n        <div className={classes?.dialog}>\n          <div className={classes?.content}>\n            <AlertDialog.Title className={classes?.title}>Something went wrong.</AlertDialog.Title>\n            <AlertDialog.Description className={classes?.description}>\n              {lastError.current?.message ?? 'An error occurred while trying to play the video. Please try again.'}\n            </AlertDialog.Description>\n          </div>\n          <div className={classes?.actions}>\n            <AlertDialog.Close className={classes?.close}>OK</AlertDialog.Close>\n          </div>\n        </div>\n      </AlertDialog.Popup>\n    </AlertDialog.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,SAAgB,YAAY,EAAE,WAAwD;CACpF,MAAM,aAAa,UAAU,YAAY;CACzC,MAAM,YAAY,OAAO,YAAY,MAAM;AAC3C,KAAI,YAAY,MAAO,WAAU,UAAU,WAAW;AAEtD,KAAI,CAAC,WAAY,QAAO;AAExB,QACE,oBAACA;EACC,MAAM,CAAC,CAAC,WAAW;EACnB,eAAe,SAAS;AACtB,OAAI,CAAC,KAAM,YAAW,cAAc;;YAGtC,oBAACC;GAAkB,WAAW,SAAS;aACrC,qBAAC;IAAI,WAAW,SAAS;eACvB,qBAAC;KAAI,WAAW,SAAS;gBACvB,oBAACC;MAAkB,WAAW,SAAS;gBAAO;OAAyC,EACvF,oBAACC;MAAwB,WAAW,SAAS;gBAC1C,UAAU,SAAS,WAAW;OACP;MACtB,EACN,oBAAC;KAAI,WAAW,SAAS;eACvB,oBAACC;MAAkB,WAAW,SAAS;gBAAO;OAAsB;MAChE;KACF;IACY;GACH"}

package/dist/default/skins/dist/default/video/default.tailwind.js

@@ -1,90 +0,0 @@
-import { cn } from "@videojs/utils/style";
-
-//#region ../skins/dist/default/video/default.tailwind.js
-const surface = cn("bg-white/10", "backdrop-blur-3xl backdrop-brightness-90 backdrop-saturate-150", "ring ring-white/5 ring-inset shadow-sm shadow-black/15", "after:absolute after:inset-0 after:ring after:rounded-[inherit] after:ring-black/15 after:pointer-events-none after:z-10", "[@media(prefers-reduced-transparency:reduce)]:bg-black/70 [@media(prefers-reduced-transparency:reduce)]:ring-black [@media(prefers-reduced-transparency:reduce)]:after:ring-white/20", "contrast-more:bg-black/90 contrast-more:ring-black contrast-more:after:ring-white/20");
-const icon = cn("block [grid-area:1/1] size-4.5 shrink-0", "drop-shadow-[0_1px_0_var(--tw-drop-shadow-color)] drop-shadow-black/25", "transition-discrete transition-[display,opacity] duration-150 ease-out");
-const iconFlipped = "[scale:-1_1]";
-const iconContainer = "relative";
-const button = {
-	base: cn("items-center justify-center shrink-0 border-none cursor-pointer select-none text-center", "font-medium", "outline-2 outline-transparent -outline-offset-2", "transition-[background-color,color,outline-offset] duration-150 ease-out", "disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale", "focus-visible:outline-blue-500 focus-visible:outline-offset-2"),
-	icon: cn("grid w-[2.125rem] aspect-square bg-transparent rounded-full", "text-white/90", "text-shadow-2xs text-shadow-black/25", "hover:bg-white/10 hover:text-white hover:no-underline", "focus-visible:bg-white/10 focus-visible:text-white", "aria-expanded:bg-white/10 aria-expanded:text-white"),
-	default: cn("flex py-2 px-4 bg-white rounded-full", "text-black")
-};
-const slider = {
-	root: cn("group/slider relative flex flex-1 items-center justify-center rounded-full outline-none", "data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5", "data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-20"),
-	track: cn("relative isolate overflow-hidden bg-white/20 rounded-[inherit]", "shadow-[0_0_0_1px_oklch(0_0_0/0.05)] select-none", "data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-1", "data-[orientation=vertical]:w-1 data-[orientation=vertical]:h-full"),
-	fill: {
-		base: "absolute rounded-[inherit] pointer-events-none",
-		fill: cn("bg-white", "data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0", "data-[orientation=horizontal]:w-(--media-slider-fill)", "data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0", "data-[orientation=vertical]:h-(--media-slider-fill)"),
-		buffer: cn("bg-white/20 duration-250 ease-out", "data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0", "data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer)", "data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0", "data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)")
-	},
-	thumb: {
-		base: cn("z-10 absolute -translate-x-1/2 -translate-y-1/2", "bg-white rounded-full", "ring ring-black/10 shadow-sm shadow-black/15", "transition-[opacity,height,width,outline-offset] duration-150 ease-out select-none", "outline-2 outline-transparent -outline-offset-2", "focus-visible:outline-blue-500 focus-visible:outline-offset-2", "data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill)", "data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill))]"),
-		persistent: "size-3",
-		interactive: cn("size-2.5", "opacity-0 focus-visible:opacity-100 group-hover/slider:opacity-100", "group-active/slider:size-3")
-	}
-};
-const root = cn("block relative isolate overflow-clip @container/media-root", "rounded-(--media-border-radius,2rem) bg-black", "font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased", "**:box-border **:m-0", "[&_button]:font-[inherit]", "motion-safe:[interpolate-size:allow-keywords]", "before:absolute before:pointer-events-none before:rounded-[inherit] before:z-10", "before:inset-px before:ring-1 before:ring-inset before:ring-white/15", "after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10", "after:inset-0 after:ring-1 after:ring-inset after:ring-black/10", "[&>video]:block [&>video]:w-full [&>video]:h-full [&>video]:rounded-[inherit]", "[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]", "[&>img]:object-cover [&>img]:pointer-events-none", "[&>img]:transition-opacity [&>img]:duration-250", "[&>img:not([data-visible])]:opacity-0", "[--media-caption-track-delay:600ms]", "[--media-caption-track-y:-0.5rem]", "has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]", "has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]", "[&_video::-webkit-media-text-track-container]:transition-transform", "[&_video::-webkit-media-text-track-container]:duration-150", "[&_video::-webkit-media-text-track-container]:ease-out", "[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)", "[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)", "[&_video::-webkit-media-text-track-container]:scale-98", "[&_video::-webkit-media-text-track-container]:z-1", "[&_video::-webkit-media-text-track-container]:font-[inherit]", "motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50", "[&:fullscreen]:rounded-none");
-const controls = cn("peer/controls", surface, "absolute @container/media-controls bottom-3 inset-x-3", "p-[0.175rem] flex items-center gap-[0.075rem]", "text-white rounded-full z-10", "will-change-[scale,transform,filter,opacity]", "transition-[scale,transform,filter,opacity] ease-out", "delay-0 duration-100 origin-bottom", "not-data-visible:pointer-events-none not-data-visible:blur-sm", "not-data-visible:scale-90 not-data-visible:opacity-0", "not-data-visible:delay-500 not-data-visible:duration-300", "motion-reduce:not-data-visible:duration-100", "motion-reduce:not-data-visible:blur-none", "motion-reduce:not-data-visible:scale-100", "@2xl/media-root:p-1 @2xl/media-root:gap-0.5");
-const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/50 via-black/30 to-transparent", "backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90", "transition-[opacity,backdrop-filter] ease-out", "duration-300 delay-500", "peer-data-visible/controls:opacity-100", "peer-data-visible/controls:duration-150", "peer-data-visible/controls:delay-0", "peer-data-open/error:opacity-100", "peer-data-open/error:duration-150", "peer-data-open/error:delay-0", "peer-data-open/error:backdrop-blur-sm", "motion-reduce:duration-100");
-const bufferingIndicator = {
-	root: "absolute inset-0 hidden items-center justify-center pointer-events-none z-10 text-white data-visible:flex",
-	container: cn("p-1 rounded-full", surface)
-};
-const error = {
-	root: "peer/error group/error absolute inset-0 z-20 flex items-center justify-center pointer-events-none",
-	dialog: cn("flex flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white text-sm pointer-events-auto", "transition-[opacity,transform] duration-500 delay-100", "ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]", "group-data-[starting-style]/error:opacity-0 group-data-[starting-style]/error:scale-50", "group-data-[ending-style]/error:opacity-0 group-data-[ending-style]/error:scale-50", surface),
-	content: "flex flex-col gap-2 px-2 pt-2 pb-1.5",
-	title: "font-semibold leading-tight",
-	description: "opacity-70",
-	actions: "flex gap-2 *:flex-1"
-};
-const time = {
-	group: "@container/media-time flex items-center flex-1 gap-3 px-2",
-	current: "hidden @2xs/media-time:block text-shadow-2xs text-shadow-black/25 tabular-nums",
-	duration: "text-shadow-2xs text-shadow-black/25 tabular-nums"
-};
-const popup = {
-	base: cn("m-0 border-0 [--media-popover-side-offset:0.5rem]", surface, "opacity-100 scale-100 origin-bottom blur-none", "transition-[transform,scale,opacity,filter] duration-200", "data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm", "data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm", "data-instant:duration-0"),
-	volume: "py-2.5 px-1 rounded-full"
-};
-const seek = {
-	button: "@max-md/media-controls:hidden",
-	label: "text-[0.75em] font-[480] tabular-nums",
-	labelForward: "absolute -right-px -bottom-0.75",
-	labelBackward: "absolute -left-px -bottom-0.75"
-};
-const playbackRate = { button: `after:content-[attr(data-rate)_'×'] after:w-[4ch] after:tabular-nums` };
-const iconState = {
-	play: {
-		button: "group",
-		restart: "hidden opacity-0 group-data-ended:block group-data-ended:opacity-100",
-		play: "hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100",
-		pause: "hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100"
-	},
-	mute: {
-		button: "group",
-		volumeOff: "hidden opacity-0 group-data-muted:block group-data-muted:opacity-100",
-		volumeLow: "hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100",
-		volumeHigh: "hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100"
-	},
-	fullscreen: {
-		button: "group",
-		enter: "hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100",
-		exit: "hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100"
-	},
-	captions: {
-		button: "group",
-		off: "hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100",
-		on: "hidden opacity-0 group-data-active:block group-data-active:opacity-100"
-	}
-};
-const captions = {
-	root: cn("absolute z-20 pointer-events-none text-balance text-base", "inset-x-4 bottom-6", "transition-transform duration-150 ease-out delay-600", "motion-reduce:duration-50", "@xs/media-root:text-2xl", "@3xl/media-root:text-3xl", "@7xl/media-root:text-4xl", "peer-data-visible/controls:-translate-y-12 peer-data-visible/controls:delay-25"),
-	container: "max-w-[42ch] mx-auto text-center flex flex-col items-center",
-	cue: cn("block py-0.5 px-2 text-white text-center whitespace-pre-wrap leading-1.2", "[text-shadow:0_0_1px_oklab(0_0_0_/_0.7),0_0_8px_oklab(0_0_0_/_0.7)]", "contrast-more:[text-shadow:none] contrast-more:[box-decoration-break:clone] contrast-more:bg-black/70", "*:inline")
-};
-
-//#endregion
-export { bufferingIndicator, button, controls, error, icon, iconContainer, iconFlipped, iconState, overlay, playbackRate, popup, root, seek, slider, time };
-//# sourceMappingURL=default.tailwind.js.map

package/dist/default/skins/dist/default/video/default.tailwind.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"default.tailwind.js","names":[],"sources":["../../../../../../../skins/dist/default/video/default.tailwind.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/video/default.tailwind.ts\nconst surface = cn(\"bg-white/10\", \"backdrop-blur-3xl backdrop-brightness-90 backdrop-saturate-150\", \"ring ring-white/5 ring-inset shadow-sm shadow-black/15\", \"after:absolute after:inset-0 after:ring after:rounded-[inherit] after:ring-black/15 after:pointer-events-none after:z-10\", \"[@media(prefers-reduced-transparency:reduce)]:bg-black/70 [@media(prefers-reduced-transparency:reduce)]:ring-black [@media(prefers-reduced-transparency:reduce)]:after:ring-white/20\", \"contrast-more:bg-black/90 contrast-more:ring-black contrast-more:after:ring-white/20\");\nconst icon = cn(\"block [grid-area:1/1] size-4.5 shrink-0\", \"drop-shadow-[0_1px_0_var(--tw-drop-shadow-color)] drop-shadow-black/25\", \"transition-discrete transition-[display,opacity] duration-150 ease-out\");\nconst iconHidden = \"hidden opacity-0\";\nconst iconFlipped = \"[scale:-1_1]\";\nconst iconContainer = \"relative\";\nconst button = {\n\tbase: cn(\"items-center justify-center shrink-0 border-none cursor-pointer select-none text-center\", \"font-medium\", \"outline-2 outline-transparent -outline-offset-2\", \"transition-[background-color,color,outline-offset] duration-150 ease-out\", \"disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale\", \"focus-visible:outline-blue-500 focus-visible:outline-offset-2\"),\n\ticon: cn(\"grid w-[2.125rem] aspect-square bg-transparent rounded-full\", \"text-white/90\", \"text-shadow-2xs text-shadow-black/25\", \"hover:bg-white/10 hover:text-white hover:no-underline\", \"focus-visible:bg-white/10 focus-visible:text-white\", \"aria-expanded:bg-white/10 aria-expanded:text-white\"),\n\tdefault: cn(\"flex py-2 px-4 bg-white rounded-full\", \"text-black\")\n};\nconst slider = {\n\troot: cn(\"group/slider relative flex flex-1 items-center justify-center rounded-full outline-none\", \"data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5\", \"data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-20\"),\n\ttrack: cn(\"relative isolate overflow-hidden bg-white/20 rounded-[inherit]\", \"shadow-[0_0_0_1px_oklch(0_0_0/0.05)] select-none\", \"data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-1\", \"data-[orientation=vertical]:w-1 data-[orientation=vertical]:h-full\"),\n\tfill: {\n\t\tbase: \"absolute rounded-[inherit] pointer-events-none\",\n\t\tfill: cn(\"bg-white\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:w-(--media-slider-fill)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:h-(--media-slider-fill)\"),\n\t\tbuffer: cn(\"bg-white/20 duration-250 ease-out\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)\")\n\t},\n\tthumb: {\n\t\tbase: cn(\"z-10 absolute -translate-x-1/2 -translate-y-1/2\", \"bg-white rounded-full\", \"ring ring-black/10 shadow-sm shadow-black/15\", \"transition-[opacity,height,width,outline-offset] duration-150 ease-out select-none\", \"outline-2 outline-transparent -outline-offset-2\", \"focus-visible:outline-blue-500 focus-visible:outline-offset-2\", \"data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill)\", \"data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill))]\"),\n\t\tpersistent: \"size-3\",\n\t\tinteractive: cn(\"size-2.5\", \"opacity-0 focus-visible:opacity-100 group-hover/slider:opacity-100\", \"group-active/slider:size-3\")\n\t}\n};\nconst root = cn(\"block relative isolate overflow-clip @container/media-root\", \"rounded-(--media-border-radius,2rem) bg-black\", \"font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased\", \"**:box-border **:m-0\", \"[&_button]:font-[inherit]\", \"motion-safe:[interpolate-size:allow-keywords]\", \"before:absolute before:pointer-events-none before:rounded-[inherit] before:z-10\", \"before:inset-px before:ring-1 before:ring-inset before:ring-white/15\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/10\", \"[&>video]:block [&>video]:w-full [&>video]:h-full [&>video]:rounded-[inherit]\", \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:object-cover [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-y:-0.5rem]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", \"[&_video::-webkit-media-text-track-container]:transition-transform\", \"[&_video::-webkit-media-text-track-container]:duration-150\", \"[&_video::-webkit-media-text-track-container]:ease-out\", \"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\", \"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\", \"[&_video::-webkit-media-text-track-container]:scale-98\", \"[&_video::-webkit-media-text-track-container]:z-1\", \"[&_video::-webkit-media-text-track-container]:font-[inherit]\", \"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50\", \"[&:fullscreen]:rounded-none\");\nconst controls = cn(\"peer/controls\", surface, \"absolute @container/media-controls bottom-3 inset-x-3\", \"p-[0.175rem] flex items-center gap-[0.075rem]\", \"text-white rounded-full z-10\", \"will-change-[scale,transform,filter,opacity]\", \"transition-[scale,transform,filter,opacity] ease-out\", \"delay-0 duration-100 origin-bottom\", \"not-data-visible:pointer-events-none not-data-visible:blur-sm\", \"not-data-visible:scale-90 not-data-visible:opacity-0\", \"not-data-visible:delay-500 not-data-visible:duration-300\", \"motion-reduce:not-data-visible:duration-100\", \"motion-reduce:not-data-visible:blur-none\", \"motion-reduce:not-data-visible:scale-100\", \"@2xl/media-root:p-1 @2xl/media-root:gap-0.5\");\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/50 via-black/30 to-transparent\", \"backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90\", \"transition-[opacity,backdrop-filter] ease-out\", \"duration-300 delay-500\", \"peer-data-visible/controls:opacity-100\", \"peer-data-visible/controls:duration-150\", \"peer-data-visible/controls:delay-0\", \"peer-data-open/error:opacity-100\", \"peer-data-open/error:duration-150\", \"peer-data-open/error:delay-0\", \"peer-data-open/error:backdrop-blur-sm\", \"motion-reduce:duration-100\");\nconst bufferingIndicator = {\n\troot: \"absolute inset-0 hidden items-center justify-center pointer-events-none z-10 text-white data-visible:flex\",\n\tcontainer: cn(\"p-1 rounded-full\", surface)\n};\nconst error = {\n\troot: \"peer/error group/error absolute inset-0 z-20 flex items-center justify-center pointer-events-none\",\n\tdialog: cn(\"flex flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white text-sm pointer-events-auto\", \"transition-[opacity,transform] duration-500 delay-100\", \"ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]\", \"group-data-[starting-style]/error:opacity-0 group-data-[starting-style]/error:scale-50\", \"group-data-[ending-style]/error:opacity-0 group-data-[ending-style]/error:scale-50\", surface),\n\tcontent: \"flex flex-col gap-2 px-2 pt-2 pb-1.5\",\n\ttitle: \"font-semibold leading-tight\",\n\tdescription: \"opacity-70\",\n\tactions: \"flex gap-2 *:flex-1\"\n};\nconst time = {\n\tgroup: \"@container/media-time flex items-center flex-1 gap-3 px-2\",\n\tcurrent: \"hidden @2xs/media-time:block text-shadow-2xs text-shadow-black/25 tabular-nums\",\n\tduration: \"text-shadow-2xs text-shadow-black/25 tabular-nums\"\n};\nconst popup = {\n\tbase: cn(\"m-0 border-0 [--media-popover-side-offset:0.5rem]\", surface, \"opacity-100 scale-100 origin-bottom blur-none\", \"transition-[transform,scale,opacity,filter] duration-200\", \"data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm\", \"data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm\", \"data-instant:duration-0\"),\n\tvolume: \"py-2.5 px-1 rounded-full\"\n};\nconst seek = {\n\tbutton: \"@max-md/media-controls:hidden\",\n\tlabel: \"text-[0.75em] font-[480] tabular-nums\",\n\tlabelForward: \"absolute -right-px -bottom-0.75\",\n\tlabelBackward: \"absolute -left-px -bottom-0.75\"\n};\nconst playbackRate = { button: `after:content-[attr(data-rate)_'×'] after:w-[4ch] after:tabular-nums` };\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t},\n\tfullscreen: {\n\t\tbutton: \"group\",\n\t\tenter: \"hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100\",\n\t\texit: \"hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100\"\n\t},\n\tcaptions: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-active:block group-data-active:opacity-100\"\n\t}\n};\nconst captions = {\n\troot: cn(\"absolute z-20 pointer-events-none text-balance text-base\", \"inset-x-4 bottom-6\", \"transition-transform duration-150 ease-out delay-600\", \"motion-reduce:duration-50\", \"@xs/media-root:text-2xl\", \"@3xl/media-root:text-3xl\", \"@7xl/media-root:text-4xl\", \"peer-data-visible/controls:-translate-y-12 peer-data-visible/controls:delay-25\"),\n\tcontainer: \"max-w-[42ch] mx-auto text-center flex flex-col items-center\",\n\tcue: cn(\"block py-0.5 px-2 text-white text-center whitespace-pre-wrap leading-1.2\", \"[text-shadow:0_0_1px_oklab(0_0_0_/_0.7),0_0_8px_oklab(0_0_0_/_0.7)]\", \"contrast-more:[text-shadow:none] contrast-more:[box-decoration-break:clone] contrast-more:bg-black/70\", \"*:inline\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, captions, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, playbackRate, popup, root, seek, slider, time };\n//# sourceMappingURL=default.tailwind.js.map"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,eAAe,kEAAkE,0DAA0D,4HAA4H,wLAAwL,uFAAuF;AACziB,MAAM,OAAO,GAAG,2CAA2C,0EAA0E,yEAAyE;AAE9M,MAAM,cAAc;AACpB,MAAM,gBAAgB;AACtB,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,eAAe,mDAAmD,4EAA4E,sEAAsE,gEAAgE;CACxX,MAAM,GAAG,+DAA+D,iBAAiB,wCAAwC,yDAAyD,sDAAsD,qDAAqD;CACrS,SAAS,GAAG,wCAAwC,aAAa;CACjE;AACD,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,iHAAiH,mEAAmE;CACxR,OAAO,GAAG,kEAAkE,oDAAoD,0EAA0E,qEAAqE;CAC/Q,MAAM;EACL,MAAM;EACN,MAAM,GAAG,YAAY,gFAAgF,yDAAyD,8EAA8E,sDAAsD;EAClS,QAAQ,GAAG,qCAAqC,gFAAgF,4GAA4G,8EAA8E,wGAAwG;EACla;CACD,OAAO;EACN,MAAM,GAAG,mDAAmD,yBAAyB,gDAAgD,sFAAsF,mDAAmD,iEAAiE,kGAAkG,6GAA6G;EAC9hB,YAAY;EACZ,aAAa,GAAG,YAAY,sEAAsE,6BAA6B;EAC/H;CACD;AACD,MAAM,OAAO,GAAG,8DAA8D,iDAAiD,uHAAuH,wBAAwB,6BAA6B,iDAAiD,mFAAmF,wEAAwE,+EAA+E,mEAAmE,iFAAiF,4FAA4F,oDAAoD,mDAAmD,yCAAyC,uCAAuC,qCAAqC,0EAA0E,yEAAyE,sEAAsE,8DAA8D,0DAA0D,qFAAqF,uFAAuF,0DAA0D,qDAAqD,gEAAgE,2EAA2E,8BAA8B;AACvyD,MAAM,WAAW,GAAG,iBAAiB,SAAS,yDAAyD,iDAAiD,gCAAgC,gDAAgD,wDAAwD,sCAAsC,iEAAiE,wDAAwD,4DAA4D,+CAA+C,4CAA4C,4CAA4C,8CAA8C;AAChrB,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,4DAA4D,mEAAmE,iDAAiD,0BAA0B,0CAA0C,2CAA2C,sCAAsC,oCAAoC,qCAAqC,gCAAgC,yCAAyC,6BAA6B;AAC3mB,MAAM,qBAAqB;CAC1B,MAAM;CACN,WAAW,GAAG,oBAAoB,QAAQ;CAC1C;AACD,MAAM,QAAQ;CACb,MAAM;CACN,QAAQ,GAAG,6FAA6F,yDAAyD,wGAAwG,0FAA0F,sFAAsF,QAAQ;CACjc,SAAS;CACT,OAAO;CACP,aAAa;CACb,SAAS;CACT;AACD,MAAM,OAAO;CACZ,OAAO;CACP,SAAS;CACT,UAAU;CACV;AACD,MAAM,QAAQ;CACb,MAAM,GAAG,qDAAqD,SAAS,iDAAiD,4DAA4D,yFAAyF,mFAAmF,0BAA0B;CAC1X,QAAQ;CACR;AACD,MAAM,OAAO;CACZ,QAAQ;CACR,OAAO;CACP,cAAc;CACd,eAAe;CACf;AACD,MAAM,eAAe,EAAE,QAAQ,wEAAwE;AACvG,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD,YAAY;EACX,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD,UAAU;EACT,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD;AACD,MAAM,WAAW;CAChB,MAAM,GAAG,4DAA4D,sBAAsB,wDAAwD,6BAA6B,2BAA2B,4BAA4B,4BAA4B,iFAAiF;CACpV,WAAW;CACX,KAAK,GAAG,4EAA4E,uEAAuE,yGAAyG,WAAW;CAC/Q"}