@maas/vue-equipment 1.0.0-beta.5 → 1.0.0-beta.7

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerMediaApi.d.ts

@@ -1,21 +1,21 @@
-import { type MaybeRef } from 'vue';
+import { type Ref, type MaybeRef } from 'vue';
 import type { Buffered } from '../../types/index.js';
 export type UsePlayerMediaApiArgs = {
     id: MaybeRef<string>;
-    mediaRef?: MaybeRef<HTMLMediaElement | undefined>;
+    mediaRef?: Ref<HTMLMediaElement | null>;
 };
 export declare function usePlayerMediaApi(args: UsePlayerMediaApiArgs): {
-    currentTime: import("vue").Ref<number, number>;
+    currentTime: import("vue").ShallowRef<number, number>;
     remainingTime: import("vue").ComputedRef<number>;
-    duration: import("vue").Ref<number, number>;
-    seeking: import("vue").Ref<boolean, boolean>;
-    volume: import("vue").Ref<number, number>;
-    rate: import("vue").Ref<number, number>;
-    waiting: import("vue").Ref<boolean, boolean>;
-    ended: import("vue").Ref<boolean, boolean>;
-    playing: import("vue").Ref<boolean, boolean>;
-    stalled: import("vue").Ref<boolean, boolean>;
-    buffered: import("vue").Ref<[number, number][], [number, number][] | Buffered>;
-    muted: import("vue").Ref<boolean, boolean>;
+    duration: import("vue").ShallowRef<number, number>;
+    seeking: import("vue").ShallowRef<boolean, boolean>;
+    volume: import("vue").ShallowRef<number, number>;
+    rate: import("vue").ShallowRef<number, number>;
+    waiting: import("vue").ShallowRef<boolean, boolean>;
+    ended: import("vue").ShallowRef<boolean, boolean>;
+    playing: import("vue").ShallowRef<boolean, boolean>;
+    stalled: import("vue").ShallowRef<boolean, boolean>;
+    buffered: Ref<[number, number][], Buffered | [number, number][]>;
+    muted: import("vue").ShallowRef<boolean, boolean>;
 };
 export type UsePlayerMediaApiReturn = ReturnType<typeof usePlayerMediaApi>;

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerMediaApi.mjs

@@ -1,18 +1,25 @@
-import { ref, computed, watch, unref, toValue } from "vue";
+import {
+  ref,
+  shallowRef,
+  computed,
+  watch,
+  unref,
+  toValue
+} from "vue";
 import { useEventListener, watchIgnorable } from "@vueuse/core";
 import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
 export function usePlayerMediaApi(args) {
-  const currentTime = ref(0);
-  const duration = ref(0);
-  const seeking = ref(false);
-  const volume = ref(1);
-  const rate = ref(1);
-  const waiting = ref(false);
-  const ended = ref(false);
-  const playing = ref(false);
-  const stalled = ref(false);
+  const currentTime = shallowRef(0);
+  const duration = shallowRef(0);
+  const seeking = shallowRef(false);
+  const volume = shallowRef(1);
+  const rate = shallowRef(1);
+  const waiting = shallowRef(false);
+  const ended = shallowRef(false);
+  const playing = shallowRef(false);
+  const stalled = shallowRef(false);
   const buffered = ref([]);
-  const muted = ref(false);
+  const muted = shallowRef(false);
   const { mediaRef, id } = args;
   const remainingTime = computed(() => duration.value - currentTime.value);
   function timeRangeToArray(timeRanges) {

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerRuntime.d.ts

@@ -1,13 +1,13 @@
-import { type MaybeRef } from 'vue';
+import { type MaybeRef, type Ref } from 'vue';
 import type { MagicPlayerOptions } from '../../types/index.js';
 export type UsePlayerRuntimeArgs = {
     id: MaybeRef<string>;
-    mediaRef?: MaybeRef<HTMLVideoElement | undefined>;
+    mediaRef?: Ref<HTMLVideoElement | HTMLAudioElement | null>;
     srcType?: MagicPlayerOptions['srcType'];
     src?: string;
 };
 export declare function usePlayerRuntime(args: UsePlayerRuntimeArgs): {
-    loaded: import("vue").Ref<boolean, boolean>;
+    loaded: import("vue").ShallowRef<boolean, boolean>;
     initialize: () => void;
     destroy: () => void;
 };

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerRuntime.mjs

@@ -1,10 +1,10 @@
-import { ref, watch, toValue } from "vue";
+import { shallowRef, watch, toValue } from "vue";
 import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
 import { useEventListener } from "@vueuse/core";
 export function usePlayerRuntime(args) {
   let hls;
-  const loaded = ref(false);
-  const defferedLoading = ref(false);
+  const loaded = shallowRef(false);
+  const defferedLoading = shallowRef(false);
   const { mediaRef, srcType, src } = args;
   function useNative() {
     const el = toValue(mediaRef);

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerVideoApi.d.ts

@@ -1,13 +1,13 @@
-import { type MaybeRef } from 'vue';
+import { type MaybeRef, type Ref } from 'vue';
 export type UsePlayerVideoApiArgs = {
     id: MaybeRef<string>;
-    playerRef?: MaybeRef<HTMLElement | undefined>;
-    videoRef?: MaybeRef<HTMLVideoElement | undefined>;
+    playerRef?: Ref<HTMLElement | null>;
+    videoRef?: Ref<HTMLVideoElement | null>;
 };
 export declare function usePlayerVideoApi(args: UsePlayerVideoApiArgs): {
-    mouseEntered: import("vue").Ref<boolean, boolean>;
-    isFullscreen: import("vue").Ref<boolean, boolean>;
-    touched: import("vue").Ref<boolean, boolean>;
+    mouseEntered: import("vue").ShallowRef<boolean, boolean>;
+    isFullscreen: Ref<boolean, boolean>;
+    touched: import("vue").ShallowRef<boolean, boolean>;
     play: () => void;
     pause: () => void;
     togglePlay: () => void;

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerVideoApi.mjs

@@ -1,14 +1,14 @@
-import { ref, watch, toValue } from "vue";
+import { ref, shallowRef, watch, toValue } from "vue";
 import { useFullscreen } from "@vueuse/core";
 import { isIOS } from "@maas/vue-equipment/utils";
 import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
 import { usePlayerMediaApi } from "./usePlayerMediaApi.mjs";
 export function usePlayerVideoApi(args) {
   const { id, playerRef, videoRef } = args;
-  const fullscreenTarget = ref(void 0);
+  const fullscreenTarget = ref(null);
   const { playing, currentTime, muted } = usePlayerMediaApi({ id });
-  const touched = ref(false);
-  const mouseEntered = ref(false);
+  const touched = shallowRef(false);
+  const mouseEntered = shallowRef(false);
   const { isFullscreen, enter, exit } = useFullscreen(fullscreenTarget);
   function play() {
     playing.value = true;

package/dist/plugins/MagicPlayer/src/composables/useMagicPlayer.d.ts

@@ -1,23 +1,23 @@
 import type { MaybeRef } from 'vue';
 export declare function useMagicPlayer(id: MaybeRef<string>): {
     mediaApi: {
-        currentTime: import("vue").Ref<number, number>;
+        currentTime: import("vue").ShallowRef<number, number>;
         remainingTime: import("vue").ComputedRef<number>;
-        duration: import("vue").Ref<number, number>;
-        seeking: import("vue").Ref<boolean, boolean>;
-        volume: import("vue").Ref<number, number>;
-        rate: import("vue").Ref<number, number>;
-        waiting: import("vue").Ref<boolean, boolean>;
-        ended: import("vue").Ref<boolean, boolean>;
-        playing: import("vue").Ref<boolean, boolean>;
-        stalled: import("vue").Ref<boolean, boolean>;
+        duration: import("vue").ShallowRef<number, number>;
+        seeking: import("vue").ShallowRef<boolean, boolean>;
+        volume: import("vue").ShallowRef<number, number>;
+        rate: import("vue").ShallowRef<number, number>;
+        waiting: import("vue").ShallowRef<boolean, boolean>;
+        ended: import("vue").ShallowRef<boolean, boolean>;
+        playing: import("vue").ShallowRef<boolean, boolean>;
+        stalled: import("vue").ShallowRef<boolean, boolean>;
         buffered: import("vue").Ref<[number, number][], import("../types").Buffered | [number, number][]>;
-        muted: import("vue").Ref<boolean, boolean>;
+        muted: import("vue").ShallowRef<boolean, boolean>;
     };
     videoApi: {
-        mouseEntered: import("vue").Ref<boolean, boolean>;
+        mouseEntered: import("vue").ShallowRef<boolean, boolean>;
         isFullscreen: import("vue").Ref<boolean, boolean>;
-        touched: import("vue").Ref<boolean, boolean>;
+        touched: import("vue").ShallowRef<boolean, boolean>;
         play: () => void;
         pause: () => void;
         togglePlay: () => void;
@@ -30,14 +30,14 @@ export declare function useMagicPlayer(id: MaybeRef<string>): {
         onMouseleave: () => void;
     };
     controlsApi: {
-        mouseEntered: import("vue").Ref<boolean, boolean>;
-        dragging: import("vue").Ref<boolean, boolean>;
-        seekedTime: import("vue").Ref<number, number>;
-        seekedPercentage: import("vue").Ref<number, number>;
-        scrubbedPercentage: import("vue").Ref<number, number>;
+        mouseEntered: import("vue").ShallowRef<boolean, boolean>;
+        dragging: import("vue").ShallowRef<boolean, boolean>;
+        seekedTime: import("vue").ShallowRef<number, number>;
+        seekedPercentage: import("vue").ShallowRef<number, number>;
+        scrubbedPercentage: import("vue").ShallowRef<number, number>;
         bufferedPercentage: import("vue").ComputedRef<number>;
-        thumbPercentage: import("vue").Ref<number, number>;
-        popoverOffsetX: import("vue").Ref<number, number>;
+        thumbPercentage: import("vue").ShallowRef<number, number>;
+        popoverOffsetX: import("vue").ShallowRef<number, number>;
         onMouseenter: () => void;
         onMouseleave: () => void;
         onPointerdown: (e: MouseEvent | TouchEvent) => void;
@@ -66,7 +66,7 @@ export declare function useMagicPlayer(id: MaybeRef<string>): {
         } | undefined>;
     };
     playerRuntime: {
-        loaded: import("vue").Ref<boolean, boolean>;
+        loaded: import("vue").ShallowRef<boolean, boolean>;
         initialize: () => void;
         destroy: () => void;
     };

package/dist/plugins/MagicScroll/src/components/MagicScrollCollision.vue

@@ -1,7 +1,20 @@
 <script>
 import { defineComponent as _defineComponent } from "vue";
 import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-import { ref, inject, computed, toValue, watch, useId, onMounted } from "vue";
+const _hoisted_1 = {
+  ref: "el",
+  class: "magic-scroll-collision"
+};
+import {
+  shallowRef,
+  inject,
+  computed,
+  toValue,
+  watch,
+  useId,
+  onMounted,
+  useTemplateRef
+} from "vue";
 import { useCollisionDetection } from "../composables/private/useCollisionDetection";
 import { MagicScrollReturn, MagicScrollTarget } from "../symbols";
 import { useIntersectionObserver } from "@vueuse/core";
@@ -19,8 +32,8 @@ export default /* @__PURE__ */ _defineComponent({
         "MagicScrollCollision must be used within a MagicScrollProvider"
       );
     }
-    const intersecting = ref(false);
-    const elRef = ref(void 0);
+    const intersecting = shallowRef(false);
+    const elRef = useTemplateRef("el");
     const scrollY = computed(() => toValue(scrollReturn?.y) || 0);
     const mappedId = computed(() => __props.id ?? `magic-scroll-collision-${useId()}`);
     const { observe } = useCollisionDetection({
@@ -51,11 +64,7 @@ export default /* @__PURE__ */ _defineComponent({
     return (_ctx, _cache) => {
       return _openBlock(), _createElementBlock(
         "div",
-        {
-          ref_key: "elRef",
-          ref: elRef,
-          class: "magic-scroll-collision"
-        },
+        _hoisted_1,
         [
           _renderSlot(_ctx.$slots, "default")
         ],

package/dist/plugins/MagicScroll/src/components/MagicScrollCollision.vue.d.ts

@@ -3,19 +3,13 @@ interface MagicScrollCollisionProps {
     id?: string;
     offset?: CollisionOffset;
 }
-declare const elRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
 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;
 }>;
-type __VLS_TemplateRefs = {
-    elRef: typeof __VLS_nativeElements['div'];
-};
-declare const __VLS_self: import("vue").DefineComponent<MagicScrollCollisionProps, {
-    elRef: typeof elRef;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollCollisionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<MagicScrollCollisionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollCollisionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, __VLS_TemplateRefs, HTMLDivElement>;
+declare const __VLS_self: import("vue").DefineComponent<MagicScrollCollisionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollCollisionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicScrollCollisionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollCollisionProps> & 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 & {

package/dist/plugins/MagicScroll/src/components/MagicScrollMotion.vue

@@ -1,7 +1,11 @@
 <script>
 import { defineComponent as _defineComponent } from "vue";
 import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-import { ref, inject, computed, onMounted, watch } from "vue";
+const _hoisted_1 = {
+  ref: "el",
+  class: "magic-scroll-motion"
+};
+import { ref, inject, computed, onMounted, watch, useTemplateRef } from "vue";
 import { unrefElement } from "@vueuse/core";
 import defu from "defu";
 import {
@@ -17,7 +21,7 @@ export default /* @__PURE__ */ _defineComponent({
   },
   setup(__props) {
     const animation = ref(void 0);
-    const elRef = ref(void 0);
+    const elRef = useTemplateRef("el");
     const injectedProgress = inject(
       MagicScrollProgress,
       computed(() => 0)
@@ -64,11 +68,7 @@ export default /* @__PURE__ */ _defineComponent({
     return (_ctx, _cache) => {
       return _openBlock(), _createElementBlock(
         "div",
-        {
-          ref_key: "elRef",
-          ref: elRef,
-          class: "magic-scroll-motion"
-        },
+        _hoisted_1,
         [
           _renderSlot(_ctx.$slots, "default")
         ],

package/dist/plugins/MagicScroll/src/components/MagicScrollMotion.vue.d.ts

@@ -5,19 +5,13 @@ interface MagicScrollMotionProps {
     sequenceOptions?: SequenceOptions;
     progress?: number;
 }
-declare const elRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
 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;
 }>;
-type __VLS_TemplateRefs = {
-    elRef: typeof __VLS_nativeElements['div'];
-};
-declare const __VLS_self: import("vue").DefineComponent<MagicScrollMotionProps, {
-    elRef: typeof elRef;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollMotionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<MagicScrollMotionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollMotionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, __VLS_TemplateRefs, HTMLDivElement>;
+declare const __VLS_self: import("vue").DefineComponent<MagicScrollMotionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollMotionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicScrollMotionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollMotionProps> & 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 & {

package/dist/plugins/MagicScroll/src/components/MagicScrollProvider.vue.d.ts

@@ -21,7 +21,7 @@ declare const scrollReturn: {
     measure(): void;
 };
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_0: {
+declare var __VLS_1: {
     scrollReturn: {
         x: import("vue").WritableComputedRef<number, number>;
         y: import("vue").WritableComputedRef<number, number>;
@@ -42,12 +42,12 @@ declare var __VLS_0: {
     };
 };
 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<MagicScrollProviderProps, {
     scrollReturn: typeof scrollReturn;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<MagicScrollProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component: import("vue").DefineComponent<MagicScrollProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollProviderProps> & 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 & {

package/dist/plugins/MagicScroll/src/components/MagicScrollScene.vue

@@ -1,7 +1,19 @@
 <script>
 import { defineComponent as _defineComponent } from "vue";
 import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-import { ref, provide, inject, watch, nextTick, readonly } from "vue";
+const _hoisted_1 = {
+  ref: "el",
+  class: "magic-scroll-scene"
+};
+import {
+  shallowRef,
+  provide,
+  inject,
+  watch,
+  nextTick,
+  readonly,
+  useTemplateRef
+} from "vue";
 import { useIntersectionObserver } from "@vueuse/core";
 import { useScrollApi } from "../composables/private/useScrollApi";
 import {
@@ -17,13 +29,13 @@ export default /* @__PURE__ */ _defineComponent({
   },
   setup(__props) {
     const scrollReturn = inject(MagicScrollReturn, void 0);
-    const scrollTarget = inject(MagicScrollTarget);
+    const scrollTarget = inject(MagicScrollTarget, void 0);
     if (!scrollTarget) {
       console.error("MagicScrollScene must be used within a MagicScrollProvider");
     }
-    const progress = ref(0);
-    const intersecting = ref(false);
-    const elRef = ref(void 0);
+    const progress = shallowRef(0);
+    const intersecting = shallowRef(false);
+    const elRef = useTemplateRef("el");
     const { getCalculations, getProgress } = useScrollApi({
       child: elRef,
       parent: scrollTarget,
@@ -64,11 +76,7 @@ export default /* @__PURE__ */ _defineComponent({
     return (_ctx, _cache) => {
       return _openBlock(), _createElementBlock(
         "div",
-        {
-          ref_key: "elRef",
-          ref: elRef,
-          class: "magic-scroll-scene"
-        },
+        _hoisted_1,
         [
           _renderSlot(_ctx.$slots, "default", { progress: progress.value })
         ],

package/dist/plugins/MagicScroll/src/components/MagicScrollScene.vue.d.ts

@@ -3,23 +3,18 @@ interface MagicScrollSceneProps {
     from?: ScrollIntersection;
     to?: ScrollIntersection;
 }
-declare const progress: import("vue").Ref<number, number>;
-declare const elRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+declare const progress: import("vue").ShallowRef<number, number>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_0: {
+declare var __VLS_1: {
     progress: number;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    default?: (props: typeof __VLS_0) => any;
+    default?: (props: typeof __VLS_1) => any;
 }>;
-type __VLS_TemplateRefs = {
-    elRef: typeof __VLS_nativeElements['div'];
-};
 declare const __VLS_self: import("vue").DefineComponent<MagicScrollSceneProps, {
     progress: typeof progress;
-    elRef: typeof elRef;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollSceneProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<MagicScrollSceneProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollSceneProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, __VLS_TemplateRefs, HTMLDivElement>;
+declare const __VLS_component: import("vue").DefineComponent<MagicScrollSceneProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollSceneProps> & 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 & {

package/dist/plugins/MagicScroll/src/composables/private/useCollisionDetection.d.ts

@@ -2,8 +2,8 @@ import { type MaybeRef } from 'vue';
 import type { CollisionOffset } from '../../types/index.js';
 type UseCollisionDetectionArgs = {
     id: string;
-    child: MaybeRef<HTMLElement | undefined>;
-    parent: MaybeRef<HTMLElement | undefined>;
+    child: MaybeRef<HTMLElement | null>;
+    parent: MaybeRef<HTMLElement | null | undefined>;
     scrollY: MaybeRef<number>;
     offset?: CollisionOffset;
 };

package/dist/plugins/MagicScroll/src/composables/private/useCollisionDetection.mjs

@@ -1,4 +1,4 @@
-import { ref, reactive, computed, toValue } from "vue";
+import { shallowRef, reactive, computed, toValue } from "vue";
 import { useElementBounding } from "@vueuse/core";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins";
 export function useCollisionDetection(args) {
@@ -28,8 +28,8 @@ export function useCollisionDetection(args) {
   const childBoundingRect = useElementBounding(child);
   const parentBoundingRect = useElementBounding(parent);
   const mappedOffset = { top: 0, bottom: 0, ...offset };
-  const lastScrollY = ref(0);
-  const scrollDirection = ref();
+  const lastScrollY = shallowRef(0);
+  const scrollDirection = shallowRef();
   const oppositeScrollDirection = computed(
     () => scrollDirection.value === "up" ? "down" : "up"
   );

package/dist/plugins/MagicScroll/src/composables/private/useScrollApi.mjs

@@ -1,4 +1,9 @@
-import { ref, inject, toValue } from "vue";
+import {
+  ref,
+  shallowRef,
+  inject,
+  toValue
+} from "vue";
 import { useWindowSize } from "@vueuse/core";
 import { MagicScrollReturn } from "../../symbols/index.mjs";
 import { clampValue } from "@maas/vue-equipment/utils";
@@ -7,8 +12,9 @@ export function useScrollApi(params) {
   const scrollReturn = inject(MagicScrollReturn, void 0);
   const childRect = ref(void 0);
   const parentRect = ref(void 0);
-  const start = ref(0);
-  const end = ref(0);
+  const start = shallowRef(0);
+  const end = shallowRef(0);
+  const { width: windowWidth, height: windowHeight } = useWindowSize();
   function splitLocation(location) {
     return {
       child: location.match(/^[a-z]+/)[0],
@@ -56,7 +62,11 @@ export function useScrollApi(params) {
   }
   function getCalculations() {
     childRect.value = toValue(child)?.getBoundingClientRect();
-    parentRect.value = toValue(parent) ? toValue(parent)?.getBoundingClientRect() : { ...useWindowSize(), top: 0 };
+    parentRect.value = toValue(parent) ? toValue(parent)?.getBoundingClientRect() : {
+      width: windowWidth.value,
+      height: windowHeight.value,
+      top: 0
+    };
     start.value = getOffsetTop(splitLocation(from));
     end.value = getOffsetTop(splitLocation(to));
   }

package/dist/plugins/MagicScroll/src/symbols/index.d.ts

@@ -1,6 +1,6 @@
 import type { InjectionKey, Ref, MaybeRef } from 'vue';
 import type { UseScrollReturn } from '@vueuse/core';
-declare const MagicScrollTarget: InjectionKey<MaybeRef<HTMLElement | undefined>>;
+declare const MagicScrollTarget: InjectionKey<MaybeRef<HTMLElement | null | undefined>>;
 declare const MagicScrollProgress: InjectionKey<Ref<number>>;
 declare const MagicScrollReturn: InjectionKey<UseScrollReturn | undefined>;
 export { MagicScrollTarget, MagicScrollProgress, MagicScrollReturn };

package/dist/plugins/MagicToast/src/components/MagicToastProvider.vue

@@ -4,7 +4,7 @@ import { unref as _unref, renderList as _renderList, Fragment as _Fragment, open
 const _hoisted_1 = ["data-id", "data-position", "data-expanded"];
 import {
   toValue,
-  ref,
+  useTemplateRef,
   provide,
   watch,
   onBeforeUnmount
@@ -35,7 +35,7 @@ export default /* @__PURE__ */ _defineComponent({
     const { deleteView } = useToastView(__props.id);
     const { deleteState, initializeState } = useToastState(__props.id);
     const state = initializeState(__props.options);
-    const listRef = ref(void 0);
+    const listRef = useTemplateRef("list");
     const {
       onBeforeEnter,
       onEnter,
@@ -71,8 +71,7 @@ export default /* @__PURE__ */ _defineComponent({
           class: "magic-toast-provider"
         }, _ctx.$attrs), [
           _createVNode(_TransitionGroup, {
-            ref_key: "listRef",
-            ref: listRef,
+            ref: "list",
             tag: "ol",
             class: "magic-toast-provider__list",
             name: _unref(state).options.transition,
@@ -208,7 +207,7 @@ export default /* @__PURE__ */ _defineComponent({
 }
 
 .magic-toast-provider[data-position='top-left'],
-.magic-toast-provider[data-position='top-center'],
+.magic-toast-provider[data-position='top'],
 .magic-toast-provider[data-position='top-right'] {
   --mt-enter-animation: mt-slide-ttb-in var(--magic-toast-animation-duration)
     var(--ease-in-out);
@@ -220,7 +219,7 @@ export default /* @__PURE__ */ _defineComponent({
 }
 
 .magic-toast-provider[data-position='bottom-left'],
-.magic-toast-provider[data-position='bottom-center'],
+.magic-toast-provider[data-position='bottom'],
 .magic-toast-provider[data-position='bottom-right'] {
   --mt-enter-animation: mt-slide-btt-in var(--magic-toast-animation-duration)
     var(--ease-in-out);
@@ -240,7 +239,7 @@ export default /* @__PURE__ */ _defineComponent({
   --mt-align-items: flex-end;
 }
 
-.magic-toast-provider[data-position='center-left'] {
+.magic-toast-provider[data-position='left'] {
   --mt-justify-content: center;
   --mt-align-items: flex-start;
   --mt-enter-animation: slide-ltr-in var(--magic-toast-animation-duration)
@@ -249,7 +248,7 @@ export default /* @__PURE__ */ _defineComponent({
     var(--ease-in-out);
 }
 
-.magic-toast-provider[data-position='center-right'] {
+.magic-toast-provider[data-position='right'] {
   --mt-justify-content: center;
   --mt-align-items: flex-end;
   --mt-enter-animation: slide-rtl-in var(--magic-toast-animation-duration)
@@ -263,13 +262,13 @@ export default /* @__PURE__ */ _defineComponent({
   position: absolute;
 
   &[data-position='bottom-left'],
-  &[data-position='bottom-center'],
+  &[data-position='bottom'],
   &[data-position='bottom-right'] {
     bottom: calc(var(--mt-height) * var(--mt-index) * 1px);
   }
 
   &[data-position='top-left'],
-  &[data-position='top-center'],
+  &[data-position='top'],
   &[data-position='top-right'] {
     top: calc(var(--mt-height) * var(--mt-index) * 1px);
   }