@agent-native/core 0.80.6 → 0.80.8

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

@@ -480,7 +480,7 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
         mixBlendMode: cs.mixBlendMode,
         zIndex: cs.zIndex,
       },
-      boundingRect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+      boundingRect: { x: rect.x + (window.scrollX || window.pageXOffset || 0), y: rect.y + (window.scrollY || window.pageYOffset || 0), width: rect.width, height: rect.height },
       textContent: el.textContent ? el.textContent.slice(0, 200) : undefined,
       htmlContent: el.innerHTML && el.innerHTML !== el.textContent ? el.innerHTML.slice(0, 4000) : undefined,
       isFlexContainer: cs.display === 'flex' || cs.display === 'inline-flex',
@@ -789,13 +789,34 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
       overlay.style.display = 'none';
       return;
     }
+    // For the selection overlay, prefer the CSS box + rotation transform so
+    // the handles hug the rotated element rather than its inflated AABB.
+    if (overlay === selectionOverlay) {
+      var elCs = window.getComputedStyle(el);
+      var elLeft = readPx(el.style.left || elCs.left);
+      var elTop = readPx(el.style.top || elCs.top);
+      var elW = readPx(el.style.width || elCs.width);
+      var elH = readPx(el.style.height || elCs.height);
+      var elRot = currentRotation(el);
+      // Convert element-local left/top to viewport coords by walking to the
+      // nearest positioned ancestor (same reference frame as getBoundingClientRect).
+      var parentRect = (el.offsetParent || document.documentElement).getBoundingClientRect();
+      overlay.style.display = 'block';
+      overlay.style.left = (parentRect.left + elLeft) + 'px';
+      overlay.style.top = (parentRect.top + elTop) + 'px';
+      overlay.style.width = elW + 'px';
+      overlay.style.height = elH + 'px';
+      overlay.style.transform = elRot ? 'rotate(' + elRot + 'deg)' : '';
+      overlay.style.transformOrigin = '0 0';
+      updatePaddingOverlay(el);
+      return;
+    }
     var rect = el.getBoundingClientRect();
     overlay.style.display = 'block';
     overlay.style.top = rect.top + 'px';
     overlay.style.left = rect.left + 'px';
     overlay.style.width = rect.width + 'px';
     overlay.style.height = rect.height + 'px';
-    if (overlay === selectionOverlay) updatePaddingOverlay(el);
   }
 
   function refreshOverlays() {
@@ -1381,10 +1402,10 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
     }
   }
 
-	  function postVisualStructureChange(el, target) {
+	  function postVisualStructureChange(el, target, origin) {
 	    if (!el || !target || !target.anchor) return;
 	    var requestId = 'move-' + Date.now() + '-' + Math.random().toString(16).slice(2);
-	    pendingStructureMove = { requestId: requestId, el: el, target: target };
+	    pendingStructureMove = { requestId: requestId, el: el, target: target, origin: origin || null };
 	    window.parent.postMessage({
 	      type: 'visual-structure-change',
 	      requestId: requestId,
@@ -1458,11 +1479,15 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
 	          applyRuntimeReorder(reorderEl, currentTarget);
 	          postVisualDuplicateChange(originalSelectedEl, reorderEl, currentTarget);
 	        } else {
+	          // Capture the pre-drag DOM anchor so we can revert if the parent
+	          // reports applied===false on the structure-ack.
+	          var prevParent = reorderEl.parentElement;
+	          var prevNextSibling = reorderEl.nextSibling;
 	          // 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);
+	          postVisualStructureChange(reorderEl, currentTarget, { prevParent: prevParent, prevNextSibling: prevNextSibling });
 	        }
 	      }
       document.addEventListener('mousemove', onReorderMove, true);
@@ -1479,7 +1504,12 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
     // clear-selection postMessage cannot swap selectedEl mid-drag and cause
     // mutations on the wrong element or a null-deref in onUp.
     var dragEl = selectedEl;
+    var moved = false;
+    var DRAG_THRESHOLD = 3;
     function onMove(ev) {
+      if (!moved && Math.hypot(ev.clientX - startX, ev.clientY - startY) > DRAG_THRESHOLD) {
+        moved = true;
+      }
       var nextLeft = originLeft + ev.clientX - startX;
       var nextTop = originTop + ev.clientY - startY;
       dragEl.style.left = Math.round(nextLeft) + 'px';
@@ -1492,6 +1522,14 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
       document.removeEventListener('mouseup', onUp, true);
       hideTransformBadge();
       if (!dragEl) return;
+      if (duplicatedForDrag && !moved) {
+        // Alt-click with no real drag — remove the premature clone and restore the original selection.
+        if (dragEl.parentElement) dragEl.parentElement.removeChild(dragEl);
+        selectedEl = originalSelectedEl;
+        positionOverlay(selectionOverlay, selectedEl);
+        window.parent.postMessage({ type: 'element-select', payload: getElementInfo(selectedEl) }, '*');
+        return;
+      }
       if (duplicatedForDrag) {
         postVisualDuplicateChange(originalSelectedEl, dragEl);
       } else {
@@ -1535,9 +1573,19 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
     // Snapshot the element so a concurrent clear-selection postMessage cannot
     // cause a null-deref in onMove/onUp.
     var resizeEl = selectedEl;
+    // Capture the element rotation once at drag-start so per-move projection is
+    // cheap and consistent even if the transform changes during the drag.
+    var resizeTheta = currentRotation(resizeEl) * Math.PI / 180;
     function nextRect(ev) {
-      var dx = ev.clientX - startX;
-      var dy = ev.clientY - startY;
+      var screenDx = ev.clientX - startX;
+      var screenDy = ev.clientY - startY;
+      // Project the screen-space pointer delta into the element's local
+      // (un-rotated) coordinate frame so handles behave relative to the
+      // visible rotated box rather than screen axes.
+      var cosT = Math.cos(resizeTheta);
+      var sinT = Math.sin(resizeTheta);
+      var dx = screenDx * cosT + screenDy * sinT;
+      var dy = -screenDx * sinT + screenDy * cosT;
       var left = origin.left;
       var top = origin.top;
       var width = origin.width;
@@ -1570,14 +1618,13 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
         }
       }
       // 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);
+      // Re-anchor the pinned edge for w/n handles after aspect-ratio lock and
+      // clamping so the opposite (e/s) edge stays fixed regardless of whether
+      // the dimension change was driven by raw dx/dy or by the ratio lock.
+      if (handle.indexOf('w') !== -1) left = origin.left + (origin.width - width);
+      if (handle.indexOf('n') !== -1) top = origin.top + (origin.height - 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;
@@ -1958,10 +2005,20 @@ const EDITOR_CHROME_BRIDGE_SCRIPT = `
 	      var move = pendingStructureMove;
 	      pendingStructureMove = null;
 	      if (e.data.applied) {
-	        applyRuntimeReorder(move.el, move.target);
-	        selectedEl = move.el;
-	        positionOverlay(selectionOverlay, selectedEl);
-	        window.parent.postMessage({ type: 'element-select', payload: getElementInfo(selectedEl) }, '*');
+	        if (move.el && move.el.isConnected) {
+	          applyRuntimeReorder(move.el, move.target);
+	          selectedEl = move.el;
+	          positionOverlay(selectionOverlay, selectedEl);
+	          window.parent.postMessage({ type: 'element-select', payload: getElementInfo(selectedEl) }, '*');
+	        }
+	      } else {
+	        // Revert the optimistic reorder to its pre-drag position.
+	        if (move.el && move.el.isConnected && move.origin && move.origin.prevParent && move.origin.prevParent.isConnected) {
+	          move.origin.prevParent.insertBefore(move.el, move.origin.prevNextSibling);
+	          selectedEl = move.el;
+	          positionOverlay(selectionOverlay, selectedEl);
+	          window.parent.postMessage({ type: 'element-select', payload: getElementInfo(selectedEl) }, '*');
+	        }
 	      }
 	      return;
 	    }
@@ -2660,6 +2717,7 @@ export function DesignCanvas({
         visible={!!drawMode}
         canvasInteractive={!pinMode}
         queuedAnnotationCount={queuedAnnotationPins.length}
+        zoom={zoom}
         onClose={() => onExitDrawMode?.()}
         onSend={(annotations, instruction, canvasSize) => {
           const summary = annotations

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

@@ -137,10 +137,23 @@ interface EditPanelProps {
  * valid CSS length. Lets users type "32" and get the expected "32px" when
  * the field is committed.
  */
-function normalizeLengthValue(raw: string, defaultUnit: string): string {
+function normalizeLengthValue(raw: string, defaultUnit: string): string | null {
   const trimmed = raw.trim();
-  if (!trimmed) return "";
+  // Empty / invalid input returns null so the caller reverts the field instead
+  // of committing an empty or garbage CSS value (e.g. fontSize:"" or
+  // flexBasis:"abc") to the element's inline style.
+  if (!trimmed) return null;
   if (/^-?\d+(\.\d+)?$/.test(trimmed)) return `${trimmed}${defaultUnit}`;
+  // Validate free-form CSS so junk text never reaches the style. Fall back to
+  // accepting the value when CSS.supports is unavailable (SSR/tests) to keep
+  // prior behavior in non-DOM environments.
+  if (typeof CSS !== "undefined" && typeof CSS.supports === "function") {
+    const ok =
+      CSS.supports("width", trimmed) ||
+      CSS.supports("font-size", trimmed) ||
+      CSS.supports("flex-basis", trimmed);
+    return ok ? trimmed : null;
+  }
   return trimmed;
 }
 
@@ -180,6 +193,11 @@ function PropInput({
       return;
     }
     const next = normalizeLengthValue(draft, defaultUnit);
+    if (next === null) {
+      // Invalid or empty — revert the field to the last committed value.
+      setDraft(value);
+      return;
+    }
     if (next !== draft) setDraft(next);
     if (next !== value) onChange(next);
   };
@@ -745,7 +763,11 @@ function gradientTypeFromCss(
   layer: string,
 ): DesignGradientType {
   if (functionName.toLowerCase() === "conic") return "angular";
-  if (/closest-corner/i.test(layer)) return "diamond";
+  // Recognize both diamond serializations — EditPanel's "closest-corner" and
+  // GradientEditor's "ellipse closest-side" — so a diamond authored in either
+  // place round-trips as diamond instead of flipping to radial.
+  if (/closest-corner/i.test(layer) || /ellipse\s+closest-side/i.test(layer))
+    return "diamond";
   if (functionName.toLowerCase() === "radial") return "radial";
   return "linear";
 }
@@ -1170,9 +1192,39 @@ function resolveLineHeight(
   return Number.isFinite(numeric) && numeric > 0 ? numeric : 1.2;
 }
 
+// Matches a 2D rotate()/rotateZ() with any CSS angle unit (not rotateX/Y/3d).
+const ROTATE_FN_PATTERN =
+  /rotate[Zz]?\(\s*([+-]?[\d.]+(?:e[+-]?\d+)?)(deg|rad|turn|grad)?\s*\)/i;
+
 function parseRotationValue(transform: string | undefined): number {
-  const match = transform?.match(/rotate\((-?\d+(?:\.\d+)?)deg\)/);
-  return match ? Number(match[1]) : 0;
+  if (!transform || transform === "none") return 0;
+  const match = transform.match(ROTATE_FN_PATTERN);
+  if (match) {
+    const value = Number(match[1]);
+    if (Number.isFinite(value)) {
+      const unit = (match[2] || "deg").toLowerCase();
+      const deg =
+        unit === "rad"
+          ? value * (180 / Math.PI)
+          : unit === "turn"
+            ? value * 360
+            : unit === "grad"
+              ? value * 0.9
+              : value;
+      return Math.round(deg * 10) / 10;
+    }
+  }
+  // Fallback for rotate3d()/matrix()/skew composites: read the 2D rotation
+  // component off the resolved matrix so the panel doesn't report 0.
+  if (typeof DOMMatrixReadOnly !== "undefined") {
+    try {
+      const m = new DOMMatrixReadOnly(transform);
+      return Math.round(((Math.atan2(m.b, m.a) * 180) / Math.PI) * 10) / 10;
+    } catch {
+      // Unparseable transform — fall through to 0.
+    }
+  }
+  return 0;
 }
 
 /**
@@ -1191,8 +1243,10 @@ function parseScaleValue(value: string | undefined): [number, number] {
 function mergeRotationValue(transform: string | undefined, degrees: number) {
   const nextRotate = `rotate(${Math.round(degrees * 10) / 10}deg)`;
   if (!transform || transform === "none") return nextRotate;
-  if (/rotate\((-?\d+(?:\.\d+)?)deg\)/.test(transform)) {
-    return transform.replace(/rotate\((-?\d+(?:\.\d+)?)deg\)/, nextRotate);
+  // Replace an existing rotate()/rotateZ() in ANY unit so we don't append a
+  // second rotate() (which would compound, e.g. "rotate(0.5turn) rotate(30deg)").
+  if (ROTATE_FN_PATTERN.test(transform)) {
+    return transform.replace(ROTATE_FN_PATTERN, nextRotate);
   }
   return `${transform} ${nextRotate}`;
 }
@@ -2025,10 +2079,10 @@ function StrokeLayerControl({
     const nextPrefix = next === "outside" ? "outline" : "border";
     onStyleChange(`${nextPrefix}Color`, color);
     onStyleChange(`${nextPrefix}Width`, width || "1px");
-    onStyleChange(
-      `${nextPrefix}Style`,
-      styleValue === "none" ? "solid" : styleValue,
-    );
+    // Preserve the original border-style so a hidden stroke (style:none, kept
+    // visible as a row because width>0) stays hidden when its position moves
+    // between inside/outside. Only default to solid when there's no style at all.
+    onStyleChange(`${nextPrefix}Style`, styleValue || "solid");
     onRemove();
   };
 
@@ -2149,7 +2203,12 @@ function parseShadowLayer(layer: string, index: number): ShadowLayer {
   const tokens = splitCssTokens(layer);
   const inset = tokens.includes("inset");
   const colorToken =
-    tokens.find((token) => parseCssColor(token) || token === "transparent") ||
+    tokens.find((token) => parseCssColor(token) || token === "transparent") ??
+    // Preserve a color we don't parse into RGBA (currentColor, var(--x), or any
+    // unrecognized keyword): the color is the non-inset token that doesn't look
+    // like a numeric length. Without this, tweaking x/y/blur would reset it to
+    // the hardcoded default below.
+    tokens.find((token) => token !== "inset" && !/^[-+]?[\d.]/.test(token)) ??
     "rgba(0, 0, 0, 0.25)";
   const numericTokens = tokens
     .filter((token) => token !== "inset" && token !== colorToken)
@@ -3408,6 +3467,12 @@ function FillProperties({
   const [hiddenFillStash, setHiddenFillStash] = useState<
     Record<string, string>
   >({});
+  // Same non-destructive idea for background gradient/image layers: stash the
+  // exact layer string on hide so per-stop opacity survives a hide→show toggle
+  // instead of being flattened to all-0 then all-100.
+  const [hiddenLayerStash, setHiddenLayerStash] = useState<
+    Record<string, string>
+  >({});
   const stashKey = `${elementIdentityKey(element)}:${fillProperty}`;
   const isHidden = fillValue === "transparent" || fillValue === "";
   const handleFillVisibilityToggle = () => {
@@ -3664,16 +3729,50 @@ function FillProperties({
                       }
                       onClick={() => {
                         if (!gradient) return;
-                        replaceLayer(
-                          buildGradientLayer(
-                            gradient.type,
-                            gradient.stops.map((stop) => ({
-                              ...stop,
-                              opacity: opacity <= 0 ? 100 : 0,
-                            })),
-                            gradient.prefix,
-                          ),
-                        );
+                        const layerStashKey = `${elementIdentityKey(
+                          element,
+                        )}:layer:${index}`;
+                        if (opacity <= 0) {
+                          // Show: restore the exact pre-hide layer if stashed,
+                          // otherwise fall back to forcing every stop opaque.
+                          const stashed = hiddenLayerStash[layerStashKey];
+                          if (stashed !== undefined) {
+                            replaceLayer(stashed);
+                            setHiddenLayerStash((prev) => {
+                              const next = { ...prev };
+                              delete next[layerStashKey];
+                              return next;
+                            });
+                          } else {
+                            replaceLayer(
+                              buildGradientLayer(
+                                gradient.type,
+                                gradient.stops.map((stop) => ({
+                                  ...stop,
+                                  opacity: 100,
+                                })),
+                                gradient.prefix,
+                              ),
+                            );
+                          }
+                        } else {
+                          // Hide: stash the current layer (with its real per-stop
+                          // opacities) before zeroing every stop's alpha.
+                          setHiddenLayerStash((prev) => ({
+                            ...prev,
+                            [layerStashKey]: layer,
+                          }));
+                          replaceLayer(
+                            buildGradientLayer(
+                              gradient.type,
+                              gradient.stops.map((stop) => ({
+                                ...stop,
+                                opacity: 0,
+                              })),
+                              gradient.prefix,
+                            ),
+                          );
+                        }
                       }}
                     >
                       {opacity <= 0 ? (

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

@@ -161,8 +161,24 @@ interface FlatLayerRow {
   depth: number;
   ancestorIds: string[];
   hasChildren: boolean;
+  canAcceptChildren: boolean;
 }
 
+// Node types that can contain children even when currently empty.
+// Leaf / void types (text, image, shape, rectangle) are excluded so we don't
+// offer an "inside" drop zone on genuinely non-container elements.
+const CONTAINER_TYPES = new Set<LayersPanelNodeType | undefined>([
+  "file",
+  "screen",
+  "frame",
+  "group",
+  "section",
+  "component",
+  "instance",
+  "code",
+  "element",
+]);
+
 const SECTION_CODE_ID = "__design_layers_code__";
 const SECTION_ELEMENT_ID = "__design_layers_elements__";
 
@@ -170,6 +186,14 @@ const SECTION_ELEMENT_ID = "__design_layers_elements__";
 // per spec; the source row stores the drag payload here on dragstart instead.
 let activeDragState: { sourceId: string; draggedIds: string[] } | null = null;
 
+const ROW_BASE_INDENT = 4;
+const ROW_INDENT_STEP = 28;
+const ROW_MAX_INDENT = 96;
+
+function rowIndent(depth: number): number {
+  return Math.min(ROW_BASE_INDENT + depth * ROW_INDENT_STEP, ROW_MAX_INDENT);
+}
+
 function defaultLabels(t: ReturnType<typeof useT>): LayersPanelLabels {
   return {
     title: t("layersPanel.title"),
@@ -307,8 +331,16 @@ function flattenRows(
   nodes.forEach((node, index) => {
     const children = node.children ?? [];
     const hasChildren = children.length > 0;
+    const canAcceptChildren = CONTAINER_TYPES.has(node.type);
     const rowKey = `${parentKey}/${node.id}:${index}`;
-    rows.push({ node, rowKey, depth, ancestorIds, hasChildren });
+    rows.push({
+      node,
+      rowKey,
+      depth,
+      ancestorIds,
+      hasChildren,
+      canAcceptChildren,
+    });
     if (hasChildren && (forceExpanded || expandedIds.has(node.id))) {
       flattenRows(
         children,
@@ -487,9 +519,20 @@ export function LayersPanel({
     ) => {
       let nextIds: string[];
       if (options.range && lastSelectionAnchorRef.current) {
-        const from = selectableVisibleIds.indexOf(
-          lastSelectionAnchorRef.current,
-        );
+        let anchor = lastSelectionAnchorRef.current;
+        if (selectableVisibleIds.indexOf(anchor) < 0) {
+          // Stale anchor (deleted / filtered / collapsed out of view): pivot from
+          // the last selected layer that is still visible & selectable, matching
+          // Figma's behavior instead of dropping the range to a single select.
+          const fallback = [...selectedIds]
+            .reverse()
+            .find((sid) => selectableVisibleIds.includes(sid));
+          if (fallback) {
+            anchor = fallback;
+            lastSelectionAnchorRef.current = fallback;
+          }
+        }
+        const from = selectableVisibleIds.indexOf(anchor);
         const to = selectableVisibleIds.indexOf(id);
         if (from >= 0 && to >= 0) {
           const [start, end] = from < to ? [from, to] : [to, from];
@@ -812,7 +855,7 @@ function LayerRow({
   selectedIds: readonly string[];
   visibleRows: FlatLayerRow[];
 }) {
-  const { node, depth, hasChildren } = row;
+  const { node, depth, hasChildren, canAcceptChildren } = row;
   const selectable = node.selectable !== false;
   const lockable = node.lockable !== false && Boolean(onToggleLocked);
   const hideable = node.hideable !== false && Boolean(onToggleHidden);
@@ -959,7 +1002,7 @@ function LayerRow({
     const intent = {
       draggedIds: cleanedIds,
       targetId: node.id,
-      placement: dropPlacementForEvent(event, hasChildren),
+      placement: dropPlacementForEvent(event, canAcceptChildren),
     } satisfies LayersPanelMoveIntent;
     if (canMoveLayer && !canMoveLayer(intent)) return;
     event.preventDefault();
@@ -997,7 +1040,7 @@ function LayerRow({
       const intent = {
         draggedIds: cleanedIds,
         targetId: node.id,
-        placement: dropPlacementForEvent(event, hasChildren),
+        placement: dropPlacementForEvent(event, canAcceptChildren),
       } satisfies LayersPanelMoveIntent;
       if (!canMoveLayer || canMoveLayer(intent)) {
         onMoveLayer(intent);
@@ -1058,7 +1101,7 @@ function LayerRow({
             "text-foreground/90 hover:bg-[var(--design-editor-layer-hover-color)] hover:text-foreground",
           node.hidden && "text-muted-foreground",
         )}
-        style={{ paddingLeft: 4 + depth * 28 }}
+        style={{ paddingLeft: rowIndent(depth) }}
       >
         {hasChildren ? (
           <Button