juxscript 1.0.131 → 1.1.0

package/lib/components/alert.ts

@@ -0,0 +1,200 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['dismiss'] as const;
+
+export interface AlertOptions {
+    content?: string;
+    type?: 'info' | 'success' | 'warning' | 'error';
+    dismissible?: boolean;
+    icon?: string;
+    style?: string;
+    class?: string;
+}
+
+type AlertState = {
+    content: string;
+    type: string;
+    dismissible: boolean;
+    icon: string;
+    visible: boolean;
+    style: string;
+    class: string;
+};
+
+export class Alert extends BaseComponent<AlertState> {
+    private _alert: HTMLElement | null = null;
+
+    constructor(id: string, options: AlertOptions = {}) {
+        super(id, {
+            content: options.content ?? '',
+            type: options.type ?? 'info',
+            dismissible: options.dismissible ?? true,
+            icon: options.icon ?? '',
+            visible: true,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    // ✅ Inherited from BaseComponent:
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - addClass(), removeClass(), toggleClass()
+    // - visible(), show(), hide(), toggleVisibility()
+    // - attr(), attrs(), removeAttr()
+    // - disabled(), enable(), disable()
+    // - loading(), focus(), blur(), remove()
+
+    content(value: string): this {
+        this.state.content = value;
+        return this;
+    }
+
+    type(value: 'info' | 'success' | 'warning' | 'error'): this {
+        this.state.type = value;
+        return this;
+    }
+
+    dismissible(value: boolean): this {
+        this.state.dismissible = value;
+        return this;
+    }
+
+    icon(value: string): this {
+        this.state.icon = value;
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        const { content, type, dismissible, icon, style, class: className } = this.state;
+        const hasVisibleSync = this._syncBindings.some(b => b.property === 'visible');
+
+        // Build alert element
+        const alert = document.createElement('div');
+        alert.className = `jux-alert jux-alert-${type}`;
+        alert.id = this._id;
+        if (className) alert.className += ` ${className}`;
+        if (style) alert.setAttribute('style', style);
+
+        if (icon) {
+            const iconEl = document.createElement('span');
+            iconEl.className = 'jux-alert-icon';
+            iconEl.appendChild(renderIcon(icon));
+            alert.appendChild(iconEl);
+        }
+
+        const contentEl = document.createElement('div');
+        contentEl.className = 'jux-alert-content';
+        contentEl.textContent = content;
+        alert.appendChild(contentEl);
+
+        if (dismissible) {
+            const closeBtn = document.createElement('button');
+            closeBtn.className = 'jux-alert-close';
+            closeBtn.innerHTML = '×';
+            alert.appendChild(closeBtn);
+        }
+
+        // Default dismiss behavior (only if NOT using sync)
+        if (!hasVisibleSync && dismissible) {
+            const closeBtn = alert.querySelector('.jux-alert-close');
+            closeBtn?.addEventListener('click', () => {
+                // 🎯 Fire the dismiss callback event
+                this._triggerCallback('dismiss');
+                alert.remove();
+            });
+        }
+
+        // Wire events using inherited method
+        this._wireStandardEvents(alert);
+
+        // Wire sync bindings
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'content') {
+                const transform = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    contentEl.textContent = transformed;
+                    this.state.content = transformed;
+                });
+            }
+            else if (property === 'type') {
+                const transform = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    alert.className = `jux-alert jux-alert-${transformed}`;
+                    if (className) alert.className += ` ${className}`;
+                    this.state.type = transformed;
+                });
+            }
+            else if (property === 'visible') {
+                const transformToState = toState || ((v: any) => Boolean(v));
+                const transform = toComponent || ((v: any) => Boolean(v));
+
+                let isUpdating = false;
+
+                // State → Component
+                stateObj.subscribe((val: any) => {
+                    if (isUpdating) return;
+                    const transformed = transform(val);
+                    alert.style.display = transformed ? 'flex' : 'none';
+                });
+
+                // Component → State (close button)
+                if (dismissible) {
+                    const closeBtn = alert.querySelector('.jux-alert-close');
+                    closeBtn?.addEventListener('click', () => {
+                        if (isUpdating) return;
+                        isUpdating = true;
+
+                        alert.style.display = 'none';
+                        stateObj.set(transformToState(false));
+
+                        // 🎯 Fire the dismiss callback event
+                        this._triggerCallback('dismiss');
+
+                        setTimeout(() => { isUpdating = false; }, 0);
+                    });
+                }
+            }
+        });
+
+        container.appendChild(alert);
+        this._alert = alert;
+
+        requestAnimationFrame(() => {
+            if ((window as any).lucide) {
+                (window as any).lucide.createIcons();
+            }
+        });
+
+        return this;
+    }
+}
+
+export function alert(id: string, options: AlertOptions = {}): Alert {
+    return new Alert(id, options);
+}

package/lib/components/app.ts

@@ -0,0 +1,247 @@
+
+
+/**
+ * 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.ts

@@ -0,0 +1,101 @@
+import { BaseComponent } from './base/BaseComponent.js';
+
+// 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 = {
+    label: string;
+    variant: string;
+    pill: boolean;
+    style: string;
+    class: string;
+};
+
+export class Badge extends BaseComponent<BadgeState> {
+    constructor(id: string, options: BadgeOptions = {}) {
+        super(id, {
+            label: options.label ?? '',
+            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;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * 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): 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);
+}