juxscript 1.1.106 → 1.1.107

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dom-structure-map.json +1 -1
  2. package/lib/components/stack/BaseStack.d.ts +11 -43
  3. package/lib/components/stack/BaseStack.d.ts.map +1 -1
  4. package/lib/components/stack/BaseStack.js +37 -45
  5. package/lib/components/stack/BaseStack.ts +52 -46
  6. package/lib/styles/stack.css +138 -75
  7. package/package.json +1 -1
package/dom-structure-map.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "totalComponents": 63,
3
- "generatedAt": "2026-02-12T21:41:01.161Z",
3
+ "generatedAt": "2026-02-12T21:48:07.335Z",
4
4
  "components": [
5
5
  {
6
6
  "file": "alert.js",
package/lib/components/stack/BaseStack.d.ts CHANGED
@@ -73,62 +73,30 @@ export declare abstract class BaseStack extends BaseComponent<StackState> {
73
73
  fade(startOpacity?: number, step?: number): this;
74
74
  blur(startBlur?: number, step?: number): this;
75
75
  stagger(baseDelay?: number): this;
76
- /**
77
- * Fade in animation
78
- */
79
76
  fadeIn(): this;
80
- /**
81
- * Fade out animation
82
- */
83
- fadeOut(): this;
84
- /**
85
- * Slide in from direction
86
- */
87
77
  slideIn(direction?: 'up' | 'down' | 'left' | 'right'): this;
88
- /**
89
- * Scale in animation (subtle)
90
- */
91
78
  scaleIn(): this;
92
- /**
93
- * Zoom in animation (dramatic)
94
- */
95
79
  zoomIn(): this;
96
- /**
97
- * Rotate in animation
98
- */
99
80
  rotateIn(): this;
100
- /**
101
- * Flip in along axis
102
- */
103
81
  flipIn(axis?: 'x' | 'y'): this;
104
- /**
105
- * Bounce in animation
106
- */
107
82
  bounceIn(): this;
108
- /**
109
- * Elastic spring animation
110
- */
111
83
  elasticIn(): this;
112
- /**
113
- * Blur in animation
114
- */
115
84
  blurIn(): this;
116
- /**
117
- * Glow pulse animation (continuous)
118
- */
119
85
  glow(): this;
120
- /**
121
- * Enable staggered animations (children animate sequentially)
122
- */
86
+ fadeInItems(): this;
87
+ slideInItems(direction?: 'up' | 'down' | 'left' | 'right'): this;
88
+ scaleInItems(): this;
89
+ zoomInItems(): this;
90
+ rotateInItems(): this;
91
+ flipInItems(axis?: 'x' | 'y'): this;
92
+ bounceInItems(): this;
93
+ elasticInItems(): this;
94
+ blurInItems(): this;
95
+ glowItems(): this;
123
96
  staggered(): this;
124
- /**
125
- * Make children interactive (hover effects)
126
- */
127
97
  interactive(): this;
128
- /**
129
- * Enable smooth transitions
130
- */
131
98
  smooth(): this;
99
+ smoothItems(): this;
132
100
  /**
133
101
  * Combine animation with stagger
134
102
  */
package/lib/components/stack/BaseStack.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BaseStack.d.ts","sourceRoot":"","sources":["BaseStack.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"BaseStack.d.ts","sourceRoot":"","sources":["BaseStack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAMpE,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACjD,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IAC/B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAED,UAAU,UAAW,SAAQ,SAAS;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACrB,WAAW,CAAC,EAAE,kBAAkB,GAAG,MAAM,EAAE,CAAC;CAC/C;AAED;;GAEG;AACH,8BAAsB,SAAU,SAAQ,aAAa,CAAC,UAAU,CAAC;IAC7D,SAAS,CAAC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IACzC,OAAO,CAAC,aAAa,CAAkC;IAChD,UAAU,EAAE,WAAW,GAAG,IAAI,CAAQ;gBAEjC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,EAAE,OAAO,GAAE,YAAiB;IAsBzF,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,IAAI;IAK5D,KAAK,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI;IAK1D,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,IAAI;IAKlF,OAAO,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IAKpC,UAAU,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IASvC,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC5B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC3B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC3B,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACjC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC7B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC9B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC9B,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACpC,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC9B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IACrC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC7B,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACxB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC3B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACzB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IACpC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC7B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC9B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC9B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC5B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC3B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC9B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACpC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAM9B,UAAU,CAAC,gBAAgB,EAAE,MAAM,EAAE,GAAG,kBAAkB,GAAG,IAAI;IAKjE,OAAO,CAAC,UAAU,GAAE,MAAW,EAAE,IAAI,GAAE,GAAG,GAAG,GAAG,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,IAAa,GAAG,IAAI;IAc5G,GAAG,CAAC,KAAK,GAAE,MAAU,EAAE,MAAM,GAAE,MAAwB,GAAG,IAAI;IAQ9D,gBAAgB,CAAC,UAAU,GAAE,MAAU,EAAE,IAAI,GAAE,MAAa,EAAE,MAAM,GAAE,MAAiB,GAAG,IAAI;IAQ9F,IAAI,CAAC,YAAY,GAAE,MAAU,EAAE,IAAI,GAAE,MAAa,GAAG,IAAI;IAQzD,IAAI,CAAC,SAAS,GAAE,MAAU,EAAE,IAAI,GAAE,MAAU,GAAG,IAAI;IAQnD,OAAO,CAAC,SAAS,GAAE,MAAY,GAAG,IAAI;IActC,MAAM,IAAI,IAAI;IAId,OAAO,CAAC,SAAS,GAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAc,GAAG,IAAI;IAIjE,OAAO,IAAI,IAAI;IAIf,MAAM,IAAI,IAAI;IAId,QAAQ,IAAI,IAAI;IAIhB,MAAM,CAAC,IAAI,GAAE,GAAG,GAAG,GAAS,GAAG,IAAI;IAInC,QAAQ,IAAI,IAAI;IAIhB,SAAS,IAAI,IAAI;IAIjB,MAAM,IAAI,IAAI;IAId,IAAI,IAAI,IAAI;IAMZ,WAAW,IAAI,IAAI;IAInB,YAAY,CAAC,SAAS,GAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAc,GAAG,IAAI;IAItE,YAAY,IAAI,IAAI;IAIpB,WAAW,IAAI,IAAI;IAInB,aAAa,IAAI,IAAI;IAIrB,WAAW,CAAC,IAAI,GAAE,GAAG,GAAG,GAAS,GAAG,IAAI;IAIxC,aAAa,IAAI,IAAI;IAIrB,cAAc,IAAI,IAAI;IAItB,WAAW,IAAI,IAAI;IAInB,SAAS,IAAI,IAAI;IAMjB,SAAS,IAAI,IAAI;IAMjB,WAAW,IAAI,IAAI;IAInB,MAAM,IAAI,IAAI;IAId,WAAW,IAAI,IAAI;IAInB;;OAEG;IACH,cAAc,CAAC,SAAS,GAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAiB,EAAE,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI;IAiB7H,SAAS,CAAC,YAAY,IAAI,MAAM;IAgChC,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,GAAG,WAAW;IAkD7D,OAAO,CAAC,aAAa;IAoBrB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IA2BlE,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;CAGzC"}
package/lib/components/stack/BaseStack.js CHANGED
@@ -160,90 +160,82 @@ export class BaseStack extends BaseComponent {
160
160
  /* ═════════════════════════════════════════════════════════════════
161
161
  * ANIMATION API (Fluent)
162
162
  * ═════════════════════════════════════════════════════════════════ */
163
- /**
164
- * Fade in animation
165
- */
163
+ /* Stack-Level Animations (Animate the container) */
166
164
  fadeIn() {
167
165
  return this.addClass('jux-stack-fade-in');
168
166
  }
169
- /**
170
- * Fade out animation
171
- */
172
- fadeOut() {
173
- return this.addClass('jux-stack-fade-out');
174
- }
175
- /**
176
- * Slide in from direction
177
- */
178
167
  slideIn(direction = 'up') {
179
168
  return this.addClass(`jux-stack-slide-${direction}`);
180
169
  }
181
- /**
182
- * Scale in animation (subtle)
183
- */
184
170
  scaleIn() {
185
171
  return this.addClass('jux-stack-scale-in');
186
172
  }
187
- /**
188
- * Zoom in animation (dramatic)
189
- */
190
173
  zoomIn() {
191
174
  return this.addClass('jux-stack-zoom-in');
192
175
  }
193
- /**
194
- * Rotate in animation
195
- */
196
176
  rotateIn() {
197
177
  return this.addClass('jux-stack-rotate-in');
198
178
  }
199
- /**
200
- * Flip in along axis
201
- */
202
179
  flipIn(axis = 'x') {
203
180
  return this.addClass(`jux-stack-flip-${axis}`);
204
181
  }
205
- /**
206
- * Bounce in animation
207
- */
208
182
  bounceIn() {
209
183
  return this.addClass('jux-stack-bounce-in');
210
184
  }
211
- /**
212
- * Elastic spring animation
213
- */
214
185
  elasticIn() {
215
186
  return this.addClass('jux-stack-elastic-in');
216
187
  }
217
- /**
218
- * Blur in animation
219
- */
220
188
  blurIn() {
221
189
  return this.addClass('jux-stack-blur-in');
222
190
  }
223
- /**
224
- * Glow pulse animation (continuous)
225
- */
226
191
  glow() {
227
192
  return this.addClass('jux-stack-glow');
228
193
  }
229
- /**
230
- * Enable staggered animations (children animate sequentially)
231
- */
194
+ /* Item-Level Animations (Animate the children) */
195
+ fadeInItems() {
196
+ return this.addClass('jux-stack-fade-in-items');
197
+ }
198
+ slideInItems(direction = 'up') {
199
+ return this.addClass(`jux-stack-slide-${direction}-items`);
200
+ }
201
+ scaleInItems() {
202
+ return this.addClass('jux-stack-scale-in-items');
203
+ }
204
+ zoomInItems() {
205
+ return this.addClass('jux-stack-zoom-in-items');
206
+ }
207
+ rotateInItems() {
208
+ return this.addClass('jux-stack-rotate-in-items');
209
+ }
210
+ flipInItems(axis = 'x') {
211
+ return this.addClass(`jux-stack-flip-${axis}-items`);
212
+ }
213
+ bounceInItems() {
214
+ return this.addClass('jux-stack-bounce-in-items');
215
+ }
216
+ elasticInItems() {
217
+ return this.addClass('jux-stack-elastic-in-items');
218
+ }
219
+ blurInItems() {
220
+ return this.addClass('jux-stack-blur-in-items');
221
+ }
222
+ glowItems() {
223
+ return this.addClass('jux-stack-glow-items');
224
+ }
225
+ /* Stagger (Only works with item-level animations) */
232
226
  staggered() {
233
227
  return this.addClass('jux-stack-stagger');
234
228
  }
235
- /**
236
- * Make children interactive (hover effects)
237
- */
229
+ /* Interactive & Utility */
238
230
  interactive() {
239
231
  return this.addClass('jux-stack-interactive');
240
232
  }
241
- /**
242
- * Enable smooth transitions
243
- */
244
233
  smooth() {
245
234
  return this.addClass('jux-stack-smooth');
246
235
  }
236
+ smoothItems() {
237
+ return this.addClass('jux-stack-smooth-items');
238
+ }
247
239
  /**
248
240
  * Combine animation with stagger
249
241
  */
package/lib/components/stack/BaseStack.ts CHANGED
@@ -210,104 +210,110 @@ export abstract class BaseStack extends BaseComponent<StackState> {
210
210
  * ANIMATION API (Fluent)
211
211
  * ═════════════════════════════════════════════════════════════════ */
212
212
 
213
- /**
214
- * Fade in animation
215
- */
213
+ /* Stack-Level Animations (Animate the container) */
214
+
216
215
  fadeIn(): this {
217
216
  return this.addClass('jux-stack-fade-in');
218
217
  }
219
218
 
220
- /**
221
- * Fade out animation
222
- */
223
- fadeOut(): this {
224
- return this.addClass('jux-stack-fade-out');
225
- }
226
-
227
- /**
228
- * Slide in from direction
229
- */
230
219
  slideIn(direction: 'up' | 'down' | 'left' | 'right' = 'up'): this {
231
220
  return this.addClass(`jux-stack-slide-${direction}`);
232
221
  }
233
222
 
234
- /**
235
- * Scale in animation (subtle)
236
- */
237
223
  scaleIn(): this {
238
224
  return this.addClass('jux-stack-scale-in');
239
225
  }
240
226
 
241
- /**
242
- * Zoom in animation (dramatic)
243
- */
244
227
  zoomIn(): this {
245
228
  return this.addClass('jux-stack-zoom-in');
246
229
  }
247
230
 
248
- /**
249
- * Rotate in animation
250
- */
251
231
  rotateIn(): this {
252
232
  return this.addClass('jux-stack-rotate-in');
253
233
  }
254
234
 
255
- /**
256
- * Flip in along axis
257
- */
258
235
  flipIn(axis: 'x' | 'y' = 'x'): this {
259
236
  return this.addClass(`jux-stack-flip-${axis}`);
260
237
  }
261
238
 
262
- /**
263
- * Bounce in animation
264
- */
265
239
  bounceIn(): this {
266
240
  return this.addClass('jux-stack-bounce-in');
267
241
  }
268
242
 
269
- /**
270
- * Elastic spring animation
271
- */
272
243
  elasticIn(): this {
273
244
  return this.addClass('jux-stack-elastic-in');
274
245
  }
275
246
 
276
- /**
277
- * Blur in animation
278
- */
279
247
  blurIn(): this {
280
248
  return this.addClass('jux-stack-blur-in');
281
249
  }
282
250
 
283
- /**
284
- * Glow pulse animation (continuous)
285
- */
286
251
  glow(): this {
287
252
  return this.addClass('jux-stack-glow');
288
253
  }
289
254
 
290
- /**
291
- * Enable staggered animations (children animate sequentially)
292
- */
255
+ /* Item-Level Animations (Animate the children) */
256
+
257
+ fadeInItems(): this {
258
+ return this.addClass('jux-stack-fade-in-items');
259
+ }
260
+
261
+ slideInItems(direction: 'up' | 'down' | 'left' | 'right' = 'up'): this {
262
+ return this.addClass(`jux-stack-slide-${direction}-items`);
263
+ }
264
+
265
+ scaleInItems(): this {
266
+ return this.addClass('jux-stack-scale-in-items');
267
+ }
268
+
269
+ zoomInItems(): this {
270
+ return this.addClass('jux-stack-zoom-in-items');
271
+ }
272
+
273
+ rotateInItems(): this {
274
+ return this.addClass('jux-stack-rotate-in-items');
275
+ }
276
+
277
+ flipInItems(axis: 'x' | 'y' = 'x'): this {
278
+ return this.addClass(`jux-stack-flip-${axis}-items`);
279
+ }
280
+
281
+ bounceInItems(): this {
282
+ return this.addClass('jux-stack-bounce-in-items');
283
+ }
284
+
285
+ elasticInItems(): this {
286
+ return this.addClass('jux-stack-elastic-in-items');
287
+ }
288
+
289
+ blurInItems(): this {
290
+ return this.addClass('jux-stack-blur-in-items');
291
+ }
292
+
293
+ glowItems(): this {
294
+ return this.addClass('jux-stack-glow-items');
295
+ }
296
+
297
+ /* Stagger (Only works with item-level animations) */
298
+
293
299
  staggered(): this {
294
300
  return this.addClass('jux-stack-stagger');
295
301
  }
296
302
 
297
- /**
298
- * Make children interactive (hover effects)
299
- */
303
+ /* Interactive & Utility */
304
+
300
305
  interactive(): this {
301
306
  return this.addClass('jux-stack-interactive');
302
307
  }
303
308
 
304
- /**
305
- * Enable smooth transitions
306
- */
307
309
  smooth(): this {
308
310
  return this.addClass('jux-stack-smooth');
309
311
  }
310
312
 
313
+ smoothItems(): this {
314
+ return this.addClass('jux-stack-smooth-items');
315
+ }
316
+
311
317
  /**
312
318
  * Combine animation with stagger
313
319
  */
package/lib/styles/stack.css CHANGED
@@ -136,26 +136,15 @@
136
136
  * ANIMATION & TRANSITION CLASSES
137
137
  * ═══════════════════════════════════════════════════════════════════ */
138
138
 
139
- /* Fade Animations */
139
+ /* ═════════════════════════════════════════════════════════════════
140
+ * KEYFRAME DEFINITIONS (Shared)
141
+ * ═════════════════════════════════════════════════════════════════ */
142
+
140
143
  @keyframes jux-fade-in {
141
144
  from { opacity: 0; }
142
145
  to { opacity: 1; }
143
146
  }
144
147
 
145
- @keyframes jux-fade-out {
146
- from { opacity: 1; }
147
- to { opacity: 0; }
148
- }
149
-
150
- .jux-stack-fade-in > * {
151
- animation: jux-fade-in 0.3s ease-out;
152
- }
153
-
154
- .jux-stack-fade-out > * {
155
- animation: jux-fade-out 0.3s ease-out;
156
- }
157
-
158
- /* Slide Animations */
159
148
  @keyframes jux-slide-in-up {
160
149
  from { transform: translateY(20px); opacity: 0; }
161
150
  to { transform: translateY(0); opacity: 1; }
@@ -176,23 +165,6 @@
176
165
  to { transform: translateX(0); opacity: 1; }
177
166
  }
178
167
 
179
- .jux-stack-slide-up > * {
180
- animation: jux-slide-in-up 0.4s ease-out;
181
- }
182
-
183
- .jux-stack-slide-down > * {
184
- animation: jux-slide-in-down 0.4s ease-out;
185
- }
186
-
187
- .jux-stack-slide-left > * {
188
- animation: jux-slide-in-left 0.4s ease-out;
189
- }
190
-
191
- .jux-stack-slide-right > * {
192
- animation: jux-slide-in-right 0.4s ease-out;
193
- }
194
-
195
- /* Scale Animations */
196
168
  @keyframes jux-scale-in {
197
169
  from { transform: scale(0.8); opacity: 0; }
198
170
  to { transform: scale(1); opacity: 1; }
@@ -203,15 +175,6 @@
203
175
  to { transform: scale(1); opacity: 1; }
204
176
  }
205
177
 
206
- .jux-stack-scale-in > * {
207
- animation: jux-scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
208
- }
209
-
210
- .jux-stack-zoom-in > * {
211
- animation: jux-zoom-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
212
- }
213
-
214
- /* Rotate Animations */
215
178
  @keyframes jux-rotate-in {
216
179
  from { transform: rotate(-10deg); opacity: 0; }
217
180
  to { transform: rotate(0); opacity: 1; }
@@ -227,19 +190,6 @@
227
190
  to { transform: perspective(400px) rotateY(0); opacity: 1; }
228
191
  }
229
192
 
230
- .jux-stack-rotate-in > * {
231
- animation: jux-rotate-in 0.5s ease-out;
232
- }
233
-
234
- .jux-stack-flip-x > * {
235
- animation: jux-flip-in-x 0.6s ease-out;
236
- }
237
-
238
- .jux-stack-flip-y > * {
239
- animation: jux-flip-in-y 0.6s ease-out;
240
- }
241
-
242
- /* Bounce Animation */
243
193
  @keyframes jux-bounce-in {
244
194
  0% { transform: scale(0); opacity: 0; }
245
195
  50% { transform: scale(1.1); }
@@ -247,11 +197,6 @@
247
197
  100% { transform: scale(1); opacity: 1; }
248
198
  }
249
199
 
250
- .jux-stack-bounce-in > * {
251
- animation: jux-bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
252
- }
253
-
254
- /* Elastic Animation */
255
200
  @keyframes jux-elastic-in {
256
201
  0% { transform: scale(0); }
257
202
  55% { transform: scale(1.2); }
@@ -260,31 +205,140 @@
260
205
  100% { transform: scale(1); }
261
206
  }
262
207
 
263
- .jux-stack-elastic-in > * {
264
- animation: jux-elastic-in 0.8s ease-out;
265
- }
266
-
267
- /* Blur Animation */
268
208
  @keyframes jux-blur-in {
269
209
  from { filter: blur(10px); opacity: 0; }
270
210
  to { filter: blur(0); opacity: 1; }
271
211
  }
272
212
 
273
- .jux-stack-blur-in > * {
274
- animation: jux-blur-in 0.5s ease-out;
275
- }
276
-
277
- /* Glow Animation */
278
213
  @keyframes jux-glow-pulse {
279
214
  0%, 100% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); }
280
215
  50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); }
281
216
  }
282
217
 
283
- .jux-stack-glow > * {
218
+ /* ═════════════════════════════════════════════════════════════════
219
+ * STACK-LEVEL ANIMATIONS (Apply to container itself)
220
+ * ═════════════════════════════════════════════════════════════════ */
221
+
222
+ .jux-stack-fade-in {
223
+ animation: jux-fade-in 0.3s ease-out;
224
+ }
225
+
226
+ .jux-stack-slide-up {
227
+ animation: jux-slide-in-up 0.4s ease-out;
228
+ }
229
+
230
+ .jux-stack-slide-down {
231
+ animation: jux-slide-in-down 0.4s ease-out;
232
+ }
233
+
234
+ .jux-stack-slide-left {
235
+ animation: jux-slide-in-left 0.4s ease-out;
236
+ }
237
+
238
+ .jux-stack-slide-right {
239
+ animation: jux-slide-in-right 0.4s ease-out;
240
+ }
241
+
242
+ .jux-stack-scale-in {
243
+ animation: jux-scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
244
+ }
245
+
246
+ .jux-stack-zoom-in {
247
+ animation: jux-zoom-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
248
+ }
249
+
250
+ .jux-stack-rotate-in {
251
+ animation: jux-rotate-in 0.5s ease-out;
252
+ }
253
+
254
+ .jux-stack-flip-x {
255
+ animation: jux-flip-in-x 0.6s ease-out;
256
+ }
257
+
258
+ .jux-stack-flip-y {
259
+ animation: jux-flip-in-y 0.6s ease-out;
260
+ }
261
+
262
+ .jux-stack-bounce-in {
263
+ animation: jux-bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
264
+ }
265
+
266
+ .jux-stack-elastic-in {
267
+ animation: jux-elastic-in 0.8s ease-out;
268
+ }
269
+
270
+ .jux-stack-blur-in {
271
+ animation: jux-blur-in 0.5s ease-out;
272
+ }
273
+
274
+ .jux-stack-glow {
275
+ animation: jux-glow-pulse 2s ease-in-out infinite;
276
+ }
277
+
278
+ /* ═════════════════════════════════════════════════════════════════
279
+ * ITEM-LEVEL ANIMATIONS (Apply to direct children only)
280
+ * ═════════════════════════════════════════════════════════════════ */
281
+
282
+ .jux-stack-fade-in-items > * {
283
+ animation: jux-fade-in 0.3s ease-out;
284
+ }
285
+
286
+ .jux-stack-slide-up-items > * {
287
+ animation: jux-slide-in-up 0.4s ease-out;
288
+ }
289
+
290
+ .jux-stack-slide-down-items > * {
291
+ animation: jux-slide-in-down 0.4s ease-out;
292
+ }
293
+
294
+ .jux-stack-slide-left-items > * {
295
+ animation: jux-slide-in-left 0.4s ease-out;
296
+ }
297
+
298
+ .jux-stack-slide-right-items > * {
299
+ animation: jux-slide-in-right 0.4s ease-out;
300
+ }
301
+
302
+ .jux-stack-scale-in-items > * {
303
+ animation: jux-scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
304
+ }
305
+
306
+ .jux-stack-zoom-in-items > * {
307
+ animation: jux-zoom-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
308
+ }
309
+
310
+ .jux-stack-rotate-in-items > * {
311
+ animation: jux-rotate-in 0.5s ease-out;
312
+ }
313
+
314
+ .jux-stack-flip-x-items > * {
315
+ animation: jux-flip-in-x 0.6s ease-out;
316
+ }
317
+
318
+ .jux-stack-flip-y-items > * {
319
+ animation: jux-flip-in-y 0.6s ease-out;
320
+ }
321
+
322
+ .jux-stack-bounce-in-items > * {
323
+ animation: jux-bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
324
+ }
325
+
326
+ .jux-stack-elastic-in-items > * {
327
+ animation: jux-elastic-in 0.8s ease-out;
328
+ }
329
+
330
+ .jux-stack-blur-in-items > * {
331
+ animation: jux-blur-in 0.5s ease-out;
332
+ }
333
+
334
+ .jux-stack-glow-items > * {
284
335
  animation: jux-glow-pulse 2s ease-in-out infinite;
285
336
  }
286
337
 
287
- /* Stagger Delay (for sequential animations) */
338
+ /* ═════════════════════════════════════════════════════════════════
339
+ * STAGGER DELAYS (Only for item-level animations)
340
+ * ═════════════════════════════════════════════════════════════════ */
341
+
288
342
  .jux-stack-stagger > *:nth-child(1) { animation-delay: 0ms; }
289
343
  .jux-stack-stagger > *:nth-child(2) { animation-delay: 100ms; }
290
344
  .jux-stack-stagger > *:nth-child(3) { animation-delay: 200ms; }
@@ -296,7 +350,10 @@
296
350
  .jux-stack-stagger > *:nth-child(9) { animation-delay: 800ms; }
297
351
  .jux-stack-stagger > *:nth-child(10) { animation-delay: 900ms; }
298
352
 
299
- /* Hover Transitions (opt-in via .jux-stack-interactive) */
353
+ /* ═════════════════════════════════════════════════════════════════
354
+ * INTERACTIVE EFFECTS (Hover, Focus)
355
+ * ═════════════════════════════════════════════════════════════════ */
356
+
300
357
  .jux-stack-interactive > * {
301
358
  transition: transform 0.3s ease, box-shadow 0.3s ease;
302
359
  cursor: pointer;
@@ -307,8 +364,14 @@
307
364
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
308
365
  }
309
366
 
310
- /* Smooth transitions for all animated properties */
311
- .jux-stack-smooth,
312
- .jux-stack-smooth > * {
367
+ /* ═════════════════════════════════════════════════════════════════
368
+ * UTILITY CLASSES
369
+ * ═════════════════════════════════════════════════════════════════ */
370
+
371
+ .jux-stack-smooth {
372
+ transition: all 0.3s ease;
373
+ }
374
+
375
+ .jux-stack-smooth-items > * {
313
376
  transition: all 0.3s ease;
314
377
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "juxscript",
3
- "version": "1.1.106",
3
+ "version": "1.1.107",
4
4
  "type": "module",
5
5
  "description": "A JavaScript UX authorship platform",
6
6
  "main": "index.js",