juxscript 1.1.65 → 1.1.67

package/lib/components/blueprint.ts

@@ -1,432 +1,421 @@
 import { BaseComponent, BaseState } from './base/BaseComponent.js';
-import { registry } from './registry.js';
 
 // Event definitions
 const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['select', 'hover'] as const;
+const CALLBACK_EVENTS = ['select', 'expand'] as const;
 
 export interface BlueprintOptions {
-    componentId?: string;
-    showClasses?: boolean;
-    showIds?: boolean;
-    showTags?: boolean;
-    expandAll?: boolean;
-    theme?: 'light' | 'dark' | 'auto';
-    interactive?: boolean;
-    style?: string;
-    class?: string;
+  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 {
-    componentId: string;
-    showClasses: boolean;
-    showIds: boolean;
-    showTags: boolean;
-    expandAll: boolean;
-    theme: string;
-    interactive: boolean;
-    selectedNode: string | null;
-    hoveredNode: string | null;
+  structureData: any;
+  classData: any;
+  filter: string;
+  showMethods: boolean;
+  expandAll: boolean;
+  theme: string;
+  expandedComponents: Set<string>;
 }
 
-interface DOMNode {
-    tag: string;
-    classes: string[];
-    id: string | null;
-    depth: number;
-    path: string;
-    children: DOMNode[];
+interface ComponentHierarchy {
+  tag: string;
+  classes: string[];
+  id: string | null;
+  children?: ComponentHierarchy[];
 }
 
 export class Blueprint extends BaseComponent<BlueprintState> {
-    private _domStructure: DOMNode[] = [];
-
-    constructor(id: string, options: BlueprintOptions = {}) {
-        super(id, {
-            componentId: options.componentId ?? '',
-            showClasses: options.showClasses ?? true,
-            showIds: options.showIds ?? true,
-            showTags: options.showTags ?? true,
-            expandAll: options.expandAll ?? true,
-            theme: options.theme ?? 'auto',
-            interactive: options.interactive ?? true,
-            selectedNode: null,
-            hoveredNode: null,
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
+  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(' '));
+        });
 
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
+        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);
+        });
 
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
+        classSection.appendChild(classList);
+        body.appendChild(classSection);
+      }
 
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
+      // DOM Structures
+      if (component.domStructures && component.domStructures.length > 0) {
+        component.domStructures.forEach((structure: any) => {
+          const structSection = document.createElement('div');
+          structSection.className = 'jux-blueprint-section';
 
-    componentId(value: string): this {
-        this.state.componentId = value;
-        return this;
-    }
+          const methodTitle = document.createElement('h5');
+          methodTitle.className = 'jux-blueprint-section-title';
+          methodTitle.textContent = `Method: ${structure.method}()`;
+          structSection.appendChild(methodTitle);
 
-    showClasses(value: boolean): this {
-        this.state.showClasses = value;
-        return this;
-    }
+          // Render hierarchy if available
+          if (structure.hierarchy && structure.hierarchy.length > 0) {
+            const hierarchyEl = this._renderHierarchy(structure.hierarchy);
+            structSection.appendChild(hierarchyEl);
+          }
 
-    showIds(value: boolean): this {
-        this.state.showIds = value;
-        return this;
-    }
+          body.appendChild(structSection);
+        });
+      }
 
-    showTags(value: boolean): this {
-        this.state.showTags = value;
-        return this;
+      card.appendChild(body);
     }
 
-    expandAll(value: boolean): this {
-        this.state.expandAll = value;
-        return this;
-    }
+    return card;
+  }
 
-    theme(value: 'light' | 'dark' | 'auto'): this {
-        this.state.theme = value;
-        return this;
-    }
+  /* ═════════════════════════════════════════════════════════════════
+   * REACTIVE UPDATE
+   * ═════════════════════════════════════════════════════════════════ */
 
-    interactive(value: boolean): this {
-        this.state.interactive = value;
-        return this;
-    }
+  update(prop: string, value: any): void {
+    super.update(prop, value);
 
-    selectNode(path: string): this {
-        this.state.selectedNode = path;
-        this._triggerCallback('select', path);
-        return this;
-    }
+    if (!this.container) return;
 
-    /* ═════════════════════════════════════════════════════════════════
-     * DOM ANALYSIS
-     * ═════════════════════════════════════════════════════════════════ */
-
-    private _analyzeDOMStructure(componentId: string): DOMNode[] {
-        const component = registry.get(componentId);
-        if (!component || !component.container) {
-            return [];
-        }
-
-        const rootElement = component.container.querySelector(`#${componentId}`);
-        if (!rootElement) {
-            return [];
-        }
-
-        const extractNode = (element: Element, depth: number = 0, path: string = '0'): DOMNode => {
-            const node: DOMNode = {
-                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)];
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER NODE
-     * ═════════════════════════════════════════════════════════════════ */
-
-    private _renderNode(node: DOMNode, isLast: boolean = false, prefix: string = ''): HTMLElement {
-        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) {
-            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) {
-                    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;
-    }
+    const blueprint = this.container.querySelector(`#${this._id}`) as HTMLElement;
+    if (!blueprint) return;
 
-    private _renderTree(nodes: DOMNode[], prefix: string = ''): HTMLElement {
-        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);
-            }
-        });
+    switch (prop) {
+      case 'structureData':
+      case 'classData':
+      case 'filter':
+      case 'showMethods':
+      case 'expandAll':
+      case 'expandedComponents':
+        this._rebuildContent();
+        break;
 
-        return treeEl;
+      case 'theme':
+        blueprint.dataset.theme = value;
+        break;
     }
+  }
 
-    /* ═════════════════════════════════════════════════════════════════
-     * 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 'componentId':
-                this._domStructure = this._analyzeDOMStructure(value);
-                this._rebuildTree();
-                break;
-
-            case 'showClasses':
-            case 'showIds':
-            case 'showTags':
-            case 'expandAll':
-            case 'interactive':
-                this._rebuildTree();
-                break;
-
-            case 'theme':
-                blueprint.dataset.theme = value;
-                break;
-
-            case 'selectedNode':
-            case 'hoveredNode':
-                this._updateNodeStates();
-                break;
-        }
-    }
+  private _rebuildContent(): void {
+    if (!this.container) return;
 
-    private _rebuildTree(): void {
-        if (!this.container) return;
+    const contentContainer = this.container.querySelector('.jux-blueprint-content');
+    if (!contentContainer) return;
 
-        const treeContainer = this.container.querySelector('.jux-blueprint-tree-container');
-        if (!treeContainer) return;
+    contentContainer.innerHTML = '';
 
-        treeContainer.innerHTML = '';
+    const { classData, filter } = this.state;
 
-        if (this._domStructure.length > 0) {
-            const treeEl = this._renderTree(this._domStructure);
-            treeContainer.appendChild(treeEl);
-        } else {
-            const emptyEl = document.createElement('div');
-            emptyEl.className = 'jux-blueprint-empty';
-            emptyEl.textContent = 'No component selected or component not found';
-            treeContainer.appendChild(emptyEl);
-        }
+    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;
     }
 
-    private _updateNodeStates(): void {
-        if (!this.container) return;
-
-        const nodes = this.container.querySelectorAll('.jux-blueprint-node');
-        nodes.forEach(node => {
-            const el = node as HTMLElement;
-            const path = el.dataset.path;
+    // 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);
+    }
 
-            el.classList.toggle('jux-blueprint-node-selected', path === this.state.selectedNode);
-            el.classList.toggle('jux-blueprint-node-hovered', path === this.state.hoveredNode);
-        });
+    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);
     }
 
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-        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);
-        }
-
-        // 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('h3');
-        title.className = 'jux-blueprint-title';
-        title.textContent = componentId ? `Blueprint: ${componentId}` : 'Component Blueprint';
-        header.appendChild(title);
-
-        // 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 as any)[prop];
-            checkbox.addEventListener('change', () => {
-                (this.state as any)[prop] = checkbox.checked;
-            });
-
-            toggleEl.appendChild(checkbox);
-            toggleEl.appendChild(document.createTextNode(` ${label}`));
-            controls.appendChild(toggleEl);
-        });
+    wrapper.appendChild(content);
 
-        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);
-        } 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);
-        }
-
-        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);
-
-        this._wireStandardEvents(wrapper);
-        container.appendChild(wrapper);
-
-        return this;
-    }
+    this._wireStandardEvents(wrapper);
+    container.appendChild(wrapper);
+
+    return this;
+  }
 }
 
 export function blueprint(id: string, options: BlueprintOptions = {}): Blueprint {
-    return new Blueprint(id, options);
+  return new Blueprint(id, options);
 }