juxscript 1.1.71 → 1.1.73

package/lib/components/blueprint.ts

@@ -1,421 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['select', 'expand'] as const;
-
-export interface BlueprintOptions {
-    structureData?: any; // dom-structure-map.json
-    classData?: any; // css-classes-inventory.json
-    filter?: string; // Filter by component name
-    showMethods?: boolean;
-    expandAll?: boolean;
-    theme?: 'light' | 'dark' | 'auto';
-    style?: string;
-    class?: string;
-}
-
-interface BlueprintState extends BaseState {
-    structureData: any;
-    classData: any;
-    filter: string;
-    showMethods: boolean;
-    expandAll: boolean;
-    theme: string;
-    expandedComponents: Set<string>;
-}
-
-interface ComponentHierarchy {
-    tag: string;
-    classes: string[];
-    id: string | null;
-    children?: ComponentHierarchy[];
-}
-
-export class Blueprint extends BaseComponent<BlueprintState> {
-    constructor(id: string, options: BlueprintOptions = {}) {
-        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<string>(),
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    structureData(data: any): this {
-        this.state.structureData = data;
-        return this;
-    }
-
-    classData(data: any): this {
-        this.state.classData = data;
-        return this;
-    }
-
-    filter(value: string): this {
-        this.state.filter = value;
-        return this;
-    }
-
-    showMethods(value: boolean): this {
-        this.state.showMethods = value;
-        return this;
-    }
-
-    expandAll(value: boolean): this {
-        this.state.expandAll = value;
-        return this;
-    }
-
-    theme(value: 'light' | 'dark' | 'auto'): this {
-        this.state.theme = value;
-        return this;
-    }
-
-    toggleComponent(componentFile: string): this {
-        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
-     * ═════════════════════════════════════════════════════════════════ */
-
-    private _renderHierarchy(hierarchy: ComponentHierarchy[], depth: number = 0): HTMLElement {
-        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;
-    }
-
-    private _renderComponentCard(component: any): HTMLElement {
-        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: string) => {
-                    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: any) => {
-                    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: string, value: any): void {
-        super.update(prop, value);
-
-        if (!this.container) return;
-
-        const blueprint = this.container.querySelector(`#${this._id}`) as HTMLElement;
-        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;
-        }
-    }
-
-    private _rebuildContent(): void {
-        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: any) => {
-            if (!filter) return true;
-            return comp.file.toLowerCase().includes(filter.toLowerCase());
-        });
-
-        // Render component cards
-        filteredComponents.forEach((component: any) => {
-            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?: string | HTMLElement | BaseComponent<any>): this {
-        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 as HTMLInputElement).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: any) => {
-                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: string, options: BlueprintOptions = {}): Blueprint {
-    return new Blueprint(id, options);
-}