origam 2.16.0 → 2.17.0

package/dist/src/composables/Media/use-media-player.composable.cjs

@@ -7,12 +7,7 @@ exports.shouldSuppressAutoplay = shouldSuppressAutoplay;
 exports.useMediaPlayer = useMediaPlayer;
 var _vue = require("vue");
 var _media = require("../../consts/Media/media.const.cjs");
-function prefersReducedMotion() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
-    return false;
-  }
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
+var _animation = require("../../utils/Commons/animation.util.cjs");
 function readBufferedEnd(media) {
   if (!media.buffered || media.buffered.length === 0) return 0;
   try {
@@ -29,11 +24,11 @@ function useMediaPlayer(options = {}) {
   const duration = (0, _vue.ref)(NaN);
   const buffered = (0, _vue.ref)(0);
   const volume = (0, _vue.ref)(_media.MEDIA_DEFAULT_VOLUME);
-  const muted = (0, _vue.ref)(Boolean(options.muted));
+  const muted = (0, _vue.ref)(false);
   const ready = (0, _vue.ref)(false);
   const loading = (0, _vue.ref)(false);
   const error = (0, _vue.ref)(null);
-  const playbackRate = (0, _vue.ref)(1);
+  const playbackRate = (0, _vue.ref)(_media.MEDIA_DEFAULT_PLAYBACK_RATE);
   const remoteAvailable = (0, _vue.ref)(false);
   const remoteState = (0, _vue.ref)("disconnected");
   const play = async () => {
@@ -60,9 +55,9 @@ function useMediaPlayer(options = {}) {
   const setVolume = value => {
     const el = mediaRef.value;
     if (!el) return;
-    const clamped = Math.max(0, Math.min(1, value));
+    const clamped = Math.max(_media.MEDIA_MIN_VOLUME, Math.min(_media.MEDIA_MAX_VOLUME, value));
     el.volume = clamped;
-    if (clamped > 0 && el.muted) {
+    if (clamped > _media.MEDIA_MIN_VOLUME && el.muted) {
       el.muted = false;
     }
   };
@@ -87,7 +82,7 @@ function useMediaPlayer(options = {}) {
   const setPlaybackRate = rate => {
     const el = mediaRef.value;
     if (!el) return;
-    const clamped = Math.max(0.25, Math.min(4, rate));
+    const clamped = Math.max(_media.MEDIA_MIN_PLAYBACK_RATE, Math.min(_media.MEDIA_MAX_PLAYBACK_RATE, rate));
     el.playbackRate = clamped;
     playbackRate.value = clamped;
   };
@@ -160,7 +155,7 @@ function useMediaPlayer(options = {}) {
   const onError = () => {
     loading.value = false;
     const el = mediaRef.value;
-    if (el?.error) error.value = el.error;else error.value = new Error("Unknown media error");
+    if (el?.error) error.value = el.error;else error.value = new Error(_media.MEDIA_UNKNOWN_ERROR_MESSAGE);
   };
   const onRateChange = () => {
     const el = mediaRef.value;
@@ -205,15 +200,15 @@ function useMediaPlayer(options = {}) {
       }
     }
     volume.value = el.volume;
-    muted.value = el.muted || Boolean(options.muted);
+    muted.value = el.muted || Boolean((0, _vue.toValue)(options.muted));
     paused.value = el.paused;
     playing.value = !el.paused;
     if (Number.isFinite(el.duration)) {
       duration.value = el.duration;
       ready.value = true;
     }
-    if (options.autoplay && prefersReducedMotion()) {
-      console.warn("[origam:media] `autoplay` requested but the user prefers reduced motion; autoplay was suppressed.");
+    if ((0, _vue.toValue)(options.autoplay) && (0, _animation.prefersReducedMotion)()) {
+      console.warn(_media.MEDIA_AUTOPLAY_SUPPRESSED_WARNING);
     }
   };
   const unbind = el => {
@@ -282,5 +277,5 @@ function useMediaPlayer(options = {}) {
   };
 }
 function shouldSuppressAutoplay() {
-  return prefersReducedMotion();
+  return (0, _animation.prefersReducedMotion)();
 }

package/dist/src/composables/Media/use-media-player.composable.d.ts

@@ -1,5 +1,5 @@
 import { type Ref } from 'vue';
-import type { IMediaPlayerMethods, IMediaPlayerState, IUseMediaPlayerOptions } from '../../interfaces';
+import type { IMediaPlayerMethods, IMediaPlayerState, IUseMediaPlayerOptions } from '../../interfaces/Media/media-player.interface';
 /**
  * Headless media-player composable. Owns the media-shared runtime
  * state (`playing`, `paused`, `currentTime`, `duration`, `buffered`,

package/dist/src/composables/Media/use-media-player.composable.js

@@ -1,15 +1,20 @@
 import {
   onBeforeUnmount,
   onMounted,
-  ref
+  ref,
+  toValue
 } from "vue";
-import { MEDIA_DEFAULT_VOLUME } from "../../consts/Media/media.const.js";
-function prefersReducedMotion() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
-    return false;
-  }
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
+import {
+  MEDIA_AUTOPLAY_SUPPRESSED_WARNING,
+  MEDIA_DEFAULT_PLAYBACK_RATE,
+  MEDIA_DEFAULT_VOLUME,
+  MEDIA_MAX_PLAYBACK_RATE,
+  MEDIA_MAX_VOLUME,
+  MEDIA_MIN_PLAYBACK_RATE,
+  MEDIA_MIN_VOLUME,
+  MEDIA_UNKNOWN_ERROR_MESSAGE
+} from "../../consts/Media/media.const.js";
+import { prefersReducedMotion } from "../../utils/Commons/animation.util.js";
 function readBufferedEnd(media) {
   if (!media.buffered || media.buffered.length === 0) return 0;
   try {
@@ -26,11 +31,11 @@ export function useMediaPlayer(options = {}) {
   const duration = ref(NaN);
   const buffered = ref(0);
   const volume = ref(MEDIA_DEFAULT_VOLUME);
-  const muted = ref(Boolean(options.muted));
+  const muted = ref(false);
   const ready = ref(false);
   const loading = ref(false);
   const error = ref(null);
-  const playbackRate = ref(1);
+  const playbackRate = ref(MEDIA_DEFAULT_PLAYBACK_RATE);
   const remoteAvailable = ref(false);
   const remoteState = ref("disconnected");
   const play = async () => {
@@ -58,9 +63,9 @@ export function useMediaPlayer(options = {}) {
   const setVolume = (value) => {
     const el = mediaRef.value;
     if (!el) return;
-    const clamped = Math.max(0, Math.min(1, value));
+    const clamped = Math.max(MEDIA_MIN_VOLUME, Math.min(MEDIA_MAX_VOLUME, value));
     el.volume = clamped;
-    if (clamped > 0 && el.muted) {
+    if (clamped > MEDIA_MIN_VOLUME && el.muted) {
       el.muted = false;
     }
   };
@@ -85,7 +90,7 @@ export function useMediaPlayer(options = {}) {
   const setPlaybackRate = (rate) => {
     const el = mediaRef.value;
     if (!el) return;
-    const clamped = Math.max(0.25, Math.min(4, rate));
+    const clamped = Math.max(MEDIA_MIN_PLAYBACK_RATE, Math.min(MEDIA_MAX_PLAYBACK_RATE, rate));
     el.playbackRate = clamped;
     playbackRate.value = clamped;
   };
@@ -159,7 +164,7 @@ export function useMediaPlayer(options = {}) {
     loading.value = false;
     const el = mediaRef.value;
     if (el?.error) error.value = el.error;
-    else error.value = new Error("Unknown media error");
+    else error.value = new Error(MEDIA_UNKNOWN_ERROR_MESSAGE);
   };
   const onRateChange = () => {
     const el = mediaRef.value;
@@ -205,17 +210,15 @@ export function useMediaPlayer(options = {}) {
       }
     }
     volume.value = el.volume;
-    muted.value = el.muted || Boolean(options.muted);
+    muted.value = el.muted || Boolean(toValue(options.muted));
     paused.value = el.paused;
     playing.value = !el.paused;
     if (Number.isFinite(el.duration)) {
       duration.value = el.duration;
       ready.value = true;
     }
-    if (options.autoplay && prefersReducedMotion()) {
-      console.warn(
-        "[origam:media] `autoplay` requested but the user prefers reduced motion; autoplay was suppressed."
-      );
+    if (toValue(options.autoplay) && prefersReducedMotion()) {
+      console.warn(MEDIA_AUTOPLAY_SUPPRESSED_WARNING);
     }
   };
   const unbind = (el) => {

package/dist/src/composables/NumberField/hold.composable.cjs

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useHold = useHold;
 var _vue = require("vue");
+var _numberField = require("../../consts/NumberField/number-field.const.cjs");
 function useHold({
   toggleUpDown
-}, holdRepeat = 50, holdDelay = 500) {
+}, holdRepeat = _numberField.NUMBER_FIELD_DEFAULT_HOLD_REPEAT, holdDelay = _numberField.NUMBER_FIELD_DEFAULT_HOLD_DELAY) {
   let timeout = -1;
   let interval = -1;
   (0, _vue.onScopeDispose)(holdStop);
@@ -15,8 +16,8 @@ function useHold({
     holdStop();
     tick(value);
     timeout = window.setTimeout(() => {
-      interval = window.setInterval(() => tick(value), holdRepeat);
-    }, holdDelay);
+      interval = window.setInterval(() => tick(value), (0, _vue.toValue)(holdRepeat));
+    }, (0, _vue.toValue)(holdDelay));
   }
   function holdStop() {
     window.clearTimeout(timeout);

package/dist/src/composables/NumberField/hold.composable.d.ts

@@ -1,9 +1,20 @@
+import { type MaybeRefOrGetter } from "vue";
 /*********************************************************
  * useHold
+ *
+ * @description
+ * `holdRepeat` / `holdDelay` accept `MaybeRefOrGetter<number>` (a plain
+ * number still works) and are read via `toValue()` inside `holdStart` —
+ * at the moment a NEW hold sequence begins — rather than once when
+ * `useHold()` itself is called. The caller (`OrigamNumberField.vue`)
+ * passes `() => props.holdRepeat` / `() => props.holdDelay`, so a prop
+ * change reaching the component after mount is honoured by the next
+ * press-and-hold, instead of being silently frozen for the component's
+ * whole lifetime (#487).
  ********************************************************/
 export declare function useHold({ toggleUpDown }: {
     toggleUpDown: (increment: boolean) => void;
-}, holdRepeat?: number, holdDelay?: number): {
+}, holdRepeat?: MaybeRefOrGetter<number>, holdDelay?: MaybeRefOrGetter<number>): {
     holdStart: (value: "up" | "down") => void;
     holdStop: () => void;
 };

package/dist/src/composables/NumberField/hold.composable.js

@@ -1,5 +1,6 @@
-import { onScopeDispose } from "vue";
-export function useHold({ toggleUpDown }, holdRepeat = 50, holdDelay = 500) {
+import { onScopeDispose, toValue } from "vue";
+import { NUMBER_FIELD_DEFAULT_HOLD_DELAY, NUMBER_FIELD_DEFAULT_HOLD_REPEAT } from "../../consts/NumberField/number-field.const.js";
+export function useHold({ toggleUpDown }, holdRepeat = NUMBER_FIELD_DEFAULT_HOLD_REPEAT, holdDelay = NUMBER_FIELD_DEFAULT_HOLD_DELAY) {
   let timeout = -1;
   let interval = -1;
   onScopeDispose(holdStop);
@@ -7,8 +8,8 @@ export function useHold({ toggleUpDown }, holdRepeat = 50, holdDelay = 500) {
     holdStop();
     tick(value);
     timeout = window.setTimeout(() => {
-      interval = window.setInterval(() => tick(value), holdRepeat);
-    }, holdDelay);
+      interval = window.setInterval(() => tick(value), toValue(holdRepeat));
+    }, toValue(holdDelay));
   }
   function holdStop() {
     window.clearTimeout(timeout);

package/dist/src/composables/NumberFormat/number-format.composable.d.ts

@@ -1,5 +1,5 @@
 import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
-import type { IUseNumberFormatOptions } from '../../interfaces';
+import type { IUseNumberFormatOptions } from '../../interfaces/NumberFormat/number-format.interface';
 /**
  * Test helper — clears the module-level LRU. Exposed for the unit-test
  * suite (cache-hit assertion) and not advertised in the public docs.

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

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useParallaxRuntime = useParallaxRuntime;
 var _vue = require("vue");
-var _cssSupport = require("../CssSupport/cssSupport.composable.cjs");
+var _cssSupport = require("../Commons/cssSupport.composable.cjs");
+var _parallax = require("../../consts/Parallax/parallax.const.cjs");
+var _parallaxLayer = require("../../consts/Parallax/parallax-layer.const.cjs");
 var _enums = require("../../enums/index.cjs");
 function usePrefersReducedMotion() {
   const flag = (0, _vue.ref)(false);
@@ -40,7 +42,7 @@ function composeLayerTransform(progress, mouseRatio, direction, layer, hostHeigh
       tx += centred * hostWidth * layer.speed;
       break;
     case _enums.PARALLAX_DIRECTION.BOTH:
-      tx += mouseRatio.x * hostWidth * 0.5 * layer.speed;
+      tx += mouseRatio.x * hostWidth * _parallax.PARALLAX_MOUSE_AMPLITUDE_FACTOR * layer.speed;
       ty += centred * hostHeight * layer.speed;
       break;
     case _enums.PARALLAX_DIRECTION.VERTICAL:
@@ -48,7 +50,7 @@ function composeLayerTransform(progress, mouseRatio, direction, layer, hostHeigh
       ty += centred * hostHeight * layer.speed;
       break;
   }
-  return `translate3d(${tx.toFixed(2)}px, ${ty.toFixed(2)}px, 0)`;
+  return `translate3d(${tx.toFixed(_parallax.PARALLAX_TRANSFORM_PRECISION)}px, ${ty.toFixed(_parallax.PARALLAX_TRANSFORM_PRECISION)}px, 0)`;
 }
 function useParallaxRuntime(options) {
   const {
@@ -64,14 +66,30 @@ function useParallaxRuntime(options) {
   });
   let isInViewport = false;
   let rafId = null;
+  let progressRafId = null;
   let observer = null;
   const layerLerp = /* @__PURE__ */new WeakMap();
+  const publishLayerVars = layer => {
+    layer.target.style.setProperty(_parallaxLayer.PARALLAX_LAYER_VAR_SPEED, String(layer.speed));
+    layer.target.style.setProperty(_parallaxLayer.PARALLAX_LAYER_VAR_OFFSET_X, `${layer.offsetX}px`);
+    layer.target.style.setProperty(_parallaxLayer.PARALLAX_LAYER_VAR_OFFSET_Y, `${layer.offsetY}px`);
+  };
   const register = layer => {
     layers.value.push(layer);
   };
   const unregister = id => {
     layers.value = layers.value.filter(l => l.id !== id);
   };
+  const update = (id, patch) => {
+    const layer = layers.value.find(l => l.id === id);
+    if (!layer) return;
+    layer.speed = patch.speed;
+    layer.offsetX = patch.offsetX;
+    layer.offsetY = patch.offsetY;
+    if (cssScrollDriven.value) {
+      publishLayerVars(layer);
+    }
+  };
   const updateProgress = () => {
     const host = options.target.value;
     if (!host) return;
@@ -119,11 +137,10 @@ function useParallaxRuntime(options) {
         tx: targetTx,
         ty: targetTy
       };
-      const damping = 0.12;
-      current.tx += (targetTx - current.tx) * damping;
-      current.ty += (targetTy - current.ty) * damping;
+      current.tx += (targetTx - current.tx) * _parallax.PARALLAX_SPRING_DAMPING;
+      current.ty += (targetTy - current.ty) * _parallax.PARALLAX_SPRING_DAMPING;
       layerLerp.set(layer.target, current);
-      layer.target.style.transform = `translate3d(${current.tx.toFixed(2)}px, ${current.ty.toFixed(2)}px, 0)`;
+      layer.target.style.transform = `translate3d(${current.tx.toFixed(_parallax.PARALLAX_TRANSFORM_PRECISION)}px, ${current.ty.toFixed(_parallax.PARALLAX_TRANSFORM_PRECISION)}px, 0)`;
     }
   };
   const tick = () => {
@@ -135,7 +152,16 @@ function useParallaxRuntime(options) {
     }
   };
   const onScroll = () => {
-    if (rafId == null && isInViewport) {
+    if (!isInViewport) return;
+    if (cssScrollDriven.value) {
+      if (progressRafId != null) return;
+      progressRafId = requestAnimationFrame(() => {
+        progressRafId = null;
+        updateProgress();
+      });
+      return;
+    }
+    if (rafId == null) {
       rafId = requestAnimationFrame(tick);
     }
   };
@@ -158,9 +184,7 @@ function useParallaxRuntime(options) {
     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`);
+      publishLayerVars(layer);
     }
   };
   (0, _vue.onMounted)(() => {
@@ -185,13 +209,13 @@ function useParallaxRuntime(options) {
       threshold: 0
     });
     observer.observe(host);
+    window.addEventListener("scroll", onScroll, {
+      passive: true
+    });
+    window.addEventListener("resize", onScroll, {
+      passive: true
+    });
     if (!cssScrollDriven.value) {
-      window.addEventListener("scroll", onScroll, {
-        passive: true
-      });
-      window.addEventListener("resize", onScroll, {
-        passive: true
-      });
       host.addEventListener("mousemove", onMouseMove, {
         passive: true
       });
@@ -200,6 +224,10 @@ function useParallaxRuntime(options) {
   });
   (0, _vue.onBeforeUnmount)(() => {
     if (rafId != null) cancelAnimationFrame(rafId);
+    if (progressRafId != null) {
+      cancelAnimationFrame(progressRafId);
+      progressRafId = null;
+    }
     observer?.disconnect();
     observer = null;
     if (typeof window !== "undefined") {
@@ -227,6 +255,7 @@ function useParallaxRuntime(options) {
     cssScrollDriven,
     reducedMotion,
     register,
-    unregister
+    unregister,
+    update
   };
 }

package/dist/src/composables/Parallax/parallax.composable.d.ts

@@ -1,6 +1,7 @@
 import { type Ref } from 'vue';
-import type { IParallaxLayerRegistry, IUseParallaxRuntimeOptions } from '../../interfaces';
-export type { IUseParallaxRuntimeOptions } from '../../interfaces';
+import type { IParallaxLayerRegistry } from '../../interfaces/Parallax/parallax-layer.interface';
+import type { IUseParallaxRuntimeOptions } from '../../interfaces/Parallax/parallax.interface';
+export type { IUseParallaxRuntimeOptions } from '../../interfaces/Parallax/parallax.interface';
 /*********************************************************
  * useParallaxRuntime
  *
@@ -39,4 +40,5 @@ export declare function useParallaxRuntime(options: IUseParallaxRuntimeOptions):
     reducedMotion: Ref<boolean, boolean>;
     register: (layer: IParallaxLayerRegistry) => void;
     unregister: (id: symbol) => void;
+    update: (id: symbol, patch: Pick<IParallaxLayerRegistry, "speed" | "offsetX" | "offsetY">) => void;
 };

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

@@ -1,5 +1,15 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
-import { useCssSupport } from "../CssSupport/cssSupport.composable.js";
+import { useCssSupport } from "../Commons/cssSupport.composable.js";
+import {
+  PARALLAX_MOUSE_AMPLITUDE_FACTOR,
+  PARALLAX_SPRING_DAMPING,
+  PARALLAX_TRANSFORM_PRECISION
+} from "../../consts/Parallax/parallax.const.js";
+import {
+  PARALLAX_LAYER_VAR_OFFSET_X,
+  PARALLAX_LAYER_VAR_OFFSET_Y,
+  PARALLAX_LAYER_VAR_SPEED
+} from "../../consts/Parallax/parallax-layer.const.js";
 import { PARALLAX_DIRECTION, PARALLAX_EASING } from "../../enums/index.js";
 function usePrefersReducedMotion() {
   const flag = ref(false);
@@ -34,7 +44,7 @@ function composeLayerTransform(progress, mouseRatio, direction, layer, hostHeigh
       tx += centred * hostWidth * layer.speed;
       break;
     case PARALLAX_DIRECTION.BOTH:
-      tx += mouseRatio.x * hostWidth * 0.5 * layer.speed;
+      tx += mouseRatio.x * hostWidth * PARALLAX_MOUSE_AMPLITUDE_FACTOR * layer.speed;
       ty += centred * hostHeight * layer.speed;
       break;
     case PARALLAX_DIRECTION.VERTICAL:
@@ -42,7 +52,7 @@ function composeLayerTransform(progress, mouseRatio, direction, layer, hostHeigh
       ty += centred * hostHeight * layer.speed;
       break;
   }
-  return `translate3d(${tx.toFixed(2)}px, ${ty.toFixed(2)}px, 0)`;
+  return `translate3d(${tx.toFixed(PARALLAX_TRANSFORM_PRECISION)}px, ${ty.toFixed(PARALLAX_TRANSFORM_PRECISION)}px, 0)`;
 }
 export function useParallaxRuntime(options) {
   const { supports } = useCssSupport();
@@ -55,14 +65,30 @@ export function useParallaxRuntime(options) {
   const mouseRatio = ref({ x: 0, y: 0 });
   let isInViewport = false;
   let rafId = null;
+  let progressRafId = null;
   let observer = null;
   const layerLerp = /* @__PURE__ */ new WeakMap();
+  const publishLayerVars = (layer) => {
+    layer.target.style.setProperty(PARALLAX_LAYER_VAR_SPEED, String(layer.speed));
+    layer.target.style.setProperty(PARALLAX_LAYER_VAR_OFFSET_X, `${layer.offsetX}px`);
+    layer.target.style.setProperty(PARALLAX_LAYER_VAR_OFFSET_Y, `${layer.offsetY}px`);
+  };
   const register = (layer) => {
     layers.value.push(layer);
   };
   const unregister = (id) => {
     layers.value = layers.value.filter((l) => l.id !== id);
   };
+  const update = (id, patch) => {
+    const layer = layers.value.find((l) => l.id === id);
+    if (!layer) return;
+    layer.speed = patch.speed;
+    layer.offsetX = patch.offsetX;
+    layer.offsetY = patch.offsetY;
+    if (cssScrollDriven.value) {
+      publishLayerVars(layer);
+    }
+  };
   const updateProgress = () => {
     const host = options.target.value;
     if (!host) return;
@@ -114,11 +140,10 @@ export function useParallaxRuntime(options) {
       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;
+      current.tx += (targetTx - current.tx) * PARALLAX_SPRING_DAMPING;
+      current.ty += (targetTy - current.ty) * PARALLAX_SPRING_DAMPING;
       layerLerp.set(layer.target, current);
-      layer.target.style.transform = `translate3d(${current.tx.toFixed(2)}px, ${current.ty.toFixed(2)}px, 0)`;
+      layer.target.style.transform = `translate3d(${current.tx.toFixed(PARALLAX_TRANSFORM_PRECISION)}px, ${current.ty.toFixed(PARALLAX_TRANSFORM_PRECISION)}px, 0)`;
     }
   };
   const tick = () => {
@@ -130,7 +155,16 @@ export function useParallaxRuntime(options) {
     }
   };
   const onScroll = () => {
-    if (rafId == null && isInViewport) {
+    if (!isInViewport) return;
+    if (cssScrollDriven.value) {
+      if (progressRafId != null) return;
+      progressRafId = requestAnimationFrame(() => {
+        progressRafId = null;
+        updateProgress();
+      });
+      return;
+    }
+    if (rafId == null) {
       rafId = requestAnimationFrame(tick);
     }
   };
@@ -153,9 +187,7 @@ export function useParallaxRuntime(options) {
     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`);
+      publishLayerVars(layer);
     }
   };
   onMounted(() => {
@@ -178,15 +210,19 @@ export function useParallaxRuntime(options) {
       }
     }, { threshold: 0 });
     observer.observe(host);
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll, { passive: true });
     if (!cssScrollDriven.value) {
-      window.addEventListener("scroll", onScroll, { passive: true });
-      window.addEventListener("resize", onScroll, { passive: true });
       host.addEventListener("mousemove", onMouseMove, { passive: true });
       requestAnimationFrame(tick);
     }
   });
   onBeforeUnmount(() => {
     if (rafId != null) cancelAnimationFrame(rafId);
+    if (progressRafId != null) {
+      cancelAnimationFrame(progressRafId);
+      progressRafId = null;
+    }
     observer?.disconnect();
     observer = null;
     if (typeof window !== "undefined") {
@@ -214,6 +250,7 @@ export function useParallaxRuntime(options) {
     cssScrollDriven,
     reducedMotion,
     register,
-    unregister
+    unregister,
+    update
   };
 }

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

@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useParallaxTransform = useParallaxTransform;
+var _parallaxElement = require("../../consts/Parallax/parallax-element.const.cjs");
 var _enums = require("../../enums/index.cjs");
 var _vue = require("vue");
 function useParallaxTransform(props) {
   const strength = (0, _vue.computed)(() => {
-    const str = props.strength ?? 10;
+    const str = props.strength ?? _parallaxElement.PARALLAX_ELEMENT_DEFAULT_STRENGTH;
     return props.type === _enums.PARALLAX_ELEMENT_TYPE.DEPTH || props.type === _enums.PARALLAX_ELEMENT_TYPE.DEPTH_INV ? Math.abs(str) : str;
   });
   const transformStyles = (x, y) => {
@@ -34,33 +35,44 @@ function useParallaxTransform(props) {
     }
     return transform;
   };
+  const toMovement = offset => {
+    return strength.value * offset / _parallaxElement.PARALLAX_ELEMENT_MOVEMENT_DIVISOR + _parallaxElement.PARALLAX_ELEMENT_MOVEMENT_BASE;
+  };
   const translateMovement = (x, y) => {
-    const movementX = strength.value * x / 10 + 1;
-    const movementY = strength.value * y / 10 + 1;
+    const movementX = toMovement(x);
+    const movementY = toMovement(y);
     return `translate3d(${-movementX}px, ${-movementY}px, 0)`;
   };
   const rotateMovement = (x, y) => {
     let movement = 0;
     if (!props.axis) {
-      movement = strength.value * (x + y) / 10 + 1;
+      movement = toMovement(x + y);
     } else if (props.axis === _enums.AXIS.X) {
-      movement = strength.value * x / 10 + 1;
+      movement = toMovement(x);
     } else if (props.axis === _enums.AXIS.Y) {
-      movement = strength.value * y / 10 + 1;
+      movement = toMovement(y);
     }
     return `rotate3d(0,0,1,${movement}deg)`;
   };
   const depthMovement = (x, y) => {
-    return `rotateX(${-y}deg) rotateY(${x}deg) translate3d(0,0,${strength.value * 2}px)`;
+    const depth = strength.value * _parallaxElement.PARALLAX_ELEMENT_DEPTH_TRANSLATE_FACTOR;
+    return `rotateX(${-y}deg) rotateY(${x}deg) translate3d(0,0,${depth}px)`;
   };
   const scaleMovement = (x, y) => {
-    const movement = strength.value * (Math.abs(x) + Math.abs(y)) / 10 + 1;
+    const movement = toMovement(Math.abs(x) + Math.abs(y));
     return `scale3d(${props.type === _enums.PARALLAX_ELEMENT_TYPE.SCALE_X || props.type === _enums.PARALLAX_ELEMENT_TYPE.SCALE ? movement : 1},
             ${props.type === _enums.PARALLAX_ELEMENT_TYPE.SCALE_Y || props.type === _enums.PARALLAX_ELEMENT_TYPE.SCALE ? movement : 1},
             1)`;
   };
+  const customMovement = (x, y) => {
+    return {
+      x: toMovement(x),
+      y: toMovement(y)
+    };
+  };
   return {
     transformStyles,
-    strength
+    strength,
+    customMovement
   };
 }

package/dist/src/composables/Parallax/transform.composable.d.ts

@@ -1,8 +1,26 @@
-import type { IParallaxElementProps } from '../../interfaces';
+import type { IParallaxElementProps } from '../../interfaces/Parallax/parallax-element.interface';
 /*********************************************************
  * useParallaxTransform
  ********************************************************/
+/*********************************************************
+ * useParallaxTransform
+ *
+ * @description
+ * Traduit une position de defilement en declaration `transform` pour un
+ * `<origam-parallax-element>`, selon son `type` : `translate`, `rotate`,
+ * `scale`, `depth` et `depth-inv`.
+ *
+ * @description
+ * ⛔ Les deux types de profondeur forcent `Math.abs(strength)`. Une force
+ * negative y serait contradictoire — c'est `depth-inv` qui porte l'inversion,
+ * pas le signe — et laisserait deux facons d'exprimer la meme chose, dont une
+ * qui annulerait l'autre.
+ ********************************************************/
 export declare function useParallaxTransform(props: IParallaxElementProps): {
     transformStyles: (x: number, y: number) => string | undefined;
     strength: import("vue").ComputedRef<number>;
+    customMovement: (x: number, y: number) => {
+        x: number;
+        y: number;
+    };
 };