juxscript 1.1.69 → 1.1.71

package/lib/components/blueprint.ts

@@ -5,347 +5,347 @@ 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;
+    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>;
+    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[];
+    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(' '));
+    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 ?? ''
         });
+    }
 
-        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 getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
 
-        classSection.appendChild(classList);
-        body.appendChild(classSection);
-      }
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
 
-      // DOM Structures
-      if (component.domStructures && component.domStructures.length > 0) {
-        component.domStructures.forEach((structure: any) => {
-          const structSection = document.createElement('div');
-          structSection.className = 'jux-blueprint-section';
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
 
-          const methodTitle = document.createElement('h5');
-          methodTitle.className = 'jux-blueprint-section-title';
-          methodTitle.textContent = `Method: ${structure.method}()`;
-          structSection.appendChild(methodTitle);
+    structureData(data: any): this {
+        this.state.structureData = data;
+        return this;
+    }
 
-          // Render hierarchy if available
-          if (structure.hierarchy && structure.hierarchy.length > 0) {
-            const hierarchyEl = this._renderHierarchy(structure.hierarchy);
-            structSection.appendChild(hierarchyEl);
-          }
+    classData(data: any): this {
+        this.state.classData = data;
+        return this;
+    }
 
-          body.appendChild(structSection);
-        });
-      }
+    filter(value: string): this {
+        this.state.filter = value;
+        return this;
+    }
 
-      card.appendChild(body);
+    showMethods(value: boolean): this {
+        this.state.showMethods = value;
+        return this;
     }
 
-    return card;
-  }
+    expandAll(value: boolean): this {
+        this.state.expandAll = value;
+        return this;
+    }
 
-  /* ═════════════════════════════════════════════════════════════════
-   * REACTIVE UPDATE
-   * ═════════════════════════════════════════════════════════════════ */
+    theme(value: 'light' | 'dark' | 'auto'): this {
+        this.state.theme = value;
+        return this;
+    }
 
-  update(prop: string, value: any): void {
-    super.update(prop, value);
+    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;
+    }
 
-    if (!this.container) return;
+    /* ═════════════════════════════════════════════════════════════════
+     * 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));
+            }
+        });
 
-    const blueprint = this.container.querySelector(`#${this._id}`) as HTMLElement;
-    if (!blueprint) return;
+        return container;
+    }
 
-    switch (prop) {
-      case 'structureData':
-      case 'classData':
-      case 'filter':
-      case 'showMethods':
-      case 'expandAll':
-      case 'expandedComponents':
-        this._rebuildContent();
-        break;
+    private _renderComponentCard(component: any): HTMLElement {
+        const { showMethods, expandAll, expandedComponents } = this.state;
+        const isExpanded = expandAll || expandedComponents.has(component.file);
 
-      case 'theme':
-        blueprint.dataset.theme = value;
-        break;
+        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;
     }
-  }
 
-  private _rebuildContent(): void {
-    if (!this.container) return;
+    /* ═════════════════════════════════════════════════════════════════
+     * REACTIVE UPDATE
+     * ═════════════════════════════════════════════════════════════════ */
+
+    update(prop: string, value: any): void {
+        super.update(prop, value);
 
-    const contentContainer = this.container.querySelector('.jux-blueprint-content');
-    if (!contentContainer) return;
+        if (!this.container) return;
 
-    contentContainer.innerHTML = '';
+        const blueprint = this.container.querySelector(`#${this._id}`) as HTMLElement;
+        if (!blueprint) return;
 
-    const { classData, filter } = this.state;
+        switch (prop) {
+            case 'structureData':
+            case 'classData':
+            case 'filter':
+            case 'showMethods':
+            case 'expandAll':
+            case 'expandedComponents':
+                this._rebuildContent();
+                break;
 
-    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;
+            case 'theme':
+                blueprint.dataset.theme = value;
+                break;
+        }
     }
 
-    // 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`;
+    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 = `
+
+    /* ═════════════════════════════════════════════════════════════════
+     * 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>
@@ -353,69 +353,69 @@ export class Blueprint extends BaseComponent<BlueprintState> {
           <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);
+            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;
     }
-
-    wrapper.appendChild(content);
-
-    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);
 }