juxscript 1.1.153 → 1.1.154

package/machinery/errors.js

@@ -1,19 +1,16 @@
 /**
  * Generates an injectable client-side error collector script.
- * Catches runtime errors, unhandled promise rejections, and console.error calls.
- * Displays them in a floating overlay panel in the browser.
+ * Full-screen overlay similar to Vite's error screen.
  *
  * @param {Object} options
- * @param {boolean} [options.enabled=true] - Whether to enable the collector
- * @param {number} [options.maxErrors=50] - Max errors to keep in buffer
- * @param {string} [options.position='bottom-right'] - Panel position
+ * @param {boolean} [options.enabled=true]
+ * @param {number} [options.maxErrors=50]
  * @returns {string} Inline script to inject into HTML
  */
 export function generateErrorCollector(options = {}) {
     const {
         enabled = true,
-        maxErrors = 50,
-        position = 'bottom-right'
+        maxErrors = 50
     } = options;
 
     if (!enabled) return '';
@@ -21,93 +18,110 @@ export function generateErrorCollector(options = {}) {
     return `
 <script>
 (function() {
-    var __juxErrors = [];
-    var __juxMaxErrors = ${maxErrors};
-    var __juxPanel = null;
-    var __juxList = null;
-    var __juxBadge = null;
-    var __juxVisible = false;
-
-    var posMap = {
-        'bottom-right': 'bottom:12px;right:12px;',
-        'bottom-left':  'bottom:12px;left:12px;',
-        'top-right':    'top:12px;right:12px;',
-        'top-left':     'top:12px;left:12px;'
-    };
-    var panelPos = posMap['${position}'] || posMap['bottom-right'];
-
-    function createPanel() {
-        // Toggle button / badge
-        __juxBadge = document.createElement('div');
-        __juxBadge.id = '__jux-error-badge';
-        __juxBadge.setAttribute('style',
-            'position:fixed;' + panelPos +
-            'z-index:99999;width:36px;height:36px;border-radius:50%;' +
-            'background:#e74c3c;color:#fff;font-size:1rem;font-weight:bold;' +
-            'display:flex;align-items:center;justify-content:center;cursor:pointer;' +
-            'font-family:monospace;box-shadow:0 2px 8px rgba(0,0,0,0.3);'
-        );
-        __juxBadge.textContent = '0';
-        __juxBadge.addEventListener('click', togglePanel);
-        document.body.appendChild(__juxBadge);
-
-        // Panel
-        __juxPanel = document.createElement('div');
-        __juxPanel.id = '__jux-error-panel';
-        __juxPanel.setAttribute('style',
-            'position:fixed;bottom:56px;right:12px;z-index:99998;' +
-            'width:480px;max-height:360px;background:#1e1e1e;color:#f8f8f8;' +
-            'border:1px solid #e74c3c;border-radius:8px;font-family:monospace;' +
-            'font-size:1rem;display:flex;flex-direction:column;' +
-            'box-shadow:0 4px 16px rgba(0,0,0,0.4);'
-        );
-
-        // Header
+    var __errors = [];
+    var __maxErrors = ${maxErrors};
+    var __overlay = null;
+    var __list = null;
+
+    function createOverlay() {
+        __overlay = document.createElement('div');
+        __overlay.id = '__jux-error-overlay';
+        __overlay.setAttribute('style', [
+            'position:fixed',
+            'top:0',
+            'left:0',
+            'width:100vw',
+            'height:100vh',
+            'z-index:99999',
+            'background:rgba(0,0,0,0.85)',
+            'color:#f8f8f8',
+            'font-family:monospace',
+            'font-size:14px',
+            'overflow-y:auto',
+            'padding:0',
+            'margin:0',
+            'box-sizing:border-box'
+        ].join(';'));
+
+        var container = document.createElement('div');
+        container.setAttribute('style', [
+            'max-width:960px',
+            'margin:40px auto',
+            'padding:24px 32px',
+            'border:2px solid #ff5555',
+            'border-radius:8px',
+            'background:#1a1a1a'
+        ].join(';'));
+
+        // Title bar
         var header = document.createElement('div');
-        header.setAttribute('style',
-            'padding:8px 12px;background:#e74c3c;color:#fff;font-weight:bold;' +
-            'display:flex;justify-content:space-between;align-items:center;' +
-            'border-radius:7px 7px 0 0;'
-        );
-        header.innerHTML = '<span>⚠ Runtime Errors</span>';
+        header.setAttribute('style', [
+            'display:flex',
+            'justify-content:space-between',
+            'align-items:center',
+            'margin-bottom:16px',
+            'padding-bottom:12px',
+            'border-bottom:1px solid #333'
+        ].join(';'));
+
+        var title = document.createElement('div');
+        title.setAttribute('style', 'color:#ff5555;font-size:16px;font-weight:bold;');
+        title.textContent = 'Runtime Error';
+        header.appendChild(title);
+
+        var actions = document.createElement('div');
+        actions.setAttribute('style', 'display:flex;gap:8px;');
 
         var clearBtn = document.createElement('button');
         clearBtn.textContent = 'Clear';
-        clearBtn.setAttribute('style',
-            'background:transparent;border:1px solid #fff;color:#fff;' +
-            'padding:2px 8px;border-radius:4px;cursor:pointer;font-size:1rem;'
-        );
+        clearBtn.setAttribute('style', [
+            'background:transparent',
+            'border:1px solid #555',
+            'color:#aaa',
+            'padding:4px 12px',
+            'border-radius:4px',
+            'cursor:pointer',
+            'font-family:monospace',
+            'font-size:12px'
+        ].join(';'));
         clearBtn.addEventListener('click', clearErrors);
-        header.appendChild(clearBtn);
-
-        __juxPanel.appendChild(header);
-
-        // List
-        __juxList = document.createElement('div');
-        __juxList.setAttribute('style',
-            'overflow-y:auto;max-height:300px;padding:8px;'
-        );
-        __juxPanel.appendChild(__juxList);
 
-        document.body.appendChild(__juxPanel);
-    }
-
-    function togglePanel() {
-        __juxVisible = !__juxVisible;
-        __juxPanel.style.display = __juxVisible ? 'flex' : 'none';
+        var closeBtn = document.createElement('button');
+        closeBtn.textContent = 'Close';
+        closeBtn.setAttribute('style', [
+            'background:transparent',
+            'border:1px solid #555',
+            'color:#aaa',
+            'padding:4px 12px',
+            'border-radius:4px',
+            'cursor:pointer',
+            'font-family:monospace',
+            'font-size:12px'
+        ].join(';'));
+        closeBtn.addEventListener('click', function() {
+            __overlay.style.display = 'none';
+        });
+
+        actions.appendChild(clearBtn);
+        actions.appendChild(closeBtn);
+        header.appendChild(actions);
+        container.appendChild(header);
+
+        __list = document.createElement('div');
+        container.appendChild(__list);
+
+        __overlay.appendChild(container);
+        document.body.appendChild(__overlay);
     }
 
     function clearErrors() {
-        __juxErrors = [];
-        __juxList.innerHTML = '';
-        __juxBadge.textContent = '0';
-        __juxBadge.style.display = 'none';
-        __juxPanel.style.display = 'none';
-        __juxVisible = false;
+        __errors = [];
+        if (__list) __list.innerHTML = '';
+        if (__overlay) __overlay.style.display = 'none';
     }
 
     function addError(type, message, source, line, col, stack) {
-        if (__juxErrors.length >= __juxMaxErrors) __juxErrors.shift();
+        if (__errors.length >= __maxErrors) __errors.shift();
 
         var entry = {
             type: type,
@@ -118,39 +132,50 @@ export function generateErrorCollector(options = {}) {
             stack: stack || '',
             time: new Date().toLocaleTimeString()
         };
-        __juxErrors.push(entry);
-
-        if (!__juxPanel) createPanel();
+        __errors.push(entry);
 
-        // Update badge
-        __juxBadge.textContent = String(__juxErrors.length);
-        __juxBadge.style.display = 'flex';
+        if (!__overlay) createOverlay();
+        __overlay.style.display = 'block';
 
-        // ✅ Auto-open panel on first error
-        if (!__juxVisible) {
-            __juxVisible = true;
-            __juxPanel.style.display = 'flex';
-        }
-
-        // Add to list
         var item = document.createElement('div');
-        item.setAttribute('style',
-            'padding:6px 8px;margin-bottom:4px;background:#2d2d2d;border-radius:4px;' +
-            'border-left:3px solid ' + (type === 'error' ? '#e74c3c' : type === 'rejection' ? '#e67e22' : '#f39c12') + ';'
-        );
+        item.setAttribute('style', [
+            'padding:12px 16px',
+            'margin-bottom:8px',
+            'background:#222',
+            'border-left:3px solid #ff5555',
+            'border-radius:4px'
+        ].join(';'));
+
+        var typeLabel = type === 'error' ? 'Error' : type === 'rejection' ? 'Unhandled Rejection' : 'console.error';
 
-        var label = type === 'error' ? 'Error' : type === 'rejection' ? 'Rejection' : 'Console';
+        var meta = entry.source ? entry.source + ':' + entry.line + ':' + entry.col : '';
 
         item.innerHTML =
-            '<div style="color:#888;font-size:1rem;margin-bottom:2px;">' +
-                entry.time + ' • ' + label +
-                (entry.source ? ' • ' + entry.source + ':' + entry.line : '') +
+            '<div style="color:#888;font-size:12px;margin-bottom:4px;">' +
+                typeLabel + (meta ? '  ' + escapeHtml(meta) : '') +
+                '<span style="float:right;">' + entry.time + '</span>' +
             '</div>' +
-            '<div style="word-break:break-word;">' + escapeHtml(entry.message) + '</div>' +
-            (entry.stack ? '<div style="margin-top:4px;"><div style="cursor:pointer;color:#888;font-size:1rem;">Stack trace</div><pre style="margin:4px 0 0;font-size:1rem;color:#aaa;white-space:pre-wrap;">' + escapeHtml(entry.stack) + '</pre></div>' : '');
+            '<div style="color:#ff8888;white-space:pre-wrap;word-break:break-word;">' +
+                escapeHtml(entry.message) +
+            '</div>' +
+            (entry.stack ?
+                '<pre style="margin:8px 0 0;padding:8px;font-size:12px;color:#888;' +
+                'white-space:pre-wrap;background:#1a1a1a;border-radius:4px;' +
+                'border:1px solid #333;max-height:200px;overflow-y:auto;">' +
+                    escapeHtml(cleanStack(entry.stack)) +
+                '</pre>'
+            : '');
+
+        __list.appendChild(item);
+    }
 
-        __juxList.appendChild(item);
-        __juxList.scrollTop = __juxList.scrollHeight;
+    function cleanStack(stack) {
+        // Remove the first line if it duplicates the message
+        var lines = stack.split('\\n');
+        if (lines.length > 1 && lines[0].indexOf('Error:') !== -1) {
+            lines.shift();
+        }
+        return lines.join('\\n').trim();
     }
 
     function escapeHtml(str) {
@@ -159,12 +184,10 @@ export function generateErrorCollector(options = {}) {
 
     // --- Hooks ---
 
-    // 1. window.onerror
     window.onerror = function(msg, source, line, col, err) {
         addError('error', msg, source, line, col, err && err.stack ? err.stack : '');
     };
 
-    // 2. Unhandled promise rejections
     window.addEventListener('unhandledrejection', function(e) {
         var reason = e.reason;
         var msg = reason instanceof Error ? reason.message : String(reason);
@@ -172,7 +195,6 @@ export function generateErrorCollector(options = {}) {
         addError('rejection', msg, '', 0, 0, stack);
     });
 
-    // 3. Intercept console.error
     var _origConsoleError = console.error;
     console.error = function() {
         var args = Array.prototype.slice.call(arguments);
@@ -183,11 +205,10 @@ export function generateErrorCollector(options = {}) {
         _origConsoleError.apply(console, arguments);
     };
 
-    // Expose API for programmatic access
     window.__juxErrors = {
-        list: function() { return __juxErrors.slice(); },
+        list: function() { return __errors.slice(); },
         clear: clearErrors,
-        count: function() { return __juxErrors.length; }
+        count: function() { return __errors.length; }
     };
 })();
 </script>`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.153",
+  "version": "1.1.154",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",