@linear_non/stellar-kit 1.1.9 → 2.0.1

package/README.md

@@ -26,6 +26,7 @@ stellar-kit/
 ├── classes/      # Core logic: Manager, Component.
 ├── events/       # Emitter system: Raf, Resize, Scroll, Mouse, etc.
 ├── utils/        # Utilities: bounds, clamp, selectors, sniffer, etc.
+├── plugins/      # Helpers Grid, Observer, SplitText, etc.
 ├── kitStore.js   # Central store shared across all modules
 └── index.js      # Entry point for setupKit and kitStore access
 ```

package/events/Raf.js

@@ -1,7 +1,7 @@
 // Raf.js
 import kitStore from "../kitStore"
 import emitter, { EVENTS } from "./Emitter"
-import { sniffer, lerp } from "../utils"
+import { lerp } from "../utils"
 import { gsap, ScrollTrigger } from "../libraries/gsap"
 
 export default class Raf {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linear_non/stellar-kit",
-  "version": "1.1.9",
+  "version": "2.0.1",
   "description": "Stellar frontend core for Non-Linear Studio projects.",
   "main": "index.js",
   "exports": {
@@ -8,6 +8,7 @@
     "./utils": "./utils/index.js",
     "./classes": "./classes/index.js",
     "./events": "./events/index.js",
+    "./plugins": "./plugins/index.js",
     "./gsap": "./libraries/gsap/index.js"
   },
   "type": "module",
@@ -19,6 +20,7 @@
   "files": [
     "classes/",
     "events/",
+    "plugins/",
     "utils/",
     "libraries/",
     "libraries/gsap/",

package/{utils/grid.js → plugins/Grid.js}

@@ -1,5 +1,5 @@
 import kitStore from "../kitStore"
-import { getWindowSizes } from "./window"
+import { getWindowSizes } from "../utils/window"
 import { emitter, EVENTS } from "../events"
 import { gsap } from "../libraries/gsap"
 

package/plugins/Observer.js

@@ -0,0 +1,81 @@
+// libs/observer/Observer.js
+import { ScrollTrigger } from "../libraries/gsap"
+import { Emitter } from "../events"
+
+const DEFAULTS = {
+  trigger: null,
+  start: "top bottom",
+  end: "bottom top",
+  scrub: false,
+  markers: false,
+}
+
+export default class Observer extends Emitter {
+  constructor(opts = {}) {
+    super()
+    this.opts = { ...DEFAULTS, ...opts }
+    if (!this.opts.trigger) throw new Error("Observer: `trigger` is required")
+
+    this.st = ScrollTrigger.create({
+      trigger: this.opts.trigger,
+      start: this.opts.start,
+      end: this.opts.end,
+      scrub: this.opts.scrub,
+      markers: this.opts.markers,
+      onEnter: self => this.emit("enter", self, this),
+      onLeave: self => this.emit("leave", self, this),
+      onEnterBack: self => this.emit("enterBack", self, this),
+      onLeaveBack: self => this.emit("leaveBack", self, this),
+      onUpdate: self => this.emit("update", self, this),
+    })
+
+    if (this.opts.listeners) {
+      for (const [type, fn] of Object.entries(this.opts.listeners)) {
+        this.on(type, fn)
+      }
+    }
+  }
+
+  refresh() {
+    this.st?.refresh()
+    return this
+  }
+  enable() {
+    this.st?.enable()
+    return this
+  }
+  disable() {
+    this.st?.disable()
+    return this
+  }
+
+  // Update common vars at runtime (then refresh)
+  update({ start, end, scrub, markers } = {}) {
+    if (!this.st) return this
+    if (start !== undefined) this.st.vars.start = start
+    if (end !== undefined) this.st.vars.end = end
+    if (scrub !== undefined) this.st.vars.scrub = scrub
+    if (markers !== undefined) this.st.vars.markers = markers
+    this.st.refresh()
+    return this
+  }
+
+  // Clean up GSAP + all listeners from Emitter
+  kill() {
+    this.st?.kill()
+    this.st = null
+    this.destroy()
+    return this
+  }
+
+  // Handy getters
+  get progress() {
+    return this.st?.progress ?? 0
+  }
+  get isActive() {
+    return !!this.st?.isActive
+  }
+  get direction() {
+    return this.st?.direction ?? 1
+  }
+}

package/plugins/index.js

@@ -0,0 +1,4 @@
+import Grid from "./Grid"
+import Observer from "./Observer"
+export { splitText, reverseSplit } from "./SplitText"
+export { Grid, Observer }

package/utils/index.js

@@ -1,4 +1,3 @@
-import Grid from "./grid"
 export { qs, qsa, getid, gettag } from "./selector"
 export { bounds } from "./bounds"
 export { offset } from "./offset"
@@ -7,5 +6,3 @@ export { sniffer } from "./sniffer"
 export { lerp, clamp, norm, round } from "./math"
 export { supportWebp, supportMouseTouch } from "./support"
 export { listener } from "./listener"
-export { splitText, reverseSplit } from "./splitText"
-export { Grid }