@memberjunction/ng-conversations 5.40.2 → 5.41.0

package/dist/lib/components/realtime/remote-browser/remote-browser-surface.component.js

@@ -0,0 +1,851 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, NgZone, Output, ViewChild, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedGenericModule } from '@memberjunction/ng-shared-generic';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-shared-generic";
+const _c0 = ["frameCanvas"];
+const _c1 = ["cursorCanvas"];
+function RemoteBrowserSurfaceComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 7);
+    i0.ɵɵelement(1, "i", 12);
+    i0.ɵɵtext(2, " You're driving ");
+    i0.ɵɵelementEnd();
+} }
+function RemoteBrowserSurfaceComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 13);
+    i0.ɵɵlistener("click", function RemoteBrowserSurfaceComponent_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleAudioMuted()); });
+    i0.ɵɵelement(1, "i", 14);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("rb-speaker--muted", ctx_r1.AudioMuted);
+    i0.ɵɵproperty("title", ctx_r1.AudioMuted ? "Unmute browser audio" : "Mute browser audio");
+    i0.ɵɵattribute("aria-pressed", !ctx_r1.AudioMuted)("aria-label", ctx_r1.AudioMuted ? "Unmute browser audio" : "Mute browser audio");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-volume-high", !ctx_r1.AudioMuted)("fa-volume-xmark", ctx_r1.AudioMuted);
+} }
+function RemoteBrowserSurfaceComponent_Conditional_10_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "canvas", 17, 1);
+} }
+function RemoteBrowserSurfaceComponent_Conditional_10_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵelement(1, "mj-loading", 18);
+    i0.ɵɵelementEnd();
+} }
+function RemoteBrowserSurfaceComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵelement(1, "canvas", 16, 0);
+    i0.ɵɵconditionalCreate(3, RemoteBrowserSurfaceComponent_Conditional_10_Conditional_3_Template, 2, 0, "canvas", 17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, RemoteBrowserSurfaceComponent_Conditional_10_Conditional_4_Template, 2, 0, "div", 11);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("rb-hidden", !ctx_r1.HasFrame);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("rb-screenshot--interactive", ctx_r1.CanTakeOver);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.CanTakeOver ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.HasFrame ? 4 : -1);
+} }
+function RemoteBrowserSurfaceComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 10);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("src", ctx_r1.ScreenshotDataUrl, i0.ɵɵsanitizeUrl);
+} }
+function RemoteBrowserSurfaceComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵelement(1, "mj-loading", 18);
+    i0.ɵɵelementEnd();
+} }
+/** How often the surface polls the server for a fresh page screenshot while bound (~1.4 fps). */
+const SNAPSHOT_POLL_MS = 700;
+/** Min interval between forwarded pointer-move samples during takeover (~20 moves/sec). */
+const POINTER_MOVE_THROTTLE_MS = 50;
+/** Min interval between forwarded scroll samples during takeover; the deltas coalesce between sends (~25/sec). */
+const SCROLL_THROTTLE_MS = 40;
+/** Radius (px) of the synthetic cursor ring drawn on the overlay so the user can see their pointer. */
+const SYNTHETIC_CURSOR_RADIUS = 6;
+/**
+ * Keys forwarded into the page during takeover even though they aren't single printable characters —
+ * navigation/editing keys the page (not the host app) should receive. `preventDefault` is applied only to
+ * forwarded keys so the host app's own shortcuts on un-forwarded keys still work.
+ */
+const FORWARDED_CONTROL_KEYS = new Set([
+    'Enter', 'Tab', 'Backspace', 'Delete', 'Escape',
+    'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight',
+    'Home', 'End', 'PageUp', 'PageDown',
+]);
+/**
+ * The modifier keys themselves — pressing one alone is never forwarded as a key (it only rides as a
+ * modifier on the NEXT non-modifier key / click), so the page never receives a lone `'Shift'` keypress.
+ */
+const MODIFIER_KEYS = new Set(['Shift', 'Control', 'Alt', 'Meta', 'CapsLock']);
+/**
+ * Maps a display-space pointer position on the live canvas to the server browser's VIEWPORT pixel space.
+ *
+ * The canvas's internal resolution (`canvasWidth`/`canvasHeight`, set from each pushed frame) IS the
+ * viewport pixel space; the canvas is displayed scaled to its bounding rect. So a display point maps as
+ * `vx = (clientX - rect.left) / rect.width * canvasWidth` (and likewise for y), rounded to ints. Returns
+ * `null` for a zero-size rect or un-sized canvas (divide-by-zero / not-ready guard).
+ *
+ * Pure + framework-free so it's unit-testable without a DOM.
+ *
+ * @param clientX The pointer's viewport X in the DOM (`event.clientX`).
+ * @param clientY The pointer's viewport Y in the DOM (`event.clientY`).
+ * @param rect The canvas's bounding rect (`getBoundingClientRect()`).
+ * @param canvasWidth The canvas's internal pixel width (= frame/viewport width).
+ * @param canvasHeight The canvas's internal pixel height (= frame/viewport height).
+ * @returns Integer viewport coordinates, or `null` when mapping isn't possible.
+ */
+export function MapToViewportCoords(clientX, clientY, rect, canvasWidth, canvasHeight) {
+    if (rect.width <= 0 || rect.height <= 0 || canvasWidth <= 0 || canvasHeight <= 0) {
+        return null;
+    }
+    const x = Math.round((clientX - rect.left) / rect.width * canvasWidth);
+    const y = Math.round((clientY - rect.top) / rect.height * canvasHeight);
+    return { x, y };
+}
+/**
+ * LIVE REMOTE-BROWSER surface (`mj-realtime-remote-browser-surface`) — the Browser channel
+ * tab's pane. It renders the SERVER-hosted browser the agent drives: a refreshing screenshot
+ * `<img>` with the current URL above it and a small "live" indicator. The agent's
+ * `browser_*` tools mutate the page through the channel plugin; this surface only PERCEIVES
+ * it, polling its {@link Fetch} callback every {@link SNAPSHOT_POLL_MS} ms while bound.
+ *
+ * The surface is transport-agnostic — it never touches GraphQL directly. The channel plugin
+ * wires the {@link Fetch} callback (closing over the session id + provider) in `BindSurface`
+ * before the surface's first change detection, so the `ngOnInit` poll has it. Polling stops
+ * in `ngOnDestroy` (pane collapsed / overlay torn down) so no traffic continues after unbind.
+ * View-only in v1 — there is no takeover input.
+ *
+ * ### Two render paths: pushed screencast (preferred) vs. snapshot poll (fallback)
+ * When the backend advertises the `ScreenStreaming` capability, the server PUSHES encoded CDP
+ * frames and the channel plugin sets {@link Streaming} = `true`. In that mode the surface paints
+ * each frame onto a `<canvas>` via {@link RenderFrame} and DOES NOT start the poll. When streaming
+ * is off (capability absent or start failed) the original behavior is unchanged: the surface polls
+ * {@link Fetch} every {@link SNAPSHOT_POLL_MS} ms and renders the screenshot `<img>`.
+ */
+export class RemoteBrowserSurfaceComponent {
+    /** Snapshot fetcher supplied by the channel plugin (closes over the session id + provider). */
+    Fetch = null;
+    /**
+     * Whether the server is PUSHING live screencast frames for this session (the backend advertised the
+     * `ScreenStreaming` capability and the start succeeded). When `true` the surface paints pushed frames
+     * onto its `<canvas>` via {@link RenderFrame} and does NOT poll; when `false` it uses the snapshot
+     * `<img>` poll fallback. Set by the channel plugin in `BindSurface` from the start-screencast result.
+     *
+     * The start-screencast result is async, so this may flip to `true` AFTER `ngOnInit` has already begun
+     * polling — the setter tears the poll down in that case so the two render paths never run at once.
+     */
+    set Streaming(value) {
+        if (value === this._streaming) {
+            return;
+        }
+        this._streaming = value;
+        if (value) {
+            // Late flip after the poll-fallback already started: stop polling, switch to canvas frames.
+            this.stopPolling();
+            this.zone.run(() => this.cdr.markForCheck());
+        }
+        // Takeover only attaches on the canvas path — (de)attach as streaming flips.
+        this.syncTakeoverListeners();
+    }
+    get Streaming() {
+        return this._streaming;
+    }
+    _streaming = false;
+    /**
+     * Whether HUMAN TAKEOVER is enabled — the user watching the live view can click/type into the page and
+     * those events are relayed into the server browser (Collaborative control). Takeover only attaches to the
+     * canvas render path (pushed screencast); the `<img>` poll fallback stays view-only. When enabled while
+     * already streaming the setter attaches listeners; flipping it off (or streaming off) detaches them.
+     */
+    set Interactive(value) {
+        if (value === this._interactive) {
+            return;
+        }
+        this._interactive = value;
+        this.syncTakeoverListeners();
+        this.zone.run(() => this.cdr.markForCheck());
+    }
+    get Interactive() {
+        return this._interactive;
+    }
+    _interactive = false;
+    /** Emits each human-takeover input (pointer move/click, key) the user performs on the live canvas. */
+    HumanInput = new EventEmitter();
+    /**
+     * Whether the live tab-audio stream is available — the channel sets this `true` when the server confirms
+     * it is pushing audio. Drives whether the speaker toggle renders in the live-view bar.
+     */
+    AudioAvailable = false;
+    /**
+     * Whether tab audio is currently muted. Two-way: the channel sets the initial value (un-muted when audio
+     * starts) and the toggle updates it; {@link AudioMutedChange} relays each user change to the channel,
+     * which mutes/unmutes the player.
+     */
+    AudioMuted = false;
+    /** Emits the new muted state each time the user toggles the speaker (two-way `AudioMuted`). */
+    AudioMutedChange = new EventEmitter();
+    /** Toggles the speaker mute state and relays it to the channel (which mutes/unmutes the audio player). */
+    ToggleAudioMuted() {
+        this.AudioMuted = !this.AudioMuted;
+        this.AudioMutedChange.emit(this.AudioMuted);
+    }
+    /** True when takeover is both enabled AND on the canvas path — drives the cursor + "driving" pill. */
+    get CanTakeOver() {
+        return this._interactive && this._streaming;
+    }
+    /**
+     * True while the user is actively driving the remote browser with the keyboard — the takeover canvas
+     * holds focus. The host overlay reads this to stand down its own global keyboard shortcuts (e.g.
+     * T-to-type opening the local composer) so keystrokes go to the remote page, not the local input.
+     */
+    get IsCapturingInput() {
+        return this.surfaceFocused && this.CanTakeOver;
+    }
+    /** The current screenshot as a `data:` URL, or `null` before the first snapshot arrives. */
+    ScreenshotDataUrl = null;
+    /** The current page URL reported by the server, or `null` when none. */
+    CurrentUrl = null;
+    /** Whether at least one pushed screencast frame has been painted (drives the canvas placeholder). */
+    HasFrame = false;
+    /** The canvas the pushed screencast frames are painted onto (present only while {@link Streaming}). */
+    frameCanvas;
+    /** The transparent overlay the synthetic cursor is drawn onto (present only while {@link CanTakeOver}). */
+    cursorCanvas;
+    /** Whether at least one screenshot OR frame has been rendered (drives the "Live" indicator). */
+    get HasSnapshot() {
+        return this.ScreenshotDataUrl !== null || this.HasFrame;
+    }
+    cdr = inject(ChangeDetectorRef);
+    zone = inject(NgZone);
+    /** Active poll timer; `null` when polling is stopped. */
+    pollTimer = null;
+    /** Guards against overlapping polls when a request runs longer than the interval. */
+    polling = false;
+    /** Set on destroy so an in-flight poll's late resolution doesn't touch a torn-down view. */
+    destroyed = false;
+    /** Reused decode target for pushed frames — avoids allocating an `Image` per frame. */
+    frameImage = new Image();
+    /** The most recent un-painted frame data URL, drained on the next animation frame (drop-old coalescing). */
+    pendingFrameDataUrl = null;
+    /** True while a paint is scheduled, so rapid frames coalesce to one `requestAnimationFrame`. */
+    framePaintScheduled = false;
+    /** The canvas element takeover listeners are currently bound to, or `null` when detached. */
+    takeoverCanvas = null;
+    /** Timestamp (ms) of the last forwarded pointer-move, for throttling the high-frequency stream. */
+    lastPointerMoveAt = 0;
+    /** Timestamp (ms) of the last forwarded scroll, for throttling the high-frequency wheel stream. */
+    lastScrollAt = 0;
+    /** Horizontal wheel delta accumulated since the last forwarded scroll (coalesced across throttled events). */
+    pendingScrollDeltaX = 0;
+    /** Vertical wheel delta accumulated since the last forwarded scroll (coalesced across throttled events). */
+    pendingScrollDeltaY = 0;
+    /** Last canvas-relative mouse position in VIEWPORT pixel space, or `null` when the pointer is off-canvas. */
+    cursorViewportPoint = null;
+    /** True while a synthetic-cursor repaint is queued, so rapid moves coalesce to one `requestAnimationFrame`. */
+    cursorPaintScheduled = false;
+    /**
+     * True while the user is mid-drag on the canvas (a `mousedown` not yet released) — drives forwarding
+     * intermediate moves as a drag and emitting the closing `pointer-up`. Click-drag text selection relies on
+     * this so the drag relays as down → moves → up rather than a single discrete click.
+     */
+    dragging = false;
+    /**
+     * True when the most recent `mousedown`→`mouseup` actually MOVED (a real drag), so the synthetic `click`
+     * the browser fires right after should be suppressed — the drag's down/move/up already conveyed the intent,
+     * and a trailing click would collapse a just-made text selection.
+     */
+    suppressNextClick = false;
+    /** Viewport point of the active drag's mousedown, used to tell a real drag from a stationary click. */
+    dragStartPoint = null;
+    /**
+     * True while the takeover canvas currently HOLDS keyboard focus. The host overlay reads this (via
+     * {@link IsCapturingInput}) to suppress its own global key shortcuts (e.g. T-to-type) so the user's
+     * keystrokes land in the remote browser, not the local composer — fixing the "greedy textbox" focus theft.
+     */
+    surfaceFocused = false;
+    /** Bound handlers — stored so the exact same references can be removed on detach. */
+    onCanvasMouseMove = (e) => this.handlePointerMove(e);
+    onCanvasMouseDown = (e) => this.handlePointerDown(e);
+    onCanvasMouseUp = (e) => this.handlePointerUp(e);
+    onCanvasClick = (e) => this.handlePointerClick(e);
+    onCanvasKeyDown = (e) => this.handleKeyDown(e);
+    onCanvasMouseLeave = () => this.handleMouseLeave();
+    onCanvasWheel = (e) => this.handleWheel(e);
+    onCanvasFocus = () => { this.surfaceFocused = true; };
+    onCanvasBlur = () => { this.surfaceFocused = false; };
+    ngOnInit() {
+        // In streaming mode the server pushes frames — never start the poll (it would be redundant traffic).
+        if (this.Streaming) {
+            return;
+        }
+        void this.pollOnce();
+        this.startPolling();
+    }
+    ngOnDestroy() {
+        this.destroyed = true;
+        this.stopPolling();
+        this.detachTakeoverListeners();
+    }
+    /** Starts the interval poll OUTSIDE Angular's zone so it doesn't trigger CD on every tick. */
+    startPolling() {
+        if (this.pollTimer !== null) {
+            return;
+        }
+        this.zone.runOutsideAngular(() => {
+            this.pollTimer = setInterval(() => void this.pollOnce(), SNAPSHOT_POLL_MS);
+        });
+    }
+    /** Stops the interval poll (no further snapshot requests are issued). */
+    stopPolling() {
+        if (this.pollTimer !== null) {
+            clearInterval(this.pollTimer);
+            this.pollTimer = null;
+        }
+    }
+    /**
+     * Fetches one snapshot and applies it to the view. Best-effort: the fetcher resolves to
+     * `null` on failure (the prior frame stays on screen) so a single failed poll never breaks
+     * the live view. Skips when a prior poll is still in flight, the fetcher isn't wired, or
+     * after destroy.
+     */
+    async pollOnce() {
+        if (this.polling || this.destroyed || !this.Fetch) {
+            return;
+        }
+        this.polling = true;
+        try {
+            const snapshot = await this.Fetch();
+            this.applySnapshot(snapshot);
+        }
+        catch {
+            // Defensive — the fetcher is contractually non-throwing, but never let a poll break the view.
+        }
+        finally {
+            this.polling = false;
+        }
+    }
+    /** Applies a fetched snapshot to the view fields and triggers OnPush change detection. */
+    applySnapshot(snapshot) {
+        if (this.destroyed) {
+            return;
+        }
+        const base64 = snapshot?.ScreenshotBase64 ?? null;
+        const nextUrl = snapshot?.CurrentUrl ?? null;
+        const nextDataUrl = base64 ? `data:image/png;base64,${base64}` : this.ScreenshotDataUrl;
+        if (nextDataUrl === this.ScreenshotDataUrl && nextUrl === this.CurrentUrl) {
+            return; // nothing changed — skip the CD pass
+        }
+        this.ScreenshotDataUrl = nextDataUrl;
+        this.CurrentUrl = nextUrl;
+        // Re-enter the zone for the OnPush update (the poll runs outside Angular).
+        this.zone.run(() => this.cdr.markForCheck());
+    }
+    /**
+     * Paints one PUSHED screencast frame (base64 JPEG) onto the canvas. Called by the channel plugin for
+     * each frame the server pushes while {@link Streaming}. Coalesces a burst of frames to one paint per
+     * animation frame (the newest wins) so a fast stream never floods the main thread, and reuses a single
+     * `Image` decode target to avoid per-frame allocation. No-op after destroy or when not in streaming mode.
+     *
+     * @param dataBase64 The frame image as raw base64 JPEG (no `data:` prefix).
+     */
+    RenderFrame(dataBase64) {
+        if (this.destroyed || !this.Streaming || !dataBase64) {
+            return;
+        }
+        this.pendingFrameDataUrl = `data:image/jpeg;base64,${dataBase64}`;
+        if (this.framePaintScheduled) {
+            return; // a paint is already queued — it will pick up this newest frame
+        }
+        this.framePaintScheduled = true;
+        this.zone.runOutsideAngular(() => requestAnimationFrame(() => this.paintPendingFrame()));
+    }
+    /**
+     * Updates the URL shown above the live view. In streaming (canvas) mode the snapshot poll is stopped, so
+     * the channel pushes the current URL here after a navigation/action reports one — otherwise the bar would
+     * stay stuck on "No page loaded yet" even though the page is live. No-op for an unchanged / empty value.
+     *
+     * @param url The current page URL, or null/empty to leave the bar unchanged.
+     */
+    SetCurrentUrl(url) {
+        if (this.destroyed || !url || url === this.CurrentUrl) {
+            return;
+        }
+        this.CurrentUrl = url;
+        this.zone.run(() => this.cdr.markForCheck());
+    }
+    /** Drains the most recent pending frame onto the canvas (drop-old coalescing target). */
+    paintPendingFrame() {
+        this.framePaintScheduled = false;
+        const dataUrl = this.pendingFrameDataUrl;
+        this.pendingFrameDataUrl = null;
+        if (this.destroyed || !dataUrl) {
+            return;
+        }
+        this.frameImage.onload = () => this.drawFrameImage();
+        this.frameImage.src = dataUrl;
+    }
+    /** Draws the decoded frame image onto the canvas, sizing the canvas to the frame on the first paint. */
+    drawFrameImage() {
+        const canvas = this.frameCanvas?.nativeElement;
+        if (this.destroyed || !canvas) {
+            return;
+        }
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        const { naturalWidth: w, naturalHeight: h } = this.frameImage;
+        if (w > 0 && h > 0 && (canvas.width !== w || canvas.height !== h)) {
+            canvas.width = w;
+            canvas.height = h;
+        }
+        ctx.drawImage(this.frameImage, 0, 0);
+        if (!this.HasFrame) {
+            // First frame arrived — re-enter the zone to clear the placeholder + flip the "Live" indicator,
+            // and attach takeover listeners now that the canvas element exists in the DOM.
+            this.zone.run(() => {
+                this.HasFrame = true;
+                this.cdr.markForCheck();
+            });
+            this.syncTakeoverListeners();
+        }
+    }
+    // ----- human takeover (Collaborative control) --------------------------------------------
+    /**
+     * Attaches or detaches the canvas takeover listeners so they're bound exactly when takeover is live —
+     * {@link CanTakeOver} is true AND the canvas element exists. Idempotent: re-binds only when the target
+     * canvas changed, detaches when the conditions no longer hold. Safe to call from any state-flip path
+     * (the `Interactive`/`Streaming` setters, the first-frame paint, destroy).
+     */
+    syncTakeoverListeners() {
+        const canvas = this.CanTakeOver && !this.destroyed ? (this.frameCanvas?.nativeElement ?? null) : null;
+        if (canvas === this.takeoverCanvas) {
+            return; // already in the desired state
+        }
+        this.detachTakeoverListeners();
+        if (canvas) {
+            this.attachTakeoverListeners(canvas);
+        }
+    }
+    /** Binds the pointer/keyboard/wheel listeners to the canvas OUTSIDE the zone (mousemove/wheel are high-frequency). */
+    attachTakeoverListeners(canvas) {
+        canvas.tabIndex = 0; // focusable so it can receive keydown
+        // Marks this canvas as a keyboard-capturing surface so the host overlay's global shortcuts (e.g.
+        // T-to-type) stand down while it holds focus — see the overlay's isKeyboardCapturingSurfaceFocused().
+        canvas.setAttribute('data-mj-capture-keys', '');
+        this.zone.runOutsideAngular(() => {
+            canvas.addEventListener('mousemove', this.onCanvasMouseMove);
+            canvas.addEventListener('mousedown', this.onCanvasMouseDown);
+            canvas.addEventListener('mouseup', this.onCanvasMouseUp);
+            canvas.addEventListener('click', this.onCanvasClick);
+            canvas.addEventListener('keydown', this.onCanvasKeyDown);
+            canvas.addEventListener('mouseleave', this.onCanvasMouseLeave);
+            canvas.addEventListener('focus', this.onCanvasFocus);
+            canvas.addEventListener('blur', this.onCanvasBlur);
+            // `passive: false` so preventDefault stops the host page from scrolling while the user drives the page.
+            canvas.addEventListener('wheel', this.onCanvasWheel, { passive: false });
+        });
+        this.takeoverCanvas = canvas;
+    }
+    /** Removes the listeners from the currently-bound canvas (no-op when none are bound) and clears the cursor. */
+    detachTakeoverListeners() {
+        const canvas = this.takeoverCanvas;
+        if (!canvas) {
+            return;
+        }
+        canvas.removeEventListener('mousemove', this.onCanvasMouseMove);
+        canvas.removeEventListener('mousedown', this.onCanvasMouseDown);
+        canvas.removeEventListener('mouseup', this.onCanvasMouseUp);
+        canvas.removeEventListener('click', this.onCanvasClick);
+        canvas.removeEventListener('keydown', this.onCanvasKeyDown);
+        canvas.removeEventListener('mouseleave', this.onCanvasMouseLeave);
+        canvas.removeEventListener('focus', this.onCanvasFocus);
+        canvas.removeEventListener('blur', this.onCanvasBlur);
+        canvas.removeEventListener('wheel', this.onCanvasWheel);
+        canvas.removeAttribute('data-mj-capture-keys');
+        this.takeoverCanvas = null;
+        this.cursorViewportPoint = null;
+        this.dragging = false;
+        this.suppressNextClick = false;
+        this.dragStartPoint = null;
+        this.surfaceFocused = false;
+        this.clearSyntheticCursor();
+    }
+    /**
+     * Pointer-move → tracks the cursor for the synthetic-cursor overlay (every move, immediate, no
+     * round-trip) AND emits a throttled viewport-mapped move to the server. Runs outside the zone (no CD
+     * per move).
+     */
+    handlePointerMove(event) {
+        const point = this.toViewportCoords(event);
+        if (point) {
+            // Always update the local cursor for instant feedback — independent of the server-relay throttle.
+            this.cursorViewportPoint = point;
+            this.scheduleCursorPaint();
+        }
+        const now = Date.now();
+        if (now - this.lastPointerMoveAt < POINTER_MOVE_THROTTLE_MS) {
+            return;
+        }
+        this.lastPointerMoveAt = now;
+        if (point) {
+            this.emitInput({ kind: 'pointer-move', x: point.x, y: point.y });
+        }
+    }
+    /** Mouse leaves the canvas → hide the synthetic cursor (nothing to relay). */
+    handleMouseLeave() {
+        this.cursorViewportPoint = null;
+        this.scheduleCursorPaint();
+    }
+    /**
+     * Wheel/trackpad/Magic-Mouse scroll over the canvas → forwards a viewport-mapped scroll to the server.
+     * Calls `preventDefault` so the host page doesn't scroll while the user drives the live page. Throttled
+     * to {@link SCROLL_THROTTLE_MS}, coalescing the skipped deltas so no scroll distance is lost.
+     */
+    handleWheel(event) {
+        event.preventDefault();
+        this.pendingScrollDeltaX += event.deltaX;
+        this.pendingScrollDeltaY += event.deltaY;
+        const point = this.toViewportCoords(event);
+        if (point) {
+            this.cursorViewportPoint = point;
+            this.scheduleCursorPaint();
+        }
+        const now = Date.now();
+        if (now - this.lastScrollAt < SCROLL_THROTTLE_MS) {
+            return; // accumulate into pendingScrollDelta* until the throttle window opens
+        }
+        this.lastScrollAt = now;
+        const target = point ?? this.cursorViewportPoint;
+        if (target && (this.pendingScrollDeltaX !== 0 || this.pendingScrollDeltaY !== 0)) {
+            this.emitInput({ kind: 'scroll', x: target.x, y: target.y, deltaX: this.pendingScrollDeltaX, deltaY: this.pendingScrollDeltaY });
+            this.pendingScrollDeltaX = 0;
+            this.pendingScrollDeltaY = 0;
+        }
+    }
+    /**
+     * Mouse-down on the canvas → focuses the canvas (so subsequent keys are captured) and BEGINS a drag:
+     * emits a `pointer-down` and arms drag mode so the following moves relay as drag motion and the matching
+     * `pointer-up` closes it. This is what makes click-drag text selection work (rather than a discrete click).
+     */
+    handlePointerDown(event) {
+        this.takeoverCanvas?.focus();
+        const point = this.toViewportCoords(event);
+        if (!point) {
+            return;
+        }
+        this.dragging = true;
+        this.dragStartPoint = point;
+        this.suppressNextClick = false;
+        this.cursorViewportPoint = point;
+        this.scheduleCursorPaint();
+        this.emitInput({ kind: 'pointer-down', x: point.x, y: point.y, button: this.mapButton(event.button), modifiers: this.collectModifiers(event) });
+    }
+    /**
+     * Mouse-up on the canvas → closes a drag with a `pointer-up` at the release point, disarming drag mode.
+     * If the pointer actually moved between down and up, marks the following synthetic `click` to be suppressed
+     * (so the drag selection isn't immediately collapsed by a trailing click).
+     */
+    handlePointerUp(event) {
+        if (!this.dragging) {
+            return;
+        }
+        this.dragging = false;
+        const point = this.toViewportCoords(event);
+        if (point) {
+            const start = this.dragStartPoint;
+            this.suppressNextClick = !!start && (start.x !== point.x || start.y !== point.y);
+            this.emitInput({ kind: 'pointer-up', x: point.x, y: point.y, button: this.mapButton(event.button), modifiers: this.collectModifiers(event) });
+        }
+        this.dragStartPoint = null;
+    }
+    /**
+     * Click → emits a viewport-mapped click WITH any held modifiers (e.g. Shift-click text selection). The
+     * server browser receives the press/release of a drag via {@link handlePointerDown}/{@link handlePointerUp};
+     * a plain click (down+up with no motion) still fires this `click` event, so a simple click relays as one
+     * click action — but we skip emitting it when it terminates a real drag (where down/up already covered it).
+     */
+    handlePointerClick(event) {
+        this.takeoverCanvas?.focus();
+        if (this.suppressNextClick) {
+            // This click terminates a real drag (selection) — the down/move/up already conveyed it.
+            this.suppressNextClick = false;
+            return;
+        }
+        const point = this.toViewportCoords(event);
+        if (point) {
+            this.emitInput({ kind: 'pointer-click', x: point.x, y: point.y, button: this.mapButton(event.button), modifiers: this.collectModifiers(event) });
+        }
+    }
+    /**
+     * Keydown → forwards printable keys, a curated set of control keys ({@link FORWARDED_CONTROL_KEYS}), AND
+     * any key combined with a Ctrl/Cmd/Alt modifier (so combos like Ctrl/Cmd+A select-all, Cmd+C/Cmd+V relay).
+     * Calls `preventDefault` + `stopPropagation` ONLY on forwarded keys, so (a) the host app keeps its own
+     * shortcuts on un-forwarded keys and (b) forwarded keys never bubble to the host overlay's global shortcuts
+     * (the T-to-type focus-steal). Lone modifier keys are never forwarded — they ride as `modifiers` on the
+     * next key/click.
+     */
+    handleKeyDown(event) {
+        const key = event.key;
+        if (MODIFIER_KEYS.has(key)) {
+            return; // a modifier on its own is not a keypress — it rides on the next key/click
+        }
+        const isPrintable = key.length === 1;
+        const hasComboModifier = event.ctrlKey || event.metaKey || event.altKey;
+        const isForwardable = isPrintable || FORWARDED_CONTROL_KEYS.has(key) || hasComboModifier;
+        if (!isForwardable) {
+            return; // leave non-forwarded keys to the host app
+        }
+        event.preventDefault();
+        // Stop the keystroke from reaching document-level handlers (e.g. the overlay's T-to-type) so the user's
+        // typing lands in the remote browser, not the local composer.
+        event.stopPropagation();
+        this.emitInput({ kind: 'key', key, modifiers: this.collectModifiers(event) });
+    }
+    /**
+     * Collects the modifier keys currently held during a DOM mouse/keyboard event into the relayed
+     * {@link RemoteBrowserModifier} list (empty when none are held).
+     *
+     * @param event The DOM event whose modifier flags to read.
+     * @returns The held modifiers, in a stable order.
+     */
+    collectModifiers(event) {
+        const modifiers = [];
+        if (event.shiftKey) {
+            modifiers.push('Shift');
+        }
+        if (event.ctrlKey) {
+            modifiers.push('Control');
+        }
+        if (event.altKey) {
+            modifiers.push('Alt');
+        }
+        if (event.metaKey) {
+            modifiers.push('Meta');
+        }
+        return modifiers;
+    }
+    /** Re-enters the zone to emit one human input (so subscribers see it inside Angular). */
+    emitInput(input) {
+        this.zone.run(() => this.HumanInput.emit(input));
+    }
+    /**
+     * Maps a DOM pointer event on the live canvas to VIEWPORT coordinates via {@link MapToViewportCoords}
+     * (the pure, unit-tested mapping). Returns `null` when no canvas is bound or mapping isn't possible yet.
+     *
+     * @param event The pointer event on the canvas.
+     * @returns The integer viewport coordinates, or `null` when mapping isn't possible yet.
+     */
+    toViewportCoords(event) {
+        const canvas = this.takeoverCanvas;
+        if (!canvas) {
+            return null;
+        }
+        return MapToViewportCoords(event.clientX, event.clientY, canvas.getBoundingClientRect(), canvas.width, canvas.height);
+    }
+    // ----- synthetic cursor (local feedback — CDP frames don't include the OS cursor) -----------
+    /**
+     * Schedules a synthetic-cursor repaint on the next animation frame, coalescing a burst of moves to one
+     * paint (the newest position wins). Runs outside the zone — drawing the cursor never triggers Angular CD.
+     */
+    scheduleCursorPaint() {
+        if (this.cursorPaintScheduled) {
+            return;
+        }
+        this.cursorPaintScheduled = true;
+        this.zone.runOutsideAngular(() => requestAnimationFrame(() => this.paintSyntheticCursor()));
+    }
+    /**
+     * Draws (or clears) the synthetic cursor on the overlay canvas at {@link cursorViewportPoint}. The overlay
+     * shares the frame canvas's internal resolution (sized here to match), so a point drawn at viewport coords
+     * aligns exactly with the page underneath. A small brand-tinted ring with a center dot reads as a pointer
+     * without obscuring what it's over. No-op after destroy or when the overlay isn't mounted.
+     */
+    paintSyntheticCursor() {
+        this.cursorPaintScheduled = false;
+        const overlay = this.cursorCanvas?.nativeElement;
+        const frame = this.frameCanvas?.nativeElement;
+        if (this.destroyed || !overlay || !frame) {
+            return;
+        }
+        // Keep the overlay's internal resolution locked to the frame canvas so coordinate spaces match.
+        if (overlay.width !== frame.width || overlay.height !== frame.height) {
+            overlay.width = frame.width;
+            overlay.height = frame.height;
+        }
+        const ctx = overlay.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        ctx.clearRect(0, 0, overlay.width, overlay.height);
+        const point = this.cursorViewportPoint;
+        if (!point) {
+            return; // pointer left the canvas — leave the overlay cleared
+        }
+        const ring = this.resolveCssColor('--mj-brand-primary', '#264FAF');
+        ctx.beginPath();
+        ctx.arc(point.x, point.y, SYNTHETIC_CURSOR_RADIUS, 0, Math.PI * 2);
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = ring;
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.arc(point.x, point.y, 1.5, 0, Math.PI * 2);
+        ctx.fillStyle = ring;
+        ctx.fill();
+    }
+    /** Clears the synthetic-cursor overlay (e.g. on detach). No-op when the overlay isn't mounted. */
+    clearSyntheticCursor() {
+        const overlay = this.cursorCanvas?.nativeElement;
+        const ctx = overlay?.getContext('2d');
+        if (overlay && ctx) {
+            ctx.clearRect(0, 0, overlay.width, overlay.height);
+        }
+    }
+    /**
+     * Resolves a CSS custom property (design token) to its computed color value off the host element, so the
+     * canvas-drawn cursor honors theming. Falls back to the supplied default when the token is unset or the
+     * host isn't measurable.
+     *
+     * @param token The CSS custom property name (e.g. `'--mj-brand-primary'`).
+     * @param fallback The color to use when the token resolves empty.
+     * @returns The resolved color string.
+     */
+    resolveCssColor(token, fallback) {
+        const host = this.frameCanvas?.nativeElement;
+        if (!host) {
+            return fallback;
+        }
+        const value = getComputedStyle(host).getPropertyValue(token).trim();
+        return value.length > 0 ? value : fallback;
+    }
+    /** Maps a DOM `MouseEvent.button` (0/1/2) to the relayed button union, defaulting to `'left'`. */
+    mapButton(button) {
+        if (button === 1) {
+            return 'middle';
+        }
+        if (button === 2) {
+            return 'right';
+        }
+        return 'left';
+    }
+    static ɵfac = function RemoteBrowserSurfaceComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RemoteBrowserSurfaceComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RemoteBrowserSurfaceComponent, selectors: [["mj-realtime-remote-browser-surface"]], viewQuery: function RemoteBrowserSurfaceComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5)(_c1, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.frameCanvas = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.cursorCanvas = _t.first);
+        } }, inputs: { Fetch: "Fetch", Streaming: "Streaming", Interactive: "Interactive", AudioAvailable: "AudioAvailable", AudioMuted: "AudioMuted" }, outputs: { HumanInput: "HumanInput", AudioMutedChange: "AudioMutedChange" }, decls: 13, vars: 8, consts: [["frameCanvas", ""], ["cursorCanvas", ""], [1, "rb-surface"], [1, "rb-bar"], ["aria-hidden", "true", 1, "rb-live"], [1, "rb-live-label"], [1, "rb-url", 3, "title"], ["title", "Click and type to control the live page", 1, "rb-driving"], ["type", "button", 1, "rb-speaker", 3, "rb-speaker--muted", "title"], [1, "rb-viewport"], ["alt", "Live view of the shared browser", 1, "rb-screenshot", 3, "src"], [1, "rb-placeholder"], ["aria-hidden", "true", 1, "fa-solid", "fa-hand-pointer"], ["type", "button", 1, "rb-speaker", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid"], [1, "rb-canvas-stack"], [1, "rb-screenshot"], [1, "rb-screenshot", "rb-cursor-overlay"], ["text", "Waiting for the browser\u2026", "size", "medium"]], template: function RemoteBrowserSurfaceComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 2)(1, "div", 3);
+            i0.ɵɵelement(2, "span", 4);
+            i0.ɵɵelementStart(3, "span", 5);
+            i0.ɵɵtext(4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "span", 6);
+            i0.ɵɵtext(6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(7, RemoteBrowserSurfaceComponent_Conditional_7_Template, 3, 0, "span", 7);
+            i0.ɵɵconditionalCreate(8, RemoteBrowserSurfaceComponent_Conditional_8_Template, 2, 9, "button", 8);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(9, "div", 9);
+            i0.ɵɵconditionalCreate(10, RemoteBrowserSurfaceComponent_Conditional_10_Template, 5, 6)(11, RemoteBrowserSurfaceComponent_Conditional_11_Template, 1, 1, "img", 10)(12, RemoteBrowserSurfaceComponent_Conditional_12_Template, 2, 0, "div", 11);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("rb-live--on", ctx.HasSnapshot);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.HasSnapshot ? "Live" : "Connecting\u2026");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("title", ctx.CurrentUrl || "");
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate(ctx.CurrentUrl || "No page loaded yet");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.CanTakeOver ? 7 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.AudioAvailable ? 8 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.Streaming ? 10 : ctx.ScreenshotDataUrl ? 11 : 12);
+        } }, dependencies: [CommonModule, SharedGenericModule, i1.LoadingComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n    .rb-surface[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--mj-bg-surface-sunken);\n    }\n    .rb-bar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--mj-border-subtle);\n      background: var(--mj-bg-surface);\n      font-size: 0.8125rem;\n      color: var(--mj-text-secondary);\n    }\n    .rb-live[_ngcontent-%COMP%] {\n      width: 8px;\n      height: 8px;\n      border-radius: var(--mj-radius-full, 50%);\n      background: var(--mj-text-disabled);\n      flex: 0 0 auto;\n    }\n    .rb-live--on[_ngcontent-%COMP%] {\n      background: var(--mj-status-success);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n    }\n    .rb-live-label[_ngcontent-%COMP%] {\n      flex: 0 0 auto;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n    .rb-url[_ngcontent-%COMP%] {\n      flex: 1 1 auto;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      font-family: var(--mj-font-mono, monospace);\n    }\n    .rb-viewport[_ngcontent-%COMP%] {\n      flex: 1 1 auto;\n      min-height: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      overflow: auto;\n      padding: 12px;\n    }\n    .rb-screenshot[_ngcontent-%COMP%] {\n      max-width: 100%;\n      max-height: 100%;\n      object-fit: contain;\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md, 6px);\n      box-shadow: var(--mj-shadow-sm, 0 1px 3px color-mix(in srgb, var(--mj-text-primary) 12%, transparent));\n      background: var(--mj-bg-surface);\n    }\n    .rb-screenshot--interactive[_ngcontent-%COMP%] {\n      \n\n\n      cursor: none;\n      outline: none;\n    }\n    .rb-screenshot--interactive[_ngcontent-%COMP%]:focus-visible {\n      border-color: var(--mj-border-focus);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n    \n\n\n    .rb-canvas-stack[_ngcontent-%COMP%] {\n      position: relative;\n      display: inline-flex;\n      max-width: 100%;\n      max-height: 100%;\n      min-height: 0;\n    }\n    .rb-cursor-overlay[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      \n\n\n      border: none;\n      box-shadow: none;\n      background: transparent;\n      pointer-events: none;\n    }\n    .rb-driving[_ngcontent-%COMP%] {\n      flex: 0 0 auto;\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 2px 8px;\n      border-radius: var(--mj-radius-full, 999px);\n      font-size: 0.75rem;\n      font-weight: 600;\n      color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    }\n    .rb-placeholder[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .rb-hidden[_ngcontent-%COMP%] {\n      display: none;\n    }\n    .rb-speaker[_ngcontent-%COMP%] {\n      flex: 0 0 auto;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 28px;\n      height: 28px;\n      padding: 0;\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md, 6px);\n      background: var(--mj-bg-surface);\n      color: var(--mj-brand-primary);\n      cursor: pointer;\n      font-size: 0.8125rem;\n      transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;\n    }\n    .rb-speaker[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-hover);\n    }\n    .rb-speaker[_ngcontent-%COMP%]:focus-visible {\n      outline: none;\n      border-color: var(--mj-border-focus);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n    .rb-speaker--muted[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n    }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RemoteBrowserSurfaceComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-realtime-remote-browser-surface', imports: [CommonModule, SharedGenericModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="rb-surface">
+      <div class="rb-bar">
+        <span class="rb-live" [class.rb-live--on]="HasSnapshot" aria-hidden="true"></span>
+        <span class="rb-live-label">{{ HasSnapshot ? 'Live' : 'Connecting…' }}</span>
+        <span class="rb-url" [title]="CurrentUrl || ''">{{ CurrentUrl || 'No page loaded yet' }}</span>
+        @if (CanTakeOver) {
+          <span class="rb-driving" title="Click and type to control the live page">
+            <i class="fa-solid fa-hand-pointer" aria-hidden="true"></i> You're driving
+          </span>
+        }
+        @if (AudioAvailable) {
+          <button
+            type="button"
+            class="rb-speaker"
+            [class.rb-speaker--muted]="AudioMuted"
+            [attr.aria-pressed]="!AudioMuted"
+            [attr.aria-label]="AudioMuted ? 'Unmute browser audio' : 'Mute browser audio'"
+            [title]="AudioMuted ? 'Unmute browser audio' : 'Mute browser audio'"
+            (click)="ToggleAudioMuted()"
+          >
+            <i class="fa-solid" [class.fa-volume-high]="!AudioMuted" [class.fa-volume-xmark]="AudioMuted" aria-hidden="true"></i>
+          </button>
+        }
+      </div>
+      <div class="rb-viewport">
+        @if (Streaming) {
+          <div class="rb-canvas-stack" [class.rb-hidden]="!HasFrame">
+            <canvas #frameCanvas class="rb-screenshot" [class.rb-screenshot--interactive]="CanTakeOver"></canvas>
+            @if (CanTakeOver) {
+              <!-- Synthetic cursor overlay: same internal resolution + CSS box as the frame canvas, so a
+                   point drawn at viewport coords aligns exactly. CDP screencast frames don't include the OS
+                   cursor, so we render the user's pointer locally for immediate, round-trip-free feedback. -->
+              <canvas #cursorCanvas class="rb-screenshot rb-cursor-overlay"></canvas>
+            }
+          </div>
+          @if (!HasFrame) {
+            <div class="rb-placeholder">
+              <mj-loading text="Waiting for the browser…" size="medium"></mj-loading>
+            </div>
+          }
+        } @else if (ScreenshotDataUrl) {
+          <img class="rb-screenshot" [src]="ScreenshotDataUrl" alt="Live view of the shared browser" />
+        } @else {
+          <div class="rb-placeholder">
+            <mj-loading text="Waiting for the browser…" size="medium"></mj-loading>
+          </div>
+        }
+      </div>
+    </div>
+  `, styles: ["\n    :host { display: block; height: 100%; }\n    .rb-surface {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--mj-bg-surface-sunken);\n    }\n    .rb-bar {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--mj-border-subtle);\n      background: var(--mj-bg-surface);\n      font-size: 0.8125rem;\n      color: var(--mj-text-secondary);\n    }\n    .rb-live {\n      width: 8px;\n      height: 8px;\n      border-radius: var(--mj-radius-full, 50%);\n      background: var(--mj-text-disabled);\n      flex: 0 0 auto;\n    }\n    .rb-live--on {\n      background: var(--mj-status-success);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n    }\n    .rb-live-label {\n      flex: 0 0 auto;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n    .rb-url {\n      flex: 1 1 auto;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      font-family: var(--mj-font-mono, monospace);\n    }\n    .rb-viewport {\n      flex: 1 1 auto;\n      min-height: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      overflow: auto;\n      padding: 12px;\n    }\n    .rb-screenshot {\n      max-width: 100%;\n      max-height: 100%;\n      object-fit: contain;\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md, 6px);\n      box-shadow: var(--mj-shadow-sm, 0 1px 3px color-mix(in srgb, var(--mj-text-primary) 12%, transparent));\n      background: var(--mj-bg-surface);\n    }\n    .rb-screenshot--interactive {\n      /* Hide the OS cursor \u2014 we render a synthetic cursor on the overlay so there's exactly one pointer\n         and it reads naturally for clicking on a web page (not the old crosshair). */\n      cursor: none;\n      outline: none;\n    }\n    .rb-screenshot--interactive:focus-visible {\n      border-color: var(--mj-border-focus);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n    /* Frame canvas + synthetic-cursor overlay share one box; the stack shrinks to the frame canvas so the\n       absolutely-positioned overlay (inset:0, same object-fit) lines up pixel-for-pixel with it. */\n    .rb-canvas-stack {\n      position: relative;\n      display: inline-flex;\n      max-width: 100%;\n      max-height: 100%;\n      min-height: 0;\n    }\n    .rb-cursor-overlay {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      /* Transparent passthrough layer \u2014 no chrome of its own, and never steals pointer/wheel events from\n         the frame canvas underneath (those listeners drive takeover). */\n      border: none;\n      box-shadow: none;\n      background: transparent;\n      pointer-events: none;\n    }\n    .rb-driving {\n      flex: 0 0 auto;\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 2px 8px;\n      border-radius: var(--mj-radius-full, 999px);\n      font-size: 0.75rem;\n      font-weight: 600;\n      color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    }\n    .rb-placeholder {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .rb-hidden {\n      display: none;\n    }\n    .rb-speaker {\n      flex: 0 0 auto;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 28px;\n      height: 28px;\n      padding: 0;\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md, 6px);\n      background: var(--mj-bg-surface);\n      color: var(--mj-brand-primary);\n      cursor: pointer;\n      font-size: 0.8125rem;\n      transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;\n    }\n    .rb-speaker:hover {\n      background: var(--mj-bg-surface-hover);\n    }\n    .rb-speaker:focus-visible {\n      outline: none;\n      border-color: var(--mj-border-focus);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n    .rb-speaker--muted {\n      color: var(--mj-text-muted);\n    }\n  "] }]
+    }], null, { Fetch: [{
+            type: Input
+        }], Streaming: [{
+            type: Input
+        }], Interactive: [{
+            type: Input
+        }], HumanInput: [{
+            type: Output
+        }], AudioAvailable: [{
+            type: Input
+        }], AudioMuted: [{
+            type: Input
+        }], AudioMutedChange: [{
+            type: Output
+        }], frameCanvas: [{
+            type: ViewChild,
+            args: ['frameCanvas']
+        }], cursorCanvas: [{
+            type: ViewChild,
+            args: ['cursorCanvas']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RemoteBrowserSurfaceComponent, { className: "RemoteBrowserSurfaceComponent", filePath: "src/lib/components/realtime/remote-browser/remote-browser-surface.component.ts", lineNumber: 331 }); })();
+//# sourceMappingURL=remote-browser-surface.component.js.map