juxscript 1.0.86 → 1.0.88

package/lib/componentsv2/juxerror/engine.ts

@@ -0,0 +1,241 @@
+import { BaseEngine, BaseState } from '../base/BaseEngine.js';
+import { GlobalBus } from '../base/GlobalBus.js';
+
+export interface StackFrame {
+    file: string;
+    line: number;
+    column: number;
+    function: string;
+    code?: string;
+    isUserCode: boolean;
+}
+
+export interface JuxErrorState extends BaseState {
+    title: string;
+    message: string;
+    stack: StackFrame[];
+    rawStack: string;
+    timestamp: number;
+    errorType: 'runtime' | 'compile' | 'network' | 'validation' | 'unknown';
+    culpritFrame: StackFrame | null;
+    expanded: boolean;
+}
+
+export interface JuxErrorOptions {
+    autoShow?: boolean;
+}
+
+export class JuxErrorEngine extends BaseEngine<JuxErrorState, JuxErrorOptions> {
+    constructor(id: string = 'jux-error', options: JuxErrorOptions = {}) {
+        super(id, options);
+    }
+
+    protected prepareState(id: string, options: JuxErrorOptions): JuxErrorState {
+        return {
+            // BaseState requirements
+            id,
+            classes: ['jux-error'],
+            visible: false,
+            disabled: false,
+            loading: false,
+            attributes: {},
+            // JuxErrorState specifics
+            title: '',
+            message: '',
+            stack: [],
+            rawStack: '',
+            timestamp: 0,
+            errorType: 'unknown',
+            culpritFrame: null,
+            expanded: false
+        };
+    }
+
+    // --- Public API ---
+
+    show(error: Error | string, type: JuxErrorState['errorType'] = 'runtime'): this {
+        const err = typeof error === 'string' ? new Error(error) : error;
+        const stack = this.#parseStack(err.stack || '');
+        const culprit = this.#findCulprit(stack);
+
+        this.updateState({
+            visible: true,
+            title: err.name || 'Error',
+            message: err.message,
+            stack,
+            rawStack: err.stack || '',
+            timestamp: Date.now(),
+            errorType: type,
+            culpritFrame: culprit,
+            expanded: false
+        });
+
+        this.emit('error:show', { type, message: err.message });
+        return this;
+    }
+
+    showCompileError(file: string, line: number, message: string, code?: string): this {
+        const culprit: StackFrame = {
+            file,
+            line,
+            column: 0,
+            function: '<compile>',
+            code,
+            isUserCode: true
+        };
+
+        this.updateState({
+            visible: true,
+            title: 'Compile Error',
+            message,
+            stack: [culprit],
+            rawStack: '',
+            timestamp: Date.now(),
+            errorType: 'compile',
+            culpritFrame: culprit,
+            expanded: false
+        });
+
+        this.emit('error:compile', { file, line, message });
+        return this;
+    }
+
+    showNetworkError(url: string, status: number, message: string): this {
+        this.updateState({
+            visible: true,
+            title: `Network Error (${status})`,
+            message: `${message}\n\nURL: ${url}`,
+            stack: [],
+            rawStack: '',
+            timestamp: Date.now(),
+            errorType: 'network',
+            culpritFrame: null,
+            expanded: false
+        });
+
+        this.emit('error:network', { url, status, message });
+        return this;
+    }
+
+    showValidationError(field: string, message: string): this {
+        this.updateState({
+            visible: true,
+            title: 'Validation Error',
+            message: `${field}: ${message}`,
+            stack: [],
+            rawStack: '',
+            timestamp: Date.now(),
+            errorType: 'validation',
+            culpritFrame: null,
+            expanded: false
+        });
+
+        this.emit('error:validation', { field, message });
+        return this;
+    }
+
+    dismiss(): this {
+        this.updateState({ visible: false });
+        this.emit('error:dismiss', {});
+        return this;
+    }
+
+    toggleExpanded(): this {
+        this.updateState({ expanded: !this.state.expanded });
+        this.emit('error:toggle', { expanded: this.state.expanded });
+        return this;
+    }
+
+    // --- Stack Parsing ---
+
+    #parseStack(rawStack: string): StackFrame[] {
+        const lines = rawStack.split('\n').slice(1);
+        const frames: StackFrame[] = [];
+
+        for (const line of lines) {
+            const frame = this.#parseStackLine(line.trim());
+            if (frame) frames.push(frame);
+        }
+
+        return frames;
+    }
+
+    #parseStackLine(line: string): StackFrame | null {
+        // Chrome/V8: "at functionName (file:line:column)" or "at file:line:column"
+        const chromeMatch = line.match(/^at\s+(?:(.+?)\s+\()?(.+?):(\d+):(\d+)\)?$/);
+        if (chromeMatch) {
+            const [, func, file, lineNum, col] = chromeMatch;
+            return {
+                function: func || '<anonymous>',
+                file: this.#cleanFilePath(file),
+                line: parseInt(lineNum, 10),
+                column: parseInt(col, 10),
+                isUserCode: this.#isUserCode(file)
+            };
+        }
+
+        // Firefox: "functionName@file:line:column"
+        const firefoxMatch = line.match(/^(.*)@(.+?):(\d+):(\d+)$/);
+        if (firefoxMatch) {
+            const [, func, file, lineNum, col] = firefoxMatch;
+            return {
+                function: func || '<anonymous>',
+                file: this.#cleanFilePath(file),
+                line: parseInt(lineNum, 10),
+                column: parseInt(col, 10),
+                isUserCode: this.#isUserCode(file)
+            };
+        }
+
+        return null;
+    }
+
+    #cleanFilePath(file: string): string {
+        return file
+            .replace(/^https?:\/\/[^/]+/, '')
+            .replace(/\?.*$/, '');
+    }
+
+    #isUserCode(file: string): boolean {
+        const nonUserPatterns = [
+            /node_modules/,
+            /^\[native code\]/,
+            /<anonymous>/,
+            /^internal\//,
+            /^node:/,
+            /extensions\//,
+            /juxscript\/lib\/componentsv2/
+        ];
+        return !nonUserPatterns.some(p => p.test(file));
+    }
+
+    #findCulprit(stack: StackFrame[]): StackFrame | null {
+        return stack.find(frame => frame.isUserCode) || stack[0] || null;
+    }
+
+    // --- Global Error Handler ---
+
+    static installGlobalHandler(engine: JuxErrorEngine): () => void {
+        const errorHandler = (event: ErrorEvent) => {
+            engine.show(event.error || event.message, 'runtime');
+            event.preventDefault();
+        };
+
+        const rejectionHandler = (event: PromiseRejectionEvent) => {
+            const error = event.reason instanceof Error
+                ? event.reason
+                : new Error(String(event.reason));
+            engine.show(error, 'runtime');
+            event.preventDefault();
+        };
+
+        window.addEventListener('error', errorHandler);
+        window.addEventListener('unhandledrejection', rejectionHandler);
+
+        // Return cleanup function
+        return () => {
+            window.removeEventListener('error', errorHandler);
+            window.removeEventListener('unhandledrejection', rejectionHandler);
+        };
+    }
+}

package/lib/componentsv2/juxerror/skin.d.ts

@@ -0,0 +1,11 @@
+import { BaseSkin } from '../base/BaseSkin.js';
+import { JuxErrorEngine, JuxErrorState } from './engine.js';
+export declare class JuxErrorSkin extends BaseSkin<JuxErrorState, JuxErrorEngine> {
+    #private;
+    constructor(engine: JuxErrorEngine);
+    protected get structureCss(): string;
+    protected createRoot(): HTMLElement;
+    protected updateSkin(state: JuxErrorState): void;
+    protected bindEvents(root: HTMLElement): void;
+}
+//# sourceMappingURL=skin.d.ts.map

package/lib/componentsv2/juxerror/skin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin.d.ts","sourceRoot":"","sources":["skin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,aAAa,EAAc,MAAM,aAAa,CAAC;AAGxE,qBAAa,YAAa,SAAQ,QAAQ,CAAC,aAAa,EAAE,cAAc,CAAC;;gBAIzD,MAAM,EAAE,cAAc;IAIlC,SAAS,KAAK,YAAY,IAAI,MAAM,CAEnC;IAED,SAAS,CAAC,UAAU,IAAI,WAAW;IAanC,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAyIhD,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;CAiChD"}

package/lib/componentsv2/juxerror/skin.js

@@ -0,0 +1,180 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _JuxErrorSkin_instances, _JuxErrorSkin_overlay, _JuxErrorSkin_keydownHandler, _JuxErrorSkin_renderError, _JuxErrorSkin_renderCulprit, _JuxErrorSkin_renderStackSection, _JuxErrorSkin_renderFrame, _JuxErrorSkin_getTypeIcon, _JuxErrorSkin_formatTime, _JuxErrorSkin_escapeHtml, _JuxErrorSkin_copyErrorDetails;
+import { BaseSkin } from '../base/BaseSkin.js';
+import structureCss from './structure.css';
+export class JuxErrorSkin extends BaseSkin {
+    constructor(engine) {
+        super(engine);
+        _JuxErrorSkin_instances.add(this);
+        _JuxErrorSkin_overlay.set(this, null);
+        _JuxErrorSkin_keydownHandler.set(this, null);
+    }
+    get structureCss() {
+        return structureCss;
+    }
+    createRoot() {
+        const root = document.createElement('div');
+        root.className = 'jux-error-root';
+        __classPrivateFieldSet(this, _JuxErrorSkin_overlay, document.createElement('div'), "f");
+        __classPrivateFieldGet(this, _JuxErrorSkin_overlay, "f").className = 'jux-error-overlay';
+        __classPrivateFieldGet(this, _JuxErrorSkin_overlay, "f").setAttribute('aria-live', 'assertive');
+        __classPrivateFieldGet(this, _JuxErrorSkin_overlay, "f").setAttribute('role', 'alert');
+        root.appendChild(__classPrivateFieldGet(this, _JuxErrorSkin_overlay, "f"));
+        return root;
+    }
+    updateSkin(state) {
+        if (!__classPrivateFieldGet(this, _JuxErrorSkin_overlay, "f") || !this.root)
+            return;
+        // Apply base attributes
+        this.applySkinAttributes(this.root, state);
+        if (!state.visible) {
+            __classPrivateFieldGet(this, _JuxErrorSkin_overlay, "f").classList.remove('jux-error-visible');
+            __classPrivateFieldGet(this, _JuxErrorSkin_overlay, "f").innerHTML = '';
+            return;
+        }
+        __classPrivateFieldGet(this, _JuxErrorSkin_overlay, "f").classList.add('jux-error-visible');
+        __classPrivateFieldGet(this, _JuxErrorSkin_overlay, "f").innerHTML = __classPrivateFieldGet(this, _JuxErrorSkin_instances, "m", _JuxErrorSkin_renderError).call(this, state);
+    }
+    bindEvents(root) {
+        root.addEventListener('click', (e) => {
+            const target = e.target;
+            // Close button or backdrop
+            if (target.closest('.jux-error-close') ||
+                target.closest('.jux-error-dismiss') ||
+                target.closest('.jux-error-backdrop')) {
+                this.engine.dismiss();
+                return;
+            }
+            // Toggle stack trace
+            if (target.closest('.jux-error-stack-toggle')) {
+                this.engine.toggleExpanded();
+                return;
+            }
+            // Copy button
+            if (target.closest('.jux-error-copy')) {
+                __classPrivateFieldGet(this, _JuxErrorSkin_instances, "m", _JuxErrorSkin_copyErrorDetails).call(this);
+                return;
+            }
+        });
+        // ESC key to dismiss
+        __classPrivateFieldSet(this, _JuxErrorSkin_keydownHandler, (e) => {
+            if (e.key === 'Escape' && this.engine.state.visible) {
+                this.engine.dismiss();
+            }
+        }, "f");
+        document.addEventListener('keydown', __classPrivateFieldGet(this, _JuxErrorSkin_keydownHandler, "f"));
+    }
+}
+_JuxErrorSkin_overlay = new WeakMap(), _JuxErrorSkin_keydownHandler = new WeakMap(), _JuxErrorSkin_instances = new WeakSet(), _JuxErrorSkin_renderError = function _JuxErrorSkin_renderError(state) {
+    const typeIcon = __classPrivateFieldGet(this, _JuxErrorSkin_instances, "m", _JuxErrorSkin_getTypeIcon).call(this, state.errorType);
+    const typeClass = `jux-error-type-${state.errorType}`;
+    return `
+            <div class="jux-error-backdrop"></div>
+            <div class="jux-error-dialog ${typeClass}">
+                <header class="jux-error-header">
+                    <span class="jux-error-icon">${typeIcon}</span>
+                    <h2 class="jux-error-title">${__classPrivateFieldGet(this, _JuxErrorSkin_instances, "m", _JuxErrorSkin_escapeHtml).call(this, state.title)}</h2>
+                    <button class="jux-error-close" aria-label="Dismiss error">×</button>
+                </header>
+                
+                <div class="jux-error-body">
+                    <p class="jux-error-message">${__classPrivateFieldGet(this, _JuxErrorSkin_instances, "m", _JuxErrorSkin_escapeHtml).call(this, state.message)}</p>
+                    
+                    ${state.culpritFrame ? __classPrivateFieldGet(this, _JuxErrorSkin_instances, "m", _JuxErrorSkin_renderCulprit).call(this, state.culpritFrame) : ''}
+                    
+                    ${state.stack.length > 0 ? __classPrivateFieldGet(this, _JuxErrorSkin_instances, "m", _JuxErrorSkin_renderStackSection).call(this, state) : ''}
+                </div>
+                
+                <footer class="jux-error-footer">
+                    <span class="jux-error-timestamp">${__classPrivateFieldGet(this, _JuxErrorSkin_instances, "m", _JuxErrorSkin_formatTime).call(this, state.timestamp)}</span>
+                    <div class="jux-error-actions">
+                        <button class="jux-error-copy" title="Copy error details">📋 Copy</button>
+                        <button class="jux-error-dismiss">Dismiss</button>
+                    </div>
+                </footer>
+            </div>
+        `;
+}, _JuxErrorSkin_renderCulprit = function _JuxErrorSkin_renderCulprit(frame) {
+    return `
+            <div class="jux-error-culprit">
+                <div class="jux-error-culprit-header">
+                    <span class="jux-error-culprit-icon">👉</span>
+                    <span class="jux-error-culprit-file">${__classPrivateFieldGet(this, _JuxErrorSkin_instances, "m", _JuxErrorSkin_escapeHtml).call(this, frame.file)}</span>
+                    <span class="jux-error-culprit-location">:${frame.line}:${frame.column}</span>
+                </div>
+                ${frame.code ? `
+                    <pre class="jux-error-culprit-code"><code>${__classPrivateFieldGet(this, _JuxErrorSkin_instances, "m", _JuxErrorSkin_escapeHtml).call(this, frame.code)}</code></pre>
+                ` : ''}
+                <div class="jux-error-culprit-function">
+                    in <code>${__classPrivateFieldGet(this, _JuxErrorSkin_instances, "m", _JuxErrorSkin_escapeHtml).call(this, frame.function)}</code>
+                </div>
+            </div>
+        `;
+}, _JuxErrorSkin_renderStackSection = function _JuxErrorSkin_renderStackSection(state) {
+    const expandedClass = state.expanded ? 'jux-error-stack-expanded' : '';
+    return `
+            <div class="jux-error-stack-section ${expandedClass}">
+                <button class="jux-error-stack-toggle">
+                    <span class="jux-error-stack-toggle-icon">${state.expanded ? '▼' : '▶'}</span>
+                    Stack Trace (${state.stack.length} frames)
+                </button>
+                <div class="jux-error-stack-frames">
+                    ${state.stack.map((frame, i) => __classPrivateFieldGet(this, _JuxErrorSkin_instances, "m", _JuxErrorSkin_renderFrame).call(this, frame, i)).join('')}
+                </div>
+            </div>
+        `;
+}, _JuxErrorSkin_renderFrame = function _JuxErrorSkin_renderFrame(frame, index) {
+    const userClass = frame.isUserCode ? 'jux-error-frame-user' : 'jux-error-frame-lib';
+    return `
+            <div class="jux-error-frame ${userClass}" data-index="${index}">
+                <span class="jux-error-frame-index">${index}</span>
+                <span class="jux-error-frame-function">${__classPrivateFieldGet(this, _JuxErrorSkin_instances, "m", _JuxErrorSkin_escapeHtml).call(this, frame.function)}</span>
+                <span class="jux-error-frame-location">
+                    ${__classPrivateFieldGet(this, _JuxErrorSkin_instances, "m", _JuxErrorSkin_escapeHtml).call(this, frame.file)}:${frame.line}:${frame.column}
+                </span>
+            </div>
+        `;
+}, _JuxErrorSkin_getTypeIcon = function _JuxErrorSkin_getTypeIcon(type) {
+    const icons = {
+        runtime: '💥',
+        compile: '🔨',
+        network: '🌐',
+        validation: '⚠️',
+        unknown: '❓'
+    };
+    return icons[type];
+}, _JuxErrorSkin_formatTime = function _JuxErrorSkin_formatTime(timestamp) {
+    return new Date(timestamp).toLocaleTimeString();
+}, _JuxErrorSkin_escapeHtml = function _JuxErrorSkin_escapeHtml(str) {
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+}, _JuxErrorSkin_copyErrorDetails = function _JuxErrorSkin_copyErrorDetails() {
+    const state = this.engine.state;
+    const details = [
+        `${state.title}: ${state.message}`,
+        '',
+        state.culpritFrame ? `File: ${state.culpritFrame.file}:${state.culpritFrame.line}` : '',
+        '',
+        'Stack Trace:',
+        ...state.stack.map(f => `  at ${f.function} (${f.file}:${f.line}:${f.column})`)
+    ].filter(Boolean).join('\n');
+    navigator.clipboard.writeText(details).then(() => {
+        const copyBtn = __classPrivateFieldGet(this, _JuxErrorSkin_overlay, "f")?.querySelector('.jux-error-copy');
+        if (copyBtn) {
+            copyBtn.textContent = '✓ Copied!';
+            setTimeout(() => { copyBtn.textContent = '📋 Copy'; }, 1500);
+        }
+    });
+};
+//# sourceMappingURL=skin.js.map

package/lib/componentsv2/juxerror/skin.js.map

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

package/lib/componentsv2/juxerror/skin.ts

@@ -0,0 +1,200 @@
+import { BaseSkin } from '../base/BaseSkin.js';
+import { JuxErrorEngine, JuxErrorState, StackFrame } from './engine.js';
+import structureCss from './structure.css';
+
+export class JuxErrorSkin extends BaseSkin<JuxErrorState, JuxErrorEngine> {
+    #overlay: HTMLElement | null = null;
+    #keydownHandler: ((e: KeyboardEvent) => void) | null = null;
+
+    constructor(engine: JuxErrorEngine) {
+        super(engine);
+    }
+
+    protected get structureCss(): string {
+        return structureCss;
+    }
+
+    protected createRoot(): HTMLElement {
+        const root = document.createElement('div');
+        root.className = 'jux-error-root';
+
+        this.#overlay = document.createElement('div');
+        this.#overlay.className = 'jux-error-overlay';
+        this.#overlay.setAttribute('aria-live', 'assertive');
+        this.#overlay.setAttribute('role', 'alert');
+        root.appendChild(this.#overlay);
+
+        return root;
+    }
+
+    protected updateSkin(state: JuxErrorState): void {
+        if (!this.#overlay || !this.root) return;
+
+        // Apply base attributes
+        this.applySkinAttributes(this.root, state);
+
+        if (!state.visible) {
+            this.#overlay.classList.remove('jux-error-visible');
+            this.#overlay.innerHTML = '';
+            return;
+        }
+
+        this.#overlay.classList.add('jux-error-visible');
+        this.#overlay.innerHTML = this.#renderError(state);
+    }
+
+    #renderError(state: JuxErrorState): string {
+        const typeIcon = this.#getTypeIcon(state.errorType);
+        const typeClass = `jux-error-type-${state.errorType}`;
+
+        return `
+            <div class="jux-error-backdrop"></div>
+            <div class="jux-error-dialog ${typeClass}">
+                <header class="jux-error-header">
+                    <span class="jux-error-icon">${typeIcon}</span>
+                    <h2 class="jux-error-title">${this.#escapeHtml(state.title)}</h2>
+                    <button class="jux-error-close" aria-label="Dismiss error">×</button>
+                </header>
+                
+                <div class="jux-error-body">
+                    <p class="jux-error-message">${this.#escapeHtml(state.message)}</p>
+                    
+                    ${state.culpritFrame ? this.#renderCulprit(state.culpritFrame) : ''}
+                    
+                    ${state.stack.length > 0 ? this.#renderStackSection(state) : ''}
+                </div>
+                
+                <footer class="jux-error-footer">
+                    <span class="jux-error-timestamp">${this.#formatTime(state.timestamp)}</span>
+                    <div class="jux-error-actions">
+                        <button class="jux-error-copy" title="Copy error details">📋 Copy</button>
+                        <button class="jux-error-dismiss">Dismiss</button>
+                    </div>
+                </footer>
+            </div>
+        `;
+    }
+
+    #renderCulprit(frame: StackFrame): string {
+        return `
+            <div class="jux-error-culprit">
+                <div class="jux-error-culprit-header">
+                    <span class="jux-error-culprit-icon">👉</span>
+                    <span class="jux-error-culprit-file">${this.#escapeHtml(frame.file)}</span>
+                    <span class="jux-error-culprit-location">:${frame.line}:${frame.column}</span>
+                </div>
+                ${frame.code ? `
+                    <pre class="jux-error-culprit-code"><code>${this.#escapeHtml(frame.code)}</code></pre>
+                ` : ''}
+                <div class="jux-error-culprit-function">
+                    in <code>${this.#escapeHtml(frame.function)}</code>
+                </div>
+            </div>
+        `;
+    }
+
+    #renderStackSection(state: JuxErrorState): string {
+        const expandedClass = state.expanded ? 'jux-error-stack-expanded' : '';
+
+        return `
+            <div class="jux-error-stack-section ${expandedClass}">
+                <button class="jux-error-stack-toggle">
+                    <span class="jux-error-stack-toggle-icon">${state.expanded ? '▼' : '▶'}</span>
+                    Stack Trace (${state.stack.length} frames)
+                </button>
+                <div class="jux-error-stack-frames">
+                    ${state.stack.map((frame, i) => this.#renderFrame(frame, i)).join('')}
+                </div>
+            </div>
+        `;
+    }
+
+    #renderFrame(frame: StackFrame, index: number): string {
+        const userClass = frame.isUserCode ? 'jux-error-frame-user' : 'jux-error-frame-lib';
+
+        return `
+            <div class="jux-error-frame ${userClass}" data-index="${index}">
+                <span class="jux-error-frame-index">${index}</span>
+                <span class="jux-error-frame-function">${this.#escapeHtml(frame.function)}</span>
+                <span class="jux-error-frame-location">
+                    ${this.#escapeHtml(frame.file)}:${frame.line}:${frame.column}
+                </span>
+            </div>
+        `;
+    }
+
+    #getTypeIcon(type: JuxErrorState['errorType']): string {
+        const icons: Record<JuxErrorState['errorType'], string> = {
+            runtime: '💥',
+            compile: '🔨',
+            network: '🌐',
+            validation: '⚠️',
+            unknown: '❓'
+        };
+        return icons[type];
+    }
+
+    #formatTime(timestamp: number): string {
+        return new Date(timestamp).toLocaleTimeString();
+    }
+
+    #escapeHtml(str: string): string {
+        const div = document.createElement('div');
+        div.textContent = str;
+        return div.innerHTML;
+    }
+
+    #copyErrorDetails(): void {
+        const state = this.engine.state;
+        const details = [
+            `${state.title}: ${state.message}`,
+            '',
+            state.culpritFrame ? `File: ${state.culpritFrame.file}:${state.culpritFrame.line}` : '',
+            '',
+            'Stack Trace:',
+            ...state.stack.map(f => `  at ${f.function} (${f.file}:${f.line}:${f.column})`)
+        ].filter(Boolean).join('\n');
+
+        navigator.clipboard.writeText(details).then(() => {
+            const copyBtn = this.#overlay?.querySelector('.jux-error-copy');
+            if (copyBtn) {
+                copyBtn.textContent = '✓ Copied!';
+                setTimeout(() => { copyBtn.textContent = '📋 Copy'; }, 1500);
+            }
+        });
+    }
+
+    protected bindEvents(root: HTMLElement): void {
+        root.addEventListener('click', (e: MouseEvent) => {
+            const target = e.target as HTMLElement;
+
+            // Close button or backdrop
+            if (target.closest('.jux-error-close') ||
+                target.closest('.jux-error-dismiss') ||
+                target.closest('.jux-error-backdrop')) {
+                this.engine.dismiss();
+                return;
+            }
+
+            // Toggle stack trace
+            if (target.closest('.jux-error-stack-toggle')) {
+                this.engine.toggleExpanded();
+                return;
+            }
+
+            // Copy button
+            if (target.closest('.jux-error-copy')) {
+                this.#copyErrorDetails();
+                return;
+            }
+        });
+
+        // ESC key to dismiss
+        this.#keydownHandler = (e: KeyboardEvent) => {
+            if (e.key === 'Escape' && this.engine.state.visible) {
+                this.engine.dismiss();
+            }
+        };
+        document.addEventListener('keydown', this.#keydownHandler);
+    }
+}