juxscript 1.1.63 → 1.1.64

package/index.d.ts

@@ -1,6 +1,7 @@
 import { alert } from './lib/components/alert.js';
 import { app } from './lib/components/app.js';
 import { badge } from './lib/components/badge.js';
+import { blueprint } from './lib/components/blueprint.js';
 import { button } from './lib/components/button.js';
 import { card } from './lib/components/card.js';
 import { chart } from './lib/components/chart.js';
@@ -49,6 +50,7 @@ export declare const jux: {
     alert: typeof alert;
     app: typeof app;
     badge: typeof badge;
+    blueprint: typeof blueprint;
     button: typeof button;
     card: typeof card;
     chart: typeof chart;

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}

package/index.js

@@ -1,6 +1,7 @@
 import { alert } from './lib/components/alert.js';
 import { app } from './lib/components/app.js';
 import { badge } from './lib/components/badge.js';
+import { blueprint } from './lib/components/blueprint.js';
 import { button } from './lib/components/button.js';
 import { card } from './lib/components/card.js';
 import { chart } from './lib/components/chart.js';
@@ -52,6 +53,7 @@ export const jux = {
     alert,
     app,
     badge,
+    blueprint,
     button,
     card,
     chart,

package/lib/components/blueprint.d.ts

@@ -0,0 +1,47 @@
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
+export interface BlueprintOptions {
+    componentId?: string;
+    showClasses?: boolean;
+    showIds?: boolean;
+    showTags?: 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;
+    expandAll: boolean;
+    theme: string;
+    interactive: boolean;
+    selectedNode: string | null;
+    hoveredNode: string | null;
+}
+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;
+    expandAll(value: boolean): this;
+    theme(value: 'light' | 'dark' | 'auto'): this;
+    interactive(value: boolean): this;
+    selectNode(path: string): this;
+    private _analyzeDOMStructure;
+    private _renderNode;
+    private _renderTree;
+    update(prop: string, value: any): void;
+    private _rebuildTree;
+    private _updateNodeStates;
+    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
+}
+export declare function blueprint(id: string, options?: BlueprintOptions): Blueprint;
+export {};
+//# sourceMappingURL=blueprint.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/blueprint.js

@@ -0,0 +1,330 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { registry } from './registry.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['select', 'hover'];
+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,
+            theme: options.theme ?? 'auto',
+            interactive: options.interactive ?? true,
+            selectedNode: null,
+            hoveredNode: null,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+        this._domStructure = [];
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    componentId(value) {
+        this.state.componentId = value;
+        return this;
+    }
+    showClasses(value) {
+        this.state.showClasses = value;
+        return this;
+    }
+    showIds(value) {
+        this.state.showIds = value;
+        return this;
+    }
+    showTags(value) {
+        this.state.showTags = value;
+        return this;
+    }
+    expandAll(value) {
+        this.state.expandAll = value;
+        return this;
+    }
+    theme(value) {
+        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 [];
+        }
+        const rootElement = component.container.querySelector(`#${componentId}`);
+        if (!rootElement) {
+            return [];
+        }
+        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)];
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER NODE
+     * ═════════════════════════════════════════════════════════════════ */
+    _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) {
+            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;
+    }
+    _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);
+            }
+        });
+        return treeEl;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * REACTIVE UPDATE
+     * ═════════════════════════════════════════════════════════════════ */
+    update(prop, value) {
+        super.update(prop, value);
+        if (!this.container)
+            return;
+        const blueprint = this.container.querySelector(`#${this._id}`);
+        if (!blueprint)
+            return;
+        switch (prop) {
+            case '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;
+        }
+    }
+    _rebuildTree() {
+        if (!this.container)
+            return;
+        const treeContainer = this.container.querySelector('.jux-blueprint-tree-container');
+        if (!treeContainer)
+            return;
+        treeContainer.innerHTML = '';
+        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);
+        }
+    }
+    _updateNodeStates() {
+        if (!this.container)
+            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);
+        });
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * 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);
+        }
+        // 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[prop];
+            checkbox.addEventListener('change', () => {
+                this.state[prop] = checkbox.checked;
+            });
+            toggleEl.appendChild(checkbox);
+            toggleEl.appendChild(document.createTextNode(` ${label}`));
+            controls.appendChild(toggleEl);
+        });
+        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;
+    }
+}
+export function blueprint(id, options = {}) {
+    return new Blueprint(id, options);
+}

package/lib/components/blueprint.ts

@@ -0,0 +1,432 @@
+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;
+
+export interface BlueprintOptions {
+    componentId?: string;
+    showClasses?: boolean;
+    showIds?: boolean;
+    showTags?: 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;
+    expandAll: boolean;
+    theme: string;
+    interactive: boolean;
+    selectedNode: string | null;
+    hoveredNode: string | null;
+}
+
+interface DOMNode {
+    tag: string;
+    classes: string[];
+    id: string | null;
+    depth: number;
+    path: string;
+    children: DOMNode[];
+}
+
+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 ?? ''
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    componentId(value: string): this {
+        this.state.componentId = value;
+        return this;
+    }
+
+    showClasses(value: boolean): this {
+        this.state.showClasses = value;
+        return this;
+    }
+
+    showIds(value: boolean): this {
+        this.state.showIds = value;
+        return this;
+    }
+
+    showTags(value: boolean): this {
+        this.state.showTags = 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;
+    }
+
+    interactive(value: boolean): this {
+        this.state.interactive = value;
+        return this;
+    }
+
+    selectNode(path: string): this {
+        this.state.selectedNode = path;
+        this._triggerCallback('select', path);
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * 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;
+    }
+
+    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);
+            }
+        });
+
+        return treeEl;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * 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 _rebuildTree(): void {
+        if (!this.container) return;
+
+        const treeContainer = this.container.querySelector('.jux-blueprint-tree-container');
+        if (!treeContainer) return;
+
+        treeContainer.innerHTML = '';
+
+        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);
+        }
+    }
+
+    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;
+
+            el.classList.toggle('jux-blueprint-node-selected', path === this.state.selectedNode);
+            el.classList.toggle('jux-blueprint-node-hovered', path === this.state.hoveredNode);
+        });
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * 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);
+        });
+
+        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;
+    }
+}
+
+export function blueprint(id: string, options: BlueprintOptions = {}): Blueprint {
+    return new Blueprint(id, options);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.63",
+  "version": "1.1.64",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",
@@ -47,7 +47,8 @@
     "build": "tsc",
     "dev": "tsc --watch",
     "prepublishOnly": "npm run build",
-    "postpublish": "echo '✅ Published successfully. Verify with: npm info juxscript'"
+    "postpublish": "echo '✅ Published successfully. Verify with: npm info juxscript'",
+    "scan-css": "node scripts/scan-css-classes.js"
   },
   "dependencies": {
     "acorn": "^8.15.0",