@maas/vue-equipment 1.0.0-beta.33 → 1.0.0-beta.35

package/dist/plugins/MagicError/src/class/MagicError.d.ts

@@ -0,0 +1,6 @@
+export declare class MagicError extends Error {
+    readonly errorCode: string | number;
+    readonly timestamp: number;
+    readonly source: string;
+    constructor(message: string, errorCode: string | number, source: string, options?: ErrorOptions);
+}

package/dist/plugins/MagicError/src/class/MagicError.mjs

@@ -0,0 +1,15 @@
+export class MagicError extends Error {
+  errorCode;
+  timestamp;
+  source;
+  constructor(message, errorCode, source, options) {
+    super(message, options);
+    this.name = "MagicError";
+    this.errorCode = errorCode;
+    this.timestamp = Date.now();
+    this.source = source;
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, MagicError);
+    }
+  }
+}

package/dist/plugins/MagicError/src/composables/useMagicError.d.ts

@@ -0,0 +1,18 @@
+import { MagicError } from '../class/MagicError.js';
+export interface UseMagicErrorArgs {
+    prefix?: string;
+    source?: string;
+}
+export interface ThrowErrorArgs {
+    message: string;
+    errorCode: string | number;
+    cause?: unknown;
+}
+export interface UseMagicErrorReturn {
+    assert<T>(value: T, args: ThrowErrorArgs): asserts value is NonNullable<T>;
+    throwError(args: ThrowErrorArgs): never;
+    logError(message: string): void;
+    logWarning(message: string): void;
+    MagicError: typeof MagicError;
+}
+export declare function useMagicError(args?: UseMagicErrorArgs): UseMagicErrorReturn;

package/dist/plugins/MagicError/src/composables/useMagicError.mjs

@@ -0,0 +1,31 @@
+import { MagicError } from "../class/MagicError.mjs";
+export function useMagicError(args = {}) {
+  const { prefix = "MagicError", source = "vue-equipment" } = args;
+  function logError(message) {
+    console.error(`[${prefix}]:`, message);
+  }
+  function logWarning(message) {
+    console.warn(`[${prefix}]:`, message);
+  }
+  function throwError(args2) {
+    const { message, errorCode, cause } = args2;
+    const mappedMessage = `[${prefix}]: ${message}`;
+    const error = new MagicError(mappedMessage, errorCode, source, {
+      cause
+    });
+    logError(message);
+    throw error;
+  }
+  function assert(value, args2) {
+    if (value === void 0 || value === null) {
+      throwError(args2);
+    }
+  }
+  return {
+    assert,
+    throwError,
+    logError,
+    logWarning,
+    MagicError
+  };
+}

package/dist/plugins/MagicMenu/src/components/MagicMenuChannel.vue

@@ -13,6 +13,9 @@
 
 <script setup>
 import { computed, inject, provide } from "vue";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useMenuChannel } from "../composables/private/useMenuChannel";
 import {
   MagicMenuInstanceId,
@@ -26,23 +29,32 @@ const { transition, id } = defineProps({
   id: { type: String, required: true },
   transition: { type: String, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicMenu",
+  source: "MagicMenu"
+});
 const instanceId = inject(MagicMenuInstanceId, void 0);
 const viewId = inject(MagicMenuViewId, void 0);
 const contentId = inject(MagicMenuContentId, void 0);
-if (!instanceId) {
-  throw new Error("MagicMenuChannel must be nested inside MagicMenuProvider");
-}
-if (!viewId) {
-  throw new Error("MagicMenuChannel must be nested inside MagicMenuView");
-}
-if (!id) {
-  throw new Error("MagicMenuChannel requires an id");
-}
+magicError.assert(instanceId, {
+  message: "MagicMenuChannel must be nested inside MagicMenuProvider",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(viewId, {
+  message: "MagicMenuChannel must be nested inside MagicMenuView",
+  errorCode: "missing_view_id"
+});
+magicError.assert(id, {
+  message: "MagicMenuChannel requires an id",
+  errorCode: "id_required"
+});
 const { initializeState } = useMenuState(instanceId);
 const state = initializeState();
 if (!contentId) {
   if (state.options.debug) {
-    console.warn("MagicMenuChannel is not nested inside MagicMenuContent");
+    magicError.logWarning(
+      "MagicMenuChannel is not nested inside MagicMenuContent"
+    );
   }
 }
 const mappedId = computed(() => `magic-menu-channel-${id}`);

package/dist/plugins/MagicMenu/src/components/MagicMenuContent.vue

@@ -70,6 +70,9 @@ import { useMenuState } from "../composables/private/useMenuState";
 import { useMenuCallback } from "../composables/private/useMenuCallback";
 import { useMenuDOM } from "../composables/private/useMenuDOM";
 import { useMenuCursor } from "../composables/private/useMenuCursor";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { ModeTransitions } from "../utils/modeTransitionDefaults";
 import { ModeDelayMouseleave } from "../utils/modeDelayDefaults";
 import {
@@ -88,14 +91,20 @@ const { arrow = void 0, transition } = defineProps({
   transition: { type: String, required: false },
   referenceEl: { type: null, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicMenu",
+  source: "MagicMenu"
+});
 const instanceId = inject(MagicMenuInstanceId, void 0);
 const viewId = inject(MagicMenuViewId, void 0);
-if (!instanceId) {
-  throw new Error("MagicMenuContent must be nested inside MagicMenuProvider");
-}
-if (!viewId) {
-  throw new Error("MagicMenuContent must be nested inside MagicMenuView");
-}
+magicError.assert(instanceId, {
+  message: "MagicMenuContent must be nested inside MagicMenuProvider",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(viewId, {
+  message: "MagicMenuContent must be nested inside MagicMenuView",
+  errorCode: "missing_view_id"
+});
 const { getView, unselectView } = useMenuView(instanceId);
 const view = getView(viewId);
 const { initializeState } = useMenuState(instanceId);

package/dist/plugins/MagicMenu/src/components/MagicMenuItem.vue

@@ -18,6 +18,9 @@
 
 <script setup>
 import { computed, inject, provide, onBeforeUnmount, watch, useId } from "vue";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useMenuItem } from "../composables/private/useMenuItem";
 import { useMenuState } from "../composables/private/useMenuState";
 import { useMenuView } from "../composables/private/useMenuView";
@@ -33,18 +36,25 @@ const { id, disabled } = defineProps({
   disabled: { type: Boolean, required: false }
 });
 const emit = defineEmits(["click"]);
+const magicError = useMagicError({
+  prefix: "MagicMenu",
+  source: "MagicMenu"
+});
 const instanceId = inject(MagicMenuInstanceId, void 0);
 const viewId = inject(MagicMenuViewId, void 0);
 const contentId = inject(MagicMenuContentId, void 0);
-if (!instanceId) {
-  throw new Error("MagicMenuItem must be nested inside MagicMenuProvider");
-}
-if (!viewId) {
-  throw new Error("MagicMenuItem must be nested inside MagicMenuView");
-}
-if (!contentId) {
-  throw new Error("MagicMenuItem must be nested inside MagicMenuContent");
-}
+magicError.assert(instanceId, {
+  message: "MagicMenuItem must be nested inside MagicMenuProvider",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(viewId, {
+  message: "MagicMenuItem must be nested inside MagicMenuView",
+  errorCode: "missing_view_id"
+});
+magicError.assert(contentId, {
+  message: "MagicMenuItem must be nested inside MagicMenuContent",
+  errorCode: "missing_content_id"
+});
 const mappedId = computed(() => id ?? `magic-menu-item-${useId()}`);
 const mappedActive = computed(() => item.active);
 const { initializeItem, deleteItem, selectItem, unselectItem } = useMenuItem({

package/dist/plugins/MagicMenu/src/components/MagicMenuRemote.vue

@@ -15,6 +15,9 @@
 <script setup>
 import { computed, inject, watch } from "vue";
 import { Primitive } from "@maas/vue-primitive";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useMenuView } from "../composables/private/useMenuView";
 import { useMenuChannel } from "../composables/private/useMenuChannel";
 import { MagicMenuInstanceId, MagicMenuViewId } from "../symbols";
@@ -27,23 +30,26 @@ const { disabled, channelId, instanceId, viewId, trigger } = defineProps({
   trigger: { type: Array, required: false },
   asChild: { type: Boolean, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicMenu",
+  source: "MagicMenu"
+});
 const injectedInstanceId = inject(MagicMenuInstanceId, instanceId);
 const injectedViewId = inject(MagicMenuViewId, viewId);
 const mappedInstanceId = computed(() => instanceId ?? injectedInstanceId);
 const mappedViewId = computed(() => viewId ?? injectedViewId);
-if (!mappedInstanceId.value) {
-  throw new Error(
-    "MagicMenuRemote must be nested inside MagicMenuProvider or an instanceId must be provided"
-  );
-}
-if (!mappedViewId.value) {
-  throw new Error(
-    "MagicMenuRemote must be nested inside MagicMenuView or a viewId must be provided"
-  );
-}
-if (!channelId) {
-  throw new Error("MagicMenuRemote requires a channelId");
-}
+magicError.assert(mappedInstanceId.value, {
+  message: "MagicMenuRemote must be nested inside MagicMenuProvider or an instanceId must be provided",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(mappedViewId.value, {
+  message: "MagicMenuRemote must be nested inside MagicMenuView or a viewId must be provided",
+  errorCode: "missing_view_id"
+});
+magicError.assert(channelId, {
+  message: "MagicMenuRemote requires a channelId",
+  errorCode: "id_required"
+});
 const mappedChannelId = computed(() => `magic-menu-channel-${channelId}`);
 const mappedTrigger = computed(() => trigger ?? ["mouseenter"]);
 const { getView } = useMenuView(mappedInstanceId.value);

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

@@ -18,6 +18,9 @@
 <script setup>
 import { computed, inject, useTemplateRef, toValue, watch } from "vue";
 import { Primitive } from "@maas/vue-primitive";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useMenuState } from "../composables/private/useMenuState";
 import { useMenuView } from "../composables/private/useMenuView";
 import { useMenuItem } from "../composables/private/useMenuItem";
@@ -35,22 +38,24 @@ const { instanceId, viewId, disabled, trigger } = defineProps({
   trigger: { type: Array, required: false },
   asChild: { type: Boolean, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicMenu",
+  source: "MagicMenu"
+});
 const elRef = useTemplateRef("el");
 const injectedInstanceId = inject(MagicMenuInstanceId, void 0);
 const injectedViewId = inject(MagicMenuViewId, void 0);
 const itemId = inject(MagicMenuItemId, void 0);
 const mappedInstanceId = computed(() => instanceId ?? injectedInstanceId);
 const mappedViewId = computed(() => viewId ?? injectedViewId);
-if (!mappedInstanceId.value) {
-  throw new Error(
-    "MagicMenuRemote must be nested inside MagicMenuProvider or an instanceId must be provided"
-  );
-}
-if (!mappedViewId.value) {
-  throw new Error(
-    "MagicMenuTrigger must be nested inside MagicMenuView or a viewId must be provided"
-  );
-}
+magicError.assert(mappedInstanceId.value, {
+  message: "MagicMenuTrigger must be nested inside MagicMenuProvider or an instanceId must be provided",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(mappedViewId.value, {
+  message: "MagicMenuTrigger must be nested inside MagicMenuView or a viewId must be provided",
+  errorCode: "missing_view_id"
+});
 const { getView, getRelativeViewIndex } = useMenuView(mappedInstanceId.value);
 const view = getView(mappedViewId.value);
 const viewIndex = getRelativeViewIndex(mappedViewId.value);

package/dist/plugins/MagicMenu/src/components/MagicMenuView.vue

@@ -14,17 +14,25 @@ import {
   MagicMenuItemId,
   MagicMenuViewActive
 } from "../symbols";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useMenuState } from "../composables/private/useMenuState";
 const { id, placement } = defineProps({
   id: { type: String, required: false },
   placement: { type: null, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicMenu",
+  source: "MagicMenu"
+});
 const parentTree = inject(MagicMenuParentTree, []);
 const instanceId = inject(MagicMenuInstanceId, void 0);
 const itemId = inject(MagicMenuItemId, void 0);
-if (!instanceId) {
-  throw new Error("MagicMenuView must be nested inside MagicMenuProvider");
-}
+magicError.assert(instanceId, {
+  message: "MagicMenuView must be nested inside MagicMenuProvider",
+  errorCode: "missing_instance_id"
+});
 const mappedId = computed(() => id ?? `magic-menu-view-${useId()}`);
 const mappedParentTree = computed(() => [...parentTree, mappedId.value]);
 const mappedActive = computed(() => view.active);

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

@@ -1,5 +1,5 @@
 import { toValue } from "vue";
-import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 import { ModeScrollLock } from "../../utils/modeScrollLockDefaults.mjs";
 export function useMenuCallback(args) {
   const {

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

@@ -1,15 +1,23 @@
 import { reactive } from "vue";
 import { usePointer, watchOnce } from "@vueuse/core";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useMenuView } from "./useMenuView.mjs";
 import { useMenuState } from "./useMenuState.mjs";
 export function useMenuItem(args) {
   const { instanceId, viewId } = args;
+  const { throwError } = useMagicError({
+    prefix: "MagicMenu",
+    source: "useMenuItem"
+  });
   const { initializeState } = useMenuState(instanceId);
   const state = initializeState();
   const { getView, unselectDescendingViews } = useMenuView(instanceId);
   const view = getView(viewId);
   if (!view) {
-    throw new Error(`View ${viewId} not found`);
+    throwError({
+      message: `View ${viewId} not found`,
+      errorCode: "view_id_not_found"
+    });
   }
   function createItem(args2) {
     const { id, disabled } = args2;

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

@@ -1,10 +1,15 @@
 import {} from "vue";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useMenuState } from "./useMenuState.mjs";
 import { useMenuView } from "./useMenuView.mjs";
 import { useMenuItem } from "./useMenuItem.mjs";
 export function useMenuKeyListener(instanceId) {
   const { initializeState } = useMenuState(instanceId);
   const state = initializeState();
+  const { throwError, logWarning } = useMagicError({
+    prefix: "MagicMenu",
+    source: "useMenuKeyListener"
+  });
   const {
     selectView,
     unselectView,
@@ -20,7 +25,10 @@ export function useMenuKeyListener(instanceId) {
   function keyStrokeGuard(e) {
     switch (true) {
       case (!state.active && state.options.debug):
-        throw new Error(`'MagicMenu ${state.id} is not active'`);
+        throwError({
+          message: `'MagicMenu ${state.id} is not active'`,
+          errorCode: "menu_not_active"
+        });
       case state.active:
         state.input.type = "keyboard";
         e.stopPropagation();
@@ -41,7 +49,7 @@ export function useMenuKeyListener(instanceId) {
     try {
       keyStrokeGuard(e);
     } catch (e2) {
-      console.warn(e2);
+      logWarning(String(e2));
     }
     if (!state.input.view) {
       return;
@@ -70,7 +78,7 @@ export function useMenuKeyListener(instanceId) {
     try {
       keyStrokeGuard(e);
     } catch (e2) {
-      console.warn(e2);
+      logWarning(String(e2));
     }
     if (!state.input.view) {
       return;
@@ -94,7 +102,7 @@ export function useMenuKeyListener(instanceId) {
     try {
       keyStrokeGuard(e);
     } catch (e2) {
-      console.warn(e2);
+      logWarning(String(e2));
     }
     if (!state.input.view) {
       return;
@@ -118,7 +126,7 @@ export function useMenuKeyListener(instanceId) {
     try {
       keyStrokeGuard(e);
     } catch (e2) {
-      console.warn(e2);
+      logWarning(String(e2));
     }
     if (!state.input.view) {
       return;
@@ -138,7 +146,7 @@ export function useMenuKeyListener(instanceId) {
     try {
       keyStrokeGuard(e);
     } catch (e2) {
-      console.warn(e2);
+      logWarning(String(e2));
     }
     state.active = false;
     state.input.view = "";
@@ -148,7 +156,7 @@ export function useMenuKeyListener(instanceId) {
     try {
       keyStrokeGuard(e);
     } catch (e2) {
-      console.warn(e2);
+      logWarning(String(e2));
     }
     if (!state.input.view) {
       return;
@@ -171,7 +179,7 @@ export function useMenuKeyListener(instanceId) {
       try {
         keyStrokeGuard(e);
       } catch (e2) {
-        console.warn(e2);
+        logWarning(String(e2));
       }
     }
   }

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

@@ -1,4 +1,5 @@
 import { reactive, computed, toValue } from "vue";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useMenuState } from "./useMenuState.mjs";
 function isAbortError(error) {
   return error instanceof DOMException && error.name === "AbortError";
@@ -6,6 +7,10 @@ function isAbortError(error) {
 export function useMenuView(instanceId) {
   const { initializeState } = useMenuState(instanceId);
   const state = initializeState();
+  const { logWarning } = useMagicError({
+    prefix: "MagicMenu",
+    source: "useMenuView"
+  });
   const currentInstanceId = toValue(instanceId);
   const currentView = computed(() => {
     const activeViews = state.views.filter((view) => view.active);
@@ -132,7 +137,7 @@ export function useMenuView(instanceId) {
       unselectUnrelatedViews(id);
     } catch (error) {
       if (isAbortError(error) && state.options.debug) {
-        console.log("selectView() was interrupted by a call to unselectView()");
+        logWarning("selectView() was interrupted by a call to unselectView()");
       }
     }
   }
@@ -153,7 +158,7 @@ export function useMenuView(instanceId) {
       view.active = false;
     } catch (error) {
       if (isAbortError(error) && state.options.debug) {
-        console.log("unselectView() was interrupted by a call to selectView()");
+        logWarning("unselectView() was interrupted by a call to selectView()");
       }
     }
   }

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

@@ -1,5 +1,5 @@
 import { toValue, nextTick } from "vue";
-import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 export function useModalCallback(args) {
   const {
     id,

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

@@ -18,17 +18,27 @@
 
 <script setup>
 import { computed, toRefs, onBeforeUnmount } from "vue";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { usePieState } from "../composables/private/usePieState";
 const { id, options } = defineProps({
   id: { type: String, required: true },
   options: { type: Object, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicPie",
+  source: "MagicPie"
+});
 const { initializeState, deleteState } = usePieState(id);
 const state = initializeState();
 const { percentage } = toRefs(state);
 function generatePath(points) {
   if (points.length < 2) {
-    throw new Error("At least two points are required to generate a path.");
+    magicError.throwError({
+      message: "At least two points are required to generate a path",
+      errorCode: "missing_points"
+    });
   }
   let path2 = `M ${points[0][0]} ${points[0][1]}`;
   for (let i = 1; i < points.length; i++) {
@@ -38,7 +48,10 @@ function generatePath(points) {
 }
 function generatePie(percentage2, flip) {
   if (percentage2 < 0 || percentage2 > 100) {
-    throw new Error("percentage needs to be between 0 and 100");
+    magicError.throwError({
+      message: "percentage needs to be between 0 and 100",
+      errorCode: "invalid_percentage"
+    });
   }
   const size = 100;
   const points = [

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

@@ -18,6 +18,9 @@ import {
   useEventListener,
   defaultWindow
 } from "@vueuse/core";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { usePlayerAudioApi } from "../composables/private/usePlayerAudioApi";
 import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
 import { usePlayerRuntime } from "../composables/private/usePlayerRuntime";
@@ -28,21 +31,28 @@ import {
   MagicPlayerOptionsKey,
   MagicPlayerRef
 } from "../symbols";
+const magicError = useMagicError({
+  prefix: "MagicPlayer",
+  source: "MagicPlayerAudio"
+});
 const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
 const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
 const injectedPlayerRef = inject(MagicPlayerRef, void 0);
-if (!injectedInstanceId) {
-  throw new Error("MagicPlayerVideo must be used within a MagicPlayerProvider");
-}
-if (!injectedOptions) {
-  throw new Error("MagicPlayerVideo must be used within a MagicPlayerProvider");
-}
+magicError.assert(injectedInstanceId, {
+  message: "MagicPlayerAudio must be used within a MagicPlayerProvider",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(injectedOptions, {
+  message: "MagicPlayerAudio must be used within a MagicPlayerProvider",
+  errorCode: "missing_options"
+});
 const elRef = useTemplateRef("el");
 const { initialize, destroy } = usePlayerRuntime({
   id: injectedInstanceId,
   mediaRef: elRef,
   src: injectedOptions.src,
-  srcType: injectedOptions.srcType
+  srcType: injectedOptions.srcType,
+  debug: injectedOptions.debug
 });
 usePlayerMediaApi({
   id: injectedInstanceId,

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

@@ -69,6 +69,9 @@ import {
   onBeforeUnmount
 } from "vue";
 import { useIdle } from "@vueuse/core";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { usePlayerState } from "../composables/private/usePlayerState";
 import { usePlayerAudioApi } from "../composables/private/usePlayerAudioApi";
 import { usePlayerControlsApi } from "../composables/private/usePlayerControlsApi";
@@ -83,14 +86,17 @@ import {
 const { instanceId } = defineProps({
   instanceId: { type: String, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicPlayer",
+  source: "MagicPlayerAudioControls"
+});
 const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
 const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
 const mappedInstanceId = computed(() => instanceId ?? injectedInstanceId);
-if (!mappedInstanceId.value) {
-  throw new Error(
-    "MagicAudioPlayerControls must be nested inside MagicAudioPlayer or an instanceId must be provided."
-  );
-}
+magicError.assert(mappedInstanceId.value, {
+  message: "MagicAudioPlayerControls must be nested inside MagicAudioPlayer or an instanceId must be provided",
+  errorCode: "missing_instance_id"
+});
 const barRef = useTemplateRef("bar");
 const trackRef = useTemplateRef("track");
 const { play, pause } = usePlayerAudioApi({

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

@@ -6,18 +6,24 @@
 
 <script setup>
 import { computed, inject, toRefs } from "vue";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { formatTime } from "@maas/vue-equipment/utils";
 import { usePlayerState } from "../composables/private/usePlayerState";
 import { MagicPlayerInstanceId } from "../symbols";
 const { type = "current" } = defineProps({
   type: { type: String, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicPlayer",
+  source: "MagicPlayerDisplayTime"
+});
 const instanceId = inject(MagicPlayerInstanceId);
-if (!instanceId) {
-  throw new Error(
-    "MagicPlayerDisplayTime must be nested inside MagicPlayerVideoControls or MagicPlayerAudioControls."
-  );
-}
+magicError.assert(instanceId, {
+  message: "MagicPlayerDisplayTime must be nested inside MagicPlayerVideoControls or MagicPlayerAudioControls",
+  errorCode: "missing_instance_id"
+});
 const { initializeState } = usePlayerState(instanceId);
 const state = initializeState();
 const { currentTime, duration } = toRefs(state);