@agent-native/core 0.121.1 → 0.122.0

package/corpus/templates/design/.generated/bridge/hit-test.generated.ts

@@ -0,0 +1,642 @@
+// AUTO-GENERATED by bridge/codegen.ts — do not edit manually.
+// Run: pnpm exec tsx app/components/design/bridge/codegen.ts
+
+/** Compiled IIFE string for hit-test.bridge.ts — inject into an iframe via srcdoc or a <script> tag. */
+export const hitTestBridgeScript: string = `"use strict";
+(() => {
+  // app/components/design/bridge/hit-test.bridge.ts
+  (function() {
+    var insertionGuide = null;
+    function ensureInsertionGuide() {
+      if (insertionGuide && document.body.contains(insertionGuide)) {
+        return insertionGuide;
+      }
+      insertionGuide = document.createElement("div");
+      insertionGuide.setAttribute("data-agent-native-hit-test-preview", "");
+      insertionGuide.setAttribute("data-agent-native-edit-overlay", "drop-guide");
+      insertionGuide.style.cssText = "position:fixed;pointer-events:none;z-index:99995;display:none;box-sizing:border-box;";
+      document.body.appendChild(insertionGuide);
+      return insertionGuide;
+    }
+    function hideInsertionGuide() {
+      if (insertionGuide) insertionGuide.style.display = "none";
+    }
+    var BRIDGE_CONTAINER_TAGS = [
+      "div",
+      "section",
+      "main",
+      "header",
+      "footer",
+      "nav",
+      "article",
+      "aside",
+      "form",
+      "ul",
+      "ol",
+      "figure",
+      "fieldset",
+      "details",
+      "dialog",
+      "blockquote",
+      "table",
+      "tbody",
+      "thead",
+      "tr"
+    ];
+    var BRIDGE_LEAF_TAGS = [
+      "img",
+      "video",
+      "picture",
+      "audio",
+      "canvas",
+      "svg",
+      "path",
+      "input",
+      "textarea",
+      "select",
+      "br",
+      "hr",
+      "iframe"
+    ];
+    var BRIDGE_TEXT_TAGS = [
+      "p",
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "span",
+      "a",
+      "strong",
+      "em",
+      "label",
+      "li"
+    ];
+    var BRIDGE_INTERACTIVE_LEAF_TAGS = ["button", "summary"];
+    function isOverlayElement(el) {
+      return Boolean(
+        el && el.closest && el.closest("[data-agent-native-edit-overlay]")
+      );
+    }
+    function isLayerInteractionBlocked(el) {
+      if (!el) return false;
+      if (el.closest && el.closest(
+        '[data-agent-native-locked="true"],[data-agent-native-hidden="true"]'
+      ))
+        return true;
+      return false;
+    }
+    function hasOnlyLeafContent(el) {
+      var children = el.children;
+      if (!children.length) return true;
+      for (var i = 0; i < children.length; i += 1) {
+        var child = children[i];
+        var childTag = (child.tagName || "").toLowerCase();
+        if (BRIDGE_LEAF_TAGS.indexOf(childTag) === -1 && BRIDGE_TEXT_TAGS.indexOf(childTag) === -1 && BRIDGE_INTERACTIVE_LEAF_TAGS.indexOf(childTag) === -1) {
+          return false;
+        }
+        if (child.children.length && !hasOnlyLeafContent(child)) return false;
+      }
+      return true;
+    }
+    function isContainerDropTarget(el) {
+      if (!el || el === document.documentElement) return false;
+      if (isOverlayElement(el) || isLayerInteractionBlocked(el)) return false;
+      if (el === document.body) return true;
+      var tag = (el.tagName || "").toLowerCase();
+      if (BRIDGE_LEAF_TAGS.indexOf(tag) !== -1 || BRIDGE_TEXT_TAGS.indexOf(tag) !== -1)
+        return false;
+      if (BRIDGE_INTERACTIVE_LEAF_TAGS.indexOf(tag) !== -1 && hasOnlyLeafContent(el)) {
+        return false;
+      }
+      var cs = window.getComputedStyle(el);
+      if (cs.display === "flex" || cs.display === "inline-flex" || cs.display === "grid" || cs.display === "inline-grid")
+        return true;
+      return BRIDGE_CONTAINER_TAGS.indexOf(tag) !== -1;
+    }
+    function elementFromEditorPoint(clientX, clientY) {
+      var targets = document.elementsFromPoint ? document.elementsFromPoint(clientX, clientY) : [document.elementFromPoint(clientX, clientY)];
+      for (var i = 0; i < targets.length; i += 1) {
+        var target = targets[i];
+        if (!target || target.nodeType !== 1) continue;
+        if (isOverlayElement(target)) continue;
+        if (isLayerInteractionBlocked(target)) return null;
+        return target;
+      }
+      return null;
+    }
+    function parentFlowAxis(parent) {
+      var cs = window.getComputedStyle(parent);
+      if (cs.display === "flex" || cs.display === "inline-flex") {
+        var isRow = cs.flexDirection && cs.flexDirection.indexOf("row") === 0;
+        var wraps = cs.flexWrap === "wrap" || cs.flexWrap === "wrap-reverse";
+        if (isRow && !wraps) return "x";
+        return "y";
+      }
+      if (cs.display === "grid" || cs.display === "inline-grid") {
+        var cols = (cs.gridTemplateColumns || "").split(" ").filter(Boolean).length;
+        return cols > 1 ? "x" : "y";
+      }
+      return "y";
+    }
+    function isAutoLayoutElement(el) {
+      if (!el) return false;
+      var cs = window.getComputedStyle(el);
+      return cs.display === "flex" || cs.display === "inline-flex" || cs.display === "grid" || cs.display === "inline-grid";
+    }
+    function isAbsolutePrimitiveContainer(el) {
+      if (!el || (el.tagName || "").toLowerCase() !== "div") return false;
+      var primitive = (el.getAttribute("data-an-primitive") || el.getAttribute("data-agent-native-primitive") || "").toLowerCase();
+      if (primitive !== "rectangle" && primitive !== "rect" && primitive !== "frame")
+        return false;
+      var cs = window.getComputedStyle(el);
+      return cs.position === "absolute" || cs.position === "fixed";
+    }
+    function absolutePrimitiveContainerTargetForPoint(clientX, clientY) {
+      var hits = document.elementsFromPoint ? document.elementsFromPoint(clientX, clientY) : [document.elementFromPoint(clientX, clientY)];
+      var seen = [];
+      for (var i = 0; i < hits.length; i += 1) {
+        var cursor = hits[i];
+        var candidate = null;
+        while (cursor && cursor !== document.body) {
+          if (isAbsolutePrimitiveContainer(cursor)) {
+            candidate = cursor;
+            break;
+          }
+          cursor = cursor.parentElement;
+        }
+        if (!candidate || seen.indexOf(candidate) !== -1) continue;
+        seen.push(candidate);
+        if (isOverlayElement(candidate) || isLayerInteractionBlocked(candidate)) {
+          continue;
+        }
+        return {
+          anchor: candidate,
+          placement: "inside",
+          axis: "y",
+          dropMode: "absolute-container"
+        };
+      }
+      return null;
+    }
+    function edgePlacementForRect(rect, axis, clientX, clientY) {
+      var size = axis === "x" ? rect.width : rect.height;
+      if (!size) return null;
+      var offset = axis === "x" ? clientX - rect.left : clientY - rect.top;
+      if (offset < size * 0.22) return "before";
+      if (offset > size * 0.78) return "after";
+      return null;
+    }
+    function getNodeId(el) {
+      if (!el) return "";
+      return el.getAttribute("data-agent-native-node-id") || el.getAttribute("data-code-layer-id") || el.getAttribute("data-layer-id") || el.getAttribute("data-builder-id") || el.id || "";
+    }
+    function isTemplateCloneElement(el) {
+      var node = el;
+      while (node && node !== document.documentElement) {
+        if (getNodeId(node)) return false;
+        var parent = node.parentElement;
+        if (!parent) return false;
+        var siblings = parent.children;
+        for (var i = 0; i < siblings.length; i += 1) {
+          var sib = siblings[i];
+          if (sib !== node && sib.tagName && sib.tagName.toLowerCase() === "template" && sib.hasAttribute("x-for")) {
+            return true;
+          }
+        }
+        node = parent;
+      }
+      return false;
+    }
+    function draggableElementChildren(parent) {
+      return Array.prototype.slice.call(parent.children).filter(function(child) {
+        return child.nodeType === 1 && !isOverlayElement(child) && !isLayerInteractionBlocked(child) && !isTemplateCloneElement(child);
+      });
+    }
+    function freshRuntimeNodeId(prefix) {
+      var random = "";
+      try {
+        if (window.crypto && window.crypto.getRandomValues) {
+          var bytes = new Uint32Array(2);
+          window.crypto.getRandomValues(bytes);
+          random = Array.prototype.map.call(bytes, function(part) {
+            return part.toString(36);
+          }).join("");
+        }
+      } catch (_err) {
+      }
+      if (!random)
+        random = Date.now().toString(36) + Math.random().toString(36).slice(2, 8);
+      return "an-" + String(prefix || "pending") + "-" + random;
+    }
+    function getOrMintPendingNodeId(el) {
+      if (!el || !el.getAttribute || !el.setAttribute) return "";
+      if (isTemplateCloneElement(el)) return "";
+      var existing = el.getAttribute("data-an-pending-node-id");
+      if (existing) return existing;
+      var minted = freshRuntimeNodeId("pending");
+      try {
+        el.setAttribute("data-an-pending-node-id", minted);
+      } catch (_err) {
+      }
+      return minted;
+    }
+    function alpineGeneratedChildrenOf(parent) {
+      var generated = [];
+      var children = parent.children;
+      for (var i = 0; i < children.length; i += 1) {
+        var child = children[i];
+        if (!child.tagName || child.tagName.toLowerCase() !== "template") {
+          continue;
+        }
+        try {
+          if (child._x_currentIfEl) generated.push(child._x_currentIfEl);
+          var lookup = child._x_lookup;
+          if (lookup) {
+            for (var key in lookup) {
+              if (Object.prototype.hasOwnProperty.call(lookup, key)) {
+                var item = lookup[key];
+                if (item) generated.push(item);
+              }
+            }
+          }
+        } catch (_err) {
+        }
+      }
+      return generated;
+    }
+    function isEditorInjectedElement(el) {
+      return !!(el.getAttribute && (el.getAttribute("data-agent-native-edit-overlay") !== null || el.getAttribute("data-agent-native-hit-test-preview") !== null));
+    }
+    function buildSourceEquivalentSelector(el) {
+      if (!el || el === document.documentElement || el === document.body) {
+        return "";
+      }
+      var parts = [];
+      var node = el;
+      while (node && node !== document.body) {
+        var parent = node.parentElement;
+        if (!parent) return "";
+        var generated = alpineGeneratedChildrenOf(parent);
+        if (generated.indexOf(node) !== -1) return "";
+        if (isEditorInjectedElement(node)) return "";
+        var tag = node.tagName ? node.tagName.toLowerCase() : "";
+        if (!tag || tag === "template") return "";
+        var nth = 0;
+        var siblings = parent.children;
+        for (var i = 0; i < siblings.length; i += 1) {
+          var sib = siblings[i];
+          if (!sib.tagName || sib.tagName.toLowerCase() !== tag) continue;
+          if (generated.indexOf(sib) !== -1) continue;
+          if (isEditorInjectedElement(sib)) continue;
+          nth += 1;
+          if (sib === node) break;
+        }
+        if (nth === 0) return "";
+        parts.unshift(tag + ":nth-of-type(" + nth + ")");
+        node = parent;
+      }
+      if (!node) return "";
+      parts.unshift("body");
+      return parts.join(" > ");
+    }
+    function nearestChildInsertionTarget(container, clientX, clientY) {
+      var children = draggableElementChildren(container);
+      if (!children.length) return null;
+      var axis = parentFlowAxis(container);
+      var best = null;
+      var bestDistance = Infinity;
+      var placement = "after";
+      for (var j = 0; j < children.length; j += 1) {
+        var rect = children[j].getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0) continue;
+        var center = axis === "x" ? rect.left + rect.width / 2 : rect.top + rect.height / 2;
+        var pointer = axis === "x" ? clientX : clientY;
+        var distance = Math.abs(pointer - center);
+        if (distance < bestDistance) {
+          bestDistance = distance;
+          best = children[j];
+          placement = pointer < center ? "before" : "after";
+        }
+      }
+      if (!best) return null;
+      return {
+        anchor: best,
+        placement,
+        axis,
+        dropMode: "flow-insert"
+      };
+    }
+    function resolveHitTarget(clientX, clientY) {
+      var hit = elementFromEditorPoint(clientX, clientY);
+      if (!hit || hit === document.documentElement) return null;
+      var cursor = hit;
+      while (cursor && cursor !== document.body) {
+        if (isLayerInteractionBlocked(cursor)) return null;
+        var parent = cursor.parentElement;
+        if (parent && isAutoLayoutElement(parent)) {
+          if (isTemplateCloneElement(cursor)) {
+            var cloneFallback = nearestChildInsertionTarget(
+              parent,
+              clientX,
+              clientY
+            );
+            if (cloneFallback) return cloneFallback;
+            return {
+              anchor: parent,
+              placement: "inside",
+              axis: parentFlowAxis(parent),
+              dropMode: "flow-insert"
+            };
+          }
+          var parentAxis = parentFlowAxis(parent);
+          var childRect = cursor.getBoundingClientRect();
+          var childCenter = parentAxis === "x" ? childRect.left + childRect.width / 2 : childRect.top + childRect.height / 2;
+          var childPointer = parentAxis === "x" ? clientX : clientY;
+          return {
+            anchor: cursor,
+            placement: childPointer < childCenter ? "before" : "after",
+            axis: parentAxis,
+            dropMode: "flow-insert"
+          };
+        }
+        if (isAutoLayoutElement(cursor) && isContainerDropTarget(cursor)) {
+          var containerRect = cursor.getBoundingClientRect();
+          var edgeAxis = parent ? parentFlowAxis(parent) : parentFlowAxis(cursor);
+          var edgePlacement = edgePlacementForRect(
+            containerRect,
+            edgeAxis,
+            clientX,
+            clientY
+          );
+          if (edgePlacement && parent && isAutoLayoutElement(parent)) {
+            return {
+              anchor: cursor,
+              placement: edgePlacement,
+              axis: edgeAxis,
+              dropMode: "flow-insert"
+            };
+          }
+          var betweenChildren = nearestChildInsertionTarget(
+            cursor,
+            clientX,
+            clientY
+          );
+          if (betweenChildren) return betweenChildren;
+          return {
+            anchor: cursor,
+            placement: "inside",
+            axis: parentFlowAxis(cursor),
+            dropMode: "flow-insert"
+          };
+        }
+        if (isAbsolutePrimitiveContainer(cursor)) {
+          return {
+            anchor: cursor,
+            placement: "inside",
+            axis: "y",
+            dropMode: "absolute-container"
+          };
+        }
+        cursor = parent;
+      }
+      return absolutePrimitiveContainerTargetForPoint(clientX, clientY);
+    }
+    function showInsertionGuideFor(target) {
+      if (!target || !target.anchor) {
+        hideInsertionGuide();
+        return;
+      }
+      var guide = ensureInsertionGuide();
+      var rect = target.anchor.getBoundingClientRect();
+      guide.style.display = "block";
+      guide.style.background = "var(--design-editor-accent-color)";
+      guide.style.border = "0";
+      guide.style.borderRadius = "999px";
+      guide.style.boxShadow = "0 0 0 1px var(--design-editor-accent-color)";
+      if (target.placement === "inside") {
+        guide.style.left = rect.left + "px";
+        guide.style.top = rect.top + "px";
+        guide.style.width = rect.width + "px";
+        guide.style.height = rect.height + "px";
+        guide.style.background = "color-mix(in srgb, var(--design-editor-accent-color) 14%, transparent)";
+        guide.style.border = "2px solid var(--design-editor-accent-color)";
+        guide.style.borderRadius = "2px";
+        guide.style.boxShadow = "none";
+        return;
+      }
+      if (target.axis === "x") {
+        var x = target.placement === "before" ? rect.left : rect.right;
+        guide.style.left = x + "px";
+        guide.style.top = rect.top + "px";
+        guide.style.width = "2px";
+        guide.style.height = rect.height + "px";
+      } else {
+        var y = target.placement === "before" ? rect.top : rect.bottom;
+        guide.style.left = rect.left + "px";
+        guide.style.top = y + "px";
+        guide.style.width = rect.width + "px";
+        guide.style.height = "2px";
+      }
+    }
+    function reviewAnchorElementAtPoint(clientX, clientY) {
+      var element = elementFromEditorPoint(clientX, clientY);
+      if (!element) return null;
+      var identifiedAncestor = element.closest(
+        "[data-agent-native-node-id],[data-code-layer-id],[data-layer-id],[data-builder-id],[id]"
+      );
+      if (identifiedAncestor && identifiedAncestor !== document.body && identifiedAncestor !== document.documentElement) {
+        return identifiedAncestor;
+      }
+      if (element === document.body || element === document.documentElement) {
+        return null;
+      }
+      return element;
+    }
+    function reviewNodeElements(nodeIds) {
+      var wanted = {};
+      var found = {};
+      for (var index = 0; index < nodeIds.length; index += 1) {
+        var nodeId = nodeIds[index];
+        if (nodeId) wanted[nodeId] = true;
+      }
+      var candidates = document.querySelectorAll(
+        "[data-agent-native-node-id],[data-code-layer-id],[data-layer-id],[data-builder-id],[id]"
+      );
+      for (var candidateIndex = 0; candidateIndex < candidates.length; candidateIndex += 1) {
+        var candidate = candidates[candidateIndex];
+        var candidateId = getNodeId(candidate);
+        if (candidateId && wanted[candidateId] && !found[candidateId]) {
+          found[candidateId] = candidate;
+        }
+      }
+      return found;
+    }
+    function postReviewLayout() {
+      try {
+        window.parent.postMessage(
+          { type: "agent-native:review-layout" },
+          "*"
+        );
+      } catch (_err) {
+      }
+    }
+    var reviewLayoutFrame = 0;
+    function scheduleReviewLayout() {
+      if (reviewLayoutFrame) return;
+      reviewLayoutFrame = window.requestAnimationFrame(function() {
+        reviewLayoutFrame = 0;
+        postReviewLayout();
+      });
+    }
+    window.addEventListener("scroll", scheduleReviewLayout, true);
+    window.addEventListener("resize", scheduleReviewLayout);
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", scheduleReviewLayout, {
+        once: true
+      });
+    } else {
+      scheduleReviewLayout();
+    }
+    window.addEventListener("message", function(e) {
+      if (e.source !== window.parent) return;
+      if (!e.data) return;
+      if (e.data.type === "agent-native:review-anchor-at-point") {
+        var reviewPointCorrelationId = e.data.correlationId;
+        var reviewPointX = Number(e.data.x);
+        var reviewPointY = Number(e.data.y);
+        if (!reviewPointCorrelationId) return;
+        var reviewPointElement = reviewAnchorElementAtPoint(
+          reviewPointX,
+          reviewPointY
+        );
+        var reviewPointNodeId = reviewPointElement ? getNodeId(reviewPointElement) : "";
+        var reviewPointSelector = reviewPointElement && !reviewPointNodeId ? buildSourceEquivalentSelector(reviewPointElement) : "";
+        try {
+          window.parent.postMessage(
+            {
+              type: "agent-native:review-anchor-at-point-result",
+              correlationId: reviewPointCorrelationId,
+              nodeId: reviewPointNodeId || void 0,
+              targetSelector: reviewPointSelector || void 0,
+              layerName: reviewPointElement?.getAttribute(
+                "data-agent-native-layer-name"
+              ) || void 0,
+              tagName: reviewPointElement?.tagName?.toLowerCase() || void 0
+            },
+            "*"
+          );
+        } catch (_err) {
+        }
+        return;
+      }
+      if (e.data.type === "agent-native:review-node-rects") {
+        var reviewRectsCorrelationId = e.data.correlationId;
+        var rawReviewNodeIds = e.data.nodeIds;
+        if (!reviewRectsCorrelationId || !Array.isArray(rawReviewNodeIds)) return;
+        var reviewNodeIds = rawReviewNodeIds.filter(function(value) {
+          return typeof value === "string" && value.length > 0;
+        }).slice(0, 500);
+        var reviewElements = reviewNodeElements(reviewNodeIds);
+        var reviewRects = {};
+        for (var reviewIndex = 0; reviewIndex < reviewNodeIds.length; reviewIndex += 1) {
+          var reviewNodeId = reviewNodeIds[reviewIndex];
+          var reviewElement = reviewElements[reviewNodeId];
+          if (!reviewElement) continue;
+          var reviewRect = reviewElement.getBoundingClientRect();
+          reviewRects[reviewNodeId] = {
+            left: reviewRect.left,
+            top: reviewRect.top,
+            width: reviewRect.width,
+            height: reviewRect.height
+          };
+        }
+        try {
+          window.parent.postMessage(
+            {
+              type: "agent-native:review-node-rects-result",
+              correlationId: reviewRectsCorrelationId,
+              rects: reviewRects,
+              viewportWidth: window.innerWidth,
+              viewportHeight: window.innerHeight
+            },
+            "*"
+          );
+        } catch (_err) {
+        }
+        return;
+      }
+      if (e.data.type === "agent-native:review-focus") {
+        var reviewFocusCorrelationId = e.data.correlationId;
+        var reviewFocusNodeId = String(e.data.nodeId || "");
+        if (!reviewFocusCorrelationId || !reviewFocusNodeId) return;
+        var reviewFocusElement = reviewNodeElements([reviewFocusNodeId])[reviewFocusNodeId];
+        if (reviewFocusElement) {
+          reviewFocusElement.scrollIntoView({
+            block: "center",
+            inline: "center"
+          });
+          var previousReviewBoxShadow = reviewFocusElement.style.boxShadow;
+          reviewFocusElement.style.boxShadow = "0 0 0 2px var(--design-editor-accent-color, #2563eb)";
+          window.setTimeout(function() {
+            reviewFocusElement.style.boxShadow = previousReviewBoxShadow;
+          }, 700);
+        }
+        try {
+          window.parent.postMessage(
+            {
+              type: "agent-native:review-focus-result",
+              correlationId: reviewFocusCorrelationId,
+              focused: Boolean(reviewFocusElement)
+            },
+            "*"
+          );
+        } catch (_err) {
+        }
+        return;
+      }
+      if (e.data.type === "agent-native:hit-test-preview-clear") {
+        hideInsertionGuide();
+        return;
+      }
+      if (e.data.type !== "agent-native:hit-test") return;
+      var correlationId = e.data.correlationId;
+      var x = Number(e.data.x);
+      var y = Number(e.data.y);
+      if (!correlationId) return;
+      var result = resolveHitTarget(x, y);
+      if (e.data.preview) showInsertionGuideFor(result);
+      var anchorNodeId = result ? getNodeId(result.anchor) : "";
+      var pendingNodeId = result && !anchorNodeId ? getOrMintPendingNodeId(result.anchor) : "";
+      var anchorSelector = pendingNodeId ? buildSourceEquivalentSelector(result ? result.anchor : null) : "";
+      var placement = result ? result.placement : "inside";
+      var axis = result ? result.axis : "y";
+      var dropMode = result ? result.dropMode : "flow-insert";
+      var anchorRect = result ? result.anchor.getBoundingClientRect() : null;
+      try {
+        window.parent.postMessage(
+          {
+            type: "agent-native:hit-test-result",
+            correlationId,
+            anchorNodeId,
+            pendingNodeId: pendingNodeId || void 0,
+            anchorSelector: anchorSelector || void 0,
+            placement,
+            axis,
+            dropMode,
+            anchorRect: anchorRect ? {
+              left: anchorRect.left,
+              top: anchorRect.top,
+              width: anchorRect.width,
+              height: anchorRect.height
+            } : void 0
+          },
+          "*"
+        );
+      } catch (_err) {
+      }
+    });
+  })();
+})();
+`;