@elah/core 0.1.0

package/dist/renderer/gpu/WebGLContext.js

@@ -0,0 +1,102 @@
+export class WebGLContext {
+    constructor(options = {}) {
+        this._gl = null;
+        this._isWebGL2 = false;
+        this._lost = false;
+        this._onLost = options.onLost;
+        this._onRestore = options.onRestore;
+        this.canvas = document.createElement('canvas');
+        this.canvas.style.display = 'block';
+        this.canvas.style.width = '100%';
+        this.canvas.style.height = '100%';
+        const ctxAttribs = {
+            alpha: options.alpha ?? false,
+            antialias: false,
+            depth: false,
+            stencil: false,
+            preserveDrawingBuffer: options.preserveDrawingBuffer ?? false,
+            powerPreference: options.powerPreference ?? 'default',
+        };
+        const gl2 = this.canvas.getContext('webgl2', ctxAttribs);
+        if (gl2) {
+            this._gl = gl2;
+            this._isWebGL2 = true;
+        }
+        else {
+            const gl1 = this.canvas.getContext('webgl', ctxAttribs);
+            if (gl1) {
+                this._gl = gl1;
+                this._isWebGL2 = false;
+            }
+        }
+        if (!this._gl) {
+            throw new Error('WebGLContext: WebGL is not supported or has been disabled in this browser.');
+        }
+        this._handleLost = (e) => {
+            e.preventDefault();
+            this._lost = true;
+            this._gl = null;
+            this._onLost?.();
+        };
+        this._handleRestored = () => {
+            this._lost = false;
+            const restored = this.canvas.getContext('webgl2', ctxAttribs)
+                ?? this.canvas.getContext('webgl', ctxAttribs);
+            if (restored) {
+                this._gl = restored;
+                this._initGLState();
+                this._onRestore?.(this._gl);
+            }
+        };
+        this.canvas.addEventListener('webglcontextlost', this._handleLost);
+        this.canvas.addEventListener('webglcontextrestored', this._handleRestored);
+        this._initGLState();
+    }
+    get isLost() {
+        return this._lost;
+    }
+    get isWebGL2() {
+        return this._isWebGL2;
+    }
+    get gl() {
+        return this._gl;
+    }
+    resize(cssWidth, cssHeight, dpr = 1) {
+        const physicalW = Math.round(cssWidth * dpr);
+        const physicalH = Math.round(cssHeight * dpr);
+        if (this.canvas.width === physicalW && this.canvas.height === physicalH)
+            return;
+        this.canvas.width = physicalW;
+        this.canvas.height = physicalH;
+        if (this._gl && !this._lost) {
+            this._gl.viewport(0, 0, physicalW, physicalH);
+        }
+    }
+    clear() {
+        if (!this._gl || this._lost)
+            return;
+        this._gl.clear(this._gl.COLOR_BUFFER_BIT);
+    }
+    setClearColor(r, g, b, a) {
+        if (!this._gl || this._lost)
+            return;
+        this._gl.clearColor(r, g, b, a);
+    }
+    dispose() {
+        this.canvas.removeEventListener('webglcontextlost', this._handleLost);
+        this.canvas.removeEventListener('webglcontextrestored', this._handleRestored);
+        const ext = this._gl?.getExtension('WEBGL_lose_context');
+        ext?.loseContext();
+        this._gl = null;
+    }
+    _initGLState() {
+        const gl = this._gl;
+        if (!gl)
+            return;
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+        gl.clearColor(0, 0, 0, 1);
+        gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+    }
+}

package/dist/renderer/gpu/debug/DebugGpuRenderer.d.ts

@@ -0,0 +1,27 @@
+import type { DebugRenderItem } from './types';
+export interface DebugGpuRendererOptions {
+    stage?: {
+        width: number;
+        height: number;
+    };
+    clearColor?: [number, number, number, number];
+}
+export declare class DebugGpuRenderer {
+    private readonly _options;
+    private readonly _stage;
+    private _glCtx;
+    private _renderGraph;
+    private _testLayer;
+    private _items;
+    private _mounted;
+    private _viewport;
+    constructor(options?: DebugGpuRendererOptions);
+    mount(container: HTMLElement): void;
+    resize(cssWidth: number, cssHeight: number, dpr?: number): void;
+    render(items: DebugRenderItem[]): void;
+    dispose(): void;
+    get isMounted(): boolean;
+    get canvas(): HTMLCanvasElement | null;
+    private _handleContextLost;
+    private _handleContextRestored;
+}

package/dist/renderer/gpu/debug/DebugGpuRenderer.js

@@ -0,0 +1,108 @@
+import { TestLayer } from '../layers/TestLayer';
+import { RenderGraph } from '../RenderGraph';
+import { WebGLContext } from '../WebGLContext';
+import { DEBUG_STAGE } from './types';
+function createStubScene(stage) {
+    return {
+        frame: 0,
+        fps: 30,
+        stage,
+        videos: [],
+        audios: [],
+        texts: [],
+        images: [],
+        transitions: [],
+    };
+}
+export class DebugGpuRenderer {
+    constructor(options = {}) {
+        this._glCtx = null;
+        this._renderGraph = null;
+        this._testLayer = null;
+        this._items = [];
+        this._mounted = false;
+        this._viewport = { width: 0, height: 0 };
+        this._options = options;
+        this._stage = options.stage ?? { ...DEBUG_STAGE };
+    }
+    mount(container) {
+        if (this._mounted) {
+            throw new Error('DebugGpuRenderer: mount() called more than once');
+        }
+        const clearColor = this._options.clearColor ?? [0, 0, 0, 1];
+        this._glCtx = new WebGLContext({
+            onLost: () => this._handleContextLost(),
+            onRestore: () => this._handleContextRestored(),
+        });
+        this._glCtx.setClearColor(...clearColor);
+        container.appendChild(this._glCtx.canvas);
+        this._viewport = {
+            width: this._glCtx.canvas.width,
+            height: this._glCtx.canvas.height,
+        };
+        this._testLayer = new TestLayer();
+        this._renderGraph = new RenderGraph();
+        this._renderGraph.registerLayer(this._testLayer, () => this._items, (item) => item.id, (item) => item.zIndex);
+        this._mounted = true;
+    }
+    resize(cssWidth, cssHeight, dpr = 1) {
+        if (!this._glCtx || !this._mounted)
+            return;
+        this._glCtx.resize(cssWidth, cssHeight, dpr);
+        this._viewport = {
+            width: this._glCtx.canvas.width,
+            height: this._glCtx.canvas.height,
+        };
+    }
+    render(items) {
+        if (!this._mounted || !this._glCtx || !this._renderGraph)
+            return;
+        if (this._glCtx.isLost)
+            return;
+        const gl = this._glCtx.gl;
+        if (!gl)
+            return;
+        this._items = items;
+        this._glCtx.clear();
+        const ctx = {
+            gl,
+            stage: this._stage,
+            viewport: this._viewport,
+            fps: 30,
+        };
+        this._renderGraph.execute(createStubScene(this._stage), ctx);
+    }
+    dispose() {
+        const gl = this._glCtx?.gl;
+        if (gl && this._testLayer) {
+            this._testLayer.disposeGL(gl);
+        }
+        else {
+            this._testLayer?.dispose();
+        }
+        this._renderGraph?.dispose();
+        this._renderGraph = null;
+        this._testLayer = null;
+        this._glCtx?.dispose();
+        this._glCtx?.canvas.remove();
+        this._glCtx = null;
+        this._mounted = false;
+        this._items = [];
+        this._viewport = { width: 0, height: 0 };
+    }
+    get isMounted() {
+        return this._mounted;
+    }
+    get canvas() {
+        return this._glCtx?.canvas ?? null;
+    }
+    _handleContextLost() {
+        this._renderGraph?.notifyContextLost();
+        this._testLayer?.notifyContextLost();
+    }
+    _handleContextRestored() {
+        const clearColor = this._options.clearColor ?? [0, 0, 0, 1];
+        this._glCtx?.setClearColor(...clearColor);
+        this._testLayer?.notifyContextLost();
+    }
+}

package/dist/renderer/gpu/debug/DebugOverlay.d.ts

@@ -0,0 +1,17 @@
+import type { DebugRenderItem } from './types';
+export declare class DebugOverlay {
+    private readonly _root;
+    private readonly _fpsEl;
+    private readonly _stage;
+    private _visible;
+    constructor(container: HTMLElement, stage?: {
+        width: number;
+        height: number;
+    });
+    update(items: DebugRenderItem[], fps: number, stage?: {
+        width: number;
+        height: number;
+    }): void;
+    setVisible(visible: boolean): void;
+    dispose(): void;
+}

package/dist/renderer/gpu/debug/DebugOverlay.js

@@ -0,0 +1,83 @@
+import { DEBUG_STAGE } from './types';
+export class DebugOverlay {
+    constructor(container, stage = DEBUG_STAGE) {
+        this._visible = true;
+        this._stage = { width: stage.width, height: stage.height };
+        const computed = getComputedStyle(container);
+        if (computed.position === 'static') {
+            container.style.position = 'relative';
+        }
+        this._root = document.createElement('div');
+        this._root.style.cssText = [
+            'position:absolute',
+            'inset:0',
+            'pointer-events:none',
+            'overflow:hidden',
+        ].join(';');
+        this._fpsEl = document.createElement('div');
+        this._fpsEl.style.cssText = [
+            'position:absolute',
+            'top:8px',
+            'left:8px',
+            'padding:4px 8px',
+            'background:rgba(0,0,0,0.6)',
+            'color:#0f0',
+            'font:12px monospace',
+            'border-radius:3px',
+            'z-index:9999',
+        ].join(';');
+        this._fpsEl.textContent = 'FPS: --';
+        this._root.appendChild(this._fpsEl);
+        container.appendChild(this._root);
+    }
+    update(items, fps, stage) {
+        const stageSize = stage ?? this._stage;
+        if (!this._visible)
+            return;
+        this._fpsEl.textContent = `FPS: ${fps.toFixed(1)}`;
+        while (this._root.childNodes.length > 1) {
+            this._root.removeChild(this._root.lastChild);
+        }
+        const scaleX = this._root.clientWidth / stageSize.width;
+        const scaleY = this._root.clientHeight / stageSize.height;
+        for (const item of items) {
+            const left = item.x * scaleX;
+            const top = item.y * scaleY;
+            const width = item.width * scaleX;
+            const height = item.height * scaleY;
+            const bounds = document.createElement('div');
+            bounds.style.cssText = [
+                'position:absolute',
+                `left:${left}px`,
+                `top:${top}px`,
+                `width:${width}px`,
+                `height:${height}px`,
+                'border:1px dashed rgba(255,255,255,0.7)',
+                'box-sizing:border-box',
+            ].join(';');
+            this._root.appendChild(bounds);
+            const label = document.createElement('div');
+            label.textContent = `z:${item.zIndex}`;
+            label.style.cssText = [
+                'position:absolute',
+                `left:${left + width / 2}px`,
+                `top:${top + height / 2}px`,
+                'transform:translate(-50%,-50%)',
+                'padding:2px 6px',
+                'background:rgba(0,0,0,0.75)',
+                'color:#fff',
+                'font:11px monospace',
+                'border-radius:2px',
+                'white-space:nowrap',
+            ].join(';');
+            this._root.appendChild(label);
+        }
+    }
+    setVisible(visible) {
+        this._visible = visible;
+        this._root.style.display = visible ? 'block' : 'none';
+    }
+    dispose() {
+        this._root.remove();
+    }
+}

package/dist/renderer/gpu/debug/GpuDebugCounters.d.ts

@@ -0,0 +1,38 @@
+import type { DecoderState } from '../../../media/video/VideoDecoderManager';
+export interface CounterSnapshot {
+    activeVideoFrames: number;
+    closedVideoFrames: number;
+    cacheSize: number;
+    decoderCount: number;
+    pendingDecodeRequests: number;
+    outstandingDecodes: number;
+    droppedFrames: number;
+    cacheHits: number;
+    cacheMisses: number;
+    cacheHitRatio: number;
+    avgDecodeLatencyMs: number;
+    avgFrameUploadMs: number;
+    decodeLatencySampleCount: number;
+    frameUploadSampleCount: number;
+    decoderStateTransitions: Partial<Record<DecoderState, number>>;
+}
+export declare const GpuDebugCounters: {
+    activeVideoFrames: number;
+    closedVideoFrames: number;
+    cacheSize: number;
+    decoderCount: number;
+    pendingDecodeRequests: number;
+    outstandingDecodes: number;
+    droppedFrames: number;
+    cacheHits: number;
+    cacheMisses: number;
+    decodeLatencyMs: number[];
+    frameUploadTimingsMs: number[];
+    decoderStateTransitions: Partial<Record<DecoderState, number>>;
+    reset(): void;
+    incDropped(): void;
+    recordDecoderTransition(state: DecoderState): void;
+    recordDecodeLatency(ms: number): void;
+    recordFrameUpload(ms: number): void;
+    snapshot(): CounterSnapshot;
+};

package/dist/renderer/gpu/debug/GpuDebugCounters.js

@@ -0,0 +1,72 @@
+const MAX_LATENCY_SAMPLES = 256;
+export const GpuDebugCounters = {
+    activeVideoFrames: 0,
+    closedVideoFrames: 0,
+    cacheSize: 0,
+    decoderCount: 0,
+    pendingDecodeRequests: 0,
+    outstandingDecodes: 0,
+    droppedFrames: 0,
+    cacheHits: 0,
+    cacheMisses: 0,
+    decodeLatencyMs: [],
+    frameUploadTimingsMs: [],
+    decoderStateTransitions: {},
+    reset() {
+        this.activeVideoFrames = 0;
+        this.closedVideoFrames = 0;
+        this.cacheSize = 0;
+        this.decoderCount = 0;
+        this.pendingDecodeRequests = 0;
+        this.outstandingDecodes = 0;
+        this.droppedFrames = 0;
+        this.cacheHits = 0;
+        this.cacheMisses = 0;
+        this.decodeLatencyMs = [];
+        this.frameUploadTimingsMs = [];
+        this.decoderStateTransitions = {};
+    },
+    incDropped() {
+        this.droppedFrames++;
+    },
+    recordDecoderTransition(state) {
+        this.decoderStateTransitions[state] = (this.decoderStateTransitions[state] ?? 0) + 1;
+    },
+    recordDecodeLatency(ms) {
+        this.decodeLatencyMs.push(ms);
+        if (this.decodeLatencyMs.length > MAX_LATENCY_SAMPLES) {
+            this.decodeLatencyMs.shift();
+        }
+    },
+    recordFrameUpload(ms) {
+        this.frameUploadTimingsMs.push(ms);
+        if (this.frameUploadTimingsMs.length > MAX_LATENCY_SAMPLES) {
+            this.frameUploadTimingsMs.shift();
+        }
+    },
+    snapshot() {
+        const totalLookups = this.cacheHits + this.cacheMisses;
+        return {
+            activeVideoFrames: this.activeVideoFrames,
+            closedVideoFrames: this.closedVideoFrames,
+            cacheSize: this.cacheSize,
+            decoderCount: this.decoderCount,
+            pendingDecodeRequests: this.pendingDecodeRequests,
+            outstandingDecodes: this.outstandingDecodes,
+            droppedFrames: this.droppedFrames,
+            cacheHits: this.cacheHits,
+            cacheMisses: this.cacheMisses,
+            cacheHitRatio: totalLookups > 0 ? this.cacheHits / totalLookups : 0,
+            avgDecodeLatencyMs: average(this.decodeLatencyMs),
+            avgFrameUploadMs: average(this.frameUploadTimingsMs),
+            decodeLatencySampleCount: this.decodeLatencyMs.length,
+            frameUploadSampleCount: this.frameUploadTimingsMs.length,
+            decoderStateTransitions: { ...this.decoderStateTransitions },
+        };
+    },
+};
+function average(values) {
+    if (values.length === 0)
+        return 0;
+    return values.reduce((sum, v) => sum + v, 0) / values.length;
+}

package/dist/renderer/gpu/debug/GpuDebugGlobal.d.ts

@@ -0,0 +1,16 @@
+import type { DecoderState } from '../../../media/video/VideoDecoderManager';
+import type { CounterSnapshot } from './GpuDebugCounters';
+export interface GpuDebugState {
+    decoderStates: Record<string, DecoderState>;
+    cacheSizes: Record<string, number>;
+    textureCount: number;
+    activeClipIds: string[];
+    counters: CounterSnapshot;
+}
+declare global {
+    interface Window {
+        __GPU_DEBUG__?: GpuDebugState;
+    }
+}
+export declare function installGpuDebugGlobal(getState: () => GpuDebugState): void;
+export declare function uninstallGpuDebugGlobal(): void;

package/dist/renderer/gpu/debug/GpuDebugGlobal.js

@@ -0,0 +1,14 @@
+export function installGpuDebugGlobal(getState) {
+    if (typeof window === 'undefined')
+        return;
+    Object.defineProperty(window, '__GPU_DEBUG__', {
+        configurable: true,
+        enumerable: true,
+        get: getState,
+    });
+}
+export function uninstallGpuDebugGlobal() {
+    if (typeof window === 'undefined')
+        return;
+    delete window.__GPU_DEBUG__;
+}

package/dist/renderer/gpu/debug/GpuRendererDebugPanel.d.ts

@@ -0,0 +1,31 @@
+export interface DebugPanelSnapshot {
+    fps: number;
+    currentFrame: number;
+    activeClipCount: number;
+    textureCount: number;
+    cacheHitRatio: number;
+    renderDurationMs: number;
+    decoderStates: Record<string, string>;
+    droppedFrames: number;
+    outstandingDecodes: number;
+    activeProviders: number;
+    noOpTicks: number;
+}
+export declare class GpuRendererDebugPanel {
+    private readonly _root;
+    private readonly _panel;
+    private readonly _header;
+    private readonly _headerTitle;
+    private readonly _headerMeta;
+    private readonly _chevron;
+    private readonly _content;
+    private readonly _getSnapshot;
+    private readonly _intervalId;
+    private _collapsed;
+    private _lastFps;
+    constructor(container: HTMLElement, getSnapshot: () => DebugPanelSnapshot);
+    dispose(): void;
+    private _toggleCollapsed;
+    private _updateHeaderMeta;
+    private _refresh;
+}

package/dist/renderer/gpu/debug/GpuRendererDebugPanel.js

@@ -0,0 +1,128 @@
+const PANEL_WIDTH = 220;
+const HEADER_STYLE = [
+    'display:flex',
+    'align-items:center',
+    'justify-content:space-between',
+    'gap:8px',
+    'width:100%',
+    'padding:6px 10px',
+    'background:transparent',
+    'border:none',
+    'border-bottom:1px solid #1A1F2B',
+    'color:#6B7280',
+    'font:700 9px/1 system-ui,sans-serif',
+    'letter-spacing:0.1em',
+    'text-transform:uppercase',
+    'cursor:pointer',
+    'text-align:left',
+].join(';');
+export class GpuRendererDebugPanel {
+    constructor(container, getSnapshot) {
+        this._collapsed = false;
+        this._lastFps = 0;
+        this._getSnapshot = getSnapshot;
+        const computed = getComputedStyle(container);
+        if (computed.position === 'static') {
+            container.style.position = 'relative';
+        }
+        this._root = document.createElement('div');
+        this._root.dataset.elahGpuDebug = 'true';
+        this._root.style.cssText = [
+            'position:absolute',
+            'top:8px',
+            'right:8px',
+            'width:' + PANEL_WIDTH + 'px',
+            'pointer-events:none',
+            'z-index:9999',
+        ].join(';');
+        this._panel = document.createElement('div');
+        this._panel.style.cssText = [
+            'pointer-events:auto',
+            'background:rgba(18,23,34,0.88)',
+            'backdrop-filter:blur(8px)',
+            'border:1px solid #232938',
+            'border-radius:8px',
+            'overflow:hidden',
+            'box-shadow:0 8px 24px rgba(0,0,0,0.45)',
+        ].join(';');
+        this._header = document.createElement('button');
+        this._header.type = 'button';
+        this._header.style.cssText = HEADER_STYLE;
+        this._headerTitle = document.createElement('span');
+        this._headerTitle.textContent = 'GPU Monitor';
+        this._headerMeta = document.createElement('span');
+        this._headerMeta.style.cssText = [
+            'font:500 9px/1 ui-monospace,monospace',
+            'letter-spacing:0',
+            'text-transform:none',
+            'color:#22C55E',
+        ].join(';');
+        this._chevron = document.createElement('span');
+        this._chevron.textContent = '▾';
+        this._chevron.style.cssText = 'font-size:10px;opacity:0.7;flex-shrink:0';
+        this._header.append(this._headerTitle, this._headerMeta, this._chevron);
+        this._header.addEventListener('click', () => this._toggleCollapsed());
+        this._content = document.createElement('pre');
+        this._content.style.cssText = [
+            'margin:0',
+            'padding:8px 10px',
+            'background:transparent',
+            'color:#A7AFBF',
+            'font:10px/1.5 ui-monospace,monospace',
+            'white-space:pre',
+            'max-height:min(38vh,220px)',
+            'overflow:auto',
+        ].join(';');
+        this._panel.append(this._header, this._content);
+        this._root.appendChild(this._panel);
+        container.appendChild(this._root);
+        this._refresh();
+        this._intervalId = setInterval(() => this._refresh(), 100);
+    }
+    dispose() {
+        clearInterval(this._intervalId);
+        this._root.remove();
+    }
+    _toggleCollapsed() {
+        this._collapsed = !this._collapsed;
+        this._content.style.display = this._collapsed ? 'none' : 'block';
+        this._header.style.borderBottom = this._collapsed ? 'none' : '1px solid #1A1F2B';
+        this._chevron.textContent = this._collapsed ? '▸' : '▾';
+        this._root.dataset.elahGpuDebugCollapsed = this._collapsed ? 'true' : 'false';
+        this._updateHeaderMeta();
+    }
+    _updateHeaderMeta() {
+        if (this._collapsed) {
+            this._headerMeta.textContent = `${this._lastFps.toFixed(1)} FPS`;
+            this._headerMeta.style.display = 'inline';
+        }
+        else {
+            this._headerMeta.textContent = '';
+            this._headerMeta.style.display = 'none';
+        }
+    }
+    _refresh() {
+        const s = this._getSnapshot();
+        this._lastFps = s.fps;
+        this._updateHeaderMeta();
+        const decoderLines = Object.keys(s.decoderStates).length > 0
+            ? Object.entries(s.decoderStates)
+                .map(([src, state]) => `  ${src}: ${state}`)
+                .join('\n')
+            : '  (none)';
+        this._content.textContent = [
+            `${s.fps.toFixed(1)} FPS  ● LIVE`,
+            `Frame  ${s.currentFrame}`,
+            `Clips  ${s.activeClipCount}`,
+            `Textures  ${s.textureCount}`,
+            `Cache  ${(s.cacheHitRatio * 100).toFixed(0)}%`,
+            `Render  ${s.renderDurationMs.toFixed(2)}ms`,
+            `No-op  ${s.noOpTicks}`,
+            `Dropped  ${s.droppedFrames}`,
+            `Outstanding  ${s.outstandingDecodes}`,
+            `Providers  ${s.activeProviders}`,
+            `Decoders:\n${decoderLines}`,
+            'WebGL2 hardware accelerated',
+        ].join('\n');
+    }
+}