opendevbrowser 0.0.16 → 0.0.18

package/extension/dist/ops/dom-bridge.js

@@ -1,4 +1,34 @@
 const DEFAULT_MAX_NODES = 1000;
+const CANVAS_OVERLAY_STYLE = `
+.opendevbrowser-canvas-overlay {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  z-index: 2147483647;
+  max-width: 280px;
+  padding: 12px 14px;
+  border-radius: 14px;
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  background: rgba(15, 23, 42, 0.94);
+  color: #f8fafc;
+  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
+  font: 600 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.opendevbrowser-canvas-overlay strong {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  opacity: 0.72;
+  text-transform: uppercase;
+}
+
+.opendevbrowser-canvas-highlight {
+  outline: 3px solid #0ea5e9 !important;
+  outline-offset: 2px !important;
+}
+`;
 export class DomBridge {
     async getOuterHtml(tabId, selector) {
         const result = await runWithElement(tabId, selector, { type: "outerHTML" });
@@ -82,6 +112,18 @@ export class DomBridge {
     async scrollIntoView(tabId, selector) {
         await runWithElement(tabId, selector, { type: "scrollIntoView" });
     }
+    async mountCanvasOverlay(tabId, input) {
+        return await runInTab(tabId, mountCanvasOverlayScript, [{ ...input, cssText: CANVAS_OVERLAY_STYLE }]);
+    }
+    async unmountCanvasOverlay(tabId, mountId) {
+        return await runInTab(tabId, unmountCanvasOverlayScript, [mountId]);
+    }
+    async selectCanvasOverlay(tabId, input) {
+        return await runInTab(tabId, selectCanvasOverlayScript, [input]);
+    }
+    async syncCanvasOverlay(tabId, input) {
+        return await runInTab(tabId, syncCanvasOverlayScript, [{ ...input, cssText: CANVAS_OVERLAY_STYLE }]);
+    }
     async getSelectorState(tabId, selector) {
         const result = await runInTab(tabId, (sel) => {
             const el = document.querySelector(sel);
@@ -240,6 +282,66 @@ export class DomBridge {
         }
         return payload.value;
     }
+    async applyRuntimePreviewBridge(tabId, bindingId, rootSelector, html) {
+        return await runInTab(tabId, (payload) => {
+            const input = payload;
+            const root = document.querySelector(input.rootSelector);
+            if (!(root instanceof HTMLElement)) {
+                return {
+                    ok: false,
+                    fallbackReason: "runtime_projection_unsupported",
+                    message: `Runtime root not found for selector ${input.rootSelector}.`
+                };
+            }
+            const existingBindingId = root.getAttribute("data-binding-id");
+            if (existingBindingId !== input.bindingId) {
+                return {
+                    ok: false,
+                    fallbackReason: "runtime_instrumentation_missing",
+                    message: "Runtime root is missing the expected data-binding-id instrumentation."
+                };
+            }
+            root.innerHTML = input.html;
+            const nodes = [root, ...Array.from(root.querySelectorAll("[data-node-id]"))]
+                .filter((element) => element instanceof HTMLElement && element.hasAttribute("data-node-id"))
+                .map((element) => {
+                const computed = window.getComputedStyle(element);
+                const childOrder = Array.from(element.children)
+                    .map((child) => child instanceof HTMLElement ? child.getAttribute("data-node-id") ?? child.tagName.toLowerCase() : "")
+                    .join("|");
+                return {
+                    nodeId: element.getAttribute("data-node-id") ?? "",
+                    bindingId: element.getAttribute("data-binding-id") ?? input.bindingId,
+                    text: (element.innerText || "").trim(),
+                    childOrderHash: childOrder,
+                    attributes: {
+                        "data-node-id": element.getAttribute("data-node-id") ?? "",
+                        ...(element.hasAttribute("data-binding-id")
+                            ? { "data-binding-id": element.getAttribute("data-binding-id") ?? "" }
+                            : {})
+                    },
+                    styleProjection: {
+                        color: computed.color,
+                        backgroundColor: computed.backgroundColor,
+                        fontSize: computed.fontSize,
+                        fontWeight: computed.fontWeight,
+                        borderRadius: computed.borderRadius,
+                        display: computed.display
+                    }
+                };
+            });
+            return {
+                ok: true,
+                artifact: {
+                    projection: "bound_app_runtime",
+                    rootBindingId: input.bindingId,
+                    capturedAt: new Date().toISOString(),
+                    hierarchyHash: nodes.map((node) => `${node.nodeId}:${node.childOrderHash}`).join("|"),
+                    nodes
+                }
+            };
+        }, [{ bindingId, rootSelector, html }]);
+    }
 }
 const runWithElement = async (tabId, selector, action) => {
     const result = await runInTab(tabId, (sel, act) => {
@@ -247,6 +349,60 @@ const runWithElement = async (tabId, selector, action) => {
         if (!el) {
             return { ok: false, error: "Element not found" };
         }
+        const dispatchPointer = (target, type, buttons) => {
+            const rect = target.getBoundingClientRect();
+            const init = {
+                bubbles: true,
+                cancelable: true,
+                composed: true,
+                view: window,
+                clientX: rect.left + rect.width / 2,
+                clientY: rect.top + rect.height / 2,
+                button: 0,
+                buttons
+            };
+            if (typeof PointerEvent === "function") {
+                target.dispatchEvent(new PointerEvent(type, init));
+                return;
+            }
+            target.dispatchEvent(new MouseEvent(type.replace(/^pointer/, "mouse"), init));
+        };
+        const dispatchMouse = (target, type, buttons) => {
+            const rect = target.getBoundingClientRect();
+            target.dispatchEvent(new MouseEvent(type, {
+                bubbles: true,
+                cancelable: true,
+                composed: true,
+                view: window,
+                clientX: rect.left + rect.width / 2,
+                clientY: rect.top + rect.height / 2,
+                button: 0,
+                buttons
+            }));
+        };
+        const dispatchHover = (target) => {
+            dispatchPointer(target, "pointerover", 0);
+            dispatchPointer(target, "pointerenter", 0);
+            dispatchMouse(target, "mouseover", 0);
+            dispatchMouse(target, "mouseenter", 0);
+            dispatchPointer(target, "pointermove", 0);
+            dispatchMouse(target, "mousemove", 0);
+        };
+        const dispatchClick = (target) => {
+            dispatchHover(target);
+            dispatchPointer(target, "pointerdown", 1);
+            dispatchMouse(target, "mousedown", 1);
+            if (target instanceof HTMLElement) {
+                target.focus();
+            }
+            dispatchPointer(target, "pointerup", 0);
+            dispatchMouse(target, "mouseup", 0);
+            if (target instanceof HTMLElement) {
+                target.click();
+                return;
+            }
+            target.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, composed: true, view: window }));
+        };
         const action = act;
         switch (action.type) {
             case "outerHTML":
@@ -271,11 +427,10 @@ const runWithElement = async (tabId, selector, action) => {
                 }
                 return { ok: true, value: false };
             case "click":
-                el.click();
+                dispatchClick(el);
                 return { ok: true, value: true };
             case "hover": {
-                const event = new MouseEvent("mouseover", { bubbles: true, cancelable: true, view: window });
-                el.dispatchEvent(event);
+                dispatchHover(el);
                 return { ok: true, value: true };
             }
             case "focus":
@@ -353,3 +508,100 @@ const assertRunResult = (value) => {
         throw new Error(record.error || "Script execution failed");
     }
 };
+function mountCanvasOverlayScript(input) {
+    const styleId = "opendevbrowser-canvas-style";
+    if (!document.getElementById(styleId)) {
+        const style = document.createElement("style");
+        style.id = styleId;
+        style.textContent = input.cssText;
+        document.head.append(style);
+    }
+    document.getElementById(input.mountId)?.remove();
+    const root = document.createElement("div");
+    root.id = input.mountId;
+    root.className = "opendevbrowser-canvas-overlay";
+    const heading = document.createElement("strong");
+    heading.textContent = "OpenDevBrowser Canvas";
+    const titleDetail = document.createElement("div");
+    titleDetail.textContent = input.title;
+    const selectionDetail = document.createElement("div");
+    selectionDetail.textContent = input.selection.nodeId ? `Selected ${input.selection.nodeId}` : input.prototypeId;
+    root.append(heading, titleDetail, selectionDetail);
+    document.body.append(root);
+    document.querySelectorAll(".opendevbrowser-canvas-highlight").forEach((element) => {
+        element.classList.remove("opendevbrowser-canvas-highlight");
+    });
+    if (input.selection.nodeId) {
+        const element = document.querySelector(`[data-node-id="${input.selection.nodeId}"]`);
+        if (element instanceof HTMLElement) {
+            element.classList.add("opendevbrowser-canvas-highlight");
+        }
+    }
+    return { overlayState: "mounted" };
+}
+function unmountCanvasOverlayScript(mountId) {
+    document.getElementById(mountId)?.remove();
+    document.querySelectorAll(".opendevbrowser-canvas-highlight").forEach((element) => {
+        element.classList.remove("opendevbrowser-canvas-highlight");
+    });
+    return true;
+}
+function selectCanvasOverlayScript(input) {
+    document.querySelectorAll(".opendevbrowser-canvas-highlight").forEach((element) => {
+        element.classList.remove("opendevbrowser-canvas-highlight");
+    });
+    const selector = typeof input.selectionHint.selector === "string"
+        ? input.selectionHint.selector
+        : (input.nodeId ? `[data-node-id="${input.nodeId}"]` : null);
+    const element = selector ? document.querySelector(selector) : null;
+    if (!(element instanceof HTMLElement)) {
+        return { matched: false };
+    }
+    element.classList.add("opendevbrowser-canvas-highlight");
+    return {
+        matched: true,
+        selector,
+        nodeId: input.nodeId,
+        tagName: element.tagName.toLowerCase(),
+        text: element.innerText.slice(0, 160),
+        id: element.id || null,
+        className: element.className || null
+    };
+}
+function syncCanvasOverlayScript(input) {
+    const styleId = "opendevbrowser-canvas-style";
+    if (!document.getElementById(styleId)) {
+        const style = document.createElement("style");
+        style.id = styleId;
+        style.textContent = input.cssText;
+        document.head.append(style);
+    }
+    let root = document.getElementById(input.mountId);
+    if (!(root instanceof HTMLElement)) {
+        root = document.createElement("div");
+        root.id = input.mountId;
+        root.className = "opendevbrowser-canvas-overlay";
+        root.innerHTML = "<strong>OpenDevBrowser Canvas</strong><div></div><div></div>";
+        document.body.append(root);
+    }
+    const [heading, titleDetail, selectionDetail] = Array.from(root.children);
+    if (heading instanceof HTMLElement) {
+        heading.textContent = "OpenDevBrowser Canvas";
+    }
+    if (titleDetail instanceof HTMLElement) {
+        titleDetail.textContent = input.title;
+    }
+    if (selectionDetail instanceof HTMLElement) {
+        selectionDetail.textContent = input.selection.nodeId ? `Selected ${input.selection.nodeId}` : "Canvas overlay synced";
+    }
+    document.querySelectorAll(".opendevbrowser-canvas-highlight").forEach((element) => {
+        element.classList.remove("opendevbrowser-canvas-highlight");
+    });
+    if (input.selection.nodeId) {
+        const element = document.querySelector(`[data-node-id="${input.selection.nodeId}"]`);
+        if (element instanceof HTMLElement) {
+            element.classList.add("opendevbrowser-canvas-highlight");
+        }
+    }
+    return { overlayState: "mounted" };
+}