nudge-ui 0.2.3 → 0.2.5

package/dist/inspector/inspection/browserCssInspection.d.ts

@@ -1,3 +1,4 @@
+import { type ContainerQueryEvaluator } from "../tokens/resolution/containerQueryEvaluator.js";
 import type { TokenDefinition, TokenEntry } from "../../css/model/index.js";
 import type { ResolvedProperty } from "../../css/model/index.js";
 import type { InteractionState } from "../shell/styleState.js";
@@ -25,6 +26,8 @@ export type InspectionCascade = "authored" | "live" | "stable";
 export interface BrowserCssInspectionOptions {
     state?: InteractionState;
     cascade?: InspectionCascade;
+    /** Shared only within one synchronous refresh. */
+    containerQueries?: ContainerQueryEvaluator;
 }
 export type InspectionTargetStatus = "attached" | "detached" | "foreign-document" | "unsupported" | "disabled" | "disposed";
 export type InspectionDiagnosticCode = "target-document-mismatch" | "target-detached" | "target-unsupported" | "state-unavailable" | "inspection-failed" | "production-disabled" | "session-disposed";
@@ -62,6 +65,11 @@ export interface DocumentTokenInspectionSnapshot {
 }
 export interface BrowserCssInspection {
     inspect(element: HTMLElement, options?: BrowserCssInspectionOptions): InspectionSnapshot;
+    /** Resolves one selection with a shared, short-lived container evaluator. */
+    refresh?(elements: readonly HTMLElement[], state: InteractionState): {
+        elements: readonly InspectionSnapshot[];
+        stableProperties: readonly ResolvedProperty[];
+    };
     inspectTokens(root?: HTMLElement): DocumentTokenInspectionSnapshot;
     subscribe(listener: (revision: InspectionRevision) => void): () => void;
     /** Integration hook for managed CSSOM writes. */

package/dist/inspector/inspection/browserCssInspection.js

@@ -1,5 +1,7 @@
+import { createContainerQueryEvaluator } from "../tokens/resolution/containerQueryEvaluator.js";
 import { isNudgeUiDev } from "../runtime/devFlag.js";
-import { buildTokenTable, getAvailableInteractionStates, getAvailableTokenCatalog, getAvailableTokenEntriesForElement, getResolvedProperties, getResolvedPropertiesForState, getResolvedPropertiesStable, invalidateStyleResolutionCache, prewarmCssomRuleSnapshot, } from "../tokens/resolution.js";
+import { countInspectionWork } from "./performanceDiagnostics.js";
+import { buildTokenTable, getAvailableInteractionStates, getAvailableTokenCatalog, getAvailableTokenEntriesForElement, getResolvedProperties, getResolvedPropertiesForState, getResolvedPropertiesStable, invalidateStyleResolutionCache, prewarmCssomRuleSnapshot, prefetchContainerQueries, } from "../tokens/resolution.js";
 import { buildTokenCatalogRows } from "../tokens/catalog.js";
 import { documentRevisions, registerResolutionElement, retainDocumentResolution, subscribeDocumentRevision, } from "../tokens/resolution/cssomCollector.js";
 function revisionSnapshot(revisions, tokenGeneration) {
@@ -119,12 +121,12 @@ function disabledInspection(config) {
 function notifyRevision(listener, revisions, tokenGeneration) {
     listener(revisionSnapshot(revisions, tokenGeneration));
 }
-function resolveCascadeProperties(element, table, cascade, state) {
+function resolveCascadeProperties(element, table, cascade, state, evaluator) {
     if (cascade === "live")
-        return getResolvedProperties(element, table);
+        return getResolvedProperties(element, table, evaluator);
     if (cascade === "stable")
-        return getResolvedPropertiesStable(element, table);
-    return getResolvedPropertiesForState(element, table, state);
+        return getResolvedPropertiesStable(element, table, evaluator);
+    return getResolvedPropertiesForState(element, table, state, evaluator);
 }
 export function createBrowserCssInspection(config) {
     if (!isNudgeUiDev())
@@ -197,6 +199,7 @@ export function createBrowserCssInspection(config) {
     }
     const session = {
         inspect(element, options = {}) {
+            countInspectionWork(config.document, "inspections");
             const state = options.state ?? "base";
             const cascade = options.cascade ?? "authored";
             const status = disposed ? "disposed" : targetStatus(element, config.document);
@@ -227,7 +230,7 @@ export function createBrowserCssInspection(config) {
                         message: `The ${state} interaction state has no matching authored rule for this element.`,
                     });
                 }
-                const properties = resolveCascadeProperties(element, table, cascade, state);
+                const properties = resolveCascadeProperties(element, table, cascade, state, options.containerQueries ?? createContainerQueryEvaluator(config.document));
                 return {
                     target: { status },
                     cascade,
@@ -249,6 +252,25 @@ export function createBrowserCssInspection(config) {
                 return emptySnapshot(status, cascade, state, revision, diagnostics);
             }
         },
+        refresh(elements, state) {
+            const containerQueries = createContainerQueryEvaluator(config.document);
+            const targets = elements.filter((element) => element.ownerDocument === config.document);
+            try {
+                if (!disposed)
+                    prefetchContainerQueries(targets, state, containerQueries);
+            }
+            catch (error) {
+                return {
+                    elements: elements.map((element) => emptySnapshot(targetStatus(element, config.document), "authored", state, currentRevision(), [{ code: "inspection-failed", message: error instanceof Error ? error.message : "Container query evaluation failed." }])),
+                    stableProperties: [],
+                };
+            }
+            return {
+                elements: elements.map((element) => session.inspect(element, { state, containerQueries })),
+                stableProperties: elements[0] && state === "base"
+                    ? session.inspect(elements[0], { cascade: "stable", containerQueries }).properties : [],
+            };
+        },
         inspectTokens(root = config.document.documentElement) {
             const diagnostics = [];
             const revision = currentRevision();

package/dist/inspector/inspection/inspectionSnapshot.d.ts

@@ -0,0 +1,6 @@
+import type { InteractionState } from "../shell/styleState.js";
+import type { InspectionSnapshot } from "./browserCssInspection.js";
+/** Publishes the hook's completed refresh before its controls render. */
+export declare function publishInspectionSnapshot(element: HTMLElement, snapshot: InspectionSnapshot): void;
+/** Reads the current view without starting another cascade inspection. */
+export declare function readInspectionSnapshot(element: HTMLElement, state: InteractionState): InspectionSnapshot | undefined;

package/dist/inspector/inspection/inspectionSnapshot.js

@@ -0,0 +1,10 @@
+const snapshots = new WeakMap();
+/** Publishes the hook's completed refresh before its controls render. */
+export function publishInspectionSnapshot(element, snapshot) {
+    snapshots.set(element, snapshot);
+}
+/** Reads the current view without starting another cascade inspection. */
+export function readInspectionSnapshot(element, state) {
+    const snapshot = snapshots.get(element);
+    return snapshot?.requestedState === state ? snapshot : undefined;
+}

package/dist/inspector/inspection/performanceDiagnostics.d.ts

@@ -0,0 +1,18 @@
+type Interaction = "selection" | "hover" | "drag" | "idle";
+type Counter = "inspections" | "refreshes" | "containerChecks" | "probePairs" | "probeBatches";
+type Counts = Record<Counter, number>;
+interface InspectionPerformanceDiagnostics {
+    read(): Record<Interaction, Counts>;
+    reset(): void;
+    dispose(): void;
+}
+declare global {
+    interface Window {
+        __nudgeUiPerformance?: InspectionPerformanceDiagnostics;
+    }
+}
+/** Records work only when diagnostics are explicitly enabled for a document. */
+export declare function countInspectionWork(doc: Document, counter: Counter, count?: number): void;
+/** Groups asynchronous inspection work by the most recent pointer gesture. */
+export declare function enableInspectionPerformanceDiagnostics(doc: Document): void;
+export {};

package/dist/inspector/inspection/performanceDiagnostics.js

@@ -0,0 +1,31 @@
+const counters = new WeakMap();
+/** Records work only when diagnostics are explicitly enabled for a document. */
+export function countInspectionWork(doc, counter, count = 1) {
+    counters.get(doc)?.(counter, count);
+}
+/** Groups asynchronous inspection work by the most recent pointer gesture. */
+export function enableInspectionPerformanceDiagnostics(doc) {
+    const view = doc.defaultView;
+    if (!view || view.__nudgeUiPerformance)
+        return;
+    let interaction = "idle";
+    const empty = () => ({ inspections: 0, refreshes: 0, containerChecks: 0, probePairs: 0, probeBatches: 0 });
+    let counts = { idle: empty(), selection: empty(), hover: empty(), drag: empty() };
+    const move = (event) => { interaction = event.buttons ? "drag" : "hover"; };
+    const select = () => { interaction = "selection"; };
+    doc.addEventListener("pointermove", move, true);
+    doc.addEventListener("pointerdown", select, true);
+    doc.addEventListener("click", select, true);
+    counters.set(doc, (counter, count) => { counts[interaction][counter] += count; });
+    view.__nudgeUiPerformance = {
+        read: () => structuredClone(counts),
+        reset() { counts = { idle: empty(), selection: empty(), hover: empty(), drag: empty() }; },
+        dispose() {
+            doc.removeEventListener("pointermove", move, true);
+            doc.removeEventListener("pointerdown", select, true);
+            doc.removeEventListener("click", select, true);
+            counters.delete(doc);
+            delete view.__nudgeUiPerformance;
+        },
+    };
+}

package/dist/inspector/inspection/useBrowserCssInspection.js

@@ -1,5 +1,7 @@
+import { publishInspectionSnapshot } from "./inspectionSnapshot.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { getBrowserCssInspection } from "./browserCssInspectionRegistry.js";
+import { countInspectionWork } from "./performanceDiagnostics.js";
 const SELECTION_DEBOUNCE_MS = 8;
 const EMPTY_SELECTION = [];
 function isSelectedElementList(selected) {
@@ -18,23 +20,16 @@ function normalizeSelection(selected) {
         return selected;
     return [selected];
 }
-function inspectAuthoredElements(session, selected, state) {
-    return selected.map((element) => session.inspect(element.domElement, { state, cascade: "authored" }));
-}
-function inspectStableView(session, selected, state, includeDocumentTokens, elements) {
-    const primary = elements[0] ?? null;
-    const stableProperties = selected[0] && state === "base"
-        ? session.inspect(selected[0].domElement, { cascade: "stable" }).properties
-        : [];
-    const documentTokens = includeDocumentTokens ? session.inspectTokens() : null;
+function inspectView(session, selected, state, includeDocumentTokens) {
+    const result = session.refresh?.(selected.map((element) => element.domElement), state);
+    const elements = result?.elements ?? selected.map((element) => session.inspect(element.domElement, { state, cascade: "authored" }));
+    const stableProperties = result?.stableProperties ?? (selected[0] && state === "base"
+        ? session.inspect(selected[0].domElement, { cascade: "stable" }).properties : []);
+    elements.forEach((snapshot, index) => publishInspectionSnapshot(selected[index].domElement, snapshot));
     return {
-        selection: selected,
-        state,
-        session,
-        element: primary,
-        elements,
-        stableProperties,
-        documentTokens,
+        selection: selected, state, session,
+        element: elements[0] ?? null, elements, stableProperties,
+        documentTokens: includeDocumentTokens ? session.inspectTokens() : null,
     };
 }
 /**
@@ -49,14 +44,15 @@ export function useBrowserCssInspection(selected, state = "base", options = {})
     const includeDocumentTokens = options.includeDocumentTokens ?? false;
     const latest = useRef({ selected: selectedElements, state, session, includeDocumentTokens });
     latest.current = { selected: selectedElements, state, session, includeDocumentTokens };
-    const [view, setView] = useState(() => inspectStableView(session, selectedElements, state, includeDocumentTokens, inspectAuthoredElements(session, selectedElements, state)));
+    const [view, setView] = useState(() => ({
+        ...EMPTY_VIEW, selection: EMPTY_SELECTION, state, session,
+    }));
     const timerRef = useRef(null);
     const lastSelectionResolveAtRef = useRef(0);
     const revisionFrameRef = useRef(null);
     const revisionSecondFrameRef = useRef(null);
     const revisionThirdFrameRef = useRef(null);
     const revisionWarmFrameRef = useRef(null);
-    const stableFrameRef = useRef(null);
     const cancelScheduledInspection = () => {
         if (timerRef.current !== null) {
             clearTimeout(timerRef.current);
@@ -78,29 +74,12 @@ export function useBrowserCssInspection(selected, state = "base", options = {})
             cancelAnimationFrame(revisionWarmFrameRef.current);
             revisionWarmFrameRef.current = null;
         }
-        if (stableFrameRef.current !== null) {
-            cancelAnimationFrame(stableFrameRef.current);
-            stableFrameRef.current = null;
-        }
     };
     const resolveSync = () => {
         const current = latest.current;
+        countInspectionWork(selectedDocument, "refreshes");
         lastSelectionResolveAtRef.current = performance.now();
-        setView(inspectStableView(current.session, current.selected, current.state, current.includeDocumentTokens, inspectAuthoredElements(current.session, current.selected, current.state)));
-    };
-    const resolveSplit = () => {
-        const current = latest.current;
-        // Post-commit refresh: the authored cascade resolves in this task and the
-        // secondary stable cascade continues one frame later. Rapid successive
-        // edits therefore cancel the pending refresh (revision bumps reschedule)
-        // instead of finding a long blocking task already running, and the two
-        // resolution sweeps never block one task for their combined duration.
-        // The view still commits once, with the same data and ordering.
-        const elements = inspectAuthoredElements(current.session, current.selected, current.state);
-        stableFrameRef.current = requestAnimationFrame(() => {
-            stableFrameRef.current = null;
-            setView(inspectStableView(current.session, current.selected, current.state, current.includeDocumentTokens, elements));
-        });
+        setView(inspectView(current.session, current.selected, current.state, current.includeDocumentTokens));
     };
     const scheduleSelectionInspection = () => {
         cancelScheduledInspection();
@@ -135,7 +114,7 @@ export function useBrowserCssInspection(selected, state = "base", options = {})
                     latest.current.session.prewarmRules?.();
                     revisionWarmFrameRef.current = requestAnimationFrame(() => {
                         revisionWarmFrameRef.current = null;
-                        resolveSplit();
+                        resolveSync();
                     });
                 });
             });

package/dist/inspector/iterations/capture.d.ts

@@ -1,2 +1,3 @@
+import type { CanvasFrame } from "../canvas/canvasFrame.js";
 /** Captures the visible DOM of a same-origin frame as a script-free HTML iteration. */
-export declare function captureHtmlIteration(frame: HTMLIFrameElement): Promise<string>;
+export declare function captureHtmlIteration(frame: CanvasFrame): Promise<string>;

package/dist/inspector/iterations/capture.js

@@ -1,4 +1,5 @@
 import { HTML_ARTIFACT_REVISION_ATTRIBUTE } from "../../transport/artifacts.js";
+import { FRAME_SCROLLBAR_STYLE_ID } from "../canvas/frameScrollbarStyles.js";
 /** Captures the visible DOM of a same-origin frame as a script-free HTML iteration. */
 export async function captureHtmlIteration(frame) {
     const source = frame.contentDocument;
@@ -52,7 +53,7 @@ export async function captureHtmlIteration(frame) {
     copy.querySelectorAll("base").forEach((element) => element.remove());
     (copy.querySelector("head") ?? copy).prepend(base);
     copy.querySelectorAll('script, iframe, object, embed, meta[http-equiv="refresh"], meta[http-equiv="Content-Security-Policy"], link[rel=modulepreload], link[rel=preload]').forEach((element) => element.remove());
-    copy.querySelectorAll("[data-nudge-ui-mount], #nudge-ui-root").forEach((element) => element.remove());
+    copy.querySelectorAll(`[data-nudge-ui-mount], #nudge-ui-root, #${FRAME_SCROLLBAR_STYLE_ID}`).forEach((element) => element.remove());
     copy.querySelectorAll("a, form").forEach((element) => {
         element.removeAttribute("href");
         element.removeAttribute("action");

package/dist/inspector/iterations/client.d.ts

@@ -1,7 +1,8 @@
+import type { CanvasFrame } from "../canvas/canvasFrame.js";
 import { type HtmlArtifactRevision } from "../../transport/artifacts.js";
 export declare function artifactDocumentUrl(id: string): string;
 export declare function readHtmlArtifactRevision(id: string): Promise<HtmlArtifactRevision>;
 /** Checks the editing base before saving and promoting a captured document. */
 export declare function commitHtmlArtifact(id: string, expected: HtmlArtifactRevision, html?: string): Promise<HtmlArtifactRevision>;
-export declare function createHtmlArtifact(frame: HTMLIFrameElement, sourceUrl: string, title: string, capturedHtml?: string): Promise<string>;
+export declare function createHtmlArtifact(frame: CanvasFrame, sourceUrl: string, title: string, capturedHtml?: string): Promise<string>;
 export declare function removeHtmlArtifact(id: string): Promise<void>;

package/dist/inspector/iterations/coordinator.d.ts

@@ -1,5 +1,6 @@
+import { type CanvasFrame } from "../canvas/canvasFrame.js";
 import type { HtmlArtifactRevision } from "../../transport/artifacts.js";
-import { type DraftContents } from "../changes/draftChanges.js";
+import type { DraftContents } from "../drafts/model.js";
 /** Owned transport; tests use a working in-memory artifact store. */
 export interface HtmlIterationStorage {
     readRevision(id: string): Promise<HtmlArtifactRevision>;
@@ -11,5 +12,5 @@ export declare function createHtmlIterationCoordinator(storage: HtmlIterationSto
     refresh(cardId: string, artifactId: string, baseRevision: string, available: () => boolean): Promise<boolean>;
 };
 /** Materializes pending intent before the agent can start editing document.html. */
-export declare function prepareHtmlIterationHandoff(cardId: string, artifactId: string, frame: HTMLIFrameElement): Promise<DraftContents>;
-export declare function refreshHtmlIteration(cardId: string, artifactId: string, frame: HTMLIFrameElement): Promise<boolean>;
+export declare function prepareHtmlIterationHandoff(cardId: string, artifactId: string, frame: CanvasFrame): Promise<DraftContents>;
+export declare function refreshHtmlIteration(cardId: string, artifactId: string, frame: CanvasFrame): Promise<boolean>;

package/dist/inspector/iterations/coordinator.js

@@ -1,6 +1,6 @@
+import { canvasFrameElement } from "../canvas/canvasFrame.js";
 import { HTML_ARTIFACT_REVISION_ATTRIBUTE } from "../../transport/artifacts.js";
-import { getDraftForCard, getDraftContentsForCard, clearSavedIterationDraft } from "../drafts/store.js";
-import { lockDraft } from "../changes/draftChanges.js";
+import { getDraftForCard, getDraftContentsForCard, clearSavedIterationDraft, lockDraft } from "../drafts/store.js";
 import { canWriteWorkspace } from "../canvas/workspaceLease.js";
 import { projectDraftToDocument, isCanvasProjectionRevisionCurrent, projectToAllReadyCards } from "../canvas/projection.js";
 import { isInlineTextEditingActive } from "../inline-text/inlineTextEditor.js";
@@ -117,7 +117,9 @@ export async function prepareHtmlIterationHandoff(cardId, artifactId, frame) {
             }
             return html;
         });
-        frame.src = `${artifactDocumentUrl(artifactId)}?revision=${Date.now()}`;
+        const element = canvasFrameElement(frame);
+        if (element)
+            element.src = `${artifactDocumentUrl(artifactId)}?revision=${Date.now()}`;
         return workspace;
     }
     finally {

package/dist/inspector/iterations/prompt.js

@@ -1,26 +1,27 @@
+import { withPromptContext } from "../prompt/promptDocument.js";
 /** Defines the edit destination for every HTML-iteration handoff, including fallback copies. */
 export function htmlIterationPrompt(id, changes, noInspectorChanges, hasSketches, customInstructions = "") {
     const directory = `.nudge/artifacts/${id}`;
-    return [
-        "# Edit this HTML iteration",
+    return withPromptContext([
+        "## Edit this HTML iteration",
         "",
         `Edit only \`${directory}/document.html\`. This is the standalone HTML and CSS shown in the selected Nudge iteration frame.`,
         "Preserve its responsive CSS and existing design edits. Keep application source files unchanged. Any original source locations below identify captured elements; they are not files to edit.",
         `Keep \`${directory}/baseline.html\`, \`${directory}/preview.html\`, and metadata unchanged. Nudge will reload the iteration from your updated document.`,
         ...(hasSketches ? ["Implement the attached sketch notes in this iteration's HTML and CSS. Match numbered notes to their marks in the image."] : []),
         "",
-        ...(noInspectorChanges ? ["Use the current iteration as the editing base. Existing visual edits are already saved in its markup and styles.", ...(customInstructions.trim() ? ["", "## Custom instructions", "", customInstructions.trim()] : [])] : [changes]),
-    ].join("\n");
+    ], noInspectorChanges
+        ? ["Use the current iteration as the editing base. Existing visual edits are already saved in its markup and styles.", ...(customInstructions.trim() ? ["", "## Custom instructions", "", customInstructions.trim()] : [])].join("\n")
+        : changes);
 }
 export function htmlIterationImplementationPrompt(id, label, page, changes) {
     const directory = `.nudge/artifacts/${id}`;
-    return [
-        `# Implement ${label} in the live app`,
+    return withPromptContext([
+        `## Implement ${label} in the live app`,
         "",
         `Page: ${page}`,
         `Use \`${directory}/document.html\` as the design reference, including all saved visual edits.`,
         "Update application source for this page to match it. Reuse existing components and styles, and preserve app behavior and data.",
         "Keep iteration files unchanged; captured source locations below are hints for finding app code.",
-        ...(changes.trim() ? ["", changes] : []),
-    ].join("\n");
+    ], changes);
 }

package/dist/inspector/overlay/interactionStyles.js

@@ -1,4 +1,5 @@
 import { DESIGN_SELECT_CURSOR, INTERACTION_CURSOR_PROPERTY } from "../ui/customCursors.js";
+import { adoptStylesheet, allowsStyleElements, releaseAdoptedStylesheet } from "../runtime/ownedStylesheets.js";
 const INTERACTION_STYLE_ID = "nudge-ui-interaction-styles";
 const interactionStyleDocuments = new Set();
 const INTERACTION_CSS = `
@@ -47,6 +48,8 @@ export function isInteractionStylesInstalled(doc = document) {
 }
 /** Installs temporary interaction affordances without mutating tracked nodes. */
 export function installInteractionStyles(doc = document) {
+    if (!allowsStyleElements(doc))
+        return installAdoptedInteractionStyles(doc);
     // SAFETY: getElementById returns an Element; the style element is created as HTMLStyleElement below when missing.
     let style = doc.getElementById(INTERACTION_STYLE_ID);
     let created = false;
@@ -70,3 +73,17 @@ export function installInteractionStyles(doc = document) {
             style?.remove();
     };
 }
+function installAdoptedInteractionStyles(doc) {
+    adoptStylesheet(doc, INTERACTION_STYLE_ID, INTERACTION_CSS);
+    interactionStyleDocuments.add(doc);
+    for (const slot of Array.from(doc.querySelectorAll("[data-empty-text]"))) {
+        slot.hidden = false;
+    }
+    return () => {
+        interactionStyleDocuments.delete(doc);
+        for (const slot of Array.from(doc.querySelectorAll("[data-empty-text]"))) {
+            slot.hidden = true;
+        }
+        releaseAdoptedStylesheet(doc, INTERACTION_STYLE_ID);
+    };
+}

package/dist/inspector/pageInspector.d.ts

@@ -0,0 +1,42 @@
+import { type InspectorStorage } from "./runtime/inspectorStorage.js";
+import { type SketchStorage } from "./sketch/persistence.js";
+export type { InspectorStorage } from "./runtime/inspectorStorage.js";
+export { createMirroredStorage } from "./runtime/inspectorStorage.js";
+export type { SketchPersistenceSnapshot, SketchStorage, SketchStorageChange } from "./sketch/persistence.js";
+export type { SketchDocument, SketchHandoffRecord } from "./sketch/model.js";
+export interface PageInspectorOptions {
+    /** Replaces `localStorage` for comments, drafts, and Canvas state. */
+    storage?: InspectorStorage;
+    /** Replaces the page origin's IndexedDB for sketch documents and handoffs. */
+    sketchStorage?: SketchStorage;
+    /** Skips the `<style>` policy probe and always uses constructable stylesheets. */
+    adoptStylesheets?: boolean;
+    /**
+     * `"editor"` turns a document whose URL carries the editor marker into the
+     * iframe editor; otherwise the page itself is the only Canvas card.
+     */
+    surface?: "editor" | "page";
+    /** Shows a short error instead of enabling inspection on an unsupported page. */
+    unavailableReason?: string;
+    /** Called whenever an editor renderer frame's document finishes parsing. */
+    onRendererFrameLoad?: () => void;
+}
+/** Published on `window` so a second injection toggles the first instance. */
+export interface PageInspectorHandle {
+    readonly surface: "editor" | "page" | "renderer";
+    /** Toggles the page inspector, or leaves the editor. */
+    toggle(): void;
+    /** Starts the `window.__nudgeUiPerformance` counters for this document. */
+    enablePerformanceDiagnostics(): void;
+}
+/**
+ * Starts the inspector on the current page. Running a second bundle copy in
+ * the same window toggles the first instance instead, because only the first
+ * copy's stores drive the UI.
+ */
+export declare function startPageInspector(options?: PageInspectorOptions): Promise<void>;
+/**
+ * Starts the renderer in an editor's Canvas frame. Does nothing in any other
+ * document, or when the frame already runs one.
+ */
+export declare function startCanvasRenderer(options?: Pick<PageInspectorOptions, "adoptStylesheets">): void;