juxscript 1.1.239 → 1.1.243

package/lib/components/hero.ts

@@ -1,302 +0,0 @@
-import { BaseComponent, BaseState } 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;
-
-export interface HeroOptions {
-  title?: string;
-  subtitle?: string;
-  content?: string;
-  cta?: string;
-  ctaLink?: string;
-  backgroundImage?: string | { url: string; size?: string; repeat?: string };
-  backgroundOverlay?: boolean;
-  variant?: 'default' | 'centered' | 'split';
-  centered?: boolean;
-  style?: string;
-  class?: string;
-}
-
-type HeroState = BaseState & {
-  title: string;
-  subtitle: string;
-  content: string;
-  cta: string;
-  ctaLink: string;
-  backgroundImage: { url: string; size: string; repeat: string };
-  backgroundOverlay: boolean;
-  variant: string;
-  centered: boolean;
-};
-
-export class Hero extends BaseComponent<HeroState> {
-  constructor(id: string, options: HeroOptions = {}) {
-    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 ?? '',
-      cta: options.cta ?? '',
-      ctaLink: options.ctaLink ?? '#',
-      backgroundImage: { url: bgImage.url, size: bgImage.size || 'cover', repeat: bgImage.repeat || 'no-repeat' },
-      backgroundOverlay: options.backgroundOverlay ?? false,
-      variant: options.variant ?? 'default',
-      centered: options.centered ?? false,
-      style: options.style ?? '',
-      class: options.class ?? ''
-    });
-  }
-
-  protected getTriggerEvents(): readonly string[] {
-    return TRIGGER_EVENTS;
-  }
-
-  protected getCallbackEvents(): readonly string[] {
-    return CALLBACK_EVENTS;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * REACTIVE DOM UPDATES
-   * ═════════════════════════════════════════════════════════════════ */
-
-  /**
-   * Called automatically by BaseComponent when state changes.
-   * Centralizes DOM manipulation so setters don't have to drill/repeat logic.
-   */
-  update(prop: string, value: any): void {
-    super.update(prop, value); // Handle base properties
-
-    const hero = document.getElementById(this._id);
-    if (!hero) return;
-
-    const contentContainer = hero.querySelector('.jux-hero-content');
-    if (!contentContainer) return;
-
-    switch (prop) {
-      case 'title':
-        let titleEl = document.getElementById(`${this._id}-title`);
-        if (!titleEl) {
-          // ✅ Create title element if it doesn't exist
-          titleEl = document.createElement('h1');
-          titleEl.className = 'jux-hero-title';
-          titleEl.id = `${this._id}-title`;
-          contentContainer.insertBefore(titleEl, contentContainer.firstChild);
-        }
-        titleEl.textContent = value;
-        break;
-
-      case 'subtitle':
-        let subtitleEl = document.getElementById(`${this._id}-subtitle`);
-        if (!subtitleEl) {
-          // ✅ Create subtitle element if it doesn't exist
-          subtitleEl = document.createElement('p');
-          subtitleEl.className = 'jux-hero-subtitle';
-          subtitleEl.id = `${this._id}-subtitle`;
-
-          // Insert after title if exists, otherwise at start
-          const titleEl = document.getElementById(`${this._id}-title`);
-          if (titleEl) {
-            titleEl.after(subtitleEl);
-          } else {
-            contentContainer.insertBefore(subtitleEl, contentContainer.firstChild);
-          }
-        }
-        subtitleEl.textContent = value;
-        break;
-
-      case 'content':
-        let contentEl = hero.querySelector('.jux-hero-body');
-        if (!contentEl) {
-          // ✅ Create content element if it doesn't exist
-          contentEl = document.createElement('div');
-          contentEl.className = 'jux-hero-body';
-
-          // Insert after subtitle if exists, otherwise after title, otherwise at start
-          const subtitleEl = document.getElementById(`${this._id}-subtitle`);
-          const titleEl = document.getElementById(`${this._id}-title`);
-          if (subtitleEl) {
-            subtitleEl.after(contentEl);
-          } else if (titleEl) {
-            titleEl.after(contentEl);
-          } else {
-            contentContainer.insertBefore(contentEl, contentContainer.firstChild);
-          }
-        }
-        contentEl.innerHTML = value;
-        break;
-
-      case 'cta':
-        let ctaEl = hero.querySelector('.jux-hero-cta') as HTMLAnchorElement;
-        if (!ctaEl) {
-          // ✅ Create CTA element if it doesn't exist
-          ctaEl = document.createElement('a');
-          ctaEl.className = 'jux-hero-cta';
-          ctaEl.href = this.state.ctaLink;
-
-          ctaEl.addEventListener('click', (e) => {
-            this._triggerCallback('ctaClick', e);
-          });
-
-          contentContainer.appendChild(ctaEl);
-        }
-        ctaEl.textContent = value;
-        break;
-
-      case 'ctaLink':
-        const ctaLinkEl = hero.querySelector('.jux-hero-cta') as HTMLAnchorElement;
-        if (ctaLinkEl) ctaLinkEl.href = value;
-        break;
-
-      case 'backgroundImage':
-        hero.style.backgroundImage = `url(${value.url})`;
-        hero.style.backgroundSize = value.size;
-        hero.style.backgroundRepeat = value.repeat;
-        break;
-
-      case 'centered':
-        hero.classList.toggle('jux-hero-centered', value);
-        break;
-    }
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * FLUENT API (Simplified - just updates state)
-   * ═════════════════════════════════════════════════════════════════ */
-
-  title(value: string): this {
-    this.state.title = value; // Triggers update('title', value) via Proxy
-    return this;
-  }
-
-  subtitle(value: string): this {
-    this.state.subtitle = value;
-    return this;
-  }
-
-  content(value: string): this {
-    this.state.content = value;
-    return this;
-  }
-
-  cta(value: string): this {
-    this.state.cta = value;
-    return this;
-  }
-
-  ctaLink(value: string): this {
-    this.state.ctaLink = value;
-    return this;
-  }
-
-  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;
-  }
-
-  backgroundOverlay(value: boolean): this {
-    this.state.backgroundOverlay = value;
-    return this;
-  }
-
-  variant(value: string): this {
-    this.state.variant = value;
-    return this;
-  }
-
-  centered(value: boolean): this {
-    this.state.centered = value;
-    return this;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * RENDER
-   * ═════════════════════════════════════════════════════════════════ */
-
-  render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-    const container = this._setupContainer(targetId);
-
-    const { title, subtitle, content, backgroundImage, backgroundOverlay, centered, style, class: className } = this.state;
-
-    const hero = document.createElement('section');
-    hero.className = 'jux-hero';
-    hero.id = this._id;
-    if (centered) hero.classList.add('jux-hero-centered');
-    if (className) hero.className += ` ${className}`;
-    if (style) hero.setAttribute('style', style);
-
-    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';
-        hero.appendChild(overlay);
-      }
-    }
-
-    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;
-      contentContainer.appendChild(titleEl);
-    }
-
-    if (subtitle) {
-      const subtitleEl = document.createElement('p');
-      subtitleEl.className = 'jux-hero-subtitle';
-      subtitleEl.id = `${this._id}-subtitle`;
-      subtitleEl.textContent = subtitle;
-      contentContainer.appendChild(subtitleEl);
-    }
-
-    if (content) {
-      const contentEl = document.createElement('div');
-      contentEl.className = 'jux-hero-body';
-      contentEl.innerHTML = content;
-      contentContainer.appendChild(contentEl);
-    }
-
-    if (this.state.cta) {
-      const ctaButton = document.createElement('a');
-      ctaButton.className = 'jux-hero-cta';
-      ctaButton.href = this.state.ctaLink;
-      ctaButton.textContent = this.state.cta;
-
-      ctaButton.addEventListener('click', (e) => {
-        this._triggerCallback('ctaClick', e);
-      });
-
-      contentContainer.appendChild(ctaButton);
-    }
-
-    hero.appendChild(contentContainer);
-
-    this._wireStandardEvents(hero);
-    this._wireAllSyncs();
-
-    container.appendChild(hero);
-    return this;
-  }
-}
-
-export function hero(id: string, options: HeroOptions = {}): Hero {
-  return new Hero(id, options);
-}
-

package/lib/components/history/StateHistory.d.ts

@@ -1,91 +0,0 @@
-/**
- * State History Tracker
- * Tracks all state mutations for time-travel debugging and undo/redo
- */
-export interface StateSnapshot<T = any> {
-    timestamp: number;
-    componentId: string;
-    property: string;
-    oldValue: T;
-    newValue: T;
-    stackTrace?: string;
-}
-export interface EventSnapshot {
-    timestamp: number;
-    componentId: string;
-    eventType: 'bind' | 'sync' | 'callback' | 'trigger';
-    eventName: string;
-    details: Record<string, any>;
-}
-export declare class StateHistory {
-    private stateSnapshots;
-    private eventSnapshots;
-    private maxHistory;
-    private currentIndex;
-    private isReplaying;
-    /**
-     * Record a state change
-     */
-    recordStateChange<T>(componentId: string, property: string, oldValue: T, newValue: T): void;
-    /**
-     * Record an event (bind, sync, callback, trigger)
-     */
-    recordEvent(componentId: string, eventType: 'bind' | 'sync' | 'callback' | 'trigger', eventName: string, details?: Record<string, any>): void;
-    /**
-     * Get timeline of all changes and events
-     */
-    getTimeline(): Array<StateSnapshot | EventSnapshot>;
-    /**
-     * Get state snapshots for a specific component
-     */
-    getComponentHistory(componentId: string): StateSnapshot[];
-    /**
-     * Get event snapshots for a specific component
-     */
-    getComponentEvents(componentId: string): EventSnapshot[];
-    /**
-     * Check if we can roll back
-     */
-    canRollback(): boolean;
-    /**
-     * Check if we can roll forward
-     */
-    canRollforward(): boolean;
-    /**
-     * Get the current snapshot (for rollback)
-     */
-    getCurrentSnapshot(): StateSnapshot | null;
-    /**
-     * Move index for rollback
-     */
-    moveBack(): StateSnapshot | null;
-    /**
-     * Move index for rollforward
-     */
-    moveForward(): StateSnapshot | null;
-    /**
-     * Mark as replaying to prevent recursive recording
-     */
-    startReplay(): void;
-    /**
-     * End replay mode
-     */
-    endReplay(): void;
-    /**
-     * Clear all history
-     */
-    clear(): void;
-    /**
-     * Get summary statistics
-     */
-    getStats(): {
-        totalStateChanges: number;
-        totalEvents: number;
-        currentIndex: number;
-        canRollback: boolean;
-        canRollforward: boolean;
-        components: number;
-    };
-}
-export declare const stateHistory: StateHistory;
-//# sourceMappingURL=StateHistory.d.ts.map

package/lib/components/history/StateHistory.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StateHistory.d.ts","sourceRoot":"","sources":["StateHistory.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,GAAG;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,CAAC,CAAC;IACZ,QAAQ,EAAE,CAAC,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,aAAa;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;IACpD,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC;AAED,qBAAa,YAAY;IACrB,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,UAAU,CAAe;IACjC,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,WAAW,CAAkB;IAErC;;OAEG;IACH,iBAAiB,CAAC,CAAC,EACf,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,CAAC,GACZ,IAAI;IA2BP;;OAEG;IACH,WAAW,CACP,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,EACnD,SAAS,EAAE,MAAM,EACjB,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,GAClC,IAAI;IAiBP;;OAEG;IACH,WAAW,IAAI,KAAK,CAAC,aAAa,GAAG,aAAa,CAAC;IAKnD;;OAEG;IACH,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,aAAa,EAAE;IAIzD;;OAEG;IACH,kBAAkB,CAAC,WAAW,EAAE,MAAM,GAAG,aAAa,EAAE;IAIxD;;OAEG;IACH,WAAW,IAAI,OAAO;IAItB;;OAEG;IACH,cAAc,IAAI,OAAO;IAIzB;;OAEG;IACH,kBAAkB,IAAI,aAAa,GAAG,IAAI;IAO1C;;OAEG;IACH,QAAQ,IAAI,aAAa,GAAG,IAAI;IAQhC;;OAEG;IACH,WAAW,IAAI,aAAa,GAAG,IAAI;IAQnC;;OAEG;IACH,WAAW,IAAI,IAAI;IAInB;;OAEG;IACH,SAAS,IAAI,IAAI;IAIjB;;OAEG;IACH,KAAK,IAAI,IAAI;IAMb;;OAEG;IACH,QAAQ;;;;;;;;CAaX;AAGD,eAAO,MAAM,YAAY,cAAqB,CAAC"}

package/lib/components/history/StateHistory.js

@@ -1,154 +0,0 @@
-/**
- * State History Tracker
- * Tracks all state mutations for time-travel debugging and undo/redo
- */
-export class StateHistory {
-    constructor() {
-        this.stateSnapshots = [];
-        this.eventSnapshots = [];
-        this.maxHistory = 100;
-        this.currentIndex = -1;
-        this.isReplaying = false;
-    }
-    /**
-     * Record a state change
-     */
-    recordStateChange(componentId, property, oldValue, newValue) {
-        if (this.isReplaying)
-            return; // Don't record during replay
-        const snapshot = {
-            timestamp: Date.now(),
-            componentId,
-            property,
-            oldValue,
-            newValue,
-            stackTrace: new Error().stack
-        };
-        // Trim future history if we're not at the end
-        if (this.currentIndex < this.stateSnapshots.length - 1) {
-            this.stateSnapshots = this.stateSnapshots.slice(0, this.currentIndex + 1);
-        }
-        this.stateSnapshots.push(snapshot);
-        this.currentIndex = this.stateSnapshots.length - 1;
-        // Trim if exceeds max
-        if (this.stateSnapshots.length > this.maxHistory) {
-            this.stateSnapshots.shift();
-            this.currentIndex--;
-        }
-    }
-    /**
-     * Record an event (bind, sync, callback, trigger)
-     */
-    recordEvent(componentId, eventType, eventName, details = {}) {
-        const snapshot = {
-            timestamp: Date.now(),
-            componentId,
-            eventType,
-            eventName,
-            details
-        };
-        this.eventSnapshots.push(snapshot);
-        // Trim if exceeds max
-        if (this.eventSnapshots.length > this.maxHistory) {
-            this.eventSnapshots.shift();
-        }
-    }
-    /**
-     * Get timeline of all changes and events
-     */
-    getTimeline() {
-        return [...this.stateSnapshots, ...this.eventSnapshots]
-            .sort((a, b) => a.timestamp - b.timestamp);
-    }
-    /**
-     * Get state snapshots for a specific component
-     */
-    getComponentHistory(componentId) {
-        return this.stateSnapshots.filter(s => s.componentId === componentId);
-    }
-    /**
-     * Get event snapshots for a specific component
-     */
-    getComponentEvents(componentId) {
-        return this.eventSnapshots.filter(s => s.componentId === componentId);
-    }
-    /**
-     * Check if we can roll back
-     */
-    canRollback() {
-        return this.currentIndex > 0;
-    }
-    /**
-     * Check if we can roll forward
-     */
-    canRollforward() {
-        return this.currentIndex < this.stateSnapshots.length - 1;
-    }
-    /**
-     * Get the current snapshot (for rollback)
-     */
-    getCurrentSnapshot() {
-        if (this.currentIndex >= 0 && this.currentIndex < this.stateSnapshots.length) {
-            return this.stateSnapshots[this.currentIndex];
-        }
-        return null;
-    }
-    /**
-     * Move index for rollback
-     */
-    moveBack() {
-        if (this.canRollback()) {
-            this.currentIndex--;
-            return this.stateSnapshots[this.currentIndex];
-        }
-        return null;
-    }
-    /**
-     * Move index for rollforward
-     */
-    moveForward() {
-        if (this.canRollforward()) {
-            this.currentIndex++;
-            return this.stateSnapshots[this.currentIndex];
-        }
-        return null;
-    }
-    /**
-     * Mark as replaying to prevent recursive recording
-     */
-    startReplay() {
-        this.isReplaying = true;
-    }
-    /**
-     * End replay mode
-     */
-    endReplay() {
-        this.isReplaying = false;
-    }
-    /**
-     * Clear all history
-     */
-    clear() {
-        this.stateSnapshots = [];
-        this.eventSnapshots = [];
-        this.currentIndex = -1;
-    }
-    /**
-     * Get summary statistics
-     */
-    getStats() {
-        return {
-            totalStateChanges: this.stateSnapshots.length,
-            totalEvents: this.eventSnapshots.length,
-            currentIndex: this.currentIndex,
-            canRollback: this.canRollback(),
-            canRollforward: this.canRollforward(),
-            components: new Set([
-                ...this.stateSnapshots.map(s => s.componentId),
-                ...this.eventSnapshots.map(s => s.componentId)
-            ]).size
-        };
-    }
-}
-// Global singleton
-export const stateHistory = new StateHistory();