@agent-native/core 0.80.11 → 0.81.0

package/corpus/templates/design/app/components/design/bridge/embedded-wheel.bridge.ts

@@ -0,0 +1,62 @@
+/**
+ * Embedded overview bridge — injected into every canvas iframe.
+ *
+ * A screen preview is a real iframe, so normal wheel events never bubble to
+ * the overview canvas underneath. In embedded mode we forward a bounded wheel
+ * payload to the parent so the existing canvas wheel handler can pan/zoom
+ * exactly as if the pointer were over empty canvas.
+ *
+ * Runtime placeholder (replaced by DesignCanvas.tsx before injection):
+ *   __EMBEDDED_WHEEL_FORWARDING_ENABLED__  — boolean literal "true"/"false"
+ *
+ * Protocol (iframe → parent, only when enabled):
+ *
+ *   { type: 'embedded-canvas-wheel', deltaX, deltaY, deltaZ, deltaMode,
+ *     clientX, clientY, ctrlKey, metaKey, shiftKey, altKey }
+ *
+ * Rules:
+ *   • No import/require of any module (DOM globals only).
+ *   • No references to outer/module scope (the code runs inside an iframe).
+ *   • Wrap everything in a self-executing IIFE.
+ */
+declare var __EMBEDDED_WHEEL_FORWARDING_ENABLED__: boolean;
+
+(function () {
+  var enabled = __EMBEDDED_WHEEL_FORWARDING_ENABLED__;
+  if (!enabled) return;
+  function clamp(value: number, limit: number): number {
+    var number = Number(value) || 0;
+    if (number > limit) return limit;
+    if (number < -limit) return -limit;
+    return number;
+  }
+  function onWheel(e: WheelEvent): void {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.stopImmediatePropagation) e.stopImmediatePropagation();
+    try {
+      (window.parent as Window).postMessage(
+        {
+          type: "embedded-canvas-wheel",
+          deltaX: clamp(e.deltaX, 240),
+          deltaY: clamp(e.deltaY, 240),
+          deltaZ: clamp(e.deltaZ, 240),
+          deltaMode: e.deltaMode,
+          clientX: e.clientX,
+          clientY: e.clientY,
+          ctrlKey: !!e.ctrlKey,
+          metaKey: !!e.metaKey,
+          shiftKey: !!e.shiftKey,
+          altKey: !!e.altKey,
+        },
+        "*",
+      );
+    } catch (_err) {}
+  }
+  var wheelTarget: EventTarget =
+    document.documentElement || document.body || document;
+  wheelTarget.addEventListener("wheel", onWheel as EventListener, {
+    passive: false,
+    capture: true,
+  });
+})();

package/corpus/templates/design/app/components/design/bridge/hit-test.bridge.ts

@@ -0,0 +1,272 @@
+/**
+ * Lightweight hit-test bridge — injected into every inline canvas iframe so the
+ * parent editor can resolve drop-anchor positions via postMessage without a full
+ * editor-chrome bridge in non-edit views (e.g. multi-screen overview).
+ *
+ * Protocol (parent → iframe via postMessage):
+ *   { type: 'agent-native:hit-test', correlationId: string, x: number, y: number }
+ *   where x/y are in this iframe's viewport coordinate space.
+ *
+ * Reply (iframe → window.parent):
+ *   { type: 'agent-native:hit-test-result', correlationId: string,
+ *     anchorNodeId: string, placement: 'before'|'after'|'inside' }
+ *
+ * Reads DOM only — no mutations, no event interception. The container-drop and
+ * placement logic is intentionally kept in sync with the corresponding helpers
+ * inside editor-chrome.bridge.ts (search for "// keep in sync with
+ * hit-test.bridge.ts" comments there).
+ *
+ * Rules:
+ *   • No import/require of any module (DOM globals only).
+ *   • No references to outer/module scope (the code runs inside an iframe).
+ *   • Wrap everything in a self-executing IIFE.
+ */
+(function () {
+  // keep in sync with editor-chrome.bridge.ts container/leaf/text tag lists
+  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",
+  ];
+
+  function isOverlayElement(el: Element | null): boolean {
+    return Boolean(
+      el && el.closest && el.closest("[data-agent-native-edit-overlay]"),
+    );
+  }
+
+  function isLayerInteractionBlocked(el: Element | null): boolean {
+    if (!el) return false;
+    if (
+      el.closest &&
+      el.closest(
+        '[data-agent-native-locked="true"],[data-agent-native-hidden="true"]',
+      )
+    )
+      return true;
+    return false;
+  }
+
+  // keep in sync with editor-chrome.bridge.ts isContainerDropTarget
+  function isContainerDropTarget(el: Element | null): boolean {
+    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;
+    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;
+  }
+
+  // keep in sync with editor-chrome.bridge.ts elementFromEditorPoint
+  function elementFromEditorPoint(
+    clientX: number,
+    clientY: number,
+  ): Element | null {
+    var targets: Element[] = document.elementsFromPoint
+      ? document.elementsFromPoint(clientX, clientY)
+      : ([document.elementFromPoint(clientX, clientY)] as Element[]);
+    for (var i = 0; i < targets.length; i += 1) {
+      var target = targets[i];
+      if (!target || target.nodeType !== 1) continue;
+      // Skip injected bridge overlays so they don't shadow real content.
+      if (isOverlayElement(target)) continue;
+      if (isLayerInteractionBlocked(target)) return null;
+      return target;
+    }
+    return null;
+  }
+
+  // keep in sync with editor-chrome.bridge.ts parentFlowAxis
+  function parentFlowAxis(parent: Element): string {
+    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";
+  }
+
+  // keep in sync with editor-chrome.bridge.ts edgePlacementForRect
+  function edgePlacementForRect(
+    rect: DOMRect,
+    axis: string,
+    clientX: number,
+    clientY: number,
+  ): string | null {
+    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 draggableElementChildren(parent: Element): Element[] {
+    return Array.prototype.slice.call(parent.children).filter(function (
+      child: Element,
+    ) {
+      return (
+        child.nodeType === 1 &&
+        !isOverlayElement(child) &&
+        !isLayerInteractionBlocked(child)
+      );
+    });
+  }
+
+  function getNodeId(el: Element | null): string {
+    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 ||
+      ""
+    );
+  }
+
+  /**
+   * Resolve the deepest container element under (x, y) and a placement hint,
+   * mirroring reorderTargetForPoint from editor-chrome.bridge.ts but
+   * without a dragged element (we only need the anchor + placement).
+   *
+   * keep in sync with editor-chrome.bridge.ts reorderTargetForPoint
+   */
+  function resolveHitTarget(
+    clientX: number,
+    clientY: number,
+  ): { anchor: Element; placement: string } | null {
+    var hit = elementFromEditorPoint(clientX, clientY);
+    if (!hit || hit === document.documentElement) return null;
+
+    if (isContainerDropTarget(hit)) {
+      var containerRect = hit.getBoundingClientRect();
+      var edgeAxis = hit.parentElement
+        ? parentFlowAxis(hit.parentElement)
+        : parentFlowAxis(hit);
+      var edgePlacement = edgePlacementForRect(
+        containerRect,
+        edgeAxis,
+        clientX,
+        clientY,
+      );
+      if (!edgePlacement) {
+        return { anchor: hit, placement: "inside" };
+      }
+      return { anchor: hit, placement: edgePlacement };
+    }
+
+    // Non-container: use sibling before/after placement.
+    var hitParent = hit.parentElement;
+    if (hitParent) {
+      var hitAxis = parentFlowAxis(hitParent);
+      var hitRect = hit.getBoundingClientRect();
+      var hitCenter =
+        hitAxis === "x"
+          ? hitRect.left + hitRect.width / 2
+          : hitRect.top + hitRect.height / 2;
+      var hitPointer = hitAxis === "x" ? clientX : clientY;
+      return {
+        anchor: hit,
+        placement: hitPointer < hitCenter ? "before" : "after",
+      };
+    }
+
+    // Fallback: body-level, treat as inside.
+    if (hit === document.body || !hit.parentElement) {
+      return { anchor: document.body, placement: "inside" };
+    }
+
+    return null;
+  }
+
+  window.addEventListener("message", function (e: MessageEvent) {
+    if (e.source !== window.parent) return;
+    if (!e.data || e.data.type !== "agent-native:hit-test") return;
+    var correlationId: string = e.data.correlationId;
+    var x: number = Number(e.data.x);
+    var y: number = Number(e.data.y);
+    if (!correlationId) return;
+    var result = resolveHitTarget(x, y);
+    var anchorNodeId: string = result ? getNodeId(result.anchor) : "";
+    var placement: string = result ? result.placement : "inside";
+    try {
+      (window.parent as Window).postMessage(
+        {
+          type: "agent-native:hit-test-result",
+          correlationId: correlationId,
+          anchorNodeId: anchorNodeId,
+          placement: placement,
+        },
+        "*",
+      );
+    } catch (_err) {}
+  });
+})();

package/corpus/templates/design/app/components/design/bridge/nav.bridge.ts

@@ -0,0 +1,116 @@
+/**
+ * Navigation bridge — injected into every canvas iframe.
+ *
+ * ALWAYS injected. A prototype lives in a `srcdoc` iframe, so a plain
+ * `<a href="/pricing">` resolves the relative URL against the PARENT app
+ * document and navigates the iframe to the Design app itself ("Design not
+ * found"), nuking the prototype. We intercept link clicks + relative form
+ * submits and route them to the parent instead:
+ *   - in-page anchors (`#...`) and `javascript:`/`@click` handlers: left alone
+ *   - external `http(s)`/`//` links: opened in a new tab by the parent
+ *   - internal/relative links (or an explicit `data-screen`): asked to switch
+ *     to the matching screen in a multi-screen design; otherwise a no-op so the
+ *     prototype never blows itself away.
+ *
+ * Protocol (iframe → parent):
+ *
+ *   { type: 'prototype-navigate', href: string, screen: string }
+ *     Sent when the user clicks an internal link or a `data-screen` element.
+ *
+ * Rules:
+ *   • No import/require of any module (DOM globals only).
+ *   • No references to outer/module scope (the code runs inside an iframe).
+ *   • Wrap everything in a self-executing IIFE.
+ */
+(function () {
+  function classify(
+    href: string,
+  ): { external: boolean; href: string; screen?: string } | null {
+    var h = (href || "").trim();
+    if (!h) return null;
+    var lower = h.toLowerCase();
+    if (lower.charAt(0) === "#") return null;
+    if (lower.indexOf("javascript:") === 0) return null;
+    if (lower.indexOf("mailto:") === 0 || lower.indexOf("tel:") === 0) {
+      return { external: true, href: h };
+    }
+    if (/^https?:\/\//i.test(h) || /^\/\//.test(h)) {
+      return { external: true, href: h };
+    }
+    var screen = h.replace(/^\.?\//, "").split(/[?#]/)[0];
+    return { external: false, href: h, screen: screen };
+  }
+  document.addEventListener(
+    "click",
+    function (e: MouseEvent) {
+      var t = e.target as Element | null;
+      if (!t || !t.closest) return;
+      var a = t.closest("a[href], [data-screen]") as HTMLElement | null;
+      if (!a) return;
+      var ds = a.getAttribute && a.getAttribute("data-screen");
+      // In-page anchors ('#...') and empty hrefs must be handled in-document.
+      // A srcdoc document resolves '#'/'' against the PARENT app URL, so the
+      // browser's default action would navigate the iframe to the app itself.
+      if (!ds) {
+        var rawHref = a.getAttribute("href");
+        if (rawHref != null) {
+          var hh = rawHref.trim();
+          if (hh === "" || hh.charAt(0) === "#") {
+            e.preventDefault();
+            var fid = hh.charAt(0) === "#" ? hh.slice(1) : "";
+            var tgt = fid ? document.getElementById(fid) : null;
+            if (tgt && tgt.scrollIntoView) {
+              tgt.scrollIntoView({ behavior: "smooth", block: "start" });
+            } else {
+              window.scrollTo({ top: 0, behavior: "smooth" });
+            }
+            return;
+          }
+        }
+      }
+      var info = ds
+        ? {
+            external: false,
+            href: ds,
+            screen: ds.replace(/^\.?\//, "").split(/[?#]/)[0],
+          }
+        : classify(a.getAttribute("href") || "");
+      if (!info) return;
+      if (info.external) {
+        // Open external links in a new tab from the iframe itself (the sandbox
+        // grants allow-popups), bound to this real user click. We deliberately
+        // do NOT round-trip through the parent: a parent window.open() driven
+        // by postMessage would let any script in here spawn popups without a
+        // gesture.
+        try {
+          a.setAttribute("target", "_blank");
+          a.setAttribute("rel", "noopener noreferrer");
+        } catch (_err) {}
+        return; // allow the native click to proceed
+      }
+      e.preventDefault();
+      try {
+        (window.parent as Window).postMessage(
+          {
+            type: "prototype-navigate",
+            href: info.href,
+            screen: info.screen || "",
+          },
+          "*",
+        );
+      } catch (_err) {}
+    },
+    true,
+  );
+  document.addEventListener(
+    "submit",
+    function (e: SubmitEvent) {
+      var f = e.target as HTMLFormElement | null;
+      if (!f || f.tagName !== "FORM") return;
+      var action = f.getAttribute("action") || "";
+      if (/^https?:\/\//i.test(action)) return;
+      e.preventDefault();
+    },
+    true,
+  );
+})();

package/corpus/templates/design/app/components/design/bridge/sample.bridge.ts

@@ -0,0 +1,24 @@
+/**
+ * Sample bridge — proves the compile-time pipeline.
+ *
+ * Rules that every *.bridge.ts MUST follow:
+ *   • No import/require of any module (DOM globals only).
+ *   • No references to outer/module scope (the code runs inside an iframe).
+ *   • Wrap everything in a self-executing IIFE.
+ *   • Type-only imports (erased by tsc) are permitted if needed for doc purposes,
+ *     but in practice they are unnecessary since no app types are reachable here.
+ */
+(function () {
+  window.addEventListener("message", function (e: MessageEvent) {
+    if (!e.data || e.data.type !== "agent-native:sample-ping") return;
+    var correlationId: string = e.data.correlationId ?? "";
+    try {
+      (window.parent as Window).postMessage(
+        { type: "agent-native:sample-pong", correlationId },
+        "*",
+      );
+    } catch (_err) {
+      // Cross-origin errors are silently swallowed.
+    }
+  });
+})();

package/corpus/templates/design/app/components/design/bridge/shader-fill-preview.bridge.ts

@@ -0,0 +1,78 @@
+/**
+ * Shader-fill preview bridge — injected into every canvas iframe.
+ *
+ * Allows the parent to apply a CSS gradient approximation of a shader fill to
+ * the currently-selected element WITHOUT persisting anything.
+ *
+ * Protocol (parent → iframe):
+ *
+ *   { type: 'shader-fill-preview', selector, nodeId, css }
+ *     Apply `css` as the `background` inline style on the first element that
+ *     matches `selector` (preferred) or `[data-agent-native-node-id="nodeId"]`.
+ *     When both are absent, targets `document.body`. Stores the previous
+ *     background value so it can be restored on clear.
+ *     Preview-only — never writes to DB, Yjs, or source files.
+ *
+ *   { type: 'shader-fill-preview-clear' }
+ *     Remove the applied background override and restore the previous value.
+ *     Called when the user discards the preview or switches selections.
+ *
+ * Rules:
+ *   • No import/require of any module (DOM globals only).
+ *   • No references to outer/module scope (the code runs inside an iframe).
+ *   • Wrap everything in a self-executing IIFE.
+ */
+(function () {
+  // Track the element we patched and its original background so we can undo.
+  var patchedEl: HTMLElement | null = null;
+  var originalBackground = "";
+
+  function resolveTarget(selector: string, nodeId: string): HTMLElement | null {
+    if (selector) {
+      try {
+        var hit = document.querySelector(selector) as HTMLElement | null;
+        if (hit) return hit;
+      } catch (_err) {}
+    }
+    if (nodeId) {
+      var byId = document.querySelector(
+        '[data-agent-native-node-id="' + nodeId.replace(/"/g, '\\"') + '"]',
+      ) as HTMLElement | null;
+      if (byId) return byId;
+    }
+    return document.body;
+  }
+
+  function applyPreview(selector: string, nodeId: string, css: string): void {
+    // Clear any prior patch first so we don't stack patches.
+    clearPreview();
+    var el = resolveTarget(selector, nodeId);
+    if (!el) return;
+    originalBackground = el.style.background || "";
+    el.style.background = css || "";
+    patchedEl = el;
+  }
+
+  function clearPreview(): void {
+    if (!patchedEl) return;
+    patchedEl.style.background = originalBackground;
+    patchedEl = null;
+    originalBackground = "";
+  }
+
+  window.addEventListener("message", function (e: MessageEvent) {
+    if (e.source !== window.parent) return;
+    if (!e.data || typeof e.data.type !== "string") return;
+    if (e.data.type === "shader-fill-preview") {
+      var selector = typeof e.data.selector === "string" ? e.data.selector : "";
+      var nodeId = typeof e.data.nodeId === "string" ? e.data.nodeId : "";
+      var css = typeof e.data.css === "string" ? e.data.css : "";
+      applyPreview(selector, nodeId, css);
+      return;
+    }
+    if (e.data.type === "shader-fill-preview-clear") {
+      clearPreview();
+      return;
+    }
+  });
+})();

package/corpus/templates/design/app/components/design/bridge/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": false,
+    "types": [],
+    "paths": {}
+  },
+  "include": ["./*.bridge.ts"],
+  "exclude": []
+}

package/corpus/templates/design/app/components/design/bridge/tweak.bridge.ts

@@ -0,0 +1,28 @@
+/**
+ * Tweak bridge — injected into every canvas iframe.
+ *
+ * ALWAYS injected so the parent's postMessage (`tweak-values`) can update CSS
+ * custom properties on the iframe's :root regardless of which editor mode is
+ * active. Without this the tweak panel silently no-ops in Comment mode.
+ *
+ * Protocol (parent → iframe):
+ *
+ *   { type: 'tweak-values', values: Record<string, string> }
+ *     Apply each key/value pair as a CSS custom property on :root.
+ *
+ * Rules:
+ *   • No import/require of any module (DOM globals only).
+ *   • No references to outer/module scope (the code runs inside an iframe).
+ *   • Wrap everything in a self-executing IIFE.
+ */
+(function () {
+  window.addEventListener("message", function (e: MessageEvent) {
+    if (e.source !== window.parent) return;
+    if (!e.data || e.data.type !== "tweak-values") return;
+    var root = document.documentElement;
+    var vals: Record<string, string> = e.data.values || {};
+    Object.keys(vals).forEach(function (k: string) {
+      root.style.setProperty(k, vals[k]);
+    });
+  });
+})();

package/corpus/templates/design/app/components/design/bridge/zoom.bridge.ts

@@ -0,0 +1,43 @@
+/**
+ * Pinch-zoom bridge — injected into every canvas iframe.
+ *
+ * Forwards trackpad pinch / Cmd-Ctrl+scroll wheel events from inside the
+ * iframe to the parent window. Wheel events don't naturally bubble out of an
+ * iframe, so without this the user can only pinch in the empty area around the
+ * canvas, not over the design itself.
+ *
+ * Protocol (iframe → parent):
+ *
+ *   { type: 'pinch-zoom-wheel', deltaY, clientX, clientY }
+ *
+ * Rules:
+ *   • No import/require of any module (DOM globals only).
+ *   • No references to outer/module scope (the code runs inside an iframe).
+ *   • Wrap everything in a self-executing IIFE.
+ */
+(function () {
+  // Attach to documentElement (not window/document) so { passive: false }
+  // is honored consistently and the browser doesn't natively pinch-zoom the
+  // iframe's own document alongside the parent's zoom.
+  var target: EventTarget =
+    document.documentElement || document.body || document;
+  function onWheel(e: WheelEvent): void {
+    if (!(e.ctrlKey || e.metaKey)) return;
+    e.preventDefault();
+    try {
+      (window.parent as Window).postMessage(
+        {
+          type: "pinch-zoom-wheel",
+          deltaY: e.deltaY,
+          clientX: e.clientX,
+          clientY: e.clientY,
+        },
+        "*",
+      );
+    } catch (_err) {}
+  }
+  target.addEventListener("wheel", onWheel as EventListener, {
+    passive: false,
+    capture: true,
+  });
+})();