@agent-native/core 0.81.2 → 0.82.0

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

@@ -374,6 +374,8 @@ interface DesignCanvasProps {
   designTitle?: string;
   /** Stable id for comment pins, usually scoped to the active screen. */
   commentContextId?: string;
+  /** Stable id of the screen containing this canvas when rendered in overview. */
+  screenId?: string;
   /** Human-readable label for comment-pin prompts. */
   commentContextLabel?: string;
   /**
@@ -506,6 +508,7 @@ export function DesignCanvas({
   designId,
   designTitle,
   commentContextId,
+  screenId,
   commentContextLabel,
   onPrototypeNavigate,
   motionTracks,
@@ -1098,7 +1101,10 @@ export function DesignCanvas({
   const beginTextEdit = useCallback((nodeId: string) => {
     const iframe = iframeRef.current;
     if (!iframe?.contentWindow || !nodeId) return;
-    iframe.contentWindow.postMessage({ type: "begin-text-edit", nodeId }, "*");
+    iframe.contentWindow.postMessage(
+      { type: "begin-text-edit", nodeId, force: true },
+      "*",
+    );
   }, []);
 
   const sendStyleChange = useCallback(
@@ -1342,6 +1348,7 @@ export function DesignCanvas({
             : "allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin"
         }
         data-design-preview-iframe
+        data-screen-iframe-id={screenId ?? undefined}
         data-design-source-type={
           sourceType ??
           (externalPreviewUrl

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

@@ -1000,7 +1000,11 @@ function LayerRow({
   const hideable = node.hideable !== false && Boolean(onToggleHidden);
   const dragEligible = selectable && !node.locked && !node.hidden;
   const draggable = dragEligible && Boolean(onMoveLayer);
-  const canDropInside = layerCanDropInside(node, hasChildren);
+  const canDropInside = layerCanDropInside(
+    node,
+    hasChildren,
+    canAcceptChildren,
+  );
   const activeDrop =
     dropIndicator?.targetId === node.id ? dropIndicator.placement : null;
   // Tracks whether the user pressed Escape to cancel rename so that the
@@ -1868,9 +1872,14 @@ function ElementLayerGlyph({ className }: { className?: string }) {
   );
 }
 
-function layerCanDropInside(node: LayersPanelNode, hasChildren: boolean) {
+function layerCanDropInside(
+  node: LayersPanelNode,
+  hasChildren: boolean,
+  canAcceptChildren: boolean,
+) {
   return (
     hasChildren ||
+    canAcceptChildren ||
     Boolean(node.layout?.isFlexContainer || node.layout?.isGridContainer) ||
     node.type === "file" ||
     node.type === "screen" ||

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

@@ -3365,15 +3365,26 @@ export function MultiScreenCanvas({
     [flushPendingWheelGesture],
   );
 
-  const handleWheelEvent = useCallback(
-    (event: WheelEvent) => {
+  const enqueueWheelGestureFromClient = useCallback(
+    (args: {
+      deltaX: number;
+      deltaY: number;
+      deltaMode: number;
+      clientX: number;
+      clientY: number;
+      ctrlKey: boolean;
+      metaKey: boolean;
+      shiftKey: boolean;
+    }) => {
       const rect = surfaceRef.current?.getBoundingClientRect();
       if (!rect) return;
-      event.preventDefault();
-      event.stopPropagation();
-      const delta = getWheelDelta(event);
+      const delta = getWheelDeltaFromValues(
+        args.deltaX,
+        args.deltaY,
+        args.deltaMode,
+      );
 
-      if (event.ctrlKey || event.metaKey) {
+      if (args.ctrlKey || args.metaKey) {
         const zoomDeltaY = clamp(
           delta.y,
           -MAX_WHEEL_ZOOM_DELTA,
@@ -3382,20 +3393,23 @@ export function MultiScreenCanvas({
         enqueueWheelGesture({
           mode: "zoom",
           deltaY: zoomDeltaY,
-          cursor: { x: event.clientX - rect.left, y: event.clientY - rect.top },
-          clientX: event.clientX,
-          clientY: event.clientY,
+          cursor: {
+            x: args.clientX - rect.left,
+            y: args.clientY - rect.top,
+          },
+          clientX: args.clientX,
+          clientY: args.clientY,
         });
         return;
       }
 
       const deltaX = clamp(
-        event.shiftKey && delta.x === 0 ? delta.y : delta.x,
+        args.shiftKey && delta.x === 0 ? delta.y : delta.x,
         -MAX_WHEEL_PAN_DELTA,
         MAX_WHEEL_PAN_DELTA,
       );
       const deltaY = clamp(
-        event.shiftKey && delta.x === 0 ? 0 : delta.y,
+        args.shiftKey && delta.x === 0 ? 0 : delta.y,
         -MAX_WHEEL_PAN_DELTA,
         MAX_WHEEL_PAN_DELTA,
       );
@@ -3404,6 +3418,24 @@ export function MultiScreenCanvas({
     [enqueueWheelGesture],
   );
 
+  const handleWheelEvent = useCallback(
+    (event: WheelEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      enqueueWheelGestureFromClient({
+        deltaX: event.deltaX,
+        deltaY: event.deltaY,
+        deltaMode: event.deltaMode,
+        clientX: event.clientX,
+        clientY: event.clientY,
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+        shiftKey: event.shiftKey,
+      });
+    },
+    [enqueueWheelGestureFromClient],
+  );
+
   useEffect(() => {
     const surface = surfaceRef.current;
     if (!surface) return;
@@ -3418,6 +3450,44 @@ export function MultiScreenCanvas({
     };
   }, [handleWheelEvent]);
 
+  useEffect(() => {
+    const handleEmbeddedWheelMessage = (event: MessageEvent) => {
+      if (!event.data || event.data.type !== "embedded-canvas-wheel") return;
+      const surface = surfaceRef.current;
+      if (!surface) return;
+      const sourceIframe = Array.from(
+        surface.querySelectorAll<HTMLIFrameElement>(
+          "iframe[data-design-preview-iframe]",
+        ),
+      ).find((iframe) => iframe.contentWindow === event.source);
+      if (!sourceIframe) return;
+
+      const rect = sourceIframe.getBoundingClientRect();
+      const scaleX =
+        sourceIframe.clientWidth > 0
+          ? rect.width / sourceIframe.clientWidth
+          : 1;
+      const scaleY =
+        sourceIframe.clientHeight > 0
+          ? rect.height / sourceIframe.clientHeight
+          : 1;
+      enqueueWheelGestureFromClient({
+        deltaX: Number(event.data.deltaX) || 0,
+        deltaY: Number(event.data.deltaY) || 0,
+        deltaMode: Number(event.data.deltaMode) || WheelEvent.DOM_DELTA_PIXEL,
+        clientX: rect.left + (Number(event.data.clientX) || 0) * scaleX,
+        clientY: rect.top + (Number(event.data.clientY) || 0) * scaleY,
+        ctrlKey: Boolean(event.data.ctrlKey),
+        metaKey: Boolean(event.data.metaKey),
+        shiftKey: Boolean(event.data.shiftKey),
+      });
+    };
+
+    window.addEventListener("message", handleEmbeddedWheelMessage);
+    return () =>
+      window.removeEventListener("message", handleEmbeddedWheelMessage);
+  }, [enqueueWheelGestureFromClient]);
+
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (activePenPathRef.current) return;
@@ -6060,12 +6130,15 @@ function getSelectableBounds(geometry: FrameGeometry): BoundsRect {
   };
 }
 
-function getWheelDelta(event: WheelEvent) {
-  const multiplier =
-    event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 800 : 1;
+function getWheelDeltaFromValues(
+  deltaX: number,
+  deltaY: number,
+  deltaMode: number,
+) {
+  const multiplier = deltaMode === 1 ? 16 : deltaMode === 2 ? 800 : 1;
   return {
-    x: event.deltaX * multiplier,
-    y: event.deltaY * multiplier,
+    x: deltaX * multiplier,
+    y: deltaY * multiplier,
   };
 }
 

package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts

@@ -3468,17 +3468,20 @@ declare var __EDITOR_CHROME_SCALE_Y__: string;
     }
   }
 
-  function beginTextEditingFromEvent(e) {
+  function beginTextEditingFromEvent(e, forceTextEditing) {
     if (activeTextEditEl && e.target && activeTextEditEl.contains(e.target))
       return;
-    if (!textEditingEnabled) {
+    if (!textEditingEnabled && !forceTextEditing) {
       stopNativeInteraction(e);
       return;
     }
     stopNativeInteraction(e);
-    var target = findTextEditTarget(
-      elementFromEditorPoint(e.clientX, e.clientY),
-    );
+    var eventTarget =
+      e && e.target && e.target.nodeType === 1 ? e.target : null;
+    var target =
+      findTextEditTarget(elementFromEditorPoint(e.clientX, e.clientY)) ||
+      findTextEditTarget(eventTarget) ||
+      eventTarget;
     if (!target || target.nodeType !== 1) return;
     // Anchor the selection identity to the nearest source-backed element. Text
     // editing still operates on the actual target text node, but a later
@@ -3725,7 +3728,8 @@ declare var __EDITOR_CHROME_SCALE_Y__: string;
     // text-element creation so the user can type right away and the autosize
     // CSS (width:max-content or similar) takes effect from the first keystroke.
     if (e.data.type === "begin-text-edit") {
-      if (readOnly || !textEditingEnabled) return;
+      var forceBeginTextEdit = e.data.force === true;
+      if ((readOnly || !textEditingEnabled) && !forceBeginTextEdit) return;
       var nodeId: string =
         typeof e.data.nodeId === "string" ? e.data.nodeId : "";
       if (!nodeId) return;
@@ -3749,14 +3753,17 @@ declare var __EDITOR_CHROME_SCALE_Y__: string;
       var bteCenterY = bteRect.top + bteRect.height / 2;
       // Delegate to the canonical path so all state, events, and postMessages
       // stay consistent with a normal double-click text edit.
-      beginTextEditingFromEvent({
-        clientX: bteCenterX,
-        clientY: bteCenterY,
-        target: textTarget,
-        preventDefault: function () {},
-        stopPropagation: function () {},
-        stopImmediatePropagation: function () {},
-      } as unknown as MouseEvent);
+      beginTextEditingFromEvent(
+        {
+          clientX: bteCenterX,
+          clientY: bteCenterY,
+          target: textTarget,
+          preventDefault: function () {},
+          stopPropagation: function () {},
+          stopImmediatePropagation: function () {},
+        } as unknown as MouseEvent,
+        forceBeginTextEdit,
+      );
       return;
     }
     if (e.data.type === "set-editor-chrome-scale") {