juxscript 1.1.108 → 1.1.109

package/lib/styles/{stack.css → animations.css}

@@ -1,143 +1,10 @@
 /* ═══════════════════════════════════════════════════════════════════
- * STACK LAYOUT COMPONENTS
- * ═══════════════════════════════════════════════════════════════════ */
-
-/* Vertical Stack */
-.jux-vstack {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem; /* Default spacing */
-}
-
-.jux-vstack-tight {
-  gap: 0.5rem; /* 8px */
-}
-
-.jux-vstack-loose {
-  gap: 1.5rem; /* 24px */
-}
-
-.jux-vstack-none {
-  gap: 0;
-}
-
-/* Horizontal Stack */
-.jux-hstack {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 1rem; /* Default spacing */
-}
-
-.jux-hstack-tight {
-  gap: 0.5rem;
-}
-
-.jux-hstack-loose {
-  gap: 1.5rem;
-}
-
-.jux-hstack-none {
-  gap: 0;
-}
-
-/* Z-Stack (Layered/Overlapping) */
-.jux-zstack {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
-  position: relative;
-}
-
-.jux-zstack > * {
-  grid-column: 1;
-  grid-row: 1;
-}
-
-.jux-zstack-tight > * {
-  margin: 0.25rem;
-}
-
-.jux-zstack-loose > * {
-  margin: 0.75rem;
-}
-
-.jux-zstack-none > * {
-  margin: 0;
-}
-
-/* Stack Alignment Options */
-.jux-stack-start {
-  align-items: flex-start;
-}
-
-.jux-stack-center {
-  align-items: center;
-}
-
-.jux-stack-end {
-  align-items: flex-end;
-}
-
-.jux-stack-stretch {
-  align-items: stretch;
-}
-
-/* Stack Justification Options */
-.jux-stack-justify-start {
-  justify-content: flex-start;
-}
-
-.jux-stack-justify-center {
-  justify-content: center;
-}
-
-.jux-stack-justify-end {
-  justify-content: flex-end;
-}
-
-.jux-stack-justify-between {
-  justify-content: space-between;
-}
-
-.jux-stack-justify-around {
-  justify-content: space-around;
-}
-
-.jux-stack-justify-evenly {
-  justify-content: space-evenly;
-}
-
-/* Responsive Stacks */
-@media (max-width: 768px) {
-  .jux-hstack-responsive {
-    flex-direction: column;
-  }
-}
-
-/* Stack with Dividers */
-.jux-vstack-divider > *:not(:last-child) {
-  padding-bottom: 1rem;
-  border-bottom: 1px solid #e4e4e7;
-  margin-bottom: 1rem;
-}
-
-.jux-hstack-divider > *:not(:last-child) {
-  padding-right: 1rem;
-  border-right: 1px solid #e4e4e7;
-  margin-right: 1rem;
-}
-
-.jux-zstack-divider > * {
-  border: 1px solid #e4e4e7;
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * ANIMATION & TRANSITION CLASSES
+ * JUX ANIMATION SYSTEM
+ * Keyframes, animation classes, speed/timing modifiers
  * ═══════════════════════════════════════════════════════════════════ */
 
 /* ═════════════════════════════════════════════════════════════════
- * KEYFRAME DEFINITIONS (Shared)
+ * KEYFRAME DEFINITIONS
  * ═════════════════════════════════════════════════════════════════ */
 
 @keyframes jux-fade-in {
@@ -216,10 +83,47 @@
 }
 
 /* ═════════════════════════════════════════════════════════════════
- * SPEED MODIFIERS (Global)
+ * CONTAINER-LEVEL ANIMATIONS (Apply to element itself)
+ * ═════════════════════════════════════════════════════════════════ */
+
+.jux-stack-fade-in { animation: jux-fade-in 0.3s ease-out; }
+.jux-stack-slide-up { animation: jux-slide-in-up 0.4s ease-out; }
+.jux-stack-slide-down { animation: jux-slide-in-down 0.4s ease-out; }
+.jux-stack-slide-left { animation: jux-slide-in-left 0.4s ease-out; }
+.jux-stack-slide-right { animation: jux-slide-in-right 0.4s ease-out; }
+.jux-stack-scale-in { animation: jux-scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.jux-stack-zoom-in { animation: jux-zoom-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.jux-stack-rotate-in { animation: jux-rotate-in 0.5s ease-out; }
+.jux-stack-flip-x { animation: jux-flip-in-x 0.6s ease-out; }
+.jux-stack-flip-y { animation: jux-flip-in-y 0.6s ease-out; }
+.jux-stack-bounce-in { animation: jux-bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
+.jux-stack-elastic-in { animation: jux-elastic-in 0.8s ease-out; }
+.jux-stack-blur-in { animation: jux-blur-in 0.5s ease-out; }
+.jux-stack-glow { animation: jux-glow-pulse 2s ease-in-out infinite; }
+
+/* ═════════════════════════════════════════════════════════════════
+ * ITEM-LEVEL ANIMATIONS (Apply to direct children)
+ * ═════════════════════════════════════════════════════════════════ */
+
+.jux-stack-fade-in-items > * { animation: jux-fade-in 0.3s ease-out; }
+.jux-stack-slide-up-items > * { animation: jux-slide-in-up 0.4s ease-out; }
+.jux-stack-slide-down-items > * { animation: jux-slide-in-down 0.4s ease-out; }
+.jux-stack-slide-left-items > * { animation: jux-slide-in-left 0.4s ease-out; }
+.jux-stack-slide-right-items > * { animation: jux-slide-in-right 0.4s ease-out; }
+.jux-stack-scale-in-items > * { animation: jux-scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.jux-stack-zoom-in-items > * { animation: jux-zoom-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.jux-stack-rotate-in-items > * { animation: jux-rotate-in 0.5s ease-out; }
+.jux-stack-flip-x-items > * { animation: jux-flip-in-x 0.6s ease-out; }
+.jux-stack-flip-y-items > * { animation: jux-flip-in-y 0.6s ease-out; }
+.jux-stack-bounce-in-items > * { animation: jux-bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
+.jux-stack-elastic-in-items > * { animation: jux-elastic-in 0.8s ease-out; }
+.jux-stack-blur-in-items > * { animation: jux-blur-in 0.5s ease-out; }
+.jux-stack-glow-items > * { animation: jux-glow-pulse 2s ease-in-out infinite; }
+
+/* ═════════════════════════════════════════════════════════════════
+ * SPEED MODIFIERS (Override animation duration)
  * ═════════════════════════════════════════════════════════════════ */
 
-/* Apply to stack or items */
 .jux-stack-instant,
 .jux-stack-instant > * { animation-duration: 0.15s !important; }
 
@@ -236,7 +140,7 @@
 .jux-stack-slower > * { animation-duration: 1.2s !important; }
 
 /* ═════════════════════════════════════════════════════════════════
- * TIMING FUNCTIONS
+ * TIMING FUNCTIONS (Override easing)
  * ═════════════════════════════════════════════════════════════════ */
 
 .jux-stack-linear,
@@ -261,7 +165,7 @@
 .jux-stack-elastic-timing > * { animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
 
 /* ═════════════════════════════════════════════════════════════════
- * DELAY MODIFIERS
+ * DELAY MODIFIERS (Animation start delay)
  * ═════════════════════════════════════════════════════════════════ */
 
 .jux-stack-delay-100 { animation-delay: 100ms !important; }
@@ -271,127 +175,7 @@
 .jux-stack-delay-1000 { animation-delay: 1000ms !important; }
 
 /* ═════════════════════════════════════════════════════════════════
- * STACK-LEVEL ANIMATIONS (Apply to container itself)
- * ═════════════════════════════════════════════════════════════════ */
-
-.jux-stack-fade-in {
-  animation: jux-fade-in 0.3s ease-out;
-}
-
-.jux-stack-slide-up {
-  animation: jux-slide-in-up 0.4s ease-out;
-}
-
-.jux-stack-slide-down {
-  animation: jux-slide-in-down 0.4s ease-out;
-}
-
-.jux-stack-slide-left {
-  animation: jux-slide-in-left 0.4s ease-out;
-}
-
-.jux-stack-slide-right {
-  animation: jux-slide-in-right 0.4s ease-out;
-}
-
-.jux-stack-scale-in {
-  animation: jux-scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-.jux-stack-zoom-in {
-  animation: jux-zoom-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-.jux-stack-rotate-in {
-  animation: jux-rotate-in 0.5s ease-out;
-}
-
-.jux-stack-flip-x {
-  animation: jux-flip-in-x 0.6s ease-out;
-}
-
-.jux-stack-flip-y {
-  animation: jux-flip-in-y 0.6s ease-out;
-}
-
-.jux-stack-bounce-in {
-  animation: jux-bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-
-.jux-stack-elastic-in {
-  animation: jux-elastic-in 0.8s ease-out;
-}
-
-.jux-stack-blur-in {
-  animation: jux-blur-in 0.5s ease-out;
-}
-
-.jux-stack-glow {
-  animation: jux-glow-pulse 2s ease-in-out infinite;
-}
-
-/* ═════════════════════════════════════════════════════════════════
- * ITEM-LEVEL ANIMATIONS (Apply to direct children only)
- * ═════════════════════════════════════════════════════════════════ */
-
-.jux-stack-fade-in-items > * {
-  animation: jux-fade-in 0.3s ease-out;
-}
-
-.jux-stack-slide-up-items > * {
-  animation: jux-slide-in-up 0.4s ease-out;
-}
-
-.jux-stack-slide-down-items > * {
-  animation: jux-slide-in-down 0.4s ease-out;
-}
-
-.jux-stack-slide-left-items > * {
-  animation: jux-slide-in-left 0.4s ease-out;
-}
-
-.jux-stack-slide-right-items > * {
-  animation: jux-slide-in-right 0.4s ease-out;
-}
-
-.jux-stack-scale-in-items > * {
-  animation: jux-scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-.jux-stack-zoom-in-items > * {
-  animation: jux-zoom-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-.jux-stack-rotate-in-items > * {
-  animation: jux-rotate-in 0.5s ease-out;
-}
-
-.jux-stack-flip-x-items > * {
-  animation: jux-flip-in-x 0.6s ease-out;
-}
-
-.jux-stack-flip-y-items > * {
-  animation: jux-flip-in-y 0.6s ease-out;
-}
-
-.jux-stack-bounce-in-items > * {
-  animation: jux-bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-
-.jux-stack-elastic-in-items > * {
-  animation: jux-elastic-in 0.8s ease-out;
-}
-
-.jux-stack-blur-in-items > * {
-  animation: jux-blur-in 0.5s ease-out;
-}
-
-.jux-stack-glow-items > * {
-  animation: jux-glow-pulse 2s ease-in-out infinite;
-}
-
-/* ═════════════════════════════════════════════════════════════════
- * STAGGER DELAYS (Only for item-level animations)
+ * STAGGER DELAYS (Sequential item delays)
  * ═════════════════════════════════════════════════════════════════ */
 
 .jux-stack-stagger > *:nth-child(1) { animation-delay: 0ms; }
@@ -406,7 +190,7 @@
 .jux-stack-stagger > *:nth-child(10) { animation-delay: 900ms; }
 
 /* ═════════════════════════════════════════════════════════════════
- * INTERACTIVE EFFECTS (Hover, Focus)
+ * INTERACTIVE EFFECTS (Hover/Focus transitions)
  * ═════════════════════════════════════════════════════════════════ */
 
 .jux-stack-interactive > * {
@@ -420,7 +204,7 @@
 }
 
 /* ═════════════════════════════════════════════════════════════════
- * UTILITY CLASSES
+ * TRANSITION UTILITIES
  * ═════════════════════════════════════════════════════════════════ */
 
 .jux-stack-smooth {

package/lib/styles/modifiers.css

@@ -0,0 +1,103 @@
+/* ═══════════════════════════════════════════════════════════════════
+ * JUX LAYOUT MODIFIERS
+ * Utility classes for precision layout control (used by LayoutExtensions)
+ * ═══════════════════════════════════════════════════════════════════ */
+
+/* ═════════════════════════════════════════════════════════════════
+ * DISPLAY UTILITIES
+ * ═════════════════════════════════════════════════════════════════ */
+
+.jux-display-block { display: block !important; }
+.jux-display-inline { display: inline !important; }
+.jux-display-inline-block { display: inline-block !important; }
+.jux-display-flex { display: flex !important; }
+.jux-display-grid { display: grid !important; }
+.jux-display-none { display: none !important; }
+
+/* ═════════════════════════════════════════════════════════════════
+ * POSITION UTILITIES
+ * ═════════════════════════════════════════════════════════════════ */
+
+.jux-position-static { position: static !important; }
+.jux-position-relative { position: relative !important; }
+.jux-position-absolute { position: absolute !important; }
+.jux-position-fixed { position: fixed !important; }
+.jux-position-sticky { position: sticky !important; }
+
+/* ═════════════════════════════════════════════════════════════════
+ * OVERFLOW UTILITIES
+ * ═════════════════════════════════════════════════════════════════ */
+
+.jux-overflow-visible { overflow: visible !important; }
+.jux-overflow-hidden { overflow: hidden !important; }
+.jux-overflow-scroll { overflow: scroll !important; }
+.jux-overflow-auto { overflow: auto !important; }
+
+.jux-overflow-x-visible { overflow-x: visible !important; }
+.jux-overflow-x-hidden { overflow-x: hidden !important; }
+.jux-overflow-x-scroll { overflow-x: scroll !important; }
+.jux-overflow-x-auto { overflow-x: auto !important; }
+
+.jux-overflow-y-visible { overflow-y: visible !important; }
+.jux-overflow-y-hidden { overflow-y: hidden !important; }
+.jux-overflow-y-scroll { overflow-y: scroll !important; }
+.jux-overflow-y-auto { overflow-y: auto !important; }
+
+/* ═════════════════════════════════════════════════════════════════
+ * CURSOR UTILITIES
+ * ═════════════════════════════════════════════════════════════════ */
+
+.jux-cursor-pointer { cursor: pointer !important; }
+.jux-cursor-default { cursor: default !important; }
+.jux-cursor-not-allowed { cursor: not-allowed !important; }
+.jux-cursor-grab { cursor: grab !important; }
+.jux-cursor-grabbing { cursor: grabbing !important; }
+
+/* ═════════════════════════════════════════════════════════════════
+ * POINTER EVENTS
+ * ═════════════════════════════════════════════════════════════════ */
+
+.jux-pointer-events-auto { pointer-events: auto !important; }
+.jux-pointer-events-none { pointer-events: none !important; }
+
+/* ═════════════════════════════════════════════════════════════════
+ * USER SELECT
+ * ═════════════════════════════════════════════════════════════════ */
+
+.jux-select-auto { user-select: auto !important; }
+.jux-select-none { user-select: none !important; }
+.jux-select-text { user-select: text !important; }
+.jux-select-all { user-select: all !important; }
+
+/* ═════════════════════════════════════════════════════════════════
+ * TEXT UTILITIES
+ * ═════════════════════════════════════════════════════════════════ */
+
+.jux-text-left { text-align: left !important; }
+.jux-text-center { text-align: center !important; }
+.jux-text-right { text-align: right !important; }
+.jux-text-justify { text-align: justify !important; }
+
+.jux-text-uppercase { text-transform: uppercase !important; }
+.jux-text-lowercase { text-transform: lowercase !important; }
+.jux-text-capitalize { text-transform: capitalize !important; }
+.jux-text-none { text-transform: none !important; }
+
+.jux-whitespace-normal { white-space: normal !important; }
+.jux-whitespace-nowrap { white-space: nowrap !important; }
+.jux-whitespace-pre { white-space: pre !important; }
+.jux-whitespace-pre-wrap { white-space: pre-wrap !important; }
+.jux-whitespace-pre-line { white-space: pre-line !important; }
+
+.jux-word-wrap-normal { word-wrap: normal !important; }
+.jux-word-wrap-break { word-wrap: break-word !important; }
+
+/* ═════════════════════════════════════════════════════════════════
+ * BORDER STYLE UTILITIES
+ * ═════════════════════════════════════════════════════════════════ */
+
+.jux-border-solid { border-style: solid !important; }
+.jux-border-dashed { border-style: dashed !important; }
+.jux-border-dotted { border-style: dotted !important; }
+.jux-border-double { border-style: double !important; }
+.jux-border-none { border-style: none !important; }

package/lib/styles/stacks.css

@@ -0,0 +1,82 @@
+/* ═══════════════════════════════════════════════════════════════════
+ * STACK LAYOUT COMPONENTS
+ * Pure layout structure - no animations, no modifiers
+ * ═══════════════════════════════════════════════════════════════════ */
+
+/* Vertical Stack */
+.jux-vstack {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.jux-vstack-tight { gap: 0.5rem; }
+.jux-vstack-loose { gap: 1.5rem; }
+.jux-vstack-none { gap: 0; }
+
+/* Horizontal Stack */
+.jux-hstack {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+}
+
+.jux-hstack-tight { gap: 0.5rem; }
+.jux-hstack-loose { gap: 1.5rem; }
+.jux-hstack-none { gap: 0; }
+
+/* Z-Stack (Layered/Overlapping) */
+.jux-zstack {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  position: relative;
+}
+
+.jux-zstack > * {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.jux-zstack-tight > * { margin: 0.25rem; }
+.jux-zstack-loose > * { margin: 0.75rem; }
+.jux-zstack-none > * { margin: 0; }
+
+/* Stack Alignment Options */
+.jux-stack-start { align-items: flex-start; }
+.jux-stack-center { align-items: center; }
+.jux-stack-end { align-items: flex-end; }
+.jux-stack-stretch { align-items: stretch; }
+
+/* Stack Justification Options */
+.jux-stack-justify-start { justify-content: flex-start; }
+.jux-stack-justify-center { justify-content: center; }
+.jux-stack-justify-end { justify-content: flex-end; }
+.jux-stack-justify-between { justify-content: space-between; }
+.jux-stack-justify-around { justify-content: space-around; }
+.jux-stack-justify-evenly { justify-content: space-evenly; }
+
+/* Responsive Stacks */
+@media (max-width: 768px) {
+  .jux-hstack-responsive {
+    flex-direction: column;
+  }
+}
+
+/* Stack with Dividers */
+.jux-vstack-divider > *:not(:last-child) {
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #e4e4e7;
+  margin-bottom: 1rem;
+}
+
+.jux-hstack-divider > *:not(:last-child) {
+  padding-right: 1rem;
+  border-right: 1px solid #e4e4e7;
+  margin-right: 1rem;
+}
+
+.jux-zstack-divider > * {
+  border: 1px solid #e4e4e7;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.108",
+  "version": "1.1.109",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",