juxscript 1.1.4 → 1.1.6

package/lib/components/app.js

@@ -0,0 +1,175 @@
+/**
+ * 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 {
+    constructor(id, options) {
+        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) {
+        this.state.title = value;
+        return this;
+    }
+    theme(value) {
+        this.state.theme = value;
+        return this;
+    }
+    favicon(value) {
+        this.state.favicon = value;
+        return this;
+    }
+    meta(name, content) {
+        this.state.meta.set(name, content);
+        return this;
+    }
+    addStylesheet(url) {
+        if (!this.state.stylesheets.includes(url)) {
+            this.state.stylesheets.push(url);
+        }
+        return this;
+    }
+    addScript(url) {
+        if (!this.state.scripts.includes(url)) {
+            this.state.scripts.push(url);
+        }
+        return this;
+    }
+    /**
+     * Setup app with comprehensive configuration
+     */
+    setup(options) {
+        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() {
+        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('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(`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) {
+            throw new Error(`App render failed: ${error.message}`);
+        }
+        return this;
+    }
+}
+/**
+ * Factory helper
+ */
+export function app(id, options) {
+    return new App(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.d.ts

@@ -0,0 +1,27 @@
+import { BaseComponent } from './base/BaseComponent.js';
+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 declare class Badge extends BaseComponent<BadgeState> {
+    constructor(id: string, options?: BadgeOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    label(value: string): this;
+    variant(value: 'default' | 'success' | 'warning' | 'error' | 'info'): this;
+    pill(value: boolean): this;
+    render(targetId?: string): this;
+}
+export declare function badge(id: string, options?: BadgeOptions): Badge;
+export {};
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,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;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,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;IAUhD,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,IAAI;CA8BlC;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAEnE"}

package/lib/components/badge.js

@@ -0,0 +1,70 @@
+import { BaseComponent } from './base/BaseComponent.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = [];
+export class Badge extends BaseComponent {
+    constructor(id, options = {}) {
+        super(id, {
+            label: options.label ?? '',
+            variant: options.variant ?? 'default',
+            pill: options.pill ?? false,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * 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

@@ -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);
+}