@maas/vue-equipment 1.0.0-beta.6 → 1.0.0-beta.8

package/dist/plugins/MagicModal/src/components/MagicModal.vue.d.ts

@@ -0,0 +1,60 @@
+import { toValue, type MaybeRef } from 'vue';
+import type { MagicModalOptions } from './../types/index.js';
+import '@maas/vue-equipment/utils/css/animations/fade-in.css';
+import '@maas/vue-equipment/utils/css/animations/fade-out.css';
+interface MagicModalProps {
+    id: MaybeRef<string>;
+    props?: Record<string, unknown>;
+    options?: MagicModalOptions;
+}
+declare const mappedOptions: Omit<MagicModalOptions, keyof MagicModalOptions> & Omit<import("../../../../utils").RequireAll<MagicModalOptions>, keyof MagicModalOptions> & {
+    transition: {
+        content?: string;
+        backdrop?: string;
+    };
+    backdrop: boolean;
+    tag: "div" | "dialog";
+    focusTrap: boolean | import("focus-trap").Options;
+    scrollLock: boolean | {
+        padding: boolean;
+    };
+    teleport: {
+        target?: string;
+        disabled?: boolean;
+    };
+    keyListener: {
+        close?: string[] | false;
+    };
+};
+declare const close: () => void;
+declare const innerActive: import("vue").ShallowRef<boolean, boolean>;
+declare const wrapperActive: import("vue").ShallowRef<boolean, boolean>;
+declare const onBeforeEnter: () => void, onEnter: () => void, onAfterEnter: () => Promise<void>, onBeforeLeave: () => void, onLeave: () => void, onAfterLeave: () => void;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_9: {}, __VLS_32: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    backdrop?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_32) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<MagicModalProps, {
+    toValue: typeof toValue;
+    mappedOptions: typeof mappedOptions;
+    close: typeof close;
+    innerActive: typeof innerActive;
+    wrapperActive: typeof wrapperActive;
+    onBeforeEnter: typeof onBeforeEnter;
+    onEnter: typeof onEnter;
+    onAfterEnter: typeof onAfterEnter;
+    onBeforeLeave: typeof onBeforeLeave;
+    onLeave: typeof onLeave;
+    onAfterLeave: typeof onAfterLeave;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicModalProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicModalProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/plugins/MagicModal/src/composables/private/useModalDOM.mjs

@@ -1,14 +1,18 @@
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { defu } from "defu";
 import { useScrollLock } from "@vueuse/core";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
-import { matchClass } from "@maas/vue-equipment/utils";
+import {
+  matchClass,
+  scrollbarGutterSupport,
+  scrollbarWidth
+} from "@maas/vue-equipment/utils";
 const defaultOptions = {
   focusTrap: false,
   focusTarget: void 0,
   scrollLock: true
 };
-const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : ref(false);
+const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
 export function useModalDOM(args) {
   const positionFixedElements = ref([]);
   const mappedOptions = defu(args, defaultOptions);
@@ -36,24 +40,40 @@ export function useModalDOM(args) {
   function addScrollLockPadding() {
     if (typeof window === "undefined") return;
     const exclude = new RegExp(/magic-modal(__backdrop)?/);
-    const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
-    document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
-    document.body.style.paddingRight = "var(--scrollbar-width)";
+    document.body.style.setProperty(
+      "--scrollbar-width",
+      `${scrollbarWidth()}px`
+    );
     positionFixedElements.value = [
       ...document.body.getElementsByTagName("*")
     ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && !matchClass(x, exclude)
-    );
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px" && !matchClass(x, exclude)
     );
+    switch (scrollbarGutterSupport()) {
+      case true:
+        document.documentElement.style.scrollbarGutter = "stable";
+        positionFixedElements.value.forEach((elem) => {
+          elem.style.scrollbarGutter = "stable";
+          elem.style.overflow = "auto";
+        });
+        break;
+      case false:
+        document.body.style.paddingRight = "var(--scrollbar-width)";
+        positionFixedElements.value.forEach(
+          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+        );
+        break;
+    }
   }
   function removeScrollLockPadding() {
-    document.body.style.paddingRight = "";
+    document.documentElement.style.scrollbarGutter = "";
     document.body.style.removeProperty("--scrollbar-width");
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = ""
-    );
+    document.body.style.paddingRight = "";
+    positionFixedElements.value.forEach((elem) => {
+      elem.style.paddingRight = "";
+      elem.style.scrollbarGutter = "";
+      elem.style.overflow = "";
+    });
   }
   return {
     trapFocus,

package/dist/plugins/MagicNoise/src/components/MagicNoise.vue

@@ -3,7 +3,15 @@ import { defineComponent as _defineComponent } from "vue";
 import { unref as _unref, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = ["data-loading"];
 const _hoisted_2 = { class: "magic-noise__inner" };
-import { onMounted, onUnmounted, watch, shallowRef } from "vue";
+const _hoisted_3 = {
+  ref: "canvas",
+  class: "magic-noise__canvas"
+};
+const _hoisted_4 = {
+  ref: "offCanvas",
+  class: "magic-noise__off-canvas"
+};
+import { onMounted, onUnmounted, watch, useTemplateRef } from "vue";
 import { useResizeObserver, useDebounceFn } from "@vueuse/core";
 import { useNoiseApi } from "../composables/private/useNoiseApi";
 export default /* @__PURE__ */ _defineComponent({
@@ -13,8 +21,8 @@ export default /* @__PURE__ */ _defineComponent({
     pause: { type: Boolean, required: false, default: false }
   },
   setup(__props) {
-    const canvasRef = shallowRef(void 0);
-    const offCanvasRef = shallowRef(void 0);
+    const canvasRef = useTemplateRef("canvas");
+    const offCanvasRef = useTemplateRef("offCanvas");
     const noiseApi = useNoiseApi({
       canvasRef,
       offCanvasRef,
@@ -58,22 +66,14 @@ export default /* @__PURE__ */ _defineComponent({
         _createElementVNode("div", _hoisted_2, [
           _createElementVNode(
             "canvas",
-            {
-              ref_key: "canvasRef",
-              ref: canvasRef,
-              class: "magic-noise__canvas"
-            },
+            _hoisted_3,
             null,
             512
             /* NEED_PATCH */
           ),
           _createElementVNode(
             "canvas",
-            {
-              ref_key: "offCanvasRef",
-              ref: offCanvasRef,
-              class: "magic-noise__off-canvas"
-            },
+            _hoisted_4,
             null,
             512
             /* NEED_PATCH */

package/dist/plugins/MagicNoise/src/components/MagicNoise.vue.d.ts

@@ -3,9 +3,5 @@ interface MagicNoiseProps {
     options?: MagicNoiseOptions;
     pause?: boolean;
 }
-type __VLS_TemplateRefs = {
-    canvasRef: typeof __VLS_nativeElements['canvas'];
-    offCanvasRef: typeof __VLS_nativeElements['canvas'];
-};
-declare const _default: import("vue").DefineComponent<MagicNoiseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicNoiseProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, __VLS_TemplateRefs, HTMLDivElement>;
+declare const _default: import("vue").DefineComponent<MagicNoiseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicNoiseProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/plugins/MagicNoise/src/composables/private/useNoiseApi.d.ts

@@ -1,8 +1,8 @@
 import { type Ref, type MaybeRef } from 'vue';
 import type { MagicNoiseOptions, RafControls } from '../../types/index.js';
 type UseNoiseApiArgs = {
-    canvasRef: Ref<HTMLCanvasElement | undefined>;
-    offCanvasRef: Ref<HTMLCanvasElement | undefined>;
+    canvasRef: Ref<HTMLCanvasElement | null>;
+    offCanvasRef: Ref<HTMLCanvasElement | null>;
     options?: MaybeRef<MagicNoiseOptions>;
 };
 export declare function useNoiseApi({ canvasRef, offCanvasRef, options, }: UseNoiseApiArgs): {
@@ -11,7 +11,7 @@ export declare function useNoiseApi({ canvasRef, offCanvasRef, options, }: UseNo
     rotateAndTransfer: () => void;
     throttledDraw: () => void;
     throttledRotateAndTransfer: () => void;
-    isReady: Ref<boolean, boolean>;
+    isReady: import("vue").ShallowRef<boolean, boolean>;
     drawControls: import("vue").ShallowRef<RafControls | undefined, RafControls | undefined>;
     transferControls: import("vue").ShallowRef<RafControls | undefined, RafControls | undefined>;
 };

package/dist/plugins/MagicNoise/src/composables/private/useNoiseApi.mjs

@@ -1,4 +1,4 @@
-import { shallowRef, ref, reactive } from "vue";
+import { shallowRef, reactive } from "vue";
 import { defu } from "defu";
 import {
   useElementSize,
@@ -14,7 +14,7 @@ export function useNoiseApi({
 }) {
   const tiles = shallowRef([]);
   const pixels = shallowRef([]);
-  const isReady = ref(false);
+  const isReady = shallowRef(false);
   const context = shallowRef(null);
   const offContext = shallowRef(null);
   const { width, height } = useElementSize(canvasRef);

package/dist/plugins/MagicPlayer/src/components/MagicPlayerAudio.vue

@@ -1,7 +1,17 @@
 <script>
 import { defineComponent as _defineComponent } from "vue";
 import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-import { ref, inject, onMounted, onBeforeUnmount } from "vue";
+const _hoisted_1 = {
+  ref: "el",
+  class: "magic-player-audio"
+};
+import {
+  useTemplateRef,
+  shallowRef,
+  inject,
+  onMounted,
+  onBeforeUnmount
+} from "vue";
 import { useIntersectionObserver } from "@vueuse/core";
 import { usePlayerAudioApi } from "../composables/private/usePlayerAudioApi";
 import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
@@ -18,8 +28,8 @@ export default /* @__PURE__ */ _defineComponent({
     if (!injectedOptions) {
       throw new Error("MagicPlayerVideo must be used within a MagicPlayerProvider");
     }
-    const elRef = ref(void 0);
-    const pausedByIntersection = ref(false);
+    const elRef = useTemplateRef("el");
+    const pausedByIntersection = shallowRef(false);
     const { initialize, destroy } = usePlayerRuntime({
       id: injectedId,
       mediaRef: elRef,
@@ -57,11 +67,7 @@ export default /* @__PURE__ */ _defineComponent({
     return (_ctx, _cache) => {
       return _openBlock(), _createElementBlock(
         "audio",
-        {
-          ref_key: "elRef",
-          ref: elRef,
-          class: "magic-player-audio"
-        },
+        _hoisted_1,
         null,
         512
         /* NEED_PATCH */

package/dist/plugins/MagicPlayer/src/components/MagicPlayerAudio.vue.d.ts

@@ -1,5 +1,2 @@
-type __VLS_TemplateRefs = {
-    elRef: typeof __VLS_nativeElements['audio'];
-};
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, __VLS_TemplateRefs, HTMLAudioElement>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/plugins/MagicPlayer/src/components/MagicPlayerAudioControls.vue

@@ -4,22 +4,30 @@ import { unref as _unref, renderSlot as _renderSlot, createVNode as _createVNode
 const _hoisted_1 = ["data-touched", "data-playing", "data-paused", "data-waiting", "data-idle", "data-hover"];
 const _hoisted_2 = { class: "magic-player-audio-controls__bar" };
 const _hoisted_3 = {
+  ref: "bar",
+  class: "magic-player-audio-controls__bar--inner"
+};
+const _hoisted_4 = {
   class: "magic-player-audio-controls__item -shrink-0",
   "data-slot": "play-toggle"
 };
-const _hoisted_4 = {
+const _hoisted_5 = {
   class: "magic-player-audio-controls__item -shrink-0",
   "data-slot": "display-time-current"
 };
-const _hoisted_5 = {
+const _hoisted_6 = {
   class: "magic-player-audio-controls__item -grow",
   "data-slot": "timeline"
 };
-const _hoisted_6 = {
+const _hoisted_7 = {
+  ref: "track",
+  class: "magic-player-audio-controls__timeline"
+};
+const _hoisted_8 = {
   class: "magic-player-audio-controls__item -shrink-0",
   "data-slot": "display-time-duration"
 };
-import { computed, ref, inject, provide } from "vue";
+import { computed, inject, provide, useTemplateRef } from "vue";
 import { useIdle } from "@vueuse/core";
 import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
 import { usePlayerAudioApi } from "../composables/private/usePlayerAudioApi";
@@ -30,31 +38,31 @@ import { MagicPlayerInstanceId } from "../symbols";
 export default /* @__PURE__ */ _defineComponent({
   __name: "MagicPlayerAudioControls",
   props: {
-    id: { type: String, required: false }
+    instanceId: { type: String, required: false }
   },
   setup(__props) {
-    const instanceId = inject(MagicPlayerInstanceId, void 0);
-    const mappedId = computed(() => __props.id ?? instanceId);
-    if (!mappedId.value) {
+    const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
+    const mappedInstanceId = computed(() => __props.instanceId ?? injectedInstanceId);
+    if (!mappedInstanceId.value) {
       throw new Error(
-        "MagicAudioPlayerControls must be nested inside MagicAudioPlayer or be passed an id as a prop."
+        "MagicAudioPlayerControls must be nested inside MagicAudioPlayer or an instanceId must be provided."
       );
     }
-    const barRef = ref(void 0);
-    const trackRef = ref(void 0);
+    const barRef = useTemplateRef("bar");
+    const trackRef = useTemplateRef("track");
     const { playing, waiting } = usePlayerMediaApi({
-      id: mappedId.value
+      id: mappedInstanceId.value
     });
     const { play, pause, touched, mouseEntered } = usePlayerAudioApi({
-      id: mappedId.value
+      id: mappedInstanceId.value
     });
     usePlayerControlsApi({
-      id: mappedId.value,
+      id: mappedInstanceId.value,
       barRef,
       trackRef
     });
     const { idle } = useIdle(3e3);
-    provide(MagicPlayerInstanceId, mappedId.value);
+    provide(MagicPlayerInstanceId, mappedInstanceId.value);
     return (_ctx, _cache) => {
       const _component_magic_player_display_time = _resolveComponent("magic-player-display-time");
       const _component_magic_player_timeline = _resolveComponent("magic-player-timeline");
@@ -70,13 +78,9 @@ export default /* @__PURE__ */ _defineComponent({
         _createElementVNode("div", _hoisted_2, [
           _createElementVNode(
             "div",
-            {
-              ref_key: "barRef",
-              ref: barRef,
-              class: "magic-player-audio-controls__bar--inner"
-            },
+            _hoisted_3,
             [
-              _createElementVNode("div", _hoisted_3, [
+              _createElementVNode("div", _hoisted_4, [
                 !_unref(playing) ? (_openBlock(), _createElementBlock("button", {
                   key: 0,
                   onClick: _cache[0] || (_cache[0] = //@ts-ignore
@@ -95,17 +99,13 @@ export default /* @__PURE__ */ _defineComponent({
                   ])
                 ]))
               ]),
-              _createElementVNode("div", _hoisted_4, [
+              _createElementVNode("div", _hoisted_5, [
                 _createVNode(_component_magic_player_display_time, { type: "current" })
               ]),
-              _createElementVNode("div", _hoisted_5, [
+              _createElementVNode("div", _hoisted_6, [
                 _createElementVNode(
                   "div",
-                  {
-                    ref_key: "trackRef",
-                    ref: trackRef,
-                    class: "magic-player-audio-controls__timeline"
-                  },
+                  _hoisted_7,
                   [
                     _createVNode(_component_magic_player_timeline)
                   ],
@@ -113,7 +113,7 @@ export default /* @__PURE__ */ _defineComponent({
                   /* NEED_PATCH */
                 )
               ]),
-              _createElementVNode("div", _hoisted_6, [
+              _createElementVNode("div", _hoisted_8, [
                 _createVNode(_component_magic_player_display_time, { type: "duration" })
               ])
             ],

package/dist/plugins/MagicPlayer/src/components/MagicPlayerAudioControls.vue.d.ts

@@ -0,0 +1,34 @@
+import IconPlay from './icons/Play.vue.js';
+import IconPause from './icons/Pause.vue.js';
+interface MagicAudioPlayerControlsProps {
+    instanceId?: string;
+}
+declare const playing: import("vue").ShallowRef<boolean, boolean>, waiting: import("vue").ShallowRef<boolean, boolean>;
+declare const play: () => void, pause: () => void, touched: import("vue").ShallowRef<boolean, boolean>, mouseEntered: import("vue").ShallowRef<boolean, boolean>;
+declare const idle: import("vue").Ref<boolean, boolean>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {}, __VLS_6: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    playIcon?: (props: typeof __VLS_1) => any;
+} & {
+    pauseIcon?: (props: typeof __VLS_6) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<MagicAudioPlayerControlsProps, {
+    IconPlay: typeof IconPlay;
+    IconPause: typeof IconPause;
+    playing: typeof playing;
+    waiting: typeof waiting;
+    play: typeof play;
+    pause: typeof pause;
+    touched: typeof touched;
+    mouseEntered: typeof mouseEntered;
+    idle: typeof idle;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAudioPlayerControlsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicAudioPlayerControlsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAudioPlayerControlsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/plugins/MagicPlayer/src/components/MagicPlayerDisplayTime.vue.d.ts

@@ -1,5 +1,5 @@
 interface MagicPlayerDisplayTimeProps {
     type?: 'current' | 'remaining' | 'duration';
 }
-declare const _default: import("vue").DefineComponent<MagicPlayerDisplayTimeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerDisplayTimeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: import("vue").DefineComponent<MagicPlayerDisplayTimeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerDisplayTimeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/plugins/MagicPlayer/src/components/MagicPlayerMuxPopover.vue

@@ -2,7 +2,14 @@
 import { defineComponent as _defineComponent } from "vue";
 import { createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = ["width", "height"];
-import { shallowRef, onMounted, watch, computed, inject } from "vue";
+import {
+  shallowRef,
+  onMounted,
+  watch,
+  computed,
+  inject,
+  useTemplateRef
+} from "vue";
 import { useDevicePixelRatio } from "@vueuse/core";
 import { usePlayerControlsApi } from "../composables/private/usePlayerControlsApi";
 import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
@@ -21,7 +28,7 @@ export default /* @__PURE__ */ _defineComponent({
     }
     const { seekedTime } = usePlayerControlsApi({ id: instanceId });
     const { pixelRatio } = useDevicePixelRatio();
-    const canvasRef = shallowRef();
+    const canvasRef = useTemplateRef("canvas");
     const storyboard = shallowRef();
     let context = void 0;
     let image = void 0;
@@ -35,12 +42,17 @@ export default /* @__PURE__ */ _defineComponent({
     });
     function getMuxId(url) {
       const match = url?.match(/mux\.com\/([^\/]+)/);
-      return match?.[1];
+      return match?.[1]?.replace(/\.(m3u8|mp4)$/, "");
     }
     async function init() {
       const parsedPlaybackId = getMuxId(injectedOptions?.src);
       const mappedPlaybackId = __props.playbackId ?? parsedPlaybackId;
-      if (!mappedPlaybackId) return;
+      if (!mappedPlaybackId) {
+        console.error(
+          "MagicPlayerMuxPopover must be nested inside MagicPlayerProvider or a playbackId must be provided"
+        );
+        return;
+      }
       try {
         storyboard.value = await fetch(
           `https://image.mux.com/${mappedPlaybackId}/storyboard.json`
@@ -49,8 +61,8 @@ export default /* @__PURE__ */ _defineComponent({
         image = new Image();
         image.src = storyboard.value.url;
         await image.decode();
-        context = canvasRef.value.getContext("2d");
-        context.drawImage(image, 0, 0);
+        context = canvasRef.value?.getContext("2d");
+        context?.drawImage(image, 0, 0);
       } catch (e) {
         console.error("Can not initialize timeine preview.", e);
       }
@@ -95,8 +107,7 @@ export default /* @__PURE__ */ _defineComponent({
         },
         [
           _createElementVNode("canvas", {
-            ref_key: "canvasRef",
-            ref: canvasRef,
+            ref: "canvas",
             width: storyboard.value?.tile_width,
             height: storyboard.value?.tile_height
           }, null, 8, _hoisted_1)

package/dist/plugins/MagicPlayer/src/components/MagicPlayerMuxPopover.vue.d.ts

@@ -1,8 +1,5 @@
 interface MagicPlayerMuxPopoverProps {
     playbackId?: string;
 }
-type __VLS_TemplateRefs = {
-    canvasRef: typeof __VLS_nativeElements['canvas'];
-};
-declare const _default: import("vue").DefineComponent<MagicPlayerMuxPopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerMuxPopoverProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, __VLS_TemplateRefs, HTMLDivElement>;
+declare const _default: import("vue").DefineComponent<MagicPlayerMuxPopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerMuxPopoverProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/plugins/MagicPlayer/src/components/MagicPlayerOverlay.vue.d.ts

@@ -0,0 +1,35 @@
+import IconPlay from './icons/Play.vue.js';
+import IconPause from './icons/Pause.vue.js';
+import IconWaiting from './icons/Waiting.vue.js';
+declare const playing: import("vue").ShallowRef<boolean, boolean>, waiting: import("vue").ShallowRef<boolean, boolean>;
+declare const mouseEntered: import("vue").ShallowRef<boolean, boolean>, togglePlay: () => void;
+declare const idle: import("vue").Ref<boolean, boolean>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_8: {}, __VLS_13: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    waitingIcon?: (props: typeof __VLS_3) => any;
+} & {
+    playIcon?: (props: typeof __VLS_8) => any;
+} & {
+    pauseIcon?: (props: typeof __VLS_13) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<{}, {
+    IconPlay: typeof IconPlay;
+    IconPause: typeof IconPause;
+    IconWaiting: typeof IconWaiting;
+    playing: typeof playing;
+    waiting: typeof waiting;
+    mouseEntered: typeof mouseEntered;
+    togglePlay: typeof togglePlay;
+    idle: typeof idle;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/plugins/MagicPlayer/src/components/MagicPlayerPoster.vue.d.ts

@@ -1,15 +1,15 @@
-declare const loaded: import("vue").Ref<boolean, boolean>;
-declare const touched: import("vue").Ref<boolean, boolean>;
+declare const loaded: import("vue").ShallowRef<boolean, boolean>;
+declare const touched: import("vue").ShallowRef<boolean, boolean>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_0: {};
+declare var __VLS_1: {};
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    default?: (props: typeof __VLS_0) => any;
+    default?: (props: typeof __VLS_1) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<{}, {
     loaded: typeof loaded;
     touched: typeof touched;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/plugins/MagicPlayer/src/components/MagicPlayerProvider.vue

@@ -2,7 +2,7 @@
 import { defineComponent as _defineComponent } from "vue";
 import { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = ["data-mode", "data-fullscreen", "data-touched", "data-playing", "data-paused", "data-waiting", "data-loaded", "data-muted"];
-import { ref, provide } from "vue";
+import { useTemplateRef, provide } from "vue";
 import defu from "defu";
 import { usePlayerVideoApi } from "../composables/private/usePlayerVideoApi";
 import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
@@ -17,7 +17,7 @@ export default /* @__PURE__ */ _defineComponent({
   },
   setup(__props) {
     const mappedOptions = defu(__props.options, defaultOptions);
-    const playerRef = ref(void 0);
+    const playerRef = useTemplateRef("player");
     const { playing, waiting, muted } = usePlayerMediaApi({
       id: __props.id
     });
@@ -36,8 +36,7 @@ export default /* @__PURE__ */ _defineComponent({
     provide(MagicPlayerOptionsKey, mappedOptions);
     return (_ctx, _cache) => {
       return _openBlock(), _createElementBlock("div", {
-        ref_key: "playerRef",
-        ref: playerRef,
+        ref: "player",
         class: "magic-player-provider",
         "data-mode": _unref(mappedOptions).mode,
         "data-fullscreen": _unref(isFullscreen),