@linear_non/stellar-libs 1.4.2 → 1.4.3

package/README.md

@@ -150,6 +150,7 @@ const slider = new Slider({
   speed: 0.1,
   snap: true,
   infinite: false,
+  activeBelow: 'mediumUp', // only active below the mediumUp breakpoint; mobileOnly:true is an alias
   prevEl: document.querySelector(".prev"),
   nextEl: document.querySelector(".next"),
   progressEl: document.querySelector(".progress-fill"),
@@ -169,6 +170,16 @@ const slider = new Slider({
 
 ---
 
+## Roadmap
+
+- [ ] TypeScript definitions (`.d.ts` for all 8 libraries)
+- [ ] Unit test suite (per-library Jest tests)
+- [ ] Accessibility — ARIA attributes + keyboard support (Slider, Marquee, CursorTracker)
+- [ ] Animation presets — exportable GSAP timeline builders per library
+- [ ] Performance monitoring — FPS tracking integrated with stellar-kit `?debug`
+- [ ] Storybook interactive docs
+- [ ] Plugin system — `.use(plugin)` extension API
+
 ## Lifecycle
 
 All libraries follow a consistent class-based lifecycle: `init() → on() → tick() → resize() → off() → destroy()`
@@ -177,4 +188,4 @@ Always call `destroy()` on page navigation to clean up event listeners, animatio
 
 ---
 
-Made with love by [Non-Linear Studio](https://non-linear.studio)
+Made with ❤️ by [Non-Linear Studio](https://non-linear.studio)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linear_non/stellar-libs",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "Reusable JavaScript libraries for Non-Linear Studio projects.",
   "main": "src/index.js",
   "type": "module",
@@ -10,10 +10,6 @@
   "files": [
     "src"
   ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build"
-  },
   "keywords": [
     "non-linear",
     "frontend",
@@ -25,10 +21,14 @@
   "author": "Non-Linear Studio",
   "license": "MIT",
   "dependencies": {
-    "@linear_non/stellar-kit": "*"
+    "@linear_non/stellar-kit": "3.0.12"
   },
   "devDependencies": {
     "@linear_non/prettier-config": "^1.0.6",
     "vite": "^6.3.5"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
   }
-}
+}

package/src/Slider/index.js

@@ -1,6 +1,7 @@
-import { lerp, bounds, sniffer } from "@linear_non/stellar-kit/utils"
+import { lerp, bounds } from "@linear_non/stellar-kit/utils"
 import { gsap } from "@linear_non/stellar-kit/gsap"
 import { emitter, EVENTS } from "@linear_non/stellar-kit/events"
+import { kitStore } from "@linear_non/stellar-kit"
 
 export default class Slider {
   constructor({
@@ -9,6 +10,10 @@ export default class Slider {
     speed = 0.1,
     snap = true,
     infinite = false,
+    // activeBelow: a kitStore.breakpoints key (e.g. 'mediumUp', 'smallUp').
+    // Slider is active when kitStore.breakpoints[activeBelow] is falsy (i.e. we are below that breakpoint).
+    // mobileOnly: true is kept as a backward-compat alias for activeBelow: 'mediumUp'.
+    activeBelow = null,
     mobileOnly = false,
     prevEl = null,
     nextEl = null,
@@ -20,7 +25,8 @@ export default class Slider {
     this.speed = speed
     this.snap = infinite ? true : snap // infinite always snaps
     this.infinite = infinite
-    this.mobileOnly = mobileOnly
+    // Resolve activeBelow: explicit prop wins; mobileOnly:true falls back to 'mediumUp'
+    this.activeBelow = activeBelow || (mobileOnly ? 'mediumUp' : null)
     this.prevEl = prevEl
     this.nextEl = nextEl
     this.progressEl = progressEl
@@ -48,7 +54,9 @@ export default class Slider {
   // ─── Setup ────────────────────────────────────────────────────────────────
 
   _shouldActivate() {
-    return !this.mobileOnly || sniffer.isDevice
+    if (!this.activeBelow) return true
+    // Active when the named breakpoint flag is falsy (i.e. we are below that breakpoint)
+    return !kitStore.breakpoints[this.activeBelow]
   }
 
   setup() {
@@ -63,6 +71,7 @@ export default class Slider {
       this.target = this.index * this.slideWidth
       this.current = this.target
       this._draw(this.current)
+      this._updateProgress()
     }
   }
 
@@ -144,10 +153,14 @@ export default class Slider {
   }
 
   _updateProgress() {
-    if (!this.progressEl || this.infinite) return
-    const progress = this.limit > 0 ? this.current / this.limit : 0
+    if (!this.progressEl || this.infinite || !this.total) return
+    // Position-based so the bar reaches 100% exactly when current hits limit.
+    // Floor at 1/total so the bar is never empty on the first slide.
+    const min = 1 / this.total
+    const pos = this.limit > 0 ? this.current / this.limit : 1
+    const progress = Math.max(min, Math.min(1, pos))
     this.progressEl.style.transformOrigin = "left center"
-    this.progressEl.style.transform = `scaleX(${gsap.utils.clamp(0, 1, progress)})`
+    this.progressEl.style.transform = `scaleX(${progress})`
   }
 
   // ─── Tick ─────────────────────────────────────────────────────────────────
@@ -199,6 +212,7 @@ export default class Slider {
   }
 
   _fireChange() {
+    this._updateProgress()
     if (!this.onSlideChange) return
     this.onSlideChange({ index: this.index, total: this.total })
   }
@@ -300,7 +314,6 @@ export default class Slider {
     if (this.nextEl) this.nextEl.addEventListener("click", this.next)
 
     emitter.on(EVENTS.APP_TICK, this.tick)
-    emitter.on(EVENTS.APP_RESIZE, this.resize)
   }
 
   off() {
@@ -315,7 +328,6 @@ export default class Slider {
     if (this.nextEl) this.nextEl.removeEventListener("click", this.next)
 
     emitter.off(EVENTS.APP_TICK, this.tick)
-    emitter.off(EVENTS.APP_RESIZE, this.resize)
   }
 
   resize = () => {
@@ -364,6 +376,7 @@ export default class Slider {
   destroy() {
     this.off()
     this._reset()
+    emitter.off(EVENTS.APP_RESIZE, this.resize)
     this.container = null
     this.el = null
   }
@@ -371,5 +384,8 @@ export default class Slider {
   init() {
     this.setup()
     this.on()
+    // APP_RESIZE is always registered so the slider can transition
+    // between active/inactive states when the breakpoint changes.
+    emitter.on(EVENTS.APP_RESIZE, this.resize)
   }
 }