@studiometa/ui 1.7.0 → 1.9.0-beta.0

package/ScrollAnimation/ScrollAnimationTarget.d.ts

@@ -0,0 +1,43 @@
+import type { BaseConfig, BaseProps, ScrollInViewProps, WithScrolledInViewProps } from '@studiometa/js-toolkit';
+import { AbstractScrollAnimation } from './AbstractScrollAnimation.js';
+export interface ScrollAnimationTargetProps extends BaseProps {
+    $options: WithScrolledInViewProps['$options'];
+}
+/**
+ * ScrollAnimationTarget class.
+ *
+ * A component that animates based on scroll progress from a parent `ScrollAnimationTimeline`.
+ * Each target can have its own animation keyframes and play range.
+ *
+ * @example
+ * ```html
+ * <div data-component="ScrollAnimationTimeline">
+ *   <div
+ *     data-component="ScrollAnimationTarget"
+ *     data-option-from='{"opacity": 0, "transform": "translateY(20px)"}'
+ *     data-option-to='{"opacity": 1, "transform": "translateY(0)"}'
+ *     data-option-play-range='[0, 0.5]'
+ *   >
+ *     Animated content
+ *   </div>
+ * </div>
+ * ```
+ */
+export declare class ScrollAnimationTarget<T extends BaseProps = BaseProps> extends AbstractScrollAnimation<T & ScrollAnimationTargetProps> {
+    /**
+     * Config.
+     */
+    static config: BaseConfig;
+    /**
+     * Local damped current values.
+     */
+    dampedCurrent: ScrollInViewProps['dampedCurrent'];
+    /**
+     * Local damped progress.
+     */
+    dampedProgress: ScrollInViewProps['dampedCurrent'];
+    /**
+     * Compute local damped progress.
+     */
+    scrolledInView(props: ScrollInViewProps): void;
+}

package/ScrollAnimation/ScrollAnimationTarget.js

@@ -0,0 +1,68 @@
+import { damp, clamp01, domScheduler } from "@studiometa/js-toolkit/utils";
+import { AbstractScrollAnimation } from "./AbstractScrollAnimation.js";
+function updateProps(that, props, dampFactor, dampPrecision, axis = "x") {
+  that.dampedCurrent[axis] = damp(
+    props.current[axis],
+    that.dampedCurrent[axis],
+    dampFactor,
+    dampPrecision
+  );
+  that.dampedProgress[axis] = clamp01(
+    (that.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis])
+  );
+}
+class ScrollAnimationTarget extends AbstractScrollAnimation {
+  /**
+   * Config.
+   */
+  static config = {
+    ...AbstractScrollAnimation.config,
+    name: "ScrollAnimationTarget",
+    options: {
+      ...AbstractScrollAnimation.config.options,
+      dampFactor: {
+        type: Number,
+        default: 0.1
+      },
+      dampPrecision: {
+        type: Number,
+        default: 1e-3
+      }
+    }
+  };
+  /**
+   * Local damped current values.
+   */
+  dampedCurrent = {
+    x: 0,
+    y: 0
+  };
+  /**
+   * Local damped progress.
+   */
+  dampedProgress = {
+    x: 0,
+    y: 0
+  };
+  /**
+   * Compute local damped progress.
+   */
+  scrolledInView(props) {
+    domScheduler.read(() => {
+      const { dampFactor, dampPrecision } = this.$options;
+      updateProps(this, props, dampFactor, dampPrecision, "x");
+      updateProps(this, props, dampFactor, dampPrecision, "y");
+    });
+    domScheduler.write(() => {
+      super.scrolledInView({
+        ...props,
+        dampedCurrent: this.dampedCurrent,
+        dampedProgress: this.dampedProgress
+      });
+    });
+  }
+}
+export {
+  ScrollAnimationTarget
+};
+//# sourceMappingURL=ScrollAnimationTarget.js.map

package/ScrollAnimation/ScrollAnimationTarget.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/ScrollAnimation/ScrollAnimationTarget.ts"],
+  "sourcesContent": ["import type {\n  BaseConfig,\n  BaseProps,\n  ScrollInViewProps,\n  WithScrolledInViewProps,\n} from '@studiometa/js-toolkit';\nimport { damp, clamp01, domScheduler } from '@studiometa/js-toolkit/utils';\nimport { AbstractScrollAnimation } from './AbstractScrollAnimation.js';\n\nexport interface ScrollAnimationTargetProps extends BaseProps {\n  $options: WithScrolledInViewProps['$options'];\n}\n\nfunction updateProps(\n  // eslint-disable-next-line no-use-before-define\n  that: ScrollAnimationTarget,\n  props: ScrollInViewProps,\n  dampFactor: number,\n  dampPrecision: number,\n  axis: 'x' | 'y' = 'x',\n) {\n  that.dampedCurrent[axis] = damp(\n    props.current[axis],\n    that.dampedCurrent[axis],\n    dampFactor,\n    dampPrecision,\n  );\n  that.dampedProgress[axis] = clamp01(\n    (that.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n}\n\n/**\n * ScrollAnimationTarget class.\n *\n * A component that animates based on scroll progress from a parent `ScrollAnimationTimeline`.\n * Each target can have its own animation keyframes and play range.\n *\n * @example\n * ```html\n * <div data-component=\"ScrollAnimationTimeline\">\n *   <div\n *     data-component=\"ScrollAnimationTarget\"\n *     data-option-from='{\"opacity\": 0, \"transform\": \"translateY(20px)\"}'\n *     data-option-to='{\"opacity\": 1, \"transform\": \"translateY(0)\"}'\n *     data-option-play-range='[0, 0.5]'\n *   >\n *     Animated content\n *   </div>\n * </div>\n * ```\n */\nexport class ScrollAnimationTarget<T extends BaseProps = BaseProps> extends AbstractScrollAnimation<\n  T & ScrollAnimationTargetProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractScrollAnimation.config,\n    name: 'ScrollAnimationTarget',\n    options: {\n      ...AbstractScrollAnimation.config.options,\n      dampFactor: {\n        type: Number,\n        default: 0.1,\n      },\n      dampPrecision: {\n        type: Number,\n        default: 0.001,\n      },\n    },\n  };\n\n  /**\n   * Local damped current values.\n   */\n  dampedCurrent: ScrollInViewProps['dampedCurrent'] = {\n    x: 0,\n    y: 0,\n  };\n\n  /**\n   * Local damped progress.\n   */\n  dampedProgress: ScrollInViewProps['dampedCurrent'] = {\n    x: 0,\n    y: 0,\n  };\n\n  /**\n   * Compute local damped progress.\n   */\n  scrolledInView(props: ScrollInViewProps) {\n    domScheduler.read(() => {\n      const { dampFactor, dampPrecision } = this.$options;\n      updateProps(this, props, dampFactor, dampPrecision, 'x');\n      updateProps(this, props, dampFactor, dampPrecision, 'y');\n    });\n\n    domScheduler.write(() => {\n      super.scrolledInView({\n        ...props,\n        dampedCurrent: this.dampedCurrent,\n        dampedProgress: this.dampedProgress,\n      });\n    });\n  }\n}\n"],
+  "mappings": "AAMA,SAAS,MAAM,SAAS,oBAAoB;AAC5C,SAAS,+BAA+B;AAMxC,SAAS,YAEP,MACA,OACA,YACA,eACA,OAAkB,KAClB;AACA,OAAK,cAAc,IAAI,IAAI;AAAA,IACzB,MAAM,QAAQ,IAAI;AAAA,IAClB,KAAK,cAAc,IAAI;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,OAAK,eAAe,IAAI,IAAI;AAAA,KACzB,KAAK,cAAc,IAAI,IAAI,MAAM,MAAM,IAAI,MAAM,MAAM,IAAI,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACtF;AACF;AAsBO,MAAM,8BAA+D,wBAE1E;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,GAAG,wBAAwB;AAAA,IAC3B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,GAAG,wBAAwB,OAAO;AAAA,MAClC,YAAY;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,eAAe;AAAA,QACb,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAoD;AAAA,IAClD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAqD;AAAA,IACnD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe,OAA0B;AACvC,iBAAa,KAAK,MAAM;AACtB,YAAM,EAAE,YAAY,cAAc,IAAI,KAAK;AAC3C,kBAAY,MAAM,OAAO,YAAY,eAAe,GAAG;AACvD,kBAAY,MAAM,OAAO,YAAY,eAAe,GAAG;AAAA,IACzD,CAAC;AAED,iBAAa,MAAM,MAAM;AACvB,YAAM,eAAe;AAAA,QACnB,GAAG;AAAA,QACH,eAAe,KAAK;AAAA,QACpB,gBAAgB,KAAK;AAAA,MACvB,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;",
+  "names": []
+}

package/ScrollAnimation/ScrollAnimationTimeline.d.ts

@@ -0,0 +1,35 @@
+import { Base, ScrollInViewProps } from '@studiometa/js-toolkit';
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+import { ScrollAnimationTarget } from './ScrollAnimationTarget.js';
+export interface ScrollAnimationTimelineProps extends BaseProps {
+    $children: {
+        ScrollAnimationTarget: ScrollAnimationTarget[];
+    };
+}
+declare const ScrollAnimationTimeline_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithScrolledInViewInterface, Base<BaseProps>, import("@studiometa/js-toolkit").WithScrolledInViewProps>;
+/**
+ * ScrollAnimationTimeline class.
+ *
+ * A component that manages scroll-based animations for its children.
+ * Use with `ScrollAnimationTarget` children components.
+ *
+ * @example
+ * ```html
+ * <div data-component="ScrollAnimationTimeline">
+ *   <div data-component="ScrollAnimationTarget" data-option-from='{"opacity": 0}' data-option-to='{"opacity": 1}'>
+ *     Content
+ *   </div>
+ * </div>
+ * ```
+ */
+export declare class ScrollAnimationTimeline<T extends BaseProps = BaseProps> extends ScrollAnimationTimeline_base<T & ScrollAnimationTimelineProps> {
+    /**
+     * Config.
+     */
+    static config: BaseConfig;
+    /**
+     * Scrolled in view hook.
+     */
+    scrolledInView(props: ScrollInViewProps): void;
+}
+export {};

package/ScrollAnimation/ScrollAnimationTimeline.js

@@ -0,0 +1,28 @@
+import { Base, withScrolledInView } from "@studiometa/js-toolkit";
+import { ScrollAnimationTarget } from "./ScrollAnimationTarget.js";
+class ScrollAnimationTimeline extends withScrolledInView(
+  Base,
+  {}
+) {
+  /**
+   * Config.
+   */
+  static config = {
+    name: "ScrollAnimationTimeline",
+    components: {
+      ScrollAnimationTarget
+    }
+  };
+  /**
+   * Scrolled in view hook.
+   */
+  scrolledInView(props) {
+    for (const child of this.$children.ScrollAnimationTarget) {
+      child.scrolledInView(props);
+    }
+  }
+}
+export {
+  ScrollAnimationTimeline
+};
+//# sourceMappingURL=ScrollAnimationTimeline.js.map

package/ScrollAnimation/ScrollAnimationTimeline.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/ScrollAnimation/ScrollAnimationTimeline.ts"],
+  "sourcesContent": ["import { Base, ScrollInViewProps, withScrolledInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { ScrollAnimationTarget } from './ScrollAnimationTarget.js';\n\nexport interface ScrollAnimationTimelineProps extends BaseProps {\n  $children: {\n    ScrollAnimationTarget: ScrollAnimationTarget[];\n  };\n}\n\n/**\n * ScrollAnimationTimeline class.\n *\n * A component that manages scroll-based animations for its children.\n * Use with `ScrollAnimationTarget` children components.\n *\n * @example\n * ```html\n * <div data-component=\"ScrollAnimationTimeline\">\n *   <div data-component=\"ScrollAnimationTarget\" data-option-from='{\"opacity\": 0}' data-option-to='{\"opacity\": 1}'>\n *     Content\n *   </div>\n * </div>\n * ```\n */\nexport class ScrollAnimationTimeline<T extends BaseProps = BaseProps> extends withScrolledInView(\n  Base,\n  {},\n)<T & ScrollAnimationTimelineProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'ScrollAnimationTimeline',\n    components: {\n      ScrollAnimationTarget,\n    },\n  };\n\n  /**\n   * Scrolled in view hook.\n   */\n  scrolledInView(props: ScrollInViewProps) {\n    for (const child of this.$children.ScrollAnimationTarget) {\n      child.scrolledInView(props);\n    }\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,MAAyB,0BAA0B;AAE5D,SAAS,6BAA6B;AAuB/B,MAAM,gCAAiE;AAAA,EAC5E;AAAA,EACA,CAAC;AACH,EAAoC;AAAA;AAAA;AAAA;AAAA,EAIlC,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,YAAY;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe,OAA0B;AACvC,eAAW,SAAS,KAAK,UAAU,uBAAuB;AACxD,YAAM,eAAe,KAAK;AAAA,IAC5B;AAAA,EACF;AACF;",
+  "names": []
+}

package/ScrollAnimation/ScrollAnimationWithEase.d.ts

@@ -1,12 +1,18 @@
 import { type BaseConfig } from '@studiometa/js-toolkit';
 declare const ScrollAnimationWithEase_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private/index.js").AnimationScrollWithEaseInterface, import("#private/index.js").AbstractScrollAnimation<import("@studiometa/js-toolkit").BaseProps>, import("#private/index.js").AnimationScrollWithEaseProps>;
 /**
- * ScrollAnimation class.
+ * ScrollAnimationWithEase class.
+ *
+ * @deprecated Use `ScrollAnimationTimeline` with `ScrollAnimationTarget` children instead.
  */
 export declare class ScrollAnimationWithEase extends ScrollAnimationWithEase_base {
     /**
      * Config.
      */
     static config: BaseConfig;
+    /**
+     * Display deprecation warning.
+     */
+    mounted(): void;
 }
 export {};

package/ScrollAnimation/ScrollAnimationWithEase.js

@@ -1,3 +1,4 @@
+import { isDev } from "@studiometa/js-toolkit/utils";
 import { ScrollAnimation } from "./ScrollAnimation.js";
 import { animationScrollWithEase } from "./animationScrollWithEase.js";
 class ScrollAnimationWithEase extends animationScrollWithEase(ScrollAnimation) {
@@ -8,6 +9,17 @@ class ScrollAnimationWithEase extends animationScrollWithEase(ScrollAnimation) {
     ...ScrollAnimation.config,
     name: "ScrollAnimationWithEase"
   };
+  /**
+   * Display deprecation warning.
+   */
+  mounted() {
+    if (isDev) {
+      console.warn(
+        `The ${this.$options.name} component is deprecated.`,
+        "\nUse `ScrollAnimationTimeline` with `ScrollAnimationTarget` children instead."
+      );
+    }
+  }
 }
 export {
   ScrollAnimationWithEase

package/ScrollAnimation/ScrollAnimationWithEase.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/ScrollAnimation/ScrollAnimationWithEase.ts"],
-  "sourcesContent": ["import { type BaseConfig } from '@studiometa/js-toolkit';\nimport { ScrollAnimation } from './ScrollAnimation.js';\nimport { animationScrollWithEase } from './animationScrollWithEase.js';\n\n/**\n * ScrollAnimation class.\n */\nexport class ScrollAnimationWithEase extends animationScrollWithEase(ScrollAnimation) {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...ScrollAnimation.config,\n    name: 'ScrollAnimationWithEase',\n  };\n}\n"],
-  "mappings": "AACA,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AAKjC,MAAM,gCAAgC,wBAAwB,eAAe,EAAE;AAAA;AAAA;AAAA;AAAA,EAIpF,OAAO,SAAqB;AAAA,IAC1B,GAAG,gBAAgB;AAAA,IACnB,MAAM;AAAA,EACR;AACF;",
+  "sourcesContent": ["import { type BaseConfig } from '@studiometa/js-toolkit';\nimport { isDev } from '@studiometa/js-toolkit/utils';\nimport { ScrollAnimation } from './ScrollAnimation.js';\nimport { animationScrollWithEase } from './animationScrollWithEase.js';\n\n/**\n * ScrollAnimationWithEase class.\n *\n * @deprecated Use `ScrollAnimationTimeline` with `ScrollAnimationTarget` children instead.\n */\nexport class ScrollAnimationWithEase extends animationScrollWithEase(ScrollAnimation) {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...ScrollAnimation.config,\n    name: 'ScrollAnimationWithEase',\n  };\n\n  /**\n   * Display deprecation warning.\n   */\n  mounted() {\n    if (isDev) {\n      console.warn(\n        `The ${this.$options.name} component is deprecated.`,\n        '\\nUse `ScrollAnimationTimeline` with `ScrollAnimationTarget` children instead.',\n      );\n    }\n  }\n}\n"],
+  "mappings": "AACA,SAAS,aAAa;AACtB,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AAOjC,MAAM,gCAAgC,wBAAwB,eAAe,EAAE;AAAA;AAAA;AAAA;AAAA,EAIpF,OAAO,SAAqB;AAAA,IAC1B,GAAG,gBAAgB;AAAA,IACnB,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,OAAO;AACT,cAAQ;AAAA,QACN,OAAO,KAAK,SAAS,IAAI;AAAA,QACzB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/ScrollAnimation/animationScrollWithEase.d.ts

@@ -9,5 +9,7 @@ export interface AnimationScrollWithEaseInterface extends BaseInterface {
 }
 /**
  * Extend a `ScrollAnimation` component to use easings.
+ *
+ * @deprecated This decorator is deprecated. Easing can be applied directly via CSS or animation options.
  */
 export declare function animationScrollWithEase<S extends AbstractScrollAnimation>(ScrollAnimation: typeof AbstractScrollAnimation): BaseDecorator<AnimationScrollWithEaseInterface, S, AnimationScrollWithEaseProps>;

package/ScrollAnimation/animationScrollWithEase.js

@@ -1,4 +1,4 @@
-import { ease } from "@studiometa/js-toolkit/utils";
+import { ease, isDev } from "@studiometa/js-toolkit/utils";
 const regex = /ease([A-Z])/;
 const eases = Object.fromEntries(
   Object.entries(ease).filter(([name]) => name.startsWith("ease")).map(([name, value]) => [name.replace(regex, (match, $1) => $1.toLowerCase()), value])
@@ -19,6 +19,17 @@ function animationScrollWithEase(ScrollAnimation) {
         }
       }
     };
+    /**
+     * Display a deprecation warning.
+     */
+    mounted() {
+      if (isDev) {
+        console.warn(
+          `The animationScrollWithEase decorator is deprecated.`,
+          "\nEasing can be applied directly via CSS or animation options."
+        );
+      }
+    }
     /**
      * Eases the progress value.
      */

package/ScrollAnimation/animationScrollWithEase.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/ScrollAnimation/animationScrollWithEase.ts"],
-  "sourcesContent": ["import type { BaseConfig, BaseProps, BaseDecorator, BaseInterface } from '@studiometa/js-toolkit';\nimport { ease } from '@studiometa/js-toolkit/utils';\nimport type { AbstractScrollAnimation } from './AbstractScrollAnimation.js';\n\nconst regex = /ease([A-Z])/;\nconst eases = Object.fromEntries(\n  Object.entries(ease)\n    .filter(([name]) => name.startsWith('ease'))\n    .map(([name, value]) => [name.replace(regex, (match, $1) => $1.toLowerCase()), value]),\n);\n\nexport interface AnimationScrollWithEaseProps extends BaseProps {\n  $options: {\n    ease: string;\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface AnimationScrollWithEaseInterface extends BaseInterface {}\n\n/**\n * Extend a `ScrollAnimation` component to use easings.\n */\nexport function animationScrollWithEase<S extends AbstractScrollAnimation>(\n  ScrollAnimation: typeof AbstractScrollAnimation,\n): BaseDecorator<AnimationScrollWithEaseInterface, S, AnimationScrollWithEaseProps> {\n  class AnimationScrollWithEase extends ScrollAnimation<AnimationScrollWithEaseProps> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...ScrollAnimation.config,\n      name: `${ScrollAnimation.config.name}WithEase`,\n      options: {\n        ...ScrollAnimation.config.options,\n        ease: {\n          type: String,\n          default: 'outExpo',\n        },\n      },\n    };\n\n    /**\n     * Eases the progress value.\n     */\n    render(progress: number) {\n      if (typeof eases[this.$options.ease] === 'function') {\n        // eslint-disable-next-line no-param-reassign\n        progress = eases[this.$options.ease](progress);\n      }\n\n      super.render(progress);\n    }\n  }\n\n  // @ts-ignore\n  return AnimationScrollWithEase;\n}\n"],
-  "mappings": "AACA,SAAS,YAAY;AAGrB,MAAM,QAAQ;AACd,MAAM,QAAQ,OAAO;AAAA,EACnB,OAAO,QAAQ,IAAI,EAChB,OAAO,CAAC,CAAC,IAAI,MAAM,KAAK,WAAW,MAAM,CAAC,EAC1C,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,KAAK,QAAQ,OAAO,CAAC,OAAO,OAAO,GAAG,YAAY,CAAC,GAAG,KAAK,CAAC;AACzF;AAcO,SAAS,wBACd,iBACkF;AAAA,EAClF,MAAM,gCAAgC,gBAA8C;AAAA;AAAA;AAAA;AAAA,IAIlF,OAAO,SAAqB;AAAA,MAC1B,GAAG,gBAAgB;AAAA,MACnB,MAAM,GAAG,gBAAgB,OAAO,IAAI;AAAA,MACpC,SAAS;AAAA,QACP,GAAG,gBAAgB,OAAO;AAAA,QAC1B,MAAM;AAAA,UACJ,MAAM;AAAA,UACN,SAAS;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKA,OAAO,UAAkB;AACvB,UAAI,OAAO,MAAM,KAAK,SAAS,IAAI,MAAM,YAAY;AAEnD,mBAAW,MAAM,KAAK,SAAS,IAAI,EAAE,QAAQ;AAAA,MAC/C;AAEA,YAAM,OAAO,QAAQ;AAAA,IACvB;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import type { BaseConfig, BaseProps, BaseDecorator, BaseInterface } from '@studiometa/js-toolkit';\nimport { ease, isDev } from '@studiometa/js-toolkit/utils';\nimport type { AbstractScrollAnimation } from './AbstractScrollAnimation.js';\n\nconst regex = /ease([A-Z])/;\nconst eases = Object.fromEntries(\n  Object.entries(ease)\n    .filter(([name]) => name.startsWith('ease'))\n    .map(([name, value]) => [name.replace(regex, (match, $1) => $1.toLowerCase()), value]),\n);\n\nexport interface AnimationScrollWithEaseProps extends BaseProps {\n  $options: {\n    ease: string;\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface AnimationScrollWithEaseInterface extends BaseInterface {}\n\n/**\n * Extend a `ScrollAnimation` component to use easings.\n *\n * @deprecated This decorator is deprecated. Easing can be applied directly via CSS or animation options.\n */\nexport function animationScrollWithEase<S extends AbstractScrollAnimation>(\n  ScrollAnimation: typeof AbstractScrollAnimation,\n): BaseDecorator<AnimationScrollWithEaseInterface, S, AnimationScrollWithEaseProps> {\n  class AnimationScrollWithEase extends ScrollAnimation<AnimationScrollWithEaseProps> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...ScrollAnimation.config,\n      name: `${ScrollAnimation.config.name}WithEase`,\n      options: {\n        ...ScrollAnimation.config.options,\n        ease: {\n          type: String,\n          default: 'outExpo',\n        },\n      },\n    };\n\n    /**\n     * Display a deprecation warning.\n     */\n    mounted() {\n      if (isDev) {\n        console.warn(\n          `The animationScrollWithEase decorator is deprecated.`,\n          '\\nEasing can be applied directly via CSS or animation options.',\n        );\n      }\n    }\n\n    /**\n     * Eases the progress value.\n     */\n    render(progress: number) {\n      if (typeof eases[this.$options.ease] === 'function') {\n        // eslint-disable-next-line no-param-reassign\n        progress = eases[this.$options.ease](progress);\n      }\n\n      super.render(progress);\n    }\n  }\n\n  // @ts-ignore\n  return AnimationScrollWithEase;\n}\n"],
+  "mappings": "AACA,SAAS,MAAM,aAAa;AAG5B,MAAM,QAAQ;AACd,MAAM,QAAQ,OAAO;AAAA,EACnB,OAAO,QAAQ,IAAI,EAChB,OAAO,CAAC,CAAC,IAAI,MAAM,KAAK,WAAW,MAAM,CAAC,EAC1C,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,KAAK,QAAQ,OAAO,CAAC,OAAO,OAAO,GAAG,YAAY,CAAC,GAAG,KAAK,CAAC;AACzF;AAgBO,SAAS,wBACd,iBACkF;AAAA,EAClF,MAAM,gCAAgC,gBAA8C;AAAA;AAAA;AAAA;AAAA,IAIlF,OAAO,SAAqB;AAAA,MAC1B,GAAG,gBAAgB;AAAA,MACnB,MAAM,GAAG,gBAAgB,OAAO,IAAI;AAAA,MACpC,SAAS;AAAA,QACP,GAAG,gBAAgB,OAAO;AAAA,QAC1B,MAAM;AAAA,UACJ,MAAM;AAAA,UACN,SAAS;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKA,UAAU;AACR,UAAI,OAAO;AACT,gBAAQ;AAAA,UACN;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKA,OAAO,UAAkB;AACvB,UAAI,OAAO,MAAM,KAAK,SAAS,IAAI,MAAM,YAAY;AAEnD,mBAAW,MAAM,KAAK,SAAS,IAAI,EAAE,QAAQ;AAAA,MAC/C;AAEA,YAAM,OAAO,QAAQ;AAAA,IACvB;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/ScrollAnimation/index.d.ts

@@ -1,4 +1,7 @@
 export * from './AbstractScrollAnimation.js';
+export * from './ScrollAnimationTimeline.js';
+export * from './ScrollAnimationTarget.js';
+export * from './withScrollAnimationDebug.js';
 export * from './animationScrollWithEase.js';
 export * from './ScrollAnimation.js';
 export * from './ScrollAnimationWithEase.js';

package/ScrollAnimation/index.js

@@ -1,4 +1,7 @@
 export * from "./AbstractScrollAnimation.js";
+export * from "./ScrollAnimationTimeline.js";
+export * from "./ScrollAnimationTarget.js";
+export * from "./withScrollAnimationDebug.js";
 export * from "./animationScrollWithEase.js";
 export * from "./ScrollAnimation.js";
 export * from "./ScrollAnimationWithEase.js";

package/ScrollAnimation/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/ScrollAnimation/index.ts"],
-  "sourcesContent": ["export * from './AbstractScrollAnimation.js';\nexport * from './animationScrollWithEase.js';\nexport * from './ScrollAnimation.js';\nexport * from './ScrollAnimationWithEase.js';\nexport * from './ScrollAnimationChild.js';\nexport * from './ScrollAnimationChildWithEase.js';\nexport * from './ScrollAnimationParent.js';\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from './AbstractScrollAnimation.js';\nexport * from './ScrollAnimationTimeline.js';\nexport * from './ScrollAnimationTarget.js';\nexport * from './withScrollAnimationDebug.js';\n\n// Deprecated exports\nexport * from './animationScrollWithEase.js';\nexport * from './ScrollAnimation.js';\nexport * from './ScrollAnimationWithEase.js';\nexport * from './ScrollAnimationChild.js';\nexport * from './ScrollAnimationChildWithEase.js';\nexport * from './ScrollAnimationParent.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/ScrollAnimation/withScrollAnimationDebug.d.ts

@@ -0,0 +1,28 @@
+import type { Base, BaseProps, BaseInterface, BaseDecorator } from '@studiometa/js-toolkit';
+export interface WithScrollAnimationDebugProps extends BaseProps {
+    $options: {
+        debug: boolean;
+        offset: string;
+    };
+}
+export interface WithScrollAnimationDebugInterface extends BaseInterface {
+}
+/**
+ * Add debug capabilities to a ScrollAnimationTimeline component.
+ *
+ * @example
+ * ```js
+ * import { ScrollAnimationTimeline } from '@studiometa/ui';
+ * import { withScrollAnimationDebug } from '@studiometa/ui/ScrollAnimation/withScrollAnimationDebug';
+ *
+ * class App extends Base {
+ *   static config = {
+ *     name: 'App',
+ *     components: {
+ *       ScrollAnimationTimeline: withScrollAnimationDebug(ScrollAnimationTimeline),
+ *     },
+ *   };
+ * }
+ * ```
+ */
+export declare function withScrollAnimationDebug<S extends Base>(BaseClass: typeof Base): BaseDecorator<WithScrollAnimationDebugInterface, S, WithScrollAnimationDebugProps>;