juxscript 1.1.63 → 1.1.65

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/lib/components/container.d.ts

@@ -3,6 +3,7 @@ import { BaseComponent } from './base/BaseComponent.js';
  * Container options
  */
 export interface ContainerOptions {
+    content?: string | BaseComponent<any> | Array<string | BaseComponent<any>>;
     class?: string;
     style?: string;
     direction?: 'row' | 'column';
@@ -14,6 +15,7 @@ export interface ContainerOptions {
  * Container state
  */
 type ContainerState = {
+    content: string | BaseComponent<any> | Array<string | BaseComponent<any>>;
     class: string;
     style: string;
     direction?: 'row' | 'column';
@@ -25,14 +27,29 @@ type ContainerState = {
  * Container component - a simple div container for grouping elements
  */
 export declare class Container extends BaseComponent<ContainerState> {
+    private _containerElement;
     constructor(id: string, options?: ContainerOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
     update(prop: string, value: any): void;
+    private _updateContent;
+    content(value: string | BaseComponent<any> | Array<string | BaseComponent<any>>): this;
     direction(value: 'row' | 'column'): this;
     gap(value: string | number): this;
     align(value: 'start' | 'center' | 'end' | 'stretch'): this;
     justify(value: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'): this;
+    /**
+     * Add content to container (supports strings and BaseComponents)
+     */
+    addContent(content: string | BaseComponent<any> | Array<string | BaseComponent<any>>): this;
+    /**
+     * Clear all content from container
+     */
+    clearContent(): this;
+    /**
+     * Get the container element ID for rendering child components
+     */
+    contentId(): string;
     render(targetId?: string | HTMLElement | BaseComponent<any>): this;
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;CAC1F;AAED;;GAEG;AACH,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,qBAAa,SAAU,SAAQ,aAAa,CAAC,cAAc,CAAC;gBAC9C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB;IAWtD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAgBtC,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,QAAQ,GAAG,IAAI;IAKxC,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAKjC,KAAK,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI;IAK1D,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,IAAI;IASpG,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA2CnE;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS,CAE/E"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;CAC1F;AAED;;GAEG;AACH,KAAK,cAAc,GAAG;IACpB,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,qBAAa,SAAU,SAAQ,aAAa,CAAC,cAAc,CAAC;IAC1D,OAAO,CAAC,iBAAiB,CAA4B;gBAEzC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB;IAYtD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IA6BtC,OAAO,CAAC,cAAc;IAgCtB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI;IAKtF,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,QAAQ,GAAG,IAAI;IAKxC,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAKjC,KAAK,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI;IAK1D,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,IAAI;IAKpG;;OAEG;IACH,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI;IAuB3F;;OAEG;IACH,YAAY,IAAI,IAAI;IAOpB;;OAEG;IACH,SAAS,IAAI,MAAM;IAQnB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA4DnE;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS,CAE/E"}

package/lib/components/container.js

@@ -8,6 +8,7 @@ const CALLBACK_EVENTS = ['click'];
 export class Container extends BaseComponent {
     constructor(id, options = {}) {
         super(id, {
+            content: options.content ?? [],
             class: options.class ?? '',
             style: options.style ?? '',
             direction: options.direction,
@@ -15,6 +16,7 @@ export class Container extends BaseComponent {
             align: options.align,
             justify: options.justify
         });
+        this._containerElement = null;
     }
     getTriggerEvents() {
         return TRIGGER_EVENTS;
@@ -23,7 +25,45 @@ export class Container extends BaseComponent {
         return CALLBACK_EVENTS;
     }
     update(prop, value) {
-        // No reactive updates needed
+        super.update(prop, value);
+        if (!this._containerElement)
+            return;
+        switch (prop) {
+            case 'content':
+                this._updateContent(value);
+                break;
+            case 'direction':
+                this._containerElement.style.flexDirection = value;
+                break;
+            case 'gap':
+                const gapValue = typeof value === 'number' ? `${value}px` : value;
+                this._containerElement.style.gap = gapValue;
+                break;
+            case 'align':
+                this._containerElement.style.alignItems = value;
+                break;
+            case 'justify':
+                this._containerElement.style.justifyContent = value;
+                break;
+        }
+    }
+    _updateContent(value) {
+        if (!this._containerElement)
+            return;
+        this._containerElement.innerHTML = '';
+        const items = Array.isArray(value) ? value : [value];
+        items.forEach(item => {
+            if (typeof item === 'string') {
+                const tempDiv = document.createElement('div');
+                tempDiv.innerHTML = item;
+                while (tempDiv.firstChild) {
+                    this._containerElement.appendChild(tempDiv.firstChild);
+                }
+            }
+            else if (item instanceof BaseComponent) {
+                item.render(this._containerElement);
+            }
+        });
     }
     /* -------------------------
      * Fluent API
@@ -35,6 +75,10 @@ export class Container extends BaseComponent {
     // - visible(), show(), hide()
     // - attr(), attrs(), removeAttr()
     // - disabled(), enable(), disable()
+    content(value) {
+        this.state.content = value;
+        return this;
+    }
     direction(value) {
         this.state.direction = value;
         return this;
@@ -51,14 +95,53 @@ export class Container extends BaseComponent {
         this.state.justify = value;
         return this;
     }
+    /**
+     * Add content to container (supports strings and BaseComponents)
+     */
+    addContent(content) {
+        if (!this._containerElement) {
+            console.warn('[Container] Container element not found');
+            return this;
+        }
+        const items = Array.isArray(content) ? content : [content];
+        items.forEach(item => {
+            if (typeof item === 'string') {
+                const tempDiv = document.createElement('div');
+                tempDiv.innerHTML = item;
+                while (tempDiv.firstChild) {
+                    this._containerElement.appendChild(tempDiv.firstChild);
+                }
+            }
+            else if (item instanceof BaseComponent) {
+                item.render(this._containerElement);
+            }
+        });
+        return this;
+    }
+    /**
+     * Clear all content from container
+     */
+    clearContent() {
+        if (this._containerElement) {
+            this._containerElement.innerHTML = '';
+        }
+        return this;
+    }
+    /**
+     * Get the container element ID for rendering child components
+     */
+    contentId() {
+        return `${this._id}-content`;
+    }
     /* -------------------------
      * Render
      * ------------------------- */
     render(targetId) {
         const container = this._setupContainer(targetId);
-        const { class: className, style, direction, gap, align, justify } = this.state;
+        const { content, class: className, style, direction, gap, align, justify } = this.state;
         const div = document.createElement('div');
         div.id = this._id;
+        this._containerElement = div;
         // Always include jux-container class, append custom classes
         div.className = className ? `jux-container ${className}` : 'jux-container';
         // Only apply flex styles if any flex properties are set
@@ -83,6 +166,22 @@ export class Container extends BaseComponent {
         if (computedStyle) {
             div.setAttribute('style', computedStyle);
         }
+        // Render initial content
+        if (content) {
+            const items = Array.isArray(content) ? content : [content];
+            items.forEach(item => {
+                if (typeof item === 'string') {
+                    const tempDiv = document.createElement('div');
+                    tempDiv.innerHTML = item;
+                    while (tempDiv.firstChild) {
+                        div.appendChild(tempDiv.firstChild);
+                    }
+                }
+                else if (item instanceof BaseComponent) {
+                    item.render(div);
+                }
+            });
+        }
         this._wireStandardEvents(div);
         container.appendChild(div);
         return this;

package/lib/components/container.ts

@@ -8,6 +8,7 @@ const CALLBACK_EVENTS = ['click'] as const;
  * Container options
  */
 export interface ContainerOptions {
+  content?: string | BaseComponent<any> | Array<string | BaseComponent<any>>;
   class?: string;
   style?: string;
   direction?: 'row' | 'column';
@@ -20,6 +21,7 @@ export interface ContainerOptions {
  * Container state
  */
 type ContainerState = {
+  content: string | BaseComponent<any> | Array<string | BaseComponent<any>>;
   class: string;
   style: string;
   direction?: 'row' | 'column';
@@ -32,8 +34,11 @@ type ContainerState = {
  * Container component - a simple div container for grouping elements
  */
 export class Container extends BaseComponent<ContainerState> {
+  private _containerElement: HTMLElement | null = null;
+
   constructor(id: string, options: ContainerOptions = {}) {
     super(id, {
+      content: options.content ?? [],
       class: options.class ?? '',
       style: options.style ?? '',
       direction: options.direction,
@@ -52,7 +57,52 @@ export class Container extends BaseComponent<ContainerState> {
   }
 
   update(prop: string, value: any): void {
-    // No reactive updates needed
+    super.update(prop, value);
+
+    if (!this._containerElement) return;
+
+    switch (prop) {
+      case 'content':
+        this._updateContent(value);
+        break;
+
+      case 'direction':
+        this._containerElement.style.flexDirection = value;
+        break;
+
+      case 'gap':
+        const gapValue = typeof value === 'number' ? `${value}px` : value;
+        this._containerElement.style.gap = gapValue;
+        break;
+
+      case 'align':
+        this._containerElement.style.alignItems = value;
+        break;
+
+      case 'justify':
+        this._containerElement.style.justifyContent = value;
+        break;
+    }
+  }
+
+  private _updateContent(value: string | BaseComponent<any> | Array<string | BaseComponent<any>>): void {
+    if (!this._containerElement) return;
+
+    this._containerElement.innerHTML = '';
+
+    const items = Array.isArray(value) ? value : [value];
+
+    items.forEach(item => {
+      if (typeof item === 'string') {
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = item;
+        while (tempDiv.firstChild) {
+          this._containerElement!.appendChild(tempDiv.firstChild);
+        }
+      } else if (item instanceof BaseComponent) {
+        item.render(this._containerElement!);
+      }
+    });
   }
 
   /* -------------------------
@@ -67,6 +117,11 @@ export class Container extends BaseComponent<ContainerState> {
   // - attr(), attrs(), removeAttr()
   // - disabled(), enable(), disable()
 
+  content(value: string | BaseComponent<any> | Array<string | BaseComponent<any>>): this {
+    this.state.content = value;
+    return this;
+  }
+
   direction(value: 'row' | 'column'): this {
     this.state.direction = value;
     return this;
@@ -87,6 +142,49 @@ export class Container extends BaseComponent<ContainerState> {
     return this;
   }
 
+  /**
+   * Add content to container (supports strings and BaseComponents)
+   */
+  addContent(content: string | BaseComponent<any> | Array<string | BaseComponent<any>>): this {
+    if (!this._containerElement) {
+      console.warn('[Container] Container element not found');
+      return this;
+    }
+
+    const items = Array.isArray(content) ? content : [content];
+
+    items.forEach(item => {
+      if (typeof item === 'string') {
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = item;
+        while (tempDiv.firstChild) {
+          this._containerElement!.appendChild(tempDiv.firstChild);
+        }
+      } else if (item instanceof BaseComponent) {
+        item.render(this._containerElement!);
+      }
+    });
+
+    return this;
+  }
+
+  /**
+   * Clear all content from container
+   */
+  clearContent(): this {
+    if (this._containerElement) {
+      this._containerElement.innerHTML = '';
+    }
+    return this;
+  }
+
+  /**
+   * Get the container element ID for rendering child components
+   */
+  contentId(): string {
+    return `${this._id}-content`;
+  }
+
   /* -------------------------
    * Render
    * ------------------------- */
@@ -94,10 +192,11 @@ export class Container extends BaseComponent<ContainerState> {
   render(targetId?: string | HTMLElement | BaseComponent<any>): this {
     const container = this._setupContainer(targetId);
 
-    const { class: className, style, direction, gap, align, justify } = this.state;
+    const { content, class: className, style, direction, gap, align, justify } = this.state;
 
     const div = document.createElement('div');
     div.id = this._id;
+    this._containerElement = div;
 
     // Always include jux-container class, append custom classes
     div.className = className ? `jux-container ${className}` : 'jux-container';
@@ -128,6 +227,22 @@ export class Container extends BaseComponent<ContainerState> {
       div.setAttribute('style', computedStyle);
     }
 
+    // Render initial content
+    if (content) {
+      const items = Array.isArray(content) ? content : [content];
+      items.forEach(item => {
+        if (typeof item === 'string') {
+          const tempDiv = document.createElement('div');
+          tempDiv.innerHTML = item;
+          while (tempDiv.firstChild) {
+            div.appendChild(tempDiv.firstChild);
+          }
+        } else if (item instanceof BaseComponent) {
+          item.render(div);
+        }
+      });
+    }
+
     this._wireStandardEvents(div);
 
     container.appendChild(div);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.63",
+  "version": "1.1.65",
   "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",