nudge-ui 0.2.0

package/dist/inspector/canvas/StaleChangeIndicator.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSyncExternalStore } from "react";
+import { isPreviewableChange, isTokenChange } from "../changes/changesLog.js";
+import { changeKey } from "../changes/model.js";
+import { getAnyPreviewDiagnostic, getPreviewDiagnosticRevision, subscribePreviewDiagnostics, } from "../changes/previewDiagnostics.js";
+import { humanizeSelector } from "../tokens/catalog.js";
+import { getScopingSelectorPattern } from "../runtime/runtimeConfig.js";
+import { isVerificationPending } from "./staleChangeDetector.js";
+export function StaleChangeIndicator({ change }) {
+    useSyncExternalStore(subscribePreviewDiagnostics, getPreviewDiagnosticRevision, getPreviewDiagnosticRevision);
+    if (!isPreviewableChange(change))
+        return null;
+    const result = getAnyPreviewDiagnostic(changeKey(change))?.result;
+    if (result === undefined) {
+        if (isVerificationPending()) {
+            return (_jsx("span", { className: "changes__verifying", "data-test": "stale-verifying", children: "Verifying..." }));
+        }
+        return null;
+    }
+    if (result.status === "applied") {
+        return (_jsx("span", { className: "changes__diagnostic", "data-test": "preview-applied", "data-status": "applied", children: "Preview active" }));
+    }
+    if (result.reason === "target-missing") {
+        // ADR-0011: host scoping markers are opaque structure and must not
+        // surface as human-facing guidance; the raw selector stays in change
+        // records for managed-rule targeting.
+        const selectorLabel = humanizeSelector(change.selector, getScopingSelectorPattern())
+            || change.selector;
+        return (_jsx("span", { className: "changes__stale", "data-test": "stale-missing", title: `Selector: ${selectorLabel}`, children: "Source missing \u2014 this edit may be stale" }));
+    }
+    if (result.reason === "token-drift") {
+        const currentValue = result.computedValue
+            ? ` (current: ${result.computedValue})`
+            : "";
+        if (isTokenChange(change)) {
+            return (_jsx("span", { className: "changes__stale", "data-test": "stale-token-drift", title: `Token ${change.tokenName} baseline has changed since this edit was made${currentValue}`, children: "Token baseline has changed" }));
+        }
+        return null;
+    }
+    return (_jsxs("span", { className: "changes__conflict", "data-test": "preview-conflict", title: `Computed: ${result.computedValue}`, children: ["Preview Blocked (", result.reason
+                ? result.reason.replace(/-/g, " ")
+                : "Unknown", ")"] }));
+}

package/dist/inspector/canvas/agentPresentation.d.ts

@@ -0,0 +1,87 @@
+import { type CanvasCommand, type CanvasCommandResult, type CanvasState } from "../../internal/agent-protocol.js";
+import { type CanvasCard, type CanvasComparisonGroup } from "./canvasStore.js";
+/**
+ * Renderer acknowledgements are deliberately shorter than the companion's
+ * request timeout. A controller can therefore receive a useful partial-failure
+ * acknowledgement instead of waiting for the browser bridge to expire first.
+ */
+export declare const DEFAULT_RENDERER_READY_TIMEOUT_MS = 4000;
+export declare const MAX_RENDERER_READY_TIMEOUT_MS = 5000;
+export declare const MAX_PRESENTATION_ROUTES: 64;
+export declare const MAX_GROUP_LABEL_LENGTH: 160;
+export type AgentRendererStatus = "unknown" | "pending" | "ready" | "error" | "timeout";
+export interface AgentRendererReadiness {
+    allReady: boolean;
+    statuses: Record<string, AgentRendererStatus>;
+    readyCardIds: string[];
+    failedCardIds: string[];
+    timedOutCardIds: string[];
+}
+/** Direct callers may use URL strings; the shared command uses AgentRoute. */
+export interface AgentPresentationRoute {
+    url: string;
+    title?: string | null;
+    label?: string;
+}
+export type AgentPresentationRouteInput = string | AgentPresentationRoute;
+export interface PresentAgentComparisonGroupInput {
+    label: string;
+    routes?: readonly AgentPresentationRouteInput[];
+    /** Convenience spelling for direct browser callers. */
+    urls?: readonly string[];
+    /** Commands use an explicit group ID; direct calls may receive a generated ID. */
+    groupId?: string;
+    /** Internal pairing identity used to enforce remove-own semantics. */
+    agentId?: string;
+    readyTimeoutMs?: number;
+}
+export interface AgentComparisonGroupPresentation {
+    group: CanvasComparisonGroup;
+    cards: CanvasCard[];
+    readiness: AgentRendererReadiness;
+}
+export type AgentPresentationState = CanvasState;
+export type AgentPresentationErrorCode = "not-development" | "workspace-locked" | "invalid-command" | "invalid-label" | "invalid-route" | "too-many-routes" | "group-not-found" | "group-id-conflict" | "not-group-owner" | "busy" | "not-paired" | "origin-mismatch" | "project-mismatch" | "token-mismatch" | "protocol-mismatch" | "renderer-timeout" | "renderer-error";
+export declare class AgentPresentationError extends Error {
+    readonly code: AgentPresentationErrorCode;
+    constructor(code: AgentPresentationErrorCode, message: string);
+}
+/** Records the renderer acknowledgement for one newly presented card. */
+export declare function acknowledgeAgentRendererReady(cardId: string): void;
+/** Records a bounded, non-throwing renderer failure for one presented card. */
+export declare function acknowledgeAgentRendererError(cardId: string, message?: string): void;
+export declare function forgetAgentRendererReadiness(cardIds: readonly string[]): void;
+export declare function waitForAgentRendererReadiness(cardIds: readonly string[], timeoutMs?: number): Promise<AgentRendererReadiness>;
+/** Returns the compact state shape shared with the companion bridge. */
+export declare function readCanvasState(): CanvasState;
+export declare function presentAgentComparisonGroup(input: PresentAgentComparisonGroupInput): Promise<AgentComparisonGroupPresentation>;
+export declare function focusAgentComparisonGroup(groupId: string, viewport?: {
+    width: number;
+    height: number;
+}): AgentPresentationState;
+export declare function fitAgentCanvas(viewport?: {
+    width: number;
+    height: number;
+}): AgentPresentationState;
+export declare function removeOwnAgentComparisonGroup(groupId: string, agentId?: string): AgentPresentationState;
+/** The only command vocabulary accepted by the browser presentation adapter. */
+export type AgentPresentationCommand = CanvasCommand;
+export type AgentPresentationCommandResponse = CanvasCommandResult;
+export interface AgentPresentationAdapterOptions {
+    projectId?: string;
+    /** Internal pairing identity used to enforce remove-own semantics. */
+    agentId?: string;
+}
+export interface AgentPresentationCommandPort {
+    /** Direct unit/host hook; it returns the shared acknowledgement body. */
+    execute(command: unknown): Promise<CanvasCommandResult>;
+    dispose(): void;
+}
+/**
+ * Creates the browser-controller adapter consumed by the inspector's
+ * CopyPromptButton. It does not install window events or define a second
+ * message protocol; callers pass the plain shared CanvasCommand they received.
+ */
+export declare function createAgentPresentationAdapter(options?: AgentPresentationAdapterOptions): AgentPresentationCommandPort;
+/** Clears presentation-only state between browser sessions and unit tests. */
+export declare function resetAgentPresentationState(): void;

package/dist/inspector/canvas/agentPresentation.js

@@ -0,0 +1,421 @@
+import { AGENT_PROTOCOL_LIMITS, isCanvasCommand, validateRoutes, } from "../../internal/agent-protocol.js";
+import { isNudgeUiDev } from "../runtime/devFlag.js";
+import { getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
+import { canWriteWorkspace } from "./workspaceLease.js";
+import { appendCanvasComparisonGroup, fitAllCards, focusCard, focusCanvasCards, getCanvasCards, getCanvasComparisonGroup, getCanvasComparisonGroups, getCanvasMode, getFocusedCardId, removeCanvasComparisonGroup, setCanvasMode, } from "./canvasStore.js";
+/**
+ * Renderer acknowledgements are deliberately shorter than the companion's
+ * request timeout. A controller can therefore receive a useful partial-failure
+ * acknowledgement instead of waiting for the browser bridge to expire first.
+ */
+export const DEFAULT_RENDERER_READY_TIMEOUT_MS = 4_000;
+export const MAX_RENDERER_READY_TIMEOUT_MS = 5_000;
+export const MAX_PRESENTATION_ROUTES = AGENT_PROTOCOL_LIMITS.routeCount;
+export const MAX_GROUP_LABEL_LENGTH = AGENT_PROTOCOL_LIMITS.label;
+const DEFAULT_AGENT_ID = "agent";
+export class AgentPresentationError extends Error {
+    code;
+    constructor(code, message) {
+        super(message);
+        this.name = "AgentPresentationError";
+        this.code = code;
+    }
+}
+const rendererReadiness = new Map();
+const readinessWaiters = new Set();
+let generatedGroupId = 0;
+let activePresentation = false;
+function currentProjectId() {
+    return getNudgeUiRuntimeConfig().projectId;
+}
+function isNonEmptyString(value) {
+    return typeof value === "string" && value.trim().length > 0;
+}
+function isRecord(value) {
+    return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function createGroupId() {
+    const randomId = typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+        ? crypto.randomUUID()
+        : undefined;
+    if (randomId)
+        return `agent-group-${randomId}`;
+    generatedGroupId += 1;
+    return `agent-group-${generatedGroupId}`;
+}
+function validateLabel(value) {
+    if (!isNonEmptyString(value)) {
+        throw new AgentPresentationError("invalid-label", "A comparison group label is required.");
+    }
+    const label = value.trim();
+    if (label.length > MAX_GROUP_LABEL_LENGTH || /[\u0000-\u001f\u007f]/.test(label)) {
+        throw new AgentPresentationError("invalid-label", `Comparison group labels must be between 1 and ${MAX_GROUP_LABEL_LENGTH} printable characters.`);
+    }
+    return label;
+}
+function routeForValidation(value) {
+    if (typeof value === "string")
+        return { url: value };
+    if (!isRecord(value)) {
+        throw new AgentPresentationError("invalid-route", "Each comparison route must be a URL object.");
+    }
+    return value;
+}
+function normalizeRoutes(input) {
+    const rawRoutes = input.routes ?? input.urls;
+    if (!rawRoutes || rawRoutes.length === 0) {
+        throw new AgentPresentationError("invalid-route", "At least one comparison route is required.");
+    }
+    if (rawRoutes.length > MAX_PRESENTATION_ROUTES) {
+        throw new AgentPresentationError("too-many-routes", `A comparison group may contain at most ${MAX_PRESENTATION_ROUTES} routes.`);
+    }
+    try {
+        return validateRoutes(rawRoutes.map((route) => {
+            const candidate = routeForValidation(route);
+            return {
+                url: candidate.url,
+                ...(typeof candidate.title === "string" ? { title: candidate.title } : {}),
+                ...(typeof candidate.label === "string" ? { label: candidate.label } : {}),
+            };
+        }), window.location.origin);
+    }
+    catch (error) {
+        throw new AgentPresentationError("invalid-route", error instanceof Error ? error.message : "Comparison routes must be same-origin URLs.");
+    }
+}
+function ensureDevelopment() {
+    if (!isNudgeUiDev()) {
+        throw new AgentPresentationError("not-development", "Agent Canvas presentation is available only in development mode.");
+    }
+}
+function ensureWritable() {
+    if (!canWriteWorkspace()) {
+        throw new AgentPresentationError("workspace-locked", "The active browser controller does not own the Nudge workspace.");
+    }
+}
+function clampReadyTimeout(value) {
+    if (value === undefined)
+        return DEFAULT_RENDERER_READY_TIMEOUT_MS;
+    if (!Number.isFinite(value) || value < 0) {
+        throw new AgentPresentationError("invalid-command", "readyTimeoutMs must be a finite non-negative number.");
+    }
+    return Math.min(MAX_RENDERER_READY_TIMEOUT_MS, value);
+}
+function statusForCard(cardId) {
+    return rendererReadiness.get(cardId)?.status ?? "unknown";
+}
+function buildReadiness(cardIds) {
+    const statuses = {};
+    const readyCardIds = [];
+    const failedCardIds = [];
+    const timedOutCardIds = [];
+    for (const cardId of cardIds) {
+        const status = statusForCard(cardId);
+        statuses[cardId] = status;
+        if (status === "ready")
+            readyCardIds.push(cardId);
+        if (status === "error")
+            failedCardIds.push(cardId);
+        if (status === "timeout")
+            timedOutCardIds.push(cardId);
+    }
+    return {
+        allReady: cardIds.length > 0 && readyCardIds.length === cardIds.length,
+        statuses,
+        readyCardIds,
+        failedCardIds,
+        timedOutCardIds,
+    };
+}
+function isTerminalStatus(status) {
+    return status === "ready" || status === "error" || status === "timeout";
+}
+function settleReadinessWaiters() {
+    for (const waiter of [...readinessWaiters]) {
+        if (!waiter.cardIds.every((cardId) => isTerminalStatus(statusForCard(cardId))))
+            continue;
+        clearTimeout(waiter.timer);
+        readinessWaiters.delete(waiter);
+        waiter.resolve(buildReadiness(waiter.cardIds));
+    }
+}
+function beginRendererReadiness(cardIds) {
+    for (const cardId of cardIds)
+        rendererReadiness.set(cardId, { status: "pending" });
+    settleReadinessWaiters();
+}
+/** Records the renderer acknowledgement for one newly presented card. */
+export function acknowledgeAgentRendererReady(cardId) {
+    if (!isNonEmptyString(cardId))
+        return;
+    rendererReadiness.set(cardId, { status: "ready" });
+    settleReadinessWaiters();
+}
+/** Records a bounded, non-throwing renderer failure for one presented card. */
+export function acknowledgeAgentRendererError(cardId, message) {
+    if (!isNonEmptyString(cardId))
+        return;
+    rendererReadiness.set(cardId, { status: "error", message });
+    settleReadinessWaiters();
+}
+export function forgetAgentRendererReadiness(cardIds) {
+    for (const cardId of cardIds)
+        rendererReadiness.delete(cardId);
+}
+export function waitForAgentRendererReadiness(cardIds, timeoutMs = DEFAULT_RENDERER_READY_TIMEOUT_MS) {
+    const boundedTimeout = clampReadyTimeout(timeoutMs);
+    if (cardIds.length === 0)
+        return Promise.resolve(buildReadiness(cardIds));
+    if (cardIds.every((cardId) => isTerminalStatus(statusForCard(cardId)))) {
+        return Promise.resolve(buildReadiness(cardIds));
+    }
+    return new Promise((resolve) => {
+        const waiter = {
+            cardIds: [...cardIds],
+            resolve,
+            timer: setTimeout(() => {
+                for (const cardId of cardIds) {
+                    if (statusForCard(cardId) === "pending" || statusForCard(cardId) === "unknown") {
+                        rendererReadiness.set(cardId, { status: "timeout" });
+                    }
+                }
+                readinessWaiters.delete(waiter);
+                resolve(buildReadiness(cardIds));
+            }, boundedTimeout),
+        };
+        readinessWaiters.add(waiter);
+        settleReadinessWaiters();
+    });
+}
+function toProtocolGroup(group) {
+    return {
+        id: group.id,
+        label: group.label,
+        owner: "agent",
+        routes: group.routes.map((route) => ({
+            url: route.url,
+            ...(route.title === undefined || route.title === null ? {} : { title: route.title }),
+            ...(route.label === undefined ? {} : { label: route.label }),
+        })),
+    };
+}
+/** Returns the compact state shape shared with the companion bridge. */
+export function readCanvasState() {
+    const focusedCardId = getFocusedCardId();
+    const focusedCard = focusedCardId
+        ? getCanvasCards().find((card) => card.id === focusedCardId)
+        : undefined;
+    return {
+        mode: getCanvasMode(),
+        groups: getCanvasComparisonGroups().map(toProtocolGroup),
+        focusedGroupId: focusedCard?.comparisonGroupId ?? null,
+        focusedRouteUrl: focusedCard?.url ?? null,
+    };
+}
+export async function presentAgentComparisonGroup(input) {
+    ensureDevelopment();
+    ensureWritable();
+    if (activePresentation) {
+        throw new AgentPresentationError("busy", "Another Canvas presentation is still waiting for renderers.");
+    }
+    activePresentation = true;
+    try {
+        const label = validateLabel(input.label);
+        const routes = normalizeRoutes(input);
+        const agentId = input.agentId ?? DEFAULT_AGENT_ID;
+        if (!isNonEmptyString(agentId)) {
+            throw new AgentPresentationError("invalid-command", "An agent identity is required.");
+        }
+        const groupId = input.groupId ?? createGroupId();
+        if (!isNonEmptyString(groupId) || groupId.length > AGENT_PROTOCOL_LIMITS.groupId) {
+            throw new AgentPresentationError("invalid-command", "A comparison group ID is required.");
+        }
+        if (getCanvasComparisonGroup(groupId)) {
+            throw new AgentPresentationError("group-id-conflict", `Comparison group ${groupId} already exists.`);
+        }
+        const readyTimeoutMs = clampReadyTimeout(input.readyTimeoutMs);
+        // Opening Canvas for an agent group appends only the requested routes. It
+        // never creates or repositions the current Inspect route.
+        setCanvasMode("canvas");
+        const appended = appendCanvasComparisonGroup({
+            id: groupId,
+            label,
+            owner: "agent",
+            agentId,
+            routes: routes.map((route) => ({
+                url: route.url,
+                ...(route.title === undefined ? {} : { title: route.title }),
+                ...(route.label === undefined ? {} : { label: route.label }),
+            })),
+        });
+        if (!appended) {
+            throw new AgentPresentationError("group-id-conflict", `Comparison group ${groupId} already exists.`);
+        }
+        const cardIds = appended.cards.map((card) => card.id);
+        beginRendererReadiness(cardIds);
+        const readiness = await waitForAgentRendererReadiness(cardIds, readyTimeoutMs);
+        return { ...appended, readiness };
+    }
+    finally {
+        activePresentation = false;
+    }
+}
+function groupCards(groupId) {
+    const group = getCanvasComparisonGroup(groupId);
+    if (!group)
+        throw new AgentPresentationError("group-not-found", `Comparison group ${groupId} was not found.`);
+    const cardIds = new Set(group.cardIds);
+    const cards = getCanvasCards().filter((card) => cardIds.has(card.id));
+    if (cards.length === 0) {
+        throw new AgentPresentationError("group-not-found", `Comparison group ${groupId} has no cards.`);
+    }
+    return { group, cards };
+}
+export function focusAgentComparisonGroup(groupId, viewport) {
+    ensureDevelopment();
+    ensureWritable();
+    const { cards } = groupCards(groupId);
+    focusCard(cards[0].id);
+    focusCanvasCards(cards.map((card) => card.id), viewport);
+    return readCanvasState();
+}
+export function fitAgentCanvas(viewport) {
+    ensureDevelopment();
+    ensureWritable();
+    fitAllCards(viewport);
+    return readCanvasState();
+}
+export function removeOwnAgentComparisonGroup(groupId, agentId = DEFAULT_AGENT_ID) {
+    ensureDevelopment();
+    ensureWritable();
+    const group = getCanvasComparisonGroup(groupId);
+    if (!group)
+        throw new AgentPresentationError("group-not-found", `Comparison group ${groupId} was not found.`);
+    if (group.owner !== "agent" || group.agentId !== agentId) {
+        throw new AgentPresentationError("not-group-owner", `Agent ${agentId} cannot remove comparison group ${groupId}.`);
+    }
+    const cardIds = [...group.cardIds];
+    removeCanvasComparisonGroup(groupId);
+    forgetAgentRendererReadiness(cardIds);
+    return readCanvasState();
+}
+function commandIdFrom(value) {
+    if (isRecord(value) && typeof value.commandId === "string" && value.commandId.length > 0) {
+        return value.commandId;
+    }
+    return "unknown";
+}
+function asPresentationError(error) {
+    if (error instanceof AgentPresentationError)
+        return error;
+    return new AgentPresentationError("invalid-command", error instanceof Error ? error.message : "Invalid Canvas command.");
+}
+function failure(commandId, error) {
+    return {
+        commandId,
+        ok: false,
+        error: { code: error.code, message: error.message },
+    };
+}
+function parseCanvasCommand(value) {
+    if (!isCanvasCommand(value)) {
+        throw new AgentPresentationError("invalid-command", "The value is not a shared Canvas command.");
+    }
+    return value;
+}
+async function executeCanvasCommand(command, agentId) {
+    switch (command.type) {
+        case "read-state":
+            ensureDevelopment();
+            return { commandId: command.commandId, ok: true, state: readCanvasState() };
+        case "present-routes": {
+            const presentation = await presentAgentComparisonGroup({
+                groupId: command.groupId,
+                label: command.label,
+                routes: command.routes,
+                agentId,
+            });
+            const state = readCanvasState();
+            if (presentation.readiness.allReady) {
+                return {
+                    commandId: command.commandId,
+                    ok: true,
+                    state,
+                    group: toProtocolGroup(presentation.group),
+                };
+            }
+            const failed = presentation.readiness.failedCardIds.length > 0;
+            return {
+                commandId: command.commandId,
+                ok: false,
+                state,
+                group: toProtocolGroup(presentation.group),
+                error: {
+                    code: failed ? "renderer-error" : "renderer-timeout",
+                    message: failed
+                        ? "One or more presented routes failed to become ready."
+                        : "One or more presented routes did not become ready before the bounded timeout.",
+                },
+            };
+        }
+        case "focus-group":
+            return {
+                commandId: command.commandId,
+                ok: true,
+                state: focusAgentComparisonGroup(command.groupId),
+            };
+        case "fit-all":
+            return {
+                commandId: command.commandId,
+                ok: true,
+                state: fitAgentCanvas(),
+            };
+        case "remove-group":
+            return {
+                commandId: command.commandId,
+                ok: true,
+                state: removeOwnAgentComparisonGroup(command.groupId, agentId),
+            };
+    }
+}
+function credentialsFrom(options) {
+    return {
+        projectId: options.projectId ?? currentProjectId(),
+        agentId: options.agentId ?? DEFAULT_AGENT_ID,
+    };
+}
+/**
+ * Creates the browser-controller adapter consumed by the inspector's
+ * CopyPromptButton. It does not install window events or define a second
+ * message protocol; callers pass the plain shared CanvasCommand they received.
+ */
+export function createAgentPresentationAdapter(options = {}) {
+    const credentials = credentialsFrom(options);
+    let disposed = false;
+    return {
+        async execute(command) {
+            const commandId = commandIdFrom(command);
+            try {
+                if (disposed)
+                    throw new AgentPresentationError("invalid-command", "The Canvas command adapter is disposed.");
+                const parsed = parseCanvasCommand(command);
+                return await executeCanvasCommand(parsed, credentials.agentId);
+            }
+            catch (error) {
+                return failure(commandId, asPresentationError(error));
+            }
+        },
+        dispose() {
+            disposed = true;
+        },
+    };
+}
+/** Clears presentation-only state between browser sessions and unit tests. */
+export function resetAgentPresentationState() {
+    for (const waiter of readinessWaiters)
+        clearTimeout(waiter.timer);
+    readinessWaiters.clear();
+    rendererReadiness.clear();
+    activePresentation = false;
+    generatedGroupId = 0;
+}

package/dist/inspector/canvas/canvasGestures.d.ts

@@ -0,0 +1,12 @@
+import { type CanvasCamera } from "./canvasStore.js";
+export declare const ZOOM_WHEEL_FACTOR = 1.02;
+export interface ClientPoint {
+    x: number;
+    y: number;
+}
+export interface ClientRect {
+    left: number;
+    top: number;
+}
+export declare function zoomCameraAtPointer(camera: CanvasCamera, pointer: ClientPoint, boardRect: ClientRect, deltaY: number): CanvasCamera;
+export declare function iframePointToClientPoint(iframeRect: ClientRect, point: ClientPoint, cameraZoom: number): ClientPoint;

package/dist/inspector/canvas/canvasGestures.js

@@ -0,0 +1,21 @@
+import { MAX_CAMERA_ZOOM, MIN_CAMERA_ZOOM, } from "./canvasStore.js";
+export const ZOOM_WHEEL_FACTOR = 1.02;
+export function zoomCameraAtPointer(camera, pointer, boardRect, deltaY) {
+    const pointerX = pointer.x - boardRect.left;
+    const pointerY = pointer.y - boardRect.top;
+    const worldX = (pointerX - camera.x) / camera.zoom;
+    const worldY = (pointerY - camera.y) / camera.zoom;
+    const factor = deltaY < 0 ? ZOOM_WHEEL_FACTOR : 1 / ZOOM_WHEEL_FACTOR;
+    const zoom = Math.max(MIN_CAMERA_ZOOM, Math.min(MAX_CAMERA_ZOOM, camera.zoom * factor));
+    return {
+        x: pointerX - worldX * zoom,
+        y: pointerY - worldY * zoom,
+        zoom,
+    };
+}
+export function iframePointToClientPoint(iframeRect, point, cameraZoom) {
+    return {
+        x: iframeRect.left + point.x * cameraZoom,
+        y: iframeRect.top + point.y * cameraZoom,
+    };
+}