@maas/vue-equipment 0.40.0 → 1.0.0-beta.10

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

@@ -1,16 +1,34 @@
-export type MagicCookieRecord = {
-    key: string;
+export interface CookieItem {
+    id: string;
+    active: boolean;
     optional?: boolean;
-    title?: string;
-    text?: string;
-    [key: string]: unknown;
-};
-export type MagicCookieConsent = {
-    timestamp: number | undefined;
-    cookies: Record<string, boolean>;
-};
+    maxAge?: number;
+    timestamp?: number;
+}
+export interface CookieState {
+    id: string;
+    options: MagicCookieOptions;
+    items: CookieItem[];
+    viewActive: boolean;
+}
+export type CookieConsent = Record<CookieItem['id'], CookieItem['active']>;
+export interface MagicCookieOptions {
+    maxAge?: number;
+    transition?: string;
+    animation?: {
+        duration: number;
+        easing: (t: number) => number;
+    };
+}
 export type CookieEvents = {
-    accept: MagicCookieConsent;
-    reject: MagicCookieConsent;
-    acceptSelected: MagicCookieConsent;
+    beforeEnter: string;
+    enter: string;
+    afterEnter: string;
+    beforeLeave: string;
+    leave: string;
+    afterLeave: string;
+    acceptAll: CookieConsent;
+    rejectAll: CookieConsent;
+    acceptSelected: CookieConsent;
 };
+export type MagicCookieCallbackArgs = CookieConsent;

package/dist/plugins/MagicCookie/src/utils/defaultOptions.d.ts

@@ -0,0 +1,4 @@
+import type { MagicCookieOptions } from '../types/index.js';
+import { type RequireAll } from '@maas/vue-equipment/utils';
+declare const defaultOptions: RequireAll<MagicCookieOptions>;
+export { defaultOptions };

package/dist/plugins/MagicCookie/src/utils/defaultOptions.mjs

@@ -0,0 +1,10 @@
+import { easeOutQuad } from "@maas/vue-equipment/utils";
+const defaultOptions = {
+  maxAge: 24 * 60 * 60 * 60,
+  transition: "magic-cookie-view",
+  animation: {
+    duration: 300,
+    easing: easeOutQuad
+  }
+};
+export { defaultOptions };

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

@@ -1,108 +1,147 @@
-<template>
-  <div
-    ref="drawerRef"
-    :id="toValue(id)"
-    :class="[
-      'magic-draggable',
-      {
-        '-dragging': dragging,
-        '-disabled': disabled,
-      },
-    ]"
-    v-bind="$attrs"
-  >
-    <div class="magic-draggable__wrapper" ref="wrapperRef">
-      <component
-        :is="mappedOptions.tag"
-        ref="elRef"
-        class="magic-draggable__drag"
-        :style="style"
-        @pointerdown="guardedPointerdown"
-        @click="guardedClick"
-      >
-        <component v-if="component" v-bind="props" :is="component" />
-        <slot v-else />
-        <div v-if="hasDragged" class="magic-draggable__overlay" />
-      </component>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import {
-  ref,
-  computed,
-  toValue,
-  onMounted,
-  onBeforeUnmount,
-  type Component,
-  type MaybeRef,
-} from 'vue'
-import { defu } from 'defu'
-import { useDraggableDrag } from '../composables/private/useDraggableDrag'
-import { useDraggableState } from '../composables/private/useDraggableState'
-import { defaultOptions } from '../utils/defaultOptions'
-
-import type { MagicDraggableOptions } from '../types'
-
-defineOptions({
-  inheritAttrs: false,
-})
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveDynamicComponent as _resolveDynamicComponent, normalizeStyle as _normalizeStyle, withCtx as _withCtx, createBlock as _createBlock, createElementVNode as _createElementVNode, mergeProps as _mergeProps } from "vue";
+const _hoisted_1 = ["data-id", "data-dragging", "data-disabled"];
+const _hoisted_2 = {
+  ref: "wrapper",
+  class: "magic-draggable__wrapper"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "magic-draggable__overlay"
+};
+import { useTemplateRef, computed, toValue, toRefs } from "vue";
+import { defu } from "defu";
+import { useDraggableDrag } from "../composables/private/useDraggableDrag";
+import { useDraggableState } from "../composables/private/useDraggableState";
+import { defaultOptions } from "../utils/defaultOptions";
+export default /* @__PURE__ */ _defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "MagicDraggable",
+  props: {
+    id: { type: null, required: true },
+    options: { type: Object, required: false, default: () => ({}) }
+  },
+  setup(__props) {
+    const mappedOptions = defu(__props.options, defaultOptions);
+    const elRef = useTemplateRef("el");
+    const wrapperRef = useTemplateRef("wrapper");
+    const { initializeState } = useDraggableState(__props.id);
+    const state = initializeState();
+    const { dragging } = toRefs(state);
+    const disabled = computed(() => {
+      if (__props.options.disabled === void 0) {
+        return defaultOptions.disabled;
+      } else {
+        return __props.options.disabled;
+      }
+    });
+    const { snapPoints, animation, initial, threshold, scrollLock } = mappedOptions;
+    const { onPointerdown, onClick, style, hasDragged } = useDraggableDrag({
+      id: __props.id,
+      elRef,
+      wrapperRef,
+      threshold,
+      snapPoints,
+      animation,
+      initial,
+      scrollLock
+    });
+    function guardedPointerdown(event) {
+      if (!disabled.value) {
+        onPointerdown(event);
+      }
+    }
+    function guardedClick(event) {
+      if (!disabled.value) {
+        onClick(event);
+      }
+    }
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock("div", _mergeProps({
+        "data-id": toValue(_ctx.id),
+        "data-dragging": _unref(dragging),
+        "data-disabled": disabled.value,
+        class: "magic-draggable"
+      }, _ctx.$attrs), [
+        _createElementVNode(
+          "div",
+          _hoisted_2,
+          [
+            (_openBlock(), _createBlock(_resolveDynamicComponent(_unref(mappedOptions).tag), {
+              ref: "el",
+              class: "magic-draggable__drag",
+              style: _normalizeStyle(_unref(style)),
+              onPointerdown: guardedPointerdown,
+              onClick: guardedClick
+            }, {
+              default: _withCtx(() => [
+                _renderSlot(_ctx.$slots, "default"),
+                _unref(hasDragged) ? (_openBlock(), _createElementBlock("div", _hoisted_3)) : _createCommentVNode("v-if", true)
+              ]),
+              _: 3
+              /* FORWARDED */
+            }, 40, ["style"]))
+          ],
+          512
+          /* NEED_PATCH */
+        )
+      ], 16, _hoisted_1);
+    };
+  }
+});
+</script>
 
-interface MagicDraggableProps {
-  id: MaybeRef<string>
-  component?: Component
-  options?: MagicDraggableOptions
+<style>
+.magic-draggable {
+  position: var(--magic-draggable-position, fixed);
+  width: var(--magic-draggable-width, 100%);
+  height: var(--magic-draggable-height, 100%);
+  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;
 }
 
-const props = withDefaults(defineProps<MagicDraggableProps>(), {
-  options: () => defaultOptions,
-})
-
-const mappedOptions = defu(props.options, defaultOptions)
-
-const elRef = ref<HTMLElement | undefined>(undefined)
-const wrapperRef = ref<HTMLDivElement | undefined>(undefined)
-
-const { initializeState } = useDraggableState(props.id)
-const { dragging } = initializeState()
-
-// Make sure this is reactive
-const disabled = computed(() => {
-  if (props.options.disabled === undefined) {
-    return defaultOptions.disabled
-  } else {
-    return props.options.disabled
-  }
-})
+.magic-draggable[data-disabled='true'] {
+  pointer-events: none;
+}
 
-const { snapPoints, animation, initial, threshold, scrollLock } = mappedOptions
+.magic-draggable__wrapper {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
 
-const { onPointerdown, onClick, style, hasDragged } = useDraggableDrag({
-  id: props.id,
-  elRef,
-  wrapperRef,
-  threshold,
-  snapPoints,
-  animation,
-  initial,
-  scrollLock,
-})
+.magic-draggable__drag {
+  cursor: grab;
+  user-select: none;
+  pointer-events: auto;
+  position: relative;
+  display: inline-flex;
+  width: auto;
+  height: auto;
+  transform-origin: center;
+  touch-action: none;
+}
 
-// Public functions
-function guardedPointerdown(event: PointerEvent) {
-  if (!disabled.value) {
-    onPointerdown(event)
-  }
+.magic-draggable[data-dragging='true'] .magic-draggable__drag {
+  cursor: grabbing;
+  user-select: none;
 }
 
-function guardedClick(event: PointerEvent) {
-  if (!disabled.value) {
-    onClick(event)
-  }
+.magic-draggable[data-disabled='true'] .magic-draggable__drag {
+  cursor: default;
 }
-</script>
 
-<style>
-.magic-draggable{background:transparent;border:none;color:inherit;height:var(--magic-draggable-height,100%);inset:var(--magic-draggable-inset,0);padding:0;position:var(--magic-draggable-position,fixed);width:var(--magic-draggable-width,100%);z-index:var(--magic-draggable-z-index,999)}.magic-draggable,.magic-draggable.-disabled{pointer-events:none}.magic-draggable__wrapper{display:block;height:100%;width:100%}.magic-draggable__drag{cursor:grab;display:inline-flex;height:auto;pointer-events:auto;position:relative;touch-action:none;transform-origin:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:auto}.magic-draggable.-dragging .magic-draggable__drag{cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-draggable.-disabled .magic-draggable__drag{cursor:default}.magic-draggable__overlay{inset:0;position:absolute;z-index:9999}
+.magic-draggable__overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 9999;
+}
 </style>

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

@@ -1,29 +1,106 @@
-import { type Component, type MaybeRef } from 'vue';
-import type { MagicDraggableOptions } from '../types';
+import { toValue, type MaybeRef } from 'vue';
+import type { MagicDraggableOptions } from '../types/index.js';
 interface MagicDraggableProps {
     id: MaybeRef<string>;
-    component?: Component;
     options?: MagicDraggableOptions;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
+declare const mappedOptions: Omit<MagicDraggableOptions, keyof MagicDraggableOptions> & Omit<import("../types").DraggableDefaultOptions, keyof MagicDraggableOptions> & {
+    threshold: ({
+        lock?: number;
+        distance?: number;
+        momentum?: number;
+        idle?: number;
+    } & import("../../../../utils").RequireAll<{
+        lock?: number;
+        distance?: number;
+        momentum?: number;
+        idle?: number;
+    }>) | (Omit<{
+        lock?: number;
+        distance?: number;
+        momentum?: number;
+        idle?: number;
+    }, "lock" | "distance" | "momentum" | "idle"> & Omit<{
+        lock?: number;
+        distance?: number;
+        momentum?: number;
+        idle?: number;
+    } & import("../../../../utils").RequireAll<{
+        lock?: number;
+        distance?: number;
+        momentum?: number;
+        idle?: number;
+    }>, "lock" | "distance" | "momentum" | "idle"> & {
+        lock: number;
+        distance: number;
+        momentum: number;
+        idle: number;
+    });
+    disabled: boolean;
+    animation: ({
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    } & import("../../../../utils").RequireAll<{
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    }>) | (Omit<{
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    }, "snap"> & Omit<{
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    } & import("../../../../utils").RequireAll<{
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    }>, "snap"> & {
+        snap: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    });
+    tag: "div" | "dialog";
+    scrollLock: boolean | {
+        padding: boolean;
     };
-    refs: {
-        drawerRef: HTMLDivElement;
-        wrapperRef: HTMLDivElement;
-        elRef: unknown;
+    snapPoints: import("../types").DraggableSnapPoint[];
+    initial: {
+        snapPoint?: import("../types").DraggableSnapPoint;
     };
-    rootEl: any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicDraggableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDraggableProps> & Readonly<{}>, {
-    options: MagicDraggableOptions;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const dragging: import("vue").Ref<boolean, boolean>;
+declare const disabled: import("vue").ComputedRef<boolean>;
+declare const style: import("vue").ComputedRef<string>, hasDragged: import("vue").ComputedRef<boolean>;
+declare function guardedPointerdown(event: PointerEvent): void;
+declare function guardedClick(event: PointerEvent): void;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_12: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_12) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<MagicDraggableProps, {
+    toValue: typeof toValue;
+    mappedOptions: typeof mappedOptions;
+    dragging: typeof dragging;
+    disabled: typeof disabled;
+    style: typeof style;
+    hasDragged: typeof hasDragged;
+    guardedPointerdown: typeof guardedPointerdown;
+    guardedClick: typeof guardedClick;
+}, {}, {}, {}, 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_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableDrag.d.ts

@@ -1,14 +1,14 @@
 import { type Ref, type MaybeRef } from 'vue';
-import { type DefaultOptions } from '../../utils/defaultOptions.js';
+import type { DraggableDefaultOptions } from '../../types/index.js';
 type UseDraggableDragArgs = {
     id: MaybeRef<string>;
-    elRef: Ref<HTMLElement | undefined>;
-    wrapperRef: Ref<HTMLDivElement | undefined>;
-    threshold: MaybeRef<DefaultOptions['threshold']>;
-    snapPoints: MaybeRef<DefaultOptions['snapPoints']>;
-    animation: MaybeRef<DefaultOptions['animation']>;
-    initial: MaybeRef<DefaultOptions['initial']>;
-    scrollLock: MaybeRef<DefaultOptions['scrollLock']>;
+    elRef: Ref<HTMLElement | null>;
+    wrapperRef: Ref<HTMLDivElement | null>;
+    threshold: MaybeRef<DraggableDefaultOptions['threshold']>;
+    snapPoints: MaybeRef<DraggableDefaultOptions['snapPoints']>;
+    animation: MaybeRef<DraggableDefaultOptions['animation']>;
+    initial: MaybeRef<DraggableDefaultOptions['initial']>;
+    scrollLock: MaybeRef<DraggableDefaultOptions['scrollLock']>;
 };
 export declare function useDraggableDrag(args: UseDraggableDragArgs): {
     initialize: () => Promise<void>;

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

@@ -1,10 +1,11 @@
 import {
-  ref,
+  shallowRef,
   computed,
   toValue,
   nextTick,
   watch,
   onBeforeUnmount,
+  toRefs,
   onMounted
 } from "vue";
 import {
@@ -38,6 +39,7 @@ export function useDraggableDrag(args) {
     scrollLock
   } = args;
   const { initializeState } = useDraggableState(toValue(id));
+  const state = initializeState();
   const {
     dragStart,
     dragging,
@@ -52,12 +54,12 @@ export function useDraggableDrag(args) {
     draggedY,
     elRect,
     wrapperRect
-  } = initializeState();
+  } = toRefs(state);
   let cancelPointerup = void 0;
   let cancelPointermove = void 0;
   let cancelTouchend = void 0;
-  const momentumThresholdReached = ref(false);
-  const distanceThresholdReached = ref(false);
+  const momentumThresholdReached = shallowRef(false);
+  const distanceThresholdReached = shallowRef(false);
   const style = computed(
     () => `transform: translate3d(${draggedX.value}px, ${draggedY.value}px, 0)`
   );
@@ -87,8 +89,10 @@ export function useDraggableDrag(args) {
     wrapperRect,
     animation,
     snapPoints,
+    draggedX,
     draggedY,
-    draggedX
+    lastDraggedX,
+    lastDraggedY
   });
   const emitter = useMagicEmitter();
   const {
@@ -327,10 +331,10 @@ export function useDraggableDrag(args) {
   function onPointerdown(e) {
     const scrollLockValue = toValue(scrollLock);
     if (scrollLockValue) {
-      lockScroll();
       if (typeof scrollLockValue === "object" && scrollLockValue.padding) {
         addScrollLockPadding();
       }
+      lockScroll();
     }
     if (dragging.value) {
       return;
@@ -396,6 +400,7 @@ export function useDraggableDrag(args) {
       if (activeSnapPoint.value) {
         await snapTo({ snapPoint: activeSnapPoint.value, interpolate: false });
         snapPointsMap.trigger();
+        mappedSnapPoints.trigger();
       }
     }, 100)();
   });
@@ -405,6 +410,7 @@ export function useDraggableDrag(args) {
       if (activeSnapPoint.value) {
         await snapTo({ snapPoint: activeSnapPoint.value, interpolate: false });
         snapPointsMap.trigger();
+        mappedSnapPoints.trigger();
       }
     }, 100)();
   });

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

@@ -1,7 +1,11 @@
-import { ref } from "vue";
+import { shallowRef, ref } from "vue";
 import { useScrollLock } from "@vueuse/core";
-import { matchClass } from "@maas/vue-equipment/utils";
-const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : ref(false);
+import {
+  matchClass,
+  scrollbarWidth,
+  scrollbarGutterSupport
+} from "@maas/vue-equipment/utils";
+const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
 export function useDraggableScrollLock() {
   const positionFixedElements = ref([]);
   function lockScroll() {
@@ -13,24 +17,40 @@ export function useDraggableScrollLock() {
   function addScrollLockPadding() {
     if (typeof window === "undefined") return;
     const exclude = new RegExp(/magic-draggable/);
-    const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
-    document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
-    document.body.style.paddingRight = "var(--scrollbar-width)";
+    document.body.style.setProperty(
+      "--scrollbar-width",
+      `${scrollbarWidth()}px`
+    );
     positionFixedElements.value = [
       ...document.body.getElementsByTagName("*")
     ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && !matchClass(x, exclude)
-    );
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px" && !matchClass(x, exclude)
     );
+    switch (scrollbarGutterSupport()) {
+      case true:
+        document.documentElement.style.scrollbarGutter = "stable";
+        positionFixedElements.value.forEach((elem) => {
+          elem.style.scrollbarGutter = "stable";
+          elem.style.overflow = "auto";
+        });
+        break;
+      case false:
+        document.body.style.paddingRight = "var(--scrollbar-width)";
+        positionFixedElements.value.forEach(
+          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+        );
+        break;
+    }
   }
   function removeScrollLockPadding() {
-    document.body.style.paddingRight = "";
+    document.documentElement.style.scrollbarGutter = "";
     document.body.style.removeProperty("--scrollbar-width");
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = ""
-    );
+    document.body.style.paddingRight = "";
+    positionFixedElements.value.forEach((elem) => {
+      elem.style.paddingRight = "";
+      elem.style.scrollbarGutter = "";
+      elem.style.overflow = "";
+    });
   }
   return {
     lockScroll,

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableSnap.d.ts

@@ -1,14 +1,15 @@
 import { type MaybeRef, type Ref } from 'vue';
-import { type DefaultOptions } from '../../utils/defaultOptions.js';
-import type { DraggableSnapPoint, Coordinates } from '../../types/index.js';
+import type { DraggableSnapPoint, Coordinates, DraggableDefaultOptions } from '../../types/index.js';
 type UseDraggableSnapArgs = {
     id: MaybeRef<string>;
     elRect: Ref<DOMRect | undefined>;
     wrapperRect: Ref<DOMRect | undefined>;
-    draggedY: Ref<number>;
     draggedX: Ref<number>;
-    animation: MaybeRef<DefaultOptions['animation']>;
-    snapPoints: MaybeRef<DefaultOptions['snapPoints']>;
+    draggedY: Ref<number>;
+    lastDraggedX: Ref<number>;
+    lastDraggedY: Ref<number>;
+    animation: MaybeRef<DraggableDefaultOptions['animation']>;
+    snapPoints: MaybeRef<DraggableDefaultOptions['snapPoints']>;
 };
 type InterpolateDraggedArgs = {
     x: number;
@@ -23,13 +24,13 @@ type SnapToArgs = {
 };
 export declare function useDraggableSnap(args: UseDraggableSnapArgs): {
     mappedSnapPoints: import("@vueuse/core").ComputedRefWithControl<Coordinates[]>;
-    activeSnapPoint: Ref<("center" | "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right") | ["center" | "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right", offset?: {
+    activeSnapPoint: Ref<("center" | "right" | "left" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | ["center" | "right" | "left" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", offset?: {
         x?: number | undefined;
         y?: number | undefined;
-    } | undefined] | undefined, "center" | "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right" | ["center" | "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right", offset?: {
+    } | undefined] | undefined, "center" | "right" | "left" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | ["center" | "right" | "left" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", offset?: {
         x?: number;
         y?: number;
-    } | undefined] | ["center" | "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right", offset?: {
+    } | undefined] | ["center" | "right" | "left" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", offset?: {
         x?: number | undefined;
         y?: number | undefined;
     } | undefined] | undefined>;