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

package/package.json

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

package/src/modules/DoubleHeader/index.js

@@ -418,6 +418,7 @@ export default class DoubleHeader {
   unpin() {
     if (!this.preventUnpin) {
       this._pinned = false
+      this._updateHeaderHeight()
       this.opts.onUnpin(this)
     }
   }
@@ -425,6 +426,7 @@ export default class DoubleHeader {
   pin() {
     if (!this.preventPin) {
       this._pinned = true
+      this._updateHeaderHeight()
       this.opts.onSmall(this)
       this.opts.onPin(this)
     }
@@ -434,6 +436,7 @@ export default class DoubleHeader {
     this._small = false
     this.auxEl.setAttribute('data-header-big', '')
     this.auxEl.removeAttribute('data-header-small')
+    this._updateHeaderHeight()
     this.opts.onNotSmall(this)
   }
 
@@ -441,9 +444,20 @@ export default class DoubleHeader {
     this._small = true
     this.auxEl.setAttribute('data-header-small', '')
     this.auxEl.removeAttribute('data-header-big')
+    this._updateHeaderHeight()
     this.opts.onSmall(this)
   }
 
+  /**
+   * Update the --header-height CSS variable on :root.
+   * Uses el height when pinned (el is the main header, auxEl is secondary).
+   * Set to 0px when unpinned.
+   */
+  _updateHeaderHeight() {
+    const height = this._pinned ? `${this.el.clientHeight}px` : '0px'
+    document.documentElement.style.setProperty('--header-height', height)
+  }
+
   shouldUnpin(toleranceExceeded) {
     if (this._navVisible) {
       return true

package/src/modules/FixedHeader/index.js

@@ -579,6 +579,7 @@ export default class FixedHeader {
     this._pinned = false
     this.el.setAttribute('data-header-unpinned', '')
     this.el.removeAttribute('data-header-pinned')
+    this._updateHeaderHeight()
     this.opts.onUnpin(this)
   }
 
@@ -589,6 +590,7 @@ export default class FixedHeader {
     this._pinned = true
     this.el.setAttribute('data-header-pinned', '')
     this.el.removeAttribute('data-header-unpinned')
+    this._updateHeaderHeight()
     this.opts.onPin(this)
   }
 
@@ -596,6 +598,7 @@ export default class FixedHeader {
     this._small = false
     this.el.setAttribute('data-header-big', '')
     this.el.removeAttribute('data-header-small')
+    this._updateHeaderHeight()
     this.opts.onNotSmall(this)
   }
 
@@ -603,9 +606,19 @@ export default class FixedHeader {
     this._small = true
     this.el.setAttribute('data-header-small', '')
     this.el.removeAttribute('data-header-big')
+    this._updateHeaderHeight()
     this.opts.onSmall(this)
   }
 
+  /**
+   * Update the --header-height CSS variable on :root.
+   * Set to the header's current height when pinned, 0px when unpinned.
+   */
+  _updateHeaderHeight() {
+    const height = this._pinned ? `${this.el.clientHeight}px` : '0px'
+    document.documentElement.style.setProperty('--header-height', height)
+  }
+
   notAltBg() {
     this._altBg = false
     this.el.setAttribute('data-header-reg-bg', '')

package/src/modules/Links/index.js

@@ -29,7 +29,7 @@ const DEFAULT_OPTIONS = {
     if (links.opts.scrollOffsetNav) {
       const header = document.querySelector('header[data-nav]')
       const headerHeight = header ? header.clientHeight : 0
-      target = { y: target, offsetY: headerHeight }
+      target = { y: target, offsetY: -headerHeight }
     }
     links.app.scrollTo(target, links.opts.scrollDuration, links.opts.triggerEvents)
   },

package/src/modules/Looper/index.js

@@ -19,7 +19,7 @@ function symmetricMod(value, base) {
 const CLONE_BUFFER_MULTIPLIER = 2.5
 const MIN_CRAWL_SPEED = 0.001
 const PING_PONG_PAUSE_MS = 200
-const VELOCITY_WINDOW_MS = 100
+const VELOCITY_WINDOW_MS = 150
 const SPEED_RAMP_DURATION = 2
 
 /**
@@ -44,12 +44,13 @@ const DEFAULT_OPTIONS = {
   loop: true, // Infinite looping (false for linear scrolling)
   draggable: true, // Enable drag interaction
   endAlignment: 'right', // For non-looping: 'right' = last item at viewport right edge, 'start' = last item at viewport left edge
-  minimumMovement: 3, // Pixels - movement below this is treated as click, above as drag
+  minimumMovement: 3, // Pixels for mouse - movement below this is treated as click, above as drag
+  touchMinimumMovement: 10, // Pixels for touch - higher threshold for finger imprecision
 
   // Inertia/throw configuration (when dragging and releasing)
   throwResistance: 325, // Time constant for deceleration (lower = more resistance/faster stop, higher = less resistance/longer glide)
   throwPower: 0.8, // Deceleration curve (0-1, higher = more gradual slowdown)
-  throwVelocityMultiplier: 1.0, // Scale velocity for all throws (0.5 = half speed, 2.0 = double)
+  throwVelocityMultiplier: 0.8, // Scale velocity for all throws (0.5 = half speed, 2.0 = double)
   snapVelocityMultiplier: 0.8, // Additional scaling for snapped loopers (stacks with throwVelocityMultiplier)
 
   // Snap animation configuration (when snap: true)
@@ -66,6 +67,10 @@ const DEFAULT_OPTIONS = {
     mouseOut: { speed: 1, duration: 0.75 },
   },
 
+  // Called when the looper is ready to reveal. Receives (wrapper, loop) args.
+  // Override to control the reveal animation yourself. Default fades in the wrapper.
+  onReveal: null,
+
   selector: '[data-moonwalk-run="loop"]',
 }
 
@@ -816,9 +821,23 @@ function horizontalLoop(app, items, config) {
   function setupDrag() {
     // isDragging is now module-level so wrap detection can see it
     let startX = 0
+    let startY = 0
     let startPosition = 0
     let velocityTracker = [] // Track recent movements for velocity calculation
     let hasDragged = false // Did movement exceed minimumMovement threshold?
+    let axisDecided = false // Has the drag axis been determined? (horizontal vs vertical)
+    let stoppedAnimation = false // Was an animation stopped by this pointer down? (tap-to-stop)
+    let resumeTimeout = null // Delayed crawl resume after tap-to-stop
+    let activeMinimumMovement = config.minimumMovement // Adjusted per pointer type (touch vs mouse)
+
+    /**
+     * Capture-phase click handler that prevents link navigation after a drag.
+     * Added once per drag and auto-removes via { once: true }.
+     */
+    function swallowClick(e) {
+      e.preventDefault()
+      e.stopPropagation()
+    }
 
     /**
      * Calculate velocity from recent pointer movements
@@ -828,8 +847,8 @@ function horizontalLoop(app, items, config) {
     function getVelocity() {
       if (velocityTracker.length < 2) return 0
 
-      // Use last 5 movements for smoothing
-      const recent = velocityTracker.slice(-5)
+      // Use last 6 movements for smoothing
+      const recent = velocityTracker.slice(-6)
       let totalVelocity = 0
       let totalWeight = 0
 
@@ -861,15 +880,33 @@ function horizontalLoop(app, items, config) {
       isDragging = true
       indexSetByNav = false
       startX = e.clientX
+      startY = e.clientY
       startPosition = position.get()
-      velocityTracker = [{ x: e.clientX, time: Date.now() }]
+      velocityTracker = [{ x: e.clientX, time: e.timeStamp }]
       hasDragged = false // Reset - will be set true if movement exceeds threshold
+      axisDecided = false // Reset - will be decided on first significant movement
+
+      // Use higher threshold for touch to prevent accidental drags from finger imprecision
+      activeMinimumMovement = e.pointerType === 'touch'
+        ? config.touchMinimumMovement
+        : config.minimumMovement
 
       // Stop autoplay on user interaction
       if (loopController && loopController.stopAutoplay) {
         loopController.stopAutoplay()
       }
 
+      // Cancel any pending resume from a previous tap-to-stop
+      clearTimeout(resumeTimeout)
+
+      // Detect if we're stopping a running animation (tap-to-stop)
+      stoppedAnimation = !!(
+        inertiaAnimation ||
+        snapAnimation ||
+        (animation && animation.speed !== 0) ||
+        speedRampAnimation
+      )
+
       // Stop any ongoing animations
       if (inertiaAnimation) {
         inertiaAnimation.stop()
@@ -888,11 +925,15 @@ function horizontalLoop(app, items, config) {
         speedRampAnimation = null
       }
 
-      // Prevent default to stop native drag behavior on links/images
-      // We'll manually trigger click in onPointerUp if it wasn't a real drag
-      e.preventDefault()
+      // For mouse: prevent default to stop native drag behavior on links/images
+      // For touch: don't preventDefault here — we need the browser to be able to scroll
+      // if the gesture turns out to be vertical. CSS touch-action: pan-y handles horizontal.
+      if (e.pointerType === 'mouse') {
+        e.preventDefault()
+      }
 
-      // Add move/up listeners to window for better tracking
+      // Add move/up listeners to window so events are never lost
+      // (pointer capture can silently fail or be released mid-drag)
       window.addEventListener('pointermove', onPointerMove, { passive: false })
       window.addEventListener('pointerup', onPointerUp)
       window.addEventListener('pointercancel', onPointerUp)
@@ -905,22 +946,40 @@ function horizontalLoop(app, items, config) {
       if (!isDragging) return
 
       const currentX = e.clientX
-      const currentTime = Date.now()
-
-      // Track total movement for click vs drag detection
-      const movementDelta = Math.abs(currentX - startX)
+      const currentTime = e.timeStamp
+
+      // Axis locking: when movement first exceeds threshold, check if primarily
+      // horizontal or vertical. If vertical, abort drag and let the browser scroll.
+      if (!axisDecided) {
+        const deltaX = Math.abs(currentX - startX)
+        const deltaY = Math.abs(e.clientY - startY)
+        const maxDelta = Math.max(deltaX, deltaY)
+
+        // Wait until enough movement to decide
+        if (maxDelta < activeMinimumMovement) return
+
+        axisDecided = true
+
+        // If clearly vertical, abort — release pointer and let browser scroll.
+        // Bias toward carousel interaction: vertical must be 1.2x horizontal to abort.
+        if (deltaY > deltaX * 1.2) {
+          isDragging = false
+          window.removeEventListener('pointermove', onPointerMove)
+          window.removeEventListener('pointerup', onPointerUp)
+          window.removeEventListener('pointercancel', onPointerUp)
+          // Resume crawl if we stopped it on pointerdown
+          if (stoppedAnimation && config.crawl) {
+            resumeCrawl()
+          }
+          return
+        }
 
-      // Check if this is now a real drag (exceeded minimum movement threshold)
-      if (!hasDragged && movementDelta > config.minimumMovement) {
+        // Horizontal — commit to drag
         hasDragged = true
-        // Now that we know it's a drag, change cursor and disable pointer events on items
         container.style.cursor = 'grabbing'
         trackElement.classList.add('looper-dragging')
       }
 
-      // Only update position if we've confirmed this is a drag
-      if (!hasDragged) return
-
       // Prevent default only for actual drags (not clicks)
       e.preventDefault()
 
@@ -948,23 +1007,6 @@ function horizontalLoop(app, items, config) {
       }
     }
 
-    /**
-     * Calculate where inertia would land based on velocity
-     * Uses same physics as startInertia to predict landing position
-     * Motion.js inertia formula: distance = velocity * timeConstant * (power / (1 - power))
-     * @param {number} velocity - Cursor velocity in pixels per second
-     * @returns {number} Predicted landing position
-     */
-    function calculateInertiaTarget(velocity) {
-      const currentPos = position.get()
-      const motionVelocity = -velocity
-      const power = config.throwPower
-      const timeConstant = config.throwResistance / 1000
-      // Motion.js inertia distance formula
-      const estimatedDistance = motionVelocity * timeConstant * (power / (1 - power))
-      return currentPos + estimatedDistance
-    }
-
     /**
      * Handle pointer up - end drag and start inertia
      */
@@ -982,20 +1024,45 @@ function horizontalLoop(app, items, config) {
       if (hasDragged) {
         container.style.cursor = 'grab'
         trackElement.classList.remove('looper-dragging')
+
+        // Swallow the next click event so links don't navigate after a drag.
+        // The browser fires click after pointerup — capture it before it reaches any <a>.
+        container.addEventListener('click', swallowClick, { capture: true, once: true })
       }
 
-      // If this was a click (not a drag), trigger click on the element
+      // If this was a click (not a drag):
+      // - If we stopped a running animation, silently stop (like native iOS scroll tap-to-stop)
+      //   then resume crawl after a delay so it doesn't feel jittery
+      // - Otherwise, forward the click to the element under the pointer
       if (!hasDragged) {
-        // Find the element under the pointer and trigger a click
-        const clickedElement = document.elementFromPoint(e.clientX, e.clientY)
-        if (clickedElement) {
-          clickedElement.click()
+        if (!stoppedAnimation) {
+          const clickedElement = document.elementFromPoint(e.clientX, e.clientY)
+          if (clickedElement) {
+            clickedElement.click()
+          }
+        }
+        if (stoppedAnimation && config.crawl) {
+          clearTimeout(resumeTimeout)
+          resumeTimeout = setTimeout(() => resumeCrawl(), 5000)
         }
         return
       }
 
-      // Calculate final velocity
-      const velocity = getVelocity()
+      // Calculate velocity from pointermove samples only.
+      // Do NOT use pointerup/pointercancel clientX — iOS Safari often reports 0
+      // on pointercancel which corrupts velocity and direction calculations.
+      let velocity = getVelocity()
+
+      // Use last reliable pointermove position for direction check (not e.clientX
+      // which may be 0 from a pointercancel event on iOS)
+      const lastTrackedX = velocityTracker.length > 0
+        ? velocityTracker[velocityTracker.length - 1].x
+        : e.clientX
+      const overallDelta = lastTrackedX - startX
+
+      // Sanity check: velocity direction must match overall drag direction.
+      if (overallDelta > 0 && velocity < 0) velocity = 0
+      if (overallDelta < 0 && velocity > 0) velocity = 0
 
       // If snap is enabled, always use it (GSAP-style: snap modifies inertia target)
       // Otherwise use old logic: inertia if velocity, or resume crawl
@@ -1028,10 +1095,10 @@ function horizontalLoop(app, items, config) {
       const velocityMultiplier = reducedMotion ? config.throwVelocityMultiplier * 0.3 : config.throwVelocityMultiplier
       const motionVelocity = -velocity * velocityMultiplier
 
-      // Calculate estimated target based on inertia physics
+      // Estimate target for Motion.js (it recomputes internally for type: 'inertia',
+      // but we pass a reasonable target to avoid a zero-distance animation)
       const power = config.throwPower
-      const timeConstant = config.throwResistance / 1000 // Convert to seconds
-      const estimatedDistance = motionVelocity * timeConstant * 0.5
+      const estimatedDistance = power * motionVelocity
       const targetPos = currentPos + estimatedDistance
 
       // Animate position motionValue with inertia
@@ -1294,6 +1361,7 @@ function horizontalLoop(app, items, config) {
     dragState = {
       cleanup: () => {
         container.removeEventListener('pointerdown', onPointerDown)
+        container.removeEventListener('click', swallowClick, { capture: true })
         window.removeEventListener('pointermove', onPointerMove)
         window.removeEventListener('pointerup', onPointerUp)
         window.removeEventListener('pointercancel', onPointerUp)
@@ -1813,6 +1881,7 @@ export default class Looper {
           snapDuration: this.opts.snapDuration,
           snapBounce: this.opts.snapBounce,
           minimumMovement: this.opts.minimumMovement,
+          touchMinimumMovement: this.opts.touchMinimumMovement,
         },
       })
     })
@@ -1866,7 +1935,14 @@ export default class Looper {
 
       // Reveal lazyload images: immediately reveal off-screen items (no visible transition),
       // defer reveal of viewport items until after wrapper fade-in for a nice per-image fade
-      if (this.app?.lazyload && wrapper) {
+      if (this.opts.onReveal) {
+        // Custom reveal callback — caller handles animation and lazyload
+        if (this.app?.lazyload && wrapper) {
+          const pictures = Dom.all(wrapper, '[data-ll-srcset]')
+          pictures.forEach(picture => this.app.lazyload.revealPicture(picture))
+        }
+        this.opts.onReveal(wrapper, loop)
+      } else if (this.app?.lazyload && wrapper) {
         const wrapperRect = wrapper.getBoundingClientRect()
         const pictures = Dom.all(wrapper, '[data-ll-srcset]')
         const viewportPictures = []

package/src/modules/Moonwalk/index.js

@@ -79,7 +79,7 @@ function logComputedStyle(element, props = ['opacity', 'transform']) {
 /**
  * @typedef {Object} MoonwalkOptions
  * @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 {number} [initialDelay=100] - Delay in ms before starting animations
  * @property {boolean} [clearLazyload=false] - Clear data-ll-srcset attributes
  * @property {boolean} [clearNestedSections=true] - Remove nested data-moonwalk-section attributes
  * @property {boolean} [clearNestedWalks=true] - Remove nested data-moonwalk attributes
@@ -108,7 +108,7 @@ const DEFAULT_OPTIONS = {
    * Set a delay for the initial reveal. Could be useful if you want the reveal to happen
    * after for instance a header has been revealed
    */
-  initialDelay: 0.1,
+  initialDelay: 100,
 
   /**
    * Clear out all `data-ll-srcset` from moonwalk elements
@@ -834,7 +834,7 @@ export default class Moonwalk {
     if (this.opts.initialDelay) {
       setTimeout(() => {
         this.ready()
-      }, this.opts.initialDelay * 1000)
+      }, this.opts.initialDelay)
     } else {
       this.ready()
     }

package/src/modules/StickyHeader/index.js

@@ -576,6 +576,7 @@ export default class StickyHeader {
     this._pinned = false
     this.el.setAttribute('data-header-unpinned', '')
     this.el.removeAttribute('data-header-pinned')
+    this._updateHeaderHeight()
     this.opts.onUnpin(this)
   }
 
@@ -586,6 +587,7 @@ export default class StickyHeader {
     this._pinned = true
     this.el.setAttribute('data-header-pinned', '')
     this.el.removeAttribute('data-header-unpinned')
+    this._updateHeaderHeight()
     this.opts.onPin(this)
   }
 
@@ -593,6 +595,7 @@ export default class StickyHeader {
     this._small = false
     this.el.setAttribute('data-header-big', '')
     this.el.removeAttribute('data-header-small')
+    this._updateHeaderHeight()
     this.opts.onNotSmall(this)
   }
 
@@ -600,9 +603,19 @@ export default class StickyHeader {
     this._small = true
     this.el.setAttribute('data-header-small', '')
     this.el.removeAttribute('data-header-big')
+    this._updateHeaderHeight()
     this.opts.onSmall(this)
   }
 
+  /**
+   * Update the --header-height CSS variable on :root.
+   * Set to the header's current height when pinned, 0px when unpinned.
+   */
+  _updateHeaderHeight() {
+    const height = this._pinned ? `${this.el.clientHeight}px` : '0px'
+    document.documentElement.style.setProperty('--header-height', height)
+  }
+
   notAltBg() {
     this._altBg = false
     this.el.setAttribute('data-header-reg-bg', '')