juxscript 1.1.65 → 1.1.67

package/lib/components/blueprint.d.ts

@@ -1,45 +1,38 @@
 import { BaseComponent, BaseState } from './base/BaseComponent.js';
 export interface BlueprintOptions {
-    componentId?: string;
-    showClasses?: boolean;
-    showIds?: boolean;
-    showTags?: boolean;
+    structureData?: any;
+    classData?: any;
+    filter?: string;
+    showMethods?: boolean;
     expandAll?: boolean;
     theme?: 'light' | 'dark' | 'auto';
-    interactive?: boolean;
     style?: string;
     class?: string;
 }
 interface BlueprintState extends BaseState {
-    componentId: string;
-    showClasses: boolean;
-    showIds: boolean;
-    showTags: boolean;
+    structureData: any;
+    classData: any;
+    filter: string;
+    showMethods: boolean;
     expandAll: boolean;
     theme: string;
-    interactive: boolean;
-    selectedNode: string | null;
-    hoveredNode: string | null;
+    expandedComponents: Set<string>;
 }
 export declare class Blueprint extends BaseComponent<BlueprintState> {
-    private _domStructure;
     constructor(id: string, options?: BlueprintOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
-    componentId(value: string): this;
-    showClasses(value: boolean): this;
-    showIds(value: boolean): this;
-    showTags(value: boolean): this;
+    structureData(data: any): this;
+    classData(data: any): this;
+    filter(value: string): this;
+    showMethods(value: boolean): this;
     expandAll(value: boolean): this;
     theme(value: 'light' | 'dark' | 'auto'): this;
-    interactive(value: boolean): this;
-    selectNode(path: string): this;
-    private _analyzeDOMStructure;
-    private _renderNode;
-    private _renderTree;
+    toggleComponent(componentFile: string): this;
+    private _renderHierarchy;
+    private _renderComponentCard;
     update(prop: string, value: any): void;
-    private _rebuildTree;
-    private _updateNodeStates;
+    private _rebuildContent;
     render(targetId?: string | HTMLElement | BaseComponent<any>): this;
 }
 export declare function blueprint(id: string, options?: BlueprintOptions): Blueprint;

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

@@ -1 +1 @@
-{"version":3,"file":"blueprint.d.ts","sourceRoot":"","sources":["blueprint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAOnE,MAAM,WAAW,gBAAgB;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,cAAe,SAAQ,SAAS;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAWD,qBAAa,SAAU,SAAQ,aAAa,CAAC,cAAc,CAAC;IACxD,OAAO,CAAC,aAAa,CAAiB;gBAE1B,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB;IAgBtD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKhC,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKjC,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK7B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK9B,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK/B,KAAK,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI;IAK7C,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKjC,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAU9B,OAAO,CAAC,oBAAoB;IAmC5B,OAAO,CAAC,WAAW;IAyFnB,OAAO,CAAC,WAAW;IAwBnB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAiCtC,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,iBAAiB;IAiBzB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA8FrE;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS,CAE/E"}
+{"version":3,"file":"blueprint.d.ts","sourceRoot":"","sources":["blueprint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAMnE,MAAM,WAAW,gBAAgB;IAC/B,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,cAAe,SAAQ,SAAS;IACxC,aAAa,EAAE,GAAG,CAAC;IACnB,SAAS,EAAE,GAAG,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACjC;AASD,qBAAa,SAAU,SAAQ,aAAa,CAAC,cAAc,CAAC;gBAC9C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB;IActD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,aAAa,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI;IAK9B,SAAS,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI;IAK1B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK3B,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKjC,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK/B,KAAK,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI;IAK7C,eAAe,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI;IAc5C,OAAO,CAAC,gBAAgB;IA2DxB,OAAO,CAAC,oBAAoB;IA6F5B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAwBtC,OAAO,CAAC,eAAe;IAyCvB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA8FnE;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS,CAE/E"}

package/lib/components/blueprint.js

@@ -1,24 +1,20 @@
 import { BaseComponent } from './base/BaseComponent.js';
-import { registry } from './registry.js';
 // Event definitions
 const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['select', 'hover'];
+const CALLBACK_EVENTS = ['select', 'expand'];
 export class Blueprint extends BaseComponent {
     constructor(id, options = {}) {
         super(id, {
-            componentId: options.componentId ?? '',
-            showClasses: options.showClasses ?? true,
-            showIds: options.showIds ?? true,
-            showTags: options.showTags ?? true,
-            expandAll: options.expandAll ?? true,
+            structureData: options.structureData ?? null,
+            classData: options.classData ?? null,
+            filter: options.filter ?? '',
+            showMethods: options.showMethods ?? true,
+            expandAll: options.expandAll ?? false,
             theme: options.theme ?? 'auto',
-            interactive: options.interactive ?? true,
-            selectedNode: null,
-            hoveredNode: null,
+            expandedComponents: new Set(),
             style: options.style ?? '',
             class: options.class ?? ''
         });
-        this._domStructure = [];
     }
     getTriggerEvents() {
         return TRIGGER_EVENTS;
@@ -29,20 +25,20 @@ export class Blueprint extends BaseComponent {
     /* ═════════════════════════════════════════════════════════════════
      * FLUENT API
      * ═════════════════════════════════════════════════════════════════ */
-    componentId(value) {
-        this.state.componentId = value;
+    structureData(data) {
+        this.state.structureData = data;
         return this;
     }
-    showClasses(value) {
-        this.state.showClasses = value;
+    classData(data) {
+        this.state.classData = data;
         return this;
     }
-    showIds(value) {
-        this.state.showIds = value;
+    filter(value) {
+        this.state.filter = value;
         return this;
     }
-    showTags(value) {
-        this.state.showTags = value;
+    showMethods(value) {
+        this.state.showMethods = value;
         return this;
     }
     expandAll(value) {
@@ -53,132 +49,136 @@ export class Blueprint extends BaseComponent {
         this.state.theme = value;
         return this;
     }
-    interactive(value) {
-        this.state.interactive = value;
-        return this;
-    }
-    selectNode(path) {
-        this.state.selectedNode = path;
-        this._triggerCallback('select', path);
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * DOM ANALYSIS
-     * ═════════════════════════════════════════════════════════════════ */
-    _analyzeDOMStructure(componentId) {
-        const component = registry.get(componentId);
-        if (!component || !component.container) {
-            return [];
+    toggleComponent(componentFile) {
+        if (this.state.expandedComponents.has(componentFile)) {
+            this.state.expandedComponents.delete(componentFile);
         }
-        const rootElement = component.container.querySelector(`#${componentId}`);
-        if (!rootElement) {
-            return [];
+        else {
+            this.state.expandedComponents.add(componentFile);
         }
-        const extractNode = (element, depth = 0, path = '0') => {
-            const node = {
-                tag: element.tagName.toLowerCase(),
-                classes: Array.from(element.classList),
-                id: element.id || null,
-                depth,
-                path,
-                children: []
-            };
-            Array.from(element.children).forEach((child, index) => {
-                node.children.push(extractNode(child, depth + 1, `${path}.${index}`));
-            });
-            return node;
-        };
-        return [extractNode(rootElement)];
+        this._triggerCallback('expand', componentFile);
+        return this;
     }
     /* ═════════════════════════════════════════════════════════════════
-     * RENDER NODE
+     * RENDER HELPERS
      * ═════════════════════════════════════════════════════════════════ */
-    _renderNode(node, isLast = false, prefix = '') {
-        const { showClasses, showIds, showTags, interactive, selectedNode, hoveredNode } = this.state;
-        const nodeEl = document.createElement('div');
-        nodeEl.className = 'jux-blueprint-node';
-        nodeEl.dataset.path = node.path;
-        if (selectedNode === node.path) {
-            nodeEl.classList.add('jux-blueprint-node-selected');
-        }
-        if (hoveredNode === node.path) {
-            nodeEl.classList.add('jux-blueprint-node-hovered');
-        }
-        // Tree line
-        const lineEl = document.createElement('span');
-        lineEl.className = 'jux-blueprint-line';
-        const connector = isLast ? '└─' : '├─';
-        const indent = prefix + connector;
-        lineEl.textContent = indent;
-        nodeEl.appendChild(lineEl);
-        // Node content
-        const contentEl = document.createElement('span');
-        contentEl.className = 'jux-blueprint-content';
-        // Tag
-        if (showTags) {
+    _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}>`;
-            contentEl.appendChild(tagEl);
-        }
-        // ID
-        if (showIds && node.id) {
-            const idEl = document.createElement('span');
-            idEl.className = 'jux-blueprint-id';
-            idEl.textContent = `#${node.id}`;
-            contentEl.appendChild(idEl);
-        }
-        // Classes
-        if (showClasses && node.classes.length > 0) {
-            const classesEl = document.createElement('span');
-            classesEl.className = 'jux-blueprint-classes';
-            node.classes.forEach((cls, index) => {
-                const classEl = document.createElement('span');
-                classEl.className = 'jux-blueprint-class';
-                classEl.textContent = `.${cls}`;
-                classesEl.appendChild(classEl);
-                if (index < node.classes.length - 1) {
+            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(' '));
-                }
-            });
-            contentEl.appendChild(classesEl);
-        }
-        nodeEl.appendChild(contentEl);
-        // Interactive behavior
-        if (interactive) {
-            nodeEl.style.cursor = 'pointer';
-            nodeEl.addEventListener('click', (e) => {
-                e.stopPropagation();
-                this.state.selectedNode = node.path;
-                this._triggerCallback('select', node);
-            });
-            nodeEl.addEventListener('mouseenter', () => {
-                this.state.hoveredNode = node.path;
-                this._triggerCallback('hover', node);
-            });
-            nodeEl.addEventListener('mouseleave', () => {
-                if (this.state.hoveredNode === node.path) {
-                    this.state.hoveredNode = null;
-                }
-            });
-        }
-        return nodeEl;
-    }
-    _renderTree(nodes, prefix = '') {
-        const treeEl = document.createElement('div');
-        treeEl.className = 'jux-blueprint-tree';
-        nodes.forEach((node, index) => {
-            const isLast = index === nodes.length - 1;
-            const nodeEl = this._renderNode(node, isLast, prefix);
-            treeEl.appendChild(nodeEl);
-            // Render children
-            if (node.children.length > 0) {
-                const childPrefix = prefix + (isLast ? '  ' : '│ ');
-                const childrenEl = this._renderTree(node.children, childPrefix);
-                treeEl.appendChild(childrenEl);
+                });
+                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 treeEl;
+        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
@@ -191,65 +191,57 @@ export class Blueprint extends BaseComponent {
         if (!blueprint)
             return;
         switch (prop) {
-            case 'componentId':
-                this._domStructure = this._analyzeDOMStructure(value);
-                this._rebuildTree();
-                break;
-            case 'showClasses':
-            case 'showIds':
-            case 'showTags':
+            case 'structureData':
+            case 'classData':
+            case 'filter':
+            case 'showMethods':
             case 'expandAll':
-            case 'interactive':
-                this._rebuildTree();
+            case 'expandedComponents':
+                this._rebuildContent();
                 break;
             case 'theme':
                 blueprint.dataset.theme = value;
                 break;
-            case 'selectedNode':
-            case 'hoveredNode':
-                this._updateNodeStates();
-                break;
         }
     }
-    _rebuildTree() {
+    _rebuildContent() {
         if (!this.container)
             return;
-        const treeContainer = this.container.querySelector('.jux-blueprint-tree-container');
-        if (!treeContainer)
+        const contentContainer = this.container.querySelector('.jux-blueprint-content');
+        if (!contentContainer)
             return;
-        treeContainer.innerHTML = '';
-        if (this._domStructure.length > 0) {
-            const treeEl = this._renderTree(this._domStructure);
-            treeContainer.appendChild(treeEl);
-        }
-        else {
+        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 selected or component not found';
-            treeContainer.appendChild(emptyEl);
-        }
-    }
-    _updateNodeStates() {
-        if (!this.container)
+            emptyEl.textContent = 'No component data loaded. Use .structureData() and .classData() to load JSON files.';
+            contentContainer.appendChild(emptyEl);
             return;
-        const nodes = this.container.querySelectorAll('.jux-blueprint-node');
-        nodes.forEach(node => {
-            const el = node;
-            const path = el.dataset.path;
-            el.classList.toggle('jux-blueprint-node-selected', path === this.state.selectedNode);
-            el.classList.toggle('jux-blueprint-node-hovered', path === this.state.hoveredNode);
+        }
+        // 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 { componentId, theme, style, class: className } = this.state;
-        // Analyze structure if componentId is provided
-        if (componentId) {
-            this._domStructure = this._analyzeDOMStructure(componentId);
-        }
+        const { theme, style, class: className, classData } = this.state;
         // Create wrapper
         const wrapper = document.createElement('div');
         wrapper.className = 'jux-blueprint';
@@ -262,64 +254,69 @@ export class Blueprint extends BaseComponent {
         // Header
         const header = document.createElement('div');
         header.className = 'jux-blueprint-header';
-        const title = document.createElement('h3');
+        const title = document.createElement('h2');
         title.className = 'jux-blueprint-title';
-        title.textContent = componentId ? `Blueprint: ${componentId}` : 'Component Blueprint';
+        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';
-        const toggles = [
-            { prop: 'showTags', label: 'Tags' },
-            { prop: 'showIds', label: 'IDs' },
-            { prop: 'showClasses', label: 'Classes' }
-        ];
-        toggles.forEach(({ prop, label }) => {
-            const toggleEl = document.createElement('label');
-            toggleEl.className = 'jux-blueprint-toggle';
-            const checkbox = document.createElement('input');
-            checkbox.type = 'checkbox';
-            checkbox.checked = this.state[prop];
-            checkbox.addEventListener('change', () => {
-                this.state[prop] = checkbox.checked;
-            });
-            toggleEl.appendChild(checkbox);
-            toggleEl.appendChild(document.createTextNode(` ${label}`));
-            controls.appendChild(toggleEl);
+        // 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;
         });
-        header.appendChild(controls);
-        wrapper.appendChild(header);
-        // Tree container
-        const treeContainer = document.createElement('div');
-        treeContainer.className = 'jux-blueprint-tree-container';
-        if (this._domStructure.length > 0) {
-            const treeEl = this._renderTree(this._domStructure);
-            treeContainer.appendChild(treeEl);
+        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 = componentId
-                ? `Component "${componentId}" not found or not rendered`
-                : 'Set componentId to analyze a component';
-            treeContainer.appendChild(emptyEl);
+            emptyEl.textContent = 'No component data loaded. Use .structureData() and .classData() to load JSON files.';
+            content.appendChild(emptyEl);
         }
-        wrapper.appendChild(treeContainer);
-        // Legend
-        const legend = document.createElement('div');
-        legend.className = 'jux-blueprint-legend';
-        legend.innerHTML = `
-      <span class="jux-blueprint-legend-item">
-        <span class="jux-blueprint-tag">&lt;tag&gt;</span> HTML Element
-      </span>
-      <span class="jux-blueprint-legend-item">
-        <span class="jux-blueprint-id">#id</span> Element ID
-      </span>
-      <span class="jux-blueprint-legend-item">
-        <span class="jux-blueprint-class">.class</span> CSS Class
-      </span>
-    `;
-        wrapper.appendChild(legend);
+        wrapper.appendChild(content);
         this._wireStandardEvents(wrapper);
         container.appendChild(wrapper);
         return this;