@videojs/react 10.0.0-rc.2 → 10.0.0-rc.3

package/dist/dev/ui/gesture/use-doubletap-gesture.js

@@ -1,6 +1,7 @@
 import { useContainer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { createDoubleTapGesture } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
 import { useEffect } from "react";
 //#region src/ui/gesture/use-doubletap-gesture.ts
 /**
@@ -10,22 +11,49 @@ import { useEffect } from "react";
 * @param options - Gesture matching, target, and disabled options.
 */
 function useDoubleTapGesture(onActivate, options) {
-	const { pointer, region, disabled = false, target } = options ?? {};
+	const $ = c(13);
+	let t0;
+	if ($[0] !== options) {
+		t0 = options ?? {};
+		$[0] = options;
+		$[1] = t0;
+	} else t0 = $[1];
+	const { pointer, region, disabled: t1, target } = t0;
+	const disabled = t1 === void 0 ? false : t1;
 	const contextContainer = useContainer();
 	const container = target?.current ?? contextContainer;
 	const onActivateRef = useLatestRef(onActivate);
-	useEffect(() => {
-		if (!container || disabled) return;
-		return createDoubleTapGesture(container, (event) => onActivateRef.current(event), {
+	let t2;
+	if ($[2] !== container || $[3] !== disabled || $[4] !== onActivateRef || $[5] !== pointer || $[6] !== region) {
+		t2 = () => {
+			if (!container || disabled) return;
+			return createDoubleTapGesture(container, (event) => onActivateRef.current(event), {
+				pointer,
+				region
+			});
+		};
+		$[2] = container;
+		$[3] = disabled;
+		$[4] = onActivateRef;
+		$[5] = pointer;
+		$[6] = region;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== container || $[9] !== disabled || $[10] !== pointer || $[11] !== region) {
+		t3 = [
+			container,
+			disabled,
 			pointer,
 			region
-		});
-	}, [
-		container,
-		disabled,
-		pointer,
-		region
-	]);
+		];
+		$[8] = container;
+		$[9] = disabled;
+		$[10] = pointer;
+		$[11] = region;
+		$[12] = t3;
+	} else t3 = $[12];
+	useEffect(t2, t3);
 }
 //#endregion
 export { useDoubleTapGesture };

package/dist/dev/ui/gesture/use-doubletap-gesture.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-doubletap-gesture.js","names":[],"sources":["../../../../src/ui/gesture/use-doubletap-gesture.ts"],"sourcesContent":["import type { GestureProps } from '@videojs/core';\nimport { createDoubleTapGesture } from '@videojs/core/dom';\nimport type { RefObject } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseDoubleTapGestureOptions extends Pick<GestureProps, 'pointer' | 'region' | 'disabled'> {\n  target?: RefObject<HTMLElement | null>;\n}\n\n/**\n * Registers a double-tap gesture on the current player container or an explicit target.\n *\n * @param onActivate - Callback invoked when a matching double tap is recognized.\n * @param options - Gesture matching, target, and disabled options.\n */\nexport function useDoubleTapGesture(\n  onActivate: (event: PointerEvent) => void,\n  options?: UseDoubleTapGestureOptions\n): void {\n  const { pointer, region, disabled = false, target } = options ?? {};\n  const contextContainer = useContainer();\n  const container = target?.current ?? contextContainer;\n  const onActivateRef = useLatestRef(onActivate);\n\n  useEffect(() => {\n    if (!container || disabled) return;\n\n    return createDoubleTapGesture(container, (event) => onActivateRef.current(event), { pointer, region });\n  }, [container, disabled, pointer, region]);\n}\n"],"mappings":";;;;;;;;;;;AAkBA,SAAgB,oBACd,YACA,SACM;CACN,MAAM,EAAE,SAAS,QAAQ,WAAW,OAAO,WAAW,WAAW,CAAC;CAClE,MAAM,mBAAmB,aAAa;CACtC,MAAM,YAAY,QAAQ,WAAW;CACrC,MAAM,gBAAgB,aAAa,UAAU;CAE7C,gBAAgB;EACd,IAAI,CAAC,aAAa,UAAU;EAE5B,OAAO,uBAAuB,YAAY,UAAU,cAAc,QAAQ,KAAK,GAAG;GAAE;GAAS;EAAO,CAAC;CACvG,GAAG;EAAC;EAAW;EAAU;EAAS;CAAM,CAAC;AAC3C"}
+{"version":3,"file":"use-doubletap-gesture.js","names":["options ?? {}","disabled = false","() => {\n    if (!container || disabled) return;\n\n    return createDoubleTapGesture(container, (event) => onActivateRef.current(event), { pointer, region });\n  }","[container, disabled, pointer, region]"],"sources":["../../../../src/ui/gesture/use-doubletap-gesture.ts"],"sourcesContent":["import type { GestureProps } from '@videojs/core';\nimport { createDoubleTapGesture } from '@videojs/core/dom';\nimport type { RefObject } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseDoubleTapGestureOptions extends Pick<GestureProps, 'pointer' | 'region' | 'disabled'> {\n  target?: RefObject<HTMLElement | null>;\n}\n\n/**\n * Registers a double-tap gesture on the current player container or an explicit target.\n *\n * @param onActivate - Callback invoked when a matching double tap is recognized.\n * @param options - Gesture matching, target, and disabled options.\n */\nexport function useDoubleTapGesture(\n  onActivate: (event: PointerEvent) => void,\n  options?: UseDoubleTapGestureOptions\n): void {\n  const { pointer, region, disabled = false, target } = options ?? {};\n  const contextContainer = useContainer();\n  const container = target?.current ?? contextContainer;\n  const onActivateRef = useLatestRef(onActivate);\n\n  useEffect(() => {\n    if (!container || disabled) return;\n\n    return createDoubleTapGesture(container, (event) => onActivateRef.current(event), { pointer, region });\n  }, [container, disabled, pointer, region]);\n}\n"],"mappings":";;;;;;;;;;;;AAkBA,SAAgB,oBACd,YACA,SACM;;CACgDA,IAAAA;;EAAW,KAAA,WAAA,CAAC;EAAZ,EAAA,KAAA;;;CAAtD,MAAM,EAAE,SAAS,QAAQ,UAAA,IAAkB,WAAWA;CAA7B,MAAA,WAAA,OAAA,KAAA,IAAW,QAAXC;CACzB,MAAM,mBAAmB,aAAa;CACtC,MAAM,YAAY,QAAQ,WAAW;CACrC,MAAM,gBAAgB,aAAa,UAAU;CAEnCC,IAAAA;CACH,IAAA,EAAA,OAAA,aAAA,EAAA,OAAa,YAAA,EAAA,OAEkC,iBAAA,EAAA,OAAgC,WAAA,EAAA,OAAS,QAAA;EAHrF,WAAM;GACd,IAAI,CAAC,aAAa,UAAU;GAE5B,OAAO,uBAAuB,YAAY,UAAU,cAAc,QAAQ,KAAK,GAAG;IAAE;IAAS;GAAO,CAAC;EACvG;EAHO,EAAA,KAAA;EAAa,EAAA,KAAA;EAEkC,EAAA,KAAA;EAAgC,EAAA,KAAA;EAAS,EAAA,KAAA;;;CAC5FC,IAAAA;CAAC,IAAA,EAAA,OAAA,aAAA,EAAA,OAAW,YAAA,EAAA,QAAU,WAAA,EAAA,QAAS,QAAA;EAA/B,KAAA;GAAC;GAAW;GAAU;GAAS;EAAM;EAApC,EAAA,KAAA;EAAW,EAAA,KAAA;EAAU,EAAA,MAAA;EAAS,EAAA,MAAA;;;CAJlC,UAAUD,IAIPC,EAAsC;AAC3C"}

package/dist/dev/ui/gesture/use-tap-gesture.js

@@ -1,6 +1,7 @@
 import { useContainer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { createTapGesture } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
 import { useEffect } from "react";
 //#region src/ui/gesture/use-tap-gesture.ts
 /**
@@ -10,22 +11,49 @@ import { useEffect } from "react";
 * @param options - Gesture matching, target, and disabled options.
 */
 function useTapGesture(onActivate, options) {
-	const { pointer, region, disabled = false, target } = options ?? {};
+	const $ = c(13);
+	let t0;
+	if ($[0] !== options) {
+		t0 = options ?? {};
+		$[0] = options;
+		$[1] = t0;
+	} else t0 = $[1];
+	const { pointer, region, disabled: t1, target } = t0;
+	const disabled = t1 === void 0 ? false : t1;
 	const contextContainer = useContainer();
 	const container = target?.current ?? contextContainer;
 	const onActivateRef = useLatestRef(onActivate);
-	useEffect(() => {
-		if (!container || disabled) return;
-		return createTapGesture(container, (event) => onActivateRef.current(event), {
+	let t2;
+	if ($[2] !== container || $[3] !== disabled || $[4] !== onActivateRef || $[5] !== pointer || $[6] !== region) {
+		t2 = () => {
+			if (!container || disabled) return;
+			return createTapGesture(container, (event) => onActivateRef.current(event), {
+				pointer,
+				region
+			});
+		};
+		$[2] = container;
+		$[3] = disabled;
+		$[4] = onActivateRef;
+		$[5] = pointer;
+		$[6] = region;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== container || $[9] !== disabled || $[10] !== pointer || $[11] !== region) {
+		t3 = [
+			container,
+			disabled,
 			pointer,
 			region
-		});
-	}, [
-		container,
-		disabled,
-		pointer,
-		region
-	]);
+		];
+		$[8] = container;
+		$[9] = disabled;
+		$[10] = pointer;
+		$[11] = region;
+		$[12] = t3;
+	} else t3 = $[12];
+	useEffect(t2, t3);
 }
 //#endregion
 export { useTapGesture };

package/dist/dev/ui/gesture/use-tap-gesture.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-tap-gesture.js","names":[],"sources":["../../../../src/ui/gesture/use-tap-gesture.ts"],"sourcesContent":["import type { GestureProps } from '@videojs/core';\nimport { createTapGesture } from '@videojs/core/dom';\nimport type { RefObject } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseTapGestureOptions extends Pick<GestureProps, 'pointer' | 'region' | 'disabled'> {\n  target?: RefObject<HTMLElement | null>;\n}\n\n/**\n * Registers a tap gesture on the current player container or an explicit target.\n *\n * @param onActivate - Callback invoked when a matching tap is recognized.\n * @param options - Gesture matching, target, and disabled options.\n */\nexport function useTapGesture(onActivate: (event: PointerEvent) => void, options?: UseTapGestureOptions): void {\n  const { pointer, region, disabled = false, target } = options ?? {};\n  const contextContainer = useContainer();\n  const container = target?.current ?? contextContainer;\n  const onActivateRef = useLatestRef(onActivate);\n\n  useEffect(() => {\n    if (!container || disabled) return;\n\n    return createTapGesture(container, (event) => onActivateRef.current(event), { pointer, region });\n  }, [container, disabled, pointer, region]);\n}\n"],"mappings":";;;;;;;;;;;AAkBA,SAAgB,cAAc,YAA2C,SAAsC;CAC7G,MAAM,EAAE,SAAS,QAAQ,WAAW,OAAO,WAAW,WAAW,CAAC;CAClE,MAAM,mBAAmB,aAAa;CACtC,MAAM,YAAY,QAAQ,WAAW;CACrC,MAAM,gBAAgB,aAAa,UAAU;CAE7C,gBAAgB;EACd,IAAI,CAAC,aAAa,UAAU;EAE5B,OAAO,iBAAiB,YAAY,UAAU,cAAc,QAAQ,KAAK,GAAG;GAAE;GAAS;EAAO,CAAC;CACjG,GAAG;EAAC;EAAW;EAAU;EAAS;CAAM,CAAC;AAC3C"}
+{"version":3,"file":"use-tap-gesture.js","names":["options ?? {}","disabled = false","() => {\n    if (!container || disabled) return;\n\n    return createTapGesture(container, (event) => onActivateRef.current(event), { pointer, region });\n  }","[container, disabled, pointer, region]"],"sources":["../../../../src/ui/gesture/use-tap-gesture.ts"],"sourcesContent":["import type { GestureProps } from '@videojs/core';\nimport { createTapGesture } from '@videojs/core/dom';\nimport type { RefObject } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseTapGestureOptions extends Pick<GestureProps, 'pointer' | 'region' | 'disabled'> {\n  target?: RefObject<HTMLElement | null>;\n}\n\n/**\n * Registers a tap gesture on the current player container or an explicit target.\n *\n * @param onActivate - Callback invoked when a matching tap is recognized.\n * @param options - Gesture matching, target, and disabled options.\n */\nexport function useTapGesture(onActivate: (event: PointerEvent) => void, options?: UseTapGestureOptions): void {\n  const { pointer, region, disabled = false, target } = options ?? {};\n  const contextContainer = useContainer();\n  const container = target?.current ?? contextContainer;\n  const onActivateRef = useLatestRef(onActivate);\n\n  useEffect(() => {\n    if (!container || disabled) return;\n\n    return createTapGesture(container, (event) => onActivateRef.current(event), { pointer, region });\n  }, [container, disabled, pointer, region]);\n}\n"],"mappings":";;;;;;;;;;;;AAkBA,SAAgB,cAAc,YAA2C,SAAsC;;CACvDA,IAAAA;;EAAW,KAAA,WAAA,CAAC;EAAZ,EAAA,KAAA;;;CAAtD,MAAM,EAAE,SAAS,QAAQ,UAAA,IAAkB,WAAWA;CAA7B,MAAA,WAAA,OAAA,KAAA,IAAW,QAAXC;CACzB,MAAM,mBAAmB,aAAa;CACtC,MAAM,YAAY,QAAQ,WAAW;CACrC,MAAM,gBAAgB,aAAa,UAAU;CAEnCC,IAAAA;CACH,IAAA,EAAA,OAAA,aAAA,EAAA,OAAa,YAAA,EAAA,OAE4B,iBAAA,EAAA,OAAgC,WAAA,EAAA,OAAS,QAAA;EAH/E,WAAM;GACd,IAAI,CAAC,aAAa,UAAU;GAE5B,OAAO,iBAAiB,YAAY,UAAU,cAAc,QAAQ,KAAK,GAAG;IAAE;IAAS;GAAO,CAAC;EACjG;EAHO,EAAA,KAAA;EAAa,EAAA,KAAA;EAE4B,EAAA,KAAA;EAAgC,EAAA,KAAA;EAAS,EAAA,KAAA;;;CACtFC,IAAAA;CAAC,IAAA,EAAA,OAAA,aAAA,EAAA,OAAW,YAAA,EAAA,QAAU,WAAA,EAAA,QAAS,QAAA;EAA/B,KAAA;GAAC;GAAW;GAAU;GAAS;EAAM;EAApC,EAAA,KAAA;EAAW,EAAA,KAAA;EAAU,EAAA,MAAA;EAAS,EAAA,MAAA;;;CAJlC,UAAUD,IAIPC,EAAsC;AAC3C"}

package/dist/dev/ui/hooks/use-button.js

@@ -1,6 +1,6 @@
 import { mergeProps } from "../../utils/merge-props.js";
 import { createButton } from "@videojs/core/dom";
-import { useCallback } from "react";
+import { c } from "react-compiler-runtime";
 //#region src/ui/hooks/use-button.ts
 /**
 * Hook for button behavior with keyboard and pointer interaction.
@@ -23,20 +23,42 @@ import { useCallback } from "react";
 * @param params - Button configuration with activation handler and disabled check.
 */
 function useButton(params) {
+	const $ = c(8);
 	const { displayName, onActivate, isDisabled } = params;
-	const buttonRef = useCallback((element) => {
-		if (element && element.tagName !== "BUTTON") console.warn(`${displayName} should render a <button> element for accessibility`);
-	}, [displayName]);
-	return {
-		getButtonProps: useCallback((externalProps) => {
+	let t0;
+	if ($[0] !== displayName) {
+		t0 = (element) => {
+			if (element && element.tagName !== "BUTTON") console.warn(`${displayName} should render a <button> element for accessibility`);
+		};
+		$[0] = displayName;
+		$[1] = t0;
+	} else t0 = $[1];
+	const buttonRef = t0;
+	let t1;
+	if ($[2] !== isDisabled || $[3] !== onActivate) {
+		t1 = (externalProps) => {
 			const buttonProps = createButton({
 				onActivate,
 				isDisabled
 			});
 			return mergeProps(buttonProps, externalProps);
-		}, [onActivate, isDisabled]),
-		buttonRef
-	};
+		};
+		$[2] = isDisabled;
+		$[3] = onActivate;
+		$[4] = t1;
+	} else t1 = $[4];
+	const getButtonProps = t1;
+	let t2;
+	if ($[5] !== buttonRef || $[6] !== getButtonProps) {
+		t2 = {
+			getButtonProps,
+			buttonRef
+		};
+		$[5] = buttonRef;
+		$[6] = getButtonProps;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 }
 //#endregion
 export { useButton };

package/dist/dev/ui/hooks/use-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-button.js","names":[],"sources":["../../../../src/ui/hooks/use-button.ts"],"sourcesContent":["import { type ButtonActivationSource, createButton, type UIEvent } from '@videojs/core/dom';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { useCallback } from 'react';\n\nimport { mergeProps } from '../../utils/merge-props';\n\nexport interface UseButtonParameters {\n  displayName: string;\n  onActivate: (event: UIEvent, source: ButtonActivationSource) => void;\n  isDisabled: () => boolean;\n}\n\nexport interface UseButtonReturnValue {\n  getButtonProps: (externalProps?: ComponentPropsWithRef<'button'>) => ComponentPropsWithRef<'button'>;\n  buttonRef: Ref<HTMLElement>;\n}\n\n/**\n * Hook for button behavior with keyboard and pointer interaction.\n *\n * @example\n *   ```tsx\n *   const { getButtonProps, buttonRef } = useButton({\n *     displayName: 'PlayButton',\n *     onActivate: () => togglePlayback(),\n *     isDisabled: () => disabled,\n *   });\n *\n *   return useRender('button', componentProps, {\n *     state,\n *     ref: [forwardedRef, buttonRef],\n *     props: [elementProps, getButtonProps],\n *   });\n *   ```;\n *\n * @param params - Button configuration with activation handler and disabled check.\n */\nexport function useButton(params: UseButtonParameters): UseButtonReturnValue {\n  const { displayName, onActivate, isDisabled } = params;\n\n  const buttonRef = useCallback(\n    (element: HTMLElement | null) => {\n      if (__DEV__ && element && element.tagName !== 'BUTTON') {\n        console.warn(`${displayName} should render a <button> element for accessibility`);\n      }\n    },\n    [displayName]\n  );\n\n  const getButtonProps = useCallback(\n    (externalProps?: ComponentPropsWithRef<'button'>): ComponentPropsWithRef<'button'> => {\n      const buttonProps = createButton({ onActivate, isDisabled });\n\n      return mergeProps(buttonProps, externalProps);\n    },\n    [onActivate, isDisabled]\n  );\n\n  return { getButtonProps, buttonRef };\n}\n\nexport namespace useButton {\n  export type Parameters = UseButtonParameters;\n  export type ReturnValue = UseButtonReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAAgB,UAAU,QAAmD;CAC3E,MAAM,EAAE,aAAa,YAAY,eAAe;CAEhD,MAAM,YAAY,aACf,YAAgC;EAC/B,IAAe,WAAW,QAAQ,YAAY,UAC5C,QAAQ,KAAK,GAAG,YAAY,oDAAoD;CAEpF,GACA,CAAC,WAAW,CACd;CAWA,OAAO;EAAE,gBATc,aACpB,kBAAqF;GACpF,MAAM,cAAc,aAAa;IAAE;IAAY;GAAW,CAAC;GAE3D,OAAO,WAAW,aAAa,aAAa;EAC9C,GACA,CAAC,YAAY,UAAU,CAGH;EAAG;CAAU;AACrC"}
+{"version":3,"file":"use-button.js","names":["(element: HTMLElement | null) => {\n      if (__DEV__ && element && element.tagName !== 'BUTTON') {\n        console.warn(`${displayName} should render a <button> element for accessibility`);\n      }\n    }","useCallback(\n    (element: HTMLElement | null) => {\n      if (__DEV__ && element && element.tagName !== 'BUTTON') {\n        console.warn(`${displayName} should render a <button> element for accessibility`);\n      }\n    },\n    [displayName]\n  )","(externalProps?: ComponentPropsWithRef<'button'>): ComponentPropsWithRef<'button'> => {\n      const buttonProps = createButton({ onActivate, isDisabled });\n\n      return mergeProps(buttonProps, externalProps);\n    }","useCallback(\n    (externalProps?: ComponentPropsWithRef<'button'>): ComponentPropsWithRef<'button'> => {\n      const buttonProps = createButton({ onActivate, isDisabled });\n\n      return mergeProps(buttonProps, externalProps);\n    },\n    [onActivate, isDisabled]\n  )","{ getButtonProps, buttonRef }"],"sources":["../../../../src/ui/hooks/use-button.ts"],"sourcesContent":["import { type ButtonActivationSource, createButton, type UIEvent } from '@videojs/core/dom';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { useCallback } from 'react';\n\nimport { mergeProps } from '../../utils/merge-props';\n\nexport interface UseButtonParameters {\n  displayName: string;\n  onActivate: (event: UIEvent, source: ButtonActivationSource) => void;\n  isDisabled: () => boolean;\n}\n\nexport interface UseButtonReturnValue {\n  getButtonProps: (externalProps?: ComponentPropsWithRef<'button'>) => ComponentPropsWithRef<'button'>;\n  buttonRef: Ref<HTMLElement>;\n}\n\n/**\n * Hook for button behavior with keyboard and pointer interaction.\n *\n * @example\n *   ```tsx\n *   const { getButtonProps, buttonRef } = useButton({\n *     displayName: 'PlayButton',\n *     onActivate: () => togglePlayback(),\n *     isDisabled: () => disabled,\n *   });\n *\n *   return useRender('button', componentProps, {\n *     state,\n *     ref: [forwardedRef, buttonRef],\n *     props: [elementProps, getButtonProps],\n *   });\n *   ```;\n *\n * @param params - Button configuration with activation handler and disabled check.\n */\nexport function useButton(params: UseButtonParameters): UseButtonReturnValue {\n  const { displayName, onActivate, isDisabled } = params;\n\n  const buttonRef = useCallback(\n    (element: HTMLElement | null) => {\n      if (__DEV__ && element && element.tagName !== 'BUTTON') {\n        console.warn(`${displayName} should render a <button> element for accessibility`);\n      }\n    },\n    [displayName]\n  );\n\n  const getButtonProps = useCallback(\n    (externalProps?: ComponentPropsWithRef<'button'>): ComponentPropsWithRef<'button'> => {\n      const buttonProps = createButton({ onActivate, isDisabled });\n\n      return mergeProps(buttonProps, externalProps);\n    },\n    [onActivate, isDisabled]\n  );\n\n  return { getButtonProps, buttonRef };\n}\n\nexport namespace useButton {\n  export type Parameters = UseButtonParameters;\n  export type ReturnValue = UseButtonReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAAgB,UAAU,QAAmD;;CAC3E,MAAM,EAAE,aAAa,YAAY,eAAe;CAG9CA,IAAAA;CAEoB,IAAA,EAAA,OAAA,aAAA;EAFpB,MAAC,YAAgC;GAC/B,IAAe,WAAW,QAAQ,YAAY,UAC5C,QAAQ,KAAK,GAAG,YAAY,oDAAoD;EAEpF;EAFoB,EAAA,KAAA;;;CAHtB,MAAM,YAAYC;CAUhBC,IAAAA;CACiD,IAAA,EAAA,OAAA,cAAA,EAAA,OAAZ,YAAA;EADrC,MAAC,kBAAqF;GACpF,MAAM,cAAc,aAAa;IAAE;IAAY;GAAW,CAAC;GAE3D,OAAO,WAAW,aAAa,aAAa;EAC9C;EAHiD,EAAA,KAAA;EAAZ,EAAA,KAAA;;;CAFvC,MAAM,iBAAiBC;CAShBC,IAAAA;CAAkB,IAAA,EAAA,OAAA,aAAA,EAAA,OAAhB,gBAAA;EAAF,KAAA;GAAE;GAAgB;EAAU;EAAV,EAAA,KAAA;EAAhB,EAAA,KAAA;;;CAAT,OAAOA;AACT"}

package/dist/dev/ui/hooks/use-positioned-state.js

@@ -1,36 +1,76 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { c } from "react-compiler-runtime";
+import { useEffect, useState } from "react";
 //#region src/ui/hooks/use-positioned-state.ts
 function usePositionedState(preferredState) {
+	const $ = c(17);
 	const preferredSide = preferredState.side;
-	const [position, setPosition] = useState({
-		preferred: preferredSide,
-		side: preferredSide
-	});
+	let t0;
+	if ($[0] !== preferredSide) {
+		t0 = {
+			preferred: preferredSide,
+			side: preferredSide
+		};
+		$[0] = preferredSide;
+		$[1] = t0;
+	} else t0 = $[1];
+	const [position, setPosition] = useState(t0);
 	const side = preferredState.open && position.preferred === preferredSide ? position.side : preferredSide;
-	const state = useMemo(() => side === preferredSide ? preferredState : {
-		...preferredState,
-		side
-	}, [
-		side,
-		preferredState,
-		preferredSide
-	]);
-	const setPositionedSide = useCallback((nextSide) => setPosition((prev) => prev.preferred === preferredSide && prev.side === nextSide ? prev : {
-		preferred: preferredSide,
-		side: nextSide
-	}), [preferredSide]);
-	useEffect(() => {
-		if (!preferredState.open) setPositionedSide(preferredSide);
-	}, [
-		preferredState.open,
-		preferredSide,
-		setPositionedSide
-	]);
-	return {
-		state,
-		preferredSide,
-		setPositionedSide
-	};
+	let t1;
+	if ($[2] !== preferredSide || $[3] !== preferredState || $[4] !== side) {
+		t1 = side === preferredSide ? preferredState : {
+			...preferredState,
+			side
+		};
+		$[2] = preferredSide;
+		$[3] = preferredState;
+		$[4] = side;
+		$[5] = t1;
+	} else t1 = $[5];
+	const state = t1;
+	let t2;
+	if ($[6] !== preferredSide) {
+		t2 = (nextSide) => setPosition((prev) => prev.preferred === preferredSide && prev.side === nextSide ? prev : {
+			preferred: preferredSide,
+			side: nextSide
+		});
+		$[6] = preferredSide;
+		$[7] = t2;
+	} else t2 = $[7];
+	const setPositionedSide = t2;
+	let t3;
+	let t4;
+	if ($[8] !== preferredSide || $[9] !== preferredState.open || $[10] !== setPositionedSide) {
+		t3 = () => {
+			if (!preferredState.open) setPositionedSide(preferredSide);
+		};
+		t4 = [
+			preferredState.open,
+			preferredSide,
+			setPositionedSide
+		];
+		$[8] = preferredSide;
+		$[9] = preferredState.open;
+		$[10] = setPositionedSide;
+		$[11] = t3;
+		$[12] = t4;
+	} else {
+		t3 = $[11];
+		t4 = $[12];
+	}
+	useEffect(t3, t4);
+	let t5;
+	if ($[13] !== preferredSide || $[14] !== setPositionedSide || $[15] !== state) {
+		t5 = {
+			state,
+			preferredSide,
+			setPositionedSide
+		};
+		$[13] = preferredSide;
+		$[14] = setPositionedSide;
+		$[15] = state;
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
 }
 //#endregion
 export { usePositionedState };

package/dist/dev/ui/hooks/use-positioned-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-positioned-state.js","names":[],"sources":["../../../../src/ui/hooks/use-positioned-state.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\n\ninterface PopupState {\n  open: boolean;\n  side: string | undefined;\n}\n\ninterface PositionedState<State extends PopupState> {\n  state: State;\n  preferredSide: State['side'];\n  setPositionedSide: (side: State['side']) => void;\n}\n\nexport function usePositionedState<State extends PopupState>(preferredState: State): PositionedState<State> {\n  const preferredSide = preferredState.side;\n  const [position, setPosition] = useState<{ preferred: State['side']; side: State['side'] }>({\n    preferred: preferredSide,\n    side: preferredSide,\n  });\n\n  const side = preferredState.open && position.preferred === preferredSide ? position.side : preferredSide;\n\n  const state = useMemo(\n    () => (side === preferredSide ? preferredState : { ...preferredState, side }),\n    [side, preferredState, preferredSide]\n  );\n\n  const setPositionedSide = useCallback(\n    (nextSide: State['side']) =>\n      setPosition((prev) =>\n        prev.preferred === preferredSide && prev.side === nextSide ? prev : { preferred: preferredSide, side: nextSide }\n      ),\n    [preferredSide]\n  );\n\n  useEffect(() => {\n    if (!preferredState.open) setPositionedSide(preferredSide);\n  }, [preferredState.open, preferredSide, setPositionedSide]);\n\n  return { state, preferredSide, setPositionedSide };\n}\n"],"mappings":";;AAaA,SAAgB,mBAA6C,gBAA+C;CAC1G,MAAM,gBAAgB,eAAe;CACrC,MAAM,CAAC,UAAU,eAAe,SAA4D;EAC1F,WAAW;EACX,MAAM;CACR,CAAC;CAED,MAAM,OAAO,eAAe,QAAQ,SAAS,cAAc,gBAAgB,SAAS,OAAO;CAE3F,MAAM,QAAQ,cACL,SAAS,gBAAgB,iBAAiB;EAAE,GAAG;EAAgB;CAAK,GAC3E;EAAC;EAAM;EAAgB;CAAa,CACtC;CAEA,MAAM,oBAAoB,aACvB,aACC,aAAa,SACX,KAAK,cAAc,iBAAiB,KAAK,SAAS,WAAW,OAAO;EAAE,WAAW;EAAe,MAAM;CAAS,CACjH,GACF,CAAC,aAAa,CAChB;CAEA,gBAAgB;EACd,IAAI,CAAC,eAAe,MAAM,kBAAkB,aAAa;CAC3D,GAAG;EAAC,eAAe;EAAM;EAAe;CAAiB,CAAC;CAE1D,OAAO;EAAE;EAAO;EAAe;CAAkB;AACnD"}
+{"version":3,"file":"use-positioned-state.js","names":["{\n    preferred: preferredSide,\n    side: preferredSide,\n  }","side === preferredSide ? preferredState : { ...preferredState, side }","useMemo(\n    () => (side === preferredSide ? preferredState : { ...preferredState, side }),\n    [side, preferredState, preferredSide]\n  )","(nextSide: State['side']) =>\n      setPosition((prev) =>\n        prev.preferred === preferredSide && prev.side === nextSide ? prev : { preferred: preferredSide, side: nextSide }\n      )","useCallback(\n    (nextSide: State['side']) =>\n      setPosition((prev) =>\n        prev.preferred === preferredSide && prev.side === nextSide ? prev : { preferred: preferredSide, side: nextSide }\n      ),\n    [preferredSide]\n  )","() => {\n    if (!preferredState.open) setPositionedSide(preferredSide);\n  }","[preferredState.open, preferredSide, setPositionedSide]","open","{ state, preferredSide, setPositionedSide }"],"sources":["../../../../src/ui/hooks/use-positioned-state.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\n\ninterface PopupState {\n  open: boolean;\n  side: string | undefined;\n}\n\ninterface PositionedState<State extends PopupState> {\n  state: State;\n  preferredSide: State['side'];\n  setPositionedSide: (side: State['side']) => void;\n}\n\nexport function usePositionedState<State extends PopupState>(preferredState: State): PositionedState<State> {\n  const preferredSide = preferredState.side;\n  const [position, setPosition] = useState<{ preferred: State['side']; side: State['side'] }>({\n    preferred: preferredSide,\n    side: preferredSide,\n  });\n\n  const side = preferredState.open && position.preferred === preferredSide ? position.side : preferredSide;\n\n  const state = useMemo(\n    () => (side === preferredSide ? preferredState : { ...preferredState, side }),\n    [side, preferredState, preferredSide]\n  );\n\n  const setPositionedSide = useCallback(\n    (nextSide: State['side']) =>\n      setPosition((prev) =>\n        prev.preferred === preferredSide && prev.side === nextSide ? prev : { preferred: preferredSide, side: nextSide }\n      ),\n    [preferredSide]\n  );\n\n  useEffect(() => {\n    if (!preferredState.open) setPositionedSide(preferredSide);\n  }, [preferredState.open, preferredSide, setPositionedSide]);\n\n  return { state, preferredSide, setPositionedSide };\n}\n"],"mappings":";;;AAaA,SAAgB,mBAA6C,gBAA+C;;CAC1G,MAAM,gBAAgB,eAAe;CACuDA,IAAAA;CAC/E,IAAA,EAAA,OAAA,eAAA;EAD+E,KAAA;GAC1F,WAAW;GACX,MAAM;EACR;EAFa,EAAA,KAAA;;;CADb,MAAM,CAAC,UAAU,eAAe,SAA4DA,EAG3F;CAED,MAAM,OAAO,eAAe,QAAQ,SAAS,cAAc,gBAAgB,SAAS,OAAO;CAGlFC,IAAAA;CAAS,IAAA,EAAA,OAAA,iBAAA,EAAA,OAAgB,kBAAA,EAAA,OAAzB,MAAA;EAAS,KAAA,SAAA,gBAAgB,iBAAiB;GAAE,GAAG;GAAgB;EAAK;EAA3D,EAAA,KAAA;EAAgB,EAAA,KAAA;EAAzB,EAAA,KAAA;;;CADT,MAAM,QAAQC;CAMZC,IAAAA;CAEuB,IAAA,EAAA,OAAA,eAAA;EAFvB,MAAC,aACC,aAAa,SACX,KAAK,cAAc,iBAAiB,KAAK,SAAS,WAAW,OAAO;GAAE,WAAW;GAAe,MAAM;EAAS,CACjH;EADqB,EAAA,KAAA;;;CAHzB,MAAM,oBAAoBC;CAQhBC,IAAAA;CAEPC,IAAAA;CAD2C,IAAA,EAAA,OAAA,iBAAA,EAAA,OAAxBC,eAAAA,QAAAA,EAAAA,QAAM,mBAAA;EADlB,WAAM;GACd,IAAI,CAAC,eAAe,MAAM,kBAAkB,aAAa;EAC3D;EAAG,KAAA;GAAC,eAAe;GAAM;GAAe;EAAiB;EADX,EAAA,KAAA;EAAxBA,EAAAA,KAAAA,eAAAA;EAAM,EAAA,MAAA;;;;;;;CAD5B,UAAUF,IAEPC,EAAuD;CAEnDE,IAAAA;CAAS,IAAA,EAAA,QAAA,iBAAA,EAAA,QAAe,qBAAA,EAAA,QAAtB,OAAA;EAAF,KAAA;GAAE;GAAO;GAAe;EAAkB;EAAjC,EAAA,MAAA;EAAe,EAAA,MAAA;EAAtB,EAAA,MAAA;;;CAAT,OAAOA;AACT"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"sourcesContent":["import 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 } from '@videojs/utils/dom';\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\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> extends Pick<\n  SliderOptions,\n  | 'getPercent'\n  | 'getStepPercent'\n  | 'getLargeStepPercent'\n  | 'changeThrottle'\n  | 'onValueChange'\n  | 'onValueCommit'\n  | 'onPressStart'\n  | 'onPressEnd'\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 input state via `useSnapshot`. Returns split\n * props for the root (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 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      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      onPressStart: () => {\n        releaseControlsLockRef.current ??= requestControlsLock?.() ?? null;\n        optionsRef.current.onPressStart?.();\n      },\n      onPressEnd: () => {\n        releaseControlsLock();\n        optionsRef.current.onPressEnd?.();\n      },\n      onDragStart: () => optionsRef.current.onDragStart?.(),\n      onDragEnd: () => optionsRef.current.onDragEnd?.(),\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\n      const { dragging, pointing } = slider.input.current;\n      // Keyboard values come from the controlled state. Applying them here would\n      // briefly write the previous value before the caller handles the key.\n      if (!dragging && !pointing) return;\n\n      const next = optionsRef.current.computeState(slider.input.current);\n\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":";;;;;;;;;;;;;;;AA0DA,SAAgB,UACd,SAC6B;CAC7B,MAAM,aAAa,aAAa,OAAO;CAGvC,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;EACzC,MAAM,gBAA+B;GACnC,kBAAkB,eAAe;GACjC,uBAAuB,gBAAgB;GACvC,sBAAsB,WAAW,QAAQ,eAAe;GACxD,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,oBAAoB;IAClB,uBAAuB,YAAY,sBAAsB,KAAK;IAC9D,WAAW,QAAQ,eAAe;GACpC;GACA,kBAAkB;IAChB,oBAAoB;IACpB,WAAW,QAAQ,aAAa;GAClC;GACA,mBAAmB,WAAW,QAAQ,cAAc;GACpD,iBAAiB,WAAW,QAAQ,YAAY;EAClD;EAEA,OAAO,aAAa,aAAa;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;EAEd,MAAM,EAAE,UAAU,aAAa,OAAO,MAAM;EAG5C,IAAI,CAAC,YAAY,CAAC,UAAU;EAE5B,MAAM,OAAO,WAAW,QAAQ,aAAa,OAAO,MAAM,OAAO;EAEjE,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"}
+{"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"sourcesContent":["import 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 } from '@videojs/utils/dom';\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\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> extends Pick<\n  SliderOptions,\n  | 'getPercent'\n  | 'getStepPercent'\n  | 'getLargeStepPercent'\n  | 'changeThrottle'\n  | 'onValueChange'\n  | 'onValueCommit'\n  | 'onPressStart'\n  | 'onPressEnd'\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 input state via `useSnapshot`. Returns split\n * props for the root (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 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      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      onPressStart: () => {\n        releaseControlsLockRef.current ??= requestControlsLock?.() ?? null;\n        optionsRef.current.onPressStart?.();\n      },\n      onPressEnd: () => {\n        releaseControlsLock();\n        optionsRef.current.onPressEnd?.();\n      },\n      onDragStart: () => optionsRef.current.onDragStart?.(),\n      onDragEnd: () => optionsRef.current.onDragEnd?.(),\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\n      const { dragging, pointing } = slider.input.current;\n      // Keyboard values come from the controlled state. Applying them here would\n      // briefly write the previous value before the caller handles the key.\n      if (!dragging && !pointing) return;\n\n      const next = optionsRef.current.computeState(slider.input.current);\n\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":";;;;;;;;;;;;;;;AA0DA,SAAgB,UACd,SAC6B;CAC7B,MAAM,aAAa,aAAa,OAAO;CAGvC,MAAM,sBADW,kBAAkB,cACP,CAAA,EAAU;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;EACzC,MAAM,gBAA+B;GACnC,kBAAkB,eAAe;GACjC,uBAAuB,gBAAgB;GACvC,sBAAsB,WAAW,QAAQ,eAAe;GACxD,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,oBAAoB;IAClB,uBAAuB,YAAY,sBAAsB,KAAK;IAC9D,WAAW,QAAQ,eAAe;GACpC;GACA,kBAAkB;IAChB,oBAAoB;IACpB,WAAW,QAAQ,aAAa;GAClC;GACA,mBAAmB,WAAW,QAAQ,cAAc;GACpD,iBAAiB,WAAW,QAAQ,YAAY;EAClD;EAEA,OAAO,aAAa,aAAa;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;EAEd,MAAM,EAAE,UAAU,aAAa,OAAO,MAAM;EAG5C,IAAI,CAAC,YAAY,CAAC,UAAU;EAE5B,MAAM,OAAO,WAAW,QAAQ,aAAa,OAAO,MAAM,OAAO;EAEjE,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/hotkey/component.js

@@ -1,38 +1,59 @@
 import { useContainer, usePlayer } from "../../player/context.js";
 import { createHotkey, isHotkeyToggleAction, resolveHotkeyAction } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
 import { useEffect } from "react";
 //#region src/ui/hotkey/component.tsx
-function Hotkey({ keys, action, value, disabled, target }) {
+function Hotkey(t0) {
+	const $ = c(9);
+	const { keys, action, value, disabled, target } = t0;
 	const store = usePlayer();
 	const container = useContainer();
-	useEffect(() => {
-		if (!container || !keys || !action || disabled) return;
-		const resolver = resolveHotkeyAction(action);
-		if (!resolver) return;
-		return createHotkey(container, {
+	let t1;
+	let t2;
+	if ($[0] !== action || $[1] !== container || $[2] !== disabled || $[3] !== keys || $[4] !== store || $[5] !== target || $[6] !== value) {
+		t1 = () => {
+			if (!container || !keys || !action || disabled) return;
+			const resolver = resolveHotkeyAction(action);
+			if (!resolver) return;
+			return createHotkey(container, {
+				keys,
+				action,
+				value,
+				target,
+				disabled,
+				repeatable: !isHotkeyToggleAction(action),
+				onActivate: (_event, key) => {
+					resolver({
+						store,
+						key,
+						value
+					});
+				}
+			});
+		};
+		t2 = [
+			container,
+			store,
 			keys,
 			action,
 			value,
-			target,
 			disabled,
-			repeatable: !isHotkeyToggleAction(action),
-			onActivate: (_event, key) => {
-				resolver({
-					store,
-					key,
-					value
-				});
-			}
-		});
-	}, [
-		container,
-		store,
-		keys,
-		action,
-		value,
-		disabled,
-		target
-	]);
+			target
+		];
+		$[0] = action;
+		$[1] = container;
+		$[2] = disabled;
+		$[3] = keys;
+		$[4] = store;
+		$[5] = target;
+		$[6] = value;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t1 = $[7];
+		t2 = $[8];
+	}
+	useEffect(t1, t2);
 	return null;
 }
 /** @deprecated Use `Hotkey` instead. */

package/dist/dev/ui/hotkey/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/hotkey/component.tsx"],"sourcesContent":["import type { HotkeyProps as CoreHotkeyProps } from '@videojs/core';\nimport type { AnyPlayerStore } from '@videojs/core/dom';\nimport { createHotkey, isHotkeyToggleAction, resolveHotkeyAction } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface HotkeyProps extends CoreHotkeyProps {}\n\nexport function Hotkey({ keys, action, value, disabled, target }: HotkeyProps): ReactNode {\n  const store = usePlayer() as AnyPlayerStore;\n  const container = useContainer();\n\n  useEffect(() => {\n    if (!container || !keys || !action || disabled) return;\n\n    const resolver = resolveHotkeyAction(action);\n    if (!resolver) return;\n\n    return createHotkey(container, {\n      keys,\n      action,\n      value,\n      target,\n      disabled,\n      repeatable: !isHotkeyToggleAction(action),\n      onActivate: (_event, key) => {\n        resolver({ store, key, value });\n      },\n    });\n  }, [container, store, keys, action, value, disabled, target]);\n\n  return null;\n}\n\nexport namespace Hotkey {\n  export type Props = HotkeyProps;\n}\n\n/** @deprecated Use `HotkeyProps` instead. */\nexport type MediaHotkeyProps = HotkeyProps;\n\n/** @deprecated Use `Hotkey` instead. */\nexport const MediaHotkey = Hotkey;\n"],"mappings":";;;;AAUA,SAAgB,OAAO,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAkC;CACxF,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,aAAa;CAE/B,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,UAAU;EAEhD,MAAM,WAAW,oBAAoB,MAAM;EAC3C,IAAI,CAAC,UAAU;EAEf,OAAO,aAAa,WAAW;GAC7B;GACA;GACA;GACA;GACA;GACA,YAAY,CAAC,qBAAqB,MAAM;GACxC,aAAa,QAAQ,QAAQ;IAC3B,SAAS;KAAE;KAAO;KAAK;IAAM,CAAC;GAChC;EACF,CAAC;CACH,GAAG;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAU;CAAM,CAAC;CAE5D,OAAO;AACT;;AAUA,MAAa,cAAc"}
+{"version":3,"file":"component.js","names":["{ keys, action, value, disabled, target }: HotkeyProps","() => {\n    if (!container || !keys || !action || disabled) return;\n\n    const resolver = resolveHotkeyAction(action);\n    if (!resolver) return;\n\n    return createHotkey(container, {\n      keys,\n      action,\n      value,\n      target,\n      disabled,\n      repeatable: !isHotkeyToggleAction(action),\n      onActivate: (_event, key) => {\n        resolver({ store, key, value });\n      },\n    });\n  }","[container, store, keys, action, value, disabled, target]"],"sources":["../../../../src/ui/hotkey/component.tsx"],"sourcesContent":["import type { HotkeyProps as CoreHotkeyProps } from '@videojs/core';\nimport type { AnyPlayerStore } from '@videojs/core/dom';\nimport { createHotkey, isHotkeyToggleAction, resolveHotkeyAction } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface HotkeyProps extends CoreHotkeyProps {}\n\nexport function Hotkey({ keys, action, value, disabled, target }: HotkeyProps): ReactNode {\n  const store = usePlayer() as AnyPlayerStore;\n  const container = useContainer();\n\n  useEffect(() => {\n    if (!container || !keys || !action || disabled) return;\n\n    const resolver = resolveHotkeyAction(action);\n    if (!resolver) return;\n\n    return createHotkey(container, {\n      keys,\n      action,\n      value,\n      target,\n      disabled,\n      repeatable: !isHotkeyToggleAction(action),\n      onActivate: (_event, key) => {\n        resolver({ store, key, value });\n      },\n    });\n  }, [container, store, keys, action, value, disabled, target]);\n\n  return null;\n}\n\nexport namespace Hotkey {\n  export type Props = HotkeyProps;\n}\n\n/** @deprecated Use `HotkeyProps` instead. */\nexport type MediaHotkeyProps = HotkeyProps;\n\n/** @deprecated Use `Hotkey` instead. */\nexport const MediaHotkey = Hotkey;\n"],"mappings":";;;;;AAUA,SAAgB,OAAA,IAA0E;;CAAnE,MAAA,EAAE,MAAM,QAAQ,OAAO,UAAU,WAAjCA;CACrB,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,aAAa;CAErBC,IAAAA;CAiBPC,IAAAA;CAhB2B,IAAA,EAAA,OAAA,UAAA,EAAA,OAAvB,aAAA,EAAA,OAAiC,YAAA,EAAA,OAAnB,QAAA,EAAA,OAaJ,SAAA,EAAA,OAJb,UAAA,EAAA,OAIyB,OAAA;EAdnB,WAAM;GACd,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,UAAU;GAEhD,MAAM,WAAW,oBAAoB,MAAM;GAC3C,IAAI,CAAC,UAAU;GAEf,OAAO,aAAa,WAAW;IAC7B;IACA;IACA;IACA;IACA;IACA,YAAY,CAAC,qBAAqB,MAAM;IACxC,aAAa,QAAQ,QAAQ;KAC3B,SAAS;MAAE;MAAO;MAAK;KAAM,CAAC;IAChC;GACF,CAAC;EACH;EAAG,KAAA;GAAC;GAAW;GAAO;GAAM;GAAQ;GAAO;GAAU;EAAM;EAhB7B,EAAA,KAAA;EAAvB,EAAA,KAAA;EAAiC,EAAA,KAAA;EAAnB,EAAA,KAAA;EAaJ,EAAA,KAAA;EAJb,EAAA,KAAA;EAIyB,EAAA,KAAA;;;;;;;CAd7B,UAAUD,IAiBPC,EAAyD;CAE5D,OAAO;AACT;;AAUA,MAAa,cAAc"}

package/dist/dev/ui/hotkey/use-hotkey-shortcut.js

@@ -1,5 +1,6 @@
 import { useContainer } from "../../player/context.js";
 import { getHotkeyCoordinator } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
 import { useEffect, useState } from "react";
 //#region src/ui/hotkey/use-hotkey-shortcut.ts
 /**
@@ -9,22 +10,42 @@ import { useEffect, useState } from "react";
 * @param value - Optional action value used to match value-dependent shortcuts.
 */
 function useHotkeyShortcut(action, value) {
+	const $ = c(6);
 	const container = useContainer();
-	const [shortcut, setShortcut] = useState({});
-	useEffect(() => {
-		if (!container || !action) {
-			setShortcut({});
-			return;
-		}
-		const coordinator = getHotkeyCoordinator(container);
-		const update = () => setShortcut(coordinator.getShortcut(action, value));
-		update();
-		return coordinator.subscribeShortcutChanges(update);
-	}, [
-		container,
-		action,
-		value
-	]);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {};
+		$[0] = t0;
+	} else t0 = $[0];
+	const [shortcut, setShortcut] = useState(t0);
+	let t1;
+	let t2;
+	if ($[1] !== action || $[2] !== container || $[3] !== value) {
+		t1 = () => {
+			if (!container || !action) {
+				setShortcut({});
+				return;
+			}
+			const coordinator = getHotkeyCoordinator(container);
+			const update = () => setShortcut(coordinator.getShortcut(action, value));
+			update();
+			return coordinator.subscribeShortcutChanges(update);
+		};
+		t2 = [
+			container,
+			action,
+			value
+		];
+		$[1] = action;
+		$[2] = container;
+		$[3] = value;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	useEffect(t1, t2);
 	return shortcut;
 }
 //#endregion

package/dist/dev/ui/hotkey/use-hotkey-shortcut.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-hotkey-shortcut.js","names":[],"sources":["../../../../src/ui/hotkey/use-hotkey-shortcut.ts"],"sourcesContent":["import { getHotkeyCoordinator, type HotkeyShortcutDetails } from '@videojs/core/dom';\nimport { useEffect, useState } from 'react';\n\nimport { useContainer } from '../../player/context';\n\n/**\n * Returns display and ARIA metadata for a registered hotkey action in the current player.\n *\n * @param action - Hotkey action to look up. Returns empty details when absent.\n * @param value - Optional action value used to match value-dependent shortcuts.\n */\nexport function useHotkeyShortcut(action: string | undefined, value?: number | undefined): HotkeyShortcutDetails {\n  const container = useContainer();\n\n  const [shortcut, setShortcut] = useState<HotkeyShortcutDetails>({});\n\n  useEffect(() => {\n    if (!container || !action) {\n      setShortcut({});\n      return;\n    }\n\n    const coordinator = getHotkeyCoordinator(container);\n    const update = () => setShortcut(coordinator.getShortcut(action, value));\n\n    update();\n    return coordinator.subscribeShortcutChanges(update);\n  }, [container, action, value]);\n\n  return shortcut;\n}\n"],"mappings":";;;;;;;;;;AAWA,SAAgB,kBAAkB,QAA4B,OAAmD;CAC/G,MAAM,YAAY,aAAa;CAE/B,MAAM,CAAC,UAAU,eAAe,SAAgC,CAAC,CAAC;CAElE,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ;GACzB,YAAY,CAAC,CAAC;GACd;EACF;EAEA,MAAM,cAAc,qBAAqB,SAAS;EAClD,MAAM,eAAe,YAAY,YAAY,YAAY,QAAQ,KAAK,CAAC;EAEvE,OAAO;EACP,OAAO,YAAY,yBAAyB,MAAM;CACpD,GAAG;EAAC;EAAW;EAAQ;CAAK,CAAC;CAE7B,OAAO;AACT"}
+{"version":3,"file":"use-hotkey-shortcut.js","names":["{}","() => {\n    if (!container || !action) {\n      setShortcut({});\n      return;\n    }\n\n    const coordinator = getHotkeyCoordinator(container);\n    const update = () => setShortcut(coordinator.getShortcut(action, value));\n\n    update();\n    return coordinator.subscribeShortcutChanges(update);\n  }","[container, action, value]"],"sources":["../../../../src/ui/hotkey/use-hotkey-shortcut.ts"],"sourcesContent":["import { getHotkeyCoordinator, type HotkeyShortcutDetails } from '@videojs/core/dom';\nimport { useEffect, useState } from 'react';\n\nimport { useContainer } from '../../player/context';\n\n/**\n * Returns display and ARIA metadata for a registered hotkey action in the current player.\n *\n * @param action - Hotkey action to look up. Returns empty details when absent.\n * @param value - Optional action value used to match value-dependent shortcuts.\n */\nexport function useHotkeyShortcut(action: string | undefined, value?: number | undefined): HotkeyShortcutDetails {\n  const container = useContainer();\n\n  const [shortcut, setShortcut] = useState<HotkeyShortcutDetails>({});\n\n  useEffect(() => {\n    if (!container || !action) {\n      setShortcut({});\n      return;\n    }\n\n    const coordinator = getHotkeyCoordinator(container);\n    const update = () => setShortcut(coordinator.getShortcut(action, value));\n\n    update();\n    return coordinator.subscribeShortcutChanges(update);\n  }, [container, action, value]);\n\n  return shortcut;\n}\n"],"mappings":";;;;;;;;;;;AAWA,SAAgB,kBAAkB,QAA4B,OAAmD;;CAC/G,MAAM,YAAY,aAAa;CAEiCA,IAAAA;;EAAC,KAAA,CAAA;;;CAAjE,MAAM,CAAC,UAAU,eAAe,SAAgCA,EAAE;CAExDC,IAAAA;CAWPC,IAAAA;CAVkB,IAAA,EAAA,OAAA,UAAA,EAAA,OAAd,aAAA,EAAA,OAM4D,OAAA;EAPzD,WAAM;GACd,IAAI,CAAC,aAAa,CAAC,QAAQ;IACzB,YAAY,CAAC,CAAC;IACd;GACF;GAEA,MAAM,cAAc,qBAAqB,SAAS;GAClD,MAAM,eAAe,YAAY,YAAY,YAAY,QAAQ,KAAK,CAAC;GAEvE,OAAO;GACP,OAAO,YAAY,yBAAyB,MAAM;EACpD;EAAG,KAAA;GAAC;GAAW;GAAQ;EAAK;EAVP,EAAA,KAAA;EAAd,EAAA,KAAA;EAM4D,EAAA,KAAA;;;;;;;CAPnE,UAAUD,IAWPC,EAA0B;CAE7B,OAAO;AACT"}