@agent-native/core 0.98.14 → 0.98.16

package/corpus/README.md

@@ -28,4 +28,4 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 ## Generated Counts
 
 - core files: 2239
-- template files: 5515
+- template files: 5518

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @agent-native/core
 
+## 0.98.16
+
+### Patch Changes
+
+- cc35446: Resolve the authenticated owner's active provider key for A2A and MCP ask-agent runs, matching the interactive chat engine path.
+
+## 0.98.15
+
+### Patch Changes
+
+- 2161d10: Preserve streamed tool calls when an engine omits its normalized assistant-content event so delegated and MCP agent runs can still execute requested actions.
+
 ## 0.98.14
 
 ### Patch Changes

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.98.14",
+  "version": "0.98.16",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/corpus/core/src/agent/production-agent.ts

@@ -3081,6 +3081,8 @@ export async function runAgentLoop(opts: {
 
     let assistantContent: EngineContentPart[] | undefined;
     let streamedAssistantText = "";
+    const streamedAssistantToolCalls: import("./engine/types.js").EngineToolCallPart[] =
+      [];
     let terminalStopReason:
       | Extract<EngineEvent, { type: "stop" }>["reason"]
       | undefined;
@@ -3122,6 +3124,7 @@ export async function runAgentLoop(opts: {
     for (let retry = 0; ; retry++) {
       assistantContent = undefined;
       streamedAssistantText = "";
+      streamedAssistantToolCalls.length = 0;
       terminalStopReason = undefined;
       toolCallErrors.clear();
       try {
@@ -3465,7 +3468,16 @@ export async function runAgentLoop(opts: {
             } else if (event.type === "gateway-heartbeat") {
               send({ type: "stream_keepalive" });
             } else if (event.type === "tool-call") {
-              // The authoritative tool-call blocks arrive in assistant-content.
+              // Most engines repeat the authoritative call in assistant-content,
+              // but delegated/custom engines can expose only the stream event.
+              // Keep it so the loop can still execute the requested action when
+              // the normalized terminal event is missing.
+              streamedAssistantToolCalls.push({
+                type: "tool-call",
+                id: event.id,
+                name: event.name,
+                input: event.input,
+              });
             } else if (event.type === "tool-call-error") {
               toolCallErrors.set(event.id, {
                 name: event.name,
@@ -3553,12 +3565,34 @@ export async function runAgentLoop(opts: {
       assistantContent = [];
     }
 
-    if (!assistantContent && streamedAssistantText.trim()) {
-      // Some delegated/custom engine streams emit text deltas and a terminal
-      // stop without the normalized assistant-content event. Preserve the
-      // streamed text so final-response guards still run; otherwise an app
-      // guard (for example Analytics' real-data guard) is silently bypassed.
-      assistantContent = [{ type: "text", text: streamedAssistantText }];
+    if (
+      (!assistantContent || assistantContent.length === 0) &&
+      (streamedAssistantText.trim() || streamedAssistantToolCalls.length > 0)
+    ) {
+      // Some delegated/custom engine streams emit text deltas and/or tool-call
+      // events followed by a terminal stop without the normalized
+      // assistant-content event. Preserve both so final-response guards still
+      // run and requested actions are not silently dropped.
+      assistantContent = [
+        ...(streamedAssistantText.trim()
+          ? [{ type: "text" as const, text: streamedAssistantText }]
+          : []),
+        ...streamedAssistantToolCalls,
+      ];
+    } else if (assistantContent && streamedAssistantToolCalls.length > 0) {
+      const existingToolCallIds = new Set(
+        assistantContent
+          .filter(
+            (part): part is import("./engine/types.js").EngineToolCallPart =>
+              part.type === "tool-call",
+          )
+          .map((part) => part.id),
+      );
+      for (const toolCall of streamedAssistantToolCalls) {
+        if (!existingToolCallIds.has(toolCall.id)) {
+          assistantContent.push(toolCall);
+        }
+      }
     }
     if (!assistantContent) {
       // No content — done

package/corpus/core/src/server/agent-chat-plugin.ts

@@ -1252,9 +1252,12 @@ export function createAgentChatPlugin(
 
           // Use the SAME agent setup as the interactive chat — identical tools,
           // prompt, and capabilities. The A2A agent IS the app's agent.
+          const { getOwnerActiveApiKey } =
+            await import("../agent/production-agent.js");
+          const ownerApiKey = await getOwnerActiveApiKey(userEmail);
           const a2aEngine = await resolveEngine({
             engineOption: options?.engine,
-            apiKey: options?.apiKey,
+            apiKey: ownerApiKey ?? options?.apiKey,
             appId: options?.appId,
           });
 
@@ -1524,9 +1527,15 @@ export function createAgentChatPlugin(
             ? { externalAgents: options.externalAgents }
             : {}),
           askAgent: async (message: string) => {
+            const ownerEmail = getRequestUserEmail();
+            const { getOwnerActiveApiKey } =
+              await import("../agent/production-agent.js");
+            const ownerApiKey = ownerEmail
+              ? await getOwnerActiveApiKey(ownerEmail)
+              : undefined;
             const mcpEngine = await resolveEngine({
               engineOption: options?.engine,
-              apiKey: options?.apiKey,
+              apiKey: ownerApiKey ?? options?.apiKey,
               appId: options?.appId,
             });
             const mcpModelCandidate =

package/corpus/templates/analytics/changelog/2026-07-13-ask-app-now-uses-the-current-core-agent-loop-and-response-gu.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-13
+---
+
+Ask app now uses the current core agent loop and response guards in production MCP runs.

package/corpus/templates/analytics/netlify.toml

@@ -1,6 +1,10 @@
 [build]
 ignore = "node ./scripts/netlify-ignore-build.mjs analytics"
-command = "export DATABASE_URL=${NETLIFY_DATABASE_URL:-$DATABASE_URL} && pnpm install && NITRO_PRESET=netlify pnpm --filter analytics build"
+# The workspace package dist folders are ignored/generated artifacts. Rebuild
+# core explicitly here so a cached Netlify install cannot bundle an older agent
+# loop into Analytics' server functions (including A2A/MCP final-response
+# guards).
+command = "export DATABASE_URL=${NETLIFY_DATABASE_URL:-$DATABASE_URL} && pnpm install && pnpm --filter @agent-native/core build && NITRO_PRESET=netlify pnpm --filter analytics build"
 publish = "templates/analytics/dist"
 functions = "templates/analytics/.netlify/functions-internal"
 

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

@@ -5046,17 +5046,29 @@ function SingleScreenCreationOverlay({
         />
       ) : null}
       {previewRect ? (
-        <div
-          data-creation-preview-rect
-          className="pointer-events-none absolute rounded-[2px] border-[1.5px] border-[var(--design-editor-accent-color)] bg-[var(--design-editor-accent-color)]/10"
-          style={{
-            left: previewRect.x,
-            top: previewRect.y,
-            width: Math.max(1, previewRect.width),
-            height: Math.max(1, previewRect.height),
-            borderRadius: tool === "ellipse" ? "9999px" : undefined,
-          }}
-        />
+        <>
+          <div
+            data-creation-preview-rect
+            className="pointer-events-none absolute rounded-[2px] border-[1.5px] border-[var(--design-editor-accent-color)] bg-[var(--design-editor-accent-color)]/10"
+            style={{
+              left: previewRect.x,
+              top: previewRect.y,
+              width: Math.max(1, previewRect.width),
+              height: Math.max(1, previewRect.height),
+              borderRadius: tool === "ellipse" ? "9999px" : undefined,
+            }}
+          />
+          <span
+            data-creation-preview-size
+            className="pointer-events-none absolute z-10 -translate-x-1/2 translate-y-1 rounded bg-[var(--design-editor-accent-color)] px-1.5 py-0.5 text-[10px] font-medium leading-none text-[var(--design-editor-accent-contrast-color)] shadow-sm"
+            style={{
+              left: previewRect.x + previewRect.width / 2,
+              top: previewRect.y + previewRect.height,
+            }}
+          >
+            {Math.round(previewRect.width)} × {Math.round(previewRect.height)}
+          </span>
+        </>
       ) : null}
       {previewLine ? (
         <svg

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

@@ -7812,7 +7812,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
           )),
         )}
 
-        {/* Figma-parity alt-hover measurement: red edge-to-edge distance
+        {/* Figma-parity alt-hover measurement: orange edge-to-edge distance
             lines between the current selection and whatever frame/draft is
             under the cursor while Alt is held (pure hover, no drag). */}
         {[altHoverMeasurement?.horizontal, altHoverMeasurement?.vertical]
@@ -7822,7 +7822,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
           .map((line) => (
             <span
               key={`alt-hover-${line.orientation}`}
-              className="pointer-events-none absolute z-40 bg-destructive"
+              className="pointer-events-none absolute z-40 bg-[var(--design-editor-measure-color)]"
               style={
                 line.orientation === "vertical"
                   ? {
@@ -7857,7 +7857,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
           return (
             <span
               key={`alt-hover-label-${line.orientation}`}
-              className="pointer-events-none absolute z-40 -translate-x-1/2 -translate-y-1/2 rounded bg-destructive px-1 py-0.5 text-[10px] font-medium leading-none text-destructive-foreground shadow-sm"
+              className="pointer-events-none absolute z-40 -translate-x-1/2 -translate-y-1/2 rounded bg-[var(--design-editor-measure-color)] px-1 py-0.5 text-[10px] font-medium leading-none text-white shadow-sm"
               style={{
                 left: pan.x + (SURFACE_PADDING + labelCanvasPoint.x) * scale,
                 top: pan.y + (SURFACE_PADDING + labelCanvasPoint.y) * scale,
@@ -7868,6 +7868,37 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
           );
         })}
 
+      {/* Live width × height readout while drawing, pinned below the draft box.
+          Rendered outside the transformed world so it stays a fixed size.
+          Skipped for line/arrow/pen and the pre-drag zero-size state. */}
+      {creationPreview &&
+      creationPreview.tool !== "line" &&
+      creationPreview.tool !== "arrow" &&
+      creationPreview.tool !== "pen" &&
+      creationPreview.geometry.width > 0 &&
+      creationPreview.geometry.height > 0 ? (
+        <span
+          className="pointer-events-none absolute z-40 -translate-x-1/2 translate-y-1 rounded bg-[var(--design-editor-accent-color)] px-1.5 py-0.5 text-[10px] font-medium leading-none text-[var(--design-editor-accent-contrast-color)] shadow-sm"
+          style={{
+            left:
+              pan.x +
+              (SURFACE_PADDING +
+                creationPreview.geometry.x +
+                creationPreview.geometry.width / 2) *
+                scale,
+            top:
+              pan.y +
+              (SURFACE_PADDING +
+                creationPreview.geometry.y +
+                creationPreview.geometry.height) *
+                scale,
+          }}
+        >
+          {Math.round(creationPreview.geometry.width)} ×{" "}
+          {Math.round(creationPreview.geometry.height)}
+        </span>
+      ) : null}
+
       {/* Equal-gap distance labels render outside the pan/scale-transformed
           world container (same reasoning as the marquee/duplicate-preview
           overlays above it) so they need the explicit

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

@@ -100,6 +100,7 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
       "",
     );
     chromeTransitionStyle.textContent =
+      "html{overflow:clip}" /* prevent negative-offset handles from expanding the iframe */ +
       '[data-agent-native-edit-overlay="selection"]{transition:border-width 150ms ease-out}' +
       '[data-agent-native-empty-text-editing="true"] [data-agent-native-edit-overlay="selection"]{display:none!important}' +
       "[data-agent-native-text-editing]{outline:none!important;outline-offset:0!important}" +
@@ -1844,17 +1845,46 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
     }
     selectionOverlay.appendChild(handle);
   });
-  ["nw", "ne", "se", "sw"].forEach(function (pos) {
-    var rotate = document.createElement("span");
-    rotate.setAttribute("data-agent-native-rotate-handle", pos);
-    rotate.style.cssText =
-      "position:absolute;width:18px;height:18px;border-radius:999px;pointer-events:auto;cursor:grab;";
-    if (pos.indexOf("n") !== -1) rotate.style.top = "-26px";
-    if (pos.indexOf("s") !== -1) rotate.style.bottom = "-26px";
-    if (pos.indexOf("w") !== -1) rotate.style.left = "-26px";
-    if (pos.indexOf("e") !== -1) rotate.style.right = "-26px";
-    selectionOverlay.appendChild(rotate);
-  });
+  (function () {
+    var baseAngles = { nw: 270, ne: 0, se: 90, sw: 180 };
+    function rotateCursorUri(angleDeg) {
+      var svg =
+        '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">' +
+        '<g transform="rotate(' +
+        angleDeg +
+        ' 10 10)" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">' +
+        '<path d="M 4 8 A 7 7 0 0 1 16 8" stroke="white" stroke-width="3.5"/>' +
+        '<path d="M 4 8 A 7 7 0 0 1 16 8"/>' +
+        '<path d="M 12.5 3.5 L 16 8 L 11 8.5" fill="white" stroke="white" stroke-width="3.5" stroke-linejoin="round"/>' +
+        '<path d="M 12.5 3.5 L 16 8 L 11 8.5" fill="black"/>' +
+        "</g></svg>";
+      return (
+        'url("data:image/svg+xml,' + encodeURIComponent(svg) + '") 10 10, grab'
+      );
+    }
+    ["nw", "ne", "se", "sw"].forEach(function (pos) {
+      var handle = document.createElement("span");
+      handle.setAttribute("data-agent-native-rotate-handle", pos);
+      handle.style.cssText =
+        "position:absolute;width:28px;height:28px;border-radius:999px;pointer-events:auto;";
+      handle.style.cursor = rotateCursorUri(baseAngles[pos]);
+      if (pos.indexOf("n") !== -1) handle.style.top = "-34px";
+      if (pos.indexOf("s") !== -1) handle.style.bottom = "-34px";
+      if (pos.indexOf("w") !== -1) handle.style.left = "-34px";
+      if (pos.indexOf("e") !== -1) handle.style.right = "-34px";
+      selectionOverlay.appendChild(handle);
+    });
+    var button = document.createElement("span");
+    button.setAttribute("data-agent-native-rotate-handle", "top-center");
+    button.style.cssText =
+      "position:absolute;left:50%;transform:translateX(-50%);top:-22px;" +
+      "width:16px;height:16px;pointer-events:auto;" +
+      "display:flex;align-items:center;justify-content:center;" +
+      "border-radius:999px;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.3);" +
+      "cursor:grab;user-select:none;font-size:10px;line-height:1;color:#333;";
+    button.textContent = "↻";
+    selectionOverlay.appendChild(button);
+  })();
   var spacingOverlay = document.createElement("div");
   spacingOverlay.setAttribute("data-agent-native-spacing-overlay", "");
   spacingOverlay.style.cssText =
@@ -1967,6 +1997,12 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
 
   var measurementOverlay = document.createElement("div");
   measurementOverlay.setAttribute("data-agent-native-measurement-overlay", "");
+  // Tag as an edit overlay so the content-replacement path preserves it (only
+  // [data-agent-native-edit-overlay] nodes survive a body rebuild).
+  measurementOverlay.setAttribute(
+    "data-agent-native-edit-overlay",
+    "measurement",
+  );
   measurementOverlay.style.cssText =
     "position:fixed;inset:0;z-index:100001;display:none;pointer-events:none;color:var(--design-editor-measure-color);font:11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;";
   document.body.appendChild(measurementOverlay);
@@ -3845,50 +3881,44 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
       .querySelectorAll("[data-agent-native-rotate-handle]")
       .forEach(function (handle) {
         var pos = handle.getAttribute("data-agent-native-rotate-handle") || "";
-        handle.style.width = 18 * sx + "px";
-        handle.style.height = 18 * sy + "px";
-        if (pos.indexOf("n") !== -1) handle.style.top = -26 * sy + "px";
-        if (pos.indexOf("s") !== -1) handle.style.bottom = -26 * sy + "px";
-        if (pos.indexOf("w") !== -1) handle.style.left = -26 * sx + "px";
-        if (pos.indexOf("e") !== -1) handle.style.right = -26 * sx + "px";
+        if (pos === "top-center") {
+          var buttonScale = Math.min(sx, sy);
+          handle.style.width = 16 * buttonScale + "px";
+          handle.style.height = 16 * buttonScale + "px";
+          handle.style.fontSize = 10 * buttonScale + "px";
+          handle.style.top = -22 * sy + "px";
+          return;
+        }
+        var size = Math.min(sx, sy);
+        handle.style.width = 28 * size + "px";
+        handle.style.height = 28 * size + "px";
+        if (pos.indexOf("n") !== -1) handle.style.top = -34 * sy + "px";
+        if (pos.indexOf("s") !== -1) handle.style.bottom = -34 * sy + "px";
+        if (pos.indexOf("w") !== -1) handle.style.left = -34 * sx + "px";
+        if (pos.indexOf("e") !== -1) handle.style.right = -34 * sx + "px";
       });
   }
 
-  // Rotation-aware local-box placement shared by selectionOverlay, the hover
-  // highlightOverlay, and the passive multi-selection overlays: prefer the CSS
-  // box + rotation transform so the outline hugs the rotated element rather
-  // than its inflated axis-aligned bounding box. Returns true when it placed
-  // the overlay (caller should skip the AABB fallback), false when the element
-  // has no usable local box (falls back to getBoundingClientRect).
+  // Returns true when the overlay was placed with the element's rotated CSS box.
   function positionOverlayForRotatedLocalBox(
     overlay: HTMLElement,
     el: Element,
   ): boolean {
     var elCs = window.getComputedStyle(el);
-    var elLeft = readFinitePx(el.style.left || elCs.left);
-    var elTop = readFinitePx(el.style.top || elCs.top);
-    var elW = readFinitePx(el.style.width || elCs.width);
-    var elH = readFinitePx(el.style.height || elCs.height);
+    var elW = readFinitePx((el as HTMLElement).style.width || elCs.width);
+    var elH = readFinitePx((el as HTMLElement).style.height || elCs.height);
     var elRot = currentRotation(el);
-    var canUseLocalBox =
-      Math.abs(elRot) > 0.01 &&
-      elLeft !== null &&
-      elTop !== null &&
-      elW !== null &&
-      elH !== null;
-    if (!canUseLocalBox) return false;
-    // Convert element-local left/top to viewport coords by walking to the
-    // nearest positioned ancestor (same reference frame as getBoundingClientRect).
-    var parentRect = (
-      (el as HTMLElement).offsetParent || document.documentElement
-    ).getBoundingClientRect();
+    if (Math.abs(elRot) < 0.01 || elW === null || elH === null) return false;
+    var rect = (el as HTMLElement).getBoundingClientRect();
+    var cx = rect.left + rect.width / 2;
+    var cy = rect.top + rect.height / 2;
     overlay.style.display = "block";
-    overlay.style.left = parentRect.left + elLeft + "px";
-    overlay.style.top = parentRect.top + elTop + "px";
+    overlay.style.left = cx - elW / 2 + "px";
+    overlay.style.top = cy - elH / 2 + "px";
     overlay.style.width = elW + "px";
     overlay.style.height = elH + "px";
     overlay.style.transform = "rotate(" + elRot + "deg)";
-    overlay.style.transformOrigin = "0 0";
+    overlay.style.transformOrigin = "50% 50%";
     return true;
   }
 
@@ -4212,6 +4242,11 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
     }
     var selectedRect = a.getBoundingClientRect();
     var hoverRect = b.getBoundingClientRect();
+    // A content re-render can rebuild document.body and drop this overlay;
+    // re-attach it before drawing so the lines always render.
+    if (!measurementOverlay.isConnected) {
+      document.body.appendChild(measurementOverlay);
+    }
     measurementOverlay.innerHTML = "";
     measurementOverlay.style.display = "block";
 
@@ -5631,32 +5666,66 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
     },
   );
 
-  function currentRotation(el) {
-    var transform =
-      el.style.transform || window.getComputedStyle(el).transform || "";
-    var match = transform.match(/rotate\((-?\d+(?:\.\d+)?)deg\)/);
+  function rotationFromTransform(transform) {
+    var match = transform.match(/rotate(?:Z)?\((-?\d+(?:\.\d+)?)deg\)/i);
     if (match) return parseFloat(match[1]) || 0;
     if (transform && transform !== "none" && window.DOMMatrixReadOnly) {
       try {
         var matrix = new DOMMatrixReadOnly(transform);
-        return Math.round((Math.atan2(matrix.b, matrix.a) * 180) / Math.PI);
+        return (Math.atan2(matrix.b, matrix.a) * 180) / Math.PI;
       } catch (err) {}
     }
     return 0;
   }
 
-  function mergeRotation(el, degrees) {
-    var inline = el.style.transform || "";
-    var next = inline.match(/rotate\((-?\d+(?:\.\d+)?)deg\)/)
-      ? inline.replace(
-          /rotate\((-?\d+(?:\.\d+)?)deg\)/,
-          "rotate(" + degrees + "deg)",
-        )
-      : (inline && inline !== "none" ? inline + " " : "") +
-        "rotate(" +
-        degrees +
-        "deg)";
-    return next.trim();
+  function independentRotation(rotate) {
+    var match = rotate.match(
+      /^(?:z\s+)?(-?\d+(?:\.\d+)?)(deg|grad|rad|turn)$/i,
+    );
+    if (!match) return 0;
+    var value = parseFloat(match[1]) || 0;
+    var unit = match[2].toLowerCase();
+    if (unit === "grad") return value * 0.9;
+    if (unit === "rad") return (value * 180) / Math.PI;
+    if (unit === "turn") return value * 360;
+    return value;
+  }
+
+  function currentRotation(el) {
+    var computed = window.getComputedStyle(el);
+    return (
+      rotationFromTransform(computed.transform || "") +
+      independentRotation(computed.rotate || "")
+    );
+  }
+
+  // Merge an ABSOLUTE rotation value (degrees) into a transform string.
+  // When the string already has a rotate/rotateZ(), replace it in place.
+  // When the transform is a matrix() (e.g. computed from a class rule), strip
+  // the rotation component and append the new absolute rotate() so the inline
+  // value only adds what the class doesn't already own as non-rotation parts.
+  // When the string has non-rotation functions (translate, scale, etc.) without
+  // an explicit rotate(), append rotate() so other transforms are preserved.
+  function mergeAbsoluteRotation(transform, degrees) {
+    var rotatePattern = /rotate(?:Z)?\((-?\d+(?:\.\d+)?)deg\)/i;
+    if (rotatePattern.test(transform)) {
+      return transform
+        .replace(rotatePattern, "rotate(" + degrees + "deg)")
+        .trim();
+    }
+    // matrix() is the computed form of a class-rule transform; writing it
+    // inline would hard-pin every property from that rule. Instead start fresh
+    // with just the target rotation so the class still owns everything else.
+    if (/^matrix(?:3d)?\(/i.test(transform.trim())) {
+      return "rotate(" + degrees + "deg)";
+    }
+    // transform string with other functions but no existing rotate: append.
+    return (
+      (transform && transform !== "none" ? transform + " " : "") +
+      "rotate(" +
+      degrees +
+      "deg)"
+    ).trim();
   }
 
   function ensurePositionable(el) {
@@ -9115,6 +9184,11 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
     // null-deref in onMove/onUp.
     var rotateEl = selectedEl;
     var originalInlineTransform = rotateEl.style.transform;
+    var originalComputedTransform = window.getComputedStyle(rotateEl).transform;
+    var baseTransform =
+      originalInlineTransform && originalInlineTransform !== "none"
+        ? originalInlineTransform
+        : originalComputedTransform;
     function onMove(ev) {
       if (!rotateEl) return;
       var pointerAngle =
@@ -9123,7 +9197,7 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
       var next = originRotation + pointerAngle - originAngle;
       if (ev.shiftKey) next = Math.round(next / 15) * 15;
       next = Math.round(next);
-      rotateEl.style.transform = mergeRotation(rotateEl, next);
+      rotateEl.style.transform = mergeAbsoluteRotation(baseTransform, next);
       showTransformBadge(next + "deg", ev.clientX, ev.clientY);
       refreshOverlays();
     }
@@ -10303,7 +10377,11 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
       } else {
         hideMeasurements();
       }
-      if (hoveredEl !== lastHoverInfoPostedEl) {
+      // While Alt is held (measurement mode) keep hover local: posting it would
+      // update the host's hoveredSelector, re-run replayIframeEditorState, and
+      // echo selection/hover back every move — a loop that jitters selection
+      // and flickers the measurement lines.
+      if (!e.altKey && hoveredEl !== lastHoverInfoPostedEl) {
         lastHoverInfoPostedEl = hoveredEl;
         var info = getLightElementInfo(hoveredEl);
         (window.parent as Window).postMessage(
@@ -10365,7 +10443,19 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
   window.addEventListener(
     "keyup",
     function (e) {
-      if (e.key === "Alt") hideMeasurements();
+      if (e.key === "Alt") {
+        hideMeasurements();
+        // Re-sync the hover suppressed during measurement so the host isn't
+        // left on a stale element until the next pointermove.
+        lastHoverInfoPostedEl = hoveredEl;
+        (window.parent as Window).postMessage(
+          {
+            type: "element-hover",
+            payload: hoveredEl ? getLightElementInfo(hoveredEl) : null,
+          },
+          "*",
+        );
+      }
     },
     true,
   );

package/corpus/templates/design/app/components/design/inspector/DesignColorPicker.tsx

@@ -2678,16 +2678,16 @@ export function parseNumericDraft(draft: string): number | null {
 }
 
 /**
- * Expands a bare 1-digit hex fragment (e.g. "F") into the standard 3-digit
- * shorthand ("FFF", which `parseCssColor` then doubles up to "FFFFFF") so a
- * single typed hex digit still commits instead of being rejected as
- * unparseable. Standard 3/4/6/8-digit hex (already handled by
- * `parseCssColor`) passes through unchanged.
+ * Expands 1-3 digit hex inputs to their 6-digit Figma-style equivalents.
+ * One digit fills every channel, two digits repeat as a grayscale byte, and
+ * three digits use standard CSS shorthand expansion.
  */
 export function expandHexShorthand(value: string): string {
   const trimmed = value.trim().replace(/^#/, "");
-  if (/^[0-9a-f]$/i.test(trimmed)) {
-    return trimmed.repeat(3);
+  if (/^[0-9a-f]$/i.test(trimmed)) return trimmed.repeat(6);
+  if (/^[0-9a-f]{2}$/i.test(trimmed)) return trimmed.repeat(3);
+  if (/^[0-9a-f]{3}$/i.test(trimmed)) {
+    return [...trimmed].map((digit) => digit.repeat(2)).join("");
   }
   return trimmed;
 }

package/corpus/templates/design/app/global.css

@@ -79,7 +79,7 @@
   );
   --design-editor-accent-strong-color: var(--design-editor-accent-color);
   --design-editor-accent-contrast-color: #ffffff;
-  --design-editor-measure-color: hsl(344 100% 63%);
+  --design-editor-measure-color: hsl(24 95% 53%);
   --design-editor-panel-bg: hsl(var(--background));
   --design-editor-panel-raised-bg: hsl(var(--secondary));
   --design-editor-control-bg: hsl(var(--muted));
@@ -162,7 +162,7 @@
   --design-editor-panel-divider-color: hsl(0 0% 22%);
   --design-editor-accent-strong-color: var(--design-editor-accent-color);
   --design-editor-accent-contrast-color: #ffffff;
-  --design-editor-measure-color: hsl(344 100% 63%);
+  --design-editor-measure-color: hsl(24 95% 53%);
   --design-editor-panel-bg: hsl(0 0% 13%);
   --design-editor-panel-raised-bg: hsl(0 0% 18%);
   --design-editor-control-bg: hsl(0 0% 18%);

package/corpus/templates/design/changelog/2026-07-10-canvas-size-and-option-hover-measurements.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-07-10
+---
+
+The canvas now shows a live size readout while you draw, and holding Option while hovering another element shows the distance between them.

package/corpus/templates/design/changelog/2026-07-10-short-hex-colors-now-expand-like-figma.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-10
+---
+
+Short hex colors now expand like Figma when committed.