@agent-native/core 0.80.4 → 0.80.5

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

@@ -902,7 +902,11 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
     var key = e.key;
     var normalized = key && key.length === 1 ? key.toLowerCase() : key;
     var primary = e.metaKey || e.ctrlKey;
-    if (key === 'Escape' || key === 'Enter' || key === 'Tab') return true;
+    if (key === 'Escape' || key === 'Enter') return true;
+    // Forward Tab only when an element is actively selected so the iframe does
+    // not intercept Tab when the user is tabbing through browser UI with nothing
+    // selected (preserves native keyboard accessibility).
+    if (key === 'Tab') return !!selectedEl;
     if (key === 'Delete' || key === 'Backspace') return !primary;
     if (/^Arrow/.test(key || '')) return !e.altKey;
     if (primary) {
@@ -955,7 +959,11 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
 
   function isInlineEditableDescendant(el) {
     if (!el || !el.tagName) return false;
+    // Allowlist covers inline markup AND common block-level text containers
+    // (p, h1-h6, li, etc.) so that paragraphs with inline markup like
+    // <p>Hello <strong>world</strong></p> can be double-click edited.
     return [
+      // Inline formatting
       'a',
       'abbr',
       'b',
@@ -972,7 +980,25 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
       'sup',
       'time',
       'u',
-      'wbr'
+      'wbr',
+      // Block-level text containers
+      'p',
+      'h1',
+      'h2',
+      'h3',
+      'h4',
+      'h5',
+      'h6',
+      'li',
+      'ul',
+      'ol',
+      'dl',
+      'dt',
+      'dd',
+      'label',
+      'caption',
+      'td',
+      'th'
     ].indexOf(el.tagName.toLowerCase()) !== -1;
   }
 
@@ -999,14 +1025,27 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
       if (selectedEl && node === selectedEl) break;
       node = node.parentElement;
     }
-    return candidate || hit;
+    // Return null (not the raw hit) when no text-editable ancestor is found.
+    // Falling back to the raw hit element makes non-text nodes like <img> or
+    // <canvas> contenteditable, which leaves the editor in a broken state.
+    return candidate || null;
   }
 
   function selectElementAtEvent(e) {
     stopNativeInteraction(e);
     blurActiveTextEditor();
+    // Suppress the first click in a double-click sequence — the dblclick
+    // handler (beginTextEditingFromEvent) will fire immediately after and a
+    // spurious element-select would cause inspector flicker.
+    if (e.detail >= 2) return;
     var target = elementFromEditorPoint(e.clientX, e.clientY);
-    if (!target) return;
+    if (!target || target === document.body || target === document.documentElement) {
+      // Click on empty canvas: clear the current selection (matches Figma).
+      selectedEl = null;
+      selectionOverlay.style.display = 'none';
+      window.parent.postMessage({ type: 'clear-selection' }, '*');
+      return;
+    }
     selectedEl = target;
     var info = getElementInfo(selectedEl);
     positionOverlay(selectionOverlay, selectedEl);
@@ -1225,7 +1264,12 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
   function parentFlowAxis(parent) {
     var cs = window.getComputedStyle(parent);
     if (cs.display === 'flex' || cs.display === 'inline-flex') {
-      return cs.flexDirection && cs.flexDirection.indexOf('row') === 0 ? 'x' : 'y';
+      var isRow = cs.flexDirection && cs.flexDirection.indexOf('row') === 0;
+      // Wrapping row containers need Y-axis awareness for inter-row targeting;
+      // fall back to column-axis insertion so the heuristic picks the right row.
+      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;
@@ -1243,6 +1287,7 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
       hit !== document.documentElement &&
       hit !== el &&
       !el.contains(hit) &&
+      !hit.contains(el) &&
       !isOverlayElement(hit)
     ) {
       var hitChildren = draggableElementChildren(hit).filter(function(child) {
@@ -1383,10 +1428,13 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
       window.parent.postMessage({ type: 'element-select', payload: getElementInfo(selectedEl) }, '*');
     }
     if (isFlowReorderCandidate(selectedEl)) {
-      var currentTarget = reorderTargetForPoint(selectedEl, e.clientX, e.clientY);
+      // Snapshot the element being reordered so a concurrent select-element or
+      // clear-selection postMessage cannot mutate the wrong element mid-drag.
+      var reorderEl = selectedEl;
+      var currentTarget = reorderTargetForPoint(reorderEl, e.clientX, e.clientY);
       showInsertionGuideFor(currentTarget);
       function onReorderMove(ev) {
-        currentTarget = reorderTargetForPoint(selectedEl, ev.clientX, ev.clientY);
+        currentTarget = reorderTargetForPoint(reorderEl, ev.clientX, ev.clientY);
         showInsertionGuideFor(currentTarget);
         showTransformBadge(currentTarget ? 'Move layer' : 'Move', ev.clientX, ev.clientY);
       }
@@ -1395,12 +1443,27 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
         document.removeEventListener('mouseup', onReorderUp, true);
 	        hideTransformBadge();
 	        hideInsertionGuide();
-	        if (!currentTarget) return;
+	        if (!currentTarget) {
+	          // No valid drop target — clean up the clone if one was inserted so
+	          // no ghost element is left in the DOM.
+	          if (duplicatedForDrag && reorderEl && reorderEl !== originalSelectedEl) {
+	            if (reorderEl.parentElement) reorderEl.parentElement.removeChild(reorderEl);
+	            selectedEl = originalSelectedEl;
+	            positionOverlay(selectionOverlay, selectedEl);
+	            window.parent.postMessage({ type: 'element-select', payload: getElementInfo(selectedEl) }, '*');
+	          }
+	          return;
+	        }
 	        if (duplicatedForDrag) {
-	          applyRuntimeReorder(selectedEl, currentTarget);
-	          postVisualDuplicateChange(originalSelectedEl, selectedEl, currentTarget);
+	          applyRuntimeReorder(reorderEl, currentTarget);
+	          postVisualDuplicateChange(originalSelectedEl, reorderEl, currentTarget);
+	        } else {
+	          // Optimistically apply the reorder in the DOM for immediate
+	          // visual feedback; the visual-structure-ack handler will confirm
+	          // or revert once the parent processes the change.
+	          applyRuntimeReorder(reorderEl, currentTarget);
+	          postVisualStructureChange(reorderEl, currentTarget);
 	        }
-	        else postVisualStructureChange(selectedEl, currentTarget);
 	      }
       document.addEventListener('mousemove', onReorderMove, true);
       document.addEventListener('mouseup', onReorderUp, true);
@@ -1412,11 +1475,15 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
     var originTop = readPx(selectedEl.style.top || cs.top);
     var startX = e.clientX;
     var startY = e.clientY;
+    // Snapshot the element being moved so that a concurrent select-element or
+    // clear-selection postMessage cannot swap selectedEl mid-drag and cause
+    // mutations on the wrong element or a null-deref in onUp.
+    var dragEl = selectedEl;
     function onMove(ev) {
       var nextLeft = originLeft + ev.clientX - startX;
       var nextTop = originTop + ev.clientY - startY;
-      selectedEl.style.left = Math.round(nextLeft) + 'px';
-      selectedEl.style.top = Math.round(nextTop) + 'px';
+      dragEl.style.left = Math.round(nextLeft) + 'px';
+      dragEl.style.top = Math.round(nextTop) + 'px';
       showTransformBadge('X ' + Math.round(nextLeft) + '  Y ' + Math.round(nextTop), ev.clientX, ev.clientY);
       refreshOverlays();
     }
@@ -1424,14 +1491,20 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
       document.removeEventListener('mousemove', onMove, true);
       document.removeEventListener('mouseup', onUp, true);
       hideTransformBadge();
+      if (!dragEl) return;
       if (duplicatedForDrag) {
-        postVisualDuplicateChange(originalSelectedEl, selectedEl);
+        postVisualDuplicateChange(originalSelectedEl, dragEl);
       } else {
-        postVisualStyleChange({
-          position: selectedEl.style.position,
-          left: selectedEl.style.left,
-          top: selectedEl.style.top,
-        });
+        window.parent.postMessage({
+          type: 'visual-style-change',
+          selector: getSelector(dragEl),
+          styles: {
+            position: dragEl.style.position,
+            left: dragEl.style.left,
+            top: dragEl.style.top,
+          },
+          payload: getElementInfo(dragEl),
+        }, '*');
       }
     }
     document.addEventListener('mousemove', onMove, true);
@@ -1445,15 +1518,23 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
     e.stopPropagation();
     ensurePositionable(selectedEl);
     var cs = window.getComputedStyle(selectedEl);
+    // Bug fix: use CSS width/height (not getBoundingClientRect) for the resize
+    // origin dimensions so that rotated elements don't use the inflated
+    // axis-aligned bounding box as the starting size.
+    var originW = readPx(selectedEl.style.width || cs.width);
+    var originH = readPx(selectedEl.style.height || cs.height);
     var origin = {
       left: readPx(selectedEl.style.left || cs.left),
       top: readPx(selectedEl.style.top || cs.top),
-      width: selectedEl.getBoundingClientRect().width,
-      height: selectedEl.getBoundingClientRect().height,
-      ratio: selectedEl.getBoundingClientRect().width / Math.max(1, selectedEl.getBoundingClientRect().height),
+      width: originW,
+      height: originH,
+      ratio: originW / Math.max(1, originH),
     };
     var startX = e.clientX;
     var startY = e.clientY;
+    // Snapshot the element so a concurrent clear-selection postMessage cannot
+    // cause a null-deref in onMove/onUp.
+    var resizeEl = selectedEl;
     function nextRect(ev) {
       var dx = ev.clientX - startX;
       var dy = ev.clientY - startY;
@@ -1471,12 +1552,32 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
         height = origin.height - dy;
       }
       if (handle.indexOf('s') !== -1) height = origin.height + dy;
-      width = Math.max(8, width);
-      height = Math.max(8, height);
-      if ((ev.shiftKey || scaleToolEnabled) && handle.length === 2) {
+      // Apply Shift / scaleToolEnabled aspect-ratio lock BEFORE the min-size
+      // clamp so the ratio is computed from unclamped values (bug fix).
+      if (ev.shiftKey && handle.length === 2) {
         if (Math.abs(dx) > Math.abs(dy)) height = width / origin.ratio;
         else width = height * origin.ratio;
       }
+      if (scaleToolEnabled) {
+        // Scale tool: enforce aspect ratio on all 8 handles, not just corners.
+        if (handle === 'e' || handle === 'w') {
+          height = width / origin.ratio;
+        } else if (handle === 'n' || handle === 's') {
+          width = height * origin.ratio;
+        } else if (handle.length === 2) {
+          if (Math.abs(dx) > Math.abs(dy)) height = width / origin.ratio;
+          else width = height * origin.ratio;
+        }
+      }
+      // Clamp after ratio correction.
+      var rawWidth = width;
+      var rawHeight = height;
+      width = Math.max(8, width);
+      height = Math.max(8, height);
+      // Re-anchor the pinned edge for w/n handles after clamping so the
+      // opposite edge doesn't drift when the element hits minimum size.
+      if (handle.indexOf('w') !== -1) left += (rawWidth - width);
+      if (handle.indexOf('n') !== -1) top += (rawHeight - height);
       if (ev.altKey) {
         if (handle.indexOf('w') !== -1 || handle.indexOf('e') !== -1) left = origin.left - (width - origin.width) / 2;
         if (handle.indexOf('n') !== -1 || handle.indexOf('s') !== -1) top = origin.top - (height - origin.height) / 2;
@@ -1484,11 +1585,12 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
       return { left: left, top: top, width: width, height: height };
     }
     function onMove(ev) {
+      if (!resizeEl) return;
       var rect = nextRect(ev);
-      selectedEl.style.left = Math.round(rect.left) + 'px';
-      selectedEl.style.top = Math.round(rect.top) + 'px';
-      selectedEl.style.width = Math.round(rect.width) + 'px';
-      selectedEl.style.height = Math.round(rect.height) + 'px';
+      resizeEl.style.left = Math.round(rect.left) + 'px';
+      resizeEl.style.top = Math.round(rect.top) + 'px';
+      resizeEl.style.width = Math.round(rect.width) + 'px';
+      resizeEl.style.height = Math.round(rect.height) + 'px';
       showTransformBadge(Math.round(rect.width) + ' x ' + Math.round(rect.height), ev.clientX, ev.clientY);
       refreshOverlays();
     }
@@ -1496,13 +1598,19 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
       document.removeEventListener('mousemove', onMove, true);
       document.removeEventListener('mouseup', onUp, true);
       hideTransformBadge();
-      postVisualStyleChange({
-        position: selectedEl.style.position,
-        left: selectedEl.style.left,
-        top: selectedEl.style.top,
-        width: selectedEl.style.width,
-        height: selectedEl.style.height,
-      });
+      if (!resizeEl) return;
+      window.parent.postMessage({
+        type: 'visual-style-change',
+        selector: getSelector(resizeEl),
+        styles: {
+          position: resizeEl.style.position,
+          left: resizeEl.style.left,
+          top: resizeEl.style.top,
+          width: resizeEl.style.width,
+          height: resizeEl.style.height,
+        },
+        payload: getElementInfo(resizeEl),
+      }, '*');
     }
     document.addEventListener('mousemove', onMove, true);
     document.addEventListener('mouseup', onUp, true);
@@ -1513,16 +1621,22 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
     if (isLayerInteractionBlocked(selectedEl)) return;
     e.preventDefault();
     e.stopPropagation();
+    // getBoundingClientRect is correct here — we only need the element center
+    // for angle math, and the element's visual position is what we want.
     var rect = selectedEl.getBoundingClientRect();
     var center = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
     var originAngle = Math.atan2(e.clientY - center.y, e.clientX - center.x) * 180 / Math.PI;
     var originRotation = currentRotation(selectedEl);
+    // Snapshot so a concurrent clear-selection postMessage cannot cause a
+    // null-deref in onMove/onUp.
+    var rotateEl = selectedEl;
     function onMove(ev) {
+      if (!rotateEl) return;
       var pointerAngle = Math.atan2(ev.clientY - center.y, ev.clientX - center.x) * 180 / Math.PI;
       var next = originRotation + pointerAngle - originAngle;
       if (ev.shiftKey) next = Math.round(next / 15) * 15;
       next = Math.round(next);
-      selectedEl.style.transform = mergeRotation(selectedEl, next);
+      rotateEl.style.transform = mergeRotation(rotateEl, next);
       showTransformBadge(next + 'deg', ev.clientX, ev.clientY);
       refreshOverlays();
     }
@@ -1530,9 +1644,13 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
       document.removeEventListener('mousemove', onMove, true);
       document.removeEventListener('mouseup', onUp, true);
       hideTransformBadge();
-      postVisualStyleChange({
-        transform: selectedEl.style.transform,
-      });
+      if (!rotateEl) return;
+      window.parent.postMessage({
+        type: 'visual-style-change',
+        selector: getSelector(rotateEl),
+        styles: { transform: rotateEl.style.transform },
+        payload: getElementInfo(rotateEl),
+      }, '*');
     }
     document.addEventListener('mousemove', onMove, true);
     document.addEventListener('mouseup', onUp, true);
@@ -2531,7 +2649,7 @@ export function DesignCanvas({
         sandbox={
           externalPreviewUrl
             ? "allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin"
-            : "allow-scripts allow-popups allow-popups-to-escape-sandbox"
+            : "allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin"
         }
         data-design-preview-iframe
         className="block h-full w-full border-0 bg-transparent"

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

@@ -16,6 +16,7 @@ import {
 } from "@tabler/icons-react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
+import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -207,7 +208,7 @@ export function DesignExtensionsPanel({
   const installExtension = async (extensionId: string) => {
     setInstallingId(extensionId);
     try {
-      await fetch(
+      const res = await fetch(
         agentNativePath(
           `/_agent-native/slots/${encodeURIComponent(slotId)}/install`,
         ),
@@ -217,20 +218,23 @@ export function DesignExtensionsPanel({
           body: JSON.stringify({ extensionId }),
         },
       );
-    } finally {
-      setInstallingId(null);
+      if (!res.ok) throw new Error(`Install failed: ${res.status}`);
       queryClient.invalidateQueries({
         queryKey: ["design-editor-extension-slot"],
       });
       queryClient.invalidateQueries({
         queryKey: ["design-editor-extension-slot-available"],
       });
+    } catch {
+      toast.error(t("designEditor.extensionsInstallError"));
+    } finally {
+      setInstallingId(null);
     }
   };
 
   return (
     <div className={cn("flex min-h-0 flex-1 flex-col", className)}>
-      {/* Section header — 32 px tall, matches PanelSection / Figma inspector headers */}
+      {/* Section header — 32 px tall, matches PanelSection / design inspector headers */}
       <div className="flex min-h-8 shrink-0 items-center gap-1.5 border-b border-border/60 px-3">
         <h3 className="min-w-0 flex-1 truncate text-xs font-semibold text-foreground">
           {t("designEditor.extensions")}

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

@@ -172,56 +172,51 @@ export function DrawOverlay({ visible, onQueue, onSend }: DrawOverlayProps) {
   const queueDrawing = () => {
     if (strokes.length === 0) return;
 
-    // Convert strokes to SVG path data
-    const pathData = strokes
-      .map((s) => {
-        const d = s.points
-          .map(
-            (p, i) =>
-              `${i === 0 ? "M" : "L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`,
-          )
-          .join(" ");
-        return d;
-      })
-      .join(" ");
+    // Convert each stroke into its own annotation to preserve per-stroke color/lineWidth
+    const newAnnotations: DrawAnnotation[] = strokes.map((s) => {
+      const pathData = s.points
+        .map(
+          (p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`,
+        )
+        .join(" ");
+      return {
+        id: crypto.randomUUID(),
+        type: "path",
+        pathData,
+        position: { x: 0, y: 0 },
+        color: s.color,
+        lineWidth: s.lineWidth,
+      };
+    });
 
-    const annotation: DrawAnnotation = {
-      id: crypto.randomUUID(),
-      type: "path",
-      pathData,
-      position: { x: 0, y: 0 },
-      color,
-      lineWidth,
-    };
-    onQueue(annotation);
-    setQueued((prev) => [...prev, annotation]);
+    for (const annotation of newAnnotations) {
+      onQueue(annotation);
+    }
+    setQueued((prev) => [...prev, ...newAnnotations]);
     setStrokes([]);
   };
 
   const sendAll = () => {
-    // Queue current drawing first if any
+    // Queue current drawing first if any; preserve per-stroke color/lineWidth
     let allAnnotations = [...queued];
     if (strokes.length > 0) {
-      const pathData = strokes
-        .map((s) => {
-          const d = s.points
-            .map(
-              (p, i) =>
-                `${i === 0 ? "M" : "L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`,
-            )
-            .join(" ");
-          return d;
-        })
-        .join(" ");
-
-      allAnnotations.push({
-        id: crypto.randomUUID(),
-        type: "path",
-        pathData,
-        position: { x: 0, y: 0 },
-        color,
-        lineWidth,
+      const strokeAnnotations: DrawAnnotation[] = strokes.map((s) => {
+        const pathData = s.points
+          .map(
+            (p, i) =>
+              `${i === 0 ? "M" : "L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`,
+          )
+          .join(" ");
+        return {
+          id: crypto.randomUUID(),
+          type: "path",
+          pathData,
+          position: { x: 0, y: 0 },
+          color: s.color,
+          lineWidth: s.lineWidth,
+        };
       });
+      allAnnotations = [...allAnnotations, ...strokeAnnotations];
     }
 
     if (allAnnotations.length > 0) {