@brandocms/jupiter 5.0.0-beta.8 → 5.0.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandocms/jupiter",
-  "version": "5.0.0-beta.8",
+  "version": "5.0.0-beta.9",
   "description": "Frontend helpers.",
   "author": "Univers/Twined",
   "license": "UNLICENSED",

package/src/modules/Cookies/index.js

@@ -3,6 +3,91 @@ import _defaultsDeep from 'lodash.defaultsdeep'
 import * as Events from '../../events'
 import { set } from '../../utils/motion-helpers'
 
+/**
+ * @module Cookies
+ *
+ * Cookie consent module with optional dialog and toggle button support.
+ *
+ * ## Consent dialog
+ *
+ * The traditional consent banner uses a fixed container at the bottom of the page:
+ *
+ * ```html
+ * <div class="cookie-container">
+ *   <div class="cookie-container-inner">
+ *     <div class="cookie-law-text">
+ *       <p>We use cookies...</p>
+ *     </div>
+ *     <div class="cookie-law-buttons">
+ *       <button class="dismiss-cookielaw">Accept</button>
+ *       <button class="refuse-cookielaw">Decline</button>
+ *     </div>
+ *   </div>
+ * </div>
+ * ```
+ *
+ * ## Consent toggle button
+ *
+ * A toggle button can be placed anywhere on the page to let users change their
+ * consent at any time. It can also serve as the sole consent mechanism (no
+ * dialog required).
+ *
+ * ```html
+ * <button data-cookie-consent
+ *         data-cookie-consent-accept="Accept cookies"
+ *         data-cookie-consent-refuse="Refuse cookies">
+ * </button>
+ * ```
+ *
+ * ### Data attributes
+ *
+ * | Attribute | Description |
+ * |---|---|
+ * | `data-cookie-consent` | Marks the element as a consent toggle |
+ * | `data-cookie-consent-accept` | Label shown when user can accept (currently refused/unset) |
+ * | `data-cookie-consent-refuse` | Label shown when user can retract (currently accepted) |
+ * | `data-cookie-consent-status` | Set by the module: `"accepted"` or `"refused"` |
+ * | `data-cookie-consent-icon` | Set on the injected icon `<span>` |
+ * | `data-cookie-consent-label` | Set on the injected label `<span>` |
+ *
+ * ### CSS styling
+ *
+ * ```css
+ * [data-cookie-consent-status="accepted"] [data-cookie-consent-icon] { color: green; }
+ * [data-cookie-consent-status="refused"] [data-cookie-consent-icon] { color: red; }
+ * ```
+ *
+ * ### Gettext / translation
+ *
+ * ```html
+ * <button data-cookie-consent
+ *         data-cookie-consent-accept="{{ _('Accept cookies') }}"
+ *         data-cookie-consent-refuse="{{ _('Refuse cookies') }}">
+ * </button>
+ * ```
+ *
+ * ## Usage examples
+ *
+ * Dialog only (default):
+ * ```js
+ * new Cookies(app)
+ * ```
+ *
+ * Toggle only (no dialog HTML needed):
+ * ```js
+ * new Cookies(app, { setCookies: (c) => { ... } })
+ * ```
+ *
+ * Both dialog and toggle:
+ * ```js
+ * new Cookies(app, {
+ *   onConsentChanged: (c) => {
+ *     console.log(c.getCookie('COOKIES_CONSENT_STATUS'))
+ *   }
+ * })
+ * ```
+ */
+
 /**
  * @typedef {Object} CookiesOptions
  * @property {Function} [onAccept] - Called when cookies are accepted
@@ -11,6 +96,7 @@ import { set } from '../../utils/motion-helpers'
  * @property {Function} [alreadyRefused] - Called if user has already refused cookies
  * @property {Function} [setCookies] - Custom function to set cookies
  * @property {Function} [showCC] - Custom function to display cookie consent dialog
+ * @property {Function} [onConsentChanged] - Called after consent is toggled via the toggle button
  */
 
 /** @type {CookiesOptions} */
@@ -21,6 +107,7 @@ const DEFAULT_OPTIONS = {
 
     c.setCookie('COOKIES_CONSENT_STATUS', 1, oneYearFromNow, '/')
     c.opts.setCookies(c)
+    c.updateConsentToggles()
 
     const timeline = [
       [c.cc, { y: '120%' }, { duration: 0.35, ease: 'easeIn', at: 0 }],
@@ -37,6 +124,7 @@ const DEFAULT_OPTIONS = {
     oneYearFromNow.setFullYear(oneYearFromNow.getFullYear() + 1)
 
     c.setCookie('COOKIES_CONSENT_STATUS', 0, oneYearFromNow, '/')
+    c.updateConsentToggles()
 
     const timeline = [
       [c.cc, { y: '120%' }, { duration: 0.35, ease: 'easeIn', at: 0 }],
@@ -58,6 +146,8 @@ const DEFAULT_OPTIONS = {
 
   setCookies: (c) => {},
 
+  onConsentChanged: (c) => {},
+
   showCC: (c) => {
     if (c.hasCookie('COOKIES_CONSENT_STATUS')) {
       if (c.getCookie('COOKIES_CONSENT_STATUS') === '1') {
@@ -107,22 +197,114 @@ export default class Cookies {
     this.btn = document.querySelector('.dismiss-cookielaw')
     this.btnRefuse = document.querySelector('.refuse-cookielaw')
 
-    if (!this.btn) {
+    this.setupConsentToggles()
+
+    if (!this.btn && this.consentToggles.length === 0) {
       return
     }
 
-    this.app.registerCallback(Events.APPLICATION_REVEALED, () => {
-      this.opts.showCC(this)
+    if (this.btn) {
+      this.app.registerCallback(Events.APPLICATION_REVEALED, () => {
+        this.opts.showCC(this)
+      })
+
+      this.btn.addEventListener('click', () => {
+        this.opts.onAccept(this)
+      })
+      if (this.btnRefuse) {
+        this.btnRefuse.addEventListener('click', () => {
+          this.opts.onRefuse(this)
+        })
+      }
+    }
+  }
+
+  /**
+   * Find all `[data-cookie-consent]` elements and wire them up.
+   */
+  setupConsentToggles() {
+    this.consentToggles = [...document.querySelectorAll('[data-cookie-consent]')]
+
+    this.consentToggles.forEach(el => {
+      const icon = document.createElement('span')
+      icon.setAttribute('data-cookie-consent-icon', '')
+
+      const label = document.createElement('span')
+      label.setAttribute('data-cookie-consent-label', '')
+
+      el.appendChild(icon)
+      el.appendChild(label)
+
+      this.updateConsentToggle(el)
+
+      el.addEventListener('click', () => {
+        this.handleConsentToggle()
+      })
     })
+  }
 
-    this.btn.addEventListener('click', () => {
-      this.opts.onAccept(this)
+  /**
+   * Update a single consent toggle element to reflect current cookie state.
+   * @param {Element} el - The toggle element
+   */
+  updateConsentToggle(el) {
+    const accepted = this.getCookie('COOKIES_CONSENT_STATUS') === '1'
+    const acceptText = el.getAttribute('data-cookie-consent-accept') || 'Accept cookies'
+    const refuseText = el.getAttribute('data-cookie-consent-refuse') || 'Refuse cookies'
+
+    const icon = el.querySelector('[data-cookie-consent-icon]')
+    const label = el.querySelector('[data-cookie-consent-label]')
+
+    if (accepted) {
+      el.setAttribute('data-cookie-consent-status', 'accepted')
+      icon.textContent = '\u2713'
+      label.textContent = refuseText
+    } else {
+      el.setAttribute('data-cookie-consent-status', 'refused')
+      icon.textContent = '\u2715'
+      label.textContent = acceptText
+    }
+  }
+
+  /**
+   * Update all consent toggle elements.
+   */
+  updateConsentToggles() {
+    this.consentToggles.forEach(el => {
+      this.updateConsentToggle(el)
     })
-    if (this.btnRefuse) {
-      this.btnRefuse.addEventListener('click', () => {
-        this.opts.onRefuse(this)
+  }
+
+  /**
+   * Handle a click on a consent toggle button.
+   */
+  handleConsentToggle() {
+    const oneYearFromNow = new Date()
+    oneYearFromNow.setFullYear(oneYearFromNow.getFullYear() + 1)
+
+    const accepted = this.getCookie('COOKIES_CONSENT_STATUS') === '1'
+
+    if (accepted) {
+      this.setCookie('COOKIES_CONSENT_STATUS', 0, oneYearFromNow, '/')
+    } else {
+      this.setCookie('COOKIES_CONSENT_STATUS', 1, oneYearFromNow, '/')
+      this.opts.setCookies(this)
+    }
+
+    this.updateConsentToggles()
+
+    if (this.cc && this.cc.style.display !== 'none') {
+      const timeline = [
+        [this.cc, { y: '120%' }, { duration: 0.35, ease: 'easeIn', at: 0 }],
+        [this.inner, { opacity: 0 }, { duration: 0.3, ease: 'easeIn', at: 0 }]
+      ]
+
+      animate(timeline).finished.then(() => {
+        this.cc.style.display = 'none'
       })
     }
+
+    this.opts.onConsentChanged(this)
   }
 
   /**

package/src/modules/Lazyload/index.js

@@ -209,7 +209,10 @@ export default class Lazyload {
     images.forEach(img => this.swapImage(img))
 
     const pictures = Dom.all($container, '[data-ll-srcset]')
-    pictures.forEach(picture => this.revealPicture(picture))
+    pictures.forEach(picture => {
+      this.loadPicture(picture)
+      this.revealPicture(picture)
+    })
   }
 
   initializeResizeObserver() {

package/src/modules/Looper/index.js

@@ -182,28 +182,9 @@ function horizontalLoop(app, items, config) {
         container.appendChild(clone)
         items.push(clone)
 
-        // Register cloned lazyload elements with Lazyload module if available
-        if (app?.lazyload?.observe) {
-          // Clear data-ll-idx from unloaded [data-ll-image] images
-          clone.querySelectorAll('[data-ll-image]:not([data-ll-loaded])').forEach(img => {
-            img.removeAttribute('data-ll-idx')
-          })
-
-          // Clear attributes from unloaded [data-ll-srcset] pictures so they can be re-observed
-          clone.querySelectorAll('[data-ll-srcset]:not([data-ll-srcset-ready])').forEach(picture => {
-            picture.removeAttribute('data-ll-srcset-initialized')
-            // Clear ready state from sources and img so they can be re-processed
-            picture.querySelectorAll('source').forEach(source => {
-              source.removeAttribute('data-ll-ready')
-            })
-            picture.querySelectorAll('img').forEach(img => {
-              img.removeAttribute('data-ll-idx')
-              img.removeAttribute('data-ll-loaded')
-              img.removeAttribute('data-ll-ready')
-            })
-          })
-
-          app.lazyload.observe(clone)
+        // Force-load cloned lazyload elements immediately to prevent flash on wrap
+        if (app?.lazyload?.forceLoad) {
+          app.lazyload.forceLoad(clone)
         }
       }
 

package/types/index.d.ts

@@ -3,4 +3,4 @@ import imagesAreLoaded from './utils/imagesAreLoaded';
 import loadScript from './utils/loadScript';
 import prefersReducedMotion from './utils/prefersReducedMotion';
 import rafCallback from './utils/rafCallback';
-export { Application, Breakpoints, Cookies, CoverOverlay, Dataloader, Dom, DoubleHeader, Draggable, Dropdown, EqualHeightElements, EqualHeightImages, Events, FixedHeader, FooterReveal, Parallax, HeroSlider, HeroVideo, Lazyload, Lightbox, Links, Looper, Marquee, MobileMenu, Moonwalk, Popover, Popup, ScrollSpy, StackedBoxes, StickyHeader, Toggler, Typography, imageIsLoaded, imagesAreLoaded, loadScript, prefersReducedMotion, rafCallback, _defaultsDeep };
+export { Application, Breakpoints, Cookies, CoverOverlay, Dataloader, Dom, DoubleHeader, Dropdown, EqualHeightElements, EqualHeightImages, Events, FixedHeader, FooterReveal, Parallax, HeroSlider, HeroVideo, Lazyload, Lightbox, Links, Looper, Marquee, MobileMenu, Moonwalk, Popover, Popup, ScrollSpy, StackedBoxes, StickyHeader, Toggler, Typography, imageIsLoaded, imagesAreLoaded, loadScript, prefersReducedMotion, rafCallback, _defaultsDeep, animate, scroll, stagger, motionValue };

package/types/modules/Cookies/index.d.ts

@@ -16,6 +16,24 @@ export default class Cookies {
     btns: Element;
     btn: Element;
     btnRefuse: Element;
+    /**
+     * Find all `[data-cookie-consent]` elements and wire them up.
+     */
+    setupConsentToggles(): void;
+    consentToggles: Element[];
+    /**
+     * Update a single consent toggle element to reflect current cookie state.
+     * @param {Element} el - The toggle element
+     */
+    updateConsentToggle(el: Element): void;
+    /**
+     * Update all consent toggle elements.
+     */
+    updateConsentToggles(): void;
+    /**
+     * Handle a click on a consent toggle button.
+     */
+    handleConsentToggle(): void;
     /**
      * Get a cookie value by key
      * @param {string} sKey - Cookie key
@@ -78,4 +96,8 @@ export type CookiesOptions = {
      * - Custom function to display cookie consent dialog
      */
     showCC?: Function;
+    /**
+     * - Called after consent is toggled via the toggle button
+     */
+    onConsentChanged?: Function;
 };

package/types/modules/DoubleHeader/index.d.ts

@@ -20,6 +20,7 @@ export default class DoubleHeader {
     mobileMenuOpen: boolean;
     timer: any;
     resetResizeTimer: any;
+    scrollSettleTimeout: NodeJS.Timeout;
     firstReveal: boolean;
     initialize(): void;
     setupObserver(): void;

package/types/modules/Dropdown/index.d.ts

@@ -5,9 +5,9 @@ export default class Dropdown {
     elements: {};
     open: boolean;
     element: any;
-    timeline: any;
     handleDocumentClick(event: any): void;
     initialize(): void;
+    positionMenu(): void;
     onClick(event: any): Promise<void>;
     openMenu(): Promise<void>;
     closeMenu(): Promise<void>;

package/types/modules/FixedHeader/index.d.ts

@@ -30,6 +30,7 @@ export default class FixedHeader {
     mobileMenuOpen: boolean;
     timer: any;
     resetResizeTimer: any;
+    scrollSettleTimeout: NodeJS.Timeout;
     intersectingElements: any;
     initialize(): void;
     pageIsScrolledOnReady: boolean;

package/types/modules/HeroSlider/index.d.ts

@@ -19,10 +19,20 @@ export default class HeroSlider {
      * Switches between slides
      */
     slide(type: any): void;
+    _currentAnimation: any;
     /**
      * Add a window resize handler that resizes slide widths
      */
     _addResizeHandler(): void;
     observer: IntersectionObserver;
     _resizeSlides(): void;
+    resizeAnimation: any;
+    /**
+     * Add a visibility change handler to restart animations when tab becomes visible
+     */
+    _addVisibilityHandler(): void;
+    /**
+     * Reset slide states and restart the animation cycle
+     */
+    _resetAndRestart(): void;
 }

package/types/modules/Lazyload/index.d.ts

@@ -15,6 +15,13 @@ export default class Lazyload {
     rafId: number;
     srcsetReadyObserver: MutationObserver;
     watch(): void;
+    /**
+     * Observe new lazyload elements within a container
+     * Handles both [data-ll-image] and [data-ll-srcset] elements
+     * Useful for dynamically added content (e.g., Looper clones)
+     * @param {HTMLElement|HTMLElement[]|NodeList} elements - Container element(s) or lazyload element(s) to observe
+     */
+    observe(elements: HTMLElement | HTMLElement[] | NodeList): void;
     initialize(): void;
     lazyPictures: any;
     loadObserver: IntersectionObserver;

package/types/modules/Lightbox/index.d.ts

@@ -19,8 +19,8 @@ export default class Lightbox {
     firstTransition: boolean;
     previousCaption: any;
     timelines: {
-        caption: any;
-        image: any;
+        caption: PausedTimeline;
+        image: PausedTimeline;
     };
     showBox(section: any, index: any): void;
     buildBox(section: any, index: any): void;
@@ -121,3 +121,4 @@ export type LightboxOptions = {
      */
     onClose?: Function;
 };
+import { PausedTimeline } from '../../utils/motion-helpers';

package/types/modules/Looper/index.d.ts

@@ -1,127 +1,14 @@
 /**
- * Options for configuring the Looper module
- */
-export interface LooperOptions {
-  /** Center the loop container. Can be true, false, or a selector string */
-  center?: boolean | string;
-  /** Enable snap-to-item behavior. Can be true, false, or a number for custom snap distance */
-  snap?: boolean | number;
-  /** Enable continuous auto-scrolling */
-  crawl?: boolean;
-  /** Enable infinite looping. If false, creates linear scrolling */
-  loop?: boolean;
-  /** Enable drag interaction with mouse/touch */
-  draggable?: boolean;
-  /** Speed multipliers for different breakpoints */
-  speed?: {
-    sm?: number;
-    lg?: number;
-  };
-  /** Easing configuration for hover interactions */
-  ease?: {
-    mouseOver?: {
-      speed?: number;
-      duration?: number;
-    };
-    mouseOut?: {
-      speed?: number;
-      duration?: number;
-    };
-  };
-  /** CSS selector for looper elements */
-  selector?: string;
-  /** Extra padding on the right side in pixels */
-  paddingRight?: number | string;
-  /** Start in reversed direction */
-  reversed?: boolean;
-}
-
-/**
- * Loop controller returned by horizontalLoop function
- */
-export interface LoopController {
-  /** Motion value tracking the current position */
-  position: any;
-  /** Main animation instance */
-  animation: any;
-  /** Array of item elements */
-  items: HTMLElement[];
-  /** Array of snap time positions */
-  times: number[];
-  /** Whether the loop is reversed */
-  isReversed: boolean;
-  /** Whether the loop is in looping mode */
-  isLooping: boolean;
-
-  /** Start/resume the loop animation */
-  play(): void;
-
-  /** Pause the loop animation */
-  pause(): void;
-
-  /** Get the current active item index */
-  current(): number;
-
-  /** Find the closest item index to current position */
-  closestIndex(setCurrent?: boolean): number;
-
-  /** Navigate to the next item */
-  next(vars?: { duration?: number; easing?: string }): any;
-
-  /** Navigate to the previous item */
-  previous(vars?: { duration?: number; easing?: string }): any;
-
-  /** Navigate to a specific item index */
-  toIndex(index: number, vars?: { duration?: number; easing?: string }): any;
-
-  /** Refresh measurements and recalculate (useful after resize) */
-  refresh(deep?: boolean): void;
-
-  /** Clean up and destroy the loop */
-  destroy(): void;
-}
-
-/**
- * Looper Module
- * Creates seamless horizontal infinite scrolling carousels with drag interaction,
- * momentum/inertia, auto-crawl, snap-to-item, and responsive resize handling
+ * Looper Module Class
  */
 export default class Looper {
-  /**
-   * Create a new Looper instance
-   * @param app - Jupiter application instance
-   * @param opts - Configuration options
-   */
-  constructor(app: any, opts?: Partial<LooperOptions>);
-
-  /** Configuration options */
-  opts: LooperOptions;
-
-  /** Jupiter application instance */
-  app: any;
-
-  /** Array of active loop controllers */
-  loopers: LoopController[];
-
-  /** Array of pending loopers waiting for initialization */
-  pendingLoopers: any[];
-
-  /** DOM elements matching the selector */
-  looperElements: HTMLElement[];
-
-  /**
-   * Initialize the module and find all looper elements
-   */
-  init(): void;
-
-  /**
-   * Finalize loopers after APPLICATION:REVEALED event
-   * This is when actual measurements and animations are set up
-   */
-  finalizeLoopers(): void;
-
-  /**
-   * Destroy all loopers and clean up
-   */
-  destroy(): void;
+    constructor(app: any, opts?: {});
+    app: any;
+    opts: any;
+    loopers: any[];
+    pendingLoopers: any[];
+    init(): void;
+    looperElements: any;
+    finalizeLoopers(): void;
+    destroy(): void;
 }

package/types/modules/Marquee/index.d.ts

@@ -11,6 +11,7 @@ export default class Marquee {
     duration: number;
     clearHolders(): void;
     killTweens(): void;
+    speedAnimation: any;
     initializeTween(): void;
     play(rampUp?: boolean): void;
     playing: boolean;
@@ -19,5 +20,6 @@ export default class Marquee {
     speedUp(): void;
     setupObserver(): void;
     fillText(): void;
+    measuredHeight: any;
     setHeight(): void;
 }

package/types/modules/Moonwalk/index.d.ts

@@ -15,7 +15,11 @@ export default class Moonwalk {
         id: string;
         el: any;
         name: any;
-        timeline: any;
+        animation: {
+            lastDelay: number;
+            lastDuration: number;
+            lastStartTime: any;
+        };
         observer: any;
         stage: {
             name: any;
@@ -91,7 +95,11 @@ export default class Moonwalk {
         id: string;
         el: any;
         name: any;
-        timeline: any;
+        animation: {
+            lastDelay: number;
+            lastDuration: number;
+            lastStartTime: any;
+        };
         observer: any;
         stage: {
             name: any;
@@ -104,7 +112,11 @@ export default class Moonwalk {
         id: string;
         el: any;
         name: any;
-        timeline: any;
+        animation: {
+            lastDelay: number;
+            lastDuration: number;
+            lastStartTime: any;
+        };
         observer: any;
         stage: {
             name: any;
@@ -153,6 +165,24 @@ export default class Moonwalk {
      * @param {*} children
      */
     orderChildren(children: any): any[];
+    /**
+     * Calculate the delay for the next animation in the section.
+     * This replaces GSAP's timeline.recent() logic.
+     *
+     * @param {*} section - The section object
+     * @param {*} duration - Duration of the animation to add
+     * @param {*} overlap - How much the animations should overlap
+     * @returns {number} The delay in seconds
+     */
+    calculateDelay(section: any, duration: any, overlap: any): number;
+    /**
+     * Update the animation state after adding an animation.
+     *
+     * @param {*} section - The section object
+     * @param {*} delay - The delay that was used
+     * @param {*} duration - The duration of the animation
+     */
+    updateAnimationState(section: any, delay: any, duration: any): void;
     onReady(): void;
     /**
      * Called on `APPLICATION_READY` event, if `config.fireOnReady`.

package/types/modules/Popover/index.d.ts

@@ -16,7 +16,7 @@ export default class Popover {
     handleClick(e: any): void;
     get isVisible(): boolean;
     show(): void;
-    updatePosition(animate?: boolean): void;
+    updatePosition(shouldAnimate?: boolean): void;
     hide(): void;
     toggle(): void;
     addDocumentClickHandler(): void;

package/types/modules/StickyHeader/index.d.ts

@@ -31,6 +31,7 @@ export default class StickyHeader {
     mobileMenuOpen: boolean;
     timer: any;
     resetResizeTimer: any;
+    scrollSettleTimeout: NodeJS.Timeout;
     intersectingElements: any;
     initialize(): void;
     pageIsScrolledOnReady: boolean;

package/types/modules/Toggler/index.d.ts

@@ -2,6 +2,22 @@
  * Toggler component for show/hide functionality
  * Uses [data-toggle-trigger] for the toggle button and [data-toggle-content] for toggleable content
  * Can be grouped using [data-toggle-group] to create accordion-like behavior
+ *
+ * IMPORTANT: For smooth animations, avoid padding/margins on [data-toggle-content].
+ * Instead, wrap content in a child element with padding/margins:
+ *
+ * @example
+ * // ❌ DON'T: Padding/margins directly on toggle content
+ * <div data-toggle-content style="padding: 20px; margin-top: 10px">
+ *   Content here
+ * </div>
+ *
+ * // ✅ DO: Wrap content in child element
+ * <div data-toggle-content>
+ *   <div style="padding: 20px; margin-top: 10px">
+ *     Content here
+ *   </div>
+ * </div>
  */
 export default class Toggler {
     /**

package/types/utils/motion-helpers.d.ts

@@ -0,0 +1,91 @@
+/**
+ * Set properties immediately (like gsap.set)
+ * Uses direct DOM manipulation for synchronous style application
+ *
+ * @param {Element|string|NodeList|Array} target - Element(s) or selector
+ * @param {Object} values - Properties to set
+ */
+export function set(target: Element | string | NodeList | any[], values: any): void;
+/**
+ * Animate autoAlpha (opacity + visibility)
+ * Mimics GSAP's autoAlpha property
+ *
+ * @param {Element|string} target - Element or selector
+ * @param {number} value - Target alpha value (0 or 1)
+ * @param {Object} options - Animation options
+ * @returns {Object} Animation object
+ */
+export function animateAutoAlpha(target: Element | string, value: number, options?: any): any;
+/**
+ * Clear inline styles
+ * Mimics GSAP's clearProps
+ *
+ * @param {Element|string|NodeList|Array} target - Element(s) or selector
+ * @param {string|Array} props - Properties to clear or 'all'
+ */
+export function clearProps(target: Element | string | NodeList | any[], props?: string | any[]): void;
+/**
+ * Delayed call helper
+ * Mimics gsap.delayedCall
+ * Uses Motion's delay function (locked to animation frame loop for better sync)
+ *
+ * @param {number} duration - Delay in seconds
+ * @param {Function} callback - Callback function
+ * @returns {Promise} Promise that resolves after delay
+ */
+export function delayedCall(duration: number, callback: Function): Promise<any>;
+/**
+ * Convert GSAP easing strings to Motion.js compatible easings
+ * Handles common GSAP easing types and returns valid Motion.js easing
+ *
+ * @param {string|Array} easing - GSAP easing string or bezier array
+ * @returns {string|Array} Motion.js compatible easing
+ *
+ * Valid Motion.js easings:
+ * - "linear"
+ * - "easeIn"
+ * - "easeInOut"
+ * - "easeOut"
+ * - "circIn"
+ * - "circInOut"
+ * - "circOut"
+ * - "backIn"
+ * - "backInOut"
+ * - "backOut"
+ * - "anticipate"
+ * - Bezier arrays: [x1, y1, x2, y2]
+ */
+export function convertEasing(easing: string | any[]): string | any[];
+/**
+ * Paused Timeline helper
+ * Mimics GSAP's paused timeline pattern for building sequences
+ * Used by modules like Lightbox that build animations before playing them
+ */
+export class PausedTimeline {
+    sequence: any[];
+    /**
+     * Add animation to timeline
+     * @param {Element|string} target - Element or selector
+     * @param {Object} values - Properties to animate
+     * @param {Object} options - Animation options
+     * @returns {PausedTimeline} this for chaining
+     */
+    to(target: Element | string, values: any, options?: any): PausedTimeline;
+    /**
+     * Add callback to timeline
+     * @param {Function} callback - Function to call
+     * @returns {PausedTimeline} this for chaining
+     */
+    call(callback: Function): PausedTimeline;
+    /**
+     * Clear timeline sequence
+     * @returns {PausedTimeline} this for chaining
+     */
+    clear(): PausedTimeline;
+    /**
+     * Play timeline sequence
+     * Executes all animations and callbacks in order
+     * @returns {Promise} Promise that resolves when sequence completes
+     */
+    play(): Promise<any>;
+}