juxscript 1.1.239 → 1.1.243

package/lib/components/app.ts

@@ -1,247 +0,0 @@
-
-
-/**
- * App component options
- */
-export interface AppOptions {
-  title?: string;
-  theme?: 'light' | 'dark' | 'auto';
-  favicon?: string;
-  meta?: Record<string, string>;
-  stylesheets?: string[];
-  scripts?: string[];
-  layout?: {
-    header?: boolean | string;
-    subheader?: boolean | string;
-    sidebar?: boolean | string;
-    main?: boolean | string;
-    aside?: boolean | string;
-    footer?: boolean | string;
-  };
-}
-
-/**
- * App component state
- */
-type AppState = {
-  title: string;
-  theme: string;
-  favicon: string;
-  meta: Map<string, string>;
-  stylesheets: string[];
-  scripts: string[];
-  layout: {
-    header: boolean | string;
-    subheader: boolean | string;
-    sidebar: boolean | string;
-    main: boolean | string;
-    aside: boolean | string;
-    footer: boolean | string;
-  };
-};
-
-/**
- * App - Configure application-level settings
- * Manages document metadata, theme, and global configuration
- * 
- * Usage:
- *   jux.app('myApp').setup({
- *     title: 'My App',
- *     theme: 'dark',
- *     favicon: '/favicon.ico',
- *     stylesheets: [
- *       '/lib/layouts/notion.css',
- *       '/lib/presets/light.css'
- *     ],
- *     layout: {
- *       header: true,
- *       sidebar: true,
- *       main: true,
- *       footer: true
- *     }
- *   });
- *   
- *   // Or fluent
- *   jux.app('myApp')
- *     .title('My App')
- *     .theme('dark')
- *     .addStylesheet('/presets/main.css')
- *     .render();
- */
-export class App {
-  state: AppState;
-  _componentId: string;
-  id: string;
-
-  constructor(id: string, options?: AppOptions) {
-    this._componentId = id;
-    this.id = id;
-
-    const opts = options || {};
-
-    this.state = {
-      title: opts.title ?? '',
-      theme: opts.theme ?? 'auto',
-      favicon: opts.favicon ?? '',
-      meta: new Map(Object.entries(opts.meta || {})),
-      stylesheets: opts.stylesheets || [],
-      scripts: opts.scripts || [],
-      layout: {
-        header: opts.layout?.header ?? false,
-        subheader: opts.layout?.subheader ?? false,
-        sidebar: opts.layout?.sidebar ?? false,
-        main: opts.layout?.main ?? true,
-        aside: opts.layout?.aside ?? false,
-        footer: opts.layout?.footer ?? false
-      }
-    };
-  }
-
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
-
-  title(value: string): this {
-    this.state.title = value;
-    return this;
-  }
-
-  theme(value: 'light' | 'dark' | 'auto'): this {
-    this.state.theme = value;
-    return this;
-  }
-
-  favicon(value: string): this {
-    this.state.favicon = value;
-    return this;
-  }
-
-  meta(name: string, content: string): this {
-    this.state.meta.set(name, content);
-    return this;
-  }
-
-  addStylesheet(url: string): this {
-    if (!this.state.stylesheets.includes(url)) {
-      this.state.stylesheets.push(url);
-    }
-    return this;
-  }
-
-  addScript(url: string): this {
-    if (!this.state.scripts.includes(url)) {
-      this.state.scripts.push(url);
-    }
-    return this;
-  }
-
-  /**
-   * Setup app with comprehensive configuration
-   */
-  setup(options: AppOptions): this {
-    if (options.title) this.state.title = options.title;
-    if (options.theme) this.state.theme = options.theme;
-    if (options.favicon) this.state.favicon = options.favicon;
-
-    if (options.meta) {
-      Object.entries(options.meta).forEach(([name, content]) => {
-        this.state.meta.set(name, content);
-      });
-    }
-
-    if (options.stylesheets) {
-      options.stylesheets.forEach(url => this.addStylesheet(url));
-    }
-
-    if (options.scripts) {
-      options.scripts.forEach(url => this.addScript(url));
-    }
-
-    if (options.layout) {
-      this.state.layout = { ...this.state.layout, ...options.layout };
-    }
-
-    return this;
-  }
-
-  /* -------------------------
-   * Render
-   * ------------------------- */
-
-  render(): this {
-    if (typeof document === 'undefined') return this;
-
-    try {
-      const { title, theme, favicon, meta, stylesheets, scripts } = this.state;
-
-      // Apply title
-      if (title) {
-        document.title = title;
-      }
-
-      // Apply theme
-      if (theme) {
-        document.body.setAttribute('data-theme', theme);
-        document.body.classList.remove('theme-light', 'theme-dark', 'theme-auto');
-        document.body.classList.add(`theme-${theme}`);
-      }
-
-      // Apply favicon
-      if (favicon) {
-        let link = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
-
-        if (!link) {
-          link = document.createElement('link');
-          link.rel = 'icon';
-          document.head.appendChild(link);
-        }
-
-        link.href = favicon;
-      }
-
-      // Apply meta tags
-      meta.forEach((content, name) => {
-        let metaEl = document.querySelector<HTMLMetaElement>(`meta[name="${name}"]`);
-
-        if (!metaEl) {
-          metaEl = document.createElement('meta');
-          metaEl.name = name;
-          document.head.appendChild(metaEl);
-        }
-
-        metaEl.content = content;
-      });
-
-      // Load stylesheets
-      stylesheets.forEach(url => {
-        if (!document.querySelector(`link[href="${url}"]`)) {
-          const link = document.createElement('link');
-          link.rel = 'stylesheet';
-          link.href = url;
-          document.head.appendChild(link);
-        }
-      });
-
-      // Load scripts
-      scripts.forEach(url => {
-        if (!document.querySelector(`script[src="${url}"]`)) {
-          const script = document.createElement('script');
-          script.src = url;
-          document.head.appendChild(script);
-        }
-      });
-
-    } catch (error: any) {
-      throw new Error(`App render failed: ${error.message}`);
-    }
-
-    return this;
-  }
-}
-
-/**
- * Factory helper
- */
-export function app(id: string, options?: AppOptions): App {
-  return new App(id, options);
-}

package/lib/components/badge.d.ts

@@ -1,26 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-export interface BadgeOptions {
-    label?: string;
-    variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
-    pill?: boolean;
-    style?: string;
-    class?: string;
-}
-type BadgeState = BaseState & {
-    label: string;
-    variant: string;
-    pill: boolean;
-};
-export declare class Badge extends BaseComponent<BadgeState> {
-    constructor(id: string, options?: BadgeOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    update(prop: string, value: any): void;
-    label(value: string): this;
-    variant(value: 'default' | 'success' | 'warning' | 'error' | 'info'): this;
-    pill(value: boolean): this;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-}
-export declare function badge(id: string, options?: BadgeOptions): Badge;
-export {};
-//# sourceMappingURL=badge.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAOnE,MAAM,WAAW,YAAY;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,UAAU,GAAG,SAAS,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,qBAAa,KAAM,SAAQ,aAAa,CAAC,UAAU,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IAUlD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAwBtC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI;IAK1E,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAS1B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA8BrE;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAEnE"}

package/lib/components/badge.js

@@ -1,91 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = [];
-export class Badge extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            label: options.label ?? formatIdAsLabel(id), // ✅ Auto-generate from ID
-            variant: options.variant ?? 'default',
-            pill: options.pill ?? false,
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    update(prop, value) {
-        const el = document.getElementById(this._id);
-        if (!el)
-            return;
-        // ✅ Component-specific updates
-        if (prop === 'label') {
-            el.textContent = value;
-        }
-        else if (prop === 'variant') {
-            const baseClass = 'jux-badge';
-            el.className = `${baseClass} ${baseClass}-${value}`;
-            if (this.state.pill)
-                el.classList.add('jux-badge-pill');
-            if (this.state.class)
-                el.className += ` ${this.state.class}`;
-        }
-        else if (prop === 'pill') {
-            el.classList.toggle('jux-badge-pill', value);
-        }
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    // ✅ Inherited from BaseComponent
-    label(value) {
-        this.state.label = value;
-        return this;
-    }
-    variant(value) {
-        this.state.variant = value;
-        return this;
-    }
-    pill(value) {
-        this.state.pill = value;
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { label, variant, pill, style, class: className } = this.state;
-        const badge = document.createElement('span');
-        badge.className = `jux-badge jux-badge-${variant}`;
-        if (pill)
-            badge.classList.add('jux-badge-pill');
-        badge.id = this._id;
-        if (className)
-            badge.className += ` ${className}`;
-        if (style)
-            badge.setAttribute('style', style);
-        badge.textContent = label;
-        this._wireStandardEvents(badge);
-        // Wire sync for label
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'label') {
-                const transform = toComponent || ((v) => String(v));
-                stateObj.subscribe((val) => {
-                    badge.textContent = transform(val);
-                    this.state.label = transform(val);
-                });
-            }
-        });
-        container.appendChild(badge);
-        return this;
-    }
-}
-export function badge(id, options = {}) {
-    return new Badge(id, options);
-}

package/lib/components/badge.ts

@@ -1,118 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = [] as const;
-
-export interface BadgeOptions {
-    label?: string;
-    variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
-    pill?: boolean;
-    style?: string;
-    class?: string;
-}
-
-type BadgeState = BaseState & {
-    label: string;
-    variant: string;
-    pill: boolean;
-};
-
-export class Badge extends BaseComponent<BadgeState> {
-    constructor(id: string, options: BadgeOptions = {}) {
-        super(id, {
-            label: options.label ?? formatIdAsLabel(id), // ✅ Auto-generate from ID
-            variant: options.variant ?? 'default',
-            pill: options.pill ?? false,
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    update(prop: string, value: any): void {
-
-        const el = document.getElementById(this._id);
-        if (!el) return;
-
-        // ✅ Component-specific updates
-        if (prop === 'label') {
-            el.textContent = value;
-        } else if (prop === 'variant') {
-            const baseClass = 'jux-badge';
-            el.className = `${baseClass} ${baseClass}-${value}`;
-            if (this.state.pill) el.classList.add('jux-badge-pill');
-            if (this.state.class) el.className += ` ${this.state.class}`;
-        } else if (prop === 'pill') {
-            el.classList.toggle('jux-badge-pill', value);
-        }
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    // ✅ Inherited from BaseComponent
-
-    label(value: string): this {
-        this.state.label = value;
-        return this;
-    }
-
-    variant(value: 'default' | 'success' | 'warning' | 'error' | 'info'): this {
-        this.state.variant = value;
-        return this;
-    }
-
-    pill(value: boolean): this {
-        this.state.pill = value;
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-        const container = this._setupContainer(targetId);
-
-        const { label, variant, pill, style, class: className } = this.state;
-
-        const badge = document.createElement('span');
-        badge.className = `jux-badge jux-badge-${variant}`;
-        if (pill) badge.classList.add('jux-badge-pill');
-        badge.id = this._id;
-        if (className) badge.className += ` ${className}`;
-        if (style) badge.setAttribute('style', style);
-        badge.textContent = label;
-
-        this._wireStandardEvents(badge);
-
-        // Wire sync for label
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'label') {
-                const transform = toComponent || ((v: any) => String(v));
-                stateObj.subscribe((val: any) => {
-                    badge.textContent = transform(val);
-                    this.state.label = transform(val);
-                });
-            }
-        });
-
-        container.appendChild(badge);
-
-        return this;
-    }
-}
-
-export function badge(id: string, options: BadgeOptions = {}): Badge {
-    return new Badge(id, options);
-}

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

@@ -1,36 +0,0 @@
-/**
- * Animation Modifiers Extension
- *
- * Provides animation and transition control for all components.
- * This is the ONLY feature-oriented modifier we use at this phase.
- *
- * Automatically applied to BaseComponent - all components have these methods.
- */
-import type { BaseComponent } from './BaseComponent.js';
-export interface Animations {
-    transform(value: string): this;
-    transformOrigin(value: string): this;
-    rotate(degrees: number): this;
-    rotateX(degrees: number): this;
-    rotateY(degrees: number): this;
-    rotateZ(degrees: number): this;
-    scale(value: number): this;
-    scaleX(value: number): this;
-    scaleY(value: number): this;
-    translateX(value: string): this;
-    translateY(value: string): this;
-    translate(x: string, y: string): this;
-    flipX(): this;
-    flipY(): this;
-    flipBoth(): this;
-    transition(value: string): this;
-    transitionDuration(value: string): this;
-    transitionDelay(value: string): this;
-    animation(value: string): this;
-}
-/**
- * Apply animation extensions to a component instance
- * Called automatically in BaseComponent constructor
- */
-export declare function applyAnimations<T extends BaseComponent<any>>(component: T): T & Animations;
-//# sourceMappingURL=Animations.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Animations.d.ts","sourceRoot":"","sources":["Animations.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,WAAW,UAAU;IAEvB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,KAAK,IAAI,IAAI,CAAC;IACd,KAAK,IAAI,IAAI,CAAC;IACd,QAAQ,IAAI,IAAI,CAAC;IAGjB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC;AAsCD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,aAAa,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,CAAC,GAAG,CAAC,GAAG,UAAU,CAmC1F"}

package/lib/components/base/Animations.js

@@ -1,70 +0,0 @@
-/**
- * Animation Modifiers Extension
- *
- * Provides animation and transition control for all components.
- * This is the ONLY feature-oriented modifier we use at this phase.
- *
- * Automatically applied to BaseComponent - all components have these methods.
- */
-/**
- * Helper to add inline style
- */
-function addInlineStyle(component, property, value) {
-    const currentStyle = component.state.style || '';
-    // Parse existing styles into a map
-    const styleMap = new Map();
-    currentStyle.split(';').forEach((style) => {
-        const trimmed = style.trim();
-        if (!trimmed)
-            return;
-        const colonIndex = trimmed.indexOf(':');
-        if (colonIndex === -1)
-            return;
-        const prop = trimmed.substring(0, colonIndex).trim();
-        const val = trimmed.substring(colonIndex + 1).trim();
-        if (prop && val) {
-            styleMap.set(prop, val);
-        }
-    });
-    // Update or add the new property
-    styleMap.set(property, value);
-    // Rebuild style string
-    const styles = [];
-    styleMap.forEach((val, prop) => {
-        styles.push(`${prop}: ${val}`);
-    });
-    component.state.style = styles.join('; ');
-}
-/**
- * Apply animation extensions to a component instance
- * Called automatically in BaseComponent constructor
- */
-export function applyAnimations(component) {
-    const ext = component;
-    // Transform
-    ext.transform = (v) => { addInlineStyle(component, 'transform', v); return ext; };
-    ext.transformOrigin = (v) => { addInlineStyle(component, 'transform-origin', v); return ext; };
-    // Rotation (all axes)
-    ext.rotate = (deg) => { addInlineStyle(component, 'transform', `rotate(${deg}deg)`); return ext; };
-    ext.rotateX = (deg) => { addInlineStyle(component, 'transform', `rotateX(${deg}deg)`); return ext; };
-    ext.rotateY = (deg) => { addInlineStyle(component, 'transform', `rotateY(${deg}deg)`); return ext; };
-    ext.rotateZ = (deg) => { addInlineStyle(component, 'transform', `rotateZ(${deg}deg)`); return ext; };
-    // Scale (all axes)
-    ext.scale = (v) => { addInlineStyle(component, 'transform', `scale(${v})`); return ext; };
-    ext.scaleX = (v) => { addInlineStyle(component, 'transform', `scaleX(${v})`); return ext; };
-    ext.scaleY = (v) => { addInlineStyle(component, 'transform', `scaleY(${v})`); return ext; };
-    // Translate
-    ext.translateX = (v) => { addInlineStyle(component, 'transform', `translateX(${v})`); return ext; };
-    ext.translateY = (v) => { addInlineStyle(component, 'transform', `translateY(${v})`); return ext; };
-    ext.translate = (x, y) => { addInlineStyle(component, 'transform', `translate(${x}, ${y})`); return ext; };
-    // Flip (mirror) transforms
-    ext.flipX = () => { addInlineStyle(component, 'transform', 'scaleX(-1)'); return ext; };
-    ext.flipY = () => { addInlineStyle(component, 'transform', 'scaleY(-1)'); return ext; };
-    ext.flipBoth = () => { addInlineStyle(component, 'transform', 'scale(-1, -1)'); return ext; };
-    // Transition & Animation
-    ext.transition = (v) => { addInlineStyle(component, 'transition', v); return ext; };
-    ext.transitionDuration = (v) => { addInlineStyle(component, 'transition-duration', v); return ext; };
-    ext.transitionDelay = (v) => { addInlineStyle(component, 'transition-delay', v); return ext; };
-    ext.animation = (v) => { addInlineStyle(component, 'animation', v); return ext; };
-    return ext;
-}