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

package/dist/plugins/MagicMenu/src/components/MagicMenuTrigger.vue.d.ts

@@ -7,175 +7,21 @@ interface MagicMenuTriggerProps {
     trigger?: Interaction[];
     asChild?: boolean;
 }
-declare const elRef: import("vue").Ref<import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-    asChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    as: {
-        type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-        default: string;
-    };
-}>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-    asChild: boolean;
-    as: import("@maas/vue-primitive").ElementOrComponent;
-}, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-    P: {};
-    B: {};
-    D: {};
-    C: {};
-    M: {};
-    Defaults: {};
-}, Readonly<import("vue").ExtractPropTypes<{
-    asChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    as: {
-        type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-        default: string;
-    };
-}>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, {
-    asChild: boolean;
-    as: import("@maas/vue-primitive").ElementOrComponent;
-}> | undefined, import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-    asChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    as: {
-        type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-        default: string;
-    };
-}>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-    asChild: boolean;
-    as: import("@maas/vue-primitive").ElementOrComponent;
-}, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-    P: {};
-    B: {};
-    D: {};
-    C: {};
-    M: {};
-    Defaults: {};
-}, Readonly<import("vue").ExtractPropTypes<{
-    asChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    as: {
-        type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-        default: string;
-    };
-}>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, {
-    asChild: boolean;
-    as: import("@maas/vue-primitive").ElementOrComponent;
-}> | undefined>;
 declare const mappedViewId: import("vue").ComputedRef<string | undefined>;
 declare const view: import("../types").MenuView | undefined;
 declare const mappedDisabled: import("vue").ComputedRef<boolean>;
 declare const mappedTabindex: import("vue").ComputedRef<0 | undefined>;
 declare const onMouseenter: () => void, onClick: (e: MouseEvent) => void;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare const __VLS_0: import("vue").DefineComponent<{
-    asChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    as: {
-        type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-        default: string;
-    };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    asChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    as: {
-        type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-        default: string;
-    };
-}>>, {
-    asChild: boolean;
-    as: import("@maas/vue-primitive").ElementOrComponent;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_2: import("vue/jsx-runtime").JSX.Element & {
-    __ctx?: ({
-        attrs?: any;
-        slots?: Readonly<{
-            [name: string]: import("vue").Slot<any> | undefined;
-        }> | undefined;
-        emit?: ((event: string, ...args: any[]) => void) | undefined;
-    } & {
-        props?: (Partial<{
-            asChild: boolean;
-            as: import("@maas/vue-primitive").ElementOrComponent;
-        }> & Omit<{
-            readonly asChild: boolean;
-            readonly as: import("@maas/vue-primitive").ElementOrComponent;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "asChild" | "as"> & Record<string, unknown>) | undefined;
-        expose?(exposed: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-            asChild: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            as: {
-                type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-                default: string;
-            };
-        }>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-            asChild: boolean;
-            as: import("@maas/vue-primitive").ElementOrComponent;
-        }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<import("vue").ExtractPropTypes<{
-            asChild: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            as: {
-                type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-                default: string;
-            };
-        }>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>, {}, {}, {}, {
-            asChild: boolean;
-            as: import("@maas/vue-primitive").ElementOrComponent;
-        }>): void;
-    }) | undefined;
-};
-declare var __VLS_6: (Parameters<NonNullable<(typeof __VLS_5)["expose"]>>[0] | null);
-declare var __VLS_11: {
+declare var __VLS_13: {
     viewActive: boolean | undefined;
     triggerDisabled: boolean;
 };
-declare var __VLS_5: __VLS_PickFunctionalComponentCtx<typeof __VLS_0, typeof __VLS_2>;
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    default?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_13) => any;
 }>;
-type __VLS_TemplateRefs = {
-    elRef: typeof __VLS_6;
-};
 declare const __VLS_self: import("vue").DefineComponent<MagicMenuTriggerProps, {
     Primitive: typeof Primitive;
-    elRef: typeof elRef;
     mappedViewId: typeof mappedViewId;
     view: typeof view;
     mappedDisabled: typeof mappedDisabled;
@@ -183,7 +29,7 @@ declare const __VLS_self: import("vue").DefineComponent<MagicMenuTriggerProps, {
     onMouseenter: typeof onMouseenter;
     onClick: typeof onClick;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<MagicMenuTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, __VLS_TemplateRefs, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicMenuTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuTriggerProps> & 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/MagicMenu/src/components/MagicMenuView.vue.d.ts

@@ -6,17 +6,17 @@ interface MagicMenuViewProps {
 declare const mappedId: import("vue").ComputedRef<string>;
 declare const view: import("../types").MenuView;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_0: {
+declare var __VLS_1: {
     viewActive: boolean;
 };
 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<MagicMenuViewProps, {
     mappedId: typeof mappedId;
     view: typeof view;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<MagicMenuViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component: import("vue").DefineComponent<MagicMenuViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuViewProps> & 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/MagicMenu/src/composables/private/useMenuCursor.d.ts

@@ -7,9 +7,9 @@ export declare function useMenuCursor(view: MenuView, debug?: boolean): {
         x: number;
         y: number;
     }[]>;
-    isInsideFrom: import("vue").Ref<boolean, boolean>;
-    isInsideTo: import("vue").Ref<boolean, boolean>;
-    isInsideTriangle: import("vue").Ref<boolean, boolean>;
+    isInsideFrom: import("vue").ShallowRef<boolean, boolean>;
+    isInsideTo: import("vue").ShallowRef<boolean, boolean>;
+    isInsideTriangle: import("vue").ShallowRef<boolean, boolean>;
     initialize: () => void;
     destroy: () => void;
 };

package/dist/plugins/MagicMenu/src/composables/private/useMenuCursor.mjs

@@ -1,4 +1,4 @@
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { useEventListener } from "@vueuse/core";
 export function useMenuCursor(view, debug = false) {
   let cancelListener = new AbortController();
@@ -7,9 +7,9 @@ export function useMenuCursor(view, debug = false) {
     { x: 0, y: 0 },
     { x: 0, y: 0 }
   ]);
-  const isInsideFrom = ref(false);
-  const isInsideTo = ref(false);
-  const isInsideTriangle = ref(false);
+  const isInsideFrom = shallowRef(false);
+  const isInsideTo = shallowRef(false);
+  const isInsideTriangle = shallowRef(false);
   function extendTriangle(vertices, pixelAmount) {
     const [a, b, c] = vertices;
     switch (view?.placement) {

package/dist/plugins/MagicMenu/src/composables/private/useMenuDOM.mjs

@@ -1,7 +1,7 @@
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { useScrollLock } from "@vueuse/core";
 import { matchClass } from "@maas/vue-equipment/utils";
-const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : ref(false);
+const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
 export function useMenuDOM() {
   const positionFixedElements = ref([]);
   function lockScroll() {

package/dist/plugins/MagicMenu/src/composables/private/useMenuTrigger.d.ts

@@ -7,7 +7,7 @@ type UseMenuTriggerArgs = {
     itemId?: string;
     mappedDisabled: ComputedRef<boolean>;
     mappedTrigger: ComputedRef<Interaction[]>;
-    elRef: Ref<InstanceType<typeof Primitive> | undefined>;
+    elRef: Ref<InstanceType<typeof Primitive> | null>;
 };
 export declare function useMenuTrigger(args: UseMenuTriggerArgs): {
     onMouseenter: () => void;

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

@@ -1,11 +1,11 @@
-import type { InjectionKey, MaybeRef } from 'vue';
+import type { InjectionKey, MaybeRef, Ref } from 'vue';
 declare const MagicMenuInstanceId: InjectionKey<MaybeRef<string>>;
 declare const MagicMenuParentTree: InjectionKey<string[]>;
 declare const MagicMenuViewId: InjectionKey<string>;
-declare const MagicMenuViewActive: InjectionKey<MaybeRef<boolean>>;
+declare const MagicMenuViewActive: InjectionKey<Ref<boolean>>;
 declare const MagicMenuContentId: InjectionKey<string>;
 declare const MagicMenuItemId: InjectionKey<string>;
-declare const MagicMenuItemActive: InjectionKey<MaybeRef<boolean>>;
+declare const MagicMenuItemActive: InjectionKey<Ref<boolean>>;
 declare const MagicMenuChannelId: InjectionKey<string>;
-declare const MagicMenuChannelActive: InjectionKey<MaybeRef<boolean>>;
+declare const MagicMenuChannelActive: InjectionKey<Ref<boolean>>;
 export { MagicMenuInstanceId, MagicMenuParentTree, MagicMenuViewId, MagicMenuViewActive, MagicMenuContentId, MagicMenuItemId, MagicMenuItemActive, MagicMenuChannelId, MagicMenuChannelActive, };

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

@@ -3,7 +3,8 @@ import { defineComponent as _defineComponent } from "vue";
 import { unref as _unref, renderSlot as _renderSlot, vShow as _vShow, withModifiers as _withModifiers, createElementVNode as _createElementVNode, withDirectives as _withDirectives, Transition as _Transition, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, resolveDynamicComponent as _resolveDynamicComponent, createVNode as _createVNode, mergeProps as _mergeProps, Teleport as _Teleport } from "vue";
 const _hoisted_1 = ["data-id"];
 import {
-  ref,
+  useTemplateRef,
+  shallowRef,
   watch,
   nextTick,
   toValue,
@@ -36,7 +37,7 @@ export default /* @__PURE__ */ _defineComponent({
       }
     });
     const mappedOptions = customDefu(__props.options, defaultOptions);
-    const modalRef = ref(void 0);
+    const modalRef = useTemplateRef("modal");
     const {
       trapFocus,
       releaseFocus,
@@ -49,8 +50,8 @@ export default /* @__PURE__ */ _defineComponent({
       focusTrap: mappedOptions.focusTrap
     });
     const { isActive, close } = useMagicModal(__props.id);
-    const innerActive = ref(false);
-    const wrapperActive = ref(false);
+    const innerActive = shallowRef(false);
+    const wrapperActive = shallowRef(false);
     const {
       onBeforeEnter,
       onEnter,
@@ -113,8 +114,7 @@ export default /* @__PURE__ */ _defineComponent({
         disabled: _unref(mappedOptions).teleport?.disabled
       }, [
         _createElementVNode("div", _mergeProps({
-          ref_key: "modalRef",
-          ref: modalRef,
+          ref: "modal",
           class: "magic-modal",
           "data-id": toValue(_ctx.id)
         }, _ctx.$attrs, {

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: "dialog" | "div";
+    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,4 +1,4 @@
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { defu } from "defu";
 import { useScrollLock } from "@vueuse/core";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
@@ -8,7 +8,7 @@ const defaultOptions = {
   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);

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";
@@ -40,8 +48,8 @@ export default /* @__PURE__ */ _defineComponent({
         "MagicAudioPlayerControls must be nested inside MagicAudioPlayer or be passed an id as a prop."
       );
     }
-    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
     });
@@ -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" })
               ])
             ],