juxscript 1.1.144 → 1.1.147

package/lib/components/base/BaseComponent.d.ts

@@ -144,6 +144,70 @@ export declare abstract class BaseComponent<TState extends BaseState = BaseState
     protected _isTriggerEvent(event: string): boolean;
     protected _isCallbackEvent(event: string): boolean;
     protected _triggerCallback(eventName: string, ...args: any[]): void;
+    /**
+     * Register a click event handler
+     */
+    click(handler: (e: MouseEvent) => void): this;
+    /**
+     * Register a double-click event handler
+     */
+    dblclick(handler: (e: MouseEvent) => void): this;
+    /**
+     * Register a change event handler
+     */
+    change(handler: (e: Event) => void): this;
+    /**
+     * Register an input event handler
+     */
+    input(handler: (e: Event) => void): this;
+    /**
+     * Register a mouseover event handler
+     */
+    hover(handler: (e: MouseEvent) => void): this;
+    /**
+     * Register a mouseout event handler
+     */
+    mouseout(handler: (e: MouseEvent) => void): this;
+    /**
+     * Register a mousedown event handler
+     */
+    mousedown(handler: (e: MouseEvent) => void): this;
+    /**
+     * Register a mouseup event handler
+     */
+    mouseup(handler: (e: MouseEvent) => void): this;
+    /**
+     * Register a focus event handler (renamed to onFocus to avoid conflict with focus() method)
+     */
+    onFocus(handler: (e: FocusEvent) => void): this;
+    /**
+     * Register a blur event handler (renamed to onBlur to avoid conflict with blur() method)
+     */
+    onBlur(handler: (e: FocusEvent) => void): this;
+    /**
+     * Register a keydown event handler
+     */
+    keydown(handler: (e: KeyboardEvent) => void): this;
+    /**
+     * Register a keyup event handler
+     */
+    keyup(handler: (e: KeyboardEvent) => void): this;
+    /**
+     * Register a keypress event handler
+     */
+    keypress(handler: (e: KeyboardEvent) => void): this;
+    /**
+     * Register a submit event handler
+     */
+    submit(handler: (e: Event) => void): this;
+    /**
+     * Register a scroll event handler
+     */
+    scroll(handler: (e: Event) => void): this;
+    /**
+     * Register a contextmenu (right-click) event handler
+     */
+    contextmenu(handler: (e: MouseEvent) => void): this;
     /**
      * Roll back to previous state
      */

package/lib/components/base/BaseComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseComponent.d.ts","sourceRoot":"","sources":["BaseComponent.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseComponent.d.ts","sourceRoot":"","sources":["BaseComponent.ts"],"names":[],"mappings":"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"}

package/lib/components/base/BaseComponent.js

@@ -343,6 +343,105 @@ export class BaseComponent {
             handler(...args);
         }
     }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT EVENT SHORTHANDS
+     * ═════════════════════════════════════════════════════════════════ */
+    /**
+     * Register a click event handler
+     */
+    click(handler) {
+        return this.bind('click', handler);
+    }
+    /**
+     * Register a double-click event handler
+     */
+    dblclick(handler) {
+        return this.bind('dblclick', handler);
+    }
+    /**
+     * Register a change event handler
+     */
+    change(handler) {
+        return this.bind('change', handler);
+    }
+    /**
+     * Register an input event handler
+     */
+    input(handler) {
+        return this.bind('input', handler);
+    }
+    /**
+     * Register a mouseover event handler
+     */
+    hover(handler) {
+        return this.bind('mouseover', handler);
+    }
+    /**
+     * Register a mouseout event handler
+     */
+    mouseout(handler) {
+        return this.bind('mouseout', handler);
+    }
+    /**
+     * Register a mousedown event handler
+     */
+    mousedown(handler) {
+        return this.bind('mousedown', handler);
+    }
+    /**
+     * Register a mouseup event handler
+     */
+    mouseup(handler) {
+        return this.bind('mouseup', handler);
+    }
+    /**
+     * Register a focus event handler (renamed to onFocus to avoid conflict with focus() method)
+     */
+    onFocus(handler) {
+        return this.bind('focus', handler);
+    }
+    /**
+     * Register a blur event handler (renamed to onBlur to avoid conflict with blur() method)
+     */
+    onBlur(handler) {
+        return this.bind('blur', handler);
+    }
+    /**
+     * Register a keydown event handler
+     */
+    keydown(handler) {
+        return this.bind('keydown', handler);
+    }
+    /**
+     * Register a keyup event handler
+     */
+    keyup(handler) {
+        return this.bind('keyup', handler);
+    }
+    /**
+     * Register a keypress event handler
+     */
+    keypress(handler) {
+        return this.bind('keypress', handler);
+    }
+    /**
+     * Register a submit event handler
+     */
+    submit(handler) {
+        return this.bind('submit', handler);
+    }
+    /**
+     * Register a scroll event handler
+     */
+    scroll(handler) {
+        return this.bind('scroll', handler);
+    }
+    /**
+     * Register a contextmenu (right-click) event handler
+     */
+    contextmenu(handler) {
+        return this.bind('contextmenu', handler);
+    }
     /* ═════════════════════════════════════════════════════════════════
      * TIME-TRAVEL DEBUGGING (PUBLIC API)
      * ═════════════════════════════════════════════════════════════════ */

package/lib/components/base/BaseComponent.ts

@@ -430,6 +430,122 @@ export abstract class BaseComponent<TState extends BaseState = BaseState> {
         }
     }
 
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT EVENT SHORTHANDS
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Register a click event handler
+     */
+    click(handler: (e: MouseEvent) => void): this {
+        return this.bind('click', handler);
+    }
+
+    /**
+     * Register a double-click event handler
+     */
+    dblclick(handler: (e: MouseEvent) => void): this {
+        return this.bind('dblclick', handler);
+    }
+
+    /**
+     * Register a change event handler
+     */
+    change(handler: (e: Event) => void): this {
+        return this.bind('change', handler);
+    }
+
+    /**
+     * Register an input event handler
+     */
+    input(handler: (e: Event) => void): this {
+        return this.bind('input', handler);
+    }
+
+    /**
+     * Register a mouseover event handler
+     */
+    hover(handler: (e: MouseEvent) => void): this {
+        return this.bind('mouseover', handler);
+    }
+
+    /**
+     * Register a mouseout event handler
+     */
+    mouseout(handler: (e: MouseEvent) => void): this {
+        return this.bind('mouseout', handler);
+    }
+
+    /**
+     * Register a mousedown event handler
+     */
+    mousedown(handler: (e: MouseEvent) => void): this {
+        return this.bind('mousedown', handler);
+    }
+
+    /**
+     * Register a mouseup event handler
+     */
+    mouseup(handler: (e: MouseEvent) => void): this {
+        return this.bind('mouseup', handler);
+    }
+
+    /**
+     * Register a focus event handler (renamed to onFocus to avoid conflict with focus() method)
+     */
+    onFocus(handler: (e: FocusEvent) => void): this {
+        return this.bind('focus', handler);
+    }
+
+    /**
+     * Register a blur event handler (renamed to onBlur to avoid conflict with blur() method)
+     */
+    onBlur(handler: (e: FocusEvent) => void): this {
+        return this.bind('blur', handler);
+    }
+
+    /**
+     * Register a keydown event handler
+     */
+    keydown(handler: (e: KeyboardEvent) => void): this {
+        return this.bind('keydown', handler);
+    }
+
+    /**
+     * Register a keyup event handler
+     */
+    keyup(handler: (e: KeyboardEvent) => void): this {
+        return this.bind('keyup', handler);
+    }
+
+    /**
+     * Register a keypress event handler
+     */
+    keypress(handler: (e: KeyboardEvent) => void): this {
+        return this.bind('keypress', handler);
+    }
+
+    /**
+     * Register a submit event handler
+     */
+    submit(handler: (e: Event) => void): this {
+        return this.bind('submit', handler);
+    }
+
+    /**
+     * Register a scroll event handler
+     */
+    scroll(handler: (e: Event) => void): this {
+        return this.bind('scroll', handler);
+    }
+
+    /**
+     * Register a contextmenu (right-click) event handler
+     */
+    contextmenu(handler: (e: MouseEvent) => void): this {
+        return this.bind('contextmenu', handler);
+    }
+
     /* ═════════════════════════════════════════════════════════════════
      * TIME-TRAVEL DEBUGGING (PUBLIC API)
      * ═════════════════════════════════════════════════════════════════ */

package/lib/styles/foundation.css

@@ -43,14 +43,15 @@
   
   /* ═════════════════════════════════════════════════════════════════
    * 📏 SPACING SCALE (Base units for padding, gap, margins)
+   * ✅ MORE GENEROUS - Premium feel
    * ═════════════════════════════════════════════════════════════════ */
-  --jux-space-xs: 0.25rem;
-  --jux-space-sm: 0.5rem;
-  --jux-space-md: 1rem;
-  --jux-space-lg: 1.5rem;
-  --jux-space-xl: 2rem;
-  --jux-space-2xl: 3rem;
-  --jux-space-3xl: 4rem;
+  --jux-space-xs: 0.375rem;    /* 6px */
+  --jux-space-sm: 0.75rem;     /* 12px */
+  --jux-space-md: 1rem;        /* 16px - ✅ Increased */
+  --jux-space-lg: 1.5rem;      /* 24px - ✅ Increased */
+  --jux-space-xl: 2.5rem;      /* 40px - ✅ Increased */
+  --jux-space-2xl: 3.5rem;     /* 56px - ✅ Increased */
+  --jux-space-3xl: 5rem;       /* 80px - ✅ Increased */
   
   /* ═════════════════════════════════════════════════════════════════
    * 🔤 TYPOGRAPHY SCALE
@@ -321,27 +322,32 @@ html {
 .jux-button {
   /* Colors */
   background: var(--jux-brand-bg);
-  color: #fff;
+  color: var(--jux-surface-from);
   border: var(--jux-stroke) solid var(--jux-border-color);
   
   /* Shape */
   border-radius: var(--jux-radius);
   
-  /* Size */
-  padding: var(--jux-pad, var(--jux-space-md));
+  /* Size - ✅ MORE GENEROUS PADDING */
+  padding: 0.75rem 1.5rem; /* ✅ 12px 24px - much better */
   font-size: var(--jux-font-size);
-  font-weight: var(--jux-weight-medium);
+  font-weight: var(--jux-weight-semibold); /* ✅ Bolder */
   font-family: var(--jux-font-family);
+  letter-spacing: 0.025em; /* ✅ Subtle spacing for premium feel */
   
   /* Layout */
   display: inline-flex;
   align-items: center;
   gap: var(--jux-space-sm);
   
+  /* ✅ PREMIUM SHADOWS */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 
+              0 1px 2px rgba(0, 0, 0, 0.06);
+  
   /* Interaction */
   cursor: pointer;
   user-select: none;
-  transition: all 0.15s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* ✅ Smoother easing */
   line-height: 1;
   text-decoration: none;
 }
@@ -349,20 +355,28 @@ html {
 /* States use burn calculations */
 .jux-button:hover:not(:disabled) {
   background: var(--jux-brand-color-hover);
+  transform: translateY(-1px); /* ✅ Subtle lift */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 
+              0 2px 4px rgba(0, 0, 0, 0.06);
 }
 
 .jux-button:active:not(:disabled) {
   background: var(--jux-brand-color-active);
+  transform: translateY(0); /* ✅ Press down */
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 }
 
 .jux-button:focus {
   outline: none;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jux-brand-bg) 30%, transparent 70%);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jux-brand-bg) 30%, transparent 70%),
+              0 1px 3px rgba(0, 0, 0, 0.08);
 }
 
 .jux-button:disabled {
   opacity: var(--jux-burn-strong);
   cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -456,7 +470,7 @@ html {
    ══════════════════════════════════════════════════════════════════ */
 
 .jux-button-small {
-  padding: calc(var(--jux-space-sm) * 0.75) calc(var(--jux-space-md) * 0.75);
+  padding: 0.5rem 1rem; /* ✅ 8px 16px */
   font-size: calc(var(--jux-text-base) * var(--jux-size-sm));
 }
 
@@ -465,7 +479,7 @@ html {
 }
 
 .jux-button-large {
-  padding: calc(var(--jux-space-md) * 1.25) calc(var(--jux-space-lg) * 1.25);
+  padding: 1rem 2rem; /* ✅ 16px 32px */
   font-size: calc(var(--jux-text-base) * var(--jux-size-lg));
 }
 
@@ -479,11 +493,13 @@ html {
   font-weight: var(--jux-weight-bold);
   line-height: var(--jux-leading-tight);
   color: var(--jux-text-color);
+  letter-spacing: -0.025em; /* ✅ Tighter for headings */
 }
 
 .jux-heading-1 {
   font-size: var(--jux-text-4xl);
   font-weight: var(--jux-weight-black);
+  letter-spacing: -0.04em; /* ✅ Even tighter for h1 */
 }
 
 .jux-heading-2 {
@@ -520,6 +536,7 @@ html {
   font-family: var(--jux-font-family);
   font-size: var(--jux-text-base);
   font-weight: var(--jux-weight-normal);
-  line-height: var(--jux-leading-normal);
+  line-height: var(--jux-leading-relaxed); /* ✅ More breathing room */
   color: var(--jux-text-color);
+  max-width: 65ch; /* ✅ Better readability */
 }

package/lib/styles/stacks.css

@@ -1,80 +1,132 @@
-/* ═══════════════════════════════════════════════════════════════════
- * STACK LAYOUT COMPONENTS
- * Pure layout structure - no animations, no modifiers
- * ═══════════════════════════════════════════════════════════════════ */
+/* ══════════════════════════════════════════════════════════════════
+   JUX STACKS - Layout System
+   Uses foundation tokens for spacing, auto-adapts to themes
+   ══════════════════════════════════════════════════════════════════ */
 
-/* Vertical Stack */
-.jux-vstack {
+/* ═════════════════════════════════════════════════════════════════
+ * BASE STACK STYLES
+ * ═════════════════════════════════════════════════════════════════ */
+
+.jux-vstack,
+.jux-hstack,
+.jux-zstack {
   display: flex;
+  
+  /* ✅ Use CSS variables from foundation/theme */
+  gap: var(--jux-gap);
+  padding: var(--jux-pad);
+  
+  /* Default alignment */
+  align-items: var(--jux-align, flex-start);
+}
+
+/* ═════════════════════════════════════════════════════════════════
+ * VERTICAL STACK (Column)
+ * ═════════════════════════════════════════════════════════════════ */
+
+.jux-vstack {
   flex-direction: column;
 }
 
-.jux-vstack-tight { gap: 0.5rem; }
-.jux-vstack-loose { gap: 1.5rem; }
-.jux-vstack-none { gap: 0; }
+/* ═════════════════════════════════════════════════════════════════
+ * HORIZONTAL STACK (Row)
+ * ═════════════════════════════════════════════════════════════════ */
 
-/* Horizontal Stack */
 .jux-hstack {
-  display: flex;
   flex-direction: row;
-  align-items: center;
+  flex-wrap: wrap; /* Allow wrapping on mobile */
 }
 
-.jux-hstack-tight { gap: 0.5rem; }
-.jux-hstack-loose { gap: 1.5rem; }
-.jux-hstack-none { gap: 0; }
+/* ═════════════════════════════════════════════════════════════════
+ * Z-STACK (Layered)
+ * ═════════════════════════════════════════════════════════════════ */
 
-/* Z-Stack (Layered/Overlapping) */
 .jux-zstack {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
   position: relative;
+  flex-direction: column;
 }
 
 .jux-zstack > * {
-  grid-column: 1;
-  grid-row: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
-.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 */
+/* ═════════════════════════════════════════════════════════════════
+ * ALIGNMENT UTILITIES (Via CSS Variables)
+ * Applied via .align-* descriptor classes
+ * ═════════════════════════════════════════════════════════════════ */
+
+.align-start    { --jux-align: flex-start; }
+.align-center   { --jux-align: center; }
+.align-end      { --jux-align: flex-end; }
+.align-stretch  { --jux-align: stretch; }
+.align-baseline { --jux-align: baseline; }
+
+/* ═════════════════════════════════════════════════════════════════
+ * JUSTIFY CONTENT (For HStack distribution)
+ * ═════════════════════════════════════════════════════════════════ */
+
+.justify-start   { justify-content: flex-start; }
+.justify-center  { justify-content: center; }
+.justify-end     { justify-content: flex-end; }
+.justify-between { justify-content: space-between; }
+.justify-around  { justify-content: space-around; }
+.justify-evenly  { justify-content: space-evenly; }
+
+/* ═════════════════════════════════════════════════════════════════
+ * RESPONSIVE BEHAVIOR
+ * HStack becomes VStack on mobile for better UX
+ * ═════════════════════════════════════════════════════════════════ */
+
 @media (max-width: 768px) {
-  .jux-hstack-responsive {
+  .jux-hstack {
     flex-direction: column;
+    /* Gap remains consistent via CSS variables */
+  }
+  
+  /* Optional: Force HStack to stay horizontal on mobile */
+  .jux-hstack.stay-horizontal {
+    flex-direction: row;
   }
 }
 
-/* Stack with Dividers */
-.jux-vstack-divider > *:not(:last-child) {
-  padding-bottom: 1rem;
-  border-bottom: 1px solid #e4e4e7;
-  margin-bottom: 1rem;
+/* ═════════════════════════════════════════════════════════════════
+ * FULL WIDTH/HEIGHT UTILITIES
+ * ═════════════════════════════════════════════════════════════════ */
+
+.full-width {
+  width: 100%;
+}
+
+.full-height {
+  height: 100%;
+  min-height: 100vh;
+}
+
+/* ═════════════════════════════════════════════════════════════════
+ * CENTERED CONTENT (Common Layout Pattern)
+ * ═════════════════════════════════════════════════════════════════ */
+
+.center-content {
+  justify-content: center;
+  align-items: center;
+}
+
+/* ═════════════════════════════════════════════════════════════════
+ * SCROLL BEHAVIOR
+ * ═════════════════════════════════════════════════════════════════ */
+
+.scroll-x {
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 
-.jux-hstack-divider > *:not(:last-child) {
-  padding-right: 1rem;
-  border-right: 1px solid #e4e4e7;
-  margin-right: 1rem;
+.scroll-y {
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
-.jux-zstack-divider > * {
-  border: 1px solid #e4e4e7;
+.scroll-both {
+  overflow: auto;
 }

package/lib/styles/themes.css

@@ -41,14 +41,14 @@
   --jux-radius-2xl: 1.5rem;
   --jux-radius-full: 9999px;
   
-  /* Spacing - Generous (Apple loves whitespace) */
-  --jux-space-xs: 0.5rem;
-  --jux-space-sm: 0.75rem;
-  --jux-space-md: 1.25rem;
-  --jux-space-lg: 2rem;
-  --jux-space-xl: 3rem;
-  --jux-space-2xl: 4rem;
-  --jux-space-3xl: 6rem;
+  /* Spacing - ✅ MORE GENEROUS */
+  --jux-space-xs: 0.5rem;      /* 8px */
+  --jux-space-sm: 0.75rem;     /* 12px */
+  --jux-space-md: 1rem;        /* 16px */
+  --jux-space-lg: 1.75rem;     /* 28px - ✅ Increased */
+  --jux-space-xl: 2.5rem;      /* 40px - ✅ Increased */
+  --jux-space-2xl: 3.5rem;     /* 56px - ✅ Increased */
+  --jux-space-3xl: 5rem;       /* 80px - ✅ Increased */
   
   /* Typography - San Francisco inspired */
   --jux-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
@@ -63,6 +63,10 @@
   --jux-burn-active: 0.08;
   --jux-burn-muted: 0.3;
   --jux-burn-strong: 0.6;
+  
+  /* ✅ DEFAULT STACK SPACING - More breathing room */
+  --jux-gap-token: var(--jux-space-md);   /* 16px */
+  --jux-pad-token: var(--jux-space-xl);   /* 40px */
 }
 
 [data-swag="apple"][data-mode="dark"] {
@@ -80,7 +84,9 @@
   --jux-border-from: #38383a;
   --jux-border-to: #545456;
   
-  /* Radius, spacing, typography inherited from light mode */
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-md);
+  --jux-pad-token: var(--jux-space-lg);
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -88,17 +94,21 @@
    ══════════════════════════════════════════════════════════════════ */
 
 [data-swag="google"][data-mode="light"] {
+  /* Brand Colors */
   --jux-brand-from: #4285f4;
   --jux-brand-to: #1a73e8;
   --jux-brand-accent-from: #34a853;
   --jux-brand-accent-to: #0d652d;
   
+  /* Surfaces */
   --jux-surface-from: #ffffff;
   --jux-surface-to: #f8f9fa;
   
+  /* Text */
   --jux-text-from: #202124;
   --jux-text-to: #5f6368;
   
+  /* Borders */
   --jux-border-from: #dadce0;
   --jux-border-to: #5f6368;
   
@@ -111,14 +121,14 @@
   --jux-radius-2xl: 1.25rem;
   --jux-radius-full: 9999px;
   
-  /* Spacing - Standard Material */
-  --jux-space-xs: 0.25rem;
-  --jux-space-sm: 0.5rem;
+  /* Spacing - ✅ MORE GENEROUS */
+  --jux-space-xs: 0.5rem;
+  --jux-space-sm: 0.75rem;
   --jux-space-md: 1rem;
-  --jux-space-lg: 1.5rem;
-  --jux-space-xl: 2rem;
-  --jux-space-2xl: 3rem;
-  --jux-space-3xl: 4rem;
+  --jux-space-lg: 1.5rem;      /* ✅ Increased */
+  --jux-space-xl: 2.5rem;      /* ✅ Increased */
+  --jux-space-2xl: 3.5rem;     /* ✅ Increased */
+  --jux-space-3xl: 5rem;       /* ✅ Increased */
   
   /* Typography - Roboto */
   --jux-font-sans: "Roboto", "Helvetica", "Arial", sans-serif;
@@ -133,6 +143,10 @@
   --jux-burn-active: 0.15;
   --jux-burn-muted: 0.25;
   --jux-burn-strong: 0.5;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-md);   /* 16px */
+  --jux-pad-token: var(--jux-space-lg);   /* 24px */
 }
 
 [data-swag="google"][data-mode="dark"] {
@@ -149,6 +163,10 @@
   
   --jux-border-from: #3c4043;
   --jux-border-to: #5f6368;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-sm);
+  --jux-pad-token: var(--jux-space-md);
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -156,17 +174,21 @@
    ══════════════════════════════════════════════════════════════════ */
 
 [data-swag="stripe"][data-mode="light"] {
+  /* Brand Colors */
   --jux-brand-from: #635bff;
   --jux-brand-to: #0a2540;
   --jux-brand-accent-from: #00d4ff;
   --jux-brand-accent-to: #0073e6;
   
+  /* Surfaces */
   --jux-surface-from: #ffffff;
   --jux-surface-to: #f6f9fc;
   
+  /* Text */
   --jux-text-from: #0a2540;
   --jux-text-to: #425466;
   
+  /* Borders */
   --jux-border-from: #e3e8ee;
   --jux-border-to: #cbd2d9;
   
@@ -179,7 +201,7 @@
   --jux-radius-2xl: 1rem;
   --jux-radius-full: 9999px;
   
-  /* Spacing - Tight, efficient */
+  /* Spacing - ✅ UNCHANGED (already tight) */
   --jux-space-xs: 0.25rem;
   --jux-space-sm: 0.5rem;
   --jux-space-md: 1rem;
@@ -201,6 +223,10 @@
   --jux-burn-active: 0.08;
   --jux-burn-muted: 0.3;
   --jux-burn-strong: 0.5;
+  
+  /* ✅ DEFAULT STACK SPACING - Reduced */
+  --jux-gap-token: var(--jux-space-sm);   /* 8px instead of 16px */
+  --jux-pad-token: var(--jux-space-md);   /* 16px instead of 16px (same) */
 }
 
 [data-swag="stripe"][data-mode="dark"] {
@@ -217,6 +243,10 @@
   
   --jux-border-from: #1a365d;
   --jux-border-to: #2d4a6f;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-sm);
+  --jux-pad-token: var(--jux-space-md);
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -224,17 +254,21 @@
    ══════════════════════════════════════════════════════════════════ */
 
 [data-swag="gumroad"][data-mode="light"] {
+  /* Brand Colors */
   --jux-brand-from: #ff90e8;
   --jux-brand-to: #ff5ac4;
   --jux-brand-accent-from: #36d9b8;
   --jux-brand-accent-to: #1ead8a;
   
+  /* Surfaces */
   --jux-surface-from: #ffffff;
   --jux-surface-to: #f9f9f9;
   
+  /* Text */
   --jux-text-from: #000000;
   --jux-text-to: #999999;
   
+  /* Borders */
   --jux-border-from: #e6e6e6;
   --jux-border-to: #cccccc;
   
@@ -247,28 +281,18 @@
   --jux-radius-2xl: 2rem;
   --jux-radius-full: 9999px;
   
-  /* Spacing - Generous (creative needs room) */
-  --jux-space-xs: 0.5rem;
-  --jux-space-sm: 0.75rem;
-  --jux-space-md: 1.25rem;
-  --jux-space-lg: 2rem;
-  --jux-space-xl: 3rem;
-  --jux-space-2xl: 4rem;
-  --jux-space-3xl: 6rem;
-  
-  /* Typography - Mabry (fallback to rounded sans) */
-  --jux-font-sans: "Mabry", "Circular", -apple-system, sans-serif;
-  --jux-weight-normal: 400;
-  --jux-weight-medium: 500;
-  --jux-weight-semibold: 600;
-  --jux-weight-bold: 700;
-  
-  /* Burn Factors - Vibrant transitions */
-  --jux-burn-subtle: 0.05;
-  --jux-burn-hover: 0.1;
-  --jux-burn-active: 0.15;
-  --jux-burn-muted: 0.25;
-  --jux-burn-strong: 0.4;
+  /* Spacing - ✅ REDUCED (was way too generous) */
+  --jux-space-xs: 0.25rem;     /* 4px */
+  --jux-space-sm: 0.5rem;      /* 8px */
+  --jux-space-md: 0.75rem;     /* 12px */
+  --jux-space-lg: 1.25rem;     /* 20px */
+  --jux-space-xl: 2rem;        /* 32px */
+  --jux-space-2xl: 2.5rem;     /* 40px */
+  --jux-space-3xl: 4rem;       /* 64px */
+  
+  /* ✅ DEFAULT STACK SPACING - Much more reasonable */
+  --jux-gap-token: var(--jux-space-md);    /* 12px instead of 48px */
+  --jux-pad-token: var(--jux-space-lg);    /* 20px instead of 64px */
 }
 
 [data-swag="gumroad"][data-mode="dark"] {
@@ -285,6 +309,10 @@
   
   --jux-border-from: #333333;
   --jux-border-to: #666666;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-md);
+  --jux-pad-token: var(--jux-space-lg);
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -292,17 +320,21 @@
    ══════════════════════════════════════════════════════════════════ */
 
 [data-swag="meta"][data-mode="light"] {
+  /* Brand Colors */
   --jux-brand-from: #0866ff;
   --jux-brand-to: #0554e5;
   --jux-brand-accent-from: #0bc15c;
   --jux-brand-accent-to: #089e48;
   
+  /* Surfaces */
   --jux-surface-from: #ffffff;
   --jux-surface-to: #f0f2f5;
   
+  /* Text */
   --jux-text-from: #050505;
   --jux-text-to: #65676b;
   
+  /* Borders */
   --jux-border-from: #ced0d4;
   --jux-border-to: #bcc0c4;
   
@@ -315,7 +347,7 @@
   --jux-radius-2xl: 1.25rem;
   --jux-radius-full: 9999px;
   
-  /* Spacing - Balanced */
+  /* Spacing - ✅ UNCHANGED (already balanced) */
   --jux-space-xs: 0.25rem;
   --jux-space-sm: 0.5rem;
   --jux-space-md: 1rem;
@@ -337,6 +369,10 @@
   --jux-burn-active: 0.12;
   --jux-burn-muted: 0.25;
   --jux-burn-strong: 0.5;
+  
+  /* ✅ DEFAULT STACK SPACING - Reduced */
+  --jux-gap-token: var(--jux-space-sm);   /* 8px instead of 16px */
+  --jux-pad-token: var(--jux-space-md);   /* 16px instead of 24px */
 }
 
 [data-swag="meta"][data-mode="dark"] {
@@ -353,6 +389,10 @@
   
   --jux-border-from: #3a3b3c;
   --jux-border-to: #4e4f50;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-sm);
+  --jux-pad-token: var(--jux-space-md);
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -360,17 +400,21 @@
    ══════════════════════════════════════════════════════════════════ */
 
 [data-swag="notion"][data-mode="light"] {
+  /* Brand Colors */
   --jux-brand-from: #000000;
   --jux-brand-to: #2e2e2e;
   --jux-brand-accent-from: #0f7b6c;
   --jux-brand-accent-to: #0a5a4f;
   
+  /* Surfaces */
   --jux-surface-from: #ffffff;
   --jux-surface-to: #f7f6f3;
   
+  /* Text */
   --jux-text-from: #37352f;
   --jux-text-to: #9b9a97;
   
+  /* Borders */
   --jux-border-from: #e9e9e7;
   --jux-border-to: #d3d1cb;
   
@@ -383,7 +427,7 @@
   --jux-radius-2xl: 0.75rem;
   --jux-radius-full: 9999px;
   
-  /* Spacing - Compact, efficient */
+  /* Spacing - ✅ UNCHANGED (already compact) */
   --jux-space-xs: 0.25rem;
   --jux-space-sm: 0.5rem;
   --jux-space-md: 0.75rem;
@@ -405,6 +449,10 @@
   --jux-burn-active: 0.08;
   --jux-burn-muted: 0.35;
   --jux-burn-strong: 0.6;
+  
+  /* ✅ DEFAULT STACK SPACING - Already good */
+  --jux-gap-token: var(--jux-space-sm);   /* 8px */
+  --jux-pad-token: var(--jux-space-md);   /* 12px */
 }
 
 [data-swag="notion"][data-mode="dark"] {
@@ -421,6 +469,10 @@
   
   --jux-border-from: #373737;
   --jux-border-to: #4a4a4a;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-sm);
+  --jux-pad-token: var(--jux-space-md);
 }
 
 /* ══════════════════════════════════════════════════════════════════

package/package.json

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