juxscript 1.0.88 → 1.0.89

package/lib/componentsv2/juxerror/skin.ts

@@ -1,200 +0,0 @@
-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);
-    }
-}

package/lib/componentsv2/juxerror/structure.css

@@ -1,351 +0,0 @@
-/* ========================================
-   JUX Error Overlay - Vite-style
-   ======================================== */
-
-.jux-error-overlay {
-    --jux-err-bg: #1a1a1a;
-    --jux-err-surface: #242424;
-    --jux-err-border: #333;
-    --jux-err-text: #e0e0e0;
-    --jux-err-text-dim: #888;
-    --jux-err-accent: #ff5555;
-    --jux-err-accent-compile: #ffaa00;
-    --jux-err-accent-network: #55aaff;
-    --jux-err-accent-validation: #ffcc00;
-    --jux-err-code-bg: #2d2d2d;
-    --jux-err-user-frame: #4ade80;
-    --jux-err-lib-frame: #666;
-    --jux-err-radius: 8px;
-    --jux-err-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-
-    position: fixed;
-    inset: 0;
-    z-index: 99999;
-    display: none;
-    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
-    font-size: 14px;
-    line-height: 1.5;
-}
-
-.jux-error-overlay.jux-error-visible {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-/* Backdrop */
-.jux-error-backdrop {
-    position: absolute;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.75);
-    backdrop-filter: blur(4px);
-}
-
-/* Dialog */
-.jux-error-dialog {
-    position: relative;
-    width: 90%;
-    max-width: 800px;
-    max-height: 85vh;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    background: var(--jux-err-bg);
-    border: 1px solid var(--jux-err-border);
-    border-radius: var(--jux-err-radius);
-    box-shadow: var(--jux-err-shadow);
-    animation: jux-error-slide-in 0.2s ease-out;
-}
-
-@keyframes jux-error-slide-in {
-    from {
-        opacity: 0;
-        transform: translateY(-20px) scale(0.98);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
-}
-
-/* Type-specific accent colors */
-.jux-error-type-runtime { --jux-err-current-accent: var(--jux-err-accent); }
-.jux-error-type-compile { --jux-err-current-accent: var(--jux-err-accent-compile); }
-.jux-error-type-network { --jux-err-current-accent: var(--jux-err-accent-network); }
-.jux-error-type-validation { --jux-err-current-accent: var(--jux-err-accent-validation); }
-.jux-error-type-unknown { --jux-err-current-accent: var(--jux-err-accent); }
-
-/* Header */
-.jux-error-header {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 16px 20px;
-    background: var(--jux-err-surface);
-    border-bottom: 1px solid var(--jux-err-border);
-    border-left: 4px solid var(--jux-err-current-accent);
-}
-
-.jux-error-icon {
-    font-size: 24px;
-    line-height: 1;
-}
-
-.jux-error-title {
-    flex: 1;
-    margin: 0;
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--jux-err-current-accent);
-}
-
-.jux-error-close {
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: transparent;
-    border: none;
-    border-radius: 4px;
-    color: var(--jux-err-text-dim);
-    font-size: 24px;
-    cursor: pointer;
-    transition: background 0.15s, color 0.15s;
-}
-
-.jux-error-close:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: var(--jux-err-text);
-}
-
-/* Body */
-.jux-error-body {
-    flex: 1;
-    overflow-y: auto;
-    padding: 20px;
-}
-
-.jux-error-message {
-    margin: 0 0 20px;
-    padding: 16px;
-    background: var(--jux-err-code-bg);
-    border-radius: var(--jux-err-radius);
-    color: var(--jux-err-text);
-    white-space: pre-wrap;
-    word-break: break-word;
-}
-
-/* Culprit Section */
-.jux-error-culprit {
-    margin-bottom: 20px;
-    padding: 16px;
-    background: var(--jux-err-surface);
-    border: 1px solid var(--jux-err-current-accent);
-    border-radius: var(--jux-err-radius);
-}
-
-.jux-error-culprit-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 12px;
-    font-weight: 600;
-}
-
-.jux-error-culprit-icon {
-    font-size: 18px;
-}
-
-.jux-error-culprit-file {
-    color: var(--jux-err-current-accent);
-}
-
-.jux-error-culprit-location {
-    color: var(--jux-err-text-dim);
-}
-
-.jux-error-culprit-code {
-    margin: 12px 0;
-    padding: 12px;
-    background: var(--jux-err-code-bg);
-    border-radius: 4px;
-    overflow-x: auto;
-}
-
-.jux-error-culprit-code code {
-    color: var(--jux-err-text);
-}
-
-.jux-error-culprit-function {
-    color: var(--jux-err-text-dim);
-    font-size: 13px;
-}
-
-.jux-error-culprit-function code {
-    color: var(--jux-err-user-frame);
-}
-
-/* Stack Trace Section */
-.jux-error-stack-section {
-    border: 1px solid var(--jux-err-border);
-    border-radius: var(--jux-err-radius);
-    overflow: hidden;
-}
-
-.jux-error-stack-toggle {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 16px;
-    background: var(--jux-err-surface);
-    border: none;
-    color: var(--jux-err-text);
-    font-family: inherit;
-    font-size: 14px;
-    cursor: pointer;
-    transition: background 0.15s;
-}
-
-.jux-error-stack-toggle:hover {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-.jux-error-stack-toggle-icon {
-    font-size: 10px;
-    color: var(--jux-err-text-dim);
-}
-
-.jux-error-stack-frames {
-    display: none;
-    max-height: 300px;
-    overflow-y: auto;
-}
-
-.jux-error-stack-expanded .jux-error-stack-frames {
-    display: block;
-}
-
-.jux-error-frame {
-    display: grid;
-    grid-template-columns: 30px 1fr auto;
-    gap: 12px;
-    padding: 8px 16px;
-    border-top: 1px solid var(--jux-err-border);
-    font-size: 13px;
-}
-
-.jux-error-frame:hover {
-    background: rgba(255, 255, 255, 0.02);
-}
-
-.jux-error-frame-index {
-    color: var(--jux-err-text-dim);
-    text-align: right;
-}
-
-.jux-error-frame-function {
-    color: var(--jux-err-lib-frame);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.jux-error-frame-user .jux-error-frame-function {
-    color: var(--jux-err-user-frame);
-    font-weight: 500;
-}
-
-.jux-error-frame-location {
-    color: var(--jux-err-text-dim);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    direction: rtl;
-    text-align: left;
-}
-
-/* Footer */
-.jux-error-footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 20px;
-    background: var(--jux-err-surface);
-    border-top: 1px solid var(--jux-err-border);
-}
-
-.jux-error-timestamp {
-    color: var(--jux-err-text-dim);
-    font-size: 12px;
-}
-
-.jux-error-actions {
-    display: flex;
-    gap: 8px;
-}
-
-.jux-error-actions button {
-    padding: 8px 16px;
-    background: var(--jux-err-code-bg);
-    border: 1px solid var(--jux-err-border);
-    border-radius: 4px;
-    color: var(--jux-err-text);
-    font-family: inherit;
-    font-size: 13px;
-    cursor: pointer;
-    transition: background 0.15s, border-color 0.15s;
-}
-
-.jux-error-actions button:hover {
-    background: rgba(255, 255, 255, 0.1);
-    border-color: var(--jux-err-text-dim);
-}
-
-.jux-error-dismiss {
-    background: var(--jux-err-current-accent) !important;
-    border-color: var(--jux-err-current-accent) !important;
-    color: #000 !important;
-    font-weight: 500;
-}
-
-.jux-error-dismiss:hover {
-    filter: brightness(1.1);
-}
-
-/* Scrollbar styling */
-.jux-error-body::-webkit-scrollbar,
-.jux-error-stack-frames::-webkit-scrollbar {
-    width: 8px;
-}
-
-.jux-error-body::-webkit-scrollbar-track,
-.jux-error-stack-frames::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.jux-error-body::-webkit-scrollbar-thumb,
-.jux-error-stack-frames::-webkit-scrollbar-thumb {
-    background: var(--jux-err-border);
-    border-radius: 4px;
-}
-
-.jux-error-body::-webkit-scrollbar-thumb:hover,
-.jux-error-stack-frames::-webkit-scrollbar-thumb:hover {
-    background: var(--jux-err-text-dim);
-}
-
-.jux-juxerror {
-    display: block;
-    padding: var(--space-md);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-sm);
-    background-color: var(--color-surface-base);
-    color: var(--color-text-primary);
-    transition: all var(--transition-fast);
-}
-
-.jux-juxerror:hover {
-    background-color: var(--color-surface-hover);
-}