@videojs/react 10.0.0-beta.24 → 10.0.0-beta.26

package/dist/default/utils/use-media-component.js

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

package/dist/default/utils/use-media-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-component.js","names":[],"sources":["../../../src/utils/use-media-component.ts"],"sourcesContent":["'use client';\n\nimport type { HTMLMediaTargetLike, MediaComponent } from '@videojs/media/dom/media-host';\nimport { addMediaComponent, HTMLMediaElementHost } from '@videojs/media/dom/media-host';\nimport { useEffect, useState } from 'react';\n\nimport { useMedia } from '../player/context';\nimport { useDestroy } from './use-destroy';\n\n/**\n * Create a media component (e.g. `GoogleCast`, `MuxData`) and register it\n * with the media provided by the surrounding player context.\n *\n * Instantiates the component class once, registers it when a media host is\n * available, follows the media when it changes, and destroys the component\n * on unmount. Media that is not a media host (e.g. a plain `<video>`\n * element) cannot carry media components and is ignored.\n */\nexport function useMediaComponent<Component extends MediaComponent & { destroy(): void }>(\n  ComponentClass: new () => Component\n): Component {\n  const media = useMedia();\n  const [component] = useState(() => new ComponentClass());\n\n  useDestroy(component);\n\n  useEffect(() => {\n    if (!(media instanceof HTMLMediaElementHost)) return;\n    return addMediaComponent(media as HTMLMediaElementHost<HTMLMediaTargetLike, any>, component);\n  }, [media, component]);\n\n  return component;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,SAAgB,kBACd,gBACW;CACX,MAAM,QAAQ,SAAS;CACvB,MAAM,CAAC,aAAa,eAAe,IAAI,eAAe,CAAC;CAEvD,WAAW,SAAS;CAEpB,gBAAgB;EACd,IAAI,EAAE,iBAAiB,uBAAuB;EAC9C,OAAO,kBAAkB,OAAyD,SAAS;CAC7F,GAAG,CAAC,OAAO,SAAS,CAAC;CAErB,OAAO;AACT"}

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

@@ -8,12 +8,20 @@ import { useState } from "react";
 *
 * Instantiates the media class once, attaches it to the player on mount,
 * and safely detaches on unmount using a functional updater to avoid race
-* conditions when swapping media components (e.g. DashVideo → HlsVideo).
+* conditions when swapping media components (e.g. DashVideo → HlsJsVideo).
+*
+* An optional `setup` callback runs once on mount — e.g. to add media
+* components via `addMediaComponent`. Components registered there are destroyed
+* together with the media instance on unmount (`media.destroy()` destroys
+* all of its registered components).
 */
-function useMediaInstance(MediaClass) {
+function useMediaInstance(MediaClass, setup) {
 	const [instance] = useState(() => new MediaClass());
 	const setMedia = useMediaAttach();
-	useDestroy(instance, () => setMedia?.(instance), () => setMedia?.((prev) => prev === instance ? null : prev));
+	useDestroy(instance, () => {
+		setup?.(instance);
+		setMedia?.(instance);
+	}, () => setMedia?.((prev) => prev === instance ? null : prev));
 	return instance;
 }
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"use-media-instance.js","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"sourcesContent":["'use client';\n\nimport type { Media } from '@videojs/core';\nimport { useState } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useDestroy } from './use-destroy';\n\n/**\n * Create and manage a media instance lifecycle within a player context.\n *\n * Instantiates the media class once, attaches it to the player on mount,\n * and safely detaches on unmount using a functional updater to avoid race\n * conditions when swapping media components (e.g. DashVideo → HlsVideo).\n */\nexport function useMediaInstance<Instance extends Media & { destroy(): void }>(\n  MediaClass: new () => Instance\n): Instance {\n  const [instance] = useState(() => new MediaClass());\n  const setMedia = useMediaAttach();\n\n  useDestroy(\n    instance,\n    () => setMedia?.(instance),\n    () => setMedia?.((prev) => (prev === instance ? null : prev))\n  );\n\n  return instance;\n}\n"],"mappings":";;;;;;;;;;;;AAeA,SAAgB,iBACd,YACU;CACV,MAAM,CAAC,YAAY,eAAe,IAAI,YAAY,CAAC;CACnD,MAAM,WAAW,gBAAgB;AAEjC,YACE,gBACM,WAAW,SAAS,QACpB,YAAY,SAAU,SAAS,WAAW,OAAO,KAAM,CAC9D;AAED,QAAO"}
+{"version":3,"file":"use-media-instance.js","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"sourcesContent":["'use client';\n\nimport 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,\n * and safely detaches on unmount using a functional updater to avoid race\n * conditions when swapping media components (e.g. DashVideo → HlsJsVideo).\n *\n * An optional `setup` callback runs once on mount — e.g. to add media\n * components via `addMediaComponent`. Components registered there are destroyed\n * together with the media instance on unmount (`media.destroy()` destroys\n * all of its registered components).\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":";;;;;;;;;;;;;;;;;AAoBA,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/default/utils/use-render.js

@@ -44,7 +44,7 @@ function renderElement(element, componentProps, params) {
 	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 mergedProps = mergeProps(stateAttrMap ? getStateDataAttrs(state, stateAttrMap) : {}, ...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,

package/dist/default/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<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 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,OAA8C;AACzE,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,KAAA,EAEhB,aAAY,YAAY,YAAY,YAAY,GAAG,YAAY,UAAU,GAAG,cAAc;AAG5F,KAAI,UAAU,KAAA,EACZ,aAAY,QAAQ,YAAY,QAAQ;EAAE,GAAI,YAAY;EAAyB,GAAG;EAAO,GAAG;AAGlG,KAAI,WAAW,OAAO,EAAE;EAEtB,MAAM,YAAY,YAAY,KAAK,YAAY,IAAI;AACnD,SAAO,OAAO;GAAE,GAAG;GAAa,KAAK;GAAW,EAAe,MAAM;;AAGvE,KAAI,eAAe,OAAO,EAAE;EAC1B,MAAM,aAAa,cAAc,OAAO;EAExC,MAAM,YAAY,YAAY,KAAK,YAAY,KAAK,WAAW;EAE/D,MAAM,eAAe,WAAW,aAAa,OAAO,MAAiC;AACrF,eAAa,MAAM;AAEnB,SAAO,aAAa,QAAQ,aAAa;;AAK3C,aAAY,MADM,YAAY,KAAK,YAAY,IAAI;AAGnD,QAAO,cAAc,SAAS,YAAY"}
+{"version":3,"file":"use-render.js","names":[],"sources":["../../../src/utils/use-render.tsx"],"sourcesContent":["'use client';\n\nimport { getStateDataAttrs, type StateAttrMap } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ReactElement, Ref } from 'react';\nimport { cloneElement, createElement, isValidElement } from 'react';\nimport { mergeProps } from './merge-props';\nimport type { HTMLProps, RenderProp } from './types';\nimport { composeRefs } from './use-composed-refs';\n\n/** Check if a value is a render prop (function or React element). */\nexport function isRenderProp(value: unknown): value is RenderProp<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 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 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 = 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,OAA8C;CACzE,OAAO,WAAW,KAAK,KAAK,eAAe,KAAK;AAClD;AAiBA,SAAS,iBACP,WACA,OACoB;CACpB,OAAO,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;AACpD;AAEA,SAAS,aACP,OACA,OAC2B;CAC3B,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;AAC5C;AAEA,SAAS,cAAc,SAAiD;CAGtE,MAAM,aAAa;CACnB,OAAO,WAAW,OAAO,WAAW,OAAO;AAC7C;;;;;;;;;;;;;;;;;;;;;AAsBA,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;CAQ3C,MAAM,cAAc,WAJG,eAAe,kBAAkB,OAAO,YAAY,IAAI,CAAC,GAIjC,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,YAAY,KAAK,YAAY,GAAG;EAClD,OAAO,OAAO;GAAE,GAAG;GAAa,KAAK;EAAU,GAAgB,KAAK;CACtE;CAEA,IAAI,eAAe,MAAM,GAAG;EAC1B,MAAM,aAAa,cAAc,MAAM;EAEvC,MAAM,YAAY,YAAY,KAAK,YAAY,KAAK,UAAU;EAE9D,MAAM,eAAe,WAAW,aAAa,OAAO,KAAgC;EACpF,aAAa,MAAM;EAEnB,OAAO,aAAa,QAAQ,YAAY;CAC1C;CAIA,YAAY,MADM,YAAY,KAAK,YAAY,GACrB;CAE1B,OAAO,cAAc,SAAS,WAAW;AAC3C"}

package/dist/default/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,OAAO,GAAG,QAAQ"}
+{"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,MAAM,CAAC,CAAC,QAAQ,cAAc,EAAE;CAC5C,OAAO,SAAS,GAAG,OAAO,GAAG,QAAQ;AACvC"}

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

@@ -1,11 +1,20 @@
+import { useRef } from "react";
 import { isUndefined } from "@videojs/utils/predicate";
 //#region src/utils/use-sync-props.ts
 function useSyncProps(target, props, defaults) {
 	const rest = {};
-	for (const key in props) if (key in defaults) {
-		const value = isUndefined(props[key]) ? defaults[key] : props[key];
+	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

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

@@ -1 +1 @@
-{"version":3,"file":"use-sync-props.js","names":[],"sources":["../../../src/utils/use-sync-props.ts"],"sourcesContent":["import { isUndefined } from '@videojs/utils/predicate';\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\n  for (const key in props) {\n    if (key in defaults) {\n      const value = isUndefined(props[key]) ? (defaults as Record<string, unknown>)[key] : props[key];\n      if (target[key as keyof typeof target] !== value) target[key as keyof typeof target] = value as any;\n    } else {\n      rest[key] = props[key];\n    }\n  }\n\n  return rest as Omit<Rest, keyof Props>;\n}\n"],"mappings":";;AAEA,SAAgB,aACd,QACA,OACA,UACyB;CACzB,MAAM,OAAgC,EAAE;AAExC,MAAK,MAAM,OAAO,MAChB,KAAI,OAAO,UAAU;EACnB,MAAM,QAAQ,YAAY,MAAM,KAAK,GAAI,SAAqC,OAAO,MAAM;AAC3F,MAAI,OAAO,SAAgC,MAAO,QAAO,OAA8B;OAEvF,MAAK,OAAO,MAAM;AAItB,QAAO"}
+{"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      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;EAC7B,OAAO,IAAI,GAAG;EACd,KAAK,KAAK,MAAM,IAAI;CACtB,OACE,KAAK,OAAO,MAAM;CAItB,cAAc,UAAU;CAExB,OAAO;AACT"}

package/dist/dev/i18n/context.d.ts

@@ -0,0 +1,29 @@
+import { Locale, Translations, Translator } from "@videojs/core/i18n";
+//#region src/i18n/context.d.ts
+interface I18nContextValue {
+  translator: Translator;
+  locale: Locale;
+  /** True when a provider received an explicit locale prop. */
+  localeFromProp: boolean;
+  /** Overrides passed to this provider. */
+  translations?: Partial<Translations>;
+  /** Callback inherited by nested locale roots. */
+  onActiveLocaleChange?: (locale: Locale) => void;
+}
+/** React context carrying the active translator and locale. @public */
+declare const I18nContext: import("react").Context<I18nContextValue | null>;
+/**
+ * Returns the translator for the nearest `I18nProvider`, or English defaults when none is mounted.
+ *
+ * @public
+ */
+declare function useTranslator(): Translator;
+/**
+ * Returns the active BCP 47 locale tag from the nearest `I18nProvider`, or `'en'` when none is mounted.
+ *
+ * @public
+ */
+declare function useLocale(): Locale;
+//#endregion
+export { I18nContext, I18nContextValue, useLocale, useTranslator };
+//# sourceMappingURL=context.d.ts.map

package/dist/dev/i18n/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/i18n/context.tsx"],"mappings":";;UAciB;EACf,YAAY;EACZ,QAAQ;;EAER;;EAEA,eAAe,QAAQ;;EAEvB,wBAAwB,QAAQ;;;cAIrB,6BAAW,QAAA;;;;;;iBASR,iBAAiB;;;;;;iBAwBjB,aAAa"}

package/dist/dev/i18n/context.js

@@ -0,0 +1,36 @@
+"use client";
+import { createTranslator, getI18nTranslations, onI18nRegistryChange } from "@videojs/core/i18n";
+import { createContext, useContext, useEffect, useMemo, useReducer } from "react";
+//#region src/i18n/context.tsx
+/** React context carrying the active translator and locale. @public */
+const I18nContext = createContext(null);
+const LocaleRootContext = createContext(void 0);
+/**
+* Returns the translator for the nearest `I18nProvider`, or English defaults when none is mounted.
+*
+* @public
+*/
+function useTranslator() {
+	const ctx = useContext(I18nContext);
+	const [registryEpoch, invalidateRegistry] = useReducer((epoch) => epoch + 1, 0);
+	useEffect(() => {
+		return onI18nRegistryChange(() => invalidateRegistry());
+	}, []);
+	const fallback = useMemo(() => {
+		return createTranslator(getI18nTranslations("en"), "en");
+	}, [registryEpoch]);
+	if (!ctx) return fallback;
+	return ctx.translator;
+}
+/**
+* Returns the active BCP 47 locale tag from the nearest `I18nProvider`, or `'en'` when none is mounted.
+*
+* @public
+*/
+function useLocale() {
+	return useContext(I18nContext)?.locale ?? "en";
+}
+//#endregion
+export { I18nContext, LocaleRootContext, useLocale, useTranslator };
+
+//# sourceMappingURL=context.js.map

package/dist/dev/i18n/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/i18n/context.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createTranslator,\n  getI18nTranslations,\n  type Locale,\n  onI18nRegistryChange,\n  type Translations,\n  type Translator,\n} from '@videojs/core/i18n';\nimport { createContext, useContext, useEffect, useMemo, useReducer } from 'react';\n\nexport type AddLocaleRoot = () => () => void;\n\nexport interface I18nContextValue {\n  translator: Translator;\n  locale: Locale;\n  /** True when a provider received an explicit locale prop. */\n  localeFromProp: boolean;\n  /** Overrides passed to this provider. */\n  translations?: Partial<Translations>;\n  /** Callback inherited by nested locale roots. */\n  onActiveLocaleChange?: (locale: Locale) => void;\n}\n\n/** React context carrying the active translator and locale. @public */\nexport const I18nContext = createContext<I18nContextValue | null>(null);\n\nexport const LocaleRootContext = createContext<AddLocaleRoot | undefined>(undefined);\n\n/**\n * Returns the translator for the nearest `I18nProvider`, or English defaults when none is mounted.\n *\n * @public\n */\nexport function useTranslator(): Translator {\n  const ctx = useContext(I18nContext);\n  const [registryEpoch, invalidateRegistry] = useReducer((epoch: number) => epoch + 1, 0);\n\n  useEffect(() => {\n    return onI18nRegistryChange(() => invalidateRegistry());\n  }, []);\n\n  const fallback = useMemo(() => {\n    void registryEpoch;\n    return createTranslator(getI18nTranslations('en'), 'en');\n  }, [registryEpoch]);\n\n  if (!ctx) {\n    return fallback;\n  }\n  return ctx.translator;\n}\n\n/**\n * Returns the active BCP 47 locale tag from the nearest `I18nProvider`, or `'en'` when none is mounted.\n *\n * @public\n */\nexport function useLocale(): Locale {\n  const ctx = useContext(I18nContext);\n  return ctx?.locale ?? 'en';\n}\n"],"mappings":";;;;;AA0BA,MAAa,cAAc,cAAuC,IAAI;AAEtE,MAAa,oBAAoB,cAAyC,KAAA,CAAS;;;;;;AAOnF,SAAgB,gBAA4B;CAC1C,MAAM,MAAM,WAAW,WAAW;CAClC,MAAM,CAAC,eAAe,sBAAsB,YAAY,UAAkB,QAAQ,GAAG,CAAC;CAEtF,gBAAgB;EACd,OAAO,2BAA2B,mBAAmB,CAAC;CACxD,GAAG,CAAC,CAAC;CAEL,MAAM,WAAW,cAAc;EAE7B,OAAO,iBAAiB,oBAAoB,IAAI,GAAG,IAAI;CACzD,GAAG,CAAC,aAAa,CAAC;CAElB,IAAI,CAAC,KACH,OAAO;CAET,OAAO,IAAI;AACb;;;;;;AAOA,SAAgB,YAAoB;CAElC,OADY,WAAW,WACd,CAAC,EAAE,UAAU;AACxB"}

package/dist/dev/i18n/create-i18n.d.ts

@@ -0,0 +1,61 @@
+import { I18nContextValue, useLocale, useTranslator } from "./context.js";
+import { FlatTranslations, Locale, Translations } from "@videojs/core/i18n";
+import { Context, ReactNode, RefObject } from "react";
+//#region src/i18n/create-i18n.d.ts
+interface CreateI18nOptions {
+  /** Override lazy loading of shipped locale packs (tests or custom loaders). */
+  loader?: (tag: string) => Promise<Partial<FlatTranslations> | undefined>;
+}
+interface I18nProviderProps {
+  /**
+   * Forces the active locale. Omit to inherit the nearest non-empty `lang` by walking DOM
+   * ancestors from {@link langRootRef} when set, otherwise from `document.documentElement`
+   * (typically `<html lang>`). Updates when any `lang` attribute changes anywhere under `<html>`,
+   * or when subtree moves alter which ancestor supplies `lang`. For SSR, pass `locale` explicitly.
+   */
+  locale?: Locale;
+  /**
+   * Element whose ancestor chain is searched for a non-empty `lang` when {@link locale} is
+   * omitted—for example a ref to your player shell `HTMLElement`.
+   */
+  langRootRef?: RefObject<Element | null>;
+  /**
+   * Per-locale string overrides merged on top of the global registry and any lazy built-in
+   * packs for {@link locale}. Applies to translated
+   * `aria-label` values and tooltip copy for skin controls wired through `useTranslator`.
+   *
+   * @example
+   * ```tsx
+   * <I18nProvider locale="ja" translations={{ buttons: { play: '再生', pause: '一時停止' } }}>
+   *   <VideoSkin />
+   * </I18nProvider>
+   * ```
+   */
+  translations?: Partial<Translations>;
+  children: ReactNode;
+  /** Fires when the resolved locale changes (caption selection hooks may use this later). */
+  onActiveLocaleChange?: (locale: Locale) => void;
+}
+interface CreateI18nResult {
+  I18nContext: Context<I18nContextValue | null>;
+  I18nProvider: (props: I18nProviderProps) => ReactNode;
+  useTranslator: typeof useTranslator;
+  useLocale: typeof useLocale;
+}
+/**
+ * Creates an i18n provider and hooks for the shared React i18n context.
+ *
+ * @param options - Optional hooks such as custom built-in locale loading.
+ * @public
+ */
+declare function createI18n(options?: CreateI18nOptions): CreateI18nResult;
+/**
+ * Resolves locale and supplies a typed translator to descendants. Mount this explicitly for
+ * translated controls, forced locales, SSR copy, or locale-aware player roots.
+ *
+ * @public
+ */
+declare const I18nProvider: (props: I18nProviderProps) => ReactNode;
+//#endregion
+export { CreateI18nOptions, CreateI18nResult, type I18nContextValue, I18nProvider, I18nProviderProps, createI18n };
+//# sourceMappingURL=create-i18n.d.ts.map

package/dist/dev/i18n/create-i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-i18n.d.ts","names":[],"sources":["../../../src/i18n/create-i18n.tsx"],"mappings":";;;;UAoBiB;;EAEf,UAAU,gBAAgB,QAAQ,QAAQ;;UAG3B;;;;;;;EAOf,SAAS;;;;;EAKT,cAAc,UAAU;;;;;;;;;;;;;EAaxB,eAAe,QAAQ;EACvB,UAAU;;EAEV,wBAAwB,QAAQ;;UAKjB;EACf,aAAa,QAAQ;EACrB,eAAe,OAAO,sBAAsB;EAC5C,sBAAsB;EACtB,kBAAkB;;;;;;;;iBASJ,WAAW,UAAU,oBAAoB;;;;;;;cAiE5C,eAAY,OA5ED,sBAAsB"}

package/dist/dev/i18n/create-i18n.js

@@ -0,0 +1,76 @@
+"use client";
+import { I18nContext, LocaleRootContext, useLocale, useTranslator } from "./context.js";
+import { getProviderRootProps } from "./get-provider-root-props.js";
+import { useAmbientLang } from "./use-ambient-lang.js";
+import { useLangRootElement } from "./use-lang-root-element.js";
+import { useLazyTranslations } from "./use-lazy-translations.js";
+import { useLocaleRootNotifications } from "./use-locale-root-notifications.js";
+import { useMergedTranslations } from "./use-merged-translations.js";
+import { createTranslator, loadLocale } from "@videojs/core/i18n";
+import { useContext, useMemo } from "react";
+import { effectiveLocale } from "@videojs/utils/dom";
+import { jsx } from "react/jsx-runtime";
+//#region src/i18n/create-i18n.tsx
+/**
+* Creates an i18n provider and hooks for the shared React i18n context.
+*
+* @param options - Optional hooks such as custom built-in locale loading.
+* @public
+*/
+function createI18n(options) {
+	const loader = options?.loader ?? loadLocale;
+	function I18nProviderRoot({ locale: localeProp, langRootRef, parentLocale, localeFromProp = localeProp !== void 0, translations: translationsProp, children, onActiveLocaleChange, parentAddLocaleRoot }) {
+		const langRootElement = useLangRootElement(langRootRef, parentAddLocaleRoot);
+		const ambientLang = useAmbientLang(langRootRef !== void 0, langRootElement);
+		const resolvedLocale = useMemo(() => effectiveLocale(localeProp, ambientLang ?? parentLocale), [
+			localeProp,
+			ambientLang,
+			parentLocale
+		]);
+		const addLocaleRoot = useLocaleRootNotifications(resolvedLocale, onActiveLocaleChange);
+		const translations = useMergedTranslations(resolvedLocale, useLazyTranslations(resolvedLocale, loader), translationsProp);
+		const translator = useMemo(() => createTranslator(translations, resolvedLocale), [translations, resolvedLocale]);
+		const value = useMemo(() => ({
+			translator,
+			locale: resolvedLocale,
+			localeFromProp,
+			...translationsProp !== void 0 ? { translations: translationsProp } : {},
+			...onActiveLocaleChange !== void 0 ? { onActiveLocaleChange } : {}
+		}), [
+			translator,
+			resolvedLocale,
+			localeFromProp,
+			translationsProp,
+			onActiveLocaleChange
+		]);
+		return /* @__PURE__ */ jsx(LocaleRootContext.Provider, {
+			value: addLocaleRoot,
+			children: /* @__PURE__ */ jsx(I18nContext.Provider, {
+				value,
+				children
+			})
+		});
+	}
+	function I18nProvider(props) {
+		const rootProps = getProviderRootProps(props, useContext(I18nContext), useContext(LocaleRootContext));
+		if (!rootProps) return props.children;
+		return /* @__PURE__ */ jsx(I18nProviderRoot, { ...rootProps });
+	}
+	return {
+		I18nContext,
+		I18nProvider,
+		useTranslator,
+		useLocale
+	};
+}
+/**
+* Resolves locale and supplies a typed translator to descendants. Mount this explicitly for
+* translated controls, forced locales, SSR copy, or locale-aware player roots.
+*
+* @public
+*/
+const I18nProvider = createI18n().I18nProvider;
+//#endregion
+export { I18nProvider, createI18n };
+
+//# sourceMappingURL=create-i18n.js.map

package/dist/dev/i18n/create-i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-i18n.js","names":["defaultLoader"],"sources":["../../../src/i18n/create-i18n.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createTranslator,\n  loadLocale as defaultLoader,\n  type FlatTranslations,\n  type Locale,\n  type Translations,\n} from '@videojs/core/i18n';\nimport { effectiveLocale } from '@videojs/utils/dom';\nimport { type Context, type ReactNode, type RefObject, useContext, useMemo } from 'react';\n\nimport { I18nContext, type I18nContextValue, LocaleRootContext, useLocale, useTranslator } from './context';\nimport { getProviderRootProps, type I18nProviderRootProps } from './get-provider-root-props';\nimport { useAmbientLang } from './use-ambient-lang';\nimport { useLangRootElement } from './use-lang-root-element';\nimport { useLazyTranslations } from './use-lazy-translations';\nimport { useLocaleRootNotifications } from './use-locale-root-notifications';\nimport { useMergedTranslations } from './use-merged-translations';\n\nexport interface CreateI18nOptions {\n  /** Override lazy loading of shipped locale packs (tests or custom loaders). */\n  loader?: (tag: string) => Promise<Partial<FlatTranslations> | undefined>;\n}\n\nexport interface I18nProviderProps {\n  /**\n   * Forces the active locale. Omit to inherit the nearest non-empty `lang` by walking DOM\n   * ancestors from {@link langRootRef} when set, otherwise from `document.documentElement`\n   * (typically `<html lang>`). Updates when any `lang` attribute changes anywhere under `<html>`,\n   * or when subtree moves alter which ancestor supplies `lang`. For SSR, pass `locale` explicitly.\n   */\n  locale?: Locale;\n  /**\n   * Element whose ancestor chain is searched for a non-empty `lang` when {@link locale} is\n   * omitted—for example a ref to your player shell `HTMLElement`.\n   */\n  langRootRef?: RefObject<Element | null>;\n  /**\n   * Per-locale string overrides merged on top of the global registry and any lazy built-in\n   * packs for {@link locale}. Applies to translated\n   * `aria-label` values and tooltip copy for skin controls wired through `useTranslator`.\n   *\n   * @example\n   * ```tsx\n   * <I18nProvider locale=\"ja\" translations={{ buttons: { play: '再生', pause: '一時停止' } }}>\n   *   <VideoSkin />\n   * </I18nProvider>\n   * ```\n   */\n  translations?: Partial<Translations>;\n  children: ReactNode;\n  /** Fires when the resolved locale changes (caption selection hooks may use this later). */\n  onActiveLocaleChange?: (locale: Locale) => void;\n}\n\nexport type { I18nContextValue } from './context';\n\nexport interface CreateI18nResult {\n  I18nContext: Context<I18nContextValue | null>;\n  I18nProvider: (props: I18nProviderProps) => ReactNode;\n  useTranslator: typeof useTranslator;\n  useLocale: typeof useLocale;\n}\n\n/**\n * Creates an i18n provider and hooks for the shared React i18n context.\n *\n * @param options - Optional hooks such as custom built-in locale loading.\n * @public\n */\nexport function createI18n(options?: CreateI18nOptions): CreateI18nResult {\n  const loader = options?.loader ?? defaultLoader;\n\n  function I18nProviderRoot({\n    locale: localeProp,\n    langRootRef,\n    parentLocale,\n    localeFromProp = localeProp !== undefined,\n    translations: translationsProp,\n    children,\n    onActiveLocaleChange,\n    parentAddLocaleRoot,\n  }: I18nProviderRootProps): ReactNode {\n    const langRootElement = useLangRootElement(langRootRef, parentAddLocaleRoot);\n    const ambientLang = useAmbientLang(langRootRef !== undefined, langRootElement);\n    const resolvedLocale = useMemo(\n      () => effectiveLocale<Locale>(localeProp, ambientLang ?? parentLocale),\n      [localeProp, ambientLang, parentLocale]\n    );\n\n    const addLocaleRoot = useLocaleRootNotifications(resolvedLocale, onActiveLocaleChange);\n    const lazyLayer = useLazyTranslations(resolvedLocale, loader);\n    const translations = useMergedTranslations(resolvedLocale, lazyLayer, translationsProp);\n\n    const translator = useMemo(() => createTranslator(translations, resolvedLocale), [translations, resolvedLocale]);\n\n    const value = useMemo<I18nContextValue>(\n      () => ({\n        translator,\n        locale: resolvedLocale,\n        localeFromProp,\n        ...(translationsProp !== undefined ? { translations: translationsProp } : {}),\n        ...(onActiveLocaleChange !== undefined ? { onActiveLocaleChange } : {}),\n      }),\n      [translator, resolvedLocale, localeFromProp, translationsProp, onActiveLocaleChange]\n    );\n\n    return (\n      <LocaleRootContext.Provider value={addLocaleRoot}>\n        <I18nContext.Provider value={value}>{children}</I18nContext.Provider>\n      </LocaleRootContext.Provider>\n    );\n  }\n\n  function I18nProvider(props: I18nProviderProps): ReactNode {\n    const parent = useContext(I18nContext);\n    const parentAddLocaleRoot = useContext(LocaleRootContext);\n\n    const rootProps = getProviderRootProps(props, parent, parentAddLocaleRoot);\n    if (!rootProps) return props.children;\n\n    return <I18nProviderRoot {...rootProps} />;\n  }\n\n  return { I18nContext, I18nProvider, useTranslator, useLocale };\n}\n\nconst defaultI18n = createI18n();\n\n/**\n * Resolves locale and supplies a typed translator to descendants. Mount this explicitly for\n * translated controls, forced locales, SSR copy, or locale-aware player roots.\n *\n * @public\n */\nexport const I18nProvider = defaultI18n.I18nProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuEA,SAAgB,WAAW,SAA+C;CACxE,MAAM,SAAS,SAAS,UAAUA;CAElC,SAAS,iBAAiB,EACxB,QAAQ,YACR,aACA,cACA,iBAAiB,eAAe,KAAA,GAChC,cAAc,kBACd,UACA,sBACA,uBACmC;EACnC,MAAM,kBAAkB,mBAAmB,aAAa,mBAAmB;EAC3E,MAAM,cAAc,eAAe,gBAAgB,KAAA,GAAW,eAAe;EAC7E,MAAM,iBAAiB,cACf,gBAAwB,YAAY,eAAe,YAAY,GACrE;GAAC;GAAY;GAAa;EAAY,CACxC;EAEA,MAAM,gBAAgB,2BAA2B,gBAAgB,oBAAoB;EAErF,MAAM,eAAe,sBAAsB,gBADzB,oBAAoB,gBAAgB,MACa,GAAG,gBAAgB;EAEtF,MAAM,aAAa,cAAc,iBAAiB,cAAc,cAAc,GAAG,CAAC,cAAc,cAAc,CAAC;EAE/G,MAAM,QAAQ,eACL;GACL;GACA,QAAQ;GACR;GACA,GAAI,qBAAqB,KAAA,IAAY,EAAE,cAAc,iBAAiB,IAAI,CAAC;GAC3E,GAAI,yBAAyB,KAAA,IAAY,EAAE,qBAAqB,IAAI,CAAC;EACvE,IACA;GAAC;GAAY;GAAgB;GAAgB;GAAkB;EAAoB,CACrF;EAEA,OACE,oBAAC,kBAAkB,UAAnB;GAA4B,OAAO;GACjC,UAAA,oBAAC,YAAY,UAAb;IAA6B;IAAQ;GAA+B,CAAA;EAC1C,CAAA;CAEhC;CAEA,SAAS,aAAa,OAAqC;EAIzD,MAAM,YAAY,qBAAqB,OAHxB,WAAW,WAGyB,GAFvB,WAAW,iBAEiC,CAAC;EACzE,IAAI,CAAC,WAAW,OAAO,MAAM;EAE7B,OAAO,oBAAC,kBAAD,EAAkB,GAAI,UAAY,CAAA;CAC3C;CAEA,OAAO;EAAE;EAAa;EAAc;EAAe;CAAU;AAC/D;;;;;;;AAUA,MAAa,eARO,WAQQ,CAAA,CAAY"}

package/dist/dev/i18n/get-provider-root-props.js

@@ -0,0 +1,40 @@
+//#region src/i18n/get-provider-root-props.ts
+function isRecord(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function mergeTranslations(parent, child) {
+	return {
+		...parent,
+		...child,
+		...parent && child ? Object.fromEntries(Object.keys(parent).filter((key) => isRecord(parent[key]) && isRecord(child[key])).map((key) => {
+			const parentValue = parent[key];
+			const childValue = child[key];
+			return [key, isRecord(parentValue) && isRecord(childValue) ? {
+				...parentValue,
+				...childValue
+			} : childValue];
+		})) : {}
+	};
+}
+function getProviderRootProps(props, parent, parentAddLocaleRoot) {
+	const hasOverrides = props.locale !== void 0 || props.translations !== void 0 || props.onActiveLocaleChange !== void 0;
+	const langRootOnly = props.langRootRef !== void 0 && !hasOverrides;
+	if (parent && !hasOverrides && (!langRootOnly || parent.localeFromProp)) return;
+	const inheritedLocale = props.locale ?? (props.langRootRef === void 0 ? parent?.locale : void 0);
+	const parentLocale = props.langRootRef !== void 0 ? parent?.locale : void 0;
+	const inheritedTranslations = props.translations !== void 0 && parent?.translations !== void 0 ? mergeTranslations(parent.translations, props.translations) : props.translations ?? (langRootOnly ? parent?.translations : void 0);
+	const onActiveLocaleChange = props.onActiveLocaleChange ?? parent?.onActiveLocaleChange;
+	return {
+		...props,
+		...inheritedLocale !== void 0 ? { locale: inheritedLocale } : {},
+		localeFromProp: props.locale !== void 0,
+		...parentLocale !== void 0 ? { parentLocale } : {},
+		...inheritedTranslations !== void 0 ? { translations: inheritedTranslations } : {},
+		...onActiveLocaleChange !== void 0 ? { onActiveLocaleChange } : {},
+		...parentAddLocaleRoot !== void 0 ? { parentAddLocaleRoot } : {}
+	};
+}
+//#endregion
+export { getProviderRootProps };
+
+//# sourceMappingURL=get-provider-root-props.js.map

package/dist/dev/i18n/get-provider-root-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-provider-root-props.js","names":[],"sources":["../../../src/i18n/get-provider-root-props.ts"],"sourcesContent":["import type { AddLocaleRoot, I18nContextValue } from './context';\nimport type { I18nProviderProps } from './create-i18n';\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return value !== null && typeof value === 'object' && !Array.isArray(value);\n}\n\nfunction mergeTranslations(\n  parent: I18nProviderProps['translations'],\n  child: I18nProviderProps['translations']\n): I18nProviderProps['translations'] {\n  return {\n    ...parent,\n    ...child,\n    ...(parent && child\n      ? Object.fromEntries(\n          Object.keys(parent)\n            .filter((key) => isRecord(parent[key]) && isRecord(child[key]))\n            .map((key) => {\n              const parentValue = parent[key];\n              const childValue = child[key];\n              return [\n                key,\n                isRecord(parentValue) && isRecord(childValue) ? { ...parentValue, ...childValue } : childValue,\n              ];\n            })\n        )\n      : {}),\n  } as I18nProviderProps['translations'];\n}\n\nexport interface I18nProviderRootProps extends I18nProviderProps {\n  parentLocale?: I18nContextValue['locale'];\n  localeFromProp?: boolean;\n  parentAddLocaleRoot?: AddLocaleRoot;\n}\n\nexport function getProviderRootProps(\n  props: I18nProviderProps,\n  parent: I18nContextValue | null,\n  parentAddLocaleRoot?: AddLocaleRoot\n): I18nProviderRootProps | undefined {\n  const hasOverrides =\n    props.locale !== undefined || props.translations !== undefined || props.onActiveLocaleChange !== undefined;\n  const langRootOnly = props.langRootRef !== undefined && !hasOverrides;\n\n  // Nested providers without their own locale root or overrides can use the\n  // existing parent context instead of mounting another root.\n  if (parent && !hasOverrides && (!langRootOnly || parent.localeFromProp)) {\n    return undefined;\n  }\n\n  const inheritedLocale = props.locale ?? (props.langRootRef === undefined ? parent?.locale : undefined);\n  const parentLocale = props.langRootRef !== undefined ? parent?.locale : undefined;\n  const inheritedTranslations =\n    props.translations !== undefined && parent?.translations !== undefined\n      ? mergeTranslations(parent.translations, props.translations)\n      : (props.translations ?? (langRootOnly ? parent?.translations : undefined));\n  const onActiveLocaleChange = props.onActiveLocaleChange ?? parent?.onActiveLocaleChange;\n\n  return {\n    ...props,\n    ...(inheritedLocale !== undefined ? { locale: inheritedLocale } : {}),\n    localeFromProp: props.locale !== undefined,\n    ...(parentLocale !== undefined ? { parentLocale } : {}),\n    ...(inheritedTranslations !== undefined ? { translations: inheritedTranslations } : {}),\n    ...(onActiveLocaleChange !== undefined ? { onActiveLocaleChange } : {}),\n    ...(parentAddLocaleRoot !== undefined ? { parentAddLocaleRoot } : {}),\n  };\n}\n"],"mappings":";AAGA,SAAS,SAAS,OAAkD;CAClE,OAAO,UAAU,QAAQ,OAAO,UAAU,YAAY,CAAC,MAAM,QAAQ,KAAK;AAC5E;AAEA,SAAS,kBACP,QACA,OACmC;CACnC,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAI,UAAU,QACV,OAAO,YACL,OAAO,KAAK,MAAM,CAAC,CAChB,QAAQ,QAAQ,SAAS,OAAO,IAAI,KAAK,SAAS,MAAM,IAAI,CAAC,CAAC,CAC9D,KAAK,QAAQ;GACZ,MAAM,cAAc,OAAO;GAC3B,MAAM,aAAa,MAAM;GACzB,OAAO,CACL,KACA,SAAS,WAAW,KAAK,SAAS,UAAU,IAAI;IAAE,GAAG;IAAa,GAAG;GAAW,IAAI,UACtF;EACF,CAAC,CACL,IACA,CAAC;CACP;AACF;AAQA,SAAgB,qBACd,OACA,QACA,qBACmC;CACnC,MAAM,eACJ,MAAM,WAAW,KAAA,KAAa,MAAM,iBAAiB,KAAA,KAAa,MAAM,yBAAyB,KAAA;CACnG,MAAM,eAAe,MAAM,gBAAgB,KAAA,KAAa,CAAC;CAIzD,IAAI,UAAU,CAAC,iBAAiB,CAAC,gBAAgB,OAAO,iBACtD;CAGF,MAAM,kBAAkB,MAAM,WAAW,MAAM,gBAAgB,KAAA,IAAY,QAAQ,SAAS,KAAA;CAC5F,MAAM,eAAe,MAAM,gBAAgB,KAAA,IAAY,QAAQ,SAAS,KAAA;CACxE,MAAM,wBACJ,MAAM,iBAAiB,KAAA,KAAa,QAAQ,iBAAiB,KAAA,IACzD,kBAAkB,OAAO,cAAc,MAAM,YAAY,IACxD,MAAM,iBAAiB,eAAe,QAAQ,eAAe,KAAA;CACpE,MAAM,uBAAuB,MAAM,wBAAwB,QAAQ;CAEnE,OAAO;EACL,GAAG;EACH,GAAI,oBAAoB,KAAA,IAAY,EAAE,QAAQ,gBAAgB,IAAI,CAAC;EACnE,gBAAgB,MAAM,WAAW,KAAA;EACjC,GAAI,iBAAiB,KAAA,IAAY,EAAE,aAAa,IAAI,CAAC;EACrD,GAAI,0BAA0B,KAAA,IAAY,EAAE,cAAc,sBAAsB,IAAI,CAAC;EACrF,GAAI,yBAAyB,KAAA,IAAY,EAAE,qBAAqB,IAAI,CAAC;EACrE,GAAI,wBAAwB,KAAA,IAAY,EAAE,oBAAoB,IAAI,CAAC;CACrE;AACF"}

package/dist/dev/i18n/index.d.ts

@@ -0,0 +1,4 @@
+import { I18nContext, I18nContextValue, useLocale, useTranslator } from "./context.js";
+import { CreateI18nOptions, CreateI18nResult, I18nProvider, I18nProviderProps, createI18n } from "./create-i18n.js";
+import { FlatTranslations, LOCALES, Locale, TranslationParams, Translations, Translator, createTranslator, findLocaleKeys, getI18nTranslations, hasRegisteredLocale, isText, onI18nRegistryChange, registerI18n } from "@videojs/core/i18n";
+export { type CreateI18nOptions, type CreateI18nResult, type FlatTranslations, I18nContext, type I18nContextValue, I18nProvider, type I18nProviderProps, LOCALES, type Locale, type TranslationParams, type Translations, type Translator, createI18n, createTranslator, findLocaleKeys, getI18nTranslations, hasRegisteredLocale, isText, onI18nRegistryChange, registerI18n, useLocale, useTranslator };

package/dist/dev/i18n/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { I18nContext, useLocale, useTranslator } from "./context.js";
+import { I18nProvider, createI18n } from "./create-i18n.js";
+import { LOCALES, createTranslator, findLocaleKeys, getI18nTranslations, hasRegisteredLocale, isText, onI18nRegistryChange, registerI18n } from "@videojs/core/i18n";
+export { I18nContext, I18nProvider, LOCALES, createI18n, createTranslator, findLocaleKeys, getI18nTranslations, hasRegisteredLocale, isText, onI18nRegistryChange, registerI18n, useLocale, useTranslator };

package/dist/dev/i18n/locales/all/register.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/dev/i18n/locales/all/register.js

@@ -0,0 +1,8 @@
+import { registerI18n } from "@videojs/core/i18n";
+import { all } from "@videojs/core/i18n/locales/all";
+//#region src/i18n/locales/all/register.ts
+/** Generated by packages/core/scripts/generate-i18n-locales.ts — do not edit. */
+for (const [tag, translations] of Object.entries(all)) registerI18n(tag, translations);
+//#endregion
+
+//# sourceMappingURL=register.js.map

package/dist/dev/i18n/locales/all/register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.js","names":[],"sources":["../../../../../src/i18n/locales/all/register.ts"],"sourcesContent":["/** Generated by packages/core/scripts/generate-i18n-locales.ts — do not edit. */\nimport { registerI18n } from '@videojs/core/i18n';\nimport { all } from '@videojs/core/i18n/locales/all';\n\nfor (const [tag, translations] of Object.entries(all)) {\n  registerI18n(tag, translations);\n}\n"],"mappings":";;;;AAIA,KAAK,MAAM,CAAC,KAAK,iBAAiB,OAAO,QAAQ,GAAG,GAClD,aAAa,KAAK,YAAY"}

package/dist/dev/i18n/locales/all.d.ts

@@ -0,0 +1,2 @@
+import { LocaleTag, all, localeTags } from "@videojs/core/i18n/locales/all";
+export { type LocaleTag, all, localeTags };

package/dist/dev/i18n/locales/all.js

@@ -0,0 +1,2 @@
+import { all, localeTags } from "@videojs/core/i18n/locales/all";
+export { all, localeTags };

package/dist/dev/i18n/locales/ar/register.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/dev/i18n/locales/ar/register.js

@@ -0,0 +1,8 @@
+import { registerI18n } from "@videojs/core/i18n";
+import translations from "@videojs/core/i18n/locales/ar";
+//#region src/i18n/locales/ar/register.ts
+/** Generated by packages/core/scripts/generate-i18n-locales.ts — do not edit. */
+registerI18n("ar", translations);
+//#endregion
+
+//# sourceMappingURL=register.js.map

package/dist/dev/i18n/locales/ar/register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.js","names":[],"sources":["../../../../../src/i18n/locales/ar/register.ts"],"sourcesContent":["/** Generated by packages/core/scripts/generate-i18n-locales.ts — do not edit. */\nimport { registerI18n } from '@videojs/core/i18n';\nimport translations from '@videojs/core/i18n/locales/ar';\n\nregisterI18n('ar', translations);\n"],"mappings":";;;;AAIA,aAAa,MAAM,YAAY"}

package/dist/dev/i18n/locales/ar.d.ts

@@ -0,0 +1,2 @@
+import ar_default from "@videojs/core/i18n/locales/ar";
+export { ar_default as default };

package/dist/dev/i18n/locales/ar.js

@@ -0,0 +1,2 @@
+import ar_default from "@videojs/core/i18n/locales/ar";
+export { ar_default as default };

package/dist/dev/i18n/locales/az/register.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/dev/i18n/locales/az/register.js

@@ -0,0 +1,8 @@
+import { registerI18n } from "@videojs/core/i18n";
+import translations from "@videojs/core/i18n/locales/az";
+//#region src/i18n/locales/az/register.ts
+/** Generated by packages/core/scripts/generate-i18n-locales.ts — do not edit. */
+registerI18n("az", translations);
+//#endregion
+
+//# sourceMappingURL=register.js.map

package/dist/dev/i18n/locales/az/register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.js","names":[],"sources":["../../../../../src/i18n/locales/az/register.ts"],"sourcesContent":["/** Generated by packages/core/scripts/generate-i18n-locales.ts — do not edit. */\nimport { registerI18n } from '@videojs/core/i18n';\nimport translations from '@videojs/core/i18n/locales/az';\n\nregisterI18n('az', translations);\n"],"mappings":";;;;AAIA,aAAa,MAAM,YAAY"}

package/dist/dev/i18n/locales/az.d.ts

@@ -0,0 +1,2 @@
+import az_default from "@videojs/core/i18n/locales/az";
+export { az_default as default };

package/dist/dev/i18n/locales/az.js

@@ -0,0 +1,2 @@
+import az_default from "@videojs/core/i18n/locales/az";
+export { az_default as default };

package/dist/dev/i18n/locales/bg/register.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/dev/i18n/locales/bg/register.js

@@ -0,0 +1,8 @@
+import { registerI18n } from "@videojs/core/i18n";
+import translations from "@videojs/core/i18n/locales/bg";
+//#region src/i18n/locales/bg/register.ts
+/** Generated by packages/core/scripts/generate-i18n-locales.ts — do not edit. */
+registerI18n("bg", translations);
+//#endregion
+
+//# sourceMappingURL=register.js.map

package/dist/dev/i18n/locales/bg/register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.js","names":[],"sources":["../../../../../src/i18n/locales/bg/register.ts"],"sourcesContent":["/** Generated by packages/core/scripts/generate-i18n-locales.ts — do not edit. */\nimport { registerI18n } from '@videojs/core/i18n';\nimport translations from '@videojs/core/i18n/locales/bg';\n\nregisterI18n('bg', translations);\n"],"mappings":";;;;AAIA,aAAa,MAAM,YAAY"}

package/dist/dev/i18n/locales/bg.d.ts

@@ -0,0 +1,2 @@
+import bg_default from "@videojs/core/i18n/locales/bg";
+export { bg_default as default };

package/dist/dev/i18n/locales/bg.js

@@ -0,0 +1,2 @@
+import bg_default from "@videojs/core/i18n/locales/bg";
+export { bg_default as default };

package/dist/dev/i18n/locales/bn/register.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/dev/i18n/locales/bn/register.js

@@ -0,0 +1,8 @@
+import { registerI18n } from "@videojs/core/i18n";
+import translations from "@videojs/core/i18n/locales/bn";
+//#region src/i18n/locales/bn/register.ts
+/** Generated by packages/core/scripts/generate-i18n-locales.ts — do not edit. */
+registerI18n("bn", translations);
+//#endregion
+
+//# sourceMappingURL=register.js.map

package/dist/dev/i18n/locales/bn/register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.js","names":[],"sources":["../../../../../src/i18n/locales/bn/register.ts"],"sourcesContent":["/** Generated by packages/core/scripts/generate-i18n-locales.ts — do not edit. */\nimport { registerI18n } from '@videojs/core/i18n';\nimport translations from '@videojs/core/i18n/locales/bn';\n\nregisterI18n('bn', translations);\n"],"mappings":";;;;AAIA,aAAa,MAAM,YAAY"}

package/dist/dev/i18n/locales/bn.d.ts

@@ -0,0 +1,2 @@
+import bn_default from "@videojs/core/i18n/locales/bn";
+export { bn_default as default };

package/dist/dev/i18n/locales/bn.js

@@ -0,0 +1,2 @@
+import bn_default from "@videojs/core/i18n/locales/bn";
+export { bn_default as default };

package/dist/dev/i18n/locales/bs/register.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/dev/i18n/locales/bs/register.js

@@ -0,0 +1,8 @@
+import { registerI18n } from "@videojs/core/i18n";
+import translations from "@videojs/core/i18n/locales/bs";
+//#region src/i18n/locales/bs/register.ts
+/** Generated by packages/core/scripts/generate-i18n-locales.ts — do not edit. */
+registerI18n("bs", translations);
+//#endregion
+
+//# sourceMappingURL=register.js.map