videojs-vue 0.0.1 → 0.2.0

package/README.md

@@ -5,204 +5,59 @@
 [![NPM DOWNLOADS](https://img.shields.io/npm/dy/videojs-vue.svg)](https://www.npmjs.com/package/videojs-vue)
 [![LICENSE](https://img.shields.io/github/license/ntnyq/videojs-vue.svg)](https://github.com/ntnyq/videojs-vue/blob/main/LICENSE)
 
-A Vue-first wrapper around the Video.js v10 player primitives.
+Vue 3 components and composables for Video.js 10, with video and audio players, packaged skins, reactive playback state, and optional HLS support.
 
-> [!NOTE]
-> Status: **Beta**
+[Documentation](https://videojs-vue-docs.vercel.app) · [Playground](https://videojs-vue-playground.vercel.app)
 
-## Install
+## Installation
 
-```shell
-pnpm add videojs-vue
-```
+Requires Vue 3.5 or later.
 
-```shell
-npm install videojs-vue
+```sh
+pnpm add videojs-vue vue
 ```
 
-```shell
-yarn add videojs-vue
+## Usage
+
+```vue
+<script setup lang="ts">
+import { VideoPlayer } from 'videojs-vue/video/default'
+</script>
+
+<template>
+  <VideoPlayer
+    src="/demo.mp4"
+    poster="/poster.webp"
+    title="Demo"
+  />
+</template>
 ```
 
-## Usage
+Serve your video and poster at the URLs above. Component registration and skin styles are included; no Vue `isCustomElement` configuration is needed.
 
-The API follows the upstream `@videojs/react` player factory:
+See the [documentation](https://videojs-vue-docs.vercel.app) for HLS, custom controls, internationalization, and the API reference. Try the [playground](https://videojs-vue-playground.vercel.app) for interactive examples.
 
-```ts
-import { createPlayer } from 'videojs-vue'
-import { Video, videoFeatures } from 'videojs-vue/video'
+## Audio
 
-const Player = createPlayer({
-  features: videoFeatures,
-  displayName: 'VideoPlayer',
-})
-```
+```vue
+<script setup lang="ts">
+import { AudioPlayer } from 'videojs-vue/audio/default'
+</script>
 
-Render it with Vue's `h()` API or JSX:
-
-```ts
-import { defineComponent, h } from 'vue'
-
-export default defineComponent({
-  setup() {
-    const paused = Player.usePlayer(state => state.paused)
-    const store = Player.usePlayer()
-
-    return () =>
-      h(Player.Provider, () =>
-        h(Player.Container, { class: 'player-shell' }, () => [
-          h(Video, {
-            src: 'https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4',
-            playsInline: true,
-          }),
-          h(
-            'button',
-            {
-              type: 'button',
-              onClick: () => (paused.value ? store.play() : store.pause()),
-            },
-            paused.value ? 'Play' : 'Pause',
-          ),
-        ]),
-      )
-  },
-})
+<template>
+  <AudioPlayer
+    src="/episode.mp3"
+    title="Episode one"
+  />
+</template>
 ```
 
-## API
-
-### Root exports
-
-- `createPlayer(config)` returns:
-  - `Provider`
-  - `Container`
-  - `usePlayer()`
-  - `useMedia()`
-- `createPlayer({ plugins })` supports runtime extension hooks:
-  - `onProviderSetup(context)`
-  - `onAttach(context)`
-  - `onDetach(context)`
-  - `onProviderDestroy(context)`
-- `usePlayer(selector)` returns a readonly `ref`, which is the Vue equivalent of the React hook's reactive selected value.
-- `useOptionalPlayer()`, `useContainer()`, `useMediaAttach()` and `useContainerAttach()` are also exported for lower-level integrations.
-- Utility exports:
-  - `mergeProps(...props)`
-  - `renderElement(tag, componentProps, params)`
-
-### Preset entry points
-
-- `videojs-vue/video`
-  - `Video`
-  - `videoFeatures`
-- `videojs-vue/audio`
-  - `Audio`
-  - `audioFeatures`
-- `videojs-vue/background`
-  - `BackgroundVideo`
-  - `backgroundFeatures`
-- `videojs-vue/live-video`
-  - `Video`
-  - `liveVideoFeatures`
-- `videojs-vue/live-audio`
-  - `Audio`
-  - `liveAudioFeatures`
-
-### UI entry points
-
-- `videojs-vue/full-screen-button` (or `videojs-vue/fullscreen-button`)
-  - `FullscreenButton`
-- `videojs-vue/playback-rate-button`
-  - `PlaybackRateButton`
-- `videojs-vue/poster`
-  - `Poster`
-- `videojs-vue/time`
-  - `Time.Group`
-  - `Time.Separator`
-  - `Time.Value`
-- `videojs-vue/play-button`
-  - `PlayButton`
-- `videojs-vue/mute-button`
-  - `MuteButton`
-- `videojs-vue/pip-button`
-  - `PiPButton`
-- `videojs-vue/seek-button`
-  - `SeekButton`
-- `videojs-vue/volume-slider`
-  - `VolumeSlider.Root`
-  - `VolumeSlider.Track`
-  - `VolumeSlider.Fill`
-  - `VolumeSlider.Thumb`
-  - `VolumeSlider.Value`
-  - `VolumeSlider.Preview`
-- `videojs-vue/time-slider`
-  - `TimeSlider.Root`
-  - `TimeSlider.Track`
-  - `TimeSlider.Buffer`
-  - `TimeSlider.Fill`
-  - `TimeSlider.Thumb`
-  - `TimeSlider.Value`
-  - `TimeSlider.Preview`
-- `videojs-vue/controls`
-  - `Controls.Root`
-  - `Controls.Group`
-- `videojs-vue/tooltip`
-  - `Tooltip.Provider`
-  - `Tooltip.Root`
-  - `Tooltip.Trigger`
-  - `Tooltip.Popup`
-  - `Tooltip.Arrow`
-- `videojs-vue/popover`
-  - `Popover.Root`
-  - `Popover.Trigger`
-  - `Popover.Popup`
-  - `Popover.Arrow`
-- `videojs-vue/captions-button`
-  - `CaptionsButton`
-- `videojs-vue/cast-button`
-  - `CastButton`
-- `videojs-vue/buffering-indicator`
-  - `BufferingIndicator`
-- `videojs-vue/alert-dialog`
-  - `AlertDialog.Root`
-  - `AlertDialog.Popup`
-  - `AlertDialog.Title`
-  - `AlertDialog.Description`
-  - `AlertDialog.Close`
-- `videojs-vue/error-dialog`
-  - `ErrorDialog.Root`
-  - `ErrorDialog.Popup`
-  - `ErrorDialog.Title`
-  - `ErrorDialog.Description`
-  - `ErrorDialog.Close`
-- `videojs-vue/hotkey`
-  - `Hotkey`
-- `videojs-vue/gesture`
-  - `Gesture`
-- `videojs-vue/thumbnail`
-  - `Thumbnail`
-- `videojs-vue/slider`
-  - `Slider.Root`
-  - `Slider.Track`
-  - `Slider.Buffer`
-  - `Slider.Fill`
-  - `Slider.Thumb`
-  - `Slider.Value`
-  - `Slider.Preview`
-  - `Slider.Thumbnail`
-
-## Notes
-
-- `Provider` owns the Video.js store instance and reattaches it whenever the media element or container changes.
-- `Container` keeps the same focus behavior as the React implementation: on pointer release it focuses itself when nothing inside already has focus, so keyboard shortcuts can work reliably.
-- Media components use native `<video>` / `<audio>` elements, register themselves automatically through provide/inject, and reactively sync key media props (`src`, `poster`, `autoplay`, `controls`, `loop`, `muted`, `playsInline`, `preload`, `crossOrigin`, `volume`, `playbackRate`).
-- Captions button now uses reactive track state and auto-disables when no caption/subtitle tracks are available.
-
-## Migration (Current Beta)
-
-- UI button primitives now use unified internal prop-merging behavior (`mergeProps`) instead of per-component manual click chaining.
-- External event handlers still run before internal handlers and can cancel internal behavior via `event.preventDefault()`.
-- Prefer `playsInline` over lowercase `playsinline` in JSX/templates.
+The fixed audio entry loads only the default audio skin. Use `videojs-vue/audio` when switching between both skins at runtime. Lightweight `core`, `composables`, and individual control entries are also available; see [bundle size and imports](https://videojs-vue-docs.vercel.app/guide/bundle-size). See the [audio API](https://videojs-vue-docs.vercel.app/api/audio).
+
+## Credits
+
+Built on [Video.js](https://videojs.org), which provides the player, media adapters, and controls. Thanks to the [Video.js contributors](https://github.com/videojs/video.js).
 
 ## License
 
-[MIT](./LICENSE) License © 2026-PRESENT [ntnyq](https://github.com/ntnyq)
+[MIT](LICENSE)

package/dist/Audio-D-RH-zmq.js

@@ -0,0 +1,55 @@
+import { t as createCommonPlayerActions } from "./actions-CRZ5C4-3.js";
+import { t as AUDIO_PLAYER_CONTEXT } from "./context-Zjy9Z5Uy.js";
+import "./register/audio/player.js";
+import { a as mediaEmits, n as commonMediaProps, t as useMediaElement } from "./useMediaElement-CO_r--i0.js";
+import { n as preservePlayerTree, r as createPlayerEmits, t as usePlayerRoot } from "./usePlayerRoot-Nsnn7msd.js";
+import { defineComponent, h, provide, withDirectives } from "vue";
+//#region src/audio/AudioPlayerRoot.ts
+const audioPlayerEmits = createPlayerEmits();
+/**
+* Vue component ref exposes the player handle alongside the standard instance.
+*/
+const AudioPlayerRoot = defineComponent({
+	name: "AudioPlayerRoot",
+	inheritAttrs: false,
+	props: {
+		title: String,
+		poster: String
+	},
+	emits: audioPlayerEmits,
+	setup(props, { attrs, slots, emit, expose }) {
+		const { element, handle } = usePlayerRoot(createCommonPlayerActions, {
+			onReady: () => emit("ready", handle),
+			onMediaEvent: emit,
+			onVolume: (volume) => emit("update:volume", volume),
+			onMuted: (muted) => emit("update:muted", muted),
+			onPlaybackRate: (rate) => emit("update:playbackRate", rate)
+		});
+		provide(AUDIO_PLAYER_CONTEXT, handle);
+		expose(handle);
+		return () => withDirectives(h("audio-player", {
+			...attrs,
+			ref: element,
+			"content-title": props.title,
+			poster: props.poster
+		}, slots["default"]?.()), [[preservePlayerTree]]);
+	}
+});
+//#endregion
+//#region src/audio/Audio.ts
+const Audio = defineComponent({
+	name: "Audio",
+	inheritAttrs: false,
+	props: commonMediaProps,
+	emits: mediaEmits,
+	setup(props, context) {
+		return useMediaElement({
+			tag: "audio",
+			props,
+			context,
+			emit: context.emit
+		});
+	}
+});
+//#endregion
+export { AudioPlayerRoot as n, audioPlayerEmits as r, Audio as t };

package/dist/Audio-DmoQgIRM.d.ts

@@ -0,0 +1,70 @@
+import { t as MediaTrack } from "./types-wAkjM01D.js";
+import "./index-DhJ5A5TI.js";
+//#region src/audio/Audio.d.ts
+declare const Audio: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  readonly src: import("vue").PropType<string | undefined>;
+  readonly autoplay: BooleanConstructor;
+  readonly loop: BooleanConstructor;
+  readonly preload: {
+    readonly type: import("vue").PropType<'none' | 'metadata' | 'auto'>;
+    readonly default: 'metadata';
+  };
+  readonly crossorigin: import("vue").PropType<'' | 'anonymous' | 'use-credentials' | undefined>;
+  readonly tracks: import("vue").PropType<readonly MediaTrack[] | undefined>;
+  readonly volume: import("vue").PropType<number | undefined>;
+  readonly muted: {
+    readonly type: import("vue").PropType<boolean | undefined>;
+    readonly default: undefined;
+  };
+  readonly playbackRate: import("vue").PropType<number | undefined>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<"abort" | "canplay" | "canplaythrough" | "durationchange" | "emptied" | "ended" | "enterpictureinpicture" | "error" | "leavepictureinpicture" | "loadeddata" | "loadedmetadata" | "loadstart" | "pause" | "play" | "playing" | "progress" | "ratechange" | "seeked" | "seeking" | "stalled" | "suspend" | "timeupdate" | "volumechange" | "waiting", (event: Event) => boolean>, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  readonly src: import("vue").PropType<string | undefined>;
+  readonly autoplay: BooleanConstructor;
+  readonly loop: BooleanConstructor;
+  readonly preload: {
+    readonly type: import("vue").PropType<'none' | 'metadata' | 'auto'>;
+    readonly default: 'metadata';
+  };
+  readonly crossorigin: import("vue").PropType<'' | 'anonymous' | 'use-credentials' | undefined>;
+  readonly tracks: import("vue").PropType<readonly MediaTrack[] | undefined>;
+  readonly volume: import("vue").PropType<number | undefined>;
+  readonly muted: {
+    readonly type: import("vue").PropType<boolean | undefined>;
+    readonly default: undefined;
+  };
+  readonly playbackRate: import("vue").PropType<number | undefined>;
+}>> & Readonly<{
+  onAbort?: (event: Event) => any;
+  onCanplay?: (event: Event) => any;
+  onCanplaythrough?: (event: Event) => any;
+  onDurationchange?: (event: Event) => any;
+  onEmptied?: (event: Event) => any;
+  onEnded?: (event: Event) => any;
+  onEnterpictureinpicture?: (event: Event) => any;
+  onError?: (event: Event) => any;
+  onLeavepictureinpicture?: (event: Event) => any;
+  onLoadeddata?: (event: Event) => any;
+  onLoadedmetadata?: (event: Event) => any;
+  onLoadstart?: (event: Event) => any;
+  onPause?: (event: Event) => any;
+  onPlay?: (event: Event) => any;
+  onPlaying?: (event: Event) => any;
+  onProgress?: (event: Event) => any;
+  onRatechange?: (event: Event) => any;
+  onSeeked?: (event: Event) => any;
+  onSeeking?: (event: Event) => any;
+  onStalled?: (event: Event) => any;
+  onSuspend?: (event: Event) => any;
+  onTimeupdate?: (event: Event) => any;
+  onVolumechange?: (event: Event) => any;
+  onWaiting?: (event: Event) => any;
+}>, {
+  readonly autoplay: boolean;
+  readonly loop: boolean;
+  readonly preload: "auto" | "metadata" | "none";
+  readonly muted: boolean | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { Audio as t };

package/dist/AudioPlayerRoot-D47326rh.d.ts

@@ -0,0 +1,79 @@
+import { r as AudioPlayerHandle } from "./types-DR9kogyX.js";
+import "./player-DwjY3MEu.js";
+import { PropType } from "vue";
+//#region src/audio/AudioPlayerRoot.d.ts
+declare const component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  title: PropType<string | undefined>;
+  poster: PropType<string | undefined>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  ready: (_player: AudioPlayerHandle) => boolean;
+  'update:volume': (_volume: number) => boolean;
+  'update:muted': (_muted: boolean) => boolean;
+  'update:playbackRate': (_rate: number) => boolean;
+  abort: (event: Event) => boolean;
+  canplay: (event: Event) => boolean;
+  canplaythrough: (event: Event) => boolean;
+  durationchange: (event: Event) => boolean;
+  emptied: (event: Event) => boolean;
+  ended: (event: Event) => boolean;
+  enterpictureinpicture: (event: Event) => boolean;
+  error: (event: Event) => boolean;
+  leavepictureinpicture: (event: Event) => boolean;
+  loadeddata: (event: Event) => boolean;
+  loadedmetadata: (event: Event) => boolean;
+  loadstart: (event: Event) => boolean;
+  pause: (event: Event) => boolean;
+  play: (event: Event) => boolean;
+  playing: (event: Event) => boolean;
+  progress: (event: Event) => boolean;
+  ratechange: (event: Event) => boolean;
+  seeked: (event: Event) => boolean;
+  seeking: (event: Event) => boolean;
+  stalled: (event: Event) => boolean;
+  suspend: (event: Event) => boolean;
+  timeupdate: (event: Event) => boolean;
+  volumechange: (event: Event) => boolean;
+  waiting: (event: Event) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  title: PropType<string | undefined>;
+  poster: PropType<string | undefined>;
+}>> & Readonly<{
+  onAbort?: (event: Event) => any;
+  onCanplay?: (event: Event) => any;
+  onCanplaythrough?: (event: Event) => any;
+  onDurationchange?: (event: Event) => any;
+  onEmptied?: (event: Event) => any;
+  onEnded?: (event: Event) => any;
+  onEnterpictureinpicture?: (event: Event) => any;
+  onError?: (event: Event) => any;
+  onLeavepictureinpicture?: (event: Event) => any;
+  onLoadeddata?: (event: Event) => any;
+  onLoadedmetadata?: (event: Event) => any;
+  onLoadstart?: (event: Event) => any;
+  onPause?: (event: Event) => any;
+  onPlay?: (event: Event) => any;
+  onPlaying?: (event: Event) => any;
+  onProgress?: (event: Event) => any;
+  onRatechange?: (event: Event) => any;
+  onReady?: (_player: AudioPlayerHandle) => any;
+  onSeeked?: (event: Event) => any;
+  onSeeking?: (event: Event) => any;
+  onStalled?: (event: Event) => any;
+  onSuspend?: (event: Event) => any;
+  onTimeupdate?: (event: Event) => any;
+  "onUpdate:muted"?: (_muted: boolean) => any;
+  "onUpdate:playbackRate"?: (_rate: number) => any;
+  "onUpdate:volume"?: (_volume: number) => any;
+  onVolumechange?: (event: Event) => any;
+  onWaiting?: (event: Event) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * Vue component ref exposes the player handle alongside the standard instance.
+ */
+declare const AudioPlayerRoot: typeof component & {
+  new (): InstanceType<typeof component> & AudioPlayerHandle;
+};
+//#endregion
+export { AudioPlayerRoot as t };

package/dist/Video-fUL_ClzK.js

@@ -0,0 +1,55 @@
+import { n as createPlayerActions } from "./actions-CRZ5C4-3.js";
+import { r as PLAYER_CONTEXT } from "./context-Zjy9Z5Uy.js";
+import { a as mediaEmits, r as mediaProps, t as useMediaElement } from "./useMediaElement-CO_r--i0.js";
+import { n as preservePlayerTree, r as createPlayerEmits, t as usePlayerRoot } from "./usePlayerRoot-Nsnn7msd.js";
+import "./register/video/player.js";
+import { defineComponent, h, provide, withDirectives } from "vue";
+//#region src/player/PlayerRoot.ts
+const playerEmits = createPlayerEmits();
+/**
+* Vue component ref exposes the player handle alongside the standard instance.
+*/
+const PlayerRoot = defineComponent({
+	name: "PlayerRoot",
+	inheritAttrs: false,
+	props: {
+		title: String,
+		poster: String
+	},
+	emits: playerEmits,
+	setup(props, { attrs, slots, emit, expose }) {
+		const { element, handle } = usePlayerRoot(createPlayerActions, {
+			onReady: () => emit("ready", handle),
+			onMediaEvent: emit,
+			onVolume: (volume) => emit("update:volume", volume),
+			onMuted: (muted) => emit("update:muted", muted),
+			onPlaybackRate: (rate) => emit("update:playbackRate", rate)
+		});
+		provide(PLAYER_CONTEXT, handle);
+		expose(handle);
+		return () => withDirectives(h("video-player", {
+			...attrs,
+			ref: element,
+			"content-title": props.title,
+			poster: props.poster
+		}, slots["default"]?.()), [[preservePlayerTree]]);
+	}
+});
+//#endregion
+//#region src/media/Video.ts
+const Video = defineComponent({
+	name: "Video",
+	inheritAttrs: false,
+	props: mediaProps,
+	emits: mediaEmits,
+	setup(props, context) {
+		return useMediaElement({
+			tag: "video",
+			props,
+			context,
+			emit: context.emit
+		});
+	}
+});
+//#endregion
+export { PlayerRoot as n, playerEmits as r, Video as t };

package/dist/actions-CRZ5C4-3.js

@@ -0,0 +1,59 @@
+//#region src/player/actions.ts
+function requirePlayerStore(getStore) {
+	const store = getStore();
+	if (!store) throw new Error("[videojs-vue] Player is not ready or is inactive.");
+	return store;
+}
+/**
+* Resolve shared playback commands against the active store on every call.
+* @param {() => AudioPlayerStore | null} getStore - Reads the currently active audio or video store.
+* @returns {CommonPlayerActions} Commands bound to the current player.
+*/
+function createCommonPlayerActions(getStore) {
+	const requireStore = () => requirePlayerStore(getStore);
+	return {
+		async play() {
+			return await requireStore().play();
+		},
+		pause() {
+			return requireStore().pause();
+		},
+		async seek(time) {
+			return await requireStore().seek(time);
+		},
+		setVolume(volume) {
+			return requireStore().setVolume(volume);
+		},
+		setMuted(muted) {
+			return requireStore().setMuted(muted);
+		},
+		setPlaybackRate(rate) {
+			return requireStore().setPlaybackRate(rate);
+		}
+	};
+}
+/**
+* Resolve on every call so actions cannot retain an unmounted player's store.
+* @param {() => PlayerStore | null} getStore - Reads the currently active store.
+* @returns {PlayerActions} Commands bound to the current player.
+*/
+function createPlayerActions(getStore) {
+	const requireStore = () => requirePlayerStore(getStore);
+	return {
+		...createCommonPlayerActions(getStore),
+		async requestFullscreen() {
+			return await requireStore().requestFullscreen();
+		},
+		async exitFullscreen() {
+			return await requireStore().exitFullscreen();
+		},
+		async requestPictureInPicture() {
+			return await requireStore().requestPictureInPicture();
+		},
+		async exitPictureInPicture() {
+			return await requireStore().exitPictureInPicture();
+		}
+	};
+}
+//#endregion
+export { createPlayerActions as n, createCommonPlayerActions as t };

package/dist/audio/composables.d.ts

@@ -0,0 +1,18 @@
+import { a as AudioPlayerStore, i as AudioPlayerState, o as AudioPlayerTarget, r as AudioPlayerHandle, t as AudioPlayerActions } from "../types-DR9kogyX.js";
+import { ComputedRef } from "vue";
+//#region src/audio/composables.d.ts
+/**
+ * Subscribe to an audio snapshot selection; unavailable players yield undefined.
+ * @param {(state: AudioPlayerState) => Selected} selector - Selects from the immutable upstream audio snapshot.
+ * @param {AudioPlayerTarget} target - Explicit player target, or injected audio context when omitted.
+ * @returns {ComputedRef<Selected | undefined>} A readonly selection, undefined while unavailable.
+ */
+export declare function useAudioPlayerState<Selected>(selector: (state: AudioPlayerState) => Selected, target?: AudioPlayerTarget): ComputedRef<Selected | undefined>;
+/**
+ * Resolve the current audio player on each call. Unready actions are never queued.
+ * @param {AudioPlayerTarget} target - Explicit player target, or injected audio context when omitted.
+ * @returns {AudioPlayerActions} Playback commands bound to the current player.
+ */
+export declare function useAudioPlayerActions(target?: AudioPlayerTarget): AudioPlayerActions;
+//#endregion
+export type { AudioPlayerActions, AudioPlayerHandle, AudioPlayerState, AudioPlayerStore, AudioPlayerTarget };

package/dist/audio/composables.js

@@ -0,0 +1,25 @@
+import { t as useStoreSelection } from "../useStoreSelection-BFUpSMPo.js";
+import { t as createCommonPlayerActions } from "../actions-CRZ5C4-3.js";
+import { a as useTarget, t as AUDIO_PLAYER_CONTEXT } from "../context-Zjy9Z5Uy.js";
+//#region src/audio/composables.ts
+/**
+* Subscribe to an audio snapshot selection; unavailable players yield undefined.
+* @param {(state: AudioPlayerState) => Selected} selector - Selects from the immutable upstream audio snapshot.
+* @param {AudioPlayerTarget} target - Explicit player target, or injected audio context when omitted.
+* @returns {ComputedRef<Selected | undefined>} A readonly selection, undefined while unavailable.
+*/
+function useAudioPlayerState(selector, target) {
+	const player = useTarget(AUDIO_PLAYER_CONTEXT, "AudioPlayerRoot", target);
+	return useStoreSelection(() => player.value?.store, selector);
+}
+/**
+* Resolve the current audio player on each call. Unready actions are never queued.
+* @param {AudioPlayerTarget} target - Explicit player target, or injected audio context when omitted.
+* @returns {AudioPlayerActions} Playback commands bound to the current player.
+*/
+function useAudioPlayerActions(target) {
+	const player = useTarget(AUDIO_PLAYER_CONTEXT, "AudioPlayerRoot", target);
+	return createCommonPlayerActions(() => player.value?.store ?? null);
+}
+//#endregion
+export { useAudioPlayerActions, useAudioPlayerState };

package/dist/audio/core.d.ts

@@ -0,0 +1,6 @@
+import { a as PlayerMedia, t as MediaTrack } from "../types-wAkjM01D.js";
+import { a as AudioPlayerStore, i as AudioPlayerState, n as AudioPlayerElement, o as AudioPlayerTarget, r as AudioPlayerHandle, t as AudioPlayerActions } from "../types-DR9kogyX.js";
+import { t as AudioPlayerRoot } from "../AudioPlayerRoot-D47326rh.js";
+import { r as MediaEventName, t as CommonMediaProps } from "../index-DhJ5A5TI.js";
+import { t as Audio } from "../Audio-DmoQgIRM.js";
+export { Audio, type CommonMediaProps as AudioMediaProps, type AudioPlayerActions, type AudioPlayerElement, type AudioPlayerHandle, AudioPlayerRoot, type AudioPlayerState, type AudioPlayerStore, type AudioPlayerTarget, type MediaEventName, type MediaTrack, type PlayerMedia };

package/dist/audio/core.js

@@ -0,0 +1 @@
+export { t as Audio, n as AudioPlayerRoot } from "../Audio-D-RH-zmq.js";