@blit-sh/react 0.17.1 → 0.18.0

package/dist/BlitTerminal.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useImperativeHandle, useRef, useState, } from "react";
-import { DEFAULT_FONT, DEFAULT_FONT_SIZE, MOUSE_DOWN, MOUSE_UP, MOUSE_MOVE, measureCell, cssFontFamily, keyToBytes, encoder } from "@blit-sh/core";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useImperativeHandle, useRef } from "react";
+import { BlitTerminalSurface } from "@blit-sh/core";
 import { useBlitContext, useRequiredBlitWorkspace } from "./BlitContext";
 import { useBlitConnection } from "./hooks/useBlitConnection";
 import { useBlitSession } from "./hooks/useBlitSession";
@@ -10,8 +10,9 @@ import { useBlitSession } from "./hooks/useBlitSession";
 /**
  * BlitTerminal renders a blit terminal inside a WebGL canvas.
  *
- * It handles WASM initialisation, server message processing, GL rendering,
- * keyboard/mouse input, and dynamic resizing through a ResizeObserver.
+ * This is a thin wrapper over `BlitTerminalSurface` from `@blit-sh/core`.
+ * It renders a container `<div>`, attaches the surface to it on mount,
+ * and forwards prop changes to the surface's setters.
  */
 export function BlitTerminal({ ref, ...props }) {
     const ctx = useBlitContext();
@@ -21,1321 +22,99 @@ export function BlitTerminal({ ref, ...props }) {
     const blitConn = session
         ? workspace.getConnection(session.connectionId)
         : null;
-    if (props.sessionId !== null && (!session || !connection || !blitConn)) {
-        throw new Error(`Unknown blit session ${props.sessionId}`);
-    }
-    const { sessionId, fontFamily = ctx.fontFamily ?? DEFAULT_FONT, fontSize = ctx.fontSize ?? DEFAULT_FONT_SIZE, className, style, palette = ctx.palette, readOnly = false, showCursor = true, onRender, scrollbarColor = "rgba(255,255,255,0.3)", scrollbarWidth = 4, advanceRatio = ctx.advanceRatio, } = props;
-    // Refs for DOM elements.
+    const { sessionId, fontFamily = ctx.fontFamily, fontSize = ctx.fontSize, className, style, palette = ctx.palette, readOnly, showCursor, onRender, scrollbarColor, scrollbarWidth, advanceRatio = ctx.advanceRatio, } = props;
     const containerRef = useRef(null);
-    const glCanvasRef = useRef(null);
-    const inputRef = useRef(null);
-    // Refs for mutable state that must not trigger re-renders.
-    const viewIdRef = useRef(null);
-    const terminalRef = useRef(null);
-    const rendererRef = useRef(null);
-    const displayCtxRef = useRef(null);
-    const applyMetricsRef = useRef(() => { });
-    const cellRef = useRef(measureCell(fontFamily, fontSize, undefined, advanceRatio));
-    const rowsRef = useRef(24);
-    const colsRef = useRef(80);
-    const contentDirtyRef = useRef(true);
-    const lastOffsetRef = useRef(0);
-    /** Track WASM buffer identity to detect heap growth that invalidates vertex pointers. */
-    const lastWasmBufferRef = useRef(null);
-    const [cellVersion, setCellVersion] = useState(0);
-    const rafRef = useRef(0);
-    const renderScheduledRef = useRef(false);
-    const scrollOffsetRef = useRef(0);
-    const scrollFadeRef = useRef(0);
-    const scrollFadeTimerRef = useRef(null);
-    /** Scrollbar geometry in canvas pixels, updated each render. */
-    const scrollbarGeoRef = useRef(null);
-    const scrollDraggingRef = useRef(false);
-    const scrollDragOffsetRef = useRef(0);
-    const cursorBlinkOnRef = useRef(true);
-    const cursorBlinkTimerRef = useRef(null);
-    const paletteRef = useRef(palette);
-    const showCursorRef = useRef(showCursor);
-    showCursorRef.current = showCursor;
-    const selStartRef = useRef(null);
-    const selEndRef = useRef(null);
-    const selectingRef = useRef(false);
-    const hoveredUrlRef = useRef(null);
-    const predictedRef = useRef("");
-    const predictedFromRowRef = useRef(0);
-    const predictedFromColRef = useRef(0);
-    // React state for things the consumer might read.
-    const [wasmReady, setWasmReady] = useState(false);
-    const doRenderRef = useRef(() => { });
-    const scheduleRender = useCallback(() => {
-        if (renderScheduledRef.current)
-            return;
-        renderScheduledRef.current = true;
-        rafRef.current = requestAnimationFrame(() => {
-            renderScheduledRef.current = false;
-            doRenderRef.current();
-        });
-    }, []);
-    // Re-render when showCursor (focused state) changes.
+    const surfaceRef = useRef(null);
+    // Create the surface once on mount.
     useEffect(() => {
-        contentDirtyRef.current = true;
-        scheduleRender();
-    }, [showCursor, scheduleRender]);
-    // -----------------------------------------------------------------------
-    // Connection callbacks — BlitTerminal only cares about UPDATE (rendering)
-    // -----------------------------------------------------------------------
-    const status = connection?.status ?? "disconnected";
-    const reconcilePrediction = useCallback(() => {
-        const t = terminalRef.current;
-        if (!t || !predictedRef.current)
-            return;
-        const cr = t.cursor_row;
-        const cc = t.cursor_col;
-        if (cr !== predictedFromRowRef.current) {
-            predictedRef.current = "";
-            return;
-        }
-        const advance = cc - predictedFromColRef.current;
-        if (advance > 0 && advance <= predictedRef.current.length) {
-            predictedRef.current = predictedRef.current.slice(advance);
-            predictedFromColRef.current = cc;
-        }
-        else if (advance < 0 || advance > predictedRef.current.length) {
-            predictedRef.current = "";
-        }
-    }, []);
-    const applyPaletteToTerminal = useCallback((t) => {
-        const nextPalette = paletteRef.current;
-        if (!t || !nextPalette)
-            return;
-        t.set_default_colors(...nextPalette.fg, ...nextPalette.bg);
-        for (let i = 0; i < 16; i++)
-            t.set_ansi_color(i, ...nextPalette.ansi[i]);
-        contentDirtyRef.current = true;
-        scheduleRender();
-    }, []);
-    useEffect(() => {
-        if (!blitConn || sessionId === null)
-            return;
-        const syncReadOnlySize = (t) => {
-            const tr = t.rows;
-            const tc = t.cols;
-            if (tr !== rowsRef.current || tc !== colsRef.current) {
-                rowsRef.current = tr;
-                colsRef.current = tc;
-            }
-            scheduleRender();
-        };
-        const unsub = blitConn.addDirtyListener(sessionId, () => {
-            const t = blitConn.getTerminal(sessionId);
-            if (!t)
-                return;
-            if (terminalRef.current !== t) {
-                terminalRef.current = t;
-                applyPaletteToTerminal(t);
-                applyMetricsRef.current(t);
-            }
-            contentDirtyRef.current = true;
-            scheduleRender();
-            reconcilePrediction();
-            if (readOnly)
-                syncReadOnlySize(t);
+        const surface = new BlitTerminalSurface({
+            sessionId,
+            fontFamily,
+            fontSize,
+            palette,
+            readOnly,
+            showCursor,
+            onRender,
+            scrollbarColor,
+            scrollbarWidth,
+            advanceRatio,
         });
-        // Check for a terminal that was created between render and this effect.
-        if (sessionId !== null && blitConn) {
-            const t = blitConn.getTerminal(sessionId);
-            if (t) {
-                if (terminalRef.current !== t) {
-                    terminalRef.current = t;
-                    applyPaletteToTerminal(t);
-                    applyMetricsRef.current(t);
-                }
-                contentDirtyRef.current = true;
-                scheduleRender();
-                if (readOnly)
-                    syncReadOnlySize(t);
-            }
-        }
-        return () => {
-            unsub();
-        };
-    }, [
-        sessionId,
-        readOnly,
-        blitConn,
-        reconcilePrediction,
-        applyPaletteToTerminal,
-    ]);
-    const sendInput = useCallback((id, data) => {
-        workspace.sendInput(id, data);
-    }, [workspace]);
-    const sendScroll = useCallback((id, offset) => {
-        workspace.scrollSession(id, offset);
-    }, [workspace]);
-    // -----------------------------------------------------------------------
-    // Imperative handle
-    // -----------------------------------------------------------------------
-    useImperativeHandle(ref, () => ({
-        get terminal() {
-            return terminalRef.current;
-        },
-        get rows() {
-            return rowsRef.current;
-        },
-        get cols() {
-            return colsRef.current;
-        },
-        status,
-        focus() {
-            inputRef.current?.focus();
-        },
-    }), [status]);
-    // -----------------------------------------------------------------------
-    // WASM init
-    // -----------------------------------------------------------------------
-    useEffect(() => {
-        if (!blitConn) {
-            setWasmReady(false);
-            return;
-        }
-        const unsub = blitConn.onReady(() => setWasmReady(true));
-        if (blitConn.isReady())
-            setWasmReady(true);
-        return unsub;
-    }, [blitConn]);
-    // -----------------------------------------------------------------------
-    // Cell measurement (re-measure when font or DPR changes)
-    // -----------------------------------------------------------------------
-    // Chrome and Firefox update devicePixelRatio on zoom; Safari doesn't.
-    // Detect zoom via outerWidth/innerWidth on Safari only — on other browsers
-    // outerWidth includes browser chrome, making the ratio unreliable.
-    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-    function effectiveDpr() {
-        const base = window.devicePixelRatio || 1;
-        if (isSafari && window.outerWidth && window.innerWidth) {
-            const zoom = window.outerWidth / window.innerWidth;
-            if (zoom > 0.25 && zoom < 8)
-                return Math.round(base * zoom * 100) / 100;
-        }
-        return base;
-    }
-    const [dpr, setDpr] = useState(effectiveDpr);
-    const dprRef = useRef(dpr);
-    dprRef.current = dpr;
-    applyMetricsRef.current = (t) => {
-        const cell = cellRef.current;
-        t.set_cell_size(cell.pw, cell.ph);
-        t.set_font_family(fontFamily);
-        t.set_font_size(fontSize * dpr);
-        t.invalidate_render_cache();
-    };
-    useEffect(() => {
-        const check = () => {
-            const next = effectiveDpr();
-            if (next !== dprRef.current)
-                setDpr(next);
-        };
-        let mq = null;
-        if (typeof window.matchMedia === "function") {
-            mq = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
-            mq.addEventListener("change", check);
-        }
-        window.addEventListener("resize", check);
+        surfaceRef.current = surface;
         return () => {
-            mq?.removeEventListener("change", check);
-            window.removeEventListener("resize", check);
+            surface.dispose();
+            surfaceRef.current = null;
         };
+        // Only create/destroy on mount/unmount. Props are forwarded via setters.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    // Attach/detach to the container div.
     useEffect(() => {
-        if (!blitConn)
+        const surface = surfaceRef.current;
+        const container = containerRef.current;
+        if (!surface || !container)
             return;
-        const rasterFontSize = fontSize * dpr;
-        const apply = (forceInvalidate = false) => {
-            const cell = measureCell(fontFamily, fontSize, dpr, advanceRatio);
-            const changed = cell.pw !== cellRef.current.pw || cell.ph !== cellRef.current.ph;
-            const shouldInvalidate = forceInvalidate || changed;
-            cellRef.current = cell;
-            if (!readOnly) {
-                const t = terminalRef.current;
-                if (t) {
-                    t.set_cell_size(cell.pw, cell.ph);
-                    t.set_font_family(fontFamily);
-                    t.set_font_size(rasterFontSize);
-                    if (shouldInvalidate)
-                        t.invalidate_render_cache();
-                }
-                blitConn.setCellSize(cell.pw, cell.ph);
-                blitConn.setFontFamily(fontFamily);
-                blitConn.setFontSize(rasterFontSize);
-            }
-            if (shouldInvalidate) {
-                contentDirtyRef.current = true;
-                scheduleRender();
-            }
-            if (changed) {
-                setCellVersion((v) => v + 1);
-            }
-        };
-        // Always apply on effect run (font/size/dpr changed).
-        contentDirtyRef.current = true;
-        apply(true);
-        scheduleRender();
-        // Re-measure when fonts finish loading. Even if metrics stay the same,
-        // the glyph atlas may need a rebuild because the actual raster changed.
-        const onFontsLoaded = () => apply(true);
-        document.fonts?.addEventListener("loadingdone", onFontsLoaded);
-        // If fonts already loaded while we were setting up, re-apply now.
-        if (document.fonts?.status === "loaded")
-            apply(true);
-        return () => document.fonts?.removeEventListener("loadingdone", onFontsLoaded);
-    }, [
-        fontFamily,
-        fontSize,
-        dpr,
-        blitConn,
-        readOnly,
-        scheduleRender,
-        advanceRatio,
-    ]);
-    // -----------------------------------------------------------------------
-    // Cursor blink timer
-    // -----------------------------------------------------------------------
+        surface.attach(container);
+        return () => surface.detach();
+    }, []);
+    // Forward workspace + connection.
     useEffect(() => {
-        if (readOnly)
-            return;
-        cursorBlinkOnRef.current = true;
-        const timer = setInterval(() => {
-            cursorBlinkOnRef.current = !cursorBlinkOnRef.current;
-            scheduleRender();
-        }, 530);
-        cursorBlinkTimerRef.current = timer;
-        return () => {
-            clearInterval(timer);
-            cursorBlinkTimerRef.current = null;
-        };
-    }, [readOnly, scheduleRender]);
-    // -----------------------------------------------------------------------
-    // GL renderer lifecycle
-    // -----------------------------------------------------------------------
+        surfaceRef.current?.setWorkspace(workspace);
+    }, [workspace]);
     useEffect(() => {
-        if (!blitConn)
-            return;
-        const shared = blitConn.getSharedRenderer();
-        if (shared)
-            rendererRef.current = shared.renderer;
+        surfaceRef.current?.setConnection(blitConn);
     }, [blitConn]);
-    // -----------------------------------------------------------------------
-    // Terminal instance lifecycle
-    // -----------------------------------------------------------------------
+    // Forward all prop changes.
     useEffect(() => {
-        if (!blitConn) {
-            terminalRef.current = null;
-            return;
-        }
-        if (sessionId !== null) {
-            blitConn.retain(sessionId);
-            const t = blitConn.getTerminal(sessionId);
-            if (t) {
-                terminalRef.current = t;
-                applyPaletteToTerminal(t);
-                if (!readOnly) {
-                    const cell = cellRef.current;
-                    t.set_cell_size(cell.pw, cell.ph);
-                    t.set_font_family(fontFamily);
-                    t.set_font_size(fontSize * dpr);
-                }
-                contentDirtyRef.current = true;
-                scheduleRender();
-            }
-        }
-        else {
-            terminalRef.current = null;
-        }
-        return () => {
-            terminalRef.current = null;
-            if (sessionId !== null && blitConn)
-                blitConn.release(sessionId);
-        };
-    }, [
-        wasmReady,
-        sessionId,
-        blitConn,
-        fontFamily,
-        fontSize,
-        readOnly,
-        applyPaletteToTerminal,
-    ]);
-    // -----------------------------------------------------------------------
-    // Palette changes
-    // -----------------------------------------------------------------------
+        surfaceRef.current?.setSessionId(sessionId);
+    }, [sessionId]);
     useEffect(() => {
-        paletteRef.current = palette;
-        applyPaletteToTerminal(terminalRef.current);
-    }, [palette, applyPaletteToTerminal]);
-    // -----------------------------------------------------------------------
-    // Resize observer
-    // -----------------------------------------------------------------------
+        surfaceRef.current?.setPalette(palette);
+    }, [palette]);
     useEffect(() => {
-        const container = containerRef.current;
-        if (!container || readOnly)
-            return;
-        const handleResize = () => {
-            const cell = cellRef.current;
-            const w = container.clientWidth;
-            const h = container.clientHeight;
-            const cols = Math.max(1, Math.floor(w / cell.w));
-            const rows = Math.max(1, Math.floor(h / cell.h));
-            const sizeChanged = cols !== colsRef.current || rows !== rowsRef.current;
-            if (sizeChanged) {
-                rowsRef.current = rows;
-                colsRef.current = cols;
-                if (sessionId !== null && blitConn && viewIdRef.current) {
-                    blitConn.setViewSize(sessionId, viewIdRef.current, rows, cols);
-                }
-            }
-            // Always schedule — DPR may have changed even if cols/rows didn't.
-            contentDirtyRef.current = true;
-            scheduleRender();
-        };
-        // Allocate a view ID for multi-pane size tracking.
-        if (!viewIdRef.current && blitConn) {
-            viewIdRef.current = blitConn.allocViewId();
-        }
-        const observer = new ResizeObserver(handleResize);
-        observer.observe(container);
-        window.addEventListener("resize", handleResize);
-        handleResize();
-        return () => {
-            observer.disconnect();
-            window.removeEventListener("resize", handleResize);
-            if (sessionId !== null && blitConn && viewIdRef.current) {
-                blitConn.removeView(sessionId, viewIdRef.current);
-            }
-        };
-    }, [sessionId, readOnly, blitConn, fontFamily, fontSize, dpr, cellVersion]);
-    // Re-send dimensions when the connection becomes ready.
+        surfaceRef.current?.setFontFamily(fontFamily);
+    }, [fontFamily]);
     useEffect(() => {
-        if (status === "connected" &&
-            sessionId !== null &&
-            !readOnly &&
-            blitConn &&
-            viewIdRef.current) {
-            const rows = rowsRef.current;
-            const cols = colsRef.current;
-            if (rows > 0 && cols > 0) {
-                blitConn.setViewSize(sessionId, viewIdRef.current, rows, cols);
-            }
-        }
-    }, [status, sessionId, readOnly, blitConn]);
-    // -----------------------------------------------------------------------
-    // Render (demand-driven — only rAF when something changed)
-    // -----------------------------------------------------------------------
+        surfaceRef.current?.setFontSize(fontSize);
+    }, [fontSize]);
     useEffect(() => {
-        if (!blitConn)
-            return;
-        doRenderRef.current = () => {
-            const t0 = performance.now();
-            if (!rendererRef.current?.supported) {
-                const shared = blitConn.getSharedRenderer();
-                if (shared)
-                    rendererRef.current = shared.renderer;
-                if (!rendererRef.current?.supported) {
-                    if (!readOnly)
-                        blitConn.noteFrameRendered();
-                    return;
-                }
-            }
-            if (!terminalRef.current) {
-                if (!readOnly)
-                    blitConn.noteFrameRendered();
-                return;
-            }
-            {
-                const t = terminalRef.current;
-                const cell = cellRef.current;
-                const renderer = rendererRef.current;
-                const termCols = t.cols;
-                const termRows = t.rows;
-                const pw = termCols * cell.pw;
-                const ph = termRows * cell.ph;
-                if (!readOnly) {
-                    const cssW = `${termCols * cell.w}px`;
-                    const cssH = `${termRows * cell.h}px`;
-                    const glCanvas = glCanvasRef.current;
-                    if (glCanvas) {
-                        if (glCanvas.style.width !== cssW)
-                            glCanvas.style.width = cssW;
-                        if (glCanvas.style.height !== cssH)
-                            glCanvas.style.height = cssH;
-                    }
-                }
-                const mem = blitConn.wasmMemory();
-                // Detect WASM heap growth: if the underlying ArrayBuffer changed,
-                // vertex pointers from the previous prepare_render_ops are invalid.
-                if (mem.buffer !== lastWasmBufferRef.current) {
-                    lastWasmBufferRef.current = mem.buffer;
-                    contentDirtyRef.current = true;
-                }
-                {
-                    const gridH = t.rows * cell.ph;
-                    const gridW = t.cols * cell.pw;
-                    const xOff = Math.max(0, Math.floor((pw - gridW) / 2));
-                    const yOff = Math.max(0, Math.floor((ph - gridH) / 2));
-                    const combined = xOff * 65536 + yOff;
-                    if (combined !== lastOffsetRef.current) {
-                        lastOffsetRef.current = combined;
-                        t.set_render_offset(xOff, yOff);
-                        contentDirtyRef.current = true;
-                    }
-                }
-                if (contentDirtyRef.current) {
-                    contentDirtyRef.current = false;
-                    t.prepare_render_ops();
-                }
-                const bgVerts = new Float32Array(mem.buffer, t.bg_verts_ptr(), t.bg_verts_len());
-                const glyphVerts = new Float32Array(mem.buffer, t.glyph_verts_ptr(), t.glyph_verts_len());
-                renderer.resize(pw, ph);
-                renderer.render(bgVerts, glyphVerts, t.glyph_atlas_canvas(), t.glyph_atlas_version(), t.cursor_visible(), t.cursor_col, t.cursor_row, t.cursor_style(), cursorBlinkOnRef.current, cell, paletteRef.current?.bg ?? [0, 0, 0], showCursorRef.current);
-                // Copy GL to display canvas, then draw overlay content on top.
-                const shared = blitConn.getSharedRenderer();
-                const displayCanvas = glCanvasRef.current;
-                if (shared && displayCanvas) {
-                    if (displayCanvas.width !== pw) {
-                        displayCanvas.width = pw;
-                        displayCtxRef.current = null;
-                    }
-                    if (displayCanvas.height !== ph) {
-                        displayCanvas.height = ph;
-                        displayCtxRef.current = null;
-                    }
-                    if (!displayCtxRef.current) {
-                        displayCtxRef.current = displayCanvas.getContext("2d");
-                        // Disable any implicit DPR scaling — we manage pixels ourselves.
-                        displayCtxRef.current?.resetTransform();
-                    }
-                    const ctx = displayCtxRef.current;
-                    if (ctx) {
-                        ctx.drawImage(shared.canvas, 0, 0, pw, ph, 0, 0, pw, ph);
-                        // Selection highlight
-                        const ss = selStartRef.current;
-                        const se = selEndRef.current;
-                        if (ss && se) {
-                            const curScroll = scrollOffsetRef.current;
-                            const rows = rowsRef.current;
-                            const toViewRow = (p) => rows - 1 - p.tailOffset + curScroll;
-                            let sr = toViewRow(ss), sc = ss.col;
-                            let er = toViewRow(se), ec = se.col;
-                            if (sr > er || (sr === er && sc > ec)) {
-                                [sr, sc, er, ec] = [er, ec, sr, sc];
-                            }
-                            const r0 = Math.max(0, sr);
-                            const r1 = Math.min(rows - 1, er);
-                            ctx.fillStyle = "rgba(100,150,255,0.3)";
-                            for (let r = r0; r <= r1; r++) {
-                                const c0 = r === sr ? sc : 0;
-                                const c1 = r === er ? ec : colsRef.current - 1;
-                                ctx.fillRect(c0 * cell.pw, r * cell.ph, (c1 - c0 + 1) * cell.pw, cell.ph);
-                            }
-                        }
-                        // URL hover underline
-                        const hurl = hoveredUrlRef.current;
-                        if (hurl) {
-                            const [fgR, fgG, fgB] = paletteRef.current?.fg ?? [204, 204, 204];
-                            ctx.strokeStyle = `rgba(${fgR},${fgG},${fgB},0.6)`;
-                            ctx.lineWidth = Math.max(1, Math.round(cell.ph * 0.06));
-                            const y = hurl.row * cell.ph + cell.ph - ctx.lineWidth;
-                            ctx.beginPath();
-                            ctx.moveTo(hurl.startCol * cell.pw, y);
-                            ctx.lineTo((hurl.endCol + 1) * cell.pw, y);
-                            ctx.stroke();
-                        }
-                        // Overflow text (emoji / wide Unicode)
-                        const overflowCount = t.overflow_text_count();
-                        if (overflowCount > 0) {
-                            const cw = cell.pw;
-                            const ch = cell.ph;
-                            const scale = 0.85;
-                            const scaledH = ch * scale;
-                            const fSize = Math.max(1, Math.round(scaledH));
-                            ctx.font = `${fSize}px ${cssFontFamily(fontFamily)}`;
-                            ctx.textBaseline = "bottom";
-                            const [fgR, fgG, fgB] = paletteRef.current?.fg ?? [204, 204, 204];
-                            ctx.fillStyle = `#${fgR.toString(16).padStart(2, "0")}${fgG.toString(16).padStart(2, "0")}${fgB.toString(16).padStart(2, "0")}`;
-                            for (let i = 0; i < overflowCount; i++) {
-                                const op = t.overflow_text_op(i);
-                                if (!op)
-                                    continue;
-                                const [row, col, colSpan, text] = op;
-                                const x = col * cw;
-                                const y = row * ch;
-                                const w = colSpan * cw;
-                                const padX = (w - w * scale) / 2;
-                                const padY = (ch - scaledH) / 2;
-                                ctx.save();
-                                ctx.beginPath();
-                                ctx.rect(x, y, w, ch);
-                                ctx.clip();
-                                ctx.fillText(text, x + padX, y + padY + scaledH);
-                                ctx.restore();
-                            }
-                        }
-                        // Predicted echo
-                        if (!readOnly && predictedRef.current) {
-                            const t2 = terminalRef.current;
-                            if (t2 && t2.echo()) {
-                                const cw = cell.pw;
-                                const ch = cell.ph;
-                                const [fR, fG, fB] = paletteRef.current?.fg ?? [204, 204, 204];
-                                ctx.fillStyle = `rgba(${fR},${fG},${fB},0.5)`;
-                                const fSize = Math.max(1, Math.round(ch * 0.85));
-                                ctx.font = `${fSize}px ${cssFontFamily(fontFamily)}`;
-                                ctx.textBaseline = "bottom";
-                                const pred = predictedRef.current;
-                                const cc = t2.cursor_col;
-                                const cr = t2.cursor_row;
-                                for (let i = 0; i < pred.length && cc + i < colsRef.current; i++) {
-                                    ctx.fillText(pred[i], (cc + i) * cw, cr * ch + ch);
-                                }
-                            }
-                        }
-                        // Scrollbar — always compute geometry for hit testing
-                        {
-                            const t2 = terminalRef.current;
-                            if (t2) {
-                                const totalLines = t2.scrollback_lines() + rowsRef.current;
-                                const viewportRows = rowsRef.current;
-                                if (totalLines > viewportRows) {
-                                    const ch = cell.ph;
-                                    const canvasH = viewportRows * ch;
-                                    const barW = scrollbarWidth;
-                                    const barH = Math.max(barW, (viewportRows / totalLines) * canvasH);
-                                    const maxScroll = totalLines - viewportRows;
-                                    const scrollFraction = Math.min(scrollOffsetRef.current, maxScroll) / maxScroll;
-                                    const barY = (1 - scrollFraction) * (canvasH - barH);
-                                    const barX = colsRef.current * cell.pw - barW - 2;
-                                    scrollbarGeoRef.current = {
-                                        barX,
-                                        barY,
-                                        barW,
-                                        barH,
-                                        canvasH,
-                                        totalLines,
-                                        viewportRows,
-                                    };
-                                    const show = scrollFadeRef.current > 0 ||
-                                        scrollDraggingRef.current ||
-                                        scrollOffsetRef.current > 0;
-                                    if (show) {
-                                        ctx.fillStyle = scrollbarColor;
-                                        ctx.beginPath();
-                                        ctx.roundRect(barX, barY, barW, barH, barW / 2);
-                                        ctx.fill();
-                                    }
-                                }
-                                else {
-                                    scrollbarGeoRef.current = null;
-                                }
-                            }
-                        }
-                    }
-                }
-                if (!readOnly) {
-                    blitConn.noteFrameRendered();
-                }
-                onRender?.(performance.now() - t0);
-            }
-        };
-        // Initial render.
-        scheduleRender();
-        return () => {
-            cancelAnimationFrame(rafRef.current);
-            renderScheduledRef.current = false;
-        };
-    }, [fontFamily, fontSize, dpr, readOnly, scheduleRender, blitConn]);
-    // -----------------------------------------------------------------------
-    // Keyboard input
-    // -----------------------------------------------------------------------
+        surfaceRef.current?.setShowCursor(showCursor);
+    }, [showCursor]);
     useEffect(() => {
-        const input = inputRef.current;
-        if (!input || readOnly)
-            return;
-        const handleKeyDown = (e) => {
-            if (e.defaultPrevented)
-                return;
-            if (sessionId === null || status !== "connected")
-                return;
-            if (e.isComposing)
-                return;
-            if (e.key === "Dead")
-                return;
-            // Shift+PageUp/PageDown: scroll the scrollback
-            if (e.shiftKey && (e.key === "PageUp" || e.key === "PageDown")) {
-                const t2 = terminalRef.current;
-                const maxScroll = t2 ? t2.scrollback_lines() : 0;
-                if (maxScroll > 0 || scrollOffsetRef.current > 0) {
-                    e.preventDefault();
-                    const delta = e.key === "PageUp" ? rowsRef.current : -rowsRef.current;
-                    scrollOffsetRef.current = Math.max(0, Math.min(maxScroll, scrollOffsetRef.current + delta));
-                    sendScroll(sessionId, scrollOffsetRef.current);
-                    scrollFadeRef.current = 1;
-                    if (scrollFadeTimerRef.current)
-                        clearTimeout(scrollFadeTimerRef.current);
-                    scrollFadeTimerRef.current = setTimeout(() => {
-                        scrollFadeRef.current = 0;
-                        scheduleRender();
-                    }, 1000);
-                    scheduleRender();
-                }
-                return;
-            }
-            // Shift+Home/End: jump to top/bottom of scrollback
-            if (e.shiftKey && (e.key === "Home" || e.key === "End")) {
-                const t2 = terminalRef.current;
-                const maxScroll = t2 ? t2.scrollback_lines() : 0;
-                if (maxScroll > 0 || scrollOffsetRef.current > 0) {
-                    e.preventDefault();
-                    scrollOffsetRef.current = e.key === "Home" ? maxScroll : 0;
-                    sendScroll(sessionId, scrollOffsetRef.current);
-                    scrollFadeRef.current = 1;
-                    if (scrollFadeTimerRef.current)
-                        clearTimeout(scrollFadeTimerRef.current);
-                    scrollFadeTimerRef.current = setTimeout(() => {
-                        scrollFadeRef.current = 0;
-                        scheduleRender();
-                    }, 1000);
-                    scheduleRender();
-                }
-                return;
-            }
-            const t = terminalRef.current;
-            const appCursor = t ? t.app_cursor() : false;
-            const bytes = keyToBytes(e, appCursor);
-            if (bytes) {
-                e.preventDefault();
-                if (scrollOffsetRef.current > 0) {
-                    scrollOffsetRef.current = 0;
-                    sendScroll(sessionId, 0);
-                }
-                if (t &&
-                    t.echo() &&
-                    e.key.length === 1 &&
-                    !e.ctrlKey &&
-                    !e.metaKey &&
-                    !e.altKey) {
-                    if (!predictedRef.current) {
-                        predictedFromRowRef.current = t.cursor_row;
-                        predictedFromColRef.current = t.cursor_col;
-                    }
-                    predictedRef.current += e.key;
-                    scheduleRender();
-                }
-                else {
-                    predictedRef.current = "";
-                }
-                sendInput(sessionId, bytes);
-            }
-        };
-        const handleCompositionEnd = (e) => {
-            if (e.data && sessionId !== null && status === "connected") {
-                sendInput(sessionId, encoder.encode(e.data));
-            }
-            input.value = "";
-        };
-        const handleInput = (e) => {
-            const inputEvent = e;
-            if (inputEvent.isComposing) {
-                if (inputEvent.inputType === "deleteContentBackward" &&
-                    !input.value &&
-                    sessionId !== null &&
-                    status === "connected") {
-                    sendInput(sessionId, new Uint8Array([0x7f]));
-                }
-                return;
-            }
-            if (inputEvent.inputType === "deleteContentBackward" && !input.value) {
-                if (sessionId !== null && status === "connected") {
-                    sendInput(sessionId, new Uint8Array([0x7f]));
-                }
-            }
-            else if (input.value && sessionId !== null && status === "connected") {
-                sendInput(sessionId, encoder.encode(input.value.replace(/\n/g, "\r")));
-            }
-            input.value = "";
-        };
-        input.addEventListener("keydown", handleKeyDown);
-        input.addEventListener("compositionend", handleCompositionEnd);
-        input.addEventListener("input", handleInput);
-        return () => {
-            input.removeEventListener("keydown", handleKeyDown);
-            input.removeEventListener("compositionend", handleCompositionEnd);
-            input.removeEventListener("input", handleInput);
-        };
-    }, [sessionId, status, readOnly, sendInput, sendScroll]);
-    // -----------------------------------------------------------------------
-    // Wheel scroll (works on unfocused panes too)
-    // -----------------------------------------------------------------------
+        surfaceRef.current?.setOnRender(onRender);
+    }, [onRender]);
     useEffect(() => {
-        const container = containerRef.current;
-        if (!container || readOnly)
-            return;
-        const handleWheel = (e) => {
-            const t = terminalRef.current;
-            if (t && t.mouse_mode() > 0 && !e.shiftKey) {
-                // Mouse mode: handled by the mouse input effect below.
-                return;
-            }
-            if (sessionId !== null && status === "connected") {
-                const maxScroll = t ? t.scrollback_lines() : 0;
-                if (maxScroll === 0 && scrollOffsetRef.current === 0)
-                    return;
-                e.preventDefault();
-                const delta = Math.abs(e.deltaY) > Math.abs(e.deltaX) ? e.deltaY : e.deltaX;
-                const lines = Math.round(-delta / 20) || (delta > 0 ? -3 : 3);
-                scrollOffsetRef.current = Math.max(0, Math.min(maxScroll, scrollOffsetRef.current + lines));
-                sendScroll(sessionId, scrollOffsetRef.current);
-                if (scrollOffsetRef.current > 0) {
-                    scrollFadeRef.current = 1;
-                    if (scrollFadeTimerRef.current)
-                        clearTimeout(scrollFadeTimerRef.current);
-                    scrollFadeTimerRef.current = setTimeout(() => {
-                        scrollFadeRef.current = 0;
-                        scheduleRender();
-                    }, 1000);
-                }
-                scheduleRender();
-            }
-        };
-        container.addEventListener("wheel", handleWheel, { passive: false });
-        return () => container.removeEventListener("wheel", handleWheel);
-    }, [sessionId, status, readOnly, sendScroll, scheduleRender]);
-    // -----------------------------------------------------------------------
-    // Mouse input
-    // -----------------------------------------------------------------------
+        surfaceRef.current?.setAdvanceRatio(advanceRatio);
+    }, [advanceRatio]);
     useEffect(() => {
-        const canvas = glCanvasRef.current;
-        if (!canvas || readOnly || !blitConn)
-            return;
-        function mouseToCell(e) {
-            const rect = canvas.getBoundingClientRect();
-            const cell = cellRef.current;
-            return {
-                row: Math.min(Math.max(Math.floor((e.clientY - rect.top) / cell.h), 0), rowsRef.current - 1),
-                col: Math.min(Math.max(Math.floor((e.clientX - rect.left) / cell.w), 0), colsRef.current - 1),
-            };
-        }
-        // --- Scrollbar interaction helpers ---
-        const SCROLLBAR_HIT_PX = 20; // CSS px hit zone from right edge
-        function canvasYFromEvent(e) {
-            const rect = canvas.getBoundingClientRect();
-            const dpr = cellRef.current.pw / cellRef.current.w;
-            return (e.clientY - rect.top) * dpr;
-        }
-        function isNearScrollbar(e) {
-            const rect = canvas.getBoundingClientRect();
-            return e.clientX >= rect.right - SCROLLBAR_HIT_PX;
-        }
-        function scrollToCanvasY(y) {
-            const geo = scrollbarGeoRef.current;
-            if (!geo || sessionId === null || status !== "connected")
-                return;
-            const fraction = 1 - y / (geo.canvasH - geo.barH);
-            const maxScroll = geo.totalLines - geo.viewportRows;
-            const offset = Math.round(Math.max(0, Math.min(maxScroll, fraction * maxScroll)));
-            scrollOffsetRef.current = offset;
-            sendScroll(sessionId, offset);
-            scrollFadeRef.current = 1;
-            scheduleRender();
-        }
-        /** Send a structured mouse event to the server (C2S_MOUSE).
-         *  The server generates the correct escape sequence based on
-         *  the terminal's current mouse mode, encoding, and cooked-mode state. */
-        function sendMouseEvent(type, e, button) {
-            if (sessionId === null || status !== "connected")
-                return false;
-            // Quick client-side check to avoid unnecessary messages.
-            // The server does the authoritative check.
-            const t = terminalRef.current;
-            if (t && t.mouse_mode() === 0)
-                return false;
-            const pos = mouseToCell(e);
-            const typeCode = type === "down" ? MOUSE_DOWN : type === "up" ? MOUSE_UP : MOUSE_MOVE;
-            workspace.sendMouse(sessionId, typeCode, button, pos.col, pos.row);
-            return true;
-        }
-        let selecting = false;
-        let selGranularity = 1;
-        let selAnchorStart = null;
-        let selAnchorEnd = null;
-        function cellToSel(cell) {
-            return {
-                row: cell.row,
-                col: cell.col,
-                tailOffset: scrollOffsetRef.current + (rowsRef.current - 1 - cell.row),
-            };
-        }
-        let autoScrollTimer = null;
-        let autoScrollDir = 0;
-        const AUTO_SCROLL_INTERVAL_MS = 50;
-        const AUTO_SCROLL_LINES = 3;
-        function stopAutoScroll() {
-            if (autoScrollTimer !== null) {
-                clearInterval(autoScrollTimer);
-                autoScrollTimer = null;
-            }
-            autoScrollDir = 0;
-        }
-        function startAutoScroll(dir) {
-            if (autoScrollDir === dir && autoScrollTimer !== null)
-                return;
-            stopAutoScroll();
-            autoScrollDir = dir;
-            autoScrollTimer = setInterval(() => {
-                if (!selecting || sessionId === null || status !== "connected") {
-                    stopAutoScroll();
-                    return;
-                }
-                const t = terminalRef.current;
-                if (!t)
-                    return;
-                const maxScroll = t.scrollback_lines();
-                const prev = scrollOffsetRef.current;
-                const next = Math.max(0, Math.min(maxScroll, prev + dir * AUTO_SCROLL_LINES));
-                if (next === prev)
-                    return;
-                scrollOffsetRef.current = next;
-                sendScroll(sessionId, next);
-                scrollFadeRef.current = 1;
-                if (scrollFadeTimerRef.current)
-                    clearTimeout(scrollFadeTimerRef.current);
-                scrollFadeTimerRef.current = setTimeout(() => {
-                    scrollFadeRef.current = 0;
-                    scheduleRender();
-                }, 1000);
-                const edgeRow = dir === 1 ? 0 : rowsRef.current - 1;
-                const edgeCol = dir === 1 ? 0 : colsRef.current - 1;
-                const edgeSel = cellToSel({ row: edgeRow, col: edgeCol });
-                if (selGranularity >= 2 && selAnchorStart && selAnchorEnd) {
-                    const { start: dragStart, end: dragEnd } = applyGranularitySel(edgeSel);
-                    const dragBefore = selPosBefore(dragStart, selAnchorStart);
-                    if (dragBefore) {
-                        selStartRef.current = dragStart;
-                        selEndRef.current = selAnchorEnd;
-                    }
-                    else {
-                        selStartRef.current = selAnchorStart;
-                        selEndRef.current = dragEnd;
-                    }
-                }
-                else {
-                    selEndRef.current = edgeSel;
-                }
-                drawSelection();
-            }, AUTO_SCROLL_INTERVAL_MS);
-        }
-        function clearSelection() {
-            selStartRef.current = selEndRef.current = null;
-            scheduleRender();
-        }
-        function drawSelection() {
-            scheduleRender();
-        }
-        function getRowText(row) {
-            const t = terminalRef.current;
-            if (!t)
-                return "";
-            return t.get_text(row, 0, row, colsRef.current - 1);
-        }
-        const WORD_CHARS = /[A-Za-z0-9_\-./~:@]/;
-        function wordBoundsAt(row, col) {
-            const text = getRowText(row);
-            if (col >= text.length || !WORD_CHARS.test(text[col])) {
-                return { start: col, end: col };
-            }
-            let start = col;
-            while (start > 0 && WORD_CHARS.test(text[start - 1]))
-                start--;
-            let end = col;
-            while (end < text.length - 1 && WORD_CHARS.test(text[end + 1]))
-                end++;
-            return { start, end };
-        }
-        function isWrapped(row) {
-            const t = terminalRef.current;
-            return t ? t.is_wrapped(row) : false;
-        }
-        function logicalLineRange(row) {
-            const maxRow = rowsRef.current - 1;
-            let startRow = row;
-            while (startRow > 0 && isWrapped(startRow - 1))
-                startRow--;
-            let endRow = row;
-            while (endRow < maxRow && isWrapped(endRow))
-                endRow++;
-            return { startRow, endRow };
-        }
-        function applyGranularity(cell) {
-            if (selGranularity === 3) {
-                const { startRow, endRow } = logicalLineRange(cell.row);
-                return {
-                    start: { row: startRow, col: 0 },
-                    end: { row: endRow, col: colsRef.current - 1 },
-                };
-            }
-            if (selGranularity === 2) {
-                const wb = wordBoundsAt(cell.row, cell.col);
-                return {
-                    start: { row: cell.row, col: wb.start },
-                    end: { row: cell.row, col: wb.end },
-                };
-            }
-            return { start: cell, end: cell };
-        }
-        function applyGranularitySel(pos) {
-            const curScroll = scrollOffsetRef.current;
-            const viewRow = rowsRef.current - 1 - pos.tailOffset + curScroll;
-            const cell = { row: viewRow, col: pos.col };
-            const { start, end } = applyGranularity(cell);
-            return {
-                start: { ...start, tailOffset: curScroll + (rowsRef.current - 1 - start.row) },
-                end: { ...end, tailOffset: curScroll + (rowsRef.current - 1 - end.row) },
-            };
-        }
-        function selPosBefore(a, b) {
-            return (a.tailOffset > b.tailOffset ||
-                (a.tailOffset === b.tailOffset && a.col < b.col));
-        }
-        function copySelection() {
-            if (!selStartRef.current || !selEndRef.current)
-                return;
-            const t = terminalRef.current;
-            if (!t)
-                return;
-            let start = selStartRef.current;
-            let end = selEndRef.current;
-            if (selPosBefore(end, start)) {
-                [start, end] = [end, start];
-            }
-            const curScroll = scrollOffsetRef.current;
-            const rows = rowsRef.current;
-            const startViewRow = rows - 1 - start.tailOffset + curScroll;
-            const endViewRow = rows - 1 - end.tailOffset + curScroll;
-            const inViewport = startViewRow >= 0 &&
-                startViewRow < rows &&
-                endViewRow >= 0 &&
-                endViewRow < rows;
-            if (inViewport) {
-                const text = t.get_text(startViewRow, start.col, endViewRow, end.col);
-                if (text)
-                    navigator.clipboard.writeText(text);
-            }
-            else if (blitConn && sessionId !== null && blitConn.supportsCopyRange()) {
-                blitConn
-                    .copyRange(sessionId, start.tailOffset, start.col, end.tailOffset, end.col)
-                    .then((text) => {
-                    if (text)
-                        navigator.clipboard.writeText(text);
-                })
-                    .catch(() => { });
-            }
-        }
-        let mouseDownButton = -1;
-        let lastMouseCell = { row: -1, col: -1 };
-        const handleMouseDown = (e) => {
-            // Scrollbar click/drag
-            if (e.button === 0 && scrollbarGeoRef.current && isNearScrollbar(e)) {
-                e.preventDefault();
-                const geo = scrollbarGeoRef.current;
-                const y = canvasYFromEvent(e);
-                scrollDraggingRef.current = true;
-                canvas.style.cursor = "grabbing";
-                if (y >= geo.barY && y <= geo.barY + geo.barH) {
-                    // Clicked on thumb — anchor for relative drag
-                    scrollDragOffsetRef.current = y - geo.barY;
-                }
-                else {
-                    // Clicked on track — jump thumb center to click
-                    scrollDragOffsetRef.current = geo.barH / 2;
-                    scrollToCanvasY(y - geo.barH / 2);
-                }
-                return;
-            }
-            if (!e.shiftKey && sendMouseEvent("down", e, e.button)) {
-                mouseDownButton = e.button;
-                e.preventDefault();
-                return;
-            }
-            if (e.button === 0) {
-                clearSelection();
-                selecting = true;
-                selectingRef.current = true;
-                const cell = mouseToCell(e);
-                const sel = cellToSel(cell);
-                const detail = Math.min(e.detail, 3);
-                selGranularity = detail;
-                if (detail >= 2) {
-                    const { start, end } = applyGranularitySel(sel);
-                    selStartRef.current = start;
-                    selEndRef.current = end;
-                    selAnchorStart = start;
-                    selAnchorEnd = end;
-                    drawSelection();
-                }
-                else {
-                    selStartRef.current = sel;
-                    selEndRef.current = sel;
-                    selAnchorStart = null;
-                    selAnchorEnd = null;
-                }
-            }
-        };
-        const handleMouseMove = (e) => {
-            if (scrollDraggingRef.current) {
-                scrollToCanvasY(canvasYFromEvent(e) - scrollDragOffsetRef.current);
-                return;
-            }
-            // Only forward mouse events when a button is held (drag in progress)
-            // or the cursor is actually over the terminal canvas.
-            const overCanvas = mouseDownButton >= 0 || canvas.contains(e.target);
-            if (!e.shiftKey && overCanvas) {
-                const t = terminalRef.current;
-                if (t) {
-                    const mode = t.mouse_mode();
-                    if (mode >= 3) {
-                        // Only report when the cell coordinate changes (like real terminals).
-                        const cell = mouseToCell(e);
-                        if (cell.row === lastMouseCell.row &&
-                            cell.col === lastMouseCell.col)
-                            return;
-                        lastMouseCell = cell;
-                        if (e.buttons) {
-                            const button = e.buttons & 1 ? 0 : e.buttons & 2 ? 2 : e.buttons & 4 ? 1 : 0;
-                            sendMouseEvent("move", e, button + 32);
-                            return;
-                        }
-                        else if (mode === 4) {
-                            sendMouseEvent("move", e, 35);
-                            return;
-                        }
-                    }
-                }
-            }
-            if (selecting) {
-                const rect = canvas.getBoundingClientRect();
-                if (e.clientY < rect.top) {
-                    startAutoScroll(1);
-                    return;
-                }
-                else if (e.clientY > rect.bottom) {
-                    startAutoScroll(-1);
-                    return;
-                }
-                else {
-                    stopAutoScroll();
-                }
-                const cell = mouseToCell(e);
-                const sel = cellToSel(cell);
-                if (selGranularity >= 2 && selAnchorStart && selAnchorEnd) {
-                    const { start: dragStart, end: dragEnd } = applyGranularitySel(sel);
-                    const dragBefore = selPosBefore(dragStart, selAnchorStart);
-                    if (dragBefore) {
-                        selStartRef.current = dragStart;
-                        selEndRef.current = selAnchorEnd;
-                    }
-                    else {
-                        selStartRef.current = selAnchorStart;
-                        selEndRef.current = dragEnd;
-                    }
-                }
-                else {
-                    selEndRef.current = sel;
-                }
-                drawSelection();
-            }
-        };
-        const handleMouseUp = (e) => {
-            if (scrollDraggingRef.current) {
-                scrollDraggingRef.current = false;
-                canvas.style.cursor = "text";
-                scheduleRender();
-                return;
-            }
-            if (mouseDownButton >= 0) {
-                sendMouseEvent("up", e, mouseDownButton);
-                mouseDownButton = -1;
-                return;
-            }
-            if (selecting) {
-                stopAutoScroll();
-                selecting = false;
-                selectingRef.current = false;
-                if (selGranularity === 1) {
-                    selEndRef.current = cellToSel(mouseToCell(e));
-                }
-                drawSelection();
-                if (selStartRef.current &&
-                    selEndRef.current &&
-                    (selStartRef.current.tailOffset !== selEndRef.current.tailOffset ||
-                        selStartRef.current.col !== selEndRef.current.col)) {
-                    copySelection();
-                }
-                clearSelection();
-            }
-            if (canvas.contains(e.target)) {
-                inputRef.current?.focus();
-            }
-        };
-        const handleWheel = (e) => {
-            const t = terminalRef.current;
-            // Mouse-mode wheel: forward to the application.
-            if (t && t.mouse_mode() > 0 && !e.shiftKey) {
-                e.preventDefault();
-                const button = e.deltaY < 0 ? 64 : 65;
-                sendMouseEvent("down", e, button);
-            }
-            // Scrollback is handled by the container-level wheel handler above.
-        };
-        // --- URL detection ---
-        const URL_RE = /https?:\/\/[^\s<>"'`)\]},;]+/g;
-        function urlAt(row, col) {
-            const text = getRowText(row);
-            URL_RE.lastIndex = 0;
-            let m;
-            while ((m = URL_RE.exec(text)) !== null) {
-                const startCol = m.index;
-                const raw = m[0].replace(/[.),:;]+$/, "");
-                const endCol = startCol + raw.length - 1;
-                if (col >= startCol && col <= endCol) {
-                    return { url: raw, startCol, endCol };
-                }
-            }
-            return null;
+        surfaceRef.current?.setReadOnly(readOnly);
+    }, [readOnly]);
+    // Re-send dimensions when connection becomes ready.
+    const status = connection?.status ?? "disconnected";
+    useEffect(() => {
+        if (status === "connected" && sessionId !== null && !readOnly) {
+            surfaceRef.current?.resendSize();
         }
-        const handleContextMenu = (e) => {
-            const t = terminalRef.current;
-            if (t && t.mouse_mode() > 0)
-                e.preventDefault();
-        };
-        const handleClick = (e) => {
-            if (e.altKey && e.button === 0) {
-                const cell = mouseToCell(e);
-                const hit = urlAt(cell.row, cell.col);
-                if (hit) {
-                    e.preventDefault();
-                    window.open(hit.url, "_blank", "noopener");
-                    return;
-                }
-            }
-            inputRef.current?.focus();
-        };
-        let lastHoverUrl = null;
-        const handleHoverMove = (e) => {
-            // Scrollbar cursor
-            if (scrollDraggingRef.current) {
-                canvas.style.cursor = "grabbing";
-                return;
-            }
-            if (scrollbarGeoRef.current && isNearScrollbar(e)) {
-                canvas.style.cursor = "default";
-                return;
-            }
-            if (selecting) {
-                if (hoveredUrlRef.current) {
-                    hoveredUrlRef.current = null;
-                    scheduleRender();
-                    canvas.style.cursor = "text";
-                    lastHoverUrl = null;
-                }
-                return;
-            }
-            const cell = mouseToCell(e);
-            const hit = urlAt(cell.row, cell.col);
-            const url = hit?.url ?? null;
-            if (url !== lastHoverUrl) {
-                lastHoverUrl = url;
-                canvas.style.cursor = hit ? "pointer" : "text";
-                hoveredUrlRef.current = hit
-                    ? {
-                        row: cell.row,
-                        startCol: hit.startCol,
-                        endCol: hit.endCol,
-                        url: hit.url,
-                    }
-                    : null;
-                scheduleRender();
-            }
-        };
-        // Send a synthetic mouseup when the window loses focus, so apps
-        // like zellij/tmux don't get stuck in a "button held" state.
-        const handleBlur = () => {
-            if (mouseDownButton >= 0) {
-                // Synthetic release at (0,0) — server handles encoding + mode check
-                if (sessionId !== null && status === "connected") {
-                    workspace.sendMouse(sessionId, MOUSE_UP, mouseDownButton, 0, 0);
-                }
-                mouseDownButton = -1;
-            }
-            if (selecting) {
-                stopAutoScroll();
-                selecting = false;
-                selectingRef.current = false;
-                clearSelection();
-            }
-        };
-        canvas.addEventListener("mousedown", handleMouseDown);
-        window.addEventListener("mousemove", handleMouseMove);
-        canvas.addEventListener("mousemove", handleHoverMove);
-        window.addEventListener("mouseup", handleMouseUp);
-        window.addEventListener("blur", handleBlur);
-        canvas.addEventListener("wheel", handleWheel, { passive: false });
-        canvas.addEventListener("contextmenu", handleContextMenu);
-        canvas.addEventListener("click", handleClick);
-        return () => {
-            canvas.removeEventListener("mousedown", handleMouseDown);
-            window.removeEventListener("mousemove", handleMouseMove);
-            canvas.removeEventListener("mousemove", handleHoverMove);
-            window.removeEventListener("mouseup", handleMouseUp);
-            window.removeEventListener("blur", handleBlur);
-            canvas.removeEventListener("wheel", handleWheel);
-            canvas.removeEventListener("contextmenu", handleContextMenu);
-            canvas.removeEventListener("click", handleClick);
-            if (scrollFadeTimerRef.current)
-                clearTimeout(scrollFadeTimerRef.current);
-            stopAutoScroll();
-        };
-    }, [sessionId, status, sendScroll, blitConn, workspace, readOnly]);
-    // -----------------------------------------------------------------------
-    // Render
-    // -----------------------------------------------------------------------
-    return (_jsxs("div", { ref: containerRef, className: className, style: {
+    }, [status, sessionId, readOnly]);
+    // Imperative handle.
+    useImperativeHandle(ref, () => ({
+        get terminal() {
+            return surfaceRef.current?.currentTerminal ?? null;
+        },
+        get rows() {
+            return surfaceRef.current?.rows ?? 24;
+        },
+        get cols() {
+            return surfaceRef.current?.cols ?? 80;
+        },
+        status,
+        focus() {
+            surfaceRef.current?.focus();
+        },
+    }), [status]);
+    return (_jsx("div", { ref: containerRef, className: className, style: {
             position: "relative",
             overflow: "hidden",
             ...style,
-        }, children: [_jsx("canvas", { ref: glCanvasRef, style: readOnly
-                    ? {
-                        display: "block",
-                        width: "100%",
-                        height: "100%",
-                        objectFit: "contain",
-                        objectPosition: "center",
-                    }
-                    : {
-                        display: "block",
-                        position: "absolute",
-                        top: 0,
-                        left: 0,
-                        cursor: "text",
-                    } }), !readOnly && (_jsx("textarea", { ref: inputRef, "aria-label": "Terminal input", autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", spellCheck: false, style: {
-                    position: "absolute",
-                    opacity: 0,
-                    width: 1,
-                    height: 1,
-                    top: 0,
-                    left: 0,
-                    padding: 0,
-                    border: "none",
-                    outline: "none",
-                    resize: "none",
-                    overflow: "hidden",
-                }, tabIndex: 0 }))] }));
+        } }));
 }
 //# sourceMappingURL=BlitTerminal.js.map