juxscript 1.0.19 → 1.0.21

package/lib/components/guard.ts

@@ -0,0 +1,92 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { State } from '../reactivity/state.js';
+
+// Extend Window interface to include Jux navigation hooks
+declare global {
+    interface Window {
+        juxBeforeNavigate?: (from: string, to: string) => boolean | string;
+        juxAfterNavigate?: (path: string) => void;
+    }
+}
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['blocked', 'allowed'] as const;
+
+export interface GuardOptions {
+    authState?: State<boolean>;       // Check if user is authenticated
+    loginPath?: string;               // Where to redirect if blocked
+    protectedPaths?: string[];        // Paths that require auth
+}
+
+type GuardState = {
+    authState: State<boolean> | null;
+    loginPath: string;
+    protectedPaths: string[];
+    isActive: boolean;
+};
+
+/**
+ * ⚠️ DEPRECATED: Guard component is no longer supported after removing global middleware.
+ * 
+ * Recommended alternatives:
+ * 1. Server-side authentication (Express, FastAPI, Laravel)
+ * 2. Manual route checks in each view
+ * 3. Custom wrapper components
+ * 
+ * This component will be removed in a future version.
+ */
+export class Guard extends BaseComponent<GuardState> {
+    constructor(id: string, options: GuardOptions = {}) {
+        super(id, {
+            authState: options.authState ?? null,
+            loginPath: options.loginPath ?? '/login',
+            protectedPaths: options.protectedPaths ?? [],
+            isActive: false
+        });
+
+        console.warn(
+            '[Jux Guard] DEPRECATED: Guard component no longer supported after middleware removal.\n' +
+            'Use server-side auth or manual checks instead.'
+        );
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API (No-ops now)
+     * ═════════════════════════════════════════════════════════════════ */
+
+    requireAuth(authState: State<boolean>, loginPath?: string): this {
+        console.warn('[Jux Guard] DEPRECATED: requireAuth() has no effect');
+        return this;
+    }
+
+    protect(...paths: string[]): this {
+        console.warn('[Jux Guard] DEPRECATED: protect() has no effect');
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER (No-op)
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        console.warn('[Jux Guard] DEPRECATED: Guard rendering has no effect');
+        return this;
+    }
+
+    deactivate(): this {
+        return this;
+    }
+}
+
+export function guard(id: string, options?: GuardOptions): Guard {
+    return new Guard(id, options);
+}

package/lib/components/heading.ts

@@ -1,8 +1,9 @@
-import { getOrCreateContainer } from './helpers.js';
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;  // Headings are display-only, no events
 
-/**
- * Heading options
- */
 export interface HeadingOptions {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     text?: string;
@@ -10,9 +11,6 @@ export interface HeadingOptions {
     style?: string;
 }
 
-/**
- * Heading state
- */
 type HeadingState = {
     level: 1 | 2 | 3 | 4 | 5 | 6;
     text: string;
@@ -20,34 +18,32 @@ type HeadingState = {
     style: string;
 };
 
-/**
- * Heading component - semantic heading elements (h1-h6)
- * 
- * Usage:
- *   jux.heading('title', { level: 1, text: 'Welcome' }).render('#app');
- *   jux.heading('subtitle').level(2).text('Getting Started').render('#app');
- */
-export class Heading {
-    state: HeadingState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-
+export class Heading extends BaseComponent<HeadingState> {
     constructor(id: string, options: HeadingOptions = {}) {
-        this._id = id;
-        this.id = id;
-
-        this.state = {
+        super(id, {
             level: options.level ?? 1,
             text: options.text ?? '',
             class: options.class ?? '',
             style: options.style ?? ''
-        };
+        });
     }
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    // ✅ Inherited from BaseComponent:
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - All other base methods
 
     level(value: 1 | 2 | 3 | 4 | 5 | 6): this {
         this.state.level = value;
@@ -59,61 +55,42 @@ export class Heading {
         return this;
     }
 
-    class(value: string): this {
-        this.state.class = value;
-        return this;
-    }
-
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
 
-    /* -------------------------
-     * Render
-     * ------------------------- */
-
-    render(targetId?: string | HTMLElement): this {
-        let container: HTMLElement;
-
-        if (targetId) {
-            if (targetId instanceof HTMLElement) {
-                container = targetId;
-            } else {
-                const target = document.querySelector(targetId);
-                if (!target || !(target instanceof HTMLElement)) {
-                    throw new Error(`Heading: Target element "${targetId}" not found`);
-                }
-                container = target;
-            }
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
 
-        this.container = container;
-        const { level, text, class: className, style } = this.state;
+        const { text, level, style, class: className } = this.state;
 
         const heading = document.createElement(`h${level}`) as HTMLHeadingElement;
+        heading.className = `jux-heading jux-heading-${level}`;
         heading.id = this._id;
         heading.textContent = text;
+        if (className) heading.className += ` ${className}`;
+        if (style) heading.setAttribute('style', style);
 
-        if (className) {
-            heading.className = className;
-        }
+        this._wireStandardEvents(heading);
 
-        if (style) {
-            heading.setAttribute('style', style);
-        }
+        // Wire sync bindings
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'text') {
+                const transform = toComponent || ((v: any) => String(v));
 
-        container.appendChild(heading);
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    heading.textContent = transformed;
+                    this.state.text = transformed;
+                });
+            }
+        });
 
+        container.appendChild(heading);
         return this;
     }
 }
 
-/**
- * Factory helper
- */
 export function heading(id: string, options: HeadingOptions = {}): Heading {
     return new Heading(id, options);
 }

package/lib/components/helpers.ts

@@ -22,12 +22,19 @@ export function getOrCreateContainer(id: string): HTMLElement {
     container = document.createElement('div');
     container.id = id;
 
-    // Find appropriate parent
-    let parent: HTMLElement;
-    // Page components go inside #appmain (or [data-jux-page] if no layout)
-    const appmain = document.getElementById('appmain');
-    const dataJuxPage = document.querySelector('[data-jux-page]');
-    parent = (appmain || dataJuxPage || document.body) as HTMLElement;
+    // Find appropriate parent - [data-jux-page] takes precedence, then #app, then body
+    const dataJuxPage = document.querySelector('[data-jux-page]') as HTMLElement;
+    const app = document.getElementById('app');
+
+    const parent: HTMLElement = (dataJuxPage || app || document.body) as HTMLElement;
+
+    // Log warning if falling back to body
+    if (!dataJuxPage && !app) {
+        console.warn(
+            `[Jux] Preferred container targets "[data-jux-page]" or "#app" not found. Creating container "#${id}" in fallback parent: body`,
+        );
+    }
+
     parent.appendChild(container);
 
     return container;

package/lib/components/hero.ts

@@ -1,8 +1,9 @@
-import { getOrCreateContainer } from './helpers.js';
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions - Hero is display-only, but CTA button can trigger actions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['ctaClick'] as const;  // ✅ When CTA button is clicked
 
-/**
- * Hero component options
- */
 export interface HeroOptions {
   title?: string;
   subtitle?: string;
@@ -14,9 +15,6 @@ export interface HeroOptions {
   class?: string;
 }
 
-/**
- * Hero component state
- */
 type HeroState = {
   title: string;
   subtitle: string;
@@ -24,46 +22,43 @@ type HeroState = {
   ctaLink: string;
   backgroundImage: string;
   variant: string;
+  content: string;
+  backgroundOverlay: boolean;
+  centered: boolean;
   style: string;
   class: string;
 };
 
-/**
- * Hero component
- * 
- * Usage:
- *   const hero = jux.hero('myHero', {
- *     title: 'Welcome',
- *     subtitle: 'Get started today',
- *     cta: 'Learn More'
- *   });
- *   hero.render();
- */
-export class Hero {
-  state: HeroState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
-
+export class Hero extends BaseComponent<HeroState> {
   constructor(id: string, options: HeroOptions = {}) {
-    this._id = id;
-    this.id = id;
-
-    this.state = {
+    super(id, {
       title: options.title ?? '',
       subtitle: options.subtitle ?? '',
       cta: options.cta ?? '',
       ctaLink: options.ctaLink ?? '#',
       backgroundImage: options.backgroundImage ?? '',
       variant: options.variant ?? 'default',
+      content: '',
+      backgroundOverlay: false,
+      centered: false,
       style: options.style ?? '',
       class: options.class ?? ''
-    };
+    });
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
+  }
+
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent
 
   title(value: string): this {
     this.state.title = value;
@@ -95,102 +90,119 @@ export class Hero {
     return this;
   }
 
-  style(value: string): this {
-    this.state.style = value;
-    return this;
-  }
-
-  class(value: string): this {
-    this.state.class = value;
-    return this;
-  }
-
-  /* -------------------------
-   * Render
-   * ------------------------- */
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
 
   render(targetId?: string): this {
-    let container: HTMLElement;
-
-    if (targetId) {
-      const target = document.querySelector(targetId);
-      if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`Hero: Target element "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
+    const container = this._setupContainer(targetId);
 
-    this.container = container;
-    const { title, subtitle, cta, ctaLink, backgroundImage, variant, style, class: className } = this.state;
+    const { title, subtitle, content, backgroundImage, backgroundOverlay, centered, style, class: className } = this.state;
 
-    const hero = document.createElement('div');
-    hero.className = `jux-hero jux-hero-${variant}`;
+    const hero = document.createElement('section');
+    hero.className = 'jux-hero';
     hero.id = this._id;
-
-    if (className) {
-      hero.className += ` ${className}`;
-    }
-
-    if (style) {
-      hero.setAttribute('style', style);
-    }
+    if (centered) hero.classList.add('jux-hero-centered');
+    if (className) hero.className += ` ${className}`;
+    if (style) hero.setAttribute('style', style);
 
     if (backgroundImage) {
       hero.style.backgroundImage = `url(${backgroundImage})`;
+      if (backgroundOverlay) {
+        const overlay = document.createElement('div');
+        overlay.className = 'jux-hero-overlay';
+        hero.appendChild(overlay);
+      }
     }
 
-    const content = document.createElement('div');
-    content.className = 'jux-hero-content';
+    const contentContainer = document.createElement('div');
+    contentContainer.className = 'jux-hero-content';
 
     if (title) {
       const titleEl = document.createElement('h1');
       titleEl.className = 'jux-hero-title';
+      titleEl.id = `${this._id}-title`;
       titleEl.textContent = title;
-      content.appendChild(titleEl);
+      contentContainer.appendChild(titleEl);
     }
 
     if (subtitle) {
       const subtitleEl = document.createElement('p');
       subtitleEl.className = 'jux-hero-subtitle';
+      subtitleEl.id = `${this._id}-subtitle`;
       subtitleEl.textContent = subtitle;
-      content.appendChild(subtitleEl);
+      contentContainer.appendChild(subtitleEl);
     }
 
-    if (cta) {
-      const ctaEl = document.createElement('a');
-      ctaEl.className = 'jux-hero-cta jux-button jux-button-primary';
-      ctaEl.href = ctaLink;
-      ctaEl.textContent = cta;
-      content.appendChild(ctaEl);
+    if (content) {
+      const contentEl = document.createElement('div');
+      contentEl.className = 'jux-hero-body';
+      contentEl.innerHTML = content;
+      contentContainer.appendChild(contentEl);
     }
 
-    hero.appendChild(content);
-    container.appendChild(hero);
+    if (this.state.cta) {
+      const ctaButton = document.createElement('a');
+      ctaButton.className = 'jux-hero-cta';
+      ctaButton.href = this.state.ctaLink;
+      ctaButton.textContent = this.state.cta;
 
-    return this;
-  }
+      // ✅ Fire callback when CTA is clicked
+      ctaButton.addEventListener('click', (e) => {
+        this._triggerCallback('ctaClick', e);
+      });
 
-  /**
-   * Render to another Jux component's container
-   */
-  renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Hero.renderTo: Invalid component - not an object');
+      contentContainer.appendChild(ctaButton);
     }
 
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Hero.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
+    hero.appendChild(contentContainer);
 
-    return this.render(`#${juxComponent._id}`);
+    this._wireStandardEvents(hero);
+
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'title') {
+        const transform = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          const titleEl = document.getElementById(`${this._id}-title`);
+          if (titleEl) {
+            titleEl.textContent = transformed;
+          }
+          this.state.title = transformed;
+        });
+      }
+      else if (property === 'subtitle') {
+        const transform = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          const subtitleEl = document.getElementById(`${this._id}-subtitle`);
+          if (subtitleEl) {
+            subtitleEl.textContent = transformed;
+          }
+          this.state.subtitle = transformed;
+        });
+      }
+      else if (property === 'content') {
+        const transform = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          const contentEl = hero.querySelector('.jux-hero-body');
+          if (contentEl) {
+            contentEl.innerHTML = transformed;
+          }
+          this.state.content = transformed;
+        });
+      }
+    });
+
+    container.appendChild(hero);
+    return this;
   }
 }
 
-/**
- * Factory helper
- */
 export function hero(id: string, options: HeroOptions = {}): Hero {
   return new Hero(id, options);
 }