gclass-anims 1.0.0-beta.22.2 → 1.0.0-beta.23

package/AnimToggle.js

@@ -1,7 +1,8 @@
   import initListeners from './Listeners.js'
   import { defaults, animations } from './Config.js'
   import { gsap } from 'gsap'
-
+import { GSDevTools } from 'gsap/all'
+gsap.registerPlugin(GSDevTools)
 // localStorage key controlling whether the GSAP animation system is mounted.
 const STORAGE_KEY = 'gclass-animations-enabled'
 // localStorage key for a forced reduced-motion override (see
@@ -181,6 +182,43 @@ const readBootTime = (els, fallback) => {
   return max ?? fallback
 }
 
+/**
+ * Create GSDevTools UI styled like doc/ (Header.jsx:8 slate-800/50 ring + layout.js:85 slate-950).
+ * Accepts: gclassDev() | gclassDev("width:50%; bottom:30px") | gclassDev({width:"50%"}) | gclassDev({css:{}, minimal:true, animation:tl})
+ */
+export function gclassDev(cssOrOpts){
+  const docCss = {
+    backgroundColor: "rgba(15,23,42,0.96)", // slate-900 ~ doc bg-slate-950/900
+    border: "1px solid rgba(51,65,85,0.8)", // ring-slate-700 Header.jsx:8
+    borderRadius: "12px", // rounded-xl
+    boxShadow: "0 0 0 1px rgba(51,65,85,0.5), 0 8px 32px rgba(0,0,0,0.45)",
+    backdropFilter: "blur(8px)",
+    color: "#e2e8f0", // slate-200
+    bottom: "16px",
+    width: "92%",
+    maxWidth: "860px",
+    left: "50%",
+    transform: "translateX(-50%)",
+  }
+  let opts = {}
+  let css = docCss
+  if (typeof cssOrOpts === "string") {
+    css = cssOrOpts // verbatim string: "width:50%; bottom:30px"
+  } else if (cssOrOpts && typeof cssOrOpts === "object") {
+    // {width:"50%", bottom:"30px"} shorthand OR {css:{}, animation, minimal,...} full opts
+    const hasFullOpts = "css" in cssOrOpts || "animation" in cssOrOpts || "container" in cssOrOpts || "minimal" in cssOrOpts || "id" in cssOrOpts
+    if (hasFullOpts) {
+      const { css: userCss, ...rest } = cssOrOpts
+      opts = rest
+      if (typeof userCss === "string") css = userCss
+      else if (userCss && typeof userCss === "object") css = { ...docCss, ...userCss }
+    } else {
+      css = { ...docCss, ...cssOrOpts }
+    }
+  }
+  return GSDevTools.create({ css, ...opts })
+}
+
 // Boots the GSAP animation system unless animations are disabled (stored "off"
 // or reduced-motion fallback with no explicit choice). Idempotent: calling it
 // again tears down any previous run first.

package/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 All notable changes to `gclass-anims` will be documented in this file.
 
+## [1.0.0-beta.23] - 2026-09-09
+- Added `gclassDev()` helper — `AnimToggle.js:185` `gclassDev(cssOrOpts)` wraps `GSDevTools.create()` with doc-styled defaults (`slate-900` `rgba(15,23,42,0.96)`, `slate-700` border, `rounded-xl`, `backdrop-blur`). Accepts `gclassDev()` (defaults), `gclassDev("width:50%; bottom:30px")` (CSS string), `gclassDev({width:"50%"})` (style object shorthand), or `gclassDev({css, animation, minimal, ...})` (full `GSDevTools` opts). Registers `GSDevTools` via `gsap.registerPlugin(GSDevTools)` (`AnimToggle.js:4`), re-exported from `index.js:1` and typed in `index.d.ts:35`.
+
 ## [1.0.0-beta.22.2] - 2026-09-06
 - Fixed `m:order` (and any `bp:order` / `bp:priority-*` / `bp:ease-*` / `bp:time-*`) disabling the entire `scroll` animation on smaller screens — `Listeners.js:1200,1232,1262` previously wrapped `setupScroll` / `playText` scroll variants in generic `runWithBreakpoint(el, ...)` which gated on *any* `bp:*` class on the element (so `m:order` gated `scroll`). Now uses per-animation `qAllAllVariants` + `runWithBreakpointForSel` (`".scroll"`, `".scroll-progress"`, `tSel`) so only a true `m:scroll` / `m:spawn-*` gates its own animation; unrelated modifiers like `m:order` only affect `hasGClass("order")` / `readTiming` (stagger) and `spawn-*` + `scroll` still play on all sizes (without stagger on <m). Keeps live `gsap.matchMedia` handling for true breakpoint-gated scroll. Reverts `HowWorkSection.jsx` workaround from `m:order` back to plain `order` for the default staggered landing.
 

package/dist/gclass.cjs

@@ -2947,6 +2947,7 @@ function initListeners(root = document, throttlePerFrame) {
 }
 //#endregion
 //#region AnimToggle.js
+gsap.gsap.registerPlugin(gsap_all.GSDevTools);
 var STORAGE_KEY = "gclass-animations-enabled";
 var REDUCED_KEY = "gclass-reduced-motion";
 var reducedMotionQuery = typeof window !== "undefined" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
@@ -3079,6 +3080,46 @@ var readBootTime = (els, fallback) => {
 	}
 	return max ?? fallback;
 };
+/**
+* Create GSDevTools UI styled like doc/ (Header.jsx:8 slate-800/50 ring + layout.js:85 slate-950).
+* Accepts: gclassDev() | gclassDev("width:50%; bottom:30px") | gclassDev({width:"50%"}) | gclassDev({css:{}, minimal:true, animation:tl})
+*/
+function gclassDev(cssOrOpts) {
+	const docCss = {
+		backgroundColor: "rgba(15,23,42,0.96)",
+		border: "1px solid rgba(51,65,85,0.8)",
+		borderRadius: "12px",
+		boxShadow: "0 0 0 1px rgba(51,65,85,0.5), 0 8px 32px rgba(0,0,0,0.45)",
+		backdropFilter: "blur(8px)",
+		color: "#e2e8f0",
+		bottom: "16px",
+		width: "92%",
+		maxWidth: "860px",
+		left: "50%",
+		transform: "translateX(-50%)"
+	};
+	let opts = {};
+	let css = docCss;
+	if (typeof cssOrOpts === "string") css = cssOrOpts;
+	else if (cssOrOpts && typeof cssOrOpts === "object") {
+		if ("css" in cssOrOpts || "animation" in cssOrOpts || "container" in cssOrOpts || "minimal" in cssOrOpts || "id" in cssOrOpts) {
+			const { css: userCss, ...rest } = cssOrOpts;
+			opts = rest;
+			if (typeof userCss === "string") css = userCss;
+			else if (userCss && typeof userCss === "object") css = {
+				...docCss,
+				...userCss
+			};
+		} else css = {
+			...docCss,
+			...cssOrOpts
+		};
+	}
+	return gsap_all.GSDevTools.create({
+		css,
+		...opts
+	});
+}
 function initAnimations(throttlePerFrame, fps) {
 	let effThrottle = currentThrottle;
 	let effFps = currentFps;
@@ -3216,6 +3257,7 @@ exports.expandV = expandV;
 exports.expandmove = expandmove;
 exports.finalOpacity = finalOpacity;
 exports.flip = flip;
+exports.gclassDev = gclassDev;
 exports.gclassOpts = gclassOpts;
 exports.getGClassConfig = getGClassConfig;
 exports.hover = hover;

package/dist/gclass.esm.js

@@ -1,5 +1,5 @@
 import { gsap } from "gsap";
-import { DrawSVGPlugin, Flip, MotionPathPlugin, ScrambleTextPlugin, ScrollTrigger, SplitText, TextPlugin } from "gsap/all";
+import { DrawSVGPlugin, Flip, GSDevTools, MotionPathPlugin, ScrambleTextPlugin, ScrollTrigger, SplitText, TextPlugin } from "gsap/all";
 //#region Config.js
 var defaults = {
 	orderDivide: 5,
@@ -2946,6 +2946,7 @@ function initListeners(root = document, throttlePerFrame) {
 }
 //#endregion
 //#region AnimToggle.js
+gsap.registerPlugin(GSDevTools);
 var STORAGE_KEY = "gclass-animations-enabled";
 var REDUCED_KEY = "gclass-reduced-motion";
 var reducedMotionQuery = typeof window !== "undefined" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
@@ -3078,6 +3079,46 @@ var readBootTime = (els, fallback) => {
 	}
 	return max ?? fallback;
 };
+/**
+* Create GSDevTools UI styled like doc/ (Header.jsx:8 slate-800/50 ring + layout.js:85 slate-950).
+* Accepts: gclassDev() | gclassDev("width:50%; bottom:30px") | gclassDev({width:"50%"}) | gclassDev({css:{}, minimal:true, animation:tl})
+*/
+function gclassDev(cssOrOpts) {
+	const docCss = {
+		backgroundColor: "rgba(15,23,42,0.96)",
+		border: "1px solid rgba(51,65,85,0.8)",
+		borderRadius: "12px",
+		boxShadow: "0 0 0 1px rgba(51,65,85,0.5), 0 8px 32px rgba(0,0,0,0.45)",
+		backdropFilter: "blur(8px)",
+		color: "#e2e8f0",
+		bottom: "16px",
+		width: "92%",
+		maxWidth: "860px",
+		left: "50%",
+		transform: "translateX(-50%)"
+	};
+	let opts = {};
+	let css = docCss;
+	if (typeof cssOrOpts === "string") css = cssOrOpts;
+	else if (cssOrOpts && typeof cssOrOpts === "object") {
+		if ("css" in cssOrOpts || "animation" in cssOrOpts || "container" in cssOrOpts || "minimal" in cssOrOpts || "id" in cssOrOpts) {
+			const { css: userCss, ...rest } = cssOrOpts;
+			opts = rest;
+			if (typeof userCss === "string") css = userCss;
+			else if (userCss && typeof userCss === "object") css = {
+				...docCss,
+				...userCss
+			};
+		} else css = {
+			...docCss,
+			...cssOrOpts
+		};
+	}
+	return GSDevTools.create({
+		css,
+		...opts
+	});
+}
 function initAnimations(throttlePerFrame, fps) {
 	let effThrottle = currentThrottle;
 	let effFps = currentFps;
@@ -3189,4 +3230,4 @@ function initAnimations(throttlePerFrame, fps) {
 	cleanup = initListeners(document, effThrottle);
 }
 //#endregion
-export { SpawnH, SpawnV, animatecss, animations, bell, bounce, countTargetVars, countUp, curtainHorizontal, curtainVertical, customAnims, defaults, disableReducedMotion, drawsvg, drawsvgSplit, enableReducedMotion, expandA, expandDown, expandH, expandLeft, expandRight, expandUp, expandV, expandmove, finalOpacity, flip, gclassOpts, getGClassConfig, hover, initAnimations, initListeners, magnet, magnet3d, marquee, normalize, pulse, radiate, registerComplete, reset, scramble, scrambleSegments, scrambleVars, shake, spawnBlur, spawnClipReveal, spawnFade, spawnSpinCCW, spawnSpinCW, spawnXDown, spawnXUp, spawnYLeft, spawnYRight, spinCCW, spinCW, splitPaths, stashText, subscribeGClassConfig, toggleAnimations, typewriter, verticalmove };
+export { SpawnH, SpawnV, animatecss, animations, bell, bounce, countTargetVars, countUp, curtainHorizontal, curtainVertical, customAnims, defaults, disableReducedMotion, drawsvg, drawsvgSplit, enableReducedMotion, expandA, expandDown, expandH, expandLeft, expandRight, expandUp, expandV, expandmove, finalOpacity, flip, gclassDev, gclassOpts, getGClassConfig, hover, initAnimations, initListeners, magnet, magnet3d, marquee, normalize, pulse, radiate, registerComplete, reset, scramble, scrambleSegments, scrambleVars, shake, spawnBlur, spawnClipReveal, spawnFade, spawnSpinCCW, spawnSpinCW, spawnXDown, spawnXUp, spawnYLeft, spawnYRight, spinCCW, spinCW, splitPaths, stashText, subscribeGClassConfig, toggleAnimations, typewriter, verticalmove };

package/index.d.ts

@@ -32,6 +32,11 @@ export function toggleAnimations(): void
 export function enableReducedMotion(): void
 /** Clear the forced reduced-motion override and reload. */
 export function disableReducedMotion(): void
+/**
+ * Create GSDevTools UI styled like doc/ (slate-900 / slate-800 ring).
+ * Accepts: gclassDev() | gclassDev("width:50%; bottom:30px") | gclassDev({width:"50%"}) | gclassDev({css, animation, minimal, ...GSDevTools opts})
+ */
+export function gclassDev(cssOrOpts?: string | Record<string, string> | Record<string, any>): any
 
 // --- Listeners -------------------------------------------------------------
 

package/index.js

@@ -1,4 +1,4 @@
-export { initAnimations, gclassOpts, getGClassConfig, subscribeGClassConfig, toggleAnimations, enableReducedMotion, disableReducedMotion } from './AnimToggle.js'
+export { initAnimations, gclassOpts, getGClassConfig, subscribeGClassConfig, toggleAnimations, enableReducedMotion, disableReducedMotion , gclassDev} from './AnimToggle.js'
 export { default as initListeners, registerComplete } from './Listeners.js'
 export { customAnims } from './CustomAnims.js'
 export { defaults, animations, normalize } from './Config.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gclass-anims",
-  "version": "1.0.0-beta.22.2",
+  "version": "1.0.0-beta.23",
   "description": "A Tailwind-style utility layer on top of GSAP. Framework-agnostic - works in vanilla JS, React, Vue, Svelte, or any bundler.",
   "type": "module",
   "main": "./dist/gclass.cjs",