@maas/vue-equipment 1.0.0-beta.34 → 1.0.0-beta.36

package/dist/plugins/MagicCommand/src/components/MagicCommandTrigger.vue

@@ -16,6 +16,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 { useCommandView } from "../composables/private/useCommandView";
 import { useCommandTrigger } from "../composables/private/useCommandTrigger";
 import {
@@ -40,22 +43,24 @@ const {
   trigger: { type: Array, required: false },
   asChild: { type: Boolean, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicCommand",
+  source: "MagicCommandTrigger"
+});
 const elRef = useTemplateRef("el");
 const instanceId = inject(MagicCommandInstanceId, void 0);
 const itemActive = inject(MagicCommandItemActive, void 0);
 const itemDisabled = inject(MagicCommandItemDisabled, void 0);
 const injectedViewId = inject(MagicCommandViewId, void 0);
 const mappedViewId = computed(() => viewId ?? injectedViewId);
-if (!instanceId) {
-  throw new Error(
-    "MagicCommandTrigger must be nested inside MagicCommandProvider"
-  );
-}
-if (!mappedViewId.value) {
-  throw new Error(
-    "MagicCommandTrigger must be nested inside MagicCommandView or a viewId must be provided"
-  );
-}
+magicError.assert(instanceId, {
+  message: "MagicCommandTrigger must be nested inside MagicCommandProvider",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(mappedViewId.value, {
+  message: "MagicCommandTrigger must be nested inside MagicCommandView or a viewId must be provided",
+  errorCode: "missing_view_id"
+});
 const { getView } = useCommandView(instanceId);
 const view = getView(mappedViewId.value);
 const mappedActive = computed(() => active ?? toValue(itemActive) ?? false);
@@ -82,9 +87,15 @@ watch(
   }
 );
 const keys = useMagicKeys();
+const { logWarning } = magicError;
 if (options?.keyListener?.enter) {
   for (const key of options.keyListener.enter) {
-    watch(keys[key], (value) => {
+    const mappedKey = keys[key];
+    if (!mappedKey) {
+      logWarning(`The key \u201C${key}\u201D is not supported by MagicCommand`);
+      continue;
+    }
+    watch(mappedKey, (value) => {
       if (value) {
         onKeypress();
       }

package/dist/plugins/MagicCommand/src/components/MagicCommandTrigger.vue.d.ts

@@ -14,7 +14,7 @@ declare var __VLS_12: {
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_12) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<MagicCommandTriggerProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicCommandTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandTriggerProps> & 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/MagicCommand/src/components/MagicCommandView.vue

@@ -6,6 +6,9 @@
 
 <script setup>
 import { computed, inject, onBeforeUnmount, provide, useId, watch } from "vue";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useCommandView } from "../composables/private/useCommandView";
 import {
   MagicCommandInstanceId,
@@ -18,12 +21,17 @@ const { id, initial = false } = defineProps({
   id: { type: String, required: false },
   initial: { type: Boolean, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicCommand",
+  source: "MagicCommandView"
+});
 const parentTree = inject(MagicCommandParentTree, []);
 const instanceId = inject(MagicCommandInstanceId, void 0);
 const itemId = inject(MagicCommandItemId, void 0);
-if (!instanceId) {
-  throw new Error("MagicCommandView must be nested inside MagicCommandProvider");
-}
+magicError.assert(instanceId, {
+  message: "MagicCommandView must be nested inside MagicCommandProvider",
+  errorCode: "missing_instance_id"
+});
 const mappedId = computed(() => id ?? `magic-command-view-${useId()}`);
 const mappedParentTree = computed(() => [...parentTree, mappedId.value]);
 const mappedActive = computed(() => view.active);

package/dist/plugins/MagicCommand/src/components/MagicCommandView.vue.d.ts

@@ -8,7 +8,7 @@ declare var __VLS_1: {
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<MagicCommandViewProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicCommandViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandViewProps> & 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/MagicCommand/src/composables/private/useCommandItem.mjs

@@ -30,7 +30,9 @@ export function useCommandItem(args) {
     return item;
   }
   function deleteItem(id) {
-    if (!view?.items) return;
+    if (!view?.items) {
+      return;
+    }
     view.items = view.items.filter((x) => x.id !== id);
   }
   function getItem(id) {

package/dist/plugins/MagicCommand/src/composables/private/useCommandView.d.ts

@@ -1,7 +1,7 @@
 import { type MaybeRef } from 'vue';
 import type { CommandView } from '../../types/index.js';
 type InitializeViewArgs = Pick<CommandView, 'id' | 'parent' | 'initial'>;
-export declare function useCommandView(instanceId: MaybeRef<string>): {
+export declare function useCommandView(id: MaybeRef<string>): {
     currentView: import("vue").ComputedRef<CommandView | undefined>;
     initializeView: (args: InitializeViewArgs) => CommandView;
     deleteView: (id: string) => void;

package/dist/plugins/MagicCommand/src/composables/private/useCommandView.mjs

@@ -1,28 +1,37 @@
 import { reactive, computed, toValue } from "vue";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useCommandState } from "./useCommandState.mjs";
 function isAbortError(error) {
   return error instanceof DOMException && error.name === "AbortError";
 }
-export function useCommandView(instanceId) {
-  const { initializeState } = useCommandState(instanceId);
+const { logWarning } = useMagicError({
+  prefix: "MagicCommand",
+  source: "useCommandView"
+});
+export function useCommandView(id) {
+  const { initializeState } = useCommandState(id);
   const state = initializeState();
-  const currentInstanceId = toValue(instanceId);
+  const currentInstanceId = toValue(id);
   const currentView = computed(() => {
     const activeViews = state.views.filter((view) => view.active);
-    if (activeViews.length === 0) return void 0;
-    if (activeViews.length === 1) return activeViews[0];
+    if (activeViews.length === 0) {
+      return void 0;
+    }
+    if (activeViews.length === 1) {
+      return activeViews[0];
+    }
     return activeViews.reduce(
       (a, b) => a.parent.views.length >= b.parent.views.length ? a : b
     );
   });
   const viewMap = /* @__PURE__ */ new Map();
   function createView(args) {
-    const { id, parent, initial } = args;
+    const { id: id2, parent, initial } = args;
     if (parent.views.length === 0) {
       parent.views.push(currentInstanceId);
     }
     const view = reactive({
-      id,
+      id: id2,
       parent,
       initial,
       active: false,
@@ -33,7 +42,7 @@ export function useCommandView(instanceId) {
         unselectAbortController: new AbortController()
       }
     });
-    viewMap.set(id, view);
+    viewMap.set(id2, view);
     return view;
   }
   function addView(args) {
@@ -55,35 +64,37 @@ export function useCommandView(instanceId) {
     const view = state?.views.findLast((view2) => view2.active)?.id;
     state.input.view = view;
   }
-  function getView(id) {
-    let view = viewMap.get(id);
+  function getView(id2) {
+    let view = viewMap.get(id2);
     if (!view) {
-      view = state.views.find((v) => v.id === id);
-      if (view) viewMap.set(id, view);
+      view = state.views.find((v) => v.id === id2);
+      if (view) viewMap.set(id2, view);
     }
     return view;
   }
-  function deleteView(id) {
-    const index = state.views.findIndex((view) => view.id === id);
+  function deleteView(id2) {
+    const index = state.views.findIndex((view) => view.id === id2);
     if (index !== -1) {
       state.views.splice(index, 1);
-      viewMap.delete(id);
+      viewMap.delete(id2);
     }
   }
-  function getRelativeViewIndex(id) {
-    const view = getView(id);
-    if (!view) return -1;
+  function getRelativeViewIndex(id2) {
+    const view = getView(id2);
+    if (!view) {
+      return -1;
+    }
     const nestingLevel = view.parent.views.length;
     return state.views.findIndex(
-      (v) => v.parent.views.length === nestingLevel && v.id === id
+      (v) => v.parent.views.length === nestingLevel && v.id === id2
     );
   }
-  function getNextView(id) {
-    const index = state.views.findIndex((view) => view.id === id);
+  function getNextView(id2) {
+    const index = state.views.findIndex((view) => view.id === id2);
     return index !== -1 ? state.views[index + 1] : void 0;
   }
-  function getPreviousView(id) {
-    const index = state.views.findIndex((view) => view.id === id);
+  function getPreviousView(id2) {
+    const index = state.views.findIndex((view) => view.id === id2);
     return index > 0 ? state.views[index - 1] : void 0;
   }
   function getTopLevelView() {
@@ -92,21 +103,27 @@ export function useCommandView(instanceId) {
   function getNestedView(itemId) {
     return state.views.find((view) => view.parent.item === itemId);
   }
-  function getParentView(id) {
-    const view = getView(id);
-    if (!view) return void 0;
+  function getParentView(id2) {
+    const view = getView(id2);
+    if (!view) {
+      return void 0;
+    }
     const parentId = view.parent.views[view.parent.views.length - 1];
     return parentId ? getView(parentId) : void 0;
   }
-  function getUnrelatedViews(id) {
-    const view = getView(id);
-    if (!view) return [];
+  function getUnrelatedViews(id2) {
+    const view = getView(id2);
+    if (!view) {
+      return [];
+    }
     const parentViewsSet = new Set(view.parent.views);
-    return state.views.filter((v) => v.id !== id && !parentViewsSet.has(v.id));
+    return state.views.filter((v) => v.id !== id2 && !parentViewsSet.has(v.id));
   }
-  async function selectView(id, delayMs = 0) {
-    const view = getView(id);
-    if (!view) return;
+  async function selectView(id2, delayMs = 0) {
+    const view = getView(id2);
+    if (!view) {
+      return;
+    }
     if (view.state.unselectAbortController) {
       view.state.unselectAbortController.abort();
     }
@@ -120,7 +137,7 @@ export function useCommandView(instanceId) {
       activateView();
     } 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()");
       }
     }
   }
@@ -131,9 +148,11 @@ export function useCommandView(instanceId) {
       activateView();
     }
   }
-  async function unselectView(id, delayMs = 0) {
-    const view = getView(id);
-    if (!view) return;
+  async function unselectView(id2, delayMs = 0) {
+    const view = getView(id2);
+    if (!view) {
+      return;
+    }
     if (view.state.selectAbortController) {
       view.state.selectAbortController.abort();
     }
@@ -147,12 +166,12 @@ export function useCommandView(instanceId) {
       activateView();
     } 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()");
       }
     }
   }
-  function unselectUnrelatedViews(id) {
-    const views = getUnrelatedViews(id);
+  function unselectUnrelatedViews(id2) {
+    const views = getUnrelatedViews(id2);
     for (const view of views) {
       view.active = false;
     }
@@ -163,8 +182,8 @@ export function useCommandView(instanceId) {
     }
   }
   function initializeView(args) {
-    const { id } = args;
-    const view = getView(id) ?? addView(args);
+    const { id: id2 } = args;
+    const view = getView(id2) ?? addView(args);
     return view;
   }
   function sortViewItems(viewId) {
@@ -173,8 +192,8 @@ export function useCommandView(instanceId) {
     const elements = Array.from(
       parent?.querySelectorAll(".magic-command-item") ?? []
     );
-    function getIndex(id) {
-      return elements.findIndex((el) => el.dataset.id === id);
+    function getIndex(id2) {
+      return elements.findIndex((el) => el.dataset.id === id2);
     }
     view?.items?.sort((a, b) => getIndex(a.id) - getIndex(b.id));
   }

package/dist/plugins/MagicCommand/src/composables/useMagicCommand.mjs

@@ -1,7 +1,12 @@
 import { computed, nextTick } from "vue";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useCommandState } from "./private/useCommandState.mjs";
 import { useCommandItem } from "./private/useCommandItem.mjs";
 import { useCommandView } from "./private/useCommandView.mjs";
+const { throwError } = useMagicError({
+  prefix: "MagicCommand",
+  source: "useMagicCommand"
+});
 export function useMagicCommand(id) {
   const { initializeState } = useCommandState(id);
   const state = initializeState();
@@ -20,10 +25,16 @@ export function useMagicCommand(id) {
   function selectItem(args) {
     const { id: id2, viewId } = args;
     if (!viewId) {
-      throw new Error("viewId is required to select an item");
+      throwError({
+        message: "viewId is required to select an item",
+        errorCode: "view_id_required"
+      });
     }
     if (!id2) {
-      throw new Error("id is required to select an item");
+      throwError({
+        message: "id is required to select an item",
+        errorCode: "id_required"
+      });
     }
     const { selectItem: selectItem2 } = useCommandItem({
       instanceId: id2,
@@ -34,10 +45,16 @@ export function useMagicCommand(id) {
   function unselectItem(args) {
     const { id: id2, viewId } = args;
     if (!viewId) {
-      throw new Error("viewId is required to select an item");
+      throwError({
+        message: "viewId is required to select an item",
+        errorCode: "view_id_required"
+      });
     }
     if (!id2) {
-      throw new Error("id is required to select an item");
+      throwError({
+        message: "id is required to select an item",
+        errorCode: "id_required"
+      });
     }
     const { unselectItem: unselectItem2 } = useCommandItem({
       instanceId: id2,

package/dist/plugins/MagicCookie/src/components/MagicCookieItem.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="magic-cookie-item"
+    :data-id="mappedId"
     :data-optional="item.optional"
     :data-active="item.active"
   >
@@ -10,6 +11,9 @@
 
 <script setup>
 import { computed, inject, provide, onBeforeUnmount, useId } from "vue";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useCookieItem } from "../composables/private/useCookieItem";
 import {
   MagicCookieInstanceId,
@@ -21,10 +25,15 @@ const { id, optional, maxAge } = defineProps({
   optional: { type: Boolean, required: false },
   maxAge: { type: Number, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicCookie",
+  source: "MagicCookieItem"
+});
 const instanceId = inject(MagicCookieInstanceId, void 0);
-if (!instanceId) {
-  throw new Error("MagicCookieItem must be nested inside MagicCookieProvider");
-}
+magicError.assert(instanceId, {
+  message: "MagicCookieItem must be nested inside MagicCookieProvider",
+  errorCode: "missing_instance_id"
+});
 const mappedId = computed(() => id ?? `magic-cookie-item-${useId()}`);
 const mappedActive = computed(() => item.active);
 const { initializeItem, deleteItem } = useCookieItem({

package/dist/plugins/MagicCookie/src/components/MagicCookieItem.vue.d.ts

@@ -9,7 +9,7 @@ declare var __VLS_1: {
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<MagicCookieItemProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCookieItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicCookieItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCookieItemProps> & 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/MagicCookie/src/components/MagicCookieProvider.vue.d.ts

@@ -8,7 +8,7 @@ declare var __VLS_7: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<MagicCookieProviderProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCookieProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicCookieProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCookieProviderProps> & 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/MagicCookie/src/components/MagicCookieView.vue

@@ -24,17 +24,23 @@
 <script setup>
 import { inject } from "vue";
 import { AutoSize } from "@maas/vue-autosize";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useCookieState } from "../composables/private/useCookieState";
 import { useCookieCallback } from "../composables/private/useCookieCallback";
 import { MagicCookieInstanceId } from "../symbols";
 import "@maas/vue-equipment/utils/css/keyframes/fade-in.css";
 import "@maas/vue-equipment/utils/css/keyframes/auto-size-out.css";
+const magicError = useMagicError({
+  prefix: "MagicCookie",
+  source: "MagicCookieView"
+});
 const instanceId = inject(MagicCookieInstanceId, void 0);
-if (!instanceId) {
-  throw new Error(
-    "MagicCookiePreferences must be used within a MagicCookieProvider"
-  );
-}
+magicError.assert(instanceId, {
+  message: "MagicCookieView must be used within a MagicCookieProvider",
+  errorCode: "missing_instance_id"
+});
 const { initializeState } = useCookieState(instanceId);
 const state = initializeState();
 const {

package/dist/plugins/MagicCookie/src/components/MagicCookieView.vue.d.ts

@@ -6,7 +6,7 @@ declare var __VLS_19: {
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_19) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/plugins/MagicCookie/src/composables/private/useCookieItem.mjs

@@ -1,8 +1,13 @@
 import { reactive, toValue } from "vue";
 import { useCookies } from "@vueuse/integrations/useCookies";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useCookieState } from "./useCookieState.mjs";
 export function useCookieItem(args) {
   const { instanceId } = args;
+  const { logWarning } = useMagicError({
+    prefix: "MagicCookie",
+    source: "useCookieItem"
+  });
   const { initializeState } = useCookieState(instanceId);
   const state = initializeState();
   function getBrowserCookie(id) {
@@ -36,7 +41,9 @@ export function useCookieItem(args) {
     return item;
   }
   function deleteItem(id) {
-    if (!state?.items) return;
+    if (!state?.items) {
+      return;
+    }
     state.items = state.items.filter((x) => x.id !== id);
   }
   function getItem(id) {
@@ -67,7 +74,7 @@ export function useCookieItem(args) {
   function setItemCookie(id) {
     const item = getItem(id);
     if (!item) {
-      console.warn(`Item ${id} not found. Cookie cannot be set.`);
+      logWarning(`Item ${id} not found. Cookie cannot be set.`);
       return;
     }
     useCookies([id]).set(toValue(id), item.active, {

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

@@ -26,6 +26,9 @@
 <script setup>
 import { useTemplateRef, computed, toValue, toRefs } from "vue";
 import { createDefu } from "defu";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useDraggableDrag } from "../composables/private/useDraggableDrag";
 import { useDraggableState } from "../composables/private/useDraggableState";
 import { defaultOptions } from "../utils/defaultOptions";
@@ -36,6 +39,10 @@ const { id, options = {} } = defineProps({
   id: { type: null, required: true },
   options: { type: Object, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicDraggable",
+  source: "MagicDraggable"
+});
 const customDefu = createDefu((obj, key, value) => {
   if (key === "snapPoints") {
     obj[key] = value;
@@ -45,7 +52,10 @@ const customDefu = createDefu((obj, key, value) => {
 const mappedOptions = customDefu(options, defaultOptions);
 const mappedId = toValue(id);
 if (!mappedOptions.snapPoints.length) {
-  throw new Error("MagicDraggable must have at least one snap point set");
+  magicError.throwError({
+    message: "MagicDraggable must have at least one snap point set",
+    errorCode: "missing_snap_point"
+  });
 }
 const elRef = useTemplateRef("el");
 const wrapperRef = useTemplateRef("wrapper");
@@ -90,7 +100,6 @@ function guardedClick(event) {
   z-index: var(--magic-draggable-z-index, 999);
   inset: var(--magic-draggable-inset, 0);
   pointer-events: none;
-  background: transparent;
   color: inherit;
   padding: 0;
   border: none;

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

@@ -8,7 +8,7 @@ declare var __VLS_12: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_12) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<MagicDraggableProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDraggableProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicDraggableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDraggableProps> & 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/MagicDraggable/src/composables/private/useDraggableDrag.mjs

@@ -24,6 +24,7 @@ import {
 import {
   useMagicEmitter
 } from "@maas/vue-equipment/plugins/MagicEmitter";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useDraggableSnap } from "./useDraggableSnap.mjs";
 import { useDraggableState } from "./useDraggableState.mjs";
 import { useDraggableScrollLock } from "./useDraggableScrollLock.mjs";
@@ -38,6 +39,10 @@ export function useDraggableDrag(args) {
     animation,
     scrollLock
   } = args;
+  const { logWarning } = useMagicError({
+    prefix: "MagicDraggable",
+    source: "useDraggableDrag"
+  });
   const { initializeState } = useDraggableState(toValue(id));
   const state = initializeState();
   const {
@@ -127,11 +132,11 @@ export function useDraggableDrag(args) {
     const childRect = toValue(elRect);
     const parentRect = toValue(wrapperRect);
     if (!childRect || !parentRect) {
-      console.warn("MagicDraggable could not calculate sizing");
+      logWarning("Could not calculate sizing");
       return;
     }
     if (childRect.width > parentRect.width || childRect.height > parentRect.height) {
-      console.warn("MagicDraggable is too small for its content");
+      logWarning("Element is too small for its content");
       return;
     }
   }
@@ -350,7 +355,7 @@ export function useDraggableDrag(args) {
     if (elRect.value && wrapperRect.value) {
       emitter.on("snapTo", snapToCallback);
       if (elRect.value.width > wrapperRect.value.width || elRect.value.height > wrapperRect.value.height) {
-        console.warn("MagicDraggable is too small for its content");
+        logWarning("is too small for its content");
         return;
       }
     }

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableScrollLock.mjs

@@ -15,7 +15,9 @@ export function useDraggableScrollLock() {
     scrollLock.value = false;
   }
   function addScrollLockPadding() {
-    if (typeof window === "undefined") return;
+    if (typeof window === "undefined") {
+      return;
+    }
     const exclude = new RegExp(/magic-draggable/);
     document.body.style.setProperty(
       "--scrollbar-width",