juxscript 1.1.240 → 1.1.244

package/lib/components/blueprint.js

@@ -1,327 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['select', 'expand'];
-export class Blueprint extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            structureData: options.structureData ?? null,
-            classData: options.classData ?? null,
-            filter: options.filter ?? '',
-            showMethods: options.showMethods ?? true,
-            expandAll: options.expandAll ?? false,
-            theme: options.theme ?? 'auto',
-            expandedComponents: new Set(),
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    structureData(data) {
-        this.state.structureData = data;
-        return this;
-    }
-    classData(data) {
-        this.state.classData = data;
-        return this;
-    }
-    filter(value) {
-        this.state.filter = value;
-        return this;
-    }
-    showMethods(value) {
-        this.state.showMethods = value;
-        return this;
-    }
-    expandAll(value) {
-        this.state.expandAll = value;
-        return this;
-    }
-    theme(value) {
-        this.state.theme = value;
-        return this;
-    }
-    toggleComponent(componentFile) {
-        if (this.state.expandedComponents.has(componentFile)) {
-            this.state.expandedComponents.delete(componentFile);
-        }
-        else {
-            this.state.expandedComponents.add(componentFile);
-        }
-        this._triggerCallback('expand', componentFile);
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER HELPERS
-     * ═════════════════════════════════════════════════════════════════ */
-    _renderHierarchy(hierarchy, depth = 0) {
-        const container = document.createElement('div');
-        container.className = 'jux-blueprint-hierarchy';
-        hierarchy.forEach((node, index) => {
-            const nodeEl = document.createElement('div');
-            nodeEl.className = 'jux-blueprint-node';
-            nodeEl.style.paddingLeft = `${depth * 20}px`;
-            const isLast = index === hierarchy.length - 1;
-            const connector = isLast ? '└─' : '├─';
-            // Tree line
-            const lineEl = document.createElement('span');
-            lineEl.className = 'jux-blueprint-line';
-            lineEl.textContent = connector + ' ';
-            nodeEl.appendChild(lineEl);
-            // Tag
-            const tagEl = document.createElement('span');
-            tagEl.className = 'jux-blueprint-tag';
-            tagEl.textContent = `<${node.tag}>`;
-            nodeEl.appendChild(tagEl);
-            // ID
-            if (node.id) {
-                const idEl = document.createElement('span');
-                idEl.className = 'jux-blueprint-id';
-                idEl.textContent = ` #${node.id}`;
-                nodeEl.appendChild(idEl);
-            }
-            // Classes
-            if (node.classes && node.classes.length > 0) {
-                const classesEl = document.createElement('span');
-                classesEl.className = 'jux-blueprint-classes';
-                node.classes.forEach(cls => {
-                    const classEl = document.createElement('span');
-                    classEl.className = 'jux-blueprint-class';
-                    classEl.textContent = `.${cls}`;
-                    classesEl.appendChild(classEl);
-                    classesEl.appendChild(document.createTextNode(' '));
-                });
-                nodeEl.appendChild(classesEl);
-            }
-            container.appendChild(nodeEl);
-            // Render children recursively
-            if (node.children && node.children.length > 0) {
-                container.appendChild(this._renderHierarchy(node.children, depth + 1));
-            }
-        });
-        return container;
-    }
-    _renderComponentCard(component) {
-        const { showMethods, expandAll, expandedComponents } = this.state;
-        const isExpanded = expandAll || expandedComponents.has(component.file);
-        const card = document.createElement('div');
-        card.className = 'jux-blueprint-card';
-        if (isExpanded)
-            card.classList.add('jux-blueprint-card-expanded');
-        // Header
-        const header = document.createElement('div');
-        header.className = 'jux-blueprint-card-header';
-        header.addEventListener('click', () => {
-            this.toggleComponent(component.file);
-            this.update('expandedComponents', this.state.expandedComponents);
-        });
-        const title = document.createElement('h4');
-        title.className = 'jux-blueprint-card-title';
-        title.textContent = component.file;
-        header.appendChild(title);
-        const badge = document.createElement('span');
-        badge.className = 'jux-blueprint-badge';
-        badge.textContent = `${component.classCount} classes`;
-        header.appendChild(badge);
-        const toggle = document.createElement('span');
-        toggle.className = 'jux-blueprint-toggle-icon';
-        toggle.textContent = isExpanded ? '▼' : '▶';
-        header.appendChild(toggle);
-        card.appendChild(header);
-        // Body (collapsed by default)
-        if (isExpanded) {
-            const body = document.createElement('div');
-            body.className = 'jux-blueprint-card-body';
-            // Class list
-            if (component.allClasses && component.allClasses.length > 0) {
-                const classSection = document.createElement('div');
-                classSection.className = 'jux-blueprint-section';
-                const classTitle = document.createElement('h5');
-                classTitle.className = 'jux-blueprint-section-title';
-                classTitle.textContent = 'CSS Classes';
-                classSection.appendChild(classTitle);
-                const classList = document.createElement('div');
-                classList.className = 'jux-blueprint-class-list';
-                component.allClasses.forEach((cls) => {
-                    const classTag = document.createElement('span');
-                    classTag.className = 'jux-blueprint-class-tag';
-                    classTag.textContent = `.${cls}`;
-                    classList.appendChild(classTag);
-                });
-                classSection.appendChild(classList);
-                body.appendChild(classSection);
-            }
-            // DOM Structures
-            if (component.domStructures && component.domStructures.length > 0) {
-                component.domStructures.forEach((structure) => {
-                    const structSection = document.createElement('div');
-                    structSection.className = 'jux-blueprint-section';
-                    const methodTitle = document.createElement('h5');
-                    methodTitle.className = 'jux-blueprint-section-title';
-                    methodTitle.textContent = `Method: ${structure.method}()`;
-                    structSection.appendChild(methodTitle);
-                    // Render hierarchy if available
-                    if (structure.hierarchy && structure.hierarchy.length > 0) {
-                        const hierarchyEl = this._renderHierarchy(structure.hierarchy);
-                        structSection.appendChild(hierarchyEl);
-                    }
-                    body.appendChild(structSection);
-                });
-            }
-            card.appendChild(body);
-        }
-        return card;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * REACTIVE UPDATE
-     * ═════════════════════════════════════════════════════════════════ */
-    update(prop, value) {
-        super.update(prop, value);
-        if (!this.container)
-            return;
-        const blueprint = this.container.querySelector(`#${this._id}`);
-        if (!blueprint)
-            return;
-        switch (prop) {
-            case 'structureData':
-            case 'classData':
-            case 'filter':
-            case 'showMethods':
-            case 'expandAll':
-            case 'expandedComponents':
-                this._rebuildContent();
-                break;
-            case 'theme':
-                blueprint.dataset.theme = value;
-                break;
-        }
-    }
-    _rebuildContent() {
-        if (!this.container)
-            return;
-        const contentContainer = this.container.querySelector('.jux-blueprint-content');
-        if (!contentContainer)
-            return;
-        contentContainer.innerHTML = '';
-        const { classData, filter } = this.state;
-        if (!classData || !classData.components) {
-            const emptyEl = document.createElement('div');
-            emptyEl.className = 'jux-blueprint-empty';
-            emptyEl.textContent = 'No component data loaded. Use .structureData() and .classData() to load JSON files.';
-            contentContainer.appendChild(emptyEl);
-            return;
-        }
-        // Filter components
-        const filteredComponents = classData.components.filter((comp) => {
-            if (!filter)
-                return true;
-            return comp.file.toLowerCase().includes(filter.toLowerCase());
-        });
-        // Render component cards
-        filteredComponents.forEach((component) => {
-            const card = this._renderComponentCard(component);
-            contentContainer.appendChild(card);
-        });
-        // Show count
-        const countEl = this.container.querySelector('.jux-blueprint-count');
-        if (countEl) {
-            countEl.textContent = `Showing ${filteredComponents.length} of ${classData.components.length} components`;
-        }
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { theme, style, class: className, classData } = this.state;
-        // Create wrapper
-        const wrapper = document.createElement('div');
-        wrapper.className = 'jux-blueprint';
-        wrapper.id = this._id;
-        wrapper.dataset.theme = theme;
-        if (className)
-            wrapper.className += ` ${className}`;
-        if (style)
-            wrapper.setAttribute('style', style);
-        // Header
-        const header = document.createElement('div');
-        header.className = 'jux-blueprint-header';
-        const title = document.createElement('h2');
-        title.className = 'jux-blueprint-title';
-        title.textContent = 'Component Blueprint';
-        header.appendChild(title);
-        // Stats
-        if (classData) {
-            const stats = document.createElement('div');
-            stats.className = 'jux-blueprint-stats';
-            stats.innerHTML = `
-        <span class="jux-blueprint-stat">
-          <strong>${classData.totalFiles || 0}</strong> Components
-        </span>
-        <span class="jux-blueprint-stat">
-          <strong>${classData.totalClasses || 0}</strong> Total Classes
-        </span>
-      `;
-            header.appendChild(stats);
-        }
-        wrapper.appendChild(header);
-        // Controls
-        const controls = document.createElement('div');
-        controls.className = 'jux-blueprint-controls';
-        // Filter input
-        const filterInput = document.createElement('input');
-        filterInput.type = 'text';
-        filterInput.className = 'jux-blueprint-filter';
-        filterInput.placeholder = 'Filter components...';
-        filterInput.value = this.state.filter;
-        filterInput.addEventListener('input', (e) => {
-            this.state.filter = e.target.value;
-        });
-        controls.appendChild(filterInput);
-        // Expand All toggle
-        const expandToggle = document.createElement('button');
-        expandToggle.className = 'jux-blueprint-button';
-        expandToggle.textContent = 'Expand All';
-        expandToggle.addEventListener('click', () => {
-            this.state.expandAll = !this.state.expandAll;
-            expandToggle.textContent = this.state.expandAll ? 'Collapse All' : 'Expand All';
-        });
-        controls.appendChild(expandToggle);
-        wrapper.appendChild(controls);
-        // Count
-        const count = document.createElement('div');
-        count.className = 'jux-blueprint-count';
-        count.textContent = classData ? `Showing ${classData.components.length} components` : 'No data loaded';
-        wrapper.appendChild(count);
-        // Content container
-        const content = document.createElement('div');
-        content.className = 'jux-blueprint-content';
-        if (classData && classData.components) {
-            classData.components.forEach((component) => {
-                const card = this._renderComponentCard(component);
-                content.appendChild(card);
-            });
-        }
-        else {
-            const emptyEl = document.createElement('div');
-            emptyEl.className = 'jux-blueprint-empty';
-            emptyEl.textContent = 'No component data loaded. Use .structureData() and .classData() to load JSON files.';
-            content.appendChild(emptyEl);
-        }
-        wrapper.appendChild(content);
-        this._wireStandardEvents(wrapper);
-        container.appendChild(wrapper);
-        return this;
-    }
-}
-export function blueprint(id, options = {}) {
-    return new Blueprint(id, options);
-}

package/lib/components/button.d.ts

@@ -1,70 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-export interface ButtonOptions {
-    label?: string;
-    icon?: string;
-    variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'link' | string;
-    size?: 'small' | 'medium' | 'large';
-    disabled?: boolean;
-    loading?: boolean;
-    iconPosition?: 'left' | 'right';
-    fullWidth?: boolean;
-    type?: 'button' | 'submit' | 'reset';
-    style?: string;
-    class?: string;
-}
-type ButtonState = {
-    label: string;
-    content: string;
-    icon: string;
-    variant: string;
-    size: string;
-    disabled: boolean;
-    loading: boolean;
-    iconPosition: string;
-    fullWidth: boolean;
-    type: 'button' | 'submit' | 'reset';
-    style: string;
-    class: string;
-};
-export declare class Button extends BaseComponent<ButtonState> {
-    private _buttonElement;
-    constructor(id: string, options?: ButtonOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    /**
-     * Set button label (plain text, auto-escaped)
-     * Clears any HTML content
-     */
-    label(value: string): this;
-    /**
-     * Alias for label() - more semantic for buttons
-     */
-    text(value: string): this;
-    /**
-     * Set button content as HTML (overrides label)
-     */
-    content(value: string): this;
-    icon(value: string): this;
-    iconPosition(value: 'left' | 'right'): this;
-    fullWidth(value: boolean): this;
-    variant(value: string): this;
-    size(value: 'small' | 'medium' | 'large'): this;
-    /**
-     * Alias for content() - more semantic
-     */
-    html(value: string): this;
-    /**
-     * Update button text/HTML based on priority
-     * Priority: content (HTML) > label (text) > loading state
-     */
-    private _updateButtonText;
-    update(prop: string, value: any): void;
-    /**
-     * Override visible() to update the actual button element
-     */
-    visible(value: boolean): this;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-}
-export declare function button(id: string, options?: ButtonOptions): Button;
-export {};
-//# sourceMappingURL=button.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAQxD,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAChG,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,MAAO,SAAQ,aAAa,CAAC,WAAW,CAAC;IACpD,OAAO,CAAC,cAAc,CAAkC;gBAE5C,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa;IAmB/C,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD;;;OAGG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAO1B;;OAEG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIzB;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAM5B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIzB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAI3C,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK/B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI;IAO/C;;OAEG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIzB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAgBzB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAQtC;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAW7B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA4DnE;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,CAElE"}

package/lib/components/button.js

@@ -1,177 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { renderIcon } from './icons.js';
-import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import utility
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['click']; // ✅ Button fires click events
-export class Button extends BaseComponent {
-    constructor(id, options) {
-        const opts = options || {};
-        super(id, {
-            label: opts.label ?? formatIdAsLabel(id), // ✅ Auto-generate label
-            content: '', // ✅ Empty by default
-            icon: opts.icon ?? '',
-            variant: opts.variant ?? 'primary',
-            size: opts.size ?? 'medium',
-            disabled: opts.disabled ?? false,
-            loading: opts.loading ?? false,
-            iconPosition: opts.iconPosition ?? 'left',
-            fullWidth: opts.fullWidth ?? false,
-            type: opts.type ?? 'button',
-            style: opts.style ?? '',
-            class: opts.class ?? ''
-        });
-        this._buttonElement = null;
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API - Priority: content > label > auto-generated
-     * ═════════════════════════════════════════════════════════════════ */
-    /**
-     * Set button label (plain text, auto-escaped)
-     * Clears any HTML content
-     */
-    label(value) {
-        this.state.label = value;
-        this.state.content = ''; // ✅ Clear HTML content when label is set
-        this._updateButtonText();
-        return this;
-    }
-    /**
-     * Alias for label() - more semantic for buttons
-     */
-    text(value) {
-        return this.label(value);
-    }
-    /**
-     * Set button content as HTML (overrides label)
-     */
-    content(value) {
-        this.state.content = value;
-        this._updateButtonText();
-        return this;
-    }
-    icon(value) {
-        this.state.icon = value;
-        return this;
-    }
-    iconPosition(value) {
-        this.state.iconPosition = value;
-        return this;
-    }
-    fullWidth(value) {
-        this.state.fullWidth = value;
-        return this;
-    }
-    variant(value) {
-        this.state.variant = value;
-        return this;
-    }
-    size(value) {
-        this.state.size = value;
-        return this;
-    }
-    /**
-     * Alias for content() - more semantic
-     */
-    html(value) {
-        return this.content(value);
-    }
-    /**
-     * Update button text/HTML based on priority
-     * Priority: content (HTML) > label (text) > loading state
-     */
-    _updateButtonText() {
-        if (!this._buttonElement)
-            return;
-        const textEl = this._buttonElement.querySelector('span:not(.jux-button-icon)');
-        if (!textEl)
-            return;
-        // Priority 1: HTML content (if set)
-        if (this.state.content) {
-            textEl.innerHTML = this.state.content;
-        }
-        // Priority 2: Label text
-        else if (this.state.label) {
-            textEl.textContent = this.state.loading ? 'Loading...' : this.state.label;
-        }
-    }
-    update(prop, value) {
-        // No reactive updates needed
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    /**
-     * Override visible() to update the actual button element
-     */
-    visible(value) {
-        this.state.visible = value;
-        // Update the button element directly, not the container
-        if (this._buttonElement) {
-            this._buttonElement.style.display = value ? '' : 'none';
-        }
-        return this;
-    }
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { content, icon, iconPosition, variant, size, style, class: className } = this.state;
-        const button = document.createElement('button');
-        // ✅ Base class + variant + size
-        button.className = 'jux-button';
-        if (variant && variant !== 'primary') {
-            button.className += ` jux-button-${variant}`;
-        }
-        if (size && size !== 'medium') {
-            button.className += ` jux-button-${size}`;
-        }
-        button.id = this._id;
-        // ✅ Add user classes
-        if (className)
-            button.className += ` ${className}`;
-        // ✅ Apply user style (no variant/size logic here)
-        if (style)
-            button.setAttribute('style', style);
-        if (icon && iconPosition === 'left') {
-            const iconEl = document.createElement('span');
-            iconEl.className = 'jux-button-icon';
-            iconEl.appendChild(renderIcon(icon));
-            button.appendChild(iconEl);
-        }
-        const textEl = document.createElement('span');
-        if (content) {
-            textEl.innerHTML = content;
-        }
-        else if (this.state.label) {
-            textEl.textContent = this.state.loading ? 'Loading...' : this.state.label;
-        }
-        else {
-            // Fallback to auto-generated label from ID
-            textEl.textContent = this.state.loading ? 'Loading...' : formatIdAsLabel(this._id);
-        }
-        button.appendChild(textEl);
-        if (icon && iconPosition === 'right') {
-            const iconEl = document.createElement('span');
-            iconEl.className = 'jux-button-icon';
-            iconEl.appendChild(renderIcon(icon));
-            button.appendChild(iconEl);
-        }
-        button.addEventListener('click', (e) => {
-            if (!this.state.disabled && !this.state.loading) {
-                this._triggerCallback('click', e);
-            }
-        });
-        this._wireStandardEvents(button);
-        container.appendChild(button);
-        this._buttonElement = button;
-        return this;
-    }
-}
-export function button(id, options) {
-    return new Button(id, options);
-}