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

package/dist/default/utils/merge-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"merge-props.js","names":[],"sources":["../../../src/utils/merge-props.ts"],"sourcesContent":["'use client';\n\nimport type { ComponentPropsWithRef, CSSProperties, ElementType, SyntheticEvent } from 'react';\n\ntype Props<T extends ElementType = ElementType> = ComponentPropsWithRef<T>;\n\n/**\n * Check if a key is an event handler key (on* with capital letter).\n */\nfunction isEventHandlerKey(key: string): boolean {\n  return (\n    key.charCodeAt(0) === 111 /* o */ &&\n    key.charCodeAt(1) === 110 /* n */ &&\n    key.charCodeAt(2) >= 65 /* A */ &&\n    key.charCodeAt(2) <= 90 /* Z */\n  );\n}\n\n/**\n * Check if a key/value pair is an event handler (includes undefined values).\n */\nfunction isEventHandler(key: string, value: unknown): boolean {\n  return isEventHandlerKey(key) && (typeof value === 'function' || typeof value === 'undefined');\n}\n\n/**\n * Merge two event handlers - external runs first, ours runs second.\n */\nfunction mergeEventHandlers(\n  ours: ((event: SyntheticEvent) => void) | undefined,\n  theirs: ((event: SyntheticEvent) => void) | undefined\n): ((event: SyntheticEvent) => void) | undefined {\n  if (!theirs) return ours;\n  if (!ours) return theirs;\n\n  return (event: SyntheticEvent) => {\n    theirs(event);\n    ours(event);\n  };\n}\n\n/**\n * Merge two className values - concatenate strings.\n */\nfunction mergeClassNames(ours: string | undefined, theirs: string | undefined): string | undefined {\n  if (theirs && ours) return `${theirs} ${ours}`;\n  return theirs || ours;\n}\n\n/**\n * Merge two style objects - theirs overwrites conflicts.\n */\nfunction mergeStyles(ours: CSSProperties | undefined, theirs: CSSProperties | undefined): CSSProperties | undefined {\n  if (!theirs) return ours;\n  if (!ours) return theirs;\n  return { ...ours, ...theirs };\n}\n\n/**\n * Merge a single props object into accumulated result.\n */\nfunction mergeOne<T extends ElementType>(\n  merged: Record<string, unknown>,\n  props: Props<T> | undefined\n): Record<string, unknown> {\n  if (!props) return merged;\n\n  for (const key in props) {\n    const value = props[key as keyof typeof props];\n\n    if (key === 'className') {\n      merged.className = mergeClassNames(merged.className as string | undefined, value as string);\n    } else if (key === 'style') {\n      merged.style = mergeStyles(merged.style as CSSProperties | undefined, value as CSSProperties);\n    } else if (isEventHandler(key, value)) {\n      merged[key] = mergeEventHandlers(\n        merged[key] as ((event: SyntheticEvent) => void) | undefined,\n        value as (event: SyntheticEvent) => void\n      );\n    } else {\n      merged[key] = value;\n    }\n  }\n\n  return merged;\n}\n\n/**\n * Merge multiple props objects.\n *\n * - Event handlers (on*): chained - external first, ours second\n * - className: concatenated\n * - style: merged objects (external wins conflicts)\n * - other: last one wins\n *\n * @public\n * @example\n * ```ts\n * const merged = mergeProps(\n *   { onClick: ourHandler, className: 'base' },\n *   { onClick: theirHandler, className: 'custom' }\n * );\n * // { onClick: chainedHandler, className: 'custom base' }\n * ```\n */\nexport function mergeProps<T extends ElementType>(...propSets: (Props<T> | undefined)[]): Props<T> {\n  let merged: Record<string, unknown> = {};\n\n  for (const props of propSets) {\n    merged = mergeOne(merged, props);\n  }\n\n  return merged as Props<T>;\n}\n"],"mappings":";;;;;AASA,SAAS,kBAAkB,KAAsB;AAC/C,QACE,IAAI,WAAW,EAAE,KAAK,OACtB,IAAI,WAAW,EAAE,KAAK,OACtB,IAAI,WAAW,EAAE,IAAI,MACrB,IAAI,WAAW,EAAE,IAAI;;;;;AAOzB,SAAS,eAAe,KAAa,OAAyB;AAC5D,QAAO,kBAAkB,IAAI,KAAK,OAAO,UAAU,cAAc,OAAO,UAAU;;;;;AAMpF,SAAS,mBACP,MACA,QAC+C;AAC/C,KAAI,CAAC,OAAQ,QAAO;AACpB,KAAI,CAAC,KAAM,QAAO;AAElB,SAAQ,UAA0B;AAChC,SAAO,MAAM;AACb,OAAK,MAAM;;;;;;AAOf,SAAS,gBAAgB,MAA0B,QAAgD;AACjG,KAAI,UAAU,KAAM,QAAO,GAAG,OAAO,GAAG;AACxC,QAAO,UAAU;;;;;AAMnB,SAAS,YAAY,MAAiC,QAA8D;AAClH,KAAI,CAAC,OAAQ,QAAO;AACpB,KAAI,CAAC,KAAM,QAAO;AAClB,QAAO;EAAE,GAAG;EAAM,GAAG;EAAQ;;;;;AAM/B,SAAS,SACP,QACA,OACyB;AACzB,KAAI,CAAC,MAAO,QAAO;AAEnB,MAAK,MAAM,OAAO,OAAO;EACvB,MAAM,QAAQ,MAAM;AAEpB,MAAI,QAAQ,YACV,QAAO,YAAY,gBAAgB,OAAO,WAAiC,MAAgB;WAClF,QAAQ,QACjB,QAAO,QAAQ,YAAY,OAAO,OAAoC,MAAuB;WACpF,eAAe,KAAK,MAAM,CACnC,QAAO,OAAO,mBACZ,OAAO,MACP,MACD;MAED,QAAO,OAAO;;AAIlB,QAAO;;;;;;;;;;;;;;;;;;;;AAqBT,SAAgB,WAAkC,GAAG,UAA8C;CACjG,IAAI,SAAkC,EAAE;AAExC,MAAK,MAAM,SAAS,SAClB,UAAS,SAAS,QAAQ,MAAM;AAGlC,QAAO"}
+{"version":3,"file":"merge-props.js","names":[],"sources":["../../../src/utils/merge-props.ts"],"sourcesContent":["'use client';\n\nimport type { ComponentPropsWithRef, CSSProperties, ElementType, SyntheticEvent } from 'react';\n\ntype Props<T extends ElementType = ElementType> = ComponentPropsWithRef<T>;\n\n/**\n * Check if a key is an event handler key (on* with capital letter).\n */\nfunction isEventHandlerKey(key: string): boolean {\n  return (\n    key.charCodeAt(0) === 111 /* o */ &&\n    key.charCodeAt(1) === 110 /* n */ &&\n    key.charCodeAt(2) >= 65 /* A */ &&\n    key.charCodeAt(2) <= 90 /* Z */\n  );\n}\n\n/**\n * Check if a key/value pair is an event handler (includes undefined values).\n */\nfunction isEventHandler(key: string, value: unknown): boolean {\n  return isEventHandlerKey(key) && (typeof value === 'function' || typeof value === 'undefined');\n}\n\n/**\n * Merge two event handlers - external runs first, ours runs second.\n */\nfunction mergeEventHandlers(\n  ours: ((event: SyntheticEvent) => void) | undefined,\n  theirs: ((event: SyntheticEvent) => void) | undefined\n): ((event: SyntheticEvent) => void) | undefined {\n  if (!theirs) return ours;\n  if (!ours) return theirs;\n\n  return (event: SyntheticEvent) => {\n    theirs(event);\n    ours(event);\n  };\n}\n\n/**\n * Merge two className values - concatenate strings.\n */\nfunction mergeClassNames(ours: string | undefined, theirs: string | undefined): string | undefined {\n  if (theirs && ours) return `${theirs} ${ours}`;\n  return theirs || ours;\n}\n\n/**\n * Merge two style objects - theirs overwrites conflicts.\n */\nfunction mergeStyles(ours: CSSProperties | undefined, theirs: CSSProperties | undefined): CSSProperties | undefined {\n  if (!theirs) return ours;\n  if (!ours) return theirs;\n  return { ...ours, ...theirs };\n}\n\n/**\n * Merge a single props object into accumulated result.\n */\nfunction mergeOne<T extends ElementType>(\n  merged: Record<string, unknown>,\n  props: Props<T> | undefined\n): Record<string, unknown> {\n  if (!props) return merged;\n\n  for (const key in props) {\n    const value = props[key as keyof typeof props];\n\n    if (key === 'className') {\n      merged.className = mergeClassNames(merged.className as string | undefined, value as string);\n    } else if (key === 'style') {\n      merged.style = mergeStyles(merged.style as CSSProperties | undefined, value as CSSProperties);\n    } else if (isEventHandler(key, value)) {\n      merged[key] = mergeEventHandlers(\n        merged[key] as ((event: SyntheticEvent) => void) | undefined,\n        value as (event: SyntheticEvent) => void\n      );\n    } else {\n      merged[key] = value;\n    }\n  }\n\n  return merged;\n}\n\n/**\n * Merge multiple props objects.\n *\n * - Event handlers (on*): chained - external first, ours second\n * - className: concatenated\n * - style: merged objects (external wins conflicts)\n * - other: last one wins\n *\n * @public\n * @example\n * ```ts\n * const merged = mergeProps(\n *   { onClick: ourHandler, className: 'base' },\n *   { onClick: theirHandler, className: 'custom' }\n * );\n * // { onClick: chainedHandler, className: 'custom base' }\n * ```\n */\nexport function mergeProps<T extends ElementType>(...propSets: (Props<T> | undefined)[]): Props<T> {\n  let merged: Record<string, unknown> = {};\n\n  for (const props of propSets) {\n    merged = mergeOne(merged, props);\n  }\n\n  return merged as Props<T>;\n}\n"],"mappings":";;;;;AASA,SAAS,kBAAkB,KAAsB;CAC/C,OACE,IAAI,WAAW,CAAC,MAAM,OACtB,IAAI,WAAW,CAAC,MAAM,OACtB,IAAI,WAAW,CAAC,KAAK,MACrB,IAAI,WAAW,CAAC,KAAK;AAEzB;;;;AAKA,SAAS,eAAe,KAAa,OAAyB;CAC5D,OAAO,kBAAkB,GAAG,MAAM,OAAO,UAAU,cAAc,OAAO,UAAU;AACpF;;;;AAKA,SAAS,mBACP,MACA,QAC+C;CAC/C,IAAI,CAAC,QAAQ,OAAO;CACpB,IAAI,CAAC,MAAM,OAAO;CAElB,QAAQ,UAA0B;EAChC,OAAO,KAAK;EACZ,KAAK,KAAK;CACZ;AACF;;;;AAKA,SAAS,gBAAgB,MAA0B,QAAgD;CACjG,IAAI,UAAU,MAAM,OAAO,GAAG,OAAO,GAAG;CACxC,OAAO,UAAU;AACnB;;;;AAKA,SAAS,YAAY,MAAiC,QAA8D;CAClH,IAAI,CAAC,QAAQ,OAAO;CACpB,IAAI,CAAC,MAAM,OAAO;CAClB,OAAO;EAAE,GAAG;EAAM,GAAG;CAAO;AAC9B;;;;AAKA,SAAS,SACP,QACA,OACyB;CACzB,IAAI,CAAC,OAAO,OAAO;CAEnB,KAAK,MAAM,OAAO,OAAO;EACvB,MAAM,QAAQ,MAAM;EAEpB,IAAI,QAAQ,aACV,OAAO,YAAY,gBAAgB,OAAO,WAAiC,KAAe;OACrF,IAAI,QAAQ,SACjB,OAAO,QAAQ,YAAY,OAAO,OAAoC,KAAsB;OACvF,IAAI,eAAe,KAAK,KAAK,GAClC,OAAO,OAAO,mBACZ,OAAO,MACP,KACF;OAEA,OAAO,OAAO;CAElB;CAEA,OAAO;AACT;;;;;;;;;;;;;;;;;;;AAoBA,SAAgB,WAAkC,GAAG,UAA8C;CACjG,IAAI,SAAkC,CAAC;CAEvC,KAAK,MAAM,SAAS,UAClB,SAAS,SAAS,QAAQ,KAAK;CAGjC,OAAO;AACT"}

package/dist/default/utils/use-attach-iframe.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-attach-iframe.js","names":[],"sources":["../../../src/utils/use-attach-iframe.ts"],"sourcesContent":["'use client';\n\nimport type { MediaEngineHost } from '@videojs/core';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\nexport function useAttachIframe<T extends HTMLIFrameElement>(media: MediaEngineHost): RefCallback<T> {\n  return useCallback(\n    (element: T | null) => {\n      if (element) media.attach?.(element);\n      else media.detach?.();\n      return () => media.detach?.();\n    },\n    [media]\n  );\n}\n"],"mappings":";;;AAMA,SAAgB,gBAA6C,OAAwC;AACnG,QAAO,aACJ,YAAsB;AACrB,MAAI,QAAS,OAAM,SAAS,QAAQ;MAC/B,OAAM,UAAU;AACrB,eAAa,MAAM,UAAU;IAE/B,CAAC,MAAM,CACR"}
+{"version":3,"file":"use-attach-iframe.js","names":[],"sources":["../../../src/utils/use-attach-iframe.ts"],"sourcesContent":["'use client';\n\nimport type { MediaEngineHost } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\nexport function useAttachIframe<T extends HTMLIFrameElement>(media: MediaEngineHost): RefCallback<T> {\n  return useCallback(\n    (element: T | null) => {\n      if (element) media.attach?.(element);\n      else media.detach?.();\n      return () => media.detach?.();\n    },\n    [media]\n  );\n}\n"],"mappings":";;;AAMA,SAAgB,gBAA6C,OAAwC;CACnG,OAAO,aACJ,YAAsB;EACrB,IAAI,SAAS,MAAM,SAAS,OAAO;OAC9B,MAAM,SAAS;EACpB,aAAa,MAAM,SAAS;CAC9B,GACA,CAAC,KAAK,CACR;AACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-attach-media.js","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"sourcesContent":["'use client';\n\nimport type { MediaEngineHost } from '@videojs/core';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\nexport function useAttachMedia<T extends HTMLMediaElement>(media: MediaEngineHost): RefCallback<T> {\n  return useCallback(\n    (element: T | null) => {\n      if (element) media.attach?.(element);\n      else media.detach?.();\n      return () => media.detach?.();\n    },\n    [media]\n  );\n}\n"],"mappings":";;;AAMA,SAAgB,eAA2C,OAAwC;AACjG,QAAO,aACJ,YAAsB;AACrB,MAAI,QAAS,OAAM,SAAS,QAAQ;MAC/B,OAAM,UAAU;AACrB,eAAa,MAAM,UAAU;IAE/B,CAAC,MAAM,CACR"}
+{"version":3,"file":"use-attach-media.js","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"sourcesContent":["'use client';\n\nimport type { MediaEngineHost } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\nexport function useAttachMedia<T extends HTMLMediaElement>(media: MediaEngineHost): RefCallback<T> {\n  return useCallback(\n    (element: T | null) => {\n      if (element) media.attach?.(element);\n      else media.detach?.();\n      return () => media.detach?.();\n    },\n    [media]\n  );\n}\n"],"mappings":";;;AAMA,SAAgB,eAA2C,OAAwC;CACjG,OAAO,aACJ,YAAsB;EACrB,IAAI,SAAS,MAAM,SAAS,OAAO;OAC9B,MAAM,SAAS;EACpB,aAAa,MAAM,SAAS;CAC9B,GACA,CAAC,KAAK,CACR;AACF"}

package/dist/default/utils/use-composed-refs.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-composed-refs.js","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"sourcesContent":["'use client';\n\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { Ref, RefCallback } from 'react';\n\nimport { useCallback } from 'react';\n\ntype OptionalRef<T> = Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value.\n *\n * Handles both callback refs and RefObject(s).\n *\n * @returns Cleanup function if the ref callback returned one (React 19+)\n */\nfunction setRef<T>(ref: OptionalRef<T>, value: T): (() => void) | void | undefined {\n  if (isFunction(ref)) {\n    return ref(value);\n  } else if (ref !== null && ref !== undefined) {\n    ref.current = value;\n  }\n}\n\n/**\n * Compose multiple refs into a single callback ref.\n *\n * @example\n * ```tsx\n * const composedRef = composeRefs(ref1, ref2, ref3);\n * return <div ref={composedRef} />;\n * ```\n */\nexport function composeRefs<T>(...refs: (OptionalRef<T> | OptionalRef<T>[])[]): RefCallback<T> {\n  const flatRefs = refs.flat();\n\n  return (node): (() => void) | void => {\n    const cleanups = flatRefs.map((ref) => setRef(ref, node));\n\n    // Only return cleanup if any refs returned one (React 19+).\n    // React 18 handles cleanup by calling the ref callback with null.\n    if (cleanups.some(isFunction)) {\n      return () => {\n        for (let i = 0; i < cleanups.length; i++) {\n          const cleanup = cleanups[i];\n          if (isFunction(cleanup)) {\n            cleanup();\n          } else {\n            setRef(flatRefs[i], null);\n          }\n        }\n      };\n    }\n  };\n}\n\n/**\n * Hook that composes multiple refs into a single callback ref.\n *\n * Memoized for stable reference.\n *\n * @example\n * ```tsx\n * const composedRef = useComposedRefs(forwardedRef, localRef);\n * return <div ref={composedRef} />;\n * ```\n */\nexport function useComposedRefs<T>(...refs: OptionalRef<T>[]): RefCallback<T> {\n  return useCallback(composeRefs(...refs), [...refs]);\n}\n"],"mappings":";;;;;;;;;;;AAgBA,SAAS,OAAU,KAAqB,OAA2C;AACjF,KAAI,WAAW,IAAI,CACjB,QAAO,IAAI,MAAM;UACR,QAAQ,QAAQ,QAAQ,KAAA,EACjC,KAAI,UAAU;;;;;;;;;;;AAalB,SAAgB,YAAe,GAAG,MAA6D;CAC7F,MAAM,WAAW,KAAK,MAAM;AAE5B,SAAQ,SAA8B;EACpC,MAAM,WAAW,SAAS,KAAK,QAAQ,OAAO,KAAK,KAAK,CAAC;AAIzD,MAAI,SAAS,KAAK,WAAW,CAC3B,cAAa;AACX,QAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;IACxC,MAAM,UAAU,SAAS;AACzB,QAAI,WAAW,QAAQ,CACrB,UAAS;QAET,QAAO,SAAS,IAAI,KAAK;;;;;;;;;;;;;;;;AAmBrC,SAAgB,gBAAmB,GAAG,MAAwC;AAC5E,QAAO,YAAY,YAAY,GAAG,KAAK,EAAE,CAAC,GAAG,KAAK,CAAC"}
+{"version":3,"file":"use-composed-refs.js","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"sourcesContent":["'use client';\n\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { Ref, RefCallback } from 'react';\n\nimport { useCallback } from 'react';\n\ntype OptionalRef<T> = Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value.\n *\n * Handles both callback refs and RefObject(s).\n *\n * @returns Cleanup function if the ref callback returned one (React 19+)\n */\nfunction setRef<T>(ref: OptionalRef<T>, value: T): (() => void) | void | undefined {\n  if (isFunction(ref)) {\n    return ref(value);\n  } else if (ref !== null && ref !== undefined) {\n    ref.current = value;\n  }\n}\n\n/**\n * Compose multiple refs into a single callback ref.\n *\n * @example\n * ```tsx\n * const composedRef = composeRefs(ref1, ref2, ref3);\n * return <div ref={composedRef} />;\n * ```\n */\nexport function composeRefs<T>(...refs: (OptionalRef<T> | OptionalRef<T>[])[]): RefCallback<T> {\n  const flatRefs = refs.flat();\n\n  return (node): (() => void) | void => {\n    const cleanups = flatRefs.map((ref) => setRef(ref, node));\n\n    // Only return cleanup if any refs returned one (React 19+).\n    // React 18 handles cleanup by calling the ref callback with null.\n    if (cleanups.some(isFunction)) {\n      return () => {\n        for (let i = 0; i < cleanups.length; i++) {\n          const cleanup = cleanups[i];\n          if (isFunction(cleanup)) {\n            cleanup();\n          } else {\n            setRef(flatRefs[i], null);\n          }\n        }\n      };\n    }\n  };\n}\n\n/**\n * Hook that composes multiple refs into a single callback ref.\n *\n * Memoized for stable reference.\n *\n * @example\n * ```tsx\n * const composedRef = useComposedRefs(forwardedRef, localRef);\n * return <div ref={composedRef} />;\n * ```\n */\nexport function useComposedRefs<T>(...refs: OptionalRef<T>[]): RefCallback<T> {\n  return useCallback(composeRefs(...refs), [...refs]);\n}\n"],"mappings":";;;;;;;;;;;AAgBA,SAAS,OAAU,KAAqB,OAA2C;CACjF,IAAI,WAAW,GAAG,GAChB,OAAO,IAAI,KAAK;MACX,IAAI,QAAQ,QAAQ,QAAQ,KAAA,GACjC,IAAI,UAAU;AAElB;;;;;;;;;;AAWA,SAAgB,YAAe,GAAG,MAA6D;CAC7F,MAAM,WAAW,KAAK,KAAK;CAE3B,QAAQ,SAA8B;EACpC,MAAM,WAAW,SAAS,KAAK,QAAQ,OAAO,KAAK,IAAI,CAAC;EAIxD,IAAI,SAAS,KAAK,UAAU,GAC1B,aAAa;GACX,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;IACxC,MAAM,UAAU,SAAS;IACzB,IAAI,WAAW,OAAO,GACpB,QAAQ;SAER,OAAO,SAAS,IAAI,IAAI;GAE5B;EACF;CAEJ;AACF;;;;;;;;;;;;AAaA,SAAgB,gBAAmB,GAAG,MAAwC;CAC5E,OAAO,YAAY,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC;AACpD"}

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

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

package/dist/default/utils/use-force-render.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-force-render.js","names":[],"sources":["../../../src/utils/use-force-render.ts"],"sourcesContent":["'use client';\n\nimport { useReducer } from 'react';\n\nexport function useForceRender() {\n  const [, forceRender] = useReducer((c: number) => c + 1, 0);\n  return forceRender;\n}\n\nexport namespace useForceRender {\n  export type Result = () => void;\n}\n"],"mappings":";;;AAIA,SAAgB,iBAAiB;CAC/B,MAAM,GAAG,eAAe,YAAY,MAAc,IAAI,GAAG,EAAE;AAC3D,QAAO"}
+{"version":3,"file":"use-force-render.js","names":[],"sources":["../../../src/utils/use-force-render.ts"],"sourcesContent":["'use client';\n\nimport { useReducer } from 'react';\n\nexport function useForceRender() {\n  const [, forceRender] = useReducer((c: number) => c + 1, 0);\n  return forceRender;\n}\n\nexport namespace useForceRender {\n  export type Result = () => void;\n}\n"],"mappings":";;;AAIA,SAAgB,iBAAiB;CAC/B,MAAM,GAAG,eAAe,YAAY,MAAc,IAAI,GAAG,CAAC;CAC1D,OAAO;AACT"}

package/dist/default/utils/use-latest-ref.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-latest-ref.js","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\n\n/**\n * Keep a ref that always points to the latest value.\n *\n * Useful for capturing callbacks or derived values inside closures\n * that are created once (e.g. factory callbacks) without stale reads.\n */\nexport function useLatestRef<Value>(value: Value): Readonly<{ current: Value }> {\n  const ref = useRef(value);\n  ref.current = value;\n  return ref;\n}\n\nexport namespace useLatestRef {\n  export type Result<Value> = Readonly<{ current: Value }>;\n}\n"],"mappings":";;;;;;;;;AAUA,SAAgB,aAAoB,OAA4C;CAC9E,MAAM,MAAM,OAAO,MAAM;AACzB,KAAI,UAAU;AACd,QAAO"}
+{"version":3,"file":"use-latest-ref.js","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\n\n/**\n * Keep a ref that always points to the latest value.\n *\n * Useful for capturing callbacks or derived values inside closures\n * that are created once (e.g. factory callbacks) without stale reads.\n */\nexport function useLatestRef<Value>(value: Value): Readonly<{ current: Value }> {\n  const ref = useRef(value);\n  ref.current = value;\n  return ref;\n}\n\nexport namespace useLatestRef {\n  export type Result<Value> = Readonly<{ current: Value }>;\n}\n"],"mappings":";;;;;;;;;AAUA,SAAgB,aAAoB,OAA4C;CAC9E,MAAM,MAAM,OAAO,KAAK;CACxB,IAAI,UAAU;CACd,OAAO;AACT"}

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

@@ -11,7 +11,7 @@ import { useState } from "react";
 * conditions when swapping media components (e.g. DashVideo → HlsJsVideo).
 *
 * An optional `setup` callback runs once on mount — e.g. to add media
-* components via `addComponent`. Components registered there are destroyed
+* components via `addMediaComponent`. Components registered there are destroyed
 * together with the media instance on unmount (`media.destroy()` destroys
 * all of its registered components).
 */

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 → HlsJsVideo).\n *\n * An optional `setup` callback runs once on mount — e.g. to add media\n * components via `addComponent`. 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,YAAY,CAAC;CACnD,MAAM,WAAW,gBAAgB;AAEjC,YACE,gBACM;AACJ,UAAQ,SAAS;AACjB,aAAW,SAAS;UAEhB,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.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 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;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;CAQ5C,MAAM,cAAc,WAJG,eAAe,kBAAkB,OAAO,aAAa,GAAG,EAAE,EAIlC,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