@crystaldesign/diva-backoffice 26.7.0-rc.2 → 26.7.0-rc.20

package/build/esm/index.js

@@ -18640,7 +18640,10 @@ function useFormData (_ref) {
       });
     }
     changedFields.current.forEach(function (changedField) {
-      orig[changedField.name[0]] = newData[changedField.name[0]];
+      // Apply only the changed leaf path (e.g. ['predictedStorage', 'metadata', 'storageSpaceId'])
+      // instead of the whole top-level key, so per-row sibling fields (e.g. predictedStorage.resolvedAt)
+      // are preserved and not overwritten with the reference row's value during mass editing.
+      setFieldInObject(changedField.name, orig, getData(changedField.name, newData));
     });
     return orig;
   };
@@ -28551,9 +28554,11 @@ function MediaViewerCell (_ref) {
     actions.loadModelViewer();
   }, []);
 
-  // The field value may be a plain url or an array of urls (e.g. renderImages);
-  // in the array case the first entry is shown.
-  var rawValue = Array.isArray(children === null || children === void 0 ? void 0 : children[1]) ? children[1][0] : children === null || children === void 0 ? void 0 : children[1];
+  // The field value may be a plain url or an array (e.g. renderImages); in the
+  // array case the first entry is shown. Entries may be plain urls or objects
+  // carrying a `url` (e.g. renderImages: { mediaItemRefId?, url }).
+  var firstEntry = Array.isArray(children === null || children === void 0 ? void 0 : children[1]) ? children[1][0] : children === null || children === void 0 ? void 0 : children[1];
+  var rawValue = firstEntry && _typeof(firstEntry) === 'object' ? firstEntry.url : firstEntry;
   if (!rawValue) {
     return /*#__PURE__*/jsx(Fragment, {});
   }
@@ -53665,7 +53670,6 @@ var thumbPlaceholder = "thumbPlaceholder-zX1-S";
 var info = "info-8ZlUD";
 var label = "label-y-wTq";
 var meta = "meta-Ihuqr";
-var referenceTag = "referenceTag-gyKQR";
 var css_248z$g = ".root-7OUrP {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border: 1px solid #d9d9d9;\n  border: 1px solid var(--ant-color-border, #d9d9d9);\n  border-radius: 8px;\n  background: #fff;\n  background: var(--ant-color-bg-container, #fff);\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n.root-7OUrP:active {\n  cursor: grabbing;\n}\n\n.rootSelected-Z8LGb {\n  border-color: #1677ff;\n  border-color: var(--ant-color-primary, #1677ff);\n  background: #e6f4ff;\n  background: var(--ant-color-primary-bg, #e6f4ff);\n}\n\n.dragHandle-xo0vD {\n  display: inline-flex;\n  align-items: center;\n  cursor: grab;\n  color: #999;\n  color: var(--ant-color-text-tertiary, #999);\n  touch-action: none;\n}\n\n.dragHandle-xo0vD:active {\n  cursor: grabbing;\n}\n\n.badge-7hZ6T {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  border-radius: 10px;\n  font-size: 12px;\n  font-weight: 600;\n  color: #fff;\n  background: #1677ff;\n  background: var(--ant-color-primary, #1677ff);\n}\n\n.thumb-ePFWB {\n  width: 88px;\n  height: 88px;\n  -o-object-fit: cover;\n     object-fit: cover;\n  border-radius: 6px;\n  flex: 0 0 auto;\n  background: #f0f0f0;\n  background: var(--ant-color-fill-secondary, #f0f0f0);\n  cursor: pointer;\n}\n\n.thumbPlaceholder-zX1-S {\n  width: 88px;\n  height: 88px;\n  border-radius: 6px;\n  background: #f0f0f0;\n  background: var(--ant-color-fill-secondary, #f0f0f0);\n  flex: 0 0 auto;\n}\n\n.info-8ZlUD {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  flex: 1 1 auto;\n}\n\n.label-y-wTq {\n  font-size: 14px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.meta-Ihuqr {\n  font-size: 12px;\n  color: #888;\n  color: var(--ant-color-text-secondary, #888);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n\n.referenceTag-gyKQR {\n  align-self: flex-start;\n  margin-top: 4px;\n  padding: 1px 8px;\n  border-radius: 4px;\n  font-size: 11px;\n  font-weight: 500;\n  color: #1677ff;\n  color: var(--ant-color-primary, #1677ff);\n  background: #e6f4ff;\n  background: var(--ant-color-primary-bg, #e6f4ff);\n  border: 1px solid #91caff;\n  border: 1px solid var(--ant-color-primary-border, #91caff);\n  white-space: nowrap;\n}\n";
 styleInject(css_248z$g);
 
@@ -53766,12 +53770,6 @@ function SortableImageRow(_ref) {
           className: meta,
           title: metaText,
           children: ["(", metaText, ")"]
-        }) : null, selected && typeof orderNumber === 'number' ? /*#__PURE__*/jsx("span", {
-          className: referenceTag,
-          children: t('backoffice.renderapprove.aiImageSelector.referenceTag', {
-            defaultValue: 'used as AI reference ({{order}})',
-            order: orderNumber
-          })
         }) : null]
       })]
     }))
@@ -53847,11 +53845,14 @@ function buildItems(slides, selectedUrls) {
     });
   });
 }
-function orderedSelectedUrls(items) {
+function orderedSelectedImages(items) {
   return items.filter(function (it) {
     return it.selected && it.media.url != null;
   }).map(function (it) {
-    return it.media.url;
+    return {
+      mediaItemRefId: it.media.mediaItemRefId,
+      url: it.media.url
+    };
   });
 }
 
@@ -53894,7 +53895,7 @@ function AIImageSelector(_ref2) {
   }));
   var commit = function commit(next) {
     setItems(next);
-    onChange === null || onChange === void 0 || onChange(orderedSelectedUrls(next));
+    onChange === null || onChange === void 0 || onChange(orderedSelectedImages(next));
   };
   var toggle = function toggle(key) {
     commit(items.map(function (it) {
@@ -53991,25 +53992,40 @@ function AIImageSelector(_ref2) {
  * approve / reject / upload, since there is nothing to decide yet.
  */
 function ImageSelectionWorkspace(_ref) {
+  var _job$renderImages;
   var job = _ref.job,
     slides = _ref.slides,
     selectionDisabled = _ref.selectionDisabled,
     onSelectionChange = _ref.onSelectionChange,
     onOpenFullscreen = _ref.onOpenFullscreen,
+    onUpload = _ref.onUpload,
     actionDisabled = _ref.actionDisabled,
     busy = _ref.busy,
     isFirst = _ref.isFirst,
     shortcutItems = _ref.shortcutItems,
     onPrev = _ref.onPrev,
     onNext = _ref.onNext;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(AIImageSelector, {
       slides: slides,
-      selectedUrls: job.renderImages,
+      selectedUrls: (_job$renderImages = job.renderImages) === null || _job$renderImages === void 0 ? void 0 : _job$renderImages.map(function (image) {
+        return image.url;
+      }),
       disabled: selectionDisabled,
       onChange: onSelectionChange,
       onOpenFullscreen: onOpenFullscreen
-    }, job._id), /*#__PURE__*/jsx(ActionBar, {
+    }, job._id), onUpload && /*#__PURE__*/jsx(Button, {
+      icon: /*#__PURE__*/jsx(UploadOutlined, {}),
+      onClick: onUpload,
+      disabled: selectionDisabled,
+      style: {
+        marginTop: 12
+      },
+      block: true,
+      children: t('backoffice.renderapprove.aiImageSelector.uploadImage')
+    }), /*#__PURE__*/jsx(ActionBar, {
       disabled: actionDisabled,
       busy: busy,
       isFirst: isFirst,
@@ -54410,6 +54426,7 @@ function MetadataPanel(_ref) {
     promptActionBusy = _ref.promptActionBusy,
     onPromptRestart = _ref.onPromptRestart,
     promptWarningMessage = _ref.promptWarningMessage,
+    hidePrompt = _ref.hidePrompt,
     children = _ref.children;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -54446,7 +54463,7 @@ function MetadataPanel(_ref) {
   var promptValue = optimisticPrompt !== null && optimisticPrompt !== void 0 ? optimisticPrompt : jobPromptValue;
   var promptSourceValue = promptValue !== null && promptValue !== void 0 ? promptValue : '';
   var hasPromptSource = promptSourceValue.trim().length > 0;
-  var showPromptPanel = isAiEngine(job === null || job === void 0 ? void 0 : job.engine);
+  var showPromptPanel = isAiEngine(job === null || job === void 0 ? void 0 : job.engine) && !hidePrompt;
   var isDetailsControlled = typeof detailsOpen === 'boolean';
   var isPromptControlled = typeof promptOpen === 'boolean';
   var isDetailsOpen = isDetailsControlled ? detailsOpen : internalSidebarOpen;
@@ -55347,12 +55364,14 @@ function UploadImageModal(_ref) {
   var open = _ref.open,
     renderJob = _ref.renderJob,
     onClose = _ref.onClose,
-    onSuccess = _ref.onSuccess;
+    onSuccess = _ref.onSuccess,
+    uploadOverride = _ref.uploadOverride,
+    skipValidation = _ref.skipValidation,
+    allowedExtensions = _ref.allowedExtensions;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useUploadRenderJobIm = useUploadRenderJobImage(),
-    upload = _useUploadRenderJobIm.upload,
-    uploading = _useUploadRenderJobIm.uploading;
+    upload = _useUploadRenderJobIm.upload;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     selectedFile = _useState2[0],
@@ -55365,10 +55384,14 @@ function UploadImageModal(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     validating = _useState6[0],
     setValidating = _useState6[1];
-  var _useState7 = useState(null),
+  var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    uploadError = _useState8[0],
-    setUploadError = _useState8[1];
+    uploading = _useState8[0],
+    setUploading = _useState8[1];
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    uploadError = _useState10[0],
+    setUploadError = _useState10[1];
   var reset = function reset() {
     setSelectedFile(null);
     setWarnings([]);
@@ -55381,35 +55404,51 @@ function UploadImageModal(_ref) {
   };
   var handleFileSelect = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(file) {
-      var w;
+      var _file$name$split$pop$, _file$name$split$pop, ext, w;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            setSelectedFile(file);
             setUploadError(null);
             setWarnings([]);
-            if (!renderJob) {
-              _context.next = 13;
+            if (!(allowedExtensions && allowedExtensions.length > 0)) {
+              _context.next = 8;
+              break;
+            }
+            ext = (_file$name$split$pop$ = (_file$name$split$pop = file.name.split('.').pop()) === null || _file$name$split$pop === void 0 ? void 0 : _file$name$split$pop.toLowerCase()) !== null && _file$name$split$pop$ !== void 0 ? _file$name$split$pop$ : '';
+            if (allowedExtensions.includes(ext)) {
+              _context.next = 8;
+              break;
+            }
+            setSelectedFile(null);
+            setUploadError(t('backoffice.renderapprove.uploadModal.invalidImageType', {
+              defaultValue: 'Nur folgende Bildformate sind erlaubt: {{formats}}',
+              formats: allowedExtensions.join(', ')
+            }));
+            return _context.abrupt("return", false);
+          case 8:
+            setSelectedFile(file);
+            if (!(!skipValidation && renderJob)) {
+              _context.next = 19;
               break;
             }
             setValidating(true);
-            _context.prev = 5;
-            _context.next = 8;
+            _context.prev = 11;
+            _context.next = 14;
             return validateImageFile(file, renderJob, t);
-          case 8:
+          case 14:
             w = _context.sent;
             setWarnings(w);
-          case 10:
-            _context.prev = 10;
+          case 16:
+            _context.prev = 16;
             setValidating(false);
-            return _context.finish(10);
-          case 13:
+            return _context.finish(16);
+          case 19:
             return _context.abrupt("return", false);
-          case 14:
+          case 20:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[5,, 10, 13]]);
+      }, _callee, null, [[11,, 16, 19]]);
     }));
     return function handleFileSelect(_x) {
       return _ref2.apply(this, arguments);
@@ -55428,25 +55467,30 @@ function UploadImageModal(_ref) {
             return _context2.abrupt("return");
           case 2:
             setUploadError(null);
-            _context2.prev = 3;
-            _context2.next = 6;
-            return upload(selectedFile, renderJob);
-          case 6:
+            setUploading(true);
+            _context2.prev = 4;
+            _context2.next = 7;
+            return (uploadOverride !== null && uploadOverride !== void 0 ? uploadOverride : upload)(selectedFile, renderJob);
+          case 7:
             reset();
             onSuccess === null || onSuccess === void 0 || onSuccess();
-            _context2.next = 13;
+            _context2.next = 14;
             break;
-          case 10:
-            _context2.prev = 10;
-            _context2.t0 = _context2["catch"](3);
+          case 11:
+            _context2.prev = 11;
+            _context2.t0 = _context2["catch"](4);
             setUploadError((_message = _context2.t0 === null || _context2.t0 === void 0 ? void 0 : _context2.t0.message) !== null && _message !== void 0 ? _message : t('backoffice.renderapprove.uploadModal.uploadFailed', {
               defaultValue: 'Upload fehlgeschlagen'
             }));
-          case 13:
+          case 14:
+            _context2.prev = 14;
+            setUploading(false);
+            return _context2.finish(14);
+          case 17:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[3, 10]]);
+      }, _callee2, null, [[4, 11, 14, 17]]);
     }));
     return function handleUpload() {
       return _ref3.apply(this, arguments);
@@ -55474,7 +55518,9 @@ function UploadImageModal(_ref) {
     children: /*#__PURE__*/jsxs(Spin, {
       spinning: validating || uploading,
       children: [/*#__PURE__*/jsxs(Upload$2.Dragger, {
-        accept: "image/*",
+        accept: allowedExtensions && allowedExtensions.length > 0 ? allowedExtensions.map(function (e) {
+          return ".".concat(e);
+        }).join(',') : 'image/*',
         beforeUpload: handleFileSelect,
         maxCount: 1,
         showUploadList: !!selectedFile,
@@ -56165,12 +56211,12 @@ function fetchJson(_x, _x2) {
   return _fetchJson.apply(this, arguments);
 }
 function _fetchJson() {
-  _fetchJson = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(url, jwt) {
+  _fetchJson = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(url, jwt) {
     var response;
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          _context2.next = 2;
+          _context3.next = 2;
           return fetch(url, {
             headers: _objectSpread$g({
               'Content-Type': 'application/json'
@@ -56179,24 +56225,24 @@ function _fetchJson() {
             } : {})
           });
         case 2:
-          response = _context2.sent;
+          response = _context3.sent;
           if (response.ok) {
-            _context2.next = 5;
+            _context3.next = 5;
             break;
           }
           throw new DivaError("Request failed: ".concat(response.status, " ").concat(response.statusText), {
             code: 'RENDERAPPROVE_FETCH_FAILED'
           });
         case 5:
-          _context2.next = 7;
+          _context3.next = 7;
           return response.json();
         case 7:
-          return _context2.abrupt("return", _context2.sent);
+          return _context3.abrupt("return", _context3.sent);
         case 8:
         case "end":
-          return _context2.stop();
+          return _context3.stop();
       }
-    }, _callee2);
+    }, _callee3);
   }));
   return _fetchJson.apply(this, arguments);
 }
@@ -56233,22 +56279,22 @@ function fetchProductMedia(_x3, _x4, _x5, _x6, _x7) {
   return _fetchProductMedia.apply(this, arguments);
 }
 function _fetchProductMedia() {
-  _fetchProductMedia = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(catalogService, baseUrl, jwt, productId, excludeUrl) {
+  _fetchProductMedia = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(catalogService, baseUrl, jwt, productId, excludeUrl) {
     var data, product, media, sorted, seen, result, _iterator2, _step2, _mapped$metadata, item, mapped, ref;
-    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
         case 0:
-          _context4.next = 2;
+          _context5.next = 2;
           return fetchJson("".concat(catalogService, "/v1/products/").concat(encodeURIComponent(productId), "/list"), jwt);
         case 2:
-          data = _context4.sent;
+          data = _context5.sent;
           product = Array.isArray(data) ? data[0] : undefined;
           media = product === null || product === void 0 ? void 0 : product.media;
           if (!(!Array.isArray(media) || media.length === 0)) {
-            _context4.next = 7;
+            _context5.next = 7;
             break;
           }
-          return _context4.abrupt("return", []);
+          return _context5.abrupt("return", []);
         case 7:
           sorted = _toConsumableArray(media).sort(function (a, b) {
             var pa = typeof (a === null || a === void 0 ? void 0 : a.position) === 'number' ? a.position : Number.MAX_SAFE_INTEGER;
@@ -56259,42 +56305,45 @@ function _fetchProductMedia() {
           if (excludeUrl) seen.add(excludeUrl);
           result = [];
           _iterator2 = _createForOfIteratorHelper$9(sorted);
-          _context4.prev = 12;
+          _context5.prev = 12;
           _iterator2.s();
         case 14:
           if ((_step2 = _iterator2.n()).done) {
-            _context4.next = 32;
+            _context5.next = 32;
             break;
           }
           item = _step2.value;
           if (!(item !== null && item !== void 0 && item.functionType && EXCLUDED_FUNCTION_TYPES.has(item.functionType))) {
-            _context4.next = 18;
+            _context5.next = 18;
             break;
           }
-          return _context4.abrupt("continue", 30);
+          return _context5.abrupt("continue", 30);
         case 18:
           if (!(item !== null && item !== void 0 && item.mediaType && !ALLOWED_MEDIA_TYPES.has(item.mediaType))) {
-            _context4.next = 20;
+            _context5.next = 20;
             break;
           }
-          return _context4.abrupt("continue", 30);
+          return _context5.abrupt("continue", 30);
         case 20:
           mapped = toMedia(item);
           if (!(!mapped || !mapped.url)) {
-            _context4.next = 23;
+            _context5.next = 23;
             break;
           }
-          return _context4.abrupt("continue", 30);
+          return _context5.abrupt("continue", 30);
         case 23:
           if (!seen.has(mapped.url)) {
-            _context4.next = 25;
+            _context5.next = 25;
             break;
           }
-          return _context4.abrupt("continue", 30);
+          return _context5.abrupt("continue", 30);
         case 25:
           seen.add(mapped.url);
           ref = typeof (item === null || item === void 0 ? void 0 : item.ref) === 'string' ? item.ref : undefined;
-          if (ref) mapped.id = ref;
+          if (ref) {
+            mapped.id = ref;
+            mapped.mediaItemRefId = ref;
+          }
           // Base metadata already available from the product list.
           mapped.metadata = _objectSpread$g(_objectSpread$g({}, item !== null && item !== void 0 && item.functionType ? {
             functionType: item.functionType
@@ -56304,38 +56353,38 @@ function _fetchProductMedia() {
             ref: ref
           });
         case 30:
-          _context4.next = 14;
+          _context5.next = 14;
           break;
         case 32:
-          _context4.next = 37;
+          _context5.next = 37;
           break;
         case 34:
-          _context4.prev = 34;
-          _context4.t0 = _context4["catch"](12);
-          _iterator2.e(_context4.t0);
+          _context5.prev = 34;
+          _context5.t0 = _context5["catch"](12);
+          _iterator2.e(_context5.t0);
         case 37:
-          _context4.prev = 37;
+          _context5.prev = 37;
           _iterator2.f();
-          return _context4.finish(37);
+          return _context5.finish(37);
         case 40:
-          _context4.next = 42;
+          _context5.next = 42;
           return Promise.all(result.map(/*#__PURE__*/function () {
-            var _ref7 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(_ref6) {
+            var _ref9 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(_ref8) {
               var media, ref, _yield$Promise$allSet3, _yield$Promise$allSet4, mediaItemRes, refRes, item, _media$metadata, payload, refDoc, _media$metadata2;
-              return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-                while (1) switch (_context3.prev = _context3.next) {
+              return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+                while (1) switch (_context4.prev = _context4.next) {
                   case 0:
-                    media = _ref6.media, ref = _ref6.ref;
+                    media = _ref8.media, ref = _ref8.ref;
                     if (ref) {
-                      _context3.next = 3;
+                      _context4.next = 3;
                       break;
                     }
-                    return _context3.abrupt("return");
+                    return _context4.abrupt("return");
                   case 3:
-                    _context3.next = 5;
+                    _context4.next = 5;
                     return Promise.allSettled([fetchJson("".concat(baseUrl, "/v1/mediaitemref/").concat(encodeURIComponent(ref), "/mediaitem"), jwt), fetchJson("".concat(baseUrl, "/v1/mediaitems/refs?filter=").concat(encodeURIComponent("{_id,eq,'".concat(ref, "'}"))), jwt)]);
                   case 5:
-                    _yield$Promise$allSet3 = _context3.sent;
+                    _yield$Promise$allSet3 = _context4.sent;
                     _yield$Promise$allSet4 = _slicedToArray(_yield$Promise$allSet3, 2);
                     mediaItemRes = _yield$Promise$allSet4[0];
                     refRes = _yield$Promise$allSet4[1];
@@ -56355,23 +56404,23 @@ function _fetchProductMedia() {
                     }
                   case 11:
                   case "end":
-                    return _context3.stop();
+                    return _context4.stop();
                 }
-              }, _callee3);
+              }, _callee4);
             }));
-            return function (_x12) {
-              return _ref7.apply(this, arguments);
+            return function (_x13) {
+              return _ref9.apply(this, arguments);
             };
           }()));
         case 42:
-          return _context4.abrupt("return", result.map(function (r) {
+          return _context5.abrupt("return", result.map(function (r) {
             return r.media;
           }));
         case 43:
         case "end":
-          return _context4.stop();
+          return _context5.stop();
       }
-    }, _callee4, null, [[12, 34, 37, 40]]);
+    }, _callee5, null, [[12, 34, 37, 40]]);
   }));
   return _fetchProductMedia.apply(this, arguments);
 }
@@ -56387,47 +56436,47 @@ function resolveMediaItem(_x8, _x9, _x10, _x11) {
  * session hook can call them without depending on the currently-loaded job.
  */
 function _resolveMediaItem() {
-  _resolveMediaItem = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(baseUrl, jwt, mediaItemId, mediaItemRef) {
+  _resolveMediaItem = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6(baseUrl, jwt, mediaItemId, mediaItemRef) {
     var item, media, _item, _media;
-    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
-      while (1) switch (_context5.prev = _context5.next) {
+    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
         case 0:
           if (!mediaItemRef) {
-            _context5.next = 7;
+            _context6.next = 7;
             break;
           }
-          _context5.next = 3;
+          _context6.next = 3;
           return fetchJson("".concat(baseUrl, "/v1/mediaitemref/").concat(encodeURIComponent(mediaItemRef), "/mediaitem"), jwt);
         case 3:
-          item = _context5.sent;
+          item = _context6.sent;
           media = toMedia(item);
           if (!media) {
-            _context5.next = 7;
+            _context6.next = 7;
             break;
           }
-          return _context5.abrupt("return", media);
+          return _context6.abrupt("return", media);
         case 7:
           if (!mediaItemId) {
-            _context5.next = 14;
+            _context6.next = 14;
             break;
           }
-          _context5.next = 10;
+          _context6.next = 10;
           return fetchJson("".concat(baseUrl, "/v1/mediaitems/").concat(encodeURIComponent(mediaItemId)), jwt);
         case 10:
-          _item = _context5.sent;
+          _item = _context6.sent;
           _media = toMedia(_item);
           if (!_media) {
-            _context5.next = 14;
+            _context6.next = 14;
             break;
           }
-          return _context5.abrupt("return", _media);
+          return _context6.abrupt("return", _media);
         case 14:
-          return _context5.abrupt("return", null);
+          return _context6.abrupt("return", null);
         case 15:
         case "end":
-          return _context5.stop();
+          return _context6.stop();
       }
-    }, _callee5);
+    }, _callee6);
   }));
   return _resolveMediaItem.apply(this, arguments);
 }
@@ -56472,21 +56521,21 @@ function useRenderJobData(id, refreshKey) {
     setError(undefined);
     setJob(undefined);
     setImages({});
-    _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var _fetchedJob$realTimeR, fetchedJob, left, initialSlides, mediaItemId, mediaItemRef, productId, rightPromise, productPromise, _yield$Promise$allSet, _yield$Promise$allSet2, rightResult, productResult, right, _rightResult$value, _rightResult$reason, productMedia, _productResult$reason, renderImageUrls, productByUrl, _iterator, _step, m, renderImageSet, remainingProduct, leftSlides, renderImageSlides, previewAfter, _message, message;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+    _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _fetchedJob$realTimeR, fetchedJob, left, initialSlides, mediaItemId, mediaItemRef, productId, rightPromise, productPromise, _yield$Promise$allSet, _yield$Promise$allSet2, rightResult, productResult, right, _rightResult$value, _rightResult$reason, productMedia, _productResult$reason, renderImages, productByUrl, _iterator, _step, m, renderImageSet, remainingProduct, leftSlides, renderImageSlides, previewAfter, _message, message;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            _context.prev = 0;
-            _context.next = 3;
+            _context2.prev = 0;
+            _context2.next = 3;
             return fetchJson("".concat(baseUrl, "/renderjobs/").concat(encodeURIComponent(id)), jwt);
           case 3:
-            fetchedJob = _context.sent;
+            fetchedJob = _context2.sent;
             if (!cancelled) {
-              _context.next = 6;
+              _context2.next = 6;
               break;
             }
-            return _context.abrupt("return");
+            return _context2.abrupt("return");
           case 6:
             setJob(fetchedJob);
 
@@ -56508,18 +56557,18 @@ function useRenderJobData(id, refreshKey) {
             // failure cannot block the right panel and vice versa.
             rightPromise = mediaItemId || mediaItemRef ? resolveMediaItem(baseUrl, jwt, mediaItemId, mediaItemRef) : Promise.resolve(null);
             productPromise = catalogService && typeof productId === 'string' && productId.length > 0 ? fetchProductMedia(catalogService, baseUrl, jwt, productId, left.url) : Promise.resolve([]);
-            _context.next = 17;
+            _context2.next = 17;
             return Promise.allSettled([rightPromise, productPromise]);
           case 17:
-            _yield$Promise$allSet = _context.sent;
+            _yield$Promise$allSet = _context2.sent;
             _yield$Promise$allSet2 = _slicedToArray(_yield$Promise$allSet, 2);
             rightResult = _yield$Promise$allSet2[0];
             productResult = _yield$Promise$allSet2[1];
             if (!cancelled) {
-              _context.next = 23;
+              _context2.next = 23;
               break;
             }
-            return _context.abrupt("return");
+            return _context2.abrupt("return");
           case 23:
             if (rightResult.status === 'fulfilled') {
               right = (_rightResult$value = rightResult.value) !== null && _rightResult$value !== void 0 ? _rightResult$value : {
@@ -56545,8 +56594,8 @@ function useRenderJobData(id, refreshKey) {
             // The realtime preview is shown first only when there are no renderImages;
             // once renderImages exist it comes right after them, and only if it is
             // not already one of them.
-            renderImageUrls = Array.isArray(fetchedJob === null || fetchedJob === void 0 ? void 0 : fetchedJob.renderImages) ? fetchedJob.renderImages.filter(function (u) {
-              return typeof u === 'string' && u.length > 0;
+            renderImages = Array.isArray(fetchedJob === null || fetchedJob === void 0 ? void 0 : fetchedJob.renderImages) ? fetchedJob.renderImages.filter(function (image) {
+              return typeof (image === null || image === void 0 ? void 0 : image.url) === 'string' && image.url.length > 0;
             }) : [];
             productByUrl = new Map();
             _iterator = _createForOfIteratorHelper$9(productMedia);
@@ -56560,16 +56609,24 @@ function useRenderJobData(id, refreshKey) {
             } finally {
               _iterator.f();
             }
-            renderImageSet = new Set(renderImageUrls);
+            renderImageSet = new Set(renderImages.map(function (image) {
+              return image.url;
+            }));
             remainingProduct = productMedia.filter(function (m) {
               return !(m.url && renderImageSet.has(m.url));
             });
-            if (renderImageUrls.length > 0) {
-              renderImageSlides = renderImageUrls.map(function (url) {
+            if (renderImages.length > 0) {
+              // Product media (rich metadata) wins on url match; otherwise build a
+              // minimal slide that carries the stored MediaItemRef id so uploaded
+              // images keep their ref when re-selected.
+              renderImageSlides = renderImages.map(function (_ref6) {
                 var _productByUrl$get;
+                var url = _ref6.url,
+                  mediaItemRefId = _ref6.mediaItemRefId;
                 return url === left.url ? left : (_productByUrl$get = productByUrl.get(url)) !== null && _productByUrl$get !== void 0 ? _productByUrl$get : {
                   url: url,
-                  mediaType: 'PCT'
+                  mediaType: 'PCT',
+                  mediaItemRefId: mediaItemRefId
                 };
               });
               previewAfter = left.url != null && !renderImageSet.has(left.url) ? [left] : [];
@@ -56577,49 +56634,183 @@ function useRenderJobData(id, refreshKey) {
             } else {
               leftSlides = [left].concat(_toConsumableArray(remainingProduct));
             }
+
+            // Uploaded AI input images are not part of the product media, so their
+            // display name (filename) is resolved from the MediaItemRef (best-effort).
+            _context2.next = 35;
+            return Promise.all(leftSlides.map(/*#__PURE__*/function () {
+              var _ref7 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(slide) {
+                var item;
+                return _regeneratorRuntime.wrap(function _callee$(_context) {
+                  while (1) switch (_context.prev = _context.next) {
+                    case 0:
+                      if (!(slide.name || !slide.mediaItemRefId)) {
+                        _context.next = 2;
+                        break;
+                      }
+                      return _context.abrupt("return");
+                    case 2:
+                      _context.prev = 2;
+                      _context.next = 5;
+                      return fetchJson("".concat(baseUrl, "/v1/mediaitemref/").concat(encodeURIComponent(slide.mediaItemRefId), "/mediaitem"), jwt);
+                    case 5:
+                      item = _context.sent;
+                      if (typeof (item === null || item === void 0 ? void 0 : item.name) === 'string' && item.name.length > 0) slide.name = item.name;
+                      _context.next = 11;
+                      break;
+                    case 9:
+                      _context.prev = 9;
+                      _context.t0 = _context["catch"](2);
+                    case 11:
+                    case "end":
+                      return _context.stop();
+                  }
+                }, _callee, null, [[2, 9]]);
+              }));
+              return function (_x12) {
+                return _ref7.apply(this, arguments);
+              };
+            }()));
+          case 35:
+            if (!cancelled) {
+              _context2.next = 37;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 37:
             setImages({
               left: left,
               leftSlides: leftSlides,
               right: right
             });
-            _context.next = 43;
+            _context2.next = 47;
             break;
-          case 36:
-            _context.prev = 36;
-            _context.t0 = _context["catch"](0);
+          case 40:
+            _context2.prev = 40;
+            _context2.t0 = _context2["catch"](0);
             if (!cancelled) {
-              _context.next = 40;
+              _context2.next = 44;
               break;
             }
-            return _context.abrupt("return");
-          case 40:
-            message = (_message = _context.t0 === null || _context.t0 === void 0 ? void 0 : _context.t0.message) !== null && _message !== void 0 ? _message : 'Unknown error';
+            return _context2.abrupt("return");
+          case 44:
+            message = (_message = _context2.t0 === null || _context2.t0 === void 0 ? void 0 : _context2.t0.message) !== null && _message !== void 0 ? _message : 'Unknown error';
             LOG$4.error(new DivaError("Failed to load render job ".concat(id, ": ").concat(message), {
               code: 'RENDERAPPROVE_LOAD_JOB'
             }));
             setError(message);
-          case 43:
-            _context.prev = 43;
+          case 47:
+            _context2.prev = 47;
             if (!cancelled) setLoading(false);
-            return _context.finish(43);
-          case 46:
+            return _context2.finish(47);
+          case 50:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
-      }, _callee, null, [[0, 36, 43, 46]]);
+      }, _callee2, null, [[0, 40, 47, 50]]);
     }))();
     return function () {
       cancelled = true;
     };
   }, [id, baseUrl, catalogService, jwt, t, refreshKey]);
+  var applyRenderImages = useCallback(function (renderImages) {
+    setJob(function (prev) {
+      return prev ? _objectSpread$g(_objectSpread$g({}, prev), {}, {
+        renderImages: renderImages
+      }) : prev;
+    });
+  }, []);
   return useMemo(function () {
     return {
       job: job,
       images: images,
       loading: loading,
-      error: error
+      error: error,
+      applyRenderImages: applyRenderImages
     };
-  }, [job, images, loading, error]);
+  }, [job, images, loading, error, applyRenderImages]);
+}
+
+/**
+ * Uploads an image as a MediaItem/MediaItemRef (same asset pipeline as the
+ * regular RenderApprove upload) and appends it to the render job's
+ * `renderImages` so it becomes one of the AI input images. Unlike
+ * `useUploadRenderJobImage` it does not touch `mediaItemRef`/`fileUrl` or change
+ * the render job state - the job stays in the image-selection phase.
+ */
+function useUploadRenderImage() {
+  var _root$configurationSt, _root$configurationSt2, _root$dataStore$jwt;
+  var root = useStore();
+  var baseUrl = (_root$configurationSt = (_root$configurationSt2 = root.configurationStore.apiConfig) === null || _root$configurationSt2 === void 0 ? void 0 : _root$configurationSt2.mediaService) !== null && _root$configurationSt !== void 0 ? _root$configurationSt : '';
+  var jwt = (_root$dataStore$jwt = root.dataStore.jwt) !== null && _root$dataStore$jwt !== void 0 ? _root$dataStore$jwt : '';
+  var patchJob = useUpdateRenderJobPatch();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    uploading = _useState2[0],
+    setUploading = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    error = _useState4[0],
+    setError = _useState4[1];
+  var upload = useCallback(/*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(file, job) {
+      var _job$organization, _job$renderImages, result, newImage, renderImages, op, err;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setUploading(true);
+            setError(null);
+            _context.prev = 2;
+            _context.next = 5;
+            return uploadMediaItem(baseUrl, jwt, {
+              organizationId: (_job$organization = job.organization) !== null && _job$organization !== void 0 ? _job$organization : '',
+              file: file,
+              mediaType: 'PCT',
+              functionType: 'SHO'
+            });
+          case 5:
+            result = _context.sent;
+            newImage = {
+              mediaItemRefId: result.ref._id,
+              url: result.ref.url
+            };
+            renderImages = [].concat(_toConsumableArray((_job$renderImages = job.renderImages) !== null && _job$renderImages !== void 0 ? _job$renderImages : []), [newImage]); // RFC 6902: `add` is rejected when the path already exists, so replace
+            // when the job already carries a renderImages list.
+            op = job.renderImages === undefined ? 'add' : 'replace';
+            _context.next = 11;
+            return patchJob(job._id, [{
+              op: op,
+              path: '/renderImages',
+              value: renderImages
+            }], true);
+          case 11:
+            _context.next = 18;
+            break;
+          case 13:
+            _context.prev = 13;
+            _context.t0 = _context["catch"](2);
+            err = _context.t0;
+            setError(err);
+            throw err;
+          case 18:
+            _context.prev = 18;
+            setUploading(false);
+            return _context.finish(18);
+          case 21:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 13, 18, 21]]);
+    }));
+    return function (_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [baseUrl, jwt, patchJob]);
+  return {
+    upload: upload,
+    uploading: uploading,
+    error: error
+  };
 }
 
 /** Return `false` when the shortcut should not run (e.g. modal open) so default browser behavior is preserved. */
@@ -56746,7 +56937,7 @@ function focusBackConfirmButton(button) {
   ok === null || ok === void 0 || ok.focus();
 }
 function RenderApprove() {
-  var _data$job, _data$job2, _data$images$right2, _data$images$right3, _data$images$leftSlid, _data$job3, _data$job4, _imageFullscreen$name;
+  var _data$job, _data$job2, _data$images$right2, _data$images$right3, _data$images$leftSlid, _data$job3, _data$job4, _data$job5, _imageFullscreen$name;
   var store = useStore();
   var navigate = useNavigate();
   var _useTranslation = useTranslation(),
@@ -56788,10 +56979,16 @@ function RenderApprove() {
     _useState16 = _slicedToArray(_useState15, 2),
     uploadOpen = _useState16[0],
     setUploadOpen = _useState16[1];
-  var _useState17 = useState(0),
+  var _useState17 = useState(false),
     _useState18 = _slicedToArray(_useState17, 2),
-    dataRefreshKey = _useState18[0],
-    setDataRefreshKey = _useState18[1];
+    selectionUploadOpen = _useState18[0],
+    setSelectionUploadOpen = _useState18[1];
+  var _useUploadRenderImage = useUploadRenderImage(),
+    uploadRenderImage = _useUploadRenderImage.upload;
+  var _useState19 = useState(0),
+    _useState20 = _slicedToArray(_useState19, 2),
+    dataRefreshKey = _useState20[0],
+    setDataRefreshKey = _useState20[1];
   var data = useRenderJobData(session.currentId, dataRefreshKey);
   var leftSwiperRef = useRef(null);
   var isAiJob = typeof ((_data$job = data.job) === null || _data$job === void 0 ? void 0 : _data$job.engine) === 'string' && data.job.engine.trim().toLowerCase() === 'ai';
@@ -56800,7 +56997,7 @@ function RenderApprove() {
   // side-by-side comparison view is shown as before.
   var showImageSelector = isAiJob && typeof ((_data$job2 = data.job) === null || _data$job2 === void 0 ? void 0 : _data$job2.state) === 'number' && data.job.state < RENDER_JOB_STATE.inChecking;
   var mode = showImageSelector ? 'select' : 'approve';
-  var shortcutItems = buildShortcutItems(mode, isAiJob);
+  var shortcutItems = buildShortcutItems(mode, isAiJob && !showImageSelector);
   // On the finish screen `data.job` is gone, so `showImageSelector` flips to
   // false. Latch whether this session ran in image-selector mode (sessions are
   // homogeneous) so header/finish-screen stay consistent across that screen.
@@ -57121,10 +57318,10 @@ function RenderApprove() {
   };
 
   // Persists the ordered selection of input images on the render job. The
-  // `renderImages` array (CDN urls, in order) is the source of truth the AI
-  // generation consumes.
+  // `renderImages` array (CDN url + MediaItemRef id, in order) is the source of
+  // truth the AI generation consumes.
   var persistImageSelection = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(orderedUrls) {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(renderImages) {
       var op;
       return _regeneratorRuntime.wrap(function _callee4$(_context4) {
         while (1) switch (_context4.prev = _context4.next) {
@@ -57135,30 +57332,33 @@ function RenderApprove() {
             }
             return _context4.abrupt("return");
           case 2:
+            // Optimistically update the in-memory job so re-renders (and a subsequent
+            // upload) use this order instead of snapping back to the last fetched one.
+            data.applyRenderImages(renderImages);
             // RFC 6902: `add` is rejected when the path already exists (AI jobs often
             // ship with a default renderImages list), so replace when it's present.
             op = data.job.renderImages === undefined ? 'add' : 'replace';
-            _context4.prev = 3;
-            _context4.next = 6;
+            _context4.prev = 4;
+            _context4.next = 7;
             return updateRenderJobPatch(data.job._id, [{
               op: op,
               path: '/renderImages',
-              value: orderedUrls
+              value: renderImages
             }]);
-          case 6:
-            _context4.next = 11;
+          case 7:
+            _context4.next = 12;
             break;
-          case 8:
-            _context4.prev = 8;
-            _context4.t0 = _context4["catch"](3);
+          case 9:
+            _context4.prev = 9;
+            _context4.t0 = _context4["catch"](4);
             message.error(t('backoffice.renderapprove.aiImageSelector.saveFailed', {
               defaultValue: 'Bildauswahl konnte nicht gespeichert werden.'
             }));
-          case 11:
+          case 12:
           case "end":
             return _context4.stop();
         }
-      }, _callee4, null, [[3, 8]]);
+      }, _callee4, null, [[4, 9]]);
     }));
     return function persistImageSelection(_x2) {
       return _ref3.apply(this, arguments);
@@ -57295,12 +57495,18 @@ function RenderApprove() {
         promptActionBusy: promptRestarting,
         onPromptRestart: onPromptRestart,
         promptWarningMessage: !showImageSelector ? t('backoffice.renderapprove.prompt.warningMessage') : undefined,
+        hidePrompt: showImageSelector,
         children: showImageSelector && data.job ? /*#__PURE__*/jsx(ImageSelectionWorkspace, {
           job: data.job,
-          slides: (_data$images$leftSlid = data.images.leftSlides) !== null && _data$images$leftSlid !== void 0 ? _data$images$leftSlid : [],
+          slides: ((_data$images$leftSlid = data.images.leftSlides) !== null && _data$images$leftSlid !== void 0 ? _data$images$leftSlid : []).filter(function (slide) {
+            return slide.mediaType !== 'AR';
+          }),
           selectionDisabled: session.isCurrentReadOnly || session.isUpdating,
           onSelectionChange: persistImageSelection,
           onOpenFullscreen: setImageFullscreen,
+          onUpload: function onUpload() {
+            return setSelectionUploadOpen(true);
+          },
           actionDisabled: data.loading || !data.job,
           busy: session.isUpdating || promptRestarting,
           isFirst: session.isFirst,
@@ -57353,6 +57559,21 @@ function RenderApprove() {
           return k + 1;
         });
       }
+    }), /*#__PURE__*/jsx(UploadImageModal, {
+      open: selectionUploadOpen,
+      renderJob: (_data$job5 = data.job) !== null && _data$job5 !== void 0 ? _data$job5 : null,
+      uploadOverride: uploadRenderImage,
+      skipValidation: true,
+      allowedExtensions: ['webp', 'png', 'jpg', 'jpeg'],
+      onClose: function onClose() {
+        return setSelectionUploadOpen(false);
+      },
+      onSuccess: function onSuccess() {
+        setSelectionUploadOpen(false);
+        setDataRefreshKey(function (k) {
+          return k + 1;
+        });
+      }
     }), /*#__PURE__*/jsx(FullscreenViewer, {
       open: fullscreenSide !== null,
       media: fullscreenMedia,