@brandocms/jupiter 5.0.0-beta.10 → 5.0.0-beta.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandocms/jupiter",
-  "version": "5.0.0-beta.10",
+  "version": "5.0.0-beta.12",
   "description": "Frontend helpers.",
   "author": "Univers/Twined",
   "license": "UNLICENSED",
@@ -44,13 +44,13 @@
   "types": "types/index.d.ts",
   "dependencies": {
     "lodash.defaultsdeep": "^4.6.1",
-    "motion": "^12.35.1"
+    "motion": "^12.35.2"
   },
   "devDependencies": {
-    "@playwright/test": "^1.57.0",
-    "@types/node": "^22.19.3",
+    "@playwright/test": "^1.58.2",
+    "@types/node": "^22",
     "typescript": "^5.9.3",
-    "vite": "^6.4.1"
+    "vite": "^7.3.1"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/src/modules/FixedHeader/index.js

@@ -202,6 +202,12 @@ export default class FixedHeader {
    */
   constructor(app, opts = {}) {
     this.app = app
+    // Preserve raw section configs before _defaultsDeep mutates them
+    this._rawSections = opts.sections
+      ? Object.fromEntries(
+          Object.entries(opts.sections).map(([k, v]) => [k, { ...v }])
+        )
+      : {}
     this.mainOpts = _defaultsDeep(opts, DEFAULT_OPTIONS)
 
     if (typeof this.mainOpts.el === 'string') {
@@ -704,6 +710,59 @@ export default class FixedHeader {
     )
   }
 
+  /**
+   * Reconfigure the header for a new section/page.
+   * Call this after a view transition or SPA navigation
+   * to re-resolve section options and reset scroll state.
+   */
+  reconfigure() {
+    const section = document.body.getAttribute('data-script')
+
+    // Build a fresh opts object from raw sections so function
+    // offsets that were previously resolved to numbers are restored
+    const freshOpts = {
+      ...this.mainOpts,
+      sections: Object.fromEntries(
+        Object.entries(this._rawSections).map(([k, v]) => [k, { ...v }])
+      )
+    }
+    this.opts = this._getOptionsForSection(section, freshOpts)
+
+    // Re-resolve dynamic offsets
+    if (typeof this.opts.offsetBg === 'string') {
+      const offsetBgElm = document.querySelector(this.opts.offsetBg)
+      this.opts.offsetBg = offsetBgElm ? offsetBgElm.offsetTop : 200
+    } else if (typeof this.opts.offsetBg === 'function') {
+      this.opts.offsetBg = this.opts.offsetBg(this) - 1
+    }
+
+    if (typeof this.opts.offset === 'string') {
+      const offsetElm = document.querySelector(this.opts.offset)
+      this.opts.offset = offsetElm ? offsetElm.offsetTop - 1 : 0
+    } else if (typeof this.opts.offset === 'function') {
+      this.opts.offset = this.opts.offset(this) - 1
+    }
+
+    if (typeof this.opts.offsetSmall === 'string') {
+      const offsetSmallElm = document.querySelector(this.opts.offsetSmall)
+      this.opts.offsetSmall = offsetSmallElm ? offsetSmallElm.offsetTop - 1 : 50
+    } else if (typeof this.opts.offsetSmall === 'function') {
+      this.opts.offsetSmall = this.opts.offsetSmall(this) - 1
+    }
+
+    // Reset scroll tracking to prevent the scroll-height-change
+    // guard from bailing out after content swap
+    this.lastKnownScrollY = this.getScrollY()
+    this.lastKnownScrollHeight = document.body.scrollHeight
+    this.currentScrollY = this.lastKnownScrollY
+    this.currentScrollHeight = this.lastKnownScrollHeight
+
+    // Re-check current state
+    this.checkSize(true)
+    this.checkBg(true)
+    this.checkTop(true)
+  }
+
   _getOptionsForSection(section, opts) {
     // if section is not a key in opts, return default opts
     if (

package/src/modules/Looper/index.js

@@ -18,6 +18,7 @@ import Dom from '../Dom'
 
 const DEFAULT_OPTIONS = {
   center: false,
+  peek: false, // Centers viewport on the gap between two items (half | full | full | half)
   snap: false, // Set to true to enable snap-to-item behavior
   crawl: true, // Continuous auto-scrolling
   loop: true, // Infinite looping (false for linear scrolling)
@@ -257,7 +258,15 @@ function horizontalLoop(app, items, config) {
 
     // Calculate max scroll for non-looping based on endAlignment
     if (!shouldLoop && originalItemCount > 0) {
-      if (config.centerSlide) {
+      if (config.peek) {
+        // Peek mode: max scroll where gap after last item is at viewport center
+        const lastItemIndex = originalItemCount - 1
+        const lastItemRightEdge = offsetLefts[lastItemIndex] + widths[lastItemIndex] - startX
+        const viewportCenter = containerWidth / 2
+        const idealMaxScroll = lastItemRightEdge + gap / 2 - viewportCenter
+        const absoluteMax = lastItemRightEdge - containerWidth
+        maxScrollPosition = Math.max(0, Math.min(idealMaxScroll, absoluteMax))
+      } else if (config.centerSlide) {
         // Center mode: max scroll is where last item's center is at viewport center
         // But clamped so we don't show empty space
         const lastItemIndex = originalItemCount - 1
@@ -294,7 +303,13 @@ function horizontalLoop(app, items, config) {
         const curX = (xPercents[i] / 100) * widths[i]
         let snapPos
 
-        if (config.centerSlide) {
+        if (config.peek) {
+          // Peek mode: viewport center at the gap AFTER this item
+          // This shows: half(i) | gap | full(i+1) | gap | full(i+2) | gap | half(i+3)
+          const itemRightEdge = item.offsetLeft + curX + widths[i] - startX
+          const viewportCenter = containerWidth / 2
+          snapPos = itemRightEdge + gap / 2 - viewportCenter
+        } else if (config.centerSlide) {
           // Center mode: item's center at viewport's center
           const itemCenter = item.offsetLeft + curX + widths[i] / 2 - startX
           const viewportCenter = containerWidth / 2
@@ -314,7 +329,12 @@ function horizontalLoop(app, items, config) {
       const curX = (xPercents[i] / 100) * widths[i]
       let snapPos
 
-      if (config.centerSlide) {
+      if (config.peek) {
+        // Peek mode: viewport center at the gap AFTER this item
+        const itemRightEdge = item.offsetLeft + curX + widths[i] - startX
+        const viewportCenter = containerWidth / 2
+        snapPos = itemRightEdge + gap / 2 - viewportCenter
+      } else if (config.centerSlide) {
         // Center mode: item's center at viewport's center
         const itemCenter = item.offsetLeft + curX + widths[i] / 2 - startX
         const viewportCenter = containerWidth / 2
@@ -555,6 +575,19 @@ function horizontalLoop(app, items, config) {
     populateWidths()
     populateSnapTimes()
 
+    // Warn if [data-looper] has overflow-x: clip — this clips wrapped items
+    // whose individual translateX positions fall outside the container's bounds,
+    // even when they are visually positioned within the viewport.
+    // Apply overflow-x: clip on a parent element instead.
+    const itemsContainer = items[0].parentElement
+    const containerOverflow = getComputedStyle(itemsContainer).overflowX
+    if (containerOverflow === 'clip') {
+      console.warn(
+        `[Looper] ⚠️ [data-looper] has overflow-x: clip which will hide looped items. Apply overflow-x: clip on a parent wrapper element instead.`,
+        itemsContainer
+      )
+    }
+
     // Set initial container position
     const containerElement = items[0].parentElement
     containerElement.style.willChange = 'transform'
@@ -1614,6 +1647,12 @@ export default class Looper {
       const centerValue = looperEl?.getAttribute('data-looper-center')
       const shouldCenterSlide = centerValue === 'false' ? false : hasCenterAttr
 
+      // Peek: data-looper-peek or data-looper-peek="false"
+      // Centers viewport on the gap between two items (half | full | full | half)
+      const hasPeekAttr = looperEl?.hasAttribute('data-looper-peek')
+      const peekValue = looperEl?.getAttribute('data-looper-peek')
+      const shouldPeek = peekValue === 'false' ? false : hasPeekAttr || this.opts.peek
+
       // Create stub for Moonwalk compatibility
       const stubLoop = {
         play: () => {},
@@ -1633,7 +1672,8 @@ export default class Looper {
           repeat: -1,
           draggable: this.opts.draggable,
           center: this.opts.center,
-          centerSlide: shouldCenterSlide,
+          centerSlide: shouldCenterSlide || shouldPeek,
+          peek: shouldPeek,
           snap: shouldSnap,
           speed,
           reversed: isReverse,