@videojs/react 10.0.0-beta.23 → 10.0.0-beta.25

package/dist/dev/ui/status-indicator/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/status-indicator/index.parts.ts"],"sourcesContent":["export {\n  StatusIndicatorRoot as Root,\n  type StatusIndicatorRootProps as RootProps,\n} from './status-indicator-root';\nexport {\n  StatusIndicatorValue as Value,\n  type StatusIndicatorValueProps as ValueProps,\n} from './status-indicator-value';\n"],"mappings":""}

package/dist/dev/ui/status-indicator/status-indicator-root.d.ts

@@ -0,0 +1,14 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as _$react from "react";
+import { StatusIndicatorCore } from "@videojs/core";
+
+//#region src/ui/status-indicator/status-indicator-root.d.ts
+interface StatusIndicatorRootProps extends UIComponentProps<'div', StatusIndicatorCore.State>, StatusIndicatorCore.Props {}
+declare const StatusIndicatorRoot: _$react.ForwardRefExoticComponent<Omit<StatusIndicatorRootProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare namespace StatusIndicatorRoot {
+  type Props = StatusIndicatorRootProps;
+  type State = StatusIndicatorCore.State;
+}
+//#endregion
+export { StatusIndicatorRoot, StatusIndicatorRootProps };
+//# sourceMappingURL=status-indicator-root.d.ts.map

package/dist/dev/ui/status-indicator/status-indicator-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator-root.d.ts","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-root.tsx"],"mappings":";;;;;UAWiB,wBAAA,SACP,gBAAA,QAAwB,mBAAA,CAAoB,KAAA,GAClD,mBAAA,CAAoB,KAAA;AAAA,cAEX,mBAAA,EAAmB,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,wBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBA6Bf,mBAAA;EAAA,KACH,KAAA,GAAQ,wBAAA;EAAA,KACR,KAAA,GAAQ,mBAAA,CAAoB,KAAA;AAAA"}

package/dist/dev/ui/status-indicator/status-indicator-root.js

@@ -0,0 +1,34 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { useInputIndicatorRoot } from "../input-indicators/use-input-indicator-root.js";
+import { StatusIndicatorProvider } from "./context.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { StatusIndicatorCore, StatusIndicatorDataAttrs } from "@videojs/core";
+//#region src/ui/status-indicator/status-indicator-root.tsx
+const StatusIndicatorRoot = forwardRef(function StatusIndicatorRoot(componentProps, forwardedRef) {
+	const { render, className, style, actions, closeDelay, labels, ...elementProps } = componentProps;
+	const { elementRef, present, state } = useInputIndicatorRoot(() => new StatusIndicatorCore(), {
+		actions,
+		closeDelay,
+		labels
+	});
+	if (!present) return null;
+	return /* @__PURE__ */ jsx(StatusIndicatorProvider, {
+		value: { state },
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: StatusIndicatorDataAttrs,
+			ref: [forwardedRef, elementRef],
+			props: [elementProps]
+		})
+	});
+});
+//#endregion
+export { StatusIndicatorRoot };
+
+//# sourceMappingURL=status-indicator-root.js.map

package/dist/dev/ui/status-indicator/status-indicator-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator-root.js","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-root.tsx"],"sourcesContent":["'use client';\n\nimport { StatusIndicatorCore, StatusIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-indicators/use-input-indicator-root';\nimport { StatusIndicatorProvider } from './context';\n\nexport interface StatusIndicatorRootProps\n  extends UIComponentProps<'div', StatusIndicatorCore.State>,\n    StatusIndicatorCore.Props {}\n\nexport const StatusIndicatorRoot = forwardRef(function StatusIndicatorRoot(\n  componentProps: StatusIndicatorRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, actions, closeDelay, labels, ...elementProps } = componentProps;\n  const { elementRef, present, state } = useInputIndicatorRoot(() => new StatusIndicatorCore(), {\n    actions,\n    closeDelay,\n    labels,\n  });\n\n  if (!present) return null;\n\n  return (\n    <StatusIndicatorProvider value={{ state }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: StatusIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )}\n    </StatusIndicatorProvider>\n  );\n});\n\nexport namespace StatusIndicatorRoot {\n  export type Props = StatusIndicatorRootProps;\n  export type State = StatusIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;AAeA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,SAAS,YAAY,QAAQ,GAAG,iBAAiB;CACnF,MAAM,EAAE,YAAY,SAAS,UAAU,4BAA4B,IAAI,qBAAqB,EAAE;EAC5F;EACA;EACA;EACD,CAAC;AAEF,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,oBAAC,yBAAD;EAAyB,OAAO,EAAE,OAAO;YACtC,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,WAAW;GAC/B,OAAO,CAAC,aAAa;GACtB,CACF;EACuB,CAAA;EAE5B"}

package/dist/dev/ui/status-indicator/status-indicator-value.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as _$react from "react";
+import { StatusIndicatorCore } from "@videojs/core";
+
+//#region src/ui/status-indicator/status-indicator-value.d.ts
+interface StatusIndicatorValueProps extends UIComponentProps<'span', StatusIndicatorCore.State> {}
+declare const StatusIndicatorValue: _$react.ForwardRefExoticComponent<Omit<StatusIndicatorValueProps, "ref"> & _$react.RefAttributes<HTMLSpanElement>>;
+declare namespace StatusIndicatorValue {
+  type Props = StatusIndicatorValueProps;
+}
+//#endregion
+export { StatusIndicatorValue, StatusIndicatorValueProps };
+//# sourceMappingURL=status-indicator-value.d.ts.map

package/dist/dev/ui/status-indicator/status-indicator-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator-value.d.ts","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-value.tsx"],"mappings":";;;;;UAUiB,yBAAA,SAAkC,gBAAA,SAAyB,mBAAA,CAAoB,KAAA;AAAA,cAEnF,oBAAA,EAAoB,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,yBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBAkBhB,oBAAA;EAAA,KACH,KAAA,GAAQ,yBAAA;AAAA"}

package/dist/dev/ui/status-indicator/status-indicator-value.js

@@ -0,0 +1,23 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { useStatusIndicatorContext } from "./context.js";
+import { forwardRef } from "react";
+import { getStatusIndicatorDisplayValue } from "@videojs/core";
+//#region src/ui/status-indicator/status-indicator-value.tsx
+const StatusIndicatorValue = forwardRef(function StatusIndicatorValue(componentProps, forwardedRef) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const { state } = useStatusIndicatorContext();
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: forwardedRef,
+		props: [{ children: getStatusIndicatorDisplayValue(state) }, elementProps]
+	});
+});
+//#endregion
+export { StatusIndicatorValue };
+
+//# sourceMappingURL=status-indicator-value.js.map

package/dist/dev/ui/status-indicator/status-indicator-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator-value.js","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-value.tsx"],"sourcesContent":["'use client';\n\nimport { getStatusIndicatorDisplayValue, type StatusIndicatorCore } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useStatusIndicatorContext } from './context';\n\nexport interface StatusIndicatorValueProps extends UIComponentProps<'span', StatusIndicatorCore.State> {}\n\nexport const StatusIndicatorValue = forwardRef(function StatusIndicatorValue(\n  componentProps: StatusIndicatorValueProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n  const { state } = useStatusIndicatorContext();\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: forwardedRef,\n      props: [{ children: getStatusIndicatorDisplayValue(state) }, elementProps],\n    }\n  );\n});\n\nexport namespace StatusIndicatorValue {\n  export type Props = StatusIndicatorValueProps;\n}\n"],"mappings":";;;;;;AAYA,MAAa,uBAAuB,WAAW,SAAS,qBACtD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,2BAA2B;AAE7C,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK;EACL,OAAO,CAAC,EAAE,UAAU,+BAA+B,MAAM,EAAE,EAAE,aAAa;EAC3E,CACF;EACD"}

package/dist/dev/ui/time/time-value.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-value.d.ts","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"mappings":";;;;;UAWiB,UAAA,SAAmB,IAAA,CAAK,gBAAA,SAAyB,QAAA,CAAS,KAAA,gBAAqB,QAAA,CAAS,KAAA;;AAAzG;;;;;;;;;cAYa,KAAA,EAAK,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,UAAA,WAAA,OAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBA+CD,KAAA;EAAA,KACH,KAAA,GAAQ,UAAA;EAAA,KACR,KAAA,GAAQ,QAAA,CAAS,KAAA;AAAA"}
+{"version":3,"file":"time-value.d.ts","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"mappings":";;;;;UAWiB,UAAA,SAAmB,IAAA,CAAK,gBAAA,SAAyB,QAAA,CAAS,KAAA,gBAAqB,QAAA,CAAS,KAAA;;AAAzG;;;;;;;;;cAYa,KAAA,EAAK,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,UAAA,WAAA,OAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBA6ED,KAAA;EAAA,KACH,KAAA,GAAQ,UAAA;EAAA,KACR,KAAA,GAAQ,QAAA,CAAS,KAAA;AAAA"}

package/dist/dev/ui/time/time-value.js

@@ -2,9 +2,10 @@
 import { usePlayer } from "../../player/context.js";
 import { renderElement } from "../../utils/use-render.js";
 import { logMissingFeature, selectTime } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { TimeCore, TimeDataAttrs } from "@videojs/core";
+import { isInteractiveActivation } from "@videojs/utils/dom";
 //#region src/ui/time/time-value.tsx
 /**
 * Displays a formatted time value (current, duration, or remaining).
@@ -17,13 +18,19 @@ import { TimeCore, TimeDataAttrs } from "@videojs/core";
 * ```
 */
 const Value = forwardRef(function Value(componentProps, forwardedRef) {
-	const { render, className, style, type, negativeSign, label, ...elementProps } = componentProps;
+	const { render, className, style, type, negativeSign, label, toggle = false, ...elementProps } = componentProps;
 	const time = usePlayer(selectTime);
 	const [core] = useState(() => new TimeCore());
+	const defaultType = type ?? TimeCore.defaultProps.type;
+	const [activeType, setActiveType] = useState(defaultType);
+	useEffect(() => {
+		setActiveType(defaultType);
+	}, [defaultType, toggle]);
 	core.setProps({
-		type,
+		type: activeType,
 		negativeSign,
-		label
+		label,
+		toggle
 	});
 	if (!time) {
 		logMissingFeature("Time.Value", "time");
@@ -35,6 +42,22 @@ const Value = forwardRef(function Value(componentProps, forwardedRef) {
 		"aria-hidden": "true",
 		children: negativeSign ?? TimeCore.defaultProps.negativeSign
 	}), state.text] }) : state.text;
+	const toggleType = () => {
+		setActiveType((value) => {
+			if (defaultType === "current") return value === "remaining" ? "current" : "remaining";
+			return value === "duration" ? "remaining" : "duration";
+		});
+	};
+	const handleClick = (event) => {
+		if (event.defaultPrevented) return;
+		toggleType();
+	};
+	const handleKeyDown = (event) => {
+		if (event.defaultPrevented || !isInteractiveActivation(event.nativeEvent)) return;
+		event.preventDefault();
+		if (event.repeat) return;
+		toggleType();
+	};
 	return renderElement("time", {
 		render,
 		className,
@@ -46,7 +69,11 @@ const Value = forwardRef(function Value(componentProps, forwardedRef) {
 		props: [{
 			dateTime: state.datetime,
 			children: content,
-			...core.getAttrs(state)
+			...core.getAttrs(state, defaultType),
+			...toggle ? {
+				onClick: handleClick,
+				onKeyDown: handleKeyDown
+			} : void 0
 		}, elementProps]
 	});
 });

package/dist/dev/ui/time/time-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-value.js","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"sourcesContent":["'use client';\n\nimport { TimeCore, TimeDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectTime } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'children'>, TimeCore.Props {}\n\n/**\n * Displays a formatted time value (current, duration, or remaining).\n *\n * @example\n * ```tsx\n * <Time.Value />\n * <Time.Value type=\"duration\" />\n * <Time.Value type=\"remaining\" negativeSign=\"−\" />\n * ```\n */\nexport const Value = forwardRef(function Value(\n  componentProps: ValueProps,\n  forwardedRef: ForwardedRef<HTMLTimeElement>\n) {\n  const { render, className, style, type, negativeSign, label, ...elementProps } = componentProps;\n\n  const time = usePlayer(selectTime);\n\n  const [core] = useState(() => new TimeCore());\n  core.setProps({ type, negativeSign, label });\n\n  if (!time) {\n    if (__DEV__) logMissingFeature('Time.Value', 'time');\n    return null;\n  }\n\n  core.setMedia(time);\n  const state = core.getState();\n\n  const content = state.negative ? (\n    <>\n      <span aria-hidden=\"true\">{negativeSign ?? TimeCore.defaultProps.negativeSign}</span>\n      {state.text}\n    </>\n  ) : (\n    state.text\n  );\n\n  return renderElement(\n    'time',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: TimeDataAttrs,\n      ref: [forwardedRef],\n      props: [\n        {\n          dateTime: state.datetime,\n          children: content,\n          ...core.getAttrs(state),\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace Value {\n  export type Props = ValueProps;\n  export type State = TimeCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuBA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,MAAM,cAAc,OAAO,GAAG,iBAAiB;CAEjF,MAAM,OAAO,UAAU,WAAW;CAElC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;AAC7C,MAAK,SAAS;EAAE;EAAM;EAAc;EAAO,CAAC;AAE5C,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;AAGT,MAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,UAAU;CAE7B,MAAM,UAAU,MAAM,WACpB,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,eAAY;YAAQ,gBAAgB,SAAS,aAAa;EAAoB,CAAA,EACnF,MAAM,KACN,EAAA,CAAA,GAEH,MAAM;AAGR,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CACL;GACE,UAAU,MAAM;GAChB,UAAU;GACV,GAAG,KAAK,SAAS,MAAM;GACxB,EACD,aACD;EACF,CACF;EACD"}
+{"version":3,"file":"time-value.js","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"sourcesContent":["'use client';\n\nimport { TimeCore, TimeDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectTime } from '@videojs/core/dom';\nimport { isInteractiveActivation } from '@videojs/utils/dom';\nimport type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';\nimport { forwardRef, useEffect, useState } from 'react';\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'children'>, TimeCore.Props {}\n\n/**\n * Displays a formatted time value (current, duration, or remaining).\n *\n * @example\n * ```tsx\n * <Time.Value />\n * <Time.Value type=\"duration\" />\n * <Time.Value type=\"remaining\" negativeSign=\"−\" />\n * ```\n */\nexport const Value = forwardRef(function Value(\n  componentProps: ValueProps,\n  forwardedRef: ForwardedRef<HTMLTimeElement>\n) {\n  const { render, className, style, type, negativeSign, label, toggle = false, ...elementProps } = componentProps;\n\n  const time = usePlayer(selectTime);\n  const [core] = useState(() => new TimeCore());\n\n  const defaultType = type ?? TimeCore.defaultProps.type;\n  const [activeType, setActiveType] = useState(defaultType);\n  // biome-ignore lint/correctness/useExhaustiveDependencies: We want to listen for changes to defaultType and toggle (so we revert to default), this just means one less useEffect.\n  useEffect(() => {\n    setActiveType(defaultType);\n  }, [defaultType, toggle]);\n\n  core.setProps({ type: activeType, negativeSign, label, toggle });\n\n  if (!time) {\n    if (__DEV__) logMissingFeature('Time.Value', 'time');\n    return null;\n  }\n\n  core.setMedia(time);\n  const state = core.getState();\n\n  const content = state.negative ? (\n    <>\n      <span aria-hidden=\"true\">{negativeSign ?? TimeCore.defaultProps.negativeSign}</span>\n      {state.text}\n    </>\n  ) : (\n    state.text\n  );\n\n  const toggleType = () => {\n    setActiveType((value) => {\n      if (defaultType === 'current') {\n        return value === 'remaining' ? 'current' : 'remaining';\n      }\n      return value === 'duration' ? 'remaining' : 'duration';\n    });\n  };\n\n  const handleClick = (event: MouseEvent<HTMLTimeElement>) => {\n    if (event.defaultPrevented) return;\n    toggleType();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLTimeElement>) => {\n    if (event.defaultPrevented || !isInteractiveActivation(event.nativeEvent)) return;\n    // Prevent space from scrolling page.\n    event.preventDefault();\n    if (event.repeat) return;\n    toggleType();\n  };\n\n  return renderElement(\n    'time',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: TimeDataAttrs,\n      ref: [forwardedRef],\n      props: [\n        {\n          dateTime: state.datetime,\n          children: content,\n          ...core.getAttrs(state, defaultType),\n          ...(toggle ? { onClick: handleClick, onKeyDown: handleKeyDown } : undefined),\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace Value {\n  export type Props = ValueProps;\n  export type State = TimeCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuBA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,MAAM,cAAc,OAAO,SAAS,OAAO,GAAG,iBAAiB;CAEjG,MAAM,OAAO,UAAU,WAAW;CAClC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;CAE7C,MAAM,cAAc,QAAQ,SAAS,aAAa;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,YAAY;AAEzD,iBAAgB;AACd,gBAAc,YAAY;IACzB,CAAC,aAAa,OAAO,CAAC;AAEzB,MAAK,SAAS;EAAE,MAAM;EAAY;EAAc;EAAO;EAAQ,CAAC;AAEhE,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;AAGT,MAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,UAAU;CAE7B,MAAM,UAAU,MAAM,WACpB,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,eAAY;YAAQ,gBAAgB,SAAS,aAAa;EAAoB,CAAA,EACnF,MAAM,KACN,EAAA,CAAA,GAEH,MAAM;CAGR,MAAM,mBAAmB;AACvB,iBAAe,UAAU;AACvB,OAAI,gBAAgB,UAClB,QAAO,UAAU,cAAc,YAAY;AAE7C,UAAO,UAAU,aAAa,cAAc;IAC5C;;CAGJ,MAAM,eAAe,UAAuC;AAC1D,MAAI,MAAM,iBAAkB;AAC5B,cAAY;;CAGd,MAAM,iBAAiB,UAA0C;AAC/D,MAAI,MAAM,oBAAoB,CAAC,wBAAwB,MAAM,YAAY,CAAE;AAE3E,QAAM,gBAAgB;AACtB,MAAI,MAAM,OAAQ;AAClB,cAAY;;AAGd,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CACL;GACE,UAAU,MAAM;GAChB,UAAU;GACV,GAAG,KAAK,SAAS,OAAO,YAAY;GACpC,GAAI,SAAS;IAAE,SAAS;IAAa,WAAW;IAAe,GAAG,KAAA;GACnE,EACD,aACD;EACF,CACF;EACD"}

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

@@ -1 +1 @@
-{"version":3,"file":"time-slider-root.d.ts","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"mappings":";;;;;UAgBiB,mBAAA,SAA4B,gBAAA,QAAwB,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;EACzG,WAAA;EACA,SAAA;AAAA;AAAA,cAGW,cAAA,EAAc,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,mBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAgGV,cAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}
+{"version":3,"file":"time-slider-root.d.ts","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"mappings":";;;;;UAgBiB,mBAAA,SAA4B,gBAAA,QAAwB,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;EACzG,WAAA;EACA,SAAA;AAAA;AAAA,cAGW,cAAA,EAAc,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,mBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBA+GV,cAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}

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

@@ -4,17 +4,18 @@ 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 { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectTime } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
+import { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectPlayback, selectTime } from "@videojs/core/dom";
+import { forwardRef, useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { TimeSliderCore, TimeSliderDataAttrs } from "@videojs/core";
 import { formatTime } from "@videojs/utils/time";
 //#region src/ui/time-slider/time-slider-root.tsx
 const noopSeek = () => Promise.resolve(0);
 const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwardedRef) {
-	const { render, className, style, label, changeThrottle = TimeSliderCore.defaultProps.changeThrottle, step = TimeSliderCore.defaultProps.step, largeStep = TimeSliderCore.defaultProps.largeStep, orientation, disabled, thumbAlignment, onDragStart, onDragEnd, ...elementProps } = componentProps;
+	const { render, className, style, label, changeThrottle = TimeSliderCore.defaultProps.changeThrottle, step = TimeSliderCore.defaultProps.step, largeStep = TimeSliderCore.defaultProps.largeStep, orientation, disabled, thumbAlignment, onDragStart, onDragEnd, pauseOnDrag, ...elementProps } = componentProps;
 	const time = usePlayer(selectTime);
 	const buffer = usePlayer(selectBuffer);
+	const playback = usePlayer(selectPlayback);
 	const [core] = useState(() => new TimeSliderCore());
 	core.setProps({
 		label,
@@ -22,12 +23,17 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 		largeStep,
 		orientation,
 		disabled,
-		thumbAlignment
+		thumbAlignment,
+		pauseOnDrag
 	});
 	const mediaRef = useLatestRef(time && buffer ? {
 		...time,
 		...buffer
 	} : null);
+	const playbackRef = useLatestRef(playback);
+	useEffect(() => {
+		return () => core.endDrag(playbackRef.current);
+	}, [core]);
 	const duration = time?.duration ?? 0;
 	const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
 		computeState: (input) => {
@@ -58,8 +64,14 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 			const media = mediaRef.current;
 			if (media) media.seek(core.rawValueFromPercent(percent));
 		},
-		onDragStart,
-		onDragEnd
+		onDragStart: () => {
+			core.startDrag(playbackRef.current);
+			onDragStart?.();
+		},
+		onDragEnd: () => {
+			core.endDrag(playbackRef.current);
+			onDragEnd?.();
+		}
 	});
 	if (!time) {
 		logMissingFeature("TimeSlider", "time");

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

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

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

@@ -1,7 +1,11 @@
-import { TooltipApi } from "@videojs/core/dom";
+import { MediaContainer, PositioningBoundary, TooltipApi } from "@videojs/core/dom";
 import { StateAttrMap as StateAttrMap$1, TooltipCore } from "@videojs/core";
 
 //#region src/ui/tooltip/context.d.ts
+interface TooltipContent {
+  label?: string | undefined;
+  shortcut?: string | undefined;
+}
 interface TooltipContextValue {
   core: TooltipCore;
   tooltip: TooltipApi;
@@ -9,11 +13,13 @@ interface TooltipContextValue {
   stateAttrMap: StateAttrMap$1<TooltipCore.State>;
   anchorName: string;
   popupId: string;
-  content: string | undefined;
-  setContent: (content: string | undefined) => void;
+  content: TooltipContent | undefined;
+  setContent: (content: TooltipContent | undefined) => void;
+  boundary: PositioningBoundary;
+  container: MediaContainer | null;
 }
 declare function useTooltipContext(): TooltipContextValue;
 declare function useOptionalTooltipContext(): TooltipContextValue | null;
 //#endregion
-export { TooltipContextValue, useOptionalTooltipContext, useTooltipContext };
+export { TooltipContent, TooltipContextValue, useOptionalTooltipContext, useTooltipContext };
 //# sourceMappingURL=context.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"mappings":";;;;UAMiB,mBAAA;EACf,IAAA,EAAM,WAAA;EACN,OAAA,EAAS,UAAA;EACT,KAAA,EAAO,WAAA,CAAY,KAAA;EACnB,YAAA,EAAc,cAAA,CAAa,WAAA,CAAY,KAAA;EACvC,UAAA;EACA,OAAA;EACA,OAAA;EACA,UAAA,GAAa,OAAA;AAAA;AAAA,iBAOC,iBAAA,CAAA,GAAqB,mBAAA;AAAA,iBAMrB,yBAAA,CAAA,GAA6B,mBAAA"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"mappings":";;;;UAMiB,cAAA;EACf,KAAA;EACA,QAAA;AAAA;AAAA,UAGe,mBAAA;EACf,IAAA,EAAM,WAAA;EACN,OAAA,EAAS,UAAA;EACT,KAAA,EAAO,WAAA,CAAY,KAAA;EACnB,YAAA,EAAc,cAAA,CAAa,WAAA,CAAY,KAAA;EACvC,UAAA;EACA,OAAA;EACA,OAAA,EAAS,cAAA;EACT,UAAA,GAAa,OAAA,EAAS,cAAA;EACtB,QAAA,EAAU,mBAAA;EACV,SAAA,EAAW,cAAA;AAAA;AAAA,iBAOG,iBAAA,CAAA,GAAqB,mBAAA;AAAA,iBAMrB,yBAAA,CAAA,GAA6B,mBAAA"}

package/dist/dev/ui/tooltip/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"sourcesContent":["'use client';\n\nimport type { StateAttrMap, TooltipCore } from '@videojs/core';\nimport type { TooltipApi } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface TooltipContextValue {\n  core: TooltipCore;\n  tooltip: TooltipApi;\n  state: TooltipCore.State;\n  stateAttrMap: StateAttrMap<TooltipCore.State>;\n  anchorName: string;\n  popupId: string;\n  content: string | undefined;\n  setContent: (content: string | undefined) => void;\n}\n\nconst TooltipContext = createContext<TooltipContextValue | null>(null);\n\nexport const TooltipContextProvider = TooltipContext.Provider;\n\nexport function useTooltipContext(): TooltipContextValue {\n  const ctx = useContext(TooltipContext);\n  if (!ctx) throw new Error('Tooltip compound components must be used within a Tooltip.Root');\n  return ctx;\n}\n\nexport function useOptionalTooltipContext(): TooltipContextValue | null {\n  return useContext(TooltipContext);\n}\n"],"mappings":";;;AAiBA,MAAM,iBAAiB,cAA0C,KAAK;AAEtE,MAAa,yBAAyB,eAAe;AAErD,SAAgB,oBAAyC;CACvD,MAAM,MAAM,WAAW,eAAe;AACtC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,iEAAiE;AAC3F,QAAO;;AAGT,SAAgB,4BAAwD;AACtE,QAAO,WAAW,eAAe"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"sourcesContent":["'use client';\n\nimport type { StateAttrMap, TooltipCore } from '@videojs/core';\nimport type { MediaContainer, PositioningBoundary, TooltipApi } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface TooltipContent {\n  label?: string | undefined;\n  shortcut?: string | undefined;\n}\n\nexport interface TooltipContextValue {\n  core: TooltipCore;\n  tooltip: TooltipApi;\n  state: TooltipCore.State;\n  stateAttrMap: StateAttrMap<TooltipCore.State>;\n  anchorName: string;\n  popupId: string;\n  content: TooltipContent | undefined;\n  setContent: (content: TooltipContent | undefined) => void;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n}\n\nconst TooltipContext = createContext<TooltipContextValue | null>(null);\n\nexport const TooltipContextProvider = TooltipContext.Provider;\n\nexport function useTooltipContext(): TooltipContextValue {\n  const ctx = useContext(TooltipContext);\n  if (!ctx) throw new Error('Tooltip compound components must be used within a Tooltip.Root');\n  return ctx;\n}\n\nexport function useOptionalTooltipContext(): TooltipContextValue | null {\n  return useContext(TooltipContext);\n}\n"],"mappings":";;;AAwBA,MAAM,iBAAiB,cAA0C,KAAK;AAEtE,MAAa,yBAAyB,eAAe;AAErD,SAAgB,oBAAyC;CACvD,MAAM,MAAM,WAAW,eAAe;AACtC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,iEAAiE;AAC3F,QAAO;;AAGT,SAAgB,4BAAwD;AACtE,QAAO,WAAW,eAAe"}

package/dist/dev/ui/tooltip/index.d.ts

@@ -1,3 +1,3 @@
-import { TooltipContextValue, useOptionalTooltipContext, useTooltipContext } from "./context.js";
+import { TooltipContent, TooltipContextValue, useOptionalTooltipContext, useTooltipContext } from "./context.js";
 import { index_parts_d_exports } from "./index.parts.js";
-export { index_parts_d_exports as Tooltip, type TooltipContextValue, useOptionalTooltipContext, useTooltipContext };
+export { index_parts_d_exports as Tooltip, type TooltipContent, type TooltipContextValue, useOptionalTooltipContext, useTooltipContext };

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

@@ -1,12 +1,14 @@
 import { TooltipArrow, TooltipArrowProps } from "./tooltip-arrow.js";
+import { TooltipLabel, TooltipLabelProps } from "./tooltip-label.js";
 import { TooltipPopup, TooltipPopupProps } from "./tooltip-popup.js";
 import { TooltipProvider, TooltipProviderProps } from "./tooltip-provider.js";
 import { TooltipRoot, TooltipRootProps } from "./tooltip-root.js";
+import { TooltipShortcut, TooltipShortcutProps } from "./tooltip-shortcut.js";
 import { TooltipTrigger, TooltipTriggerProps } from "./tooltip-trigger.js";
 
 //#region src/ui/tooltip/index.parts.d.ts
 declare namespace index_parts_d_exports {
-  export { TooltipArrow as Arrow, TooltipArrowProps as ArrowProps, TooltipPopup as Popup, TooltipPopupProps as PopupProps, TooltipProvider as Provider, TooltipProviderProps as ProviderProps, TooltipRoot as Root, TooltipRootProps as RootProps, TooltipTrigger as Trigger, TooltipTriggerProps as TriggerProps };
+  export { TooltipArrow as Arrow, TooltipArrowProps as ArrowProps, TooltipLabel as Label, TooltipLabelProps as LabelProps, TooltipPopup as Popup, TooltipPopupProps as PopupProps, TooltipProvider as Provider, TooltipProviderProps as ProviderProps, TooltipRoot as Root, TooltipRootProps as RootProps, TooltipShortcut as Shortcut, TooltipShortcutProps as ShortcutProps, TooltipTrigger as Trigger, TooltipTriggerProps as TriggerProps };
 }
 //#endregion
 export { index_parts_d_exports };

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

@@ -1,5 +1,7 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { TooltipArrow } from "./tooltip-arrow.js";
+import { TooltipLabel } from "./tooltip-label.js";
+import { TooltipShortcut } from "./tooltip-shortcut.js";
 import { TooltipPopup } from "./tooltip-popup.js";
 import { TooltipProvider } from "./tooltip-provider.js";
 import { TooltipRoot } from "./tooltip-root.js";
@@ -7,9 +9,11 @@ import { TooltipTrigger } from "./tooltip-trigger.js";
 //#region src/ui/tooltip/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Arrow: () => TooltipArrow,
+	Label: () => TooltipLabel,
 	Popup: () => TooltipPopup,
 	Provider: () => TooltipProvider,
 	Root: () => TooltipRoot,
+	Shortcut: () => TooltipShortcut,
 	Trigger: () => TooltipTrigger
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/tooltip/index.parts.ts"],"sourcesContent":["export { TooltipArrow as Arrow, type TooltipArrowProps as ArrowProps } from './tooltip-arrow';\nexport { TooltipPopup as Popup, type TooltipPopupProps as PopupProps } from './tooltip-popup';\nexport { TooltipProvider as Provider, type TooltipProviderProps as ProviderProps } from './tooltip-provider';\nexport { TooltipRoot as Root, type TooltipRootProps as RootProps } from './tooltip-root';\nexport { TooltipTrigger as Trigger, type TooltipTriggerProps as TriggerProps } from './tooltip-trigger';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/tooltip/index.parts.ts"],"sourcesContent":["export { TooltipArrow as Arrow, type TooltipArrowProps as ArrowProps } from './tooltip-arrow';\nexport { TooltipLabel as Label, type TooltipLabelProps as LabelProps } from './tooltip-label';\nexport { TooltipPopup as Popup, type TooltipPopupProps as PopupProps } from './tooltip-popup';\nexport { TooltipProvider as Provider, type TooltipProviderProps as ProviderProps } from './tooltip-provider';\nexport { TooltipRoot as Root, type TooltipRootProps as RootProps } from './tooltip-root';\nexport { TooltipShortcut as Shortcut, type TooltipShortcutProps as ShortcutProps } from './tooltip-shortcut';\nexport { TooltipTrigger as Trigger, type TooltipTriggerProps as TriggerProps } from './tooltip-trigger';\n"],"mappings":""}

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

@@ -1,6 +1,6 @@
 "use client";
-import { createContextPart } from "../create-context-part.js";
 import { useTooltipContext } from "./context.js";
+import { createContextPart } from "../create-context-part.js";
 //#region src/ui/tooltip/tooltip-arrow.tsx
 /** Decorative arrow pointing from the tooltip toward the trigger. Hidden from assistive technology. */
 const TooltipArrow = createContextPart({

package/dist/dev/ui/tooltip/tooltip-label.d.ts

@@ -0,0 +1,15 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as _$react from "react";
+import { TooltipState } from "@videojs/core";
+
+//#region src/ui/tooltip/tooltip-label.d.ts
+interface TooltipLabelProps extends UIComponentProps<'span', TooltipState> {}
+/** Tooltip body label; defaults to context `content.label` from the linked trigger. */
+declare const TooltipLabel: _$react.ForwardRefExoticComponent<Omit<TooltipLabelProps, "ref"> & _$react.RefAttributes<HTMLSpanElement>>;
+declare namespace TooltipLabel {
+  type Props = TooltipLabelProps;
+  type State = TooltipState;
+}
+//#endregion
+export { TooltipLabel, TooltipLabelProps };
+//# sourceMappingURL=tooltip-label.d.ts.map

package/dist/dev/ui/tooltip/tooltip-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-label.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-label.tsx"],"mappings":";;;;;UASiB,iBAAA,SAA0B,gBAAA,SAAyB,YAAA;;cAGvD,YAAA,EAAY,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBAmBR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}

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

@@ -0,0 +1,24 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { useTooltipContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/tooltip/tooltip-label.tsx
+/** Tooltip body label; defaults to context `content.label` from the linked trigger. */
+const TooltipLabel = forwardRef(function TooltipLabel({ render, className, style, children, ...elementProps }, forwardedRef) {
+	const { state, stateAttrMap, content } = useTooltipContext();
+	const body = children !== void 0 ? children : content?.label ?? "";
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: forwardedRef,
+		props: [elementProps, { children: body }]
+	});
+});
+//#endregion
+export { TooltipLabel };
+
+//# sourceMappingURL=tooltip-label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-label.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-label.tsx"],"sourcesContent":["'use client';\n\nimport type { TooltipState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipLabelProps extends UIComponentProps<'span', TooltipState> {}\n\n/** Tooltip body label; defaults to context `content.label` from the linked trigger. */\nexport const TooltipLabel = forwardRef<HTMLSpanElement, TooltipLabelProps>(function TooltipLabel(\n  { render, className, style, children, ...elementProps },\n  forwardedRef\n) {\n  const { state, stateAttrMap, content } = useTooltipContext();\n  const body = children !== undefined ? children : (content?.label ?? '');\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [elementProps, { children: body }],\n    }\n  );\n});\n\nexport namespace TooltipLabel {\n  export type Props = TooltipLabelProps;\n  export type State = TooltipState;\n}\n"],"mappings":";;;;;;AAYA,MAAa,eAAe,WAA+C,SAAS,aAClF,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EAAE,OAAO,cAAc,YAAY,mBAAmB;CAC5D,MAAM,OAAO,aAAa,KAAA,IAAY,WAAY,SAAS,SAAS;AAEpE,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC,cAAc,EAAE,UAAU,MAAM,CAAC;EAC1C,CACF;EACD"}

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

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

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

@@ -2,8 +2,11 @@
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useTooltipContext } from "./context.js";
-import { getAnchorPositionStyle, getPopupPositionRect, resolveOffsets } from "@videojs/core/dom";
+import { TooltipLabel } from "./tooltip-label.js";
+import { TooltipShortcut } from "./tooltip-shortcut.js";
+import { getAnchorPositionStyle, getPopupPositionRect, getPositioningBoundaryRect, isEventWithinElement, resolveOffsets, resolvePositioningBoundary } from "@videojs/core/dom";
 import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { TooltipCSSVars } from "@videojs/core";
 import { supportsAnchorPositioning } from "@videojs/utils/dom";
 //#region src/ui/tooltip/tooltip-popup.tsx
@@ -13,8 +16,8 @@ const POPUP_RESET = {
 	margin: 0
 };
 /** Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */
-const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style, ...elementProps }, forwardedRef) {
-	const { core, tooltip, state, stateAttrMap, anchorName, popupId, content } = useTooltipContext();
+const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style, children, ...elementProps }, forwardedRef) {
+	const { core, tooltip, state, stateAttrMap, anchorName, popupId, boundary, container } = useTooltipContext();
 	const internalRef = useRef(null);
 	const composedRef = useComposedRefs(forwardedRef, useCallback((el) => {
 		tooltip.setPopupElement(el);
@@ -31,7 +34,6 @@ const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style
 	}, [anchorName, posOpts]);
 	const [manualStyle, setManualStyle] = useState(null);
 	useLayoutEffect(() => {
-		if (supportsAnchorPositioning()) return;
 		if (!state.open) {
 			setManualStyle(null);
 			return;
@@ -40,13 +42,24 @@ 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(), getPopupPositionRect(popupEl), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl, TooltipCSSVars), TooltipCSSVars));
+			const triggerRect = triggerEl.getBoundingClientRect();
+			const boundaryElement = resolvePositioningBoundary(boundary, {
+				container,
+				root: popupEl.getRootNode()
+			});
+			const { positionAnchor: _, ...nextStyle } = getAnchorPositionStyle(anchorName, posOpts, triggerRect, supportsAnchorPositioning() ? void 0 : getPopupPositionRect(popupEl), getPositioningBoundaryRect(boundaryElement), resolveOffsets(popupEl, TooltipCSSVars), TooltipCSSVars);
+			setManualStyle(nextStyle);
 		}
 		measure();
 		const triggerEl = tooltip.triggerElement;
 		const popupEl = internalRef.current;
+		const boundaryElement = popupEl ? resolvePositioningBoundary(boundary, {
+			container,
+			root: popupEl.getRootNode()
+		}) : null;
 		let rafId = 0;
-		function reposition() {
+		function reposition(event) {
+			if (event && isEventWithinElement(event, internalRef.current)) return;
 			cancelAnimationFrame(rafId);
 			rafId = requestAnimationFrame(measure);
 		}
@@ -56,6 +69,7 @@ const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style
 		}) : null;
 		if (triggerEl && resizeObserver) resizeObserver.observe(triggerEl);
 		if (popupEl && resizeObserver) resizeObserver.observe(popupEl);
+		if (boundaryElement && resizeObserver) resizeObserver.observe(boundaryElement);
 		window.addEventListener("scroll", reposition, {
 			capture: true,
 			passive: true
@@ -71,10 +85,13 @@ const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style
 		state.open,
 		anchorName,
 		posOpts,
-		tooltip
+		tooltip,
+		boundary,
+		container
 	]);
-	const positioningStyle = anchorStyle ?? manualStyle ?? POPUP_RESET;
+	const positioningStyle = manualStyle ?? anchorStyle ?? POPUP_RESET;
 	if (!state.open) return null;
+	const body = children !== void 0 ? children : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TooltipLabel, {}), /* @__PURE__ */ jsx(TooltipShortcut, {})] });
 	const { onFocusOut, ...restPopupProps } = tooltip.popupProps;
 	return renderElement("div", {
 		render,
@@ -90,7 +107,7 @@ const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style
 				style: positioningStyle,
 				...core.getPopupAttrs(state)
 			},
-			{ children: content },
+			{ children: body },
 			{
 				...restPopupProps,
 				onBlur: onFocusOut

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, 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, content } = 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        // Forwarded content as default children — explicit children override.\n        { children: content },\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,SAAS,YAAY,mBAAmB;CAChG,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,KAAA,GACA,KAAA,GACA,KAAA,GACA,KAAA,GACA,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;GAED,EAAE,UAAU,SAAS;GACrB;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 { TooltipCSSVars, type TooltipState } from '@videojs/core';\nimport {\n  getAnchorPositionStyle,\n  getPopupPositionRect,\n  getPositioningBoundaryRect,\n  isEventWithinElement,\n  resolveOffsets,\n  resolvePositioningBoundary,\n} 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';\nimport { TooltipLabel } from './tooltip-label';\nimport { TooltipShortcut } from './tooltip-shortcut';\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, children, ...elementProps },\n  forwardedRef\n) {\n  const { core, tooltip, state, stateAttrMap, anchorName, popupId, boundary, container } = 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 unrecognized 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 (!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 root = popupEl.getRootNode() as Document | ShadowRoot;\n      const boundaryElement = resolvePositioningBoundary(boundary, { container, root });\n      const popupRect = supportsAnchorPositioning() ? undefined : getPopupPositionRect(popupEl);\n      const boundaryRect = getPositioningBoundaryRect(boundaryElement);\n      const offsets = resolveOffsets(popupEl, TooltipCSSVars);\n\n      const { positionAnchor: _, ...nextStyle } = getAnchorPositionStyle(\n        anchorName,\n        posOpts,\n        triggerRect,\n        popupRect,\n        boundaryRect,\n        offsets,\n        TooltipCSSVars\n      );\n\n      setManualStyle(nextStyle as CSSProperties);\n    }\n\n    measure();\n    const triggerEl = tooltip.triggerElement;\n    const popupEl = internalRef.current;\n    const boundaryElement = popupEl\n      ? resolvePositioningBoundary(boundary, {\n          container,\n          root: popupEl.getRootNode() as Document | ShadowRoot,\n        })\n      : null;\n\n    let rafId = 0;\n    function reposition(event?: Event): void {\n      if (event && isEventWithinElement(event, internalRef.current)) return;\n\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    if (boundaryElement && resizeObserver) {\n      resizeObserver.observe(boundaryElement);\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, boundary, container]);\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 = manualStyle ?? anchorStyle ?? POPUP_RESET;\n\n  // --- Visibility ---\n\n  if (!state.open) {\n    return null;\n  }\n\n  const body =\n    children !== undefined ? (\n      children\n    ) : (\n      <>\n        <TooltipLabel />\n        <TooltipShortcut />\n      </>\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        { children: body },\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":";;;;;;;;;;;;AAwBA,MAAM,cAA6B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGlF,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,SAAS,UAAU,cAAc,mBAAmB;CAC5G,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,KAAA,GACA,KAAA,GACA,KAAA,GACA,KAAA,GACA,eACD;AACD,SAAO;IACN,CAAC,YAAY,QAAQ,CAAC;CAGzB,MAAM,CAAC,aAAa,kBAAkB,SAA+B,KAAK;AAE1E,uBAAsB;AACpB,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;GAE5B,MAAM,cAAc,UAAU,uBAAuB;GAErD,MAAM,kBAAkB,2BAA2B,UAAU;IAAE;IAAW,MAD7D,QAAQ,aAAa;IAC8C,CAAC;GAKjF,MAAM,EAAE,gBAAgB,GAAG,GAAG,cAAc,uBAC1C,YACA,SACA,aAPgB,2BAA2B,GAAG,KAAA,IAAY,qBAAqB,QAAQ,EACpE,2BAA2B,gBAAgB,EAChD,eAAe,SAAS,eAAe,EASrD,eACD;AAED,kBAAe,UAA2B;;AAG5C,WAAS;EACT,MAAM,YAAY,QAAQ;EAC1B,MAAM,UAAU,YAAY;EAC5B,MAAM,kBAAkB,UACpB,2BAA2B,UAAU;GACnC;GACA,MAAM,QAAQ,aAAa;GAC5B,CAAC,GACF;EAEJ,IAAI,QAAQ;EACZ,SAAS,WAAW,OAAqB;AACvC,OAAI,SAAS,qBAAqB,OAAO,YAAY,QAAQ,CAAE;AAE/D,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;AAEjC,MAAI,mBAAmB,eACrB,gBAAe,QAAQ,gBAAgB;AAGzC,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;EAAS;EAAU;EAAU,CAAC;CAInE,MAAM,mBAAmB,eAAe,eAAe;AAIvD,KAAI,CAAC,MAAM,KACT,QAAO;CAGT,MAAM,OACJ,aAAa,KAAA,IACX,WAEA,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,cAAD,EAAgB,CAAA,EAChB,oBAAC,iBAAD,EAAmB,CAAA,CAClB,EAAA,CAAA;CAIP,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,EAAE,UAAU,MAAM;GAClB;IAAE,GAAG;IAAgB,QAAQ;IAAY;GACzC;GACD;EACF,CACF;EACD"}