origam 2.2.1 → 2.3.0

package/dist/src/composables/DataTable/headers.composable.d.ts

@@ -29,7 +29,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
         title?: string | undefined;
         align?: {
             readonly [x: number]: string;
-            [Symbol.iterator]: () => StringIterator<string>;
             small: () => string;
             fixed: () => string;
             replace: {
@@ -48,11 +47,18 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.search](string: string): number;
                 }): number;
             };
-            charAt: (pos: number) => string;
-            charCodeAt: (index: number) => number;
+            bold: () => string;
+            link: (url: string) => string;
+            [Symbol.iterator]: () => StringIterator<string>;
+            readonly length: number;
             concat: (...strings: string[]) => string;
+            slice: (start?: number, end?: number) => string;
             indexOf: (searchString: string, position?: number) => number;
             lastIndexOf: (searchString: string, position?: number) => number;
+            includes: (searchString: string, position?: number) => boolean;
+            toString: () => string;
+            charAt: (pos: number) => string;
+            charCodeAt: (index: number) => number;
             localeCompare: {
                 (that: string): number;
                 (that: string, locales?: string | string[], options?: Intl.CollatorOptions): number;
@@ -64,7 +70,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.match](string: string): RegExpMatchArray | null;
                 }): RegExpMatchArray | null;
             };
-            slice: (start?: number, end?: number) => string;
             split: {
                 (separator: string | RegExp, limit?: number): string[];
                 (splitter: {
@@ -83,10 +88,8 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                 (locales?: Intl.LocalesArgument): string;
             };
             trim: () => string;
-            readonly length: number;
             substr: (from: number, length?: number) => string;
             codePointAt: (pos: number) => number | undefined;
-            includes: (searchString: string, position?: number) => boolean;
             endsWith: (searchString: string, endPosition?: number) => boolean;
             normalize: {
                 (form: "NFC" | "NFD" | "NFKC" | "NFKD"): string;
@@ -97,14 +100,12 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             anchor: (name: string) => string;
             big: () => string;
             blink: () => string;
-            bold: () => string;
             fontcolor: (color: string) => string;
             fontsize: {
                 (size: number): string;
                 (size: string): string;
             };
             italics: () => string;
-            link: (url: string) => string;
             strike: () => string;
             sub: () => string;
             sup: () => string;
@@ -115,7 +116,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             trimLeft: () => string;
             trimRight: () => string;
             matchAll: (regexp: RegExp) => RegExpStringIterator<RegExpExecArray>;
-            toString: () => string;
             valueOf: () => string;
         } | undefined;
         headerProps?: any;
@@ -142,7 +142,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
         title?: string | undefined;
         align?: {
             readonly [x: number]: string;
-            [Symbol.iterator]: () => StringIterator<string>;
             small: () => string;
             fixed: () => string;
             replace: {
@@ -161,11 +160,18 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.search](string: string): number;
                 }): number;
             };
-            charAt: (pos: number) => string;
-            charCodeAt: (index: number) => number;
+            bold: () => string;
+            link: (url: string) => string;
+            [Symbol.iterator]: () => StringIterator<string>;
+            readonly length: number;
             concat: (...strings: string[]) => string;
+            slice: (start?: number, end?: number) => string;
             indexOf: (searchString: string, position?: number) => number;
             lastIndexOf: (searchString: string, position?: number) => number;
+            includes: (searchString: string, position?: number) => boolean;
+            toString: () => string;
+            charAt: (pos: number) => string;
+            charCodeAt: (index: number) => number;
             localeCompare: {
                 (that: string): number;
                 (that: string, locales?: string | string[], options?: Intl.CollatorOptions): number;
@@ -177,7 +183,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.match](string: string): RegExpMatchArray | null;
                 }): RegExpMatchArray | null;
             };
-            slice: (start?: number, end?: number) => string;
             split: {
                 (separator: string | RegExp, limit?: number): string[];
                 (splitter: {
@@ -196,10 +201,8 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                 (locales?: Intl.LocalesArgument): string;
             };
             trim: () => string;
-            readonly length: number;
             substr: (from: number, length?: number) => string;
             codePointAt: (pos: number) => number | undefined;
-            includes: (searchString: string, position?: number) => boolean;
             endsWith: (searchString: string, endPosition?: number) => boolean;
             normalize: {
                 (form: "NFC" | "NFD" | "NFKC" | "NFKD"): string;
@@ -210,14 +213,12 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             anchor: (name: string) => string;
             big: () => string;
             blink: () => string;
-            bold: () => string;
             fontcolor: (color: string) => string;
             fontsize: {
                 (size: number): string;
                 (size: string): string;
             };
             italics: () => string;
-            link: (url: string) => string;
             strike: () => string;
             sub: () => string;
             sup: () => string;
@@ -228,7 +229,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             trimLeft: () => string;
             trimRight: () => string;
             matchAll: (regexp: RegExp) => RegExpStringIterator<RegExpExecArray>;
-            toString: () => string;
             valueOf: () => string;
         } | undefined;
         headerProps?: any;
@@ -256,7 +256,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
         title?: string | undefined;
         align?: {
             readonly [x: number]: string;
-            [Symbol.iterator]: () => StringIterator<string>;
             small: () => string;
             fixed: () => string;
             replace: {
@@ -275,11 +274,18 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.search](string: string): number;
                 }): number;
             };
-            charAt: (pos: number) => string;
-            charCodeAt: (index: number) => number;
+            bold: () => string;
+            link: (url: string) => string;
+            [Symbol.iterator]: () => StringIterator<string>;
+            readonly length: number;
             concat: (...strings: string[]) => string;
+            slice: (start?: number, end?: number) => string;
             indexOf: (searchString: string, position?: number) => number;
             lastIndexOf: (searchString: string, position?: number) => number;
+            includes: (searchString: string, position?: number) => boolean;
+            toString: () => string;
+            charAt: (pos: number) => string;
+            charCodeAt: (index: number) => number;
             localeCompare: {
                 (that: string): number;
                 (that: string, locales?: string | string[], options?: Intl.CollatorOptions): number;
@@ -291,7 +297,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.match](string: string): RegExpMatchArray | null;
                 }): RegExpMatchArray | null;
             };
-            slice: (start?: number, end?: number) => string;
             split: {
                 (separator: string | RegExp, limit?: number): string[];
                 (splitter: {
@@ -310,10 +315,8 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                 (locales?: Intl.LocalesArgument): string;
             };
             trim: () => string;
-            readonly length: number;
             substr: (from: number, length?: number) => string;
             codePointAt: (pos: number) => number | undefined;
-            includes: (searchString: string, position?: number) => boolean;
             endsWith: (searchString: string, endPosition?: number) => boolean;
             normalize: {
                 (form: "NFC" | "NFD" | "NFKC" | "NFKD"): string;
@@ -324,14 +327,12 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             anchor: (name: string) => string;
             big: () => string;
             blink: () => string;
-            bold: () => string;
             fontcolor: (color: string) => string;
             fontsize: {
                 (size: number): string;
                 (size: string): string;
             };
             italics: () => string;
-            link: (url: string) => string;
             strike: () => string;
             sub: () => string;
             sup: () => string;
@@ -342,7 +343,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             trimLeft: () => string;
             trimRight: () => string;
             matchAll: (regexp: RegExp) => RegExpStringIterator<RegExpExecArray>;
-            toString: () => string;
             valueOf: () => string;
         } | undefined;
         headerProps?: any;
@@ -369,7 +369,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
         title?: string | undefined;
         align?: {
             readonly [x: number]: string;
-            [Symbol.iterator]: () => StringIterator<string>;
             small: () => string;
             fixed: () => string;
             replace: {
@@ -388,11 +387,18 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.search](string: string): number;
                 }): number;
             };
-            charAt: (pos: number) => string;
-            charCodeAt: (index: number) => number;
+            bold: () => string;
+            link: (url: string) => string;
+            [Symbol.iterator]: () => StringIterator<string>;
+            readonly length: number;
             concat: (...strings: string[]) => string;
+            slice: (start?: number, end?: number) => string;
             indexOf: (searchString: string, position?: number) => number;
             lastIndexOf: (searchString: string, position?: number) => number;
+            includes: (searchString: string, position?: number) => boolean;
+            toString: () => string;
+            charAt: (pos: number) => string;
+            charCodeAt: (index: number) => number;
             localeCompare: {
                 (that: string): number;
                 (that: string, locales?: string | string[], options?: Intl.CollatorOptions): number;
@@ -404,7 +410,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.match](string: string): RegExpMatchArray | null;
                 }): RegExpMatchArray | null;
             };
-            slice: (start?: number, end?: number) => string;
             split: {
                 (separator: string | RegExp, limit?: number): string[];
                 (splitter: {
@@ -423,10 +428,8 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                 (locales?: Intl.LocalesArgument): string;
             };
             trim: () => string;
-            readonly length: number;
             substr: (from: number, length?: number) => string;
             codePointAt: (pos: number) => number | undefined;
-            includes: (searchString: string, position?: number) => boolean;
             endsWith: (searchString: string, endPosition?: number) => boolean;
             normalize: {
                 (form: "NFC" | "NFD" | "NFKC" | "NFKD"): string;
@@ -437,14 +440,12 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             anchor: (name: string) => string;
             big: () => string;
             blink: () => string;
-            bold: () => string;
             fontcolor: (color: string) => string;
             fontsize: {
                 (size: number): string;
                 (size: string): string;
             };
             italics: () => string;
-            link: (url: string) => string;
             strike: () => string;
             sub: () => string;
             sup: () => string;
@@ -455,7 +456,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             trimLeft: () => string;
             trimRight: () => string;
             matchAll: (regexp: RegExp) => RegExpStringIterator<RegExpExecArray>;
-            toString: () => string;
             valueOf: () => string;
         } | undefined;
         headerProps?: any;

package/dist/src/composables/Mask/index.cjs

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _mask = require("./mask.composable.cjs");
+Object.keys(_mask).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _mask[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _mask[key];
+    }
+  });
+});

package/dist/src/composables/Mask/index.d.ts

@@ -0,0 +1 @@
+export * from './mask.composable';

package/dist/src/composables/Mask/index.js

@@ -0,0 +1 @@
+export * from "./mask.composable.js";

package/dist/src/composables/Mask/mask.composable.cjs

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMask = useMask;
+var _vue = require("vue");
+var _utils = require("../../utils/index.cjs");
+function useMask(modelValue, mask) {
+  const config = (0, _vue.computed)(() => {
+    return (0, _utils.resolveMaskConfig)((0, _vue.unref)(mask) ?? null);
+  });
+  const masked = (0, _vue.ref)("");
+  const unmasked = (0, _vue.ref)("");
+  const complete = (0, _vue.ref)(false);
+  function recompute(raw) {
+    const cfg = config.value;
+    const source = raw ?? "";
+    if (!cfg) {
+      masked.value = source;
+      unmasked.value = source;
+      complete.value = false;
+      return;
+    }
+    const r = (0, _utils.applyMask)(source, cfg.pattern);
+    masked.value = r.masked;
+    unmasked.value = r.unmasked;
+    complete.value = r.complete;
+  }
+  recompute((0, _vue.unref)(modelValue));
+  if ((0, _vue.isRef)(modelValue)) {
+    (0, _vue.watch)(modelValue, v => recompute(v));
+  }
+  (0, _vue.watch)(config, () => recompute((0, _vue.unref)(modelValue) ?? unmasked.value));
+  const isValid = (0, _vue.computed)(() => {
+    const cfg = config.value;
+    if (!cfg) return true;
+    if (!unmasked.value) return !cfg.required;
+    if (cfg.required && !complete.value) return false;
+    if (cfg.validator) {
+      return (0, _utils.validatePattern)(unmasked.value, cfg.validator);
+    }
+    return complete.value;
+  });
+  function setRaw(raw) {
+    recompute(raw);
+    return unmasked.value;
+  }
+  return {
+    masked,
+    unmasked,
+    isValid,
+    complete,
+    setRaw,
+    config
+  };
+}

package/dist/src/composables/Mask/mask.composable.d.ts

@@ -0,0 +1,39 @@
+import { MaybeRef, Ref } from 'vue';
+import type { IMaskOptions, IResolvedMaskConfig } from '../../interfaces';
+import type { TMask } from '../../types';
+/**
+ * Public return shape of `useMask`.
+ */
+export interface IUseMaskReturn {
+    masked: Ref<string>;
+    unmasked: Ref<string>;
+    isValid: Ref<boolean>;
+    complete: Ref<boolean>;
+    /**
+     * Imperatively re-run the formatter on a raw value
+     * (used by paste / external sync). Returns the new
+     * `unmasked` so callers can keep their model in sync.
+     */
+    setRaw: (raw: string) => string;
+    /**
+     * Currently resolved config (pattern + validator +
+     * required). `null` when no mask is active.
+     */
+    config: Ref<IResolvedMaskConfig | null>;
+}
+/**
+ * Reactive mask engine — keeps `masked`, `unmasked`,
+ * `isValid` and `complete` in sync with a source string
+ * (`modelValue`) and a (possibly polymorphic) mask spec.
+ *
+ * Both the value and the mask are accepted as a `MaybeRef`
+ * so the composable plays well with `props.modelValue` and
+ * a static `props.mask` alike.
+ *
+ * Reactivity:
+ *   - When `modelValue` changes → reformat + revalidate.
+ *   - When `mask` changes      → re-resolve config, reformat
+ *                                the current value.
+ */
+export declare function useMask(modelValue: MaybeRef<string | null | undefined>, mask: MaybeRef<TMask | undefined>): IUseMaskReturn;
+export type { IMaskOptions };

package/dist/src/composables/Mask/mask.composable.js

@@ -0,0 +1,51 @@
+import { computed, isRef, ref, unref, watch } from "vue";
+import { applyMask, resolveMaskConfig, validatePattern } from "../../utils/index.js";
+export function useMask(modelValue, mask) {
+  const config = computed(() => {
+    return resolveMaskConfig(unref(mask) ?? null);
+  });
+  const masked = ref("");
+  const unmasked = ref("");
+  const complete = ref(false);
+  function recompute(raw) {
+    const cfg = config.value;
+    const source = raw ?? "";
+    if (!cfg) {
+      masked.value = source;
+      unmasked.value = source;
+      complete.value = false;
+      return;
+    }
+    const r = applyMask(source, cfg.pattern);
+    masked.value = r.masked;
+    unmasked.value = r.unmasked;
+    complete.value = r.complete;
+  }
+  recompute(unref(modelValue));
+  if (isRef(modelValue)) {
+    watch(modelValue, (v) => recompute(v));
+  }
+  watch(config, () => recompute(unref(modelValue) ?? unmasked.value));
+  const isValid = computed(() => {
+    const cfg = config.value;
+    if (!cfg) return true;
+    if (!unmasked.value) return !cfg.required;
+    if (cfg.required && !complete.value) return false;
+    if (cfg.validator) {
+      return validatePattern(unmasked.value, cfg.validator);
+    }
+    return complete.value;
+  });
+  function setRaw(raw) {
+    recompute(raw);
+    return unmasked.value;
+  }
+  return {
+    masked,
+    unmasked,
+    isValid,
+    complete,
+    setRaw,
+    config
+  };
+}

package/dist/src/composables/Parallax/parallax.composable.cjs

@@ -0,0 +1,232 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useParallaxRuntime = useParallaxRuntime;
+var _vue = require("vue");
+var _cssSupport = require("../CssSupport/cssSupport.composable.cjs");
+var _enums = require("../../enums/index.cjs");
+function usePrefersReducedMotion() {
+  const flag = (0, _vue.ref)(false);
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return flag;
+  }
+  const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+  flag.value = mql.matches;
+  const onChange = ev => {
+    flag.value = ev.matches;
+  };
+  if (typeof mql.addEventListener === "function") {
+    mql.addEventListener("change", onChange);
+  } else if (typeof mql.addListener === "function") {
+    mql.addListener(onChange);
+  }
+  (0, _vue.onBeforeUnmount)(() => {
+    if (typeof mql.removeEventListener === "function") {
+      mql.removeEventListener("change", onChange);
+    } else if (typeof mql.removeListener === "function") {
+      mql.removeListener(onChange);
+    }
+  });
+  return flag;
+}
+function composeLayerTransform(progress, mouseRatio, direction, layer, hostHeight, hostWidth) {
+  const centred = progress * 2 - 1;
+  let tx = layer.offsetX;
+  let ty = layer.offsetY;
+  switch (direction) {
+    case _enums.PARALLAX_DIRECTION.HORIZONTAL:
+      tx += centred * hostWidth * layer.speed;
+      break;
+    case _enums.PARALLAX_DIRECTION.BOTH:
+      tx += mouseRatio.x * hostWidth * 0.5 * layer.speed;
+      ty += centred * hostHeight * layer.speed;
+      break;
+    case _enums.PARALLAX_DIRECTION.VERTICAL:
+    default:
+      ty += centred * hostHeight * layer.speed;
+      break;
+  }
+  return `translate3d(${tx.toFixed(2)}px, ${ty.toFixed(2)}px, 0)`;
+}
+function useParallaxRuntime(options) {
+  const {
+    supports
+  } = (0, _cssSupport.useCssSupport)();
+  const cssScrollDriven = (0, _vue.computed)(() => supports("animation-timeline: scroll()") && options.easing.value === _enums.PARALLAX_EASING.LINEAR);
+  const reducedMotion = usePrefersReducedMotion();
+  const layers = (0, _vue.ref)([]);
+  const progress = (0, _vue.ref)(0);
+  const mouseRatio = (0, _vue.ref)({
+    x: 0,
+    y: 0
+  });
+  let isInViewport = false;
+  let rafId = null;
+  let observer = null;
+  const layerLerp = /* @__PURE__ */new WeakMap();
+  const register = layer => {
+    layers.value.push(layer);
+  };
+  const unregister = id => {
+    layers.value = layers.value.filter(l => l.id !== id);
+  };
+  const updateProgress = () => {
+    const host = options.target.value;
+    if (!host) return;
+    const rect = host.getBoundingClientRect();
+    const vh = window.innerHeight || document.documentElement.clientHeight;
+    const total = rect.height + vh;
+    const distanceFromTop = vh - rect.top;
+    let p = distanceFromTop / total;
+    if (p < 0) p = 0;
+    if (p > 1) p = 1;
+    const t = options.threshold.value;
+    if (t > 0 && p < t) {
+      p = 0;
+    } else if (t > 0) {
+      p = (p - t) / (1 - t);
+    }
+    progress.value = p;
+    options.onProgress?.(p);
+  };
+  const applyLayerTransforms = () => {
+    const host = options.target.value;
+    if (!host) return;
+    const rect = host.getBoundingClientRect();
+    const dir = options.direction.value;
+    const easing = options.easing.value;
+    const isSpring = easing === _enums.PARALLAX_EASING.SPRING;
+    for (const layer of layers.value) {
+      if (options.disabled.value || reducedMotion.value) {
+        layer.target.style.transform = `translate3d(${layer.offsetX}px, ${layer.offsetY}px, 0)`;
+        continue;
+      }
+      const target = composeLayerTransform(progress.value, mouseRatio.value, dir, layer, rect.height, rect.width);
+      if (!isSpring) {
+        layer.target.style.transform = target;
+        continue;
+      }
+      const match = /translate3d\(([-\d.]+)px,\s*([-\d.]+)px/.exec(target);
+      if (!match) {
+        layer.target.style.transform = target;
+        continue;
+      }
+      const targetTx = parseFloat(match[1]);
+      const targetTy = parseFloat(match[2]);
+      const current = layerLerp.get(layer.target) ?? {
+        tx: targetTx,
+        ty: targetTy
+      };
+      const damping = 0.12;
+      current.tx += (targetTx - current.tx) * damping;
+      current.ty += (targetTy - current.ty) * damping;
+      layerLerp.set(layer.target, current);
+      layer.target.style.transform = `translate3d(${current.tx.toFixed(2)}px, ${current.ty.toFixed(2)}px, 0)`;
+    }
+  };
+  const tick = () => {
+    rafId = null;
+    updateProgress();
+    applyLayerTransforms();
+    if (isInViewport && !options.disabled.value && !reducedMotion.value) {
+      rafId = requestAnimationFrame(tick);
+    }
+  };
+  const onScroll = () => {
+    if (rafId == null && isInViewport) {
+      rafId = requestAnimationFrame(tick);
+    }
+  };
+  const onMouseMove = event => {
+    if (options.direction.value !== _enums.PARALLAX_DIRECTION.BOTH) return;
+    const host = options.target.value;
+    if (!host) return;
+    const rect = host.getBoundingClientRect();
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+    mouseRatio.value = {
+      x: (event.clientX - cx) / (rect.width / 2),
+      y: (event.clientY - cy) / (rect.height / 2)
+    };
+    if (rafId == null && isInViewport) {
+      rafId = requestAnimationFrame(tick);
+    }
+  };
+  const startCss = () => {
+    const host = options.target.value;
+    if (!host) return;
+    for (const layer of layers.value) {
+      layer.target.style.setProperty("--origam-parallax__layer---speed", String(layer.speed));
+      layer.target.style.setProperty("--origam-parallax__layer---offset-x", `${layer.offsetX}px`);
+      layer.target.style.setProperty("--origam-parallax__layer---offset-y", `${layer.offsetY}px`);
+    }
+  };
+  (0, _vue.onMounted)(() => {
+    const host = options.target.value;
+    if (!host) return;
+    observer = new IntersectionObserver(entries => {
+      for (const entry of entries) {
+        if (entry.isIntersecting && !isInViewport) {
+          isInViewport = true;
+          options.onEnter?.();
+          if (!cssScrollDriven.value) {
+            if (rafId == null) rafId = requestAnimationFrame(tick);
+          } else {
+            startCss();
+          }
+        } else if (!entry.isIntersecting && isInViewport) {
+          isInViewport = false;
+          options.onLeave?.();
+        }
+      }
+    }, {
+      threshold: 0
+    });
+    observer.observe(host);
+    if (!cssScrollDriven.value) {
+      window.addEventListener("scroll", onScroll, {
+        passive: true
+      });
+      window.addEventListener("resize", onScroll, {
+        passive: true
+      });
+      host.addEventListener("mousemove", onMouseMove, {
+        passive: true
+      });
+      requestAnimationFrame(tick);
+    }
+  });
+  (0, _vue.onBeforeUnmount)(() => {
+    if (rafId != null) cancelAnimationFrame(rafId);
+    observer?.disconnect();
+    observer = null;
+    if (typeof window !== "undefined") {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+    }
+    const host = options.target.value;
+    host?.removeEventListener("mousemove", onMouseMove);
+  });
+  (0, _vue.watch)(cssScrollDriven, v => {
+    if (v) {
+      if (rafId != null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+      startCss();
+    } else if (isInViewport && rafId == null) {
+      rafId = requestAnimationFrame(tick);
+    }
+  });
+  return {
+    layers,
+    progress,
+    mouseRatio,
+    cssScrollDriven,
+    reducedMotion,
+    register,
+    unregister
+  };
+}