@zenbu-labs/pixel 0.0.0 → 0.0.12

package/dist/web/host.d.ts

@@ -0,0 +1,123 @@
+import type { EngineKeyEvent, PastedImage, PointerEvent, Surface, WheelEvent } from "../react";
+import type { DownloadProgress } from "./browser-session";
+import { DevtoolsWindow } from "./devtools";
+import type { DevtoolsAction } from "./devtools";
+import { PopupWindow } from "./popup";
+import type { DevtoolsDock, SurfaceLayout, WebViewState } from "./types";
+import type { ZoomDirection } from "./zoom";
+export declare const QUIT_URL = "pixel://quit";
+export type OpenWindowDecision = "popup" | "deny" | "navigate";
+export type OpenWindowPolicy = OpenWindowDecision | ((details: Electron.HandlerDetails) => OpenWindowDecision);
+export declare function defaultOpenWindow(details: Electron.HandlerDetails): OpenWindowDecision;
+export declare function decideOpenWindow(policy: OpenWindowPolicy | undefined, details: Electron.HandlerDetails): OpenWindowDecision;
+type ReservedWindowOptions = "width" | "height" | "useContentSize" | "show" | "paintWhenInitiallyHidden" | "webPreferences";
+type ReservedWebPreferences = "offscreen" | "disableDialogs" | "backgroundThrottling";
+export type BrowserWindowOptions = Omit<Electron.BrowserWindowConstructorOptions, ReservedWindowOptions> & {
+    webPreferences?: Omit<Electron.WebPreferences, ReservedWebPreferences>;
+};
+export interface HostOptions {
+    url: string;
+    background: string;
+    clipboardRead: boolean;
+    proxy: string | null;
+    browserWindowOptions: BrowserWindowOptions;
+}
+export declare class PageHost {
+    readonly surface: Surface;
+    private readonly popupSurface;
+    private readonly window;
+    private readonly browserWindowOptions;
+    private readonly onState;
+    private renderScale;
+    private layout;
+    private state;
+    private stopped;
+    private contentFocused;
+    private readonly input;
+    private readonly clipboardRead;
+    private background;
+    private pendingPopupSize;
+    private readonly favicons;
+    private faviconSeq;
+    private findText;
+    private cdpAttached;
+    private cdpEventHandlers;
+    private readonly onDisplayChange;
+    private visible;
+    private framePinned;
+    private wholeSurfaceNext;
+    private readonly bitmaps;
+    private lastFrameSize;
+    onFrameSubmitted: (() => void) | null;
+    cursorShape: string;
+    onCursorChange: ((shape: string) => void) | null;
+    onOpenWindow: OpenWindowPolicy | null;
+    onQuit: (() => void) | null;
+    onDownload: ((progress: DownloadProgress) => void) | null;
+    private readonly popups;
+    onPopupChange: (() => void) | null;
+    get popup(): PopupWindow | null;
+    devtools: DevtoolsWindow | null;
+    devtoolsFocused: boolean;
+    onDevtoolsChange: (() => void) | null;
+    onDevtoolsAction: ((action: DevtoolsAction) => void) | null;
+    onContextMenu: ((params: Electron.ContextMenuParams) => void) | null;
+    onClosed: (() => void) | null;
+    constructor(surface: Surface, popupSurface: Surface, layout: SurfaceLayout, options: HostOptions, onState: (state: WebViewState) => void);
+    get webContents(): Electron.WebContents;
+    resize(layout: SurfaceLayout, options?: {
+        keepFrame?: boolean;
+    }): void;
+    navigate(url: string): void;
+    back(): void;
+    forward(): void;
+    reload(): void;
+    zoom(direction: ZoomDirection): number;
+    scaleZoom(ratio: number): number;
+    attachCdp(): Promise<void>;
+    setBackground(background: string): Promise<void>;
+    private emulateColorScheme;
+    cdp(method: string, params?: Record<string, unknown>): Promise<Record<string, unknown>>;
+    onCdpEvent(method: string, handler: ((params: unknown) => void) | null): void;
+    private applyFrameRate;
+    pinFrameRate(pinned: boolean): void;
+    frameSize(): {
+        width: number;
+        height: number;
+    } | null;
+    find(text: string): void;
+    findNext(forward: boolean): void;
+    stopFind(): void;
+    focusContent(): Promise<void> | undefined;
+    openDevtools(surface: Surface, layout: SurfaceLayout, dock: DevtoolsDock): void;
+    closeDevtools(): void;
+    focusDevtools(): void;
+    blurDevtools(): void;
+    inspect(x: number, y: number): void;
+    selectionText(): Promise<string>;
+    blurContent(): void;
+    private setFocusEmulation;
+    pointer(event: PointerEvent): void;
+    wheel(event: WheelEvent): void;
+    key(event: EngineKeyEvent): void;
+    sendToPage(channel: string, payload: unknown): void;
+    hasContents(id: number): boolean;
+    paste(text: string): void;
+    pasteImage(image: PastedImage): void;
+    setActive(active: boolean): void;
+    stop(): void;
+    private teardown;
+    private readonly onWindowClosed;
+    setVisible(visible: boolean): void;
+    private contentSize;
+    invalidate(): void;
+    private loadFavicon;
+    private updateNavigation;
+    private updateState;
+    private quitLink;
+    private handleWindowOpen;
+    private adoptPopup;
+    private tabPopupSize;
+    private popupSize;
+}
+export {};

package/dist/web/host.js

@@ -0,0 +1,573 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageHost = exports.QUIT_URL = void 0;
+exports.defaultOpenWindow = defaultOpenWindow;
+exports.decideOpenWindow = decideOpenWindow;
+const electron_1 = require("electron");
+const browser_session_1 = require("./browser-session");
+const cursor_1 = require("./cursor");
+const devtools_1 = require("./devtools");
+const favicon_1 = require("./favicon");
+const frame_rate_1 = require("./frame-rate");
+const input_1 = require("./input");
+const offscreen_1 = require("./offscreen");
+const paint_1 = require("./paint");
+const popup_1 = require("./popup");
+const session_1 = require("./session");
+const types_1 = require("./types");
+const zoom_1 = require("./zoom");
+exports.QUIT_URL = "pixel://quit";
+function defaultOpenWindow(details) {
+    return details.disposition === "new-window" ? "popup" : "navigate";
+}
+function decideOpenWindow(policy, details) {
+    if (typeof policy === "function")
+        return policy(details);
+    return policy ?? defaultOpenWindow(details);
+}
+function windowOptions(passthrough, size, offscreen) {
+    const { webPreferences, ...window } = passthrough;
+    return {
+        frame: false,
+        skipTaskbar: true,
+        fullscreenable: false,
+        resizable: false,
+        acceptFirstMouse: true,
+        ...window,
+        width: size.width,
+        height: size.height,
+        useContentSize: true,
+        show: false,
+        paintWhenInitiallyHidden: true,
+        webPreferences: {
+            sandbox: true,
+            nodeIntegration: false,
+            // with sandbox true this is safe, we enable so a users preload script runs inside iframes/webviews
+            nodeIntegrationInSubFrames: true,
+            contextIsolation: true,
+            ...webPreferences,
+            offscreen,
+            disableDialogs: true,
+            backgroundThrottling: false,
+        },
+    };
+}
+class PageHost {
+    surface;
+    popupSurface;
+    window;
+    browserWindowOptions;
+    onState;
+    renderScale;
+    layout;
+    state;
+    stopped = false;
+    contentFocused = false;
+    input;
+    clipboardRead;
+    background;
+    pendingPopupSize = null;
+    favicons = new favicon_1.FaviconCache();
+    faviconSeq = 0;
+    findText = "";
+    cdpAttached = false;
+    cdpEventHandlers = new Map();
+    onDisplayChange = () => {
+        if (this.stopped)
+            return;
+        this.applyFrameRate();
+    };
+    visible = true;
+    framePinned = false;
+    wholeSurfaceNext = true;
+    bitmaps;
+    lastFrameSize = null;
+    onFrameSubmitted = null;
+    cursorShape = "default";
+    onCursorChange = null;
+    onOpenWindow = null;
+    onQuit = null;
+    onDownload = null;
+    popups = [];
+    onPopupChange = null;
+    get popup() {
+        return this.popups[this.popups.length - 1] ?? null;
+    }
+    devtools = null;
+    devtoolsFocused = false;
+    onDevtoolsChange = null;
+    onDevtoolsAction = null;
+    onContextMenu = null;
+    onClosed = null;
+    constructor(surface, popupSurface, layout, options, onState) {
+        this.clipboardRead = options.clipboardRead;
+        this.browserWindowOptions = options.browserWindowOptions;
+        this.surface = surface;
+        this.bitmaps = new paint_1.BitmapPresenter(surface);
+        this.popupSurface = popupSurface;
+        this.background = options.background;
+        this.layout = layout;
+        this.onState = onState;
+        this.renderScale = renderScaleFor(layout);
+        this.state = (0, types_1.initialWebViewState)(options.url);
+        const size = this.contentSize(layout);
+        this.window = new electron_1.BrowserWindow(windowOptions(this.browserWindowOptions, size, (0, offscreen_1.offscreenPreferences)(this.renderScale)));
+        (0, session_1.prepareSession)(this.window.webContents.session);
+        if (options.proxy)
+            void (0, browser_session_1.routeThroughProxy)(this.window.webContents.session, options.proxy);
+        if (this.clipboardRead)
+            (0, browser_session_1.allowClipboardRead)(this.window.webContents);
+        (0, browser_session_1.onDownloadFor)(this.window.webContents, (progress) => this.onDownload?.(progress));
+        this.input = new input_1.PageInput({
+            contents: () => this.window.webContents,
+            scale: () => this.layout.scale,
+            focus: () => this.focusContent(),
+            cdp: async (method, params) => {
+                await this.attachCdp();
+                return this.cdp(method, params);
+            },
+        });
+        this.window.webContents.setFrameRate((0, frame_rate_1.frameRate)());
+        this.window.on("closed", this.onWindowClosed);
+        this.window.webContents.on("will-navigate", (event, url) => {
+            if (this.quitLink(url))
+                event.preventDefault();
+        });
+        electron_1.screen.on("display-added", this.onDisplayChange);
+        electron_1.screen.on("display-removed", this.onDisplayChange);
+        electron_1.screen.on("display-metrics-changed", this.onDisplayChange);
+        this.window.webContents.on("paint", (event, dirtyRect, image) => {
+            const shmFrame = event.softwareFrame;
+            const size = event.texture
+                ? {
+                    width: event.texture.textureInfo.codedSize.width,
+                    height: event.texture.textureInfo.codedSize.height,
+                }
+                : shmFrame
+                    ? {
+                        width: shmFrame.frameInfo.contentRect.width,
+                        height: shmFrame.frameInfo.contentRect.height,
+                    }
+                    : image.getSize();
+            const presented = event.texture || shmFrame
+                ? (0, paint_1.presentPaint)(this.surface, event.texture, shmFrame, image, dirtyRect, this.wholeSurfaceNext)
+                : this.bitmaps.push(image, dirtyRect, this.wholeSurfaceNext);
+            if (!presented)
+                return;
+            this.wholeSurfaceNext = false;
+            this.lastFrameSize = size;
+            this.onFrameSubmitted?.();
+        });
+        this.window.webContents.on("did-start-navigation", (_event, _url, isInPlace, isMainFrame) => {
+            if (isMainFrame && !isInPlace)
+                this.updateState({ loading: true });
+        });
+        this.window.webContents.on("did-stop-loading", () => this.updateNavigation(false));
+        this.window.webContents.on("did-navigate", (_event, url) => {
+            if (urlHost(url) !== urlHost(this.state.url))
+                this.updateState({ favicon: null });
+            this.updateNavigation(this.state.loading, url);
+        });
+        this.window.webContents.on("did-navigate-in-page", (_event, url, mainFrame) => {
+            if (mainFrame)
+                this.updateNavigation(this.state.loading, url);
+        });
+        this.window.webContents.on("page-favicon-updated", (_event, favicons) => {
+            void this.loadFavicon(favicons);
+        });
+        this.window.webContents.on("page-title-updated", (_event, title) => {
+            this.updateState({ title });
+        });
+        this.window.webContents.on("cursor-changed", (_event, type) => {
+            const shape = (0, cursor_1.cursorShapeFor)(type);
+            if (shape === this.cursorShape)
+                return;
+            this.cursorShape = shape;
+            this.onCursorChange?.(shape);
+        });
+        this.window.webContents.on("context-menu", (_event, params) => {
+            this.onContextMenu?.(params);
+        });
+        this.window.webContents.on("found-in-page", (_event, result) => {
+            this.updateState({
+                findMatches: { active: result.activeMatchOrdinal, total: result.matches },
+            });
+        });
+        this.window.webContents.setWindowOpenHandler((details) => this.handleWindowOpen(details, this.window.webContents));
+        this.window.webContents.on("did-create-window", (child) => this.adoptPopup(child));
+        void this.window.loadURL(options.url);
+        this.onState(this.state);
+    }
+    get webContents() {
+        return this.window.webContents;
+    }
+    resize(layout, options) {
+        if (this.stopped)
+            return;
+        if (this.layout.x === layout.x &&
+            this.layout.y === layout.y &&
+            this.layout.width === layout.width &&
+            this.layout.height === layout.height &&
+            this.layout.scale === layout.scale) {
+            return;
+        }
+        const sizeChanged = this.layout.width !== layout.width ||
+            this.layout.height !== layout.height ||
+            this.layout.scale !== layout.scale;
+        this.layout = layout;
+        this.renderScale = renderScaleFor(layout);
+        if (!sizeChanged)
+            return;
+        if (!options?.keepFrame)
+            this.surface.clear();
+        const size = this.contentSize(layout);
+        this.window.setContentSize(size.width, size.height, false);
+    }
+    navigate(url) {
+        void this.window.webContents.loadURL(url);
+    }
+    back() {
+        if (this.window.webContents.navigationHistory.canGoBack()) {
+            this.window.webContents.navigationHistory.goBack();
+        }
+    }
+    forward() {
+        if (this.window.webContents.navigationHistory.canGoForward()) {
+            this.window.webContents.navigationHistory.goForward();
+        }
+    }
+    reload() {
+        if (this.state.loading)
+            this.window.webContents.stop();
+        else
+            this.window.webContents.reload();
+    }
+    zoom(direction) {
+        const factor = (0, zoom_1.stepZoom)(this.window.webContents, direction);
+        this.updateState({ zoom: factor });
+        return factor;
+    }
+    scaleZoom(ratio) {
+        const factor = (0, zoom_1.scaleZoom)(this.window.webContents, ratio);
+        this.updateState({ zoom: factor });
+        return factor;
+    }
+    async attachCdp() {
+        if (this.cdpAttached)
+            return;
+        this.window.webContents.debugger.attach("1.3");
+        this.cdpAttached = true;
+        this.window.webContents.debugger.on("message", (_event, method, params) => {
+            this.cdpEventHandlers.get(method)?.(params);
+        });
+        await this.cdp("Runtime.enable");
+        await this.cdp("Page.enable");
+        await this.emulateColorScheme();
+    }
+    async setBackground(background) {
+        this.background = background;
+        await this.emulateColorScheme();
+    }
+    async emulateColorScheme() {
+        if (!this.cdpAttached)
+            return;
+        const n = parseInt(this.background.slice(1), 16);
+        const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+        const dark = 0.2126 * r + 0.7152 * g + 0.0722 * b < 128;
+        await this.cdp("Emulation.setEmulatedMedia", {
+            features: [{ name: "prefers-color-scheme", value: dark ? "dark" : "light" }],
+        });
+    }
+    cdp(method, params) {
+        return this.window.webContents.debugger.sendCommand(method, params);
+    }
+    onCdpEvent(method, handler) {
+        if (handler)
+            this.cdpEventHandlers.set(method, handler);
+        else
+            this.cdpEventHandlers.delete(method);
+    }
+    applyFrameRate() {
+        this.window.webContents.setFrameRate(this.visible || this.framePinned ? (0, frame_rate_1.frameRate)() : 4);
+    }
+    pinFrameRate(pinned) {
+        if (this.framePinned === pinned || this.stopped)
+            return;
+        this.framePinned = pinned;
+        this.applyFrameRate();
+    }
+    frameSize() {
+        return this.lastFrameSize;
+    }
+    find(text) {
+        this.findText = text;
+        if (!text) {
+            this.stopFind();
+            return;
+        }
+        this.window.webContents.findInPage(text);
+    }
+    findNext(forward) {
+        if (!this.findText)
+            return;
+        this.window.webContents.findInPage(this.findText, { forward, findNext: true });
+    }
+    stopFind() {
+        this.findText = "";
+        this.window.webContents.stopFindInPage("clearSelection");
+        this.updateState({ findMatches: null });
+    }
+    focusContent() {
+        if (this.stopped)
+            return;
+        this.blurDevtools();
+        if (this.contentFocused)
+            return;
+        this.window.focus();
+        this.window.webContents.focus();
+        this.contentFocused = true;
+        return this.setFocusEmulation(true).catch(() => { });
+    }
+    openDevtools(surface, layout, dock) {
+        if (this.devtools || this.stopped)
+            return;
+        const devtools = new devtools_1.DevtoolsWindow(this.window.webContents, surface, layout, dock, this.background, this.renderScale, (action) => this.onDevtoolsAction?.(action), () => {
+            if (this.devtools !== devtools)
+                return;
+            this.devtools = null;
+            this.devtoolsFocused = false;
+            this.onDevtoolsChange?.();
+        });
+        devtools.onCursorChange = () => this.onCursorChange?.(devtools.cursorShape);
+        devtools.setVisible(this.visible);
+        this.devtools = devtools;
+        this.onDevtoolsChange?.();
+    }
+    closeDevtools() {
+        this.devtools?.close();
+    }
+    focusDevtools() {
+        if (this.devtoolsFocused || !this.devtools)
+            return;
+        this.blurContent();
+        this.devtoolsFocused = true;
+        this.devtools.focus();
+    }
+    blurDevtools() {
+        if (!this.devtoolsFocused)
+            return;
+        this.devtoolsFocused = false;
+        this.devtools?.blur();
+    }
+    inspect(x, y) {
+        this.window.webContents.inspectElement(Math.round(x), Math.round(y));
+    }
+    selectionText() {
+        return this.input.selectionText();
+    }
+    blurContent() {
+        if (!this.contentFocused)
+            return;
+        this.input.releaseKeys();
+        this.window.blurWebView();
+        this.contentFocused = false;
+        void this.setFocusEmulation(false).catch(() => { });
+    }
+    async setFocusEmulation(enabled) {
+        await this.attachCdp();
+        await this.cdp("Emulation.setFocusEmulationEnabled", { enabled });
+    }
+    pointer(event) {
+        if (this.stopped)
+            return;
+        this.input.pointer(event);
+    }
+    wheel(event) {
+        if (this.stopped)
+            return;
+        this.input.wheel(event);
+    }
+    key(event) {
+        if (this.stopped)
+            return;
+        this.input.key(event);
+    }
+    sendToPage(channel, payload) {
+        try {
+            this.window.webContents.send(channel, payload);
+        }
+        catch { }
+    }
+    hasContents(id) {
+        return this.window.webContents.id === id;
+    }
+    paste(text) {
+        this.input.paste(text);
+    }
+    pasteImage(image) {
+        this.input.pasteImage(image);
+    }
+    setActive(active) {
+        if (!active) {
+            this.blurContent();
+            this.input.releaseModifiers();
+        }
+    }
+    stop() {
+        if (this.stopped)
+            return;
+        this.stopped = true;
+        this.teardown();
+        this.window.destroy();
+    }
+    teardown() {
+        for (const popup of [...this.popups])
+            popup.close();
+        this.devtools?.close();
+        electron_1.screen.off("display-added", this.onDisplayChange);
+        electron_1.screen.off("display-removed", this.onDisplayChange);
+        electron_1.screen.off("display-metrics-changed", this.onDisplayChange);
+        this.surface.close();
+    }
+    onWindowClosed = () => {
+        if (this.stopped)
+            return;
+        this.stopped = true;
+        this.teardown();
+        this.onClosed?.();
+    };
+    setVisible(visible) {
+        if (this.stopped)
+            return;
+        if (this.visible === visible)
+            return;
+        this.visible = visible;
+        this.popup?.setVisible(visible);
+        this.devtools?.setVisible(visible);
+        this.applyFrameRate();
+        if (visible)
+            this.window.webContents.invalidate();
+    }
+    contentSize(layout) {
+        return (0, types_1.cssSize)(layout.width, layout.height, layout.scale);
+    }
+    invalidate() {
+        if (this.stopped)
+            return;
+        this.wholeSurfaceNext = true;
+        this.window.webContents.invalidate();
+    }
+    async loadFavicon(urls) {
+        const seq = ++this.faviconSeq;
+        const file = await this.favicons.resolve(urls, this.window.webContents.session).catch(() => null);
+        if (file && seq === this.faviconSeq && !this.stopped)
+            this.updateState({ favicon: file });
+    }
+    updateNavigation(loading, url = this.window.webContents.getURL()) {
+        this.updateState({
+            url,
+            loading,
+            canGoBack: this.window.webContents.navigationHistory.canGoBack(),
+            canGoForward: this.window.webContents.navigationHistory.canGoForward(),
+            zoom: this.window.webContents.getZoomFactor(),
+        });
+    }
+    updateState(update) {
+        this.state = { ...this.state, ...update };
+        this.onState(this.state);
+    }
+    quitLink(url) {
+        if (!url.startsWith(exports.QUIT_URL))
+            return false;
+        setImmediate(() => {
+            if (!this.stopped)
+                this.onQuit?.();
+        });
+        return true;
+    }
+    handleWindowOpen(details, opener) {
+        const { url, disposition, features } = details;
+        if (this.quitLink(url))
+            return { action: "deny" };
+        const decision = decideOpenWindow(this.onOpenWindow ?? undefined, details);
+        if (decision === "deny")
+            return { action: "deny" };
+        if (decision === "navigate") {
+            void opener.loadURL(url);
+            return { action: "deny" };
+        }
+        const wantsTab = disposition === "foreground-tab" || disposition === "background-tab";
+        const size = wantsTab ? this.tabPopupSize() : this.popupSize(features);
+        this.pendingPopupSize = size;
+        return {
+            action: "allow",
+            overrideBrowserWindowOptions: windowOptions(this.browserWindowOptions, size, {
+                useSharedTexture: false,
+                deviceScaleFactor: this.renderScale,
+            }),
+        };
+    }
+    adoptPopup(child) {
+        if (this.clipboardRead)
+            (0, browser_session_1.allowClipboardRead)(child.webContents);
+        const size = this.pendingPopupSize ?? { width: 480, height: 360 };
+        this.pendingPopupSize = null;
+        child.webContents.on("did-create-window", (grandchild) => this.adoptPopup(grandchild));
+        const popup = new popup_1.PopupWindow(child, this.popupSurface, size, this.renderScale, () => this.layout.scale, () => this.onPopupChange?.(), () => {
+            const at = this.popups.indexOf(popup);
+            if (at < 0)
+                return;
+            const wasTop = at === this.popups.length - 1;
+            this.popups.splice(at, 1);
+            if (wasTop && this.visible)
+                this.popup?.setVisible(true);
+            this.onPopupChange?.();
+        }, (details) => this.handleWindowOpen(details, child.webContents));
+        popup.onCursorChange = () => {
+            if (this.popup === popup)
+                this.onCursorChange?.(popup.cursorShape);
+        };
+        this.popup?.setVisible(false);
+        this.popups.push(popup);
+        this.onPopupChange?.();
+    }
+    tabPopupSize() {
+        const content = this.contentSize(this.layout);
+        return {
+            width: Math.max(280, Math.round(content.width * 0.9)),
+            height: Math.max(280, Math.round(content.height * 0.9)),
+        };
+    }
+    popupSize(features) {
+        const requested = (name) => {
+            const match = features.match(new RegExp(`${name}=(\\d+)`));
+            return match ? Number(match[1]) : 0;
+        };
+        const content = this.contentSize(this.layout);
+        const clamp = (value, fallback, max) => Math.max(280, Math.min(value || fallback, max));
+        return {
+            width: clamp(requested("width"), Math.round(content.width * 0.62), Math.round(content.width * 0.85)),
+            height: clamp(requested("height"), Math.round(content.height * 0.68), Math.round(content.height * 0.8)),
+        };
+    }
+}
+exports.PageHost = PageHost;
+function renderScaleFor(layout) {
+    const explicit = Number(process.env.PIXEL_RENDER_SCALE);
+    if (Number.isFinite(explicit) && explicit > 0) {
+        return Math.max(0.5, Math.min(layout.scale, explicit));
+    }
+    const maxPixels = Number(process.env.PIXEL_MAX_PIXELS ?? 0);
+    if (!Number.isFinite(maxPixels) || maxPixels <= 0)
+        return layout.scale;
+    const cssPixels = layout.width * layout.height / (layout.scale * layout.scale);
+    return Math.max(0.5, Math.min(layout.scale, Math.sqrt(maxPixels / cssPixels)));
+}
+function urlHost(url) {
+    try {
+        return new URL(url).host;
+    }
+    catch {
+        return "";
+    }
+}