@videojs/react 10.0.0-beta.27 → 10.0.0-beta.28

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;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"}
+{"version":3,"file":"merge-props.js","names":[],"sources":["../../../src/utils/merge-props.ts"],"sourcesContent":["import 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":";;;;AAOA,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

@@ -1,4 +1,3 @@
-"use client";
 import { useCallback } from "react";
 //#region src/utils/use-attach-iframe.ts
 function useAttachIframe(media) {

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/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"}
+{"version":3,"file":"use-attach-iframe.js","names":[],"sources":["../../../src/utils/use-attach-iframe.ts"],"sourcesContent":["import 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":";;AAIA,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

@@ -1,4 +1,3 @@
-"use client";
 import { useCallback } from "react";
 //#region src/utils/use-attach-media.ts
 function useAttachMedia(media) {

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/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"}
+{"version":3,"file":"use-attach-media.js","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"sourcesContent":["import 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":";;AAIA,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

@@ -1,4 +1,3 @@
-"use client";
 import { useCallback } from "react";
 import { isFunction } from "@videojs/utils/predicate";
 //#region src/utils/use-composed-refs.ts

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;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"}
+{"version":3,"file":"use-composed-refs.js","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"sourcesContent":["import { 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":";;;;;;;;;;AAcA,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

@@ -1,4 +1,3 @@
-"use client";
 import { useLatestRef } from "./use-latest-ref.js";
 import { useEffect, useRef } from "react";
 //#region src/utils/use-destroy.ts

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,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"}
+{"version":3,"file":"use-destroy.js","names":[],"sources":["../../../src/utils/use-destroy.ts"],"sourcesContent":["import { 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":";;;;;;;;;;;;;;;;;AAsBA,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

@@ -1,4 +1,3 @@
-"use client";
 import { useReducer } from "react";
 //#region src/utils/use-force-render.ts
 function useForceRender() {

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,CAAC;CAC1D,OAAO;AACT"}
+{"version":3,"file":"use-force-render.js","names":[],"sources":["../../../src/utils/use-force-render.ts"],"sourcesContent":["import { 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":";;AAEA,SAAgB,iBAAiB;CAC/B,MAAM,GAAG,eAAe,YAAY,MAAc,IAAI,GAAG,CAAC;CAC1D,OAAO;AACT"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { useRef } from "react";
 //#region src/utils/use-latest-ref.ts
 /**

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,KAAK;CACxB,IAAI,UAAU;CACd,OAAO;AACT"}
+{"version":3,"file":"use-latest-ref.js","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"sourcesContent":["import { 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":";;;;;;;;AAQA,SAAgB,aAAoB,OAA4C;CAC9E,MAAM,MAAM,OAAO,KAAK;CACxB,IAAI,UAAU;CACd,OAAO;AACT"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { useMedia } from "../player/context.js";
 import { useDestroy } from "./use-destroy.js";
 import { useEffect, useState } from "react";

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

@@ -1 +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"}
+{"version":3,"file":"use-media-component.js","names":[],"sources":["../../../src/utils/use-media-component.ts"],"sourcesContent":["import 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":";;;;;;;;;;;;;;AAgBA,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

@@ -1,4 +1,3 @@
-"use client";
 import { useMediaAttach } from "../player/context.js";
 import { useDestroy } from "./use-destroy.js";
 import { useState } from "react";

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/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"}
+{"version":3,"file":"use-media-instance.js","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"sourcesContent":["import type { Media } from '@videojs/media';\nimport { useState } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useDestroy } from './use-destroy';\n\n/**\n * Create and manage a media instance lifecycle within a player context.\n *\n * Instantiates the media class once, attaches it to the player on mount,\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":";;;;;;;;;;;;;;;;AAkBA,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

@@ -1,4 +1,3 @@
-"use client";
 import { composeRefs } from "./use-composed-refs.js";
 import { mergeProps } from "./merge-props.js";
 import { getStateDataAttrs } from "@videojs/core/dom";

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;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"}
+{"version":3,"file":"use-render.js","names":[],"sources":["../../../src/utils/use-render.tsx"],"sourcesContent":["import { getStateDataAttrs, type StateAttrMap } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport 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":";;;;;;;AASA,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

@@ -1,4 +1,3 @@
-"use client";
 import { useId } from "react";
 //#region src/utils/use-safe-id.ts
 const UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;

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,MAAM,CAAC,CAAC,QAAQ,cAAc,EAAE;CAC5C,OAAO,SAAS,GAAG,OAAO,GAAG,QAAQ;AACvC"}
+{"version":3,"file":"use-safe-id.js","names":[],"sources":["../../../src/utils/use-safe-id.ts"],"sourcesContent":["import { useId } from 'react';\n\nconst UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;\n\n/**\n * Generate a CSS-safe identifier from React's `useId()`.\n *\n * `useId()` returns values like `:r0:` which contain colons — invalid\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":";;AAEA,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/dev/i18n/context.d.ts.map

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

package/dist/dev/i18n/context.js

@@ -1,4 +1,3 @@
-"use client";
 import { DEFAULT_LOCALE, createTranslator, getI18nTranslations, onI18nRegistryChange } from "@videojs/core/i18n";
 import { createContext, useContext, useEffect, useMemo, useReducer } from "react";
 //#region src/i18n/context.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/i18n/context.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createTranslator,\n  DEFAULT_LOCALE,\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(DEFAULT_LOCALE), DEFAULT_LOCALE);\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 ?? DEFAULT_LOCALE;\n}\n"],"mappings":";;;;;AA2BA,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,cAAc,GAAG,cAAc;CAC7E,GAAG,CAAC,aAAa,CAAC;CAElB,IAAI,CAAC,KACH,OAAO;CAET,OAAO,IAAI;AACb;;;;;;AAOA,SAAgB,YAAoB;CAElC,OADY,WAAW,WACd,CAAC,EAAE,UAAU;AACxB"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/i18n/context.tsx"],"sourcesContent":["import {\n  createTranslator,\n  DEFAULT_LOCALE,\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(DEFAULT_LOCALE), DEFAULT_LOCALE);\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 ?? DEFAULT_LOCALE;\n}\n"],"mappings":";;;;AAyBA,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,cAAc,GAAG,cAAc;CAC7E,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.map

@@ -1 +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"}
+{"version":3,"file":"create-i18n.d.ts","names":[],"sources":["../../../src/i18n/create-i18n.tsx"],"mappings":";;;;UAkBiB;;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

@@ -1,4 +1,3 @@
-"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";

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

@@ -1 +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"}
+{"version":3,"file":"create-i18n.js","names":["defaultLoader"],"sources":["../../../src/i18n/create-i18n.tsx"],"sourcesContent":["import {\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":";;;;;;;;;;;;;;;;;;AAqEA,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/media/audio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"audio.d.ts","names":[],"sources":["../../../src/media/audio.tsx"],"mappings":";;UAQiB,mBAAmB,oBAAoB;cAE3C,uBAAK,0BAAA,6BAAA,cAAA;kBAWD;OACH,QAAQ"}
+{"version":3,"file":"audio.d.ts","names":[],"sources":["../../../src/media/audio.tsx"],"mappings":";;UAMiB,mBAAmB,oBAAoB;cAE3C,uBAAK,0BAAA,6BAAA,cAAA;kBAWD;OACH,QAAQ"}

package/dist/dev/media/audio.js

@@ -1,4 +1,3 @@
-"use client";
 import { useComposedRefs } from "../utils/use-composed-refs.js";
 import { useMediaAttach } from "../player/context.js";
 import { forwardRef } from "react";

package/dist/dev/media/audio.js.map

@@ -1 +1 @@
-{"version":3,"file":"audio.js","names":[],"sources":["../../../src/media/audio.tsx"],"sourcesContent":["'use client';\n\nimport type { AudioHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface AudioProps extends AudioHTMLAttributes<HTMLAudioElement> {}\n\nexport const Audio = forwardRef<HTMLAudioElement, AudioProps>(function Audio({ children, ...props }, ref) {\n  const setMedia = useMediaAttach();\n  const composedRef = useComposedRefs(ref, setMedia);\n\n  return (\n    <audio ref={composedRef} {...props}>\n      {children}\n    </audio>\n  );\n});\n\nexport namespace Audio {\n  export type Props = AudioProps;\n}\n"],"mappings":";;;;;;AAUA,MAAa,QAAQ,WAAyC,SAAS,MAAM,EAAE,UAAU,GAAG,SAAS,KAAK;CAIxG,OACE,oBAAC,SAAD;EAAO,KAHW,gBAAgB,KADnB,eAC+B,CAGxB;EAAG,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}
+{"version":3,"file":"audio.js","names":[],"sources":["../../../src/media/audio.tsx"],"sourcesContent":["import type { AudioHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface AudioProps extends AudioHTMLAttributes<HTMLAudioElement> {}\n\nexport const Audio = forwardRef<HTMLAudioElement, AudioProps>(function Audio({ children, ...props }, ref) {\n  const setMedia = useMediaAttach();\n  const composedRef = useComposedRefs(ref, setMedia);\n\n  return (\n    <audio ref={composedRef} {...props}>\n      {children}\n    </audio>\n  );\n});\n\nexport namespace Audio {\n  export type Props = AudioProps;\n}\n"],"mappings":";;;;;AAQA,MAAa,QAAQ,WAAyC,SAAS,MAAM,EAAE,UAAU,GAAG,SAAS,KAAK;CAIxG,OACE,oBAAC,SAAD;EAAO,KAHW,gBAAgB,KADnB,eAC+B,CAGxB;EAAG,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}

package/dist/dev/media/video.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"video.d.ts","names":[],"sources":["../../../src/media/video.tsx"],"mappings":";;UAQiB,mBAAmB,oBAAoB;cAE3C,uBAAK,0BAAA,6BAAA,cAAA;kBAWD;OACH,QAAQ"}
+{"version":3,"file":"video.d.ts","names":[],"sources":["../../../src/media/video.tsx"],"mappings":";;UAMiB,mBAAmB,oBAAoB;cAE3C,uBAAK,0BAAA,6BAAA,cAAA;kBAWD;OACH,QAAQ"}

package/dist/dev/media/video.js

@@ -1,4 +1,3 @@
-"use client";
 import { useComposedRefs } from "../utils/use-composed-refs.js";
 import { useMediaAttach } from "../player/context.js";
 import { forwardRef } from "react";

package/dist/dev/media/video.js.map

@@ -1 +1 @@
-{"version":3,"file":"video.js","names":[],"sources":["../../../src/media/video.tsx"],"sourcesContent":["'use client';\n\nimport type { VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}\n\nexport const Video = forwardRef<HTMLVideoElement, VideoProps>(function Video({ children, ...props }, ref) {\n  const setMedia = useMediaAttach();\n  const composedRef = useComposedRefs(ref, setMedia);\n\n  return (\n    <video ref={composedRef} {...props}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace Video {\n  export type Props = VideoProps;\n}\n"],"mappings":";;;;;;AAUA,MAAa,QAAQ,WAAyC,SAAS,MAAM,EAAE,UAAU,GAAG,SAAS,KAAK;CAIxG,OACE,oBAAC,SAAD;EAAO,KAHW,gBAAgB,KADnB,eAC+B,CAGxB;EAAG,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}
+{"version":3,"file":"video.js","names":[],"sources":["../../../src/media/video.tsx"],"sourcesContent":["import type { VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}\n\nexport const Video = forwardRef<HTMLVideoElement, VideoProps>(function Video({ children, ...props }, ref) {\n  const setMedia = useMediaAttach();\n  const composedRef = useComposedRefs(ref, setMedia);\n\n  return (\n    <video ref={composedRef} {...props}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace Video {\n  export type Props = VideoProps;\n}\n"],"mappings":";;;;;AAQA,MAAa,QAAQ,WAAyC,SAAS,MAAM,EAAE,UAAU,GAAG,SAAS,KAAK;CAIxG,OACE,oBAAC,SAAD;EAAO,KAHW,gBAAgB,KADnB,eAC+B,CAGxB;EAAG,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}

package/dist/dev/player/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","names":[],"sources":["../../../src/player/container.tsx"],"mappings":";;UAuBiB,uBAAuB,eAAe;EACrD,WAAW;;cAGA,2BAAS,0BAAA,iCAAA,cAAA;kBAgDL;OACH,QAAQ"}
+{"version":3,"file":"container.d.ts","names":[],"sources":["../../../src/player/container.tsx"],"mappings":";;UAqBiB,uBAAuB,eAAe;EACrD,WAAW;;cAGA,2BAAS,0BAAA,iCAAA,cAAA;kBAgDL;OACH,QAAQ"}

package/dist/dev/player/container.js

@@ -1,4 +1,3 @@
-"use client";
 import { useTranslator } from "../i18n/context.js";
 import { useComposedRefs } from "../utils/use-composed-refs.js";
 import { useContainerAttach } from "./context.js";

package/dist/dev/player/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","names":[],"sources":["../../../src/player/container.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createPopupGroup,\n  DEFAULT_CONTAINER_ROLE,\n  DEFAULT_CONTAINER_TAB_INDEX,\n  focusContainer,\n} from '@videojs/core/dom';\nimport { labelText } from '@videojs/core/i18n/text/container';\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type PointerEventHandler,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useTranslator } from '../i18n/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\nimport { useContainerAttach } from './context';\nimport { PopupGroupProvider } from './popup-group-context';\n\nexport interface ContainerProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container(\n  {\n    children,\n    tabIndex = DEFAULT_CONTAINER_TAB_INDEX,\n    role = DEFAULT_CONTAINER_ROLE,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...props\n  },\n  ref\n) {\n  const setContainer = useContainerAttach();\n  const translator = useTranslator();\n  const [popupGroup] = useState(() => createPopupGroup());\n  const internalRef = useRef<HTMLDivElement>(null);\n  const composedRef = useComposedRefs(ref, internalRef);\n\n  useEffect(() => {\n    setContainer?.(internalRef.current);\n    return () => setContainer?.(null);\n  }, [setContainer]);\n\n  const handlePointerUp: PointerEventHandler<HTMLDivElement> = (event) => {\n    props.onPointerUp?.(event);\n    const el = internalRef.current;\n    if (!el) return;\n    focusContainer(el);\n  };\n\n  const accessibleNameProps =\n    ariaLabel !== undefined || ariaLabelledBy !== undefined\n      ? { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }\n      : { 'aria-label': translator(labelText) };\n\n  return (\n    <div\n      ref={composedRef}\n      role={role}\n      tabIndex={tabIndex}\n      {...accessibleNameProps}\n      {...props}\n      onPointerUp={handlePointerUp}\n    >\n      <PopupGroupProvider value={popupGroup}>{children}</PopupGroupProvider>\n    </div>\n  );\n});\n\nexport namespace Container {\n  export type Props = ContainerProps;\n}\n"],"mappings":";;;;;;;;;;AA2BA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EACE,UACA,WAAW,6BACX,OAAO,wBACP,cAAc,WACd,mBAAmB,gBACnB,GAAG,SAEL,KACA;CACA,MAAM,eAAe,mBAAmB;CACxC,MAAM,aAAa,cAAc;CACjC,MAAM,CAAC,cAAc,eAAe,iBAAiB,CAAC;CACtD,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,cAAc,gBAAgB,KAAK,WAAW;CAEpD,gBAAgB;EACd,eAAe,YAAY,OAAO;EAClC,aAAa,eAAe,IAAI;CAClC,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,mBAAwD,UAAU;EACtE,MAAM,cAAc,KAAK;EACzB,MAAM,KAAK,YAAY;EACvB,IAAI,CAAC,IAAI;EACT,eAAe,EAAE;CACnB;CAOA,OACE,oBAAC,OAAD;EACE,KAAK;EACC;EACI;EACV,GATF,cAAc,KAAA,KAAa,mBAAmB,KAAA,IAC1C;GAAE,cAAc;GAAW,mBAAmB;EAAe,IAC7D,EAAE,cAAc,WAAW,SAAS,EAAE;EAQxC,GAAI;EACJ,aAAa;EAEb,UAAA,oBAAC,oBAAD;GAAoB,OAAO;GAAa;EAA6B,CAAA;CAClE,CAAA;AAET,CAAC"}
+{"version":3,"file":"container.js","names":[],"sources":["../../../src/player/container.tsx"],"sourcesContent":["import {\n  createPopupGroup,\n  DEFAULT_CONTAINER_ROLE,\n  DEFAULT_CONTAINER_TAB_INDEX,\n  focusContainer,\n} from '@videojs/core/dom';\nimport { labelText } from '@videojs/core/i18n/text/container';\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type PointerEventHandler,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useTranslator } from '../i18n/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\nimport { useContainerAttach } from './context';\nimport { PopupGroupProvider } from './popup-group-context';\n\nexport interface ContainerProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container(\n  {\n    children,\n    tabIndex = DEFAULT_CONTAINER_TAB_INDEX,\n    role = DEFAULT_CONTAINER_ROLE,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...props\n  },\n  ref\n) {\n  const setContainer = useContainerAttach();\n  const translator = useTranslator();\n  const [popupGroup] = useState(() => createPopupGroup());\n  const internalRef = useRef<HTMLDivElement>(null);\n  const composedRef = useComposedRefs(ref, internalRef);\n\n  useEffect(() => {\n    setContainer?.(internalRef.current);\n    return () => setContainer?.(null);\n  }, [setContainer]);\n\n  const handlePointerUp: PointerEventHandler<HTMLDivElement> = (event) => {\n    props.onPointerUp?.(event);\n    const el = internalRef.current;\n    if (!el) return;\n    focusContainer(el);\n  };\n\n  const accessibleNameProps =\n    ariaLabel !== undefined || ariaLabelledBy !== undefined\n      ? { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }\n      : { 'aria-label': translator(labelText) };\n\n  return (\n    <div\n      ref={composedRef}\n      role={role}\n      tabIndex={tabIndex}\n      {...accessibleNameProps}\n      {...props}\n      onPointerUp={handlePointerUp}\n    >\n      <PopupGroupProvider value={popupGroup}>{children}</PopupGroupProvider>\n    </div>\n  );\n});\n\nexport namespace Container {\n  export type Props = ContainerProps;\n}\n"],"mappings":";;;;;;;;;AAyBA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EACE,UACA,WAAW,6BACX,OAAO,wBACP,cAAc,WACd,mBAAmB,gBACnB,GAAG,SAEL,KACA;CACA,MAAM,eAAe,mBAAmB;CACxC,MAAM,aAAa,cAAc;CACjC,MAAM,CAAC,cAAc,eAAe,iBAAiB,CAAC;CACtD,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,cAAc,gBAAgB,KAAK,WAAW;CAEpD,gBAAgB;EACd,eAAe,YAAY,OAAO;EAClC,aAAa,eAAe,IAAI;CAClC,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,mBAAwD,UAAU;EACtE,MAAM,cAAc,KAAK;EACzB,MAAM,KAAK,YAAY;EACvB,IAAI,CAAC,IAAI;EACT,eAAe,EAAE;CACnB;CAOA,OACE,oBAAC,OAAD;EACE,KAAK;EACC;EACI;EACV,GATF,cAAc,KAAA,KAAa,mBAAmB,KAAA,IAC1C;GAAE,cAAc;GAAW,mBAAmB;EAAe,IAC7D,EAAE,cAAc,WAAW,SAAS,EAAE;EAQxC,GAAI;EACJ,aAAa;EAEb,UAAA,oBAAC,oBAAD;GAAoB,OAAO;GAAa;EAA6B,CAAA;CAClE,CAAA;AAET,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/player/context.tsx"],"mappings":";;;;;UASiB;EACf,OAAO;EACP,OAAO;EACP,UAAU,SAAS,eAAe;EAClC,WAAW;EACX,cAAc,SAAS,eAAe;;;iBAqBxB,oBAAoB;;;;;;;;;;;iBAgBpB,aAAa;;;;;;;;;;iBAUb,UAAU,GAAG,WAAW,OAAO,iBAAiB,IAAI;;;;;;;;iBAapD,qBAAqB;;iBAErB,kBAAkB,GAAG,WAAW,OAAO,iBAAiB,IAAI;;iBAS5D,YAAY;;iBAMZ,gBAAgB;;iBAMhB,wBAAwB;;iBAMxB,kBAAkB,SAAS,eAAe;;iBAM1C,sBAAsB,SAAS,eAAe"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/player/context.tsx"],"mappings":";;;;;UAOiB;EACf,OAAO;EACP,OAAO;EACP,UAAU,SAAS,eAAe;EAClC,WAAW;EACX,cAAc,SAAS,eAAe;;;iBAqBxB,oBAAoB;;;;;;;;;;;iBAgBpB,aAAa;;;;;;;;;;iBAUb,UAAU,GAAG,WAAW,OAAO,iBAAiB,IAAI;;;;;;;;iBAapD,qBAAqB;;iBAErB,kBAAkB,GAAG,WAAW,OAAO,iBAAiB,IAAI;;iBAS5D,YAAY;;iBAMZ,gBAAgB;;iBAMhB,wBAAwB;;iBAMxB,kBAAkB,SAAS,eAAe;;iBAM1C,sBAAsB,SAAS,eAAe"}

package/dist/dev/player/context.js

@@ -1,4 +1,3 @@
-"use client";
 import { useStore } from "@videojs/store/react";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.tsx"],"sourcesContent":["'use client';\n\nimport type { MediaContainer } from '@videojs/core/dom';\nimport type { Media } from '@videojs/media';\nimport type { UnknownState, UnknownStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { createContext, useContext } from 'react';\n\nexport interface PlayerContextValue {\n  store: UnknownStore;\n  media: Media | null;\n  setMedia: Dispatch<SetStateAction<Media | null>>;\n  container: MediaContainer | null;\n  setContainer: Dispatch<SetStateAction<HTMLElement | null>>;\n}\n\nconst PlayerContext = createContext<PlayerContextValue | null>(null);\nconst EMPTY_UNSUBSCRIBE = () => {};\nconst EMPTY_STORE = {\n  state: {} as UnknownState,\n  subscribe: () => EMPTY_UNSUBSCRIBE,\n} as Pick<UnknownStore, 'state' | 'subscribe'>;\n\nexport function PlayerContextProvider({\n  value,\n  children,\n}: {\n  value: PlayerContextValue;\n  children: ReactNode;\n}): ReactNode {\n  return <PlayerContext.Provider value={value}>{children}</PlayerContext.Provider>;\n}\n\n/** Access the full player context value. Throws if used outside a Player. */\nexport function usePlayerContext(): PlayerContextValue {\n  const ctx = useContext(PlayerContext);\n  if (!ctx) throw new Error('usePlayerContext must be used within a Player');\n  return ctx;\n}\n\n/**\n * Access the player store from within a Player.\n *\n * This standalone hook has no knowledge of your configured features, so it\n * returns an untyped `UnknownStore` whose state properties are typed as\n * `unknown`. For typed access, use the `usePlayer` returned by `createPlayer()`,\n * or pass a premade selector to recover the type from its return value.\n *\n * @label Without Selector\n */\nexport function usePlayer(): UnknownStore;\n/**\n * Select a value from the player store. Re-renders when the selected value changes.\n *\n * The selector receives `UnknownState`, so an inline selector returns `unknown`.\n * Pass a premade selector (e.g. `selectPlayback`) to get a typed result.\n *\n * @label With Selector\n * @param selector - Derives a value from the player store state.\n */\nexport function usePlayer<R>(selector: (state: UnknownState) => R): R;\nexport function usePlayer<R>(selector?: (state: UnknownState) => R) {\n  const { store } = usePlayerContext();\n  return useStore(store, selector as any);\n}\n\n/**\n * Access player state when available, but return `undefined` outside a Player.\n *\n * This is useful for components that can operate without player context\n * (e.g. they accept fully explicit props as a fallback).\n */\n/** @label Without Selector */\nexport function useOptionalPlayer(): UnknownStore | undefined;\n/** @label With Selector */\nexport function useOptionalPlayer<R>(selector: (state: UnknownState) => R): R | undefined;\nexport function useOptionalPlayer<R>(selector?: (state: UnknownState) => R) {\n  const ctx = useContext(PlayerContext);\n  const store = (ctx?.store ?? (EMPTY_STORE as unknown as UnknownStore)) as UnknownStore;\n  const value = useStore(store, (ctx ? selector : undefined) as any);\n  return ctx ? value : undefined;\n}\n\n/** Access the media element from within a Player. */\nexport function useMedia(): Media | null {\n  const { media } = usePlayerContext();\n  return media;\n}\n\n/** Access the container element from within a Player. */\nexport function useContainer(): MediaContainer | null {\n  const { container } = usePlayerContext();\n  return container;\n}\n\n/** Access the container element when a Player is available. */\nexport function useOptionalContainer(): MediaContainer | null {\n  const ctx = useContext(PlayerContext);\n  return ctx?.container ?? null;\n}\n\n/** Access the media attach setter for connecting a media element to the player. */\nexport function useMediaAttach(): Dispatch<SetStateAction<Media | null>> | undefined {\n  const ctx = useContext(PlayerContext);\n  return ctx?.setMedia;\n}\n\n/** Access the container attach setter for connecting a container element to the player. */\nexport function useContainerAttach(): Dispatch<SetStateAction<HTMLElement | null>> | undefined {\n  const ctx = useContext(PlayerContext);\n  return ctx?.setContainer;\n}\n"],"mappings":";;;;;AAiBA,MAAM,gBAAgB,cAAyC,IAAI;AACnE,MAAM,0BAA0B,CAAC;AACjC,MAAM,cAAc;CAClB,OAAO,CAAC;CACR,iBAAiB;AACnB;AAEA,SAAgB,sBAAsB,EACpC,OACA,YAIY;CACZ,OAAO,oBAAC,cAAc,UAAf;EAA+B;EAAQ;CAAiC,CAAA;AACjF;;AAGA,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,aAAa;CACpC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,+CAA+C;CACzE,OAAO;AACT;AAuBA,SAAgB,UAAa,UAAuC;CAClE,MAAM,EAAE,UAAU,iBAAiB;CACnC,OAAO,SAAS,OAAO,QAAe;AACxC;AAYA,SAAgB,kBAAqB,UAAuC;CAC1E,MAAM,MAAM,WAAW,aAAa;CAEpC,MAAM,QAAQ,SADC,KAAK,SAAU,aACC,MAAM,WAAW,KAAA,CAAiB;CACjE,OAAO,MAAM,QAAQ,KAAA;AACvB;;AAGA,SAAgB,WAAyB;CACvC,MAAM,EAAE,UAAU,iBAAiB;CACnC,OAAO;AACT;;AAGA,SAAgB,eAAsC;CACpD,MAAM,EAAE,cAAc,iBAAiB;CACvC,OAAO;AACT;;AAGA,SAAgB,uBAA8C;CAE5D,OADY,WAAW,aACd,CAAC,EAAE,aAAa;AAC3B;;AAGA,SAAgB,iBAAqE;CAEnF,OADY,WAAW,aACd,CAAC,EAAE;AACd;;AAGA,SAAgB,qBAA+E;CAE7F,OADY,WAAW,aACd,CAAC,EAAE;AACd"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.tsx"],"sourcesContent":["import type { MediaContainer } from '@videojs/core/dom';\nimport type { Media } from '@videojs/media';\nimport type { UnknownState, UnknownStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { createContext, useContext } from 'react';\n\nexport interface PlayerContextValue {\n  store: UnknownStore;\n  media: Media | null;\n  setMedia: Dispatch<SetStateAction<Media | null>>;\n  container: MediaContainer | null;\n  setContainer: Dispatch<SetStateAction<HTMLElement | null>>;\n}\n\nconst PlayerContext = createContext<PlayerContextValue | null>(null);\nconst EMPTY_UNSUBSCRIBE = () => {};\nconst EMPTY_STORE = {\n  state: {} as UnknownState,\n  subscribe: () => EMPTY_UNSUBSCRIBE,\n} as Pick<UnknownStore, 'state' | 'subscribe'>;\n\nexport function PlayerContextProvider({\n  value,\n  children,\n}: {\n  value: PlayerContextValue;\n  children: ReactNode;\n}): ReactNode {\n  return <PlayerContext.Provider value={value}>{children}</PlayerContext.Provider>;\n}\n\n/** Access the full player context value. Throws if used outside a Player. */\nexport function usePlayerContext(): PlayerContextValue {\n  const ctx = useContext(PlayerContext);\n  if (!ctx) throw new Error('usePlayerContext must be used within a Player');\n  return ctx;\n}\n\n/**\n * Access the player store from within a Player.\n *\n * This standalone hook has no knowledge of your configured features, so it\n * returns an untyped `UnknownStore` whose state properties are typed as\n * `unknown`. For typed access, use the `usePlayer` returned by `createPlayer()`,\n * or pass a premade selector to recover the type from its return value.\n *\n * @label Without Selector\n */\nexport function usePlayer(): UnknownStore;\n/**\n * Select a value from the player store. Re-renders when the selected value changes.\n *\n * The selector receives `UnknownState`, so an inline selector returns `unknown`.\n * Pass a premade selector (e.g. `selectPlayback`) to get a typed result.\n *\n * @label With Selector\n * @param selector - Derives a value from the player store state.\n */\nexport function usePlayer<R>(selector: (state: UnknownState) => R): R;\nexport function usePlayer<R>(selector?: (state: UnknownState) => R) {\n  const { store } = usePlayerContext();\n  return useStore(store, selector as any);\n}\n\n/**\n * Access player state when available, but return `undefined` outside a Player.\n *\n * This is useful for components that can operate without player context\n * (e.g. they accept fully explicit props as a fallback).\n */\n/** @label Without Selector */\nexport function useOptionalPlayer(): UnknownStore | undefined;\n/** @label With Selector */\nexport function useOptionalPlayer<R>(selector: (state: UnknownState) => R): R | undefined;\nexport function useOptionalPlayer<R>(selector?: (state: UnknownState) => R) {\n  const ctx = useContext(PlayerContext);\n  const store = (ctx?.store ?? (EMPTY_STORE as unknown as UnknownStore)) as UnknownStore;\n  const value = useStore(store, (ctx ? selector : undefined) as any);\n  return ctx ? value : undefined;\n}\n\n/** Access the media element from within a Player. */\nexport function useMedia(): Media | null {\n  const { media } = usePlayerContext();\n  return media;\n}\n\n/** Access the container element from within a Player. */\nexport function useContainer(): MediaContainer | null {\n  const { container } = usePlayerContext();\n  return container;\n}\n\n/** Access the container element when a Player is available. */\nexport function useOptionalContainer(): MediaContainer | null {\n  const ctx = useContext(PlayerContext);\n  return ctx?.container ?? null;\n}\n\n/** Access the media attach setter for connecting a media element to the player. */\nexport function useMediaAttach(): Dispatch<SetStateAction<Media | null>> | undefined {\n  const ctx = useContext(PlayerContext);\n  return ctx?.setMedia;\n}\n\n/** Access the container attach setter for connecting a container element to the player. */\nexport function useContainerAttach(): Dispatch<SetStateAction<HTMLElement | null>> | undefined {\n  const ctx = useContext(PlayerContext);\n  return ctx?.setContainer;\n}\n"],"mappings":";;;;AAeA,MAAM,gBAAgB,cAAyC,IAAI;AACnE,MAAM,0BAA0B,CAAC;AACjC,MAAM,cAAc;CAClB,OAAO,CAAC;CACR,iBAAiB;AACnB;AAEA,SAAgB,sBAAsB,EACpC,OACA,YAIY;CACZ,OAAO,oBAAC,cAAc,UAAf;EAA+B;EAAQ;CAAiC,CAAA;AACjF;;AAGA,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,aAAa;CACpC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,+CAA+C;CACzE,OAAO;AACT;AAuBA,SAAgB,UAAa,UAAuC;CAClE,MAAM,EAAE,UAAU,iBAAiB;CACnC,OAAO,SAAS,OAAO,QAAe;AACxC;AAYA,SAAgB,kBAAqB,UAAuC;CAC1E,MAAM,MAAM,WAAW,aAAa;CAEpC,MAAM,QAAQ,SADC,KAAK,SAAU,aACC,MAAM,WAAW,KAAA,CAAiB;CACjE,OAAO,MAAM,QAAQ,KAAA;AACvB;;AAGA,SAAgB,WAAyB;CACvC,MAAM,EAAE,UAAU,iBAAiB;CACnC,OAAO;AACT;;AAGA,SAAgB,eAAsC;CACpD,MAAM,EAAE,cAAc,iBAAiB;CACvC,OAAO;AACT;;AAGA,SAAgB,uBAA8C;CAE5D,OADY,WAAW,aACd,CAAC,EAAE,aAAa;AAC3B;;AAGA,SAAgB,iBAAqE;CAEnF,OADY,WAAW,aACd,CAAC,EAAE;AACd;;AAGA,SAAgB,qBAA+E;CAE7F,OADY,WAAW,aACd,CAAC,EAAE;AACd"}

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

@@ -1 +1 @@
-{"version":3,"file":"create-player.d.ts","names":[],"sources":["../../../src/player/create-player.tsx"],"mappings":";;;;;UA2BiB,mBAAmB,iBAAiB;EACnD,UAAU;EACV;;KAGU,YAAY,sBACrB,aAAa,UAAU,OAAO;EAE/B,UAAU;;UAGK,mBAAmB,cAAc;EAChD,QAAQ,GAAG,YAAY,kBAAkB;EACzC,WAAW,cAAc;EACzB,gBAAgB;;KAGN,cAAc,cAAc;MAClC;GACH,GAAG,WAAW,OAAO,gBAAgB,WAAW,IAAI;;;;;;;;iBASvC,aAAa,QAAQ,mBAAmB,iBAAiB,mBAAmB;;;;;;;iBAQ5E,aAAa,QAAQ,mBAAmB,iBAAiB,mBAAmB;;;;;;;iBAQ5E,mBAAmB,iBAAiB,oBAClD,QAAQ,mBAAmB,YAC1B,mBAAmB,YAAY"}
+{"version":3,"file":"create-player.d.ts","names":[],"sources":["../../../src/player/create-player.tsx"],"mappings":";;;;;UAyBiB,mBAAmB,iBAAiB;EACnD,UAAU;EACV;;KAGU,YAAY,sBACrB,aAAa,UAAU,OAAO;EAE/B,UAAU;;UAGK,mBAAmB,cAAc;EAChD,QAAQ,GAAG,YAAY,kBAAkB;EACzC,WAAW,cAAc;EACzB,gBAAgB;;KAGN,cAAc,cAAc;MAClC;GACH,GAAG,WAAW,OAAO,gBAAgB,WAAW,IAAI;;;;;;;;iBASvC,aAAa,QAAQ,mBAAmB,iBAAiB,mBAAmB;;;;;;;iBAQ5E,aAAa,QAAQ,mBAAmB,iBAAiB,mBAAmB;;;;;;;iBAQ5E,mBAAmB,iBAAiB,oBAClD,QAAQ,mBAAmB,YAC1B,mBAAmB,YAAY"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { PlayerContextProvider, useMedia, usePlayerContext } from "./context.js";
 import { useDestroy } from "../utils/use-destroy.js";
 import { combinePlayerFeatureConfigs, setPlayerConfigValue } from "@videojs/core/dom";

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

@@ -1 +1 @@
-{"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type AnyPlayerFeature,\n  type AnyPlayerStore,\n  type AudioFeatures,\n  type AudioPlayerStore,\n  combinePlayerFeatureConfigs,\n  type InferPlayerConfig,\n  type PlayerFeatureConfig,\n  type PlayerStore,\n  type PlayerTarget,\n  setPlayerConfigValue,\n  type VideoFeatures,\n  type VideoPlayerStore,\n} from '@videojs/core/dom';\nimport type { Media } from '@videojs/media/dom';\nimport type { InferStoreState } from '@videojs/store';\nimport { combine, createStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport { pick } from '@videojs/utils/object';\nimport type { FC, ReactNode } from 'react';\nimport { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport { useDestroy } from '../utils/use-destroy';\nimport { PlayerContextProvider, useMedia, usePlayerContext } from './context';\n\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n  features: Features;\n  displayName?: string;\n}\n\nexport type PlayerProps<Config = object> = {\n  [Key in keyof Config]?: Config[Key] | undefined;\n} & {\n  children: ReactNode;\n};\n\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n  Player: FC<PlayerProps<InferPlayerConfig<Store>>>;\n  usePlayer: UsePlayerHook<Store>;\n  useMedia: () => Media | null;\n}\n\nexport type UsePlayerHook<Store extends PlayerStore> = {\n  (): Store;\n  <R>(selector: (state: InferStoreState<Store>) => R): R;\n};\n\n/**\n * Create a player instance with a typed Player component and hooks.\n *\n * @label Video\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;\n\n/**\n * Create a player for audio media.\n *\n * @label Audio\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;\n\n/**\n * Create a player with custom features.\n *\n * @label Generic\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer<const Features extends AnyPlayerFeature[]>(\n  config: CreatePlayerConfig<Features>\n): CreatePlayerResult<PlayerStore<Features>>;\n\nexport function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): CreatePlayerResult<AnyPlayerStore> {\n  const slice = combine(...config.features);\n  const featureConfig = combinePlayerFeatureConfigs(config.features);\n  const configKeys = Object.keys(featureConfig);\n\n  function createConfiguredStore(values: Record<string, unknown>) {\n    const store = createStore<PlayerTarget>()(slice);\n    applyConfigValues(store, featureConfig, values);\n    return store;\n  }\n\n  function Player(props: PlayerProps<any>): ReactNode {\n    const { children } = props;\n    // Only inputs declared by selected features are forwarded to store actions.\n    const configValues = pick(props, configKeys);\n    const [store, setStore] = useState(() => createConfiguredStore(configValues));\n    const syncedValues = useRef({ store, values: configValues });\n    const [media, setMedia] = useState<Media | null>(null);\n    const [container, setContainer] = useState<HTMLElement | null>(null);\n\n    useDestroy(store);\n\n    // Sync committed configuration props to the existing store.\n    useLayoutEffect(() => {\n      const previous = syncedValues.current;\n\n      // Replacement stores are seeded from this render's props during creation.\n      if (previous.store !== store) {\n        syncedValues.current = { store, values: configValues };\n        return;\n      }\n\n      for (const key of configKeys) {\n        if (Object.is(previous.values[key], configValues[key])) continue;\n        setPlayerConfigValue(store, featureConfig[key]!, configValues[key]);\n      }\n\n      syncedValues.current = { store, values: configValues };\n    });\n\n    useEffect(() => {\n      if (!media) return;\n\n      // The store may have been destroyed during an asynchronous gap between React\n      // effect cleanup and re-setup (e.g., React <Activity> hide → reveal). The\n      // useState initializer does not re-run in this case.\n      if (store.destroyed) {\n        setStore(createConfiguredStore(syncedValues.current.values));\n        return;\n      }\n\n      return store.attach({ media, container });\n    }, [media, container, store]);\n\n    const value = useMemo(() => ({ store, media, setMedia, container, setContainer }), [store, media, container]);\n\n    return <PlayerContextProvider value={value}>{children}</PlayerContextProvider>;\n  }\n\n  if (__DEV__ && config.displayName) {\n    Player.displayName = config.displayName;\n  }\n\n  function usePlayer<R>(selector?: (state: object) => R): AnyPlayerStore | R {\n    const { store } = usePlayerContext();\n    return useStore(store, selector as any);\n  }\n\n  return {\n    Player,\n    usePlayer,\n    useMedia,\n  };\n}\n\nfunction applyConfigValues(store: object, config: PlayerFeatureConfig, values: Record<string, unknown>): void {\n  for (const key of Object.keys(config)) {\n    setPlayerConfigValue(store, config[key]!, values[key]);\n  }\n}\n"],"mappings":";;;;;;;;;;AA2EA,SAAgB,aAAa,QAAoF;CAC/G,MAAM,QAAQ,QAAQ,GAAG,OAAO,QAAQ;CACxC,MAAM,gBAAgB,4BAA4B,OAAO,QAAQ;CACjE,MAAM,aAAa,OAAO,KAAK,aAAa;CAE5C,SAAS,sBAAsB,QAAiC;EAC9D,MAAM,QAAQ,YAA0B,CAAC,CAAC,KAAK;EAC/C,kBAAkB,OAAO,eAAe,MAAM;EAC9C,OAAO;CACT;CAEA,SAAS,OAAO,OAAoC;EAClD,MAAM,EAAE,aAAa;EAErB,MAAM,eAAe,KAAK,OAAO,UAAU;EAC3C,MAAM,CAAC,OAAO,YAAY,eAAe,sBAAsB,YAAY,CAAC;EAC5E,MAAM,eAAe,OAAO;GAAE;GAAO,QAAQ;EAAa,CAAC;EAC3D,MAAM,CAAC,OAAO,YAAY,SAAuB,IAAI;EACrD,MAAM,CAAC,WAAW,gBAAgB,SAA6B,IAAI;EAEnE,WAAW,KAAK;EAGhB,sBAAsB;GACpB,MAAM,WAAW,aAAa;GAG9B,IAAI,SAAS,UAAU,OAAO;IAC5B,aAAa,UAAU;KAAE;KAAO,QAAQ;IAAa;IACrD;GACF;GAEA,KAAK,MAAM,OAAO,YAAY;IAC5B,IAAI,OAAO,GAAG,SAAS,OAAO,MAAM,aAAa,IAAI,GAAG;IACxD,qBAAqB,OAAO,cAAc,MAAO,aAAa,IAAI;GACpE;GAEA,aAAa,UAAU;IAAE;IAAO,QAAQ;GAAa;EACvD,CAAC;EAED,gBAAgB;GACd,IAAI,CAAC,OAAO;GAKZ,IAAI,MAAM,WAAW;IACnB,SAAS,sBAAsB,aAAa,QAAQ,MAAM,CAAC;IAC3D;GACF;GAEA,OAAO,MAAM,OAAO;IAAE;IAAO;GAAU,CAAC;EAC1C,GAAG;GAAC;GAAO;GAAW;EAAK,CAAC;EAI5B,OAAO,oBAAC,uBAAD;GAAuB,OAFhB,eAAe;IAAE;IAAO;IAAO;IAAU;IAAW;GAAa,IAAI;IAAC;IAAO;IAAO;GAAS,CAElE;GAAI;EAAgC,CAAA;CAC/E;CAEA,IAAe,OAAO,aACpB,OAAO,cAAc,OAAO;CAG9B,SAAS,UAAa,UAAqD;EACzE,MAAM,EAAE,UAAU,iBAAiB;EACnC,OAAO,SAAS,OAAO,QAAe;CACxC;CAEA,OAAO;EACL;EACA;EACA;CACF;AACF;AAEA,SAAS,kBAAkB,OAAe,QAA6B,QAAuC;CAC5G,KAAK,MAAM,OAAO,OAAO,KAAK,MAAM,GAClC,qBAAqB,OAAO,OAAO,MAAO,OAAO,IAAI;AAEzD"}
+{"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.tsx"],"sourcesContent":["import {\n  type AnyPlayerFeature,\n  type AnyPlayerStore,\n  type AudioFeatures,\n  type AudioPlayerStore,\n  combinePlayerFeatureConfigs,\n  type InferPlayerConfig,\n  type PlayerFeatureConfig,\n  type PlayerStore,\n  type PlayerTarget,\n  setPlayerConfigValue,\n  type VideoFeatures,\n  type VideoPlayerStore,\n} from '@videojs/core/dom';\nimport type { Media } from '@videojs/media/dom';\nimport type { InferStoreState } from '@videojs/store';\nimport { combine, createStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport { pick } from '@videojs/utils/object';\nimport type { FC, ReactNode } from 'react';\nimport { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport { useDestroy } from '../utils/use-destroy';\nimport { PlayerContextProvider, useMedia, usePlayerContext } from './context';\n\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n  features: Features;\n  displayName?: string;\n}\n\nexport type PlayerProps<Config = object> = {\n  [Key in keyof Config]?: Config[Key] | undefined;\n} & {\n  children: ReactNode;\n};\n\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n  Player: FC<PlayerProps<InferPlayerConfig<Store>>>;\n  usePlayer: UsePlayerHook<Store>;\n  useMedia: () => Media | null;\n}\n\nexport type UsePlayerHook<Store extends PlayerStore> = {\n  (): Store;\n  <R>(selector: (state: InferStoreState<Store>) => R): R;\n};\n\n/**\n * Create a player instance with a typed Player component and hooks.\n *\n * @label Video\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;\n\n/**\n * Create a player for audio media.\n *\n * @label Audio\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;\n\n/**\n * Create a player with custom features.\n *\n * @label Generic\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer<const Features extends AnyPlayerFeature[]>(\n  config: CreatePlayerConfig<Features>\n): CreatePlayerResult<PlayerStore<Features>>;\n\nexport function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): CreatePlayerResult<AnyPlayerStore> {\n  const slice = combine(...config.features);\n  const featureConfig = combinePlayerFeatureConfigs(config.features);\n  const configKeys = Object.keys(featureConfig);\n\n  function createConfiguredStore(values: Record<string, unknown>) {\n    const store = createStore<PlayerTarget>()(slice);\n    applyConfigValues(store, featureConfig, values);\n    return store;\n  }\n\n  function Player(props: PlayerProps<any>): ReactNode {\n    const { children } = props;\n    // Only inputs declared by selected features are forwarded to store actions.\n    const configValues = pick(props, configKeys);\n    const [store, setStore] = useState(() => createConfiguredStore(configValues));\n    const syncedValues = useRef({ store, values: configValues });\n    const [media, setMedia] = useState<Media | null>(null);\n    const [container, setContainer] = useState<HTMLElement | null>(null);\n\n    useDestroy(store);\n\n    // Sync committed configuration props to the existing store.\n    useLayoutEffect(() => {\n      const previous = syncedValues.current;\n\n      // Replacement stores are seeded from this render's props during creation.\n      if (previous.store !== store) {\n        syncedValues.current = { store, values: configValues };\n        return;\n      }\n\n      for (const key of configKeys) {\n        if (Object.is(previous.values[key], configValues[key])) continue;\n        setPlayerConfigValue(store, featureConfig[key]!, configValues[key]);\n      }\n\n      syncedValues.current = { store, values: configValues };\n    });\n\n    useEffect(() => {\n      if (!media) return;\n\n      // The store may have been destroyed during an asynchronous gap between React\n      // effect cleanup and re-setup (e.g., React <Activity> hide → reveal). The\n      // useState initializer does not re-run in this case.\n      if (store.destroyed) {\n        setStore(createConfiguredStore(syncedValues.current.values));\n        return;\n      }\n\n      return store.attach({ media, container });\n    }, [media, container, store]);\n\n    const value = useMemo(() => ({ store, media, setMedia, container, setContainer }), [store, media, container]);\n\n    return <PlayerContextProvider value={value}>{children}</PlayerContextProvider>;\n  }\n\n  if (__DEV__ && config.displayName) {\n    Player.displayName = config.displayName;\n  }\n\n  function usePlayer<R>(selector?: (state: object) => R): AnyPlayerStore | R {\n    const { store } = usePlayerContext();\n    return useStore(store, selector as any);\n  }\n\n  return {\n    Player,\n    usePlayer,\n    useMedia,\n  };\n}\n\nfunction applyConfigValues(store: object, config: PlayerFeatureConfig, values: Record<string, unknown>): void {\n  for (const key of Object.keys(config)) {\n    setPlayerConfigValue(store, config[key]!, values[key]);\n  }\n}\n"],"mappings":";;;;;;;;;AAyEA,SAAgB,aAAa,QAAoF;CAC/G,MAAM,QAAQ,QAAQ,GAAG,OAAO,QAAQ;CACxC,MAAM,gBAAgB,4BAA4B,OAAO,QAAQ;CACjE,MAAM,aAAa,OAAO,KAAK,aAAa;CAE5C,SAAS,sBAAsB,QAAiC;EAC9D,MAAM,QAAQ,YAA0B,CAAC,CAAC,KAAK;EAC/C,kBAAkB,OAAO,eAAe,MAAM;EAC9C,OAAO;CACT;CAEA,SAAS,OAAO,OAAoC;EAClD,MAAM,EAAE,aAAa;EAErB,MAAM,eAAe,KAAK,OAAO,UAAU;EAC3C,MAAM,CAAC,OAAO,YAAY,eAAe,sBAAsB,YAAY,CAAC;EAC5E,MAAM,eAAe,OAAO;GAAE;GAAO,QAAQ;EAAa,CAAC;EAC3D,MAAM,CAAC,OAAO,YAAY,SAAuB,IAAI;EACrD,MAAM,CAAC,WAAW,gBAAgB,SAA6B,IAAI;EAEnE,WAAW,KAAK;EAGhB,sBAAsB;GACpB,MAAM,WAAW,aAAa;GAG9B,IAAI,SAAS,UAAU,OAAO;IAC5B,aAAa,UAAU;KAAE;KAAO,QAAQ;IAAa;IACrD;GACF;GAEA,KAAK,MAAM,OAAO,YAAY;IAC5B,IAAI,OAAO,GAAG,SAAS,OAAO,MAAM,aAAa,IAAI,GAAG;IACxD,qBAAqB,OAAO,cAAc,MAAO,aAAa,IAAI;GACpE;GAEA,aAAa,UAAU;IAAE;IAAO,QAAQ;GAAa;EACvD,CAAC;EAED,gBAAgB;GACd,IAAI,CAAC,OAAO;GAKZ,IAAI,MAAM,WAAW;IACnB,SAAS,sBAAsB,aAAa,QAAQ,MAAM,CAAC;IAC3D;GACF;GAEA,OAAO,MAAM,OAAO;IAAE;IAAO;GAAU,CAAC;EAC1C,GAAG;GAAC;GAAO;GAAW;EAAK,CAAC;EAI5B,OAAO,oBAAC,uBAAD;GAAuB,OAFhB,eAAe;IAAE;IAAO;IAAO;IAAU;IAAW;GAAa,IAAI;IAAC;IAAO;IAAO;GAAS,CAElE;GAAI;EAAgC,CAAA;CAC/E;CAEA,IAAe,OAAO,aACpB,OAAO,cAAc,OAAO;CAG9B,SAAS,UAAa,UAAqD;EACzE,MAAM,EAAE,UAAU,iBAAiB;EACnC,OAAO,SAAS,OAAO,QAAe;CACxC;CAEA,OAAO;EACL;EACA;EACA;CACF;AACF;AAEA,SAAS,kBAAkB,OAAe,QAA6B,QAAuC;CAC5G,KAAK,MAAM,OAAO,OAAO,KAAK,MAAM,GAClC,qBAAqB,OAAO,OAAO,MAAO,OAAO,IAAI;AAEzD"}

package/dist/dev/player/popup-group-context.js

@@ -1,4 +1,3 @@
-"use client";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/player/popup-group-context.tsx

package/dist/dev/player/popup-group-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"popup-group-context.js","names":[],"sources":["../../../src/player/popup-group-context.tsx"],"sourcesContent":["'use client';\n\nimport type { PopupGroup } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext } from 'react';\n\nconst PopupGroupContext = createContext<PopupGroup | undefined>(undefined);\n\nexport function PopupGroupProvider({ value, children }: { value: PopupGroup; children: ReactNode }): ReactNode {\n  return <PopupGroupContext.Provider value={value}>{children}</PopupGroupContext.Provider>;\n}\n\nexport function useOptionalPopupGroup(): PopupGroup | undefined {\n  return useContext(PopupGroupContext);\n}\n"],"mappings":";;;;AAMA,MAAM,oBAAoB,cAAsC,KAAA,CAAS;AAEzE,SAAgB,mBAAmB,EAAE,OAAO,YAAmE;CAC7G,OAAO,oBAAC,kBAAkB,UAAnB;EAAmC;EAAQ;CAAqC,CAAA;AACzF;AAEA,SAAgB,wBAAgD;CAC9D,OAAO,WAAW,iBAAiB;AACrC"}
+{"version":3,"file":"popup-group-context.js","names":[],"sources":["../../../src/player/popup-group-context.tsx"],"sourcesContent":["import type { PopupGroup } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext } from 'react';\n\nconst PopupGroupContext = createContext<PopupGroup | undefined>(undefined);\n\nexport function PopupGroupProvider({ value, children }: { value: PopupGroup; children: ReactNode }): ReactNode {\n  return <PopupGroupContext.Provider value={value}>{children}</PopupGroupContext.Provider>;\n}\n\nexport function useOptionalPopupGroup(): PopupGroup | undefined {\n  return useContext(PopupGroupContext);\n}\n"],"mappings":";;;AAIA,MAAM,oBAAoB,cAAsC,KAAA,CAAS;AAEzE,SAAgB,mBAAmB,EAAE,OAAO,YAAmE;CAC7G,OAAO,oBAAC,kBAAkB,UAAnB;EAAmC;EAAQ;CAAqC,CAAA;AACzF;AAEA,SAAgB,wBAAgD;CAC9D,OAAO,WAAW,iBAAiB;AACrC"}

package/dist/dev/presets/audio/minimal-skin.css

@@ -608,8 +608,8 @@
 
   .media-slider__chapter {
     --chapter-gap: calc(var(--spacing) * 1);
-    --chapter-inset-start: 0.5;
-    --chapter-inset-end: 0.5;
+    --chapter-inset-start: calc(var(--chapter-gap) / 2);
+    --chapter-inset-end: calc(var(--chapter-gap) / 2);
     position: absolute;
     inset: 0;
     display: flex;
@@ -619,10 +619,10 @@
     min-height: 0;
 
     &:first-child {
-      --chapter-inset-start: 0;
+      --chapter-inset-start: 0px;
     }
     &:last-child {
-      --chapter-inset-end: 0;
+      --chapter-inset-end: 0px;
     }
 
     .media-slider__chapter-track {
@@ -642,9 +642,8 @@
       .media-slider__chapter-track {
         height: var(--chapter-track-size);
         clip-path: inset(
-          0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
-            calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) round
-            var(--track-border-radius)
+          0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
+            calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)
         );
       }
 
@@ -659,9 +658,8 @@
       .media-slider__chapter-track {
         width: var(--chapter-track-size);
         clip-path: inset(
-          calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
-            calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) 0 round
-            var(--track-border-radius)
+          calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
+            calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)
         );
       }
 
@@ -773,15 +771,6 @@
       transition-property: opacity, scale;
     }
 
-    &[data-pointing] .media-slider__value,
-    &[data-pointing] .media-slider__thumbnail,
-    &[data-interactive]:not([data-pointing]):not([data-dragging]) .media-slider__value,
-    &[data-interactive]:not([data-pointing]):not([data-dragging]) .media-slider__thumbnail {
-      opacity: 1;
-      filter: blur(0);
-      scale: 1;
-    }
-
     &[data-orientation="horizontal"]::before {
       top: 50%;
       left: var(--media-slider-pointer);
@@ -800,6 +789,14 @@
       scale: 1;
     }
   }
+
+  &:is([data-pointing], :has(:focus-visible))
+    .media-slider__preview
+    :is(.media-slider__value, .media-slider__thumbnail) {
+    opacity: 1;
+    filter: blur(0);
+    scale: 1;
+  }
 }
 
 .media-minimal-skin {

package/dist/dev/presets/audio/minimal-skin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.d.ts","names":[],"sources":["../../../../src/presets/audio/minimal-skin.tsx"],"mappings":";;;KAmCY,wBAAwB;iBA0EpB,iBAAiB,OAAO,wBAAwB"}
+{"version":3,"file":"minimal-skin.d.ts","names":[],"sources":["../../../../src/presets/audio/minimal-skin.tsx"],"mappings":";;;KAqCY,wBAAwB;iBA0EpB,iBAAiB,OAAO,wBAAwB"}

package/dist/dev/presets/audio/minimal-skin.js

@@ -1,3 +1,4 @@
+"use client";
 import { useTranslator } from "../../i18n/context.js";
 import { usePlayer } from "../../player/context.js";
 import { Container } from "../../player/container.js";