nudge-ui 0.2.0

package/dist/inspector/canvas/rendererElementSelector.js

@@ -0,0 +1,378 @@
+import { PROTOCOL_VERSION, getRendererIdentity, sendToParent, } from "./frameProtocol.js";
+import { findClosestAnchor, isEligibleNavigation, hasDifferentRoute, shouldPreserveNativeLinkActivation, } from "./linkEligibility.js";
+import { readBorderWidths, readMargins } from "../overlay/overlayGeometry.js";
+import { installInteractionStyles } from "../overlay/interactionStyles.js";
+import { createFrameThrottle } from "../overlay/frameThrottle.js";
+import { createCidIndex } from "./rendererCidIndex.js";
+import { isNudgeUiDev } from "../runtime/devFlag.js";
+import { isEditableEvent } from "../shell/shortcuts.js";
+import { resolveSelectionTarget, selectionTargetMode } from "../selection/selectionTarget.js";
+import { escapeCssString } from "../projection/cssEscapes.js";
+import { blockApplicationClick, isApplicationActivationClick } from "../overlay/clickPolicy.js";
+const REACT_FIBER_KEY = /^__reactFiber\$/;
+const REACT_INTERNAL_KEY = /^__reactInternalInstance\$/;
+function findFiber(el) {
+    const keys = Object.keys(el);
+    for (const key of keys) {
+        if (REACT_FIBER_KEY.test(key) || REACT_INTERNAL_KEY.test(key)) {
+            return Reflect.get(el, key);
+        }
+    }
+    return undefined;
+}
+function getFiberInfo(el) {
+    const fiber = findFiber(el);
+    const src = el.getAttribute("data-src") ?? "";
+    let file = "";
+    let line = 0;
+    let component = "Component";
+    if (fiber) {
+        let node = fiber;
+        while (node) {
+            const debugSource = node._debugSource;
+            if (debugSource) {
+                file = debugSource.fileName ?? "";
+                line = debugSource.lineNumber ?? 0;
+                break;
+            }
+            node = node._debugOwner
+                ?? node.return;
+        }
+        const fiberType = fiber.type;
+        if (typeof fiberType === "string") {
+            component = fiberType;
+        }
+        else if (fiberType && typeof fiberType === "object") {
+            const displayName = fiberType.displayName;
+            if (typeof displayName === "string") {
+                component = displayName;
+            }
+            else {
+                const name = fiberType.name;
+                if (typeof name === "string") {
+                    component = name;
+                }
+            }
+        }
+    }
+    if (!file) {
+        const match = /^(.*):(\d+):(\d+)$/.exec(src);
+        if (match) {
+            file = match[1] ?? "";
+            line = Number(match[2]) || 0;
+        }
+    }
+    return { file, line, component, src };
+}
+export function buildSelector(el) {
+    const cid = el.getAttribute("data-cid");
+    if (cid)
+        return `[data-cid="${escapeCssString(cid)}"]`;
+    const tag = el.tagName.toLowerCase();
+    const id = el.id ? `#${CSS.escape(el.id)}` : "";
+    const classes = Array.from(el.classList).map((c) => `.${CSS.escape(c)}`).join("");
+    return tag + id + classes;
+}
+let installed = false;
+const noopDisposal = () => undefined;
+export function installRendererElementSelector() {
+    if (!isNudgeUiDev())
+        return noopDisposal;
+    if (installed)
+        return noopDisposal;
+    installed = true;
+    const removeInteractionStyles = installInteractionStyles();
+    const listenerCleanup = [];
+    let disposed = false;
+    function trackListener(target, type, listener, options) {
+        const eventListener = (event) => listener(event);
+        target.addEventListener(type, eventListener, options);
+        listenerCleanup.push(() => target.removeEventListener(type, eventListener, options));
+    }
+    const cidIndex = createCidIndex(document);
+    const hoverUpdate = createFrameThrottle((pending) => {
+        if (disposed)
+            return;
+        const { element, clear } = pending;
+        const identity = getRendererIdentity();
+        if (!identity)
+            return;
+        const cid = element.getAttribute("data-cid");
+        const selector = buildSelector(element);
+        const src = element.getAttribute("data-src") ?? "";
+        const rect = clear ? null : element.getBoundingClientRect();
+        const msg = {
+            type: "element-hover",
+            protocolVersion: PROTOCOL_VERSION,
+            cid,
+            selector,
+            src,
+            elementId: cidIndex.elementId(element),
+            rect: rect
+                ? {
+                    left: rect.left,
+                    top: rect.top,
+                    width: rect.width,
+                    height: rect.height,
+                }
+                : null,
+            margins: rect ? readMargins(element) : null,
+            borders: rect ? readBorderWidths(element) : null,
+            ...identity,
+        };
+        sendToParent(msg);
+    });
+    let measurePointerOverPage = false;
+    let measureAltKey = false;
+    function updateMeasureState(altKey, pointerOverPage) {
+        if (disposed)
+            return;
+        if (measureAltKey === altKey && measurePointerOverPage === pointerOverPage)
+            return;
+        measureAltKey = altKey;
+        measurePointerOverPage = pointerOverPage;
+        const identity = getRendererIdentity();
+        if (!identity)
+            return;
+        const msg = {
+            type: "element-measure-state",
+            protocolVersion: PROTOCOL_VERSION,
+            altKey,
+            pointerOverPage,
+            ...identity,
+        };
+        sendToParent(msg);
+    }
+    trackListener(document, "mouseover", (event) => {
+        updateMeasureState(event.altKey, true);
+        const target = event.target;
+        if (!(target instanceof Element))
+            return;
+        const el = resolveSelectionTarget(target, selectionTargetMode(event));
+        if (!el)
+            return;
+        hoverUpdate.schedule({ element: el, clear: false });
+    }, true);
+    let pendingDrag = null;
+    let dragging = false;
+    let lastSelected = null;
+    const dragMoveUpdate = createFrameThrottle((point) => {
+        if (disposed)
+            return;
+        const identity = getRendererIdentity();
+        if (!point || !identity)
+            return;
+        const msg = { type: "element-drag-move", protocolVersion: PROTOCOL_VERSION, point, ...identity };
+        sendToParent(msg);
+    });
+    trackListener(document, "mousedown", (event) => {
+        if (event.button !== 0)
+            return;
+        const element = resolveSelectionTarget(event.target, selectionTargetMode(event));
+        if (!element)
+            return;
+        lastSelected = element;
+        pendingDrag = { element, point: { x: event.clientX, y: event.clientY } };
+    }, true);
+    trackListener(document, "mousemove", (event) => {
+        if (!pendingDrag)
+            return;
+        if (!dragging && Math.hypot(event.clientX - pendingDrag.point.x, event.clientY - pendingDrag.point.y) < 6)
+            return;
+        const identity = getRendererIdentity();
+        if (!identity)
+            return;
+        event.preventDefault();
+        const point = { x: event.clientX, y: event.clientY };
+        if (!dragging) {
+            dragging = true;
+            const msg = {
+                type: "element-drag-start", protocolVersion: PROTOCOL_VERSION,
+                cid: pendingDrag.element.getAttribute("data-cid"), src: pendingDrag.element.getAttribute("data-src") ?? "",
+                elementId: cidIndex.elementId(pendingDrag.element), point, ...identity,
+            };
+            sendToParent(msg);
+        }
+        else {
+            dragMoveUpdate.schedule(point);
+        }
+    }, true);
+    function finishDrag(event) {
+        dragMoveUpdate.cancel();
+        if (dragging) {
+            const identity = getRendererIdentity();
+            if (identity) {
+                event.preventDefault();
+                const msg = {
+                    type: "element-drag-end", protocolVersion: PROTOCOL_VERSION,
+                    point: { x: event.clientX, y: event.clientY }, ...identity,
+                };
+                sendToParent(msg);
+            }
+        }
+        pendingDrag = null;
+        dragging = false;
+    }
+    trackListener(document, "mouseup", finishDrag, true);
+    trackListener(document, "keydown", (event) => {
+        if (event.key === "Alt")
+            updateMeasureState(true, measurePointerOverPage);
+        if (isEditableEvent(event))
+            return;
+        const scrollKey = event.code === "Space"
+            || event.key === "ArrowUp"
+            || event.key === "ArrowDown"
+            || event.key === "ArrowLeft"
+            || event.key === "ArrowRight";
+        if (scrollKey)
+            event.preventDefault();
+        if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "z") {
+            const identity = getRendererIdentity();
+            if (!identity)
+                return;
+            event.preventDefault();
+            const msg = {
+                type: "history-request",
+                protocolVersion: PROTOCOL_VERSION,
+                action: event.shiftKey ? "redo" : "undo",
+                ...identity,
+            };
+            sendToParent(msg);
+            return;
+        }
+        if (event.key === "Escape" || event.key === "Esc") {
+            event.preventDefault();
+            lastSelected = null;
+            const identity = getRendererIdentity();
+            if (!identity)
+                return;
+            const msg = {
+                type: "element-deselect",
+                protocolVersion: PROTOCOL_VERSION,
+                ...identity,
+            };
+            sendToParent(msg);
+            return;
+        }
+        if (!lastSelected)
+            return;
+        const identity = getRendererIdentity();
+        if (!identity)
+            return;
+        if (event.key === "Delete" || event.key === "Backspace") {
+            event.preventDefault();
+            const msg = {
+                type: "element-delete", protocolVersion: PROTOCOL_VERSION,
+                cid: lastSelected.getAttribute("data-cid"), src: lastSelected.getAttribute("data-src") ?? "",
+                elementId: cidIndex.elementId(lastSelected), ...identity,
+            };
+            sendToParent(msg);
+            return;
+        }
+        if (event.key !== "ArrowUp" && event.key !== "ArrowDown" && event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+            return;
+        event.preventDefault();
+        const msg = {
+            type: "element-nudge", protocolVersion: PROTOCOL_VERSION,
+            cid: lastSelected.getAttribute("data-cid"), src: lastSelected.getAttribute("data-src") ?? "",
+            elementId: cidIndex.elementId(lastSelected), key: event.key, ...identity,
+        };
+        sendToParent(msg);
+    }, true);
+    trackListener(document, "keyup", (event) => {
+        if (event.key === "Alt")
+            updateMeasureState(false, measurePointerOverPage);
+    }, true);
+    trackListener(window, "blur", () => {
+        updateMeasureState(false, false);
+    });
+    trackListener(document, "mouseout", (event) => {
+        const target = event.target;
+        if (!(target instanceof HTMLElement))
+            return;
+        const related = event.relatedTarget;
+        if (!(related instanceof Node) || !document.contains(related)) {
+            updateMeasureState(event.altKey, false);
+        }
+        if (related instanceof Node && (target.contains(related) || target === related))
+            return;
+        if (!(target instanceof Element))
+            return;
+        const el = resolveSelectionTarget(target, selectionTargetMode(event));
+        if (!el)
+            return;
+        if (resolveSelectionTarget(related, selectionTargetMode(event)))
+            return;
+        hoverUpdate.schedule({ element: el, clear: true });
+    }, true);
+    trackListener(document, "click", (event) => {
+        const target = event.target;
+        if (!(target instanceof Element))
+            return;
+        // Defer to navigation-intent when the user clicked a navigable same-origin
+        // anchor that points to a different route. In canvas mode, anchor clicks
+        // should create (or focus) a sibling card rather than selecting the anchor
+        // itself. The navigation-intent listener is registered AFTER this one, so
+        // we must NOT stop propagation here. Left to its own default the click would
+        // perform a full-frame navigation inside the iframe; the navigation-intent
+        // handler calls preventDefault once it has gathered the anchor href.
+        const anchor = findClosestAnchor(target);
+        if (anchor && isEligibleNavigation(anchor, event) && hasDifferentRoute(anchor)) {
+            return;
+        }
+        // Command/Ctrl+Shift-click is the deliberate escape hatch for running
+        // the application action. All other selected canvas clicks are editing
+        // gestures and must not reach the rendered application.
+        if (isApplicationActivationClick(event))
+            return;
+        const preserveNativeLink = anchor
+            ? shouldPreserveNativeLinkActivation(anchor, event)
+            : false;
+        const el = resolveSelectionTarget(target, selectionTargetMode(event));
+        if (!el) {
+            if (!preserveNativeLink)
+                blockApplicationClick(event);
+            return;
+        }
+        lastSelected = el;
+        if (!preserveNativeLink)
+            blockApplicationClick(event);
+        const cid = el.getAttribute("data-cid");
+        const selector = buildSelector(el);
+        const { file, line, component, src } = getFiberInfo(el);
+        const identity = getRendererIdentity();
+        if (!identity)
+            return;
+        const msg = {
+            type: "element-click",
+            protocolVersion: PROTOCOL_VERSION,
+            cid,
+            selector,
+            src,
+            elementId: cidIndex.elementId(el),
+            file,
+            line,
+            component,
+            additive: event.shiftKey && !event.ctrlKey && !event.metaKey,
+            ...identity,
+        };
+        sendToParent(msg);
+    }, true);
+    return () => {
+        if (disposed)
+            return;
+        disposed = true;
+        installed = false;
+        hoverUpdate.cancel();
+        dragMoveUpdate.cancel();
+        for (const cleanup of listenerCleanup)
+            cleanup();
+        listenerCleanup.length = 0;
+        removeInteractionStyles();
+        pendingDrag = null;
+        dragging = false;
+        lastSelected = null;
+        measurePointerOverPage = false;
+        measureAltKey = false;
+    };
+}

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

@@ -0,0 +1,2 @@
+import type { ElementClickMessage } from "./frameProtocol.js";
+export declare function handleElementClick(msg: ElementClickMessage, iframe: HTMLIFrameElement, cardId: string): void;

package/dist/inspector/canvas/rendererSelectionProxy.js

@@ -0,0 +1,61 @@
+import { getSelectedElements, setSelectedElement, toggleSelectedElement } from "../selection/selectionStore.js";
+import { selectCard } from "./canvasStore.js";
+import { RENDERER_ELEMENT_ID_ATTR } from "./rendererCidIndex.js";
+function isHtmlElementInDocument(node, doc) {
+    const frameWindow = doc.defaultView;
+    return frameWindow !== null && node instanceof frameWindow.HTMLElement;
+}
+/**
+ * Resolve the exact DOM element inside a card's iframe that matches an
+ * element-click message. The renderer (running inside the iframe) tells us
+ * the clicked element's renderer-owned `elementId`; we re-find the element by
+ * that stable data attribute so that the parent app can mutate the same
+ * physical DOM node the user clicked.
+ *
+ * The resolution uses a scoped ID query and never depends on document order.
+ *
+ * If the exact renderer-owned node no longer exists, fail closed instead of
+ * binding the copied component metadata to an unrelated DOM node.
+ */
+function findClickedElement(doc, elementId, cid, src) {
+    if (!doc)
+        return null;
+    if (!/^r\d+$/.test(elementId))
+        return null;
+    const candidates = doc.querySelectorAll(`[${RENDERER_ELEMENT_ID_ATTR}="${elementId}"]`);
+    if (candidates.length !== 1)
+        return null;
+    const candidate = candidates[0] ?? null;
+    if (!candidate || candidate.getAttribute("data-cid") !== cid || candidate.getAttribute("data-src") !== src)
+        return null;
+    return isHtmlElementInDocument(candidate, doc) ? candidate : null;
+}
+export function handleElementClick(msg, iframe, cardId) {
+    const doc = iframe.contentDocument;
+    const el = findClickedElement(doc, msg.elementId, msg.cid, msg.src);
+    if (!el) {
+        setSelectedElement(null);
+        selectCard(cardId);
+        return;
+    }
+    const selected = {
+        cid: msg.cid,
+        src: el.getAttribute("data-src") ?? msg.src,
+        cprops: el.getAttribute("data-cprops"),
+        file: msg.file,
+        line: msg.line,
+        column: 0,
+        domElement: el,
+        componentTargets: [],
+    };
+    // setSelectedElement must run before any side effect that could reload the
+    // host page, otherwise the selection would be discarded by the unload.
+    const current = getSelectedElements();
+    if (msg.additive && current.length > 0 && current.every((candidate) => candidate.domElement.ownerDocument === doc)) {
+        toggleSelectedElement(selected);
+    }
+    else {
+        setSelectedElement(selected);
+    }
+    selectCard(cardId);
+}

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

@@ -0,0 +1,16 @@
+import { type ReplaceStylesMessage } from "./frameProtocol.js";
+/** Installs renderer diagnostics only after the dev-only renderer bootstrap. */
+export declare function startRendererProjectionDiagnostics(): () => void;
+export declare function getLastAppliedRevision(): number;
+export declare function resetRendererRevision(): void;
+export interface ReplaceStylesValidation {
+    valid: true;
+    msg: ReplaceStylesMessage;
+}
+export interface ReplaceStylesRejection {
+    valid: false;
+    reason: string;
+}
+export type ReplaceStylesResult = ReplaceStylesValidation | ReplaceStylesRejection;
+export declare function validateReplaceStyles(msg: unknown, projectId: string, workspaceId: string, cardId: string): ReplaceStylesResult;
+export declare function handleReplaceStyles(msg: ReplaceStylesMessage, projectId: string, workspaceId: string, cardId: string): boolean;

package/dist/inspector/canvas/rendererStylesheet.js

@@ -0,0 +1,221 @@
+import { PROTOCOL_VERSION, getRendererIdentity, sendToParent, } from "./frameProtocol.js";
+import { isComponentOverrideList } from "./frameProtocol.js";
+import { isNudgeUiDev } from "../runtime/devFlag.js";
+import { replaceComponentOverrideProjection } from "../componentSemantics/index.js";
+import { notifyBrowserStylesheetChange } from "../inspection/browserCssInspectionRegistry.js";
+import { isRenderedInstanceOverride } from "../changes/editModel.js";
+import { applyRenderedInstanceProjection, getRenderedInstanceProjectionReports, subscribeRenderedInstanceDiagnostics, } from "../projection/renderedInstance.js";
+import { applyStructuralProjection, getStructuralProjectionReports, isStructuralChange, subscribeStructuralDiagnostics, } from "../projection/structuralProjection.js";
+import { applyTextContentProjection, getTextProjectionReports, subscribeTextProjectionDiagnostics, } from "../projection/textProjection.js";
+import { isTextContentChangeListValue } from "../changes/types.js";
+import { applyWorkspaceProjection, } from "../projection/workspaceProjection.js";
+const SHEET_ID = "nudge-ui-styles";
+function replaceRendererCss(css) {
+    let sheet = document.getElementById(SHEET_ID);
+    if (!sheet) {
+        sheet = document.createElement("style");
+        sheet.id = SHEET_ID;
+        sheet.setAttribute("data-nudge-ui", "managed");
+        document.head.appendChild(sheet);
+    }
+    sheet.textContent = css;
+    notifyBrowserStylesheetChange(document);
+}
+const rendererDocumentProjectionAdapter = {
+    applyStructural: (changes) => {
+        applyStructuralProjection(document, changes);
+    },
+    applyRenderedInstances: (overrides) => {
+        applyRenderedInstanceProjection(document, overrides);
+    },
+    applyText: (changes) => {
+        applyTextContentProjection(document, changes);
+    },
+    applyComponents: replaceComponentOverrideProjection,
+    applyManagedStyles: (styles) => {
+        replaceRendererCss(styles.css);
+    },
+};
+function projectionFromReplaceStylesMessage(msg) {
+    return {
+        sourceRevision: msg.revision,
+        managedStyles: { css: msg.css },
+        instanceOverrides: msg.instanceOverrides,
+        structuralChanges: msg.structuralChanges,
+        textContentChanges: msg.textContentChanges,
+        componentOverrides: msg.componentOverrides,
+    };
+}
+let lastAppliedRevision = -1;
+let lastStructuralReportRevision = null;
+let lastRenderedInstanceReportRevision = null;
+let lastTextProjectionReportRevision = null;
+let stopStructuralDiagnostics = null;
+let stopRenderedInstanceDiagnostics = null;
+let stopTextProjectionDiagnostics = null;
+let activeDiagnosticsOwner = null;
+function stopProjectionDiagnostics() {
+    stopStructuralDiagnostics?.();
+    stopStructuralDiagnostics = null;
+    stopRenderedInstanceDiagnostics?.();
+    stopRenderedInstanceDiagnostics = null;
+    stopTextProjectionDiagnostics?.();
+    stopTextProjectionDiagnostics = null;
+}
+function sendStructuralProjectionReport(revision) {
+    const identity = getRendererIdentity();
+    if (!identity)
+        return;
+    const msg = {
+        type: "structural-projection-report",
+        protocolVersion: PROTOCOL_VERSION,
+        revision,
+        reports: getStructuralProjectionReports(document).map((report) => ({ ...report })),
+        ...identity,
+    };
+    sendToParent(msg);
+}
+function sendRenderedInstanceProjectionReport(revision) {
+    const identity = getRendererIdentity();
+    if (!identity)
+        return;
+    const msg = {
+        type: "rendered-instance-projection-report",
+        protocolVersion: PROTOCOL_VERSION,
+        revision,
+        reports: getRenderedInstanceProjectionReports(document).map((report) => ({ ...report })),
+        ...identity,
+    };
+    sendToParent(msg);
+}
+function sendTextProjectionReport(revision) {
+    const identity = getRendererIdentity();
+    if (!identity)
+        return;
+    const msg = {
+        type: "text-projection-report",
+        protocolVersion: PROTOCOL_VERSION,
+        revision,
+        reports: getTextProjectionReports(document).map((report) => ({ ...report })),
+        ...identity,
+    };
+    sendToParent(msg);
+}
+function sendProjectionApplied(revision) {
+    const identity = getRendererIdentity();
+    if (!identity)
+        return;
+    const msg = {
+        type: "projection-applied",
+        protocolVersion: PROTOCOL_VERSION,
+        revision,
+        ...identity,
+    };
+    sendToParent(msg);
+}
+/** Installs renderer diagnostics only after the dev-only renderer bootstrap. */
+export function startRendererProjectionDiagnostics() {
+    if (!isNudgeUiDev() || activeDiagnosticsOwner)
+        return () => undefined;
+    lastAppliedRevision = -1;
+    lastStructuralReportRevision = null;
+    lastRenderedInstanceReportRevision = null;
+    lastTextProjectionReportRevision = null;
+    const owner = {};
+    activeDiagnosticsOwner = owner;
+    stopStructuralDiagnostics = subscribeStructuralDiagnostics(() => {
+        if (lastStructuralReportRevision !== null) {
+            sendStructuralProjectionReport(lastStructuralReportRevision);
+        }
+    });
+    stopRenderedInstanceDiagnostics = subscribeRenderedInstanceDiagnostics(() => {
+        if (lastRenderedInstanceReportRevision !== null) {
+            sendRenderedInstanceProjectionReport(lastRenderedInstanceReportRevision);
+        }
+    });
+    stopTextProjectionDiagnostics = subscribeTextProjectionDiagnostics(() => {
+        if (lastTextProjectionReportRevision !== null) {
+            sendTextProjectionReport(lastTextProjectionReportRevision);
+        }
+    });
+    return () => {
+        if (activeDiagnosticsOwner !== owner)
+            return;
+        activeDiagnosticsOwner = null;
+        stopProjectionDiagnostics();
+        lastAppliedRevision = -1;
+        lastStructuralReportRevision = null;
+        lastRenderedInstanceReportRevision = null;
+        lastTextProjectionReportRevision = null;
+    };
+}
+export function getLastAppliedRevision() {
+    return lastAppliedRevision;
+}
+export function resetRendererRevision() {
+    activeDiagnosticsOwner = null;
+    stopProjectionDiagnostics();
+    lastAppliedRevision = -1;
+    lastStructuralReportRevision = null;
+    lastRenderedInstanceReportRevision = null;
+    lastTextProjectionReportRevision = null;
+}
+export function validateReplaceStyles(msg, projectId, workspaceId, cardId) {
+    if (!msg || typeof msg !== "object") {
+        return { valid: false, reason: "message is not an object" };
+    }
+    const m = msg;
+    if (typeof m.protocolVersion !== "number" || m.protocolVersion !== PROTOCOL_VERSION) {
+        return { valid: false, reason: "protocol version mismatch" };
+    }
+    if (m.type !== "replace-styles") {
+        return { valid: false, reason: "not a replace-styles message" };
+    }
+    if (typeof m.projectId !== "string" || m.projectId !== projectId) {
+        return { valid: false, reason: "project ID mismatch" };
+    }
+    if (typeof m.workspaceId !== "string" || m.workspaceId !== workspaceId) {
+        return { valid: false, reason: "workspace ID mismatch" };
+    }
+    if (typeof m.cardId !== "string" || m.cardId !== cardId) {
+        return { valid: false, reason: "card ID mismatch" };
+    }
+    if (typeof m.revision !== "number" || !Number.isSafeInteger(m.revision) || m.revision < 0) {
+        return { valid: false, reason: "revision is not a non-negative safe integer" };
+    }
+    if (typeof m.css !== "string") {
+        return { valid: false, reason: "css is not a string" };
+    }
+    if (!Array.isArray(m.instanceOverrides) || !m.instanceOverrides.every(isRenderedInstanceOverride)) {
+        return { valid: false, reason: "instance overrides are invalid" };
+    }
+    if (!Array.isArray(m.structuralChanges) || !m.structuralChanges.every(isStructuralChange)) {
+        return { valid: false, reason: "structural changes are invalid" };
+    }
+    if (!isTextContentChangeListValue(m.textContentChanges)) {
+        return { valid: false, reason: "text content changes are invalid" };
+    }
+    if (!isComponentOverrideList(m.componentOverrides)) {
+        return { valid: false, reason: "component overrides are invalid" };
+    }
+    return { valid: true, msg: m };
+}
+export function handleReplaceStyles(msg, projectId, workspaceId, cardId) {
+    if (!isNudgeUiDev())
+        return false;
+    const validation = validateReplaceStyles(msg, projectId, workspaceId, cardId);
+    if (!validation.valid)
+        return false;
+    if (msg.revision <= lastAppliedRevision)
+        return false;
+    applyWorkspaceProjection(rendererDocumentProjectionAdapter, projectionFromReplaceStylesMessage(msg));
+    lastStructuralReportRevision = msg.revision;
+    lastRenderedInstanceReportRevision = msg.revision;
+    lastTextProjectionReportRevision = msg.revision;
+    sendStructuralProjectionReport(msg.revision);
+    sendRenderedInstanceProjectionReport(msg.revision);
+    sendTextProjectionReport(msg.revision);
+    lastAppliedRevision = msg.revision;
+    sendProjectionApplied(msg.revision);
+    return true;
+}

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

@@ -0,0 +1,13 @@
+/**
+ * Keep the resize handle usable while the board is zoomed without allowing
+ * inverse scaling to make it disproportionately large or small.
+ */
+export declare const CANVAS_RESIZE_HANDLE_MIN_SCALE: number;
+export declare const CANVAS_RESIZE_HANDLE_MAX_SCALE = 2;
+/**
+ * Returns the scale to apply inside the board's zoomed coordinate space.
+ *
+ * The lower bound matches the inverse of the largest supported camera zoom,
+ * and the upper bound follows the toolbar compensation policy.
+ */
+export declare function getCanvasResizeHandleScale(zoom: number): number;