juxscript 1.1.9 → 1.1.11

package/juxconfig.example.js

@@ -1,71 +1,20 @@
 /**
- * JUX Configuration File
- * 
- * This file is optional. JUX works out-of-the-box with sensible defaults.
- * Customize only if you need to change default behavior.
- * 
- * Copy this file to your project root as 'juxconfig.js' to customize.
+ * JUX PROJECT CONFIGURATION
+ * This file defines the environment, routing, and behavior of your JUX application.
  */
 
-// Route overrides
-export const routeOverrides = {
-    // 'about': '/about-us',
-}
+export const config = {
 
-export default {
-    // Application settings
-    appName: 'My JUX App',
-    autoRoutes: true,
-    // Directories
-    sourceDir: 'jux',
-    distDir: '.jux-dist',
-
-    // External services - used by jux.fetch and jux.fetch.serviceClient()
-    // Each service becomes available as a baseUrl for fetch requests
-    // 
-    // Usage in components:
-    //   const db = jux.fetch.serviceClient('database');
-    //   const { data } = await db.fetch('/users').send();
-    //   
-    //   // Or directly:
-    //   const { data } = await jux.fetch('/users')
-    //     .header('Authorization', 'Bearer token')
-    //     .send();
-    services: {
-        database: 'http://localhost:4000/api/db',
-        auth: 'http://localhost:4000/api/auth',
-        monday: 'http://api.rxtrail.monday.com/api/'
-    },
-
-    // Dev server ports
-    ports: {
-        http: 3000,
-        ws: 3001
+    // Project Folder Structure declaration
+    directories: {
+        source: './jux',          // Where your .jux files live
+        distribution: './.jux-dist', // Where build artifacts go
     },
 
-    // Fetch configuration
-    fetchTimeout: 30000,  // milliseconds
-    fetchLog: false,      // true, false, or 'errors' for error-only logging
-
-    // Build options
-    build: {
-        minify: false,
-        sourcemap: true
-    },
-
-    // Bootstrap functions (run on startup)
-    // Perfect place to initialize services and auth
-    bootstrap: [
-        // Example: Setup fetch with service configuration
-        // async function initFetch() {
-        //   await jux.fetch.setupConfig();
-        //   console.log('✅ Fetch configured');
-        // },
-
-        // Example: Initialize authentication
-        // async function initAuth() {
-        //   console.log('🔐 Initializing auth...');
-        // },
-    ]
-};
+    // Application Defaults
+    defaults: {
+        httpPort: 3000,
+        wsPort: 3001,
+    }
 
+};

package/lib/components/hero.d.ts

@@ -5,7 +5,11 @@ export interface HeroOptions {
     content?: string;
     cta?: string;
     ctaLink?: string;
-    backgroundImage?: string;
+    backgroundImage?: string | {
+        url: string;
+        size?: string;
+        repeat?: string;
+    };
     backgroundOverlay?: boolean;
     variant?: 'default' | 'centered' | 'split';
     centered?: boolean;
@@ -18,7 +22,11 @@ type HeroState = {
     content: string;
     cta: string;
     ctaLink: string;
-    backgroundImage: string;
+    backgroundImage: {
+        url: string;
+        size: string;
+        repeat: string;
+    };
     backgroundOverlay: boolean;
     variant: string;
     centered: boolean;
@@ -34,7 +42,11 @@ export declare class Hero extends BaseComponent<HeroState> {
     content(value: string): this;
     cta(value: string): this;
     ctaLink(value: string): this;
-    backgroundImage(value: string): this;
+    backgroundImage(value: string | {
+        url: string;
+        size?: string;
+        repeat?: string;
+    }): this;
     backgroundOverlay(value: boolean): this;
     variant(value: string): this;
     centered(value: boolean): this;

package/lib/components/hero.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAgBjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKxB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKpC,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKvC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAS9B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CA2GhC;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}
+{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3E,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,iBAAiB,EAAE,OAAO,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAqBjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKxB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAatF,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKvC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAS9B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CA6GhC;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}

package/lib/components/hero.js

@@ -4,13 +4,17 @@ const TRIGGER_EVENTS = [];
 const CALLBACK_EVENTS = ['ctaClick']; // ✅ When CTA button is clicked
 export class Hero extends BaseComponent {
     constructor(id, options = {}) {
+        // Normalize backgroundImage to object format
+        const bgImage = typeof options.backgroundImage === 'string'
+            ? { url: options.backgroundImage, size: 'cover', repeat: 'no-repeat' }
+            : options.backgroundImage || { url: '', size: 'cover', repeat: 'no-repeat' };
         super(id, {
             title: options.title ?? '',
             subtitle: options.subtitle ?? '',
             content: options.content ?? '', // ✅ ADD
             cta: options.cta ?? '',
             ctaLink: options.ctaLink ?? '#',
-            backgroundImage: options.backgroundImage ?? '',
+            backgroundImage: { url: bgImage.url, size: bgImage.size || 'cover', repeat: bgImage.repeat || 'no-repeat' },
             backgroundOverlay: options.backgroundOverlay ?? false, // ✅ ADD
             variant: options.variant ?? 'default',
             centered: options.centered ?? false, // ✅ ADD
@@ -48,7 +52,16 @@ export class Hero extends BaseComponent {
         return this;
     }
     backgroundImage(value) {
-        this.state.backgroundImage = value;
+        if (typeof value === 'string') {
+            this.state.backgroundImage = { url: value, size: 'cover', repeat: 'no-repeat' };
+        }
+        else {
+            this.state.backgroundImage = {
+                url: value.url,
+                size: value.size || 'cover',
+                repeat: value.repeat || 'no-repeat'
+            };
+        }
         return this;
     }
     backgroundOverlay(value) {
@@ -78,8 +91,10 @@ export class Hero extends BaseComponent {
             hero.className += ` ${className}`;
         if (style)
             hero.setAttribute('style', style);
-        if (backgroundImage) {
-            hero.style.backgroundImage = `url(${backgroundImage})`;
+        if (backgroundImage.url) {
+            hero.style.backgroundImage = `url(${backgroundImage.url})`;
+            hero.style.backgroundSize = backgroundImage.size;
+            hero.style.backgroundRepeat = backgroundImage.repeat;
             if (backgroundOverlay) {
                 const overlay = document.createElement('div');
                 overlay.className = 'jux-hero-overlay';
@@ -163,3 +178,13 @@ export class Hero extends BaseComponent {
 export function hero(id, options = {}) {
     return new Hero(id, options);
 }
+// String format (backward compatible)
+hero('h1').backgroundImage('/hero.jpg');
+// Object format with defaults
+hero('h2').backgroundImage({ url: '/hero.jpg' });
+// Object format with custom values
+hero('h3').backgroundImage({
+    url: '/pattern.png',
+    size: 'contain',
+    repeat: 'repeat'
+});

package/lib/components/hero.ts

@@ -10,7 +10,7 @@ export interface HeroOptions {
   content?: string;          // ✅ ADD: Generates jux-hero-body div
   cta?: string;              // ✅ KEEP: Generates jux-hero-cta anchor
   ctaLink?: string;
-  backgroundImage?: string;
+  backgroundImage?: string | { url: string; size?: string; repeat?: string };
   backgroundOverlay?: boolean; // ✅ ADD: Generates jux-hero-overlay div
   variant?: 'default' | 'centered' | 'split';
   centered?: boolean;        // ✅ ADD: Affects container class
@@ -24,7 +24,7 @@ type HeroState = {
   content: string;           // ✅ ADD: For jux-hero-body
   cta: string;
   ctaLink: string;
-  backgroundImage: string;
+  backgroundImage: { url: string; size: string; repeat: string };
   backgroundOverlay: boolean; // ✅ ADD: For overlay div
   variant: string;
   centered: boolean;         // ✅ ADD: For layout variant
@@ -34,13 +34,18 @@ type HeroState = {
 
 export class Hero extends BaseComponent<HeroState> {
   constructor(id: string, options: HeroOptions = {}) {
+    // Normalize backgroundImage to object format
+    const bgImage = typeof options.backgroundImage === 'string'
+      ? { url: options.backgroundImage, size: 'cover', repeat: 'no-repeat' }
+      : options.backgroundImage || { url: '', size: 'cover', repeat: 'no-repeat' };
+
     super(id, {
       title: options.title ?? '',
       subtitle: options.subtitle ?? '',
       content: options.content ?? '',           // ✅ ADD
       cta: options.cta ?? '',
       ctaLink: options.ctaLink ?? '#',
-      backgroundImage: options.backgroundImage ?? '',
+      backgroundImage: { url: bgImage.url, size: bgImage.size || 'cover', repeat: bgImage.repeat || 'no-repeat' },
       backgroundOverlay: options.backgroundOverlay ?? false, // ✅ ADD
       variant: options.variant ?? 'default',
       centered: options.centered ?? false,     // ✅ ADD
@@ -86,8 +91,16 @@ export class Hero extends BaseComponent<HeroState> {
     return this;
   }
 
-  backgroundImage(value: string): this {
-    this.state.backgroundImage = value;
+  backgroundImage(value: string | { url: string; size?: string; repeat?: string }): this {
+    if (typeof value === 'string') {
+      this.state.backgroundImage = { url: value, size: 'cover', repeat: 'no-repeat' };
+    } else {
+      this.state.backgroundImage = {
+        url: value.url,
+        size: value.size || 'cover',
+        repeat: value.repeat || 'no-repeat'
+      };
+    }
     return this;
   }
 
@@ -122,8 +135,10 @@ export class Hero extends BaseComponent<HeroState> {
     if (className) hero.className += ` ${className}`;
     if (style) hero.setAttribute('style', style);
 
-    if (backgroundImage) {
-      hero.style.backgroundImage = `url(${backgroundImage})`;
+    if (backgroundImage.url) {
+      hero.style.backgroundImage = `url(${backgroundImage.url})`;
+      hero.style.backgroundSize = backgroundImage.size;
+      hero.style.backgroundRepeat = backgroundImage.repeat;
       if (backgroundOverlay) {
         const overlay = document.createElement('div');
         overlay.className = 'jux-hero-overlay';
@@ -222,3 +237,16 @@ export class Hero extends BaseComponent<HeroState> {
 export function hero(id: string, options: HeroOptions = {}): Hero {
   return new Hero(id, options);
 }
+
+// String format (backward compatible)
+hero('h1').backgroundImage('/hero.jpg')
+
+// Object format with defaults
+hero('h2').backgroundImage({ url: '/hero.jpg' })
+
+// Object format with custom values
+hero('h3').backgroundImage({
+  url: '/pattern.png',
+  size: 'contain',
+  repeat: 'repeat'
+})

package/machinery/build3.js

@@ -12,24 +12,24 @@ let rawConfig = {};
 
 try {
     const imported = await import(JUX_CONFIG_PATH);
-    rawConfig = imported.config || imported.default || {};
+    rawConfig = imported.config || {};
     console.log(`⚙️  Loaded config: ${JUX_CONFIG_PATH}`);
 } catch (err) {
     console.warn(`⚠️  No juxconfig.js found, using defaults`);
 }
 
 // ═══════════════════════════════════════════════════════════════
-// EXPLODE CONFIG - Handle both old and new structure
+// EXPLODE CONFIG
 // ═══════════════════════════════════════════════════════════════
 const directories = {
-    source: rawConfig.directories?.source || rawConfig.sourceDir || './jux',
-    distribution: rawConfig.directories?.distribution || rawConfig.distDir || './.jux-dist'
+    source: rawConfig.directories?.source || './jux',
+    distribution: rawConfig.directories?.distribution || './.jux-dist'
 };
 
 const defaults = {
-    httpPort: rawConfig.defaults?.httpPort || rawConfig.ports?.http || 3000,
-    wsPort: rawConfig.defaults?.wsPort || rawConfig.ports?.ws || 3001,
-    autoRoute: rawConfig.defaults?.autoRoute ?? rawConfig.autoRoutes ?? true
+    httpPort: rawConfig.defaults?.httpPort || 3000,
+    wsPort: rawConfig.defaults?.wsPort || 3001,
+    autoRoute: rawConfig.defaults?.autoRoute ?? true
 };
 
 // Resolve absolute paths

package/package.json

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