@agent-native/core 0.81.1 → 0.81.3

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") {

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

@@ -755,6 +755,7 @@ export function DesignColorPicker({
 
   const [mode, setMode] = useState<DesignColorMode>("hex");
   const [hexDraft, setHexDraft] = useState(() => toDisplayHex(color));
+  const hexDraftRef = useRef(hexDraft);
   const [open, setOpen] = useState(false);
   const [picking, setPicking] = useState(false);
   const skipNextHexBlurCommitRef = useRef(false);
@@ -814,7 +815,9 @@ export function DesignColorPicker({
     : null;
 
   useEffect(() => {
-    setHexDraft(toDisplayHex(color));
+    const nextHex = toDisplayHex(color);
+    hexDraftRef.current = nextHex;
+    setHexDraft(nextHex);
   }, [color.r, color.g, color.b]);
 
   // The local override (the user's explicit paint-type click) persists for the
@@ -863,17 +866,20 @@ export function DesignColorPicker({
   };
 
   const commitHex = () => {
-    const parsed = parseCssColor(`#${hexDraft.replace(/^#/, "")}`);
+    const currentDraft = hexDraftRef.current;
+    const parsed = parseCssColor(`#${currentDraft.replace(/^#/, "")}`);
     if (!parsed) {
-      setHexDraft(toDisplayHex(activeGradient ? fieldColor : color));
+      const reverted = toDisplayHex(activeGradient ? fieldColor : color);
+      hexDraftRef.current = reverted;
+      setHexDraft(reverted);
       return;
     }
     if (activeGradient) {
-      const hexIncludesAlpha = hasHexAlpha(hexDraft);
+      const hexIncludesAlpha = hasHexAlpha(currentDraft);
       emitStopColor(hexIncludesAlpha ? parsed : { ...parsed, a: fieldColor.a });
       return;
     }
-    const hexIncludesAlpha = hasHexAlpha(hexDraft);
+    const hexIncludesAlpha = hasHexAlpha(currentDraft);
     const nextOpacity = hexIncludesAlpha
       ? alphaToOpacity(parsed.a)
       : effectiveOpacity;
@@ -1080,7 +1086,10 @@ export function DesignColorPicker({
           aria-label={copy.hex}
           spellCheck={false}
           className="h-6 min-w-0 rounded-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 text-[11px] tabular-nums uppercase"
-          onChange={(e) => setHexDraft(e.target.value)}
+          onChange={(e) => {
+            hexDraftRef.current = e.target.value;
+            setHexDraft(e.target.value);
+          }}
           onFocus={(e) => e.target.select()}
           onKeyDown={(e) => {
             if (e.key === "Enter") {
@@ -1090,7 +1099,9 @@ export function DesignColorPicker({
               e.currentTarget.blur();
             }
             if (e.key === "Escape") {
-              setHexDraft(toDisplayHex(color));
+              const reverted = toDisplayHex(color);
+              hexDraftRef.current = reverted;
+              setHexDraft(reverted);
               skipNextHexBlurCommitRef.current = true;
               e.currentTarget.blur();
             }
@@ -1978,16 +1989,21 @@ function ScrubbyNumberInput({
   compact?: boolean;
 }) {
   const [draft, setDraft] = useState<string>(() => String(value));
+  const draftRef = useRef(draft);
   const skipBlurRef = useRef(false);
 
   useEffect(() => {
-    setDraft(String(value));
+    const nextDraft = String(value);
+    draftRef.current = nextDraft;
+    setDraft(nextDraft);
   }, [value]);
 
   const commit = () => {
-    const parsed = Number(draft);
+    const parsed = Number(draftRef.current);
     if (!Number.isFinite(parsed)) {
-      setDraft(String(value));
+      const reverted = String(value);
+      draftRef.current = reverted;
+      setDraft(reverted);
       return;
     }
     onChange(clamp(parsed, min, max));
@@ -2007,7 +2023,10 @@ function ScrubbyNumberInput({
         compact && "border-0 shadow-none focus-visible:ring-0",
         className,
       )}
-      onChange={(e) => setDraft(e.target.value)}
+      onChange={(e) => {
+        draftRef.current = e.target.value;
+        setDraft(e.target.value);
+      }}
       onFocus={(e) => e.target.select()}
       onKeyDown={(e) => {
         if (e.key === "Enter") {
@@ -2017,21 +2036,23 @@ function ScrubbyNumberInput({
           e.currentTarget.blur();
         }
         if (e.key === "Escape") {
-          setDraft(String(value));
+          const reverted = String(value);
+          draftRef.current = reverted;
+          setDraft(reverted);
           skipBlurRef.current = true;
           e.currentTarget.blur();
         }
         if (e.key === "ArrowUp") {
           e.preventDefault();
           const step = e.shiftKey ? 10 : 1;
-          const parsed = Number(draft);
+          const parsed = Number(draftRef.current);
           const base = Number.isFinite(parsed) ? parsed : value;
           onChange(clamp(base + step, min, max));
         }
         if (e.key === "ArrowDown") {
           e.preventDefault();
           const step = e.shiftKey ? 10 : 1;
-          const parsed = Number(draft);
+          const parsed = Number(draftRef.current);
           const base = Number.isFinite(parsed) ? parsed : value;
           onChange(clamp(base - step, min, max));
         }

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

@@ -238,6 +238,14 @@ export function parseImageFillCss(
   return { url, fit };
 }
 
+export function mergeImageFitDraft(
+  value: ImageFillValue,
+  urlDraft: string,
+  fit: ImageFitMode,
+): ImageFillValue {
+  return { ...value, url: urlDraft.trim(), fit };
+}
+
 // ─── Component ─────────────────────────────────────────────────────────────────
 
 export interface ImageFillControlsProps {
@@ -255,13 +263,15 @@ export function ImageFillControls({
 }: ImageFillControlsProps) {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [urlDraft, setUrlDraft] = useState(value.url);
+  const urlDraftRef = useRef(value.url);
 
   useEffect(() => {
+    urlDraftRef.current = value.url;
     setUrlDraft(value.url);
   }, [value.url]);
 
   const commitUrl = () => {
-    onChange({ ...value, url: urlDraft.trim() });
+    onChange({ ...value, url: urlDraftRef.current.trim() });
   };
 
   const handleFilePick = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -338,7 +348,10 @@ export function ImageFillControls({
           aria-label={"Image URL" /* i18n-ignore */}
           spellCheck={false}
           className="h-6 min-w-0 flex-1 rounded-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 text-[11px]"
-          onChange={(event) => setUrlDraft(event.target.value)}
+          onChange={(event) => {
+            urlDraftRef.current = event.target.value;
+            setUrlDraft(event.target.value);
+          }}
           onBlur={commitUrl}
           onKeyDown={(event) => {
             if (event.key === "Enter") {
@@ -378,7 +391,11 @@ export function ImageFillControls({
       {/* ── Fit mode dropdown ─────────────────────────────────────────────── */}
       <Select
         value={value.fit}
-        onValueChange={(v) => onChange({ ...value, fit: v as ImageFitMode })}
+        onValueChange={(v) =>
+          onChange(
+            mergeImageFitDraft(value, urlDraftRef.current, v as ImageFitMode),
+          )
+        }
         disabled={disabled}
       >
         <SelectTrigger