@maas/vue-equipment 0.27.2 → 0.28.0

package/dist/plugins/MagicModal/src/composables/{useModalApi.mjs → private/useModalDOM.mjs}

@@ -1,28 +1,18 @@
-import { ref, computed, toValue } from "vue";
+import { ref } from "vue";
 import { defu } from "defu";
 import { useScrollLock } from "@vueuse/core";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
-import { uuid, matchClass } from "@maas/vue-equipment/utils";
-import { useModalStore } from "./private/useModalStore.mjs";
+import { matchClass } from "@maas/vue-equipment/utils";
 const defaultOptions = {
   focusTrap: false,
   focusTarget: void 0,
   scrollLock: true
 };
 const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : ref(false);
-export function useModalApi(id, options) {
+export function useModalDOM(options) {
   const positionFixedElements = ref([]);
-  const mappedId = computed(() => toValue(id) || uuid());
   const mappedOptions = defu(options, defaultOptions);
   const focusTrap = mappedOptions.focusTarget ? typeof mappedOptions.focusTrap === "boolean" ? useFocusTrap(mappedOptions.focusTarget) : useFocusTrap(mappedOptions.focusTarget, mappedOptions.focusTrap) : void 0;
-  const { modalStore, addInstance, removeInstance } = useModalStore();
-  const isActive = computed(() => modalStore.value.includes(mappedId.value));
-  function open() {
-    addInstance(mappedId.value);
-  }
-  function close() {
-    removeInstance(mappedId.value);
-  }
   function trapFocus() {
     if (focusTrap) {
       focusTrap.activate();
@@ -67,10 +57,6 @@ export function useModalApi(id, options) {
     );
   }
   return {
-    id: mappedId,
-    isActive,
-    open,
-    close,
     trapFocus,
     releaseFocus,
     lockScroll,

package/dist/plugins/MagicModal/src/composables/useMagicModal.d.ts

@@ -0,0 +1,6 @@
+import { type MaybeRef } from 'vue';
+export declare function useMagicModal(id: MaybeRef<string>): {
+    isActive: import("vue").ComputedRef<boolean>;
+    open: () => void;
+    close: () => void;
+};

package/dist/plugins/MagicModal/src/composables/useMagicModal.mjs

@@ -0,0 +1,17 @@
+import { computed, toValue } from "vue";
+import { useModalStore } from "./private/useModalStore.mjs";
+export function useMagicModal(id) {
+  const { modalStore, addInstance, removeInstance } = useModalStore();
+  const isActive = computed(() => modalStore.value.includes(toValue(id)));
+  function open() {
+    addInstance(toValue(id));
+  }
+  function close() {
+    removeInstance(toValue(id));
+  }
+  return {
+    isActive,
+    open,
+    close
+  };
+}

package/dist/plugins/MagicNoise/index.d.ts

@@ -1,5 +1,5 @@
 import type { Plugin } from 'vue';
 import MagicNoise from './src/components/MagicNoise.vue.js';
-import { useNoiseApi } from './src/composables/useNoiseApi.js';
+import { useNoiseApi } from './src/composables/private/useNoiseApi.js';
 declare const MagicNoisePlugin: Plugin;
 export { MagicNoisePlugin, MagicNoise, useNoiseApi };

package/dist/plugins/MagicNoise/index.mjs

@@ -1,5 +1,5 @@
 import MagicNoise from "./src/components/MagicNoise.vue";
-import { useNoiseApi } from "./src/composables/useNoiseApi.mjs";
+import { useNoiseApi } from "./src/composables/private/useNoiseApi.mjs";
 const MagicNoisePlugin = {
   install: (app) => {
     app.component("MagicNoise", MagicNoise);

package/dist/plugins/MagicNoise/nuxt.mjs

@@ -1,8 +1,7 @@
 import {
   defineNuxtModule,
   createResolver,
-  addComponent,
-  addImports
+  addComponent
 } from "@nuxt/kit";
 export default defineNuxtModule({
   meta: {
@@ -15,9 +14,5 @@ export default defineNuxtModule({
       name: "MagicNoise",
       global: true
     });
-    addImports({
-      from: "@maas/vue-equipment/plugins/MagicNoise",
-      name: "useNoiseApi"
-    });
   }
 });

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

@@ -10,7 +10,7 @@
 <script lang="ts" setup>
 import { onMounted, onUnmounted, watch, shallowRef } from 'vue'
 import { useResizeObserver, useDebounceFn } from '@vueuse/core'
-import { useNoiseApi } from '../composables/useNoiseApi'
+import { useNoiseApi } from '../composables/private/useNoiseApi'
 import type { NoiseOptions } from '../types'
 
 interface Props {
@@ -52,7 +52,7 @@ watch(
       drawControls.value?.resume()
       transferControls.value?.resume()
     }
-  },
+  }
 )
 
 onMounted(() => {

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

@@ -1,5 +1,5 @@
 import { type Ref, type MaybeRef } from 'vue';
-import type { NoiseOptions, RafControls } from '../types.js';
+import type { NoiseOptions, RafControls } from '../../types.js';
 type UseNoiseApiArgs = {
     canvasRef: Ref<HTMLCanvasElement | undefined>;
     offCanvasRef: Ref<HTMLCanvasElement | undefined>;

package/dist/plugins/MagicNoise/src/composables/{useNoiseApi.mjs → private/useNoiseApi.mjs}

@@ -6,7 +6,7 @@ import {
   useThrottleFn,
   useRafFn
 } from "@vueuse/core";
-import { defaultOptions } from "../utils/defaultOptions.mjs";
+import { defaultOptions } from "../../utils/defaultOptions.mjs";
 export function useNoiseApi({
   canvasRef,
   offCanvasRef,

package/dist/plugins/MagicPlayer/index.d.ts

@@ -6,7 +6,7 @@ import MagicPlayerMuxPopover from './src/components/MagicPlayerMuxPopover.vue.js
 import MagicPlayerOverlay from './src/components/MagicPlayerOverlay.vue.js';
 import MagicPlayerPoster from './src/components/MagicPlayerPoster.vue.js';
 import MagicPlayerTimeline from './src/components/MagicPlayerTimeline.vue.js';
-import { usePlayerApi } from './src/composables/usePlayerApi.js';
+import { useMagicPlayer } from './src/composables/useMagicPlayer.js';
 declare const MagicPlayerPlugin: Plugin;
-export { MagicPlayerPlugin, MagicPlayer, MagicPlayerControls, MagicPlayerDisplayTime, MagicPlayerMuxPopover, MagicPlayerPoster, MagicPlayerOverlay, MagicPlayerTimeline, usePlayerApi, };
+export { MagicPlayerPlugin, MagicPlayer, MagicPlayerControls, MagicPlayerDisplayTime, MagicPlayerMuxPopover, MagicPlayerPoster, MagicPlayerOverlay, MagicPlayerTimeline, useMagicPlayer, };
 export type * from './src/types/index';

package/dist/plugins/MagicPlayer/index.mjs

@@ -6,7 +6,7 @@ import MagicPlayerMuxPopover from "./src/components/MagicPlayerMuxPopover.vue";
 import MagicPlayerOverlay from "./src/components/MagicPlayerOverlay.vue";
 import MagicPlayerPoster from "./src/components/MagicPlayerPoster.vue";
 import MagicPlayerTimeline from "./src/components/MagicPlayerTimeline.vue";
-import { usePlayerApi } from "./src/composables/usePlayerApi.mjs";
+import { useMagicPlayer } from "./src/composables/useMagicPlayer.mjs";
 const MagicPlayerPlugin = {
   install: (app) => {
     app.component("MagicAudioPlayer", MagicAudioPlayer);
@@ -28,5 +28,5 @@ export {
   MagicPlayerPoster,
   MagicPlayerOverlay,
   MagicPlayerTimeline,
-  usePlayerApi
+  useMagicPlayer
 };

package/dist/plugins/MagicPlayer/nuxt.mjs

@@ -18,7 +18,7 @@ export default defineNuxtModule({
     });
     addImports({
       from: "@maas/vue-equipment/plugins/MagicPlayer",
-      name: "usePlayerApi"
+      name: "useMagicPlayer"
     });
   }
 });

package/dist/plugins/MagicPlayer/src/composables/{usePlayerApi.d.ts → useMagicPlayer.d.ts}

@@ -2,7 +2,7 @@ import type { MaybeRef } from '@vueuse/core';
 type usePlayerApiArgs = {
     id: MaybeRef<string>;
 };
-export declare function usePlayerApi(args: usePlayerApiArgs): {
+export declare function useMagicPlayer(args: usePlayerApiArgs): {
     mediaApi: {
         currentTime: import("vue").Ref<number>;
         remainingTime: import("vue").ComputedRef<number>;
@@ -64,5 +64,5 @@ export declare function usePlayerApi(args: usePlayerApiArgs): {
         destroy: () => void;
     };
 };
-export type UsePlayerApiApiReturn = ReturnType<typeof usePlayerApi>;
+export type UseMagicPlayerReturn = ReturnType<typeof useMagicPlayer>;
 export {};

package/dist/plugins/MagicPlayer/src/composables/{usePlayerApi.mjs → useMagicPlayer.mjs}

@@ -2,7 +2,7 @@ import { usePlayerMediaApi } from "./private/usePlayerMediaApi.mjs";
 import { usePlayerVideoApi } from "./private/usePlayerVideoApi.mjs";
 import { usePlayerRuntime } from "./private/usePlayerRuntime.mjs";
 import { usePlayerControlsApi } from "./private/usePlayerControlsApi.mjs";
-export function usePlayerApi(args) {
+export function useMagicPlayer(args) {
   const mediaApi = usePlayerMediaApi({ id: args.id });
   const videoApi = usePlayerVideoApi({ id: args.id });
   const controlsApi = usePlayerControlsApi({ id: args.id });

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

@@ -3,12 +3,10 @@ import MagicScrollScene from './src/components/MagicScrollScene.vue.js';
 import MagicScrollTransform from './src/components/MagicScrollTransform.vue.js';
 import MagicScrollMotion from './src/components/MagicScrollMotion.vue.js';
 import MagicScrollCollision from './src/components/MagicScrollCollision.vue.js';
-import { useCollisionEmitter } from './src/composables/useCollisionEmitter.js';
-import { useScrollApi } from './src/composables/useScrollApi.js';
 import { useCollisionDetect } from './src/composables/useCollisionDetect.js';
-import { ScrollParentKey, ScrollPositionKey, ScrollProgressKey } from './src/symbols/index.js';
+import { MagicScrollParent, MagicScrollProgress, MagicScrollReturn } from './src/symbols/index.js';
 import type { Plugin } from 'vue';
 declare const MagicScrollPlugin: Plugin;
-export { MagicScrollPlugin, MagicScrollProvider, MagicScrollScene, MagicScrollTransform, MagicScrollMotion, MagicScrollCollision, useCollisionEmitter, useScrollApi, useCollisionDetect, ScrollParentKey, ScrollPositionKey, ScrollProgressKey, };
+export { MagicScrollPlugin, MagicScrollProvider, MagicScrollScene, MagicScrollTransform, MagicScrollMotion, MagicScrollCollision, useCollisionDetect, MagicScrollParent, MagicScrollProgress, MagicScrollReturn, };
 export * from './src/symbols/index.js';
 export type * from './src/types/index';

package/dist/plugins/MagicScroll/index.mjs

@@ -3,13 +3,11 @@ import MagicScrollScene from "./src/components/MagicScrollScene.vue";
 import MagicScrollTransform from "./src/components/MagicScrollTransform.vue";
 import MagicScrollMotion from "./src/components/MagicScrollMotion.vue";
 import MagicScrollCollision from "./src/components/MagicScrollCollision.vue";
-import { useCollisionEmitter } from "./src/composables/useCollisionEmitter.mjs";
-import { useScrollApi } from "./src/composables/useScrollApi.mjs";
 import { useCollisionDetect } from "./src/composables/useCollisionDetect.mjs";
 import {
-  ScrollParentKey,
-  ScrollPositionKey,
-  ScrollProgressKey
+  MagicScrollParent,
+  MagicScrollProgress,
+  MagicScrollReturn
 } from "./src/symbols/index.mjs";
 const MagicScrollPlugin = {
   install: (app) => {
@@ -27,11 +25,9 @@ export {
   MagicScrollTransform,
   MagicScrollMotion,
   MagicScrollCollision,
-  useCollisionEmitter,
-  useScrollApi,
   useCollisionDetect,
-  ScrollParentKey,
-  ScrollPositionKey,
-  ScrollProgressKey
+  MagicScrollParent,
+  MagicScrollProgress,
+  MagicScrollReturn
 };
 export * from "./src/symbols/index.mjs";

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

@@ -8,7 +8,7 @@
 import { ref, inject, computed, onMounted } from 'vue'
 import { toValue } from '@vueuse/core'
 import { useCollisionDetect } from '../composables/useCollisionDetect'
-import { ScrollPositionKey } from '../symbols'
+import { MagicScrollReturn } from '../symbols'
 
 import type { CollisionEntry } from '../types'
 
@@ -19,8 +19,8 @@ interface Props {
 const props = defineProps<Props>()
 const targetRef = ref<HTMLElement | undefined>(undefined)
 
-const scrollPosition = inject(ScrollPositionKey, undefined)
-const pageYOffset = computed(() => toValue(scrollPosition?.y) || 0)
+const scrollReturn = inject(MagicScrollReturn, undefined)
+const pageYOffset = computed(() => toValue(scrollReturn?.y) || 0)
 
 onMounted(() => {
   useCollisionDetect(pageYOffset, props.collisionEntries, toValue(targetRef))

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

@@ -13,7 +13,7 @@ import {
   type AnimationControls,
   type Easing,
 } from 'motion'
-import { ScrollProgressKey } from '../symbols'
+import { MagicScrollProgress } from '../symbols'
 
 interface Props {
   keyframes?: MotionKeyframesDefinition
@@ -30,7 +30,7 @@ const animation = ref<AnimationControls | undefined>(undefined)
 const elRef = ref<HTMLElement | undefined>(undefined)
 
 const progress = inject(
-  ScrollProgressKey,
+  MagicScrollProgress,
   computed(() => 0)
 )
 

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

@@ -1,6 +1,6 @@
 <template>
   <div class="magic-scroll-provider">
-    <slot :scroll-position="scrollPosition" />
+    <slot :scroll-return="scrollReturn" />
   </div>
 </template>
 
@@ -11,7 +11,7 @@ import {
   unrefElement,
   type MaybeComputedElementRef,
 } from '@vueuse/core'
-import { ScrollPositionKey, ScrollParentKey } from '../symbols'
+import { MagicScrollReturn, MagicScrollParent } from '../symbols'
 
 interface Props {
   active?: Boolean
@@ -33,8 +33,8 @@ const mappedParent = computed(() => {
   return undefined
 })
 
-const scrollPosition = useScroll(mappedEl)
+const scrollReturn = useScroll(mappedEl)
 
-provide(ScrollPositionKey, scrollPosition)
-provide(ScrollParentKey, mappedParent)
+provide(MagicScrollReturn, scrollReturn)
+provide(MagicScrollParent, mappedParent)
 </script>

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

@@ -11,7 +11,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     active: Boolean;
 }, {}>, {
     default?(_: {
-        scrollPosition: {
+        scrollReturn: {
             x: import("vue").WritableComputedRef<number>;
             y: import("vue").WritableComputedRef<number>;
             isScrolling: import("vue").Ref<boolean>;

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

@@ -7,11 +7,11 @@
 <script setup lang="ts">
 import { ref, provide, inject, onMounted, watch, nextTick, readonly } from 'vue'
 import { useIntersectionObserver } from '@vueuse/core'
-import { useScrollApi } from '../composables/useScrollApi'
+import { useScrollApi } from '../composables/private/useScrollApi'
 import {
-  ScrollPositionKey,
-  ScrollParentKey,
-  ScrollProgressKey,
+  MagicScrollParent,
+  MagicScrollProgress,
+  MagicScrollReturn,
 } from '../symbols'
 
 import type { FromTo } from '../types'
@@ -27,8 +27,8 @@ const props = withDefaults(defineProps<Props>(), {
   to: 'bottom-top',
 })
 
-const scrollPosition = inject(ScrollPositionKey, undefined)
-const scrollParent = inject(ScrollParentKey)
+const scrollReturn = inject(MagicScrollReturn, undefined)
+const scrollParent = inject(MagicScrollParent)
 
 const elRef = ref<HTMLElement | undefined>(undefined)
 const progress = ref(0)
@@ -52,7 +52,7 @@ onMounted(() => {
 })
 
 watch(
-  () => scrollPosition?.y.value,
+  () => scrollReturn?.y.value,
   () => {
     if (intersecting.value) {
       calculate()
@@ -71,5 +71,5 @@ useIntersectionObserver(
   { rootMargin: '150% 0px 150% 0px', immediate: true }
 )
 
-provide(ScrollProgressKey, readonly(progress))
+provide(MagicScrollProgress, readonly(progress))
 </script>

package/dist/plugins/MagicScroll/src/composables/{useScrollApi.d.ts → private/useScrollApi.d.ts}

@@ -1,5 +1,5 @@
 import { type MaybeRef, type MaybeRefOrGetter } from 'vue';
-import type { FromTo } from '../types.js';
+import type { FromTo } from '../../types.js';
 type UseScrollApiParams = {
     child: MaybeRef<HTMLElement | null | undefined>;
     parent: MaybeRefOrGetter<HTMLElement | null | undefined>;

package/dist/plugins/MagicScroll/src/composables/{useScrollApi.mjs → private/useScrollApi.mjs}

@@ -1,10 +1,10 @@
 import { ref, inject, toValue } from "vue";
 import { useWindowSize } from "@vueuse/core";
-import { ScrollPositionKey } from "../symbols/index.mjs";
+import { MagicScrollReturn } from "../../symbols/index.mjs";
 import { clampValue } from "@maas/vue-equipment/utils";
 export function useScrollApi(params) {
   const { child, parent, from, to } = params;
-  const scrollPosition = inject(ScrollPositionKey, void 0);
+  const scrollReturn = inject(MagicScrollReturn, void 0);
   const childRect = ref();
   const parentRect = ref();
   const start = ref(0);
@@ -19,7 +19,7 @@ export function useScrollApi(params) {
     let y = 0;
     if (!childRect.value)
       return y;
-    const scrollY = toValue(scrollPosition?.y) || 0;
+    const scrollY = toValue(scrollReturn?.y) || 0;
     switch (points.child) {
       case "top":
         y += childRect.value.top + scrollY;
@@ -61,7 +61,7 @@ export function useScrollApi(params) {
     end.value = getOffsetTop(splitLocation(to));
   }
   function getProgress() {
-    const scrollY = toValue(scrollPosition?.y) || 0;
+    const scrollY = toValue(scrollReturn?.y) || 0;
     const total = Math.abs(end.value - start.value);
     const current = scrollY - start.value;
     return clampValue(current / total, 0, 1);

package/dist/plugins/MagicScroll/src/composables/useCollisionDetect.mjs

@@ -1,6 +1,6 @@
 import { ref, watch, unref, computed } from "vue";
 import { useIntersectionObserver, useWindowSize } from "@vueuse/core";
-import { useCollisionEmitter } from "./useCollisionEmitter.mjs";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins";
 export function useCollisionDetect(pageYOffset, collisionEntries, parent) {
   const scrolled = ref(0);
   const intersecting = ref();
@@ -88,7 +88,7 @@ export function useCollisionDetect(pageYOffset, collisionEntries, parent) {
       return;
     if (dir === "down" && boundingRect[pos] <= offset || dir === "up" && boundingRect[pos] >= offset) {
       entry.alerted[dir][pos] = true;
-      useCollisionEmitter().emit("collision", {
+      useMagicEmitter().emit("collision", {
         dir,
         pos,
         el: entry.element,

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

@@ -1,6 +1,7 @@
 import type { InjectionKey, Ref, MaybeRefOrGetter } from 'vue';
-declare const ScrollParentKey: InjectionKey<MaybeRefOrGetter<HTMLElement | undefined>>;
-declare const ScrollPositionKey: InjectionKey<{
+declare const MagicScrollParent: InjectionKey<MaybeRefOrGetter<HTMLElement | undefined>>;
+declare const MagicScrollProgress: InjectionKey<Ref<number>>;
+declare const MagicScrollReturn: InjectionKey<{
     x: import("vue").WritableComputedRef<number>;
     y: import("vue").WritableComputedRef<number>;
     isScrolling: Ref<boolean>;
@@ -18,5 +19,4 @@ declare const ScrollPositionKey: InjectionKey<{
     };
     measure(): void;
 } | undefined>;
-declare const ScrollProgressKey: InjectionKey<Ref<number>>;
-export { ScrollParentKey, ScrollPositionKey, ScrollProgressKey };
+export { MagicScrollParent, MagicScrollProgress, MagicScrollReturn };

package/dist/plugins/MagicScroll/src/symbols/index.mjs

@@ -1,4 +1,4 @@
-const ScrollParentKey = Symbol();
-const ScrollPositionKey = Symbol();
-const ScrollProgressKey = Symbol();
-export { ScrollParentKey, ScrollPositionKey, ScrollProgressKey };
+const MagicScrollParent = Symbol();
+const MagicScrollProgress = Symbol();
+const MagicScrollReturn = Symbol();
+export { MagicScrollParent, MagicScrollProgress, MagicScrollReturn };

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

@@ -7,7 +7,7 @@ type CollisionEvents = {
         dir: 'up' | 'down';
         pos: 'top' | 'bottom';
         el: HTMLElement;
-        data?: Record<string, any>;
+        data?: Record<string, unknown>;
     };
 };
 interface CollisionEntry {
@@ -16,7 +16,7 @@ interface CollisionEntry {
         bottom: number | (() => number);
     };
     element?: string;
-    data: Record<string, any>;
+    data: Record<string, unknown>;
 }
 interface MappedCollisionEntry extends Omit<CollisionEntry, 'element'> {
     alerted: {

package/dist/plugins/MagicToast/index.d.ts

@@ -1,8 +1,7 @@
 import MagicToast from './src/components/MagicToast.vue.js';
-import { useToastApi } from './src/composables/useToastApi.js';
-import { useToastEmitter } from './src/composables/useToastEmitter.js';
+import { useMagicToast } from './src/composables/useMagicToast.js';
 import type { Plugin } from 'vue';
 import type { ToastEvents } from './src/types/index.js';
 declare const MagicToastPlugin: Plugin;
-export { MagicToastPlugin, MagicToast, useToastApi, useToastEmitter };
+export { MagicToastPlugin, MagicToast, useMagicToast };
 export type { ToastEvents };

package/dist/plugins/MagicToast/index.mjs

@@ -1,9 +1,8 @@
 import MagicToast from "./src/components/MagicToast.vue";
-import { useToastApi } from "./src/composables/useToastApi.mjs";
-import { useToastEmitter } from "./src/composables/useToastEmitter.mjs";
+import { useMagicToast } from "./src/composables/useMagicToast.mjs";
 const MagicToastPlugin = {
   install: (app) => {
     app.component("MagicToast", MagicToast);
   }
 };
-export { MagicToastPlugin, MagicToast, useToastApi, useToastEmitter };
+export { MagicToastPlugin, MagicToast, useMagicToast };

package/dist/plugins/MagicToast/nuxt.mjs

@@ -19,9 +19,5 @@ export default defineNuxtModule({
       from: "@maas/vue-equipment/plugins/MagicToast",
       name: "useToastApi"
     });
-    addImports({
-      from: "@maas/vue-equipment/plugins/MagicToast",
-      name: "useToastEmitter"
-    });
   }
 });

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

@@ -55,8 +55,9 @@ import { defu } from 'defu'
 import { onClickOutside, type MaybeElement } from '@vueuse/core'
 import { uuid } from '@maas/vue-equipment/utils'
 import { defaultOptions } from './../utils/defaultOptions'
-import { useToastApi } from './../composables/useToastApi'
+import { useToastApi } from '../composables/private/useToastApi'
 import { useToastCallback } from './../composables/private/useToastCallback'
+import { useMagicToast } from '../composables/useMagicToast'
 
 import MagicToastComponent from './MagicToastComponent.vue'
 
@@ -76,7 +77,8 @@ interface MagicToastProps {
 
 const props = defineProps<MagicToastProps>()
 
-const { toasts, count, oldest, initialize, destroy } = useToastApi(props.id)
+const { initialize, destroy } = useToastApi(props.id)
+const { toasts, count, firstToast } = useMagicToast(props.id)
 
 const mappedOptions = defu(props.options, defaultOptions)
 const isExpanded = ref(mappedOptions.layout?.expand === true)
@@ -91,7 +93,7 @@ const {
   onLeave,
   onAfterLeave,
   activeElements,
-} = useToastCallback({ id: props.id, mappedOptions, count, oldest })
+} = useToastCallback({ id: props.id, mappedOptions, count, firstToast })
 
 function onMouseenter() {
   if (mappedOptions.layout?.expand === 'hover') {

package/dist/plugins/MagicToast/src/composables/private/useToastApi.d.ts

@@ -0,0 +1,5 @@
+import { type MaybeRef } from 'vue';
+export declare function useToastApi(id: MaybeRef<string>): {
+    initialize: () => import("../../types").ToastInstance | undefined;
+    destroy: (id: string) => void;
+};

package/dist/plugins/MagicToast/src/composables/private/useToastApi.mjs

@@ -0,0 +1,23 @@
+import { toValue } from "vue";
+import { useToastStore } from "./useToastStore.mjs";
+import { useMagicToast } from "../useMagicToast.mjs";
+export function useToastApi(id) {
+  const { findInstance, addInstance, removeInstance } = useToastStore();
+  const { clear } = useMagicToast(toValue(id));
+  function initialize() {
+    const mappedId = toValue(id);
+    if (!findInstance(mappedId)) {
+      return addInstance(mappedId);
+    }
+  }
+  function destroy(id2) {
+    if (!id2)
+      return;
+    clear();
+    removeInstance(toValue(id2));
+  }
+  return {
+    initialize,
+    destroy
+  };
+}

package/dist/plugins/MagicToast/src/composables/private/useToastCallback.d.ts

@@ -1,12 +1,12 @@
 import { type Ref, type MaybeRef } from 'vue';
 import type { ToastOptions, Toast } from './../../types.js';
-type Args = {
+type UseToastCallbackArgs = {
     id: MaybeRef<string>;
     mappedOptions: ToastOptions;
     count: Ref<number | undefined>;
-    oldest: Ref<Toast | undefined>;
+    firstToast: Ref<Toast | undefined>;
 };
-export declare function useToastCallback({ id, mappedOptions, count, oldest }: Args): {
+export declare function useToastCallback(args: UseToastCallbackArgs): {
     onBeforeEnter: (_el: Element) => void;
     onEnter: (_el: Element) => void;
     onAfterEnter: (el: Element) => void;

package/dist/plugins/MagicToast/src/composables/private/useToastCallback.mjs

@@ -1,18 +1,20 @@
 import { ref, toValue } from "vue";
-import { useToastEmitter } from "./../useToastEmitter.mjs";
-export function useToastCallback({ id, mappedOptions, count, oldest }) {
+import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+export function useToastCallback(args) {
+  const { id, mappedOptions, count, firstToast } = args;
   const activeElements = ref([]);
+  const emitter = useMagicEmitter();
   function onBeforeEnter(_el) {
-    useToastEmitter().emit("beforeEnter", toValue(id));
+    emitter.emit("beforeEnter", toValue(id));
   }
   function onEnter(_el) {
-    useToastEmitter().emit("enter", toValue(id));
+    emitter.emit("enter", toValue(id));
     if (count.value && mappedOptions.layout?.max && count.value > mappedOptions.layout.max) {
-      oldest.value?.remove();
+      firstToast.value?.remove();
     }
   }
   function onAfterEnter(el) {
-    useToastEmitter().emit("afterEnter", toValue(id));
+    emitter.emit("afterEnter", toValue(id));
     const mappedEl = el;
     const style = window.getComputedStyle(mappedEl);
     activeElements.value = [
@@ -28,16 +30,16 @@ export function useToastCallback({ id, mappedOptions, count, oldest }) {
     ];
   }
   function onBeforeLeave(_el) {
-    useToastEmitter().emit("beforeLeave", toValue(id));
+    emitter.emit("beforeLeave", toValue(id));
   }
   function onLeave(el) {
-    useToastEmitter().emit("leave", toValue(id));
+    emitter.emit("leave", toValue(id));
     activeElements.value = activeElements.value.filter(
       (item) => item.id !== el.id
     );
   }
   function onAfterLeave(_el) {
-    useToastEmitter().emit("afterLeave", toValue(id));
+    emitter.emit("afterLeave", toValue(id));
   }
   return {
     onBeforeEnter,