@agent-native/core 0.80.10 → 0.80.11

package/corpus/templates/design/app/components/design/DesignCanvas.tsx

@@ -99,6 +99,8 @@ const MOTION_PREVIEW_BRIDGE_SCRIPT = `
   var loadedTracks = [];
   // Map of nodeId -> [property, ...] we have touched, for cleanup.
   var touchedProps = {};
+  // Map of nodeId -> property -> original inline style value.
+  var originalInlineValues = {};
 
   function lerp(a, b, ratio) {
     var numA = parseFloat(a);
@@ -137,6 +139,10 @@ const MOTION_PREVIEW_BRIDGE_SCRIPT = `
       if (!el) continue;
       var value = interpolate(track.keyframes, t);
       if (value === '') continue;
+      if (!originalInlineValues[track.targetNodeId]) originalInlineValues[track.targetNodeId] = {};
+      if (!(track.property in originalInlineValues[track.targetNodeId])) {
+        originalInlineValues[track.targetNodeId][track.property] = el.style[track.property] || '';
+      }
       el.style[track.property] = value;
       if (!touchedProps[track.targetNodeId]) touchedProps[track.targetNodeId] = [];
       if (touchedProps[track.targetNodeId].indexOf(track.property) === -1) {
@@ -152,10 +158,14 @@ const MOTION_PREVIEW_BRIDGE_SCRIPT = `
       if (!el) continue;
       var props = touchedProps[nodeIds[i]];
       for (var j = 0; j < props.length; j++) {
-        el.style[props[j]] = '';
+        var originals = originalInlineValues[nodeIds[i]] || {};
+        el.style[props[j]] = Object.prototype.hasOwnProperty.call(originals, props[j])
+          ? originals[props[j]]
+          : '';
       }
     }
     touchedProps = {};
+    originalInlineValues = {};
     loadedTracks = [];
   }
 
@@ -163,8 +173,8 @@ const MOTION_PREVIEW_BRIDGE_SCRIPT = `
     if (e.source !== window.parent) return;
     if (!e.data || typeof e.data.type !== 'string') return;
     if (e.data.type === 'motion-load-tracks') {
+      clearPreview();
       loadedTracks = Array.isArray(e.data.tracks) ? e.data.tracks : [];
-      touchedProps = {};
       return;
     }
     if (e.data.type === 'motion-preview') {
@@ -1074,6 +1084,10 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
   }
 
   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 matchesSelectorList(el, lockedSelectors) || matchesSelectorList(el, hiddenSelectors);
   }
 
@@ -1948,6 +1962,12 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
     selectedSpacingHovered = false;
     hoveredSpacingHandleKey = '';
     selectedEl = selectionTargetForHit(target);
+    if (!selectedEl || isLayerInteractionBlocked(selectedEl)) {
+      selectedEl = null;
+      selectionOverlay.style.display = 'none';
+      clearComponentTag();
+      return;
+    }
     var info = getElementInfo(selectedEl);
     positionOverlay(selectionOverlay, selectedEl);
     window.parent.postMessage({ type: 'element-select', payload: info }, '*');
@@ -1973,9 +1993,15 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
       selectedSpacingHovered = false;
       hoveredSpacingHandleKey = '';
       selectedEl = selectionTargetForHit(target);
-      info = getElementInfo(selectedEl);
-      positionOverlay(selectionOverlay, selectedEl);
-      window.parent.postMessage({ type: 'element-select', payload: info }, '*');
+      if (selectedEl && !isLayerInteractionBlocked(selectedEl)) {
+        info = getElementInfo(selectedEl);
+        positionOverlay(selectionOverlay, selectedEl);
+        window.parent.postMessage({ type: 'element-select', payload: info }, '*');
+      } else {
+        selectedEl = null;
+        selectionOverlay.style.display = 'none';
+        clearComponentTag();
+      }
     }
     window.parent.postMessage({
       type: 'element-contextmenu',
@@ -2198,6 +2224,21 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
 	    return !!(ancestorEl && (ancestorEl === el || el.contains(ancestorEl)));
 	  }
 
+	  function normalizeCssPropertyName(property) {
+	    var prop = String(property || '').trim();
+	    if (!prop) return '';
+	    if (prop.indexOf('--') === 0) return prop;
+	    return prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+	  }
+
+	  function applyInlineStyleProperty(el, property, value) {
+	    if (!el || !property) return false;
+	    var cssProperty = normalizeCssPropertyName(property);
+	    if (!cssProperty) return false;
+	    el.style.setProperty(cssProperty, String(value));
+	    return true;
+	  }
+
 	  function applyTextRangeStyle(property, value) {
 	    if (!activeTextEditEl || !property) return false;
 	    var selection = window.getSelection && window.getSelection();
@@ -2205,7 +2246,7 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
 	    if (!selectionBelongsToElement(selection, activeTextEditEl)) return false;
 	    var range = selection.getRangeAt(0);
 	    var span = document.createElement('span');
-	    span.style[property] = value;
+	    applyInlineStyleProperty(span, property, value);
 	    if (!span.getAttribute('style')) return false;
 	    try {
 	      range.surroundContents(span);
@@ -2384,7 +2425,7 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
       insertionGuide.style.height = rect.height + 'px';
       insertionGuide.style.background = 'color-mix(in srgb, var(--design-editor-accent-color) 14%, transparent)';
       insertionGuide.style.border = '2px solid var(--design-editor-accent-color)';
-      insertionGuide.style.borderRadius = '4px';
+      insertionGuide.style.borderRadius = '2px';
       insertionGuide.style.boxShadow = 'none';
       return;
     }
@@ -2905,6 +2946,17 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
     shieldOverlay.addEventListener(type, stopNativeInteraction, true);
   });
 
+  function stopBlockedLayerInteraction(e) {
+    if (isOverlayElement(e.target)) return;
+    var target = e.target && e.target.nodeType === 1 ? e.target : null;
+    if (!target || !isLayerInteractionBlocked(target)) return;
+    stopNativeInteraction(e);
+  }
+
+  ['pointerdown','pointerup','mousedown','mouseup','click','auxclick'].forEach(function(type) {
+    document.addEventListener(type, stopBlockedLayerInteraction, true);
+  });
+
   shieldOverlay.addEventListener('click', selectElementAtEvent, true);
   shieldOverlay.addEventListener('contextmenu', openContextMenuAtEvent, true);
   selectionOverlay.addEventListener('contextmenu', openContextMenuAtEvent, true);
@@ -3123,6 +3175,11 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
   window.addEventListener('message', function(e) {
     if (e.source !== window.parent) return;
     if (!e.data) return;
+    if (e.data.payload && typeof e.data.payload === 'object') {
+      Object.keys(e.data.payload).forEach(function(key) {
+        if (e.data[key] === undefined) e.data[key] = e.data.payload[key];
+      });
+    }
     if (e.data.type === 'set-editor-chrome-scale') {
       // Live-update the constant-size chrome scale WITHOUT rebuilding srcdoc.
       // Rebuilding srcdoc reloads the iframe and flashes the content white.
@@ -3211,6 +3268,7 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
       if (selectedEl && isLayerInteractionBlocked(selectedEl)) {
         selectedEl = null;
         selectionOverlay.style.display = 'none';
+        clearComponentTag();
       }
       if (hoveredEl && isLayerInteractionBlocked(hoveredEl)) {
         hoveredEl = null;
@@ -3242,7 +3300,11 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
 	      return;
 	    }
 	    if (e.data.type === 'replace-document-content') {
-	      replaceRuntimeDocument(e.data.content, e.data.selectedSelector, e.data.selectorCandidates);
+	      replaceRuntimeDocument(
+	        e.data.content,
+	        e.data.forceFullDocument ? '' : e.data.selectedSelector,
+	        e.data.forceFullDocument ? [] : e.data.selectorCandidates
+	      );
 	      return;
 	    }
 	    if (e.data.type === 'delete-element') {
@@ -3253,13 +3315,63 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
 	    var sel = e.data.selector;
 	    var prop = e.data.property;
 	    var val = e.data.value;
-	    var el = sel ? document.querySelector(sel) : null;
-	    if (activeTextEditEl && el === activeTextEditEl && applyTextRangeStyle(prop, val)) {
+	    var candidatesForStyle = Array.isArray(e.data.selectorCandidates) ? e.data.selectorCandidates : [];
+	    if (sel && candidatesForStyle.indexOf(String(sel)) === -1) candidatesForStyle.push(String(sel));
+	    if (e.data.nodeId) {
+	      candidatesForStyle.push('[data-agent-native-node-id="' + String(e.data.nodeId).replace(/"/g, '\\\\"') + '"]');
+	    }
+	    var el = findRuntimeTarget(String(sel || ''), candidatesForStyle);
+	    if (prop && activeTextEditEl && el === activeTextEditEl && applyTextRangeStyle(prop, val)) {
 	      postTextContentChange(activeTextEditEl, activeTextEditEl.textContent || '', activeTextEditEl.innerHTML || '');
 	      refreshOverlays();
 	      return;
 	    }
-	    if (el) el.style[prop] = val;
+	    if (!el) return;
+	    var didPatchDom = false;
+	    var attributeOverrides = e.data.attributeOverrides;
+	    if (attributeOverrides && typeof attributeOverrides === 'object' && !Array.isArray(attributeOverrides)) {
+	      Object.keys(attributeOverrides).forEach(function(name) {
+	        if (!/^(?!on)[a-zA-Z][a-zA-Z0-9:_.-]*$/i.test(name)) return;
+	        var nextValue = attributeOverrides[name];
+	        if (nextValue === null || nextValue === undefined || nextValue === false) {
+	          el.removeAttribute(name);
+	        } else {
+	          el.setAttribute(name, String(nextValue));
+	        }
+	        didPatchDom = true;
+	      });
+	    }
+	    var classEdit = e.data.classEdit;
+	    if (classEdit && typeof classEdit === 'object') {
+	      var currentClass = (el.getAttribute('class') || '').trim().split(/\\s+/).filter(Boolean);
+	      var nextClass = currentClass.slice();
+	      if (classEdit.operation === 'replace' && classEdit.from && classEdit.to) {
+	        var replaced = false;
+	        nextClass = currentClass.map(function(token) {
+	          if (token === classEdit.from) {
+	            replaced = true;
+	            return String(classEdit.to);
+	          }
+	          return token;
+	        });
+	        if (!replaced && nextClass.indexOf(String(classEdit.to)) === -1) nextClass.push(String(classEdit.to));
+	        didPatchDom = true;
+	      } else if (classEdit.operation === 'add' && classEdit.className) {
+	        if (nextClass.indexOf(String(classEdit.className)) === -1) nextClass.push(String(classEdit.className));
+	        didPatchDom = true;
+	      } else if (classEdit.operation === 'remove' && classEdit.className) {
+	        nextClass = currentClass.filter(function(token) { return token !== String(classEdit.className); });
+	        didPatchDom = true;
+	      }
+	      if (didPatchDom) el.setAttribute('class', nextClass.join(' '));
+	    }
+	    if (prop && typeof prop === 'string') {
+	      applyInlineStyleProperty(el, prop, val);
+	      didPatchDom = true;
+	    }
+	    if (didPatchDom) {
+	      refreshOverlays();
+	    }
 	  });
 
   window.addEventListener('scroll', refreshOverlays, true);
@@ -3590,7 +3702,8 @@ export function DesignCanvas({
   });
 
   // Build the srcdoc. The tweak bridge ALWAYS goes in so the panel works
-  // outside Edit mode. The editor chrome bridge is omitted only for Interact.
+  // outside Edit mode. The editor chrome bridge is omitted for Interact and
+  // read-only surfaces so preview/app users can interact with the app normally.
   const srcdoc = useMemo(() => {
     if (externalPreviewUrl) return undefined;
     const editorChromeBridge =
@@ -4074,11 +4187,23 @@ export function DesignCanvas({
   }, [editorChromeScaleX, editorChromeScaleY]);
 
   const sendStyleChange = useCallback(
-    (selector: string, property: string, value: string) => {
+    (
+      selector: string,
+      property: string,
+      value: string,
+      options?: { selectorCandidates?: string[]; nodeId?: string | null },
+    ) => {
       const iframe = iframeRef.current;
       if (!iframe?.contentWindow) return;
       iframe.contentWindow.postMessage(
-        { type: "style-change", selector, property, value },
+        {
+          type: "style-change",
+          selector,
+          property,
+          value,
+          selectorCandidates: options?.selectorCandidates ?? [],
+          nodeId: options?.nodeId ?? "",
+        },
         "*",
       );
     },

package/corpus/templates/design/app/components/design/DesignExtensionsPanel.tsx

@@ -26,7 +26,7 @@ import {
   IconSparkles,
 } from "@tabler/icons-react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
@@ -86,6 +86,8 @@ export interface DesignExtensionSlotContext extends Record<string, unknown> {
   mode: string;
   activeTool: string;
   tweakValues: Record<string, string | number | boolean>;
+  onShaderFillPreview?: (descriptor: ShaderDescriptor, css: string) => void;
+  onShaderFillPreviewClear?: () => void;
 }
 
 interface DesignExtensionsPanelProps {
@@ -447,6 +449,20 @@ interface ShaderFillsExtPanelProps {
 
 function ShaderFillsExtPanel({ context }: ShaderFillsExtPanelProps) {
   const [showShaders, setShowShaders] = useState(false);
+  const clearPreviewRef = useRef(context.onShaderFillPreviewClear);
+  useEffect(() => {
+    clearPreviewRef.current = context.onShaderFillPreviewClear;
+  }, [context.onShaderFillPreviewClear]);
+  useEffect(
+    () => () => {
+      clearPreviewRef.current?.();
+    },
+    [],
+  );
+  const closeShaders = () => {
+    context.onShaderFillPreviewClear?.();
+    setShowShaders(false);
+  };
   // The most recently previewed descriptor — Apply persists exactly this one,
   // so the write is intentional (one atomic call) rather than firing on every
   // slider tweak.
@@ -535,14 +551,15 @@ function ShaderFillsExtPanel({ context }: ShaderFillsExtPanelProps) {
   return (
     <div className="flex flex-col">
       <ShaderFillsPanel
-        onApply={(descriptor, _css) => {
+        onApply={(descriptor, css) => {
           // Preview only: ShaderFillsPanel fires apply-shader (planning/codegen)
           // for agent context on every tune and the iframe shows the gradient.
           // We just record the latest descriptor here; the explicit Apply
           // button below performs the single intentional persist write.
           setPreviewed(descriptor);
+          context.onShaderFillPreview?.(descriptor, css);
         }}
-        onBack={() => setShowShaders(false)}
+        onBack={closeShaders}
         applyContext={{
           designId: context.designId || undefined,
           fileId: context.activeFileId || undefined,