@buntui/extensions 0.1.0-alpha.1 → 0.1.0-alpha.3

package/dist/hmr-error-overlay.d.ts

@@ -0,0 +1,2 @@
+export { mountHmrErrorOverlay, type HmrErrorOverlayHandle } from './widgets/hmr-error-overlay/HmrErrorOverlayWidget';
+export { mountHmrErrorOverlay as default } from './widgets/hmr-error-overlay/HmrErrorOverlayWidget';

package/dist/hmr-error-overlay.js

@@ -0,0 +1,2 @@
+export { mountHmrErrorOverlay } from './widgets/hmr-error-overlay/HmrErrorOverlayWidget';
+export { mountHmrErrorOverlay as default } from './widgets/hmr-error-overlay/HmrErrorOverlayWidget';

package/dist/index.d.ts

@@ -3,4 +3,5 @@ export * from './framerate';
 export * from './snake';
 export * from './videoplayer';
 export * from './logger';
+export * from './hmr-error-overlay';
 export { EXTENSION_REGISTRY } from './registry';

package/dist/index.js

@@ -5,4 +5,5 @@ export * from './framerate';
 export * from './snake';
 export * from './videoplayer';
 export * from './logger';
+export * from './hmr-error-overlay';
 export { EXTENSION_REGISTRY } from './registry';

package/dist/widgets/framerate/FrameRateWatcher.js

@@ -1,5 +1,4 @@
-import { TUI_CONTEXT_INSTANCE, TuiWidgetEntity, getTheme, parseColor, } from '@buntui/core';
-const FPS_BG = 0x1E_1E_2E_DD;
+import { TUI_CONTEXT_INSTANCE, TuiWidgetEntity, getTheme, onThemeChange, parseColor, } from '@buntui/core';
 export class FrameRateWatcher extends TuiWidgetEntity {
     #x;
     #y;
@@ -15,8 +14,21 @@ export class FrameRateWatcher extends TuiWidgetEntity {
         this.#y = rect.y;
         const theme = getTheme();
         this.#colorFg = parseColor(options.colorFg ?? theme.colors.text);
-        this.#colorBg = parseColor(options.colorBg ?? FPS_BG);
+        this.#colorBg = parseColor(options.colorBg ?? theme.colors.surface);
         this.setDraggable(true);
+        if (options.colorFg === undefined || options.colorBg === undefined) {
+            const trackFg = options.colorFg === undefined;
+            const trackBg = options.colorBg === undefined;
+            const unsub = onThemeChange(t => {
+                if (trackFg) {
+                    this.#colorFg = parseColor(t.colors.text);
+                }
+                if (trackBg) {
+                    this.#colorBg = parseColor(t.colors.surface);
+                }
+            });
+            this.addCleanup(unsub);
+        }
     }
     get zIndex() {
         return 999;

package/dist/widgets/hmr-error-overlay/HmrErrorOverlayWidget.d.ts

@@ -0,0 +1,19 @@
+import { type DrawListBuffer, type TuiWidgetRect, TuiWidgetEntity } from '@buntui/core';
+type Mountable = {
+    mount(widget: TuiWidgetEntity): unknown;
+    unmount(widget: TuiWidgetEntity): unknown;
+};
+export type HmrErrorOverlayHandle = {
+    dismiss(): void;
+};
+export declare function mountHmrErrorOverlay(scene: Mountable, error: Error): HmrErrorOverlayHandle;
+declare class HmrErrorOverlayWidget extends TuiWidgetEntity {
+    #private;
+    constructor(error: Error);
+    get zIndex(): number;
+    get rect(): TuiWidgetRect;
+    containsPoint(x: number, y: number): boolean;
+    update(): void;
+    emitDrawCommands(buf: DrawListBuffer): void;
+}
+export default HmrErrorOverlayWidget;

package/dist/widgets/hmr-error-overlay/HmrErrorOverlayWidget.js

@@ -0,0 +1,167 @@
+import nodeBuffer from 'node:buffer';
+import nodeProcess from 'node:process';
+import { TUI_CONTEXT_INSTANCE, TuiWidgetEntity, } from '@buntui/core';
+const COLOR_BG = 0x18_10_10_F0;
+const COLOR_BORDER = 0xF3_86_AB_FF;
+const COLOR_TITLE = 0xF3_86_AB_FF;
+const COLOR_TEXT = 0xBA_BA_BA_FF;
+const COLOR_FILE = 0x89_B4_FA_FF;
+const COLOR_BTN_BG = 0x33_22_33_F0;
+const COLOR_BTN_BG_HOVER = 0x4A_30_4A_F0;
+const COLOR_BTN_FG = 0xCD_D6_F4_FF;
+const COLOR_BTN_FG_COPIED = 0xA6_E3_A1_FF;
+const BORDER_SIDES_ALL = 0b1111;
+const BORDER_STYLE_DOUBLE = 3;
+const COPY_LABEL = ' Copy to clipboard ';
+const COPIED_LABEL = ' Copied! ';
+const BUTTON_HEIGHT = 1;
+const FEEDBACK_FRAMES = 90;
+export function mountHmrErrorOverlay(scene, error) {
+    const overlay = new HmrErrorOverlayWidget(error);
+    scene.mount(overlay);
+    return {
+        dismiss() {
+            scene.unmount(overlay);
+        },
+    };
+}
+function writeToClipboard(text) {
+    const encoded = nodeBuffer.Buffer.from(text, 'utf-8').toString('base64');
+    nodeProcess.stdout.write(`\u001B]52;c;${encoded}\u0007`);
+}
+class HmrErrorOverlayWidget extends TuiWidgetEntity {
+    #lines;
+    #titleLine;
+    #clipboardText;
+    #hoveringButton = false;
+    #copiedFrames = 0;
+    constructor(error) {
+        super();
+        const message = error.message ?? String(error);
+        const stack = error.stack?.replace(`${error.name}: ${error.message}`, '').trim() ?? '';
+        const messageLines = wrapText(message, 80);
+        const stackLines = stack
+            ? stack.split('\n').map(l => l.trim()).filter(Boolean).slice(0, 8)
+            : [];
+        this.#titleLine = '[HMR Error]';
+        this.#lines = [
+            ...messageLines,
+            ...stackLines.length > 0 ? ['', ...stackLines] : [],
+        ];
+        this.#clipboardText = [
+            `${error.name}: ${message}`,
+            stack,
+        ].filter(Boolean).join('\n');
+        this.on('mouseover', data => {
+            if (this.#isButtonRow(data.y)) {
+                this.#hoveringButton = true;
+            }
+        });
+        this.on('mouseout', () => {
+            this.#hoveringButton = false;
+        });
+        this.on('mousemove', data => {
+            this.#hoveringButton = this.#isButtonRow(data.y);
+        });
+        this.on('click', data => {
+            if (this.#isButtonRow(data.y)) {
+                writeToClipboard(this.#clipboardText);
+                this.#copiedFrames = FEEDBACK_FRAMES;
+            }
+        });
+    }
+    get zIndex() {
+        return this.getZIndexOverride() ?? 9999;
+    }
+    get rect() {
+        const { rows, cols } = TUI_CONTEXT_INSTANCE;
+        const maxW = Math.min(cols, 90);
+        const maxH = Math.min(rows, this.#lines.length + 4 + BUTTON_HEIGHT + 3);
+        const x = Math.max(0, Math.floor((cols - maxW) / 2));
+        const y = Math.max(0, Math.floor((rows - maxH) / 2));
+        return {
+            x, y, width: maxW, height: maxH,
+        };
+    }
+    containsPoint(x, y) {
+        const { x: rx, y: ry, width, height } = this.rect;
+        return x >= rx && x < rx + width && y >= ry && y < ry + height;
+    }
+    update() {
+        if (this.#copiedFrames > 0) {
+            this.#copiedFrames--;
+        }
+    }
+    emitDrawCommands(buf) {
+        const { x: rx, y: ry, width, height } = this.rect;
+        const innerX = rx + 2;
+        const innerW = width - 4;
+        const maxLines = height - 4 - BUTTON_HEIGHT - 1;
+        const btnY = ry + height - 2;
+        buf.pushClip(rx, ry, width, height);
+        buf.drawRect({
+            x: rx, y: ry, width, height, bgRgba: COLOR_BG,
+        });
+        buf.drawBorder({
+            x: rx, y: ry, width, height,
+            colorRgba: COLOR_BORDER,
+            style: BORDER_STYLE_DOUBLE,
+            sides: BORDER_SIDES_ALL,
+        });
+        buf.drawText({
+            x: innerX, y: ry + 1,
+            text: truncate(this.#titleLine, innerW),
+            fgRgba: COLOR_TITLE,
+            bgRgba: COLOR_BG,
+        });
+        for (let i = 0; i < Math.min(this.#lines.length, maxLines); i++) {
+            const line = this.#lines[i];
+            const isStack = line.startsWith('at ');
+            buf.drawText({
+                x: innerX,
+                y: ry + 3 + i,
+                text: truncate(isStack ? `  ${line}` : line, innerW),
+                fgRgba: isStack ? COLOR_FILE : COLOR_TEXT,
+                bgRgba: COLOR_BG,
+            });
+        }
+        const copied = this.#copiedFrames > 0;
+        const label = copied ? COPIED_LABEL : COPY_LABEL;
+        const btnBg = copied ? COLOR_BG : (this.#hoveringButton ? COLOR_BTN_BG_HOVER : COLOR_BTN_BG);
+        const btnFg = copied ? COLOR_BTN_FG_COPIED : COLOR_BTN_FG;
+        const btnTextX = rx + Math.floor((width - label.length) / 2);
+        buf.drawRect({
+            x: rx + 1, y: btnY, width: width - 2, height: BUTTON_HEIGHT, bgRgba: btnBg,
+        });
+        buf.drawText({
+            x: btnTextX, y: btnY,
+            text: truncate(label, innerW),
+            fgRgba: btnFg,
+            bgRgba: btnBg,
+        });
+        buf.popClip();
+    }
+    #isButtonRow(mouseY) {
+        const { y: ry, height } = this.rect;
+        return mouseY - 1 === ry + height - 2;
+    }
+}
+function truncate(text, maxLength) {
+    if (text.length <= maxLength) {
+        return text;
+    }
+    return `${text.slice(0, maxLength - 1)}\u2026`;
+}
+function wrapText(text, maxLength) {
+    const lines = [];
+    for (const rawLine of text.split('\n')) {
+        let remaining = rawLine;
+        while (remaining.length > maxLength) {
+            lines.push(remaining.slice(0, maxLength));
+            remaining = remaining.slice(maxLength);
+        }
+        lines.push(remaining);
+    }
+    return lines;
+}
+export default HmrErrorOverlayWidget;

package/dist/widgets/logger/LoggerWidget.d.ts

@@ -9,7 +9,6 @@ export type LoggerWidgetOptions = {
     colorFg?: TuiColor;
     colorBg?: TuiColor;
     label?: string;
-    hijack?: boolean;
 };
 export declare class LoggerWidget extends TuiWidgetEntity {
     #private;
@@ -19,12 +18,6 @@ export declare class LoggerWidget extends TuiWidgetEntity {
     toggle(): void;
     get messages(): readonly string[];
     get isOpen(): boolean;
-    /**
-     * Replace console.log with a wrapper that sends output to this logger.
-     * Call restoreConsole() to undo.
-     */
-    hijackConsole(): void;
-    restoreConsole(): void;
     get zIndex(): number;
     containsPoint(x: number, y: number): boolean;
     emitDrawCommands(buf: Parameters<TuiWidgetEntity['emitDrawCommands']>[0]): void;

package/dist/widgets/logger/LoggerWidget.js

@@ -11,7 +11,6 @@ export class LoggerWidget extends TuiWidgetEntity {
     #panelHeight;
     #panelVisible = false;
     #scrollPending = false;
-    #restoreConsole = null;
     constructor(options = {}) {
         super();
         const theme = getTheme();
@@ -63,9 +62,6 @@ export class LoggerWidget extends TuiWidgetEntity {
         this.#toggleBtn.on('click', () => {
             this.toggle();
         });
-        if (options.hijack) {
-            this.hijackConsole();
-        }
     }
     // -- Public API --
     log(message) {
@@ -108,24 +104,6 @@ export class LoggerWidget extends TuiWidgetEntity {
     get isOpen() {
         return this.#panelVisible;
     }
-    /**
-     * Replace console.log with a wrapper that sends output to this logger.
-     * Call restoreConsole() to undo.
-     */
-    hijackConsole() {
-        const original = console.log;
-        this.#restoreConsole = () => {
-            console.log = original;
-        };
-        console.log = (...args) => {
-            this.log(args.map(a => typeof a === 'string' ? a : JSON.stringify(a)).join(' '));
-        };
-    }
-    restoreConsole() {
-        const restore = this.#restoreConsole;
-        this.#restoreConsole = null;
-        restore?.();
-    }
     // -- Overrides --
     // -- Overrides --
     get zIndex() {

package/dist/widgets/matrix/defaults.js

@@ -2,7 +2,7 @@ import { rgbToRgba } from '@buntui/core';
 export const DEFAULT_MATRIX_COLOR_SCHEME = {
     leadRgba: rgbToRgba(0x57, 0xFF, 0x57), // Bright green
     trailRgba: rgbToRgba(0x00, 0x8F, 0x11), // Medium green
-    bgRgba: rgbToRgba(0x00, 0x00, 0x00), // Black background
+    bgRgba: 0x00_00_00_00,
 };
 export const DEFAULT_MATRIX_OPTIONS = {
     x: 0,

package/dist/widgets/snake/SnakeWidget.d.ts

@@ -6,7 +6,7 @@ export declare class SnakeWidget extends widgets.InteractiveWidget {
     updateRect(rect: Partial<TuiWidgetRect>): void;
     containsPoint(x: number, y: number): boolean;
     get rect(): TuiWidgetRect;
-    handleKey(event: KeyboardEvent): void;
+    handleActiveKey(event: KeyboardEvent): void;
     update(dt: number): void;
     emitDrawCommands(buffer: DrawListBuffer): void;
 }

package/dist/widgets/snake/SnakeWidget.js

@@ -75,11 +75,8 @@ export class SnakeWidget extends widgets.InteractiveWidget {
             x: this.#x, y: this.#y, width: this.#width, height: this.#height,
         };
     }
-    handleKey(event) {
-        const { key } = event;
-        if (!key) {
-            return;
-        }
+    handleActiveKey(event) {
+        const key = event.key;
         if (this.#state === 'idle') {
             if (key === ' ') {
                 this.#startGame();
@@ -94,7 +91,6 @@ export class SnakeWidget extends widgets.InteractiveWidget {
             this.#handleDirection(key);
             return;
         }
-        // Gameover
         if (key === ' ') {
             this.#startGame();
         }

package/dist/widgets/videoplayer/VideoPlayerWidget.d.ts

@@ -8,7 +8,7 @@ export declare class VideoPlayerWidget extends widgets.InteractiveWidget {
     updateRect(rect: Partial<TuiWidgetRect>): void;
     containsPoint(x: number, y: number): boolean;
     get rect(): TuiWidgetRect;
-    handleKey(event: KeyboardEvent): void;
+    handleActiveKey(event: KeyboardEvent): void;
     update(dt: number): void;
     emitDrawCommands(buffer: DrawListBuffer): void;
 }

package/dist/widgets/videoplayer/VideoPlayerWidget.js

@@ -102,11 +102,8 @@ export class VideoPlayerWidget extends widgets.InteractiveWidget {
             x: this.#x, y: this.#y, width: this.#width, height: this.#height,
         };
     }
-    handleKey(event) {
-        const { key } = event;
-        if (!key) {
-            return;
-        }
+    handleActiveKey(event) {
+        const key = event.key;
         if (key === ' ') {
             switch (this.#playerState) {
                 case 'ready':

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@buntui/extensions",
-    "version": "0.1.0-alpha.1",
+    "version": "0.1.0-alpha.3",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/AlphaFoxz/buntui.git",
@@ -32,6 +32,10 @@
         "./logger": {
             "types": "./dist/logger.d.ts",
             "default": "./dist/logger.js"
+        },
+        "./hmr-error-overlay": {
+            "types": "./dist/hmr-error-overlay.d.ts",
+            "default": "./dist/hmr-error-overlay.js"
         }
     },
     "files": [
@@ -42,7 +46,7 @@
         "build": "tsc --project ./tsconfig.json"
     },
     "dependencies": {
-        "@buntui/core": "^0.1.0-alpha.1"
+        "@buntui/core": "^0.1.0-alpha.3"
     },
     "devDependencies": {
         "@types/bun": "^1.3.14"