juxscript 1.0.20 → 1.0.21

package/lib/components/footer.ts

@@ -1,165 +0,0 @@
-import { getOrCreateContainer } from './helpers.js';
-
-/**
- * Footer component options
- */
-export interface FooterOptions {
-  content?: string;
-  copyright?: string;
-  links?: Array<{ label: string; href: string }>;
-  class?: string;
-  style?: string;
-}
-
-/**
- * Footer component state
- */
-type FooterState = {
-  content: string;
-  copyright: string;
-  links: Array<{ label: string; href: string }>;
-  class: string;
-  style: string;
-};
-
-/**
- * Footer component
- *
- * Usage:
- *   const footer = jux.footer('myFooter', {
- *     copyright: '© 2025 My Company',
- *     links: [
- *       { label: 'Privacy', href: '/privacy' },
- *       { label: 'Terms', href: '/terms' }
- *     ]
- *   });
- *   footer.render('#appfooter');
- */
-export class Footer {
-  state: FooterState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
-
-  constructor(id: string, options: FooterOptions = {}) {
-    this._id = id;
-    this.id = id;
-
-    this.state = {
-      content: options.content ?? '',
-      copyright: options.copyright ?? '',
-      links: options.links ?? [],
-      class: options.class ?? '',
-      style: options.style ?? ''
-    };
-  }
-
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
-
-  content(value: string): this {
-    this.state.content = value;
-    return this;
-  }
-
-  copyright(value: string): this {
-    this.state.copyright = value;
-    return this;
-  }
-
-  links(value: Array<{ label: string; href: string }>): this {
-    this.state.links = value;
-    return this;
-  }
-
-  class(value: string): this {
-    this.state.class = value;
-    return this;
-  }
-
-  style(value: string): this {
-    this.state.style = value;
-    return this;
-  }
-
-  /* -------------------------
-   * Render
-   * ------------------------- */
-
-  render(targetId?: string): this {
-    let container: HTMLElement;
-
-    if (targetId) {
-      const target = document.querySelector(targetId);
-      if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`Footer: Target element "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
-
-    this.container = container;
-    const { content, copyright, links, class: className, style } = this.state;
-
-    const footer = document.createElement('footer');
-    footer.className = `jux-footer ${className}`.trim();
-    footer.style.cssText = style;
-    footer.id = this._id;
-
-    if (content) {
-      const contentEl = document.createElement('div');
-      contentEl.className = 'jux-footer-content';
-      contentEl.textContent = content;
-      footer.appendChild(contentEl);
-    }
-
-    if (links.length > 0) {
-      const linksEl = document.createElement('div');
-      linksEl.className = 'jux-footer-links';
-
-      links.forEach(link => {
-        const linkEl = document.createElement('a');
-        linkEl.className = 'jux-footer-link';
-        linkEl.href = link.href;
-        linkEl.textContent = link.label;
-        linksEl.appendChild(linkEl);
-      });
-
-      footer.appendChild(linksEl);
-    }
-
-    if (copyright) {
-      const copyrightEl = document.createElement('div');
-      copyrightEl.className = 'jux-footer-copyright';
-      copyrightEl.textContent = copyright;
-      footer.appendChild(copyrightEl);
-    }
-
-    container.appendChild(footer);
-    return this;
-  }
-
-  /**
-   * Render to another Jux component's container
-   */
-  renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Footer.renderTo: Invalid component - not an object');
-    }
-
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Footer.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
-
-    return this.render(`#${juxComponent._id}`);
-  }
-}
-
-/**
- * Factory helper
- */
-export function footer(id: string, options: FooterOptions = {}): Footer {
-  return new Footer(id, options);
-}

package/lib/components/header.ts

@@ -1,187 +0,0 @@
-import { getOrCreateContainer } from './helpers.js';
-
-/**
- * Header component options
- */
-export interface HeaderOptions {
-  title?: string;
-  logo?: string;
-  navigation?: Array<{ label: string; href: string }>;
-  sticky?: boolean;
-  style?: string;
-  class?: string;
-}
-
-/**
- * Header component state
- */
-type HeaderState = {
-  title: string;
-  logo: string;
-  navigation: Array<{ label: string; href: string }>;
-  sticky: boolean;
-  style: string;
-  class: string;
-};
-
-/**
- * Header component
- * 
- * Usage:
- *   const header = jux.header('myHeader', {
- *     title: 'My App',
- *     navigation: [
- *       { label: 'Home', href: '/' },
- *       { label: 'About', href: '/about' }
- *     ]
- *   });
- *   header.render('#appheader');
- */
-export class Header {
-  state: HeaderState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
-
-  constructor(id: string, options: HeaderOptions = {}) {
-    this._id = id;
-    this.id = id;
-
-    this.state = {
-      title: options.title ?? '',
-      logo: options.logo ?? '',
-      navigation: options.navigation ?? [],
-      sticky: options.sticky ?? true,
-      style: options.style ?? '',
-      class: options.class ?? ''
-    };
-  }
-
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
-
-  title(value: string): this {
-    this.state.title = value;
-    return this;
-  }
-
-  logo(value: string): this {
-    this.state.logo = value;
-    return this;
-  }
-
-  navigation(value: Array<{ label: string; href: string }>): this {
-    this.state.navigation = value;
-    return this;
-  }
-
-  sticky(value: boolean): this {
-    this.state.sticky = value;
-    return this;
-  }
-
-  class(value: string): this {
-    this.state.class = value;
-    return this;
-  }
-
-  style(value: string): this {
-    this.state.style = value;
-    return this;
-  }
-  /* -------------------------
-   * Render
-   * ------------------------- */
-
-  render(targetId?: string): this {
-    let container: HTMLElement;
-
-    if (targetId) {
-      const target = document.querySelector(targetId);
-      if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`Header: Target element "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
-
-    this.container = container;
-    const { title, logo, navigation, sticky, style, class: className } = this.state;
-
-    const header = document.createElement('header');
-    header.className = 'jux-header';
-
-    header.id = this._id;
-    header.style.cssText = style;
-    header.className = `jux-header ${className}`.trim();
-
-    if (sticky) {
-      header.classList.add('jux-header-sticky');
-    }
-
-    // Logo section
-    if (logo || title) {
-      const logoSection = document.createElement('div');
-      logoSection.className = 'jux-header-logo';
-
-      if (logo) {
-        const logoImg = document.createElement('img');
-        logoImg.src = logo;
-        logoImg.alt = title || 'Logo';
-        logoSection.appendChild(logoImg);
-      }
-
-      if (title) {
-        const titleEl = document.createElement('span');
-        titleEl.className = 'jux-header-title';
-        titleEl.textContent = title;
-        logoSection.appendChild(titleEl);
-      }
-
-      header.appendChild(logoSection);
-    }
-
-    // Navigation
-    if (navigation.length > 0) {
-      const nav = document.createElement('nav');
-      nav.className = 'jux-header-nav';
-
-      navigation.forEach(item => {
-        const link = document.createElement('a');
-        link.className = 'jux-header-nav-item';
-        link.href = item.href;
-        link.textContent = item.label;
-        nav.appendChild(link);
-      });
-
-      header.appendChild(nav);
-    }
-
-    container.appendChild(header);
-    return this;
-  }
-
-  /**
-   * Render to another Jux component's container
-   */
-  renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Header.renderTo: Invalid component - not an object');
-    }
-
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Header.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
-
-    return this.render(`#${juxComponent._id}`);
-  }
-}
-
-/**
- * Factory helper
- */
-export function header(id: string, options: HeaderOptions = {}): Header {
-  return new Header(id, options);
-}

package/lib/components/layout.ts

@@ -1,239 +0,0 @@
-import { ErrorHandler } from './error-handler.js';
-
-/**
- * Layout component interface
- * Represents any Jux component that can be rendered
- */
-interface LayoutComponent {
-  render: (target?: string) => any;
-  _componentId?: string;
-  _id?: string;
-}
-
-/**
- * Layout - Compose and render multiple components
- * 
- * Usage:
- *   // As a composition function
- *   jux.layout(
- *     jux.include('/lib/presets/notion/notion.css'),
- *     jux.header('appheader').render('#app'),
- *     jux.sidebar('appsidebar').render('#app'),
- *     jux.main('appmain').render('#app')
- *   );
- *   
- *   // Or load from a .jux file
- *   jux.layout('/lib/presets/notion/main.jux');
- */
-export class Layout {
-  private _juxFile: string;
-  private _loaded: boolean = false;
-  private _components: any[] = [];
-
-  constructor(...args: any[]) {
-    // If first arg is string, it's a file path
-    if (args.length === 1 && typeof args[0] === 'string' && args[0].endsWith('.jux')) {
-      this._juxFile = args[0];
-      this.load();
-    } else {
-      // Otherwise, it's a list of components to compose
-      this._juxFile = '';
-      this._components = args;
-      this._compose();
-    }
-  }
-
-  /**
-   * Set the JUX file to load
-   */
-  file(juxFile: string): this {
-    this._juxFile = juxFile;
-    this._loaded = false;
-    this.load();
-    return this;
-  }
-
-  /**
-   * Get the current JUX file path
-   */
-  getFile(): string {
-    return this._juxFile;
-  }
-
-  /**
-   * Compose components immediately
-   * This handles the case where components are passed directly
-   */
-  private _compose(): this {
-    try {
-      // Components are already rendered via chaining
-      // This just ensures they're tracked
-      this._components.forEach((component, index) => {
-        // Components that return themselves from .render() are already in DOM
-        // Just log for debugging
-        if (component && typeof component === 'object') {
-          const id = component._componentId || component._id || component.id || `component-${index}`;
-          console.log(`✓ Layout component composed: ${id}`);
-        }
-      });
-
-      this._loaded = true;
-    } catch (error: any) {
-      ErrorHandler.captureError({
-        component: 'Layout',
-        method: '_compose',
-        message: `Failed to compose layout: ${error.message}`,
-        stack: error.stack,
-        timestamp: new Date(),
-        context: {
-          componentCount: this._components.length,
-          error: 'composition_failed'
-        }
-      });
-    }
-
-    return this;
-  }
-
-  /**
-   * Normalize path to absolute URL from site root
-   */
-  private normalizePath(path: string): string {
-    // If already a full URL, return as-is
-    if (path.startsWith('http://') || path.startsWith('https://')) {
-      return path;
-    }
-
-    // Convert relative path to absolute
-    // Remove leading './' if present
-    let cleanPath = path.replace(/^\.\//, '');
-
-    // Ensure it starts with /
-    if (!cleanPath.startsWith('/')) {
-      cleanPath = '/' + cleanPath;
-    }
-
-    // Return absolute URL with origin
-    return new URL(cleanPath, window.location.origin).href;
-  }
-
-  /**
-   * Load the layout from a .jux file
-   * This will dynamically import the compiled JS file
-   */
-  async load(): Promise<this> {
-    if (typeof document === 'undefined') {
-      return this;
-    }
-
-    if (!this._juxFile) {
-      console.warn('Layout: No file specified to load');
-      return this;
-    }
-
-    try {
-      // Convert .jux to .js for the compiled output
-      let jsFile = this._juxFile.replace(/\.jux$/, '.js');
-
-      // Normalize to absolute URL for browser import
-      jsFile = this.normalizePath(jsFile);
-
-      console.log(`Loading layout: ${jsFile}`);
-
-      // Dynamic import of the layout module
-      const layoutModule = await import(jsFile);
-
-      // If the module has an init or default export, call it
-      if (typeof layoutModule.default === 'function') {
-        await layoutModule.default();
-      } else if (typeof layoutModule.init === 'function') {
-        await layoutModule.init();
-      } else if (layoutModule.default && typeof layoutModule.default === 'object') {
-        // If default export is the layout object itself
-        console.log('✓ Layout module loaded (object export)');
-      }
-
-      this._loaded = true;
-      console.log(`✓ Layout loaded: ${this._juxFile}`);
-    } catch (error: any) {
-      ErrorHandler.captureError({
-        component: 'Layout',
-        method: 'load',
-        message: `Failed to load layout: ${error.message}`,
-        stack: error.stack,
-        timestamp: new Date(),
-        context: {
-          juxFile: this._juxFile,
-          jsFile: this._juxFile.replace(/\.jux$/, '.js'),
-          errorCode: error.code
-        }
-      });
-    }
-
-    return this;
-  }
-
-  /**
-   * Check if layout is loaded
-   */
-  isLoaded(): boolean {
-    return this._loaded;
-  }
-
-  /**
-   * Get all composed components
-   */
-  getComponents(): any[] {
-    return this._components;
-  }
-
-  /**
-   * Add a component to the layout
-   */
-  add(component: any): this {
-    this._components.push(component);
-    return this;
-  }
-
-  /**
-   * Render all components
-   * Useful if components weren't already rendered
-   */
-  render(target?: string): this {
-    this._components.forEach((component) => {
-      if (component && typeof component.render === 'function') {
-        try {
-          component.render(target);
-        } catch (error: any) {
-          ErrorHandler.captureError({
-            component: 'Layout',
-            method: 'render',
-            message: `Failed to render component: ${error.message}`,
-            stack: error.stack,
-            timestamp: new Date(),
-            context: {
-              componentId: component._componentId || component._id || 'unknown',
-              target
-            }
-          });
-        }
-      }
-    });
-
-    return this;
-  }
-}
-
-/**
- * Factory helper
- * Accepts either:
- *   - A file path: layout('/lib/presets/notion/main.jux')
- *   - A list of components: layout(header, sidebar, main)
- */
-export function layout(...args: any[]): Layout {
-  return new Layout(...args);
-}
-
-/* -------------------------
- * Module Exports
- * ------------------------- */

package/lib/components/main.ts

@@ -1,137 +0,0 @@
-import { getOrCreateContainer } from './helpers.js';
-
-/**
- * Main component options
- */
-export interface MainOptions {
-  content?: string;
-  padding?: string;
-  style?: string;
-  class?: string;
-}
-
-/**
- * Main component state
- */
-type MainState = {
-  content: string;
-  padding: string;
-  style: string;
-  class: string;
-};
-
-/**
- * Main component - represents the main content area
- *
- * Usage:
- *   const main = jux.main('myMain', {
- *     content: 'Main content here',
- *     padding: '2rem'
- *   });
- *   main.render('#appmain');
- */
-export class Main {
-  state: MainState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
-
-  constructor(id: string, options: MainOptions = {}) {
-    this._id = id;
-    this.id = id;
-
-    this.state = {
-      content: options.content ?? '',
-      padding: options.padding ?? 'var(--space-xl)',
-      style: options.style ?? '',
-      class: options.class ?? ''
-    };
-  }
-
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
-
-  content(value: string): this {
-    this.state.content = value;
-    return this;
-  }
-
-  padding(value: string): this {
-    this.state.padding = value;
-    return this;
-  }
-
-  style(value: string): this {
-    this.state.style = value;
-    return this;
-  }
-
-  class(value: string): this {
-    this.state.class = value;
-    return this;
-  }
-
-  /* -------------------------
-   * Render
-   * ------------------------- */
-
-  render(targetId?: string): this {
-    let container: HTMLElement;
-
-    if (targetId) {
-      const target = document.querySelector(targetId);
-      if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`Main: Target element "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
-
-    this.container = container;
-    const { content, padding, style, class: className } = this.state;
-
-    const main = document.createElement('main');
-    main.className = 'jux-main';
-    main.id = this._id;
-    main.style.padding = padding;
-
-    if (style) {
-      main.setAttribute('style', style);
-    }
-
-    if (className) {
-      main.className += ` ${className}`;
-    }
-
-    if (content) {
-      main.innerHTML = content;
-    }
-
-    container.appendChild(main);
-    return this;
-  }
-
-  /**
-   * Render to another Jux component's container
-   */
-  renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Main.renderTo: Invalid component - not an object');
-    }
-
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Main.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
-
-    return this.render(`#${juxComponent._id}`);
-  }
-}
-
-/**
- * Factory helper
- */
-export function main(id: string, options: MainOptions = {}): Main {
-  return new Main(id, options);
-}