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

package/src/modules/Moonwalk/index.js

@@ -11,13 +11,16 @@ import * as Events from '../../events'
 import prefersReducedMotion from '../../utils/prefersReducedMotion'
 import imageIsLoaded from '../../utils/imageIsLoaded'
 import imagesAreLoaded from '../../utils/imagesAreLoaded'
-import { set, animateAutoAlpha, delayedCall, convertEasing } from '../../utils/motion-helpers'
+import { set, delayedCall, convertEasing } from '../../utils/motion-helpers'
 import Dom from '../Dom'
 
 /**
  * Debug logging
  */
 const DEBUG = false
+let _idCounter = 0
+
+const MOONWALK_ATTRS = ['data-moonwalk', 'data-moonwalk-section', 'data-moonwalk-children']
 
 function logMoonwalk(category, message, data = {}) {
   if (DEBUG) {
@@ -40,30 +43,42 @@ function logComputedStyle(element, props = ['opacity', 'transform']) {
  * @property {Object} to - Ending properties for the transition
  */
 
+/**
+ * @typedef {Object} AlphaTweenConfig
+ * @property {number} [duration] - Duration of the alpha tween (defaults to walk duration)
+ * @property {string} [ease] - Easing function (defaults to 'easeIn')
+ * @property {number} [delay] - Additional delay before the alpha tween starts
+ */
+
 /**
  * @typedef {Object} MoonwalkWalk
  * @property {number} [startDelay=0] - Delay before the animation starts
  * @property {number} [interval=0.15] - Time between animations in a sequence
  * @property {number} [duration=0.65] - Duration of the animation
- * @property {boolean|Object} [alphaTween=false] - Whether to add a separate opacity tween
- * @property {MoonwalkTransition} transition - The transition configuration
- * @property {string} [sectionTargets] - CSS selector for targeting elements in named sections
+ * @property {boolean|AlphaTweenConfig} [alphaTween=false] - Whether to add a separate opacity tween. Pass `true` for defaults or an AlphaTweenConfig object for control.
+ * @property {MoonwalkTransition|null} transition - The transition configuration. Set to `null` for CSS-only mode (uses `data-moonwalked` attribute for CSS transitions).
+ * @property {string} [sectionTargets] - CSS selector for targeting elements in named sections (instead of using direct children)
+ */
+
+/**
+ * @typedef {Object} MoonwalkRunMeta
+ * @property {string|null} direction - The viewport entry/exit direction ('top', 'bottom', 'left', 'right', or null)
  */
 
 /**
  * @typedef {Object} MoonwalkRun
  * @property {number} [threshold=0] - IntersectionObserver threshold
- * @property {Function} callback - Function called when element enters viewport
- * @property {Function} [onExit] - Function called when element exits viewport
+ * @property {(el: HTMLElement, repeated: boolean, meta: MoonwalkRunMeta) => void} callback - Function called when element enters viewport
+ * @property {(el: HTMLElement, exited: boolean, meta: MoonwalkRunMeta) => void} [onExit] - Function called when element exits viewport
  * @property {boolean} [repeated=false] - Whether the run should repeat
  * @property {string} [rootMargin] - IntersectionObserver rootMargin
- * @property {Function} [initialize] - Function called during initialization
- * @property {Function} [onReady] - Function called when APPLICATION_REVEALED fires, before viewport observers start
+ * @property {(el: HTMLElement) => void} [initialize] - Function called during initialization
+ * @property {(el: HTMLElement) => void} [onReady] - Function called when APPLICATION_REVEALED fires, before viewport observers start
  */
 
 /**
  * @typedef {Object} MoonwalkOptions
- * @property {string|Function} [on=Events.APPLICATION_REVEALED] - Event to trigger animations
+ * @property {string|null} [on=Events.APPLICATION_REVEALED] - Event name to trigger animations. Set to `null` to trigger manually via `ready()`.
  * @property {number} [initialDelay=0.1] - Delay before starting animations
  * @property {boolean} [clearLazyload=false] - Clear data-ll-srcset attributes
  * @property {boolean} [clearNestedSections=true] - Remove nested data-moonwalk-section attributes
@@ -75,7 +90,7 @@ function logComputedStyle(element, props = ['opacity', 'transform']) {
  * @property {boolean} [uniqueIds=false] - Generate unique IDs for moonwalk elements
  * @property {boolean} [addIndexes=false] - Add index attributes to elements
  * @property {Object.<string, MoonwalkRun>} [runs={}] - Run configurations
- * @property {Object.<string, MoonwalkWalk>} walks - Walk configurations
+ * @property {Object.<string, MoonwalkWalk>} [walks] - Walk configurations
  */
 
 /** @type {MoonwalkOptions} */
@@ -166,7 +181,50 @@ const DEFAULT_OPTIONS = {
 }
 
 /**
- * Moonwalk animation system for scroll-based reveal animations
+ * Normalize alphaTween config into a consistent object form.
+ * Returns a new object (never mutates the original).
+ */
+export function normalizeAlphaTween(alphaTween, duration) {
+  if (typeof alphaTween === 'object' && alphaTween !== null) {
+    return { ...alphaTween, duration: alphaTween.duration || duration }
+  }
+  if (alphaTween === true) {
+    return { duration, ease: 'easeIn' }
+  }
+  return alphaTween
+}
+
+/**
+ * Moonwalk animation system for scroll-based reveal animations.
+ *
+ * ## HTML attributes
+ *
+ * - `data-moonwalk` / `data-moonwalk="{walkName}"` — marks an element for scroll-triggered animation
+ * - `data-moonwalk-section` / `data-moonwalk-section="{walkName}"` — groups elements; unnamed sections
+ *   animate children individually, named sections stagger-reveal all children at once
+ * - `data-moonwalk-children` / `data-moonwalk-children="{walkName}"` — converts direct children
+ *   into `data-moonwalk` (or `data-moonwalk="{walkName}"`) elements automatically
+ * - `data-moonwalk-stage="{walkName}"` — applies a walk transition to the section element itself
+ *   before its children animate (e.g. fade in a container, then reveal items)
+ * - `data-moonwalk-order="{number}"` — overrides the DOM order of children inside a named section;
+ *   elements with order are sorted first, unordered elements keep their relative position
+ * - `data-moonwalk-run="{runName}"` — standalone observer-based callback (not part of walk system)
+ * - `data-placeholder` / `data-ll-placeholder` — skip waiting for image load before tweening
+ *
+ * ## CSS-only mode
+ *
+ * Set `transition: null` on a walk to use CSS-only animations. Moonwalk will stagger-add the
+ * `data-moonwalked` attribute instead of running JS tweens. Style the reveal via CSS:
+ * ```css
+ * [data-moonwalk="fade"] { opacity: 0; transition: opacity 0.5s; }
+ * [data-moonwalk="fade"][data-moonwalked] { opacity: 1; }
+ * ```
+ *
+ * ## alphaTween
+ *
+ * Can be `true` (defaults: duration from walk, ease `'easeIn'`) or an object:
+ * `{ duration?: number, ease?: string, delay?: number }` for fine-grained control
+ * over a separate opacity animation layered on top of the main transition.
  */
 export default class Moonwalk {
   /**
@@ -178,7 +236,7 @@ export default class Moonwalk {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
     if (container !== document.body) {
-      this.opts.on = () => {}
+      this.opts.on = null
     }
     this.initialize(container)
   }
@@ -214,6 +272,7 @@ export default class Moonwalk {
     }
 
     this.addClass()
+    this._observers = []
     this.sections = this.initializeSections(container)
     this.runs = this.initializeRuns(container)
 
@@ -225,8 +284,9 @@ export default class Moonwalk {
       this.removeAllWalks(container)
     }
 
-    if (this.opts.on) {
-      window.addEventListener(this.opts.on, this.onReady.bind(this))
+    if (this.opts.on && typeof this.opts.on === 'string') {
+      this._boundOnReady = this.onReady.bind(this)
+      window.addEventListener(this.opts.on, this._boundOnReady)
     }
   }
 
@@ -275,12 +335,7 @@ export default class Moonwalk {
    * Remove all moonwalks. Useful for clients who prefer reduced motion
    */
   removeAllWalks(container = document.body) {
-    const keys = [
-      'data-moonwalk',
-      'data-moonwalk-section',
-      'data-moonwalk-children',
-    ]
-    keys.forEach((key) => {
+    MOONWALK_ATTRS.forEach((key) => {
       const elems = container.querySelectorAll(`[${key}]`)
       Array.from(elems).forEach((el) => el.removeAttribute(key))
       container.removeAttribute(key)
@@ -288,12 +343,7 @@ export default class Moonwalk {
   }
 
   removeFor(container = document.body, selector) {
-    const keys = [
-      'data-moonwalk',
-      'data-moonwalk-section',
-      'data-moonwalk-children',
-    ]
-    keys.forEach((key) => {
+    MOONWALK_ATTRS.forEach((key) => {
       const elems = container.querySelectorAll(`${selector}[${key}]`)
       Array.from(elems).forEach((el) => el.removeAttribute(key))
     })
@@ -324,10 +374,7 @@ export default class Moonwalk {
    */
   addIds(section) {
     Array.from(section.querySelectorAll('[data-moonwalk]')).forEach((el) => {
-      el.setAttribute(
-        'data-moonwalk-id',
-        Math.random().toString(36).substring(7)
-      )
+      el.setAttribute('data-moonwalk-id', `mw-${++_idCounter}`)
     })
   }
 
@@ -345,7 +392,7 @@ export default class Moonwalk {
       Array.from(elements).forEach((element, index) => {
         element.setAttribute('data-moonwalk-idx', index + 1)
       })
-    }, this)
+    })
   }
 
   /**
@@ -355,25 +402,27 @@ export default class Moonwalk {
   initializeRuns(container = document.body) {
     const runs = container.querySelectorAll('[data-moonwalk-run]')
     return Array.from(runs).map((run) => {
-      const foundRun = this.opts.runs[run.getAttribute('data-moonwalk-run')]
-      if (foundRun) {
-        if (foundRun.initialize) {
-          foundRun.initialize(run)
-        }
-        return {
-          el: run,
-          threshold: foundRun.threshold || 0,
-          initialize: foundRun.initialize,
-          onReady: foundRun.onReady,
-          callback: foundRun.callback,
-          onExit: foundRun.onExit,
-          repeated: foundRun.repeated,
-          rootMargin: foundRun.rootMargin,
-        }
+      const runName = run.getAttribute('data-moonwalk-run')
+      const foundRun = this.opts.runs[runName]
+      if (!foundRun) {
+        console.warn(`==> JUPITER/MOONWALK: Unknown run "${runName}" — not found in opts.runs`)
+        return null
       }
 
-      return null
-    })
+      if (foundRun.initialize) {
+        foundRun.initialize(run)
+      }
+      return {
+        el: run,
+        threshold: foundRun.threshold || 0,
+        initialize: foundRun.initialize,
+        onReady: foundRun.onReady,
+        callback: foundRun.callback,
+        onExit: foundRun.onExit,
+        repeated: foundRun.repeated,
+        rootMargin: foundRun.rootMargin,
+      }
+    }).filter(Boolean)
   }
 
   /**
@@ -408,7 +457,7 @@ export default class Moonwalk {
     }
 
     return {
-      id: Math.random().toString(36).substring(7),
+      id: `mw-${++_idCounter}`,
       el: section,
       name: section.getAttribute('data-moonwalk-section') || null,
       animation: {
@@ -464,7 +513,7 @@ export default class Moonwalk {
   setAttrs(element, val) {
     const affectedElements = []
 
-    Array.prototype.forEach.call(element.children, (c) => {
+    Array.from(element.children).forEach((c) => {
       c.setAttribute('data-moonwalk', val)
       affectedElements.push(c)
     })
@@ -548,6 +597,8 @@ export default class Moonwalk {
     }
 
     const observer = this.sectionObserver(section)
+    section.observer = observer
+    this._observers.push(observer)
     observer.observe(section.el)
   }
 
@@ -614,16 +665,7 @@ export default class Moonwalk {
                 })
               } else {
                 // JS animation mode
-                if (typeof tween.alphaTween === 'object') {
-                  tween.alphaTween.duration = tween.alphaTween.duration
-                    ? tween.alphaTween.duration
-                    : tween.duration
-                } else if (tween.alphaTween === true) {
-                  tween.alphaTween = {
-                    duration: tween.duration,
-                    ease: 'easeIn',
-                  }
-                }
+                const resolvedAlpha = normalizeAlphaTween(tween.alphaTween, tween.duration)
 
                 // Extract ease from to values and convert for Motion.js
                 const { ease: tweenEase, ...toValues } = tween.transition.to
@@ -646,13 +688,13 @@ export default class Moonwalk {
 
                 animate(section.children, toValues, animationOptions)
 
-                if (tween.alphaTween) {
+                if (resolvedAlpha) {
                   animate(
                     section.children,
                     { opacity: 1 },
                     {
-                      duration: tween.alphaTween.duration,
-                      ease: convertEasing(tween.alphaTween.ease || 'easeIn'),
+                      duration: resolvedAlpha.duration,
+                      ease: convertEasing(resolvedAlpha.ease || 'easeIn'),
                       delay: stagger(tween.interval, {
                         startDelay: tween.startDelay || 0,
                       }),
@@ -666,7 +708,7 @@ export default class Moonwalk {
           }
         }
       },
-      { rootMargin: opts.rootMargin }
+      { rootMargin: opts.rootMargin, threshold: opts.threshold }
     )
   }
 
@@ -680,7 +722,7 @@ export default class Moonwalk {
       const orderA = a.getAttribute('data-moonwalk-order')
         ? parseInt(a.getAttribute('data-moonwalk-order'))
         : null
-      const orderB = a.getAttribute('data-moonwalk-order')
+      const orderB = b.getAttribute('data-moonwalk-order')
         ? parseInt(b.getAttribute('data-moonwalk-order'))
         : null
 
@@ -758,11 +800,41 @@ export default class Moonwalk {
     })
   }
 
+  destroy() {
+    if (this.opts.on && typeof this.opts.on === 'string' && this._boundOnReady) {
+      window.removeEventListener(this.opts.on, this._boundOnReady)
+      this._boundOnReady = null
+    }
+
+    if (this._observers) {
+      this._observers.forEach(obs => obs.disconnect())
+      this._observers = []
+    }
+
+    if (this.sections) {
+      this.sections.forEach(section => {
+        section.el = null
+        section.elements = []
+        section.children = null
+        section.observer = null
+      })
+      this.sections = []
+    }
+
+    if (this.runs) {
+      this.runs.forEach(run => {
+        run.el = null
+        run.observer = null
+      })
+      this.runs = []
+    }
+  }
+
   onReady() {
     if (this.opts.initialDelay) {
       setTimeout(() => {
         this.ready()
-      }, this.opts.initialDelay)
+      }, this.opts.initialDelay * 1000)
     } else {
       this.ready()
     }
@@ -778,7 +850,7 @@ export default class Moonwalk {
     // Execute onReady callbacks for all runs
     for (let idx = 0; idx < this.runs.length; idx += 1) {
       const run = this.runs[idx]
-      if (run && run.onReady) {
+      if (run.onReady) {
         run.onReady(run.el)
       }
     }
@@ -786,14 +858,10 @@ export default class Moonwalk {
     for (let idx = 0; idx < this.runs.length; idx += 1) {
       const run = this.runs[idx]
 
-      if (!run) {
-        return
-      }
-
       // if this is the last section, set rootMargin to 0
       let rootMargin
 
-      if (idx === this.sections.length - 1) {
+      if (idx === this.runs.length - 1) {
         rootMargin = '0px'
       } else {
         if (run.rootMargin) {
@@ -804,6 +872,8 @@ export default class Moonwalk {
       }
 
       const runObserver = this.runObserver(run, rootMargin)
+      run.observer = runObserver
+      this._observers.push(runObserver)
       runObserver.observe(run.el)
     }
 
@@ -822,6 +892,7 @@ export default class Moonwalk {
 
       if (!section.name) {
         section.observer = this.observer(section, rootMargin)
+        this._observers.push(section.observer)
       }
 
       section.elements = section.el.querySelectorAll('[data-moonwalk]')
@@ -851,6 +922,46 @@ export default class Moonwalk {
     }
   }
 
+  /**
+   * Get the viewport entry direction based on current scroll direction.
+   * When entering, elements appear from the opposite side of scroll direction.
+   *
+   * @param {boolean} isEntry - Whether this is an entry (true) or exit (false)
+   * @returns {string|null}
+   */
+  getScrollDirection(isEntry) {
+    if (!this.app.state || !this.app.state.scrollDirection) {
+      return null
+    }
+
+    const entryMap = { down: 'bottom', up: 'top', right: 'left', left: 'right' }
+    const exitMap = { down: 'top', up: 'bottom', right: 'right', left: 'left' }
+    const map = isEntry ? entryMap : exitMap
+
+    return map[this.app.state.scrollDirection] || null
+  }
+
+  /**
+   * Get the exit direction for an element, falling back to position-based
+   * detection when scroll direction is unavailable.
+   *
+   * @param {IntersectionObserverEntry} entry
+   * @returns {string|null}
+   */
+  getExitDirection(entry) {
+    const scrollDir = this.getScrollDirection(false)
+    if (scrollDir) {
+      return scrollDir
+    }
+
+    const { boundingClientRect: rect } = entry
+    if (rect.bottom <= 0) return 'top'
+    if (rect.top >= window.innerHeight) return 'bottom'
+    if (rect.right <= 0) return 'left'
+    if (rect.left >= window.innerWidth) return 'right'
+    return null
+  }
+
   /**
    * Creates and returns the RUN observer for data-moonwalk-run elements
    *
@@ -858,52 +969,14 @@ export default class Moonwalk {
    * @param {*} rootMargin
    */
   runObserver(run, rootMargin) {
-    // Store the previous positions of observed elements to compare for exit direction
-    const elementPositions = new WeakMap()
-
     return new IntersectionObserver(
       (entries, self) => {
         for (let i = 0; i < entries.length; i += 1) {
           const entry = entries[i]
 
-          // Store the element's current position in the viewport
-          const boundingRect = entry.boundingClientRect
-          const viewportHeight = window.innerHeight
-          const viewportWidth = window.innerWidth
-
           if (entry.isIntersecting && run.callback) {
-            // Calculate entry direction
-            let meta = { direction: null }
-            
-            // Use the app's scroll direction for reliable detection
-            // If scrollDirection is null, the element was likely revealed on initial load
-            if (this.app.state && this.app.state.scrollDirection) {
-              // Map scroll direction to viewport entry direction
-              switch (this.app.state.scrollDirection) {
-                case 'down':
-                  meta.direction = 'bottom' // When scrolling down, elements enter from bottom
-                  break
-                case 'up':
-                  meta.direction = 'top' // When scrolling up, elements enter from top
-                  break
-                case 'right':
-                  meta.direction = 'left' // When scrolling right, elements enter from left
-                  break
-                case 'left':
-                  meta.direction = 'right' // When scrolling left, elements enter from right
-                  break
-              }
-            }
-            // If no scroll direction is available, direction remains null
-            
-            // Store the element's position when it enters the viewport
-            elementPositions.set(entry.target, {
-              top: boundingRect.top,
-              bottom: boundingRect.bottom,
-              left: boundingRect.left,
-              right: boundingRect.right
-            })
-            
+            const meta = { direction: this.getScrollDirection(true) }
+
             const runRepeated = entry.target.hasAttribute(
               'data-moonwalk-run-triggered'
             )
@@ -921,40 +994,8 @@ export default class Moonwalk {
                 'data-moonwalk-run-exit-triggered'
               )
               entry.target.setAttribute('data-moonwalk-run-exit-triggered', '')
-              
-              // Calculate exit direction
-              let meta = { direction: null }
-              
-              // Use the app's scroll direction for reliable detection
-              // For exit direction, it's the opposite of the entry direction for the same scroll
-              if (this.app.state && this.app.state.scrollDirection) {
-                // Map scroll direction to viewport exit direction
-                switch (this.app.state.scrollDirection) {
-                  case 'down':
-                    meta.direction = 'top' // When scrolling down, elements exit from top
-                    break
-                  case 'up':
-                    meta.direction = 'bottom' // When scrolling up, elements exit from bottom
-                    break
-                  case 'right':
-                    meta.direction = 'right' // When scrolling right, elements exit from right
-                    break
-                  case 'left':
-                    meta.direction = 'left' // When scrolling left, elements exit from left
-                    break
-                }
-              } else {
-                // If no scroll direction is available, use the simplest position-based check
-                if (boundingRect.bottom <= 0) {
-                  meta.direction = 'top'
-                } else if (boundingRect.top >= viewportHeight) {
-                  meta.direction = 'bottom'
-                } else if (boundingRect.right <= 0) {
-                  meta.direction = 'left'
-                } else if (boundingRect.left >= viewportWidth) {
-                  meta.direction = 'right'
-                }
-              }
+
+              const meta = { direction: this.getExitDirection(entry) }
 
               run.onExit(entry.target, runExited, meta)
               if (!run.repeated) {
@@ -987,8 +1028,6 @@ export default class Moonwalk {
           const entry = entries[i]
 
           if (entry.isIntersecting || entry.intersectionRatio > 0) {
-            section.running = true
-
             const walkName = entry.target.getAttribute('data-moonwalk')
             const targetId =
               entry.target.getAttribute('data-testid') ||
@@ -1009,25 +1048,14 @@ export default class Moonwalk {
             // Default interval to 0.15 if not specified (same as default walk)
             const interval = cfg.interval !== undefined ? cfg.interval : 0.15
 
-            let { alphaTween } = cfg
-            let overlap = (duration - interval) * -1 // flip it
+            const alphaTween = normalizeAlphaTween(cfg.alphaTween, duration)
+            let overlap = interval - duration
 
             if (section.stage.firstTween) {
               overlap = 0
               section.stage.firstTween = false
             }
 
-            if (typeof alphaTween === 'object' && alphaTween !== null) {
-              alphaTween.duration = alphaTween.duration
-                ? alphaTween.duration
-                : duration
-            } else if (alphaTween === true) {
-              alphaTween = {
-                duration,
-                ease: 'easeIn',
-              }
-            }
-
             const tweenFn = () => {
               if (transition) {
                 this.tweenJS(
@@ -1104,6 +1132,7 @@ export default class Moonwalk {
    * @param {*} section
    * @param {*} target
    * @param {*} tweenDuration
+   * @param {*} tweenInterval
    * @param {*} tweenTransition
    * @param {*} tweenOverlap
    * @param {*} alphaTween
@@ -1208,9 +1237,10 @@ export default class Moonwalk {
    *
    * @param {*} section
    * @param {*} target
-   * @param {*} duration
-   * @param {*} transition
-   * @param {*} overlap
+   * @param {*} tweenDuration
+   * @param {*} tweenInterval
+   * @param {*} tweenTransition
+   * @param {*} tweenOverlap
    */
   tweenCSS(
     section,

package/src/utils/rafCallback.js

@@ -1,5 +1,5 @@
 const DEFAULT_FPS = 60
-const SCOPES = {}
+const SCOPES = new Map()
 
 export default (callback, fps = DEFAULT_FPS) =>
   (...passedArgs) =>
@@ -7,12 +7,11 @@ export default (callback, fps = DEFAULT_FPS) =>
       const msCurrent = new Date().getTime()
       const fpsInterval = 1000 / fps
 
-      SCOPES[callback] = SCOPES[callback] || null
-
-      const msDelta = SCOPES[callback] ? msCurrent - SCOPES[callback] : null
+      const msLast = SCOPES.get(callback) || null
+      const msDelta = msLast ? msCurrent - msLast : null
 
       if (msDelta === null || msDelta > fpsInterval) {
-        SCOPES[callback] = msCurrent - (msDelta % fpsInterval)
+        SCOPES.set(callback, msCurrent - (msDelta % fpsInterval))
         callback(...passedArgs)
       }
     })

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

@@ -3,8 +3,8 @@ export default class Application {
     debugType: number;
     debugOverlay: Element;
     userAgent: string;
-    _lastWindowHeight: number;
     breakpoint: any;
+    root: HTMLElement;
     language: string;
     size: {
         width: number;
@@ -28,19 +28,19 @@ export default class Application {
     };
     opts: any;
     focusableSelectors: any;
+    browser: any;
     featureTests: any;
     breakpoints: any;
     fontLoader: any;
-    fader: any;
     callbacks: {};
     SCROLL_LOCKED: boolean;
     SCROLLBAR_WIDTH: number;
     INITIALIZED: boolean;
     PREFERS_REDUCED_MOTION: boolean;
-    beforeInitializedEvent: CustomEvent<any>;
-    initializedEvent: CustomEvent<any>;
-    readyEvent: CustomEvent<any>;
-    revealedEvent: CustomEvent<any>;
+    beforeInitializedEvent: CustomEvent<this>;
+    initializedEvent: CustomEvent<this>;
+    readyEvent: CustomEvent<this>;
+    revealedEvent: CustomEvent<this>;
     /**
      * Main init. Called from client application on DOMReady.
      */
@@ -110,7 +110,6 @@ export default class Application {
      * Ugly hacks
      */
     hacks(): void;
-    getIOSCurrentInnerHeight(): number;
     getIOSInnerHeightMax(): number;
     /**
      * Event emitters
@@ -144,7 +143,7 @@ export default class Application {
     onScroll(e: any): void;
     onVisibilityChange(e: any): void;
     pollForElement(selector: any, time?: number, callback?: () => void): void;
-    pollForVar(variable: any, time?: number, callback?: () => void): void;
+    pollForVar(getter: any, time?: number, callback?: () => void): void;
     setupDebug(): void;
     toggleDebug(): void;
     /**