vista-core-js 0.0.2

package/src/entry-server.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import ReactDOMServer, { renderToPipeableStream } from 'react-dom/server';
+import { RouterProvider } from './router';
+import App from './app.js';
+import { loadRoute, loadRootLayout } from './router-loader.js';
+
+export async function render(
+    url: string,
+    options: {
+        onShellReady?: () => void,
+        onAllReady?: () => void,
+        onError?: (err: unknown) => void,
+        bootstrapModules?: string[],
+        stylesheets?: string[],
+        preamble?: string // New option for Preamble Content
+    } = {}
+) {
+    // Preload Root Layout synchronously for the render pass
+    let initialRootLayout;
+    let initialMetadata = {};
+
+    try {
+        const result = await loadRootLayout();
+        initialRootLayout = result.Component;
+        initialMetadata = result.metadata;
+    } catch (e) {
+        console.error('Server failed to load root layout', e);
+    }
+
+    // Construct Assets Array
+    const assets: any[] = [];
+
+    // 1. Preamble (if any)
+    if (options.preamble) {
+        assets.push({ type: 'preamble', content: options.preamble, key: 'preamble' });
+    }
+
+    // 2. Stylesheets
+    options.stylesheets?.forEach(src => {
+        assets.push({ type: 'style', src, key: src });
+    });
+
+    // 3. Bootstrap Scripts
+    options.bootstrapModules?.forEach(src => {
+        assets.push({ type: 'script', src, key: src });
+    });
+
+    return renderToPipeableStream(
+        <RouterProvider url={url}>
+            <App
+                initialRootLayout={initialRootLayout || undefined}
+                metadata={initialMetadata}
+                assets={assets}
+            />
+        </RouterProvider>,
+        options
+    );
+}

package/src/error-overlay.ts

@@ -0,0 +1,187 @@
+export function showErrorOverlay(err: Error, title: string = 'Application Error') {
+    if (typeof document === 'undefined') return;
+    
+    // Check if overlay already exists
+    if (document.getElementById('vista-error-overlay')) return;
+
+    // Create fonts and animations
+    const style = document.createElement('style');
+    style.innerHTML = `
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
+        
+        .vista-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
+        .vista-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 4px; }
+        .vista-scrollbar::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
+        .vista-scrollbar::-webkit-scrollbar-thumb:hover { background: #555; }
+        
+        @keyframes vistaFadeIn { from { opacity: 0; } to { opacity: 1; } }
+        @keyframes vistaSlideUp { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+        @keyframes vistaPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 85, 85, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 85, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 85, 85, 0); } }
+    `;
+    document.head.appendChild(style);
+
+    const overlay = document.createElement('div');
+    overlay.id = 'vista-error-overlay';
+    // Overlay handles blocking interaction when expanded, but lets clicks through when minimized
+    overlay.style.cssText = `
+        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
+        z-index: 2147483647; display: flex; align-items: center; justify-content: center;
+        font-family: 'Inter', -apple-system, sans-serif; color: #fff;
+        pointer-events: auto; background: rgba(0, 0, 0, 0.85);
+        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
+        transition: all 0.3s ease;
+    `;
+
+    const container = document.createElement('div');
+    container.style.cssText = `
+        background: #0A0A0A; border: 1px solid #333; border-radius: 16px;
+        box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 24px 72px rgba(0,0,0,0.5);
+        width: 90%; max-width: 900px; max-height: 85vh;
+        display: flex; flex-direction: column; overflow: hidden;
+        animation: vistaSlideUp 0.3s ease-out 0.1s backwards;
+        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
+    `;
+
+    // HEADER
+    const header = document.createElement('div');
+    header.style.cssText = `
+        padding: 16px 24px; border-bottom: 1px solid #222; background: rgba(255,255,255,0.02);
+        display: flex; align-items: center; justify-content: space-between;
+    `;
+
+    const titleGroup = document.createElement('div');
+    titleGroup.style.display = 'flex';
+    titleGroup.style.alignItems = 'center';
+    titleGroup.style.gap = '12px';
+    titleGroup.innerHTML = `
+        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" width="20" height="20" style="color: #FF5555;">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+        </svg>
+        <div style="font-size: 14px; font-weight: 600; color: #EDEDED;">${title}</div>
+    `;
+
+    const actions = document.createElement('div');
+    actions.style.display = 'flex';
+    actions.style.gap = '8px';
+
+    const minimizeBtn = document.createElement('button');
+    minimizeBtn.innerHTML = `
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="5" y1="12" x2="19" y2="12"></line>
+        </svg>
+    `;
+    minimizeBtn.title = "Minimize Overlay";
+    minimizeBtn.style.cssText = `
+        background: transparent; border: none; color: #888; cursor: pointer;
+        padding: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
+    `;
+    minimizeBtn.onmouseover = () => { minimizeBtn.style.background = 'rgba(255,255,255,0.1)'; minimizeBtn.style.color = '#fff'; };
+    minimizeBtn.onmouseout = () => { minimizeBtn.style.background = 'transparent'; minimizeBtn.style.color = '#888'; };
+
+    const closeBtn = document.createElement('button'); // Reuse logic for minimize
+    
+    actions.appendChild(minimizeBtn);
+    header.appendChild(titleGroup);
+    header.appendChild(actions);
+
+    // BODY
+    const body = document.createElement('div');
+    body.className = 'vista-scrollbar';
+    body.style.cssText = `padding: 24px; overflow-y: auto; flex: 1;`;
+
+    const message = document.createElement('h2');
+    message.style.cssText = `margin: 0 0 20px 0; font-size: 18px; font-weight: 500; line-height: 1.4; color: #ffffff;`;
+    message.textContent = err.message || 'Unknown Error';
+
+    const stackContainer = document.createElement('div');
+    stackContainer.style.cssText = `
+        background: #111; border: 1px solid #222; border-radius: 8px; padding: 16px;
+        overflow-x: auto; font-family: 'JetBrains Mono', monospace; font-size: 12px;
+        line-height: 1.6; color: #A1A1AA;
+    `;
+    
+    const stack = err.stack ? err.stack.replace(err.message, '') : '';
+    const formattedStack = stack.split('\n').filter(line => line.trim() !== '')
+        .map(line => line.replace(/(\(.*\))/, '<span style="color: #666;">$1</span>').replace(/(at\s+)/, '<span style="color: #FF5555;">$1</span>'))
+        .join('\n');
+    stackContainer.innerHTML = `<pre style="margin:0">${formattedStack || 'No stack trace available.'}</pre>`;
+
+    body.appendChild(message);
+    body.appendChild(stackContainer);
+
+    // FOOTER
+    const footer = document.createElement('div');
+    footer.style.cssText = `
+        padding: 16px 24px; border-top: 1px solid #222; background: #0A0A0A;
+        display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #555;
+    `;
+    footer.innerHTML = `
+        <span>Vista Framework Debugger</span>
+        <button onclick="window.location.reload()" style="
+            background: #fff; color: #000; border: none; padding: 6px 12px; border-radius: 6px;
+            font-weight: 600; font-size: 13px; cursor: pointer; transition: opacity 0.2s;
+        " onmouseover="this.style.opacity=0.9" onmouseout="this.style.opacity=1">Reload Page</button>
+    `;
+
+    container.appendChild(header);
+    container.appendChild(body);
+    container.appendChild(footer);
+    overlay.appendChild(container);
+
+    // RESTORE BADGE (Hidden primarily)
+    const restoreBadge = document.createElement('div');
+    restoreBadge.style.cssText = `
+        position: fixed; bottom: 20px; right: 20px;
+        background: #FF5555; color: white;
+        padding: 10px 16px; border-radius: 30px;
+        font-weight: 600; font-size: 13px;
+        box-shadow: 0 4px 12px rgba(255, 85, 85, 0.4);
+        cursor: pointer; z-index: 2147483647;
+        display: flex; align-items: center; gap: 8px;
+        transform: translateY(100px); opacity: 0;
+        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+        animation: vistaPulse 2s infinite;
+    `;
+    restoreBadge.innerHTML = `
+        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" width="16" height="16">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+        </svg>
+        <span>Error Detected</span>
+    `;
+
+    document.body.appendChild(restoreBadge);
+    document.body.appendChild(overlay);
+
+    // LOGIC
+    let isMinimized = false;
+
+    const toggleMinimize = () => {
+        isMinimized = !isMinimized;
+        if (isMinimized) {
+            // Minimize
+            container.style.transform = 'scale(0.9) translateY(20px)';
+            container.style.opacity = '0';
+            overlay.style.background = 'rgba(0,0,0,0)';
+            overlay.style.backdropFilter = 'none';
+            (overlay.style as any).webkitBackdropFilter = 'none';
+            overlay.style.pointerEvents = 'none';
+            
+            restoreBadge.style.transform = 'translateY(0)';
+            restoreBadge.style.opacity = '1';
+        } else {
+            // Restore
+            container.style.transform = 'scale(1) translateY(0)';
+            container.style.opacity = '1';
+            overlay.style.background = 'rgba(0, 0, 0, 0.85)';
+            overlay.style.backdropFilter = 'blur(12px)';
+            (overlay.style as any).webkitBackdropFilter = 'blur(12px)';
+            overlay.style.pointerEvents = 'auto';
+            
+            restoreBadge.style.transform = 'translateY(100px)';
+            restoreBadge.style.opacity = '0';
+        }
+    };
+
+    minimizeBtn.onclick = toggleMinimize;
+    restoreBadge.onclick = toggleMinimize;
+}