juxscript 1.1.145 → 1.1.148

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)
      * ═════════════════════════════════════════════════════════════════ */
@@ -765,4 +881,4 @@ export abstract class BaseComponent<TState extends BaseState = BaseState> {
 }
 
 // ✅ Type assertion for Animations (all components have animation methods)
-export interface BaseComponent extends Animations {}
+export interface BaseComponent extends Animations { }

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: var(--jux-surface-from); /* ✅ Fixed - button text uses surface color (inverts with theme) */
+  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/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;
@@ -64,9 +64,9 @@
   --jux-burn-muted: 0.3;
   --jux-burn-strong: 0.6;
   
-  /* ✅ DEFAULT STACK SPACING */
-  --jux-gap-token: var(--jux-space-lg);
-  --jux-pad-token: var(--jux-space-xl);
+  /* ✅ 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"] {
@@ -85,8 +85,8 @@
   --jux-border-to: #545456;
   
   /* ✅ DEFAULT STACK SPACING */
-  --jux-gap-token: var(--jux-space-lg);
-  --jux-pad-token: var(--jux-space-xl);
+  --jux-gap-token: var(--jux-space-md);
+  --jux-pad-token: var(--jux-space-lg);
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -94,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;
   
@@ -117,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;
@@ -141,8 +145,8 @@
   --jux-burn-strong: 0.5;
   
   /* ✅ DEFAULT STACK SPACING */
-  --jux-gap-token: var(--jux-space-md);
-  --jux-pad-token: var(--jux-space-lg);
+  --jux-gap-token: var(--jux-space-md);   /* 16px */
+  --jux-pad-token: var(--jux-space-lg);   /* 24px */
 }
 
 [data-swag="google"][data-mode="dark"] {
@@ -161,8 +165,8 @@
   --jux-border-to: #5f6368;
   
   /* ✅ DEFAULT STACK SPACING */
-  --jux-gap-token: var(--jux-space-md);
-  --jux-pad-token: var(--jux-space-lg);
+  --jux-gap-token: var(--jux-space-sm);
+  --jux-pad-token: var(--jux-space-md);
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -170,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;
   
@@ -193,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;
@@ -216,9 +224,9 @@
   --jux-burn-muted: 0.3;
   --jux-burn-strong: 0.5;
   
-  /* ✅ DEFAULT STACK SPACING */
-  --jux-gap-token: var(--jux-space-md);
-  --jux-pad-token: var(--jux-space-md);
+  /* ✅ 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"] {
@@ -237,7 +245,7 @@
   --jux-border-to: #2d4a6f;
   
   /* ✅ DEFAULT STACK SPACING */
-  --jux-gap-token: var(--jux-space-md);
+  --jux-gap-token: var(--jux-space-sm);
   --jux-pad-token: var(--jux-space-md);
 }
 
@@ -246,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;
   
@@ -269,32 +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;
-  
-  /* ✅ DEFAULT STACK SPACING */
-  --jux-gap-token: var(--jux-space-xl);
-  --jux-pad-token: var(--jux-space-2xl);
+  /* 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"] {
@@ -313,8 +311,8 @@
   --jux-border-to: #666666;
   
   /* ✅ DEFAULT STACK SPACING */
-  --jux-gap-token: var(--jux-space-xl);
-  --jux-pad-token: var(--jux-space-2xl);
+  --jux-gap-token: var(--jux-space-md);
+  --jux-pad-token: var(--jux-space-lg);
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -322,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;
   
@@ -345,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;
@@ -368,9 +370,9 @@
   --jux-burn-muted: 0.25;
   --jux-burn-strong: 0.5;
   
-  /* ✅ DEFAULT STACK SPACING */
-  --jux-gap-token: var(--jux-space-md);
-  --jux-pad-token: var(--jux-space-lg);
+  /* ✅ 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"] {
@@ -389,8 +391,8 @@
   --jux-border-to: #4e4f50;
   
   /* ✅ DEFAULT STACK SPACING */
-  --jux-gap-token: var(--jux-space-md);
-  --jux-pad-token: var(--jux-space-lg);
+  --jux-gap-token: var(--jux-space-sm);
+  --jux-pad-token: var(--jux-space-md);
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -398,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;
   
@@ -421,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;
@@ -444,9 +450,9 @@
   --jux-burn-muted: 0.35;
   --jux-burn-strong: 0.6;
   
-  /* ✅ DEFAULT STACK SPACING */
-  --jux-gap-token: var(--jux-space-sm);
-  --jux-pad-token: var(--jux-space-md);
+  /* ✅ 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"] {

package/machinery/compiler4.js

@@ -4,6 +4,7 @@ import { walk } from 'astray';
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import { generateErrorCollector } from './errors.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -616,6 +617,11 @@ export class JuxCompiler {
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>JUX Application</title>
+    ${generateErrorCollector({
+            enabled: process.env.NODE_ENV !== 'production',
+            maxErrors: 50,
+            position: 'bottom-right'
+        })}
     <script type="module" src="/bundle.js"></script>
 </head>
 <body>

package/machinery/errors.js

@@ -0,0 +1,188 @@
+/**
+ * Generates an injectable client-side error collector script.
+ * Catches runtime errors, unhandled promise rejections, and console.error calls.
+ * Displays them in a floating overlay panel in the browser.
+ *
+ * @param {Object} options
+ * @param {boolean} [options.enabled=true] - Whether to enable the collector
+ * @param {number} [options.maxErrors=50] - Max errors to keep in buffer
+ * @param {string} [options.position='bottom-right'] - Panel position
+ * @returns {string} Inline script to inject into HTML
+ */
+export function generateErrorCollector(options = {}) {
+    const {
+        enabled = true,
+        maxErrors = 50,
+        position = 'bottom-right'
+    } = options;
+
+    if (!enabled) return '';
+
+    return `
+<script>
+(function() {
+    var __juxErrors = [];
+    var __juxMaxErrors = ${maxErrors};
+    var __juxPanel = null;
+    var __juxList = null;
+    var __juxBadge = null;
+    var __juxVisible = false;
+
+    var posMap = {
+        'bottom-right': 'bottom:12px;right:12px;',
+        'bottom-left':  'bottom:12px;left:12px;',
+        'top-right':    'top:12px;right:12px;',
+        'top-left':     'top:12px;left:12px;'
+    };
+    var panelPos = posMap['${position}'] || posMap['bottom-right'];
+
+    function createPanel() {
+        // Toggle button / badge
+        __juxBadge = document.createElement('div');
+        __juxBadge.id = '__jux-error-badge';
+        __juxBadge.setAttribute('style',
+            'position:fixed;' + panelPos +
+            'z-index:99999;width:36px;height:36px;border-radius:50%;' +
+            'background:#e74c3c;color:#fff;font-size:14px;font-weight:bold;' +
+            'display:none;align-items:center;justify-content:center;cursor:pointer;' +
+            'font-family:monospace;box-shadow:0 2px 8px rgba(0,0,0,0.3);'
+        );
+        __juxBadge.textContent = '0';
+        __juxBadge.addEventListener('click', togglePanel);
+        document.body.appendChild(__juxBadge);
+
+        // Panel
+        __juxPanel = document.createElement('div');
+        __juxPanel.id = '__jux-error-panel';
+        __juxPanel.setAttribute('style',
+            'position:fixed;bottom:56px;right:12px;z-index:99998;' +
+            'width:480px;max-height:360px;background:#1e1e1e;color:#f8f8f8;' +
+            'border:1px solid #e74c3c;border-radius:8px;font-family:monospace;' +
+            'font-size:12px;display:none;flex-direction:column;' +
+            'box-shadow:0 4px 16px rgba(0,0,0,0.4);'
+        );
+
+        // Header
+        var header = document.createElement('div');
+        header.setAttribute('style',
+            'padding:8px 12px;background:#e74c3c;color:#fff;font-weight:bold;' +
+            'display:flex;justify-content:space-between;align-items:center;' +
+            'border-radius:7px 7px 0 0;'
+        );
+        header.innerHTML = '<span>⚠ Runtime Errors</span>';
+
+        var clearBtn = document.createElement('button');
+        clearBtn.textContent = 'Clear';
+        clearBtn.setAttribute('style',
+            'background:transparent;border:1px solid #fff;color:#fff;' +
+            'padding:2px 8px;border-radius:4px;cursor:pointer;font-size:11px;'
+        );
+        clearBtn.addEventListener('click', clearErrors);
+        header.appendChild(clearBtn);
+
+        __juxPanel.appendChild(header);
+
+        // List
+        __juxList = document.createElement('div');
+        __juxList.setAttribute('style',
+            'overflow-y:auto;max-height:300px;padding:8px;'
+        );
+        __juxPanel.appendChild(__juxList);
+
+        document.body.appendChild(__juxPanel);
+    }
+
+    function togglePanel() {
+        __juxVisible = !__juxVisible;
+        __juxPanel.style.display = __juxVisible ? 'flex' : 'none';
+    }
+
+    function clearErrors() {
+        __juxErrors = [];
+        __juxList.innerHTML = '';
+        __juxBadge.textContent = '0';
+        __juxBadge.style.display = 'none';
+        __juxPanel.style.display = 'none';
+        __juxVisible = false;
+    }
+
+    function addError(type, message, source, line, col, stack) {
+        if (__juxErrors.length >= __juxMaxErrors) __juxErrors.shift();
+
+        var entry = {
+            type: type,
+            message: String(message || ''),
+            source: source || '',
+            line: line || 0,
+            col: col || 0,
+            stack: stack || '',
+            time: new Date().toLocaleTimeString()
+        };
+        __juxErrors.push(entry);
+
+        if (!__juxPanel) createPanel();
+
+        // Update badge
+        __juxBadge.textContent = String(__juxErrors.length);
+        __juxBadge.style.display = 'flex';
+
+        // Add to list
+        var item = document.createElement('div');
+        item.setAttribute('style',
+            'padding:6px 8px;margin-bottom:4px;background:#2d2d2d;border-radius:4px;' +
+            'border-left:3px solid ' + (type === 'error' ? '#e74c3c' : type === 'rejection' ? '#e67e22' : '#f39c12') + ';'
+        );
+
+        var label = type === 'error' ? '❌ Error' : type === 'rejection' ? '💥 Rejection' : '⚠ Console';
+
+        item.innerHTML =
+            '<div style="color:#888;font-size:10px;margin-bottom:2px;">' +
+                entry.time + ' • ' + label +
+                (entry.source ? ' • ' + entry.source + ':' + entry.line : '') +
+            '</div>' +
+            '<div style="word-break:break-word;">' + escapeHtml(entry.message) + '</div>' +
+            (entry.stack ? '<details style="margin-top:4px;"><summary style="cursor:pointer;color:#888;font-size:10px;">Stack trace</summary><pre style="margin:4px 0 0;font-size:10px;color:#aaa;white-space:pre-wrap;">' + escapeHtml(entry.stack) + '</pre></details>' : '');
+
+        __juxList.appendChild(item);
+        __juxList.scrollTop = __juxList.scrollHeight;
+    }
+
+    function escapeHtml(str) {
+        return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+    }
+
+    // --- Hooks ---
+
+    // 1. window.onerror
+    window.onerror = function(msg, source, line, col, err) {
+        addError('error', msg, source, line, col, err && err.stack ? err.stack : '');
+    };
+
+    // 2. Unhandled promise rejections
+    window.addEventListener('unhandledrejection', function(e) {
+        var reason = e.reason;
+        var msg = reason instanceof Error ? reason.message : String(reason);
+        var stack = reason instanceof Error ? reason.stack : '';
+        addError('rejection', msg, '', 0, 0, stack);
+    });
+
+    // 3. Intercept console.error
+    var _origConsoleError = console.error;
+    console.error = function() {
+        var args = Array.prototype.slice.call(arguments);
+        var msg = args.map(function(a) {
+            return typeof a === 'object' ? JSON.stringify(a, null, 2) : String(a);
+        }).join(' ');
+        addError('console', msg);
+        _origConsoleError.apply(console, arguments);
+    };
+
+    // Expose API for programmatic access
+    window.__juxErrors = {
+        list: function() { return __juxErrors.slice(); },
+        clear: clearErrors,
+        count: function() { return __juxErrors.length; }
+    };
+})();
+</script>`;
+}

package/package.json

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