@brandocms/jupiter 5.0.0-beta.1 → 5.0.0-beta.11

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>;
+}