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

package/dist/default/ui/captions-radio-group/captions-radio-group.js

@@ -0,0 +1,65 @@
+"use client";
+import { MenuRadioGroup } from "../menu/menu-radio-group.js";
+import { useCaptionsOptions } from "./use-captions-options.js";
+import { getStateDataAttrs } from "@videojs/core/dom";
+import { Fragment, forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isFunction } from "@videojs/utils/predicate";
+import { CaptionsRadioGroupDataAttrs } from "@videojs/core";
+//#region src/ui/captions-radio-group/captions-radio-group.tsx
+/**
+* Renders menu radio items for the player's captions and subtitles tracks.
+*
+* @example
+* ```tsx
+* <CaptionsRadioGroup
+*   renderItem={(props, item) => (
+*     <Menu.RadioItem {...props}>
+*       {item.label}
+*       <Menu.ItemIndicator checked={item.checked} />
+*     </Menu.RadioItem>
+*   )}
+* />
+* ```
+*/
+const CaptionsRadioGroup = forwardRef(function CaptionsRadioGroup(componentProps, forwardedRef) {
+	const { renderItem, render, className, style, label, formatTrack, disabled, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...elementProps } = componentProps;
+	const captions = useCaptionsOptions({
+		label,
+		formatTrack,
+		disabled
+	});
+	if (!captions) return null;
+	const { state, value, options, setValue } = captions;
+	const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === void 0 ? captions.label : void 0);
+	return /* @__PURE__ */ jsx(MenuRadioGroup, {
+		...getStateDataAttrs(state, CaptionsRadioGroupDataAttrs),
+		...elementProps,
+		ref: forwardedRef,
+		className: isFunction(className) ? className(state) : className,
+		style: isFunction(style) ? style(state) : style,
+		render: isFunction(render) ? (props) => render(props, state) : render,
+		value,
+		onValueChange: setValue,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-disabled": state.disabled || void 0,
+		hidden: state.hidden,
+		children: options.map((option) => {
+			const itemState = {
+				...option,
+				checked: option.value === value
+			};
+			return /* @__PURE__ */ jsx(Fragment, { children: renderItem({
+				value: option.value,
+				disabled: option.disabled,
+				"data-track": option.value,
+				children: option.label
+			}, itemState) }, option.value);
+		})
+	});
+});
+//#endregion
+export { CaptionsRadioGroup };
+
+//# sourceMappingURL=captions-radio-group.js.map

package/dist/default/ui/captions-radio-group/captions-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"captions-radio-group.js","names":[],"sources":["../../../../src/ui/captions-radio-group/captions-radio-group.tsx"],"sourcesContent":["'use client';\n\nimport { type CaptionsRadioGroupCore, CaptionsRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement } from 'react';\nimport { Fragment, forwardRef } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\nimport { type CaptionsOption, type CaptionsOptionsProps, useCaptionsOptions } from './use-captions-options';\n\nexport type CaptionsRadioGroupItemState = CaptionsOption & {\n  /** Whether this option is currently selected. */\n  checked: boolean;\n};\n\nexport interface CaptionsRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n  /** Text track value represented by the item. */\n  'data-track': string;\n}\n\nexport interface CaptionsRadioGroupProps\n  extends Omit<UIComponentProps<'div', CaptionsRadioGroupCore.State>, 'children'>,\n    CaptionsOptionsProps {\n  /** Render one consumer-owned menu radio item for every captions option. */\n  renderItem: (props: CaptionsRadioGroupItemProps, state: CaptionsRadioGroupItemState) => ReactElement;\n}\n\n/**\n * Renders menu radio items for the player's captions and subtitles tracks.\n *\n * @example\n * ```tsx\n * <CaptionsRadioGroup\n *   renderItem={(props, item) => (\n *     <Menu.RadioItem {...props}>\n *       {item.label}\n *       <Menu.ItemIndicator checked={item.checked} />\n *     </Menu.RadioItem>\n *   )}\n * />\n * ```\n */\nexport const CaptionsRadioGroup = forwardRef<HTMLDivElement, CaptionsRadioGroupProps>(\n  function CaptionsRadioGroup(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      label,\n      formatTrack,\n      disabled,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const captions = useCaptionsOptions({ label, formatTrack, disabled });\n    if (!captions) return null;\n\n    const { state, value, options, setValue } = captions;\n    const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? captions.label : undefined);\n\n    return (\n      <MenuRadioGroup\n        {...getStateDataAttrs(state, CaptionsRadioGroupDataAttrs)}\n        {...elementProps}\n        ref={forwardedRef}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n        value={value}\n        onValueChange={setValue}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-disabled={state.disabled || undefined}\n        hidden={state.hidden}\n      >\n        {options.map((option) => {\n          const itemState = { ...option, checked: option.value === value };\n\n          return (\n            <Fragment key={option.value}>\n              {renderItem(\n                {\n                  value: option.value,\n                  disabled: option.disabled,\n                  'data-track': option.value,\n                  children: option.label,\n                },\n                itemState\n              )}\n            </Fragment>\n          );\n        })}\n      </MenuRadioGroup>\n    );\n  }\n);\n\nexport namespace CaptionsRadioGroup {\n  export type Props = CaptionsRadioGroupProps;\n  export type State = CaptionsRadioGroupCore.State;\n  export type ItemProps = CaptionsRadioGroupItemProps;\n  export type ItemState = CaptionsRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,gBAAgB,cAAc;CACxD,MAAM,EACJ,YACA,QACA,WACA,OACA,OACA,aACA,UACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,WAAW,mBAAmB;EAAE;EAAO;EAAa;CAAS,CAAC;CACpE,IAAI,CAAC,UAAU,OAAO;CAEtB,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,SAAS,QAAQ,KAAA;CAEpF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,2BAA2B;EACxD,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,cAAc,OAAO;IACrB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF"}

package/dist/default/ui/captions-radio-group/index.js

@@ -1,2 +1,3 @@
 import { useCaptionsOptions } from "./use-captions-options.js";
-export { useCaptionsOptions };
+import { CaptionsRadioGroup } from "./captions-radio-group.js";
+export { CaptionsRadioGroup, useCaptionsOptions };

package/dist/default/ui/captions-radio-group/use-captions-options.js

@@ -1,12 +1,14 @@
 "use client";
-import { useTranslator } from "../../i18n/context.js";
-import { usePlayer } from "../../player/context.js";
+import { createRadioOptionsHook } from "../hooks/create-radio-options-hook.js";
 import { selectTextTrack } from "@videojs/core/dom";
-import { translateText } from "@videojs/core/i18n";
-import { useCallback, useState } from "react";
-import { CAPTIONS_OFF_VALUE, CaptionsRadioGroupCore } from "@videojs/core";
-import { offText } from "@videojs/core/i18n/text/menu";
+import { CaptionsRadioGroupCore } from "@videojs/core";
 //#region src/ui/captions-radio-group/use-captions-options.ts
+const useCaptionsRadioOptions = createRadioOptionsHook({
+	name: "useCaptionsOptions",
+	feature: "textTrack",
+	selector: selectTextTrack,
+	createCore: () => new CaptionsRadioGroupCore()
+});
 /**
 * Create captions menu options (including an `Off` option) from the player
 * text track state. Returns `null` when the text tracks feature is not
@@ -16,30 +18,11 @@ import { offText } from "@videojs/core/i18n/text/menu";
 */
 function useCaptionsOptions(props) {
 	"use no memo";
-	const media = usePlayer(selectTextTrack);
-	const t = useTranslator();
-	const [core] = useState(() => new CaptionsRadioGroupCore());
-	core.setProps(props ?? {});
-	const setValue = useCallback((value) => core.selectValue(media, value), [core, media]);
-	if (!media) return null;
-	core.setMedia(media);
-	const state = core.getState();
-	const showMenu = state.tracks.length > 1;
+	const result = useCaptionsRadioOptions(props);
+	if (!result) return null;
 	return {
-		state,
-		value: state.value,
-		options: [{
-			value: CAPTIONS_OFF_VALUE,
-			label: translateText(offText, t),
-			disabled: state.disabled
-		}, ...state.tracks.map((track) => ({
-			value: track.value,
-			label: translateText(track.label, t),
-			disabled: state.disabled
-		}))],
-		disabled: state.disabled,
-		showMenu,
-		setValue
+		...result,
+		showMenu: result.state.options.length > 2
 	};
 }
 //#endregion

package/dist/default/ui/captions-radio-group/use-captions-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-captions-options.js","names":[],"sources":["../../../../src/ui/captions-radio-group/use-captions-options.ts"],"sourcesContent":["'use client';\n\nimport { CAPTIONS_OFF_VALUE, CaptionsRadioGroupCore } from '@videojs/core';\nimport { logMissingFeature, selectTextTrack } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { offText } from '@videojs/core/i18n/text/menu';\nimport { useCallback, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\n\nexport interface CaptionsOptionsProps extends CaptionsRadioGroupCore.Props {}\n\nexport interface CaptionsOption {\n  value: string;\n  label: string;\n  disabled: boolean;\n}\n\nexport interface CaptionsOptionsResult {\n  state: CaptionsRadioGroupCore.State;\n  value: string;\n  options: CaptionsOption[];\n  disabled: boolean;\n  showMenu: boolean;\n  setValue: (value: string) => void;\n}\n\n/**\n * Create captions menu options (including an `Off` option) from the player\n * text track state. Returns `null` when the text tracks feature is not\n * configured.\n *\n * @param props - Optional `label`, `formatTrack`, and `disabled` overrides.\n */\nexport function useCaptionsOptions(props?: CaptionsOptionsProps): CaptionsOptionsResult | null {\n  'use no memo';\n\n  const media = usePlayer(selectTextTrack);\n  const t = useTranslator();\n  const [core] = useState(() => new CaptionsRadioGroupCore());\n\n  core.setProps(props ?? {});\n\n  const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n  if (!media) {\n    if (__DEV__) logMissingFeature('useCaptionsOptions', selectTextTrack.displayName ?? 'textTrack');\n    return null;\n  }\n\n  core.setMedia(media);\n  const state = core.getState();\n  const showMenu = state.tracks.length > 1;\n\n  return {\n    state,\n    value: state.value,\n    options: [\n      {\n        value: CAPTIONS_OFF_VALUE,\n        label: translateText(offText, t),\n        disabled: state.disabled,\n      },\n      ...state.tracks.map((track) => ({\n        value: track.value,\n        label: translateText(track.label, t),\n        disabled: state.disabled,\n      })),\n    ],\n    disabled: state.disabled,\n    showMenu,\n    setValue,\n  };\n}\n\nexport namespace useCaptionsOptions {\n  export type Props = CaptionsOptionsProps;\n  export type Result = CaptionsOptionsResult;\n  export type Option = CaptionsOption;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAmCA,SAAgB,mBAAmB,OAA4D;CAC7F;CAEA,MAAM,QAAQ,UAAU,eAAe;CACvC,MAAM,IAAI,cAAc;CACxB,MAAM,CAAC,QAAQ,eAAe,IAAI,uBAAuB,CAAC;CAE1D,KAAK,SAAS,SAAS,CAAC,CAAC;CAEzB,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC;CAE9F,IAAI,CAAC,OAEH,OAAO;CAGT,KAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,SAAS;CAC5B,MAAM,WAAW,MAAM,OAAO,SAAS;CAEvC,OAAO;EACL;EACA,OAAO,MAAM;EACb,SAAS,CACP;GACE,OAAO;GACP,OAAO,cAAc,SAAS,CAAC;GAC/B,UAAU,MAAM;EAClB,GACA,GAAG,MAAM,OAAO,KAAK,WAAW;GAC9B,OAAO,MAAM;GACb,OAAO,cAAc,MAAM,OAAO,CAAC;GACnC,UAAU,MAAM;EAClB,EAAE,CACJ;EACA,UAAU,MAAM;EAChB;EACA;CACF;AACF"}
+{"version":3,"file":"use-captions-options.js","names":[],"sources":["../../../../src/ui/captions-radio-group/use-captions-options.ts"],"sourcesContent":["'use client';\n\nimport { CaptionsRadioGroupCore, type CaptionsRadioGroupOption } from '@videojs/core';\nimport { selectTextTrack } from '@videojs/core/dom';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface CaptionsOptionsProps extends CaptionsRadioGroupCore.Props {}\n\nexport type CaptionsOption = TranslatedRadioOption<CaptionsRadioGroupOption>;\n\nexport interface CaptionsOptionsResult {\n  state: CaptionsRadioGroupCore.State;\n  label: string;\n  value: string;\n  selectedLabel: string;\n  options: CaptionsOption[];\n  disabled: boolean;\n  hidden: boolean;\n  showMenu: boolean;\n  setValue: (value: string) => void;\n}\n\nconst useCaptionsRadioOptions = createRadioOptionsHook({\n  name: 'useCaptionsOptions',\n  feature: 'textTrack',\n  selector: selectTextTrack,\n  createCore: () => new CaptionsRadioGroupCore(),\n});\n\n/**\n * Create captions menu options (including an `Off` option) from the player\n * text track state. Returns `null` when the text tracks feature is not\n * configured.\n *\n * @param props - Optional `label`, `formatTrack`, and `disabled` overrides.\n */\nexport function useCaptionsOptions(props?: CaptionsOptionsProps): CaptionsOptionsResult | null {\n  'use no memo';\n\n  const result = useCaptionsRadioOptions(props);\n  if (!result) return null;\n\n  return { ...result, showMenu: result.state.options.length > 2 };\n}\n\nexport namespace useCaptionsOptions {\n  export type Props = CaptionsOptionsProps;\n  export type Result = CaptionsOptionsResult;\n  export type Option = CaptionsOption;\n}\n"],"mappings":";;;;;AAuBA,MAAM,0BAA0B,uBAAuB;CACrD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAI,uBAAuB;AAC/C,CAAC;;;;;;;;AASD,SAAgB,mBAAmB,OAA4D;CAC7F;CAEA,MAAM,SAAS,wBAAwB,KAAK;CAC5C,IAAI,CAAC,QAAQ,OAAO;CAEpB,OAAO;EAAE,GAAG;EAAQ,UAAU,OAAO,MAAM,QAAQ,SAAS;CAAE;AAChE"}

package/dist/default/ui/hooks/create-radio-options-hook.js

@@ -0,0 +1,43 @@
+"use client";
+import { useTranslator } from "../../i18n/context.js";
+import { usePlayer } from "../../player/context.js";
+import "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+import { useCallback, useState } from "react";
+//#region src/ui/hooks/create-radio-options-hook.ts
+/** Creates framework adapter mechanics shared by media-backed radio option hooks. */
+function createRadioOptionsHook({ name, feature, selector, createCore }) {
+	return function useRadioOptions(props) {
+		"use no memo";
+		const media = usePlayer(selector);
+		const t = useTranslator();
+		const [core] = useState(createCore);
+		core.setProps(props ?? {});
+		const setValue = useCallback((value) => core.selectValue(media, value), [core, media]);
+		if (!media) return null;
+		core.setMedia(media);
+		const state = core.getState();
+		const options = state.options.map((option) => {
+			const { label, labelParams, disabled, ...rest } = option;
+			return {
+				...rest,
+				label: translateText(label, t, labelParams),
+				disabled: state.disabled || disabled
+			};
+		});
+		return {
+			state,
+			label: translateText(core.getLabel(state), t, core.getLabelParams?.(state)),
+			value: state.value,
+			selectedLabel: options.find((option) => option.value === state.value)?.label ?? "",
+			options,
+			disabled: state.disabled,
+			hidden: state.hidden,
+			setValue
+		};
+	};
+}
+//#endregion
+export { createRadioOptionsHook };
+
+//# sourceMappingURL=create-radio-options-hook.js.map

package/dist/default/ui/hooks/create-radio-options-hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-radio-options-hook.js","names":[],"sources":["../../../../src/ui/hooks/create-radio-options-hook.ts"],"sourcesContent":["'use client';\n\nimport type { RadioOption, RadioOptionsState } from '@videojs/core';\nimport { logMissingFeature } from '@videojs/core/dom';\nimport { type Text, type TextParams, translateText } from '@videojs/core/i18n';\nimport type { UnknownState } from '@videojs/store';\nimport { useCallback, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\n\ninterface RadioOptionsCore<Props, Media, State extends RadioOptionsState> {\n  setProps(props: Props): void;\n  setMedia(media: Media): void;\n  getState(): State;\n  getLabel(state: State): Text | string;\n  getLabelParams?(state: State): TextParams | undefined;\n  selectValue(media: Media, value: string): void;\n}\n\ninterface RadioOptionsHookConfig<Props, Media, State extends RadioOptionsState> {\n  name: string;\n  feature: string;\n  selector: ((state: UnknownState) => Media | null) & { displayName?: string | undefined };\n  createCore: () => RadioOptionsCore<Props, Media, State>;\n}\n\ntype StateOption<State extends RadioOptionsState> = State extends RadioOptionsState<infer Option> ? Option : never;\n\nexport type TranslatedRadioOption<Option extends RadioOption> = Omit<Option, 'label' | 'labelParams' | 'disabled'> & {\n  label: string;\n  disabled: boolean;\n};\n\nexport interface RadioOptionsHookResult<Option extends RadioOption, State extends RadioOptionsState> {\n  state: State;\n  label: string;\n  value: string;\n  selectedLabel: string;\n  options: TranslatedRadioOption<Option>[];\n  disabled: boolean;\n  hidden: boolean;\n  setValue: (value: string) => void;\n}\n\n/** Creates framework adapter mechanics shared by media-backed radio option hooks. */\nexport function createRadioOptionsHook<Props, Media, State extends RadioOptionsState>({\n  name,\n  feature,\n  selector,\n  createCore,\n}: RadioOptionsHookConfig<Props, Media, State>): (\n  props?: Props\n) => RadioOptionsHookResult<StateOption<State>, State> | null {\n  return function useRadioOptions(props?: Props): RadioOptionsHookResult<StateOption<State>, State> | null {\n    'use no memo';\n\n    const media = usePlayer(selector);\n    const t = useTranslator();\n    const [core] = useState(createCore);\n\n    core.setProps(props ?? ({} as Props));\n\n    const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n    if (!media) {\n      if (__DEV__) logMissingFeature(name, selector.displayName ?? feature);\n      return null;\n    }\n\n    core.setMedia(media);\n    const state = core.getState();\n    const options = state.options.map((option) => {\n      const { label, labelParams, disabled, ...rest } = option;\n\n      return {\n        ...rest,\n        label: translateText(label, t, labelParams),\n        disabled: state.disabled || disabled,\n      } as TranslatedRadioOption<StateOption<State>>;\n    });\n\n    return {\n      state,\n      label: translateText(core.getLabel(state), t, core.getLabelParams?.(state)),\n      value: state.value,\n      selectedLabel: options.find((option) => option.value === state.value)?.label ?? '',\n      options,\n      disabled: state.disabled,\n      hidden: state.hidden,\n      setValue,\n    };\n  };\n}\n"],"mappings":";;;;;;;;AA8CA,SAAgB,uBAAsE,EACpF,MACA,SACA,UACA,cAG4D;CAC5D,OAAO,SAAS,gBAAgB,OAAyE;EACvG;EAEA,MAAM,QAAQ,UAAU,QAAQ;EAChC,MAAM,IAAI,cAAc;EACxB,MAAM,CAAC,QAAQ,SAAS,UAAU;EAElC,KAAK,SAAS,SAAU,CAAC,CAAW;EAEpC,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC;EAE9F,IAAI,CAAC,OAEH,OAAO;EAGT,KAAK,SAAS,KAAK;EACnB,MAAM,QAAQ,KAAK,SAAS;EAC5B,MAAM,UAAU,MAAM,QAAQ,KAAK,WAAW;GAC5C,MAAM,EAAE,OAAO,aAAa,UAAU,GAAG,SAAS;GAElD,OAAO;IACL,GAAG;IACH,OAAO,cAAc,OAAO,GAAG,WAAW;IAC1C,UAAU,MAAM,YAAY;GAC9B;EACF,CAAC;EAED,OAAO;GACL;GACA,OAAO,cAAc,KAAK,SAAS,KAAK,GAAG,GAAG,KAAK,iBAAiB,KAAK,CAAC;GAC1E,OAAO,MAAM;GACb,eAAe,QAAQ,MAAM,WAAW,OAAO,UAAU,MAAM,KAAK,CAAC,EAAE,SAAS;GAChF;GACA,UAAU,MAAM;GAChB,QAAQ,MAAM;GACd;EACF;CACF;AACF"}

package/dist/default/ui/hooks/use-slider.js

@@ -1,11 +1,12 @@
 "use client";
+import { useOptionalPlayer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { useDestroy } from "../../utils/use-destroy.js";
 import { useForceRender } from "../../utils/use-force-render.js";
-import { createSlider } from "@videojs/core/dom";
+import { createSlider, selectControls } from "@videojs/core/dom";
 import { useSnapshot } from "@videojs/store/react";
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
-import { isRTL } from "@videojs/utils/dom";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { applyStyles, isRTL } from "@videojs/utils/dom";
 //#region src/ui/hooks/use-slider.ts
 /**
 * Manages slider input lifecycle for React.
@@ -16,6 +17,13 @@ import { isRTL } from "@videojs/utils/dom";
 */
 function useSlider(options) {
 	const optionsRef = useLatestRef(options);
+	const requestControlsLock = useOptionalPlayer(selectControls)?.requestControlsLock;
+	const releaseControlsLockRef = useRef(null);
+	const releaseControlsLock = useCallback(() => {
+		releaseControlsLockRef.current?.();
+		releaseControlsLockRef.current = null;
+	}, []);
+	useEffect(() => releaseControlsLock, [releaseControlsLock]);
 	const rootElementRef = useRef(null);
 	const thumbElementRef = useRef(null);
 	const forceRender = useForceRender();
@@ -33,25 +41,53 @@ function useSlider(options) {
 			adjustPercent: optionsRef.current.adjustPercent,
 			onValueChange: (percent) => optionsRef.current.onValueChange?.(percent),
 			onValueCommit: (percent) => optionsRef.current.onValueCommit?.(percent),
-			onDragStart: () => optionsRef.current.onDragStart?.(),
-			onDragEnd: () => optionsRef.current.onDragEnd?.()
+			onDragStart: () => {
+				releaseControlsLockRef.current ??= requestControlsLock?.() ?? null;
+				optionsRef.current.onDragStart?.();
+			},
+			onDragEnd: () => {
+				releaseControlsLock();
+				optionsRef.current.onDragEnd?.();
+			}
 		});
 	});
 	useDestroy(slider);
-	const input = useSnapshot(slider.input);
+	const interaction = useSnapshot(slider.input, ({ dragging, pointing, focused }) => ({
+		dragging,
+		pointing,
+		focused
+	}));
+	const input = {
+		...slider.input.current,
+		...interaction
+	};
 	const state = options.computeState(input);
 	useLayoutEffect(() => {
 		if (state.thumbAlignment === "edge" && rootElementRef.current && thumbElementRef.current) forceRender();
 	}, [state.thumbAlignment]);
+	const cssVars = options.getCSSVars(slider.adjustForAlignment(state));
+	const syncStyles = useCallback((element = rootElementRef.current) => {
+		if (!element) return;
+		const next = optionsRef.current.computeState(slider.input.current);
+		applyStyles(element, optionsRef.current.getCSSVars(slider.adjustForAlignment(next)));
+	}, [slider]);
+	useLayoutEffect(() => {
+		syncStyles();
+		return slider.input.subscribe(syncStyles);
+	}, [slider, syncStyles]);
+	const rootRef = useCallback((element) => {
+		rootElementRef.current = element;
+		syncStyles(element);
+	}, [syncStyles]);
+	const thumbRef = useCallback((element) => {
+		thumbElementRef.current = element;
+	}, []);
 	return {
 		state,
-		cssVars: options.getCSSVars(slider.adjustForAlignment(state)),
-		rootRef: useCallback((element) => {
-			rootElementRef.current = element;
-		}, []),
-		thumbRef: useCallback((element) => {
-			thumbElementRef.current = element;
-		}, []),
+		input: slider.input,
+		cssVars,
+		rootRef,
+		thumbRef,
 		rootProps: slider.rootProps,
 		rootStyle: slider.rootStyle,
 		thumbProps: slider.thumbProps

package/dist/default/ui/hooks/use-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"sourcesContent":["'use client';\n\nimport type { SliderInput, SliderState } from '@videojs/core';\nimport {\n  createSlider,\n  type SliderApi,\n  type SliderOptions,\n  type SliderRootProps,\n  type SliderRootStyle,\n  type SliderThumbProps,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isRTL } from '@videojs/utils/dom';\nimport { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useForceRender } from '../../utils/use-force-render';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseSliderOptions<State extends SliderState = SliderState>\n  extends Pick<\n    SliderOptions,\n    | 'getPercent'\n    | 'getStepPercent'\n    | 'getLargeStepPercent'\n    | 'changeThrottle'\n    | 'onValueChange'\n    | 'onValueCommit'\n    | 'onDragStart'\n    | 'onDragEnd'\n  > {\n  computeState: (input: SliderInput) => State;\n  orientation?: 'horizontal' | 'vertical' | undefined;\n  disabled?: boolean | undefined;\n  /** Adjust a raw 0–100 percent for thumb alignment. Called for fill and pointer percents. */\n  adjustPercent?: ((rawPercent: number, thumbSize: number, trackSize: number) => number) | undefined;\n  /** Compute CSS variable map from the (possibly alignment-adjusted) state. */\n  getCSSVars: (state: State) => Record<string, string>;\n}\n\nexport interface UseSliderReturnValue<State extends SliderState = SliderState> {\n  state: State;\n  cssVars: Record<string, string>;\n  rootRef: React.RefCallback<HTMLElement>;\n  thumbRef: React.RefCallback<HTMLElement>;\n  rootProps: SliderRootProps;\n  rootStyle: SliderRootStyle;\n  thumbProps: SliderThumbProps;\n}\n\n/**\n * Manages slider input lifecycle for React.\n *\n * Wraps `createSlider()` from `@videojs/core/dom` and subscribes to its\n * input state via `useSnapshot`. Returns split props for the root\n * (pointer events) and thumb (keyboard/focus) elements.\n */\nexport function useSlider<State extends SliderState = SliderState>(\n  options: UseSliderOptions<State>\n): UseSliderReturnValue<State> {\n  const optionsRef = useLatestRef(options);\n\n  const rootElementRef = useRef<HTMLElement | null>(null);\n  const thumbElementRef = useRef<HTMLElement | null>(null);\n  const forceRender = useForceRender();\n\n  // Lazy-init the slider handle. Stable across re-renders.\n  const [slider] = useState<SliderApi>(() => {\n    const stableOptions: SliderOptions = {\n      getElement: () => rootElementRef.current!,\n      getThumbElement: () => thumbElementRef.current,\n      getOrientation: () => optionsRef.current.orientation ?? 'horizontal',\n      isRTL: () => (rootElementRef.current ? isRTL(rootElementRef.current) : false),\n      isDisabled: () => optionsRef.current.disabled ?? false,\n      getPercent: () => optionsRef.current.getPercent(),\n      getStepPercent: () => optionsRef.current.getStepPercent(),\n      getLargeStepPercent: () => optionsRef.current.getLargeStepPercent(),\n      changeThrottle: optionsRef.current.changeThrottle,\n      adjustPercent: optionsRef.current.adjustPercent,\n      onValueChange: (percent) => optionsRef.current.onValueChange?.(percent),\n      onValueCommit: (percent) => optionsRef.current.onValueCommit?.(percent),\n      onDragStart: () => optionsRef.current.onDragStart?.(),\n      onDragEnd: () => optionsRef.current.onDragEnd?.(),\n    };\n\n    return createSlider(stableOptions);\n  });\n\n  useDestroy(slider);\n\n  // Subscribe to slider input state.\n  const input = useSnapshot(slider.input);\n\n  // Compute derived state from input + caller-provided projection.\n  const state = options.computeState(input);\n\n  // Force a synchronous re-render after mount so edge thumb alignment\n  // can read DOM measurements from the now-populated element refs.\n  useLayoutEffect(() => {\n    if (state.thumbAlignment === 'edge' && rootElementRef.current && thumbElementRef.current) {\n      forceRender();\n    }\n  }, [state.thumbAlignment]);\n\n  // Adjust CSS var percents for edge thumb alignment using live DOM measurements.\n  const cssVars = options.getCSSVars(slider.adjustForAlignment(state));\n\n  // Ref callbacks for root and thumb elements.\n  const rootRef = useCallback((element: HTMLElement | null) => {\n    rootElementRef.current = element;\n  }, []);\n\n  const thumbRef = useCallback((element: HTMLElement | null) => {\n    thumbElementRef.current = element;\n  }, []);\n\n  return {\n    state,\n    cssVars,\n    rootRef,\n    thumbRef,\n    rootProps: slider.rootProps,\n    rootStyle: slider.rootStyle,\n    thumbProps: slider.thumbProps,\n  };\n}\n\nexport namespace useSlider {\n  export type Options = UseSliderOptions;\n  export type ReturnValue = UseSliderReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAwDA,SAAgB,UACd,SAC6B;CAC7B,MAAM,aAAa,aAAa,OAAO;CAEvC,MAAM,iBAAiB,OAA2B,IAAI;CACtD,MAAM,kBAAkB,OAA2B,IAAI;CACvD,MAAM,cAAc,eAAe;CAGnC,MAAM,CAAC,UAAU,eAA0B;EAkBzC,OAAO,aAAa;GAhBlB,kBAAkB,eAAe;GACjC,uBAAuB,gBAAgB;GACvC,sBAAsB,WAAW,QAAQ,eAAe;GACxD,aAAc,eAAe,UAAU,MAAM,eAAe,OAAO,IAAI;GACvE,kBAAkB,WAAW,QAAQ,YAAY;GACjD,kBAAkB,WAAW,QAAQ,WAAW;GAChD,sBAAsB,WAAW,QAAQ,eAAe;GACxD,2BAA2B,WAAW,QAAQ,oBAAoB;GAClE,gBAAgB,WAAW,QAAQ;GACnC,eAAe,WAAW,QAAQ;GAClC,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,OAAO;GACtE,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,OAAO;GACtE,mBAAmB,WAAW,QAAQ,cAAc;GACpD,iBAAiB,WAAW,QAAQ,YAAY;EAGlB,CAAC;CACnC,CAAC;CAED,WAAW,MAAM;CAGjB,MAAM,QAAQ,YAAY,OAAO,KAAK;CAGtC,MAAM,QAAQ,QAAQ,aAAa,KAAK;CAIxC,sBAAsB;EACpB,IAAI,MAAM,mBAAmB,UAAU,eAAe,WAAW,gBAAgB,SAC/E,YAAY;CAEhB,GAAG,CAAC,MAAM,cAAc,CAAC;CAczB,OAAO;EACL;EACA,SAbc,QAAQ,WAAW,OAAO,mBAAmB,KAAK,CAa1D;EACN,SAXc,aAAa,YAAgC;GAC3D,eAAe,UAAU;EAC3B,GAAG,CAAC,CASI;EACN,UARe,aAAa,YAAgC;GAC5D,gBAAgB,UAAU;EAC5B,GAAG,CAAC,CAMK;EACP,WAAW,OAAO;EAClB,WAAW,OAAO;EAClB,YAAY,OAAO;CACrB;AACF"}
+{"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"sourcesContent":["'use client';\n\nimport type { SliderInput, SliderState } from '@videojs/core';\nimport {\n  createSlider,\n  type SliderApi,\n  type SliderOptions,\n  type SliderRootProps,\n  type SliderRootStyle,\n  type SliderThumbProps,\n  selectControls,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { applyStyles, isRTL } from '@videojs/utils/dom';\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { useOptionalPlayer } from '../../player/context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useForceRender } from '../../utils/use-force-render';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseSliderOptions<State extends SliderState = SliderState>\n  extends Pick<\n    SliderOptions,\n    | 'getPercent'\n    | 'getStepPercent'\n    | 'getLargeStepPercent'\n    | 'changeThrottle'\n    | 'onValueChange'\n    | 'onValueCommit'\n    | 'onDragStart'\n    | 'onDragEnd'\n  > {\n  computeState: (input: SliderInput) => State;\n  orientation?: 'horizontal' | 'vertical' | undefined;\n  disabled?: boolean | undefined;\n  /** Adjust a raw 0–100 percent for thumb alignment. Called for fill and pointer percents. */\n  adjustPercent?: ((rawPercent: number, thumbSize: number, trackSize: number) => number) | undefined;\n  /** Compute CSS variable map from the (possibly alignment-adjusted) state. */\n  getCSSVars: (state: State) => Record<string, string>;\n}\n\nexport interface UseSliderReturnValue<State extends SliderState = SliderState> {\n  state: State;\n  input: SliderApi['input'];\n  cssVars: Record<string, string>;\n  rootRef: React.RefCallback<HTMLElement>;\n  thumbRef: React.RefCallback<HTMLElement>;\n  rootProps: SliderRootProps;\n  rootStyle: SliderRootStyle;\n  thumbProps: SliderThumbProps;\n}\n\n/**\n * Manages slider input lifecycle for React.\n *\n * Wraps `createSlider()` from `@videojs/core/dom` and subscribes to its\n * input state via `useSnapshot`. Returns split props for the root\n * (pointer events) and thumb (keyboard/focus) elements.\n */\nexport function useSlider<State extends SliderState = SliderState>(\n  options: UseSliderOptions<State>\n): UseSliderReturnValue<State> {\n  const optionsRef = useLatestRef(options);\n  const controls = useOptionalPlayer(selectControls);\n  const requestControlsLock = controls?.requestControlsLock;\n  const releaseControlsLockRef = useRef<(() => void) | null>(null);\n\n  const releaseControlsLock = useCallback(() => {\n    releaseControlsLockRef.current?.();\n    releaseControlsLockRef.current = null;\n  }, []);\n\n  useEffect(() => releaseControlsLock, [releaseControlsLock]);\n\n  const rootElementRef = useRef<HTMLElement | null>(null);\n  const thumbElementRef = useRef<HTMLElement | null>(null);\n  const forceRender = useForceRender();\n\n  // Lazy-init the slider handle. Stable across re-renders.\n  const [slider] = useState<SliderApi>(() => {\n    const stableOptions: SliderOptions = {\n      getElement: () => rootElementRef.current!,\n      getThumbElement: () => thumbElementRef.current,\n      getOrientation: () => optionsRef.current.orientation ?? 'horizontal',\n      isRTL: () => (rootElementRef.current ? isRTL(rootElementRef.current) : false),\n      isDisabled: () => optionsRef.current.disabled ?? false,\n      getPercent: () => optionsRef.current.getPercent(),\n      getStepPercent: () => optionsRef.current.getStepPercent(),\n      getLargeStepPercent: () => optionsRef.current.getLargeStepPercent(),\n      changeThrottle: optionsRef.current.changeThrottle,\n      adjustPercent: optionsRef.current.adjustPercent,\n      onValueChange: (percent) => optionsRef.current.onValueChange?.(percent),\n      onValueCommit: (percent) => optionsRef.current.onValueCommit?.(percent),\n      onDragStart: () => {\n        releaseControlsLockRef.current ??= requestControlsLock?.() ?? null;\n        optionsRef.current.onDragStart?.();\n      },\n      onDragEnd: () => {\n        releaseControlsLock();\n        optionsRef.current.onDragEnd?.();\n      },\n    };\n\n    return createSlider(stableOptions);\n  });\n\n  useDestroy(slider);\n\n  // Percentage changes are rendered directly below. React only needs to\n  // re-render when interaction state changes.\n  const interaction = useSnapshot(slider.input, ({ dragging, pointing, focused }) => ({\n    dragging,\n    pointing,\n    focused,\n  }));\n  const input = { ...slider.input.current, ...interaction };\n\n  // Compute derived state from input + caller-provided projection.\n  const state = options.computeState(input);\n\n  // Force a synchronous re-render after mount so edge thumb alignment\n  // can read DOM measurements from the now-populated element refs.\n  useLayoutEffect(() => {\n    if (state.thumbAlignment === 'edge' && rootElementRef.current && thumbElementRef.current) {\n      forceRender();\n    }\n  }, [state.thumbAlignment]);\n\n  // Adjust CSS var percents for edge thumb alignment using live DOM measurements.\n  const cssVars = options.getCSSVars(slider.adjustForAlignment(state));\n\n  const syncStyles = useCallback(\n    (element = rootElementRef.current) => {\n      if (!element) return;\n      const next = optionsRef.current.computeState(slider.input.current);\n      applyStyles(element, optionsRef.current.getCSSVars(slider.adjustForAlignment(next)));\n    },\n    [slider]\n  );\n\n  useLayoutEffect(() => {\n    syncStyles();\n    return slider.input.subscribe(syncStyles);\n  }, [slider, syncStyles]);\n\n  // Ref callbacks for root and thumb elements.\n  const rootRef = useCallback(\n    (element: HTMLElement | null) => {\n      rootElementRef.current = element;\n      syncStyles(element);\n    },\n    [syncStyles]\n  );\n\n  const thumbRef = useCallback((element: HTMLElement | null) => {\n    thumbElementRef.current = element;\n  }, []);\n\n  return {\n    state,\n    input: slider.input,\n    cssVars,\n    rootRef,\n    thumbRef,\n    rootProps: slider.rootProps,\n    rootStyle: slider.rootStyle,\n    thumbProps: slider.thumbProps,\n  };\n}\n\nexport namespace useSlider {\n  export type Options = UseSliderOptions;\n  export type ReturnValue = UseSliderReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA2DA,SAAgB,UACd,SAC6B;CAC7B,MAAM,aAAa,aAAa,OAAO;CAEvC,MAAM,sBADW,kBAAkB,cACA,CAAC,EAAE;CACtC,MAAM,yBAAyB,OAA4B,IAAI;CAE/D,MAAM,sBAAsB,kBAAkB;EAC5C,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;CACnC,GAAG,CAAC,CAAC;CAEL,gBAAgB,qBAAqB,CAAC,mBAAmB,CAAC;CAE1D,MAAM,iBAAiB,OAA2B,IAAI;CACtD,MAAM,kBAAkB,OAA2B,IAAI;CACvD,MAAM,cAAc,eAAe;CAGnC,MAAM,CAAC,UAAU,eAA0B;EAwBzC,OAAO,aAAa;GAtBlB,kBAAkB,eAAe;GACjC,uBAAuB,gBAAgB;GACvC,sBAAsB,WAAW,QAAQ,eAAe;GACxD,aAAc,eAAe,UAAU,MAAM,eAAe,OAAO,IAAI;GACvE,kBAAkB,WAAW,QAAQ,YAAY;GACjD,kBAAkB,WAAW,QAAQ,WAAW;GAChD,sBAAsB,WAAW,QAAQ,eAAe;GACxD,2BAA2B,WAAW,QAAQ,oBAAoB;GAClE,gBAAgB,WAAW,QAAQ;GACnC,eAAe,WAAW,QAAQ;GAClC,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,OAAO;GACtE,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,OAAO;GACtE,mBAAmB;IACjB,uBAAuB,YAAY,sBAAsB,KAAK;IAC9D,WAAW,QAAQ,cAAc;GACnC;GACA,iBAAiB;IACf,oBAAoB;IACpB,WAAW,QAAQ,YAAY;GACjC;EAG8B,CAAC;CACnC,CAAC;CAED,WAAW,MAAM;CAIjB,MAAM,cAAc,YAAY,OAAO,QAAQ,EAAE,UAAU,UAAU,eAAe;EAClF;EACA;EACA;CACF,EAAE;CACF,MAAM,QAAQ;EAAE,GAAG,OAAO,MAAM;EAAS,GAAG;CAAY;CAGxD,MAAM,QAAQ,QAAQ,aAAa,KAAK;CAIxC,sBAAsB;EACpB,IAAI,MAAM,mBAAmB,UAAU,eAAe,WAAW,gBAAgB,SAC/E,YAAY;CAEhB,GAAG,CAAC,MAAM,cAAc,CAAC;CAGzB,MAAM,UAAU,QAAQ,WAAW,OAAO,mBAAmB,KAAK,CAAC;CAEnE,MAAM,aAAa,aAChB,UAAU,eAAe,YAAY;EACpC,IAAI,CAAC,SAAS;EACd,MAAM,OAAO,WAAW,QAAQ,aAAa,OAAO,MAAM,OAAO;EACjE,YAAY,SAAS,WAAW,QAAQ,WAAW,OAAO,mBAAmB,IAAI,CAAC,CAAC;CACrF,GACA,CAAC,MAAM,CACT;CAEA,sBAAsB;EACpB,WAAW;EACX,OAAO,OAAO,MAAM,UAAU,UAAU;CAC1C,GAAG,CAAC,QAAQ,UAAU,CAAC;CAGvB,MAAM,UAAU,aACb,YAAgC;EAC/B,eAAe,UAAU;EACzB,WAAW,OAAO;CACpB,GACA,CAAC,UAAU,CACb;CAEA,MAAM,WAAW,aAAa,YAAgC;EAC5D,gBAAgB,UAAU;CAC5B,GAAG,CAAC,CAAC;CAEL,OAAO;EACL;EACA,OAAO,OAAO;EACd;EACA;EACA;EACA,WAAW,OAAO;EAClB,WAAW,OAAO;EAClB,YAAY,OAAO;CACrB;AACF"}

package/dist/{dev/ui/input-indicators → default/ui/input-indicator}/use-indicator-visibility.js

@@ -3,7 +3,7 @@ import { useContainer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { getIndicatorVisibilityCoordinator } from "@videojs/core/dom";
 import { useCallback, useEffect, useRef, useState } from "react";
-//#region src/ui/input-indicators/use-indicator-visibility.ts
+//#region src/ui/input-indicator/use-indicator-visibility.ts
 function useIndicatorVisibility(close) {
 	const container = useContainer();
 	const closeRef = useLatestRef(close);

package/dist/default/ui/input-indicator/use-indicator-visibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-indicator-visibility.js","names":[],"sources":["../../../../src/ui/input-indicator/use-indicator-visibility.ts"],"sourcesContent":["'use client';\n\nimport type { IndicatorVisibilityHandle } from '@videojs/core';\nimport { getIndicatorVisibilityCoordinator } from '@videojs/core/dom';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useIndicatorVisibility(close: () => void): () => void {\n  const container = useContainer();\n  const closeRef = useLatestRef(close);\n  const coordinatorRef = useRef<ReturnType<typeof getIndicatorVisibilityCoordinator> | null>(null);\n  const [handle] = useState<IndicatorVisibilityHandle>(() => ({\n    close: () => closeRef.current(),\n  }));\n\n  useEffect(() => {\n    if (!container) return;\n\n    const coordinator = getIndicatorVisibilityCoordinator(container);\n    coordinatorRef.current = coordinator;\n\n    return coordinator.register(handle);\n  }, [container, handle]);\n\n  return useCallback(() => {\n    coordinatorRef.current?.show(handle);\n  }, [handle]);\n}\n"],"mappings":";;;;;;AASA,SAAgB,uBAAuB,OAA+B;CACpE,MAAM,YAAY,aAAa;CAC/B,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,iBAAiB,OAAoE,IAAI;CAC/F,MAAM,CAAC,UAAU,gBAA2C,EAC1D,aAAa,SAAS,QAAQ,EAChC,EAAE;CAEF,gBAAgB;EACd,IAAI,CAAC,WAAW;EAEhB,MAAM,cAAc,kCAAkC,SAAS;EAC/D,eAAe,UAAU;EAEzB,OAAO,YAAY,SAAS,MAAM;CACpC,GAAG,CAAC,WAAW,MAAM,CAAC;CAEtB,OAAO,kBAAkB;EACvB,eAAe,SAAS,KAAK,MAAM;CACrC,GAAG,CAAC,MAAM,CAAC;AACb"}

package/dist/default/ui/{input-indicators → input-indicator}/use-input-action-subscription.js

@@ -3,7 +3,7 @@ import { useContainer, usePlayer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { getMediaSnapshot, subscribeToInputActions } from "@videojs/core/dom";
 import { useEffect } from "react";
-//#region src/ui/input-indicators/use-input-action-subscription.ts
+//#region src/ui/input-indicator/use-input-action-subscription.ts
 function useInputActionSubscription(callback) {
 	const container = useContainer();
 	const store = usePlayer();

package/dist/default/ui/input-indicator/use-input-action-subscription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-input-action-subscription.js","names":[],"sources":["../../../../src/ui/input-indicator/use-input-action-subscription.ts"],"sourcesContent":["'use client';\n\nimport type { InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport { getMediaSnapshot, subscribeToInputActions } from '@videojs/core/dom';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useInputActionSubscription(callback: (event: InputActionEvent, snapshot: MediaSnapshot) => void): void {\n  const container = useContainer();\n  const store = usePlayer();\n  const callbackRef = useLatestRef(callback);\n  const storeRef = useLatestRef(store);\n\n  useEffect(() => {\n    if (!container) return;\n\n    return subscribeToInputActions(container, (event) => {\n      callbackRef.current(event, getMediaSnapshot(storeRef.current));\n    });\n  }, [container]);\n}\n"],"mappings":";;;;;;AASA,SAAgB,2BAA2B,UAA4E;CACrH,MAAM,YAAY,aAAa;CAC/B,MAAM,QAAQ,UAAU;CACxB,MAAM,cAAc,aAAa,QAAQ;CACzC,MAAM,WAAW,aAAa,KAAK;CAEnC,gBAAgB;EACd,IAAI,CAAC,WAAW;EAEhB,OAAO,wBAAwB,YAAY,UAAU;GACnD,YAAY,QAAQ,OAAO,iBAAiB,SAAS,OAAO,CAAC;EAC/D,CAAC;CACH,GAAG,CAAC,SAAS,CAAC;AAChB"}

package/dist/default/ui/{input-indicators → input-indicator}/use-input-indicator-root.js

@@ -4,7 +4,7 @@ import { useIndicatorVisibility } from "./use-indicator-visibility.js";
 import { useInputActionSubscription } from "./use-input-action-subscription.js";
 import { useRenderedIndicatorState } from "./use-rendered-indicator-state.js";
 import { useState, useSyncExternalStore } from "react";
-//#region src/ui/input-indicators/use-input-indicator-root.ts
+//#region src/ui/input-indicator/use-input-indicator-root.ts
 function useInputIndicatorRoot(createCore, props, options) {
 	const [core] = useState(createCore);
 	useDestroy(core);

package/dist/default/ui/input-indicator/use-input-indicator-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-input-indicator-root.js","names":[],"sources":["../../../../src/ui/input-indicator/use-input-indicator-root.ts"],"sourcesContent":["'use client';\n\nimport type { IndicatorLifecycleState, InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport type { State as StoreState } from '@videojs/store';\nimport { useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useIndicatorVisibility } from './use-indicator-visibility';\nimport { useInputActionSubscription } from './use-input-action-subscription';\nimport { type RenderedIndicatorOptions, useRenderedIndicatorState } from './use-rendered-indicator-state';\n\ninterface InputIndicatorRootCore<IndicatorState extends IndicatorLifecycleState, Props> {\n  readonly state: StoreState<IndicatorState>;\n  setProps(props: Props): void;\n  destroy(): void;\n  close(): void;\n  processEvent(event: InputActionEvent, snapshot: MediaSnapshot): boolean;\n}\n\nexport function useInputIndicatorRoot<IndicatorState extends IndicatorLifecycleState, Props>(\n  createCore: () => InputIndicatorRootCore<IndicatorState, Props>,\n  props: Props,\n  options?: RenderedIndicatorOptions\n) {\n  const [core] = useState(createCore);\n  useDestroy(core);\n  core.setProps(props);\n  const showIndicator = useIndicatorVisibility(() => core.close());\n\n  useInputActionSubscription((event, snapshot) => {\n    if (core.processEvent(event, snapshot)) showIndicator();\n  });\n\n  const currentState = useSyncExternalStore(\n    (callback) => core.state.subscribe(callback),\n    () => core.state.current,\n    () => core.state.current\n  );\n\n  return useRenderedIndicatorState(currentState, options);\n}\n"],"mappings":";;;;;;;AAmBA,SAAgB,sBACd,YACA,OACA,SACA;CACA,MAAM,CAAC,QAAQ,SAAS,UAAU;CAClC,WAAW,IAAI;CACf,KAAK,SAAS,KAAK;CACnB,MAAM,gBAAgB,6BAA6B,KAAK,MAAM,CAAC;CAE/D,4BAA4B,OAAO,aAAa;EAC9C,IAAI,KAAK,aAAa,OAAO,QAAQ,GAAG,cAAc;CACxD,CAAC;CAQD,OAAO,0BANc,sBAClB,aAAa,KAAK,MAAM,UAAU,QAAQ,SACrC,KAAK,MAAM,eACX,KAAK,MAAM,OAGyB,GAAG,OAAO;AACxD"}

package/dist/default/ui/{input-indicators → input-indicator}/use-rendered-indicator-state.js

@@ -3,7 +3,7 @@ import { useDestroy } from "../../utils/use-destroy.js";
 import { createTransition } from "@videojs/core/dom";
 import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { getRenderedIndicatorState, isIndicatorPresent } from "@videojs/core";
-//#region src/ui/input-indicators/use-rendered-indicator-state.ts
+//#region src/ui/input-indicator/use-rendered-indicator-state.ts
 function useRenderedIndicatorState(currentState, options = {}) {
 	const elementRef = useRef(null);
 	const currentStateRef = useRef(currentState);

package/dist/default/ui/input-indicator/use-rendered-indicator-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-rendered-indicator-state.js","names":[],"sources":["../../../../src/ui/input-indicator/use-rendered-indicator-state.ts"],"sourcesContent":["'use client';\n\nimport { getRenderedIndicatorState, type IndicatorLifecycleState, isIndicatorPresent } from '@videojs/core';\nimport { createTransition } from '@videojs/core/dom';\nimport { useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\n\nexport interface RenderedIndicatorOptions {\n  replayOnUpdate?: boolean | undefined;\n}\n\nexport function useRenderedIndicatorState<State extends IndicatorLifecycleState>(\n  currentState: State,\n  options: RenderedIndicatorOptions = {}\n) {\n  const elementRef = useRef<HTMLElement>(null);\n  const currentStateRef = useRef(currentState);\n  const snapshotRef = useRef(currentState);\n  const [transition] = useState(() => createTransition());\n  useDestroy(transition);\n  currentStateRef.current = currentState;\n\n  const transitionState = useSyncExternalStore(\n    (callback) => transition.state.subscribe(callback),\n    () => transition.state.current,\n    () => transition.state.current\n  );\n\n  const { generation, open } = currentState;\n\n  useLayoutEffect(() => {\n    if (open) {\n      const nextState = currentStateRef.current;\n      if (nextState.generation !== generation) return;\n\n      snapshotRef.current = nextState;\n      const transitionState = transition.state.current;\n      if (!transitionState.active || options.replayOnUpdate !== false) {\n        void transition.open(elementRef.current);\n      } else if (transitionState.status === 'ending') {\n        transition.cancel();\n      }\n      return;\n    }\n\n    const { active, status } = transition.state.current;\n    if (active && status !== 'ending') {\n      void transition.close(elementRef.current);\n    }\n  }, [generation, open, options.replayOnUpdate, transition]);\n\n  return {\n    elementRef,\n    present: isIndicatorPresent(currentState, transitionState),\n    state: getRenderedIndicatorState(currentState, snapshotRef.current, transitionState),\n  };\n}\n"],"mappings":";;;;;;AAYA,SAAgB,0BACd,cACA,UAAoC,CAAC,GACrC;CACA,MAAM,aAAa,OAAoB,IAAI;CAC3C,MAAM,kBAAkB,OAAO,YAAY;CAC3C,MAAM,cAAc,OAAO,YAAY;CACvC,MAAM,CAAC,cAAc,eAAe,iBAAiB,CAAC;CACtD,WAAW,UAAU;CACrB,gBAAgB,UAAU;CAE1B,MAAM,kBAAkB,sBACrB,aAAa,WAAW,MAAM,UAAU,QAAQ,SAC3C,WAAW,MAAM,eACjB,WAAW,MAAM,OACzB;CAEA,MAAM,EAAE,YAAY,SAAS;CAE7B,sBAAsB;EACpB,IAAI,MAAM;GACR,MAAM,YAAY,gBAAgB;GAClC,IAAI,UAAU,eAAe,YAAY;GAEzC,YAAY,UAAU;GACtB,MAAM,kBAAkB,WAAW,MAAM;GACzC,IAAI,CAAC,gBAAgB,UAAU,QAAQ,mBAAmB,OACxD,WAAgB,KAAK,WAAW,OAAO;QAClC,IAAI,gBAAgB,WAAW,UACpC,WAAW,OAAO;GAEpB;EACF;EAEA,MAAM,EAAE,QAAQ,WAAW,WAAW,MAAM;EAC5C,IAAI,UAAU,WAAW,UACvB,WAAgB,MAAM,WAAW,OAAO;CAE5C,GAAG;EAAC;EAAY;EAAM,QAAQ;EAAgB;CAAU,CAAC;CAEzD,OAAO;EACL;EACA,SAAS,mBAAmB,cAAc,eAAe;EACzD,OAAO,0BAA0B,cAAc,YAAY,SAAS,eAAe;CACrF;AACF"}

package/dist/default/ui/menu/context.js

@@ -11,11 +11,6 @@ function useMenuContext() {
 function useOptionalMenuContext() {
 	return useContext(MenuContext);
 }
-const SubMenuContext = createContext(null);
-const SubMenuContextProvider = SubMenuContext.Provider;
-function useSubMenuContext() {
-	return useContext(SubMenuContext);
-}
 const MenuGroupContext = createContext(null);
 const MenuGroupContextProvider = MenuGroupContext.Provider;
 function useMenuGroupContext() {
@@ -33,12 +28,7 @@ const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;
 function useOptionalMenuTriggerChildContext() {
 	return useContext(MenuTriggerChildContext);
 }
-const MenuItemSettingContext = createContext(null);
-const MenuItemSettingContextProvider = MenuItemSettingContext.Provider;
-function useOptionalMenuItemSettingContext() {
-	return useContext(MenuItemSettingContext);
-}
 //#endregion
-export { MenuContextProvider, MenuGroupContextProvider, MenuItemSettingContextProvider, MenuRadioGroupContextProvider, MenuTriggerChildContextProvider, SubMenuContextProvider, useMenuContext, useMenuGroupContext, useMenuRadioGroupContext, useOptionalMenuContext, useOptionalMenuItemSettingContext, useOptionalMenuTriggerChildContext, useSubMenuContext };
+export { MenuContextProvider, MenuGroupContextProvider, MenuRadioGroupContextProvider, MenuTriggerChildContextProvider, useMenuContext, useMenuGroupContext, useMenuRadioGroupContext, useOptionalMenuContext, useOptionalMenuTriggerChildContext };
 
 //# sourceMappingURL=context.js.map

package/dist/default/ui/menu/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/menu/context.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuCore, MenuState, StateAttrMap } from '@videojs/core';\nimport type { MediaContainer, MenuApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nimport type { MenuItemSettingType } from './menu-item-type';\n\nexport interface MenuContextValue {\n  core: MenuCore;\n  menu: MenuApi;\n  state: MenuState;\n  preferredSide: MenuState['side'];\n  setPositionedSide: (side: MenuState['side']) => void;\n  stateAttrMap: StateAttrMap<MenuState>;\n  contentId: string;\n  anchorName: string;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n  /** ID of the currently visible submenu, or null when at root view. */\n  activeSubMenuId: string | null;\n  /** Triggerer ID of the active submenu entry (for focus restoration on pop). */\n  activeSubMenuTriggerId: string | null;\n  /** Direction of the most recent navigation. */\n  navigationDirection: 'forward' | 'back';\n  /** Push a submenu onto the navigation stack. */\n  push: (menuId: string, triggerId: string) => void;\n  /** Pop the current submenu from the navigation stack. */\n  pop: () => void;\n}\n\nconst MenuContext = createContext<MenuContextValue | null>(null);\n\nexport const MenuContextProvider = MenuContext.Provider;\n\nexport function useMenuContext(): MenuContextValue {\n  const ctx = useContext(MenuContext);\n  if (!ctx) throw new Error('Menu compound components must be used within a Menu.Root');\n  return ctx;\n}\n\nexport function useOptionalMenuContext(): MenuContextValue | null {\n  return useContext(MenuContext);\n}\n\n// ---------------------------------------------------------------------------\n// Sub-menu identity context — provided by a nested Menu.Root so child parts\n// (Trigger, Content) can read the submenu ID and access the parent menu for\n// push/pop and item registration.\n// ---------------------------------------------------------------------------\n\nexport interface SubMenuContextValue {\n  /** Stable ID for this submenu (matches the contentId of the nested Root). */\n  subMenuId: string;\n  /** The parent menu's context — used by Trigger to register and push. */\n  parentMenu: MenuContextValue;\n}\n\nconst SubMenuContext = createContext<SubMenuContextValue | null>(null);\n\nexport const SubMenuContextProvider = SubMenuContext.Provider;\n\nexport function useSubMenuContext(): SubMenuContextValue | null {\n  return useContext(SubMenuContext);\n}\n\n// ---------------------------------------------------------------------------\n// Group context — shared by group-like parts and MenuGroupLabel\n// ---------------------------------------------------------------------------\n\nexport interface MenuGroupContextValue {\n  registerLabel: (id: string) => () => void;\n}\n\nconst MenuGroupContext = createContext<MenuGroupContextValue | null>(null);\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\n\nexport function useMenuGroupContext(): MenuGroupContextValue | null {\n  return useContext(MenuGroupContext);\n}\n\n// ---------------------------------------------------------------------------\n// Radio group context — shared between MenuRadioGroup and MenuRadioItem\n// ---------------------------------------------------------------------------\n\nexport interface MenuRadioGroupContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n}\n\nconst MenuRadioGroupContext = createContext<MenuRadioGroupContextValue | null>(null);\n\nexport const MenuRadioGroupContextProvider = MenuRadioGroupContext.Provider;\n\nexport function useMenuRadioGroupContext(): MenuRadioGroupContextValue {\n  const ctx = useContext(MenuRadioGroupContext);\n  if (!ctx) throw new Error('Menu.RadioItem must be used within a Menu.RadioGroup');\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Root trigger render context — provided by Menu.Trigger for render children.\n// ---------------------------------------------------------------------------\n\nconst MenuTriggerChildContext = createContext(false);\n\nexport const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;\n\nexport function useOptionalMenuTriggerChildContext(): boolean {\n  return useContext(MenuTriggerChildContext);\n}\n\n// ---------------------------------------------------------------------------\n// Menu item setting context — provided by Menu.Item or Menu.Trigger when `type`\n// is set; consumed by Menu.ItemValue.\n// ---------------------------------------------------------------------------\n\nexport interface MenuItemSettingContextValue {\n  type: MenuItemSettingType;\n  label: string;\n  availability: 'available' | 'unavailable';\n}\n\nconst MenuItemSettingContext = createContext<MenuItemSettingContextValue | null>(null);\n\nexport const MenuItemSettingContextProvider = MenuItemSettingContext.Provider;\n\nexport function useMenuItemSettingContext(): MenuItemSettingContextValue {\n  const ctx = useContext(MenuItemSettingContext);\n  if (!ctx) throw new Error('Menu.ItemValue must be used within a Menu.Item or Menu.Trigger with `type` set');\n  return ctx;\n}\n\nexport function useOptionalMenuItemSettingContext(): MenuItemSettingContextValue | null {\n  return useContext(MenuItemSettingContext);\n}\n"],"mappings":";;;AA+BA,MAAM,cAAc,cAAuC,IAAI;AAE/D,MAAa,sBAAsB,YAAY;AAE/C,SAAgB,iBAAmC;CACjD,MAAM,MAAM,WAAW,WAAW;CAClC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,0DAA0D;CACpF,OAAO;AACT;AAEA,SAAgB,yBAAkD;CAChE,OAAO,WAAW,WAAW;AAC/B;AAeA,MAAM,iBAAiB,cAA0C,IAAI;AAErE,MAAa,yBAAyB,eAAe;AAErD,SAAgB,oBAAgD;CAC9D,OAAO,WAAW,cAAc;AAClC;AAUA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAWA,MAAM,wBAAwB,cAAiD,IAAI;AAEnF,MAAa,gCAAgC,sBAAsB;AAEnE,SAAgB,2BAAuD;CACrE,MAAM,MAAM,WAAW,qBAAqB;CAC5C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,sDAAsD;CAChF,OAAO;AACT;AAMA,MAAM,0BAA0B,cAAc,KAAK;AAEnD,MAAa,kCAAkC,wBAAwB;AAEvE,SAAgB,qCAA8C;CAC5D,OAAO,WAAW,uBAAuB;AAC3C;AAaA,MAAM,yBAAyB,cAAkD,IAAI;AAErF,MAAa,iCAAiC,uBAAuB;AAQrE,SAAgB,oCAAwE;CACtF,OAAO,WAAW,sBAAsB;AAC1C"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/menu/context.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuCore, MenuState, StateAttrMap } from '@videojs/core';\nimport type { MediaContainer, MenuApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface MenuContextValue {\n  core: MenuCore;\n  menu: MenuApi;\n  parent: MenuContextValue | null;\n  state: MenuState;\n  preferredSide: MenuState['side'];\n  setPositionedSide: (side: MenuState['side']) => void;\n  stateAttrMap: StateAttrMap<MenuState>;\n  contentId: string;\n  anchorName: string;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n}\n\nconst MenuContext = createContext<MenuContextValue | null>(null);\n\nexport const MenuContextProvider = MenuContext.Provider;\n\nexport function useMenuContext(): MenuContextValue {\n  const ctx = useContext(MenuContext);\n  if (!ctx) throw new Error('Menu compound components must be used within a Menu.Root');\n  return ctx;\n}\n\nexport function useOptionalMenuContext(): MenuContextValue | null {\n  return useContext(MenuContext);\n}\n\n// ---------------------------------------------------------------------------\n// Group context — shared by group-like parts and MenuGroupLabel\n// ---------------------------------------------------------------------------\n\nexport interface MenuGroupContextValue {\n  registerLabel: (id: string) => () => void;\n}\n\nconst MenuGroupContext = createContext<MenuGroupContextValue | null>(null);\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\n\nexport function useMenuGroupContext(): MenuGroupContextValue | null {\n  return useContext(MenuGroupContext);\n}\n\n// ---------------------------------------------------------------------------\n// Radio group context — shared between MenuRadioGroup and MenuRadioItem\n// ---------------------------------------------------------------------------\n\nexport interface MenuRadioGroupContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n}\n\nconst MenuRadioGroupContext = createContext<MenuRadioGroupContextValue | null>(null);\n\nexport const MenuRadioGroupContextProvider = MenuRadioGroupContext.Provider;\n\nexport function useMenuRadioGroupContext(): MenuRadioGroupContextValue {\n  const ctx = useContext(MenuRadioGroupContext);\n  if (!ctx) throw new Error('Menu.RadioItem must be used within a Menu.RadioGroup');\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Root trigger render context — provided by Menu.Trigger for render children.\n// ---------------------------------------------------------------------------\n\nconst MenuTriggerChildContext = createContext(false);\n\nexport const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;\n\nexport function useOptionalMenuTriggerChildContext(): boolean {\n  return useContext(MenuTriggerChildContext);\n}\n"],"mappings":";;;AAoBA,MAAM,cAAc,cAAuC,IAAI;AAE/D,MAAa,sBAAsB,YAAY;AAE/C,SAAgB,iBAAmC;CACjD,MAAM,MAAM,WAAW,WAAW;CAClC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,0DAA0D;CACpF,OAAO;AACT;AAEA,SAAgB,yBAAkD;CAChE,OAAO,WAAW,WAAW;AAC/B;AAUA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAWA,MAAM,wBAAwB,cAAiD,IAAI;AAEnF,MAAa,gCAAgC,sBAAsB;AAEnE,SAAgB,2BAAuD;CACrE,MAAM,MAAM,WAAW,qBAAqB;CAC5C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,sDAAsD;CAChF,OAAO;AACT;AAMA,MAAM,0BAA0B,cAAc,KAAK;AAEnD,MAAa,kCAAkC,wBAAwB;AAEvE,SAAgB,qCAA8C;CAC5D,OAAO,WAAW,uBAAuB;AAC3C"}

package/dist/default/ui/menu/index.parts.js

@@ -1,36 +1,30 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { MenuBack } from "./menu-back.js";
+import { MenuRadioGroup } from "./menu-radio-group.js";
 import { MenuCheckboxItem } from "./menu-checkbox-item.js";
 import { MenuContent } from "./menu-content.js";
 import { MenuGroup } from "./menu-group.js";
 import { MenuGroupLabel } from "./menu-group-label.js";
 import { MenuItem } from "./menu-item.js";
 import { MenuItemIndicator } from "./menu-item-indicator.js";
-import { MenuItemValue } from "./menu-item-value.js";
-import { MenuRadioGroup } from "./menu-radio-group.js";
 import { MenuRadioItem } from "./menu-radio-item.js";
 import { MenuRoot } from "./menu-root.js";
 import { MenuSeparator } from "./menu-separator.js";
 import { MenuTrigger } from "./menu-trigger.js";
-import { MenuView } from "./menu-view.js";
 //#region src/ui/menu/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
-	Back: () => MenuBack,
 	CheckboxItem: () => MenuCheckboxItem,
 	Content: () => MenuContent,
 	Group: () => MenuGroup,
 	GroupLabel: () => MenuGroupLabel,
 	Item: () => MenuItem,
 	ItemIndicator: () => MenuItemIndicator,
-	ItemValue: () => MenuItemValue,
 	RadioGroup: () => MenuRadioGroup,
 	RadioItem: () => MenuRadioItem,
 	Root: () => MenuRoot,
 	Separator: () => MenuSeparator,
-	Trigger: () => MenuTrigger,
-	View: () => MenuView
+	Trigger: () => MenuTrigger
 });
 //#endregion
-export { MenuBack as Back, MenuCheckboxItem as CheckboxItem, MenuContent as Content, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuItem as Item, MenuItemIndicator as ItemIndicator, MenuItemValue as ItemValue, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, MenuRoot as Root, MenuSeparator as Separator, MenuTrigger as Trigger, MenuView as View, index_parts_exports };
+export { MenuCheckboxItem as CheckboxItem, MenuContent as Content, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuItem as Item, MenuItemIndicator as ItemIndicator, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, MenuRoot as Root, MenuSeparator as Separator, MenuTrigger as Trigger, index_parts_exports };
 
 //# sourceMappingURL=index.parts.js.map

package/dist/default/ui/menu/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/menu/index.parts.ts"],"sourcesContent":["export { MenuBack as Back, type MenuBackProps as BackProps } from './menu-back';\nexport {\n  MenuCheckboxItem as CheckboxItem,\n  type MenuCheckboxItemProps as CheckboxItemProps,\n} from './menu-checkbox-item';\nexport { MenuContent as Content, type MenuContentProps as ContentProps } from './menu-content';\nexport { MenuGroup as Group, type MenuGroupProps as GroupProps } from './menu-group';\nexport { MenuGroupLabel as GroupLabel, type MenuGroupLabelProps as GroupLabelProps } from './menu-group-label';\nexport { MenuItem as Item, type MenuItemProps as ItemProps } from './menu-item';\nexport {\n  MenuItemIndicator as ItemIndicator,\n  type MenuItemIndicatorProps as ItemIndicatorProps,\n} from './menu-item-indicator';\nexport { MenuItemValue as ItemValue, type MenuItemValueProps as ItemValueProps } from './menu-item-value';\nexport { MenuRadioGroup as RadioGroup, type MenuRadioGroupProps as RadioGroupProps } from './menu-radio-group';\nexport { MenuRadioItem as RadioItem, type MenuRadioItemProps as RadioItemProps } from './menu-radio-item';\nexport { MenuRoot as Root, type MenuRootProps as RootProps } from './menu-root';\nexport { MenuSeparator as Separator, type MenuSeparatorProps as SeparatorProps } from './menu-separator';\nexport { MenuTrigger as Trigger, type MenuTriggerProps as TriggerProps } from './menu-trigger';\nexport { MenuView as View, type MenuViewProps as ViewProps } from './menu-view';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/menu/index.parts.ts"],"sourcesContent":["export {\n  MenuCheckboxItem as CheckboxItem,\n  type MenuCheckboxItemProps as CheckboxItemProps,\n} from './menu-checkbox-item';\nexport { MenuContent as Content, type MenuContentProps as ContentProps } from './menu-content';\nexport { MenuGroup as Group, type MenuGroupProps as GroupProps } from './menu-group';\nexport { MenuGroupLabel as GroupLabel, type MenuGroupLabelProps as GroupLabelProps } from './menu-group-label';\nexport { MenuItem as Item, type MenuItemProps as ItemProps } from './menu-item';\nexport {\n  MenuItemIndicator as ItemIndicator,\n  type MenuItemIndicatorProps as ItemIndicatorProps,\n} from './menu-item-indicator';\nexport { MenuRadioGroup as RadioGroup, type MenuRadioGroupProps as RadioGroupProps } from './menu-radio-group';\nexport { MenuRadioItem as RadioItem, type MenuRadioItemProps as RadioItemProps } from './menu-radio-item';\nexport { MenuRoot as Root, type MenuRootProps as RootProps } from './menu-root';\nexport { MenuSeparator as Separator, type MenuSeparatorProps as SeparatorProps } from './menu-separator';\nexport { MenuTrigger as Trigger, type MenuTriggerProps as TriggerProps } from './menu-trigger';\n"],"mappings":""}

package/dist/default/ui/menu/menu-checkbox-item.js

@@ -25,7 +25,10 @@ const MenuCheckboxItem = forwardRef(function MenuCheckboxItem({ render, classNam
 	const handlePointerEnter = useCallback(() => {
 		const element = elementRef.current;
 		if (!element || disabled) return;
-		menu.highlight(element, { focus: false });
+		menu.highlight(element, {
+			focus: false,
+			pointer: true
+		});
 	}, [menu, disabled]);
 	return renderElement("div", {
 		render,

package/dist/default/ui/menu/menu-checkbox-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-checkbox-item.js","names":[],"sources":["../../../../src/ui/menu/menu-checkbox-item.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuCheckboxItemProps extends UIComponentProps<'div', MenuState> {\n  /** Whether the item is currently checked. */\n  checked: boolean;\n  /** Called when the checked state should change. */\n  onCheckedChange: (checked: boolean) => void;\n  /** Whether the item is disabled. */\n  disabled?: boolean;\n}\n\n/** A checkbox-style menu item. Renders a `<div>` with `role=\"menuitemcheckbox\"`. */\nexport const MenuCheckboxItem = forwardRef<HTMLDivElement, MenuCheckboxItemProps>(function MenuCheckboxItem(\n  { render, className, style, checked, onCheckedChange, disabled, onClick, ...elementProps },\n  forwardedRef\n) {\n  const { menu, state } = useMenuContext();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n    return menu.registerItem(element);\n  }, [menu]);\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      onClick?.(event);\n      onCheckedChange(!checked);\n    },\n    [disabled, onClick, onCheckedChange, checked]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n    menu.highlight(element, { focus: false });\n  }, [menu, disabled]);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef, elementRef],\n      props: [\n        {\n          role: 'menuitemcheckbox' as const,\n          'aria-checked': checked,\n          'aria-disabled': disabled ? true : undefined,\n          onClick: handleClick,\n          onPointerEnter: handlePointerEnter,\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace MenuCheckboxItem {\n  export type Props = MenuCheckboxItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAmBA,MAAa,mBAAmB,WAAkD,SAAS,iBACzF,EAAE,QAAQ,WAAW,OAAO,SAAS,iBAAiB,UAAU,SAAS,GAAG,gBAC5E,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,aAAa,OAAuB,IAAI;CAE9C,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EACd,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,cAAc,aACjB,UAA4C;EAC3C,IAAI,UAAU;EACd,UAAU,KAAK;EACf,gBAAgB,CAAC,OAAO;CAC1B,GACA;EAAC;EAAU;EAAS;EAAiB;CAAO,CAC9C;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,UAAU;EAC1B,KAAK,UAAU,SAAS,EAAE,OAAO,MAAM,CAAC;CAC1C,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CACL;GACE,MAAM;GACN,gBAAgB;GAChB,iBAAiB,WAAW,OAAO,KAAA;GACnC,SAAS;GACT,gBAAgB;EAClB,GACA,YACF;CACF,CACF;AACF,CAAC"}
+{"version":3,"file":"menu-checkbox-item.js","names":[],"sources":["../../../../src/ui/menu/menu-checkbox-item.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuCheckboxItemProps extends UIComponentProps<'div', MenuState> {\n  /** Whether the item is currently checked. */\n  checked: boolean;\n  /** Called when the checked state should change. */\n  onCheckedChange: (checked: boolean) => void;\n  /** Whether the item is disabled. */\n  disabled?: boolean;\n}\n\n/** A checkbox-style menu item. Renders a `<div>` with `role=\"menuitemcheckbox\"`. */\nexport const MenuCheckboxItem = forwardRef<HTMLDivElement, MenuCheckboxItemProps>(function MenuCheckboxItem(\n  { render, className, style, checked, onCheckedChange, disabled, onClick, ...elementProps },\n  forwardedRef\n) {\n  const { menu, state } = useMenuContext();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n    return menu.registerItem(element);\n  }, [menu]);\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      onClick?.(event);\n      onCheckedChange(!checked);\n    },\n    [disabled, onClick, onCheckedChange, checked]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n    menu.highlight(element, { focus: false, pointer: true });\n  }, [menu, disabled]);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef, elementRef],\n      props: [\n        {\n          role: 'menuitemcheckbox' as const,\n          'aria-checked': checked,\n          'aria-disabled': disabled ? true : undefined,\n          onClick: handleClick,\n          onPointerEnter: handlePointerEnter,\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace MenuCheckboxItem {\n  export type Props = MenuCheckboxItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAmBA,MAAa,mBAAmB,WAAkD,SAAS,iBACzF,EAAE,QAAQ,WAAW,OAAO,SAAS,iBAAiB,UAAU,SAAS,GAAG,gBAC5E,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,aAAa,OAAuB,IAAI;CAE9C,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EACd,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,cAAc,aACjB,UAA4C;EAC3C,IAAI,UAAU;EACd,UAAU,KAAK;EACf,gBAAgB,CAAC,OAAO;CAC1B,GACA;EAAC;EAAU;EAAS;EAAiB;CAAO,CAC9C;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,UAAU;EAC1B,KAAK,UAAU,SAAS;GAAE,OAAO;GAAO,SAAS;EAAK,CAAC;CACzD,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CACL;GACE,MAAM;GACN,gBAAgB;GAChB,iBAAiB,WAAW,OAAO,KAAA;GACnC,SAAS;GACT,gBAAgB;EAClB,GACA,YACF;CACF,CACF;AACF,CAAC"}