[Feature] Refactor ScrollAnimation exports

CHANGELOG.md

@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- **ScrollAnimation:** add a `withScrollAnimationDebug` decorator ([#494](https://github.com/studiometa/ui/pull/494))
+
+### Changed
+
+- **ScrollAnimation:** refactor components into `ScrollAnimationTimeline` and `ScrollAnimationTarget` ([#441](https://github.com/studiometa/ui/issues/441) [#494](https://github.com/studiometa/ui/pull/494), [a5d0e29](https://github.com/studiometa/ui/commit/a5d0e29))
+
 ## [v1.7.0](https://github.com/studiometa/ui/compare/1.6.0..1.7.0) (2025-11-11)
 
 ### Added

CLAUDE.md

@@ -1,5 +1,10 @@
 # @studiometa/ui packages
 
+## Commit messages
+
+- Use English for commit messages
+- Use simple verb-first sentences (e.g., "Add...", "Fix...", "Refactor...")
+
 ## Project structure
 
 - Monorepo managed by NPM with packages in the `./packages` folder

codecov.yml

@@ -0,0 +1,26 @@
+coverage:
+  status:
+    project:
+      default:
+        target: auto
+        threshold: 1%
+        informational: true
+    patch:
+      default:
+        target: auto
+        threshold: 1%
+        informational: true
+
+comment:
+  layout: "diff, flags, files"
+  behavior: default
+  require_changes: false
+  require_base: false
+  require_head: true
+
+ignore:
+  - "packages/docs/**"
+  - "packages/tests/**"
+  - "**/node_modules/**"
+  - "**/*.spec.ts"
+  - "**/*.test.ts"

packages/docs/.vitepress/config.ts

@@ -2,7 +2,7 @@ import { readFileSync } from 'node:fs';
 import { basename, dirname } from 'node:path';
 import { defineConfig } from 'vitepress';
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash';
-import { withLeadingSlash, withLeadingCharacters } from '@studiometa/js-toolkit/utils';
+import { withLeadingSlash } from '@studiometa/js-toolkit/utils';
 import glob from 'fast-glob';
 import pkg from '../package.json' with { type: 'json' };
 
@@ -78,7 +78,10 @@ export default defineConfig({
       },
       {
         text: `<span class="VPBadge font-bold bg-[var(--vp-button-brand-bg)] text-[var(--vp-button-brand-text)]">v${pkg.version}</span>`,
-        items: [{ text: 'Release Notes', link: 'https://github.com/studiometa/ui/releases' }],
+        items: [
+          { text: 'Release Notes', link: 'https://github.com/studiometa/ui/releases' },
+          { text: 'Migration guides', link: '/migration-guides/' },
+        ],
       },
     ],
     sidebar: {

packages/docs/components/Action/index.md

@@ -72,7 +72,6 @@ And specify an additional selector to filter the targeted components:
 
 </llm-only>
 
-
 ### Simple usage with the `Target` component
 
 The `Target` component is a companion of the `Action` component that can be used to easily target other DOM elements without creating specific component.

packages/docs/components/Action/js-api.md

@@ -24,13 +24,15 @@ Use this option to change the event that will trigger the [effect callback](#eff
 
 Modifiers can be chained with a `.` as separator:
 
+<!-- prettier-ignore-start -->
 ```html {3}
 <button
   data-component="Action"
   data-option-on="click.prevent.stop.passive">
   Click me
 </button>
 ```
+<!-- prettier-ignore-end -->
 
 ### `target`
 
@@ -53,6 +55,7 @@ class Foo extends Base {
   };
 }
 ```
+
 :::
 
 #### No target
@@ -72,48 +75,37 @@ By not defining the `target` option, the default target will be the current `Act
 
 The following configuration will use all `Foo` components as targets, the effect callback will be triggered for each and every one of them.
 
+<!-- prettier-ignore-start -->
 ```html {3}
-<button
-  data-component="Action"
-  data-option-target="Foo">
-  Click me
-</button>
+<button data-component="Action" data-option-target="Foo">Click me</button>
 ```
+<!-- prettier-ignore-end -->
 
 #### Multiple targets
 
+<!-- prettier-ignore-start -->
 ```html {3}
-<button
-  data-component="Action"
-  data-option-target="Foo Bar">
-  Click me
-</button>
+<button data-component="Action" data-option-target="Foo Bar">Click me</button>
 ```
+<!-- prettier-ignore-end -->
 
 #### Reduce the list of target with a selector
 
 In the following example, the effect callback will only be triggered on the `Foo` component with the `foo` id.
 
-```html {3,9}
+<!-- prettier-ignore-start -->
+```html {3,7}
 <button
   data-component="Action"
   data-option-target="Foo(#foo)">
   Click me
 </button>
 
-<div
-  data-component="Foo"
-  id="foo">
-  ...
-</div>
-
-<div
-  data-component="Foo"
-  id="bar">
-  ...
-</div>
-```
+<div data-component="Foo" id="foo">...</div>
 
+<div data-component="Foo" id="bar">...</div>
+```
+<!-- prettier-ignore-end -->
 
 ### `effect`
 
@@ -135,6 +127,7 @@ The `effect` option must be used to define a small piece of JavaScript that will
 
 The effect can also define an arrow function which will be executed as well. The following examples are similar:
 
+<!-- prettier-ignore-start -->
 ```html {3,9}
 <button
   data-component="Action"
@@ -148,11 +141,13 @@ The effect can also define an arrow function which will be executed as well. The
   Click me
 </button>
 ```
+<!-- prettier-ignore-end -->
 
 #### Accessing the current element
 
 Use `this` to access the current element:
 
+<!-- prettier-ignore-start -->
 ```html {3-4}
 <button
   data-component="Action"
@@ -161,11 +156,13 @@ Use `this` to access the current element:
   Click me
 </button>
 ```
+<!-- prettier-ignore-end -->
 
 #### Accessing the target element
 
 Use `$el` to access the current element:
 
+<!-- prettier-ignore-start -->
 ```html {3-4}
 <button
   data-component="Action"
@@ -176,29 +173,33 @@ Use `$el` to access the current element:
 
 <div data-component="Target" class="bg-red">...</div>
 ```
+<!-- prettier-ignore-end -->
 
 #### Accessing the current instances mounted on the current element
 
 Use the name of the component mounted on the current element to get access to its instance.
 
+<!-- prettier-ignore-start -->
 ```html {3}
 <button
   data-component="Action Transition"
   data-option-effect="Transition.enter()">
   Click me
 </button>
 ```
+<!-- prettier-ignore-end -->
 
 By default, the `Action` variabl will always refer to the current `Action` instance of the current element. The following example will log `true` when the button is clicked:
 
+<!-- prettier-ignore-start -->
 ```html {3}
 <button
   data-component="Action"
   data-option-effect="console.log(Action.$el === this)">
   Click me
 </button>
 ```
-
+<!-- prettier-ignore-end -->
 
 #### Advanced usage with destructuration
 

packages/docs/components/AnchorScrollto/js-api.md

@@ -3,6 +3,7 @@ title: AnchorScrollTo JS API
 ---
 
 # JS API
+
 ## Getter
 
 ### `targetSelector`

packages/docs/components/Button/index.md

@@ -18,4 +18,3 @@ Once the [package installed](/guide/installation/), simply include the template
 ```twig
 {% include '@ui-pkg/Button/Button.twig' %}
 ```
-

packages/docs/components/CircularMarquee/examples.md

@@ -1,6 +1,7 @@
 # Examples
 
 ## Default
+
 <llm-exclude>
 <PreviewPlayground
   :html="() => import('./stories/app.twig')"
@@ -19,6 +20,7 @@
 </llm-only>
 
 ## Higher sensitivity
+
 <llm-exclude>
 <PreviewPlayground
   :html="() => import('./stories/app-2.twig')"
@@ -37,6 +39,7 @@
 </llm-only>
 
 ## Negative sensitivity
+
 <llm-exclude>
 <PreviewPlayground
   :html="() => import('./stories/app-3.twig')"
@@ -57,8 +60,10 @@
 ## Exemple with same `outer_radius` and `radius`
 
 :::tip Why is there two radius parameters ?
+
 - `outer_radius` set the size of the **svg viewbox**. `radius` set the size of the `<path>` on which the circular text will be written.
 - `outer_radius` needs to be greater in order to **avoid cutting** the text since the `<svg>` will always hide the overflowing content.
+
 :::
 
 <llm-exclude>

packages/docs/components/Cursor/index.md

@@ -25,12 +25,13 @@ class App extends Base {
     name: 'Base',
     components: {
       Cursor,
-    }
+    },
   };
 }
 
 export default createApp(App);
 ```
+
 ```twig
 {% include '@ui/Cursor/Cursor.twig' only %}
 ```

packages/docs/components/DataComputed/index.md

@@ -62,7 +62,6 @@ registerComponent(DataComputed);
 
 </llm-only>
 
-
 ### Double computed value
 
 <llm-exclude>

packages/docs/components/Draggable/index.md

@@ -33,9 +33,7 @@ export default createApp(App);
 
 ```html [index.html]
 <div data-component="Draggable">
-  <div data-ref="target">
-    ...
-  </div>
+  <div data-ref="target">...</div>
 </div>
 ```
 

packages/docs/components/Draggable/js-api.md

@@ -47,24 +47,16 @@ The values are unitless and in pixels.
 
 ```html
 <!-- Add a 10px inner margin -->
-<div data-component="Draggable"
-  data-option-margin="10">
-</div>
+<div data-component="Draggable" data-option-margin="10"></div>
 
 <!-- Add a 10px inner inline margin -->
-<div data-component="Draggable"
-  data-option-margin="0 10">
-</div>
+<div data-component="Draggable" data-option-margin="0 10"></div>
 
 <!-- Add a 10px inner inline margin and 10px bottom margin -->
-<div data-component="Draggable"
-  data-option-margin="0 10 10">
-</div>
+<div data-component="Draggable" data-option-margin="0 10 10"></div>
 
 <!-- Add a 10px outer margin -->
-<div data-component="Draggable"
-  data-option-margin="-10 -10 -10 -10">
-</div>
+<div data-component="Draggable" data-option-margin="-10 -10 -10 -10"></div>
 ```
 
 ### `sensitivity`

packages/docs/components/Fetch/index.md

@@ -215,7 +215,6 @@ registerComponent(Fetch);
 
 :::
 
-
 See the [cancelling a request example](./examples.md#cancelling-a-request) for detailed usage.
 
 ### Handling JSON response

packages/docs/components/Figure/index.md

@@ -25,12 +25,13 @@ class App extends Base {
     name: 'Base',
     components: {
       Figure,
-    }
+    },
   };
 }
 
 export default createApp(App);
 ```
+
 ```twig
 <div class="card">
   {% include '@ui/Figure/Figure.twig' with {
@@ -87,7 +88,7 @@ class App extends Base {
     name: 'Base',
     components: {
       Figure,
-    }
+    },
   };
 }
 

packages/docs/components/Figure/js-api.md

@@ -16,7 +16,6 @@ The `Figure` component extends the [`Transition` primitive](/components/Transiti
 
 Use this options to enable lazy loading while reading the source from the `data-src` attribute of the [`img` ref](#img).
 
-
 ## Refs
 
 ### `img`