@videojs/react 10.0.0-beta.9 → 10.0.0-rc.1

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

@@ -0,0 +1,28 @@
+import { useMedia } from "../player/context.js";
+import { useDestroy } from "./use-destroy.js";
+import { HTMLMediaAdapter, addMediaExtension } from "@videojs/media/dom";
+import { useEffect, useState } from "react";
+//#region src/utils/use-media-extension.ts
+/**
+* Create a media extension and register it with the media provided by the surrounding player context.
+*
+* Instantiates the extension class once, registers it when a media adapter is available, follows the media when it
+* changes, and destroys the extension on unmount. Media that is not a media adapter (e.g. a plain `<video>` element)
+* cannot carry media extensions and is ignored.
+*
+* @param ExtensionClass - Media extension class to instantiate and register.
+*/
+function useMediaExtension(ExtensionClass) {
+	const media = useMedia();
+	const [component] = useState(() => new ExtensionClass());
+	useDestroy(component);
+	useEffect(() => {
+		if (!(media instanceof HTMLMediaAdapter)) return;
+		return addMediaExtension(media, component);
+	}, [media, component]);
+	return component;
+}
+//#endregion
+export { useMediaExtension };
+
+//# sourceMappingURL=use-media-extension.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-extension.js","names":[],"sources":["../../../src/utils/use-media-extension.ts"],"sourcesContent":["import { addMediaExtension, HTMLMediaAdapter, type HTMLMediaTargetLike, type MediaExtension } from '@videojs/media/dom';\nimport { useEffect, useState } from 'react';\n\nimport { useMedia } from '../player/context';\nimport { useDestroy } from './use-destroy';\n\n/**\n * Create a media extension and register it with the media provided by the surrounding player context.\n *\n * Instantiates the extension class once, registers it when a media adapter is available, follows the media when it\n * changes, and destroys the extension on unmount. Media that is not a media adapter (e.g. a plain `<video>` element)\n * cannot carry media extensions and is ignored.\n *\n * @param ExtensionClass - Media extension class to instantiate and register.\n */\nexport function useMediaExtension<Component extends MediaExtension & { destroy(): void }>(\n  ExtensionClass: new () => Component\n): Component {\n  const media = useMedia();\n  const [component] = useState(() => new ExtensionClass());\n\n  useDestroy(component);\n\n  useEffect(() => {\n    if (!(media instanceof HTMLMediaAdapter)) return;\n\n    return addMediaExtension(media as HTMLMediaAdapter<HTMLMediaTargetLike, any>, component);\n  }, [media, component]);\n\n  return component;\n}\n"],"mappings":";;;;;;;;;;;;;;AAeA,SAAgB,kBACd,gBACW;CACX,MAAM,QAAQ,SAAS;CACvB,MAAM,CAAC,aAAa,eAAe,IAAI,eAAe,CAAC;CAEvD,WAAW,SAAS;CAEpB,gBAAgB;EACd,IAAI,EAAE,iBAAiB,mBAAmB;EAE1C,OAAO,kBAAkB,OAAqD,SAAS;CACzF,GAAG,CAAC,OAAO,SAAS,CAAC;CAErB,OAAO;AACT"}

package/dist/dev/utils/use-media-instance.d.ts

@@ -0,0 +1,21 @@
+import { Media } from "@videojs/media";
+//#region src/utils/use-media-instance.d.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 → HlsJsVideo).
+ *
+ * An optional `setup` callback runs once on mount — e.g. to add media components via `addMediaExtension`. Components
+ * registered there are destroyed together with the media instance on unmount (`media.destroy()` destroys all of its
+ * registered components).
+ *
+ * @param MediaClass - Media class to instantiate and attach to the current player.
+ * @param setup - Optional callback run once before the instance is attached.
+ */
+declare function useMediaInstance<Instance extends Media & {
+  destroy(): void;
+}>(MediaClass: new () => Instance, setup?: (media: Instance) => void): Instance;
+//#endregion
+export { useMediaInstance };
+//# sourceMappingURL=use-media-instance.d.ts.map

package/dist/dev/utils/use-media-instance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-instance.d.ts","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"mappings":";;;;;;;;;;;;;;;iBAmBgB,iBAAiB,iBAAiB;EAAU;GAC1D,sBAAsB,UACtB,SAAS,OAAO,oBACf"}

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

@@ -0,0 +1,30 @@
+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 → HlsJsVideo).
+*
+* An optional `setup` callback runs once on mount — e.g. to add media components via `addMediaExtension`. Components
+* registered there are destroyed together with the media instance on unmount (`media.destroy()` destroys all of its
+* registered components).
+*
+* @param MediaClass - Media class to instantiate and attach to the current player.
+* @param setup - Optional callback run once before the instance is attached.
+*/
+function useMediaInstance(MediaClass, setup) {
+	const [instance] = useState(() => new MediaClass());
+	const setMedia = useMediaAttach();
+	useDestroy(instance, () => {
+		setup?.(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":["import type { Media } from '@videojs/media';\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, and safely detaches on unmount using a\n * functional updater to avoid race conditions when swapping media components (e.g. DashVideo → HlsJsVideo).\n *\n * An optional `setup` callback runs once on mount — e.g. to add media components via `addMediaExtension`. Components\n * registered there are destroyed together with the media instance on unmount (`media.destroy()` destroys all of its\n * registered components).\n *\n * @param MediaClass - Media class to instantiate and attach to the current player.\n * @param setup - Optional callback run once before the instance is attached.\n */\nexport function useMediaInstance<Instance extends Media & { destroy(): void }>(\n  MediaClass: new () => Instance,\n  setup?: (media: Instance) => void\n): Instance {\n  const [instance] = useState(() => new MediaClass());\n  const setMedia = useMediaAttach();\n\n  useDestroy(\n    instance,\n    () => {\n      setup?.(instance);\n      setMedia?.(instance);\n    },\n    () => setMedia?.((prev) => (prev === instance ? null : prev))\n  );\n\n  return instance;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,SAAgB,iBACd,YACA,OACU;CACV,MAAM,CAAC,YAAY,eAAe,IAAI,WAAW,CAAC;CAClD,MAAM,WAAW,eAAe;CAEhC,WACE,gBACM;EACJ,QAAQ,QAAQ;EAChB,WAAW,QAAQ;CACrB,SACM,YAAY,SAAU,SAAS,WAAW,OAAO,IAAK,CAC9D;CAEA,OAAO;AACT"}

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

@@ -1,7 +1,6 @@
 import { RenderProp } from "./types.js";
 import { StateAttrMap } from "@videojs/core/dom";
 import { CSSProperties, ReactElement, Ref } from "react";
-
 //#region src/utils/use-render.d.ts
 type IntrinsicTagName = keyof React.JSX.IntrinsicElements;
 interface UseRenderComponentProps<State> {
@@ -18,22 +17,19 @@ interface UseRenderParameters<State, RenderedElementType extends Element> {
 /**
  * Render a UI component element.
  *
- * Handles:
- * - Default tag rendering
- * - Render prop (element or function)
- * - Props merging (event handlers chained, className concatenated, style merged)
- * - Ref composition
- * - className/style as functions of state
+ * Handles: - Default tag rendering - Render prop (element or function) - Props merging (event handlers chained,
+ * className concatenated, style merged) - Ref composition - className/style as functions of state
  *
- * @public
  * @example
- * ```tsx
- * return renderElement('button', componentProps, {
- *   state,
- *   ref: [forwardedRef, buttonRef],
- *   props: [{ type: 'button' }, elementProps, getButtonProps],
- * });
- * ```
+ *   ```tsx
+ *   return renderElement('button', componentProps, {
+ *     state,
+ *     ref: [forwardedRef, buttonRef],
+ *     props: [{ type: 'button' }, elementProps, getButtonProps],
+ *   });
+ *   ```;
+ *
+ * @public
  */
 declare function renderElement<State extends object, RenderedElementType extends Element, TagName extends IntrinsicTagName>(element: TagName, componentProps: UseRenderComponentProps<State>, params: UseRenderParameters<State, RenderedElementType>): ReactElement | null;
 declare namespace renderElement {
@@ -41,5 +37,5 @@ declare namespace renderElement {
   type Parameters<State, RenderedElementType extends Element> = UseRenderParameters<State, RenderedElementType>;
 }
 //#endregion
-export { renderElement };
+export { UseRenderComponentProps, UseRenderParameters, renderElement };
 //# sourceMappingURL=use-render.d.ts.map

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":";;;;;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"}
+{"version":3,"file":"use-render.d.ts","names":[],"sources":["../../../src/utils/use-render.tsx"],"mappings":";;;;KAeK,yBAAyB,MAAM,IAAI;UAEvB,wBAAwB;EACvC,uBAAuB,OAAO;EAC9B,QAAQ,kBAAkB,OAAO,UAAU;EAC3C,SAAS,WAAW;;UAGL,oBAAoB,OAAO,4BAA4B;EACtE,OAAO;EACP,MAAM,IAAI,uBAAuB,IAAI;EACrC;EACA,eAAe,aAAa;;;;;;;;;;;;;;;;;;;iBA4Cd,cACd,sBACA,4BAA4B,SAC5B,gBAAgB,kBAEhB,SAAS,SACT,gBAAgB,wBAAwB,QACxC,QAAQ,oBAAoB,OAAO,uBAClC;kBAoDc;OACH,eAAe,SAAS,wBAAwB;OAChD,WAAW,OAAO,4BAA4B,WAAW,oBAAoB,OAAO"}

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

@@ -1,19 +1,10 @@
-'use client';
-
 import { composeRefs } from "./use-composed-refs.js";
 import { mergeProps } from "./merge-props.js";
 import { getStateDataAttrs } from "@videojs/core/dom";
 import { cloneElement, createElement, isValidElement } from "react";
 import { isFunction } from "@videojs/utils/predicate";
-
+import { resolveClassName } from "@videojs/utils/style";
 //#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;
-}
 function resolveStyle(style, state) {
 	return isFunction(style) ? style(state) : style;
 }
@@ -21,39 +12,43 @@ function getElementRef(element) {
 	const elementAny = element;
 	return elementAny.ref ?? elementAny.props?.ref;
 }
+function mergeRefs(...refs) {
+	const flatRefs = refs.flat().filter((ref) => ref !== null && ref !== void 0);
+	if (flatRefs.length === 0) return void 0;
+	if (flatRefs.length === 1) return flatRefs[0];
+	return composeRefs(...flatRefs);
+}
 /**
 * Render a UI component element.
 *
-* Handles:
-* - Default tag rendering
-* - Render prop (element or function)
-* - Props merging (event handlers chained, className concatenated, style merged)
-* - Ref composition
-* - className/style as functions of state
+* Handles: - Default tag rendering - Render prop (element or function) - Props merging (event handlers chained,
+* className concatenated, style merged) - Ref composition - className/style as functions of state
 *
-* @public
 * @example
-* ```tsx
-* return renderElement('button', componentProps, {
-*   state,
-*   ref: [forwardedRef, buttonRef],
-*   props: [{ type: 'button' }, elementProps, getButtonProps],
-* });
-* ```
+*   ```tsx
+*   return renderElement('button', componentProps, {
+*     state,
+*     ref: [forwardedRef, buttonRef],
+*     props: [{ type: 'button' }, elementProps, getButtonProps],
+*   });
+*   ```;
+*
+* @public
 */
 function renderElement(element, componentProps, params) {
 	const { className: classNameProp, style: styleProp, render } = componentProps;
 	const { state, ref, props, stateAttrMap } = params;
 	const className = resolveClassName(classNameProp, state);
 	const style = resolveStyle(styleProp, state);
-	const mergedProps = mergeProps(getStateDataAttrs(state, stateAttrMap), ...Array.isArray(props) ? props : props ? [props] : []);
+	const stateDataAttrs = stateAttrMap ? getStateDataAttrs(state, stateAttrMap) : {};
+	const mergedProps = mergeProps(stateDataAttrs, ...Array.isArray(props) ? props : props ? [props] : []);
 	if (className !== void 0) mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;
 	if (style !== void 0) mergedProps.style = mergedProps.style ? {
 		...mergedProps.style,
 		...style
 	} : style;
 	if (isFunction(render)) {
-		const mergedRef = composeRefs(ref, mergedProps.ref);
+		const mergedRef = mergeRefs(ref, mergedProps.ref);
 		return render({
 			...mergedProps,
 			ref: mergedRef
@@ -61,15 +56,15 @@ function renderElement(element, componentProps, params) {
 	}
 	if (isValidElement(render)) {
 		const elementRef = getElementRef(render);
-		const mergedRef = composeRefs(ref, mergedProps.ref, elementRef);
+		const mergedRef = mergeRefs(ref, mergedProps.ref, elementRef);
 		const elementProps = mergeProps(mergedProps, render.props);
 		elementProps.ref = mergedRef;
 		return cloneElement(render, elementProps);
 	}
-	mergedProps.ref = composeRefs(ref, mergedProps.ref);
+	mergedProps.ref = mergeRefs(ref, mergedProps.ref);
 	return createElement(element, mergedProps);
 }
-
 //#endregion
-export { isRenderProp, renderElement };
+export { 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\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"}
+{"version":3,"file":"use-render.js","names":[],"sources":["../../../src/utils/use-render.tsx"],"sourcesContent":["import { getStateDataAttrs, type StateAttrMap } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport { resolveClassName } from '@videojs/utils/style';\nimport type { CSSProperties, ReactElement, Ref } from 'react';\nimport { cloneElement, createElement, isValidElement } from 'react';\n\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<unknown> {\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 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\n  return elementAny.ref ?? elementAny.props?.ref;\n}\n\nfunction mergeRefs<T>(...refs: (Ref<T> | Ref<T>[] | undefined)[]): Ref<T> | undefined {\n  const flatRefs = refs.flat().filter((ref): ref is Ref<T> => ref !== null && ref !== undefined);\n  if (flatRefs.length === 0) return undefined;\n\n  if (flatRefs.length === 1) return flatRefs[0];\n\n  return composeRefs(...flatRefs);\n}\n\n/**\n * Render a UI component element.\n *\n * Handles: - Default tag rendering - Render prop (element or function) - Props merging (event handlers chained,\n * className concatenated, style merged) - Ref composition - className/style as functions of state\n *\n * @example\n *   ```tsx\n *   return renderElement('button', componentProps, {\n *     state,\n *     ref: [forwardedRef, buttonRef],\n *     props: [{ type: 'button' }, elementProps, getButtonProps],\n *   });\n *   ```;\n *\n * @public\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 only when a component explicitly opts in with a\n  // mapping. State is still passed to render/className/style callbacks.\n  const stateDataAttrs = stateAttrMap ? 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 = mergeRefs(ref, mergedProps.ref);\n\n    return render({ ...mergedProps, ref: mergedRef } as HTMLProps, state);\n  }\n\n  if (isValidElement(render)) {\n    const elementRef = getElementRef(render);\n\n    const mergedRef = mergeRefs(ref, mergedProps.ref, elementRef);\n\n    const elementProps = mergeProps(mergedProps, render.props as Record<string, unknown>);\n\n    elementProps.ref = mergedRef;\n\n    return cloneElement(render, elementProps);\n  }\n\n  // Default tag\n  const mergedRef = mergeRefs(ref, mergedProps.ref);\n\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":";;;;;;;AA8BA,SAAS,aACP,OACA,OAC2B;CAC3B,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;AAC5C;AAEA,SAAS,cAAc,SAAiD;CAGtE,MAAM,aAAa;CAEnB,OAAO,WAAW,OAAO,WAAW,OAAO;AAC7C;AAEA,SAAS,UAAa,GAAG,MAA6D;CACpF,MAAM,WAAW,KAAK,KAAK,CAAC,CAAC,QAAQ,QAAuB,QAAQ,QAAQ,QAAQ,KAAA,CAAS;CAC7F,IAAI,SAAS,WAAW,GAAG,OAAO,KAAA;CAElC,IAAI,SAAS,WAAW,GAAG,OAAO,SAAS;CAE3C,OAAO,YAAY,GAAG,QAAQ;AAChC;;;;;;;;;;;;;;;;;;AAmBA,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,KAAK;CACvD,MAAM,QAAQ,aAAa,WAAW,KAAK;CAI3C,MAAM,iBAAiB,eAAe,kBAAkB,OAAO,YAAY,IAAI,CAAC;CAIhF,MAAM,cAAc,WAAW,gBAAgB,GAD5B,MAAM,QAAQ,KAAK,IAAI,QAAQ,QAAQ,CAAC,KAAK,IAAI,CAAC,CACsB;CAE3F,IAAI,cAAc,KAAA,GAEhB,YAAY,YAAY,YAAY,YAAY,GAAG,YAAY,UAAU,GAAG,cAAc;CAG5F,IAAI,UAAU,KAAA,GACZ,YAAY,QAAQ,YAAY,QAAQ;EAAE,GAAI,YAAY;EAAyB,GAAG;CAAM,IAAI;CAGlG,IAAI,WAAW,MAAM,GAAG;EAEtB,MAAM,YAAY,UAAU,KAAK,YAAY,GAAG;EAEhD,OAAO,OAAO;GAAE,GAAG;GAAa,KAAK;EAAU,GAAgB,KAAK;CACtE;CAEA,IAAI,eAAe,MAAM,GAAG;EAC1B,MAAM,aAAa,cAAc,MAAM;EAEvC,MAAM,YAAY,UAAU,KAAK,YAAY,KAAK,UAAU;EAE5D,MAAM,eAAe,WAAW,aAAa,OAAO,KAAgC;EAEpF,aAAa,MAAM;EAEnB,OAAO,aAAa,QAAQ,YAAY;CAC1C;CAKA,YAAY,MAFM,UAAU,KAAK,YAAY,GAEnB;CAE1B,OAAO,cAAc,SAAS,WAAW;AAC3C"}

package/dist/dev/utils/use-safe-id.js

@@ -1,22 +1,18 @@
-'use client';
-
 import { useId } from "react";
-
 //#region src/utils/use-safe-id.ts
 const UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;
 /**
 * Generate a CSS-safe identifier from React's `useId()`.
 *
-* `useId()` returns values like `:r0:` which contain colons — invalid
-* in CSS `<dashed-ident>` tokens (used by `anchor-name` / `position-anchor`).
-* This hook strips non-alphanumeric/underscore/hyphen characters and
-* optionally prepends a prefix.
+* `useId()` returns values like `:r0:` which contain colons — invalid in CSS `<dashed-ident>` tokens (used by
+* `anchor-name` / `position-anchor`). This hook strips non-alphanumeric/underscore/hyphen characters and optionally
+* prepends a prefix.
 */
 function useSafeId(prefix) {
 	const raw = useId().replace(UNSAFE_CHARS, "");
-	return prefix ? `${prefix}${raw}` : raw;
+	return prefix ? `${prefix}-${raw}` : raw;
 }
-
 //#endregion
 export { useSafeId };
+
 //# sourceMappingURL=use-safe-id.js.map

package/dist/dev/utils/use-safe-id.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-safe-id.js","names":[],"sources":["../../../src/utils/use-safe-id.ts"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nconst UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;\n\n/**\n * Generate a CSS-safe identifier from React's `useId()`.\n *\n * `useId()` returns values like `:r0:` which contain colons — invalid\n * in CSS `<dashed-ident>` tokens (used by `anchor-name` / `position-anchor`).\n * This hook strips non-alphanumeric/underscore/hyphen characters and\n * optionally prepends a prefix.\n */\nexport function useSafeId(prefix?: string): string {\n  const raw = useId().replace(UNSAFE_CHARS, '');\n  return prefix ? `${prefix}${raw}` : raw;\n}\n"],"mappings":";;;;;AAIA,MAAM,eAAe;;;;;;;;;AAUrB,SAAgB,UAAU,QAAyB;CACjD,MAAM,MAAM,OAAO,CAAC,QAAQ,cAAc,GAAG;AAC7C,QAAO,SAAS,GAAG,SAAS,QAAQ"}
+{"version":3,"file":"use-safe-id.js","names":[],"sources":["../../../src/utils/use-safe-id.ts"],"sourcesContent":["import { useId } from 'react';\n\nconst UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;\n\n/**\n * Generate a CSS-safe identifier from React's `useId()`.\n *\n * `useId()` returns values like `:r0:` which contain colons — invalid in CSS `<dashed-ident>` tokens (used by\n * `anchor-name` / `position-anchor`). This hook strips non-alphanumeric/underscore/hyphen characters and optionally\n * prepends a prefix.\n */\nexport function useSafeId(prefix?: string): string {\n  const raw = useId().replace(UNSAFE_CHARS, '');\n\n  return prefix ? `${prefix}-${raw}` : raw;\n}\n"],"mappings":";;AAEA,MAAM,eAAe;;;;;;;;AASrB,SAAgB,UAAU,QAAyB;CACjD,MAAM,MAAM,MAAM,CAAC,CAAC,QAAQ,cAAc,EAAE;CAE5C,OAAO,SAAS,GAAG,OAAO,GAAG,QAAQ;AACvC"}

package/dist/dev/utils/use-sync-props.js

@@ -0,0 +1,23 @@
+import { useRef } from "react";
+import { isUndefined } from "@videojs/utils/predicate";
+//#region src/utils/use-sync-props.ts
+function useSyncProps(target, props, defaults) {
+	const rest = {};
+	const synced = /* @__PURE__ */ new Set();
+	const prevSyncedRef = useRef(null);
+	const sync = (key, value) => {
+		if (target[key] !== value) target[key] = value;
+	};
+	for (const key of prevSyncedRef.current ?? []) if (isUndefined(props[key])) sync(key, defaults[key]);
+	for (const key in props) if (key in defaults) {
+		if (isUndefined(props[key])) continue;
+		synced.add(key);
+		sync(key, props[key]);
+	} else rest[key] = props[key];
+	prevSyncedRef.current = synced;
+	return rest;
+}
+//#endregion
+export { useSyncProps };
+
+//# sourceMappingURL=use-sync-props.js.map

package/dist/dev/utils/use-sync-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sync-props.js","names":[],"sources":["../../../src/utils/use-sync-props.ts"],"sourcesContent":["import { isUndefined } from '@videojs/utils/predicate';\nimport { useRef } from 'react';\n\nexport function useSyncProps<Props extends object, Rest extends Record<string, unknown>>(\n  target: Props,\n  props: Partial<Props> & Rest,\n  defaults: Props\n): Omit<Rest, keyof Props> {\n  const rest: Record<string, unknown> = {};\n  const synced = new Set<string>();\n  const prevSyncedRef = useRef<Set<string> | null>(null);\n\n  const sync = (key: string, value: unknown) => {\n    if (target[key as keyof Props] !== value) target[key as keyof Props] = value as Props[keyof Props];\n  };\n\n  // Reset props the consumer stopped passing (or passed as `undefined`) back to\n  // their defaults before applying the current ones, so a reset can never wipe a\n  // value another prop derives in the same render (e.g. `source` deriving `src`).\n  // Mirrors react-dom removing absent attributes.\n  for (const key of prevSyncedRef.current ?? []) {\n    if (isUndefined((props as Record<string, unknown>)[key])) sync(key, (defaults as Record<string, unknown>)[key]);\n  }\n\n  for (const key in props) {\n    if (key in defaults) {\n      if (isUndefined(props[key])) continue;\n\n      synced.add(key);\n      sync(key, props[key]);\n    } else {\n      rest[key] = props[key];\n    }\n  }\n\n  prevSyncedRef.current = synced;\n\n  return rest as Omit<Rest, keyof Props>;\n}\n"],"mappings":";;;AAGA,SAAgB,aACd,QACA,OACA,UACyB;CACzB,MAAM,OAAgC,CAAC;CACvC,MAAM,yBAAS,IAAI,IAAY;CAC/B,MAAM,gBAAgB,OAA2B,IAAI;CAErD,MAAM,QAAQ,KAAa,UAAmB;EAC5C,IAAI,OAAO,SAAwB,OAAO,OAAO,OAAsB;CACzE;CAMA,KAAK,MAAM,OAAO,cAAc,WAAW,CAAC,GAC1C,IAAI,YAAa,MAAkC,IAAI,GAAG,KAAK,KAAM,SAAqC,IAAI;CAGhH,KAAK,MAAM,OAAO,OAChB,IAAI,OAAO,UAAU;EACnB,IAAI,YAAY,MAAM,IAAI,GAAG;EAE7B,OAAO,IAAI,GAAG;EACd,KAAK,KAAK,MAAM,IAAI;CACtB,OACE,KAAK,OAAO,MAAM;CAItB,cAAc,UAAU;CAExB,OAAO;AACT"}

package/docs/README.md

@@ -0,0 +1,7 @@
+# @videojs/react documentation
+
+Bundled markdown documentation for `@videojs/react` v10.0.0-rc.1.
+
+Start at [`./llms.txt`](./llms.txt) — it's the structured index of every page in this directory.
+
+Canonical online version: https://videojs.org/docs/framework/react

package/docs/concepts/accessibility.md

@@ -0,0 +1,68 @@
+# Accessibility
+
+How Video.js approaches accessibility, and what you should consider if you're deeply customizing your player
+
+Video.js is built with accessibility in mind so your player can reach the widest possible audience.
+
+Here are some of the accessibility aspects we consider. You should consider them too if you’re performing deeper customization.
+
+## Standards we target
+
+*   [**WAI-ARIA 1.2**](https://www.w3.org/TR/wai-aria-1.2/) defines roles, states, and properties that [assistive technologies](https://www.w3.org/WAI/people-use-web/tools-techniques/) use to understand controls.
+*   [**WCAG 2.2**](https://www.w3.org/TR/WCAG22/) provides success criteria for perceivable, operable, understandable, and robust web content.
+*   [**CVAA**](https://www.fcc.gov/consumers/guides/21st-century-communications-and-video-accessibility-act-cvaa) is a U.S. federal law requiring closed captioning and accessible controls for video content.
+*   [**ADA**](https://www.ada.gov/) is a U.S. civil rights law that prohibits disability discrimination. Courts increasingly apply it to websites, including video players.
+
+## ARIA roles and labels
+
+Components set ARIA roles and attributes automatically. For example, sliders render with `role="slider"` and value attributes, buttons update their `aria-label` based on player state, and decorative elements like time separators are hidden with `aria-hidden="true"`.
+
+Verify that labels are contextually correct for your content and language. Each component’s reference page documents the attributes it sets.
+
+## Keyboard interaction
+
+All interactive components support keyboard control. For example, buttons activate with Enter and Space, sliders respond to Arrow keys, Home, End, and Page Up/Page Down, and popovers close with Escape. Each component’s reference page lists its full keyboard support. We follow the patterns in the [WAI-ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/).
+
+## Focus management
+
+Interactive elements are focusable when enabled and leave the [tab order](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) when disabled. Popover triggers link to their popups with `aria-controls` and `aria-expanded`.
+
+The player container is focusable and labeled: it takes `role="group"`, `tabindex="0"`, and an `aria-label` you can override. Keyboard users can tab to the player as a whole, and screen readers announce it as a named group.
+
+## Status announcements
+
+The player announces confirmed state changes through a visually hidden live region (`role="status"`), so screen reader users hear when playback starts or pauses, captions turn on or off, fullscreen, picture-in-picture, playback rate, or volume change, and where a seek lands.
+
+Announcements follow confirmed state from the player store rather than requested changes, so routine time updates never reach the live region. Rapid volume and seek changes are grouped into a single announcement, and the player stays quiet while one of its sliders has focus, since the slider already announces its own value. State the store tracks is covered for you; a custom control that tracks its own state needs its own live region.
+
+## Captions and subtitles
+
+The [text tracks feature](../reference/feature-text-tracks.md) supports captions and subtitles. Closed captions in the U.S. are governed by the [FCC](https://www.fcc.gov/) under the [CVAA](https://www.fcc.gov/consumers/guides/21st-century-communications-and-video-accessibility-act-cvaa), which requires both captioning and viewer control over caption appearance (font, size, color, opacity, and edge style). Non-compliance carries legal risk. The [WebKit Caption Display Settings explainer](https://github.com/WebKit/explainers/tree/main/CaptionDisplaySettings) tracks how browsers are bringing these customization preferences into the web platform natively.
+
+## Color contrast
+
+Skins respond to [`prefers-contrast: more`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) by increasing background opacity on overlays and controls, and to [`prefers-reduced-transparency: reduce`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) by raising baseline opacity so text stays readable over video.
+
+Video is harder than most UI for contrast because the background is always changing. A control that passes checks over a dark frame can disappear over a bright title card. Automated tools won’t catch this, so test your controls against light, dark, and mixed video content. Custom components should test against [WCAG 1.4.3 (contrast minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum) and [1.4.11 (non-text contrast)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast).
+
+## Touch targets
+
+Controls use rem-based sizing so they scale with the user’s font size preference. All interactive elements set [`touch-action: manipulation`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) to eliminate tap delay on touch devices. Skins use [`pointer: fine` and `pointer: coarse`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) to adapt transitions for mouse and touch input.
+
+If you build custom controls, target at least 24x24 CSS pixels per [WCAG 2.5.8 (target size minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum). Larger is better on touch-first surfaces.
+
+## Color scheme
+
+Skins adapt to [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). Borders, backgrounds, and text colors adjust through CSS custom properties. Custom components can use the same design tokens. See [Skins](./skins.md) for details.
+
+## Reduced motion
+
+Skins respect [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) by simplifying or removing animations and transitions. Follow the same pattern in custom components.
+
+## Test with assistive technology
+
+Automated tools catch markup issues but miss real usability problems. Test your player with a [screen reader](https://www.w3.org/WAI/people-use-web/tools-techniques/) ([VoiceOver](https://support.apple.com/guide/voiceover/welcome/mac) on macOS, [NVDA](https://www.nvaccess.org/about-nvda/) or [JAWS](https://www.freedomscientific.com/products/software/jaws/) on Windows) and keyboard-only navigation. Verify that every control is reachable, operable, and announces its purpose and state. The [WAI “Easy Checks”](https://www.w3.org/WAI/test-evaluate/preliminary/) are a good starting point.
+
+## Further reading
+
+The W3C WAI guides on [making audio and video media accessible](https://www.w3.org/WAI/media/av/) and [accessible media players](https://www.w3.org/WAI/media/av/player/) go deeper on everything covered here.

package/docs/concepts/browser-support.md

@@ -0,0 +1,45 @@
+# Browser support
+
+Browsers and rendering environments supported by Video.js 10
+
+Support starts with an evergreen browser baseline and extends to the rendering environments described below.
+
+## Browser baseline
+
+Video.js 10 currently targets **evergreen browsers**: the latest two stable versions of Chrome, Firefox, Safari, and Edge.
+
+Note
+
+Video.js 10 is in beta. The browser support matrix may expand as we approach GA based on community feedback and usage data.
+
+### Why evergreen?
+
+Video.js 10 builds directly on the web platform: custom elements, CSS custom properties, anchor positioning, and modern JavaScript APIs. Targeting evergreen browsers lets us:
+
+*   **Ship smaller bundles** by avoiding polyfills and transpilation for outdated syntax
+*   **Use platform-native features** like `popover` and anchor positioning instead of JavaScript equivalents
+*   **Keep the core slim** so platform-specific adapters (HTML, React) add only what they need
+
+### Progressive enhancement
+
+When we use a platform feature that hasn’t landed in all supported browsers yet, we provide a fallback. The player works either way; the experience may differ slightly in older browsers. For example, tooltips and popovers use CSS anchor positioning where available and fall back to JavaScript-computed positioning where it isn’t.
+
+## Rendering contexts
+
+### WebViews
+
+A [WebView](https://developer.mozilla.org/en-US/docs/Glossary/WebView) is a browser engine embedded inside a native app. WebViews on iOS (WKWebView) and Android (Android WebView) can behave differently from the full browser; autoplay policies, fullscreen APIs, and hardware acceleration can vary.
+
+Video.js 10 beta targets standard browser environments. If you embed a player inside a native app, test it on each platform and WebView version you support.
+
+### Progressive Web Apps
+
+Installed Progressive Web Apps (PWAs) use the browser engine, but their standalone display mode and platform policies can affect fullscreen, media sessions, and other browser integration. Test playback both in a browser tab and in the installed app.
+
+### Smart TVs and set-top boxes
+
+TV platforms run embedded browsers with limited standards support. Video.js 10’s core is not tied to any specific platform, which makes future TV adapters possible, but TV is not a supported target today.
+
+### Server-side rendering
+
+Video.js components render valid markup on the server. Interactivity — state management, media playback, and event handling — requires the browser and kicks in after hydration.

package/docs/concepts/bundlers.md

@@ -0,0 +1,43 @@
+# Bundlers
+
+Bundler requirements for Video.js package exports, CSS, and wrapper libraries
+
+Before the browser runs your application, a bundler such as Vite combines its imports into files the browser can load. Your bundler must understand the import paths published by Video.js packages.
+
+## Package exports
+
+Each Video.js package has an `exports` field in its `package.json`. This field lists the import paths that applications and libraries can use, such as `@videojs/html/video/player` and `@videojs/react/live-video`.
+
+If an older bundler reports that one of these paths is missing or not exported, upgrade the bundler before adding an alias that bypasses the package’s public API.
+
+## Vite compatibility
+
+Use a current Vite release. Testing confirmed that Vite 5.4.19 can load Video.js JavaScript and CSS package exports. Vite 3.2.8 can load the JavaScript, but it cannot load an exported stylesheet such as `@videojs/html/video/skin.css`.
+
+Packaged HTML skins import their own styles, so an HTML application using `@videojs/html/video/skin` doesn’t need to import `skin.css` separately. The CSS limitation matters only when your application imports that stylesheet directly.
+
+## Externalize Video.js in a wrapper library
+
+You can skip this section when building an application.
+
+If you publish a library that expects its users to install Video.js separately, leave Video.js out of your library’s bundle. Rollup calls a dependency left out of the bundle **external**.
+
+Rollup’s array form matches only the exact package name, so `external: ['@videojs/html']` misses imports such as `@videojs/html/video/player`.
+
+Match the package name and everything below it instead:
+
+rollup.config.js
+
+```
+const videojsPeers = ['@videojs/html'];
+
+export default {
+  external(id) {
+    return videojsPeers.some(
+      (packageName) => id === packageName || id.startsWith(`${packageName}/`)
+    );
+  }
+};
+```
+
+Add every `@videojs/*` package your library imports directly to `videojsPeers` and list it in `peerDependencies`.